/* =========================================================
   SOLID7 — Engineered Headwear
   Dark hypercar reveal. Obsidian + a single ember of heat.
   See DESIGN.md — identity is locked.
   ========================================================= */

:root{
  --obsidian:#08090C;
  --carbon:#0E1015;
  --graphite:#171A21;
  --slate:#222732;
  --platinum:#ECEEF2;
  --silver:#8A909C;
  --ember:#FF4E16;
  --ember-deep:#C2310A;

  --maxw:1480px;
  --gutter:clamp(20px,5vw,80px);
  /* height of the fixed top bar, unscrolled. 80px while the nav + social icons are
     in it; they hide below 900px and it drops to 57px (see the 900px block). Anything
     that has to clear the bar reserves this rather than guessing a number. */
  --barh:80px;
  --ease:cubic-bezier(.16,1,.3,1);

  --disp:"Archivo",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--obsidian);
  color:var(--platinum);
  font-family:var(--body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.loading{overflow:hidden;height:100vh}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
::selection{background:var(--ember);color:#000}

/* display helpers */
.eyebrow,.index,.spec__no,.stat__label,.scrollcue,.hero__build,
.foot__tag,.bar__nav a,.foot__nav a,figcaption span,.contact__note{
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.7rem;
  font-weight:500;
  color:var(--silver);
}
.section-title,.hero__title,.showcase__title,.contact__title,
.loader__mark,.bar__brand,.foot__brand,.manifesto__lead,.stat__num{
  font-family:var(--disp);
  font-stretch:125%;
  font-weight:800;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.01em;
}
.ember{color:var(--ember)}

/* =========================================================
   LOADER
   ========================================================= */
/* The curtain and the reveals are hidden-by-default states that only JS can
   clear, so both are gated on <html class="js"> (set by the inline script at
   the top of index.html's head). No JS -> no curtain, and every .reveal paints.
   This is what fixed the black screen iPhone users were seeing when a content
   blocker or Lockdown Mode stopped main.js. */
html:not(.js) .loader{display:none!important}
html:not(.js) .reveal{opacity:1!important;transform:none!important}
html:not(.js) body{overflow:auto!important;height:auto!important}

.loader{
  position:fixed;inset:0;z-index:1000;
  background:var(--obsidian);
  display:flex;align-items:center;justify-content:center;
  transform:translateY(0);
}
.loader__inner{
  position:relative;z-index:2;
  width:fit-content;max-width:90vw;
  text-align:center;
  transition:opacity .5s var(--ease);
}
.loader__mark{
  font-size:clamp(2.4rem,7vw,3.6rem);
  letter-spacing:.12em;
  margin-bottom:1.6rem;
  opacity:0;transform:translateY(14px);
  animation:loaderUp .9s var(--ease) .15s forwards;
}
.loader__bar{
  height:2px;width:100%;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  opacity:0;animation:loaderUp .9s var(--ease) .35s forwards;
}
.loader__bar span{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--ember-deep),var(--ember));
  box-shadow:0 0 18px rgba(255,78,22,.6);
}
.loader__meta{
  display:flex;justify-content:space-between;
  margin-top:1rem;
  opacity:0;animation:loaderUp .9s var(--ease) .5s forwards;
}
.loader__count{color:var(--platinum);letter-spacing:.2em}
.loader.done .loader__inner{opacity:0}
.loader.done{
  transform:translateY(-100%);
  transition:transform 1.05s var(--ease) .25s;
}
@keyframes loaderUp{to{opacity:1;transform:translateY(0)}}

/* =========================================================
   TOP BAR
   ========================================================= */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--gutter);
  transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s;
  border-bottom:1px solid transparent;
}
.bar.scrolled{
  background:rgba(8,9,12,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--slate);
  padding-top:.85rem;padding-bottom:.85rem;
}
.bar__brand{
  font-size:1.3rem;letter-spacing:.14em;
  display:inline-flex;align-items:center;gap:.62rem;
}
.bar__mark{
  width:.82rem;height:.82rem;display:block;flex:none;border-radius:2px;
  background-color:var(--platinum);
  box-shadow:inset 0 0 0 1px rgba(8,9,12,.35);
  transition:background-color .35s var(--ease),transform .5s var(--ease),box-shadow .35s var(--ease);
}
.bar__brand:hover .bar__mark{background-color:var(--ember);transform:translateY(-1px);box-shadow:0 0 16px rgba(255,78,22,.5)}
.bar__word{display:inline-block}
/* The signature 7 — closed up to SOLID, ember. The one hot accent (DESIGN §2).
   Used in the loader mark, the top bar, the footer brand. */
.wm7{color:var(--ember)}
.bar__nav{display:flex;gap:2.4rem}
.bar__nav a{position:relative;transition:color .3s}
.bar__nav a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;
  background:var(--ember);transition:width .4s var(--ease);
}
.bar__nav a:hover{color:var(--platinum)}
.bar__nav a:hover::after{width:100%}
.bar__progress{
  position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--ember-deep),var(--ember));
  box-shadow:0 0 10px rgba(255,78,22,.5);
}
.bar__menu{display:none;background:none;border:0;cursor:pointer;
  flex-direction:column;gap:5px;padding:6px}
