/* =====================================================================
   HOME.CSS (v184) — Homepage below-hero rebuild.
   Architecture mirrors the About page: on mobile (<=640px) each section
   renders a baked JPG composition (typography baked in); on desktop/tablet
   (>=641px) the live HTML renders for SEO/accessibility, reusing the
   existing homepage design system (defend / pillars / bridge / cta-footer).
   Scoped to .page-home so nothing here affects other pages.
   ===================================================================== */

/* ---- Baked mobile images: hidden on desktop/tablet by default ---- */
.page-home .home-baked {
  display: none;
}

/* ---- Baked mobile CTA (footer) container: hidden on desktop/tablet ---- */
.page-home .home-cta-baked {
  display: none;
}

/* ---- Desktop CTA asset (footer) container: hidden on tablet/mobile ---- */
.page-home .cta-footer__asset {
  display: none;
}

/* ---- New live-desktop element styles (reuse existing tokens) ---- */

/* SECTION 2 — WHAT SHARP LOOKS LIKE (dark transition over .bridge) */
.page-home #sharp .home-sharp__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  padding: 0 var(--space-6);
}
.page-home .home-sharp__mark {
  width: 48px;
  height: auto;
  margin-bottom: var(--space-5);
  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);
}
.page-home .home-sharp__title {
  color: var(--color-white);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  line-height: 1.15;
  text-transform: uppercase;
  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);
  transition-delay: 120ms;
}
.page-home .home-sharp__title .gold { color: var(--color-gold); }
.page-home #sharp.is-visible .home-sharp__mark,
.page-home #sharp.is-visible .home-sharp__title {
  opacity: 1;
  transform: translateY(0);
}

/* SECTIONS 3–5 — single centered pillar (PRECISION / PRESSURE / PROOF) */
.page-home .pillars__inner .home-pillar {
  max-width: 40rem;
  margin: 0 auto;
  text-align: left;
}

/* SECTION 7 — WHAT ISN'T CHALLENGED BECOMES YOUR RESULT (paper) */
.page-home #challenged .home-challenged__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-near-black);
}
.page-home #challenged .home-challenged__line2 strong { font-weight: 700; }
.page-home #challenged .home-challenged__line2 .gold { color: var(--color-gold); }

/* SECTION 8 — CTA footer: 3-link nav layout + divider (mirrors About) */
.page-home .cta-footer__nav {
  justify-content: center;
  gap: 1.4rem;
  margin-bottom: var(--space-4);
}
.page-home .cta-footer__sep { display: none; }
.page-home .cta-footer__rule {
  width: 100%;
  max-width: 22rem;
  border: 0;
  border-top: 1px solid rgba(235,235,235,0.18);
  margin: 0 auto var(--space-5);
}
.page-home .cta-footer__thesis .line { display: block; }

/* Mobile-only button label swap — desktop/tablet show the default label;
   the mobile variant is revealed inside the @media block below. */
.page-home .btn-label-mobile { display: none; }
/* Desktop-only button label ("Start Your Defense"); hidden ≤1024 so tablet
   keeps its existing "To Start Your Defense". Revealed in the ≥1025 block. */
.page-home .btn-label-desktop { display: none; }

/* Footer nav separator pipe — hidden on desktop/tablet (full 3-link nav);
   shown on mobile where the nav collapses to the two practice areas. */
.page-home .cta-footer__nav-pipe { display: none; }

/* =====================================================================
   MOBILE (<=640px): show baked compositions, hide live HTML.
   The footer (section 8) stays LIVE on all breakpoints — its baked
   image is informational only and never shown; the interactive footer
   renders instead.
   ===================================================================== */
