@import url("tokens.css?v=20260909-1");

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:104px}
body{
  margin:0; background:var(--surface-canvas); color:var(--text-primary);
  font-family:var(--font-body); font-size:var(--text-body); line-height:var(--lh-body);
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--white) 24%,transparent),transparent 420px);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:4px}
.skip-link{position:fixed; top:var(--space-3); left:var(--space-3); z-index:1000; padding:var(--space-3) var(--space-4); background:var(--ink-900); color:var(--white); transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
::selection{background:var(--accent); color:var(--white)}

/* ---------- layout ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.container--wide{max-width:var(--container-wide)}
.section{padding-block:var(--section-y)}
.hero + .section,.page-hero + .section,.page-hero + .service-section,
.section + .section,.section + .section--compact,.section--compact + .section,
.service-section + .service-section,.service-section + .section{
  padding-top:clamp(40px,4vw,64px)
}
.dotted{
  background-image:linear-gradient(90deg,var(--surface-canvas),transparent 16%,transparent 84%,var(--surface-canvas)),radial-gradient(var(--dot-color) var(--dot-size), transparent var(--dot-size));
  background-size:100% 100%,var(--dot-gap) var(--dot-gap); background-repeat:no-repeat,repeat;
}

/* ---------- type ---------- */
.d-2xl,.d-xl,.d-lg,.d-md,.d-sm{
  font-family:var(--font-display); font-weight:400; margin:0;
  letter-spacing:-.005em; text-transform:none;
}
.d-2xl{font-size:var(--text-display-2xl); line-height:var(--lh-display-2xl)}
.d-xl{font-size:var(--text-display-xl); line-height:var(--lh-display-xl)}
.d-lg{font-size:var(--text-display-lg); line-height:var(--lh-display-lg)}
.d-md{font-size:var(--text-display-md); line-height:var(--lh-display-md)}
.d-sm{font-size:var(--text-display-sm); line-height:var(--lh-display-md)}
.lead{font-size:var(--text-body-lg); color:var(--text-secondary); margin:0; max-width:46ch}
.body-sm{font-size:var(--text-body-sm); color:var(--text-secondary); margin:0}
.label{
  font-family:var(--font-utility); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); margin:0;
}

