/* =========================================================
   rab.ai + star — Vector wordmark with Magen David tittle.
   Refined dark scholarly aesthetic.
   ========================================================= */

:root {
  /* Surfaces — deep ink, not pure black */
  --bg: #0a0e1a;
  --bg-elevated: #0f1424;
  --bg-card: #121a2e;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --ink: #eef1f7;
  --ink-muted: #b6bdd0;
  --ink-quiet: #8a91a8;

  /* Accent — measured blue with warmth */
  --accent: #6aa6ff;
  --accent-soft: #9dc1ff;
  --accent-deep: #4a83df;

  /* Type */
  --font-display: 'Boska', Georgia, 'Times New Roman', serif;
  --font-body: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;

  /* Scale — informational hero allowed */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --text-hero: clamp(2.5rem, 1.6rem + 4.8vw, 5.25rem);

  /* Space */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius: 14px;
  --radius-sm: 8px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

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

/* Soft radial vignette behind hero — feels like parchment under lamp */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(106, 166, 255, 0.10), transparent 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(106, 166, 255, 0.04), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Faint grain for warmth — kept extremely subtle */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
}

/* ===== Layout shell ===== */
.site-header,
main > section,
.site-footer {
  position: relative;
  z-index: 2;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) clamp(var(--space-6), 5vw, var(--space-16));
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.site-header.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.06);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--bg); }
}

.site-nav {
  display: flex;
  gap: var(--space-8);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.site-nav a {
  position: relative;
  padding: 0.25rem 0;
  transition: color 0.2s var(--ease-out);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.site-nav a:hover::after { transform: scaleX(1); }

/* ===== Brand mark ===== */
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
}
.brand-mark {
  width: 150px;
  height: auto;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.2));
  overflow: visible; /* let the glow bleed past the viewBox */
}

/* ============================================================
   Logo choreography — Vector wordmark + Magen David
   Geometry (from baked Boska-Medium paths, viewBox -8 -72 234 134.4):
     Period center:     (135.7, 91.9)
     i's tittle center: (203.9, 33.1)
     Travel delta:      x +68.2, y -58.8
   Timeline (seconds):
     0.00 → 1.10  Wordmark glyphs cascade in (r → a → b → a → i-stem)
     0.80 → 1.10  Dot fades in at period position
     1.20 → 2.90  Dot bounces in place ×3 (anticipation)
     3.00 → 3.90  Dot arcs up to the tittle position, scaling slightly
     3.75 → 4.30  Dot dissolves out as the Magen David appears with glow
     4.40 → ∞     Star breathes quietly (ner tamid)
   ============================================================ */

.wm-glyph {
  opacity: 0;
}
.wm-dot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
}

/* Stagger glyph fade-ins so the wordmark assembles left to right.
   Triggered by `.loaded` on <body>. Replay-on-click is handled in JS
   via the Web Animations API (cancel + play on every running animation
   in the SVG subtree), so no separate CSS trigger class is needed. */
.loaded .wm-r        { animation: glyph-in 600ms var(--ease-out)  150ms forwards; }
.loaded .wm-a1       { animation: glyph-in 600ms var(--ease-out)  280ms forwards; }
.loaded .wm-b        { animation: glyph-in 600ms var(--ease-out)  410ms forwards; }
.loaded .wm-a2       { animation: glyph-in 600ms var(--ease-out)  540ms forwards; }
.loaded .wm-i-stem   { animation: glyph-in 600ms var(--ease-out)  670ms forwards; }

/* The resting period — fades in AFTER the traveling dot has launched
   upward, so the morph is unambiguous, then the wordmark resolves as
   'rab.ai' (a real domain) crowned by the Magen David. */
.loaded .wm-period   { animation: period-in 500ms var(--ease-out) 3500ms forwards; }

/* The traveling dot:
   1) fade/scale in at the period spot
   2) bounce in place ×3
   3) arc up to the tittle position
   4) dissolve as the star takes over */
.loaded .wm-dot {
  animation:
    dot-in     500ms var(--ease-out)               800ms forwards,
    dot-bounce 1.7s  var(--ease-soft)              1200ms,
    dot-leap   900ms cubic-bezier(0.4, 0, 0.2, 1)  3000ms forwards,
    dot-vanish 450ms ease-out                      3750ms forwards;
}

/* The star appears as the dot dissolves into it, then breathes quietly */
.loaded .wm-star {
  animation:
    star-appear  700ms var(--ease-out)     3850ms forwards,
    star-breathe 4.8s  ease-in-out         5400ms infinite;
}

