/*
Theme Name: Survivors Of Abuse NJ
Theme URI: https://survivorsofabusenj.com
Author: Sonic
Description: Custom trauma-informed authority theme for Survivors Of Abuse NJ. Renders from post_content and registered post meta. Owns title tags, meta descriptions, canonicals and JSON-LD. No SEO plugin required or permitted.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: soanj
*/

/* ==========================================================================
   1. Tokens  (values computed and verified in STYLE-GUIDE.md, not estimated)
   ========================================================================== */

/*
 * Palette: diliberto-soa (survivorsofabusepa.com), adopted 2026-08-08 at the
 * operator's direction. Token NAMES are unchanged so component rules did not
 * have to be rewritten; only the values moved.
 *
 * Every pair below was computed against actual usage, not copied on trust.
 * Two values are NOT PA's, for reasons stated inline.
 */
:root {
  --ground:#F8F6F2;          /* PA --paper */
  --surface:#FFFFFF;
  --tint:#E7F1F0;            /* PA --sand, alternate sections */

  --ink:#1E2A2B;             /* 13.69:1 on paper */
  --ink-muted:#5C6B6B;       /* PA --slate, 5.16:1 */
  --heading:#16263D;         /* PA --navy. PA sets headings navy and CTAs teal. 14.11:1 */

  --primary:#0E6E70;         /* PA --teal, brand + CTA. white on it = 6.03:1 */
  --primary-deep:#0B5B5D;    /* PA --teal-deep, button hover. white = 7.87:1 */
  --accent:#0E6E70;          /* focus ring, 5.59:1 on paper */
  --accent-quiet:#0B5B5D;    /* inline links, 7.29:1 on paper */
  --gold:#D9A24A;            /* PA --gold. 2.11:1 on paper, so FILLS AND DARK GROUNDS ONLY */

  --line:#E6E2DA;            /* PA --border. 1.2:1, decorative hairlines only */
  /* NOT PA's border. Form and control outlines must meet WCAG 1.4.11 at 3:1,
     and #E6E2DA is 1.2:1. This is the same hue darkened to 3.5:1. */
  --line-strong:#8C8272;

  --danger:#B4453C;          /* PA --danger. white on it = 5.44:1 */
  --affirm:#0E6E70;          /* PA --success is the teal */

  --band:#16263D; --band-ink:#DCE4EC; --band-muted:#A9B7C6;   /* the one dark band */

  --font-display:"Source Serif 4",Charter,Georgia,serif;
  --font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --fs-answer:clamp(1.25rem,1.05rem + 1vw,1.625rem);
  --fs-h1:clamp(2rem,1.5rem + 2.5vw,3.25rem);
  --fs-h2:clamp(1.5rem,1.25rem + 1.25vw,2.125rem);
  --fs-h3:clamp(1.25rem,1.1rem + .75vw,1.5rem);
  --fs-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --fs-small:.9375rem;

  --lh-body:1.7; --measure:68ch;
  --radius:10px; --radius-lg:16px;                 /* softer, matching PA's feel */
  --shadow:0 1px 2px rgba(22,38,61,.06), 0 2px 8px rgba(22,38,61,.06);
  --shadow-md:0 10px 30px rgba(22,38,61,.10);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --wrap:72rem;
}

/*
 * SINGLE THEME, LIGHT ONLY. Operator decision 2026-08-08.
 *
 * An earlier build shipped a full dark palette behind prefers-color-scheme.
 * It was removed rather than merely defaulted off, so there is exactly one
 * set of colours to reason about and no possibility of a visitor's OS setting
 * producing a look nobody has reviewed.
 *
 * Every colour above is painted explicitly, so the page holds regardless of
 * the host or browser ground.
 */

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.25;margin:0 0 var(--s4);color:var(--heading)}
h1{font-size:var(--fs-h1);letter-spacing:-.015em}
h2{font-size:var(--fs-h2);margin-top:var(--s8)}
h3{font-size:var(--fs-h3);margin-top:var(--s6)}
p,ul,ol{margin:0 0 var(--s5);max-width:var(--measure)}
li{margin-bottom:var(--s2)}
strong{font-weight:600}

