/* Dark-first by intent: the brand is an ice moon, lit against black. Light is a
   full considered swap, not an inversion. */
:root{
  --void:#05080e; --ground:#080d16; --raised:#0f1823;
  --edge:#18242f; --edge-lit:#2b4257;
  --ink:#f2f7fb; --ink-2:#aec2d2; --muted:#7c93a6;
  --ice:#7dd3fc; --ice-hot:#c5e9fd; --ice-deep:#38bdf8;
  --good:#6fd39b; --bad:#f4836a;
  --shell:1160px;
  --display:'Syne','Archivo',system-ui,sans-serif;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  /* exponential ease-out — the premium curve; everything moves on it */
  --ease:cubic-bezier(.16,1,.3,1);
  caret-color:var(--ice);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --void:#f4f8fb; --ground:#fbfdfe; --raised:#ffffff;
    --edge:#dde8f0; --edge-lit:#b4cbdc;
    --ink:#06121d; --ink-2:#3a5165; --muted:#55697b;
    --ice:#12657f; --ice-hot:#093b52; --ice-deep:#1d7f9d;
    --good:#2b7a51; --bad:#b23f26;
    caret-color:#12657f; color-scheme:light;
  }
}
:root[data-theme="light"]{
  --void:#f4f8fb; --ground:#fbfdfe; --raised:#ffffff;
  --edge:#dde8f0; --edge-lit:#b4cbdc;
  --ink:#06121d; --ink-2:#3a5165; --muted:#55697b;
  --ice:#12657f; --ice-hot:#093b52; --ice-deep:#1d7f9d;
  --good:#2b7a51; --bad:#b23f26;
  caret-color:#12657f; color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scrollbar-color:var(--edge-lit) transparent; scrollbar-width:thin}
body{
  margin:0; background:var(--void); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* Browser surfaces — the parts not drawn by hand still belong to the palette. */
::selection{background:var(--ice); color:var(--void)}
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:var(--edge-lit)}
::-webkit-scrollbar-thumb:hover{background:var(--ice-deep)}
a{color:inherit; text-underline-offset:.24em; text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--ice); outline-offset:3px}

.shell{max-width:var(--shell); margin:0 auto; padding:0 clamp(22px,4vw,40px)}
.d{font-family:var(--display); font-weight:700; letter-spacing:-.035em; line-height:1.04; text-wrap:balance}
/* Syne has no true italic. Emphasis is weight in the same family, never a
   synthesised oblique and never a second family. */
.d em{font-style:normal; font-weight:800; color:var(--ice)}
.num{font-variant-numeric:tabular-nums}

/* ---------- nav ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:60; border-bottom:1px solid transparent;
  transition:background .55s var(--ease), border-color .55s var(--ease), backdrop-filter .55s var(--ease)}
.nav.stuck{background:color-mix(in srgb,var(--void) 80%,transparent); backdrop-filter:blur(20px) saturate(1.4); border-bottom-color:var(--edge)}
/* padding-block only: the shorthand would wipe .shell's horizontal padding
   and pin the logo and the CTA to the viewport edges. */
.nav__in{display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-top:16px; padding-bottom:16px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand svg{width:32px; height:32px; flex:none}
.brand b{font-weight:600; font-size:16px; letter-spacing:-.01em}
.nav__links{display:none; gap:36px}
@media(min-width:880px){.nav__links{display:flex}}
.nav__links a{font-size:14px; color:var(--ink-2); text-decoration:none; position:relative; padding:4px 0; transition:color .3s var(--ease)}
.nav__links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--ice); transition:right .5s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:500; font-size:14.5px; letter-spacing:.01em;
  min-height:46px; padding:13px 28px; border-radius:2px; text-decoration:none; cursor:pointer;
  border:1px solid transparent;
  transition:transform .45s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);}
.btn--ice{background:var(--ice); color:var(--void); border-color:var(--ice)}
.btn--ice:hover{background:var(--ice-hot); border-color:var(--ice-hot); transform:translateY(-2px)}
.btn--ghost{border-color:var(--edge-lit); color:var(--ink)}
.btn--ghost:hover{border-color:var(--ice); color:var(--ice); transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.975); transition-duration:.09s}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn--sm{min-height:40px; padding:10px 20px; font-size:13.5px}

/* ---------- hero ---------- */
/* The scene sits behind the whole page rather than inside the hero box, so the
   sections below slide up over it like panels passing a window. */
.scene{position:fixed; inset:0; z-index:0; pointer-events:none; will-change:opacity}
.scene canvas{display:block; width:100%; height:100%}
.scene__veil{position:absolute; inset:0;
  background:radial-gradient(115% 78% at 14% 44%, color-mix(in srgb,var(--void) 78%,transparent) 0%, transparent 60%)}
.hero{position:relative; z-index:1; padding:170px 0 116px; background:transparent}
.hero__in{position:relative; z-index:2}
h1{font-size:clamp(44px,7.6vw,84px); margin:0; max-width:16ch}
.hero__sub{margin:32px 0 0; max-width:50ch; font-size:18px; color:var(--ink-2); line-height:1.65}
.hero__act{display:flex; flex-wrap:wrap; gap:14px; margin-top:40px}
.hero__by{margin:44px 0 0; font-size:14px; color:var(--muted); max-width:46ch}

