/* =============================================================
   LUDIA LABS — Design System
   --------------------------------------------------------------
   Hand-written modern CSS. No framework, no build step.
   All design tokens are CSS custom properties — change one place,
   the whole site updates.

   To rebrand: change --color-accent below to your brand hex.
   ============================================================= */

/* ---------- 0 · FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400;1,9..144,500;1,9..144,600&family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap');

/* ---------- 1 · TOKENS ---------- */
:root {
  /* Brand color — sampled directly from the official Ludia Consulting logo */
  --color-accent:        #739E42;       /* Ludia green */
  --color-accent-soft:   #739E4210;     /* 6% tint for backgrounds */
  --color-accent-hover:  #5C7F34;       /* darker green for hover states */

  /* Surface */
  --color-bg:            #FAFAF7;       /* bone white */
  --color-bg-alt:        #F2F2EC;       /* slightly warmer for alt sections */
  --color-bg-dark:       #0A0A0A;       /* one-dark-section register */

  /* Type */
  --color-ink:           #0A0A0A;
  --color-ink-2:         #525252;
  --color-ink-3:         #A3A3A3;
  --color-ink-inv:       #FAFAF7;
  --color-rule:          #E5E5E2;

  /* Type families */
  --font-display:        'Fraunces', Georgia, serif;
  --font-body:           'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:           'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Type sizes — use clamp() for fluid responsive */
  --fs-display-xl:       clamp(72px, 14vw, 224px);
  --fs-display-lg:       clamp(56px, 10vw, 152px);
  --fs-display-md:       clamp(40px, 7vw, 96px);
  --fs-display-sm:       clamp(32px, 5vw, 64px);
  --fs-body-xl:          clamp(20px, 1.8vw, 26px);
  --fs-body-lg:          clamp(17px, 1.4vw, 20px);
  --fs-body:             16px;
  --fs-body-sm:          14px;
  --fs-meta:             11px;
  --fs-micro:            10px;

  /* Spacing scale */
  --space-1:             4px;
  --space-2:             8px;
  --space-3:             12px;
  --space-4:             16px;
  --space-6:             24px;
  --space-8:             32px;
  --space-12:            48px;
  --space-16:            64px;
  --space-20:            80px;
  --space-24:            96px;
  --space-32:            128px;
  --space-40:            160px;

  /* Motion */
  --ease-out:            cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:         cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:            300ms;
  --dur-base:            600ms;
  --dur-slow:            1200ms;

  /* Layout */
  --container:           1400px;
  --container-narrow:    900px;
  --page-pad-x:          clamp(24px, 4vw, 48px);
  --page-pad-y:          clamp(24px, 3vw, 32px);

  /* Borders */
  --border:              1px solid var(--color-rule);
}

/* ---------- 2 · RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: auto; /* Lenis takes over */ }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
}

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

::selection {
  background: var(--color-ink);
  color: var(--color-ink-inv);
}

/* Lenis required */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* ---------- 3 · TYPOGRAPHY PRIMITIVES ---------- */
.display {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  font-feature-settings: 'ss01' on, 'ss02' on;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--color-ink);
}
.display.italic { font-style: italic; font-weight: 400; }

.display-xl { font-size: var(--fs-display-xl); }
.display-lg { font-size: var(--fs-display-lg); }
.display-md { font-size: var(--fs-display-md); }
.display-sm { font-size: var(--fs-display-sm); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink-2);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}
.eyebrow .rule {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: var(--color-accent);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  font-weight: 500;
}

.lead {
  font-size: var(--fs-body-xl);
  line-height: 1.4;
  color: var(--color-ink-2);
  max-width: 640px;
}
.lead strong, .lead .verb {
  color: var(--color-ink);
  font-weight: 400;
}
.lead .verb-accent { color: var(--color-accent); font-weight: 500; }

.prose {
  max-width: 640px;
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--color-ink-2);
}
.prose p + p { margin-top: 1.2em; }
.prose strong { color: var(--color-ink); font-weight: 500; }

