:root{
  color-scheme:light;
  --bg:#FFFFFF;
  --alt:#F4F6F7;
  --ink:#0B1117;
  --muted:#5C6770;
  --line:#E2E6E9;
  --cyan:#1CA9E0;
  --link:#0877A8;
  --night:#05080B;
  --font:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --wrap:1200px;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.narrow{max-width:760px;margin-inline:auto;padding-inline:24px}
@media (max-width:520px){.wrap,.narrow{padding-inline:18px}}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:700;letter-spacing:-.022em}
.display{font-size:clamp(40px,6.6vw,84px);line-height:1.02;font-weight:750;letter-spacing:-.035em}
.display .soft{color:var(--muted);font-weight:600}
.h2{font-size:clamp(32px,4.4vw,56px);line-height:1.06;letter-spacing:-.03em}
.lead{font-size:clamp(19px,2vw,23px);line-height:1.45;color:var(--muted);margin:0}
.center{text-align:center}
.center .lead{margin-inline:auto;max-width:34em}
section{padding-block:120px}
@media (max-width:700px){section{padding-block:80px}}
.alt{background:var(--alt)}
.link{color:var(--link);text-decoration:none;font-weight:600;font-size:18px}
.link:hover{text-decoration:underline;text-underline-offset:4px}
.links{display:flex;flex-wrap:wrap;gap:28px;justify-content:center;margin-top:28px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:80px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{width:56px;height:56px}
.brand span{font-weight:700;font-size:21px;letter-spacing:-.02em}
.nav nav{display:flex;gap:30px;align-items:center}
.nav nav a{text-decoration:none;font-size:15px;color:var(--muted)}
.nav nav a:hover,.nav nav a[aria-current="page"]{color:var(--ink)}
.menu-btn{display:none;background:none;border:0;font:500 15px var(--font);color:var(--ink);cursor:pointer;padding:8px 0}
@media (max-width:720px){
  .menu-btn{display:block}
  .nav nav{display:none}
  .nav.open nav{display:flex;position:absolute;top:80px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 18px 16px}
  .nav.open nav a{font-size:20px;color:var(--ink);padding:12px 0;border-bottom:1px solid var(--line)}
}

/* hero */
.hero{padding-block:72px 0;text-align:center}
.hero-logo{width:64px;height:64px;margin:0 auto 24px}
@media (max-width:520px){.hero-logo{width:52px;height:52px;margin-bottom:20px}.brand img{width:46px;height:46px}.brand span{font-size:19px}.nav .wrap{height:68px}.nav.open nav{top:68px}}
.hero .narrow,.pagehead .narrow{max-width:1040px}
.hero .lead{margin-top:22px}
.hero .cta-row{display:flex;gap:28px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.hero-img{margin-top:64px}
.bleed{width:100%;max-width:1600px;margin-inline:auto;padding-inline:24px}
@media (max-width:520px){.bleed{padding-inline:12px}}
.bleed img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:22px}
@media (max-width:700px){.bleed img{aspect-ratio:4/3;border-radius:14px}}

/* big number */
.stat{font-size:clamp(88px,15vw,200px);line-height:.9;font-weight:750;letter-spacing:-.05em;background:linear-gradient(180deg,var(--ink) 30%,#39708C);-webkit-background-clip:text;background-clip:text;color:transparent}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 40px;margin-top:72px;text-align:left}
.pillars h3{font-size:21px;margin-bottom:10px}
.pillars p{margin:0;color:var(--muted);font-size:16px}
.pillars div::before{content:"";display:block;width:28px;height:3px;border-radius:2px;background:var(--cyan);margin-bottom:18px}
@media (max-width:980px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pillars{grid-template-columns:1fr;gap:36px}}

/* night band */
.night{background:var(--night);color:#fff;padding:0}
.night .band{position:relative;overflow:hidden;min-height:min(78vw,720px);display:flex;align-items:flex-end}
.night .band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
.night .band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,11,0) 35%,rgba(5,8,11,.85))}
.night .band .wrap{position:relative;z-index:1;width:100%;padding-block:72px}
.night h2{color:#fff}
.night p{color:rgba(255,255,255,.72);font-size:clamp(18px,1.8vw,21px);max-width:30em;margin:16px 0 0}
@media (max-width:700px){.night .band{min-height:520px}}

/* services list */
.svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;gap:0;margin-top:64px;border-top:1px solid var(--line)}
.svc div{padding:28px 24px 8px 0}
.svc h3{font-size:19px;margin-bottom:8px}
.svc p{margin:0;color:var(--muted);font-size:15.5px}
@media (max-width:1000px){.svc{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}.svc div{border-bottom:1px solid var(--line);padding-bottom:24px}}
@media (max-width:560px){.svc{grid-template-columns:1fr}}

/* sectors */
.sectors{font-size:clamp(22px,2.8vw,34px);line-height:1.35;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:28px auto 0;max-width:24em}
.sectors span{white-space:nowrap}
.sectors i{font-style:normal;color:#B6C0C7;font-weight:400;padding-inline:.15em}
.scale{margin:28px auto 0;max-width:36em;color:var(--muted);font-size:18px}

/* photo trio */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:64px}
.trio figure{margin:0}
.trio img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px}
.trio figcaption{margin-top:12px;font-size:14px;color:var(--muted)}
.trio figcaption strong{display:block;color:var(--ink);font-weight:600;font-size:15px}
@media (max-width:800px){.trio{grid-template-columns:1fr}.trio img{aspect-ratio:3/2}}

