/* Port rule 7 (SPEC §4, LP-2026-08-18-012): opt out of the iOS text autosizer. */
html { -webkit-text-size-adjust: 100%; }

/* ========================================
       DESIGN TOKENS
       These map to brand_config in the DB.
       Swap these to preview different clients.
       ======================================== */
    :root {
      --color-primary: #1a3c5e;
      --color-primary-light: #264d73;
      --color-primary-dark: #0f2a45;
      --color-accent: #c4793a;
      --color-accent-hover: #a86530;
      --color-warm: #f8f5f1;
      --color-warm-mid: #eee8e0;
      --color-text: #2d3439;
      --color-text-muted: #5f6b73;
      --color-white: #ffffff;
      --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
      --font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 16px;
      --shadow-soft: 0 2px 20px rgba(26, 60, 94, 0.08);
      --shadow-card: 0 4px 24px rgba(26, 60, 94, 0.10);
      --max-w: 1120px;
      --max-w-narrow: 720px;
    }

    /* ========================================
       EDITORIAL QUIETUDE TOKENS
       Locked palette for the Editorial Quietude design system. Used by new
       blueprints (long-form-sales, minimal-one-pager) and the new section /
       CTA variants from the Variant + CTA Exploration workstreams.

       Path A scope (locked 2026-05-13): these tokens are NOT overridden by
       brand_config. Editorial Quietude variants render with the locked
       palette regardless of client brand. Existing blueprints (therapy-
       lead-gen, group-practice-intake, generic-landing) continue to use the
       --color-* tokens above.

       --sage-pressed precomputed from color-mix(in oklab, --sage 70%,
       --ink 30%) — kickoff doc canon, no runtime color-mix to dodge
       iOS <16.2 issues.
       ======================================== */
    :root {
      --sage: #7A8B6F;
      --sage-pressed: #5B6654;
      --sage-deep: #66775B;
      --sage-light: #89B19B;
      --paper: #F5F1EA;
      --paper-warm: #EEE8E0;
      --ink: #1A1A1A;
    }

    /* ========================================
       RESET & BASE
       ======================================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
    body {
      font-family: var(--font-body);
      color: var(--color-text);
      line-height: 1.65;
      font-size: 17px;
      background: var(--color-white);
      overflow-x: clip;
    }
    img { max-width: 100%; height: auto; display: block; }

    /* ========================================
       SECTION: HEADER
       ======================================== */
    .header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: var(--color-white);
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
      transition: box-shadow 0.3s ease;
    }

    .header--scrolled {
      box-shadow: 0 2px 16px rgba(26, 60, 94, 0.10);
    }

    .header__inner {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 24px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .header__logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: var(--color-primary);
    }

    .header__logo svg {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
    }

    .header__logo-text {
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1.2;
    }

    .header__nav {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .header__nav-link {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-text-muted);
      text-decoration: none;
      padding: 6px 14px;
      border-radius: var(--radius-sm);
      transition: color 0.2s ease, background 0.2s ease;
    }

    .header__nav-link:hover {
      color: var(--color-primary);
      background: var(--color-warm);
    }

    .header__nav-link--cta {
      color: var(--color-accent);
      font-weight: 600;
    }

    .header__nav-link--cta:hover {
      color: var(--color-accent-hover);
      background: rgba(196, 121, 58, 0.08);
    }

    .header__phone {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: var(--color-text);
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 500;
      padding: 8px 16px;
      border-radius: var(--radius-sm);
      transition: background 0.2s ease, color 0.2s ease;
    }

    .header__phone:hover {
      background: var(--color-warm);
      color: var(--color-primary);
    }

    .header__phone-icon {
      width: 18px;
      height: 18px;
      color: var(--color-accent);
      flex-shrink: 0;
    }

    .header__phone-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-right: 4px;
    }

    @media (max-width: 900px) {
      .header__nav { display: none; }
    }

    @media (max-width: 640px) {
      .header__inner { height: 56px; padding: 0 16px; }
      .header__logo-text { font-size: 15px; }
      .header__phone-label { display: none; }
      .header__phone { font-size: 14px; padding: 8px 12px; }
    }

    @media (max-width: 540px) {
      .header__logo-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
      .header__phone { white-space: nowrap; }
    }

    /* ========================================
       SECTION: HERO
       ======================================== */
    .hero {
      position: relative;
      min-height: 520px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background-color: var(--color-primary);
    }

    .hero__bg {
      position: absolute;
      inset: 0;
            background-size: cover;
      background-position: center 40%;
      filter: saturate(0.7);
    }

    .hero__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        175deg,
        rgba(15, 42, 69, 0.88) 0%,
        rgba(26, 60, 94, 0.78) 45%,
        rgba(196, 121, 58, 0.35) 100%
      );
    }

    .hero__content {
      position: relative;
      z-index: 1;
      max-width: var(--max-w-narrow);
      margin: 0 auto;
      padding: 80px 24px;
      text-align: center;
    }

    .hero__eyebrow {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--color-accent);
      margin-bottom: 20px;
      padding: 6px 16px;
      border: 1px solid rgba(196, 121, 58, 0.4);
      border-radius: 2px;
    }

    .hero__headline {
      font-family: var(--font-heading);
      font-size: clamp(2rem, 5vw, 3.2rem);
      font-weight: 700;
      line-height: 1.18;
      color: var(--color-white);
      margin-bottom: 20px;
      letter-spacing: -0.01em;
    }

    .hero__subheadline {
      font-family: var(--font-body);
      font-size: clamp(1.05rem, 2.2vw, 1.25rem);
      font-weight: 400;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 36px;
      max-width: 560px;
      margin-left: auto;
      margin-right: auto;
    }

    .hero__ctas {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .hero__cta {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--color-white);
      background: var(--color-accent);
      padding: 16px 36px;
      border-radius: var(--radius-sm);
      transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
      box-shadow: 0 4px 16px rgba(196, 121, 58, 0.3);
    }

    .hero__cta:hover {
      background: var(--color-accent-hover);
      transform: translateY(-1px);
      box-shadow: 0 6px 24px rgba(196, 121, 58, 0.4);
    }

    .hero__cta--secondary {
      background: transparent;
      border: 1.5px solid rgba(255, 255, 255, 0.4);
      box-shadow: none;
    }

    .hero__cta--secondary:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.7);
      box-shadow: none;
    }

    .hero__trust {
      margin-top: 40px;
      display: flex;
      justify-content: center;
      gap: 28px;
      flex-wrap: wrap;
    }

    .hero__trust-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.7);
      letter-spacing: 0.3px;
    }

    .hero__trust-icon {
      width: 16px;
      height: 16px;
      opacity: 0.7;
    }

    /* ========================================
       SECTION: HERO SPLIT (Variant B - Headshot)
       ======================================== */
    .hero-split {
      position: relative;
      overflow: hidden;
      background: var(--color-primary);
    }

    .hero-split__bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        135deg,
        var(--color-primary-dark) 0%,
        var(--color-primary) 60%,
        var(--color-primary-light) 100%
      );
    }

    /* Subtle texture overlay */
    .hero-split__bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.03) 0%, transparent 70%);
    }

    .hero-split__inner {
      position: relative;
      z-index: 1;
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 64px 24px;
      display: grid;
      grid-template-columns: 1fr 400px;
      gap: 48px;
      align-items: center;
    }

    .hero-split__content {
      text-align: left;
    }

    .hero-split__eyebrow {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--color-accent-text, var(--color-accent));
      margin-bottom: 20px;
      padding: 6px 16px;
      border: 1px solid rgba(196, 121, 58, 0.4);
      border-radius: 2px;
    }

    .hero-split__headline {
      font-family: var(--font-heading);
      font-size: clamp(2rem, 4.5vw, 2.8rem);
      font-weight: 700;
      line-height: 1.18;
      color: var(--color-white);
      margin-bottom: 20px;
      letter-spacing: -0.01em;
    }

    .hero-split__subheadline {
      font-family: var(--font-body);
      font-size: clamp(1rem, 2vw, 1.15rem);
      font-weight: 400;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 32px;
      max-width: 520px;
    }

    .hero-split__ctas {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    /* Reuse hero__cta styles via the same classes */

    .hero-split__trust {
      margin-top: 36px;
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
    }

    .hero-split__photo {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-split__photo-frame {
      position: relative;
      width: 360px;
      height: 440px;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    }

    .hero-split__photo-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 20%;
    }

    /* Placeholder when no image provided */
    .hero-split__photo-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(160deg, var(--color-primary-light) 0%, var(--color-primary-dark) 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: rgba(255, 255, 255, 0.25);
    }

    .hero-split__photo-placeholder svg {
      width: 80px;
      height: 80px;
    }

    .hero-split__photo-placeholder span {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    /* Decorative accent behind photo */
    .hero-split__photo-accent {
      position: absolute;
      top: -12px;
      right: -12px;
      width: 100%;
      height: 100%;
      border-radius: var(--radius-lg);
      border: 2px solid rgba(196, 121, 58, 0.25);
      z-index: -1;
    }

    @media (max-width: 900px) {
      .hero-split__inner {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 48px 24px;
        gap: 40px;
      }
      .hero-split__content { text-align: center; }
      .hero-split__subheadline { margin-left: auto; margin-right: auto; }
      .hero-split__ctas { justify-content: center; }
      .hero-split__trust { justify-content: center; }
      .hero-split__photo { order: -1; }
      .hero-split__photo-frame { width: 100%; max-width: 400px; height: auto; aspect-ratio: 3 / 4; margin: 0 auto; }
      .hero-split__photo-accent { display: none; }
    }

    @media (max-width: 640px) {
      .hero-split__inner { padding: 0 0 40px; gap: 28px; }
      .hero-split__content { padding: 0 20px; }
      .hero-split__ctas { flex-direction: column; align-items: stretch; }
      .hero-split__trust { padding: 0 20px; }
      .hero-split__photo-frame {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 4 / 5;
        border-radius: 0;
        box-shadow: none;
      }
    }

    /* ========================================
       SECTION: PROBLEM (Empathy body copy)
       ======================================== */
    .problem {
      background: var(--color-white);
      padding: 80px 24px;
    }

    .problem__inner {
      max-width: var(--max-w-narrow);
      margin: 0 auto;
    }

    .problem__kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-accent-text, var(--color-accent));
      margin-bottom: 16px;
    }

    .problem__headline {
      font-family: var(--font-heading);
      font-size: clamp(1.6rem, 3.5vw, 2.2rem);
      font-weight: 700;
      line-height: 1.25;
      color: var(--color-primary);
      margin-bottom: 32px;
      letter-spacing: -0.01em;
    }

    .problem__body p {
      font-size: 17px;
      line-height: 1.75;
      color: var(--color-text);
      margin-bottom: 20px;
    }

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

    .problem__body strong {
      color: var(--color-primary);
      font-weight: 600;
    }

    .problem__symptoms {
      margin-top: 36px;
      padding: 32px;
      background: var(--color-warm);
      border-radius: var(--radius-md);
      border-left: 3px solid var(--color-accent);
    }

    .problem__symptoms-title {
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 600;
      color: var(--color-primary);
      margin-bottom: 16px;
      letter-spacing: 0.3px;
    }

    .problem__symptoms-list {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 32px;
    }

    .problem__symptoms-list li {
      font-size: 15px;
      line-height: 1.5;
      color: var(--color-text);
      padding-left: 24px;
      position: relative;
    }

    .problem__symptoms-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 7px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-accent);
      opacity: 0.5;
    }

    .problem__empathy-close {
      margin-top: 32px;
      font-family: var(--font-heading);
      font-size: 1.15rem;
      font-style: italic;
      line-height: 1.6;
      color: var(--color-primary);
      opacity: 0.85;
    }

    @media (max-width: 640px) {
      .problem { padding: 56px 20px; }
      .problem__symptoms { padding: 24px; }
      .problem__symptoms-list { grid-template-columns: 1fr; }
    }

    /* ========================================
       SECTION: PROBLEM SPLIT (Variant B/C - Inset Image)
       ======================================== */
    .problem-split {
      background: var(--color-white);
      padding: 80px 24px;
    }

    .problem-split__inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }

    .problem-split__content {
      max-width: 520px;
    }

    /* When image is on the left, push content right */
    .problem-split--image-left .problem-split__content {
      justify-self: end;
    }

    .problem-split__kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-accent-text, var(--color-accent));
      margin-bottom: 16px;
    }

    .problem-split__headline {
      font-family: var(--font-heading);
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.25;
      color: var(--color-primary);
      margin-bottom: 24px;
      letter-spacing: -0.01em;
    }

    .problem-split__body p {
      font-size: 16px;
      line-height: 1.75;
      color: var(--color-text);
      margin-bottom: 16px;
    }

    .problem-split__body p:last-child {
      margin-bottom: 0;
    }

    .problem-split__body strong {
      color: var(--color-primary);
      font-weight: 600;
    }

    .problem-split__empathy-close {
      margin-top: 24px;
      font-family: var(--font-heading);
      font-size: 1.05rem;
      font-style: italic;
      line-height: 1.6;
      color: var(--color-primary);
      opacity: 0.85;
    }

    .problem-split__image {
      position: relative;
    }

    .problem-split__image-frame {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-card);
      aspect-ratio: 4 / 3;
    }

    .problem-split__image-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .problem-split__image-frame::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(25,28,31,.42) 0%, transparent 55%);
      pointer-events: none;
    }

    .problem-split__image-placeholder {
      width: 100%;
      height: 100%;
      min-height: 320px;
      background: linear-gradient(145deg, var(--color-warm) 0%, var(--color-warm-mid) 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--color-text-muted);
    }

    .problem-split__image-placeholder svg {
      width: 48px;
      height: 48px;
      opacity: 0.3;
    }

    .problem-split__image-placeholder span {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
      opacity: 0.4;
    }

    /* Decorative accent bar on the image */
    .problem-split__image-accent {
      position: absolute;
      width: 4px;
      height: 60%;
      top: 20%;
      background: var(--color-accent);
      border-radius: 2px;
      opacity: 0.4;
    }

    .problem-split--image-right .problem-split__image-accent {
      right: -16px;
    }

    .problem-split--image-left .problem-split__image-accent {
      left: -16px;
    }

    /* Inline image: shown on mobile only, breaks up body text.
       Desktop renders the side image instead. */
    .problem-split__image--inline { display: none; }

    @media (max-width: 768px) {
      .problem-split__inner {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .problem-split__content {
        max-width: none;
        justify-self: start;
      }
      .problem-split__image-frame { aspect-ratio: 16 / 9; }
      /* Swap: hide side image, show inline image within the text flow */
      .problem-split__inner > .problem-split__image { display: none; }
      .problem-split__image--inline {
        display: block;
        margin: 24px 0;
      }
    }

    @media (max-width: 640px) {
      .problem-split { padding: 56px 20px; }
    }

    /* ========================================
       SECTION: SOLUTION CENTERED (Variant A)
       ======================================== */
    .solution {
      background: var(--color-warm);
      padding: 80px 24px;
    }

    .solution__inner {
      max-width: var(--max-w-narrow);
      margin: 0 auto;
    }

    .solution__kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-accent-text, var(--color-accent));
      margin-bottom: 16px;
    }

    .solution__headline {
      font-family: var(--font-heading);
      font-size: clamp(1.6rem, 3.5vw, 2.2rem);
      font-weight: 700;
      line-height: 1.25;
      color: var(--color-primary);
      margin-bottom: 32px;
      letter-spacing: -0.01em;
    }

    .solution__body p {
      font-size: 17px;
      line-height: 1.75;
      color: var(--color-text);
      margin-bottom: 20px;
    }

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

    .solution__body strong {
      color: var(--color-primary);
      font-weight: 600;
    }

    .solution__cta-wrap {
      margin-top: 32px;
      text-align: center;
    }

    /* ========================================
       SECTION: HOW THE WORK UNFOLDS (Steps)
       ======================================== */
    .unfolds {
      background: var(--color-white);
      padding: 80px 24px;
    }

    .unfolds__inner {
      max-width: var(--max-w);
      margin: 0 auto;
    }

    .unfolds__header {
      text-align: center;
      max-width: var(--max-w-narrow);
      margin: 0 auto 48px;
    }

    .unfolds__kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-accent-text, var(--color-accent));
      margin-bottom: 16px;
    }

    .unfolds__headline {
      font-family: var(--font-heading);
      font-size: clamp(1.6rem, 3.5vw, 2.2rem);
      font-weight: 700;
      line-height: 1.25;
      color: var(--color-primary);
      letter-spacing: -0.01em;
    }

    .unfolds__steps {
      display: grid;
      gap: 24px;
    }

    .unfolds__steps--3 {
      grid-template-columns: 1fr 1fr 1fr;
    }

    .unfolds__steps--4 {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .unfolds__step {
      background: var(--color-warm);
      border-radius: var(--radius-md);
      padding: 32px 28px;
      position: relative;
    }

    .unfolds__step-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--color-accent);
      color: var(--color-white);
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 16px;
    }

    .unfolds__step-title {
      font-family: var(--font-heading);
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--color-primary);
      margin-bottom: 10px;
    }

    .unfolds__step-desc {
      font-size: 15px;
      line-height: 1.65;
      color: var(--color-text-muted);
    }

    /* Connector line between steps */
    .unfolds__step:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 50px;
      right: -13px;
      width: 24px;
      height: 2px;
      background: var(--color-accent);
      opacity: 0.25;
    }

    .unfolds__cta-wrap {
      margin-top: 48px;
      text-align: center;
    }

    @media (max-width: 900px) {
      .unfolds__steps--4 { grid-template-columns: 1fr 1fr; }
      .unfolds__step::after { display: none; }
    }

    @media (max-width: 768px) {
      .unfolds__steps--3 { grid-template-columns: 1fr; }
      .unfolds__steps--4 { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
      .unfolds { padding: 56px 20px; }
      .unfolds__step { padding: 24px 20px; }
    }

    

    /* ========================================
       SECTION: SOLUTION SPLIT (Variant B/C)
       ======================================== */
    .solution-split {
      background: var(--color-warm);
      padding: 80px 24px;
    }

    .solution-split__inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }

    .solution-split__content {
      max-width: 520px;
    }

    .solution-split--image-left .solution-split__content {
      justify-self: end;
    }

    .solution-split__kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-accent-text, var(--color-accent));
      margin-bottom: 16px;
    }

    .solution-split__headline {
      font-family: var(--font-heading);
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.25;
      color: var(--color-primary);
      margin-bottom: 24px;
      letter-spacing: -0.01em;
    }

    .solution-split__body p {
      font-size: 16px;
      line-height: 1.75;
      color: var(--color-text);
      margin-bottom: 16px;
    }

    .solution-split__body p:last-child {
      margin-bottom: 0;
    }

    .solution-split__body strong {
      color: var(--color-primary);
      font-weight: 600;
    }

    .solution-split__benefits {
      margin-top: 24px;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .solution-split__benefits li {
      font-size: 15px;
      line-height: 1.5;
      color: var(--color-text);
      padding-left: 28px;
      position: relative;
    }

    .solution-split__benefits li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 6px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid var(--color-accent);
      background: var(--color-white);
    }

    .solution-split__benefits li::after {
      content: '';
      position: absolute;
      left: 4px;
      top: 10px;
      width: 8px;
      height: 4px;
      border-left: 2px solid var(--color-accent);
      border-bottom: 2px solid var(--color-accent);
      transform: rotate(-45deg);
    }

    .solution-split__image {
      position: relative;
    }

    .solution-split__image-frame {
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-card);
      aspect-ratio: 4 / 3;
    }

    .solution-split__image-frame img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .solution-split__image-placeholder {
      width: 100%;
      height: 100%;
      min-height: 320px;
      background: linear-gradient(145deg, var(--color-white) 0%, var(--color-warm-mid) 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--color-text-muted);
    }

    .solution-split__image-placeholder svg {
      width: 48px;
      height: 48px;
      opacity: 0.3;
    }

    .solution-split__image-placeholder span {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
      opacity: 0.4;
    }

    .solution-split__image-accent {
      position: absolute;
      width: 4px;
      height: 60%;
      top: 20%;
      background: var(--color-accent);
      border-radius: 2px;
      opacity: 0.4;
    }

    .solution-split--image-right .solution-split__image-accent {
      right: -16px;
    }

    .solution-split--image-left .solution-split__image-accent {
      left: -16px;
    }

    /* Inline image: shown on mobile only, breaks up body text.
       Desktop renders the side image instead. */
    .solution-split__image--inline { display: none; }

    @media (max-width: 768px) {
      .solution-split__inner {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .solution-split__content {
        max-width: none;
        justify-self: start;
      }
      .solution-split__image-frame { aspect-ratio: 16 / 9; }
      /* Swap: hide side image, show inline image within the text flow */
      .solution-split__inner > .solution-split__image { display: none; }
      .solution-split__image--inline {
        display: block;
        margin: 24px 0;
      }
    }

    @media (max-width: 640px) {
      .solution-split { padding: 56px 20px; }
    }

    /* ========================================
       SECTION: WHY CLIENTS TRUST ME (Centered)
       ======================================== */
    .trust-me {
      background: var(--color-white);
      padding: 80px 24px;
    }

    .trust-me__inner {
      max-width: var(--max-w-narrow);
      margin: 0 auto;
    }

    .trust-me__kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-accent-text, var(--color-accent));
      margin-bottom: 16px;
    }

    .trust-me__headline {
      font-family: var(--font-heading);
      font-size: clamp(1.6rem, 3.5vw, 2.2rem);
      font-weight: 700;
      line-height: 1.25;
      color: var(--color-primary);
      margin-bottom: 32px;
      letter-spacing: -0.01em;
    }

    .trust-me__body p {
      font-size: 17px;
      line-height: 1.75;
      color: var(--color-text);
      margin-bottom: 20px;
    }

    .trust-me__body p:last-child {
      margin-bottom: 0;
    }

    .trust-me__body strong {
      color: var(--color-primary);
      font-weight: 600;
    }

    .trust-me__pillars {
      margin-top: 36px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .trust-me__pillar {
      padding: 24px;
      background: var(--color-warm);
      border-radius: var(--radius-md);
      border-top: 3px solid var(--color-accent);
    }

    .trust-me__pillar-title {
      font-family: var(--font-heading);
      font-size: 1rem;
      font-weight: 600;
      color: var(--color-primary);
      margin-bottom: 8px;
    }

    .trust-me__pillar-desc {
      font-size: 14px;
      line-height: 1.6;
      color: var(--color-text-muted);
    }

    .trust-me__credentials {
      margin-top: 32px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px 28px;
    }

    .trust-me__credential {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 500;
      color: var(--color-text);
    }

    .trust-me__credential-icon {
      width: 18px;
      height: 18px;
      color: var(--color-accent);
      flex-shrink: 0;
    }

    .trust-me__signature {
      margin-top: 32px;
      font-family: var(--font-heading);
      font-size: 1.1rem;
      font-style: italic;
      color: var(--color-primary);
      opacity: 0.85;
    }

    @media (max-width: 640px) {
      .trust-me { padding: 56px 20px; }
      .trust-me__pillars { grid-template-columns: 1fr; }
    }

    /* ========================================
       SECTION: WHY CLIENTS TRUST ME (Split with headshot)
       ======================================== */
    .trust-me-split {
      background: var(--color-white);
      padding: 80px 24px;
    }

    .trust-me-split__inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 56px;
      align-items: start;
    }

    .trust-me-split__photo {
      position: relative;
    }

    .trust-me-split__photo-frame {
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-card);
      aspect-ratio: 3 / 4;
    }

    .trust-me-split__photo-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 20%;
    }

    .trust-me-split__photo-placeholder {
      width: 100%;
      height: 100%;
      min-height: 400px;
      background: linear-gradient(160deg, var(--color-warm) 0%, var(--color-warm-mid) 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: var(--color-text-muted);
    }

    .trust-me-split__photo-placeholder svg {
      width: 64px;
      height: 64px;
      opacity: 0.25;
    }

    .trust-me-split__photo-placeholder span {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
      opacity: 0.35;
    }

    .trust-me-split__photo-name {
      margin-top: 16px;
      text-align: center;
    }

    .trust-me-split__photo-name-text {
      font-family: var(--font-heading);
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--color-primary);
    }

    .trust-me-split__photo-name-title {
      font-size: 13px;
      color: var(--color-text-muted);
      margin-top: 2px;
    }

    .trust-me-split__content {
      padding-top: 8px;
    }

    @media (max-width: 768px) {
      .trust-me-split__inner {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .trust-me-split__photo-frame { aspect-ratio: 1 / 1; max-width: 280px; margin: 0 auto; }
      .trust-me-split__photo-name { text-align: center; }
    }

    @media (max-width: 640px) {
      .trust-me-split { padding: 56px 20px; }
    }

    /* ========================================
       SECTION: TESTIMONIALS
       ======================================== */
    .testimonials {
      background: var(--color-warm);
      padding: 80px 24px;
    }

    .testimonials__inner {
      max-width: var(--max-w);
      margin: 0 auto;
    }

    .testimonials__header {
      text-align: center;
      max-width: var(--max-w-narrow);
      margin: 0 auto 48px;
    }

    .testimonials__kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-accent-text, var(--color-accent));
      margin-bottom: 16px;
    }

    .testimonials__headline {
      font-family: var(--font-heading);
      font-size: clamp(1.6rem, 3.5vw, 2.2rem);
      font-weight: 700;
      line-height: 1.25;
      color: var(--color-primary);
      letter-spacing: -0.01em;
    }

    .testimonials__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .testimonial-card {
      background: var(--color-white);
      border-radius: var(--radius-md);
      padding: 32px;
      box-shadow: var(--shadow-soft);
      display: flex;
      flex-direction: column;
    }

    .testimonial-card__stars {
      display: flex;
      gap: 2px;
      margin-bottom: 16px;
      color: var(--color-accent);
    }

    .testimonial-card__stars svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }

    .testimonial-card__quote {
      font-size: 16px;
      line-height: 1.7;
      color: var(--color-text);
      font-style: italic;
      flex: 1;
      margin-bottom: 20px;
    }

    .testimonial-card__footer {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 16px;
      border-top: 1px solid var(--color-warm);
    }

    .testimonial-card__avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--color-warm-mid);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-size: 15px;
      font-weight: 600;
      color: var(--color-primary);
      flex-shrink: 0;
    }

    .testimonial-card__name {
      font-size: 14px;
      font-weight: 600;
      color: var(--color-primary);
    }

    .testimonial-card__detail {
      font-size: 13px;
      color: var(--color-text-muted);
    }

    /* Single featured testimonial variant */
    .testimonial-featured {
      background: var(--color-white);
      border-radius: var(--radius-lg);
      padding: 48px;
      box-shadow: var(--shadow-card);
      max-width: var(--max-w-narrow);
      margin: 0 auto;
      text-align: center;
      position: relative;
    }

    .testimonial-featured::before {
      content: '\201C';
      font-family: var(--font-heading);
      font-size: 80px;
      line-height: 1;
      color: var(--color-accent);
      opacity: 0.2;
      position: absolute;
      top: 20px;
      left: 32px;
    }

    .testimonial-featured__quote {
      font-family: var(--font-heading);
      font-size: clamp(1.1rem, 2.5vw, 1.35rem);
      line-height: 1.6;
      color: var(--color-primary);
      font-style: italic;
      margin-bottom: 24px;
    }

    .testimonial-featured__name {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 600;
      color: var(--color-text);
    }

    .testimonial-featured__detail {
      font-family: var(--font-body);
      font-size: 13px;
      color: var(--color-text-muted);
    }

    @media (max-width: 768px) {
      .testimonials__grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
      .testimonials { padding: 56px 20px; }
      .testimonial-card { padding: 24px; }
      .testimonial-featured { padding: 32px 24px; }
    }

    /* ========================================
       SECTION: FAQ
       ======================================== */
    .faq {
      background: var(--color-white);
      padding: 80px 24px;
    }

    .faq__inner {
      max-width: var(--max-w-narrow);
      margin: 0 auto;
    }

    .faq__header {
      text-align: center;
      margin-bottom: 48px;
    }

    .faq__kicker {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-accent-text, var(--color-accent));
      margin-bottom: 16px;
    }

    .faq__headline {
      font-family: var(--font-heading);
      font-size: clamp(1.6rem, 3.5vw, 2.2rem);
      font-weight: 700;
      line-height: 1.25;
      color: var(--color-primary);
      letter-spacing: -0.01em;
    }

    .faq__list {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .faq__item {
      border-bottom: 1px solid var(--color-warm-mid);
    }

    .faq__item:first-child {
      border-top: 1px solid var(--color-warm-mid);
    }

    .faq__question {
      width: 100%;
      background: none;
      border: none;
      padding: 20px 0;
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 600;
      color: var(--color-primary);
      text-align: left;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      transition: color 0.2s ease;
    }

    .faq__question:hover {
      color: var(--color-accent);
    }

    .faq__icon {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      color: var(--color-accent);
      transition: transform 0.3s ease;
    }

    .faq__item--open .faq__icon {
      transform: rotate(45deg);
    }

    .faq__answer {
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .faq__item--open .faq__answer {
      max-height: 300px;
    }

    .faq__answer-text {
      padding-bottom: 20px;
      font-size: 15px;
      line-height: 1.7;
      color: var(--color-text-muted);
    }

    .faq__cta-wrap {
      margin-top: 40px;
      text-align: center;
    }

    @media (max-width: 640px) {
      .faq { padding: 56px 20px; }
    }

    /* ========================================
       SECTION: SCARCITY STRIPE
       ======================================== */
    .scarcity {
      background: var(--color-primary);
      padding: 24px;
      text-align: center;
    }

    .scarcity__inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .scarcity__icon {
      width: 20px;
      height: 20px;
      color: var(--color-accent);
      flex-shrink: 0;
    }

    .scarcity__text {
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 500;
      color: var(--color-white);
      letter-spacing: 0.3px;
    }

    .scarcity__text strong {
      color: var(--color-accent);
      font-weight: 700;
    }

    /* Warm variant */
    .scarcity--warm {
      background: var(--color-accent);
    }

    .scarcity--warm .scarcity__text strong {
      color: var(--color-white);
    }

    .scarcity--warm .scarcity__icon {
      color: var(--color-white);
      opacity: 0.8;
    }

    @media (max-width: 640px) {
      .scarcity { padding: 20px 16px; }
      .scarcity__text { font-size: 14px; }
    }

    /* ========================================
       SECTION: FORM CTA
       ======================================== */
    .form-cta {
      background: var(--color-white);
      padding: 80px 24px;
    }

    .form-cta__inner {
      max-width: 560px;
      margin: 0 auto;
      text-align: center;
    }

    .form-cta__headline {
      font-family: var(--font-heading);
      font-size: clamp(1.6rem, 3.5vw, 2.2rem);
      font-weight: 700;
      line-height: 1.25;
      color: var(--color-primary);
      margin-bottom: 12px;
      letter-spacing: -0.01em;
    }

    .form-cta__sub {
      font-size: 16px;
      line-height: 1.6;
      color: var(--color-text-muted);
      margin-bottom: 36px;
    }

    .form-cta__form {
      display: flex;
      flex-direction: column;
      gap: 16px;
      text-align: left;
    }

    .form-cta__field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-cta__label {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-primary);
      letter-spacing: 0.3px;
    }

    .form-cta__input {
      font-family: var(--font-body);
      font-size: 16px;
      padding: 14px 16px;
      border: 1.5px solid var(--color-warm-mid);
      border-radius: var(--radius-sm);
      background: var(--color-white);
      color: var(--color-text);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      outline: none;
    }

    .form-cta__input:focus {
      border-color: var(--color-accent);
      box-shadow: 0 0 0 3px rgba(196, 121, 58, 0.1);
    }

    .form-cta__input::placeholder {
      color: var(--color-text-muted);
      opacity: 0.6;
    }

    .form-cta__submit {
      margin-top: 8px;
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--color-white);
      background: var(--color-accent);
      border: none;
      padding: 16px 36px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
      box-shadow: 0 4px 16px rgba(196, 121, 58, 0.3);
    }

    .form-cta__submit:hover {
      background: var(--color-accent-hover);
      transform: translateY(-1px);
      box-shadow: 0 6px 24px rgba(196, 121, 58, 0.4);
    }

    .form-cta__ps {
      margin-top: 20px;
      font-size: 14px;
      font-style: italic;
      color: var(--color-text-muted);
      text-align: center;
      line-height: 1.6;
    }

    .form-cta__disclaimer {
      margin-top: 16px;
      font-size: 12px;
      color: var(--color-text-muted);
      text-align: center;
    }

    .form-cta__consent {
      margin-top: 12px;
      font-size: 11px;
      line-height: 1.5;
      color: var(--color-text-muted);
      text-align: center;
    }

    .form-cta__consent a {
      color: var(--color-text-muted);
      text-decoration: underline;
    }

    /* Compliance trust bar - sits below form */
    .compliance {
      background: var(--color-warm);
      padding: 32px 24px;
      border-top: 1px solid var(--color-warm-mid);
    }

    .compliance__inner {
      max-width: var(--max-w-narrow);
      margin: 0 auto;
    }

    .compliance__row {
      display: flex;
      justify-content: center;
      gap: 32px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .compliance__badge {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--color-text-muted);
    }

    .compliance__badge-icon {
      width: 16px;
      height: 16px;
      color: var(--color-accent);
      flex-shrink: 0;
    }

    .compliance__details {
      text-align: center;
      font-size: 12px;
      line-height: 1.7;
      color: var(--color-text-muted);
    }

    .compliance__details p {
      margin-bottom: 4px;
    }

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

    .compliance__details a {
      color: var(--color-text-muted);
      text-decoration: underline;
    }

    @media (max-width: 640px) {
      .compliance { padding: 24px 16px; }
      .compliance__row { gap: 20px; }
    }

    /* Split form variant: form left, info right */
    .form-cta-split {
      background: var(--color-warm);
      padding: 80px 24px;
    }

    .form-cta-split__inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start;
    }

    .form-cta-split__info {
      padding-top: 16px;
    }

    .form-cta-split__headline {
      font-family: var(--font-heading);
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.25;
      color: var(--color-primary);
      margin-bottom: 16px;
    }

    .form-cta-split__sub {
      font-size: 16px;
      line-height: 1.65;
      color: var(--color-text-muted);
      margin-bottom: 28px;
    }

    .form-cta-split__details {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .form-cta-split__details li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 15px;
      color: var(--color-text);
    }

    .form-cta-split__details-icon {
      width: 20px;
      height: 20px;
      color: var(--color-accent);
      flex-shrink: 0;
      margin-top: 1px;
    }

    .form-cta-split__form-wrap {
      background: var(--color-white);
      border-radius: var(--radius-lg);
      padding: 40px 32px;
      box-shadow: var(--shadow-card);
    }

    .form-cta-split__form-title {
      font-family: var(--font-heading);
      font-size: 1.15rem;
      font-weight: 600;
      color: var(--color-primary);
      margin-bottom: 24px;
      text-align: center;
    }

    @media (max-width: 768px) {
      .form-cta-split__inner { grid-template-columns: 1fr; gap: 40px; }
      .form-cta-split__form-wrap { padding: 32px 24px; }
    }

    @media (max-width: 640px) {
      .form-cta { padding: 56px 20px; }
      .form-cta-split { padding: 56px 20px; }
    }

    /* ========================================
       SECTION: FOOTER
       ======================================== */
    .footer {
      background: var(--color-primary-dark);
      padding: 32px 24px;
      text-align: center;
    }

    .footer__text {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.5);
    }

    .footer__links {
      margin-top: 8px;
      display: flex;
      justify-content: center;
      gap: 20px;
    }

    .footer__link {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.4);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .footer__link:hover {
      color: var(--color-accent);
    }

    /* ========================================
       RESPONSIVE
       ======================================== */
    @media (max-width: 640px) {
      .hero__content { padding: 56px 20px; }
      .hero__ctas { flex-direction: column; align-items: stretch; }
      .hero__cta { padding: 14px 32px; text-align: center; }
      .hero__trust { gap: 16px; }
      .hero__trust-item { font-size: 12px; }
    }

    /* ========================================
       CTA PRESS-STATE UTILITY (Editorial Quietude)
       Locked 2026-05-13. Shared press-state for primary + section-workhorse
       CTAs in the Editorial Quietude design system. Variants opt in by
       composing .cta-press alongside their variant class. Variants with
       bespoke press treatments (cta-stamp-press, cta-double-stack-tilt)
       override these rules in their variant CSS.

       Color shift uses precomputed --sage-pressed (no runtime color-mix).
       Transform respects prefers-reduced-motion.
       ======================================== */
    .cta-press {
      transition:
        transform 120ms ease-out,
        background-color 120ms ease-out;
    }
    .cta-press:active {
      transform: scale(0.98);
      background-color: var(--sage-pressed);
    }
    @media (prefers-reduced-motion: reduce) {
      .cta-press {
        transition: background-color 120ms ease-out;
      }
      .cta-press:active {
        transform: none;
      }
    }

    /* ========================================
       EDITORIAL QUIETUDE CTA PRIMITIVES (Phase B)
       Three primary CTA variants from CTA Exploration. Each macro in
       templates/cta/macros.njk renders the corresponding HTML with these
       classes attached. Universal modality scope (no bilateral constraints).
       Per-variant CSS lives here; macros stay shape-only.
       ======================================== */

    /* --- Shared base for arrow-extend, stamp-press --- */
    .cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-weight: 500;
      line-height: 1;
      text-decoration: none;
      cursor: pointer;
      border: 0;
    }

    /* --- arrow-extend-ink-shift ---
       Pill-shape sage fill, ink text + arrow glyph. Hover: --sage-deep bg +
       --paper text/arrow + arrow translateX +6px. Active: --sage-pressed.
       Reduced-motion: kill arrow translateX, keep color shift.
       --------------------------------- */
    .cta--arrow-extend-ink-shift {
      --cta-pad-y: 12px;
      --cta-pad-x: 22px;
      --cta-fs: 15px;
      --cta-shift: 6px;
      padding: var(--cta-pad-y) var(--cta-pad-x);
      background: var(--sage);
      color: var(--ink);
      border: 1px solid var(--sage);
      border-radius: 999px;
      font-size: var(--cta-fs);
      letter-spacing: 0.005em;
      transition:
        background-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
        color 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .cta--arrow-extend-ink-shift.cta--sm {
      --cta-pad-y: 8px;
      --cta-pad-x: 16px;
      --cta-fs: 13px;
      --cta-shift: 6px;
      gap: 8px;
    }
    .cta--arrow-extend-ink-shift.cta--lg {
      --cta-pad-y: 16px;
      --cta-pad-x: 30px;
      --cta-fs: 17px;
      --cta-shift: 8px;
      gap: 14px;
    }
    .cta--arrow-extend-ink-shift .cta__arrow {
      width: 16px;
      height: 12px;
      flex-shrink: 0;
      transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .cta--arrow-extend-ink-shift.cta--lg .cta__arrow {
      width: 20px;
      height: 14px;
    }
    .cta--arrow-extend-ink-shift .cta__arrow path {
      stroke: currentColor;
      stroke-width: 1.25;
      fill: none;
    }
    @media (hover: hover) {
      .cta--arrow-extend-ink-shift:hover {
        background-color: var(--sage-deep);
        border-color: var(--sage-deep);
        color: var(--paper);
      }
      .cta--arrow-extend-ink-shift:hover .cta__arrow {
        transform: translateX(var(--cta-shift));
      }
    }
    .cta--arrow-extend-ink-shift:focus-visible {
      outline: 2px solid var(--sage);
      outline-offset: 2px;
      background-color: var(--sage-deep);
      border-color: var(--sage-deep);
      color: var(--paper);
    }
    .cta--arrow-extend-ink-shift:focus-visible .cta__arrow {
      transform: translateX(var(--cta-shift));
    }
    .cta--arrow-extend-ink-shift:active {
      background-color: var(--sage-pressed);
      border-color: var(--sage-pressed);
      color: var(--paper);
      transition-duration: 120ms;
    }
    .cta--arrow-extend-ink-shift:active .cta__arrow {
      transform: translateX(0);
      transition-duration: 200ms;
    }
    @media (prefers-reduced-motion: reduce) {
      .cta--arrow-extend-ink-shift {
        transition-duration: 120ms;
      }
      .cta--arrow-extend-ink-shift .cta__arrow,
      .cta--arrow-extend-ink-shift:hover .cta__arrow,
      .cta--arrow-extend-ink-shift:focus-visible .cta__arrow,
      .cta--arrow-extend-ink-shift:active .cta__arrow {
        transition: none;
        transform: none;
      }
    }

    /* --- stamp-press ---
       Ink-on-paper raised slab. Hover: 2px down + 0.98 scale + ink → sage.
       Active: 3px down + 0.96 scale + sage-deep. Release: spring overshoot
       via cubic-bezier(0.34, 1.56, 0.64, 1). Reduced-motion: kill all
       transform; communicate state via background color shift only.
       --------------------------------- */
    .cta--stamp-press {
      display: inline-block;
      background: var(--ink);
      color: var(--paper);
      border-radius: 1px;
      box-shadow: 0 2px 0 0 rgba(26, 26, 26, 0.15);
      letter-spacing: 0.005em;
      transition:
        transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 180ms ease-out,
        box-shadow 180ms ease-out;
    }
    .cta--stamp-press.cta--default {
      font-size: 0.9375rem;
      padding: 0.875rem 1.5rem;
    }
    .cta--stamp-press.cta--lg {
      font-size: 1.0625rem;
      padding: 1.375rem 2.5rem;
    }
    @media (hover: hover) {
      .cta--stamp-press:hover {
        transform: translateY(2px) scale(0.98);
        background-color: var(--sage);
        color: var(--paper);
        box-shadow: 0 1px 0 0 rgba(26, 26, 26, 0.10);
        transition:
          transform 180ms ease-out,
          background-color 200ms ease-out,
          box-shadow 180ms ease-out;
      }
    }
    .cta--stamp-press:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
      transform: translateY(2px) scale(0.98);
      background-color: var(--sage);
      color: var(--paper);
      box-shadow: 0 1px 0 0 rgba(26, 26, 26, 0.10);
    }
    .cta--stamp-press:active {
      transform: translateY(3px) scale(0.96);
      background-color: var(--sage-deep);
      color: var(--paper);
      box-shadow: 0 0 0 0 rgba(26, 26, 26, 0.05);
      transition:
        transform 100ms ease-out,
        background-color 100ms ease-out,
        box-shadow 100ms ease-out;
    }
    @media (prefers-reduced-motion: reduce) {
      .cta--stamp-press {
        transition:
          background-color 180ms ease-out,
          box-shadow 180ms ease-out;
      }
      .cta--stamp-press:hover,
      .cta--stamp-press:focus-visible,
      .cta--stamp-press:active {
        transform: none;
      }
    }

    /* --- ghost-underline-grow ---
       Inline-block anchor. 1px ink underline at rest. Hover: 2px + sage.
       Focus-visible: hover state + 4px-offset sage outline. Active: 1px +
       sage (tactile depress). Reduced-motion: keep state changes, kill
       transition easing.
       --------------------------------- */
    .cta--ghost-underline-grow {
      display: inline-block;
      color: var(--ink);
      background: none;
      font: inherit;
      padding-bottom: 1px;
      border-bottom: 1px solid var(--ink);
      transition:
        border-color 200ms ease,
        border-bottom-width 200ms ease,
        color 200ms ease;
    }
    @media (hover: hover) {
      .cta--ghost-underline-grow:hover {
        border-bottom-width: 2px;
        border-bottom-color: var(--sage);
        color: var(--sage);
      }
    }
    .cta--ghost-underline-grow:focus-visible {
      border-bottom-width: 2px;
      border-bottom-color: var(--sage);
      color: var(--sage);
      outline: 2px solid var(--sage);
      outline-offset: 4px;
    }
    .cta--ghost-underline-grow:active {
      border-bottom-width: 1px;
      color: var(--sage);
    }
    @media (prefers-reduced-motion: reduce) {
      .cta--ghost-underline-grow {
        transition-duration: 0s;
      }
    }

    /* ========================================
       SECTION: HERO PORTRAIT WITH MARK
       Editorial Quietude v1 hero variant. Asymmetric two-column layout:
       editorial headline + arrow-extend CTA on one side, practitioner
       portrait + credibility mark on the other. Tokens: --sage, --sage-deep,
       --paper, --paper-warm, --ink only. The mark's rotation motion is the
       single explicit transform in this section per spec; reduced-motion
       strips both ring and counter-rotate. No new tokens introduced.
       Spec   : 05 LaunchPad/Design/Variant Exploration/Specs/hero-portrait-with-mark.md
       Mockup : 05 LaunchPad/Design/Variant Exploration/Mockups/hero-portrait-with-mark/index.html
       ======================================== */
    .hero-portrait-mark {
      position: relative;
      background: var(--paper);
      color: var(--ink);
      padding: clamp(56px, 9vh, 112px) clamp(22px, 4vw, 56px) clamp(40px, 7vh, 80px);
      overflow: hidden;
    }
    .hero-portrait-mark--unrenderable {
      display: none;
    }
    .hero-portrait-mark__inner {
      position: relative;
      z-index: 1;
      max-width: 1320px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 48px;
      align-items: center;
    }
    @media (min-width: 1024px) {
      .hero-portrait-mark__inner {
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
        gap: clamp(48px, 6vw, 96px);
      }
    }

    .hero-portrait-mark__copy {
      max-width: 600px;
    }
    .hero-portrait-mark__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      margin: 0 0 24px;
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.26em;
      color: var(--sage-deep);
    }
    .hero-portrait-mark__eyebrow::before {
      content: "";
      display: inline-block;
      width: 38px;
      height: 1px;
      background: var(--sage);
    }
    .hero-portrait-mark__headline {
      margin: 0 0 24px;
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: clamp(36px, 6vw, 64px);
      line-height: 1.04;
      letter-spacing: -0.012em;
      color: var(--ink);
      text-wrap: balance;
      text-transform: none;
    }
    .hero-portrait-mark__sub {
      margin: 0 0 36px;
      max-width: 46ch;
      font-family: var(--font-body);
      font-size: clamp(16.5px, 1.4vw, 18.5px);
      line-height: 1.6;
      color: var(--ink);
      opacity: 0.84;
      text-wrap: pretty;
    }
    .hero-portrait-mark__actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 24px 28px;
    }

    .hero-portrait-mark__media {
      position: relative;
      width: 100%;
      max-width: 620px;
      margin: 0;
      justify-self: stretch;
    }
    @media (min-width: 1024px) {
      .hero-portrait-mark__media {
        justify-self: end;
      }
    }
    .hero-portrait-mark__frame {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 5;
      background: var(--paper-warm);
      overflow: hidden;
      border-radius: 2px;
    }
    .hero-portrait-mark__frame::before {
      content: "";
      position: absolute;
      inset: 0;
      box-shadow:
        inset 0 0 0 10px var(--paper-warm),
        inset 0 0 0 11px var(--sage);
      z-index: 3;
      pointer-events: none;
    }
    .hero-portrait-mark__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 28%;
      display: block;
    }
    .hero-portrait-mark__plate-caption {
      position: absolute;
      top: 22px;
      right: 22px;
      z-index: 4;
      background: var(--paper);
      padding: 8px 12px;
      font-family: var(--font-body);
      font-size: 9.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.3em;
      color: var(--ink);
      border: 1px solid var(--sage);
    }

    /* --- Mark (rotating credibility seal / monogram / stat stamp) --- */
    .hero-portrait-mark__mark {
      position: absolute;
      bottom: -28px;
      left: -28px;
      width: 132px;
      height: 132px;
      z-index: 5;
      display: grid;
      place-items: center;
      background: var(--paper);
      border-radius: 999px;
      box-shadow:
        0 1px 0 rgba(26, 26, 26, 0.08),
        0 22px 40px -28px rgba(26, 26, 26, 0.55),
        0 0 0 1px var(--sage);
    }
    .hero-portrait-mark__mark--circular {
      animation: hero-portrait-mark-rotate 38s linear infinite;
    }
    @keyframes hero-portrait-mark-rotate {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    .hero-portrait-mark__ring {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .hero-portrait-mark__ring text {
      font-family: var(--font-body);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      fill: var(--sage-deep);
    }

    .hero-portrait-mark__mark--monogram .hero-portrait-mark__glyph {
      font-family: var(--font-heading);
      font-style: italic;
      font-weight: 400;
      font-size: 36px;
      color: var(--ink);
      line-height: 1;
    }
    .hero-portrait-mark__mark--stat {
      flex-direction: column;
      grid-auto-flow: row;
    }
    .hero-portrait-mark__stat-number {
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: 30px;
      line-height: 1;
      color: var(--ink);
    }
    .hero-portrait-mark__stat-label {
      margin-top: 6px;
      max-width: 96px;
      text-align: center;
      font-family: var(--font-body);
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--sage-deep);
      line-height: 1.25;
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-portrait-mark__mark--circular {
        animation: none;
      }
    }

    @media (max-width: 1023px) {
      .hero-portrait-mark__copy { max-width: none; }
      .hero-portrait-mark__media { max-width: none; }
    }
    @media (max-width: 767px) {
      .hero-portrait-mark__actions { gap: 18px 20px; }
      .hero-portrait-mark__mark {
        width: 108px;
        height: 108px;
        bottom: -22px;
        left: -16px;
      }
      .hero-portrait-mark__mark--monogram .hero-portrait-mark__glyph { font-size: 30px; }
      .hero-portrait-mark__stat-number { font-size: 26px; }
      .hero-portrait-mark__stat-label  { font-size: 7.5px; }
      .hero-portrait-mark__ring text   { font-size: 9.5px; letter-spacing: 0.22em; }
    }

    /* ========================================
       SECTION: HERO BOTTOM ANCHORED BLEED
       Editorial Quietude v1 hero variant. Image-LCP full-bleed
       photographic hero with bottom-anchored copy. Top 60% of the
       frame is pure image. Headline + primary CTA pinned to the
       lower third, layered above an optional gradient scrim sized
       for legibility in light-text mode. Tokens: --sage, --sage-deep,
       --paper, --paper-warm, --ink only. No new tokens. Scrim uses
       raw rgba (deliberate — scrim is not a brand color).
       Spec  : 05 LaunchPad/Design/Variant Exploration/Specs/hero-bottom-anchored-bleed.md
       Mockup: 05 LaunchPad/Design/Variant Exploration/Mockups/hero-bottom-anchored-bleed/index.html
       ======================================== */
    .hero-bleed {
      position: relative;
      width: 100%;
      min-height: 620px;
      height: clamp(620px, 88vh, 1000px);
      overflow: hidden;
      background: var(--ink);
      isolation: isolate;
      color: #fff;
    }
    .hero-bleed--unrenderable {
      display: none;
    }
    .hero-bleed--text-dark {
      color: var(--ink);
    }

    .hero-bleed__media {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: block;
    }
    .hero-bleed__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 35%;
      display: block;
    }

    /* Bottom-anchored legibility scrim. Renders only when the
       overlay div is emitted by the template (light-text mode by
       default, or dark-text mode with gradient_overlay=true). Top
       50% of the frame is left untouched so the image is the dominant
       visual. */
    .hero-bleed__overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(
        to top,
        rgba(15, 18, 14, 0.62) 0%,
        rgba(15, 18, 14, 0.38) 18%,
        rgba(15, 18, 14, 0.10) 38%,
        rgba(15, 18, 14, 0)    52%
      );
    }

    .hero-bleed__copy {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      padding: 0 clamp(24px, 4vw, 64px) clamp(40px, 7vh, 80px);
      color: inherit;
    }

    .hero-bleed__inner {
      max-width: 780px;
      animation: hero-bleed-rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
      animation-delay: 120ms;
    }

    .hero-bleed__headline {
      margin: 0 0 24px;
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: clamp(36px, 5.4vw, 72px);
      line-height: 1.04;
      letter-spacing: -0.012em;
      color: inherit;
      text-wrap: balance;
      text-transform: none;
    }

    .hero-bleed__sub {
      margin: 0 0 36px;
      max-width: 560px;
      font-family: var(--font-body);
      font-weight: 400;
      font-size: clamp(15.5px, 1.4vw, 18.5px);
      line-height: 1.55;
      color: inherit;
      opacity: 0.92;
      text-wrap: pretty;
    }

    .hero-bleed__actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 24px 32px;
    }

    @keyframes hero-bleed-rise {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }

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

    /* Mobile: image tightens its frame and the scrim deepens so that
       the bottom-anchored copy stays legible against the cropped image.
       Single <img> source — art-directed <picture> deferred to v2. */
    @media (max-width: 767px) {
      .hero-bleed {
        min-height: 560px;
        height: clamp(560px, 92vh, 880px);
      }
      .hero-bleed__image {
        object-position: 50% 30%;
      }
      .hero-bleed__overlay {
        background: linear-gradient(
          to top,
          rgba(15, 18, 14, 0.72) 0%,
          rgba(15, 18, 14, 0.50) 22%,
          rgba(15, 18, 14, 0.18) 44%,
          rgba(15, 18, 14, 0)    58%
        );
      }
      .hero-bleed__copy {
        padding: 0 clamp(20px, 6vw, 32px) clamp(40px, 9vh, 64px);
      }
      .hero-bleed__headline {
        font-size: clamp(28px, 7.5vw, 40px);
        margin-bottom: 18px;
      }
      .hero-bleed__sub {
        font-size: 15px;
        margin-bottom: 28px;
      }
      .hero-bleed__actions {
        gap: 18px 22px;
      }
    }

    @media (max-width: 380px) {
      .hero-bleed__actions {
        flex-direction: column;
        align-items: stretch;
      }
    }

    /* ========================================
       SECTION: SOLUTION MODALITY EXPLAINER
       Editorial Quietude v1 solution variant. Per-modality detail cards
       in an editorial scrolling list. Each card pairs a 4:3 image with
       a six-field schema (short_name / full_name / lineage / evidence /
       what_it_does / used_for). Image side alternates across cards.
       Tokens: --sage, --sage-deep, --sage-light, --paper, --paper-warm,
       --ink only. No new tokens. Muted text + hairline rules use raw
       rgba literals (no --ink-muted / --hairline token defined in
       production EQ — same precedent as hero-bleed scrim rgba).
       Universal modality scope — bilateral pulse forbidden here.
       Spec  : 05 LaunchPad/Design/Variant Exploration/Specs/solution-modality-explainer.md
       Mockup: 05 LaunchPad/Design/Variant Exploration/Mockups/solution-modality-explainer/index.html
       ======================================== */
    .modality-explainer {
      position: relative;
      padding: clamp(80px, 12vh, 144px) 0;
      background: var(--paper);
      color: var(--ink);
      overflow: hidden;
    }
    .modality-explainer--unrenderable {
      display: none;
    }

    .modality-explainer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      height: 56px;
      background: var(--sage);
      opacity: 0.5;
    }

    .modality-explainer__inner {
      max-width: 1080px;
      margin: 0 auto;
      padding: 0 clamp(24px, 4vw, 32px);
    }

    /* ── Section heading ── */
    .modality-explainer__head {
      text-align: center;
      max-width: 720px;
      margin: 0 auto clamp(64px, 9vh, 96px);
    }

    .modality-explainer__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 22px;
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--sage);
    }
    .modality-explainer__eyebrow::before,
    .modality-explainer__eyebrow::after {
      content: '';
      display: block;
      width: 28px;
      height: 1px;
      background: var(--sage);
      opacity: 0.6;
    }

    .modality-explainer__headline {
      margin: 0 0 22px;
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: clamp(34px, 5.2vw, 56px);
      line-height: 1.1;
      letter-spacing: -0.005em;
      color: var(--ink);
      text-wrap: balance;
    }

    .modality-explainer__sub {
      margin: 0 auto 18px;
      max-width: 540px;
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 17px;
      line-height: 1.55;
      color: rgba(26, 26, 26, 0.66);
    }

    .modality-explainer__intro {
      margin: 28px auto 0;
      padding-top: 22px;
      max-width: 580px;
      border-top: 1px solid rgba(26, 26, 26, 0.10);
      font-family: var(--font-heading);
      font-style: italic;
      font-weight: 400;
      font-size: 19px;
      line-height: 1.55;
      color: var(--ink);
    }

    /* ── Card list ── */
    .modality-explainer__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: clamp(80px, 11vh, 96px);
    }

    .modality-explainer__card {
      display: grid;
      grid-template-columns: 360px 1fr;
      gap: 64px;
      align-items: start;
      max-width: 960px;
      margin: 0 auto;
      width: 100%;
    }

    .modality-explainer__card--reverse {
      grid-template-columns: 1fr 360px;
    }
    .modality-explainer__card--reverse .modality-explainer__media {
      grid-column: 2;
      grid-row: 1;
    }
    .modality-explainer__card--reverse .modality-explainer__body {
      grid-column: 1;
      grid-row: 1;
      text-align: right;
    }
    .modality-explainer__card--reverse .modality-explainer__short {
      justify-content: flex-end;
    }
    .modality-explainer__card--reverse .modality-explainer__rule {
      margin-left: auto;
      margin-right: 0;
    }
    .modality-explainer__card--reverse .modality-explainer__field {
      grid-template-columns: 1fr 130px;
    }
    .modality-explainer__card--reverse .modality-explainer__field-label {
      order: 2;
      text-align: left;
    }
    .modality-explainer__card--reverse .modality-explainer__field-value {
      order: 1;
      text-align: right;
    }

    /* ── Image ── */
    .modality-explainer__media {
      margin: 0;
      position: relative;
    }
    .modality-explainer__frame {
      background: var(--paper-warm);
      padding: 10px;
      border: 1px solid var(--sage);
      box-shadow: 0 4px 12px rgba(26, 26, 26, 0.06);
      position: relative;
    }
    .modality-explainer__image {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      filter: saturate(0.88) contrast(0.96);
    }

    /* ── Body ── */
    .modality-explainer__body {
      padding-top: 8px;
    }

    .modality-explainer__short {
      display: inline-flex;
      align-items: baseline;
      gap: 14px;
      margin: 0 0 14px;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--sage);
    }
    .modality-explainer__index {
      font-family: var(--font-heading);
      font-style: italic;
      font-weight: 400;
      font-size: 13px;
      letter-spacing: 0.04em;
      text-transform: none;
      color: rgba(26, 26, 26, 0.55);
    }

    .modality-explainer__name {
      margin: 0;
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: clamp(22px, 2.4vw, 26px);
      line-height: 1.2;
      color: var(--ink);
    }

    .modality-explainer__rule {
      width: 48px;
      height: 1px;
      background: var(--sage);
      opacity: 0.7;
      margin: 22px 0 28px;
    }

    /* ── Field grid (dl) ── */
    .modality-explainer__fields {
      margin: 0;
      display: flex;
      flex-direction: column;
    }

    .modality-explainer__field {
      display: grid;
      grid-template-columns: 130px 1fr;
      gap: 28px;
      padding: 16px 0;
      border-top: 1px solid rgba(26, 26, 26, 0.10);
      align-items: baseline;
      margin: 0;
    }
    .modality-explainer__field:last-child {
      border-bottom: 1px solid rgba(26, 26, 26, 0.10);
    }

    .modality-explainer__field-label {
      margin: 0;
      padding-top: 3px;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: rgba(26, 26, 26, 0.60);
      line-height: 1.3;
    }

    .modality-explainer__field-value {
      margin: 0;
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 16.5px;
      line-height: 1.55;
      color: var(--ink);
    }

    .modality-explainer__field--mechanism .modality-explainer__field-value {
      font-family: var(--font-heading);
      font-style: italic;
      font-size: 18px;
      line-height: 1.5;
    }

    /* ── Foot CTA ── */
    .modality-explainer__foot {
      margin: clamp(96px, 14vh, 144px) auto 0;
      max-width: 640px;
      text-align: center;
      padding-top: 56px;
      border-top: 1px solid rgba(26, 26, 26, 0.10);
    }

    .modality-explainer__foot-text {
      margin: 0 0 32px;
      font-family: var(--font-heading);
      font-style: italic;
      font-size: clamp(22px, 2.6vw, 28px);
      line-height: 1.35;
      color: var(--ink);
    }

    .modality-explainer__actions {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 18px 28px;
    }

    /* ── Mobile reflow ──
       Image-first stack, single column, alternation collapses, fields
       label-over-value. Card max-width reins in to a comfortable column
       on narrow viewports.                                              */
    @media (max-width: 820px) {
      .modality-explainer__card,
      .modality-explainer__card--reverse {
        grid-template-columns: 1fr;
        gap: 32px;
        max-width: 540px;
      }
      .modality-explainer__card--reverse .modality-explainer__media,
      .modality-explainer__card--reverse .modality-explainer__body {
        grid-column: 1;
        grid-row: auto;
        text-align: left;
      }
      .modality-explainer__media {
        order: 1;
      }
      .modality-explainer__body {
        order: 2;
      }
      .modality-explainer__card--reverse .modality-explainer__short {
        justify-content: flex-start;
      }
      .modality-explainer__card--reverse .modality-explainer__rule {
        margin-left: 0;
      }
      .modality-explainer__field,
      .modality-explainer__card--reverse .modality-explainer__field {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 18px 0;
      }
      .modality-explainer__card--reverse .modality-explainer__field-label {
        order: 1;
        text-align: left;
      }
      .modality-explainer__card--reverse .modality-explainer__field-value {
        order: 2;
        text-align: left;
      }
      .modality-explainer__list {
        gap: 56px;
      }
    }

    @media (max-width: 480px) {
      .modality-explainer__inner {
        padding: 0 24px;
      }
      .modality-explainer__name {
        font-size: 22px;
      }
      .modality-explainer__field-value {
        font-size: 16px;
      }
      .modality-explainer__field--mechanism .modality-explainer__field-value {
        font-size: 17px;
      }
      .modality-explainer__actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
      }
    }

    /* Reduced-motion compliance. This variant ships with no transform-
       or opacity-based motion of its own; the only motion-bearing
       descendants are the CTA macros, whose own CSS handles their
       prefers-reduced-motion compliance. Vacuously satisfied — keeping
       this block as a future-proofing anchor for any motion ornament
       added later. Per Phase C #7 precedent, NEW motion added later
       must register itself here. */
    @media (prefers-reduced-motion: reduce) {
      .modality-explainer,
      .modality-explainer__card,
      .modality-explainer__frame,
      .modality-explainer__image {
        animation: none !important;
        transition: none !important;
      }
    }

    /* ============================================================
       EQ-V2 SECTION SYSTEM  (additive, Task 1.2 — 2026-06-24)

       Productizes the hand-built EQ-v2 raw-HTML lane (Jeffrey Newburg /
       Mihaela Holtz) into the shared stylesheet. Every selector is
       namespaced `*-eq` so existing partials/classes are byte-untouched.

       TOKENS derive from the brand --color-* set (injected by base.njk from
       brand_config) with neutral fallbacks. Richer EQ tones (washes, soft
       ink, dark-band peach, oxblood secondary) accept optional per-client
       --eq-* overrides via brand_config and otherwise fall back to a
       derivation of the brand tokens — so NO client palette is hardcoded
       into shared CSS and a client without EQ overrides still renders.
       ============================================================ */
    :root {
      /* Surfaces */
      --eq-paper:        var(--eq-paper-override, var(--color-warm, #f3f2ef));
      --eq-paper-warm:   var(--eq-paper-warm-override, var(--color-warm-mid, #ebeae6));
      --eq-paper-deep:   var(--eq-paper-deep-override, var(--color-warm-mid, #e2e1dc));
      --eq-line:         var(--eq-line-override, rgba(45,52,57,.14));
      /* Ink / text */
      --eq-ink:          var(--eq-ink-override, var(--color-text, #232527));
      --eq-ink-strong:   var(--eq-ink-strong-override, var(--color-primary-dark, #1e2023));
      --eq-ink-soft:     var(--eq-ink-soft-override, var(--color-text-muted, #5c5f62));
      --eq-mute:         var(--eq-mute-override, var(--color-text-muted, #6b6a66));
      /* Accent (primary EQ accent — borders, dots, icons, eyebrow text) */
      --eq-accent:       var(--eq-accent-override, var(--color-accent, #547f82));
      --eq-accent-dark:  var(--eq-accent-dark-override, var(--color-accent-text, var(--color-accent-hover, #3f6164)));
      --eq-accent-wash:  var(--eq-accent-wash-override, rgba(84,127,130,.12));
      --eq-highlight: var(--eq-highlight-override, var(--color-accent, #9dbbbd));
      /* Secondary accent (em emphasis, primary button) */
      --eq-em:           var(--eq-em-override, var(--color-primary, #7a241c));
      /* The primary CTA's ground alone. Derived so a `warm` label clears 4.5:1 on it whatever the VDP's primary
         reads at (Decision #120f); --eq-em keeps painting em emphasis, eyebrow rules and ghost-button hover. */
      --eq-cta:          var(--eq-cta-override, var(--color-primary, #7a241c));
      --eq-em-deep:      var(--eq-em-deep-override, var(--color-primary-dark, #5c1813));
      --eq-em-wash:      var(--eq-em-wash-override, rgba(122,36,28,.10));
      --eq-dark:         var(--eq-dark-override, var(--color-primary-dark, #1e2023));
      --eq-easing: cubic-bezier(.2,.7,.2,1);
      --eq-display: var(--font-heading);
      --eq-body: var(--font-body);
    }

    /* ---- shared helpers ---- */
    .wrap-eq { max-width: 1280px; margin: 0 auto; padding: 0 36px; }
    .rule-eq { height: 1px; background: var(--eq-line); border: 0; width: 72px; margin: 0 0 28px; }
    .eyebrow-eq {
      font-family: var(--eq-body); font-size: 11px; font-weight: 700;
      letter-spacing: .28em; text-transform: uppercase; color: var(--eq-accent-dark);
      display: inline-flex; align-items: center; gap: 14px; margin-bottom: 28px;
    }
    .eyebrow-eq::before { content: ""; width: 28px; height: 1px; background: var(--eq-em); }

    .grain { position: relative; }
    .grain::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      opacity: .3; mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .12  0 0 0 0 .10  0 0 0 0 .08  0 0 0 .06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
    }
    /* reveals (A3) — LCP element must NOT carry .reveal (B4) */
    .reveal { opacity: 0; animation: eq-reveal .8s var(--eq-easing) forwards; }
    .reveal.d1 { animation-delay: .05s; } .reveal.d2 { animation-delay: .18s; }
    .reveal.d3 { animation-delay: .32s; } .reveal.d4 { animation-delay: .46s; }
    .reveal.d5 { animation-delay: .58s; } .reveal.d6 { animation-delay: .72s; }
    @keyframes eq-reveal { to { opacity: 1; } }

    .btn-eq {
      display: inline-flex; align-items: center; gap: 10px; padding: 18px 30px;
      font-family: var(--eq-body); font-size: 15px; font-weight: 700;
      letter-spacing: .10em; text-transform: uppercase; border-radius: 2px;
      border: 0; cursor: pointer; transition: all .35s var(--eq-easing); text-decoration: none;
    }
    .btn-eq--primary { background: var(--eq-cta); color: var(--eq-paper); }
    .btn-eq--primary:hover { background: color-mix(in srgb, var(--eq-cta) 85%, black); transform: translateY(-1px); }
    .btn-eq--primary::after { content: "\2192"; font-size: 16px; transition: transform .3s var(--eq-easing); }
    .btn-eq--primary:hover::after { transform: translateX(4px); }
    .btn-eq--ghost { background: transparent; color: var(--eq-ink-strong); border: 1px solid var(--eq-line); }
    .btn-eq--ghost:hover { border-color: var(--eq-em); color: var(--eq-em); }
    .btn-eq--ghost { font-size: 13px; letter-spacing: .14em; }

    /* 64px, not 80px: LP DESIGN REFERENCE Spacing Standards caps sections at
       50-70px and says to favor the lower end. 80px was over the maximum. */
    .section-eq { padding: 64px 0; position: relative; background: var(--eq-paper); }
    .section-eq--warm { background: var(--eq-paper-warm); }
    .section-eq__h2 {
      font-family: var(--eq-display); font-size: clamp(32px,3.6vw,50px); line-height: 1.12;
      font-weight: 500; letter-spacing: -.014em; color: var(--eq-ink-strong);
      margin-bottom: 28px; max-width: 820px; text-wrap: balance;
    }
    /* Mid-section subheading. Same size and weight as the section headline by
       design: it reads as a peer beat, which is what breaks a long section into
       scannable chunks instead of demoting the text under it. Needs generous
       top space because it follows body copy rather than a section boundary. */
    .section-eq__subhead { margin-top: 56px; }
    .section-eq__h2 em { font-style: italic; color: var(--eq-em); font-weight: 500; }
    .section-eq__h2 em.green { color: var(--eq-accent-dark); }
    .section-eq p { color: var(--eq-ink); }

    /* ---- NAV (A12/A13) ---- */
    .nav-eq {
      position: sticky; top: 0; z-index: 40;
      background: color-mix(in srgb, var(--eq-paper) 94%, transparent);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--eq-line);
    }
    .nav-eq__inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 36px; gap: 32px; max-width: 1280px; margin: 0 auto; }
    .nav-eq__logo { display: flex; align-items: center; gap: 12px; }
    .nav-eq__logo img { width: 150px; height: auto; display: block; }
    .nav-eq__mark {
      width: 38px; height: 38px; border-radius: 50%; display: inline-flex;
      align-items: center; justify-content: center; background: var(--eq-accent-wash);
      border: 1px solid var(--eq-accent); color: var(--eq-accent-dark);
      font-family: var(--eq-display); font-weight: 600; font-size: 15px; letter-spacing: .02em;
    }
    /* Mark-only logo art sitting where the initials badge would. Vertical
       lockups (a mark stacked over a wordmark) squash to illegible type inside
       the header, so those clients supply the mark alone via brand.logoMarkUrl
       and keep the practice name as live text.
       Two classes deliberately: the sibling `.nav-eq__logo img` rule is (0,1,1),
       so a single-class rule loses the cascade and the mark renders at the
       lockup's size. Same specificity trap as the whatnext-eq lead contrast
       defect (2026-07-13). */
    .nav-eq__logo img.nav-eq__mark-img { width: auto; height: 38px; max-width: 52px; display: block; object-fit: contain; }
    .nav-eq__name { font-family: var(--eq-display); font-weight: 500; font-size: 18px; color: var(--eq-ink-strong); }
    .nav-eq__links { display: flex; gap: 28px; align-items: center; }
    .nav-eq__links a {
      position: relative; font-family: var(--eq-body); font-size: 15.5px; font-weight: 500;
      color: var(--eq-ink-strong); letter-spacing: .01em; text-decoration: none; padding-bottom: 2px;
    }
    .nav-eq__links a::after {
      content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
      background: var(--eq-em); transform: scaleX(0); transform-origin: left;
      transition: transform .3s var(--eq-easing);
    }
    .nav-eq__links a:hover { color: var(--eq-em); }
    .nav-eq__links a:hover::after { transform: scaleX(1); }
    .nav-eq__start { display: contents; }
    .nav-eq__start--sealed { display: flex; align-items: center; gap: 18px; }
    .nav-eq__seal { display: flex; align-items: center; line-height: 0; }
    /* Explicit width: author CSS outranks the markup's width attribute, and the
       seal the certifier serves is several hundred pixels wide. */
    .nav-eq__seal img { display: block; width: 52px; height: auto; max-width: none; }
    .nav-eq__phone { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--eq-ink-strong); }
    .nav-eq__phone-icon { width: 18px; height: 18px; color: var(--eq-accent-dark); flex: none; }
    .nav-eq__phone-num { font-family: var(--eq-body); font-size: 16px; color: var(--eq-ink-strong); font-weight: 700; letter-spacing: -.005em; }
    .nav-eq__toggle { display: none; background: transparent; border: 0; padding: 8px; cursor: pointer; color: var(--eq-ink-strong); }
    .nav-eq__toggle svg { width: 24px; height: 24px; display: block; }

    /* ---- HERO (A1/A2/A3) ---- */
    /* `center` rather than `stretch`, and a real bottom pad. The hero frame is
       height:100%, so a stretched grid row scales the LCP image up to the row's
       full height and slows the largest paint: measured 93 median / LCP 2.7s
       stretched versus 100 / LCP 1.7s centred, same page and URL (2026-07-28).
       These two rules came from a concurrent in-flight session and were live and
       proven before this branch forked off main without them. */
    .hero-eq { position: relative; padding: 70px 0 40px; overflow: hidden; background: var(--eq-paper); }
    /* `.hero-eq__text` padding-top is 0 rather than 8px because the frame's
       own 10px mat already sets the image top inside the column, and the h1's
       half-leading plus the display face's ascender gap accounts for roughly
       that same distance. Zero here lands the headline cap level with the top
       edge of the image rather than 8px below it. The grid centers rather than
       starts now that the copy column carries a fifth line, the bullets, so the
       column sits against the frame at its middle instead of its top (Decision #121e).
       Centering is safe here because `.hero-eq__frame-inner` caps at 640px: an
       unbounded 3:4 frame centered against short copy is what produced the
       tall-portrait regression of 2026-06-25, and the cap is what retires it. */
    .hero-eq__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 0 36px; }   /* center: the copy sits against the frame (Decision #121e) */
    .hero-eq__text { padding-top: 0; }
    .hero-eq__eyebrow {
      font-family: var(--eq-body); font-size: 11px; font-weight: 700; letter-spacing: .28em;
      text-transform: uppercase; color: var(--eq-accent-dark); display: inline-flex; align-items: center; gap: 14px; margin-bottom: 34px;
    }
    .hero-eq__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--eq-em); }
    .hero-eq__headline {
      font-family: var(--eq-display); font-weight: 500; font-size: clamp(42px,5vw,68px);
      line-height: 1.07; letter-spacing: -.018em; color: var(--eq-ink-strong); margin: 0 0 28px; text-wrap: balance;
    }
    .hero-eq__headline em { font-style: italic; color: var(--eq-em); font-weight: 500; }
    .hero-eq__headline em.green { color: var(--eq-accent-dark); }
    .hero-eq__headline .break { display: block; }
    .hero-eq__sub { font-family: var(--eq-display); font-weight: 400; font-size: 24px; line-height: 1.3; color: var(--eq-ink-strong); margin: 0 0 18px; max-width: 560px; }
    .hero-eq__offer { font-family: var(--eq-body); font-size: 18px; line-height: 1.6; color: var(--eq-ink-soft); max-width: 560px; margin: 0 0 32px; }
    .hero-eq__ctas { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 32px; }
    .btn-eq__phone { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-decoration: none; }
    .btn-eq__phone-tag { font-family: var(--eq-body); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--eq-accent-dark); font-weight: 700; }
    .btn-eq__phone-num { font-family: var(--eq-body); font-size: 22px; color: var(--eq-ink-strong); font-weight: 700; letter-spacing: -.005em; }
    .hero-eq__bullets { list-style: none; margin: 0; padding: 28px 0 0; border-top: 1px solid var(--eq-line); display: grid; grid-template-columns: 1fr; gap: 12px; }
    .hero-eq__bullet { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--eq-ink-soft); letter-spacing: .01em; }
    .hero-eq__bullet-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--eq-accent); flex-shrink: 0; }
    /* The frame declares its own aspect-ratio and no longer tracks the copy
       column's height (#116a). The credit line stays in normal flow beneath
       the frame, which an absolutely-positioned frame would have broken. */
    .hero-eq__visual { position: relative; max-width: 540px; justify-self: end; width: 100%; display: flex; flex-direction: column; }
    .hero-eq__frame { position: relative; width: 100%; background: var(--eq-paper); padding: 10px; box-shadow: 0 0 0 1px var(--eq-accent-wash), 0 40px 80px -32px rgba(30,32,35,.28), 0 12px 30px -18px rgba(30,32,35,.18); border-radius: 3px; }
    .hero-eq__frame-inner { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 640px; overflow: hidden; background: var(--eq-paper-warm); border-radius: 1px; }
    .hero-eq__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: none; display: block; }
    .hero-eq__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--eq-mute); font-family: var(--eq-body); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
    .hero-eq__credit { margin-top: 16px; font-family: var(--eq-body); font-size: 14px; color: var(--eq-ink-soft); letter-spacing: .01em; line-height: 1.45; }
    .hero-eq__leaf {
      position: absolute; top: -22px; right: -22px; width: 200px; height: 200px;
      background: var(--eq-em-wash); border-radius: 52% 48% 56% 44% / 58% 62% 38% 42%; z-index: -1;
    }

    /* ---- TRUST BADGES (A5) ---- */
    /* The stripe sits close under the hero. main still carried an 80px top
       margin which, on top of the hero's own bottom padding, opened a 136px
       gap under the headshot (2026-07-28). Zero here, and the hero's padding
       alone sets the breathing room. */
    .badges-eq { background: var(--eq-paper); border-top: 1px solid var(--eq-line); border-bottom: 1px solid var(--eq-line); margin-top: 0; }
    .badges-eq__row { display: grid; grid-template-columns: repeat(3,1fr); padding: 26px 36px; gap: 32px; align-items: center; max-width: 1280px; margin: 0 auto; }
    .badges-eq__row--2 { grid-template-columns: repeat(2,1fr); }
    .badges-eq__row--4 { grid-template-columns: repeat(4,1fr); }
    /* Five is what a regulated category tends to need (certification, licence,
       privacy, modality, directory). Without its own rule it falls into the
       default three-column grid and orphans two badges on a second row. */
    .badges-eq__row--5 { grid-template-columns: repeat(5,1fr); gap: 22px; }
    .badge-eq { display: flex; align-items: center; gap: 14px; justify-content: center; }
    .badge-eq__icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--eq-accent); border-radius: 50%; background: var(--eq-accent-wash); flex-shrink: 0; }
    .badge-eq__icon svg { width: 18px; height: 18px; color: var(--eq-accent-dark); }
    .badge-eq__text { display: flex; flex-direction: column; }
    .badge-eq__big { font-family: var(--eq-body); font-size: 14.5px; color: var(--eq-ink-strong); font-weight: 700; letter-spacing: -.005em; line-height: 1.2; }
    .badge-eq__small { font-family: var(--eq-body); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--eq-mute); margin-top: 3px; font-weight: 600; }

    /* ---- PROBLEM (A6/A7) ---- */
    .problem-eq__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; }   /* the aligned pair (Decision #121e) */
    /* Image on the left, copy on the right. Mirrors solution-eq__grid--right.
       The copy stays first in the DOM and only the visual is reordered, so
       reading and screen-reader order are unchanged. */
    .problem-eq__grid--left { grid-template-columns: 1fr 1.4fr; }
    .problem-eq__grid--left .problem-eq__visual { order: -1; justify-self: start; }
    .problem-eq__copy p { font-size: 17px; line-height: 1.75; color: var(--eq-ink); margin-bottom: 22px; max-width: 580px; }
    .problem-eq__symptoms { margin-top: 38px; padding: 32px 36px; background: var(--eq-paper-warm); border-left: 3px solid var(--eq-accent); }
    .problem-eq__symptoms ul { list-style: none; margin: 0; padding: 0; }
    .problem-eq__symptoms li { padding: 10px 0 10px 28px; position: relative; font-size: 15.5px; line-height: 1.55; color: var(--eq-ink); border-bottom: 1px solid var(--eq-line); }
    .problem-eq__symptoms li:last-child { border: 0; }
    .problem-eq__symptoms li::before { content: ""; position: absolute; left: 0; top: 18px; width: 14px; height: 1px; background: var(--eq-accent); }
    .problem-eq__close { margin-top: 40px; font-family: var(--eq-body); font-size: 18px; line-height: 1.6; color: var(--eq-ink-strong); max-width: 600px; font-weight: 500; }
    .problem-eq__close strong { color: var(--eq-accent-dark); font-weight: 700; font-style: italic; }
    .problem-eq__visual { position: relative; aspect-ratio: 4 / 5; max-height: 520px; width: 100%; max-width: 416px; justify-self: end; overflow: hidden; }
    .problem-eq__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: none; }
    .problem-eq__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(30,32,35,.32) 100%); pointer-events: none; }

    /* ---- SOLUTION (A8) ---- */
    .solution-eq__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: center; }
    .solution-eq__grid--right { grid-template-columns: 1.4fr 1fr; }
    /* No image supplied: the copy would otherwise sit in one narrow column of a
       two-column grid with the other half empty. Single column on a reading
       measure instead, with the prose broken by subheads rather than an image. */
    .solution-eq__grid--right .solution-eq__visual { order: 2; }
    .solution-eq__grid--right .solution-eq__visual { justify-self: end; }
    .solution-eq__visual { position: relative; aspect-ratio: 4 / 5; max-height: 520px; width: 100%; max-width: 416px; justify-self: start; overflow: hidden; }
    .solution-eq__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: none; }

    /* Slot box (Decision #110): stands in an image's frame on the first pass so the team chooses photographs against
       the finished layout. Same wrapper, same size rules, same mobile behaviour as the image it waits for. Brand-tinted
       through the eq tokens so it reads as this client's page. Listed in manifest.placeholders; lp golive refuses while any stands. */
    .slotbox-eq {
      position: relative; width: 100%; height: 100%; min-height: inherit; box-sizing: border-box; padding: 28px;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
      background: repeating-linear-gradient(135deg, var(--eq-paper-warm) 0 14px, var(--eq-paper) 14px 28px);
      outline: 2px dashed var(--eq-accent); outline-offset: -14px; color: var(--eq-ink-soft); font-family: var(--eq-body);
    }
    .slotbox-eq--headshot { aspect-ratio: 4 / 5; }
    .slotbox-eq--photograph { min-height: 360px; }
    .slotbox-eq__kind { font-family: var(--eq-display); font-size: 26px; line-height: 1.1; color: var(--eq-accent-dark); }
    .slotbox-eq__slot { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--eq-ink); }
    .slotbox-eq__note { font-size: 13px; }
    .solution-eq__copy p { font-size: 17px; line-height: 1.75; color: var(--eq-ink); margin-bottom: 22px; max-width: 560px; }
    .solution-eq__analogy { margin: 36px 0; padding: 26px 30px; background: var(--eq-paper); border: 1px solid var(--eq-line); position: relative; }
    .solution-eq__analogy-label { position: absolute; top: -9px; left: 30px; background: var(--eq-paper); padding: 0 10px; font-family: var(--eq-body); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--eq-accent-dark); font-weight: 700; line-height: 1; }
    .solution-eq__analogy p { font-family: var(--eq-display); font-style: italic; font-size: 18px; line-height: 1.55; color: var(--eq-ink-strong); margin: 0; font-weight: 500; }
    .solution-eq__benefits { list-style: none; margin: 36px 0 28px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
    .solution-eq__benefits li { padding: 14px 14px 14px 22px; font-size: 15.5px; line-height: 1.4; color: var(--eq-ink); border-left: 2px solid var(--eq-accent); background: var(--eq-paper); }
    .solution-eq__benefits li strong { display: block; font-family: var(--eq-body); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--eq-accent-dark); margin-bottom: 4px; }
    .solution-eq__close { font-family: var(--eq-body); font-size: 17px; line-height: 1.65; color: var(--eq-ink-strong); margin: 0 0 32px; font-weight: 500; max-width: 560px; }
    .solution-eq__close strong { color: var(--eq-accent-dark); font-weight: 700; }

    /* ---- TURN: row two of the problem and solution sections, one centered column (Decision #121e) ---- */
    .problem-eq__turn, .solution-eq__turn { margin-top: 64px; }
    .turn-eq { max-width: 640px; margin: 0 auto; text-align: center; }
    .turn-eq .rule-eq { margin-left: auto; margin-right: auto; }
    .turn-eq p { font-size: 17px; line-height: 1.75; color: var(--eq-ink); margin: 0 auto 22px; max-width: 640px; }
    .turn-eq__pull { font-family: var(--eq-display); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--eq-ink-strong); margin: 0 0 20px; }
    .turn-eq__pull-label { display: block; font-family: var(--eq-body); font-style: normal; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--eq-accent-dark); font-weight: 700; margin-bottom: 8px; }
    .turn-eq .problem-eq__symptoms { text-align: left; max-width: 520px; margin: 32px auto 0; }
    .turn-eq .problem-eq__close, .turn-eq .solution-eq__close { max-width: 640px; margin-left: auto; margin-right: auto; }
    .turn-eq .solution-eq__benefits { max-width: 720px; margin: 36px auto 28px; text-align: center; }
    .turn-eq .solution-eq__benefits li { border-left: 0; border-top: 2px solid var(--eq-accent); padding: 16px 14px; }
    .turn-eq .btn-eq { display: inline-flex; }

    /* ---- PROCESS (A14) ---- */
    .process-eq__intro { text-align: center; max-width: 760px; margin: 0 auto 50px; }
    .process-eq__intro .eyebrow-eq { justify-content: center; display: inline-flex; margin-bottom: 24px; }
    .process-eq__intro h2 { margin: 0 auto 18px; text-align: center; }
    .process-eq__intro p { font-size: 17px; color: var(--eq-ink); line-height: 1.65; }
    .process-eq__steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-top: 1px solid var(--eq-line); }
    .process-eq__steps--4 { grid-template-columns: repeat(4,1fr); }
    .process-eq__steps--2 { grid-template-columns: repeat(2,1fr); }
    .process-eq__step { padding: 48px 32px 42px; border-right: 1px solid var(--eq-line); position: relative; background: var(--eq-paper); transition: background .4s var(--eq-easing); }
    .process-eq__step:last-child { border-right: 0; }
    .process-eq__num { font-family: var(--eq-display); font-size: 56px; font-weight: 500; color: var(--eq-em); line-height: 1; margin-bottom: 28px; letter-spacing: -.02em; }
    .process-eq__num sup { font-size: 14px; color: var(--eq-mute); margin-left: 2px; font-weight: 400; vertical-align: top; }
    .process-eq__step h3 { font-family: var(--eq-display); font-weight: 500; font-size: 23px; line-height: 1.25; color: var(--eq-ink-strong); margin-bottom: 14px; letter-spacing: -.01em; }
    .process-eq__step p { font-size: 15.5px; line-height: 1.65; color: var(--eq-ink); margin-bottom: 14px; }
    .process-eq__step p:last-child { margin-bottom: 0; }
    .process-eq__close strong { color: var(--eq-accent-dark); font-style: italic; font-weight: 700; }
    .process-eq__cta { margin-top: 48px; text-align: center; }

    /* ---- TRUST (R4, Decision #120b): one centered column ---- */
    .trust-eq { background: var(--eq-paper-warm); }
    .trust-eq__inner { max-width: 720px; margin: 0 auto; text-align: center; }
    .trust-eq__head .section-eq__h2 { margin-bottom: 20px; text-align: center; text-wrap: balance; }
    .trust-eq__head .rule-eq { margin-left: auto; margin-right: auto; }
    .trust-eq__body p { font-size: 17px; line-height: 1.75; color: var(--eq-ink); margin-bottom: 22px; text-align: center; text-wrap: pretty; }
    .trust-eq__pillars { margin-top: 12px; }
    .trust-eq__pillar { padding: 28px 0; border-top: 1px solid var(--eq-line); }
    .trust-eq__pillar:last-child { border-bottom: 1px solid var(--eq-line); }
    .trust-eq__pillar h4 { font-family: var(--eq-display); font-weight: 500; font-size: 22px; color: var(--eq-ink-strong); margin-bottom: 10px; line-height: 1.3; letter-spacing: -.005em; text-align: center; text-wrap: balance; }
    .trust-eq__pillar p { font-size: 16px; line-height: 1.7; color: var(--eq-ink); text-align: center; text-wrap: pretty; max-width: 620px; margin: 0 auto; }
    .trust-eq__credentials { margin-top: 36px; }
    .trust-eq__credentials ul { list-style: none; padding: 0; margin: 0; }
    .trust-eq__credentials li { font-family: var(--eq-body); font-size: 14px; letter-spacing: .04em; color: var(--eq-ink-soft); line-height: 1.8; }
    .trust-eq__signature { font-family: var(--eq-body); font-style: italic; font-size: 18px; color: var(--eq-accent-dark); margin-top: 28px; font-weight: 500; }

    /* ---- FAQ ---- */
    /* Head above the list rather than beside it. The two-column split gave the
       heading a full column of its own, and with only a title and a button in
       it the rest of that column was dead space taller than the content
       (2026-07-28). Stacking removes the void and lets the answers hold a
       comfortable measure instead of a wide one. */
    .faq-eq__grid { display: block; max-width: 880px; margin: 0 auto; }
    .faq-eq__head { text-align: center; margin-bottom: 44px; }
    .faq-eq__head .section-eq__h2 { max-width: 640px; margin-left: auto; margin-right: auto; }
    .faq-eq__head .rule-eq { margin-left: auto; margin-right: auto; }
    .faq-eq__head p { margin-left: auto; margin-right: auto; }
    .faq-eq__head .eyebrow-eq { margin-bottom: 24px; }
    .faq-eq__head h2 { margin-bottom: 24px; }
    .faq-eq__head p { font-size: 16px; line-height: 1.65; color: var(--eq-ink); max-width: 380px; margin-bottom: 36px; }
    .faq-eq__cta-mobile { display: none; }
    .faq-eq__list { display: flex; flex-direction: column; }
    .faq-eq__item { border-top: 1px solid var(--eq-line); padding: 26px 0; }
    .faq-eq__item:last-child { border-bottom: 1px solid var(--eq-line); }
    .faq-eq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; font-family: var(--eq-display); font-weight: 500; font-size: 20px; line-height: 1.35; color: var(--eq-ink-strong); list-style: none; padding: 2px 0; transition: color .3s var(--eq-easing); letter-spacing: -.005em; }
    .faq-eq__q::-webkit-details-marker { display: none; }
    .faq-eq__q::after { content: "+"; font-family: var(--eq-body); font-weight: 400; font-size: 26px; color: var(--eq-accent); transition: transform .4s var(--eq-easing); flex-shrink: 0; line-height: 1; }
    .faq-eq__item[open] .faq-eq__q::after { transform: rotate(45deg); }
    .faq-eq__item[open] .faq-eq__q { color: var(--eq-accent-dark); }
    .faq-eq__a { padding: 18px 0 4px; font-size: 16px; line-height: 1.7; color: var(--eq-ink); max-width: 720px; }

    /* ---- WHAT HAPPENS NEXT (A11) ---- */
    .whatnext-eq { background: var(--eq-dark); color: var(--eq-paper); overflow: hidden; }
    .whatnext-eq .eyebrow-eq { color: var(--eq-highlight); }
    .whatnext-eq .eyebrow-eq::before { background: var(--eq-highlight); }
    .whatnext-eq__inner { position: relative; }
    .whatnext-eq .section-eq__h2 { color: var(--eq-paper); max-width: 720px; }
    .whatnext-eq .section-eq__h2 em { color: var(--eq-highlight); }
    /* Two classes, so it outranks `.section-eq p` (0,1,1), which would otherwise paint dark ink on the dark band. */
    .whatnext-eq .whatnext-eq__lead { font-size: 17px; line-height: 1.65; color: color-mix(in srgb, var(--eq-paper) 88%, transparent); max-width: 640px; margin: 24px 0 44px; }
    .whatnext-eq__list { list-style: none; padding: 0; margin: 8px 0 0; max-width: 640px; border-top: 1px solid color-mix(in srgb, var(--eq-paper) 15%, transparent); }
    .whatnext-eq__item { position: relative; padding: 22px 0 22px 34px; border-bottom: 1px solid color-mix(in srgb, var(--eq-paper) 15%, transparent); font-size: 16px; line-height: 1.6; color: color-mix(in srgb, var(--eq-paper) 86%, transparent); }
    .whatnext-eq__item::before { content: ""; position: absolute; left: 0; top: 34px; width: 18px; height: 1px; background: var(--eq-highlight); }
    .whatnext-eq__title { display: block; font-family: var(--eq-display); font-weight: 500; font-size: 20px; color: var(--eq-paper); margin-bottom: 6px; }
    .whatnext-eq__item a { color: var(--eq-highlight); border-bottom: 1px solid color-mix(in srgb, var(--eq-highlight) 40%, transparent); }

    /* ---- FORM ---- */
    .form-eq { padding: 64px 0; background: var(--eq-paper); }
    .form-eq__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 96px; align-items: start; }
    .form-eq__copy .eyebrow-eq { margin-bottom: 24px; }
    .form-eq__copy h2 { max-width: 560px; margin-bottom: 28px; }
    .form-eq__copy p { font-size: 17px; line-height: 1.75; color: var(--eq-ink); margin-bottom: 22px; max-width: 560px; }
    .form-eq__detail { font-family: var(--eq-body); font-style: italic; font-size: 16px; color: var(--eq-accent-dark); line-height: 1.6; padding: 18px 22px; background: var(--eq-paper-warm); border-left: 3px solid var(--eq-accent); max-width: 520px; font-weight: 500; }
    .form-eq__detail a { color: var(--eq-accent-dark); border-bottom: 1px solid var(--eq-accent); font-style: normal; }
    .form-eq__payments { margin-top: 18px; }   /* equals the detail callout's vertical padding (Decision #120b) */
    .form-eq__response { font-family: var(--eq-body); font-size: 15px; color: var(--eq-accent-dark); font-weight: 600; margin: -12px 0 22px; }
    .form-eq__card { background: var(--eq-paper-warm); padding: 48px 44px; position: relative; }
    .form-eq__card h3 { font-family: var(--eq-display); font-weight: 500; font-size: 25px; color: var(--eq-ink-strong); margin-bottom: 8px; letter-spacing: -.005em; }
    .form-eq__card-sub { font-family: var(--eq-body); font-size: 14.5px; color: var(--eq-ink); margin-bottom: 28px; }
    .form-eq__field { margin-bottom: 20px; }
    .form-eq__field label { display: block; font-family: var(--eq-body); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--eq-accent-dark); font-weight: 700; margin-bottom: 8px; }
    .form-eq__field input, .form-eq__field select, .form-eq__field textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--eq-line); background: var(--eq-paper); font-family: var(--eq-body); font-size: 15px; color: var(--eq-ink); border-radius: 2px; transition: border-color .3s var(--eq-easing), box-shadow .3s var(--eq-easing); resize: vertical; }
    .form-eq__field input:focus, .form-eq__field select:focus, .form-eq__field textarea:focus { outline: 0; border-color: var(--eq-accent); box-shadow: 0 0 0 3px var(--eq-accent-wash); }
    .form-eq__submit { width: 100%; justify-content: center; margin-top: 8px; }
    .form-eq__fineprint { font-family: var(--eq-body); font-size: 12px; color: var(--eq-ink-soft); margin-top: 18px; line-height: 1.5; text-align: center; }
    .form-eq__scarcity { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--eq-em-wash); color: var(--eq-em); font-family: var(--eq-body); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; margin-bottom: 20px; }
    .form-eq__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--eq-em); animation: eq-pulse 2s ease-in-out infinite; }
    @keyframes eq-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } }

    /* ---- FOOTER ---- */
    .footer-eq { background: var(--eq-dark); color: color-mix(in srgb, var(--eq-paper) 70%, transparent); padding: 40px 0 24px; }
    .footer-eq__top { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid color-mix(in srgb, var(--eq-paper) 12%, transparent); }
    .footer-eq__logo img { width: 140px; height: auto; opacity: .82; }
    /* Knock the logo out to white against the navy band. Scoped to the
       modifier because the transform assumes a transparent asset: on an opaque
       one (a white-background JPEG) brightness(0) blackens the rectangle and
       invert(1) turns it solid white. Critique B2. */
    .footer-eq__logo--knockout img { filter: brightness(0) invert(1); }
    .footer-eq__name { font-family: var(--eq-display); font-size: 20px; color: var(--eq-paper); }
    .footer-eq__contact { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-family: var(--eq-body); font-size: 13.5px; }
    /* Decision #127: each item is a glyph plus its text; the underline sits on the text alone, and the glyph
       reads at the band's 70% paper so the words stay the emphasis. */
    .footer-eq__item { display: inline-flex; align-items: center; gap: 8px; }
    .footer-eq__glyph { flex: 0 0 auto; color: color-mix(in srgb, var(--eq-paper) 70%, transparent); }
    .footer-eq__contact a { color: var(--eq-paper); text-decoration: none; }
    .footer-eq__contact a > span { border-bottom: 1px solid color-mix(in srgb, var(--eq-paper) 35%, transparent); }
    .footer-eq__contact a:hover > span { border-bottom-color: var(--eq-paper); }
    .footer-eq__base { padding-top: 18px; display: flex; justify-content: space-between; align-items: center; font-family: var(--eq-body); font-size: 12px; color: color-mix(in srgb, var(--eq-paper) 72%, transparent); flex-wrap: wrap; gap: 14px; }
    .footer-eq__base a { color: var(--eq-paper); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--eq-paper) 35%, transparent); }
    /* Wraps rather than overflowing: regulated categories put full licensure
       lines here ("Kristin Colton, Registered Associate Marriage and Family
       Therapist, AMFT 158092, …"), which are sentences, not the short chips
       this row was first drawn for. */
    /* Transparent to layout by default, so a sealless footer is unchanged. */
    .footer-eq__base-main { display: contents; }
    .footer-eq__base--sealed { align-items: flex-start; flex-wrap: nowrap; gap: 32px; }
    .footer-eq__base--sealed .footer-eq__base-main { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-width: 0; }
    .footer-eq__base--sealed .footer-eq__seal { flex: 0 0 auto; padding-top: 0; margin-left: auto; }
    .footer-eq__legal { display: flex; gap: 6px 18px; flex-wrap: wrap; max-width: 900px; line-height: 1.55; }
    .footer-eq__address { color: color-mix(in srgb, var(--eq-paper) 85%, transparent); }

    /* ---- CERTIFICATION SEALS ---- */
    /* Verification seals are supplied as markup by the certifying body, so the
       page styles the wrapper and leaves the <img> geometry to their markup
       (it carries its own width/height, which is what keeps CLS at zero). */
    .footer-eq__seal img { display: block; height: auto; }
    .footer-eq__seal { padding-top: 22px; }

    /* ---- REDUCED MOTION (B8) ---- */
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; animation: none; }
      .form-eq__pulse { animation: none; }
      .process-eq__step { transition: none; }
    }

    /* ---- RESPONSIVE ---- */
    @media (max-width: 960px) {
      .wrap-eq, .hero-eq__inner, .nav-eq__inner, .badges-eq__row { padding-left: 24px; padding-right: 24px; }
      .nav-eq__links { display: none; }
      .hero-eq__inner { grid-template-columns: 1fr; gap: 40px; }
      .hero-eq__visual { justify-self: stretch; max-width: 420px; margin: 0 auto; }
      .badges-eq__row, .badges-eq__row--2, .badges-eq__row--4 { grid-template-columns: 1fr 1fr; gap: 18px 24px; }
      .badge-eq { justify-content: flex-start; }
      .section-eq, .form-eq { padding: 60px 0; }
      .problem-eq__grid, .problem-eq__grid--left, .solution-eq__grid, .solution-eq__grid--right, .faq-eq__grid, .form-eq__grid { grid-template-columns: 1fr; gap: 48px; }
      .process-eq__steps, .process-eq__steps--4 { grid-template-columns: 1fr 1fr; }
      .process-eq__step { border-right: 0; border-bottom: 1px solid var(--eq-line); }
      .solution-eq__benefits { grid-template-columns: 1fr; }
      /* The frames keep 4:5 through the tablet band. Stretching them to the stacked column's full width made a
         416-wide portrait into an 852-wide one at 900px and drove its height past the copy beside it; the cap and
         the centering hold the ratio the spec declares (ruled at the final review, 2026-09-08).
         Media blocks accumulate, so these three sizing declarations reach the phone band too and the 540 block
         below has to undo them by name. It re-declares max-width, max-height and margin on the same four
         selectors; without that a 500px phone clipped the frame to 416 and centered it in gutters instead of
         running edge to edge at 16:10 (final re-review, 2026-09-08). */
      .problem-eq__visual, .solution-eq__visual,
      .problem-eq__grid--left .problem-eq__visual, .solution-eq__grid--right .solution-eq__visual { max-width: 416px; max-height: 520px; margin: 0 auto; justify-self: center; }
      .footer-eq__top, .footer-eq__base { flex-direction: column; align-items: flex-start; gap: 18px; }
      .footer-eq__contact { flex-direction: column; align-items: flex-start; gap: 12px; }
      .footer-eq__base--sealed { flex-wrap: wrap; gap: 22px; }
      .footer-eq__base--sealed .footer-eq__seal { margin-left: 0; }
    }
    @media (max-width: 540px) {
      .wrap-eq, .hero-eq__inner, .nav-eq__inner { padding-left: 20px; padding-right: 20px; }
      .nav-eq__start--sealed { gap: 12px; }
      .nav-eq__seal img { width: 40px; }
      .nav-eq__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 16px; gap: 0; }
      /* All three pin to row 1 explicitly. DOM order is logo, toggle, links,
         phone, but the columns run 1, 3, 2 — so under sparse auto-placement
         the toggle at column 3 advances the cursor past column 2, and the
         phone (last in DOM, column 2) is forced onto a second row. That
         stranded the phone against the header's bottom border at 121px tall
         instead of centering it beside the logo. */
      .nav-eq__logo, .nav-eq__phone, .nav-eq__toggle { grid-row: 1; }
      .nav-eq__logo { grid-column: 1; justify-self: start; }
      .nav-eq__logo img { width: 118px; }
      /* Mark + live name share one grid column here, so the mark stays small
         and the name steps down a size; otherwise the practice name wraps to
         three lines and doubles the header height. */
      .nav-eq__logo img.nav-eq__mark-img { height: 28px; max-width: 32px; }
      .nav-eq__logo:has(.nav-eq__mark-img) { gap: 8px; }
      .nav-eq__logo:has(.nav-eq__mark-img) .nav-eq__name { font-size: 15px; }
      .nav-eq__phone { grid-column: 2; justify-self: center; flex-direction: row; align-items: baseline; gap: 0; }
      .nav-eq__phone-num { font-size: 15px; font-weight: 700; color: var(--eq-ink-strong); white-space: nowrap; }
      .nav-eq__toggle { grid-column: 3; justify-self: end; display: inline-flex; }
      .nav-eq__links { position: absolute; top: 100%; left: 0; right: 0; background: var(--eq-paper); flex-direction: column; gap: 0; padding: 8px 24px 16px; border-bottom: 1px solid var(--eq-line); box-shadow: 0 12px 24px rgba(30,32,35,.10); }
      .nav-eq__links.is-open { display: flex; }
      .nav-eq__links a { padding: 14px 0; border-bottom: 1px solid var(--eq-line); font-size: 15px; }
      .nav-eq { position: relative; }
      .hero-eq { padding: 20px 0 8px; }
      .hero-eq__inner { display: flex; flex-direction: column; gap: 20px; }
      .hero-eq__text { order: 2; }
      /* The 42vw lockup (Decision #120m): frame and credit side by side above the headline. Measured 2026-09-07 on
         Angela Dean's page at 390x844: headline top 327px, CTA bottom 599px. */
      .hero-eq__visual { order: 1; max-width: none; margin: 0; display: flex; flex-direction: row; align-items: flex-end; gap: 16px; width: 100%; }
      .hero-eq__frame { width: 42vw; flex: none; padding: 0; box-shadow: none; background: none; }
      .hero-eq__frame-inner { aspect-ratio: 3 / 4; max-height: none; }
      .hero-eq__leaf { display: none; }
      .hero-eq__credit { margin: 0 0 4px; font-size: 13px; }
      .hero-eq__headline { font-size: clamp(28px,8vw,36px); }
      .hero-eq__ctas { flex-direction: column; align-items: stretch; }
      .hero-eq__ctas .btn-eq { width: 100%; justify-content: center; }
      .btn-eq__phone { flex-direction: row; align-items: baseline; gap: 10px; align-self: center; }
      .badges-eq__row, .badges-eq__row--2, .badges-eq__row--4 { grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 18px 20px; }
      .badge-eq__small { display: none; }
      .section-eq, .form-eq { padding: 44px 0; }
      /* max-width, max-height and margin are reset by name: the 960 block's tablet cap reaches this band, and the
         phone contract (#116, #120l) is a full-width 16:10 frame with no gutter. The two grid-variant selectors are
         listed so the cap cannot win here on specificity (final re-review, 2026-09-08). */
      .problem-eq__visual, .solution-eq__visual,
      .problem-eq__grid--left .problem-eq__visual, .solution-eq__grid--right .solution-eq__visual { aspect-ratio: 16 / 10; order: -1; width: 100%; max-width: none; max-height: none; margin: 0; }
      .problem-eq__visual::after { content: none; }
      .solution-eq__benefits { grid-template-columns: 1fr 1fr; }
      .whatnext-eq__list { max-width: none; }
      .process-eq__steps, .process-eq__steps--4 { grid-template-columns: 1fr; }
      .process-eq__step { border-right: 0; border-bottom: 1px solid var(--eq-line); }
      .faq-eq__cta-desktop { display: none; }
      .faq-eq__cta-mobile { display: inline-flex; width: 100%; justify-content: center; margin-top: 24px; }
    }