/* ---------- section rhythm ---------- */
section{padding:clamp(80px,10vw,124px) 0; position:relative; z-index:1; background:var(--void)}
.band{background:var(--ground); border-top:1px solid var(--edge); border-bottom:1px solid var(--edge)}
.sec-h{font-size:clamp(38px,6vw,68px); margin:0 0 22px; max-width:17ch}
.sec-l{margin:0 0 clamp(48px,6vw,68px); max-width:56ch; color:var(--ink-2); font-size:18px}

/* ---------- the promise: a real sequence, so it is numbered ---------- */
.steps{display:grid; gap:1px; background:var(--edge); border:1px solid var(--edge)}
@media(min-width:780px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--void); padding:40px 34px}
.band .step{background:var(--ground)}
.step__n{font-family:var(--display); font-weight:600; font-size:40px; color:var(--ice); display:block; line-height:1; margin-bottom:22px}
.step h3{font-family:var(--display); font-weight:600; font-size:26px; margin:0 0 12px; letter-spacing:-.03em}
.step p{margin:0; color:var(--ink-2); font-size:16px}

/* ---------- editorial rows: work and capabilities share one structure ---------- */
.rows{display:flex; flex-direction:column; border-top:1px solid var(--edge)}
.row{display:grid; gap:18px; padding:clamp(34px,4.4vw,52px) 0; border-bottom:1px solid var(--edge);
  text-decoration:none; position:relative}
@media(min-width:860px){.row{grid-template-columns:minmax(0,7fr) minmax(0,10fr); gap:clamp(36px,5vw,72px); align-items:start}}
/* transform, not padding — animating layout properties thrashes the frame */
.row > *{transition:transform .55s var(--ease)}
a.row:hover > *{transform:translateX(12px)}
a.row::before{content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--ice);
  transform:scaleY(0); transform-origin:top; transition:transform .55s var(--ease)}
a.row:hover::before{transform:scaleY(1)}
.row h2,.row h3{font-family:var(--display); font-weight:600; font-size:clamp(28px,3.6vw,40px); margin:0; letter-spacing:-.033em}
.row p{margin:0; color:var(--ink-2); font-size:17px; max-width:62ch}
.row__meta{display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin-top:14px;
  font-size:13.5px; color:var(--muted); letter-spacing:.01em}
.row__go{display:inline-flex; align-items:center; gap:9px; color:var(--ice-deep)}
.arw{width:22px; height:10px; flex:none; transition:transform .5s var(--ease)}
a.row:hover .arw{transform:translateX(6px)}
.dot{width:3px; height:3px; border-radius:50%; background:var(--edge-lit); flex:none}

/* ---------- pricing: the peak of the scroll ---------- */
.peak{border-top:1px solid var(--edge); border-bottom:1px solid var(--edge); background:var(--ground); position:relative; overflow:hidden}
.peak__arc{position:absolute; left:50%; top:-42%; width:190%; transform:translateX(-50%); pointer-events:none; opacity:.5}
.peak > .shell{position:relative; z-index:1}
.pr{display:grid; gap:clamp(56px,7vw,84px)}
@media(min-width:1000px){.pr{grid-template-columns:1fr 1fr; gap:clamp(48px,5vw,80px)}}
.pr h2,.pr h3{font-family:var(--display); font-weight:600; font-size:27px; margin:0 0 4px; color:var(--ice); letter-spacing:-.03em}
.pr__unit{font-size:13px; color:var(--muted); margin:0 0 10px}
.line{display:grid; grid-template-columns:1fr auto; gap:22px; align-items:baseline;
  padding:22px 0; border-bottom:1px solid var(--edge)}
.line b{font-weight:500; font-size:17px; display:block; margin-bottom:6px; letter-spacing:-.005em}
.line span{color:var(--muted); font-size:14.5px; display:block; max-width:44ch; line-height:1.55}
.line .amt{font-family:var(--display); font-weight:600; font-size:clamp(32px,4.2vw,49px); white-space:nowrap; line-height:.95; letter-spacing:-.012em}
.line .amt small{display:block; font-family:var(--sans); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); text-align:right; margin-top:9px}
.line--all{border-bottom:none; padding-top:30px}
.line--all b, .line--all .amt{color:var(--ice)}
.line--all .amt{font-size:clamp(44px,6vw,72px)}
.pr-note{margin:clamp(40px,5vw,56px) 0 0; font-size:14.5px; color:var(--muted); max-width:62ch}

