:root{--navy:#034f63;--navy-d:#02394a;--gold:#eba525;--rust:#de5428;--cream:#f6f4ef;
--ink:#0d2430;--body:#41505a;--line:#dfdbd3;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--body);font:16px/1.65 Inter,system-ui,-apple-system,sans-serif}
h1,h2,h3{font-family:"Source Serif 4",Georgia,serif;color:var(--ink);margin:0 0 14px;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(30px,4.6vw,46px)}h2{font-size:clamp(24px,3vw,32px);margin-top:36px}h3{font-size:20px;margin-top:24px}
p{margin:0 0 14px}a{color:var(--navy)}img{max-width:100%;display:block}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:20px}
header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:20px;padding-block:12px;flex-wrap:wrap}
.bar img{height:46px;width:auto}
nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
nav a{color:var(--ink);font-size:14.5px;font-weight:600;text-decoration:none}
nav a:hover{color:var(--rust)}
.btn{display:inline-block;background:var(--rust);color:#fff;font-weight:600;padding:11px 18px;border-radius:6px;text-decoration:none}
.btn:hover{background:#c4461e}
.btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.6);color:#fff}
.hero{background:var(--navy);color:#e8eef1;padding-block:clamp(44px,6vw,72px)}
.hero h1{color:#fff}.hero p{color:#cfdde3;font-size:18px;max-width:60ch}
.hero .btn+.btn{margin-left:10px}
main{padding-block:clamp(36px,5vw,60px)}
main .wrap{max-width:860px}
.lede{font-size:18px}
.note{background:#fff8e8;border-left:4px solid var(--gold);padding:12px 16px;margin:20px 0;font-size:14.5px;color:#6b5a2e}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:24px 0}
.card{border:1px solid var(--line);border-radius:8px;padding:18px 20px;background:#fff;text-decoration:none;display:block}
.card:hover{box-shadow:0 8px 20px rgba(3,79,99,.09)}
.card h3{margin:0 0 6px;font-size:18px}.card p{margin:0;font-size:14.5px;color:#5c6a74}
ul.clean{padding-left:18px}ul.clean li{margin-bottom:6px}
.cta{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:38px;margin-top:40px}
.cta .wrap{max-width:860px}
.crumbs{font-size:13.5px;color:#6a7a82;margin-bottom:14px}
.crumbs a{color:#6a7a82}
footer{background:var(--navy-d);color:#bcd0d8;padding-block:40px 26px;font-size:14.5px;margin-top:0}
footer img{height:48px;margin-bottom:12px}
footer a{color:#bcd0d8;text-decoration:none}
footer a:hover{color:var(--gold)}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px}
.fgrid h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;font-family:Inter,sans-serif}
.fgrid a{display:block;margin-bottom:6px}
.legal{border-top:1px solid rgba(255,255,255,.14);margin-top:30px;padding-top:16px;font-size:12.5px;color:#93adb8}
.callbar{display:none}
@media(max-width:860px){.fgrid{grid-template-columns:1fr}nav{display:none}
body{padding-bottom:62px}
.callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--rust);align-items:center;justify-content:center;padding:14px}
.callbar a{color:#fff;font-weight:600;text-decoration:none}}

/* --- WordPress menu + admin-bar specifics ------------------------------- */
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--navy);padding:10px 14px;z-index:100}
.skip:focus{left:8px;top:8px}
.site-header nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.site-header nav{margin-left:auto}
.site-header nav a{color:var(--ink);font-size:14.5px;font-weight:600;text-decoration:none}
.site-header nav a:hover{color:var(--rust)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:6px}
.site-footer a{text-decoration:none}
.hero .sub{color:#cfdde3;font-size:18px;max-width:62ch}
.hero.home .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.hero-video{aspect-ratio:16/9;background:#02303d;border-radius:10px;overflow:hidden}
.hero-video iframe,.hero-video lite-youtube{width:100%;height:100%;border:0}
.eyebrow{font:600 12px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.page-body{max-width:860px;padding-block:clamp(30px,4vw,52px)}
.page-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.page-body th,.page-body td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
.page-body th{background:var(--cream);font-weight:600}
.page-body caption{text-align:left;font-weight:600;padding-bottom:6px}
.page-body ol,.page-body ul{padding-left:20px}
.page-body li{margin-bottom:7px}
.reviewed{color:#6a7a82;border-top:1px solid var(--line);padding-top:12px;margin-top:26px}
.btn.ghost-dark{background:transparent;border:1.5px solid var(--navy);color:var(--navy)}
@media(max-width:860px){.hero.home .wrap{grid-template-columns:1fr}}

/* SHALHOUB LAW — design tokens. Hierarchy and spacing modelled on the JacksonWhite
   reference; colour is Shalhoub's own brand (navy 034F63, gold EBA525, rust DE5428).
   Semantic tokens only. WCAG 2.2 AA. */
:root{
  --f:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  --fd:"Fraunces",Georgia,"Times New Roman",serif;
  --fs-xs:12px;--fs-sm:14px;--fs-md:16px;--fs-lg:18px;--fs-xl:20px;--fs-2xl:26px;--fs-3xl:32px;--fs-4xl:52px;
  --lh-base:27px;--fw-med:500;--fw-semi:600;--fw-bold:700;
  --s1:2px;--s2:8px;--s3:10px;--s4:12px;--s5:14px;--s6:16px;--s7:18px;--s8:20px;
  --s9:28px;--s10:40px;--s11:64px;--s12:92px;
  --text-primary:#1f2a30;--text-muted:#5c6a72;--text-link:#034f63;
  --surface-base:#ffffff;--surface-muted:#f3f6f7;--surface-deep:#034f63;--surface-deepest:#012631;
  --surface-strong:#eba525;--action:#de5428;--action-hover:#b8431e;
  --border:#e1e7e9;--border-strong:#cbd5d8;
  --r-xs:5px;--r-card:22px;--r-pill:999px;
  --shadow-1:0 2px 4px rgba(0,0,0,.10);--shadow-2:0 18px 40px rgba(1,38,49,.16);
  --dur:200ms;--page:1240px;
}
*{box-sizing:border-box}
body{background:var(--surface-base)!important;color:var(--text-primary);
 font:400 var(--fs-lg)/var(--lh-base) var(--f)!important;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--text-primary);line-height:1.14;text-wrap:balance;margin:0 0 var(--s6);letter-spacing:-.01em}
h1{font-family:var(--fd)!important;font-weight:400;font-size:clamp(36px,2.1rem + 2.1vw,var(--fs-4xl));line-height:1.06}
h2{font-family:var(--fd)!important;font-weight:400;font-size:clamp(27px,1.7rem + 1vw,var(--fs-3xl))}
h3,h4{font-family:var(--f)!important;font-weight:var(--fw-bold)}
h3{font-size:var(--fs-xl)}h4{font-size:var(--fs-lg)}
p{margin:0 0 var(--s7)}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--action-hover)}
:focus-visible{outline:3px solid var(--surface-strong);outline-offset:2px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
 background:var(--action)!important;color:#fff!important;border:2px solid var(--action)!important;
 font:var(--fw-bold) var(--fs-sm)/1 var(--f)!important;letter-spacing:.06em;text-transform:uppercase;
 padding:var(--s5) var(--s9)!important;border-radius:var(--r-pill)!important;text-decoration:none!important;
 transition:background var(--dur),border-color var(--dur),transform var(--dur)}
.btn:hover{background:var(--action-hover)!important;border-color:var(--action-hover)!important}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--surface-strong)!important;border-color:var(--surface-strong)!important;color:#1f2a30!important}
.btn.ghost:hover{background:#d8961f!important;border-color:#d8961f!important;color:#1f2a30!important}
.btn.ghost-dark{background:transparent!important;color:var(--surface-deep)!important;border-color:var(--surface-deep)!important}
.btn.ghost-dark:hover{background:var(--surface-muted)!important}
.skip{position:absolute!important;left:-9999px}.skip:focus{left:var(--s2);top:var(--s2);background:#fff;padding:var(--s4);z-index:99}
/* floating pill header over the hero */
.site-header{position:absolute!important;top:0;left:0;right:0;z-index:30;background:transparent!important;border:0!important}
.site-header .bar{background:#fff;border-radius:var(--r-pill);box-shadow:var(--shadow-2);
 max-width:var(--page);margin:var(--s7) auto 0;padding:var(--s3) var(--s3) var(--s3) var(--s8)!important;
 display:flex;align-items:center;gap:var(--s9);flex-wrap:nowrap}
.site-header .bar img{height:40px;width:auto}
.site-header nav{flex:1 1 auto;display:flex;justify-content:center}
.site-header nav ul{display:flex;gap:var(--s9);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.site-header nav a{color:var(--text-primary)!important;font:var(--fw-med) var(--fs-md)/1 var(--f);
 text-decoration:none;padding-block:var(--s2);border-bottom:2px solid transparent}
.site-header nav a:hover{border-bottom-color:var(--surface-strong)}
.site-header .btn{margin-left:auto}
/* hero */
.hero{position:relative;overflow:hidden;color:#fff;
 background:var(--surface-deepest) url(/assets/img/shalhoub-hero-still.jpg) center center/cover no-repeat!important;
 padding-block:calc(var(--s12) + 56px) var(--s12)!important}
.hero:before{content:"";position:absolute;inset:0;z-index:1;
 background:linear-gradient(100deg,rgba(1,38,49,.92) 0%,rgba(1,38,49,.8) 45%,rgba(1,38,49,.52) 78%,rgba(1,38,49,.34) 100%)}
.hero .wrap{position:relative;z-index:2;max-width:var(--page)}
.hero h1{color:#fff!important;max-width:17ch;margin-bottom:var(--s8)}
.hero h1 em{font-style:italic;color:var(--surface-strong)}
.hero .wrap:after{content:"";display:block;height:1px;background:rgba(255,255,255,.3);margin:var(--s9) 0 var(--s8);max-width:760px}
.hero .sub,.hero p{color:rgba(255,255,255,.9)!important;font-size:var(--fs-lg);max-width:62ch}
.eyebrow{display:inline-block;font:var(--fw-bold) var(--fs-xs)/1 var(--f)!important;letter-spacing:.16em;
 text-transform:uppercase;color:#1f2a30!important;background:var(--surface-strong);
 padding:var(--s3) var(--s6);border-radius:var(--r-pill);margin-bottom:var(--s8)}
.hero-cta{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s9);align-items:center}
#shal-bgvid{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;opacity:0;transition:opacity .25s linear}
#shal-bgvid.on{opacity:1}
/* The file is now cropped to its 2.353:1 picture at encode time, so the overscan
   that used to hide the letterbox is gone and a plain cover fill is correct. */
#shal-bgvid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 object-position:50% 50%}
.playlink{display:inline-flex;align-items:center;gap:var(--s5);background:#fff;color:var(--text-primary);
 border-radius:var(--r-pill);padding:var(--s3) var(--s8) var(--s3) var(--s3);text-decoration:none;
 font:var(--fw-semi) var(--fs-md)/1 var(--f);box-shadow:var(--shadow-2);margin-left:auto}
.playlink i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
 background:var(--surface-deepest);color:#fff;font-style:normal;font-size:var(--fs-sm);padding-left:3px}
.playlink:hover i{background:var(--action)}
/* the content card lifts over the hero, as in the reference */
body.home main{padding-top:0!important;position:relative;z-index:3}
body.home main>.wrap.page-body{padding-block:0!important;max-width:none!important}
body.home .band{max-width:calc(var(--page) + 0px);margin:calc(var(--s11) * -1) auto 0;
 background:#fff!important;border:1px solid var(--border)!important;border-radius:var(--r-card)!important;
 box-shadow:var(--shadow-2);position:relative;z-index:3}
body.home .band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s9);padding:var(--s10) var(--s10)}
.band b{display:block;font:400 var(--fs-3xl)/1.1 var(--fd);color:var(--surface-deep)}
.band span{font:var(--fw-med) var(--fs-sm)/1.5 var(--f);color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase}
/* sections */
main{padding-block:var(--s11)}
main .wrap{max-width:820px}
.sec{padding-block:var(--s12)}
.sec .wrap{max-width:var(--page);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.sec.alt{background:var(--surface-muted);border-block:1px solid var(--border)}
.sec.dark{background:var(--surface-deep);color:rgba(255,255,255,.9)}
.sec.dark h2{color:#fff}
.lede{font-size:var(--fs-xl);color:var(--text-muted)}
.crumbs{font-size:var(--fs-sm);color:var(--text-muted)}.crumbs a{color:var(--text-muted)}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s8);margin-top:var(--s10)}
.cards div.c{background:#fff!important;border:1px solid var(--border)!important;border-radius:var(--r-xs)!important;
 padding:var(--s9)!important;box-shadow:var(--shadow-1);transition:box-shadow var(--dur),transform var(--dur)}
.cards div.c:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.cards div.c.why{border-top:4px solid var(--surface-strong)!important}
.cards h3{font-size:var(--fs-xl);margin:0 0 var(--s4)}
.cards h3 a{color:var(--text-primary);text-decoration:none}.cards h3 a:hover{color:var(--action-hover)}
.cards p{font-size:var(--fs-md);color:var(--text-muted);margin:0;line-height:1.55}
.cards .more{display:inline-block;margin-top:var(--s6);font:var(--fw-bold) var(--fs-sm)/1 var(--f);
 letter-spacing:.08em;text-transform:uppercase;color:var(--action);text-decoration:none}
/* results */
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8);margin-top:var(--s10)}
.res div{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.2)!important;
 border-radius:var(--r-xs)!important;padding:var(--s9)!important}
.res .n{font:400 clamp(34px,2rem + 1.8vw,var(--fs-4xl))/1 var(--fd);color:var(--surface-strong)}
.res .l{font:var(--fw-bold) var(--fs-xs)/1 var(--f);letter-spacing:.14em;text-transform:uppercase;
 color:rgba(255,255,255,.72);margin:var(--s4) 0 var(--s6)}
.res p{font-size:var(--fs-md);color:rgba(255,255,255,.9);margin:0}
.disc{font-size:var(--fs-sm);color:rgba(255,255,255,.66);margin-top:var(--s9)}
/* split + media */
.split,.wrap.split{display:grid!important;grid-template-columns:.85fr 1.15fr;gap:var(--s11);align-items:center}
.ph img,.split img{width:100%;max-height:520px;object-fit:cover;object-position:center top;border-radius:var(--r-card);box-shadow:var(--shadow-1)}
/* reviews */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8);margin-top:var(--s10)}
.quotes figure{background:#fff!important;border:1px solid var(--border)!important;border-radius:var(--r-xs)!important;
 padding:var(--s9)!important;margin:0;box-shadow:var(--shadow-1)}
.quotes blockquote{font:var(--fw-med) var(--fs-lg)/1.5 var(--f);color:var(--text-primary);margin:var(--s4) 0 var(--s6)}
.quotes figcaption{font-size:var(--fs-sm);color:var(--text-muted)}
.stars{color:var(--surface-strong);letter-spacing:3px;font-size:var(--fs-md)}
/* service areas — the firm has ONE office; these are areas served, not locations */
.cities{display:flex;flex-wrap:wrap;gap:var(--s3)}
.cities a{border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:var(--s4) var(--s8);
 font:var(--fw-semi) var(--fs-md)/1 var(--f);color:var(--text-primary);text-decoration:none}
.cities a:hover{border-color:var(--surface-deep);color:var(--surface-deep);background:var(--surface-muted)}
/* closing + footer */
.cta{background:var(--surface-deep)!important;border:0!important;color:#fff;padding-block:var(--s12)}
.cta .wrap{max-width:var(--page)}.cta h2{color:#fff}.cta p{color:rgba(255,255,255,.9)}
.site-footer{background:var(--surface-deepest)!important;color:rgba(255,255,255,.72);padding-block:var(--s11) var(--s10)}
.site-footer .wrap{max-width:var(--page)}
.site-footer h4{color:#fff;font:var(--fw-bold) var(--fs-sm)/1 var(--f);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s6)}
.site-footer a{color:rgba(255,255,255,.72);text-decoration:none}
.site-footer a:hover{color:var(--surface-strong);text-decoration:underline}
.site-footer ul{list-style:none;margin:0;padding:0}.site-footer li{margin-bottom:var(--s3)}
.legal{font-size:var(--fs-xs);color:rgba(255,255,255,.55);line-height:1.7}
table{width:100%;border-collapse:collapse;margin:var(--s9) 0;font-size:var(--fs-md)}
th,td{border-bottom:1px solid var(--border);padding:var(--s5) var(--s6);text-align:left;vertical-align:top}
th{font:var(--fw-bold) var(--fs-sm)/1.3 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);background:var(--surface-muted)}
.note{background:#fdf6e6;border-left:4px solid var(--surface-strong);padding:var(--s6) var(--s8);border-radius:var(--r-xs);font-size:var(--fs-md);color:#6b5a2e;margin:var(--s8) 0}
@media(max-width:980px){
 .site-header{position:static!important}
 .site-header .bar{border-radius:var(--r-card);margin-inline:var(--s6);flex-wrap:wrap;gap:var(--s6);justify-content:center}
 .site-header nav{display:none}
 .hero{padding-block:calc(var(--s11) * 1.5)!important}
 body.home .band{margin-top:0;border-radius:0;border-left:0;border-right:0;box-shadow:none}
 body.home .band .wrap,.res,.quotes,.split,.wrap.split,.cards{grid-template-columns:1fr!important}
 .playlink{margin-left:0}
 /* the 32s cut is centre-weighted in every shot, so the portrait crop stays centred */
 #shal-bgvid video{object-position:50% 50%}
 .sec{padding-block:var(--s11)}
}
/* --- JacksonWhite-style section patterns, Shalhoub brand ----------------- */
.jw-card{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-2);
 padding:var(--s11) var(--s10);margin-top:calc(var(--s11) * -1);position:relative;z-index:3}
.jw-card .inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s11);align-items:center;
 max-width:var(--page);margin-inline:auto}
.jw-card img{border-radius:var(--r-card);width:100%;max-height:560px;object-fit:cover}
.jw-h{font-family:var(--fd)!important;font-weight:400;font-size:clamp(28px,1.7rem + 1.6vw,44px);
 line-height:1.1;color:var(--text-primary);margin:0 0 var(--s7)}
.jw-h em{font-style:italic;color:var(--surface-strong)}
.rulehead{display:flex;align-items:baseline;gap:var(--s8);border-bottom:1px solid var(--border-strong);
 padding-bottom:var(--s6);margin-bottom:var(--s10)}
.rulehead h2{margin:0}
.pa-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s8)}
.pa-cards a{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;min-height:300px;
 background:var(--surface-deep);text-decoration:none;box-shadow:var(--shadow-1);
 transition:transform var(--dur),box-shadow var(--dur)}
.pa-cards a:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.pa-cards img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.pa-cards span.t{position:absolute;left:var(--s8);bottom:var(--s8);right:64px;z-index:2;color:#fff;
 font:400 var(--fs-2xl)/1.15 var(--fd)}
.pa-cards a:after{content:"\2192";position:absolute;right:var(--s8);bottom:var(--s8);z-index:2;
 width:40px;height:40px;border-radius:50%;background:var(--surface-deep);color:#fff;display:grid;
 place-items:center;font-size:var(--fs-md)}
.pa-cards a:before{content:"";position:absolute;inset:0;z-index:1;
 background:linear-gradient(to top,rgba(1,38,49,.85) 0%,rgba(1,38,49,.35) 45%,rgba(1,38,49,.1) 100%)}
.office{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-1);
 display:grid;grid-template-columns:1fr 1fr;gap:var(--s10);padding:var(--s9);align-items:center;max-width:960px;margin-inline:auto}
