/* =====================================================================
   KOPLOW DEFENSE — About page styles
   Layered on top of style.css. About lives entirely in the dark world.
   ===================================================================== */

/* When the About page is loaded, the body has page-about so we can
   make the nav permanently dark from the top (no over-hero transparency). */
.nav--always-dark {
  background: var(--color-black);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Indicate current page in nav */
.nav__links a.is-current {
  color: var(--color-gold);
  opacity: 1;
}

/* ---------------------------------------------------------------------
   HERO  —  Keys and locks. Atmospheric.
   The image fills the viewport; content sits left-aligned on top.
   Uses the same sticky-scroll pattern as homepage hero (the section
   is tall, the inner sticks while you scroll, content fades on exit).
   --------------------------------------------------------------------- */
.about-hero {
  position: relative;
  height: 180vh; /* slightly shorter than homepage hero — less to scrub through */
  background: var(--color-black);
}

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

.about-hero__image {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.about-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Subtle parallax zoom on scroll — JS will adjust */
  transform: scale(1.05);
  will-change: transform;
}

/* Vignette / contrast layer so the headline reads against the image */
.about-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.15) 75%, rgba(0,0,0,0.05) 100%);
  z-index: 2;
}

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

.about-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;
}
.about-hero__headline .line {
  display: block;
}
.about-hero__headline .line--gold {
  color: var(--color-gold);
}

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

.about-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;
}
.about-hero__prompt svg {
  width: 24px;
  height: 14px;
  animation: about-chevron 2.2s ease-in-out infinite;
}
@keyframes about-chevron {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ---------------------------------------------------------------------
   PROBLEM  —  Pure black. All text.
   "It doesn't move because it's fair. It moves when it has to."
   --------------------------------------------------------------------- */
/* ==================================================================
   ABOUT PROBLEM — Finalized baked-in-image composition.
   Both desktop and mobile use art-directed JPGs with typography
   baked in (IT DOESN'T MOVE BECAUSE IT'S FAIR / IT MOVES WHEN
   PRESSURE LEAVES NO CHOICE / Until then, it doesn't move. /
   chevron). The live HTML <h2> and <p> are preserved in the DOM
   for SEO and screen readers but visually hidden so the baked-in
   composition is what users see.
   ================================================================== */
.about-problem {
  background: var(--color-black);
  color: var(--color-white);
  display: block;
  padding: 0;
}
.about-problem__image {
  display: block;
  width: 100%;
}
.about-problem__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
}
/* Live text: visually hidden but accessible to screen readers
   and SEO. The baked-in image typography is what users see. */
.about-problem__inner {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.about-problem__statement,
.about-problem__statement .line,
.about-problem__follow,
.about-problem__line,
.about-problem__line--strong {
  /* Inherit hidden state from __inner. No visual styling needed. */
}

/* Universal reveal mechanism for sections — see style.css */


/* ---------------------------------------------------------------------
   METHOD  —  Image right, text left.
   The sharp point pressing into a surface.
   --------------------------------------------------------------------- */
/* ==================================================================
   ABOUT METHOD — Finalized baked-in-image composition.
   Both desktop and mobile use art-directed JPGs with typography
   baked in (TACTICAL PRESSURE / CREATES MOVEMENT, three-beat list
   with gold verbs, closing line, chevron, blade). The live HTML
   content is preserved in the DOM for SEO and screen readers but
   visually hidden so the baked-in composition is what users see.
   ================================================================== */
.about-method {
  background: var(--color-black);
  color: var(--color-white);
  display: block;
  padding: 0;
  overflow: hidden;
}
.about-method__image {
  display: block;
  width: 100%;
  position: relative;
  inset: auto;
}
.about-method__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
  opacity: 1;
}
/* Live text: visually hidden but accessible to screen readers
   and SEO. The baked-in image typography is what users see. */
.about-method__content {
  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;
  background: none;
}

.about-method__title {
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  letter-spacing: 0.06em;
  line-height: 1.15;
  color: var(--color-white);
  margin-bottom: var(--space-8);
}
.about-method__title .line {
  display: block;
}

.about-method__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
}
.about-method__list li {
  font-size: clamp(1.3rem, 1.85vw, 1.65rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-white);
  padding: var(--space-1) 0;
}

.about-method__close {
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-weight: 500;
  color: var(--color-white);
  line-height: 1.5;
}

/* ---------------------------------------------------------------------
   BRIDGE  —  Paper-background punctuation between the dark
   philosophy sections (hero/problem/method) and the dark proof
   sections (case studies). The tonal pivot signals the page's
   movement from doctrine to evidence. Pure live typography on
   the paper background — no baked-in imagery, just the spur
   ornament, headline, sub, and chevron.
   --------------------------------------------------------------------- */
