/* =============================================================
   BOREAS — site stylesheet
   Source of truth: BOREAS_DESIGN_SYSTEM.md v1.2
   Used by: /, /work/*, /for/*, /builds/*
   No frameworks. Mobile-first. Vanilla CSS.
   ============================================================= */

/* ---- 0. GOOGLE FONTS CDN (fallback when self-hosted woff2s absent) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---- 1. TOKENS ---- */

:root {
  /* Neutrals */
  --color-black:        #0A0A0A;
  --color-near-black:   #111111;
  --color-dark:         #1A1A1A;
  --color-mid-dark:     #2C2C2C;
  --color-mid:          #4A4A4A;
  --color-mid-light:    #717171;
  --color-light:        #A8A8A8;
  --color-near-white:   #E8E6E1;
  --color-white:        #F5F3EF;
  --color-pure-white:   #FFFFFF;

  /* Warm Stone */
  --color-stone-dark:   #2C2416;
  --color-stone-mid:    #5C4A2A;
  --color-stone:        #8B6914;
  --color-stone-light:  #C4A35A;
  --color-stone-pale:   #E8D5A3;

  /* Kraft */
  --color-kraft-dark:   #8B7355;
  --color-kraft:        #C4A882;
  --color-kraft-light:  #E8D5B5;
  --color-kraft-pale:   #F5EDD8;

  /* Semantic */
  --color-text-primary:    var(--color-near-black);
  --color-text-secondary:  var(--color-mid);
  --color-text-muted:      var(--color-mid-light);
  --color-text-inverse:    var(--color-white);
  --color-bg-primary:      var(--color-pure-white);
  --color-bg-dark:         var(--color-near-black);
  --color-bg-kraft:        var(--color-kraft-pale);
  --color-border:          var(--color-near-white);
  --color-accent:          var(--color-stone);
  --color-accent-hover:    var(--color-stone-mid);

  /* Typography */
  --font-primary:   'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Spacing */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  192px;
  --space-12:  256px;

  /* Grid */
  --grid-gutter:      var(--space-5);
  --container-max:    1200px;
  --container-wide:   1440px;
  --container-narrow: 720px;
  --container-text:   640px;

  /* Breakpoints — for reference only; media queries use literal values */
  --bp-sm:   480px;
  --bp-md:   768px;
  --bp-lg:   1024px;
  --bp-xl:   1280px;
  --bp-2xl:  1536px;

  /* Motion */
  --ease-out:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-magnificent: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 180ms var(--ease-out);
  --transition-med:  320ms var(--ease-out);
  --transition-slow: 500ms var(--ease-out);

  /* Reveal system */
  --blur-clear:       4px;
  --reveal-distance:  20px;

  /* Liquid glass */
  --glass-tint:       rgba(255, 255, 255, 0.02);
  --glass-tint-soft:  rgba(255, 255, 255, 0.04);
  --glass-stroke:     rgba(255, 255, 255, 0.1);

  /* Fluid display type — magnificent at every viewport */
  --text-hero-fluid:    clamp(2rem, 5vw, 4rem);
  --text-display-fluid: clamp(1.5rem, 3.5vw, 2.75rem);
  --text-lede-fluid:    clamp(1.125rem, 1.6vw, 1.375rem);
  --text-body-fluid:    clamp(1rem, 1.25vw, 1.125rem);
}

/* ---- 2. SELF-HOSTED FONTS ---- */
/* Drop matching .woff2 files at /assets/fonts/. Fallbacks kick in if missing. */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-display-variable.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-display: swap;
  font-style: normal;
}

/* ---- 3. RESET + BASE ---- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover { color: var(--color-accent-hover); }
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

p { margin: 0 0 var(--space-4); }

p:last-child { margin-bottom: 0; }

::selection {
  background-color: var(--color-stone-pale);
  color: var(--color-near-black);
}

/* ---- 4. LAYOUT PRIMITIVES ---- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.container--text { max-width: var(--container-text); }
.container--narrow { max-width: var(--container-narrow); }
/* Session 59 §6b — bridge gets a narrower, centered container so the glass plate
   doesn't leave an awkward left void inside the cave. */
.container--bridge {
  max-width: 980px;
  padding-left: clamp(1rem, 4vw, 4rem);
  padding-right: clamp(1rem, 4vw, 4rem);
  /* Session 60 §2 — perspective parent for 3D parallax inside the bridge glass plate */
  perspective: 1400px;
}

.section {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

@media (min-width: 1024px) {
  .section {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
}

.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.section--kraft { background-color: var(--color-bg-kraft); }

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--color-text-inverse); }

/* ---- 5. TYPOGRAPHY UTILITIES ---- */

.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-2);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Session 60 §3 — eyebrow sits tight above the headline. Block layout +
   negative margin pulls the headline cap up against the eyebrow baseline. */
