/* ============================================================
   RAYSONS — About Us · "Forged over forty years"
   A cinematic scrollyteller, sibling to the index film. Dark
   molten stage, Cormorant/bronze type, building photos graded
   into foundry plates, GSAP scroll-driven. Reuses styles.css
   tokens + chrome.  (Plates upgrade to image-to-video clips later.)
   ============================================================ */

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,.16), transparent 52%),
  radial-gradient(90% 60% at 50% 116%, rgba(166,121,46,.12), 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}

/* ============================================================
   THE FILM — sticky-canvas scrollyteller (hero + 4 buildings)
   Same "scroll scrubs a fixed film" feel as index.
   ============================================================ */
.film{position:relative;z-index:10;height:240vh}  /* one played brand-film moment (was 560vh of 5 scrubbed beats) */
.film__pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#050302}  /* noir base — the canvas paints over it; never let the hero bleed behind later frames */
.film #stage{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;transform-origin:50% 47%}
/* the single casting clip that plays behind the beats — molten-graded to sit in index's world */
.film__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:brightness(.68) contrast(1.08) saturate(1.05);will-change:transform,opacity}
/* valve match-cut: shows the exact frame the index lift ended on, then dissolves into the film */
.film__matchcut{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;
  pointer-events:none;opacity:0;will-change:opacity}
/* arriving from the index lift: the valve frame is HELD on first paint (a frozen continuation
   of the index shot), then about-film.js dissolves it as you scroll into the story. On a direct
   visit the loader covers the entrance, so the match-cut never shows. */
.from-lift .film__matchcut{opacity:1}
/* reduced-motion: no held cut, just the film */
@media(prefers-reduced-motion:reduce){ .from-lift .film__matchcut{opacity:0} }
/* MATCH-CUT — About opens on the EXACT frame the index lift ended on (same valve),
   so this is barely a move: a whisper of scale + a brief noir wash to mask the page
   swap, then the part is simply here and the reel begins. */
/* ONLY where the browser cannot dissolve pages itself. This wash exists to hide a hard
   navigation — "the navigation instant", as the note above says. With cross-document
   view transitions there IS no hard navigation to hide, so it stops being a mask and
   becomes a second transition stacked on the first: you dissolve into About, and About
   immediately fades up from black again. That double beat was the cut. */
@supports not (view-transition-name: none){
  @media(prefers-reduced-motion:no-preference){
    .film #stage,.film__vid{animation:filmEmerge 1.1s cubic-bezier(.16,.84,.28,1) both}
    @keyframes filmEmerge{0%{transform:scale(1.05);opacity:.5}100%{transform:scale(1);opacity:1}}
    .film__pin::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
      background:#050302;animation:filmVoidLift .8s ease-out both}
    @keyframes filmVoidLift{0%{opacity:.55}100%{opacity:0}}
  }
}
.film__vig{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(125% 95% at 50% 50%, transparent 42%, rgba(7,5,4,.66) 100%),
  linear-gradient(180deg, rgba(7,5,4,.72) 0%, transparent 22%, transparent 76%, rgba(7,5,4,.94) 100%)}
.film__floor{position:absolute;left:0;right:0;bottom:0;height:40vh;z-index:1;pointer-events:none;
  background:radial-gradient(60% 120% at 50% 130%, rgba(166,121,46,.16), transparent 70%)}
.film__overlays{position:absolute;inset:0;z-index:10}
.fact{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:max(96px,12vh) clamp(20px,6vw,110px) max(90px,12vh);opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s;will-change:transform,opacity}
.fact.on{visibility:visible;opacity:1}
.fact .inner{width:100%;max-width:1280px;margin:0 auto}
.fact.center{text-align:center;align-items:center}
.fact.center .inner{display:flex;flex-direction:column;align-items:center}
.fact .f-tag{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--molten);
  text-shadow:0 1px 12px rgba(7,5,4,.9)}
.fact .f-name{font-family:var(--serif);font-weight:600;line-height:.98;letter-spacing:-.01em;
  font-size:clamp(40px,7vw,120px);margin:16px 0 18px;text-shadow:0 3px 30px rgba(7,5,4,.85)}
.fact .f-name em{font-style:italic;font-weight:500;color:var(--bronze-lite)}
.fact .f-line{font-size:clamp(15px,1.5vw,20px);line-height:1.6;color:#dcd0c1;max-width:48ch;font-weight:300;
  text-shadow:0 1px 14px rgba(7,5,4,.85)}
.fact.center .f-line{margin-left:auto;margin-right:auto}
.fact .f-yr{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--bronze-lite)}
.fact .ahero__sub{margin-top:26px}
.film__count{position:absolute;top:clamp(90px,12vh,118px);right:clamp(20px,6vw,110px);z-index:11;
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.film__count b{color:var(--molten-hot)}
@media(max-width:760px){.fact .f-name{font-size:clamp(36px,11vw,72px)}}

/* ============================================================
   HERO — ties to the index: faint pour behind the title
   ============================================================ */
.ahero{position:relative;z-index:10;height:100svh;min-height:600px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 6vw}
.ahero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.ahero__bg img{width:100%;height:100%;object-fit:cover;opacity:.42;
  filter:brightness(.7) saturate(1.15) contrast(1.05);transform:scale(1.06)}
.ahero__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))}
.ahero__title{font-family:var(--serif);font-weight:600;line-height:.94;letter-spacing:-.015em;
  font-size:clamp(54px,11vw,184px);text-wrap:balance;text-shadow:0 4px 40px rgba(7,5,4,.85)}