.office img{border-radius:var(--r-xs);width:100%;height:100%;max-height:340px;object-fit:cover}
.office h3{font:400 var(--fs-3xl)/1.1 var(--fd);margin:0 0 var(--s6)}
.office address{font-style:normal;color:var(--text-muted);line-height:1.7}
.closing{background:var(--surface-deepest);border-radius:var(--r-card);padding:var(--s12) var(--s10);
 text-align:center;color:#fff;max-width:var(--page);margin-inline:auto;position:relative;overflow:hidden}
.closing:before{content:"";position:absolute;inset:0;
 background:radial-gradient(700px 360px at 20% 10%,rgba(235,165,37,.13),transparent 60%),
 radial-gradient(700px 360px at 85% 85%,rgba(222,84,40,.14),transparent 60%)}
.closing>*{position:relative;z-index:1}
.closing h2{color:#fff;max-width:20ch;margin-inline:auto}
.closing p{color:rgba(255,255,255,.86);max-width:60ch;margin-inline:auto}
@media(max-width:980px){.jw-card{margin-top:0;border-radius:0;box-shadow:none;padding:var(--s11) var(--s6)}
.jw-card .inner,.office{grid-template-columns:1fr}.pa-cards a{min-height:240px}}
/* --- contact: map + office, and the stacking location cards -------------- */
.mapwrap{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-1);border:1px solid var(--border);margin-top:var(--s10)}
.mapwrap iframe{display:block;width:100%;height:440px;border:0}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:var(--s10);align-items:start;margin-top:var(--s9)}
.contact-grid h3{font:400 var(--fs-2xl)/1.15 var(--fd);margin:0 0 var(--s6)}
.contact-grid p,.contact-grid address{font-size:var(--fs-md);color:var(--text-muted);font-style:normal;line-height:1.8;margin:0}
.stack{margin-top:var(--s10)}
.stack .loc{position:sticky;top:96px;background:#fff;border:1px solid var(--border);border-radius:var(--r-card);
 box-shadow:var(--shadow-2);display:grid;grid-template-columns:1fr 1fr;gap:var(--s10);align-items:center;
 padding:var(--s9);margin-bottom:var(--s9)}
.stack .loc:nth-child(2){top:116px}.stack .loc:nth-child(3){top:136px}.stack .loc:nth-child(4){top:156px}
.stack .loc:nth-child(5){top:176px}.stack .loc:nth-child(6){top:196px}
.stack .loc:nth-child(7){top:216px}.stack .loc:nth-child(8){top:236px}
.stack .loc .img{border-radius:var(--r-xs);min-height:260px;background:linear-gradient(135deg,var(--surface-deep),var(--surface-deepest));
 display:grid;place-items:center;color:rgba(255,255,255,.9);font:400 var(--fs-2xl)/1 var(--fd);overflow:hidden;position:relative}
.stack .loc .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stack .loc h3{font:400 clamp(28px,1.7rem + 1.2vw,40px)/1.05 var(--fd);margin:0 0 var(--s6)}
.stack .loc p{color:var(--text-muted);font-size:var(--fs-md);margin:0 0 var(--s7)}
.stack .loc .go{display:inline-flex;align-items:center;gap:var(--s5);text-decoration:none;
 font:var(--fw-bold) var(--fs-sm)/1 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary)}
.stack .loc .go i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--surface-deep);color:#fff;font-style:normal}
.stack .loc .go:hover i{background:var(--action)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}
/* one column on a phone, but the cards keep folding into each other as on desktop.
   The mobile header is static, so the offsets start at the top of the viewport and
   step by 10px instead of 20px -- eight cards still clear a 375x812 screen. */
.stack .loc{grid-template-columns:1fr;top:12px}
.stack .loc:nth-child(2){top:22px}.stack .loc:nth-child(3){top:32px}
.stack .loc:nth-child(4){top:42px}.stack .loc:nth-child(5){top:52px}
.stack .loc:nth-child(6){top:62px}.stack .loc:nth-child(7){top:72px}
.stack .loc:nth-child(8){top:82px}
.mapwrap iframe{height:300px}}
/* a short screen cannot fit a whole card, so the card would scroll away before it
   sticks and the fold would just stutter -- give those the plain stack back */
@media(max-width:900px) and (max-height:620px){.stack .loc{position:static}}
/* --- interior hero: image band with the headline on an offset card (JW pattern) --- */
.ihero{position:relative;min-height:clamp(420px,46vw,620px);display:flex;flex-direction:column;
 justify-content:space-between;background:var(--surface-deepest);overflow:hidden;margin-bottom:0}
.ihero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.ihero:before{content:"";position:absolute;inset:0;z-index:1;
 background:linear-gradient(180deg,rgba(1,38,49,.62) 0%,rgba(1,38,49,.18) 38%,rgba(1,38,49,.14) 100%)}
.ihero .crumbs{position:relative;z-index:2;max-width:var(--page);margin:0 auto;width:100%;
 padding:calc(var(--s12) + var(--s2)) clamp(16px,4vw,40px) var(--s9);color:rgba(255,255,255,.88);font-size:var(--fs-sm)}
