/* ============================================================
   Noctua — Design System (site-wide)
   Warm ink + cream paper + a single sharp Pipeline Green.
   NEUMORPHIC SOFT-UI EDITION: every surface is extruded from
   the cream ground with a dual shadow — light from the top-left,
   soft warm shade to the bottom-right. Wells (inputs, FAQ,
   marquee) are pressed in. Dark sections mirror the same logic
   against the ink ground. Text stays high-contrast; the primary
   action stays solid green. Class contracts are unchanged.
   ============================================================ */

/* ---------- Tokens: color ---------- */
:root {
  --ink-900: #16140F;
  --ink-800: #26231B;
  --ink-700: #3A352A;
  --ink-600: #57503F;
  --ink-500: #7A7261;
  --ink-400: #A39A86;
  --ink-300: #C9C0AD;
  --ink-200: #E3DCCC;
  --ink-100: #EFE9DB;
  --paper:   #F6F2E9;
  --paper-deep: #EEE8DA;
  --surface: #F7F3EA;     /* surfaces share the page hue — neumorphic ground */
  --surface-2: #F1ECDF;

  --green-900: #0B3A2A;
  --green-700: #14533C;
  --green-600: #1A6B4D;
  --green-500: #22875F;
  --green-400: #34A878;
  --green-300: #6FC9A1;
  --green-200: #B6E6CF;
  --green-100: #E1F4EA;
  --green-50:  #F0FAF4;

  --clay-600: #B45A28;
  --clay-500: #CC6B33;
  --clay-100: #F6E5D6;

  --success: #1A6B4D;  --success-bg: #E1F4EA;
  --warning: #B07A12;  --warning-bg: #FBF0D6;
  --danger:  #B43A28;  --danger-bg:  #F8E0DB;
  --info:    #2A5F6B;  --info-bg:    #E0EEF1;

  /* Borders fade to near-invisible — shadows do the separation */
  --border-soft: rgba(22,20,15,0.06);
  --border-mid:  rgba(22,20,15,0.12);
  --border-strong: var(--ink-900);

  /* ---------- Tokens: type ---------- */
  --font-display: Verdana, Geneva, sans-serif;
  --font-body: 'Poppins', var(--font-display);
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---------- Tokens: spacing ---------- */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --container-max: 1200px;
  --container-prose: 680px;

  /* ---------- Tokens: shape (generous soft-UI radii) ---------- */
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* ---------- Tokens: neumorphic depth (light ground) ----------
     Highlight from the top-left, warm shade to the bottom-right.
     The shade is the cream darkened, never a cold gray.          */
  --neu-light: rgba(255,255,255,0.88);
  --neu-dark:  rgba(182,172,148,0.52);
  --neu-bg: linear-gradient(145deg, #FCF8F0, #F0EBDD);
  --neu-bg-deep: linear-gradient(145deg, #F3EEE1, #E8E1D0);
  --neu-raise-sm: -3px -3px 7px var(--neu-light), 3px 3px 8px var(--neu-dark);
  --neu-raise-md: -6px -6px 14px var(--neu-light), 7px 7px 16px var(--neu-dark);
  --neu-raise-lg: -10px -10px 24px var(--neu-light), 12px 12px 28px var(--neu-dark);
  --neu-inset: inset 2px 2px 6px rgba(170,160,136,0.45), inset -2px -2px 6px rgba(255,255,255,0.85);
  --neu-inset-deep: inset 3px 3px 9px rgba(160,150,126,0.50), inset -3px -3px 9px rgba(255,255,255,0.92);

  /* ---------- Tokens: neumorphic depth (ink ground) ----------
     Same dual-shadow logic against the night sections: a faint
     warm light from above, a deeper black below.                 */
  --neu-ink-light: rgba(255,243,219,0.05);
  --neu-ink-dark:  rgba(0,0,0,0.55);
  --neu-bg-ink: linear-gradient(145deg, #211D15, #12100A);
  --neu-raise-ink-sm: -3px -3px 8px var(--neu-ink-light), 4px 4px 10px var(--neu-ink-dark);
  --neu-raise-ink: -5px -5px 14px var(--neu-ink-light), 7px 7px 18px var(--neu-ink-dark);
  --neu-raise-ink-lg: -8px -8px 22px rgba(255,243,219,0.06), 14px 14px 34px rgba(0,0,0,0.62);
  --neu-inset-ink: inset 2px 2px 7px rgba(0,0,0,0.55), inset -2px -2px 7px rgba(255,243,219,0.05);

  /* Legacy shadow names kept as aliases onto the neumorphic set */
  --shadow-xs: var(--neu-raise-sm);
  --shadow-sm: var(--neu-raise-sm);
  --shadow-md: var(--neu-raise-md);
  --shadow-lg: var(--neu-raise-lg);
  --shadow-accent: -3px -3px 8px var(--neu-light), 6px 6px 16px rgba(26,107,77,0.30);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ---------- Dark scope ---------- */
.on-ink {
  --border-soft: rgba(255,255,255,0.08);
  --border-mid:  rgba(255,255,255,0.16);
  color: var(--ink-200);
}

/* ---------- Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink-700);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 28px; }
.section { padding: var(--space-10) 0; }
.section-sm { padding: var(--space-8) 0; }
.prose { max-width: var(--container-prose); }

.display { font-size: clamp(40px, 6vw, 76px); }
.h1 { font-size: clamp(32px, 4.4vw, 52px); }
.h2 { font-size: clamp(26px, 3.2vw, 38px); }
.subhead {
  font-family: var(--font-body); font-weight: 700; font-size: 22px;
  letter-spacing: -0.015em; line-height: 1.2; color: var(--ink-900);
}
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-600); }
.body { font-size: 16px; line-height: 1.6; color: var(--ink-600); }

.ink-section { background: var(--ink-900); }
.deep-section { background: var(--paper-deep); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-600);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow.center { justify-content: center; }
.eyebrow.on-dark { color: var(--green-400); }

/* ---------- Layout helpers ---------- */
.grid { display: grid; gap: 24px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.row { display: flex; align-items: center; gap: 14px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }

/* ---------- Icon chip: a small extruded tile ---------- */
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: linear-gradient(145deg, #EAF8F0, #D6EDE0);
  color: var(--green-700); flex: none;
  box-shadow: -2px -2px 5px var(--neu-light), 2px 2px 6px var(--neu-dark);
}
.icon-chip i { width: 22px; height: 22px; }
i[data-lucide] { stroke-width: 1.75; }

/* ---------- Buttons ----------
   Primary stays SOLID GREEN with white text (conversion +
   contrast); secondary/ghost are fully neumorphic cream.
   Raised at rest, higher on hover, inset when pressed.    */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em; line-height: 1; padding: 11px 20px; min-height: 46px;
  border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn i { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
.btn-lg { font-size: 16px; padding: 15px 28px; min-height: 56px; gap: 10px; border-radius: var(--radius-pill); }
.btn-sm { font-size: 13px; padding: 8px 14px; min-height: 36px; gap: 7px; }

.btn-primary {
  background: linear-gradient(145deg, var(--green-500), var(--green-700));
  color: #fff;
  box-shadow: -3px -3px 7px var(--neu-light), 4px 4px 10px var(--neu-dark),
              inset 0 1px 0 rgba(255,255,255,0.16);
}
.btn-primary:hover {
  background: linear-gradient(145deg, var(--green-600), var(--green-900));
  box-shadow: -4px -4px 10px var(--neu-light), 7px 7px 16px rgba(26,107,77,0.32),
              inset 0 1px 0 rgba(255,255,255,0.16);
}

.btn-secondary {
  background: var(--neu-bg); color: var(--ink-900); border-color: transparent;
  box-shadow: var(--neu-raise-sm);
}
.btn-secondary:hover { background: var(--neu-bg); color: var(--ink-900); transform: translateY(-1px); box-shadow: var(--neu-raise-md); }
.btn-secondary:active { transform: translateY(1px); box-shadow: var(--neu-inset); }

.btn-ghost { background: transparent; color: var(--ink-900); }
.btn-ghost:hover { background: var(--neu-bg); box-shadow: var(--neu-raise-sm); }
.btn-ghost:active { box-shadow: var(--neu-inset); }

.btn-on-ink {
  background: linear-gradient(145deg, var(--green-500), var(--green-700)); color: #fff;
  box-shadow: var(--neu-raise-ink-sm), inset 0 1px 0 rgba(255,255,255,0.16);
}
.btn-on-ink:hover {
  background: linear-gradient(145deg, var(--green-400), var(--green-600));
  box-shadow: var(--neu-raise-ink), inset 0 1px 0 rgba(255,255,255,0.16);
}

/* ---------- Badge: a tiny raised pill ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--radius-pill);
  background: var(--neu-bg); color: var(--ink-700); white-space: nowrap;
  box-shadow: -1px -1px 3px var(--neu-light), 1px 1px 3px var(--neu-dark);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-accent { background: linear-gradient(145deg, #EAF8F0, #D6EDE0); color: var(--green-700); }
.badge-qualified { background: var(--success-bg); color: var(--success); }

/* ---------- Card: cream surface extruded from the page ---------- */
.card {
  background: var(--surface); background-image: var(--neu-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: var(--space-6);
  box-shadow: var(--neu-raise-md);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.card-interactive { cursor: pointer; }
.card-interactive:hover { border-color: rgba(52,168,120,0.25); box-shadow: var(--neu-raise-lg); transform: translateY(-1px); }
.card-interactive:active { transform: translateY(1px); box-shadow: var(--neu-inset-deep); }
.card-ink {
  background: var(--ink-900); background-image: var(--neu-bg-ink);
  border-color: rgba(255,255,255,0.05);
  box-shadow: var(--neu-raise-lg), inset 0 1px 0 rgba(255,243,219,0.06);
  color: var(--ink-200);
}

/* ---------- Stat ---------- */
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat-value {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.02em; line-height: 1;
  white-space: nowrap; color: var(--green-600);
}
.stat-label { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink-600); max-width: 220px; }
.stat-ink .stat-value { color: var(--green-400); }
.stat-ink .stat-label { color: var(--ink-300); }

/* ---------- Header / nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,242,233,0.82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-link {
  font-size: 15px; font-weight: 500; color: var(--ink-700); cursor: pointer;
  padding: 4px 0; border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav-link:hover { color: var(--ink-900); }
.nav-link[aria-current="page"] { color: var(--ink-900); border-bottom-color: var(--green-500); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink-900); border-radius: 2px; margin: 4px 0; transition: 0.2s; }

/* ---------- Footer: dark ground, soft inner light from above ---------- */
.footer {
  background: var(--ink-900); color: var(--ink-200);
  padding: var(--space-9) 0 var(--space-7);
  box-shadow: inset 0 22px 48px -34px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,243,219,0.04);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer p { font-size: 16px; line-height: 1.6; color: var(--ink-300); margin-top: 16px; max-width: 280px; }
.footer-col h4 {
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-400);
  margin-bottom: 14px;
}
.footer-col a { display: block; font-size: 14px; color: var(--ink-200); margin-bottom: 10px; }
.footer-col a:hover { color: var(--green-300); }
.footer-rule { border: none; height: 1px; background: rgba(255,255,255,0.10); margin: 36px 0 20px; }
.footer-legal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-legal span { font-size: 13px; color: var(--ink-400); }
.footer-legal .mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); }

/* ---------- Hero (cinematic night stage) ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ink-900); color: var(--ink-200);
  --border-soft: rgba(255,255,255,0.10);
  padding-top: clamp(110px, 17vh, 210px);
  padding-bottom: clamp(72px, 11vh, 150px);
}
.hero-inner { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero h1 { margin-top: 20px; color: var(--paper); text-shadow: 0 1px 40px rgba(11,58,42,0.6); }
.hero .lead { margin-top: 22px; max-width: 680px; color: var(--ink-300); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.hero-note { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; color: var(--ink-500); font-size: 13.5px; }
.hero-note i { width: 17px; height: 17px; color: var(--green-600); }

/* Secondary / ghost buttons inside dark sections go dark-neumorphic */
.hero .btn-secondary, .page-hero .btn-secondary,
.on-ink .btn-secondary, .card-ink .btn-secondary {
  background: var(--neu-bg-ink); color: var(--paper); border-color: transparent;
  box-shadow: var(--neu-raise-ink-sm);
}
.hero .btn-secondary:hover, .page-hero .btn-secondary:hover,
.on-ink .btn-secondary:hover, .card-ink .btn-secondary:hover {
  background: linear-gradient(145deg, #2A251B, #1A1710); color: #fff;
  transform: translateY(-1px); box-shadow: var(--neu-raise-ink);
}
.hero .btn-secondary:active, .page-hero .btn-secondary:active,
.on-ink .btn-secondary:active, .card-ink .btn-secondary:active {
  transform: translateY(1px); box-shadow: var(--neu-inset-ink);
}

/* ---------- Video showcase (the centerpiece) ---------- */
.video-showcase { margin: 44px auto 0; width: 100%; max-width: 1040px; position: relative; }
.video-showcase::before {
  /* soft green glow behind the frame */
  content: ""; position: absolute; inset: -8% -4% 10%;
  background: radial-gradient(60% 60% at 50% 40%, rgba(52,168,120,0.14), transparent 70%);
  filter: blur(8px); z-index: 0; pointer-events: none;
}
.video-frame {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-900);
  border: 1px solid rgba(255,255,255,0.07); border-top: 3px solid var(--green-500);
  box-shadow: var(--neu-raise-ink-lg);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* Fullscreen toggle button over the video */
.video-expand {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.14);
  background: rgba(22,20,15,0.55); color: var(--paper);
  backdrop-filter: blur(6px); opacity: 0; transform: translateY(-4px);
  box-shadow: var(--neu-raise-ink-sm);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.video-frame:hover .video-expand,
.video-expand:focus-visible { opacity: 1; transform: none; }
.video-expand:hover { background: var(--green-600); border-color: var(--green-400); }
.video-expand:active { box-shadow: var(--neu-inset-ink); }
.video-expand i { width: 19px; height: 19px; }
.video-expand .i-collapse { display: none; }
/* When the frame is fullscreen: drop the chrome, fill the screen, flip the icon */
.video-frame:fullscreen { border-radius: 0; border: 0; aspect-ratio: auto; width: 100vw; height: 100vh; }
.video-frame:fullscreen .video-expand { opacity: 1; transform: none; }
.video-frame:fullscreen .i-expand { display: none; }
.video-frame:fullscreen .i-collapse { display: inline-flex; }
.video-frame:-webkit-full-screen { border-radius: 0; border: 0; width: 100vw; height: 100vh; }
.video-caption {
  position: relative; z-index: 1; margin-top: 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-500);
}
.video-caption .badge { letter-spacing: 0.04em; }

/* ---------- Trust strip: the marquee sits in a pressed-in well ---------- */
.trust-rule {
  padding: 18px 24px; border: 0; border-radius: var(--radius-md);
  background: var(--neu-bg-deep);
  box-shadow: var(--neu-inset);
}
.trust-label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-500); flex: none;
}
.trust-logos { display: flex; flex-wrap: wrap; gap: 26px; opacity: 0.85; }
.trust-logos span { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink-600); letter-spacing: -0.02em; }

/* ---------- How-it-works number ---------- */
.step-num { font-family: var(--font-mono); font-weight: 600; font-size: 28px; color: var(--green-500); }

/* ---------- Testimonial ---------- */
.quote-block { text-align: center; margin: 0 auto; }
.quote-block .mark { width: 36px; height: 36px; color: var(--green-400); margin: 0 auto; }
.quote-text {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 34px);
  line-height: 1.25; letter-spacing: -0.02em; color: var(--ink-900); margin-top: 18px;
}
.avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--green-500), var(--green-700));
  color: #fff; font-weight: 600; font-size: 16px;
  font-family: var(--font-body);
  box-shadow: var(--neu-raise-sm);
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.fade-up { opacity: 0; transform: translateY(14px); animation: fadeUp 0.6s var(--ease-out) forwards; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .fade-up { opacity: 1; transform: none; animation: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    position: absolute; top: 72px; left: 0; right: 0; padding: 18px 28px 24px;
    background: var(--paper); border-bottom: 1px solid var(--border-soft); box-shadow: var(--neu-raise-md);
  }
  .nav-toggle { display: block; }
  .section { padding: var(--space-9) 0; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .nav-cta .btn-text-hide { display: none; }
}

/* ============================================================
   CINEMATIC / INTERACTIVE LAYER — "the night shift"
   Motion, depth, and life. Everything here degrades to a
   static end-state under prefers-reduced-motion (guards below).
   ============================================================ */

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100;
  background: linear-gradient(90deg, var(--green-600), var(--green-300));
  box-shadow: 0 0 12px rgba(52,168,120,0.55);
  transition: width 90ms linear; pointer-events: none;
}

