/* ═══════════════════════════════════════════════════════════════
   BPCL PALAKKAD TOP INSTALLATION — CASE STUDY
   Single stylesheet · tokens → base → layout → components → media
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────── TOKENS ─────────────────────────── */
:root{
  /* colour */
  --navy:#04101F; --ink:#071B2E; --ink-2:#0A2338;
  --blue:#0A4C8F; --blue-lit:#1D6FBF;
  --yellow:#FFC20E;
  --paper:#F3F0EA; --paper-2:#E7E2D9;
  --text:#0B1622; --text-2:#4A5563;
  --on-dark:#E9EEF4; --on-dark-2:#9BA9BA;
  --line-dark:rgba(255,255,255,.14);
  --line-light:rgba(11,22,34,.14);

  /* type */
  --sans:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --t-disp:clamp(2.1rem,7.2vw,6.4rem);
  --t-h3:clamp(1.5rem,3.4vw,3rem);
  --t-lede:clamp(1.02rem,1.5vw,1.32rem);
  --t-body:clamp(.92rem,1.05vw,1.02rem);
  --t-mono:.54rem;

  /* space */
  --edge:clamp(20px,5vw,84px);
  --maxw:1560px;
  --gap:clamp(20px,3.4vw,56px);
  --sec:clamp(60px,9vh,130px);

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --t-fast:.24s; --t-mid:.6s; --t-slow:1.1s;
}

/* ─────────────────────────── RESET ─────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0; overflow-x:hidden; background:var(--navy); color:var(--on-dark);
  font-family:var(--sans); font-size:var(--t-body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,picture,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
/* <picture> is a transparent wrapper with auto height, so an img inside it
   cannot resolve height:100%. Full-bleed media wrappers need it definite —
   without this the hero and closing images render as a short 16:9 strip. */
.hero__media > picture,
.finale__media > picture{ display:block; width:100%; height:100%; }
h1,h2,h3,h4,p,ul,ol,dl,figure,figcaption{ margin:0; padding:0; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; }
::selection{ background:var(--yellow); color:var(--navy); }

.skip{
  position:fixed; top:-100px; left:12px; z-index:200; background:var(--yellow); color:var(--navy);
  padding:12px 18px; font-family:var(--mono); font-size:.6rem; letter-spacing:.16em;
}
.skip:focus{ top:12px; }

/* ─────────────────────────── TYPE ─────────────────────────── */
.mono{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.2em; text-transform:uppercase; }
.display{
  font-size:var(--t-disp); line-height:.98; letter-spacing:-.042em; font-weight:700;
  text-transform:uppercase; text-wrap:balance;
}
.close-line{
  font-size:var(--t-h3); line-height:1.06; letter-spacing:-.034em; font-weight:650;
  text-transform:uppercase;
}
.label{ color:var(--yellow); margin-bottom:clamp(14px,2vw,22px); }
.lede{ font-size:var(--t-lede); line-height:1.5; letter-spacing:-.014em; color:var(--on-dark); }
.lede--wide,.body--wide{ max-width:62ch; margin-top:clamp(18px,2.4vw,26px); }
.body{ color:var(--on-dark-2); line-height:1.66; }
.section--paper .lede{ color:var(--text); }
.section--paper .body{ color:var(--text-2); }
.section--paper .label{ color:var(--blue); }

/* ─────────────────────────── LAYOUT ─────────────────────────── */
.section{ padding:var(--sec) 0; position:relative; }
.section--ink{ background:var(--navy); }
.section--paper{ background:var(--paper); color:var(--text); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--edge); }
.cols{ display:grid; gap:clamp(16px,2.4vw,40px); margin-top:clamp(22px,3vw,34px); }
@media (min-width:900px){ .cols{ grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,72px); } }
.display + .cols{ margin-top:clamp(24px,3.4vw,44px); }

