/* United Legal — UI/UX polish layer (2026-10-13). Loaded last on every page.
   Brand tokens, fonts, section shells and all behaviour are unchanged; this file only
   corrects hierarchy, rhythm, affordance and a handful of defects found in the audit. */

:root{--sec-gap:96px;--anchor-offset:calc(var(--header-height,117px) + 24px)}

/* ---------- 1. In-page links land below the sticky header (CTA → #practice-areas was hidden) ---------- */
#practice-areas,#attorneys,#contact,#choose,#top,.sec[id],main>section[id]{scroll-margin-top:var(--anchor-offset)}

/* ---------- 2. Footer: four columns on every page (home loaded site.css before footer.css) ---------- */
.site-footer .footer-cols.footer-cols--4{grid-template-columns:1.5fr .95fr .8fr 1fr;gap:44px}
@media(max-width:1050px){.site-footer .footer-cols.footer-cols--4{grid-template-columns:1fr 1fr 1fr;gap:28px}.site-footer .footer-cols.footer-cols--4 .footer-disclaimer{grid-column:1/-1}}
@media(max-width:600px){.site-footer .footer-cols.footer-cols--4{grid-template-columns:1fr}}

/* ---------- 3. One eyebrow treatment across the homepage ---------- */
.home-eyebrow,.how-box .eyebrow-light,.reviews-box .eyebrow-light{font:500 18px/1.25 var(--f-primary);text-transform:uppercase;letter-spacing:.06em;margin:0}
.how-box .eyebrow-light,.reviews-box .eyebrow-light{color:#8FC6FF}
.how-box .how-intro{gap:14px}
.reviews-box .sec-head{gap:10px}
[dir=rtl] .home-eyebrow,[dir=rtl] .how-box .eyebrow-light,[dir=rtl] .reviews-box .eyebrow-light{letter-spacing:0;font-size:17px}

/* ---------- 4. Hero: tighter column, grounded trust row, usable pause control ---------- */
.home-hero__box{min-height:min(700px,calc(100dvh - 160px))}
.home-hero__grid{padding:56px 40px 92px}
.home-hero__story{gap:20px;max-width:720px}
.home-hero__story h1{font-size:clamp(44px,5vw,70px);line-height:1.02;max-width:21ch}
.home-hero__story .lede{font-size:19px;line-height:1.55;max-width:540px}
.home-hero .btn-row{margin-top:6px}
.home-hero__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;max-width:620px;margin-top:8px;padding-top:18px;border-top:1px solid rgba(204,225,246,.22)}
.home-hero__foot .home-chat,.home-hero__foot .proof{margin:0}
.proof li.proof--bbb img{height:36px}
.video-toggle{width:40px;height:40px;min-height:40px;opacity:.78;border-color:rgba(255,255,255,.5)}
.video-toggle:hover,.video-toggle:focus-visible{opacity:1}
[dir=rtl] .home-hero__story h1{max-width:none}