/* ---------- Nav: transparent over the dark hero, frosts on scroll ---------- */
.nav .logo-light { display: none; }
.nav.at-top {
  /* faint top scrim so the light nav text never washes into a bright hero area */
  background: linear-gradient(to bottom, rgba(11,10,7,0.55), rgba(11,10,7,0));
  border-bottom-color: transparent; backdrop-filter: none;
}
.nav.at-top .logo-dark { display: none; }
.nav.at-top .logo-light { display: block; }
.nav.at-top .nav-link { color: rgba(255,255,255,0.92); text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.nav.at-top .nav-link:hover { color: #fff; }
.nav.at-top .nav-link[aria-current="page"] { color: #fff; }
.nav.at-top .nav-toggle span { background: var(--paper); }
.nav:not(.at-top) { box-shadow: 0 6px 18px -12px rgba(22,20,15,0.30); }

/* ---------- Hero background fx ---------- */
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  pointer-events: none; opacity: 0.7;
}
.hero-aurora {
  position: absolute; inset: -25% -12% -10% -12%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 48% at 18% 22%, rgba(26,107,77,0.42), transparent 70%),
    radial-gradient(32% 42% at 84% 14%, rgba(52,168,120,0.28), transparent 70%),
    radial-gradient(48% 58% at 62% 96%, rgba(11,58,42,0.58), transparent 72%);
  filter: blur(28px); animation: auroraDrift 20s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.07); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.04); }
}
.hero-spotlight {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  background: radial-gradient(260px 260px at var(--mx, 50%) var(--my, 38%), rgba(111,201,161,0.13), transparent 70%);
}
.hero:hover .hero-spotlight { opacity: 1; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: 1;
  pointer-events: none; background: linear-gradient(to bottom, transparent, var(--paper));
}