.about-bridge {
  background: var(--color-paper);
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  /* v159: bottom padding split from top. Top stays --space-16 (128px)
     to preserve the atmospheric entry into the bridge and the divider
     pacing above. Bottom trimmed to --space-12 (96px) for slightly
     tighter narrative momentum into the first case study now that the
     "This is Where Cases Turn" proof-intro section is removed. */
  padding: var(--space-16) var(--space-6) var(--space-12);
}
.about-bridge__inner {
  text-align: center;
  max-width: 720px;
}
/* Bridge mobile baked composition (v165): hidden by default on
   desktop/tablet — there, the live typography (spur + h2 + sub) is the
   presentation. Shown only inside the max-width:640px block. Bridge-
   specific by design; not part of the dark case-study baked system. */
.about-bridge__baked {
  display: none;
}
.about-bridge__mark {
  width: 48px;
  height: auto;
  margin: 0 auto var(--space-8);
  /* Spur is a dark asset; on paper it reads natively without any
     filter. If it were a light asset designed for dark backgrounds
     we'd invert here. */
}
.about-bridge__title {
  font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  letter-spacing: var(--tracking-wide);
  color: var(--color-black);
  margin-bottom: var(--space-6);
  line-height: 1.15;
}
.about-bridge__sub {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: rgba(10, 10, 10, 0.7);
  letter-spacing: 0.03em;
  margin-bottom: var(--space-12);
}
/* Chevron — continuation cue into case studies. Same SVG pattern
   as the page-hero chevrons site-wide; styled dark on paper. */
.about-bridge__prompt {
  width: 24px;
  height: 14px;
  margin: 0 auto;
  color: rgba(10, 10, 10, 0.5);
}
.about-bridge__prompt svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------------------------------------------------------------------
   CASE STUDY  —  The recurring template.
   Text-left + Image-right two-column on desktop.
   Same structure across all four cases.
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   CASE STUDY  —  Image fills the section as backdrop, text overlays it.
   Uses the same pattern as .about-method (Tactical Pressure section):
   - .case-study__image is positioned absolute to .case-study (the
     section itself), so it bleeds the full viewport width
   - .case-study__inner sits above with z-index, contains text
   - The dark gradient veil lives on .case-study so it spans the
     full section width — text on left stays readable, image shows
     through on the right
   No grids, no margin tricks, no masks. Image is the section's
   background; text is a foreground overlay with a gradient for
   readability.
   --------------------------------------------------------------------- */
/* Mobile-only case study (#case-am, Attempted Murder, v164): hidden by
   default on all breakpoints, re-shown only inside the max-width:640px
   block. Hidden-by-default (rather than min-width hide) so it can never
   leak onto desktop/tablet, mirroring the cd-divider pattern in pages.css.
   Desktop/tablet keep their 4-case sequence. */
.case-study--mobile-only {
  display: none;
}

.case-study {
  position: relative;
  background: var(--color-black);
  color: var(--color-white);
  overflow: hidden;
  /* Dark veil over the left side for text readability. Fades to
     transparent on the right so the photo shows through there.
     Lives on the section so it bleeds full viewport width, not
     constrained to the inner's max-width. The ::after pseudo-element
     sits between the image (z:1) and the inner content (z:3). */
}
.case-study::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Heavier dark zone on the left so the text reads cleanly against
     bright photo content. Stays fully opaque through the text column
     (left ~50%), then transitions out across the right half. */
  background: linear-gradient(to right,
    rgba(0,0,0,0.97) 0%,
    rgba(0,0,0,0.95) 30%,
    rgba(0,0,0,0.75) 55%,
    rgba(0,0,0,0.3) 80%,
    rgba(0,0,0,0) 100%);
}

.case-study__image {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.case-study__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the photo to its right side. The source assets have their
     subjects (vial, arrow, crime tape) in the right portion of the
     image; this keeps them in frame while extra room spills left,
     under the dark veil. */
  object-position: right center;
  opacity: 0.7;
  border-radius: 0;
}

.case-study__inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  /* Match other reveal-cards: full viewport height */
  min-height: 100vh;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
}

.case-study__text {
  /* Text occupies the left half. Constrained width keeps lines
     readable and ensures text sits in the dark-veil zone, not
     where the image shows through. */
  max-width: 50%;
  padding-left: 4%;
}

.case-study__charge {
  font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  letter-spacing: var(--tracking-wide);
  color: var(--color-white);
  margin-bottom: var(--space-8);
  line-height: 1.2;
}
.case-study__qualifier {
  display: block;
  margin-top: var(--space-1);
  font-weight: 400;
  font-size: 0.85em;
  letter-spacing: 0.02em;
  color: rgba(245, 243, 238, 0.6);
}
.case-study__qualifier--gravitas {
  color: var(--color-white);
  opacity: 0.85;
  letter-spacing: 0.04em;
}

