/* Sheila Milani, option C: black */
:root{
  --bg:#FFFFFF; --bg-2:#F5F5F3; --ink:#0A0A0A; --ink-2:#3A3A36; --muted:#6E6E69; --line:#E6E6E3; --line-2:#CFCFCB;
  --display:'Outfit',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --sans:'Outfit',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --pad:clamp(20px,5.5vw,80px); --max:1440px; --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:500;letter-spacing:-.03em}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:10px 16px;z-index:60;border-radius:8px}
.skip:focus{left:8px}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.idx{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* header */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-header .wrap{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.02em}
.nav{display:flex;align-items:center;gap:clamp(16px,2.6vw,36px);font-size:15px}
.nav a{color:var(--ink-2)}.nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:500;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.btn.solid{background:var(--ink);color:var(--bg)}.btn.solid:hover{background:#333}
.btn.line{border:1px solid var(--line-2);color:var(--ink)}.btn.line:hover{border-color:var(--ink)}
.btn svg{transition:transform .2s}.btn:hover svg{transform:translateX(3px)}
.nav .btn{min-height:40px;padding:0 18px;color:var(--ink)}
@media (max-width:720px){.nav .hide-sm{display:none}}

/* layout */
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
@media (max-width:900px){.grid12{grid-template-columns:1fr;row-gap:24px}.grid12>*{grid-column:auto!important}}
.section{padding-top:clamp(96px,11vw,160px)}
.display{font-size:clamp(52px,8.4vw,128px);line-height:.98;letter-spacing:-.03em}
.h2{font-size:clamp(36px,4.4vw,64px);line-height:1.02;letter-spacing:-.04em}
.h3{font-size:clamp(28px,3vw,44px);line-height:1.05}
.h4{font-size:clamp(22px,2vw,28px);line-height:1.12;letter-spacing:-.03em}
.lede{font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--ink-2)}
.body{color:var(--ink-2)}

/* hero */
.hero{padding-top:clamp(64px,8vw,112px)}
.hero .top{align-items:end}
.hero .t{grid-column:span 8;display:flex;flex-direction:column;gap:28px}
.hero .a{grid-column:span 4;display:flex;flex-direction:column;gap:28px;padding-bottom:8px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.hero figure{margin:clamp(48px,6vw,80px) 0 0}
.rounded{border-radius:var(--r);overflow:hidden}
figcaption,.cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--muted)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(64px,8vw,104px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats>div{padding:clamp(32px,4vw,48px) 24px clamp(32px,4vw,48px) 0;border-right:1px solid var(--line)}
.stats>div+div{padding-left:24px}
.stats>div:last-child{border-right:0}
.stats .n{font-family:var(--display);font-weight:500;font-size:clamp(40px,4.6vw,68px);line-height:1;letter-spacing:-.045em}
.stats p{margin-top:14px;font-size:15px;color:var(--muted);max-width:28ch}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats>div{border-right:0;padding-left:0!important;border-bottom:1px solid var(--line)}}

/* section head */
.head{align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.head .t{grid-column:span 7;display:flex;flex-direction:column;gap:18px}
.head .n{grid-column:9 / span 4}

/* features & cards (natural image ratios) */
.feature{display:block;margin-bottom:clamp(72px,8vw,112px)}
.feature .rounded img,.card .rounded img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.feature:hover img,.card:hover img{transform:scale(1.015)}
.feature .fmeta{margin-top:24px;align-items:start}
.feature .fmeta .t{grid-column:span 5;display:flex;flex-direction:column;gap:10px}
.feature .fmeta .d{grid-column:6 / span 4}
.feature .fmeta .k{grid-column:10 / span 3;display:flex;flex-direction:column;gap:12px;align-items:flex-end;text-align:right}
.kpi .n{font-family:var(--display);font-size:40px;line-height:1;letter-spacing:-.04em}
.kpi .l{font-size:13px;color:var(--muted)}
.more{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--ink)}
.more svg{transition:transform .2s}a:hover .more svg{transform:translateX(3px)}
@media (max-width:900px){.feature .fmeta .k{align-items:flex-start;text-align:left}}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,40px);row-gap:clamp(56px,6vw,88px);align-items:start}
.card{display:flex;flex-direction:column;gap:16px}
.card .facts{display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.card .facts b{font-family:var(--display);font-weight:500;font-size:24px;color:var(--ink);margin-right:6px;letter-spacing:-.03em}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cards.three{grid-template-columns:1fr}}
@media (max-width:720px){.cards{grid-template-columns:1fr}}
.also{margin-top:clamp(56px,6vw,80px);padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:15px}
.also b{color:var(--ink);font-weight:500;margin-right:10px}