/* ---------- button ---------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--space-2); height:var(--button-height);
  padding:var(--button-padding); border-radius:var(--button-radius); border:0;
  font-family:var(--font-body); font-size:var(--text-label); letter-spacing:.01em;
  cursor:pointer; box-shadow:none; white-space:nowrap;
  transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out),
             transform var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out);
}
.btn--primary{background:var(--accent); color:var(--text-on-accent)}
.btn--primary:hover{transform:translateY(-2px)}
.btn--primary:active{background:var(--accent-pressed); transform:translateY(0)}
.btn--secondary{background:transparent; color:var(--text-primary); border:1px solid var(--border-hairline)}
.btn--secondary:hover{background:var(--surface-raised); border-color:var(--text-primary); transform:translateY(-2px)}
.btn--secondary:active{background:var(--limestone-200); transform:translateY(0)}
.btn--sm{height:48px; padding:0 20px}
.btn:focus-visible{outline-offset:3px; box-shadow:0 0 0 3px color-mix(in srgb,var(--white) 88%,transparent)}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:var(--space-6) 0 auto 0; z-index:60;
  display:flex; justify-content:center; pointer-events:none;
  transition:top .7s var(--ease-in-out);
}
.nav__inner{
  pointer-events:auto; position:relative; display:flex; align-items:center; gap:var(--space-8);
  width:min(var(--nav-max-width), calc(100% - var(--space-8)));
  height:var(--nav-height); padding:0 var(--space-2) 0 var(--space-6);
  background:color-mix(in srgb, var(--nav-bg) 92%, transparent); border:1px solid rgba(255,255,255,.55);
  border-radius:var(--nav-radius); box-shadow:0 12px 40px rgba(7,6,7,.06); backdrop-filter:blur(14px);
  animation:nav-arrive .8s .08s var(--ease-out) both;
}
.nav__brand{display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-display);
  font-size:16px; line-height:var(--lh-display-md); letter-spacing:.02em}
.nav__brand svg{flex:0 0 22px}
.nav__links{display:flex; gap:var(--space-6); margin-inline:auto; font-size:var(--text-label)}
.nav__tel{font-size:var(--text-label); letter-spacing:.02em; margin-right:var(--space-4);
  transition:color var(--duration-fast) var(--ease-out)}
.nav__tel:hover{color:var(--text-muted)}
.nav__links a{transition:color var(--duration-fast) var(--ease-out)}
.nav__links a:hover{color:var(--text-muted)}
.nav__links a{position:relative}
.nav__links a::after{content:""; position:absolute; left:0; right:100%; bottom:-8px; height:2px; background:var(--accent);
  transition:right var(--duration-fast) var(--ease-out)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{right:0}
.nav__links a[aria-current="page"]{color:var(--text-primary)}

@media (min-width:901px){
  .nav__inner{
    width:min(var(--container-wide),calc(100% - var(--space-12)));
    background:transparent; border-color:transparent; box-shadow:none; backdrop-filter:blur(0);
    transition:width .75s var(--ease-in-out),background-color .55s var(--ease-out),
      border-color .55s var(--ease-out),box-shadow .55s var(--ease-out),backdrop-filter .55s var(--ease-out)
  }
  .nav__brand{width:124px; overflow:hidden; white-space:nowrap; flex:0 0 auto;
    transition:width .7s var(--ease-in-out)}
  .nav--compact{top:var(--space-4)}
  .nav--compact .nav__inner{
    width:min(860px,calc(100% - var(--space-12)));
    background:color-mix(in srgb,var(--nav-bg) 94%,transparent); border-color:rgba(255,255,255,.62);
    box-shadow:0 12px 40px rgba(7,6,7,.08); backdrop-filter:blur(14px)
  }
  .nav--compact .nav__brand{width:22px}
}

/* ---------- hero ---------- */
.hero{padding:112px 0 var(--section-y)}
.hero__stage{
  position:relative; min-height:min(760px,calc(100vh - 136px)); overflow:hidden;
  border-radius:var(--radius-lg); isolation:isolate; background:var(--surface-canvas);
}
.hero__stage::before{content:""; position:absolute; z-index:1; inset:var(--space-4); pointer-events:none;
  border:1px solid color-mix(in srgb,var(--white) 36%,transparent); border-radius:calc(var(--radius-lg) - var(--space-2)); opacity:.64}
.hero__stage::after{content:""; position:absolute; z-index:1; right:var(--space-8); top:var(--space-8); width:54px; height:54px;
  pointer-events:none; opacity:.72; background:linear-gradient(90deg,transparent 49%,var(--white) 49% 51%,transparent 51%),linear-gradient(0deg,transparent 49%,var(--white) 49% 51%,transparent 51%);
  clip-path:polygon(38% 0,62% 0,62% 38%,100% 38%,100% 62%,62% 62%,62% 100%,38% 100%,38% 62%,0 62%,0 38%,38% 38%)}
.hero__figure{position:absolute; inset:0; margin:0; overflow:hidden; opacity:0;
  animation:hero-photo-arrive 1.15s .2s var(--ease-in-out) forwards}
.hero__figure::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(7,6,7,.18),transparent 45%),linear-gradient(0deg,rgba(7,6,7,.18),transparent 45%)}
.hero__figure img{width:100%; height:100%; object-fit:cover; object-position:center 52%; transform:scale(1.045);
  animation:hero-photo-settle 1.6s .2s var(--ease-out) forwards}