.case-study__fields {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* ---------------------------------------------------------------------
   Case study field treatment (unified v85)
   Single canonical format across the site:
   - Stacked layout: gold field label on its own line, answer below
   - Field label: gold, smaller, structured evidence marker
   - Answer: white, normal weight, readable body
   - Result field: standalone bold white verdict line, no label
   This format creates forensic vertical rhythm — each field reads
   as its own evidence beat rather than dense paragraph text.
   --------------------------------------------------------------------- */
.case-study__field dt {
  display: block;
  font-weight: 600;
  color: var(--color-gold);
  margin: 0 0 var(--space-1) 0;
  font-size: clamp(0.92rem, 1.2vw, 1.02rem);
  letter-spacing: 0.02em;
}
.case-study__field dd {
  display: block;
  margin: 0;
  color: rgba(245, 243, 238, 0.85);
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  line-height: 1.55;
}
.case-study__field--result {
  margin-top: var(--space-6);
}
/* Result field renders as a standalone verdict line — no visible
   "Result:" label, just the verdict in bold white. Any <dt> in the
   markup is hidden visually but accessible to screen readers via
   the visually-hidden class. About strips the dt entirely; CD uses
   class="visually-hidden". Both render identically. */
.case-study__field--result dt:not(.visually-hidden) {
  display: none;
}
.case-study__field--result dd {
  display: block;
  margin: 0;
  color: var(--color-white);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------
   BIO  —  Portrait left, text right.
   --------------------------------------------------------------------- */
/* Mobile-only baked composition. Hidden on desktop/tablet; the live
   two-column .about-bio__inner renders there unchanged. Shown only at
   the ≤640px mobile breakpoint (see mobile block below). */
.about-bio__baked {
  display: none;
}

.about-bio {
  background: var(--color-black);
  color: var(--color-white);
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  padding-top: var(--space-8);
}

.about-bio__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;
}

.about-bio__portrait {
  position: relative;
}
.about-bio__portrait img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  /* Crop to portrait orientation roughly */
  aspect-ratio: 4/5;
  object-position: left center;
}

.about-bio__text {
  padding-right: 4%;
}

.about-bio__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-6);
}

.about-bio__quote {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.45;
  color: var(--color-white);
  margin-bottom: var(--space-6);
}
.about-bio__quote p {
  margin: 0;
}

.about-bio__paragraph {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: rgba(245, 243, 238, 0.78);
  margin-bottom: var(--space-6);
}
.about-bio__paragraph p {
  margin: 0;
}

