/* ============================================================
   NexAura Media — brand tokens + site styles
   Signal (lime) is a state marker only — see brand system §01.
   ============================================================ */

/* Self-hosted fonts — see brand system §03: "free, self-hostable, no licence to buy".
   Each file below is the same variable-font source Google Fonts serves for every
   declared weight (600/700/800 for Bricolage, etc.) — one file, multiple @font-face
   blocks, browser picks the right instance from the declared font-weight. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* signal */
  --signal: #C7F04A;
  --signal-deep: #8FE04A;
  --signal-moss: #3D5A00;
  --signal-wash: rgba(199, 240, 74, 0.08);
  --signal-glow: rgba(199, 240, 74, 0.22);

  /* dark surfaces */
  --void: #08090A;
  --panel: #101214;
  --raise: #17191C;

  /* text on dark */
  --text: #FFFFFF;
  --text-2: #A6ADB4;
  --text-3: #7C848B;

  /* borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.07);
  --border-strong: #22262A;

  /* type */
  --font-display: 'Bricolage Grotesque', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --container: 1200px;
}

* { box-sizing: border-box; }

/* Screen-reader-only text — visually hidden but still announced, used to
   complete an accessible name without adding visible clutter (e.g. reel
   cards whose visible text is just a view count). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sitewide keyboard-focus ring. Nothing suppressed the browser default
   before this, but nothing designed for it either, and tight overflow:hidden
   tiles (.embed-card, ticker items) risked clipping it — an outset outline
   with a small offset draws outside the clipped box instead of inside it. */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------- ambient growth-graph background ---------------- */

.growth-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.09;
}
.growth-bg svg { width: 100%; height: 100%; display: block; }
.growth-line {
  stroke: var(--signal);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px var(--signal-glow));
}
.growth-arrow {
  stroke: var(--signal);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.growth-dot {
  fill: var(--signal);
  filter: drop-shadow(0 0 8px var(--signal-glow));
}
.growth-dot-mid { opacity: 0.55; }
.growth-dot-tail { opacity: 0.28; }

@media (prefers-reduced-motion: reduce) {
  .growth-bg { display: none; }
}

/* ---------------- cursor-following spotlight ---------------- */

.cursor-glow {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(700px circle at var(--mx, 50%) var(--my, 50%), rgba(199, 240, 74, 0.22), transparent 70%);
}
.cursor-glow.active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none; }
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.mono { font-family: var(--font-mono); }
.disp { font-family: var(--font-display); }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 56px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 14px var(--signal-glow);
  flex-shrink: 0;
}
.eyebrow span.label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--signal);
  text-transform: uppercase;
}

section { position: relative; }

.section-pad { padding: 96px 0; }

.section-head { max-width: 640px; margin-bottom: 56px; }

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
}

.section-head p {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
}

.divider { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--signal);
  color: var(--void);
}
.btn-primary:hover { background: var(--signal-deep); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.03); }

.btn-sm { padding: 10px 18px; font-size: 14px; }

/* ---------------- header ---------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 9, 10, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}
.logo { display: flex; align-items: center; }
.logo svg { height: 30px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links a.navlink {
  font-size: 14.5px;
  color: var(--text-2);
  transition: color 0.15s ease;
}
.nav-links a.navlink:hover { color: var(--text); }

.header-cta { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 40px; height: 40px;
  color: var(--text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 56px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--void);
}
.mobile-menu a.navlink {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  font-size: 15px;
}
.mobile-menu.open { display: flex; }
.mobile-menu .header-cta { margin-top: 12px; flex-direction: column; align-items: stretch; }
.mobile-menu .btn { justify-content: center; width: 100%; }

/* ---------------- hero ---------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 0;
}
.hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 74% at 84% 4%, var(--signal-glow), rgba(199,240,74,0) 64%);
  pointer-events: none;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,0.9fr);
  gap: 48px;
  align-items: start;
  padding-bottom: 36px;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 22px + 3.2vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
.hero h1 .accent { color: var(--signal); }

.hero-stats {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  margin: 6px 0 0 auto;
}
.hero-stat-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 220px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 20px 45px -18px rgba(0, 0, 0, 0.6);
}
.hero-stat-top { top: 0; right: 0; }
.hero-stat-bottom { bottom: 0; left: 0; }

/* Orbit: the ring is the sun, these two cards are planets. Each card sits
   inside two nested full-size rotators — the outer one sweeps its position
   in a circle around the ring's center, the inner one spins the opposite
   way at the same speed to cancel that rotation back out for the card's own
   box, so the numbers stay upright throughout instead of tumbling. Both
   .hero-orbit-a/.hero-orbit-b share one duration and direction so the two
   cards hold their starting 180°-apart relationship for the whole loop. */