/* ---------- 4 · LAYOUT ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
}
.container-narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}
.section-sm { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.section-lg { padding-top: var(--space-40); padding-bottom: var(--space-40); }

.section-dark {
  background: var(--color-bg-dark);
  color: var(--color-ink-inv);
}
.section-dark .display      { color: var(--color-ink-inv); }
.section-dark .lead         { color: #C7C7C2; }
.section-dark .lead .verb   { color: var(--color-ink-inv); }
.section-dark .eyebrow      { color: #C7C7C2; }
.section-dark .meta         { color: #6E6E6A; }
.section-dark .prose        { color: #C7C7C2; }
.section-dark .prose strong { color: var(--color-ink-inv); }
.section-dark .border-top   { border-color: #2A2A2A; }

.border-top    { border-top: var(--border); }
.border-bottom { border-bottom: var(--border); }

/* ---------- 5 · NAV / HEADER ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.site-nav.is-scrolled {
  border-bottom-color: var(--color-rule);
  background: rgba(250, 250, 247, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--page-pad-y) var(--page-pad-x);
  max-width: var(--container);
  margin: 0 auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--color-ink);
  text-decoration: none;
  line-height: 1;
}
.brand__logo {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .brand__logo { height: 32px; }
}
.brand__divider {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--color-rule);
  flex-shrink: 0;
}
.brand__labs {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--color-accent);
  font-weight: 500;
  line-height: 1;
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.brand:hover .brand__labs { color: var(--color-accent-hover); }
.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-8);
  font-size: 13px;
  color: var(--color-ink-2);
}
@media (min-width: 900px) {
  .nav-links { display: inline-flex; }
}
.nav-links a {
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--color-ink); }
.nav-links a.is-current { color: var(--color-ink); }
.nav-links a.is-current::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--color-accent);
}
.nav-cta {
  margin-left: var(--space-6);
  color: var(--color-ink) !important;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 2px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav-cta:hover { opacity: 0.6; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
@media (min-width: 900px) { .nav-toggle { display: none; } }

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 49;
  background: var(--color-bg);
  padding: 96px var(--page-pad-x) var(--page-pad-x);
  flex-direction: column;
  gap: var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(32px, 8vw, 56px);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a { padding: var(--space-3) 0; border-bottom: var(--border); }
.mobile-menu a.is-current { color: var(--color-accent); font-style: italic; }

/* ---------- 6 · HERO ---------- */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 80px);
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}
.hero__eyebrow { margin-bottom: var(--space-12); }
.hero__display { margin-bottom: var(--space-12); }
.hero__display .line {
  display: block;
  opacity: 0;
}
.hero__display .line:nth-child(2) { margin-top: -8px; }
@media (min-width: 768px) {
  .hero__display .line:nth-child(2) { margin-top: -16px; }
}
.hero__lead { margin-bottom: var(--space-12); }
.hero__cta { }

/* Bottom hero strip */
.hero-strip {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--page-pad-y) var(--page-pad-x);
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
}
.hero-strip .scroll {
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink-2);
}
@media (min-width: 640px) { .hero-strip .scroll { display: inline-flex; } }
.scroll-arrow {
  width: 12px; height: 12px;
  animation: bob 2.4s var(--ease-in-out) infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ---------- 7 · CTA LINK ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-ink);
  font-size: 15px;
  width: fit-content;
  transition: color var(--dur-fast) var(--ease-out);
}
.cta__label {
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 2px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.cta .arrow {
  width: 16px; height: 16px;
  color: var(--color-accent);
  transition: transform var(--dur-base) var(--ease-out);
}
.cta:hover .arrow { transform: translateX(6px); }
.cta:hover .cta__label { opacity: 0.6; }

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--color-ink);
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cta-button:hover { background: var(--color-ink); color: var(--color-ink-inv); }
.cta-button.dark { background: var(--color-ink); color: var(--color-ink-inv); }
.cta-button.dark:hover { background: var(--color-accent); border-color: var(--color-accent); }