/* inverted panel */
.invert{background:var(--ink);color:#0A0A0A;border-radius:28px;padding:clamp(40px,6vw,88px)}
.invert .mono,.invert .idx{color:#6B6B66}
.invert .lede,.invert .body{color:#3A3A36}
.invert .top{align-items:center}
.invert .top .t{grid-column:span 6;display:flex;flex-direction:column;gap:24px}
.invert .top figure{grid-column:8 / span 5;margin:0}
.invert figcaption{color:#6B6B66}
.principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:clamp(56px,6vw,80px);padding-top:32px;border-top:1px solid rgba(10,10,10,.14)}
.principles h3{font-family:var(--sans);font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:12px 0 8px}
.principles p{font-size:15px;color:#4A4A45}
@media (max-width:1000px){.principles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.principles{grid-template-columns:1fr}}

/* index */
.index{margin-top:clamp(56px,6vw,80px);border-top:1px solid var(--ink)}
.index .r{display:grid;grid-template-columns:110px 1.1fr 1.7fr 1fr;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);font-size:16px}
.index .r>span:nth-child(2){font-weight:500}
.index .r>span:nth-child(1),.index .r>span:nth-child(4){color:var(--muted)}
.index .h{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:12px 0}
@media (max-width:860px){.index .r{grid-template-columns:1fr;gap:2px}.index .h{display:none}}

/* about */
.about{align-items:center}
.about figure{grid-column:span 6;margin:0}
.about .t{grid-column:8 / span 5;display:flex;flex-direction:column;gap:22px}
.facts2{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:22px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(56px,6vw,80px);border-top:1px solid var(--line)}
.timeline div{padding:20px 20px 20px 0;border-bottom:1px solid var(--line)}
.timeline b{display:block;font-weight:500;margin-top:6px}
.timeline .muted{font-size:14px}
@media (max-width:900px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* contact */
.contact{margin-top:clamp(112px,13vw,184px);padding:clamp(80px,10vw,128px) 0 40px;border-top:1px solid var(--line)}
.contact h2{font-size:clamp(56px,9vw,140px);line-height:.92;letter-spacing:-.05em;margin:24px 0 40px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(80px,9vw,120px);padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.foot nav{display:flex;gap:24px}.foot a:hover{color:var(--ink)}

/* case study */
.case-hero{padding-top:clamp(48px,6vw,80px)}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--muted)}
.back:hover{color:var(--ink)}
.case-hero h1{margin-top:24px}
.tag{font-size:clamp(20px,2vw,28px);color:var(--muted);margin-top:18px;letter-spacing:-.02em}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line)}
.meta div{display:flex;flex-direction:column;gap:6px}
@media (max-width:760px){.meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
.split{align-items:start}
.split .l{grid-column:span 3;padding-top:10px}
.split .b{grid-column:4 / span 9}
.split .big{font-size:clamp(24px,2.5vw,36px);line-height:1.25;letter-spacing:-.025em;color:var(--ink)}
.split .two{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px;color:var(--ink-2)}
@media (max-width:860px){.split .two{grid-template-columns:1fr}}
.results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.results>div{padding:32px 24px 32px 0;border-bottom:1px solid var(--line)}
.results .n{font-family:var(--display);font-weight:500;font-size:clamp(36px,4vw,60px);line-height:1;letter-spacing:-.045em}
.results .l{margin-top:10px;font-size:14px;color:var(--muted)}
@media (max-width:860px){.results{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chapter{align-items:end;margin-bottom:28px}
.chapter .t{grid-column:span 7;display:flex;align-items:baseline;gap:20px}
.chapter .n{grid-column:9 / span 4;color:var(--muted)}
.gal{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.gal .row{display:grid;gap:clamp(16px,2vw,24px);align-items:start}
.gal .c2{grid-template-columns:var(--cols,1fr 1fr)}
.gal figure{margin:0}
.gal img{border-radius:var(--r)}
@media (max-width:760px){.gal .c2{grid-template-columns:1fr}}
.next{display:block;margin-top:clamp(112px,13vw,184px);padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--line)}
.next .grid12{align-items:center}
.next .t{grid-column:span 5;display:flex;flex-direction:column;gap:16px}
.next .i{grid-column:7 / span 6}
.next img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}.next:hover img{transform:scale(1.015)}
.minifoot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:32px 0 48px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* v2 additions */
.lede,.body,.pitem p,.stats p,.muted{font-weight:400}
b,strong{font-weight:500}
.hero-bleed{margin-top:clamp(48px,6vw,80px)}
.hero-bleed img{border-radius:0}
.plist{display:flex;flex-direction:column;gap:clamp(56px,6vw,88px)}
.prow{display:grid;grid-template-columns:var(--cols,1fr 1fr);column-gap:clamp(20px,2.5vw,32px);align-items:start}
.pitem{display:block}
.pitem .im{overflow:hidden}
.pitem img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pitem:hover img{transform:scale(1.015)}
.pitem .row1{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px}
.pitem h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.025em;line-height:1.15}
.pitem .who{font-size:14px;color:var(--muted);white-space:nowrap}
.pitem p{margin-top:6px;color:var(--muted);font-size:16px;max-width:48ch}
@media (max-width:760px){.prow{grid-template-columns:1fr;row-gap:56px}}
.about figure img{border-radius:0}
.prow.solo{grid-template-columns:1fr}
.pitem.big h3{font-size:clamp(28px,2.8vw,40px)}

.idgrid{display:grid;grid-template-columns:2734fr 889fr;gap:clamp(12px,1.4vw,18px);align-items:start}
.idgrid .l{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px)}
.idrow{display:grid;grid-template-columns:var(--cols);gap:clamp(12px,1.4vw,18px);align-items:start}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px)}
.idgrid img,.cards3 img{border-radius:14px}
@media (max-width:760px){.idgrid,.idrow,.cards3{grid-template-columns:1fr}}