.section-header .eyebrow {
  display: block;
  margin-bottom: 0;
  line-height: 1;
}
.section-header .eyebrow + .section-header__headline {
  margin-top: -0.15em;
}

.section--dark .eyebrow { color: var(--color-stone-light); }

.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: var(--container-text);
}

.section--dark .lede { color: var(--color-near-white); }

.pullquote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-5);
  margin: var(--space-7) 0;
}

/* ---- 6. BUTTON ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-4) var(--space-7);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-med);
}

/* Session 60 §5 — Option 4 liquid-fill pill (Zepmeusel-style).
   Cream fill at rest, Stone-Gold circle wipes up from the bottom on hover.
   Letter-reveal still rides on top via the .btn-cta__char layer. */
.btn--primary {
  position: relative;
  isolation: isolate;
  background-color: var(--color-stone-pale);
  color: var(--color-near-black);
  border-radius: 999px;
  padding: var(--space-4) var(--space-7);
  overflow: hidden;
}

.btn--primary::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -120%;
  width: 240%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: var(--color-stone-light);
  transform: translate(-50%, 0) scale(0.2);
  transform-origin: 50% 50%;
  transition: transform 480ms var(--ease-magnificent);
  z-index: -1;
  pointer-events: none;
}

.btn--primary:hover::before,
.btn--primary:focus-visible::before {
  transform: translate(-50%, -55%) scale(1);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  color: var(--color-pure-white);
}

/* Option 1 — Outlined Stone-Gold pill modifier. Restraint variant for nav + closing CTA.
   Session 60.3 — pill radius matches .btn--nav-cta so all outlined CTAs share one shape.
   Session 60.4 — larger padding so the magnetic zone activates at greater cursor distance. */
.btn--outline {
  background-color: transparent;
  color: var(--color-stone-light);
  border: 1.5px solid var(--color-stone-light);
  border-radius: 999px;
  padding: var(--space-5) var(--space-9);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.btn--outline::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-stone-light);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-magnificent);
  z-index: -1;
  pointer-events: none;
}

.btn--outline:hover::before,
.btn--outline:focus-visible::before {
  transform: translate(0, 0) scaleX(1);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  color: var(--color-near-black);
  border-color: var(--color-stone-light);
}

/* Magnetic-pull buttons — JS sets transform; CSS handles smooth return. */
.btn--primary,
.btn--ghost-light,
.btn--nav-cta,
.btn--outline {
  transition:
    transform 250ms var(--ease-magnificent),
    background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-med);
  will-change: transform;
}

.btn--primary:focus-visible {
  outline: 2px solid var(--color-stone-light);
  outline-offset: 3px;
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-text-inverse);
  border: 1px solid var(--color-near-white);
}

.btn--ghost:hover {
  background-color: var(--color-near-white);
  color: var(--color-near-black);
}

/* ---- 7. HERO — UNIVERSAL ---- */

.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding: var(--space-9) 0;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .hero { min-height: 80vh; padding: var(--space-10) 0; }
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-narrow);
}

.hero__eyebrow {
  display: block;
  margin-bottom: var(--space-5);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-stone-light);
}

.hero__headline {
  font-family: var(--font-display);
  font-size: var(--text-hero-fluid);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-5);
}

.hero__subheadline {
  font-family: var(--font-primary);
  font-size: var(--text-lede-fluid);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
  color: var(--color-near-white);
  margin: 0 0 var(--space-7);
  max-width: 540px;
}

/* ---- 7b. HERO — BACKGROUND IMAGE PATTERN (universal) ---- */
/*
  For non-three-state heroes that need a full-bleed background image.
  Used on the home page (A1: envelope + wax seal on workbench).
*/

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.55) 0%,
    rgba(10, 10, 10, 0.82) 100%
  );
  z-index: 1;
}

.hero .hero__content {
  position: relative;
  z-index: 2;
}

/* ---- 8. HERO — THREE-STATE (per-candidate landing) ---- */
/*
  States, applied as classes on .hero--three-state by hero.js:
    (none)         idle      desaturated still, button restful
    .is-saturated  hover     color floods in, button gains glow
    .is-revealed   click     video plays, replaces stills
*/

.hero--three-state {
  --hero-saturation: 0.15;
}

.hero--three-state .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero--three-state .hero__still,
.hero--three-state .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity var(--transition-slow), filter var(--transition-slow);
}

.hero--three-state .hero__still--idle {
  opacity: 1;
  filter: saturate(var(--hero-saturation)) brightness(0.7);
}

.hero--three-state .hero__still--saturated {
  opacity: 0;
  filter: brightness(0.8);
}

.hero--three-state .hero__video {
  opacity: 0;
  pointer-events: none;
}

/* Hover (desktop) / .is-saturated (mobile first tap) */
@media (hover: hover) {
  .hero--three-state:hover .hero__still--idle { opacity: 0; }
  .hero--three-state:hover .hero__still--saturated { opacity: 1; }
}

