@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 500;src:url(fonts/Fraunces.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 500;src:url(fonts/FrauncesItalic.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-weight:400;src:url(fonts/schibsted-400.ttf) format('truetype')}
@font-face{font-family:'Schibsted Grotesk';font-weight:600;src:url(fonts/schibsted-600.ttf) format('truetype')}
:root{--hh:clamp(640px,100svh,960px);--green:#114136;--mint:#8FCBB0;--soft:#F6F4EE;--night:#0B2C25;--night2:#07130F;--ink:#114136;--muted:#3F5F54;--tint:rgba(17,65,54,.07);--tint2:rgba(17,65,54,.12);
  --t0:17px;--t1:20px;--t2:28px;--t4:56px;--edge:48px;--f-disp:'Fraunces',Georgia,serif;--f-text:'Schibsted Grotesk',system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{font:400 var(--t0)/1.5 var(--f-text);color:var(--ink);background:var(--soft);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{font-family:var(--f-disp);font-weight:300;letter-spacing:-.02em;line-height:1.1}
h1 em,h2 em{font-style:italic;color:var(--mint)}
.lt h2 em{color:#2E7C63}
a{color:inherit}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 var(--t0)/1 var(--f-text);min-height:48px;padding:0 24px;background:var(--mint);color:var(--green);text-decoration:none;border-radius:4px;border:0}
.btn.dk{background:var(--green);color:var(--soft)}
.lnk{font:600 var(--t0)/1 var(--f-text);color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:6px}
.lbl{font:600 14px/1.2 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dk .lbl{color:var(--mint)}
.ph{font:600 12px/1 var(--f-text);letter-spacing:.08em;text-transform:uppercase;border:1px dashed currentColor;padding:4px 7px;opacity:.75;white-space:nowrap;border-radius:2px}
/* glass nav (liked in the glass rounds): see-through, blurred, takes the colour of what is under it */
.hd{position:fixed;left:0;right:0;top:0;height:72px;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 var(--edge);
  background:rgba(7,19,15,.42);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border-bottom:1px solid rgba(143,203,176,.18);color:#F6F4EE;box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.hd img{height:36px;display:block}
.hd nav{display:flex;align-items:center;gap:28px}
.hd nav a:not(.btn){text-decoration:none;font:600 16px/1 var(--f-text);padding:6px 0;border-bottom:1px solid transparent}
.hd nav a.on{border-color:var(--mint)}
.hd .btn{min-height:44px;padding:0 20px}
.hd .mb{display:none}
/* hero */
.stage{position:relative;height:calc(var(--hh) + 520px)}
.hero{position:sticky;top:0;height:var(--hh);overflow:hidden;background:var(--night);color:#F6F4EE}
.hero .photo{position:absolute;inset:0;background:url(img/hero.jpg) center 30%/cover;opacity:.42;-webkit-mask-image:linear-gradient(90deg,#000 0,transparent 30%);mask-image:linear-gradient(90deg,#000 0,transparent 30%)} /* round 2: the dusk photo fades out before the map starts (one picture style) */
.hero .tint{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,rgba(17,65,54,.85) 0,rgba(17,65,54,0) 760px)} /* round 2: left scrim, #114136 at 85% fading to 0 by x 760, above the map and below the text */
.hero:after{content:'';position:absolute;left:0;right:0;bottom:0;height:230px;background:linear-gradient(transparent,rgba(11,44,37,.94) 75%);z-index:2;pointer-events:none}
.float{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:fl 16s ease-in-out infinite alternate}
.float.a{width:620px;height:620px;right:6%;top:18%;background:radial-gradient(circle,rgba(143,203,176,.55),transparent 70%)}
.float.b{width:520px;height:520px;left:34%;bottom:-18%;background:radial-gradient(circle,rgba(95,180,150,.4),transparent 70%);animation-duration:21s}
.float.c{width:420px;height:420px;right:-6%;bottom:6%;background:radial-gradient(circle,rgba(143,203,176,.3),transparent 70%);animation-duration:18s}
@keyframes fl{from{transform:translate(0,0) scale(1)}to{transform:translate(-40px,26px) scale(1.12)}}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 22%,#000 42%);mask-image:linear-gradient(90deg,transparent 0,transparent 22%,#000 42%)}
.hero .in{position:absolute;left:var(--edge);top:158px;width:600px;z-index:5}
.hero h1 br{display:block}
.hero .eyebrow{display:flex;gap:10px;align-items:center;margin-bottom:22px}
.hero h1{font-size:var(--t4);color:#F6F4EE}
.hero .lead{font:600 var(--t1)/1.35 var(--f-text);margin-top:26px;max-width:520px}
.hero .sub{color:rgba(246,244,238,.82);margin-top:10px;max-width:470px}
.hero .go{display:flex;align-items:center;gap:28px;margin-top:34px}
.hero .chips{position:absolute;left:var(--edge);bottom:40px;display:flex;gap:12px;z-index:5;flex-wrap:wrap;right:var(--edge)}
.chip{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;background:rgba(246,244,238,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font:600 16px/1 var(--f-text);border-radius:4px;white-space:nowrap}

.legend{position:absolute;left:var(--edge);bottom:16px;z-index:5;font:600 12px/1 var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:rgba(246,244,238,.6)}
.chip b{font:300 26px/1 var(--f-disp);color:var(--mint)}
.scrollcue{position:absolute;right:var(--edge);bottom:44px;z-index:5;font:600 13px/1 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:rgba(246,244,238,.75);display:flex;align-items:center;gap:10px}
.scrollcue i{width:1px;height:34px;background:var(--mint);display:block}
.replay{position:absolute;right:var(--edge);top:100px;z-index:6;font:600 13px/1 var(--f-text);letter-spacing:.1em;text-transform:uppercase;color:rgba(246,244,238,.8);background:rgba(246,244,238,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:10px 14px;border-radius:4px;border:0}
.opt{position:absolute;left:var(--edge);top:92px;z-index:6;font:600 13px/1 var(--f-text);letter-spacing:.14em;text-transform:uppercase;background:var(--mint);color:var(--green);padding:8px 12px;border-radius:2px}
/* section scaffolding */
.sec{padding:96px var(--edge)}
.sec.dk{background:var(--night);color:#F6F4EE}
.row{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.sec h2{font-size:var(--t4)}
.sec .lead{font-size:var(--t1);color:var(--muted);margin-top:14px;max-width:520px}
.dk .lead{color:rgba(246,244,238,.8)}
/* receipt */
.paper{position:relative;background:#FBFAF5;font:400 15px/1.35 ui-monospace,'Cascadia Mono',Consolas,monospace;color:#17342c;padding:30px 30px 44px;width:100%;max-width:540px;box-shadow:0 30px 60px -34px rgba(17,65,54,.5);margin:0;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%}
.paper .h{display:flex;justify-content:space-between;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px dashed #17342c;padding-bottom:12px;margin-bottom:12px}
.paper .g{margin-top:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#4f6d62}
.paper .l{display:flex;gap:10px;align-items:baseline;padding:7px 0}
.paper .l span.n{color:#4f6d62;width:24px;flex:none}
.paper .l span.t{flex:1}
.paper .l i{flex:none;width:18px;height:18px;border:1.5px solid #17342c;border-radius:50%;position:relative;top:3px}
.paper .l i:after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #17342c;border-width:0 2px 2px 0;transform:rotate(40deg)}
.paper .tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed #17342c;margin-top:14px;padding-top:14px;font-weight:700;text-transform:uppercase}
.paper .tot b{font:300 44px/1 var(--f-disp);color:#2E7C63}
.paper .ty{text-align:center;margin-top:18px;font-size:13px;letter-spacing:.3em}
.paper .bar{height:30px;margin:12px auto 0;width:70%;background:repeating-linear-gradient(90deg,#17342c 0 2px,transparent 2px 5px,#17342c 5px 6px,transparent 6px 10px)}
/* flow */
.flow{display:flex;align-items:stretch;gap:0;margin-top:34px}
.fn{flex:1;background:var(--tint);padding:24px 16px 20px;border-radius:12px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}
.fn b{font:300 26px/1.1 var(--f-disp)}
.fn small{display:block;margin-top:8px;font-size:15px;color:var(--muted);line-height:1.3}
.fn.mid{background:var(--green);color:var(--soft)}.fn.mid small{color:rgba(246,244,238,.8)}
.ar{width:46px;flex:none;position:relative}
.ar:before{content:"";position:absolute;left:0;right:6px;top:50%;height:1.5px;background:var(--green);opacity:.4}
.ar:after{content:"";position:absolute;right:4px;top:calc(50% - 5px);width:9px;height:9px;border:solid var(--green);border-width:1.5px 1.5px 0 0;transform:rotate(45deg);opacity:.6}
.ar i{position:absolute;top:calc(50% - 4px);left:0;width:8px;height:8px;border-radius:50%;background:#2E7C63;animation:dot 2.4s linear infinite}
@keyframes dot{from{left:0;opacity:0}15%{opacity:1}85%{opacity:1}to{left:calc(100% - 12px);opacity:0}}
.pts{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.pts b{display:block;font-weight:600}.pts p{color:var(--muted);margin-top:4px;text-wrap:balance}
/* team */
.tmh{display:flex;justify-content:space-between;align-items:end;gap:40px}
.grp{position:relative;margin-top:36px;border-radius:16px;overflow:hidden;height:430px}
.grp img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block}
.grp .cap{position:absolute;left:20px;bottom:20px;padding:12px 16px;background:rgba(17,65,54,.62);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#F6F4EE;font:600 16px/1.3 var(--f-text);border-radius:4px}
.tg{display:grid;grid-template-columns:repeat(6,1fr);gap:20px 16px;margin-top:28px}
.pp img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:12px;display:block;filter:grayscale(.15)}
.pp strong{display:block;margin-top:10px;font:600 16px/1.2 var(--f-text)}.pp span{display:block;font-size:14px;color:var(--muted);line-height:1.25}
/* research circle */
.circ{position:relative;width:560px;height:560px;margin:0 auto}
.circ svg{width:100%;height:100%;overflow:visible}
.node{cursor:pointer}
.panel{background:rgba(246,244,238,.08);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:16px;padding:28px;margin-top:30px}
.panel h3{font-size:var(--t2);color:var(--mint)}
.panel p{color:rgba(246,244,238,.85);margin-top:8px}
.pill{display:inline-flex;gap:6px;margin-top:16px}
.pill span{padding:8px 12px;background:rgba(246,244,238,.1);font:600 14px/1 var(--f-text);border-radius:3px;color:rgba(246,244,238,.7)}
.pill span.on{background:var(--mint);color:var(--green)}
/* doors */
.doors{position:relative;overflow:hidden;background:var(--night);color:#F6F4EE;padding:150px var(--edge) 90px}
.doors .photo{position:absolute;left:0;right:0;top:0;height:300px;background:url(img/hero.jpg) center 35%/cover;opacity:.55;-webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.doors h2{font-size:var(--t4);position:relative}
.dg{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px;position:relative}
.door{background:rgba(246,244,238,.09);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:16px;padding:34px;display:flex;flex-direction:column;gap:14px;min-height:300px}
.door h3{font-size:36px}.door p{color:rgba(246,244,238,.85);max-width:460px}
.door ol{list-style:none;display:grid;gap:8px;margin:6px 0 auto}
.door li{display:flex;gap:12px;align-items:baseline}.door li b{font:300 22px/1 var(--f-disp);color:var(--mint);width:26px}
.door .btn{align-self:flex-start;margin-top:10px}
.door.main{background:rgba(143,203,176,.16)}
.nb{position:relative;margin-top:22px;color:rgba(246,244,238,.85)}
/* phone */
@media (max-width:600px){
  :root{--edge:20px;--t4:36px}
  .hd{height:60px}.hd img{height:30px}.hd nav a:not(.btn){display:none}.hd .mb{display:block;font:600 15px/1 var(--f-text);border:1px solid rgba(246,244,238,.4);background:rgba(246,244,238,.08);color:#F6F4EE;padding:10px 14px;border-radius:3px}.hd nav .btn{display:none}
  :root{--hh:clamp(700px,100svh,900px)}
  .hero .in{top:100px;width:auto;right:var(--edge)}
  .hero .eyebrow{margin-bottom:14px}
  .hero h1{font-size:34px}
  .hero .lead{font-size:18px;margin-top:16px}
  .hero .sub{font-size:16px;margin-top:6px}
  .hero .go{margin-top:20px;gap:20px;flex-wrap:wrap}
  .hero .go .btn{min-height:50px}
  .hero .chips{bottom:20px;gap:8px}.chip{padding:10px 12px;font-size:14px}
.legend{position:absolute;left:var(--edge);bottom:16px;z-index:5;font:600 12px/1 var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:rgba(246,244,238,.6)}
.chip b{font-size:22px}
  .scrollcue,.replay,.legend{display:none}
  .sticky{display:flex}
  .hero canvas{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 36%,#000 58%);mask-image:linear-gradient(180deg,transparent 0,transparent 36%,#000 58%)}
  .hero .tint{background:linear-gradient(180deg,rgba(11,44,37,.9) 0,rgba(11,44,37,.55) 48%,rgba(11,44,37,0) 72%)}
}

/* sticky call bar: phone only, appears once the hero buttons scroll away */
.sticky{display:none;position:fixed;left:0;right:0;bottom:0;height:56px;z-index:60;align-items:center;justify-content:center;background:var(--mint);color:var(--green);font:600 17px/1 var(--f-text);text-decoration:none;transform:translateY(100%);transition:transform .25s var(--ease)}
body.scrolled .sticky{transform:none}