.bar__menu span{width:24px;height:2px;background:var(--platinum);transition:.3s}
.bar__menu.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.bar__menu.open span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.mobile{
  position:fixed;inset:0;z-index:90;
  background:var(--obsidian);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(.7rem,2.6vh,1.6rem);
  /* clear the fixed top bar so the first item never collides with the wordmark /
     close button, and give a scrollable safety net if the list ever exceeds the
     viewport (small phones / large text) */
  padding:calc(72px + env(safe-area-inset-top,0px)) 1.5rem calc(40px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.mobile.open{opacity:1;visibility:visible}
.mobile a{
  font-family:var(--disp);font-stretch:125%;font-weight:800;
  text-transform:uppercase;font-size:clamp(1.3rem,6vw,1.8rem);letter-spacing:.03em;
  line-height:1.05;text-align:center;max-width:100%;
}
.mobile a:hover{color:var(--ember)}

/* =========================================================
   HERO
   ========================================================= */
/* 2026-09-05: the hero was bottom-anchored with NO top padding, so whenever the copy
   was taller than the viewport the stack overflowed UPWARDS and the eyebrow + the top
   of the H1 slid under the fixed bar (client report: "header sits on top of the text").
   The mobile hero is restacked to display:block by the <=720px block inline in
   index.html, which clears the bar itself, so phones in PORTRAIT were fine. The gap
   was everything above 720px: a phone in LANDSCAPE (844x390) and any short desktop
   window (1280x720) both take these flex rules and both overlapped.
   Now fixed for every width: reserve the bar's height at the top, and let
   .hero__content take the free space with margin-top:auto instead of justify-content.
   An auto margin collapses to 0 when there is no free space, so the stack can only
   ever overflow off the BOTTOM, never back up under the bar. Tall screens are
   pixel-identical to before. */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:calc(var(--barh) + clamp(12px,2.5vh,36px)) var(--gutter) clamp(40px,8vh,90px);
  overflow:hidden;
}
.hero__media{position:absolute;inset:-8% 0;z-index:-1}
/* boost the photo's own depth: lift contrast + saturation so the caps
   separate crisply from the slate and the studio recedes behind them */
.hero__media img{transform:scale(1.02);object-position:50% 44%;filter:contrast(1.12) saturate(1.14) brightness(1.2)}
.hero__veil{
  position:absolute;inset:0;
  background:
    /* legibility only where the text lives — bottom + left — kept light so
       the photo (and its natural depth) reads clearly everywhere else */
    linear-gradient(180deg,rgba(6,7,11,.28) 0%,transparent 22%,transparent 52%,rgba(6,7,11,.55) 82%,rgba(4,5,9,.9) 100%),
    linear-gradient(90deg,rgba(6,7,11,.6) 0%,rgba(6,7,11,.22) 34%,transparent 62%),
    /* warm ember breath low-left, atmosphere not mud */
    radial-gradient(120% 80% at 22% 116%,rgba(255,78,22,.16) 0%,rgba(255,78,22,.04) 40%,transparent 66%),
    /* gentle corner vignette — frames without crushing */
    radial-gradient(140% 130% at 52% 42%,transparent 58%,rgba(4,5,9,.42) 92%,rgba(3,4,7,.6) 100%);
}
/* =========================================================
   OVERTURE — full-screen forged S7 mark on its own stage.
   The loader lifts to reveal ONLY the mark in the obsidian void;
   scroll hands off to the photographic hero below.
   ========================================================= */
.overture{
  position:relative;height:100vh;height:100svh;min-height:100vh;min-height:100svh;overflow:hidden;
  background:
    radial-gradient(120% 100% at 50% 44%,#12151b 0%,#0a0c11 52%,#05060a 100%);
}
/* brand film reveal (replaces the forged-S7 3D mark) */
.overture__video{position:absolute;inset:0;z-index:2;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;pointer-events:none;
  opacity:0;transition:opacity 1.5s cubic-bezier(.16,1,.3,1)}
.overture--film .overture__video{opacity:1}
/* legibility + brand grade over the film: darken edges, warm the low ember
   corner, hold the top/bottom so the type frame reads over any frame */
.overture__filmveil{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(150% 120% at 50% 40%,transparent 44%,rgba(5,6,10,.42) 100%),
    radial-gradient(60% 70% at 16% 108%,rgba(255,78,22,.16) 0%,transparent 60%),
    linear-gradient(180deg,rgba(5,6,10,.5) 0%,transparent 22% 72%,rgba(5,6,10,.62) 100%)}
/* legibility band behind the top brand/nav text — the film washes it out.
   Sits above the film+veil (z3) but below the type frame (z4) and the fixed bar. */
.overture__topband{position:absolute;top:0;left:0;right:0;z-index:3;pointer-events:none;
  height:clamp(96px,17vh,164px);
  background:linear-gradient(180deg,
    rgba(5,6,10,.86) 0%,rgba(5,6,10,.68) 34%,rgba(5,6,10,.36) 66%,transparent 100%)}
/* legibility band behind the bottom brand line + scroll cue (mirror of the top
   band) — the surfer/bright-water frames washed out the silver type here */
.overture__botband{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
  height:clamp(150px,26vh,260px);
  background:linear-gradient(0deg,
    rgba(5,6,10,.9) 0%,rgba(5,6,10,.7) 34%,rgba(5,6,10,.36) 66%,transparent 100%)}
/* type frame must sit above the film + veil */
.overture--film .overture__frame{z-index:4}
/* ---- brand intro: the machined S7 mark rests over the film on load, then lifts away ---- */
.overture__intro{position:absolute;inset:0;z-index:6;pointer-events:none;
  display:flex;align-items:center;justify-content:center;opacity:0;
  background:radial-gradient(58% 60% at 50% 48%,rgba(5,6,10,.62) 0%,rgba(5,6,10,.28) 46%,transparent 74%)}
.overture__introMark{
  width:min(38vw,300px);aspect-ratio:883/1001;
  background:linear-gradient(152deg,#eef1f6 0%,#aab2c0 38%,#4a5160 74%,#252b35 100%);
  -webkit-mask:url(../img/s7-mark-solid.svg) center/contain no-repeat;
          mask:url(../img/s7-mark-solid.svg) center/contain no-repeat;
  filter:drop-shadow(0 0 46px rgba(255,78,22,.22));
  transform:scale(.92)}
/* fires once the loader clears and the page is ready */
body.ready .overture__intro{animation:s7intro 3.2s cubic-bezier(.16,1,.3,1) forwards}
body.ready .overture__intro .overture__introMark{animation:s7introMark 3.2s cubic-bezier(.16,1,.3,1) forwards}
@keyframes s7intro{
  0%{opacity:0}
  14%{opacity:1}
  52%{opacity:1}
  100%{opacity:0}
}
@keyframes s7introMark{
  0%{transform:scale(.9)}
  52%{transform:scale(1)}
  100%{transform:scale(1.05)}
}
@media (prefers-reduced-motion:reduce){.overture__intro{display:none}}
.overture__gl{position:absolute;inset:0;z-index:2;opacity:0;
  transition:opacity 1.3s cubic-bezier(.16,1,.3,1);pointer-events:none}
.overture__gl[data-gl="init"],.overture__gl[data-gl="on"]{opacity:1}
.hero__glcanvas{display:block;width:100%!important;height:100%!important}
/* static machined mark — instant paint + no-WebGL / reduced-motion fallback */
.overture__fallback{position:absolute;inset:0;z-index:1;pointer-events:none;
  display:flex;align-items:center;justify-content:center;transition:opacity 1s ease}
.overture__fallback::before{
  content:"";width:min(40vw,300px);aspect-ratio:883/1001;
  background:linear-gradient(152deg,#eef1f6 0%,#aab2c0 38%,#4a5160 74%,#252b35 100%);
  -webkit-mask:url(../img/s7-mark-solid.svg) center/contain no-repeat;
          mask:url(../img/s7-mark-solid.svg) center/contain no-repeat;
  filter:drop-shadow(0 0 40px rgba(255,78,22,.12));
}
.overture:has(#heroGL[data-gl="init"]) .overture__fallback,
.overture:has(#heroGL[data-gl="on"]) .overture__fallback{opacity:0}
/* the brand film replaces the static S7 mark entirely — hide the fallback
   so it never ghosts through the film's letterbox area on mobile */
.overture--film .overture__fallback{opacity:0}
/* radial ember halo behind the mark */
.overture__glow{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  transition:opacity 1.6s ease;
  background:
    radial-gradient(44% 50% at 50% 47%,rgba(255,78,22,.13) 0%,rgba(255,78,22,.045) 34%,transparent 66%),
    radial-gradient(120% 100% at 50% 44%,transparent 40%,rgba(5,6,10,.9) 100%);
}
.overture:has(#heroGL[data-gl="on"]) .overture__glow,
.overture:has(#heroGL[data-gl="init"]) .overture__glow{opacity:1}
/* type frame: brand line top, tagline + scroll cue bottom */
.overture__frame{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(84px,12vh,120px) var(--gutter) clamp(30px,5vh,52px);
  /* no text-shadow — the top/bottom legibility bands carry all the contrast so
     the type stays perfectly sharp (any shadow radius reads as fuzzy over video) */
}
.overture__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.eyebrow--over{margin-bottom:0}
.overture__no{color:var(--silver);letter-spacing:.2em;font-size:.7rem;font-weight:500;
  text-transform:uppercase;font-family:var(--body)}
.overture__bottom{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vh,30px)}
.overture__line{
  color:#B9BEC8;letter-spacing:.42em;text-transform:uppercase;
  font-size:clamp(.66rem,1vw,.8rem);text-align:center;
}
.overture__cue{
  pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:.7rem;
  color:#B9BEC8;text-decoration:none;transition:color .4s ease;
}
.overture__cue:hover{color:var(--platinum)}
.overture__cueword{
  font-family:var(--body);font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  font-size:.66rem;
}
.overture__cueline{width:1px;height:46px;background:linear-gradient(var(--silver),transparent);
  position:relative;overflow:hidden}
.overture__cueline::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:var(--ember);animation:scrolldrop 2.1s var(--ease) infinite}
.hero__content{position:relative;z-index:3;max-width:min(1100px,92vw);margin-top:auto}
.eyebrow{display:flex;align-items:center;gap:.7rem;color:var(--silver);margin-bottom:1.6rem}
.eyebrow .tick{width:26px;height:1px;background:var(--ember);display:inline-block}
.hero__title{
  font-size:clamp(2.7rem,8.4vw,7.4rem);
  letter-spacing:-.01em;margin-bottom:1.8rem;
}
.hero__title .line{display:block;white-space:nowrap}
/* Promoted Solid-7 slogan as hero H1 (2026-07-06): longer lines, needs a tighter scale */
.hero__title--slogan{font-size:clamp(2rem,5.6vw,5.7rem);line-height:1.03;letter-spacing:-.015em}
.hero__title--slogan .line{white-space:nowrap}
.hero__sub{
  max-width:50ch;color:#C8CCD4;font-size:clamp(1rem,1.4vw,1.18rem);
  font-weight:300;line-height:1.7;margin-bottom:2.4rem;
}
.hero__sub strong{font-weight:700;color:#EDF0F5}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap}
.hero__foot{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  margin-top:clamp(40px,7vh,80px);
  border-top:1px solid var(--slate);padding-top:1.2rem;
}
.scrollcue{display:flex;align-items:center;gap:.8rem}
.scrollcue__line{width:1px;height:34px;background:var(--silver);position:relative;overflow:hidden}
.scrollcue__line::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:var(--ember);animation:scrolldrop 2s var(--ease) infinite}
@keyframes scrolldrop{0%{top:-100%}60%,100%{top:100%}}
.hero__build{color:var(--silver)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--body);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;
  padding:1.05rem 1.9rem;border:1px solid transparent;
  /* named properties, never `all` — `all` repaints every animatable property each frame.
     The ember glow is painted once on a pseudo-element and faded with opacity, so no
     box-shadow is re-rasterised alongside the transform. */
  position:relative;isolation:isolate;
  transform:translate3d(0,0,0);backface-visibility:hidden;
  transition:background-color .4s var(--ease),color .4s var(--ease),
             border-color .4s var(--ease),transform .4s var(--ease);
  cursor:pointer;
}
.btn--ember{background:var(--ember);color:#0A0A0A}
.btn--ember::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  box-shadow:0 0 30px rgba(255,78,22,.35);
  opacity:0;transition:opacity .4s var(--ease);
}
.btn--ember:hover{background:var(--platinum);transform:translate3d(0,-2px,0)}
.btn--ember:hover::after{opacity:1}
.btn--ghost{border-color:var(--slate);color:var(--platinum)}
.btn--ghost:hover{border-color:var(--ember);color:var(--ember);transform:translate3d(0,-2px,0)}
@media(prefers-reduced-motion:reduce){
  .btn{transition:background-color .2s linear,color .2s linear,border-color .2s linear}
  .btn:hover{transform:none}
}
.btn--lg{padding:1.2rem 2.6rem;font-size:.8rem}

/* =========================================================
   MANIFESTO
   ========================================================= */
.manifesto{
  position:relative;isolation:isolate;overflow:hidden;
  max-width:none;margin:0;
  padding:clamp(120px,22vh,280px) 0;
  background:var(--obsidian);
}
/* big banner photos spread edge-to-edge behind the manifesto */
.manifesto__banner{position:absolute;inset:0;z-index:0;display:flex}
.mf-pane{position:relative;margin:0;flex:1;overflow:hidden}
.mf-pane+.mf-pane{box-shadow:inset 1px 0 0 rgba(255,255,255,.05)}
.mf-pane img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.82) brightness(.6) contrast(1.05);
}
.mf-pane--hero img{filter:grayscale(.38) brightness(.74) contrast(1.04) saturate(1.06)}
.manifesto__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,9,12,.9) 0%,rgba(8,9,12,.7) 34%,rgba(8,9,12,.3) 66%,rgba(8,9,12,.64) 100%),
    linear-gradient(0deg,rgba(8,9,12,.86) 0%,rgba(8,9,12,.08) 42%,rgba(8,9,12,.08) 60%,rgba(8,9,12,.56) 100%);
}
.manifesto__inner{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
}
.index{margin-bottom:2.5rem}
.index.light{color:rgba(255,255,255,.6)}
.manifesto__lead{
  font-size:clamp(1.6rem,4vw,3.1rem);
  font-stretch:125%;font-weight:800;line-height:1.06;
  max-width:18ch;margin-bottom:3.5rem;letter-spacing:0;
  text-shadow:0 2px 40px rgba(8,9,12,.75);
}
.manifesto__cols{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,5vw,5rem);
  max-width:880px;margin-left:auto;
}
.manifesto__cols p{color:#D2D6DE;font-weight:300;font-size:1.02rem;text-shadow:0 1px 24px rgba(8,9,12,.7)}

/* =========================================================
   SOLID 7 — OWN-BRAND ACT DIVIDER
   ========================================================= */
.s7brand{
  position:relative;isolation:isolate;overflow:hidden;
  max-width:none;margin:0;
  padding:clamp(130px,24vh,300px) 0;
  background:var(--obsidian);
  border-top:1px solid var(--slate);
  border-bottom:1px solid var(--slate);
}
.s7brand__banner{position:absolute;inset:0;z-index:0;display:flex}
.s7-pane{position:relative;margin:0;flex:1;overflow:hidden}
.s7-pane+.s7-pane{box-shadow:inset 1px 0 0 rgba(255,255,255,.05)}
.s7-pane img{width:100%;height:100%;object-fit:cover;filter:grayscale(.85) brightness(.54) contrast(1.06)}
.s7-pane--hero{flex:1.35}
.s7-pane--hero img{filter:grayscale(.26) brightness(.74) contrast(1.04) saturate(1.08)}
.s7brand__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,9,12,.9) 0%,rgba(8,9,12,.72) 40%,rgba(8,9,12,.38) 72%,rgba(8,9,12,.7) 100%),
    linear-gradient(0deg,rgba(8,9,12,.82) 0%,rgba(8,9,12,.1) 46%,rgba(8,9,12,.5) 100%);
}
.s7brand__inner{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
}
.s7brand .ember-idx{display:block;margin-bottom:1.6rem}
.s7brand__word{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--disp);font-stretch:125%;font-weight:900;
  font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:.18em;text-transform:uppercase;
  color:var(--platinum);margin-bottom:1.8rem;
}
.s7brand__word .ember{color:var(--ember)}
.s7brand__word .s7-mark{
  width:1.15rem;height:1.2rem;display:block;flex:none;background-color:var(--ember);
  -webkit-mask:url('../img/s7-mark.svg') center/contain no-repeat;
  mask:url('../img/s7-mark.svg') center/contain no-repeat;
}
.s7brand__slogan{
  font-family:var(--disp);font-stretch:125%;font-weight:900;text-transform:uppercase;
  font-size:clamp(2.3rem,7vw,6.2rem);line-height:.98;letter-spacing:.005em;
  margin-bottom:2.2rem;text-shadow:0 3px 48px rgba(8,9,12,.8);
}
.s7brand__sub{
  color:#D2D6DE;font-weight:300;font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.6;
  max-width:52ch;margin-bottom:2.6rem;text-shadow:0 1px 24px rgba(8,9,12,.7);
}

/* =========================================================
   THE BUILD
   ========================================================= */
.build{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) clamp(80px,14vh,160px)}
.section-title{font-size:clamp(2.6rem,7vw,6rem);margin-top:.6rem}
.build__media{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  overflow:hidden;height:clamp(560px,88vh,940px);margin-bottom:0;
  display:flex;align-items:center;justify-content:flex-end}
.build__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.build__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(115deg,
      rgba(8,9,12,.6) 0%,
      rgba(8,9,12,.28) 24%,
      rgba(8,9,12,0) 46%),
    linear-gradient(90deg,
      rgba(8,9,12,0) 34%,
      rgba(8,9,12,.55) 58%,
      rgba(8,9,12,.9) 100%)}
/* title overlaid on the image, top-left — aligned to the content column */
.build__head{position:absolute;z-index:2;
  top:clamp(2rem,6vh,3.6rem);
  left:calc(50vw - var(--maxw)/2 + var(--gutter));
  max-width:min(560px,52vw)}
@media(max-width:1560px){
  .build__head{left:var(--gutter)}
}
.build__specs{position:relative;z-index:2;list-style:none;display:grid;
  grid-template-columns:1fr;gap:clamp(1.4rem,3.2vh,2.4rem);
  width:min(430px,40vw);
  margin-right:calc(50vw - var(--maxw)/2 + var(--gutter));
  padding-left:clamp(1.4rem,2vw,2.2rem);
  border-left:1px solid rgba(255,78,22,.55)}
@media(max-width:1560px){
  .build__specs{margin-right:var(--gutter)}
}
.build__specs li{display:block}
.spec__no{display:block;color:var(--ember);letter-spacing:.1em;margin-bottom:.9rem}
.build__specs h3{
  text-align:left;
  font-family:var(--disp);font-stretch:125%;font-weight:700;
  text-transform:uppercase;font-size:1.1rem;letter-spacing:.02em;margin-bottom:.55rem;
}
.build__specs p{text-align:left;color:var(--silver);font-weight:300;font-size:.95rem}

