/*PREVIEW-FONTS*/
@font-face{font-family:"Nexa Preview";src:url("../fonts/nexa-300.woff2") format("woff2");unicode-range:U+D, U+20-22, U+27, U+2C-2E, U+30-3B, U+3F, U+41-5A, U+61-7A, U+A0, U+AB, U+BB, U+DF, U+401, U+410-44F, U+451, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+F8FF;font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Nexa Preview";src:url("../fonts/nexa-300.woff2") format("woff2");unicode-range:U+20-22, U+27, U+2C-2E, U+30-3B, U+3F, U+41-5A, U+61-7A, U+A0, U+AB, U+BB, U+DF, U+401, U+410-44F, U+451, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+F8FF;font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Nexa Preview";src:url("../fonts/nexa-400.woff2") format("woff2");unicode-range:U+D, U+20-22, U+27, U+2C-2E, U+30-3B, U+3F, U+41-5A, U+61-7A, U+A0, U+AB, U+BB, U+DF, U+401, U+410-44F, U+451, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+F8FF;font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nexa Preview";src:url("../fonts/nexa-700.woff2") format("woff2");unicode-range:U+D, U+20-22, U+27, U+2C-2E, U+30-3B, U+3F, U+41-5A, U+61-7A, U+A0, U+AB, U+BB, U+DF, U+401, U+410-44F, U+451, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+F8FF;font-weight:500 700;font-style:normal;font-display:swap}
/*END-PREVIEW-FONTS*/
/* ============================================================
   noircase · Cloud Dancer system
   Pentagram's structure, Apple's pacing, noircase's identity.
   Type: Nexa, all lowercase, one scale, two weights.
   ============================================================ */
:root{
  --ground:#F1F0EC; --raised:#F8F7F4; --ink:#2D2C28; --ink-2:#67655F; --ink-3:#8F8C86;
  --line:#DCDAD4; --tile:#E6E4DE; --blush:#D4C2C0;
  --night:#2D2C28; --night-ink:#EFEEEA; --night-2:#AAA7A0; --night-line:#45443F;
  --wm:none;
  --f:"nexa","Nexa Preview","Helvetica Neue",Arial,sans-serif;
  /* four sizes, nothing else: small (labels), text (all reading), heading, display */
  --t-s:14px; --t-b:clamp(17px,1.32vw,19px); --t-h:clamp(24px,2.22vw,32px); --t-d:clamp(36px,3.61vw,52px);
  --fs-xs:var(--t-s); --fs-s:var(--t-s); --fs-b:var(--t-b); --fs-l:var(--t-b);
  --fs-h3:var(--t-h); --fs-h2:var(--t-h); --fs-h1:var(--t-d); --fs-d:var(--t-d);
  /* leading and tracking: large type tighter, small type opener */
  --lh-d:1.05; --lh-h:1.2; --lh-b:1.42; --lh-s:1.3;
  --tr-d:-.02em; --tr-h:-.012em; --tr-s:.01em; --tr-xs:.03em;
  /* spacing on an 8px rhythm */
  --m:clamp(20px,3vw,48px); --g:clamp(16px,1.6vw,24px);
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:clamp(32px,3.6vw,52px); --s7:clamp(44px,5vw,76px);
  --r:18px; --r-lg:28px;
  --e:cubic-bezier(.22,.61,.2,1); --e2:cubic-bezier(.65,0,.35,1);
  --hh:60px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--ground:#1C1B19;--raised:#242320;--ink:#EFEEEA;--ink-2:#AAA7A0;--ink-3:#7F7C76;--line:#34332F;--tile:#2A2926;--night:#121110;--night-line:#2C2B28;--wm:invert(1) brightness(.94)}}
:root[data-theme="dark"]{color-scheme:dark;--ground:#1C1B19;--raised:#242320;--ink:#EFEEEA;--ink-2:#AAA7A0;--ink-3:#7F7C76;--line:#34332F;--tile:#2A2926;--night:#121110;--night-line:#2C2B28;--wm:invert(1) brightness(.94)}

*{box-sizing:border-box}[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-transform:lowercase}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f);font-weight:400;font-size:var(--fs-b);line-height:var(--lh-b);letter-spacing:0;font-kerning:normal;font-feature-settings:"kern";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;padding-top:calc(var(--hh) + env(safe-area-inset-top,0px))}
input{text-transform:lowercase}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit;text-transform:inherit}
img,video{display:block;max-width:100%}
h1,h2,h3,p,figure,dl,dd,blockquote{margin:0}
h1,h2{font-weight:300;letter-spacing:var(--tr-h);line-height:var(--lh-h);text-wrap:balance}
h3{font-weight:400;letter-spacing:var(--tr-h);line-height:var(--lh-h)}
p{text-wrap:pretty}
b,strong{font-weight:400;color:var(--ink)}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:4px;border-radius:6px}
.m{padding-inline:var(--m)}
.wrap{max-width:1600px;margin-inline:auto}
.dim{color:var(--ink-2)}
.u{text-decoration:underline;text-underline-offset:.28em;text-decoration-thickness:1px}
.lbl{font-size:var(--fs-s);letter-spacing:var(--tr-s);color:var(--ink-3)}
.lnk{font-size:var(--fs-s);letter-spacing:var(--tr-s);display:inline-flex;gap:8px;align-items:center;color:var(--ink)}
.lnk:hover span{transform:translateX(3px)}.lnk span{transition:transform .3s var(--e)}

/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--ground) 80%,transparent);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);transition:transform .5s var(--e)}
header.tuck{transform:translateY(-100%)}
header .in{height:var(--hh);display:flex;align-items:center;justify-content:space-between}
.logo{height:19px;width:auto;filter:var(--wm)}
nav.main{display:flex;align-items:center;gap:clamp(20px,2.4vw,36px);font-size:var(--fs-s);letter-spacing:var(--tr-s)}
nav.main a{color:var(--ink-2);transition:color .2s}
nav.main a:hover,nav.main a[aria-current]{color:var(--ink)}
.ic{width:16px;height:16px;display:block}
#menu{display:none;font-size:var(--fs-s);letter-spacing:var(--tr-s)}
@media (max-width:780px){nav.main a{display:none}#menu{display:block}}
#sheet{position:fixed;inset:0;z-index:60;background:var(--ground);padding:calc(env(safe-area-inset-top,0px) + 12px) var(--m) 24px;display:flex;flex-direction:column;gap:4px}
#sheet .top{display:flex;justify-content:space-between;align-items:center;height:36px;margin-bottom:var(--s5)}
#sheet a.n{font-size:var(--fs-h2);line-height:1.3;font-weight:300;letter-spacing:var(--tr-h)}

/* ---------- media: always whole, never cropped ---------- */
.fig{position:relative;overflow:hidden;border-radius:var(--r);background:var(--tile);width:100%}
.fig img,.fig video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--e)}
.fig img.in,.fig video.in{opacity:1}
a .fig img{transition:opacity .8s var(--e),filter .5s}
a:hover .fig img{filter:brightness(1.04)}

