/* ============================================================
   Jujubee Digital — Design System
   Near-monochrome purple-black base · one magenta accent
   One family: Schibsted Grotesk, 400 to 900, self-hosted, a single file.
   Hierarchy comes from weight, size and space, never from a second typeface.
   ============================================================ */

/* ---------- Typeface (self-hosted, variable, latin subset) ----------
   ONE family for the whole site. A big display serif sitting over a grotesque
   is the house style of every editorial template on the internet right now,
   so the serif is gone and nothing replaced it. What is left is a single
   well-drawn grotesque doing all the work, which is what firms that sell
   discretion actually look like: no ornament, nothing to decode.

   One variable file, 400 to 900, covers display and text. 46 KB, same origin,
   no third-party request, because a firm selling discretion should not hand
   every visitor to Google to render a page.

   font-synthesis is off on purpose: if a weight is missing we want to see it,
   not ship a smeared machine-drawn approximation.
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted.woff2") format("woff2");
}

/* ---------- Tokens ----------
   DELIBERATELY DARK ONLY. Not an oversight, and not a candidate for a
   prefers-color-scheme light variant without a redesign first.

   The accent system is derived from the logo's iridescent spectrum and is
   engineered to glow, which only works on a dark ground. Measured against an
   off-white surface every one of the six fails WCAG AA: iris 3.68:1,
   iris-soft 2.02:1, cyan 1.66:1, cyan-soft 1.32:1, magenta 2.98:1,
   open 1.65:1. A light theme therefore means designing a second accent
   palette, not swapping these variables, plus tokenising the ~46 hard-coded
   glass and glow values below and reworking the WebGL hero.

   The one light rendering the site does ship is @media print at the bottom of
   this file, which flattens every surface to white and every ink to #111.
   ------------------------------------------------------------------ */
:root {
  /* Surfaces — near-black with a purple tint (OKLCH-derived) */
  --bg:        #08070c;
  --bg-1:      #0c0a12;
  --bg-2:      #110d1a;
  --surface:   #16111f;
  --surface-2: #1c1628;

  /* Ink — contrast-checked on --bg */
  --ink:        #f6f2fb;   /* body / headings          ~17:1 */
  --ink-soft:   #cfc6dd;   /* secondary text           ~11:1 */
  --ink-muted:  #a99fbb;   /* muted, still AA body     ~7:1  */
  --ink-faint:  #8a809c;   /* labels / meta            ~4.7:1+ on every surface */

  /* Accent system — drawn from the logo's iridescent spectrum.
     Iris/violet is the primary brand accent; cyan highlights; magenta punches. */
  --iris:        #9d5cff;   /* logo violet  ~#954bd3 / #a403f3 — PRIMARY accent */
  --iris-soft:   #bfa2ff;   /* readable violet on dark            */
  --iris-deep:   #6a2fd6;
  --cyan:        #63d3e8;   /* logo cyan    ~#7bdeed — highlight   */
  --cyan-soft:   #9fe6f2;
  --accent:      #e947f5;   /* logo magenta ~#f035ff — punch only  */
  --accent-soft: #f39bf7;
  --blue:        #2f6fd0;   /* logo blue    ~#2149a9              */

  /* Lines & glass */
  --border:       rgba(255, 255, 255, 0.09);
  --border-strong:rgba(255, 255, 255, 0.16);
  --border-accent:rgba(157, 92, 255, 0.30);   /* iris-tinted */
  --glass:        rgba(18, 13, 26, 0.55);
  --glass-strong: rgba(14, 10, 20, 0.72);

  /* Status */
  --open:    #4ade80;
  --claimed: #8b8195;

  /* Type */
  /* One stack. --font-display is kept as a name so the intent stays readable
     at call sites, but it resolves to the same family as everything else. */
  --font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);

  /* Spacing scale (varied rhythm) */
  --sp-1: 0.5rem;  --sp-2: 0.75rem; --sp-3: 1rem;   --sp-4: 1.5rem;
  --sp-5: 2rem;    --sp-6: 3rem;    --sp-7: 4.5rem;  --sp-8: 6.5rem;
  --sp-9: 9rem;

  --maxw: 1200px;
  --maxw-prose: 68ch;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 30px rgba(0,0,0,0.35);
  --shadow-pop: 0 20px 60px -20px rgba(0,0,0,0.7);

  /* Z-scale — semantic, no magic 9999 */
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* quart */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 1.0625rem;
  overflow-x: hidden;
  /* Never fake a weight or a slant. If a face is missing, show it. */
  font-synthesis: none;
  -webkit-font-synthesis: none;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
