/* =====================================================================
   KOPLOW DEFENSE — Criminal Defense / Ethics Defense / Contact page styles
   Builds on style.css and about.css.
   ===================================================================== */


/* ---------------------------------------------------------------------
   PAGE HERO (shared by CD and Ethics)
   Same structure as About hero but reusable.
   --------------------------------------------------------------------- */
.page-hero {
  position: relative;
  height: 180vh;
  background: var(--color-black);
}

.page-hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.page-hero__image {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.page-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  will-change: transform;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.6) 35%,
    rgba(0,0,0,0.2) 70%,
    rgba(0,0,0,0.1) 100%);
  z-index: 2;
}

.page-hero__content {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  z-index: 3;
  max-width: 720px;
  will-change: transform, opacity;
}

.page-hero__headline {
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.8rem);
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  color: var(--color-white);
  margin-bottom: var(--space-6);
  /* Typography precision (v73) — see hero__headline note. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.page-hero__headline .line { display: block; }
.page-hero__headline .line--gold { color: var(--color-gold); }

/* Sentence-case headline variant for Ethics (peer audience).
   Regular weight (not bold) — restraint is the voice — but solid enough
   to feel grounded, not thin. */
.page-hero__headline--sentence {
  font-weight: 400;
  letter-spacing: -0.005em;
  font-size: clamp(2.2rem, 4.8vw, 4rem);
}

.page-hero__sub {
  color: var(--color-white);
  opacity: 0.82;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.6;
}
.page-hero__sub p { margin: 0; }

/* Gold subtitle variant for Ethics */
.page-hero__sub--gold {
  color: var(--color-gold);
  opacity: 1;
  font-weight: 400;
  margin-bottom: var(--space-8);
}
.page-hero__sub--gold .line { display: block; }

/* Hero eyebrow (Ethics: "ETHICS DEFENSE FOR LAWYERS") */
.page-hero__eyebrow {
  color: var(--color-white);
  opacity: 0.55;
  font-size: 0.85rem;
  letter-spacing: var(--tracking-wider);
  font-weight: 500;
  margin-bottom: var(--space-8);
}

/* Hero CTA button (Ethics has button in hero, others don't) */
.page-hero__cta {
  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;
}
.page-hero__cta:hover {
  background: rgba(245, 243, 238, 0.08);
  border-color: rgba(245, 243, 238, 0.8);
}
.page-hero__cta svg {
  width: 14px;
  height: 14px;
}

/* Ethics-specific desktop tweak: with the Gotham font swap, the
   content block renders taller than under Inter — extending high
   enough to clip the eyebrow behind the nav at top: 50%. Nudge the
   block down so the eyebrow clears the nav. Only affects Ethics;
   How and CD keep their default centering. */
.page-hero--ethics .page-hero__content {
  top: 56%;
}

.page-hero__prompt {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--color-white);
  opacity: 0.6;
  will-change: opacity, transform;
}
.page-hero__prompt svg {
  width: 24px;
  height: 14px;
  animation: page-chevron 2.2s ease-in-out infinite;
}
@keyframes page-chevron {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(4px); opacity: 1; }
}


/* =====================================================================
   CRIMINAL DEFENSE  —  page-specific sections
   ===================================================================== */

/* Section header shared across CD sections — sentence-case bold white */
.cd-section-title {
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--color-white);
  margin-bottom: var(--space-12);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
/* Section title variants for desktop/mobile copy divergence (v119).
   Desktop sees __desktop; mobile sees __mobile. Mobile override is
   in the @media (max-width: 640px) block. */
.cd-section-title__desktop { display: inline; }
.cd-section-title__mobile { display: none; }

/* REALITY SHIFT
   Text sits in the upper third of the viewport so it reads as a
   continuation of the hero's argument rather than a separate moment
   floating in empty space. Tighter padding above the lead and between
   the two lines pulls them into one connected thought. */
.cd-reality {
  background: var(--color-black);
  color: var(--color-white);
  display: flex;
  align-items: flex-start;          /* Was center — now top-aligned */
  justify-content: center;
  padding-top: 28vh;                /* Pushes content into upper third */
  padding-bottom: var(--space-12);
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
/* Mobile baked-image element. Hidden on desktop — the live HTML below
   is the desktop composition. Made visible via the ≤640px override. */
.cd-reality__image {
  display: none;
}
/* Mobile baked-image element for procedural section (v137).
   Same pattern as .cd-reality__image — hidden on desktop, made
   visible via the ≤640px override. */
.cd-procedural__image {
  display: none;
}
/* Mobile chapter-break glyph between case studies (v142). Hidden on
   desktop — narrative transition is a mobile-specific cinematic
   device. Made visible via the ≤640px override. */
.cd-case-divider {
  display: none;
}
.cd-reality__inner {
  max-width: 1200px;
  text-align: center;
}
.cd-reality__lead {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  color: rgba(245, 243, 238, 0.75);
  letter-spacing: 0.03em;
  margin-bottom: var(--space-4);    /* Tightened — was --space-6 */
}
.cd-reality__statement {
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  letter-spacing: 0.04em;
  color: var(--color-white);
  line-height: 1.25;
}
.cd-reality__statement .line { display: block; }

/* CATEGORIES + PROCEDURAL share a grid layout */
.cd-categories,
.cd-procedural {
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--space-12) var(--space-6);
  display: flex;
  align-items: flex-start;
}
/* Continuation card has fewer cells — vertically center so the row sits
   in the middle of the section rather than hugging the top. */
.cd-categories--continued {
  align-items: center;
}
.cd-categories__inner,
.cd-procedural__inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.cd-grid {
  display: grid;
  gap: var(--space-12) var(--space-12);
}
.cd-grid--2col {
  grid-template-columns: 1fr 1fr;
}

.cd-cat__label {
  color: var(--color-white);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.25vw, 1.05rem);
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-3);
  transition: color 250ms ease;
}
.cd-cat__primary {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--color-white);
  line-height: 1.45;
  margin-bottom: var(--space-3);
}
.cd-cat__secondary {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  color: rgba(245, 243, 238, 0.7);
  line-height: 1.5;
}

/* Each category is wrapped as <a> so it's ready to become a link when
   the practice-area pages are built. For now href="#" with a JS guard.
   Hover treatment is intentionally quiet today — readable as polish.
   When real hrefs replace "#", the same treatment reads as link affordance. */
.cd-cat {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 350ms var(--ease-out);
}
.cd-cat:hover .cd-cat__label {
  color: var(--color-gold);
}
.cd-cat:hover {
  transform: translateY(-2px);
}

.cd-procedural__close {
  margin-top: var(--space-8);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--color-white);
  font-weight: 400;
}

/* CD CTA thesis: two lines, first white, second gold (mirrors About/Ethics). */
.page-cd .cta-footer__thesis {
  color: var(--color-white);
}
.cta-footer__thesis--cd .line { display: block; }

/* CD CTA mobile-parity helpers (v207): hidden on desktop, revealed only on
   mobile so the desktop CD footer (WHEN IT LOOKS DEFENSELESS / THAT'S WHEN IT
   HAS TO BE SHARP, Request Consultation, four-link nav) is left untouched. */
.page-cd .cta-thesis-mobile { display: none; }
.page-cd .btn-label-mobile { display: none; }
.page-cd .cta-footer__nav-pipe { display: none; }
.page-cd .cta-footer__rule { display: none; }

/* =====================================================================
   CD CLOSING BRIDGE  —  "OTHERS SEE THE OBSTACLE / WE SEE WHERE PRESSURE
   WILL BREAK IT" (v172)
   Mobile-only paper-background interpretation moment between the last
   case study (Phoenix DUI) and the CTA footer ("WHEN IT LOOKS
   DEFENSELESS / Request Consultation"). Hidden by default on all
   breakpoints so desktop/tablet keep their existing case-study -> CTA
   transition unchanged. Same baked-image model as About's upper bridge:
   live HTML kept in DOM for SEO/a11y, baked image renders on mobile.
   Independent class namespace (.cd-closing-bridge) so this section is
   not affected by About-page bridge rules in about.css. The asset
   carries its own internal breathing room; wrapper padding stays near
   zero so the asset defines section height.
   ===================================================================== */