@media (max-width: 640px) {
  /* ---------------------------------------------------------------
     MOBILE 5-SECTION FLOW (v185). Desktop is frozen; this block only
     restructures mobile. Visible on mobile, in source/visual order:
       #hero  (baked cactus, already correct) — Hero
       #defend  (baked 2) — How We Defend
       #road    (baked 3) — Road
       #challenged (baked 4, tappable) — Featured Result
       #footer  (live) — CTA + footer
     Hidden on mobile only (desktop keeps rendering them):
       #sharp #precision #pressure #proof
     --------------------------------------------------------------- */

  /* Hide the four sections that aren't part of the mobile narrative. */
  .page-home #sharp,
  .page-home #precision,
  .page-home #pressure,
  .page-home #proof {
    display: none !important;
  }

  /* Show baked compositions full-width on the sections that remain. */
  .page-home .reveal-stack .home-baked {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }
  /* The Featured Result baked image is wrapped in a tappable link. */
  .page-home a.home-baked-link {
    display: block;
    width: 100%;
    line-height: 0;
  }
  .page-home a.home-baked-link img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Hide the live HTML on the remaining baked sections. */
  .page-home #defend .home-live,
  .page-home #road .home-live,
  .page-home #challenged .home-live {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  /* Baked sections: height follows the image. */
  .page-home #defend,
  .page-home #road,
  .page-home #challenged {
    display: block;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }
  /* Dark baked section (#road): suppress the top reveal veil + shadow. */
  .page-home #road.reveal-card--dark::before { display: none; }
  .page-home #road.reveal-card--dark { box-shadow: none; }

  /* ---- v201: mobile CTA/footer is now the LIVE composition. The v194 baked
     image (home-cta-mobile-v186.jpg) rendered undersized; hide it + its hotspots
     and let the live, spacious footer render on mobile (as on About). ---- */
  .page-home .home-cta-baked { display: none; }
  .page-home #footer.reveal-card--dark { box-shadow: none; }

  /* ---- v202: mobile CTA/footer REBUILT to the reference composition (not a
     scale of the old block). The CTA dominates — large headline that nearly
     fills the width + a substantial button + generous breathing room — and the
     footer reads as a quieter secondary block beneath it. Mobile only. ---- */
  /* v204: THE CLOSING PANEL. The footer becomes a full mobile viewport with its
     content centered, so the CTA reads as the final screen of the homepage — not
     a block sitting above the footer. This re-asserts the reveal-card 100vh that
     the site-wide mobile rule (style.css v57) disables with !important, scoped to
     the home footer only. The base .cta-footer is already a centered flex column,
     so the composition centers vertically within the viewport. */
  .page-home #footer.cta-footer {
    min-height: 100vh !important;
    min-height: 100svh !important;
  }
  .page-home .cta-footer {
    padding: var(--space-8) var(--space-4);
  }

  /* CTA group: spur -> headline -> button, with large air between each. */
  .page-home .cta-footer__cta {
    gap: var(--space-8);
    margin-bottom: var(--space-12);
  }
  .page-home .cta-footer__mark { width: 58px; filter: none; margin-bottom: var(--space-1); }

  /* Headline — the dominant element. Tighter tracking (--tracking-display)
     lets the type grow far larger while still holding to one line. */
  .page-home .cta-footer__thesis {
    font-size: 5.8vw;
    line-height: 1.05;
    letter-spacing: var(--tracking-display);
  }
  .page-home .cta-footer__thesis .line { white-space: nowrap; }

  /* Button — a major visual element, not a standard CTA chip. */
  .page-home .cta-footer__button {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1.2rem 2.6rem;
    letter-spacing: 0.06em;
    border-color: rgba(245, 243, 238, 0.7);
  }
  .page-home .cta-footer__button svg { width: 18px; height: 18px; }
  .page-home .btn-label-default { display: none; }
  .page-home .btn-label-mobile { display: inline; }

  .page-home #footer.reveal-card--dark::before { display: none; }

  /* Practice-area nav: the two practice areas on one line, divided by a real
     pipe character. Uses plain classes + a real separator span (no attribute
     selectors, no pseudo-element content) so it survives CSS minification. */
  .page-home .cta-footer__nav { margin-bottom: var(--space-6); flex-wrap: nowrap; gap: 1rem; font-size: 0.78rem; }
  .page-home .cta-footer__nav a { white-space: nowrap; }
  .page-home .cta-footer__nav-how { display: none; }
  .page-home .cta-footer__nav-pipe { display: inline; color: rgba(235, 235, 235, 0.4); font-weight: 300; }

  /* Footer block — secondary. Divider, then a quieter wordmark + contact.
     The wordmark is deliberately smaller than the headline so the CTA stays
     dominant and the footer reads as a secondary close. */
  .page-home .cta-footer__rule { margin-bottom: var(--space-7); max-width: 20rem; }
  .page-home .cta-footer__wordmark { font-size: 1.1rem; gap: 0.5rem; margin-bottom: var(--space-3); }
  .page-home .cta-footer__wordmark img { width: 30px; }
  .page-home .cta-footer__phone { margin-bottom: 0.45rem; }
  .page-home .cta-footer__brand { margin-bottom: 0; }
  .page-home .cta-footer__address-sep { display: none; }
  .page-home .cta-footer__address-l1,
  .page-home .cta-footer__address-l2 { display: block; }
}

