/* ============================================================
   RAYSONS — Foundry · "Precision casting, engineered to spec"
   Cinematic scrollyteller, sibling to index + about. Dark
   molten stage, Cormorant/bronze type, GSAP scroll-driven.
   Reuses styles.css tokens + chrome.
   ZERO video scrub, ZERO canvas — images + CSS only.
   ============================================================ */

body{cursor:auto;background:var(--bg);overflow-x:hidden}
.grain{z-index:3}

/* ---------- fixed cinematic stage (no WebGL) ---------- */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.stage__glow{position:absolute;inset:0;background:
  radial-gradient(120% 70% at 50% -8%, rgba(201,162,78,.14), transparent 52%),
  radial-gradient(90% 60% at 50% 116%, rgba(166,121,46,.10), transparent 60%),
  var(--bg)}
.stage__vig{position:absolute;inset:0;background:radial-gradient(125% 100% at 50% 42%, transparent 44%, rgba(7,5,4,.7) 100%)}
/* drifting embers */
.stage__embers{position:absolute;inset:0;opacity:.5}
.ember{position:absolute;bottom:-20px;width:3px;height:3px;border-radius:50%;
  background:var(--molten-hot);box-shadow:0 0 8px var(--molten);animation:rise linear infinite}
@keyframes rise{to{transform:translateY(-110vh) translateX(var(--dx,20px));opacity:0}}
@media(prefers-reduced-motion:reduce){.ember{animation:none;display:none}}

/* ---------- chrome ---------- */
.cue{z-index:30}

/* ---------- section frame ---------- */
.sec{position:relative;z-index:10;padding:clamp(96px,17vh,210px) clamp(20px,6vw,110px)}
.wrap{max-width:1280px;margin:0 auto}
.eyebrow-badge{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--molten);
  border:1px solid var(--line-strong);border-radius:40px;padding:9px 18px;margin-bottom:28px;
  text-shadow:0 1px 10px rgba(7,5,4,.8)}
.eyebrow-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--molten);box-shadow:0 0 10px var(--molten)}

/* reveal primitive (GSAP toggles .in; CSS fallback shows it) */
.rv{opacity:0;transform:translateY(38px)}
.rv.in{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.no-gsap .rv,.reduced .rv{opacity:1;transform:none}

/* ============================================================
   HERO — full viewport, centred text over still foundry image
   No canvas, no video — instant LCP
   ============================================================ */
/* Title moved to the upper third so the arrived casting owns the lower two-thirds —
   a magazine layout: claim on top, the part beneath it. Was vertically centred. */
/* THE HERO IS PINNED. At exactly 100svh the casting left the frame before it had finished
   assembling — the visitor scrolled straight past a half-built part. The section is now
   ~1.9 screens tall and its contents stick to the top, so the whole assembly plays out
   while the page holds still, then releases into the furnace beat. */
.fhero{position:relative;z-index:10;height:190svh;display:block;overflow:visible}
/* The pin sticks to top:0, so once you scroll a little its contents sit directly under
   the fixed navbar. Top padding was clamp(64px,9vh,104px) — 64px on a phone against a
   96px bar — so the eyebrow badge was tucked behind the nav at every width but one, and
   the title sat right against it. Clearing --nav-h first, THEN breathing room, means the
   gap is deliberate rather than whatever the viewport happened to produce. */
.fhero__pin{position:sticky;top:0;height:100svh;min-height:600px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;text-align:center;
  padding:calc(var(--nav-h) + clamp(16px,3vh,40px)) 6vw 0;overflow:hidden}
@media(max-width:760px){.fhero{height:180svh}}
.fhero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}

/* THE ARRIVED CASTING — bottom-anchored, filling the lower hero, behind the title.
   view-transition-name is what makes the browser treat it as the SAME element as the
   Overview finale's object and fly it here across the navigation (see index styles.css
   body.bracket-on #bracketGL). The bottom edge is masked into the stage so it reads as
   emerging from the foundry rather than pasted on a plate. */
.fhero__object{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  z-index:0;margin:0;pointer-events:none;
  height:min(66vh,600px);width:min(96vw,1000px);
  display:flex;align-items:flex-end;justify-content:center;
  view-transition-name:casting}
/* Feather ALL FOUR edges, not just the bottom. The poster is a render on near-black,
   and its rectangle was leaving a faint seam against the stage on the top and sides.
   Two masks intersected — a vertical fade and a horizontal one — dissolve every margin
   while leaving the centred object crisp. */
