:root{
  --ink:#131A1F; --ink-2:#1D2A33; --line-d:#2B3A45;
  --paper:#FFFFFF; --paper-2:#F1F3F6; --paper-3:#F1F3F6; --line:#E3E7EC;
  --muted:#6B7681; --muted-d:#9AA7B2;
  --accent:#1A5FD6; --accent-hi:#6E9EF5; --accent-soft:#E9F0FE;
  --warm:#B8763A;
  --sans:"Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
.shell{max-width:1160px;margin:0 auto;padding:0 32px}
.shell.narrow{max-width:740px}
section{padding:96px 0}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.025em}
h1{font-size:clamp(2.1rem,4.4vw,3.2rem);line-height:1.06}
h2{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.1;margin-bottom:18px}
h3{font-size:1.02rem;letter-spacing:-.01em}
p{margin:0 0 16px}
a{color:inherit}
.eyebrow{font:1.08rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.dark .eyebrow{color:var(--accent-hi)}
.lede{font-size:1.17rem;color:var(--muted);max-width:62ch;margin-bottom:36px}
.dark{background:var(--ink);color:#fff}
.dark .lede,.dark p{color:rgba(255,255,255,.72)}
.dark h2,.dark h3{color:#fff}
.tint{background:var(--paper-2)}
.soft{background:var(--paper-3)}
.btn{display:inline-flex;align-items:center;gap:9px;font-size:.95rem;font-weight:600;padding:14px 26px;
  border-radius:5px;text-decoration:none;background:var(--accent);color:#fff;transition:background .15s}
.btn:hover{background:#144CB4}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.line{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.line:hover{background:var(--paper-2)}
.more{display:inline-flex;align-items:center;gap:7px;margin-top:28px;font-weight:600;color:var(--accent);text-decoration:none}
.more:hover{gap:11px;transition:gap .15s}

/* nav */
.top{background:var(--ink);position:sticky;top:0;z-index:130}
.top .shell{display:flex;align-items:center;gap:30px;padding-top:16px;padding-bottom:16px;
  position:relative;z-index:130}
.mark{display:flex;align-items:center;text-decoration:none;flex:none}
.mark svg{height:51px;width:auto;display:block}
@media(max-width:640px){.mark svg{height:42px}}
@media(max-width:400px){.mark svg{height:36px}}
.nav{display:flex;align-items:center;gap:22px;margin-left:8px}
.nav>a,.drop>a{color:rgba(255,255,255,.84);text-decoration:none;font-size:.9rem;font-weight:500;display:inline-flex;align-items:center;gap:6px;padding:8px 0}
.nav>a:hover,.drop>a:hover,.drop>a.on,.nav>a.on{color:#fff}
.drop>a i{font-style:normal;font-size:.7rem;opacity:.7}
.drop{position:relative}
.menu{position:absolute;top:100%;left:-18px;min-width:540px;background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:14px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .14s,transform .14s,visibility .14s;box-shadow:0 20px 50px rgba(19,26,31,.16)}
.menu.narrow{min-width:290px}
.drop:hover .menu,.drop:focus-within .menu{opacity:1;visibility:visible;transform:none}
.menu ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px}
.menu.narrow ul{grid-template-columns:1fr}
.menu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:4px;color:var(--ink);text-decoration:none;font-size:.88rem;font-weight:500}
.menu a:hover{background:var(--accent-soft);color:var(--accent)}
.menu .ico{width:18px;height:18px;color:var(--accent);flex:none;opacity:.8}
.menu-foot{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.menu-foot a{color:var(--accent);font-weight:600}
.top .btn{margin-left:auto;padding:10px 18px;white-space:nowrap}

/* crumbs */
.crumbs{background:var(--paper-3);border-bottom:1px solid var(--line);font:11.5px/1 var(--mono);letter-spacing:.05em}
.crumbs .shell{display:flex;gap:10px;align-items:center;padding-top:15px;padding-bottom:15px;color:var(--muted);overflow-x:auto;white-space:nowrap}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs i{font-style:normal;opacity:.4}

/* hero — photo led, warm */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center top}
/* The subject stands dead centre and his head starts 36% down, so the scrim is
   weighted to the sky the copy sits on and clears before it reaches his face. */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,26,31,.70) 0%,rgba(19,26,31,.66) 30%,
    rgba(19,26,31,.16) 50%,rgba(19,26,31,.20) 74%,rgba(19,26,31,.70) 100%)}
.hero{padding:0}
.hero .shell{position:relative;padding-top:26px;padding-bottom:540px;text-align:center}
/* Sized so the headline and the sub each hold one line at desktop widths; the
   shell caps at 1160px, so the clamp ceiling matters more than the vw term. */
.hero h1{font-size:clamp(1.35rem,4.05vw,3.15rem);max-width:none;margin:0 auto 12px;
  line-height:1.12;text-transform:uppercase;letter-spacing:.005em}
.hero .sub{font-size:1.02rem;color:rgba(255,255,255,.90);max-width:none;margin:0 auto 18px}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero-rating{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 20px;
  font-size:.88rem;color:rgba(255,255,255,.85)}
.hero-rating b{color:#fff}
/* CMS-authored line break: only wide enough screens honour it */
.lb{display:none}
@media(min-width:900px){.lb{display:inline}}
.stars{color:#E8B93B;letter-spacing:.1em}
.hero .eyebrow{color:rgba(255,255,255,.82);margin-bottom:14px;letter-spacing:.16em}
/* promise + single CTA, pinned to the foot of the portrait */
/* bottom lifted from 9% when the referral button arrived: on a 1280x800 laptop
   the hero runs past the fold, and 9% put the buttons' lower edge at 795px,
   under the fixed draft ribbon and flush with the screen edge after launch. */
.hero-foot{position:absolute;left:0;right:0;bottom:calc(9% + 40px);display:flex;flex-direction:column;
  align-items:center;gap:18px;padding:0 24px}
/* Two audiences, one row. The client CTA stays the filled button; the referral
   button is the ghost variant on a dark glass so it reads over the photograph
   without competing with it. Both stretch to the same height. */
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:12px}
/* One line on desktop, so it matches the primary button's height rather than
   stretching both. It stacks on phones, below.

   Solid brand blue, like the client CTA beside it, rather than the glass panel
   it used to be. The compound selector is deliberate: .btn.ghost sets a
   transparent background at two classes of specificity, so a single .btn-refer
   rule would lose to it wherever it sat in the file. */
.btn-refer{justify-content:center;gap:10px;line-height:1.15}
.btn.ghost.btn-refer{background:var(--accent);border-color:transparent;color:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.btn.ghost.btn-refer:hover{background:#144CB4;border-color:transparent}
.btn-refer small{font-size:.66rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;opacity:.85;
  padding-left:10px;border-left:1px solid rgba(255,255,255,.45)}

.hero-promise{margin:18px auto 0;max-width:78ch;font-size:1.02rem;font-weight:500;
  line-height:1.55;letter-spacing:-.005em;color:rgba(255,255,255,.94);text-align:center}
.top .btn.refer{margin-left:auto;padding:9px 16px;font-size:.84rem;
  border-color:rgba(255,255,255,.30);color:rgba(255,255,255,.92);background:transparent}
.top .btn.refer:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.55)}
.top .btn.refer + .btn{margin-left:10px}
.p-hero{background:var(--paper-3);border-bottom:1px solid var(--line)}
.p-hero .ico{width:34px;height:34px;color:var(--accent);margin-bottom:18px}
.p-hero h1{margin-bottom:16px;max-width:20ch}
.p-hero .sub{font-size:1.1rem;color:var(--muted);max-width:56ch;margin-bottom:28px}
.p-hero .shell{padding-top:64px;padding-bottom:60px}
.p-split{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.p-split .p-hero-txt{min-width:0}
.p-shot{margin:0;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--paper-2);
  box-shadow:0 18px 44px rgba(19,26,31,.13)}
.p-shot img{width:100%;height:100%;object-fit:cover;display:block}
.p-hero.dark{background:var(--ink)}
.p-hero.dark .sub{color:rgba(255,255,255,.75)}

/* proof band — solid accent, white type */
.proofs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--accent);color:#fff}
.proof{padding:38px 30px;border-left:1px solid rgba(255,255,255,.20)}
.proof:first-child{border-left:0}
.proof strong{display:block;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1;letter-spacing:-.035em;margin-bottom:12px;color:#fff}
.proof span{display:block;font-size:.9rem;color:rgba(255,255,255,.88);line-height:1.55}
.proof em{display:block;font:10px/1.4 var(--mono);font-style:normal;letter-spacing:.04em;color:rgba(255,255,255,.62);margin-top:10px}

/* checklist */
/* Copy left, the eight signs right. Boxes are gone: eight bordered cards read
   as a form to fill in rather than a list to scan, and the check is doing the
   work the border was. */
.case-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:start}
.case-grid > *{min-width:0}
.case-copy .eyebrow{margin-bottom:14px}
.case-copy h2{max-width:16ch;margin-bottom:22px}
.case-copy p:not(.eyebrow){color:var(--muted);max-width:44ch}
.case-copy p:last-child{margin-bottom:0}
.home #case .case-copy .eyebrow,
.home #case .case-copy h2,
.home #case .case-copy p{text-align:left}
.check{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0}
.check li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  font-size:1.03rem;line-height:1.55;padding:17px 0;border-bottom:1px solid var(--line)}
.check li:first-child{padding-top:0}
.check li:last-child{border-bottom:0;padding-bottom:0}
.tick{width:26px;height:26px;margin-top:1px;color:var(--accent);flex:none}
@media(max-width:900px){
  .case-grid{grid-template-columns:1fr;gap:34px}
  .case-copy h2{max-width:none}
}