.ahero__title em{font-style:italic;font-weight:500;color:var(--molten-hot)}
.ahero__sub{margin:30px auto 0;max-width:62ch;font-family:var(--mono);font-size:clamp(11px,1.15vw,13px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-lite);line-height:1.9;
  text-shadow:0 1px 14px rgba(7,5,4,.9)}

/* ============================================================
   KINETIC STATEMENT — giant two-tone Cormorant
   ============================================================ */
.kinetic{padding:clamp(120px,22vh,280px) clamp(20px,6vw,110px)}
.kinetic .line{font-family:var(--serif);font-weight:600;line-height:1.0;letter-spacing:-.02em;
  font-size:clamp(42px,8.4vw,150px);color:var(--ink-dim);text-wrap:balance;max-width:16ch;
  text-shadow:0 2px 30px rgba(7,5,4,.7)}
.kinetic .line .hot{color:var(--ink)}
.kinetic .line em{font-style:italic;font-weight:500;color:var(--bronze-lite)}

/* ============================================================
   BUILDING CHAPTERS — pinned, graded foundry plates
   ============================================================ */
/* NB: override styles.css's legacy WebGL `.chapter` (position:fixed; opacity:0;
   visibility:hidden) which would otherwise hide these building chapters. */
.chapter{position:relative!important;inset:auto!important;opacity:1!important;visibility:visible!important;
  z-index:10;height:100svh;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:clamp(28px,5vw,80px);padding:0 clamp(20px,6vw,110px);transition:none}
.chapter__plate{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);
  will-change:transform}
.chapter__plate img{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;will-change:transform;
  /* molten foundry grade — masks low-res + unifies aesthetic */
  filter:sepia(.28) saturate(1.25) contrast(1.12) brightness(.82) hue-rotate(-8deg)}
.chapter__plate::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg, rgba(7,5,4,.18), rgba(7,5,4,.42)),
  radial-gradient(110% 90% at 50% 40%, transparent 50%, rgba(7,5,4,.66));
  mix-blend-mode:multiply}
.chapter__plate .tint{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg, rgba(201,162,78,.10), transparent 60%);mix-blend-mode:screen}
.chapter__num{position:absolute;top:14px;left:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;color:var(--ink);text-shadow:0 1px 8px #000;z-index:2}
.chapter__copy{max-width:520px}
.chapter__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)}
.chapter__name{font-family:var(--serif);font-weight:600;line-height:1.0;letter-spacing:-.01em;
  font-size:clamp(34px,5.2vw,76px);margin:16px 0 18px;text-shadow:0 2px 24px rgba(7,5,4,.8)}
.chapter__name em{font-style:italic;font-weight:500;color:var(--bronze-lite)}
.chapter__line{font-size:clamp(15px,1.5vw,19px);line-height:1.6;color:#d6cabb;max-width:46ch;font-weight:300;
  text-shadow:0 1px 14px rgba(7,5,4,.8)}
.chapter__yr{display:inline-block;margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--bronze-lite)}
.chapter.flip .chapter__plate{order:2}
@media(max-width:860px){
  .chapter{grid-template-columns:1fr;height:auto;min-height:100svh;padding:max(110px,14vh) clamp(20px,6vw,110px) 10vh;gap:30px}
  .chapter.flip .chapter__plate{order:0}
  .chapter__plate{aspect-ratio:16/11}
}

/* ============================================================
   JOURNEY — pinned ticking-year corridor (1987 → 2027)
   Scroll pins the stage; the year ticks, era panels cross-fade, a giant
   outlined year drifts behind. Driven by about-journey.js (buttery lerp).
   ============================================================ */
.journey{position:relative;z-index:10;height:460vh}
.journey__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;
  padding:0 clamp(20px,6vw,110px)}
.journey__glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(90% 60% at 78% 46%, rgba(201,162,78,.10), transparent 60%),
  radial-gradient(70% 50% at 18% 82%, rgba(166,121,46,.08), transparent 60%)}
/* WebGL flythrough — FIXED whole-page stage (fades in at the journey, carries People/
   Standards/Finale as one camera move). Above the CSS stage (z0), below grain (z3) + content (z10). */
#journeyGL{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block;opacity:0}
/* when the corridor is live: the flat glow becomes a left scrim (keeps the era copy legible over
   the 3D scene), and the flat CSS year watermark is hidden — the 3D pillars carry the years now */
