/* =====================================================================
   KOPLOW DEFENSE — Stylesheet
   ===================================================================== */

/* ---------- CSS Variables: the design language in one place ---------- */
:root {
  /* Color palette */
  --color-black: #050505;
  --color-near-black: #0a0a0a;
  --color-paper: #ededed;      /* Neutral light gray, sampled from PSD */
  --color-paper-deep: #e3e3e3; /* Slightly deeper for contrast */
  --color-bone: #d4d4d4;       /* Subtle texture lines */
  --color-white: #ebebeb;      /* Hero headline white, sampled from PSD */
  --color-gold: #8b6e3b;       /* Brand gold */
  --color-gold-soft: #a68859;
  --color-text-muted: rgba(235, 235, 235, 0.55);

  /* Type scale */
  --font-display: "gotham", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "gotham", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Letter spacing — display type is wide and confident */
  --tracking-display: 0.05em;
  --tracking-wide: 0.18em;
  --tracking-wider: 0.25em;

  /* Spacing system */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-7: 3.5rem;
  --space-8: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-24: 12rem;

  /* Easings — subtle, no bouncing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-white);
  background: var(--color-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.25rem 2.5rem;
  transition: background-color 600ms var(--ease-out), backdrop-filter 600ms var(--ease-out);
}

.nav.is-scrolled {
  background: var(--color-black);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1600px;
  margin: 0 auto;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-white);
  letter-spacing: var(--tracking-wider);
  font-size: 0.85rem;
  font-weight: 600;
}
.nav__brand .brand-mark {
  width: 26px;
  height: auto;
  display: inline-block;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  font-size: 0.78rem;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  text-transform: uppercase;
}
.nav__links a {
  color: var(--color-white);
  opacity: 0.85;
  transition: opacity 200ms ease;
}
.nav__links a:hover { opacity: 1; }
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid rgba(245, 243, 238, 0.55);
  padding: 0.7rem 1.2rem;
  border-radius: 3px;
  transition: background-color 250ms ease, border-color 250ms ease;
  font-weight: 500;
}
.nav__cta:hover {
  background: rgba(245, 243, 238, 0.08);
  border-color: rgba(245, 243, 238, 0.8);
}
.nav__cta-arrow {
  width: 12px;
  height: 12px;
}

/* ---------- Hero ---------- */
.hero {
  /* Total scroll length controls how long the hero "holds".
     Longer = more deliberate. Shorter = quicker. */
  height: 220vh;
  position: relative;
  background: var(--color-black);
}

.hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-black);
}

.hero__headline {
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: min(92vw, 1100px);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 4.2rem);
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  color: var(--color-white);
  z-index: 3;
  will-change: transform, opacity;
  /* Typography precision (v73): Gotham is unforgiving — ensure
     crisp rendering across devices/browsers. Antialiased smoothing
     reads sharper than subpixel for white-on-dark; geometricPrecision
     keeps Gotham's geometric letterforms stable; backface-visibility
     stabilizes GPU compositing artifacts from scroll transforms. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hero__headline .line {
  display: block;
}
.hero__headline em {
  color: var(--color-gold);
}

.hero__image-wrap {
  position: absolute;
  /* Position the cactus in the lower-middle portion of the viewport.
     The cactus image is wide-and-short (1920x468 cropped), so we want it
     centered horizontally with limited width so it doesn't dominate. */
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(75vw, 1300px);
  z-index: 2;
  will-change: transform;
}

.hero__image {
  width: 100%;
  height: auto;
  display: block;
}

