:root{--ink:#0e3a40;--ink-2:#0a2a2f;--paper:#eaf0f1;--white:#fff;--flag:#f3c431;--flag-d:#d9a90f;--muted:#4b6266;--line:#c4d3d6}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;color:#17292c;background:var(--paper);font-size:1.05rem;line-height:1.65}
h1,h2,h3,h4,.brand-name{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
a{color:var(--ink)}
/* nav (c): centered name stacked over links */
.navbar{background:var(--paper);border-bottom:1px solid var(--line);padding:.6rem 0}
.navbar .container{flex-direction:column}
.brand-name{font-size:2rem;line-height:1;text-decoration:none;color:var(--ink);text-align:center}
.brand-name small{display:block;font-family:'Hanken Grotesk',sans-serif;font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}
.navbar-toggler{position:absolute;right:1rem;top:1rem;border-color:var(--ink)}
.navbar.navbar-expand-lg .navbar-collapse{justify-content:center;flex-grow:0}
.nav-link{color:var(--ink)!important;font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;padding:.5rem 1.1rem!important}
.nav-link:hover{color:var(--ink-2)!important;box-shadow:inset 0 -3px var(--flag)}
.nav-call{background:var(--ink);color:#fff!important;border-radius:2px}
.nav-call:hover{background:var(--ink-2);box-shadow:none}
@media(max-width:991px){.navbar .container{align-items:center}.navbar-toggler{top:1.1rem}.navbar-nav{padding:.7rem 0;text-align:center}}
/* signature: sign-here flags */
.flag{display:inline-block;position:relative;background:var(--flag);color:var(--ink-2);font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;padding:.35rem 1.9rem .35rem .8rem;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%);margin-bottom:1rem}
.flag::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--flag-d)}
.sign-line{display:flex;align-items:flex-end;gap:.6rem;color:var(--muted);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.sign-line span{flex:1;border-bottom:1.5px solid var(--ink);height:1.2rem}
.sign-line b{font-family:'Instrument Serif',serif;font-size:1.5rem;color:var(--ink);letter-spacing:0;text-transform:none;font-weight:400;font-style:italic;line-height:1}
/* hero */
.hero{padding:4.5rem 0 4rem;position:relative;overflow:hidden}
.hero h1{font-size:clamp(2.8rem,7vw,5.6rem);line-height:.98;margin:.4rem 0 1.2rem}
.hero h1 em{font-style:italic;box-shadow:inset 0 -.28em var(--flag)}
.hero .lead{font-size:1.25rem;max-width:34rem;color:#24393c}
.btn-ink{background:var(--ink);color:#fff;border-radius:2px;padding:.8rem 1.6rem;font-weight:700;letter-spacing:.06em}
.btn-ink:hover{background:var(--ink-2);color:#fff}
.btn-line{border:2px solid var(--ink);color:var(--ink);border-radius:2px;padding:.75rem 1.6rem;font-weight:700;letter-spacing:.06em}
.btn-line:hover{background:var(--ink);color:#fff}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:end}
.arch{border-radius:999px 999px 6px 6px;overflow:hidden;background:var(--ink);box-shadow:10px 10px 0 var(--flag);aspect-ratio:3/4.1}
.arch img{width:100%;height:100%;object-fit:cover;display:block}
.arch.a1 img{object-position:50% 18%}.arch.a2 img{object-position:50% 25%}
.arch.a2{margin-bottom:2.4rem;box-shadow:10px 10px 0 var(--ink)}
.cap{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.9rem;font-weight:600}
.cap b{display:block;font-family:'Instrument Serif',serif;font-size:1.3rem;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:400}
.ticker{background:var(--ink);color:#fff;overflow:hidden;white-space:nowrap;padding:.8rem 0}
.ticker div{display:inline-block;animation:tick 40s linear infinite;font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.ticker i{color:var(--flag);font-style:normal;margin:0 1.5rem}
@keyframes tick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker div{animation:none}}
section{padding:5rem 0}
h2{font-size:clamp(2.2rem,4.5vw,3.6rem);line-height:1.05;margin-bottom:1.2rem}
/* practice index */
.areas{background:var(--white)}
.area{display:grid;grid-template-columns:1fr 1.4fr;gap:1.5rem;padding:1.7rem 0;border-top:1px solid var(--line)}
.area:last-child{border-bottom:1px solid var(--line)}
.area h3{font-size:2rem;margin:0;line-height:1.1}
.area p{margin:0;color:#2b4044}
.area:hover h3{box-shadow:inset 0 -.3em var(--flag);display:inline}
.area h3{transition:none}
@media(max-width:767px){.area{grid-template-columns:1fr;gap:.5rem}}
.gavel{border-radius:6px;box-shadow:12px 12px 0 var(--flag);width:100%;height:auto;display:block}
/* band */
.band{position:relative;padding:7rem 0;background:url('img/skyline.webp') center/cover;color:#fff}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,42,47,.78),rgba(10,42,47,.7))}
.band .container{position:relative}
.band blockquote{font-family:'Instrument Serif',serif;font-size:clamp(1.8rem,4vw,3.2rem);line-height:1.15;max-width:48rem;margin:0}
.band cite{display:block;margin-top:1.2rem;font-style:normal;letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;color:var(--flag)}
/* attorneys */
.bio{background:var(--white);padding:2.2rem;border-top:6px solid var(--flag);height:100%}
.bio h3{font-size:2.2rem}
.bio .mail{font-weight:700}
.bio p{color:#2b4044;font-size:1rem}
.bio.alt{border-top-color:var(--ink)}
.sticky-col{position:sticky;top:130px}
@media(max-width:991px){.sticky-col{position:static}}
/* contact */
.contact{background:var(--ink);color:#e6f0f1}
.contact h2,.contact h3{color:#fff}
.contact a{color:#fff}
.contact .flag{margin-bottom:1rem}
.contact dt{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--flag);margin-top:1.2rem;font-weight:700}
.contact dd{margin:0;font-size:1.15rem}
.contact .sign-line{color:#a9c1c4}.contact .sign-line span{border-color:#a9c1c4}.contact .sign-line b{color:#fff}
.map{border:0;width:100%;height:100%;min-height:340px;border-radius:4px;filter:grayscale(.3)}
footer{background:var(--ink-2);color:#a9c1c4;padding:2rem 0;font-size:.9rem}
footer a{color:#fff}