/* ─────────────────────────── CHROME ─────────────────────────── */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120; background:rgba(255,255,255,.08); }
.progress i{ display:block; height:100%; width:0; background:var(--yellow); transform-origin:0 50%; }
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:110;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px var(--edge); transition:background .5s var(--ease), padding .5s var(--ease);
}
.topbar.is-solid{ background:rgba(4,16,31,.9); padding-top:10px; padding-bottom:10px; }
.topbar__mark{ display:flex; flex-direction:column; gap:3px; color:var(--on-dark); }
.topbar__sub{ color:var(--on-dark-2); font-size:.46rem; }
.topbar__sig{ color:var(--yellow); }
.topnav ul{ display:flex; gap:clamp(10px,1.5vw,22px); }
.topnav a{
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-dark-2); padding:8px 2px; display:inline-flex; align-items:baseline; gap:7px;
  transition:color var(--t-fast) var(--ease);
}
.topnav a i{ font-style:normal; color:rgba(255,255,255,.32); }
.topnav a.is-active i{ color:var(--yellow); }
.topnav a:hover{ color:var(--on-dark); }
.topnav a.is-active{ color:var(--yellow); }
@media (max-width:860px){ .topnav{ display:none; } .topbar__sig{ display:none; } }

/* mobile section indicator */
.mobbar{
  position:fixed; left:0; right:0; bottom:0; z-index:110; display:none;
  justify-content:space-between; align-items:center; gap:12px;
  padding:10px var(--edge); background:rgba(4,16,31,.92);
  border-top:1px solid var(--line-dark);
}
.mobbar__now{ color:var(--yellow); }
.mobbar__jump{ display:flex; gap:8px; }
@media (max-width:860px){ .mobbar{ display:flex; } body{ padding-bottom:52px; } }

/* ─────────────────────────── 01 · HERO ─────────────────────────── */
.hero{ position:relative; min-height:100svh; display:grid; align-items:end; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(calc(1.06 - var(--hp,0) * .06));
  transition:transform .2s linear;
}
.hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(4,16,31,.72) 0%,rgba(4,16,31,.28) 34%,rgba(4,16,31,.9) 100%);
}
.hero__inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100%;
  padding:0 var(--edge) clamp(48px,9vh,110px); }
.hero__place{ color:var(--yellow); margin-bottom:clamp(14px,2.4vh,26px); }
.hero__title{ font-size:var(--t-disp); line-height:.94; letter-spacing:-.045em; font-weight:700; text-transform:uppercase; }
.hero__title .line{ display:block; overflow:hidden; }
.js .hero__title .line > span{ display:block; transform:translateY(106%); transition:transform 1.2s var(--ease-out); transition-delay:calc(var(--i,0) * .1s); }
.hero.is-in .hero__title .line > span{ transform:none; }
.hero__lede{ margin-top:clamp(18px,2.6vw,30px); max-width:48ch; font-size:var(--t-lede); color:var(--on-dark); }
.hero__meta{ margin-top:clamp(16px,2.4vw,24px); color:var(--on-dark-2); }
.hero__cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:clamp(24px,3.6vw,40px);
  padding:12px 0; min-height:44px; color:var(--yellow); border-bottom:1px solid rgba(255,194,14,.4);
  transition:border-color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
.hero__cta:hover{ border-color:var(--yellow); gap:16px; }