.cd-closing-bridge {
  display: none;
}
@media (max-width: 640px) {
  .cd-closing-bridge {
    display: block;
    background: var(--color-paper);
    color: var(--color-black);
    padding: var(--space-1) 0 var(--space-2);
  }
  /* Live HTML: kept in DOM for SEO/a11y, visually hidden. */
  .cd-closing-bridge__inner {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .cd-closing-bridge__baked {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}


/* =====================================================================
   ETHICS DEFENSE  —  page-specific sections
   ===================================================================== */

/* REFRAME */
.ethics-reframe {
  background: var(--color-black);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-6);
}
.ethics-reframe__inner {
  max-width: 1200px;
  width: 100%;
}
.ethics-reframe__statement {
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  letter-spacing: 0.04em;
  color: var(--color-white);
  line-height: 1.3;
  margin-bottom: var(--space-12);
}
.ethics-reframe__statement .line { display: block; }
.ethics-reframe__follow p {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  margin-bottom: var(--space-2);
}
.ethics-reframe__gold {
  color: var(--color-gold);
}

/* METHOD (LIGHT) */
.ethics-method {
  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);
}
.ethics-method__inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.ethics-method__title {
  font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  color: var(--color-near-black);
  letter-spacing: -0.005em;
  margin-bottom: var(--space-8);
}
.ethics-method__lead {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.5;
  margin-bottom: var(--space-8);
}
.ethics-method__lead strong {
  font-weight: 600;
  color: var(--color-near-black);
}
.ethics-method__lead .gold {
  color: var(--color-gold);
  font-style: normal;
  font-weight: 500;
}
.ethics-method__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
}
.ethics-method__list li {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--color-near-black);
  padding: var(--space-1) 0;
  letter-spacing: 0.02em;
}
.ethics-method__close {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--color-near-black);
}

/* PROCESS (dark, ordered list) */
.ethics-process {
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--space-12) var(--space-6) var(--space-16);
  display: flex;
  align-items: flex-start;
}
.ethics-process__inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.ethics-process__title {
  color: var(--color-gold);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  letter-spacing: -0.005em;
  margin-bottom: var(--space-8);
}
.ethics-process__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-10);
}
.ethics-process__list li {
  margin-bottom: 0;
}
.ethics-process__list li:last-child {
  margin-bottom: 0;
}
.ethics-process__list h3 {
  color: var(--color-white);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-2);
}
.ethics-process__list p {
  color: rgba(245, 243, 238, 0.78);
  font-size: clamp(0.98rem, 1.4vw, 1.15rem);
  line-height: 1.5;
}
.ethics-process__close {
  margin-top: var(--space-8);
  text-align: center;
  color: rgba(245, 243, 238, 0.85);
  font-size: clamp(0.98rem, 1.4vw, 1.1rem);
  font-style: italic;
}

/* PIVOT — "THIS IS WHERE CASES ARE DECIDED" */
.ethics-pivot {
  background: var(--color-black);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
}
.ethics-pivot__title {
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: var(--tracking-wider);
  color: var(--color-white);
  text-align: center;
}

/* ISSUES (LIGHT, 4-column) */
.ethics-issues {
  background: var(--color-paper);
  color: var(--color-near-black);
  padding: var(--space-16) var(--space-6);
  display: flex;
  align-items: center;
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0px,
      transparent 14px,
      rgba(0, 0, 0, 0.008) 14px,
      rgba(0, 0, 0, 0.008) 15px);
}
.ethics-issues__inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.ethics-issues__title {
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-12);
  color: var(--color-near-black);
}
.ethics-issues__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.ethics-issue {
  padding: 0 var(--space-3);
  border-left: 1px solid rgba(10, 10, 10, 0.15);
}
.ethics-issue:first-child {
  border-left: none;
}
.ethics-issue__label {
  color: var(--color-gold);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-4);
  line-height: 1.3;
  min-height: 2.4em;
}
.ethics-issue__primary,
.ethics-issue__secondary,
.ethics-issue__tertiary {
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}
.ethics-issue__primary {
  font-weight: 600;
  color: var(--color-near-black);
}
.ethics-issue__secondary {
  color: rgba(10, 10, 10, 0.75);
}
.ethics-issue__tertiary {
  color: rgba(10, 10, 10, 0.65);
}

/* ADVISORY */
.ethics-advisory {
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--space-12) var(--space-6) var(--space-16);
  display: flex;
  align-items: flex-start;
}
.ethics-advisory__inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.ethics-advisory__eyebrow {
  color: var(--color-gold);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-8);
}
.ethics-advisory__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}
.ethics-advisory__body p {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: rgba(245, 243, 238, 0.85);
}
.ethics-advisory__close {
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  color: var(--color-gold);
  font-weight: 500;
  text-align: center;
  font-style: italic;
}


/* =====================================================================
   GENERAL BIO SECTION  —  shared by Kelly Flood + any future bio
   With a `--mirror` modifier for portrait-on-right composition.
   ===================================================================== */
.bio-section {
  background: var(--color-black);
  color: var(--color-white);
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  padding-top: var(--space-8);
}
.bio-section__inner {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: var(--space-12);
  max-width: 1500px;
  margin: 0 auto;
  width: 100%;
  padding: var(--space-6) var(--space-6);
  align-items: start;
}
/* Mirror: portrait on right, text on left */
.bio-section__inner--mirror {
  grid-template-columns: 1fr 0.85fr;
}
.bio-section__inner--mirror .bio-section__text {
  padding-right: 0;
  padding-left: 4%;
}

.bio-section__portrait img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/5;
  object-fit: cover;
}
.bio-section__inner--mirror .bio-section__portrait img {
  object-position: right center;
}

.bio-section__text {
  padding-right: 4%;
}

.bio-section__name {
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: var(--tracking-wide);
  color: var(--color-white);
  margin-bottom: var(--space-1);
}
.bio-section__role {
  font-style: italic;
  color: rgba(245, 243, 238, 0.7);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  margin-bottom: var(--space-6);
}
.bio-section__lead {
  color: var(--color-gold);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-6);
}
.bio-section__paragraph {
  font-size: clamp(1.02rem, 1.4vw, 1.22rem);
  line-height: 1.5;
  color: rgba(245, 243, 238, 0.85);
  margin-bottom: var(--space-6);
}
.bio-section__paragraph p { margin: 0; }
.bio-section__close {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 500;
  color: var(--color-white);
  line-height: 1.5;
}


/* =====================================================================
   CONTACT PAGE
   ===================================================================== */
.page-contact {
  background: var(--color-black);
  color: var(--color-white);
}

.contact-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-6);
  padding-top: calc(80px + var(--space-12));
}
.contact-page__inner {
  width: 100%;
  max-width: 640px;
}

.contact-page__header {
  text-align: center;
  margin-bottom: var(--space-12);
}
/* v157: tighten the intro-to-form gap on mobile only.
   Desktop composition unchanged (--space-12 = 6rem / 96px).
   Mobile drops to --space-10 (5rem / 80px), a ~16.7% reduction,
   to shorten the emotional gap between the reassuring intro and
   the first form field on phones, where the gap reads longer
   relative to viewport than it does on desktop. Intro stack
   (mark / title / helper) is intentionally left alone — the
   adjustment is the *transition*, not the intro itself. */
@media (max-width: 640px) {
  .contact-page__header { margin-bottom: var(--space-10); }
}

/* v158: subtle vertical rebalance on mobile only.
   With v157's tighter intro-to-form gap, the whole intro stack
   now reads as sitting too low in the viewport. The base
   .contact-page rule uses padding-top: calc(80px + --space-12),
   where 80px is genuine nav clearance (must stay) and --space-12
   (96px) is aesthetic breathing room above the spur.
   We drop the aesthetic portion to --space-8 (64px) on mobile,
   shifting the intro stack up by 32px while preserving every
   pixel of nav clearance. Desktop unchanged. */
@media (max-width: 640px) {
  .contact-page { padding-top: calc(80px + var(--space-8)); }
}
.contact-page__mark {
  width: 44px;
  height: auto;
  display: block;
  margin: 0 auto var(--space-6);
}
.contact-page__title {
  font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -0.005em;
  color: var(--color-white);
  margin-bottom: var(--space-3);
}
.contact-page__helper {
  color: rgba(245, 243, 238, 0.7);
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  font-style: italic;
}