/* justified rows: equal heights, natural widths, nothing cut */
.rows{display:grid;gap:var(--s6)}
.prow{gap:var(--s5)}
.row{display:flex;gap:var(--g);align-items:flex-start}
.row>*{min-width:0}
.row .sp{visibility:hidden}
.pgrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--g)}
.f32{aspect-ratio:3/2}.f32 img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:640px){.pgrid2{grid-template-columns:1fr}}
.mason{display:grid;grid-template-columns:repeat(var(--mc),minmax(0,1fr));gap:var(--g);align-items:start}
.mcol{display:grid;gap:var(--s5);align-content:start;min-width:0}
@media (max-width:640px){.row{flex-direction:column;gap:var(--s5)}.row>*{flex:none!important;width:100%}.row .sp{display:none}}

/* captions: name, one line of context, sector */
.cap{margin-top:var(--s2);font-size:var(--fs-s);line-height:var(--lh-s);letter-spacing:var(--tr-s)}
.cap b{display:block;font-size:var(--fs-b);letter-spacing:0;color:var(--ink)}
.cap span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink-2);margin-top:2px;max-width:48ch;font-size:var(--t-b);line-height:var(--lh-s)}
.cap i{display:inline-block;margin-top:12px;font-style:normal;font-size:var(--fs-xs);letter-spacing:var(--tr-xs);color:var(--ink-3)}
a:hover .cap b{text-decoration:underline;text-underline-offset:.28em;text-decoration-thickness:1px}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--e),transform 1.1s var(--e)}
.rv.on{opacity:1;transform:none}

/* section heads */
.sh{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);margin-bottom:var(--s4);padding-top:var(--s2);border-top:1px solid var(--line)}
.sh h2{font-size:var(--fs-h3);font-weight:400}
.sh h2 span{color:var(--ink-3)}
.sec{padding-block:var(--s7) 0}

/* ---------- HOME ---------- */
/* hero: the work, full bleed, in its own 16:9 shape */
.hcap{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s3);padding-block:0 clamp(20px,2.6vw,40px);color:#F4F3EF;pointer-events:none}
.hcap a{pointer-events:auto}
.hcap .t b{color:inherit;display:block;font-weight:400;font-size:var(--fs-h3);letter-spacing:var(--tr-h);line-height:var(--lh-h)}
.hcap .t span{display:block;margin-top:6px;font-size:var(--fs-s);letter-spacing:var(--tr-s);opacity:.8;max-width:56ch;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.hcap .ctl{display:flex;align-items:center;gap:var(--s2);pointer-events:auto}
.hcap .num{font-size:var(--fs-s);letter-spacing:var(--tr-s);font-variant-numeric:tabular-nums;min-width:4.2em;text-align:right}
.bars{display:flex;gap:6px}
.bars button{width:22px;height:2px;border-radius:2px;background:rgba(244,243,239,.35);position:relative;overflow:hidden}
.bars button::before{content:"";position:absolute;inset:-12px 0}
.bars button i{position:absolute;inset:0 auto 0 0;width:0;background:#F4F3EF}
.bars button.done i{width:100%}
.bars button.run i{animation:fill var(--dur,5s) linear forwards}
@keyframes fill{to{width:100%}}
.rb{width:36px;height:36px;border-radius:50%;border:1px solid rgba(244,243,239,.45);display:grid;place-items:center;transition:background .25s}
.rb:hover{background:rgba(244,243,239,.14)}
.rb svg{width:13px;height:13px}
@media (max-width:640px){
  .hero::after{display:none}
  .hcap{position:static;color:var(--ink);grid-template-columns:1fr;padding-top:var(--s2);gap:var(--s2)}
  .hcap .ctl{justify-content:space-between}.bars{margin-right:auto}
  .bars button{background:var(--line);width:14px}.bars button i{background:var(--ink)}
  .rb{border-color:var(--line)}.rb:hover{background:var(--tile)}
  .hcap .num{display:none}
}
.hwrap{position:relative}

/* the statement under the hero */
.intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s5) var(--g);align-items:end;padding-block:var(--s6) 0}
.intro h1{font-size:var(--fs-d);line-height:var(--lh-d);letter-spacing:var(--tr-d);font-weight:300;max-width:14ch}
.intro h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .08em .1em;margin:0 -.08em}
.intro h1 .w>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--e)}
.intro.go h1 .w>span{transform:none}
.intro .side{display:grid;gap:var(--s3);justify-items:start}
.intro .kick{font-size:var(--fs-l);line-height:1.45;color:var(--ink-2);max-width:32ch}
@media (max-width:860px){.intro{grid-template-columns:1fr}}

/* sentence: we design [discipline] for [sector] */
.sent{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.28em;font-size:var(--fs-b);padding:6px 8px 6px 18px;border-radius:999px;background:var(--raised);border:1px solid var(--line);position:relative;z-index:5}
.slot{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;transition:background .25s}
.slot:hover,.slot[aria-expanded="true"]{background:var(--tile)}
.sent{--rh:1.4em}
.slot .win{display:inline-block;height:var(--rh);overflow:hidden;transition:width .7s var(--e2)}
.slot .reel{display:flex;flex-direction:column;transition:transform .8s var(--e2)}
.slot .reel span{height:var(--rh);line-height:var(--rh);white-space:nowrap;color:var(--ink)}
.slot svg{width:9px;height:9px;transition:transform .3s;color:var(--ink-3)}
.slot[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 10px);left:0;min-width:260px;max-height:min(60vh,420px);overflow:auto;background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 30px 60px -30px rgba(0,0,0,.35);text-align:left;z-index:20}
.menu button{display:flex;justify-content:space-between;gap:16px;width:100%;padding:9px 12px;border-radius:10px;font-size:var(--fs-s);letter-spacing:var(--tr-s)}
.menu button:hover,.menu button[aria-selected="true"]{background:var(--tile)}
.menu button small{color:var(--ink-3);font-variant-numeric:tabular-nums}
.menu button:disabled{color:var(--ink-3);cursor:default}.menu button:disabled:hover{background:none}

/* sticky chapter: the manifesto lights up as you scroll */
.chapter{background:var(--night);color:var(--night-ink);margin-top:var(--s7);height:190vh;position:relative}
.chapter .pin{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));display:flex;flex-direction:column;justify-content:center}
.chapter .lbl{color:var(--night-2);margin-bottom:var(--s4)}
.chapter p.big{font-size:var(--fs-h1);line-height:1.1;letter-spacing:var(--tr-d);font-weight:300;max-width:20ch}
.chapter p.big .w{opacity:.18;transition:opacity .25s}
.chapter p.big .w.lit{opacity:1}
.chapter .tail{margin-top:var(--s4);font-size:var(--fs-l);line-height:1.5;color:var(--night-2);max-width:44ch}

