/* ==========================================================================
   Averon Auto Glass
   Direction: "the edge" - the bonded rim you never see, lit in the sea green
   that real float glass shows edge-on. Tokens below are the whole palette.
   ========================================================================== */

:root{
  /* ground */
  --canvas:#0B1219;
  --canvas-deep:#070C11;
  --panel:#121C24;
  --panel-2:#18242E;

  /* the accent, and it is an action colour */
  --accent:#79C6A6;
  --accent-hover:#8FD6B8;
  --accent-muted:rgba(121,198,166,.20);
  --accent-faint:rgba(121,198,166,.08);
  --accent-ink:#06120D;

  /* type */
  --text-primary:#E8EEF1;
  --text-secondary:#93A3AE;
  --text-quiet:#6D7C88;

  /* lines */
  --hairline:rgba(147,163,174,.16);
  --hairline-strong:rgba(147,163,174,.34);

  /* families */
  --display:'Archivo','Archivo Fallback',system-ui,sans-serif;
  --body:'Hanken Grotesk','Hanken Grotesk Fallback',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* scale */
  --s-13:.8125rem;
  --s-15:.9375rem;
  --s-17:1.0625rem;
  --s-20:clamp(1.125rem,.4vw + 1rem,1.25rem);
  --s-27:clamp(1.375rem,1.1vw + 1rem,1.6875rem);
  --s-38:clamp(1.75rem,2.2vw + 1rem,2.375rem);
  --s-55:clamp(2.25rem,4vw + 1rem,3.4375rem);
  --s-76:clamp(2.75rem,6vw + 1rem,4.75rem);

  /* space */
  --gutter:clamp(1.25rem,4vw,3rem);
  --container:1240px;
  --section:clamp(3.25rem,6.5vw,5.5rem);
  --section-lg:clamp(4.25rem,9vw,7rem);

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t:170ms;
  --t-slow:520ms;

  /* the text-shadow token for type over live footage */
  --tshadow:0 1px 2px rgba(4,8,11,.95),0 3px 12px rgba(4,8,11,.78),0 10px 44px rgba(4,8,11,.8);
}

/* --------------------------------------------------------------------------
   base
   -------------------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;      /* fallback first */
  overflow-x:clip;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:var(--s-17);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{display:block;max-width:100%}
img{height:auto}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}

p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

a{color:inherit;text-decoration:none}

/* the accent owns focus */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

::selection{background:var(--accent-muted);color:var(--text-primary)}

.skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:200;
  background:var(--accent);color:var(--accent-ink);
  padding:.7rem 1.1rem;border-radius:3px;
  font-family:var(--display);font-weight:600;font-size:var(--s-15);
  transition:top var(--t) var(--ease);
}
.skip:focus{top:1rem}

.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.container{
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:var(--gutter);
}

/* --------------------------------------------------------------------------
   the environment layer - one place, not stacked sections
   -------------------------------------------------------------------------- */

.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vw 45vw at 18% 12%,var(--accent-faint) 0%,transparent 62%),
    radial-gradient(52vw 40vw at 86% 78%,rgba(121,198,166,.05) 0%,transparent 60%);
  animation:envdrift 96s ease-in-out -22s infinite alternate;
}
.env::after{
  content:"";position:absolute;inset:-50%;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@keyframes envdrift{
  from{transform:translate3d(-1.4%,-1%,0) scale(1.03)}
  to{transform:translate3d(1.6%,1.2%,0) scale(1.07)}
}

/* whisper-level motes */
.motes{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mote{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--accent);opacity:.13;
  animation:motedrift 84s linear infinite;
}
@keyframes motedrift{
  0%{transform:translate3d(0,10vh,0)}
  100%{transform:translate3d(4vw,-100vh,0)}
}

.page{position:relative;z-index:1}

/* --------------------------------------------------------------------------
   header
   -------------------------------------------------------------------------- */

.site-header{
  position:absolute;top:0;left:0;right:0;z-index:60;
  padding-block:clamp(1rem,2.2vw,1.6rem);
}
.site-header.is-fixed{
  position:fixed;
  background:rgba(7,12,17,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

.brand{display:flex;align-items:center;flex:0 0 auto}
/* the supplied lockup artwork, not a redraw */
.brand img{
  width:clamp(146px,15vw,198px);height:auto;display:block;
  transition:opacity var(--t) var(--ease);
}
.brand:hover img{opacity:.82}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem)}
.nav a{
  font-family:var(--display);font-weight:500;font-size:var(--s-15);
  color:var(--text-primary);
  transition:color var(--t) var(--ease);
  position:relative;padding-block:.35rem;
}
.nav a:not(.btn):hover,
.nav a:not(.btn):focus-visible{color:var(--accent)}
/* the CTA in the nav is a button first: .nav a would otherwise win on
   specificity and paint its label off-white on the green fill */
.nav a.btn-primary,.nav a.btn-primary:hover{color:var(--accent-ink)}
.nav a.btn-ghost{color:var(--text-primary)}
.nav a.btn-ghost:hover{color:var(--accent)}
.nav a[aria-current="page"]{color:var(--text-primary)}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
}