.hero__title-panel,.hero__detail-panel{position:absolute; z-index:2; background:var(--surface-canvas)}
.hero__title-panel{
  inset:0 auto auto 0; width:47%; min-height:39%; padding:var(--space-6) var(--space-8) var(--space-8) 0;
  border-bottom-right-radius:var(--radius-lg); clip-path:inset(0 100% 0 0 round 0 0 var(--radius-lg) 0);
  animation:hero-cut-title .9s .92s var(--ease-in-out) forwards;
}
.hero__detail-panel{
  inset:auto 0 0 auto; width:39%; min-height:35%; padding:var(--space-8) 0 0 var(--space-8);
  border-top-left-radius:var(--radius-lg); clip-path:inset(100% 0 0 0 round var(--radius-lg) 0 0 0);
  animation:hero-cut-detail .9s 1.02s var(--ease-in-out) forwards;
}
.hero__eyebrow{display:flex; justify-content:space-between; gap:var(--space-4); margin:0 0 var(--space-6);
  font-family:var(--font-utility); font-size:10px; letter-spacing:.1em; line-height:1; text-transform:uppercase; color:var(--text-muted);
  opacity:0; animation:hero-copy-arrive .7s 1.62s var(--ease-out) forwards}
.hero__head{font-size:clamp(64px,7.3vw,112px); line-height:.88; letter-spacing:-.025em}
.hero__line{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em}
.hero__line > span{display:block; transform:translateY(115%); animation:hero-line-arrive .85s var(--ease-out) forwards}
.hero__line:first-child > span{animation-delay:1.55s}
.hero__line:nth-child(2) > span{animation-delay:1.67s}
.hero__intro{max-width:34ch; margin:0 0 var(--space-6); font-size:var(--text-body-lg); line-height:1.45;
  color:var(--text-secondary); opacity:0; transform:translateY(20px); animation:hero-copy-arrive .75s 1.7s var(--ease-out) forwards}
.hero__actions{display:flex; flex-wrap:wrap; gap:var(--space-3); opacity:0; transform:translateY(20px);
  animation:hero-copy-arrive .75s 1.8s var(--ease-out) forwards}
.hero__actions .btn--primary span{font-size:16px; transition:transform var(--duration-fast) var(--ease-out)}
.hero__actions .btn--primary:hover span{transform:translate(2px,-2px)}
.hero__proof{display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-6); padding-top:var(--space-6); margin-top:var(--space-6);
  border-top:1px solid var(--border-hairline); font-family:var(--font-utility); font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted);
  opacity:0; animation:hero-copy-arrive .75s 1.92s var(--ease-out) forwards}
.hero__proof span{position:relative}
.hero__proof span:not(:last-child)::after{content:""; position:absolute; top:50%; right:-13px; width:3px; height:3px;
  border-radius:50%; background:var(--accent)}
.hero__location{position:absolute; z-index:1; left:var(--space-8); bottom:var(--space-6); margin:0; color:var(--white);
  font-family:var(--font-utility); font-size:9px; letter-spacing:.09em; text-transform:uppercase; text-shadow:0 1px 12px rgba(0,0,0,.45);
  opacity:0; animation:hero-copy-arrive .8s 2s var(--ease-out) forwards}
.hero__location span{color:var(--accent); margin-inline:var(--space-2)}

@keyframes nav-arrive{from{opacity:0; transform:translateY(-18px)}to{opacity:1; transform:translateY(0)}}
@keyframes hero-photo-arrive{0%{opacity:.58; filter:saturate(.72) brightness(.9)}100%{opacity:1; filter:saturate(.9) brightness(.92)}}
@keyframes hero-photo-settle{to{transform:scale(1)}}
@keyframes hero-cut-title{to{clip-path:inset(0 0 0 0 round 0 0 var(--radius-lg) 0)}}
@keyframes hero-cut-detail{to{clip-path:inset(0 0 0 0 round var(--radius-lg) 0 0 0)}}
@keyframes hero-line-arrive{to{transform:translateY(0)}}
@keyframes hero-copy-arrive{to{opacity:1; transform:translateY(0)}}

/* ---------- inner-page hero ---------- */
.page-hero{padding:136px 0 var(--section-y)}
.page-hero__grid{display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:var(--space-8); align-items:stretch}
.page-hero__copy{display:flex; flex-direction:column; justify-content:flex-end; min-height:560px; padding:var(--space-12) var(--space-8) var(--space-8) 0}
.page-hero__eyebrow{display:flex; align-items:center; gap:var(--space-3); margin:0 0 var(--space-8); color:var(--text-muted);
  font-family:var(--font-utility); font-size:10px; letter-spacing:.1em; line-height:1; text-transform:uppercase}