.about-bio__credentials {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: rgba(245, 243, 238, 0.7);
}
.about-bio__credentials p {
  margin: 0 0 var(--space-2);
}
.about-bio__cred-lead {
  color: var(--color-gold) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------
   CTA — page-specific title formatting (two-line, second line gold)
   --------------------------------------------------------------------- */
/* About-page CTA — two-line thesis: first line white, second line gold.
   Overrides the homepage single-line all-gold treatment.
   Same pattern applies to Ethics page (two-line thesis). */
.page-about .cta-footer__thesis,
.page-ethics .cta-footer__thesis {
  color: var(--color-white);
}
.cta-footer__thesis .line {
  display: block;
}
.cta-footer__thesis .line--gold {
  color: var(--color-gold);
}


/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */

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

  .about-method__content {
    margin-left: 5%;
    max-width: 90%;
    background: linear-gradient(to right,
      rgba(0,0,0,0.92) 0%,
      rgba(0,0,0,0.7) 80%,
      rgba(0,0,0,0.3) 100%);
  }

  /* Case study tablet: same overlay pattern as desktop, just adjust
     veil to extend further right since text wraps wider on narrower
     viewports. Image still fills section as backdrop. */
  .case-study__inner {
    padding: var(--space-10) var(--space-4);
  }
  /* ================================================================
     CASE STUDY MOBILE COMPOSITION (v86)
     Forensic cinematic evidence panel. Imagery breathes at full
     presence; gradient handles legibility through composition.
     Same visual world as the hero sections. The image continues
     through the lower portion of the section so the case study
     reads as a continuous atmospheric panel rather than image-top
     fading to flat-black-bottom.
     ================================================================ */
  .case-study {
    /* Hairline top border — quiet editorial section break so the
       case study reads as a framed artifact, not section continuation. */
    border-top: 1px solid rgba(245, 243, 238, 0.12);
    /* Tighter inner padding for mobile — image presence is doing
       the atmospheric work; the section doesn't need oversized
       breathing on top of that. */
    padding: 0;
  }
  .case-study__inner {
    padding: var(--space-8) var(--space-4);
  }
  /* Composition gradient: deepest in the lower-left text zone,
     fading through the diagonal so the image's atmospheric upper
     and right zones are present without being overwritten. The
     gradient is tuned so atmosphere extends fully through the
     lower portion of the section — no dark tail flattening at
     the bottom. */
  .case-study::after {
    background:
      /* Horizontal: deep dark in the text column, fading right */
      linear-gradient(to right,
        rgba(0,0,0,0.8) 0%,
        rgba(0,0,0,0.5) 55%,
        rgba(0,0,0,0.15) 85%,
        rgba(0,0,0,0.08) 100%),
      /* Diagonal: anchors composition — dark lower-left, light upper-right.
         Bottom stops eased so atmospheric image carries through the
         lower half rather than fading to black. */
      linear-gradient(to top right,
        rgba(0,0,0,0.8) 0%,
        rgba(0,0,0,0.45) 50%,
        rgba(0,0,0,0.12) 80%,
        rgba(0,0,0,0) 100%);
  }
  /* Image at full presence — forensic atmospheric backdrop, not hint. */
  .case-study__image img {
    opacity: 1;
  }
  /* Charge headline stays white on mobile — gold competed with the
     richer atmospheric imagery and lost headline authority. White
     restores authority while the hairline border, imagery, and
     verdict line still carry the case-file identity. */
  .case-study__charge {
    color: var(--color-white);
  }
  .case-study__qualifier--gravitas {
    color: rgba(245, 243, 238, 0.85);
  }
  .case-study__text {
    padding-left: 0;
    max-width: 75%;
  }

  /* ================================================================
     BAKED MOBILE COMPOSITIONS — case studies using finalized
     art-directed images on mobile (text/verdict/spur baked in).
     Same model as .page-hero--cd. Currently: #case-vh (vehicular,
     v162), #case-scottsdale (v160), #case-thc (marijuana, v163),
     #case-am (attempted murder, mobile-only, v164),
     #case-neghom (negligent homicide, v168).
     All four desktop case studies now use baked images on mobile (plus
     the mobile-only #case-am); the live-text-over-photo treatment is no
     longer used by any case on mobile — see note at end of block.
     Desktop/tablet unaffected — rules live only in this max-width block.
     ================================================================ */
  /* Section: let the baked image set its own height; no forced inner
     min-height or padding competing with the composition. */
  #case-vh,
  #case-scottsdale,
  #case-thc,
  #case-am,
  #case-narcotics,
  #case-neghom {
    padding: 0;
  }
  /* Re-show the mobile-only case study (hidden by default on larger
     screens) now that we're inside the mobile breakpoint. */
  #case-am.case-study--mobile-only,
  #case-narcotics.case-study--mobile-only {
    display: block;
  }
  #case-vh .case-study__inner,
  #case-scottsdale .case-study__inner,
  #case-thc .case-study__inner,
  #case-am .case-study__inner,
  #case-neghom .case-study__inner {
    display: block;
    min-height: 0;
    padding: 0;
  }
  /* Image renders edge-to-edge at natural aspect, no crop, no filter. */
  #case-vh .case-study__image,
  #case-scottsdale .case-study__image,
  #case-thc .case-study__image,
  #case-am .case-study__image,
  #case-narcotics .case-study__image,
  #case-neghom .case-study__image {
    position: relative;
    inset: auto;
    width: 100%;
  }
  #case-vh .case-study__image img,
  #case-scottsdale .case-study__image img,
  #case-thc .case-study__image img,
  #case-am .case-study__image img,
  #case-narcotics .case-study__image img,
  #case-neghom .case-study__image img {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    opacity: 1;
    display: block;
  }
  /* Kill the shared dark veil — composition is baked. */
  #case-vh.case-study::after,
  #case-scottsdale.case-study::after,
  #case-thc.case-study::after,
  #case-am.case-study::after,
  #case-narcotics.case-study::after,
  #case-neghom.case-study::after {
    display: none;
    background: none;
  }
  /* Suppress the .reveal-card--dark overlays that otherwise dim the
     baked composition's top zone (v161): a 160px rgba(0,0,0,0.85)
     top-fade ::before and a deep dark seam box-shadow. The baked image
     handles its own atmosphere; these only muddy it. No color/filter
     applied to the image — overlays removed only. Same fix as
     .page-hero--cd. */
  #case-vh.reveal-card--dark::before,
  #case-scottsdale.reveal-card--dark::before,
  #case-thc.reveal-card--dark::before,
  #case-am.reveal-card--dark::before,
  #case-narcotics.reveal-card--dark::before,
  #case-neghom.reveal-card--dark::before,
  #bio.reveal-card--dark::before,
  #method.reveal-card--dark::before {
    display: none;
  }
  #case-vh.reveal-card--dark,
  #case-scottsdale.reveal-card--dark,
  #case-thc.reveal-card--dark,
  #case-am.reveal-card--dark,
  #case-narcotics.reveal-card--dark,
  #case-neghom.reveal-card--dark,
  #bio.reveal-card--dark,
  #method.reveal-card--dark {
    box-shadow: none;
  }
  /* Live text: kept in DOM for SEO/accessibility, visually hidden.
     The baked-in image typography is what users see. */
  #case-vh .case-study__text,
  #case-scottsdale .case-study__text,
  #case-thc .case-study__text,
  #case-am .case-study__text,
  #case-neghom .case-study__text {
    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;
  }

  /* ================================================================
     ATTEMPTED MURDER — case-specific atmospheric integration (v88)
     The cd-case-am image is structurally different from case-thc:
     the lit subject (fingertip on cracked surface) is small and
     center-right; the rest of the frame is uniform dark texture.
     The default right-center crop pushes the subject toward the
     edge, and the default heavy gradient overwrites the image's
     natural atmosphere. This case-specific override pulls the
     subject into a more compositionally useful position and
     lightens the gradient so the textured environment carries
     through. Result: same cinematic language as case-thc, but
     with the darker emotional tone the case demands.
     ================================================================ */
  #case-attempted-murder .case-study__image img {
    /* Center-weighted crop pulls the cracked-surface subject and
       fingertip into the visible composition zone rather than
       getting cut off at the right edge. */
    object-position: 60% 45%;
  }
  #case-attempted-murder.case-study::after {
    background:
      /* Horizontal: lighter than default — leverages the image's
         own dark zones rather than overwriting them */
      linear-gradient(to right,
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0.4) 55%,
        rgba(0,0,0,0.1) 85%,
        rgba(0,0,0,0) 100%),
      /* Diagonal: softer composition anchor — environment breathes
         through more visibly while text remains legible */
      linear-gradient(to top right,
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0.35) 50%,
        rgba(0,0,0,0.08) 80%,
        rgba(0,0,0,0) 100%);
  }

  .about-bio__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: var(--space-10) var(--space-4);
  }
  .about-bio__portrait {
    max-width: 480px;
    margin: 0 auto;
  }
  .about-bio__portrait img { aspect-ratio: 4/4; }
  .about-bio__text { padding-right: 0; }
}