/* ---------- 8 · PRODUCT MODULES (Doss-pattern composable cards) ---------- */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-rule);
  border: var(--border);
}
@media (min-width: 700px)  { .product-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
.product-grid.three-up { }
@media (min-width: 1100px) { .product-grid.three-up { grid-template-columns: repeat(3, 1fr); } }

.product-module {
  background: var(--color-bg);
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-height: 320px;
  transition: background var(--dur-fast) var(--ease-out);
  position: relative;
}
.product-module:hover { background: var(--color-bg-alt); }
.product-module__index {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.product-module__index .tag {
  padding: 3px 8px;
  border: 1px solid var(--color-rule);
  border-radius: 100px;
  color: var(--color-ink-2);
  letter-spacing: 0.2em;
}
.product-module__index .tag.dev {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.product-module__name {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-ink);
}
.product-module__name em {
  font-style: italic;
  color: var(--color-accent);
}
.product-module__line {
  font-size: var(--fs-body-lg);
  color: var(--color-ink-2);
  line-height: 1.4;
  flex: 1;
}
.product-module__proof {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--border);
}
.product-module__proof .number {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.product-module__proof .label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

/* ---------- 9 · METRICS ROW ---------- */
.metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
}
@media (min-width: 700px) {
  .metrics.four-up { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
  .metrics.three-up { grid-template-columns: repeat(3, 1fr); }
}
.metric__number {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}
.metric__number em { font-style: italic; color: var(--color-accent); font-weight: 400; }
.metric__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

/* ---------- 10 · CUSTOMER STORY (Lesse-pattern editorial) ---------- */
.customer-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  padding: var(--space-20) 0;
  border-bottom: var(--border);
}
@media (min-width: 900px) {
  .customer-story { grid-template-columns: 1fr 2fr; gap: var(--space-20); }
}
.customer-story__meta { }
.customer-story__id {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-6);
}
.customer-story__name {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-4);
}
.customer-story__industry {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.customer-story__body { }
.customer-story__challenge {
  font-size: var(--fs-body-lg);
  color: var(--color-ink-2);
  line-height: 1.55;
  margin-bottom: var(--space-6);
}
.customer-story__work {
  color: var(--color-ink);
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  margin-bottom: var(--space-12);
}
.customer-story__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-8);
}
.customer-story__metric .n {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-ink);
}
.customer-story__metric .n em { color: var(--color-accent); font-style: italic; }
.customer-story__metric .l {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-top: 8px;
}
.customer-story__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body-xl);
  line-height: 1.35;
  color: var(--color-ink);
  margin: 0;
}
.customer-story__quote::before {
  content: '“';
  display: block;
  font-size: 80px;
  line-height: 0.5;
  margin-bottom: 16px;
  color: var(--color-accent);
}
.customer-story__attr {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-top: var(--space-4);
}

/* ---------- 11 · MANIFESTO CHAPTER ---------- */
.chapter {
  padding: var(--space-32) 0;
  border-bottom: var(--border);
}
.chapter:last-child { border-bottom: 0; }
.chapter__index {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-8);
}
.chapter__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin-bottom: var(--space-12);
  color: var(--color-ink);
}
.chapter__title em {
  font-style: italic;
  color: var(--color-accent);
  font-weight: 400;
}
.chapter__callout {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.25;
  color: var(--color-ink);
  border-left: 1px solid var(--color-accent);
  padding-left: var(--space-8);
  margin: var(--space-12) 0;
  max-width: 720px;
}

/* ---------- 12 · MICROSOFT LINE (understated) ---------- */
.ms-line {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding: var(--space-20) 0;
  border-top: var(--border);
  border-bottom: var(--border);
}
@media (min-width: 900px) {
  .ms-line { grid-template-columns: 320px 1fr; gap: var(--space-20); align-items: start; }
}
.ms-line__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.ms-line__body {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--color-ink);
}
.ms-line__body em { font-style: italic; color: var(--color-accent); font-weight: 400; }

/* Tiny inline Microsoft logo for the ms-line__body */
.ms-line__body .ms-logo-inline {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 6px;
}

/* ---------- 12b · MS CREDENTIALS (single-logo header + typographic card grid) ---------- */
.ms-credentials {
  margin-bottom: var(--space-12);
}
.ms-credentials__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #1F1F1F;
}
.ms-credentials__logo {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.ms-credentials__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8A8A85;
}
.ms-credentials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .ms-credentials__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
.ms-credential {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid #1F1F1F;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100%);
  border-radius: 6px;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ms-credential:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border-color: #2A2A2A;
}
.ms-credential__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink-inv);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.ms-credential__sub {
  font-size: 10px;
  font-family: var(--font-mono);
  color: #8A8A85;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.2;
}