.nav-toggle{
  display:none;background:none;border:1px solid var(--hairline-strong);
  color:var(--text-primary);border-radius:3px;padding:.55rem .8rem;
  font-family:var(--display);font-weight:500;font-size:var(--s-15);cursor:pointer;
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.nav-toggle:hover{border-color:var(--accent)}

/* --------------------------------------------------------------------------
   buttons
   -------------------------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--display);font-weight:600;font-size:var(--s-15);
  letter-spacing:.005em;
  padding:.85rem 1.35rem;border-radius:3px;border:1px solid transparent;
  cursor:pointer;text-shadow:none;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             border-color var(--t) var(--ease),transform var(--t) var(--ease);
}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{border-color:var(--hairline-strong);color:var(--text-primary);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn:active{transform:translateY(1px)}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav a{min-height:44px;display:inline-flex;align-items:center}
}

/* --------------------------------------------------------------------------
   the signature: the edge line (frit - a solid band fading into dots)
   -------------------------------------------------------------------------- */

.edge{position:relative;height:8px;width:100%;margin-block:0}
.edge::before{
  content:"";position:absolute;left:0;top:3px;width:56%;height:1px;
  background:linear-gradient(90deg,var(--hairline-strong) 0%,var(--hairline) 100%);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.15s var(--ease-out);
}
.edge::after{
  content:"";position:absolute;left:56%;right:0;top:0;height:7px;
  background-image:radial-gradient(circle at 2px 3.5px,var(--hairline-strong) 1.15px,transparent 1.25px);
  background-size:9px 7px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 92%);
  mask-image:linear-gradient(90deg,#000 0%,transparent 92%);
  opacity:0;transition:opacity .95s var(--ease) .3s;
}
.edge.in::before{transform:scaleX(1)}
.edge.in::after{opacity:1}
.edge .glint{
  position:absolute;left:54%;top:-4px;width:60px;height:9px;
  background:radial-gradient(ellipse at center,var(--accent-muted) 0%,transparent 70%);
  opacity:0;transition:opacity 1s var(--ease) .5s;
}
.edge.in .glint{opacity:1}

/* --------------------------------------------------------------------------
   the scrub hero
   -------------------------------------------------------------------------- */

.hero{position:relative;height:340vh;background:var(--canvas-deep)}
/* A phone scrolls in shorter strokes than a mouse wheel, so the same film takes
   more gestures to get through. Shorten the run there. Every caption still
   arrives in full at 280vh, checked at a browsing pace and at a hard flick. */
@media (max-width:860px){
  .hero{height:280vh}
}
.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--canvas-deep);
}
/* A phone browser draws its toolbar over the page, and 100vh is the screen
   measured with that toolbar hidden - so the foot of the stage, which carries
   the buttons, the last line of each caption and the scroll cue, sat beneath
   it. svh is the same screen measured with the toolbar showing. Sizing the
   stage that way fits the whole composition into what is actually visible.
   Where there is no toolbar the two units are equal and nothing moves, and the
   hero behind the stage is the same colour, so the strip the stage gives back
   when the toolbar retracts is not visible. */
@supports (height:100svh){
  .stage{height:100svh}
}

@supports (container-type:size){
  .stage{container-type:size;container-name:stage}
}

.poster{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:opacity .7s var(--ease);
}
#hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s var(--ease);
  will-change:transform;transform:translateZ(0);
}
.stage.video-ready #hero-video{opacity:1}
.stage.video-failed #hero-video{display:none}

/* the global base scrim, always on */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 118% 92% at 62% 46%,rgba(6,10,14,0) 30%,rgba(6,10,14,.62) 100%),
    linear-gradient(90deg,rgba(6,10,14,.52) 0%,rgba(6,10,14,.16) 44%,rgba(6,10,14,0) 64%);
}

.bands{position:absolute;inset:0;pointer-events:none}

.band{
  position:absolute;
  left:clamp(var(--gutter), 11.5vw, 300px);
  top:42%;
  /* px, not ch: a ch on the container resolves against the body font, not
     the display face inside it, so it caps the wrong measure */
  width:min(580px,44vw);
  opacity:0;
  text-shadow:var(--tshadow);
  /* the band owns its own stacking context, so the scrim below can sit at
     z-index -1 and land ON the footage instead of behind it */
  isolation:isolate;
}
/* the per-band scrim: dims exactly while its text is on, never flattens */
/* the box is deliberately much larger than the text and the ellipse dies
   well inside it, so the pool of shadow fades out instead of clipping into
   a visible rectangle */
.band::before{
  content:"";position:absolute;
  inset:-70% -80% -70% -70%;
  pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 47% 43% at 41% 50%,
    rgba(4,8,11,.94) 0%,rgba(4,8,11,.88) 32%,rgba(4,8,11,.66) 54%,
    rgba(4,8,11,.28) 70%,rgba(4,8,11,0) 84%);
}
.band[data-peak="hook"]::before{
  background:radial-gradient(ellipse 49% 45% at 41% 50%,
    rgba(4,8,11,.95) 0%,rgba(4,8,11,.90) 32%,rgba(4,8,11,.70) 54%,
    rgba(4,8,11,.32) 70%,rgba(4,8,11,0) 84%);
}
/* band one carries a kicker above its headline, so it starts higher by
   exactly that much and all four headlines still land on the same line */
.band:has(.kicker){top:calc(42% - (var(--s-13) * 1.6 + .95rem))}

.band .btn{text-shadow:none;pointer-events:auto}

.kicker{
  font-family:var(--mono);font-weight:500;font-size:var(--s-13);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
  display:flex;align-items:center;gap:.7rem;
  margin-bottom:.95rem;
}
.kicker::before{
  content:"";width:26px;height:1px;background:var(--accent);opacity:.75;flex:0 0 auto;
}

/* the ch caps live on the text elements, where they resolve against Archivo */
.band h1{font-size:var(--s-55);max-width:18ch}
.band h2{font-size:var(--s-55);max-width:18ch}
.band .lede{
  margin-top:1.15rem;font-size:var(--s-20);color:var(--text-primary);
  max-width:30ch;line-height:1.5;
}
.band .row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}

