/* ============================================================
   BOULDER RIVER MEDIA — Studio
   Design tokens, base, components
   ============================================================ */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 6.2vw, 7rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;     /* fills the gap in the scale */
  --space-8: 2rem;
  --space-9: 2.25rem;     /* fills the gap in the scale */
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* Surfaces — deep charcoal hierarchy */
  --color-bg: #07070a;          /* near black, faint cool bias */
  --color-surface: #0c0c12;     /* card / section */
  --color-surface-2: #14141d;   /* raised */
  --color-surface-glass: rgba(20, 20, 29, 0.55);
  --color-divider: rgba(255, 255, 255, 0.06);
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.18);

  /* Text */
  --color-text: #f4f4f6;
  --color-text-muted: #a3a3ae;
  --color-text-faint: #6b6b76;

  /* Accents — used as light, not fill.
     Violet bumped to a brighter, more saturated electric tone so it
     pops against deep black instead of fading into a muted lavender. */
  --color-blue: #6E8BFF;        /* electric cool blue (unchanged) */
  --color-blue-glow: rgba(110, 139, 255, 0.55);
  --color-violet: #B14BFF;      /* vibrant electric violet */
  --color-violet-glow: rgba(177, 75, 255, 0.55);
  --color-accent-deep: #7A2BFF; /* saturated for strokes */

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.6);
  --shadow-glow-blue: 0 0 40px rgba(110, 139, 255, 0.18);
  --shadow-glow-violet: 0 0 50px rgba(177, 75, 255, 0.22);

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-interactive: 220ms var(--ease-out);

  /* Layout */
  --content-narrow: 720px;
  --content-default: 1100px;
  --content-wide: 1320px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Type — League Spartan (display, geometric sans, no italic) + Inter Tight (body + italic accents) */
  --font-display: 'League Spartan', 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter Tight', 'Inter', system-ui, sans-serif;
  /* Italic accent words use Inter Tight italic since League Spartan has no italic. */
  --font-accent-italic: 'Inter Tight', 'Inter', system-ui, sans-serif;
  /* Labels use the same body family, uppercase + tracked. */
  --font-label: 'Inter Tight', 'Inter', system-ui, sans-serif;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-20);
  background: var(--color-bg);
  color: var(--color-text);
  hanging-punctuation: first last;
}

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
ul[role='list'], ol[role='list'] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.025em; }
p { text-wrap: pretty; max-width: 64ch; }
a { color: inherit; text-decoration: none; }

::selection {
  background: rgba(110, 139, 255, 0.35);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Ambient background — disabled
   The two large fixed-position blue/violet orbs that previously
   bled color across the entire page have been removed. Color now
   comes only from the accent words and the Roots dusk photo.
   ============================================================ */
.atmosphere { display: none; }
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 2;
}
.wrap-wide { max-width: var(--content-wide); }
.wrap-narrow { max-width: var(--content-narrow); }

main { position: relative; z-index: 2; }

section {
  position: relative;
  padding-block: clamp(5rem, 10vw, 9rem);
}

/* Section label — small caps eyebrow */
.eyebrow {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Display headings — League Spartan, lighter weight to feel editorial not chunky */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;     /* League Spartan is already condensed; gentler than Instrument */
  line-height: 1.0;
}
.display em,
.brief-intro h2 em,
.work-head h2 em,
.cap-head h2 em,
.about-inner h2 em,
.build-head h2 em,
.process-head h2 em,
.process-close-title em {
  /* Italic flourish: League Spartan has no italic, so we switch families.
     ============================================================
     CROSS-BROWSER NOTES (important):
     - `filter: drop-shadow()` combined with `background-clip: text` is
       fragile in older Chrome / Safari builds — the gradient mask can
       silently fall back to the `color` value (transparent), making the
       text disappear or render as plain inherited white.
     - We replace the filter glow with `text-shadow` (works everywhere
       since 2012) and keep the gradient as a layered background.
     - Fallback color is set to var(--color-blue) so even if the browser
       fails to apply background-clip, the words still read as colored
       instead of vanishing. The cascade ensures the gradient overrides
       when supported.
     ============================================================ */
  font-family: var(--font-accent-italic);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.015em;

  /* Match the cap-height of the surrounding League Spartan display font
     so that if Inter Tight italic fails to load, the substituted system
     italic doesn't suddenly render at a wildly different visual size.
     Without this, fallback fonts can appear 10-20% larger/smaller and
     break the heading rhythm. */
  font-size-adjust: 0.52;

  /* Solid-color fallback for browsers that don't apply background-clip
     to text (or apply it inconsistently). They get a flat blue accent,
     never an invisible word. */
  color: var(--color-blue);

  background-image: linear-gradient(120deg, var(--color-blue) 0%, var(--color-violet) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Vibrant aura — text-shadow instead of filter:drop-shadow to avoid
     the Chromium filter+background-clip rendering bug. */
  text-shadow:
    0 0 12px rgba(110, 139, 255, 0.55),
    0 0 36px rgba(177, 75, 255, 0.40),
    0 0 80px rgba(177, 75, 255, 0.18);
}

/* Progressive enhancement: only browsers that fully support
   `background-clip: text` get the transparent fill. The @supports
   guard prevents the transparent-text disaster on Edge/Chrome builds
   that parse the property but render it inconsistently. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .display em,
  .brief-intro h2 em,
  .work-head h2 em,
  .cap-head h2 em,
  .about-inner h2 em,
  .build-head h2 em,
  .process-head h2 em,
  .process-close-title em {
    color: transparent;
  }
}

/* ============================================================
   Header — glass nav
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: var(--space-4) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: padding 320ms var(--ease-out), background 320ms var(--ease-out),
              backdrop-filter 320ms var(--ease-out);
  background: transparent;
}
.site-header.is-scrolled {
  padding: var(--space-3) var(--gutter);
  /* Frosted glass kicks in only after scrolling. */
  background: linear-gradient(to bottom, rgba(7,7,10,0.78), rgba(7,7,10,0.62));
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--color-divider);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
}
.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1;
  white-space: nowrap;
  /* Subtle premium glow — just enough to feel intentional */
  text-shadow: 0 0 18px rgba(140, 120, 255, 0.18);
  transition: color var(--transition-interactive), text-shadow var(--transition-interactive);
}
.brand:hover .brand-wordmark {
  color: #fff;
  text-shadow: 0 0 22px rgba(140, 120, 255, 0.32);
}
.brand-divider {
  width: 1px;
  height: 14px;
  background: var(--color-border);
}
.brand-tag { color: var(--color-text-faint); }

.nav-primary {
  display: none;
  align-items: center;
  gap: var(--space-8);
}
@media (min-width: 880px) { .nav-primary { display: flex; } }
.nav-primary a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: -0.005em;
  position: relative;
  padding-block: var(--space-2);
}
.nav-primary a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--color-blue);
  transition: width var(--transition-interactive);
}
.nav-primary a:hover { color: var(--color-text); }
.nav-primary a:hover::after { width: 100%; }

.nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(110, 139, 255, 0.45);
  border-radius: 999px;
  isolation: isolate;
  transition: background var(--transition-interactive),
              border-color var(--transition-interactive),
              transform var(--transition-interactive);
  animation: nav-cta-breathe 3.6s ease-in-out infinite;
  /* keep label above pseudo layers */
}
.nav-cta > * { position: relative; z-index: 2; }

/* Soft outer glow halo — breathes blue → violet → blue */
.nav-cta::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background:
    radial-gradient(60% 120% at 0% 50%, rgba(110, 139, 255, 0.55), transparent 70%),
    radial-gradient(60% 120% at 100% 50%, rgba(177, 75, 255, 0.55), transparent 70%);
  filter: blur(12px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  animation: nav-cta-halo 4.2s ease-in-out infinite;
  transition: opacity var(--transition-interactive), filter var(--transition-interactive);
}

/* Sweeping sheen across the surface — catches the eye without being loud */
.nav-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 40%,
    rgba(177, 75, 255, 0.28) 50%,
    rgba(110, 139, 255, 0.28) 60%,
    transparent 70%,
    transparent 100%
  );
  background-size: 250% 100%;
  animation: nav-cta-sheen 5.5s linear infinite;
  mix-blend-mode: screen;
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
}

.nav-cta:hover {
  background: rgba(110, 139, 255, 0.16);
  border-color: rgba(177, 75, 255, 0.85);
  transform: translateY(-1px);
}
.nav-cta:hover::before {
  opacity: 0.9;
  filter: blur(16px);
}
.nav-cta:hover::after {
  animation-duration: 2.4s;
  opacity: 1;
}

.nav-cta .arrow {
  transition: transform var(--transition-interactive),
              filter var(--transition-interactive);
  filter: drop-shadow(0 0 6px rgba(110, 139, 255, 0.5));
}
.nav-cta:hover .arrow {
  transform: translateX(2px);
  filter: drop-shadow(0 0 10px rgba(177, 75, 255, 0.85));
}

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .nav-cta,
  .nav-cta::before,
  .nav-cta::after {
    animation: none;
  }
}