/* ---- BUILD SHEET promoted to the opening hero (after the overture) ---- */
.build--hero{
  position:relative;max-width:none;margin:0;padding:0;
  min-height:100vh;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.build--hero .build__media{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  border-radius:0;
}
.build--hero .build__media>img{transform:scale(1.05)}
/* stronger top + bottom scrim so the overlaid title and foot read cleanly */
.build--hero .build__scrim{
  background:
    linear-gradient(180deg,rgba(8,9,12,.62) 0%,rgba(8,9,12,.12) 26%,rgba(8,9,12,0) 46%,rgba(8,9,12,.72) 100%),
    linear-gradient(90deg,rgba(8,9,12,0) 34%,rgba(8,9,12,.5) 58%,rgba(8,9,12,.9) 100%);
}
.build--hero .build__intro{
  position:absolute;z-index:3;
  top:clamp(96px,15vh,168px);left:var(--gutter);
  max-width:min(640px,64vw);
}
.build--hero .build__title{margin-top:.4rem;line-height:.92}
.build--hero .build__cta{margin-top:clamp(1.6rem,3.4vh,2.4rem)}
.build--hero .build__foot{
  z-index:3;margin:0 var(--gutter) clamp(28px,6vh,64px);
  border-top:1px solid var(--slate);padding-top:1.2rem;
}
@media(max-width:760px){
  /* phone hero: the composite is landscape (orange cap left, navy cap right).
     A tall phone crop can't hold both, so focus the frame on the ORANGE cap —
     push object-position left + zoom in a touch so only the orange cap fills
     the stage and the navy one falls off the right edge. */
  .hero__media img{object-position:16% 52%;transform:scale(1.4)}
  /* phone: TRUE full-bleed — the 16:9 film fills the whole stage edge-to-edge
     (both side borders), centre-cropped. No scale-down: shrinking it to "zoom
     out" is exactly what floated it off the edges and left the side bars. */
  .overture__video{object-fit:cover;object-position:50% 50%;
    transform:none}
  /* phone: let the hero grow with its content instead of locking to
     screen height — fixes the specs/foot collision */
  .build--hero{min-height:100vh;min-height:100svh;height:auto}
  .build--hero .build__media{
    position:relative;inset:auto;height:auto;min-height:100vh;min-height:100svh;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding-top:clamp(220px,38vh,340px);padding-top:clamp(220px,38svh,340px);
  }
  .build--hero .build__media>img{
    position:absolute;inset:0;width:100%;height:100%;
    aspect-ratio:auto;object-fit:cover;
  }
  .build--hero .build__scrim{display:block;background:
    linear-gradient(180deg,rgba(8,9,12,.55) 0%,rgba(8,9,12,.08) 20%,
      rgba(8,9,12,.5) 46%,rgba(8,9,12,.94) 78%)}
  .build--hero .build__intro{
    position:relative;z-index:2;top:auto;left:auto;
    max-width:none;margin:0 var(--gutter) clamp(1.6rem,4vh,2.4rem);
  }
  .build--hero .build__specs{
    position:relative;z-index:2;width:auto;margin:0 var(--gutter);
    grid-template-columns:1fr;gap:1.4rem;
    border-left:1px solid rgba(255,78,22,.55);border-top:0;
    padding-left:1.1rem;padding-top:0;margin-top:0;
  }
}

/* =========================================================
   SHOWCASE (full bleed)
   ========================================================= */
.showcase{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;
  padding:0 var(--gutter) clamp(60px,12vh,140px);overflow:hidden}
.showcase__media{position:absolute;inset:-8% 0;z-index:-1}
.showcase__media img{transform:scale(1.05)}
.showcase__veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,12,.34),rgba(8,9,12,.12) 40%,rgba(8,9,12,.82))}
.showcase__content{max-width:600px}
.showcase__title{font-size:clamp(2.6rem,7vw,6rem);margin:1.2rem 0 1.6rem}
.showcase__content p{color:#C8CCD4;font-weight:300;max-width:46ch}

/* =========================================================
   STATS
   ========================================================= */
.stats{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(70px,12vh,140px) var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--slate);border:1px solid var(--slate);
}
.stat{background:var(--obsidian);padding:clamp(2rem,4vw,3.4rem) clamp(1.4rem,2.5vw,2.2rem)}
.stat__num{display:block;font-size:clamp(3rem,7vw,5.6rem);color:var(--platinum);line-height:1}
.stat__label{display:block;margin-top:1rem;letter-spacing:.18em}

/* =========================================================
   WORK
   ========================================================= */
.work{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,8vh,100px) var(--gutter) clamp(80px,14vh,160px)}
.work__head{margin-bottom:clamp(3rem,7vh,5rem);max-width:760px}
.work__intro{margin-top:1.6rem;color:var(--silver);font-weight:300;max-width:48ch}
/* ---- WORK SHOWCASE : full-bleed feature + click-to-swap thumbnail row ---- */
.work__feature{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  height:clamp(360px,68vh,760px);overflow:hidden;background:var(--ink)}
.work__feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .5s var(--ease),transform 1.4s var(--ease);
  filter:grayscale(.12) brightness(.9)}
.work__feature::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(8,9,12,.9))}
.work__feature.is-swapping img{opacity:0}
.work__feature figcaption{position:absolute;left:var(--gutter);bottom:clamp(1.4rem,4vh,2.6rem);z-index:2}
.work__feature figcaption span{display:block;color:var(--ember);letter-spacing:.2em;
  text-transform:uppercase;font-size:.72rem;font-weight:600;margin-bottom:.5rem}
.work__feature figcaption b{display:block;font-family:var(--disp);font-stretch:125%;font-weight:800;
  text-transform:uppercase;font-size:clamp(1.6rem,4.4vw,3rem);letter-spacing:.02em;line-height:.98}
.work__thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.5rem,1vw,1rem);
  margin-top:clamp(.8rem,1.6vw,1.4rem)}
.work__thumb{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--slate);
  padding:0;cursor:pointer;background:var(--ink);transition:border-color .35s var(--ease)}
.work__thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease),filter .6s var(--ease);filter:grayscale(.3) brightness(.85)}
.work__thumb::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 0 var(--ember);transition:box-shadow .35s var(--ease);pointer-events:none}
.work__thumb:hover img{transform:scale(1.07);filter:grayscale(.15) brightness(.9)}
.work__thumb.is-active{border-color:var(--ember)}
.work__thumb.is-active img{filter:grayscale(0) brightness(1)}
.work__thumb.is-active::after{box-shadow:inset 0 0 0 2px var(--ember)}

/* =========================================================
   RANGE  (real studio photography)
   ========================================================= */
.range{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,8vh,100px) var(--gutter) clamp(20px,4vh,60px)}
.range__head{margin-bottom:clamp(2.4rem,5vh,4rem);max-width:760px}
.range__head .index{color:var(--ember);letter-spacing:.18em;text-transform:uppercase;font-size:.7rem;font-weight:600}
.range__intro{margin-top:1.4rem;color:var(--silver);font-weight:300;max-width:52ch}
.range__grid{display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(170px,21vh);gap:clamp(.8rem,1.5vw,1.4rem)}
.range__item{position:relative;overflow:hidden;border:1px solid var(--slate)}
.range__item--tall{grid-row:span 2}
.range__item--wide{grid-column:span 2}
.range__item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.4s var(--ease),filter 1.4s var(--ease);filter:brightness(.96) contrast(1.02)}
.range__item:hover img{transform:scale(1.05);filter:brightness(1.04) contrast(1.05)}
.range__item figcaption{
  position:absolute;left:1.2rem;bottom:1.05rem;z-index:2;
  font-family:var(--disp);font-stretch:125%;font-weight:700;text-transform:uppercase;
  font-size:.98rem;letter-spacing:.03em;
}
.range__item figcaption span{display:block;margin-bottom:.3rem;color:var(--ember);
  font-family:var(--body);font-stretch:normal;font-weight:600;font-size:.6rem;letter-spacing:.16em}