/* split-text spans */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) drift-down: words start above and fall into place */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}
/* (b) grid snap-align: characters slide in horizontally, in reading order */
.e-snap .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3.1,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)));
}
.e-snap .lede{
  --ks:clamp(0,(var(--k,0) - .5)*3.4,1);
  opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks)) * 12px));
}
/* (c) staged settle: headline words rise, then lede, then buttons */
.e-settle .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 22px));
}
.e-settle .lede{
  --ks:clamp(0,(var(--k,0) - .60)*3.6,1);
  opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks)) * 14px));
}
.e-settle .row{
  --kb:clamp(0,(var(--k,0) - .74)*4.4,1);
  opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb)) * 14px));
}

/* the two calls to action ride the stage, not a caption, so they are on
   screen for the whole journey instead of only at the end. The script sets
   --cta-top to the foot of whichever caption is on, so they sit just under
   the words and slide when a taller or shorter caption takes over. */
.stage-cta{
  position:absolute;z-index:3;
  left:clamp(var(--gutter), 11.5vw, 300px);
  top:calc(var(--cta-top, 58%) + 1.9rem);
  display:flex;flex-wrap:wrap;gap:.75rem;
  transition:top .45s var(--ease);
}

/* the loading ring */
.ring{
  position:absolute;right:var(--gutter);bottom:calc(var(--gutter) + 1.5rem);
  width:44px;height:44px;color:var(--accent);
  opacity:.85;transform:rotate(-90deg);
}
.ring circle{transition:stroke-dashoffset .16s linear}
.stage.video-ready .ring{opacity:0;transition:opacity .5s var(--ease)}

.scroll-cue{
  position:absolute;left:50%;bottom:calc(var(--gutter) + .5rem);
  transform:translateX(-50%);
  font-family:var(--mono);font-size:var(--s-13);letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-secondary);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  text-shadow:var(--tshadow);
}
.scroll-cue span{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--accent),transparent);
  animation:cuedrop 2.6s var(--ease) -.4s infinite}
@keyframes cuedrop{0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  46%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* --------------------------------------------------------------------------
   the static hero (phones, portrait tablets, reduced motion)
   -------------------------------------------------------------------------- */

.static-hero{display:none;position:relative;min-height:84svh;overflow:hidden}
.static-hero .shot{
  position:absolute;inset:0;
  background-size:cover;background-position:58% center;
}
.static-hero .shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,12,17,.72) 0%,rgba(7,12,17,.42) 34%,rgba(7,12,17,.88) 100%);
}
.static-hero .inner{
  position:relative;z-index:2;
  min-height:84svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:calc(var(--gutter) + 4rem) var(--section);
}
/* the fallback hero heading is a paragraph, not a second h1, so the page has
   one heading. It carries the display face itself to look unchanged. */
.static-hero .static-h1{
  font-family:var(--display);font-weight:500;line-height:1.06;letter-spacing:-.022em;
  margin:0;text-wrap:balance;
  font-size:var(--s-55);max-width:16ch;text-shadow:var(--tshadow);
}
.static-hero .lede{
  margin-top:1rem;max-width:44ch;color:var(--text-primary);
  font-size:var(--s-20);text-shadow:var(--tshadow);
}
.static-hero .row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}

/* --------------------------------------------------------------------------
   page header (the four inner pages)
   -------------------------------------------------------------------------- */

/* one fixed band height on every page, so the header does not jump as you
   click between them. Content sits on the bottom edge of the band. */
.page-head{
  position:relative;overflow:hidden;background:var(--canvas-deep);
  min-height:536px;display:flex;align-items:flex-end;
}
.page-head .shot{
  position:absolute;inset:0;background-size:cover;background-position:64% center;opacity:.82;
}
/* dark enough on the left for the headline, open enough on the right that
   the photograph is actually a photograph */
.page-head .shot::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,12,17,.90) 0%,rgba(7,12,17,.74) 34%,rgba(7,12,17,.34) 66%,rgba(7,12,17,.22) 100%),
    linear-gradient(180deg,rgba(7,12,17,.55) 0%,rgba(7,12,17,.20) 38%,rgba(11,18,25,.86) 88%,var(--canvas) 100%);
}
.page-head .inner{
  position:relative;z-index:2;width:100%;
  padding-block:calc(var(--gutter) + 5rem) clamp(2rem,4vw,3rem);
}
.page-head h1{font-size:var(--s-55);max-width:18ch}
.page-head .lede{margin-top:1rem;max-width:56ch;color:var(--text-secondary);font-size:var(--s-20)}

/* --------------------------------------------------------------------------
   breadcrumb: a quiet line at the head of the first section under the page
   header, so the trail people see is the trail the markup describes
   -------------------------------------------------------------------------- */

.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:var(--s-13);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-quiet);
  margin-bottom:1.6rem;
}
.crumbs li{display:flex;align-items:center;gap:.6rem}
.crumbs li + li::before{
  content:"";width:10px;height:1px;background:var(--hairline-strong);flex:0 0 auto;
}
.crumbs a{color:var(--text-secondary);transition:color var(--t) var(--ease)}
.crumbs a:hover{color:var(--accent)}

/* --------------------------------------------------------------------------
   sections
   -------------------------------------------------------------------------- */

.section{padding-block:var(--section);position:relative}
.section-lg{padding-block:var(--section-lg)}
/* two plain sections in a row stack their padding into one long empty gap.
   The join only needs the rhythm once, so the second one opens tighter. A
   section carrying its own ground (.seal, .quote, .cta-band) keeps the full
   measure on both sides, because there the padding is the box, not the gap. */
.section:not(.seal):not(.quote):not(.cta-band) + .section:not(.seal):not(.quote):not(.cta-band){
  padding-top:calc(var(--section) * .6);
}
.section-head{max-width:60ch}
.section-head h2{font-size:var(--s-38);margin-top:.85rem}
.section-head .lede{margin-top:.95rem;color:var(--text-secondary);max-width:52ch;font-size:var(--s-20)}