.page-hero__eyebrow::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--accent)}
.page-hero__title{font-size:clamp(64px,7.4vw,112px); line-height:.9; letter-spacing:-.025em; margin:0 0 var(--space-8)}
.page-hero__lead{font-size:var(--text-body-lg); color:var(--text-secondary); max-width:43ch; margin:0 0 var(--space-8)}
.page-hero__media{position:relative; min-height:560px; margin:0; overflow:hidden; border-radius:var(--radius-lg); background:var(--surface-raised); box-shadow:var(--shadow-soft)}
.page-hero__media::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(7,6,7,.22),transparent 42%)}
.page-hero__media img{width:100%; height:100%; object-fit:cover; filter:saturate(.88) contrast(.98); transition:transform 1.4s var(--ease-out),filter 1.4s var(--ease-out)}
.page-hero:hover .page-hero__media img{transform:scale(1.015)}
.page-hero:hover .page-hero__media img{filter:saturate(1) contrast(1)}
.page-hero__stat{position:absolute; z-index:1; right:var(--space-6); bottom:var(--space-6); min-width:190px;
  padding:var(--space-5,var(--space-4)) var(--space-6); background:color-mix(in srgb,var(--surface-raised) 92%,transparent);
  border:1px solid rgba(255,255,255,.55); border-radius:var(--radius-md); backdrop-filter:blur(12px)}
.page-hero__stat strong{display:block; font-family:var(--font-display); font-size:34px; font-weight:400; line-height:1}
.page-hero__stat span{display:block; margin-top:var(--space-2); color:var(--text-muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase}
.page-hero__stat span{font-family:var(--font-utility); font-size:9px}

/* ---------- visual utilities ---------- */
.section--compact{padding-block:clamp(48px,5vw,72px)}
.icon-badge{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; flex:0 0 46px;
  color:var(--text-primary); background:var(--limestone-200); border:1px solid var(--border-hairline); border-radius:50%}
.icon-badge--dark{color:var(--white); background:var(--ink-900); border-color:var(--ink-900)}
.icon-badge--accent{color:var(--white); background:var(--accent); border-color:var(--accent)}
.icon-badge svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round}
.card__topline{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-6)}
.card__index{font-family:var(--font-utility); font-size:9px; letter-spacing:.09em; color:var(--text-muted)}
.feature-list{display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; padding:0; margin:var(--space-6) 0 0}
.feature-list li{padding:7px 11px; border:1px solid var(--border-hairline); border-radius:var(--radius-pill);
  color:var(--text-secondary); font-size:11px; line-height:1}

.showcase-strip{display:grid; grid-template-columns:1.45fr .75fr .75fr; gap:var(--space-4)}
.showcase-strip figure{position:relative; min-height:390px; margin:0; overflow:hidden; border-radius:var(--radius-lg); background:var(--surface-raised); box-shadow:var(--shadow-soft)}
.showcase-strip img{width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(.98); transition:transform var(--duration-slow) var(--ease-out),filter var(--duration-slow) var(--ease-out)}
.showcase-strip figure:hover img{transform:scale(1.025); filter:saturate(1) contrast(1)}
.showcase-strip figcaption{position:absolute; inset:auto var(--space-4) var(--space-4); display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4); padding:var(--space-3) var(--space-4); color:var(--white); background:rgba(7,6,7,.68); border-radius:var(--radius-pill);
  backdrop-filter:blur(8px); font-size:11px; letter-spacing:.04em}

/* ---------- stat band ---------- */
.stats{
  background-color:var(--stat-bg); background-image:none;
  border-radius:var(--stat-radius); color:var(--text-on-accent);
  display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden;
}
.stat{padding:var(--space-8); min-height:176px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-4); text-align:center}
.stat + .stat{border-left:1px solid var(--stat-divider)}
.stat__label{font-family:var(--font-utility); font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-on-accent); margin:0}
.stat__value{font-family:var(--font-display); font-size:clamp(40px,4.4vw,56px);
  line-height:var(--lh-display-md); color:var(--text-on-accent)}