/* Thanks variant */
.contact-page__inner--thanks {
  text-align: center;
}
.contact-page__back {
  margin-top: var(--space-8);
}
.contact-page__back a {
  color: var(--color-gold);
  font-size: 0.9rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(139, 110, 59, 0.5);
  padding-bottom: 2px;
  transition: border-color 200ms ease;
}
.contact-page__back a:hover {
  border-bottom-color: var(--color-gold);
}

/* Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.contact-form__field {
  display: flex;
  flex-direction: column;
}
.contact-form__field label {
  color: rgba(245, 243, 238, 0.7);
  font-size: 0.85rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.contact-form__field input[type="text"],
.contact-form__field input[type="email"],
.contact-form__field input[type="tel"],
.contact-form__field textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-white);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  background: rgba(255, 255, 255, 0.07);
}
.contact-form__field textarea {
  resize: vertical;
  min-height: 140px;
  font-family: inherit;
  line-height: 1.5;
}

.contact-form__field--check {
  flex-direction: row;
}
.contact-form__check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(245, 243, 238, 0.7);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}
.contact-form__check input[type="checkbox"] {
  margin-top: 0.25rem;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--color-gold);
}
.contact-form__check-text {
  display: inline-block;
}

.contact-form__submit-row {
  margin-top: var(--space-4);
}
.contact-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--color-gold);
  color: var(--color-black);
  padding: 1rem 2.4rem;
  border: 1px solid var(--color-gold);
  border-radius: 3px;
  font-size: 0.95rem;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.contact-form__submit:hover {
  background: var(--color-gold-soft);
  border-color: var(--color-gold-soft);
}
.contact-form__submit svg {
  width: 14px;
  height: 14px;
}

/* Contact footer (smaller) */
.contact-footer {
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--space-8) var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.contact-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.contact-footer .cta-footer__wordmark {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  margin-bottom: var(--space-2);
}
.contact-footer .cta-footer__wordmark img {
  width: 32px;
}
.contact-footer .cta-footer__address {
  margin-bottom: var(--space-4);
  font-size: 0.85rem;
}

/* Visually hidden utility (for honeypot and screen-reader-only) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* =====================================================================
   INSIGHTS
   Index page (hero + Latest Articles grid) and post template.
   ===================================================================== */
.page-insights {
  background: var(--color-black);
  color: var(--color-white);
}

/* ---------------------------------------------------------------------
   INSIGHTS HERO
   Same sticky-scroll pattern as the other page heroes (about-hero,
   page-hero) so the JS parallax/fade logic in page-hero.js applies.
   Visual concept from PSD: cactus framing the left and right edges
   as vertical slivers, with the centered headline floating between.
   --------------------------------------------------------------------- */
.insights-hero {
  position: relative;
  height: 180vh;
  background: var(--color-black);
}
.insights-hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Single full-bleed background image. The composition (per the PSD)
   has cactus on left + right with a dark central zone for the text.
   No masks, no overlays — the image's own composition does the work
   of framing the content. */
.insights-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}
.insights-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.insights-hero__content {
  position: relative;
  z-index: 3;
  /* Centered editorial composition matching PSD: content lives in the
     dark middle of the image, with the cactus flanking on both sides
     as visual frame. Generous max-width so headline lines fit on one
     line each on desktop. */
  text-align: center;
  max-width: 1100px;
  width: 100%;
  padding: 0 var(--space-6);
  margin: 0 auto;
  will-change: transform, opacity;
}

.insights-hero__eyebrow {
  color: var(--color-gold);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  letter-spacing: var(--tracking-wider);
  font-weight: 600;
  text-transform: uppercase;
  /* Tight gap below eyebrow so it reads as a label attached to the
     headline that follows, not a separate floating element. The PSD
     shows them clustered together. */
  margin-bottom: var(--space-5);
}

.insights-hero__headline {
  font-weight: 700;
  /* Sized to fit the central dark zone on the PSD without being so
     large it dominates the entire viewport. Lower clamp ceiling
     keeps the headline from over-stretching on very wide screens. */
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  letter-spacing: var(--tracking-display);
  line-height: 1.12;
  color: var(--color-white);
  /* Modest gap to subline — they belong to the same statement, not
     two separate paragraphs. */
  margin-bottom: var(--space-6);
}
.insights-hero__headline .line { display: block; }
.insights-hero__headline .gold { color: var(--color-gold); }

.insights-hero__sub {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: rgba(235, 235, 235, 0.7);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.insights-hero__prompt {
  position: absolute;
  /* Moved up from bottom: 6vh so the label is more visually present
     in the hero zone, not pinned at the very bottom edge. */
  bottom: 18vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--color-white);
  opacity: 0.9;
  will-change: opacity, transform;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.insights-hero__prompt-label {
  /* Larger so it reads as a real callout, not a hint. */
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  letter-spacing: var(--tracking-wider);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 1;
}

.insights-hero__prompt-arrow {
  width: 14px;
  height: 24px;
  /* Gentle vertical drift signals scrollability without being
     attention-grabbing. ~2s cycle, 6px travel, ease-in-out so the
     motion at the extremes is slow — feels like breathing, not
     bouncing. The animation pauses on hover so it doesn't read as
     jittery if the user is reading the label. */
  animation: insightsPromptDrift 2.4s ease-in-out infinite;
}

@keyframes insightsPromptDrift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* Respect reduced-motion preference — disable the drift animation. */
@media (prefers-reduced-motion: reduce) {
  .insights-hero__prompt-arrow {
    animation: none;
  }
}


/* ---------------------------------------------------------------------
   INSIGHTS LIST  —  "Latest Articles" three-up grid.
   Slides up over the hero as a reveal-card. The hero→list transition
   uses --hard (no soft top-fade) so the world-change is a sharp cut,
   matching the convention used on the other interior pages.
   --------------------------------------------------------------------- */
.insights-list {
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--space-16) var(--space-12) var(--space-12);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.insights-list__inner {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
}

/* Section title — sentence-case, light weight, left-aligned, large.
   Intentionally softer than the ALL CAPS declarations used elsewhere.
   Same voice register as About's "This is Where Cases Turn". */
.insights-list__title {
  font-weight: 300;
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--color-white);
  margin-bottom: var(--space-12);
}

.insights-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.article-card {
  display: flex;
  flex-direction: column;
  color: var(--color-white);
  transition: transform 400ms var(--ease-out);
}
.article-card:hover {
  transform: translateY(-4px);
}

.article-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  margin-bottom: var(--space-6);
  background: #111;
}
.article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 500ms ease, transform 600ms var(--ease-out);
}
.article-card:hover .article-card__image img {
  filter: grayscale(0.85) contrast(1.05);
  transform: scale(1.02);
}