.fhero__object img{width:100%;height:100%;object-fit:contain;object-position:bottom;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 74%,transparent 99%),
                     linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 74%,transparent 99%),
             linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-composite:intersect}
/* the title sits above the object; keep it clearly legible over the metal */
.fhero .inner{position:relative;z-index:2}
@media(max-width:760px){
  .fhero__object{height:46vh;width:100vw}
}
@media(prefers-reduced-motion:reduce){.fhero__object{view-transition-name:none}}
.fhero__bg img{width:100%;height:100%;object-fit:cover;opacity:.42;
  filter:brightness(.7) saturate(1.15) contrast(1.05);transform:scale(1.06)}
.fhero__bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(80% 60% at 50% 46%, transparent 30%, rgba(7,5,4,.8) 100%),
  linear-gradient(180deg, rgba(7,5,4,.6), transparent 30%, transparent 60%, rgba(7,5,4,.95))}
.fhero__title{font-family:var(--serif);font-weight:600;line-height:.94;letter-spacing:-.015em;
  font-size:clamp(34px,6vw,104px);text-wrap:balance;text-shadow:0 4px 40px rgba(7,5,4,.85)}
.fhero__title em{font-style:italic;font-weight:500;color:var(--molten-hot)}
.fhero__sub{margin:16px auto 0;max-width:62ch;font-family:var(--mono);font-size:clamp(10px,1vw,12px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-lite);line-height:1.9;
  text-shadow:0 1px 14px rgba(7,5,4,.9)}

/* ============================================================
   THE CATCH — the live hero casting, carried over from the Overview finale
   Engine: foundry-object.js. Occupies the poster's box, so the hero's composition
   is the same whether the visitor gets the live object or the still.
   ============================================================ */
/* A LAYOUT BAND, not an overlay. As an absolutely-positioned box at a fixed height this
   ran underneath the headline, and the only way to keep it clear of the type was to shrink
   it. In flow it is the hero's second flex row: it takes every pixel left below the copy,
   down to the bottom edge — so it is both larger and incapable of colliding with the text. */
.fobj{position:relative;z-index:0;flex:1 1 auto;min-height:0;
  width:min(94vw,1180px);margin-top:clamp(4px,1.4vh,18px);
  opacity:0;pointer-events:none;transition:opacity .5s ease}
.fhero .inner{flex:0 0 auto}
/* the handover: the engine adds .fobj-live once the model is in memory (never before, so a
   slow connection keeps the poster rather than an empty hero), then .fobj-swapped after the
   crossfade. The view-transition name moves with the frame so the Overview finale still
   flies its casting into this spot — and is never on both elements at once. */
body.fobj-live .fobj{opacity:1;pointer-events:auto;view-transition-name:casting}
body.fobj-live .fhero__object{opacity:0;view-transition-name:none}
body.fobj-swapped .fhero__object{display:none}
/* .5s, not .9s. foundry-object.js sets .fobj-swapped 700ms after .fobj-live, and that rule
   is display:none — which does not wait for a transition. A .9s fade was therefore cut off
   at 700ms with 200ms of opacity still on screen, so the poster did not dissolve into the
   live casting, it vanished mid-fade. Finishing well inside the 700ms means the swap is a
   real crossfade and the still is gone before the class lands. */
.fhero__object{transition:opacity .5s ease}

/* NOTE: the rule that hides this still on in-session hops lives in styles.css, not here.
   It has to be in the shared sheet — foundry.css is still being fetched during the hop,
   and a rule cannot hide anything until its stylesheet has landed. */
.fobj__gl{position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:grab;touch-action:pan-y;                      /* turn it sideways; vertical still scrolls */
  /* same two-mask feather as the poster — the base dissolves into the stage so the part
     reads as standing in the foundry rather than pasted onto it.
     The vertical fade held to 88% and then took the last 12% of the band with it. On the
     shorter viewports that zone reaches up into the casting itself — the part's own base
     was dissolving, so it read as cut off rather than as standing on something. Holding to
     95% keeps the whole part solid and leaves a 5% feather, which is still enough to melt
     the bottom edge into the stage without eating the object. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 4%,#000 95%,transparent 100%),
                     linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0%,#000 4%,#000 95%,transparent 100%),
             linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%);
  mask-composite:intersect}
.fobj.grabbing .fobj__gl{cursor:grabbing}
/* the invitation — same instrument as the Overview's .turn-hint, so the cue for "this one
   you can hold" reads identically on both pages. Retires the moment they start. */
.fobj-hint{position:absolute;left:50%;bottom:clamp(74px,13vh,128px);transform:translateX(-50%);
  z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-faint);pointer-events:none;white-space:nowrap;opacity:0;
  text-shadow:0 1px 12px rgba(7,5,4,.95);transition:opacity .8s ease}