@keyframes nav-cta-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110, 139, 255, 0.0),
                        0 0 18px rgba(110, 139, 255, 0.20); }
  50%      { box-shadow: 0 0 0 0 rgba(177, 75, 255, 0.0),
                        0 0 28px rgba(177, 75, 255, 0.32); }
}
@keyframes nav-cta-halo {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.06); opacity: 0.85; }
}
@keyframes nav-cta-sheen {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* ============================================================
   PAGE STARFIELD — continuous twinkling field that runs behind
   Brief ("Getting started") through Process ("How it works").
   Hero has its own dedicated, mountain-masked star layer above.
   Roots and Final CTA each have their own backdrops below.
   ============================================================
   The wrapper provides the dark surface and the stacking context
   so absolutely-positioned star layers never bleed beyond it. */
.page-stars-wrap {
  position: relative;
  /* Pure black surface so this region flows seamlessly into the Roots
     blackout image (which begins at #000 at its top edge). The body's
     slightly-tinted --color-bg would otherwise create a visible seam
     at the Process → Roots boundary. */
  background-color: #000;
}
.page-stars-wrap > section {
  position: relative;
  z-index: 1;
}
.page-stars-wrap > .brief-modal {
  /* The brief modal also lives inside the wrapper. Even though native
     <dialog>.showModal() lifts it to the top layer, give it an explicit
     z-index in case the browser falls back to the [open] attribute path. */
  z-index: 2;
}

/* The starfield itself. Empty container — JS populates it at runtime
   with randomly-placed .hero-star elements (same class as the hero so
   they share twinkle animation, halos, and reduced-motion behavior).
   No tiled gradients, no glow halos — just stars. */
.page-stars {
  position: absolute;
  inset: 0;
  z-index: 0;             /* default stacking; sections render after this */
  pointer-events: none;
  overflow: hidden;
}
/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: var(--space-32);
  padding-bottom: var(--space-20);
  overflow: hidden;
}
/* Hero background image — isolated on its own compositor layer so the parallax
   stays at 60/120fps. Driven by CSS scroll-timeline (no scroll listener).

   Negative inset on BOTH top and bottom gives the image extra room above and
   below the .hero container. The bg starts shifted up by 150px (translateY)
   and ends at 0, so as the page scrolls, the bg drifts DOWN relative to the
   hero — the classic parallax sensation. The 18% top + 8% bottom buffers
   ensure the image always covers the hero box at every scroll position. */
.hero-bg {
  position: absolute;
  inset: -18% 0 -8% 0;
  z-index: 0;
  background-image: url('../assets/hero-cinematic.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  /* Promote to its own compositor layer cleanly. */
  transform: translate3d(0, -120px, 0) scale(1.06);
  transform-origin: center top;
  will-change: transform;
  backface-visibility: hidden;
  contain: layout paint;
}

/* Native, compositor-driven scroll parallax. Tied to the document's scroll
   from 0 → 1 viewport. Within that range the bg image translates a small,
   carefully-tuned amount so it appears to move slower than the foreground —
   the classic parallax effect, ~18% of scroll speed.

   Modern Chrome, Edge, and Firefox support animation-timeline. Safari is
   adding it; until it ships, the hero stays pleasantly static there — still
   better than janky JS parallax. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-bg {
      animation: hero-parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }
}
/* As the page scrolls, the bg image translates from -120px (shifted up) to
   +30px (shifted slightly down) over 100vh of scroll — net 150px of motion.
   Combined with the negative top/bottom insets, the image always covers the
   hero box. The bg appears to drift down relative to the foreground content,
   producing the classic parallax sensation at ~17% of scroll speed. */
@keyframes hero-parallax {
  from { transform: translate3d(0, -120px, 0) scale(1.06); }
  to   { transform: translate3d(0,   30px, 0) scale(1.06); }
}
@media (max-width: 720px) {
  /* Smaller translation on phones — less repaint area, still feels alive. */
  @keyframes hero-parallax {
    from { transform: translate3d(0, -70px, 0) scale(1.06); }
    to   { transform: translate3d(0,  20px, 0) scale(1.06); }
  }
}

/* Atmosphere overlay — sits above the moving image but does NOT move with it.
   Same z-index as .hero-bg; DOM order puts it on top of the image. Stars
   (z-index 1) and content (z-index 2) layer above. Keeping the overlay on a
   static, non-animated layer lets the compositor cache it once and skip
   repaints during scroll. */
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 30% 30%, rgba(7,7,10,0.10), rgba(7,7,10,0.55) 60%, rgba(7,7,10,0.95) 100%),
    linear-gradient(180deg, rgba(7,7,10,0.45) 0%, rgba(7,7,10,0.15) 30%, rgba(7,7,10,0.92) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}
@media (min-width: 1080px) {
  .hero-content { grid-template-columns: 1.7fr 1fr; align-items: end; }
}

.hero-headline {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 600;             /* heavier League Spartan for graphic confidence */
  letter-spacing: -0.04em;      /* tight tracking — block of type, not loose words */
  line-height: 0.92;            /* tighter leading — lines lock together */
}
.hero-headline .ln {
  display: block;
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  animation: hero-line 1.1s var(--ease-out) forwards;
}
.hero-headline .ln:nth-child(1) { animation-delay: 0.10s; }
.hero-headline .ln:nth-child(2) { animation-delay: 0.25s; }
.hero-headline .ln:nth-child(3) { animation-delay: 0.40s; }
/* ============================================================
   Aurora accent — "built in days."
   The Ostylowany aurora effect is a stack of blurred colored
   blobs that drift, blend, and morph. Adapting that to text on
   a photo background means we cannot paint a visible rectangle
   behind the word — instead, we paint the aurora ONLY inside
   the letterforms via `background-clip: text`. Four colored
   radial gradients drift through the text via animated
   background-position; a multi-layer drop-shadow gives the
   outer saber bloom that fades cleanly into the night sky.
   ============================================================ */
.aurora-line {
  position: relative;
}
.aurora-stage {
  position: relative;
  display: inline-block;
  isolation: isolate;
  /* No backplate, no overflow clipping. The stage is invisible. */
}
/* The legacy blob DOM is unused under this approach. */
.aurora,
.aurora__item { display: none; }

.aurora-text {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: var(--font-accent-italic);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.015em;

  /* Aurora as text fill: six color stops stacked, each animated
     to a different position so the aurora flows through the
     letters with rich, saturated transitions. The base layer
     is a deep cobalt instead of pastel so colors stay vivid. */
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  background-color: #6a8bff; /* vivid fallback if gradients fail */
  background-image:
    radial-gradient(closest-side, rgba(180, 210, 255, 1) 0%, rgba(180, 210, 255, 0) 65%), /* bright cool highlight (no pure white) */
    radial-gradient(closest-side, rgba(214, 92, 255, 1) 0%, rgba(214, 92, 255, 0) 70%),   /* hot magenta */
    radial-gradient(closest-side, rgba(76, 130, 255, 1) 0%, rgba(76, 130, 255, 0) 70%),   /* electric cobalt */
    radial-gradient(closest-side, rgba(120, 200, 255, 1) 0%, rgba(120, 200, 255, 0) 70%), /* cyan-edge */
    radial-gradient(closest-side, rgba(140, 90, 255, 1) 0%, rgba(140, 90, 255, 0) 70%),   /* indigo violet */
    linear-gradient(95deg, #3d5cff 0%, #7c5bff 50%, #b14cff 100%);                         /* deep cool substrate */
  background-repeat: no-repeat;
  background-size:
    100% 240%,
    180% 320%,
    200% 280%,
    170% 300%,
    220% 320%,
    100% 100%;
  background-position:
    20% 50%, 0% 50%, 100% 30%, 30% 100%, 100% 100%, 0 0;
  animation: aurora-drift 11s ease-in-out infinite alternate;

  /* Saber bloom — stronger, hotter at the core, fading wide */
  filter:
    drop-shadow(0 0 8px rgba(180, 200, 255, 0.85))
    drop-shadow(0 0 22px rgba(110, 139, 255, 0.65))
    drop-shadow(0 0 50px rgba(140, 90, 255, 0.42))
    drop-shadow(0 0 100px rgba(177, 76, 255, 0.22));
}
@keyframes aurora-drift {
  0%   { background-position:  20% 50%,    0% 50%,  100% 30%,   30% 100%, 100% 100%, 0 0; }
  25%  { background-position:  60% 20%,   80% 10%,   30% 70%,  100% 30%,   0% 80%,   0 0; }
  50%  { background-position:  90% 80%,   30% 90%,   80% 100%,  0% 50%,   60% 20%,   0 0; }
  75%  { background-position:  30% 30%,  100% 60%,    0% 0%,    70% 80%,  20% 100%,  0 0; }
  100% { background-position:  70% 60%,   50% 100%,   60% 30%,  100% 0%,   80% 50%,  0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-text { animation: none; }
}
@keyframes hero-line {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.hero-eyebrow {
  margin-bottom: var(--space-8);
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out) 0s forwards;
}
.hero-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out) 0.6s forwards;
}
.hero-side p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 38ch;
  line-height: 1.6;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll cue */