.kicker-dark{color:var(--accent)}

/* 6.1 the promise row - three claims, mono numerals, hairlines, no images */
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:2.25rem}
.promise li{
  padding:1.55rem 2rem 1.55rem 0;
  border-top:1px solid var(--hairline);
  position:relative;
}
.promise li + li{padding-left:2rem;border-left:1px solid var(--hairline)}
.promise .num{
  font-family:var(--mono);font-size:var(--s-13);color:var(--accent);
  letter-spacing:.2em;display:block;margin-bottom:.8rem;
}
.promise h3{font-size:var(--s-20);letter-spacing:-.012em}
.promise p{margin-top:.7rem;color:var(--text-secondary);font-size:var(--s-15);max-width:34ch}
.promise li::after{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--accent);
  transition:width 1s var(--ease-out);
}
.promise li + li::after{left:2rem}
.promise.in li::after{width:38px}

/* 6.2 services - one wide lead card, then three uprights */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);margin-top:2.5rem}
.svc{
  grid-column:span 1;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease);
}
.svc:hover{border-color:var(--hairline-strong);transform:translateY(-3px)}
.svc-lead{grid-column:span 3;flex-direction:row;align-items:stretch}
.svc figure{margin:0;position:relative;overflow:hidden;background:var(--canvas-deep)}
.svc-lead figure{flex:0 0 46%;min-height:270px}
.svc:not(.svc-lead) figure{aspect-ratio:16/10}
.svc figure img{width:100%;height:100%;object-fit:cover;
  transition:transform 900ms var(--ease)}
.svc:hover figure img{transform:scale(1.035)}
.svc-body{padding:clamp(1.15rem,2vw,1.65rem);display:flex;flex-direction:column;gap:.8rem}
.svc-lead .svc-body{justify-content:center;flex:1 1 auto}
.svc h3{font-size:var(--s-27)}
.svc-lead h3{font-size:var(--s-38)}
.svc p{color:var(--text-secondary);font-size:var(--s-15);max-width:46ch}
.svc-lead p{font-size:var(--s-17);max-width:50ch}

.more-link{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.7rem;
  font-family:var(--display);font-weight:600;font-size:var(--s-15);color:var(--accent);
  transition:gap var(--t) var(--ease);
}
.more-link:hover{gap:.85rem}
.more-link svg{width:16px;height:16px}

/* 6.3 steps - three across, connected by a drawn edge, no images */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.35rem,2.4vw,2.4rem);margin-top:2.6rem;position:relative}
.steps::before{
  content:"";position:absolute;left:0;right:0;top:26px;height:1px;
  background:linear-gradient(90deg,var(--accent-muted),var(--hairline) 70%,transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.4s var(--ease-out);
}
.steps.in::before{transform:scaleX(1)}
.step{position:relative;padding-top:0}
.step .dot{
  width:52px;height:52px;border-radius:50%;
  border:1px solid var(--hairline-strong);
  background:var(--canvas);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:var(--s-15);color:var(--accent);
  position:relative;z-index:2;
}
.step h3{font-size:var(--s-20);margin-top:1.15rem}
.step p{margin-top:.7rem;color:var(--text-secondary);font-size:var(--s-15);max-width:38ch}

/* 6.4 the hold-to-seal moment */
.seal{
  background:var(--canvas-deep);
  border-block:1px solid var(--hairline);
  position:relative;overflow:hidden;
}
.seal-in{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.seal-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:240px}
.seal-art svg{width:100%;max-width:460px;height:auto;overflow:visible}
.seal-glass{fill:rgba(121,198,166,.05);stroke:var(--hairline-strong);stroke-width:1.5}
.seal-bead{
  fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(121,198,166,.55));
}
.seal-frit{fill:none;stroke:var(--hairline-strong);stroke-width:5;stroke-dasharray:2 7;stroke-linecap:round}
.seal-copy h2{font-size:var(--s-38)}
.seal-hint{
  font-family:var(--mono);font-size:var(--s-13);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-secondary);margin-top:1.25rem;
}
.hold{
  margin-top:1rem;position:relative;overflow:hidden;
  border:1px solid var(--hairline-strong);background:transparent;color:var(--text-primary);
  border-radius:3px;padding:.95rem 1.6rem;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:var(--s-15);
  touch-action:none;user-select:none;-webkit-user-select:none;
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.hold::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:100%;
  background:var(--accent-muted);
  transform:scaleX(var(--hp,0));transform-origin:left;
}
.hold span{position:relative}
.hold:hover{border-color:var(--accent)}
.hold.done{border-color:var(--accent);color:var(--accent)}
.seal-reveal{margin-top:1.5rem;display:flex;flex-direction:column;gap:.55rem}
/* the claims are always readable; most visitors never press the button, so
   the hold only draws the bead and stretches each claim's accent dash */
.seal-reveal li{
  font-family:var(--display);font-weight:600;font-size:var(--s-27);
  position:relative;padding-left:36px;
}
/* hung in the gutter so a wrapped claim's second line aligns with its first */
.seal-reveal li::before{
  content:"";position:absolute;left:0;top:.8em;top:.5lh;width:12px;height:1px;background:var(--accent);
  transition:width .5s var(--ease);
}
.seal.revealed .seal-reveal li::before{width:24px}
.seal.revealed .seal-reveal li:nth-child(2)::before{transition-delay:.13s}
.seal.revealed .seal-reveal li:nth-child(3)::before{transition-delay:.26s}
.seal-foot{margin-top:1.35rem;color:var(--text-secondary);max-width:44ch;font-size:var(--s-15)}