.hero__prompt {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-white);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-wider);
  font-weight: 500;
  opacity: 0.7;
  z-index: 3;
  will-change: opacity, transform;
}
.hero__chevron {
  width: 18px;
  height: 10px;
  animation: chevron-pulse 2.2s ease-in-out infinite;
}
@keyframes chevron-pulse {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ---------- REVEAL STACK ----------
   The unified slide-over system. Every section below the hero is a
   .reveal-card inside this stack. Each card is sticky to the viewport.
   As the user scrolls, the next card slides up to cover the previous one.
   z-index increases for each card so they stack in document order.

   Light cards have a subtle top shadow as the "lift" seam.
   Dark cards (.reveal-card--dark) get a gradient fade at their top
   to soften the transition from a light section to dark.
*/
.reveal-stack {
  position: relative;
  z-index: 2;
}

.reveal-card {
  position: sticky;
  top: 0;
  min-height: 100vh;
}

/* SHORT modifier — section uses ~half the viewport rather than full.
   For cards with light content that don't earn 100vh on their own
   (e.g. continuation cards, lighter bridge moments). The slide-over
   reveal still works; the card just yields to the next one sooner. */
.reveal-card--short {
  min-height: 55vh;
}

/* HARD modifier — section keeps its slide-over reveal but has NO soft
   top-fade gradient. Used for the pillars→bridge moment where we want
   the world-change to land as a sharp visual cut, not a gentle blend. */
.reveal-card--hard::before {
  display: none !important;
}

/* =====================================================================
   REVEAL CONTENT  —  per-element fade-up inside reveal-card sections.
   Any element with data-reveal="N" inside a .reveal-card stays hidden
   until the card receives .is-visible. Then the elements fade up in
   sequence, staggered by 140ms per step.
   ===================================================================== */
.reveal-card [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-card.is-visible [data-reveal] {
  opacity: 1;
  transform: translateY(0);
}
.reveal-card.is-visible [data-reveal="1"] { transition-delay: 0ms; }
.reveal-card.is-visible [data-reveal="2"] { transition-delay: 140ms; }
.reveal-card.is-visible [data-reveal="3"] { transition-delay: 280ms; }
.reveal-card.is-visible [data-reveal="4"] { transition-delay: 420ms; }
.reveal-card.is-visible [data-reveal="5"] { transition-delay: 560ms; }
.reveal-card.is-visible [data-reveal="6"] { transition-delay: 700ms; }

/* SLOW modifier — each element takes longer to fade up. Used for
   moments that earn extra weight: the bio sections, the closing CTAs.
   The reader's eye is *drawn* into the line, not glanced past it. */
.reveal-card--slow [data-reveal] {
  transition-duration: 1100ms !important;
}
.reveal-card--slow.is-visible [data-reveal="1"] { transition-delay: 0ms; }
.reveal-card--slow.is-visible [data-reveal="2"] { transition-delay: 350ms; }
.reveal-card--slow.is-visible [data-reveal="3"] { transition-delay: 700ms; }
.reveal-card--slow.is-visible [data-reveal="4"] { transition-delay: 1050ms; }
.reveal-card--slow.is-visible [data-reveal="5"] { transition-delay: 1400ms; }
.reveal-card--slow.is-visible [data-reveal="6"] { transition-delay: 1750ms; }

/* Stacking order: each card needs higher z-index than the previous.
   These ascend by 1 from the start of the stack.
   DEFEND z=1, PILLARS z=2, BRIDGE z=3, PROOF z=4, WHEN z=5, FOOTER z=6 */
.defend    { z-index: 1; }
.pillars   { z-index: 2; }
.bridge    { z-index: 3; }
.proof     { z-index: 4; }
.when      { z-index: 5; }
.cta-footer{ z-index: 6; }

/* Light card seam: subtle shadow at the top edge so it visually
   lifts off the card beneath it. */
.reveal-card:not(.reveal-card--dark) {
  box-shadow: 0 -20px 50px -16px rgba(0, 0, 0, 0.15);
}

/* Dark card seam: deeper shadow plus a top-fade gradient to soften
   the transition from a light section to a dark one. */
.reveal-card--dark {
  box-shadow: 0 -30px 60px -12px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.reveal-card--dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 5;
}

/* ---------- DEFEND section ----------
   Inherits sticky behavior from .reveal-card.
   Content sized LARGE so the section fills its viewport confidently.
*/
.defend {
  background: var(--color-paper);
  color: var(--color-near-black);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  /* Very subtle paper texture */
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0px,
      transparent 14px,
      rgba(0, 0, 0, 0.008) 14px,
      rgba(0, 0, 0, 0.008) 15px);
}

.defend__inner {
  max-width: 1100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.defend__mark {
  width: 72px;
  height: auto;
  display: block;
  margin: 0 auto var(--space-8);
}

.defend__title {
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-8);
  line-height: 1;
}

.defend__lead {
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  letter-spacing: 0.04em;
  font-weight: 400;
  margin-bottom: var(--space-6);
  line-height: 1.4;
}
.defend__lead strong { font-weight: 600; color: var(--color-near-black); }
.defend__lead .gold { color: var(--color-gold); }

.defend__sub {
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: rgba(10, 10, 10, 0.55);
  letter-spacing: 0.04em;
}

/* Reveal animation — each element fades up in quick succession */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 380ms cubic-bezier(0.2, 0, 0.2, 1),
              transform 380ms cubic-bezier(0.2, 0, 0.2, 1);
}
.defend.is-visible [data-reveal] {
  opacity: 1;
  transform: translateY(0);
}
.defend.is-visible [data-reveal="1"] { transition-delay: 0ms; }
.defend.is-visible [data-reveal="2"] { transition-delay: 100ms; }
.defend.is-visible [data-reveal="3"] { transition-delay: 200ms; }
.defend.is-visible [data-reveal="4"] { transition-delay: 300ms; }