/* numbers */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);border-top:1px solid var(--line);padding-top:var(--s3)}
.nums b{display:block;font-size:var(--fs-d);line-height:1;font-weight:300;letter-spacing:var(--tr-d);font-variant-numeric:tabular-nums;color:var(--ink)}
.nums span{display:block;margin-top:var(--s2);font-size:var(--fs-s);letter-spacing:var(--tr-s);color:var(--ink-2)}
@media (max-width:760px){.nums{grid-template-columns:1fr 1fr;row-gap:var(--s4)}}

/* films: a slow, endless reel, pictures only */
.films{background:var(--night);margin-top:var(--s7);padding-block:var(--s6);overflow:hidden}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mtrack{display:flex;gap:var(--g);width:max-content;animation:slide var(--mdur,70s) linear infinite}
.marquee:hover .mtrack,.marquee:focus-within .mtrack{animation-play-state:paused}
@keyframes slide{to{transform:translateX(calc(-50% - var(--g) / 2))}}
.mtrack figure{width:clamp(300px,34vw,560px);flex:none}
.mtrack figure{position:relative}
.mtrack .fig{aspect-ratio:720/406;background:#3A3934}
.flink{position:absolute;inset:0;z-index:2;border-radius:var(--r)}
.flink:hover+.fig video{filter:brightness(1.08)}
.flink:focus-visible{outline-offset:-4px}
.pfilm{margin-top:var(--s6)}
.pfilm .fig{aspect-ratio:720/406}
.pfilm video.full{object-fit:contain;background:#000}
.vlink{display:inline-flex;margin-top:var(--s3)}
.vcard{position:relative;display:block;margin-top:var(--s6)}
.vplay{display:block;width:100%;position:relative;cursor:pointer}
.vframe{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vcard .fig{aspect-ratio:16/9}
.vcard .play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:color-mix(in srgb,var(--ground) 86%,transparent);color:var(--ink);display:grid;place-items:center;transition:transform .4s var(--e)}
.vcard .play svg{width:22px;height:22px;margin-left:3px}
.vcard:hover .play{transform:scale(1.06)}

.quote{padding-block:var(--s7) 0}
.quote blockquote{font-size:var(--fs-h2);line-height:var(--lh-h);letter-spacing:var(--tr-d);font-weight:300;max-width:22ch;text-indent:-.38em}
.quote cite{display:block;margin-top:var(--s3);font-style:normal;font-size:var(--fs-s);letter-spacing:var(--tr-s);color:var(--ink-2)}

/* ---------- inner pages ---------- */
.ph{padding-block:var(--s6) var(--s5)}
.ph h1{font-size:var(--fs-d);line-height:var(--lh-d);letter-spacing:var(--tr-d)}
.ph .lede{margin-top:var(--s3);font-size:var(--fs-l);line-height:1.45;color:var(--ink-2);max-width:40ch}

.bar2{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-block:var(--s2) var(--s5);font-size:var(--fs-s);letter-spacing:var(--tr-s);color:var(--ink-2)}
.more{display:block;margin:var(--s6) auto 0;padding:14px 30px;border-radius:999px;border:1px solid var(--line);font-size:var(--fs-s);letter-spacing:var(--tr-s);transition:background .25s}
.more:hover{background:var(--tile)}

/* project */
.pj-head{padding-block:var(--s6) var(--s5)}
.crumb{font-size:var(--fs-s);letter-spacing:var(--tr-s);color:var(--ink-3)}.crumb a:hover{color:var(--ink)}
.pj-head h1{font-size:var(--fs-d);line-height:var(--lh-d);letter-spacing:var(--tr-d);margin-top:var(--s2)}
.pj-head .lede{margin-top:var(--s3);font-size:var(--fs-b);line-height:var(--lh-b);max-width:40ch;color:var(--ink-2)}
.pj-head .lead{margin-top:var(--s4);font-size:var(--t-h);line-height:var(--lh-h);letter-spacing:var(--tr-h);font-weight:300;max-width:30ch;color:var(--ink)}
.pj-txt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--g)}
.pj-txt p{font-size:var(--t-b);line-height:var(--lh-b);max-width:60ch}
.pj-hl{font-size:var(--t-h);line-height:var(--lh-h);letter-spacing:var(--tr-h);font-weight:300;max-width:24ch;margin-inline:auto;text-align:center;padding-block:var(--s4)}
@media (max-width:760px){.pj-txt{grid-template-columns:1fr}.pj-txt>div{display:none}.pj-hl{text-align:left;margin-inline:0}}
.pj-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--g);padding-block:var(--s6)}
.pj-body dl{display:grid;gap:var(--s3);align-content:start;font-size:var(--fs-s);letter-spacing:var(--tr-s)}
.pj-body dt{color:var(--ink-3);margin-bottom:4px}
.pj-body dd a:hover{text-decoration:underline;text-underline-offset:.28em}
.pj-body .txt{display:grid;gap:1em;font-size:var(--fs-b);line-height:var(--lh-b);max-width:60ch;color:var(--ink)}
@media (max-width:760px){.pj-body{grid-template-columns:1fr;gap:var(--s5)}}
.next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--g);align-items:end;border-top:1px solid var(--line);padding-block:var(--s3) var(--s7);margin-top:var(--s6)}
.next small{display:block;font-size:var(--fs-s);letter-spacing:var(--tr-s);color:var(--ink-3);margin-bottom:var(--s1)}
.next h2{font-size:var(--fs-h1);line-height:1.05;letter-spacing:var(--tr-d)}
.next a:hover h2,.next:hover h2{text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px}
@media (max-width:760px){.next{grid-template-columns:1fr}}

/* services */
.svc{border-top:1px solid var(--line)}
.svc a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding-block:var(--s4);border-bottom:1px solid var(--line)}
.svc h2{font-size:var(--fs-h1);line-height:1.05;letter-spacing:var(--tr-d);transition:transform .5s var(--e)}
.svc a:hover h2{transform:translateX(12px)}
.svc .n{font-size:var(--fs-s);letter-spacing:var(--tr-s);color:var(--ink-2);white-space:nowrap}

/* about */
.ab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5) clamp(24px,5vw,96px);padding-bottom:var(--s7)}
.ab .lead{font-size:var(--fs-h2);line-height:1.2;letter-spacing:var(--tr-h);font-weight:300}
.ab .txt{display:grid;gap:1em;color:var(--ink-2);font-size:var(--fs-b);line-height:var(--lh-b);max-width:62ch}
@media (max-width:760px){.ab{grid-template-columns:1fr}}
.tgrid5{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s5) var(--g)}
.tgrid5 .cap span{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible;white-space:normal;text-overflow:clip}
.ph4{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--tile)}
.ph4 img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:grayscale(1);transition:filter .7s}
.team a:hover .ph4 img{filter:none}
@media (max-width:480px){.tgrid5{grid-template-columns:1fr 1fr}}
.team .p img{filter:grayscale(1);transition:filter .7s,opacity .8s}
.team a:hover .p img{filter:none}
.team .cap span{-webkit-line-clamp:1}