/* timeline — now light */
.tl{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:4px}
.tl li{position:relative;padding:0 0 30px 62px;counter-increment:s}
.tl li::before{content:counter(s);position:absolute;left:0;top:-1px;width:36px;height:36px;background:var(--accent-soft);
  color:var(--accent);border-radius:50%;display:grid;place-items:center;font:12px/1 var(--mono);font-weight:700}
.tl li::after{content:"";position:absolute;left:18px;top:40px;bottom:0;width:1px;background:var(--line)}
.tl li:last-child{padding-bottom:0}.tl li:last-child::after{display:none}
.t-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:5px}
.t-when{font:10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  background:var(--accent-soft);padding:5px 9px;border-radius:3px}
.tl p{margin:0;font-size:1.01rem;color:var(--muted);max-width:66ch}

/* practice cards — icon led */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.area{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 24px 28px;
  text-decoration:none;display:block;transition:border-color .15s,box-shadow .15s}
.area:hover{border-color:var(--accent);box-shadow:0 8px 26px rgba(19,26,31,.07)}
.area .ico{width:28px;height:28px;color:var(--accent);margin-bottom:16px}
.area h3{margin-bottom:8px}
.area p{margin:0;font-size:.96rem;color:var(--muted);line-height:1.55}

/* reviews — side scrolling */
.rev-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}
.rev-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 32px 22px;
  margin:0 -32px;scrollbar-width:thin}