.defend.is-visible [data-reveal="4"] {
  opacity: 0.7;
}

/* ---------- PILLARS section ----------
   Inherits sticky behavior from .reveal-card.
   Three columns side by side with intro lockup above.
*/
.pillars {
  background: var(--color-paper);
  color: var(--color-near-black);
  display: flex;
  align-items: center;
  padding: var(--space-12) var(--space-6);
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0px,
      transparent 14px,
      rgba(0, 0, 0, 0.008) 14px,
      rgba(0, 0, 0, 0.008) 15px);
}

.pillars__inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

.pillars__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.pillars__mark {
  width: 52px;
  height: auto;
  display: block;
}
.pillars__eyebrow {
  color: var(--color-near-black);
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  letter-spacing: var(--tracking-wider);
  font-weight: 700;
}

.pillars__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  width: 100%;
}

.pillar {
  padding: 0 var(--space-8);
  border-left: 1px solid rgba(10, 10, 10, 0.12);
  /* Snap-in animation: fast, decisive arrival. */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms cubic-bezier(0.2, 0, 0.2, 1),
              transform 220ms cubic-bezier(0.2, 0, 0.2, 1);
}
.pillar:first-child { border-left: none; }
.pillar.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Tight stagger — bang, bang, bang left to right */
.pillar[data-pillar="2"].is-visible { transition-delay: 80ms; }
.pillar[data-pillar="3"].is-visible { transition-delay: 160ms; }

.pillar__label {
  color: var(--color-gold);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.9vw, 1.65rem);
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-4);
}
.pillar__claim {
  font-size: clamp(1.4rem, 1.8vw, 1.55rem);
  font-weight: 600;
  color: var(--color-near-black);
  margin-bottom: var(--space-4);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.pillar__body {
  color: rgba(10, 10, 10, 0.7);
  line-height: 1.6;
  font-size: clamp(1.05rem, 1.25vw, 1.15rem);
}

/* ---------- BRIDGE section ----------
   Inherits sticky + dark slide-over from .reveal-card .reveal-card--dark.
   Full-viewport road image with two lines of text positioned over it.
*/
.reveal-stack--bridge {
  position: relative;
  z-index: 3;
}

.bridge {
  background: var(--color-black);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bridge__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Subtle vignette to deepen the darkness at the edges */
.bridge__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.5) 95%);
  z-index: 2;
}

/* Hidden — replaced by universal .reveal-card--dark::before gradient */
.bridge__top-fade { display: none; }

.bridge__lines {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1500px;
  padding: 0 var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 60vh;
}

.bridge__line {
  color: var(--color-white);
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.4;
  /* Reveal: each line fades in as the user lands on the bridge.
     700ms feels intentional but doesn't drag like the previous 1100ms,
     which felt sluggish when the lines were already settled on-screen. */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.bridge__line--left {
  justify-self: start;
  align-self: center;
  transform: translateY(20px) translateY(-10%);
}
.bridge__line--right {
  justify-self: end;
  align-self: center;
  text-align: right;
  transform: translateY(20px) translateY(20%);
}

/* Both lines get a substantial transition-delay so neither one starts
   fading until well after the section has settled into its sticky
   position. Without this, the left line's fade completes during the
   approach scroll (before the user is looking at the section) and is
   already at full opacity by the time the reader's eye lands on it.
   The 300ms baseline on the left line gives the section a beat to
   settle; the 600ms on the right creates a clear setup→payoff stagger. */
.bridge.is-visible .bridge__line--left {
  opacity: 1;
  transform: translateY(0) translateY(-10%);
  transition-delay: 300ms;
}
.bridge.is-visible .bridge__line--right {
  opacity: 1;
  transform: translateY(0) translateY(20%);
  transition-delay: 600ms;
}

/* ---------- PROOF section ----------
   Inherits sticky behavior from .reveal-card.
   Three case results on paper background.
*/
.proof {
  background: var(--color-paper);
  color: var(--color-near-black);
  padding: var(--space-12) var(--space-6) var(--space-16);
  display: flex;
  align-items: flex-start;
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0px,
      transparent 14px,
      rgba(0, 0, 0, 0.008) 14px,
      rgba(0, 0, 0, 0.008) 15px);
}