a{color:var(--accent-quiet);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

/* Focus is never removed. 2px ring, 2px offset. Teal on paper = 5.59:1. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

::selection{background:var(--gold);color:#1E2A2B}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}
.prose{max-width:var(--measure)}
.section{padding-block:var(--s8)}
@media (min-width:768px){.section{padding-block:var(--s9)}}

/* Alternating grounds give the page rhythm without any gradient. */
.section--tint{background:var(--tint);color:var(--ink)}

/* Exactly ONE dark band on the page. Used for the closing section, where the
   visitor has finished reading and the page asks. Dark as an accent, never as
   the whole theme. */
.section--band{background:var(--band);color:var(--band-ink)}
.section--band h1,.section--band h2,.section--band h3{color:#fff}
.section--band p{color:var(--band-ink)}
.section--band .cta-note{color:var(--band-muted)}
.section--band a:not(.btn){color:var(--gold)}
.section--band .btn{background:var(--gold);border-color:var(--gold);color:#1E2A2B}
.section--band .btn:hover,.section--band .btn:focus{background:#E8B36A;border-color:#E8B36A;color:#1E2A2B}
.section--band .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.section--band .btn--ghost:hover,.section--band .btn--ghost:focus{background:transparent;border-color:#fff;color:#fff}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--primary);color:#fff;padding:var(--s3) var(--s5);
  font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0}

/* ==========================================================================
   5. Header and nav
   ========================================================================== */

/* White, deliberately NOT var(--ground). The header carried the same value
   as the body background with only a 1px rule between them, which reads as
   an unfinished page more than any single element does. The masthead needs
   its own surface. */
.site-header{border-bottom:1px solid var(--line);background:var(--surface);color:var(--ink)}
/* min-width:0 on the flex children stops long content forcing an overflow. */
.site-header__inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding-block:var(--s4);min-width:0}
.site-header__inner > *{min-width:0}
/* The legacy lockup: gold star over a white column, grey "Survivors Of Abuse NJ"
   wordmark. Carried forward from the old site rather than replaced. Its native
   ratio is 9:1, so it is sized by height and left to find its own width. */
.site-logo{display:inline-flex;align-items:center;text-decoration:none;flex:none;min-width:0}
.site-logo img{height:44px;width:auto;display:block}       /* mark, small screens */
@media (min-width:720px){.site-logo img{height:44px}}       /* full lockup */
@media (min-width:1000px){.site-logo img{height:50px}}
.site-nav ul{display:flex;flex-wrap:wrap;gap:var(--s5);list-style:none;margin:0;padding:0;max-width:none}
.site-nav a{color:var(--ink);text-decoration:none;font-size:var(--fs-small);font-weight:500}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--accent-quiet);text-decoration:underline}
@media (max-width:900px){.site-nav{display:none}}

.header-phone{
  display:inline-flex;flex-direction:column;font-size:var(--fs-small);color:var(--ink);text-decoration:none;
}
.header-phone strong{font-size:1.0625rem;color:var(--primary)}
.header-phone span{color:var(--ink-muted);font-size:.8125rem}

/* ==========================================================================
   6. Hero  (no gradient, no image behind text, answer above the fold)
   ========================================================================== */

.hero{padding-block:var(--s8) var(--s7);border-bottom:1px solid var(--line)}
.hero__kicker{
  font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-quiet);margin:0 0 var(--s3)
}
.hero h1{margin-bottom:var(--s5);max-width:20ch}

/* Inner-page hero. Same two-column grid as the homepage, but the copy column is
   given more of the width and the portrait less: an inner page's job is to
   answer a specific question, and the photograph is there to attach a face to
   the answer rather than to introduce him. The H1 is longer here because it
   carries the case type and the state. */