/* Mobile */
@media (max-width: 640px) {
  /* ================================================================
     ABOUT HERO — Mobile (v101)
     Image is a finalized art-directed portrait composition with
     eyebrow (ABOUT), headline (WHERE OTHERS SEE LOCKS. / WE SEE
     KEYS.), sub (It's not just pressure. / It's where it's applied.),
     and chevron baked in. Live HTML kept for SEO/accessibility but
     visually hidden. No overlay, no object-fit:cover scaling, no
     responsive cropping. Image displays at natural portrait aspect.
     ================================================================ */
  .about-hero {
    height: auto;
    overflow: hidden;
    /* Push image below the fixed nav so the top of the composition
       isn't clipped. Background stays black so the padded zone
       reads as continuous with the nav. */
    padding-top: 16px;
    background: var(--color-black);
  }
  .about-hero__sticky {
    height: auto;
    position: static;
  }
  .about-hero__image {
    position: relative;
    inset: auto;
  }
  .about-hero__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    transform: none;
  }
  /* No overlay — composition baked into image. */
  .about-hero__overlay {
    display: none;
  }
  /* Live content: visually hidden but accessible to screen readers
     and SEO. The baked-in image typography is what users see. */
  .about-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;
    max-width: none;
  }
  /* Down-arrow: baked into image; hide live SVG to avoid double
     arrow and lingering arrow during scroll. */
  .about-hero__prompt {
    display: none;
  }

  .about-method__content {
    margin-left: 0;
    padding: var(--space-10) var(--space-3);
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.6) 0%,
      rgba(0,0,0,0.9) 100%);
  }
  .about-method__title { font-size: 1.55rem; }

  /* ================================================================
     BRIDGE — mobile baked composition (v167)
     The baked asset carries its own internal top/bottom breathing room,
     so the wrapper adds almost none. v165/166 kept v159's content-block
     padding (96px top / 80px bottom), which read as dead paper space
     above the spur and an over-decompressed gap before the first case
     study. Cut to near-zero: the asset now defines the section height
     (full-bleed cinematic bridge, not a padded image block). Small
     residual top/bottom only to keep clean tonal seams against the dark
     sections above (hero) and below (first case study). Paper background
     and the asset's own composition are untouched. min-height is already
     auto on mobile (style.css .reveal-card--short override), so the
     section hugs the image with no flex leftover to distribute. */
  .about-bridge {
    padding: var(--space-1) 0 var(--space-2);
    display: block;
  }
  /* Live typography: kept in DOM for SEO/accessibility, visually hidden. */
  .about-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;
  }
  /* Baked composition: shown on mobile, edge-to-edge, natural aspect,
     no crop, no filter, no overlay. The asset defines section height. */
  .about-bridge__baked {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* ================================================================
     BIO — Mobile baked composition (v173)
     The finalized asset is the entire panel: LAWRENCE KOPLOW name,
     "Former prosecutor" designation, first-person body copy, gold
     highlighted statements, and portrait — all baked into one
     cinematic block. Replaces the live two-column portrait + text
     treatment on mobile only. Part of the dark baked-image system
     (same model as the case-study portraits). The asset carries its
     own internal breathing room, so the section adds none — it hugs
     the image and reads continuous with the dark sections above (last
     case study) and below (CTA/footer), preserving the surrounding
     rhythm and the spur divider that follows.
     Desktop and tablet (≥641px) UNTOUCHED — the live two-column bio
     continues to render as-is.
     ================================================================ */
  .about-bio {
    /* Baked image is the whole panel — dismantle the flex two-column
       layout and section padding so the asset defines its own height. */
    display: block;
    padding: 0;
  }
  /* Live HTML (name, portrait, body copy): visually hidden but kept
     accessible to screen readers and SEO. The baked-image typography is
     what users see on mobile. */
  .about-bio__inner {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    min-height: 0;
  }
  /* Baked composition: shown on mobile, full-width, natural portrait
     aspect, no crop, no overlay, no filter. */
  .about-bio__baked {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .case-study__charge { font-size: 1.2rem; }
  .case-study__inner {
    padding: var(--space-10) var(--space-3);
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.7) 0%,
      rgba(0,0,0,0.92) 100%);
  }
  .case-study__text { max-width: 100%; padding-left: 0; }

  /* ================================================================
     ATTEMPTED MURDER CASE STUDY — Mobile (v118) baked-portrait
     composition. Image is a finalized art-directed portrait
     composition with ATTEMPTED MURDER label, Their Assumption /
     Pressure Point / What Broke framework, NOT GUILTY verdict, and
     disassembled handgun imagery all baked into a single unified
     cinematic proof-moment. Live HTML preserved in DOM for SEO/a11y
     but visually clipped on mobile.

     Scoped to #case-attempted-murder ONLY — the second case study
     (#case-phoenix-dui, Phoenix Marijuana DUI) continues to use the
     existing mobile composition system until its own baked portrait
     asset is delivered.

     Desktop and tablet (≥641px) UNTOUCHED — existing case-study card
     with live HTML and inline thumbnail continues to render as-is.
     ================================================================ */
  #case-attempted-murder {
    /* Dismantle the layered case-study composition — baked image
       is the entire panel. */
    border-top: 0;
    padding: 0;
  }
  /* Disable the dark gradient overlay (::after) — the baked image
     has its own composition; we don't want to overwrite it with
     the mobile case-study veil. */
  #case-attempted-murder.case-study::after {
    display: none;
  }
  /* Image: natural portrait aspect, no cropping, no opacity reduction. */
  #case-attempted-murder .case-study__image {
    position: relative;
    inset: auto;
    z-index: 1;
  }
  #case-attempted-murder .case-study__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    opacity: 1;
    /* Override the v88 object-position: 60% 45% crop — no longer
       relevant since we're displaying the asset at natural aspect
       rather than cropping it. */
  }
  /* Live HTML text: visually hidden but accessible to screen readers
     and SEO. The baked image typography is what users see on mobile. */
  #case-attempted-murder .case-study__inner {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    background: transparent;
    min-height: 0;
  }

  /* ================================================================
     CD CASE STUDIES — suppress shared dark veil + seam shadow (v191)
     The .reveal-card--dark::before top-fade (160px rgba(0,0,0,0.85))
     and the inherited top box-shadow darken the top zone of the baked
     posters (~18 luminance / ~45% on the headline), so the rendered
     headline stops matching the approved asset. The About case studies
     suppress both; these two CD sections were never added to that list.
     Approved baked assets are the source of truth — the overlays only
     muddy them. Same fix as #case-am / #case-thc above.
     ================================================================ */
  #case-attempted-murder.reveal-card--dark::before,
  #case-phoenix-dui.reveal-card--dark::before {
    display: none;
  }
  #case-attempted-murder.reveal-card--dark,
  #case-phoenix-dui.reveal-card--dark {
    box-shadow: none;
  }

  /* ================================================================
     CASE STUDY TRANSITION BAND — Mobile chapter break (v146).

     Sits between the Attempted Murder and Marijuana DUI baked case
     studies. The previous mental model treated this element as a
     "divider with padding." That was wrong. The correct model is:
     an intentional transition band — a moment of visual silence
     with internal rhythm — that happens to contain a centered glyph.

     The problem v145 left unsolved: both case study assets end and
     begin in near-pure-black photographic atmosphere. The eye read
     the entire sequence as a continuous black field with a faint
     glyph floating somewhere inside it — no perceptual beat, no
     chapter break. Adding more padding would have just been generic
     spacer escalation.

     The structural fix: a defined band with three explicit beats —
     exhale (clean black runway above the glyph), the glyph itself,
     inhale (clean black runway below the glyph). The eye registers
     this as a scene cut, not a section spacer.

     Rhythm:
       ┌──────────────────────────────┐
       │   ~56px clean black (exhale) │
       │         [ glyph ]            │
       │   ~56px clean black (inhale) │
       └──────────────────────────────┘
       total ≈ 134px

     Implementation: flexbox column with min-height. Flexbox is the
     right tool here because the centering is defined relative to
     the BAND, not the glyph — the band's identity is the structural
     unit, the glyph is its content. min-height (rather than fixed
     height) lets the band grow gracefully if the rendered glyph
     ever exceeds calculation; it will not shrink below the rhythm.

     Asset format: transparent PNG (cd-case-divider-v156.png) carrying
     only the spur and faded line tails. Width 70% / 320px max. No
     brightness filter, no animation, no glow, no enlargement. The
     glyph itself is correct as-is; only the environment changed.

     Specificity note (v150): rules prefixed with `html` to beat
     pages.css's `.cd-case-divider { display: none }` desktop
     default. pages.css loads AFTER about.css; both `.cd-case-divider`
     rules have identical specificity (0,1,0), so without the bump
     the later-loading desktop rule wins everywhere — including on
     mobile inside this media query. This is the root cause of why
     v145–v149 changes to the divider never appeared on the rendered
     mobile page: the divider was being hidden by pages.css the
     whole time. The CSS changes were live; the element was never
     painted.
     ================================================================ */
  html .cd-case-divider {
    /* Asymmetric padding (v153): refined from v152's 64/16 to 64/12.
       The 16px below-glyph CSS inhale was technically correct but felt
       slightly soft after the v147 asset crop already provided 89px of
       in-asset atmospheric inhale. Reducing CSS inhale by ~25% (to 12px)
       tightens chapter-entry timing without collapsing the breath:
         - padding-top 64px:  unchanged. Above feels right.
         - padding-bottom 12px: minimal CSS inhale; asset's atmospheric
           top supplies the rest before MARIJUANA DUI arrives.
       Net visual rhythm: ~64px above glyph, ~101px below glyph
       (12px CSS + 89px in-asset). The new chapter begins more promptly
       while the exhale above still completes the previous chapter. */
    display: block;
    background: var(--color-black);
    padding: 64px 0 12px 0;
    text-align: center;
    position: static;
    min-height: 0;
  }
  html .cd-case-divider__image {
    display: inline-block;
    width: 70%;
    max-width: 320px;
    height: auto;
  }

  /* ================================================================
     CASE STUDY: PHOENIX MARIJUANA DUI — Mobile (v138).
     Mirrors the v118 #case-attempted-murder baked-portrait pattern.
     Finalized art-directed portrait composition: MARIJUANA DUI charge
     label, Their Assumption / Pressure Point / What Broke framework
     with declarative copy variant, MARIJUANA EVIDENCE SUPPRESSED
     verdict, and analytical evidentiary imagery all baked into a
     single unified cinematic proof-moment.

     Pacing note (v138): a deliberate 56px decompression gap is
     added between #case-attempted-murder and #case-phoenix-dui via
     padding-top on the latter. Tonal continuity preserved (both
     sections remain pure black, no dividers/gradients), but the
     gap signals emotional reset between the violent/mechanical
     Attempted Murder frame and the scientific/evidentiary Marijuana
     DUI frame.

     Desktop and tablet (≥641px) UNTOUCHED — existing live HTML
     case-study card with inline thumbnail continues to render as-is.
     ================================================================ */
  #case-phoenix-dui {
    /* v200: restored the base .case-study hairline divider (was border-top:0)
       so the AM -> Marijuana DUI transition matches the About page exactly —
       continuous stacking, the 1px hairline as the only "thin divider," and no
       margin/void. (Replaces the removed .cd-case-divider element and the
       removed 4rem chapter-break margin.) */
    border-top: 1px solid rgba(245, 243, 238, 0.12);
    padding: 0;
  }
  #case-phoenix-dui.case-study::after {
    display: none;
  }
  #case-phoenix-dui .case-study__image {
    position: relative;
    inset: auto;
    z-index: 1;
    /* v141: pull the next section up by 80px on mobile. The baked
       MJ DUI asset extends ~120-150 rendered px below the
       MARIJUANA EVIDENCE SUPPRESSED verdict (showing the metal vise
       base + photographic continuation), which created a dead zone
       between the verdict and the CTA spur. Negative margin pulls
       the cta-footer up into the lower portion of the image —
       restrained crop (~80px) so the verdict remains visible with
       reasonable breath but the dead photographic tail is collapsed
       into the cta-footer's own padding. */
    margin-bottom: -80px;
  }
  #case-phoenix-dui .case-study__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    opacity: 1;
  }
  #case-phoenix-dui .case-study__inner {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    background: transparent;
    min-height: 0;
  }
}