/* ---------- 13 · FOOTER ---------- */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-ink-inv);
  padding: var(--space-32) 0 var(--space-12);
}
.footer-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid #2A2A2A;
}
@media (min-width: 800px) {
  .footer-cta { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-12); }
}
.footer-cta__headline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-ink-inv);
  max-width: 640px;
}
.footer-cta__action {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-ink-inv);
  font-size: 16px;
}
.footer-cta__action .label {
  border-bottom: 1px solid var(--color-ink-inv);
  padding-bottom: 3px;
}
.footer-cta__action .arrow {
  width: 18px; height: 18px;
  color: var(--color-accent);
  transition: transform var(--dur-base) var(--ease-out);
}
.footer-cta__action:hover .arrow { transform: translateX(6px); }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
@media (min-width: 800px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12); }
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #6E6E6A;
  margin: 0 0 var(--space-4);
  font-weight: 500;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: 14px;
  color: #C7C7C2;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--color-ink-inv); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
  padding-top: var(--space-8);
  border-top: 1px solid #2A2A2A;
}
.footer-bottom .meta { color: #6E6E6A; }

/* ---------- 14 · PAGE HERO (interior pages) ---------- */
.page-hero {
  padding-top: var(--space-32);
  padding-bottom: var(--space-24);
  border-bottom: var(--border);
}
.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(56px, 10vw, 152px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.92;
  margin: var(--space-8) 0 var(--space-12);
}
.page-hero__title em { font-style: italic; color: var(--color-accent); font-weight: 400; }
.page-hero__lead {
  max-width: 720px;
  font-size: var(--fs-body-xl);
  line-height: 1.4;
  color: var(--color-ink-2);
}

/* ---------- 15 · UTILITY ---------- */
.reveal { opacity: 0; transform: translateY(28px); filter: blur(2px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal.stagger-1 { transition-delay: 50ms; }
.reveal.stagger-2 { transition-delay: 150ms; }
.reveal.stagger-3 { transition-delay: 250ms; }
.reveal.stagger-4 { transition-delay: 350ms; }
.reveal.stagger-5 { transition-delay: 450ms; }
.reveal.stagger-6 { transition-delay: 550ms; }

.muted { color: var(--color-ink-2); }
.accent { color: var(--color-accent); }
.italic { font-style: italic; }
.no-shrink { flex-shrink: 0; }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

/* ---------- 16 · PRINT (lightweight) ---------- */
@media print {
  .site-nav, .site-footer, .hero-strip { display: none; }
  body { background: white; color: black; }
}

/* =============================================================
   17 · CINEMATIC HERO — dark immersive home-page entry
   Animated gradient mesh + noise grain + grid topology +
   glowing italic accents. Pure CSS/SVG, no WebGL.
   ============================================================= */

.cinematic {
  position: relative;
  min-height: 100svh;
  background: #0A0A0A;
  color: #FAFAF7;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* Layer A — drifting gradient mesh (Ludia palette only: green family variations) */
.cinematic::before {
  content: '';
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(circle at 18% 28%, rgba(115, 158, 66, 0.42), transparent 45%),
    radial-gradient(circle at 78% 18%, rgba(165, 201, 125, 0.20), transparent 45%),
    radial-gradient(circle at 22% 78%, rgba(61, 90, 32, 0.36), transparent 50%),
    radial-gradient(circle at 82% 82%, rgba(143, 195, 79, 0.22), transparent 50%);
  filter: blur(60px);
  animation: meshDrift 26s var(--ease-in-out) infinite alternate;
  z-index: -3;
  will-change: transform;
}
@keyframes meshDrift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate(-4%, 3%) scale(1.06) rotate(2deg); }
  66%  { transform: translate(3%, -4%) scale(0.97) rotate(-2deg); }
  100% { transform: translate(-2%, -3%) scale(1.03) rotate(1deg); }
}

/* Layer B — second slower drift in opposite direction */
.cinematic > .mesh-b {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(circle at 50% 50%, rgba(115, 158, 66, 0.14), transparent 60%),
    radial-gradient(circle at 10% 90%, rgba(165, 201, 125, 0.12), transparent 50%);
  filter: blur(80px);
  animation: meshDrift2 38s var(--ease-in-out) infinite alternate;
  z-index: -3;
  will-change: transform;
  pointer-events: none;
}
@keyframes meshDrift2 {
  0%   { transform: translate(0, 0) scale(1.1); }
  100% { transform: translate(5%, -4%) scale(1); }
}

/* Layer C — grid topology, faded at the edges with radial mask */
.cinematic > .grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 80px 80px;
  z-index: -2;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, black, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, black, transparent 75%);
}