:focus-visible { outline: 2px solid var(--iris); outline-offset: 3px; border-radius: 4px; }

/* Selection */
::selection { background: rgba(157, 92, 255, 0.34); color: #fff; }

/* Skip link */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: var(--z-toast);
  background: var(--ink); color: var(--bg); padding: 0.6rem 1rem; border-radius: 0 0 10px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  /* Tight, but nowhere near the point where letters touch. */
  letter-spacing: -0.028em;
  text-wrap: balance;
  color: var(--ink);
}
/* Schibsted's x-height is far larger than the old serif's, so the same pixel
   size reads noticeably bigger. Every ceiling below is pulled back to match
   the optical size the page had before, not the numeric one. */
/* The floor is set by the hero's punchline: at 800 weight "One loyalty.
   Yours." has to hold on one line at 375px, and 2.45rem put it 6px over.
   Tightening the tracking instead would cross the point where letters touch. */
h1 { font-size: clamp(2.3rem, 5.4vw, 4.6rem); }
h2 { font-size: clamp(1.85rem, 3.8vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -0.022em; }
h4 { font-size: 1.1rem; letter-spacing: -0.015em; font-weight: 650; }
p  { text-wrap: pretty; }

.serif { font-family: var(--font-display); }
.accent { color: var(--iris-soft); }
.tm { font-size: 0.5em; vertical-align: super; font-weight: 400; letter-spacing: 0; margin-left: 0.05em; opacity: 0.7; }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }
.section { padding-block: clamp(3.5rem, 9vw, var(--sp-8)); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 6vw, var(--sp-7)); }
.prose { max-width: var(--maxw-prose); }
.center { text-align: center; margin-inline: auto; }
.stack > * + * { margin-top: var(--sp-4); }

/* Alternating section backgrounds (impeccable: vary, near-mono) */
.bg-1 { background: var(--bg-1); }
.bg-2 { background:
  radial-gradient(120% 100% at 50% -10%, rgba(157,92,255,0.07), rgba(99,211,232,0.03) 40%, transparent 60%),
  var(--bg-2); }
.hairline-top { border-top: 1px solid var(--border); }

/* Kicker — used sparingly, NOT on every section */
.kicker {
  font-family: var(--font-sans);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--iris-soft);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
/* Logo-spectrum accent line (decorative box, not text — gradient is fine here) */
.kicker::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--iris)); }

.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-soft); line-height: 1.55; }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.98rem; line-height: 1;
  padding: 0.85rem 1.5rem; border-radius: var(--radius-pill);
  transition: transform 0.35s var(--ease-out), background 0.3s, color 0.3s, box-shadow 0.3s, border-color 0.3s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: #f7f4fb; color: #14101c; box-shadow: 0 6px 24px -8px rgba(255,255,255,0.35); }