/* ---------- Owl eyes (cursor-tracking, occasional blink) ---------- */
.owl-eyes { display: flex; gap: 16px; margin-bottom: 28px; }
.owl-eye {
  width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #0b3a2a, #16140f 75%);
  border: 2px solid var(--green-400);
  box-shadow: var(--neu-raise-ink-sm), inset 0 0 8px rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.owl-pupil {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--green-300); box-shadow: 0 0 9px var(--green-300);
  transition: transform 0.14s var(--ease-out);
}
.owl-eye.blink { animation: owlBlink 0.2s ease; }
@keyframes owlBlink { 50% { transform: scaleY(0.08); } }

/* ---------- Gradient headline accent ---------- */
.grad {
  background: linear-gradient(100deg, var(--green-300), var(--green-500) 55%, var(--green-300));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 7s linear infinite; -webkit-text-fill-color: transparent;
}
@keyframes gradShift { to { background-position: 220% 0; } }

/* ---------- Hero note on dark ---------- */
.hero .hero-note { color: var(--ink-400); }
.hero .hero-note i { color: var(--green-300); }

/* ---------- Video showcase: animated halo + live frame ---------- */
.video-showcase { perspective: 1200px; }
.video-showcase::before {
  content: ""; position: absolute; inset: -10% -6% 6%;
  background: radial-gradient(58% 60% at 50% 42%, rgba(52,168,120,0.22), transparent 70%);
  filter: blur(18px); z-index: 0; pointer-events: none;
  animation: haloPulse 5.5s ease-in-out infinite;
}
@keyframes haloPulse { 0%,100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
.video-frame {
  border-top-width: 3px;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.video-showcase.tilting .video-frame { box-shadow: var(--neu-raise-ink-lg), 0 0 0 1px rgba(52,168,120,0.22); }
.video-caption { color: var(--ink-400); }
.video-caption .badge-accent { background: rgba(52,168,120,0.14); color: var(--green-300); box-shadow: var(--neu-raise-ink-sm); }
.video-caption .badge-accent .dot { background: var(--green-300); box-shadow: 0 0 8px var(--green-300); animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.7); } }