.range__item::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 50%,rgba(8,9,12,.82))}
@media(max-width:720px){
  .range__grid{grid-template-columns:repeat(2,1fr)}
  .range__item--wide{grid-column:span 2}
  .range__item--tall{grid-row:span 1}
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{position:relative;min-height:92vh;min-height:92svh;display:flex;align-items:center;
  padding:clamp(80px,14vh,160px) var(--gutter);overflow:hidden}
.contact__media{position:absolute;inset:-8% 0;z-index:-1}
.contact__media img{transform:scale(1.05);filter:brightness(.92);object-position:34% 24%}
.contact__veil{position:absolute;inset:0;
  background:radial-gradient(90% 90% at 30% 50%,rgba(8,9,12,.6),rgba(8,9,12,.9))}
/* content spans the full page width; the title runs edge-to-edge like the hero,
   the rest of the block stays in a readable column below it */
.contact__content{max-width:var(--maxw);width:100%;margin:0 auto}
/* nowrap so it runs across in a clean 2-line stack like the hero (no lonely word);
   the cap sizes the long first line to fit the full-width column exactly */
.contact__title{font-size:clamp(2.2rem,5.4vw,4.7rem);line-height:1.02;letter-spacing:-.01em;
  white-space:nowrap;margin:1.2rem 0 1.8rem}
.contact__intro>p{color:#C8CCD4;font-weight:400;font-size:1.09rem;max-width:40ch;margin-bottom:2.4rem}
/* the note is set at .7rem, so the 44ch measure above would fold it after two
   words; needs to outrank .contact__intro>p, hence the doubled class */
.contact__note{margin-top:1.6rem;letter-spacing:.2em}
.contact__intro>p.contact__note{max-width:none;margin-bottom:0}

/* copy left, enquiry form right; the title above still runs the full width */
.contact__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
.contact__company{margin-top:2rem;font-style:normal;color:var(--silver);
  font-size:.85rem;line-height:1.9;letter-spacing:.02em}
.contact__mail{color:var(--platinum);border-bottom:1px solid var(--slate);
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.contact__mail:hover{color:var(--ember);border-color:var(--ember)}

/* =========================================================
   ENQUIRY FORM
   ========================================================= */
.enq{
  background:rgba(14,16,21,.72);
  border:1px solid var(--slate);
  padding:clamp(1.6rem,3vw,2.6rem);
  backdrop-filter:blur(14px);
}
.enq__lead{
  font-family:var(--body);text-transform:uppercase;letter-spacing:.22em;
  font-size:.7rem;font-weight:500;color:var(--silver);
  padding-bottom:1.4rem;margin-bottom:1.8rem;border-bottom:1px solid var(--slate);
}
.enq__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem}
.enq__field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.4rem;min-width:0}
.enq__row .enq__field{margin-bottom:0}
.enq__row+.enq__field,.enq__row+.enq__row{margin-top:1.4rem}
.enq label{
  font-family:var(--body);text-transform:uppercase;letter-spacing:.18em;
  font-size:.62rem;font-weight:600;color:var(--silver);
}
.enq__opt{text-transform:none;letter-spacing:.02em;font-weight:400;opacity:.6}
.enq input,.enq select,.enq textarea{
  font-family:var(--body);font-size:.95rem;font-weight:400;color:var(--platinum);
  background:rgba(8,9,12,.6);
  border:1px solid var(--slate);border-radius:0;
  padding:.85rem 1rem;width:100%;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.enq textarea{resize:vertical;min-height:7.5rem;line-height:1.6}
.enq input::placeholder,.enq textarea::placeholder{color:#5C626E}
.enq input:hover,.enq select:hover,.enq textarea:hover{border-color:#333A47}
.enq input:focus,.enq select:focus,.enq textarea:focus{
  outline:none;border-color:var(--ember);background:rgba(8,9,12,.85);
}
/* native select arrow, drawn to match rather than left to the OS */
.enq select{
  appearance:none;-webkit-appearance:none;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A909C' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
}
.enq select option{background:var(--carbon);color:var(--platinum)}
/* invalid only once they've tried, never while they're still typing */
.enq input.is-invalid,.enq textarea.is-invalid{border-color:var(--ember-deep)}
.enq__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.enq__submit{margin-top:2rem;width:100%;justify-content:center}
.enq__status{
  margin-top:1rem;font-size:.85rem;line-height:1.6;color:var(--silver);min-height:1.2em;
}
.enq__status.is-error{color:var(--ember)}

@media(max-width:980px){
  .contact__grid{grid-template-columns:1fr;gap:3rem}
  .contact__intro>p{max-width:none}
}
@media(max-width:560px){
  .enq__row{grid-template-columns:1fr;gap:1.4rem}
  .enq__row+.enq__field,.enq__row+.enq__row{margin-top:1.4rem}
}
@media(max-width:760px){
  /* let it wrap naturally on phones so nothing clips off the edge */
  .contact__title{white-space:normal;font-size:clamp(2rem,8vw,3rem)}
}

/* =========================================================
   404
   ========================================================= */
.nf{
  min-height:78vh;min-height:78svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(120px,20vh,220px) var(--gutter) clamp(80px,12vh,140px);
  max-width:var(--maxw);margin:0 auto;
}
.nf__title{
  font-family:var(--disp);font-stretch:125%;font-weight:800;text-transform:uppercase;
  font-size:clamp(2.4rem,7vw,6rem);line-height:.94;letter-spacing:-.01em;
  margin:1.2rem 0 1.8rem;
}
.nf__lead{color:#C8CCD4;font-weight:300;max-width:46ch;margin-bottom:2.6rem}
.nf__actions{display:flex;gap:1rem;flex-wrap:wrap}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{border-top:1px solid var(--slate);padding:clamp(3rem,6vh,5rem) var(--gutter) 2rem}
.foot__top{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1.5rem;padding-bottom:3rem;border-bottom:1px solid var(--slate)}
.foot__brand{font-size:1.5rem;letter-spacing:.14em}
.foot__nav{display:flex;gap:2rem;flex-wrap:wrap}
.foot__nav a{transition:color .3s}
.foot__nav a:hover{color:var(--ember)}
.foot__bottom{display:flex;justify-content:space-between;align-items:center;
  padding-top:1.6rem;flex-wrap:wrap;gap:.6rem}
.foot__bottom span{font-size:.74rem;letter-spacing:.16em;color:var(--silver);text-transform:uppercase}

/* --- the studio credit, third child of the bottom bar ---------------------
   Component CSS is pasted verbatim at the end of this file - do not edit it
   there. This is the site-side fit. The `.foot__bottom span` rule above
   already hands the credit this bar's size, tracking, caps and colour
   (11.84px Hanken Grotesk / 1.89px / uppercase / --silver), so the only two
   things left over are the weight and the line box: the component sets its
   own 1.25 for the mark alignment, and .foot__tag - the sibling it sits
   beside - is 500/1.6. The copyright span at the other end is 400; matching
   the tag is the deliberate call, since those two read as a pair. */
.foot__bottom .srs-credit{font-weight:500;line-height:1.6}

/* --- SOCIAL ICONS (.soc) --------------------------------------------------
   One block, three homes: the top bar, the mobile drawer and the footer.
   The platforms' OWN brand colours, at the client's request (2026-08-28) -
   see DESIGN.md section 2.1, which carves this out as the one sanctioned
   exception to the single-accent rule. Instagram is a real gradient painted
   on the stroke (each copy in a page needs its own `ig-*` id or they collide).
   Facebook and LinkedIn are lifted off their true brand hues: #1877F2 and
   #0A66C2 go muddy at a 1.6px stroke on a near-black ground, so they are
   raised in lightness only, hue held.
   Lucide glyphs (MIT), inlined - no icon-font request.
   44px hit area is the tap target; the 18px glyph is what you see. */
.soc{display:flex;align-items:center;gap:.25rem}
/* hairline separating the icons from whatever sits before them */
.soc--rule::before{content:"";width:1px;height:18px;background:var(--slate);
  margin-right:1.1rem;flex:none}
.soc a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;opacity:.9;
  transition:opacity .3s var(--ease,ease),transform .3s var(--ease,ease)}
/* MUST stay. `hidden` is only display:none in the UA stylesheet, and the rule
   above beats it on specificity - without this a hidden icon still lays out as
   a 44px gap in the row. */
.soc a[hidden]{display:none}
.soc svg{width:18px;height:18px;display:block;overflow:visible}
.soc__fb{color:#3B8CF5}
.soc__li{color:#3D8FD4}
/* Colour is the identity now, so hover lifts and brightens rather than
   recolouring. Opacity + translate only: both composite, neither repaints. */
.soc a:hover,.soc a:focus-visible{opacity:1}
/* translate, not scale - a scaled stroke re-rasters mid-transition and steps */
.soc a:hover{transform:translateY(-2px)}
.soc a:focus-visible{outline:1px solid currentColor;outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.soc a{transition:opacity .3s}
  .soc a:hover{transform:none}}

/* top bar: nav and icons ride together on the right so the bar stays a
   two-child flex and `space-between` keeps doing the work */
.bar__right{display:flex;align-items:center;gap:1.5rem}
.soc--bar{margin-right:-10px}

/* mobile drawer: the icons close the list, a touch below it */
.soc--drawer{margin-top:.8rem;gap:.6rem}
.soc--drawer a{width:48px;height:48px}
.soc--drawer svg{width:22px;height:22px}

.soc--foot{margin-left:.5rem}
@media (max-width:700px){
  /* stacked footer: the divider reads as a stray mark once the icons wrap */
  .soc--foot{margin-left:-10px}
  .soc--foot::before{display:none}
}
/* the bar icons go with the bar nav - the drawer carries them below 900px */
@media (max-width:900px){
  .soc--bar{display:none}
}


/* =========================================================
   THE SHOWROOM  (real-photo viewer)
   ========================================================= */
.showroom{max-width:var(--maxw);margin:0 auto;padding:clamp(60px,12vh,150px) var(--gutter)}
.showroom__head{max-width:780px;margin-bottom:clamp(2.2rem,5vh,3.6rem)}
.showroom__intro{margin-top:1.6rem;color:var(--silver);font-weight:300;max-width:54ch}
.showroom__stage-wrap{
  display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(1.5rem,4vw,4rem);align-items:stretch;
}

/* stage */
.showroom__stage{
  position:relative;min-height:clamp(440px,64vh,700px);
  border:1px solid var(--slate);overflow:hidden;
  background:radial-gradient(120% 100% at 50% 16%,#15171d 0%,#0c0d11 50%,#08090c 100%);
  perspective:1400px;
}
.sh-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transform:scale(1.045);
  transition:opacity .9s var(--ease),transform .55s var(--ease);
  will-change:opacity,transform;
}
.sh-img.is-active{opacity:1}
.sh-grain{
  position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:overlay;opacity:.5;
  background:radial-gradient(130% 90% at 50% 22%,transparent 52%,rgba(8,9,12,.72) 100%);
}
.sh-stage-meta{
  position:absolute;left:0;bottom:0;z-index:4;padding:1.3rem 1.5rem;
  display:flex;flex-direction:column;gap:.3rem;pointer-events:none;
}
.sh-cwname{
  font-family:var(--disp);font-stretch:125%;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1;letter-spacing:.02em;
}
.sh-viewname{
  font-family:var(--body);text-transform:uppercase;letter-spacing:.22em;font-size:.64rem;
  font-weight:600;color:var(--ember);
}
.sh-hint{
  position:absolute;right:1.4rem;top:1.3rem;z-index:4;
  font-family:var(--body);text-transform:uppercase;letter-spacing:.22em;font-size:.6rem;
  color:var(--silver);opacity:.6;pointer-events:none;transition:opacity .5s var(--ease);
}
.showroom__stage.peeking .sh-hint{opacity:0}

/* panel */
.showroom__panel{display:flex;flex-direction:column;gap:clamp(1.6rem,3.2vh,2.6rem);justify-content:center}
.sh-group{display:flex;flex-direction:column;gap:1.05rem}
.sh-label{
  font-family:var(--body);text-transform:uppercase;letter-spacing:.22em;font-size:.66rem;
  font-weight:500;color:var(--silver);
}
.sh-swatches{display:flex;gap:.95rem;flex-wrap:wrap}
.sh-sw{
  position:relative;width:46px;height:46px;border-radius:50%;
  background:#222 center/150% no-repeat;
  border:1px solid var(--slate);cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.5);
  transition:transform .35s var(--ease);
}
.sh-sw::after{content:"";position:absolute;inset:-5px;border:1px solid transparent;border-radius:50%;transition:border-color .35s var(--ease)}
.sh-sw:hover{transform:translateY(-2px)}
.sh-sw.is-active{transform:translateY(-2px)}
.sh-sw.is-active::after{border-color:var(--ember)}
.sh-sw span{position:absolute;left:50%;bottom:-1.45rem;transform:translateX(-50%);
  font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver);
  opacity:0;transition:opacity .3s;white-space:nowrap;pointer-events:none}
.sh-sw:hover span,.sh-sw.is-active span{opacity:1}

.sh-views{display:flex;gap:.6rem;flex-wrap:wrap}
.sh-vbtn{
  font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.13em;font-size:.66rem;
  padding:.82rem 1.05rem;border:1px solid var(--slate);background:transparent;color:var(--platinum);
  cursor:pointer;transition:all .3s var(--ease);
}
.sh-vbtn:hover{border-color:var(--ember);color:var(--ember)}
.sh-vbtn.is-active{background:var(--ember);color:#0a0a0a;border-color:var(--ember)}

.sh-specs{list-style:none;border-top:1px solid var(--slate);padding-top:1.2rem}
.sh-specs li{
  display:flex;justify-content:space-between;gap:1rem;padding:.62rem 0;
  border-bottom:1px solid rgba(34,39,50,.5);font-size:.92rem;color:var(--platinum);font-weight:300;
}
.sh-specs li span{color:var(--silver);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;font-weight:500;align-self:center}
.sh-specs li em{font-style:normal;color:var(--platinum)}

@media(max-width:860px){
  .showroom__stage-wrap{grid-template-columns:1fr;gap:1.8rem}
  .showroom__stage{min-height:62vh}
}
/* mobile: keep all six colourway swatches on ONE row (Ember must not wrap) */
@media(max-width:560px){
  .sh-swatches{flex-wrap:nowrap;gap:.6rem;justify-content:space-between}
  .sh-sw{flex:1 1 0;width:auto;height:auto;max-width:46px;aspect-ratio:1}
  .sh-sw span{bottom:-1.3rem;font-size:.52rem;letter-spacing:.1em}
  /* keep all four VIEW buttons (Front / Crown / The Mark / Profile) on ONE row */
  .sh-views{flex-wrap:nowrap;gap:.4rem}
  .sh-vbtn{flex:1 1 0;padding:.72rem .3rem;font-size:.56rem;letter-spacing:.08em;text-align:center;white-space:nowrap}
}

/* =========================================================
   RECLAIMED — ocean-plastic scroll film (big-photo, HUEY-style)
   ========================================================= */
.ocean{position:relative;height:420vh;background:var(--obsidian)}
.ocean__pin{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--obsidian)}

/* the panning train of full-bleed pictures */
.ocean__train{position:absolute;inset:0;z-index:0;display:flex;width:400%;will-change:transform}
.oc-panel{position:relative;flex:0 0 25%;height:100%;overflow:hidden}
.oc-panel__media{position:absolute;inset:0}
.oc-panel__media img{width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.0);filter:brightness(.94) contrast(1.03)}
/* cold stages sit darker; the final cap blooms from cold grey into ember colour */
.oc-panel--now{--now:0}
.oc-panel--now .oc-panel__media img{
  filter:grayscale(calc(1 - var(--now))) brightness(calc(.6 + .42*var(--now)))
    contrast(1.05) saturate(calc(.45 + .85*var(--now)))}
.oc-glow{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--now);
  background:radial-gradient(58% 62% at 60% 50%,rgba(255,78,22,.34),transparent 66%)}

/* left→dark + bottom scrim so the text column and chart read over the cinema */
.ocean__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,9,12,.95) 0%,rgba(8,9,12,.74) 25%,rgba(8,9,12,.34) 52%,rgba(8,9,12,.06) 76%,transparent 100%),
    linear-gradient(0deg,rgba(8,9,12,.92) 0%,rgba(8,9,12,.28) 22%,transparent 44%),
    linear-gradient(180deg,rgba(8,9,12,.6) 0%,transparent 24%)}

/* the plastic stream flowing across the screen (into the cap) */
.ocean__flow{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.4;
  mix-blend-mode:screen;transition:opacity .25s linear}
.oc-fleck{position:absolute;top:var(--y);left:-8%;
  width:var(--s);height:calc(var(--s) * .46);border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(214,222,236,var(--o)));
  animation:ocDrift var(--d) linear var(--delay) infinite}
@keyframes ocDrift{
  0%{transform:translate3d(0,0,0) rotate(var(--r));opacity:0}
  9%{opacity:1}
  88%{opacity:1}
  100%{transform:translate3d(120vw,var(--bob),0) rotate(calc(var(--r) + 44deg));opacity:0}}

/* plastic pouring INTO the cap on the final stage — streaks retract to the cap point */
.oc-intake{position:absolute;top:50%;left:60%;z-index:3;width:0;height:0;
  transform:translate(-50%,-50%);opacity:var(--now);pointer-events:none}
.oc-intake i{--a:0deg;position:absolute;right:0;top:0;height:1.5px;width:40vw;transform-origin:right center;
  background:linear-gradient(90deg,transparent 0%,transparent 40%,rgba(236,238,242,.55) 78%,rgba(255,78,22,.85) 100%);
  transform:rotate(var(--a)) scaleX(1);animation:ocPour 1.9s cubic-bezier(.5,0,.85,.35) infinite}
.oc-intake i:nth-child(1){--a:186deg;animation-delay:0s}
.oc-intake i:nth-child(2){--a:205deg;animation-delay:.28s}
.oc-intake i:nth-child(3){--a:224deg;animation-delay:.55s}
.oc-intake i:nth-child(4){--a:150deg;animation-delay:.82s}
.oc-intake i:nth-child(5){--a:168deg;animation-delay:1.1s}
.oc-intake i:nth-child(6){--a:242deg;animation-delay:1.4s}
@keyframes ocPour{
  0%{transform:rotate(var(--a)) scaleX(1);opacity:0}
  22%{opacity:.9}
  100%{transform:rotate(var(--a)) scaleX(.02);opacity:0}}

/* persistent eyebrow + stage counter */
.ocean__head{position:absolute;top:clamp(84px,13vh,128px);left:var(--gutter);z-index:4;
  display:flex;align-items:baseline;gap:1.3rem}
.ember-idx{color:var(--ember);letter-spacing:.18em;font-weight:600;text-transform:uppercase;font-size:.7rem}
.ocean__count{font-family:var(--body);font-weight:500;letter-spacing:.24em;font-size:.7rem;color:var(--silver)}
.ocean__count i{font-style:normal;opacity:.5}

/* crossfading stage captions — the changing big type */
.ocean__caps{position:absolute;left:var(--gutter);bottom:clamp(88px,16vh,150px);z-index:4;
  max-width:min(560px,60vw);min-height:17rem}