.btn--primary:hover { background: #fff; box-shadow: 0 10px 34px -8px rgba(233,71,245,0.55); }
.btn--ghost { background: rgba(255,255,255,0.06); color: var(--ink); border: 1px solid var(--border-strong); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: rgba(255,255,255,0.11); border-color: var(--border-accent); }
.btn--accent { background: var(--iris); color: #fff; box-shadow: 0 8px 30px -10px rgba(157,92,255,0.7); }
.btn--accent:hover { background: var(--iris-soft); color: #14101c; }
.btn--sm { padding: 0.6rem 1.05rem; font-size: 0.88rem; }
.btn--lg { padding: 1rem 1.9rem; font-size: 1.05rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--iris-soft);
  transition: gap 0.3s var(--ease-out), color 0.2s;
}
.link-arrow:hover { gap: 0.75rem; color: #fff; }

/* ============================================================
   Navigation — floating glass pill (from screenshot)
   ============================================================ */
.nav-wrap {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--z-nav);
  display: flex; justify-content: center;
  padding: clamp(0.75rem, 2vw, 1.4rem) clamp(0.9rem, 3vw, 1.6rem);
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  width: min(1120px, 100%);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  /* Asymmetric on purpose: the right side ends in a filled pill, which carries
     its own optical inset, so it needs less padding than the bare wordmark on
     the left. Not half as much though, which is where this started. */
  padding: 0.72rem 0.85rem 0.72rem 1.35rem;
  border-radius: var(--radius-pill);
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 10px 40px -12px rgba(0,0,0,0.6);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.nav.is-scrolled { background: var(--glass-strong); border-color: var(--border-strong); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 14px 44px -14px rgba(0,0,0,0.7); }

.nav > .brand { justify-self: start; grid-column: 1; }
.nav__links { justify-self: center; grid-column: 2; display: flex; align-items: center; gap: 0.3rem; }
.nav__right { justify-self: end; grid-column: 3; display: flex; align-items: center; gap: 0.5rem; }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; letter-spacing: -0.01em; }
.brand__mark { width: 32px; height: 32px; background: #fff; border-radius: 50%; padding: 3px; object-fit: contain; box-shadow: 0 2px 12px rgba(99,211,232,0.30); }
/* The wordmark is one object. It never breaks across lines, at any width:
   there is room for it on a 320px screen, it was only wrapping because the
   nav's first grid column sizes to min-content. */
.brand__name { font-size: 1.02rem; font-weight: 600; white-space: nowrap; }
.brand__name b { font-weight: 650; }
.brand__name-sub { color: var(--ink-soft); font-weight: 500; }

.nav__link {
  position: relative; padding: 0.55rem 0.85rem; border-radius: var(--radius-pill);
  font-size: 0.94rem; color: var(--ink-soft); font-weight: 500;
  transition: color 0.2s var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.3rem; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--iris)); border-radius: 2px;
  opacity: 0; transform: scaleX(0.55); transform-origin: center;
  transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .nav__link::after { transition: opacity 0.25s; transform: none; } }

.nav__toggle {
  display: none; width: 44px; height: 44px; border-radius: var(--radius-pill);
  align-items: center; justify-content: center; border: 1px solid var(--border-strong);
}
.nav__toggle svg { width: 20px; height: 20px; }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(8,7,12,0.96); backdrop-filter: blur(20px);
  display: flex; flex-direction: column; padding: 6rem 1.5rem 2rem;
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform 0.5s var(--ease-out-expo), opacity 0.4s, visibility 0.4s;
}
.mobile-menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-menu__close { position: absolute; top: 1.5rem; right: 1.5rem; width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); }
.mobile-menu a:not(.btn) { font-family: var(--font-display); font-weight: 650; letter-spacing: -0.02em; font-size: 1.75rem; padding: 0.5rem 0; color: var(--ink); border-bottom: 1px solid var(--border); }
.mobile-menu a:not(.btn):last-of-type { border-bottom: none; }
.mobile-menu .btn { margin-top: 1.5rem; }

/* ============================================================
   Hero — framed rounded panel with FloatingLines canvas
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(140% 90% at 50% 8%, rgba(106,47,214,0.14), transparent 55%),
    var(--bg);
}
.hero__canvas { position: absolute; inset: 0; z-index: 0; }
/* Two-layer scrim: an even dimmer over the whole beam + a strong central
   pool behind the text so body copy clears 4.5:1 no matter where the beam lands. */
.hero__vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(78% 62% at 50% 44%, rgba(6,5,10,0.80), rgba(6,5,10,0.44) 46%, rgba(6,5,10,0.12) 66%, transparent 80%),
    linear-gradient(180deg, rgba(6,5,10,0.62) 0%, rgba(6,5,10,0.15) 18%, transparent 40%, transparent 60%, var(--bg) 100%),
    rgba(6,5,10,0.22);
}
.hero__inner {
  position: relative; z-index: 2; text-align: center; padding: 7rem 1.25rem 5rem; max-width: 920px;
  text-shadow: 0 2px 26px rgba(4,3,8,0.55);
}