/* partner profile, Pentagram style */
.pt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5) clamp(24px,5vw,96px);padding-block:var(--s6) var(--s7);align-items:start}
.pt .por{position:sticky;top:calc(var(--hh) + 24px)}
.pt h1{font-size:var(--fs-h1);line-height:var(--lh-d);letter-spacing:var(--tr-d)}
.pt .role{margin-top:var(--s2);font-size:var(--fs-l);color:var(--ink-2)}
.pt .bio{margin-top:var(--s5);display:grid;gap:1em;font-size:var(--fs-b);line-height:var(--lh-b);color:var(--ink);max-width:60ch}
.pt .bio p:first-child{font-size:var(--fs-l);line-height:1.5}
.pt .acts{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.pt .soon{margin-top:var(--s5);color:var(--ink-2);max-width:48ch}
@media (max-width:760px){.pt{grid-template-columns:1fr}.pt .por{position:static;max-width:420px}}
.others{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--g)}
.others a{display:block;padding-top:var(--s2);border-top:1px solid var(--line)}
.others b{display:block;font-weight:400}
.others span{display:block;font-size:var(--fs-s);letter-spacing:var(--tr-s);color:var(--ink-2)}
.others a:hover b{text-decoration:underline;text-underline-offset:.28em;text-decoration-thickness:1px}

/* news */
.cats{display:flex;flex-wrap:wrap;gap:8px}
.cats button{padding:8px 16px;border-radius:999px;border:1px solid var(--line);font-size:var(--fs-s);letter-spacing:var(--tr-s);color:var(--ink-2);transition:all .2s}
.cats button:hover{color:var(--ink);border-color:var(--ink-3)}
.cats button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.cats button:disabled{opacity:.4;cursor:default}
.dates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);border-top:1px solid var(--line);padding-block:var(--s3) var(--s6);margin-top:var(--s4)}
.dates a{display:grid;gap:var(--s1);font-size:var(--fs-s);letter-spacing:var(--tr-s);align-content:start}
.pj-head h1.art{font-size:var(--fs-h1);line-height:1.08;max-width:20ch}
.dates b{font-size:var(--fs-h3);letter-spacing:var(--tr-h);font-weight:300;line-height:1.1}
.dates span:last-child{font-size:var(--fs-b);letter-spacing:0;line-height:1.45}
.dates a:hover span:last-child{text-decoration:underline;text-underline-offset:.28em}
@media (max-width:760px){.dates{grid-template-columns:1fr 1fr;row-gap:var(--s4)}}

/* contact */
.offs{display:grid;grid-template-columns:1fr 1fr;gap:var(--g);padding-bottom:var(--s7)}
.offs h2{font-size:var(--fs-h1);line-height:1;letter-spacing:var(--tr-d)}
.offs article{display:flex;flex-direction:column}
.offs .ofig{margin-top:auto;padding-top:var(--s5)}
.oslides{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--tile)}
.oslides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s var(--e)}
.oslides img.on{opacity:1}
.offs .t{font-size:var(--fs-h1);color:var(--ink-3);font-weight:300;line-height:1.1;letter-spacing:var(--tr-d);font-variant-numeric:tabular-nums}
.offs .d{display:grid;grid-template-columns:1fr 1fr;gap:var(--g);margin-top:var(--s3);font-size:var(--fs-b);line-height:1.6}
.offs address{font-style:normal}
.cinfo{display:grid;grid-template-columns:1fr 1fr;gap:var(--g);margin-top:var(--s3);font-size:var(--t-b);line-height:var(--lh-b);color:var(--ink-2)}
.cinfo a{color:var(--ink)}.cinfo a:hover{text-decoration:underline;text-underline-offset:.25em}
@media (max-width:480px){.cinfo{grid-template-columns:1fr}}
.offs .note{margin-top:var(--s2);color:var(--ink-2);font-size:var(--fs-s);letter-spacing:var(--tr-s);max-width:42ch}
.cp{font-size:var(--fs-xs);letter-spacing:var(--tr-xs);color:var(--ink-3);margin-left:8px}.cp:hover{color:var(--ink)}
@media (max-width:760px){.offs,.offs .d{grid-template-columns:1fr}}