/* ---------- 3D tilt (softened for soft-UI) ---------- */
[data-tilt] { transform-style: preserve-3d; transition: transform 0.4s var(--ease-out); will-change: transform; }
[data-tilt].tilting { transition: transform 0.08s linear; }

/* ---------- Magnetic buttons ---------- */
[data-magnetic] { transition: transform 0.2s var(--ease-out); will-change: transform; }

/* ---------- Button shine sweep (primary) ---------- */
.btn-primary, .btn-on-ink, .btn-gold { position: relative; overflow: hidden; }
.btn-primary::after, .btn-on-ink::after, .btn-gold::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.20), transparent);
  transform: skewX(-18deg); transition: left 0.55s var(--ease-out); pointer-events: none;
}
.btn-primary:hover, .btn-on-ink:hover, .btn-gold:hover { transform: translateY(-1px); }
.btn-primary:hover::after, .btn-on-ink:hover::after, .btn-gold:hover::after { left: 150%; }
/* The classic neumorphic press: green wells in */
.btn-primary:active, .btn-on-ink:active, .btn-gold:active {
  transform: translateY(1px);
  box-shadow: inset 3px 3px 8px rgba(11,58,42,0.55), inset -2px -2px 6px rgba(255,255,255,0.10);
}

/* ---------- Trust marquee ---------- */
.marquee {
  overflow: hidden; flex: 1; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; gap: 44px; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--ink-600); letter-spacing: -0.02em; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