.hero__badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.5rem 0.4rem 0.45rem; margin-bottom: 1.8rem;
  border-radius: var(--radius-pill); background: rgba(20,14,28,0.6);
  border: 1px solid var(--border); backdrop-filter: blur(8px);
  font-size: 0.82rem; color: var(--ink-soft);
}
.hero__badge b {
  background: #f4f1f8; color: #16111f; font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.06em; padding: 0.22rem 0.6rem; border-radius: var(--radius-pill);
  text-transform: uppercase;
}
/* The hero is the one place the weight range gets used as an idea: the premise
   is set light, the claim heavy. One family, real drama, no second typeface. */
.hero h1 { font-weight: 450; letter-spacing: -0.03em; margin-bottom: 1.4rem; }
.hero h1 em { font-style: normal; color: var(--iris-soft); font-weight: 800; letter-spacing: -0.034em; }
.hero__sub { font-size: clamp(1.08rem, 1.7vw, 1.32rem); color: #ece7f4; max-width: 60ch; margin: 0 auto 2.2rem; line-height: 1.55; font-weight: 450; }
.hero__cta { justify-content: center; }
.hero__bridge { margin-top: 2.4rem; font-size: 0.92rem; color: #c7bdd6; letter-spacing: 0.01em; }
.hero__bridge a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(157, 92, 255, 0.45); transition: text-decoration-color 0.2s ease; }
.hero__bridge a:hover { text-decoration-color: var(--iris); }

.scroll-cue {
  position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%); z-index: 1;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint);
}
.scroll-cue span { width: 1px; height: 34px; background: linear-gradient(var(--cyan), transparent); animation: cue 2.4s var(--ease-out) infinite; }
@keyframes cue { 0%,100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } }
/* On a phone the hero is already taller than the fold, so the cue was landing
   on top of the "Rooted in..." line, and it was telling someone holding a
   scrolling device to scroll. Drop it and give that line the room instead. */
@media (max-width: 700px) {
  .scroll-cue { display: none; }
}

/* ============================================================
   Reusable content blocks
   ============================================================ */
.section-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head.center { margin-inline: auto; }
.section-head h2 { margin-bottom: 0.9rem; }

/* Pillars — editorial list, not identical cards */
.pillars { display: grid; gap: 0; border-top: 1px solid var(--border); }
.pillar {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: clamp(1rem, 4vw, 3rem); align-items: start;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) 0; border-bottom: 1px solid var(--border);
  transition: background 0.4s;
}
.pillar:hover { background: rgba(157,92,255,0.04); }
.pillar__idx { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; font-size: 0.9rem; color: var(--iris-soft); }
.pillar h3 { margin-top: 0.3rem; }
.pillar__body p { color: var(--ink-soft); }
.pillar__body .lead { margin-bottom: 1rem; }

/* Feature list (services detail) */
.flist { list-style: none; padding: 0; display: grid; gap: 0.9rem; }
.flist li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: baseline; color: var(--ink-soft); padding-bottom: 0.9rem; border-bottom: 1px solid var(--border); }
.flist li:last-child { border-bottom: none; }
.flist b { color: var(--ink); font-weight: 600; font-family: var(--font-sans); }
.flist .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); margin-top: 0.55rem; box-shadow: 0 0 10px rgba(99,211,232,0.5); }

/* Two-column split */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }

/* Panel (used sparingly, not nested) */
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.panel--accent { border-color: var(--border-accent); background:
  linear-gradient(160deg, rgba(157,92,255,0.10), rgba(99,211,232,0.05) 40%, transparent 60%), var(--surface); }

/* Big quote / essay */
.essay { max-width: 62ch; margin-inline: auto; }
.essay p { font-family: var(--font-display); font-size: clamp(1.12rem, 1.6vw, 1.34rem); line-height: 1.68; color: var(--ink-soft); margin-bottom: 1.5rem; font-weight: 400; letter-spacing: -0.003em; }
.essay p strong { color: var(--ink); font-weight: 560; }
/* Drop cap — opening paragraph only, one per article.
   Tuned float cap: predictable across browsers; top aligns to line-1 cap height. */