.hero-meta {
  position: absolute;
  bottom: var(--space-8);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out) 0.9s forwards;
}
.hero-meta .scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.hero-meta .cue-line {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-blue), transparent);
  background-size: 200% 100%;
  animation: cue-pulse 2.6s linear infinite;
}
@keyframes cue-pulse {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 999px;
  transition: all var(--transition-interactive);
  border: 1px solid transparent;
  position: relative;
  isolation: isolate;
}
.btn .arrow { transition: transform var(--transition-interactive); display: inline-block; }
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary {
  color: #07070a;
  background: linear-gradient(180deg, #ffffff 0%, #e6e6ec 100%);
  /* (button surface stays neutral white — reserved for the primary CTA pill) */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 10px 40px rgba(110, 139, 255, 0.25),
    0 0 60px rgba(177, 75, 255, 0.18);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12),
    0 14px 50px rgba(110, 139, 255, 0.40),
    0 0 80px rgba(177, 75, 255, 0.28);
}

.btn-ghost {
  color: var(--color-text);
  border-color: var(--color-border);
  background: rgba(255,255,255,0.02);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--color-border-strong);
}

.btn-link {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-interactive), border-color var(--transition-interactive);
}
.btn-link:hover { color: var(--color-text); border-color: var(--color-blue); }

/* ============================================================
   Brief / Roadmap section — interactive stub
   ============================================================ */
/* Brief / Work / Capabilities sit on plain black. Visual interest
   comes from typography, contrast, and a single accented word per
   heading in the blue→violet gradient — no radial blooms, no seams,
   no tinted washes. */
.brief { position: relative; }
.brief-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}
@media (min-width: 1000px) {
  .brief-grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-20); }
}

.brief-intro h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  margin-block: var(--space-5) var(--space-6);
}
.brief-intro p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  margin-bottom: var(--space-6);
}
.brief-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
}
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

/* Roadmap card */
.roadmap {
  background: linear-gradient(180deg, rgba(20, 20, 29, 0.65), rgba(12, 12, 18, 0.65));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.roadmap::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(110, 139, 255, 0.45), transparent 30%, transparent 70%, rgba(177, 75, 255, 0.30));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.roadmap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}
.roadmap-head .label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.roadmap-head .label .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-blue);
  box-shadow: 0 0 12px var(--color-blue-glow);
  animation: pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
.roadmap-step-counter {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.14em;
}

.roadmap-question {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-block: var(--space-6) var(--space-5);
  letter-spacing: -0.02em;
}

.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
@media (max-width: 500px) {
  .choice-grid { grid-template-columns: 1fr; }
}
.choice {
  text-align: left;
  padding: var(--space-4) var(--space-5);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: all var(--transition-interactive);
}
.choice .choice-title {
  font-size: var(--text-sm);
  font-weight: 500;
}
.choice .choice-sub {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-family: var(--font-label);
  letter-spacing: 0.06em;
}
.choice:hover {
  border-color: var(--color-blue);
  background: rgba(110, 139, 255, 0.06);
  box-shadow: 0 0 0 1px rgba(110, 139, 255, 0.30);
}
.choice.is-selected {
  border-color: var(--color-violet);
  background: rgba(177, 75, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(177, 75, 255, 0.40), 0 0 24px rgba(177, 75, 255, 0.18);
}

/* Roadmap progress + summary */
.roadmap-progress {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.roadmap-progress .seg {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.roadmap-progress .seg.is-active::after,
.roadmap-progress .seg.is-done::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-blue), var(--color-violet));
  box-shadow: 0 0 12px rgba(110, 139, 255, 0.5);
}

.roadmap-summary {
  margin-top: var(--space-2);
  padding: var(--space-5);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  line-height: 1.7;
  min-height: 80px;
}
.roadmap-summary .key { color: var(--color-text-faint); margin-right: var(--space-2); }
.roadmap-summary .val { color: var(--color-text); }
.roadmap-summary .val.empty { color: var(--color-text-faint); }

.roadmap-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
}
.roadmap-actions .step-back {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
}
.roadmap-actions .step-back:hover { color: var(--color-text); }
.roadmap-actions .step-back:disabled { opacity: 0.3; cursor: not-allowed; }

.btn-send {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #e3e3ea);
  color: #07070a;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 24px rgba(110, 139, 255, 0.22);
  transition: all var(--transition-interactive);
}
.btn-send:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}
.btn-send:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 12px 36px rgba(177, 75, 255, 0.35);
}

/* ============================================================
   Selected Work — editorial grid (plain black backdrop)
   ============================================================ */
.work { position: relative; }

.work-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-16);
  max-width: 800px;
}
.work-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: -0.03em;
}
.work-head .section-lede {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.6;
  max-width: 56ch;
  margin-top: var(--space-2);
}

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
}
@media (min-width: 900px) {
  .work-grid { grid-template-columns: 1fr 1fr; }
  .project-link:nth-child(1) { grid-column: 1 / -1; }
}

/* Whole-card link — wraps each project article */
.project-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: transform 400ms var(--ease-out);
}
.project-link:hover { transform: translateY(-2px); }
.project-link:focus { outline: none; }
.project-link:focus-visible {
  outline: 2px solid var(--color-accent, #7C5BFF);
  outline-offset: 6px;
}

.project {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.project-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  aspect-ratio: 16 / 10;
  transition: border-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.project-link:nth-child(1) .project-frame { aspect-ratio: 16 / 8; }
.project-link:hover .project-frame {
  border-color: rgba(124, 91, 255, 0.45);
  box-shadow: 0 24px 60px -28px rgba(124, 91, 255, 0.45), 0 0 0 1px rgba(124, 91, 255, 0.18);
}

.project-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter 600ms var(--ease-out);
}
.project-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(7,7,10,0.65) 100%);
  pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
.project-link:hover .project-frame img {
  transform: scale(1.04);
  filter: saturate(1.08) brightness(1.05);
}

/* "Live site" pill — sits in the top-right of the frame */
.project-launch {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(7, 7, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out), background 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.project-launch svg { display: block; opacity: 0.9; }
.project-link:hover .project-launch,
.project-link:focus-visible .project-launch {
  opacity: 1;
  transform: translateY(0);
  background: rgba(124, 91, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.28);
}
@media (hover: none) {
  .project-launch { opacity: 1; transform: none; }
}

/* "Visit live site" text link cue under the description */
.project-visit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: 4px;
  align-self: flex-start;
  margin-top: var(--space-1);
  transition: color 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.project-visit .arrow {
  display: inline-block;
  transition: transform 280ms var(--ease-out);
}
.project-link:hover .project-visit {
  color: #fff;
  border-color: rgba(124, 91, 255, 0.6);
}
.project-link:hover .project-visit .arrow { transform: translate(2px, -2px); }

.project-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-4);
}
.project-meta .sector { color: var(--color-text-muted); }
.project-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.project-desc {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  max-width: 56ch;
}

/* ============================================================
   Capabilities — editorial outcomes
   ============================================================ */
/* ============================================================
   Capabilities — bento grid with image-led tiles
   ============================================================
   Asymmetric layout: one feature tile (large), two wide tiles,
   two compact tiles. Each tile has a layered structure:
     .bento-img    — background image, painted over the tile
     .bento-tint   — dark gradient veil for legibility
     .bento-content — typography on top
   Hover: image scales subtly, tint deepens, glowing border
   appears on the tile edge. */
.capabilities { position: relative; }
.cap-head {
  margin-bottom: var(--space-12);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .cap-head { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}
.cap-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
}
.cap-head p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  align-self: end;
  max-width: 50ch;
}

/* The bento grid itself — explicit placement so tiles fill cleanly.
   Mobile (default): 1-column stack.
   ≥700px: 2-col, feature spans both, others auto-flow.
   ≥1100px: 6-col × 3-row mosaic with named placement.

   Tile order in markup → grid placement at desktop:
     1. feature   → cols 1-4, rows 1-2  (large outcome tile)
     2. pressure  → cols 5-6, row 1     (compact, top-right)
     3. conv      → cols 5-6, row 2     (compact, mid-right)
     4. spotlight → cols 1-3, row 3     (medium, bottom-left)
     5. quiet     → cols 4-6, row 3     (medium, bottom-right)
*/
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.85rem, 1.4vw, 1.25rem);
}
@media (min-width: 700px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(220px, auto); }
  .bento-feature { grid-column: 1 / -1; }
  .bento-wide    { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: minmax(240px, 1fr) minmax(240px, 1fr) minmax(280px, 1fr);
  }
  /* Feature: top-left big tile */
  .bento-feature  { grid-column: 1 / 5; grid-row: 1 / 3; }
  /* The two compacts ride the right rail next to the feature */
  .bento > .bento-tile:nth-child(2) { grid-column: 5 / 7; grid-row: 1; }
  .bento > .bento-tile:nth-child(3) { grid-column: 5 / 7; grid-row: 2; }
  /* Bottom row: two medium tiles, 3 cols each */
  .bento > .bento-tile:nth-child(4) { grid-column: 1 / 4; grid-row: 3; }
  .bento > .bento-tile:nth-child(5) { grid-column: 4 / 7; grid-row: 3; }
}