/* 6.5 service area */
.area-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem)}
.towns{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:0;border-top:1px solid var(--hairline);
}
.towns li{
  font-family:var(--mono);font-size:var(--s-15);color:var(--text-primary);
  padding:.9rem .5rem;border-bottom:1px solid var(--hairline);
  display:flex;align-items:center;gap:.6rem;
}
.towns li::before{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.65;flex:0 0 auto;
}
.area-note{margin-top:1.35rem;color:var(--text-secondary);font-size:var(--s-15);max-width:46ch}

/* 6.6 FAQ */
.faq{margin-top:2.25rem;border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:1.15rem 3rem 1.15rem 0;position:relative;
  font-family:var(--display);font-weight:500;font-size:var(--s-20);
  letter-spacing:-.012em;
  transition:color var(--t) var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after,.faq summary::before{
  content:"";position:absolute;right:.4rem;top:50%;background:var(--accent);
  transition:transform var(--t-slow) var(--ease),opacity var(--t) var(--ease);
}
.faq summary::before{width:14px;height:1px;transform:translateY(-50%)}
.faq summary::after{width:1px;height:14px;right:calc(.4rem + 6.5px);transform:translateY(-50%)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq .answer{padding:0 0 1.3rem;color:var(--text-secondary);max-width:62ch;font-size:var(--s-17)}

/* 6.7 the quote form */
.quote{background:var(--canvas-deep);border-top:1px solid var(--hairline)}
.quote-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.quote-pitch h2{font-size:var(--s-38)}
.quote-pitch .lede{margin-top:1rem;color:var(--text-secondary);max-width:40ch;font-size:var(--s-20)}
.quote-assure{margin-top:1.7rem;display:flex;flex-direction:column;gap:.7rem}
.quote-assure li{
  display:flex;gap:.8rem;align-items:baseline;
  color:var(--text-secondary);font-size:var(--s-15);
}
.quote-assure li::before{
  content:"";width:6px;height:6px;border:1px solid var(--accent);
  flex:0 0 auto;transform:rotate(45deg);position:relative;top:-1px;
}

.form{
  background:var(--panel);border:1px solid var(--hairline);
  border-radius:10px;padding:clamp(1.15rem,2.2vw,1.55rem);
}
.field{margin-bottom:.7rem}
.field label{
  display:block;font-family:var(--mono);font-size:var(--s-13);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);
  margin-bottom:.35rem;
}
.field .opt{text-transform:none;letter-spacing:0;color:var(--text-quiet);font-family:var(--body)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:var(--s-17);color:var(--text-primary);
  background:var(--canvas);border:1px solid var(--hairline-strong);border-radius:3px;
  padding:.72rem .95rem;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.field textarea{min-height:88px;resize:vertical}
.field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2393A3AE' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;padding-right:2.4rem}
.field input::placeholder,.field textarea::placeholder{color:var(--text-quiet)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--text-quiet)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);background:var(--panel-2);outline:none;
  box-shadow:0 0 0 3px var(--accent-faint);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.form .btn{width:100%;margin-top:.4rem}
.form-note{margin-top:.85rem;color:var(--text-quiet);font-size:var(--s-13);line-height:1.55}
.form-note a{color:var(--text-secondary);border-bottom:1px solid var(--hairline-strong)}
.form-note a:hover{color:var(--accent);border-color:var(--accent)}

.form-status{
  margin-top:1rem;font-size:var(--s-15);
  padding:.85rem 1rem;border-radius:3px;border:1px solid transparent;
}
.form-status[hidden]{display:none}
.form-status.ok{color:var(--accent);border-color:var(--accent-muted);background:var(--accent-faint)}
.form-status.err{color:#F0A8A0;border-color:rgba(240,168,160,.28);background:rgba(240,168,160,.07)}

.form-sent{text-align:center;padding:clamp(1.6rem,4vw,2.75rem) 1rem}
.form-sent h3{font-size:var(--s-27);color:var(--accent)}
.form-sent p{margin-top:.9rem;color:var(--text-secondary);max-width:40ch;margin-inline:auto}

/* --------------------------------------------------------------------------
   footer
   -------------------------------------------------------------------------- */

.site-footer{background:var(--canvas-deep);border-top:1px solid var(--hairline);padding-block:clamp(2.5rem,5vw,4.25rem) 2.25rem}
.foot-top{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:clamp(2rem,5vw,4rem)}
.foot-brand img{width:210px;height:auto}
.foot-brand p{margin-top:1.15rem;color:var(--text-secondary);font-size:var(--s-15);max-width:34ch}
.foot-col h3{
  font-family:var(--mono);font-weight:500;font-size:var(--s-13);
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-quiet);
}
.foot-col ul{margin-top:1rem;display:flex;flex-direction:column;gap:.65rem}
.foot-col a,.foot-col span{color:var(--text-secondary);font-size:var(--s-15);transition:color var(--t) var(--ease)}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.35rem;border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  color:var(--text-quiet);font-size:var(--s-13);
}

/* --------------------------------------------------------------------------
   entrances
   -------------------------------------------------------------------------- */

.reveal .part{opacity:0;transform:translateY(18px);
  transition:opacity .72s var(--ease-out),transform .72s var(--ease-out)}
.reveal.in .part{opacity:1;transform:none}
.reveal.in .part:nth-child(2){transition-delay:.08s}
.reveal.in .part:nth-child(3){transition-delay:.16s}
.reveal.in .part:nth-child(4){transition-delay:.24s}
.reveal.in .part:nth-child(5){transition-delay:.32s}
/* retire the stagger once it has played, or hovers lag forever.
   selector repeats nth-child so it beats the delay rules above. */
.reveal.done .part,
.reveal.done .part:nth-child(2),
.reveal.done .part:nth-child(3),
.reveal.done .part:nth-child(4),
.reveal.done .part:nth-child(5){transition-delay:0s}