.article-card__category {
  color: var(--color-white);
  font-size: 0.78rem;
  letter-spacing: var(--tracking-wider);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.article-card__title {
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.article-card__byline {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: 0;
}

/* Chevron prompt below the grid — signals there's more below.
   Same shape as the hero prompt, smaller in opacity. */
.insights-list__prompt {
  display: flex;
  justify-content: center;
  margin-top: var(--space-16);
  color: var(--color-white);
  opacity: 0.45;
}
.insights-list__prompt svg {
  width: 14px;
  height: 24px;
}


/* ---------------------------------------------------------------------
   INSIGHTS POST  —  Single-article template.
   Used by every individual post under /insights/. Same dark world.
   Slow reveal pacing on the body so reading lands deliberately.
   --------------------------------------------------------------------- */
.page-insights-post {
  background: var(--color-black);
  color: var(--color-white);
}

.post-header {
  background: var(--color-black);
  padding: calc(80px + var(--space-16)) var(--space-6) var(--space-12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-header__inner {
  width: 100%;
  max-width: 820px;
  text-align: left;
}
.post-header__category {
  color: var(--color-gold);
  font-size: 0.85rem;
  letter-spacing: var(--tracking-wider);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}
.post-header__title {
  font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--color-white);
  margin-bottom: var(--space-8);
}
.post-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 0.95rem;
  color: rgba(235, 235, 235, 0.6);
}
.post-header__byline {
  color: var(--color-white);
  font-weight: 600;
}
.post-header__sep {
  opacity: 0.4;
}

.post-hero {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto var(--space-12);
  padding: 0 var(--space-6);
}
.post-hero picture,
.post-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.post-body {
  padding: 0 var(--space-6) var(--space-16);
  display: flex;
  justify-content: center;
}
.post-body__inner {
  width: 100%;
  max-width: 720px;
  font-size: clamp(1.05rem, 1.2vw, 1.15rem);
  line-height: 1.75;
  color: rgba(235, 235, 235, 0.88);
}
.post-body__inner > * + * {
  margin-top: var(--space-4);
}
.post-body__inner h2 {
  font-weight: 600;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  letter-spacing: 0.01em;
  color: var(--color-white);
  margin-top: var(--space-10);
  margin-bottom: var(--space-2);
  line-height: 1.25;
}
.post-body__inner h3 {
  font-weight: 600;
  font-size: clamp(1.15rem, 1.5vw, 1.3rem);
  color: var(--color-white);
  margin-top: var(--space-8);
  margin-bottom: var(--space-1);
}
.post-body__inner p {
  color: rgba(235, 235, 235, 0.85);
}
/* The lede paragraph (first paragraph) is the article's hook —
   slightly larger, italicized, lighter weight. Signals "this is the
   editorial voice opening" before the body settles into normal weight. */
.post-body__inner .post-body__lede {
  font-size: clamp(1.25rem, 1.5vw, 1.45rem);
  font-style: italic;
  font-weight: 300;
  color: rgba(235, 235, 235, 0.95);
  line-height: 1.55;
  margin-bottom: var(--space-8);
}
.post-body__inner a {
  color: var(--color-gold);
  border-bottom: 1px solid rgba(139, 110, 59, 0.5);
  transition: border-color 200ms ease;
}
.post-body__inner a:hover {
  border-bottom-color: var(--color-gold);
}
.post-body__inner blockquote {
  border-left: 2px solid var(--color-gold);
  padding-left: var(--space-4);
  margin: var(--space-8) 0;
  color: var(--color-white);
  font-style: italic;
  font-size: 1.1em;
}
.post-body__inner ul,
.post-body__inner ol {
  padding-left: var(--space-4);
}
.post-body__inner li + li {
  margin-top: var(--space-1);
}
.post-body__inner hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: var(--space-10) 0;
}

.post-back {
  padding: 0 var(--space-6) var(--space-16);
  display: flex;
  justify-content: center;
}
.post-back__link {
  color: var(--color-gold);
  font-size: 0.85rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.post-back__link svg {
  width: 14px;
  height: 14px;
}


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

/* Tablet */
@media (max-width: 1024px) {
  .page-hero { height: 160vh; }
  .page-hero__content { left: 5%; max-width: 88%; }

  .cd-grid--2col {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* Categories on mobile: keep 2-col grid (instead of stacking) so all
     4 cards in section 1 (and 2 in section 2) fit inside the sticky
     reveal-card's 100vh window. Procedural's 2x2 grid still stacks via
     the rule above. */
  .cd-categories {
    padding: var(--space-10) var(--space-3);
  }
  .cd-categories .cd-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-3);
  }
  .cd-categories .cd-cat__label {
    font-size: 0.78rem;
    margin-bottom: var(--space-2);
  }
  .cd-categories .cd-cat__primary {
    font-size: 0.92rem;
    margin-bottom: var(--space-2);
    line-height: 1.4;
  }
  .cd-categories .cd-cat__secondary {
    font-size: 0.82rem;
    line-height: 1.45;
  }
  .cd-categories .cd-section-title {
    font-size: 1.6rem;
    margin-bottom: var(--space-6);
  }

  .ethics-issues__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10) var(--space-8);
  }
  .ethics-issue:nth-child(odd) { border-left: none; }

  .bio-section__inner,
  .bio-section__inner--mirror {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: var(--space-10) var(--space-4);
  }
  .bio-section__portrait {
    max-width: 480px;
    margin: 0 auto;
  }
  .bio-section__portrait img { aspect-ratio: 4/4; }
  .bio-section__inner--mirror .bio-section__text {
    padding-left: 0;
  }
  .bio-section__text {
    padding-right: 0;
  }

  /* Insights */
  .insights-hero { height: 160vh; }
  .insights-hero__frame { width: 18vw; }
  .insights-list {
    padding: calc(72px + var(--space-10)) var(--space-8) var(--space-12);
  }
  .insights-list__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-6);
  }
  .insights-list__grid .article-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 520px;
    justify-self: center;
  }
}

/* ================================================================
   PRACTICE-AREA PLACEHOLDER PAGES (v80)
   Lightweight "under construction" pages reachable from the CD
   category list. Restrained — these are placeholders, not finished
   destinations. Voice stays consistent with the rest of the site.
   ================================================================ */
.page-practice {
  background: var(--color-black);
  color: var(--color-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.practice-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
}
.practice-placeholder__inner {
  max-width: 640px;
  width: 100%;
}
.practice-placeholder__eyebrow {
  color: var(--color-gold);
  opacity: 0.85;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  font-weight: 500;
  margin: 0 0 var(--space-4) 0;
  text-transform: uppercase;
}
.practice-placeholder__headline {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  color: var(--color-white);
  margin: 0 0 var(--space-5) 0;
}
.practice-placeholder__tagline {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.4;
  color: rgba(245, 243, 238, 0.82);
  margin: 0 0 var(--space-8) 0;
  max-width: 520px;
}
.practice-placeholder__status {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.65;
  margin: 0 0 var(--space-4) 0;
}
.practice-placeholder__contact {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(245, 243, 238, 0.7);
  max-width: 520px;
  margin: 0 0 var(--space-10) 0;
}
.practice-placeholder__contact a {
  color: var(--color-white);
  text-decoration: underline;
  text-decoration-color: rgba(139, 110, 59, 0.6);
  text-underline-offset: 3px;
  transition: text-decoration-color 200ms ease;
}
.practice-placeholder__contact a:hover {
  text-decoration-color: var(--color-gold);
}
.practice-placeholder__back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(245, 243, 238, 0.6);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  transition: color 200ms ease;
}
.practice-placeholder__back:hover {
  color: var(--color-white);
}
.practice-placeholder__back svg {
  width: 14px;
  height: 14px;
}
.cta-footer--minimal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-6);
  background: var(--color-black);
  color: rgba(245, 243, 238, 0.6);
  border-top: 1px solid rgba(245, 243, 238, 0.08);
  text-align: center;
}
.cta-footer--minimal .cta-footer__brand { text-align: center; }
.cta-footer--minimal .cta-footer__nav { font-size: 0.85rem; }

@media (max-width: 640px) {
  .practice-placeholder { padding: var(--space-8) var(--space-4); }
}