/* ──────────────────── 02 · CHALLENGE + STRATEGY ────────────────── */
.strategy{ margin-top:clamp(44px,6vw,80px); border-top:1px solid var(--line-light); padding-top:clamp(28px,4vw,46px); }
.strategy__list{ display:grid; gap:1px; background:var(--line-light); grid-template-columns:repeat(2,1fr); }
.strategy__list li{ background:var(--paper); padding:clamp(18px,2.4vw,28px); position:relative; overflow:hidden; }
.strategy__list li::before{ content:""; position:absolute; left:0; top:0; width:0; height:2px; background:var(--yellow); transition:width .7s var(--ease); }
.strategy__list li:hover::before{ width:100%; }
.strategy__list .n{ color:var(--blue); font-family:var(--mono); font-size:.5rem; letter-spacing:.2em; }
.strategy__list h3{ margin:12px 0 8px; font-size:clamp(1.05rem,1.7vw,1.4rem); letter-spacing:-.024em; font-weight:650; text-transform:uppercase; }
.strategy__list p{ color:var(--text-2); font-size:.9rem; line-height:1.55; }
.contribution{
  margin-top:clamp(30px,4vw,52px); padding-top:clamp(20px,3vw,30px); border-top:1px solid var(--line-light);
  color:var(--blue); line-height:2; text-transform:none; font-size:clamp(.62rem,1vw,.74rem); letter-spacing:.06em;
}

/* ─────────────────────────── 03 · VIEWER ─────────────────────────── */
.viewer{ margin:clamp(28px,4vw,52px) 0 0; padding:0 var(--edge); }
.viewer__stage{
  position:relative; width:100%; aspect-ratio:16/9;
  max-width:calc(80svh * 16 / 9); margin-inline:auto;
  overflow:hidden; background:#05090F; touch-action:pan-y;
}
.vslide{
  position:absolute; inset:0; opacity:0; transform:scale(1.02);
  transition:opacity .7s var(--ease), transform 1.2s var(--ease-out);
}
.vslide.is-on{ opacity:1; transform:none; }
.vslide img{ width:100%; height:100%; object-fit:cover; }
.viewer__hud{
  display:flex; justify-content:space-between; gap:14px; align-items:center;
  padding:14px 2px 0; color:var(--on-dark-2);
}
.viewer__tag{ color:var(--yellow); }
.viewer__nav{ display:flex; align-items:center; justify-content:space-between; gap:clamp(10px,1.6vw,18px); padding:12px 0 0; }
.vnav{
  width:44px; height:44px; display:grid; place-items:center; flex:none;
  border:1px solid var(--line-dark); color:var(--on-dark);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.vnav:hover{ border-color:var(--yellow); color:var(--yellow); }
.viewer__dots,.film__rail{ display:flex; flex:1; gap:6px; }
.vdot,.ftick{
  flex:1; height:26px; position:relative; display:flex; align-items:center;
}
.vdot::after,.ftick::after{
  content:""; display:block; width:100%; height:2px; background:rgba(255,255,255,.2);
  transition:background var(--t-fast) var(--ease);
}
.vdot:hover::after,.ftick:hover::after{ background:rgba(255,255,255,.45); }
.vdot.is-on::after,.ftick.is-on::after{ background:var(--yellow); }

/* ─────────────────────────── DAY / NIGHT ─────────────────────────── */
.dnwrap{ margin-top:clamp(50px,7vh,96px); }
.dn{ margin-top:clamp(22px,3vw,34px); padding:0 var(--edge); }
.dn__frame{
  position:relative; width:100%; aspect-ratio:16/9;
  max-width:calc(74svh * 16 / 9); margin-inline:auto;
  overflow:hidden; background:#05090F; touch-action:pan-y;
}
.dn__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dn__clip{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0); }
.dn__handle{ position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px; background:var(--yellow); transform:translateX(-1px); cursor:ew-resize; }
.dn__grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%; border:1px solid var(--yellow);
  background:rgba(4,16,31,.72); display:grid; place-items:center;
}
.dn__grip::before,.dn__grip::after{ content:""; position:absolute; width:0; height:0; border-block:5px solid transparent; }
.dn__grip::before{ border-right:7px solid var(--yellow); transform:translateX(-8px); }
.dn__grip::after{ border-left:7px solid var(--yellow); transform:translateX(8px); }
.dn__tag{ position:absolute; bottom:clamp(12px,2vw,22px); padding:8px 12px; background:rgba(4,16,31,.7); color:var(--on-dark); font-size:.5rem; }
.dn__tag--l{ left:clamp(12px,2vw,22px); }
.dn__tag--r{ right:clamp(12px,2vw,22px); color:var(--yellow); }
.dn__cap{ margin-top:14px; text-align:center; color:var(--on-dark-2); }