.bento-tile {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--color-border);
  background: rgba(15, 15, 22, 0.55);
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 260px;
  transition: transform 480ms var(--ease-out),
              border-color 320ms var(--ease-out),
              box-shadow 480ms var(--ease-out);
}
.bento-feature { min-height: 520px; }
@media (min-width: 700px)  { .bento-feature { min-height: 480px; } }
@media (min-width: 1100px) { .bento-feature { min-height: 0; } }

.bento-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transition: transform 900ms var(--ease-out), filter 900ms var(--ease-out);
  transform: scale(1.04);
  filter: saturate(115%) contrast(102%);
}
.bento-img--top   { background-position: center top; }
.bento-img--right { background-position: 70% center; }

/* Dark tint that reads under the type — stronger near the bottom
   where the content sits, near-clear at the top so the image breathes. */
.bento-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(7, 7, 10, 0.20) 0%,
      rgba(7, 7, 10, 0.55) 55%,
      rgba(7, 7, 10, 0.92) 100%);
  transition: opacity 320ms var(--ease-out);
}

.bento-content {
  position: relative;
  z-index: 2;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}
.bento-tag {
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-blue);
  display: inline-block;
  width: fit-content;
  padding: 0.35em 0.7em;
  border: 1px solid rgba(110, 139, 255, 0.30);
  background: rgba(110, 139, 255, 0.08);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bento-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-text);
  text-wrap: balance;
}
.bento-feature .bento-title {
  font-size: clamp(2rem, 3.6vw, 3rem);
}
.bento-title em {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  color: var(--color-blue);
}
.bento-desc {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.55;
  max-width: 56ch;
}
.bento-feature .bento-desc { font-size: 1.05rem; }
.bento-compact .bento-desc { font-size: 0.95rem; }

/* Hover state — elevation, image gentle zoom, blue edge glow. */
@media (hover: hover) {
  .bento-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(110, 139, 255, 0.35);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.04) inset,
      0 12px 40px -16px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(110, 139, 255, 0.15),
      0 0 60px -20px rgba(110, 139, 255, 0.25);
  }
  .bento-tile:hover .bento-img { transform: scale(1.08); }
  .bento-tile:hover .bento-tint { opacity: 0.92; }
}

/* ============================================================
   Process — phase cards on a glowing rail, atmospheric backdrop
   ============================================================
   The section paints an ambient "river of light" image behind
   the phases, faded out at the edges so it merges into the page.
   Each phase is a numbered chip + a card on a translucent dark
   surface. A glowing rail (gradient line) connects them. */
.process {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Pull a touch closer to capabilities for sequence flow. */
  padding-block: clamp(5rem, 10vw, 8rem);
}
/* ---------- Process section local backdrop ----------
   The starfield is now supplied at the page level by .page-stars-wrap
   which spans Brief through Process. The Process section keeps a
   transparent backdrop so the continuous starfield shows through. */

.process-head {
  margin-bottom: var(--space-16);
  max-width: 720px;
}
.process-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  margin-block: var(--space-4) var(--space-5);
  text-wrap: balance;
}
.process-head p { color: var(--color-text-muted); font-size: 1.05rem; }

/* The phase rail — a thin glowing line that traces through the four
   numbered chips. Drawn as a pseudo-element on the .phases container.
   Desktop: horizontal across the row of chips. Mobile: vertical down
   the left side of the chips. Animated reveal: scaleX/scaleY 0→1 in. */
.phases {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 900px) {
  .phases {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2vw, 1.75rem);
  }
  /* Horizontal rail behind the chips */
  .phases::before {
    content: "";
    position: absolute;
    top: 16px; /* aligns with new sleek chip center */
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(110, 139, 255, 0.55) 12%,
      rgba(177, 75, 255, 0.55) 50%,
      rgba(110, 139, 255, 0.55) 88%,
      transparent 100%);
    box-shadow: 0 0 12px rgba(110, 139, 255, 0.40);
    transform-origin: left center;
    animation: rail-trace 1400ms var(--ease-out) 200ms both;
  }
}
@keyframes rail-trace {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

.phase {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 900px) {
  .phase { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* The numbered phase marker — a sleek glass capsule, not a disc.
   Hairline border + frosted blur + monospaced number with a pulsing
   blue/purple dot to the left. Reads as a HUD element, not a button. */
.phase-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.85rem 0.45rem 0.7rem;
  border-radius: 999px;
  flex-shrink: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    rgba(12, 14, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 0 0 4px rgba(7, 7, 10, 0.92), /* punch through the rail */
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 24px -10px rgba(110, 139, 255, 0.45);
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  z-index: 1;
  transition: transform 320ms var(--ease-out),
              border-color 320ms var(--ease-out),
              box-shadow 320ms var(--ease-out);
}
.phase-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-blue, #6e8bff);
  box-shadow: 0 0 10px rgba(110, 139, 255, 0.85), 0 0 2px rgba(255,255,255,0.6) inset;
  flex-shrink: 0;
  animation: phase-dot 2.4s ease-in-out infinite;
}
@keyframes phase-dot {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
@media (min-width: 900px) {
  /* Center the marker over the rail on desktop */
  .phase-chip { margin: 0 auto; }
}
.phase-chip span {
  font-feature-settings: "tnum";
  font-weight: 500;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.92);
}

/* The card itself — typography on a soft translucent dark surface. */
.phase-card {
  position: relative;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 20, 30, 0.55), rgba(15, 15, 22, 0.40));
  border: 1px solid var(--color-border);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  transition: transform 320ms var(--ease-out),
              border-color 320ms var(--ease-out),
              box-shadow 320ms var(--ease-out);
}
@media (min-width: 900px) {
  .phase-card { text-align: left; }
}
.phase-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}
.phase-time {
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: var(--space-3);
}
.phase-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

@media (hover: hover) {
  .phase:hover .phase-chip {
    transform: translateY(-1px);
    border-color: rgba(180, 195, 255, 0.45);
    box-shadow:
      0 0 0 4px rgba(7, 7, 10, 0.95),
      0 12px 36px -12px rgba(110, 139, 255, 0.65),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  .phase:hover .phase-card {
    transform: translateY(-2px);
    border-color: rgba(110, 139, 255, 0.30);
    box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.5);
  }
}

/* ============================================================
   Roots — Montana identity
   ============================================================ */
.roots {
  position: relative;
  padding-block: clamp(7rem, 14vw, 12rem);
  overflow: hidden;
}
.roots-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* New blackout ridgeline: near-pure black sky with silhouetted
     mountains in the lower third. Designed to blend seamlessly into
     the surrounding pure-black sections instead of fighting them. */
  background-image: url('../assets/roots-blackout.jpg');
  background-size: cover;
  background-position: center bottom;
}
.roots-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Light left-side darkening for legibility — much gentler than the
       previous photo required since the new image is already near-black. */
    linear-gradient(90deg, rgba(7,7,10,0.55) 0%, rgba(7,7,10,0.30) 50%, transparent 100%),
    /* Vertical anchoring: pure black at the very top so it dissolves
       cleanly out of the Process section, transparent through the
       middle so the ridgeline reads, and pure black again at the
       bottom so the section dissolves into the footer. */
    linear-gradient(180deg,
      #000 0%,
      rgba(0,0,0,0.85) 6%,
      rgba(7,7,10,0.45) 16%,
      transparent 30%,
      transparent 75%,
      rgba(7,7,10,0.85) 94%,
      var(--color-bg) 100%);
}
.roots-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}
@media (min-width: 900px) {
  .roots-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-20); }
}
.roots-copy h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin-block: var(--space-5) var(--space-8);
}
.roots-copy h2 em {
  font-family: var(--font-accent-italic);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.015em;
  /* Solid fallback color so older Chrome/Safari that fail at background-clip
     get a visible accent rather than invisible text. See notes at .display em. */
  color: var(--color-blue);
  background-image: linear-gradient(120deg, #4A7BFF 0%, #7C5BFF 45%, #B14CFF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 14px rgba(110, 139, 255, 0.55),
    0 0 40px rgba(177, 75, 255, 0.42),
    0 0 90px rgba(177, 75, 255, 0.20);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .roots-copy h2 em { color: transparent; }
}
.roots-copy p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  margin-bottom: var(--space-5);
  max-width: 56ch;
}
.roots-copy p:last-of-type { margin-bottom: var(--space-8); }