.proof__inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.proof__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.proof__mark {
  width: 52px;
  height: auto;
}
.proof__title {
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: var(--tracking-wide);
}

.proof__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-6);
  max-width: 1100px;
  margin: 0 auto;
}

.result {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.result.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.result[data-result="2"].is-visible { transition-delay: 120ms; }
.result[data-result="3"].is-visible { transition-delay: 240ms; }

.result__charge {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-near-black);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(10, 10, 10, 0.35);
  width: 70%;
  letter-spacing: -0.01em;
}
.result__year {
  display: block;
  font-weight: 400;
}
.result__stakes {
  font-size: 1.1rem;
  color: var(--color-near-black);
  line-height: 1.4;
}
.result__insight {
  font-style: italic;
  font-size: 1rem;
  color: rgba(10, 10, 10, 0.7);
  line-height: 1.4;
  max-width: 220px;
}
.result__outcome {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: var(--tracking-wider);
  color: var(--color-near-black);
  margin-top: var(--space-2);
}

/* ---------- WHEN IT MATTERS section ----------
   Inherits sticky behavior from .reveal-card.
   Five lines on paper with a horizontal rule under the title.
*/
.when {
  background: var(--color-paper);
  color: var(--color-near-black);
  padding: var(--space-12) var(--space-6) var(--space-16);
  display: flex;
  align-items: flex-start;
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0px,
      transparent 14px,
      rgba(0, 0, 0, 0.008) 14px,
      rgba(0, 0, 0, 0.008) 15px);
}

.when__inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.when__title {
  font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  letter-spacing: var(--tracking-wide);
  text-align: center;
  margin-bottom: var(--space-3);
}

.when__rule {
  width: 70%;
  max-width: 720px;
  height: 1px;
  background: rgba(10, 10, 10, 0.5);
  margin: 0 auto var(--space-8);
}

.when__list {
  list-style: none;
  padding: 0;
  max-width: 880px;
  margin: 0 auto;
}

.when__item {
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  letter-spacing: 0.03em;
  color: var(--color-near-black);
  font-weight: 500;
  padding: var(--space-3) 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.when__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- CTA + FOOTER ----------
   Inherits sticky + dark slide-over + top fade from .reveal-card.reveal-card--dark.
*/
.cta-footer {
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--space-16) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cta-footer__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-16);
}
.cta-footer__mark {
  width: 56px;
  height: auto;
}
.cta-footer__thesis {
  color: var(--color-gold);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  letter-spacing: var(--tracking-wider);
  text-align: center;
}
/* Editorial variant — used on the Insights footer. Quieter than the
   shouting gold thesis used on the criminal-defense pages, since the
   reader is exiting an editorial section, not a service pitch.
   Sentence-case, white, normal weight, no extra letter-spacing. */
.cta-footer__thesis--editorial {
  color: var(--color-white);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  opacity: 1;
}

/* Sub-thesis line — sits between the main thesis ("START YOUR DEFENSE")
   and the Book Consult button on the Insights footer. Gold, sentence
   case, normal weight, smaller. Provides the principle behind the
   call to action: the directive above, the reason here, the button
   below. Read in sequence the composition tells a complete story. */
.cta-footer__sub {
  color: var(--color-gold);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  letter-spacing: 0.01em;
  text-align: center;
  font-style: italic;
  /* Negative top margin pulls this line closer to the thesis it
     qualifies, while the gap to the button below comes from the
     flex container's gap setting. */
  margin-top: calc(-1 * var(--space-3));
}
.cta-footer__button {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: transparent;
  color: var(--color-white);
  padding: 1rem 2.4rem;
  border: 1px solid rgba(245, 243, 238, 0.55);
  border-radius: 3px;
  font-size: 0.95rem;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  transition: background-color 250ms ease, border-color 250ms ease;
}
.cta-footer__button:hover {
  background: rgba(245, 243, 238, 0.08);
  border-color: rgba(245, 243, 238, 0.8);
}
.cta-footer__button svg {
  width: 14px;
  height: 14px;
}

