/* Inspire Electrical & Ventilation.
   Brand system from Inspire's brand book (18 Oct 2026, supporting-pages-package.md §1): Poppins, Inspire Yellow,
   Graphite, Mist, Steel, white. Supersedes the sandstone and dusk palette of design-package.md §2 and §3.
   Yellow is never text on a light ground, and there is one piece of it per screen (the main button). */
:root{
  --canvas:#FFFFFF;
  --canvas-night:#202020;
  --panel:#ECEFF1;
  --panel-night:#2A2A2A;
  --accent:#FFC50B;
  --accent-hover:#FFD23F;
  --accent-muted:rgba(255,197,11,.28);
  --air:#9AA1A8;
  --air-deep:#6E757D;          /* Steel: air lines, diagram strokes, small dots. Not text on mist */
  --text-primary:#202020;
  --text-primary-night:#FFFFFF;
  --text-secondary:#5D646B;   /* Steel, darkened so it holds 4.5:1 on Mist as well as white */
  --text-secondary-night:#BDC2C7;
  --line:#DDE1E4;
  --line-night:#3A3A3A;
  --brick:#9A5B43;
  --timber:#B9874F;
  --ground:#CDD1D4;

  --f-display:"Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:"Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;   /* labels: Poppins 500 in capitals (brand: capitals only for short labels) */

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --tshadow:0 1px 2px rgba(20,20,20,.95),0 3px 12px rgba(20,20,20,.78),0 10px 44px rgba(20,20,20,.8);

  --gx:clamp(20px,6vw,96px);
  --maxw:1200px;
  --pad-x:max(var(--gx),calc((100% - var(--maxw)) / 2));
  --nav-h:72px;
}

/* Base. Element selectors wrapped in :where() so component classes always win (lessons.md, 2026-07-29). */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font-family:var(--f-body);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(img,svg,video,canvas){display:block;max-width:100%}
:where(h1,h2,h3,p,ul,ol,figure,blockquote){margin:0}
:where(ul,ol){padding:0;list-style:none}
:where(a){color:inherit}
:where(a[href^="tel:"]){white-space:nowrap}
:where(button){font:inherit;color:inherit}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--accent);color:var(--text-primary);padding:10px 16px;border-radius:6px;font-weight:700;text-decoration:none;transition:top .2s var(--ease-out)}
.skip:focus{top:12px}
main:focus{outline:none}

/* Type */
.h-hero{font-family:var(--f-display);font-weight:600;letter-spacing:.01em;line-height:1.06;font-size:clamp(2.2rem,5.4vw,4.6rem);text-wrap:balance}
.h2{font-family:var(--f-display);font-weight:600;letter-spacing:.01em;line-height:1.12;font-size:clamp(1.85rem,4vw,3.2rem);text-wrap:balance;max-width:18ch}
.label,.eyebrow{font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.4}
.nw{white-space:nowrap}
@media (max-width:420px){.eyebrow{letter-spacing:.1em}}
.label{color:var(--text-secondary)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 22px;border-radius:6px;font-family:var(--f-body);font-weight:600;font-size:.98rem;line-height:1;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .25s var(--ease-out),border-color .25s var(--ease-out),transform .25s var(--ease-out),box-shadow .4s var(--ease-out);text-shadow:none}
.btn-volt{background:var(--accent);color:var(--text-primary)}
.btn-volt:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:var(--text-primary-night);background:rgba(32,32,32,.28)}
.btn-ghost:hover{border-color:var(--text-primary-night);background:rgba(32,32,32,.45)}
.btn-sm{min-height:40px;padding:0 16px;font-size:.92rem}
@media (pointer:coarse){.btn{min-height:48px}.btn-sm{min-height:44px}}

/* Fixed environment layer: sandstone grain and a slow mist, behind the paper sections */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;background-color:var(--canvas);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .13 0 0 0 0 .13 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.env::after{content:"";position:absolute;inset:-20%;background:radial-gradient(40% 30% at 30% 40%,rgba(110,117,125,.07),transparent 70%),radial-gradient(35% 28% at 72% 65%,rgba(236,239,241,.7),transparent 70%);animation:mist 90s var(--ease-io) infinite alternate;animation-delay:-30s}
@keyframes mist{from{transform:translate3d(-4%,-2%,0)}to{transform:translate3d(4%,3%,0)}}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:calc(var(--nav-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gx) 0;display:flex;align-items:center;gap:28px;color:var(--text-primary-night);transition:background-color .4s var(--ease-out),color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
/* Over the film the logo sits on a solid graphite plate: the brand book never puts the lockup on busy footage without one
   (and the old gradient left the links at 1.7:1 where the thread passed behind them) */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(32,32,32,.94);box-shadow:0 1px 0 rgba(255,255,255,.06);transition:opacity .4s var(--ease-out)}