.hero--three-state.is-saturated .hero__still--idle { opacity: 0; }
.hero--three-state.is-saturated .hero__still--saturated { opacity: 1; }

/* Revealed (after click) */
.hero--three-state.is-revealed .hero__still--idle,
.hero--three-state.is-revealed .hero__still--saturated { opacity: 0; }

.hero--three-state.is-revealed .hero__video { opacity: 1; }

/* Dark overlay over media for legibility */
.hero--three-state .hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.55) 0%,
    rgba(10, 10, 10, 0.75) 100%
  );
  z-index: 1;
  pointer-events: none;
  transition: background var(--transition-med);
}

.hero--three-state:hover .hero__media::after,
.hero--three-state.is-saturated .hero__media::after {
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.45) 0%,
    rgba(10, 10, 10, 0.65) 100%
  );
}

/* Glow halo behind CTA on hover/saturated */
.hero--three-state .hero__cta {
  position: relative;
  z-index: 3;
  box-shadow: 0 0 0 0 rgba(196, 163, 90, 0);
  transition:
    box-shadow var(--transition-med),
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

@media (hover: hover) {
  .hero--three-state:hover .hero__cta {
    box-shadow:
      0 0 0 6px rgba(196, 163, 90, 0.18),
      0 0 32px 8px rgba(139, 105, 20, 0.45);
    transform: translateY(-2px);
  }
}

.hero--three-state.is-saturated .hero__cta {
  box-shadow:
    0 0 0 6px rgba(196, 163, 90, 0.18),
    0 0 32px 8px rgba(139, 105, 20, 0.45);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero--three-state .hero__still,
  .hero--three-state .hero__video,
  .hero--three-state .hero__cta,
  .hero--three-state .hero__media::after {
    transition: none;
  }
  .hero--three-state .hero__still--idle { filter: brightness(0.85); }
}

/* ---- 8b. CAVE SCROLL — home page only ----
   A single sticky cinematic stage holds a scrubbable VEO video.
   The six home sections layer above it with a dark legibility gradient.
   Mobile and reduced-motion fall back to a single still poster.
*/

.cave-scroll { position: relative; }

.cave-scroll__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  z-index: 0;
  background-color: var(--color-near-black);
  overflow: hidden;
}

.cave-scroll__video,
.cave-scroll__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cave-scroll__poster { display: none; }

.cave-scroll > section {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* Per-section dwell heights — gives the slow steadicam time on the close beats. */
.cave-scroll > .hero          { min-height: 180vh; }
.cave-scroll > section:not(.section--dark):not(.hero):not(.offer) { min-height: 160vh; } /* Bridge */
.cave-scroll > .offer         { min-height: 160vh; }
.cave-scroll > .section--dark { min-height: 120vh; }

/* Cave ends clean — no fade inside the cave wrapper.
   The page-end fade lives on .cta-block::after instead (see CTA block). */

/* Inside the cave, section backgrounds become transparent so the
   sticky video stage shows through. Tokens are not touched. */
.cave-scroll .hero,
.cave-scroll .offer,
.cave-scroll .section--dark { background-color: transparent; }

.cave-scroll .offer__price { color: var(--color-stone-light); }
.cave-scroll .offer__label,
.cave-scroll .offer__list li,
.cave-scroll .offer__note { color: var(--color-near-white); }
.cave-scroll .offer__list li { border-bottom-color: rgba(232, 213, 163, 0.25); }
.cave-scroll .prose p { color: var(--color-near-white); }
.cave-scroll .section-header__headline { color: var(--color-text-inverse); }

@media (prefers-reduced-motion: reduce), (max-width: 767px) {
  .cave-scroll__video { display: none; }
  .cave-scroll__poster { display: block; }
  .cave-scroll > section { min-height: auto; }
  .cave-scroll__stage {
    position: relative;
    height: 60vh;
    margin-bottom: 0;
  }
}

/* ---- 8c. MAGNIFICENT REVEAL SYSTEM ----
   IntersectionObserver in cave-scroll.js tags [data-reveal] elements with
   .is-revealed on enter and .is-exiting on scroll-past. The per-variant
   class picks the keyframe. Stagger via --reveal-delay inline style.
*/

@keyframes fade-up-blur {
  0%   { opacity: 0; transform: translateY(var(--reveal-distance)); filter: blur(var(--blur-clear)); }
  100% { opacity: 1; transform: translateY(0);                       filter: blur(0); }
}

@keyframes fade-out-up-blur {
  0%   { opacity: 1; transform: translateY(0);                       filter: blur(0); }
  100% { opacity: 0; transform: translateY(calc(var(--reveal-distance) * -1)); filter: blur(var(--blur-clear)); }
}

[data-reveal] {
  opacity: 0;
  will-change: opacity, transform, filter;
  animation-delay: var(--reveal-delay, 0s);
  animation-fill-mode: forwards;
}

.is-revealed[data-reveal-variant="fade-up"] { animation: fade-up-blur     0.5s var(--ease-magnificent) forwards; animation-delay: var(--reveal-delay, 0s); }

.is-exiting[data-reveal-variant="fade-up"]  { animation: fade-out-up-blur 0.4s var(--ease-magnificent) forwards; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* ---- 8d. LIQUID GLASS PLATE ----
   Local glass surface behind text blocks inside the cave.
   Replaces the per-section dark scrim.
*/

.glass-plate {
  position: relative;
  background: var(--glass-tint);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-radius: 24px;
  /* Session 60 §4 — increased padding for breathing room */
  padding: clamp(2rem, 4.5vw, 3.5rem);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    0 30px 60px -20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  isolation: isolate;
  /* Session 60 §2 — 3D parallax substrate (urban-jungle technique) */
  transform-style: preserve-3d;
  will-change: transform;
}

.glass-plate::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.12) 18%,
    rgba(255, 255, 255, 0)    42%,
    rgba(255, 255, 255, 0)    58%,
    rgba(255, 255, 255, 0.12) 82%,
    rgba(255, 255, 255, 0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Backdrop-filter fallback for browsers that don't support it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-plate { background: rgba(15, 15, 15, 0.7); }
}

/* ---- Process card — liquid glass variant of .glass-plate ----
   Used in the three-step Process grid. Quiet neutral surface; the
   cave video is the visual interest. No chromatic accent — that
   space belongs to the Offer card one section above.
*/
.process-card {
  background: rgba(255, 255, 255, 0.05);
  /* Session 60 §4 — taller card + breathing padding inherited from .glass-plate */
  min-height: 300px;
  padding: clamp(2.25rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--color-near-white);
  width: 100%;
  max-width: 360px;
}

.process-card__step {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-stone-light);
  margin-bottom: var(--space-3);
}