/* ---------- 5. Featured band: monochrome logos (brand colour on hover), inset like the hero ---------- */
.r2-featured{margin:0 10px;border-radius:28px;padding:24px 0 26px}
.r2-featured h2{color:#5A6680}
.r2-featured__pause{border-color:#C9D7E6;color:#3B4660}
.r2-featured__logos img{filter:grayscale(1) contrast(1.05);opacity:.62;transition:filter .25s ease,opacity .25s ease}
.r2-featured__logos li:hover img,.r2-featured__logos li:focus-within img{filter:none;opacity:1}
@media(prefers-reduced-motion:reduce){.r2-featured__logos img{transition:none}}

/* ---------- 6. Consistent vertical rhythm between homepage sections ---------- */
.sec-practice .sec__inner{padding:var(--sec-gap) 0 0}
.sec-how{padding-top:var(--sec-gap)}
.sec-team .sec__inner{padding:var(--sec-gap) 0 0}
.sec-reviews{padding-top:var(--sec-gap)}
.sec-close .sec__inner{padding:var(--sec-gap) 0 48px}

/* ---------- 7. Practice board: a quieter, more editorial card ---------- */
.sec-practice .sec-head h2::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--accent);margin:16px auto 0}
.pboard{margin-top:40px;gap:22px}
.pboard .pcard{padding:28px 28px 24px;gap:12px}
.pboard .pcard .pcard__icon{width:72px;height:72px;border-radius:20px}
.practice-icon{width:56px;height:56px}
.pboard .pcard .pcard__eyebrow{margin-top:6px}
.pboard .pcard h3{font-size:32px;line-height:1.04}
.pboard .pcard .pcard__lead{font-size:15px;line-height:1.65;max-width:62ch}
/* symptom tags read as a list, not as buttons */
.pboard .pcard .chips{display:block;margin:2px 0 0;font:500 13px/1.7 var(--f-text);color:#5A6680}
.pboard .pcard .chips li{display:inline;background:none;border:0;border-radius:0;padding:0;font:inherit;color:inherit}
.pboard .pcard .chips li:not(:last-child)::after{content:"\00A0\00B7\00A0\00A0";color:#A9B6CC}
.pboard .pcard .pcard__actions{margin-top:auto;padding-top:14px}
.pcard.is-targeted{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent),0 18px 40px rgba(12,29,85,.12)}
.state-step{margin-top:12px}

/* ---------- 8. Reviews: attribution aligned, quotes marked ---------- */
.rev{padding:28px 26px 24px}
.rev::before{content:"\201C" / "";font:800 64px/0.7 var(--f-text);color:var(--accent);opacity:.55;height:26px;display:block}
.rev cite{margin-top:auto;padding-top:4px}

/* ---------- 9. Quick Check: a disabled "Continue" should look waiting, not broken ---------- */
.glass .btn.quiz-next:disabled,.glass button.hi-primary:disabled{opacity:1;background:transparent;border-color:rgba(249,233,0,.4);color:rgba(228,236,247,.62);cursor:not-allowed;animation:none}
.glass .btn.quiz-next:not(:disabled){box-shadow:0 8px 22px rgba(249,233,0,.18)}

/* ---------- 10. Service pages: vector check marks, FAQ chevrons, card spacing ---------- */
.service-checks li{align-items:flex-start}
.service-check-mark{width:20px;height:20px;flex:none;margin-top:1px;fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;font-size:0;line-height:0}
.service-card{padding:30px 30px 28px}
.service-card h3{font-size:28px;margin-bottom:12px}
.service-card p{font-size:15px;line-height:1.75}
.service-stats .h2{font-size:34px}
.service-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:24px}
.service-faq summary::-webkit-details-marker{display:none}
.service-faq summary::after{content:"";width:11px;height:11px;flex:none;margin-inline-end:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s ease}
.service-faq details[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.service-faq details p{max-width:70ch}

/* ---------- 11. Lemon Law chooser: the three "how it works" notes as readable rows ---------- */
.ll-shared{grid-template-columns:1fr;gap:10px}
.ll-shared div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:4px 18px;align-items:start;padding:18px 22px}
.ll-shared h3{font-size:22px;margin:0}
.ll-shared p{margin:0;font-size:14px;line-height:1.65}

/* ---------- 12. Scroll-entrance motion (reveal.js): transform/opacity only, one pass, no CLS ---------- */
html.js-reveal [data-reveal]{transition:opacity .55s var(--ease-out,ease-out),transform .65s var(--ease-out,ease-out);transition-delay:calc(var(--reveal-i,0)*55ms)}
html.js-reveal [data-reveal]:not(.is-in){opacity:0;transform:translateY(18px)}
@media(prefers-reduced-motion:reduce){html.js-reveal [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}}

/* ---------- 13. Smaller screens ---------- */
@media(max-width:1024px){
 .r2-featured{border-radius:24px}
 .ll-shared div{grid-template-columns:120px minmax(0,1fr)}
}
@media(max-width:767px){
 :root{--sec-gap:64px}
 .home-hero__grid{padding:38px 22px 80px}
 .home-hero__story h1{font-size:clamp(40px,11.5vw,48px);max-width:none}
 .home-hero__story .lede{font-size:17px}
 .home-hero__foot{justify-content:flex-start;gap:12px 20px}
 .r2-featured{border-radius:18px;padding:18px 0 22px}
 .pboard{margin-top:28px;gap:14px}
 .pboard .pcard{padding:22px 20px 20px}
 .pboard .pcard .pcard__icon{width:60px;height:60px;border-radius:16px}
 .practice-icon{width:46px;height:46px}
 .pboard .pcard h3{font-size:28px}
 .sec-practice .sec-head h2::after{margin-top:12px}
 .rev{padding:24px 20px 20px}
 .service-faq summary{font-size:21px}
 .ll-shared div{grid-template-columns:1fr;padding:16px 18px}
}