.journey-gl .journey__glow{background:linear-gradient(90deg, rgba(7,5,4,.92) 0%, rgba(7,5,4,.6) 32%, rgba(7,5,4,.14) 55%, transparent 70%)}
.journey-gl .journey__mark{display:none}
/* premium glass milestone cards — the corridor glows faintly through them (matches the reference) */
.journey-gl .journey__items{background:rgba(201,154,78,.16);border-color:rgba(201,154,78,.24)}
.journey-gl .ji{background:rgba(10,7,5,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
/* …and the tail sections join the same world: their opaque cells become glass so the
   flythrough (people field / seals / constellation) glows through everything */
.journey-gl .certs{background:rgba(201,154,78,.14);border-color:rgba(201,154,78,.2)}
.journey-gl .certs .c,.journey-gl .discipline,.journey-gl .client{
  background:rgba(10,7,5,.6);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.journey-gl .client:hover{background:rgba(20,12,8,.72)}
.journey-gl .discipline-grid,.journey-gl .clients{background:rgba(201,154,78,.14);border-color:rgba(201,154,78,.2)}
/* keep the ticking year legible even when a near pillar drifts behind it */
.journey-gl .journey__hud{padding:10px 16px;border-radius:5px;background:radial-gradient(140% 140% at 90% 10%, rgba(7,5,4,.66), transparent 72%)}

/* giant outlined year watermark — bottom-right (matches the reference .era-mark), cross-fades */
.journey__marks{position:absolute;inset:0;z-index:1;pointer-events:none}
.journey__mark{position:absolute;right:clamp(16px,4vw,80px);bottom:clamp(58px,10vh,120px);
  translate:var(--mx,0) 0;font-family:var(--serif);font-weight:700;letter-spacing:-.04em;line-height:1;
  font-size:clamp(90px,17vw,300px);color:transparent;-webkit-text-stroke:1.2px rgba(201,154,78,.30);
  text-shadow:0 0 80px rgba(255,106,26,.06);white-space:nowrap;opacity:0;transition:opacity .9s ease}
.journey__mark.on{opacity:.5}

/* ticking year HUD (top-right) */
.journey__hud{position:absolute;top:clamp(88px,13vh,128px);right:clamp(20px,6vw,110px);z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;pointer-events:none}
.journey__hud-k{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--molten)}
.journey__hud-year{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.6vw,56px);line-height:1;
  color:var(--molten-hot);font-variant-numeric:tabular-nums;text-shadow:0 0 30px rgba(255,138,58,.25),0 2px 24px rgba(7,5,4,.6)}

/* era panels — only the active one is lit; the others cross-fade out */
.journey__eras{position:relative;z-index:2;width:100%;max-width:1120px}
.journey__era{position:absolute;left:0;top:50%;width:100%;
  transform:translateY(calc(-50% + 26px));opacity:0;visibility:hidden;
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),visibility .6s}
.journey__era.on{opacity:1;visibility:visible;transform:translateY(-50%)}
.journey__k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--molten);
  display:inline-flex;align-items:center;gap:14px}
.journey__k::before{content:"";width:28px;height:1px;background:var(--molten);flex:0 0 auto}
.journey__h{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.8vw,72px);line-height:1.0;
  letter-spacing:-.015em;margin:14px 0 30px;color:var(--ink);text-shadow:0 2px 30px rgba(7,5,4,.6);max-width:16ch}
.journey__h em{font-style:italic;font-weight:500;color:var(--molten-hot)}
/* milestone card grid (matches the reference .era: hairline-bordered cells on the dark stage) */
.journey__items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);max-width:1000px}
.journey__items.two{grid-template-columns:1fr 1fr;max-width:760px}
.ji{background:#0b0806;padding:24px 22px;min-height:172px;display:flex;flex-direction:column;
  opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.journey__era.on .ji{opacity:1;transform:none}
.journey__era.on .ji:nth-child(1){transition-delay:.10s}
.journey__era.on .ji:nth-child(2){transition-delay:.20s}
.journey__era.on .ji:nth-child(3){transition-delay:.30s}
.jy{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.2vw,44px);color:var(--molten-hot);
  letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 26px rgba(255,138,58,.18)}
.ji h4{font-size:15.5px;font-weight:600;margin:13px 0 9px;letter-spacing:-.01em;color:var(--ink)}
.ji p{font-size:12.5px;line-height:1.55;color:var(--ink-dim);font-weight:300}

/* progress rail (bottom) — molten fill + era ticks + a glowing travelling knob */
.journey__rail{position:absolute;left:clamp(20px,6vw,110px);right:clamp(20px,6vw,110px);bottom:clamp(46px,7vh,74px);
  z-index:3;height:1px;background:var(--line)}
.journey__rail-fill{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,var(--molten-deep),var(--molten-hot));box-shadow:0 0 14px var(--molten)}
.journey__rail-knob{position:absolute;top:50%;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--molten-hot);box-shadow:0 0 16px var(--molten),0 0 5px rgba(255,255,255,.7);will-change:left}
.journey__tick{position:absolute;top:50%;transform:translate(-50%,-50%);width:1px;height:8px;background:var(--line-strong)}
.journey__tick b{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);font-family:var(--mono);
  font-size:9.5px;font-weight:400;letter-spacing:.14em;color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.journey__tick:first-child b{left:0;transform:none}
.journey__tick:last-child b{left:auto;right:0;transform:none}
/* 9.5px is legible on a desktop rail read at arm's length; on a phone it is not. The four
   year labels have room to grow at this width without colliding. */
@media(max-width:640px){.journey__tick b{font-size:10.5px;letter-spacing:.1em}}
/* grabbable timeline — a taller transparent strip over the 1px rail so it can be dragged;
   the knob grows on hover/drag so the affordance reads. */
.journey__scrub{position:absolute;left:0;right:0;top:-16px;bottom:-16px;z-index:4;cursor:grab;touch-action:none}
.journey__scrub.grabbing{cursor:grabbing}
.journey__scrub:focus-visible{outline:2px solid var(--bronze-lite);outline-offset:6px;border-radius:4px}
.journey__rail:hover .journey__rail-knob,
.journey__rail:has(.journey__scrub.grabbing) .journey__rail-knob,
.journey__rail:has(.journey__scrub:focus-visible) .journey__rail-knob{width:13px;height:13px;margin:-6.5px 0 0 -6.5px}
.journey__rail-knob{transition:width .2s ease,height .2s ease,margin .2s ease}