/* footer: Pentagram's structure, tighter */
.fnews2 #fnews{display:grid}
.fnews2 #fnews a{display:grid;gap:6px;padding-block:var(--s3);border-bottom:1px solid #2C2B28}
.fnews2 #fnews a:first-child{padding-top:0}
.fnews2 .meta{display:flex;gap:var(--s2);align-items:center;font-size:var(--t-s);color:#8F8C86}
.fnews2 .chip{background:#1F1E1C;color:#AAA7A0;border-radius:4px;padding:3px 8px}
.fnews2 #fnews b{font-weight:400;color:#EFEEEA}
.fnews2 #fnews .x{color:#8F8C86}
.fnews2 .u{display:inline-block;margin-top:var(--s3)}
/* footer: the live noircase footer. black, two rows, the wordmark, one line of links */
footer{background:#000;color:#8F8C86;font-size:var(--fs-b);line-height:var(--lh-s);margin-top:var(--s7);padding-block:var(--s3) var(--s3)}
footer a{color:#EFEEEA;transition:color .2s}footer a:hover{color:#8F8C86}
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4) var(--g);border-top:1px solid #2C2B28;padding-top:var(--s3);margin-bottom:var(--s5);color:#EFEEEA}
.frow h3{font-size:var(--fs-b);font-weight:400;letter-spacing:0}
.frow p{max-width:46ch}
.fcon{display:grid;gap:4px}.fcon div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--g)}
.flogo{margin-top:var(--s6)}.flogo img{display:block;width:100%;height:auto}
.fbase{margin-top:var(--s3);display:flex;justify-content:space-between;align-items:center;gap:var(--s2) var(--s4);flex-wrap:wrap;font-size:var(--fs-s);letter-spacing:var(--tr-s)}
.fbase ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3)}
.fbase>div{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.totop{width:34px;height:34px;border-radius:50%;border:1px solid #2C2B28;display:grid;place-items:center;color:#EFEEEA;transition:border-color .3s,transform .4s var(--e)}
.totop:hover{border-color:#8F8C86;transform:translateY(-3px)}.totop svg{width:12px;height:12px}
@media (max-width:760px){.frow{grid-template-columns:1fr}.fbase{flex-direction:column;align-items:flex-start}}

/* hero: one large, quiet sentence, then the work in its own 16:9 frame */
.hero{padding-block:var(--s6) var(--s5)}
.hero .sent{background:none;border:0;padding:0;border-radius:0;--rh:1.3em;font-size:var(--fs-d);line-height:var(--lh-d);letter-spacing:var(--tr-d);font-weight:300;gap:.06em .24em}
.hero .slot .win{margin-block:calc((var(--lh-d) * 1em - var(--rh)) / 2)}
.hero .slot .reel span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em;text-decoration-color:var(--ink-3)}
.hero .slot{padding:0;border-radius:0;gap:.12em;color:var(--ink)}
.hero .slot:hover,.hero .slot[aria-expanded="true"]{background:none}
.hero .slot:hover .reel span,.hero .slot[aria-expanded="true"] .reel span{text-decoration-color:var(--ink)}
.hero .slot .reel span{color:inherit}
.hero .slot svg{width:.26em;height:.26em;color:var(--ink-3)}
.hero .menu{left:0;font-size:var(--fs-s);letter-spacing:var(--tr-s)}
.stage{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--tile)}
.stage .s{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--e)}
.stage .s.on{opacity:1;z-index:1}
.stage .s img{width:100%;height:100%;object-fit:cover;display:block}
.under{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center;margin-top:var(--s2);font-size:var(--fs-s);letter-spacing:var(--tr-s)}
.under a{display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap}
.under a b{font-weight:400;color:var(--ink)}
.under a span{color:var(--ink-3)}
.under a:hover b{text-decoration:underline;text-underline-offset:.28em;text-decoration-thickness:1px}
.ctl{display:flex;align-items:center;gap:var(--s2)}
.ctl .num{font-variant-numeric:tabular-nums;color:var(--ink-3);min-width:4.2em;text-align:right}
.stage~.under .bars button{background:var(--line)}.stage~.under .bars button i{background:var(--ink)}
.stage~.under .rb{border-color:var(--line)}.stage~.under .rb:hover{background:var(--tile)}
@media (max-width:760px){.under{grid-template-columns:1fr}.ctl{justify-content:space-between}.ctl .bars{margin-right:auto}.ctl .num{display:none}}

/* hero: rounded frame, the work full width in its 16:9 shape, the sentence on top */
.ph0{position:relative;padding-top:var(--s2)}
.pframe{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--tile)}
.pframe .s{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--e)}
.pframe .s.on{opacity:1;z-index:1}
.pframe img{width:100%;height:100%;object-fit:cover;display:block}
.pframe::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(0deg,rgba(24,23,21,.62),rgba(24,23,21,0));z-index:2;pointer-events:none}
.pover{position:absolute;left:var(--m);right:var(--m);bottom:0;z-index:5;padding:0 clamp(18px,2.6vw,40px) clamp(18px,2.4vw,36px);color:#F4F3EF;pointer-events:none}
.pover a,.pover button{pointer-events:auto}
.big-sent .sent{background:none;border:0;padding:0;font-size:var(--fs-h1);line-height:1.12;letter-spacing:var(--tr-d);font-weight:300;color:#F4F3EF;gap:.22em;display:inline-flex}
.big-sent .slot{padding:0 .1em;border-radius:12px;border-bottom:1px solid rgba(244,243,239,.55)}
.big-sent .slot:hover,.big-sent .slot[aria-expanded="true"]{background:rgba(244,243,239,.12)}
.big-sent .slot .reel span{color:#F4F3EF}
.big-sent .slot svg{color:rgba(244,243,239,.7);width:14px;height:14px}
.big-sent .menu{color:var(--ink);font-size:var(--fs-s);letter-spacing:var(--tr-s);top:auto;bottom:calc(100% + 10px)}
.pmeta{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);margin-top:var(--s2);font-size:var(--fs-s);letter-spacing:var(--tr-s)}
.pmeta b{font-weight:400;color:#F4F3EF}.pmeta .num{font-variant-numeric:tabular-nums;opacity:.75}
.pbar{height:1px;background:rgba(244,243,239,.3);margin-top:12px;overflow:hidden}.pbar i{display:block;height:100%;width:0;background:#F4F3EF}
@media (max-width:760px){.pover{position:static;color:var(--ink);padding:var(--s2) 0 0}.pframe::after{display:none}
  .big-sent .sent{color:var(--ink);font-size:var(--fs-h2)}.big-sent .slot .reel span{color:var(--ink)}.big-sent .slot{border-color:var(--line)}.big-sent .slot svg{color:var(--ink-3)}
  .big-sent .menu{top:calc(100% + 8px);bottom:auto}.pmeta b{color:var(--ink)}.pbar{background:var(--line)}.pbar i{background:var(--ink)}}


/* ---------- HOME, Pentagram's order ---------- */
.phero{position:relative}
.phero .stage{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100svh - var(--hh));border-radius:0;overflow:hidden;background:var(--tile)}
.phero .s{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--e)}
.phero .s.on{opacity:1;z-index:1}
.phero .s img{width:100%;height:100%;object-fit:cover;display:block}
.phero .s::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(0deg,rgba(18,17,16,.55),rgba(18,17,16,0));pointer-events:none}
.pcap{position:absolute;left:var(--m);bottom:var(--m);z-index:2;max-width:min(40ch,32%);color:#F4F3EF;font-size:var(--t-b);line-height:var(--lh-s)}
.pcap b{display:block;font-weight:400;color:#F4F3EF}
.pcap span{display:block;opacity:.85}
.pcap i{display:inline-block;margin-top:var(--s2);font-style:normal;font-size:var(--t-s);letter-spacing:var(--tr-s);padding:4px 10px;border:1px solid rgba(244,243,239,.45);border-radius:999px;color:#F4F3EF}
.dots{position:absolute;right:var(--m);bottom:var(--m);z-index:3;display:flex;gap:8px}
.dots button{width:12px;height:12px;border-radius:50%;background:rgba(244,243,239,.45);transition:background .3s}
.dots button[aria-current="true"]{background:#F4F3EF}
.pfilter{position:absolute;left:0;right:0;bottom:var(--m);z-index:4;display:flex;justify-content:center;pointer-events:none}
.pfilter .sent{pointer-events:auto;font-size:var(--t-b);box-shadow:0 20px 40px -24px rgba(0,0,0,.45)}
.pfilter .menu{top:auto;bottom:calc(100% + 10px)}
@media (max-width:760px){
  .pcap{max-width:none;right:var(--m)}.pcap span{display:none}
  .dots{display:none}
  .pfilter{position:static;padding-top:var(--s3);justify-content:flex-start}
  .pfilter .menu{top:calc(100% + 10px);bottom:auto}
  .pfilter .sent{border-radius:20px;box-shadow:none}
}
.dyn{padding-top:var(--s7)}
.see{text-align:center;font-size:var(--t-b);color:var(--ink-2);margin-bottom:var(--s5)}
.see a span{display:block;margin-top:4px}
.dark{background:var(--night);color:var(--night-ink);margin-top:var(--s7)}
.thematic{padding-block:var(--s6) var(--s6)}
.thead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3) var(--g);margin-bottom:var(--s5)}
.thead h2{font-size:var(--t-h);line-height:var(--lh-h);font-weight:400;letter-spacing:var(--tr-h)}
.dark .thead h2{color:var(--night-ink)}
.thead p{font-size:var(--t-b);line-height:var(--lh-b);max-width:46ch;color:var(--night-2)}
.thead.light p{color:var(--ink-2)}
@media (max-width:760px){.thead{grid-template-columns:1fr}}
.tstrip{display:flex;gap:var(--g);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s2);scrollbar-width:thin;--th:clamp(260px,30vw,440px)}
.tstrip a{flex:none;width:max(calc(var(--th) * var(--ar)),220px);scroll-snap-align:start}
.tstrip .im{display:block;height:var(--th);border-radius:var(--r);overflow:hidden;background:#3A3934}
.tstrip img{width:100%;height:100%;object-fit:cover;transition:filter .5s}
.tstrip a:hover img{filter:brightness(1.06)}
.tstrip b{display:block;margin-top:var(--s2);font-weight:400;color:var(--night-ink);font-size:var(--t-b)}
.tstrip .d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--night-2);font-size:var(--t-b);line-height:var(--lh-s);max-width:34ch}
.quote2{margin-top:0;padding-block:var(--s6)}
.dyn+.quote2,.sec+.quote2{margin-top:var(--s7)}
.quote2 .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--g)}
.quote2 blockquote{grid-column:2;margin:0;font-size:var(--t-h);line-height:var(--lh-h);letter-spacing:var(--tr-h);font-weight:300;text-indent:-.4em;color:var(--night-ink)}
.quote2 cite{display:block;margin-top:var(--s2);font-style:normal;font-size:var(--t-s);letter-spacing:var(--tr-s);color:var(--night-2);text-indent:0}
@media (max-width:760px){.quote2 .wrap{grid-template-columns:1fr}.quote2 blockquote{grid-column:1}}
.dark+.dark{margin-top:0}
.films{padding-block:var(--s6)}
.films figcaption{margin-top:var(--s1);font-size:var(--t-s);letter-spacing:var(--tr-s);color:var(--night-2)}