.hero--inner h1{max-width:26ch}
@media (min-width:900px){
  .hero--inner .hero__grid{grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr)}
}
/* Scoped with the section class, not the modifier alone. `.hero__portrait--inner`
   and `.hero__portrait` have equal specificity, so the base rule further down
   the file won and the phone portrait rendered at 320px instead of 200px. */
.hero--inner .hero__portrait picture{max-width:320px}
/* On a phone the portrait sits below the CTA and the trust row, so at that size
   it is decorative. Keep it small enough that it never pushes what follows out
   of reach. */
@media (max-width:899px){
  .hero--inner .hero__portrait{max-width:200px;margin-top:var(--s5)}
}

/* Two columns on desktop. On mobile the portrait comes AFTER the copy via
   source order, so the answer stays above the fold, which is the one thing
   this page cannot trade away. */
.hero__grid{display:grid;gap:var(--s6);grid-template-columns:1fr;align-items:center}

/* Contact hero: copy on the left, form on the right, on desktop only.
   Source order is intro -> form -> support so a phone gets the form directly
   after the answer box, which is the whole point of the change.

   grid-template-rows:auto 1fr is LOAD-BEARING. The form spans both rows and is
   much taller than the copy beside it. With the default auto auto the two rows
   share the form's height and a dead gap opens between the CTA and the trust
   row. Pin row 1 to its content and let the slack fall into row 2. */
.hero__form{min-width:0}
.hero__support{min-width:0}
@media (min-width:900px){
  .hero__grid--contact{
    grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    grid-template-areas:"intro form" "support form";
    grid-template-rows:auto 1fr;
    align-items:start;
  }
  .hero__intro{grid-area:intro}
  .hero__form{grid-area:form}
  .hero__support{grid-area:support}
}
@media (max-width:899px){
  /* Nothing may push the first input further down on a phone. */
  .hero--contact .hero__support{margin-top:var(--s6)}
}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s8)}
}
.hero__portrait{margin:0;display:flex;flex-direction:column;align-items:center}
/* <picture> is an inline wrapper with no box of its own to inherit sizing, so
   the width constraint moved here from the img. Left on the img alone, the
   picture collapsed to intrinsic width inside the flex column and the portrait
   rendered full-bleed. */
.hero__portrait picture{display:block;width:100%;max-width:420px}
.hero__portrait img{
  width:100%;height:auto;border-radius:var(--radius-lg);
  border:1px solid var(--line);
}
@media (max-width:899px){
  .hero__portrait{max-width:320px;margin-top:var(--s6)}
}

/* Name card, sitting under the portrait and overlapping it slightly.
   Pattern taken from the PA build's hero-photo__badge. It exists to make the
   citable facts, the bar number above all, visible in the first screenful
   rather than only in schema. */
.hero__card{
  position:relative;z-index:2;margin-top:-18px;text-align:center;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--s4) var(--s5);
  box-shadow:var(--shadow-md);max-width:340px;color:var(--ink)}
.hero__card strong{
  display:block;font-family:var(--font-display);font-size:1.0625rem;
  color:var(--heading);line-height:1.2;
}
.hero__card .hero__card-bar{
  display:block;margin-top:var(--s2);font-size:.8125rem;font-weight:600;
  color:var(--primary);letter-spacing:.01em;
}
.hero__card .hero__card-meta{
  display:block;margin-top:var(--s1);font-size:.75rem;color:var(--ink-muted);line-height:1.4;
}

/* ==========================================================================
   7. Answer box  (Pillar 3. Never faded in, never collapsed, never truncated.)
   ========================================================================== */

.answer{
  background:var(--surface);border-left:3px solid var(--primary);
  padding:var(--s5) var(--s5) var(--s5) var(--s6);
  margin:0 0 var(--s6);max-width:var(--measure);
  font-size:var(--fs-answer);font-weight:600;line-height:1.55;color:var(--ink);
  border-radius:0 var(--radius) var(--radius) 0;
}
.answer p{margin:0;max-width:none;font-size:inherit}
.answer p + p{margin-top:var(--s4);font-weight:400;font-size:var(--fs-body)}

