:root{
  --ink:#17191E; --ink2:#4B515C; --line:#E3E5E8; --band:#F4F5F7; --mark:#FFE066;
  --love-deep:#0F2A33; --love-tint:#E4F0F2; --love-acc:#C98A16;
  --recon-deep:#1D3FA6; --recon-tint:#E7ECFB; --recon-acc:#1D3FA6;
  --cero-deep:#0F69B4; --cero-tint:#E8F1F9; --cero-acc:#0F69B4;
  --gestin-deep:#A34A0A; --gestin-tint:#FDEFE2; --gestin-acc:#E8701A;
  --cmb-deep:#2F4858; --cmb-tint:#E9EEF1; --cmb-acc:#2F4858;
  --love-dark:#0B1D24; --recon-dark:#111C3D; --cero-dark:#172231; --gestin-dark:#2B1607; --cmb-dark:#16222A;
  --love-glow:#7FD2E3; --recon-glow:#A9BCF5; --cero-glow:#8CC3EE; --gestin-glow:#F7B47C; --cmb-glow:#A9C2D1;
  --deep:var(--ink); --tint:var(--band); --acc:var(--ink);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:'Schibsted Grotesk',system-ui,sans-serif;color:var(--ink);background:#fff;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink2)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.p-love{--dark:var(--love-dark);--glow:var(--love-glow);--deep:var(--love-deep);--tint:var(--love-tint);--acc:var(--love-acc)}
.p-recon{--dark:var(--recon-dark);--glow:var(--recon-glow);--deep:var(--recon-deep);--tint:var(--recon-tint);--acc:var(--recon-acc)}
.p-cero{--dark:var(--cero-dark);--glow:var(--cero-glow);--deep:var(--cero-deep);--tint:var(--cero-tint);--acc:var(--cero-acc)}
.p-gestin{--dark:var(--gestin-dark);--glow:var(--gestin-glow);--deep:var(--gestin-deep);--tint:var(--gestin-tint);--acc:var(--gestin-acc)}
.p-cmb{--dark:var(--cmb-dark);--glow:var(--cmb-glow);--deep:var(--cmb-deep);--tint:var(--cmb-tint);--acc:var(--cmb-acc)}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;text-decoration:none}
.brand i{display:inline-grid;grid-template-columns:repeat(2,7px);gap:3px}
.brand i b{width:7px;height:7px;border-radius:2px;display:block}
.nav{display:flex;gap:28px;font-size:15px}
.nav a{text-decoration:none;color:var(--ink2);padding:6px 0}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border-radius:999px;padding:11px 20px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;font-family:inherit;line-height:1.2}
.btn.solid{background:var(--ink);color:#fff}.btn.solid:hover{background:#2c3038;color:#fff}
.btn.line{border-color:var(--ink);color:var(--ink);background:#fff}
.btn.deep{background:var(--deep);color:#fff}.btn.deep:hover{color:#fff;opacity:.92}
.btn.white{background:#fff;color:var(--deep)}
.menu-btn{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;align-items:center;justify-content:center;cursor:pointer}
.progress{height:3px;background:transparent}
.progress span{display:block;height:3px;width:0;background:var(--acc);transition:width .1s linear}

/* routes */
[data-route]{display:none}
[data-route].on{display:block}

/* highlight */
.mark{background-image:linear-gradient(var(--mark),var(--mark));background-repeat:no-repeat;background-position:0 88%;background-size:0% 40%;padding:0 2px;transition:background-size .9s cubic-bezier(.2,.7,.2,1)}
.mark.lit{background-size:100% 40%}

/* home */
.hero{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:end;padding:64px 0 32px}
.hero h1{font-size:58px;line-height:1.05;letter-spacing:-.03em}
.hero aside{display:flex;flex-direction:column;gap:14px;color:var(--ink2)}
.avail{color:var(--ink)}
.avail:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#1E8E5A;margin-right:8px;vertical-align:1px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:8px 0 72px}
.tile{background:var(--tint);border-radius:14px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;min-height:196px;text-decoration:none;color:var(--ink);transition:transform .2s ease}
.tile:hover{transform:translateY(-2px);color:var(--ink)}
.tile .name{font-size:14px;font-weight:600;color:var(--deep)}
.tile .line{font-size:15px;line-height:1.35}
.h2{font-size:36px;line-height:1.1;letter-spacing:-.02em}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:64px 40px;margin-top:32px}
.card{display:flex;flex-direction:column;gap:18px}
.cover{display:block;position:relative;background:var(--tint);border-radius:16px;aspect-ratio:16/11;overflow:hidden;text-decoration:none}
.cover .status{position:absolute;left:20px;top:16px;font-size:13px;font-weight:600;color:var(--deep);z-index:1}
.cover .shot{position:absolute;left:40px;top:44px;right:0;bottom:0;background:#fff;border-radius:10px 0 0 0;box-shadow:0 0 0 1px rgba(23,25,30,.08);display:flex;align-items:center;justify-content:center;color:var(--ink2);font-size:14px;text-align:center;padding:24px;overflow:hidden}
.cover.media .status{color:#fff;background:rgba(10,14,20,.55);padding:4px 10px;border-radius:999px;backdrop-filter:blur(4px)}
.cover video,.cover img.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .proj{font-size:14px;font-weight:600;color:var(--deep)}
.card h3{font-size:26px;line-height:1.18;letter-spacing:-.015em}
.card h3 a{text-decoration:none}
.meta{font-size:14px;color:var(--ink2)}
.also{margin-top:56px;color:var(--ink2);font-size:16px}
.band{background:var(--band)}
.evidence{display:grid;grid-template-columns:4fr 2fr 6fr;gap:24px;padding:22px 0;border-top:1px solid #DADDE2;align-items:baseline;text-decoration:none;color:var(--ink)}
.evidence:hover{color:var(--ink)}
.evidence:hover b{text-decoration:underline}
.evidence b{font-size:20px;line-height:1.3}
.chip{display:inline-block;font-size:13px;font-weight:600;color:var(--deep);background:var(--tint);border-radius:999px;padding:4px 10px}
.split{display:grid;grid-template-columns:5fr 7fr;gap:40px;margin-bottom:32px;align-items:end}
.lede{font-size:18px;line-height:1.55;color:var(--ink2)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:88px 0}
.quotes figure{margin:0;border-top:3px solid var(--deep);padding-top:20px;display:flex;flex-direction:column;gap:14px}
.quotes blockquote{margin:0;font-size:20px;line-height:1.45}
figcaption{font-size:14px;color:var(--ink2)}
.how{display:grid;grid-template-columns:4fr 8fr;gap:40px;padding:88px 0;border-top:1px solid var(--line)}
.how .grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 40px}
.how h3{font-size:19px;margin-bottom:6px}
.how p{font-size:16px;line-height:1.55;color:var(--ink2)}
.foot{background:var(--love-deep);color:#fff}
.foot .wrap{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-end;padding-top:80px;padding-bottom:80px}
.foot p{font-size:34px;line-height:1.2;font-weight:600;letter-spacing:-.02em;max-width:680px}
.foot a{color:#fff}
.foot .links{display:flex;flex-direction:column;gap:8px;font-size:17px}
.foot small{display:block;width:100%;font-size:14px;color:#A9C4CA}

/* hero viz motion */
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes shrink{0%,25%{width:100%}75%,100%{width:8%}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes draw{from{stroke-dashoffset:320}to{stroke-dashoffset:0}}
@keyframes appear{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pulse{animation:pulse 3.2s ease-in-out infinite}
.on .shrink{animation:shrink 2.4s cubic-bezier(.6,0,.2,1) .6s both}
.on .grow{transform-origin:left;animation:grow .9s cubic-bezier(.2,.7,.2,1) both}
.on .draw{stroke-dasharray:320;animation:draw 1.8s cubic-bezier(.4,0,.2,1) .4s both}
.on .appear{animation:appear .5s ease 2.1s both}

/* case study */
.case-head{background:var(--dark);color:#fff}
.case-head .wrap{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center;padding-top:44px}
.case-head .txt{display:flex;flex-direction:column;gap:20px;padding-bottom:44px}
.crumb{font-size:15px;color:var(--glow)}.crumb a{color:var(--glow)}
.case-head h1{font-size:54px;line-height:1.05;letter-spacing:-.03em;color:#fff}
.intro{font-size:19px;line-height:1.6;color:#E3EAEC}
.pills{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 15px;font-size:14px;font-weight:600;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);text-decoration:none}
.pill:hover{color:#fff;border-color:#fff}
.pill.solid{background:#fff;color:var(--dark);border-color:#fff}
.pill.solid:hover{color:var(--dark)}
.pill.plain{border-color:transparent;padding:8px 4px;color:var(--glow)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid rgba(255,255,255,.18);padding-top:16px;font-size:15px;margin:6px 0 0}
.facts.four{grid-template-columns:repeat(4,1fr)}
.facts dt{color:var(--glow)}.facts dd{margin:4px 0 0;color:#fff}
.case-head figure{margin:0;padding-bottom:44px;display:flex;flex-direction:column;gap:8px}
.case-head figure figcaption{color:var(--glow);font-size:13px}
.case-head .heroimg{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.case-head .ph{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.25);color:#C9D3D6}
.case-head .need{background:#E7F0FB}
.ph{background:#fff;border:1px dashed rgba(23,25,30,.25);border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink2);font-size:14px;padding:24px}
.case-body{display:grid;grid-template-columns:3fr 9fr;gap:40px;padding:64px 0 96px}
.toc{position:sticky;top:92px;align-self:start;display:flex;flex-direction:column}
.toc .left{display:flex;align-items:center;gap:8px;padding:0 0 14px 16px;font-size:14px;color:var(--ink2)}
.toc a{text-decoration:none;display:block;padding:6px 0 6px 14px;font-size:14px;color:var(--ink2);border-left:2px solid var(--line);transition:color .2s,border-color .2s}
.toc a.part{font-size:15px;font-weight:600;color:var(--ink);margin-top:8px}
.toc a.active{color:var(--deep);border-left-color:var(--deep);font-weight:600}
.article{display:flex;flex-direction:column;gap:64px;max-width:820px}
.article section{display:flex;flex-direction:column;gap:18px}
.article h2{font-size:34px;line-height:1.12;letter-spacing:-.02em}
.article h3{font-size:24px;line-height:1.22}
.article p{font-size:18px;line-height:1.7}
.article p.muted{color:var(--ink2)}
.short{background:var(--tint);border-radius:14px;padding:28px 32px}
.short h2{font-size:20px!important;color:var(--deep)}
.short ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.partlabel{display:flex;flex-direction:column;gap:10px;padding-top:8px}
.partlabel span{align-self:flex-start;font-size:14px;font-weight:600;color:#fff;background:var(--deep);border-radius:999px;padding:6px 14px}
.partlabel h2{font-size:42px!important;line-height:1.08}
.partlabel p{color:var(--ink2);font-size:19px!important}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery img,.pair img,.pair video{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:10px;border:1px solid var(--line);background:#0A0E14}
.gallery figure,.pair figure{margin:0;display:flex;flex-direction:column;gap:8px}
.pairblock{display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--line);padding-top:28px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pair figure:last-child figcaption{color:var(--deep);font-weight:600}
.decision{display:grid;grid-template-columns:140px 1fr;gap:6px 24px;border-top:1px solid var(--line);padding-top:22px}
.decision .n{font-size:14px;font-weight:600;color:var(--deep)}
.decision > div{display:flex;flex-direction:column;gap:10px}
.decision dl{margin:0;display:grid;grid-template-columns:150px 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:16px;line-height:1.55}
.decision dt{color:var(--ink2);padding:12px 16px;border-bottom:1px solid var(--line)}
.decision dd{margin:0;padding:12px 16px;border-bottom:1px solid var(--line)}
.decision dl>*:nth-last-child(-n+2){border-bottom:0}
.evid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.evid3>div{border-top:3px solid var(--deep);padding-top:14px}
.evid3 b{display:block;font-size:19px;margin-bottom:6px}
.evid3 p{font-size:15px!important;line-height:1.5!important;color:var(--ink2)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ba>div{border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:10px}
.ba .b{background:var(--band)}.ba .a{background:var(--deep);color:#fff}
.ba .lab{font-size:14px;font-weight:600}
.ba .big{font-size:40px;line-height:1.05;font-weight:600;letter-spacing:-.02em}
.ba p{font-size:15px!important;line-height:1.55!important}
.ba .a p{color:#E6EEF0}
.pq{background:var(--band);border-radius:14px;padding:28px 32px;margin:0;display:flex;flex-direction:column;gap:12px}
.pq blockquote{margin:0;font-size:22px;line-height:1.45}
.press{border:1px solid var(--line);border-radius:14px;padding:22px 28px;margin:0;display:flex;flex-direction:column;gap:8px}
.press .lab{font-size:14px;font-weight:600;color:var(--deep)}
.caveat{font-size:15px!important;color:var(--ink2);border-left:3px solid var(--line);padding-left:14px}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.principles div{background:var(--tint);border-radius:12px;padding:20px;font-size:18px;font-weight:600;line-height:1.35}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.three>div{border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:10px}
.three>div:last-child{background:var(--tint);border-color:transparent}
.three b{font-size:17px}.three>div:last-child b{color:var(--deep)}
.three p{font-size:15px!important;line-height:1.6!important;color:var(--ink2)}
.three>div:last-child p{color:var(--ink)}
.wide img,.wide video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.wide{margin:0;display:flex;flex-direction:column;gap:8px}
.try{background:var(--deep);color:#fff;border-radius:16px;padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.try p{color:#CFE1E5}.try ul{margin:0;padding-left:20px;line-height:1.7}
.try small{font-size:13px;color:#A9C4CA;line-height:1.5;display:block}
.try img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.btn.ghost{border-color:#8FB3BB;color:#fff}
.refl{display:grid;grid-template-columns:1fr 1fr;gap:32px;border-top:1px solid var(--line);padding-top:32px}
.refl h3{font-size:15px;color:var(--ink2);margin-bottom:6px}
.pager{border-top:1px solid var(--line)}
.pager .wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:40px;padding-bottom:40px}
.pager a{text-decoration:none;display:flex;flex-direction:column;gap:6px;background:var(--tint);border-radius:14px;padding:24px 28px;color:var(--ink)}
.pager a span{font-size:14px;font-weight:600;color:var(--deep)}
.pager a b{font-size:22px;line-height:1.25}
.pager a:last-child{text-align:right}
.badges{aspect-ratio:16/10;background:#111821;border-radius:10px;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:12px;padding:28px}
.badges>div{display:flex;flex-wrap:wrap;gap:10px}
.bdg{display:inline-flex;align-items:center;gap:8px;border-radius:6px;padding:7px 12px;font-size:14px;font-weight:600}
.badges p{font-size:13px!important;line-height:1.5!important;color:#97A3B1}

/* missing info (draft) */
.need{display:none;align-self:flex-start;background:#E7F0FB;color:#1A4FA0;border:1px dashed #6F9BD6;border-radius:4px;padding:3px 8px;font-size:12px;font-weight:500;line-height:1.4}
body.drafts .need{display:inline-flex}
.gap{color:var(--ink2)}
body.drafts .gap{background:#E7F0FB;color:#1A4FA0;border-radius:3px}
.draft-toggle{position:fixed;right:16px;bottom:16px;z-index:30;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 16px;font:600 13px 'Schibsted Grotesk',sans-serif;box-shadow:0 6px 20px rgba(23,25,30,.12);cursor:pointer;display:flex;align-items:center;gap:8px}
.draft-toggle i{width:28px;height:16px;border-radius:999px;background:#C9CDD3;position:relative;transition:background .2s}
.draft-toggle i:after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s}
.draft-toggle[aria-pressed="true"] i{background:#1A4FA0}
.draft-toggle[aria-pressed="true"] i:after{transform:translateX(12px)}

/* about */
.about-hero{display:grid;grid-template-columns:4fr 8fr;gap:56px;align-items:center;padding:72px 0 64px}
.about-hero img{width:100%;max-width:400px;aspect-ratio:4/5;object-fit:cover;border-radius:12px}
.about-hero h1{font-size:46px;line-height:1.08;letter-spacing:-.025em;margin-bottom:20px}
.about-hero p{font-size:18px;line-height:1.65;margin-bottom:14px}
.lead3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.lead3>div{background:#fff;border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:10px}
.lead3 b{font-size:19px;line-height:1.3}.lead3 p{font-size:15px;line-height:1.6;color:var(--ink2)}
.roles{border-top:1px solid #D9D9D5}
.role{display:grid;grid-template-columns:2fr 4fr 6fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.role .y{font-size:14px;color:var(--ink2)}
.role b{display:block;font-size:17px}.role span{font-size:14px;color:var(--ink2)}
.role p{font-size:15px;line-height:1.55}
.facts3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:0 0 72px}
.facts3 h3{font-size:14px;color:var(--ink2);margin-bottom:6px}
.facts3 p{font-size:15px}
.ai-table{display:grid;grid-template-columns:2fr 5fr 5fr;border-top:1px solid var(--ink)}
.ai-table>div{padding:16px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5}
.ai-table .h{font-weight:600;font-size:14px;color:var(--ink2)}
.ai-table .no{color:var(--ink2)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mark{transition:none}
  .pulse,.on .shrink,.on .grow,.on .draw,.on .appear{animation:none}
  .tile{transition:none}
}
@media (max-width:980px){
  .wrap{padding:0 20px}
  .nav,.topbar .btn{display:none}
  .menu-btn{display:flex}
  .topbar.open .nav{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 20px 16px}
  .topbar.open .nav a{padding:12px 0;border-bottom:1px solid var(--line);box-shadow:none}
  .hero{grid-template-columns:1fr;padding:40px 0 24px}.hero h1{font-size:38px}
  .tiles{grid-template-columns:1fr 1fr}
  .cards,.quotes,.how,.how .grid,.split,.lead3,.facts3,.about-hero,.pager .wrap{grid-template-columns:1fr}
  .evidence{grid-template-columns:1fr;gap:6px}
  .case-head .wrap,.case-body{grid-template-columns:1fr}
  .case-head h1{font-size:38px}
  .toc{display:none}
  .facts,.facts.four{grid-template-columns:1fr 1fr}
  .gallery,.pair,.ba,.evid3,.principles,.three,.try,.refl{grid-template-columns:1fr}
  .decision{grid-template-columns:1fr}
  .role{grid-template-columns:1fr;gap:4px}
  .ai-table{grid-template-columns:1fr}
  .partlabel h2{font-size:32px!important}
  .foot p{font-size:26px}
}

.case-head .gap{color:#C9D3D6}
body.drafts .case-head .gap{background:#E7F0FB;color:#1A4FA0}

/* no borders on animated media */
.pair video,.wide video{border:0}
.case-head .heroimg{box-shadow:none}

/* zoomable media */
.article figure img,.article figure video,.try img,.case-head video{cursor:zoom-in}
.gallery{grid-template-columns:repeat(2,1fr)}
.gallery video{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:10px;background:#0A0E14}
.zoomable{position:relative}
.zoom-hint{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:999px;background:rgba(10,14,20,.7);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;pointer-events:none}
.zoomable:hover .zoom-hint,.zoomable:focus-within .zoom-hint{opacity:1}
.lightbox{border:0;padding:0;margin:auto;max-width:96vw;max-height:94vh;background:transparent;overflow:visible}
.lightbox::backdrop{background:rgba(8,11,15,.88)}
.lb-stage img,.lb-stage video{display:block;max-width:94vw;max-height:84vh;width:auto;height:auto;border-radius:8px;cursor:zoom-out}
.lb-stage img.natural{max-width:none;max-height:none;cursor:zoom-out}
.lightbox.scroll .lb-stage{max-width:94vw;max-height:84vh;overflow:auto;border-radius:8px}
.lb-cap{color:#D5DDE0;font-size:14px;margin-top:10px;text-align:center}
.lb-close{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:999px;border:0;background:#fff;color:#17191E;font-size:26px;line-height:1;cursor:pointer}
@media (max-width:980px){.gallery{grid-template-columns:1fr}}

.pair video[src*="orig-dome"]{object-fit:contain;object-position:center}

.principles.goals{grid-template-columns:repeat(2,1fr)}
.principles.goals div{font-size:17px;line-height:1.45}
@media (max-width:980px){.principles.goals{grid-template-columns:1fr}}

/* How I work icons */
.how-ico{width:56px;height:56px;border-radius:14px;background:var(--tint);color:var(--deep);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.how-ico svg{stroke:currentColor}
.how-ico .b{transform-box:fill-box;transform-origin:bottom}
.how-ico .cl,.how-ico .cr{transform-box:fill-box;transform-origin:center}
.how-ico .l{stroke-dasharray:14;stroke-dashoffset:0}
@keyframes ico-dot{0%,100%{opacity:.25}40%{opacity:1}}
@keyframes ico-left{0%{transform:translateX(-4px)}60%,100%{transform:none}}
@keyframes ico-right{0%{transform:translateX(4px)}60%,100%{transform:none}}
@keyframes ico-bar{0%{transform:scaleY(.15)}70%,100%{transform:scaleY(1)}}
@keyframes ico-line{0%{stroke-dashoffset:14}70%,100%{stroke-dashoffset:0}}
.how.play .d{animation:ico-dot 1.2s ease-in-out 2 both}.how.play .d2{animation-delay:.2s}.how.play .d3{animation-delay:.4s}
.how.play .cl{animation:ico-left 1.2s cubic-bezier(.3,.7,.2,1) both}.how.play .cr{animation:ico-right 1.2s cubic-bezier(.3,.7,.2,1) both}
.how.play .b{animation:ico-bar 1s cubic-bezier(.3,.7,.2,1) both}.how.play .b2{animation-delay:.15s}.how.play .b3{animation-delay:.3s}
.how.play .l{animation:ico-line .9s ease-out both}.how.play .l2{animation-delay:.2s}.how.play .l3{animation-delay:.4s}
.how .grid>div:hover .d{animation:ico-dot 1.2s ease-in-out infinite}
.how .grid>div:hover .d2{animation-delay:.2s}.how .grid>div:hover .d3{animation-delay:.4s}
.how .grid>div:hover .cl{animation:ico-left 1.6s cubic-bezier(.3,.7,.2,1) infinite alternate}
.how .grid>div:hover .cr{animation:ico-right 1.6s cubic-bezier(.3,.7,.2,1) infinite alternate}
.how .grid>div:hover .b{animation:ico-bar 1.4s cubic-bezier(.3,.7,.2,1) infinite alternate}
.how .grid>div:hover .l{animation:ico-line 1.2s ease-out infinite alternate}
@media (prefers-reduced-motion:reduce){.how-ico *{animation:none!important}}

.how-ico{width:64px;height:64px;border-radius:16px}

/* client band: divides the hero from the work */
.hero{padding:72px 0 56px}
.hero aside{font-size:17px;gap:8px}
.clients{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--band)}
.clients .wrap{display:flex;align-items:center;gap:32px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap}
.clients p{font-size:14px;color:var(--ink2);white-space:nowrap}
.clients ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:15px;font-weight:600;color:#3A3F48}
#work{padding-top:80px}

.clients .wrap{gap:28px;flex-wrap:nowrap}
.clients ul{gap:8px 24px}
@media (max-width:980px){.clients .wrap{flex-wrap:wrap;gap:12px}}

/* dark hero: signal in the noise */
.hero-band{position:relative;overflow:hidden;background:#10141E;color:#fff}
.hero-field{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 30%,#000 62%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 30%,#000 62%)}
.hero-band .wrap{position:relative}
.hero-band .hero{padding:96px 0 72px}
.hero-band h1{color:#fff;max-width:760px}
.hero-band aside{color:#AEB7C6}
.hero-band .avail{color:#fff}
.hero-band .clients{background:transparent;border:0;border-top:1px solid rgba(255,255,255,.14);display:flex;align-items:center;gap:28px;padding:22px 0 26px}
.hero-band .clients p{color:#8E98A8;font-size:14px;white-space:nowrap}
.hero-band .clients ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px;font-weight:600;color:#DDE3EC}
.sig-line{stroke-dasharray:800;stroke-dashoffset:800}
.on .sig-line{animation:sigdraw 2.4s cubic-bezier(.4,0,.2,1) .4s forwards}
@keyframes sigdraw{to{stroke-dashoffset:0}}
.sig-ring{transform-box:fill-box;transform-origin:center;animation:sigpulse 3.6s ease-in-out infinite}
@keyframes sigpulse{0%,100%{transform:scale(.8);opacity:.15}50%{transform:scale(1.25);opacity:.6}}
@media (prefers-reduced-motion:reduce){.sig-line{stroke-dashoffset:0;animation:none}.sig-ring{animation:none}}
@media (max-width:980px){.hero-band .hero{padding:56px 0 40px}.hero-band .clients{flex-wrap:wrap;gap:10px}.hero-field{opacity:.5}}

.hero-band .hero{grid-template-columns:1fr;gap:28px;max-width:720px}
.hero-band aside{gap:6px}
@media (max-width:980px){.hero-field{opacity:.3}}

/* dark navbar, same color as the hero */
.topbar{background:rgba(16,20,30,.97);border-bottom:1px solid rgba(255,255,255,.08)}
.brand{color:#fff}.brand:hover{color:#fff}
.nav a{color:#AEB7C6}.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 #fff}
.topbar .btn.solid{background:#fff;color:#10141E}.topbar .btn.solid:hover{background:#E6EAF0;color:#10141E}
.topbar :focus-visible{outline-color:#fff}
.menu-btn{background:transparent;border-color:rgba(255,255,255,.25)}
.menu-btn path{stroke:#fff}
@media (max-width:980px){.topbar.open .nav{background:#10141E;border-bottom-color:rgba(255,255,255,.08)}.topbar.open .nav a{border-bottom-color:rgba(255,255,255,.08)}}

.brand i b:nth-child(1){background:var(--love-glow)!important}.brand i b:nth-child(2){background:var(--recon-glow)!important}.brand i b:nth-child(3){background:var(--cero-acc)!important}.brand i b:nth-child(4){background:var(--gestin-acc)!important}

.topbar{background:#10141E;backdrop-filter:none;border-bottom-color:#10141E}

.topbar{border-bottom-color:rgba(255,255,255,.08)}

/* evidence slider */
.slider-band{background:var(--band);border-top:1px solid var(--line)}
.slider-band .wrap{padding-top:88px;padding-bottom:88px}
.slider-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.slider-head .lede{margin-top:10px}
.slider-btns{display:flex;gap:10px}
.sbtn{width:48px;height:48px;border-radius:999px;border:1px solid var(--ink);background:#fff;font-size:18px;cursor:pointer;font-family:inherit}
.sbtn:disabled{opacity:.3;cursor:default}
.slides{list-style:none;margin:0;padding:0 0 8px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.slides::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:start;background:#fff;border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:12px;min-height:250px;border-top:4px solid var(--deep)}
.slide .chip{align-self:flex-start}
.slide b{font-size:22px;line-height:1.25}
.slide p{color:var(--ink2);font-size:16px;line-height:1.55;flex:1}
.slide a{font-weight:600;font-size:15px}
/* projects page */
.more{border-top:1px solid var(--ink);margin-top:24px}
.more-row{display:grid;grid-template-columns:2fr 8fr 2fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.more-row .mname{font-weight:600;color:var(--ink2);font-size:15px}
.more-row b{font-size:19px;display:block;margin-bottom:4px}
.more-row p{font-size:16px;line-height:1.55;color:var(--ink2);margin-bottom:6px}
.more-row>span:last-child{text-align:right}
@media (max-width:980px){.slides{grid-auto-columns:85%}.slider-head{flex-direction:column;align-items:flex-start}.more-row{grid-template-columns:1fr;gap:4px}.more-row>span:last-child{text-align:left}}

/* hero: positioning first, availability secondary */
.hero-band aside{max-width:620px}
.hero-band .pos{font-size:22px;line-height:1.45;color:#E6EAF0}
.hero-band .hero-role{font-size:16px;color:#AEB7C6;margin-top:4px}
.hero-band .avail{font-size:14px;color:#AEB7C6;margin-top:6px}
.hero-band .avail:before{width:7px;height:7px}
.foot p{font-size:32px}

/* hero: clusters, groups, decision (Hero AB) */
.hero-viz text{font-family:'Schibsted Grotesk',sans-serif;font-size:13px;fill:#8E98A8}
.hero-viz .dlab{font-size:15px;font-weight:600;fill:#fff}
.hero-viz .links line{stroke:#2E3546;stroke-width:1}
.hero-viz .ln{fill:none;stroke:#FFE066;stroke-width:1.5;stroke-opacity:.75;stroke-dasharray:1;stroke-dashoffset:0}
.hero-viz .pr{fill:none;stroke:#FFE066;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:hv-ring 2.4s ease-out infinite}
@keyframes hv-ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.6);opacity:0}}
@keyframes hv-move{0%,18%{transform:translate(var(--cx),var(--cy))}44%,100%{transform:translate(var(--gx),var(--gy))}}
@keyframes hv-dim{0%,52%{opacity:1}60%,100%{opacity:.45}}
@keyframes hv-out{0%,14%{opacity:1}22%,100%{opacity:0}}
@keyframes hv-labin{0%,40%{opacity:0}48%,100%{opacity:1}}
@keyframes hv-draw{0%,54%{stroke-dashoffset:1}74%,100%{stroke-dashoffset:0}}
@keyframes hv-decin{0%,72%{opacity:0}80%,100%{opacity:1}}
.hero-viz .run .dot{animation:hv-move 10.5s cubic-bezier(.45,0,.2,1) both,hv-dim 10.5s ease both}
.hero-viz .run .hot{animation:hv-move 10.5s cubic-bezier(.45,0,.2,1) both}
.hero-viz .run .links,.hero-viz .run .clab{animation:hv-out 10.5s ease both}
.hero-viz .links,.hero-viz .clab{opacity:0}
.hero-viz .run .glab{animation:hv-labin 10.5s ease both}
.hero-viz .run .ln{animation:hv-draw 10.5s cubic-bezier(.4,0,.2,1) both}
.hero-viz .run .dec{animation:hv-decin 10.5s ease both}
@media (prefers-reduced-motion:reduce){.hero-viz .pr{animation:none;opacity:.5}.hero-viz .run .dot,.hero-viz .run .hot,.hero-viz .run .links,.hero-viz .run .clab,.hero-viz .run .glab,.hero-viz .run .ln,.hero-viz .run .dec{animation:none}}
.hero-viz{position:absolute;right:-8px;top:40px;width:540px;pointer-events:none}
.hero-viz svg{display:block;width:100%;height:auto;overflow:visible}
.hv-replay{pointer-events:auto;position:absolute;right:24px;bottom:-6px;display:inline-flex;align-items:center;gap:8px;background:transparent;color:#C9D3E0;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:7px 14px;font:600 13px 'Schibsted Grotesk',sans-serif;cursor:pointer}
.hv-replay:hover{color:#fff;border-color:#fff}
.hv-replay:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hero-band .hero{position:relative;z-index:1}
@media (max-width:1180px){.hero-viz{display:none}}

/* résumé */
.cv-wrap{padding-top:56px;padding-bottom:96px;max-width:960px}
.cv-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px;color:var(--ink2);font-size:15px}
.cv{background:#fff;border-radius:16px;box-shadow:0 0 0 1px #E4E6EA;padding:56px 64px;display:flex;flex-direction:column;gap:36px}
.cv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-bottom:28px;border-bottom:2px solid #10141E}
.cv-head h1{font-size:44px;line-height:1;letter-spacing:-.03em}
.cv-title{font-size:19px;color:var(--ink2);margin-top:8px}
.cv-contact{list-style:none;margin:0;padding:0;text-align:right;font-size:14px;line-height:1.7;color:var(--ink2)}
.cv-contact a{color:var(--ink)}
.cv-summary p{font-size:17px;line-height:1.6;max-width:68ch}
.cv h2{font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:14px}
.cv-role{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:18px 0;border-top:1px solid #ECEEF1}
.cv-role:first-of-type{border-top:0;padding-top:0}
.cv-when{font-size:14px;color:var(--ink2);padding-top:3px;font-variant-numeric:tabular-nums}
.cv-role h3{font-size:18px;line-height:1.3;margin-bottom:8px}
.cv-note{font-size:14px;color:var(--ink2);margin:-4px 0 8px}
.cv-role h3 span{font-weight:400;color:var(--ink2)}
.cv-role h3 span:before{content:" · "}
.cv-role ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.55}
.cv-role li::marker{color:#C9A400}
.cv-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;font-size:15px;line-height:1.6}
.cv-grid h2+p{margin-bottom:18px}
.cv-tools{margin-top:8px}
@media (max-width:760px){.cv{padding:32px 24px}.cv-head{flex-direction:column;align-items:flex-start}.cv-contact{text-align:left}.cv-role,.cv-grid{grid-template-columns:1fr;gap:6px}.cv-actions{flex-direction:column;align-items:flex-start}}
@media print{
  @page{size:Letter;margin:0.4in 0.5in}
  body{background:#fff}
  body > *:not([data-route="resume"]){display:none !important}
  main[data-route="resume"]{display:block !important}
  .cv-actions,.need{display:none !important}
  .cv-wrap{padding:0;max-width:none}
  .cv{box-shadow:none;padding:0;gap:11px;border-radius:0}
  .cv-note{font-size:10.5px;margin:-2px 0 3px}
  .cv-head{padding-bottom:12px}.cv-head h1{font-size:32px}.cv-title{font-size:16px}
  .cv-summary p{font-size:12px;line-height:1.5;max-width:none}
  .cv-role{padding:6px 0;grid-template-columns:105px 1fr;gap:16px;break-inside:avoid}
  .cv-role h3{font-size:13.5px;margin-bottom:4px}
  .cv-role ul{font-size:11px;gap:2px;line-height:1.42}
  .cv-when{font-size:11px}
  .cv-grid{font-size:11px;gap:24px;break-inside:avoid;grid-template-columns:1.3fr 1fr;line-height:1.45}
  .cv-grid h2+p{margin-bottom:8px}
  .cv h2{font-size:10px;margin-bottom:5px}
  .cv-contact{font-size:11px}
  a{text-decoration:none}
}
/* client logos in the hero band */
.hero-band .clients ul.logos{gap:18px 26px;align-items:center}
.hero-band .clients .logos li{display:flex;align-items:center}
.hero-band .clients .logos img{display:block;width:auto;opacity:.82}
.hero-band .clients .logos img.lg-tall{height:48px}
.hero-band .clients .logos img.lg-wide{height:28px}
.hero-band .clients .logos img.lg-ac3e{height:22px}
@media (max-width:980px){.hero-band .clients ul.logos{gap:16px 28px}.hero-band .clients .logos img.lg-tall{height:40px}.hero-band .clients .logos img.lg-wide{height:24px}}
@media (min-width:1181px){.hero-band .clients ul.logos{flex:1;flex-wrap:nowrap;justify-content:space-between;gap:20px}}
/* quieter logo row */
.hero-band .clients .logos img{opacity:.6}
.hero-band .clients .logo-note{font-size:14px;font-weight:400;color:#8E98A8;max-width:200px;line-height:1.35}
@media (min-width:1181px){.hero-band .clients ul.logos{justify-content:flex-start;gap:44px}}
.hero-band .clients .logos img.lg-ac3e{height:18px}

/* cero two-part */
.solo figure{margin:0;display:flex;flex-direction:column;gap:8px}
.solo img,.solo video{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top left;border-radius:12px;border:1px solid var(--line);background:#F4F6F8}
.solo figcaption{font-size:14px;color:var(--ink2)}
.solo.now{margin-top:6px;display:flex;flex-direction:column;gap:8px}
.solo.now figure figcaption{display:none}
.nowcap{font-size:15px!important;line-height:1.5!important;color:var(--ink2)}
.nowcap b{color:var(--deep)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px}
.grid2 figure{margin:0;display:flex;flex-direction:column;gap:8px}
.grid2 img,.grid2 video{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:10px;border:1px solid var(--line);background:#F4F6F8}
.grid2 figcaption{font-size:15px;line-height:1.5;color:var(--ink2)}
.grid2 figcaption b{color:var(--ink)}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}

/* helio two-part */
:root{--helio-deep:#0E7C86;--helio-tint:#E3F4F5;--helio-acc:#0E7C86;--helio-dark:#131C28;--helio-glow:#7FD8E0}
.p-helio{--dark:var(--helio-dark);--glow:var(--helio-glow);--deep:var(--helio-deep);--tint:var(--helio-tint);--acc:var(--helio-acc)}

/* case client */
.case-client{display:flex;align-items:center;gap:16px;margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);color:#AEB8C6;font-size:14px}
.case-client img{display:block;width:auto;opacity:.85}
.case-client img.lg-tall{height:54px}
.case-client img.lg-wide{height:30px}
.case-client img.lg-ac3e{height:20px}
.case-client .cc-note{max-width:24ch;line-height:1.35}
.case-client .cc-text{color:#fff;font-size:15px}

/* recon real screen */
.cover img.shotimg{position:absolute;left:40px;top:44px;width:calc(100% - 40px);height:calc(100% - 44px);object-fit:cover;object-position:left top;border-radius:10px 0 0 0;box-shadow:0 0 0 1px rgba(23,25,30,.08);background:#fff}
.case-head .shotfig{margin:0;padding-bottom:44px;display:flex;flex-direction:column;gap:8px}
.case-head .shotfig img{width:100%;height:auto;border-radius:12px;display:block;cursor:zoom-in}
.case-head .shotfig figcaption{color:var(--glow);font-size:13px}
.rfig{margin:24px 0 0;display:flex;flex-direction:column;gap:8px}
.rfig img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#fff}
.rfig figcaption{font-size:14px;color:var(--ink2)}
.decision .rfig{margin-top:6px}

/* public build */
.cover .statshot{flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:28px 32px;gap:6px;text-align:left}
.cover .statshot b{font-size:72px;line-height:1;letter-spacing:-.03em;color:var(--deep)}
.cover .statshot small{font-size:17px;color:var(--ink2);max-width:22ch}
.statfig{margin:0;padding-bottom:44px;align-self:stretch;display:flex}
.statpanel{flex:1;border-radius:14px;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(255,255,255,.14);display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:32px;min-height:280px}
.statpanel b{font-size:88px;line-height:1;letter-spacing:-.03em;color:#FFE066}
.statpanel span{font-size:18px;color:#C9D3E0;max-width:22ch}
.morecover{background:#10141E}
.morecover .mlist{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:14px 24px;padding:40px}
.morecover .mlist span{color:#DDE3EC;font-size:22px;font-weight:600;border-top:1px solid rgba(255,255,255,.18);padding-top:12px}
.card-more .proj{color:var(--ink2)}

/* cookie notice */
.cookie{position:fixed;left:24px;bottom:24px;z-index:50;max-width:380px;background:#fff;color:#17191E;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.18),0 0 0 1px rgba(23,25,30,.08);padding:18px 20px;display:flex;flex-direction:column;gap:14px;font-size:14px;line-height:1.45}.cookie[hidden]{display:none}.cookie-btns{display:flex;gap:10px;justify-content:flex-end}.cookie .btn{padding:8px 16px;border-radius:999px;font:inherit;font-weight:600;cursor:pointer;border:1px solid #17191E}.cookie .btn.solid{background:#17191E;color:#fff}.cookie .btn.ghost{background:#fff;color:#17191E}.cookie .btn:focus-visible{outline:2px solid #1A4FA0;outline-offset:2px}@media (max-width:600px){.cookie{left:12px;right:12px;bottom:12px;max-width:none}}