.roots-meta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
}
.mim-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.mim-badge img { width: 100%; height: 100%; object-fit: cover; }
.roots-meta-text {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.roots-meta-text strong { color: var(--color-text); font-weight: 500; }

/* ============================================================
   Roots monogram — the BRM logo materializing into the section.
   Scroll-driven: enters blurred + dim with a violet halo, then
   resolves to a crisp mark as the section comes into view.
   ============================================================ */
.roots-mark {
  margin: var(--space-6) 0 var(--space-3) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Slim divider rule so the mark feels like a signature without breathing room above */
  padding-top: var(--space-5);
  padding-bottom: 0;
  border-top: 1px solid var(--color-divider);
}
.roots-mark img {
  width: clamp(300px, 100%, 540px);
  height: auto;
  object-fit: contain;
  display: block;
  margin-inline: auto;
  max-width: 100%;
  /* Default state — fully visible. Browsers without animation-timeline (Safari,
     older iOS) see the crisp final logo with a soft halo, not the blurred
     entry state. The scroll-driven version below opts in for Chromium/Firefox. */
  opacity: 1;
  filter:
    drop-shadow(0 0 14px rgba(177, 75, 255, 0.28))
    drop-shadow(0 0 36px rgba(110, 139, 255, 0.14));
  transition: filter 600ms var(--ease-out), opacity 600ms var(--ease-out);
}
/* Scroll-driven materialization — only when the section enters view AND only
   in browsers that support animation-timeline. Safari/iOS skip this entirely
   and keep the crisp default state above. */
@supports (animation-timeline: view()) {
  .roots-mark img {
    animation: roots-mark-in linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
  @keyframes roots-mark-in {
    0% {
      opacity: 0;
      filter:
        blur(14px)
        drop-shadow(0 0 28px rgba(177, 75, 255, 0.75))
        drop-shadow(0 0 80px rgba(110, 139, 255, 0.45));
    }
    60% {
      opacity: 0.92;
      filter:
        blur(2px)
        drop-shadow(0 0 18px rgba(177, 75, 255, 0.45))
        drop-shadow(0 0 50px rgba(110, 139, 255, 0.22));
    }
    100% {
      opacity: 1;
      filter:
        blur(0)
        drop-shadow(0 0 14px rgba(177, 75, 255, 0.28))
        drop-shadow(0 0 36px rgba(110, 139, 255, 0.14));
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .roots-mark img {
    opacity: 1;
    filter:
      blur(0)
      drop-shadow(0 0 14px rgba(177, 75, 255, 0.28));
  }
}

.roots-stats {
  align-self: end;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgba(7, 7, 10, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
.stat {
  padding: var(--space-6);
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.stat:nth-child(2n) { border-right: none; }
.stat:nth-last-child(-n+2) { border-bottom: none; }
.stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  letter-spacing: -0.035em;
  line-height: 1;
  background: linear-gradient(120deg, #4A7BFF 0%, #7C5BFF 45%, #B14CFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--space-3);
  filter:
    drop-shadow(0 0 14px rgba(110, 139, 255, 0.55))
    drop-shadow(0 0 40px rgba(177, 75, 255, 0.42))
    drop-shadow(0 0 90px rgba(177, 75, 255, 0.20));
  font-variant-numeric: tabular-nums;
}
.stat-value .stat-num {
  display: inline-block;
  min-width: 1ch;
}
.stat-label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ============================================================
   Final CTA — concierge
   ============================================================ */
.cta-final {
  position: relative;
  padding-block: clamp(6rem, 12vw, 10rem);
  /* No hard line at the top — the orbs handle the transition so the
     section reads as a continuation of the page, not a new container.
     overflow stays visible so the glow can bleed upward into Roots. */
  border-top: none;
}
.cta-final-bg {
  /* Two large, soft orbs anchored on either side. They extend ABOVE
     the section (negative top) so the glow bleeds upward into the
     bottom of the Roots section, making the join feel atmospheric
     instead of seamed. Same blur and opacities as the other accent
     glows so it ties into the rest of the site’s visual language. */
  position: absolute;
  top: -25%;
  left: 0;
  right: 0;
  bottom: -10%;
  z-index: 0;
  background:
    radial-gradient(55% 50% at 22% 55%, rgba(74, 91, 255, 0.32), transparent 65%),
    radial-gradient(50% 50% at 82% 65%, rgba(177, 75, 255, 0.28), transparent 65%);
  filter: blur(60px);
  pointer-events: none;
}
.cta-final-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 900px) {
  .cta-final-grid { grid-template-columns: 1.4fr 1fr; gap: var(--space-20); }
}
.cta-final h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin-block: var(--space-5) var(--space-6);
}
.cta-final h2 em {
  font-family: var(--font-accent-italic);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--color-blue);  /* fallback */
  background-image: linear-gradient(120deg, #4A7BFF 0%, #7C5BFF 45%, #B14CFF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 14px rgba(110, 139, 255, 0.55),
    0 0 40px rgba(177, 75, 255, 0.42),
    0 0 90px rgba(177, 75, 255, 0.20);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cta-final h2 em { color: transparent; }
}
.cta-final p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  max-width: 52ch;
}

.contact-card {
  background: linear-gradient(180deg, rgba(20,20,29,0.7), rgba(12,12,18,0.7));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  overflow: hidden;
}
.contact-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(110, 139, 255, 0.40), transparent 40%, transparent 70%, rgba(177, 75, 255, 0.30));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.contact-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}
.contact-row:last-child { border-bottom: none; padding-bottom: 0; }
.contact-row .label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.contact-row a, .contact-row .val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.015em;
  color: var(--color-text);
}
.contact-row a {
  transition: filter 220ms var(--ease-out);
}
.contact-row a:hover {
  color: var(--color-blue);  /* fallback */
  background-image: linear-gradient(120deg, #4A7BFF 0%, #7C5BFF 45%, #B14CFF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 12px rgba(110, 139, 255, 0.55),
    0 0 32px rgba(177, 75, 255, 0.40),
    0 0 70px rgba(177, 75, 255, 0.18);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .contact-row a:hover { color: transparent; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 2;
  padding: var(--space-16) var(--gutter) var(--space-8);
  border-top: 1px solid var(--color-divider);
  background: var(--color-bg);
}
.footer-grid {
  max-width: var(--content-default);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-16); }
}
/* ============================================================
   Footer brand signature — logo + name with steady soft glow.
   ============================================================ */
.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.footer-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: clamp(72px, 9vw, 96px);
  height: clamp(72px, 9vw, 96px);
  text-decoration: none;
  /* Steady premium glow — quieter than the roots entrance, but always present */
  filter:
    drop-shadow(0 0 12px rgba(177, 75, 255, 0.32))
    drop-shadow(0 0 28px rgba(110, 139, 255, 0.18));
  transition: filter var(--transition-interactive), transform var(--transition-interactive);
}
.footer-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.footer-mark:hover {
  transform: translateY(-1px);
  filter:
    drop-shadow(0 0 16px rgba(177, 75, 255, 0.50))
    drop-shadow(0 0 38px rgba(110, 139, 255, 0.28));
}
.footer-brand-meta {
  min-width: 0;
}
.footer-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  letter-spacing: -0.005em;
  line-height: 1.05;
  color: var(--color-text);
  text-transform: uppercase;
}
.footer-tagline {
  margin-top: var(--space-3);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.footer-col h4 {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
  font-weight: 500;
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.footer-col a:hover { color: var(--color-text); }

.footer-bottom {
  max-width: var(--content-default);
  margin-inline: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.footer-bottom-text {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.10em;
  color: var(--color-text-faint);
}
.footer-mim {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.footer-mim img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

/* ============================================================
   Reveal — scroll-driven (no CLS — opacity + clip-path only)
   ============================================================ */
.reveal {
  opacity: 1; /* visible by default for older browsers */
}
@supports (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    filter: blur(6px);
    animation: reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  @keyframes reveal-in {
    to { opacity: 1; filter: blur(0); }
  }
}

/* Cursor glow follower for primary buttons */
.btn-primary {
  --mx: 50%;
  --my: 50%;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120px circle at var(--mx) var(--my), rgba(177, 75, 255, 0.35), transparent 60%);
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
  z-index: -1;
  pointer-events: none;
}
.btn-primary:hover::before { opacity: 1; }

/* ============================================================
   Hero — twinkling stars (sky-only, masked above mountains)
   ============================================================ */
.hero-stars {
  position: absolute;
  inset: 0;
  z-index: 1;                /* above hero-bg image, below atmosphere overlay */
  pointer-events: none;
  overflow: hidden;
  /* Mask: fully visible at the top, fades out just above the mountain ridge.
     The cinematic photo's ridgeline sits ~62% down on desktop; we taper from
     58% → 64% so stars dissolve naturally before reaching the silhouette. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 48%,
    rgba(0,0,0,0.55) 58%,
    rgba(0,0,0,0) 64%
  );
          mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 48%,
    rgba(0,0,0,0.55) 58%,
    rgba(0,0,0,0) 64%
  );
}

.hero-star {
  position: absolute;
  width: var(--s, 2px);
  height: var(--s, 2px);
  border-radius: 50%;
  background: #ffffff;
  /* Soft halo — white core with a faint cool bias to match the night palette */
  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.85),
    0 0 10px rgba(190, 210, 255, 0.45);
  opacity: 0;
  animation: hero-star-twinkle var(--dur, 4.2s) var(--ease-in-out) var(--delay, 0s) infinite;
  will-change: opacity, transform;
}

/* A pinch of the brighter stars get a faint blue tint for variety */
.hero-star.is-bright {
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.95),
    0 0 14px rgba(150, 180, 255, 0.55),
    0 0 22px rgba(110, 139, 255, 0.30);
}

@keyframes hero-star-twinkle {
  0%, 100% { opacity: var(--min, 0.15); transform: scale(0.85); }
  50%      { opacity: var(--max, 0.95); transform: scale(1); }
}

/* Respect reduced motion — hold stars at a calm steady state */
@media (prefers-reduced-motion: reduce) {
  .hero-star {
    animation: none;
    opacity: var(--min, 0.5);
  }
}

/* On narrow viewports the ridge sits a bit higher in the cropped image —
   pull the mask up slightly so stars never overlap the mountains. */
@media (max-width: 720px) {
  .hero-stars {
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 42%,
      rgba(0,0,0,0.55) 52%,
      rgba(0,0,0,0) 58%
    );
            mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 42%,
      rgba(0,0,0,0.55) 52%,
      rgba(0,0,0,0) 58%
    );
  }
}

