/* OBSCVRA — cosmic blue · white · black */
:root {
  --bg: #02040a;
  --bg-2: #060a18;
  --line: rgba(160, 190, 255, 0.12);
  --line-2: rgba(160, 190, 255, 0.22);
  --blue: #3b6dff;
  --blue-bright: #7fa6ff;
  --white: #f3f6ff;
  --dim: rgba(223, 231, 255, 0.6);
  --faint: rgba(223, 231, 255, 0.34);
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 88px);
  --ease: cubic-bezier(.2, .7, .15, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--bg); color: var(--white);
  font-family: var(--body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.locked { overflow: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--blue); color: #fff; }

.display {
  font-family: var(--display); font-stretch: 125%; font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.98;
}
/* small caps labels (was JetBrains Mono — now Manrope) */
.label {
  font-family: var(--body); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.24em; text-transform: uppercase;
}
.blue { color: var(--blue-bright); }

/* ── brand mark ── */
.brandmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brandmark .word { font-family: var(--display); font-stretch: 125%; font-weight: 800; letter-spacing: 0.32em; font-size: 14px; text-indent: 0.32em; }
.brandmark img { height: 26px; width: auto; }
.brandmark.has-logo .word { display: none; }
.brandmark.has-mark img { height: 30px; filter: drop-shadow(0 0 10px rgba(59, 109, 255, .45)); }
footer .brandmark.has-mark img { height: 40px; }

/* ══ LOADER ═════════════════════════════════════════════ */
#loader { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: grid; place-items: center; transition: opacity 1s var(--ease), visibility 1s; }
#loader.gone { opacity: 0; visibility: hidden; }
#loader .inner { display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 0 16px; text-align: center; }
#loader .brandmark { filter: blur(calc((1 - var(--lp, 0)) * 14px)); opacity: calc(0.25 + var(--lp, 0) * 0.75); }
#loader .brandmark .word { font-size: clamp(22px, 4vw, 40px); }
#loader .brandmark.has-mark { flex-direction: column; gap: 24px; }
/* the mark no longer spins (a flat image turning on Y reads as a card) — it floats and breathes */
#loader .brandmark.has-mark img { height: clamp(76px, 10vw, 124px); animation: float 5s ease-in-out infinite, breathe 5s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes breathe { 0%, 100% { filter: drop-shadow(0 0 14px rgba(59, 109, 255, .35)); } 50% { filter: drop-shadow(0 0 34px rgba(90, 140, 255, .75)); } }
#loader .count { color: var(--dim); }
#loader .count b { color: var(--white); font-weight: 500; }
#loader .bar { width: 200px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
#loader .bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--lp, 0) * 100%); background: var(--blue-bright); }
#loader .enter { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; opacity: 0; transform: translateY(10px); transition: all .8s var(--ease); pointer-events: none; }
#loader.ready .enter { opacity: 1; transform: none; pointer-events: auto; }
#loader.ready .bar, #loader.ready .count { opacity: 0; transition: opacity .5s; }

/* ══ NAV ════════════════════════════════════════════════ */
#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px var(--gutter); transition: background .5s, padding .5s; }
#nav.solid { background: rgba(2, 4, 10, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
#nav .right { display: flex; align-items: center; gap: 14px; }
#sound-toggle { color: var(--dim); display: none; }
#sound-toggle.avail { display: inline-block; }

/* single Menu button → dropdown panel */
.navmenu { position: relative; }
.menu-btn { padding: 0 26px; }
/* ══ LUXURY DROPDOWN — shared by the nav menu and the form dropdowns ══
   Gradient glass panel, roomy sentence-case items, and a navy pill with
   champagne text + gold dot for the selected/current item.
   Prefer blue? set --dd-accent: #cfdcff; --dd-dot: #7fa6ff; */
:root {
  --dd-panel: linear-gradient(180deg, #10152a 0%, #0a0d19 55%, #0f1528 100%);
  --dd-border: rgba(170, 190, 235, .26);
  --dd-pill: linear-gradient(90deg, #1d2c5a 0%, #172250 50%, #121b3d 100%);
  --dd-hover: rgba(40, 60, 130, .28);
  --dd-text: rgba(214, 222, 240, .78);
  --dd-accent: #ead9aa;
  --dd-dot: #f2c46b;
}
.lux-panel {
  padding: 10px; border-radius: 18px;
  background: var(--dd-panel);
  border: 1px solid var(--dd-border);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .4), 0 0 50px -18px rgba(59, 109, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.lux-item {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; border-radius: 12px;
  font-family: var(--body); font-weight: 400; font-size: 16.5px; letter-spacing: .005em; text-transform: none;
  color: var(--dd-text); text-decoration: none; cursor: pointer;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.lux-item:hover, .lux-item.active, .lux-item:focus-visible { background: var(--dd-hover); color: #fff; outline: none; }
.lux-item.selected, .lux-item[aria-selected="true"], .lux-item.current {
  background: var(--dd-pill); color: var(--dd-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px -12px rgba(20, 40, 120, .8);
}
.lux-item.selected::after, .lux-item[aria-selected="true"]::after, .lux-item.current::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-left: auto; border-radius: 50%;
  background: var(--dd-dot); box-shadow: 0 0 10px rgba(242, 196, 107, .7);
}
.lux-item small { margin-left: auto; color: rgba(214, 222, 240, .45); font-size: 13.5px; }
.lux-item:has(small)::after { margin-left: 4px; }

.menu-panel {
  position: absolute; right: 0; top: calc(100% + 12px); width: 290px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: top right;
  transition: opacity .3s ease, transform .45s var(--ease), visibility .45s;
}
.navmenu.open .menu-panel { opacity: 1; visibility: visible; transform: none; }
.menu-panel a em { display: none; }
.menu-panel .menu-cta { margin-top: 8px; justify-content: center; color: #fff; font-weight: 500;
  background: linear-gradient(180deg, #5585ff, #2447d6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 30px -10px rgba(59, 109, 255, .7); }
.menu-panel .menu-cta:hover, .menu-panel .menu-cta:focus-visible { background: linear-gradient(180deg, #6690ff, #2d52e6); color: #fff; }
.menu-panel .menu-cta.current::after { display: none; }


/* stagger the items in as the panel opens */
.menu-panel a { opacity: 0; transform: translateY(-4px); }
.navmenu.open .menu-panel a { opacity: 1; transform: none; transition: background .3s, color .3s, box-shadow .3s, opacity .4s ease, transform .5s var(--ease); }
.navmenu.open .menu-panel a:nth-child(2) { transition-delay: 0s, 0s, 0s, .03s, .03s; }
.navmenu.open .menu-panel a:nth-child(3) { transition-delay: 0s, 0s, 0s, .06s, .06s; }
.navmenu.open .menu-panel a:nth-child(4) { transition-delay: 0s, 0s, 0s, .09s, .09s; }
.navmenu.open .menu-panel a:nth-child(5) { transition-delay: 0s, 0s, 0s, .12s, .12s; }
.navmenu.open .menu-panel a:nth-child(6) { transition-delay: 0s, 0s, 0s, .15s, .15s; }
.navmenu.open .menu-panel a:nth-child(7) { transition-delay: 0s, 0s, 0s, .18s, .18s; }
.navmenu.open .menu-panel a:nth-child(8) { transition-delay: 0s, 0s, 0s, .21s, .21s; }
@media (max-width: 480px) { .menu-panel { width: calc(100vw - 32px); } }

/* ══ BUTTONS — liquid glass ═══════════════════════════════
   A vanilla port of the <LiquidButton> component: the button is a pane of
   glass over whatever is behind it (here, the film), edged by the same stack
   of inset highlights the original builds with Tailwind's shadow utilities.
   The refraction is an SVG displacement filter (#container-glass, in the
   markup) applied to the backdrop where a browser supports it; everywhere
   else a blur + saturate carries the same read. */
.btn {
  --h: 54px;
  --tint: rgba(255, 255, 255, .07);      /* the glass itself */
  --edge: rgba(255, 255, 255, .55);      /* the lit rim */
  --cast: rgba(0, 0, 0, .55);            /* what it throws on the page */
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  height: var(--h); padding: 0 34px; border-radius: 100px;
  font-family: var(--body); font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; color: var(--white);
  border: 0; background: var(--tint);
  backdrop-filter: blur(10px) saturate(1.6);
  -webkit-backdrop-filter: blur(10px) saturate(1.6);
  /* the component's dark-mode shadow stack: two hairline corner catches, a
     soft inner bloom, and a quiet cast underneath */
  box-shadow:
    inset 3px 3px .5px -3.5px rgba(255, 255, 255, .09),
    inset -3px -3px .5px -3.5px var(--edge),
    inset 1px 1px 1px -.5px rgba(255, 255, 255, .6),
    inset -1px -1px 1px -.5px rgba(255, 255, 255, .6),
    inset 0 0 6px 6px rgba(255, 255, 255, .1),
    inset 0 0 2px 2px rgba(255, 255, 255, .06),
    0 2px 6px rgba(0, 0, 0, .3), 0 0 12px var(--cast);
  /* Composed from variables so the magnetic pull (site.js) and the hover swell
     can't overwrite each other. These are --bx/--by, NOT --mx/--my: the plan
     and service cards set --mx/--my as PERCENTAGES for their radial hover
     light, and those inherit — a button reading them would translate by a
     percentage of its own width and fly off the card. */
  transform: translate(var(--bx, 0px), var(--by, 0px)) scale(var(--bs, 1));
  transition: box-shadow .5s var(--ease), transform .45s var(--ease), background .4s, color .4s;
  will-change: transform;
}
/* The component refracts its backdrop with an SVG displacement filter. No
   browser actually renders url() inside backdrop-filter — Chromium parses it
   and then skips it, which would cost us the blur as well — so the texture
   comes from a turbulence grain laid over the glass instead. Same read,
   everywhere, no feature detection. */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity: .18; transition: opacity .4s;
}
.btn:hover::before { opacity: .26; }
.btn:hover { --bs: 1.045; --tint: rgba(255, 255, 255, .12); }
.btn:active { --bs: .985; }
.btn .arr { display: none; }   /* arrows removed */

.btn.primary {                 /* brighter pane — the page's main action */
  --tint: rgba(255, 255, 255, .17);
  --edge: rgba(255, 255, 255, .85);
  --cast: rgba(120, 155, 255, .35);
}
.btn.primary:hover { --tint: rgba(255, 255, 255, .24); }

.btn.glow {                    /* the same glass, tinted cosmic blue */
  --tint: rgba(59, 109, 255, .3);
  --edge: rgba(190, 210, 255, .8);
  --cast: rgba(59, 109, 255, .55);
}
.btn.glow:hover { --tint: rgba(59, 109, 255, .42); }

.btn.small { --h: 44px; padding: 0 26px; font-size: 11px; }
.btn span { pointer-events: none; position: relative; z-index: 1; }

/* ══ FILM ═══════════════════════════════════════════════ */
/* v4 — the film is the background of the WHOLE page: the stage is fixed
   behind every section and the scrollbar scrubs it from the hero to the form.
   #track is now just the hero scene's share of the scroll. */
#track { position: relative; height: 190vh; }
#stage { position: fixed; top: 0; left: 0; height: 100vh; height: 100svh; width: 100%; overflow: hidden; z-index: 0; }
main, footer { position: relative; z-index: 1; }
/* each section darkens the film enough to read over it; --scrim is tuned per
   section in the markup, because the frame under scene 05 and 11 is bright */
.sec::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(2, 4, 10, 0) 0%, rgba(2, 4, 10, var(--scrim, .84)) 14%,
    rgba(2, 4, 10, var(--scrim, .84)) 86%, rgba(2, 4, 10, 0) 100%); }
footer { background: linear-gradient(to bottom, rgba(2, 4, 10, .86), var(--bg) 40%); }
#film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film-video { position: absolute; display: block; max-width: none; object-fit: fill; pointer-events: none; background: #02040a; }
#vignette { position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 55%, rgba(2, 4, 10, 0.7) 100%),
    linear-gradient(to bottom, rgba(2,4,10,.5), transparent 20%, transparent 80%, rgba(2,4,10,.6)); }
/* fades the film to pure black over its last few % so the page below takes over seamlessly */
#fadeout { position: absolute; inset: 0; z-index: 12; background: var(--bg); opacity: 0; pointer-events: none; }

.caption { position: absolute; z-index: 10; opacity: 0; pointer-events: none; will-change: opacity, transform, filter; padding: 0 var(--gutter); }
.caption.live .btn { pointer-events: auto; }
.caption h1, .caption h2, .caption p { text-shadow: 0 2px 30px rgba(2, 4, 10, .85), 0 0 2px rgba(2, 4, 10, .6); }
.cap-left::before, .cap-right::before, .cap-bottom::before, .cap-center::before { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.cap-left::before { inset: -10vh -30vw -10vh -10vw; background: radial-gradient(ellipse 60% 55% at 30% 50%, rgba(2, 4, 10, .8), transparent 72%); }
.cap-right::before { inset: -10vh -10vw -10vh -30vw; background: radial-gradient(ellipse 60% 55% at 70% 50%, rgba(2, 4, 10, .8), transparent 72%); }
.cap-bottom::before { inset: -12vh 0 -9vh; background: radial-gradient(ellipse 60% 70% at 50% 60%, rgba(2, 4, 10, .7), transparent 75%); }
.cap-center::before { inset: 10% 5%; background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(2, 4, 10, .55), transparent 75%); }
.cap-center { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cap-left { left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; max-width: min(820px, 100%); }
.cap-right { right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; max-width: min(820px, 100%); }
.cap-bottom { left: 0; right: 0; bottom: 10vh; display: flex; flex-direction: column; align-items: center; text-align: center; }
.caption .eyebrow { color: var(--blue-bright); margin-bottom: 24px; }
.caption h1 { font-size: clamp(28px, 4vw, 68px); max-width: 22ch; }
.caption h2 { font-size: clamp(26px, 3.8vw, 64px); max-width: 17ch; }
.caption p.sub { margin-top: 22px; color: var(--dim); font-size: clamp(15px, 1.3vw, 19px); max-width: 46ch; line-height: 1.6; }
.cap-center p.sub, .cap-bottom p.sub { margin-left: auto; margin-right: auto; }
.caption .ctas { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }


/* ══ SECTIONS ═══════════════════════════════════════════ */
.sec { position: relative; padding: clamp(90px, 15vh, 170px) var(--gutter); }
.wrap { max-width: 1320px; margin: 0 auto; }
.kicker { color: var(--blue-bright); margin-bottom: 22px; display: flex; align-items: center; gap: 14px; }
.kicker::before { content: ""; width: 28px; height: 1px; background: var(--blue-bright); }
.sec h2.display { font-size: clamp(30px, 5vw, 80px); max-width: 18ch; }
.lead { color: var(--dim); font-size: clamp(15px, 1.25vw, 18px); max-width: 52ch; line-height: 1.7; }
.lead + .lead { margin-top: 14px; }
/* the bottom margin also has to absorb the parallax drift of whatever
   follows, or a tall card can ride up into the heading */
.head { display: grid; grid-template-columns: 1.25fr 1fr; gap: 6vw; align-items: end; margin-bottom: clamp(62px, 8vh, 104px); }
@media (max-width: 900px) { .head { grid-template-columns: 1fr; gap: 22px; } }
.aura::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(40, 80, 230, 0.14), transparent 70%); }

/* the per-section ambient loops are retired in v4 — the film itself now plays
   behind every section, so there is nothing left to loop */

/* the beat line: one line of the film's voice at the top of each section */
.beat { color: var(--blue-bright); font-size: clamp(15px, 1.35vw, 19px); line-height: 1.6; font-style: italic;
  max-width: 46ch; margin: 0 0 26px; opacity: .92; }
.sec .head .beat { margin-bottom: 20px; }

[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].in { opacity: 1; transform: translateY(var(--sy, 0px)); }
/* after the reveal has played, transform belongs to the scroll engine —
   transitioning it would make the parallax lag behind the scroll */
[data-reveal].settled { transition: opacity .6s ease; }
.parallax { transform: translate3d(0, var(--sy, 0px), 0); will-change: transform; }
[data-reveal].parallax { transform: translateY(calc(34px + var(--sy, 0px))); }
[data-reveal].parallax.in { transform: translateY(var(--sy, 0px)); }

/* page scroll progress */
/* the progress bar is the film's timeline: ticked once per scene */
#sprog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 95; pointer-events: none;
  background: rgba(160, 190, 255, .08);
  --scenes: 12;
  background-image: repeating-linear-gradient(to right, rgba(160, 190, 255, .28) 0 1px,
    transparent 1px calc(100% / var(--scenes))); }
#sprog i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--blue), var(--blue-bright)); box-shadow: 0 0 12px rgba(59, 109, 255, .8); }
[data-reveal][data-d="1"] { transition-delay: .08s; }
[data-reveal][data-d="2"] { transition-delay: .16s; }
[data-reveal][data-d="3"] { transition-delay: .24s; }

/* numbered columns (about pillars, why-us) */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.cols.four { grid-template-columns: repeat(4, 1fr); }
.col { padding: 30px 26px 12px 0; position: relative; }
.col + .col { padding-left: 26px; border-left: 1px solid var(--line); }
.cols.four .col:nth-child(4n+1) { padding-left: 0; border-left: 0; }
.cols.four .col:nth-child(n+5) { border-top: 1px solid var(--line); margin-top: 0; }
.col .n { color: var(--blue-bright); }
.col h3 { font-family: var(--display); font-stretch: 125%; font-weight: 700; font-size: clamp(16px, 1.45vw, 21px); text-transform: uppercase; margin: 26px 0 10px; line-height: 1.15; }
.col p { color: var(--dim); font-size: 14.5px; }
.col::after { content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0; background: var(--blue-bright); transition: width 1.4s var(--ease); }
.col.in::after { width: 100%; }
@media (max-width: 1000px) { .cols.four { grid-template-columns: repeat(2, 1fr); } .cols.four .col:nth-child(n) { padding-left: 0; border-left: 0; padding-right: 20px; } .cols.four .col:nth-child(n+3) { border-top: 1px solid var(--line); } }
/* shader cards (#why) — the grid becomes eight glass panels with one WebGL
   canvas painting a warp behind them (shaders.js) */
.cols.cards { border-top: 0; gap: 18px; position: relative; }
.cols.cards .col { padding: 28px 26px 30px; border: 1px solid rgba(160, 190, 255, .16); border-radius: 22px;
  background: rgba(3, 6, 14, .72); overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; min-height: 260px; transition: border-color .45s var(--ease), transform .6s var(--ease); }
/* the panel has to stay opaque enough that a bright patch of warp can't take
   the body copy below readable contrast */
.cols.cards.has-shader .col { background: rgba(3, 6, 14, .85); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.cols.cards.has-shader .col p { color: rgba(223, 231, 255, .82); }
/* the plain-grid rules above zero the left/top edge on the first column and
   the second row — cards need all four sides, so put them back at equal weight */
.cols.cards.four .col:nth-child(4n+1), .cols.cards.four .col:nth-child(n+5) {
  padding-left: 26px; border: 1px solid rgba(160, 190, 255, .16); }
.cols.cards .col:hover { border-color: rgba(127, 166, 255, .42); }
.cols.cards .col .ico { color: var(--blue-bright); display: block; margin-bottom: 20px; filter: drop-shadow(0 4px 14px rgba(59, 109, 255, .45)); }
.cols.cards .col .ico svg { width: 30px; height: 30px; display: block; }
.cols.cards .col h3 { margin: 12px 0 10px; }
.cols.cards .col p { margin-top: auto; }
/* the shader itself sits behind every card, one canvas for the whole grid */
/* the canvas reaches past the grid, because each card drifts with the page
   parallax and would otherwise be scissored off at the edges */
/* a canvas is a replaced element: inset alone won't stretch it, so size it
   explicitly (the extra 90px is the parallax drift margin) */
.shader-layer { position: absolute; left: -90px; top: -90px; width: calc(100% + 180px); height: calc(100% + 180px);
  z-index: -1; pointer-events: none; opacity: .95; }
@media (max-width: 1100px) { .cols.cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .cols.cards, .cols.cards.four { grid-template-columns: 1fr; }
  .cols.cards .col { min-height: 0; border-top: 1px solid rgba(160, 190, 255, .16) !important; padding-left: 26px !important; } }

@media (max-width: 760px) { .cols, .cols.four { grid-template-columns: 1fr; } .col + .col, .cols.four .col:nth-child(n) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } .col h3 { margin-top: 14px; } }

/* founders — large centred profiles, photo-ready */
.founders { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 3vw, 40px); }
.founder { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px;
  width: clamp(280px, 30vw, 380px); padding: clamp(30px, 3.4vw, 46px) 30px clamp(28px, 3vw, 40px);
  border: 1px solid var(--line); border-radius: 26px;
  background: linear-gradient(180deg, rgba(14, 22, 48, .55), rgba(4, 7, 16, .9));
  box-shadow: 0 40px 90px -45px rgba(0, 0, 0, .9);
  transition: border-color .4s, box-shadow .5s var(--ease), transform .5s var(--ease); }
.founder:hover { border-color: var(--line-2); transform: translateY(-4px);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .95), 0 0 60px -25px rgba(59, 109, 255, .7); }
.fphoto { position: relative; width: clamp(150px, 15vw, 210px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; border: 2px solid transparent;
  background: radial-gradient(circle at 50% 30%, #16307a, #050a1c 70%) padding-box,
              conic-gradient(from 200deg, #7fa6ff, #ffffff, #3b6dff, #7fa6ff) border-box;
  box-shadow: 0 0 44px rgba(59, 109, 255, .38); }
.fphoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.fphoto.has-photo .mono-ring { display: none; }
.mono-ring { display: grid; place-items: center; font-family: var(--display); font-stretch: 125%; font-weight: 800;
  font-size: clamp(30px, 3.4vw, 46px); letter-spacing: .06em; color: var(--white); }
.founder h3 { font-family: var(--display); font-stretch: 115%; font-weight: 700; font-size: clamp(20px, 1.9vw, 26px); }
.founder .label { color: var(--blue-bright); margin-top: 10px; display: block; }

/* services */
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1100px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services { grid-template-columns: 1fr; } }
.svc { position: relative; overflow: hidden; padding: 28px 24px 26px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(12, 18, 40, .55), rgba(4, 7, 16, .85)); min-height: 210px; display: flex; flex-direction: column; transition: border-color .5s, transform .6s var(--ease); }
.svc::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(90, 140, 255, .18), transparent 45%); }
.svc:hover { border-color: var(--line-2); transform: translateY(-4px); }
.svc:hover::before { opacity: 1; }
.svc .n { color: var(--faint); }
.svc h3 { font-family: var(--display); font-stretch: 118%; font-weight: 700; font-size: 18px; text-transform: uppercase; line-height: 1.2; margin-top: auto; padding-top: 38px; }
.svc p { color: var(--dim); font-size: 14px; margin-top: 10px; }

/* ── stacked drag carousel (carousel.js) ── */
/* tall enough for the card (1.5x its width) plus the downward fan offset,
   plus a clear row at the bottom for the arrows and dots */
.scar { display: none; position: relative; overflow: hidden; user-select: none;
  height: calc(clamp(180px, 22vw, 268px) * 1.5 + 190px); }
#services.has-carousel .scar { display: block; }
#services.has-carousel .services { display: none; }   /* the grid is the no-JS fallback */
.scar-stage { position: absolute; inset: 0 0 86px; display: grid; place-items: center; perspective: 1400px; }
.scar-surface { position: absolute; inset: 0 0 86px; z-index: 50; cursor: grab; touch-action: pan-y; }
.scar.dragging .scar-surface { cursor: grabbing; }
.scar-surface:focus-visible { outline: 1px solid var(--blue-bright); outline-offset: 10px; border-radius: 20px; }
.scar-card {
  position: absolute; width: clamp(180px, 22vw, 268px); aspect-ratio: 2 / 3;
  border-radius: 18px; overflow: hidden; pointer-events: none; will-change: transform, opacity;
  background: #070b18; border: 1px solid rgba(160, 190, 255, .16);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .95), 0 0 40px -18px rgba(59, 109, 255, .5);
}
.scar-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scar-veil { position: absolute; inset: 0; background: #02040a; }
.scar-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(2, 4, 10, .92) 8%, rgba(2, 4, 10, .25) 45%, transparent 75%); }
.scar-badge { position: absolute; top: 14px; right: 14px; padding: 5px 11px; border-radius: 100px;
  background: rgba(243, 246, 255, .92); color: #02040a; font-size: 10px; letter-spacing: .18em; }
.scar-text { position: absolute; left: 18px; right: 18px; bottom: 20px; }
.scar-title { font-family: var(--display); font-stretch: 118%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(14px, 1.3vw, 18px); line-height: 1.15; }
.scar-desc { color: rgba(223, 231, 255, .72); font-size: 12.5px; line-height: 1.45; margin-top: 7px; }
.scar-ui { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 22px; }
.scar-arrow { width: 44px; height: 44px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--white);
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(20, 30, 62, .9), rgba(6, 10, 24, .95)) padding-box,
              linear-gradient(135deg, rgba(255, 255, 255, .45), rgba(127, 166, 255, .2)) border-box;
  transition: transform .3s var(--ease), box-shadow .3s; }