/* ---------- HOME, noircase ---------- */
.nhero{padding-top:var(--s2)}
.nhero .stage{position:relative;aspect-ratio:16/9;max-height:calc(100svh - var(--hh) - 96px);width:100%;border-radius:var(--r-lg);overflow:hidden;background:var(--tile)}
.nhero .s{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--e)}
.nhero .s.on{opacity:1;z-index:1}
.nhero .s img{width:100%;height:100%;object-fit:cover;display:block}
.nhero .pfilter{position:absolute;left:0;right:0;bottom:var(--s4);z-index:4;display:flex;justify-content:center;pointer-events:none}
.nhero .pfilter .sent{pointer-events:auto;font-size:var(--t-b);box-shadow:0 20px 40px -24px rgba(0,0,0,.45)}
.nhero .pfilter .menu{top:auto;bottom:calc(100% + 10px)}
.nhero .under{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-top:var(--s2);font-size:var(--t-b)}
.nhero .under a{display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap}
.nhero .under b{font-weight:400;color:var(--ink)}.nhero .under span{color:var(--ink-3)}
.nhero .dots{position:static;display:flex;gap:8px;flex:none}
.nhero .dots button{width:10px;height:10px;border-radius:50%;background:var(--line);transition:background .3s}
.nhero .dots button[aria-current="true"]{background:var(--ink)}
.nhero .frame{position:relative}
@media (max-width:760px){
  .nhero .pfilter{position:static;padding-top:var(--s3);justify-content:flex-start}
  .nhero .stage{border-radius:var(--r)}
  .nhero .pfilter .sent{border-radius:20px;box-shadow:none}
  .nhero .pfilter .menu{top:calc(100% + 10px);bottom:auto}
}
.stmt .big{font-size:var(--t-d);line-height:var(--lh-d);letter-spacing:var(--tr-d);font-weight:300;max-width:22ch;margin-bottom:var(--s6)}
.dlist{border-top:1px solid var(--line)}
.dlist a{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding-block:var(--s2);border-bottom:1px solid var(--line);font-size:var(--t-h);line-height:var(--lh-h);letter-spacing:var(--tr-h);font-weight:300;transition:padding .4s var(--e)}
.dlist a:hover{padding-left:var(--s2)}
.dlist small{font-size:var(--t-s);letter-spacing:var(--tr-s);color:var(--ink-3)}
.clients .ctrack span{font-size:var(--t-h)}