/* Layer D — SVG noise grain (inline data URL — turbulence filter) */
.cinematic > .noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Layer E — vignette at top + bottom for depth */
.cinematic > .vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10, 10, 10, 0.55) 0%, transparent 18%, transparent 75%, rgba(10, 10, 10, 0.85) 100%);
}

/* Layer F — slow conic sweep light (atmospheric rotation, single hue) */
.cinematic > .sweep {
  position: absolute;
  inset: -15%;
  z-index: -2;
  pointer-events: none;
  background: conic-gradient(
    from 215deg at 50% 110%,
    transparent 0deg,
    rgba(115, 158, 66, 0.10) 25deg,
    rgba(165, 201, 125, 0.14) 50deg,
    rgba(115, 158, 66, 0.08) 75deg,
    transparent 100deg,
    transparent 360deg
  );
  filter: blur(40px);
  animation: sweepRotate 36s linear infinite;
  opacity: 0.85;
  transform-origin: 50% 110%;
  will-change: transform;
}
@keyframes sweepRotate {
  to { transform: rotate(360deg); }
}

/* Layer G — mouse-driven spotlight (interactive depth) */
.cinematic > .spotlight {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    680px circle at var(--mx, 50%) var(--my, 50%),
    rgba(115, 158, 66, 0.16),
    rgba(115, 158, 66, 0.06) 35%,
    transparent 65%
  );
  transition: background 0.4s var(--ease-out);
  opacity: 0;
  animation: spotFadeIn 2s var(--ease-out) 1.2s forwards;
}
@keyframes spotFadeIn {
  to { opacity: 1; }
}

/* Inner content — centered, max width, prose-cinematic */
.cinematic__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-32) var(--page-pad-x) var(--space-16);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  /* Scroll-driven transform applied by JS via these custom properties */
  --scroll-y: 0px;
  --scroll-opacity: 1;
  transform: translateY(var(--scroll-y));
  opacity: var(--scroll-opacity);
  will-change: transform, opacity;
}

.cinematic__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.65);
  margin-bottom: var(--space-12);
  opacity: 0;
  animation: cineFadeUp 1.6s var(--ease-out) 0.3s both;
}
.cinematic__eyebrow .rule {
  display: inline-block;
  width: 56px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

/* Headline — three lines, dramatic scale, italic accent glows, word-by-word reveal */
.cinematic__headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 9vw, 144px);
  letter-spacing: -0.045em;
  line-height: 0.95;
  margin: 0 0 var(--space-12);
  color: #FAFAF7;
  max-width: 14ch;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.cinematic__headline .line {
  display: block;
}
.cinematic__headline .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(72px);
  filter: blur(14px);
  animation: wordRise 1.8s var(--ease-out) both;
  will-change: transform, opacity, filter;
}
/* Per-word stagger — line 1 */
.cinematic__headline .line:nth-child(1) .word:nth-child(1) { animation-delay: 0.7s; }
.cinematic__headline .line:nth-child(1) .word:nth-child(2) { animation-delay: 0.85s; }
.cinematic__headline .line:nth-child(1) .word:nth-child(3) { animation-delay: 1.0s; }
.cinematic__headline .line:nth-child(1) .word:nth-child(4) { animation-delay: 1.15s; }
/* Per-word stagger — line 2 (the italic accent comes last for emphasis) */
.cinematic__headline .line:nth-child(2) .word:nth-child(1) { animation-delay: 1.35s; }
.cinematic__headline .line:nth-child(2) .word:nth-child(2) { animation-delay: 1.55s; }
.cinematic__headline .line:nth-child(2) .word:nth-child(3) { animation-delay: 1.8s; }