.marquee-track span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green-400); opacity: 0.7; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Interactive agent cards: soft sheen + lift ---------- */
.card-interactive { position: relative; overflow: hidden; }
.card-interactive::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  background:
    radial-gradient(150px 150px at var(--cx, 50%) var(--cy, 0%), rgba(255,255,255,0.22), transparent 65%),
    radial-gradient(340px 340px at var(--cx, 50%) var(--cy, 0%), rgba(52,168,120,0.08), transparent 72%);
}
.card-interactive:hover::before { opacity: 1; }
.card-interactive > * { position: relative; z-index: 1; }
.card-interactive .icon-chip { transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.card-interactive:hover .icon-chip { transform: translateY(-1px); background: linear-gradient(145deg, var(--green-500), var(--green-700)); color: #fff; }

/* ---------- Stagger reveal ---------- */
.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: 0.04s; }
.stagger.in > *:nth-child(2) { transition-delay: 0.10s; }
.stagger.in > *:nth-child(3) { transition-delay: 0.16s; }
.stagger.in > *:nth-child(4) { transition-delay: 0.22s; }
.stagger.in > *:nth-child(5) { transition-delay: 0.28s; }
.stagger.in > *:nth-child(6) { transition-delay: 0.34s; }

/* ---------- Proof stats: soft glow + count-up presentation ---------- */
.stat-ink .stat-value { text-shadow: 0 0 20px rgba(52,168,120,0.28); }
.ink-section { position: relative; overflow: hidden; }
.ink-section::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 70% at 80% 0%, rgba(26,107,77,0.26), transparent 70%);
}
.ink-section { box-shadow: inset 0 22px 48px -32px rgba(0,0,0,0.8), inset 0 -22px 48px -32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,243,219,0.04); }
.ink-section .container { position: relative; z-index: 1; }
.stat-ink { cursor: default; transition: transform var(--dur-base) var(--ease-out); }
.stat-ink:hover { transform: translateY(-2px); }

/* ---------- CTA card glow ---------- */
.card-ink { position: relative; overflow: hidden; }
.card-ink::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 50% -10%, rgba(52,168,120,0.22), transparent 70%);
}
.card-ink > * { position: relative; z-index: 1; }