/* ============================================================
   Mobile refinements (header + hero-meta)
   ============================================================ */

/* Compact CTA — never wrap */
.nav-cta {
  white-space: nowrap;
}

/* Below ~720px — strip the brand tagline + divider so the brand mark
   has room to breathe and the CTA stays single-line */
@media (max-width: 720px) {
  .brand-tag,
  .brand-divider {
    display: none;
  }
  .nav-cta {
    padding: 0.5rem 0.85rem;
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
  }
  .nav-cta .arrow { display: none; }
}

/* Below ~520px — drop the central scroll cue and tighten meta strip
   so V.2026 / location don't collide */
@media (max-width: 520px) {
  .hero-meta {
    bottom: var(--space-6);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    gap: var(--space-4);
  }
  .hero-meta .scroll-cue {
    display: none;
  }
}

/* Very narrow phones — keep tagline hidden and balance the two ends */
@media (max-width: 380px) {
  .hero-meta { font-size: 0.6rem; letter-spacing: 0.16em; }
  .nav-cta { padding: 0.45rem 0.7rem; }
}

/* ============================================================
   Project Brief diagnostic — premium form + structured result
   Wired to /.netlify/functions/project-brief
   ============================================================ */

.brief-tool {
  position: relative;
  border-radius: 22px;
  background:
    radial-gradient(1100px 380px at 0% 0%,   rgba(110, 130, 255, 0.12), transparent 60%),
    radial-gradient(900px  340px at 100% 100%, rgba(150, 110, 255, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(16, 18, 32, 0.78), rgba(10, 11, 22, 0.82));
  border: 1px solid rgba(120, 140, 220, 0.20);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 30px 80px -40px rgba(20, 30, 80, 0.55);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  overflow: hidden;
  isolation: isolate;
}

.brief-tool::before {
  /* very subtle top edge sheen — premium feel without extra elements */
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 170, 255, 0.45), transparent);
  pointer-events: none;
}

/* ----- Form view ----- */

/* Defensive: ensure [hidden] always wins over flex/grid display rules
   when we toggle between the form and the result inside the modal. */
.brief-form[hidden],
.brief-result[hidden] {
  display: none !important;
}

.brief-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.brief-form-head {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.brief-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  align-self: flex-start;
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(140, 160, 230, 0.30);
  background: rgba(140, 160, 230, 0.08);
}
.brief-tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-blue);
  box-shadow: 0 0 0 4px rgba(120, 140, 240, 0.18);
  animation: brief-pulse 2.4s ease-in-out infinite;
}
@keyframes brief-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(120, 140, 240, 0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(120, 140, 240, 0.04); }
}

.brief-form-lede {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 42ch;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field-label {
  display: flex; align-items: baseline; gap: 0.55rem;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.field-hint {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: var(--color-text-faint);
  font-weight: 400;
  text-transform: uppercase;
}

.field input,
.field select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: rgba(8, 10, 22, 0.65);
  border: 1px solid rgba(140, 160, 220, 0.22);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  transition: border-color 160ms var(--ease-out),
              box-shadow 160ms var(--ease-out),
              background 160ms var(--ease-out);
}
.field input::placeholder {
  color: rgba(180, 190, 220, 0.40);
}
.field select {
  /* custom arrow */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(180, 190, 230, 0.6) 50%),
    linear-gradient(135deg, rgba(180, 190, 230, 0.6) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
  cursor: pointer;
}
.field select:invalid { color: rgba(180, 190, 220, 0.55); }
.field select option {
  background: #0a0c18;
  color: var(--color-text);
}

.field input:hover,
.field select:hover { border-color: rgba(170, 180, 235, 0.40); }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: rgba(170, 170, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(140, 130, 255, 0.18);
  background: rgba(10, 12, 26, 0.85);
}

/* ============================================================
   Custom dropdown (brm-select) — replaces native <select> so the
   open menu matches the rest of the briefing instead of falling
   back to the OS-rendered blue-highlight list.
   ============================================================ */
.brm-select {
  position: relative;
  font: inherit;
}
.brm-select__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(10, 12, 26, 0.55);
  border: 1px solid rgba(140, 150, 200, 0.22);
  border-radius: 12px;
  color: var(--color-text);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out),
              box-shadow 160ms var(--ease-out),
              background 160ms var(--ease-out);
}
.brm-select__trigger:hover { border-color: rgba(170, 180, 235, 0.40); }
.brm-select__trigger:focus-visible,
.brm-select.is-open .brm-select__trigger {
  outline: none;
  border-color: rgba(170, 170, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(140, 130, 255, 0.18);
  background: rgba(10, 12, 26, 0.85);
}
.brm-select__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brm-select__value--placeholder { color: rgba(180, 190, 220, 0.55); }
.brm-select__caret {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  position: relative;
  transition: transform 200ms var(--ease-out);
}
.brm-select__caret::before,
.brm-select__caret::after {
  content: "";
  position: absolute;
  top: 35%;
  width: 6px;
  height: 1.5px;
  background: rgba(180, 190, 230, 0.75);
  border-radius: 1px;
  transition: background 200ms var(--ease-out);
}
.brm-select__caret::before { left: 0; transform: rotate(45deg); transform-origin: right center; }
.brm-select__caret::after  { right: 0; transform: rotate(-45deg); transform-origin: left center; }
.brm-select.is-open .brm-select__caret { transform: rotate(180deg); }
.brm-select.is-open .brm-select__caret::before,
.brm-select.is-open .brm-select__caret::after { background: rgba(200, 195, 255, 0.95); }

.brm-select__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background:
    radial-gradient(120% 200% at 0% 0%, rgba(110, 139, 255, 0.10), transparent 60%),
    radial-gradient(120% 200% at 100% 100%, rgba(177, 75, 255, 0.10), transparent 60%),
    rgba(10, 11, 22, 0.96);
  border: 1px solid rgba(140, 150, 200, 0.28);
  border-radius: 14px;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(140, 130, 255, 0.05) inset,
    0 0 24px rgba(110, 139, 255, 0.08);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
  transform-origin: top center;
  animation: brm-select-in 180ms var(--ease-out);
}
@keyframes brm-select-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .brm-select__list { animation: none; }
  .brm-select__caret { transition: none; }
}