body.fobj-live .fobj-hint{opacity:1}
body.fobj-live .fobj-hint.gone{opacity:0}
@media(max-width:760px){.fobj{width:100vw}.fobj-hint{bottom:clamp(64px,11vh,100px);letter-spacing:.18em}}
@media(prefers-reduced-motion:reduce){.fobj,.fobj-hint{display:none}}

/* ============================================================
   PILLARS — alternating 2-column layouts
   ============================================================ */
.pillar{position:relative;z-index:10;padding:clamp(80px,14vh,180px) clamp(20px,6vw,110px)}
.pillar__inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,100px);align-items:center}
.pillar.flip .pillar__inner{direction:rtl}
.pillar.flip .pillar__inner > *{direction:ltr}
.pillar__copy{max-width:560px}
.pillar__tag{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--molten);
  text-shadow:0 1px 10px rgba(7,5,4,.8);margin-bottom:20px}
.pillar__name{font-family:var(--serif);font-weight:600;line-height:1.0;letter-spacing:-.01em;
  font-size:clamp(36px,5.4vw,80px);margin-bottom:24px;text-shadow:0 2px 24px rgba(7,5,4,.8)}
.pillar__name em{font-style:italic;font-weight:500;color:var(--bronze-lite)}
.pillar__body{font-size:clamp(15px,1.4vw,18px);line-height:1.65;color:#ccc2b4;font-weight:300;
  text-shadow:0 1px 12px rgba(7,5,4,.8);max-width:52ch}
.pillar__note{margin-top:1rem;font-style:italic;opacity:.65;font-size:clamp(13px,1.2vw,15px);line-height:1.6;color:#b0a48f}
.pillar__rows{margin-top:1.4rem;display:flex;flex-direction:column;gap:10px}
.pillar__row{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink);font-weight:400}
.pillar__dot{width:6px;height:6px;border-radius:50%;background:var(--molten);box-shadow:0 0 8px var(--molten);flex:0 0 auto}
.pillar__pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.4rem}
.pillar__pill{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-dim);
  border:1px solid var(--line);padding:9px 15px;border-radius:40px;transition:border-color .3s,color .3s}
.pillar__pill:hover{border-color:var(--bronze-lite);color:var(--ink)}

/* pillar visual (image) */
.pillar__visual{position:relative;border-radius:5px;overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--line-strong);box-shadow:0 40px 90px rgba(0,0,0,.6)}
.pillar__visual img{width:100%;height:100%;object-fit:cover;
  filter:sepia(.22) saturate(1.2) contrast(1.08) brightness(.84) hue-rotate(-6deg)}
.pillar__visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg, rgba(7,5,4,.14), rgba(7,5,4,.38)),
  radial-gradient(110% 90% at 50% 40%, transparent 50%, rgba(7,5,4,.58));mix-blend-mode:multiply}
.pillar__visual .tint{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg, rgba(201,162,78,.08), transparent 60%);mix-blend-mode:screen}

/* centred pillar variant (machining, export) */
.pillar.centered{text-align:center}
.pillar.centered .pillar__inner{display:flex;flex-direction:column;align-items:center;gap:0}
.pillar.centered .pillar__copy{max-width:720px}
.pillar.centered .pillar__body{margin:0 auto}

/* spec strip (machining pillar) */
.pillar__spec-strip{display:flex;align-items:center;gap:clamp(12px,2vw,28px);justify-content:center;
  margin-top:1.6rem;flex-wrap:wrap;font-family:var(--mono);font-size:13px;letter-spacing:.1em;
  color:var(--ink);text-transform:uppercase}
.pillar__spec-sep{width:1px;height:16px;background:var(--bronze-deep);opacity:.5}

/* CTA stack (export pillar) */
.pillar__cta-stack{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:2rem;justify-content:center}
.pillar__cta-stack .btn--fill{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--molten);color:#180c03;font-weight:700;padding:18px 30px;border-radius:44px;
  transition:box-shadow .3s,transform .25s;will-change:transform}