.brand{display:block;width:clamp(150px,15vw,200px);flex:none}
.logo{width:100%;height:auto}
.logo-on-light{display:none}
.nav-links{display:flex;gap:24px;margin-left:auto}
.nav-links a,.nav-phone{font-weight:500;font-size:.95rem;text-decoration:none;opacity:.88;transition:opacity .2s var(--ease-out)}
.nav-links a:hover,.nav-phone:hover{opacity:1}
.nav-actions{display:flex;align-items:center;gap:18px}
.nav.on-paper{background:rgba(255,255,255,.94);color:var(--text-primary);box-shadow:0 1px 0 var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav.on-paper::before{opacity:0}
.nav.on-paper .logo-on-dark{display:none}
.nav.on-paper .logo-on-light{display:block}
.nav.on-night{background:rgba(32,32,32,.92);color:var(--text-primary-night);box-shadow:0 1px 0 var(--line-night)}
.nav.on-night::before{opacity:0}
.menu-btn{display:none}
/* The six page links fit on one line from 1230 px (measured 18 Oct 2026); below 1240 px they fold into the Menu button */
@media (max-width:1240px){
  .nav-links{display:none}
  .nav-actions{margin-left:auto}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 12px;margin-left:6px;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;font:500 .9rem var(--f-body);cursor:pointer}
  .menu-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}
  .menu-open .nav-links{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;margin:0;padding:8px var(--gx) 18px;background:var(--canvas-night);box-shadow:0 12px 30px rgba(0,0,0,.25)}
  .menu-open .nav-links a{padding:14px 0;border-bottom:1px solid var(--line-night);color:var(--text-primary-night);opacity:1;font-size:1.05rem}
}
/* Narrow screens: the phone number moves into the menu under 700 px, the quote button under 520 px, so the bar never overflows */
.nav-links .menu-only{display:none}
.nav-links a[aria-current="page"]{opacity:1;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
@media (max-width:1240px){.menu-open .nav-links a[aria-current="page"]{text-decoration:none;font-weight:600}}
@media (max-width:700px){.nav-phone{display:none}.menu-open .nav-links .menu-phone{display:block}}
@media (max-width:520px){
  .brand{width:140px}
  .nav-quote{display:none}
  .menu-open .nav-links .menu-quote{display:inline-flex;align-self:flex-start;margin-top:18px;padding:0 22px;border-bottom:0;color:var(--text-primary)}
}

/* ============ HERO ============ */
.hero{position:relative;height:var(--hero-h,1300vh);background:var(--canvas-night)}
.stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:var(--canvas-night)}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--canvas-night)}
#film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateZ(0);will-change:transform;transition:opacity .8s var(--ease-out)}
.video-ready #film{opacity:1}
/* Windows wider than the film's 16:9 crop top and bottom; anchor to the top so the resting fan never sits under the nav */
@media (min-aspect-ratio: 16/9){#film{object-position:50% 0}.poster{background-position:50% 0}}
.video-failed #film{display:none}
.still{opacity:0;transition:opacity .9s var(--ease-out)}
.still.on{opacity:1}
.scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(20,20,20,.5) 0%,rgba(20,20,20,.18) 42%,rgba(20,20,20,0) 60%),
  radial-gradient(ellipse 120% 90% at 50% 45%,rgba(20,20,20,0) 35%,rgba(20,20,20,.62) 100%)}

.ring{position:absolute;left:50%;bottom:36px;width:40px;height:40px;margin-left:-20px;transform:rotate(-90deg);color:var(--accent);transition:opacity .6s var(--ease-out)}
.ring-track{stroke:rgba(255,255,255,.18)}
.ring-fill{stroke:currentColor;transition:stroke-dashoffset .12s linear}
.video-ready .ring{opacity:0}
.cue{position:absolute;left:50%;bottom:34px;width:22px;height:34px;margin-left:-11px;border:1.5px solid rgba(255,255,255,.6);border-radius:12px}
.cue::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--accent);animation:cue 2.4s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:0}}

/* A soft blurred shade behind the chapter ticks: small mono text over footage (the sandstone at rest took them to 1.3:1).
   Blurred rather than a hard chip so it disappears on dark frames. */
.ticks{position:absolute;right:var(--gx);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:18px;text-align:right}
.ticks::before{content:"";position:absolute;inset:-14px -16px -14px -26px;z-index:-1;border-radius:28px;background:rgba(20,20,20,.66);filter:blur(14px);pointer-events:none}
.ticks li{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42);padding-right:16px;position:relative;transition:color .5s var(--ease-out);text-shadow:0 1px 3px rgba(20,20,20,.8)}
.ticks li::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;border:1px solid rgba(255,255,255,.42);transition:background-color .5s var(--ease-out),border-color .5s var(--ease-out)}
.ticks li.on{color:var(--accent)}
.ticks li.on::after{background:var(--accent);border-color:var(--accent)}
@media (max-height:620px){.ticks{display:none}}

/* Caption bands: left of the centre action lane */
/* isolation keeps each band its own stacking context: without it, a band at opacity 1 with no transform (b1, b5)
   drops its z-index:-1 scrims behind the film */
.band{position:absolute;left:var(--gx);top:50%;width:min(540px,38vw);transform:translateY(-50%);isolation:isolate;color:var(--text-primary-night);text-shadow:var(--tshadow);will-change:opacity;--k:1;--sv:56px;--sh:56px}
.js .band{opacity:0}
/* Per-band scrim, two layers riding the band's opacity and --k.
   ::before is a soft shade that hugs the text block: a rounded rect under a static Gaussian blur (only opacity ever changes),
   full strength behind every line, bleeding off the left edge of the window. The old ellipse was narrower than a
   multi-line block and left its corners undimmed (worst frame 2.2:1).
   ::after is the wide soft radial that keeps the dimming organic. */