/* entry choreography — eyebrow → headline reveal in sequence as each era lights (cards stagger already) */
.journey__k,.journey__h{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.journey__era.on .journey__k{opacity:1;transform:none;transition-delay:.04s}
.journey__era.on .journey__h{opacity:1;transform:none;transition-delay:.12s}

/* cinematic vignette over the 3D corridor */
.journey-gl .journey__pin::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 100% at 50% 44%, transparent 50%, rgba(4,2,1,.55) 100%)}

/* fallback: reduced-motion / no-JS → all eras stacked, no pin */
.journey--static{height:auto}
.journey--static .journey__pin{position:relative;height:auto;display:block;padding:clamp(80px,12vh,140px) clamp(20px,6vw,110px)}
.journey--static .journey__marks,.journey--static .journey__rail{display:none}
.journey--static .journey__hud{position:relative;top:auto;right:auto;align-items:flex-start;margin-bottom:34px}
.journey--static .journey__eras{max-width:none}
.journey--static .journey__era{position:relative;opacity:1;visibility:visible;transform:none;margin-bottom:clamp(46px,8vh,90px)}
.journey--static .journey__era .ji{opacity:1;transform:none}

/* MOBILE — two paths:
   (a) corridor NOT running (reduced-motion / no-WebGL) → clean stacked list;
   (b) corridor running (.journey-gl) → keep the pinned 3D corridor, just fit portrait. */
@media(max-width:820px){
  /* (a) stacked fallback — only when the corridor isn't live */
  body:not(.journey-gl) .journey{height:auto}
  body:not(.journey-gl) .journey__pin{position:relative;height:auto;display:block;padding:clamp(88px,13vh,140px) clamp(20px,6vw,40px)}
  body:not(.journey-gl) .journey__marks,body:not(.journey-gl) .journey__rail{display:none}
  body:not(.journey-gl) .journey__hud{position:relative;top:auto;right:auto;flex-direction:row;align-items:baseline;gap:14px;margin-bottom:28px}
  body:not(.journey-gl) .journey__eras{max-width:none}
  body:not(.journey-gl) .journey__era{position:relative;opacity:1!important;visibility:visible!important;transform:none!important;
    margin-bottom:clamp(44px,7vh,80px);padding-top:clamp(28px,5vh,48px);border-top:1px solid var(--line)}
  body:not(.journey-gl) .journey__era:first-of-type{border-top:0;padding-top:0}
  body:not(.journey-gl) .journey__era .ji,body:not(.journey-gl) .journey__era .journey__k,body:not(.journey-gl) .journey__era .journey__h{opacity:1!important;transform:none!important;min-height:0}

  /* (b) LIVE corridor on phone — fit portrait: 1-col cards, tighter type, compact HUD */
  .journey-gl .journey__pin{padding:0 clamp(16px,5vw,26px)}
  .journey-gl .journey__eras{max-width:none}
  .journey-gl .journey__h{font-size:clamp(25px,6.6vw,40px);max-width:14ch;margin:12px 0 20px}
  .journey-gl .journey__items,.journey-gl .journey__items.two{grid-template-columns:1fr;max-width:none}
  .journey-gl .ji{min-height:0;padding:15px 18px}
  .journey-gl .jy{font-size:clamp(22px,6vw,30px)}
  .journey-gl .ji p{font-size:12px}
  .journey-gl .journey__hud{top:clamp(74px,11vh,104px)}
  .journey-gl .journey__hud-year{font-size:clamp(26px,8vw,42px)}
}
/* fallback (static / no-gl) → 1-col cards, all visible */
.journey--static .journey__items,.journey--static .journey__items.two{grid-template-columns:1fr;max-width:none}
.journey--static .journey__era .ji,.journey--static .journey__k,.journey--static .journey__h{opacity:1;transform:none;min-height:0}

/* ============================================================
   MVV / VALUES / CERTS / PEOPLE / FINALE / FOOTER
   ============================================================ */
/* ── PURPOSE + PORTRAIT ──────────────────────────────────────────────────────
   The mission and vision now sit beside the person who holds them. The portrait is
   a cut-out on transparent background, so the work is making it belong to the page
   instead of sitting on top of it:
     · it BLEEDS off the bottom edge rather than floating as a complete rectangle
     · a mask fades the lower third and the inner edge into the page, so there is
       no cut line where the subject stops
     · the site's warm grade + a slight desaturation pull it into the film's palette
   He faces slightly toward camera-left, so placing him on the RIGHT turns him
   into the text — he reads as speaking it, which is the whole point. */
/* STRETCH, so the portrait is measured by the copy beside it. The grid row is defined
   by the Mission/Vision block; the figure fills that row and the image caps at 100% of
   it. He is therefore always exactly as tall as the purpose text — no magic numbers,
   and it stays true at any viewport because it is a relationship, not a fixed size.
   (Sizing by column WIDTH made him 720px tall at 900x1440 and pushed his head out
   through the top of the section.) */