.essay p.drop::first-letter {
  font-family: var(--font-display); font-weight: 700; color: var(--iris);
  float: left; font-size: 3.05em; line-height: 0.84;
  margin: 0.02em 0.085em 0 0; letter-spacing: -0.03em;
}

/* Proof strip */
.proof {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem); text-align: center; padding-block: 1rem;
}
.proof .stat { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(1.75rem, 3.4vw, 2.5rem); color: var(--ink); letter-spacing: -0.028em; }
.proof .stat .ph { color: var(--iris-soft); }
.proof .lbl em { font-style: normal; font-weight: 600; color: var(--ink); }
.proof .stat .yr { display: block; font-size: 0.8rem; font-family: var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan-soft); margin-bottom: 0.6rem; }
.proof .lbl { color: var(--ink-soft); font-size: 0.98rem; margin-top: 0.5rem; line-height: 1.45; }
.held-note { margin-top: 1.5rem; font-size: 0.86rem; color: var(--ink-muted); display: inline-flex; gap: 0.5rem; align-items: flex-start; }
.held-note::before { content: "—"; color: var(--iris-soft); }

/* Snapshot tool */
.snapshot { background:
  radial-gradient(90% 120% at 50% 0%, rgba(157,92,255,0.12), rgba(99,211,232,0.06) 45%, transparent 65%),
  var(--bg-2); border: 1px solid var(--border-accent); border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3rem); text-align: center; }
.snapshot__form { display: flex; gap: 0.6rem; max-width: 560px; margin: 1.6rem auto 0; }
.field {
  flex: 1; padding: 0.9rem 1.2rem; border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.35); border: 1px solid var(--border-strong); color: var(--ink);
  font-size: 1rem; transition: border-color 0.25s, background 0.25s;
}
.field::placeholder { color: var(--ink-muted); }
.field:focus { outline: none; border-color: var(--accent); background: rgba(0,0,0,0.5); }
.snapshot__status { margin-top: 1.2rem; min-height: 1.4rem; font-size: 0.95rem; color: var(--accent-soft); }
.snapshot__status { color: var(--cyan-soft); }
.snapshot__status[data-state="error"] { color: #ff8fb0; }

/* Newsletter / Briefing */
.briefing__form { display: flex; gap: 0.6rem; max-width: 520px; margin-top: 1.5rem; }

/* Industries — Seat cards */
.seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.seat {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem;
  background: var(--surface); transition: border-color 0.3s, transform 0.4s var(--ease-out), background 0.3s;
  display: flex; flex-direction: column; gap: 0.8rem; min-height: 190px;
}
.seat:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.seat__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.seat h3 { font-size: 1.4rem; }
.seat p { font-size: 0.94rem; color: var(--ink-muted); }
.seat .link-arrow { margin-top: auto; }
.seat--wild { justify-content: flex-start; align-items: flex-start; background: transparent; border-style: dashed; }

/* Steps (How we engage) */
.steps { display: grid; gap: 1rem; counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; padding: 1.6rem 0; border-top: 1px solid var(--border); align-items: start; }
.step__n { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 2.1rem; color: var(--iris-soft); line-height: 1; letter-spacing: -0.03em; }
.step h3 { margin-bottom: 0.35rem; }
.step p { color: var(--ink-soft); }

/* Beliefs / values — spec-sheet grid; top hairline per item (no side stripes) */
.beliefs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.75rem 2.5rem; }
.belief { padding-top: 1.05rem; border-top: 1px solid var(--border-strong); }
.belief b { color: var(--ink); font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; display: block; margin-bottom: 0.35rem; letter-spacing: -0.01em; }
.belief span { color: var(--ink-muted); line-height: 1.5; }

/* FAQ / accordion */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.35rem 0; display: flex; gap: 1rem;
  align-items: center; justify-content: space-between; font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: var(--ink); font-weight: 480;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: none; width: 22px; height: 22px; transition: transform 0.35s var(--ease-out); color: var(--iris-soft); }
.faq details[open] summary .chev { transform: rotate(45deg); }
.faq details > div { padding-bottom: 1.5rem; color: var(--ink-soft); max-width: 70ch; }