.band::before,.band::after{content:"";position:absolute;z-index:-1;pointer-events:none;opacity:calc(.25 + .75 * var(--k,1))}
.band::before{top:calc(-1 * var(--sv));bottom:calc(-1 * var(--sv));left:-300px;right:calc(-1 * var(--sh));border-radius:64px;background:rgba(20,20,20,var(--sa,.64));filter:blur(var(--sb,42px))}
.band::after{inset:-40% -30% -40% -20%;background:radial-gradient(ellipse 60% 56% at 36% 50%,rgba(20,20,20,calc(var(--sa,.64) * .4)) 0%,rgba(20,20,20,calc(var(--sa,.64) * .22)) 50%,rgba(20,20,20,0) 78%)}
.band .btn{text-shadow:none}
.b1{--sa:.7;top:auto;bottom:clamp(64px,12vh,140px);transform:none}
.b2{--sa:.62}
.b3{--sa:.66}
.b4{--sa:.68}
.b5{--sa:.72;top:auto;bottom:clamp(56px,10vh,120px);transform:none}
.band .eyebrow{color:var(--accent);margin-bottom:18px}
.band .h-hero{margin-bottom:20px}
.band .sub{font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.55;max-width:44ch;margin-bottom:26px;color:var(--text-primary-night)}
.band .ctas{display:flex;flex-wrap:wrap;gap:12px}
.band .num{font-family:var(--f-display);font-weight:600;font-size:clamp(4.6rem,11vw,9rem);line-height:.95;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;color:var(--text-primary-night)}
.band .line{font-family:var(--f-display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.18;letter-spacing:-0.01em;text-wrap:balance}
.band .label{color:var(--accent);margin-top:14px}
.b3 .label,.b4 .label{margin:0 0 14px}
.b5 .line.big{font-size:clamp(1.6rem,2.9vw,2.6rem);margin-bottom:16px}
.b5 .price{font-family:var(--f-body);font-weight:500;font-size:clamp(1.02rem,1.3vw,1.2rem);margin-bottom:24px}

/* Split words */
.w{display:inline-block;white-space:pre}

/* Entrances, all transform and opacity, scrubbed off --k (written by site.js) */
.b1 .w{--kc:clamp(0,(var(--k,1) - var(--th,0)) * 3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * .55em))}
.b1 .eyebrow{opacity:clamp(0,var(--k,1) * 3,1)}
.b1 .sub{--ks:clamp(0,(var(--k,1) - .62) * 4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks)) * 10px))}
.b1 .ctas{--kb:clamp(0,(var(--k,1) - .78) * 5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 10px))}

.b2 .num,.b2 .line,.b2 .label{--kc:clamp(0,(var(--k,1) - var(--th,0)) * 2.6,1);opacity:var(--kc);transform:scale(calc(.82 + .18 * var(--kc)));transform-origin:0 60%}
.b2 .num{--th:0}.b2 .line{--th:.18}.b2 .label{--th:.32}

.blurpair{display:grid}
.blurpair .line{grid-area:1/1}
.b3 .soft{filter:blur(10px);opacity:calc(1 - var(--k,1))}
.b3 .sharp{opacity:var(--k,1)}
.b3 .label{opacity:var(--k,1)}

.b4 .w{--kc:clamp(0,(var(--k,1) - var(--th,0)) * 2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * -24px))}
.b4 .label{opacity:var(--k,1)}

.b5 .half{display:block;--kc:clamp(0,var(--k,1) * 1.6,1);opacity:var(--kc)}
.b5 .half.l{transform:translateY(calc((1 - var(--kc)) * .5em))}
.b5 .half.r{transform:translateY(calc((1 - var(--kc)) * -.5em))}
.b5 .price{--ks:clamp(0,(var(--k,1) - .5) * 3,1);opacity:var(--ks)}
.b5 .ctas{--kb:clamp(0,(var(--k,1) - .7) * 4,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 10px))}

/* Short desktop windows keep the scrub, lose the small overlays */
@media (max-height:560px){.b1 .sub{display:none}}

/* Static hero (phones, portrait tablets, landscape phones, reduced motion) */
.static-hero{display:none;position:relative;min-height:100vh;min-height:100svh;background:var(--canvas-night) var(--static-wide,url("img/hero-static-wide.jpg")) var(--static-pos,center 70%)/cover no-repeat;color:var(--text-primary-night)}
.static-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(26,26,26,.82) 0%,rgba(26,26,26,.55) 42%,rgba(26,26,26,.15) 70%,rgba(26,26,26,.4) 100%)}
.static-copy{position:relative;padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 6vh) var(--gx) 48px;max-width:640px;text-shadow:var(--tshadow)}
.static-copy .eyebrow{color:var(--accent);margin-bottom:16px}
.static-copy .h-hero{margin-bottom:18px;font-size:clamp(2.4rem,9vw,4.4rem)}
.static-copy .sub{font-size:1.06rem;margin-bottom:24px;max-width:40ch}
.static-copy .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.static-copy .btn{text-shadow:none}
.stars{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.06em}
.stars span{color:var(--accent);letter-spacing:.12em;margin-right:6px}

/* The five gates. Character-for-character the same strings as GATES in site.js. */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{display:none}
  .static-hero{display:block}
}
@media (orientation: portrait){
  .static-hero{background-image:var(--static-portrait,url("img/hero-static-portrait.jpg"));background-position:var(--static-portrait-pos,center bottom)}
}

/* Phone film (15 Oct 2026). site.js adds html.phone-film inside the gates when the screen is portrait, motion is
   allowed and the connection isn't on data saver or slow; those phones scrub the 9:16 cut instead of the still.
   The falling light owns the centre of a portrait frame, so the captions move to the bottom third, full width. */
html.phone-film .hero{height:var(--hero-h,1300vh)}
html.phone-film .stage{display:block}
html.phone-film .static-hero{display:none}
html.phone-film .ticks{display:none}
html.phone-film .scrim{background:
  linear-gradient(to top,rgba(20,20,20,.8) 0%,rgba(20,20,20,.42) 34%,rgba(20,20,20,0) 58%),
  radial-gradient(ellipse 150% 90% at 50% 40%,rgba(20,20,20,0) 45%,rgba(20,20,20,.5) 100%)}
html.phone-film .band{left:var(--gx);right:var(--gx);width:auto;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 8vh);transform:none;--sv:34px;--sh:24px}
html.phone-film .band::after{inset:-30% -20% -30% -20%}
html.phone-film .b1{bottom:calc(env(safe-area-inset-bottom,0px) + 6vh)}
/* Sub-page phone films (18 Oct 2026): their headlines run 4 to 7 lines, so the eyebrow sits about 62% up the screen, above where the
   home scrim fades out. A taller bottom gradient keeps every line over shade (worst-frame audit at 390x844). Home unchanged. */