/* ABSOLUTE against .mvv, so the portrait cannot define the height it is meant to be
   measured against. Stretching it as a grid item was circular — the image made the row
   tall, then matched itself to the row it had just made. Out of flow, the row is the
   mission/vision text alone, and height:100% resolves against exactly that.
   left:100% starts him at the instant the vision column ends. */
.purpose__figure{position:absolute;bottom:0;
  height:100%;width:clamp(150px,20vw,260px);
  display:flex;align-items:flex-end;pointer-events:none}
/* Vision — Sujal, to the right of the Vision text with a small breathing gap (not
   overlapping the words, not stranded at the far edge) */
.purpose__figure--right{left:calc(100% - clamp(70px,9vw,150px));justify-content:flex-start}
/* Mission — Satish, to the RIGHT of the Mission column, standing just left of the central
   molten journey line — the same treatment as Sujal, mirrored across the divider. His
   right edge sits at the centre; he faces left into the mission text. */
.purpose__figure--left{right:calc(50% - clamp(4px,1vw,18px));justify-content:flex-end}
/* <picture> is inline by default and has no height of its own, so max-height:100% on
   the img resolved against nothing. It has to carry the height through. */
.purpose__figure picture{display:flex;align-items:flex-end;justify-content:center;
  height:100%;max-height:100%;width:100%}
.purpose__figure img{width:auto;max-width:100%;max-height:100%;
  height:auto;display:block;object-fit:contain;object-position:bottom;
  filter:saturate(.82) contrast(1.04) brightness(.94);
  /* The inner edge dissolves further (14% -> 34%) so he does not END beside the
     vision text — he fades INTO it. A hard left edge that close to the column read
     as two things touching; this reads as one. */
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* the inner edge — the side nearest the text — dissolves so the figure fades INTO the
   words rather than ending in a hard line beside them. Mirrored per side. Both keep the
   same bottom fade. */
/* both figures fade their LEFT (inner) edge — each stands to the right of its text and
   dissolves into the words on its left, mirrored across the central molten line */
.purpose__figure--right img,.purpose__figure--left img{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.5) 82%,transparent 100%),
                     linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 9%,#000 20%,#000 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.5) 82%,transparent 100%),
             linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 9%,#000 20%,#000 100%)}
/* a soft warm pool behind him so he is lit BY the page rather than pasted onto it */
.purpose__figure::before{content:"";position:absolute;inset:auto 0 0 0;height:78%;z-index:-1;
  background:radial-gradient(60% 70% at 50% 78%, rgba(201,162,78,.13), transparent 72%)}

/* CREDIT — a statement beside a real person reads as his, so he is named rather
   than left anonymous. Sits at his feet in the same mono the section labels use. */
.purpose__figure figcaption{position:absolute;left:0;right:0;bottom:0;text-align:center;
  font-family:var(--mono);line-height:1.5;pointer-events:none}
.purpose__figure figcaption b{display:block;font-weight:500;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);text-shadow:0 1px 12px rgba(7,5,4,.95)}
.purpose__figure figcaption span{display:block;margin-top:4px;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bronze-lite);text-shadow:0 1px 12px rgba(7,5,4,.95)}
@media(max-width:900px){
  /* stack in reading order: Mission → Satish → Vision → Sujal */
  .mvv{max-width:100%;display:flex;flex-direction:column}
  .mvv .m:first-of-type{order:1}
  .purpose__figure--left{order:2}
  .mvv .m:last-of-type{order:3}
  .purpose__figure--right{order:4}
  .purpose__figure{position:static;height:auto;width:min(260px,60vw);
    margin:20px auto 0;justify-content:center;opacity:.92}
  .purpose__figure--left img,.purpose__figure--right img{
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%)}
  .purpose__figure img{max-height:300px}
}

/* centred, with room reserved on the RIGHT for Sujar (far right of Vision) */
/* LEFT-ALIGNED to the section, not centred. `margin:… auto` with a reduced max-width
   (the room reserved on the right for Sujal) was pulling the whole block ~114px in from
   the left, so "Our Mission" and "Our Vision" started well inside the heading and the
   lede above them and the column never lined up with anything. The right-hand reserve is
   kept — it is what the portrait stands in — but it now comes off the RIGHT edge only. */
/* LEFT-ALIGNED, same box. `margin:… auto` centred the block, and because its max-width is
   reduced to reserve room for Sujal on the right, centring split that reserve in half and
   pushed the whole thing ~115px in from the left — so "Our Mission" never lined up with
   the heading or the lede above it. Only the margin changes: the WIDTH is identical, which
   matters because both portraits are absolutely positioned against this box (a first
   attempt widened it instead and put Satish straight through the Vision copy). */
.mvv{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);
  margin:clamp(40px,6vh,72px) auto 0 0;max-width:calc(100% - clamp(140px,16vw,240px))}
/* BOTH columns carry the same right inset so the Mission and Vision text measure the
   same width — Mission's clears Satish, Vision's keeps it symmetric (Sujal sits in the
   block's right margin beyond it). Equal padding = equal text width. */