/* ---------- Reduced-motion: freeze to the end state ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-aurora, .grad, .video-showcase::before, .video-caption .badge-accent .dot,
  .marquee-track, .btn-primary::after, .btn-on-ink::after, .btn-gold::after { animation: none !important; }
  .hero-spotlight, .hero-canvas { display: none !important; }
  .stagger > * { opacity: 1; transform: none; transition: none; }
  [data-tilt], [data-magnetic] { transform: none !important; }
  .scroll-progress { display: none; }
  .btn, .card, .card-interactive, .dir-card, .price-card, .post-card { transition: none; }
}

/* ---------- Responsive tuning for the hero + soft-UI shadows ---------- */
@media (max-width: 720px) {
  :root {
    /* shadows scale down gracefully on small screens */
    --neu-raise-sm: -2px -2px 5px var(--neu-light), 2px 2px 6px var(--neu-dark);
    --neu-raise-md: -4px -4px 9px var(--neu-light), 4px 4px 10px var(--neu-dark);
    --neu-raise-lg: -6px -6px 14px var(--neu-light), 7px 7px 16px var(--neu-dark);
    --neu-raise-ink: -3px -3px 9px var(--neu-ink-light), 5px 5px 12px var(--neu-ink-dark);
    --neu-raise-ink-lg: -5px -5px 14px rgba(255,243,219,0.05), 8px 8px 20px rgba(0,0,0,0.6);
  }
  .owl-eyes { gap: 13px; margin-bottom: 22px; }
  .owl-eye { width: 28px; height: 28px; }
  .marquee-track { animation-duration: 22s; }
  .trust-rule .row.between { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   INTERIOR PAGES — full design-system rollout
   Same soft-extruded language: dark hero stage, warm content.
   ============================================================ */

/* ---------- Dark cinematic page hero (interior) ---------- */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ink-900); color: var(--ink-200);
  --border-soft: rgba(255,255,255,0.10);
  padding-top: clamp(124px, 18vh, 200px);
  padding-bottom: clamp(60px, 9vh, 116px);
  box-shadow: inset 0 -26px 60px -38px rgba(0,0,0,0.7);
}
.page-hero::before {
  content: ""; position: absolute; inset: -30% -12% auto -12%; height: 170%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 52% at 18% 8%, rgba(26,107,77,0.36), transparent 70%),
    radial-gradient(34% 46% at 88% 0%, rgba(52,168,120,0.22), transparent 70%);
  filter: blur(30px); animation: auroraDrift 22s ease-in-out infinite alternate;
}
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--paper));
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .eyebrow { color: var(--green-400); }
.page-hero h1 { color: var(--paper); margin-top: 16px; text-shadow: 0 1px 36px rgba(11,58,42,0.55); }
.page-hero .lead { color: var(--ink-300); margin-top: 18px; max-width: 680px; }
.page-hero .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.page-hero.center { text-align: center; }
.page-hero.center .eyebrow { justify-content: center; }
.page-hero.center .lead { margin-left: auto; margin-right: auto; }
.page-hero.center .hero-cta { justify-content: center; }

/* ---------- Section head ---------- */
.section-head { max-width: 720px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2, .section-head .h1 { margin-top: 14px; }
.section-head .lead { margin-top: 14px; }

/* ---------- Check list ---------- */
.list-check { list-style: none; display: grid; gap: 11px; }
.list-check li { position: relative; padding-left: 30px; color: var(--ink-700); font-size: 15px; line-height: 1.5; }
.list-check li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-weight: 600; color: var(--green-600);
}
.on-ink .list-check li, .card-ink .list-check li { color: var(--ink-200); }
.on-ink .list-check li::before, .card-ink .list-check li::before { color: var(--green-400); }

/* ---------- Forms: the card is raised, every input is a well ---------- */
.form-card {
  background: var(--surface); background-image: var(--neu-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--neu-raise-md);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: 14px; color: var(--ink-800); }
.form-field input, .form-field select, .form-field textarea {
  padding: 13px 14px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 15px;
  background: var(--surface-2); color: var(--ink-900);
  box-shadow: var(--neu-inset);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--green-500);
  box-shadow: var(--neu-inset), 0 0 0 3px rgba(34,135,95,0.28);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.hp-field { position: absolute; left: -9999px; }
.form-status { color: var(--ink-600); font-size: 14px; }

/* ---------- FAQ: each item is a pressed-in well that breathes open ---------- */
.faq-item {
  border-bottom: 0; border-radius: var(--radius-sm);
  background: var(--neu-bg-deep); box-shadow: var(--neu-inset);
  padding: 0 22px; margin-bottom: 14px;
}
.faq-item summary {
  cursor: pointer; padding: 20px 44px 20px 0; list-style: none; position: relative;
  font-family: var(--font-body); font-weight: 700; font-size: 18px; color: var(--ink-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 26px; line-height: 1; color: var(--green-600);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-item[open] { box-shadow: var(--neu-inset-deep); }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item .faq-body { padding: 0 0 22px; color: var(--ink-600); max-width: 64em; }
.faq-item .faq-body p { margin-bottom: 12px; }
.faq-item summary { transition: color var(--dur-fast) var(--ease-out); }
.faq-item summary:hover { color: var(--green-700); }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.price-card {
  background: var(--surface); background-image: var(--neu-bg);
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 34px 30px; display: flex; flex-direction: column;
  box-shadow: var(--neu-raise-md); position: relative;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.price-card:hover { box-shadow: var(--neu-raise-lg); transform: translateY(-1px); }
.price-card.featured { border: 2px solid var(--green-500); box-shadow: var(--neu-raise-lg); }
.price-card.featured:hover { box-shadow: var(--neu-raise-lg), 0 0 0 4px rgba(34,135,95,0.10); }
.price-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(145deg, var(--green-500), var(--green-700));
  color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--radius-pill); white-space: nowrap;
  box-shadow: var(--neu-raise-sm);
}
.price-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 22px; color: var(--ink-900); }
.price-card .tagline { color: var(--ink-600); font-size: 14px; margin: 8px 0 18px; min-height: 42px; }
.price { font-family: var(--font-mono); font-size: 40px; font-weight: 600; color: var(--ink-900); letter-spacing: -0.02em; line-height: 1; }
.price small { font-size: 15px; color: var(--ink-500); font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }
.price-card .list-check { margin: 22px 0 28px; flex: 1; }
.price-foot { font-size: 13px; color: var(--ink-500); text-align: center; margin-top: 12px; }