/* ─────────────────────────── 04 · BLUEPRINT ─────────────────────────── */
.link{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(12px,2vw,22px);
  border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
  padding:clamp(18px,2.6vw,28px) 0;
}
.link__from{ color:var(--on-dark-2); }
.link__to{ color:var(--yellow); }
.link__arrow{ height:1px; background:linear-gradient(90deg,rgba(255,255,255,.2),var(--yellow)); position:relative; }
.link__arrow::after{ content:""; position:absolute; right:0; top:50%; width:6px; height:6px; margin-top:-3px; border-top:1px solid var(--yellow); border-right:1px solid var(--yellow); transform:rotate(45deg); }
.link__copy{ grid-column:1 / -1; margin-top:14px; color:var(--on-dark-2); max-width:70ch; }

.bpv{ margin-top:clamp(26px,4vw,48px); padding:0 var(--edge); }
.bpv__viewport{
  position:relative; width:100%; aspect-ratio:16/9;
  max-width:calc(78svh * 16 / 9); margin-inline:auto; overflow:hidden;
  background:#061426; touch-action:none; cursor:crosshair;
}
.bpv__canvas{
  position:absolute; inset:0; transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--z,1));
  transform-origin:50% 50%; transition:transform .5s var(--ease);
  will-change:transform;
}
.bpv__canvas img{ width:100%; height:100%; object-fit:contain; }
.bpv__cross{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity var(--t-fast) var(--ease); }
.bpv__viewport:hover .bpv__cross{ opacity:1; }
.bpv__cross i{ position:absolute; background:rgba(255,194,14,.35); }
.bpv__cross i:first-child{ left:0; right:0; top:var(--cy,50%); height:1px; }
.bpv__cross i:last-child{ top:0; bottom:0; left:var(--cx,50%); width:1px; }
.bpv__bar{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:12px 0 0; }
.bpv__note{ padding-top:14px; color:var(--on-dark-2); }
.bpv__ctl{ display:flex; align-items:center; gap:8px; }
.btn{
  min-width:40px; min-height:40px; padding:0 12px; display:grid; place-items:center;
  border:1px solid var(--line-dark); color:var(--on-dark); font-family:var(--mono); font-size:.62rem;
  transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:hover{ border-color:var(--yellow); color:var(--yellow); }
.btn--wide{ padding:0 16px; font-size:.5rem; letter-spacing:.18em; }
.bpv__val{ color:var(--yellow); min-width:3.4em; text-align:center; }


/* ─────────────────────────── 05 · WALKTHROUGH ─────────────────────────── */
.film{ margin-top:clamp(26px,4vw,48px); padding:0 var(--edge); }
.film__frame{
  position:relative; width:100%; aspect-ratio:16/9;
  max-width:calc(78svh * 16 / 9); margin-inline:auto;
  overflow:hidden; background:#05090F; touch-action:pan-y;
}
.fslide{
  position:absolute; inset:0; opacity:0; transform:scale(1.03);
  transition:opacity .6s var(--ease), transform 1.4s var(--ease-out);
}
.fslide.is-on{ opacity:1; transform:scale(1); }
.fslide img{ width:100%; height:100%; object-fit:cover; }
.film__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.28;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 12.5%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 12.5%);
}
.film__bars{ position:absolute; inset:0; pointer-events:none; }
.film__bars i{ position:absolute; left:0; right:0; height:8svh; background:linear-gradient(180deg,rgba(4,16,31,.55),transparent); }
.film__bars i:last-child{ top:auto; bottom:0; background:linear-gradient(0deg,rgba(4,16,31,.65),transparent); }
.film__hud{ display:flex; justify-content:space-between; gap:14px; align-items:baseline; padding:14px 2px 0; color:var(--on-dark-2); }
.film__count{ color:var(--yellow); }
.film__ctrl{ display:flex; align-items:center; justify-content:space-between; gap:clamp(10px,1.6vw,18px); padding:12px 0 0; }
.closeups{ margin-top:clamp(56px,8vh,110px); }
.closeups__grid{ display:grid; gap:clamp(10px,1.4vw,18px); margin-top:clamp(24px,3.4vw,40px); grid-template-columns:1fr; }
@media (min-width:820px){
  .closeups__grid{ grid-template-columns:1.55fr 1fr; grid-template-rows:auto auto; }
  .closeups__grid figure:first-child{ grid-row:1 / span 2; }
}
.closeups__grid figure{ position:relative; overflow:hidden; background:#05090F; }
/* every close-up keeps the supplied 16:9 framing — never crop a frame */
.closeups__grid img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; }
.closeups__grid figcaption{
  position:absolute; left:0; bottom:0; padding:9px 13px; background:rgba(4,16,31,.7);
  color:var(--on-dark); font-family:var(--mono); font-size:.48rem; letter-spacing:.18em; text-transform:uppercase;
}