.oc-cap{position:absolute;left:0;bottom:0;display:flex;flex-direction:column;gap:.95rem;
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.oc-cap.is-active{opacity:1;transform:none}
.oc-idx{font-family:var(--body);font-weight:600;letter-spacing:.32em;font-size:.7rem;color:var(--silver)}
.oc-idx.ember{color:var(--ember)}
.oc-title{font-family:var(--disp);font-stretch:125%;font-weight:800;text-transform:uppercase;
  font-size:clamp(2.6rem,7.4vw,5.6rem);line-height:.9;letter-spacing:.01em;white-space:nowrap}
.oc-line{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.56;color:#C8CCD4;font-weight:300;max-width:40ch}
.oc-src{font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  font-size:.58rem;color:var(--silver);opacity:.62}

/* flowing chart */
.ocean__chart{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(40px,7vh,64px);z-index:4;height:44px}
.oc-track{position:absolute;left:0;right:0;top:10px;height:1px;background:var(--slate)}
.oc-fill{position:absolute;left:0;top:10px;height:1px;width:100%;background:var(--ember);
  transform:scaleX(0);transform-origin:left;box-shadow:0 0 10px rgba(255,78,22,.5)}
.oc-headnode{position:absolute;top:10px;left:0;width:9px;height:9px;border-radius:50%;background:var(--ember);
  transform:translate(-50%,-50%);box-shadow:0 0 14px 2px rgba(255,78,22,.6)}
.oc-node{position:absolute;top:10px;transform:translate(-50%,-50%)}
.oc-node i{display:block;width:6px;height:6px;border-radius:50%;background:var(--slate);
  transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.oc-node b{position:absolute;top:14px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--body);font-weight:500;font-size:.6rem;letter-spacing:.18em;color:var(--silver);
  transition:color .35s var(--ease)}
.oc-node.is-active i{background:var(--ember);box-shadow:0 0 10px 1px rgba(255,78,22,.55)}
.oc-node.is-active b{color:var(--platinum)}

/* reduced-motion / no-JS static legend */
.ocean.is-static{height:auto}
.ocean.is-static .ocean__pin{position:static;height:auto;overflow:visible;padding:clamp(60px,10vh,120px) 0}
.ocean.is-static .ocean__train{position:static;flex-direction:column;width:auto;transform:none!important}
.ocean.is-static .oc-panel{flex:none;height:64vh}
.ocean.is-static .oc-panel--now{--now:1}
.ocean.is-static .ocean__flow,.ocean.is-static .oc-intake{display:none}
.ocean.is-static .ocean__scrim{background:linear-gradient(0deg,rgba(8,9,12,.86),transparent 42%)}
.ocean.is-static .ocean__head{position:static;padding:0 var(--gutter);margin-bottom:1.6rem}
.ocean.is-static .ocean__caps{position:static;max-width:none;min-height:0;padding:2.2rem var(--gutter) 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2rem}
.ocean.is-static .oc-cap{position:static;opacity:1;transform:none}
.ocean.is-static .oc-title{font-size:clamp(1.7rem,4vw,2.5rem)}
.ocean.is-static .ocean__chart{display:none}

@media(max-width:720px){
  .ocean{height:360vh}
  /* Legibility (2026-07-14): on phones the caption landed over the busy mid-tone
     stills (pellets, shore) with only the desktop left-scrim behind it, so the copy
     was hard to read. Give the lower half a strong bottom-up wash so every stage
     caption reads cleanly regardless of the photo behind it. */
  .ocean__scrim{background:
    linear-gradient(0deg,rgba(8,9,12,.96) 0%,rgba(8,9,12,.88) 30%,rgba(8,9,12,.52) 54%,rgba(8,9,12,.12) 76%,transparent 100%),
    linear-gradient(90deg,rgba(8,9,12,.55) 0%,transparent 62%)}
  /* give the caption a definite width so the big stage title WRAPS instead of
     shrink-wrapping to content and bleeding off the right edge on mobile */
  .ocean__caps{left:var(--gutter);right:var(--gutter);max-width:none;min-height:15rem;
    bottom:clamp(92px,15vh,150px)}
  .oc-cap{width:100%}
  /* let the two-word stage titles wrap on mobile instead of bleeding off-screen */
  .oc-title{font-size:clamp(2.4rem,11vw,3.6rem);white-space:normal}
  .oc-line{font-size:.95rem;max-width:100%}
  .oc-intake i{width:60vw}
}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* --- v2 scrubbed reveal: motion welded to the scrollbar (no pop-in) ---
   JS adds body.scrub (pointer-fine, motion allowed) and drives --p 0..1 per
   element from its own position in the viewport. Stop scrolling -> it freezes
   exactly there.

   2026-09-04: the blur came out before go-live. It was blur(calc((1 - --p) * 7px)),
   a radius recomputed from a scroll-written custom property, on every revealing
   element at once, with `filter` in will-change. A changing blur radius cannot be
   composited - the layer is re-blurred from scratch every frame - so the whole
   reveal juddered on anything but a fast machine. Opacity and a translate carry
   the reveal on their own, and both are pure compositor work. See
   _websites-shared/SMOOTH-MOTION.md. DESIGN.md only ever specified a fade and a
   rise, so nothing in the brief is lost. */
body.scrub .reveal{
  opacity:calc(.06 + .94 * var(--p, 0));
  transform:translate3d(0, calc((1 - var(--p, 0)) * 46px), 0);
  transition:none;               /* position is now driven by scroll, not time */
  will-change:opacity, transform;
}
body.scrub .reveal.in{transform:translate3d(0, calc((1 - var(--p, 0)) * 46px), 0)}
/* settled elements drop will-change so the compositor can rest */
body.scrub .reveal[data-done]{will-change:auto}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:900px){
  /* nav + social icons leave the bar here, so it loses its tallest child and
     drops from 80px to 57px. Keep --barh honest or the hero reserves too much. */
  :root{--barh:57px}
  .bar__nav{display:none}
  .bar__menu{display:flex}
  .manifesto__cols{grid-template-columns:1fr;gap:1.6rem}
  .manifesto{padding:clamp(90px,16vh,160px) 0}
  .mf-pane{display:none}
  .mf-pane--hero{display:block}
  .manifesto__scrim{background:
    linear-gradient(0deg,rgba(8,9,12,.94) 0%,rgba(8,9,12,.42) 46%,rgba(8,9,12,.62) 100%)}
  .s7brand{padding:clamp(96px,17vh,180px) 0}
  .s7-pane{display:none}
  .s7-pane--hero{display:block;flex:1}
  .s7brand__scrim{background:
    linear-gradient(0deg,rgba(8,9,12,.95) 0%,rgba(8,9,12,.4) 48%,rgba(8,9,12,.72) 100%)}
  .build{padding-bottom:clamp(60px,10vh,120px)}
  .build__head{position:static;max-width:none;left:auto;top:auto;order:-1;
    margin:0 var(--gutter) clamp(1.4rem,3vh,2rem)}
  .build__media{display:flex;flex-direction:column;height:auto;justify-content:flex-start;align-items:stretch}
  .build__media img{position:relative;width:100vw;height:auto;aspect-ratio:16/11}
  .build__scrim{display:none}
  .build__specs{position:static;z-index:auto;width:auto;margin:0 var(--gutter);
    grid-template-columns:repeat(2,1fr);gap:2rem 1.6rem;
    border-left:0;border-top:1px solid var(--slate);
    padding-left:0;padding-top:clamp(1.6rem,3vh,2.4rem);margin-top:clamp(2rem,5vh,3rem)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .work__thumbs{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .stats{grid-template-columns:1fr}
  .work__grid{grid-template-columns:1fr}
  .work__item--wide{grid-column:span 1}
  /* HERO mobile flow (2026-07-14): the hero was bottom-anchored (justify-content:flex-end)
     with no top padding, so on shorter phones the tall wall of copy slid UP under the fixed
     top bar and the eyebrow/title read as "text overlaid on the top". Fixed: the stack now
     flows from just below the bar, and the SCROLL / BUILD NO. 07 foot is pushed to the
     bottom with margin-top:auto so it never collides with the copy. */
  .hero{justify-content:flex-start;
    padding-top:calc(58px + clamp(20px,4.5vh,44px));
    padding-bottom:clamp(26px,6vh,56px)}
  .hero__content{max-width:100%}
  /* 2026-08-27: was clamp(.92rem,3.9vw,1.05rem) - with body copy up to 1.09rem the hero
     sub-line was ending up SMALLER than the paragraphs below it on a phone. */
  .hero__sub{font-size:clamp(1.02rem,4.2vw,1.14rem)}
  .hero__foot{flex-direction:column;align-items:flex-start;gap:1rem;
    margin-top:auto;padding-top:clamp(24px,5vh,48px)}
  .hero__cta .btn{flex:1;justify-content:center}
  .loader__inner{width:min(420px,86vw)}
  .loader__mark{font-size:clamp(2rem,10.5vw,2.8rem);letter-spacing:.05em;line-height:1.02;margin-bottom:1.3rem}
  .loader__meta{font-size:.72rem}
  /* overture: stack the brand line / build-no on a phone, grow the mark */
  .overture__top{flex-direction:column;gap:.6rem}
  .overture__fallback::before{width:min(66vw,300px)}
  .overture__line{letter-spacing:.32em}
  /* hero: give the stack a little more room to breathe on a phone */
  .eyebrow{margin-bottom:1.15rem;font-size:.7rem;letter-spacing:.16em}
  .hero__title{font-size:clamp(2rem,9vw,3.4rem);margin-bottom:1.3rem}
  /* slogan hero H1: floor lowered so the longest nowrap line ("DESIGNED TO BE SEEN.")
     scales down on narrow phones (<=400px) instead of pinning at 20px and overflowing right.
     Verified 0 overflow at 320 / 360 / 390 (2026-07-06). */
  .hero__title--slogan{font-size:clamp(0.9rem,4.8vw,3rem);letter-spacing:-.01em}
  .hero__sub{margin-bottom:1.7rem;line-height:1.6}
  /* top bar: shrink the "SOLID HEADWEAR" wordmark so it + the hamburger fit
     narrow phones (down to 320px) without pushing the page into horizontal scroll. */
  .bar__brand{font-size:clamp(0.95rem,4.3vw,1.3rem);letter-spacing:.10em;min-width:0}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  [data-parallax]{transform:none!important}
  .loader{display:none}
  body.loading{overflow:auto;height:auto}
}

/* =========================================================
   MAIN-PAGE TEASER BANDS  →  the deep-dive write-up page
   Unnumbered (like #range / #reclaimed). Full-bleed cinema,
   terse text column opposite the image (DESIGN §4), one ember
   spec-tag, one ghost CTA into headwear-design.html.
   ========================================================= */
.teaser{
  position:relative;isolation:isolate;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);
  min-height:clamp(440px,66vh,660px);
  display:flex;align-items:center;
  border-top:1px solid var(--slate);
}
.teaser__media{position:absolute;inset:0;z-index:0}
.teaser__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.82) brightness(.5) contrast(1.06);
}
.teaser--warm .teaser__media img{filter:grayscale(.34) brightness(.62) contrast(1.05) saturate(1.06)}
.teaser__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,9,12,.93) 0%,rgba(8,9,12,.76) 38%,rgba(8,9,12,.3) 76%,rgba(8,9,12,.5) 100%),
    linear-gradient(0deg,rgba(8,9,12,.5) 0%,rgba(8,9,12,0) 34%);
}
.teaser--right .teaser__scrim{
  background:
    linear-gradient(270deg,rgba(8,9,12,.93) 0%,rgba(8,9,12,.76) 38%,rgba(8,9,12,.3) 76%,rgba(8,9,12,.5) 100%),
    linear-gradient(0deg,rgba(8,9,12,.5) 0%,rgba(8,9,12,0) 34%);
}
.teaser__inner{
  position:relative;z-index:2;width:100%;
  max-width:var(--maxw);margin:0 auto;padding:clamp(52px,9vh,104px) var(--gutter);
}
.teaser__col{max-width:38ch}
.teaser--right .teaser__col{margin-left:auto;text-align:right}
.teaser__idx{color:var(--silver);margin-bottom:1.5rem}
.teaser--right .teaser__idx{justify-content:flex-end}
.teaser__title{
  font-family:var(--disp);font-stretch:125%;font-weight:800;
  text-transform:uppercase;line-height:.94;letter-spacing:.01em;
  font-size:clamp(2.2rem,5.4vw,4.6rem);margin:0 0 1.3rem;
  text-shadow:0 2px 40px rgba(8,9,12,.72);
}
.teaser__line{
  color:#D2D6DE;font-weight:300;font-size:clamp(1.02rem,1.5vw,1.22rem);
  line-height:1.55;margin-bottom:2.2rem;text-shadow:0 1px 24px rgba(8,9,12,.7);
}
.teaser__cta{gap:.75rem}
.teaser__cta .arw{transition:transform .4s var(--ease)}
.teaser__cta:hover .arw{transform:translateX(5px)}

/* =========================================================
   WRITE-UP PAGE  (headwear-design.html)
   The craft (Headwear Design) + the case (Why headwear),
   one page, stacked. Editorial spec-sheet reading layout.
   ========================================================= */
.wp-hero{
  position:relative;max-width:var(--maxw);margin:0 auto;
  padding:clamp(168px,27vh,340px) var(--gutter) clamp(50px,9vh,110px);
}
/* inline variant — same dramatic type, sane spacing when used mid-section */
.wp-hero--inline{padding:clamp(64px,9vh,120px) var(--gutter) clamp(30px,5vh,60px)}
/* photo variant — cap image sits behind the type as a heavily-dimmed texture (2026-07-11) */
.wp-hero--photo{overflow:hidden}
.wp-hero--photo .wp-hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto}
.wp-hero__bg{
  position:absolute;inset:0;z-index:0;
  background:url("../img/shots/wearable-art-bg-olive.jpg") center right/cover no-repeat;
  transform:scale(1.04);
}
/* obsidian wash: solid enough behind the type on the left, letting the cap read clearly on the right */
.wp-hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,8,11,.9) 0%,rgba(7,8,11,.62) 45%,rgba(7,8,11,.28) 100%),
    radial-gradient(130% 130% at 100% 50%,rgba(7,8,11,0) 0%,rgba(7,8,11,.55) 78%);
}
.wp-hero__title{
  font-family:var(--disp);font-stretch:125%;font-weight:900;
  text-transform:uppercase;line-height:.9;letter-spacing:.01em;
  font-size:clamp(2.2rem,6vw,5rem);margin:.5rem 0 1.7rem;
}
.wp-hero__sub{max-width:46ch;color:#C7CBD3;font-weight:300;font-size:clamp(1.06rem,1.7vw,1.34rem);line-height:1.6}
.wp-chips{display:flex;gap:.9rem;margin-top:2.7rem;flex-wrap:wrap}
.wp-chip{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--body);text-transform:uppercase;letter-spacing:.2em;
  font-size:.7rem;font-weight:500;color:var(--silver);
  border:1px solid var(--slate);padding:.85rem 1.3rem;
  transition:all .35s var(--ease);
}
.wp-chip:hover{border-color:var(--ember);color:var(--ember);transform:translateY(-2px)}
.wp-chip i{width:5px;height:5px;background:var(--ember);border-radius:1px;display:inline-block}