.scar-arrow:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(59, 109, 255, .8); }
.scar-dots { display: flex; gap: 9px; }
.scar-dots button { width: 7px; height: 7px; border-radius: 50%; background: rgba(160, 190, 255, .25); transition: all .35s var(--ease); }
.scar-dots button.on { background: var(--blue-bright); box-shadow: 0 0 10px rgba(127, 166, 255, .9); transform: scale(1.35); }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; perspective: 1400px; align-items: stretch; }
@media (max-width: 1060px) { .plans { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; } }
.plan { position: relative; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, rgba(14, 22, 48, .55), rgba(4, 7, 16, .9)); padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; transform-style: preserve-3d; transition: transform .6s var(--ease), border-color .4s; overflow: hidden; }
.plan::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 0%), rgba(90, 140, 255, .16), transparent 45%); }
.plan:hover::before { opacity: 1; }
.plan .tier { display: flex; justify-content: space-between; align-items: center; color: var(--dim); min-height: 26px; }
.plan h3 { font-size: clamp(32px, 2.8vw, 48px); margin: 22px 0 0; }
.plan .price { font-family: var(--display); font-weight: 300; font-size: clamp(40px, 3.8vw, 56px); margin: 18px 0 8px; letter-spacing: -0.02em; }
.plan .desc { color: var(--dim); font-size: 15px; min-height: 3.2em; }
.plan ul { list-style: none; display: grid; gap: 10px; font-size: 14.5px; color: rgba(223, 231, 255, .85); margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.plan li { display: flex; gap: 12px; }
.plan li::before { content: ""; flex: 0 0 5px; height: 5px; margin-top: 9px; background: var(--blue-bright); border-radius: 50%; }
.plan .spacer { flex: 1; min-height: 26px; }
/* a full-width button on a card that already tilts needs a much smaller swell,
   or it reads as floating rather than lifting */
.plan .btn { width: 100%; justify-content: center; }
.plan .btn:hover, .care-plan .btn:hover { --bs: 1.012; }
.plan.featured { border-color: rgba(127, 166, 255, .45); box-shadow: 0 30px 90px -30px rgba(59, 109, 255, .5); }
.plan.featured::after { content: ""; position: absolute; inset: -1px; border-radius: 20px; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, var(--blue-bright) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 6s linear infinite; }
.badge { background: var(--white); color: #02040a; padding: 5px 12px; border-radius: 100px; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --ang: 360deg; } }

/* founding-rate note above the packages */
.founding { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 52px; padding: 10px 18px; border-radius: 100px;
  border: 1px solid rgba(127, 166, 255, .3); background: rgba(59, 109, 255, .1); color: var(--dim); }
.founding b { color: var(--blue-bright); font-weight: 600; }

/* care & growth — scene 07, the monthly plans that keep a launch in orbit */
.care-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 960px; margin: 0 auto; }
.care-plan { border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 2.6vw, 34px); display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(14, 22, 48, .4), rgba(4, 7, 16, .8)); transition: border-color .4s; }
.care-plan:hover { border-color: var(--line-2); }
.care-plan.featured { border-color: rgba(127, 166, 255, .32); }
.care-top { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.care-top h4 { font-family: var(--display); font-stretch: 112%; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 20px; }
.care-plan .price { font-family: var(--display); font-weight: 300; font-size: clamp(28px, 2.4vw, 36px); letter-spacing: -0.02em; }
.care-plan .price span { font-size: 15px; color: var(--faint); letter-spacing: 0; }
.care-plan .desc { color: var(--dim); font-size: 14.5px; margin-top: 10px; }
.care-plan ul { list-style: none; display: grid; gap: 9px; font-size: 14px; color: rgba(223, 231, 255, .85);
  margin: 22px 0 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.care-plan li { display: flex; gap: 12px; }
.care-plan li::before { content: ""; flex: 0 0 5px; height: 5px; margin-top: 8px; background: var(--blue-bright); border-radius: 50%; }
.care-plan .btn { margin-top: auto; width: 100%; justify-content: center; }
@media (max-width: 860px) { .care-plans { grid-template-columns: 1fr; } }

/* work */
.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1000px) { .works { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .works { grid-template-columns: 1fr; } }
.work { position: relative; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; padding: 26px; min-height: 290px; border-radius: 18px; border: 1px solid var(--line);
  background: radial-gradient(circle at 85% 0%, rgba(59, 109, 255, .22), transparent 55%), linear-gradient(170deg, #081231, #02040a 75%); transition: border-color .5s, transform .6s var(--ease); }
.work::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(127, 166, 255, .22); box-shadow: inset 0 0 40px rgba(59, 109, 255, .15); transition: transform 1s var(--ease); }
.work:hover { border-color: var(--line-2); transform: translateY(-4px); }
.work:hover::after { transform: scale(1.25); }
.work .tag { color: var(--blue-bright); }
.work h3 { font-family: var(--display); font-stretch: 118%; font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.1; margin-top: auto; padding-top: 40px; }
.work .ind { color: var(--faint); margin-top: 8px; display: block; }
.work p { color: var(--dim); font-size: 14.5px; margin-top: 14px; max-width: 34ch; position: relative; z-index: 1; }
/* case study — four beats, shown in the gallery modal and in the no-WebGL grid */
.work .case { display: grid; gap: 14px; margin-top: 20px; position: relative; z-index: 1; }
.work .case > span { display: grid; gap: 5px; }
.work .case b { color: var(--blue-bright); font-weight: 500; }
.work .case i { font-style: normal; color: var(--dim); font-size: 13.5px; line-height: 1.55; }
.work .go { margin-top: 20px; color: var(--white); display: inline-flex; gap: 10px; align-items: center; position: relative; z-index: 1; }
.work .go i { font-style: normal; transition: transform .4s var(--ease); }
.work:hover .go i { transform: translate(3px, -3px); }

/* ── 3D Stellar Gallery (gallery.js) ── */
.stellar { display: none; position: relative; height: min(82vh, 760px); min-height: 480px; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: #000;
  box-shadow: 0 40px 120px -50px rgba(40, 80, 230, .55), inset 0 0 0 1px rgba(255, 255, 255, .02); }
#work.has-stellar .stellar { display: block; }
#work.has-stellar .works { display: none; }   /* the grid stays as the no-WebGL fallback */
.stellar > canvas, .stellar .sg-css { position: absolute; inset: 0; }
.stellar .sg-css { cursor: grab; }
.stellar .sg-css:active { cursor: grabbing; }
.sg-hint { position: absolute; left: 22px; top: 20px; z-index: 3; color: var(--dim); pointer-events: none; }
@media (pointer: coarse) { .sg-hint-fine { display: none; } .stellar { height: 72vh; } }
.sg-card { width: 160px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.sg-card-in { display: block; padding: 10px; border-radius: 10px; background: #0a1024; border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, .6); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.sg-card:hover .sg-card-in, .sg-card:focus-visible .sg-card-in { transform: scale(1.15); border: 1px solid rgba(127, 166, 255, .6);
  box-shadow: 0 25px 50px rgba(59, 109, 255, .5), 0 0 30px rgba(59, 109, 255, .3); }
.sg-card:focus-visible { outline: none; }
.sg-card img { display: block; width: 100%; height: 160px; object-fit: cover; object-position: top; border-radius: 6px; user-select: none; }
.sg-card-t { display: block; margin-top: 8px; font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.sg-card-i { display: block; margin-top: 2px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-bright); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sg-modal { position: fixed; inset: 0; z-index: 180; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, .8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s ease; }
.sg-modal.open { opacity: 1; }
.sg-m-wrap { position: relative; width: 100%; max-width: 560px; transform: translateY(14px) scale(.97); transition: transform .45s var(--ease);
  max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sg-m-wrap::-webkit-scrollbar { width: 8px; }
.sg-m-wrap::-webkit-scrollbar-thumb { background: rgba(127, 166, 255, .25); border-radius: 8px; }
.sg-modal.open .sg-m-wrap { transform: none; }
.sg-close { position: absolute; top: 26px; right: 26px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  border: 1px solid transparent; background: linear-gradient(180deg, rgba(20, 30, 62, .9), rgba(6, 10, 24, .95)) padding-box, linear-gradient(135deg, rgba(255,255,255,.45), rgba(127,166,255,.2)) border-box; transition: transform .3s; }
.sg-close:hover { transform: rotate(90deg); }
.sg-close svg { width: 20px; height: 20px; }
.sg-tilt { transform-style: preserve-3d; border-radius: 18px; padding: 16px; background: linear-gradient(180deg, #0c1430, #050916);
  border: 1px solid var(--line-2); box-shadow: 0 83px 83px rgba(0, 0, 0, .26), 0 21px 46px rgba(0, 0, 0, .29), 0 0 60px -10px rgba(59, 109, 255, .35); }
.sg-m-img { position: relative; height: min(34vh, 300px); border-radius: 12px; overflow: hidden; background: #000; }
.sg-m-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sg-m-ind { display: block; color: var(--blue-bright); margin-top: 16px; }
.sg-tilt h3 { font-size: 24px; margin-top: 8px; }
.sg-m-desc { color: var(--dim); font-size: 14.5px; margin-top: 8px; }
.sg-m-case { display: grid; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.sg-m-case > div { display: grid; gap: 4px; }
.sg-m-case b { color: var(--blue-bright); font-weight: 500; font-family: var(--body); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.sg-m-case i { font-style: normal; color: var(--dim); font-size: 13.5px; line-height: 1.55; }
.sg-m-go { width: 100%; justify-content: center; margin-top: 18px; }

/* ── "How we work" pinned cards (process.js) ── */
.howwework { display: none; position: relative; max-width: 1000px; margin: 0 auto; height: var(--pin-h); }
#process.has-pins .howwework { display: block; }
#process.has-pins .process { display: none; }      /* rail list = no-JS fallback */
/* ruled background, faded at both edges (from the original component) */
.howwework::before { content: ""; position: absolute; inset: -40px 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: linear-gradient(rgba(160, 190, 255, .10) 1px, transparent 1px); background-size: 100% 32px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.pin-thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.pin-thread path { fill: none; stroke: rgba(127, 166, 255, .5); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; animation: thread 3s linear infinite; }
@keyframes thread { to { stroke-dashoffset: -140; } }

.pin-card { position: absolute; top: var(--top); width: 300px; z-index: 2;
  padding: 10px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(16, 24, 52, .92), rgba(5, 8, 20, .96));
  border: 1px solid var(--line-2); box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .95), 0 0 40px -22px rgba(59, 109, 255, .6);
  opacity: 0; transform: translateY(26px) rotate(var(--rot)) scale(.98);
  transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .4s; }
.pin-card.in { opacity: 1; transform: rotate(var(--rot)); }
.pin-card.l { left: 9%; }
.pin-card.r { right: 9%; }
.pin-card:hover { z-index: 5; transform: rotate(0deg) scale(1.04); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 60px -18px rgba(59, 109, 255, .85); }
.pin-head { display: block; width: 30px; height: 30px; margin: 4px auto 14px; color: var(--blue-bright); }
.pin-head svg { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(59, 109, 255, .8)); }
.pin-body { border-radius: 16px; padding: 18px 18px 20px; background: rgba(59, 109, 255, .07); border: 1px solid rgba(127, 166, 255, .18); }
.pin-n { display: block; font-size: 30px; color: var(--blue-bright); line-height: 1; margin-bottom: 14px; }
.pin-body h3 { font-size: 24px; line-height: 1; margin-bottom: 10px; }
.pin-body p { color: var(--dim); font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) {
  /* needs the same specificity as the rule that reveals it */
  #process.has-pins .howwework { height: auto; display: flex; flex-direction: column; gap: 18px; }
  .pin-thread, .howwework::before { display: none; }
  /* the tilt is an inline style from JS, so override the transform itself */
  .pin-card { position: relative; top: auto; left: auto; right: auto; width: 100%;
    transform: translateY(20px); }
  .pin-card.in { transform: none; }
  .pin-card:hover { transform: none; }
  .pin-card.l, .pin-card.r { left: auto; right: auto; }
}

/* process */
.process { position: relative; max-width: 960px; margin: 0 auto; }
.process .rail { position: absolute; left: 22px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.process .rail i { position: absolute; left: 0; top: 0; width: 1px; height: 0; background: linear-gradient(to bottom, var(--blue), var(--blue-bright)); box-shadow: 0 0 12px var(--blue); }
.step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: clamp(20px, 4vw, 60px); padding: 30px 0; }
.step .dot { width: 45px; height: 45px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg); display: grid; place-items: center; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--dim); transition: all .6s var(--ease); z-index: 1; }
.step.on .dot { border-color: var(--blue-bright); color: #fff; background: var(--blue); box-shadow: 0 0 30px rgba(59,109,255,.6); }
.step h3 { font-size: clamp(28px, 4.2vw, 58px); color: var(--faint); transition: color .6s; }
.step.on h3 { color: var(--white); }
.step p { color: var(--dim); margin-top: 8px; max-width: 46ch; }

/* faq */
.faq { max-width: 980px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 26px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: var(--display); font-stretch: 110%; font-weight: 600; font-size: clamp(17px, 1.6vw, 22px); transition: color .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--body); font-weight: 300; font-size: 26px; color: var(--blue-bright); transition: transform .4s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--blue-bright); }
.faq .a { color: var(--dim); padding: 0 0 28px; max-width: 70ch; }

/* ══ CONTACT FORM ══════════════════════════════════════ */
#contact .grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 6vw; align-items: start; }
/* stacked: the gap also has to absorb the parallax drift of both halves */
@media (max-width: 960px) { #contact .grid { grid-template-columns: 1fr; gap: 56px; } }
.formcard { padding: clamp(24px, 3.4vw, 44px); border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(14, 22, 48, .55), rgba(4, 7, 16, .9)); box-shadow: 0 40px 100px -40px rgba(20, 50, 160, .45); }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
@media (max-width: 640px) { form { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 9px; position: relative; }
.field.full { grid-column: 1 / -1; }
.field > label, .field > .flabel { color: var(--dim); }
.input {
  font: inherit; font-size: 15.5px; color: var(--white); width: 100%;
  background: rgba(2, 4, 10, .55); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 15px 16px; outline: none; transition: border-color .3s, box-shadow .3s, background .3s;
}
textarea.input { min-height: 130px; resize: vertical; }
.input::placeholder { color: rgba(223, 231, 255, .3); }
.input:hover { border-color: rgba(160, 190, 255, .36); }
.input:focus, .dd-btn:focus-visible, .dd.open .dd-btn { border-color: var(--blue-bright); box-shadow: 0 0 0 4px rgba(59, 109, 255, .16); background: rgba(6, 12, 30, .8); }
.field.bad .input, .field.bad .dd-btn { border-color: #ff6b7d; }
.field .err { color: #ff8c99; font-size: 13px; display: none; }
.field.bad .err { display: block; }

/* themed dropdown (replaces the native select, which can't be styled when open) */
.dd { position: relative; }
.dd select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left;
  font-size: 15.5px; color: var(--white); background: rgba(2, 4, 10, .55); border: 1px solid var(--line-2); border-radius: 12px; padding: 15px 16px; transition: border-color .3s, box-shadow .3s, background .3s; }
.dd-btn:hover { border-color: rgba(160, 190, 255, .36); }
.dd-btn .ph { color: rgba(223, 231, 255, .3); }
.dd-btn .chev { width: 10px; height: 10px; flex: none; border-right: 1.5px solid var(--blue-bright); border-bottom: 1.5px solid var(--blue-bright); transform: translateY(-3px) rotate(45deg); transition: transform .35s var(--ease); }
.dd.open .dd-btn .chev { transform: translateY(2px) rotate(-135deg); }
.dd-list { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 30; list-style: none; max-height: 340px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top; transition: opacity .25s, transform .35s var(--ease), visibility .35s; }
.dd.open .dd-list { opacity: 1; visibility: visible; transform: none; }
.dd-list::-webkit-scrollbar { width: 8px; }
.dd-list::-webkit-scrollbar-thumb { background: rgba(127, 166, 255, .25); border-radius: 8px; }

.submit-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.submit-row small { color: var(--faint); font-size: 13px; max-width: 34ch; }
.form-msg { grid-column: 1 / -1; color: #ff8c99; display: none; }
.form-msg.show { display: block; }
.success { display: none; padding: 20px 0; }
.success.show { display: block; }
.success h3 { font-size: clamp(30px, 4vw, 56px); }
.success p { color: var(--dim); margin-top: 16px; max-width: 44ch; }

/* ══ FOOTER ════════════════════════════════════════════ */
/* standalone documents (privacy, terms) — same skin, no film */
.legal-page { padding: clamp(130px, 18vh, 190px) var(--gutter) clamp(70px, 10vh, 120px); }
.legal-page .wrap { max-width: 760px; }
.legal-page h1.display { font-size: clamp(38px, 5vw, 72px); }
.legal-page .upd { color: var(--faint); margin-top: 20px; display: block; }
.legal-page .lead { margin-top: 36px; max-width: none; }
.legal-page h2 { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: clamp(18px, 1.7vw, 23px);
  margin: 48px 0 16px; letter-spacing: -0.01em; }
.legal-page p, .legal-page li { color: var(--dim); font-size: 15.5px; line-height: 1.75; }
.legal-page p + p { margin-top: 14px; }
.legal-page ul { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 12px; }
.legal-page li::marker { color: var(--blue-bright); }
.legal-page b { color: var(--white); font-weight: 600; }
.legal-page a { color: var(--blue-bright); text-decoration: none; border-bottom: 1px solid rgba(127, 166, 255, .3); }
.legal-page a:hover { border-color: var(--blue-bright); }
body.doc footer .bottom { border-top: 0; }

/* contact: direct email + booking link beside the form */
.direct { list-style: none; margin-top: 40px; display: grid; gap: 22px; }
.direct li { display: grid; gap: 10px; justify-items: start; }
.direct .label { color: var(--faint); }
.direct a:not(.btn) { color: var(--white); text-decoration: none; font-size: clamp(17px, 1.5vw, 21px); border-bottom: 1px solid rgba(127, 166, 255, .35); padding-bottom: 3px; transition: border-color .3s, color .3s; }
.direct a:not(.btn):hover { border-color: var(--blue-bright); color: var(--blue-bright); }
.direct small { color: var(--faint); font-size: 12.5px; }
.field .opt { color: var(--faint); text-transform: none; letter-spacing: 0; }

footer { border-top: 1px solid var(--line); padding: clamp(60px, 10vh, 100px) var(--gutter) 30px; }
.bottom .legal { display: flex; gap: 22px; }
.bottom .legal a { color: var(--faint); text-decoration: none; transition: color .25s; }
.bottom .legal a:hover { color: var(--white); }
footer .top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 6vw; max-width: 1320px; margin: 0 auto; }
@media (max-width: 800px) { footer .top { grid-template-columns: 1fr 1fr; } footer .top > :first-child { grid-column: 1 / -1; } }
footer p { color: var(--dim); margin-top: 18px; font-size: 14.5px; max-width: 34ch; }
footer h4 { color: var(--faint); margin-bottom: 18px; }
footer .links a { display: block; text-decoration: none; color: var(--dim); margin-bottom: 10px; font-size: 14.5px; transition: color .25s; }
footer .links a:hover { color: var(--white); }
.socials { display: flex; gap: 12px; }
.socials a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--white); text-decoration: none;
  border: 1px solid transparent; background: linear-gradient(180deg, rgba(20, 30, 62, .9), rgba(6, 10, 24, .95)) padding-box, linear-gradient(135deg, rgba(255,255,255,.45), rgba(127,166,255,.15) 50%, rgba(160,190,255,.5)) border-box;
  transition: transform .4s var(--ease), box-shadow .4s, color .3s; }
.socials a:hover { transform: translateY(-3px); box-shadow: 0 10px 30px -8px rgba(59, 109, 255, .7); color: var(--blue-bright); }
.socials svg { width: 19px; height: 19px; }
.socials a.off { opacity: .45; }
footer .bottom { max-width: 1320px; margin: clamp(56px, 9vh, 90px) auto 0; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--faint); }

/* ══ MAGIC CURSOR (sparkle trail) ══════════════════════ */
:root { --mouse-sparkles-glow-rgb: 59 109 255; }
.mouse-sparkles-star { position: fixed; z-index: 400; width: 1em; height: 1em; margin: -0.5em 0 0 -0.5em; pointer-events: none; animation-fill-mode: forwards; animation-timing-function: ease-out; }
.mouse-sparkles-star svg { width: 100%; height: 100%; display: block; }
.mouse-sparkles-glow-point { position: fixed; z-index: 399; pointer-events: none; box-shadow: 0 0 1.2rem 0.6rem rgb(var(--mouse-sparkles-glow-rgb)); border-radius: 50%; }
@keyframes fall-1 {
  0% { transform: translate(0px, 0px) rotateX(45deg) rotateY(30deg) rotateZ(0deg) scale(0.25); opacity: 0; }
  5% { transform: translate(10px, -10px) rotateX(45deg) rotateY(30deg) rotateZ(0deg) scale(1); opacity: 1; }
  100% { transform: translate(25px, 200px) rotateX(180deg) rotateY(270deg) rotateZ(90deg) scale(1); opacity: 0; }
}
@keyframes fall-2 {
  0% { transform: translate(0px, 0px) rotateX(-20deg) rotateY(10deg) scale(0.25); opacity: 0; }
  10% { transform: translate(-10px, -5px) rotateX(-20deg) rotateY(10deg) scale(1); opacity: 1; }
  100% { transform: translate(-10px, 160px) rotateX(-90deg) rotateY(45deg) scale(0.25); opacity: 0; }
}
@keyframes fall-3 {
  0% { transform: translate(0px, 0px) rotateX(0deg) rotateY(45deg) scale(0.5); opacity: 0; }
  15% { transform: translate(7px, 5px) rotateX(0deg) rotateY(45deg) scale(1); opacity: 1; }
  100% { transform: translate(20px, 120px) rotateX(-180deg) rotateY(-90deg) scale(0.5); opacity: 0; }
}

#toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); z-index: 150; background: #0b1330; border: 1px solid var(--line-2); padding: 12px 18px; border-radius: 100px; font-size: 13px; color: var(--dim); opacity: 0; transition: all .6s var(--ease); pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
  [data-reveal] { opacity: 1; transform: none; }
}