/* video slot — only mounted when the film exists; the film itself
   shows ONLY on frame 01 (.is-film), every other frame keeps its
   picture. Any navigation out of 01 pauses + rewinds the film. */
.film__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#05090F; }
.film__frame.is-film .film__grid,.film__frame.is-film .film__stage{ display:none; }

/* ── pf-player — the portfolio page's player UI (css/portfolio-reel.css,
   extracted value-identical; the vars .pf defines page-wide are scoped
   here to the facade). The local <video> reuses .film__video above. ── */
.film .pf-player{
  --ink:#EFF0EA; --azure:#6EA8FF;
  --ease:cubic-bezier(0.22,1,0.36,1); --ease-out:cubic-bezier(0.16,1,0.3,1);
}
.pf-player{ position:relative; width:100%; height:100%; background:#03050B; }
.film__frame .pf-player{ position:absolute; inset:0; z-index:4; }
.film__frame:not(.is-film) .pf-player{ display:none; }
.pf-player__poster{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  padding:0; border:0; background:#03050B; cursor:pointer;
}
.pf-player__poster img{ width:100%; height:100%; object-fit:cover; }
.pf-player__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(3,5,11,0.42),rgba(3,5,11,0.06) 40%,rgba(3,5,11,0.62));
}
.pf-player__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; gap:14px;
  width:clamp(96px,11vw,150px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(239,240,234,0.34); background:rgba(5,7,13,0.28);
  transition:border-color 0.5s var(--ease),background 0.5s var(--ease),transform 0.6s var(--ease-out);
}
.pf-player__play svg{ width:22%; margin-left:8%; fill:var(--ink); }
.pf-player__play b{
  position:absolute; bottom:-34px; left:50%; transform:translateX(-50%);
  font-size:9.5px; font-weight:600; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--ink); white-space:nowrap;
}
.pf-player__poster:hover .pf-player__play{
  border-color:rgba(156,194,255,0.8); background:rgba(46,90,172,0.28);
  transform:translate(-50%,-50%) scale(1.05);
}
.pf-player__poster:focus-visible{ outline:2px solid var(--azure); outline-offset:-4px; }
.pf-player.is-playing .pf-player__video,
.pf-player .film__video{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
@media (max-width:560px){
  .pf-player__play{ width:92px; }
  .pf-player__play b{ bottom:-28px; }
}
@media (prefers-reduced-motion:reduce){
  .pf-player__poster img{ transform:none!important; }
}

/* four-up only when there is room for four readable columns */
@media (min-width:1000px){
  .strategy__list,.areas{ grid-template-columns:repeat(4,1fr); }
}

/* ───────────────────── 06 · LEADERSHIP + DELIVERY ─────────────────── */
.flow{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(6px,1vw,12px);
  margin-top:clamp(34px,5vw,58px); padding-top:clamp(24px,3vw,36px); border-top:1px solid var(--line-light);
}
.flow li{
  display:flex; align-items:center; gap:clamp(6px,1vw,12px);
  font-family:var(--mono); font-size:clamp(.52rem,.9vw,.64rem); letter-spacing:.16em; color:var(--text);
}
.flow li + li::before{ content:""; width:clamp(10px,1.6vw,22px); height:1px; background:var(--blue); display:block; }
.areas{ display:grid; gap:1px; margin-top:clamp(30px,4vw,52px); background:var(--line-light); grid-template-columns:repeat(2,1fr); }
.areas article{ background:var(--paper); padding:clamp(20px,2.6vw,32px); }
.areas .n{ font-family:var(--mono); font-size:.5rem; letter-spacing:.2em; color:var(--blue); }
.areas h3{ margin:12px 0 10px; font-size:clamp(1rem,1.5vw,1.24rem); letter-spacing:-.022em; font-weight:650; text-transform:uppercase; overflow-wrap:anywhere; }
.areas article{ min-width:0; }
@media (max-width:480px){ .areas{ grid-template-columns:1fr; } }
.areas p{ color:var(--text-2); font-size:.9rem; line-height:1.55; }

/* ─────────────────────────── 07 · OUTCOME ─────────────────────────── */
/* an editorial chain of four deliverables — deliberately not a card grid */
.chain-out{ margin-top:clamp(30px,4vw,52px); border-top:1px solid var(--line-light); }
.chain-out li{
  display:grid; grid-template-columns:auto 1fr; gap:0 clamp(14px,2.4vw,32px);
  align-items:baseline; padding:clamp(18px,2.6vw,30px) 0; border-bottom:1px solid var(--line-light);
}
.chain-out .n{ color:var(--blue); }
.chain-out h3{ font-size:clamp(1.15rem,2.2vw,1.9rem); letter-spacing:-.03em; font-weight:650; text-transform:uppercase; }
.chain-out p{ grid-column:2; margin-top:8px; color:var(--text-2); font-size:.92rem; line-height:1.6; max-width:54ch; }
@media (min-width:900px){
  .chain-out li{ grid-template-columns:auto minmax(200px,.4fr) 1fr; }
  .chain-out p{ grid-column:3; margin-top:0; }
}

/* ─────────────────────────── 08 · FINAL ─────────────────────────── */
.finale{
  position:relative; min-height:100svh; display:grid; align-items:end;
  overflow:hidden; background:#05090F;
  padding-bottom:clamp(56px,11vh,132px);
}
.finale__media{ position:absolute; inset:0; }
.finale__media img{
  width:100%; height:100%; object-fit:cover; opacity:.9;
  transform:scale(calc(1.05 - var(--fp,0) * .05));
  transition:transform .2s linear;
}
.finale__inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100%; padding:0 var(--edge); }
.finale__place{ color:var(--yellow); margin-bottom:clamp(16px,2.6vh,30px); }
.finale__title{ font-size:var(--t-disp); line-height:.96; letter-spacing:-.045em; font-weight:700; text-transform:uppercase; }
.finale__title .line{ display:block; overflow:hidden; }
.js .finale__title .line > span{ display:block; transform:translateY(106%); transition:transform 1.2s var(--ease-out); }
.finale.is-in .finale__title .line > span{ transform:none; }
.finale__line{ margin-top:clamp(22px,3.4vw,40px); color:rgba(255,255,255,.84); }
/* A graded scrim, not a veil: the closing photograph stays visible across
   the top two thirds and deepens only where the type is anchored. */