.pillar__cta-stack .btn--fill:hover{box-shadow:0 14px 50px rgba(201,162,78,.45)}
.pillar__cta-stack .btn--text{font-family:var(--mono);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bronze-lite);transition:color .3s}
.pillar__cta-stack .btn--text:hover{color:var(--ink)}
.pillar__cta-stack .btn__arrow{transition:transform .3s}
.pillar__cta-stack .btn--text:hover .btn__arrow{transform:translateX(5px)}

/* gradient headline (export pillar) */
.pillar__name--grad{background:linear-gradient(135deg, var(--bronze-lite), var(--molten-hot));
  -webkit-background-clip:text;background-clip:text;color:transparent}

@media(max-width:860px){
  .pillar__inner{grid-template-columns:1fr;gap:30px}
  .pillar.flip .pillar__inner{direction:ltr}
  .pillar__visual{aspect-ratio:16/11}
}

/* ============================================================
   SPECIFICATIONS — data grid
   ============================================================ */
.specs-sec{position:relative;z-index:10;padding:clamp(80px,14vh,180px) clamp(20px,6vw,110px);
  border-top:1px solid var(--line)}
.specs-sec__inner{max-width:1280px;margin:0 auto}
.specs-sec__header{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(40px,6vh,72px);flex-wrap:wrap}
.specs-sec__intro{max-width:48ch}
.specs-sec__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--molten);margin-bottom:14px}
.specs-sec__lede{font-size:clamp(15px,1.4vw,18px);line-height:1.65;color:#ccc2b4;font-weight:300}
.specs-sec__headline{font-family:var(--serif);font-weight:600;line-height:1.0;letter-spacing:-.01em;
  font-size:clamp(38px,5.8vw,86px);text-shadow:0 2px 24px rgba(7,5,4,.8)}
.specs-sec__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-top:1px solid rgba(166,121,46,.5)}
.specs-sec__card{background:var(--bg);padding:clamp(24px,3vh,36px) clamp(20px,2vw,30px);
  display:flex;flex-direction:column;gap:10px;transition:border-color .3s}
.specs-sec__card:hover{background:rgba(201,162,78,.03)}
.specs-sec__card-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--molten)}
.specs-sec__card-value{font-family:var(--serif);font-size:clamp(24px,2.4vw,36px);font-weight:600;color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.specs-sec__card-detail{font-size:12px;color:var(--ink-dim);font-weight:300;letter-spacing:.04em}
@media(max-width:900px){.specs-sec__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.specs-sec__grid{grid-template-columns:1fr}}
@media(max-width:760px){.specs-sec__header{flex-direction:column;align-items:flex-start}}

/* ============================================================
   PROCESS — interactive timeline with sticky image
   ============================================================ */
.process-sec{position:relative;z-index:10;padding:clamp(80px,14vh,180px) clamp(20px,6vw,110px)}
.process-sec__inner{max-width:1280px;margin:0 auto}
.process-sec__header{margin-bottom:clamp(40px,6vh,72px)}
.process-sec__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--molten);margin-bottom:14px}
.process-sec__headline{font-family:var(--serif);font-weight:600;line-height:1.04;letter-spacing:-.01em;
  font-size:clamp(38px,5.8vw,86px);text-shadow:0 2px 24px rgba(7,5,4,.8)}
.process-sec__headline em{font-style:italic;font-weight:500;color:var(--bronze-lite)}
.process-sec__body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:start}
.process-sec__left{position:relative}
.process-sec__timeline{display:flex;flex-direction:column;gap:0;position:relative}
.process-sec__line-bg{position:absolute;left:13px;top:0;bottom:0;width:1px;background:var(--line)}
.process-sec__step{position:relative;padding:clamp(20px,3vh,32px) 0 clamp(20px,3vh,32px) 44px;
  border-bottom:1px solid var(--line);cursor:pointer;transition:opacity .3s}
.process-sec__step:last-child{border-bottom:0}
.process-sec__step .process-sec__dot{position:absolute;left:8px;top:clamp(24px,3vh,36px);width:11px;height:11px;border-radius:50%;
  border:2px solid var(--line-strong);background:var(--bg);transition:border-color .4s,background .4s,box-shadow .4s}
.process-sec__step.active .process-sec__dot{border-color:var(--molten);background:var(--molten);
  box-shadow:0 0 14px var(--molten)}