.ihero .crumbs a{color:rgba(255,255,255,.88);text-decoration:underline}
.ihero .crumbs span{opacity:.6;padding-inline:var(--s3)}
/* bottom-aligned inside the hero: the card reads as a notch cut out of the image */
.ihead{position:relative;z-index:3;max-width:var(--page);width:100%;margin:0 auto;
 padding-inline:clamp(16px,4vw,40px)}
.ihead .box{background:var(--surface-muted);border-top-right-radius:var(--r-card);
 padding:var(--s10) var(--s10) var(--s10) 0;max-width:min(840px,94%)}
.ihead h1{margin:0}
.ihead .kicker{display:block;font:var(--fw-bold) var(--fs-xs)/1 var(--f);letter-spacing:.16em;
 text-transform:uppercase;color:var(--action);margin-bottom:var(--s6)}
body:not(.home) main{padding-top:var(--s11)}
/* three-column intro under an interior hero */
.ilede{display:grid;grid-template-columns:1.25fr .85fr .9fr;gap:var(--s11);align-items:start;
 border-top:1px solid var(--border-strong);padding-top:var(--s9);margin-top:var(--s9)}
.ilede h3{font:400 var(--fs-2xl)/1.15 var(--fd);margin:0 0 var(--s6)}
.ilede p,.ilede address{font-size:var(--fs-md);color:var(--text-muted);font-style:normal;line-height:1.75}
.ilede .btn{margin-top:var(--s5)}
.dirlink{display:inline-flex;align-items:center;gap:var(--s5);text-decoration:none;margin-top:var(--s5);
 font:var(--fw-bold) var(--fs-xs)/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--text-primary)}
.dirlink i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--surface-deep);
 color:#fff;font-style:normal;font-size:var(--fs-sm)}
.dirlink:hover i{background:var(--action)}
/* accordion — practice areas on a location page, and every FAQ block */
.acc{border-top:1px solid var(--border)}
.acc details{border-bottom:1px solid var(--border)}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
 gap:var(--s8);padding:var(--s7) 0;font:400 var(--fs-xl)/1.3 var(--fd);color:var(--text-primary)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--surface-deep)}
.acc summary:after{content:"+";flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
 background:var(--surface-muted);font:var(--fw-med) var(--fs-xl)/1 var(--f);color:var(--text-primary)}
.acc details[open] summary:after{content:"\2212"}
.acc .body{padding:0 0 var(--s8);max-width:70ch}
.acc .body p{font-size:var(--fs-md);color:var(--text-muted);margin:0 0 var(--s6)}
.acc .body a{font:var(--fw-bold) var(--fs-sm)/1 var(--f);letter-spacing:.08em;text-transform:uppercase;
 color:var(--action);text-decoration:none}
/* panels: white card and dark band, image one side, copy the other */
.panel{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-1);border:1px solid var(--border);
 padding:var(--s11) var(--s10);max-width:var(--page);margin-inline:auto}
.panel .inner{display:grid;grid-template-columns:.95fr 1.05fr;gap:var(--s11);align-items:center}
.panel.flip .inner>*:first-child{order:2}
.panel img{width:100%;border-radius:var(--r-card);object-fit:cover;max-height:560px;display:block}
.panel h2{margin-top:0}
.panel p{color:var(--text-muted)}
.darkpanel{background:var(--surface-deepest);color:rgba(255,255,255,.86);padding-block:var(--s12);
 position:relative;overflow:hidden}
.darkpanel:before{content:"";position:absolute;inset:0;
 background:radial-gradient(760px 420px at 12% 0%,rgba(3,79,99,.55),transparent 62%),
 radial-gradient(700px 400px at 92% 100%,rgba(235,165,37,.10),transparent 60%)}
.darkpanel>.wrap{position:relative;z-index:1}
.darkpanel .inner{display:grid;grid-template-columns:.95fr 1.05fr;gap:var(--s11);align-items:center;
 max-width:var(--page);margin-inline:auto}
.darkpanel h2{color:#fff}.darkpanel p{color:rgba(255,255,255,.82)}
.darkpanel img{width:100%;border-radius:var(--r-card);object-fit:cover;max-height:560px;display:block}
.darkpanel a{color:var(--surface-strong)}
/* related services strip */
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s8);margin-top:var(--s10)}
.rel a{display:block;background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s9);
 text-decoration:none;box-shadow:var(--shadow-1);transition:transform var(--dur),box-shadow var(--dur)}
.rel a:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.rel b{display:block;font:400 var(--fs-xl)/1.2 var(--fd);color:var(--text-primary);margin-bottom:var(--s4)}
.rel span{font-size:var(--fs-md);color:var(--text-muted);line-height:1.55;display:block}
.rel em{display:inline-block;margin-top:var(--s6);font:var(--fw-bold) var(--fs-xs)/1 var(--f);letter-spacing:.1em;
 text-transform:uppercase;color:var(--action);font-style:normal}
@media(max-width:980px){
 .ihero{min-height:300px}.ihero .crumbs{padding-top:calc(var(--s11) + var(--s9))}
  .ihead .box{padding:var(--s9) var(--s7) var(--s9) 0;max-width:100%;border-top-right-radius:var(--r-xs)}
 .ilede,.panel .inner,.darkpanel .inner{grid-template-columns:1fr;gap:var(--s9)}
 .panel{padding:var(--s10) var(--s7);border-radius:var(--r-xs)}
 .panel.flip .inner>*:first-child{order:0}
 .acc summary{font-size:var(--fs-lg)}
}
/* The theme prints its own hero and breadcrumb for every page. Interior pages that
   bring a .ihero supply both themselves, so the theme pair is hidden rather than
   duplicated. Removed from page.php once the theme is editable again. */
body:has(.ihero) main>.hero,
body:has(.ihero) main>.wrap.page-body>nav.crumbs{display:none!important}
body:has(.ihero) main{padding-top:0!important}
body:has(.ihero) main>.wrap.page-body{max-width:none!important;padding:0!important}
body:has(.ihero) main>.wrap.page-body>article>p:empty{display:none}
/* wpautop leaves empty paragraphs around block markup; they add stray vertical space */
.sec p:empty,.panel p:empty,.ihead p:empty,.ilede p:empty,main>p:empty{display:none}
/* every image ships inside .ph so wpautop cannot orphan a </p> after it */
.ph{display:contents}
.ihero>.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.panel .ph>img,.darkpanel .ph>img{width:100%;border-radius:var(--r-card);object-fit:cover;max-height:560px;display:block}
.stack .loc .img .ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* footer.php prints a closing CTA on every page; pages that supply their own .closing
   suppress it rather than stacking two consecutive calls to action */
body:has(.closing) section.cta{display:none!important}
/* --- Knowledge Base: filterable article cards ---------------------------- */
.kbfilter{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s10) 0 var(--s9)}
.kbfilter button{border:1px solid var(--border-strong);background:#fff;border-radius:var(--r-pill);
 padding:var(--s4) var(--s8);font:var(--fw-semi) var(--fs-md)/1 var(--f);color:var(--text-primary);cursor:pointer;
 transition:background var(--dur),border-color var(--dur),color var(--dur)}
.kbfilter button:hover{border-color:var(--surface-deep);background:var(--surface-muted)}
.kbfilter button[aria-pressed="true"]{background:var(--surface-deep);border-color:var(--surface-deep);color:#fff}
.kbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s8)}
.kbgrid a.kb{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);
 border-radius:var(--r-card);overflow:hidden;text-decoration:none;box-shadow:var(--shadow-1);
 transition:transform var(--dur),box-shadow var(--dur)}
.kbgrid a.kb:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.kbgrid a.kb{border-top:4px solid var(--surface-strong);padding-bottom:var(--s2);min-height:230px}
.kbgrid .tag{align-self:flex-start;margin:var(--s8) var(--s8) 0;font:var(--fw-bold) var(--fs-xs)/1 var(--f);
 letter-spacing:.12em;text-transform:uppercase;color:var(--surface-deep);background:var(--surface-muted);
 border-radius:var(--r-pill);padding:var(--s3) var(--s5)}
.kbgrid a.kb b{display:block;padding:var(--s6) var(--s8) 0;font:400 var(--fs-2xl)/1.22 var(--fd);color:var(--text-primary)}
.kbgrid a.kb:hover b{color:var(--surface-deep)}
.kbgrid a.kb em{display:block;padding:var(--s6) var(--s8) var(--s8);margin-top:auto;font-style:normal;
 font:var(--fw-bold) var(--fs-xs)/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--action)}
.kbgrid a.kb[hidden]{display:none}
/* wpautop drops an empty paragraph after the hero image; left alone it pads the band */
.ihero>p,.ihero>.ph+p{display:none!important}
/* .ph img inherits the old 520px cap, border radius and shadow meant for inline
   figures; the hero band needs the image to fill it edge to edge instead */
.ihero>.ph>img{max-height:none!important;border-radius:0!important;box-shadow:none!important}
.kbgrid a.kb{border-top:4px solid var(--surface-strong)}
@media(max-width:980px){.ihero .crumbs{padding-top:calc(var(--s12) + var(--s7))}}
/* --- video: click-to-play facade, used on the firm page ------------------- */
.vidwrap{max-width:980px;margin-inline:auto}
.vid{position:relative;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-2);
 background:var(--surface-deepest);aspect-ratio:16/9;display:grid;place-items:center}
.vid>.ph>img{position:absolute;inset:0;width:100%;height:100%;max-height:none!important;
 object-fit:cover;object-position:center 32%;border-radius:0!important;box-shadow:none!important}
.vid:before{content:"";position:absolute;inset:0;z-index:1;
 background:linear-gradient(180deg,rgba(1,38,49,.42),rgba(1,38,49,.28))}
.vid .playlink{position:relative;z-index:2;border:0;cursor:pointer;margin:0;
 font:var(--fw-semi) var(--fs-lg)/1 var(--f)}
.vid .playlink i{font-size:var(--fs-sm);padding-left:3px}
.vid .playlink span{font-family:var(--fd);font-style:italic;font-weight:400;font-size:var(--fs-xl)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.vid.playing:before,.vid.playing .playlink,.vid.playing>.ph{display:none}
.vidcap{margin:var(--s7) 0 0;text-align:center;font-size:var(--fs-md);color:var(--text-muted)}
@media(max-width:980px){.vid{border-radius:var(--r-xs)}.vid .playlink span{font-size:var(--fs-lg)}}
/* --- contact page: info cards, form, social row -------------------------- */
.ccards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s8);margin-top:var(--s10)}
.ccard{background:#fff;border:1px solid var(--border);border-top:4px solid var(--surface-strong);
 border-radius:var(--r-card);padding:var(--s9);box-shadow:var(--shadow-1)}
.ccard .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
 background:var(--surface-muted);color:var(--surface-deep);font-size:var(--fs-xl);margin-bottom:var(--s6)}
.ccard h3{font:400 var(--fs-xl)/1.2 var(--fd);margin:0 0 var(--s4)}
.ccard p,.ccard address{margin:0 0 var(--s4);font-size:var(--fs-md);font-style:normal;line-height:1.7}
.ccard .sm{font-size:var(--fs-sm);color:var(--text-muted);margin:0}
.formgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s11);align-items:start}
.formgrid h2{margin-top:0}
.shform{margin-top:var(--s9)}
.shform .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7)}
.shform p{margin:0 0 var(--s7)}
.shform label{display:block;font:var(--fw-semi) var(--fs-sm)/1 var(--f);letter-spacing:.04em;
 color:var(--text-primary);margin-bottom:var(--s3)}
.shform input[type=text],.shform input[type=tel],.shform input[type=email],
.shform select,.shform textarea{width:100%;padding:var(--s5) var(--s6);border:1px solid var(--border-strong);
 border-radius:var(--r-xs);background:#fff;font:400 var(--fs-md)/1.4 var(--f);color:var(--text-primary)}
.shform textarea{resize:vertical;min-height:130px}
.shform input:focus,.shform select:focus,.shform textarea:focus{outline:none;border-color:var(--surface-deep);
 box-shadow:0 0 0 3px rgba(3,79,99,.14)}
.shform .consent label{display:flex;gap:var(--s5);align-items:flex-start;font:400 var(--fs-sm)/1.6 var(--f);
 color:var(--text-muted);letter-spacing:0}
.shform .consent input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--surface-deep)}
.shform button{width:100%}
.formnote{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.7;margin-top:var(--s7)}
ul.social{display:flex;gap:var(--s5);list-style:none;margin:var(--s7) 0 0;padding:0}
ul.social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
 background:rgba(255,255,255,.1);color:#fff!important;text-decoration:none!important;
 transition:background var(--dur),transform var(--dur)}