/* one living element per section, at whisper level */
.pulse{position:relative}
.pulse::after{
  content:"";position:absolute;inset:-30%;pointer-events:none;border-radius:inherit;
  background:radial-gradient(ellipse at center,var(--accent-faint) 0%,transparent 68%);
  opacity:0;
}
.anim .pulse::after{animation:pulseglow 7s var(--ease) -2.4s infinite}
@keyframes pulseglow{0%,100%{opacity:.25}50%{opacity:.85}}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* --------------------------------------------------------------------------
   responsive
   -------------------------------------------------------------------------- */

@media (max-width:1020px){
  .svc-lead{flex-direction:column}
  .svc-lead figure{flex:0 0 auto;min-height:0;aspect-ratio:16/9}
  .services{grid-template-columns:repeat(2,1fr)}
  .svc-lead{grid-column:span 2}
  .seal-in,.area-in,.quote-in{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:span 2}
}

@media (max-width:860px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(7,12,17,.97);backdrop-filter:blur(16px);
    border-block:1px solid var(--hairline);
    padding:.5rem var(--gutter) 1.1rem;
  }
  .nav.open{display:flex}
  .nav a{padding-block:.85rem;border-bottom:1px solid var(--hairline);font-size:var(--s-17)}
  /* the drawer rows already end in a hairline divider, so the current-page
     mark underlines the words themselves rather than the row edge */
  .nav a[aria-current="page"]::after{display:none}
  .nav a[aria-current="page"]{
    text-decoration:underline;text-decoration-color:var(--accent);
    text-decoration-thickness:1px;text-underline-offset:.3em;
  }
  .nav .btn{margin-top:.9rem;border-bottom:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
  .site-header{background:rgba(7,12,17,.82);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--hairline)}
  .promise{grid-template-columns:1fr}
  .promise li{padding:1.25rem 0}
  .promise li + li{padding-left:0;border-left:none}
  .promise li + li::after{left:0}
  .steps{grid-template-columns:1fr;gap:1.75rem}
  .steps::before{display:none}
}

@media (max-width:640px){
  .services{grid-template-columns:1fr}
  .svc-lead{grid-column:span 1}
  .field-row{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .foot-brand{grid-column:span 1}
}

/* The static-hero gates, character for character with the JS.
   Phones DO get the scrub: the shot is a vertical descent, so it survives a
   portrait crop, and the file is 3.3 MB. What still gets the still hero is a
   phone held sideways (no room for the journey) and reduced motion. */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{display:none}
  .static-hero{display:block}
}

/* a narrow desktop window puts the centred cue right on top of the buttons */
@media (min-width:861px) and (max-width:1199px){
  .scroll-cue{display:none}
}

/* scrub-capable but short: keep the scrub, drop the overlays with no room */
@media (max-height:560px) and (min-width:721px){
  .scroll-cue,.ring{display:none}
}

/* --------------------------------------------------------------------------
   reduced motion, honored completely
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  .reveal .part{opacity:1;transform:none}
  .edge::before{transform:scaleX(1)}
  .edge::after,.edge .glint{opacity:1}
  .steps::before{transform:scaleX(1)}
  .promise li::after{width:38px}
  .seal-reveal li{opacity:1;transform:none}
  .env,.mote{animation:none}
}

/* the same, applied live by JS when the preference flips mid-session */
body.rm .reveal .part{opacity:1;transform:none}
body.rm .edge::before{transform:scaleX(1)}
body.rm .edge::after,body.rm .edge .glint{opacity:1}
body.rm .steps::before{transform:scaleX(1)}
body.rm .promise li::after{width:38px}
body.rm .seal-reveal li{opacity:1;transform:none}
body.rm .env,body.rm .mote{animation:none}

/* --------------------------------------------------------------------------
   inner pages: alternating service rows and the closing call to action
   -------------------------------------------------------------------------- */

.svc-rows{display:flex;flex-direction:column;gap:clamp(2.6rem,5.5vw,5rem);margin-top:2.6rem}
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.svc-row figure{margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--hairline);background:var(--canvas-deep)}
.svc-row figure img{width:100%;height:auto;display:block}
.svc-row:nth-child(even) figure{order:2}
.svc-row .num{
  font-family:var(--mono);font-size:var(--s-13);letter-spacing:.2em;
  color:var(--accent);display:block;margin-bottom:.9rem;
}
.svc-row h2{font-size:var(--s-38)}
.svc-row .blurb{margin-top:1rem;font-size:var(--s-20);color:var(--text-primary);max-width:44ch}
.svc-row .detail{margin-top:.85rem;color:var(--text-secondary);max-width:48ch;font-size:var(--s-17)}

.cta-band{background:var(--canvas-deep);border-top:1px solid var(--hairline)}
.cta-band h2{font-size:var(--s-38);max-width:22ch;margin-top:1.5rem}
.cta-band .lede{margin-top:1rem;color:var(--text-secondary);max-width:50ch;font-size:var(--s-20)}
.cta-band .row{margin-top:1.7rem;display:flex;gap:.75rem;flex-wrap:wrap}

/* the service-areas page: towns with a line each */
.area-list{margin-top:2.25rem;border-top:1px solid var(--hairline)}
.area-list li{
  display:grid;grid-template-columns:minmax(160px,.32fr) 1fr;gap:clamp(1rem,3vw,2.5rem);
  padding:1.15rem 0;border-bottom:1px solid var(--hairline);align-items:baseline;
}
.area-list h3{font-family:var(--mono);font-weight:500;font-size:var(--s-17);letter-spacing:.02em}
.area-list p{color:var(--text-secondary);font-size:var(--s-15);max-width:62ch}