.process-sec__num{font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.14em;margin-bottom:8px;
  transition:color .3s}
.process-sec__step.active .process-sec__num{color:var(--molten)}
.process-sec__title{font-size:clamp(16px,1.4vw,20px);font-weight:600;letter-spacing:-.01em;margin-bottom:8px;
  color:var(--ink-dim);transition:color .3s}
.process-sec__step.active .process-sec__title{color:var(--ink)}
.process-sec__desc{font-size:13px;line-height:1.6;color:var(--ink-faint);font-weight:300;max-width:44ch;
  max-height:0;overflow:hidden;opacity:0;transition:max-height .5s cubic-bezier(.2,.7,.2,1),opacity .4s,margin .4s}
.process-sec__step.active .process-sec__desc{max-height:120px;opacity:1;margin-top:4px}

/* sticky image frame */
.process-sec__right{position:sticky;top:18vh;align-self:start}
.process-sec__frame{position:relative;aspect-ratio:4/3;border-radius:5px;overflow:hidden;
  border:1px solid var(--line-strong);box-shadow:0 40px 90px rgba(0,0,0,.6)}
.process-sec__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s ease;
  filter:sepia(.22) saturate(1.2) contrast(1.08) brightness(.84) hue-rotate(-6deg)}
.process-sec__img.active{opacity:1}
/* honest "footage pending" panel — real per-station photography isn't shot yet, so we render
   an in-system HUD frame instead of a mismatched valve photo captioned as a different step */
.process-sec__img--pending{filter:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:11px;text-align:center;padding:24px;background:radial-gradient(120% 90% at 50% 38%, #191009, #0a0706)}
.process-sec__img--pending .pp-n{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--molten)}
.process-sec__img--pending .pp-t{font-family:var(--serif);font-size:clamp(19px,2.4vw,30px);font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.06;max-width:18ch}
.process-sec__img--pending .pp-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--line-strong);padding:5px 12px;border-radius:40px;margin-top:4px}
/* foundry grade overlay */
.process-sec__frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg, rgba(7,5,4,.12), rgba(7,5,4,.34)),
  radial-gradient(110% 90% at 50% 40%, transparent 50%, rgba(7,5,4,.5));mix-blend-mode:multiply}
.process-sec__frame .tint{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(125deg, rgba(201,162,78,.06), transparent 60%);mix-blend-mode:screen}

@media(max-width:860px){
  .process-sec__body{grid-template-columns:1fr;gap:40px}
  .process-sec__right{position:relative;top:0;order:-1}
  .process-sec__frame{aspect-ratio:16/10}
}

/* ============================================================
   CAPABILITIES — 4-column production scope
   ============================================================ */
.caps-sec{position:relative;z-index:10;padding:clamp(80px,14vh,180px) clamp(20px,6vw,110px);
  border-top:1px solid var(--line)}
.caps-sec__inner{max-width:1280px;margin:0 auto}
.caps-sec__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--molten);margin-bottom:14px}
.caps-sec__headline{font-family:var(--serif);font-weight:600;line-height:1.04;letter-spacing:-.01em;
  font-size:clamp(36px,5.4vw,80px);margin-bottom:clamp(40px,6vh,72px);text-shadow:0 2px 24px rgba(7,5,4,.8)}
.caps-sec__headline em{font-style:italic;font-weight:500;color:var(--bronze-lite)}
.caps-sec__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-top:1px solid rgba(166,121,46,.5)}
.caps-sec__col{background:var(--bg);padding:clamp(24px,3vh,36px) clamp(18px,2vw,26px);min-height:240px;
  display:flex;flex-direction:column;transition:background .3s}
.caps-sec__col:hover{background:rgba(201,162,78,.03)}
.caps-sec__ghost{font-family:var(--serif);font-weight:600;font-size:clamp(48px,5vw,72px);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(201,154,78,.18);margin-bottom:16px}
.caps-sec__col-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bronze-lite);margin-bottom:18px;font-weight:600}
.caps-sec__list{list-style:none;display:flex;flex-direction:column;gap:9px}
.caps-sec__list li{font-size:13.5px;color:var(--ink-dim);font-weight:300;line-height:1.5;
  padding-left:18px;position:relative}
.caps-sec__list li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--molten);opacity:.5}
@media(max-width:900px){.caps-sec__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.caps-sec__grid{grid-template-columns:1fr}.caps-sec__col{min-height:0}}