.process-card__heading {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-3);
}

.process-card__body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-near-white);
  margin: 0;
}

/* ---- 8e. GLOW CARD ----
   Used by Process steps and the Offer price. Gradient hairline border via
   padding-box/border-box trick, plus a blurred gradient blob behind.
*/

.glow-card {
  position: relative;
  width: 100%;
  max-width: 340px;
}

.glow-card__glow {
  position: absolute;
  inset: 0;
  border-radius: 40px;
  opacity: 0.85;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.glow-card__inner {
  /* Variable Inputs */
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-size: 320px;
  --spotlight-color: rgba(232, 213, 163, 0.18);

  position: relative;
  z-index: 1;
  border: 8px solid transparent;
  border-radius: 40px;
  padding: clamp(1.25rem, 2vw, 2rem);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--color-near-white);
  overflow: hidden;
  /* background set inline per-card with the gradient palette */
}

/* Session 60.2 — pointer-tracked spotlight overlay.
   JS writes --mouse-x / --mouse-y on the element via [data-card-spotlight];
   CSS positions the radial gradient at that point. Hover-gated for opacity. */
.glow-card__inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    var(--spotlight-size) circle at var(--mouse-x) var(--mouse-y),
    var(--spotlight-color),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 320ms var(--ease-magnificent);
  pointer-events: none;
  z-index: 2;
}

.glow-card:hover .glow-card__inner::after,
.glow-card:focus-within .glow-card__inner::after {
  opacity: 1;
}

/* Glow + border intensify on hover (subtle counterpart to the spotlight). */
.glow-card__glow {
  transition:
    opacity 420ms var(--ease-magnificent),
    filter 420ms var(--ease-magnificent);
}

.glow-card:hover .glow-card__glow,
.glow-card:focus-within .glow-card__glow {
  opacity: 1;
  filter: blur(40px);
}

.glow-card__heading {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-3);
}

.glow-card__body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-near-white);
  margin: 0;
}

.glow-card__step {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-stone-light);
  margin-bottom: var(--space-4);
  display: block;
}

/* ---- 8f. NAVBAR (fixed, transparent, over cave) ---- */
/* JetBrains Mono for Editorial Logbook numerals + technical metadata */
/* JetBrains Mono imported in section 0 above — consolidated */

.site-nav {
  /* Variable Inputs (from code-library/glassmorphism-navbar-zepmeusel) */
  --glass-blur: 8px;
  --glass-bg: rgba(10, 10, 10, 0.3);
  --glass-radius: 9999px;

  position: fixed;
  top: clamp(0.75rem, 1.25vw, 1.25rem);
  left: clamp(1rem, 2vw, 2rem);
  right: clamp(1rem, 2vw, 2rem);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: clamp(0.75rem, 1.25vw, 1.25rem) clamp(1.25rem, 3vw, 3rem);
  border: 1px solid var(--color-text-inverse);
  border-radius: var(--glass-radius);
  font-family: var(--font-primary);
  pointer-events: none; /* clicks pass through to hero except for actual links */
  isolation: isolate; /* contain the ::before stacking context */
}

