/* ============================================================================
   PANTHER POOLS — SITE STYLES
   ============================================================================
   Loads after tokens.css. Every colour, radius, shadow, duration and spacing
   value here resolves to a token. No raw brand hex values.

   SPACING: use the design-system scale only —
   4, 8, 12, 16, 24, 32, 40, 56, 72, 96, 128 (--space-1 … --space-11).
   Raw px is allowed only for hairlines (1-3px), radii, and control heights.

   THE ONE RED RULE: --pp-red-* and --shadow-brand may appear in exactly three
   rules in this file: .btn--primary, .nav-cta, .nav-panel-cta. Nothing else on
   the site is red. If you add a fourth, you have broken the brand.

   TYPE: all-sans. Headings (h1-h4 and anything styled like one) run on
   Varela Round via --font-display; body copy stays on Manrope via
   --font-core. No serif face may enter either font stack.

   Contents
     1.  Base / reset
     2.  Layout: container, section, split
     3.  Scroll reveal
     3b. Service pages
     4.  Buttons
     5.  Cards
     6.  Marketing primitives
     7.  Header + navigation
     8.  Footer
     9.  Home hero
     10. Interior page headers
     11. About page
     12. Service Areas page
     13. Blog page
   ============================================================================ */


/* ==========================================================================
   1. BASE / RESET   (folded in from the DS tokens/base.css)
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font-core);
  font-size:var(--type-body-size);
  line-height:var(--type-body-leading);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--text-strong);
  margin:0;
  line-height:var(--leading-snug);
  letter-spacing:var(--tracking-snug);
  font-weight:var(--weight-bold);
}
h1{
  font-weight:var(--weight-extrabold);
  font-size:var(--text-5xl);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight);
}
h2{
  font-weight:var(--weight-bold);
  font-size:var(--text-3xl);
  line-height:var(--leading-tight);
}
h3{font-size:var(--text-xl)}
h4{font-size:var(--text-md)}

@media (max-width:640px){
  h2{font-size:var(--text-2xl)}
}

p{margin:0}
img{max-width:100%;height:auto;display:block}

a{
  color:var(--text-link);
  text-decoration:none;
  transition:color var(--duration-base) var(--ease-standard);
}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}

:focus-visible{outline:none;box-shadow:var(--ring-focus)}
::selection{background:var(--pp-blue-200);color:var(--pp-navy-900)}

/* Anchor targets clear the fixed header */
[id]{scroll-margin-top:calc(var(--header-h) + var(--space-5))}

.skip-link{
  position:absolute;
  left:var(--space-4);
  top:calc(-1 * var(--space-11));
  z-index:400;
  padding:var(--space-3) var(--space-5);
  background:var(--surface-page);
  color:var(--text-strong);
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  transition:top var(--duration-base) var(--ease-standard);
}
.skip-link:focus{top:var(--space-4);text-decoration:none}

.visually-hidden{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* The fixed header does not occupy flow, so interior pages need the offset.
   The home hero supplies its own top padding instead. */
.page-main{padding-top:var(--header-h)}
body.has-overlay-header .page-main{padding-top:0}


/* ==========================================================================
   2. LAYOUT — container, section, split
   --------------------------------------------------------------------------
   Section backgrounds span the full viewport. Max-width lives on the inner
   .container, never on the section. Sections carry vertical padding only.
   ========================================================================== */
.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--container-pad-desktop);
}
@media (max-width:1024px){ .container{padding:0 var(--space-5)} }
@media (max-width:640px){  .container{padding:0 var(--container-pad-mobile)} }

.container--narrow{max-width:var(--container-narrow)}

.section{padding:var(--section-y) 0}
.section--tight{padding:var(--section-y-tight) 0}
.section--subtle{background:var(--surface-muted)}
.section--tint{background:var(--gradient-water)}
.section--deep{background:var(--gradient-deep);color:var(--text-inverse)}
.section--deep h1,.section--deep h2,.section--deep h3,.section--deep h4{color:var(--text-inverse)}
.section--deep p{color:var(--text-inverse-muted)}

/* Two-column text + media. Text is authored first in the DOM; the media is
   pulled above it on mobile with order:-1. Where the media is already first
   in the DOM, skip the order override (not currently used on any page, but
   safe to omit rather than force). */
.split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:var(--space-9);
  align-items:center;
}

@media (max-width:1024px){
  .split{grid-template-columns:1fr;gap:var(--space-6)}
  .split-media{order:-1}
}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
@media (max-width:1024px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

.stack{display:flex;flex-direction:column;gap:var(--space-5)}
.stack--sm{gap:var(--space-3)}
.stack--lg{gap:var(--space-6)}


/* ==========================================================================
   3. SCROLL REVEAL
   Delays are set by JS as --reveal-delay; never hand-managed per element.
   ========================================================================== */
/* Scoped to .js, which an inline script in <head> sets before first paint.
   Without that guard, any failure to run main.js (blocked script, JS error,
   observer never firing) leaves every section on the page permanently
   invisible. Defaulting to visible fails safe: worst case the animation is
   skipped and the content simply shows. */
/* Implemented as a transition rather than a keyframe animation. Same timing,
   easing, delay variable and class names, but the revealed state is a real
   declared style instead of an animation end-state.
   Why it matters: with `animation: ... forwards` the element only reaches
   opacity 1 if the animation actually runs, so anywhere it does not (animations
   disabled, a paused/backgrounded renderer, an interrupted paint) the content
   stays permanently invisible. `both` fill is worse still, pinning the
   from-state. A transition fails safe: if it never runs, the element simply
   appears with no animation. Post-reveal :hover transforms keep working
   because transform resolves to `none` rather than being held by an animation. */
.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--reveal-duration) var(--reveal-ease) var(--reveal-delay,0ms),
             transform var(--reveal-duration) var(--reveal-ease) var(--reveal-delay,0ms);
}
.js .reveal.in-view{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal.in-view{opacity:1;transform:none;animation:none}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ==========================================================================
   3b. SERVICES PAGES
   ========================================================================== */
.interior-hero{
  position:relative;
  min-height:calc(500px + var(--header-h));
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
  color:var(--text-inverse);
}
.interior-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(4,24,42,.90) 0%,rgba(4,24,42,.72) 48%,rgba(4,24,42,.18) 82%),
    linear-gradient(0deg,rgba(4,24,42,.62) 0%,rgba(4,24,42,0) 62%);
}
.interior-hero__media{
  position:absolute;
  inset:0;
  z-index:-2;
}
.interior-hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
}
.interior-hero__container{width:100%}
.interior-hero__inner{
  max-width:840px;
  padding:var(--space-10) 0 var(--space-9);
}
.interior-hero--centered .interior-hero__inner{
  margin-inline:auto;
  text-align:center;
}
.interior-hero--centered .interior-hero__lede{margin-inline:auto}
.interior-hero__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-3);
  margin-top:var(--space-6);
}
.interior-hero.interior-hero--standalone{
  min-height:calc(500px + var(--header-h) + var(--space-10));
}
.interior-hero.interior-hero--standalone .interior-hero__inner{
  /* The footer's curved dome extends 120px upward. The extra safe zone keeps
     the buttons clear without forcing the eyebrow toward the header. */
  padding-bottom:calc(var(--space-11) + var(--space-8));
}
.interior-hero h1{
  margin-top:var(--space-4);
  color:var(--text-inverse);
  font-size:clamp(40px,5vw,60px);
}
.interior-hero__lede{
  max-width:52ch;
  margin-top:var(--space-5);
  color:rgba(255,255,255,.90);
  font-size:var(--text-xl);
  line-height:var(--leading-normal);
}

.service-type-grid{margin-top:var(--space-7)}
.service-scope-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-5);
  margin-top:var(--space-7);
}
.service-scope-card{height:100%}
.service-scope-card h3,
.service-benefit-card h3{
  margin-top:var(--space-5);
  font-size:var(--text-xl);
}
.service-detail-list{
  margin:var(--space-5) 0 0;
  padding:0;
  list-style:none;
}
.service-detail-list li{
  padding:var(--space-3) 0;
  border-top:1px solid var(--border-subtle);
  color:var(--text-body);
  font-size:var(--text-sm);
  line-height:var(--leading-normal);
}
.service-detail-list li:last-child{padding-bottom:0}

.service-expectations{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:var(--space-9);
  align-items:center;
}
.service-expectations__lede{
  max-width:58ch;
  margin-top:var(--space-5);
  font-size:var(--text-lg);
}
.service-responsibility-list{
  display:grid;
  gap:var(--space-4);
  margin:var(--space-7) 0 0;
  padding:0;
  list-style:none;
}
.service-responsibility-list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--space-4);
  align-items:center;
}
.service-responsibility-list li > span{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  border:1px solid var(--border-on-deep);
  color:var(--pp-blue-300);
  font-size:var(--text-xs);
  font-weight:var(--weight-extrabold);
}
.service-responsibility-list p{color:var(--text-inverse-muted)}
.card.service-rate-card{padding:var(--space-8)}
.section--deep .service-rate-card h2{color:var(--text-strong)}
.section--deep .service-rate-card p{color:var(--text-body)}
.section--deep .service-rate-card .eyebrow{color:var(--accent)}
.service-rate-card > p:not(.eyebrow){margin-top:var(--space-5)}