/* Port rule 3 (SPEC §4): anchor targets land below the sticky nav. --eq-nav-h is set in template.njk from the measured nav height. */
[id] { scroll-margin-top: calc(var(--eq-nav-h, 64px) + 8px); }

/* Port defects from the 2026-09-02 visual pass. The nav logo rule above sizes by width alone, so a square or tall
   lockup grows the sticky bar with it (187px on the fixture). Contain it inside the bar instead. */
.nav-eq__logo img { width: auto; height: 48px; max-width: 150px; object-fit: contain; object-position: left center; }
@media (max-width: 540px) { .nav-eq__logo img { height: 40px; max-width: 118px; } }
/* The success block the lead POST reveals on the Worker's 200; its text is the form.success slot. It sits inside the
   card in the submit button's slot (same top margin) and the card stays on the page with its fields locked, so the
   reader keeps their place and their own words (Decision #125, LP-2026-09-08-012). Inline-level like the button, so the
   last field's bottom margin does not collapse into it and the block lands on the button's exact top. The display is
   set only on the sent card: a display on the base rule would override the hidden attribute and paint it on load. */
.form-eq__success { width: 100%; margin-top: 8px; padding: 22px 24px; background: var(--eq-paper); border-left: 3px solid var(--eq-accent); font-family: var(--eq-body); font-size: 17px; line-height: 1.6; color: var(--eq-ink); }
/* The button is an inline-flex .btn-eq, so the hidden attribute alone does not remove it from the sent card. */
.form-eq__card.is-sent .form-eq__submit { display: none; }
.form-eq__card.is-sent .form-eq__success { display: inline-block; vertical-align: top; }
.form-eq__card.is-sent .form-eq__field input:disabled, .form-eq__card.is-sent .form-eq__field select:disabled, .form-eq__card.is-sent .form-eq__field textarea:disabled { color: var(--eq-ink); opacity: .6; cursor: default; -webkit-text-fill-color: var(--eq-ink); }
/* The failure line the lead POST reveals when the Worker answers anything but 200; its text is the form.error slot. Hidden again on the next submit. */
.form-eq__error { margin: 14px 0 0; font-family: var(--eq-body); font-size: 16px; line-height: 1.55; color: var(--eq-accent); }