.wp-section{max-width:var(--maxw);margin:0 auto;padding:clamp(34px,5vh,68px) var(--gutter)}
.wp-section+.wp-section{border-top:1px solid var(--slate)}
.wp-section__head{margin-bottom:clamp(1.3rem,3vh,2.2rem)}
.wp-kicker{color:var(--silver);margin-bottom:1.6rem}
.wp-title{font-family:var(--disp);font-stretch:125%;font-weight:800;
  text-transform:uppercase;line-height:.92;letter-spacing:.01em;
  font-size:clamp(2.2rem,6vw,5rem);margin-top:.5rem}
.wp-quote{font-family:var(--disp);font-stretch:125%;font-weight:500;
  font-size:clamp(1.1rem,2vw,1.6rem);color:var(--silver);
  letter-spacing:.02em;margin-top:1.5rem;max-width:24ch}

/* asymmetric reading grid: quiet aside left, prose right (DESIGN §4) */
.wp-cols{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.65fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.wp-aside{position:sticky;top:110px}
.wp-lede{font-family:var(--disp);font-stretch:125%;font-weight:700;
  font-size:clamp(1.35rem,2.4vw,2.1rem);line-height:1.1;letter-spacing:0;
  text-transform:uppercase;color:var(--platinum)}
.wp-aside .wp-note{margin-top:1.4rem;color:var(--silver);font-weight:300;font-size:.98rem;line-height:1.6;text-transform:none;letter-spacing:0}
.wp-body{max-width:64ch}
.wp-body p{color:#C7CBD3;font-weight:300;font-size:1.07rem;line-height:1.72;margin-bottom:1.35rem}
.wp-body p:last-child{margin-bottom:0}
.wp-body strong{color:var(--platinum);font-weight:600}
.wp-h3{font-family:var(--body);text-transform:uppercase;letter-spacing:.16em;
  font-size:.82rem;font-weight:600;color:var(--platinum);
  margin:2.6rem 0 1.2rem;padding-left:1rem;position:relative}
.wp-h3::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:2px;background:var(--ember)}
.wp-spec{list-style:none;margin:1.4rem 0;border-top:1px solid var(--slate)}
.wp-spec li{
  display:flex;gap:1rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--slate);
  color:#C7CBD3;font-weight:300;
}
.wp-spec li span:first-child{
  flex:none;font-family:var(--body);font-variant-numeric:tabular-nums;
  color:var(--ember);font-size:.78rem;font-weight:600;letter-spacing:.1em;
  min-width:2.4rem;padding-top:.2rem;
}
.wp-spec li span:last-child{font-size:1.02rem}
.wp-spec li b{color:var(--platinum);font-weight:600}

/* full-bleed banner break between / within chapters */
.wp-banner{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  height:clamp(360px,58vh,620px);overflow:hidden;isolation:isolate;
  border-top:1px solid var(--slate);border-bottom:1px solid var(--slate)}
.wp-banner img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) brightness(.62) contrast(1.05) saturate(1.05)}
.wp-banner__scrim{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(8,9,12,.72) 0%,rgba(8,9,12,.12) 46%,rgba(8,9,12,.5) 100%)}
.wp-banner__cap{position:absolute;left:0;bottom:0;padding:clamp(1.6rem,4vh,2.6rem) var(--gutter);
  z-index:2;max-width:var(--maxw);color:var(--silver)}
.wp-banner__cap b{display:block;color:var(--platinum);font-family:var(--disp);font-stretch:125%;
  font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,3vw,2.2rem);line-height:1;letter-spacing:.01em;margin-top:.5rem}

/* ---- full-bleed craft banner (image behind, all copy over the top) ---- */
.wpe{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  min-height:clamp(560px,90vh,860px);overflow:hidden;isolation:isolate;
  background:#000;display:flex;align-items:center;
  border-top:1px solid var(--slate);border-bottom:1px solid var(--slate)}
.wpe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:grayscale(.08) brightness(1.28) contrast(1.03) saturate(1.12);z-index:0}
.wpe__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,9,12,.94) 0%,rgba(8,9,12,.86) 30%,rgba(8,9,12,.5) 58%,rgba(8,9,12,.2) 82%,rgba(8,9,12,.35) 100%),
    linear-gradient(0deg,rgba(8,9,12,.7) 0%,rgba(8,9,12,0) 34%)}
.wpe__scrim::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 180px 20px rgba(8,9,12,.4)}
.wpe__corner{position:absolute;z-index:3;font-family:var(--body);font-size:.64rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--silver)}
.wpe__corner--tl{top:22px;left:var(--gutter)}
.wpe__corner--tr{top:22px;right:var(--gutter);color:var(--ember)}
.wpe__corner--br{bottom:20px;right:var(--gutter)}
.wpe__corner i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ember);margin-right:.55rem;vertical-align:middle}
.wpe__lock{position:relative;z-index:2;max-width:840px;padding:0 var(--gutter);margin-left:min(4vw,60px)}
.wpe__lock p.wpe__idx{display:flex;align-items:center;gap:.8rem;font-family:var(--body);font-weight:600;
  letter-spacing:.3em;font-size:.7rem;text-transform:uppercase;color:var(--ember);margin:0 0 1.6rem;text-shadow:none}
.wpe__lock p.wpe__idx span{color:var(--silver)}
.wpe__lock p.wpe__idx i{width:30px;height:1px;background:var(--ember);flex:none;border-radius:0}
.wpe__title{font-family:var(--disp);font-stretch:125%;font-weight:900;text-transform:uppercase;
  line-height:1.02;letter-spacing:.01em;font-size:clamp(1.85rem,3.9vw,3.3rem);margin:0;color:var(--platinum);max-width:30ch}
.wpe__title .ember{color:var(--ember)}
.wpe__rule{width:70px;height:2px;background:var(--ember);margin:1.7rem 0}
/* 2026-08-27: body copy unified across the site at 1.09rem / weight 400 (was 1.02rem / 300).
   max-width pulled 52ch -> 48ch because ch scales with font-size - without it the column
   grows with the type and the copy runs onto the cap photograph. 48ch holds it at ~474px. */
.wpe__lock p{margin:0 0 1.05rem;color:#cfd3da;font-weight:400;line-height:1.64;font-size:1.09rem;
  max-width:48ch;text-shadow:0 1px 20px rgba(8,9,12,.55)}
.wpe__lock p:last-child{margin-bottom:0}
.wpe__lock p.wpe__lead{color:var(--platinum);font-weight:500;font-size:1.1rem}
@media(max-width:820px){
  .wpe{min-height:clamp(600px,94vh,860px);align-items:flex-end;padding:9vh 0}
  .wpe__scrim{background:linear-gradient(0deg,rgba(8,9,12,.95) 0%,rgba(8,9,12,.82) 42%,rgba(8,9,12,.35) 72%,rgba(8,9,12,.5) 100%)}
  .wpe__lock{margin-left:0}
  .wpe__lock p{font-size:1.04rem;max-width:100%}
}
/* product variant: WHOLE cap as a big full-bleed background (client likes big images).
   uses a pre-cropped cap image (caps-gf-band, dead ground trimmed); band aspect matches the
   image so cover shows the whole hat with minimal space top/bottom. text lock stays LEFT. */
.wpe--product{aspect-ratio:1254/834;min-height:0;align-items:flex-start;padding-top:88px}
.wpe--product img{inset:0;width:100%;height:100%;top:auto;bottom:auto;left:auto;right:auto;
  object-fit:cover;object-position:center 50%;transform:scale(.9) translateX(6%);transform-origin:center;
  filter:brightness(1.04) contrast(1.04) saturate(1.08)}
.wpe--product .wpe__scrim{background:
  linear-gradient(90deg,rgba(8,9,12,.95) 0%,rgba(8,9,12,.86) 26%,rgba(8,9,12,.5) 50%,rgba(8,9,12,.22) 74%,rgba(8,9,12,.4) 100%),
  linear-gradient(0deg,rgba(8,9,12,.72) 0%,rgba(8,9,12,0) 30%)}
@media(max-width:820px){
  .wpe--product{aspect-ratio:auto;min-height:min(122vw,720px)}
  .wpe--product img{object-fit:contain;object-position:center 30%}
  .wpe--product .wpe__scrim{background:linear-gradient(0deg,rgba(8,9,12,.96) 0%,rgba(8,9,12,.84) 42%,rgba(8,9,12,.28) 66%,rgba(8,9,12,.55) 100%)}
}

/* custom variant: full-bleed Canada cap background, text lock on the RIGHT (alternates the
   product band), spec list restyled as clean technical lettering (no divider lines). */
/* ---- THE BUILD MAP: interactive annotated technical plate ---- */
.bmap{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  background:var(--carbon);border-top:1px solid var(--slate);border-bottom:1px solid var(--slate);
  padding:clamp(2.4rem,6vh,4.4rem) 0}
.bmap__grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4.4rem);align-items:center}
.bmap__corner{position:absolute;z-index:4;top:20px;font-family:var(--body);font-size:.64rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--silver)}
.bmap__corner--tl{left:var(--gutter)}
.bmap__corner--tr{right:var(--gutter);color:var(--ember)}