.service-scope-note{text-align:center}
.service-scope-note h2{margin-top:0}
.service-scope-note p:last-child{
  margin-top:var(--space-5);
  color:var(--text-body);
  font-size:var(--text-lg);
}

.service-detail-intro p{color:var(--text-body)}
.service-detail-media{box-shadow:var(--shadow-lg)}
.service-detail-media .media-frame__comp-chip{display:none}
.service-benefit-grid{margin-top:var(--space-7)}
.service-benefit-grid > .reveal{height:100%}
.service-benefit-card{height:100%}
.service-benefit-card p{margin-top:var(--space-3);color:var(--text-body)}
.service-detail-panels{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-5);
}
.service-detail-panels .card{height:100%}
.service-detail-panels h2{font-size:var(--text-2xl)}
.service-detail-list--roomy li{
  padding:var(--space-4) 0;
  font-size:var(--text-md);
}
.service-pricing-section{text-align:center}
.service-pricing-section p:last-child{
  margin-top:var(--space-5);
  font-size:var(--text-lg);
}

@media (max-width:1024px){
  .service-scope-grid{grid-template-columns:1fr}
  .service-expectations{grid-template-columns:1fr;gap:var(--space-7)}
}

@media (max-width:640px){
  .interior-hero{
    min-height:calc(430px + var(--header-h));
    align-items:center;
  }
  .interior-hero::after{background:rgba(4,24,42,.74)}
  .interior-hero__inner{
    padding:var(--space-7) 0;
    text-align:center;
  }
  .interior-hero__lede{
    margin-left:auto;
    margin-right:auto;
    font-size:var(--text-lg);
  }
  .service-expectations > div:first-child{text-align:center}
  .service-responsibility-list{text-align:left}
  .card.service-rate-card{padding:var(--space-6);text-align:center}
  .service-detail-panels{grid-template-columns:1fr}
  .service-pricing-section{text-align:center}
}


/* ==========================================================================
   4. BUTTONS
   Full pill. Hover darkens one step and deepens the shadow; hue never changes.
   Press scales to 0.985.
   ========================================================================== */
.btn{
  --btn-hover-bg:var(--pp-red-600);
  --btn-active-bg:var(--pp-red-500);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  font-family:var(--font-core);
  font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-snug);
  border-radius:var(--radius-control);
  border:1px solid transparent;
  cursor:pointer;
  text-align:center;
  white-space:nowrap;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100%;
  transition:var(--transition-control),background 320ms var(--ease-standard);
}
.btn:hover{text-decoration:none}

.btn--sm{padding:9px var(--space-4);font-size:var(--text-xs)}
.btn--md{padding:12px var(--space-5);font-size:var(--text-sm)}
.btn--lg{padding:16px var(--space-6);font-size:var(--text-md)}

.btn--full{width:100%}

/* RED #1 of 3 — the primary conversion CTA */
.btn--primary{
  background-color:var(--pp-red-500);
  color:var(--text-inverse);
  box-shadow:var(--shadow-brand);
}
.btn--primary:hover{background-color:var(--pp-red-600);color:var(--text-inverse);box-shadow:0 14px 30px -8px rgba(226,1,0,.5)}

.btn--accent{
  --btn-hover-bg:var(--pp-blue-600);
  --btn-active-bg:var(--pp-blue-500);
  background-color:var(--pp-blue-500);
  color:var(--text-inverse);
  box-shadow:var(--shadow-accent);
}
.btn--accent:hover{background-color:var(--pp-blue-600);color:var(--text-inverse)}

.btn--secondary{
  --btn-hover-bg:var(--pp-neutral-50);
  --btn-active-bg:var(--pp-blue-100);
  background-color:var(--surface-page);
  color:var(--text-strong);
  border-color:var(--border-default);
  box-shadow:var(--shadow-xs);
}
.btn--secondary:hover{background-color:var(--pp-neutral-50);border-color:var(--pp-navy-800);color:var(--text-strong)}

.btn--ghost{
  --btn-hover-bg:var(--pp-neutral-100);
  --btn-active-bg:var(--pp-blue-100);
  background-color:transparent;
  color:var(--text-accent);
  padding-left:var(--space-2);
  padding-right:var(--space-2);
}
.btn--ghost:hover{background-color:var(--pp-neutral-100);color:var(--pp-navy-800)}

.btn--inverse{
  --btn-hover-bg:var(--pp-neutral-100);
  --btn-active-bg:var(--pp-blue-100);
  background-color:var(--surface-page);
  color:var(--pp-navy-900);
}
.btn--inverse:hover{background-color:var(--pp-neutral-100);color:var(--pp-navy-900)}

.btn--outline-inverse{
  --btn-hover-bg:rgba(255,255,255,.14);
  --btn-active-bg:rgba(255,255,255,.22);
  background-color:rgba(255,255,255,.06);
  color:var(--text-inverse);
  border-color:rgba(255,255,255,.42);
}
.btn--outline-inverse:hover{
  background-color:rgba(255,255,255,.14);
  border-color:var(--pp-white);
  color:var(--text-inverse);
}

/* The centre ripple expands steadily to the pill edges on hover. Pressing
   resets it instantly, so touch/click release still receives the same cue. */
.btn:hover{
  background:var(--btn-hover-bg)
    radial-gradient(circle,transparent 1%,var(--btn-hover-bg) 1%) center/15000% no-repeat;
  transition:var(--transition-control),background 800ms linear;
}
.btn:active{
  background-color:var(--btn-active-bg);
  background-size:100%;
  transform:scale(var(--press-scale));
  transition:background 0s,transform 0s;
}

/* ── Call or text menu ────────────────────────────────────────────────────
   Every visible phone number uses this shared control. main.js moves the
   white options card to <body> while it is open, which keeps it clear of the
   intentional overflow clipping on heroes and CTA bands. */
.phone-menu{
  position:relative;
  display:inline-flex;
  max-width:100%;
}
.phone-menu--full{display:flex;width:100%}
.phone-menu--footer{display:flex;width:max-content;margin:0 auto}
.phone-menu__trigger{max-width:100%}
.phone-menu__trigger.nav-phone,
.phone-menu__trigger.footer-phone{
  appearance:none;
  padding:var(--space-3) var(--space-5);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.42);
  border-radius:var(--radius-control);
  color:var(--text-inverse);
  font-family:var(--font-core);
  cursor:pointer;
  transition:var(--transition-control);
}
.phone-menu__trigger.nav-phone:hover,
.phone-menu__trigger.footer-phone:hover{
  background:rgba(255,255,255,.14);
  border-color:var(--pp-white);
  color:var(--text-inverse);
  text-decoration:none;
}
.phone-menu__trigger.nav-phone:active,
.phone-menu__trigger.footer-phone:active{
  background:rgba(255,255,255,.22);
  transform:scale(var(--press-scale));
}
.phone-menu__number{white-space:nowrap}
.phone-menu__channel-icon{flex:none}
.phone-menu__chevron{
  flex:none;
  color:currentColor;
  transition:transform var(--duration-base) var(--ease-standard);
}
.phone-menu.is-open .phone-menu__chevron{transform:rotate(180deg)}
.nav-phone .phone-menu__chevron,
.footer-phone .phone-menu__chevron{color:currentColor}

.phone-menu__popover{
  position:fixed;
  z-index:420;
  width:min(300px,calc(100vw - (var(--space-4) * 2)));
  padding:var(--space-2);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-card);
  color:var(--text-body);
  box-shadow:var(--shadow-xl);
}
.phone-menu__popover[hidden]{display:none}
.phone-menu__option{
  display:grid;
  grid-template-columns:var(--space-7) minmax(0,1fr);
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-3);
  border-radius:var(--radius-md);
  color:var(--text-strong);
  text-align:left;
  transition:background-color var(--duration-base) var(--ease-standard);
}
.phone-menu__option:hover,
.phone-menu__option:focus-visible{
  background:var(--surface-tint);
  color:var(--text-strong);
  text-decoration:none;
}
.phone-menu__option-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--space-7);
  height:var(--space-7);
  border-radius:var(--radius-md);
  background:var(--surface-tint);
  color:var(--text-accent);
}
.phone-menu__option-copy{display:flex;min-width:0;flex-direction:column;gap:var(--space-1)}
.phone-menu__option-copy strong{
  color:var(--text-strong);
  font-size:var(--text-sm);
  line-height:var(--leading-snug);
}
.phone-menu__option-copy > span{
  color:var(--text-muted);
  font-size:var(--text-xs);
  line-height:var(--leading-snug);
}


