/* ===== UI scale (one knob) =====
   Every length is calc(N*var(--u)). --u:1px = original size; --u:.9px = the whole interface at 90%, like Ctrl-minus in the browser (tablet/desktop only, phones keep 100%). Set to 1px to undo. */
:root{--u:1px}
@media(min-width:601px){:root{--u:.9px}}
@font-face{font-family:HL Forza;src:url(fonts/Forza-Light.otf) format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:HL Forza;src:url(fonts/Forza-Book.otf) format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:HL Forza;src:url(fonts/Forza-Medium.otf) format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:HL Forza;src:url(fonts/Forza-Bold.otf) format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:HL Forza;src:url(fonts/Forza-Black.otf) format('opentype');font-weight:900;font-style:normal;font-display:swap}
:root{--ink:#000;--paper:#EFEEEE;--red:#FF2800;--grey:#8a8a8a;--line:#262626;--pad:clamp(calc(20*var(--u)),5vw,calc(72*var(--u)));--f:'HL Forza',Forza,Oswald,'Arial Narrow',sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--paper);font-family:var(--f);font-weight:300;font-size:calc(13.5*var(--u));line-height:1.75;letter-spacing:.01em;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:var(--ink)}
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:calc(22*var(--u)) var(--pad);background:linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,0))}
.hdr .logo img{height:calc(56*var(--u));width:auto}@media(max-width:600px){.hdr .logo img{height:calc(31*var(--u))}}
.nav{display:flex;gap:clamp(calc(16*var(--u)),3vw,calc(44*var(--u)));font-weight:500;font-size:calc(13*var(--u));letter-spacing:.18em;text-transform:uppercase}
.nav a{opacity:.7;transition:opacity .2s}
.nav a:hover,.nav a.on{opacity:1}
.nav a.on{color:var(--red)}
.label{font-weight:500;font-size:calc(11*var(--u));letter-spacing:.26em;text-transform:uppercase;color:var(--grey)}
.label.red{color:var(--red)}
h1,h2,h3{font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:-.005em}
h1{font-size:clamp(calc(34*var(--u)),4vw,calc(64*var(--u)))}
h2{font-size:clamp(calc(22*var(--u)),2vw,calc(34*var(--u)));line-height:1.05}
h3{font-size:clamp(calc(15*var(--u)),1.2vw,calc(18*var(--u)));line-height:1.15;letter-spacing:.02em}
p{max-width:62ch}
p+p{margin-top:1em}
.lead{font-size:calc(13.5*var(--u));line-height:1.75;font-weight:300;max-width:54ch;color:#d6d6d6}
.hero{position:relative;height:100vh;min-height:calc(560*var(--u));overflow:hidden}
.hero>img,.hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.6) 28%,rgba(0,0,0,.1) 60%,rgba(0,0,0,.35) 100%)}
.hero .cap{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:clamp(calc(36*var(--u)),7vh,calc(90*var(--u)))}
.hero .cap .label{margin-bottom:calc(18*var(--u));color:var(--paper);opacity:.75}
.hero .cap .lead{margin-top:calc(22*var(--u))}
.sec{padding:clamp(calc(80*var(--u)),12vh,calc(160*var(--u))) var(--pad)}
.sec.tight{padding-top:0}
.sec.paper{background:var(--paper);color:var(--ink)}
.sec.paper .label{color:#555}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(calc(24*var(--u)),5vw,calc(90*var(--u)));align-items:start;margin-bottom:clamp(calc(40*var(--u)),6vh,calc(80*var(--u)))}
.head .label{margin-bottom:calc(16*var(--u))}
@media(max-width:820px){.head{grid-template-columns:1fr}}
.g2,.g3,.g4{display:grid;gap:clamp(calc(8*var(--u)),1vw,calc(14*var(--u)))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:820px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.g2,.g3,.g4{grid-template-columns:1fr}.span2{grid-column:auto}}
.span2{grid-column:span 2}
.full{grid-column:1/-1}
figure{position:relative;overflow:hidden;background:#0b0b0b}
figure img,figure video{width:100%;height:100%;object-fit:cover}
figure.contain img{object-fit:contain}
.r169{aspect-ratio:16/9}.r43{aspect-ratio:4/3}.r1{aspect-ratio:1}.r34{aspect-ratio:3/4}.r219{aspect-ratio:21/9}
figcaption{position:absolute;left:calc(12*var(--u));bottom:calc(10*var(--u));font-size:calc(11*var(--u));letter-spacing:.14em;text-transform:uppercase;color:var(--paper);opacity:.75;text-shadow:0 0 calc(8*var(--u)) #000}
.phase{display:grid;grid-template-columns:clamp(calc(80*var(--u)),12vw,calc(200*var(--u))) minmax(0,1fr);gap:clamp(calc(16*var(--u)),3vw,calc(48*var(--u)));padding:clamp(calc(60*var(--u)),9vh,calc(120*var(--u))) var(--pad);border-top:1px solid var(--line)}
.phase .num{font-weight:900;font-size:clamp(calc(56*var(--u)),9vw,calc(150*var(--u)));line-height:.8;color:var(--red)}
.phase .body>.label{display:block;margin-bottom:calc(14*var(--u))}
.phase .body>h3{margin-bottom:calc(18*var(--u))}
.phase .body>p{margin-bottom:clamp(calc(28*var(--u)),4vh,calc(48*var(--u)))}
@media(max-width:720px){.phase{grid-template-columns:1fr}}
.tile{position:relative;display:block;overflow:hidden;background:#0b0b0b}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.tile.hov img{transform:scale(1.03)}
.tile .t{position:absolute;left:0;right:0;bottom:0;padding:calc(24*var(--u));background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,0))}
.tile .t h3{margin-top:calc(8*var(--u))}
.tile.closed{display:flex;align-items:flex-end;background:#070707;border:1px solid var(--line)}
.tile.closed .t{position:static;background:none}
.tile.closed p{margin-top:calc(12*var(--u));color:var(--grey);font-size:calc(13*var(--u))}
.band{padding:clamp(calc(70*var(--u)),10vh,calc(130*var(--u))) var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band h2 span{color:var(--red)}
.band .cats{margin-top:calc(28*var(--u));font-weight:500;font-size:calc(13*var(--u));letter-spacing:.2em;text-transform:uppercase;color:var(--grey);line-height:2}
.cta{display:inline-flex;align-items:center;gap:calc(14*var(--u));margin-top:calc(32*var(--u));font-weight:500;font-size:calc(13*var(--u));letter-spacing:.22em;text-transform:uppercase;border-bottom:1px solid var(--red);padding-bottom:calc(6*var(--u))}
.cta::after{content:'';width:calc(7*var(--u));height:calc(8*var(--u));background:var(--red);clip-path:polygon(0 0,100% 50%,0 100%);flex:none}
.manifesto{font-weight:700;text-transform:uppercase;font-size:clamp(calc(20*var(--u)),2vw,calc(32*var(--u)));line-height:1.05}
.manifesto div{padding:clamp(calc(18*var(--u)),3vh,calc(32*var(--u))) 0;border-top:1px solid var(--line)}
.manifesto em{font-style:normal;color:var(--red)}
.manifesto small{display:block;margin-top:calc(10*var(--u));font-weight:300;text-transform:none;font-size:clamp(calc(16*var(--u)),1.4vw,calc(20*var(--u)));color:var(--grey);line-height:1.4}
.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(calc(20*var(--u)),3vw,calc(48*var(--u)))}
@media(max-width:1000px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.people{grid-template-columns:1fr}}
.person p{font-size:calc(13.5*var(--u))}
.person .credits{font-size:calc(12*var(--u))}
.person h3{margin:calc(18*var(--u)) 0 calc(6*var(--u))}
.person .label{margin-bottom:calc(16*var(--u));display:block}
.credits{margin-top:calc(20*var(--u));font-weight:500;font-size:calc(11*var(--u));letter-spacing:.12em;text-transform:uppercase;color:var(--grey);line-height:2}
.list{border-top:1px solid var(--line)}
.list a{display:grid;grid-template-columns:minmax(calc(120*var(--u)),.6fr) minmax(0,2fr) auto;gap:calc(24*var(--u));align-items:baseline;padding:calc(26*var(--u)) 0;border-bottom:1px solid var(--line);transition:color .2s}
.list .src{font-weight:500;font-size:calc(13*var(--u));letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.list .ttl{font-size:calc(14*var(--u));line-height:1.5}
.list .dt{font-size:calc(13*var(--u));color:var(--grey)}
@media(max-width:720px){.list a{grid-template-columns:1fr;gap:calc(6*var(--u))}}
form{display:grid;gap:calc(22*var(--u));max-width:calc(720*var(--u))}
label{display:grid;gap:calc(8*var(--u));font-weight:500;font-size:calc(12*var(--u));letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
input,select,textarea{font:inherit;font-size:calc(14*var(--u));letter-spacing:0;text-transform:none;color:var(--paper);background:transparent;border:0;border-bottom:1px solid #333;padding:calc(10*var(--u)) 0;outline:none;border-radius:0}
select option{background:#000}
input:focus,textarea:focus,select:focus{border-color:var(--red)}
textarea{min-height:calc(140*var(--u));resize:vertical}
button{justify-self:start;font:inherit;font-weight:500;font-size:calc(13*var(--u));letter-spacing:.22em;text-transform:uppercase;color:var(--ink);background:var(--paper);border:0;padding:calc(16*var(--u)) calc(34*var(--u));cursor:pointer;transition:background .2s}
button:hover{background:var(--red)}
.note{font-size:calc(12*var(--u));color:var(--grey)}
.ftr{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:calc(24*var(--u));padding:calc(42*var(--u)) var(--pad);border-top:1px solid var(--line);font-size:calc(11*var(--u));letter-spacing:.06em;color:var(--grey)}
.ftr .sig{height:clamp(calc(28*var(--u)),3vw,calc(48*var(--u)));width:auto}
.ftr .meta{display:grid;gap:calc(4*var(--u));text-align:right}
.ftr a:hover{color:var(--red)}
.soon{display:inline-block;padding:calc(8*var(--u)) calc(14*var(--u));border:1px solid var(--red);color:var(--red);font-weight:500;font-size:calc(12*var(--u));letter-spacing:.24em;text-transform:uppercase}
.mt{margin-top:clamp(calc(40*var(--u)),6vh,calc(80*var(--u)))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(calc(24*var(--u)),5vw,calc(90*var(--u)));align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr}}

.credit{position:absolute;z-index:3;right:var(--pad);bottom:calc(18*var(--u));font-size:calc(11*var(--u));letter-spacing:.14em;text-transform:uppercase;color:var(--paper);opacity:.6}
.tile .credit{right:calc(16*var(--u));bottom:auto;top:calc(14*var(--u))}
.pcard{display:block;padding:calc(26*var(--u)) calc(22*var(--u)) calc(30*var(--u));border:1px solid var(--line);min-height:calc(210*var(--u));transition:border-color .2s}
.pcard span{display:block;font-weight:900;font-size:calc(40*var(--u));line-height:1;color:var(--red);margin-bottom:calc(22*var(--u))}
.pcard h4{font-weight:700;text-transform:uppercase;font-size:calc(14*var(--u));letter-spacing:.02em;margin-bottom:calc(10*var(--u))}
.pcard p{font-size:calc(15*var(--u));color:var(--grey)}
.pcard.link:hover{border-color:var(--red)}
.ph{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#070707}
.band .lead{max-width:48ch}

.r45{aspect-ratio:4/5}

.rcad{aspect-ratio:4096/2109}

.band.quote{border:0;text-align:left}
.band.quote h2{font-size:clamp(calc(24*var(--u)),2.6vw,calc(40*var(--u)));max-width:20ch}
.ftr .tag{color:var(--paper);font-weight:500;letter-spacing:.14em;text-transform:uppercase}

.logo-hero img{width:min(calc(760*var(--u)),82vw);height:auto;display:block}

.subsec{margin-top:clamp(calc(56*var(--u)),8vh,calc(96*var(--u)))}
.subsec h4{font-weight:700;text-transform:uppercase;font-size:clamp(calc(20*var(--u)),1.8vw,calc(28*var(--u)));line-height:1;margin-bottom:calc(14*var(--u))}
.subsec p{margin-bottom:clamp(calc(24*var(--u)),3vh,calc(36*var(--u)))}

.intro{position:fixed;inset:0;z-index:100;background:#EB1400;transition:opacity .8s ease}
.intro video{width:100%;height:100%;object-fit:cover}
.intro.out{opacity:0;pointer-events:none}
.intro .skip{position:absolute;right:var(--pad);bottom:calc(28*var(--u));background:none;color:#000;padding:0;font-size:calc(12*var(--u));letter-spacing:.24em}
.intro .skip:hover{background:none;color:#fff}
html.lock{overflow:hidden}

.rproc{aspect-ratio:16/9;background:#000}
.rproc video{object-fit:contain}

.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(calc(8*var(--u)),1vw,calc(14*var(--u)))}
@media(max-width:1100px){.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.g5{grid-template-columns:1fr}}
.g5 .pcard{min-height:0}
.g5 .pcard p{font-size:calc(13*var(--u));line-height:1.7}

.hq{margin:0}
.hq p{max-width:none;font-weight:300;font-size:clamp(calc(24*var(--u)),3vw,calc(50*var(--u)));line-height:1.1;color:var(--red)}
.hero .cap:has(.hq){bottom:clamp(calc(28*var(--u)),5vh,calc(56*var(--u)))}
@media(max-width:820px){.hq .brw{display:none}}
.hq strong{font-weight:700}
.hq-sig{display:block;width:clamp(calc(150*var(--u)),13vw,calc(230*var(--u)));height:auto;margin-top:clamp(calc(18*var(--u)),2.6vh,calc(30*var(--u)))}

.r72{aspect-ratio:7/2}

figure:has(img[src^='img/ct-']) figcaption{top:calc(10*var(--u));bottom:auto}

.rv{opacity:0;transform:translateY(calc(14*var(--u)));transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* mobile header */
@media(max-width:600px){
.hdr{padding:calc(16*var(--u)) calc(20*var(--u));background:linear-gradient(rgba(0,0,0,.95),rgba(0,0,0,.6))}
.nav{gap:calc(16*var(--u));font-size:calc(10*var(--u));letter-spacing:.14em}
.hdr .logo img{height:calc(31*var(--u))}
}
@media(max-width:380px){.nav{gap:calc(11*var(--u));letter-spacing:.1em}}

.tile.stack{display:flex;flex-direction:column;aspect-ratio:auto!important;background:none;overflow:visible}
.tile.stack .media{flex:none;width:100%;aspect-ratio:4/3;overflow:hidden;position:relative}.tile.stack .media img,.tile.stack .media video{display:block;width:100%;height:100%;object-fit:cover}
.tile.stack.r219 .media{aspect-ratio:21/9}
.tile.stack .t{position:static;background:none;padding:calc(16*var(--u)) 0 calc(4*var(--u))}
.tile.stack .credit{top:calc(12*var(--u));right:calc(14*var(--u))}
@media(max-width:600px){
.tile.stack .media,.tile.stack.r219 .media{aspect-ratio:16/9}
.tile.stack .media:has(video){aspect-ratio:1/1}
}

.tile.stack.hov img{transform:none;opacity:.85}
.tile.stack img{transition:opacity .4s}
.tile.stack.hov h3{color:var(--red)}

html,body{overflow-x:clip}
@media(max-width:600px){.ftr{flex-direction:column;align-items:flex-start}.ftr .meta{text-align:left}}

.hq-by{margin-top:calc(10*var(--u));font-weight:500;font-size:calc(11*var(--u));letter-spacing:.22em;text-transform:uppercase;color:var(--paper);opacity:.8}
@media(max-width:600px){
.hero:has(.hq){height:auto;min-height:0;padding-top:calc(70*var(--u))}
.hero>img[src='img/nilu/badge.jpg']{position:relative;inset:auto;height:auto;aspect-ratio:1/1;object-position:50% 50%!important}
.hero:has(.hq)::after{background:linear-gradient(0deg,#000 0%,#000 38%,rgba(0,0,0,0) 62%)}
.hero:has(.hq) .cap{position:relative;left:auto;right:auto;bottom:auto;padding:calc(24*var(--u)) var(--pad) calc(48*var(--u))}
}

.person figure{max-width:calc(200*var(--u))}
@media(max-width:560px){.people{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(28*var(--u)) calc(18*var(--u))}.person figure{max-width:none}.person h3{font-size:calc(14*var(--u))}}

@media(min-width:601px){.g2 .tile.stack .media,.g3 .tile.stack .media{aspect-ratio:4/3!important}}
.g3 .tile.closed{aspect-ratio:auto!important}
.intro-split{display:block;position:relative}
.intro-split>div{width:62%}
.intro-split>figure{position:absolute!important;top:0;bottom:0;right:0;width:33%;height:auto!important;aspect-ratio:auto!important;margin:0}
.intro-split>figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.intro-split>div{width:auto}.intro-split>figure{position:relative!important;width:100%;aspect-ratio:4/3!important;margin-top:calc(28*var(--u))}}

.tile.stack.r169 .media{aspect-ratio:16/9}

.g3 .tile.stack{border:1px solid var(--line);background:#070707}
.g3 .tile.stack .t,.g3 .tile.closed .t{padding:calc(22*var(--u)) calc(32*var(--u)) calc(30*var(--u))}

.tile.stack.r169{border:1px solid var(--line);background:#070707}
.tile.stack.r169 .t{padding:calc(22*var(--u)) calc(32*var(--u)) calc(30*var(--u))}

.hero>video.badge-video{z-index:0;filter:grayscale(1);object-position:50% 50%}
@media(max-width:600px){.hero>video.badge-video{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 50%}.hero:has(.badge-video)>img[src='img/nilu/badge.jpg']{display:none}}
@media(prefers-reduced-motion:reduce){.hero>video.badge-video{display:none}}

@media(max-width:600px){
.hdr{background:#000!important}
.sec{padding-top:calc(52*var(--u));padding-bottom:calc(52*var(--u))}
.sec.tight{padding-top:0}
.band{padding-top:calc(48*var(--u));padding-bottom:calc(48*var(--u))}
.hero:has(.hq) .cap{padding-bottom:calc(36*var(--u))}
.sec:not(.tight){border-top:1px solid rgba(239,238,238,.07)}
}

@media(max-width:820px){.intro-split{display:flex;flex-direction:column}.intro-split>figure{order:-1;margin-top:0!important;margin-bottom:calc(32*var(--u))}}
@media(max-width:600px){section:has(>.intro-split){padding-top:calc(96*var(--u))!important}}

@media(max-width:820px){.intro-split>figure{aspect-ratio:2400/2128!important}}

/* ===== TYPE SYSTEM (single source of truth, overrides earlier ad hoc values) ===== */
:root{--t-body:calc(14*var(--u));--t-small:calc(12.5*var(--u));--t-label:calc(11*var(--u));--t-nav:calc(12*var(--u));--ls-caps:.22em;--c-text:#d6d6d6;--c-sub:#8a8a8a}
@media(max-width:600px){:root{--t-body:calc(15*var(--u));--t-small:calc(13*var(--u));--t-nav:calc(11*var(--u))}}
html{font-weight:400;font-size:var(--t-body);line-height:1.7;letter-spacing:.005em}
h1{font-size:clamp(calc(34*var(--u)),4vw,calc(64*var(--u)));line-height:.95;font-weight:700}
h2,.band.quote h2{font-size:clamp(calc(22*var(--u)),2vw,calc(34*var(--u)));line-height:1.05;font-weight:700}
h3,h4,.pcard h4,.person h3,.subsec h4{font-weight:500;font-size:clamp(calc(16*var(--u)),1.2vw,calc(18*var(--u)));line-height:1.2;letter-spacing:.04em;text-transform:uppercase}
.manifesto{font-size:clamp(calc(20*var(--u)),1.9vw,calc(30*var(--u)));line-height:1.05}
.manifesto small{font-size:var(--t-body);font-weight:400;line-height:1.7;color:var(--c-sub);letter-spacing:.005em}
p,.lead,.person p,.pcard p,.g5 .pcard p,.tile p,.tile.closed p,.list .ttl,input,select,textarea{font-size:var(--t-body);line-height:1.7;font-weight:400}
.lead,.person p,.pcard p,.g5 .pcard p,.tile p,.list .ttl{color:var(--c-text)}
.tile.closed p{color:var(--c-sub)}
.note,.person .credits,.list .dt{font-size:var(--t-small);color:var(--c-sub);font-weight:400}
.label,.credits,figcaption,.credit,.band .cats,.list .src,label,.soon,.hq-by,.ftr .tag{font-size:var(--t-label);font-weight:500;letter-spacing:var(--ls-caps);text-transform:uppercase}
.nav{font-size:var(--t-nav);font-weight:500;letter-spacing:.18em}
button,.cta{font-size:calc(12*var(--u));font-weight:500;letter-spacing:var(--ls-caps)}
.ftr{font-size:var(--t-small);letter-spacing:.02em}
@media(max-width:600px){.nav{letter-spacing:.12em}}
@media(max-width:380px){.nav{letter-spacing:.08em}}

.head h3{font-size:clamp(calc(22*var(--u)),2vw,calc(34*var(--u)));font-weight:700;line-height:1.05;letter-spacing:-.005em}

@media(min-width:601px){.hero .cap:has(.hq){bottom:clamp(calc(14*var(--u)),2.2vh,calc(28*var(--u)))}.hero>video.badge-video{object-position:50% 68%}}

.hq-sign{display:block;margin-top:calc(28*var(--u))}
.hq-sign .hq-by{display:block}
@media(min-width:821px){
.hq-sign{display:inline-block;vertical-align:-.25em;margin:0 0 0 .9em;line-height:1}
.hq-sign .hq-sig{display:block;margin:0}
.hq-sign .hq-by{margin-top:calc(10*var(--u));white-space:nowrap}
.hero .cap:has(.hq){bottom:clamp(calc(8*var(--u)),1.4vh,calc(20*var(--u)))}
}

@media(min-width:821px){
.hq-sign{display:inline-block;position:relative;width:clamp(calc(150*var(--u)),13vw,calc(230*var(--u)));height:0;vertical-align:baseline;margin:0 0 0 .9em;line-height:0}
.hq-sign .hq-sig{position:absolute;left:0;bottom:-.08em;width:100%;margin:0}
.hq-sign .hq-by{position:absolute;left:0;top:calc(14*var(--u));margin:0;line-height:1.2}
.hero .cap:has(.hq){bottom:clamp(calc(34*var(--u)),4.5vh,calc(52*var(--u)))}
}

@media(min-width:821px){
.hq-sign{--cap:calc(clamp(calc(24*var(--u)),3vw,calc(50*var(--u))) * .72);--sigh:calc(clamp(calc(150*var(--u)),13vw,calc(230*var(--u))) / 3)}
.hq-sign .hq-sig{top:calc(-1 * var(--cap));bottom:auto}
.hq-sign .hq-by{top:calc(var(--sigh) - var(--cap) + calc(12*var(--u)))}
.hero .cap:has(.hq){bottom:clamp(calc(56*var(--u)),7vh,calc(84*var(--u)))}
}

@media(min-width:821px){
.hq-sign{width:3.2em}
.hq-sign .hq-sig{top:auto;bottom:-.06em;width:100%}
.hq-sign .hq-by{top:calc(14*var(--u))}
.hero .cap:has(.hq){bottom:clamp(calc(34*var(--u)),4.5vh,calc(52*var(--u)))}
}

@media(min-width:821px){
.hq p{position:relative;width:fit-content}
.hq-sign{position:absolute;right:0;bottom:.24em;width:3.2em;height:auto;margin:0;display:block;line-height:0}
.hq-sign .hq-sig{position:static;top:auto;bottom:auto;width:100%;display:block}
.hq-sign .hq-by{position:absolute;left:auto;right:0;top:calc(100% + calc(16*var(--u)));text-align:right;white-space:nowrap;line-height:1.2}
}

@media(min-width:821px){.hq-sign{bottom:-.34em}.hq-sign .hq-by{top:calc(100% + calc(14*var(--u)))}}

@media(min-width:821px){.hero .cap:has(.hq){bottom:clamp(calc(76*var(--u)),9.5vh,calc(108*var(--u)))}}

.ftr .legal{margin-top:calc(14*var(--u));opacity:.7}

@media(min-width:601px){.ftr{align-items:center}}
.credits b{color:#fff;font-weight:inherit}.tile.stack{border:1px solid var(--line);background:#070707}.tile.stack .t{padding:calc(22*var(--u)) calc(32*var(--u)) calc(30*var(--u))}

/* ===== Design pass, Oct 8 (separable from the rest; see CHANGES) ===== */

/* A. Header logo fades to the accent red on hover (img/logo-red.png is the same artwork in #FF2800) */
.hdr .logo{position:relative;display:block;line-height:0}
.hdr .logo::after{content:'';position:absolute;inset:0;background:url(img/logo-red.png) center/100% 100% no-repeat;opacity:0;transition:opacity .22s ease;pointer-events:none}
.hdr .logo img{transition:opacity .22s ease}
@media(hover:hover){.hdr .logo:hover::after{opacity:1}.hdr .logo:hover img{opacity:0}}

/* B. Hero: second clip loops after the first has played once */
.hero>video.badge-loop{opacity:0;transition:opacity .3s ease}
.hero>video.badge-loop.on{opacity:1}
@media(max-width:600px){.hero>video.badge-loop{position:absolute;inset:calc(70*var(--u)) 0 auto 0;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}}
@media(prefers-reduced-motion:reduce){.hero:has(.badge-video)>img[src='img/nilu/badge.jpg']{display:block}}

/* C. Project tiles: no frame, text on the image edge; image turns to colour on hover */
.tile.stack,.g3 .tile.stack,.tile.stack.r169{border:0;background:none}
.tile.stack .t,.g3 .tile.stack .t,.tile.stack.r169 .t{padding:calc(16*var(--u)) 0 calc(4*var(--u))}
.tile.stack img{transition:opacity .4s,filter .5s ease}
/* colour on hover follows the real cursor position (class .hov set by the script in the footer), also while the page scrolls under a still mouse */
.tile.stack.hov img{filter:grayscale(0)!important;opacity:1}

/* D. Home: portrait fits within one screen height */
.split>figure.portrait-fit{width:min(100%,calc((100vh - calc(140*var(--u)))*3/4));max-height:calc(100vh - calc(140*var(--u)))}

/* E. Home: Discretion (left) and Working with us (right, mirrored) on one row */
.band-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(calc(24*var(--u)),5vw,calc(90*var(--u)));align-items:start}
.band-duo .band-r h2{margin-top:calc(16*var(--u))}
.band-duo .band-l .label+h2{margin-top:calc(16*var(--u))}
@media(min-width:821px){.band-duo .band-r{text-align:right}.band-duo .band-r .lead{margin-left:auto}}
@media(max-width:820px){.band-duo{grid-template-columns:1fr}.band-duo .band-r{margin-top:calc(48*var(--u))}}

/* F. Footer: Instagram as a grey icon after the e-mail, dot separator */
.ftr .mailrow{display:flex;align-items:center;justify-content:flex-end;gap:calc(8*var(--u))}
.ftr .ig{display:inline-flex;line-height:0}
.ftr .ig svg{width:calc(15*var(--u));height:calc(15*var(--u))}
@media(max-width:600px){.ftr .mailrow{justify-content:flex-start}}
/* G. Text links with arrow (.cta): text turns red on hover, same speed as the logo */
.cta{transition:color .22s ease}
@media(hover:hover){.cta:hover{color:var(--red)}}
/* H. Hero videos in full color (Sasha's build forces grayscale) */
.hero>video.badge-video{filter:none}
/* I. Portrait sits against the text column so the gap equals the grid gap, as in Sasha's layout */
@media(min-width:821px){.split>figure.portrait-fit{justify-self:end}}

/* J. Phone footer like desktop: text on the right, only the signature on the left */
@media(max-width:600px){.ftr{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:calc(16*var(--u))}.ftr .sig{flex:none}.ftr .meta{text-align:right;min-width:0}.ftr .mailrow{justify-content:flex-end}}
/* L. Phone footer: signature sits a little higher, level with the text block on the right */
@media(max-width:600px){.ftr .sig{position:relative;top:-6px}}

/* M. Send on the contact page in the accent red, hover white; Skip on the intro black with white text, hover white with black text */
button[type=submit]{justify-self:end;background:var(--grey);color:var(--ink);font-weight:700;transition:background .2s,color .2s}
button[type=submit]:hover{background:var(--red);color:var(--ink)}
.intro .skip{background:#000;color:#fff;padding:calc(10*var(--u)) calc(22*var(--u));font-size:calc(12*var(--u));letter-spacing:.24em;transition:background .2s,color .2s}
.intro .skip:hover{background:#fff;color:#000}

/* N. Intro: the page keeps room for the scroll bar while the intro plays (and the intro covers that room), so nothing shifts left when the bar appears */
html:has(#intro){scrollbar-gutter:stable}
.intro{width:100vw;right:auto}
/* O. Studio text on the home page: even edges on both sides */
.lead.just{text-align:justify;text-justify:inter-word;hyphens:manual}

/* ===== Patch 33 ===== */
/* P. Two-column heading blocks (home "The pursuit of beauty", studio "One hand"): same columns as the photo block, left text ends at the left column's edge, right text starts where the neighbouring block's text starts */
@media(min-width:821px){
.head.pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.head.pair>div:first-child{text-align:right}
.head.pair.by-photo>div:first-child{width:min(100%,calc((100vh - calc(140*var(--u)))*3/4));justify-self:end}
}
/* Q. Home: studio text narrower, even edges */
.lead.just{max-width:60%!important}
@media(max-width:820px){.lead.just{max-width:none!important}}
/* R. Key experts: text under the photos is justified on both sides */
.person p,.person .credits{text-align:justify;text-justify:inter-word}
.person .jl{display:block;white-space:nowrap}
/* S. Press: whole row turns red on hover, like the text links with a triangle */
.list a{transition:color .22s ease}
.list a .src,.list a .dt{transition:color .22s ease}
.list a .ttl{transition:color .22s ease}
/* T. Home: project tiles as magazine covers (title on the picture, black gradient below) */
.covers .tile.stack{position:relative;overflow:hidden;background:#000}
.covers .tile.stack .media{aspect-ratio:16/9;width:100%}
.covers .tile.stack.r43 .media{aspect-ratio:16/9}
.covers .tile.stack img,.covers .tile.stack video{transition:opacity .4s,filter .5s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.covers .tile.stack::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 13%,rgba(0,0,0,.2) 25%,rgba(0,0,0,0) 36%)}
.covers .tile.stack .t{position:absolute;z-index:2;left:clamp(calc(20*var(--u)),2.6vw,calc(44*var(--u)));right:clamp(calc(20*var(--u)),2.6vw,calc(44*var(--u)));bottom:clamp(calc(18*var(--u)),2.4vw,calc(40*var(--u)));padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'p h' 'p l';align-items:end;column-gap:clamp(calc(24*var(--u)),4vw,calc(80*var(--u)));row-gap:calc(6*var(--u))}
.covers .tile.stack .t h3{grid-area:h;justify-self:end;text-align:right;color:var(--red);font-weight:700;font-size:clamp(calc(24*var(--u)),2.1vw,calc(38*var(--u)));line-height:1;letter-spacing:.01em;margin:0;transition:color .25s ease}
.covers .tile.stack .t .label{grid-area:l;justify-self:end;text-align:right;margin:0;color:#fff;font-size:calc(10*var(--u));letter-spacing:.2em}
.covers .tile.stack .t p{grid-area:p;margin:0;max-width:24ch;font-size:clamp(calc(13*var(--u)),1.15vw,calc(18*var(--u)));line-height:1.28;color:rgba(239,238,238,.95);font-weight:500}
.covers .tile.stack.r169 .t h3{font-size:clamp(calc(30*var(--u)),3vw,calc(54*var(--u)))}
.covers .tile.stack.r169 .t p{max-width:30ch;font-size:clamp(calc(15*var(--u)),1.5vw,calc(26*var(--u)))}
.covers .tile.stack.r169 .t .label{font-size:calc(11*var(--u))}
.covers .tile.stack .credit{top:calc(14*var(--u));right:calc(16*var(--u));z-index:2}
@media(max-width:820px){
.covers .tile.stack::after{background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.65) 22%,rgba(0,0,0,.2) 38%,rgba(0,0,0,0) 50%)}
.covers .tile.stack .media,.covers .tile.stack.r43 .media,.covers .tile.stack.r169 .media{aspect-ratio:4/5}
.covers .tile.stack .media:has(video){aspect-ratio:4/5}
.covers .tile.stack .t,.covers .tile.stack.r169 .t{grid-template-columns:minmax(0,1fr);grid-template-areas:'h' 'l' 'p';row-gap:calc(8*var(--u))}
.covers .tile.stack .t h3,.covers .tile.stack .t .label{justify-self:start;text-align:left}
.covers .tile.stack .t h3,.covers .tile.stack.r169 .t h3{font-size:clamp(calc(28*var(--u)),8vw,calc(44*var(--u)))}
.covers .tile.stack .t p,.covers .tile.stack.r169 .t p{max-width:none;margin-top:calc(8*var(--u));font-size:calc(14*var(--u))}
}

/* U. About us: "A small senior team" sits as a fifth column after the four key experts, behind a thin vertical divider (same line as on the project pages) */
.people{--pg:clamp(calc(20*var(--u)),3vw,calc(48*var(--u)));grid-template-columns:repeat(4,minmax(0,1fr)) 0 minmax(0,1fr);gap:var(--pg)}
.team{position:relative;grid-column:6}
.team::before{content:'';position:absolute;top:0;bottom:0;left:calc(var(--pg) * -1);width:1px;background:var(--line)}
.team h2{margin:0 0 calc(18*var(--u));font-size:clamp(calc(20*var(--u)),1.9vw,calc(30*var(--u)));line-height:1.05;letter-spacing:.01em}
.team p{font-size:calc(13.5*var(--u));text-align:justify;text-justify:inter-word}
@media(max-width:1000px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}.team{grid-column:1/-1;align-self:start;padding-top:calc(28*var(--u))}.team::before{top:0;bottom:auto;left:0;right:0;width:auto;height:1px}}
@media(max-width:560px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
.person .credits{letter-spacing:.1em}
@media(max-width:560px){.person p,.person .credits,.team p{text-align:left}}

/* Hardline philosophy: three columns, no dividers */
.manifesto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(calc(20*var(--u)),3vw,calc(48*var(--u)))}
.manifesto div{border-top:0;padding:0}
@media(max-width:700px){.manifesto{grid-template-columns:1fr;gap:calc(28*var(--u))}}

/* About us: the person cards share rows (photo / name / role / text / credits), so credits start on one line; the team block sits on the credits row */
@media(min-width:1001px){
.people{grid-template-rows:auto auto auto auto auto;row-gap:0}
.person{display:grid;grid-row:1/span 5;grid-template-rows:subgrid;align-content:start}
.team{grid-row:1/span 5;display:grid;grid-template-rows:subgrid}
.team .tc{grid-row:5}
.person figure{align-self:start}
}
@media(max-width:1000px){.person{display:block}.team .tc{display:block}}
/* Hardline philosophy: first column left, second centred, third right, flush with the team column above */
.manifesto{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.manifesto>div:nth-child(2){text-align:center}
.manifesto>div:nth-child(3){text-align:right}
@media(max-width:700px){.manifesto{grid-template-columns:1fr}.manifesto>div:nth-child(2),.manifesto>div:nth-child(3){text-align:left}}
/* process cards: no frame; the five columns sit exactly under the five red blocks of the video */
.pcard{border:0}
.pcard.link:hover{border:0}
@media(min-width:1101px){.g5{margin-inline:4.79%;column-gap:1.717%}}
.team h2{margin-top:calc(4*var(--u))}
.lead.jfull{text-align:justify;text-justify:inter-word}
@media(max-width:560px){.lead.jfull{text-align:left}}
/* cover descriptions: first line light, second line heavier */
.covers .tile.stack .t p span{display:block}
.covers .tile.stack .t p .l1{font-weight:300}
.covers .tile.stack .t p .l2{font-weight:500}
.covers .tile.stack.r169 .t p{max-width:none}
@media(max-width:820px){.covers .tile.stack .t p span{display:inline}}
.covers .tile.stack .t p{max-width:none}
.covers .tile.stack.r43 .t{column-gap:calc(16*var(--u))}
/* Contact form: rounded drop-down panel, red highlight; project description as a softly tinted rounded field */
.dd{position:relative}
.dd-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;left:0;bottom:0}
.dd-btn{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;font:inherit;font-size:calc(14*var(--u));letter-spacing:0;text-transform:none;color:var(--paper);background:transparent;border:0;border-bottom:1px solid #333;padding:calc(10*var(--u)) 0;cursor:pointer;border-radius:0;transition:border-color .2s}
.dd-btn::after{content:'';flex:none;width:calc(9*var(--u));height:calc(6*var(--u));margin-left:calc(12*var(--u));background:var(--grey);clip-path:polygon(0 0,100% 0,50% 100%);transition:transform .2s,background .2s}
.dd-btn:focus,.dd.open .dd-btn{outline:0;border-color:#555}
.dd.open .dd-btn::after{transform:rotate(180deg)}
.dd-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 8px);margin:0;padding:calc(6*var(--u));list-style:none;background:rgba(22,22,22,.94);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid #333;border-radius:calc(14*var(--u));box-shadow:0 calc(22*var(--u)) calc(48*var(--u)) rgba(0,0,0,.65);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility 0s .16s;max-height:min(60vh,calc(340*var(--u)));overflow:auto}
.dd.open .dd-list{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease}
.dd-list li{position:relative;padding:calc(10*var(--u)) calc(34*var(--u)) calc(10*var(--u)) calc(14*var(--u));border-radius:calc(9*var(--u));font-size:calc(14*var(--u));line-height:1.3;letter-spacing:0;text-transform:none;font-weight:400;color:var(--paper);cursor:pointer}
.dd-list li.act{background:rgba(255,255,255,.07)}
.dd-list li.sel::after{content:'';position:absolute;right:calc(14*var(--u));top:50%;width:calc(5*var(--u));height:calc(9*var(--u));border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-62%) rotate(45deg)}
textarea{background:#0a0a0a;border:1px solid transparent;border-radius:calc(14*var(--u));padding:calc(14*var(--u)) calc(16*var(--u));min-height:calc(150*var(--u));transition:border-color .2s}
textarea:focus{border-color:var(--red)}
/* About us: "See the process on NILU" as a button (same look as SEND), right-aligned under the last process card */
.cta.btn{display:flex;width:fit-content;margin-left:auto;margin-top:calc(28*var(--u));border-bottom:0;padding:calc(16*var(--u)) calc(30*var(--u));background:var(--grey);color:var(--ink);font-weight:700;transition:background .2s,color .2s}
.cta.btn::after{background:currentColor}
@media(hover:hover){.cta.btn:hover{background:var(--red);color:var(--ink)}}
@media(min-width:1101px){.cta.btn{margin-right:4.79%}}
textarea{resize:none}
/* the drop-down field is a <button>: keep it clear of the generic button hover (red fill) */
.dd-btn,.dd-btn:hover,.dd-btn:active{background:transparent;color:var(--paper);font-weight:400}

/* covers, desktop: every cover is 16:9 with the whole car in frame; the portrait Segway clip is shown whole with black bars at the sides */
@media(min-width:821px){
.g2 .covers .tile.stack .media,.covers .g2 .tile.stack .media,.covers .tile.stack .media{aspect-ratio:16/9!important}
.covers .tile.stack img{transform:none!important;transform-origin:50% 50%!important}
.covers .tile.stack[href='nilu.html'] img{object-position:50% 62%!important}
.covers .tile.stack[href='chevelle.html'] img{object-position:50% 50%!important}
.covers .tile.stack video{object-fit:contain!important;background:#000}
}
.ftr .ig svg{transform:translateY(calc(-1*var(--u)))}

/* Press: logo in the left column (grey, red on hover), the outlet name moves into the middle column with a dot separator */
.list a{align-items:center;grid-template-columns:minmax(calc(130*var(--u)),.6fr) minmax(0,2fr) auto}
.list .lg{position:relative;display:block;height:calc(52*var(--u));width:min(100%,calc(160*var(--u)))}
.list .lg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;transition:opacity .22s ease}
.list .lg .r{opacity:0}
@media(hover:hover){.list a:hover .lg .r{opacity:1}.list a:hover .lg .g{opacity:0}}
.list .nm{font-weight:500;font-size:var(--t-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--grey)}
.list .sep{margin:0 .8em;color:var(--grey)}
@media(max-width:720px){.list a{grid-template-columns:1fr;gap:calc(10*var(--u));align-items:start}.list .lg{height:calc(34*var(--u));width:calc(150*var(--u))}}

/* Press: three left-aligned columns — logo | name | description */
.list .ttl{display:contents}
.list .nm{align-self:center}
.list .ds{color:var(--c-text);font-size:var(--t-body);line-height:1.5;align-self:center;min-width:0}
.list a{grid-template-columns:minmax(calc(130*var(--u)),.5fr) minmax(calc(230*var(--u)),.9fr) minmax(0,2.4fr)}
@media(max-width:720px){.list a{grid-template-columns:1fr;gap:calc(8*var(--u))}.list .nm{align-self:start}}

/* Press: tile grid (4 per row), logo box on top, text under it */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(20*var(--u));row-gap:calc(36*var(--u))}
.pt{display:flex;flex-direction:column;gap:calc(12*var(--u));min-width:0;color:inherit}
.pt.q{grid-column:span 2}
.pt .pbox{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#0b0b0b;transition:background .22s ease}
.pt.q .pbox{aspect-ratio:32/9}
.pt .lg{position:relative;display:block;width:60%;height:48%}
.pt.q .lg{width:34%}
.pt .lg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;transition:opacity .22s ease}
.pt .lg .r{opacity:0}
.pt .nm{transition:color .22s ease;display:block;font-weight:500;font-size:var(--t-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--grey)}
.pt .ds{display:block;color:var(--c-text);font-size:var(--t-body);line-height:1.5}
.pt .qt{margin:0;font-size:clamp(calc(18*var(--u)),1.6vw,calc(26*var(--u)));line-height:1.1;font-weight:700;max-width:none}
@media(hover:hover){.pt:not(.q):hover .pbox{background:#000}.pt:not(.q):hover .nm{color:var(--red)}.pt:not(.q):hover .lg .r{opacity:1}.pt:not(.q):hover .lg .g{opacity:0}}
@media(max-width:820px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(14*var(--u));row-gap:calc(28*var(--u))}.pt .lg{width:64%}.pt.q .lg{width:40%}.pt.q .pbox{aspect-ratio:32/9}}


/* Horizontal divider bars (bands + footer) are inset from the page edges (tablet/desktop) */
@media(min-width:821px){
.band,.ftr{border-top-width:0;border-bottom-width:0;background-repeat:no-repeat;background-size:calc(100% - 224*var(--u)) 1px}
.band{background-image:linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line));background-position:center top,center bottom}
.ftr{background-image:linear-gradient(var(--line),var(--line));background-position:center top}
}

/* About us: the "A small senior team" heading starts on the same line as the "Clients include" label */
@media(min-width:1001px){.team .tc{padding-top:calc(18*var(--u))}}

/* Nav: a red bar under the menu grows from the left edge to the end of the current page's name (none on the home page); width is set by a small script in the footer */
.nav{position:relative}
.nav::after{content:'';position:absolute;left:var(--l,0px);bottom:calc(-9*var(--u));height:calc(2*var(--u));width:calc(var(--r,0px) - var(--l,0px));background:var(--red);pointer-events:none;transition:left var(--wd,.8s) var(--we,cubic-bezier(.7,0,.2,1)),width var(--wd,.8s) var(--we,cubic-bezier(.7,0,.2,1))}
.nav.nonav::after{transition:none}
@media(prefers-reduced-motion:reduce){.nav::after{transition:none}}


/* Home + Work, desktop: the wide first cover runs edge to edge and is cropped tight, so the car sits on top and the caption has its own strip underneath */
@media(min-width:821px){
.covers .tile.stack.r169{margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad))}
.covers .tile.stack.r169 .media{aspect-ratio:9/4!important}
.covers .tile.stack.r169 .t{left:var(--pad);right:var(--pad)}
.covers .tile.stack.r169 img[src$='nilu-cover.jpg']{object-position:50% 61%!important}
.covers .tile.stack.r169 img[src$='front-2.jpg']{object-position:50% 100%!important;transform:scale(1.4)!important;transform-origin:54% 100px!important}
}

/* Scroll bars everywhere: a thin rounded dark-grey thumb, no track, no arrows, shown only while scrolling (like Safari on iOS) */
@supports not selector(::-webkit-scrollbar){html{scrollbar-width:thin;scrollbar-color:transparent transparent}html.sb-on{scrollbar-color:#343434 transparent}}
*::-webkit-scrollbar{width:11px;height:11px;background:transparent}
*::-webkit-scrollbar-button{display:none;width:0;height:0}
*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}
*::-webkit-scrollbar-thumb{background-color:transparent;background-clip:padding-box;border:4px solid transparent;border-radius:8px;min-height:44px;transition:background-color .35s ease}
html.sb-on *::-webkit-scrollbar-thumb,html.sb-on::-webkit-scrollbar-thumb{background-color:#343434}
*::-webkit-scrollbar-thumb:hover,html.sb-on *::-webkit-scrollbar-thumb:hover,html.sb-on::-webkit-scrollbar-thumb:hover{background-color:#4a4a4a}
*::-webkit-scrollbar-thumb:active{background-color:#5a5a5a}

/* Overlay scroll bar: the browser's own bar is hidden (no gutter, nothing takes room) and a thin thumb floats over the page, like on iOS */
html.ovb{scrollbar-width:none}
html.ovb::-webkit-scrollbar,.ovb-el::-webkit-scrollbar{display:none;width:0;height:0}
.ovb-el{scrollbar-width:none}
.ovbt{position:fixed;z-index:200;width:11px;box-sizing:border-box;border:4px solid transparent;border-radius:8px;background-color:#343434;background-clip:padding-box;opacity:0;transition:opacity .35s ease,background-color .2s ease;display:none;touch-action:none;cursor:default}
html.sb-on .ovbt,.ovbt:hover,.ovbt.drag{opacity:1}
.ovbt:hover{background-color:#4a4a4a}
.ovbt.drag{background-color:#5a5a5a}

/* Menu colour changes: a slower, softer fade to white on hover, an even longer one to red when a page is picked (the new page keeps fading in the red) */
.nav a{transition:opacity .45s ease,color .45s ease}
.nav a:active{color:var(--red);opacity:1;transition:opacity .55s ease,color .55s ease}
.nav a.on{animation:navon .55s ease both}
@keyframes navon{from{color:var(--paper);opacity:.7}to{color:var(--red);opacity:1}}
@media(prefers-reduced-motion:reduce){.nav a,.nav a:active{transition:none}.nav a.on{animation:none}}

/* invisible hit area: each menu link also catches the cursor over the half-gaps next to it, so the bar follows between the words */
.nav a{position:relative}
.nav a::before{content:'';position:absolute;top:0;bottom:0;left:calc(-1*var(--nl,0px));right:calc(-1*var(--nr,0px))}

/* Scroll bars on mouse devices are drawn by the page's own overlay thumb (see the script in the footer). The native bar is switched off here, in CSS, from the very first paint, so it never takes 11px of width that the script later gives back: the page no longer jumps sideways while loading. */
@media (hover:hover) and (pointer:fine){
html{scrollbar-width:none}
html::-webkit-scrollbar,.pbody::-webkit-scrollbar{display:none;width:0;height:0}
.pbody{scrollbar-width:none}
}

/* Footer: Privacy Policy · Impressum under the copyright line, same grey (red on hover like the other footer links) */
.ftr .legal-links{opacity:.7;display:flex;justify-content:flex-end;gap:calc(8*var(--u))}
@media(max-width:600px){.ftr .legal-links{justify-content:flex-end}}

/* About us on phones: every key expert in its own row, photo above the text */
@media(max-width:560px){.people{grid-template-columns:minmax(0,1fr);gap:calc(44*var(--u))}.person figure{max-width:none}.person h3{font-size:clamp(calc(16*var(--u)),1.2vw,calc(18*var(--u)))}}

/* ===== Footer: clickable signature (home) + red "up" triangle on phones (patch 102) ===== */
.ftr .sig-a{display:block;line-height:0;flex:none}
.ftr .totop{display:none}
@media(max-width:600px){
.ftr{position:relative;padding-bottom:calc(64*var(--u))}
.ftr .sig-a{position:relative;top:-6px}
.ftr .sig-a .sig{top:0}
.ftr .totop{display:flex;align-items:center;justify-content:center;position:absolute;left:50%;bottom:calc(18*var(--u));width:calc(44*var(--u));height:calc(36*var(--u));margin-left:calc(-22*var(--u));color:var(--red);-webkit-tap-highlight-color:transparent}
.ftr .totop svg{width:calc(14*var(--u));height:calc(12*var(--u));fill:currentColor;display:block}
.ftr .totop:hover{color:var(--red)}
}

/* ===== Phones: less air between the menu bar and the page title, and under the intro line (patch 102) ===== */
@media(max-width:820px){
.sec[style*="padding-top:calc(160"]{padding-top:calc(84*var(--u))!important}
.sec:has(+ .sec.tight){padding-bottom:calc(20*var(--u))}
}

/* ===== Phones: project covers on Home and Work (patch 102) =====
   full width edge to edge; the same caption layout as on desktop (text left, name and label right) but much smaller; the photographer credit is tiny;
   the picture is cut only a little, so the whole car stays in the frame */
@media(max-width:820px){
.covers .tile.stack,.covers .tile.stack.r169,.covers .tile.stack.r43{margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad))}
.covers .tile.stack .media,.covers .tile.stack.r43 .media,.g2 .covers .tile.stack .media,.covers .g2 .tile.stack .media{aspect-ratio:16/9!important}
.covers .tile.stack.r169 .media{aspect-ratio:4/3!important}
.covers .tile.stack .media:has(video){aspect-ratio:4/5!important}
.covers .tile.stack .t,.covers .tile.stack.r169 .t,.covers .tile.stack.r43 .t{left:var(--pad);right:var(--pad);bottom:calc(14*var(--u));grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'p h' 'p l';column-gap:calc(14*var(--u));row-gap:calc(3*var(--u));align-items:end}
.covers .tile.stack .t h3,.covers .tile.stack.r169 .t h3{justify-self:end;text-align:right;font-size:clamp(calc(18*var(--u)),5.4vw,calc(26*var(--u)));line-height:1.02}
.covers .tile.stack .t .label,.covers .tile.stack.r169 .t .label{justify-self:end;text-align:right;font-size:calc(8.5*var(--u));letter-spacing:.2em}
.covers .tile.stack .t p,.covers .tile.stack.r169 .t p{margin:0;max-width:none;font-size:calc(12.5*var(--u));line-height:1.3}
.covers .tile.stack .credit{font-size:calc(7*var(--u));letter-spacing:.1em;top:calc(8*var(--u));right:var(--pad);opacity:.55}
.covers .tile.stack::after{background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 18%,rgba(0,0,0,.15) 32%,rgba(0,0,0,0) 42%)}
.covers .tile.stack[href='nilu.html'] img{object-position:50% 62%!important}
.covers .tile.stack.r169 img[src$='front-2.jpg']{transform:none!important;object-position:50% 62%!important}
.covers .mt,.covers .g2{gap:calc(18*var(--u))}
.covers .g2.mt{margin-top:calc(18*var(--u))}
}

/* ===== Phones: blocks with a lot of text are justified (patch 102) ===== */
@media(max-width:820px){
.lead,.pcard p,.person p,.person .credits,.team p,.head p,.band p,.band .lead,.sec p.lead,.manifesto p{text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto}
}
@media(max-width:820px){
.covers .tile.stack[href='chevelle.html'] .media{aspect-ratio:1.9!important}
.covers .tile.stack::after{background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.68) 20%,rgba(0,0,0,.22) 38%,rgba(0,0,0,0) 52%)}
}

/* ===== Buttons: one style everywhere, taken from "Next chapter" (patch 128) =====
   dark grey button, white text, weight 500; on hover red fills it from left to right in 0.8 s while the text turns black, on leaving it runs back to the left the same way.
   Used by Send, "See the process on NILU", Skip and Next chapter (deck.css). The red "Next project" is the same, with white as the fill. */
button[type=submit],.cta.btn,.intro .skip{background-color:var(--line);background-image:linear-gradient(var(--red),var(--red));background-repeat:no-repeat;background-size:0% 100%;background-position:left center;color:#fff;font-weight:500;transition:background-size .8s ease,color .8s ease}
@media(hover:hover){
button[type=submit]:hover,.cta.btn:hover,.intro .skip:hover{background-color:var(--line);background-image:linear-gradient(var(--red),var(--red));background-size:100% 100%;background-position:left center;background-repeat:no-repeat;color:#000}
}

/* Home, desktop: the "Beauty is not a matter of taste" text has the same width as the Sasha text above it, so both blocks share the same left and right edges (patch 126) */
@media(min-width:821px){.head.pair.by-photo>.lead.jfull{max-width:60%!important}}

/* ===== Patch 130: every page opens out of the dark, from the top down ===== */
/* One black veil lies over everything below the header (page, project decks, footer). On load its soft edge slides from the top of the window to the bottom, so the page is revealed top-down, the same way for every block, picture and video. The header (z-index 50) stays above it and never fades. */
@keyframes pgwipe{from{background-position:50% 90%}to{background-position:50% 0%}}
body::before{content:'';position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;z-index:40;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 20%,#000 70%,#000 100%) 50% 90%/100% 500% no-repeat;animation:pgwipe .8s cubic-bezier(.4,0,.4,1) both}
@media(prefers-reduced-motion:reduce){body::before{display:none}}

/* Thank-you page: the small label above the title no longer pushes the title lower than on the other pages (the label hangs above the title, so the title sits at exactly the same height as Work / Press / Privacy) */
.thx-t{position:relative}.thx-t .label{position:absolute;left:0;bottom:100%;margin-bottom:0}
/* Studio: the "A small senior team" heading uses the same size and tracking as every other section heading */
.team h2{font-size:clamp(calc(22*var(--u)),2vw,calc(34*var(--u)));letter-spacing:-.005em}

/* One speed for every text-link hover: footer links, back-to-top, "to the top" etc. fade to red in 0.22 s like the logo and the arrow links (before, some jumped instantly) */
.ftr a,.ftr .totop{transition:color .22s ease}
.tile h3{transition:color .22s ease}

/* ===== Patch 132: page title is typed in, pages leave bottom-up ===== */
/* The page title (h1) is typed letter by letter with a block cursor that sits on the next letter (insert-key style). It lies above the dark veil, so it does not fade in or out. html.tp is set in the head and removed when typing is done. */
.tp main h1{visibility:hidden}
.tp main h1 .hlch.on,.hlbar{visibility:visible}
main h1{position:relative;z-index:45}
.hlch{position:relative;visibility:hidden}
.hlch.on{visibility:visible}
@keyframes tcblink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
/* Leaving a page: the veil comes back from the bottom of the window to the top, the mirror image of the opening wipe (the header and the title stay) */
@keyframes pgwipeout{from{background-position:50% 0%}to{background-position:50% 90%}}
.leaving body::before{animation:pgwipeout .25s cubic-bezier(.4,0,.6,1) both}

/* Contact (desktop): the form sits two text lines lower than the intro text, so the first field no longer lines up with the title */
@media(min-width:821px){form[name=inquiry]{margin-top:calc(46*var(--u))}}

/* Page title bar (patch 140): a red bar under the title, as wide as the typed text; it grows with the typing, stays under the finished title and shrinks back while the title is erased */
.hlbar{position:absolute;left:0;top:calc(100% + .07em);height:calc(3*var(--u));min-height:2px;width:0;background:var(--red);pointer-events:none;transform-origin:100% 50%}
/* .out: the bar slides away to the right (start crawls to the end); timing is set by the script, the upper bar goes first */
.hlbar.out{transform:scaleX(0)}

/* Footer signature (patch 143): on desktop too it leads to the home page, and on hover it fades to white, the mirror image of the header logo (white, red on hover). The white copy lies on top of the red one and the two cross-fade in 0.22 s like the logo. */
.ftr .sig-a{position:relative}
.ftr .sig-a::after{content:'';position:absolute;inset:0;background:url(img/signature-white.png) center/100% 100% no-repeat;opacity:0;transition:opacity .22s ease;pointer-events:none}
.ftr .sig-a .sig{transition:opacity .22s ease}
@media(hover:hover){.ftr .sig-a:hover::after{opacity:1}.ftr .sig-a:hover .sig{opacity:0}}

/* Text links with the red line (Meet the team, All work, e-mail, ...) (patch 145): the line is a background layer instead of a border. After a click it slides away to the right (its start crawls to its end), like the title bars, and the page leaves. At rest it looks exactly as before. */
.cta:not(.btn){border-bottom-color:transparent;background:linear-gradient(var(--red),var(--red)) right bottom/100% 1px no-repeat;background-origin:border-box;transition:color .22s ease,background-size .25s cubic-bezier(.6,0,.3,1)}
.cta:not(.btn).out{background-size:0 1px}

/* Clicked text link (patch 150): while the page goes dark the link itself lies above the dark veil (like the page title), so its line can slide away in plain sight; it holds for a moment and then fades out too. */
.cta.lv{position:relative;z-index:45;animation:ctalv .17s ease .08s both}
@keyframes ctalv{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.cta.lv{animation:none}}

/* Home, desktop (patch 153): the credits line has the same width and even edges as the paragraph above it; the right-hand column is as tall as Sasha's photo and the "pursuit of beauty" block with "Meet the team" sits at its bottom, so the underline of "Meet the team" lines up with the bottom edge of the photo. */
@media(min-width:821px){
.credits.just{max-width:60%;text-align:justify;text-justify:inter-word;hyphens:manual}
.split.sasha>div:last-child{display:flex;flex-direction:column;align-self:stretch}
.split.sasha .pb{margin-top:auto}
}

/* ===== Cookie consent window (patch 154, TEST: opens only with ?cookies in the address) ===== */
/* Same look as the "Project description" field and the drop-down lists of the contact form: a dark, softly rounded box with a fine border; label in red, buttons like Send / Next. */
.ck{position:fixed;z-index:60;right:var(--pad);bottom:calc(24*var(--u));width:min(calc(100% - 2*var(--pad)),calc(420*var(--u)));box-sizing:border-box;padding:calc(22*var(--u)) calc(24*var(--u)) calc(24*var(--u));background:rgba(10,10,10,.94);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--line);border-radius:calc(14*var(--u));box-shadow:0 24px 70px rgba(0,0,0,.65);opacity:0;transform:translateY(calc(14*var(--u)));transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.ck.in{opacity:1;transform:none}
.ck p{margin:calc(12*var(--u)) 0 0;font-size:calc(13*var(--u));line-height:1.65;font-weight:400;color:var(--paper);text-align:left;hyphens:manual}
.ck p a{color:var(--paper);border-bottom:1px solid var(--red);transition:color .22s ease}
@media(hover:hover){.ck p a:hover{color:var(--red)}}
.ck .row{display:flex;gap:calc(10*var(--u));margin-top:calc(20*var(--u))}
.ck button{flex:1 1 0;min-width:0;padding:calc(13*var(--u)) calc(10*var(--u));border-radius:0;font-size:calc(10.5*var(--u));font-weight:500;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.ck .ok{border:0;color:#fff;background-color:var(--line);background-image:linear-gradient(var(--red),var(--red));background-repeat:no-repeat;background-size:0% 100%;background-position:left center;transition:background-size .8s ease,color .8s ease}
.ck .no{background:transparent;color:var(--paper);border:1px solid #333;transition:border-color .22s ease,color .22s ease}
@media(hover:hover){
.ck .ok:hover{background-color:var(--line);background-image:linear-gradient(var(--red),var(--red));background-size:100% 100%;background-position:left center;background-repeat:no-repeat;color:#000}
.ck .no:hover{background:transparent;border-color:var(--red);color:var(--red)}
}
@media(max-width:600px){.ck{left:calc(12*var(--u));right:calc(12*var(--u));bottom:calc(12*var(--u));width:auto;padding:calc(18*var(--u)) calc(18*var(--u)) calc(20*var(--u))}.ck .row{flex-direction:column-reverse}}
@media(prefers-reduced-motion:reduce){.ck{transition:none}}

/* Home, narrower windows (patch 159): below 1280 px the text of the Sasha block uses the full width of its column (no more 60% limit), so it does not become a thin strip next to the photo */
@media(max-width:1279px) and (min-width:821px){
.split.sasha .lead.just,.split.sasha .credits.just{max-width:100%!important}
}

/* patch 162: home, desktop — empty space between the last blocks can shrink (--sq, set by the hlfit script) so Chevelle/Segway + "Most of our work" + footer fit one screen */
@media(min-width:821px){
.sec.covers{padding-bottom:calc(clamp(calc(80*var(--u)),12vh,calc(160*var(--u)))*var(--sq,1))}
.band-duo,.covers~.band{padding-top:calc(clamp(calc(70*var(--u)),10vh,calc(130*var(--u)))*var(--sq,1));padding-bottom:calc(clamp(calc(70*var(--u)),10vh,calc(130*var(--u)))*var(--sq,1))}
}

/* patch 164: Skip button on the red intro fills with white (a red fill would vanish into the red background) */
.intro .skip{background-image:linear-gradient(#fff,#fff)}
@media(hover:hover){.intro .skip:hover{background-image:linear-gradient(#fff,#fff)}}

/* patch 166: Chevelle/Segway pictures can be cropped wider (--ga, set by the hlfit script), centred; footer keeps its normal proportions */
@media(min-width:821px){.covers .g2.mt .tile.stack .media{aspect-ratio:var(--ga,16/9)!important}}

/* patch 167: home, desktop — Chevelle sticks to the left edge of the page and Segway to the right, like the NILU cover (one side each); the gap between them stays. Texts keep their distance from the page margin. */
@media(min-width:821px){
.covers .g2.mt{margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad))}
.covers .g2.mt .tile.stack:first-child .t{left:calc(var(--pad) + clamp(calc(20*var(--u)),2.6vw,calc(44*var(--u))))}
.covers .g2.mt .tile.stack:last-child .t{right:calc(var(--pad) + clamp(calc(20*var(--u)),2.6vw,calc(44*var(--u))))}
}

/* patch 168: scroll hint chevron on the home page (bottom centre, desktop) */
.dn{position:fixed;left:50%;bottom:calc(18*var(--u));width:calc(56*var(--u));height:calc(46*var(--u));margin-left:calc(-28*var(--u));z-index:30;background:none;border:0;padding:0;cursor:pointer;color:var(--red);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s ease,color .22s ease;-webkit-tap-highlight-color:transparent}
.dn.on{opacity:.8;pointer-events:auto}
.dn.on:hover{opacity:1;color:var(--red)}
.dn.up{transform:rotate(180deg)}
.dn svg{width:calc(40*var(--u));height:calc(9*var(--u));fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 6px rgba(0,0,0,.65))}
.dn,.dn:hover,.dn:focus{background:none!important;text-transform:none;letter-spacing:0;font-size:0;justify-self:auto;outline:none}
.dn:focus-visible{outline:1px solid var(--red);outline-offset:2px}

/* patch 170: About us — the two photos run to the page edges (16:9, like Chevelle/Segway), the process text sits in two even columns */
@media(min-width:821px){
.photos .g2{margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad))}
.photos .g2 figure{aspect-ratio:16/9!important}
.photos .g2 img{object-position:50% 50%}
.photos .g2 img[src$='billet.jpg']{object-position:50% 58%}
.photos .g2 img[src$='sketchbooks.jpg']{object-position:50% 46%}
.head.pair>div:last-child{display:block;column-count:2;column-gap:clamp(calc(24*var(--u)),3vw,calc(48*var(--u)))}
.head.pair>div:last-child>p{break-inside:auto}
.head.pair>div:last-child>p:first-child{margin-top:0}
}
/* scroll chevron on phones: bigger touch area, always the "up" one */
@media(max-width:820px){.dn{bottom:calc(10*var(--u));width:calc(64*var(--u));height:calc(52*var(--u));margin-left:calc(-32*var(--u))}}

/* patch 172: text field frame as an anti-aliased SVG outline with continuous-curvature corners (see hlfield script in the footer) */
.ta-wrap{position:relative;display:block}
.ta-wrap .ta-b{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.ta-wrap .ta-b path{fill:#0a0a0a;stroke:transparent;stroke-width:1;stroke-linejoin:round;shape-rendering:geometricPrecision;transition:stroke .2s}
.ta-wrap:focus-within .ta-b path{stroke:var(--red)}
.ta-wrap textarea{position:relative;z-index:1;display:block;width:100%;background:transparent!important;border-color:transparent!important;border-radius:0;box-sizing:border-box}

/* patch 178: home — the "pursuit of beauty" block with "Meet the team" is raised by up to 7 lines. On narrower screens the right column has less spare room, so the lift shrinks with the width (0 below ~1380 px) and the row never grows. */
@media(min-width:821px){.split.sasha .pb{margin-bottom:clamp(0px,calc((100vw - 1380px)*.28),calc(7*1.7*var(--t-body)))}}

/* patch 181: (1) the "to top" arrow in the footer (phones) is the same thin chevron as the scroll hint, not a triangle; on pages that have the scroll hint the footer one is not needed; (2) project cover texts (home and Work) at ordinary reading sizes, only the project name stays large */
.ftr .totop{color:var(--paper)}
.ftr .totop svg{width:calc(40*var(--u));height:calc(9*var(--u));fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ftr .totop:hover{color:var(--red)}
body:has(.dn) .ftr .totop{display:none!important}
@media(min-width:601px){
.covers .tile.stack .t p,.covers .tile.stack.r169 .t p{font-size:calc(17*var(--u));line-height:1.4}
.covers .tile.stack .t .label,.covers .tile.stack.r169 .t .label{font-size:calc(11*var(--u))}
}
@media(max-width:600px){
.covers .tile.stack .t p,.covers .tile.stack.r169 .t p{font-size:calc(14*var(--u));line-height:1.35}
.covers .tile.stack .t .label,.covers .tile.stack.r169 .t .label{font-size:calc(10*var(--u))}
}

/* patch 182: About us on narrow screens — the studio-wall photo goes under the heading and text (headings sit in the same place on every page); the two process photos run edge to edge */
@media(max-width:820px){
.intro-split>figure{order:0!important;margin-top:calc(32*var(--u))!important;margin-bottom:0!important;margin-left:calc(-1*var(--pad))!important;margin-right:calc(-1*var(--pad))!important;width:calc(100% + 2*var(--pad))!important;align-self:stretch}
}
@media(max-width:600px){section:has(>.intro-split){padding-top:calc(160*var(--u))!important}}
@media(max-width:820px){
.photos .g2{margin-left:calc(-1*var(--pad))!important;margin-right:calc(-1*var(--pad))!important;width:auto}
}

/* patch 184: iPhone/iPad in-app browsers (Telegram, Documents and the like; html.wv is set in the head). When their top bar slides away, the fixed header stays where the bar was and the page scrolls past above it. The header stays pinned (the menu is always reachable); a black layer is added above it so the scrolling page can not be seen through the gap. */
html.wv .hdr::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:240px;background:#000;pointer-events:none}

/* ===== Press (patch 195): everything after the intro line sits one text line higher, so the quotes and the first row of four links fit one screen; the page then moves block by block (see data-snap on the grid) ===== */
@media(min-width:821px){.sec.tight.press-up{margin-top:calc(-23.8*var(--u))}}
/* Press (patch 196): logo boxes shrink to the height set by the fit script (--ph), quote boxes included, so the two blocks always show their text whole */
.pgrid[style*='--ph'] .pt .pbox,.pgrid[style*='--ph'] .pt.q .pbox{aspect-ratio:auto;height:var(--ph)}

/* Scroll chevron (patch 196): switching between down and up squeezes the arrow in from the sides and widens it again, instead of turning it over */
.dn svg{transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.dn.sq svg{transform:scaleX(0);transition-duration:.17s;transition-timing-function:ease-in}

/* ===== Press: calm list (merge, Oct 2026) ===== */
.pl .pl-quotes{display:grid;grid-template-columns:1fr 1fr;gap:calc(64*var(--u));padding:calc(24*var(--u)) 0 calc(88*var(--u));border-bottom:1px solid var(--line)}
.pl .pl-q .pl-logo{display:block;height:calc(26*var(--u));margin-bottom:calc(22*var(--u))}
.pl .pl-qt{margin-top:calc(14*var(--u));font-size:calc(22*var(--u));line-height:1.35}
.pl .pl-group{padding-top:calc(72*var(--u))}
.pl .pl-group>.label{margin-bottom:calc(18*var(--u))}
.pl .pl-list{border-top:1px solid var(--line)}
.pl .pl-row{display:grid;grid-template-columns:calc(150*var(--u)) calc(230*var(--u)) 1fr calc(24*var(--u));align-items:center;gap:calc(24*var(--u));padding:calc(20*var(--u)) 0;border-bottom:1px solid var(--line);color:var(--c-text);transition:color .25s}
.pl .pl-logo{position:relative;display:block;height:calc(22*var(--u))}
.pl .pl-logo img{position:absolute;left:0;top:0;height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left center;transition:opacity .25s}
.pl .pl-logo .r{opacity:0}
.pl .pl-row:hover .pl-logo .g,.pl .pl-q:hover .pl-logo .g{opacity:0}
.pl .pl-row:hover .pl-logo .r,.pl .pl-q:hover .pl-logo .r{opacity:1}
.pl .pl-src{font-size:var(--t-label);font-weight:500;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--c-sub)}
.pl .pl-ttl{font-size:var(--t-body);line-height:1.6}
.pl .pl-arr{color:var(--c-sub);text-align:right;transition:color .25s,transform .25s}
.pl .pl-row:hover .pl-ttl,.pl .pl-row:hover .pl-arr{color:var(--red)}
.pl .pl-row:hover .pl-arr{transform:translate(2px,-2px)}
@media(max-width:820px){.pl .pl-quotes{grid-template-columns:1fr;gap:calc(48*var(--u))}.pl .pl-row{grid-template-columns:1fr calc(20*var(--u));gap:calc(6*var(--u)) calc(12*var(--u))}.pl .pl-row .pl-logo{grid-column:1;height:calc(18*var(--u))}.pl .pl-src,.pl .pl-ttl{grid-column:1}.pl .pl-arr{grid-column:2;grid-row:1}}

/* Home: Chevelle tile shows the whole car above the text, like the Segway tile (merge, Oct 2026) */
.tile .media img.cv-inset{object-fit:contain!important;object-position:50% 0!important;height:60%!important;width:auto!important;max-width:100%;display:block;margin:3% auto 0;transform:none!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 82%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 82%,transparent);mask-composite:intersect}
.hero:has(.badge-video)>img{display:none!important}
/* Header fade (Oct 20, softened): once the page is scrolled, a long gradient behind the menu, near-black only at the very top and never fully opaque, separates the menu from the page copy. At the top of the page nothing changes. */
.hdr::after{content:'';position:absolute;left:0;right:0;top:0;height:calc(100% + 110*var(--u));background:linear-gradient(rgba(0,0,0,.96) 0,rgba(0,0,0,.82) 24%,rgba(0,0,0,.5) 56%,rgba(0,0,0,.18) 82%,rgba(0,0,0,0) 100%);opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:-1}
html.scrolled .hdr::after,html.pm-open .hdr::after{opacity:1}
@media(max-width:600px){.hdr::after{height:calc(100% + 56*var(--u));background:linear-gradient(rgba(0,0,0,.7) 0,rgba(0,0,0,.35) 50%,rgba(0,0,0,0) 100%)}}
/* Projects drop-down under the Projects menu item (built by nav.js) */
.pmenu{position:absolute;display:flex;flex-direction:column;gap:calc(14*var(--u));padding:calc(22*var(--u)) calc(22*var(--u)) calc(20*var(--u));margin-left:calc(-22*var(--u));background:#000;font-weight:500;font-size:var(--t-nav,calc(13*var(--u)));letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;opacity:0;visibility:hidden;transform:translateY(calc(-6*var(--u)));transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;z-index:2}
.pmenu.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .25s ease,visibility 0s}
.pmenu a{opacity:.7;transition:opacity .2s,color .2s}
.pmenu a:hover,.pmenu a:focus-visible{opacity:1}
.pmenu a.on{color:var(--red);opacity:1}
.pmenu a.all{opacity:.5}
@media(max-width:600px){.pmenu{gap:calc(16*var(--u));padding:calc(18*var(--u)) calc(18*var(--u)) calc(18*var(--u));margin-left:calc(-18*var(--u));letter-spacing:.12em}}
@media(prefers-reduced-motion:reduce){.pmenu,.pmenu.open,.hdr::after{transition:none}}

/* Projects grid (Oct 20): the three projects share one equal row on Home and Projects, three across from tablet up, one under the other on phones. Picture on top (16:9, so the wide Chevelle photo keeps the whole car), text below. Replaces the large NILU cover. */
.pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(calc(14*var(--u)),1.6vw,calc(28*var(--u)))}
.pgrid .tile.stack{position:relative;border:0;background:none;overflow:visible}
.pgrid .tile.stack .media{aspect-ratio:16/9!important;background:#000}
.pgrid .tile.stack .media img{object-fit:cover}
.pgrid .tile.stack .media video{object-fit:contain!important;background:#000}
.pgrid .tile.stack .credit{top:calc(10*var(--u));right:calc(12*var(--u));font-size:calc(8*var(--u));opacity:.6;z-index:2}
.pgrid .tile.stack .t{position:static;padding:calc(18*var(--u)) 0 0;display:block}
.pgrid .tile.stack .t .label{font-size:calc(10*var(--u));letter-spacing:.2em}
.pgrid .tile.stack .t h3{margin-top:calc(8*var(--u));color:var(--red);font-weight:700;font-size:clamp(calc(20*var(--u)),1.7vw,calc(30*var(--u)));line-height:1.02;letter-spacing:.01em}
.pgrid .tile.stack .t p{margin-top:calc(10*var(--u));max-width:32ch;font-size:clamp(calc(13*var(--u)),1vw,calc(16*var(--u)));line-height:1.35;color:rgba(239,238,238,.9)}
.pgrid .tile.stack.hov h3{color:#fff}
@media(max-width:600px){.pgrid{grid-template-columns:1fr;gap:calc(40*var(--u))}.pgrid .tile.stack .t h3{font-size:calc(24*var(--u))}.pgrid .tile.stack .t p{font-size:calc(14*var(--u));max-width:none}}
@media(min-width:821px){.sec.projects{padding-bottom:calc(clamp(calc(80*var(--u)),12vh,calc(160*var(--u)))*var(--sq,1))}.projects~.band{padding-top:calc(clamp(calc(70*var(--u)),10vh,calc(130*var(--u)))*var(--sq,1));padding-bottom:calc(clamp(calc(70*var(--u)),10vh,calc(130*var(--u)))*var(--sq,1))}}

/* NILU tile: the car is zoomed in and set low in the frame (clear of the open doors), so it reads at the same size as the Chevelle next to it (the hover state keeps the zoom) */
.pgrid .tile.stack .media img.crop-nilu,.pgrid .tile.stack.hov .media img.crop-nilu{transform:scale(1.25)!important;transform-origin:50% 96%!important}

/* One left ruler (Oct 20): the logo file carries a transparent margin (137 of 1600 px) left of the bracket; the logo is pulled left by that amount so the bracket sits on the same left edge as the page copy at every width */
.hdr .logo{transform:translateX(-8.56%)}
/* Home, The Founder: the portrait starts on the left ruler at every width (it used to be centered in its half and drifted right on wide screens); the text column takes the rest */
@media(min-width:821px){
.split.sasha{grid-template-columns:minmax(0,min(calc((100% - clamp(calc(24*var(--u)),5vw,calc(90*var(--u))))/2),calc((100vh - 140*var(--u))*3/4))) minmax(0,1fr)}
.split.sasha>figure.portrait-fit{justify-self:start;width:100%}
}

/* Privacy Policy page and the contact form note (Oct 20) */
.policy{max-width:calc(720*var(--u));margin-top:calc(32*var(--u))}
.policy .note{margin-top:calc(14*var(--u));opacity:.6;font-size:var(--t-small,calc(13*var(--u)))}
.policy h3{margin-top:calc(40*var(--u));color:var(--paper)}
.policy p{margin-top:calc(10*var(--u));color:var(--c-text,rgba(239,238,238,.85))}
.policy a{text-decoration:underline;text-underline-offset:.2em}
.form-note{font-size:var(--t-small,calc(13*var(--u)));opacity:.7;margin:0 0 calc(14*var(--u))}
.form-note a{text-decoration:underline;text-underline-offset:.2em}

/* Home, Mission (Oct 20): the mission follows the hero as its own block, before The Founder */
.sec.mission{padding-bottom:0}
.mission-in{max-width:calc(820*var(--u))}
.mission-in .lead{margin-top:calc(24*var(--u))}

/* Text for search engines and screen readers only (written by seo_static.py): not shown on screen */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* intro film on phones (Oct 21): Safari's floating toolbar sits over the page, and a full-screen layer sized to the visible area left a strip of the page showing under it. The layer now runs the full screen height, behind the toolbar too; Skip stays clear of the toolbar. */
.intro{top:0;bottom:auto;height:100vh;height:100lvh}
.intro .skip{bottom:calc(28*var(--u) + 100vh - 100vh);bottom:calc(28*var(--u) + 100lvh - 100svh)}

/* Oct 21: the black layer above the header now applies in every browser, not only the in-app ones (html.wv). iPhone Safari and the in-app viewer opened from links let the page show above the fixed header, behind the address bar; it now reads as one solid black block and Safari tints its bars black. Off screen on desktop. */
.hdr::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:240px;background:#000;pointer-events:none}

/* Oct 21: narrow phones (many Android models are 360 px wide): menu items never break onto two lines; below 400 px the spacing between items tightens a little so the logo and all four items fit one row (side margins unchanged, so the logo stays on the page's left line) */
.nav a{white-space:nowrap}
@media(max-width:400px){.nav{gap:calc(12*var(--u));letter-spacing:.08em}}
@media(max-width:350px){.nav{gap:calc(9*var(--u));letter-spacing:.04em}}

/* Oct 21, launch: iPhone Safari still showed the page in a strip under its floating toolbar during the intro. While the intro plays (html.lock), the page behind it is hidden and the ground is the intro red, so anything Safari shows under its toolbar is red too. */
html.lock{background:#EB1400}
html.lock body{visibility:hidden}
html.lock #intro{visibility:visible}

/* Oct 21 launch: on the home opening screen the down chevron sits on the left ruler directly under the quote, larger, full strength and gently pulsing, so the eye finds it (centered it collided with the founder credit; bottom right was out of view) */
.dn.dn-open{left:var(--pad);right:auto;margin-left:calc(-5*var(--u));opacity:1}
.dn.dn-open svg{width:calc(56*var(--u));height:calc(13*var(--u));stroke-width:3.4}
.dn.dn-open.on svg{animation:dnpulse 1.8s ease-in-out infinite}
@keyframes dnpulse{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(7*var(--u)))}}
@media(prefers-reduced-motion:reduce){.dn.dn-open.on svg{animation:none}}