/* ==========================================================================
   8. CTA  (permission, not pressure)
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:var(--s3) var(--s6);
  background:var(--primary);color:var(--ground);      /* 12.25:1 */
  font-family:var(--font-body);font-size:1.0625rem;font-weight:600;
  border:2px solid var(--primary);border-radius:var(--radius);
  text-decoration:none;cursor:pointer;
}
.btn:hover,.btn:focus{background:var(--primary-deep);border-color:var(--primary-deep);color:var(--ground)}
.btn--ghost{background:transparent;color:var(--primary);border-color:var(--line-strong)}
.btn--ghost:hover,.btn--ghost:focus{background:transparent;border-color:var(--primary);color:var(--primary)}
.cta-group{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;margin-bottom:var(--s3)}
.cta-note{font-size:var(--fs-small);color:var(--ink-muted);margin:0}

/* ==========================================================================
   9. Cards
   ========================================================================== */

.card-grid{display:grid;gap:var(--s5);grid-template-columns:1fr;list-style:none;padding:0;margin:0;max-width:none}
@media (min-width:640px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.card-grid{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s5);margin:0;color:var(--ink)}
.card h3{margin:0 0 var(--s3);font-size:1.1875rem}
.card p{margin:0 0 var(--s3);font-size:var(--fs-small);color:var(--ink-muted);max-width:none}
.card a{font-weight:600}

/* ==========================================================================
   10. FAQ  (always open. No accordions anywhere on this site.)
   ========================================================================== */

.faq{margin-top:var(--s7)}
.faq__item{padding-block:var(--s5);border-top:1px solid var(--line);max-width:var(--measure)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__item h3{margin:0 0 var(--s3);font-size:1.1875rem}
.faq__item p:last-child{margin-bottom:0}

/* ==========================================================================
   11. E-E-A-T band
   ========================================================================== */

.eeat{
  display:flex;flex-wrap:wrap;gap:var(--s5);align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s5);margin-block:var(--s7);max-width:var(--measure);color:var(--ink)}
.eeat__photo{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none}
.eeat__body{flex:1 1 16rem}
.eeat__name{font-family:var(--font-display);font-size:1.1875rem;font-weight:600;margin:0 0 var(--s1)}
.eeat__bar{font-size:var(--fs-small);color:var(--ink-muted);margin:0 0 var(--s3)}
.eeat__creds{font-size:var(--fs-small);margin:0;color:var(--ink)}

/* ==========================================================================
   10a. Sonic Boom: trust row  (section 1, under the hero CTA)
   ========================================================================== */

.trust-row{
  display:grid;gap:var(--s4);grid-template-columns:1fr;list-style:none;
  margin:var(--s6) 0 0;padding:var(--s5) 0 0;border-top:1px solid var(--line);max-width:none
}
@media (min-width:560px){.trust-row{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.trust-row{grid-template-columns:repeat(4,1fr);gap:var(--s5)}}
.trust-row li{margin:0}
.trust-row strong{
  display:block;font-family:var(--font-display);font-size:1rem;color:var(--heading);line-height:1.25
}
.trust-row span{display:block;margin-top:var(--s1);font-size:.8125rem;color:var(--ink-muted);line-height:1.45}

/* ==========================================================================
   10b. Sonic Boom: problem awareness  (section 2)
   ========================================================================== */

.problem-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--s5);grid-template-columns:1fr;max-width:none}
@media (min-width:800px){.problem-list{grid-template-columns:repeat(2,1fr);gap:var(--s6)}}
.problem-list__item{
  margin:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--s5);color:var(--ink)}