/* Replay affordance: pointer cursor + subtle hover lift invite the click.
   A tooltip is added in markup via the parent <a>'s title attribute. */
.brand-mark {
  cursor: pointer;
}
.brand:hover .brand-mark {
  transform: scale(1.015);
  transition: transform 220ms var(--ease-out);
}

@keyframes glyph-in {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes period-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes dot-in {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

/* Bounce-in-place: three soft hops with decreasing amplitude.
   SVG y is positive-down, so up = negative translateY. */
@keyframes dot-bounce {
  0%   { transform: scale(1) translateY(0); }
  16%  { transform: scale(1) translateY(-9px); }
  28%  { transform: scale(1.04) translateY(0); }
  44%  { transform: scale(1) translateY(-13px); }
  58%  { transform: scale(1.05) translateY(0); }
  74%  { transform: scale(1) translateY(-7px); }
  88%  { transform: scale(1.02) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}

/* Leap from period (135.7, 91.9) to tittle (203.9, 33.1).
   Net delta: +68.2 x, -58.8 y. We add a mid-arc lift so the path
   feels like a thrown stone, not a linear slide. */
@keyframes dot-leap {
  0%   { transform: scale(1) translate(0, 0); }
  45%  { transform: scale(1.06) translate(30px, -52px); }
  100% { transform: scale(0.92) translate(68.2px, -58.8px); }
}

/* The dot dissolves into the star (slight scale-up + fade) */
@keyframes dot-vanish {
  0%   { opacity: 1; transform: scale(0.92) translate(68.2px, -58.8px); }
  100% { opacity: 0; transform: scale(1.4)  translate(68.2px, -58.8px); }
}

/* Star fades in and settles — small overshoot, then rest */
@keyframes star-appear {
  0%   { opacity: 0; transform: scale(0.55) rotate(-10deg); }
  55%  { opacity: 1; transform: scale(1.14) rotate(3deg); }
  100% { opacity: 1; transform: scale(1)    rotate(0deg); }
}

/* Quiet devotional breath — like a ner tamid. ~10% brightness, 2% scale. */
@keyframes star-breathe {
  0%, 100% { filter: brightness(1);    transform: scale(1); }
  50%      { filter: brightness(1.10); transform: scale(1.02); }
}

/* Hover: gentle star pulse — the star is the interactive accent */
.brand:hover .wm-star {
  animation: star-pulse 1.6s var(--ease-out) infinite !important;
}
@keyframes star-pulse {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  50%      { transform: scale(1.12); filter: brightness(1.35); }
}

/* ===== Hero ===== */
.hero {
  padding: clamp(var(--space-16), 12vw, var(--space-32)) clamp(var(--space-6), 5vw, var(--space-16))
    var(--space-20);
  max-width: 1180px;
  margin: 0 auto;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin: 0 0 var(--space-8);
  opacity: 0;
  transform: translateY(8px);
  animation: fade-up 800ms var(--ease-out) 1400ms forwards;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-hero);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-8);
  max-width: 18ch;
}
.ht-line {
  display: block;
  opacity: 0;
  transform: translateY(14px);
}
.loaded .ht-line   { animation: fade-up 900ms var(--ease-out) 1500ms forwards; }
.loaded .ht-line-2 { animation: fade-up 900ms var(--ease-out) 1700ms forwards; color: var(--ink-muted); font-style: italic; }

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

.hero-lede {
  font-size: var(--text-lg);
  color: var(--ink-muted);
  max-width: 56ch;
  line-height: 1.55;
  margin: 0 0 var(--space-12);
  opacity: 0;
  transform: translateY(8px);
  animation: fade-up 900ms var(--ease-out) 1950ms forwards;
}

.hero-cta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(8px);
  animation: fade-up 900ms var(--ease-out) 2150ms forwards;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.85rem 1.4rem;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 0.2s var(--ease-out), background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  color: #07101f;
}
.btn-primary:hover {
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.btn-ghost {
  color: var(--ink);
  border-color: var(--hairline-strong);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent-soft);
}

/* ===== Sections shared ===== */
main > section {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-20) clamp(var(--space-6), 5vw, var(--space-16));
  border-top: 1px solid var(--hairline);
}
.hero { border-top: 0; }

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 var(--space-12);
  max-width: 22ch;
}

