/* 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: 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);
    }

    /* ========================================
       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: 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__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, section-label 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, label 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; }

    .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 (eq@2.0, Decision #172b): a full-bleed banner with a copy card ---- */
    /* The banner is the LCP and is positioned behind a 12-column grid; the card sits on the grid's left columns
       over a scrim graded from the card side, so the photograph reads on the open side. The 520 to 720px clamp caps the
       banner crop (21:9 of a 16:9 source), and the hero's total height may exceed 720px when the card plus its padding
       is taller, as with four bullets at 1440 (Decision #172, ruling R14). */
    .hero-eq20 { position: relative; overflow: hidden; background: var(--eq-dark); }
    .hero-eq20__banner { position: absolute; inset: 0; }
    .hero-eq20__banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; filter: none; }
    .hero-eq20__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--eq-dark) 55%, transparent) 0%, color-mix(in srgb, var(--eq-dark) 35%, transparent) 45%, color-mix(in srgb, var(--eq-dark) 10%, transparent) 100%); }
    .hero-eq20__inner { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 64px 36px; box-sizing: border-box; min-height: clamp(520px, 42.86vw, 720px); }
    .hero-eq20__card { grid-column: 1 / span 7; background: var(--eq-paper); padding: 32px; border-radius: 3px; 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); }
    @media (min-width: 1280px) { .hero-eq20__card { grid-column: 1 / span 6; padding: 40px; } }
    .hero-eq__headline {
      font-family: var(--eq-display); font-weight: 500; font-size: clamp(34px,3.6vw,52px);
      line-height: 1.08; letter-spacing: -.018em; color: var(--eq-ink-strong); margin: 0 0 22px; 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 28px; }
    .hero-eq__ctas { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 28px; }
    .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: 24px 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; }

    /* ---- 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--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 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 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__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 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, .nav-eq__inner, .badges-eq__row { padding-left: 24px; padding-right: 24px; }
      /* Under 961px the banner is a band above a full-width card (Decision #172b): no text over a photograph on a phone. */
      .hero-eq20__banner { position: relative; aspect-ratio: 16 / 10; }
      .hero-eq20__scrim { display: none; }
      .hero-eq20__inner { display: block; padding: 0; min-height: 0; max-width: none; }
      .hero-eq20__card { box-shadow: none; border-radius: 0; padding: 32px 24px 36px; }
      /* The H1 step-down belongs to the desktop card; the full-width card under 961px takes 1.1's own size, and the 540 block below keeps 1.1's phone size (ruling R15). */
      .hero-eq__headline { font-size: clamp(42px,5vw,68px); }
      .nav-eq__links { display: none; }
      .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, .nav-eq__inner { padding-left: 20px; padding-right: 20px; }
      .hero-eq20__banner { aspect-ratio: 4 / 3; }
      .hero-eq20__card { padding: 28px 20px 32px; }
      .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__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; } }

/* Decision #147d: the subheadings a producer writes in sentence case paint Title Case. The step h3s, the pillar h4s
   and the what-next titles; the section h2s arrive in Title Case from the arena and get no rule, so their small words
   stay as written. Reversed 2026-09-24 (Joyce): the rule capitalized every word, small words included, so a
   producer's deliberate "and", "the" or "is" was overpainted. The producer's own spelling stands. */
.process-eq__step h3, .trust-eq__pillar h4, .whatnext-eq__title { text-transform: none; }
/* 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); }

    /* ========================================
       eq@1.1: TESTIMONIALS in the EQ register (Decision #143f)
       The card classes above (.testimonials__grid, .testimonial-card, .testimonial-featured) are the port's
       contract; these rules seat them on the EQ surfaces: paper, hairlines, no drop shadow, no stars.
       ======================================== */
    .testimonials-eq { background: var(--eq-paper); }
    .testimonials-eq__head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
    .testimonials-eq__head .section-eq__h2 { text-align: center; text-wrap: balance; }
    .testimonials-eq__head .rule-eq { margin-left: auto; margin-right: auto; }
    .testimonials-eq .testimonials__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .testimonials-eq .testimonials__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .testimonials-eq .testimonial-card,
    .testimonials-eq .testimonial-featured { background: var(--eq-paper-warm); box-shadow: none; border: 1px solid var(--eq-line); border-radius: 2px; margin: 0; }
    .testimonials-eq .testimonial-card { padding: 32px 28px; }
    .testimonials-eq .testimonial-featured { padding: 48px 44px; margin: 0 auto; }
    .testimonials-eq .testimonial-featured::before { color: var(--eq-accent); opacity: .18; }
    .testimonials-eq .testimonial-card__quote,
    .testimonials-eq .testimonial-featured__quote { margin: 0 0 20px; font-style: italic; color: var(--eq-ink); text-wrap: pretty; }
    .testimonials-eq .testimonial-card__quote { font-size: 16px; line-height: 1.7; }
    .testimonials-eq .testimonial-featured__quote { font-family: var(--eq-display); font-weight: 500; font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.55; color: var(--eq-ink-strong); margin-bottom: 24px; }
    .testimonials-eq .testimonial-card__footer { border-top: 1px solid var(--eq-line); padding-top: 16px; margin-top: auto; }
    .testimonials-eq .testimonial-card__who { display: flex; flex-direction: column; line-height: 1.4; }
    .testimonials-eq .testimonial-card__avatar { background: var(--eq-paper); border: 1px solid var(--eq-line); color: var(--eq-ink-strong); font-family: var(--eq-display); }
    .testimonials-eq .testimonial-card__name,
    .testimonials-eq .testimonial-featured__name { font-family: var(--eq-body); font-size: 14px; font-weight: 600; color: var(--eq-ink-strong); }
    .testimonials-eq .testimonial-card__detail,
    .testimonials-eq .testimonial-featured__detail { font-family: var(--eq-body); font-size: 13px; color: var(--eq-ink-soft); display: block; }
    .testimonials-eq .testimonial-featured figcaption { display: flex; flex-direction: column; gap: 2px; }
    @media (max-width: 960px) {
      .testimonials-eq .testimonials__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 768px) {
      .testimonials-eq .testimonials__grid,
      .testimonials-eq .testimonials__grid--3 { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .testimonials-eq .testimonial-card { padding: 24px 20px; }
      .testimonials-eq .testimonial-featured { padding: 32px 22px; }
    }
/* Decision #164 (LP-2026-09-25-007, -006 folded in): a long word wraps in the footer contact, the content lists, the
   CTAs and the buttons, so an email address, a long bullet or a long CTA label stays inside a 320px viewport in any face.
   `anywhere` over `break-word`: only `anywhere` counts its break points in the min-content size, and the overflowing
   boxes are flex and grid items whose automatic minimum width is that min-content size (Colleen's footer email span, a
   flex item; Angela's benefits li, a grid item; the CTA's text in the hero's flex column). Safari 15.4 and later
   (MDN browser-compat-data, css.properties.overflow-wrap.anywhere; property reference,
   https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap). Headings carry no rule, so gate 5 still refuses an
   unbreakable headline. */
.footer-eq__contact, .hero-eq__bullets, .problem-eq__symptoms ul, .solution-eq__benefits, .trust-eq__credentials ul, .whatnext-eq__list, .btn-eq, .btn-eq__phone { overflow-wrap: anywhere; }