/* ==========================================================================
   5. CARDS
   White, 1px hairline, soft navy shadow, 32px padding, 18px radius.
   No coloured left-border accents. Border colour does not change on hover.
   ========================================================================== */
.card{
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm);
  padding:var(--space-6);
}
.card--interactive{
  transition:transform var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard);
}
.card--interactive:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

.card--tint{background:var(--pp-blue-100);border-color:var(--pp-blue-200)}
.card--deep{background:var(--surface-deep);border-color:var(--border-on-deep);color:var(--text-inverse-muted)}
.card--deep h3,.card--deep h4{color:var(--text-inverse)}
.card--flush{padding:var(--space-5)}


/* ==========================================================================
   6. MARKETING PRIMITIVES
   ========================================================================== */

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:7px var(--space-4);
  border-radius:var(--radius-pill);
  background:var(--pp-blue-100);
  border:1px solid var(--pp-blue-200);
  font-family:var(--font-core);
  font-size:var(--type-eyebrow-size);
  font-weight:var(--weight-extrabold);
  letter-spacing:var(--type-eyebrow-tracking);
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 var(--space-4);
}
.eyebrow--on-dark{
  color:var(--accent-on-dark);
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
}

/* ── Section heading ─────────────────────────────────────────────────────── */
.section-head{max-width:58ch}
.section-head--center{margin-inline:auto;text-align:center}
.section-head__lede{
  margin-top:var(--space-4);
  font-size:var(--text-lg);
  color:var(--text-body);
  max-width:58ch;
}
.section-head--center .section-head__lede{margin-inline:auto}
.section-head--on-dark .section-head__lede{color:var(--text-inverse-muted)}

/* ── Badge ───────────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:7px var(--space-4);
  border-radius:var(--radius-pill);
  font-size:var(--text-3xs);
  font-weight:var(--weight-extrabold);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  background:var(--pp-blue-100);
  color:var(--pp-blue-700);
  border:1px solid var(--pp-blue-200);
}
.badge--on-dark{
  background:rgba(255,255,255,.12);
  color:var(--text-inverse);
  border-color:rgba(255,255,255,.24);
}

/* ── Tag / chip ──────────────────────────────────────────────────────────── */
.tag{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:11px var(--space-5);
  border-radius:var(--radius-pill);
  background:var(--surface-page);
  border:1px solid var(--border-default);
  color:var(--text-strong);
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
  box-shadow:var(--shadow-xs);
  transition:var(--transition-control);
}
.tag svg{color:var(--pp-blue-500);flex:none}
.tag:hover{
  background:var(--pp-blue-100);
  border-color:var(--pp-blue-300);
  color:var(--pp-navy-900);
  text-decoration:none;
  transform:translateY(-2px);
}

/* ── Icon tile: the brand's signature icon treatment ─────────────────────── */
.icon-tile{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  flex:none;
  border-radius:var(--radius-md);
  background:var(--pp-blue-100);
  color:var(--pp-blue-600);
}
.icon-tile--on-dark{background:rgba(255,255,255,.10);color:var(--pp-blue-300)}

/* ── Trust row ───────────────────────────────────────────────────────────── */
.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-5) var(--space-7);
  margin:0;
  padding:0;
  list-style:none;
}
.trust-row__item{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:var(--text-xs);
  font-weight:var(--weight-bold);
  color:var(--pp-navy-800);
}
.trust-row__item svg{color:var(--pp-blue-500);flex:none}
.trust-row--deep .trust-row__item{color:var(--text-inverse)}
.trust-row--deep .trust-row__item svg{color:var(--pp-blue-300)}

@media (max-width:640px){
  .trust-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
}

/* ── Service card ────────────────────────────────────────────────────────── */
.service-card{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:0;
  background:var(--surface-accent);
  border:0;
  color:var(--text-inverse);
  overflow:hidden;
}
.service-card__media{flex:none;border-radius:0}
.service-card__media img{border-radius:0;box-shadow:none}
/* Generated-image status remains in the markup for launch auditing, but the
   client requested a clean card presentation without the visual chip. */
.service-card .media-frame__comp-chip{display:none}
.service-card__content{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:var(--space-6) var(--space-7);
}
.service-card.card--interactive:hover{
  transform:translateY(-8px);
  box-shadow:0 0 0 4px rgba(143,208,234,.42),0 18px 36px -12px rgba(3,136,193,.72);
}
.service-card__title{
  margin-top:0;
  color:var(--text-inverse);
  text-align:center;
}
.service-card__body{
  margin-top:var(--space-3);
  color:rgba(255,255,255,.92);
  text-align:center;
}
.service-card__footer{
  display:flex;
  justify-content:center;
  margin-top:auto;
  padding-top:var(--space-5);
}

/* ── Certification image + checklist (on navy) ─────────────────────────── */
.trust-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--space-9);
  align-items:center;
  margin-top:var(--space-8);
}
.trust-layout__media{box-shadow:var(--shadow-lg)}
.trust-layout .media-frame__comp-chip{display:none}
.cert-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-6);
}
.cert-list__item{display:flex;gap:var(--space-4);align-items:flex-start}
.cert-list__title{font-size:var(--text-md);color:var(--text-inverse);margin:0 0 4px}
.cert-list__body{font-size:var(--text-sm);color:var(--text-inverse-muted);margin:0}

@media (max-width:1024px){
  .trust-layout{grid-template-columns:1fr;gap:var(--space-7)}
}

/* ── Vertical process timeline ──────────────────────────────────────────── */
.process-timeline{
  --timeline-progress:0;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--space-7);
  max-width:900px;
  margin:var(--space-8) auto 0;
  padding:0;
  list-style:none;
}
.process-timeline::before,
.process-timeline::after{
  content:"";
  position:absolute;
  z-index:0;
  top:36px;
  bottom:36px;
  left:34px;
  width:4px;
  border-radius:var(--radius-pill);
}
.process-timeline::before{background:var(--pp-blue-100)}
.process-timeline::after{
  background:linear-gradient(180deg,var(--pp-blue-400),var(--pp-blue-600));
  box-shadow:0 0 16px rgba(3,136,193,.38);
  transform:scaleY(var(--timeline-progress));
  transform-origin:top;
  transition:transform var(--duration-base) linear;
}
.process-step{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:var(--space-6);
  align-items:center;
}
.process-step__num{
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  border:4px solid var(--pp-blue-200);
  border-radius:50%;
  background:var(--surface-page);
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:var(--weight-extrabold);
  line-height:1;
  color:var(--pp-blue-600);
  transition:
    color var(--duration-slow) var(--ease-standard),
    background-color var(--duration-slow) var(--ease-standard),
    border-color var(--duration-slow) var(--ease-standard),
    box-shadow var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-out);
}
.process-step.is-active .process-step__num{
  color:var(--text-inverse);
  background:var(--pp-blue-500);
  border-color:var(--pp-blue-300);
  box-shadow:var(--shadow-accent);
  transform:scale(1.06);
}
.process-step__card{
  padding:var(--space-6) var(--space-7);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  background:var(--surface-card);
  box-shadow:var(--shadow-md);
  transition:
    border-color var(--duration-slow) var(--ease-standard),
    box-shadow var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-out);
}
.process-step.is-active .process-step__card{
  border-color:var(--pp-blue-300);
  box-shadow:var(--shadow-lg);
  transform:translateX(4px);
}
.process-step__eyebrow{
  margin:0 0 var(--space-2);
  color:var(--text-accent);
  font-size:var(--text-2xs);
  font-weight:var(--weight-extrabold);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
}
.process-step__title{margin:0;color:var(--text-strong);font-size:var(--text-xl)}
.process-step__body{
  max-width:58ch;
  margin:var(--space-3) 0 0;
  color:var(--text-body);
  font-size:var(--text-md);
}

@media (max-width:640px){
  .process-timeline{gap:var(--space-6)}
  .process-timeline::before,.process-timeline::after{top:28px;bottom:28px;left:26px}
  .process-step{grid-template-columns:56px minmax(0,1fr);gap:var(--space-4)}
  .process-step__num{width:56px;height:56px;border-width:3px;font-size:var(--text-lg)}
  .process-step__card{padding:var(--space-5)}
  .process-step__title{font-size:var(--text-lg)}
  .process-step__body{font-size:var(--text-sm)}
}

/* ── Testimonial ─────────────────────────────────────────────────────────── */
.testimonial{
  margin:0;
  display:flex;
  flex-direction:column;
  height:100%;
}
.testimonial__quote{
  margin:0;
  font-size:var(--text-md);
  font-weight:var(--weight-semibold);
  color:var(--text-strong);
  line-height:var(--leading-normal);
  letter-spacing:var(--tracking-snug);
}
.testimonial__quote::before{content:"\201C"}
.testimonial__quote::after{content:"\201D"}
.testimonial__attr{
  margin-top:auto;
  padding-top:var(--space-5);
  font-size:var(--text-sm);
  color:var(--text-muted);
}
.testimonial__name{
  display:block;
  font-weight:var(--weight-bold);
  color:var(--text-strong);
}