html.phone-film .hero-sub .scrim{background:
  linear-gradient(to top,rgba(20,20,20,.82) 0%,rgba(20,20,20,.56) 42%,rgba(20,20,20,.38) 68%,rgba(20,20,20,0) 88%),
  radial-gradient(ellipse 150% 90% at 50% 40%,rgba(20,20,20,0) 45%,rgba(20,20,20,.5) 100%)}
html.phone-film .band .h-hero{font-size:clamp(2.3rem,10.5vw,3.3rem);margin-bottom:16px}
html.phone-film .band .eyebrow{margin-bottom:14px}
/* Phone films (18 Oct 2026): the small yellow eyebrow can sit over the brightest part of a portrait frame (worst-frame audit 2.3 to 3.5:1),
   so it gets a graphite tag, the brand book's yellow-on-graphite pairing. Desktop and stills unchanged. */
html.phone-film .band .eyebrow{display:inline-block;padding:5px 9px;margin-left:-9px;border-radius:4px;background:rgba(20,20,20,.86);text-shadow:none}
html.phone-film .band .sub{font-size:1rem;margin-bottom:20px}
html.phone-film .band .num{font-size:clamp(4.2rem,24vw,6.5rem)}
html.phone-film .band .line{font-size:clamp(1.35rem,6.4vw,1.8rem)}
html.phone-film .b5 .line.big{font-size:clamp(1.45rem,7vw,2rem)}
html.phone-film .b5 .price{font-size:1rem;margin-bottom:18px}
html.phone-film .band .ctas .btn{flex:1 1 auto}

/* ============ BELOW THE FOLD ============ */
.below{position:relative}
.sec{position:relative;padding:clamp(80px,11vw,150px) var(--pad-x)}
.sec + .sec{padding-top:clamp(40px,6vw,90px)}
.night{background:var(--canvas-night);color:var(--text-primary-night)}
.night .label{color:var(--text-secondary-night)}
.sec.night,.sec.night + .sec{padding-top:clamp(80px,11vw,150px)}

/* The thread: carries the film's falling light down the left gutter to the form */
.thread{position:absolute;left:clamp(14px,2.6vw,44px);top:0;width:1px;height:var(--th-h,0px);z-index:2;pointer-events:none}
.thread-line{position:absolute;inset:0;background:linear-gradient(to bottom,var(--accent),var(--accent) 96%,rgba(255,197,11,0));transform-origin:top;transform:scaleY(var(--tp,0));box-shadow:0 0 8px rgba(255,197,11,.45)}
.thread-node{position:absolute;left:-4px;width:9px;height:9px;border-radius:50%;background:var(--canvas);border:1px solid rgba(255,197,11,.6);transition:background-color .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s var(--ease-out)}
.thread-node.lit{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-muted)}
@media (max-width:900px){.thread{display:none}}

/* Reveal: hidden start states only once JS has armed the observer (lessons.md, 2026-07-29) */
.reveal-armed .rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal-armed .rv.in{opacity:1;transform:none}
.reveal-armed .rv.in.done{transition-delay:0s!important}

/* S1 Proof */
.proof{padding-top:clamp(80px,10vw,130px)}
/* auto-fit: a numeral held back for a confirm is not a grid item, so the rest share the row */
.proof-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:clamp(20px,3vw,48px);border-top:1px solid var(--line);padding-top:clamp(28px,4vw,48px)}
.proof-row li{display:flex;flex-direction:column;gap:10px}
.big-num{font-family:var(--f-display);font-weight:600;font-size:clamp(3.2rem,7.4vw,6rem);line-height:.95;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.proof-label{color:var(--text-secondary);max-width:16ch;line-height:1.4}
@media (max-width:760px){.proof-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}}

/* S2 Trades */
.trades .h2{margin-bottom:clamp(36px,5vw,64px)}
.trade-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,6vw,96px)}
.trade{position:relative;padding-top:20px;border-top:1px solid var(--text-primary)}
.trade .label{margin-bottom:22px;color:var(--text-primary)}
.trade-list{display:flex;flex-direction:column}
.trade-list li{padding:13px 0;border-bottom:1px solid var(--line);font-size:1.08rem;line-height:1.4}
.trade-list li:last-child{font-weight:700}
.trade:first-child .trade-list li:last-child{font-weight:400}
.airlines{width:100%;height:56px;margin-top:22px;overflow:visible}
.airlines path{fill:none;stroke:var(--air-deep);stroke-width:2;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420}
.airlines path:nth-child(2){stroke-width:1.5;opacity:.75}
.airlines path:nth-child(3){stroke-width:1;opacity:.5}
.reveal-armed .airlines path{transition:stroke-dashoffset 1.8s var(--ease-out)}
.reveal-armed .airlines path:nth-child(2){transition-delay:.15s}
.reveal-armed .airlines path:nth-child(3){transition-delay:.3s}
.airlines.in path,html:not(.reveal-armed) .airlines path{stroke-dashoffset:0}
.trades-line{margin-top:clamp(36px,5vw,56px);font-family:var(--f-display);font-weight:600;font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.3;max-width:36ch;text-wrap:balance}
@media (max-width:760px){.trade-cols{grid-template-columns:minmax(0,1fr)}}

/* S3 Promise: horizontal timeline */
.promise .h2{margin-bottom:clamp(40px,6vw,72px)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:20px;height:1px;background:var(--line)}
.step{position:relative;display:flex;flex-direction:column;gap:22px}
.step-n{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--canvas);border:1px solid var(--text-primary);font-family:var(--f-mono);font-size:.85rem}
.step p{font-size:1.08rem;max-width:34ch}
@media (max-width:820px){.steps{grid-template-columns:minmax(0,1fr)}.steps::before{left:20px;right:auto;top:0;bottom:0;width:1px;height:auto}.step{flex-direction:row;align-items:flex-start}.step-n{flex:none}}