ul.social a:hover{background:var(--surface-strong);color:#1f2a30!important;transform:translateY(-2px)}
ul.social.dark a{background:var(--surface-deep);color:#fff!important}
ul.social.dark a:hover{background:var(--action);color:#fff!important}
@media(max-width:900px){.formgrid{grid-template-columns:1fr;gap:var(--s10)}.shform .row{grid-template-columns:1fr}}
/* --- closing CTA: West Palm Beach behind it, scaled up to the reference ---- */
.closing{background:var(--surface-deepest) url(/assets/img/west-palm-beach-skyline.jpg) center 58%/cover no-repeat;
 padding:calc(var(--s12) + var(--s10)) var(--s10)}
.closing:before{background:
 linear-gradient(180deg,rgba(1,38,49,.86) 0%,rgba(1,38,49,.78) 45%,rgba(1,38,49,.88) 100%),
 radial-gradient(760px 420px at 18% 8%,rgba(235,165,37,.18),transparent 62%),
 radial-gradient(760px 420px at 85% 92%,rgba(222,84,40,.18),transparent 62%)}
.closing h2{font-size:clamp(34px,2rem + 3.2vw,68px);line-height:1.04;max-width:16ch;
 margin:0 auto var(--s8);letter-spacing:-.015em}
.closing h2 em{font-style:italic;color:var(--surface-strong)}
.closing p{font-size:clamp(17px,1rem + .4vw,var(--fs-xl));line-height:1.6;max-width:56ch}
.closing .eyebrow{margin-bottom:var(--s9)}
.closing .btn{font-size:var(--fs-sm)!important;padding:var(--s7) var(--s11)!important}
@media(max-width:980px){.closing{padding:var(--s12) var(--s7);background-position:center}}
/* related-claim cards: the scene photograph leads, no portrait alongside */
.rel a{padding:0;overflow:hidden;display:flex;flex-direction:column}
.rel a>.ph>img{width:100%;height:210px;object-fit:cover;object-position:center 45%;display:block;
 border-radius:0!important;max-height:none!important;box-shadow:none!important}
.rel a .body{display:block;padding:var(--s9)}
.rel b{display:block;font:400 var(--fs-2xl)/1.18 var(--fd);color:var(--text-primary);margin-bottom:var(--s5)}
.rel a:hover b{color:var(--surface-deep)}
.darkpanel .rel a{background:#fff;border-color:transparent}
.darkpanel .bandlede{color:rgba(255,255,255,.82);max-width:68ch;font-size:var(--fs-lg);margin:0}
.darkpanel .rulehead{border-bottom-color:rgba(255,255,255,.26)}
.darkpanel .rel{margin-top:var(--s10)}
@media(max-width:900px){.rel a>.ph>img{height:190px}}
/* --- wide desktop: the hero should own the screen, not sit in a letterbox ---- */
.hero{display:flex;align-items:center;min-height:clamp(840px, 127vh, 1350px);
 padding-block:calc(var(--s12) * 1.5 + 108px) calc(var(--s12) * 1.5)!important}
@media(max-width:980px){.hero{min-height:clamp(560px, 86vh, 820px);
 padding-block:calc(var(--s11) * 1.7) calc(var(--s11) * 1.25)!important}}
.hero .wrap{width:100%}
.hero h1{font-size:clamp(38px, 2.1rem + 2.8vw, 76px);max-width:19ch}
.hero .sub,.hero p{font-size:clamp(17px, 1rem + .35vw, 21px)}
.ihero{min-height:clamp(420px, 52vh, 720px)}
/* above 1600px the 1240px container starts to look stranded, so the whole grid grows */
@media(min-width:1600px){
 :root{--page:1460px}
 .hero h1{max-width:21ch}
 .ihead .box{max-width:min(980px,94%)}
}
@media(min-width:2000px){:root{--page:1640px}}
/* short laptops should not get a hero taller than the screen */
@media(max-height:760px) and (min-width:1025px){.hero{min-height:min(930px, 96vh)}}
/* wpautop leaves an empty paragraph wherever block markup follows the style block;
   each one renders as an 18px white band, which is the gap above every interior hero */
p:empty{display:none!important}
body:has(.ihero) main,
body:has(.ihero) main>.wrap.page-body,
body:has(.ihero) main>.wrap.page-body>article{padding-top:0!important;margin-top:0!important}
/* the headline card needs real breathing room under the title, and room on the right
   so long headings do not run into the rounded corner */
.ihead .box{padding:var(--s11) var(--s11) var(--s11) 0}
.ihead h1{margin:0;max-width:22ch}
.ihead .kicker{margin-bottom:var(--s7)}
@media(max-width:980px){.ihead .box{padding:var(--s9) var(--s8) var(--s9) 0}}
/* ===== SCALE PASS =========================================================
   The reference runs much larger than a standard content site: display headings
   in the 60-110px range, section images 420-680px tall, and section padding that
   gives each band the whole screen. Everything below raises the scale to match
   while keeping the mobile sizes where they were. */
h1{font-size:clamp(38px, 2.2rem + 3vw, 88px);line-height:1.02;letter-spacing:-.02em}
h2{font-size:clamp(28px, 1.7rem + 2vw, 60px);line-height:1.06;letter-spacing:-.015em}
h3{font-size:clamp(20px, 1.1rem + .6vw, 26px)}
.lede{font-size:clamp(19px, 1.05rem + .7vw, 27px);line-height:1.5;max-width:60ch}
.ihead h1{font-size:clamp(34px, 2rem + 2.6vw, 78px)}
.jw-h{font-size:clamp(30px, 1.8rem + 2.2vw, 62px)}
.rulehead{padding-bottom:var(--s8);margin-bottom:var(--s11)}
.sec{padding-block:clamp(64px, 6vw, 140px)}
/* images carry the page, so they get real height */
.pa-cards{gap:var(--s9)}
.pa-cards a{min-height:clamp(300px, 26vw, 440px)}
.pa-cards span.t{font-size:clamp(22px, 1.2rem + .9vw, 34px);left:var(--s9);bottom:var(--s9);right:84px}
.pa-cards a:after{width:52px;height:52px;right:var(--s9);bottom:var(--s9);font-size:var(--fs-xl)}
.rel a>.ph>img{height:clamp(200px, 19vw, 320px)}
.rel b{font-size:clamp(21px, 1.1rem + .7vw, 30px)}
.panel{padding:clamp(48px, 5vw, 110px) clamp(28px, 3.4vw, 80px)}
.panel .inner,.darkpanel .inner{gap:clamp(40px, 5vw, 110px)}
.panel img,.darkpanel img,.panel .ph>img,.darkpanel .ph>img{max-height:clamp(420px, 44vw, 700px)!important}
.darkpanel{padding-block:clamp(64px, 6vw, 140px)}
.acc summary{font-size:clamp(19px, 1.05rem + .55vw, 27px);padding-block:var(--s8)}
.acc summary:after{width:40px;height:40px}
.kbgrid{gap:var(--s9)}
.kbgrid a.kb b{font-size:clamp(21px, 1.1rem + .7vw, 29px)}
.kbgrid a.kb{min-height:260px}
.ccard h3{font-size:clamp(21px, 1.1rem + .6vw, 28px)}
.ilede h3,.contact-grid h3{font-size:clamp(21px, 1.1rem + .7vw, 30px)}
.stack .loc{padding:clamp(20px, 2vw, 40px)}
.stack .loc .img{min-height:clamp(260px, 24vw, 400px)}
.stack .loc h3{font-size:clamp(28px, 1.7rem + 1.6vw, 48px)}
.office{max-width:1100px;padding:var(--s10)}
.office img{max-height:clamp(300px, 26vw, 430px)}
.office h3{font-size:clamp(28px, 1.7rem + 1.4vw, 44px)}
.quotes blockquote{font-size:clamp(18px, 1rem + .5vw, 24px)}
.res .n{font-size:clamp(38px, 2.2rem + 2.4vw, 72px)}
.band b{font-size:clamp(30px, 1.8rem + 1.4vw, 46px)}
.vidwrap{max-width:1180px}
@media(max-width:980px){
 .sec{padding-block:64px}
 .pa-cards a{min-height:240px}
 .panel,.darkpanel{padding-block:56px}
 .rulehead{margin-bottom:var(--s9)}
}
/* --- home: the office band, scaled to carry the section ------------------- */
.officeband{background:var(--surface-muted);border-block:1px solid var(--border)}
.officehero{position:relative;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-2);
 min-height:clamp(420px, 42vw, 620px);display:flex;align-items:center;background:var(--surface-deepest)}
.officehero>.ph>img{position:absolute!important;inset:0;width:100%;height:100%;max-height:none!important;
 object-fit:cover;object-position:center 58%;border-radius:0!important;box-shadow:none!important}
.officehero:before{content:"";position:absolute;inset:0;z-index:1;
 background:linear-gradient(100deg,rgba(1,38,49,.94) 0%,rgba(1,38,49,.86) 38%,rgba(1,38,49,.42) 68%,rgba(1,38,49,.18) 100%)}
.oh-copy{position:relative;z-index:2;padding:clamp(32px,4vw,80px);max-width:46rem}
.oh-copy h2{color:#fff;margin:0 0 var(--s7);max-width:16ch}
.oh-copy h2 em{font-style:italic;color:var(--surface-strong)}
.oh-copy p{color:rgba(255,255,255,.88);max-width:52ch}
.oh-copy address{font-style:normal;color:#fff;font-size:var(--fs-lg);line-height:1.8;margin-bottom:var(--s8)}
.oh-copy address a{color:var(--surface-strong)}
.oh-cta{display:flex;gap:var(--s4);flex-wrap:wrap;margin:0}
.officeband .cities{justify-content:center;margin-top:var(--s10)}
.officeband .cities a{background:#fff;border-color:var(--border-strong);font-size:var(--fs-md);
 padding:var(--s5) var(--s8)}
@media(max-width:900px){.officehero{min-height:0;display:block}
 .officehero:before{background:linear-gradient(180deg,rgba(1,38,49,.78),rgba(1,38,49,.94))}
 .oh-copy{padding:var(--s10) var(--s7)}}
/* ===== interior hero: white type straight on the image ====================
   The light card was fighting the photograph. The headline now sits on the image
   itself over a gradient scrim, the way the reference hero does, which also kills
   the orphan white band that used to sit beside the card. */
.ihero{justify-content:flex-end;min-height:clamp(460px, 62vh, 780px)}
.ihero:before{background:
 linear-gradient(180deg,rgba(1,38,49,.72) 0%,rgba(1,38,49,.34) 26%,rgba(1,38,49,.52) 62%,rgba(1,38,49,.88) 100%),
 linear-gradient(100deg,rgba(1,38,49,.70) 0%,rgba(1,38,49,.34) 52%,rgba(1,38,49,0) 86%)}
.ihead{padding-bottom:clamp(40px, 5vw, 96px)}
.ihead .box{background:none!important;border-radius:0!important;padding:0!important;
 max-width:min(1000px,100%)!important}
.ihead h1{color:#fff!important;max-width:20ch;
 text-shadow:0 2px 28px rgba(1,38,49,.45),0 1px 3px rgba(1,38,49,.35)}
.ihead h1 em{font-style:italic;color:var(--surface-strong)}
.ihead .kicker{color:var(--surface-strong)!important;letter-spacing:.2em;margin-bottom:var(--s7);
 text-shadow:0 1px 10px rgba(1,38,49,.5)}
/* a rule under the headline, as in the reference */
.ihead .box:after{content:"";display:block;height:1px;max-width:820px;margin-top:clamp(20px,2.4vw,40px);
 background:rgba(255,255,255,.32)}
.ihero .crumbs{color:rgba(255,255,255,.9)}
.ihero .crumbs a{color:rgba(255,255,255,.9)}
@media(max-width:980px){.ihead h1{max-width:100%}.ihead .box:after{display:none}}

/* --- reviews, scaled up: one large quote carries the section -------------- */
.revband{background:var(--surface-muted);border-block:1px solid var(--border)}
.revgrid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(40px,5vw,110px);align-items:start}
.revside p{font-size:var(--fs-lg);color:var(--text-muted)}
.revscore{display:flex;flex-direction:column;gap:var(--s3);margin:var(--s9) 0}
.revscore b{font:400 clamp(44px,2.4rem + 2.4vw,80px)/1 var(--fd);color:var(--surface-deep)}
.revscore .stars{color:var(--surface-strong);letter-spacing:6px;font-size:var(--fs-xl)}
.revscore em{font-style:normal;font:var(--fw-semi) var(--fs-sm)/1 var(--f);letter-spacing:.12em;
 text-transform:uppercase;color:var(--text-muted)}
.revquote{margin:0;border-left:1px solid var(--border-strong);padding-left:clamp(28px,3.4vw,72px)}
.revquote blockquote{margin:0 0 var(--s9);font:400 clamp(24px,1.3rem + 1.6vw,44px)/1.3 var(--fd);
 color:var(--text-primary)}
.revquote blockquote:before{content:"\201C";display:block;font:400 72px/0.6 var(--fd);
 color:var(--surface-strong);margin-bottom:var(--s5)}
.revquote figcaption{font:var(--fw-semi) var(--fs-sm)/1.5 var(--f);letter-spacing:.08em;
 text-transform:uppercase;color:var(--text-muted)}
@media(max-width:900px){.revgrid{grid-template-columns:1fr}
 .revquote{border-left:0;padding-left:0;border-top:1px solid var(--border-strong);padding-top:var(--s9)}}
/* ===== Knowledge Base article template ===================================
   Narrow measure, large display headings, byline, inline figures, a comparison
   table in its own card and a full FAQ. Modelled on the reference article page. */
body:has(.artbody){background:var(--surface-muted)!important}
.artpage{position:relative;overflow:hidden}
.artpage:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background:
  radial-gradient(560px 560px at 88% 4%,rgba(1,38,49,.045),transparent 60%),
  radial-gradient(640px 640px at 4% 26%,rgba(1,38,49,.035),transparent 62%),
  radial-gradient(520px 520px at 92% 58%,rgba(235,165,37,.055),transparent 62%)}
.artwrap{position:relative;z-index:1;max-width:1180px;margin-inline:auto;
 padding-inline:clamp(16px,4vw,40px)}
.artcol{max-width:880px;margin-inline:auto}
/* hero */
.arthero{padding-block:clamp(96px,10vw,180px) clamp(28px,3vw,56px)}
.artchip{display:inline-block;background:rgba(1,38,49,.07);color:var(--text-primary);
 border-radius:var(--r-pill);padding:var(--s4) var(--s8);margin-bottom:clamp(20px,2.4vw,40px);
 font:var(--fw-semi) var(--fs-sm)/1 var(--f)}
.arthero h1{font-size:clamp(38px,2.2rem + 3.4vw,92px);line-height:1.04;letter-spacing:-.02em;
 margin:0;max-width:17ch}
.artrule{border:0;border-top:1px solid var(--border-strong);margin:clamp(28px,3.4vw,64px) 0 0}
.byline{display:flex;align-items:center;gap:var(--s6);padding-block:clamp(28px,3vw,56px)}
.byline img{width:52px;height:52px;border-radius:var(--r-xs);object-fit:cover;object-position:center 18%;
 flex:0 0 auto;max-height:none!important;box-shadow:none!important}
.byline p{margin:0;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6}
.byline a{color:var(--text-link);font-weight:var(--fw-semi)}
.artlede{font-size:clamp(17px,1rem + .35vw,20px);line-height:1.7;color:var(--text-primary);
 margin:0 0 clamp(40px,5vw,90px)}
/* body */
.artbody{padding-bottom:clamp(60px,6vw,120px)}
.artbody h2{font-size:clamp(30px,1.8rem + 2vw,58px);line-height:1.08;letter-spacing:-.018em;
 margin:clamp(56px,6vw,110px) 0 clamp(20px,2vw,32px);max-width:19ch}
.artbody h3{font-family:var(--fd)!important;font-weight:400;
 font-size:clamp(23px,1.3rem + 1.1vw,38px);line-height:1.18;letter-spacing:-.012em;
 margin:clamp(40px,4vw,72px) 0 var(--s7);max-width:24ch}
.artbody p{font-size:var(--fs-lg);line-height:1.75;color:var(--text-primary);margin:0 0 var(--s8)}
.artbody ul{margin:0 0 var(--s9);padding-left:0;list-style:none}
.artbody ul li{position:relative;padding-left:var(--s9);margin-bottom:var(--s7);
 font-size:var(--fs-lg);line-height:1.7}
.artbody ul li:before{content:"";position:absolute;left:6px;top:12px;width:7px;height:7px;
 border-radius:50%;background:var(--surface-strong)}
.artbody ul li strong{font-weight:var(--fw-bold)}
.artbody figure{margin:clamp(40px,4.5vw,80px) 0}
.artbody figure img{width:100%;border-radius:var(--r-card);display:block;
 max-height:none!important;box-shadow:var(--shadow-1)}
.artbody figcaption{font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--s5);text-align:center}
.artbody .tablecard{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-1);
 padding:clamp(20px,2.4vw,44px);margin:clamp(32px,3.4vw,60px) 0}
.artbody .tablecard table{margin:0;border:1px solid var(--border)}
.artbody .tablecard th,.artbody .tablecard td{border:1px solid var(--border);padding:var(--s7);
 font-size:var(--fs-md);line-height:1.6}
.artbody .tablecard th{background:#fff;color:var(--text-primary);text-transform:none;
 font:var(--fw-bold) var(--fs-md)/1.4 var(--f);letter-spacing:0}
.artbody .tablecard td:first-child{font-weight:var(--fw-semi)}
.artnote{background:#fff;border-left:4px solid var(--surface-strong);border-radius:var(--r-xs);
 padding:var(--s9);margin:clamp(32px,3.4vw,56px) 0;font-size:var(--fs-md);color:var(--text-muted)}
.artfaq h3{margin-top:clamp(44px,4.5vw,80px)}
.artcta{background:var(--surface-deepest);border-radius:var(--r-card);color:#fff;
 padding:clamp(36px,4vw,72px);margin:clamp(56px,6vw,110px) 0 0;position:relative;overflow:hidden}
.artcta:before{content:"";position:absolute;inset:0;
 background:radial-gradient(620px 320px at 14% 6%,rgba(235,165,37,.16),transparent 62%),
 radial-gradient(620px 320px at 88% 94%,rgba(222,84,40,.16),transparent 62%)}
.artcta>*{position:relative;z-index:1}
.artcta h2{color:#fff;margin:0 0 var(--s7);font-size:clamp(26px,1.5rem + 1.5vw,44px);max-width:20ch}
.artcta p{color:rgba(255,255,255,.86);margin-bottom:var(--s9)}
.artcta .btn{margin-right:var(--s4)}
@media(max-width:980px){
 .arthero{padding-block:clamp(84px,14vw,120px) var(--s9)}
 .arthero h1{max-width:100%}
 .artbody h2,.artbody h3{max-width:100%}
}
/* --- article: written-by block ------------------------------------------- */
.rulehead.center{justify-content:center;text-align:center}
.writtenby{background:var(--surface-muted)}
.wb-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,4.5vw,96px);align-items:start;
 max-width:var(--page);margin-inline:auto}