.rev-rail::-webkit-scrollbar{height:6px}
.rev-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.rev-card{flex:0 0 340px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:26px 24px;display:flex;flex-direction:column}
.rev-card .stars{font-size:.85rem;margin-bottom:12px}
.rev-card p{font-size:1.02rem;line-height:1.6;flex:1}
.rev-card cite{font-style:normal;font-weight:650;font-size:.9rem;margin-top:8px}
/* Full review text, same box size. Heights are the home rail as it measured
   before the full text arrived (368px card on desktop, 446px on phones), so
   nothing on the page moves. 219px of text measures back to exactly 368. Longer reviews scroll inside
   the box. The fade at the foot says there is more; the bottom padding lets the
   last line scroll clear of it. */
.rev-body{height:219px;overflow-y:auto;overscroll-behavior:contain;padding:0 8px 26px 0;margin-bottom:6px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent)}
.rev-body::-webkit-scrollbar{width:6px}
.rev-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.rev-body p{margin:0 0 12px}
.rev-body p:last-of-type{margin-bottom:0}
.rev-body:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:640px){.rev-body{height:297px}}
.rev-card cite span{display:block;font-weight:400;color:var(--muted);font-size:.79rem;margin-top:2px}
.rev-note{font-size:.86rem;color:var(--muted);margin:14px 0 0}

/* blog */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post{background:#fff;border:1px solid var(--line);border-radius:8px;display:block;text-decoration:none;
  overflow:hidden;transition:border-color .15s,box-shadow .15s}
.post:hover{border-color:var(--accent);box-shadow:0 8px 26px rgba(19,26,31,.08)}
/* 4:3 matches what the generator produces (the higgsfield 'card' slot is
   4:3 at 900px), so the thumbnail fills its box with no crop at all. The
   old 16/10 box threw away 16.7% off the top and bottom of every image,
   which mattered little for flat-lay objects and matters a lot now that
   there are faces in these. It also gives the image a taller share of the
   card, which is what stops the card reading as mostly white space. */