/* ── Testimonial carousel ───────────────────────────────────────────────── */
.testimonial-carousel{
  --carousel-gap:var(--space-5);
  max-width:1120px;
  margin:var(--space-8) auto 0;
}
.testimonial-carousel__viewport{
  overflow:hidden;
  padding:var(--space-2);
  margin:calc(var(--space-2) * -1);
  border-radius:var(--radius-card);
  outline:none;
}
.testimonial-carousel__viewport:focus-visible{box-shadow:var(--ring-focus)}
.testimonial-carousel__track{
  display:flex;
  gap:var(--carousel-gap);
  align-items:stretch;
  transition:transform var(--duration-reveal) var(--ease-out);
  will-change:transform;
}
.testimonial-carousel__slide{
  display:flex;
  flex:0 0 calc((100% - var(--carousel-gap)) / 2);
  min-width:0;
}
.testimonial-carousel .testimonial-card{
  width:100%;
  min-height:360px;
  padding:var(--space-7) var(--space-7) var(--space-8);
  border-color:var(--pp-navy-700);
  background:var(--surface-deepest);
  box-shadow:var(--shadow-lg);
}
.testimonial-carousel .testimonial__mark{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin:0 auto var(--space-4);
  border:1px solid rgba(143,208,234,.34);
  border-radius:50%;
  background:rgba(3,136,193,.18);
  color:var(--pp-blue-300);
}
.testimonial-carousel .testimonial__mark::before{
  content:"\201C";
  font-family:Georgia,serif;
  font-size:72px;
  line-height:1;
  transform:translateY(10px);
}
.testimonial-carousel .testimonial{
  align-items:center;
  justify-content:flex-start;
  height:auto;
  text-align:center;
}
.testimonial-carousel .testimonial__quote{
  max-width:46ch;
  color:var(--text-inverse);
  font-weight:var(--weight-regular);
}
.testimonial-carousel .testimonial__quote::before,
.testimonial-carousel .testimonial__quote::after{content:none}
.testimonial-carousel .testimonial__attr{margin-top:var(--space-6);padding-top:0}
.testimonial-carousel .testimonial__attr{color:var(--text-inverse-muted)}
.testimonial-carousel .testimonial__name{color:var(--text-inverse)}
.testimonial-carousel__controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:var(--space-4);
  margin-top:var(--space-6);
}
.testimonial-carousel__button{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  padding:0;
  border:1px solid var(--pp-blue-300);
  border-radius:50%;
  background:var(--surface-page);
  color:var(--pp-blue-600);
  cursor:pointer;
  transition:
    color var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-standard);
}
.testimonial-carousel__button:hover:not(:disabled){
  color:var(--text-inverse);
  background:var(--pp-blue-500);
  border-color:var(--pp-blue-500);
  box-shadow:var(--shadow-accent);
  transform:translateY(-2px);
}
.testimonial-carousel__button:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.testimonial-carousel__button:disabled{opacity:.36;cursor:not-allowed}
@media (max-width:640px){
  .testimonial-carousel{--carousel-gap:var(--space-4)}
  .testimonial-carousel__slide{flex-basis:100%}
  .testimonial-carousel .testimonial-card{
    min-height:420px;
    padding:var(--space-6) var(--space-6) var(--space-8);
  }
}

/* Placeholder marker. These quotes are sample copy from the design kit, NOT
   real customer words. This chip must be gone before launch, along with the
   quotes themselves, replaced by real testimonials with permission. */
.placeholder-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  align-self:flex-start;
  margin-bottom:var(--space-4);
  padding:4px 10px;
  border-radius:var(--radius-pill);
  background:var(--pp-warning-100);
  color:var(--pp-warning-500);
  border:1px dashed var(--pp-warning-500);
  font-size:var(--text-3xs);
  font-weight:var(--weight-extrabold);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
}

/* ── Media frame ─────────────────────────────────────────────────────────── */
.media-frame{
  position:relative;
  width:100%;
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.media-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}

/* State 1: no src — the labelled placeholder. The only dashed border in the
   entire system. */
.media-frame--empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  padding:var(--space-6);
  text-align:center;
  background:var(--gradient-water);
  border:1px dashed var(--pp-blue-300);
}
.media-frame__label{
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
  color:var(--pp-navy-800);
}
.media-frame__note{
  font-size:var(--text-xs);
  color:var(--text-muted);
  max-width:34ch;
}
.media-frame--empty svg{color:var(--pp-blue-400)}

/* State 2: a generated stand-in. The chip makes comps impossible to miss in
   review and impossible to ship by accident. */
.media-frame__comp-chip{
  position:absolute;
  top:var(--space-3);
  left:var(--space-3);
  z-index:2;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  background:var(--pp-warning-100);
  color:var(--pp-warning-500);
  border:1px dashed var(--pp-warning-500);
  font-size:var(--text-3xs);
  font-weight:var(--weight-extrabold);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
}

/* ── CTA band ────────────────────────────────────────────────────────────── */
.cta-band{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-xl);
  background:var(--gradient-deep);
  color:var(--text-inverse);
  padding:var(--space-9) var(--space-8);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-8);
  flex-wrap:wrap;
}
/* The one sanctioned radial glow, bleeding off the top-right corner */
.cta-band::before{
  content:"";
  position:absolute;
  top:-80px;
  right:-80px;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(3,136,193,.38) 0%,rgba(3,136,193,0) 70%);
  pointer-events:none;
}
.cta-band__text{position:relative;z-index:1;max-width:52ch}
.cta-band__text h2{color:var(--text-inverse)}
.cta-band__lede{margin-top:var(--space-4);color:var(--text-inverse-muted);font-size:var(--text-lg)}
.cta-band__actions{
  position:relative;
  z-index:1;
  display:flex;
  gap:var(--space-3);
  flex-wrap:wrap;
}

@media (max-width:640px){
  .cta-band{padding:var(--space-8) var(--space-5)}
  .cta-band__actions{width:100%;flex-direction:column}
  .cta-band__actions .phone-menu{width:100%}
  .cta-band__actions .btn{width:100%}
}

/* The home page's closing CTA is a true full-bleed band. Brand blue separates
   it from the navy footer below. */
.closing-cta{background:var(--surface-accent)}
.cta-band--full{
  border-radius:0;
  background:transparent;
  padding:var(--space-9) 0 calc(var(--space-11) + var(--space-8));
}
.cta-band--full::before{
  top:-180px;
  right:-40px;
  width:480px;
  height:480px;
  background:radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 70%);
}
.cta-band--full .cta-band__lede{color:rgba(255,255,255,.9)}
@media (max-width:640px){
  .cta-band--full{
    justify-content:center;
    padding:var(--space-8) 0 var(--space-11);
    text-align:center;
  }
  .cta-band--full .cta-band__text{margin-inline:auto}
}


/* ==========================================================================
   7. HEADER + NAVIGATION
   --------------------------------------------------------------------------
   Navy glass sitewide, white text, two opacity states. Only the opacity
   changes between them, so there is no colour flip on scroll.

   The SOLID state is the CSS default and JS *removes* it while the hero
   sentinel is in view. With JS disabled the header stays solid and readable
   rather than transparent and illegible.
   ========================================================================== */
/* z-index:260, not 200: .site-header is position:fixed, which makes it its
   own stacking context. .nav-links (the off-canvas panel, z-index:250) lives
   INSIDE that context as a DOM descendant, so its z-index only ranks it among
   the header's own children — it does NOT let the panel escape above other
   fixed-position elements OUTSIDE the header. .nav-backdrop is a sibling of
   .site-header (not a descendant), at z-index:240. With the header below
   that, the whole header subtree — including the open panel — rendered
   UNDER the backdrop: visible through it, but every click landed on the
   backdrop instead of the link, which is why the menu looked dimmed and
   nothing in it was clickable. The header now outranks the backdrop outright,
   so this can't recur regardless of what either side's z-index becomes. */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:260;
  height:var(--header-h);
  background:rgba(4,24,42,.88);
  -webkit-backdrop-filter:var(--blur-glass);
  backdrop-filter:var(--blur-glass);
  border-bottom:1px solid var(--border-on-deep);
  transition:background var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard);
}

/* Over-hero state, applied by JS only while the hero sentinel is visible */
.site-header.is-transparent{
  background:rgba(4,24,42,.30);
  border-bottom-color:transparent;
}

/* Browsers without backdrop-filter get the solid treatment in both states,
   so text never sits on a half-transparent bar it cannot beat. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header,.site-header.is-transparent{background:rgba(4,24,42,.94)}
}

/* Flex, not grid: .nav-links is always position:fixed now (the off-canvas
   panel, at every breakpoint), which removes it from normal layout entirely.
   A 3-column auto/1fr/auto grid relies on that middle item holding its track
   in the auto-placement order — but out-of-flow items are skipped by grid
   auto-placement, so .nav-actions would get placed into the middle 1fr track
   instead of the right-hand one. Two in-flow children and space-between sidesteps
   the whole problem: logo pins left, actions pins right, nothing else needed. */
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
}