/* =====================================================================
   ABOUT-PAGE CTA FOOTER (v176)
   Match the approved CTA composition: footer nav sits directly under the
   button, a thin divider, then the KOPLOW · DEFENSE lockup and address.
   Scoped to .page-about so other pages' footers are untouched. Footer
   stays live HTML (clickable button/nav) on every breakpoint.
   ===================================================================== */
.page-about .cta-footer__nav {
  margin-bottom: var(--space-8);
}
.page-about .cta-footer__rule {
  width: 100%;
  max-width: 760px;
  height: 1px;
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 0 var(--space-8);
}

/* About-page CTA headline (v177): on phones, scale to the viewport so the
   long line ("DON'T LET THE ASSUMPTION") fills the width on ONE line
   instead of wrapping — matching the proportions of the approved CTA
   composition. Live text is preserved (button/links stay interactive). */
@media (max-width: 640px) {
  .page-about .cta-footer__thesis {
    font-size: 4.3vw;
    line-height: 1.25;
  }
  .page-about .cta-footer__thesis .line {
    white-space: nowrap;
  }
}

/* About-page CTA spur (v178): the brand spur is a thin star; as a white-on-
   transparent PNG it downscales to gray on the black footer. Footer spurs now
   use spur-footer.png (white star baked on the footer's #050505), so the white
   core survives downscaling — matching the approved composition. Remove the top
   reveal veil and the mobile brightness hack so the baked background blends
   seamlessly into the footer. */