/* Pentagram's latest-projects block: two staggered, then rows of three */
.stagger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);align-items:start;margin-bottom:var(--s6)}
.stagger .ptile:nth-child(2){grid-column:2 / span 1;margin-top:var(--s7)}
.stagger .ptile:nth-child(1){grid-column:1 / span 1}
@media (max-width:640px){.stagger{grid-template-columns:1fr}.stagger .ptile:nth-child(2){grid-column:auto;margin-top:0}}
/* Instagram, its own section, pictures only */
.ig2{padding-top:var(--s7)}
.iggrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--g)}
.iggrid a{display:block;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--tile)}
.iggrid img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}
.iggrid a:hover img{transform:scale(1.03)}
@media (max-width:900px){.iggrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.iggrid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* case study, as noircase.com: title, line, tags, a panel for the story, the work in order */
.cs-head{padding-block:var(--s6) var(--s5)}
.cs-head h1{font-size:var(--t-d);line-height:var(--lh-d);letter-spacing:var(--tr-d);max-width:18ch}
.cs-row{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);margin-top:var(--s5)}
.cs-line{font-size:var(--t-b);line-height:var(--lh-b);max-width:48ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s2)}
.tags a{font-size:var(--t-s);letter-spacing:var(--tr-s);color:var(--ink-2);background:var(--tile);border-radius:4px;padding:4px 8px;transition:background .2s}
.tags a:hover{background:var(--line)}
.cs-btn{flex:none;display:inline-flex;align-items:center;gap:10px;font-size:var(--t-b);background:color-mix(in srgb,var(--tile) 85%,transparent);backdrop-filter:blur(8px);border-radius:6px;padding:8px 10px 8px 14px}
.cs-btn span{display:inline-block;font-size:1.2em;line-height:1;transition:transform .4s var(--e)}
.cs.is-open .cs-btn span{transform:rotate(45deg)}
.cs-body{display:flex;gap:var(--g);align-items:flex-start}
.cs-blocks{flex:1 1 auto;min-width:0;display:grid;gap:var(--s3);transition:flex-basis .5s var(--e)}
.grow{display:flex;gap:var(--s3);align-items:flex-start}.gcell{min-width:0}
.blk video.full{object-fit:contain;background:#000}
.cs-panel{flex:0 0 min(38%,520px);position:sticky;top:calc(var(--hh) + var(--s3));max-height:calc(100vh - var(--hh) - var(--s5));overflow:auto}
.cs-in{display:grid;gap:var(--s4)}
.cs-x{justify-self:end;font-size:var(--t-s);color:var(--ink-3)}
.cs-hl{font-size:var(--t-h);line-height:var(--lh-h);letter-spacing:var(--tr-h);font-weight:300}
.cs-txt{display:grid;gap:1em;font-size:var(--t-b);line-height:var(--lh-b)}
.cs-meta{display:flex;gap:var(--s5);font-size:var(--t-b)}.cs-meta dt{color:var(--ink-3)}.cs-meta dd{margin:0}
@media (max-width:860px){
  .cs-row{flex-direction:column;align-items:flex-start}
  .cs-btn{position:fixed;left:50%;bottom:var(--s4);transform:translateX(-50%);z-index:40;box-shadow:0 10px 30px -12px rgba(0,0,0,.35)}
  .cs-panel{position:fixed;inset:0;z-index:45;max-height:none;background:var(--ground);padding:calc(var(--hh) + var(--s3)) var(--m) var(--s7)}
  .cs-x{font-size:var(--t-b);color:var(--ink)}
}


/* testimonials: name, role, words; nothing else */
.testi4 .ttl{font-size:var(--t-d);line-height:var(--lh-d);letter-spacing:var(--tr-d);margin-bottom:var(--s5)}
.tsh{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--g);margin-bottom:var(--s5)}.tsh .ttl{margin-bottom:0}
.tnav{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-s);color:var(--ink-2);font-variant-numeric:tabular-nums}
.tnav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-size:var(--t-b);cursor:pointer;display:grid;place-items:center}
.tnav button:hover{border-color:var(--ink)}
#tcount{white-space:nowrap}@media (max-width:600px){#tcount{display:none}}
.tgrid4{--k:4;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--k) - 1)*var(--g))/var(--k));gap:var(--g);border-top:1px solid var(--line);padding-top:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.tgrid4::-webkit-scrollbar{display:none}.tgrid4>figure{scroll-snap-align:start}
.tgrid4 figure{margin:0;display:grid;gap:var(--s3);align-content:start}
.tgrid4 figcaption b{display:block;font-weight:300;font-size:var(--t-h);line-height:var(--lh-h);letter-spacing:var(--tr-h);color:var(--ink)}
.tgrid4 figcaption span{display:block;margin-top:var(--s1);font-size:var(--t-b);color:var(--ink)}
.tgrid4 blockquote{margin:0;font-size:var(--t-b);line-height:var(--lh-b);color:var(--ink-2)}
@media (max-width:1000px){.tgrid4{--k:2}}
@media (max-width:600px){.tgrid4{--k:1;grid-auto-columns:86%}}
/* process: one dark band, five steps */
.proc{padding-block:var(--s6)}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--s5) var(--g);align-items:start}
.pgrid>h2{position:sticky;top:calc(var(--hh,64px) + var(--s3))}
.pgrid>h2{font-size:var(--t-d);line-height:var(--lh-d);letter-spacing:var(--tr-d);color:var(--night-ink)}
.pgrid ol{list-style:none;margin:0;padding:0;display:grid}
.pgrid li{display:grid;grid-template-columns:3em minmax(0,1fr) minmax(0,1.3fr);gap:var(--g);align-items:baseline;padding-block:var(--s3);border-top:1px solid var(--night-line)}
.pgrid li:first-child{border-top:0}
.pgrid .n{font-size:var(--t-s);color:var(--night-2);font-variant-numeric:tabular-nums}
.pgrid h3{font-size:var(--t-h);line-height:var(--lh-h);font-weight:300;color:var(--night-ink)}
.pgrid p{font-size:var(--t-b);line-height:var(--lh-b);color:var(--night-2)}
@media (max-width:900px){.pgrid{grid-template-columns:1fr}.pgrid>h2{position:static}.pgrid li{grid-template-columns:2.4em minmax(0,1fr)}.pgrid li p{grid-column:2}}

/* clients: the names, large, moving slowly */
.clients .sh{margin-bottom:var(--s3)}
.ctrack{--mdur:60s;gap:0;align-items:baseline}
.ctrack span{font-size:var(--fs-h1);font-weight:300;letter-spacing:var(--tr-d);white-space:nowrap;padding-inline:clamp(18px,2.2vw,36px);line-height:1.2;color:var(--ink)}
.ctrack span::after{content:"";display:inline-block;width:.18em;height:.18em;border-radius:50%;background:var(--blush);margin-left:clamp(18px,2.2vw,36px);vertical-align:middle}

/* testimonials */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--g)}
.tgrid figure{margin:0;background:var(--raised);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s3)}
.tgrid blockquote{margin:0;font-size:var(--fs-l);line-height:1.45;font-weight:300;text-indent:-.38em}
.tgrid figcaption{font-size:var(--fs-s);letter-spacing:var(--tr-s)}.tgrid figcaption b{display:block;font-weight:400}.tgrid figcaption span{color:var(--ink-2)}

/* opening: squares that round into a circle, then the quetzal */
.open{position:absolute;inset:0;z-index:6;background:var(--ground);clip-path:circle(150% at 50% 50%);transition:clip-path .9s cubic-bezier(.65,0,.35,1),opacity .9s}
.open.gone{clip-path:circle(0% at 50% 50%);opacity:0;pointer-events:none}
.hcap{transition:opacity .6s var(--e)}
.hwrap:has(.open:not(.gone)) .hcap{opacity:0;pointer-events:none}
@media (max-width:640px){.open .oline{display:none}}
.open canvas{position:absolute;inset:0;width:100%;height:100%}
.obird{position:absolute;transform:translate(-50%,-50%);height:auto;fill:transparent;stroke:var(--ink);stroke-width:1.4;transition:fill 1.2s var(--e)}
.obird.fill{fill:var(--ink);stroke-opacity:0;transition:fill 1.2s var(--e),stroke-opacity 1.2s var(--e)}
.oline{position:absolute;left:0;right:0;bottom:var(--s3);display:flex;justify-content:space-between;align-items:end;gap:var(--s2);font-size:var(--fs-s);letter-spacing:var(--tr-s)}
@media (max-width:640px){.oline{flex-direction:column;align-items:flex-start;gap:4px}}
.finder{margin:calc(var(--s2) * -1) 0 var(--s5)}
.films .fhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--g);align-items:end;margin-bottom:var(--s5);color:var(--night-ink)}
.films .fhead h2{font-size:var(--fs-h1);line-height:var(--lh-d);letter-spacing:var(--tr-d)}
.films .fhead p{color:var(--night-2);font-size:var(--fs-l);line-height:1.5;max-width:44ch}
@media (max-width:760px){.films .fhead{grid-template-columns:1fr}}

