/* United Legal — theme.css (round 3, module "theme"; = DESIGN-SPEC "r3-system.css" §1, §2 utilities, §3, §5, §10).
   The shared visual system: the blue-purple token set, gradients and lights; the layout tiers (gutters, widths,
   radii, vertical rhythm); the live-site section backgrounds (Map-3 city texture on the practice board, aerial
   photo on the reviews plate); the persistent logo watermark; the glass utility classes; the hero retint.
   Linked LAST on every page (after identity-header.css); theme.js is appended after reference-sections.js.
   Brand anchors (--primary, --accent, --blue, --sky, --panel) and the font tokens are never changed here.
   Cascade: this file loads after original/landing/site/footer/polish/refine/template/identity/identity-header,
   so plain selectors win; no !important is used. Other round-3 modules own `.sec-band .band*` (callband.css),
   `.r2-featured*` (featured.css), `.sec-philosophy*` (philosophy.css), `.reviews-plate*` (reviews.css),
   `.cc-*` (case-chat.css), `.ula-header*` (header module) — nothing below touches those selectors. */

/* =========================================================================================
   1. Colour tokens (DESIGN-SPEC §1) and gradients / lights (§1.1) — literal values, copy as written
   ========================================================================================= */
:root{
  --bp-950:#081338; --bp-900:#0C1D55; --bp-800:#1B2E6B; --bp-700:#293E7A; --bp-600:#3A4C80; --bp-500:#435686;
  --bp-400:#4F5F93; --bp-300:#7F8DB8; --bp-200:#B9C3E0; --bp-100:#E3E8F5; --bp-050:#F2F5FC; --bp-royal:#033E7C;
  --ink-2:#3B4660; --mist-200:#CCE1F6; --mist-100:#F1F8FF;

  /* Navy panel: practice board, reviews base, footer box, steps/how boxes */
  --g-panel:linear-gradient(160deg,#1B2E6B 0%,#0C1D55 48%,#081338 100%);
  /* Key light, upper-right, on every navy panel (::after, pointer-events:none); fill light, lower-left, sky */
  --l-key:radial-gradient(ellipse 55% 45% at 80% 0%,rgba(79,95,147,.45) 0%,rgba(79,95,147,0) 70%);
  --l-fill:radial-gradient(ellipse 52% 46% at 10% 94%,rgba(204,225,246,.14) 0%,rgba(204,225,246,0) 70%);
  /* Call band */
  --g-band:linear-gradient(180deg,#1B2E6B 0%,#0C1D55 100%);
  --l-band:radial-gradient(ellipse 40% 70% at 50% 100%,rgba(79,95,147,.55) 0%,rgba(79,95,147,0) 70%);
  /* Home hero over the colour video: tint layer (z -2) + veil layer (z -1); replaces live .29 + .64 flat navy */
  --g-hero-tint:rgba(41,62,122,.38);
  --g-hero-veil:linear-gradient(90deg,rgba(12,29,85,.78) 0%,rgba(12,29,85,.56) 45%,rgba(12,29,85,.30) 75%,rgba(58,76,128,.34) 100%),
                radial-gradient(ellipse 50% 60% at 85% 30%,rgba(79,95,147,.38) 0%,rgba(79,95,147,0) 70%),
                linear-gradient(180deg,rgba(8,19,56,0) 62%,rgba(8,19,56,.45) 100%);
  /* ≤1024: the copy spans the whole width, so the veil becomes vertical and even (≈ live .29 + .64) */
  --g-hero-veil-narrow:linear-gradient(180deg,rgba(12,29,85,.66) 0%,rgba(12,29,85,.58) 55%,rgba(8,19,56,.74) 100%),
                       radial-gradient(ellipse 70% 40% at 85% 0%,rgba(79,95,147,.30) 0%,rgba(79,95,147,0) 70%);
  /* Lemon CA/TX + lemon hub heroes — the lemon-law-2 look (RTL variant mirrors the lights and the angle) */
  --g-hero-lemon:radial-gradient(ellipse 46% 62% at 82% 44%,rgba(79,95,147,.55) 0%,rgba(79,95,147,0) 70%),
                 radial-gradient(ellipse 40% 50% at 10% 100%,rgba(204,225,246,.12) 0%,rgba(204,225,246,0) 70%),
                 linear-gradient(118deg,#0C1D55 0%,#293E7A 55%,#3A4C80 100%);
  --g-hero-lemon-rtl:radial-gradient(ellipse 46% 62% at 18% 44%,rgba(79,95,147,.55) 0%,rgba(79,95,147,0) 70%),
                     radial-gradient(ellipse 40% 50% at 90% 100%,rgba(204,225,246,.12) 0%,rgba(204,225,246,0) 70%),
                     linear-gradient(242deg,#0C1D55 0%,#293E7A 55%,#3A4C80 100%);
  /* Six service heroes — the chapter-7 look */
  --g-hero-service:linear-gradient(118deg,#0C1D55 0%,#1B2E6B 55%,#033E7C 100%);
  --g-hero-service-rtl:linear-gradient(242deg,#0C1D55 0%,#1B2E6B 55%,#033E7C 100%);
  /* Featured logo panel as glass (live #CCE1F6 → #F1F8FF) */
  --g-featured:linear-gradient(180deg,rgba(204,225,246,.72) 0%,rgba(241,248,255,.86) 100%);
  /* Light open sections (philosophy, YANA/close, outcomes, FAQ): transparent wash so the watermark shows */
  --g-wash:linear-gradient(180deg,rgba(12,29,85,.035) 0%,rgba(12,29,85,0) 100%);
  /* Light cards on navy */
  --g-card:linear-gradient(180deg,#FFFFFF 0%,#EBF4FD 100%);
  /* Rims and shadows */
  --rim-navy:inset 0 1px 0 rgba(255,255,255,.10);
  --rim-light:inset 0 1px 0 rgba(255,255,255,.90);
  --shadow-plate:0 1px 0 rgba(12,29,85,.06),0 32px 64px -40px rgba(8,19,56,.45);
  --shadow-card:0 1px 2px rgba(12,29,85,.06),0 16px 36px -22px rgba(12,29,85,.28);
  --shadow-glass:0 24px 48px -24px rgba(8,19,56,.50);
  --hair-light:1px solid rgba(12,29,85,.10);
  --hair-navy:1px solid rgba(255,255,255,.12);
  --ease-std:cubic-bezier(.2,.7,.2,1);   /* every entrance/hover in round 3 */

  /* Layout tokens (§3.1). --header-height is the design value; theme.js overwrites it with the measured header. */
  --gutter-a:10px; --gutter-n:20px; --gutter-b:30px; --gutter-c:120px; --measure:700px; --maxw:1440px;
  --stack:10px; --sec-open:96px; --panel-r:33px; --card-r:16px; --review-r:22px; --featured-r:16px;
  --header-height:138px;
}
@media (max-width:1024px){
  :root{ --gutter-n:10px; --gutter-b:10px; --gutter-c:48px; --sec-open:64px; --panel-r:24px; --card-r:16px; --header-height:130px; }
}
@media (max-width:767px){
  :root{ --gutter-c:16px; --sec-open:48px; --panel-r:18px; --card-r:14px; --review-r:18px; --featured-r:14px; --header-height:120px; }
}

/* =========================================================================================
   2. Page canvas + the persistent logo watermark (§10)
   One fixed layer under everything, anchored to the viewport (iOS ignores background-attachment:fixed, a fixed
   pseudo-element does not). It shows wherever a surface is transparent or a ≤4 % wash; navy plates cover it.
   `.06` of #031C51 on white = #F0F1F5 — it cannot affect any 4.5:1 text pair. identity.css's copy is replaced.
   ========================================================================================= */
html{ background:#FFFFFF; }
body{ background:transparent; }
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url(brand/live/2026_10_Favicon.png) 50% 52% / 500px auto no-repeat; opacity:.06;
}
@media (max-width:1024px){ body::before{ background-size:380px auto; } }
@media (max-width:767px){  body::before{ background-size:300px auto; background-position:50% 50%; } }
@media (forced-colors:active), print{ body::before{ display:none; } }

/* =========================================================================================
   3. Layout tiers (§3.1–3.2): A plate 1420 (gutter 10) · A′ nested 1400 (20) · B frame 1380 (30) ·
   C content 1200 (120) · D reading 700. Steps of 10 px — the live site's own nesting; no other width exists.
   ========================================================================================= */
.sec{ padding:0 var(--gutter-a,10px); }
.sec__inner{ max-width:1400px; width:auto; margin-inline:auto; }                       /* A′ content box (original.css); undoes identity.css 1240 */
.sec-practice>.sec__inner,.sec-team>.sec__inner{ max-width:1400px; }                 /* identity.css set 1380 */
/* Tier A plates: the inner box is the plate, 1420 inside the 10 px gutter */
.sec-steps .sec__inner,.sec-band .sec__inner,.sec-how .sec__inner,.sec-reviews .sec__inner,.sec-close .sec__inner,.sec-why .sec__inner{ max-width:1420px; }   /* callband.css says `none`; 1420 is the same box at ≤1440 and keeps the cap above it */
/* Tier C stays where original.css already put it (.sec-outcomes 1200) and the FAQ keeps its 860 reading width. */

/* ---------- 3a. Hero shells (§3.2 "Hero wrappers/boxes", §5): the box starts at y 0 under the sticky header ---------- */
.home-hero,.hero,.ll-hero{ padding:0 var(--gutter-a,10px); margin-top:calc(-1 * var(--header-height,117px)); scroll-margin-top:0; }
.home-hero__box,.hero__box,.ll-hero__box{
  max-width:1420px; margin-inline:auto; box-sizing:border-box;
  border-radius:var(--panel-r,33px); background:var(--primary,#0C1D55);
  padding-top:var(--header-height,117px); padding-bottom:64px;                    /* End the hero before the separate in-flow media panel. */
}
.home-hero__box{ min-height:calc(var(--header-height,117px) + 600px); }
.home-hero__grid{ padding-bottom:40px; }
@media (max-width:767px){ .home-hero__box,.hero__box,.ll-hero__box{ padding-bottom:64px; } }
/* Legacy video control remains below the header, clear of hero copy. */
.video-toggle{ top:calc(var(--header-height,117px) + 14px); bottom:auto; inset-inline-end:24px; }

/* ---------- 3b. Home hero retint (§3.2 "Home hero layers"): full-colour office video under a blue-purple tint ---------- */
.home-hero__video,.home-hero__poster{ filter:none; opacity:1; }
.home-hero__tint{ background:var(--g-hero-tint,rgba(41,62,122,.38)); mix-blend-mode:normal; }
.home-hero__veil{ background:var(--g-hero-veil); }
.home-hero__box::after{ display:none; }                                            /* refine.css bottom darkening */
@media (max-width:1024px){ .home-hero__veil{ background:var(--g-hero-veil-narrow); } }
/* lead card (§5): keep the existing recipe, add the rim; removes identity.css's violet tint */
.lead-card{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--shadow-glass,0 24px 48px -24px rgba(8,19,56,.5)); }

/* ---------- 3c. Inner heroes (§3.2 "Inner hero bg"): lemon-law-2 look on CA/TX + hub, chapter-7 look on services ---------- */
.hero .hero__bg,[dir=rtl] .hero .hero__bg,.ll-hero__bg{ background:var(--g-hero-lemon); }
[dir=rtl] .hero .hero__bg,[dir=rtl] .ll-hero__bg{ background:var(--g-hero-lemon-rtl); }
body[data-page=service] .hero .hero__bg,[dir=rtl] body[data-page=service] .hero .hero__bg{ background:var(--g-hero-service); }
[dir=rtl] body[data-page=service] .hero .hero__bg{ background:var(--g-hero-service-rtl); }

/* =========================================================================================
   4. Navy plates (§3.2 "Navy boxes", §3.5 L1): gradient + rim + plate shadow + key/fill lights on ::after.
   The call band is excluded: callband.css owns `.sec-band .band` and puts its single bottom light on ::before.
   ========================================================================================= */
.navy-box,.navy-box.how-box,.navy-box.steps-box,.navy-box.why-box,.ll-cta .navy-box{
  position:relative; isolation:isolate; border-radius:var(--panel-r,33px);
  background:var(--g-panel); box-shadow:var(--rim-navy),var(--shadow-plate);
}
.navy-box:not(.band)::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background:var(--l-key),var(--l-fill);
}

/* ---------- 4a. Practice board (§3.2 "Practice board" geometry + the live Map-3 city texture) ----------
   Stack, top → bottom: Map-3.svg (::before, luminosity .12, viewport-fixed so it stays put while the page scrolls)
   → key/fill lights (::after) → --g-panel. The grid/cards themselves belong to the practice module. */
.sec-practice .sec__inner{ padding:56px 0 0; }
.sec-practice .sec-head{ margin:0 0 40px; }
.pboard{
  position:relative; isolation:isolate; overflow:hidden; max-width:1400px; margin:0 auto; padding:35px 100px;
  border-radius:var(--panel-r,33px); background:var(--g-panel); box-shadow:var(--rim-navy),var(--shadow-plate);
}
.pboard::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url(brand/live/2026_10_Map-3.svg) center / cover no-repeat; background-attachment:fixed;
  opacity:.12; mix-blend-mode:luminosity;
}
.pboard::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--l-key),var(--l-fill); }
.pboard .pcard{ border-radius:var(--card-r,16px); background:var(--g-card); border:1px solid rgba(255,255,255,.65); box-shadow:var(--shadow-card); }
@media (max-width:1024px){ .pboard{ padding:24px; } }
@media (max-width:767px){ .pboard{ padding:14px; } }

/* ---------- 4b. Reviews plate (legacy `.reviews-box` until the reviews module's `.reviews-plate` replaces it) ----------
   Live: navy + 2999.jpg (aerial city photo) fixed, cover, opacity .3, luminosity — the "moving background".
   Shipped as brand/live/aerial.webp (1920×1440, 467 KB) instead of the 2.28 MB jpg. */
.sec-reviews{ padding:var(--stack,10px) var(--gutter-a,10px) 0; }
.sec-reviews .navy-box.reviews-box{ background:var(--g-panel); border:0; color:#fff; }
.sec-reviews .reviews-box:not(.ref-reviews)::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background:url(brand/live/aerial.webp) center / cover no-repeat; background-attachment:fixed; opacity:.3; mix-blend-mode:luminosity;
}
.ref-reviews::before{ background-image:url(brand/live/aerial.webp); }               /* reference-sections.js's copy: same look, optimised asset */
.sec-reviews .reviews-box::after{ background:var(--l-key),var(--l-fill),linear-gradient(rgba(67,86,134,.18),rgba(67,86,134,.18)); }   /* keeps the blend in the --bp family */
/* navy plate text and light cards on every language (template.css only did this on home-en) */
.reviews-box .eyebrow-light{ color:#8FC6FF; }
.reviews-box .h2--light{ color:#fff; }
.reviews-box .h2--light .hl{ color:var(--accent,#F9E900); }
.reviews-box .rev{ background:linear-gradient(180deg,#FFFFFF 0%,#EFF7FF 100%); border:1px solid #fff; border-radius:var(--review-r,22px); color:var(--primary,#0C1D55); box-shadow:var(--shadow-card); }
.reviews-box .rev::before{ color:var(--accent,#F9E900); opacity:.9; }
.reviews-box .rev blockquote{ color:#2B3650; }
.reviews-box .rev cite{ color:var(--primary,#0C1D55); }
.reviews-box .rev cite span{ color:#5A6680; }
.reviews-box .rev-note{ color:#CCE1F6; }

/* ---------- 4c. Fixed-attachment fallbacks: iOS/touch ignores `fixed`; reduced motion gets a static texture ---------- */
@media (hover:none){
  .pboard::before{ background-attachment:scroll; background-size:1600px auto; background-position:center top; }
  .sec-reviews .reviews-box::before{ background-attachment:scroll; }
}
@media (prefers-reduced-motion:reduce){
  .pboard::before,.sec-reviews .reviews-box::before,.ref-reviews::before{ background-attachment:scroll; }
}
/* phones get the 960 px copy of the same photo (brand/live/aerial-960.webp, 960×720) */
@media (max-width:767px){
  .sec-reviews .reviews-box::before,.ref-reviews::before,.t-bg-aerial::before{ background-image:url(brand/live/aerial-960.webp); }
}

/* ---------- 4d. Focus rings on navy surfaces are yellow (§1 "Yellow is used only for … focus rings on navy");
   original.css's blue ring (#0072C7) is 2.4:1 on navy. Light surfaces keep the blue ring. ---------- */
.home-hero__story :is(a,button):focus-visible,.hero__left :is(a,button):focus-visible,.ll-hero__inner :is(a,button):focus-visible,
.ll-choice :is(a,button):focus-visible,.steps-box :is(a,button):focus-visible,.why-box :is(a,button):focus-visible,
.ll-cta .navy-box :is(a,button):focus-visible,.how-box .steps-left :is(a,button):focus-visible{ outline-color:var(--accent,#F9E900); }

/* =========================================================================================
   5. Vertical rhythm and the light plates (§3.4, §15): adjacent plates sit 10 px apart (--stack); open light
   sections breathe --sec-open / --sec-gap; light plates use --g-wash so the watermark shows through them.
   ========================================================================================= */
/* home: practice board → band (callband.css) → philosophy (legacy .ul-philosophy until the philosophy module lands) */
.ul-philosophy{ padding:0 var(--gutter-a,10px); margin-top:var(--stack,10px); }
.ul-philosophy__inner{ max-width:1420px; box-sizing:border-box; padding:var(--sec-open,96px) 110px; border-radius:var(--panel-r,33px); background:var(--g-wash); border:var(--hair-light); }
.ul-philosophy h2 span{ color:var(--bp-600,#3A4C80); }                               /* no violet (identity.css #39327f) */
.ul-philosophy__art{ background:var(--g-panel); border-radius:var(--panel-r,33px); }
/* how it works: Tier A navy plate 10 px below the philosophy plate */
.sec-how{ padding:var(--stack,10px) var(--gutter-a,10px) 0; }
/* attorneys: open section */
.sec-team .sec__inner{ padding:var(--sec-gap,96px) 0; }
.att__photo{ border-radius:var(--card-r,16px); }
/* close / "You Are Not Alone": Tier A light plate 10 px below the reviews plate, watermark behind it */
.sec-close{ padding:var(--stack,10px) var(--gutter-a,10px) var(--sec-open,96px); }
.sec-close .sec__inner{ box-sizing:border-box; padding:var(--sec-open,96px) 110px; border-radius:var(--panel-r,33px); background:var(--g-wash); border:var(--hair-light); }
.close-box{ background:transparent; border:0; padding:0; border-radius:0; }
.route{ border-radius:var(--card-r,16px); border:var(--hair-light); box-shadow:var(--shadow-card); }

/* service pages (§15.2) */
.service-stats{ background:transparent; padding-inline:var(--gutter-n,20px); }       /* the one opaque light panel, as a 1400 Tier A′ plate */
.service-stats .sec__inner{ box-sizing:border-box; max-width:1400px; padding:40px 40px 34px; border-radius:var(--panel-r,33px); background:linear-gradient(180deg,#F2F7FC 0%,var(--panel,#EBF2F7) 100%); border:var(--hair-light); }
.sec-steps .sec__inner{ padding:0; }
.service-card{ border-radius:var(--card-r,16px); background:var(--g-card); border:0; box-shadow:inset 0 4px 0 0 var(--accent,#F9E900), var(--shadow-card); }
.service-outcomes .service-card{ box-shadow:inset 0 4px 0 0 var(--blue,#0072C7), var(--shadow-card); }

/* CA / TX (§15.3) */
.signs-panel{ border-radius:var(--panel-r,33px); background:var(--g-wash); border:var(--hair-light); }
.sign{ border-radius:var(--card-r,16px); background:var(--g-card); border:var(--hair-light); box-shadow:var(--shadow-card); }

/* lemon hub (§15.4): Tier C copy, Tier A navy plate */
.ll-unsure{ max-width:calc(1200px + 2 * var(--gutter-c,120px)); padding:var(--sec-open,96px) var(--gutter-c,120px) 0; }
.ll-shared div{ border-radius:var(--card-r,16px); background:var(--g-card); border:var(--hair-light); box-shadow:var(--shadow-card); }
.ll-cta{ max-width:1440px; margin:0 auto; padding:var(--sec-open,96px) var(--gutter-a,10px); }

@media (max-width:1024px){
  .ul-philosophy__inner,.sec-close .sec__inner{ padding-inline:48px; }
  .service-stats .sec__inner{ padding:32px 28px 28px; }
}
@media (max-width:767px){
  .ul-philosophy__inner,.sec-close .sec__inner{ padding-inline:16px; }
  .service-stats .sec__inner{ padding:26px 18px 22px; }
}

/* =========================================================================================
   6. Footer (§3.2 "Footer", §4.4): Tier B frame — box 1380 radius 33 on --g-panel; the yellow bar is the same
   44 px fully-round pill component as the header pill (the header module reproduces these values).
   ========================================================================================= */
.site-footer{ padding:36px var(--gutter-b,30px) 26px; }
.site-footer .footer-box{
  position:relative; isolation:isolate; max-width:1380px; margin-inline:auto; box-sizing:border-box; padding:56px 46px 42px;
  border:0; border-radius:var(--panel-r,33px); background:var(--g-panel); box-shadow:var(--rim-navy),var(--shadow-plate);
}
.site-footer .footer-box::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; background:var(--l-key),var(--l-fill); }
.site-footer .footer-bar{
  max-width:1380px; height:44px; min-height:0; box-sizing:border-box; padding:0 28px; margin:20px auto 0;
  display:flex; align-items:center; justify-content:space-between; border-radius:22px;
  background:var(--accent,#F9E900); color:var(--primary,#0C1D55); font:400 12px/1.4 var(--f-text,Montserrat,sans-serif);
}
@media (max-width:1050px){ .site-footer .footer-box{ padding:40px 28px; } }
@media (max-width:600px){
  .site-footer{ padding:24px var(--gutter-a,10px) 100px; }
  .site-footer .footer-box{ padding:32px 22px; }
  .site-footer .footer-bar{ height:auto; min-height:44px; padding:10px 18px; flex-direction:column; gap:4px; text-align:center; font-size:11px; }
}

/* =========================================================================================
   7. Glass utilities (§2) — the five recipes as classes any module or the integrator can apply.
   `.t-glass--nav` = header block (2.1) · `.t-glass--menu` = sub-menu / mobile nav (2.2) · `.t-glass--light` =
   featured panel (2.3) · `.t-glass--navy` = Case Chat pill (2.4) · `.t-glass--dialog` = Case Chat dialog (2.5).
   Each has the identical fallback set: no backdrop-filter support, html[data-glass=fallback|opaque],
   prefers-reduced-transparency, forced-colors. A translucent fill alone is never used: every recipe has blur,
   a lens highlight, a rim and a border.
   ========================================================================================= */
.t-glass--nav{
  background:radial-gradient(ellipse 60% 45% at 18% 0%,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 62%),rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.90),0 1px 0 rgba(12,29,85,.06);
  border-bottom:1px solid rgba(12,29,85,.10); border-radius:0 0 33px 33px;
  transition:box-shadow .25s ease,background-color .25s ease;
}
.t-glass--nav.is-scrolled{ background-color:rgba(255,255,255,.84); box-shadow:inset 0 1px 0 rgba(255,255,255,.90),0 10px 30px rgba(12,29,85,.12); }
.t-glass--menu{
  background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(12,29,85,.10); border-radius:18px; box-shadow:0 14px 36px rgba(12,29,85,.16),inset 0 1px 0 #fff;
}
.t-glass--light{
  background:radial-gradient(ellipse 60% 45% at 18% 0%,rgba(255,255,255,.36) 0%,rgba(255,255,255,0) 60%),var(--g-featured,linear-gradient(180deg,rgba(204,225,246,.72),rgba(241,248,255,.86)));
  -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(12,29,85,.06),var(--shadow-glass,0 24px 48px -24px rgba(8,19,56,.5));
}
.t-glass--navy{
  background:radial-gradient(ellipse 60% 45% at 18% 0%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 62%),rgba(41,62,122,.42);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(204,225,246,.38); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 34px rgba(5,13,43,.35);
}
.t-glass--dialog{ background:rgba(240,242,251,.92); -webkit-backdrop-filter:blur(24px) saturate(130%); backdrop-filter:blur(24px) saturate(130%); border:1px solid #9AA9DD; }
.t-glass--dialog::backdrop{ background:rgba(16,22,50,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }

/* Fallbacks — every glass surface, identical set */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .t-glass--nav{ background:#FFFFFF; }
  .t-glass--menu{ background:#FFFFFF; }
  .t-glass--light{ background:linear-gradient(180deg,#CCE1F6 0%,#F1F8FF 100%); border-color:rgba(12,29,85,.12); }   /* = the live panel */
  .t-glass--navy{ background:#182658; }
  .t-glass--dialog{ background:#F0F2FB; }
}
html[data-glass=fallback] .t-glass--nav,html[data-glass=opaque] .t-glass--nav,html[data-glass=fallback] .t-glass--menu,html[data-glass=opaque] .t-glass--menu{ background:#FFFFFF; -webkit-backdrop-filter:none; backdrop-filter:none; }
html[data-glass=fallback] .t-glass--light,html[data-glass=opaque] .t-glass--light{ background:linear-gradient(180deg,#CCE1F6 0%,#F1F8FF 100%); border-color:rgba(12,29,85,.12); -webkit-backdrop-filter:none; backdrop-filter:none; }
html[data-glass=fallback] .t-glass--navy,html[data-glass=opaque] .t-glass--navy{ background:#182658; -webkit-backdrop-filter:none; backdrop-filter:none; }
html[data-glass=fallback] .t-glass--dialog,html[data-glass=opaque] .t-glass--dialog{ background:#F0F2FB; -webkit-backdrop-filter:none; backdrop-filter:none; }
@media (prefers-reduced-transparency:reduce){
  .t-glass--nav,.t-glass--menu,.t-glass--light,.t-glass--navy,.t-glass--dialog,.lead-card{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .t-glass--nav,.t-glass--menu{ background:#FFFFFF; }
  .t-glass--light{ background:linear-gradient(180deg,#CCE1F6,#F1F8FF); }
  .t-glass--navy{ background:#182658; } .t-glass--dialog{ background:#F0F2FB; } .lead-card{ background:#182658; }
}
@media (forced-colors:active){
  .t-glass--nav,.t-glass--menu,.t-glass--light,.t-glass--navy,.t-glass--dialog,.lead-card{ background:Canvas; color:CanvasText; border:1px solid CanvasText; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
  .navy-box::after,.pboard::before,.pboard::after,.sec-reviews .reviews-box::before,.sec-reviews .reviews-box::after,.site-footer .footer-box::after{ display:none; }
  .navy-box,.pboard,.site-footer .footer-box,.home-hero__box,.hero__box,.ll-hero__box{ background:Canvas; color:CanvasText; border:1px solid CanvasText; }
  .home-hero__tint,.home-hero__veil,.hero__bg,.ll-hero__bg{ background:Canvas; }
}

/* =========================================================================================
   8. Texture utilities: the two live backgrounds as classes for any navy plate a module builds
   (`.t-bg-map` = Map-3 city map, `.t-bg-aerial` = aerial photo). The host needs position:relative + isolation.
   ========================================================================================= */
.t-bg-map,.t-bg-aerial{ position:relative; isolation:isolate; }
.t-bg-map::before,.t-bg-aerial::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; background-attachment:fixed; mix-blend-mode:luminosity; background-position:center; background-size:cover; background-repeat:no-repeat; }
.t-bg-map::before{ background-image:url(brand/live/2026_10_Map-3.svg); opacity:.12; }
.t-bg-aerial::before{ background-image:url(brand/live/aerial.webp); opacity:.3; }
@media (hover:none), (prefers-reduced-motion:reduce){ .t-bg-map::before,.t-bg-aerial::before{ background-attachment:scroll; } }
@media (forced-colors:active){ .t-bg-map::before,.t-bg-aerial::before{ display:none; } }

/* =========================================================================================
   9. BBB + ABA marks (DESIGN-SPEC §14) — added at integration: the system module left `.proof` untouched.
   Bare white marks, 150 × 57 each, 70 px clear gap (live 220 px pitch), BBB first then ABA to its right in
   every language (`direction:ltr`). No filter, no blend, opacity 1. Removes home.css's pill chrome and the
   template.css / polish.css height overrides. The ABA <li> carries data-claim="aba" for the attorney gate.
   ========================================================================================= */
.home-hero__foot .proof,.proof{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 70px; margin:14px 0 0;   /* + foot padding/margin 8 = 22 under the buttons */ padding:0; list-style:none; direction:ltr; }
.proof li,.proof li.proof--bbb,.proof li.proof--aba{ display:block; padding:0; background:none; border:0; border-radius:0; min-height:0; }
.proof li img,.proof li.proof--bbb img,.proof li.proof--aba img{ display:block; width:150px; height:57px; object-fit:contain; filter:none; opacity:1; mix-blend-mode:normal; }
.proof li.proof--bbb a{ display:block; border-radius:8px; }
.proof li.proof--bbb a:focus-visible{ outline:3px solid var(--accent,#F9E900); outline-offset:4px; }
@media (max-width:1024px){ .home-hero__foot .proof,.proof{ gap:16px 48px; } }
@media (max-width:767px){ .home-hero__foot .proof,.proof{ gap:12px 24px; justify-content:center; } .proof li img,.proof li.proof--bbb img,.proof li.proof--aba img{ width:124px; height:47px; } }

/* Integration: the new call band on the 18 service pages (between outcomes and FAQ) has no bottom padding by design
   (plate rhythm, callband.css); the open FAQ section that follows had no top padding of its own (it used to inherit the
   gap from .sec-outcomes). Give it the open-section rhythm (DESIGN-SPEC §3.4: --sec-open top). */
.sec-band + .service-faq{ padding-top:var(--sec-open,96px); }

/* =========================================================================================
   10. QA round-1 fixes (docs/round3/QA-ROUND1.json, module "theme"; applied 2026-10-13 22:40)
   ========================================================================================= */
/* 10a. Practice board = the reference card anatomy (DESIGN-SPEC §7): six columns, equal top row, centred cards,
        bare 88 px icon, outlined pill action. Breakpoint spans carry !important because home.css does. */
.pboard{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px; }
.pboard>.pcard:nth-child(-n+2),.pboard>.pcard:nth-child(n+6){ grid-column:span 3; }
.pboard>.pcard:nth-child(n+3):nth-child(-n+5){ grid-column:span 2; }
@media (max-width:1024px){ .pboard>.pcard{ grid-column:span 3!important; } }
@media (max-width:767px){ .pboard>.pcard{ grid-column:span 6!important; } }
.pboard .pcard{ align-items:center; text-align:center; gap:12px; padding:32px 28px 28px; padding-inline-end:28px; }
.pboard .pcard .pcard__icon,.pboard .pcard:hover .pcard__icon{ position:static; width:88px; height:88px; border-radius:0; background:none; border:0; box-shadow:none; }
.pboard .pcard .practice-icon{ width:88px; height:88px; }
.pboard .pcard .pcard__eyebrow{ margin-top:2px; }
.pboard .pcard h3{ font:600 28px/1.1 var(--f-primary); }
[dir=rtl] .pboard .pcard h3{ font-size:26px; line-height:1.5; font-weight:700; }
.pboard .pcard .pcard__lead{ max-width:52ch; margin-inline:auto; }
.pboard .pcard .chips{ color:#4B5878; }
.pboard .pcard .pcard__actions{ width:100%; display:flex; flex-direction:column; align-items:center; padding-top:16px; }
.pboard .pcard .pcard__cta{ min-height:44px; padding:0 24px; border:2px solid var(--primary,#0C1D55); border-radius:99px; background:transparent; color:var(--primary,#0C1D55); font:600 15px/1 var(--f-primary); text-transform:uppercase; letter-spacing:.03em; gap:0; justify-content:center; transition:background .18s ease,color .18s ease; }
.pboard .pcard .pcard__cta:hover,.pboard .pcard .pcard__cta:focus-visible{ background:var(--primary,#0C1D55); color:#fff; }
.pboard .pcard .pcard__cta .arr{ display:none; }
.pboard .pcard .pcard__cta:focus-visible,.pcard--lemon .pcard__cta:focus-visible,.pcard--lemon [data-lemon-toggle]:focus-visible{ outline:3px solid #0072C7; outline-offset:4px; }
[dir=rtl] .pboard .pcard .pcard__cta{ font:600 15px/1.2 var(--f-text); text-transform:none; letter-spacing:0; }
.pboard .pcard .state-step{ width:100%; text-align:center; }
.pboard .pcard .state-step .state-step__row{ justify-content:center; }
.sec-practice .sec-head h2::after{ margin-top:8px; }
.sec-practice .pboard{ margin-top:28px; }
@media (max-width:767px){ .pboard .pcard{ padding:26px 20px 24px; } .pboard .pcard .pcard__icon,.pboard .pcard .practice-icon{ width:72px; height:72px; } }

/* 10b. Hero typography to the spec/live values (§5); the pause control meets the 44 px floor and hides under reduced motion
        (the video is replaced by the poster there, so "Play" would do nothing visible). */
.home-hero__story h1{ font-size:clamp(44px,4.6vw,65px); line-height:1; }
.home-hero__story .lede{ font:500 20px/30px var(--f-text); max-width:645px; }
.video-toggle{ width:44px; height:44px; min-height:44px; }
@media (prefers-reduced-motion:reduce){ .video-toggle{ display:none; } }

/* 10c. Focus indicators inside the glass lead card: white rings (≥ 4.2:1 on the card, ≥ 8:1 on the darkened base). */
.lead-card :is(a,button,input):focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.lead-field input:focus{ outline:3px solid #fff; outline-offset:2px; border-color:var(--accent,#F9E900); }

/* 10d. Small targets and the footer sizes the visual lens measured against the live footer. */
.state-swap{ min-height:44px; }
.site-footer .f-logo img{ width:300px; }
.site-footer .footer-contact-icons a{ width:44px; height:44px; flex-basis:44px; }
.site-footer .footer-contact-icons svg{ width:22px; height:22px; }
.site-footer .footer-bar a{ display:inline-flex; align-items:center; min-height:44px; }