/* =====================================================================
   RESULTS PAGE (v186) — "Results Under Scrutiny".
   Same architecture as the homepage: baked mobile compositions (<=640px),
   live HTML on desktop/tablet reusing the existing dark reveal-card system.
   Scoped to .page-results.
   ===================================================================== */
.page-results { background: var(--color-black); color: var(--color-white); }
.page-results .results-page { display: block; }

/* Baked mobile images hidden on desktop/tablet by default. */
.page-results .results-baked { display: none; }

/* Mobile-only Results sections (Transportation; repositioned NegH) and the
   baked mobile CTA are hidden on desktop/tablet — desktop is unchanged. */
.page-results .results-case.results-case--mobile-only { display: none; }
.page-results .home-cta-baked { display: none; }

/* ---- Desktop/tablet live HTML ---- */
/* Section 1 — intro */
.page-results .results-intro {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 80vh; padding: var(--space-12) var(--space-6);
}
.page-results .results-intro__title {
  font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 700;
  letter-spacing: var(--tracking-wider); line-height: 1.05; text-transform: uppercase;
  color: var(--color-white); margin-bottom: var(--space-6);
}
.page-results .results-intro__title .gold { color: var(--color-gold); }
.page-results .results-intro__lead {
  font-size: clamp(1.1rem, 2.2vw, 1.6rem); color: rgba(235,235,235,0.78);
  margin-bottom: var(--space-8); font-weight: 300; letter-spacing: var(--tracking-wide);
}
.page-results .results-intro__button {
  display: inline-flex; align-items: center; gap: 0.7rem; padding: 1rem 2.4rem;
  border: 1px solid var(--color-gold); border-radius: 3px;
  font-size: 1rem; font-weight: 600; letter-spacing: var(--tracking-wide);
  color: var(--color-white); transition: background-color 250ms ease;
}
.page-results .results-intro__button:hover { background: rgba(139,110,59,0.14); }
.page-results .results-intro__button .gold { color: var(--color-gold); }
.page-results .results-intro__button svg { width: 18px; height: 11px; }

/* Sections 2–6 — case studies (live desktop) */
.page-results .results-case {
  padding: var(--space-12) var(--space-6);
  display: flex; align-items: center; justify-content: center;
}
.page-results .results-case__inner { max-width: 46rem; width: 100%; margin: 0 auto; }
.page-results .results-case__charge {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; text-align: center;
  color: var(--color-white); margin-bottom: var(--space-2);
}
.page-results .results-case__qualifier {
  text-align: center; color: rgba(235,235,235,0.7); margin-bottom: var(--space-6);
  font-size: 1.05rem;
}
.page-results .results-case__charge + .results-case__fields { margin-top: var(--space-8); }
.page-results .results-case__fields {
  display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-8);
}
.page-results .results-case__field dt {
  color: var(--color-gold); font-weight: 700; font-size: 1.15rem;
  letter-spacing: var(--tracking-wide); margin-bottom: var(--space-1);
}
.page-results .results-case__field dd {
  margin: 0; color: rgba(235,235,235,0.85); font-size: 1.1rem; line-height: 1.5;
}
.page-results .results-case__result {
  text-align: center; color: var(--color-white); font-weight: 700;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem); letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* =====================================================================
   DESKTOP RESULTS (v227) — the approved compositions displayed directly,
   in normal document flow (no reveal-card / sticky / cover). The asset
   sections are desktop-only; the live (tablet) + baked (mobile) flow below
   is left intact and hidden ONLY on desktop. Subtle one-shot fade pacing.
   ===================================================================== */