/* ===== Section lede (shared, sits under section title) ===== */
.section-lede {
  font-size: var(--text-lg);
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 64ch;
  margin: -2rem 0 var(--space-12);
}

/* Inline code chip — used for subdomain references like kosher.rab.ai */
code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  color: var(--accent-soft);
  background: rgba(106, 166, 255, 0.08);
  padding: 0.08em 0.4em;
  border-radius: 4px;
  letter-spacing: 0;
}

/* ===== Verticals ===== */
.vertical-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 980px) {
  .vertical-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

.vertical {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-10);
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.vertical:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-2px);
}

/* Body paragraph under the outcome line — "what this really is" */
.vertical-body {
  color: var(--ink-muted);
  font-size: var(--text-base);
  line-height: 1.65;
  margin: 0 0 var(--space-8);
}

/* Capability block — a small titled cluster inside each vertical card.
   Hairline rule above signals a new sub-topic without heavy headings. */
.capability-block {
  padding-top: var(--space-6);
  margin-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}
.capability-block:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.capability-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 var(--space-2);
  line-height: 1.25;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.capability-tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  background: rgba(106, 166, 255, 0.06);
}
.capability-body {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.capability-body code {
  font-size: 0.88em;
}

/* Footnote at the bottom of a vertical card */
.vertical-footnote {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-xs);
  color: var(--ink-quiet);
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.vertical-head { margin-bottom: var(--space-6); }
.vertical-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-bottom: var(--space-3);
}
.vertical-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.vertical-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--accent-soft);
  letter-spacing: 0;
  font-weight: 500;
  transition: color 0.2s;
}
.vertical-link:hover { color: var(--accent); }

.vertical-outcome {
  color: var(--ink);
  font-size: var(--text-base);
  margin: 0 0 var(--space-6);
  line-height: 1.55;
}
/* Legacy vertical-list (kept for safety; no longer used) */
.vertical-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-sm);
}
.vertical-list li {
  position: relative;
  padding-left: var(--space-6);
  line-height: 1.5;
}
.vertical-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}

/* ===== Live demo callout (under Kosher Establishments) =====
   Sits inside the vertical card. Reads as a hand-raised invitation:
   a quiet "live" pulse, a one-line pitch, and the phone number as the
   moment of action. The entire block is a tel: link. */
.demo-callout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(106, 166, 255, 0.05), rgba(106, 166, 255, 0.02));
  color: var(--ink);
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out),
              background 0.3s var(--ease-out);
}
.demo-callout:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  background:
    linear-gradient(180deg, rgba(106, 166, 255, 0.10), rgba(106, 166, 255, 0.04));
}
.demo-callout:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.demo-callout-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.demo-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5ad6a8; /* a kosher green-ish "live" indicator */
  box-shadow: 0 0 0 0 rgba(90, 214, 168, 0.7);
  animation: demo-pulse 1.8s ease-out infinite;
}
@keyframes demo-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(90, 214, 168, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(90, 214, 168, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(90, 214, 168, 0);    }
}

.demo-callout-body {
  font-size: var(--text-base);
  color: var(--ink);
  line-height: 1.5;
}
.demo-callout-body em {
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--accent-soft);
}

.demo-callout-number {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  letter-spacing: 0;
  color: var(--ink);
  margin-top: var(--space-2);
}
.demo-callout-number svg {
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-out);
}
.demo-callout:hover .demo-callout-number svg {
  transform: rotate(-8deg) scale(1.08);
}

/* Respect reduced motion — freeze the pulse */
@media (prefers-reduced-motion: reduce) {
  .demo-pulse { animation: none; }
}

/* ===== Practice / about ===== */
.practice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}
@media (min-width: 820px) {
  .practice-grid { grid-template-columns: 1.4fr 1fr; gap: var(--space-16); }
  .practice-grid--single { grid-template-columns: 1fr; max-width: 70ch; }
}
.practice-body {
  font-size: var(--text-lg);
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 58ch;
  margin: 0 0 var(--space-8);
}

/* Pill list — "what you can edit in the UI" */
.editable-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.editable-list li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  letter-spacing: 0.005em;
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out),
              background 0.3s var(--ease-out);
}
.editable-list li:hover {
  border-color: var(--accent);
  color: var(--accent-soft);
  background: rgba(106, 166, 255, 0.06);
}
.practice-footnote {
  font-size: var(--text-sm);
  color: var(--ink-quiet);
  line-height: 1.6;
  max-width: 58ch;
  margin: 0;
  font-style: italic;
}