.page-about #footer.reveal-card--dark::before {
  display: none;
}
.page-about .cta-footer__mark {
  filter: none;
}

/* =====================================================================
   ABOUT-PAGE CTA — MOBILE COMPOSITION DENSITY (v180)
   Match the approved CTA composition (ABOUT_MOBILE_-_CTA): tight top
   cluster (star → headline → button), one generous breathing gap, then a
   compact footer block (nav → divider → wordmark → phone → address).
   Spacing only — typography, colors, button, hover, brand assets unchanged.
   Scoped to phones; desktop/tablet footer spacing untouched.
   ===================================================================== */
@media (max-width: 640px) {
  /* Section: less dead space top and (especially) bottom. */
  .page-about .cta-footer {
    padding: var(--space-7) var(--space-3) 3.75rem;
  }
  /* Top cluster: pull headline toward the star and the button toward the
     headline (button→nav gap below is kept generous, matching the asset). */
  .page-about .cta-footer__cta {
    gap: var(--space-3);
  }
  /* Footer block: collapse the oversized nav/divider/wordmark gaps. */
  .page-about .cta-footer__nav {
    margin-bottom: var(--space-2);
  }
  .page-about .cta-footer__rule {
    margin-bottom: var(--space-2);
  }
  .page-about .cta-footer__wordmark {
    margin-bottom: 0.7rem;
  }
  .page-about .cta-footer__phone {
    margin-bottom: 0.4rem;
  }
  /* Brand is the last child — its 4rem bottom margin was pure dead space. */
  .page-about .cta-footer__brand {
    margin-bottom: 0;
  }
}