/* Mobile */
@media (max-width: 640px) {
  .page-hero { height: 140vh; }
  .page-hero__content {
    top: 32%;
    transform: none;
    left: 6%;
    right: 6%;
    max-width: none;
  }
  .page-hero__headline { 
    font-size: clamp(1.4rem, 6.8vw, 2rem); 
    letter-spacing: -0.01em;
  }
  .page-hero__headline .line {
    white-space: nowrap;
  }
  .page-hero__sub { font-size: 0.95rem; }
  .page-hero__overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.85) 100%);
  }

  /* ================================================================
     CD HERO — Mobile (v100)
     Image is a finalized art-directed portrait composition with
     eyebrow, headline, sub, and chevron baked in. Live HTML stays
     in the DOM for SEO and accessibility but is visually hidden.
     No overlay, no object-fit:cover scaling, no responsive cropping.
     Image displays at its natural portrait aspect (1290:2175 ≈ 0.593).
     ================================================================ */
  .page-hero--cd {
    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);
  }
  .page-hero--cd .page-hero__sticky {
    height: auto;
    position: static;
  }
  .page-hero--cd .page-hero__image {
    position: relative;
    inset: auto;
  }
  .page-hero--cd .page-hero__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
  }
  /* No overlay — composition baked into image. */
  .page-hero--cd .page-hero__overlay {
    display: none;
  }
  /* Live content (eyebrow + headline + sub): visually hidden but
     accessible to screen readers and SEO. The baked-in image
     typography is what users see. */
  .page-hero--cd .page-hero__content {
    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;
    right: auto;
    transform: none;
  }
  /* Down-arrow: baked into image; hide the live SVG to avoid
     double-arrow conflict and lingering arrow during scroll. */
  .page-hero--cd .page-hero__prompt {
    display: none;
  }

  /* ================================================================
     HOW HERO — Mobile (v95)
     Image is a finalized art-directed portrait composition with
     typography baked in. Live HTML text is preserved for SEO and
     accessibility but visually hidden. No gradient overlay, no
     object-position manipulation, no scaling beyond what's needed
     to fit the viewport width. Image aspect ratio (1290:2250 ≈
     0.573) determines hero height naturally.
     ================================================================ */
  .page-hero--how {
    height: auto;
    overflow: hidden;
    /* Push image below the fixed nav so the top of the
       composition is not clipped by the header. The padding
       value also controls how far down the entire composition
       sits — reduced from 48px to 16px so the emotional lock
       happens slightly earlier in the viewport. The headline
       still clears the nav cleanly with this tighter buffer. */
    padding-top: 16px;
    background: var(--color-black);
  }
  /* Sticky parent doesn't sticky on mobile (matches site-wide
     pattern), just flows as a normal block. */
  .page-hero--how .page-hero__sticky {
    height: auto;
    position: static;
  }
  /* Image displays at natural aspect ratio — fill width, height
     determined by aspect. No cover-fit upscaling. */
  .page-hero--how .page-hero__image {
    position: relative;
    inset: auto;
  }
  .page-hero--how .page-hero__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
  }
  /* No overlay — composition is baked into image. */
  .page-hero--how .page-hero__overlay {
    display: none;
  }
  /* Live headline + sub: visually hidden but accessible to screen
     readers and SEO crawlers. The baked-in image typography is
     what users see. */
  .page-hero--how .page-hero__content {
    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;
    right: auto;
    transform: none;
  }
  /* Down-arrow: the baked-in chevron in the image composition
     is the scroll cue on mobile. Hide the live SVG arrow entirely
     to avoid double-arrow conflict (stacked over the baked-in
     arrow) and to avoid a second arrow lingering below the image
     during scroll. */
  .page-hero--how .page-hero__prompt {
    display: none;
  }

  /* ================================================================
     ETHICS HERO — Cinematic recomposition for mobile portrait.
     Refinement v65: soften object behind headline, breathing room
     above eyebrow, CTA visible earlier in the viewport.
     ================================================================ */
  /* ================================================================
     ETHICS HERO — Mobile cinematic composition (locked frame).
     The image container IS the composition. All overlay elements
     are absolutely positioned relative to it. No flex distribution,
     no margin-top: auto, no dead space below the image.
     ================================================================ */
  .page-hero--ethics {
    height: 88svh; /* tightened crop — shorter so transition to next section feels intentional, not lingering */
    overflow: hidden;
  }

  /* Keep the sticky container the same shape as the image — no flex
     distributing children across a taller area. */
  .page-hero--ethics .page-hero__sticky {
    height: 100%;
    padding: 0;
  }

  .page-hero--ethics .page-hero__image img {
    object-position: 82% 30%;
  }

  .page-hero--ethics .page-hero__overlay {
    background:
      linear-gradient(
        to right,
        rgba(0,0,0,0.55) 0%,
        rgba(0,0,0,0.25) 55%,
        rgba(0,0,0,0) 80%
      ),
      linear-gradient(
        to bottom right,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.55) 45%,
        rgba(0,0,0,0.25) 75%,
        rgba(0,0,0,0.1) 100%
      );
  }

  /* Eyebrow + headline + sub + CTA all live inside content block.
     Content block spans full hero so CTA can anchor at bottom. */
  .page-hero--ethics .page-hero__content {
    position: absolute;
    top: 14vh;
    left: 6%;
    right: 6%;
    bottom: 0;
    transform: none;
    display: block;
  }

  .page-hero--ethics .page-hero__eyebrow {
    margin: 0 0 var(--space-4) 0;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    opacity: 0.7;
  }
  .page-hero--ethics .page-hero__headline {
    font-size: clamp(1.5rem, 6.6vw, 2rem);
    line-height: 1.14;
    letter-spacing: -0.005em;
    margin: 0 0 var(--space-3) 0;
    text-align: left;
  }
  .page-hero--ethics .page-hero__headline .line {
    white-space: normal;
    display: block;
  }
  .page-hero--ethics .page-hero__sub {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: left;
  }

  /* CTA — pulled out of the content block, anchored directly to the
     image frame. Positioned to feel like the final beat of the
     message composition, not a footer element. */
  .page-hero--ethics .page-hero__cta {
    position: absolute;
    left: 0;
    bottom: 23vh;
    z-index: 4;
    padding: 0.7rem 1.6rem;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
  }
  .page-hero--ethics .page-hero__cta svg {
    width: 12px;
    height: 12px;
  }

  .cd-reality,
  .cd-categories,
  .cd-procedural,
  .ethics-reframe,
  .ethics-method,
  .ethics-process,
  .ethics-pivot,
  .ethics-issues,
  .ethics-advisory {
    padding: var(--space-10) var(--space-3);
  }
  /* v126: cd-categories specifically — tighter top/bottom so the
     section reads as a unified composition rather than a walled-off
     block. The 80px top from the shared rule above was creating a
     visual barrier between "The Allegations" thesis and the
     ambient page flow. */
  .cd-categories {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  /* ================================================================
     CD REALITY — Mobile (v113) baked-image composition.
     Image is a finalized art-directed near-square composition on
     paper texture. Dark spur ornament + setup + bold conclusion
     ("They're decided by what goes unchallenged") all baked in.
     Section background flips from black (desktop) to paper (mobile)
     so the image sits flush. Live HTML preserved in DOM for SEO/a11y
     but visually clipped.

     Desktop and tablet (≥641px) are UNTOUCHED — dark-world live
     HTML composition continues to render exactly as it did pre-v113.
     ================================================================ */
  .cd-reality {
    /* Override the shared padding above and the desktop flex/padding.
       Baked image is the entire composition. */
    background: var(--color-paper);
    display: block;
    padding: 0;
    /* Disable the dark box-shadow inherited from .reveal-card--dark —
       a black shadow above a paper section reads as a smudge. */
    box-shadow: none;
    /* Override .reveal-card's min-height: 100vh (v116). On mobile the
       baked image is shorter than the viewport (~415px vs 850px). The
       100vh enforcement was creating ~440px of trailing paper-colored
       whitespace below the image, which was reading as a section break
       between the paper bridge and the categories grid. With min-height
       removed, the section auto-sizes to the image height and the
       categories grid begins immediately below the image. */
    min-height: auto;
    /* Override .reveal-card's position: sticky on mobile too. The
       slide-over reveal is a desktop-narrative device — on mobile,
       sections should flow naturally so the categories follow the
       paper bridge as immediate operational continuation. */
    position: static;
  }
  .cd-reality__image {
    display: block;
    width: 100%;
  }
  .cd-reality__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center;
  }
  /* Live content: visually hidden but accessible to screen readers
     and SEO. Baked-in typography is what users see on mobile. */
  .cd-reality__inner {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    max-width: none;
  }

  /* ================================================================
     CD PROCEDURAL — Mobile (v137) baked-image composition.
     Image is a finalized art-directed near-portrait composition on
     paper texture. Gold icons, black typography, 4 stages baked in
     (Appeals & Post-Conviction / Pre-Charge / Probation Violations /
     Release Hearings).

     Functions as TONAL RESET between the dark Allegations stack
     above and the dark case-study sections below. Background flips
     from black (desktop) to paper (mobile) so the image sits flush
     against pure paper-on-paper. Live HTML preserved in DOM for
     SEO/a11y but visually clipped — including the
     .cd-procedural__close bridge line, which is intentionally
     suppressed on mobile per v137 direction.

     Desktop (≥641px) UNTOUCHED — dark live HTML composition continues
     to render exactly as it did pre-v137.
     ================================================================ */
  .cd-procedural {
    background: var(--color-paper);
    display: block;
    padding: 0;
    /* Disable the dark box-shadow inherited from .reveal-card--dark —
       black shadow above a paper section reads as a smudge. */
    box-shadow: none;
    /* Override .reveal-card's min-height: 100vh — baked image is the
       entire composition, section auto-sizes to image height. */
    min-height: auto;
    /* Override .reveal-card's position: sticky — desktop-only device. */
    position: static;
  }
  /* Suppress the ::before gradient on this section. Same root cause as
     v136 (Allegations title gray bug) — the dark gradient compositing
     over a paper-background section creates an unwanted dark smudge
     at the top of the baked image. */
  .cd-procedural::before {
    display: none;
  }
  .cd-procedural__image {
    display: block;
    width: 100%;
  }
  .cd-procedural__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center;
  }
  /* Live content (heading + 4 articles + close line): visually hidden
     but accessible to screen readers and SEO. The baked image carries
     the same information visually on mobile. */
  .cd-procedural__inner {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    max-width: none;
  }

  /* ================================================================
     CD CATEGORIES — Mobile (v119) typography & rhythm upgrade.
     The "Allegations" section title is restored on mobile (replaces
     v114's full clipping) with paired desktop/mobile spans — desktop
     keeps "This is where cases change", mobile shows "The Allegations"
     in a restrained, integrated treatment.

     Card typography evolves toward stronger emotional hierarchy:
     - larger/more authoritative gold labels
     - increased vertical rhythm between cards
     - divider line repositioned UNDER each label (not above each card)
     - stronger arrow presence
     - trailing ellipsis on primary copy ("...continued")

     Cards remain fully live and tappable. Desktop and tablet UNTOUCHED.
     ================================================================ */
  /* Section title (v135): font-weight 700 → 600.
     Diagnosis: across v131-v134, "The Allegations" rendered gray
     despite color: #ffffff !important. Labels (weight 600) on the
     same page render at full strength gold. The hypothesis: Adobe
     Fonts kit may not be serving Gotham 700, causing the browser to
     fall back to weight 400, which at small size against pure black
     anti-aliases as perceptual gray. Weight 600 is proven to load
     correctly (gold labels are 600). Dropping to 600 should make
     the title render at full strength. */
  #categories .cd-section-title {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0 0 18px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: #ffffff !important;
    opacity: 1 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
  }
  /* Ensure the mobile span inherits full white — guard against any
     parent opacity or color cascade. */
  #categories .cd-section-title__mobile {
    color: #ffffff;
    opacity: 1;
  }
  /* Variant visibility: mobile shows __mobile, hides __desktop.
     Default (desktop block elsewhere) keeps __desktop visible. */
  .cd-section-title__desktop { display: none; }
  .cd-section-title__mobile { display: inline; }

  /* Section padding: tighter top because section title is now small
     and restrained — restores reasonable breathing without the v117
     debug-zero collapse. */
  #categories {
    padding-top: var(--space-6);
  }
  /* v130: first-child aligned to new 14px card rhythm. */
  #categories .cd-cat:first-child {
    padding-top: 14px;
  }

  /* Transition between the last Allegations card (FIREARMS, inside
     .cd-categories--continued) and the next major section
     (.cd-procedural — "Not every case starts in the same place").

     v134: Asymmetric release. The compressed Allegations rhythm needs
     a deliberate resolution point before the next conceptual phase
     begins. Heavier bottom-padding on the Allegations side
     (--space-10 = 80px, was --space-6 = 48px) lets the section
     resolve with intentional pause; Procedural's top stays at 48px
     so it doesn't feel late. The asymmetry is the point — visual
     weight on the resolving side signals "section ends here" more
     clearly than a symmetric gap.

     v137: cd-procedural is now a baked paper-colored image on mobile.
     Its top padding is overridden to 0 inside the cd-procedural block
     above — the baked image carries its own internal title padding,
     adding paper-colored space on top would create awkward double-
     padding. The 80px bottom on --continued still provides the
     "section ends here" pause before the tonal switch. */
  .cd-categories--continued {
    padding-bottom: var(--space-10);
  }
  .cd-procedural {
    padding-top: 0;
  }

  /* v126: Cross-section seam between #categories and #categories-2.
     With new tightened card padding (var(--space-3) = 24px top/bottom),
     the natural rhythm between cards = 24px-bottom of card N + 24px-top
     of card N+1 = 48px. To make the section seam invisible, zero the
     section-level padding-bottom on #categories and padding-top on
     --continued — the cards' own padding produces the rhythm. */
  #categories {
    padding-bottom: 0;
  }
  .cd-categories--continued {
    padding-top: 0;
  }

  /* v124: Mobile — suppress the second section's top-fade gradient and
     seam shadow so the boundary between #categories and #categories-2
     is purely structural (HTML/desktop) and visually invisible (mobile). */
  .cd-categories--continued::before {
    display: none;
  }
  .cd-categories--continued {
    box-shadow: none;
  }

  /* v136: THE TITLE GRAY BUG ROOT CAUSE.
     For five versions (v131-v135) I tried fixing "The Allegations"
     rendering as gray by changing color, weight, size, tracking,
     font-smoothing — all of it. None of it worked because the issue
     was never CSS color.
     
     #categories has class .reveal-card--dark, which carries a ::before
     pseudo-element: a 160px black-to-transparent gradient at z-index:5
     positioned at the top of the section (style.css:335-348). The
     gradient exists to soften the light→dark seam at the top of the
     section on desktop. On mobile, the prior section is already dark,
     so there's nothing to soften — but the gradient still renders and
     composites a 30-85% black overlay across the top 160px of the
     section, which is EXACTLY where the title sits.
     
     The title's color is #ffffff. The gradient over it is darkening
     it to something around #6a-#8a gray, depending on vertical position
     within the 160px band. The card primaries below render at full
     white because they sit BELOW the 160px gradient zone.
     
     Suppressing the gradient on #categories the same way I did on
     --continued in v124 eliminates the overlay. The title's pure white
     pixels are no longer composited against black. */
  #categories::before {
    display: none;
  }
  #categories {
    box-shadow: none;
  }

  .ethics-issues__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .ethics-issue {
    border-left: none;
    padding: var(--space-4) 0;
    border-top: 1px solid rgba(0,0,0,0.12);
  }
  .ethics-issue:first-child { border-top: none; padding-top: 0; }

  .ethics-issue__label { min-height: 0; }

  .ethics-process__list h3 { font-size: 0.92rem; }

  /* Insights */
  /* Mobile: switch hero from flex-centered overlay to a normal
     flex-column flow with controlled gaps. Fixes the LATEST ARTICLES
     vs subtitle overlap and the dead-space-at-top issue. */
  .insights-hero { height: 140vh; }
  .insights-hero__sticky {
    align-items: stretch;
    justify-content: flex-start;
    padding: 14vh var(--space-3) 8vh;
    text-align: center;
  }
  .insights-hero__content {
    position: relative;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  .insights-hero__eyebrow {
    margin-bottom: var(--space-5);
  }
  .insights-hero__headline { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .insights-hero__sub {
    font-size: 0.95rem;
    margin-top: var(--space-4);
  }
  .insights-hero__prompt {
    position: absolute;
    bottom: 4vh;
    left: 50%;
    transform: translateX(-50%);
  }
  .insights-list {
    padding: calc(64px + var(--space-8)) var(--space-3) var(--space-10);
  }
  .insights-list__title {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    margin-bottom: var(--space-8);
  }
  .insights-list__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    max-width: 420px;
    margin: 0 auto;
  }
  .insights-list__grid .article-card:nth-child(3) {
    grid-column: auto;
    max-width: none;
  }
  .article-card__title { min-height: 0; }

  /* Post template */
  .post-header {
    padding: calc(64px + var(--space-10)) var(--space-3) var(--space-8);
  }
  .post-hero { padding: 0 var(--space-3); margin-bottom: var(--space-8); }
  .post-body { padding: 0 var(--space-3) var(--space-12); }
  .post-back { padding: 0 var(--space-3) var(--space-12); }

  /* ================================================================
     CD CATEGORIES — Mobile single-column list (v80)
     Replaces the cramped 2x2 grid with a clean stacked list of
     tappable rows. Each row: gold eyebrow label + condensed one-line
     copy + thin gold arrow on the right. Hairline divider between
     rows. The secondary (longer) copy is hidden on mobile — the
     destination pages carry that detail.
     ================================================================ */
  .cd-categories .cd-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .cd-categories .cd-cat {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    /* v132: gap KILLED. This was the real culprit behind the persistent
       "white statement floats away from heading" issue across v125-v131.
       Internal divider→primary spacing is now controlled by the
       divider's own margin-bottom (see ::after rule). */
    gap: 0;
    /* v133: card padding 14→20px (28→40px between packets). Modest
       breath restored between allegations after v132 over-compression.
       Internal packet rhythm (label/divider/statement) unchanged —
       only the BETWEEN spacing increases. */
    padding: 20px 0;
    border-top: 0;
    transform: none;
    transition: background-color 150ms ease, opacity 150ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  /* v121: tap/active state — subtle background lift confirms the
     interaction without flashy color. */
  .cd-categories .cd-cat:active {
    background-color: rgba(245, 243, 238, 0.03);
  }
  .cd-categories .cd-cat:active::after {
    opacity: 1;
  }
  /* v133: first-child padding-top aligned to new 20px card rhythm. */
  #categories .cd-cat:first-child {
    border-top: 0;
    padding-top: 20px;
  }
  /* v133: continuation first-child aligned to new 20px rhythm. */
  .cd-categories--continued .cd-cat:first-child {
    padding-top: 20px;
  }
  /* Arrow (v125): full opacity, slightly larger (22×14), stroke-width
     2.25. Anchored to the label row (grid-row: 1) rather than spanning
     the full card height — sits visually adjacent to the allegation
     heading the way it does in the design asset. Reads as intentional
     directional cue at the headline, not floating decoration. */
  .cd-categories .cd-cat::after {
    content: "";
    grid-column: 2;
    grid-row: 1;
    width: 22px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'><path d='M1 7 H17 M13 2 L18 7 L13 12' stroke='%238b6e3b' stroke-width='2.25' fill='none' stroke-linecap='square'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    align-self: center;
    opacity: 1;
  }
  /* Category label (v125): authoritative gold heading. Margin-bottom
     removed — divider sits tight to the label via the ::after's own
     margin-top. Internal stack is now tightly compressed (label →
     divider ≈ 8px, divider → primary ≈ 12px) so the white statement
     reads as emotional consequence of the allegation, not detached
     caption text. */
  .cd-categories .cd-cat__label {
    grid-column: 1;
    color: var(--color-gold);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.2;
    margin-bottom: 0;
    width: auto;
    border-bottom: 0;
    padding-bottom: 0;
  }
  /* Divider (v132): clean positive margins, now that the grid gap
     is gone. 4px above, 4px below — the label, divider, and white
     statement now form a tightly fused packet with no leftover
     grid-gap interference. */
  .cd-categories .cd-cat__label::after {
    content: "";
    display: block;
    width: 44%;
    height: 1px;
    background: rgba(245, 243, 238, 0.12);
    margin-top: 4px;
    margin-bottom: 4px;
  }
  /* Persuasive statement — supporting interpretive tension (v84).
     Slightly lighter weight than the label so the label clearly
     leads the hierarchy. Statement retains emotional clarity but
     functions as sharpening language, not the focal point. */
  .cd-categories .cd-cat__primary {
    grid-column: 1;
    color: var(--color-white);
    font-size: 0.95rem;
    line-height: 1.35;
    margin-bottom: 0;
    font-weight: 500;
  }
  /* Hide secondary (longer) copy on mobile — destination pages carry detail. */
  .cd-categories .cd-cat__secondary {
    display: none;
  }
  /* Trailing ellipsis on primary (v119) — creates "continued pressure"
     energy. Appended via pseudo-element; primaries are now single-clause
     in the HTML so this renders cleanly without line-clamp gymnastics.
     Desktop sees the full primary text (no ellipsis there — the secondary
     continues the thought directly). */
  .cd-categories .cd-cat__primary::after {
    content: "…";
  }
}