/* Glass refraction layer — backdrop blur + SVG fractal distortion */
.site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--glass-radius);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  filter: url(#glass-distortion);
  pointer-events: none;
  z-index: -1;
}

.site-nav > * { pointer-events: auto; position: relative; z-index: 1; }

/* Session 60 — SVG wordmark replaces text. Height scales fluidly with the nav. */
.site-nav__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}

.site-nav__brand img {
  display: block;
  height: clamp(28px, 3vw, 40px);
  width: auto;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.55));
}

.site-nav__links {
  display: none;
  gap: clamp(1.5rem, 3vw, 3rem);
}

@media (min-width: 768px) {
  .site-nav__links { display: flex; }
}

.site-nav__links a {
  position: relative;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(245, 243, 239, 0.7);
  text-decoration: none;
  transition: color 200ms var(--ease-magnificent);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.site-nav__links a:hover { color: var(--color-stone-light); }

/* Mid-dot separator between sibling nav links (Session 59 §5) */
.site-nav__links a + a::before {
  content: "·";
  display: inline-block;
  margin-right: clamp(1rem, 2vw, 1.5rem);
  margin-left: calc(clamp(1.5rem, 3vw, 3rem) * -1);
  color: var(--color-stone);
  opacity: 0.45;
  font-weight: 400;
  pointer-events: none;
}

/* Session 60 §5 — nav CTA matches Option 1 outlined pill. Compact dimensions. */
.btn--nav-cta {
  display: none;
  position: relative;
  isolation: isolate;
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0.7rem 1.5rem;
  background: transparent;
  color: var(--color-stone-light);
  border: 1.5px solid var(--color-stone-light);
  border-radius: 999px;
  text-decoration: none;
  overflow: hidden;
  transition: color 320ms var(--ease-magnificent);
}

.btn--nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-stone-light);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-magnificent);
  z-index: -1;
  pointer-events: none;
}

.btn--nav-cta:hover,
.btn--nav-cta:focus-visible { color: var(--color-near-black); }

.btn--nav-cta:hover::before,
.btn--nav-cta:focus-visible::before { transform: scaleX(1); }

.btn--nav-cta:active { transform: scale(0.97); }

@media (min-width: 768px) { .btn--nav-cta { display: inline-flex; align-items: center; } }

/* ---- 8g. HERO — bottom-anchor variant (Sentinel pattern over cave) ---- */

.hero--anchor-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(7rem, 12vw, 10rem) clamp(1.5rem, 4vw, 4rem) clamp(3rem, 6vw, 5rem);
}

.hero--anchor-bottom .hero__content {
  max-width: min(100%, 720px);
  font-family: var(--font-primary);
}

.hero--anchor-bottom .hero__headline {
  font-family: var(--font-display);
  font-size: var(--text-hero-fluid);
  font-weight: var(--weight-black);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  color: var(--color-text-inverse);
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
}

/* Session 59: italic emphasis replaces the prior gradient treatment. */
.hero__headline-accent {
  font-style: italic;
  color: var(--color-stone-light);
}

.hero--anchor-bottom .hero__subheadline {
  font-family: var(--font-primary);
  font-size: var(--text-lede-fluid);
  font-weight: 300;
  color: rgba(245, 243, 239, 0.88);
  margin: 0 0 var(--space-4);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.hero__description {
  font-family: var(--font-primary);
  font-size: var(--text-body-fluid);
  font-weight: 300;
  line-height: var(--leading-relaxed);
  color: rgba(245, 243, 239, 0.65);
  margin: 0 0 var(--space-6);
  max-width: 56ch;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.btn--ghost-light {
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-near-black);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.95rem 1.7rem;
  border-radius: 2px;
  text-decoration: none;
  transition: background 200ms var(--ease-magnificent), transform 100ms var(--ease-magnificent);
}

.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.78); color: var(--color-near-black); }
.btn--ghost-light:active { transform: scale(0.97); }