.page-results .results-desktop-only { display: none; }          /* hidden on mobile + tablet */
.page-results .results-asset__img { display: block; width: 100%; height: auto; margin: 0; }
.page-results .results-cta-asset { position: relative; }
.page-results .results-cta-hotspot { position: absolute; display: block; z-index: 2; }

@media (min-width: 1025px) {
  /* Show the approved desktop asset flow ... */
  .page-results .results-desktop-only { display: block; }
  /* ... and take the live/footer reveal-card flow out on desktop only.
     Tablet (641-1024) keeps the live flow; mobile (<=640) keeps the baked
     flow — both unchanged. */
  .page-results .reveal-stack > .reveal-card { display: none; }
  /* Subtle, one-shot, true fade-in (opacity 0 -> 1, 16px rise, 600ms).
     Applied via home-pace (JS arms on desktop with motion allowed only). */
  .page-results .home-pace.is-armed {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
  }
  .page-results .home-pace.is-armed.is-in {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================================
   RESULTS PAGE — MOBILE (<=640px): show baked compositions, hide live HTML.
   Footer (section 7) stays live on all breakpoints.
   ===================================================================== */
@media (max-width: 640px) {
  .page-results .reveal-stack .results-baked {
    display: block; width: 100%; height: auto; object-fit: contain; object-position: center;
  }
  .page-results #scrutiny .home-live,
  .page-results #am .home-live,
  .page-results #thc .home-live,
  .page-results #negh .home-live,
  .page-results #scottsdale .home-live,
  .page-results #vm .home-live {
    position: absolute !important; width: 1px !important; height: 1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important; white-space: nowrap !important;
  }
  .page-results #scrutiny,
  .page-results #am,
  .page-results #thc,
  .page-results #negh,
  .page-results #scottsdale,
  .page-results #vm {
    display: block; min-height: 0; padding: 0; overflow: hidden;
  }
  /* Suppress the universal dark reveal veil/shadow over the baked top band. */
  .page-results #scrutiny.reveal-card--dark::before,
  .page-results #am.reveal-card--dark::before,
  .page-results #thc.reveal-card--dark::before,
  .page-results #negh.reveal-card--dark::before,
  .page-results #scottsdale.reveal-card--dark::before,
  .page-results #vm.reveal-card--dark::before { display: none; }
  .page-results #scrutiny.reveal-card--dark,
  .page-results #am.reveal-card--dark,
  .page-results #thc.reveal-card--dark,
  .page-results #negh.reveal-card--dark,
  .page-results #scottsdale.reveal-card--dark,
  .page-results #vm.reveal-card--dark { box-shadow: none; }

  /* Desktop Negligent Homicide is hidden on mobile; it is re-shown as
     #negh-m after Vehicular so the mobile sequence ends with it. */
  .page-results #negh { display: none; }

  /* Mobile-only sections (Transportation, repositioned NegH): show baked,
     no padding, suppress the dark reveal veil/shadow over the baked top. */
  .page-results .results-case.results-case--mobile-only { display: block; min-height: 0; padding: 0; overflow: hidden; }
  .page-results .results-case--mobile-only.reveal-card--dark::before { display: none; }
  .page-results .results-case--mobile-only.reveal-card--dark { box-shadow: none; }

  /* Baked mobile CTA (#footer): clip the live footer, show the baked image,
     place the Start-Your-Defense + phone hotspots, kill the seam shadow.
     (::before veil already suppressed in the footer polish block below.) */
  .page-results #footer .home-live {
    position: absolute !important; width: 1px !important; height: 1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important; white-space: nowrap !important;
  }
  .page-results .home-cta-baked { display: block; position: relative; width: 100%; line-height: 0; }
  .page-results .home-cta-baked img { display: block; width: 100%; height: auto; }
  .page-results .home-cta-hotspot { position: absolute; left: 0; right: 0; display: block; }
  .page-results #footer.reveal-card--dark { box-shadow: none; }

  /* Footer (live) mobile polish — same as home/about. */
  .page-results .cta-footer { padding: var(--space-7) var(--space-3) 3.75rem; }
  .page-results .cta-footer__thesis { font-size: 4.3vw; line-height: 1.25; }
  .page-results .cta-footer__thesis .line { white-space: nowrap; }
  .page-results .cta-footer__thesis .line--gold { margin-top: 0.75rem; }
  .page-results .cta-footer__mark { filter: none; margin-bottom: -0.65rem; }
  .page-results #footer.reveal-card--dark::before { display: none; }
  .page-results .cta-footer__nav { margin-bottom: var(--space-2); }
  .page-results .cta-footer__rule { margin-bottom: var(--space-2); }
  .page-results .cta-footer__wordmark { margin-bottom: 0.7rem; }
  .page-results .cta-footer__phone { margin-bottom: 0.4rem; }
  .page-results .cta-footer__brand { margin-bottom: 0; }
  .page-results .cta-footer__address-sep { display: none; }
  .page-results .cta-footer__address-l1,
  .page-results .cta-footer__address-l2 { display: block; }
}