.band__head{text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-8); margin-bottom:var(--gap-block)}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(var(--reveal-offset));
  transition:opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out)}
.reveal.is-in{opacity:1; transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .nav,.nav__inner,.nav__brand{transition:none}
  .nav__inner,.hero__figure,.hero__figure img,.hero__title-panel,.hero__detail-panel,.hero__eyebrow,
  .hero__line > span,.hero__intro,.hero__actions,.hero__proof,.hero__location{
    animation:none; opacity:1; transform:none; clip-path:none; filter:none
  }
  .btn,.card,.proj,.step,.assure,.ba figure,.card__media img,.proj__media img,.showcase-strip img,.page-hero__media img{transition:none}
  .btn:hover,.card:hover,.proj:hover,.step:hover,.assure:hover,.ba figure:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ---------- mobile navigation ---------- */
/* Built by nav.js from the existing links, so no page markup carries a duplicate menu. */
.nav__toggle{display:none}
.nav__panel{
  position:absolute; top:calc(var(--nav-height) + var(--space-2)); left:0; right:0;
  background:var(--nav-bg); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-6);
  flex-direction:column; box-shadow:none;
}
.nav__panel[hidden]{display:none}
/* separates the open panel from the page beneath it, so a half-clipped line of body
   copy does not sit under the menu looking like a rendering fault */
.nav__scrim{
  position:fixed; inset:0; background:var(--nav-scrim); pointer-events:auto;
  opacity:0; transition:opacity var(--duration-fast) var(--ease-out);
}
.nav__scrim[hidden]{display:none}
.nav__scrim.is-on{opacity:1}
.nav__panel a{
  display:flex; align-items:center; min-height:48px; font-size:var(--text-body);
  border-bottom:1px solid var(--border-hairline);
}
.nav__panel a:last-child{border-bottom:0}
.nav__panel a[aria-current="page"]{color:var(--accent)}
.nav__panel a[aria-current="page"]::after{content:"Current"; margin-left:auto; font-family:var(--font-utility); font-size:9px; letter-spacing:.08em; text-transform:uppercase}
.nav__panel .nav__panel-tel{font-family:var(--font-display); font-size:var(--text-display-xs);
  line-height:var(--lh-display-md)}
.nav__panel .nav__panel-cta{font-family:var(--font-display); font-size:var(--text-display-xs);
  line-height:var(--lh-display-md)}