.hero__trust {
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(245, 243, 239, 0.78);
  margin: 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

/* ---- 8h. SECTION HEADER — cave variant (no glass plate, vertical bar accent) ---- */

/* Session 60 §3 — section-header--cave loses its inner border/padding.
   The .section--logbook hairline + §-numeral outside already carry that signature,
   so the inner indent was redundant whitespace. */
.section-header--cave {
  position: relative;
  padding-left: 0;
  border-left: 0;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-header--cave .eyebrow,
.section-header--cave .section-header__headline {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 24px rgba(0, 0, 0, 0.5);
}

.section-header--cave .section-header__headline {
  color: var(--color-text-inverse);
}

/* ---- 9. BODY SECTIONS ---- */

.section-header {
  max-width: var(--container-text);
  margin-bottom: var(--space-7);
}

.section-header__headline {
  font-family: var(--font-primary);
  font-size: var(--text-display-fluid);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  text-wrap: pretty;
  margin: 0 0 var(--space-4);
}

.section-header__headline--display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
}

/* Urban-jungle italic emphasis on emotional payload words (Session 59 §6a) */
.section-header__headline--display em {
  font-style: italic;
  color: var(--color-stone-light);
  font-weight: 600;
}

.prose {
  max-width: var(--container-text);
}

.prose p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.section--dark .prose p { color: var(--color-near-white); }

/* ---- 10. OFFER BLOCK ---- */

.offer {
  background-color: var(--color-bg-kraft);
  padding: var(--space-9) 0;
  position: relative;
  clip-path: inset(0 -100vw -100vw -100vw);
}

.offer__price {
  font-family: var(--font-display);
  font-size: var(--text-hero-fluid);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  color: var(--color-stone-light);
  margin: 0 0 var(--space-3);
}

.offer__label {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-stone-mid);
  margin-bottom: var(--space-5);
}

.offer__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
}

.offer__list li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) 1.5em;
  font-size: var(--text-base);
  color: var(--color-near-white);
  border-bottom: 1px solid rgba(232, 213, 163, 0.25);
}

.offer__list li:last-child { border-bottom: none; }

/* Session 60.2 — list-item arrow slide-reveal.
   Stagger via --i (0..4) inline on each <li>. Same mechanic as
   .btn-cta__char (opacity + translateX + per-item delay) at line scale. */
.offer__list li::before {
  content: '›';
  position: absolute;
  left: 0.25em;
  top: 50%;
  opacity: 0;
  color: var(--color-stone-light);
  font-weight: 600;
  font-size: 1.3em;
  line-height: 1;
  transform: translate(-8px, -50%);
  transition:
    opacity 320ms var(--ease-magnificent),
    transform 320ms var(--ease-magnificent);
  transition-delay: calc(var(--i, 0) * 60ms);
}

.glow-card:hover .offer__list li::before,
.glow-card:focus-within .offer__list li::before {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Touch / reduced-motion: no arrows, no reserved space. */
@media not (hover: hover), (prefers-reduced-motion: reduce) {
  .offer__list li { padding-left: 0; }
  .offer__list li::before { display: none; }
}

.offer__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ---- 11. CLOSING CTA ---- */

.cta-block {
  position: relative;
  text-align: left;
  color: var(--color-text-inverse);
  padding: var(--space-10) 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 30% 50%,
      rgba(40, 32, 22, 0.55) 0%,
      rgba(10, 10, 10, 0.95) 70%,
      rgba(10, 10, 10, 1) 100%),
    var(--color-near-black);
}

/* Final seal — last 25vh fades to fully opaque, blending into the footer. */
.cta-block::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25vh;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0)   0%,
    rgba(10, 10, 10, 0.6) 60%,
    rgba(10, 10, 10, 1)   100%
  );
  pointer-events: none;
  z-index: 2;
}

.cta-block > .container { position: relative; z-index: 3; }

.cta-block__headline {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

/* ---- Global headline word-break defenses (Session 59 §1) ---- */
.hero__headline,
.section-header__headline,
.cta-block__headline,
.pillar-card__heading,
.offer__price {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

@media (min-width: 1024px) {
  .cta-block__headline { font-size: var(--text-5xl); }
}

.cta-block__body {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-near-white);
  max-width: var(--container-text);
  margin: 0 0 var(--space-7);
}

.cta-block__trust {
  display: block;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-light);
  letter-spacing: 0.04em;
}

/* ---- 12. FOOTER — Zepmeusel-style colophon ----
   Top: small brand mark + tagline + contact, three nav columns to the right.
   Mid: hairline + legal bar.
   Bottom: giant Playfair Italic wordmark spanning the full width.
*/

.site-footer {
  position: relative;
  background-color: var(--color-near-black);
  color: var(--color-near-white);
  padding: clamp(4rem, 7vw, 7rem) clamp(1.5rem, 4vw, 4rem) 0;
  font-size: var(--text-sm);
  border-top: 1px solid rgba(196, 163, 90, 0.25);
  overflow: hidden; /* clips the giant wordmark cleanly at the lower edge */
}

.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-8);
  }
}

/* Small brand mark — replaces the old big "Boreas" in the upper-left.
   The big wordmark lives at the bottom now (.site-footer__wordmark). */
.site-footer__mark {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-stone-light);
  margin: 0 0 var(--space-4);
}

.site-footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: var(--leading-snug);
  color: var(--color-near-white);
  margin: 0 0 var(--space-6);
  max-width: 22ch;
  text-wrap: pretty;
}