.hero-orbit {
  position: absolute;
  inset: 0;
  z-index: 2;
  animation: hero-orbit-spin 34s linear infinite;
}
.hero-orbit-counter {
  position: absolute;
  inset: 0;
  animation: hero-orbit-spin 34s linear infinite reverse;
}
@keyframes hero-orbit-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orbit, .hero-orbit-counter { animation: none; }
}
.hero-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--signal);
  color: var(--void);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.hero-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-top: 3px;
}

.hero-stat-ring-card {
  position: absolute;
  inset: 15%;
  z-index: 1;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.65), 0 0 70px -14px var(--signal-glow);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Added once the count-up/ring-fill finishes — a quiet "fully charged" breathing
   glow, so the motion doesn't stop dead the instant the numbers land. */
.hero-stat-ring-card.charged { animation: hero-stat-pulse 3.5s ease-in-out infinite; }

@keyframes hero-stat-pulse {
  0%, 100% { box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.65), 0 0 70px -14px var(--signal-glow); }
  50% { box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.65), 0 0 95px -8px var(--signal-glow); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stat-ring-card.charged { animation: none; }
}
.hero-stat-ring {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-stat-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.hero-stat-ring-track { fill: none; stroke: var(--border); stroke-width: 5; }
.hero-stat-ring-progress {
  fill: none;
  stroke: var(--signal);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 553;
  stroke-dashoffset: 553;
  filter: drop-shadow(0 0 8px var(--signal-glow));
}
.hero-stat-ring-content { text-align: center; }
.hero-stat-ring-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.02em;
  color: var(--signal);
}
.hero-stat-ring-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-top: 6px;
  line-height: 1.4;
}

.hero-sub {
  margin: 28px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 560px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.hero-meta {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-3);
}
.hero-meta + .hero-meta { margin-top: 8px; }

.stat-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.stat-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--signal-wash);
  color: var(--signal);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-top: 3px;
}

.ticker-section {
  position: relative;
  padding: 24px 0;
  background:
    linear-gradient(90deg, rgba(199,240,74,0) 0%, rgba(199,240,74,0.09) 50%, rgba(199,240,74,0) 100%),
    var(--void);
  box-shadow: inset 0 1px 0 var(--signal-wash), inset 0 -1px 0 var(--signal-wash);
}
.ticker {
  overflow: hidden;
  cursor: grab;
  /* Tell the browser vertical page scroll always wins here — without this,
     a finger landing on the ticker mid-swipe left the browser to guess
     between "scroll the page" and "drag the ticker," and guessing wrong
     could cancel the gesture in a way the JS never recovered from. */
  touch-action: pan-y;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.ticker.dragging { cursor: grabbing; }
.ticker-track {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  padding: 0 24px;
}
.ticker-track span {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--signal);
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 6px var(--signal-glow);
}
.ticker-track .sep { color: var(--signal); opacity: 0.45; font-size: 11px; }

/* ---------------- frames / placeholders ---------------- */

.frame-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
}

/* ---------------- case study ---------------- */

.case-study {
  margin-top: 56px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 44px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 40px;
  align-items: center;
}
.case-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--signal);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.case-person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  min-width: 0;
}
.case-person > div { min-width: 0; }
.case-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--signal);
  box-shadow: 0 0 16px -2px var(--signal-glow);
}
.case-study h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.case-person h3 { margin: 0 0 4px; }
.case-study h3 a { transition: color 0.15s ease; }
.case-study h3 a:hover { color: var(--signal); }
.case-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 22px;
}
.case-person .case-role { margin-bottom: 0; }
.case-quote {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-2);
  font-style: italic;
  border-left: 2px solid var(--signal-moss);
  padding-left: 18px;
  margin: 0 0 16px;
}
.case-attr { font-size: 14px; color: var(--text-3); }
.case-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}
.case-stat {
  background: var(--raise);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
  min-width: 0;
  overflow: hidden;
}
.case-stat .val {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--signal);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.case-stat .lbl {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--text-3);
  text-transform: uppercase;
  overflow-wrap: break-word;
}