.nav__call{display:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{
    --section-y:64px; --gap-block:44px; --gutter:24px; --card-padding:var(--space-8);
    /* M2 is a ratio, not a size. The desktop clamp bottomed out at 52px against an 18px
       lead — 2.9x, well under the 4x floor. Steeper slope up, lead down. */
    --text-display-xl:clamp(48px,17.5vw,96px);
    --text-body-lg:16px;
  }
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat + .stat{border-left:0}
  .stats .stat:nth-child(n+3){border-top:1px solid var(--stat-divider)}
  .stats .stat:nth-child(even){border-left:1px solid var(--stat-divider)}

  /* the pill keeps brand + menu + quote; phone and links move into the panel */
  .nav__inner{gap:var(--space-3); padding:0 var(--space-2) 0 var(--space-4)}
  .nav__brand{font-size:14px; white-space:nowrap; min-height:44px}
  .nav__links{display:none}
  .nav__tel{display:none}
  .nav__toggle{display:inline-flex; margin-left:auto}
  /* the pill carries Menu + Call; the quote CTA moves into the panel */
  .nav__inner > a.btn[href="quote.html"]{display:none}
  .nav__call{display:inline-flex}

  /* the fold needs clearance under the floating pill */
  .hero{padding-top:112px}
  .hero__stage{min-height:720px}
  .hero__title-panel{width:61%; min-height:37%; padding-right:var(--space-6)}
  .hero__detail-panel{width:56%; min-height:38%; padding-left:var(--space-6)}
  .hero__head{font-size:clamp(58px,10.5vw,88px)}
  .hero__eyebrow span:last-child{display:none}
  .page-hero{padding-top:112px}
  .page-hero__grid{grid-template-columns:1fr}
  .page-hero__copy{min-height:0; padding:var(--space-8) 0 var(--space-6)}
  .page-hero__media{min-height:460px}
  .page-hero__title{font-size:clamp(58px,13vw,88px)}
  .showcase-strip{grid-template-columns:1fr 1fr}
  .showcase-strip figure:first-child{grid-column:1 / -1}
  .showcase-strip figure{min-height:320px}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .stats .stat:nth-child(even){border-left:0}
  .stats .stat + .stat{border-top:1px solid var(--stat-divider)}
  .stat{min-height:132px; padding:var(--space-6)}
  .hero{padding-top:104px}
  .hero__stage{min-height:760px; border-radius:var(--radius-md); background:var(--surface-canvas); overflow:visible}
  .hero__stage::before,.hero__stage::after{display:none}
  .hero__figure{inset:230px 0 245px; border-radius:var(--radius-md); opacity:0; overflow:hidden}
  .hero__figure::after{background:linear-gradient(0deg,rgba(7,6,7,.22),transparent 50%)}
  .hero__title-panel{inset:0 0 auto; width:100%; min-height:230px; padding:0 0 var(--space-8); border-radius:0}
  .hero__detail-panel{inset:auto 0 0; width:100%; min-height:245px; padding:var(--space-8) 0 0; border-radius:0}
  .hero__head{font-size:clamp(52px,16vw,76px)}
  .hero__eyebrow{margin-bottom:var(--space-4)}
  .hero__intro{font-size:15px; margin-bottom:var(--space-4)}
  .hero__proof{padding-top:var(--space-4); margin-top:var(--space-4); gap:var(--space-2) var(--space-4)}
  .hero__proof span:not(:last-child)::after{right:-9px}
  .hero__location{left:var(--space-4); bottom:269px}
  .hero__actions{width:100%}
  .hero__actions .btn{flex:1; justify-content:center}
  .page-hero{padding-top:96px}
  .page-hero__copy{padding-top:var(--space-6)}
  .page-hero__title{font-size:clamp(52px,16vw,72px); margin-bottom:var(--space-6)}
  .page-hero__lead{font-size:15px; margin-bottom:var(--space-6)}
  .page-hero__media{min-height:390px; border-radius:var(--radius-md)}
  .page-hero__stat{right:var(--space-4); bottom:var(--space-4)}
  .showcase-strip{grid-template-columns:1fr}
  .showcase-strip figure:first-child{grid-column:auto}
  .showcase-strip figure{min-height:290px; border-radius:var(--radius-md)}
}

/* Two pills side by side cannot shrink below their nowrap labels, so on a narrow phone the
   row burst its container and dragged the whole document sideways — the fixed nav then
   inherited the widened viewport, which made it look like a nav bug. Stack them instead. */
@media (max-width:420px){
  .hero__actions{flex-direction:column; align-items:stretch}
  .hero__actions .btn{flex:0 0 auto; width:100%}
}

/* Narrow phones. Brand + Menu + CTA need ~333px of content inside a pill that is only
   288px wide at 320px, and nothing in the row can shrink, so the nav pushed the page
   sideways. Tighten the row; below 340px the wordmark gives way to the mark alone. */
@media (max-width:374px){
  :root{--text-body-lg:14px}          /* keeps the M2 ratio ≥4x once the hero clamp bottoms out */
  .nav__inner{gap:var(--space-2); padding:0 var(--space-2) 0 var(--space-3)}
  .nav__brand{font-size:13px}
  .btn--sm{padding:0 14px}
  .nav__toggle{padding:0 12px}
}
@media (max-width:340px){
  /* font-size:0 hides the wordmark; the SVG mark carries its own width/height attributes */
  .nav__brand{font-size:0; gap:0}
}