.mvv .m{padding-right:clamp(96px,13vw,190px)}
.mvv .m{padding-top:30px}   /* (glowing top hairlines removed per user) */
.mvv .m h4{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-lite);margin-bottom:18px}
.mvv .m p{font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:#c9beb1;font-weight:300}
@media(max-width:760px){.mvv{grid-template-columns:1fr;gap:10px}}
/* ── SMALL SCREENS — restated HERE, after the desktop rules, because they were losing to
   them. The 900px block further up already stacks these columns and takes the portraits
   out of position, but it sits EARLIER in the file and a media query adds no specificity:
   the plain .mvv rules above overrode it at every width. The result was a phone still
   holding a right-hand gutter reserved for a portrait that is no longer there —
   max-width minus 140px, plus 96px of padding-right per column — which squeezed the
   Mission/Vision text into ~115px and pushed the block's own content outside its box. */
@media(max-width:900px){
  .mvv{display:flex;flex-direction:column;max-width:100%;gap:10px}
  .mvv .m{padding-right:0;padding-top:22px}
}
.values{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(34px,5vh,56px)}
.values .v{background:var(--bg);padding:28px 22px;min-height:180px;display:flex;flex-direction:column}
.values .v .ix{font-family:var(--mono);font-size:11px;color:var(--molten);letter-spacing:.1em}
.values .v h5{font-family:var(--serif);font-size:21px;font-weight:600;margin:16px 0 10px;letter-spacing:-.01em}
.values .v p{font-size:12.5px;line-height:1.55;color:var(--ink-dim);font-weight:300}
@media(max-width:900px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.values{grid-template-columns:1fr}.values .v{min-height:0}}

.certs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);
  border-top:1px solid rgba(166,121,46,.5);margin-top:clamp(34px,5vh,56px)}
.certs .c{background:var(--bg);padding:32px 22px;min-height:160px;display:flex;flex-direction:column;justify-content:flex-end}
.certs .c h4{font-family:var(--serif);font-size:clamp(20px,1.8vw,26px);font-weight:600;color:var(--bronze-lite);letter-spacing:-.01em}
.certs .c p{font-size:12px;line-height:1.45;color:var(--ink-dim);margin-top:10px;font-weight:300}
@media(max-width:900px){.certs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.certs{grid-template-columns:1fr}.certs .c{min-height:0}}

.people{display:flex;flex-direction:column;gap:clamp(28px,5vw,48px);margin-top:clamp(36px,5vh,60px)}
.people .copy p{font-size:clamp(15px,1.4vw,18px);line-height:1.7;color:#c9beb1;font-weight:300;margin-bottom:20px}
.people .copy p b{color:var(--ink);font-weight:600}
.discipline-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);margin-top:clamp(20px,3vh,36px)}
.discipline{background:var(--bg);padding:clamp(28px,4vh,44px) clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:12px}
.discipline__title{font-family:var(--serif);font-size:clamp(26px,3vw,42px);font-weight:600;letter-spacing:.02em;color:var(--ink);text-transform:uppercase}
.discipline__desc{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-dim);line-height:1.7;font-weight:300}
@media(max-width:760px){.people{grid-template-columns:1fr}.discipline-grid{grid-template-columns:1fr}}

.finale{text-align:center}
.finale .marquee{margin-top:44px}

/* ---------- finale CLIENT GRID (replaces the marquee) ---------- */
/* stationary, deliberate, readable — hover/touch reveals country + application.
   hairline grid matches the certs/values language but the hover reveal is the story. */
.clients{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);
  margin-top:clamp(40px,6vh,72px);text-align:left}
.client{background:var(--bg);padding:clamp(26px,3.4vh,40px) clamp(16px,1.6vw,24px);
  min-height:130px;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;
  transition:background .5s ease}
.client:hover{background:#0d0908}
.client__name{font-family:var(--serif);font-size:clamp(18px,1.7vw,25px);font-weight:600;
  letter-spacing:-.01em;color:var(--ink);line-height:1.04}
.client__meta{font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--bronze-lite);
  line-height:1.5;opacity:0;transform:translateY(6px);
  transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)}
.client:hover .client__meta{opacity:1;transform:none}
@media(hover:none){.client__meta{opacity:.92;transform:none}}   /* touch: no hover, so show it */
@media(max-width:900px){.clients{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.clients{grid-template-columns:1fr}.client{min-height:0}}
.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}


/* real logomark in nav — opt out of mix-blend so brand colors aren't inverted */
.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 */
}

/* ============================================================
   JOURNEY — cinematic year-counter timeline (pinned corridor)
   Scroll travels 1987 -> 2027: a giant year ticks up, the active
   era cross-fades, a ghost numeral sits behind, milestones rise.
   ============================================================ */
.tl{position:relative;z-index:10;height:460vh;background:#070504}
.tl__pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#070504}
/* per-era monument clips — the active one fades in; the carved year is the centerpiece */
.tl__mons{position:absolute;inset:0;z-index:0}
.tl__mon{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease;transform:scale(1.03)}
.tl__mon.on{opacity:1}
/* slow ken-burns as each carved-year monument becomes active — life without the heavy video */
@media(prefers-reduced-motion:no-preference){
  .tl__mon.on{animation:tlKen 9s ease-out both}
  @keyframes tlKen{from{transform:scale(1.07)}to{transform:scale(1.01)}}
}
/* scrims: keep the top (nav) and the bottom (era text) legible, leave the mid clear so
   the carved year reads strong */
.tl__veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg, rgba(5,3,2,.72) 0%, rgba(5,3,2,.12) 16%, transparent 38%,
                  transparent 50%, rgba(5,3,2,.74) 80%, rgba(5,3,2,.97) 100%)}