/* ── Logo lockup ─────────────────────────────────────────────────────────── */
/* No adjacent wordmark text: the link's aria-label is the accessible name.
   align-self:start pins the image's top to the header's top edge, so the
   surplus height (the image is taller than the header) hangs below it as an
   overlapping badge rather than spilling out both edges symmetrically. */
.nav-logo{
  display:inline-flex;
  align-self:start;
  margin-top:10px;
  color:var(--text-inverse);
}
.nav-logo:hover{text-decoration:none;color:var(--text-inverse)}
.nav-logo img{height:128px;width:auto;flex:none}

/* ── Nav links: an off-canvas panel at every breakpoint ───────────────────
   There is no inline desktop nav anymore. The burger and slide-in panel are
   the only nav mode, on a phone or a 27" monitor alike, which is what frees
   up header width for the phone number and Request Service button below. */
.nav-links{
  position:fixed;
  top:0;
  right:0;
  z-index:250;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  gap:0;
  width:min(86vw,380px);
  height:100vh;
  height:100dvh;
  padding:0;
  margin:0;
  list-style:none;
  background:var(--brand);
  box-shadow:-12px 0 40px rgba(4,24,42,.45);
  transform:translateX(100%);
  transition:transform 280ms cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
  overscroll-behavior:contain;
}
body.nav-open .nav-links{transform:translateX(0)}

.nav-item{border-bottom:1px solid rgba(255,255,255,.08)}
.nav-item > a{
  position:relative;
  display:flex;
  align-items:center;
  gap:4px;
  width:100%;
  padding:var(--space-4) var(--space-5);
  font-size:var(--text-md);
  font-weight:var(--weight-bold);
  color:var(--text-inverse);
  letter-spacing:var(--tracking-snug);
}
.nav-item > a:hover{
  background:rgba(255,255,255,.06);
  color:var(--pp-blue-300);
  text-decoration:none;
}
.nav-item > a[aria-current="page"]{color:var(--pp-blue-300)}

/* ── Dropdown submenu (currently: About -> Blog) ───────────────────────────
   A tap-accordion, one open at a time (see main.js): the panel has no hover,
   so the parent link toggles this open instead of navigating. Its own first
   entry repeats the parent's destination, so nothing becomes unreachable. */
.nav-item--has-children{position:relative}
.nav-item--has-children > a{justify-content:space-between}
.nav-item__chevron{
  flex:none;
  transition:transform var(--duration-base) var(--ease-standard);
}
.nav-item.open > a .nav-item__chevron{transform:rotate(180deg)}

.dropdown{
  list-style:none;
  margin:0;
  padding:0;
  background:rgba(255,255,255,.05);
  max-height:0;
  visibility:hidden;
  overflow:hidden;
  transition:max-height var(--duration-base) var(--ease-standard),
             visibility var(--duration-base) var(--ease-standard);
}
.nav-item.open > .dropdown{max-height:160px;visibility:visible}
.dropdown a{
  display:block;
  padding:var(--space-3) var(--space-5) var(--space-3) calc(var(--space-5) + var(--space-4));
  font-size:var(--text-sm);
  font-weight:var(--weight-semibold);
  color:var(--text-inverse);
}
.dropdown a:hover{background:rgba(255,255,255,.06);color:var(--pp-blue-300);text-decoration:none}
.dropdown a[aria-current="page"]{color:var(--pp-blue-300)}

/* ── Header actions ──────────────────────────────────────────────────────── */
/* Sized up now that they no longer compete with an inline nav-links row for
   space: bigger phone text, a medium (not small) CTA button, a wider gap. */
.nav-actions{display:flex;align-items:center;gap:var(--space-6)}
.nav-phone{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--text-md);
  font-weight:var(--weight-extrabold);
  color:var(--text-inverse);
  white-space:nowrap;
}
.nav-phone svg{color:var(--pp-blue-300);flex:none}
.nav-phone:hover{color:var(--pp-blue-300);text-decoration:none}

/* RED #2 of 3 */
.nav-cta{
  background-color:var(--pp-red-500);
  color:var(--text-inverse);
  font-size:var(--text-md);
  box-shadow:var(--shadow-brand);
}
.nav-cta:hover{color:var(--text-inverse)}

/* ── Burger ──────────────────────────────────────────────────────────────── */
.nav-burger{
  display:flex;
  flex:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:0;
  background:transparent;
  border:0;
  cursor:pointer;
}
.nav-burger span{
  display:block;
  height:2px;
  width:24px;
  margin:0 auto;
  border-radius:2px;
  background:var(--text-inverse);
  transition:transform var(--duration-base) var(--ease-standard),
             opacity var(--duration-fast) var(--ease-standard);
}
body.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-burger span:nth-child(2){opacity:0}
body.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Panel-only chrome ─────────────────────────────────────────────────────
   The logo/close row and the phone+CTA footer that live inside the panel
   itself, duplicating the header's own actions for whoever already has the
   panel open. */
/* Just the close button now (no wordmark), pinned to the same top-right
   corner the burger occupies when the panel is closed. */
.nav-panel-header{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--border-on-deep);
}
.nav-panel-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  background:transparent;
  border:0;
  color:var(--text-inverse);
  cursor:pointer;
}

.nav-panel-footer{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  margin-top:auto;
  padding:var(--space-5);
}
/* Full width, matching .nav-panel-cta below it. Everything but the width
   (from .btn--full) comes from .btn.btn--md.btn--outline-inverse. */
.nav-panel-phone svg{color:var(--pp-blue-300)}

/* RED #3 of 3 */
.nav-panel-cta{
  background-color:var(--pp-red-500);
  color:var(--text-inverse);
  box-shadow:var(--shadow-brand);
}
.nav-panel-cta:hover{color:var(--text-inverse)}

.nav-backdrop{
  position:fixed;
  inset:0;
  z-index:240;
  background:rgba(4,24,42,.55);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--duration-base) var(--ease-standard),
             visibility var(--duration-base) var(--ease-standard);
}
body.nav-open .nav-backdrop{opacity:1;visibility:visible}
body.nav-open{overflow:hidden}

/* ── Small phones only ─────────────────────────────────────────────────────
   Below 640px there isn't room for logo + phone number + a full CTA button +
   burger without wrapping. The panel already repeats both in its footer, so
   they simply drop from the header bar itself down here. */
@media (max-width:640px){
  .nav-logo{margin-top:6px}
  .nav-logo img{height:88px}
  .nav-actions .phone-menu--nav,
  .nav-actions .nav-cta{display:none}
}


/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.site-footer{
  position:relative;
  background:var(--surface-deepest);
  color:var(--text-inverse-muted);
  padding:var(--space-6) 0 var(--space-6);
}
.site-footer > .container{position:relative;z-index:1}
.footer-dome{
  position:absolute;
  left:0;
  bottom:calc(100% - 1px);
  width:100%;
  height:120px;
  pointer-events:none;
}
.footer-dome__shape{fill:var(--surface-deepest)}
.footer-dome__logo{
  position:absolute;
  z-index:2;
  top:-94px;
  left:50%;
  display:block;
  width:88px;
  transform:translateX(-50%);
}
.footer-dome__logo img{display:block;width:100%;height:auto}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-9);
  max-width:900px;
  margin:var(--space-8) auto 0;
  text-align:center;
}
.footer-phone{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  margin-top:var(--space-5);
  font-size:var(--text-lg);
  font-weight:var(--weight-extrabold);
  color:var(--text-inverse);
}
.footer-phone--centered{display:flex;width:max-content;margin:0 auto}
.footer-phone svg{color:var(--pp-blue-300);flex:none}
.footer-phone:hover{color:var(--pp-blue-300);text-decoration:none}

.footer-col__heading{
  margin:0 0 var(--space-5);
  color:var(--text-inverse);
  font-size:var(--text-md);
  font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-snug);
}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.footer-col a{font-size:var(--text-sm);color:var(--text-inverse-muted)}
.footer-col a:hover{color:var(--pp-blue-300);text-decoration:none}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  flex-wrap:wrap;
  margin-top:var(--space-8);
  padding-top:var(--space-5);
  border-top:1px solid var(--border-on-deep);
  font-size:var(--text-sm);
  color:var(--text-inverse-muted);
}
.footer-legal{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-2);
}
.footer-legal__links{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  flex-wrap:wrap;
}
.footer-legal__links a{
  color:var(--text-inverse-muted);
  font-size:var(--text-xs);
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:3px;
  transition:
    color var(--duration-base) var(--ease-standard),
    text-decoration-color var(--duration-base) var(--ease-standard);
}
.footer-legal__links a:hover{
  color:var(--pp-blue-300);
  text-decoration-color:currentColor;
}
.footer-social{display:flex;align-items:center;gap:var(--space-3)}
.footer-social a{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid var(--border-on-deep);
  border-radius:50%;
  color:var(--pp-blue-300);
  transition:
    color var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-out);
}
.footer-social a:hover{
  color:var(--pp-navy-900);
  background:var(--pp-blue-300);
  border-color:var(--pp-blue-300);
  text-decoration:none;
  transform:translateY(-2px);
}
.footer-social a:focus-visible{outline:none;box-shadow:var(--ring-focus)}