.problem-list__item h3{
  margin:0 0 var(--s3);font-size:1.125rem;color:var(--heading);font-style:italic;font-weight:600
}
.problem-list__item p{margin:0;font-size:var(--fs-small);color:var(--ink);max-width:none}

/* ==========================================================================
   10c. Sonic Boom: sticky call bar  (section 6, mobile-first)
   ========================================================================== */

.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--band);border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -8px 28px rgba(22,38,61,.22);
  opacity:0;transition:opacity 250ms ease-out;pointer-events:none;color:var(--band-ink)}
.sticky-cta.is-visible{opacity:1;pointer-events:auto}
.sticky-cta__inner{
  max-width:var(--wrap);margin-inline:auto;
  padding:var(--s3) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4)
}
.sticky-cta__txt{color:var(--band-muted);font-size:.8125rem;font-weight:600}
.sticky-cta__btns{display:flex;gap:var(--s3);align-items:center}
.sticky-cta .btn{background:var(--gold);border-color:var(--gold);color:#1E2A2B;min-height:44px;padding:var(--s3) var(--s5)}
.sticky-cta .btn:hover,.sticky-cta .btn:focus{background:#E8B36A;border-color:#E8B36A;color:#1E2A2B}
.sticky-cta .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.sticky-cta .btn--ghost:hover,.sticky-cta .btn--ghost:focus{background:transparent;border-color:#fff;color:#fff}
@media (max-width:640px){
  .sticky-cta__txt{display:none}
  .sticky-cta__btns{width:100%}
  .sticky-cta__btns .btn{flex:1 1 auto;justify-content:center}
}
/* Desktop has the number in the header at all times, so the bar is mobile-only. */
@media (min-width:900px){.sticky-cta{display:none}}
@media (prefers-reduced-motion: reduce){.sticky-cta{transition:none}}

/* ==========================================================================
   11a. Team photograph
   ========================================================================== */

.team{margin-block:var(--s7);max-width:var(--measure)}
.team figure{margin:0}
/* <picture> around an inline logo / thumbnail: contents keeps the img as the
   direct layout child so existing flex and sizing rules keep applying. */
.site-logo picture,.eeat picture{display:contents}
.team picture{display:block}

/* Map embed. 100% width, fixed aspect so the box is reserved before the iframe
   loads and nothing below it jumps. The iframe carries width/height attributes
   for the same reason; CSS overrides both. */
.footer-menu{list-style:none;margin:0;padding:0}
.footer-menu li{margin-bottom:var(--s3)}
.footer-menu a{color:var(--ink);text-decoration:none}
.footer-menu a:hover,.footer-menu a:focus{text-decoration:underline;text-decoration-thickness:2px}
.map-embed{margin-block:var(--s7);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);color:var(--ink)}
.map-embed iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0}
@media (max-width:599px){.map-embed iframe{aspect-ratio:4/3}}
.team img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line)}
.team figcaption{font-size:var(--fs-small);color:var(--ink-muted);margin-top:var(--s3)}

/* ==========================================================================
   11b. Case results  (RPC 7.1: disclaimer is part of the component)
   ========================================================================== */

.results{margin-block:var(--s7);max-width:var(--measure)}
.results__list{list-style:none;padding:0;margin:0;display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:640px){.results__list{grid-template-columns:repeat(2,1fr)}}
.results__item{margin:0;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;padding:var(--s5);color:var(--ink)}
.results__amount{font-family:var(--font-display);font-size:1.5rem;font-weight:600;
  color:var(--heading);margin:0 0 var(--s2);line-height:1.2}
.results__kind{display:block;font-family:var(--font-body);font-size:.8125rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);margin-top:var(--s1)}
.results__detail{font-size:var(--fs-small);color:var(--ink);margin:0;max-width:none}
.results__disclaimer{font-size:.8125rem;color:var(--ink-muted);margin:var(--s4) 0 0;max-width:none;line-height:1.6}

/* ==========================================================================
   12. Forms
   ========================================================================== */

