/* ============================================================
   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 — A PINNED HORIZONTAL RUN ─────────────────────────────
   Three statements, each with the person accountable for it standing beside it, one
   per screen; vertical scroll drives the track sideways, then the page releases.

   The portrait is a cut-out on a transparent ground, so the whole job is making it
   BELONG to the page rather than sit on top of it:
     · it bleeds off the bottom edge instead of floating as a complete rectangle
     · a mask dissolves the lower third and the inner edge, so there is no cut line
       where the subject stops — he fades INTO the words rather than ending beside them
     · the site's warm grade + a slight desaturation pull him into the film's palette
   No border, no plate, no background: a card would make three men into three products.

   EVERYTHING BELOW IS THE STATIC FALLBACK. It is a plain vertical stack and it is what
   renders with no JS, under reduced-motion, and on a phone. The pin is layered on top of
   it under body.hpin-live, which only script adds — so a failure anywhere in about.js
   costs the motion and nothing else. Never move a word or a face into a .hpin-live rule. */
.purpose{margin:clamp(40px,6vh,72px) 0 0;position:relative}
.purpose__track{display:grid;gap:clamp(44px,7vh,86px)}
.purpose__rail{display:none}

.ppanel{display:grid;grid-template-columns:minmax(0,1fr) clamp(190px,26%,330px);
  gap:clamp(20px,4vw,70px);align-items:end}
.ppanel--nofig{grid-template-columns:minmax(0,1fr)}
.ppanel__copy{align-self:center;max-width:34ch}
.ppanel__ix{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
.ppanel__copy h4{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze-lite);margin-bottom:18px}
.ppanel__copy p{font-size:clamp(17px,1.9vw,26px);line-height:1.5;color:#c9beb1;font-weight:300}

/* <picture> is inline by default and has no height of its own, so max-height:100% on the
   img would resolve against nothing. It has to carry the height through. */
.ppanel__fig{margin:0;position:relative;display:flex;align-items:flex-end;justify-content:center;
  height:100%;min-height:0;pointer-events:none}
.ppanel__fig picture{display:flex;align-items:flex-end;justify-content:center;height:100%;width:100%}
/* contain, not cover — a full-length portrait is never cropped at the knees;
   object-position:bottom keeps him standing on the baseline rather than floating. */
.ppanel__fig img{width:auto;max-width:100%;height:auto;display:block;
  object-fit:contain;object-position:bottom;max-height:min(58svh,520px);
  filter:saturate(.84) contrast(1.04) brightness(.95);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.5) 84%,transparent 100%),
                     linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 8%,#000 19%,#000 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.5) 84%,transparent 100%),
             linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 8%,#000 19%,#000 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* a soft warm pool behind him, so he is lit BY the page rather than pasted onto it */
.ppanel__fig::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. Sits at his
   feet, in the same mono the section labels use. */
.ppanel__fig figcaption{position:absolute;left:0;right:0;bottom:0;text-align:center;
  font-family:var(--mono);line-height:1.5;pointer-events:none}
.ppanel__fig 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)}
.ppanel__fig 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)}
[data-theme="light"] .ppanel__copy p{color:#4a4239}
[data-theme="light"] .ppanel__fig figcaption b{color:#16120e;text-shadow:0 1px 12px rgba(239,233,223,.95)}
[data-theme="light"] .ppanel__fig figcaption span{text-shadow:0 1px 12px rgba(239,233,223,.95)}
/* LIGHT THEME KEEPS ONLY THE BOTTOM FADE. The inner-edge dissolve works on the dark
   ground because a dark suit fading into a dark page reads as atmosphere; on the light
   ground the same gradient turns his left arm into a grey smear and his legs into a
   white void — it reads as a printing fault, not a treatment. On a pale page the cutout
   needs no help: there is no rectangle to hide, so only the feet are softened. */
[data-theme="light"] .ppanel__fig img{filter:saturate(.9) contrast(1.02) brightness(1.02);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 82%,rgba(0,0,0,.55) 94%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 82%,rgba(0,0,0,.55) 94%,transparent 100%);
  -webkit-mask-composite:source-over;mask-composite:add}
[data-theme="light"] .ppanel__fig::before{background:radial-gradient(58% 62% at 50% 82%, rgba(166,121,46,.10), transparent 74%)}

/* stack under the copy on phones; the side dissolve becomes a bottom-only fade because
   nothing sits to its left any more */
@media(max-width:900px){
  .ppanel{grid-template-columns:1fr;gap:22px;align-items:start}
  .ppanel__copy{max-width:none}
  .ppanel__fig{width:min(260px,62vw);margin:4px auto 0;opacity:.94}
  .ppanel__fig img{max-height:300px;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%)}
}

/* ── THE PIN (script-only) ─────────────────────────────────────
   The tall block is the scroll budget: one screen to hold the pin, plus 82svh of travel
   per extra panel. --pan is written by about.js from the panel count, so adding a fourth
   statement lengthens the run on its own. svh, not vh: on iOS Safari vh is the LARGE
   viewport, so with the URL bar showing, a 100vh pin is taller than the screen and the
   last panel never fully arrives before the pin lets go. */
body.hpin-live .purpose{height:calc(100svh + (var(--pan,3) - 1) * 82svh)}
body.hpin-live .purpose__stage{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center}
/* grid-auto-columns:100% resolves against the STAGE width, and the items overflow the
   track to the right where the stage clips them. Sizing the panels with a flex-basis
   percentage instead was circular — the track is as wide as its contents, and its
   contents were asking how wide the track was. */
body.hpin-live .purpose__track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  gap:0;width:100%;will-change:transform}
/* The COLUMNS carry the measure, not a max-width on the copy. Capping the text at 26ch
   inside a 1fr column left ~600px of dead space between the last word and the man, which
   read as two unrelated things on one screen rather than one composition. */
body.hpin-live .ppanel{height:min(76svh,700px);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);
  padding-right:clamp(0px,3vw,44px)}   /* breathing room before the next panel's copy */
body.hpin-live .ppanel__copy{max-width:none}
/* A DEFINITE cap, never a percentage: max-height:100% resolved against a containing
   block that was itself sized by this image, so it never applied and the portrait grew
   to the column's width-driven height — 870px in a 684px panel, feet below the fold. */
body.hpin-live .ppanel__fig img{max-height:min(70svh,632px)}
body.hpin-live .ppanel__copy p{font-size:clamp(19px,2.1vw,30px);line-height:1.45}
/* BOTTOM-LEFT and short, under the statement it belongs to — full width would run
   straight through the fixed "Request a quote" pill that sits centred on every page. */
body.hpin-live .purpose__rail{display:block;position:absolute;left:0;width:min(300px,34%);
  bottom:clamp(18px,4.5vh,44px);height:1px;background:var(--line)}
body.hpin-live .purpose__rail-fill{display:block;height:100%;transform:scaleX(0);
  transform-origin:0 50%;background:linear-gradient(90deg,var(--bronze-deep),var(--molten))}

.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}

@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"] [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)}