/* GENERATED from build/css/*.css by tools/build_pages.py — edit those files, then rebuild. */
/* ======================= 00 · THE SHELL (multi-page, Sep 17 2026 — Cam's button: 13 real pages) =======================
   The nav's practice-areas dropdown, the EN | ES toggle's new home in the nav (the announce bar is gone), the phone
   menu's practice sub-list, and the sitemap footer. Flat colour, hairline rules, no shadows (DESIGN-SYSTEM-2026-09-15). */

/* -- nav: the toggle sits between the links and the call button -- */
.nav .wrap{gap:clamp(12px,1.6vw,24px)}
.nav .nav-lang{flex:none;margin-left:auto}
.nav .nav-links{margin-left:auto}
.nav .nav-links + .nav-lang{margin-left:0}
@media(max-width:900px){.nav .nav-lang{margin-left:auto}}

/* -- the current page in the nav: the underline stays drawn -- */
.nav-links a[aria-current="page"]::after{right:0}
.nav-links a[aria-current="page"]{color:var(--c-primary)}
body.hero-overlay:not([data-route]) .nav-links a[aria-current="page"]{color:var(--c-accent-soft)}

/* -- practice-areas dropdown (21st.dev Rich Navigation Menu 18191, rebuilt) -- */
.nav-drop{position:relative;display:inline-flex;align-items:center;gap:2px}
.nav-drop-btn{display:inline-grid;place-items:center;width:28px;height:28px;margin:0;padding:0;border:0;border-radius:4px;background:none;
  color:inherit;cursor:pointer;transition:background-color var(--t-hover) var(--ease)}
.nav-drop-btn svg{width:11px;height:8px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-hover) var(--ease)}
.nav-drop-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.nav-drop-panel{position:absolute;left:-18px;top:calc(100% + 14px);z-index:80;display:grid;min-width:340px;padding:8px 0;
  border:1px solid var(--c-rule);border-top:3px solid var(--c-primary);border-radius:0 0 6px 6px;background:var(--c-surface);
  visibility:hidden;opacity:0;transform:translateY(-4px);
  transition:opacity var(--t-hover) var(--ease),transform var(--t-hover) var(--ease),visibility 0s linear var(--t-hover)}
/* a bridge over the 14px gap so the pointer can travel from the link to the panel without it closing */
.nav-drop-panel::before{content:'';position:absolute;left:0;right:0;top:-17px;height:14px}
.nav-drop.is-open .nav-drop-panel,.nav-drop:focus-within .nav-drop-panel{visibility:visible;opacity:1;transform:none;transition-delay:0s}
@media(hover:hover) and (pointer:fine){.nav-drop:hover .nav-drop-panel{visibility:visible;opacity:1;transform:none;transition-delay:0s}}
.nav-drop.is-open .nav-drop-btn svg{transform:rotate(180deg)}
.nav-drop-panel a{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:baseline;gap:10px;padding:11px 20px;
  color:var(--c-ink);font-family:var(--font-sans);font-size:.98rem;font-weight:500;letter-spacing:0;text-transform:none;text-decoration:none;
  border-bottom:1px solid var(--c-rule)}
.nav-drop-panel a:last-child{border-bottom:0}
.nav-drop-panel a::after{display:none}
.nav-drop-panel .nd-i{font-family:var(--font-serif);font-size:.95rem;color:var(--c-accent-slab)}
.nav-drop-panel a:hover,.nav-drop-panel a:focus-visible,.nav-drop-panel a[aria-current="page"]{color:var(--c-primary);background:var(--c-bg)}
.nav-drop-panel a:focus-visible{outline:2px solid var(--c-primary);outline-offset:-2px}
@media(max-width:900px){.nav-drop-panel{display:none}}

/* -- phone menu: the seven areas as an indented, ruled sub-list under "Practice Areas" -- */
.mobile-nav-sub{display:grid;margin:0 0 .4rem;padding-left:14px;border-left:2px solid var(--c-accent)}
.mobile-nav-sub a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:baseline;min-height:44px;padding:10px 0;font-size:.95rem}
.mobile-nav-sub .nd-i{font-family:var(--font-serif);color:var(--c-accent-slab)}

/* -- footer: the number is the headline; a sitemap so no page dead-ends -- */
.foot-phone{display:inline-block;margin:0 0 var(--s-5);font-family:var(--font-serif);font-weight:400;font-size:clamp(2.6rem,7vw,5.2rem);
  line-height:1;letter-spacing:-.02em;color:var(--c-primary);text-decoration:none;border-bottom:2px solid transparent;
  transition:border-color var(--t-hover) var(--ease)}
.foot-phone:hover,.foot-phone:focus-visible{border-bottom-color:var(--c-accent)}
.foot-phone:focus-visible{outline:3px solid var(--c-ink);outline-offset:4px}
.foot-top.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:var(--s-4) clamp(24px,3vw,48px);
  align-items:start;padding-top:var(--s-4);border-top:1px solid var(--c-rule)}
.foot-nav{display:grid;gap:10px;align-content:start}
.foot-nav .foot-h{margin:0 0 4px;font-family:var(--font-sans);font-size:.72rem;font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--c-accent-slab)}
.foot-nav a{color:var(--c-ink);font-size:.95rem;text-decoration:none;line-height:1.35}
.foot-nav a:hover,.foot-nav a:focus-visible{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.foot-grid .foot-contact{display:grid;gap:10px;align-content:start}
@media(max-width:900px){
  .foot-top.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-top.foot-grid > :first-child{grid-column:1 / -1}
  .foot-top.foot-grid > .foot-contact{grid-column:1 / -1}
}
@media(prefers-reduced-motion:reduce){.nav-drop-panel,.nav-drop-btn svg,.foot-phone{transition:none}}

/* ======================= 05 · FIXES FOUND IN THE SPLIT (Sep 17 2026) =======================
   Pre-existing bugs the page-by-page check surfaced; each one also existed on the one-page site's routed view. */

/* Español: `.espanol .wrap{display:grid;1.2fr .8fr}` (base.css:361) was meant for the copy + photo grid, but it also
   caught the first wrap — the back link + the photo strip — so the full-bleed strip sat in the narrow right column and
   ran 383px off the page at 1440. The first wrap is a plain block again. */
#espanol > .wrap:first-child{display:block}

/* ======================= 10 · THE INNER-PAGE HEAD (shared primitive — owned by Steve; pages vary it in their own file) ===========
   One first screen for every inner page, so the site reads as one firm: a breadcrumb, a gold numeral or eyebrow, the page's h1 in
   the serif, its lede, its actions — and that page's real photo on the right with a burgundy block under its lower-left corner.
   Patterns: 21st.dev Editorial Hero 19075 + PayPal "Executive Leadership" page head + Vucko numbered services (Mobbin).
   Markup (see build/DESIGN-CONTRACT.md):
     <header class="phead">
       <div class="wrap phead-grid">
         <div class="phead-copy">
           <p class="crumbs"><a href="../practice-areas/">…</a><span aria-hidden="true">/</span><span>…</span></p>
           <span class="phead-num" aria-hidden="true">01</span>          (or <p class="phead-eyebrow">…</p>)
           <h1 class="phead-title">…</h1>
           <p class="lede phead-lede">…</p>
           <div class="phead-actions">…buttons…</div>
         </div>
         <figure class="phead-photo"><img …></figure>
       </div>
     </header>
   Variants: .phead--dark (burgundy ground, for Meet Brenda / Español) · .phead--text (no photo: copy spans the width). */

.phead{position:relative;padding:clamp(40px,6vw,88px) 0 clamp(48px,7vw,104px);background:var(--c-bg);color:var(--c-ink);overflow:hidden}
.phead-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.phead-copy{min-width:0}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 var(--s-4);font-family:var(--font-sans);font-size:.74rem;font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--c-muted)}
.crumbs a{color:var(--c-primary);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--t-hover) var(--ease)}
.crumbs a:hover,.crumbs a:focus-visible{border-bottom-color:currentColor}
.crumbs a:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px}
.crumbs [aria-hidden]{color:var(--c-accent)}
.phead-num{display:block;margin:0 0 var(--s-2);font-family:var(--font-serif);font-weight:400;font-size:clamp(3.4rem,7vw,6.2rem);line-height:.8;
  letter-spacing:-.03em;color:var(--c-accent)}
.phead-eyebrow{margin:0 0 var(--s-2);font-family:var(--font-sans);font-size:.78rem;font-weight:700;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--c-accent-slab)}
.phead-title{margin:0;font-family:var(--font-serif);font-weight:400;font-size:clamp(2.5rem,5vw,4.4rem);line-height:1.02;letter-spacing:-.02em;
  color:var(--c-ink);text-transform:none;text-wrap:balance}
.phead-title em,.phead-title .r{font-style:italic;color:var(--c-primary)}
.phead-lede{margin:var(--s-3) 0 0;max-width:34em;font-size:clamp(1.08rem,1.4vw,1.25rem);line-height:1.55;color:var(--c-muted)}
.phead-actions{display:flex;flex-wrap:wrap;gap:14px 16px;margin-top:var(--s-5)}
.phead-actions .btn:not(#_){margin-top:0}
/* the photo: flush to the right edge of the page, a burgundy block tucked under its lower-left corner */
.phead-photo{position:relative;margin:0 calc(-1 * max(20px,5vw)) 0 0;align-self:stretch;min-height:clamp(320px,38vw,560px)}
.phead-photo::before{content:'';position:absolute;left:calc(-1 * clamp(16px,2vw,28px));bottom:calc(-1 * clamp(16px,2vw,28px));width:42%;height:46%;
  background:var(--c-primary);z-index:0}
.phead-photo img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* variants */
.phead--dark{background:var(--c-dark);color:var(--c-bg)}
.phead--dark .phead-title{color:var(--c-bg)}
.phead--dark .phead-title em,.phead--dark .phead-title .r{color:var(--c-accent-soft)}
.phead--dark .phead-lede{color:rgba(246,241,232,.78)}
.phead--dark .crumbs{color:rgba(246,241,232,.62)}
.phead--dark .crumbs a{color:var(--c-accent-soft)}
.phead--dark .phead-num,.phead--dark .phead-eyebrow{color:var(--c-accent-soft)}
.phead--dark .phead-photo::before{background:var(--c-accent)}
.phead--text .phead-grid{grid-template-columns:minmax(0,1fr)}
.phead--text .phead-lede{max-width:40em}
/* phones: copy first, the photo full-width beneath, the block peeking out under it */
@media(max-width:900px){
  .phead-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
  .phead-photo{margin:0 0 var(--s-2) 0;min-height:0;aspect-ratio:4/3}
  .phead-photo::before{left:auto;right:calc(-1 * max(20px,5vw));bottom:calc(-1 * var(--s-2));width:38%;height:40%}
  .phead-actions .btn:not(#_):not(#_){width:100%}
}

/* ======================= 20 · HOME VARIANT A — "Calm stripe" (Sep 17 2026, preview for Cam's side-by-side pick) =======================
   DIRECTION-2026-09-17-multipage §3 Home: hero (dusk skyline + her cut-out) → promise row (cream) → practice list (burgundy)
   → "You have Chucky" (cream, type only) → how-it-works preview (pale gold) → coupon + Spanish invitation (one burgundy band)
   → contact (cream) → night skyline → footer. No two same grounds touch; one strong element per band.
   Every rule is scoped to [data-page="zz-home-a"] so the winner re-scopes to the real home with one find/replace. */

[data-page="zz-home-a"]{--hpa-gold-ground:color-mix(in srgb,var(--c-accent) 17%,var(--c-bg));
  --hpa-serif-sm:clamp(1.25rem,1.7vw,1.5rem)} /* the page's one extra type step (promise row + how-it-works steps below 1100px) */

/* ---------- 1 · hero: cut-out full height right, name + two buttons left, the promise row peeking under the fold ---------- */
[data-page="zz-home-a"] .hero.hero-sky{min-height:max(620px,calc(100svh - 84px))}
[data-page="zz-home-a"] .hero-sky .figure{top:calc(var(--chrome-h,88px) + 20px);bottom:0;height:auto;width:min(40vw,580px);
  right:max(3vw,calc((100vw - var(--wrap))/2));justify-content:flex-end}
[data-page="zz-home-a"] .hero-sky .figure img{width:auto;height:100%;max-width:100%;max-height:none;object-fit:contain;object-position:right bottom}
[data-page="zz-home-a"] .hero-sky-copy:not(#_){max-width:min(34rem,52vw);padding-bottom:var(--s-7)}
[data-page="zz-home-a"] .hero-sky .hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}

/* ---------- 2 · the promise row: four facts on hairlines, cream ---------- */
[data-page="zz-home-a"] main > section.hpa-promise{background:var(--c-bg);padding-top:var(--s-5);padding-bottom:var(--s-5)}
[data-page="zz-home-a"] .hpa-ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
[data-page="zz-home-a"] .hpa-ticks li{margin:0;padding:var(--s-1) var(--s-4);border-left:1px solid var(--c-rule);
  font-family:var(--font-serif);font-size:var(--hpa-serif-sm);line-height:1.3;color:var(--c-ink)}
[data-page="zz-home-a"] .hpa-ticks li:first-child{padding-left:0;border-left:0}
[data-page="zz-home-a"] .hpa-ticks li::before{content:"";display:block;width:28px;height:2px;margin:0 0 var(--s-2);background:var(--c-accent)}
[data-page="zz-home-a"] .hpa-ticks li:last-child{color:var(--c-primary)}

/* ---------- 4 · "They have corporate teams. You have Chucky." — type only (Editorial Hero 19075 structure) ---------- */
[data-page="zz-home-a"] main > section.hpa-why{background:var(--c-bg)}
[data-page="zz-home-a"] .hpa-why .hpa-why-h{margin:0 0 var(--s-6);max-width:14em;font-size:clamp(2.6rem,4.6vw,4rem);line-height:var(--lh-display);letter-spacing:-.025em;text-wrap:balance}
[data-page="zz-home-a"] .hpa-why-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.5vw,40px);
  padding-top:var(--s-4);border-top:1px solid var(--c-rule)}
[data-page="zz-home-a"] .hpa-why-tag{grid-column:1 / span 5;margin:0;font-family:var(--font-serif);font-size:var(--fs-heading);line-height:1.1;font-style:italic;color:var(--c-primary)}
[data-page="zz-home-a"] .hpa-why-side{grid-column:7 / span 6}
[data-page="zz-home-a"] .hpa-why-side .why-line{margin:0;color:var(--c-muted)}
[data-page="zz-home-a"] .hpa-why-side .btn{margin-top:var(--s-4)}

/* ---------- 5 · how-it-works preview: the ladder's gold-ring numerals on one hairline; the link is the line's last stop ---------- */
[data-page="zz-home-a"] main > section.hpa-how{background:var(--hpa-gold-ground);padding-block:var(--s-8)}
[data-page="zz-home-a"] .hpa-how > .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(28px,3.5vw,56px);align-items:start}
[data-page="zz-home-a"] .hpa-steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.5vw,56px)}
[data-page="zz-home-a"] .hpa-steps::before{content:"";position:absolute;left:24px;right:calc(-1 * clamp(28px,3.5vw,56px));top:24px;height:1px;background:var(--c-accent)}
[data-page="zz-home-a"] .hpa-steps li{position:relative;margin:0;padding:0}
[data-page="zz-home-a"] .hpa-mark{position:relative;display:grid;place-items:center;width:48px;height:48px;margin:0 0 var(--s-3);border-radius:50%;
  background:var(--c-primary);color:var(--c-bg);font:700 1.05rem/1 var(--font-sans);
  outline:1px solid var(--c-accent);outline-offset:6px}