/* white variant: invert the panel to black */
.invert{background:#0A0A0A;color:#F5F5F2}
.invert .mono,.invert .idx{color:#8C8C86}
.invert .lede,.invert .body{color:#C9C9C4}

/* v3: aligned project grid, gray tiles, black contact */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);row-gap:clamp(40px,4.5vw,64px)}
.pgrid .pitem .tile{aspect-ratio:3/2;background:#F2F2F2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pgrid .pitem .tile img{width:100%;height:100%;object-fit:contain}
.pgrid .pitem .row1{margin-top:14px}
.pgrid .pitem h3{font-size:clamp(18px,1.5vw,22px);letter-spacing:-.015em}
.pgrid .pitem .who{font-size:13px}
@media (max-width:1100px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.pgrid{grid-template-columns:1fr}}
.contact.dark{background:#0A0A0A;color:#F5F5F2;border-top:0;margin-top:clamp(112px,13vw,184px);padding-bottom:40px}
.contact.dark .mono{color:#8C8C86}
.contact.dark .btn.solid{background:#F5F5F2;color:#0A0A0A}.contact.dark .btn.solid:hover{background:#fff}
.contact.dark .foot{border-top-color:#262626;color:#8C8C86}.contact.dark .foot a:hover{color:#fff}
.graytile{background:#F2F2F2}

.pgrid{grid-auto-flow:row dense}
.pgrid .pitem{display:flex;flex-direction:column}
.pgrid .pitem.big-l{grid-column:1 / span 2;grid-row:span 2}
.pgrid .pitem.big-r{grid-column:2 / span 2;grid-row:span 2}
.pgrid .pitem.big-l .tile,.pgrid .pitem.big-r .tile{aspect-ratio:auto;flex:1;min-height:0}
.pgrid .pitem.big-l h3,.pgrid .pitem.big-r h3{font-size:clamp(22px,2vw,28px)}
@media (max-width:1100px){.pgrid .pitem.big-l,.pgrid .pitem.big-r{grid-column:1 / -1;grid-row:auto}.pgrid .pitem.big-l .tile,.pgrid .pitem.big-r .tile{aspect-ratio:3/2;flex:none}}

/* v4 grid per sketch: equal-height rows, wide tiles span two columns */
.pgrid{grid-auto-flow:row}
.pgrid .pitem.wide{grid-column:span 2}
.pgrid .pitem .tile,.pgrid .pitem.wide .tile{aspect-ratio:auto;flex:none;height:clamp(240px,27vw,400px)}
@media (max-width:1100px){.pgrid .pitem.wide{grid-column:1 / -1}.pgrid .pitem .tile,.pgrid .pitem.wide .tile{height:auto;aspect-ratio:3/2}}
@media (max-width:700px){.pgrid .pitem.wide{grid-column:auto}}

.pgrid .pitem .tile img{object-fit:cover}
.pgrid .pitem .tile.fit img{object-fit:contain}
.pgrid .pitem .tile.fit{background:#F0F0F0}

.pgrid .pitem .tile{border-radius:8px}
.grid12.about{align-items:start}
.about figure{margin-top:var(--about-offset,41px)}
@media (max-width:900px){.about figure{margin-top:0}}

/* one radius for every image */
:root{--r:14px}
img{border-radius:var(--r)}
.rounded,.pgrid .pitem .tile{border-radius:var(--r);overflow:hidden}
.pgrid .pitem .tile img{border-radius:0}
.about figure img,.hero-bleed img,.gal img,.idgrid img,.cards3 img{border-radius:var(--r)}
.display.hl{font-size:clamp(44px,5.8vw,88px);line-height:1.02;letter-spacing:-.03em}

video.loop{display:block;width:100%;height:auto;border-radius:var(--r);background:#E9E6E3}
@media (prefers-reduced-motion:reduce){video.loop{animation:none}}

.invert .top .t{grid-column:span 5}
.invert .top figure{grid-column:6 / span 7}

.invert .top{align-items:stretch}
.invert .top .t{justify-content:space-between;gap:32px}
.invert .top .tt{display:flex;flex-direction:column;gap:24px}
@media (max-width:900px){.invert .top .t{justify-content:flex-start}}

.pgrid .pitem .tile video{display:block;width:100%;height:100%;object-fit:cover}

.invert .top{align-items:start}
.invert .top .t{justify-content:flex-start}
.invert .top figure{margin-top:var(--vr-offset,43px)}
@media (max-width:900px){.invert .top figure{margin-top:0}}

.about figure{grid-column:span 7}

/* about v2: image on top, copy below */
.about2 .aimg{margin:0;width:66.666%}
.about2 .abody{margin-top:clamp(40px,4.5vw,64px);align-items:start}
.about2 .abody .h{grid-column:span 5;display:flex;flex-direction:column;gap:18px}
.about2 .abody .b{grid-column:7 / span 6;display:flex;flex-direction:column;gap:22px}
@media (max-width:900px){.about2 .aimg{width:100%}}

/* approach: bottom-align video with body copy */
.invert .top{align-items:end}
.invert .top figure{margin-top:0}
/* about v3 */
.about3 .ah{display:flex;flex-direction:column;gap:20px;margin-bottom:clamp(40px,5vw,72px)}
.about3 .display.ab{font-size:clamp(48px,7vw,108px);line-height:.98;letter-spacing:-.035em;max-width:14ch}
.about3 .ag{align-items:start}
.about3 .ai{grid-column:span 6;margin:0}
.about3 .at{grid-column:8 / span 5;display:flex;flex-direction:column;gap:24px}
.about3 .at .big{font-size:clamp(20px,1.7vw,24px);line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
@media (max-width:900px){.about3 .ai,.about3 .at{grid-column:auto}}
/* modern buttons */
.btn{min-height:48px;padding:0 22px;font-size:15px;font-weight:500;letter-spacing:-.005em;border:0;transition:background .25s,color .25s,transform .25s}
.btn.solid{background:#0A0A0A;color:#fff;padding:5px 5px 5px 22px;gap:14px}
.btn.solid svg{box-sizing:content-box;width:14px;height:14px;padding:12px;border-radius:50%;background:#fff;color:#0A0A0A;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn.solid:hover{background:#2A2A2A}
.btn.solid:hover svg{transform:translateX(2px) rotate(-45deg)}
.btn.line{background:#F0F0EE;color:#0A0A0A;border:0}
.btn.line:hover{background:#E4E4E1}
.nav .btn{min-height:40px;padding:0 18px;background:#0A0A0A;color:#fff}
.nav .btn:hover{background:#2A2A2A;color:#fff}
.contact.dark .btn.solid{background:#fff;color:#0A0A0A}
.contact.dark .btn.solid svg{background:#0A0A0A;color:#fff}
.contact.dark .btn.solid:hover{background:#E9E9E6}

/* about v4: copy top-aligned with headline */
.about4{align-items:start}
.about4 .al{grid-column:span 6;display:flex;flex-direction:column;gap:20px}
.about4 .al .display.ab{font-size:clamp(44px,5.6vw,84px);line-height:1;letter-spacing:-.035em}
.about4 .ai{margin:clamp(16px,2vw,28px) 0 0}
.about4 .ar{grid-column:8 / span 5;display:flex;flex-direction:column;gap:22px;padding-top:var(--ab-off,41px)}
@media (max-width:900px){.about4 .al,.about4 .ar{grid-column:auto}.about4 .ar{padding-top:0}}

/* no labels on home grid */
.pgrid{row-gap:clamp(16px,2vw,28px)}
/* project pages: black */
body.dark-page{--bg:#0A0A0A;--bg-2:#141414;--ink:#F5F5F2;--ink-2:#C9C9C4;--muted:#8C8C86;--line:#262626;--line-2:#3A3A3A;background:#0A0A0A;color:#F5F5F2}
body.dark-page .site-header{background:rgba(10,10,10,.82)}
body.dark-page .nav .btn{background:#F5F5F2;color:#0A0A0A}
body.dark-page .nav .btn:hover{background:#fff}
body.dark-page .btn.solid{background:#F5F5F2;color:#0A0A0A}
body.dark-page .btn.solid svg{background:#0A0A0A;color:#fff}
body.dark-page .minifoot{border-top-color:#262626}

.intro-meta{display:flex;flex-direction:column;gap:4px;font-size:16px;color:var(--ink-2);padding-top:6px}
.intro-meta span:first-child{color:var(--ink)}

/* approach: full-bleed black band */
#approach{background:#0A0A0A;margin-top:clamp(96px,11vw,160px);padding:clamp(88px,10vw,140px) 0}
#approach .invert{border-radius:0;background:transparent;padding:0}
/* one radius everywhere */
:root{--r:14px}
img,video,.rounded,.pgrid .pitem .tile,.gal img,.idgrid img,.cards3 img,video.loop,.about4 .ai img,.next .i{border-radius:var(--r)}
.pgrid .pitem .tile img,.pgrid .pitem .tile video{border-radius:0}

.brand{font-size:19px}
.mono{font-size:13px}

.work-label{display:block;margin-bottom:20px}

.work-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--ink);margin-bottom:clamp(28px,3.5vw,48px)}
.work-head .h2{font-size:clamp(40px,4.6vw,68px);letter-spacing:-.035em;line-height:1}

.work-head .h2{font-size:clamp(38px,4.46vw,66px)}

.work-head .h2{font-size:clamp(36px,4.32vw,64px)}

.work-head .h2{font-size:clamp(34px,4.17vw,62px)}

.work-head .h2{font-size:clamp(30px,3.05vw,44px)}

.brand{font-size:23px;letter-spacing:-.025em}

.brand{font-size:28px;letter-spacing:-.03em}

.idgrid{grid-template-columns:956.7fr 305.3fr;gap:18px}
.idgrid .l,.idrow{gap:18px}

/* project template modules */
.mods{display:flex;flex-direction:column;gap:16px}
.mod{display:grid;gap:16px}
.cell{border-radius:var(--r);overflow:hidden;background:#161616;height:100%}
.cell img{width:100%;height:100%;object-fit:cover;border-radius:0;display:block}
.m-full .cell{aspect-ratio:21/9}
.m-pair{grid-template-columns:1fr 1fr}.m-pair .cell{aspect-ratio:4/3}
.m-trio{grid-template-columns:repeat(3,1fr)}.m-trio .cell{aspect-ratio:4/5}
.m-cl,.m-cr{grid-template-columns:1fr 1fr 2fr;grid-template-rows:1fr 1fr;aspect-ratio:2.15/1;grid-template-areas:"a b c" "d d c"}
.m-cr{grid-template-columns:2fr 1fr 1fr;grid-template-areas:"c a b" "c d d"}
.ga{grid-area:a}.gb{grid-area:b}.gc{grid-area:c}.gd{grid-area:d}
.ga,.gb,.gc,.gd{min-height:0}
.m-band{grid-template-columns:repeat(3,1fr);background:#EDEDEA;border-radius:var(--r);padding:clamp(16px,2vw,28px);gap:clamp(12px,1.6vw,22px)}
.m-band figure{margin:0}.m-band img{border-radius:10px}
.m-note{grid-template-columns:repeat(12,minmax(0,1fr));padding:clamp(40px,5vw,72px) 0}
.m-note .nt{grid-column:1 / span 4;display:flex;flex-direction:column;gap:12px}
.m-note.r .nt{grid-column:9 / span 4}
.m-note p,.m-textimg p{font-size:17px;line-height:1.6;color:var(--ink-2)}
.m-textimg{grid-template-columns:4fr 8fr;align-items:end;gap:clamp(24px,3vw,48px);padding:clamp(24px,3vw,40px) 0}
.m-textimg .nt{display:flex;flex-direction:column;gap:12px;padding-bottom:8px}
.m-textimg figure{margin:0}
body.dark-page .m-band{background:#1A1A1A}
@media (max-width:760px){.m-pair,.m-trio,.m-band,.m-textimg{grid-template-columns:1fr}
.m-cl,.m-cr{grid-template-columns:1fr 1fr;grid-template-areas:"c c" "a b" "d d";aspect-ratio:auto}
.m-cl .cell,.m-cr .cell{aspect-ratio:4/3}.m-cl .gc .cell,.m-cr .gc .cell{aspect-ratio:4/5}
.m-full .cell{aspect-ratio:4/3}.m-note .nt,.m-note.r .nt{grid-column:1 / -1}}
.m-cl{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr)}
.m-cr{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.m-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.m-trio,.m-band{grid-template-columns:repeat(3,minmax(0,1fr))}
.ga,.gb,.gc,.gd,.cell{min-width:0}
@media (max-width:760px){.m-cl,.m-cr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.m-pair,.m-trio,.m-band{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
.mod.m-cl,.mod.m-cr{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"c c" "a b" "d d";aspect-ratio:auto}
.mod.m-cl .cell,.mod.m-cr .cell{aspect-ratio:4/3;height:auto}
.mod.m-cl .gc .cell,.mod.m-cr .gc .cell{aspect-ratio:1/1}}

/* negative-space modules */
.m-off,.m-stag{grid-template-columns:repeat(12,minmax(0,1fr))}
.m-off .cell,.m-stag .cell{aspect-ratio:3/2}
.m-off.offl .cell{grid-column:1 / span 8}.m-off.offr .cell{grid-column:5 / span 8}
.m-stag .sa{grid-column:1 / span 7;grid-row:1}.m-stag .sb{grid-column:9 / span 4;grid-row:1;align-self:end}
.m-stag.stagr .sa{grid-column:6 / span 7}.m-stag.stagr .sb{grid-column:1 / span 4;align-self:start}
.m-off,.m-stag{padding:clamp(8px,2vw,32px) 0}
@media (max-width:760px){.m-off.offl .cell,.m-off.offr .cell{grid-column:1 / -1}
.m-stag .sa,.m-stag.stagr .sa{grid-column:1 / -1;grid-row:1}
.m-stag .sb{grid-column:4 / -1;grid-row:2}.m-stag.stagr .sb{grid-column:1 / span 9;grid-row:2}}

/* reference-order modules */
.m-full .cell{aspect-ratio:var(--ar,21/9)}
.m-stag.stagt .sa{grid-column:1 / span 8}.m-stag.stagt .sa .cell{aspect-ratio:var(--ar,3/2)}
.m-stag.stagt .sb{grid-column:9 / span 4;align-self:start}
.m-stag.stagt{padding:0}
.m-c3l{grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-areas:"a c" "b c";aspect-ratio:2/1.1}
.m-c3r{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"c a a" "c b d";aspect-ratio:2.1/1}
.m-c3l .cell,.m-c3r .cell{height:100%}
.m-c3l .ga,.m-c3l .gb,.m-c3l .gc,.m-c3r .ga,.m-c3r .gb,.m-c3r .gc,.m-c3r .gd{min-height:0;min-width:0}
@media (max-width:760px){.m-full .cell{aspect-ratio:4/3}
.m-stag.stagt .sa{grid-column:1 / -1}.m-stag.stagt .sb{grid-column:4 / -1;grid-row:2}
.mod.m-c3l{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"c c" "a b";aspect-ratio:auto}
.mod.m-c3r{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"c c" "a a" "b d";aspect-ratio:auto}
.m-c3l .cell,.m-c3r .cell{aspect-ratio:4/3;height:auto}.m-c3l .gc .cell,.m-c3r .gc .cell{aspect-ratio:1/1}}
/* clean rounded corners */
.cell{background:transparent;-webkit-mask-image:-webkit-radial-gradient(white,black);isolation:isolate;transform:translateZ(0)}
.rounded{-webkit-mask-image:-webkit-radial-gradient(white,black);isolation:isolate}
.cell img,.rounded img,.rounded video{border-radius:var(--r)}
.m-gap{height:clamp(16px,3vw,40px)}
/* CIC modules */
.m-plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.m-plans figure,.m-nat figure{margin:0;min-width:0}
figure.paper{background:#fff;border-radius:var(--r);overflow:hidden}
figure.paper img{display:block;width:100%;height:auto;border-radius:0}
.m-nat{grid-template-columns:repeat(12,minmax(0,1fr))}
.m-nat figure img{display:block;width:100%;height:auto;border-radius:var(--r)}
@media (max-width:760px){.m-plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.m-nat figure{grid-column:1 / -1 !important}}
/* CIC: plan sheet, headers, plan caption */
.m-sheet figure.sheet{margin:0;padding:clamp(20px,4vw,64px)}
.m-sheet .sg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,48px)}
.m-sheet .sg img{width:100%;height:auto;display:block;border-radius:0}
.m-head{grid-template-columns:repeat(12,minmax(0,1fr));padding:clamp(24px,3vw,40px) 0 clamp(8px,1vw,12px)}
.m-head .nt{grid-column:1 / span 6;display:flex;flex-direction:column;gap:12px}
.m-head .h3{font-size:clamp(24px,2.2vw,32px);font-weight:500;letter-spacing:-.015em;line-height:1.15;margin:0;color:var(--ink)}
.m-head p{font-size:17px;line-height:1.6;color:var(--ink-2);margin:0;max-width:52ch}
.m-planfig{grid-template-columns:repeat(12,minmax(0,1fr));row-gap:20px}
.m-planfig figure.pf{grid-column:1 / -1;margin:0;display:flex;justify-content:center;padding:clamp(24px,4vw,64px)}
.m-planfig figure.pf img{width:min(100%,560px);height:auto;border-radius:0}
.m-planfig .key{grid-column:1 / -1;display:flex;flex-direction:column;gap:14px}
.m-planfig ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 32px}
.m-planfig li{font-size:15px;line-height:1.5;color:var(--ink-2);display:flex;gap:12px;align-items:baseline}
.m-planfig .num{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:1.5em}
@media (max-width:760px){.m-sheet .sg{grid-template-columns:repeat(2,minmax(0,1fr))}.m-head .nt{grid-column:1 / -1}.m-planfig ol{grid-template-columns:minmax(0,1fr)}}
.m-planfig ol{grid-template-rows:repeat(4,auto);grid-auto-flow:column}@media (max-width:760px){.m-planfig ol{grid-template-rows:none;grid-auto-flow:row}}
/* full-bleed white VR band */
main{overflow-x:clip}
.m-bleed{display:block;margin-inline:calc(50% - 50vw);background:#F5F5F2;color:#0A0A0A;padding:clamp(56px,8vw,120px) 0}
.m-bleed .bi{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(28px,3vw,48px) 16px}
.m-bleed .nt{grid-column:1 / span 6;display:flex;flex-direction:column;gap:12px}
.m-bleed .mono{color:#6B6B66}
.m-bleed .h3{font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:-.025em;line-height:1.05;margin:0;color:#0A0A0A}
.m-bleed p{font-size:17px;line-height:1.6;color:#3A3A37;margin:0;max-width:56ch}
.m-bleed .bi > figure{grid-column:1 / -1;margin:0;border-radius:var(--r);overflow:hidden}
.m-bleed video{display:block;width:100%;height:auto;border-radius:var(--r)}
@media (max-width:760px){.m-bleed .nt{grid-column:1 / -1}}
/* final plan: key to the right, tighter sheet */
.m-planfig{column-gap:16px;align-items:center}
.m-planfig figure.pf{grid-column:1 / span 7;padding:clamp(16px,2vw,28px)}
.m-planfig figure.pf img{width:100%}
.m-planfig .key{grid-column:9 / span 4}
.m-planfig ol{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;gap:12px}
.m-planfig li{font-size:16px}
@media (max-width:760px){.m-planfig figure.pf,.m-planfig .key{grid-column:1 / -1}}
.m-planfig{align-items:start}.m-planfig .key{align-self:start}
/* design decisions */
.m-dec{grid-template-columns:repeat(12,minmax(0,1fr));row-gap:clamp(20px,2.5vw,32px);padding:clamp(24px,3vw,40px) 0 clamp(16px,2vw,24px)}
.m-dec .nt{grid-column:1 / -1}
.m-dec .h3{font-size:clamp(24px,2.2vw,32px);font-weight:500;letter-spacing:-.015em;line-height:1.15;margin:0;color:var(--ink)}
.m-dec .dcs{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);border-top:1px solid #262626;padding-top:clamp(20px,2vw,28px)}
.m-dec h4{font-size:17px;font-weight:500;margin:0 0 10px;color:var(--ink)}
.m-dec p{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0}
@media (max-width:760px){.m-dec .dcs{grid-template-columns:minmax(0,1fr)}}
.intro-meta .role{display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
.intro-meta .role span{color:var(--muted)}
.intro-meta .role b{font-weight:500;color:var(--ink);font-size:17px}
.intro-meta .role + span{color:var(--ink)}
.pgrid .pitem .tile,.pgrid .pitem.wide .tile{height:clamp(320px,35vw,520px)}@media (max-width:1100px){.pgrid .pitem .tile,.pgrid .pitem.wide .tile{height:auto;aspect-ratio:4/3}}
.m-bleed .bm{grid-column:1 / -1}
.m-bleed figure.paper{background:#fff}
.m-pair.tall .cell{aspect-ratio:4/5}
.m-row{gap:16px;align-items:start}
.m-row figure{margin:0;min-width:0}.m-row img{display:block;width:100%;height:auto;border-radius:var(--r)}
.m-bleed.white{background:#fff}
.m-bleed figure.flat{border-radius:0;overflow:visible}.m-bleed figure.flat img{display:block;width:100%;height:auto;border-radius:0}
@media (max-width:760px){.m-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important}}
.m-bleed .m-head .h3{color:#0A0A0A}.m-bleed .m-head p{color:#3A3A37}
.m-bleed .bm .m-row img{border-radius:0}
.m-bleed .bm .m-nat figure img{border-radius:0}
.m-bleed .m-head{padding-top:clamp(8px,1vw,16px)}
.m-bleed .bm figure{border-radius:0}
/* client quote */
.m-quote{padding:clamp(40px,6vw,96px) 0;grid-template-columns:repeat(12,minmax(0,1fr))}
.m-quote blockquote{grid-column:2 / span 10;margin:0;text-align:center;display:flex;flex-direction:column;gap:24px;align-items:center}
.m-quote p{font-size:clamp(22px,2.4vw,34px);line-height:1.3;letter-spacing:-.015em;color:var(--ink);margin:0;font-weight:400}
.m-quote footer{color:var(--muted)}
@media (max-width:760px){.m-quote blockquote{grid-column:1 / -1}}
.m-head .nt p + p{margin-top:4px}
/* hero video: no light fill at edges */
.case-hero video.loop{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#0A0A0A;transform:scale(1.006);transform-origin:center}
.m-vidimg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.m-vidimg figure,.m-vid figure{margin:0;border-radius:var(--r);overflow:hidden}
.m-vidimg video,.m-vid video{display:block;width:100%;height:auto}
.m-vidimg img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.m-cap p{margin:4px 0 0;color:var(--muted)}
@media (max-width:760px){.m-vidimg{grid-template-columns:minmax(0,1fr)}}
.m-quote p{text-wrap:balance;max-width:44ch;margin-left:auto;margin-right:auto}
.pgrid6{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.m-bleed .bi > .pgrid6 figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:5/7;grid-column:auto}
.pgrid6 img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
@media (max-width:760px){.pgrid6{grid-template-columns:repeat(2,minmax(0,1fr))}}
.m-bleed .bi > .pgrid6 figure{aspect-ratio:auto}.pgrid6{align-items:start}.pgrid6 img{height:auto;object-fit:fill}
/* clean collages: individual panels, uniform corners */
.m-coll{display:block;position:relative;width:100%}
.m-coll figure{position:absolute;margin:0;border-radius:var(--r);overflow:hidden}
.m-coll img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
@media (max-width:760px){.m-coll{width:100% !important;margin-left:0 !important}.m-coll figure{border-radius:8px}}
/* sizzle reel */
.hero:has(.reel){padding-top:0}
.reel{display:flex;gap:3px;width:100vw;margin:0 calc(50% - 50vw) clamp(40px,6vw,88px);height:clamp(340px,52vw,760px);background:#0A0A0A;overflow:hidden}
.reel .rp{position:relative;flex:2 1 0;min-width:0;overflow:hidden;transition:flex-grow .95s cubic-bezier(.76,0,.18,1)}
.reel .rp i{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .18s linear}
@media (max-width:760px){.reel{height:clamp(300px,90vw,520px);gap:2px}}
@media (prefers-reduced-motion:reduce){.reel .rp{transition:none}}
.reel.one{display:block;position:relative}
.reel.one i{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .14s linear}
.reel.one{height:clamp(220px,28vw,400px);margin-bottom:clamp(28px,3.5vw,52px)}.reel.one i{transition:opacity .09s linear}@media (max-width:760px){.reel.one{height:clamp(200px,56vw,320px)}}
.brand{font-size:38px;letter-spacing:-.035em}@media (max-width:760px){.brand{font-size:28px}}
@media (min-width:901px){.about4 .al{grid-column:span 7}.about4 .ar{grid-column:8 / span 5;padding-left:clamp(16px,2.4vw,36px)}}
.mono{font-size:14px}
@media (min-width:901px){#approach .invert .top{align-items:start}#approach .invert .top figure{margin-top:calc(46px + clamp(4px,.55vw,8px))}}
@media (min-width:901px){#approach .invert .top .t{grid-column:span 4}}
@media (min-width:901px){#approach .invert .top .t{grid-column:span 5;padding-right:clamp(24px,4vw,58px)}}
video.loop{background:transparent;object-fit:cover}.rounded{overflow:hidden}.rounded > video.loop{transform:scale(1.012);transform-origin:center;border-radius:0}#approach .rounded{background:#0A0A0A}
.m-head p,.m-dec p,.m-bleed p,.lede,.big,.m-note p{text-wrap:pretty}
.site-header{border-bottom-width:1.5px}body:not(.dark-page) .site-header{border-bottom-color:#D4D4D0}
@media (max-width:900px){br.dbr{display:none}}
@media (min-width:901px){.hero h1.hl{white-space:nowrap}}
@media (min-width:901px){.hero h1.hl{font-size:min(5.05vw,74px)}}
/* tighter eyebrow-to-headline spacing, site-wide */
.hero .t > .mono + h1{margin-top:-16px}
#approach .tt > .mono + h2{margin-top:-12px}
.about4 .al > .mono + h2{margin-top:-8px}
.contact .mono + h2{margin-top:12px}
.next .t > .mono + h2{margin-top:-4px}
.contact .mono + h2{margin-top:8px}
@media (min-width:901px){#approach .invert .top figure{margin-top:calc(34px + clamp(4px,.55vw,8px))}}