/* ---------- Blog ---------- */
.post-card {
  display: flex; flex-direction: column;
  background: var(--surface); background-image: var(--neu-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: var(--space-6);
  box-shadow: var(--neu-raise-md);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.post-card:hover { box-shadow: var(--neu-raise-lg); transform: translateY(-1px); border-color: rgba(52,168,120,0.20); }
.post-meta {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 10px;
}
.post-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 21px; color: var(--ink-900); margin-bottom: 8px; line-height: 1.25; }
.post-card p { color: var(--ink-600); font-size: 15px; }
.read-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--green-700); font-weight: 600; font-size: 14px; }
.read-more i { width: 16px; height: 16px; }
.post-card:hover .read-more { color: var(--green-600); }

/* ---------- Article / prose (blog posts, legal) ---------- */
.article, .prose-page { max-width: 720px; }
.article p, .prose-page p { margin-bottom: 18px; color: var(--ink-700); font-size: 17px; line-height: 1.7; }
.article h2, .prose-page h2 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 30px);
  letter-spacing: -0.02em; color: var(--ink-900); margin: 44px 0 14px;
}
.article h3, .prose-page h3 { font-family: var(--font-body); font-weight: 700; font-size: 20px; color: var(--ink-900); margin: 30px 0 10px; }
.article ul, .article ol, .prose-page ul, .prose-page ol { margin: 0 0 18px 24px; color: var(--ink-700); }
.article li, .prose-page li { margin-bottom: 8px; line-height: 1.6; }
.article blockquote {
  border-left: 3px solid var(--green-500); padding: 6px 0 6px 22px; margin: 26px 0;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.4vw, 24px);
  letter-spacing: -0.01em; color: var(--ink-900); line-height: 1.35;
}
.article a, .prose-page a, .body a { color: var(--green-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.article a:hover, .prose-page a:hover { color: var(--green-600); }

/* ---------- Misc helpers for interior pages ---------- */
.divider { border: none; height: 1px; background: var(--border-soft); margin: var(--space-7) 0; }
.muted { color: var(--ink-500); }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Section bands read as soft planes ---------- */
.deep-section {
  box-shadow: inset 3px 3px 12px -6px rgba(170,160,136,0.45),
              inset -3px -3px 12px -6px rgba(255,255,255,0.85);
}

/* ---------- Interior responsive + reduced-motion ---------- */
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card.featured { transform: none; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero::before { animation: none !important; }
}

/* ============================================================
   FOCUS — strong, visible, never shadow-only
   ============================================================ */
.btn:focus-visible { outline: 2px solid var(--green-500); outline-offset: 3px; }
.hero .btn:focus-visible, .page-hero .btn:focus-visible, .on-ink .btn:focus-visible,
.card-ink .btn:focus-visible { outline-color: var(--green-300); }
a:focus-visible, summary:focus-visible, .nav-toggle:focus-visible {
  outline: 2px solid var(--green-500); outline-offset: 3px; border-radius: 3px;
}
.hero a:focus-visible, .page-hero a:focus-visible, .footer a:focus-visible,
.nav.at-top a:focus-visible, .nav.at-top .nav-toggle:focus-visible { outline-color: var(--green-300); }

/* ============================================================
   LEGACY ALIASES used by interior pages (additive)
   contact/index.html uses .btn-gold and .grid-2 from an older
   handoff; map them onto the current system so the form button
   reads as the solid-green primary.
   ============================================================ */
.btn-gold {
  background: linear-gradient(145deg, var(--green-500), var(--green-700)); color: #fff;
  box-shadow: -3px -3px 7px var(--neu-light), 4px 4px 10px var(--neu-dark),
              inset 0 1px 0 rgba(255,255,255,0.16);
}
.btn-gold:hover {
  background: linear-gradient(145deg, var(--green-600), var(--green-900));
  box-shadow: -4px -4px 10px var(--neu-light), 7px 7px 16px rgba(26,107,77,0.32),
              inset 0 1px 0 rgba(255,255,255,0.16);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* ============================================================
   TILT DEPTH LAYERS + GLARE (opt-in hooks driven by main.js)
   ============================================================ */
[data-glare] { position: relative; }
[data-glare]::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  background:
    radial-gradient(140px 140px at var(--cx, 50%) var(--cy, 18%), rgba(255,255,255,0.14), transparent 65%),
    radial-gradient(300px 300px at var(--cx, 50%) var(--cy, 18%), rgba(52,168,120,0.05), transparent 72%);
}
[data-glare]:hover::after { opacity: 1; }

@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  [data-tilt] .tilt-layer, [data-tilt] [data-depth] {
    transition: transform 0.45s var(--ease-out);
    will-change: transform;
  }
  [data-tilt].tilting .tilt-layer, [data-tilt].tilting [data-depth] {
    transition: transform 0.08s linear;
  }
  [data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
}

/* ============================================================
   INTERACTIVE DIRECTORY — the internal-page map.
   Soft extruded tiles; instantly scannable; generous targets.
   ============================================================ */
.directory { position: relative; overflow: hidden; }
.dir-orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  width: 420px; height: 420px; filter: blur(48px); opacity: 0.40;
  background: radial-gradient(circle, rgba(52,168,120,0.26), transparent 70%);
}
.directory > .container { position: relative; z-index: 1; }
.dir-group { margin-top: 44px; }
.dir-group-label {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-500);
}
.dir-group-label::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }
.dir-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
.dir-grid-4 { grid-template-columns: repeat(4, 1fr); }
.dir-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); background-image: var(--neu-bg);
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 24px; min-height: 56px;
  box-shadow: var(--neu-raise-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.dir-card:hover {
  border-color: rgba(52,168,120,0.25);
  box-shadow: var(--neu-raise-md);
  transform: translateY(-1px);
}
.dir-card:active { transform: translateY(1px); box-shadow: var(--neu-inset); }
.dir-card > * { position: relative; z-index: 1; }
.dir-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dir-icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #EAF8F0, #D6EDE0); color: var(--green-700);
  box-shadow: -2px -2px 5px var(--neu-light), 2px 2px 6px var(--neu-dark);
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.dir-icon i { width: 21px; height: 21px; }
.dir-card:hover .dir-icon { background: linear-gradient(145deg, var(--green-500), var(--green-700)); color: #fff; transform: translateY(-1px); }
.dir-arrow {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-500); border: 1px solid transparent;
  background: var(--neu-bg); box-shadow: var(--neu-raise-sm);
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.dir-arrow i { width: 16px; height: 16px; }
.dir-card:hover .dir-arrow { color: #fff; background: linear-gradient(145deg, var(--green-500), var(--green-700)); transform: translateX(3px); }
.dir-title {
  font-family: var(--font-body); font-weight: 700; font-size: 18px;
  letter-spacing: -0.01em; line-height: 1.25; color: var(--ink-900); margin-top: 10px;
}
.dir-desc { font-size: 14px; line-height: 1.5; color: var(--ink-600); }
/* Compact row variant — for location / company entries */
.dir-card.dir-row { flex-direction: row; align-items: center; gap: 14px; padding: 18px 20px; }
.dir-row .dir-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dir-row .dir-title { margin-top: 0; font-size: 16px; }
.dir-row .dir-desc { font-size: 13px; }
.dir-row .dir-icon { width: 38px; height: 38px; }
.dir-row .dir-icon i { width: 19px; height: 19px; }

/* ============================================================
   HERO, VIDEO-FIRST — the demo owns the top of the page.
   .hero-leadvideo modifies the homepage hero only; the base
   .hero contract is untouched for any other consumer.
   ============================================================ */
.hero-leadvideo { padding-top: clamp(92px, 12vh, 132px); }
.hero-video-band { position: relative; z-index: 2; width: 100%; padding: 0 clamp(14px, 3.5vw, 44px); }
.hero-video-band .video-showcase {
  margin: 0 auto;
  /* near-full-bleed, but never taller than the viewport leaves room for */
  max-width: min(1480px, calc((100vh - 250px) * 1.7778));
  min-width: min(100%, 280px);
}
.hero-leadvideo .video-frame {
  border-radius: var(--radius-lg);
  box-shadow: var(--neu-raise-ink-lg), 0 0 0 1px rgba(52,168,120,0.14);
}
.hero-leadvideo .hero-inner { margin-top: clamp(44px, 7vh, 80px); }
.hero-leadvideo .display { font-size: clamp(36px, 5.2vw, 66px); }
@media (max-width: 720px) {
  .hero-leadvideo { padding-top: 88px; }
  .hero-leadvideo .hero-inner { margin-top: 40px; }
}

/* ---------- Responsive: the directory flattens to a clean stack ---------- */
@media (max-width: 900px) {
  .dir-grid, .dir-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dir-grid, .dir-grid-4 { grid-template-columns: 1fr; gap: 12px; }
  .dir-card { padding: 20px; }
  .dir-group { margin-top: 36px; }
}

/* ---------- Reduced motion: everything collapses to a clean, flat read ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-parallax] { transform: none !important; }
  [data-tilt] .tilt-layer, [data-tilt] [data-depth] { transform: none !important; transition: none; }
  [data-glare]::after { transition: none; }
  .dir-card, .dir-icon, .dir-arrow { transition: none; }
  .dir-card:hover { transform: none; }
  .dir-card:hover .dir-icon, .dir-card:hover .dir-arrow { transform: none; }
}