/* ===== Thoughtful AI ===== */
.thoughtful .section-lede {
  /* slightly tighter spacing when following an eyebrow + title */
  margin-top: -1.5rem;
}
.principles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 720px) {
  .principles-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .principles-grid { grid-template-columns: repeat(3, 1fr); }
}
.principle {
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent);
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.principle:hover {
  border-color: var(--hairline-strong);
  background: linear-gradient(180deg, rgba(106, 166, 255, 0.04), transparent);
}
.principle-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  line-height: 1.25;
}
.principle-body {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ===== Credentials ===== */
.credentials-inner {
  max-width: 70ch;
}
.eyebrow--static {
  /* same look as the hero eyebrow but visible immediately — no fade-up */
  opacity: 1;
  animation: none;
  transform: none;
}
.credentials-title {
  max-width: 22ch;
}
.credentials-lede {
  font-size: var(--text-lg);
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 58ch;
  margin: 0 0 var(--space-10);
}
.client-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.client-list li {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: -0.005em;
  color: var(--ink);
  padding: 0.55rem 1rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.client-list li:hover {
  border-color: var(--accent);
  background: rgba(106, 166, 255, 0.06);
}
.credentials-foot {
  font-size: var(--text-xs);
  color: var(--ink-quiet);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-8);
  max-width: 60ch;
}
.credentials-bridge {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 60ch;
  margin: 0;
  letter-spacing: -0.005em;
}

/* ===== Contact ===== */
.contact { padding-bottom: var(--space-24); }
.contact-title { max-width: none; }
.contact-body {
  font-size: var(--text-lg);
  color: var(--ink-muted);
  margin: 0 0 var(--space-10);
  max-width: 56ch;
}
.contact-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding: var(--space-10) clamp(var(--space-6), 5vw, var(--space-16));
  max-width: 1180px;
  margin: 0 auto;
}
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.footer-copy {
  color: var(--ink-quiet);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
}
.footer-mark { color: var(--ink-muted); display: inline-flex; }
.footer-mark svg { overflow: visible; }

/* ===== Mobile niceties ===== */
@media (max-width: 640px) {
  .site-nav { display: none; }
  .hero { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .brand-mark { width: 96px; }
  /* Shrink header padding so the sticky bar doesn't eat too much vertical space */
  .site-header { padding: var(--space-3) var(--space-5); }
}
@media (max-width: 380px) {
  .brand-mark { width: 84px; }
  .site-header { padding: var(--space-3) var(--space-4); }
}

/* ===== Reduced motion =====
   Skip the choreography entirely and present the resolved final state:
   wordmark fully visible, star already at the i's tittle, no period. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  .wm-glyph,
  .ht-line, .eyebrow, .hero-lede, .hero-cta {
    opacity: 1 !important;
    transform: none !important;
  }
  .wm-period { opacity: 1 !important; }
  .wm-dot    { opacity: 0 !important; }
  .wm-star   { opacity: 1 !important; }
}

/* =========================================================
   Inside the platform — mission-day gallery
   ========================================================= */
.inside-platform {
  margin-top: clamp(4rem, 6vw, 6.5rem);
  padding-top: clamp(2.5rem, 4vw, 4rem);
  border-top: 1px solid var(--hairline);
}

.inside-head {
  max-width: 64ch;
  margin: 0 auto clamp(2rem, 3vw, 3rem);
  text-align: center;
}

.inside-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 0.85rem;
}

.inside-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 0.9rem;
}

.inside-lede {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}

.inside-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 1.6vw, 1.5rem);
  margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
}

.inside-shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 220ms ease, transform 220ms ease;
}

.inside-shot:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-2px);
}

.inside-shot--phone { grid-column: span 4; }
.inside-shot--wide  { grid-column: span 6; }

.inside-frame {
  background: #0c1322;
  border-bottom: 1px solid var(--hairline);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inside-shot--phone .inside-frame {
  padding: 1.25rem 1.5rem;
}

.inside-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 8px 24px rgba(0,0,0,0.35);
}

.inside-shot figcaption {
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.inside-caption-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--ink);
  letter-spacing: -0.005em;
}

.inside-caption-body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-muted);
}

.inside-footnote {
  margin: clamp(1.75rem, 2.4vw, 2.25rem) auto 0;
  max-width: 60ch;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-quiet);
}

/* Tablet: phones go 2-up, wides stay full width */
@media (max-width: 1024px) {
  .inside-shot--phone { grid-column: span 6; }
  .inside-shot--wide  { grid-column: span 12; }
}