/* ---------- forms ---------- */
.fx{display:grid; gap:1px; background:var(--edge); border:1px solid var(--edge)}
@media(min-width:900px){.fx{grid-template-columns:1.05fr .95fr}}
.fc{background:var(--void); padding:clamp(30px,4vw,44px) clamp(24px,3vw,38px)}
.band .fc{background:var(--ground)}
.fc h3{font-family:var(--display); font-weight:600; font-size:29px; margin:0 0 10px; letter-spacing:-.03em}
.fc > p{margin:0 0 28px; color:var(--ink-2); font-size:16px}
form{display:flex; flex-direction:column; gap:18px}
.two{display:grid; gap:18px; grid-template-columns:1fr 1fr}
.l{display:block; font-size:11.5px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--muted); margin-bottom:9px}
input,select,textarea{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--edge-lit);
  padding:10px 0; min-height:44px; transition:border-color .35s var(--ease);
}
input::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none; border-bottom-color:var(--ice)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
select{cursor:pointer}
select option{background:var(--raised); color:var(--ink)}
textarea{resize:vertical; min-height:76px; line-height:1.55}
.status{margin:4px 0 0; font-size:14.5px; color:var(--good); min-height:1.35em}
.status[data-err]{color:var(--bad)}
.hp{position:absolute; left:-9999px; width:0; height:0; overflow:hidden}
form .btn{align-self:flex-start; margin-top:6px}

/* ---------- footer ---------- */
footer{position:relative; z-index:1; background:var(--void); border-top:1px solid var(--edge); padding:60px 0 68px; color:var(--muted); font-size:14.5px}
.fin{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap}
.fin strong{font-family:var(--display); font-weight:600; font-size:22px; color:var(--ink); letter-spacing:-.015em; display:block; margin-bottom:8px}
footer a{color:var(--ice-deep)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important; animation:none!important}
}
@media (max-width:640px){
  .hero{padding:132px 0 84px}
  .two{grid-template-columns:1fr}
  .fin{flex-direction:column}
  .fin div:last-child{text-align:left!important}
}

/* ---------- travel between stations ---------- */
/* Sits above the page content, not below it: the page swaps underneath this
   at peak opacity, so the change itself is never seen. Below the nav, which
   stays put and keeps the visitor oriented. */
.scene__flash{
  position:fixed; inset:0; z-index:40; opacity:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 55%, #ffffff 0%, rgba(186,230,253,.92) 38%, rgba(56,189,248,.35) 70%, transparent 100%),
    linear-gradient(0deg, rgba(125,211,252,.55), rgba(255,255,255,.75));
  will-change:opacity;
}
:root[data-theme="light"] .scene__flash,
:root:not([data-theme="dark"]) .scene__flash{ mix-blend-mode:normal }

/* current page in the nav */
.nav__links a.is-here{ color:var(--ink) }
.nav__links a.is-here::after{ right:0 }

/* page intro, used on the three inner pages */
.page{ padding:170px 0 clamp(70px,8vw,104px); position:relative; z-index:1; background:transparent }
.page h1{ font-size:clamp(40px,6.6vw,76px); margin:0; max-width:17ch }
.page__sub{ margin:28px 0 0; max-width:52ch; font-size:18px; color:var(--ink-2); line-height:1.65 }
.page__act{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px }

@media (prefers-reduced-motion:reduce){ .scene__flash{ display:none } }

/* ---------- prose inside editorial rows ---------- */
.row__b p{ margin:0 0 14px; color:var(--ink-2); font-size:17px; max-width:62ch }
.row__b p:last-child{ margin-bottom:0 }
.ul{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px }
.ul li{ position:relative; padding-left:20px; color:var(--ink-2); font-size:16px; max-width:60ch }
.ul li::before{
  content:""; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--ice);
}
.prose{ max-width:64ch }
.prose p{ margin:0 0 16px; color:var(--ink-2); font-size:17.5px }
.prose p:last-child{ margin-bottom:0 }

/* ---------- the film ---------- */
/* The poster frame is painted by CSS before any JavaScript runs, and stays put
   if JavaScript never runs at all. The canvas draws over it once frames load. */
.scene{ background-size:cover; background-position:center; background-repeat:no-repeat }
.scene canvas{ display:block; width:100%; height:100% }

/* The router moves focus to the new page's heading so screen reader and
   keyboard users are not stranded on the old content. That target is not
   an interactive control, so it should not paint a focus ring for someone
   who arrived by clicking. Real controls keep theirs. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible{ outline:none }

/* ---------- legibility over film ----------
   Type now sits over real footage rather than a controlled gradient, so the
   nav and the text column need their own scrims. Without these, a nav link
   or a line of body copy lands on a lit ice wall and disappears. */
.nav::before{
  content:""; position:absolute; inset:0 0 -52px 0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--void) 88%, transparent) 0%,
    color-mix(in srgb, var(--void) 55%, transparent) 52%,
    transparent 100%);
}
/* the reading column keeps its own ground, weighted to the side the type sits on */
.scene__veil{
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--void) 86%, transparent) 0%,
      color-mix(in srgb, var(--void) 62%, transparent) 38%,
      transparent 72%),
    radial-gradient(120% 90% at 10% 46%,
      color-mix(in srgb, var(--void) 70%, transparent) 0%, transparent 62%);
}

/* Measured at 4.19:1 over the surface footage, short of the 4.5 that 14px text
   needs. --muted is fine on solid panels; over film this line needs more. */
.hero__by{ color:var(--ink-2) }