/* S4 Vent test */
.vent-panel{background:var(--panel);border-radius:10px;padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:center}
.vent-head .h2{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:14px}
.vent-sub{color:var(--text-secondary);font-size:1.1rem;margin-bottom:26px}
.vent-controls{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.vbtn{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 16px;border-radius:6px;border:1px solid var(--line);background:var(--canvas);text-align:left;font-weight:500;cursor:pointer;transition:border-color .25s var(--ease-out),background-color .25s var(--ease-out)}
.vbtn::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--text-secondary);transition:background-color .25s var(--ease-out),border-color .25s var(--ease-out)}
.vbtn:hover{border-color:var(--text-secondary)}
.vbtn[aria-pressed="true"]{border-color:var(--text-primary);background:#FFFFFF}
.vbtn[aria-pressed="true"]::before{background:var(--air-deep);border-color:var(--air-deep)}
.vent-figure{display:flex;flex-direction:column;gap:16px;min-width:0}
.xsec{width:100%;height:auto;background:#E9ECEE;border-radius:6px}
.vent-cap{min-height:3.2em;color:var(--text-primary);font-size:1.02rem;max-width:52ch}
/* Cross-section. Strokes are in viewBox units, sized so the air still reads at phone width (the SVG scales to about 0.4 there). */
.x-out{fill:#F4F6F7}
.x-in{fill:#DFE3E6}
.x-floor{fill:var(--timber)}
.x-joists rect{fill:#9C7142}
.x-wall{fill:var(--brick)}
.x-pier{fill:#A86A4E}
.x-ground{fill:var(--ground)}
.damp rect{fill:#6E757D}
.damp rect:first-child{opacity:.08}
.damp rect:last-child{opacity:.17}
.x-vent rect{fill:#2B2420}
.x-vent path{stroke:var(--brick);stroke-width:3}
.x-deck-top{fill:#6E5236}
.x-deck-skirt{fill:#5B4430}
.x-deck-lines{stroke:#7A5D40;stroke-width:2;fill:none}
.x-duct{fill:none;stroke:#B9C3C8;stroke-width:16;stroke-linecap:round}
.x-strap{stroke:#8A949A;stroke-width:2.5;fill:none}
.x-fan-body{fill:#F7F8F9;stroke:#9AA6AC;stroke-width:3}
.x-impeller circle{fill:none;stroke:#9AA6AC;stroke-width:2}
.x-impeller path{stroke:#5D646B;stroke-width:3;stroke-linecap:round}
.air path{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.air-stale path{stroke:#9AA1A8}
.air-flow path{stroke:var(--air-deep)}
.air path:not(.air-head){stroke-dasharray:16 10}
.air .air-head{stroke-dasharray:none}
.mist circle{fill:#7D848B;opacity:.42}
@media (max-width:600px){.air path{stroke-width:7}.x-vent path{stroke-width:4}}

/* States: one class per layer, toggled by the figure's data-state */
.air-l,.air-r,.air-flow,.mist,.damp,.x-deck,.x-fan{transition:opacity .6s var(--ease-out)}
.air-flow,.x-deck,.x-fan,.mist-more{opacity:0}
[data-state="deck"] .air-l{opacity:0}
[data-state="deck"] .x-deck,[data-state="deck"] .mist-more{opacity:1}
[data-state="deck"] .x-vent-l rect{fill:#3A2E24}
[data-state="fan"] .air-l,[data-state="fan"] .air-r,[data-state="fan"] .mist,[data-state="fan"] .damp{opacity:0}
[data-state="fan"] .air-flow,[data-state="fan"] .x-fan{opacity:1}

/* Motion: stale air creeps in and fades as it curls; fresh air runs steadily; the impeller turns; damp lingers */
.air-stale .air-in{animation:flow 2.6s linear infinite}
.air-stale .air-curl{animation:stall 3.4s var(--ease-io) infinite;animation-delay:-1.1s}
.air-r .air-curl{animation-delay:-2.3s}
.air-flow path:not(.air-head){animation:flow 1.1s linear infinite}
.air-flow path:nth-child(4){animation-duration:1.3s}
.air-flow path:nth-child(5){animation-duration:1.5s}
.x-impeller{transform-box:fill-box;transform-origin:center}
[data-state="fan"] .x-impeller{animation:spin 1s linear infinite}
.mist circle{animation:linger 5s var(--ease-io) infinite alternate}
.mist circle:nth-child(2n){animation-delay:-2.2s}
.mist circle:nth-child(3n){animation-delay:-3.7s}
@keyframes flow{to{stroke-dashoffset:-52}}
@keyframes stall{0%{stroke-dashoffset:0;opacity:1}70%{stroke-dashoffset:-26;opacity:.35}100%{stroke-dashoffset:-26;opacity:1}}
@keyframes linger{from{opacity:.3;transform:translateY(0)}to{opacity:.6;transform:translateY(-7px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.vent-stills{display:none}
@media (max-width:900px){.vent-panel{grid-template-columns:minmax(0,1fr)}}

/* S5 Rituals (night) */
.rituals{overflow:hidden}
.rituals .h2{position:relative;margin-bottom:clamp(36px,5vw,60px);color:var(--text-primary-night)}
.motes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ritual-list{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,6vw,96px);counter-reset:r}
.ritual-list li{counter-increment:r;display:grid;grid-template-columns:3.2em minmax(0,1fr);align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line-night);font-size:1.12rem}
.ritual-list li::before{content:counter(r,decimal-leading-zero);font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;color:var(--accent)}
@media (max-width:760px){.ritual-list{grid-template-columns:minmax(0,1fr)}}

/* S6 Real jobs */
.jobs{padding-right:0}
.strip-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,48px);padding-right:var(--pad-x)}
.strip-nav{display:none;gap:10px;flex:none}
@media (pointer:fine){.strip-nav{display:flex}}
.strip-nav[hidden]{display:none}
.snav{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--text-primary);background:transparent;cursor:pointer;transition:background-color .25s var(--ease-out),opacity .25s var(--ease-out)}
.snav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.snav:hover:not(:disabled){background:var(--panel)}
.snav:disabled{opacity:.3;cursor:default}
.strip{--sw:clamp(260px,34vw,460px);display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad-x) 16px 0;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.strip li{scroll-snap-align:start;flex:none;width:var(--sw)}
.strip li.port{width:calc(var(--sw) * .5625)}
.strip.wide{--sw:clamp(280px,42vw,600px)}
.strip figure{display:flex;flex-direction:column;gap:12px}
.strip img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:var(--panel)}
.strip li.port img{aspect-ratio:3/4}
.strip figcaption{font-size:.95rem;color:var(--text-secondary);max-width:38ch}

/* S7 Meet */
.meet{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:end}
.meet-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.meet-copy .h2{margin-bottom:22px;font-size:clamp(1.9rem,3.6vw,3rem)}
.meet-copy p{font-size:1.1rem;max-width:44ch}
@media (max-width:860px){.meet{grid-template-columns:minmax(0,1fr)}}

/* S8 Reviews */
/* auto-fit: a card held back for a confirm is not a grid item, so the visible cards share the row instead of leaving a hole */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(18px,2.4vw,32px);margin-bottom:28px}
.rcard{display:flex;flex-direction:column;justify-content:space-between;gap:22px;padding:clamp(22px,2.6vw,34px);border-left:2px solid var(--text-primary);background:var(--panel)}
.rcard p{font-family:var(--f-display);font-weight:600;font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.35;letter-spacing:-0.005em}
.rcard footer{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}
.text-link{font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.text-link:hover{text-decoration-thickness:2px}
@media (max-width:900px){.quotes{grid-template-columns:minmax(0,1fr)}}
.rcard p{max-width:46ch}

/* S9 Where */
.where-statement{margin-bottom:clamp(36px,5vw,64px)}
.where-statement .h2{font-size:clamp(2.6rem,7vw,6rem);max-width:12ch;margin-bottom:20px}
.where-statement p{font-size:1.15rem;max-width:46ch;color:var(--text-secondary)}
.where-label{margin-bottom:16px}
.suburbs{display:flex;flex-wrap:wrap;gap:6px 0;font-family:var(--f-display);font-weight:600;font-size:clamp(1.3rem,2.6vw,2.1rem);line-height:1.25;letter-spacing:-0.01em;max-width:28em}
.suburbs li{white-space:nowrap}
.suburbs li:not(:last-child)::after{content:"·";margin:0 .45em;color:var(--air-deep)}
.where-line{margin-top:24px;color:var(--text-secondary)}
/* Service area (19 Oct 2026): Northern Beaches named first, then the other three regions in one line */
.where-region{font-family:var(--f-display);font-weight:600;font-size:1rem;letter-spacing:.01em;color:var(--text-primary);margin-bottom:8px}
.where-also{margin-top:20px;font-size:1.06rem;max-width:40em}

/* S10 Questions */
.faq .h2{margin-bottom:clamp(28px,4vw,48px)}
.accordion{border-top:1px solid var(--text-primary);max-width:860px}
.accordion details{border-bottom:1px solid var(--line)}
.accordion summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:22px 0;font-family:var(--f-display);font-weight:600;font-size:clamp(1.12rem,1.6vw,1.35rem);line-height:1.3}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";flex:none;font-family:var(--f-mono);font-weight:500;font-size:1.2rem;color:var(--text-secondary);transition:transform .3s var(--ease-out)}
.accordion details[open] summary::after{transform:rotate(45deg)}
.accordion details p{padding:0 0 24px;max-width:62ch;font-size:1.06rem}

/* S11 Quote */
.quote-sec,.quote{scroll-margin-top:var(--nav-h)}
.sec.quote{background:var(--canvas-night);color:var(--text-primary-night);border:0;display:block}
.sec.quote .h2{color:var(--text-primary-night);margin-bottom:16px}
.quote-sub{font-size:1.15rem;color:var(--text-secondary-night);margin-bottom:clamp(28px,4vw,44px);max-width:46ch}
.form-frame{position:relative;max-width:760px;background:var(--panel-night);border:1px solid var(--line-night);border-radius:10px;padding:clamp(18px,3vw,36px);transition:box-shadow 1.2s var(--ease-out),border-color 1.2s var(--ease-out)}
.form-frame.arrived{border-color:rgba(255,197,11,.55);box-shadow:0 0 0 6px rgba(255,197,11,.08),0 0 60px rgba(255,197,11,.12)}
/* The Leadout form carries its own inner padding and #1C2B36 ground, so the frame only needs a slim margin round it
   (36px on top of the form's own left about 74px dead under the button). min-height = the embed's data-height, so the
   frame does not jump when form_embed.js sizes it (819px at desktop and phone widths, 15 Oct 2026). */
.form-frame:has(.ghl-slot iframe){padding:clamp(6px,1.4vw,16px);background:#1C2B36;border-color:#2C3E4B}
/* TEMPORARY (18 Oct 2026): the Leadout form is still styled in the old dusk navy (#1C2B36, inputs #14202A, border #2C3E4B,
   text #F1ECE3, button #FCCC24). Until it is restyled in the Leadout builder to the brand (form #2A2A2A, inputs #202020,
   border #3A3A3A, text #FFFFFF, button #FFC50B with #202020 text), the frame matches the form so there is no seam.
   After the restyle, delete the background and border-color above. */
.ghl-slot iframe{display:block;width:100%;border:0;min-height:755px;border-radius:8px}
/* The slot holds the form's height itself: while the form loads, form_embed.js takes the iframe out of the flow
   (position:absolute, left:-9999px) and puts it back once it reports in, and without this the page below jumped up
   and back down (PageSpeed measured 0.18 of layout shift on the landing page, 24 Oct 2026) */
.ghl-slot{position:relative;min-height:819px}
.micro{margin-top:18px;color:var(--text-secondary-night);font-size:.98rem}
.micro a{color:var(--accent);text-decoration:none;font-weight:700}

/* Footer */
.foot{background:#181818;color:var(--text-primary-night);padding:clamp(64px,8vw,110px) var(--pad-x) 40px}
.foot-line{font-family:var(--f-display);font-weight:600;letter-spacing:.01em;font-size:clamp(2rem,5vw,4.2rem);line-height:1.05;max-width:14ch;margin-bottom:clamp(40px,6vw,72px);text-wrap:balance}
.foot-details{display:grid;grid-template-columns:auto 1fr;gap:16px 40px;align-items:start;padding-top:28px;border-top:1px solid var(--line-night)}
.foot-logo{width:180px;height:auto;grid-row:span 2}
.foot address{font-style:normal;line-height:1.7}
.foot a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.foot a:hover{border-color:var(--accent)}
.foot-legal{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.06em;color:var(--text-secondary-night)}
.foot-ai{margin-top:36px;font-size:.86rem;color:var(--text-secondary-night)}
@media (max-width:640px){.foot-details{grid-template-columns:minmax(0,1fr)}.foot-logo{grid-row:auto}}

/* [CONFIRM] lines stay hidden until Brían confirms. ?preview shows them, marked. */
[data-confirm]{display:none!important}
.show-confirm [data-confirm]{display:revert!important;position:relative;outline:1px dashed rgba(255,197,11,.85);outline-offset:6px}
.show-confirm section[data-confirm]::after,.show-confirm li[data-confirm]::after,.show-confirm details[data-confirm]::after,.show-confirm div[data-confirm]::after,.show-confirm blockquote[data-confirm]::after{content:"To confirm";position:absolute;top:-10px;right:0;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;background:var(--accent);color:var(--text-primary);padding:2px 6px;border-radius:3px;z-index:3}
.show-confirm span[data-confirm]{background:rgba(255,197,11,.18)}

/* Off-screen and hidden-tab pause (animation-play-state is not inherited) */
.paused-sec *,.paused-sec *::before,.paused-sec *::after,
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* Reduced motion: final states, no loops, no film */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .reveal-armed .rv{opacity:1;transform:none}
  .airlines path{stroke-dashoffset:0}
  .thread-line{transform:none}
  .vent-figure{display:none}
  .vent-controls{display:none}
  .vent-stills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;grid-column:1/-1}
  .vent-stills figure{display:flex;flex-direction:column;gap:10px}
  .vent-stills figcaption{font-size:.95rem}
  .vent-stills .still-title{font-weight:700}
  .vent-stills .x-deck,.vent-stills .x-fan,.vent-stills .air-blocked,.vent-stills .air-flow{transition:none}
  .motes{display:none}
}
@media (prefers-reduced-motion: reduce) and (max-width:900px){.vent-stills{grid-template-columns:minmax(0,1fr)}}

/* ============ SUPPORTING PAGES (18 Oct 2026, supporting-pages-package.md) ============ */
.label-dark{color:var(--text-secondary)}
.lead{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.5;max-width:52ch}
.sec-mist{background:var(--panel)}
.sec-mist + .sec{padding-top:clamp(80px,11vw,150px)}
.sec .h2 + .lead,.sec .h2 + p,.sec .h2 + .prose-col{margin-top:20px}
.prose-col{max-width:62ch}
.prose-col p + p{margin-top:14px}

/* Page heroes. (a) film: .hero with --hero-h set inline. (b) split: graphite plate beside a real photo. (c) plain. */
.hero-credit{position:absolute;right:var(--gx);bottom:28px;max-width:min(46ch,60vw);margin:0;padding:8px 12px;border-radius:6px;background:rgba(20,20,20,.72);color:rgba(255,255,255,.86);font-size:.78rem;line-height:1.45;z-index:2}
.static-copy .hero-credit{position:static;display:inline-block;margin-top:18px;background:rgba(20,20,20,.6)}
.page-hero{position:relative}
.page-hero.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:min(88vh,860px);background:var(--canvas-night);color:var(--text-primary-night)}
.page-hero.split .ph-copy{display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--nav-h) + 8vh) clamp(24px,4vw,64px) clamp(48px,7vh,88px) var(--pad-x)}
.page-hero.split .ph-photo{position:relative;overflow:hidden}
.page-hero.split .ph-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero .eyebrow{color:var(--accent);margin-bottom:16px}
.page-hero .h-hero{margin-bottom:18px}
.page-hero .sub{font-size:clamp(1.02rem,1.25vw,1.15rem);line-height:1.6;max-width:44ch;margin-bottom:26px}
.page-hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.page-hero.plain{padding:calc(var(--nav-h) + clamp(56px,10vh,110px)) var(--pad-x) clamp(32px,5vw,56px)}
.page-hero.plain .eyebrow{color:var(--text-secondary)}
.page-hero.plain .sub{color:var(--text-secondary);margin-bottom:0}
@media (max-width:860px){
  .page-hero.split{grid-template-columns:minmax(0,1fr);min-height:0}
  .page-hero.split .ph-photo{order:-1;aspect-ratio:4/3;margin-top:var(--nav-h)}
  .page-hero.split .ph-copy{padding:36px var(--gx) 48px}
}

/* Service list with the brand book's line icons */
.svc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,72px);margin-top:clamp(32px,4vw,52px);border-top:1px solid var(--text-primary)}
.svc-list li{display:grid;grid-template-columns:44px minmax(0,1fr);align-content:start;gap:4px 18px;padding:24px 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 24px)}
.svc-list .ico{grid-row:span 2;width:40px;height:40px;color:var(--text-primary)}
.svc-list h3{font-family:var(--f-display);font-weight:600;font-size:1.15rem;line-height:1.35;letter-spacing:.01em}
.svc-list p{color:var(--text-secondary);max-width:46ch}
@media (max-width:760px){.svc-list{grid-template-columns:minmax(0,1fr)}}
.ico{display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:miter;stroke-linecap:square}
.ico-row{display:flex;flex-wrap:wrap;gap:22px 34px;margin:28px 0 8px}
.ico-row li{display:flex;align-items:center;gap:12px;font-weight:500}
.ico-row .ico{width:34px;height:34px}

/* Signs (sub-floor) */
.signs{display:grid;gap:0;margin-top:28px;max-width:60ch;border-top:1px solid var(--line)}
.signs li{padding:16px 0 16px 30px;border-bottom:1px solid var(--line);position:relative}
.signs li::before{content:"";position:absolute;left:4px;top:1.45em;width:10px;height:2px;background:var(--text-primary)}

/* Range per hour (EV page) */
.range-h{font-family:var(--f-display);font-weight:600;font-size:1.15rem;line-height:1.35;letter-spacing:.01em;margin-top:clamp(44px,5vw,64px)}
.range-table{width:100%;max-width:62ch;margin-top:18px;border-collapse:collapse;border-top:1px solid var(--text-primary)}
.range-table th,.range-table td{text-align:left;vertical-align:top;padding:14px 18px 14px 0;border-bottom:1px solid var(--line)}
.range-table th{font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:var(--text-secondary)}
.range-table td + td{white-space:nowrap;font-weight:600;padding-right:0}

/* Big figures: price and warranty */
.figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:28px;border-top:1px solid var(--line);padding-top:clamp(24px,3vw,40px)}
.figures .fig{font-family:var(--f-display);font-weight:600;font-size:clamp(2.2rem,4vw,4rem);line-height:1;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.figures .fig-line{display:block;margin-top:12px;color:var(--text-secondary)}
@media (max-width:640px){.figures{grid-template-columns:minmax(0,1fr)}}

/* Certificates panel */
.cert{max-width:62ch}
.cert p{margin-top:16px}

/* Projects (Our work) */
.project-copy{max-width:58ch;margin-bottom:clamp(24px,3vw,36px)}
.project-copy p{margin-top:12px}
.credit{margin-top:14px;font-size:.88rem;color:var(--text-secondary)}
.night .credit{color:var(--text-secondary-night)}

/* About: licence list */
.licence-list{display:grid;gap:0;margin-top:24px;max-width:56ch;border-top:1px solid var(--line)}
.licence-list li{padding:16px 0;border-bottom:1px solid var(--line);font-weight:500}
.four-words{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 48px;margin-top:28px}
.four-words li{padding-top:16px;border-top:1px solid var(--text-primary)}
@media (max-width:760px){.four-words{grid-template-columns:minmax(0,1fr)}}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:start}
.contact-grid .form-frame{max-width:none}
.details{display:grid;gap:0;border-top:1px solid var(--text-primary)}
.details > *{padding:16px 0;border-bottom:1px solid var(--line)}
.details .call{font-family:var(--f-display);font-weight:600;font-size:clamp(1.3rem,2.2vw,1.7rem)}
.details a{text-decoration:none;border-bottom:1px solid var(--line)}
.details .suburbs{font-size:1.05rem;gap:2px 0}
.details .where-region{margin:4px 0 2px}
.details .where-also{margin-top:10px;font-size:1rem}
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.sec.quote.on-paper{background:transparent;color:var(--text-primary)}

/* Privacy */
.prose{max-width:66ch}
.prose h2{font-family:var(--f-display);font-weight:600;font-size:1.25rem;margin:34px 0 10px}
.prose > h2:first-child{margin-top:0}
.prose p{color:var(--text-primary)}
.prose .updated{color:var(--text-secondary);font-size:.95rem}

/* Footer columns */
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 28px;margin-bottom:clamp(32px,5vw,56px)}
.foot-nav a{border-bottom:0;font-weight:500;opacity:.9}
.foot-nav a:hover{opacity:1}
.foot-ai{max-width:80ch}

/* Supporting-page film heroes: the kitchen films are 4:3, so crop from the centre rather than the top */
.hero-sub #film{object-position:50% 50%}
.hero-sub .poster{background-position:50% 50%}
.strip li.pano{width:calc(var(--sw) * 1.925)}
.strip li.pano img{aspect-ratio:2000/779}
.project .strip-head{align-items:flex-end}
.project .project-copy{margin-bottom:0}
.project .credit{padding-right:var(--pad-x)}
.lead-h{font-size:clamp(1.55rem,2.8vw,2.3rem);max-width:30ch;margin-top:14px}
.how-note{margin-top:24px;color:var(--text-secondary)}
.page-hero.plain + .sec{padding-top:clamp(16px,3vw,36px)}
.page-hero.plain .updated{margin-top:0}
.four-words li{font-size:1.08rem}
/* A [CONFIRM] line with a public fallback: the fallback shows until ?preview swaps in the line being confirmed */
.show-confirm .confirm-alt{display:none}
/* Sub-page headlines are longer than the home page's, so one step smaller in a slightly wider band */
.hero-sub .band{width:min(620px,44vw)}
.hero-sub .band .h-hero{font-size:clamp(2rem,3.5vw,3.3rem)}
.hero-sub .static-copy .h-hero{font-size:clamp(2rem,7.4vw,3.6rem)}
@media (orientation:landscape) and (max-height:560px){.hero-sub .static-copy .h-hero{font-size:clamp(1.7rem,4.6vw,2.5rem)}}