/* crew */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.split img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
.split p{color:var(--muted);font-size:18px;margin:18px 0 0}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:36px}}

/* page head */
.pagehead{padding-block:96px 0;text-align:center}
.pagehead .lead{margin-top:20px}
.pagehead .bleed{margin-top:56px}

/* story */
.story p{font-size:clamp(19px,1.9vw,22px);line-height:1.6;color:#2A333B;margin:0 0 1.1em}
.story p.beat{font-size:clamp(26px,3.2vw,38px);line-height:1.2;font-weight:700;letter-spacing:-.025em;color:var(--ink);margin:1.4em 0}
.story .sign{margin-top:36px;color:var(--muted);font-size:15px}

/* service rows */
.rows{margin-top:24px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:40px;padding-block:40px;border-bottom:1px solid var(--line)}
.row h2{font-size:clamp(24px,2.6vw,32px)}
.row p{margin:0;color:var(--muted);font-size:18px}
@media (max-width:760px){.row{grid-template-columns:1fr;gap:10px;padding-block:30px}}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-top:64px;text-align:left}
.steps div{counter-increment:s}
.steps{counter-reset:s}
.steps div::before{content:counter(s);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--ink);font-weight:600;font-size:15px;margin-bottom:18px}
.steps h3{font-size:20px;margin-bottom:8px}
.steps p{margin:0;color:var(--muted);font-size:16px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* work */
.filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:48px 0 40px}
.filters button{font:500 14px var(--font);color:var(--ink);background:var(--alt);border:0;border-radius:99px;padding:9px 16px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff}
.events{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 20px}
.event{margin:0}
.event button.shot{all:unset;cursor:zoom-in;display:block;position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--alt)}
.event button.shot:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.event img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.event:hover img{transform:scale(1.03)}
.event .count{position:absolute;right:12px;bottom:12px;font-size:12px;background:rgba(255,255,255,.9);color:var(--ink);padding:4px 10px;border-radius:99px;font-weight:500}
.event figcaption{margin-top:14px}
.event .what{display:block;font-weight:600;font-size:17px}
.event .where{display:block;color:var(--muted);font-size:15px}
@media (max-width:980px){.events{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.events{grid-template-columns:1fr}}
.also{margin-top:96px;text-align:center}
.also h3{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
.also ul{list-style:none;padding:0;margin:14px auto 0;max-width:52em;color:var(--muted);font-size:16px;line-height:2}
.also li{display:inline}
.also li+li::before{content:"·";padding-inline:.6em;color:#B6C0C7}

.lightbox{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.94);color:#fff;display:grid;grid-template-rows:auto 1fr auto;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(env(safe-area-inset-bottom,0px) + 16px)}
.lightbox .top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.lightbox .t{display:grid}
.lightbox .t .where{color:rgba(255,255,255,.6);font-size:14px}
.lightbox .stage{display:grid;place-items:center;min-height:0;padding-block:14px}
.lightbox .stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.lightbox .ctrls{display:flex;justify-content:center;gap:14px;align-items:center;font-size:14px;color:rgba(255,255,255,.7)}
.lightbox button{background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:99px;padding:9px 16px;font:500 14px var(--font);cursor:pointer}
.lightbox button:hover{background:rgba(255,255,255,.22)}

/* contact */
.mail{font-size:clamp(28px,5vw,60px);font-weight:700;letter-spacing:-.03em;text-decoration:none;color:var(--ink);border-bottom:3px solid var(--cyan);user-select:all}
.copy{margin-left:14px;vertical-align:middle;background:var(--alt);border:0;border-radius:99px;padding:8px 14px;font:500 14px var(--font);cursor:pointer;color:var(--ink)}
.brief{list-style:none;padding:0;margin:40px auto 0;max-width:30em;color:var(--muted);font-size:18px;line-height:2}

/* cta + footer */
.cta{text-align:center}
.cta .h2{margin-bottom:24px}
footer{border-top:1px solid var(--line);padding-block:28px;font-size:13px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer a{text-decoration:none}
footer nav{display:flex;gap:20px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.event img{transition:none}}

.trio.who img{aspect-ratio:4/3}
.trio.who figcaption{font-size:16px;line-height:1.5}
.trio.who figcaption strong{font-size:20px;margin-bottom:4px}