/* Trust rows */
.trust-list { display: grid; gap: 0; border-top: 1px solid var(--border); }
.trust-row { display: grid; grid-template-columns: minmax(0,0.6fr) minmax(0,1.4fr); gap: 2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--border); }
.trust-row h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 650; color: var(--ink); }
.trust-row p { color: var(--ink-soft); }

/* Contact grid */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.form-group { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-group label { font-size: 0.85rem; color: var(--ink-muted); font-weight: 500; }
.input, textarea.input, select.input {
  padding: 0.8rem 1rem; border-radius: 10px; background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-strong); color: var(--ink); font: inherit; font-size: 0.98rem; width: 100%;
  transition: border-color 0.2s, background 0.2s;
}
.input:focus, textarea.input:focus, select.input:focus { outline: none; border-color: var(--accent); background: rgba(0,0,0,0.45); }
textarea.input { min-height: 130px; resize: vertical; }
.form-note { font-size: 0.85rem; color: var(--ink-muted); margin-top: 0.5rem; }
.form-status { margin-top: 0.8rem; font-size: 0.92rem; min-height: 1.2rem; }
.form-status[data-state="ok"] { color: var(--open); }
.form-status[data-state="error"] { color: #ff8fb0; }

/* CTA band */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 1rem; }
.cta-band .lead { margin: 0 auto 2rem; max-width: 46ch; }

/* Page hero (interior pages) */
.page-hero { position: relative; padding-top: clamp(8rem, 14vw, 11rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 55% at 12% 0%, rgba(157,92,255,0.14), transparent 55%),
              radial-gradient(55% 50% at 90% 6%, rgba(99,211,232,0.12), transparent 60%),
              radial-gradient(80% 70% at 60% 0%, rgba(47,111,208,0.10), transparent 65%);
}
.page-hero .kicker { margin-bottom: 1.2rem; }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { max-width: 58ch; margin-top: 1.4rem; }

/* Cards teaser (resources / small groups where card IS the affordance) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.tile { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; background: var(--surface); transition: border-color 0.3s, transform 0.4s var(--ease-out); }
.tile:hover { border-color: var(--border-accent); transform: translateY(-3px); }
.tile h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.tile p { color: var(--ink-muted); font-size: 0.95rem; }
.report { display: flex; flex-direction: column; gap: 0.55rem; }
.report-cat { align-self: flex-start; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan-soft); background: rgba(99,211,232,0.1); border: 1px solid rgba(99,211,232,0.25); padding: 0.24rem 0.6rem; border-radius: var(--radius-pill); }
.report p { flex: 1; }
.report-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; font-size: 0.85rem; }

/* ============================================================
   Footer
   ============================================================ */
