/* =========================================================
   GPJ × NISSAN — capabilities landing
   Palette: accent GPJ green #25EAB4 (was #c61935) · #d8d9db · #000000 · #ffffff · #aaaaaa
   Type: Nissan Brand (Bold / Regular / Light)
========================================================= */
@font-face{font-family:"Nissan";src:url(../fonts/NissanBrandW01-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Nissan";src:url(../fonts/NissanBrandW01-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nissan";src:url(../fonts/NissanBrandW01-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --red:#25EAB4; --red-d:#1fcf9e; --acc-t:var(--red);
  --silver:#d8d9db; --black:#000; --white:#fff; --grey:#aaaaaa;
  --ink:#000; --paper:#000; --line:rgba(255,255,255,.18); --mute:#aaaaaa;
  --gut:clamp(16px,3.2vw,48px);
  --hdr:72px;
  --ease:cubic-bezier(.2,.7,0,1);
  --f:"Nissan",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--f);font-weight:400;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
button,select{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--red);color:#fff;padding:10px 14px;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
[data-theme="red"] :focus-visible{outline-color:#fff}

.wrap{padding-inline:var(--gut);max-width:1680px;margin-inline:auto;position:relative}

/* ---------- type ---------- */
.display{font-weight:700;text-transform:uppercase;letter-spacing:-.025em;line-height:.86;font-size:clamp(40px,9.2vw,168px)}
.display-s{font-weight:700;text-transform:uppercase;letter-spacing:-.015em;line-height:.95;font-size:clamp(26px,3.4vw,54px)}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:.6em}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block}
.lede{font-size:clamp(17px,1.35vw,21px);line-height:1.45;font-weight:300;max-width:46ch}
.small{font-size:14px;line-height:1.55;color:inherit;opacity:.75;max-width:52ch}
.note{font-size:13px;letter-spacing:.02em;opacity:.7;border-left:2px solid var(--red);padding-left:12px;max-width:52ch}
.bignum{position:absolute;right:var(--gut);bottom:clamp(40px,6vw,100px);font-weight:300;font-size:clamp(120px,22vw,380px);line-height:.8;letter-spacing:-.06em;pointer-events:none;opacity:.9}

/* ---------- buttons ---------- */
.btn{--bg:transparent;--fg:currentColor;--bd:currentColor;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:52px;padding:0 20px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);text-decoration:none;text-transform:uppercase;font-weight:700;font-size:13px;letter-spacing:.08em;border-radius:0 0 14px 0;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn .chev{transition:transform .35s var(--ease)}
.btn:hover .chev{transform:translateX(5px)}
.btn--red{--bg:var(--red);--fg:#fff;--bd:var(--red)}
.btn--red:hover{--bg:var(--red-d);--bd:var(--red-d)}
.btn--light{--bg:#fff;--fg:#000;--bd:#fff}
.btn--light:hover{--bg:var(--red);--fg:#fff;--bd:var(--red)}
.btn--ghost{--fg:#fff;--bd:rgba(255,255,255,.5)}
.btn--ghost:hover{--bd:#fff;--bg:rgba(255,255,255,.08)}
.btn--black{--bg:#000;--fg:#fff;--bd:#000}
.btn--black:hover{--bg:#fff;--fg:#000;--bd:#fff}
.btn--dark{--bg:#000;--fg:#fff;--bd:#000}
.btn--dark:hover{--bg:var(--red);--bd:var(--red)}
.btn--sm{min-height:40px;font-size:12px;gap:16px;padding:0 14px}
.btn--lg{min-height:64px;font-size:14px;padding:0 24px;min-width:min(100%,360px)}
.icon-btn{width:40px;height:40px;border:1px solid currentColor;background:transparent;cursor:pointer;display:grid;place-items:center;font-size:15px;transition:background .25s,color .25s}
.icon-btn:hover{background:#000;color:#fff;border-color:#000}

.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid currentColor;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;background:transparent;text-decoration:none;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.chip::before{content:"";width:6px;height:6px;background:var(--red);border-radius:50%}
.chip:hover,.chip[aria-pressed="true"]{background:var(--red);border-color:var(--acc-t);color:#fff}
.chip:hover::before,.chip[aria-pressed="true"]::before{background:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px}

[data-placeholder]{position:relative}
.ph{display:inline-flex;align-items:center;gap:6px;border:1px dashed currentColor;padding:2px 8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;opacity:.85}
.ph::before{content:"Placeholder";background:#ffd400;color:#000;padding:0 4px}

/* ---------- WebGL layer ---------- */
#gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:1;transition:opacity .8s var(--ease)}
.gl-fallback{position:fixed;inset:0;z-index:0;pointer-events:none;display:none;
  background:radial-gradient(60% 50% at 70% 45%,rgba(37,234,180,.35),transparent 70%),radial-gradient(40% 40% at 20% 80%,rgba(216,217,219,.12),transparent 70%),#000}
html.no-webgl .gl-fallback{display:block}
html.no-webgl #gl{display:none}
.gl-labels{position:fixed;inset:0;z-index:1;pointer-events:none}
.gl-labels span{position:absolute;left:0;top:0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap;opacity:0;transition:opacity .4s,color .3s;text-shadow:0 0 12px #000}
.gl-labels span.on{opacity:.9}
.gl-labels span.hot{color:var(--acc-t);opacity:1}
main{position:relative;z-index:2}
section{position:relative}
main > section:not(.gl-zone){background:var(--paper)}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;height:var(--hdr);z-index:50;display:flex;align-items:center;gap:24px;padding-inline:var(--gut);color:#fff;transition:color .4s,background .4s,transform .5s var(--ease)}
.hdr.is-light{color:#000}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr::before{content:"";position:absolute;inset:0;background:linear-gradient(#000c,#0000);opacity:1;transition:opacity .4s;pointer-events:none;z-index:-1}
.hdr.is-light::before{opacity:1;background:linear-gradient(rgba(242,242,243,.94),rgba(242,242,243,.0));}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand__gpj{width:40px;height:40px;display:block}
.brand__x{opacity:.6}
.brand__nissan{width:38px;height:auto;transition:filter .4s}
.hdr.is-light .brand__nissan{filter:invert(1)}
.nav__list{display:flex;gap:26px}
.nav__list a{text-decoration:none;text-transform:uppercase;font-size:12px;font-weight:700;letter-spacing:.1em;position:relative;padding:6px 0}
.nav__list a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav__list a:hover::after,.nav__list a[aria-current="true"]::after{transform:scaleX(1)}
.menu-btn{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative}
.menu-btn span:not(.sr){position:absolute;left:10px;right:10px;height:2px;background:currentColor;transition:transform .3s}
.menu-btn span:nth-child(1){top:17px}.menu-btn span:nth-child(2){top:25px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* chapter index */
.chapters{position:fixed;left:var(--gut);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:2px;color:#fff;transition:color .4s}
.chapters.is-light{color:#000}
.chapters::before{content:"";position:absolute;left:-10px;top:6px;bottom:6px;width:1px;background:currentColor;opacity:.25}
.chapters a{display:flex;gap:10px;align-items:center;text-decoration:none;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.45;padding:5px 0;transition:opacity .3s}
.chapters b{font-weight:700;width:18px}
.chapters a span{opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s var(--ease);white-space:nowrap;padding:3px 8px;background:var(--red);color:#fff}
.chapters a[aria-current="true"]{opacity:1}
.chapters a[aria-current="true"] b{color:var(--acc-t)}
.chapters a:hover,.chapters a:focus-visible{opacity:1}
.chapters a:hover span,.chapters a:focus-visible span{opacity:1;transform:none}
.chapters.is-red a[aria-current="true"] b{color:#fff}

/* ---------- HERO ---------- */
.hero{min-height:100svh;padding:calc(var(--hdr) + 2vh) var(--gut) 22px;display:grid;grid-template-rows:auto 1fr auto;gap:24px;overflow:hidden}
.hero__kicker{opacity:.9;padding-left:clamp(0px,6vw,110px)}
.hero__title{font-size:clamp(38px,min(10.4vw,15vh),200px);align-self:center;padding-left:clamp(0px,6vw,110px)}
.hero__title .l{display:block;overflow:hidden;padding-bottom:.02em}
.hero__title .l>span{display:inline-block}
.hero__title .l2,.hero__title .l4{padding-left:clamp(40px,14vw,280px)}
.hero__title .l3{color:var(--acc-t)}
.hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-left:clamp(0px,6vw,110px)}
.hero__lede{font-size:clamp(17px,1.4vw,22px);font-weight:300;max-width:40ch;line-height:1.4}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero__ctas .btn{min-width:280px}
.hero__meta{display:flex;gap:22px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-left:clamp(0px,6vw,110px)}

.scroll-cue{position:absolute;right:var(--gut);bottom:28px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;writing-mode:vertical-rl;opacity:.6}
.scroll-cue::after{content:"";display:block;width:1px;height:48px;background:#fff;margin:10px auto 0;animation:cue 2s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- RELATIONSHIP (light, studio) ---------- */
.rel{--paper:var(--silver);background:linear-gradient(#f2f2f3,var(--silver) 60%);color:#000;--line:rgba(0,0,0,.2);--mute:#555;overflow:hidden}
.rel__head{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(32px,5vw,96px);padding-top:clamp(110px,14vh,180px);padding-bottom:clamp(120px,20vw,300px);padding-left:max(var(--gut),130px)}
.rel__head .eyebrow{grid-column:1/-1}
.rel__title{font-size:clamp(44px,6.6vw,124px)}
.rel__side{display:flex;flex-direction:column;gap:40px;padding-top:12px}
.reveal-line{display:block;overflow:hidden}
.reveal-line>span{display:inline-block}

.specs{display:grid;border-top:1px solid var(--line)}
.specs>div{display:grid;grid-template-columns:minmax(120px,40%) 1fr;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.specs dt{font-weight:300;font-style:italic;font-size:clamp(28px,2.6vw,42px);letter-spacing:-.03em;line-height:1}
.specs dd{text-align:right;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.specs--big dt{font-size:clamp(34px,3.6vw,60px)}

/* horizontal work track */
.work{position:relative;padding:0 0 clamp(60px,8vw,120px)}
.work__intro{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:0 var(--gut) 24px max(var(--gut),130px)}
.work__hint{font-size:14px;max-width:40ch}
.kbd{display:inline-block;margin-left:8px;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-t)}
.work__list{display:flex;gap:clamp(12px,1.4vw,24px);padding-inline:max(var(--gut),130px) var(--gut);width:max-content}
.wcard{width:clamp(280px,32vw,560px);flex:none;position:relative}
.wcard__img{aspect-ratio:4/5;overflow:hidden;background:#111;position:relative;border-radius:0 0 28px 0}
.wcard__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.2s var(--ease),filter .6s}
.wcard:hover .wcard__img img{transform:scale(1.04)}
.wcard__img::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,#000a)}
.wcard__type{position:absolute;left:16px;top:16px;z-index:1;background:#fff;color:#000;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px}
.wcard__no{position:absolute;right:16px;top:12px;z-index:1;color:#fff;font-weight:300;font-size:44px;letter-spacing:-.04em;line-height:1}
.wcard__body{display:grid;gap:10px;padding-top:16px}
.wcard h3{font-size:clamp(22px,2vw,32px);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.wcard p{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#444}
.wcard .note2{font-size:14px;text-transform:none;letter-spacing:0;color:#222;max-width:42ch}
.wcard .chips{margin-top:2px}
.wcard .chip{color:#000}

.hello{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:clamp(24px,4vw,72px);background:#000;color:#fff;padding:clamp(24px,4vw,64px) var(--gut) clamp(24px,4vw,64px) max(var(--gut),130px)}
.hello__video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0 0 32px 0;background:#000}
.hello__line{max-width:16ch}
.hello__line::before{content:"";display:block;width:56px;height:4px;background:var(--red);margin-bottom:28px}

.work--native{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.work--native .work__list{padding-bottom:12px}

/* ---------- EXPLORE ---------- */
.explore{padding:clamp(110px,14vh,180px) 0 clamp(80px,10vw,160px);min-height:100vh}
.explore__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,80px);padding-left:max(var(--gut),130px)}
.explore__left{position:sticky;top:calc(var(--hdr) + 24px);align-self:start;height:calc(100vh - var(--hdr) - 48px);display:flex;flex-direction:column;gap:20px}
.explore__head{display:flex;flex-direction:column;gap:20px}
.gl-stage{flex:1;min-height:200px;position:relative}
html.no-webgl .gl-stage{background:radial-gradient(closest-side,rgba(37,234,180,.35),transparent),repeating-radial-gradient(circle,transparent 0 38px,rgba(255,255,255,.06) 39px 40px)}
.explore__title{font-size:clamp(40px,5.4vw,100px)}
.caps{counter-reset:c;border-top:1px solid var(--line);margin-top:clamp(0px,22vh,260px);margin-bottom:12vh}
.cap{border-bottom:1px solid var(--line)}
.cap__btn{all:unset;box-sizing:border-box;display:grid;grid-template-columns:48px 1fr auto;gap:16px;align-items:center;width:100%;padding:clamp(26px,5vh,48px) 4px;cursor:pointer;transition:padding .45s var(--ease)}
.cap__no{font-size:13px;font-weight:700;color:var(--acc-t);letter-spacing:.08em}
.cap__name{font-weight:700;text-transform:uppercase;font-size:clamp(20px,2.1vw,34px);letter-spacing:-.01em;line-height:1}
.cap__line{display:block;font-weight:300;text-transform:none;font-size:15px;letter-spacing:0;margin-top:8px;color:#cfcfd1;max-width:48ch;line-height:1.4}
.cap__go{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.5;transition:opacity .3s,transform .3s var(--ease)}
.cap__btn:hover,.cap__btn:focus-visible,.cap.is-hot .cap__btn{padding-left:18px}
.cap__btn:hover .cap__go,.cap.is-hot .cap__go{opacity:1;transform:translateX(4px);color:var(--acc-t)}
.cap.is-hot .cap__name{color:#fff}

/* ---------- CASES ---------- */
.cases{--paper:#fff;background:#fff;color:#000;--line:rgba(0,0,0,.15);padding:clamp(110px,14vh,180px) 0 clamp(80px,10vw,160px)}
.cases .wrap{padding-left:max(var(--gut),130px)}
.cases__head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px 64px}
.cases__head .eyebrow{grid-column:1/-1}
.cases__title{font-size:clamp(46px,8vw,150px)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:40px 0 28px;padding-top:24px;border-top:1px solid var(--line)}
.filters .chip{color:#000;height:34px;padding:0 14px}
.case-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.4vw,24px)}
.ccard{grid-column:span 4;transition:opacity .4s,filter .4s}
.ccard:first-child{grid-column:span 8}
.ccard.is-dim{opacity:.18;filter:grayscale(1)}
.ccard__btn{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer}
.ccard__img{position:relative;aspect-ratio:16/11;overflow:hidden;background:#111;border-radius:0 0 28px 0}
.ccard:first-child .ccard__img{aspect-ratio:16/8.4}
.ccard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ccard__btn:hover img,.ccard__btn:focus-visible img{transform:scale(1.05)}
.ccard__client{position:absolute;left:16px;bottom:12px;color:#fff;font-weight:700;text-transform:uppercase;font-size:clamp(24px,3vw,56px);letter-spacing:-.02em;line-height:.9;z-index:1}
.ccard__img::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,#000b)}
.ccard__stat{position:absolute;right:14px;top:12px;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:1;background:#fff;color:#000;padding:6px 10px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ccard__meta{display:flex;justify-content:space-between;gap:16px;align-items:start;padding-top:14px}
.ccard__title{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.ccard__view{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-t);white-space:nowrap}
.ccard .chips{margin-top:10px;pointer-events:none}
.ccard .chip{color:#000;height:24px;font-size:10px}

/* ---------- CONNECTED ---------- */
.connected{padding:clamp(110px,14vh,180px) 0 clamp(80px,10vw,140px);min-height:100vh}
.connected .wrap{padding-left:max(var(--gut),130px)}
.connected__head{display:grid;grid-template-columns:1.2fr 1fr;gap:20px 64px;align-items:end}
.connected__head .eyebrow{grid-column:1/-1}
.connected__title{font-size:clamp(44px,7.4vw,136px);grid-row:span 2}
.journey__stage{height:clamp(240px,38vh,420px);margin-top:clamp(24px,4vw,56px)}
.journey{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(24px,4vw,64px);margin-top:clamp(16px,2vw,32px);align-items:start}
.journey__steps{display:grid;border-top:1px solid var(--line);background:#0009;backdrop-filter:blur(3px)}
.jstep button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;width:100%;padding:13px 6px;border-bottom:1px solid var(--line);cursor:pointer;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:color .3s,padding .4s var(--ease),background .3s}
.jstep button b{font-size:11px;color:var(--mute);font-weight:700}
.jstep button:hover{padding-left:14px}
.jstep button[aria-selected="true"]{background:#fff;color:#000;padding-left:14px}
.jstep button[aria-selected="true"] b{color:var(--acc-t)}
.journey__panel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);align-items:start;background:#000c;backdrop-filter:blur(3px);padding:clamp(16px,2vw,28px);border:1px solid var(--line)}
.jp__img{aspect-ratio:4/5;overflow:hidden;border-radius:0 0 28px 0}
.jp__img img{width:100%;height:100%;object-fit:cover}
.jp__copy{display:flex;flex-direction:column;gap:22px}
.jp__name{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-t)}
.jp__title{font-size:clamp(28px,3vw,52px);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:-.01em}
.jp__block h4{margin:0 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.jp__block p{font-size:17px;font-weight:300;line-height:1.45}
.jp__block .chips .chip{color:#fff}
.jp__nav{display:flex;gap:8px;margin-top:6px}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:28px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--mute)}
.legend li{display:flex;align-items:center;gap:8px;transition:color .3s}
.legend li::before{content:"";width:8px;height:8px;border:1px solid currentColor;border-radius:50%}
.legend li.on{color:#fff}
.legend li.on::before{background:var(--red);border-color:var(--acc-t)}

/* ---------- METHOD ---------- */
.method{--paper:var(--silver);background:var(--silver);color:#000;--line:rgba(0,0,0,.2);--mute:#555;padding:clamp(110px,14vh,180px) 0 clamp(80px,10vw,140px)}
.method .wrap{padding-left:max(var(--gut),130px)}
.method__head{display:grid;grid-template-columns:1.3fr 1fr;gap:20px 64px;align-items:end}
.method__head .eyebrow{grid-column:1/-1}
.method__title{font-size:clamp(44px,7.6vw,140px)}
.steps{margin-top:clamp(48px,7vw,110px);border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:clamp(70px,12vw,220px) minmax(160px,1fr) 1.4fr 1fr;gap:24px;align-items:baseline;padding:clamp(18px,2.2vw,34px) 0;border-bottom:1px solid var(--line);transition:background .4s}
.step__no{font-weight:300;font-size:clamp(46px,7vw,120px);letter-spacing:-.05em;line-height:.8}
.step__name{font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.6vw,44px);letter-spacing:-.01em;line-height:1}
.step__line{font-size:clamp(16px,1.3vw,20px);font-weight:300;max-width:52ch}
.step__detail{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;text-align:right;color:#333}
.step:hover .step__no{color:var(--acc-t)}
.principles{margin-top:clamp(60px,8vw,120px);display:grid;gap:24px}
.principles ul{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,32px)}
.principles li{background:#000;color:#fff;padding:clamp(20px,2.4vw,36px);border-radius:0 0 28px 0;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.principles h3{font-size:clamp(26px,2.6vw,44px);text-transform:uppercase;font-weight:700;letter-spacing:-.01em;line-height:1}
.principles li:nth-child(2){background:var(--red)}
.principles p{font-weight:300;font-size:17px;max-width:30ch}
.scale{margin-top:clamp(60px,8vw,120px);display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,96px);align-items:start}
.scale__copy{display:flex;flex-direction:column;gap:24px}

/* ---------- CLOSE ---------- */
.close{--paper:var(--red);background:var(--red);color:#fff;--line:rgba(255,255,255,.35);padding:clamp(110px,14vh,180px) 0 0}
.close__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,96px);padding-left:max(var(--gut),130px);align-items:end}
.close__grid>div:first-child{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.close__title{font-size:clamp(46px,8.2vw,156px)}
.close__side{display:flex;flex-direction:column;gap:36px}
.people{border-top:1px solid var(--line)}
.person{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.person h3{font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em}
.person p{font-size:13px;opacity:.85;grid-column:1}
.person .ph{grid-column:2;grid-row:1/span 2;color:#fff}
.share__row{display:flex;gap:8px;margin-top:10px}
.share select{flex:1;min-width:0;height:40px;background:transparent;border:1px solid #fff;color:#fff;padding:0 10px;border-radius:0}
.share select option{color:#000}
.share__msg{min-height:20px;font-size:13px;margin-top:8px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:clamp(60px,8vw,120px) var(--gut) 28px max(var(--gut),130px);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.foot a{text-decoration:none}

/* ---------- PANELS ---------- */
.panel{position:fixed;inset:0;z-index:100;display:flex;justify-content:flex-end}
.panel[hidden]{display:none}
.panel__scrim{position:absolute;inset:0;background:#000a;backdrop-filter:blur(4px);opacity:0;transition:opacity .5s var(--ease)}
.panel__body{position:relative;width:min(760px,100%);height:100%;overflow-y:auto;overscroll-behavior:contain;background:#fff;color:#000;transform:translateX(100%);transition:transform .7s var(--ease);--line:rgba(0,0,0,.15)}
.panel.is-open .panel__scrim{opacity:1}
.panel.is-open .panel__body{transform:none}
.panel--case .panel__body{width:min(1180px,100%)}
.panel__bar{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px clamp(18px,3vw,40px);background:#fffe;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.crumbs{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;display:flex;gap:8px;align-items:center;min-width:0}
.crumbs a{color:var(--acc-t);text-decoration:none}
.crumbs span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel__tools{display:flex;gap:6px}
.pc{padding:clamp(20px,3vw,40px)}
.pc__hero{aspect-ratio:16/8;overflow:hidden;border-radius:0 0 28px 0;margin-bottom:28px;background:#111}
.pc__hero img,.pc__hero video{width:100%;height:100%;object-fit:cover;display:block}
.pc__no{font-weight:300;font-size:64px;letter-spacing:-.05em;line-height:.8;color:var(--acc-t)}
.pc__title{font-size:clamp(34px,4.4vw,64px);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;margin:10px 0 18px}
.pc__line{font-size:19px;font-weight:300;max-width:40ch}
.pc__sec{border-top:1px solid var(--line);padding:22px 0;display:grid;grid-template-columns:150px 1fr;gap:20px}
.pc__sec h3{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#555;padding-top:4px}
.pc__sec h3 b{color:var(--acc-t);margin-right:6px}
.pc__sec p{font-size:17px;line-height:1.5;font-weight:300}
.pc__list li{padding:9px 0 9px 22px;border-bottom:1px solid var(--line);position:relative;font-size:15.5px}
.pc__list li:last-child{border-bottom:0}
.pc__list li::before{content:"";position:absolute;left:0;top:17px;width:10px;height:2px;background:var(--red)}
.proof{all:unset;box-sizing:border-box;display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;cursor:pointer;background:#000;color:#fff;padding:10px;border-radius:0 0 20px 0;width:100%}
.proof img{width:100%;aspect-ratio:4/3;object-fit:cover}
.proof b{display:block;font-size:20px;text-transform:uppercase;letter-spacing:-.01em}
.proof span{font-size:13px;opacity:.75;display:block;margin-top:4px}
.proof em{font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--acc-t);display:block;margin-top:10px}
.proof:hover{background:var(--red)}.proof:hover em{color:#fff}
.pc__cta{display:flex;gap:10px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line)}
.pc__cta .btn{flex:1;min-width:220px}

.case__top{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end;margin-bottom:22px}
.case__client{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--acc-t)}
.case__arc{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);margin-top:8px}
.case__arc>div{padding:22px 22px 22px 0;border-right:1px solid var(--line)}
.case__arc>div+div{padding-left:22px}
.case__arc>div:last-child{border-right:0}
.case__arc h3{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#555;margin-bottom:10px;font-weight:700}
.case__arc h3 b{color:var(--acc-t)}
.case__arc p{font-size:16px;font-weight:300;line-height:1.5}
.case__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:1px solid var(--line)}
.case__stats div{padding:18px 18px 18px 0;border-right:1px solid var(--line)}
.case__stats div:last-child{border-right:0}
.case__stats dt{font-size:clamp(30px,3.4vw,52px);font-weight:300;font-style:italic;letter-spacing:-.03em;line-height:1}
.case__stats dd{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-top:6px}
.case__imgs{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-bottom:24px}
.case__imgs img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;max-height:440px}
.case__imgs.one{grid-template-columns:1fr}
.case__imgs>:first-child{border-radius:0 0 0 0}
.case__imgs>:last-child{border-radius:0 0 28px 0}
.case__caps{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:20px 0;border-top:1px solid var(--line)}

body.panel-open{overflow:hidden}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(28px)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .chapters{display:none}
  .rel__head,.explore__grid,.cases .wrap,.connected .wrap,.method .wrap,.close__grid,.work__intro,.hello{padding-left:var(--gut)}
  .work__list{padding-left:var(--gut)}
  .hero__kicker{padding-left:0}
  .step{grid-template-columns:80px 1fr 1.4fr}
  .step__detail{grid-column:2/-1;text-align:left}
}
@media (max-width:900px){
  :root{--hdr:62px}
  .nav{position:fixed;inset:var(--hdr) 0 auto 0;background:#000;color:#fff;transform:translateY(-120%);transition:transform .5s var(--ease);padding:12px var(--gut) 24px;z-index:-1}
  .nav.is-open{transform:none}
  .nav__list{flex-direction:column;gap:0}
  .nav__list a{display:block;font-size:24px;padding:14px 0;border-bottom:1px solid #333;letter-spacing:0}
  .menu-btn{display:block}
  .hdr__cta{display:none}
  .rel__head,.explore__grid,.connected__head,.method__head,.close__grid,.scale,.hello,.cases__head{grid-template-columns:1fr}
  .explore__left{position:relative;top:0;height:auto}
  .explore__left .gl-stage{flex:none;height:78vw;max-height:440px}
  .caps{margin-top:8px}
  .cap__btn{padding:22px 4px}
  .gl-labels{display:none}
  .journey__stage{height:56vw}
  .ccard,.ccard:first-child{grid-column:span 12}
  .journey{grid-template-columns:1fr}
  .journey__steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border:0;gap:6px;padding-bottom:6px}
  .jstep{flex:none;scroll-snap-align:start}
  .jstep button{border:1px solid var(--line);padding:10px 12px}
  .journey__panel{grid-template-columns:1fr}
  .jp__img{aspect-ratio:16/10}
  .principles ul{grid-template-columns:1fr}
  .principles li{min-height:0}
  .case__arc{grid-template-columns:1fr}
  .case__arc>div,.case__arc>div+div{padding:18px 0;border-right:0;border-bottom:1px solid var(--line)}
  .pc__sec{grid-template-columns:1fr;gap:10px}
  .proof{grid-template-columns:100px 1fr}
  .case__imgs{grid-template-columns:1fr}
  .hello__line{max-width:none}
  .bignum{display:none}
}
@media (max-width:600px){
  .hero__ctas .btn{min-width:0;width:100%}
  .hero__title .l2,.hero__title .l4{padding-left:12vw}
  .step{grid-template-columns:56px 1fr}
  .step__line,.step__detail{grid-column:2}
  .specs>div{grid-template-columns:1fr;gap:4px}
  .specs dd{text-align:left}
  .work__intro{flex-direction:column;align-items:flex-start}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .rv{opacity:1;transform:none}
  .wcard__img img{transform:none}
}
html.reduced .js .rv{opacity:1;transform:none}

/* =========================================================
   v2 — graphic quality pass
========================================================= */

/* ---------- grain ---------- */
.grain{position:fixed;inset:-100px;z-index:95;pointer-events:none;opacity:.075;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 -.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-40px,22px)}40%{transform:translate(28px,-36px)}60%{transform:translate(-18px,-12px)}80%{transform:translate(36px,30px)}100%{transform:translate(0,0)}}

/* ---------- cursor label ---------- */
.cursor{position:fixed;left:0;top:0;z-index:96;pointer-events:none;width:0;height:0}
.cursor span{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(0);display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:transform .45s var(--ease)}
.cursor.on span{transform:translate(-50%,-50%) scale(1)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
[data-cursor]{cursor:none}
@media (hover:none),(pointer:coarse){[data-cursor]{cursor:pointer}}

/* ---------- hero v2 ---------- */
.hero__bgvid{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
html.no-webgl .hero__bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;filter:blur(6px);z-index:-1;transform:scale(1.08)}
.hero__meta{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.hero__tags{display:flex;gap:22px;flex-wrap:wrap}
.hero__tags span::before{content:"+ ";color:var(--acc-t)}
.watch{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;cursor:pointer;color:#fff;padding:6px 6px 6px 6px;border:1px solid var(--line);border-radius:0 0 18px 0;transition:border-color .3s,background .3s}
.watch:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.watch__thumb{width:88px;height:50px;overflow:hidden;background:#111;flex:none}
.watch__thumb video{width:100%;height:100%;object-fit:cover}
.watch__txt{display:flex;flex-direction:column;gap:2px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.watch__txt b{color:#fff;font-size:12px}
.watch__ic{width:34px;height:34px;display:grid;place-items:center;background:var(--red);font-size:11px;margin-right:4px}

/* ---------- FILM ---------- */
.film{background:#000;height:260vh}
.film__pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.film__frame{position:absolute;inset:0;clip-path:inset(22% 26% 22% 26% round 0 0 48px 0);will-change:clip-path}
.film__loop{width:100%;height:100%;object-fit:cover;transform:scale(1.25);will-change:transform}
.film__shade{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 50%,transparent 30%,rgba(0,0,0,.65)),linear-gradient(transparent 55%,rgba(0,0,0,.75))}
.film__word{position:absolute;left:0;right:0;top:50%;margin:0;text-align:center;font-weight:700;text-transform:uppercase;letter-spacing:-.035em;line-height:.8;font-size:clamp(48px,10.5vw,200px);white-space:nowrap;pointer-events:none;z-index:2;mix-blend-mode:difference;color:#fff}
.film__word--l{transform:translateY(-102%)}
.film__word--r{transform:translateY(2%)}
.film__word span{display:inline-block;will-change:transform}
.film__ui{position:absolute;left:max(var(--gut),130px);bottom:clamp(28px,6vh,64px);z-index:3;display:flex;flex-direction:column;gap:18px;align-items:flex-start;max-width:520px}
.film__line{font-size:clamp(20px,1.9vw,30px);font-weight:300;line-height:1.2}
.film__play{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:16px;cursor:pointer;color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px}
.film__play small{display:block;font-size:10px;letter-spacing:.16em;color:var(--mute);margin-top:4px;font-weight:700}
.film__play-ic{width:72px;height:72px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-size:16px;transition:transform .5s var(--ease),background .3s;box-shadow:0 0 0 0 rgba(37,234,180,.5);animation:pulse 2.4s infinite}
.film__play:hover .film__play-ic{transform:scale(1.12);background:#fff;color:#000}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,234,180,.55)}70%{box-shadow:0 0 0 26px rgba(37,234,180,0)}100%{box-shadow:0 0 0 0 rgba(37,234,180,0)}}
.film__ph{color:#fff}
.film__corner{position:absolute;z-index:3;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.4}
.film__corner--tl{display:none}
.film__corner--br{right:var(--gut);bottom:clamp(28px,6vh,64px);font-variant-numeric:tabular-nums}
.film__corner--br::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:10px;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.js .film__ui,.js .film__corner{opacity:0}
html.reduced .film__ui,html.reduced .film__corner{opacity:1}
html.reduced .film{height:auto}
html.reduced .film__pin{position:relative}
html.reduced .film__frame{clip-path:none}

/* ---------- player ---------- */
.player{position:fixed;inset:0;z-index:110;background:#000;display:grid;place-items:center;opacity:0;transition:opacity .5s var(--ease)}
.player[hidden]{display:none}
.player.is-open{opacity:1}
.player__video{width:100%;height:100%;object-fit:contain;background:#000}
.player__close{position:absolute;top:16px;right:16px;color:#fff;border-color:#fff;background:#0008;width:48px;height:48px}
.player__close:hover{background:var(--red);border-color:var(--acc-t)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:0 0 clamp(40px,5vw,72px)}
.marquee__row{display:flex;align-items:center;gap:clamp(24px,3vw,56px);width:max-content;will-change:transform}
.marquee__row span{font-weight:700;text-transform:uppercase;font-size:clamp(44px,7vw,128px);letter-spacing:-.03em;line-height:.9;white-space:nowrap}
.marquee__row span.o{color:transparent;-webkit-text-stroke:1.5px #000}
.marquee__row i{font-style:normal;color:var(--acc-t);font-size:clamp(28px,3.4vw,60px);line-height:1}

/* ---------- DRIVE ---------- */
.drive{background:#000;height:320vh}
.drive__pin{position:sticky;top:0;height:100vh;overflow:hidden}
.drive__canvas,.drive__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drive__still{opacity:0}
html.reduced .drive__still,html.no-seq .drive__still{opacity:1}
.drive__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.15) 55%,rgba(0,0,0,.35)),linear-gradient(transparent 60%,rgba(0,0,0,.7))}
.drive__big{position:absolute;left:0;bottom:-.12em;margin:0;font-weight:700;text-transform:uppercase;font-size:clamp(120px,27vw,520px);letter-spacing:-.05em;line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);white-space:nowrap;pointer-events:none}
.drive__big span{display:inline-block;will-change:transform}
.drive__type{position:absolute;left:max(var(--gut),130px);top:calc(var(--hdr) + 9vh);font-weight:700;text-transform:uppercase;letter-spacing:-.025em;line-height:.9;font-size:clamp(38px,5.6vw,104px);max-width:12ch}
.drive__type .dl{display:block;overflow:hidden;padding-bottom:.04em}
.drive__type .dl>span{display:inline-block}
.drive__type .dl--red{color:var(--acc-t)}
.drive__hud{position:absolute;right:var(--gut);bottom:clamp(24px,5vh,48px);display:flex;align-items:center;gap:16px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.drive__bar{width:140px;height:2px;background:rgba(255,255,255,.25);position:relative}
.drive__bar i{position:absolute;inset:0;background:var(--red);transform-origin:left;transform:scaleX(0)}
html.reduced .drive{height:auto}
html.reduced .drive__pin{position:relative;height:90vh}

/* ---------- POV ---------- */
.pov{position:relative;min-height:110vh;display:flex;align-items:center;overflow:hidden;background:#000}
.pov__video{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform}
.pov__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.45) 60%,rgba(0,0,0,.6))}
.pov__inner{position:relative;z-index:1;width:100%;padding-top:16vh;padding-bottom:16vh;padding-left:max(var(--gut),130px);display:flex;flex-direction:column;gap:32px}
.pov__quote{margin:0}
.pov__quote p{max-width:19ch}
.pov__quote p{font-weight:300;font-size:clamp(32px,4.4vw,80px);line-height:1.02;letter-spacing:-.025em}
.pov__quote em{font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:-.02em}
.pov__quote em:nth-of-type(2){color:var(--acc-t)}
.pov__sig{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:14px}
.pov__sig::before{content:"";width:48px;height:2px;background:var(--red)}
.pov .word{display:inline-block;opacity:.12;transition:opacity .2s}

/* ---------- sign-off ---------- */
.signoff{display:flex;justify-content:center;padding:clamp(60px,8vw,120px) var(--gut) 0}
.signoff__video{width:min(520px,80vw);aspect-ratio:16/9;object-fit:cover;mix-blend-mode:screen;filter:contrast(1.2)}
.close .signoff__video{background:transparent}

/* ---------- image reveals ---------- */
.js .wcard__img,.js .ccard__img,.js .jp__img{clip-path:inset(0 0 0 0 round 0 0 28px 0)}
.js .rv-img{clip-path:inset(100% 0 0 0)}

/* ---------- refinements ---------- */
.rel__title .reveal-line:nth-child(3)>span{color:var(--acc-t)}
.cap__btn{position:relative}
.cap__btn::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.cap__btn:hover::after,.cap.is-hot .cap__btn::after{transform:scaleX(1)}
.ccard__client{transition:transform .6s var(--ease)}
.ccard__btn:hover .ccard__client{transform:translateY(-6px)}

@media (max-width:900px){
  .film{height:200vh}
  .film__word{font-size:clamp(40px,13.5vw,120px)}
  .film__ui{left:var(--gut);right:var(--gut)}
  .film__corner--br{display:none}
  .drive{height:240vh}
  .drive__type{left:var(--gut);font-size:clamp(34px,10vw,64px)}
  .drive__shade{background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.2) 60%,rgba(0,0,0,.6))}
  .pov__inner{padding-left:var(--gut)}
  .watch{width:100%}
  .marquee__row span.o{-webkit-text-stroke-width:1px}
}
@media (prefers-reduced-motion:reduce){.grain{animation:none}.film__play-ic{animation:none}}

/* v3 */
.foot__brand{display:inline-flex;align-items:center;gap:12px}
.foot__brand img{width:28px;height:28px}
.film__ui{gap:14px}
.film__line{font-size:clamp(22px,2.2vw,36px);max-width:22ch}
@media (max-width:900px){.brand__gpj{width:34px;height:34px}}

/* closing lockup */
.lockup{display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,72px);padding:clamp(90px,14vw,220px) var(--gut) 0;border-top:1px solid var(--line);margin:clamp(60px,8vw,120px) var(--gut) 0 max(var(--gut),130px)}
.lockup__nissan{width:clamp(110px,14vw,230px);height:auto}
.lockup__gpj{width:clamp(96px,12vw,200px);height:auto}
.lockup__x{font-weight:300;font-size:clamp(40px,6vw,110px);line-height:1;opacity:.8}
.hdr.is-red::before{opacity:1;background:linear-gradient(var(--red) 55%,rgba(37,234,180,0))}
@media (max-width:900px){.lockup{margin-left:var(--gut)}}
.hdr.is-red .hdr__cta{--bg:#000;--bd:#000}
@media (max-width:600px){
  .person{grid-template-columns:1fr}
  .person .ph{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}
  .share select{min-width:0}
  .foot{padding-left:var(--gut)}
}
@media (max-width:1100px){.foot{padding-left:var(--gut)}}
.close__grid>*{min-width:0}.share__row{min-width:0}.share__row .btn{flex:none}.share select{width:0}

/* ---------- pixel grid over stretched footage ---------- */
/* 1px black / 1px clear checker, pinned to device pixels, hides compression and upscaling artefacts */
.film__frame::after,.drive__pin::after,.pov::after,.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'><rect width='1' height='1' fill='black'/><rect x='1' y='1' width='1' height='1' fill='black'/></svg>");
  background-size:2px 2px;image-rendering:pixelated;opacity:.7}
.hero::after{opacity:.6;z-index:0}
.hero>*:not(.hero__bgvid){position:relative;z-index:1}
.pov::after{opacity:.75}
.drive__pin::after{z-index:0;opacity:.75}
.drive__shade,.drive__big,.drive__type,.drive__hud{z-index:1}
.pov__inner{z-index:2}

@media print{.film__frame::after,.drive__pin::after,.pov::after,.hero::after{display:none}}

/* ---------- legal footer ---------- */
.foot{display:block}
.foot__row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot__row a{text-decoration:none}
.legal{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:12px 40px;align-items:start}
.legal__links{display:flex;gap:20px;flex-wrap:wrap}
.legal__links a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;white-space:nowrap}
.legal__links a:hover{border-bottom-color:#fff}
.legal__text{font-size:10.5px;line-height:1.6;letter-spacing:.02em;text-transform:none;font-weight:400;opacity:.8;max-width:110ch}
@media (max-width:900px){.legal{grid-template-columns:1fr}}

/* closing: Nissan logo + thank you, left aligned */
.thanks{display:flex;align-items:center;gap:clamp(28px,4vw,72px);padding:clamp(80px,12vw,180px) var(--gut) 0 max(var(--gut),130px);margin-top:clamp(60px,8vw,120px);border-top:1px solid var(--line)}
.thanks__logo{width:clamp(120px,15vw,250px);height:auto;flex:none}
.thanks__word{margin:0;font-size:clamp(64px,13vw,250px);line-height:.82;letter-spacing:-.035em}
@media (max-width:1100px){.thanks{padding-left:var(--gut)}}
@media (max-width:600px){.thanks{flex-direction:column;align-items:flex-start;gap:24px}}

/* ---------- GPJ green accent: contrast fixes ---------- */
/* green text on light sections uses a deeper GPJ green for legibility */
.rel,.cases,.method,.panel__body{--acc-t:#0a9b73}
/* ink on green surfaces */
.skip,.chapters a span,.cursor span,.watch__ic,.film__play-ic{color:#000}
.btn--red,.btn--light:hover,.btn--dark:hover{--fg:#000}
.chip:hover,.chip[aria-pressed="true"],.jp__block .chips .chip:hover,.jp__block .chips .chip[aria-pressed="true"]{color:#000}
.principles li:nth-child(2){color:#000}
.proof:hover,.proof:hover em{color:#000}
.chapters.is-red{color:#000}
.chapters.is-red a[aria-current="true"] b{color:#000}
/* header over the green close */
.hdr.is-red{color:#000}
.hdr.is-red .brand__nissan{filter:invert(1)}
.hdr.is-red .hdr__cta{--bg:#000;--fg:#fff;--bd:#000}
.hdr.is-red .hdr__cta:hover{--bg:#fff;--fg:#000;--bd:#fff}
/* green closing section */
.close{color:#000;--line:rgba(0,0,0,.28)}
.close .person .ph{color:#000}
.close .share select{border-color:#000;color:#000}
.close .thanks__logo{filter:invert(1)}
.close .legal__links a{border-bottom-color:rgba(0,0,0,.4)}
.close .legal__links a:hover{border-bottom-color:#000}
[data-theme="red"] :focus-visible{outline-color:#000}

/* ---------- 4D integrated development process ---------- */
.idp{margin-top:clamp(60px,8vw,120px);background:#000;color:#fff;border-radius:0 0 40px 0;padding:clamp(24px,3.4vw,56px);--line:rgba(255,255,255,.16);--acc-t:var(--red)}
.idp__head{display:grid;grid-template-columns:1fr auto;gap:18px 40px;align-items:end}
.idp__head .eyebrow{grid-column:1/-1}
.idp__head .display-s{max-width:20ch}
.idp__tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.idp__tabs button{all:unset;box-sizing:border-box;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:10px 14px;border:1px solid rgba(255,255,255,.35);transition:background .3s,color .3s,border-color .3s}
.idp__tabs button:hover{border-color:#fff}
.idp__tabs button[aria-selected="true"]{background:var(--red);border-color:var(--red);color:#000}
.idp__tabs button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.idp__scroll{margin-top:clamp(28px,3vw,48px);overflow-x:auto;scrollbar-width:thin}
.idp__stage{position:relative;min-width:760px}
.idp__phases{position:relative;height:118px}
.idp__phases::before{content:"";position:absolute;left:12%;right:20%;top:31px;border-top:2px dotted rgba(255,255,255,.35)}
.idp__ph{position:absolute;top:0;width:15.5%;transform:translateX(-50%);text-align:center;cursor:default}
.idp__ph b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:color .3s}
.idp__ph i{display:block;width:12px;height:12px;border-radius:50%;background:#fff;margin:11px auto 12px;transition:background .3s,transform .4s var(--ease)}
.idp__ph p{font-size:12px;line-height:1.45;font-weight:300;opacity:.72;transition:opacity .3s}
.idp__ph:hover i,.idp__ph.on i{background:var(--red);transform:scale(1.4)}
.idp__ph:hover b,.idp__ph.on b{color:var(--red)}
.idp__ph:hover p{opacity:1}
.idp__chart{display:block;width:100%;height:auto;overflow:visible}
.idp__chart text{font-family:inherit;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;fill:#fff}
.idp__chart .ln{fill:none;stroke:#fff;stroke-width:2.5;opacity:.55;transition:opacity .5s,stroke .5s,stroke-width .5s}
.idp__chart .ln--dash{stroke-dasharray:7 7}
.idp__chart .lbl{transition:opacity .5s,fill .5s;opacity:.7}
.idp__chart .lbl.note{font-weight:300;font-style:italic;letter-spacing:.02em;text-transform:none;font-size:12px}
.idp__chart .axis{font-weight:700;font-style:italic;opacity:.7}
.idp__chart .tick{stroke:#fff;opacity:.25;stroke-dasharray:2 4}
.idp__stage[data-mode="all"] .ln{opacity:.8}
.idp__stage[data-mode="all"] .ln[data-lane="strategy"],.idp__stage[data-mode="all"] .ln[data-lane="production"]{stroke:var(--red);opacity:.9}
.idp__stage[data-mode="strategy"] .ln,.idp__stage[data-mode="creative"] .ln{opacity:.22}
.idp__stage[data-mode="strategy"] .lbl,.idp__stage[data-mode="creative"] .lbl{opacity:.35}
.idp__stage[data-mode="strategy"] .ln[data-lane="strategy"],.idp__stage[data-mode="creative"] .ln[data-lane="creative"]{stroke:var(--red);stroke-width:7;opacity:1}
.idp__stage[data-mode="strategy"] .lbl[data-lane="strategy"],.idp__stage[data-mode="creative"] .lbl[data-lane="creative"]{fill:var(--red);opacity:1}
.idp__chart .mk{opacity:0;transition:opacity .4s}
.idp__chart .mk circle{fill:#000;stroke:var(--red);stroke-width:2;transition:fill .25s,r .25s}
.idp__chart .mk text{fill:#fff;font-size:11px;letter-spacing:0;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.idp__chart .mk line{stroke:var(--red);stroke-width:1.5}
.idp__chart .mk.hot circle{fill:var(--red)}
.idp__chart .mk.hot text{fill:#000}
.idp__stage[data-mode="strategy"] .mk[data-s="strategy"],.idp__stage[data-mode="creative"] .mk[data-s="creative"]{opacity:1}
.idp__chart .brk{opacity:0;transition:opacity .4s}
.idp__chart .brk path{fill:none;stroke:#fff;stroke-dasharray:4 4;opacity:.7}
.idp__chart .brk text{font-size:11px;fill:#fff}
.idp__stage[data-mode="creative"] .brk{opacity:1}
.idp__detail{margin-top:clamp(20px,2.4vw,36px);border-top:1px solid var(--line);padding-top:clamp(20px,2.4vw,36px);min-height:60px}
.idp__intro{font-size:clamp(16px,1.3vw,20px);font-weight:300;max-width:62ch;opacity:.85}
.idp__legend{display:flex;gap:10px 28px;flex-wrap:wrap;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-top:18px;opacity:.85}
.idp__legend span{display:inline-flex;align-items:center;gap:10px}
.idp__legend i{width:26px;height:0;border-top:3px solid #fff}
.idp__legend i.acc{border-color:var(--red)}
.idp__legend i.dash{border-top-style:dashed}
.idp__legend i.thin{border-top-width:1px}
.dlist{display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(16px,2vw,32px);counter-reset:d;margin-top:20px}
.dlist li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;padding:12px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.3;cursor:default;transition:color .25s}
.dlist li b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--red);font-size:11px;transition:background .25s,color .25s}
.dlist li:hover b,.dlist li.hot b{background:var(--red);color:#000}
.dlist li em{font-style:normal;display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-top:4px;font-weight:700}
.idp__gallery{margin-top:clamp(48px,6vw,96px)}
.idp__ghead{display:grid;grid-template-columns:auto 1fr;gap:18px 40px;align-items:end}
.idp__ghead .eyebrow{grid-column:1/-1}
.idp__ghead .display-s{max-width:26ch}
.gtiles{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,1.8vw,28px) clamp(12px,1.4vw,22px);margin-top:clamp(24px,3vw,44px)}
.gtile{display:flex;flex-direction:column;gap:12px}
.gtile__img{position:relative;aspect-ratio:16/11;overflow:hidden;background:#fff;border-radius:0 0 18px 0}
.gtile__img img,.gtile__img video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.gtile__img.contain img{object-fit:contain;padding:6px}
.gtile:hover .gtile__img img,.gtile:hover .gtile__img video{transform:scale(1.05)}
.gtile__no{position:absolute;left:8px;top:8px;background:#000;color:#fff;font-size:10px;font-weight:700;letter-spacing:.1em;padding:3px 6px}
.gtile h4{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.15}
.gtile p{font-size:13px;font-weight:300;opacity:.75;line-height:1.35}
.gtile.parallel .gtile__img{outline:2px dashed var(--red);outline-offset:4px}
.gtile.parallel h4{color:var(--red)}
.gtile.parallel p{font-style:italic}
@media (max-width:1100px){.gtiles{grid-template-columns:repeat(3,1fr)}.dlist{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.idp__head,.idp__ghead{grid-template-columns:1fr}.idp__tabs{justify-content:flex-start}}
@media (max-width:600px){.gtiles{grid-template-columns:repeat(2,1fr)}.dlist{grid-template-columns:1fr}.idp{padding:20px 16px 28px}.idp__tabs button{padding:9px 11px}}
@media (prefers-reduced-motion:reduce){.idp__chart .ln{transition:none}}

/* ---------- Phase 2 / 3: coming soon + archive ---------- */
.next{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(16px,2vw,32px);margin:clamp(60px,8vw,120px) var(--gut) 0 max(var(--gut),130px)}
.next__card{padding:clamp(24px,3vw,48px);border-radius:0 0 32px 0;display:flex;flex-direction:column;gap:22px;align-items:flex-start;justify-content:space-between;min-height:340px}
.next__soon{background:#000;color:#fff}
.next__archive{border:1.5px solid #000}
.next__title{font-size:clamp(34px,4.4vw,80px);line-height:.9}
.dot--ink{background:var(--red)!important}
.count{display:flex;gap:clamp(10px,1.6vw,26px);flex-wrap:wrap}
.count div{display:flex;flex-direction:column;gap:6px;min-width:clamp(64px,6vw,110px)}
.count b{font-weight:300;font-size:clamp(44px,5.6vw,104px);line-height:.8;letter-spacing:-.04em;color:var(--red);font-variant-numeric:tabular-nums}
.count span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.count__tba{font-size:13px;opacity:.8}
@media (max-width:1100px){.next{margin-left:var(--gut)}}
@media (max-width:900px){.next{grid-template-columns:1fr}.next__card{min-height:0}}
.gtile{gap:4px}.gtile h4{margin:10px 0 4px}
.hdr.is-red .brand__gpj,.close .foot__brand img{border-radius:50%;box-shadow:0 0 0 1.5px #000}

/* ---------- Nissan work: case-study style cards + panel ---------- */
.wcard__btn{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer}
.wcard__btn:focus-visible{outline:2px solid #000;outline-offset:4px}
.wcard__client{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;color:#fff;font-weight:700;text-transform:uppercase;font-size:clamp(26px,2.6vw,46px);letter-spacing:-.02em;line-height:.9;transition:transform .6s var(--ease)}
.wcard__btn:hover .wcard__client{transform:translateY(-6px)}
.wcard__img::after{background:linear-gradient(transparent 45%,#000c)}
.wcard .ccard__title{color:#444;font-size:12px;letter-spacing:.1em;font-weight:700}
.wcard .note2{margin-top:8px}
.wcard .chips{margin-top:10px;pointer-events:none}
.wcard .chip{height:24px;font-size:10px}
.work__place{margin-top:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#555}
.work__note{font-size:17px;font-weight:300;line-height:1.5;max-width:60ch;margin:4px 0 24px}
.work__pending{margin:4px 0 24px}
.wgal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:28px}
.wgal__i{margin:0;overflow:hidden;background:#111;aspect-ratio:4/3}
.wgal__i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.wgal__i:hover img{transform:scale(1.04)}
.wgal__i--lead{grid-column:1/-1;aspect-ratio:16/9}
.wgal--1 .wgal__i--lead{aspect-ratio:16/10}
.wgal>:last-child{border-radius:0 0 28px 0}
.wgal--4{grid-template-columns:repeat(3,1fr)}
.wgal--4 .wgal__i:not(.wgal__i--lead){aspect-ratio:1/1}
@media (max-width:600px){.wgal--4{grid-template-columns:repeat(2,1fr)}}

/* contact: email + phone */
.person__links{grid-column:2;grid-row:1/span 2;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.person__links .btn{text-transform:none;letter-spacing:.02em}
.person__tel{font-size:13px;font-weight:700;letter-spacing:.06em;text-decoration:none;border-bottom:1px solid currentColor}
@media (max-width:600px){.person__links{grid-column:1;grid-row:auto;align-items:flex-start;margin-top:6px}}

/* Phase 3 without a confirmed date */
.count__tba{font-size:clamp(30px,3.4vw,60px);font-weight:300;letter-spacing:-.02em;line-height:1;color:var(--red)}
.wgal--2 .wgal__i{grid-column:1/-1;aspect-ratio:16/9}