.wb-inner .ph>img{width:100%;border-radius:var(--r-card);object-fit:cover;
 max-height:clamp(380px,38vw,620px)!important;box-shadow:var(--shadow-1);display:block}
.wb-inner h3{font-family:var(--fd)!important;font-weight:400;font-style:italic;
 font-size:clamp(28px,1.6rem + 1.6vw,46px);margin:0 0 var(--s5)}
.wb-role{font:var(--fw-bold) var(--fs-md)/1.4 var(--f);color:var(--text-primary);margin-bottom:var(--s7)}
.wb-inner p{font-size:var(--fs-lg);line-height:1.7;color:var(--text-muted)}
.wb-inner .go{display:inline-flex;align-items:center;gap:var(--s5);text-decoration:none;margin-top:var(--s7);
 font:var(--fw-bold) var(--fs-sm)/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--text-primary)}
.wb-inner .go i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
 background:var(--surface-deep);color:#fff;font-style:normal}
.wb-inner .go:hover i{background:var(--action)}
.rel a .body em{display:block;margin-top:var(--s5)}
@media(max-width:900px){.wb-inner{grid-template-columns:1fr}}
/* home case-results band */
.resultsband{background:var(--surface-deep);color:rgba(255,255,255,.88)}
.resultsband h2{color:#fff}
.resultsband .rulehead{border-bottom-color:rgba(255,255,255,.26)}
.res.reslight div{background:var(--surface-muted)!important;border:1px solid var(--border)!important}
.res.reslight .n{color:var(--action)}
.res.reslight .l{color:var(--text-primary)}
.res.reslight p{color:var(--text-muted)}
.resultsband .bandlede{color:rgba(255,255,255,.82);font-size:var(--fs-lg);max-width:62ch;margin:0}
.resultsband .res{margin-top:var(--s11)}
/* --- Areas of Practice: one scrolling row, as in the reference ------------- */
.pacar{display:grid;grid-template-columns:minmax(230px,.34fr) 1fr;gap:clamp(28px,3.4vw,72px);
 align-items:start;margin-top:var(--s10)}
.pa-side p{font-size:var(--fs-lg);line-height:1.7;color:var(--text-muted);margin-bottom:var(--s9)}
.pa-view{min-width:0}
.pa-track{display:flex;gap:var(--s7);overflow-x:auto;scroll-snap-type:x mandatory;
 scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:var(--s4)}
.pa-track::-webkit-scrollbar{display:none}
.pa-track:focus-visible{outline:3px solid var(--surface-strong);outline-offset:4px}
.pa-track>a{position:relative;flex:0 0 clamp(250px,25vw,400px);height:clamp(360px,36vw,560px);
 scroll-snap-align:start;border-radius:var(--r-card);overflow:hidden;background:var(--surface-deep);
 text-decoration:none;box-shadow:var(--shadow-1);transition:transform var(--dur),box-shadow var(--dur);
 display:block;min-height:0}
.pa-track>a:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.pa-track>a>.ph>img{position:absolute;inset:0;width:100%;height:100%;max-height:none!important;
 object-fit:cover;object-position:center 42%;border-radius:0!important;box-shadow:none!important}
.pa-track>a:before{content:"";position:absolute;inset:0;z-index:1;
 background:linear-gradient(to top,rgba(1,38,49,.9) 0%,rgba(1,38,49,.34) 46%,rgba(1,38,49,.06) 100%)}
.pa-track>a>.t{position:absolute;left:var(--s9);bottom:var(--s9);right:84px;z-index:2;color:#fff;
 font:400 clamp(22px,1.2rem + .9vw,34px)/1.15 var(--fd)}
.pa-track>a:after{content:"\2192";position:absolute;right:var(--s9);bottom:var(--s9);z-index:2;
 width:52px;height:52px;border-radius:50%;background:var(--surface-strong);color:#1f2a30;
 display:grid;place-items:center;font-size:var(--fs-xl)}
.pa-track>a:hover:after{background:var(--action);color:#fff}
.pa-controls{display:flex;align-items:center;gap:var(--s9);margin-top:var(--s9)}
.pa-bar{flex:1 1 auto;height:3px;background:var(--border-strong);border-radius:3px;overflow:hidden}
.pa-bar span{display:block;height:100%;width:25%;background:var(--surface-deepest);border-radius:3px;
 transition:width 160ms linear,transform 160ms linear;transform-origin:left}
.pa-btns{display:flex;gap:var(--s4);flex:0 0 auto}
.pa-btns button{width:50px;height:50px;border:0;border-radius:50%;cursor:pointer;
 background:var(--surface-muted);color:var(--text-primary);font-size:var(--fs-lg);
 transition:background var(--dur),color var(--dur)}
.pa-btns button:hover:not(:disabled){background:var(--surface-deep);color:#fff}
.pa-btns button:disabled{opacity:.35;cursor:default}
@media(max-width:900px){
 .pacar{grid-template-columns:1fr;gap:var(--s9)}
 .pa-track>a{flex-basis:76vw;height:62vw;min-height:320px}
 .pa-controls{margin-top:var(--s8)}
}
/* ===== recognition strip: scrolling row with dividers ====================== */
.featured{background:var(--surface-muted);border-block:1px solid var(--border);
 padding-block:clamp(48px,5vw,110px)}
.featured .wrap{max-width:var(--page);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.featured .rulehead.center h2{font-size:clamp(28px,1.6rem + 2vw,62px)}
.featcar{display:flex;align-items:stretch;gap:var(--s7)}
.featcar .pa-track{list-style:none;margin:0;padding:0;align-items:stretch;flex:1 1 auto;gap:0}
.featcar .pa-track li{flex:0 0 clamp(190px,21vw,290px);scroll-snap-align:start;display:flex;
 align-items:center;justify-content:center;text-align:center;padding:var(--s8) var(--s7);
 border-left:1px solid var(--border-strong)}
.featcar .pa-track li:first-child{border-left:0}
.featcar .pa-track a,.featcar .pa-track div{text-decoration:none;display:block}
.featcar b{display:block;font:400 clamp(18px,1rem + .55vw,26px)/1.25 var(--fd);color:var(--text-primary)}
.featcar a:hover b{color:var(--surface-deep)}
.featcar span{display:block;font:var(--fw-semi) var(--fs-xs)/1.4 var(--f);letter-spacing:.14em;
 text-transform:uppercase;color:var(--text-muted);margin-top:8px}
.featcar .pa-prev,.featcar .pa-next{align-self:center;flex:0 0 auto;width:50px;height:50px;border:0;
 border-radius:50%;cursor:pointer;background:rgba(1,38,49,.07);color:var(--text-primary);
 font-size:var(--fs-lg);transition:background var(--dur),color var(--dur)}
.featcar .pa-prev:hover:not(:disabled),.featcar .pa-next:hover:not(:disabled){
 background:var(--surface-deep);color:#fff}
.featcar .pa-prev:disabled,.featcar .pa-next:disabled{opacity:.3;cursor:default}
@media(max-width:760px){.featcar .pa-track li{flex-basis:60vw}}
.featcar .pa-track{flex-wrap:nowrap}
.shal-fonts{display:none}
/* belt and braces: nothing above a hero may contribute a collapsing margin */
main>.wrap.page-body>article>p:empty,main>.wrap.page-body>article>p:blank{display:none!important}
body:has(.ihero) main>.wrap.page-body>article,
body:has(.artpage) main>.wrap.page-body>article{display:flow-root}
/* the article page keeps its soft background but the hero runs edge to edge above it */
body:has(.artpage) main>.hero,
body:has(.artpage) main>.wrap.page-body>nav.crumbs{display:none!important}
body:has(.artpage) main{padding-top:0!important}
body:has(.artpage) main>.wrap.page-body{max-width:none!important;padding:0!important}
.artpage .arthero{padding-block:clamp(40px,4vw,72px) clamp(24px,2.6vw,48px)}
/* wpautop still parks the nav <script> inside a bare <p> at article level. It has no
   content but it carries an 18px bottom margin, which is the gap above the hero.
   Every real paragraph lives inside a .wrap or .artcol, never directly under
   <article>, so zeroing this one is precise. */
main>.wrap.page-body>article>p{margin:0!important;line-height:0}
/* main .wrap caps content at 820px; the full-bleed bands need the page width.
   .sec already overrides it, .darkpanel and the panels did not. */
.darkpanel>.wrap,.featured>.wrap,.resultsband>.wrap{max-width:var(--page)!important;
 margin-inline:auto;padding-inline:clamp(16px,4vw,40px);width:100%}
.panel,.panel .inner{max-width:var(--page)}
/* --- other cities, at the foot of every location page --------------------- */
.citycards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s8);
 margin-top:var(--s10)}
.citycards a{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;
 min-height:clamp(220px,19vw,300px);background:var(--surface-deep);text-decoration:none;
 box-shadow:var(--shadow-1);transition:transform var(--dur),box-shadow var(--dur)}
.citycards a:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.citycards a>.ph>img{position:absolute;inset:0;width:100%;height:100%;max-height:none!important;
 object-fit:cover;border-radius:0!important;box-shadow:none!important}
.citycards a:before{content:"";position:absolute;inset:0;z-index:1;
 background:linear-gradient(to top,rgba(1,38,49,.9) 0%,rgba(1,38,49,.3) 52%,rgba(1,38,49,.05) 100%)}
.citycards b{position:absolute;left:var(--s8);bottom:var(--s8);right:68px;z-index:2;color:#fff;
 font:400 clamp(19px,1rem + .8vw,28px)/1.15 var(--fd)}
.citycards a:after{content:"\2192";position:absolute;right:var(--s7);bottom:var(--s7);z-index:2;
 width:42px;height:42px;border-radius:50%;background:var(--surface-strong);color:#1f2a30;
 display:grid;place-items:center;font-size:var(--fs-md)}
.citycards a:hover:after{background:var(--action);color:#fff}
/* Button pairs sit side by side on desktop with a space between them, but once they
   wrap onto separate lines on a phone that space disappears and they touch.
   A bottom margin cannot fix it: .btn is inline-flex, so vertical margins do not
   expand the line box. The paragraph itself becomes the flex container instead,
   and gap then works in both directions. Centring is preserved where it existed. */
@media(max-width:900px){
  p:has(>.btn + .btn){display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center}
  .closing p:has(>.btn + .btn),
  .artcta p:has(>.btn + .btn),
  p[style*="text-align:center"]:has(>.btn + .btn){justify-content:center}
  .hero-cta,.oh-cta{gap:var(--s5)}
  .artcta p>.btn{margin-right:0}
}
/* page.php appends an automatic card grid of a page's children. Every page now
   supplies its own navigation — practice carousel, city stack, related claims —
   so the automatic one is redundant and on /es/ it was rendering 56 stub cards
   under the content. Removed from page.php once the theme is editable. */
main .wrap.page-body article>.grid,
main>.wrap.page-body>.grid{display:none!important}
/* The full-width treatment was gated on .ihero, so the Spanish home page — which
   supplies a .hero like the English home does — kept the theme's own hero, the
   theme breadcrumb and the 820px content column. Gate on any full-bleed section
   the content provides, not just the interior one. */
body:has(article>.hero) main>.hero,
body:has(article>.hero) main>.wrap.page-body>nav.crumbs,
body:has(article>.ihero) main>.hero,
body:has(article>.ihero) main>.wrap.page-body>nav.crumbs{display:none!important}
body:has(article>.hero) main,
body:has(article>.ihero) main,
body:has(article>.artpage) main{padding-top:0!important}
body:has(article>.hero) main>.wrap.page-body,
body:has(article>.ihero) main>.wrap.page-body,
body:has(article>.artpage) main>.wrap.page-body{max-width:none!important;padding:0!important}
body:has(article>.hero) main>.wrap.page-body>article{display:flow-root}
/* The visible hero headline. page.php always emits the page's real <h1>; the
   content ships .h1like and nav.js swaps the real heading in, so the source has
   exactly one H1 and this rule styles whichever element ends up here. */
.ihead .box .h1like,
.ihead .box h1.h1moved{color:#fff!important;max-width:20ch;margin:0;
 font-family:var(--fd)!important;font-weight:400;
 font-size:clamp(34px, 2rem + 2.6vw, 78px);line-height:1.02;letter-spacing:-.02em;
 text-shadow:0 2px 28px rgba(1,38,49,.45),0 1px 3px rgba(1,38,49,.35)}
.ihead .box .h1like em,.ihead .box h1.h1moved em{font-style:italic;color:var(--surface-strong)}
/* three-column intro labels: styled like a heading, not a heading */
.ilede .colh,.contact-grid .colh{font:400 clamp(21px,1.1rem + .7vw,30px)/1.15 var(--fd);
 color:var(--text-primary);margin:0 0 var(--s6)}
@media(max-width:980px){.ihead .box .h1like,.ihead .box h1.h1moved{max-width:100%}}
/* footer column labels keep their look after the h4 -> h3 promotion */
.site-footer h3{color:#fff;font:var(--fw-bold) var(--fs-sm)/1 var(--f);letter-spacing:.12em;
 text-transform:uppercase;margin-bottom:var(--s6)}
/* --- related-claim cards scroll left to right, like the practice carousel --- */
.relcar{position:relative}
.relcar .rel{display:flex;flex-wrap:nowrap;gap:var(--s7);overflow-x:auto;scroll-snap-type:x mandatory;
 scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:var(--s4);
 grid-template-columns:none}
.relcar .rel::-webkit-scrollbar{display:none}
.relcar .rel:focus-visible{outline:3px solid var(--surface-strong);outline-offset:4px}
.relcar .rel>a{flex:0 0 clamp(260px,27vw,380px);scroll-snap-align:start}
.relcar .pa-controls{display:flex;align-items:center;gap:var(--s9);margin-top:var(--s8)}
.darkpanel .relcar .pa-bar{background:rgba(255,255,255,.26)}
.darkpanel .relcar .pa-bar span{background:#fff}
.darkpanel .relcar .pa-btns button{background:rgba(255,255,255,.12);color:#fff}
.darkpanel .relcar .pa-btns button:hover:not(:disabled){background:var(--surface-strong);color:#1f2a30}
@media(max-width:900px){.relcar .rel>a{flex-basis:78vw}}

/* === SHALHOUB LAW — floating pill navigation (JacksonWhite pattern, Shalhoub brand) ===
   The theme header cannot be edited without SFTP, so nav.js rebuilds .site-header in
   place and this stylesheet dresses it. Desktop: pill bar with hover/focus dropdowns.
   Mobile: the same bar collapses to a hamburger that opens a full-height drawer whose
   sections are accordions. Keyboard and touch both drive it; no hover-only paths. */
.site-header{position:absolute!important;top:0;left:0;right:0;z-index:60;background:transparent!important;border:0!important}
.site-header.is-stuck{position:fixed!important;top:0}
.site-header.is-stuck .shnav{margin-top:var(--s3);box-shadow:0 10px 30px rgba(1,38,49,.22)}
.shnav{background:#fff;border-radius:var(--r-pill);box-shadow:var(--shadow-2);max-width:var(--page);
 margin:var(--s7) auto 0;padding:var(--s2) var(--s2) var(--s2) var(--s8);display:flex;align-items:center;gap:var(--s7)}
.shnav .brand{flex:0 0 auto;display:flex;align-items:center;padding-block:var(--s1)}
.shnav .brand img{height:42px;width:auto;display:block}
.shnav ul{list-style:none;margin:0;padding:0}
.shnav .lvl1{display:flex;align-items:center;gap:var(--s2);flex:1 1 auto;justify-content:center}
.shnav .lvl1>li{position:relative}
.shnav .lvl1>li>a,.shnav .lvl1>li>button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
 cursor:pointer;color:var(--text-primary)!important;font:var(--fw-med) var(--fs-md)/1 var(--f);text-decoration:none!important;
 padding:var(--s5) var(--s5);border-radius:var(--r-pill);white-space:nowrap;transition:background var(--dur),color var(--dur)}
.shnav .lvl1>li>a:hover,.shnav .lvl1>li>button:hover,.shnav .lvl1>li.open>button{background:var(--surface-muted)}
.shnav .lvl1>li.cur>a,.shnav .lvl1>li.cur>button{color:var(--surface-deep)!important;font-weight:var(--fw-semi)}
.shnav .caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
 transform:rotate(45deg) translateY(-2px);transition:transform var(--dur);flex:0 0 auto}
.shnav .lvl1>li.open .caret{transform:rotate(-135deg) translateY(-2px)}
.shnav .tel{display:inline-flex;align-items:center;gap:var(--s3);color:var(--text-primary)!important;
 font:var(--fw-semi) var(--fs-md)/1 var(--f);text-decoration:none!important;white-space:nowrap;padding-inline:var(--s4)}
.shnav .tel svg{flex:0 0 auto}
.shnav .tel:hover{color:var(--action)!important}
.shnav .btn{flex:0 0 auto;padding:var(--s5) var(--s8)!important;font-size:var(--fs-xs)!important}
.shnav .burger{display:none;width:46px;height:46px;border:0;background:var(--surface-muted);border-radius:50%;
 cursor:pointer;margin-left:auto;position:relative}
.shnav .burger span{position:absolute;left:13px;right:13px;height:2px;background:var(--text-primary);border-radius:2px;
 transition:transform var(--dur),opacity var(--dur)}
.shnav .burger span:nth-child(1){top:16px}.shnav .burger span:nth-child(2){top:22px}.shnav .burger span:nth-child(3){top:28px}
/* dropdown panels */
.shnav .drop{position:absolute;top:calc(100% + var(--s5));left:50%;transform:translateX(-50%) translateY(-6px);
 background:#fff;border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-2);
 padding:var(--s8);min-width:280px;opacity:0;visibility:hidden;transition:opacity var(--dur),transform var(--dur),visibility var(--dur)}
.shnav .lvl1>li.open .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.shnav .drop.wide{min-width:700px}
.shnav .drop .cols{display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:var(--s2) var(--s8)}
.shnav .drop.two .cols{grid-template-columns:repeat(2,minmax(230px,1fr))}
.shnav .drop a{display:block;padding:var(--s4) var(--s5);border-radius:var(--r-xs);color:var(--text-primary)!important;
 font:400 var(--fs-md)/1.35 var(--f);text-decoration:none!important}
.shnav .drop a:hover{background:var(--surface-muted);color:var(--surface-deep)!important}
.shnav .drop .all{margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--border)}
.shnav .drop .all a{font:var(--fw-bold) var(--fs-sm)/1 var(--f);letter-spacing:.08em;text-transform:uppercase;
 color:var(--action)!important}
.shnav .drop .all a:hover{background:none;color:var(--action-hover)!important}
.shnav-scrim{position:fixed;inset:0;background:rgba(1,38,49,.5);opacity:0;visibility:hidden;z-index:55;
 transition:opacity var(--dur),visibility var(--dur)}
body.shnav-open .shnav-scrim{opacity:1;visibility:visible}
@media(max-width:1180px){.shnav{gap:var(--s4);padding-left:var(--s6)}.shnav .lvl1>li>a,.shnav .lvl1>li>button{padding-inline:var(--s4);font-size:var(--fs-sm)}
 .shnav .tel span{display:none}.shnav .brand img{height:36px}}
/* ---- mobile drawer ---- */
@media(max-width:1024px){
 .site-header{position:absolute!important}
 .shnav{margin:var(--s5) var(--s5) 0;padding:var(--s2) var(--s2) var(--s2) var(--s6);gap:var(--s4)}
 .shnav .burger{display:block}
 /* The number already sits in the hero and in the fixed bar at the bottom of the
    screen, so the pill carries only the logo and the menu control on small screens. */
 .shnav>.btn,.shnav>.tel{display:none}
 .shnav .burger{margin-left:auto}
 .shnav .lvl1{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:#fff;z-index:70;
  display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:84px var(--s7) var(--s11);
  transform:translateX(102%);transition:transform 280ms cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-2)}
 body.shnav-open .shnav .lvl1{transform:translateX(0)}
 body.shnav-open{overflow:hidden}
 .shnav .lvl1>li{border-bottom:1px solid var(--border)}
 .shnav .lvl1>li>a,.shnav .lvl1>li>button{width:100%;justify-content:space-between;padding:var(--s7) var(--s2);
  font-size:var(--fs-xl);font-family:var(--fd)!important;font-weight:400;border-radius:0}
 .shnav .lvl1>li>button .caret{width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  background:var(--surface-muted);border:0;transform:none;position:relative}
 .shnav .lvl1>li>button .caret:after{content:"\2192";position:absolute;inset:0;display:grid;
  place-items:center;font:var(--fw-med) var(--fs-md)/1 var(--f);color:var(--text-primary)}
 .shnav .lvl1>li.open .caret{transform:none}
 .shnav .lvl1>li>a:hover,.shnav .lvl1>li>button:hover,.shnav .lvl1>li.open>button{background:none}
 /* each dropdown becomes a panel that slides over the drawer */
 .shnav .drop,.shnav .drop.wide{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);
  min-width:0;z-index:71;background:#fff;border:0;border-radius:0;box-shadow:var(--shadow-2);
  padding:0 var(--s7) var(--s11);overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:1;visibility:visible;display:block;
  transform:translateX(102%)!important;transition:transform 260ms cubic-bezier(.4,0,.2,1)}
 .shnav .lvl1>li.drilled>.drop{transform:translateX(0)!important}
 .shnav .lvl1.is-drilled>li:not(.drilled){visibility:hidden}
 .shnav .drophead{display:flex;align-items:center;gap:var(--s5);position:sticky;top:0;z-index:2;
  background:#fff;padding:var(--s7) 0 var(--s6);margin-bottom:var(--s5);
  border-bottom:1px solid var(--border)}
 .shnav .dback{width:40px;height:40px;flex:0 0 auto;border:0;border-radius:50%;cursor:pointer;
  background:var(--surface-muted);color:var(--text-primary);font-size:18px;line-height:1}
 .shnav .dtitle{font:400 var(--fs-xl)/1.2 var(--fd);color:var(--text-primary)}
 .shnav .drop .cols,.shnav .drop.two .cols{grid-template-columns:1fr;gap:0}
 .shnav .drop a{padding:var(--s6) var(--s3);font-size:var(--fs-lg);color:var(--text-primary)!important;
  border-bottom:1px solid var(--border);border-radius:0}
 .shnav .drop a:hover{background:none}
 .shnav .drop .all{margin-top:var(--s4);padding-top:var(--s4)}
 .shnav .mobile-cta{display:block;margin-top:var(--s9)}
 .shnav .mobile-cta .btn{width:100%;margin-bottom:var(--s4)}
 .shnav .mobile-cta p{font-size:var(--fs-sm);color:var(--text-muted);text-align:center;margin:0}
 .shnav .closex{position:fixed;top:var(--s8);right:var(--s8);z-index:72;width:44px;height:44px;border:0;
  border-radius:50%;background:var(--surface-muted);cursor:pointer;display:none;font-size:22px;line-height:1;color:var(--text-primary)}
 body.shnav-open .shnav .closex{display:block}
 body.shnav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
 body.shnav-open .burger span:nth-child(2){opacity:0}
 body.shnav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
@media(min-width:1025px){.shnav .mobile-cta,.shnav .closex,.shnav .drophead,
 .shnav .lvl1>li.mobile-lang{display:none}}
@media(prefers-reduced-motion:reduce){.shnav *,.shnav .lvl1{transition:none!important}}
/* language switcher */
.shnav .langsw{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;text-decoration:none!important;
 border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:5px;margin-left:var(--s3);
 font:var(--fw-bold) var(--fs-xs)/1 var(--f);letter-spacing:.06em}
.shnav .langsw .on{background:var(--surface-deep);color:#fff;border-radius:var(--r-pill);padding:6px 9px}
.shnav .langsw .off{color:var(--text-muted);padding:6px 9px}
.shnav .langsw:hover{border-color:var(--surface-deep)}
.shnav .langsw:hover .off{color:var(--surface-deep)}
@media(max-width:1180px){.shnav .langsw{margin-left:0}}
@media(max-width:1024px){
 .shnav>.langsw{display:none}
 .shnav .lvl1>li.mobile-lang{border-bottom:0;padding-top:var(--s8)}
 .shnav .lvl1>li.mobile-lang .langsw{margin:0;padding:6px}
 .shnav .lvl1>li.mobile-lang .on,.shnav .lvl1>li.mobile-lang .off{padding:9px 14px;font-size:var(--fs-sm)}
}

/* Static-build overrides. The WordPress theme relied on page.php wrapping the
   footer, so `.site-footer .wrap` and `.cta .wrap` set a max-width but never
   centred it or added gutters. Horizontal properties only: a `padding`
   shorthand here would zero the vertical rhythm the design system sets. */
.site-footer .wrap,
.cta .wrap{margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}

/* Hero film.
   The flicker on load was a crossfade between two DIFFERENT pictures. The theme
   sets `.hero{background:... url(shalhoub-hero-still.jpg) ... !important}` and that
   still is a frame of the PREVIOUS cut, so the page painted the old shot and then
   dissolved the new video over it across 800ms. WordPress never showed it because
   the video there matched the still.
   The !important is why specificity alone could not win here.
   The fix is the video's OWN first frame, inlined at 48x20 and ~1.5KB, stretched
   under the video by background-size:cover. It costs no request, it is already
   decoded when the first paint happens, and because it is literally frame 0 of the
   file the fade has nothing to cross - the still and the first video frame match.
   Regenerate it if the video is ever re-encoded, or the still will show the old cut. */
.hero.home{background-image:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAUADADASIAAhEBAxEB/8QAGgAAAgMBAQAAAAAAAAAAAAAAAAYCAwUEAf/EACwQAAIBAwIEBAYDAAAAAAAAAAECAwAEEQUhEhMxQVFh0fAVMnGBkbEiI1L/xAAWAQEBAQAAAAAAAAAAAAAAAAABAgP/xAAcEQADAAEFAAAAAAAAAAAAAAAAARExAgMTQVH/2gAMAwEAAhEDEQA/AGeW8ziOAgtjLMRso9ff1WtU18IzpZMGYEh7iTdQfLx/VeXWoh7YJZT5kmPDkOOJQep/ApclCzOQGxBHsvvxNaNQEy34pdXFyoN3ckuQCRJylH2Gdql8Umt7wq95dJgY4uYJlyfI7VnyXZglAhVVx3xnfrVdzqLT3ZkaKNVYjiCpgDAxsO3rStty0nlVkHXT9SchXldGz8k0R2J8weh9aYbS8Ev9bEcwd/8AVJmkwpHGJYSTFJ86Hsff7rVN7b278L3MUbruA7gEeFSaZQttY2wjtWESguxyVHCfyN6yRcyKkkWchAWBOSSc96KKpmZyu7RtzAeJl3/luD9anqF7cXMkDTPxARhgvYZ8vsKKKPBWGd9vdTvw2PMKwSkFwAMncDr1G3hTLDp9nEuUt4xlt9s0UUdjpwf/2Q==")!important;
  background-size:cover!important;background-position:center!important;
  background-repeat:no-repeat!important}
.hero.home .hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:0;transition:opacity .25s linear}
.hero.home .hero-film.is-ready{opacity:1}
@media(prefers-reduced-motion:reduce){.hero.home .hero-film{display:none}}

/* Footer logo. The theme sets `footer img{height:48px}` while the markup also
   carries width="240", so the mark was being squashed to 240x48 instead of
   scaling. Give the height priority and let the width follow the aspect ratio. */
.site-footer img{height:56px;width:auto;max-width:100%}

/* Reading measure.
   .sec is the theme's full-bleed band container, sized to --page (1240px, rising
   to 1640px wide). Capping the container squeezed every component inside it --
   the practice-areas carousel went from 3 cards to 1.7. So the container keeps
   its band width and only the running prose is capped. Anything that is a
   component rather than a paragraph (.pacar, .rel, .res, .ilede, and anything
   added later) is untouched by default, which is the point: an allow-list of
   bands is a list I will keep forgetting to update. */
.sec > .wrap > p,
.sec > .wrap > ul,
.sec > .wrap > ol,
.sec > .wrap > h3,
.sec > .wrap > blockquote{max-width:72ch}
.sec > .wrap > .rulehead,
.sec > .wrap > .tablecard,
.sec > .wrap > .acc{max-width:1040px}

/* Footer column headings were <h4> directly after an <h2>, which skipped a heading
   level on all 115 pages. They are <h2 class="fcol"> now; these are the theme's own
   .site-footer h4 declarations, copied verbatim so nothing moves. */
.site-footer h2.fcol{color:#fff;font:var(--fw-bold) var(--fs-sm)/1 var(--f);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s6)}

/* Practice-areas carousel.
   Cards were sized from the viewport (flex-basis: clamp(250px,25vw,400px)),
   which bears no relation to the width of the track they actually sit in, so
   how many you saw drifted with the window: 2.47 at 1680px. Size them from the
   track instead, so three show across on desktop as they did on WordPress. */
@media (min-width:901px){
  .pa-track>a{flex:0 0 calc((100% - 2 * var(--s7)) / 3)}
}

/* The closing CTA is an inset rounded card, but it sat flush against whatever
   came before it (gap measured at 0px). Where that is the dark related-claims
   band, both are the same navy, so the card's 22px corners read as a clipping
   artefact rather than a card. Give it room. */
.closing{margin-top:clamp(40px,5vw,80px)}

/* Paul's face in the closing CTA. Round, centred above the heading, and small
   enough that it reads as a signature rather than a hero. */
.closing-face{display:block;width:128px;height:128px;margin:0 auto var(--s8);
  border-radius:50%;object-fit:cover;object-position:center 18%;
  border:3px solid rgba(255,255,255,.22);box-shadow:var(--shadow-2)}
@media(max-width:600px){.closing-face{width:104px;height:104px}}

/* Hero rule.
   .hero .wrap is a two-column grid on the home page, so its ::after became a
   grid item and the decorative rule rendered floating in the right-hand
   column instead of under the copy. It adds nothing there, so it goes. */
.hero .wrap:after{display:none}

/* Hero video.
   The poster attribute is gone: the hero already paints the same frame as a
   CSS background underneath, so the poster was a second copy of the identical
   image and produced a visible two-step. The background stays as the fallback
   for reduced motion and for a refused autoplay, and the video fades over it. */

/* Language switch on mobile.
   It was hidden in the bar and only reachable inside the open menu. It now
   sits in the floating bubble beside the hamburger, where people look for it,
   and the duplicate inside the menu is suppressed. */
@media(max-width:1024px){
  .shnav>.langsw{display:inline-flex;margin-left:auto;margin-right:6px}
  .shnav>.langsw .on,.shnav>.langsw .off{padding:5px 8px;font-size:var(--fs-xs)}
  .shnav .lvl1>li.mobile-lang{display:none}
}

/* Panel image.
   The image column was the narrower of the two and capped at 700px, so a
   portrait photograph read as small beside its text. Give the image the
   larger share and the height to use it. */
@media(min-width:901px){
  .panel .inner{grid-template-columns:1.08fr 1fr}
  .panel img,.panel .ph>img{max-height:clamp(460px,46vw,800px)!important}
}

/* Text-only cards lost their padding.
   tokens.css:430 zeroes .rel a padding so a photo can run edge to edge, and
   restores it on .rel a .body. A card with neither a photo nor a .body wrapper
   - the case-results cards, the boards and charity cards on /community/ - was
   left with text sitting against the rounded corner. Restore the original
   padding only where neither of those two children is present, so a card that
   already pads its .body is not padded twice. */
.rel a:not(:has(> .ph)):not(:has(.body)){padding:var(--s9)}

/* Per-page hero still.
   tokens.css sets ONE picture for every .hero, with !important:
     .hero{background: var(--surface-deepest) url(shalhoub-hero-still.jpg) ... !important}
   so 87 pages shared a single image. The page-specific photographs were already
   in the library, with their responsive variants, just never referenced.
   build.py now sets --hero-img per page from HERO_IMG; this reads it and falls
   back to the original still, so a page without its own picture is unchanged.
   The !important here is only to answer the !important above. */
.hero{background-image:var(--hero-img,url("/assets/img/shalhoub-hero-still.jpg"))!important}

/* Display face.
   The theme shipped Fraunces, which carries a literal "wonk" axis - its j, f
   and g are deliberately eccentric and read as broken to anyone who has not
   seen the face before. Source Serif 4 keeps the editorial weight at headline
   size with conventional letterforms. One line, so swapping it is one line. */
:root{--fd:"Source Serif 4",Georgia,"Times New Roman",serif}

/* Source captions.
   Six pages already carried <p class="cap"> under a statistic or a chart - the
   FLHSMV crash tables, mostly - and the class had no rule anywhere, so a source
   line set in it rendered at body size and competed with the sentence above it.
   This is the rule those captions were written for. */
.cap{font-size:var(--fs-xs,13px);line-height:1.6;color:var(--text-muted,#5c6a72);margin-top:10px}

/* The Business Profile card.
   .mapwrap is built for the contact page, where a 440px map is the point. On
   the reviews page the map is not the point - the card Google draws over it is,
   because it carries the live rating and review count. Shorter frame, and no
   top margin, since it follows the note it belongs to. */
.mapwrap.gbp{margin-top:var(--s6,22px)}
.mapwrap.gbp iframe{height:330px}

/* Google reviews.
   The cards are filled in the browser from /api/reviews, because the Places
   policy does not allow review text to be stored in the page. Until that answers
   the container has no height and no border, so a page where the endpoint is
   unconfigured or unreachable looks finished rather than broken. Everything here
   styles markup that may never arrive. */
[data-gr]:not([data-gr-ready]){display:none}
.gr-cards{display:grid;gap:var(--s8,20px);grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.gr-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow-1);padding:clamp(18px,2vw,24px);margin:0;display:flex;flex-direction:column}
.gr-who{display:flex;align-items:center;gap:11px;margin:0 0 10px}
.gr-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 40px;background:var(--cream,#f3efe7)}
.gr-av-blank{display:grid;place-items:center;font-weight:var(--fw-bold,700);color:var(--navy);
  font-size:16px;text-transform:uppercase}
.gr-id{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.gr-id b{font-size:var(--fs-sm,15px);color:var(--text-primary)}
.gr-id a{color:inherit;text-decoration:none}
.gr-id a:hover{text-decoration:underline}
.gr-when{font-size:var(--fs-xs,13px);color:var(--text-muted)}
.gr-stars{margin:0 0 10px;color:var(--gold);letter-spacing:2px;font-size:15px;line-height:1}
.gr-card blockquote{margin:0;padding:0;border:0;font-size:var(--fs-sm,15px);line-height:1.65;
  color:var(--text-primary);white-space:pre-line;overflow-wrap:anywhere}
.gr-more{margin-top:14px;align-self:flex-start;font-size:var(--fs-xs,13px);color:var(--text-muted)}
.gr-note{margin-top:var(--s8,20px)}
.gr-all{margin-top:var(--s6,16px)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* On the home page the same cards run as one scrolling row on a phone, which is
   the carousel, and as a plain three-up on anything wider. No auto-advance: a
   panel that moves on its own takes the review away mid-sentence. */
@media (max-width:760px){
  [data-gr="strip"] .gr-cards{grid-auto-flow:column;grid-auto-columns:82%;
    grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:6px;margin-inline:calc(var(--s6,16px) * -1);
    padding-inline:var(--s6,16px);scrollbar-width:none}
  [data-gr="strip"] .gr-cards::-webkit-scrollbar{display:none}
  [data-gr="strip"] .gr-card{scroll-snap-align:start}
}

/* "What clients say" - the featured review.
   One review at a time, set large in the display face, with the reviewer's name
   at the top and the rating and source underneath. Arrows only: nothing moves on
   its own, because these run to three or four sentences and a panel that advances
   itself takes the sentence away halfway through.

   The whole section hides until a review has arrived. An empty frame under a
   heading promising reviews is worse than no section, and this one carries no
   copy that has to be read if the reviews are not there. */
[data-gr="feature"]:not([data-gr-ready]){display:none}
.wos-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,13fr);
  gap:clamp(28px,4vw,64px);align-items:start;margin-top:var(--s10,40px)}
.wos-intro p{margin:0 0 var(--s8,20px)}
.wos-intro p:last-child{margin-bottom:0}
.wos-stage{border-left:1px solid var(--border);padding-left:clamp(22px,3vw,48px);min-height:280px}
.wos-top{display:flex;align-items:center;gap:12px;margin-bottom:var(--s9,28px)}
.wos-mark{font-family:var(--fd);font-size:44px;line-height:.6;color:var(--navy);
  transform:translateY(6px)}
.wos-name{font-size:var(--fs-md,17px);font-weight:var(--fw-med,500);color:var(--text-primary)}
.wos-nav{margin-left:auto;display:flex;gap:8px;flex:0 0 auto}
.wos-nav button{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(1,38,49,.07);color:var(--navy);font-size:15px;line-height:1;
  transition:background var(--dur,200ms) ease}
.wos-nav button:hover{background:rgba(1,38,49,.14)}
.wos-text{font-family:var(--fd);font-size:clamp(21px,2.1vw,30px);line-height:1.42;
  color:var(--text-primary);margin:0;padding:0;border:0;white-space:pre-line;
  overflow-wrap:anywhere}
.wos-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:var(--s10,40px)}
.wos-src{font-size:var(--fs-sm,15px);color:var(--text-muted);text-decoration:none;
  border-bottom:1px solid var(--border)}
.wos-src:hover{color:var(--text-primary)}
.wos-stars{color:var(--gold);letter-spacing:3px;font-size:17px;line-height:1}
@media (max-width:820px){
  .wos-grid{grid-template-columns:1fr;gap:var(--s10,40px)}
  .wos-stage{border-left:0;border-top:1px solid var(--border);padding-left:0;
    padding-top:var(--s9,28px);min-height:0}
}

/* Review lengths vary wildly - one person writes a sentence, the next writes six
   paragraphs - and in a grid that leaves a row of short cards sitting under a
   tall one with dead space beside it. Columns pack them by height instead. The
   alternative, clamping every card to the same height, means truncating what a
   client wrote, and a review you have cut off is a review you have edited. */
[data-gr="list"] .gr-cards{display:block;columns:3 272px;column-gap:var(--s8,20px)}
[data-gr="list"] .gr-card{display:block;break-inside:avoid;margin:0 0 var(--s8,20px)}

/* The stars carry the whole panel at a glance, so they are the one thing in it
   allowed to be loud. #FBBC04 is the yellow Google itself sets its review stars
   in, which is the right borrowed signal here: these came from Google and the
   firm cannot touch them. */
:root{--star:#fbbc04}
.wos-foot{align-items:center}
.wos-stars{color:var(--star);font-size:24px;letter-spacing:4px}
.gr-stars{color:var(--star);font-size:17px}
.wos-g{font-size:23px;font-weight:600;letter-spacing:-.6px;color:var(--navy);line-height:1}
.wos-src{text-decoration:none;opacity:.85;transition:opacity var(--dur,.2s)}
.wos-src:hover{opacity:1}

/* Three statutes, three columns. They were three stacked paragraphs in an
   830px measure inside a 1240px column, so a third of the row sat empty and
   the section read as a narrow ribbon of grey. Side by side they use the width
   they were given, and the statute number works harder as a label above the
   rule than buried in the second sentence of it. */
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.2vw,52px);margin-top:var(--s8,22px)}
.rule{border-top:3px solid var(--gold);padding-top:17px;
  display:flex;flex-direction:column}
/* The three bodies are never the same length, so the links would land at
   three different heights and read as ragged. The last line of each column
   is pushed to a shared baseline instead. */
.rule p:last-child{margin-top:auto;padding-top:15px}
.rule-cite{margin:0 0 9px;font-size:var(--fs-xs,12px);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}
.rule h3{font-family:var(--fd);font-weight:600;font-size:clamp(21px,1.7vw,26px);
  line-height:1.22;margin:0 0 11px;color:var(--text-primary)}
.rule p{max-width:none}
.rule p + p{margin-top:15px}
@media (max-width:980px){
  .rules{grid-template-columns:1fr;gap:32px}
  .rule h3{font-size:22px}
}

/* The routing table is two columns of short link text, so it has no reason to
   stop at the 1040px a prose table stops at. */
/* beats .sec > .wrap > .tablecard, which caps every table at 1040px */
.sec > .wrap > .tablecard.wide{max-width:none}

/* Two-column tables on a phone. Nothing on the site handled this, so every one
   of them - 240 across the build - squeezed into two slivers about 127px and
   175px wide at 375px, and a fourteen-row table ran 1,914px tall. Stacking the
   pair puts the situation on one line and the answer under it.

   :has() picks out the two-column tables and leaves the two four-column ones on
   /paul-shalhoub/ alone, where stacking would break the header relationship. A
   browser without :has() simply keeps today's behavior. */
@media (max-width:600px){
  .tablecard:not(:has(td:nth-child(3))) table,
  .tablecard:not(:has(td:nth-child(3))) tbody,
  .tablecard:not(:has(td:nth-child(3))) tr,
  .tablecard:not(:has(td:nth-child(3))) td{display:block;width:auto}
  .tablecard:not(:has(td:nth-child(3))) tr{padding:15px 2px;
    border-bottom:1px solid var(--border)}
  .tablecard:not(:has(td:nth-child(3))) tr:last-child{border-bottom:0}
  .tablecard:not(:has(td:nth-child(3))) td{border:0;padding:0}
  .tablecard:not(:has(td:nth-child(3))) td:first-child{margin-bottom:6px}
}

/* The identity paragraph: who the firm is, who it serves, what it covers and what
   makes Paul different, directly under the hero of every page that is a reason to
   hire him. It has to read as the page speaking in its own voice, not as a banner,
   so it is set a little larger than body copy with a single rule at its edge. */
.identity{margin:0 0 var(--s8);padding:2px 0 2px var(--s6);max-width:68ch;
 border-left:3px solid var(--surface-strong);font-size:var(--fs-lg);line-height:1.6;
 color:var(--text-primary)}
@media(max-width:600px){.identity{font-size:var(--fs-md);padding-left:var(--s5)}}

/* contact form: honeypot field, and the answer shown under the button */
.shform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.shform .formstatus{margin:var(--s4) 0 0;font-size:var(--fs-md);line-height:1.5;outline:0}
.shform .formstatus:empty{display:none}
.shform .formstatus.is-ok{padding:var(--s4);border-left:3px solid var(--surface-strong)}
.shform .formstatus.is-bad{padding:var(--s4);border-left:3px solid #b3261e}

/* legal links in the footer, above the notice */
.site-footer .flinks{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px}
.site-footer .flinks a{color:inherit;text-decoration:underline;text-underline-offset:3px}