[data-page="zz-home-a"] .hpa-step{margin:0;max-width:12em;font-family:var(--font-serif);font-weight:400;font-size:var(--hpa-serif-sm);
  line-height:1.2;letter-spacing:-.01em;text-transform:none;color:var(--c-ink)}
[data-page="zz-home-a"] .hpa-how-link.btn:not(#_):not(#_){margin-top:0;position:relative;z-index:1}

/* ---------- 6 · the coupon + the Spanish invitation: one burgundy band, two rows ---------- */
[data-page="zz-home-a"] main > section#consultation{padding-bottom:var(--s-6)}
[data-page="zz-home-a"] main > section.hpa-es{background:var(--c-primary);color:var(--c-bg);padding:0 0 var(--section-y)!important} /* beats tokens.css .espanol-home{padding:0!important} */
[data-page="zz-home-a"] .hpa-es .espanol-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;
  padding-top:var(--s-6);border-top:1px solid color-mix(in srgb,var(--c-accent-soft) 30%,transparent)}
[data-page="zz-home-a"] .hpa-es .espanol-copy{order:1;padding:0;max-width:30em}
[data-page="zz-home-a"] .hpa-es .espanol-photo{order:2;min-height:0;aspect-ratio:3/2}
[data-page="zz-home-a"] .hpa-es .espanol-copy h2.shout{color:var(--c-bg)}
[data-page="zz-home-a"] .hpa-es .espanol-copy h2.shout .r{color:var(--c-accent-soft)}
[data-page="zz-home-a"] .hpa-es .why-line{color:var(--c-bg)}
[data-page="zz-home-a"] .hpa-es .why-line + .why-line{color:color-mix(in srgb,var(--c-bg) 78%,transparent)}

/* ---------- wide: the how-it-works line is the page's designed moment — three steps read as one large sentence ---------- */
@media(min-width:1101px){
  [data-page="zz-home-a"] .hpa-step{font-size:var(--fs-heading);line-height:1.1;max-width:none}
}

/* ---------- tablet ---------- */
@media(max-width:1100px){
  [data-page="zz-home-a"] .hpa-ticks{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-4)}
  [data-page="zz-home-a"] .hpa-ticks li:nth-child(3){padding-left:0;border-left:0}
  [data-page="zz-home-a"] .hpa-how > .wrap{grid-template-columns:1fr;row-gap:var(--s-5)}
  [data-page="zz-home-a"] .hpa-steps::before{right:24px}
  [data-page="zz-home-a"] .hpa-how-link.btn:not(#_):not(#_){justify-self:start}
}