.footer { border-top: 1px solid var(--border); background: var(--bg-1); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.25rem; }
.footer__top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.footer__brand { max-width: 32ch; }
.footer__brand .brand { margin-bottom: 1.1rem; }
.footer__brand p { color: var(--ink-muted); font-size: 0.95rem; line-height: 1.6; }
.footer__col h5 { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.35rem; font-weight: 600; }
.footer__col ul { list-style: none; padding: 0; display: grid; gap: 0.9rem; }
.footer__col a { color: var(--ink-soft); font-size: 0.96rem; transition: color 0.2s, padding-left 0.25s var(--ease-out); }
.footer__col a:hover { color: var(--ink); padding-left: 0.25rem; }
.footer__brief { margin-top: 1.9rem; }
.footer__brief h5 { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.9rem; font-weight: 600; }
.footer__brief form { display: flex; gap: 0.55rem; max-width: 360px; }
.footer__brief .field { padding: 0.72rem 1.1rem; font-size: 0.9rem; }
.footer__bottom { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.75rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; color: var(--ink-faint); font-size: 0.85rem; }
.footer__social { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.footer__social a { padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 0.82rem; color: var(--ink-muted); transition: border-color 0.2s, color 0.2s; }
.footer__social a:hover { color: var(--ink); border-color: var(--border-accent); background: rgba(157,92,255,0.08); }

/* ============================================================
   Newsletter modal (The Briefing)
   ============================================================ */
.modal {
  border: none; padding: 0; background: transparent; color: var(--ink);
  max-width: 440px; width: calc(100% - 2rem); margin: auto;
}
.modal::backdrop { background: rgba(6, 5, 10, 0.78); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.modal__card {
  position: relative; text-align: left;
  background:
    radial-gradient(130% 70% at 0% 0%, rgba(157,92,255,0.20), transparent 58%),
    radial-gradient(110% 60% at 100% 4%, rgba(99,211,232,0.10), transparent 60%),
    var(--surface);
  border: 1px solid var(--border-accent); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  max-height: min(88vh, 720px);
  display: flex; flex-direction: column;   /* keeps the close button off the scroll track */
  overflow: hidden;
}
/* Hairline of brand light along the top edge — the only ornament the card gets. */
.modal__card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(157,92,255,0.85) 28%, rgba(99,211,232,0.7) 62%, transparent);
}
.modal__body { overflow-y: auto; padding: clamp(1.9rem, 4vw, 2.5rem); overscroll-behavior: contain; }
.modal__close {
  position: absolute; top: 0.8rem; right: 0.8rem; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;   /* full touch target */
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(10,7,16,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong); color: var(--ink-soft);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.modal__close:hover { color: var(--ink); border-color: var(--border-accent); background: rgba(157,92,255,0.14); }
.modal .kicker { margin-bottom: 0.85rem; }
.modal h3 { font-size: clamp(1.5rem, 3.4vw, 1.95rem); margin-bottom: 0.55rem; padding-right: 2.5rem; text-wrap: balance; }
.modal p.muted { font-size: 0.94rem; line-height: 1.55; margin-bottom: 1.6rem; max-width: 34ch; }
.modal form { display: grid; gap: 0; }
.modal .form-group { margin-bottom: 0.9rem; }
/* Fields on a dark card need a defined well, not a darker smudge. */
.modal .input {
  background: rgba(0,0,0,0.42); border-color: rgba(255,255,255,0.14);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.modal .input:focus { background: rgba(0,0,0,0.55); border-color: var(--accent); }
.modal .btn { width: 100%; margin-top: 0.45rem; }
.modal .form-status { margin-top: 0.7rem; }
.modal .form-status:empty { margin: 0; min-height: 0; }
.modal .form-note { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--ink-faint); }
.form-optional { font-size: 0.78rem; color: var(--ink-faint); font-weight: 400; letter-spacing: 0.02em; }
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in 0.45s var(--ease-out-expo); }
  .modal[open]::backdrop { animation: fade-in 0.4s ease; }
}
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   Motion — reveal (enhances already-visible content)
   ============================================================ */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .nav__links, .nav__cta.desktop-only { display: none; }
  .nav__toggle { display: inline-flex; }
  .pillar { grid-template-columns: 1fr; gap: 0.6rem; }
  .trust-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .snapshot__form, .briefing__form, .footer__brief form { flex-direction: column; }
  .footer__top { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .step { grid-template-columns: 1fr; gap: 0.4rem; }
  .step__n { font-size: 1.8rem; }
}

/* ============================================================
   Print
   Strips chrome/nav/motion for paper; keeps editorial content
   ============================================================ */
@media print {
  :root { --print-ink: #111; --print-line: #999; }
  * { background: transparent !important; box-shadow: none !important; text-shadow: none !important; animation: none !important; }
  html, body { background: #fff !important; color: var(--print-ink) !important; }
  body { font-size: 11pt; line-height: 1.4; }
  h1, h2, h3, h4, .kicker, .lead, .muted, p, li, span { color: var(--print-ink) !important; }

  /* Chrome and motion: hide, keep the content that remains */
  .nav-wrap, .mobile-menu, .footer__social, .modal, .hero__canvas, .hero__vignette,
  .scroll-cue, .btn, .btn-row { display: none !important; }

  /* Dark section backgrounds read as ink-wasting black boxes on paper */
  .bg-1, .bg-2, .cta-band { background: #fff !important; border-top: 1px solid var(--print-line) !important; }

  /* Links as plain text, no underline spam, no URL dumps */
  a { color: var(--print-ink) !important; text-decoration: none !important; }

  .panel, .belief, .step { break-inside: avoid; page-break-inside: avoid; }
  .container { max-width: 100% !important; }
}