/* =====================================================================
   DESKTOP HOMEPAGE NARRATIVE REBUILD (v211) — desktop only (≥1025px).
   New live flow: HERO → HOW WE DEFEND → MAGNIFYING GLASS → ROAD →
   CASE STUDY → CTA. The old desktop middle sections (WHAT SHARP LOOKS
   LIKE, the three pillars, WHAT ISN'T CHALLENGED) are retired on desktop
   only. Tablet (641–1024) keeps the existing live flow untouched; mobile
   (≤640) keeps its baked sections untouched. Everything is scoped to
   .page-home and gated behind min-width:1025px so nothing below desktop
   is affected.
   ===================================================================== */

/* New sections are hidden by default (so tablet + mobile never see them);
   the ≥1025 block reveals them. */
.page-home .home-desktop-only { display: none; }

@media (min-width: 1025px) {
  /* Retire the old desktop middle sections — replaced by the new flow.
     #road is hidden on desktop too (replaced by #home-road); tablet keeps it. */
  .page-home #defend,
  .page-home #sharp,
  .page-home #precision,
  .page-home #pressure,
  .page-home #proof,
  .page-home #road,
  .page-home #challenged { display: none; }

  /* Bring the new live sections into the reveal-stack. */
  .page-home .home-desktop-only { display: block; }

  /* ------------------------------------------------------------------
     APPROVED DESKTOP ASSETS (v221) — the four middle sections display the
     approved compositions DIRECTLY as the desktop presentation layer.
     Each is a content-sized block (NOT a 100vh reveal card): the asset is
     shown full-width; semantic copy is provided via .visually-hidden for
     SEO/accessibility (same approach as the mobile baked sections).
     Hero + footer CTA remain live and untouched.
     ------------------------------------------------------------------ */
  .page-home #home-defend,
  .page-home #home-mag,
  .page-home #home-road,
  .page-home #home-case {
    position: relative;
    top: auto;
    min-height: 0;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }
  .page-home #home-defend::before,
  .page-home #home-mag::before,
  .page-home #home-road::before,
  .page-home #home-case::before { display: none; }

  .page-home .home-asset__img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
  }

  /* Preserve the existing case-study VIEW MORE link (-> results.html) with a
     transparent hit area over the asset's baked button. Positioned by % so
     it tracks the button as the asset scales. */
  .page-home #home-case .home-asset__hit {
    position: absolute;
    left: 39%;
    top: 82%;
    width: 33%;
    height: 13%;
    display: block;
    z-index: 2;
  }

  /* ------------------------------------------------------------------
     CTA — align to the uploaded CTA asset (desktop only):
     button reads "Start Your Defense"; the footer nav drops "How" and
     shows just Criminal Defense / Ethics Defense. Tablet + mobile keep
     their existing CTA exactly. Functionality (links, phone) untouched.
     ------------------------------------------------------------------ */
  .page-home .btn-label-default { display: none; }
  .page-home .btn-label-desktop { display: inline; }
  .page-home .cta-footer__nav-how { display: none; }

  /* v223: DESKTOP CTA = approved asset 6 displayed directly (consistent with
     the four section assets). The live CTA is hidden on desktop; TABLET and
     MOBILE keep the live CTA untouched. Interactive elements are preserved via
     transparent hotspots: button -> contact, the two practice areas -> their
     pages, phone -> tel. Footer background matches the asset's black so the
     capped composition sits seamlessly in the closing panel. */
  .page-home .cta-footer { background: #020001; padding: var(--space-8) var(--space-6); }

  /* v225: take the footer OUT of the reveal-card system on DESKTOP — the CTA
     arrives as a normal final scene like the asset sections, not a sticky card
     covering the previous one. Un-stick, drop the 100vh pin, the dark top-fade,
     the seam shadow, and overflow clipping. The subtle reveal is already on
     .cta-footer__asset (home-pace). Tablet + mobile keep reveal-card exactly. */
  .page-home #footer.cta-footer {
    position: static;
    min-height: 0;
    box-shadow: none;
    overflow: visible;
  }
  .page-home #footer.reveal-card--dark::before { display: none; }
  .page-home .cta-footer__live { display: none; }
  .page-home .cta-footer__asset {
    display: block;
    position: relative;
    width: 100%;
    max-width: min(94vw, 1040px);
    margin: 0 auto;
    line-height: 0;
  }
  .page-home .cta-footer__asset-img { display: block; width: 100%; height: auto; }
  .page-home .cta-footer__asset-hit { position: absolute; display: block; z-index: 2; }

  /* v224: PACING PASS — subtle on-enter reveal for the desktop story sections
     (How We Defend, Magnifying Glass, Road, What Sharp Looks Like, CTA). The
     start state is applied only via JS (.is-armed) on desktop with motion
     allowed; the reveal (.is-in) settles it into place. Almost invisible by
     design: a small rise and a slight softening, 600ms ease-out, one-shot.
     No JS / reduced-motion / tablet / mobile = no .is-armed = fully visible,
     no motion. Transform-only + opacity, so no layout shift. */
  .page-home .home-pace.is-armed {
    opacity: 0.85;
    transform: translateY(16px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
  }
  .page-home .home-pace.is-armed.is-in {
    opacity: 1;
    transform: none;
  }

  /* v227: PROOF MOMENT — the Attempted Murder case study is the homepage
     payoff, so its reveal is deliberately stronger than the near-invisible
     pacing on the connective sections around it (Road, CTA). Same whole-
     section technique, no new mechanics: a true fade-in (0 -> 1) instead of
     a slight lift, a touch more travel (24px), and a slower settle (800ms)
     so it reads as the moment the method is vindicated. One-shot, asset
     untouched. Desktop only; the section is hidden on tablet/mobile. */
  .page-home #home-case.home-pace.is-armed {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 800ms ease-out, transform 800ms ease-out;
  }
  .page-home #home-case.home-pace.is-armed.is-in {
    opacity: 1;
    transform: none;
  }

  /* v226: TRANSITION #1 — the single reveal-card moment, HOW WE DEFEND ->
     MAGNIFYING GLASS (Principle -> Method). HOW WE DEFEND pins (sticky 100vh)
     and MAGNIFYING GLASS slides up and covers it. Scoped to a 2-section
     wrapper so the pin releases right after the cover — it never bleeds into
     ROAD. Backgrounds match each asset's own edge color so the pinned panels
     are seamless. Everything after MAGNIFYING GLASS scrolls normally.
     Tablet + mobile keep their existing flow (these are home-desktop-only). */
  /* Restore position:sticky on the desktop homepage. The global
     `body { overflow-x: hidden }` guard forces overflow-y to compute to
     `auto`, which turns body into a (non-scrolling) scroll container and
     neutralizes sticky. `overflow-x: clip` clips horizontal overflow the
     same way WITHOUT creating a scroll container, so sticky works again.
     Desktop homepage only; tablet, mobile, and every other page keep the
     original `overflow-x: hidden`. */
  body.page-home { overflow-x: clip; }

  .page-home .home-reveal-pair { position: relative; }
  .page-home #home-defend {
    position: sticky;
    top: 0;
    min-height: 100vh;
    z-index: 1;
    background: #ebebeb;            /* matches asset 2 paper edge */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .page-home #home-mag {
    position: relative;
    z-index: 2;                     /* slides up over the pinned HOW WE DEFEND */
    min-height: 100vh;
    background: #020001;            /* matches asset 3 black edge */
    display: flex;
    align-items: center;
    justify-content: center;
  }
}