/* ---------- phones: her face in the first screen, the copy over her shoulder, the gold call button ---------- */
@media(max-width:760px){
  [data-page="zz-home-a"] .hero.hero-sky{display:block;min-height:0}
  [data-page="zz-home-a"] .hero-sky .figure{position:absolute;order:0;top:calc(var(--chrome-h,72px) + 8px);right:0;bottom:auto;
    width:min(64vw,290px);height:auto;margin:0;z-index:-1}
  [data-page="zz-home-a"] .hero-sky .figure img{width:100%;height:auto;
    -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 97%);mask-image:linear-gradient(180deg,#000 68%,transparent 97%)} /* her base dissolves into the ground instead of a hard cut behind the copy */
  [data-page="zz-home-a"] .hero-sky .veil{background:linear-gradient(180deg,color-mix(in srgb,var(--c-dark) 55%,transparent) 0%,color-mix(in srgb,var(--c-dark) 15%,transparent) 26%,color-mix(in srgb,var(--c-dark) 55%,transparent) 44%,color-mix(in srgb,var(--c-dark) 92%,transparent) 70%,color-mix(in srgb,var(--c-dark) 96%,transparent) 100%)}
  [data-page="zz-home-a"] .hero-sky-copy:not(#_){max-width:none;padding:calc(var(--chrome-h,72px) + 250px) 0 var(--s-5)}
  [data-page="zz-home-a"] .hero-sky h1.shout{font-size:clamp(2.4rem,11vw,3rem)}
  [data-page="zz-home-a"] .hero-sky .hero-role{text-wrap:balance;letter-spacing:.08em}
  [data-page="zz-home-a"] .hero-sky .hero-line{margin-top:var(--s-2);font-size:1.2rem}
  [data-page="zz-home-a"] .hero-sky .hero-actions{display:grid;grid-template-columns:1fr;gap:var(--s-2);margin-top:var(--s-3)}
  [data-page="zz-home-a"] .hero-sky .hero-actions .btn{width:100%}
  [data-page="zz-home-a"] .hero-sky .hero-actions .btn-ghost-w:not(#_){color:var(--c-bg);border-color:color-mix(in srgb,var(--c-bg) 70%,transparent)}

  [data-page="zz-home-a"] .hpa-ticks{grid-template-columns:1fr;row-gap:0}
  [data-page="zz-home-a"] .hpa-ticks li,[data-page="zz-home-a"] .hpa-ticks li:nth-child(3){padding:var(--s-2) 0;border-left:0;border-top:1px solid var(--c-rule);
    display:flex;align-items:center;gap:var(--s-2)}
  [data-page="zz-home-a"] .hpa-ticks li:first-child{border-top:0}
  [data-page="zz-home-a"] .hpa-ticks li::before{flex:none;width:20px;margin:0}

  [data-page="zz-home-a"] .hpa-why .hpa-why-h{font-size:clamp(2.2rem,9.6vw,2.75rem);margin-bottom:var(--s-4)}
  [data-page="zz-home-a"] .hpa-why-row{grid-template-columns:1fr;row-gap:var(--s-3)}
  [data-page="zz-home-a"] .hpa-why-tag,[data-page="zz-home-a"] .hpa-why-side{grid-column:1}

  [data-page="zz-home-a"] .hpa-steps{grid-template-columns:1fr;gap:var(--s-4)}
  [data-page="zz-home-a"] .hpa-steps::before{left:23px;right:auto;top:24px;bottom:24px;width:1px;height:auto}
  [data-page="zz-home-a"] .hpa-steps li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:20px;align-items:center}
  [data-page="zz-home-a"] .hpa-mark{margin:0}

  [data-page="zz-home-a"] .hpa-es .espanol-grid{grid-template-columns:1fr;padding-top:var(--s-5)}
  [data-page="zz-home-a"] .hpa-es .espanol-photo{max-width:none;aspect-ratio:3/2}

  /* contact: the form comes first after the h2; the photo + Call/Text/Email rows follow (the call bar already covers calling) */
  [data-page="zz-home-a"] #contact .contact-grid:not(#_){display:flex;flex-direction:column}
  [data-page="zz-home-a"] #contact .contact-grid > div:last-child:not(#_){order:-1;margin-top:0}
  [data-page="zz-home-a"] #contact .contact-grid > .ways:not(#_){margin-top:var(--s-4)}
}

/* ======================= 21 · HOME VARIANT B — "Bold type" (preview, Sep 17 2026) =======================
   Same content and keeps as Home; the page leans on SCALE and contrast. Brenda's system only: Newsreader + Barlow, burgundy /
   cream / gold tokens, no shadows, no new motion (the site's fade-up is the only movement).
   Rhythm: hero (photo) → promise (cream) → practice list (burgundy, the strongest band) → statement (cream, type only) →
   how-it-works preview (deep burgundy) → Español (cream) → coupon (burgundy) → contact (cream) → night skyline (photo).
   Patterns: 21st.dev "Editorial Hero" 19075 (label column left / serif statement right, hairline structure) and "Editorial
   Testimonial" 9637 (one line of type as the whole band) — structure only, rebuilt in plain CSS.
   Every rule is scoped to [data-page="zz-home-b"] so the winner re-scopes to the real Home with one find/replace. */

/* ---------- 1 · HERO: her name at poster size ---------- */
[data-page="zz-home-b"] .hero-sky h1.shout:not(#_){font-size:clamp(3.4rem,8.2vw,8.4rem);line-height:.9;letter-spacing:-.035em;max-width:6.2em}
[data-page="zz-home-b"] .hero-sky-copy:not(#_){max-width:min(56vw,44rem)}
[data-page="zz-home-b"] .hero-sky .hero-role:not(#_){margin:1.6rem 0 0;padding-top:1.1rem;border-top:1px solid var(--c-accent);max-width:34rem;color:var(--c-accent-soft)}
[data-page="zz-home-b"] .hero-sky .hero-line:not(#_){font-size:clamp(1.35rem,2.1vw,1.85rem);max-width:22em}

/* ---------- 2 · THE PROMISE: four oversized serif lines, gold numerals, gold hairlines ---------- */
[data-page="zz-home-b"] .hb-promise{background:var(--c-bg);color:var(--c-ink)}
[data-page="zz-home-b"] .hb-vows{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-accent)}
[data-page="zz-home-b"] .hb-vows li{display:grid;grid-template-columns:clamp(4.5rem,11vw,10.5rem) minmax(0,1fr);align-items:baseline;
  column-gap:clamp(16px,3vw,48px);padding:clamp(18px,2.4vw,34px) 0;border-bottom:1px solid var(--c-accent)}
[data-page="zz-home-b"] .hb-n{font-family:var(--font-serif);font-weight:400;font-size:clamp(3rem,8vw,7.5rem);line-height:.8;letter-spacing:-.04em;
  color:var(--c-accent);font-variant-numeric:lining-nums tabular-nums}
[data-page="zz-home-b"] .hb-vow{margin:0;font-family:var(--font-serif);font-weight:400;font-size:clamp(2rem,5.4vw,5rem);line-height:1.02;letter-spacing:-.025em;
  color:var(--c-ink);text-wrap:balance}
[data-page="zz-home-b"] .hb-vow b.hb-zero{font-weight:400;font-style:italic;color:var(--c-primary)}
[data-page="zz-home-b"] .hb-vow em{font-style:italic;color:var(--c-primary)}
[data-page="zz-home-b"] .hb-vow-states{color:var(--c-ink)}

/* ---------- 3 · PRACTICE AREAS: the strongest band — display-size head, big stage, gold numerals per row ---------- */
[data-page="zz-home-b"] #cases.practice-band .practice-head:not(#_){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);
  align-items:end;max-width:none;margin:0 0 clamp(40px,5vw,72px);padding-bottom:clamp(28px,3vw,44px);border-bottom:1px solid var(--c-accent)}
[data-page="zz-home-b"] #cases.practice-band h2.shout:not(#_){margin:0;font-size:clamp(2.4rem,5vw,5rem);line-height:.92;letter-spacing:-.035em}
[data-page="zz-home-b"] #cases.practice-band h2.shout .r:not(#_){display:block;font-style:italic}
[data-page="zz-home-b"] #cases.practice-band .lede:not(#_){font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.6;max-width:30em}
[data-page="zz-home-b"] #cases .plist-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px)}
[data-page="zz-home-b"] #cases .plist{counter-reset:hb-p;border-top-color:color-mix(in srgb,var(--c-accent-soft) 45%,transparent)}
[data-page="zz-home-b"] #cases .plist li{counter-increment:hb-p;border-bottom-color:color-mix(in srgb,var(--c-accent-soft) 45%,transparent)}
[data-page="zz-home-b"] #cases .prow{min-height:84px;gap:clamp(14px,2vw,28px)}
[data-page="zz-home-b"] #cases .prow::before{content:counter(hb-p,decimal-leading-zero);flex:none;width:2.2em;font-family:var(--font-sans);font-weight:700;
  font-size:.8rem;letter-spacing:var(--track-label);color:var(--c-accent-soft);opacity:.75}
[data-page="zz-home-b"] #cases .prow-t{font-size:clamp(1.5rem,2.6vw,2.5rem)}
[data-page="zz-home-b"] #cases .pstage{aspect-ratio:4/5;top:96px}
[data-page="zz-home-b"] #cases .illustration-note{margin-top:var(--s-5);color:var(--c-accent-soft);font-size:calc(var(--fs-body)*.82)}
@media(max-width:900px){
  [data-page="zz-home-b"] #cases.practice-band .practice-head:not(#_){grid-template-columns:1fr;gap:var(--s-3)}
  [data-page="zz-home-b"] #cases .prow::before{display:none}
  [data-page="zz-home-b"] #cases .prow{min-height:76px}
  [data-page="zz-home-b"] #cases .prow-t{font-size:1.2rem;line-height:1.15;text-wrap:balance}
}
@media(max-width:480px){
  [data-page="zz-home-b"] #cases .prow-thumb{width:64px}
}

/* ---------- 4 · THE STATEMENT: type only, full width, second clause in burgundy italic ---------- */
[data-page="zz-home-b"] .hb-statement:not(#_){background:var(--c-bg)}
[data-page="zz-home-b"] .hb-statement h2.hb-display:not(#_){margin:0;max-width:none;font-family:var(--font-serif);font-weight:400;text-transform:none;
  font-size:clamp(2.6rem,7vw,7.2rem);line-height:.96;letter-spacing:-.035em;color:var(--c-ink);text-wrap:balance}
[data-page="zz-home-b"] .hb-statement h2.hb-display .r:not(#_){font-style:italic;color:var(--c-primary)}
[data-page="zz-home-b"] .hb-statement-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--s-3) clamp(24px,4vw,64px);align-items:start;
  margin-top:clamp(40px,5vw,72px);padding-top:clamp(24px,2.6vw,36px);border-top:1px solid var(--c-accent)}
[data-page="zz-home-b"] .hb-statement-foot .why-line{margin:0;max-width:none;font-size:clamp(1.2rem,1.6vw,1.45rem)}
[data-page="zz-home-b"] .hb-statement-foot .why-line.hb-lead{color:var(--c-ink);font-style:italic}
[data-page="zz-home-b"] .hb-statement-foot .btn:not(#_){margin-top:0;align-self:center}
@media(max-width:900px){
  [data-page="zz-home-b"] .hb-statement-foot{grid-template-columns:1fr}
  [data-page="zz-home-b"] .hb-statement-foot .btn:not(#_){justify-self:start;align-self:start;margin-top:var(--s-1)}
}

/* ---------- 5 · HOW IT WORKS preview: three gold-ring circles on one hairline, deep burgundy ground ---------- */
[data-page="zz-home-b"] .hb-how{background:var(--c-dark);color:var(--c-bg)}
[data-page="zz-home-b"] .hb-how-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin:0 0 clamp(40px,5vw,72px)}
[data-page="zz-home-b"] .hb-how h2.shout:not(#_){margin:0;font-family:var(--font-serif);font-weight:400;text-transform:none;font-size:clamp(2.4rem,4.4vw,4.4rem);
  line-height:.95;letter-spacing:-.03em;color:var(--c-bg)}
[data-page="zz-home-b"] .hb-how h2.shout .r:not(#_){font-style:italic;color:var(--c-accent-soft)}
[data-page="zz-home-b"] .hb-more{display:inline-flex;align-items:center;gap:.8rem;min-height:44px;font-family:var(--font-sans);font-weight:700;font-size:calc(var(--fs-body)*.82);
  letter-spacing:.08em;text-transform:uppercase;color:var(--c-accent-soft);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--c-accent-soft) 45%,transparent)}
[data-page="zz-home-b"] .hb-more:focus-visible{outline:3px solid var(--c-bg);outline-offset:4px}
@media(hover:hover) and (pointer:fine){[data-page="zz-home-b"] .hb-more:hover{color:var(--c-bg);border-bottom-color:var(--c-bg)}}
[data-page="zz-home-b"] .hb-steps{--hb-gap:clamp(24px,3.5vw,56px);position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--hb-gap);margin:0;padding:0;list-style:none}
[data-page="zz-home-b"] .hb-steps::before{content:"";position:absolute;left:36px;right:calc((100% - 2 * var(--hb-gap)) / 3 - 36px);top:36px;height:1px;background:var(--c-accent)}
[data-page="zz-home-b"] .hb-steps li{position:relative;margin:0;padding:0}
[data-page="zz-home-b"] .hb-ring{display:grid;place-items:center;width:72px;height:72px;margin:0 0 var(--s-3);border-radius:50%;background:var(--c-dark);
  border:1px solid var(--c-accent);outline:1px solid var(--c-accent);outline-offset:6px;
  font-family:var(--font-serif);font-size:2rem;line-height:1;color:var(--c-accent-soft)}
[data-page="zz-home-b"] .hb-steps h3{margin:0;font-family:var(--font-serif);font-weight:400;text-transform:none;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.12;
  letter-spacing:-.015em;color:var(--c-bg);max-width:12em}
@media(max-width:900px){
  [data-page="zz-home-b"] .hb-steps{grid-template-columns:1fr;gap:var(--s-4)}
  [data-page="zz-home-b"] .hb-steps::before{left:35px;right:auto;top:36px;bottom:36px;width:1px;height:auto}
  [data-page="zz-home-b"] .hb-steps li{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:22px;align-items:center}
  [data-page="zz-home-b"] .hb-ring{margin:0}
  [data-page="zz-home-b"] .hb-steps h3{font-size:1.45rem}
}

/* ---------- 6 · ESPAÑOL + CONTACT: same keeps, bigger heads, cream grounds between burgundy bands ---------- */
[data-page="zz-home-b"] .espanol-home:not(#_){background:var(--c-bg)}
[data-page="zz-home-b"] .espanol-copy h2.shout:not(#_){font-size:clamp(2.4rem,4.4vw,4.4rem);line-height:.92;letter-spacing:-.035em}
[data-page="zz-home-b"] .espanol-copy h2.shout .r:not(#_){display:block;font-style:italic;color:var(--c-primary)}
[data-page="zz-home-b"] #contact:not(#_){background:var(--c-bg)}
[data-page="zz-home-b"] #contact .sec-head:not(#_){max-width:none;margin-bottom:clamp(40px,5vw,64px);padding-bottom:clamp(24px,2.6vw,36px);border-bottom:1px solid var(--c-accent)}
[data-page="zz-home-b"] #contact .sec-head h2.shout:not(#_){font-size:clamp(2.4rem,4.4vw,4.4rem);line-height:.95;letter-spacing:-.035em}
[data-page="zz-home-b"] #contact .sec-head h2.shout .r:not(#_){font-style:italic;color:var(--c-primary)}
[data-page="zz-home-b"] #consultation h2.shout:not(#_){font-size:clamp(2.4rem,4.8vw,4.4rem);line-height:.98;letter-spacing:-.03em}

/* ---------- 7 · PHONES: her face inside the first screen, the copy over her shoulder ---------- */
@media(max-width:760px){
  [data-page="zz-home-b"] .hero.hero-sky:not(#_){display:block;min-height:calc(100svh - 56px);position:relative}
  /* the cut-out is cropped inside the screen (object-fit, not a negative offset), so nothing pokes past the phone edge */
  [data-page="zz-home-b"] .hero-sky .figure:not(#_){position:absolute;top:calc(var(--chrome-h,72px) + 4px);left:22vw;right:0;bottom:auto;margin:0;
    width:auto;height:min(148vw,600px);z-index:-1;display:block;overflow:hidden}
  [data-page="zz-home-b"] .hero-sky .figure img:not(#_){width:100%;height:100%;max-height:none;object-fit:cover;object-position:0 0}
  [data-page="zz-home-b"] .hero-sky > .wrap:not(#_){position:relative;z-index:2;min-height:calc(100svh - 56px);display:flex;flex-direction:column;justify-content:flex-end}
  [data-page="zz-home-b"] .hero-sky-copy:not(#_){max-width:none;padding:0 0 var(--s-4)}
  body.hero-overlay[data-page="zz-home-b"] .hero-sky-copy:not(#_){padding-top:0}
  [data-page="zz-home-b"] .hero-sky h1.shout:not(#_){font-size:clamp(3rem,15vw,4.2rem);line-height:.9;max-width:none}
  [data-page="zz-home-b"] .hero-sky .hero-role:not(#_){margin-top:1rem;padding-top:.8rem;font-size:.78rem;letter-spacing:.06em;text-wrap:balance}
  [data-page="zz-home-b"] .hero-sky .hero-line:not(#_){margin-top:.8rem;font-size:1.2rem}
  /* a burgundy floor under the copy so it reads over her jacket; flat token colour fading to clear, no glow */
  [data-page="zz-home-b"] .hero-sky .veil:not(#_){background:linear-gradient(180deg,color-mix(in srgb,var(--c-dark) 35%,transparent) 0%,transparent 30%,color-mix(in srgb,var(--c-dark) 60%,transparent) 50%,color-mix(in srgb,var(--c-dark) 96%,transparent) 68%,var(--c-dark) 78%)}
  [data-page="zz-home-b"] .hb-vows li{grid-template-columns:3.4rem minmax(0,1fr);column-gap:14px}
  [data-page="zz-home-b"] .hb-n{font-size:2.6rem}
  [data-page="zz-home-b"] .hb-vow{font-size:clamp(1.9rem,8.4vw,2.6rem)}
}

/* ==========================================================================
   22 · HOME (the real one) — Sep 18, Cam's pick "name plate on Brenda".
   Her line leads the hero; her name + role line ride a brass-gold plate across the
   cut-out, in the press-depth language (solid face + darker slab edge, no blur, no glow).
   The plate is a deeper gold than the gold Call button and leads with her name in serif,
   so it reads as a sign, not a second button. Scoped to [data-page="home"].
   ========================================================================== */
[data-page="home"] .hero-sky .nameplate{position:absolute;left:-16%;bottom:max(12%,84px);z-index:1;margin:0;
  max-width:min(23rem,118%);padding:.85rem 1.3rem .8rem;border-radius:4px;text-align:left;
  background:var(--c-accent);color:var(--c-dark);box-shadow:0 var(--btn-depth,4px) 0 var(--c-accent-slab)}
[data-page="home"] .hero-sky .np-name{display:block;font-family:var(--font-serif);font-weight:500;
  font-size:clamp(1.45rem,2.1vw,1.95rem);line-height:1.05;letter-spacing:-.01em;color:var(--c-primary)}
[data-page="home"] .hero-sky .np-role{display:block;margin-top:.45rem;font-family:var(--font-sans);font-weight:700;
  font-size:.7rem;line-height:1.5;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--c-dark)}
/* role on one line, states on the next: the " · " between them stays in the text (screen readers, copy guard)
   but becomes the line break, so no line ever starts with a dot */
[data-page="home"] .hero-sky .np-sep{display:block;height:0;overflow:hidden}

/* phones: face first — the cut-out (cropped at the waist) opens the hero, the plate hangs off its lower edge,
   then her line and the two buttons */
@media(max-width:760px){
  [data-page="home"] .hero-sky .figure{order:1;width:min(80vw,330px);margin:calc(var(--chrome-h,64px) + 16px) auto 0}
  [data-page="home"] .hero-sky .figure img{width:100%;height:min(50svh,390px);max-height:none;object-fit:cover;object-position:50% 0}
  [data-page="home"] .hero-sky > .wrap{order:2}
  [data-page="home"] .hero-sky .nameplate{left:50%;bottom:0;width:max-content;max-width:min(92vw,22rem);
    transform:translate(-50%,45%);text-align:center}
  [data-page="home"] .hero-sky-copy:not(#_){padding-top:3.5rem}
}

/* Sep 18 (Cam, on his phone): the hero's dark foot fade (.v-foot::after) was painted OVER the copy and both buttons, and on
   phones the buttons sat flush on the next section. The copy now sits above the fade, the fade is lighter on phones, and the
   buttons get breathing room before "Your case. Your story. My fight." */
[data-page="home"] .hero-sky > .wrap{position:relative;z-index:1}
@media(max-width:760px){
  [data-page="home"] .hero-sky-copy:not(#_){padding-bottom:var(--s-6)}
  [data-page="home"] .hero-sky.v-foot::after{background:linear-gradient(180deg,rgba(26,6,10,0) 0%,rgba(26,6,10,.28) 70%,rgba(20,5,8,.45) 100%)}
}

/* ======================= 23 · HOME: the practice-area scroll wheel (Sep 18 2026, Cam's pick) =======================
   21st.dev "Wheel Picker" (ncdai, 2459), rebuilt in CSS + assets/practice-wheel.js: a drum of five visible rows with a gold
   band on the middle one; the photo beside it (above it on phones) follows the middle row and is the link to that area.
   Until the script marks the wheel .is-live it is a plain list of links (no JS, old browsers). Burgundy band, cream type,
   gold for "chosen" — the same language as the buttons and the name plate. */
[data-page="home"] .pwheel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center;
  margin-top:var(--s-5)}
[data-page="home"] .pwheel-drum{order:-1;position:relative;min-width:0}

/* the photo: crossfades to the chosen area; the caption is the area's name and the brand arrow */
[data-page="home"] .pwheel-shot{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--c-dark);
  color:var(--c-bg);text-decoration:none}
[data-page="home"] .pwheel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}
[data-page="home"] .pwheel-img.is-active{opacity:1}
[data-page="home"] .pwheel-cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(18px,2.4vw,28px);background:linear-gradient(180deg,rgba(42,8,16,0) 0%,rgba(42,8,16,.85) 100%)}
[data-page="home"] .pwheel-name{font-family:var(--font-serif);font-size:clamp(1.45rem,2.5vw,2.1rem);line-height:1.1;color:var(--c-bg)}
[data-page="home"] .pwheel-cap .arr{flex:none;color:var(--c-accent-soft);transition:transform var(--t-hover) var(--ease)}
[data-page="home"] .pwheel-shot:hover .pwheel-cap .arr,[data-page="home"] .pwheel-shot:focus-visible .pwheel-cap .arr{transform:translateX(6px)}
[data-page="home"] .pwheel-shot:focus-visible{outline:3px solid var(--c-accent-soft);outline-offset:4px}

/* the list, before the script runs */
[data-page="home"] .pwheel-list{list-style:none;margin:0;padding:0}
[data-page="home"] .pwheel-item a{display:block;padding:10px 0;font-family:var(--font-serif);font-size:1.4rem;line-height:1.2;color:var(--c-bg);
  text-decoration:none}
[data-page="home"] .pwheel-band{display:none}

/* the live wheel */
[data-page="home"] .pwheel.is-live .pwheel-drum{--row:62px;height:calc(var(--row) * 5);perspective:800px}
[data-page="home"] .pwheel.is-live .pwheel-list{height:100%;padding:calc(var(--row) * 2) 0;overflow-y:auto;scroll-snap-type:y mandatory;
  scrollbar-width:none;transform-style:preserve-3d;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 74%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 74%,transparent 100%)}
[data-page="home"] .pwheel.is-live .pwheel-list::-webkit-scrollbar{display:none}
[data-page="home"] .pwheel.is-live .pwheel-item{height:var(--row);display:flex;align-items:center;justify-content:center;
  scroll-snap-align:center;transform-origin:50% 50%;backface-visibility:hidden}
[data-page="home"] .pwheel.is-live .pwheel-item a{padding:0 14px;font-size:clamp(1.3rem,2.1vw,1.75rem);white-space:nowrap;
  color:rgba(246,241,232,.62);transition:color .2s var(--ease)}
[data-page="home"] .pwheel.is-live .pwheel-item.is-selected a{color:var(--c-accent-soft)}
[data-page="home"] .pwheel.is-live .pwheel-item a:focus-visible{outline:2px solid var(--c-accent-soft);outline-offset:4px;border-radius:2px}
[data-page="home"] .pwheel.is-live .pwheel-band{display:block;position:absolute;left:0;right:0;top:50%;height:var(--row);transform:translateY(-50%);
  pointer-events:none;border-top:1px solid rgba(226,197,126,.6);border-bottom:1px solid rgba(226,197,126,.6);background:rgba(246,241,232,.05)}

/* phones: the photo on top, the wheel under it, sized for a thumb */
@media(max-width:900px){
  [data-page="home"] .pwheel{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  [data-page="home"] .pwheel-drum{order:0}
  [data-page="home"] .pwheel-shot{aspect-ratio:16/10}
  [data-page="home"] .pwheel.is-live .pwheel-drum{--row:54px}
}
@media(prefers-reduced-motion:reduce){[data-page="home"] .pwheel-img,[data-page="home"] .pwheel.is-live .pwheel-item a{transition:none}}

/* ======================= 30 · PRACTICE PAGES (one template, seven pages: 01–07) ==============================================
   Body markup: build/pages/<area>.html (generated from each view's own copy — no new strings).
   Head  = the shared .phead split (10-phead.css). The designed moment is the numeral: a big gold Newsreader "01"…"07" standing on
           a gold hairline that runs to the edge of the copy column — a chapter mark, so the seven pages read as one book.
   Body  = her epigraph line (moved from the retired photo strip) → the overview → "Who this helps" / "What to discuss" as
           label-left / text-right ruled pairs (21st Editorial Hero 19075's 4/12 · 8/12 split) → the fine print, and a sticky right
           rail holding the existing directory (21st Vertical Tabs, already on the site; sticky-sidebar structure from 21st Table of
           Contents 18123, no scrollspy). The coupon (<!--#include consultation-->) closes every page.
   Scope: .pp-* classes and [data-route] .service-view only. Tokens only. No shadows, cards, icons, or new motion. */

/* ---- head: the chapter numeral ---- */
.pp-head .pp-num{display:flex;align-items:flex-end;gap:clamp(16px,2vw,28px);margin:0 0 var(--s-3);
  font-size:clamp(4.6rem,9vw,8.5rem);line-height:.78;letter-spacing:-.045em;font-variant-numeric:lining-nums}
.pp-head .pp-num::after{content:"";flex:1 1 auto;height:1px;margin-bottom:.1em;background:var(--c-accent);opacity:.7}
.pp-head .phead-title{max-width:12em}
/* the breadcrumb link is a 44px tap target without moving the line (padding in, margin out) */
.pp-head .crumbs a{display:inline-block;padding:12px 0;margin:-12px 0}
.pp-head .lead-line{margin:0 0 var(--s-3);font-size:clamp(1.05rem,1.3vw,1.2rem);font-style:italic;color:var(--c-primary);max-width:32em;text-wrap:balance}
.pp-head .phead-photo img{object-position:50% 50%}
/* the ticks, once, under the two buttons: a hairline and three quiet facts with a gold check */
.pp-head .pp-ticks:not(#_){display:flex;flex-wrap:wrap;gap:10px 28px;margin:var(--s-4) 0 0;padding-top:var(--s-2);
  border-top:1px solid var(--c-rule);font-family:var(--font-sans);font-size:.95rem;font-weight:600;line-height:1.4;color:var(--c-ink)}
.pp-head .pp-ticks > span::before{content:"✓\00a0";content:"✓\00a0" / "";color:var(--c-accent);font-weight:800}

/* ---- body frame ---- */
[data-route] .service-view.pp-view{padding:var(--section-y) 0;background:var(--c-bg);color:var(--c-ink);border-top:1px solid var(--c-rule)}
[data-route] .service-view.pp-view > .wrap{width:min(var(--wrap),calc(100% - 2 * var(--gutter)));max-width:none;padding:0}
.pp-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:clamp(48px,7vw,112px);align-items:start}
.pp-main{min-width:0;max-width:780px}

/* her line, set as the chapter's epigraph */
.pp-epigraph{position:relative;margin:0 0 var(--s-5);padding-top:var(--s-3);font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:var(--fs-heading);line-height:1.2;letter-spacing:-.01em;color:var(--c-primary);text-wrap:balance;max-width:20em}
.pp-epigraph::before{content:"";position:absolute;left:0;top:0;width:56px;height:2px;background:var(--c-accent)}
.pp-view .pp-overview:not(#_){margin:0 0 var(--s-5);padding:0;border:0;font-size:var(--fs-body);line-height:1.7;color:var(--c-ink);max-width:38em}

/* label-left / text-right ruled pairs */
.pp-pairs{border-top:1px solid var(--c-ink)}
.pp-pair{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-2) clamp(24px,4vw,56px);padding:var(--s-4) 0;
  border-bottom:1px solid var(--c-rule)}
.pp-view .pp-label:not(#_){margin:0;font-family:var(--font-sans);font-size:.8rem;font-weight:700;line-height:1.4;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--c-primary)}
.pp-text{min-width:0}
.pp-view .pp-text p,.pp-view .pp-text ul{margin:0;font-size:var(--fs-body);line-height:1.7;color:var(--c-ink)}
.pp-view .pp-text ul{list-style:none;padding:0}
.pp-view .pp-text li{margin:0;padding:12px 0;border-top:1px solid var(--c-rule)}
.pp-view .pp-text li:first-child{border-top:0;padding-top:0}
.pp-pair--fine{grid-template-columns:minmax(0,1fr);border-bottom:0}
.pp-view .pp-pair--fine .practice-next:not(#_){grid-column:1 / -1;margin:0;padding:0;border:0;font-size:.92rem;line-height:1.6;color:var(--c-muted);max-width:44em}

/* probate: the honest fee note in the overview slot, ruled in gold on its left */
[data-page="probate"] .pp-layout{align-items:center}
.pp-view .pp-note{margin:0;padding:var(--s-1) 0 var(--s-1) var(--s-3);border-left:2px solid var(--c-accent);font-size:clamp(1.05rem,1.25vw,1.15rem);
  line-height:1.7;color:var(--c-ink);max-width:38em}

/* ---- the right rail: the existing directory, sticky on desktop ---- */
.pp-rail.service-directory{position:sticky;top:calc(var(--consultation-offer-height,0px) + 104px)}
.pp-rail .service-menu > summary{border-bottom-color:var(--c-accent);color:var(--c-ink)}
.pp-rail .service-menu nav a{color:var(--c-muted)}
.pp-rail .service-menu nav a .service-index{color:var(--c-accent-slab,var(--c-muted))}
.pp-rail .service-menu nav a:hover{background:transparent;color:var(--c-primary)}
.pp-rail .service-menu nav a[aria-current="page"]{box-shadow:none;margin-left:-15px;padding-left:12px;border-left:3px solid var(--c-primary);color:var(--c-primary)}
.pp-rail .service-menu nav a[aria-current="page"] .service-index{color:var(--c-primary)}
.pp-rail .service-menu nav a.service-separate{border-top-color:var(--c-accent)}

/* ---- tablet ---- */
@media(max-width:1100px){
  .pp-layout{grid-template-columns:minmax(0,1fr) 240px;gap:48px}
  .pp-pair{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
}
/* ---- phones: one column; the directory drops under the copy (journey.js folds it shut ≤760px) ---- */
@media(max-width:900px){
  .pp-head .pp-num{font-size:clamp(4rem,20vw,5.6rem);margin-bottom:var(--s-2)}
  .pp-layout{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
  .pp-rail.service-directory{position:static}
  .pp-rail .service-menu nav{background:transparent;padding:0}
  .pp-rail .service-menu nav a[aria-current="page"]{margin-left:0}
  .pp-epigraph{margin-bottom:var(--s-4)}
  .pp-head .pp-ticks:not(#_){flex-direction:column;gap:8px}
  .pp-head .phead-actions .btn{justify-content:center;text-align:center}
}

/* ======================= 31 · PRACTICE AREAS HUB (practice-areas page) ==========================================================
   The index of the seven. Head: the shared .phead in its text variant, split into title (left) and lede (right) so the first
   screen reads like a magazine contents page. Spine: 21st.dev Condition Grid 25300 rebuilt without React/motion — a 12-column
   grid, rows alternating 5|7 then 7|5 then 5|7, photos in a row share one height so the uneven widths read as intent.
   Dropped from the original: rounded corners, the black pill titles over the photo, the round arrow badge, the scroll animation
   (the site already has its one motif). Each item = photo, hairline, gold numeral, serif name, brand arrow. Hover = colour only. */

/* ---- head ---- */
[data-page="practice-areas"] .hub-head{padding-bottom:clamp(32px,4vw,56px)}
[data-page="practice-areas"] .hub-head .phead-grid:not(#_){grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;
  padding-bottom:clamp(24px,3vw,40px);border-bottom:1px solid var(--c-rule)}
[data-page="practice-areas"] .hub-eyebrow{margin-bottom:var(--s-2)}
[data-page="practice-areas"] .hub-eyebrow{color:var(--c-accent-slab)} /* darker gold: the light-page gold failed AA */
[data-page="practice-areas"] .hub-eyebrow .r{color:var(--c-primary)}
[data-page="practice-areas"] .hub-head .phead-title{font-size:clamp(2.75rem,6.4vw,5.6rem);line-height:.98}
[data-page="practice-areas"] .hub-lede{margin:0;max-width:30em}

/* ---- the grid ---- */
[data-page="practice-areas"] .hub:not(#_){background:var(--c-bg);padding:0 0 var(--section-y)}
[data-page="practice-areas"] .hub-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(16px,2.4vw,32px);row-gap:clamp(40px,4.5vw,64px)}
[data-page="practice-areas"] .hub-item{margin:0;padding:0;min-width:0}
[data-page="practice-areas"] .hub-w5{grid-column:span 5}
[data-page="practice-areas"] .hub-w7{grid-column:span 7}
[data-page="practice-areas"] .hub-w12{grid-column:1 / -1}

[data-page="practice-areas"] .hub-link{display:block;color:var(--c-ink);text-decoration:none}
[data-page="practice-areas"] .hub-link:focus-visible{outline:2px solid var(--c-primary);outline-offset:6px}
[data-page="practice-areas"] .hub-photo{display:block;height:clamp(240px,25vw,360px);overflow:hidden;background:var(--c-rule)}
[data-page="practice-areas"] .hub-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%;
  transition:opacity var(--t-hover) var(--ease)}
[data-page="practice-areas"] .hub-cap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;column-gap:var(--s-2);
  margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--c-rule);transition:border-color var(--t-hover) var(--ease)}
[data-page="practice-areas"] .hub-num{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1;
  letter-spacing:-.02em;color:var(--c-accent-slab);min-width:1.4em}
[data-page="practice-areas"] .hub-name{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.35rem,2.1vw,1.9rem);line-height:1.15;
  letter-spacing:-.01em;color:var(--c-ink);text-wrap:balance;transition:color var(--t-hover) var(--ease)}
[data-page="practice-areas"] .hub-cap .arr{align-self:center;color:var(--c-primary);transition:color var(--t-hover) var(--ease)}

@media (hover:hover) and (pointer:fine){
  [data-page="practice-areas"] .hub-link:hover .hub-name{color:var(--c-primary)}
  [data-page="practice-areas"] .hub-link:hover .hub-cap{border-top-color:var(--c-primary)}
  [data-page="practice-areas"] .hub-link:hover .hub-photo img{opacity:.88}
}
[data-page="practice-areas"] .hub-link:focus-visible .hub-name{color:var(--c-primary)}

/* ---- 07 Probate & Trusts: not personal injury, so it sits apart — a gold rule above, photo left on 5 columns, name right ---- */
[data-page="practice-areas"] .hub-probate{margin-top:0;padding-top:clamp(40px,4.5vw,64px);border-top:1px solid var(--c-accent)}
[data-page="practice-areas"] .hub-probate .hub-link{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,32px);align-items:end}
[data-page="practice-areas"] .hub-probate .hub-photo{grid-column:1 / span 5;height:clamp(200px,20vw,280px)}
[data-page="practice-areas"] .hub-probate .hub-cap{grid-column:6 / -1;margin-top:0}
[data-page="practice-areas"] .hub-probate .hub-name{font-size:clamp(1.6rem,2.8vw,2.5rem)}

[data-page="practice-areas"] .hub .illustration-note{margin:var(--s-5) 0 0;font-size:.875rem;color:var(--c-muted)}

/* ---- tablets: keep the rhythm, shorter photos ---- */
@media (max-width:1100px){
  [data-page="practice-areas"] .hub-photo{height:clamp(220px,28vw,300px)}
}
/* ---- phones: one per row, photos at their own 3:2, the head stacks ---- */
@media (max-width:760px){
  [data-page="practice-areas"] .hub-head .phead-grid:not(#_){grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  [data-page="practice-areas"] .hub-w5,[data-page="practice-areas"] .hub-w7{grid-column:1 / -1}
  [data-page="practice-areas"] .hub-photo,[data-page="practice-areas"] .hub-probate .hub-photo{height:auto;aspect-ratio:3/2}
  [data-page="practice-areas"] .hub-probate .hub-link{display:block}
  [data-page="practice-areas"] .hub-probate .hub-cap{margin-top:var(--s-2)}
  [data-page="practice-areas"] .hub-cap{min-height:44px}
  /* keep the 5|7 rhythm on phones through shape and side: wide rows 3:2 full width, narrow rows 16:9 at 78%, flushed alternately */
  [data-page="practice-areas"] .hub-grid{row-gap:var(--s-5)}
  [data-page="practice-areas"] .hub-w7 .hub-photo{aspect-ratio:3/2}
  [data-page="practice-areas"] .hub-w5 .hub-photo{aspect-ratio:16/9;width:78%}
  [data-page="practice-areas"] .hub-item:nth-child(even).hub-w5 .hub-photo{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  [data-page="practice-areas"] .hub-photo img,[data-page="practice-areas"] .hub-name,[data-page="practice-areas"] .hub-cap{transition:none}
}

/* ======================= 40 · MEET BRENDA (Sep 17 2026 — DIRECTION §3, Cam's Option A) =======================
   Head: a burgundy feature card (Upwork "Kristen Kish" card, via Mobbin) — her label top-left, "Meet Brenda." bottom-left,
   the studio photo filling the right half. Story: the four beats on cream as ruled rows with a gold numeral rail (their own
   1–4). The moment: her pull-quote at display size as a full-width burgundy band, Lady Justice small beside it
   (21st.dev "Astryx Blockquote" 17211 for the semantic blockquote + figcaption/cite structure only). Then the coupon.
   Every rule is scoped to this page; the legacy .brenda / .beat / .pull styles (base, editorial, daylight) are reset here. */

/* ---------- head: the feature card ---------- */
[data-page="meet-brenda"] .mb-head:not(#_){background:var(--c-bg);padding:clamp(20px,3vw,40px) 0 clamp(40px,6vw,88px)}
[data-page="meet-brenda"] .mb-card:not(#_){grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0;align-items:stretch;
  background:var(--c-primary);color:var(--c-bg);min-height:clamp(520px,46vw,660px);overflow:hidden}
[data-page="meet-brenda"] .mb-card-copy{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-6);
  padding:clamp(28px,4vw,64px)}
[data-page="meet-brenda"] .mb-label:not(#_){margin:0;display:flex;align-items:center;gap:14px;color:var(--c-accent-soft)}
[data-page="meet-brenda"] .mb-label::before{content:"";width:32px;height:1px;background:currentColor;flex:none}
[data-page="meet-brenda"] .mb-title:not(#_){font-size:var(--fs-display);line-height:.92;letter-spacing:-.035em;color:var(--c-bg)}
[data-page="meet-brenda"] .mb-title .r{color:var(--c-accent-soft);font-style:italic}
[data-page="meet-brenda"] .mb-card .phead-lede:not(#_){margin-top:var(--s-4);max-width:26em;color:color-mix(in srgb, var(--c-bg) 84%, transparent)}
/* the photo: flush to the card's top, right and bottom edges — no offset block, the card IS the frame */
[data-page="meet-brenda"] .mb-photo:not(#_){margin:0;min-height:0;align-self:stretch}
[data-page="meet-brenda"] .mb-photo::before{display:none}
[data-page="meet-brenda"] .mb-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
[data-page="meet-brenda"] .mb-photo{position:relative}

/* ---------- story: four ruled beats with the numeral rail ---------- */
[data-page="meet-brenda"] #v-brenda:not(#_){background:var(--c-bg);color:var(--c-ink);padding:0}
[data-page="meet-brenda"] #v-brenda > .mb-story:not(#_){padding:var(--s-3) 0 var(--s-6);max-width:var(--wrap)}
[data-page="meet-brenda"] .mb-beat:not(#_){display:grid;grid-template-columns:clamp(72px,9vw,128px) minmax(0,5fr) minmax(0,7fr);
  column-gap:clamp(20px,4vw,64px);align-items:start;padding:clamp(32px,4vw,56px) 0;margin:0;border-top:1px solid var(--c-rule)}
[data-page="meet-brenda"] .mb-beat:last-of-type:not(#_){border-bottom:1px solid var(--c-rule)}
[data-page="meet-brenda"] .mb-beat::before{display:none}
[data-page="meet-brenda"] .mb-n:not(#_){position:static;width:auto;height:auto;display:block;border:0;border-radius:0;background:none;box-shadow:none;
  font-family:var(--font-serif);font-weight:400;font-size:var(--fs-heading);line-height:.8;letter-spacing:-.04em;color:var(--c-accent)}
[data-page="meet-brenda"] .mb-beat-t:not(#_){margin:0;font-family:var(--font-serif);font-weight:400;font-size:clamp(1.6rem,2.4vw,2.2rem);
  line-height:1.12;letter-spacing:-.015em;text-transform:none;color:var(--c-ink);text-wrap:balance}
[data-page="meet-brenda"] .mb-beat-b p:not(#_){margin:0;max-width:34em;color:var(--c-muted);font-size:var(--fs-body);line-height:var(--lh-body)}
[data-page="meet-brenda"] .mb-beat-b p strong{color:var(--c-ink)}
[data-page="meet-brenda"] .mb-beat-b .hand:not(#_){margin-top:var(--s-3);font-family:var(--font-serif);font-style:italic;font-size:1.3rem;color:var(--c-primary)}
/* the old strip's line closes the story, set like a signature line under the rail */
[data-page="meet-brenda"] .mb-close:not(#_){margin:var(--s-6) 0 0 calc(clamp(72px,9vw,128px) + clamp(20px,4vw,64px));max-width:18em;
  font-family:var(--font-serif);font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.1;letter-spacing:-.02em;color:var(--c-primary);text-wrap:balance}

/* ---------- the moment: her words, full-width burgundy ---------- */
/* the deep burgundy (the hero ground), so the band never runs into the coupon's brighter burgundy below it */
[data-page="meet-brenda"] .mb-quote{background:var(--c-dark);color:var(--c-bg);padding:var(--section-y) 0}
[data-page="meet-brenda"] .mb-quote-grid{display:grid;grid-template-columns:clamp(96px,11vw,168px) minmax(0,1fr);column-gap:clamp(28px,5vw,80px);align-items:end}
[data-page="meet-brenda"] .mb-quote-mark{display:block;width:100%;height:auto;opacity:.95}
[data-page="meet-brenda"] .mb-pull:not(#_){margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;color:var(--c-bg)}
[data-page="meet-brenda"] .mb-pull::before{display:none}
[data-page="meet-brenda"] .mb-pull blockquote:not(#_){margin:0;padding:0;font-style:normal;color:var(--c-bg)}
[data-page="meet-brenda"] .mb-pull blockquote p{margin:0;max-width:17em;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(2rem,4.8vw,4.4rem);line-height:1.08;letter-spacing:-.025em;text-wrap:pretty}
[data-page="meet-brenda"] .mb-pull blockquote em{font-style:italic;color:var(--c-accent-soft)}
[data-page="meet-brenda"] .mb-sign{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:var(--s-5);
  font-family:var(--font-sans);font-size:calc(var(--fs-body)*.75);letter-spacing:var(--track-label);text-transform:uppercase;font-weight:700}
[data-page="meet-brenda"] .mb-sign cite:not(#_){margin:0;padding:0;font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:1.5rem;letter-spacing:0;text-transform:none;color:var(--c-accent-soft)}
[data-page="meet-brenda"] .mb-sign-rule{flex:0 1 72px;height:1px;background:color-mix(in srgb, var(--c-accent-soft) 55%, transparent)}
[data-page="meet-brenda"] .mb-sign-word{color:var(--c-bg)}
[data-page="meet-brenda"] .mb-sign-word i{font-style:normal;color:var(--c-accent-soft)}
[data-page="meet-brenda"] .mb-sign-sub{color:color-mix(in srgb, var(--c-bg) 72%, transparent)}

/* ---------- phones ---------- */
@media(max-width:900px){
  [data-page="meet-brenda"] .mb-head:not(#_){padding:12px 0 var(--s-5)}
  [data-page="meet-brenda"] .mb-card:not(#_){grid-template-columns:minmax(0,1fr);min-height:0}
  [data-page="meet-brenda"] .mb-photo:not(#_){order:-1;aspect-ratio:4/4.2}
  [data-page="meet-brenda"] .mb-card-copy{gap:var(--s-4);padding:var(--s-4) var(--s-3) var(--s-5)}
  [data-page="meet-brenda"] .mb-beat:not(#_){grid-template-columns:clamp(56px,14vw,72px) minmax(0,1fr);row-gap:var(--s-2)}
  [data-page="meet-brenda"] .mb-beat-t:not(#_){align-self:center}
  [data-page="meet-brenda"] .mb-beat-b{grid-column:2}
  [data-page="meet-brenda"] .mb-close:not(#_){margin-left:0}
  [data-page="meet-brenda"] .mb-quote-grid{grid-template-columns:minmax(0,1fr);row-gap:var(--s-4)}
  [data-page="meet-brenda"] .mb-quote-mark{order:2;justify-self:end;width:64px;margin-top:calc(-1 * var(--s-5))}
  /* the signature on phones: her name on its own line, the wordmark + "We fight for you." together under it */
  [data-page="meet-brenda"] .mb-sign cite:not(#_){flex-basis:100%}
  [data-page="meet-brenda"] .mb-sign-rule{display:none}
}
@media(max-width:520px){
  /* the numeral stays on the rail beside its title; the paragraph takes the full width under both */
  [data-page="meet-brenda"] .mb-beat:not(#_){grid-template-columns:48px minmax(0,1fr);column-gap:16px}
  [data-page="meet-brenda"] .mb-beat-b{grid-column:1 / -1}
  [data-page="meet-brenda"] .mb-n:not(#_){font-size:3rem}
}

/* ======================= 41 · HOW IT WORKS (Sep 17 multi-page build — DIRECTION §3, Option A + one-face ruling) ============
   Head (cream): the h1 + her strip line, then the three-circle ladder as a vertical rail of ruled rows (Hers "What's next" via
   Mobbin; circles from 21st How It Works Steps 26891, built in tokens.css CHANGE-SET 6) — Brenda's office photo tall on the
   right, burgundy block under its corner (the shared .phead photo). Phones: title → photo → ladder, so her face is in the first
   screen. Below (white): the three step details as ruled rows, heading left / content right on desktop → the ticks once on a
   gold hairline → the coupon (burgundy). Everything scoped to [data-page="how-it-works"]. */

[data-page="how-it-works"] #how:not(#_){display:block;background:var(--c-bg);color:var(--c-ink);padding:0}

/* ---------- the head ---------- */
[data-page="how-it-works"] .how-head{padding:clamp(40px,5vw,80px) 0 clamp(48px,5vw,80px);background:var(--c-bg)}
[data-page="how-it-works"] .how-head-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  grid-template-areas:"title photo" "ladder photo";grid-template-rows:auto 1fr;column-gap:clamp(40px,6vw,104px);row-gap:var(--s-5)}
[data-page="how-it-works"] .how-title{grid-area:title;min-width:0}
[data-page="how-it-works"] .how-title .phead-title{font-size:var(--fs-display);line-height:var(--lh-display)}
[data-page="how-it-works"] .how-title .phead-lede{margin-top:var(--s-3);font-family:var(--font-serif);font-style:italic;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.3;color:var(--c-primary)}
[data-page="how-it-works"] .how-ladder{grid-area:ladder;min-width:0;max-width:40rem}
[data-page="how-it-works"] .how-photo{grid-area:photo;margin:0;min-height:0;align-self:start;height:min(74vh,700px)}
[data-page="how-it-works"] .how-photo img{object-position:50% 52%}

/* the ladder, turned into a vertical rail of ruled rows (the shared 3-across layout is for wide bands, not a half column) */
[data-page="how-it-works"] #how .timeline:not(#_){grid-template-columns:minmax(0,1fr);gap:0}
/* the gold rail runs circle-centre to circle-centre only (never on past the last step into the stamp) */
[data-page="how-it-works"] #how .timeline:not(#_):before{display:none}
[data-page="how-it-works"] #how .timeline .station:not(#_):not(:last-child):before{content:'';display:block;position:absolute;left:23px;top:24px;bottom:-56px;width:1px;
  background:var(--c-accent);z-index:0}
[data-page="how-it-works"] #how .timeline .station:not(#_) .st-mark{z-index:1}
[data-page="how-it-works"] #how .timeline .station:not(#_){display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:var(--s-3);
  padding:0 0 var(--s-4)}
[data-page="how-it-works"] #how .timeline .station:not(#_) > :not(.st-mark){grid-column:2}
[data-page="how-it-works"] #how .timeline .station:not(#_) .st-mark{grid-column:1;grid-row:1/span 4;margin:0}
/* the step titles are h2 (the ladder sits straight under the h1): same face as the shared ladder h3 in tokens.css */
[data-page="how-it-works"] #how .timeline .station:not(#_) h2{margin:0 0 .5rem;padding:10px 0 0;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.2;letter-spacing:-.01em;text-transform:none;color:var(--c-ink)}
/* rows 2 and 3: a hairline over the text column only (Hers), so the circles keep riding the gold rail */
[data-page="how-it-works"] #how .timeline .station:not(#_) + .station{padding-top:var(--s-4)}
[data-page="how-it-works"] #how .timeline .station:not(#_) + .station:after{content:'';display:block;position:absolute;top:0;left:72px;right:0;height:1px;background:var(--c-rule);border:0;opacity:1}
[data-page="how-it-works"] #how .timeline .station:not(#_):last-child{padding-bottom:0}
[data-page="how-it-works"] #how .timeline .station:not(#_) p.hand{margin-top:.6rem;font-family:var(--font-serif);font-style:italic;font-size:1.15rem}
[data-page="how-it-works"] #how .timeline .station:not(#_) .tl-stamp{justify-self:start;margin-top:var(--s-3);transform:rotate(-6deg);transform-origin:left top}

[data-page="how-it-works"] .how-jumps:not(#_){display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);margin:var(--s-5) 0 0;padding:0 0 0 72px;border:0;background:none}
[data-page="how-it-works"] .how-jumps a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:calc(var(--fs-body)*.8);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--c-primary);text-decoration:none;border-bottom:1px solid var(--c-accent)}
[data-page="how-it-works"] .how-jumps a:hover,[data-page="how-it-works"] .how-jumps a:focus-visible{color:var(--c-primary-hover);border-bottom-color:var(--c-primary-hover)}

/* ---------- the step details: ruled rows on white ---------- */
[data-page="how-it-works"] .how-details{background:var(--c-surface);padding:clamp(24px,4vw,64px) 0 clamp(56px,7vw,104px)}
[data-page="how-it-works"] .how-row{background:none;padding:0;margin:0;border:0}
[data-page="how-it-works"] .how-row-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,6vw,104px);row-gap:var(--s-3);
  padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px);border-top:1px solid var(--c-rule)}
[data-page="how-it-works"] .how-row:first-child .how-row-grid{border-top:0}
[data-page="how-it-works"] .how-row-head,[data-page="how-it-works"] .how-row-body{min-width:0}
[data-page="how-it-works"] .how-row-head h2.shout{margin:0;color:var(--c-ink)}
[data-page="how-it-works"] .how-row-head h2.shout .r{color:var(--c-primary);font-style:italic}
[data-page="how-it-works"] .how-row-head .lede{margin:var(--s-3) 0 0;max-width:30em;font-size:var(--fs-body);line-height:1.65;color:var(--c-muted)}
[data-page="how-it-works"] .how-row-body > .lede{margin:0 0 var(--s-3);font-family:var(--font-serif);font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.45;color:var(--c-ink);max-width:32em}
[data-page="how-it-works"] .how-row-body .hero-context{margin:0 0 var(--s-4);max-width:36em;color:var(--c-muted);font-size:var(--fs-body);line-height:1.65}
[data-page="how-it-works"] .how-row-body .btn:not(#_){margin-top:0}
@media(min-width:901px){[data-page="how-it-works"] .how-row-head{position:sticky;top:120px;align-self:start}}

/* prep: two ruled lists side by side, gold dash bullets */
[data-page="how-it-works"] .how-prep{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
[data-page="how-it-works"] .how-prep h3{margin:0 0 var(--s-2);padding-bottom:var(--s-1);border-bottom:1px solid var(--c-accent);font-family:var(--font-sans);
  font-size:calc(var(--fs-body)*.78);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--c-primary)}
[data-page="how-it-works"] .how-prep ul{margin:0;padding:0;list-style:none}
[data-page="how-it-works"] .how-prep li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--c-rule);line-height:1.55;color:var(--c-ink)}
[data-page="how-it-works"] .how-prep li:before{content:'';position:absolute;left:0;top:1.35em;width:10px;height:1px;background:var(--c-accent)}
[data-page="how-it-works"] .how-row-body .prep-note{margin:var(--s-4) 0 0;padding:0 0 0 var(--s-2);border-left:2px solid var(--c-primary);
  font-size:calc(var(--fs-body)*.92);line-height:1.6;color:var(--c-muted);background:none}

/* FAQ: hairline rows, no boxes */
[data-page="how-it-works"] .how-faq:not(#_){display:block;margin:0;border-top:1px solid var(--c-ink);border-radius:0}
[data-page="how-it-works"] .how-faq details:not(#_){margin:0;background:none;border:0;border-bottom:1px solid var(--c-rule);border-radius:0;box-shadow:none;overflow:visible}
[data-page="how-it-works"] .how-faq summary:not(#_){display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:44px;padding:20px 0;
  font-family:var(--font-serif);font-weight:400;font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.35;letter-spacing:0;text-transform:none;color:var(--c-ink);
  background:none;cursor:pointer;list-style:none}
[data-page="how-it-works"] .how-faq summary:not(#_):hover{color:var(--c-primary)}
[data-page="how-it-works"] .how-faq summary:not(#_):focus-visible{outline:2px solid var(--c-primary);outline-offset:-2px}
[data-page="how-it-works"] .how-faq summary:not(#_)::after{color:var(--c-primary);font-family:var(--font-sans);font-weight:400;font-size:1.5rem}
[data-page="how-it-works"] .how-faq details > div:not(#_){padding:0 var(--s-5) var(--s-3) 0;font-size:var(--fs-body);line-height:1.65;color:var(--c-muted)}
[data-page="how-it-works"] .how-faq details > div a{color:var(--c-primary)}
[data-page="how-it-works"] .how-row-body .how-jumps:not(#_){padding:0;margin-top:var(--s-4)}

/* the ticks, once: one gold hairline, three facts */
[data-page="how-it-works"] .how-ticks-band .wrap{padding-top:0;padding-bottom:0}
[data-page="how-it-works"] .how-ticks:not(#_){display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--s-2) var(--s-5);margin:0;padding:var(--s-4) 0 0;
  border-top:2px solid var(--c-accent);font-family:var(--font-sans);font-size:calc(var(--fs-body)*.82);font-weight:700;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--c-primary)}
[data-page="how-it-works"] .how-ticks:not(#_) > span::before{content:"✓ ";color:var(--c-accent)}

/* desktop: the ticks start on the rows' content edge; step 3's stamp sits beside the hand note as a seal */
@media(min-width:901px){
  [data-page="how-it-works"] .how-ticks:not(#_){padding-left:calc((100% - clamp(40px,6vw,104px)) * 5/12 + clamp(40px,6vw,104px))}
  [data-page="how-it-works"] #how .timeline .station[data-n="3"]:not(#_) p.hand{grid-row:3;align-self:center;margin:0}
  [data-page="how-it-works"] #how .timeline .station[data-n="3"]:not(#_) .tl-stamp{grid-row:3;justify-self:end;align-self:center;margin-top:var(--s-2);transform-origin:center}
}

/* ---------- tablet + phones ---------- */
@media(max-width:900px){
  [data-page="how-it-works"] .how-head-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "photo" "ladder";grid-template-rows:auto;row-gap:var(--s-5)}
  [data-page="how-it-works"] .how-photo{margin:0 0 var(--s-2);height:auto;aspect-ratio:4/3;max-height:40vh}
  [data-page="how-it-works"] .how-photo img{object-position:50% 56%}
  [data-page="how-it-works"] .how-head-grid{row-gap:var(--s-4)}
  [data-page="how-it-works"] .how-jumps:not(#_){margin-top:var(--s-4)}
  [data-page="how-it-works"] .how-details{padding-top:0}
  [data-page="how-it-works"] .how-row-grid{padding-top:var(--s-4);padding-bottom:var(--s-4)}
  [data-page="how-it-works"] .how-ladder{max-width:none}
  [data-page="how-it-works"] .how-jumps:not(#_){padding-left:0;flex-direction:column;align-items:flex-start;gap:0}
  [data-page="how-it-works"] .how-row-grid{grid-template-columns:minmax(0,1fr)}
  [data-page="how-it-works"] .how-prep{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  [data-page="how-it-works"] .how-row-body .btn:not(#_):not(#_){width:100%}
  [data-page="how-it-works"] .how-ticks:not(#_){flex-direction:column;justify-content:flex-start;gap:var(--s-1)}
}
@media(max-width:480px){
  [data-page="how-it-works"] .how-photo{aspect-ratio:16/11}
  [data-page="how-it-works"] .how-photo img:not(#_){object-position:50% 30%}
  [data-page="how-it-works"] #how .timeline .station:not(#_){column-gap:var(--s-2)}
  [data-page="how-it-works"] #how .timeline .station:not(#_) + .station:after{left:64px}
  [data-page="how-it-works"] .how-faq details > div:not(#_){padding-right:0}
}

/* ======================= 42 · QUESTIONS (Your Rights) — Sep 17 multi-page build, DIRECTION §3 ===========================
   Topics | questions | answers on hairlines, every answer open (In Common With FAQ via Mobbin). From 21st.dev Basic Accordion
   24849 we kept only the row grammar (a heading per question, a hairline under each row, even vertical rhythm) — no toggle,
   no chevron. From Table of Contents 18123 the sticky rail with its left rule and a 2px marker; no scroll tracking
   (the one motion motif stays the fade-up). Scoped to body[data-page="questions"]; classes prefixed qx-. */

/* head: the courthouse photo leans on the top of the frame (the steps and columns), not the middle */
[data-page="questions"] .qx-head .phead-photo img{object-position:50% 30%}
[data-page="questions"] .qx-head .phead-title{font-size:clamp(2.75rem,5.4vw,4.9rem)}

/* the view: cream ground (the legacy #know rules paint it navy), full section rhythm */
[data-page="questions"] #know.qx:not(#_){background:var(--c-bg);color:var(--c-ink);padding:0}
[data-page="questions"] .qx > .wrap:not(#_){padding-top:var(--s-5);padding-bottom:var(--section-y)}

/* a topic group: rail on the left, rows on the right, a firm ink rule on top */
[data-page="questions"] .qx-group{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:0 clamp(32px,5vw,80px);
  border-top:1px solid var(--c-ink);padding-top:var(--s-4)}
[data-page="questions"] .qx-group + .qx-group{margin-top:clamp(64px,8vw,112px)}

/* the rail (sticky while its group scrolls past) */
[data-page="questions"] .qx-topic{position:sticky;top:var(--s-4);align-self:start;padding:2px 0 4px var(--s-2);
  border-left:2px solid var(--c-primary)}
[data-page="questions"] .qx-topic-num{display:block;margin:0 0 var(--s-1);font-family:var(--font-serif);font-size:clamp(2.2rem,3.2vw,3rem);
  line-height:.9;letter-spacing:-.02em;color:var(--c-accent)}
[data-page="questions"] .qx-topic-title:not(#_){margin:0;font-family:var(--font-sans);font-size:calc(var(--fs-body)*.82);font-weight:700;
  line-height:1.4;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--c-ink)}

/* rows: question | answer, hairline between */
[data-page="questions"] .qx-rows{min-width:0}
[data-page="questions"] .qx-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-1) clamp(24px,3.5vw,56px);
  align-items:baseline;margin:0;padding:var(--s-4) 0;border-top:1px solid var(--c-rule)}
[data-page="questions"] .qx-rows > .qx-row:first-child,[data-page="questions"] .qx-steps > .qx-row:first-child{border-top:0;padding-top:0}
[data-page="questions"] .qx-q:not(#_){display:block;margin:0;font-family:var(--font-serif);font-weight:400;font-size:clamp(1.3rem,1.8vw,1.6rem);
  line-height:1.22;letter-spacing:-.01em;text-transform:none;color:var(--c-ink);text-wrap:balance}
[data-page="questions"] .qx-a{display:block;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-muted);max-width:36em}
[data-page="questions"] .qx-a a{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px;transition:color var(--t-hover) var(--ease)}
[data-page="questions"] .qx-a a:hover,[data-page="questions"] .qx-a a:focus-visible{color:var(--c-primary-hover)}
[data-page="questions"] .qx-a [data-phone]{color:var(--c-ink);font-weight:600;white-space:nowrap}

/* the pull line: the first question, set large across the row, its answer beneath at lede size */
[data-page="questions"] .qx-row--pull{display:block;padding-bottom:var(--s-5)}
[data-page="questions"] .qx-row--pull .qx-q:not(#_){max-width:17em;font-size:clamp(2rem,3.9vw,3.8rem);line-height:1.08;letter-spacing:-.02em}
[data-page="questions"] .qx-row--pull .qx-a{margin-top:var(--s-3);max-width:40em;font-size:clamp(1.08rem,1.4vw,1.25rem);line-height:1.6;color:var(--c-ink)}
[data-page="questions"] .qx-row--pull .qx-a::before{content:'';display:block;width:48px;height:2px;margin:0 0 var(--s-3);background:var(--c-accent)}

/* the checklist: same rows, a gold numeral over each step */
[data-page="questions"] .qx-steps{list-style:none;margin:0;padding:0;counter-reset:qx-step}
[data-page="questions"] .qx-steps > .qx-row{counter-increment:qx-step}
[data-page="questions"] .qx-steps > .qx-row::before{display:none}
[data-page="questions"] .qx-steps .qx-q::before{content:counter(qx-step);display:inline-block;min-width:1.8em;font-family:var(--font-sans);
  font-size:.78rem;font-weight:700;letter-spacing:var(--track-label);vertical-align:.2em;color:var(--c-primary)}
[data-page="questions"] .qx-steps .qx-a{color:var(--c-ink)}
/* each step reads as one sentence: the serif lead-in runs straight into its sans continuation (review Sep 17) */
[data-page="questions"] .qx-steps > .qx-row{display:block}
[data-page="questions"] .qx-steps .qx-q:not(#_),[data-page="questions"] .qx-steps .qx-a{display:inline}
[data-page="questions"] .qx-steps .qx-a{margin-left:.3em}
[data-page="questions"] .qx-fine:not(#_){margin:var(--s-3) 0 0;padding-top:var(--s-2);border-top:1px solid var(--c-rule);font-size:.9rem;
  line-height:1.6;color:var(--c-muted)}

/* phones and small tablets: one column; the rail becomes the section heading, rows stack question over answer */
@media(max-width:900px){
  [data-page="questions"] .qx-group{grid-template-columns:minmax(0,1fr)}
  [data-page="questions"] .qx-topic{position:static;display:flex;align-items:baseline;gap:var(--s-2);margin:0 0 var(--s-4);padding-left:var(--s-2)}
  [data-page="questions"] .qx-topic-num{margin:0}
  [data-page="questions"] .qx-row{grid-template-columns:minmax(0,1fr);padding:var(--s-3) 0}
  [data-page="questions"] .qx-row--pull{padding-bottom:var(--s-4)}
  /* first screen: a wide photo, less cream, so the topic and the pull line start above the fold */
  [data-page="questions"] .qx-head .phead-photo:not(#_){aspect-ratio:16/9}
  [data-page="questions"] .qx-head .phead-photo img{aspect-ratio:16/9;height:auto;object-fit:cover}
  [data-page="questions"] .qx > .wrap:not(#_){padding-top:var(--s-4)}
  /* the burgundy block ends at the photo's right edge instead of touching the viewport edge */
  [data-page="questions"] .qx-head .phead-photo::before{right:0}
}

/* ======================= 43 · ESPAÑOL (Sep 17 2026 — DIRECTION §3, Cam's Option A) =======================
   The Spanish front door. First screen: brand-burgundy head, her Spanish line, "Hablo español." large, her lede, the two actions,
   and the hero's cut-out standing on the head's bottom edge (no photo box). Then the view's own copy on cream in the ruled
   language → the practice list (ES names) → the coupon. Scoped to [data-page="espanol"]; classes are prefixed esp-. */

/* ---- the head: the shared .phead--dark, on the brand burgundy (brighter than the near-black --c-dark; Cam: never dark-moody) */
[data-page="espanol"] .esp-head{background:var(--c-primary);padding-bottom:0}
[data-page="espanol"] .esp-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end;gap:clamp(24px,4vw,64px)}
[data-page="espanol"] .esp-copy{padding-bottom:clamp(48px,7vw,104px)}
/* review fix: on wide screens the copy sits level with her face, not low beside her torso */
@media(min-width:901px){[data-page="espanol"] .esp-copy{align-self:center;padding:var(--s-5) 0}}
/* the line above the headline: the quiet serif tagline (Editorial Hero 19075), a short gold rule in front of it */
[data-page="espanol"] .esp-kicker{display:flex;align-items:center;gap:14px;margin:0 0 var(--s-3);font-family:var(--font-serif);font-style:italic;
  font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.35;color:var(--c-accent-soft)}
[data-page="espanol"] .esp-kicker::before{content:'';flex:none;width:40px;height:1px;background:var(--c-accent-soft)}
[data-page="espanol"] .esp-title{font-size:clamp(3.2rem,8.4vw,7.6rem);line-height:.94;letter-spacing:-.035em;color:var(--c-bg)}
[data-page="espanol"] .esp-title em{color:var(--c-accent-soft)}
[data-page="espanol"] .esp-lede{max-width:31em;color:color-mix(in srgb,var(--c-bg) 84%,transparent)}
[data-page="espanol"] .esp-lede strong{color:var(--c-bg);font-weight:600}
/* the primary action on the burgundy ground takes the gold face, like every other dark band on the site */
[data-page="espanol"] .esp-head .btn.btn-red:not(#_):not(#_){background:var(--c-accent-soft);color:var(--c-ink);box-shadow:0 var(--btn-depth) 0 var(--c-accent-slab)}
[data-page="espanol"] .esp-head .btn.btn-red:not(#_):not(#_):active{box-shadow:0 1px 0 var(--c-accent-slab)}
[data-page="espanol"] .esp-head .btn:not(#_):not(#_):focus-visible{outline-color:var(--c-bg)}
@media(hover:hover) and (pointer:fine){
  [data-page="espanol"] .esp-head .btn.btn-red:not(#_):not(#_):hover{background:var(--c-bg)}
}
/* her cut-out: bottom-aligned to the head's edge, standing on one gold hairline that runs the width of the page */
[data-page="espanol"] .esp-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--c-accent);z-index:2}
/* review fix: the figure shows her down to the hip (85% of the photo) so the resting hand, which leaned on something that is
   no longer there, falls below the hairline and is cropped */
[data-page="espanol"] .esp-figure{--esp-h:clamp(460px,46vw,680px);margin:0;display:flex;justify-content:center;align-items:flex-start;align-self:end;
  height:calc(var(--esp-h) * .85);overflow:hidden}
[data-page="espanol"] .esp-figure img{display:block;width:auto;height:var(--esp-h);max-width:100%;object-fit:contain;object-position:50% 0}

/* ---- the body: cream, the view's own words set on hairlines --------------------------------------------------------- */
[data-page="espanol"] #espanol.view:not(#_){display:block;background:var(--c-bg);color:var(--c-ink);margin:0;padding:var(--section-y) 0}
[data-page="espanol"] #espanol.view::before{content:none;display:none}
[data-page="espanol"] #espanol > .esp-body:not(#_){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,112px);align-items:start;padding:0}
[data-page="espanol"] .esp-call{margin:0;font-family:var(--font-serif);font-weight:400;font-size:var(--fs-heading);line-height:var(--lh-heading);
  letter-spacing:-.02em;color:var(--c-ink);text-wrap:balance}
[data-page="espanol"] .esp-call strong{font-weight:400}
[data-page="espanol"] .esp-call em{color:var(--c-primary)}
[data-page="espanol"] .esp-facts{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--c-rule)}
[data-page="espanol"] .esp-facts li{position:relative;margin:0;padding:var(--s-3) 0 var(--s-3) var(--s-5);border-top:1px solid var(--c-rule);
  font-size:clamp(1.1rem,1.4vw,1.25rem);line-height:1.5;color:var(--c-ink)}
[data-page="espanol"] .esp-facts li:first-child{border-top-color:var(--c-accent)}
/* a gold dash marks each line — the same short rule as the kicker, no icons */
[data-page="espanol"] .esp-facts li::before{content:'';position:absolute;left:0;top:calc(var(--s-3) + .75em);width:24px;height:1px;background:var(--c-accent)}
[data-page="espanol"] #espanol .esp-sign:not(#_){margin:var(--s-4) 0 0;font-family:var(--font-serif);font-style:italic;font-size:clamp(1.4rem,2vw,1.75rem);
  line-height:1.3;color:var(--c-primary);transform:none}

/* ---- the practice list on cream (review fix): the shared ruled list, recoloured for a light ground ------------------- */
[data-page="espanol"] #esp-areas{background:var(--c-bg);color:var(--c-ink);padding:0 0 var(--section-y)}
[data-page="espanol"] #esp-areas .plist{border-top-color:var(--c-accent)}
[data-page="espanol"] #esp-areas .plist li{border-bottom-color:var(--c-rule)}
[data-page="espanol"] #esp-areas .prow{color:var(--c-ink)}
[data-page="espanol"] #esp-areas .prow.is-active{color:var(--c-primary)}
[data-page="espanol"] #esp-areas .prow:focus-visible{outline-color:var(--c-primary)}
[data-page="espanol"] #esp-areas .illustration-note{color:var(--c-muted)}
[data-page="espanol"] .esp-tag{display:flex;align-items:center;gap:14px;margin:var(--s-4) 0 0;font-family:var(--font-serif);
  font-style:italic;font-size:1.1rem;color:var(--c-muted)}
[data-page="espanol"] .esp-tag::before{content:'';flex:none;width:40px;height:1px;background:var(--c-accent)}
[data-page="espanol"] #espanol.view:not(#_){padding-bottom:clamp(56px,8vw,112px)}

/* ---- tablets: keep the split, let her shrink ----------------------------------------------------------------------- */
@media(max-width:1100px) and (min-width:901px){
  [data-page="espanol"] .esp-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  [data-page="espanol"] .esp-figure{--esp-h:clamp(420px,52vw,560px)}
}

/* ---- phones: her face in the first screen — kicker + headline left, the cut-out right, standing on the gold hairline
        that tops the lede; lede and actions run full width beneath -------------------------------------------------- */
@media(max-width:900px){
  [data-page="espanol"] .esp-head{padding-top:var(--s-4);padding-bottom:var(--s-5)}
  [data-page="espanol"] .esp-head::after{content:none}
  [data-page="espanol"] .esp-grid{grid-template-columns:minmax(0,1fr) 46%;grid-template-areas:"kick fig" "title fig" "lede lede" "act act";gap:0 var(--s-2);align-items:end}
  [data-page="espanol"] .esp-copy{display:contents}
  [data-page="espanol"] .esp-kicker{grid-area:kick;align-self:end;display:block;font-size:1.05rem;margin-bottom:var(--s-2)}
  [data-page="espanol"] .esp-kicker::before{display:block;margin-bottom:12px}
  [data-page="espanol"] .esp-title{grid-area:title;font-size:clamp(2.6rem,12vw,3.6rem);padding-bottom:var(--s-3)}
  [data-page="espanol"] .esp-figure{grid-area:fig;justify-content:flex-end;margin-right:calc(-1 * var(--s-1))}
  [data-page="espanol"] .esp-figure{height:auto;width:100%;max-width:260px;justify-self:end;aspect-ratio:974/1252}
  [data-page="espanol"] .esp-figure img{height:auto;width:100%;max-width:none}
  [data-page="espanol"] .esp-lede{grid-area:lede;margin:0;padding-top:var(--s-3);border-top:1px solid var(--c-accent);max-width:none}
  [data-page="espanol"] .esp-actions{grid-area:act;margin-top:var(--s-4)}
  [data-page="espanol"] .esp-actions .btn:not(#_):not(#_){width:100%}
  [data-page="espanol"] .esp-actions .btn.btn-ghost-w:not(#_):not(#_){justify-content:space-between}
  [data-page="espanol"] #espanol > .esp-body:not(#_){grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  [data-page="espanol"] .esp-facts li{padding-left:var(--s-4)}
  [data-page="espanol"] .esp-call{padding-top:var(--s-3);border-top:1px solid var(--c-accent)}
  [data-page="espanol"] #esp-areas .prow,[data-page="espanol"] #esp-areas .prow.is-active{color:var(--c-ink)}
}

/* ======================= 44 · CONTACT (Sep 17 multi-page build, DIRECTION §3) =======================
   The one designed moment is the number: the page's h1 says "every way", and the biggest thing on the page is the way.
   Head (cream): title left, the desk-phone photo right, then the number across the full width on a gold hairline (YLLW).
   Body: the form framed on paper (hairline, no shadow) left; the ways right as ruled rows with the brand arrow, closed by the
   "where she works" row (21st.dev Contact Page 7139's ruled panels — structure only). Close: the night skyline. */

/* ---------- head ---------- */
[data-page="contact"] .ct-head{padding:clamp(32px,4vw,64px) 0 clamp(24px,3vw,40px)}
[data-page="contact"] .ct-head-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  grid-template-areas:"title photo" "call call";gap:clamp(28px,4vw,56px) clamp(32px,5vw,80px);align-items:center}
[data-page="contact"] .ct-title{grid-area:title;max-width:11em;font-size:clamp(2.5rem,5vw,4.4rem)}
[data-page="contact"] .ct-photo{grid-area:photo;position:relative;margin:0;align-self:stretch}
[data-page="contact"] .ct-photo::before{content:'';position:absolute;right:calc(-1 * clamp(12px,1.6vw,22px));top:calc(-1 * clamp(12px,1.6vw,22px));
  width:40%;height:44%;background:var(--c-primary);z-index:0}
[data-page="contact"] .ct-photo img{position:relative;z-index:1;display:block;width:100%;height:100%;min-height:220px;aspect-ratio:3/2;object-fit:cover}
/* the number: a hairline, a gold label, then the digits as the headline of the page */
[data-page="contact"] .ct-call{grid-area:call;min-width:0;padding-top:clamp(20px,2.4vw,32px);border-top:1px solid var(--c-accent)}
[data-page="contact"] .ct-call-label{margin:0 0 var(--s-1);font-family:var(--font-sans);font-size:calc(var(--fs-body)*.75);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--c-accent-slab)}
[data-page="contact"] .ct-num{display:inline-flex;align-items:center;gap:clamp(14px,2vw,32px);max-width:100%;
  font-family:var(--font-serif);font-weight:400;font-size:clamp(3rem,12.2vw,11.5rem);line-height:.95;letter-spacing:-.035em;
  font-variant-numeric:lining-nums;white-space:nowrap;color:var(--c-primary);text-decoration:none;transition:color var(--t-hover) var(--ease)}
[data-page="contact"] .ct-num .arr{width:clamp(40px,5vw,84px);height:clamp(18px,2.3vw,38px);color:var(--c-accent)}
[data-page="contact"] .ct-num:focus-visible{outline:3px solid var(--c-ink);outline-offset:6px}
@media(hover:hover) and (pointer:fine){
  [data-page="contact"] .ct-num:hover{color:var(--c-primary-hover)}
  [data-page="contact"] .ct-num:hover .arr{color:var(--c-primary-hover)}
}

/* ---------- body: framed form + ruled ways ---------- */
[data-page="contact"] #contact:not(#_){background:var(--c-bg);padding:clamp(24px,3.5vw,56px) 0 clamp(56px,7vw,104px)}
[data-page="contact"] #contact::before{display:none}
[data-page="contact"] #contact > .wrap:not(#_){padding-top:0;padding-bottom:0}
[data-page="contact"] #contact .contact-grid:not(#_){grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,80px);align-items:start}
[data-page="contact"] #contact .contact-grid > *:not(#_){background:transparent;box-shadow:none;border-radius:0;padding:0}
/* the frame: paper, one hairline, a burgundy top edge — the form is the one boxed thing on the page, because it IS the ask */
[data-page="contact"] #contact .contact-grid > .ct-frame:not(#_){background:var(--c-surface);border:1px solid var(--c-rule);border-top:4px solid var(--c-primary);
  border-radius:4px;padding:clamp(22px,3.4vw,48px)}
[data-page="contact"] #caseForm{display:grid;gap:var(--s-3)}
[data-page="contact"] #caseForm .form-group{margin:0;padding:0;border:0;min-width:0}
[data-page="contact"] #caseForm legend{float:left;width:100%;padding:0;margin:0 0 var(--s-2);font-family:var(--font-sans);font-size:calc(var(--fs-body)*.75);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--c-accent-slab)}
[data-page="contact"] #caseForm legend + *{clear:both}
[data-page="contact"] #caseForm .form-group + .form-group{padding-top:var(--s-3);border-top:1px solid var(--c-rule)}
[data-page="contact"] #caseForm label{display:block;margin:0 0 6px;font-family:var(--font-sans);font-weight:600;font-size:.95rem;color:var(--c-ink)}
[data-page="contact"] #caseForm .field :is(input,select,textarea){width:100%}
[data-page="contact"] #caseForm .form-note{color:var(--c-muted)}
[data-page="contact"] #caseForm .btn{margin-top:var(--s-1)}

/* the ways: ruled rows, no boxes — icon · label over value · the brand arrow */
[data-page="contact"] #contact .ways:not(#_){display:block;border-top:1px solid var(--c-ink)}
[data-page="contact"] #contact .way:not(#_){display:flex;align-items:center;gap:18px;min-height:88px;margin:0;padding:18px 48px 18px 0;
  background:transparent;border:0;border-bottom:1px solid var(--c-rule);border-radius:0;box-shadow:none;transform:none;
  color:var(--c-ink);text-decoration:none;transition:color var(--t-hover) var(--ease)}
[data-page="contact"] #contact .way:not(#_) svg{width:24px;height:24px;stroke:var(--c-accent-slab)}
[data-page="contact"] #contact .way:not(#_) b{display:block;margin:0 0 2px;font-family:var(--font-sans);font-weight:700;font-size:calc(var(--fs-body)*.75);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--c-muted)}
[data-page="contact"] #contact .way:not(#_) > div > span span{font:inherit;color:inherit}
[data-page="contact"] #contact .way:not(#_) > div > span{display:block;font-family:var(--font-serif);font-size:clamp(1.3rem,1.9vw,1.65rem);line-height:1.2;
  color:var(--c-primary);overflow-wrap:anywhere}
@media(hover:hover) and (pointer:fine){[data-page="contact"] #contact .way:not(#_):hover > div > span{color:var(--c-primary-hover)}}
/* above 900px the ways stay beside the form as it scrolls, so no empty block opens under them */
@media(min-width:901px){[data-page="contact"] #contact .ways:not(#_){position:sticky;top:calc(var(--s-5) + 80px)}}
/* where she works (the 7139 "office" panel, filled only with facts already on the site) */
[data-page="contact"] .ct-where{padding:var(--s-3) 0 0}
[data-page="contact"] .ct-where p{margin:0 0 6px;font-family:var(--font-sans);font-size:var(--fs-body);color:var(--c-muted)}
[data-page="contact"] .ct-where b{font-weight:700;color:var(--c-ink)}
[data-page="contact"] .ct-where p[lang="es"] b{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.25rem;color:var(--c-primary)}

/* ---------- close: the night skyline, photo only (the footer lockup right under it carries the wordmark) ---------- */
[data-page="contact"] .ct-close{position:relative;height:clamp(160px,18vw,280px);overflow:hidden;background:var(--c-dark)}
[data-page="contact"] .ct-close-sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}

/* ---------- phones ---------- */
@media(max-width:900px){
  [data-page="contact"] .ct-head-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "call" "photo"}
  [data-page="contact"] .ct-photo{margin-right:calc(-1 * max(20px,5vw))}
  [data-page="contact"] .ct-photo::before{display:none}
  [data-page="contact"] .ct-photo img{min-height:0}
  [data-page="contact"] #contact .contact-grid:not(#_){grid-template-columns:minmax(0,1fr)}
  [data-page="contact"] #caseForm .btn:not(#_):not(#_){width:100%}
}
/* small phones: the desk photo would push the form a whole screen down — the number is the head here */
@media(max-width:600px){
  [data-page="contact"] .ct-photo{display:none}
}
@media(prefers-reduced-motion:reduce){[data-page="contact"] .ct-num,[data-page="contact"] .ct-num .arr,[data-page="contact"] #contact .way{transition:none}}

/* ======================= 45 · YOUR RIGHTS (Sep 18 2026 — Cam's pick: one plain-English guide for AZ · TX · KS) =======================
   Head: the rich burgundy inner-page head, text-only, with a "your state" picker in it.
     Picker = 21st.dev "Segmented Control" 23552 (ddoemonn, same author as the site's press-depth buttons), rebuilt without
     React/motion: a radiogroup of three buttons, roving tabindex, arrow keys, a sliding gold thumb (no slide under reduced motion).
   Body: 21st.dev "Feature Comparison Table" 21218 (7ovr), rebuilt as a real <table>: grouped topics, a state header per group,
     the picked state's column highlighted. Nothing is hidden: all three states stay on the page (no click-to-reveal); on phones
     each row stacks its three states and the picked one moves to the top.
   Then the two general sections (what a claim can include, protecting your claim) on the soft-gold ground — the site's third tone,
   so the page runs burgundy → cream → gold → burgundy (the consultation band) and no two grounds repeat. */

[data-page="your-rights"] .yr-head .phead-lede{max-width:40em}

/* ---------- the state picker ---------- */
[data-page="your-rights"] .yr-pick-wrap{margin-top:var(--s-5)}
[data-page="your-rights"] .yr-pick-label{margin:0 0 10px;font-family:var(--font-sans);font-size:.74rem;font-weight:700;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--c-accent-soft)}
[data-page="your-rights"] .yr-pick{position:relative;display:inline-grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:min(100%,30rem);
  padding:4px;border-radius:6px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(226,197,126,.35)}
[data-page="your-rights"] .yr-pick button{position:relative;z-index:1;min-height:48px;padding:0 1.1rem;border:0;border-radius:4px;background:none;
  font-family:var(--font-sans);font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(246,241,232,.82);
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color var(--t-hover) var(--ease)}
[data-page="your-rights"] .yr-pick button:hover{color:#fff}
[data-page="your-rights"] .yr-pick button[aria-checked="true"]{color:var(--c-ink)}
[data-page="your-rights"] .yr-pick button:focus-visible{outline:3px solid var(--c-bg);outline-offset:2px}
/* the thumb: the gold face of the primary button, with its slab edge */
[data-page="your-rights"] .yr-thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:4px;
  background:var(--c-accent-soft);box-shadow:0 3px 0 var(--c-accent-slab);transform:translateX(calc(var(--i,0) * 100%));
  transition:transform .32s cubic-bezier(.3,.9,.3,1)}

/* ---------- the comparison table ---------- */
[data-page="your-rights"] .yr{background:var(--c-bg);color:var(--c-ink);padding:var(--section-y) 0}
[data-page="your-rights"] .yr-group{margin:0 0 var(--s-6)}
[data-page="your-rights"] .yr-group:last-of-type{margin-bottom:var(--s-4)}
[data-page="your-rights"] .yr-group-head{display:flex;align-items:baseline;gap:var(--s-2);margin:0 0 var(--s-3)}
[data-page="your-rights"] .yr-n{font-family:var(--font-serif);font-size:clamp(2.2rem,3.4vw,3rem);line-height:.8;color:var(--c-accent)}
[data-page="your-rights"] .yr-group-head h2{margin:0;font-family:var(--font-serif);font-weight:400;font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.1;
  letter-spacing:-.015em;text-transform:none;color:var(--c-ink)}
[data-page="your-rights"] .yr-group-head h2 .r{font-style:italic;color:var(--c-primary)}
[data-page="your-rights"] .yr-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;background:var(--c-surface);
  box-shadow:inset 0 0 0 1px var(--c-rule)}
[data-page="your-rights"] .yr-table th,[data-page="your-rights"] .yr-table td{padding:18px 20px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--c-rule);font-size:var(--fs-body);line-height:1.55}
[data-page="your-rights"] .yr-table tr:last-child > *{border-bottom:0}
[data-page="your-rights"] .yr-table thead th{padding:14px 20px;font-family:var(--font-sans);font-size:.78rem;font-weight:700;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--c-muted);background:var(--c-bg);border-bottom:2px solid var(--c-accent)}
[data-page="your-rights"] .yr-table thead th:first-child{width:24%}
[data-page="your-rights"] .yr-table tbody th{font-family:var(--font-serif);font-weight:400;font-size:1.15rem;line-height:1.3;color:var(--c-ink)}
[data-page="your-rights"] .yr-table td strong{display:block;margin-bottom:4px;font-family:var(--font-serif);font-weight:500;font-size:1.35rem;
  line-height:1.2;color:var(--c-primary)}
[data-page="your-rights"] .yr-cite{display:block;margin-top:8px;font-family:var(--font-sans);font-size:.78rem;line-height:1.4;color:var(--c-muted)}
/* the picked state: a warm column with gold side rules, and its header wears the burgundy face */
[data-page="your-rights"] .yr-table td,[data-page="your-rights"] .yr-table thead th{transition:background-color .25s var(--ease),box-shadow .25s var(--ease)}
[data-page="your-rights"] .yr[data-pick="az"] [data-state="az"],
[data-page="your-rights"] .yr[data-pick="tx"] [data-state="tx"],
[data-page="your-rights"] .yr[data-pick="ks"] [data-state="ks"]{background:color-mix(in srgb,var(--c-accent) 11%,var(--c-surface));
  box-shadow:inset 2px 0 0 var(--c-accent),inset -2px 0 0 var(--c-accent)}
[data-page="your-rights"] .yr[data-pick="az"] thead [data-state="az"],
[data-page="your-rights"] .yr[data-pick="tx"] thead [data-state="tx"],
[data-page="your-rights"] .yr[data-pick="ks"] thead [data-state="ks"]{background:var(--c-primary);color:var(--c-bg);box-shadow:none}
[data-page="your-rights"] .yr-note{margin:var(--s-3) 0 0;font-size:.9rem;color:var(--c-muted)}

/* ---------- the general sections, on the soft-gold ground ---------- */
[data-page="your-rights"] .yr-general{background:color-mix(in srgb,var(--c-accent) 17%,var(--c-bg));padding:var(--section-y) 0}
[data-page="your-rights"] .yr-general-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px)}
[data-page="your-rights"] .yr-list{list-style:none;margin:0;padding:0;border-top:1px solid color-mix(in srgb,var(--c-accent) 55%,transparent)}
[data-page="your-rights"] .yr-list li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid color-mix(in srgb,var(--c-accent) 35%,transparent);
  line-height:1.55;color:var(--c-ink)}
[data-page="your-rights"] .yr-list li::before{content:"";position:absolute;left:4px;top:1.35em;width:12px;height:2px;background:var(--c-primary)}
[data-page="your-rights"] .yr-list li strong{color:var(--c-primary);font-weight:700}
[data-page="your-rights"] .yr-more{margin-top:var(--s-5);display:flex;flex-wrap:wrap;gap:14px 16px}

/* ---------- phones: each row stacks its three states; the picked state moves to the top ---------- */
@media(max-width:760px){
  [data-page="your-rights"] .yr-pick{display:grid;width:100%}
  [data-page="your-rights"] .yr-table,[data-page="your-rights"] .yr-table tbody{display:block}
  [data-page="your-rights"] .yr-table thead{display:none}
  [data-page="your-rights"] .yr-table tr{display:flex;flex-direction:column;border-bottom:1px solid var(--c-rule)}
  [data-page="your-rights"] .yr-table tr:last-child{border-bottom:0}
  [data-page="your-rights"] .yr-table th,[data-page="your-rights"] .yr-table td{border-bottom:0;padding:12px 16px}
  [data-page="your-rights"] .yr-table tbody th{padding-top:18px;background:var(--c-bg)}
  [data-page="your-rights"] .yr-table td::before{content:attr(data-label);display:block;margin-bottom:4px;font-family:var(--font-sans);font-size:.72rem;
    font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--c-muted)}
  [data-page="your-rights"] .yr[data-pick="az"] td[data-state="az"],
  [data-page="your-rights"] .yr[data-pick="tx"] td[data-state="tx"],
  [data-page="your-rights"] .yr[data-pick="ks"] td[data-state="ks"]{order:-1}
  [data-page="your-rights"] .yr[data-pick] tbody th{order:-2}
  [data-page="your-rights"] .yr-general-grid{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  [data-page="your-rights"] .yr-thumb,[data-page="your-rights"] .yr-table td,[data-page="your-rights"] .yr-table thead th{transition:none}
}

/* ---------- the way in from the six injury pages: one soft-gold row under "What to discuss" ---------- */
.pp-pair--rights{border:0!important;padding-top:var(--s-3)!important}
.pp-rights{margin:0}
.pp-rights-link{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:12px 20px;border-left:3px solid var(--c-accent);
  background:color-mix(in srgb,var(--c-accent) 17%,var(--c-bg));font-family:var(--font-serif);font-size:1.25rem;line-height:1.2;color:var(--c-primary);
  text-decoration:none;transition:background-color var(--t-hover) var(--ease),transform var(--t-press) var(--ease)}
.pp-rights-link .arr{transition:transform var(--t-hover) var(--ease)}
.pp-rights-link:hover,.pp-rights-link:focus-visible{background:color-mix(in srgb,var(--c-accent) 28%,var(--c-bg))}
.pp-rights-link:hover .arr,.pp-rights-link:focus-visible .arr{transform:translateX(5px)}
.pp-rights-link:active{transform:translateY(2px)}
.pp-rights-link:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.pp-rights-link,.pp-rights-link .arr{transition:none;transform:none!important}}

/* intros, the two notes under the deadlines table, the strong lead inside a cell */
[data-page="your-rights"] .yr-intro{margin:0 0 var(--s-3);max-width:46em;color:var(--c-muted);line-height:1.6}
[data-page="your-rights"] .yr-table td > span:not(.yr-cite){display:block}
[data-page="your-rights"] .yr-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-3)}
[data-page="your-rights"] .yr-callout{margin:0;padding:18px 20px;border-left:3px solid var(--c-accent);background:var(--c-surface);line-height:1.55;color:var(--c-ink)}
[data-page="your-rights"] .yr-callout strong{display:block;margin-bottom:6px;font-family:var(--font-serif);font-weight:500;font-size:1.25rem;color:var(--c-primary)}
[data-page="your-rights"] .yr-callout > span:not(.yr-cite){display:block}
@media(max-width:760px){[data-page="your-rights"] .yr-notes{grid-template-columns:minmax(0,1fr)}}

/* ======================= 90 · RICH GROUNDS + TIGHTER RHYTHM (Sep 18 — Cam: "just red and white… boring", "a lot of open space") ====
   1 · Rhythm: the section spacing token drops by a third (128 → 88 px on desktop, 64 → 48 px on phones).
   2 · Inner-page heads open on burgundy like the Home hero. .phead--rich = the existing .phead--dark colours plus a lit
       gradient and a fine grain, so the first screen of every inner page has colour and depth instead of cream on cream.
   3 · The consultation band (on every page) gets the same lit gradient + grain instead of a flat fill.
   Grain = one inline SVG noise tile at 7% (text contrast unaffected), no blend modes, so it stays cheap on phones.
   Last file in pages.css on purpose: it only re-colours; the pages' own files keep their layout. */
:root{
  --section-y:clamp(48px,6vw,88px);
  --gold-ground:color-mix(in srgb,var(--c-accent) 17%,var(--c-bg));
  --rich-grad:radial-gradient(110% 120% at 0% 0%,#8E2231 0%,rgba(142,34,49,0) 55%),linear-gradient(155deg,#6E1020 0%,#520C19 55%,#2A0810 100%);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 2 · rich inner-page heads ---------- */
.phead--rich:not(#_){background:var(--rich-grad);color:var(--c-bg)}
.phead--rich::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--grain);opacity:.07;pointer-events:none}
.phead--rich > .wrap{position:relative;z-index:1}
/* on burgundy the primary action wears the gold face (same as the Home hero and the consultation band) */
.phead--rich .btn.btn-red:not(#_):not(#_){background:var(--c-accent-soft);color:var(--c-ink);box-shadow:0 var(--btn-depth) 0 var(--c-accent-slab)}
.phead--rich .btn.btn-red:not(#_):not(#_):hover{background:var(--c-bg)}
.phead--rich .btn.btn-red:not(#_):not(#_):active{box-shadow:0 1px 0 var(--c-accent-slab)}
.phead--rich .btn.btn-red:not(#_):not(#_) svg,.phead--rich .btn.btn-red:not(#_) .btn-ico{background:var(--c-primary);color:#fff}
.phead--rich .btn:not(#_):not(#_):focus-visible{outline-color:var(--c-bg)}
.phead--rich .crumbs a:focus-visible{outline-color:var(--c-accent-soft)}
.phead--rich .crumbs [aria-hidden]{color:var(--c-accent-soft)}
/* practice heads: the italic lead line and the three ticks */
.phead--rich .lead-line:not(#_){color:var(--c-accent-soft)}
.phead--rich .pp-ticks:not(#_):not(#_){color:rgba(246,241,232,.92);border-top-color:rgba(246,241,232,.2)}

/* ---------- 3 · the consultation band ---------- */
#consultation.consultation:not(#_){position:relative;background:var(--rich-grad)}
#consultation.consultation::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--grain);opacity:.07;pointer-events:none}
#consultation.consultation > *{position:relative;z-index:1}
/* rich heads: labels that were tuned for cream (the hub's "Injured? Let's talk." went burgundy-on-burgundy) */
.phead--rich .phead-eyebrow:not(#_):not(#_),.phead--rich .hub-eyebrow:not(#_):not(#_){color:var(--c-accent-soft)}
.phead--rich .phead-eyebrow .r:not(#_):not(#_),.phead--rich .hub-eyebrow .r:not(#_):not(#_){color:var(--c-bg)}

/* ---------- 4 · one hover + tap answer for every list row (Mobbin: Anchor side list + MindMarket service rows) ----------
   Hover or keyboard focus: the row's rule turns gold and its arrow nudges toward where it goes. Tap: the row sinks 2 px, the
   same press the buttons have. Reduced motion keeps the colour change and drops the movement. */
.pp-rail .service-menu nav a{transition:color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease),transform var(--t-press) var(--ease)}
.pp-rail .service-menu nav a > :last-child{transition:transform var(--t-hover) var(--ease)}
.pp-rail .service-menu nav a:hover,.pp-rail .service-menu nav a:focus-visible{border-bottom-color:var(--c-accent)}
.pp-rail .service-menu nav a:hover > :last-child,.pp-rail .service-menu nav a:focus-visible > :last-child{transform:translateX(4px)}
.pp-rail .service-menu nav a:active{transform:translateY(2px)}
[data-page="practice-areas"] .hub-link{transition:transform var(--t-press) var(--ease)}
[data-page="practice-areas"] .hub-cap .arr{transition:color var(--t-hover) var(--ease),transform var(--t-hover) var(--ease)}
[data-page="practice-areas"] .hub-link:hover .hub-cap .arr,[data-page="practice-areas"] .hub-link:focus-visible .hub-cap .arr{transform:translateX(6px)}
[data-page="practice-areas"] .hub-link:focus-visible .hub-cap{border-top-color:var(--c-primary)}
[data-page="practice-areas"] .hub-link:active{transform:translateY(2px)}
@media(prefers-reduced-motion:reduce){
  .pp-rail .service-menu nav a,.pp-rail .service-menu nav a > :last-child,[data-page="practice-areas"] .hub-link,[data-page="practice-areas"] .hub-cap .arr{transition:none;transform:none!important}
}

/* ---------- 5 · the third tone (attorney-sites idea 1: cream → soft gold → burgundy, never two alike touching) ----------
   Questions: the "Just been in an accident?" steps sit on the soft-gold ground edge to edge (box-shadow + clip-path paints the
   band past the column without widening the page), and run straight into the consultation band. */
[data-page="questions"] #qx-accident:not(#_){margin-top:var(--s-6);padding:var(--s-6) 0;background:var(--gold-ground);
  box-shadow:0 0 0 100vmax var(--gold-ground);clip-path:inset(0 -100vmax)}
[data-page="questions"] #know:not(#_){padding-bottom:0}

/* ---------- 6 · no decorative numbers (Cam, Sep 18: "01, 02 … unneeded — this ships to a real lawyer today") ----------
   The 01–07 / 1–4 / 01–06 index numerals are gone from the markup (menus, practice heads + side list, Practice Areas tiles,
   Meet Brenda, Questions, Your Rights). Real sequences keep their numbers: How it works 1-2-3, the accident checklist 1-5.
   These rules re-flow the layouts that had a column for the number. */
.mobile-nav-sub a:not(#_){grid-template-columns:minmax(0,1fr)}
.nav-drop-panel a:not(#_){grid-template-columns:minmax(0,1fr)}
.pp-rail .service-menu nav a:not(#_){grid-template-columns:minmax(0,1fr) 26px;align-items:center}
.pp-rail .service-menu nav a .service-arrow.arr{justify-self:end;width:22px;height:10px;color:var(--c-primary)}
[data-page="practice-areas"] .hub-cap:not(#_){grid-template-columns:minmax(0,1fr) auto}
[data-page="meet-brenda"] .mb-beat:not(#_):not(#_){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
[data-page="meet-brenda"] .mb-close:not(#_):not(#_){margin-left:0}
@media(max-width:900px){
  [data-page="meet-brenda"] .mb-beat:not(#_):not(#_){grid-template-columns:minmax(0,1fr)}
  [data-page="meet-brenda"] .mb-beat-b:not(#_){grid-column:auto}
}
/* phone menu: without the numerals the seven areas read louder than the main items — set them as a quiet sub-level
   (serif, sentence case, a size down, muted ink) so the hierarchy reads at a glance */
.mobile-nav-sub a:not(#_):not(#_){font-family:var(--font-serif);font-size:1.02rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--c-ink)}
.mobile-nav-sub a[aria-current="page"]:not(#_):not(#_){color:var(--c-primary)}

/* ---------- 7 · Cam's clean-up sweep (Sep 18): decoration out, the last two pages get the burgundy top ----------
   The consultation band loses its dashed "coupon" frame and inner panel: one clean burgundy band. (Stamp, repeated ticks and the
   15-second pop-up left the markup.) */
#consultation .coupon:not(#_){border:0;border-radius:0;background:none;padding-left:0;padding-right:0}
/* How it works: the ladder re-coloured for the burgundy top — gold step circles with ink numerals, cream titles, soft text */
.how-head.phead--rich .how-title .phead-lede:not(#_){color:var(--c-accent-soft)}
.how-head.phead--rich .station h2:not(#_):not(#_){color:var(--c-bg)}
.how-head.phead--rich .station p:not(#_):not(#_){color:rgba(246,241,232,.82)}
.how-head.phead--rich .station p.hand:not(#_):not(#_){color:var(--c-accent-soft)}
.how-head.phead--rich .station .st-mark:not(#_):not(#_){background:var(--c-accent-soft);color:var(--c-ink);box-shadow:none}
.how-head.phead--rich .station + .station:after{background:rgba(246,241,232,.18)!important}
.how-head.phead--rich .how-jumps a:not(#_){color:var(--c-accent-soft);border-bottom-color:rgba(226,197,126,.5)}
.how-head.phead--rich .how-jumps a:hover:not(#_),.how-head.phead--rich .how-jumps a:focus-visible:not(#_){color:var(--c-bg);border-bottom-color:var(--c-bg)}
/* Contact: the big number reads cream on burgundy; the photo's corner block turns gold */
.ct-head.phead--rich .ct-num:not(#_){color:var(--c-bg)}
.ct-head.phead--rich .ct-num:hover:not(#_),.ct-head.phead--rich .ct-num:hover .arr:not(#_){color:var(--c-accent-soft)}
.ct-head.phead--rich .ct-num:focus-visible{outline-color:var(--c-bg)}
.ct-head.phead--rich .ct-photo::before{background:var(--c-accent)!important}
.ct-head.phead--rich .ct-call-label:not(#_){color:var(--c-accent-soft)}
/* phones: the office photo crops to a short band — aim it at her face, not the painting above her */
@media(max-width:900px){[data-page="how-it-works"] .how-photo img:not(#_){object-position:50% 66%}}