/* instagram: a second slow strip, every post in its own shape */
.ig .sh{margin-bottom:var(--s4)}
.igt{--mdur:90s;--igh:clamp(220px,24vw,340px);align-items:flex-start}
.igt a{flex:none;display:block;width:max(calc(var(--igh) * var(--ar)),240px)}
.igt .im{display:block;height:var(--igh);border-radius:var(--r);overflow:hidden;background:var(--tile)}
.igt img{width:100%;height:100%;object-fit:cover;transition:filter .5s}
.igt a:hover img{filter:brightness(1.06)}
.igt .igc{display:block;margin-top:var(--s2);max-width:34ch;font-size:var(--fs-s);line-height:var(--lh-s);letter-spacing:var(--tr-s);color:var(--ink-2)}
.igt .igc b{display:block;color:var(--ink);font-weight:400}
.dark .igt .igc{color:var(--night-2)}.dark .igt .igc b{color:var(--night-ink)}.dark .igt .im{background:#3A3934}
.dark .thead a.u{color:var(--night-ink)}

/* admin: its own page, outside the site's menu */
body.adminmode{padding-top:0}
body.adminmode header,body.adminmode footer{display:none}
.abarTop{display:flex;align-items:center;gap:var(--s3);height:var(--hh);border-bottom:1px solid var(--line);font-size:var(--t-s)}
.abarTop span{color:var(--ink-3)}.abarTop .lnk{margin-left:auto}
/* admin */
.adm{padding-block:var(--s6) var(--s7)}
.adm-top{display:flex;justify-content:space-between;align-items:end;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.adm-top h1{font-size:var(--fs-h1);letter-spacing:var(--tr-d)}
.adm-tabs{display:flex;gap:8px}
.adm-tabs button{padding:8px 18px;border-radius:999px;border:1px solid var(--line);font-size:var(--fs-s)}
.adm-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.acols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5)}
.acols.pj{grid-template-columns:240px minmax(0,1fr)}
@media (max-width:860px){.acols,.acols.pj{grid-template-columns:1fr}}
.apanel{display:grid;gap:var(--s3);align-content:start;background:var(--raised);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.apanel h2{font-size:var(--fs-h3)}
.af{display:grid;gap:6px;font-size:var(--fs-s);border:0;padding:0;margin:0;min-width:0}
.af>span,.af legend{color:var(--ink-2);padding:0}
.af input,.af textarea,.af select{font:inherit;font-size:var(--fs-b);text-transform:none;color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
.af textarea{resize:vertical;line-height:1.55}
.af input:focus,.af textarea:focus,.af select:focus{outline:none;border-color:var(--ink)}
.af small{color:var(--ink-3);font-size:var(--fs-xs)}
.chk{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:6px}
.alist{list-style:none;margin:0;padding:0;display:grid;gap:2px;align-content:start}
.alist button{width:100%;text-align:left;padding:9px 12px;border-radius:10px;font-size:var(--fs-s)}
.alist button:hover{background:var(--tile)}
.alist button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.alist small{opacity:.6}
.covers{display:flex;flex-wrap:wrap;gap:8px}
.covers button{height:84px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0}
.covers button[aria-pressed="true"]{border-color:var(--ink)}
.covers img{height:100%;width:auto;display:block}
.up{display:inline-flex;gap:8px;align-items:center;font-size:var(--fs-s);color:var(--ink-2);cursor:pointer}
.tph{display:flex;gap:var(--s3);align-items:end}
.tph img{width:120px;border-radius:12px}
.tog{display:flex;gap:10px;align-items:center;font-size:var(--fs-s)}
.hs{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.hs li{display:grid;grid-template-columns:72px 1fr auto auto auto;gap:10px;align-items:center;font-size:var(--fs-s)}
.hs img{width:72px;aspect-ratio:16/9;border-radius:6px;display:block}
.hs button{padding:4px 10px;border-radius:8px;border:1px solid var(--line);font-size:var(--fs-xs)}
.abar{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.abtn{background:var(--ink);color:var(--ground);padding:12px 24px;border-radius:999px;font-size:var(--fs-s)}
.alink{font-size:var(--fs-s);color:var(--ink-2);text-decoration:underline;text-underline-offset:.28em}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:var(--ground);padding:12px 20px;border-radius:999px;font-size:var(--fs-s);transition:all .35s var(--e);z-index:80;pointer-events:none}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* search */
#search{position:fixed;inset:0;z-index:70;background:color-mix(in srgb,var(--ground) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:calc(env(safe-area-inset-top,0px) + 12px) var(--m) 24px}
#search .top{display:flex;justify-content:space-between;align-items:center;height:36px}
#search input{width:100%;margin-top:clamp(40px,9vh,110px);font:300 var(--fs-h1)/1.1 var(--f);letter-spacing:var(--tr-d);background:transparent;border:0;border-bottom:1px solid var(--line);padding:0 0 16px;color:var(--ink)}
#search input:focus{outline:none;border-color:var(--ink)}
#search ul{list-style:none;padding:0;margin:18px 0 0;max-height:60vh;overflow:auto}
#search li a{display:flex;justify-content:space-between;gap:16px;padding-block:14px;border-bottom:1px solid var(--line);font-size:var(--fs-l)}
#search li small{font-size:var(--fs-s);letter-spacing:var(--tr-s);color:var(--ink-3)}
#search li a:hover,#search li a.hl{color:var(--ink-2)}

#app{animation:pin .6s var(--e)}
@keyframes pin{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .rv{opacity:1;transform:none}.intro h1 .w>span{transform:none}.chapter{height:auto}.chapter .pin{position:static;height:auto;padding-block:96px}.chapter p.big .w{opacity:1}
  .mtrack{animation:none}.marquee{overflow-x:auto}
}

/* --- Laravel multi-page adapters --- */
a.more{display:inline-flex;align-items:center;justify-content:center;margin:var(--s5) auto 0;padding:12px 22px;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-s);letter-spacing:var(--tr-s)}
a.more:hover{background:var(--tile)}
#search form{margin:0}
.workDetail__featured,.workDetail__video{margin-block:var(--s4)}
.workDetail__videoIframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r);background:var(--tile)}
.workMedia__img{width:100%;height:auto;display:block;border-radius:var(--r)}
.m-richText{display:grid;gap:1em;font-size:var(--t-b);line-height:var(--lh-b);max-width:62ch}
.m-richText p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}