@font-face{font-family:"Schibsted Grotesk"; src:url("../fonts/schibsted-grotesk.woff2") format("woff2"); font-weight:400 900; font-style:normal; font-display:swap}
@font-face{font-family:"Public Sans"; src:url("../fonts/public-sans.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap}
@font-face{font-family:"Public Sans"; src:url("../fonts/public-sans-italic.woff2") format("woff2"); font-weight:100 900; font-style:italic; font-display:swap}
@font-face{font-family:"IBM Plex Mono"; src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"IBM Plex Mono"; src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap}

/* Layout: cinematic full-bleed night hero, then alternating light editorial bands and deep-navy bands; 1240px shell; display grotesk + quiet sans + mono labels */
:root{
  --bg:#fbfcfd;
  --bg-2:#f0f4f8;
  --card:#ffffff;
  --fg:#0f1925;
  --fg-2:#2b3b4e;
  --muted:#5a6a7c;
  --line:#dce4ec;
  --line-2:#c7d3df;
  --accent:#2d5d8c;
  --accent-2:#8fb6dc;
  --accent-soft:#e5eef7;
  --on-accent:#ffffff;
  --gold:#c49a3a;
  --night-0:#081321;
  --night-1:#0b1726;
  --night-fg:#eef3f8;
  --night-muted:#9fb2c6;
  --night-line:rgba(238,243,248,.13);
  --lk-a:#2d5d8c; --lk-b:#8fb6dc; --lk-c:#668aad; --lk-t:#2d5d8c;
  --display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.8,.2,1);
  --shadow:0 30px 70px -36px rgba(12,28,48,.38);
  --shadow-sm:0 10px 30px -18px rgba(12,28,48,.3);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a121c; --bg-2:#0e1823; --card:#121e2b; --fg:#e8eef5; --fg-2:#c3d0dd; --muted:#91a3b6;
    --line:#1d2b3b; --line-2:#2a3b4f; --accent:#7eaad6; --accent-2:#a9c9e6; --accent-soft:#14263a; --on-accent:#08111b;
    --gold:#d8b153; --shadow:0 30px 70px -36px rgba(0,0,0,.75); --shadow-sm:0 10px 30px -18px rgba(0,0,0,.6);
    --lk-a:#5f92c4; --lk-b:#a9c9e6; --lk-c:#86a9cb; --lk-t:#dde8f3;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a121c; --bg-2:#0e1823; --card:#121e2b; --fg:#e8eef5; --fg-2:#c3d0dd; --muted:#91a3b6;
  --line:#1d2b3b; --line-2:#2a3b4f; --accent:#7eaad6; --accent-2:#a9c9e6; --accent-soft:#14263a; --on-accent:#08111b;
  --gold:#d8b153; --shadow:0 30px 70px -36px rgba(0,0,0,.75); --shadow-sm:0 10px 30px -18px rgba(0,0,0,.6);
  --lk-a:#5f92c4; --lk-b:#a9c9e6; --lk-c:#86a9cb; --lk-t:#dde8f3;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--display); margin:0; font-weight:700; line-height:1.06; letter-spacing:-.022em; text-wrap:balance}
p{margin:0; text-wrap:pretty}
a{color:inherit; text-decoration:none}
button{font:inherit}
img,svg{max-width:100%}
.shell{width:100%; max-width:1240px; margin-inline:auto; padding-inline:clamp(20px,4vw,48px)}
section{scroll-margin-top:64px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.hero :focus-visible,.night :focus-visible,.site-footer :focus-visible,.mobile-menu :focus-visible,.site-header.on-hero :focus-visible{outline-color:#e2bb5f}
.skip{position:fixed; left:16px; top:-64px; z-index:100; background:var(--accent); color:var(--on-accent); padding:10px 16px; border-radius:10px; font-weight:600; transition:top .2s}
.skip:focus{top:16px}

/* labels & shared type */
.label{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:22px}
.label::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none}
.night .label{color:var(--night-muted)}
.sec-head h2{font-size:clamp(34px,4.6vw,64px); max-width:16ch}
.lede{margin-top:22px; font-size:clamp(17px,1.5vw,20px); color:var(--muted); max-width:54ch}
.display{font-size:clamp(38px,5.6vw,80px); letter-spacing:-.032em; line-height:1.02}
@media (min-width:900px){
  .sec-head.split{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); column-gap:clamp(40px,6vw,96px); align-items:end}
  .sec-head.split .label{grid-column:1/-1; justify-self:start}
  .sec-head.split .lede{margin-top:0; padding-bottom:.35em}
}

/* buttons & links */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:16px; line-height:1; padding:17px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:background-color .3s, color .3s, box-shadow .3s, translate .35s var(--ease)}
.btn svg{width:16px; height:16px; flex:none; transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:hover{translate:0 -1px}
.btn-light{background:#f4f7fb; color:#0b1726; box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}
.btn-light:hover{background:#ffffff}
.btn-primary{background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-sm)}
.btn-primary:hover{filter:brightness(1.08)}
.link-u{display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; font-size:16px; padding-block:6px; background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat; transition:background-size .45s var(--ease)}
.link-u:hover{background-size:0 1.5px; background-position:100% 100%}
.link-u svg{width:15px; height:15px; transition:transform .35s var(--ease)}
.link-u:hover svg{transform:translateX(4px)}

/* ---------------- header ---------------- */
.site-header{position:fixed; top:0; left:0; right:0; z-index:60; padding-top:env(safe-area-inset-top,0px); border-bottom:1px solid transparent; transition:background-color .45s var(--ease), border-color .45s, translate .55s var(--ease); animation:headerIn 1s var(--ease) .15s both}
@keyframes headerIn{from{opacity:0; transform:translateY(-16px)} to{opacity:1; transform:none}}
.site-header.is-solid{background:color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-bottom-color:var(--line)}
.site-header.is-hidden{translate:0 -110%}
.nav{display:flex; align-items:center; gap:30px; height:78px}
.brand{display:flex; align-items:center; flex:none; border-radius:8px}
.lockup{display:block; height:44px; width:auto}
.lk-a{fill:var(--lk-a)} .lk-b{fill:var(--lk-b)} .lk-c{fill:var(--lk-c)} .lk-t{fill:var(--lk-t)}
.lockup path{transition:fill .45s var(--ease)}
.nav-links{display:flex; gap:32px; margin-left:auto}
.nav-links a{position:relative; font-size:15px; font-weight:500; color:var(--fg-2); padding-block:6px; transition:color .3s}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease)}
.nav-links a:hover{color:var(--fg)}
.nav-links a:hover::after{transform:scaleX(1); transform-origin:left}
.nav-cta{display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; font-size:14.5px; padding:12px 20px; border-radius:999px; background:var(--accent); color:var(--on-accent); transition:background-color .35s, color .35s}
.nav-cta svg{width:15px; height:15px; transition:transform .35s var(--ease)}
.nav-cta:hover svg{transform:translateX(3px)}
.menu-btn{display:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); background:transparent; color:var(--fg); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:6px; transition:border-color .35s, color .35s}
.menu-btn span{display:block; width:18px; height:1.6px; background:currentColor; border-radius:2px; transition:transform .45s var(--ease)}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.8px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.8px) rotate(-45deg)}
.site-header.on-hero,.menu-open .site-header{--lk-a:#6a9cce; --lk-b:#b5d1ea; --lk-c:#8fb1d2; --lk-t:#f3f7fb}
.site-header.on-hero .nav-links a{color:rgba(240,245,250,.84)}
.site-header.on-hero .nav-links a:hover{color:#fff}
.site-header.on-hero .nav-cta{background:#f4f7fb; color:#0b1726}
.site-header.on-hero .menu-btn,.menu-open .menu-btn{color:#fff; border-color:rgba(255,255,255,.32)}
.menu-open .site-header{background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; translate:none}
@media (max-width:960px){ .nav-links{display:none} .nav-cta{margin-left:auto} .menu-btn{display:inline-flex} .nav{gap:14px} }
@media (max-width:560px){ .nav-cta{display:none} .menu-btn{margin-left:auto} .lockup{height:38px} .nav{height:68px} }

/* mobile menu */
.mobile-menu{position:fixed; inset:0; z-index:55; background:var(--night-1); color:var(--night-fg); display:flex; flex-direction:column; justify-content:space-between; gap:32px; padding:calc(108px + env(safe-area-inset-top,0px)) clamp(20px,6vw,48px) calc(32px + env(safe-area-inset-bottom,0px)); opacity:0; transition:opacity .45s var(--ease); overflow-y:auto}
.mobile-menu::before{content:""; position:absolute; inset:0; background:radial-gradient(70% 50% at 90% 10%, rgba(45,93,140,.45), transparent 70%); pointer-events:none}
.mobile-menu.is-open{opacity:1}
.mobile-menu nav{position:relative; display:flex; flex-direction:column}
.mobile-menu nav a{font-family:var(--display); font-weight:700; font-size:clamp(34px,9vw,48px); letter-spacing:-.025em; line-height:1.15; padding-block:8px; border-bottom:1px solid var(--night-line); opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease), transform .55s var(--ease)}
.mobile-menu.is-open nav a{opacity:1; transform:none}
.mobile-menu.is-open nav a:nth-child(2){transition-delay:.05s}
.mobile-menu.is-open nav a:nth-child(3){transition-delay:.1s}
.mobile-menu.is-open nav a:nth-child(4){transition-delay:.15s}
.mobile-menu.is-open nav a:nth-child(5){transition-delay:.2s}
.mobile-menu.is-open nav a:nth-child(6){transition-delay:.25s}
.mm-foot{position:relative; font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--night-muted); display:grid; gap:6px}
html.menu-open{overflow:hidden}

/* ---------------- hero ---------------- */
.hero{position:relative; isolation:isolate; overflow:hidden; color:#f4f7fb; --rz:clamp(210px,30vh,340px);
  min-height:clamp(640px,100vh,1040px); min-height:clamp(640px,100svh,1040px);
  display:flex; flex-direction:column; justify-content:center;
  padding-top:112px; padding-bottom:calc(var(--rz) + 36px);
  background:linear-gradient(180deg,#040a14 0%,#071425 28%,#10263f 58%,#1f4064 84%,#27507a 100%)}
.rz-probe{position:absolute; left:0; top:0; width:1px; height:var(--rz); visibility:hidden; pointer-events:none}
.scene{position:absolute; inset:0; z-index:-1; pointer-events:none}
.scene .layer,.scene .stars{position:absolute; inset:0; width:100%; height:100%; will-change:translate}
.scene .layer svg{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible}
.stars circle{fill:#e9f1fa}
.stars .tw{animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.12} to{opacity:.95}}
.stars{animation:fadeIn 2.6s ease .2s both}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.moon{position:absolute; left:calc(var(--mx,78%) - var(--mr,80px)); top:calc(var(--my,50%) - var(--mr,80px)); width:calc(var(--mr,80px) * 2); height:calc(var(--mr,80px) * 2); will-change:translate; animation:moonIn 2.6s var(--ease) .15s both}
@keyframes moonIn{from{opacity:0; transform:translateY(46%)} to{opacity:1; transform:none}}
.moon-glow{position:absolute; inset:-230%; border-radius:50%; background:radial-gradient(circle, rgba(236,196,109,.36) 0%, rgba(236,196,109,.16) 17%, rgba(236,196,109,.06) 35%, transparent 60%); animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(.93); opacity:.85} to{transform:scale(1.06); opacity:1}}
.moon-disc{position:absolute; inset:0; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 34% 30%, #fae6ac 0%, #ecc670 38%, #d7aa4a 72%, #bd8f35 100%); box-shadow:0 0 36px rgba(236,196,109,.55), 0 0 110px rgba(236,196,109,.22), inset -12px -16px 34px rgba(110,70,15,.30)}
.moon-disc::before{content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 62% 58%, rgba(160,110,30,.10) 0 13%, transparent 15%), radial-gradient(circle at 40% 68%, rgba(160,110,30,.07) 0 8%, transparent 10%), radial-gradient(circle at 58% 30%, rgba(160,110,30,.06) 0 6%, transparent 8%); filter:blur(4px)}
.mist{position:absolute; left:-25%; right:-25%; top:var(--mist-y,62%); height:calc(var(--rz) * .55); translate:0 0; transform:translateY(-50%); background:radial-gradient(42% 46% at 28% 52%, rgba(196,216,238,.10), transparent 72%), radial-gradient(36% 40% at 70% 48%, rgba(196,216,238,.08), transparent 72%); filter:blur(10px); will-change:translate; animation:drift 46s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(-4%,-50%)} to{transform:translate(4%,-50%)}}
.scene .layer{animation:layerIn 1.6s var(--ease) both; animation-delay:calc(.08s + var(--i) * .09s)}
@keyframes layerIn{from{transform:translateY(80px)} to{transform:none}}
.grain{position:absolute; inset:0; background-image:var(--noise); background-size:180px; opacity:.09; mix-blend-mode:overlay}
.hero-inner{position:relative; will-change:opacity}
.hero-title{font-size:clamp(40px,5.6vw,86px); font-weight:700; letter-spacing:-.034em; line-height:1.02; max-width:12.6em}
.h-line{display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em}
.h-line > span{display:block; animation:lineUp 1.2s var(--ease) both; animation-delay:calc(.3s + var(--d) * .12s)}
.h-line em{font-style:normal; color:#a9c9e6}
@keyframes lineUp{from{transform:translateY(110%)} to{transform:none}}
.hero-sub{margin-top:28px; max-width:47ch; font-size:clamp(17px,1.45vw,20px); line-height:1.6; color:#b7c7d8; animation:fadeUp 1.05s var(--ease) .62s both}
.hero-actions{margin-top:40px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 30px; animation:fadeUp 1.05s var(--ease) .78s both}
.hero-actions .link-u{color:#e9f0f7}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.scroll-cue{position:absolute; z-index:1; bottom:26px; left:max(clamp(20px,4vw,48px), calc((100% - 1240px) / 2 + clamp(20px,4vw,48px)))}
.cue-in{display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(233,240,247,.62); animation:fadeUp 1s var(--ease) 1.3s both}
.cue-in i{position:relative; width:52px; height:1px; background:rgba(233,240,247,.22); overflow:hidden}
.cue-in i::after{content:""; position:absolute; inset:0; background:#e2bb5f; transform:translateX(-100%); animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(102%)}}
@media (max-width:699px){
  .hero{justify-content:flex-start; padding-top:126px; padding-bottom:calc(var(--rz) * 1.74)}
  .hero-actions{gap:14px 22px}
  .hero-actions .btn{padding:16px 22px}
}

/* ---------------- reveal (scroll-linked; visible without JS) ---------------- */
.rv{opacity:var(--p,1); transform:translate3d(0, calc((1 - var(--p,1)) * 46px), 0)}

/* ---------------- intro statement ---------------- */
.intro{padding-block:clamp(96px,12vw,176px) clamp(80px,9vw,128px)}
.statement{text-wrap:pretty; font-family:var(--display); font-weight:600; font-size:clamp(28px,3.5vw,52px); line-height:1.17; letter-spacing:-.024em; max-width:22.5em; color:var(--fg)}
.statement .w{transition:opacity .25s linear}
.pillars{margin-top:clamp(56px,7vw,100px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,48px)}
.pillar{position:relative; padding-top:28px}
.pillar::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--line-2)}
.pillar::after{content:""; position:absolute; top:-0.5px; left:0; width:64px; height:2px; background:var(--gold); transform-origin:left; transform:scaleX(var(--p,1))}
.pillar h3{font-size:22px; letter-spacing:-.012em}
.pillar p{margin-top:10px; color:var(--muted); font-size:16.5px; max-width:34ch}
@media (max-width:820px){ .pillars{grid-template-columns:1fr; gap:36px} }

/* ---------------- marquee ---------------- */
.marquee{padding-block:30px 44px; border-block:1px solid var(--line); overflow:hidden}
.marquee .label{margin-bottom:20px}
.mq-viewport{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex; width:max-content; animation:marquee 52s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-row{display:flex; align-items:center; list-style:none; margin:0; padding:0}
.mq-row li{display:flex; align-items:center; white-space:nowrap; font-family:var(--display); font-weight:600; font-size:clamp(22px,2.5vw,34px); letter-spacing:-.015em; color:var(--fg-2); opacity:.5; transition:opacity .3s}
.mq-row li:hover{opacity:1}
.mq-row li::after{content:""; width:8px; height:8px; margin-inline:clamp(26px,3.4vw,50px); background:var(--gold); transform:rotate(45deg); opacity:.9}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------------- services story ---------------- */
.services{padding-block:clamp(96px,12vw,170px) clamp(64px,8vw,110px)}
.story{margin-top:clamp(48px,6vw,84px); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(40px,6vw,100px); align-items:start}
.story-visual{position:sticky; top:max(100px, calc(50vh - min(34vh, 290px)))}
.story-frame{position:relative; height:min(68vh,580px); aspect-ratio:4/5; max-width:100%; border-radius:26px; overflow:hidden; background:#0b1726; box-shadow:0 44px 90px -44px rgba(8,20,36,.7)}
.story-frame::after{content:""; position:absolute; inset:0; background-image:var(--noise); background-size:180px; opacity:.08; mix-blend-mode:overlay; pointer-events:none; z-index:3}
.art{position:absolute; inset:0; opacity:0; transform:scale(1.05); transition:opacity .85s var(--ease), transform 1.3s var(--ease)}
.art.is-active{opacity:1; transform:none}
.art svg,.art-inline svg{display:block; width:100%; height:100%}
.story-bars{position:absolute; z-index:4; top:22px; left:22px; right:22px; display:flex; gap:6px}
.story-bars i{position:relative; flex:1; height:2px; border-radius:2px; background:rgba(255,255,255,.2); overflow:hidden}
.story-bars i::after{content:""; position:absolute; inset:0; background:#e2bb5f; transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease)}
.story-bars i.on::after{transform:scaleX(1)}
.story-cap{position:absolute; z-index:4; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:flex-end; padding:70px 24px 22px; background:linear-gradient(180deg,transparent,rgba(5,12,22,.78)); font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:#e9f0f7}
.cap-count{color:rgba(233,240,247,.6)}
.story-steps{display:flex; flex-direction:column}
.story-step{min-height:min(66vh,640px); display:flex; flex-direction:column; justify-content:center; padding-block:44px; border-top:1px solid var(--line); opacity:.32; transition:opacity .7s var(--ease)}
.story-step:first-child{border-top:0}
.story-step.is-active{opacity:1}
.step-label{display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.step-label .num{color:var(--muted)}
.story-step h3{margin-top:18px; font-size:clamp(28px,3vw,44px); letter-spacing:-.028em}
.story-step .desc{margin-top:16px; font-size:18px; color:var(--muted); max-width:44ch}
.ticks{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:13px}
.ticks li{position:relative; padding-left:32px; font-size:16px; color:var(--fg-2)}
.ticks li::before{content:""; position:absolute; left:0; top:3px; width:20px; height:20px; border-radius:50%; background:var(--accent-soft)}
.ticks li::after{content:""; position:absolute; left:5px; top:8px; width:10px; height:10px; background:var(--accent); -webkit-mask:var(--check) center/contain no-repeat; mask:var(--check) center/contain no-repeat}
.art-inline{display:none}
@media (max-width:959px){
  .story{grid-template-columns:1fr}
  .story-visual{display:none}
  .story-step{opacity:1; min-height:0; padding-block:40px}
  .art-inline{display:block; position:relative; aspect-ratio:4/3; border-radius:22px; overflow:hidden; margin-bottom:28px; background:#0b1726}
  .art-inline::after{content:""; position:absolute; inset:0; background-image:var(--noise); background-size:180px; opacity:.08; mix-blend-mode:overlay}
}

/* ---------------- why us (night band) ---------------- */
.night{background:var(--night-1); color:var(--night-fg)}
.why{position:relative; isolation:isolate; overflow:hidden; --wz:clamp(240px,26vw,420px); padding-block:clamp(110px,13vw,190px) calc(var(--wz) + 56px); background:linear-gradient(180deg,#050c17 0%,#081628 38%,#0f2440 74%,#18355a 100%)}
.w-probe{position:absolute; left:0; top:0; width:1px; height:var(--wz); visibility:hidden; pointer-events:none}
.why-scene{position:absolute; inset:0; z-index:-1; pointer-events:none}
.why-scene::after{content:""; position:absolute; inset:0; background-image:var(--noise); background-size:180px; opacity:.08; mix-blend-mode:overlay}
.w-layer,.w-stars{position:absolute; inset:0; width:100%; height:100%; will-change:translate}
.w-layer svg{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible}
.w-stars circle{fill:#e9f1fa}
.w-stars .tw{animation:twinkle 4s ease-in-out infinite alternate}
.w-glow{position:absolute; left:calc(var(--gx,70%) - var(--gr,320px)); top:calc(var(--gy,70%) - var(--gr,320px)); width:calc(var(--gr,320px) * 2); height:calc(var(--gr,320px) * 2); border-radius:50%; background:radial-gradient(circle, rgba(226,187,95,.22) 0%, rgba(226,187,95,.09) 26%, rgba(226,187,95,.03) 46%, transparent 64%); will-change:translate}
.w-summit{opacity:0; transition:opacity .7s var(--ease)}
.why.summit .w-summit{opacity:1}
.w-flag{transform-box:fill-box; transform-origin:50% 100%; transform:scaleY(0); transition:transform .9s var(--ease) .2s}
.why.summit .w-flag{transform:scaleY(1)}
.w-pulse{transform-box:fill-box; transform-origin:center; animation:wpulse 2.8s ease-out infinite}
@keyframes wpulse{from{transform:scale(.45); opacity:.9} to{transform:scale(2.1); opacity:0}}
.why-head{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(32px,6vw,100px); align-items:end}
.why-head h2{max-width:11.5em}
.why-copy p{color:var(--night-muted); font-size:18px; max-width:46ch}
.why-copy p + p{margin-top:16px}
.why-grid{margin-top:clamp(64px,8vw,112px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,32px)}
.why-item{padding:32px 30px 34px; border:1px solid var(--night-line); border-radius:22px; background:rgba(255,255,255,.045); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:border-color .45s, background-color .45s, translate .55s var(--ease)}
.why-item:hover{border-color:rgba(226,187,95,.45); background:rgba(255,255,255,.06); translate:0 -5px}
.why-icon{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:#e2bb5f; background:rgba(226,187,95,.1); border:1px solid rgba(226,187,95,.25)}
.why-icon svg{width:22px; height:22px}
.why-item h3{margin-top:26px; font-size:21px; letter-spacing:-.012em}
.why-item p{margin-top:12px; color:var(--night-muted); font-size:16px}
@media (max-width:900px){ .why-head{grid-template-columns:1fr; align-items:start} .why-grid{grid-template-columns:1fr} }

/* ---------------- process ---------------- */
.process{padding-block:clamp(100px,12vw,176px)}
.timeline{position:relative; margin-top:clamp(56px,7vw,100px); --prog:0}
.tl-track{position:absolute; top:28px; left:28px; right:28px; height:2px; background:var(--line)}
.tl-fill{position:absolute; inset:0; background:linear-gradient(90deg,var(--accent),var(--gold)); transform-origin:left; transform:scaleX(var(--prog))}
.tl-steps{position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,64px)}
.tl-node{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:14px; font-weight:500; color:var(--muted); background:var(--bg); border:1.5px solid var(--line-2); transition:background-color .6s var(--ease), color .6s, border-color .6s, box-shadow .6s var(--ease)}
.tl-step.on .tl-node{background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:0 0 0 9px var(--accent-soft)}
.tl-step h3{margin-top:30px; font-size:clamp(23px,2.3vw,30px)}
.tl-step .desc{margin-top:12px; color:var(--muted); max-width:34ch}
.tl-get{margin-top:22px; padding-top:18px; border-top:1px dashed var(--line-2); font-size:15.5px; color:var(--fg-2)}
.tl-get span{display:block; margin-bottom:4px; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
@media (max-width:820px){
  .tl-steps{grid-template-columns:1fr; gap:48px; padding-left:84px}
  .tl-track{top:0; bottom:0; left:27px; right:auto; width:2px; height:auto}
  .tl-fill{transform-origin:top; transform:scaleY(var(--prog))}
  .tl-step{position:relative}
  .tl-node{position:absolute; left:-84px; top:-4px}
  .tl-step h3{margin-top:6px}
}

/* ---------------- engagement models ---------------- */
.models{padding-block:clamp(100px,12vw,170px); background:var(--bg-2); border-block:1px solid var(--line)}
.tabs{position:relative; margin-top:44px; display:inline-flex; gap:4px; padding:6px; max-width:100%; overflow-x:auto; border-radius:999px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm); scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative; z-index:1; flex:none; font-family:var(--display); font-weight:600; font-size:15.5px; padding:13px 24px; border:0; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; transition:color .4s}
.tab:hover{color:var(--fg)}
.tab[aria-selected="true"]{color:var(--on-accent)}
.tabs:not(.ready) .tab[aria-selected="true"]{background:var(--accent)}
.tab-ind{position:absolute; z-index:0; top:6px; bottom:6px; left:0; width:0; border-radius:999px; background:var(--accent); transition:transform .55s var(--ease), width .55s var(--ease)}
.tab-panels{margin-top:26px}
.tab-panel{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,84px); padding:clamp(28px,4.2vw,60px); border-radius:30px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); animation:panelIn .65s var(--ease) both}
@keyframes panelIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.tp-main h3{font-size:clamp(30px,3.3vw,46px); letter-spacing:-.03em}
.tp-main p{margin-top:16px; font-size:18px; color:var(--muted); max-width:42ch}
.tp-main .link-u{margin-top:30px; color:var(--accent)}
.specs{margin:0; display:grid; align-content:start}
.specs > div{display:grid; grid-template-columns:118px minmax(0,1fr); gap:18px; padding-block:17px; border-top:1px solid var(--line)}
.specs > div:last-child{border-bottom:1px solid var(--line)}
.specs dt{padding-top:3px; font-family:var(--mono); font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.specs dd{margin:0; font-size:16.5px}
@media (max-width:860px){ .tab-panel{grid-template-columns:1fr} }
@media (max-width:480px){ .tab{padding:12px 16px; font-size:14.5px} .specs > div{grid-template-columns:1fr; gap:4px} }

/* ---------------- faq ---------------- */
.faq{padding-block:clamp(100px,12vw,170px)}
.faq-grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(40px,6vw,104px); align-items:start}
.faq-side{position:sticky; top:124px}
.faq-side h2{font-size:clamp(34px,4.2vw,58px)}
.faq-note{margin-top:22px; color:var(--muted); max-width:30ch}
.faq-note strong{color:var(--fg); font-weight:600; word-break:break-word}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item h3{font-size:inherit; letter-spacing:0; line-height:inherit}
.faq-q{width:100%; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:28px 0; background:none; border:0; text-align:left; cursor:pointer; color:var(--fg); font-family:var(--display); font-weight:600; font-size:clamp(18px,1.7vw,22px); letter-spacing:-.012em; line-height:1.3}
.pm{position:relative; flex:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2); transition:background-color .4s, border-color .4s}
.pm::before,.pm::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.6px; margin:-.8px 0 0 -6px; background:var(--fg); border-radius:2px; transition:transform .5s var(--ease), background-color .4s}
.pm::after{transform:rotate(90deg)}
.faq-q:hover .pm{border-color:var(--accent)}
.faq-item.is-open .pm{background:var(--accent); border-color:var(--accent)}
.faq-item.is-open .pm::before,.faq-item.is-open .pm::after{background:var(--on-accent)}
.faq-item.is-open .pm::after{transform:rotate(0deg)}
.faq-a{display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .55s var(--ease), visibility 0s linear .55s}
.faq-item.is-open .faq-a{grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .55s var(--ease), visibility 0s}
.faq-a > div{overflow:hidden; min-height:0}
.faq-a p{padding:0 64px 30px 0; color:var(--muted); font-size:17px; max-width:62ch}
@media (max-width:900px){ .faq-grid{grid-template-columns:1fr} .faq-side{position:static} .faq-a p{padding-right:0} }

/* ---------------- contact ---------------- */
.contact{position:relative; isolation:isolate; overflow:hidden; --cr:clamp(130px,15vw,220px); padding-block:clamp(110px,12vw,176px) calc(var(--cr) + 48px); background:radial-gradient(60% 55% at 88% 0%, rgba(45,93,140,.42), transparent 70%), var(--night-1)}
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(40px,6vw,100px); align-items:start}
.contact-copy .c-intro{margin-top:24px; color:var(--night-muted); font-size:18px; max-width:42ch}
.contact h2.display{font-size:clamp(38px,4.2vw,60px)}
.c-list{list-style:none; margin:44px 0 0; padding:0; display:grid}
.c-list li{display:grid; grid-template-columns:118px minmax(0,1fr); gap:18px; padding-block:17px; border-top:1px solid var(--night-line); font-size:16.5px}
.c-list li:last-child{border-bottom:1px solid var(--night-line)}
.c-list li > span:last-child{word-break:break-word}
.mono-k{padding-top:3px; font-family:var(--mono); font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--night-muted)}
.form-card{background:var(--card); color:var(--fg); border-radius:30px; padding:clamp(26px,3.4vw,46px); box-shadow:0 50px 100px -50px rgba(0,0,0,.75)}
.form-card h3{font-size:24px; letter-spacing:-.02em}
.form-card .form-intro{margin-top:8px; color:var(--muted); font-size:15.5px}
.form-card form{margin-top:26px; display:grid; gap:18px}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:grid; gap:8px; min-width:0}
.field label,.chips legend{font-size:14px; font-weight:600; color:var(--fg)}
.field label .opt{font-weight:400; color:var(--muted)}
.field input,.field textarea{width:100%; font:inherit; font-size:16px; color:var(--fg); background:var(--bg); border:1px solid var(--line-2); border-radius:14px; padding:14px 16px; transition:border-color .25s, box-shadow .25s}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent)}
.field textarea{min-height:128px; resize:vertical}
.chips{border:0; margin:0; padding:0; min-width:0}
.chips legend{padding:0; margin-bottom:10px}
.chip-row{display:flex; flex-wrap:wrap; gap:9px}
.chip{position:relative}
.chip input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.chip span{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:1px solid var(--line-2); font-size:14.5px; font-weight:500; cursor:pointer; user-select:none; transition:border-color .25s, background-color .25s, color .25s}
.chip span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--line-2); transition:background-color .25s}
.chip:hover span{border-color:var(--accent)}
.chip input:checked + span{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.chip input:checked + span::before{background:var(--accent)}
.chip input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.form-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px; margin-top:4px}
.form-note{font-size:13.5px; color:var(--muted)}
.form-note a{text-decoration:underline; text-underline-offset:2px}
.form-ok{padding:16px 18px; border-radius:14px; background:var(--accent-soft); border:1px solid var(--line); font-size:15px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.contact-ridges{position:absolute; left:0; right:0; bottom:0; height:var(--cr); z-index:-1; pointer-events:none}
.contact-ridges .cl{position:absolute; inset:0}
.contact-ridges svg{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible}
.c-moon{position:absolute; left:calc(var(--mx,20%) - var(--mr,36px)); top:calc(var(--my,40%) - var(--mr,36px)); width:calc(var(--mr,36px) * 2); height:calc(var(--mr,36px) * 2); border-radius:50%; background:radial-gradient(circle at 34% 30%, #f6dd98 0%, #e2bb5f 50%, #c39437 100%); box-shadow:0 0 30px rgba(226,187,95,.45), 0 0 90px rgba(226,187,95,.18)}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }
@media (max-width:560px){ .frow{grid-template-columns:1fr} .c-list li{grid-template-columns:1fr; gap:4px} }

/* ---------------- footer ---------------- */
.site-footer{background:var(--night-0); color:var(--night-fg); padding-block:clamp(40px,5vw,64px) 36px; --lk-a:#6a9cce; --lk-b:#b5d1ea; --lk-c:#8fb1d2; --lk-t:#f3f7fb}
.foot-top{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:40px}
.foot-brand .lockup{height:52px}
.foot-brand p{margin-top:22px; color:var(--night-muted); font-size:15px; max-width:32ch}
.foot-col h4{margin-bottom:18px; font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--night-muted)}
.foot-col ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.foot-col a{font-size:15px; opacity:.86; transition:opacity .25s}
.foot-col a:hover{opacity:1}
.foot-facts{display:grid; gap:14px; font-size:14px; color:var(--night-muted)}
.foot-facts strong{display:block; color:var(--night-fg); font-weight:600; font-size:14.5px}
.foot-facts span{word-break:break-word}
.foot-bottom{margin-top:56px; padding-top:24px; border-top:1px solid var(--night-line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 24px; font-size:13.5px; color:var(--night-muted)}
.to-top{display:inline-flex; align-items:center; gap:8px; color:var(--night-fg)}
.to-top svg{width:14px; height:14px; transition:transform .35s var(--ease)}
.to-top:hover svg{transform:translateY(-3px)}
@media (max-width:900px){ .foot-top{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} }
@media (max-width:520px){ .foot-top{grid-template-columns:1fr} }

/* ---------------- legal ---------------- */
.legal{padding-block:150px 110px}
.legal-body{max-width:68ch}
.legal-body h1{font-size:clamp(34px,5vw,58px); letter-spacing:-.03em}
.legal-body .updated{margin-top:14px; font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; color:var(--muted)}
.legal-body h2{margin-top:44px; font-size:21px; letter-spacing:-.012em}
.legal-body p{margin-top:14px}
.legal-body ul{margin:14px 0 0; padding-left:22px}
.legal-body li{margin-top:8px}
.legal-body .link-u{margin-top:56px; color:var(--accent)}

/* ---------------- motion preferences ---------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; animation-delay:0s!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
  .rv{opacity:1!important; transform:none!important}
  .mq-track{flex-wrap:wrap; width:auto; animation:none!important}
  .mq-row[aria-hidden="true"]{display:none}
  .mq-row{flex-wrap:wrap; row-gap:10px}
}
@media print{ .rv{opacity:1!important; transform:none!important} .site-header{position:static} }

/* standalone pages */
html.is-page .site-header{animation:none}
.nf{position:relative; isolation:isolate; overflow:hidden; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding-block:150px calc(clamp(170px,20.8vw,380px) + 56px); color:#f4f7fb; background:linear-gradient(180deg,#040a14 0%,#071425 30%,#10263f 64%,#1f4064 100%)}
.nf .label{color:#9fb2c6}
.nf-copy{margin-top:22px; max-width:46ch; font-size:18px; color:#b7c7d8}
.nf .btn{margin-top:38px}
.nf-ridges{position:absolute; left:0; right:0; bottom:0; height:clamp(170px,20.8vw,380px); z-index:-1}
.nf-ridges svg{display:block; width:100%; height:100%; overflow:visible}