

/* ============ tokens ============ */
:root{
  --navy:#16254A;
  --navy-mid:#1E3160;
  --ink:#0C1730;
  --sky:#9FBEE8;
  --sky-deep:#3E6BB0;
  --silver:#96A0B2;
  --steel:#5E6A80;
  --mist:#DDE3EC;
  --mist-soft:#EAEEF4;
  --paper:#FFFFFF;
  --paper-cool:#F3F6FA;

  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-ui:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:1180px;
  --gut:clamp(20px,4vw,44px);
  --r:4px;
}

/* ============ base ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:-.017em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--sky-deep);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* ============ type utilities ============ */
.display{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.03;
  letter-spacing:-.024em;
  font-size:clamp(2.55rem,6.1vw,4.35rem);
}
.h2{font-size:clamp(1.85rem,3.5vw,2.65rem);line-height:1.1}
.h3{font-size:1.2rem;line-height:1.3;letter-spacing:-.01em}
.lede{font-size:clamp(1.02rem,1.55vw,1.16rem);line-height:1.6;color:var(--steel)}
.serif-note{font-family:var(--font-display);font-size:1.22rem;line-height:1.5;font-style:italic;color:var(--navy)}
.small{font-size:.875rem;line-height:1.55}
.measure{max-width:63ch}
.measure-tight{max-width:52ch}

/* heading with rule — structural, carries the section boundary */
.sec-head{display:flex;align-items:baseline;gap:20px;margin-bottom:38px}
.sec-head .h2{flex:0 0 auto}
.sec-head .rule{flex:1 1 auto;height:1px;background:var(--mist);transform:translateY(-6px)}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:var(--r);border:1px solid transparent;
  font-weight:600;font-size:.97rem;letter-spacing:.005em;text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.btn-solid{background:var(--sky);color:var(--ink);border-color:var(--sky)}
.btn-solid:hover{background:#B8D0F0;border-color:#B8D0F0}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-mid);border-color:var(--navy-mid)}
.btn-line{background:transparent;color:var(--navy);border-color:var(--mist)}
.btn-line:hover{border-color:var(--navy)}

/* ============ header ============ */
.masthead{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--mist);
}
.masthead-in{display:flex;align-items:center;gap:28px;height:82px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:0 0 auto}
.brand-mark{width:auto;height:46px;flex:0 0 auto}
.brand-name{line-height:1.05}
.brand-name .l1{
  font-family:var(--font-display);font-size:.98rem;font-weight:500;
  letter-spacing:.13em;color:var(--navy);display:block;
}
.brand-name .l2{
  font-family:var(--font-display);font-size:.7rem;letter-spacing:.185em;
  color:var(--steel);display:block;margin-top:4px;padding-top:4px;
  border-top:1px solid var(--mist);
}
.nav{display:flex;align-items:center;gap:30px;margin-left:auto}

.masthead-tel{
  display:flex;flex-direction:column;line-height:1.15;text-decoration:none;
  padding-left:26px;border-left:1px solid var(--mist);
}
.masthead-tel .lbl{font-size:.72rem;color:var(--steel);letter-spacing:.06em}
.masthead-tel .num{font-family:var(--font-display);font-size:1.16rem;color:var(--navy);font-weight:500}
.masthead-tel:hover .num{color:var(--sky-deep)}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--mist);border-radius:var(--r);padding:10px 14px;font-weight:600;font-size:.9rem;cursor:pointer}