.post-thumb{aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.post:hover .post-thumb img{transform:scale(1.035)}
.post-body{padding:20px 22px 24px}
.post .cat{font:10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.post h3{margin:11px 0 10px;font-size:1.04rem;line-height:1.35}
.post .meta{margin:0;font-size:.88rem;color:var(--muted)}

/* team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.portrait{aspect-ratio:1;background:var(--paper-2);border:1px solid var(--line);border-radius:8px;
  margin-bottom:16px;display:grid;place-items:center;overflow:hidden;max-width:300px}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.portrait span{font:10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.soft .portrait{background:#fff}
.member .role{font:10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:4px 0 10px}
.member .cred{font-size:.89rem;color:var(--muted);margin:0}

/* details */
details{border-bottom:1px solid var(--line);padding:20px 0}
.dark details{border-color:var(--line-d)}
details summary{cursor:pointer;font-weight:650;font-size:1.01rem;list-style:none;display:flex;justify-content:space-between;gap:20px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--accent);font-weight:400;font-size:1.3rem;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:14px 0 0;color:var(--muted);max-width:74ch;font-size:1.04rem}

/* referral — the one dark block */
.rl{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;
  border-top:1px solid var(--line-d);text-decoration:none;font-weight:600}
.rl:first-of-type{border-top:0}
.rl span{color:var(--accent-hi)}
section:not(.dark) .rl{border-color:var(--line)}
section:not(.dark) .rl span{color:var(--accent)}
/* Home referral block, on the brand blue. White on #1A5FD6 is 5.2:1, so every
   piece of text goes to solid white rather than a translucent tint. These must
   follow the section:not(.dark) rules above — same specificity. The button
   inverts to white, since the default blue button would disappear here. */
section.blue{background:var(--accent);color:#fff}
section.blue h2,section.blue p,section.blue .lede,section.blue .eyebrow{color:#fff}
section.blue .rl{color:#fff;border-color:rgba(255,255,255,.3)}
section.blue .rl span{color:#fff}
section.blue .rl:hover{text-decoration:underline;text-underline-offset:4px}
section.blue .btn{background:#fff;color:var(--accent)}
section.blue .btn:hover{background:var(--accent-soft)}
/* The six referral commitments. Two columns so the list stays shorter than the
   link column beside it; the tick is stroked with currentColor, so white text
   turns it white too. */
section.blue .ref-points{grid-template-columns:repeat(2,1fr);column-gap:32px;margin:26px 0 30px}
section.blue .ref-points li{font-size:.98rem;font-weight:500;padding:12px 0;gap:12px;
  color:#fff;border-bottom:1px solid rgba(255,255,255,.22)}
section.blue .ref-points li:first-child{padding-top:12px}
section.blue .ref-points li:last-child{border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:12px}
section.blue .ref-points .tick{color:#fff;flex:none}
@media(max-width:640px){section.blue .ref-points{grid-template-columns:1fr}}
.refer-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}

/* glossary */
.terms{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.term{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px}
.term h3{margin-bottom:8px}
.term p{margin:0;font-size:.99rem;color:var(--muted);line-height:1.6}

/* ── footer ─────────────────────────────────────────────────────────────────
   Four columns on desktop, collapsing to two then one. The brand column holds
   the NAP block that local search reads on every page; the rest is the site
   map, which is also what keeps the glossary and the standalone pages from
   being orphans now that they are not in the nav. */
.foot{background:var(--ink);color:var(--muted-d);padding:64px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;
  padding-bottom:44px;border-bottom:1px solid var(--line-d)}
.foot-brand .mark{display:inline-flex;margin-bottom:20px}
.foot-brand .mark svg{height:44px;width:auto}
.foot-brand address{font-style:normal;display:flex;flex-direction:column;gap:3px;
  font-size:.92rem;line-height:1.55;color:var(--muted-d)}
.foot-brand .fb-name{color:#fff;font-weight:600}
.foot-tel{display:inline-block;margin-top:14px;font-size:1.12rem;font-weight:600;
  color:#fff;text-decoration:none}
.foot-tel:hover{color:var(--accent-hi)}
.foot-mail{display:block;margin-top:4px;font-size:.92rem;color:var(--muted-d);text-decoration:none}
.foot-mail:hover{color:#fff}
.foot-rating{margin:16px 0 0;font-size:.86rem;color:var(--muted-d)}
.foot-rating .stars{color:#E8B93B;letter-spacing:.06em;margin-right:6px}

.foot-col h2{font:11px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin:0 0 16px}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot-col a{font-size:.92rem;color:var(--muted-d);text-decoration:none}
/* The old rule hovered these to var(--ink), which is this footer's own
   background — the link disappeared instead of highlighting. */
.foot-col a:hover{color:#fff}
.foot-more{display:inline-block;margin-top:16px;font-size:.88rem;font-weight:600;
  color:var(--accent-hi);text-decoration:none}
.foot-more:hover{text-decoration:underline}
.foot-col .btn{margin-top:18px}

.foot-legal{padding-top:24px}
.foot-legal p{margin:0 0 8px;font-size:.8rem;line-height:1.7;color:var(--muted-d);opacity:.85;
  max-width:100ch}
.foot .draft{opacity:.5;margin-top:10px;font:11.5px/1.8 var(--mono);letter-spacing:.05em}

@media(max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:560px){
  .foot{padding-top:48px}
  .foot-grid{grid-template-columns:1fr;gap:32px}
}
.draft-flag{position:fixed;left:0;right:0;bottom:0;z-index:200;background:#7A1F14;color:#fff;text-align:center;
  font:11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:9px 12px}
body{padding-bottom:34px}

@media(max-width:1000px){
  .proofs{grid-template-columns:repeat(2,1fr)}
  .proof:nth-child(3){border-left:0}
  .proof{border-top:1px solid rgba(255,255,255,.20)}
  .proof:nth-child(-n+2){border-top:0}
  .p-split{grid-template-columns:1fr;gap:32px}
  .p-split .p-shot{order:-1;aspect-ratio:16/9}
  .areas,.posts,.terms{grid-template-columns:repeat(2,1fr)}
  .check{grid-template-columns:1fr}
  .refer-grid{grid-template-columns:1fr;gap:36px}
  .nav{display:none}
  /* the referral CTA pushes the phone number off screen once the links
     collapse; it still lives under For Attorneys */
  .top .btn.refer{display:none}
}
@media(max-width:640px){
  .shell{padding:0 20px}section{padding:64px 0}
  .top .shell{gap:10px}
  .top .btn{padding:10px 13px;font-size:.88rem}
  .burger{margin-left:2px}
  .proofs{grid-template-columns:1fr}
  .proof{border-left:0;border-top:1px solid rgba(255,255,255,.20)}
  .proof:first-child{border-top:0}
  .areas,.posts,.terms{grid-template-columns:1fr}
  .team{grid-template-columns:1fr;gap:36px}
  /* The mobile hero is a chain: the H1's line count sets the copy block height,
     which sets how much padding is left for the photograph, and the container
     height is what drives background-size:cover — so shrinking the box is what
     shrinks Jacob, not any background-size value. At 375px the cover scale is
     driven entirely by height (1050/1205), so a 25% smaller subject means a 25%
     shorter box: 788px. Still covers horizontally at 1568px against 375. */
  .hero-bg::after{background:linear-gradient(180deg,rgba(19,26,31,.88) 0%,
    rgba(19,26,31,.82) 26%,rgba(19,26,31,.70) 36%,rgba(19,26,31,.22) 44%,
    rgba(19,26,31,.16) 62%,rgba(19,26,31,.70) 100%)}
  .hero .shell{padding-top:40px;padding-bottom:519px}
  .hero h1{font-size:1.65rem;line-height:1.08}
  /* The photograph renders at exactly the container height, so there is no
     vertical slack for background-position to use. Offsetting it pushes Jacob
     down and lets the top strip fall back to the ink ground — invisible,
     because the scrim already sits at .88 opacity across that band. The bottom
     of the frame is his suit, which is what gets cropped in exchange. */
  .hero-bg{background-position:center 80px}
  /* Anchored to the viewport, not to the hero.

     This used to be a percentage (17%, chosen to clear the old draft ribbon).
     The hero runs about 80px past the fold, and by a variable amount, so a
     percentage bottom and the chat launcher's fixed pixel bottom drifted apart
     as the viewport got shorter — which is why the two kept colliding. This
     calc pins the stack's bottom edge 104px above the viewport bottom at every
     size, so the gap to the launcher is a constant 32px. 100% is the hero's
     height and 76px is the header above it; svh rather than vh so a mobile
     browser's toolbar does not push the buttons under its own chrome. The
     max() is a floor for the case where the hero is shorter than the screen. */
  .hero-foot{bottom:max(24px, calc(100% - 100svh + 180px));gap:15px}
  /* Both buttons are the same width and height on phones, which is what a
     stacked pair should look like. The grid does the width: one column, both
     children filling it. align-items:center would size each to its own text.

     The height needs the clamp as much as the min-height. At 360px — a very
     common Android width — "Get a free case review" wrapped to two lines at
     1.425rem and the primary grew to 97px while the referral button stayed at
     60, which is the mismatch this pair is meant to avoid. 6.08vw holds
     1.425rem at 375px and steps down below that, so neither button ever wraps
     and both sit on the 60px floor. The horizontal padding is small because
     the grid sets the width now; it no longer has to pad the text out. */
  .hero-cta{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;
    width:100%;max-width:420px;margin-inline:auto}
  .hero-foot .btn{padding:11px 20px;font-size:clamp(1.15rem,6.08vw,1.425rem);min-height:60px}
  /* Must follow the rule above — same specificity. */
  .hero-foot .btn-refer{padding:7px 20px;font-size:1rem;flex-direction:column;gap:2px}
  .hero-foot .btn-refer small{padding-left:0;border-left:0}
  .hero-promise{font-size:.97rem;line-height:1.5}
  .hero .eyebrow{font-size:.72rem;letter-spacing:.055em}
  .hero-promise{font-size:1.05rem}
  .rev-rail{padding-inline:20px;margin-inline:-20px}
  .rev-card{flex-basis:290px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* all-reviews page */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:14px}
.rev-card.wide{flex:none}
.rev-resp{margin:14px 0 0;padding:14px 16px;background:var(--accent-soft);border-radius:6px;
  font-size:.88rem;color:var(--ink);line-height:1.55}
.rev-resp b{display:block;font:10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:7px}
.rev-trunc{display:inline-block;margin-left:6px;font:9.5px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:3px 6px;border-radius:3px}
@media(max-width:1000px){.rev-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.rev-grid{grid-template-columns:1fr}}

/* ── contact form ─────────────────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.form{display:grid;gap:16px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:7px;min-width:0}
.field label{font:10.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{font:16px/1.5 var(--sans);color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:6px;padding:13px 14px;width:100%;transition:border-color .14s,box-shadow .14s}
.field textarea{resize:vertical;min-height:118px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.form .btn{justify-content:center;padding:15px 26px;border:0;cursor:pointer;font:600 .95rem var(--sans)}
.f-fine{font-size:.8rem;color:var(--muted);line-height:1.6;margin:0}
.f-msg{margin:0;font-size:.9rem;padding:13px 15px;border-radius:6px;background:var(--accent-soft);
  color:var(--accent);display:none}
.f-msg.on{display:block}
.f-aside{background:var(--paper-3);border:1px solid var(--line);border-radius:10px;padding:30px 28px}
.f-aside h3{margin-bottom:14px;font-size:1.05rem}
.f-aside .rl{padding:14px 0}
.f-call{display:block;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--accent);
  text-decoration:none;margin:2px 0 6px}

/* ── chat widget ──────────────────────────────────────────────────────── */

/* article body — the one place on the site with long-form prose */
.prose{font-size:1.06rem;line-height:1.75}
.prose h2{font-size:1.45rem;margin:38px 0 12px}
.prose h3{font-size:1.12rem;margin:28px 0 10px}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose blockquote{margin:24px 0;padding:2px 0 2px 20px;border-left:3px solid var(--accent);
  color:var(--muted);font-style:italic}
.art-meta{font-size:.9rem;color:var(--muted);margin:0 0 26px;padding-bottom:20px;
  border-bottom:1px solid var(--line)}
.art-meta a{color:var(--accent);text-decoration:none}
.art-meta a:hover{text-decoration:underline}
/* a commissioned article with no body yet: shown, but not a link */
.post.is-planned{opacity:.62;cursor:default}
.post.is-planned .post-thumb img{filter:grayscale(1)}
.note{font-size:.9rem;color:var(--muted);margin-top:20px}

/* ── practice-area landing page ─────────────────────────────────────────────
   One shape reused across every area. Hero states the question and answers it;
   the body is a main column plus a sticky rail that keeps the facts and the
   form beside the reader wherever they stop. */
/* Full-bleed, sized like the home hero so the photograph is the first thing
   that lands rather than a band behind a headline. The scrim is weighted to the
   left, where the type sits, and thins out across the right so the subject of
   the photograph stays legible instead of being flattened to grey. */
.a-hero{position:relative;background:var(--ink) center/cover no-repeat;color:#fff}
.a-hero-in{display:flex;align-items:center;min-height:clamp(440px,56vh,600px);
  padding:96px 0 88px;
  background:linear-gradient(100deg,rgba(19,26,31,.92) 0%,rgba(19,26,31,.86) 38%,
    rgba(19,26,31,.60) 66%,rgba(19,26,31,.42) 100%)}
.a-hero .shell{width:100%}
.a-hero .eyebrow{color:var(--accent-hi);margin-bottom:16px}
.a-hero h1{font-size:clamp(1.9rem,3.9vw,3.05rem);line-height:1.14;max-width:26ch;margin-bottom:24px;text-wrap:balance}
/* the answer passage — the part an AI summary quotes, so it is set apart */
.a-answer{max-width:62ch;border-left:3px solid var(--accent-hi);padding-left:20px;margin-bottom:30px}
.a-answer p{margin:0;font-size:1.14rem;line-height:1.62;color:rgba(255,255,255,.94)}
.a-hero .cta{justify-content:flex-start}

/* Pages without a sidebar — team, reviews, blog, articles, glossary — share the
   hero but not the two-column body, so the hero's own spacing has to hold. */
.a-hero + section{padding-top:72px}
.a-body{padding:72px 0 88px}
.a-grid{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:56px;align-items:start}
.a-main{min-width:0}
.a-sec{padding:0;margin-bottom:44px}
.a-sec:last-child{margin-bottom:0}
.a-sec h2{font-size:1.5rem;margin-bottom:14px}
.a-sec p{margin-bottom:16px;color:var(--ink-2)}
.a-sec details{border-top:1px solid var(--line)}
.a-sec details:last-of-type{border-bottom:1px solid var(--line)}

.a-rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.rail-card{background:var(--paper-3);border:1px solid var(--line);border-radius:10px;padding:22px}
.rail-card h3{font-size:1.02rem;margin-bottom:14px}
.rail-sub{margin:-8px 0 16px;font-size:.9rem;color:var(--muted)}
.facts ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.facts li{display:block}
.facts strong{display:block;font-size:1.5rem;line-height:1.1;letter-spacing:-.03em;color:var(--accent)}
.facts span{display:block;font-size:.9rem;line-height:1.5;color:var(--ink-2);margin-top:5px}
.facts em{display:block;font:10.5px/1.4 var(--mono);letter-spacing:.04em;color:var(--muted);
  font-style:normal;margin-top:6px}
.form-card{background:#fff}
.form.side .field{margin-bottom:12px}
.form.side .btn{width:100%;justify-content:center}
.rail-card.call{text-align:center}
.rail-card.call .f-call{font-size:1.3rem}

@media(max-width:1040px){
  .a-grid{grid-template-columns:1fr;gap:44px}
  .a-rail{position:static;display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .rail-card.call{grid-column:1/-1}
}
@media(max-width:720px){
  .a-hero-in{min-height:0;padding:56px 0 52px;
    background:linear-gradient(180deg,rgba(19,26,31,.88) 0%,rgba(19,26,31,.82) 100%)}
  .a-answer{padding-left:15px}
  .a-answer p{font-size:1.05rem}
  .a-rail{grid-template-columns:1fr}
}
.cw-open{position:fixed;right:22px;bottom:56px;z-index:150;display:flex;align-items:center;gap:10px;
  background:var(--accent);color:#fff;border:0;border-radius:30px;padding:14px 22px 14px 18px;cursor:pointer;
  font:600 .93rem var(--sans);box-shadow:0 0 0 2px #fff,0 12px 34px rgba(19,26,31,.26);transition:transform .16s,background .16s}
/* The white ring is for the home referral section: the launcher is the same
   brand blue, and without an edge it disappears against it. */
.cw-open:hover{background:#244C8C;transform:translateY(-2px)}
.cw-open svg{width:20px;height:20px}
.cw{position:fixed;right:22px;bottom:56px;z-index:151;width:376px;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:none;
  flex-direction:column;box-shadow:0 26px 64px rgba(19,26,31,.30)}
.cw.on{display:flex}
.cw-head{background:var(--accent);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px}
.cw-head b{font-size:.95rem;display:block}
.cw-head span{font-size:.76rem;color:rgba(255,255,255,.82)}
.cw-dot{width:8px;height:8px;border-radius:50%;background:#5FD08A;flex:none}
.cw-x{margin-left:auto;background:none;border:0;color:#fff;font-size:1.35rem;line-height:1;cursor:pointer;opacity:.85;padding:0 2px}
.cw-x:hover{opacity:1}
.cw-log{padding:18px;display:flex;flex-direction:column;gap:12px;height:330px;overflow-y:auto;background:var(--paper-3)}
.cw-msg{max-width:84%;font-size:.9rem;line-height:1.55;padding:11px 14px;border-radius:12px}
.cw-msg.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start}
.cw-msg.me{background:var(--accent);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.cw-opts{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;max-width:100%}
.cw-opt{background:#fff;border:1px solid var(--accent);color:var(--accent);border-radius:16px;
  padding:8px 14px;font:500 .84rem var(--sans);cursor:pointer;transition:background .14s}
.cw-opt:hover{background:var(--accent-soft)}
.cw-foot{border-top:1px solid var(--line);padding:11px 16px;background:#fff}
.cw-foot p{margin:0;font-size:.7rem;line-height:1.5;color:var(--muted)}
@media(max-width:640px){
  .form-grid{grid-template-columns:1fr;gap:32px}
  .f-row{grid-template-columns:1fr}
  .cw,.cw-open{right:12px;bottom:48px}
  /* The launcher and the hero CTA have collided repeatedly, each time after an
     unrelated change moved one of them. On mobile the CTA is full width, so the
     durable fix is for the launcher to stop being a wide pill: a 56px circle
     cannot span the same horizontal band. The label is hidden visually; the
     button keeps its aria-label. This has to sit after the base .cw-open rule
     above — an earlier copy at the same specificity was silently overridden. */
  /* Sits above the hero CTA rather than beside it. At 375px the CTA spans 320
     of 375, so a bottom-right launcher has nowhere to go horizontally — at
     bottom:64px it was overlapping the button and clipping the word "review".
     Above is the only clearance that exists. */
  .cw-open{padding:0;width:56px;height:56px;border-radius:50%;
    justify-content:center;font-size:0;bottom:124px;right:16px}
  .cw-open svg{width:24px;height:24px;flex:none}
  /* Home only. This used to be 54px, tucked into the empty right-hand space
     beside a referral button that was 165px wide and centered. Both hero
     buttons are full width now, so that space is gone and there is nowhere in
     the button band for the launcher to sit. It goes below the stack instead,
     which works because .hero-foot is anchored to the viewport above and
     leaves a constant 32px above this. Move either one and check the other. */
  .home .cw-open{bottom:16px}
  .cw-log{height:290px}
}

/* ── team pages ───────────────────────────────────────────────────────── */
.team{grid-template-columns:repeat(2,300px);justify-content:center;gap:56px}
.team .member{text-align:center}
.team .portrait{margin-left:auto;margin-right:auto}
.team .member .role{margin-top:10px}
.person{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:start;
  padding:44px 0;border-top:1px solid var(--line)}
.person:first-of-type{border-top:0;padding-top:0}
.person .portrait{margin:0;max-width:none}
.p-name{margin:0 0 4px;font-size:1.6rem;letter-spacing:-.025em}
.p-role{font:10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin:0 0 18px}
.person p{font-size:1.07rem;color:var(--muted);max-width:62ch}
.p-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.p-facts li{font:10.5px/1 var(--mono);letter-spacing:.06em;color:var(--muted);
  border:1px solid var(--line);border-radius:3px;padding:6px 9px;background:#fff}
.p-more{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-weight:600;
  font-size:.94rem;color:var(--accent);text-decoration:none}
.p-more:hover{gap:11px;transition:gap .15s}

/* individual profile */
.cv{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
.cv-block{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px 26px}
.cv-block.full{grid-column:1/-1}
.cv-block h3{font:10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px}
.cv-block ul{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.cv-block li{font-size:.98rem;line-height:1.55;color:var(--muted);
  padding-left:16px;position:relative}
.cv-block li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--accent);opacity:.5}
.prof-hero .portrait{max-width:none;box-shadow:0 18px 44px rgba(19,26,31,.13);border:0}
@media(max-width:900px){
  .person{grid-template-columns:1fr;gap:24px}
  .person .portrait{max-width:280px}
  .cv{grid-template-columns:1fr}
}

/* ── home page: centred section heads ─────────────────────────────────────
   Scoped to .home so the other 31 pages, which share this stylesheet, keep
   their left-aligned heads. Body paragraphs stay left: the fees and deadlines
   copy runs three to four lines, and centred multi-line text is markedly
   harder to read. #refer is excluded — its heading sits in the left column of
   a two-column block, where centring one side reads as a mistake. */
.home section > .shell > .eyebrow,
.home section > .shell > h2,
.home section > .shell > .lede,
.home section > .shell > .more{text-align:center}
.home section > .shell > .lede{margin-left:auto;margin-right:auto}
.home section > .shell > .more{display:flex;justify-content:center}
.home #refer .eyebrow,
.home #refer h2,
.home #refer .lede{text-align:left;margin-left:0;margin-right:0}

/* Fees and deadlines are the exceptions to the left-aligned-body rule above.
   Both are two short paragraphs, and both are reassurance beats rather than
   anything a reader studies. The measure is tightened so no line runs the full
   740px — centred text has a ragged left edge, and past roughly 60ch the eye
   starts losing its place on the return sweep. */
.home #fees p,
.home #deadlines p{text-align:center;max-width:60ch;margin-left:auto;margin-right:auto}

/* the reviews and blog heads pair a title with a button; stack and centre them */
.home .rev-head{flex-direction:column;align-items:center;text-align:center;gap:18px}
.home .rev-head > div{width:100%}

/* ── mobile menu ──────────────────────────────────────────────────────────
   Below 1000px the desktop nav hides and, until now, nothing replaced it —
   the header carried only a logo and a phone number, with no route to any of
   the 32 pages. */
.burger{display:none;width:44px;height:44px;flex:none;margin-left:10px;padding:0;
  background:none;border:0;cursor:pointer;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;border-radius:6px}
.burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;
  transition:transform .18s,opacity .14s}
.burger:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}
[aria-expanded="true"].burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
[aria-expanded="true"].burger span:nth-child(2){opacity:0}
[aria-expanded="true"].burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mnav{display:none}
body.nav-open{overflow:hidden}
.mnav-panel{padding:22px 20px 40px}
.mgroup{border-bottom:1px solid var(--line-d);padding:0}
.mgroup summary{cursor:pointer;list-style:none;padding:16px 2px;font-size:1.02rem;
  font-weight:600;color:#fff;display:flex;justify-content:space-between;align-items:center}
.mgroup summary::-webkit-details-marker{display:none}
.mgroup summary::after{content:"+";color:var(--accent-hi);font-weight:400;font-size:1.4rem;line-height:1}
.mgroup[open] summary::after{content:"–"}
.mgroup ul{list-style:none;margin:0;padding:0 0 14px}
.mgroup li a{display:block;padding:10px 2px 10px 14px;color:rgba(255,255,255,.78);
  text-decoration:none;font-size:.95rem;border-left:1px solid var(--line-d)}
.mgroup li a:hover,.mgroup li a:focus-visible{color:#fff;border-left-color:var(--accent-hi)}
.mlink{display:block;padding:16px 2px;color:#fff;text-decoration:none;font-size:1.02rem;
  font-weight:600;border-bottom:1px solid var(--line-d)}
.mnav-cta{display:grid;gap:10px;margin-top:26px}
.mnav-cta .btn{justify-content:center;padding:15px 20px;margin-left:0;width:100%}
.mnav-cta .btn.ghost{border-color:rgba(255,255,255,.34)}

@media(max-width:1000px){
  .burger{display:flex}
  .mnav{display:block;position:fixed;left:0;right:0;top:0;bottom:0;z-index:120;
    background:var(--ink);overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-top:96px}
  body.nav-open .cw-open,body.nav-open .cw{display:none}
  .mnav[hidden]{display:none}
}

/* ── about: copy left, the two attorneys right ────────────────────────────
   This section opts out of the home page's centred heads — a centred heading
   over a left column of a two-column block reads as a mistake, the same reason
   #refer is excluded. */
.about-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.about-grid > *{min-width:0}
.about-grid .team{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.about-grid .portrait{max-width:none}
.about-copy{min-width:0}
.about-copy .eyebrow{margin-bottom:14px;color:var(--accent)}
.about-copy h2{max-width:24ch;margin-bottom:22px}
.about-copy p:not(.eyebrow){color:var(--muted);font-size:1.08rem;max-width:52ch}
.about-copy p:last-child{margin-bottom:0}
.home #team .about-copy .eyebrow,
.home #team .about-copy h2,
.home #team .about-copy p{text-align:left}
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:38px}
  .about-copy h2{max-width:none}
}

/* the two home-page attorney cards carry more weight now there are only two,
   so their type steps up from the four-across sizing they inherited */
.team .member h3{font-size:1.32rem;letter-spacing:-.02em}
.team .member .role{font-size:11.5px;letter-spacing:.14em;margin:8px 0 12px}
.team .member .cred{font-size:1.01rem;line-height:1.55}
@media(max-width:640px){
  .team .member h3{font-size:1.22rem}
  .team .member .cred{font-size:.98rem}
}

/* `.about-grid .team` outranks the plain `.team` mobile rule, so the two cards
   stayed side by side at 156px each - too narrow for the larger type. */
@media(max-width:640px){
  .about-grid .team{grid-template-columns:1fr;gap:34px;justify-items:center}
  .about-grid .team .member{max-width:300px}
  .about-grid .portrait{max-width:260px}
}
/* the sticky header was covering the top of any section reached by anchor */
section[id]{scroll-margin-top:96px}

/* heading that exists to keep the outline continuous above a card grid */
.grid-head{margin-bottom:26px}

/* For Attorneys landing page. The commitments sit inside a main-column
   section on white, so they take the default checked list with room above.
   Article excerpts are clamped so three cards stay one height. */
.a-sec .a-points{margin-top:18px}
.refer-posts .meta{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Form honeypot: present for bots, invisible and unreachable for people. */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.f-msg.ok{color:#1E7A45}

/* Chat capture form. The widget ends by asking for a name and phone so a chat
   can reach intakes@ by the same route as the page forms; before this it only
   offered the phone number and a link. */
.cw-form{display:flex;flex-direction:column;gap:9px;margin:10px 0 0;padding:13px;
  border:1px solid var(--line);border-radius:10px;background:#fff}
.cw-formhead{margin:0;font-weight:650;font-size:.9rem;color:var(--ink)}
.cw-form label{display:flex;flex-direction:column;gap:4px;font-size:.74rem;color:var(--muted)}
.cw-form input{font:inherit;font-size:.92rem;padding:9px 10px;border:1px solid var(--line);
  border-radius:6px;color:var(--ink);background:#fff}
.cw-form input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cw-send{font:inherit;font-weight:600;font-size:.88rem;padding:10px 14px;border:0;border-radius:6px;
  background:var(--accent);color:#fff;cursor:pointer}
.cw-send:hover{background:#144CB4}
.cw-send:disabled{opacity:.55;cursor:default}
.cw-form .cw-msg{margin:0;font-size:.78rem;color:#B3261E;display:none}
.cw-form .cw-msg.on{display:block}
.cw-fine{margin:0;font-size:.7rem;line-height:1.45;color:var(--muted)}