.field{margin-bottom:var(--s5);max-width:34rem}
.field label{display:block;font-weight:600;font-size:var(--fs-small);margin-bottom:var(--s2)}
.field input,.field textarea,.field select{
  width:100%;padding:var(--s3) var(--s4);
  font-family:var(--font-body);font-size:var(--fs-body);
  color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);       /* 3.43:1 light / 4.30:1 dark, meets 1.4.11 */
  border-radius:var(--radius);min-height:48px;
}
.field textarea{min-height:8rem;resize:vertical}
.field__hint{display:block;font-size:.8125rem;color:var(--ink-muted);margin-top:var(--s2);font-weight:400}
.field__error{display:block;font-size:var(--fs-small);color:var(--danger);margin-top:var(--s2);font-weight:600}
.form-confidential{
  font-size:var(--fs-small);color:var(--ink-muted);
  border-left:2px solid var(--affirm);padding-left:var(--s4);margin-bottom:var(--s5);max-width:34rem
}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   12b. Case form wizard  (matches survivorsofabusepa.com)
   ========================================================================== */

.case-form{max-width:34rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s5);color:var(--ink)}

/* The form is a WHITE CARD that gets dropped into whatever section it is called
   from, including the dark `.section--band` on the homepage. It set its own
   background and inherited the band's text color, so every label rendered
   #DCE4EC on #FFFFFF: a contrast ratio of 1.28:1 against a required 4.5, on the
   primary conversion element. It looked like an empty form.
   `.section--band p` (0,2,1) also beat `.case-form__fineprint` (0,1,0), so the
   fineprint went the same way.
   The card now owns every text color inside it regardless of where it sits,
   which is the only version of this that cannot break again when the form is
   placed somewhere new. */
.section--band .case-form,
.section--band .case-form label{color:var(--ink)}
.section--band .case-form p,
.section--band .case-form__fineprint,
.section--band .case-form .opt{color:var(--ink-muted)}
.section--band .case-form a:not(.btn){color:var(--primary)}
.section--band .case-form .case-form__status{color:var(--danger)}
.section--band .case-form h2,
.section--band .case-form h3{color:var(--heading)}
.case-form label{display:block;font-weight:600;font-size:var(--fs-small);margin-bottom:var(--s4)}
.case-form .opt{font-weight:400;color:var(--ink-muted)}
.case-form input[type=text],.case-form input[type=email],.case-form input[type=tel],
.case-form select,.case-form textarea{
  display:block;width:100%;margin-top:var(--s2);padding:var(--s3) var(--s4);
  font-family:var(--font-body);font-size:var(--fs-body);font-weight:400;
  color:var(--ink);background:var(--ground);
  border:1px solid var(--line-strong);border-radius:var(--radius);min-height:48px;
}
.case-form textarea{min-height:6rem;resize:vertical}
.case-form__row{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:520px){.case-form__row{grid-template-columns:1fr 1fr}}
.case-form__actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}
.case-form__actions .btn{flex:1 1 auto}
.btn--block{width:100%;margin-top:var(--s2)}
.case-form__fineprint{font-size:.8125rem;color:var(--ink-muted);margin:var(--s4) 0 0}
.case-form__consent{display:flex;gap:var(--s3);align-items:flex-start;font-weight:400;
  font-size:var(--fs-small);line-height:1.55}
.case-form__consent input{flex:none;width:20px;height:20px;min-height:20px;margin-top:2px}
.case-form__status{font-size:var(--fs-small);color:var(--danger);font-weight:600;margin:var(--s4) 0 0}
.case-form__status:empty{display:none}
.soa-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Progress. Encodes a real 3-step sequence, so the numbers carry information. */
.wiz-progress{display:flex;gap:var(--s2);list-style:none;margin:0 0 var(--s5);padding:0;max-width:none}
.wiz-progress li{flex:1;display:flex;align-items:center;gap:var(--s2);
  font-size:.75rem;color:var(--ink-muted);padding-bottom:var(--s2);
  border-bottom:2px solid var(--line)}