/* the annotated stage - aspect locked to the source so pins stay on anatomy */
.bmap__stage{position:relative;aspect-ratio:1197/788;border:1px solid var(--slate);
  background:#000;overflow:hidden;isolation:isolate;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9),inset 0 0 120px 10px rgba(8,9,12,.5)}
.bmap__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.16) contrast(1.05) saturate(1.05);z-index:0}
.bmap__mesh{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(138,144,156,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(138,144,156,.09) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(120% 120% at 50% 45%,#000 40%,transparent 78%)}
.bmap__stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 140px 16px rgba(8,9,12,.55)}

/* pins */
.bmap__pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  z-index:3;width:26px;height:26px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(236,238,242,.5);background:rgba(8,9,12,.42);backdrop-filter:blur(2px);
  color:var(--platinum);font-family:var(--disp);font-stretch:125%;font-weight:800;font-size:.6rem;
  display:flex;align-items:center;justify-content:center;letter-spacing:.02em;
  transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s,box-shadow .3s}
.bmap__pin b{position:relative;z-index:2;line-height:1}
.bmap__pin::before{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(255,78,22,0);transition:border-color .3s,transform .3s}
.bmap__pin:hover,.bmap__pin.is-active,.bmap__pin:focus-visible{
  background:var(--ember);border-color:var(--ember);color:#000;outline:none;
  transform:translate(-50%,-50%) scale(1.16);box-shadow:0 0 22px 2px rgba(255,78,22,.55)}
.bmap__pin.is-active::before,.bmap__pin:hover::before{border-color:rgba(255,78,22,.5);transform:scale(1.15)}
/* flag callout */
.bmap__flag{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(-6px);
  white-space:nowrap;background:rgba(8,9,12,.92);border:1px solid var(--ember);
  color:var(--platinum);font-family:var(--body);font-stretch:normal;font-weight:500;
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:.4rem .6rem;
  border-radius:2px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:5}
.bmap__pin.is-active .bmap__flag,.bmap__pin:hover .bmap__flag{opacity:1;transform:translateY(-50%) translateX(0)}
/* flags near the right edge open leftwards */
.bmap__pin[data-i="1"] .bmap__flag,.bmap__pin[data-i="3"] .bmap__flag,.bmap__pin[data-i="8"] .bmap__flag{
  left:auto;right:calc(100% + 12px);transform:translateY(-50%) translateX(6px)}
.bmap__pin[data-i="1"].is-active .bmap__flag,.bmap__pin[data-i="1"]:hover .bmap__flag,
.bmap__pin[data-i="3"].is-active .bmap__flag,.bmap__pin[data-i="3"]:hover .bmap__flag,
.bmap__pin[data-i="8"].is-active .bmap__flag,.bmap__pin[data-i="8"]:hover .bmap__flag{transform:translateY(-50%) translateX(0)}

/* copy column */
.bmap__lock{max-width:520px}
.bmap__lock .wpe__title{margin:0}
.bmap__lock .wpe__rule{margin:1.1rem 0 1.2rem}
.bmap__lock .wpe__lead{color:var(--platinum);font-weight:500;font-size:1.08rem;margin:0 0 .9rem}
.bmap__body{color:#cfd3da;font-weight:300;line-height:1.62;font-size:.98rem;margin:0 0 1.5rem}
/* interactive index */
.bmap__index{list-style:none;margin:0;padding:0;border-top:1px solid var(--slate);
  display:grid;grid-template-columns:1fr 1fr;gap:0 1.6rem}
.bmap__index li{display:flex;align-items:baseline;gap:.7rem;padding:.62rem .2rem;
  border-bottom:1px solid rgba(34,39,50,.55);cursor:pointer;color:#cdd1d8;
  transition:color .25s,padding-left .25s,background .25s}
.bmap__index .bmap__n{color:var(--silver);font-size:.7rem;letter-spacing:.14em;min-width:1.9rem;
  font-variant-numeric:tabular-nums;transition:color .25s}
.bmap__index li span:last-child{font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;
  font-weight:400;line-height:1.3}
.bmap__index li:hover,.bmap__index li.is-active{color:var(--platinum);padding-left:.7rem;
  background:linear-gradient(90deg,rgba(255,78,22,.08),transparent)}
.bmap__index li:hover .bmap__n,.bmap__index li.is-active .bmap__n{color:var(--ember)}

@media(max-width:900px){
  .bmap__grid{grid-template-columns:1fr;gap:1.8rem}
  .bmap__lock{max-width:100%}
  .bmap__stage{order:-1}
  .bmap__pin .bmap__flag{display:none}
}
@media(max-width:560px){
  .bmap__index{grid-template-columns:1fr}
  .bmap__pin{width:22px;height:22px;font-size:.54rem}
}
@media(prefers-reduced-motion:reduce){
  .bmap__pin,.bmap__index li,.bmap__flag{transition:none}
}

/* ---- image-forward blocks (mirrors client's photo-led Headwear page) ---- */
/* framed product figure with an ember spec caption */
.wp-figure{position:relative;border:1px solid var(--slate);background:var(--carbon);overflow:hidden}
.wp-figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px 8px rgba(8,9,12,.55)}
.wp-figure img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.02) brightness(.96)}
.wp-figure figcaption{position:absolute;left:0;bottom:0;z-index:2;width:100%;
  display:flex;align-items:center;gap:.6rem;padding:.85rem 1.05rem;
  background:linear-gradient(0deg,rgba(8,9,12,.9) 0%,rgba(8,9,12,0) 100%);
  color:var(--silver);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.wp-figure figcaption i{width:5px;height:5px;background:var(--ember);border-radius:1px;flex:none}
.wp-figure figcaption b{color:var(--platinum);font-weight:600}
/* clean/floating figure: no frame, no box, transparent PNG sits on the page */
.wp-figure--clean{border:0;background:transparent;overflow:visible}
.wp-figure--clean::after{display:none}
.wp-figure--clean img{object-fit:contain;filter:drop-shadow(0 30px 50px rgba(0,0,0,.55))}
.wp-figure--clean.wp-split__media{aspect-ratio:auto;align-self:center}
/* frameless: studio image fills the frame but no visible border/box edge */
.wp-figure--bare{border:0;background:transparent}
.wp-figure--bare::after{display:none}
/* About — Products Worth Wearing: two stacked images + closing tagline */
.about__stack{display:grid;gap:clamp(0.9rem,2vh,1.5rem);align-self:stretch}
.about__stack .wp-figure{aspect-ratio:4/3}
/* Changes 2 p10: pin the About text to the top so the heading->body gap closes */
#about .wp-split{align-items:start}
#about .wp-section__head{margin-bottom:clamp(0.7rem,1.6vh,1.2rem)}
.about__tag{margin-top:1.2rem;color:var(--platinum);font-family:var(--disp);font-stretch:125%;text-transform:uppercase;letter-spacing:.02em}
/* ===== cap feature panels: sticky stack, each panel slides up over the last =====
   History, because this has been switched twice:
   2026-08-11 changed from sticky to relative, on the grounds that the panels
   "froze the page". The freeze was actually a separate scroll-jack (holdScroll
   in the inline callout script), which is now dead code and never called.
   2026-08-20 sticky restored at Fergus's request: the point of the stack is
   that the F1 band and the trucker panel ride up over the panel before them.
   With the scroll-jack gone the page never stops moving, it just layers. */
.capstack{position:relative}
.capstack > .capfeature,.capstack > .fullband{position:sticky;top:0;height:100vh;min-height:0;overflow:hidden}
/* cap image fills the full panel (no letterbox bars) */
.capstack > .capfeature .capfeature__img{position:absolute;inset:0;height:100%;object-fit:cover}
.capstack > .fullband{height:100vh}
.capstack > .fullband img{height:100%}
@media(max-width:768px){
  .capstack > .capfeature,.capstack > .fullband{position:relative;top:auto;height:auto}
  .capstack > .capfeature .capfeature__img{position:relative;top:auto;bottom:auto;height:60vh}
  .capstack > .fullband{height:auto}
  .capstack > .fullband img{height:44vh}
}
/* ===== annotated cap feature (More Than Just A Cap / Trucker) ===== */
.capfeature{position:relative;width:100%;min-height:clamp(600px,94vh,980px);overflow:hidden;background:#0a0b0e;display:block}
.capfeature__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.capfeature__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(8,9,12,.5) 0%,rgba(8,9,12,.12) 28%,transparent 52%,rgba(8,9,12,.12) 74%,rgba(8,9,12,.5) 100%),linear-gradient(0deg,rgba(8,9,12,.42) 0%,transparent 34%)}
/* Client-requested: lift the cap so it reads bright like the original, keeping the obsidian base.
   Exposure is raised on the photo itself and the scrim is eased off the cap (edges/title only). */
.capfeature--bright .capfeature__img{filter:brightness(var(--lift,1.45)) contrast(1.04) saturate(1.06)}
.capfeature--bright .capfeature__scrim{
  background:linear-gradient(90deg,rgba(8,9,12,.3) 0%,rgba(8,9,12,.05) 26%,transparent 50%,rgba(8,9,12,.05) 74%,rgba(8,9,12,.3) 100%),linear-gradient(0deg,rgba(8,9,12,.28) 0%,transparent 32%)}
.capfeature__title{position:absolute;z-index:3;left:clamp(1.4rem,4vw,4rem);top:clamp(1.6rem,6vh,3.4rem);margin:0;
  font-family:var(--disp);font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(2.2rem,6vw,5rem);line-height:.92;color:#fff}
.capfeature__vlabel{position:absolute;z-index:3;writing-mode:vertical-rl;
  right:clamp(.6rem,1.6vw,1.6rem);top:50%;transform:translateY(-50%) rotate(180deg);
  font-family:var(--body);text-transform:uppercase;letter-spacing:.28em;font-size:.66rem;font-weight:500;color:var(--silver)}
.capnote{position:absolute;z-index:3;width:min(240px,44vw)}
.capnote__k{display:block;font-family:var(--disp);font-stretch:125%;font-weight:700;text-transform:uppercase;
  font-size:clamp(.8rem,1vw,1rem);letter-spacing:.02em;line-height:1.06;color:#fff;text-shadow:0 1px 14px rgba(6,7,11,.7)}
.capnote__d{display:block;color:#C7CBD3;font-weight:300;font-size:clamp(.74rem,.9vw,.86rem);line-height:1.32;margin-top:.28rem;text-shadow:0 1px 14px rgba(6,7,11,.7)}
.capnote__line{position:relative;display:block;height:1px;margin-top:.65rem;
  width:var(--len,clamp(90px,15vw,240px));
  background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.62))}
.capnote__line::after{content:"";position:absolute;top:50%;right:-3px;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 3px rgba(255,78,22,.18)}
.capnote--r{text-align:right}
.capnote--r .capnote__line{margin-left:auto;background:linear-gradient(270deg,rgba(255,255,255,.12),rgba(255,255,255,.62))}
.capnote--r .capnote__line::after{right:auto;left:-3px}
/* interactive hotspots: bigger pulsing dot on the feature; callouts cascade in on scroll */
.caphot{position:absolute;z-index:5;transform:translate(-50%,-50%);width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer}
.caphot__dot{position:absolute;inset:11px;border-radius:50%;background:var(--ember);box-shadow:0 0 18px 5px rgba(255,78,22,.6);transition:transform .25s ease}
.caphot__dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,125,65,.9);animation:caphotPulse 2s ease-out infinite}
@keyframes caphotPulse{0%{transform:scale(.4);opacity:1}70%{opacity:.28}100%{transform:scale(2.8);opacity:0}}
/* 2026-08-27: max-width is now a per-hotspot knob (--popw, default 240px). One label needs
   more room than the rest to sit on a single line, and raising the global cap to suit it
   pushed the left-hand hotspot at 22% off the edge of the viewport. */
.caphot__pop{position:absolute;top:50%;width:max-content;max-width:min(var(--popw,240px),44vw);display:flex;flex-direction:column;gap:.12rem;
  opacity:0;visibility:hidden;transform:translateY(-50%);
  transition:opacity .6s ease,transform .6s ease}
.caphot__pop::before{content:"";position:absolute;top:50%;width:17px;height:1px;background:rgba(255,255,255,.6);
  transform:scaleX(0);transition:transform .55s ease}
.caphot--r .caphot__pop{left:var(--off,120px);align-items:flex-start;text-align:left}
.caphot--r .caphot__pop::before{left:calc(-1*var(--off,120px) + 3px);width:calc(var(--off,120px) - 6px);transform-origin:left center}
.caphot--l .caphot__pop{right:var(--off,120px);align-items:flex-end;text-align:right}
.caphot--l .caphot__pop::before{right:calc(-1*var(--off,120px) + 3px);width:calc(var(--off,120px) - 6px);transform-origin:right center}
/* auto reveal on arrival: JS adds .playing when the pinned image is in view; callouts cascade in on a timer */
.capfeature.playing .caphot__pop{opacity:1;visibility:visible;transition-delay:calc(var(--i,0)*0.3s + .15s)}
.capfeature.playing .caphot--r .caphot__pop{transform:translate(4px,-50%)}
.capfeature.playing .caphot--l .caphot__pop{transform:translate(-4px,-50%)}
.capfeature.playing .caphot__pop::before{transform:scaleX(1);transition-delay:calc(var(--i,0)*0.3s + .15s)}
.caphot:hover .caphot__dot,.caphot:focus .caphot__dot{transform:scale(1.3)}
.caphot:focus{outline:none}
.caphot__k{font-family:var(--disp);font-stretch:125%;font-weight:700;text-transform:uppercase;font-size:clamp(.78rem,1vw,.98rem);line-height:1.06;color:#fff;text-shadow:0 1px 12px #000,0 0 20px rgba(0,0,0,.7)}
.caphot__d{color:#C7CBD3;font-weight:300;font-size:clamp(.72rem,.9vw,.84rem);text-shadow:0 1px 12px #000,0 0 20px rgba(0,0,0,.7)}
@media(max-width:768px){
  /* touch: no hover hotspots — render the callouts as a clean dot + text list below the cap.
     Use position:static (a flex row) so the desktop inline left/top offsets are ignored,
     and reset the dot's base inset:11px or it expands to fill the whole section. */
  .caphot{position:static;transform:none;width:auto;height:auto;display:flex;align-items:flex-start;
    gap:.7rem;margin:.8rem var(--gutter) 0;padding:0}
  .caphot__dot{position:static;inset:auto;flex:none;width:7px;height:7px;margin-top:.4rem;
    box-shadow:0 0 10px 2px rgba(255,78,22,.45)}
  .caphot__dot::after{display:none}
  .caphot__pop{position:static;flex:1 1 auto;min-width:0;opacity:1;visibility:visible;transform:none;
    width:auto;max-width:none;padding:0}
  .caphot__pop::before{display:none}
  .caphot--l .caphot__pop,.caphot--r .caphot__pop{left:auto;right:auto;align-items:flex-start;text-align:left}
  .caphot__k{white-space:normal}
  /* neutralise the .playing cascade transforms on the now-static list */
  .capfeature.playing .caphot__pop,
  .capfeature.playing .caphot--l .caphot__pop,
  .capfeature.playing .caphot--r .caphot__pop{transform:none}
}
@media(max-width:768px){
  .capfeature{min-height:0}
  .capfeature__img{position:relative;height:58vh}
  .capfeature__scrim{background:linear-gradient(0deg,rgba(8,9,12,.55),transparent 55%)}
  .capfeature__title{position:static;margin:1.3rem var(--gutter) .2rem}
  .capfeature__vlabel{display:none}
  .capnote{position:static !important;width:auto;text-align:left !important;margin:.9rem var(--gutter) 0;inset:auto !important}
  .capnote__line{display:none}
  .capnote--r .capnote__line{margin-left:0}
}
/* full-bleed image separator band (F1 caps) */
.fullband{position:relative;width:100%;height:clamp(280px,44vh,520px);overflow:hidden;margin:0}
.fullband img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block;filter:brightness(.82) contrast(1.04)}
/* condensed spacing for the Caps Elevated section moved onto the homepage */
#caps-elevated{padding-top:clamp(30px,4vh,52px);padding-bottom:clamp(30px,4vh,52px)}
#caps-elevated .wp-section__head{margin-bottom:clamp(1.2rem,2.6vh,2rem)}
#caps-elevated .wp-split{margin:clamp(0.8rem,2.4vh,1.8rem) 0}
/* Changes 2 p2: pin split content to the top so the header->body gap (A) closes,
   and let the full-cap image sit tight to the copy (B) */
#caps-elevated .wp-split{align-items:start}
/* Changes 2 p8: keep the "Why" sub-quote on one line on desktop */
#why .wp-quote{max-width:none}
@media(min-width:640px){#why .wp-quote{white-space:nowrap}}

/* alternating image ↔ text split */
.wp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5.5vw,5.5rem);align-items:center;margin:clamp(1rem,3vh,2.4rem) 0}
.wp-split__media{aspect-ratio:4/5}
.wp-split--rev .wp-split__text{order:2}
.wp-split--rev .wp-split__media{order:1}
.wp-split__text{max-width:56ch}
.wp-split__text p{color:#C7CBD3;font-weight:300;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.7;margin-bottom:1.35rem}
.wp-split__text p:last-child{margin-bottom:0}
.wp-split__text strong{color:var(--platinum);font-weight:600}
.wp-split__lede{font-family:var(--disp);font-stretch:125%;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.3rem,2.3vw,2rem);line-height:1.08;letter-spacing:0;color:var(--platinum);margin-bottom:1.5rem}