/* ---------------- why us / accounts ---------------- */

.account-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
}
.account-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; margin-top: 40px; }
.account-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.account-top h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
}
.account-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.account-audience {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--signal);
}
.account-audience-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--text-3);
  text-align: right;
}

/* ---------------- FAQ ---------------- */

.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 26px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.faq-q .plus {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.faq-item.open .faq-q .plus {
  transform: rotate(45deg);
  border-color: var(--signal);
  color: var(--signal);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-a-inner {
  padding-bottom: 26px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 760px;
}
.faq-item.open .faq-a { max-height: 360px; }

/* ---------------- final CTA ---------------- */

.final-cta {
  text-align: center;
  padding: 100px 0;
  border-top: 1px solid var(--border);
}
.final-cta h2 {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 auto;
  max-width: 720px;
  text-wrap: balance;
}
.final-cta p {
  margin: 22px auto 0;
  max-width: 480px;
  color: var(--text-2);
  font-size: 16.5px;
  line-height: 1.6;
}
.final-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}

/* ---------------- footer ---------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,0.8fr) minmax(0,0.8fr) minmax(0,1.3fr);
  gap: 40px;
  padding-bottom: 44px;
}
.footer-contact-card {
  background: var(--panel);
  border: 1px solid var(--signal-moss);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 0 40px -18px var(--signal-glow);
}
.footer-contact-card h5 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--signal);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.footer-contact-card p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}
.footer-contact-btn { width: 100%; justify-content: center; margin-bottom: 20px; }
.footer-contact-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-contact-card li { font-size: 13.5px; color: var(--text-2); }
.footer-contact-card a:not(.btn) { color: var(--text-2); transition: color 0.15s ease; }
.footer-contact-card a:not(.btn):hover { color: var(--signal); }
.footer-brand .logo { margin-bottom: 16px; }
.footer-brand p {
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 280px;
  margin: 0;
}
.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--text-3);
  text-transform: uppercase;
  margin: 0 0 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
  color: var(--text-2);
  font-size: 15px;
  transition: color 0.15s ease;
}
.footer-col a:hover { color: var(--signal); }
.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-3);
  text-transform: uppercase;
}

/* ---------------- floating whatsapp ---------------- */

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--signal);
  color: var(--void);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px -6px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.1);
  transition: transform 0.15s ease, background 0.15s ease;
}
.whatsapp-float:hover { background: var(--signal-deep); transform: translateY(-2px); }

/* ---------------- section footers ---------------- */

.section-foot {
  margin: 32px 0 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-2);
}
.fine-print {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-3);
  max-width: 560px;
}

/* A single left-aligned rail rather than Orex's centered alternating zigzag —
   every step reads top-to-bottom in one column, so the sequence (plan, then
   shoot, then edit...) is unambiguous at a glance instead of zigzagging. */
.protocol-rail {
  position: relative;
  padding-left: 56px;
}
.protocol-rail::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 19px;
  width: 2px;
  background: linear-gradient(var(--signal-moss), var(--border) 90%);
}
.protocol-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) 340px;
  align-items: center;
  gap: 24px;
  padding-bottom: 36px;
}
.protocol-step-last { padding-bottom: 0; }
.protocol-marker {
  position: absolute;
  left: -56px;
  top: 2px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--signal);
  color: var(--signal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 16px var(--signal-glow);
}
.protocol-body h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.protocol-body p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 520px;
}
.protocol-thumb {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto; /* the img's height attribute (layout-shift hint) must not override aspect-ratio */
  object-fit: cover;
  background: var(--raise);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
}

/* ---------------- instagram embed marquee ---------------- */

.embed-marquee {
  margin-top: 20px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  touch-action: pan-y;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.embed-marquee::-webkit-scrollbar { display: none; }
.embed-marquee.dragging { cursor: grabbing; }

.embed-track {
  display: flex;
  gap: 12px;
  width: max-content;
  padding: 0 56px;
}

.embed-card {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 190px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
/* overflow:hidden above (needed to contain the video) would clip an
   outset :focus-visible ring, so this card gets an inset one instead. */
.embed-card:focus-visible {
  outline-offset: -3px;
}
.embed-card:hover {
  border: 1.5px solid var(--signal);
  box-shadow: 0 0 32px -8px var(--signal-glow);
  transform: translateY(-2px);
}
.embed-card-stat {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 22px 10px 8px;
  background: linear-gradient(to top, rgba(6,7,8,0.88) 0%, rgba(6,7,8,0.5) 55%, transparent 100%);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
}
.embed-card-stat strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  text-transform: none;
}
.reel-ig-link {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.8);
  opacity: 0.75;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
  transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.reel-ig-link svg { width: 15px; height: 15px; }
.embed-card:hover .reel-ig-link {
  opacity: 1;
  color: var(--signal);
  transform: scale(1.1);
}

.embed-card .reel-video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--raise);
  filter: brightness(0.85) saturate(1.05);
}