/* ============================================================
   FINALE — customers + CTA
   ============================================================ */
.finale{text-align:center}
.finale .marquee{margin-top:44px}
.finale-contact{pointer-events:auto;display:flex;gap:clamp(18px,3vw,40px);justify-content:center;flex-wrap:wrap;align-items:center;
  margin-top:36px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.finale-contact a{color:var(--bronze-lite)}
.finale-contact .mag{margin-top:0;padding:15px 28px;font-size:12px;color:#180c03}

/* ============================================================
   FOOTER
   ============================================================ */

/* real logomark in nav */
.nav{mix-blend-mode:normal}
.nav .brand,.nav .nav-links a{text-shadow:0 1px 14px rgba(7,5,4,.92)}

/* nav mobile */
.nav-burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:10px;mix-blend-mode:normal}
.nav-burger span{display:block;height:1.5px;background:#fff;transition:transform .3s,opacity .3s}
body.nav-open .nav-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.nav-open .nav-burger span:nth-child(2){opacity:0}
body.nav-open .nav-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:860px){
  .nav-burger{display:flex}
  .nav-links{position:fixed;inset:0;z-index:39;background:rgba(7,5,4,.97);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    flex-direction:column;align-items:center;justify-content:center;gap:30px;font-size:18px;
    opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;mix-blend-mode:normal}
  body.nav-open .nav-links{display:flex;opacity:1;visibility:visible}
  .nav-links a{padding:12px 28px}   /* ≥44px touch targets in the mobile menu */
}

/* ============================================================
   EXTRA MOBILE FIXES — foundry page
   ============================================================ */

/* spec-strip: separator dots overflow on very narrow phones → stack vertically */
@media(max-width:480px){
  .pillar__spec-strip{flex-direction:column;align-items:center;gap:8px}
  .pillar__spec-sep{display:none}
}

/* caps grid: keep 2-col down to 420px, then 1-col */
@media(max-width:420px){.caps-sec__grid{grid-template-columns:1fr}}

/* specs-sec grid: already 2→1 at 520px ✓ add a 900→2 check to fill the gap */
@media(max-width:900px){.specs-sec__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* foundry sections: reduce outer padding on phones */
@media(max-width:480px){
  .pillar{padding:clamp(64px,12vh,120px) clamp(16px,5vw,28px)}
  .specs-sec{padding:clamp(56px,10vh,120px) clamp(16px,5vw,28px)}
  .process-sec{padding:clamp(56px,10vh,120px) clamp(16px,5vw,28px)}
  .caps-sec{padding:clamp(56px,10vh,120px) clamp(16px,5vw,28px)}
}

/* foundry hero text: ensure it fits on iPhone SE */
@media(max-width:375px){
  .pillar__name{font-size:clamp(28px,9vw,48px)!important}
}

/* ============================================================
   FOUNDRY FILM CHAPTERS (Phase 1) — pinned scrub sections.
   Static & readable by default (no-JS / reduced-motion safe); the engine
   (foundry-chapters.js) adds body.fchap-live to switch on the pin + scrub reveals.
   ============================================================ */
.fchap{position:relative;z-index:5}
.fchap__pin{position:relative;padding:clamp(96px,14vh,140px) clamp(20px,6vw,110px) clamp(72px,10vh,104px)}
.fchap__bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(90% 60% at 80% 36%, rgba(201,162,78,.10), transparent 60%),
  radial-gradient(70% 60% at 14% 92%, rgba(255,106,26,.06), transparent 60%)}
.fchap__hud{position:absolute;top:clamp(82px,11vh,112px);left:clamp(20px,6vw,110px);right:clamp(20px,6vw,110px);z-index:3;
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.fchap__hud-k{color:var(--molten)}
.fchap__hud-i{color:var(--bronze-lite);font-variant-numeric:tabular-nums;flex:0 0 auto}
.fchap__inner{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto}
.fchap__title{font-family:var(--serif);font-weight:600;font-size:clamp(34px,6vw,86px);line-height:.98;letter-spacing:-.015em;color:var(--ink);margin-bottom:12px}
.fchap__title em{font-style:italic;font-weight:500;color:var(--bronze-lite)}
.fchap__lede{font-size:clamp(14px,1.3vw,17px);line-height:1.6;color:var(--ink-dim);font-weight:300;max-width:52ch;margin-bottom:clamp(26px,4.5vh,48px)}
.fchap__rail{position:absolute;left:clamp(20px,6vw,110px);right:clamp(20px,6vw,110px);bottom:clamp(30px,5vh,52px);z-index:3;height:1px;background:var(--line)}
.fchap__rail-fill{display:block;height:100%;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,var(--molten-deep),var(--molten-hot));box-shadow:0 0 12px var(--molten)}

/* program rows */
.fprog{border-top:1px solid var(--line)}
.fprog__row{display:grid;grid-template-columns:1fr auto minmax(14ch,auto);gap:clamp(16px,3vw,54px);align-items:baseline;
  padding:clamp(13px,2.3vh,25px) 0;border-bottom:1px solid var(--line)}
.fprog__k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.fprog__v{font-family:var(--serif);font-weight:600;font-size:clamp(22px,3vw,42px);line-height:1;color:var(--molten-hot);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.fprog__d{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);text-align:right}
@media(max-width:760px){.fprog__row{grid-template-columns:1fr auto;gap:4px 14px}.fprog__d{grid-column:1/-1;text-align:left}}

/* station cards (crossfade, full-bleed) */
.fstation{position:absolute;inset:0;z-index:1}
.fstation__card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:16px;padding:clamp(96px,15vh,150px) clamp(24px,8vw,120px);
  background:radial-gradient(120% 90% at 50% 40%, #17110c, #0a0706)}
.fstation__n{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--molten)}
.fstation__t{font-family:var(--serif);font-weight:600;font-size:clamp(30px,5.4vw,74px);line-height:1.02;letter-spacing:-.015em;color:var(--ink);max-width:17ch}
.fstation__s{font-size:clamp(14px,1.5vw,19px);line-height:1.6;color:#d6cabb;font-weight:300;max-width:46ch}
.fstation__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--line-strong);padding:5px 12px;border-radius:40px;margin-top:6px}