.where{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem);margin-top:2.25rem}
.where li{
  background:var(--panel);border:1px solid var(--hairline);border-radius:10px;
  padding:clamp(1.15rem,2.1vw,1.6rem);
}
.where h3{font-size:var(--s-20)}
.where p{margin-top:.7rem;color:var(--text-secondary);font-size:var(--s-15)}

/* the contact page's two columns */
.contact-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.contact-facts{margin-top:1.9rem;border-top:1px solid var(--hairline)}
.contact-facts li{padding:1.05rem 0;border-bottom:1px solid var(--hairline)}
.contact-facts h3{
  font-family:var(--mono);font-weight:500;font-size:var(--s-13);
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-quiet);
}
.contact-facts p{margin-top:.55rem;font-size:var(--s-17)}
.contact-facts a{color:var(--accent);border-bottom:1px solid var(--accent-muted)}
.contact-facts a:hover{border-color:var(--accent)}

@media (max-width:1020px){
  .where{grid-template-columns:1fr}
  .contact-in{grid-template-columns:1fr}
}
@media (max-width:860px){
  .svc-row{grid-template-columns:1fr}
  .svc-row:nth-child(even) figure{order:0}
  .area-list li{grid-template-columns:1fr;gap:.5rem}
}

/* --------------------------------------------------------------------------
   town pages
   -------------------------------------------------------------------------- */

.zips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.zips li{
  font-family:var(--mono);font-size:var(--s-13);letter-spacing:.08em;
  color:var(--text-secondary);border:1px solid var(--hairline-strong);
  border-radius:3px;padding:.42rem .7rem;
}
.where-4{grid-template-columns:repeat(4,1fr)}
.where-4 h3{font-size:var(--s-17)}

.nearby{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.7rem}
.nearby a{
  font-family:var(--display);font-weight:500;font-size:var(--s-15);
  color:var(--text-secondary);border:1px solid var(--hairline-strong);
  border-radius:3px;padding:.62rem 1rem;
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.nearby a:hover{border-color:var(--accent);color:var(--accent)}

.town-link{color:var(--text-primary);border-bottom:1px solid var(--accent-muted);
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.town-link:hover{color:var(--accent);border-color:var(--accent)}

.towns a{color:inherit;transition:color var(--t) var(--ease)}
.towns a:hover{color:var(--accent)}

@media (max-width:1020px){.where-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.where-4{grid-template-columns:1fr}}

/* running prose in a two-column section */
.prose{color:var(--text-secondary);font-size:var(--s-20);max-width:54ch;line-height:1.62}
.prose + .prose-sm{margin-top:1.15rem}
.prose-sm{color:var(--text-quiet);font-size:var(--s-15);max-width:48ch;line-height:1.6}

/* --------------------------------------------------------------------------
   the town grid: every place we cover as its own block
   -------------------------------------------------------------------------- */

.town-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(.7rem,1.3vw,1.05rem);margin-top:2.25rem;
}
.town-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:.5rem;
  min-height:92px;
  background:var(--panel);border:1px solid var(--hairline);border-radius:10px;
  padding:clamp(1rem,1.7vw,1.25rem);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),
             transform var(--t) var(--ease);
}
.town-card:hover{border-color:var(--accent);background:var(--panel-2);transform:translateY(-3px)}
.town-card h3{font-size:var(--s-20);color:var(--text-primary)}
.town-card .zip{
  font-family:var(--mono);font-size:var(--s-13);letter-spacing:.1em;
  color:var(--accent);opacity:.85;
}
/* text sits straight under the ZIP so every card's top edge lines up;
   the grid keeps the boxes themselves equal height */
.town-card p{
  color:var(--text-secondary);font-size:var(--s-15);line-height:1.5;
  margin-top:.35rem;
}
/* the frit motif again: a dot row along the foot that lights on hover */
.town-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background-image:radial-gradient(circle at 2px 3px,var(--accent) 1.1px,transparent 1.2px);
  background-size:9px 6px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 78%);
  mask-image:linear-gradient(90deg,#000 0%,transparent 78%);
  opacity:0;transition:opacity var(--t-slow) var(--ease);
}
.town-card:hover::after{opacity:.55}

/* the compact variant on the home page: name and ZIP only */
.town-grid.compact{grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:.6rem}
.town-grid.compact .town-card{min-height:84px;padding:.85rem 1rem;gap:.28rem;justify-content:center}
.town-grid.compact .town-card h3{font-size:var(--s-17)}

@media (max-width:1020px){.town-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.town-grid{grid-template-columns:repeat(2,1fr)}
  .town-card{min-height:84px}}
@media (max-width:420px){.town-grid.compact{grid-template-columns:repeat(2,1fr)}}

@media (max-width:520px){.page-head{min-height:548px}}

/* --------------------------------------------------------------------------
   the scrub hero on a phone

   On a phone the subject fills the frame and the glass sweeps top to bottom
   through all of it, so there is no region that stays calm for the whole
   journey. Rather than move the text to a spot the glass will cross anyway,
   the film takes the top of the screen and the words get their own surface
   below it, with the frit dot row as the seam. Two wins: the text is legible
   at every moment, and the video is cropped far less hard (about 42 percent
   of the frame width instead of 26).
   -------------------------------------------------------------------------- */