/* ---------------- team ---------------- */

.section-head-center { max-width: 560px; margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow-center { justify-content: center; }

.team-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 32px;
  margin-top: 40px;
}
.team-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
}
.team-card-center { text-align: center; display: flex; flex-direction: column; align-items: center; }

.portrait-frame {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--raise), var(--panel));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
}
.portrait-frame span {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-3);
  text-transform: uppercase;
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.team-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 8px;
  margin-bottom: 14px;
  /* Reserves space for three pill rows (the worst case — Ungotheble's four tags
     wrap to 3 lines at narrow widths, Arman's to 2) regardless of how many
     this card's own tags actually wrap to. Without it, whichever card's
     pills wrap to fewer lines starts its name/bio higher than the card next
     to it, and the two read as misaligned side by side. */
  min-height: 112px;
}
.team-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.team-card h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}
.team-card h3 a { transition: color 0.15s ease; }
.team-card h3 a:hover { color: var(--signal); }
/* The name people actually follow them by, on the account itself — the
   founders' real names sit underneath as a quieter, secondary line. */
.team-realname {
  font-size: 14px;
  color: var(--text-3);
  margin: 0 0 6px;
}
.team-title {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 12px;
}
.team-tagline {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  margin: 0 0 14px;
  max-width: 340px;
}
.team-strength {
  font-size: 14px;
  font-style: italic;
  color: var(--text-3);
  line-height: 1.6;
  max-width: 340px;
}
.team-card p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 340px;
}
.team-cta { width: 100%; justify-content: center; margin-top: auto; }

/* ---------------- what we run ---------------- */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
  margin-bottom: 44px;
}
.tier-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.tier-card:hover {
  border-color: var(--signal-moss);
  box-shadow: 0 0 32px -12px var(--signal-glow);
  transform: translateY(-2px);
}
.tier-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--signal-wash);
  color: var(--signal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.tier-card h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.tier-card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-2);
}

.run-includes {
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
.run-includes h3 {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--text-3);
  text-transform: uppercase;
  margin: 0 0 18px;
}
.run-includes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.run-includes-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-2);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.run-includes-list li:hover {
  border-color: var(--signal-moss);
  background: var(--raise);
}
.run-includes-list .check-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--signal-wash);
  color: var(--signal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ---------------- fit / not-fit ---------------- */

.fit-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 24px;
  margin-top: 40px;
}
/* Single column since the "This isn't when" list was removed — only one
   .fit-col remains, so it's centered and capped instead of stretching
   full-width the way a lone grid child otherwise would. */
.fit-grid-single {
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}
.fit-col {
  border-radius: 16px;
  padding: 30px;
  border: 1px solid var(--border);
}
.fit-yes { background: var(--signal-wash); border-color: var(--signal-moss); }
.fit-col h3 {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 20px;
  color: var(--text-3);
}
.fit-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.fit-col li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.fit-yes li svg { color: var(--signal); flex-shrink: 0; margin-top: 3px; }

/* ---------------- brochure CTA banner ---------------- */

.brochure-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--panel);
  border: 1px solid var(--signal-moss);
  border-radius: 20px;
  padding: 36px 40px;
  box-shadow: 0 0 40px -18px var(--signal-glow);
}
.brochure-banner h3 { margin: 0 0 8px; font-size: 24px; }
.brochure-banner p { margin: 0; color: var(--text-2); font-size: 15.5px; max-width: 480px; }
.brochure-banner-btn { flex-shrink: 0; }

/* ---------------- brochure modal ---------------- */

.brochure-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.brochure-modal.open { display: flex; }
.brochure-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 10, 0.75);
  backdrop-filter: blur(4px);
}
.brochure-modal-panel {
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
.brochure-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--raise);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.brochure-modal-close:hover { border-color: var(--signal); color: var(--signal); }