.cta-footer__brand {
  text-align: center;
  margin-bottom: var(--space-8);
}
.cta-footer__wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-3);
}
.cta-footer__wordmark img {
  width: 48px;
  height: auto;
}
.cta-footer__address {
  font-size: 0.95rem;
  color: rgba(235, 235, 235, 0.65);
  letter-spacing: 0.04em;
}

.cta-footer__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.78rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(235, 235, 235, 0.6);
}
.cta-footer__nav a {
  transition: color 200ms ease;
}
.cta-footer__nav a:hover {
  color: var(--color-white);
}
.cta-footer__sep {
  opacity: 0.5;
}

/* Temporary spacer section */
.after-method {
  background: var(--color-black);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-16) var(--space-4);
  font-size: 0.9rem;
  font-style: italic;
}

/* =====================================================================
   RESPONSIVE BREAKPOINTS
   ===================================================================== */

/* Tablet */
@media (max-width: 1024px) {
  .nav { padding: 1rem 1.5rem; }
  .nav__links { gap: 1.6rem; }
  .nav__links a:not(.nav__cta) { display: none; }
  .nav__links a.nav__cta { display: inline-flex; }
  .hero { height: 200vh; }
  .hero__headline { top: 18%; }

  .defend { min-height: 90vh; }

  .pillars__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) 0;
  }
  .pillar:nth-child(odd) { border-left: none; }
  .pillar:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 480px;
    margin: 0 auto;
    border-left: none;
  }

  /* Bridge: tighten padding */
  .bridge__lines { padding: 0 var(--space-4); }

  /* Proof: 2 columns; third spans full width centered */
  .proof__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .result:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 380px;
    margin: 0 auto;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .nav { padding: 0.55rem 1.2rem; }
  .nav__brand { font-size: 0.75rem; gap: 0.6rem; }
  .nav__brand .brand-text:last-child { display: none; }
  .nav__brand .brand-mark { width: 18px; }
  .nav__cta { padding: 0.55rem 0.9rem; font-size: 0.7rem; }

  /* ================================================================
     HOME HERO — Mobile (v108) baked-portrait composition.
     Image is a finalized art-directed portrait composition with
     headline (REAL DEFENSE ISN'T GENTLE / IT'S SHARP), LOOK CLOSER
     prompt, and chevron all baked in. Live HTML kept for SEO/a11y
     but visually hidden. Matches the same baked-portrait pattern
     used on About, How, and CD mobile heroes.

     Desktop architecture (sticky-scroll + parallax + live HTML
     overlay) is preserved untouched in the base block above —
     this mobile override replaces it for ≤640px only.
     ================================================================ */
  .hero {
    height: auto;
    overflow: hidden;
    /* Push image below the fixed nav so the top of the composition
       isn't clipped. Background stays black so the padded zone
       reads as continuous with the nav. */
    padding-top: 16px;
    background: var(--color-black);
  }
  .hero__sticky {
    /* Dismantle flex-column construct — baked image is the entire
       composition; nothing to lay out around it. */
    display: block;
    position: static;
    height: auto;
    padding: 0;
    gap: 0;
  }
  /* Live H1: visually hidden but accessible to screen readers
     and SEO. The baked-in image typography is what users see. */
  .hero__headline {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    top: auto;
    left: auto;
    transform: none;
  }
  .hero__image-wrap {
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin: 0;
  }
  .hero__image {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    /* Disable any inherited parallax scale from desktop */
    transform: none;
  }
  /* Live prompt: baked into image; hide live SVG and text to avoid
     double prompt and lingering animation during scroll. */
  .hero__prompt {
    display: none;
  }

  .defend {
    min-height: 85vh;
    padding: var(--space-8) var(--space-3);
  }
  .defend__title { font-size: 1.8rem; }
  .defend__lead { font-size: 1.1rem; }

  .pillars {
    padding: var(--space-8) var(--space-3) var(--space-12);
  }
  .pillars__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .pillar {
    padding: var(--space-4) 0;
    border-left: none;
    border-top: 1px solid rgba(0,0,0,0.12);
    max-width: none;
    margin: 0;
  }
  .pillar:first-child { border-top: none; padding-top: 0; }
  .pillar:nth-child(3) {
    grid-column: auto;
    max-width: none;
    margin: 0;
  }

  /* Bridge: stack the two lines vertically on mobile */
  .bridge__lines {
    grid-template-columns: 1fr;
    padding: 0 var(--space-4);
    gap: var(--space-12);
    text-align: center;
  }
  .bridge__line {
    font-size: 1.4rem;
    justify-self: center !important;
    text-align: center !important;
  }
  .bridge__line--left { transform: translateY(20px) !important; }
  .bridge__line--right { transform: translateY(20px) !important; text-align: center; }
  .bridge.is-visible .bridge__line--left,
  .bridge.is-visible .bridge__line--right {
    transform: translateY(0) !important;
  }

  /* Proof: stack to single column */
  .proof {
    padding: var(--space-12) var(--space-3);
  }
  .proof__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    max-width: 360px;
  }
  .result:nth-child(3) {
    grid-column: auto;
    max-width: none;
  }
  .result__charge { font-size: 1.25rem; }
  .result__charge { width: 80%; }

  /* When It Matters: tighter */
  .when {
    padding: var(--space-10) var(--space-3);
    min-height: auto;
  }
  .when__title { font-size: 1.6rem; }
  .when__item {
    font-size: 1.05rem;
    text-align: center;
  }
  .when__list {
    text-align: center;
  }

  /* CTA Footer: compressed cinematic composition (v87).
     Spur, thesis, and button are one tethered unit — not three
     separated elements with luxury spacing.

     v140: Mobile-specific CTA pacing refinement. The 64px footer
     padding-top (var(--space-8)) was creating dead black space
     between the MARIJUANA EVIDENCE SUPPRESSED verdict line at the
     bottom of the MJ DUI baked asset and the spur — reading as
     drift rather than intentional cadence. Reduced to 32px
     (var(--space-4)) so the spur functions as a bridge into the
     thesis instead of floating in a void. Spur width bumped
     44→52px for slightly stronger presence against the pure
     black field without becoming dominant.

     v141: Spur PNG is rendering as medium gray against pure black,
     visually disappearing. brightness(2.2) pushes the PNG's gray
     pixels toward pure white without adding glow or halo. No
     saturation/contrast filter applied so the spur retains its
     intended shape — only the gray-to-white shift. */
  .cta-footer {
    padding: var(--space-4) var(--space-3) var(--space-6);
  }
  .cta-footer__cta {
    gap: var(--space-4);
    margin-bottom: var(--space-10);
  }
  .cta-footer__mark {
    width: 52px;
    filter: brightness(2.2);
  }
  .cta-footer__wordmark {
    font-size: 1.4rem;
    gap: 0.8rem;
  }
  .cta-footer__wordmark img {
    width: 22px;
  }
  .cta-footer__nav {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.7rem;
    gap: 0.6rem;
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Footer phone number — added v57 */
.cta-footer__phone {
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: rgba(235, 235, 235, 0.85);
  margin-bottom: 0.25rem;
}
.cta-footer__phone a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease;
}
.cta-footer__phone a:hover {
  color: var(--color-gold, #8b6e3b);
}

/* ============================================================
   MOBILE FIX (v57): disable reveal-stack sticky behavior
   On mobile, the sticky + min-height: 100vh + slide-over system
   from desktop hides taller content (e.g. stacked grid columns
   in Proof, Pillars, How-Turns, Case Studies). Mobile gets
   normal document flow.
   ============================================================ */
@media (max-width: 640px) {
  /* Disable sticky/100vh on every reveal-card site-wide */
  .reveal-card,
  .reveal-card--short {
    position: relative !important;
    top: auto !important;
    min-height: auto !important;
  }
  /* Per-page inner wrappers that also force 100vh */
  .case-study__inner,
  .how-turns__inner,
  .proof__inner,
  .pillars__inner,
  .when__inner {
    min-height: auto !important;
  }
  /* Ensure reveal content is always visible on mobile (no scroll-driven fade) */
  .reveal-card [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .reveal-card .result,
  .reveal-card .pillar,
  .reveal-card .how-pillar,
  .reveal-card .when__item {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   Hero headline desktop/mobile variants (v62)
   Two headline structures live in the DOM; show one or the other
   based on viewport width. Desktop = 2 lines, mobile = 3 lines.
   ============================================================ */
.hero__headline-desktop { display: inline; }
.hero__headline-mobile { display: none; }

@media (max-width: 640px) {
  .hero__headline-desktop { display: none; }
  .hero__headline-mobile { display: inline; }
}

/* (Removed v63: previously had .hero__image-wrap { top: 52% } here,
   but the mobile hero is now flex-column above and uses static
   positioning, making top: 52% irrelevant.) */