.page-cd .cd-baked,
.page-cd .cd-hotspots-overlay { display: none; }

/* =====================================================================
   CRIMINAL DEFENSE — MOBILE v187 rebuild.
   Mobile-only: the page becomes an 8-section baked flow with clickable
   hotspots over the Allegations (S3) and Special Case Types (S4) images.
   Desktop/tablet (>=641px) is unchanged — every rule here is inside the
   <=640px query and scoped to .page-cd.
   ===================================================================== */
@media (max-width: 640px) {
  /* ---- S3 ALLEGATIONS: hide the live category text, show baked + hotspots ---- */
  .page-cd #categories .cd-categories__inner {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
  }
  .page-cd #categories {
    display: block; min-height: 0; padding: 0; overflow: hidden; background: var(--color-black);
  }
  /* Suppress the dark reveal seam/veil over the baked top band. */
  .page-cd #categories.reveal-card--dark::before { display: none; }
  .page-cd #categories.reveal-card--dark { box-shadow: none; }

  /* ---- S4 hide #categories-2 entirely on mobile (its 2 categories are
       already represented in the single S3 allegations image) ---- */
  .page-cd #categories-2 { display: none !important; }

  /* ---- Baked image wrapper (S3) + hotspot layer ---- */
  .page-cd .cd-baked { position: relative; display: block; width: 100%; line-height: 0; }
  .page-cd .cd-baked img { display: block; width: 100%; height: auto; }

  /* Hotspots: absolutely positioned full-width strips driven by inline
     top/height %. Used both inside .cd-baked (S3) and in the overlay (S4). */
  .page-cd .cd-hotspot {
    position: absolute; left: 0; right: 0; display: block;
    /* top + height come from inline style per category/card */
  }

  /* ---- S4 SPECIAL: the baked image is the existing .cd-procedural__image
       picture (already shown on mobile). Lay the hotspot overlay on top. ---- */
  .page-cd #procedural { position: relative; }
  .page-cd .cd-hotspots-overlay {
    display: block;
    position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 3;
  }

  /* The closing-bridge baked image (S7) is already wired; nothing to add. */

  /* ---- v188 spacing fix: the new Marijuana DUI asset (cd-result2-mobile-v187)
       ends cleanly at "EVIDENCE SUPPRESSED" with no photographic tail, so the
       legacy -80px crop (about.css, added in v141 for the OLD asset) now clips
       the verdict and overlaps the transition. Reset it, and let the transition
       (S7) sit flush with no inherited paper padding. ---- */
  .page-cd #case-phoenix-dui .case-study__image { margin-bottom: 0 !important; }
  /* ---- v200: chapter-break margin removed entirely. #case-phoenix-dui now
       matches the About page exactly — continuous case-study stacking with the
       base .case-study hairline border-top (restored in about.css) as the only
       divider. No inter-section margin / void. ---- */
  .page-cd #cd-closing-bridge { padding: 0 !important; background: var(--color-paper); }
  .page-cd #cd-closing-bridge .cd-closing-bridge__baked {
    display: block; width: 100%; height: auto; object-fit: contain;
  }

  /* ---- S8 CTA (v207): replace the baked CTA image with the LIVE closing
       panel — identical to the Home/How mobile CTA (ref 5.jpg). The baked
       composition is hidden; the clipped live footer is revealed and styled
       as a full-viewport, vertically-centered panel. Desktop is untouched. ---- */
  .page-cd .cd-baked--cta { display: none !important; }

  .page-cd #footer.cta-footer {
    padding: 0 !important;
    background: var(--color-black);
    display: block;
    min-height: 0;
    overflow: hidden;
  }
  .page-cd #footer.reveal-card--dark::before { display: none; }

  /* Reveal the live footer (un-clip) and make the wrapper the centered,
     full-viewport flex column that holds the composition. */
  .page-cd #footer .cta-footer__live {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--space-8) var(--space-4);
  }

  /* Order: CTA -> practice nav -> rule -> brand (matches 5.jpg). */
  .page-cd #footer .cta-footer__cta   { order: 1; gap: var(--space-8); margin-bottom: var(--space-12); }
  .page-cd #footer .cta-footer__nav   { order: 2; }
  .page-cd #footer .cta-footer__rule  { order: 3; }
  .page-cd #footer .cta-footer__brand { order: 4; margin-bottom: 0; }

  .page-cd .cta-footer__mark { width: 58px; margin-bottom: var(--space-1); }

  /* Headline — swap CD's two-line desktop thesis for the single gold line. */
  .page-cd .cta-thesis-desktop { display: none; }
  .page-cd .cta-thesis-mobile { display: block; }
  .page-cd .cta-footer__thesis {
    font-size: 5.8vw;
    line-height: 1.05;
    letter-spacing: var(--tracking-display);
  }
  .page-cd .cta-footer__thesis .line { white-space: nowrap; }

  /* Button — mobile label reads "Start Your Defense". */
  .page-cd .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-cd .cta-footer__button svg { width: 18px; height: 18px; }
  .page-cd .btn-label-default { display: none; }
  .page-cd .btn-label-mobile { display: inline; }

  /* Practice nav: collapse the four-link footer nav to the two practice
     areas divided by a real pipe. */
  .page-cd .cta-footer__nav { margin-bottom: var(--space-6); flex-wrap: nowrap; gap: 1rem; font-size: 0.78rem; }
  .page-cd .cta-footer__nav a { white-space: nowrap; }
  .page-cd .cta-footer__nav-about,
  .page-cd .cta-footer__nav-insights,
  .page-cd .cta-footer__nav .cta-footer__sep { display: none; }
  .page-cd .cta-footer__nav-pipe { display: inline; color: rgba(235, 235, 235, 0.4); font-weight: 300; }

  /* Hairline rule, then a quieter wordmark + contact (secondary close). */
  .page-cd .cta-footer__rule {
    display: block;
    width: 100%;
    max-width: 20rem;
    border: 0;
    border-top: 1px solid rgba(235, 235, 235, 0.18);
    margin: 0 auto var(--space-7);
  }
  .page-cd .cta-footer__wordmark { font-size: 1.1rem; gap: 0.5rem; margin-bottom: var(--space-3); }
  .page-cd .cta-footer__wordmark img { width: 30px; }
  .page-cd .cta-footer__phone { margin-bottom: 0.45rem; }
  .page-cd .cta-footer__address-sep { display: none; }
  .page-cd .cta-footer__address-l1,
  .page-cd .cta-footer__address-l2 { display: block; }
}