/* ---------------- brochure form (Brevo embed, restyled to brand tokens) ---------------- */

.nx-brochure-form {
  max-width: 480px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 40px 32px;
  font-family: var(--font-body);
  transition: max-width 0.2s ease;
}
/* Widened once the signup swaps to the full brochure view — 480px was sized
   for the compact form, not a readable pricing/leadership layout. */
.nx-brochure-form.is-brochure { max-width: 720px; }
.nx-brochure-form h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 12px;
}
.nx-brochure-form p.nx-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0 0 28px;
}
.nx-brochure-form .nx-field { margin-bottom: 20px; }
.nx-brochure-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 8px;
}
.nx-brochure-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 0 16px;
  background: var(--raise);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 16px;
  font-family: var(--font-body);
}
.nx-brochure-form input[type="text"]::placeholder { color: var(--text-3); }
.nx-brochure-form input[type="text"]:focus {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-color: var(--signal);
}
.nx-brochure-form .nx-help {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
}
.nx-brochure-form button[type="submit"] {
  width: 100%;
  height: 48px;
  border-radius: 999px;
  background: var(--signal);
  color: var(--void);
  border: none;
  font-weight: 700;
  font-size: 16px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 140ms ease-out;
}
.nx-brochure-form button[type="submit"]:hover { background: var(--signal-deep); }
.nx-brochure-form input.input--hidden { display: none; }
.nx-brochure-hidden-frame { display: none; }

.nx-brochure-success h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 12px;
}
.nx-brochure-success .nx-sub {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0 0 24px;
}
.nx-brochure-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 12px;
}
.nx-brochure-h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin: 32px 0 12px;
}
.nx-brochure-p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}

.nx-brochure-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.nx-brochure-stat-val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--signal);
}
.nx-brochure-stat-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-top: 2px;
}

.nx-brochure-leaders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.nx-brochure-leader {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nx-brochure-leader img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  border: 2px solid var(--signal);
  flex-shrink: 0;
}
.nx-brochure-leader strong { display: block; font-size: 14.5px; color: var(--text); }
.nx-brochure-leader span { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

.nx-brochure-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.nx-brochure-tier {
  background: var(--raise);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 14px;
  position: relative;
}
.nx-brochure-tier-rec { border-color: var(--signal); }
.nx-brochure-tier-badge {
  position: absolute;
  top: -11px;
  left: 14px;
  background: var(--signal);
  color: var(--void);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.nx-brochure-tier-name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 6px;
}
.nx-brochure-tier-price {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.nx-brochure-tier-price span { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--text-3); }
.nx-brochure-tier p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }

.nx-brochure-callout {
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.nx-brochure-callout-solid { border: 1.5px solid var(--signal); background: var(--signal-wash); }
.nx-brochure-callout-dashed { border: 1.5px dashed var(--signal-moss); }
.nx-brochure-callout-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 6px;
}
.nx-brochure-callout p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }

.nx-brochure-contact {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nx-brochure-contact div { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.nx-brochure-contact span { color: var(--text-3); }
.nx-brochure-contact a { color: var(--text); font-family: var(--font-mono); transition: color 0.15s ease; }
.nx-brochure-contact a:hover { color: var(--signal); }

.nx-brochure-book-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}
.nx-brochure-pdf-link {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nx-brochure-pdf-link:hover { color: var(--text-2); }

@media (max-width: 560px) {
  .nx-brochure-stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
  .nx-brochure-leaders { grid-template-columns: minmax(0,1fr); }
  .nx-brochure-tiers { grid-template-columns: minmax(0,1fr); }
}

/* ---------------- final-CTA soft-exit brochure link ---------------- */

.final-brochure-link {
  display: block;
  margin: 20px auto 0;
  background: none;
  border: none;
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 14.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.final-brochure-link:hover { color: var(--signal); }

/* ---------------- /brochure landing page ---------------- */
/* Unlisted page (see brochure/index.html) — reuses every existing token/
   class below, adds only layout for this page's own structure. */

.brochure-header {
  padding: 28px 0;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--border);
}
.brochure-page {
  padding: 72px 0 96px;
}
.brochure-page-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.brochure-page-h1 {
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}
.brochure-page-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0 0 40px;
}
.brochure-cover-frame {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 40px;
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.65), 0 0 60px -20px var(--signal-glow);
}
.brochure-cover-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
}
.brochure-page-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.brochure-footer {
  padding: 28px 0 40px;
  border-top: 1px solid var(--border);
  margin-top: 40px;
}
.brochure-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.brochure-footer a { color: var(--text-3); transition: color 0.15s ease; }
.brochure-footer a:hover { color: var(--signal); }