.wiz-progress li.is-active{color:var(--ink);border-bottom-color:var(--accent)}
.wiz-progress li.is-done{color:var(--ink-muted);border-bottom-color:var(--affirm)}
.wiz-progress__n{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex:none;border-radius:50%;
  background:var(--line);color:var(--ink);font-weight:600;font-size:.75rem}
.wiz-progress li.is-active .wiz-progress__n{background:var(--accent);color:#fff}
.wiz-progress li.is-done .wiz-progress__n{background:var(--affirm);color:#fff}
@media (max-width:420px){.wiz-progress__lbl{display:none}}

/* ==========================================================================
   13. Related links
   ========================================================================== */

.related{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--line)}
.related h2{font-size:1.375rem;margin-top:0}
.related ul{list-style:none;padding:0;display:grid;gap:var(--s3);grid-template-columns:1fr}
@media (min-width:640px){.related ul{grid-template-columns:repeat(2,1fr)}}
.related li{margin:0}

/* ==========================================================================
   14. Footer  (RPC 7.1 disclaimers live here, on 100% of pages)
   ========================================================================== */

.site-footer{margin-top:var(--s9);border-top:1px solid var(--line);background:var(--surface);padding-block:var(--s7);color:var(--ink)}
.footer-cols{display:grid;gap:var(--s6);grid-template-columns:1fr;margin-bottom:var(--s7)}
@media (min-width:768px){.footer-cols{grid-template-columns:repeat(3,1fr)}}
.footer-cols h2{font-size:1rem;font-family:var(--font-body);font-weight:600;margin:0 0 var(--s3);text-transform:none}
.footer-cols ul{list-style:none;padding:0;margin:0;font-size:var(--fs-small)}
.footer-cols li{margin-bottom:var(--s2)}
.footer-nap{font-size:var(--fs-small);color:var(--ink-muted);font-style:normal}
.footer-nap strong{color:var(--ink)}

.legal{border-top:1px solid var(--line);padding-top:var(--s5);font-size:.8125rem;color:var(--ink-muted);line-height:1.6}
.legal p{max-width:none;margin:0 0 var(--s3)}
.legal p:last-child{margin-bottom:0}
.legal__label{font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:.06em;font-size:.75rem}

.crisis{
  background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--affirm);
  border-radius:var(--radius);padding:var(--s5);margin-bottom:var(--s7);font-size:var(--fs-small);color:var(--ink)}
/* Outcome of a submission the visitor was sent back from. Deliberately quiet:
   a warning is information, not an alarm, and this reader is already stressed. */
.form-notice{
  border:1px solid var(--line);border-left:3px solid var(--affirm);
  border-radius:var(--radius);padding:var(--s4);margin:0 0 var(--s5);
  background:var(--surface);font-size:var(--fs-small);max-width:none;color:var(--ink)}
.form-notice--warn{border-left-color:var(--danger)}

.crisis h2{font-size:1rem;font-family:var(--font-body);margin:0 0 var(--s3)}
.crisis p{margin:0 0 var(--s2);max-width:none}
.crisis p:last-child{margin-bottom:0}

/* ==========================================================================
   15. Motion  (opacity only, fails open, disabled under reduced-motion)
   ========================================================================== */

/* Default is VISIBLE. JS opts elements in. No JS means all content renders. */
.sonic-reveal{opacity:1}
.js .sonic-reveal{opacity:0;transition:opacity 400ms ease-out}
.js .sonic-reveal.is-visible{opacity:1}
.js .sonic-stagger > *{transition-delay:calc(var(--i,0) * 60ms)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .sonic-reveal,.js .sonic-reveal.is-visible{opacity:1 !important;transition:none !important}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   16. Utilities
   ========================================================================== */

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.text-muted{color:var(--ink-muted)}
.mt-0{margin-top:0}