.brm-select__option {
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  color: var(--color-text);
  font-size: 0.97rem;
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.brm-select__option + .brm-select__option { margin-top: 2px; }
.brm-select__option::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(180, 190, 230, 0.25);
  flex: 0 0 auto;
  transition: background 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.brm-select__option:hover,
.brm-select__option.is-active {
  background: linear-gradient(
    135deg,
    rgba(110, 139, 255, 0.16),
    rgba(177, 75, 255, 0.14)
  );
  color: #fff;
}
.brm-select__option:hover::before,
.brm-select__option.is-active::before {
  background: var(--color-violet);
  box-shadow: 0 0 10px rgba(177, 75, 255, 0.7);
}
.brm-select__option.is-selected {
  color: #fff;
  background: rgba(140, 130, 255, 0.10);
}
.brm-select__option.is-selected::before {
  background: var(--color-blue);
  box-shadow: 0 0 8px rgba(110, 139, 255, 0.6);
}
.brm-select__option.is-selected.is-active,
.brm-select__option.is-selected:hover {
  background: linear-gradient(
    135deg,
    rgba(110, 139, 255, 0.22),
    rgba(177, 75, 255, 0.20)
  );
}

/* Scrollbar inside the dropdown — keep it on-brand and discreet */
.brm-select__list::-webkit-scrollbar { width: 8px; }
.brm-select__list::-webkit-scrollbar-track { background: transparent; }
.brm-select__list::-webkit-scrollbar-thumb {
  background: rgba(140, 150, 200, 0.22);
  border-radius: 8px;
}
.brm-select__list::-webkit-scrollbar-thumb:hover { background: rgba(170, 170, 255, 0.45); }

/* Mobile — full-width tap targets, slightly larger */
@media (max-width: 640px) {
  .brm-select__option { padding: 0.85rem 0.9rem; font-size: 1rem; }
}

.brief-error {
  font-size: 0.92rem;
  color: #ffd0d0;
  background: rgba(120, 30, 30, 0.18);
  border: 1px solid rgba(220, 80, 80, 0.32);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
}

.brief-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

/* ---------- Glass / techy diagnostic CTA ----------
   Frosted glass capsule with a hairline gradient stroke painted as a
   pseudo-element (so it survives backdrop-blur). A scan-line shimmer
   sweeps across on hover. Pulsing dot on the left signals "live". */
.btn-send {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font: inherit;
  font-family: var(--font-label);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  padding: 0.95rem 1.5rem 0.95rem 1.25rem;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)),
    rgba(10, 12, 22, 0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 30px -14px rgba(110, 139, 255, 0.55);
  transition: transform 220ms var(--ease-out),
              box-shadow 220ms var(--ease-out),
              color 220ms var(--ease-out);
}
/* Hairline gradient border (painted via mask trick) */
.btn-send::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(160, 175, 255, 0.55) 0%,
    rgba(120, 100, 220, 0.35) 45%,
    rgba(255, 255, 255, 0.10) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
/* Scan-line shimmer that sweeps across on hover */
.btn-send::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 0;
  transition: left 700ms var(--ease-out);
}
/* Live-indicator dot to the left of the label */
.btn-send-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-blue, #6e8bff);
  box-shadow: 0 0 10px rgba(110, 139, 255, 0.9), inset 0 0 2px rgba(255,255,255,0.5);
  flex-shrink: 0;
  animation: btn-send-dot 2.2s ease-in-out infinite;
}
@keyframes btn-send-dot {
  0%, 100% { opacity: 0.6;  transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
.btn-send svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  transition: transform 220ms var(--ease-out);
}
@media (hover: hover) {
  .btn-send:hover:not(:disabled) {
    transform: translateY(-1px);
    color: #fff;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 18px 44px -16px rgba(120, 130, 255, 0.7);
  }
  .btn-send:hover:not(:disabled)::after { left: 110%; }
  .btn-send:hover:not(:disabled) svg { transform: translateX(2px); }
}
.btn-send:focus-visible {
  outline: 2px solid rgba(160, 175, 255, 0.7);
  outline-offset: 3px;
}
.btn-send:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-send.is-loading { color: rgba(255, 255, 255, 0.75); }
.btn-send.is-loading .btn-send-dot,
.btn-send.is-loading svg { display: none; }

.btn-send-spinner {
  display: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-top-color: #fff;
  animation: brief-spin 700ms linear infinite;
  flex-shrink: 0;
}
.btn-send.is-loading .btn-send-spinner { display: inline-block; }
@keyframes brief-spin { to { transform: rotate(360deg); } }

.brief-fineprint {
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* ----- Result view ----- */

.brief-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  animation: brief-fade 360ms var(--ease-out);
}
@keyframes brief-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.result-head { display: flex; flex-direction: column; gap: var(--space-3); }
.brief-tag.is-result {
  border-color: rgba(180, 160, 255, 0.45);
  background: rgba(180, 160, 255, 0.10);
  color: #d6cdff;
}
.brief-tag.is-result .dot { background: #b6a8ff; box-shadow: 0 0 0 4px rgba(182, 168, 255, 0.18); }

.result-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.15;
  margin: 0;
  color: var(--color-text);
}

.result-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.result-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem 1.15rem;
  border-radius: 14px;
  border: 1px solid rgba(140, 160, 220, 0.22);
  background: linear-gradient(180deg, rgba(20, 22, 40, 0.55), rgba(12, 14, 28, 0.65));
}
.result-card-eyebrow {
  font-family: var(--font-label);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.result-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.2;
  margin: 0;
  color: var(--color-text);
}
.result-card-body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.result-card-foot {
  margin: 0.2rem 0 0;
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.result-pages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.result-pages li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  color: var(--color-text);
}
.result-pages li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 1px;
  background: rgba(180, 170, 255, 0.7);
}

/* Position card — accent border keyed to status */
.result-position.is-weaker   { border-color: rgba(255, 150, 110, 0.40); box-shadow: inset 0 0 0 1px rgba(255, 150, 110, 0.10); }
.result-position.is-similar  { border-color: rgba(160, 180, 230, 0.45); }
.result-position.is-stronger { border-color: rgba(120, 220, 170, 0.40); box-shadow: inset 0 0 0 1px rgba(120, 220, 170, 0.10); }
.result-position.is-not-assessed,
.result-position.is-solo     { border-style: dashed; border-color: rgba(140, 160, 220, 0.30); }

.result-next {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 1.2rem 1.3rem;
  border-radius: 14px;
  border: 1px solid rgba(160, 150, 240, 0.30);
  background:
    radial-gradient(700px 220px at 0% 0%, rgba(140, 130, 240, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(20, 22, 42, 0.7), rgba(12, 14, 28, 0.78));
}
.result-next p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--color-text);
}
.result-confirm {
  position: relative;
  margin: 0;
  padding: 0.7rem 0.95rem 0.7rem 1.95rem;
  border-radius: 10px;
  border: 1px solid rgba(140, 220, 180, 0.32);
  background: linear-gradient(180deg, rgba(40, 70, 60, 0.28), rgba(20, 40, 32, 0.32));
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.result-confirm strong {
  color: var(--color-text);
  font-weight: 500;
  white-space: nowrap;
}
.result-confirm-dot {
  position: absolute;
  top: 1.05em;
  left: 0.95rem;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #7ce0a8;
  box-shadow: 0 0 0 4px rgba(124, 224, 168, 0.18);
}

.result-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.btn-link {
  font: inherit;
  font-family: var(--font-label);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: none;
  border: 0;
  padding: 0.4rem 0;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.btn-link:hover {
  color: var(--color-text);
  border-bottom-color: rgba(180, 170, 255, 0.55);
}

/* ============================================================
   BRIEF SECTION — left-aligned intro to match Work / Capabilities /
   Process / Roots heads. The form lives in a modal (.brief-modal).
   ============================================================ */
.brief-intro--centered {
  max-width: 800px;
  margin: 0;
  text-align: left;
}
.brief-intro--centered .eyebrow { display: inline-block; }
.brief-intro--centered h2 { margin-block: var(--space-5) var(--space-6); }
.brief-intro--centered p { max-width: 64ch; }

.brief-cta-row {
  display: flex;
  justify-content: flex-start;
  margin-block: var(--space-8) var(--space-6);
}

.brief-meta--centered {
  justify-content: flex-start;
}

/* The big "Start the Brief" button — premium, glowing, clearly the action */
.btn-brief-open {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.95rem 1.6rem;
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text);
  background: linear-gradient(135deg, rgba(110, 139, 255, 0.18), rgba(177, 75, 255, 0.18));
  border: 1px solid rgba(177, 75, 255, 0.55);
  border-radius: 999px;
  isolation: isolate;
  cursor: pointer;
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.btn-brief-open svg {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 0 6px rgba(177, 75, 255, 0.6));
  transition: transform 220ms var(--ease-out);
}
.btn-brief-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6e8bff, #b14bff);
  box-shadow: 0 0 0 4px rgba(177, 75, 255, 0.18),
              0 0 14px rgba(177, 75, 255, 0.55);
  animation: brief-dot-pulse 2.4s ease-in-out infinite;
}
.btn-brief-open::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  background:
    radial-gradient(60% 120% at 0% 50%, rgba(110, 139, 255, 0.55), transparent 70%),
    radial-gradient(60% 120% at 100% 50%, rgba(177, 75, 255, 0.55), transparent 70%);
  filter: blur(16px);
  opacity: 0.6;
  z-index: -1;
  pointer-events: none;
  animation: brief-open-halo 4.2s ease-in-out infinite;
}
.btn-brief-open:hover {
  transform: translateY(-1px);
  border-color: rgba(177, 75, 255, 0.95);
}
.btn-brief-open:hover svg { transform: translateX(3px); }

@keyframes brief-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(110, 139, 255, 0.10), 0 0 12px rgba(110, 139, 255, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(177, 75, 255, 0.16), 0 0 20px rgba(177, 75, 255, 0.7); }
}
@keyframes brief-open-halo {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.06); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-brief-open::before,
  .btn-brief-dot { animation: none; }
}

/* ============================================================
   BRIEF MODAL — <dialog> popup containing the form
   ============================================================ */