/* ---------------- responsive ---------------- */

@media (max-width: 980px) {
  .wrap { padding: 0 24px; }
  .nav-links, .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .mobile-menu .wrap { padding: 0; }

  .hero-inner { grid-template-columns: minmax(0,1fr); padding-bottom: 76px; }
  .hero-stats { max-width: 300px; margin: 32px auto 0; }
  .growth-bg { opacity: 0.04; }
  .hero-sub { font-size: 16px; }
  .stat-stack { flex-direction: row; flex-wrap: wrap; }
  .stat-card { flex: 1 1 240px; }

  .section-head h2 { font-size: 32px; }
  .section-pad { padding: 64px 0; }

  .embed-card { width: 160px; }
  .embed-track { padding: 0 24px; }

  .case-study { grid-template-columns: minmax(0,1fr); padding: 28px; }
  .case-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }

  .account-grid { grid-template-columns: minmax(0,1fr); }

  .run-includes-list { grid-template-columns: minmax(0,1fr); }

  .final-cta h2 { font-size: 32px; }

  .footer-top { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; }
  .footer-brand, .footer-contact-card { grid-column: 1 / -1; }
  .footer-top-4 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }


  .protocol-rail { padding-left: 40px; }
  .protocol-rail::before { left: 13px; }
  .protocol-marker { left: -40px; width: 30px; height: 30px; font-size: 11px; }
  .protocol-step { grid-template-columns: minmax(0,1fr); gap: 14px; padding-bottom: 28px; }
  .team-grid { grid-template-columns: minmax(0,1fr); }

  .tier-grid { grid-template-columns: minmax(0,1fr); }

  .fit-grid { grid-template-columns: minmax(0,1fr); }

  .whatsapp-float { width: 50px; height: 50px; bottom: 18px; right: 18px; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .hero-inner { padding-bottom: 76px; }
  .embed-card { width: 128px; }
  .embed-track { gap: 8px; padding: 0 20px; }
  .embed-marquee { margin-top: 12px; }
  .embed-card-stat { font-size: 8.5px; padding: 16px 8px 6px; }
  .embed-card-stat strong { font-size: 13px; }
  .reel-ig-link { width: 16px; height: 16px; top: 6px; right: 6px; }
  .reel-ig-link svg { width: 12px; height: 12px; }
  .ticker-track { gap: 14px; padding: 0 16px; }
  .footer-top { grid-template-columns: minmax(0,1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .brochure-banner { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
  .brochure-banner-btn { width: 100%; justify-content: center; }
  .brochure-page { padding: 48px 0 64px; }
  .brochure-page-h1 { font-size: 28px; }
  .brochure-page-actions { flex-direction: column; }
  .brochure-page-actions .btn { width: 100%; justify-content: center; }
  .nx-brochure-form { padding: 32px 22px; }
}

/* ---- Legal pages (privacy) ---- */
.legal-page { padding: 72px 0 96px; }
.legal-inner { max-width: 720px; margin: 0 auto; }
.legal-inner h1 { font-size: 44px; letter-spacing: -0.03em; margin: 12px 0 8px; }
.legal-inner h2 { font-size: 22px; letter-spacing: -0.02em; margin: 40px 0 12px; }
.legal-inner p, .legal-inner li { color: var(--text-2); line-height: 1.7; }
.legal-inner p { margin: 0 0 16px; }
.legal-inner ul { margin: 0 0 16px; padding-left: 20px; }
.legal-inner li { margin-bottom: 8px; }
.legal-inner strong { color: var(--text); font-weight: 600; }
.legal-inner a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.legal-updated { color: var(--text-3); font-size: 13px; margin: 0 0 32px !important; }
@media (max-width: 640px) {
  .legal-page { padding: 48px 0 64px; }
  .legal-inner h1 { font-size: 32px; }
}

/* ---- Mobile polish: legible micro-text + comfortable tap targets ---- */
@media (max-width: 640px) {
  .hero-stat-label { font-size: 10.5px; }
  .hero-stat-ring-label { font-size: 11px; }
  .embed-card-stat { font-size: 10px; }
  .embed-card-stat strong { font-size: 14px; }
  .team-pill, .team-title, .frame-note, .case-kicker, .case-role, .protocol-marker { font-size: 11.5px; }
  .team-card h3 a, .final-brochure-link, .footer-bottom a, .footer-col a {
    display: inline-block; padding: 10px 0; min-height: 44px; line-height: 1.4;
  }
  .footer-bottom a { padding: 12px 0; }
}

/* Case-study stats: stacked rows on phones so values and labels never clip or break mid-word */
@media (max-width: 640px) {
  .case-stats { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .case-stat { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; }
  .case-stat .val { font-size: 28px; flex: 0 0 auto; min-width: 96px; }
  .case-stat .lbl { margin-top: 0; letter-spacing: 0.1em; }
}
@media (max-width: 640px) {
  .footer-contact-card li a { display: inline-block; padding: 8px 0; }
}

/* ---- Leadership: name-first cards ---- */
.team-realname a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; transition: color 0.15s ease; }
.team-realname a:hover { color: var(--signal); }

/* ---- Location & language pages + homepage service corridor ---- */
.footer-top-5 { grid-template-columns: minmax(0,1.3fr) minmax(0,0.7fr) minmax(0,1fr) minmax(0,0.7fr) minmax(0,1.3fr); gap: 32px; }
.hero-loc { padding-bottom: 32px; }
.hero-loc .hero-inner { grid-template-columns: minmax(0,1fr); }
.hero-loc h1 { font-size: clamp(30px, 5.2vw, 54px); max-width: 20ch; }
.hero-loc .hero-sub { max-width: 62ch; }
.hero-loc .loc-corridor { max-width: 62ch; color: var(--text-2); font-weight: 400; margin: 18px 0 26px; }
.loc-proof { padding: 8px 0 24px; }
.loc-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.hero-stat-card.loc-stat { position: static; max-width: none; }
.loc-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.loc-why-block { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 26px; min-width: 0; }
.loc-why-block h3 { font-size: 20px; letter-spacing: -0.015em; margin: 0 0 10px; }
.loc-why-block p { margin: 0; color: var(--text-2); line-height: 1.65; }
.loc-case-intro { color: var(--text-2); font-size: 17px; margin: 0 0 20px; max-width: 62ch; }
.protocol-rail-text .protocol-step { grid-template-columns: minmax(0,1fr); }
.loc-nearby-links { display: flex; flex-wrap: wrap; gap: 12px; }
.loc-nearby-links a { border: 1px solid var(--border); border-radius: 999px; padding: 12px 18px; color: var(--text-2); font-size: 15px; transition: color .15s ease, border-color .15s ease; }
.loc-nearby-links a:hover { color: var(--signal); border-color: var(--signal); }
.corridor-band { padding: 56px 0; text-align: center; }
.corridor-line { max-width: 60ch; margin: 18px auto 24px; color: var(--text-2); font-size: 18px; line-height: 1.6; }
.corridor-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.corridor-links a { white-space: nowrap; border: 1px solid var(--border); border-radius: 999px; padding: 11px 18px; color: var(--text-2); font-size: 14.5px; transition: color .15s ease, border-color .15s ease; }
.corridor-links a:hover { color: var(--signal); border-color: var(--signal); }
@media (max-width: 980px) { .footer-top-5 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .footer-top-5 .footer-brand, .footer-top-5 .footer-contact-card { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .loc-stats { grid-template-columns: minmax(0,1fr); }
  .loc-why-block { padding: 22px; }
  .corridor-band { padding: 40px 0; }
  .corridor-links a { padding: 13px 16px; }
  .loc-nearby-links a { padding: 13px 16px; }
}

/* Case study: real client-meeting photo */
.case-meeting { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; border: 1px solid var(--border-soft); margin-bottom: 22px; }

/* Homepage service area: founders photo beside the corridor copy */
.corridor-band { text-align: left; }
.corridor-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: center; }
.corridor-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; border: 1px solid var(--border-soft); }
.corridor-copy .corridor-line { margin: 18px 0 24px; max-width: none; }
.corridor-copy .corridor-links { justify-content: flex-start; }
@media (max-width: 860px) {
  .corridor-inner { grid-template-columns: minmax(0,1fr); gap: 28px; }
}