/* Mobile: everything full width */
@media (max-width: 640px) {
  .inside-shot--phone { grid-column: span 12; }
  .inside-frame { padding: 0.75rem; }
  .inside-shot--phone .inside-frame { padding: 1rem 1.25rem; }
}

/* =========================================================
   Top-nav "Connect with Paul Levy" pill
   Sits at the end of the primary nav so the LinkedIn CTA
   is visible on every section without scrolling. Uses
   LinkedIn brand blue to read as a CTA, not just a link.
   ========================================================= */
.nav-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: 0.4rem;
  padding: 0.55rem 1.15rem 0.55rem 0.7rem;
  border: 1px solid #0a66c2;
  border-radius: 999px;
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1;
  background: #0a66c2;
  transition: background 0.2s var(--ease-out), border-color 0.2s, transform 0.2s var(--ease-out), box-shadow 0.2s;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(10, 102, 194, 0.25);
}
.nav-linkedin:hover {
  background: #0959aa;
  border-color: #0959aa;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(10, 102, 194, 0.4);
}
.nav-linkedin-icon {
  color: #ffffff;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.nav-linkedin-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  color: #ffffff;
}
.nav-linkedin-lead { color: rgba(255,255,255,0.85); font-weight: 400; }
.nav-linkedin-name { color: #ffffff; font-weight: 600; }

/* Disable the underline ::after pseudo we use on other nav links */
.nav-linkedin::after { display: none; }

/* On narrow screens, drop the "Connect with" prefix to keep the pill compact */
@media (max-width: 820px) {
  .nav-linkedin-lead { display: none; }
  .nav-linkedin { padding: 0.5rem 1rem 0.5rem 0.6rem; }
}

/* =========================================================
   Hero "Connect with Paul Levy" button variant
   ========================================================= */
.btn-linkedin {
  background: #0a66c2;
  color: #ffffff;
  border-color: #0a66c2;
}
.btn-linkedin:hover {
  background: #0959aa;
  border-color: #0959aa;
  color: #ffffff;
  transform: translateY(-1px);
}
.btn-linkedin svg { color: #ffffff; }

/* =========================================================
   Practice dropdown (in top nav)
   ========================================================= */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.25rem 0;
  font: inherit;
  color: var(--ink-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  position: relative;
  transition: color 0.2s var(--ease-out);
}
.nav-dropdown-trigger:hover,
.nav-dropdown[data-open="true"] .nav-dropdown-trigger {
  color: var(--ink);
}
.nav-dropdown-trigger::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.nav-dropdown-trigger:hover::after,
.nav-dropdown[data-open="true"] .nav-dropdown-trigger::after {
  transform: scaleX(1);
}
.nav-caret {
  transition: transform 0.2s var(--ease-out);
}
.nav-dropdown[data-open="true"] .nav-caret {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 320px;
  padding: 0.5rem;
  border-radius: 14px;
  background: color-mix(in srgb, #0b1020 92%, transparent);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s var(--ease-out),
              transform 0.18s var(--ease-out),
              visibility 0s linear 0.18s;
  z-index: 60;
}
.nav-dropdown[data-open="true"] .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.18s var(--ease-out),
              transform 0.18s var(--ease-out),
              visibility 0s linear 0s;
}
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: inherit;
  border-left: 1px solid rgba(255,255,255,0.08);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.18s var(--ease-out);
}
.nav-dropdown-item:hover {
  background: rgba(255,255,255,0.04);
}
.nav-dropdown-item::after { display: none; }
.nav-dropdown-icon {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
}
.nav-dropdown-icon--violet {
  color: #b596ff;
  background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(139,92,246,0.06));
}
.nav-dropdown-icon--amber {
  color: #f4c47a;
  background: linear-gradient(135deg, rgba(245,158,11,0.22), rgba(245,158,11,0.07));
}
.nav-dropdown-text { display: flex; flex-direction: column; gap: 0.12rem; }
.nav-dropdown-title { font-size: 0.92rem; color: var(--ink); }
.nav-dropdown-sub { font-size: 0.78rem; color: var(--ink-muted); }

/* =========================================================
   Practice quick-nav buttons (under hero)
   ========================================================= */