.finale__media::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(4,16,31,.46) 0%, rgba(4,16,31,.30) 34%,
    rgba(4,16,31,.66) 72%, rgba(4,16,31,.90) 100%);
}

/* ─────────────────────── PROJECT AT A GLANCE ─────────────────────── */
.foot__info{ display:grid; gap:14px; margin-top:clamp(30px,4vw,46px); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.foot__info dt{ font-family:var(--mono); font-size:.5rem; letter-spacing:.2em; color:var(--blue); margin-bottom:8px; }
.foot__info dd{ margin:0; font-size:.86rem; color:var(--text-2); line-height:1.6; }

/* narrow screens: subtle prev/next only — no cramped tick rail */
@media (max-width:640px){ .viewer__dots,.film__rail{ display:none; } }


/* ─────────── §02 · SITE → MODEL → BLUEPRINT → 3D → EXPERIENCE ─────────── */
.bridge{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(10px,1.6vw,20px);
  margin-top:clamp(34px,5vw,58px); padding-top:clamp(22px,3vw,34px); border-top:1px solid var(--line-light);
}
.bridge__step{ display:inline-flex; align-items:center; gap:clamp(10px,1.6vw,20px); color:var(--text-2); }
.bridge__step:last-child{ color:var(--blue); }
.bridge__arrow{ position:relative; width:clamp(14px,2.2vw,32px); height:1px; background:var(--blue); }
.bridge__arrow::after{
  content:""; position:absolute; right:0; top:50%; width:5px; height:5px; margin-top:-3px;
  border-top:1px solid var(--blue); border-right:1px solid var(--blue); transform:rotate(45deg);
}

/* ─────────── §03 · specification row ─────────── */
.sub-line{ margin-top:clamp(14px,2vw,20px); color:var(--on-dark-2); }
.metarow{
  display:grid; gap:10px 22px; margin-top:clamp(20px,2.8vw,32px);
  grid-template-columns:auto 1fr; align-items:baseline;
}
.metarow dt{ font-family:var(--mono); font-size:.5rem; letter-spacing:.2em; color:var(--yellow); }
.metarow dd{ margin:0; color:var(--on-dark-2); font-size:.84rem; }
@media (min-width:900px){ .metarow{ grid-template-columns:auto 1fr auto 1fr auto 1fr; } }

/* ─────────── §03 · inspection overlay ─────────── */
.inspect{
  margin-left:auto; padding:12px 2px; min-height:44px; color:var(--on-dark-2);
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.2em;
  border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.inspect:hover{ color:var(--yellow); border-color:var(--yellow); }
.lb{ position:fixed; inset:0; z-index:200; background:rgba(3,10,20,.97); display:grid; grid-template-rows:1fr auto; }
.lb[hidden]{ display:none; }
.lb__stage{ position:relative; overflow:hidden; display:grid; place-items:center; }
.lb__pan{
  width:100%; height:100%; display:grid; place-items:center;
  transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--z,1));
  transition:transform .5s var(--ease);
}
.lb__pan img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.lb.is-zoomed .lb__stage{ cursor:grab; }
.lb__ui{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px var(--edge); border-top:1px solid var(--line-dark);
}
.lb__tag{ color:var(--yellow); }
.lb__ui .btn{ min-width:72px; }
body.is-locked{ overflow:hidden; }

/* ─────────── §06 · seniority line ─────────── */
.senior-line{
  margin-top:clamp(40px,6vw,80px); padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--line-light);
}
/* ─────────────────────────── REVEAL ─────────────────────────── */
.js .rv{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease-out); }
.rv.is-in{ opacity:1; transform:none; }

/* ─────────────────────────── REDUCED MOTION ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .hero__media img,.finale__media img{ transform:none !important; }
  .hero__title .line > span,.finale__title .line > span{ transform:none !important; }
  .rv{ opacity:1; transform:none; }
  .vslide,.fslide{ opacity:0; transition:none; }
  .vslide.is-on,.fslide.is-on{ opacity:1; transform:none; }
}