:root{--navy:#0E1E3A;--navy-deep:#0A1628;--navy-soft:#16305C;--gold:#C7A458;--gold-soft:#E4CB8E;
--paper:#F7F4EE;--ink:#1B2432;--muted:#5A6578;--line:#E6E1D6;--white:#fff;
--serif:"Playfair Display",Georgia,"Times New Roman",serif;--sans:"Lato",-apple-system,"Segoe UI",sans-serif;
--maxw:1140px;--maxw-wide:1480px;--r:14px;--shadow:0 10px 30px rgba(10,22,40,.10);
/* channel-only companions to the hex tokens above, so gradients can vary
   alpha without hardcoding a second copy of the colour (no new hues) */
--navy-rgb:14,30,58;--navy-deep-rgb:10,22,40;--navy-soft-rgb:22,48,92;--gold-rgb:199,164,88;
--ease:cubic-bezier(.22,.61,.36,1);
/* height of the fixed .mobile-bar. Anything that must not be covered by it
   reserves this much: body (document end) and the hero (its own bottom). */
--mobile-bar-h:56px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--sans);color:var(--ink);background:var(--white);line-height:1.7;font-size:17px}
::selection{background:var(--gold);color:var(--navy-deep)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-soft);text-decoration:none;transition:color .15s var(--ease)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.wrap-wide{max-width:var(--maxw-wide);margin:0 auto;padding:0 22px}
@media(min-width:1000px){.wrap-wide{padding:0 40px}}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:600;line-height:1.16;color:var(--navy);letter-spacing:.005em;text-wrap:balance}
h1{font-size:clamp(2.5rem,6vw,4.6rem)}
h2{font-size:clamp(1.8rem,3.8vw,2.9rem)}
h3{font-size:1.28rem}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* ---- motion system ---- */
@media(prefers-reduced-motion:no-preference){
 .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
 .js .reveal.in{opacity:1;transform:none}
 .hero .kicker,.hero h1,.hero .lead,.hero .hero-ctas,.hero .chips,
 .page-hero .kicker,.page-hero h1,.page-hero .lead,.page-hero .hero-ctas{animation:rise .85s var(--ease) both}
 .hero h1,.page-hero h1{animation-delay:.12s}
 .hero .lead,.page-hero .lead{animation-delay:.26s}
 .hero .hero-ctas,.page-hero .hero-ctas{animation-delay:.4s}
 .hero .chips{animation-delay:.52s}
 /* the cutout is the LCP element — deliberately not animated */
 .hero-badge{animation:rise .8s var(--ease) both .66s}
 @keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
 @keyframes hdrDrop{from{transform:translateY(-100%)}to{transform:none}}
}
/* marquee ticker */
.ticker{background:var(--navy-deep);border-block:1px solid rgba(228,203,142,.18);overflow:hidden;padding:.95em 0}
.ticker-track{display:flex;gap:0;width:max-content;animation:tick 38s linear infinite}
.ticker span{font-family:var(--serif);font-style:italic;color:var(--gold-soft);font-size:1.02rem;white-space:nowrap;padding:0 1.4em;display:flex;align-items:center;gap:2.8em}
.ticker i{font-style:normal;color:rgba(228,203,142,.45);font-size:.7em}
@keyframes tick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}
/* stats band */
.stats{background:var(--paper);border-block:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-block:64px}
.stat{text-align:center}
.stat .num{font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,5vw,4rem);color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.stat .num em{font-style:normal;color:var(--gold)}
.stat .lbl{margin-top:.55em;font-size:.86rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media(max-width:1000px){.stats .wrap{grid-template-columns:repeat(2,1fr);gap:36px 20px;padding-block:48px}}
.kicker{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem}
.lead{font-size:clamp(1.12rem,1.6vw,1.3rem);color:var(--muted);max-width:44em;line-height:1.75}
section{padding:clamp(76px,9vw,118px) 0}
.center{text-align:center}.center .lead{margin-inline:auto}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55em;font-weight:700;font-size:1.02rem;letter-spacing:.02em;padding:1.02em 1.85em;border-radius:10px;transition:all .18s var(--ease);cursor:pointer;border:2px solid transparent}
.btn-gold{background:var(--gold);color:var(--navy-deep)}
.btn-gold:hover{background:var(--gold-soft);transform:translateY(-1px)}
.btn-outline{border-color:rgba(255,255,255,.55);color:#fff}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-soft)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-soft)}
.btn-line{border-color:var(--navy);color:var(--navy)}
/* Third hero CTA on /probate/ only (FLAT_FEE_PLACEMENT="hero-cta"). Gold
   outline so it reads as a price flag beside the solid gold Call button
   instead of competing with it; .btn-line is navy-on-navy and invisible here. */
.btn-gold-line{border-color:rgba(var(--gold-rgb),.6);color:var(--gold-soft)}
.btn-gold-line:hover{border-color:var(--gold);background:rgba(var(--gold-rgb),.10)}
.btn-line:hover{background:var(--navy);color:#fff}
/* topbar */
.topbar{background:var(--navy-deep);color:#C8D2E4;font-size:.83rem;padding:.5em 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:1em;align-items:center;max-width:1400px;padding:0 34px}
.topbar a{color:var(--gold-soft);font-weight:700}
.topbar .tb-hours{opacity:.85}
/* header */
header.site{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(10,22,40,.06)}
/* Transparent-over-hero variant. Only the homepage wraps the bar + nav in
   .hdr-stack.over; every other page emits the markup bare and keeps the solid
   sticky header untouched. The wrapper is absolute (not sticky) precisely
   because a sticky child cannot escape a short wrapper — the scrolled state
   switches to fixed instead. */
.hdr-stack.over{position:absolute;top:0;left:0;right:0;z-index:60}
.hdr-stack.over:not(.scrolled) .topbar{background:transparent;color:#D3DCEA;border-bottom:1px solid rgba(var(--gold-rgb),.16)}
.hdr-stack.over:not(.scrolled) .topbar a{color:var(--gold-soft)}
.hdr-stack.over header.site{position:static;background:transparent;border-bottom-color:transparent;box-shadow:none}
.hdr-stack.over:not(.scrolled) .logo .l1{color:#fff}
.hdr-stack.over:not(.scrolled) .logo .l2{color:var(--gold-soft)}
.hdr-stack.over:not(.scrolled) nav.main a.top{color:#fff}
.hdr-stack.over:not(.scrolled) nav.main a.top:hover{color:#fff;background:rgba(255,255,255,.10)}
.hdr-stack.over:not(.scrolled) .burger span{background:#fff}
.hdr-stack.over.scrolled{position:fixed;top:0;animation:hdrDrop .3s var(--ease) both}
/* the bar carries the email address, which nothing else in the fixed header
   duplicates — so it stays, reverting to the same solid navy every other
   page already uses */
.hdr-stack.over.scrolled header.site{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(10,22,40,.05)}
/* --- homepage nav sizing. Scoped to .over so the 148 other pages are
   untouched: their h1 is smaller and the stock nav is proportionate there.
   The row is widened to the hero container so the logo lands on the
   headline's left edge and the CTA on the hero's right edge, then the nav is
   pulled up against the logo and the slack moved to the CTA side, which
   removes the dead gap after the wordmark.

   The two-line sublabels are hidden here; they stay on every other page. The
   alternative — keeping them, sized up — was measured and rejected: that row
   needs 1451px of the 1360px available at 1440, so it fits only by giving up
   both the wider item spacing and the wordmark tagline, and it cannot hold at
   all below ~1185px. --- */
.hdr-stack.over .nav-row{max-width:var(--maxw-wide);padding-left:40px;padding-right:40px;
 justify-content:flex-start;gap:0}
.hdr-stack.over nav.main{margin-left:30px;margin-right:auto;gap:clamp(.45em,1.15vw,.82em)}
.hdr-stack.over nav.main a.top{font-size:1.09rem;font-weight:600;padding:.62em .64em}
@media(max-width:1290px){
 .hdr-stack.over .nav-row{padding-left:28px;padding-right:28px}
 .hdr-stack.over nav.main{margin-left:22px}
 .hdr-stack.over nav.main a.top{font-size:1.02rem;padding-left:.55em;padding-right:.55em}
}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:1.2em;padding:.75em 34px;max-width:1400px}
.logo{display:flex;flex-direction:column;line-height:1.12;flex:none}
.logo .l1{font-family:var(--serif);font-weight:700;font-size:1.28rem;color:var(--navy);letter-spacing:.02em;white-space:nowrap}
.logo .l2{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
/* NOTE: of this block only .nav-row{gap} takes effect. The base rules for
   nav.main a.top and .nav-cta are declared BELOW it at equal specificity, so
   source order beats it and its padding/font-size have never applied. Left as
   found rather than moved: activating it would resize the nav at every width
   under 1480, well beyond the overflow this branch fixes. The tightening that
   is actually needed is declared after the base rules instead — see the
   max-width:1480px block further down. */
@media(max-width:1480px){nav.main a.top{padding:.55em .6em;font-size:.9rem}.nav-cta{padding:.75em 1.05em;font-size:.9rem}.nav-row{gap:.8em}}
/* The tagline now drops at 1370 rather than 1290. 1290 was already clean for
   exactly this reason — hiding it frees ~137px of row — while 1291-1369 sat
   in a band where the homepage row overflowed and the gold Call button ran
   off-screen by up to 79px. Of the three levers (burger breakpoint, item
   spacing, tagline) this is the cheapest: one number, and it costs a
   secondary brand line across an 80px band rather than the whole desktop nav
   or the nav's breathing room. */
@media(max-width:1370px){.logo .l2{display:none}}
/* Same lever again, one band higher, because "Uncontested Probate" is 90px
   wider than "Probate" was: with the tagline showing, the homepage row now
   overflows from 1371 to 1415 and the gold Call button sits up to 45px
   off-screen. First clean width with the tagline is 1416, so this hides it
   through 1430 for ~15px of margin rather than 1px. Scoped to .hdr-stack.over
   — only the homepage carries the wide transparent nav, and inner pages
   measure 649px with 34px of headroom, so they keep the tagline from 1371
   up exactly as before. */
@media(max-width:1430px){.hdr-stack.over .logo .l2{display:none}}
@media(max-width:1290px){.nav-cta{padding:.7em .95em;font-size:.86rem}}
nav.main{display:flex;align-items:center;gap:.2em}
nav.main>div{position:relative}
/* nowrap is global, not homepage-only: under flex compression "Legal Answers"
   used to break to two lines from 1300-1440 and again 1210-1260. The
   max-width cap is a backstop for a long label, not a layout device — every
   item is a single short word or pair now that the sublabels are gone. */
nav.main a.top{display:block;padding:.55em .8em;font-weight:700;font-size:.94rem;color:var(--ink);border-radius:8px;max-width:176px;white-space:nowrap;transition:background .18s var(--ease),color .18s var(--ease)}
nav.main a.top:hover{color:var(--navy-soft);background:var(--paper)}
.nav-cta{white-space:nowrap;padding:.7em 1.2em;font-size:.94rem}
/* Declared here, after the base rules, because an identical selector inside
   the earlier max-width:1480px block loses on source order. Making nowrap
   global widened the inner-page nav 788px -> 810px, which pushed the gold
   Call button past the viewport at 1380 (7px) and 1210-1230 (up to 23px);
   .45em recovers ~27px across the six items and clears both bands. Padding
   only — font sizes are left alone. The homepage is untouched: its
   .hdr-stack.over rule is more specific and keeps its own padding. */
@media(max-width:1480px){nav.main a.top{padding-left:.45em;padding-right:.45em}}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.burger span{display:block;height:2px;background:var(--navy);margin:5px 8px;transition:.2s}
/* hero
   Layer order is load-bearing: gradient (background) -> grain (::before, z0)
   -> cutout (z1) -> copy (z2). The suit measures rgb(16,33,61) at its darkest,
   which is within 3 luminance points of --navy — on a flat fill his lower body
   disappears. The light pool sits upper-right, matching the photo's own key
   light (right shoulder luminance 85 vs left 48), and deepens to lower left.

   The first layer DARKENS behind his lower body rather than lifting it. That
   looks backwards but is the only thing that works: his suit runs from L*~10
   (lower left) to L*~55 (lit right shoulder), so any background raised into
   the middle of that range must cross his own value somewhere and the
   silhouette dissolves there. Measured along 125 points of his outline,
   lifting the background behind him (pool centred on the full silhouette)
   gave 5-9 points under dL*4 and a worst case of 0.34; keeping the pool
   upper-right and grounding the lower body gives 1 point under dL*4 and a
   worst case of 2.87. The drop-shadow helps for the same reason — it deepens
   the background exactly where his darkest edge meets it. */
.hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:0;
 background:
  radial-gradient(40% 44% at 82% 80%,rgba(var(--navy-deep-rgb),.55),rgba(var(--navy-deep-rgb),0) 72%),
  radial-gradient(135% 108% at 50% 40%,rgba(var(--navy-deep-rgb),0) 54%,rgba(var(--navy-deep-rgb),.5) 100%),
  radial-gradient(54% 46% at 76% 8%,rgba(var(--gold-rgb),.11),rgba(var(--gold-rgb),0) 72%),
  radial-gradient(80% 68% at 73% 24%,rgba(var(--navy-soft-rgb),.9),rgba(var(--navy-soft-rgb),0) 70%),
  linear-gradient(215deg,var(--navy) 0%,var(--navy) 40%,var(--navy-deep) 100%)}
/* grain — dark navy gradients band badly on 8-bit panels; this hides it */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.055;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 background-size:160px 160px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:end}
/* padding-top clears the 123px absolute header stack + breathing room.
   The headline is capped by the fold rule, not by taste: at 1440x900 the
   copy runs to four lines, and 5.6vw is the largest size that still leaves
   the CTAs and the first chip row above 900px (29px slack). 5.8vw drops that
   to 16px and 6vw breaks it outright. */
.hero-copy{position:relative;z-index:2;padding:152px 0 92px}
.hero h1{color:#fff;margin:.22em 0 .3em;font-size:clamp(2.5rem,5.6vw,5.5rem);line-height:1.12}
@media(min-width:900px){.hero h1{line-height:1.06}}
@media(min-width:1300px){.hero h1{line-height:1.02}}
.hero h1 em{font-style:normal;color:var(--gold-soft)}
.hero .lead{color:#C8D2E4;font-size:clamp(1.15rem,1.7vw,1.34rem);max-width:65ch}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin:1.7em 0 1.3em}
.hero .hero-ctas{margin:1.45em 0 0}
/* Elevation on the hero Call button only. The white rating card below it
   carries a drop shadow and floats; the CTA was flat on the field, which
   left the brightest element in the hero out-ranking the primary action.
   Scoped to .hero — that class is the homepage hero alone, and the 229
   other .btn-gold instances across 149 pages are deliberately untouched. */
.hero .btn-gold{box-shadow:0 10px 30px rgba(199,164,88,.35)}
/* Card and chips are different visual weights, so they get a deliberate 32px
   separation rather than the chip-to-chip .6em — they read as two groups on
   one line instead of one uneven row. Homepage only: .hero-proof exists
   nowhere else. The max-width:767px override below still applies. */
.hero-proof{display:flex;align-items:center;flex-wrap:wrap;gap:32px;margin-top:1.05em}
.chips{display:flex;flex-wrap:wrap;gap:.6em;padding:0;list-style:none;font-size:.86rem}
/* Border alpha is .55, not the .4 it started at: at .4 the composited border
   measured 2.73:1 where the chips actually sit and 2.52:1 against the light
   end of the town hero gradient (--navy-soft), both under the 3:1 floor in
   WCAG 1.4.11. Chip position moves with viewport, so the alpha is chosen to
   clear 3:1 across the whole gradient range, not just at one measured spot:
   .55 gives 3.52:1 worst case and ~4.0:1 where the chips sit. Nothing else
   about the chip changes — same colour, padding, radius and border width. */
.chips li{border:1px solid rgba(228,203,142,.55);color:var(--gold-soft);padding:.35em .85em;border-radius:99px}
/* cutout — no card, no radius, no fill. Bottom-anchored, cropped by the
   section edge. Shadow must be drop-shadow (follows alpha), not box-shadow. */
.hero-figure{position:relative;z-index:1;align-self:end;justify-self:end;line-height:0}
/* cancel the wrap gutter so he is cropped by the section edge, not inset by it */
@media(min-width:1000px){.hero-figure{margin-right:-40px}}
.hero-figure img{height:min(775px,54vw);width:auto;max-width:none;display:block;
 filter:drop-shadow(-16px 24px 40px rgba(4,10,20,.5))}
.hero-badge{position:static;display:inline-flex;gap:.5em;align-items:center;background:#fff;color:var(--navy);border-radius:12px;padding:.6em .95em;font-size:.8rem;font-weight:700;box-shadow:var(--shadow)}
.hero-badge b{color:var(--gold);font-size:1rem}
/* pillars */
.pillars{background:var(--white)}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.pillar{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--r);padding:40px 34px;box-shadow:0 4px 18px rgba(10,22,40,.05);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pillar{position:relative;overflow:hidden}
.pillar::before{content:attr(data-n);position:absolute;top:-6px;right:14px;font-family:var(--serif);font-weight:700;font-size:5.4rem;color:var(--navy);opacity:.055;line-height:1;pointer-events:none}
.pillar h3{font-size:1.8rem;margin-bottom:.2em}
.pillar .tag{font-size:.8rem;color:var(--muted);margin-bottom:1em;display:block}
.pillar a.all{font-weight:700;color:var(--navy-soft);font-size:.95rem;margin-top:auto}
.pillar a.all::after{content:" →"}
/* The cards no longer carry link lists, so their natural heights diverge by a
   lot. Column + margin-top:auto on the link keeps the three CTAs on one line
   across the row instead of floating at three different heights. */
.pillar{display:flex;flex-direction:column}
/* Card 01 is the primary: the flat fee is the offer the homepage leads with.
   Same .pillar component inverted — navy fill, heavier gold rule, the price
   set in the display serif — rather than a second card component. The "*" is
   a footnote marker only; .fn is where it resolves. */
.pillar.lead-card{background:var(--navy);border-color:var(--navy);border-top-width:5px;box-shadow:0 10px 30px rgba(10,22,40,.20)}
.pillar.lead-card:hover{box-shadow:0 16px 40px rgba(10,22,40,.28)}
.pillar.lead-card::before{color:#fff;opacity:.10}
.pillar.lead-card h3{color:#fff}
.pillar.lead-card .tag{font-family:var(--serif);font-size:1.6rem;color:var(--gold-soft);margin-bottom:.25em}
.pillar.lead-card .fn{font-size:.8rem;color:rgba(255,255,255,.66);margin-bottom:1.2em}
.pillar.lead-card a.all{color:var(--gold-soft)}
/* Flat-fee strip under the /probate/ hero (FLAT_FEE_PLACEMENT="strip").
   Same shape as the homepage strip that used to sit between the pillars and
   the narrowed-practice band, tightened so it clears the fold on mobile. */
.fee-strip{background:var(--paper);border-block:1px solid var(--line);padding:24px 0}
.fee-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fee-strip h2{font-size:1.7rem;margin:.12em 0 .18em;color:var(--navy)}
.fee-strip p{color:var(--muted);margin:0;font-size:.88rem}
.fee-strip .btn{flex:none}
/* Phones only. The sticky call bar owns the bottom 56px, so at 390x844 the
   strip has to finish by y=788 or its button renders behind the bar. Tighter
   padding, heading and button height buy back the ~50px that puts "Click for
   details" fully in view. Desktop keeps the fuller band. */
@media(max-width:767px){
 .fee-strip{padding:10px 0}
 .fee-strip .wrap{gap:8px}
 .fee-strip h2{font-size:1.2rem;margin:.05em 0 .1em}
 .fee-strip p{font-size:.78rem}
 .fee-strip .btn{padding:.7em 1.3em;font-size:.92rem}
}
/* alternating */
.band{background:var(--paper)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split .photo img{border-radius:var(--r);box-shadow:var(--shadow)}
blockquote.pull{font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1.5;color:var(--navy);border-left:3px solid var(--gold);padding-left:1.2em;margin:1.4em 0}
/* rating strip */
.rating-strip{display:flex;align-items:center;justify-content:center;gap:1.3em;flex-wrap:wrap;margin-top:1.5em}
.rating-strip .score{font-family:var(--serif);font-size:2.5rem;color:var(--navy);font-weight:700;line-height:1}
.rating-strip .detail{text-align:left}
.rating-strip .detail .stars{font-size:1.1rem;letter-spacing:.16em}
.rating-strip .detail .count{font-size:.9rem;color:var(--muted)}
.rating-strip .detail .count b{color:var(--ink)}
.stars{color:var(--gold);letter-spacing:.16em}
.hero-badge small{display:block;color:var(--muted);font-weight:400;font-size:.72rem;margin-top:.15em}
.hero-badge .stars{font-size:.9rem}
/* testimonials */
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.t-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px;box-shadow:0 4px 18px rgba(10,22,40,.05);display:flex;flex-direction:column}
.t-card .stars{color:var(--gold);letter-spacing:.15em;font-size:.95rem;margin-bottom:.8em}
.t-card p{font-family:var(--serif);font-style:italic;font-size:1.06rem;line-height:1.65;flex:1;color:#2A3342}
.t-card footer{margin-top:1.2em;font-size:.86rem;color:var(--muted)}
.t-card footer b{color:var(--ink);display:block;font-size:.92rem}
/* faq teaser + article lists */
.q-list{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.q-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:1em;font-weight:700;color:var(--navy);transition:all .18s var(--ease)}
.q-item:hover{border-color:var(--gold);box-shadow:0 4px 18px rgba(10,22,40,.07);transform:translateX(2px)}
.q-item span.arr{color:var(--gold);font-size:1.2rem}
/* local */
.local-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.nap{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:0 4px 18px rgba(10,22,40,.05)}
.nap dt{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-top:1.1em}
.nap dt:first-child{margin-top:0}
.nap dd{font-size:1rem}
.nap dd a{font-weight:700}
/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--navy-deep),var(--navy-soft));color:#fff;text-align:center;padding:76px 0}
.cta-band h2{color:#fff}
.cta-band p{color:#C8D2E4;max-width:44em;margin:.8em auto 1.6em}
/* breadcrumbs & article */
.crumbs{font-size:.82rem;color:var(--muted);padding:18px 0 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--navy-soft)}
.article-head{padding:26px 0 8px}
.article-head h1{max-width:20em}
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1em;margin:1.2em 0 0;font-size:.86rem;color:var(--muted)}
.meta-row .chip{background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:.3em .9em;font-weight:700;color:var(--navy-soft)}
.byline{display:flex;align-items:center;gap:.6em}
.byline img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.byline b{color:var(--ink)}
article.body{max-width:760px;padding:8px 0 40px}
article.body>section{padding:0}
article.body p,article.body ul,article.body ol{margin:0 0 1.15em;color:#2A3342}
article.body ul,article.body ol{padding-left:1.3em}
article.body li{margin-bottom:.45em}
article.body h2{margin:1.6em 0 .6em;font-size:1.5rem}
.direct{font-size:1.12rem;background:var(--paper);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;padding:1.2em 1.4em;margin:1.4em 0 1.8em}
.direct p{margin:0;color:var(--ink)}
/* The two flat fees are the primary content of the page that carries them,
   so the figure gets serif display weight while the qualifying clause stays
   body copy. Existing tokens only; no new colours. */
.fee-list{list-style:none;margin:1.1em 0;display:grid;gap:.6em}
.fee-list li{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;padding:.8em 1.1em;color:var(--ink)}
.fee-list strong{font-family:var(--serif);font-size:1.45rem;color:var(--navy);letter-spacing:.005em}
.takeaways{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--r);padding:26px 30px;margin:2.2em 0;box-shadow:0 4px 18px rgba(10,22,40,.05)}
.takeaways h2{font-size:1.15rem;margin:0 0 .7em}
.takeaways ul{margin:0;padding-left:1.2em}
.takeaways li{margin:.4em 0}
/* video facade */
.video-facade{position:relative;aspect-ratio:16/9;background:linear-gradient(150deg,var(--navy-deep),var(--navy-soft));border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.8em;cursor:pointer;margin:1.6em 0 2em;overflow:hidden;border:1px solid var(--line)}
.video-facade:hover .play{transform:scale(1.08)}
.video-facade .play{width:76px;height:76px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;transition:.2s;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.video-facade .play::after{content:"";border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent var(--navy-deep);margin-left:6px}
.video-facade span{color:#C8D2E4;font-size:.9rem;font-weight:700;letter-spacing:.06em}
.video-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* author box */
.author-box{display:grid;grid-template-columns:96px 1fr;gap:24px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r);padding:28px;margin:2.6em 0 1.4em}
/* the avatar is wrapped in <picture> so the webp tier is offered; <picture>
   is the grid item now, so it gets the track width and the <img> fills it */
.author-box picture{display:block;width:96px;height:96px}
.author-box img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 14px rgba(10,22,40,.15)}
.author-box .ab-kicker{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:.25em}
.author-box h3{margin:0 0 .35em;font-size:1.2rem}
.author-box p{font-size:.93rem;color:#2A3342;margin:0 0 .7em}
.author-box .ab-links{font-size:.87rem;font-weight:700;display:flex;flex-wrap:wrap;gap:.4em 1.2em}
.author-box .ab-links a{color:var(--navy-soft);border-bottom:1px solid var(--gold);padding-bottom:1px}
.disclaimer{font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1.2em;margin-top:1em}
/* content tables */
article.body table,.content-main table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.96rem;box-shadow:0 4px 18px rgba(10,22,40,.05);border-radius:12px;overflow:hidden}
article.body th,.content-main th{background:var(--navy);color:#fff;text-align:left;padding:.8em 1em;font-family:var(--sans);font-weight:700;font-size:.9rem}
article.body td,.content-main td{padding:.75em 1em;border-bottom:1px solid var(--line)}
article.body tbody tr:nth-child(even),.content-main tbody tr:nth-child(even){background:var(--paper)}
.table-scroll{overflow-x:auto}
/* FAQ accordion */
.faq-wrap{margin:2.2em 0}
.faq-item{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;background:#fff;overflow:hidden;box-shadow:0 2px 10px rgba(10,22,40,.04)}
.faq-item summary{cursor:pointer;padding:1.05em 1.3em;font-family:var(--serif);font-weight:700;color:var(--navy);font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--gold);font-size:1.5rem;font-weight:400;flex:none;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{background:var(--paper)}
.faq-item .faq-a{padding:0 1.3em 1.15em;color:#2A3342}
.faq-item .faq-a p{margin:0}
/* related */
.related{background:var(--paper);padding:56px 0 72px}
.rel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
/* practice pages */
.page-hero{background:linear-gradient(160deg,var(--navy-deep),var(--navy) 60%,var(--navy-soft));color:#fff;padding:clamp(72px,9vw,116px) 0}
.page-hero h1{color:#fff;max-width:16em;font-size:clamp(2.2rem,4.8vw,3.6rem)}
.page-hero .lead{color:#C8D2E4}
.page-hero .hero-ctas{margin:1.6em 0 0}
.content-grid{display:grid;grid-template-columns:1fr 340px;gap:56px;padding:56px 0;align-items:start}
.content-main h2{margin:1.5em 0 .6em}
.content-main p,.content-main ul{margin-bottom:1.15em;color:#2A3342}
.content-main ul{padding-left:1.3em}
.rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:22px}
.rail-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:0 4px 18px rgba(10,22,40,.05)}
.rail-card.gold{background:linear-gradient(150deg,var(--navy-deep),var(--navy-soft));color:#fff;border:0}
.rail-card.gold h3{color:#fff}
.rail-card.gold p{color:#C8D2E4;font-size:.92rem}
.rail-card h3{margin-bottom:.5em}
.rail-card ul{list-style:none;font-size:.92rem}
.rail-card li{padding:.4em 0;border-bottom:1px dashed var(--line)}
.rail-card li:last-child{border:0}
.rail-card .btn{width:100%;justify-content:center;margin-top:1em}
/* footer */
footer.site{background:var(--navy-deep);color:#AEB9CC;font-size:.92rem;padding:64px 0 0}
.f-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:44px}
footer.site h4{color:#fff;font-family:var(--serif);font-size:1.05rem;margin-bottom:1em}
footer.site a{color:#AEB9CC;display:block;padding:.22em 0}
footer.site a:hover{color:var(--gold-soft)}
.f-brand .l1{font-family:var(--serif);color:#fff;font-size:1.25rem;font-weight:700}
.f-brand .l2{color:var(--gold);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1em}
.f-legal{border-top:1px solid rgba(255,255,255,.12);padding:1.4em 0;font-size:.78rem;color:#7E8BA3}
.f-legal .wrap{display:flex;flex-wrap:wrap;gap:.5em 2em;justify-content:space-between}
/* contact form */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px;box-shadow:var(--shadow)}
.form-card h2{margin:0 0 .3em}
.contact-form{display:grid;gap:16px;margin-top:1.4em}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:.35em}
.field label{font-size:.82rem;font-weight:700;color:var(--navy)}
.field label .req{color:#B4472F}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:1rem;padding:.7em .85em;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(199,164,88,.18)}
.field textarea{min-height:130px;resize:vertical}
.consent{display:flex;gap:.6em;align-items:flex-start;font-size:.85rem;color:var(--muted)}
.consent input{margin-top:.25em;flex:none}
.form-hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-note{font-size:.82rem;color:var(--muted);margin-top:.4em}
.contact-form button{width:100%;justify-content:center;font-size:1.05rem;padding:1em}
/* review buttons */
.review-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn-review-google{background:#fff;color:#3c4043;border:1px solid var(--line);box-shadow:0 3px 12px rgba(10,22,40,.08)}
.btn-review-google:hover{box-shadow:0 6px 18px rgba(10,22,40,.14);transform:translateY(-1px)}
.btn-review-google .g-mark{font-weight:700;font-family:var(--serif);background:conic-gradient(from -45deg,#EA4335 0 25%,#FBBC05 0 50%,#34A853 0 75%,#4285F4 0);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.15rem;line-height:1}
.btn-review-yelp{background:#d32323;color:#fff}
.btn-review-yelp:hover{background:#af1e1e;transform:translateY(-1px)}
/* sticky mobile bar */
.mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:80;background:var(--navy-deep);box-shadow:0 -6px 22px rgba(0,0,0,.3);grid-template-columns:1fr 1fr}
.mobile-bar a{display:flex;align-items:center;justify-content:center;gap:.5em;padding:1em;font-weight:700;font-size:.95rem;color:#fff}
.mobile-bar a.call{background:var(--gold);color:var(--navy-deep)}
/* forms-ish contact */
.hours-table{width:100%;border-collapse:collapse;font-size:.95rem}
.hours-table td{padding:.5em 0;border-bottom:1px dashed var(--line)}
.hours-table td:last-child{text-align:right;font-weight:700;color:var(--navy)}
.map-frame{border:0;width:100%;height:340px;border-radius:var(--r);box-shadow:var(--shadow)}
/* responsive */
/* The nav collapses to the burger at 1200px rather than 1000px. That number
   was set when the three pillar items carried sublabels and needed roughly
   760px of row; without them the row is 578px on the homepage and 551px on
   inner pages, and it was measured fitting with zero overflow at every width
   from 1000 to 1200 on both. So 1200 is now conservative, not required —
   left as found because lowering it changes the header on every page across
   a 200px band, which is a separate decision from removing the menus. The
   Call button stays visible down to 1000px, where the fixed mobile bar takes
   over, so there is never a width without a one-tap CTA. */
@media(max-width:1200px){
 nav.main{display:none;position:fixed;inset:64px 0 0 0;background:#fff;flex-direction:column;align-items:stretch;padding:1em 1.4em;overflow:auto;gap:0;z-index:90}
 /* the open panel is a white sheet — links go dark again inside it */
 .hdr-stack.over:not(.scrolled) nav.main{inset:100px 0 0 0}
 .hdr-stack.over:not(.scrolled) nav.main a.top{color:var(--ink)}
 .hdr-stack.over:not(.scrolled) nav.main a.top:hover{color:var(--navy-soft);background:var(--paper)}
 nav.main.open{display:flex}
 nav.main a.top{font-size:1.1rem;padding:.9em .4em;border-bottom:1px solid var(--line);border-radius:0;max-width:none}
 .burger{display:block}
}
@media(max-width:1000px){
 .hero-grid,.split,.local-grid,.content-grid{grid-template-columns:1fr;gap:40px}
 .pillar-grid,.t-grid{grid-template-columns:1fr;gap:18px}
 .q-list,.rel-grid{grid-template-columns:1fr}
 .f-grid{grid-template-columns:1fr 1fr;gap:30px}
 .rail{position:static}
 .hero-grid{gap:0;min-height:0}
 .hero-copy{padding:124px 0 0}
 .hero-figure{justify-self:center;margin-top:32px}
 .hero-figure img{height:clamp(330px,54vw,470px)}
 .nav-cta{display:none}
 .mobile-bar{display:grid}
 body{padding-bottom:var(--mobile-bar-h)}
 .topbar .tb-hours{display:none}
 section{padding:52px 0}
}
/* --- mobile cutout: head-and-shoulders crop, faded at the cut ---
   The full figure was tried here and rejected: at ~197px wide his face stops
   reading. Cropping to the bust keeps him recognisable in the same vertical
   budget. Same asset as desktop — object-fit does the crop, so there is no
   second download, and the mask fades the cut so it does not read as a
   sticker sliced in half. */
@media(max-width:767px){
 /* The .mobile-bar is fixed to the viewport bottom, so it sat on top of whatever
    the hero ended with — at 390x844 it bisected the white rating card and hid
    both chips completely. The hero now reserves the bar's own height at its
    foot, so its last row always clears it. */
 .hero{padding-bottom:var(--mobile-bar-h)}
 .hero-copy{padding:112px 0 0}
 /* The sticky bar already carries both CTAs on this width, so
    the in-hero pair is redundant here. Desktop keeps both. */
 .hero .hero-ctas{display:none}
 .hero-proof{gap:.6em}
 /* The portrait used to be a full-width band starting at y=914 — entirely below
    an 844 fold. It is now a right-aligned head-and-shoulders crop that ends the
    hero, so it reads inside the hero rather than under it.

    Chips stay under the lead at full width, one line each; the rating card
    drops below them and the portrait is pulled up behind it, so the card
    overlaps the portrait's left edge — his shoulder, not his face, which sits
    centred in the crop well right of the card's edge.

    Kept in flow (order + a negative margin) rather than absolutely positioned:
    an absolute card is anchored to the grid box, whose height moves with the
    copy, and it drifted onto the headline. */
 .hero .hero-proof{flex-direction:column;align-items:flex-start;margin-top:.25em;gap:.35em}
 .hero .chips{order:1;gap:.4em}
 .hero .hero-badge{order:2;position:relative;z-index:2}
 .hero-figure{justify-self:end;width:52%;margin-top:-80px}
 .hero-figure img{height:290px;width:100%;max-width:none;
  object-fit:cover;object-position:50% 0%;
  filter:drop-shadow(-8px 12px 22px rgba(4,10,20,.42));
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,#000 80%,rgba(0,0,0,0) 100%)}
}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}.author-box{grid-template-columns:1fr}.author-box picture{width:80px;height:80px}.author-box img{width:80px;height:80px}}