.site-footer__contact {
  font-style: normal;
  color: var(--color-light);
  line-height: var(--leading-relaxed);
}

.site-footer__contact a { color: var(--color-near-white); transition: color 200ms var(--ease-magnificent); }
.site-footer__contact a:hover { color: var(--color-stone-light); }

.site-footer__col-head {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-4);
}

.site-footer__nav-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__nav-col li { margin-bottom: var(--space-2); }

.site-footer__nav-col a {
  color: var(--color-near-white);
  text-decoration: none;
  transition: color 200ms var(--ease-magnificent);
}

.site-footer__nav-col a:hover { color: var(--color-stone-light); }

.site-footer__bar {
  margin-top: var(--space-7);
  padding: var(--space-6) 0 var(--space-7);
  border-top: 1px solid rgba(196, 163, 90, 0.22);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 768px) {
  .site-footer__bar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.site-footer__legal,
.site-footer__credo { margin: 0; }

/* Giant closing wordmark — Zepmeusel-style colophon mark.
   Spans the full footer width, clipped where it meets the lower edge so
   the descender of the 's' kisses the bottom of the viewport. */
.site-footer__wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  /* Fluid from ~5rem on mobile up to ~22vw on wide desktops */
  font-size: clamp(5rem, 22vw, 18rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--color-stone-light);
  opacity: 0.95;
  margin: 0;
  padding-top: clamp(1rem, 2vw, 2rem);
  text-align: center;
  user-select: none;
  /* Clip the lower portion so it reads like a peek-through colophon */
  transform: translateY(12%);
  pointer-events: none;
}

@media (max-width: 767px) {
  .site-footer__wordmark { text-align: left; transform: translateY(8%); }
}

/* ---- 13. SCREEN READER ONLY ---- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- 14. SKIP LINK ---- */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-accent);
  color: var(--color-pure-white);
  font-weight: var(--weight-semibold);
  z-index: 100;
  transition: top var(--transition-fast);
}

.skip-link:focus { top: var(--space-4); }

/* ---- 15. MARQUEE TICKER (from bc-marquee-ticker-zepmeusel) ---- */

.ticker-section {
  /* Variable Inputs */
  --ticker-duration: 48s;
  --ticker-gap: 3rem;
  --ticker-size: clamp(2rem, 4vw, 3.5rem);
  --ticker-glow: rgba(44, 36, 22, 0.55);

  /* Session 60.4 — transition zone between dark bridge (above) and kraft offer (below).
     Vertical gradient dissolves both edges. Horizontal mask on .ticker fades
     text at left/right; section bg runs full-width with no bleed. */
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.5rem) 0;
  background: linear-gradient(
    to bottom,
    var(--color-bg-dark) 0%,
    var(--color-bg-kraft) 55%
  );
  position: relative;
  z-index: 5;
  margin-top: -1px;
  background-repeat: no-repeat !important;
  background-color: var(--color-bg-kraft);
  box-shadow: none !important;
}

/* Override cave's generic section min-height — ticker is a thin strip.
   Needs !important to beat the 3-class :not() rule above. */
.cave-scroll .ticker-section { min-height: auto !important; }

.ticker {
  display: flex;
  width: 100%;
  overflow: hidden;
  /* Mask lives here so only the text track fades at edges;
     section gradient bg stays full-width with no bleed. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.ticker__track {
  display: flex;
  white-space: nowrap;
  animation: ticker-scroll var(--ticker-duration) linear infinite;
  will-change: transform;
  font-family: var(--font-display);
  font-size: var(--ticker-size);
  font-weight: var(--weight-black);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Session 60.3 — debossed letterpress. Text fill = kraft bg, so the
     glyphs dissolve into the section. The dark glow defines the letters
     and gives them physical depth, like ink pressed into kraft paper. */
  color: var(--color-bg-kraft);
  text-shadow:
    0 0 1px var(--ticker-glow),
    0 1px 2px rgba(44, 36, 22, 0.45),
    0 3px 10px rgba(44, 36, 22, 0.28);
}

.ticker__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--ticker-gap);
  padding-right: var(--ticker-gap);
}

.ticker__dot {
  /* Inherits color and glow from .ticker__track — uniform treatment. */
}

@keyframes ticker-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

.ticker:hover .ticker__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* ---- 16. BRAND PILLARS — STACKING STICKY CARDS (from stacking-sticky-cards-habanify) ---- */

.pillars-section {
  position: relative;
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding-top: clamp(5rem, 9vw, 9rem);
}

/* Session 59 §7 — soft gradient bleed from the cave above into the pillars surface */
.pillars-section::before {
  content: '';
  position: absolute;
  top: -64px;
  left: 0;
  right: 0;
  height: 64px;
  background: linear-gradient(to bottom, transparent 0%, var(--color-bg-dark) 100%);
  pointer-events: none;
  z-index: 2;
}