/* intro head (top-left) */
.tl__head{position:absolute;top:clamp(74px,11vh,116px);left:clamp(20px,6vw,110px);z-index:3;max-width:60ch}
.tl__k{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--molten)}
/* quiet, compact header — the ERA headline below is the hero, so keep this small */
.tl__title{font-family:var(--serif);font-weight:600;line-height:1.04;letter-spacing:-.01em;
  font-size:clamp(20px,2.4vw,34px);color:var(--ink-faint);margin-top:10px}
.tl__title em{font-style:italic;font-weight:500;color:var(--bronze-lite)}

/* progress rail (left edge, vertically centred — clear of the bottom era strip) */
.tl__rail{position:absolute;left:clamp(16px,4vw,64px);top:50%;transform:translateY(-50%);z-index:3;
  list-style:none;display:flex;flex-direction:column;gap:14px;margin:0;padding:0}
.tl__rail li{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);opacity:.5;
  transition:opacity .5s,color .5s}
.tl__rail li b{display:inline-flex;align-items:center;justify-content:center;width:34px;height:24px;
  border:1px solid var(--line);border-radius:3px;font-style:normal;font-size:11px;color:var(--ink-faint);
  transition:border-color .5s,color .5s,background .5s}
.tl__rail li.on{opacity:1;color:var(--bronze-lite)}
.tl__rail li.on b{border-color:var(--bronze-deep);color:var(--bronze-lite)}
.tl__rail li.cur{color:var(--molten)}
.tl__rail li.cur b{border-color:var(--molten);color:var(--molten);background:rgba(255,106,26,.08);box-shadow:0 0 16px rgba(255,106,26,.18)}

/* era info now lives in a BOTTOM STRIP — the monument (with its carved year) is the
   hero above it; only the active era is shown, cross-fading as you travel */
.tl__stage{position:absolute;inset:0;z-index:2;pointer-events:none}
.tl__era{position:absolute;left:clamp(20px,6vw,110px);right:clamp(20px,6vw,110px);bottom:clamp(40px,7vh,82px);
  opacity:0;visibility:hidden;transform:translateY(26px);
  transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),visibility .45s}