.cinematic__headline .word.italic {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #B8E282 0%, #739E42 60%, #4A7028 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  filter: drop-shadow(0 0 32px rgba(115, 158, 66, 0.45)) blur(14px);
  padding-right: 0.02em;
}
.cinematic__headline .word.italic.is-revealed {
  /* Once animation completes, lock the brand glow without the entrance blur */
  filter: drop-shadow(0 0 32px rgba(115, 158, 66, 0.45));
}

/* Lead — centered, max width, soft cream */
.cinematic__lead {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
  color: rgba(250, 250, 247, 0.72);
  max-width: 640px;
  margin: 0 0 var(--space-16);
  opacity: 0;
  animation: cineFadeUp 1.6s var(--ease-out) 2.4s both;
}
.cinematic__lead strong, .cinematic__lead .verb {
  color: #FAFAF7;
  font-weight: 400;
}
.cinematic__lead .verb-accent {
  color: var(--color-accent);
  font-weight: 500;
}

/* CTA — dark-mode variant with subtle glow on hover */
.cinematic__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  font-size: 15px;
  letter-spacing: 0.01em;
  background: rgba(250, 250, 247, 0.05);
  border: 1px solid rgba(250, 250, 247, 0.25);
  color: #FAFAF7;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 100px;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  opacity: 0;
  animation: cineFadeUp 1.6s var(--ease-out) 2.8s both;
}
.cinematic__cta:hover {
  background: rgba(115, 158, 66, 0.18);
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(115, 158, 66, 0.25);
}
.cinematic__cta .arrow {
  width: 16px; height: 16px;
  color: var(--color-accent);
  transition: transform var(--dur-base) var(--ease-out);
}
.cinematic__cta:hover .arrow { transform: translateX(6px); }

/* Bottom strip — dark variant */
.cinematic__strip {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--page-pad-y) var(--page-pad-x) calc(var(--page-pad-y) * 1.25);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  color: rgba(250, 250, 247, 0.55);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0;
  animation: cineFadeUp 1.6s var(--ease-out) 3.2s both;
}
.cinematic__strip .scroll {
  display: none;
  align-items: center;
  gap: var(--space-2);
}
@media (min-width: 640px) {
  .cinematic__strip .scroll { display: inline-flex; }
}
.cinematic__strip .scroll-arrow {
  width: 11px; height: 11px;
  color: var(--color-accent);
  animation: bob 2.4s var(--ease-in-out) infinite;
}

/* Smooth transition from dark hero to light editorial below */
.cinematic-fadeout {
  position: relative;
  height: 80px;
  margin-top: -80px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
  z-index: 1;
}

/* Nav over cinematic hero — transparent until scroll */
.site-nav.over-cinematic:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
}
.site-nav.over-cinematic:not(.is-scrolled) .brand__divider {
  background: rgba(250, 250, 247, 0.25);
}
.site-nav.over-cinematic:not(.is-scrolled) .nav-links a {
  color: rgba(250, 250, 247, 0.72);
}
.site-nav.over-cinematic:not(.is-scrolled) .nav-links a:hover {
  color: #FAFAF7;
}
.site-nav.over-cinematic:not(.is-scrolled) .nav-cta {
  color: #FAFAF7 !important;
  border-bottom-color: rgba(250, 250, 247, 0.6);
}
.site-nav.over-cinematic:not(.is-scrolled) .nav-toggle {
  color: rgba(250, 250, 247, 0.85);
}

/* Animations */
@keyframes wordRise {
  0%   { opacity: 0; transform: translateY(72px); filter: blur(14px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes cineFadeUp {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Reduced motion — kill the mesh drift, sweep, word rise, keep static colors */
@media (prefers-reduced-motion: reduce) {
  .cinematic::before,
  .cinematic > .mesh-b,
  .cinematic > .sweep { animation: none; }
  .cinematic > .spotlight { display: none; }
  .cinematic__eyebrow,
  .cinematic__headline .word,
  .cinematic__lead,
  .cinematic__cta,
  .cinematic__strip { animation: none; opacity: 1; transform: none; filter: none; }
  .cinematic__headline .word.italic {
    filter: drop-shadow(0 0 32px rgba(115, 158, 66, 0.45));
  }
}