.brief-modal {
  width: min(820px, 94vw);
  max-height: 92dvh;
  padding: 0;
  margin: auto;             /* dialog default centers via margin auto */
  border: none;
  border-radius: var(--radius-xl, 24px);
  background: transparent;
  color: var(--color-text);
  overflow: visible;        /* let the glow halo bleed */
}
.brief-modal::backdrop {
  background: rgba(7, 7, 10, 0.78);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

/* Open animation */
.brief-modal[open] {
  animation: brief-modal-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.brief-modal[open]::backdrop {
  animation: brief-backdrop-in 320ms ease-out;
}

/* JS-fallback path: when showModal() isn't usable, we toggle the
   [open] attribute manually. Native <dialog> normally renders in the
   top layer when showModal() is called; the attribute-only path needs
   explicit fixed positioning to overlay the page. The .is-js-modal
   class is added by app.js as a defensive marker so these rules apply
   only when JS opens it without showModal(). */
.brief-modal.is-js-modal[open] {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: rgba(7, 7, 10, 0.78);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  margin: 0;
}
@keyframes brief-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes brief-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.brief-modal-card {
  position: relative;
  background: linear-gradient(180deg, #0d0d12 0%, #08080b 100%);
  border: 1px solid rgba(177, 75, 255, 0.22);
  border-radius: inherit;
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.25rem, 3vw, 2.4rem);
  box-shadow:
    0 0 0 1px rgba(110, 139, 255, 0.08),
    0 30px 80px rgba(0, 0, 0, 0.65),
    0 0 80px rgba(110, 139, 255, 0.10),
    0 0 120px rgba(177, 75, 255, 0.10);
  overflow: hidden;
  max-height: 92dvh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(177, 75, 255, 0.4) transparent;
}
.brief-modal-card::-webkit-scrollbar { width: 8px; }
.brief-modal-card::-webkit-scrollbar-thumb {
  background: rgba(177, 75, 255, 0.35);
  border-radius: 8px;
}

/* Soft glow halo bleeding out of the modal */
.brief-modal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(70% 50% at 0% 0%, rgba(110, 139, 255, 0.18), transparent 60%),
    radial-gradient(70% 50% at 100% 100%, rgba(177, 75, 255, 0.18), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.brief-modal-card > * { position: relative; z-index: 1; }

.brief-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted);
  cursor: pointer;
  z-index: 2;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.brief-modal-close svg { width: 16px; height: 16px; }
.brief-modal-close:hover {
  color: var(--color-text);
  border-color: rgba(177, 75, 255, 0.55);
  background: rgba(177, 75, 255, 0.10);
}

/* The form inside the modal needs no extra panel styling — the modal IS the panel.
   Override the .brief-tool::before bloom that was meant for the inline two-col layout. */
.brief-modal-card.brief-tool::before,
.brief-modal-card .brief-tool::before { display: none; }

/* Slightly tighter form rhythm inside the modal */
.brief-modal .brief-form { gap: var(--space-4); }
.brief-modal .brief-form-head { margin-bottom: var(--space-2); }

/* Mobile: dialog goes nearly fullscreen */
@media (max-width: 640px) {
  .brief-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .brief-modal-card {
    border-radius: 0;
    border-left: none;
    border-right: none;
    min-height: 100dvh;
  }
}

/* ================================================================
   WHO WE ARE / ABOUT
   ----------------------------------------------------------------
   A grounded, narrative section. Single column, generous editorial
   line-length, no decoration — the words carry the section. Lives
   on the global black starfield surface so stars twinkle around the
   copy without competing with it.
   ================================================================ */
.about {
  position: relative;
  padding-block: clamp(96px, 12vw, 160px);
}
.about-inner {
  max-width: 64rem;            /* ~64ch at typical body sizes */
  margin-inline: auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);          /* consistent rhythm between blocks */
}
.about-inner > p {
  margin: 0;                    /* gap on parent owns spacing */
}
.about-inner h2 + p,
.about-inner .eyebrow + h2 {
  margin-top: 0;
}
.about-inner h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-block: var(--space-5) var(--space-7);
  color: #fff;
}
.about-inner p {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 var(--space-5) 0;
  max-width: 60ch;             /* readable measure for narrative copy */
}
.about-lede {
  /* The opening paragraph carries a touch more weight to anchor the
     section without shouting. Stays inside the body family — no
     gradient, no drop-shadow. The studio voice is plain. */
  font-size: clamp(1.1875rem, 1.6vw, 1.375rem) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.55 !important;
}
.about-belief {
  /* Single-line conviction statement. Slightly more presence than
     surrounding paragraphs — italicized accent treatment pulled
     forward via Inter Tight's italic, not the gradient italic. */
  font-style: italic;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: clamp(1.125rem, 1.5vw, 1.25rem) !important;
  border-left: 2px solid rgba(110, 139, 255, 0.45);
  padding-left: var(--space-5);
  margin-block: var(--space-2) !important;  /* small extra breath around the quote */
}

/* ================================================================
   WHAT WE BUILD
   ----------------------------------------------------------------
   Editorial four-up. Two columns at desktop, single at mobile.
   No icons, no decoration — each card is a small essay with a
   confident heading. The grid is asymmetric on desktop to keep it
   from reading like a generic SaaS feature row.
   ================================================================ */
.build {
  position: relative;
  padding-block: clamp(96px, 12vw, 160px);
}
.build-head {
  max-width: 56rem;
  margin: 0 0 var(--space-12) 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);                    /* eyebrow → heading rhythm */
}
/* Optical alignment (desktop only): the "T" in "The full range" carries
   natural left sidebearing that makes the heading read as indented vs.
   the cards directly below. Nudge the head ~0.5rem left so the ink edge
   of the "T" lines up with the cards' outer left edge. */
@media (min-width: 900px) {
  .build-head {
    margin-left: -0.5rem;
  }
}
.build-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;                              /* parent gap owns rhythm */
  color: #fff;
  max-width: 24ch;
}
.build-grid {
  margin-top: var(--space-6);             /* extra air between heading block and first row */
}
.build-grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .build-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.build-card {
  /* A subtle bordered surface that lifts out of pure black just
     enough to read as a discrete piece of content. The border sits
     in the same blue/violet family as section accents but at very
     low alpha — a hairline, not a glow. */
  position: relative;
  padding: clamp(28px, 3vw, 40px);
  background: linear-gradient(180deg,
    rgba(20, 22, 36, 0.55) 0%,
    rgba(12, 13, 22, 0.55) 100%);
  border: 1px solid rgba(140, 160, 220, 0.10);
  border-radius: 14px;
  transition: border-color 280ms ease, transform 280ms ease, background 280ms ease;
}
.build-card:hover {
  border-color: rgba(140, 160, 220, 0.22);
  transform: translateY(-2px);
}
.build-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.9vw, 1.625rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 var(--space-4) 0;
  color: #fff;
}
.build-card p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

/* ================================================================
   PROCESS — CLOSING CTA
   ----------------------------------------------------------------
   The single CTA at the end of the page. Sits beneath the four
   phase cards inside the Process section so it shares the global
   starfield surface and feels like the natural conclusion of the
   funnel. No second CTA elsewhere — this is it.
   ================================================================ */
.process-close {
  margin-top: clamp(64px, 8vw, 112px);
  padding-block: clamp(56px, 7vw, 96px) clamp(80px, 10vw, 128px);
  text-align: center;
  border-top: 1px solid rgba(140, 160, 220, 0.10);
}
.process-close-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 auto var(--space-7) auto;     /* breathing room below the title */
  color: #fff;
  text-align: center;
}
.process-close-lede {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 48ch;
  margin-left: auto !important;           /* force horizontal centering */
  margin-right: auto !important;
  margin-top: 0;
  margin-bottom: var(--space-9);          /* clear gap before the CTA button */
  text-align: center;
}
.process-close-cta {
  display: flex;
  justify-content: center;
}

/* ================================================================
   SECTION HEAD RHYTHM — unified eyebrow → heading → body
   ----------------------------------------------------------------
   The four narrative sections (Who we are, What we build, Work,
   Process) all share the same vertical rhythm so the page reads
   as one document. This block normalizes the spacing without
   touching the rest of each section's bespoke styling.
   ================================================================ */
.about-inner .eyebrow,
.build-head .eyebrow,
.work-head .eyebrow,
.process-head .eyebrow {
  margin-bottom: var(--space-4) !important;   /* consistent eyebrow → heading gap (~24px) */
}
.about-inner h2,
.build-head h2,
.work-head h2,
.process-head h2 {
  margin-top: 0 !important;                   /* eyebrow's margin-bottom owns the gap */
}

/* ================================================================
   PROCESS CLOSE — enforce vertical rhythm
   The global `p { margin: 0 ... }` reset elsewhere strips paragraph
   margins, so we restate them with !important here. The lede also
   needs !important on margin-inline to overcome the same reset.
   ================================================================ */
.process-close-title {
  margin: 0 auto var(--space-7) auto !important;
}
.process-close-lede {
  margin: 0 auto var(--space-9) auto !important;
}