.tl__era.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.2,1) .12s,transform .7s cubic-bezier(.2,.7,.2,1) .12s,visibility .6s}
.tl__ghost{display:none}
.tl__era-k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--molten);margin-bottom:12px}
.tl__era-h{font-family:var(--serif);font-size:clamp(26px,3.4vw,48px);font-weight:600;line-height:1.02;letter-spacing:-.01em;margin-bottom:22px;color:var(--ink);text-shadow:0 2px 24px rgba(0,0,0,.6)}
.tl__era-h em{font-style:italic;font-weight:500;color:var(--bronze-lite)}
/* milestones: a clean compact row of year + detail (the monument is the pillar now) */
.tl__items{display:flex;align-items:flex-start;gap:clamp(20px,3vw,64px);border-top:1px solid var(--line);padding-top:18px}
.tl__items .it{flex:1 1 0;max-width:34ch;position:relative;
  opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.tl__era.on .tl__items .it{opacity:1;transform:none}
.tl__era.on .tl__items .it:nth-child(1){transition-delay:.14s}
.tl__era.on .tl__items .it:nth-child(2){transition-delay:.24s}
.tl__era.on .tl__items .it:nth-child(3){transition-delay:.34s}
.tl__items .it .y{display:block;font-family:var(--serif);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(22px,2vw,30px);line-height:1;color:var(--bronze-lite);margin-bottom:9px;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.tl__items .it h4{font-size:14.5px;font-weight:600;margin-bottom:6px;letter-spacing:-.01em;color:var(--ink)}
.tl__items .it p{font-size:12px;line-height:1.5;color:var(--ink-dim);font-weight:300;text-shadow:0 1px 10px rgba(0,0,0,.5)}

@media(max-width:820px){
  .tl{height:520vh}
  .tl__head{max-width:80vw}
  .tl__rail{flex-direction:row;flex-wrap:wrap;gap:8px;left:clamp(20px,6vw,110px);top:auto;bottom:auto;transform:none;
    /* keep the rail above the bottom strip */ margin:0}
  .tl__rail{top:clamp(150px,21vh,210px)}
  /* shrink the header so it never collides with the rail below it */
  .tl__title{font-size:clamp(18px,5.2vw,24px);margin-top:7px}
  /* push the carved YEAR up into the clear upper zone so it never sits behind the text sheet */
  .tl__mon{object-position:center 26%}
  /* the era copy becomes a solid dark bottom-sheet — text always reads over the bright monument */
  .tl__stage{pointer-events:auto}
  .tl__era{left:0;right:0;bottom:0;padding:20px clamp(18px,6vw,26px) calc(22px + env(safe-area-inset-bottom,0px));
    max-height:64vh;overflow:hidden;
    background:linear-gradient(to top,rgba(6,4,3,.97) 0%,rgba(6,4,3,.95) 52%,rgba(6,4,3,.82) 74%,rgba(6,4,3,0) 100%)}
  .tl__era-k{margin-bottom:9px}
  .tl__era-h{font-size:clamp(22px,6.4vw,32px);margin-bottom:16px}
  .tl__items{flex-direction:column;gap:13px;border-top:0;padding-top:4px}
  .tl__items .it{max-width:none}
  .tl__items .it .y{font-size:clamp(20px,5.4vw,26px);margin-bottom:4px}
  .tl__items .it h4{font-size:14px}
  .tl__items .it p{font-size:12px;line-height:1.45}
}
/* very short / small phones: trim the third milestone so the sheet never overflows its cap */
@media(max-width:820px) and (max-height:740px){
  .tl__items .it:nth-child(3){display:none}
  .tl__era-h{margin-bottom:12px}
}

/* graceful fallback: no JS / reduced-motion -> show every era stacked, no pin tricks */
.no-tl .tl,.reduced .tl{height:auto}
.no-tl .tl__pin,.reduced .tl__pin{position:relative;height:auto;padding:clamp(80px,14vh,160px) 0}
.no-tl .tl__stage,.reduced .tl__stage{position:relative;display:block;gap:0}
.no-tl .tl__era,.reduced .tl__era{position:relative;opacity:1;visibility:visible;transform:none;margin:0 auto clamp(48px,9vh,120px)}
.no-tl .tl__era .it,.reduced .tl__era .it{opacity:1;transform:none}
.no-tl .tl__year,.reduced .tl__year{display:none}

/* ============================================================
   EXTRA MOBILE FIXES
   ============================================================ */

/* .fact overlay: tighten padding on phones so text is never cut by notch */
@media(max-width:640px){
  .fact{padding:max(80px,10vh) clamp(16px,5vw,28px) max(60px,8vh)}
}
/* landscape phones: even tighter vertical padding */
@media(max-width:860px) and (max-height:500px){
  .fact{padding:max(60px,8vh) clamp(16px,5vw,28px) max(40px,6vh)}
  .fact .f-name{font-size:clamp(28px,8vw,52px)}
}

/* tl__head: narrow phones — prevent collision with rail */
@media(max-width:480px){
  .tl__head{max-width:calc(100vw - 110px)} /* leave room for the rail on the left */
  .tl__k{font-size:10px}
  .tl__title{font-size:clamp(16px,5vw,22px)}
}

/* film counter: hide on very small screens to avoid crowding */
@media(max-width:420px){.film__count{display:none}}

/* about sections: tighten padding on phones */
@media(max-width:480px){
  .sec{padding:clamp(72px,13vh,120px) clamp(16px,5vw,28px)}
}

/* ══════════════════════════════════════════════════════════════════════════════
   THE CERTIFICATE — the one claim on this page a buyer can independently check
   ══════════════════════════════════════════════════════════════════════════════ */
.cert{display:grid;grid-template-columns:minmax(280px,.85fr) 1fr;gap:clamp(28px,4vw,64px);
  align-items:center;margin-top:clamp(24px,4vh,44px)}
.cert__doc{position:relative;display:block;border:1px solid var(--line-strong);border-radius:4px;
  overflow:hidden;background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.42);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease,border-color .4s ease}
.cert__doc img{width:100%;height:auto;display:block}
.cert__doc:hover{transform:translateY(-4px);border-color:var(--molten);
  box-shadow:0 40px 90px rgba(0,0,0,.5)}
/* the document is a real link, so it says so — appearing on hover and on keyboard focus */
.cert__open{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:linear-gradient(0deg,rgba(7,5,4,.88),transparent);
  opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.cert__doc:hover .cert__open,.cert__doc:focus-visible .cert__open{opacity:1;transform:none}
.cert__open i{font-style:normal;color:var(--molten-hot);margin-left:6px}

.cert__h{font-family:var(--serif);font-weight:600;line-height:1;letter-spacing:-.015em;
  font-size:clamp(34px,4.6vw,64px);color:var(--ink)}
.cert__h em{font-style:italic;font-weight:500;color:var(--bronze-lite)}
.cert__scope{margin-top:14px;font-size:clamp(15px,1.5vw,19px);line-height:1.6;
  color:#c9beb1;font-weight:300;font-style:italic;max-width:44ch}
.cert__dl{margin-top:clamp(22px,3vh,32px);display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--line);border:1px solid var(--line)}
.cert__dl > div{background:var(--bg);padding:16px 18px}
.cert__dl dt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:7px}
.cert__dl dd{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.cert__verify{margin-top:20px;font-size:13.5px;line-height:1.65;color:var(--ink-dim);
  font-weight:300;max-width:52ch}

@media(max-width:900px){
  .cert{grid-template-columns:1fr;gap:28px}
  .cert__doc{max-width:min(420px,86vw);margin:0 auto}
}
@media(max-width:520px){.cert__dl{grid-template-columns:1fr}}
/* the certificate is a white document — it needs no theming, but its frame and the
   panels around it do (the .certs family it replaced carried dark glass on journey-gl) */
[data-theme="light"] .cert__doc{border-color:rgba(22,18,14,.18);box-shadow:0 24px 60px rgba(22,18,14,.14)}
[data-theme="light"] .cert__dl > div{background:#faf6ef}
[data-theme="light"] .cert__dl{background:rgba(22,18,14,.14);border-color:rgba(22,18,14,.14)}
[data-theme="light"] .cert__scope{color:#4c443a}
[data-theme="light"] :is(.cert__h,.cert__dl dd){color:#16120e}
[data-theme="light"] .cert__verify{color:#4c443a}
[data-theme="light"] .cert__h em{color:#8a5a12}
[data-theme="light"] .cert__dl dt{color:#6d6357}
[data-theme="light"] .journey-gl .cert__dl > div{background:rgba(255,255,255,.82)}