.practice-jumps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  padding: var(--space-4) clamp(var(--space-6), 5vw, var(--space-16)) var(--space-12);
  position: relative;
  z-index: 2;
}
.practice-jump {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.22s var(--ease-out),
              border-color 0.22s var(--ease-out),
              box-shadow 0.22s var(--ease-out),
              background 0.22s var(--ease-out);
}
.practice-jump::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 0% 0%, var(--jump-glow, transparent), transparent 70%);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.22s var(--ease-out);
}
.practice-jump:hover {
  transform: translateY(-2px);
  border-color: var(--jump-border, rgba(255,255,255,0.20));
  box-shadow: 0 18px 40px -22px var(--jump-shadow, rgba(0,0,0,0.5));
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
}
.practice-jump:hover::before { opacity: 0.85; }
.practice-jump--violet {
  --jump-glow: rgba(139, 92, 246, 0.22);
  --jump-border: rgba(139, 92, 246, 0.55);
  --jump-shadow: rgba(99, 60, 220, 0.6);
}
.practice-jump--amber {
  --jump-glow: rgba(245, 158, 11, 0.22);
  --jump-border: rgba(245, 158, 11, 0.55);
  --jump-shadow: rgba(196, 120, 0, 0.55);
}
.practice-jump-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  position: relative;
  z-index: 1;
}
.practice-jump--violet .practice-jump-icon {
  color: #c4afff;
  background: linear-gradient(135deg, rgba(139,92,246,0.28), rgba(139,92,246,0.08));
  box-shadow: inset 0 0 0 1px rgba(196,175,255,0.35);
}
.practice-jump--amber .practice-jump-icon {
  color: #f6cc83;
  background: linear-gradient(135deg, rgba(245,158,11,0.30), rgba(245,158,11,0.08));
  box-shadow: inset 0 0 0 1px rgba(246,204,131,0.35);
}
.practice-jump-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  position: relative;
  z-index: 1;
}
.practice-jump-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.practice-jump--violet .practice-jump-eyebrow { color: #b596ff; }
.practice-jump--amber .practice-jump-eyebrow { color: #f4c47a; }
.practice-jump-title {
  font-family: var(--font-serif, 'Boska', serif);
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  line-height: 1.15;
  color: var(--ink);
}
.practice-jump-sub {
  font-size: 0.86rem;
  color: var(--ink-muted);
}
.practice-jump-arrow {
  font-size: 1.25rem;
  color: var(--ink-muted);
  transition: transform 0.22s var(--ease-out), color 0.22s var(--ease-out);
  position: relative;
  z-index: 1;
}
.practice-jump:hover .practice-jump-arrow {
  transform: translateX(4px);
  color: var(--ink);
}
@media (max-width: 720px) {
  .practice-jumps { grid-template-columns: 1fr; }
}

/* =========================================================
   Section title accent icons — subtle color-tinted badges
   ========================================================= */
.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  margin-bottom: 0.65rem;
  border: 1px solid currentColor;
  background: linear-gradient(135deg,
              color-mix(in srgb, currentColor 22%, transparent),
              color-mix(in srgb, currentColor 6%, transparent));
}
.section-icon--teal   { color: #6ee7d8; }
.section-icon--sky    { color: #8bb8ff; }
.section-icon--rose   { color: #ff95b1; }
.section-icon--violet { color: #b596ff; }
.section-icon--amber  { color: #f4c47a; }
.section-icon--green  { color: #86e1a8; }
.section-icon svg { display: block; }

/* Hide nav dropdown on small screens where the full nav is hidden anyway */
@media (max-width: 640px) {
  .nav-dropdown { display: none; }
}

/* =========================================================
   Message-style dropdown (Investor Inquiries)
   ========================================================= */
.nav-dropdown-icon--emerald {
  color: #6ee7d8;
  background: linear-gradient(135deg, rgba(16,185,129,0.22), rgba(16,185,129,0.06));
}
.nav-dropdown-menu--message {
  min-width: 320px;
  max-width: 360px;
  padding: 1rem;
}
.nav-dropdown-message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}
.nav-dropdown-msg-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink);
}
.nav-dropdown-msg-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: #0a66c2;
  color: #ffffff !important;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  border: 1px solid #0a66c2;
  transition: background 0.18s var(--ease-out),
              border-color 0.18s var(--ease-out),
              transform 0.18s var(--ease-out);
}
.nav-dropdown-msg-cta:hover {
  background: #0959aa;
  border-color: #0959aa;
  transform: translateY(-1px);
}
.nav-dropdown-msg-cta::after { display: none; }
.nav-dropdown-msg-cta svg { color: #ffffff; }