/* colourway range strip — six builds, one system */
.wp-range{margin:clamp(2.8rem,7vh,5rem) 0}
.wp-range__lead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-bottom:1.4rem;padding-bottom:1rem;border-bottom:1px solid var(--slate)}
.wp-range__lead h3{font-family:var(--disp);font-stretch:125%;font-weight:800;text-transform:uppercase;
  letter-spacing:.01em;font-size:clamp(1.1rem,2.2vw,1.7rem);line-height:1}
.wp-range__lead span{color:var(--silver);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.wp-range__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.5rem,1.3vw,1rem)}
.wp-range__cell{position:relative;aspect-ratio:3/4;border:1px solid var(--slate);background:var(--carbon);overflow:hidden}
.wp-range__cell img{filter:contrast(1.05) saturate(1.02)}
.wp-range__cell span{position:absolute;left:0;bottom:0;width:100%;padding:.55rem .6rem .5rem;
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--silver);font-weight:500;
  background:linear-gradient(0deg,rgba(8,9,12,.88),transparent)}
.wp-range__cell:hover img{filter:contrast(1.08) saturate(1.06)}

/* closing CTA on the write-up page */
.wp-cta{max-width:var(--maxw);margin:0 auto;padding:clamp(80px,14vh,160px) var(--gutter);
  border-top:1px solid var(--slate);text-align:center}
.wp-cta h2{font-family:var(--disp);font-stretch:125%;font-weight:900;text-transform:uppercase;
  line-height:.92;letter-spacing:.01em;font-size:clamp(2.2rem,6vw,4.8rem);margin-bottom:1.6rem}
.wp-cta p{max-width:48ch;margin:0 auto 2.4rem;color:#C7CBD3;font-weight:300;font-size:1.08rem;line-height:1.7}

@media(max-width:900px){
  .teaser{min-height:clamp(400px,58vh,560px)}
  .teaser--right .teaser__col{text-align:left;margin-left:0}
  .teaser--right .teaser__idx{justify-content:flex-start}
  .teaser--right .teaser__inner{text-align:left}
  .teaser--right .teaser__scrim{
    background:
      linear-gradient(90deg,rgba(8,9,12,.93) 0%,rgba(8,9,12,.76) 38%,rgba(8,9,12,.3) 76%,rgba(8,9,12,.5) 100%),
      linear-gradient(0deg,rgba(8,9,12,.5) 0%,rgba(8,9,12,0) 34%);}
  .wp-cols{grid-template-columns:1fr;gap:2rem}
  .wp-aside{position:static;top:auto}
  .wp-lede{font-size:clamp(1.3rem,5vw,1.9rem)}
  .wp-split{grid-template-columns:1fr;gap:1.8rem;margin:clamp(2.4rem,7vh,4rem) 0}
  .wp-split--rev .wp-split__text{order:2}
  .wp-split--rev .wp-split__media{order:1}
  .wp-split__media{aspect-ratio:4/3;max-height:64vh}
  .wp-split__text{max-width:none}
  .wp-range__grid{grid-template-columns:repeat(3,1fr)}
}
/* ---- MOBILE PROFESSIONAL PASS (proof, 2026-07-14) ---------------------------
   The text-over-photo interstitials read as "copy floating on a murky half-image"
   on phones. Reframe them as full-bleed cinematic image cards: the cap is properly
   framed and lit, and the title + one line sit in the lower third over a strong
   bottom scrim (editorial magazine cover, not floating text). */
@media(max-width:640px){
  .wp-hero--photo{
    width:100vw;margin-left:calc(50% - 50vw);
    min-height:76vh;min-height:76svh;display:flex;align-items:flex-end;padding:0;
  }
  .wp-hero--photo .wp-hero__bg{
    background-position:64% center;background-size:cover;transform:none;
  }
  .wp-hero--photo .wp-hero__bg::after{
    background:
      linear-gradient(0deg,rgba(6,7,10,.97) 0%,rgba(6,7,10,.74) 20%,rgba(6,7,10,.12) 46%,rgba(6,7,10,.30) 100%);
  }
  .wp-hero--photo .wp-hero__inner{
    width:100%;max-width:none;padding:0 var(--gutter) clamp(34px,6vh,58px);
  }
  .wp-hero--photo .wp-hero__title{
    font-size:clamp(2.3rem,13vw,3.8rem);line-height:.9;letter-spacing:-.01em;margin:0 0 1rem;
  }
  .wp-hero--photo .wp-hero__sub{font-size:1rem;line-height:1.55;max-width:32ch}
}
@media(max-width:520px){
  .wp-range__grid{grid-template-columns:repeat(2,1fr)}
}

/* =========================================================
   FINISH LAYER — v2 refinement pass (2026-07-20)
   Additive only. Stays inside the locked identity (DESIGN.md):
   dark cinema, single ember, Archivo-expanded, Hanken body.
   Purely a finishing polish — no content, colour or type changes.
   ========================================================= */

/* 1 — Typographic finish: tidy headline wrapping, no orphan words,
       no single-word last lines in body copy. */
.section-title,.hero__title,.showcase__title,.contact__title,
.wp-hero__title,.wp-feature__title,.manifesto__lead,.foot__brand,
h1,h2,h3{ text-wrap:balance; }
p,.hero__lead,.section-lead,.wp-feature__body,.manifesto__body,
.contact__lead,figcaption{ text-wrap:pretty; }

/* 2 — Cinematic depth: a single-spotlight vignette + fine film grain.
       Both sit above the page base but below the top bar (z100) and
       loader (z1000); non-interactive; honour reduced-motion/data. */
body::before{               /* spotlight vignette */
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 32%,
     rgba(8,9,12,0) 52%, rgba(8,9,12,.34) 100%);
  mix-blend-mode:multiply;
}
body::after{                /* fine film grain */
  content:"";position:fixed;inset:-50%;z-index:2;pointer-events:none;
  opacity:.05;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}   20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-2%)}60%{transform:translate(-2%,-3%)}
  80%{transform:translate(2%,2%)} 100%{transform:translate(0,0)}
}

/* 3 — Interaction + accessibility finish */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ember);outline-offset:3px;border-radius:1px;
}
.bar__nav a,.foot__nav a{position:relative}
.bar__nav a::after,.foot__nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;
  background:var(--ember);transition:right .45s var(--ease);
}
.bar__nav a:hover::after,.foot__nav a:hover::after{right:0}

@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
}

/* =========================================================
   v2 BOLD HERO REVEAL (2026-07-20)
   Cinematic "power-up" entrance, fired off body.ready (set by the
   loader-complete handler in main.js). One-time only, so it never
   fights the scroll parallax. Fully gated behind reduced-motion:
   with reduced motion (or no JS) the hero is simply visible.
   Same words/images — motion only.
   ========================================================= */
@media (prefers-reduced-motion:no-preference){

  /* keep the hero hidden under the loader curtain, then stage it in */
  body.loading .hero .eyebrow,
  body.loading .hero__title .line,
  body.loading .hero__sub,
  body.loading .hero__cta,
  body.loading .hero__foot{opacity:0}

  body.ready .hero .eyebrow      {animation:heroRise .9s  var(--ease) .15s both}
  body.ready .hero__title .line:nth-of-type(1){animation:heroRise 1s var(--ease) .32s both}
  body.ready .hero__title .line:nth-of-type(2){animation:heroRise 1s var(--ease) .46s both}
  body.ready .hero__sub          {animation:heroRise 1s  var(--ease) .62s both}
  body.ready .hero__cta          {animation:heroRise 1s  var(--ease) .78s both}
  body.ready .hero__foot         {animation:heroFade 1.1s var(--ease) .95s both}

  /* the ember words ignite last */
  body.ready .hero__title .ember{animation:emberIgnite 1.1s ease-out 1.15s both}

  /* one-time ken-burns settle on the hero photo (uses `scale`, not
     `transform`, so the parallax transform composes cleanly) */
  body.ready .hero__media img{animation:heroKB 2s var(--ease) .1s both}
}

@keyframes heroRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
@keyframes emberIgnite{
  0%  {text-shadow:none;filter:brightness(.7)}
  45% {filter:brightness(1)}
  60% {text-shadow:0 0 30px rgba(255,78,22,.9),0 0 12px rgba(255,78,22,.8)}
  100%{text-shadow:0 0 16px rgba(255,78,22,.28)}
}
@keyframes heroKB{
  from{scale:1.06;filter:contrast(1.2) saturate(1) brightness(.78)}
  to  {scale:1;   filter:contrast(1.12) saturate(1.14) brightness(1.2)}
}

/* Lenis smooth-scroll base (v2 flow pass) — official recommended rules.
   Only active once Lenis adds its classes to <html>; native scroll otherwise. */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto !important}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}


/* ==========================================================================
   Signal Red Studio - client footer credit
   v1.0  2026-09-10
   --------------------------------------------------------------------------
   Self-contained. Every selector is namespaced .srs-credit so it cannot
   collide with a client's own footer CSS. No web font, no reset, no
   !important, nothing outside this block.

   By design the credit inherits the client's own small-print typeface and
   size. The recognisable part is the mark and the name, not our typeface.
   Forcing Inter into someone else's footer looks bolted on.

   Tune per site with the custom properties on .srs-credit.
   ========================================================================== */

.srs-credit {
  /* --- knobs ------------------------------------------------------------ */
  --srs-red: #a52019;         /* RAL 3001, the logo red */
  --srs-red-bright: #ef4444;  /* the on-dark substitute */
  --srs-accent: var(--srs-red);
  --srs-mark: 1.65em;          /* mark scales with the surrounding text */
  --srs-gap: 0.55em;
  --srs-lead-opacity: 0.7;     /* the "Site by" words sit back a little */

  display: inline-flex;
  align-items: center;
  gap: var(--srs-gap);
  font: inherit;
  color: inherit;
  line-height: 1.25;
}

.srs-credit__mark {
  flex: 0 0 auto;
  width: var(--srs-mark);
  height: var(--srs-mark);
  /* the spiral loses its counters below about 17px, so hold a floor */
  min-width: 17px;
  min-height: 17px;
  color: var(--srs-accent);
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.srs-credit__lead {
  opacity: var(--srs-lead-opacity);
}

.srs-credit__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.srs-credit__link:hover,
.srs-credit__link:focus-visible {
  color: var(--srs-accent);
  border-bottom-color: currentColor;
}

.srs-credit__link:focus-visible {
  outline: 2px solid var(--srs-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.srs-credit:hover .srs-credit__mark {
  opacity: 1;
}

/* --- variant: on a dark footer -------------------------------------------
   #a52019 goes muddy below about 25% lightness. Swap to the bright red. */
.srs-credit--on-dark {
  --srs-accent: var(--srs-red-bright);
}

/* --- variant: no colour --------------------------------------------------
   For footers where a red mark fights the client's own palette. The mark
   inherits the footer text colour and the link only shifts weight. */
.srs-credit--mono {
  --srs-accent: currentColor;
}

.srs-credit--mono .srs-credit__mark {
  color: currentColor;
  opacity: 0.55;
}

.srs-credit--mono:hover .srs-credit__mark {
  opacity: 0.9;
}

/* --- variant: text only --------------------------------------------------
   Drops inside an existing copyright sentence. No mark, no flex. */
.srs-credit--text {
  display: inline;
  gap: 0;
}

/* --- variant: small -----------------------------------------------------
   Pins the credit to 11px regardless of the client's footer scale. */
.srs-credit--sm {
  font-size: 11px;
  letter-spacing: 0.01em;
}

/* --- variant: the lockup ------------------------------------------------
   Mark plus the stacked wordmark, on its own footer row. Use where there
   is vertical room. Reproduces the brand's own tracking. */
.srs-credit--lockup {
  --srs-mark: 30px;
  --srs-gap: 12px;
  align-items: center;
}

.srs-credit--lockup .srs-credit__lead {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.srs-credit--lockup .srs-credit__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-bottom: 0;
  padding-bottom: 0;
}

.srs-credit--lockup .srs-credit__link:hover,
.srs-credit--lockup .srs-credit__link:focus-visible {
  color: inherit;
}

.srs-credit__lockup {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.srs-credit__name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.srs-credit__sub {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
}

.srs-credit--lockup .srs-credit__link:hover .srs-credit__name,
.srs-credit--lockup .srs-credit__link:focus-visible .srs-credit__name {
  color: var(--srs-accent);
}

/* --- respect the setting ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .srs-credit__mark,
  .srs-credit__link,
  .srs-credit__name {
    transition: none;
  }
}