@media (max-width:640px){
  .footer-dome{height:90px}
  .footer-dome__logo{top:-68px;width:68px}
  .site-footer{padding-top:var(--space-5)}
  .footer-grid{grid-template-columns:1fr;gap:var(--space-7);margin-top:var(--space-7)}
  .footer-bottom{flex-direction:column;align-items:center;text-align:center}
  .footer-legal{align-items:center}
  .footer-legal__links{justify-content:center}
  .footer-social{order:-1}
}


/* ==========================================================================
   9. HOME HERO — full screen, photo background, navy scrim
   --------------------------------------------------------------------------
   100svh, not 100vh: on mobile 100vh is the *largest* viewport height, so the
   hero overflows while the browser chrome is showing and jumps when it hides.
   ========================================================================== */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:100svh;
  padding-top:calc(var(--header-h) + var(--space-7));
  padding-bottom:var(--space-9);
  overflow:hidden;
  isolation:isolate;
}

/* .container is a flex child here, so without an explicit width it shrinks to
   fit .hero__inner and margin:0 auto then centres that shrunken box. */
.hero > .container{width:100%}

.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;border-radius:0}

/* Three navy scrim layers, painted in one element:
     1. top    protects the overlay nav against the bright sky
     2. side   protects the left-hand copy column
     3. base   the DS --gradient-protect, mandated for text over photography */
.hero__scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(4,24,42,.62) 0%,rgba(4,24,42,.10) 26%,rgba(4,24,42,0) 40%),
    linear-gradient(90deg,rgba(4,24,42,.78) 0%,rgba(4,24,42,.42) 46%,rgba(4,24,42,0) 78%),
    var(--gradient-protect);
}

/* The measure cap lives on the lede, not the block, so the trust row has room
   to breathe rather than being forced into a narrow column. */
.hero__inner{max-width:640px}
.hero__title{
  font-size:clamp(40px,6vw,68px);
  color:var(--text-inverse);
  margin-top:var(--space-5);
  max-width:14ch;
}
@media (min-width:1025px){
  .hero__inner{max-width:704px}
  .hero__title{max-width:100%}
  .hero__title-line{display:block;white-space:nowrap}
}
/* The lede is now a longer descriptive line (service + all four coverage
   areas), so it runs 2-3 lines at this width rather than one; that reads fine
   for a subhead directly under a big headline. */
.hero__lede{
  margin-top:var(--space-5);
  font-size:22px;
  font-weight:var(--weight-medium);
  color:rgba(255,255,255,.92);
  max-width:48ch;
}
.hero__actions{
  display:flex;
  gap:var(--space-3);
  flex-wrap:wrap;
  margin-top:var(--space-6);
}

/* Static scroll cue. No looping animation: decorative motion is off-brand. */
.hero__cue{
  position:absolute;
  left:50%;
  bottom:var(--space-5);
  transform:translateX(-50%);
  color:rgba(255,255,255,.7);
  z-index:1;
}

@media (max-width:1024px){
  /* Bottom-weight the copy so more of the photograph reads */
  .hero{align-items:flex-end;padding-bottom:var(--space-10)}
  .hero__inner{max-width:100%}
  /* The copy now spans the full width, so the side gradient becomes a wash */
  .hero__scrim{
    background:
      linear-gradient(180deg,rgba(4,24,42,.62) 0%,rgba(4,24,42,.12) 30%,rgba(4,24,42,0) 46%),
      linear-gradient(0deg,rgba(4,24,42,.86) 0%,rgba(4,24,42,.42) 42%,rgba(4,24,42,0) 72%);
  }
  .hero__cue{display:none}
}

@media (max-width:640px){
  .hero{
    align-items:center;
    padding-top:calc(var(--header-h) + var(--space-2));
    padding-bottom:var(--space-5);
  }
  .hero__inner{
    max-width:520px;
    margin-inline:auto;
    text-align:center;
  }
  .hero__title,
  .hero__lede{margin-left:auto;margin-right:auto}
  .hero__scrim{
    background:linear-gradient(
      180deg,
      rgba(4,24,42,.74) 0%,
      rgba(4,24,42,.64) 48%,
      rgba(4,24,42,.82) 100%
    );
  }
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}
  /* 22px runs to four lines on a phone and crowds the CTAs */
  .hero__lede{
    font-size:18px;
    font-weight:var(--weight-semibold);
  }
}

@media (max-width:640px) and (max-height:680px){
  .hero{padding-bottom:var(--space-4)}
  .hero__title{font-size:36px;margin-top:var(--space-4)}
  .hero__lede{
    margin-top:var(--space-4);
    font-size:16px;
    font-weight:var(--weight-semibold);
    line-height:var(--leading-normal);
  }
  .hero__actions{gap:var(--space-2);margin-top:var(--space-4)}
  .hero__actions .btn{padding:12px var(--space-5)}
}


/* ==========================================================================
   9b. TRUST STRIP — a slim credibility band directly under the hero
   --------------------------------------------------------------------------
   The same four signals that used to live inside the hero, promoted to their
   own full-width band so they read as a standalone strip rather than hero
   decoration. Centred and evenly spaced across the full container width.
   ========================================================================== */
.trust-strip{
  background:var(--surface-page);
  border-bottom:1px solid var(--border-subtle);
  padding:var(--space-6) 0;
}
.trust-strip .trust-row{
  justify-content:center;
  gap:var(--space-6) var(--space-9);
}
.trust-strip .trust-row__item{font-size:var(--text-sm)}
.trust-strip .trust-row__item svg{width:19px;height:19px}

@media (max-width:1024px){
  .trust-strip{padding:var(--space-5) 0}
  .trust-strip .trust-row{gap:var(--space-4) var(--space-7)}
}


/* ==========================================================================
   10. INTERIOR PAGE HEADERS
   Used by the stub pages, and by the real interior pages in the next pass.
   ========================================================================== */
.page-head{
  background:var(--gradient-deep);
  color:var(--text-inverse);
  padding:var(--space-9) 0;
}
.page-head h1{
  color:var(--text-inverse);
  font-size:clamp(36px,4vw,44px);
  max-width:20ch;
}
.page-head__lede{
  margin-top:var(--space-5);
  font-size:var(--text-lg);
  color:var(--text-inverse-muted);
  max-width:58ch;
}

/* Legal pages */
.legal-page{
  background:var(--surface-subtle);
  padding:var(--space-9) 0 calc(var(--space-11) + var(--space-8));
}
.legal-article{
  max-width:950px;
  margin:0 auto;
  padding:var(--space-8);
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
}
.legal-article h2{
  margin-top:var(--space-7);
  color:var(--text-strong);
  font-size:clamp(24px,3vw,30px);
}
.legal-article h2:first-child{margin-top:0}
.legal-article p{
  margin-top:var(--space-4);
  color:var(--text-body);
  line-height:var(--leading-relaxed);
}
.legal-article a{
  color:var(--text-link);
  font-weight:var(--weight-semibold);
  text-decoration:underline;
  text-underline-offset:3px;
}
.legal-article a:hover{color:var(--text-link-hover)}

@media (max-width:640px){
  .legal-page-head{text-align:center}
  .legal-page-head h1,
  .legal-page-head .page-head__lede{margin-inline:auto}
  .legal-page{padding:var(--space-7) 0 calc(var(--space-11) + var(--space-7))}
  .legal-article{padding:var(--space-6) var(--space-5);border-radius:var(--radius-lg)}
  .legal-article h2{margin-top:var(--space-6)}
}

@media (max-width:640px){
  .interior-hero.interior-hero--standalone{
    min-height:calc(430px + var(--header-h) + var(--space-11) + var(--space-10));
    align-items:flex-end;
  }
  .interior-hero.interior-hero--standalone.thank-you-hero{
    min-height:calc(430px + var(--header-h) + var(--space-11));
  }
  .interior-hero.interior-hero--standalone .interior-hero__inner{
    padding-bottom:calc(var(--space-10) + var(--space-7));
  }
  .interior-hero__actions{width:100%;flex-direction:column}
  .interior-hero__actions .btn{width:100%}
}

.stub-note{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:6px 12px;
  border-radius:var(--radius-pill);
  background:var(--pp-warning-100);
  color:var(--pp-warning-500);
  border:1px dashed var(--pp-warning-500);
  font-size:var(--text-3xs);
  font-weight:var(--weight-extrabold);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
}

/* ==========================================================================
   10b. CONTACT PAGE
   ========================================================================== */
