:root{
  --paper:#f3f1ea;
  --paper-2:#eae7dc;
  --ink:#001b3f;
  --ink-2:#3a4b69;
  --ink-3:#6c7a92;
  --blue:#2580c3;
  --blue-lt:#6db0e6;
  --teal:#12766d;
  --ochre:#c27a1b;
  --line:rgba(0,27,63,.16);
  --line-2:rgba(0,27,63,.34);

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.2,.7,.1,1);
  --gut:clamp(20px,4vw,56px);
}

*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 1.0625rem/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:100}
.skip:focus{left:0}

.wrap{max-width:1320px;margin:0 auto;padding:0 var(--gut)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:300;margin:0;letter-spacing:-.015em;line-height:1.04}
h1{font-size:clamp(2.8rem,5.5vw,5.6rem)}
h2{font-size:clamp(2.2rem,4.6vw,4.2rem)}
h3{font-size:1.65rem;line-height:1.15;letter-spacing:-.012em}
em{font-style:italic;font-weight:300;color:var(--blue)}
.dark em{color:var(--blue-lt)}
p{margin:0}
.muted{color:var(--ink-2)}
.dark .muted{color:rgba(233,237,243,.72)}
.label,.eyebrow,.tag-line,.role,.tags,.facts dt,.readouts dt,figcaption,.step-n{font-family:var(--mono);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase}
.label{color:var(--ink-3);margin-bottom:28px}
.dark .label{color:rgba(233,237,243,.5)}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background:rgba(243,241,234,.86);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.site-header.scrolled{border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand img{height:36px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,38px);font-size:.94rem}
.nav a{text-decoration:none;position:relative;padding:6px 0}
.nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:not(.nav-cta):hover::after{transform:scaleX(1)}
.nav-cta{border:1px solid var(--ink);padding:8px 18px!important;transition:background .3s,color .3s}
.nav-cta:hover{background:var(--ink);color:var(--paper)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font:500 .95rem var(--sans);text-decoration:none;cursor:pointer;border:1px solid var(--ink);background:transparent;color:var(--ink);padding:15px 28px;position:relative;overflow:hidden;transition:color .4s var(--ease)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid::before{content:"";position:absolute;inset:0;background:var(--blue);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn-solid:hover::before{transform:translateY(0)}
.btn-solid{isolation:isolate}
.btn-solid>*,.btn-solid{z-index:1}
.btn-solid::before{z-index:-1}
.btn-link{border-color:transparent;padding-left:6px;padding-right:6px}
.btn-link span{display:inline-block;transition:transform .4s var(--ease)}
.btn-link:hover span{transform:translateX(6px)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;padding-top:72px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.hero-art{position:absolute;right:calc(-1 * clamp(60px,13vw,250px));top:calc(72px + 2vh);width:min(920px,74vw);aspect-ratio:1;pointer-events:none;overflow:visible}
.hero>.wrap{width:100%}
.hero-grid{position:relative;flex:1;display:flex;align-items:center;padding-top:clamp(36px,8vh,90px);padding-bottom:clamp(36px,8vh,90px)}
.hero-copy{max-width:760px}
.eyebrow{display:flex;align-items:center;gap:14px;color:var(--ink-2);margin-bottom:34px}
.eyebrow i{width:26px;height:1px;background:var(--line-2)}
.hero h1{margin-bottom:34px}
.line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.line>span{display:block}
.lede{max-width:520px;font-size:1.18rem;color:var(--ink-2);margin-bottom:40px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}

.facts-band{position:relative;background:var(--paper)}
.facts{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-top:1px solid var(--line)}
.facts>div{padding:26px 28px 34px 0}
.facts>div+div{padding-left:28px;border-left:1px solid var(--line)}
.facts dt{color:var(--ink);margin-bottom:10px}
.facts dd{margin:0;color:var(--ink-2);font-size:.98rem;line-height:1.5;max-width:30ch}

/* load-in */
.js [data-hero]{opacity:0}
.js .line>span[data-hero]{opacity:1;transform:translateY(112%)}
.js.ready [data-hero]:not(.line>span){animation:rise .9s var(--ease) forwards;animation-delay:calc(var(--d,0)*1s)}
.js.ready .line>span[data-hero]{animation:slide 1.1s var(--ease) forwards;animation-delay:calc(var(--d,0)*1s)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes slide{to{transform:none}}

/* art strokes */
svg path{fill:none}
.draw{stroke-linecap:butt;stroke-linejoin:round}
.js .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.js .art-in .draw{animation:draw var(--dur,2.4s) var(--ease) forwards;animation-delay:var(--delay,0s)}
@keyframes draw{to{stroke-dashoffset:0}}
.flow{stroke-dasharray:1.5 15;stroke-linecap:butt;opacity:0}
.art-in .flow{animation:fadein 1s 3.4s forwards,flow 3.2s 3.4s linear infinite}
@keyframes fadein{to{opacity:.85}}
@keyframes flow{to{stroke-dashoffset:16.5}}
#hero-rings,#hero-tree,#sky-flow{transition:transform .9s var(--ease)}

/* ---------- sections ---------- */
.section{padding:clamp(72px,10vw,150px) 0}
.paper2{background:var(--paper-2)}
.dark{background:var(--ink);color:#e9edf3}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,8vw,130px);align-items:start}
.section-head h2{margin-bottom:28px}
.section-head.wide{max-width:900px;margin-bottom:clamp(48px,7vw,96px)}
.section-head .muted{max-width:46ch}
.split>.section-head{position:sticky;top:120px}

[data-reveal]{--i:0}
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i)*.1s)}
.js [data-reveal].in{opacity:1;transform:none}

/* ---------- services ---------- */
.services{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.svc{border-bottom:1px solid var(--line-2);position:relative}
.svc::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.svc:hover::after,.svc.is-open::after{transform:scaleX(1)}
.svc-head{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:56px 1fr 22px;align-items:baseline;gap:8px;padding:28px 0;cursor:pointer}
.svc-head:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.num{font:400 .8rem var(--mono);color:var(--ink-3);letter-spacing:.06em}
.svc-title{font:300 clamp(1.5rem,2.5vw,2.2rem)/1.15 var(--serif);letter-spacing:-.015em;transition:transform .5s var(--ease),color .3s}
.svc-head:hover .svc-title{transform:translateX(8px);color:var(--blue)}
.plus{position:relative;width:16px;height:16px;align-self:center}
.plus::before,.plus::after{content:"";position:absolute;background:var(--ink);left:0;top:50%;width:100%;height:1px;transition:transform .5s var(--ease)}
.plus::after{transform:rotate(90deg)}
.is-open .plus::after{transform:rotate(0)}
.svc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.svc-body>div{overflow:hidden;padding-left:64px;max-width:60ch}
.is-open .svc-body{grid-template-rows:1fr}
.svc-body p{color:var(--ink-2);margin-bottom:22px}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 32px;padding:0}
.tags li{border:1px solid var(--line-2);padding:5px 11px;color:var(--ink-2);font-size:.68rem}

/* ---------- skyfall ---------- */
.sky{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,100px);align-items:center}
.sky h2{margin-bottom:28px}
.sky .muted{max-width:42ch;margin-bottom:44px}
.seg{display:flex;flex-wrap:wrap;border:1px solid rgba(233,237,243,.28);margin-bottom:44px}
.seg button{all:unset;box-sizing:border-box;cursor:pointer;flex:1 1 auto;text-align:center;padding:13px 16px;font:500 .86rem var(--sans);color:rgba(233,237,243,.72);transition:background .4s var(--ease),color .3s;white-space:nowrap}
.seg button+button{border-left:1px solid rgba(233,237,243,.28)}
.seg button:hover{color:#fff}
.seg button[aria-checked="true"]{background:#e9edf3;color:var(--ink)}
.seg button:focus-visible{outline:2px solid var(--blue-lt);outline-offset:-4px}
.readouts{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-top:1px solid rgba(233,237,243,.2)}
.readouts>div{padding:22px 16px 0 0;display:flex;flex-direction:column;justify-content:space-between}
.readouts>div+div{padding-left:18px;border-left:1px solid rgba(233,237,243,.2)}
.readouts dt{color:rgba(233,237,243,.5);margin-bottom:12px;font-size:.66rem}
.readouts dd{margin:0;white-space:nowrap;font:300 clamp(1.9rem,3vw,2.7rem)/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.readouts small{font:400 .72rem var(--mono);color:rgba(233,237,243,.55);letter-spacing:.04em}

.sky-fig{margin:0}
#sky-svg{display:block;width:100%;height:auto;overflow:visible}
.sky-fig figcaption{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;color:rgba(233,237,243,.55);font-size:.66rem}
.sky-fig figcaption .right{margin-left:auto}
.k{display:inline-block;width:14px;height:9px;margin-right:8px;vertical-align:-1px}
.k-water{background:rgba(109,176,230,.55)}
.k-flow{height:1px;background:repeating-linear-gradient(90deg,var(--blue-lt) 0 2px,transparent 2px 5px);vertical-align:3px}
.k-bld{border:1px solid rgba(233,237,243,.6)}
.k-hit{background:var(--ochre);border:1px solid var(--ochre)}
.contour{stroke:rgba(233,237,243,.28);stroke-width:1}
.contour.major{stroke:rgba(233,237,243,.5)}
.water{fill:rgba(109,176,230,.42);stroke:var(--blue-lt);stroke-width:1.2;opacity:0;transition:opacity .9s var(--ease)}
.water.on{opacity:1}
.water.deep{fill:rgba(109,176,230,.2)}
.bld{fill:var(--ink);stroke:rgba(233,237,243,.6);stroke-width:1;transition:fill .6s var(--ease),stroke .6s}
.bld.hit{fill:var(--ochre);stroke:var(--ochre)}
.flowline{stroke:var(--blue-lt);stroke-width:1.2}
.elev{font:400 9.5px var(--mono);fill:rgba(233,237,243,.55);letter-spacing:.04em;paint-order:stroke;stroke:var(--ink);stroke-width:4px}

/* ---------- steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:0;right:0;top:13px;height:1px;background:var(--line-2)}
.steps li{padding-right:clamp(18px,3vw,44px);position:relative}
.steps li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:13px;border:1px solid var(--ink);background:var(--paper);transition:background .6s .3s}
.steps li.in::before{background:var(--blue);border-color:var(--blue)}
.step-n{display:block;color:var(--ink-3);margin:48px 0 18px}
.steps h3{margin-bottom:16px}
.steps p{color:var(--ink-2);font-size:.98rem}

/* ---------- cases ---------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-2)}
.case{padding:34px clamp(18px,2.6vw,40px) 44px 0;display:flex;flex-direction:column;gap:18px}
.case+.case{padding-left:clamp(18px,2.6vw,40px);border-left:1px solid var(--line-2)}
.tag-line{color:var(--ink-3);font-size:.68rem}
.big{font:300 clamp(2.8rem,4.4vw,4.2rem)/1 var(--serif);letter-spacing:-.03em;margin:14px 0 4px;display:flex;align-items:baseline;gap:0 .15em;white-space:nowrap}
.big small{font:400 .75rem var(--mono);letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase;margin-left:.4em}
.big .from{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
.big .arrow{color:var(--blue);font-size:.6em}
.case>p:last-child{color:var(--ink-2);font-size:.98rem;max-width:36ch}

/* ---------- team ---------- */
.team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2)}
.person{position:relative;padding:28px clamp(16px,2vw,32px) 40px 0;overflow:hidden}
.person+.person{padding-left:clamp(16px,2vw,32px);border-left:1px solid var(--line-2)}
.person .mini{position:absolute;right:6px;top:34px;width:60%;opacity:.7;pointer-events:none;overflow:visible}
.initial{display:block;font:300 clamp(6rem,11vw,10.5rem)/.9 var(--serif);letter-spacing:-.05em;margin:18px 0 38px -.04em;position:relative;transition:transform .8s var(--ease)}
.person:hover .initial{transform:translateY(-8px)}
.c-navy{color:var(--ink)}.c-blue{color:var(--blue)}.c-teal{color:var(--teal)}
.person h3{position:relative;margin-bottom:6px}
.role{position:relative;color:var(--ink-3);margin-bottom:18px;font-size:.68rem}
.person>p:last-child{position:relative;color:var(--ink-2);font-size:.96rem;max-width:30ch}

/* ---------- contact ---------- */
.contact{background:var(--paper-2)}
.contact-lines{margin-top:44px;line-height:1.5;font:300 clamp(1.4rem,2.4vw,2rem)/1.3 var(--serif)}
.contact-lines a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease),color .3s;padding-bottom:3px}
.contact-lines a:hover{color:var(--blue)}
.contact-lines span{color:var(--ink-3)}
.form{display:grid;gap:26px}
.form label{display:block}
.form label span{display:block;font:400 .72rem var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.form input,.form textarea{width:100%;font:400 1.1rem/1.5 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:8px 0 12px;outline:0;resize:vertical;transition:border-color .3s}
.form input:focus,.form textarea:focus{border-bottom-color:var(--blue);box-shadow:0 1px 0 var(--blue)}
.form [aria-invalid="true"]{border-bottom-color:var(--ochre)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:6px}
.form-msg{font-size:.95rem;color:var(--ink-2)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line-2);padding:40px 0 48px}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.foot img{height:30px;width:auto}
.foot p{color:var(--ink-3);font-size:.9rem;margin-right:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:.92rem}
.foot nav a{text-decoration:none}
.foot nav a:hover{color:var(--blue)}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .split,.sky{grid-template-columns:1fr}
  .split>.section-head{position:static}
  .steps{grid-template-columns:1fr 1fr;row-gap:56px}
  .steps::before{display:none}
  .team{grid-template-columns:1fr 1fr}
  .person:nth-child(3){padding-left:0;border-left:0}
  .person:nth-child(n+3){border-top:1px solid var(--line-2)}
  .cases{grid-template-columns:1fr}
  .case+.case{padding-left:0;border-left:0;border-top:1px solid var(--line-2)}
  .hero-art{opacity:.55;top:90px}
}
@media (max-width:720px){
  .nav a:not(.nav-cta){display:none}
  .facts{grid-template-columns:1fr}
  .facts>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .readouts{grid-template-columns:1fr}
  .readouts>div+div{padding-left:0;border-left:0;border-top:1px solid rgba(233,237,243,.2);margin-top:20px}
  .readouts>div{padding:18px 0 0}
  .seg button{flex-basis:100%}
  .seg button+button{border-left:0;border-top:1px solid rgba(233,237,243,.28)}
  .steps{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
  .person+.person{padding-left:0;border-left:0;border-top:1px solid var(--line-2)}
  .svc-head{grid-template-columns:40px 1fr 22px}
  .svc-body>div{padding-left:48px}
  .hero-art{width:130vw;right:-50vw;opacity:.4}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
  .flow{animation:none!important;opacity:.7}
}