/* ============================================================
LENDER LEGAL PLLC — Design System
Palette sampled directly from the firm marketing flyer.
============================================================ */
:root{
/* Core brand palette (from flyer) */
--navy: #1B2A3F; /* primary dark */
--navy-900: #131f2f; /* deeper navy for footer / overlays */
--navy-700: #24384f;
--sage: #717973; /* signature muted sage-green */
--sage-600: #5e655f;
--sage-300: #AFC2BF; /* light sage */
--slate: #54656B; /* blue-slate */
--teal: #014F73; /* deep teal accent */
--teal-bright:#0a6d97;
--ivory: #f7f6f2; /* warm off-white background */
--paper: #ffffff;
--line: #e4e2db; /* hairline on light */
--line-dark: rgba(255,255,255,.12);
--ink: #1d2733; /* body text on light */
--ink-soft: #55606c; /* secondary text on light */
--on-dark: #eef1f0;
--on-dark-soft: #b7c0c2;
/* Gradients */
--grad-brand: linear-gradient(120deg, var(--navy) 0%, var(--teal) 60%, var(--sage) 120%);
--grad-sage: linear-gradient(135deg, var(--sage) 0%, var(--slate) 100%);
/* Type */
--serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Metrics */
--maxw: 1200px;
--gutter: clamp(20px, 5vw, 64px);
--radius: 4px;
--radius-lg: 10px;
--shadow-sm: 0 2px 10px rgba(20,31,47,.06);
--shadow-md: 0 14px 40px rgba(20,31,47,.12);
--shadow-lg: 0 30px 80px rgba(20,31,47,.22);
--ease: cubic-bezier(.22,.61,.36,1);
}
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
font-family:var(--sans);
color:var(--ink);
background:var(--ivory);
line-height:1.6;
font-size:17px;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
/* ---------- Type scale ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:.005em;color:var(--navy)}
.display{font-size:clamp(2.6rem,6.4vw,5.2rem);font-weight:600;letter-spacing:.01em}
h2.section-title{font-size:clamp(2rem,4.2vw,3.2rem)}
h3{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.eyebrow{
font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.22em;
text-transform:uppercase;color:var(--teal);display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--sage);display:inline-block}
.eyebrow.on-dark{color:var(--sage-300)}
.eyebrow.centered{justify-content:center}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--ink-soft);max-width:60ch}
.muted{color:var(--ink-soft)}
/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,120px)}
.section.tight{padding-block:clamp(48px,6vw,80px)}
.bg-ivory{background:var(--ivory)}
.bg-paper{background:var(--paper)}
.bg-navy{background:var(--navy);color:var(--on-dark)}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff}
.bg-sage{background:var(--grad-sage);color:#fff}
.bg-sage h2,.bg-sage h3{color:#fff}
.center{text-align:center}
.center .lead{margin-inline:auto}
.grid{display:grid;gap:clamp(20px,3vw,34px)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,80px);align-items:center}
/* ---------- Buttons ---------- */
.btn{
--bg:var(--navy);--fg:#fff;
display:inline-flex;align-items:center;gap:.6em;
background:var(--bg);color:var(--fg);
font-weight:600;font-size:.95rem;letter-spacing:.02em;
padding:.95em 1.7em;border-radius:var(--radius);
transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s;
position:relative;overflow:hidden;
}
.btn svg{transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn:hover svg{transform:translateX(4px)}
.btn.teal{--bg:var(--teal)}
.btn.sage{--bg:var(--sage)}
.btn.ghost{--bg:transparent;--fg:var(--navy);border:1.5px solid var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.ghost.on-dark{--fg:#fff;border-color:rgba(255,255,255,.55)}
.btn.ghost.on-dark:hover{background:#fff;color:var(--navy)}
.btn.lg{padding:1.1em 2.1em;font-size:1rem}
.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--teal);letter-spacing:.02em}
.link-arrow svg{transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}
/* ============================================================
HEADER / NAV
============================================================ */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:100;
padding-block:20px;
/* Transparent at the very top so the hero's flowing lines pass straight through
the ribbon; on scroll it fades to the SAME viewport-locked page gradient. */
background:transparent;
transition:background .45s var(--ease), box-shadow .45s var(--ease);
}
.site-header.solid-scroll{
background:linear-gradient(to bottom right,#1e2c40,#314864);
background-attachment:fixed;background-size:100vw 100vh;background-position:top left;
box-shadow:0 1px 0 rgba(255,255,255,.06), 0 8px 28px rgba(0,0,0,.16);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:1}
.site-header.scrolled{background:rgba(19,31,47,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line-dark);padding-block:11px}
/* ---------- Logo lockup ---------- */
.logo{display:inline-flex;align-items:center;gap:13px;color:#fff}
.logo .ll-mark{height:46px;width:auto;flex:none;transition:height .4s var(--ease)}
.site-header.scrolled .logo .ll-mark{height:38px}
.logo .wordmark{display:flex;flex-direction:column;line-height:1}
.logo .wm-1{font-family:var(--sans);font-weight:600;font-size:1.12rem;letter-spacing:.14em;text-transform:uppercase}
.logo .wm-2{font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;color:var(--sage-300);margin-top:3px}
.logo.navy{color:var(--navy)}
.logo.navy .wm-2{color:var(--sage)}
@media (max-width:560px){.logo .wm-1{font-size:1rem}.logo .ll-mark{height:40px}}
.logo-h img{height:80px;width:auto;display:block;transition:height .4s var(--ease)}
.site-header.scrolled .logo-h img{height:62px}
.logo-icon img{height:56px;width:auto;display:block;transition:height .4s var(--ease)}
.site-header.scrolled .logo-icon img{height:46px}
@media (max-width:560px){.logo-icon img{height:48px}}
.logo-hz img{height:66px;width:auto;display:block;transition:height .4s var(--ease)}
.site-header.scrolled .logo-hz img{height:53px}
@media (max-width:560px){.logo-hz img{height:53px}}
.logo-p img{height:150px;max-width:100%;width:auto;display:block}
@media (max-width:560px){.logo-h img{height:58px}.site-header.scrolled .logo-h img{height:48px}.logo-p img{height:120px}}
/* On light (interior) pages the header starts solid */
.site-header.solid{background:var(--navy);box-shadow:0 1px 0 var(--line-dark)}
.nav{display:flex;align-items:center;gap:3px}
.nav a{
color:#fff;font-weight:500;font-size:1.03rem;letter-spacing:.01em;
padding:.5em .75em;border-radius:var(--radius);position:relative;opacity:.9;transition:opacity .25s;
}
.nav a::after{content:"";position:absolute;left:.75em;right:.75em;bottom:.35em;height:1.5px;background:var(--sage-300);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav a.active{opacity:1}
.header-cta{margin-left:10px;padding:1.05em 2em;font-size:1.1rem}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px;z-index:110}
.nav-toggle span{width:26px;height:2px;background:#fff;transition:.3s var(--ease);border-radius:2px}
@media (max-width:1120px){
.nav-toggle{display:flex}
.nav{
position:fixed;inset:0 0 0 auto;width:min(340px,82vw);
background:var(--navy-900);flex-direction:column;align-items:flex-start;justify-content:center;
gap:6px;padding:80px 34px;transform:translateX(100%);transition:transform .45s var(--ease);
box-shadow:var(--shadow-lg);
}
.nav.open{transform:translateX(0)}
.nav a{font-size:1.25rem;font-family:var(--serif);padding:.5em 0}
.nav a::after{display:none}
.header-cta{margin:22px 0 0;padding:1.15em 2.4em}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-scrim{position:fixed;inset:0;background:rgba(10,16,25,.5);opacity:0;visibility:hidden;transition:.4s;z-index:90}
body.nav-open .nav-scrim{opacity:1;visibility:visible}
}
/* ============================================================
HERO
============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--navy-900)}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::after{content:"";position:absolute;inset:0;background:
linear-gradient(105deg,rgba(16,25,38,.55) 0%,rgba(16,25,38,.24) 50%,rgba(16,25,38,.05) 100%);
z-index:1;pointer-events:none}
.hero .wrap{position:relative;z-index:2;width:100%;padding-block:100px 56px}
.hero-inner{max-width:760px}
.hero .display{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero .display .accent{color:var(--sage-300);font-style:italic}
.hero .display .sub{display:block;font-size:.44em;font-weight:500;font-style:italic;color:var(--sage-300);margin-top:.2em;letter-spacing:.01em;text-shadow:0 2px 20px rgba(0,0,0,.25)}
.hero p.lead{color:#dfe5e4;margin-top:22px;max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:58px}
.hero-badges{display:flex;flex-wrap:wrap;gap:22px 40px;margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.hero-badge{color:#fff;flex:0 0 auto}
.hero-badge b{display:block;font-family:var(--serif);font-size:1.9rem;line-height:1;color:var(--sage-300)}
.hero-badge span{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-soft)}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.6);font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-cue::after{content:"";width:1px;height:38px;background:linear-gradient(rgba(255,255,255,.6),transparent);animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* Interior page hero (compact) */
.page-hero{position:relative;background:var(--navy);color:#fff;padding:clamp(130px,17vw,200px) 0 clamp(52px,7vw,90px);overflow:hidden}
.page-hero .hero-canvas{opacity:.9}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,31,47,.35),rgba(19,31,47,.62));z-index:1}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{color:#fff;font-size:clamp(2.4rem,5vw,4rem)}
.page-hero p{color:#dfe5e4;max-width:60ch;margin-top:14px}
.breadcrumb{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-300);margin-bottom:18px;display:flex;gap:.6em;align-items:center}
.breadcrumb a{opacity:.8}.breadcrumb a:hover{opacity:1}
/* ============================================================
PRACTICE / THUMBNAIL CARDS
============================================================ */
.card-grid{display:grid;gap:clamp(18px,2.4vw,28px)}
.pcard{
position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:340px;
display:flex;flex-direction:column;justify-content:flex-end;
color:#fff;isolation:isolate;background:var(--navy);
box-shadow:var(--shadow-sm);transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.pcard .thumb{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:transform .8s var(--ease)}
.pcard:hover .thumb{transform:scale(1.06)}
.pcard .pcard-body{position:relative;padding:28px 26px}
.pcard h3{color:#fff;margin-bottom:8px;font-size:1.5rem}
.pcard p{color:#d7dedd;font-size:.95rem;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s var(--ease),margin .5s}
.pcard:hover p{max-height:140px;opacity:1;margin-top:2px}
.pcard .pcard-tag{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-300);margin-bottom:10px;display:block}
.pcard .arrow{position:absolute;top:24px;right:24px;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);display:grid;place-items:center;transition:.4s var(--ease)}
.pcard:hover .arrow{background:var(--sage-300);border-color:var(--sage-300);color:var(--navy);transform:rotate(-45deg)}
/* small feature cards (light) */
.fcards{display:grid;gap:clamp(18px,2.5vw,28px)}
.fcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 30px;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.fcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.fcard .ficon{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;background:var(--grad-brand);color:#fff;margin-bottom:20px}
.fcard h3{font-size:1.35rem;margin-bottom:10px}
.fcard p{color:var(--ink-soft);font-size:.97rem}
.fcard .num{font-family:var(--serif);font-size:2.6rem;color:var(--sage);line-height:1;margin-bottom:6px}
/* ============================================================
THE DIFFERENCE — split comparison
============================================================ */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.compare > div{padding:clamp(28px,4vw,48px)}
.compare .them{background:#eceae4;color:var(--navy)}
.compare .us{background:var(--navy);color:#fff;position:relative}
.compare h4{font-size:1.25rem;margin-bottom:20px;display:flex;align-items:center;gap:.6em}
.compare .them h4{color:var(--navy)}
.compare .us h4{color:#fff}
.compare ul li{padding:12px 0 12px 34px;position:relative;border-top:1px solid rgba(0,0,0,.07);font-size:.98rem}
.compare .us ul li{border-top:1px solid rgba(255,255,255,.12)}
.compare ul li:first-of-type{border-top:none}
.compare .them li::before{content:"";position:absolute;left:0;top:15px;width:18px;height:18px;border-radius:50%;background:#d8d5cd;
-webkit-mask:url("data:image/svg+xml;utf8,") center/13px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/13px no-repeat;}
.compare .us li::before{content:"";position:absolute;left:0;top:13px;width:20px;height:20px;border-radius:50%;background:var(--sage-300);
-webkit-mask:url("data:image/svg+xml;utf8,") center/12px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/12px no-repeat;}
/* ============================================================
STATS STRIP
============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);text-align:center}
.stat b{display:block;font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;color:#fff}
.stat.on-light b{color:var(--navy)}
.stat .k{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-top:10px;color:var(--sage-300)}
.stat.on-light .k{color:var(--slate)}
/* ============================================================
FOOTPRINT (4 states)
============================================================ */
.footprint{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,6vw,70px);align-items:center}
.states-viz{position:relative}
.state-chip{display:inline-flex;align-items:center;gap:.6em;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;padding:.7em 1.1em;border-radius:100px;font-weight:600;letter-spacing:.03em;margin:6px}
.state-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--sage-300);box-shadow:0 0 0 4px rgba(175,194,191,.2)}
/* ============================================================
PROFESSIONALS (dark, B&W -> color on hover)
============================================================ */
.people-section{background:var(--navy-900);color:#fff}
.people-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
.person{position:relative;background:transparent}
.person .photo{position:relative;aspect-ratio:3/3.5;border-radius:var(--radius-lg);overflow:hidden;background-color:#0f1826;background-size:cover;background-position:center top;transition:transform .8s var(--ease)}
.person:hover .photo{transform:scale(1.03)}
.person .meta{padding:14px 2px 2px}
.person .meta h3{color:#fff;font-size:1.18rem;margin-bottom:3px;line-height:1.2}
.person .meta span{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sage-300);display:block;line-height:1.35}
.person .plus{position:absolute;top:14px;right:14px;z-index:2;padding:5px 12px;border-radius:100px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:scale(.8);transition:.4s var(--ease)}
.person:hover .plus{opacity:1;transform:scale(1)}
.people-group-label{grid-column:1/-1;margin-top:26px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.14);display:flex;align-items:baseline;gap:14px}
.people-group-label h3{color:#fff}
.people-group-label span{color:var(--on-dark-soft);font-size:.85rem}
/* ============================================================
INSIGHTS / ALERT CARDS
============================================================ */
.post-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.post-card .pc-img{aspect-ratio:16/9;overflow:hidden;background:linear-gradient(180deg,#a9afab 0%,#6c736f 50%,#434945 100%);border-bottom:1px solid rgba(0,0,0,.06)}
.post-card .pc-img img{width:100%;height:100%;object-fit:cover;display:block}
.post-card .pc-img.fit-contain img{object-fit:contain}
.post-card .pc-body{padding:24px;flex:1;display:flex;flex-direction:column}
.post-card .pc-tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:12px}
.post-card h3{font-size:1.28rem;line-height:1.2;margin-bottom:10px}
.post-card .pc-meta{margin-top:auto;padding-top:16px;font-size:.85rem;color:var(--ink-soft);display:flex;justify-content:space-between;border-top:1px solid var(--line)}
/* ============================================================
FORMS
============================================================ */
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(26px,4vw,44px);box-shadow:var(--shadow-sm)}
.field{margin-bottom:20px}
.field label{display:block;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin-bottom:8px}
.field input,.field select,.field textarea{
width:100%;font-family:inherit;font-size:1rem;color:var(--ink);
padding:.85em 1em;border:1.5px solid var(--line);border-radius:var(--radius);background:#fcfbf9;transition:border-color .25s,box-shadow .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(1,79,115,.12)}
.field textarea{min-height:140px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* contact info list */
.info-list li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-dark)}
.info-list .ii{flex:0 0 44px;height:44px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:var(--sage-300)}
.info-list b{display:block;color:#fff;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.info-list span{color:var(--on-dark-soft)}
/* ============================================================
FOOTER
============================================================ */
.site-footer{background:var(--navy-900);color:var(--on-dark-soft);padding-top:clamp(56px,8vw,90px)}
.footer-top{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,50px) clamp(28px,4vw,50px);padding-bottom:50px;border-bottom:1px solid var(--line-dark)}
.footer-brand{display:inline-block;margin-bottom:30px}
.footer-brand img{height:88px;width:auto;display:block;margin-left:-16px}
.footer-brand .logo-p img{height:150px;max-width:100%;width:auto}
.footer-brand p{max-width:34ch;font-size:.95rem}
.footer-col h4{color:#fff;font-family:var(--sans);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.footer-col a{display:block;padding:7px 0;font-size:.95rem;transition:color .25s,padding .25s}
.footer-col a:hover{color:#fff;padding-left:5px}
.footer-bottom{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding:26px 0;font-size:.85rem}
.footer-bottom a:hover{color:#fff}
.social{display:flex;gap:12px}
.social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-dark);display:grid;place-items:center;transition:.3s var(--ease)}
.social a:hover{background:var(--sage);border-color:var(--sage);color:#fff;transform:translateY(-2px)}
.legal-note{background:var(--navy-900);border-top:1px solid var(--line-dark);color:#7f8a93;font-size:.78rem;line-height:1.7;padding:22px 0}
/* ---------- Check list ---------- */
.check-list li{position:relative;padding:11px 0 11px 36px;border-top:1px solid var(--line);font-size:1rem}
.check-list li:first-child{border-top:none}
.check-list li::before{content:"";position:absolute;left:0;top:12px;width:22px;height:22px;border-radius:50%;
background:var(--teal) url("data:image/svg+xml;utf8,") center/13px no-repeat}
.bg-navy .check-list li,.side-card .check-list li{border-color:rgba(255,255,255,.14)}
/* ---------- Practice detail sidebar ---------- */
.side-card{background:var(--navy);color:#fff;border-radius:var(--radius-lg);padding:32px 28px;box-shadow:var(--shadow-md)}
.side-sticky{position:sticky;top:100px;align-self:start}
@media(max-width:860px){.side-sticky{position:static}}
.related{margin-top:26px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px}
.related h4{font-family:var(--sans);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:12px}
.related a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid var(--line);font-weight:600;color:var(--navy);transition:color .25s,padding .25s}
.related a:first-of-type{border-top:none}
.related a:hover{color:var(--teal);padding-left:4px}
.related a svg{color:var(--sage)}
/* ---------- Feature post ---------- */
.feature-post{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.feature-post:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.feature-post .fp-img{min-height:340px;overflow:hidden;background:linear-gradient(180deg,#a9afab 0%,#6c736f 50%,#434945 100%);border-right:1px solid rgba(0,0,0,.06)}
.feature-post .fp-img img{width:100%;height:100%;object-fit:contain;display:block}
.feature-post .fp-body{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:center}
.feature-post .fp-body h2{margin:6px 0 14px}
@media(max-width:860px){.feature-post{grid-template-columns:1fr}}
/* ---------- Signup ---------- */
.signup{display:flex;gap:12px;max-width:480px;margin:26px auto 0}
.signup input{flex:1;padding:.9em 1.1em;border-radius:var(--radius);border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-size:1rem}
.signup input::placeholder{color:#9fb0b2}
.signup input:focus{outline:none;border-color:var(--sage-300)}
@media(max-width:520px){.signup{flex-direction:column}}
/* ---------- Careers roles ---------- */
.roles{max-width:900px;margin-inline:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.role-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 30px;border-top:1px solid var(--line);transition:background .25s}
.role-row:first-child{border-top:none}
.role-row:hover{background:#fafaf7}
.role-row h3{font-size:1.3rem;margin-bottom:2px}
.role-meta{display:flex;align-items:center;gap:16px;color:var(--sage)}
.pill{background:var(--ivory);border:1px solid var(--line);color:var(--slate);font-size:.78rem;font-weight:600;letter-spacing:.04em;padding:.45em .9em;border-radius:100px}
@media(max-width:560px){.role-row{flex-direction:column;align-items:flex-start;gap:12px}}
/* ---------- Affiliations ---------- */
.affil{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,3vw,32px);align-items:stretch;margin-top:26px}
.affil-logo{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
padding:30px 46px;display:flex;align-items:center;justify-content:center;flex:1 1 300px;min-width:260px;max-width:390px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.affil-logo:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.affil-logo img{height:clamp(46px,6vw,64px);width:auto;object-fit:contain;display:block}
/* ---------- Attorney bio pages ---------- */
.page-hero.compact{padding:clamp(120px,15vw,170px) 0 clamp(38px,5vw,60px)}
.bio-figure{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--navy);aspect-ratio:1/1}
.bio-figure img{width:100%;height:100%;object-fit:cover;object-position:center top}
.cred{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px;margin-top:20px}
.cred h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 10px}
.cred h4:nth-of-type(2){margin-top:20px}
.cred ul li{padding:6px 0;border-top:1px solid var(--line);font-size:.94rem;color:var(--ink-soft)}
.cred ul li:first-child{border-top:none}
.bio-body p{margin-bottom:1.05em;color:var(--ink-soft);font-size:1.05rem}
.bio-body p:first-child{color:var(--ink);font-size:1.2rem;font-weight:500}
/* ---------- Article (insight detail) ---------- */
.article-figure{max-width:900px;margin:0 auto 40px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.article-figure img{width:100%;height:auto;display:block}
/* Real logo overlay on insight posts that have no photo thumbnail */
.post-card .pc-img.ph,.feature-post .fp-img.ph,.article-figure.ph{position:relative}
.post-card .pc-img.ph::after,.feature-post .fp-img.ph::after,.article-figure.ph::after{content:"";position:absolute;inset:0;background:url('logo-icon-white.svg') no-repeat center 50%;background-size:min(46%,150px);opacity:.9;pointer-events:none}
.feature-post .fp-img.ph::after{background-size:min(40%,190px)}
.article-figure.ph::after{background-size:min(30%,180px)}
/* ============================================================
MOBILE RESPONSIVENESS — scoped overrides only.
All rules live inside max-width media queries, so any viewport
wider than the largest breakpoint (960px) renders unchanged.
============================================================ */
@media (max-width:960px){
/* 4-up grids step down to 2-up on tablets/large phones */
.people-grid{grid-template-columns:repeat(2,1fr)}
.stats{grid-template-columns:repeat(2,1fr);gap:clamp(24px,5vw,40px)}
.cols-4{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
/* two-column side-by-side layouts stack */
.split{grid-template-columns:1fr;gap:clamp(28px,6vw,44px)}
.footprint{grid-template-columns:1fr;gap:clamp(26px,6vw,40px)}
.form-row{grid-template-columns:1fr}
}
@media (max-width:720px){
/* card grids go single-column on phones */
.cols-3,.cols-4,.cols-2{grid-template-columns:1fr}
/* comparison "us vs. them" table stacks */
.compare{grid-template-columns:1fr}
/* footer link columns wrap to two, then flow naturally */
.footer-top{grid-template-columns:repeat(2,1fr);gap:32px 28px}
/* trim oversized interior page-hero top padding on phones */
.page-hero{padding-top:clamp(104px,26vw,150px)}
}
@media (max-width:520px){
.footer-top{grid-template-columns:1fr}
/* keep stat numbers readable at 2-up rather than shrinking to 4 */
.stats{grid-template-columns:repeat(2,1fr)}
}
/* ============================================================
MOBILE SPACING — breathing room for stacked headings/leads.
Scoped to phones; desktop rhythm unchanged.
============================================================ */
@media (max-width:720px){
/* the global reset zeroes margins, so add vertical rhythm here */
.eyebrow{display:flex;margin-bottom:14px}
.eyebrow.centered{justify-content:center}
.display{line-height:1.12}
h2.section-title,.page-hero h1{line-height:1.16}
.section-title + .lead,.lead{margin-top:16px}
/* decorative scroll cue overlaps the hero stat badges on phones */
.scroll-cue{display:none}
}
/* ============================================================
MOBILE PROFESSIONALS — 2-up cards with the name/title in a
caption BELOW the photo (overlay text crowds small thumbs).
============================================================ */
@media (max-width:720px){
.people-grid .person{position:static;aspect-ratio:auto;overflow:visible;background:transparent;border-radius:0}
.people-grid .person .photo{position:relative;aspect-ratio:3/3.5;border-radius:var(--radius-lg);overflow:hidden;background-color:#0f1826}
.people-grid .person::after{display:none} /* drop the bottom gradient */
.people-grid .person .plus{display:none} /* hover affordance, N/A on touch */
.people-grid .person .meta{position:static;left:auto;right:auto;bottom:auto;padding:10px 2px 2px}
.people-grid .person .meta h3{font-size:1.02rem;line-height:1.18;margin-bottom:3px}
.people-grid .person .meta span{font-size:.68rem;letter-spacing:.06em;line-height:1.3;display:block}
}
/* ============================================================
PHOTO PLACEHOLDER — used when a headshot is pending.
============================================================ */
.photo-tbd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#0f1826}
.photo-tbd::before{content:"";width:58px;height:58px;background:url('logo-icon-white.svg') no-repeat center/contain;opacity:.45}
.photo-tbd span{color:var(--on-dark-soft);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.bio-figure-tbd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--navy)}
.bio-figure-tbd::before{content:"";width:92px;height:92px;background:url('logo-icon-white.svg') no-repeat center/contain;opacity:.45}
.bio-figure-tbd span{color:var(--on-dark-soft);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
/* ============================================================
CTA BAND — space the button off the text above it.
============================================================ */
.cta-band p{margin-top:12px}
.cta-band .btn{margin-top:28px}
/* ============================================================
ACCESSIBILITY — skip link, focus outlines, footer legal,
legal document typography.
============================================================ */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--navy-900);color:#fff;padding:12px 18px;border-radius:0 0 6px 0;font-weight:600}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--teal-bright);outline-offset:2px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--teal-bright);outline-offset:1px}
#main:focus{outline:none}
.footer-legal a{color:var(--on-dark-soft);font-size:.85rem;transition:color .25s}
.footer-legal a:hover{color:#fff}
.legal-doc{max-width:780px;margin-inline:auto}
.legal-doc p.muted{margin-bottom:2em;font-size:.9rem}
.legal-doc h2.section-title{font-size:clamp(1.7rem,3vw,2.3rem);margin:0 0 .35em}
.legal-doc h3{font-size:1.16rem;color:var(--navy);margin:1.5em 0 .35em}
.legal-doc p{margin-bottom:1em;color:var(--ink-soft);line-height:1.75}
.legal-doc a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
/* ============================================================
WHERE WE PRACTICE — hub timeline, state cards, contact band
============================================================ */
.timeline{max-width:760px;margin-inline:auto}
.tl-item{display:grid;grid-template-columns:110px 1fr;gap:26px;padding:22px 0;border-top:1px solid var(--line);align-items:baseline}
.tl-item:first-child{border-top:none}
.tl-year{font-family:var(--serif);font-size:2.1rem;color:var(--sage);line-height:1}
.tl-body h3{font-size:1.2rem;margin-bottom:4px}
.tl-body p{color:var(--ink-soft)}
.state-card{position:relative;display:block;background:transparent;color:#fff;transition:transform .5s var(--ease)}
.state-card:hover{transform:translateY(-4px)}
.state-card .thumb{position:relative;aspect-ratio:3/3.4;border-radius:var(--radius-lg);overflow:hidden;background-color:#0f1826;background-size:cover;background-position:center;filter:saturate(1.08) brightness(1.06);transition:transform .8s var(--ease)}
.state-card:hover .thumb{transform:scale(1.03)}
.state-card-body{position:relative;padding:14px 2px 2px}
.state-card h3{color:#fff;font-size:1.4rem;margin-bottom:4px;line-height:1.15}
.state-card p{color:#d7dedd;font-size:.92rem}
.state-card-tag{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-300);margin-bottom:8px;display:block}
.state-card .arrow{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:rgba(0,0,0,.25);display:grid;place-items:center;color:#fff;transition:.4s var(--ease)}
.state-card:hover .arrow{background:var(--sage-300);border-color:var(--sage-300);color:var(--navy)}
.state-contact-band{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,60px);align-items:center}
.state-contact-band .scb-text p{color:#dfe5e4;margin:12px 0 22px;max-width:46ch}
.state-contacts{display:flex;flex-direction:column;gap:18px}
.state-contact{display:flex;gap:16px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:16px 18px}
.sc-photo{width:110px;height:110px;border-radius:50%;background-size:cover;background-position:center top;flex:none;border:2px solid rgba(175,194,191,.4)}
.sc-meta h3{color:#fff;font-size:1.12rem;margin-bottom:2px}
.sc-meta span{color:var(--sage-300);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:860px){.state-contact-band{grid-template-columns:1fr;gap:32px}}
/* ---- Where We Practice: timeline + constellation two-column ---- */
.states-split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,60px);align-items:center}
.constellation-graphic{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:clamp(360px,42vw,470px);background:var(--navy-900);box-shadow:var(--shadow-md)}
.cg-caption{position:absolute;left:18px;bottom:14px;z-index:2;color:var(--sage-300);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:860px){.states-split{grid-template-columns:1fr;gap:32px}}
/* ---- card + chip + gradient callout components ---- */
.exp-label{font-family:var(--sans);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:16px;text-align:center}
.exp-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,3vw,26px);max-width:720px;margin-inline:auto}
.exp-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 26px;text-align:center;box-shadow:var(--shadow-sm)}
.exp-card .exp-badge{display:inline-block;background:var(--teal);color:#fff;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.4em .85em;border-radius:100px;margin-bottom:12px}
.exp-card h3{font-size:1.5rem;margin-bottom:4px}
.exp-card p{color:var(--sage);font-size:.82rem;letter-spacing:.05em;text-transform:uppercase}
.exp-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:840px;margin-inline:auto}
.exp-chip{border:1.5px dashed #c9c8c0;border-radius:var(--radius-lg);padding:15px 22px;text-align:center;min-width:150px;transition:border-color .3s,transform .3s}
.exp-chip:hover{border-color:var(--sage);transform:translateY(-2px)}
.exp-chip b{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--navy);font-weight:600}
.exp-chip span{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.recruit-callout{margin-top:54px;background:var(--grad-brand);color:#fff;border-radius:var(--radius-lg);padding:clamp(32px,5vw,52px);display:grid;grid-template-columns:1.2fr auto;gap:clamp(24px,4vw,40px);align-items:center;box-shadow:var(--shadow-md)}
.recruit-callout h2{color:#fff;margin-bottom:8px}
.recruit-callout p{color:rgba(255,255,255,.92);max-width:54ch}
@media (max-width:860px){.recruit-callout{grid-template-columns:1fr}.exp-cards{grid-template-columns:1fr}}
/* ---- gradient callout (used by the Our Story objection block) ---- */
.grow-callout{background:var(--grad-brand);color:#fff;border-radius:var(--radius-lg);padding:clamp(40px,6vw,70px) clamp(28px,5vw,64px);text-align:center;box-shadow:var(--shadow-md)}
.grow-callout .section-title{color:#fff;max-width:20ch;margin:14px auto 0}
.grow-callout p{color:rgba(255,255,255,.9);max-width:60ch;margin:18px auto 0;font-size:1.05rem}
.teaser-actions{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:30px}
.link-arrow.on-dark{color:#fff}
.link-arrow.on-dark:hover{opacity:.85}
/* ---- State card facts line (replaces the repetitive sentence) ---- */
.state-card .state-card-facts{color:var(--sage-300);font-size:.82rem;letter-spacing:.02em;margin-top:2px}
/* ---- Avoid one/two-word orphan lines: balance headings & short leads, tidy paragraphs ---- */
.display,h1,h2.section-title,.page-hero h1{text-wrap:balance}
.lead{text-wrap:balance}
p,.bio-body p,.legal-doc p{text-wrap:pretty}
/* Space between a section heading and the lead paragraph directly under it (all viewports) */
.section-title + .lead{margin-top:18px}
/* ---- Services mosaic: landscape photos span two columns (Padgett-style varied sizes) ---- */
.mosaic{grid-auto-flow:dense}
.mosaic .pcard{height:clamp(300px,26vw,360px);min-height:0}
.mosaic .pcard.wide{grid-column:span 2}
@media (max-width:720px){
.mosaic .pcard{height:280px}
.mosaic .pcard.wide{grid-column:auto}
}
/* State page: closing 'presence' line at normal body size (not the small legal-doc muted size) */
.legal-doc p.state-presence{color:var(--ink-soft);font-size:1.05rem;margin-top:.3em}
/* Practice card text: legible directly on the photo */
.pcard h3{text-shadow:0 2px 6px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.6)}
.pcard .pcard-tag{text-shadow:0 2px 6px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.6)}
.pcard p{text-shadow:0 2px 6px rgba(0,0,0,.7),0 0 2px rgba(0,0,0,.55)}
/* Subtle bottom gradient so white card text stays legible on photos (not a heavy band) */
.pcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,23,36,0) 55%,rgba(15,23,36,.55) 100%);pointer-events:none}
/* Replevins card: frame lower so the clipboard/keys are in view */
.pcard[href*="replevins"] .thumb{background-position:center bottom}
/* State card facts as outline pills (Option B) */
.state-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fact-pill{border:1px solid rgba(175,194,191,.5);color:#cfe0dd;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.4em .8em;border-radius:100px;background:rgba(255,255,255,.05)}
/* ---- Our Story page: compare cards + pull quote ---- */
.story-compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,28px);max-width:900px;margin:44px auto 0}
.story-compare .comp{border-radius:var(--radius-lg);padding:30px 28px}
.story-compare .comp.bad{background:#f0ede8;border:1px solid var(--line)}
.story-compare .comp.good{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.story-compare .comp h3{font-family:var(--serif);font-size:1.4rem;margin-bottom:14px}
.story-compare .comp.bad h3{color:var(--slate)}
.story-compare .comp.good h3{color:var(--teal)}
.story-compare .comp ul{list-style:none;margin:0;padding:0}
.story-compare .comp li{padding:7px 0 7px 26px;position:relative;color:var(--ink-soft);font-size:.98rem;border-bottom:1px solid rgba(0,0,0,.05)}
.story-compare .comp li:last-child{border-bottom:0}
.story-compare .comp.bad li::before{content:"\2715";position:absolute;left:0;color:#b08a8a;font-weight:700}
.story-compare .comp.good li::before{content:"\2713";position:absolute;left:0;color:var(--sage);font-weight:700}
.pullquote{font-family:var(--serif);font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.28;color:var(--navy);font-weight:600;text-align:center;max-width:24ch;margin:0 auto;text-wrap:balance}
.pullquote .accent{color:var(--teal)}
@media (max-width:760px){.story-compare{grid-template-columns:1fr}}
/* ---- dimmed inline eyebrow link ---- */
.eyebrow-more{color:#6f8391;font-weight:600;transition:color .3s var(--ease)}
.eyebrow-more:hover{color:var(--sage-300)}
/* Our Story: body copy a touch darker than the default gray (not full navy) */
.story-doc p{color:#454e5a}
/* Hero background watermark — oversized faint LL mark (decorative) */
.hero-mark{position:absolute;right:4%;top:50%;transform:translateY(-50%);width:clamp(320px,44vw,660px);opacity:.06;z-index:1;pointer-events:none;user-select:none}
@media (max-width:720px){.hero-mark{width:80vw;right:-18%;opacity:.05}}
/* Bigger hero CTA buttons */
.hero-actions .btn{padding:1.2em 2.4em;font-size:1.08rem}
/* Nudge header wordmark down so it rides even with the nav text */
.logo-hz{transform:translateY(4px)}
/* State-page "considerations" accordion */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{width:100%;text-align:left;background:none;border:none;padding:22px 4px;display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;font-family:var(--serif);font-weight:600;font-size:clamp(1.2rem,2vw,1.5rem);color:var(--navy);line-height:1.2;transition:color .25s}
.acc-head:hover{color:var(--teal)}
.acc-head .pm{flex:none;width:28px;height:28px;border:1.5px solid var(--teal);border-radius:50%;display:grid;place-items:center;color:var(--teal);font-family:var(--sans);font-size:1.2rem;line-height:1;transition:transform .3s var(--ease)}
.acc-item.open .acc-head .pm{transform:rotate(45deg)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.acc-item.open .acc-body{grid-template-rows:1fr}
.acc-body>div{overflow:hidden;min-height:0}
.acc-body p{padding:2px 4px 22px;color:var(--ink-soft);font-size:1.02rem;line-height:1.75;max-width:74ch}