/* Vanta design system (see _work/vanta/design.md). Shared by every page. */
:root { --night:#0e1a36; --deep:#08112a; --frost:#eef2fa; --haze:#9fb0d4; --copper:#ff8a50; --copper-ink:#1a0d06;
        --line:rgb(238 242 250 / .14); --ease:cubic-bezier(.16,1,.3,1); --wrap:1280px; }
* { box-sizing:border-box; margin:0; }
html { background:var(--night); color:var(--frost); font:400 17px/1.55 "Schibsted Grotesk", system-ui, sans-serif; -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body { overflow-x:clip; }
a { color:inherit; }
.wrap { width:min(var(--wrap), 100% - 48px); margin-inline:auto; }
h1, h2, h3, .display { font-family:"Unbounded", system-ui, sans-serif; font-weight:600; letter-spacing:-.02em; line-height:1.02; }
h1 .dim, h2 .dim, h3 .dim { color:var(--haze); font-weight:500; }
.mono { font:400 13px/1.4 "Red Hat Mono", ui-monospace, monospace; letter-spacing:.02em; color:var(--haze); }
.lede { color:var(--haze); font-size:1.15rem; max-width:34ch; }

/* buttons: magnetic (motion.js nudges them toward the cursor) */
.btn { --mx:0px; --my:0px; display:inline-flex; align-items:center; gap:12px; padding:16px 26px; border-radius:999px; border:0; cursor:pointer;
       background:var(--copper); color:var(--copper-ink); font:500 16px "Schibsted Grotesk", sans-serif; text-decoration:none;
       transform:translate(var(--mx), var(--my)); transition:transform .5s var(--ease), background .15s; }
.btn:hover { background:#ffb08a; }
.btn:active { transform:translate(var(--mx), var(--my)) scale(.97); }
.btn.ghost { background:transparent; color:var(--frost); box-shadow:inset 0 0 0 1px var(--line); }
.btn.ghost:hover { box-shadow:inset 0 0 0 1px var(--frost); }
.btn .arr { transition:transform .3s var(--ease); }
.btn:hover .arr { transform:translateX(4px); }
:focus-visible { outline:2px solid var(--copper); outline-offset:3px; }

/* nav */
.nav { position:fixed; inset:0 0 auto; z-index:20; transition:background .4s, transform .5s var(--ease); }
.nav.solid { background:rgb(14 26 54 / .92); box-shadow:0 1px 0 var(--line); }
.nav .wrap { display:flex; align-items:center; gap:36px; height:72px; }
.nav .logo { font:700 19px "Unbounded", sans-serif; letter-spacing:.14em; text-decoration:none; }
.nav ul { list-style:none; display:flex; gap:28px; padding:0; margin-right:auto; }
.nav ul a { text-decoration:none; color:var(--haze); font-size:15px; position:relative; padding:6px 0; transition:color .15s; }
.nav ul a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--copper); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.nav ul a:hover, .nav ul a[aria-current] { color:var(--frost); }
.nav ul a:hover::after, .nav ul a[aria-current]::after { transform:none; }
.nav .btn { padding:11px 20px; font-size:15px; }
.menu { display:none; background:none; border:0; color:var(--frost); font:500 15px "Schibsted Grotesk", sans-serif; cursor:pointer; padding:10px 0; }

/* words that rise out of a mask */
.split .w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
.split .w > span { display:inline-block; transform:translateY(105%); transition:transform .9s var(--ease); transition-delay:calc(var(--i) * 70ms); }
.split.in .w > span { transform:none; }
.f-still .split .w > span { transform:none; transition:none; }

/* forms */
.field { display:grid; gap:8px; }
.field label { font:400 13px "Red Hat Mono", monospace; color:var(--haze); }
.field input, .field select { font:400 17px "Schibsted Grotesk", sans-serif; color:var(--frost); background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:12px 0; border-radius:2px; transition:border-color .2s; width:100%; }
.field select option { background:var(--deep); }
.field input:focus, .field select:focus { outline:none; border-bottom-color:var(--copper); }
.field input:user-invalid { border-bottom-color:#ff6b6b; }

/* footer */
footer { background:var(--deep); padding:96px 0 36px; color:var(--haze); font-size:15px; }
footer .cols { display:grid; grid-template-columns:2fr repeat(3, 1fr); gap:40px; padding-bottom:72px; }
footer .big { font:700 clamp(3rem, 9vw, 8rem) "Unbounded", sans-serif; letter-spacing:.06em; color:var(--frost); line-height:.9; }
footer h4 { font:400 13px "Red Hat Mono", monospace; color:var(--haze); margin-bottom:16px; font-weight:400; }
footer ul { list-style:none; padding:0; display:grid; gap:10px; }
footer ul a { color:var(--frost); text-decoration:none; }
footer ul a:hover { color:var(--copper); }
footer .small { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:24px; font-size:14px; }

@media (max-width:860px) {
  .nav ul { display:none; position:absolute; top:72px; left:0; right:0; flex-direction:column; gap:0; background:var(--night); padding:8px 24px 24px; box-shadow:0 1px 0 var(--line); }
  .nav.open ul { display:flex; }
  .nav ul a { display:block; padding:14px 0; font-size:18px; }
  .menu { display:block; margin-left:auto; }
  .nav .btn { display:none; }
  footer .cols { grid-template-columns:1fr 1fr; }
  footer .cols > :first-child { grid-column:1 / -1; }
}