/* =====================================================================
   ABOUT-PAGE CTA — SPACING & ADDRESS REFINEMENTS (v181), mobile only.
   1. More air between the two headline lines so the gold line reads as
      intentional (spacing only; type/weight/tracking/color unchanged).
   2. Pull the star slightly closer to the headline (spacing below the
      icon only; icon size/color/alignment unchanged).
   3. Address as a clean two-line mailing block (street / city-state-zip)
      so the ZIP never orphans. Desktop stays one inline line.
   ===================================================================== */
@media (max-width: 640px) {
  /* 1. +12px between headline lines */
  .page-about .cta-footer__thesis .line--gold {
    margin-top: 0.75rem;
  }
  /* 2. −10px below the star (tighter star↔headline grouping) */
  .page-about .cta-footer__mark {
    margin-bottom: -0.65rem;
  }
  /* 3. Two-line address on phones; hide the inline comma separator */
  .page-about .cta-footer__address-sep {
    display: none;
  }
  .page-about .cta-footer__address-l1,
  .page-about .cta-footer__address-l2 {
    display: block;
  }
}

/* =====================================================================
   ABOUT — DESKTOP (v229): the approved compositions displayed directly
   INSIDE the existing reveal-card system. Each reveal moment keeps its
   card wrapper, dark/paper chrome, box-shadow seam, and the data-reveal
   fade-up motion; only the CONTENT is swapped to the approved asset.
   The live text stays in the DOM (clipped) for SEO / screen readers.
   Tablet (641-1024) and mobile (<=640) are untouched.
   ===================================================================== */
.page-about .about-asset__img { display: none; }
.page-about .about-asset-hotspot { display: none; }
.page-about .about-desktop-only { display: none; }

@media (min-width: 641px) {
  /* the approved asset is the revealed content (data-reveal fades it up) */
  .page-about .about-asset__img { display: block; width: 100%; height: auto; margin: 0 auto; }

  /* clip every other child of an asset host: collapses the live layout and
     desktop photos while keeping live text in the DOM for SEO / a11y */
  .page-about .about-asset-host > :not(.about-asset__img):not(.about-asset-hotspot) {
    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;
    margin: -1px !important; padding: 0 !important; border: 0 !important;
  }

  /* host = asset height; full-bleed; keep the reveal-card seam + motion */
  .page-about .reveal-stack > .about-asset-host { min-height: 0; height: auto; padding: 0; display: block; }
  /* remove the dark top-fade veil (::before) AND the case-study legibility
     scrim (::after) so neither darkens the approved asset. The reveal-card
     seam is a box-shadow (not a pseudo-element), so it is preserved. */
  .page-about .about-asset-host::before,
  .page-about .about-asset-host::after { display: none !important; }

  /* new desktop-only reveal moment (We Challenge) */
  .page-about .about-desktop-only { display: block; }

  /* hero: show the asset directly (its parallax target + overlay are clipped) */
  .page-about #hero, .page-about #hero .about-hero__sticky {
    min-height: 0; height: auto; padding: 0; position: static;
  }

  /* hero asset shows directly: not a reveal-card (no data-reveal trigger), and
     not subject to the hero parallax scale (which would crop the composition) */
  .page-about #hero .about-asset__img { opacity: 1 !important; transform: none !important; }

  /* transparent hotspots over the CTA + the proof button */
  .page-about .about-asset-hotspot { display: block; position: absolute; z-index: 3; }
}