/* ============ hero ============ */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 85% at 12% 0%,rgba(62,107,176,.30),transparent 62%);
}
.hero-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.32fr .95fr;gap:clamp(36px,5.5vw,76px);
  padding-block:clamp(64px,8vw,104px) clamp(60px,7vw,92px);
  align-items:start;
}
.hero h1{color:#fff}
.hero-lede{margin-top:26px;color:#C3CDDE;font-size:clamp(1.04rem,1.5vw,1.18rem);line-height:1.62;max-width:50ch}
.hero-lede b{color:#fff;font-weight:500}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero-meta{
  margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.15);
  display:flex;flex-wrap:wrap;gap:10px 30px;font-size:.88rem;color:#A9B6CC;
}
.hero-meta span{display:flex;align-items:center;gap:9px}
.hero-meta svg{flex:0 0 auto;opacity:.85}

/* triage panel */
.triage{background:#fff;color:var(--ink);border-radius:var(--r);overflow:hidden}
.triage-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--mist-soft)}
.triage-tabs button{
  border:0;background:transparent;padding:17px 14px;cursor:pointer;
  font-size:.87rem;font-weight:600;line-height:1.3;color:var(--steel);
  border-bottom:2px solid transparent;transition:color .18s ease,background-color .18s ease,border-color .18s ease;
}
.triage-tabs button[aria-selected="true"]{background:#fff;color:var(--navy);border-bottom-color:var(--navy)}
.triage-body{padding:26px 26px 24px}
.triage-body h2{font-size:1.06rem;font-family:var(--font-ui);font-weight:600;letter-spacing:0;margin-bottom:16px}
.triage-list li{
  display:flex;gap:13px;padding:13px 0;border-top:1px solid var(--mist);
  font-size:.935rem;line-height:1.5;
}
.triage-list li:first-child{border-top:0;padding-top:2px}
.triage-list .n{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;
  font-size:.72rem;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:2px;
  font-family:var(--font-ui);
}
.triage-foot{
  padding:16px 26px;background:var(--paper-cool);border-top:1px solid var(--mist);
  font-size:.82rem;color:var(--steel);
}
.triage-foot a{color:var(--navy);font-weight:600}
[hidden]{display:none !important}

/* ============ credibility rail ============ */
.rail{border-bottom:1px solid var(--mist);background:var(--paper)}
.rail-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.rail-item{padding:26px 30px 26px 0;border-right:1px solid var(--mist)}
.rail-item:last-child{border-right:0}
.rail-item:not(:first-child){padding-left:30px}
.rail-item .t{font-family:var(--font-display);font-size:1.14rem;color:var(--navy);line-height:1.25;font-weight:500}
.rail-item .d{font-size:.85rem;color:var(--steel);margin-top:5px;line-height:1.45}

/* ============ generic band ============ */
.band{padding-block:clamp(62px,8vw,102px)}
.band-cool{background:var(--paper-cool)}
.band-navy{background:var(--navy);color:#fff}

/* ============ practice areas ============ */
.practice{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px)}
.pcol{background:#fff;border:1px solid var(--mist);border-top:3px solid var(--navy);border-radius:var(--r);padding:clamp(26px,3vw,38px)}
.pcol > .h2{font-size:clamp(1.55rem,2.4vw,2rem)}
.pcol p{margin-top:14px;color:var(--steel);font-size:.97rem}
.plist{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.plist a{
  display:block;padding:11px 0;border-top:1px solid var(--mist);
  text-decoration:none;font-size:.93rem;font-weight:500;
  transition:color .16s ease,padding-left .16s ease;
}
.plist a:hover{color:var(--sky-deep);padding-left:5px}
.pcol .pfoot{margin-top:26px;padding-top:20px;border-top:1px solid var(--mist);font-size:.9rem;color:var(--steel)}

/* ============ process ============ */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:s}
.step{padding:0 24px 0 0;border-top:2px solid var(--navy);padding-top:20px;position:relative}
.step + .step{padding-left:24px;border-left:1px solid var(--mist)}
.step .num{font-family:var(--font-display);font-size:1.9rem;color:var(--sky-deep);line-height:1;display:block}
.step h3{margin-top:12px;font-family:var(--font-ui);font-size:1rem;font-weight:600;letter-spacing:0}
.step p{margin-top:8px;font-size:.9rem;color:var(--steel);line-height:1.5}

/* ============ attorney ============ */
.bio{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,68px);align-items:start}
.bio-portrait{
  aspect-ratio:4/5;background:var(--navy);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.bio-portrait::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 50% 0%,rgba(159,190,232,.22),transparent 65%);
}
.bio-portrait img{width:62%;height:auto;position:relative;z-index:1}
.bio-caption{margin-top:12px;font-size:.8rem;color:var(--steel)}
.bio-body p + p{margin-top:18px}
.bio-body p{color:var(--steel)}
.bio-quote{
  margin-top:30px;padding:24px 28px;background:var(--paper-cool);
  border-left:3px solid var(--navy);border-radius:0 var(--r) var(--r) 0;
}
.cred li{padding:7px 0 7px 18px;position:relative;font-size:.93rem;color:var(--ink);line-height:1.45}
.cred li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;background:var(--sky-deep);border-radius:50%}
.bio-sig{margin-top:14px;font-size:.85rem;color:var(--steel);font-style:normal;font-family:var(--font-ui)}