.contact-page-section{
  background:var(--surface-subtle);
  padding:var(--space-9) 0 calc(var(--space-11) + var(--space-8));
}
.contact-options{
  max-width:900px;
  margin-inline:auto;
  padding:var(--space-8);
  overflow:hidden;
  position:relative;
  isolation:isolate;
  text-align:center;
  color:var(--text-inverse);
  background:var(--gradient-deep);
  border:1px solid var(--border-on-deep);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
}
.contact-options::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:360px;
  height:360px;
  right:-160px;
  bottom:-240px;
  border-radius:50%;
  background:rgba(3,136,193,.22);
}
.contact-options h2{
  color:var(--text-inverse);
  font-size:clamp(30px,4vw,44px);
}
.contact-options > p{
  margin-top:var(--space-3);
  color:var(--text-inverse-muted);
  font-size:var(--text-lg);
}
.contact-options__actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-top:var(--space-6);
}
.contact-service-areas{
  max-width:1120px;
  margin:var(--space-9) auto 0;
  text-align:center;
}
.contact-service-areas__eyebrow{
  color:var(--text-accent);
  font-size:var(--text-xs);
  font-weight:var(--weight-extrabold);
  letter-spacing:var(--tracking-widest);
  text-transform:uppercase;
}
.contact-service-areas h2{
  margin-top:var(--space-2);
  font-size:clamp(30px,4vw,42px);
}
.contact-service-areas > p:not(.contact-service-areas__eyebrow){
  max-width:56ch;
  margin:var(--space-3) auto 0;
  color:var(--text-muted);
  font-size:var(--text-lg);
}
.contact-service-areas__list{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--space-3);
  margin-top:var(--space-6);
}
.contact-service-areas__list .tag{
  justify-content:center;
  min-width:0;
  padding-inline:var(--space-3);
  white-space:nowrap;
}

@media (max-width:1024px){
  .contact-service-areas__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:640px){
  .contact-page-section{
    padding-top:var(--space-7);
    padding-bottom:calc(var(--space-11) + var(--space-6));
  }
  .contact-options{
    padding:var(--space-7) var(--space-5);
    border-radius:var(--radius-lg);
  }
  .contact-options__actions{flex-direction:column}
  .contact-options__actions .btn{width:100%}
  .contact-service-areas{margin-top:var(--space-8)}
  .contact-service-areas__list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-2);
  }
}


/* ==========================================================================
   10c. CAREERS PAGE
   ========================================================================== */
.careers-page-section{
  padding:var(--space-10) 0 calc(var(--space-11) + var(--space-7));
  background:var(--surface-subtle);
}
.careers-layout{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:var(--space-9);
  align-items:start;
}
.careers-copy{
  position:sticky;
  top:calc(var(--header-h) + var(--space-6));
}
.careers-copy section + section{margin-top:var(--space-8)}
.careers-copy h2{font-size:clamp(28px,3vw,38px)}
.careers-copy p{
  margin-top:var(--space-5);
  color:var(--text-body);
  font-size:var(--text-md);
  line-height:var(--leading-relaxed);
}
.careers-copy p + p{margin-top:var(--space-5)}

.careers-form-card{
  padding:var(--space-8);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background:var(--surface-card);
  box-shadow:var(--shadow-lg);
}
.careers-form-card__heading{
  padding-bottom:var(--space-6);
  border-bottom:1px solid var(--border-subtle);
}
.careers-form-card__heading h2{
  margin-top:var(--space-2);
  font-size:clamp(30px,4vw,42px);
}
.careers-form-card__heading > p:last-child{
  margin-top:var(--space-3);
  color:var(--text-muted);
  font-size:var(--text-md);
}

.employment-form{margin-top:var(--space-7)}
.employment-form__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-5);
  margin-top:var(--space-5);
}
.form-field{min-width:0}
.form-field--full{grid-column:1 / -1}
.form-field label{
  display:block;
  margin-bottom:var(--space-2);
  color:var(--text-strong);
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
}
.form-field label span{
  color:var(--text-muted);
  font-weight:var(--weight-regular);
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  min-height:52px;
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  background:var(--surface-card);
  color:var(--text-body);
  font:inherit;
  transition:border-color var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard);
}
.form-field textarea{
  min-height:120px;
  resize:vertical;
  line-height:var(--leading-normal);
}
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover{border-color:var(--border-strong)}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--pp-blue-500);
  box-shadow:var(--ring-focus);
}
.form-error{
  margin-top:var(--space-5);
  padding:var(--space-4);
  border:1px solid var(--pp-danger-500);
  border-radius:var(--radius-md);
  background:var(--pp-danger-100);
  color:var(--pp-danger-500);
  font-weight:var(--weight-semibold);
}
.employment-form > .btn{
  width:100%;
  margin-top:var(--space-7);
}
.form-trap{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

@media (max-width:1024px){
  .careers-layout{grid-template-columns:1fr;gap:var(--space-7)}
  .careers-copy{position:static}
}

@media (max-width:640px){
  .careers-page-section{
    padding-top:var(--space-8);
    padding-bottom:calc(var(--space-11) + var(--space-6));
  }
  .careers-copy section + section{margin-top:var(--space-7)}
  .careers-form-card{padding:var(--space-6) var(--space-5);border-radius:var(--radius-lg)}
  .employment-form__grid{grid-template-columns:1fr}
  .form-field--full{grid-column:auto}
}


/* ==========================================================================
   11. ABOUT PAGE
   ========================================================================== */
.about-hero{
  position:relative;
  min-height:calc(500px + var(--header-h));
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
  color:var(--text-inverse);
}
.about-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(4,24,42,.90) 0%,rgba(4,24,42,.72) 44%,rgba(4,24,42,.20) 76%),
    linear-gradient(0deg,rgba(4,24,42,.58) 0%,rgba(4,24,42,0) 60%);
}
.about-hero__media{
  position:absolute;
  inset:0;
  z-index:-2;
}
.about-hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 58%;
}
.about-hero__container{width:100%}
.about-hero__inner{
  max-width:760px;
  padding:var(--space-10) 0 var(--space-9);
}
.about-hero h1{
  color:var(--text-inverse);
  font-size:clamp(40px,5vw,60px);
}
.about-hero__lede{
  max-width:64ch;
  margin-top:var(--space-5);
  color:rgba(255,255,255,.90);
  font-size:var(--text-lg);
  line-height:var(--leading-normal);
}

.about-story{
  max-width:1040px;
  margin-inline:auto;
}
.about-story__copy{
  max-width:76ch;
  margin-inline:auto;
}
.about-story__copy p{
  color:var(--text-body);
  font-size:var(--text-md);
  line-height:var(--leading-relaxed);
}
.about-story__copy p + p{margin-top:var(--space-6)}
.about-story__copy strong{color:var(--text-heading)}

.about-process{
  margin-top:var(--space-9);
  padding:var(--space-8);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background:var(--surface-subtle);
  box-shadow:var(--shadow-sm);
}
.about-process h2{font-size:var(--text-3xl)}
.about-process > p{
  margin-top:var(--space-5);
  color:var(--text-body);
  font-size:var(--text-md);
}
.about-process__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-4);
  margin:var(--space-7) 0 0;
  padding:0;
  list-style:none;
}
.about-process__list li{
  position:relative;
  padding:var(--space-5) var(--space-5) var(--space-5) var(--space-7);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--surface-primary);
  color:var(--text-body);
  line-height:var(--leading-relaxed);
}
.about-process__list li::before{
  content:"";
  position:absolute;
  top:30px;
  left:var(--space-5);
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--pp-blue-500);
}
.about-process__list strong{color:var(--text-heading)}

@media (max-width:640px){
  .about-hero{
    min-height:calc(430px + var(--header-h));
    align-items:center;
  }
  .about-hero::after{background:rgba(4,24,42,.72)}
  .about-hero__inner{
    padding:var(--space-7) 0;
    text-align:center;
  }
  .about-hero__lede{
    margin-left:auto;
    margin-right:auto;
    font-size:var(--text-base);
  }
  .about-process{padding:var(--space-6)}
  .about-process h2{font-size:var(--text-2xl)}
  .about-process__list{grid-template-columns:1fr}
}


/* ===========================================================================
   12. SERVICE AREAS PAGE
   =========================================================================== */
.service-area-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-5);
  margin-top:var(--space-7);
}
.service-area-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:184px;
  text-align:center;
}
.service-area-card h3{margin-top:var(--space-5)}

.service-areas-county{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:var(--space-9);
  align-items:center;
}
.service-areas-county__copy{max-width:62ch}
.service-areas-county__copy > p:last-child{
  margin-top:var(--space-5);
  color:var(--text-body);
  font-size:var(--text-lg);
}
.service-areas-county__note h3{margin-top:var(--space-5)}
.service-areas-county__note p{
  margin-top:var(--space-3);
  color:var(--text-body);
}

@media (max-width:1024px){
  .service-area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-areas-county{grid-template-columns:1fr;gap:var(--space-7)}
  .service-areas-county__copy{max-width:none}
}

