*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#0a1520;--navy-mid:#0f1e2e;--teal:#1C7066;--teal-light:#2a9a8c;--sky:#ABE0F9;--sage:#57A364;--steel:#2F578B;--cream:#eeeae2;--muted:#9fb0bd;--line:rgba(171,224,249,.12);--pad:clamp(20px,4.5vw,64px)}
html{scroll-behavior:smooth}
body{background:var(--navy);color:var(--cream);font-family:'Urbanist',sans-serif;font-weight:300;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.skip{position:absolute;left:-999px}
/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:26px var(--pad);transition:background .5s,padding .4s,border-color .5s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(10,21,32,.88);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);padding:16px var(--pad);border-bottom-color:var(--line)}
.logo{position:relative;display:block}
.logo img{height:40px;width:auto;transition:opacity .45s}
.logo .w{position:absolute;left:0;top:0;opacity:0}
.nav.scrolled .logo .h{opacity:0}.nav.scrolled .logo .w{opacity:1}
.links{display:flex;gap:40px;list-style:none}
.links a{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:#c3d0da;transition:color .3s}
.links a:hover,.links a[aria-current]{color:#fff}
.cta{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);background:var(--sky);text-decoration:none;padding:11px 22px;transition:background .3s}
.cta:hover{background:var(--cream)}
/* project hero */
.phero{position:relative;min-height:78svh;display:flex;align-items:flex-end;padding:0 var(--pad) clamp(36px,6vw,72px);overflow:hidden}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,21,32,.96) 0%,rgba(10,21,32,.55) 38%,rgba(10,21,32,.15) 70%),linear-gradient(to bottom,rgba(10,21,32,.6),transparent 22%)}
.phero .in{position:relative;z-index:1;max-width:1100px}
.back{display:inline-block;margin-bottom:22px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#c3d0da;text-decoration:none;transition:color .3s}
.back:hover{color:var(--sky)}
h1.t{font-weight:900;font-size:clamp(46px,8.6vw,132px);line-height:.92;letter-spacing:-.04em}
.meta{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:30px;font-size:13px;letter-spacing:.04em;color:#c3d0da}
.meta b{display:block;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-light);margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{border:1px solid rgba(171,224,249,.28);padding:5px 11px;font-size:12px;border-radius:99px;color:var(--cream)}
/* gallery */
.phero.solo{min-height:52svh;background:radial-gradient(ellipse 70% 90% at 80% 20%,rgba(47,87,139,.28),transparent 65%),radial-gradient(ellipse 50% 70% at 10% 90%,rgba(28,112,102,.22),transparent 60%),var(--navy)}
.phero.solo::after{background:linear-gradient(to bottom,rgba(10,21,32,.5),transparent 30%)}
.gal{padding:clamp(56px,8vw,110px) var(--pad) 40px;display:flex;flex-direction:column;gap:clamp(12px,1.8vw,24px);max-width:1500px;margin:0 auto}
.row{display:grid;gap:clamp(12px,1.8vw,24px)}
.r1{grid-template-columns:1fr}.r2{grid-template-columns:1fr 1fr;align-items:start}
.rs{grid-template-columns:minmax(0,640px);justify-content:center}.rt{grid-template-columns:minmax(0,760px);justify-content:center}
.g{overflow:hidden;background:#0d1b29;aspect-ratio:var(--ar);width:100%;max-width:calc(var(--w)*1px);margin-inline:auto}
.g img{width:100%;height:100%;object-fit:cover}
.g{transition:translate .1s}
.chapter{font-weight:900;font-size:clamp(30px,4.2vw,58px);letter-spacing:-.035em;margin:clamp(40px,6vw,84px) 0 6px}
.chapter::before{content:"";display:block;width:56px;height:1px;background:var(--sky);margin-bottom:18px}
.band{width:100vw;margin-left:calc(50% - 50vw);background:var(--bg);padding:clamp(34px,6vw,96px) var(--pad);display:flex;flex-direction:column;gap:clamp(12px,1.8vw,24px);align-items:center}
.band .row{width:100%;max-width:1180px}
.band .g{background:transparent;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 .6%,#000 99.4%,transparent),linear-gradient(to bottom,transparent,#000 .6%,#000 99.4%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 .6%,#000 99.4%,transparent),linear-gradient(to bottom,transparent,#000 .6%,#000 99.4%,transparent);mask-composite:intersect}
.band .g:hover{animation:none}
.dbanner{width:100vw;margin-left:calc(50% - 50vw);background:#f7e84a;overflow:hidden;line-height:0}
.dwarp{display:block;width:100%;height:clamp(240px,29vw,470px)}
.intro{max-width:660px;margin-top:22px;font-size:clamp(15px,1.3vw,17px);line-height:1.7;color:#c9d5de}
.ihead .lede{max-width:780px;margin-top:26px;font-size:16px;line-height:1.75;color:var(--muted)}
.prose{max-width:860px;margin:0 auto;padding:clamp(130px,16vw,190px) var(--pad) 50px}
.prose h1{font-weight:900;font-size:clamp(44px,8vw,110px);line-height:.94;letter-spacing:-.04em;margin-bottom:34px}
.prose h2{font-weight:800;font-size:clamp(24px,3vw,36px);letter-spacing:-.025em;line-height:1.1;margin:52px 0 16px}
.prose p,.prose li{font-size:17px;line-height:1.8;color:#c9d5de}
.prose p+p{margin-top:14px}.prose ul{padding-left:1.1em;margin-top:8px}.prose li{margin:8px 0}
.prose li strong{color:var(--cream);font-weight:600}
.prose a{color:var(--sky);text-underline-offset:3px}.prose a:hover{color:#fff}
/* next */
.nextp{display:block;margin:clamp(60px,9vw,130px) var(--pad) 0;padding:clamp(34px,5vw,60px) 0;border-top:1px solid var(--line);text-decoration:none;position:relative}
.nextp small{display:block;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-light);margin-bottom:14px}
.nextp span{display:block;font-weight:900;font-size:clamp(34px,6vw,92px);line-height:.95;letter-spacing:-.04em;transition:color .3s,translate .5s cubic-bezier(.16,1,.3,1)}
.nextp:hover span{color:var(--sky);translate:14px 0}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:34px var(--pad);border-top:1px solid var(--line);font-size:12px;color:#8ea0ad}
.foot a{text-decoration:none;letter-spacing:.12em;text-transform:uppercase;font-weight:600;font-size:10px}
.foot a:hover{color:var(--sky)}
/* work index */
.ihead{padding:clamp(130px,18vw,200px) var(--pad) 30px;max-width:1500px;margin:0 auto}
.ihead h1{font-weight:900;font-size:clamp(52px,9vw,140px);line-height:.92;letter-spacing:-.04em}
.ihead h1 em,.chapter em,h1.t em{font-family:'Urbanist',sans-serif;font-style:normal;font-weight:900;color:var(--sky);letter-spacing:-.005em;-webkit-text-fill-color:transparent;-webkit-text-stroke:.036em currentColor;paint-order:stroke fill;text-shadow:none!important}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.filters button{font:inherit;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;background:none;color:#c3d0da;border:1px solid rgba(171,224,249,.25);padding:9px 16px;border-radius:99px;cursor:pointer;transition:all .25s}
.filters button:hover{color:#fff;border-color:var(--sky)}
.filters button[aria-pressed=true]{background:var(--sky);color:var(--navy);border-color:var(--sky)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px) clamp(16px,2vw,28px);padding:30px var(--pad) 40px;max-width:1500px;margin:0 auto}
.card{display:block;text-decoration:none}
.card .ph{overflow:hidden;aspect-ratio:4/3;background:#0d1b29}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.card:hover img{transform:scale(1.05)}
.card h3{font-weight:800;font-size:22px;letter-spacing:-.02em;margin-top:16px}
.card p{font-size:13px;color:var(--muted);margin-top:4px}
.card[hidden]{display:none}
/* glitch + reveal */
:root{--gl:0}
.glitch-h{text-shadow:calc(var(--gl)*-5px) 0 rgba(87,163,100,.75),calc(var(--gl)*5px) 0 rgba(171,224,249,.75)}
.glitch-h.gl-burst{animation:glBurst .55s steps(1,end) 1}
@keyframes glBurst{0%{transform:translateX(0);text-shadow:-7px 0 rgba(87,163,100,.9),7px 0 rgba(171,224,249,.9);clip-path:inset(0)}12%{transform:translateX(-6px);clip-path:inset(8% 0 58% 0)}26%{transform:translateX(7px);text-shadow:5px 0 rgba(28,112,102,.9),-5px 0 rgba(171,224,249,.9);clip-path:inset(56% 0 6% 0)}40%{transform:translateX(-3px);clip-path:inset(0)}54%{transform:translateX(4px);text-shadow:3px 0 rgba(87,163,100,.8),-3px 0 rgba(47,87,139,.9);clip-path:inset(32% 0 34% 0)}70%{transform:translateX(-1px);clip-path:inset(0)}100%{transform:none;text-shadow:none;clip-path:inset(0)}}
.g:hover,.card:hover .ph{animation:glHover .4s steps(1,end) 1}
@keyframes glHover{0%{translate:0 0;filter:drop-shadow(-8px 0 0 rgba(87,163,100,.55)) drop-shadow(8px 0 0 rgba(171,224,249,.55))}25%{translate:-6px 0;filter:drop-shadow(-4px 0 0 rgba(87,163,100,.5)) drop-shadow(4px 0 0 rgba(171,224,249,.5))}50%{translate:5px 0;filter:drop-shadow(5px 0 0 rgba(28,112,102,.5)) drop-shadow(-5px 0 0 rgba(171,224,249,.5))}75%{translate:-2px 0}100%{translate:0 0;filter:none}}
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:none}
@media (max-width:960px){.links{display:none}.grid{grid-template-columns:repeat(2,1fr)}.r2{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid{grid-template-columns:1fr}.nav .cta{padding:10px 14px}.logo img{height:34px}.r2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition-duration:.01ms!important}.js .reveal{opacity:1;transform:none}.glitch-h{text-shadow:none}}