.pillars-section .section-header__headline { color: var(--color-text-inverse); }
.pillars-section .eyebrow { color: var(--color-stone-light); }

.pillars-stack {
  /* Variable Inputs */
  --pillar-stick-top: 120px;
  --pillar-offset-step: 18px;

  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-7);
}

@media (min-width: 768px) {
  .pillars-stack {
    flex-direction: row;
    gap: var(--space-5);
    align-items: flex-start;
  }

  .pillar-card {
    position: sticky;
    top: calc(var(--pillar-stick-top) + (var(--pillar-index) * var(--pillar-offset-step)));
    flex: 1;
  }
}

.pillar-card {
  color: var(--color-near-white);
  /* Session 60 §4 — taller cards, more interior air */
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(196, 163, 90, 0.18);
  border-radius: 16px;
  padding: clamp(2.25rem, 4vw, 3rem);
}

.pillar-card__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-stone-light);
}

.pillar-card__heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-inverse);
  margin: 0;
}

.pillar-card__body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: rgba(232, 230, 225, 0.72);
  margin: 0;
}

/* ---- 17. HOVER LETTER REVEAL BUTTON (from hover-letter-reveal-button-habanify) ---- */

.btn--primary {
  /* Variable Inputs */
  --btn-reveal-duration: 420ms;
  --btn-icon-rotate: 45deg;

  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-cta__icon {
  display: inline-block;
  flex-shrink: 0;
  transition: transform var(--btn-reveal-duration) var(--ease-magnificent);
  line-height: 1;
}

.btn--primary:hover .btn-cta__icon,
.btn--primary:focus-visible .btn-cta__icon {
  transform: rotate(var(--btn-icon-rotate));
}

.btn-cta__text {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
}

.btn-cta__space {
  display: inline-block;
  width: 0.28em;
}

/* Touch devices: always show text. Hover devices: hide chars, reveal on hover. */
@media (hover: hover) {
  .btn-cta__char {
    display: inline-block;
    opacity: 0;
    transform: translateX(-10px);
    transition:
      opacity var(--btn-reveal-duration) var(--ease-magnificent),
      transform var(--btn-reveal-duration) var(--ease-magnificent);
  }

  .btn--primary:hover .btn-cta__char,
  .btn--primary:focus-visible .btn-cta__char {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---- 19. PER-CHARACTER BLUR REVEAL (from next-blur-reveal-zepmeusel) ---- */

/* Word wrapper: inline-flex keeps chars in a row (flex-wrap:nowrap = sum-of-widths, not max-child-width).
   Prevents mid-word breaks without the min-content-collapse bug of inline-block. */
[data-char-reveal] .word {
  display: inline-flex;
}

[data-char-reveal] .char {
  /* Variable Inputs */
  --char-duration: 0.5s;
  --char-blur: 7px;
  --char-y: 14px;

  display: inline-block;
  opacity: 0;
  transform: translateY(var(--char-y));
  filter: blur(var(--char-blur));
  transition:
    opacity var(--char-duration) var(--ease-magnificent),
    transform var(--char-duration) var(--ease-magnificent),
    filter var(--char-duration) var(--ease-magnificent);
}

[data-char-reveal].is-char-revealed .char {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-char-reveal] .char {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ---- 20. EDITORIAL LOGBOOK — spatial signature ---- */
.section--logbook {
  position: relative;
  isolation: isolate;
}

/* Hairline stone-gold vertical rule */
.section--logbook::before {
  content: '';
  position: absolute;
  left: clamp(0.75rem, 2vw, 2rem);
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--color-stone);
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
}

/* Cursor spotlight — stone texture revealed under cursor on dark sections */
.texture-reveal {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image: url('../Texture/istockphoto-1341466956-612x612.jpg');
  background-size: 560px 560px;
  background-repeat: repeat;
  background-attachment: fixed;
  mix-blend-mode: screen;
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle 300px at var(--tx, 50%) var(--ty, 50%),
    rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 45%, transparent 78%);
  mask-image: radial-gradient(circle 300px at var(--tx, 50%) var(--ty, 50%),
    rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 45%, transparent 78%);
  transition: opacity 550ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}
.section--dark:hover .texture-reveal {
  opacity: 0 !important;
}
body.is-in-dark-zone .section--dark .texture-reveal {
  opacity: 0.72 !important;
}
@media (prefers-reduced-motion: reduce) {
  .texture-reveal { display: none; }
}

.section-numeral {
  position: absolute;
  left: clamp(0.75rem, 2vw, 2rem);
  top: var(--space-8);
  transform: translateX(calc(-50% - 0.5px));
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-stone);
  opacity: 0.6;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  user-select: none;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 959px) {
  .section--logbook::before,
  .section-numeral { display: none; }
}