@media (max-width:640px){
  .service-area-grid{grid-template-columns:1fr}
  .service-areas-county__copy{text-align:center}
  .service-areas-county__copy .eyebrow{margin-inline:auto}
}


/* ===========================================================================
   13. BLOG PAGE
   =========================================================================== */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-5);
  margin:var(--space-7) 0 0;
  padding:0;
  list-style:none;
}
.blog-grid > li{min-width:0}
.blog-card{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm);
}
.blog-card--interactive{
  transition:transform var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard);
}
.blog-card--interactive:hover,.blog-card--interactive:focus-within{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
}
.blog-card__link{
  display:flex;
  flex:1;
  flex-direction:column;
  color:inherit;
}
.blog-card__link:hover{color:inherit;text-decoration:none}
.blog-card__image{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  aspect-ratio:16 / 10;
  background:var(--gradient-water);
  border-bottom:1px solid var(--pp-blue-200);
  color:var(--pp-blue-600);
}
.blog-card__image img{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.blog-card__image span{
  color:var(--pp-blue-700);
  font-size:var(--text-xs);
  font-weight:var(--weight-bold);
}
.blog-card__body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:var(--space-6);
}
.blog-card__status{
  color:var(--pp-blue-700);
  font-size:var(--text-3xs);
  font-weight:var(--weight-extrabold);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
}
.blog-card h2,.blog-card h3{margin-top:var(--space-4);font-size:var(--text-xl)}
.blog-card__excerpt{
  margin-top:var(--space-4);
  color:var(--text-body);
}
.blog-card__date{
  margin-top:auto;
  padding-top:var(--space-5);
  color:var(--text-muted);
  font-size:var(--text-xs);
  font-weight:var(--weight-bold);
}
.blog-card--compact .blog-card__body{padding:var(--space-5)}
.blog-card--compact .blog-card__excerpt{display:none}
.blog-card--compact h2,.blog-card--compact h3{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.blog-post-hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:calc(500px + var(--header-h));
  overflow:hidden;
  isolation:isolate;
  background:var(--gradient-deep);
  color:var(--text-inverse);
  padding:calc(var(--header-h) + var(--space-8)) 0 var(--space-8);
}
.blog-post-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(4,24,42,.90) 0%,rgba(4,24,42,.74) 48%,rgba(4,24,42,.36) 82%),
    linear-gradient(0deg,rgba(4,24,42,.68) 0%,rgba(4,24,42,.14) 70%);
}
.blog-post-hero__media{
  position:absolute;
  inset:0;
  z-index:-2;
}
.blog-post-hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
}
.blog-post__frame{max-width:950px}
.blog-post-hero__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.blog-post__back{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  color:var(--pp-blue-200);
  font-size:var(--text-xs);
  font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
}
.blog-post__back:hover{color:var(--text-inverse)}
.blog-post-hero h1{
  max-width:18ch;
  margin-top:var(--space-6);
  color:var(--text-inverse);
  font-size:clamp(38px,4.5vw,56px);
}
.blog-post-hero__lede{
  max-width:42rem;
  margin-top:var(--space-5);
  color:var(--text-inverse-muted);
  font-size:var(--text-lg);
}
.blog-post__meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-3) var(--space-5);
  margin-top:var(--space-6);
  color:var(--pp-blue-200);
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
}
.blog-post__meta > * + *::before{
  content:"";
  display:inline-block;
  width:4px;
  height:4px;
  margin:0 var(--space-3) 2px 0;
  border-radius:50%;
  background:var(--pp-blue-300);
}
.blog-share{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--space-3) var(--space-4);
  margin-top:var(--space-5);
}
.blog-share__label{
  color:var(--pp-blue-200);
  font-size:var(--text-2xs);
  font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
}
.blog-share__controls{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-2);
}
.blog-share__control{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid var(--border-on-deep);
  border-radius:50%;
  background:transparent;
  color:var(--text-inverse);
  font:inherit;
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
  cursor:pointer;
  transition:var(--transition-control);
}
.blog-share__wordmark{line-height:1}
.blog-share__control:hover,.blog-share__control:focus-visible{
  border-color:var(--pp-blue-400);
  background:var(--pp-blue-500);
  color:var(--pp-navy-900);
  text-decoration:none;
}
.blog-share__control:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.blog-post__content{
  max-width:950px;
  margin:var(--space-7) auto 0;
  padding-bottom:var(--space-8);
  color:var(--text-body);
  font-size:var(--text-md);
  line-height:1.75;
}
.blog-post__content > * + *{margin-top:var(--space-5)}
.blog-post__content h2,.blog-post__content h3,.blog-post__content h4{margin-top:var(--space-8)}
.blog-post__content h2{color:var(--pp-blue-500);font-size:var(--text-2xl)}
.blog-post__content h3{font-size:var(--text-xl)}
.blog-post__content h4{font-size:var(--text-lg)}
.blog-post__content a{font-weight:var(--weight-bold)}
.blog-post__content ul,.blog-post__content ol{padding-left:var(--space-6)}
.blog-post__content li + li{margin-top:var(--space-2)}
.blog-post__content blockquote{
  margin-left:0;
  padding:var(--space-5) var(--space-6);
  border-left:4px solid var(--pp-blue-500);
  background:var(--pp-blue-100);
  color:var(--pp-navy-800);
  font-weight:var(--weight-semibold);
}
.blog-post__content figure{margin:var(--space-7) 0}
.blog-post__content figcaption{
  margin-top:var(--space-3);
  color:var(--text-muted);
  font-size:var(--text-xs);
  text-align:center;
}
.blog-post__content table{
  width:100%;
  border-collapse:collapse;
  color:var(--text-body);
  font-size:var(--text-sm);
  line-height:var(--leading-normal);
}
.blog-post__content .emdash-table-wrapper{
  margin:var(--space-6) 0;
  overflow-x:auto;
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
}
.blog-post__content th,.blog-post__content td{
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--border-default);
  text-align:left;
  vertical-align:top;
}
.blog-post__content th{
  background:var(--pp-blue-100);
  color:var(--pp-navy-800);
  font-weight:var(--weight-bold);
}
.blog-post__content th p,.blog-post__content td p{margin:0}
.blog-post__content tbody tr:nth-child(even){background:var(--surface-subtle)}
.blog-post__content iframe{width:100%;max-width:100%;border:0;border-radius:var(--radius-md)}
.blog-post__share-bottom{
  max-width:950px;
  margin:0 auto;
  padding:var(--space-6) 0 var(--space-8);
  border-top:1px solid var(--border-subtle);
}
.blog-post__share-bottom .blog-share{margin-top:0}
.blog-post__share-bottom .blog-share__label{color:var(--text-muted)}
.blog-post__share-bottom .blog-share__control{
  border-color:var(--border-default);
  color:var(--pp-navy-800);
}
.blog-related__title{text-align:center}

@media (max-width:640px){
  .blog-post-hero{
    min-height:calc(430px + var(--header-h));
    padding:calc(var(--header-h) + var(--space-7)) 0 var(--space-7);
  }
  .blog-post-hero::after{background:rgba(4,24,42,.74)}
  .blog-post__meta{gap:var(--space-2) var(--space-3)}
  .blog-post__meta > * + *::before{margin-right:var(--space-2)}
  .blog-share{gap:var(--space-2) var(--space-3)}
  .blog-share__controls{gap:var(--space-2)}
  .blog-post__content{margin-top:var(--space-6);padding-bottom:var(--space-7)}
  .blog-post__content .emdash-table{min-width:640px}
  .blog-post__content th,.blog-post__content td{min-width:144px}
}

@media print{
  .site-header,.site-footer,.skip-link,.blog-share,.closing-cta,[data-blog-related]{display:none !important}
  .page-main{padding-top:0}
  .blog-post-hero{padding:0 0 var(--space-6);background:none;color:var(--text-strong)}
  .blog-post-hero h1,.blog-post-hero__lede{color:var(--text-strong)}
  .blog-post__back,.blog-post-hero .eyebrow{display:none}
  .blog-post__meta{color:var(--text-body)}
}

@media (max-width:1024px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr}
}


/* Blog archive pagination */
.blog-empty{
  margin:var(--space-8) 0;
  color:var(--text-body);
  text-align:center;
}
.blog-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-4);
  margin-top:var(--space-8);
}
.blog-pagination__pages{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
}
.blog-pagination a,.blog-pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.75rem;
  min-height:2.75rem;
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);
  background:var(--surface-card);
  color:var(--pp-navy-800);
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
  text-decoration:none;
}
.blog-pagination a:hover{
  border-color:var(--pp-blue-400);
  background:var(--pp-blue-100);
  color:var(--pp-navy-900);
}
.blog-pagination span[aria-current="page"]{
  border-color:var(--pp-blue-700);
  background:var(--pp-blue-700);
  color:var(--text-inverse);
}
.blog-pagination a.blog-pagination__step{min-width:auto;padding-inline:var(--space-5)}

@media (max-width:640px){
  .blog-pagination{flex-direction:column}
}