/* scope columns */
.fscope{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.fscope__col{background:var(--bg);padding:clamp(24px,3vh,40px) clamp(15px,1.5vw,26px)}
.fscope__g{font-family:var(--mono);font-size:11px;color:var(--molten);letter-spacing:.12em}
.fscope__l{font-family:var(--serif);font-size:clamp(19px,2vw,28px);font-weight:600;margin:14px 0 14px;color:var(--ink);letter-spacing:-.01em}
.fscope__col ul{list-style:none}
.fscope__col li{font-size:12.5px;line-height:1.85;color:var(--ink-dim);font-weight:300;border-top:1px solid var(--line);padding:7px 0}
@media(max-width:900px){.fscope{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.fscope{grid-template-columns:1fr}}

/* ---- LIVE (engine on): pin + scrub reveals ---- */
body.fchap-live .fchap--program{height:250vh}
body.fchap-live .fchap--station{height:300vh}
body.fchap-live .fchap--scope{height:210vh}
body.fchap-live .fchap__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
body.fchap-live .fprog__row{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
body.fchap-live .fprog__row.in{opacity:1;transform:none}
body.fchap-live .fstation__card{opacity:0;visibility:hidden;transition:opacity .65s ease,visibility .65s}
body.fchap-live .fstation__card.on{opacity:1;visibility:visible}
body.fchap-live .fscope__col{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
body.fchap-live .fscope__col.in{opacity:1;transform:none}

/* static fallback: station cards stack instead of overlapping */
body:not(.fchap-live) .fstation{position:relative}
body:not(.fchap-live) .fstation__card{position:relative;border-bottom:1px solid var(--line)}

/* mobile: program + scope are too tall to pin one-screen — flow them static (station stays
   pinned; one card fits). HUD goes inline, rows/cols all visible. */
@media(max-width:820px){
  body.fchap-live .fchap--program, body.fchap-live .fchap--scope{height:auto}
  body.fchap-live .fchap--program .fchap__pin, body.fchap-live .fchap--scope .fchap__pin{position:relative;height:auto;display:block}
  body.fchap-live .fchap--program .fprog__row, body.fchap-live .fchap--scope .fscope__col{opacity:1;transform:none}
  body.fchap-live .fchap--program .fchap__rail, body.fchap-live .fchap--scope .fchap__rail{display:none}
  body.fchap-live .fchap--program .fchap__hud, body.fchap-live .fchap--scope .fchap__hud{position:relative;top:auto;left:auto;right:auto;margin-bottom:22px}
}