/* =====================================================================
   MOBILE ETHICS REBUILD (v208) — five-part baked narrative.
   On mobile the Ethics page reads as one continuous argument:
     #hero (1) -> #reputation (2) -> #bio (3) -> #conclusion (4) -> CTA
   The desktop/tablet flow (reframe / method / process / pivot / issues /
   advisory) is untouched; those live sections are removed from the mobile
   flow only. Everything is scoped to .page-ethics. Placed at the end of
   the file so these rules win over the earlier ethics-hero mobile rules
   they intentionally override.
   ===================================================================== */

/* Mobile-only helpers — hidden on desktop (footer/hero untouched there),
   revealed only on mobile. */
.page-ethics .ethics-mobile-panel { display: none; }
.page-ethics .ethics-bio-baked { display: none; }
.page-ethics .cta-thesis-mobile { display: none; }
.page-ethics .btn-label-mobile { display: none; }
.page-ethics .cta-footer__nav-pipe { display: none; }
.page-ethics .cta-footer__rule { display: none; }

@media (max-width: 640px) {
  /* ---- HERO: baked composition (override the live cinematic overlay) ---- */
  .page-ethics .page-hero--ethics {
    height: auto;
    overflow: hidden;
    padding-top: 16px;
    background: var(--color-black);
  }
  .page-ethics .page-hero--ethics .page-hero__sticky {
    height: auto;
    position: static;
    padding: 0;
  }
  .page-ethics .page-hero--ethics .page-hero__image { position: relative; inset: auto; }
  .page-ethics .page-hero--ethics .page-hero__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
  }
  .page-ethics .page-hero--ethics .page-hero__overlay { display: none; }
  /* Live hero copy: kept in DOM, visually hidden (baked image is what shows). */
  .page-ethics .page-hero--ethics .page-hero__content {
    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; right: auto; bottom: auto; transform: none;
  }
  .page-ethics .page-hero--ethics .page-hero__cta { display: none; }

  /* ---- Remove the live middle sections from the mobile flow. ---- */
  .page-ethics #reframe,
  .page-ethics #method,
  .page-ethics #process,
  .page-ethics #pivot,
  .page-ethics #issues,
  .page-ethics #advisory { display: none !important; }

  /* ---- New mobile-only baked panels (reputation + conclusion). ---- */
  .page-ethics .ethics-mobile-panel {
    display: block;
    line-height: 0;
    background: var(--color-paper);
  }
  .page-ethics .ethics-mobile-panel img { display: block; width: 100%; height: auto; }

  /* ---- BIO: hide the live text + portrait, show the baked composition. ---- */
  .page-ethics #bio { display: block; min-height: 0; padding: 0; overflow: hidden; background: var(--color-black); }
  .page-ethics #bio.reveal-card--dark::before { display: none; }
  .page-ethics #bio .bio-section__inner { display: none; }
  .page-ethics .ethics-bio-baked { display: block; width: 100%; height: auto; }

  /* ---- CTA: full-viewport live closing panel (ref 5.jpg). Ethics copy —
       DON'T LET THE ASSUMPTION / BECOME THE RESULT, Start Your Defense,
       CRIMINAL DEFENSE | ETHICS DEFENSE — shows on mobile only; desktop keeps
       WHAT ISN'T ADDRESSED / Take Control Now / the four-link nav. ---- */
  .page-ethics #footer.cta-footer {
    min-height: 100vh !important;
    min-height: 100svh !important;
    padding: var(--space-8) var(--space-4);
  }
  .page-ethics #footer.reveal-card--dark::before { display: none; }

  .page-ethics #footer .cta-footer__cta   { order: 1; gap: var(--space-8); margin-bottom: var(--space-12); }
  .page-ethics #footer .cta-footer__nav   { order: 2; }
  .page-ethics #footer .cta-footer__rule  { order: 3; }
  .page-ethics #footer .cta-footer__brand { order: 4; margin-bottom: 0; }

  .page-ethics .cta-footer__mark { width: 58px; margin-bottom: var(--space-1); }

  /* Headline — two lines; swap the desktop thesis for the mobile copy. */
  .page-ethics .cta-thesis-desktop { display: none; }
  .page-ethics .cta-thesis-mobile { display: block; }
  .page-ethics .cta-footer__thesis {
    font-size: 5.2vw;
    line-height: 1.32;
    letter-spacing: var(--tracking-display);
  }
  .page-ethics .cta-footer__thesis .line { white-space: nowrap; }

  /* Button — mobile label reads "Start Your Defense". */
  .page-ethics .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-ethics .cta-footer__button svg { width: 18px; height: 18px; }
  .page-ethics .btn-label-default { display: none; }
  .page-ethics .btn-label-mobile { display: inline; }

  /* Practice nav: collapse the four-link footer nav to the two practice areas. */
  .page-ethics .cta-footer__nav { margin-bottom: var(--space-6); flex-wrap: nowrap; gap: 1rem; font-size: 0.78rem; }
  .page-ethics .cta-footer__nav a { white-space: nowrap; }
  .page-ethics .cta-footer__nav-about,
  .page-ethics .cta-footer__nav-insights,
  .page-ethics .cta-footer__nav .cta-footer__sep { display: none; }
  .page-ethics .cta-footer__nav-pipe { display: inline; color: rgba(235, 235, 235, 0.4); font-weight: 300; }

  /* Hairline rule, then a quieter wordmark + contact (secondary close). */
  .page-ethics .cta-footer__rule {
    display: block;
    width: 100%;
    max-width: 20rem;
    border: 0;
    border-top: 1px solid rgba(235, 235, 235, 0.18);
    margin: 0 auto var(--space-7);
  }
  .page-ethics .cta-footer__wordmark { font-size: 1.1rem; gap: 0.5rem; margin-bottom: var(--space-3); }
  .page-ethics .cta-footer__wordmark img { width: 30px; }
  .page-ethics .cta-footer__phone { margin-bottom: 0.45rem; }
  .page-ethics .cta-footer__address-sep { display: none; }
  .page-ethics .cta-footer__address-l1,
  .page-ethics .cta-footer__address-l2 { display: block; }
}