/* ============ areas served ============ */
.geo{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:start}
.geo-groups{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.geo-group h3{font-family:var(--font-ui);font-size:.95rem;font-weight:600;letter-spacing:0;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.22)}
.band-navy .geo-group h3{color:#fff}
.geo-group li{padding:9px 0;font-size:.92rem;color:#BCC7D9;border-bottom:1px solid rgba(255,255,255,.09)}

/* ============ faq ============ */
.faq{max-width:840px}
.qa{border-top:1px solid var(--mist)}
.qa:last-of-type{border-bottom:1px solid var(--mist)}
.qa summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--font-display);font-size:1.16rem;line-height:1.35;color:var(--navy);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--silver);border-bottom:1.5px solid var(--silver);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s ease;
}
.qa[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.qa .a{padding:0 60px 24px 0;color:var(--steel);font-size:.97rem}
.qa .a p + p{margin-top:14px}

/* ============ contact ============ */
.contact{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:start}
.field{margin-bottom:18px}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:1px solid var(--mist);border-radius:var(--r);
  background:#fff;font:inherit;font-size:.95rem;color:var(--ink);transition:border-color .16s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sky-deep);outline:none;box-shadow:0 0 0 3px rgba(62,107,176,.14)}
.field textarea{resize:vertical;min-height:120px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.consent{display:flex;gap:11px;align-items:flex-start;margin:20px 0 24px;font-size:.83rem;color:var(--steel);line-height:1.5}
.consent input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--navy)}
.formnote{margin-top:16px;padding:14px 16px;background:#EAF1FA;border:1px solid #C9DCF3;border-radius:var(--r);font-size:.88rem;color:var(--navy)}
.office{background:#fff;border:1px solid var(--mist);border-radius:var(--r);padding:clamp(24px,3vw,34px)}
.office dl{margin:0}
.office .grp{padding:18px 0;border-top:1px solid var(--mist)}
.office .grp:first-of-type{padding-top:0;border-top:0}
.office dt{font-size:.78rem;color:var(--steel);letter-spacing:.05em;margin-bottom:6px}
.office dd{margin:0;font-size:.97rem;line-height:1.55}
.office dd a{color:var(--navy);font-weight:600;text-decoration:none}
.office dd a:hover{text-decoration:underline}
.office .big{font-family:var(--font-display);font-size:1.5rem;color:var(--navy);font-weight:500}

/* ============ closing cta ============ */
.closer{text-align:center;padding-block:clamp(60px,7vw,88px)}
.closer .h2{color:#fff;max-width:22ch;margin-inline:auto}
.closer p{margin-top:20px;color:#B4C1D6;max-width:58ch;margin-inline:auto}
.closer .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* ============ footer ============ */
.foot{background:var(--ink);color:#8B99B2;padding-block:56px 40px;font-size:.87rem}
.foot-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot h4{font-family:var(--font-ui);font-size:.82rem;font-weight:600;color:#fff;letter-spacing:.05em;margin-bottom:14px}
.foot li{padding:5px 0}
.foot a{text-decoration:none}
.foot a:hover{color:#fff}
.foot-brand .brand-name .l1{color:#fff}
.foot-brand .brand-name .l2{color:#8B99B2;border-top-color:rgba(255,255,255,.18)}
.foot-brand p{margin-top:18px;max-width:34ch;line-height:1.6}
.disclaimer{margin-top:28px;font-size:.78rem;line-height:1.65;color:#6E7C95;max-width:88ch}
.foot-bottom{margin-top:22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.78rem;color:#6E7C95}

/* ============ mobile call bar ============ */
.callbar{display:none}

/* ============ page-load sequence (one orchestrated moment) ============ */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(14px);animation:rise .72s cubic-bezier(.2,.7,.3,1) forwards}
  .d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ============ responsive ============ */
@media (max-width:1080px){
  .hero-in{grid-template-columns:1fr;gap:46px}
  .triage{max-width:560px}
  .bio{grid-template-columns:1fr}
  .bio-portrait{max-width:320px;aspect-ratio:1/1}
  .steps{grid-template-columns:repeat(2,1fr);gap:28px 0}
  .step + .step{border-left:0;padding-left:0}
  .step:nth-child(even){padding-left:24px;border-left:1px solid var(--mist)}
  .geo{grid-template-columns:1fr;gap:36px}
  .contact{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav{display:none}
  .nav.open{
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
    position:absolute;top:82px;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--mist);padding:8px var(--gut) 20px;
  }
  
  .navtoggle{display:block}
  .masthead-tel{display:none}
  .practice{grid-template-columns:1fr}
  .rail-in{grid-template-columns:1fr 1fr}
  .rail-item{border-bottom:1px solid var(--mist);padding-right:24px}
  .rail-item:nth-child(2n){border-right:0}
  .rail-item:nth-child(2n+1){padding-left:0}
  .rail-item:nth-child(n+3){border-bottom:0}
  .rail-item:nth-child(even){padding-left:24px}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:16px}
  .brand-name .l2{display:none}
  .brand-name .l1{font-size:.9rem}
  .brand-mark{height:40px}
  .sec-head{flex-direction:column;align-items:stretch;gap:14px}
  .sec-head .rule{transform:none}
  .plist{grid-template-columns:1fr}
  .geo-groups{grid-template-columns:1fr;gap:26px}
  .row2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step:nth-child(even){padding-left:0;border-left:0}
  .qa .a{padding-right:0}
  .qa summary{font-size:1.06rem}
  body{padding-bottom:72px}
  .callbar{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:120;
    border-top:1px solid rgba(255,255,255,.16);
  }
  .callbar a{
    padding:17px 10px;text-align:center;text-decoration:none;font-weight:600;font-size:.95rem;
  }
  .callbar .c1{background:var(--navy);color:#fff}
  .callbar .c2{background:var(--sky);color:var(--ink)}
  .foot{padding-bottom:24px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

.display-s{font-family:var(--font-display);font-weight:400;line-height:1.06;letter-spacing:-.022em;
  font-size:clamp(2.05rem,4.4vw,3.25rem);color:#fff;max-width:19ch}
.pagehero{background:var(--ink);color:#fff;position:relative;overflow:hidden;
  padding-block:clamp(34px,4.5vw,52px) clamp(46px,6vw,66px)}
.pagehero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 80% at 8% 0%,rgba(62,107,176,.28),transparent 60%)}
.pagehero .wrap{position:relative;z-index:1}
.ph-lede{margin-top:22px;color:#C3CDDE;font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.6;max-width:56ch}
.ph-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:.82rem;color:#93A3BC;margin-bottom:26px}
.crumbs a{text-decoration:none;color:#93A3BC;border-bottom:1px solid transparent}
.crumbs a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.crumbs .sep{opacity:.45}
.crumbs span[aria-current]{color:#fff}

.layout{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(0,.85fr);gap:clamp(34px,5vw,68px);align-items:start}
.main-col{min-width:0}
.pblock + .pblock{margin-top:clamp(38px,4.5vw,54px);padding-top:clamp(34px,4vw,46px);border-top:1px solid var(--mist)}
.pblock .h2{font-size:clamp(1.5rem,2.5vw,1.95rem);margin-bottom:18px}
.pblock p{max-width:70ch;color:var(--steel)}
.pblock p + p{margin-top:16px}
.pblock .faq{max-width:none}
ul.tick{margin-top:20px;display:grid;gap:2px}
ul.tick li{position:relative;padding:9px 0 9px 26px;font-size:.96rem;color:var(--ink);
  border-top:1px solid var(--mist);line-height:1.5}
ul.tick li::before{content:"";position:absolute;left:2px;top:17px;width:7px;height:7px;
  border-right:1.6px solid var(--sky-deep);border-bottom:1.6px solid var(--sky-deep);
  transform:rotate(45deg)}

.inline-cta{margin-top:clamp(38px,4.5vw,54px);padding:clamp(24px,3vw,32px);
  background:var(--paper-cool);border-left:3px solid var(--navy);border-radius:0 var(--r) var(--r) 0}
.inline-cta .serif-note{margin-bottom:20px;max-width:52ch}

.side{position:sticky;top:104px;display:grid;gap:18px}
.sidecard{border:1px solid var(--mist);border-radius:var(--r);padding:24px}
.sidecard-navy{background:var(--navy);border-color:var(--navy);color:#fff}
.sc-kicker{font-size:.78rem;color:var(--sky);letter-spacing:.05em}
.sc-tel{font-family:var(--font-display);font-size:1.72rem;line-height:1.2;margin-top:4px}
.sc-tel a{text-decoration:none;color:#fff}
.sc-note{font-size:.85rem;color:#B4C1D6;margin-top:10px;line-height:1.5}
.btn-block{width:100%;margin-top:18px}
.sc-h{font-family:var(--font-ui);font-size:.95rem;font-weight:600;letter-spacing:0;margin-bottom:12px}
.sc-body{font-size:.9rem;color:var(--steel);line-height:1.55}
.sc-link{display:inline-block;margin-top:14px;font-size:.88rem;font-weight:600;color:var(--navy);
  text-decoration:none;border-bottom:1px solid var(--mist)}
.sc-link:hover{border-bottom-color:var(--navy)}
.sc-list li{border-top:1px solid var(--mist)}
.sc-list li:first-child{border-top:0}
.sc-list a{display:block;padding:11px 0;font-size:.91rem;font-weight:500;text-decoration:none;
  transition:color .16s ease,padding-left .16s ease}
.sc-list a:hover{color:var(--sky-deep);padding-left:4px}

.hgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
.hcard{display:block;padding:22px;border:1px solid var(--mist);border-left:3px solid var(--navy);
  border-radius:0 var(--r) var(--r) 0;text-decoration:none;background:#fff;
  transition:border-left-color .18s ease,background-color .18s ease}
.hcard:hover{border-left-color:var(--sky-deep);background:var(--paper-cool)}
.hc-t{font-family:var(--font-display);font-size:1.14rem;font-weight:500;color:var(--navy);letter-spacing:-.01em}
.hc-d{display:block;margin-top:7px;font-size:.88rem;color:var(--steel);line-height:1.5}

.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rcard{display:block;padding:22px;background:#fff;border:1px solid var(--mist);border-radius:var(--r);
  text-decoration:none;transition:border-color .18s ease}
.rcard:hover{border-color:var(--navy)}
.rc-t{display:block;font-family:var(--font-display);font-size:1.06rem;color:var(--navy);font-weight:500}
.rc-d{display:block;margin-top:7px;font-size:.85rem;color:var(--steel);line-height:1.5}

.hublink{display:inline-block;font-weight:600;color:var(--navy);text-decoration:none;
  border-bottom:1px solid var(--mist)}
.hublink:hover{border-bottom-color:var(--navy)}
.pfoot a{color:var(--navy);font-weight:600}

.foot-top{grid-template-columns:1.25fr repeat(4,minmax(0,1fr))}
.foot-contact{margin-top:18px;display:grid;gap:6px;font-size:.85rem}
.nav a[aria-current]{border-bottom-color:var(--navy)}

.side .bio-portrait{aspect-ratio:1/1;margin-bottom:0}
.side .bio-portrait img{width:62%;height:auto;position:relative;z-index:1}
.side .bio-caption{margin:10px 0 4px}

@media (max-width:1080px){
  .layout{grid-template-columns:1fr;gap:44px}
  .side{position:static;grid-template-columns:1fr 1fr;align-items:start}
  .side .bio-portrait{max-width:280px}
  .rgrid{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:repeat(3,1fr)}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:900px){ .foot-top{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  .hgrid{grid-template-columns:1fr}
  .rgrid{grid-template-columns:1fr}
  .side{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .display-s{max-width:none}
}

/* ============ dropdown navigation ============ */
.nav{gap:4px}
.navitem{position:relative;display:flex;align-items:center}
.navitem > a{text-decoration:none;font-size:.93rem;font-weight:500;color:var(--ink);
  padding:10px 4px;border-bottom:1px solid transparent;transition:border-color .18s ease}
.navitem > a:hover,.navitem > a[aria-current]{border-bottom-color:var(--navy)}
.navcaret{background:none;border:0;padding:10px 12px 10px 6px;cursor:pointer;line-height:0;color:var(--steel)}
.chev{display:inline-block;width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.navcaret[aria-expanded="true"] .chev{transform:translateY(1px) rotate(-135deg)}
.dropdown{
  position:absolute;top:calc(100% + 14px);left:-14px;z-index:60;
  min-width:252px;background:#fff;border:1px solid var(--mist);border-top:3px solid var(--navy);
  border-radius:0 0 var(--r) var(--r);padding:10px;
  box-shadow:0 18px 40px -22px rgba(12,23,48,.45);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.dropdown.cols2{column-count:2;column-gap:6px;min-width:440px}
.navitem:hover .dropdown,.navitem:focus-within .dropdown,.dropdown.open{
  opacity:1;visibility:visible;transform:none}
.dropdown a{display:block;padding:9px 12px;border-radius:3px;text-decoration:none;
  font-size:.89rem;font-weight:500;color:var(--ink);break-inside:avoid;
  transition:background-color .14s ease,color .14s ease}
.dropdown a:hover{background:var(--paper-cool);color:var(--sky-deep)}
.dropdown .dd-all{font-family:var(--font-display);font-size:.95rem;color:var(--navy);
  border-bottom:1px solid var(--mist);border-radius:0;margin-bottom:6px;padding-bottom:11px;
  column-span:all}

/* ============ long-page topic sections ============ */
.topic{scroll-margin-top:100px;margin-top:clamp(46px,5.5vw,68px);padding-top:clamp(34px,4vw,46px);
  border-top:3px solid var(--navy)}
.topic > .h2{font-size:clamp(1.55rem,2.7vw,2.05rem)}
.topic-lede{margin-top:16px;font-family:var(--font-display);font-size:1.2rem;line-height:1.5;
  font-style:italic;color:var(--navy);max-width:56ch}
.sblock{margin-top:30px}
.sblock .h3{font-family:var(--font-ui);font-size:1.02rem;font-weight:600;letter-spacing:0;margin-bottom:12px}
.sblock p{max-width:70ch;color:var(--steel)}
.sblock p + p{margin-top:14px}
.sblock .faq{max-width:none}
.sblock .qa summary{font-size:1.04rem;padding:18px 44px 18px 0}
.topic-cta{margin-top:30px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.topic-top{font-size:.85rem;color:var(--steel);text-decoration:none;border-bottom:1px solid var(--mist)}
.topic-top:hover{color:var(--navy);border-bottom-color:var(--navy)}
.toc a{font-size:.89rem}
.hcard .hc-d{display:block;margin-top:7px;font-size:.85rem;color:var(--steel);line-height:1.5}

@media (max-width:900px){
  .nav.open{padding:6px var(--gut) 22px}
  .nav.open .navitem{flex-wrap:wrap;width:100%;border-bottom:1px solid var(--mist)}
  .nav.open .navitem > a{flex:1;padding:15px 0;border-bottom:0}
  .nav.open .navcaret{padding:15px 4px}
  .nav.open .dropdown{position:static;opacity:1;visibility:visible;transform:none;
    display:none;min-width:0;width:100%;border:0;border-top:1px solid var(--mist);
    border-radius:0;box-shadow:none;padding:6px 0 14px;column-count:1;background:var(--paper-cool)}
  .nav.open .dropdown.open{display:block}
  .nav.open .navitem:hover .dropdown:not(.open){display:none}
  .dropdown.cols2{min-width:0}
}

/* honeypot: hidden from people, visible to bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote.err{background:#FCEDED;border-color:#F0C9C9;color:#7A2626}
.formnote.ok{background:#EAF1FA;border-color:#C9DCF3;color:var(--navy)}
.btn[aria-busy="true"]{opacity:.6;pointer-events:none}

/* ============ attorney portrait (photograph) ============ */
.bio-portrait.photo{
  background:var(--mist-soft);
  aspect-ratio:4/5;
  border-radius:var(--r);
  overflow:hidden;
  display:block;
  position:relative;
}
.bio-portrait.photo::after{
  /* hairline inset edge instead of the navy wash used behind the monogram */
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid rgba(12,23,48,.10);border-radius:var(--r);background:none;
}
.bio-portrait.photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  display:block;position:static;
}
.side .bio-portrait.photo{aspect-ratio:4/5;max-width:none}
.side .bio-portrait.photo img{width:100%}
@media (max-width:1080px){
  .side .bio-portrait.photo{max-width:300px}
}

/* ============ in-article figure ============ */
.pfigure{
  margin:clamp(34px,4vw,46px) 0 clamp(46px,6vw,72px);
  padding:0;
}
.pfigure img{
  width:100%;height:auto;display:block;
  border-radius:var(--r);
  background:var(--mist-soft);
}
.pfigure figcaption{
  margin-top:14px;padding-left:16px;padding-bottom:2px;
  border-left:2px solid var(--navy);
  font-family:var(--font-display);font-size:1.04rem;line-height:1.5;
  font-style:italic;color:var(--navy);max-width:56ch;
}
@media (max-width:640px){
  .pfigure figcaption{padding-left:13px;font-size:.98rem}
}

/* ============ split block: portrait figure beside copy ============ */
.pblock-split{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(26px,3.5vw,44px);align-items:start;
}
.sfigure{margin:0;padding:0}
.sfigure img{
  width:100%;height:auto;display:block;
  border-radius:var(--r);background:var(--mist-soft);
}
.pblock-split .split-body > .h2{margin-bottom:18px}
.pblock-split .split-body p{max-width:52ch}
.pblock-split .split-body p + p{margin-top:16px}
.split-cta{margin-top:24px}
@media (max-width:760px){
  .pblock-split{grid-template-columns:1fr}
  .sfigure{max-width:340px}
}

/* ============ six-item nav: tighten before it wraps ============ */
@media (min-width:901px) and (max-width:1180px){
  .masthead-in{gap:18px}
  .nav{gap:0}
  .navitem > a{font-size:.87rem;padding-inline:3px}
  .navcaret{padding:10px 8px 10px 4px}
  .masthead-tel{padding-left:18px}
  .masthead-tel .num{font-size:1.05rem}
  .brand-name .l2{font-size:.64rem}
}

/* ============ office map ============ */
.mapwrap{
  position:relative;aspect-ratio:16/7;width:100%;
  border:1px solid var(--mist);border-radius:var(--r);overflow:hidden;
  background:var(--mist-soft);
}
.mapwrap iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  filter:saturate(.82) contrast(1.02);
  transition:filter .25s ease;
}
.mapwrap:hover iframe,.mapwrap:focus-within iframe{filter:none}
.mapbar{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;
  gap:22px 40px;margin-top:22px;
}
.mb-street{
  font-family:var(--font-display);font-size:1.25rem;font-weight:500;
  color:var(--navy);letter-spacing:-.01em;
}
.mb-note{margin-top:8px;font-size:.9rem;color:var(--steel);line-height:1.55;max-width:52ch}
.mb-links{display:flex;flex-wrap:wrap;gap:12px;flex:0 0 auto}
@media (max-width:760px){
  .mapwrap{aspect-ratio:4/3}
  .mapbar{flex-direction:column;gap:20px}
  .mb-links .btn{flex:1 1 auto;justify-content:center}
}

/* ============ spacing after an in-article figure ============ */
/* .pblock + .pblock doesn't apply when a <figure> sits between two sections,
   so the block following a figure was landing with no top spacing at all. */
.pfigure + .pblock{
  margin-top:clamp(64px,8vw,104px);
  padding-top:clamp(38px,4.5vw,52px);
  border-top:1px solid var(--mist);
}


/* tighter bio crop sits the face slightly higher in the frame */
.bio-portrait--tight img{object-position:50% 16%}

/* ===== mobile masthead ========================================================
   The rule near the top of this file hides .brand-name .l2 below 640px, which
   left the header reading "Law Office of" with the firm name missing.
   These rules restore it and size the lockup as large as the width allows.
   Sizes are fluid (vw-based) so the brand grows on a Pro Max and shrinks on an
   SE instead of being pinned to one size for every phone. ==================== */
@media (max-width: 640px){
  .masthead-in{
    height:auto;
    min-height:80px;
    padding-block:11px;
    gap:12px;
  }
  .brand{ gap:clamp(10px,3vw,14px); min-width:0; }
  .brand-mark{ height:clamp(40px,12.5vw,56px); }
  .brand-name{ min-width:0; }
  .brand-name .l1{
    font-size:clamp(.86rem,4.3vw,1.15rem);
    letter-spacing:.11em;
    line-height:1.1;
  }
  .brand-name .l2{
    display:block;              /* was hidden — this is the actual fix */
    font-size:clamp(.6rem,3.05vw,.82rem);
    letter-spacing:.045em;
    line-height:1.15;
    margin-top:4px;
    padding-top:4px;
    white-space:nowrap;
  }
  /* keep the Menu button from stealing width the firm name needs */
  .navtoggle{
    flex:0 0 auto;
    padding:10px 12px;
    font-size:.85rem;
  }
  /* the open menu was pinned to the old fixed header height */
  .nav.open{ top:100%; }
  .topic{ scroll-margin-top:94px; }
}

/* narrow phones (SE, Mini, older Android): trade a little size for a clean fit */
@media (max-width: 380px){
  .masthead-in{ gap:9px; min-height:74px; }
  .brand{ gap:9px; }
  .brand-mark{ height:clamp(34px,10.5vw,42px); }
  .brand-name .l1{ font-size:clamp(.8rem,4.1vw,.92rem); letter-spacing:.08em; }
  .brand-name .l2{ font-size:clamp(.55rem,2.85vw,.64rem); letter-spacing:.015em; }
  .navtoggle{ padding:9px 10px; font-size:.8rem; }
  .topic{ scroll-margin-top:88px; }
}