@media (max-width:860px), (orientation:portrait) and (max-width:1024px){
  /* the film. height is set explicitly because #hero-video carries
     height:100%, which would otherwise beat the inset */
  .poster,#hero-video,.scrim{
    top:0;left:0;right:0;bottom:auto;
    width:100%;height:50%;
  }
  .scrim{
    background:
      radial-gradient(ellipse 120% 100% at 50% 42%,rgba(6,10,14,0) 42%,rgba(6,10,14,.46) 100%),
      linear-gradient(180deg,rgba(6,10,14,.52) 0%,rgba(6,10,14,0) 34%);
  }

  /* the words, on a real surface */
  .bands{
    inset:50% 0 0 0;
    background:var(--canvas-deep);
    border-top:1px solid var(--hairline);
    display:flex;align-items:center;
  }
  /* the signature becomes the seam between the film and the words */
  .bands::after{
    content:"";position:absolute;left:0;right:0;top:0;height:7px;
    background-image:radial-gradient(circle at 2px 3.5px,var(--accent) 1.15px,transparent 1.25px);
    background-size:9px 7px;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 64%);
    mask-image:linear-gradient(90deg,#000 0%,transparent 64%);
    opacity:.45;pointer-events:none;
  }

  .band{
    left:var(--gutter);right:var(--gutter);width:auto;
    top:clamp(1.5rem,4.2vh,2.6rem);bottom:auto;transform:none;
    text-shadow:none;              /* on a solid ground a shadow reads as grime */
  }
  .band:has(.kicker){top:clamp(1.5rem,4.2vh,2.6rem)}

  /* no scrim needed once the ground is solid */
  .band::before,
  .band[data-peak="hook"]::before{display:none}

  .band h1,.band h2{max-width:none;font-size:clamp(1.9rem,8.2vw,3rem)}
  .band .lede{max-width:34ch;font-size:var(--s-17);margin-top:.9rem}
  .band .kicker{margin-bottom:.8rem}
  .band .row{margin-top:1.4rem;gap:.6rem}
  .band .row .btn{flex:1 1 100%;min-width:0}
  .stage-cta{left:var(--gutter);right:var(--gutter);top:auto;bottom:clamp(1.1rem,3.2vh,1.75rem);gap:.6rem;transition:none}
  .stage-cta .btn{flex:1 1 100%;min-width:0}

  /* the cue sits at the foot of the film, just above the seam: the bottom of
     the screen belongs to the words, and on a small phone the buttons are there */
  .scroll-cue{top:calc(50% - 4.6rem);bottom:auto}
  .ring{top:calc(var(--gutter) + 4.5rem);bottom:auto;right:var(--gutter);width:38px;height:38px}
}

/* Short phones (an SE-sized screen and below): the settle band, which carries
   two buttons, does not fit a 44 percent caption zone. Give the words more of
   the screen and trim the type a little. */
@media (max-width:860px) and (max-height:640px){
  .band h1,.band h2{font-size:clamp(1.6rem,7.4vw,2.2rem)}
  .band .lede{font-size:var(--s-15);margin-top:.7rem}
  .band .kicker{margin-bottom:.6rem}
  .band .row{margin-top:1rem;gap:.5rem}
}

/* The words carry the two buttons at their foot now, so the shorter the phone,
   the more of the screen the panel needs and the less the film takes. */
@media (max-width:860px) and (max-height:700px){
  .poster,#hero-video,.scrim{height:44%}
  .bands{inset:44% 0 0 0}
  .scroll-cue{top:calc(44% - 4.7rem)}
}
@media (max-width:860px) and (max-height:600px){
  .poster,#hero-video,.scrim{height:38%}
  .bands{inset:38% 0 0 0}
  .scroll-cue{top:calc(38% - 4.7rem)}
}

/* Every rule above measures the SCREEN, so none of them can tell that the
   stage gave up room to the phone's toolbar. This measures the stage itself
   and so fires on the one case they miss: a small phone, toolbar showing,
   where the caption would otherwise run into the buttons at its foot. It sits
   here, after those rules, because it has to win on source order to apply. */
@supports (container-type:size){
  @container stage (max-height:520px){
    .band h1,.band h2{font-size:clamp(1.35rem,6.4vw,1.75rem)}
    .band .lede{font-size:var(--s-13);margin-top:.5rem}
    .band .kicker{margin-bottom:.4rem}
    .band .row{margin-top:.75rem;gap:.4rem}
  }
  /* The tightest case there is: the smallest phone still sold, with both
     browser bars out. Trimming type alone does not buy enough room, so the
     film gives some back - the words and the buttons need it more. */
  @container stage (max-height:480px){
    .poster,#hero-video,.scrim{height:32%}
    .bands{inset:32% 0 0 0}
    .scroll-cue{top:calc(32% - 4.7rem)}
    .band h1,.band h2{font-size:clamp(1.15rem,5.6vw,1.45rem)}
    .band .lede{margin-top:.35rem}
    .band .row{margin-top:.6rem}
  }
}

/* --------------------------------------------------------------------------
   the first screen on a phone
   The nav collapses behind a Menu button there, which hid the only call to
   action. This puts a compact one in the bar itself, always visible, on every
   page. And band one carries a plain line saying what we actually replace,
   because the opening screen has to answer that without being scrolled.
   -------------------------------------------------------------------------- */

.header-actions{display:contents}
.header-cta{display:none}
.on-phone{display:none}

/* band one's supporting line rides the same assembly variable as its words */
.e-drift .lede{
  --ks:clamp(0,(var(--k,0) - .42)*3.2,1);
  opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks)) * 10px));
}

@media (max-width:860px){
  .header-actions{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
  .header-cta{
    display:inline-flex;min-height:44px;
    padding:.62rem .8rem;font-size:var(--s-13);letter-spacing:.01em;
  }
  .on-phone{display:block}
  .band .lede.on-phone{margin-top:.9rem;max-width:32ch}
}

/* the smallest screens: the bar gets tight with two controls in it */
@media (max-width:380px){
  .header-in{gap:.6rem}
  .brand img{width:108px}
  .header-cta{padding:.55rem .6rem}
  .nav-toggle{padding:.5rem .6rem}
}