/* ==========================================================================
   Legacy Path Law, LLC — corporate design system
   Colors are taken verbatim from the firm's existing stylesheet (unchanged).
   Typography: Source Serif 4 (600/700) headings + Inter body — sturdy, institutional.
   ========================================================================== */

:root{
  /* ---- brand colors (unchanged) ---- */
  --navy:#031B88;
  --blue:#6096FD;
  --periwinkle:#AAB6FB;
  --coral:#FB7B83;
  --pink:#FAA7B8;
  --mint:#A8DDB5;
  --green:#34D399;
  --primary:#0096FF;
  --secondary:#3b8b7f;
  --tertiary-bg:#f6f7fa;

  /* ---- derived neutrals ---- */
  --ink:#14192B;
  --body:#3A4257;
  --muted:#5D6679;
  --line:#DCE3F0;
  --line-soft:#EDF1F9;
  --soft:#EEF3FF;
  --soft-2:#EAFBF1;
  --navy-deep:#02114F;
  --navy-800:#021560;
  /* Accent family, mapped to the brand palette.
     Var names kept (--gold*) so no markup or rule below needs rewriting.
     --gold      = cornflower  #6096FD  decorative: rules, bullets, icon fills
     --gold-dark = dark blue   #031B88  accent TEXT on white (contrast-safe)
     --gold-light= periwinkle  #AAB6FB  accents on dark backgrounds
     --gold-soft = periwinkle tint      soft fills */
  --gold:#6096FD;
  --gold-dark:#031B88;
  --gold-light:#AAB6FB;
  --gold-soft:#EDF0FE;
  --white:#fff;

  --display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --max:1220px;
  --r:6px;            /* corporate: square-ish, not pill */
  --r-lg:10px;
  --sh-sm:0 1px 3px rgba(3,27,136,.06), 0 1px 2px rgba(3,27,136,.04);
  --sh:0 6px 20px rgba(3,27,136,.08);
  --sh-lg:0 18px 46px rgba(3,27,136,.13);
  --header-h:80px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--body);
  font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none;transition:color .18s}
a:hover{color:var(--gold-dark)}

h1,h2,h3,h4,h5{font-family:var(--display);color:var(--navy);margin:0 0 .55em;
  letter-spacing:-.018em;font-weight:700}
h1{font-size:clamp(2.15rem,4vw,3.35rem);line-height:1.1}
h2{font-size:clamp(1.7rem,2.7vw,2.4rem);line-height:1.18}
h3{font-size:clamp(1.2rem,1.6vw,1.42rem);line-height:1.28;font-weight:600}
h4{font-size:1.08rem;font-weight:600;line-height:1.35}
p{margin:0 0 1.15em}
strong{font-weight:700;color:var(--ink)}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin-bottom:.55em}

.container{max-width:var(--max);margin:0 auto;padding:0 26px}
.narrow{max-width:830px;margin-left:auto;margin-right:auto}
.center{text-align:center}
.lead{font-size:1.13rem;line-height:1.78;color:var(--muted)}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.15em;
  font-size:.74rem;font-weight:800;color:var(--gold-dark);margin:0 0 .8rem}
.eyebrow.on-dark{color:var(--gold-light)}
.rule{width:56px;height:3px;background:var(--gold);margin:0 0 1.4rem;border:0}
.rule.c{margin-left:auto;margin-right:auto}
.note{font-size:.86rem;color:var(--muted);font-style:italic}
.skip-link{position:absolute;left:-9999px;background:var(--navy);color:#fff;padding:12px 20px;z-index:9999}
.skip-link:focus{left:8px;top:8px;color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------------- Buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:.005em;
  padding:15px 30px;border-radius:var(--r);border:1.5px solid transparent;cursor:pointer;
  transition:.2s ease;text-align:center;line-height:1.25}
.btn svg{width:16px;height:16px;flex:0 0 16px;fill:currentColor}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff;
  box-shadow:0 8px 20px rgba(3,27,136,.24);transform:translateY(-1px)}
.btn-accent{background:var(--gold-dark);color:#fff;border-color:var(--gold-dark)}
.btn-accent:hover{background:#2450B8;border-color:#2450B8;color:#fff;
  box-shadow:0 8px 20px rgba(91,141,239,.4);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--navy);border-color:#C3CEEA}
.btn-outline:hover{border-color:var(--navy);background:var(--soft);color:var(--navy)}
.btn-light{background:#fff;color:var(--navy);border-color:#fff}
.btn-light:hover{background:#EAF0FF;color:var(--navy);transform:translateY(-1px)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.btn-sm{padding:11px 20px;font-size:.87rem}
.btn-lg{padding:17px 36px;font-size:1rem}
.btn-block{width:100%}
.btn-row{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.btn-row.c{justify-content:center}

/* ---------------- Utility bar ---------------- */
.utility{background:var(--navy-deep);color:#B9C6E8;font-size:.83rem;
  border-bottom:1px solid rgba(255,255,255,.08)}
.utility .container{display:flex;justify-content:space-between;align-items:center;
  gap:14px;min-height:42px;flex-wrap:wrap}
.utility a{color:#E4EAFB;font-weight:500}
.utility a:hover{color:var(--gold-dark)}
.u-left,.u-right{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.u-item{display:inline-flex;align-items:center;gap:7px}
.u-item svg{width:13px;height:13px;fill:var(--gold-light);flex:0 0 13px}
.u-pay{display:inline-flex;align-items:center;gap:6px;background:rgba(91,141,239,.18);
  border:1px solid rgba(157,191,247,.5);color:#D7E4FB !important;
  padding:4px 13px;border-radius:4px;font-weight:600;font-size:.79rem;letter-spacing:.02em}
.u-pay:hover{background:var(--gold-dark);color:#fff !important;border-color:var(--gold-dark)}
.u-pay svg{width:12px;height:12px;fill:currentColor}
@media(max-width:900px){.u-addr{display:none}}
/* Compact mobile utility: phone + Pay Invoice share the top row, email sits on its own
   tidy second row. Desktop layout above is untouched. */
@media(max-width:640px){
  .utility{font-size:.78rem}
  .utility .container{min-height:0;padding-top:7px;padding-bottom:7px;gap:3px 12px}
  .u-left{display:contents}
  .u-left .u-item:first-child{order:1}
  .u-right{order:2}
  .u-left .u-item:nth-child(2){order:3;flex-basis:100%;font-size:.76rem;opacity:.92}
  .u-pay{padding:3px 11px;font-size:.75rem}
}

/* ---------------- Header / mega nav ---------------- */
.site-header{position:sticky;top:0;z-index:900;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(3,27,136,.04)}
.nav-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand:hover{opacity:.85}
.brand-logo{height:46px;width:auto;display:block}
@media(max-width:1240px){.brand-logo{height:40px}}
@media(max-width:960px){.brand-logo{height:37px}}
@media(max-width:400px){.brand-logo{height:32px}}

.nav{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav > li{position:relative;margin:0}
.nav > li > a,.nav > li > button{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);
  font-size:.925rem;font-weight:600;color:var(--ink);padding:11px 13px;border-radius:var(--r);
  background:none;border:0;cursor:pointer;white-space:nowrap;transition:.18s}
.nav > li > a:hover,.nav > li > button:hover,.nav > li.open > button{color:var(--navy);background:var(--soft)}
.nav .caret{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .22s}
.nav > li.open .caret{transform:rotate(180deg)}
.nav-cta{margin-left:8px}
.nav > li.nav-cta > a.btn{background:var(--navy);color:#fff;border-color:var(--navy);
  padding:12px 22px;border-radius:var(--r);font-weight:600;font-size:.88rem}
.nav > li.nav-cta > a.btn:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff;
  box-shadow:0 8px 18px rgba(3,27,136,.24)}

/* Panel sits flush under the button (top:100%) and carries its own transparent
   top padding, so the cursor never crosses a dead gap on the way down. */
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);
  padding-top:14px;width:min(780px,93vw);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;z-index:950}
.mega-inner{background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:26px}
/* invisible bridge across the button's own padding */
.nav > li.has-mega::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;display:none}
.nav > li.has-mega:hover::after,.nav > li.has-mega.open::after{display:block}
.nav > li.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr 246px;gap:26px}
.mega-grid.two{grid-template-columns:1fr 246px}
.mega h5{font-family:var(--sans);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-dark);font-weight:800;margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line-soft)}
.mega ul{list-style:none;margin:0;padding:0}
.mega li{margin:0 0 3px}
.mega li a{display:block;padding:9px 11px;border-radius:var(--r);transition:.16s;border-left:2px solid transparent}
.mega li a:hover{background:var(--soft);border-left-color:var(--gold)}
.m-title{display:block;font-weight:650;font-size:.92rem;color:var(--navy);line-height:1.3}
.m-desc{display:block;font-size:.79rem;color:var(--muted);line-height:1.45;margin-top:2px;font-weight:400}
.mega-card{background:linear-gradient(155deg,var(--navy) 0%,#0A2FA8 100%);color:#fff;
  border-radius:var(--r);padding:24px}
.mega-card h6{font-family:var(--display);font-size:1.18rem;margin:0 0 9px;color:#fff;font-weight:700}
.mega-card p{font-size:.83rem;color:#CFDBFB;line-height:1.6;margin-bottom:15px}
.mega-card .btn{width:100%;padding:11px 14px;font-size:.84rem}

.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);
  cursor:pointer;padding:9px;color:var(--navy)}
.nav-toggle svg{width:22px;height:22px;fill:currentColor}

@media(max-width:1240px){.nav > li > a,.nav > li > button{padding:11px 9px;font-size:.87rem}}
@media(max-width:1080px){
  .nav-toggle{display:block}
  .nav{position:fixed;inset:calc(var(--header-h) + 42px) 0 0 0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:14px 22px 70px;overflow-y:auto;transform:translateX(100%);
    transition:transform .26s ease;border-top:1px solid var(--line)}
  .nav.open{transform:translateX(0)}
  .nav > li > a,.nav > li > button{width:100%;justify-content:space-between;padding:16px 4px;
    font-size:1.02rem;border-radius:0;border-bottom:1px solid var(--line-soft)}
  .mega{position:static;transform:none;width:auto;opacity:1;visibility:visible;pointer-events:auto;
    padding:0;display:none}
  .mega-inner{box-shadow:none;border:0;border-top:0;border-radius:0;padding:4px 0 12px}
  .nav > li.has-mega::after{display:none !important}
  .nav > li.open .mega{display:block;transform:none}
  .mega-grid,.mega-grid.two{grid-template-columns:1fr;gap:12px}
  .mega-card{display:none}
  .nav-cta{margin:20px 0 0}
  .nav > li.nav-cta > a.btn{width:100%;padding:15px 20px;font-size:.95rem}
}

/* ---------------- Sections ---------------- */
section{padding:82px 0}
.sec-tight{padding:56px 0}
.bg-soft{background:var(--tertiary-bg)}
.bg-tint{background:var(--soft)}
.bg-navy{background:var(--navy-deep);color:#C8D3EF}
.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff}
.sec-head{max-width:790px;margin:0 auto 48px;text-align:center}
.sec-head p{margin-bottom:0}
.sec-head .rule{margin-left:auto;margin-right:auto}

/* ---------------- Credibility strip ---------------- */
.credbar{background:var(--navy);color:#fff;padding:0}
.credbar .container{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 26px}
.cred{padding:26px 20px;border-right:1px solid rgba(255,255,255,.14);text-align:center}
.cred:last-child{border-right:0}
.cred .n{font-family:var(--display);font-size:1.55rem;font-weight:700;color:#fff;line-height:1.1;display:block}
.cred .l{font-size:.74rem;text-transform:uppercase;letter-spacing:.11em;color:var(--gold-light);
  font-weight:600;margin-top:6px;display:block}
/* Mobile 2x2: reorder to Attorney-Led, Nationwide / 501(c)(3), Flat-Fee.
   DOM order (and desktop) unchanged; borders follow the VISUAL grid. */
@media(max-width:820px){.credbar .container{grid-template-columns:repeat(2,1fr)}
  .cred{border-right:0;border-bottom:0}
  .cred:nth-child(1){order:1;border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
  .cred:nth-child(4){order:2;border-bottom:1px solid rgba(255,255,255,.14)}
  .cred:nth-child(3){order:3;border-right:1px solid rgba(255,255,255,.14)}
  .cred:nth-child(2){order:4}}

/* ---------------- Hero ---------------- */
.hero{position:relative;padding:76px 0 84px;background:linear-gradient(180deg,#FBFCFF 0%,#fff 100%);
  border-bottom:1px solid var(--line-soft);overflow:hidden}
.hero::before{content:"";position:absolute;top:-140px;right:-120px;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle,rgba(96,150,253,.20) 0%,transparent 68%)}
.hero::after{content:"";position:absolute;bottom:-160px;left:-140px;width:460px;height:460px;
  border-radius:50%;background:radial-gradient(circle,rgba(96,150,253,.14) 0%,transparent 68%)}
.hero .container{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.hero h1{margin-bottom:.4em}
.hero .lead{max-width:56ch;font-size:1.15rem}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.hero-sub{padding:56px 0 44px;background:linear-gradient(180deg,#FBFCFF,#fff);
  border-bottom:1px solid var(--line-soft);position:relative;overflow:hidden}
.hero-sub::before{content:"";position:absolute;top:-160px;right:-100px;width:430px;height:430px;
  border-radius:50%;background:radial-gradient(circle,rgba(96,150,253,.16) 0%,transparent 68%)}
.hero-sub .container{position:relative;z-index:2}
.hero-sub h1{max-width:20ch}
.hero-sub .lead{max-width:64ch}

.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px;box-shadow:var(--sh-lg);position:relative}
.panel::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 55%,var(--gold) 100%);
  border-radius:var(--r-lg) var(--r-lg) 0 0}
.panel h3{margin-bottom:16px;font-size:1.22rem}
.panel ul{list-style:none;padding:0;margin:0 0 22px}
.panel li{position:relative;padding-left:29px;margin-bottom:12px;font-size:.95rem;color:var(--body)}
.panel li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border-radius:2px;background:var(--gold)}

/* ---------------- Cards / grids ---------------- */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px 30px;
  box-shadow:var(--sh-sm);transition:.24s ease;display:flex;flex-direction:column;position:relative;
  overflow:hidden}
.card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:.24s}
.card:hover{box-shadow:var(--sh);border-color:#C6D3EE;transform:translateY(-3px)}
.card:hover::after{background:var(--gold)}
.card h3{margin-bottom:.5em}
.card p{color:var(--muted);font-size:.96rem;margin-bottom:1em}
.card .more{margin-top:auto;font-weight:600;color:var(--navy);font-size:.9rem;
  display:inline-flex;align-items:center;gap:6px}
.card .more:hover{color:var(--gold-dark);gap:10px}
.icon{width:54px;height:54px;border-radius:var(--r);background:var(--gold-soft);border:1px solid #C9D3FB;
  display:grid;place-items:center;margin-bottom:20px;transition:.24s}
.card:hover .icon{background:var(--navy);border-color:var(--navy)}
.icon svg{width:26px;height:26px;stroke:var(--navy);stroke-width:1.9;fill:none;transition:.24s}
.card:hover .icon svg{stroke:#fff}

.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:26px 0 0}
.chips li{padding:10px 17px;border-radius:var(--r);font-weight:600;color:var(--navy);
  font-size:.88rem;background:#fff;border:1px solid var(--line);margin:0}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.wide-left{grid-template-columns:1.15fr .85fr}
@media(max-width:920px){.split,.split.wide-left{grid-template-columns:1fr;gap:38px}}
.side-panel{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:44px 38px;
  position:relative;overflow:hidden}
.side-panel::before{content:"";position:absolute;top:-60px;right:-60px;width:180px;height:180px;
  background:rgba(255,255,255,.07);border-radius:50%}
.side-panel h2{color:#fff;font-size:1.95rem;margin-bottom:.55em;position:relative}
.side-panel p{color:#D3DDF9;margin:0;position:relative}
.hl{color:var(--navy);font-weight:700}

/* ---------------- Review ---------------- */
.review{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)}
.review-top{background:var(--navy);padding:24px 30px;color:#fff}
.review-top h3{margin:0;font-size:1.2rem;color:#fff}
.stars{font-size:18px;letter-spacing:3px;color:var(--gold-light);margin-bottom:6px}
.review-body{padding:30px}
.review-tag{display:inline-block;background:var(--soft);color:var(--navy);padding:6px 14px;
  border-radius:4px;font-weight:700;font-size:.8rem;margin-bottom:14px;border:1px solid #C7D7FA}
.review-meta{font-size:.85rem;color:var(--muted);margin-bottom:16px}
.review-text{font-size:1rem;line-height:1.82;color:var(--body)}
.review-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  border-top:1px solid var(--line-soft);padding-top:20px;margin-top:22px}
.review-source{font-size:.86rem;font-weight:600;color:var(--muted)}

/* ---------------- Pricing ---------------- */
.price-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:38px;
  position:relative;overflow:hidden;box-shadow:var(--sh-lg)}
.price-box::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 55%,var(--gold) 100%)}
.plabel{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
  font-weight:800;color:var(--gold-dark);margin-bottom:10px}
.price{font-family:var(--display);font-size:3.1rem;font-weight:700;color:var(--navy);line-height:1}
.price small{display:block;font-family:var(--sans);font-size:.87rem;color:var(--muted);
  font-weight:500;margin-top:9px;line-height:1.5}
.price-box ul{list-style:none;padding:0;margin:24px 0}
.price-box li{position:relative;padding-left:28px;margin-bottom:11px;font-size:.95rem}
.price-box li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.trust-line{text-align:center;margin:14px 0 0;color:var(--muted);font-size:.82rem}

/* ---------------- Steps ---------------- */
.steps{counter-reset:s;display:grid;gap:26px}
.steps.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.steps.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps.g4{grid-template-columns:1fr}}
.step{position:relative;padding-left:62px}
.steps.g4 .step{padding-left:0;padding-top:62px}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;
  width:46px;height:46px;border-radius:var(--r);background:var(--navy);color:#fff;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.2rem}
.step h3{font-size:1.1rem;margin:.1em 0 .35em}
.step p{color:var(--muted);font-size:.94rem;margin:0}

/* ---------------- FAQ ---------------- */
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:0 22px;margin-bottom:11px;transition:.2s}
.faq details[open]{border-color:#BFCFEF;box-shadow:var(--sh-sm)}
.faq summary{cursor:pointer;font-weight:600;color:var(--navy);padding:19px 0;list-style:none;
  font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.4rem;font-weight:400;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 19px;color:var(--muted);font-size:.96rem}

/* ---------------- Articles ---------------- */
.article-row{display:grid;grid-template-columns:170px 1fr;gap:38px;padding:32px 0;
  border-bottom:1px solid var(--line-soft)}
.article-row:last-child{border-bottom:0}
@media(max-width:768px){.article-row{grid-template-columns:1fr;gap:12px}}
.cat{font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--gold-dark)}
.article-row h3{margin:0 0 11px;font-size:1.4rem;line-height:1.32}
.article-row p{color:var(--muted);margin-bottom:13px}
.read-more{font-weight:600;color:var(--navy)}
.post-meta{font-size:.84rem;color:var(--muted);font-weight:500}
.prose{max-width:770px;margin:0 auto}
.prose h2{margin-top:2.1em;font-size:1.7rem}
.prose p,.prose li{color:var(--body)}
.breadcrumb{font-size:.84rem;color:var(--muted);margin-bottom:1.3rem}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--navy)}

/* ---------------- Library ---------------- */
.library{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:52px;
  position:relative;overflow:hidden;box-shadow:var(--sh-sm)}
.library::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 55%,var(--gold) 100%)}
.library-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:52px;align-items:center;position:relative;z-index:2}
@media(max-width:920px){.library{padding:34px 26px}.library-grid{grid-template-columns:1fr;gap:32px}}
.tick{list-style:none;padding:0;margin:24px 0}
.tick li{margin-bottom:11px;color:var(--ink);font-weight:500}
.tick li::before{content:"✓";color:var(--green);margin-right:12px;font-weight:800}
.lib-side{background:var(--navy);border-radius:var(--r);padding:34px;color:#fff}
.lib-side h3{color:#fff;margin-bottom:16px;font-size:1.3rem}
.lib-side ul{margin:0;padding-left:18px}
.lib-side li{margin-bottom:11px;line-height:1.65;color:#CFDBFB;font-size:.94rem}

/* ---------------- Team ---------------- */
.bio{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:36px;box-shadow:var(--sh-sm)}
.avatar{width:74px;height:74px;border-radius:var(--r);background:var(--navy);color:#fff;
  display:grid;place-items:center;font-family:var(--display);font-size:1.6rem;font-weight:700;margin-bottom:20px}
.bio .name{font-family:var(--display);font-size:1.42rem;color:var(--navy);margin:0;font-weight:700}
.bio .role{color:var(--gold-dark);font-weight:700;font-size:.76rem;text-transform:uppercase;
  letter-spacing:.13em;margin:5px 0 18px}
.bio p{color:var(--muted);font-size:.95rem}

/* ---------------- Forms ---------------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:38px;box-shadow:var(--sh-sm)}
.form-grid{display:grid;gap:19px}
.form-row{display:grid;gap:19px;grid-template-columns:1fr 1fr}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
label{font-weight:600;font-size:.87rem;color:var(--ink);display:block;margin-bottom:7px}
input,textarea,select{width:100%;padding:13px 15px;border:1px solid #C9D3EA;border-radius:var(--r);
  font:inherit;font-size:.97rem;background:#fff;color:var(--ink);font-family:var(--sans);transition:.18s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(91,141,239,.2)}
textarea{min-height:145px;resize:vertical}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.82rem;color:var(--muted);margin-top:12px;line-height:1.6}
#form-status{padding:15px 18px;border-radius:var(--r);margin-top:16px;display:none;font-size:.94rem}
#form-status.ok{display:block;background:#EAF8EF;color:#0B6B43;border:1px solid var(--mint)}
#form-status.err{display:block;background:#FDF1F1;color:#A32020;border:1px solid #E5B8B8}

.contact-aside{background:var(--navy);border-radius:var(--r-lg);padding:36px;color:#fff}
.contact-aside h3{color:#fff;font-size:1.3rem}
.contact-aside a{color:#fff;font-weight:600}
.contact-aside a:hover{color:var(--gold-dark)}
.contact-aside .blk{padding:17px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.contact-aside .blk:last-child{border-bottom:0}
.contact-aside .lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--gold-light);font-weight:700;margin-bottom:6px}
.contact-aside p{color:#D3DDF9;margin:0;font-size:.95rem}

/* action cards (book / pay) */
.action-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;
  box-shadow:var(--sh-sm);display:flex;flex-direction:column;transition:.24s}
.action-card:hover{box-shadow:var(--sh);border-color:#C6D3EE;transform:translateY(-3px)}
.action-card .ico{width:50px;height:50px;border-radius:var(--r);display:grid;place-items:center;margin-bottom:18px}
.action-card .ico svg{width:24px;height:24px;fill:#fff}
.ico-book{background:var(--navy)}
.ico-pay{background:linear-gradient(135deg,var(--coral) 0%,var(--pink) 100%)}
.action-card h3{margin-bottom:.45em}
.action-card p{color:var(--muted);font-size:.95rem;flex:1}
.secure-note{display:inline-flex;align-items:center;gap:7px;font-size:.81rem;color:var(--muted);margin-top:12px}
.secure-note svg{width:13px;height:13px;fill:var(--gold);flex:0 0 13px}

/* ---------------- CTA band ---------------- */
.cta{background:var(--navy);color:#fff;text-align:center;padding:78px 0;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:760px;height:420px;background:radial-gradient(ellipse,rgba(91,141,239,.26) 0%,transparent 66%)}
.cta .container{position:relative;z-index:2}
.cta h2{color:#fff}
.cta p{color:#CFDBFB;max-width:62ch;margin:0 auto 30px;font-size:1.06rem}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--navy-deep);color:#A8B6DC;padding:66px 0 26px;font-size:.94rem}
.site-footer a{color:#C6D2EE}
.site-footer a:hover{color:#fff}
.site-footer a.btn-light{color:var(--navy)}
.site-footer a.btn-light:hover{color:var(--navy)}
.site-footer a.btn-ghost-light{color:#fff}
.f-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:40px}
@media(max-width:920px){.f-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}
.site-footer h4{color:#fff;font-family:var(--sans);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.15em;margin:0 0 16px;font-weight:800}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:10px}
.f-logo{height:40px;width:auto;display:block;margin-bottom:18px}
.f-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.f-actions .btn{font-size:.83rem;padding:11px 18px}
.disclaimer{font-size:.79rem;color:#7E8CB4;line-height:1.72;margin-top:22px;max-width:72ch;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.f-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:26px;padding-top:22px;font-size:.84rem;
  color:#8492BC;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.f-bottom .links{display:flex;gap:20px;flex-wrap:wrap}

.mt0{margin-top:0}.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mb0{margin-bottom:0}


/* ---------------- Motion ---------------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(22px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}
  .reveal-d3{transition-delay:.24s}.reveal-d4{transition-delay:.32s}
  .hero h1,.hero .lead,.hero .btn-row,.hero .eyebrow,.hero .rule{animation:heroUp .8s cubic-bezier(.22,.61,.36,1) both}
  .hero .eyebrow{animation-delay:.04s}.hero h1{animation-delay:.1s}
  .hero .rule{animation-delay:.18s}.hero .lead{animation-delay:.24s}.hero .btn-row{animation-delay:.32s}
  .hero .panel,.hero-sub .panel{animation:heroUp .9s cubic-bezier(.22,.61,.36,1) .26s both}
  @keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  .card,.action-card,.bio,.price-box{will-change:transform}
  .cred{transition:background .3s}
  .cred:hover{background:rgba(255,255,255,.07)}
  .site-footer a,.mega li a,.nav > li > a{transition:color .18s, background .18s, padding-left .18s}
  .site-footer a:not(.btn):hover{padding-left:3px}
  .btn{will-change:transform}
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* social */
.social{display:flex;gap:10px;margin-top:18px;list-style:none;padding:0}
.social li{margin:0}
.social a{width:38px;height:38px;border-radius:var(--r);border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;transition:.2s}
.social a:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-2px)}
.social svg{width:17px;height:17px;fill:currentColor}
.social-inline{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.social-inline svg{width:17px;height:17px;fill:currentColor}

/* attorney trust band */
.trust-band{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media(max-width:860px){.trust-grid{grid-template-columns:1fr}}
.trust-item{display:flex;gap:16px;align-items:flex-start}
.trust-item .tick-ico{width:40px;height:40px;flex:0 0 40px;border-radius:var(--r);background:var(--navy);
  display:grid;place-items:center}
.trust-item .tick-ico svg{width:20px;height:20px;fill:#fff}
.trust-item h3{font-size:1.06rem;margin:0 0 .3em}
.trust-item p{font-size:.93rem;color:var(--muted);margin:0}
.badge-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:10px 16px;font-size:.86rem;font-weight:600;color:var(--navy)}
.badge svg{width:15px;height:15px;fill:var(--gold)}


/* ---------------- Dark hero (home) ---------------- */
.hero-dark{position:relative;padding:96px 0 104px;color:#fff;overflow:hidden;
  background:linear-gradient(160deg,var(--navy-deep) 0%,var(--navy) 62%,#0A2FA8 100%)}
.hero-dark::before{content:"";position:absolute;top:-220px;right:-160px;width:640px;height:640px;
  border-radius:50%;background:radial-gradient(circle,rgba(91,141,239,.20) 0%,transparent 62%)}
.hero-dark::after{content:"";position:absolute;bottom:-260px;left:-180px;width:560px;height:560px;
  border-radius:50%;background:radial-gradient(circle,rgba(96,150,253,.16) 0%,transparent 64%)}
.hero-dark .container{position:relative;z-index:2}
.hero-dark .eyebrow{color:var(--gold-light)}
.hero-dark h1{color:#fff;font-size:clamp(2.5rem,4.6vw,4rem);max-width:17ch}
.hero-dark .rule{background:var(--gold)}
.hero-dark .lead{color:#C9D6F5;max-width:58ch;font-size:1.16rem}
.hero-dark .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}
@media(max-width:940px){.hero-dark .hero-grid{grid-template-columns:1fr;gap:42px}}
.hero-dark .panel{border:0;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.hero-points{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16)}
.hero-points .pt{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:600;color:#DDE7FC}
.hero-points .pt svg{width:15px;height:15px;fill:var(--gold-light);flex:0 0 15px}


/* long headline variant */
.hero-dark h1.h1-long{font-size:clamp(1.7rem,2.7vw,2.7rem);max-width:26ch;line-height:1.22}

/* ---------------- Hero-dark entrance + ambient motion ---------------- */
@media (prefers-reduced-motion: no-preference){
  .hero-dark .eyebrow,.hero-dark h1,.hero-dark .rule,.hero-dark .lead,
  .hero-dark .btn-row,.hero-dark .hero-points{animation:heroUp .85s cubic-bezier(.22,.61,.36,1) both}
  .hero-dark .eyebrow{animation-delay:.05s}
  .hero-dark h1{animation-delay:.12s}
  .hero-dark .rule{animation-delay:.2s}
  .hero-dark .lead{animation-delay:.27s}
  .hero-dark .btn-row{animation-delay:.36s}
  .hero-dark .hero-points{animation-delay:.46s}
  .hero-dark .panel{animation:panelIn .7s cubic-bezier(.22,.61,.36,1) .18s both}
  @keyframes panelIn{from{opacity:0;transform:translateY(34px) scale(.985)}to{opacity:1;transform:none}}
  .hero-dark::before{animation:drift1 17s ease-in-out infinite alternate}
  .hero-dark::after{animation:drift2 21s ease-in-out infinite alternate}
  @keyframes drift1{from{transform:translate(0,0)}to{transform:translate(-46px,34px)}}
  @keyframes drift2{from{transform:translate(0,0)}to{transform:translate(52px,-30px)}}
  .hero-dark .rule,.hero-sub .rule{transform-origin:left center;
    animation:ruleGrow .9s cubic-bezier(.22,.61,.36,1) .2s both}
  .sec-head.reveal .rule{transform:scaleX(0);transform-origin:center}
  .sec-head.reveal.in .rule{animation:ruleGrow .8s cubic-bezier(.22,.61,.36,1) .18s both}
  @keyframes ruleGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  /* mega panel: links cascade in */
  .mega-inner > .mega-grid > div{opacity:0;transform:translateY(10px);
    transition:opacity .3s ease, transform .3s ease}
  .nav > li.open .mega-inner > .mega-grid > div{opacity:1;transform:none}
  .nav > li.open .mega-inner > .mega-grid > div:nth-child(1){transition-delay:.05s}
  .nav > li.open .mega-inner > .mega-grid > div:nth-child(2){transition-delay:.12s}
  .nav > li.open .mega-inner > .mega-grid > div:nth-child(3){transition-delay:.19s}

  /* button sheen sweep */
  .btn{position:relative;overflow:hidden}
  .btn::before{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);
    transform:skewX(-18deg);transition:left .55s ease}
  .btn:hover::before{left:145%}

  /* header condenses on scroll */
  .site-header{transition:box-shadow .3s ease}
  body.scrolled .site-header{box-shadow:0 6px 24px rgba(2,17,79,.12)}
  .brand-logo{transition:height .3s ease}
  body.scrolled .brand-logo{height:38px}

  /* scroll progress bar */
  #scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;
    background:linear-gradient(90deg,var(--gold),var(--gold-light));z-index:1200;
    transition:width .12s linear}

  /* hero panel: heading and each service line "type" on, left to right, in sequence */
  .hero-dark .panel h3,.hero-dark .panel li{
    clip-path:inset(0 100% 0 0);
    animation:typeOut .5s steps(24,end) both}
  .hero-dark .panel h3{animation-delay:.55s}
  .hero-dark .panel li:nth-child(1){animation-delay:1s}
  .hero-dark .panel li:nth-child(2){animation-delay:1.32s}
  .hero-dark .panel li:nth-child(3){animation-delay:1.64s}
  .hero-dark .panel li:nth-child(4){animation-delay:1.96s}
  .hero-dark .panel li:nth-child(5){animation-delay:2.28s}
  @keyframes typeOut{to{clip-path:inset(0 -1% 0 0)}}
  .hero-dark .panel .btn{animation:heroUp .55s cubic-bezier(.22,.61,.36,1) 2.65s both}

  /* step number tiles pop when revealed */
  .step.reveal .step-num{}
  .step::before{transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s}
  .step:hover::before{transform:scale(1.12) rotate(-3deg);background:var(--gold)}

  /* card icon nudge */
  .icon{transition:.24s, transform .35s cubic-bezier(.34,1.56,.64,1)}
  .card:hover .icon{transform:translateY(-4px)}

  /* sub-page hero entrance */
  .hero-sub .breadcrumb,.hero-sub .eyebrow,.hero-sub h1,.hero-sub .rule,
  .hero-sub .lead,.hero-sub .btn-row,.hero-sub .post-meta,.hero-sub .secure-note{
    animation:heroUp .75s cubic-bezier(.22,.61,.36,1) both}
  .hero-sub .breadcrumb{animation-delay:.02s}
  .hero-sub .eyebrow{animation-delay:.07s}
  .hero-sub h1{animation-delay:.13s}
  .hero-sub .rule{animation-delay:.2s}
  .hero-sub .lead{animation-delay:.26s}
  .hero-sub .btn-row{animation-delay:.34s}
  .hero-sub .post-meta{animation-delay:.3s}
  .hero-sub .secure-note{animation-delay:.42s}
  .hero-sub .panel,.hero-sub .price-box{animation:panelIn .95s cubic-bezier(.22,.61,.36,1) .28s both}
}


/* ---------------- Brand palette: practice-area color coding ----------------
   Categories inherit --gold-dark by default; these tint them per practice area
   using the brand palette. Purely a color change — no layout impact. */
.cat[data-area="ip"],
.cat.ip{color:#C2434C}                      /* coral, darkened for contrast */
.cat[data-area="business"],
.cat.business{color:#2F62D9}                /* cornflower, darkened */
.cat[data-area="compliance"],
.cat.compliance{color:#0B6B43}              /* green, darkened */

/* Soft brand tints available for future section backgrounds */
.bg-mint{background:#EAF8EF}
.bg-coral{background:#FEF0F1}
.bg-periwinkle{background:#EDF0FE}

/* Trust badges pick up the cornflower accent */
.badge svg{fill:var(--blue)}
.secure-note svg{fill:var(--green)}

/* Review stars use periwinkle on navy; pink underlines the client-review tag */
.stars{color:var(--periwinkle)}
.review-tag{border-color:var(--pink)}

/* ==========================================================================
   PRACTICE-AREA COLOUR CODING
   Nonprofits = green/mint · Business = cornflower · IP = coral/pink
   Color only — no layout, spacing or type changes.
   Text-bearing elements use darkened variants so they stay legible on white;
   the raw brand colors are reserved for fills, borders and icon chrome.
   ========================================================================== */
:root{
  --area-nonprofit:var(--green);       --area-nonprofit-soft:#EAF8EF; --area-nonprofit-text:#0B6B43;
  --area-business:var(--blue);         --area-business-soft:#EDF3FF;  --area-business-text:#2F62D9;
  --area-ip:var(--coral);              --area-ip-soft:#FEF0F1;        --area-ip-text:#C2434C;
  --area-compliance:var(--mint);       --area-compliance-soft:#EAF8EF;--area-compliance-text:#0B6B43;
}

/* ---- category labels ---- */
.cat.nonprofit,.eyebrow.nonprofit{color:var(--area-nonprofit-text)}
.cat.business,.eyebrow.business{color:var(--area-business-text)}
.cat.ip,.eyebrow.ip{color:var(--area-ip-text)}
.cat.compliance,.eyebrow.compliance{color:var(--area-compliance-text)}

/* ---- homepage service cards ---- */
.card.area-nonprofit .icon{background:var(--area-nonprofit-soft);border-color:#B6E4C6}
.card.area-nonprofit .icon svg{stroke:var(--area-nonprofit-text)}
.card.area-nonprofit:hover .icon{background:var(--area-nonprofit);border-color:var(--area-nonprofit)}
.card.area-nonprofit:hover::after{background:var(--area-nonprofit)}
.card.area-nonprofit .more:hover{color:var(--area-nonprofit-text)}

.card.area-business .icon{background:var(--area-business-soft);border-color:#C9D3FB}
.card.area-business .icon svg{stroke:var(--area-business-text)}
.card.area-business:hover .icon{background:var(--area-business);border-color:var(--area-business)}
.card.area-business:hover::after{background:var(--area-business)}
.card.area-business .more:hover{color:var(--area-business-text)}

.card.area-ip .icon{background:var(--area-ip-soft);border-color:#FBC9CD}
.card.area-ip .icon svg{stroke:var(--area-ip-text)}
.card.area-ip:hover .icon{background:var(--area-ip);border-color:var(--area-ip)}
.card.area-ip:hover::after{background:var(--area-ip)}
.card.area-ip .more:hover{color:var(--area-ip-text)}
.card.area-nonprofit:hover .icon svg,
.card.area-business:hover .icon svg,
.card.area-ip:hover .icon svg{stroke:#fff}

/* ---- practice-area pages: hero rule, eyebrow and accents take the area color ---- */
body[data-area="nonprofit"] .hero .rule,
body[data-area="nonprofit"] .hero-sub .rule,
body[data-area="nonprofit"] .sec-head .rule{background:var(--area-nonprofit)}
body[data-area="nonprofit"] .hero .eyebrow,
body[data-area="nonprofit"] .hero-sub .eyebrow{color:var(--area-nonprofit-text)}
body[data-area="nonprofit"] .panel li::before,
body[data-area="nonprofit"] .faq summary::after{color:var(--area-nonprofit);background:none}
body[data-area="nonprofit"] .panel li::before{background:var(--area-nonprofit)}
body[data-area="nonprofit"] .panel::before,
body[data-area="nonprofit"] .price-box::before,
body[data-area="nonprofit"] .library::before{
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 55%,var(--area-nonprofit) 100%)}

body[data-area="business"] .hero .rule,
body[data-area="business"] .hero-sub .rule,
body[data-area="business"] .sec-head .rule{background:var(--area-business)}
body[data-area="business"] .hero .eyebrow,
body[data-area="business"] .hero-sub .eyebrow{color:var(--area-business-text)}
body[data-area="business"] .panel li::before{background:var(--area-business)}
body[data-area="business"] .faq summary::after{color:var(--area-business)}
body[data-area="business"] .panel::before,
body[data-area="business"] .price-box::before,
body[data-area="business"] .library::before{
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 55%,var(--area-business) 100%)}

body[data-area="ip"] .hero .rule,
body[data-area="ip"] .hero-sub .rule,
body[data-area="ip"] .sec-head .rule{background:var(--area-ip)}
body[data-area="ip"] .hero .eyebrow,
body[data-area="ip"] .hero-sub .eyebrow{color:var(--area-ip-text)}
body[data-area="ip"] .panel li::before{background:var(--area-ip)}
body[data-area="ip"] .faq summary::after{color:var(--area-ip)}
body[data-area="ip"] .panel::before,
body[data-area="ip"] .price-box::before,
body[data-area="ip"] .library::before{
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 55%,var(--area-ip) 100%)}

/* ==========================================================================
   AIRY THEME — more white, softer edges, pops of brand color.
   Appended as overrides: nothing above is deleted, so reverting means
   deleting this block. Color, spacing and radius only — no layout changes.
   ========================================================================== */
:root{
  --r:12px;
  --r-lg:22px;
  --sh-sm:0 2px 10px rgba(3,27,136,.045);
  --sh:0 10px 34px rgba(3,27,136,.07);
  --sh-lg:0 26px 70px rgba(3,27,136,.10);
  --line:#E9EDF7;
  --line-soft:#F3F6FC;
}

/* ---- breathing room ---- */
section{padding:110px 0}
.sec-tight{padding:72px 0}
.sec-head{margin-bottom:60px}
.container{padding:0 32px}
body{font-size:17.5px;line-height:1.78}

/* ---- buttons: softer, lighter ---- */
.btn{border-radius:999px;padding:16px 34px;font-weight:600}
.btn-sm{padding:11px 22px}
.btn-lg{padding:18px 40px}
.btn-primary{box-shadow:0 6px 18px rgba(3,27,136,.14)}
.btn-accent{background:var(--coral);border-color:var(--coral);color:#fff}
.btn-accent:hover{background:#F4626C;border-color:#F4626C;box-shadow:0 10px 26px rgba(251,123,131,.38)}

/* ---- HERO: was a dark navy slab, now white and open ---- */
.hero-dark{
  background:#fff;color:var(--body);padding:104px 0 96px;
  border-bottom:1px solid var(--line-soft)}
.hero-dark::before{
  background:radial-gradient(circle,rgba(96,150,253,.20) 0%,transparent 66%);
  top:-260px;right:-200px;width:720px;height:720px}
.hero-dark::after{
  background:radial-gradient(circle,rgba(168,221,181,.28) 0%,transparent 66%);
  bottom:-300px;left:-220px;width:640px;height:640px}
.hero-dark h1{color:var(--navy)}
.hero-dark .lead{color:var(--muted)}
.hero-dark .eyebrow{color:var(--area-ip-text)}
.hero-dark .rule{background:linear-gradient(90deg,var(--coral),var(--blue));width:72px}
.hero-dark .hero-points{border-top:1px solid var(--line)}
.hero-dark .hero-points .pt{color:var(--ink)}
.hero-dark .hero-points .pt svg{fill:var(--green)}
.hero-dark .btn-ghost-light{background:transparent;color:var(--navy);border-color:#C9D3FB}
.hero-dark .btn-ghost-light:hover{background:var(--soft);color:var(--navy);border-color:var(--navy)}
.hero-dark .panel{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-lg)}
.hero-dark .panel h3{color:var(--navy)}
.hero-dark .panel li{color:var(--body)}

/* ---- credibility strip: white card row instead of a navy band ---- */
.credbar{background:var(--tertiary-bg);border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft)}
.credbar .container{padding:0 32px}
.cred{border-right:1px solid var(--line);padding:34px 20px}
.cred .n{color:var(--navy)}
.cred .l{color:var(--muted)}
.cred:nth-child(1) .n{color:var(--area-nonprofit-text)}
.cred:nth-child(2) .n{color:var(--area-business-text)}
.cred:nth-child(3) .n{color:var(--area-ip-text)}
.cred:nth-child(4) .n{color:var(--navy)}
.cred:hover{background:rgba(255,255,255,.7)}
@media(max-width:820px){
  .cred:nth-child(1),.cred:nth-child(3){border-right:1px solid var(--line)}
  .cred:nth-child(1),.cred:nth-child(4){border-bottom:1px solid var(--line)}}

/* ---- cards: lighter, colorful on hover ---- */
.card{padding:38px 34px;border-color:var(--line)}
.card:hover{box-shadow:var(--sh);border-color:var(--line);transform:translateY(-5px)}
.card::after{width:4px;border-radius:var(--r) 0 0 var(--r)}
.icon{width:60px;height:60px;border-radius:16px;margin-bottom:24px}

/* ---- chips + tags: pastel pops ---- */
.chips li{border:0;font-weight:600}
.chips li:nth-child(4n+1){background:#EAF8EF;color:var(--area-nonprofit-text)}
.chips li:nth-child(4n+2){background:#EDF3FF;color:var(--area-business-text)}
.chips li:nth-child(4n+3){background:#FEF0F1;color:var(--area-ip-text)}
.chips li:nth-child(4n+4){background:#EDF0FE;color:var(--navy)}
.review-tag{background:#FEF0F1;color:var(--area-ip-text);border-color:#FBC9CD}
.badge{border-color:var(--line)}

/* ---- CTA band: soft tint, not a navy slab ---- */
.cta{background:linear-gradient(135deg,#EDF3FF 0%,#EAF8EF 100%);color:var(--body);padding:96px 0}
.cta::before{background:radial-gradient(ellipse,rgba(251,123,131,.16) 0%,transparent 66%)}
.cta h2{color:var(--navy)}
.cta p{color:var(--muted)}
.cta .btn-light{background:var(--navy);color:#fff;border-color:var(--navy)}
.cta .btn-light:hover{background:var(--navy-800);color:#fff}
.cta .btn-ghost-light{color:var(--navy);border-color:#B9C7F5}
.cta .btn-ghost-light:hover{background:#fff;color:var(--navy);border-color:var(--navy)}

/* ---- navy blocks soften to tinted cards ---- */
.side-panel{background:linear-gradient(150deg,#EDF3FF,#EDF0FE);color:var(--body)}
.side-panel h2{color:var(--navy)}
.side-panel p{color:var(--muted)}
.side-panel::before{background:rgba(96,150,253,.14)}
.lib-side{background:#EAF8EF;color:var(--body)}
.lib-side h3{color:var(--area-nonprofit-text)}
.lib-side li{color:var(--body)}
.contact-aside{background:linear-gradient(150deg,#EDF3FF,#EAF8EF);color:var(--body)}
.contact-aside h3{color:var(--navy)}
.contact-aside a{color:var(--navy)}
.contact-aside p{color:var(--muted)}
.contact-aside .lbl{color:var(--area-ip-text)}
.contact-aside .blk{border-bottom:1px solid rgba(3,27,136,.10)}
.review-top{background:linear-gradient(135deg,var(--navy),#0A2FA8)}
.mega-card{background:linear-gradient(155deg,#EDF3FF,#EAF8EF);color:var(--body)}
.mega-card h6{color:var(--navy)}
.mega-card p{color:var(--muted)}
.mega-card .btn{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---- steps: colorful number tiles ---- */
.step:nth-child(4n+1)::before{background:var(--area-nonprofit)}
.step:nth-child(4n+2)::before{background:var(--area-business)}
.step:nth-child(4n+3)::before{background:var(--area-ip)}
.step:nth-child(4n+4)::before{background:var(--navy)}

/* ---- FOOTER: light and airy, navy type ---- */
.site-footer{background:var(--tertiary-bg);color:var(--muted);
  border-top:1px solid var(--line);padding:80px 0 30px}
.site-footer a{color:var(--body)}
.site-footer a:hover{color:var(--navy)}
.site-footer h4{color:var(--navy)}
.f-logo{height:52px}
.disclaimer{color:#7A8399;border-top:1px solid var(--line)}
.f-bottom{border-top:1px solid var(--line);color:#7A8399}
.social a{border:1px solid var(--line);color:var(--navy);background:#fff}
.social a:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---- utility bar stays navy for contrast, softened ---- */
.utility{background:var(--navy)}

/* ---- forms ---- */
input,textarea,select{border-radius:12px;border-color:#DCE3F5}
.form-card{box-shadow:var(--sh)}

/* ---- section tints for rhythm ---- */
.bg-soft{background:var(--tertiary-bg)}
.bg-tint{background:#EDF3FF}
.bg-navy{background:linear-gradient(135deg,#EDF3FF,#EAF8EF);color:var(--body)}
.bg-navy h2,.bg-navy h3,.bg-navy h4{color:var(--navy)}

/* ---- trust band ---- */
.trust-band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-item:nth-child(1) .tick-ico{background:var(--area-nonprofit)}
.trust-item:nth-child(2) .tick-ico{background:var(--area-business)}
.trust-item:nth-child(3) .tick-ico{background:var(--area-ip)}
.tick-ico{border-radius:14px}

/* ---- hero panel typing animation off (it read as gimmicky on white) ---- */
@media (prefers-reduced-motion: no-preference){
  .hero-dark .panel h3,.hero-dark .panel li{clip-path:none;animation:none}
  .hero-dark .panel .btn{animation:heroUp .55s cubic-bezier(.22,.61,.36,1) .5s both}
}

/* ---------------- Comparison table (trademark filing options) ---------------- */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm)}
.cmp-table{width:100%;border-collapse:collapse;min-width:720px;font-size:.94rem}
.cmp-table th,.cmp-table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.cmp-table thead th{font-family:var(--sans);font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;
  font-weight:800;color:var(--muted);background:var(--tertiary-bg);border-bottom:2px solid var(--line)}
.cmp-table tbody th{font-weight:600;color:var(--ink);width:22%}
.cmp-table td{color:var(--muted)}
.cmp-table tr:last-child th,.cmp-table tr:last-child td{border-bottom:0}
.cmp-table .cmp-us{background:var(--area-ip-soft);color:var(--ink);font-weight:600}
.cmp-table thead th.cmp-us{color:var(--area-ip-text);background:#FDE4E6}
.cmp-table tbody tr:hover td,.cmp-table tbody tr:hover th{background:rgba(96,150,253,.04)}
.cmp-table tbody tr:hover td.cmp-us{background:var(--area-ip-soft)}
@media(max-width:760px){.cmp-wrap{border-radius:var(--r)}.cmp-table{font-size:.88rem}
  .cmp-table th,.cmp-table td{padding:13px 14px}}

/* ---------------- Team headshots ---------------- */
.avatar-photo{width:104px;height:104px;border-radius:50%;object-fit:cover;display:block;
  margin-bottom:20px;border:3px solid #fff;box-shadow:0 6px 20px rgba(3,27,136,.16)}
.bio:hover .avatar-photo{box-shadow:0 10px 28px rgba(3,27,136,.22)}
@media(max-width:560px){.avatar-photo{width:88px;height:88px}}

/* ---------------- Attorney bios (redesigned) ---------------- */
.bio{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:44px;box-shadow:var(--sh-sm);margin-bottom:32px;transition:.25s ease;
  position:relative;overflow:hidden}
.bio::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 45%,var(--blue) 75%,var(--green) 100%)}
.bio:hover{box-shadow:var(--sh);transform:translateY(-3px)}
.bio:last-child{margin-bottom:0}
.bio-photo img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:var(--r-lg);display:block;box-shadow:0 10px 30px rgba(3,27,136,.14)}
.bio-body .role{font-family:var(--sans);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.16em;font-weight:800;color:var(--area-business-text);margin:0 0 .5rem}
.bio-body .name{font-family:var(--display);font-size:clamp(1.6rem,2.4vw,2.05rem);
  color:var(--navy);margin:0 0 .7rem;font-weight:700;letter-spacing:-.02em}
.bio-body .rule{width:52px;height:3px;margin:0 0 1.3rem;
  background:linear-gradient(90deg,var(--blue),var(--green));border:0}
.bio-body p{color:var(--body);font-size:1rem;line-height:1.78}
.bio-facts{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;
  margin:1.6rem 0 0;border-top:1px solid var(--line-soft);padding-top:1.5rem}
.bio-facts li{margin:0;padding:8px 15px;border-radius:999px;background:var(--soft);
  color:var(--navy);font-size:.82rem;font-weight:600;line-height:1.3}
.bio-facts li:nth-child(4n+2){background:#EAF8EF;color:var(--area-nonprofit-text)}
.bio-facts li:nth-child(4n+3){background:#EDF0FE}
.bio-facts li:nth-child(4n+4){background:#FEF0F1;color:var(--area-ip-text)}
@media(max-width:860px){
  .bio{grid-template-columns:1fr;gap:28px;padding:32px 26px;text-align:left}
  .bio-photo{max-width:190px}
}

/* ---- fix: utility-bar hover was navy-on-navy after the palette change ---- */
.utility a:hover{color:var(--periwinkle)}
.utility .u-item a:hover,.utility a[href^="tel"]:hover,.utility a[href^="mailto"]:hover{color:#fff}

/* ---- resources hero: keep the headline from spanning the full container ---- */
.res-hero h1{max-width:18ch;margin-left:auto;margin-right:auto}
.res-hero .lead{max-width:62ch;margin-left:auto;margin-right:auto}
.res-hero .rule{margin-left:auto;margin-right:auto}
/* ---- checklist email gate ---- */
#checklist-gate{max-width:640px;margin-left:auto;margin-right:auto}
#checklist-gate h3{margin-bottom:.4em}
#cl-status{padding:15px 18px;border-radius:var(--r);margin-top:16px;display:none;font-size:.94rem}
#cl-status.ok{display:block;background:#EAF8EF;color:#0B6B43;border:1px solid var(--mint)}
#cl-status.err{display:block;background:#FDF1F1;color:#A32020;border:1px solid #E5B8B8}

/* ---- fix: .btn-light is a WHITE button; these containers are now light,
        so it rendered white-on-white. Give it the navy primary treatment. ---- */
.hero-dark .btn-light,
.bg-navy .btn-light,
.side-panel .btn-light,
.lib-side .btn-light,
.contact-aside .btn-light{
  background:var(--navy);color:#fff;border-color:var(--navy);
  box-shadow:0 6px 18px rgba(3,27,136,.14)}
.hero-dark .btn-light:hover,
.bg-navy .btn-light:hover,
.side-panel .btn-light:hover,
.lib-side .btn-light:hover,
.contact-aside .btn-light:hover{
  background:var(--navy-800);border-color:var(--navy-800);color:#fff}
/* ghost buttons carried white text for a dark background that no longer exists */
.bg-navy .btn-ghost-light,
.side-panel .btn-ghost-light,
.lib-side .btn-ghost-light,
.contact-aside .btn-ghost-light{
  background:transparent;color:var(--navy);border-color:#C9D3FB}
.bg-navy .btn-ghost-light:hover,
.side-panel .btn-ghost-light:hover,
.lib-side .btn-ghost-light:hover,
.contact-aside .btn-ghost-light:hover{
  background:var(--soft);color:var(--navy);border-color:var(--navy)}
/* eyebrow tuned for dark backgrounds that are now light */
.bg-navy .eyebrow.on-dark,.side-panel .eyebrow.on-dark,
.hero-dark .eyebrow.on-dark{color:var(--area-business-text)}

/* ---- centerd hero: constrain measure so headlines stop spanning the container
        and close the gap before the first section. Applies site-wide. ---- */
.hero .narrow.center h1{max-width:20ch;margin-left:auto;margin-right:auto}
.hero .narrow.center .lead{max-width:60ch;margin-left:auto;margin-right:auto}
.hero .narrow.center .rule{margin-left:auto;margin-right:auto}
.hero .narrow.center .breadcrumb{margin-bottom:1.1rem}
.hero:has(.narrow.center){padding-top:44px;padding-bottom:36px}
/* fallback for browsers without :has() */
.hero.hero-centered{padding-top:44px;padding-bottom:36px}

/* ==========================================================================
   WHIMSY PASS — warmth and motion, drawn from the leaf motif in the logo.
   CSS only. Delete this block to revert entirely.
   Restraint is deliberate: this is a law firm, so the playfulness lives in
   micro-interactions and small brand marks, never in the typography or layout.
   ========================================================================== */

/* ---- 1. Leaf sprig from the logo, as a quiet section mark ---- */
.sec-head{position:relative}
.sec-head .rule.c{position:relative}
.sec-head .rule.c::after{
  content:"";position:absolute;left:50%;top:-26px;transform:translateX(-50%);
  width:20px;height:20px;opacity:.5;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C12 12 6 8 3 7c0 8 4 12 9 15z' fill='%2334D399'/%3E%3Cpath d='M12 22c0-8 5-12 9-13 0 7-4 11-9 13z' fill='%23A8DDB5'/%3E%3C/svg%3E")}

/* ---- 2. Cards: a gentler, springier lift ---- */
.card,.action-card,.price-box,.bio{
  transition:transform .38s cubic-bezier(.34,1.4,.64,1), box-shadow .38s ease, border-color .3s ease}
.card:hover,.action-card:hover{transform:translateY(-6px)}
.card .icon{transition:transform .45s cubic-bezier(.34,1.6,.64,1), background .3s, border-color .3s}
.card:hover .icon{transform:translateY(-5px) rotate(-6deg)}

/* ---- 3. Step numbers tilt as you pass ---- */
.step::before{transition:transform .4s cubic-bezier(.34,1.5,.64,1), background .3s}
.step:hover::before{transform:rotate(-8deg) scale(1.08)}

/* ---- 4. Links that draw themselves in ---- */
.card .more,.read-more{position:relative;display:inline-block}
.card .more::after,.read-more::after{
  content:"";position:absolute;left:0;bottom:-3px;height:2px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .34s cubic-bezier(.22,.61,.36,1);border-radius:2px}
.card:hover .more::after,.read-more:hover::after{transform:scaleX(1);transform-origin:left}

/* ---- 5. A soft highlight behind the word that matters ---- */
.hl{position:relative;z-index:0;color:var(--navy);font-weight:700}
.hl::before{content:"";position:absolute;left:-.12em;right:-.12em;bottom:.04em;height:.42em;
  z-index:-1;border-radius:.28em;background:rgba(168,221,181,.55);transform:rotate(-.6deg)}

/* ---- 6. Chips lift a little when touched ---- */
.chips li,.bio-facts li{transition:transform .28s cubic-bezier(.34,1.5,.64,1), box-shadow .28s}
.chips li:hover,.bio-facts li:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(3,27,136,.10)}

/* ---- 7. Eyebrow gets a small leading dot in the practice-area color ---- */
.eyebrow::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:currentColor;margin-right:9px;vertical-align:middle;opacity:.65}
.sec-head .eyebrow::before{display:none}

/* ---- 8. Price figure gets a hint of gradient ---- */
.price{background:linear-gradient(100deg,var(--navy) 0%,var(--navy) 55%,#2F62D9 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.price small{background:none;-webkit-text-fill-color:var(--muted);color:var(--muted)}

/* ---- 9. FAQ marker rotates rather than swapping glyphs ---- */
.faq summary::after{transition:transform .3s cubic-bezier(.34,1.5,.64,1)}
.faq details[open] summary::after{content:"+";transform:rotate(45deg)}

/* ---- 10. Footer social icons bounce a touch ---- */
.social a{transition:transform .32s cubic-bezier(.34,1.6,.64,1), background .25s, border-color .25s}
.social a:hover{transform:translateY(-4px) rotate(-6deg)}

/* Respect users who'd rather not have any of this */
@media (prefers-reduced-motion: reduce){
  .card:hover,.action-card:hover,.card:hover .icon,.step:hover::before,
  .chips li:hover,.bio-facts li:hover,.social a:hover{transform:none}
  .card .more::after,.read-more::after{display:none}
}

/* ==========================================================================
   WHIMSY PASS 2 — changes you can see without hovering.
   Still CSS-only and reversible; still nothing done to type or layout.
   ========================================================================== */

/* ---- Hero headline: the last few words carry the brand gradient ---- */
.hero-dark h1{
  background:linear-gradient(112deg,var(--navy) 0%,var(--navy) 52%,#2F62D9 78%,var(--green) 130%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- Sections sit on soft organic color, not flat white ---- */
section{position:relative}
.bg-soft{position:relative;overflow:hidden}
.bg-soft::before{content:"";position:absolute;top:-140px;right:-160px;width:460px;height:460px;
  border-radius:47% 53% 61% 39%/44% 51% 49% 56%;
  background:radial-gradient(circle,rgba(168,221,181,.30) 0%,transparent 70%);pointer-events:none}
.bg-soft::after{content:"";position:absolute;bottom:-180px;left:-150px;width:400px;height:400px;
  border-radius:58% 42% 39% 61%/52% 45% 55% 48%;
  background:radial-gradient(circle,rgba(96,150,253,.22) 0%,transparent 70%);pointer-events:none}
.bg-soft > .container{position:relative;z-index:1}

/* ---- Service cards: a permanent color bar, not just on hover ---- */
.card{position:relative;overflow:hidden}
.card.area-nonprofit::after,.card.area-business::after,.card.area-ip::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:currentColor}
.card.area-nonprofit::after{background:var(--green)}
.card.area-business::after{background:var(--blue)}
.card.area-ip::after{background:var(--coral)}
.card.area-nonprofit .icon{background:#EAF8EF}
.card.area-business  .icon{background:#EDF3FF}
.card.area-ip        .icon{background:#FEF0F1}
.card{border-radius:18px}
.icon{border-radius:18px}

/* ---- Credibility strip: colored leaf beside each figure ---- */
.cred .n{position:relative;display:inline-block}
.cred .n::after{content:"";position:absolute;right:-20px;top:2px;width:14px;height:14px;opacity:.7;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C12 12 6 8 3 7c0 8 4 12 9 15z' fill='%2334D399'/%3E%3C/svg%3E")}

/* ---- Section headings get a soft tinted circle behind the eyebrow ---- */
.sec-head .eyebrow{display:inline-block;padding:7px 18px;border-radius:999px;
  background:var(--soft);color:var(--area-business-text)}

/* ---- Buttons: a touch more life ---- */
.btn-primary{background:linear-gradient(120deg,var(--navy) 0%,#0A2FA8 100%)}
.btn-primary:hover{background:linear-gradient(120deg,var(--navy-800) 0%,#0A2FA8 100%)}

/* ---- Blockquote-ish review panel gets a leaf watermark ---- */
.review{position:relative;overflow:hidden}
.review::after{content:"";position:absolute;right:-30px;bottom:-30px;width:150px;height:150px;opacity:.07;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C12 12 6 8 3 7c0 8 4 12 9 15z' fill='%23031B88'/%3E%3Cpath d='M12 22c0-8 5-12 9-13 0 7-4 11-9 13z' fill='%23031B88'/%3E%3C/svg%3E")}

/* ---- CTA band: organic edge rather than a hard rectangle ---- */
.cta{border-radius:36px;margin:0 22px;overflow:hidden}
@media(max-width:700px){.cta{border-radius:24px;margin:0 12px}}

/* ==========================================================================
   REFERENCE PASS — cleaner hero, closer to the layout you liked.
   Overrides parts of WHIMSY PASS 2 deliberately.
   ========================================================================== */

/* Solid navy headline: the gradient read as gimmicky at this size */
.hero-dark h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--navy);letter-spacing:-.028em;line-height:1.12}
.hero-dark h1.h1-long{font-size:clamp(2.1rem,3.6vw,3.35rem);max-width:15ch}

/* Eyebrow: short coral dash, not a dot */
.hero-dark .eyebrow::before{width:26px;height:3px;border-radius:2px;
  background:var(--coral);opacity:1;margin-right:12px;vertical-align:middle}
.hero-dark .eyebrow{color:var(--navy);letter-spacing:.14em}
.hero-dark .rule{display:none}          /* the dash replaces it */
.hero-dark .lead{font-size:1.06rem;max-width:52ch;color:var(--muted)}
.hero-dark{padding:72px 0 84px}
.hero-dark::before,.hero-dark::after{opacity:.55}

/* Trust points: green ticks, two columns, quieter */
.hero-points{display:grid;grid-template-columns:1fr 1fr;gap:14px 30px;border-top:0;
  padding-top:8px;margin-top:30px}
.hero-points .pt{font-size:.92rem;font-weight:500;color:var(--body);align-items:flex-start}
.hero-points .pt svg{fill:var(--green);width:17px;height:17px;flex:0 0 17px;margin-top:2px}
@media(max-width:620px){.hero-points{grid-template-columns:1fr}}

/* Panel: coral hairline on top, numbered badges, generous padding */
.hero-dark .panel{border-radius:20px;padding:38px 36px;border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(3,27,136,.10)}
.hero-dark .panel::before{height:4px;background:var(--coral)}
.hero-dark .panel h3{font-size:1.32rem;margin-bottom:22px}
.hero-dark .panel ul{counter-reset:hp;margin-bottom:26px}
.hero-dark .panel li{counter-increment:hp;position:relative;padding-left:40px;
  margin-bottom:15px;font-size:.97rem;color:var(--body);line-height:1.6}
.hero-dark .panel li::before{content:counter(hp);position:absolute;left:0;top:1px;
  width:25px;height:25px;border-radius:50%;background:var(--soft);color:var(--area-business-text);
  display:grid;place-items:center;font-size:.76rem;font-weight:700;font-family:var(--sans)}
.hero-dark .panel .btn{width:100%;padding:16px 22px;font-size:.97rem;border-radius:12px}

/* Founding partners strip */
.panel-partners{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--line-soft)}
.pp-avatars{display:inline-flex;flex:0 0 auto}
.pp-avatars img{width:42px;height:42px;border-radius:50%;object-fit:cover;
  border:2.5px solid #fff;box-shadow:0 2px 8px rgba(3,27,136,.16)}
.pp-avatars img:last-child{margin-left:-14px}
.pp-text{font-size:.9rem;color:var(--muted)}
.pp-text a{font-weight:700;color:var(--navy)}
.pp-text a:hover{color:var(--area-business-text)}

/* Calm the blobs on white sections so the hero stays clean */
.hero-dark .panel,.hero-dark .btn-row{position:relative;z-index:2}

/* ==========================================================================
   REFERENCE PASS 2 — carry the homepage hero treatment to every other page.
   Sub-pages use .hero / .hero-sub rather than .hero-dark, so the same rules
   are extended here instead of duplicated per page.
   ========================================================================== */

/* Eyebrows get the coral dash everywhere, not just the homepage */
.hero .eyebrow::before,.hero-sub .eyebrow::before{
  width:26px;height:3px;border-radius:2px;background:var(--coral);
  opacity:1;margin-right:12px;vertical-align:middle}
.hero .eyebrow,.hero-sub .eyebrow{color:var(--navy);letter-spacing:.14em}
/* the dash replaces the separate rule, as on the homepage */
.hero > .container > .hero-grid > div > .rule,
.hero .narrow.center > .rule{display:none}

/* Headline treatment to match */
.hero h1,.hero-sub h1{letter-spacing:-.028em;line-height:1.14;color:var(--navy)}
.hero .hero-grid h1{max-width:16ch}
.hero .lead,.hero-sub .lead{color:var(--muted);font-size:1.05rem}
.hero .hero-grid .lead{max-width:52ch}

/* Panels and price boxes: same coral hairline, rounder, softer shadow */
.hero .panel,.hero-sub .panel,.hero .price-box,.hero-sub .price-box{
  border-radius:20px;padding:38px 36px;border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(3,27,136,.10)}
.hero .panel::before,.hero-sub .panel::before,
.hero .price-box::before,.hero-sub .price-box::before{height:4px;background:var(--coral)}
.hero .panel h3,.hero-sub .panel h3{font-size:1.32rem;margin-bottom:22px}

/* Numbered badges in hero panels, matching the homepage */
.hero .panel ul,.hero-sub .panel ul{counter-reset:hp;margin-bottom:26px}
.hero .panel li,.hero-sub .panel li{counter-increment:hp;position:relative;padding-left:40px;
  margin-bottom:15px;font-size:.97rem;color:var(--body);line-height:1.6}
.hero .panel li::before,.hero-sub .panel li::before{
  content:counter(hp);position:absolute;left:0;top:1px;width:25px;height:25px;border-radius:50%;
  background:var(--soft);color:var(--area-business-text);display:grid;place-items:center;
  font-size:.76rem;font-weight:700;font-family:var(--sans)}
/* price boxes keep ticks — they are inclusions, not steps */
.hero .price-box li::before,.hero-sub .price-box li::before{
  content:"\2713";background:none;color:var(--green);width:auto;height:auto;
  font-size:.95rem;font-weight:800;left:2px;top:0}
.hero .price-box li,.hero-sub .price-box li{padding-left:26px}
.hero .price-box ul,.hero-sub .price-box ul{counter-reset:none}
.hero .panel .btn,.hero-sub .panel .btn,
.hero .price-box .btn,.hero-sub .price-box .btn{width:100%;padding:16px 22px;border-radius:12px}

/* Practice-area pages tint their panel accent to the area colour */
body[data-area="nonprofit"] .hero .panel::before,
body[data-area="nonprofit"] .hero .price-box::before{background:var(--green)}
body[data-area="business"] .hero .panel::before,
body[data-area="business"] .hero .price-box::before{background:var(--blue)}
body[data-area="ip"] .hero .panel::before,
body[data-area="ip"] .hero .price-box::before{background:var(--coral)}
body[data-area="nonprofit"] .hero .panel li::before{background:#EAF8EF;color:var(--area-nonprofit-text)}
body[data-area="ip"] .hero .panel li::before{background:#FEF0F1;color:var(--area-ip-text)}

/* Sub-page heroes: same rhythm as the homepage */
.hero{padding:64px 0 72px}
.hero-sub{padding:56px 0 60px}
.breadcrumb{font-size:.83rem;margin-bottom:1.4rem}

/* ---------------- Legal documents (privacy, terms) ---------------- */
.legal-doc{font-size:1rem;line-height:1.8}
.legal-doc h2{font-size:1.32rem;margin:2.4rem 0 .8rem;padding-top:1.4rem;
  border-top:1px solid var(--line-soft)}
.legal-doc h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.legal-doc p{margin-bottom:1.05em;color:var(--body)}
.legal-doc p strong{color:var(--ink)}
.legal-doc ul{margin:0 0 1.3em;padding-left:1.35em}
.legal-doc li{margin-bottom:.6em}
.legal-caps{font-size:.92rem;letter-spacing:.005em;background:var(--tertiary-bg);
  border-left:3px solid var(--coral);padding:16px 20px;border-radius:0 var(--r) var(--r) 0;
  color:var(--body)}

/* ==========================================================================
   TRUST-COLOR CORRECTION
   Coral/pink tints were reading as warning or error states, which undercuts
   the message in trust contexts (endorsement chips, review tags). Coral is
   retained only as a thin brand accent — dashes and hairlines — never as a
   filled background behind a positive claim.
   ========================================================================== */

/* Endorsement chips cycle green / blue / periwinkle only */
.chips li:nth-child(4n+1){background:#EAF8EF;color:var(--area-nonprofit-text)}
.chips li:nth-child(4n+2){background:#EDF3FF;color:var(--area-business-text)}
.chips li:nth-child(4n+3){background:#EDF0FE;color:var(--navy)}
.chips li:nth-child(4n+4){background:#EAF8EF;color:var(--area-nonprofit-text)}

/* Bio credential chips likewise */
.bio-facts li:nth-child(4n+4){background:#EDF0FE;color:var(--navy)}

/* Client review tag: a positive endorsement should read positive */
.review-tag{background:#EAF8EF;color:var(--area-nonprofit-text);border-color:#B6E4C6}

/* Practice-area IP cards keep their identity, but with a calmer tint */
.card.area-ip .icon{background:#EDF0FE}
.card.area-ip::after{background:var(--blue)}
.cat.ip,.eyebrow.ip{color:var(--area-business-text)}
.cred:nth-child(3) .n{color:var(--area-business-text)}

/* Comparison table: highlight the recommended column in blue, not red */
.cmp-table .cmp-us{background:#EDF3FF}
.cmp-table thead th.cmp-us{color:var(--area-business-text);background:#DDE8FF}

/* Soft tint utility */
.bg-coral{background:#EDF0FE}

/* Final sweep: remaining red-tinted fills in non-warning contexts */
.btn-accent{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-accent:hover{background:var(--area-business-text);border-color:var(--area-business-text);
  color:#fff;box-shadow:0 10px 26px rgba(96,150,253,.38)}
body[data-area="ip"] .hero .panel li::before{background:#EDF3FF;color:var(--area-business-text)}
.ico-pay{background:linear-gradient(135deg,var(--blue) 0%,var(--periwinkle) 100%)}
/* legal disclaimers keep a coral rule — there a caution reading is correct */

/* ---- Footer buttons: the footer went light, these did not follow ----
   .btn-ghost-light carried white text (invisible) and .btn-light was a white
   pill on grey. Give them proper filled / outlined treatment. */
.site-footer .f-actions .btn-light,
.site-footer a.btn-light{
  background:var(--navy);color:#fff;border-color:var(--navy);
  box-shadow:0 4px 14px rgba(3,27,136,.16)}
.site-footer .f-actions .btn-light:hover,
.site-footer a.btn-light:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.site-footer .f-actions .btn-ghost-light,
.site-footer a.btn-ghost-light{
  background:#fff;color:var(--navy) !important;border-color:#C3CEEA}
.site-footer .f-actions .btn-ghost-light:hover,
.site-footer a.btn-ghost-light:hover{
  background:var(--soft);color:var(--navy) !important;border-color:var(--navy)}
.f-actions .btn{font-size:.86rem;padding:12px 22px}

/* ---- Panel / price-box top stripe was overflowing the rounded corners ----
   The ::before bar is absolutely positioned to the element's box, but the
   element wasn't clipping, so on narrow screens the stripe sat proud of the
   card. Clip it, and match the bar's radius to the card's. */
.panel,.price-box,
.hero .panel,.hero-sub .panel,.hero .price-box,.hero-sub .price-box,
.hero-dark .panel,.library{overflow:hidden}
.panel::before,.price-box::before,
.hero .panel::before,.hero-sub .panel::before,
.hero .price-box::before,.hero-sub .price-box::before,
.hero-dark .panel::before,.library::before{
  left:0;right:0;width:auto;border-radius:0}

/* ==========================================================================
   ICON COLOR CYCLE
   Plain .card icons were all the same periwinkle tile, which read as
   monochrome across a 12-card grid. Cycle four brand tints so a grid has
   variety without randomness. Cards with an area-* class keep their own
   practice-area color and are excluded.
   ========================================================================== */
.grid .card:not(.area-nonprofit):not(.area-business):not(.area-ip) .icon{
  border:1px solid transparent}

.grid .card:not(.area-nonprofit):not(.area-business):not(.area-ip):nth-child(4n+1) .icon{background:#EAF8EF;border-color:#C3E7D1}
.grid .card:not(.area-nonprofit):not(.area-business):not(.area-ip):nth-child(4n+1) .icon svg{stroke:#0B6B43}
.grid .card:not(.area-nonprofit):not(.area-business):not(.area-ip):nth-child(4n+1):hover .icon{background:var(--green);border-color:var(--green)}

.grid .card:not(.area-nonprofit):not(.area-business):not(.area-ip):nth-child(4n+2) .icon{background:#EDF3FF;border-color:#C9D8FB}
.grid .card:not(.area-nonprofit):not(.area-business):not(.area-ip):nth-child(4n+2) .icon svg{stroke:var(--area-business-text)}
.grid .card:not(.area-nonprofit):not(.area-business):not(.area-ip):nth-child(4n+2):hover .icon{background:var(--blue);border-color:var(--blue)}

.grid .card:not(.area-nonprofit):not(.area-business):not(.area-ip):nth-child(4n+3) .icon{background:#EDF0FE;border-color:#CBD3FB}
.grid .card:not(.area-nonprofit):not(.area-business):not(.area-ip):nth-child(4n+3) .icon svg{stroke:var(--navy)}
.grid .card:not(.area-nonprofit):not(.area-business):not(.area-ip):nth-child(4n+3):hover .icon{background:var(--navy);border-color:var(--navy)}

.grid .card:not(.area-nonprofit):not(.area-business):not(.area-ip):nth-child(4n+4) .icon{background:#E8F6EE;border-color:#BFE5CE}
.grid .card:not(.area-nonprofit):not(.area-business):not(.area-ip):nth-child(4n+4) .icon svg{stroke:#14806A}
.grid .card:not(.area-nonprofit):not(.area-business):not(.area-ip):nth-child(4n+4):hover .icon{background:#14806A;border-color:#14806A}

/* every variant flips its glyph to white on hover */
.grid .card:not(.area-nonprofit):not(.area-business):not(.area-ip):hover .icon svg{stroke:#fff}

/* Community category + pull quotes */
.cat.community,.eyebrow.community{color:#14806A}
.pull-quote{margin:2rem 0;padding:24px 28px;background:#EAF8EF;border-left:4px solid var(--green);
  border-radius:0 var(--r-lg) var(--r-lg) 0}
.pull-quote p{font-family:var(--display);font-size:1.18rem;line-height:1.6;color:var(--navy);
  margin:0 0 .7rem;font-style:italic}
.pull-quote cite{font-family:var(--sans);font-size:.88rem;font-style:normal;font-weight:600;color:var(--muted)}







/* Article graphics */
.post-figure{margin:0 0 2rem}
.post-figure img{width:100%;height:auto;border-radius:var(--r-lg);display:block;
  box-shadow:0 14px 40px rgba(3,27,136,.14)}
.post-figure figcaption{font-size:.86rem;color:var(--muted);margin-top:.8rem;text-align:center}



.rc-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 20px rgba(3,27,136,.14);
  transition:background .2s,border-color .2s,transform .2s,opacity .2s}
.rc-btn svg{width:20px;height:20px;fill:none;stroke:var(--navy);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.rc-btn:hover{background:var(--soft);border-color:var(--navy)}
.rc-btn:disabled{opacity:.32;cursor:default;box-shadow:none}
.rc-prev{left:-18px}
.rc-next{right:-18px}
@media(max-width:1100px){.rc-prev{left:2px}.rc-next{right:2px}}

.rc-dots{display:flex;justify-content:center;gap:9px;margin-top:26px}
.rc-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:#C9D3EE;transition:background .22s,width .22s}
.rc-dot[aria-selected="true"]{background:var(--navy);width:26px;border-radius:5px}

@media (prefers-reduced-motion: reduce){.rc-track{scroll-behavior:auto}}




/* ==========================================================================
   REVIEWS CAROUSEL — single source of truth.
   Flexbox, not grid: the track had inherited .grid.g3 plus media queries that
   kept re-setting grid-template-columns, which is what stopped it scrolling.
   ========================================================================== */
.reviews-carousel{position:relative}

.rc-track{
  display:flex;
  flex-wrap:nowrap;
  gap:26px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:6px 2px 4px;
  margin:0 44px;
  align-items:stretch;
}
.rc-track::-webkit-scrollbar{display:none}
.rc-track:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:var(--r-lg)}

.rc-track > .review{
  flex:0 0 calc((100% - 52px) / 3);
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
}
.rc-track .review-body{display:flex;flex-direction:column;flex:1;padding:26px}
.rc-track .review-top{padding:20px 26px}
.rc-track .review-foot{margin-top:auto;flex-wrap:wrap;gap:10px}
.rc-track .review-tag{font-size:.76rem;line-height:1.3}
.rc-track .review-text{display:-webkit-box;-webkit-line-clamp:11;-webkit-box-orient:vertical;overflow:hidden}

@media(max-width:1080px){.rc-track > .review{flex:0 0 calc((100% - 26px) / 2)}}
@media(max-width:720px){
  .rc-track{margin:0 8px}
  .rc-track > .review{flex:0 0 86%}
  .rc-track .review-text{-webkit-line-clamp:none}
}

.rc-btn{position:absolute;top:44%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 20px rgba(3,27,136,.14);
  transition:background .2s,border-color .2s,opacity .2s}
.rc-btn svg{width:19px;height:19px;fill:none;stroke:var(--navy);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.rc-btn:hover:not(:disabled){background:var(--soft);border-color:var(--navy)}
.rc-btn:disabled{opacity:.3;cursor:default;box-shadow:none}
.rc-prev{left:0}
.rc-next{right:0}
@media(max-width:720px){.rc-btn{display:none}}

.rc-dots{display:flex;justify-content:center;gap:9px;margin-top:24px}
.rc-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:#C9D3EE;transition:background .22s,width .22s}
.rc-dot[aria-selected="true"]{background:var(--navy);width:26px;border-radius:5px}
.reviews-carousel.is-static .rc-btn,.reviews-carousel.is-static .rc-dots{display:none}
@media (prefers-reduced-motion: reduce){.rc-track{scroll-behavior:auto}}

/* ---------------- Resource library categories ---------------- */
.res-jump{justify-content:center;margin-top:1.6rem}
.res-jump li{padding:0}
.res-jump a{display:block;padding:10px 20px;font-weight:600;font-size:.9rem;color:inherit}
.res-tier{display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:start;margin-bottom:22px}
.res-tier:last-child{margin-bottom:0}
.res-tier-label{padding-top:34px;display:flex;justify-content:flex-end}
.rt-badge{display:inline-block;padding:8px 16px;border-radius:999px;font-size:.84rem;
  font-weight:800;font-family:var(--sans);letter-spacing:.01em;white-space:nowrap}
.rt-free{background:#EAF8EF;color:var(--area-nonprofit-text)}
.rt-paid{background:#EDF3FF;color:var(--area-business-text)}
.rt-premium{background:var(--navy);color:#fff}
.res-item{margin:0}
.res-item .btn{align-self:flex-start;margin-top:auto}
.res-item .tick{margin:1rem 0 1.2rem}
.res-featured{border-color:#C3CEEA;box-shadow:var(--sh)}
/* A tier holds exactly two grid children: the badge, then either a single
   card or a .res-stack wrapping several. Multiple bare cards would spill
   into the narrow badge column, so extras always go inside .res-stack. */
.res-stack{display:grid;gap:22px;min-width:0}
.res-stack > .res-item{margin:0}
@media(max-width:720px){
  .res-tier{grid-template-columns:1fr;gap:10px}
  .res-tier-label{padding-top:0;justify-content:flex-start}
  .res-stack{gap:14px}
}

/* ============================================================
   CLIENT PORTAL LINK (utility bar)
   Sits beside Pay Invoice. Rendered as the quieter of the two
   so the paid action keeps visual priority.
   ============================================================ */
.u-portal{background:transparent;border-color:rgba(157,191,247,.34);color:#C3D3F5 !important}
.u-portal:hover{background:var(--gold-dark);color:#fff !important;border-color:var(--gold-dark)}
@media(max-width:640px){.u-right{gap:8px}}

/* ============================================================
   BLOG PROSE: data tables + callouts
   Used by article bodies. Tables scroll horizontally on small
   screens instead of forcing the page wide.
   ============================================================ */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:26px 0}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.tbl th{background:var(--gold-soft);color:var(--navy);text-align:left;
  font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;
  padding:13px 16px;border-bottom:2px solid var(--gold)}
.tbl td{padding:14px 16px;border-bottom:1px solid #E6EAF7;vertical-align:top}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:nth-child(even){background:#FAFBFF}
.tbl td strong{color:var(--navy)}

.callout{background:var(--gold-soft);border-left:4px solid var(--gold);
  border-radius:0 10px 10px 0;padding:20px 24px;margin:28px 0}
.callout p{margin:0}
.callout p strong{color:var(--navy)}
@media(max-width:640px){
  .table-wrap{margin:20px -4px}
  .tbl th,.tbl td{padding:11px 12px;font-size:.9rem}
  .callout{padding:16px 18px}
}

/* Footer: a second heading inside the Business & IP column keeps service links
   separate from general site links. */
.site-footer .f-h4-more{margin-top:1.6rem}

/* ================= DECISION FORK (blog visual) =================
   "Who is this for?" -> two branches. Used in the 501(c)(7) post.
   Reusable: .fork wraps, .fork-q is the question, each .fork-path is a branch. */
.fork{margin:34px 0;padding:30px 26px 26px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:linear-gradient(180deg,var(--gold-soft) 0%,#fff 62%)}
.fork-q{margin:0 0 6px;text-align:center;font-family:var(--display);font-weight:700;
  font-size:1.42rem;color:var(--navy);line-height:1.25}
.fork-sub{margin:0 0 24px;text-align:center;color:var(--muted);font-size:.93rem}
.fork-paths{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){.fork-paths{grid-template-columns:1fr}.fork{padding:24px 18px}}
.fork-path{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 20px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;
  border-top:3px solid var(--gold)}
.fork-path.is-club{border-top-color:var(--green)}
.fork-ans{font-size:1rem;font-weight:600;color:var(--ink);line-height:1.4}
.fork-tick{width:26px;height:26px;margin:12px 0 10px;flex:none;color:var(--gold)}
.fork-path.is-club .fork-tick{color:var(--green)}
.fork-res{font-family:var(--display);font-weight:700;font-size:1.62rem;color:var(--navy);line-height:1.1}
.fork-tag{margin-top:4px;font-size:.78rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.fork-note{margin:12px 0 0;font-size:.92rem;color:var(--body);line-height:1.55}
.fork-foot{margin:22px 0 0;text-align:center;font-size:.93rem;color:var(--muted)}

/* ================= COMPARE (blog visual) =================
   Two parallel concepts side by side. .cmp > .cmp-side x2 */
.cmp{margin:34px 0;display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
@media(max-width:680px){.cmp{grid-template-columns:1fr}}
.cmp-side{padding:26px 24px 28px;display:flex;flex-direction:column;align-items:center;text-align:center}
.cmp-side+.cmp-side{border-left:1px solid var(--line)}
@media(max-width:680px){.cmp-side+.cmp-side{border-left:0;border-top:1px solid var(--line)}}
.cmp-side.is-org{background:linear-gradient(180deg,var(--gold-soft) 0%,#fff 70%)}
.cmp-side.is-donor{background:linear-gradient(180deg,#EAFBF1 0%,#fff 70%)}
.cmp-eyebrow{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cmp-code{margin:8px 0 2px;font-family:var(--display);font-weight:700;font-size:1.72rem;
  color:var(--navy);line-height:1.1}
.cmp-who{font-size:.95rem;font-weight:700;color:var(--ink)}
.cmp-rule{width:38px;height:3px;border-radius:2px;background:var(--gold);margin:16px 0 14px}
.cmp-side.is-donor .cmp-rule{background:var(--green)}
.cmp-qlabel{font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.cmp-q{margin:0;font-family:var(--display);font-size:1.06rem;font-style:italic;
  color:var(--body);line-height:1.5}

/* ================= SAY / DON'T SAY (blog visual) ================= */
.saynot{margin:34px 0;display:grid;gap:16px}
.say{border:1px solid var(--line);border-left:4px solid var(--green);border-radius:var(--r-lg);
  padding:20px 22px;background:#fff}
.say.is-no{border-left-color:var(--coral)}
.say-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.say-icon{width:24px;height:24px;flex:none;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center}
.say.is-no .say-icon{background:var(--coral)}
.say-icon svg{width:14px;height:14px}
.say-label{font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.say-quote{margin:0;font-family:var(--display);font-size:1.1rem;color:var(--ink);line-height:1.55}
.say ul{margin:6px 0 0;padding-left:20px}
.say li{margin:5px 0;color:var(--body);font-size:.98rem;line-height:1.55}
.say-foot{margin:16px 0 0;font-size:.93rem;color:var(--muted);text-align:center}

/* ================= CODE ANATOMY (blog visual) ================= */
.anat{margin:34px 0;padding:30px 24px 26px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--gold-soft) 0%,#fff 65%);text-align:center}
.anat-chars{display:flex;justify-content:center;gap:12px;margin-bottom:6px}
.anat-char{width:66px;height:78px;border-radius:var(--r-lg);display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:700;font-size:2.1rem;
  background:#fff;border:2px solid var(--gold);color:var(--navy)}
.anat-char.is-num{border-color:var(--green)}
@media(max-width:520px){.anat-char{width:54px;height:64px;font-size:1.7rem}}
.anat-legs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px;text-align:left}
@media(max-width:560px){.anat-legs{grid-template-columns:1fr}}
.anat-leg{border-top:3px solid var(--gold);padding-top:12px}
.anat-leg.is-num{border-top-color:var(--green)}
.anat-leg h4{margin:0 0 4px;font-size:.95rem;color:var(--ink)}
.anat-leg p{margin:0;font-size:.92rem;color:var(--body);line-height:1.55}
.anat-foot{margin:20px 0 0;font-size:.9rem;color:var(--muted)}

/* ================= DEADLINE TIMELINE (blog visual) ================= */
.tline{margin:34px 0;display:grid;gap:14px}
.tline-row{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;background:#fff;
  border-left:4px solid var(--green);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.tline-row.is-bad{border-left-color:var(--coral)}
.tline-badge{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.tline-row.is-bad .tline-badge{background:var(--coral)}
.tline-badge svg{width:15px;height:15px}
.tline-when{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:3px}
.tline-what{margin:0;font-size:1.02rem;color:var(--ink);font-weight:600;line-height:1.45}
.tline-note{margin:6px 0 0;font-size:.93rem;color:var(--body);line-height:1.55}
.tline-foot{margin:4px 0 0;text-align:center;font-size:.93rem;color:var(--muted)}

/* ================= FEE SCOPE EXCLUSION =================
   Sits under a .price-box trust-line. States plainly what a flat fee does not buy. */
.fee-excl{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:var(--soft);
  border-left:3px solid var(--gold);font-size:.81rem;line-height:1.6;color:var(--muted);text-align:left}
.fee-excl strong{color:var(--ink);font-weight:700}
.fee-excl a{color:var(--navy);text-decoration:underline}

/* ================= INLINE POST FORM =================
   Short lead form dropped at the foot of blog posts. Reuses the
   contact-page field styling; status element is scoped so it does not
   collide with #form-status on contact.html. */
.post-form{background:linear-gradient(150deg,#EDF3FF 0%,#EDF0FE 100%);
  border:1px solid #D8E4FA;border-radius:var(--r-lg);padding:36px 34px}
@media(max-width:640px){.post-form{padding:26px 20px}}
.post-form h2{font-size:1.5rem;margin:0 0 .35em}
.post-form .lead{font-size:1rem;margin:0 0 22px}
.post-form input,.post-form textarea,.post-form select{background:#fff}
.post-form textarea{min-height:110px}
.pf-status{padding:14px 17px;border-radius:var(--r);margin-top:16px;display:none;font-size:.94rem}
.pf-status.ok{display:block;background:#EAF8EF;color:#0B6B43;border:1px solid var(--mint)}
.pf-status.err{display:block;background:#FDF1F1;color:#A32020;border:1px solid #E5B8B8}

/* ================= TESTIMONIAL DISCLAIMER =================
   Sits directly beneath any testimonial or client-rating block.
   Florida Bar Rule 4-7.13(b)(8)(F). Kept adjacent to the testimonials
   on purpose: proximity is the point, so do not move it to the footer. */
.testimonial-disclaimer{max-width:760px;margin:26px auto 0;text-align:center;
  font-size:.83rem;line-height:1.65;color:var(--muted)}
.testimonial-disclaimer strong{color:var(--body);font-weight:600}

/* ================= AWARD BADGE =================
   Third-party award badges inside an attorney bio. Deliberately NOT named
   .badge-row: that class already exists above for the inline trust pills.
   The Avvo badge carries its own .st* rules scoped inside .avvo-badge,
   so nothing here reaches into it. */
.award-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft)}
.award-row a{line-height:0;display:inline-block;transition:transform .2s}
.award-row a:hover{transform:translateY(-2px)}
.award-note{margin:0;font-size:.78rem;line-height:1.6;color:var(--muted);max-width:340px}

/* ================= STATIC REVIEW STRIP =================
   For the standalone landing pages, which deliberately do not load main.js.
   Reuses .rc-track (CSS scroll-snap works without JS); the arrow buttons and
   dots are omitted because those need the carousel script. */
.rc-static{margin:0}
.rc-static .rc-track{margin:0}
.rc-hint{margin:14px 0 0;text-align:center;font-size:.8rem;color:var(--muted)}
@media(min-width:981px){.rc-hint{display:none}}

/* ================= NUMBERED REQUIREMENTS =================
   Blog visual: a short numbered list of legal tests, given card treatment
   so it reads as a checklist rather than prose. .reqs > .req */
.reqs{margin:34px 0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.reqs{grid-template-columns:1fr}}
.req{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--gold);border-radius:var(--r-lg);padding:19px 20px}
.req.is-extra{border-left-color:var(--green);background:linear-gradient(180deg,#EAFBF1 0%,#fff 72%)}
.req-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-family:var(--sans);font-weight:800;font-size:.86rem}
.req.is-extra .req-n{background:var(--green)}
.req-t{margin:0;font-size:.98rem;line-height:1.55;color:var(--body)}
.req-t strong{color:var(--ink)}
.reqs-foot{margin:-18px 0 34px;font-size:.9rem;color:var(--muted)}

/* Label bar above a do/don't (.saynot) block */
.sn-head{margin:34px 0 -20px;display:flex;align-items:center;gap:12px}
.sn-head span{font-family:var(--sans);font-size:.76rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sn-head::after{content:"";flex:1;height:1px;background:var(--line)}

/* Pull-quote variant: neutral navy accent for legal tests */
.pull-quote.is-test{background:var(--gold-soft);border-left-color:var(--gold-dark)}
.pull-quote .pq-label{display:block;font-family:var(--sans);font-size:.74rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:9px}

/* ================= TWO BIG NUMBERS =================
   Blog visual for a paired percentage test. .twostat > .tstat x2 */
.twostat{margin:34px 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.twostat{grid-template-columns:1fr}}
.tstat{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px 24px;
  text-align:center;background:linear-gradient(180deg,var(--soft) 0%,#fff 74%)}
.tstat.is-tight{background:linear-gradient(180deg,#FDF1F1 0%,#fff 74%);border-color:#F0D3D5}
.tstat-n{display:block;font-family:var(--display);font-weight:700;font-size:3.6rem;line-height:1;
  color:var(--navy);letter-spacing:-.02em}
.tstat.is-tight .tstat-n{color:var(--coral)}
.tstat-l{display:block;margin-top:10px;font-family:var(--sans);font-size:.76rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tstat-d{margin:12px 0 0;font-size:.95rem;line-height:1.55;color:var(--body)}
.twostat-foot{margin:-20px 0 34px;text-align:center;font-size:.9rem;color:var(--muted)}

/* ==========================================================================
   HERO CONSULTATION FORM  —  added 2 Sep 2026
   Additive only. Every selector is scoped to #consult-form or .consult-*.
   Nothing above this block is modified.
   ========================================================================== */
#consult-form{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;box-shadow:var(--sh-lg);position:relative;overflow:hidden}
#consult-form::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 55%,var(--gold) 100%)}
#consult-form .cf-head{margin:4px 0 4px;font-size:1.18rem;line-height:1.3;color:var(--navy)}
#consult-form .cf-sub{font-size:.88rem;color:var(--muted);margin:0 0 18px;line-height:1.55}
#consult-form .form-grid{gap:14px}
#consult-form .form-row{gap:14px}
#consult-form label{font-size:.82rem;margin-bottom:5px}
#consult-form input,#consult-form select,#consult-form textarea{padding:10px 13px;font-size:.94rem}
#consult-form textarea{min-height:88px}
#consult-form .form-note{font-size:.75rem;margin-top:10px}
#consult-form .btn{width:100%}
#consult-form #form-status{margin-top:14px}

/* Success state: the thank-you replaces the fields, in place.
   The block also carries the `hidden` attribute in the markup, so it stays
   hidden even if this stylesheet fails to load. main.js removes it on submit. */
#consult-form .cf-done{display:none}
#consult-form .cf-done[hidden]{display:none!important}
#consult-form.is-sent .form-grid{display:none}
#consult-form.is-sent .cf-head,#consult-form.is-sent .cf-sub{display:none}
#consult-form.is-sent .cf-done{display:block;text-align:center;padding:18px 4px 8px}
#consult-form .cf-done h3{color:var(--navy);font-size:1.22rem;margin:0 0 10px}
#consult-form .cf-done p{color:var(--body);font-size:.94rem;margin:0 0 18px;line-height:1.6}

/* two-column hero for landing pages that had a single column */
.consult-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
@media(max-width:940px){.consult-hero-grid{grid-template-columns:1fr;gap:34px}}

/* the card displaced out of the hero, now sitting directly below it */
.consult-displaced{padding:0 0 60px;background:transparent}
/* Sits low on the page as a full-width recap band. The list runs in two
   columns so the card uses the width rather than floating narrow in it. */
.consult-displaced .panel{max-width:none}
.consult-displaced .panel h3{text-align:center;font-size:1.35rem;margin-bottom:22px}
.consult-displaced .panel ul{columns:2;column-gap:44px;margin-bottom:26px}
.consult-displaced .panel li{break-inside:avoid;-webkit-column-break-inside:avoid}
.consult-displaced .panel .btn-block{width:auto;min-width:280px;display:block;margin:0 auto}
/* price boxes keep the width they had in the hero column */
.consult-displaced .price-box{max-width:560px;margin-left:auto;margin-right:auto}
@media(max-width:940px){
  .consult-displaced{padding-bottom:42px}
  .consult-displaced .panel ul{columns:1}
  .consult-displaced .panel .btn-block{width:100%;min-width:0}
  .consult-displaced .price-box{max-width:none}
}

/* mobile: headline first, then the form, then everything else.
   Scoped to .consult-hero so no other hero on the site is affected. */
@media(max-width:940px){
  .consult-hero{display:flex;flex-direction:column;gap:0}
  .consult-hero > .consult-col-copy{display:contents}
  .consult-hero .breadcrumb{order:1}
  .consult-hero .eyebrow{order:2}
  .consult-hero h1{order:3;margin-bottom:.35em}
  .consult-hero > .consult-col-form{order:4;margin:4px 0 26px}
  .consult-hero .rule{order:5}
  .consult-hero .lead{order:6}
  .consult-hero p{order:7}
  .consult-hero .btn-row{order:8}
  .consult-hero .lp-note{order:9}
  .consult-hero .hero-points{order:10}
  .consult-hero .lp-trust{order:11}
  #consult-form{padding:22px}
  #consult-form .cf-head{font-size:1.08rem}
}
@media(max-width:420px){
  #consult-form{padding:18px;border-radius:12px}
  #consult-form .form-row{grid-template-columns:1fr}
  #consult-form textarea{min-height:78px}
  /* clear the Clio chat bubble in the bottom-right */
  .consult-hero > .consult-col-form{margin-bottom:34px}
}

/* Avvo award line under the hero form's submit button (homepage only).
   Text treatment rather than the full SVG badge: no third-party font
   request in the hero, and the required disclaimer sits directly beneath. */
#consult-form .cf-avvo{display:flex;align-items:center;justify-content:center;gap:9px;
  margin:14px 0 8px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--soft);text-decoration:none;font-size:.83rem;font-weight:700;
  color:var(--navy);line-height:1.3;text-align:center}
#consult-form .cf-avvo:hover{border-color:var(--gold);background:#E7EEFF}
#consult-form .cf-avvo-stars{color:#F89838;letter-spacing:1px;font-size:.9rem}
#consult-form .cf-avvo-note{margin-top:0;font-size:.72rem}

/* Larger attorney portraits, high on the ad landing pages.
   The landing pages define .lp-team img in a page-level <style> that loads
   after this file, so these use .lp-team.lp-team-lg to win on specificity
   rather than source order. Pages without .lp-team-lg are unaffected. */
.lp-team-band{padding-top:0}
.lp-team.lp-team-lg{gap:34px}
.lp-team.lp-team-lg img{width:172px;height:172px;border-width:4px}
.lp-team.lp-team-lg p{font-size:1.02rem;line-height:1.7}
@media(max-width:700px){
  .lp-team.lp-team-lg{gap:20px}
  .lp-team.lp-team-lg img{width:128px;height:128px}
  .lp-team.lp-team-lg p{font-size:.97rem;text-align:center!important}
}

/* Flat-fee line in the landing-page hero. Had no rule at all until now, so it
   was rendering with default paragraph margins. */
.hero .lp-fee{margin:16px 0 24px;font-size:1rem;font-weight:600;
  color:var(--navy);max-width:62ch;line-height:1.6}
@media(max-width:700px){.hero .lp-fee{font-size:.95rem;margin:14px 0 20px}}
/* optional-field hint on the compact form */
#consult-form .cf-opt{font-weight:400;color:var(--muted);font-size:.92em}

/* ==========================================================================
   AD LANDING PAGE RHYTHM  —  scoped to .lp-page (/startanonprofit,
   /registeratrademark). The global section padding of 110px top and bottom
   put 220px between every band, which reads as empty screens on scroll.
   Nothing outside .lp-page is affected.
   ========================================================================== */
.lp-page section,.tight-page section{padding:54px 0}
.lp-page section.cta,.tight-page section.cta{padding:58px 0}

/* more room above the attorney band, which sits directly under the hero */
.lp-page .lp-team-band{padding-top:76px;padding-bottom:54px}

/* tighten the internal heading spacing to match the shorter bands */
.lp-page .sec-head{margin-bottom:26px}
.lp-page .sec-head h2{margin-bottom:.35em}

@media(max-width:900px){
  .lp-page section,.tight-page section{padding:38px 0}
  .lp-page section.cta,.tight-page section.cta{padding:42px 0}
  .lp-page .lp-team-band{padding-top:52px;padding-bottom:38px}
  .lp-page .sec-head{margin-bottom:20px}
}

/* ==========================================================================
   ATTORNEYS + WHAT'S INCLUDED band  —  /nonprofit-formation
   Global (not page-level) because this page has no <style> block of its own.
   .team-* names are new, so nothing existing is affected.
   ========================================================================== */
.team-band{padding-top:54px}
.team-included{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.team-side h2{font-size:1.42rem;margin-bottom:18px;color:var(--navy)}
.team-faces{display:flex;gap:18px;margin:0 0 20px}
.team-faces img{width:118px;height:118px;border-radius:50%;object-fit:cover;object-position:top;
  border:3px solid #fff;box-shadow:0 6px 22px rgba(3,27,136,.16)}
.team-side p{color:var(--body);font-size:1rem;line-height:1.72;margin:0 0 12px}
.team-side .note{font-size:.9rem}
.included-side .panel{margin:0}
@media(max-width:900px){
  .team-included{grid-template-columns:1fr;gap:32px}
  .team-faces img{width:96px;height:96px}
  .team-band{padding-top:40px}
}

/* --------------------------------------------------------------------------
   /nonprofit-formation refinements
   1. a more compact lead box than the full-width hero forms
   2. the attorney band and the pricing section pulled together — the gap
      above "501(c)(3) Formation Packages" was the widest on the page
   -------------------------------------------------------------------------- */
.tight-page .hero-grid{grid-template-columns:1.22fr .78fr;gap:44px;align-items:start}
.tight-page #consult-form{padding:20px}
.tight-page #consult-form .cf-head{font-size:1.06rem;margin-bottom:2px}
.tight-page #consult-form .cf-sub{font-size:.82rem;margin-bottom:14px}
.tight-page #consult-form .form-grid{gap:10px}
.tight-page #consult-form label{font-size:.78rem;margin-bottom:4px}
.tight-page #consult-form input,
.tight-page #consult-form select{padding:8px 11px;font-size:.9rem}
.tight-page #consult-form .form-note{font-size:.7rem;margin-top:8px}
.tight-page #consult-form .cf-avvo{margin:10px 0 6px;padding:7px 10px;font-size:.78rem}

/* close the gap between the attorney band and pricing */
.tight-page .team-band{padding-top:44px;padding-bottom:14px}
.tight-page .team-band + section{padding-top:22px}

@media(max-width:900px){
  .tight-page .hero-grid{grid-template-columns:1fr;gap:28px}
  .tight-page .team-band{padding-top:32px;padding-bottom:10px}
  .tight-page .team-band + section{padding-top:16px}
}

/* ==========================================================================
   DENSITY PASS  —  5 Sep 2026
   Site-wide: less vertical space, slightly smaller type. Deliberately the
   last block in the file so it can be deleted wholesale to revert.
   Nothing above is edited.
   ========================================================================== */

/* --- type: about 8% down across the scale --- */
body{font-size:16px;line-height:1.7}
h1{font-size:clamp(1.95rem,3.5vw,2.85rem);line-height:1.12}
h2{font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.2}
h3{font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.3}
p{font-size:.96rem;line-height:1.68}
.lead{font-size:1.04rem;line-height:1.7}
.hero .lead{font-size:1.06rem}
.hero h1{max-width:22ch}

/* --- vertical rhythm: roughly 45% out --- */
section{padding:62px 0}
.sec-tight{padding:44px 0}
.sec-head{margin:0 auto 30px}
.cta{padding:62px 0}
.hero{padding:52px 0 56px}

/* --- components tightened to match --- */
.card{padding:22px}
.panel{padding:24px}
.grid{gap:20px}
.btn{padding:11px 20px;font-size:.93rem}
.btn-lg{padding:13px 24px;font-size:.97rem}
.review-body{padding:24px}
.review-top{padding:18px 24px}
.article-row{padding:20px 0}
.faq details{padding:14px 0}

@media(max-width:900px){
  body{font-size:15.5px}
  section{padding:42px 0}
  .sec-tight{padding:32px 0}
  .sec-head{margin-bottom:22px}
  .cta{padding:46px 0}
  .hero{padding:36px 0 40px}
  .card,.panel{padding:18px}
}

/* team band with no panel alongside it — centre the block instead of a 1fr 1fr split */
.team-included.team-solo{grid-template-columns:1fr;max-width:760px;margin:0 auto;text-align:center}
.team-included.team-solo .team-faces{justify-content:center}
.team-included.team-solo .team-side p{text-align:center}

/* comparison table */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cmp-table th,.cmp-table td{padding:12px 14px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.cmp-table thead th{background:var(--soft);color:var(--navy);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.4px;border-bottom:1px solid var(--line)}
.cmp-table tbody th{font-weight:600;color:var(--ink);width:20%}
.cmp-table td{color:var(--body)}
.cmp-table .cmp-us{background:#F2FBF5;color:var(--area-nonprofit-text);font-weight:600}
.cmp-table thead .cmp-us{background:var(--navy);color:#fff}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:0}
@media(max-width:700px){.cmp-table{font-size:.86rem}.cmp-table th,.cmp-table td{padding:10px 11px}}

/* Two ways to start, shown together at the top of the lead box:
   book a time, or send the form. The link is a plain /book href, so the
   existing Calendly popup handler picks it up and it still works if JS fails. */
#consult-form .cf-book{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 14px;margin:0 0 12px;border:1.5px solid var(--navy);border-radius:8px;
  background:#fff;color:var(--navy);font-weight:700;font-size:.92rem;text-decoration:none;
  transition:background .16s,border-color .16s}
#consult-form .cf-book:hover{background:var(--soft);border-color:var(--gold)}
#consult-form .cf-book svg{width:17px;height:17px;fill:currentColor;flex:none}
#consult-form .cf-or{display:flex;align-items:center;gap:10px;margin:0 0 14px;
  color:var(--muted);font-size:.79rem}
#consult-form .cf-or::before,#consult-form .cf-or::after{content:"";height:1px;background:var(--line);flex:1}
/* both disappear once the message is sent */
#consult-form.is-sent .cf-book,#consult-form.is-sent .cf-or{display:none}
.tight-page #consult-form .cf-book{padding:9px 12px;font-size:.87rem;margin-bottom:10px}
.tight-page #consult-form .cf-or{margin-bottom:11px;font-size:.76rem}

/* ================= PRICE BOX: SCHEDULE FIRST, PAY SECOND =================
   The primary action under every price is now booking a consultation. The
   payment link survives as a quiet second option for someone who has already
   decided — it is deliberately subordinate, not hidden. Appended at the end of
   the sheet so the whole block can be removed to revert. */
.pay-alt{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line-soft,var(--line));
  text-align:center;font-size:.8rem;line-height:1.55;color:var(--muted)}
.pay-alt a{color:var(--navy);font-weight:600;text-decoration:underline;
  text-underline-offset:2px;white-space:nowrap}
.pay-alt a:hover{color:var(--gold-dark)}
/* The trust line sits between the button and the pay option, so drop its top
   margin to keep the three elements reading as one stack. */
.price-box .trust-line + .pay-alt{margin-top:11px}

/* Pay-option variant for the dark CTA band, where navy text would vanish. */
.cta .pay-alt{border-top-color:rgba(255,255,255,.18);color:rgba(255,255,255,.72)}
.cta .pay-alt a{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
.cta .pay-alt a:hover{color:var(--gold-light,#AAB6FB)}
/* In a hero or CTA the pay line follows a .btn-row rather than a trust line,
   so it needs its own spacing and a narrower rule than the price-box version. */
.btn-row + .pay-alt{max-width:420px;margin-top:18px;padding-top:14px}
.btn-row.c + .pay-alt{margin-left:auto;margin-right:auto}

/* ================= AUTHOR ARTICLE LIST (team page) =================
   Closes the loop on author attribution: every post's schema points its
   author @id at /team#<slug>, so the profile should point back at the work.
   Sits at the foot of a .bio-body, after .bio-facts or the award row. */
.bio-articles{margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line-soft,var(--line))}
.bio-articles h3{font-family:var(--sans);font-size:.76rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.bio-articles ul{list-style:none;padding:0;margin:0}
.bio-articles li{margin:0;padding:9px 0;border-bottom:1px solid var(--line-soft,var(--line))}
.bio-articles li:last-child{border-bottom:0}
.bio-articles li a{font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.45;
  color:var(--navy);text-decoration:none}
.bio-articles li a:hover{color:var(--gold-dark);text-decoration:underline;text-underline-offset:2px}
.bio-articles .ba-date{display:block;font-family:var(--sans);font-size:.76rem;color:var(--muted);
  margin-top:3px}
.bio-articles .ba-all{margin:14px 0 0;font-size:.86rem}
.bio-articles .ba-all a{font-family:var(--sans);font-weight:600;color:var(--navy)}

/* Inline trust row for a left-aligned hero column. Dot-separated, quiet,
   sits under the button row. Distinct from .trust-line, which is centered
   and lives inside a price box. */
.hero-trust{margin:20px 0 0;font-size:.88rem;font-weight:600;color:var(--muted);line-height:1.7}
.hero-trust span{color:var(--navy)}
.hero-trust i{font-style:normal;color:var(--line);margin:0 10px}
@media(max-width:700px){.hero-trust{font-size:.84rem}.hero-trust i{margin:0 7px}}

/* Mobile order for the two hero elements added to /nonprofit-formation, plus
   the quiet pay line that now sits in several hero columns. Without these the
   generic `.consult-hero p{order:7}` rule above puts all three ahead of the
   button row at order:8, which inverts the intended reading order on phones.
   Class selectors here are (0,2,0) and beat that (0,1,1) rule. */
@media(max-width:940px){
  .consult-hero .lp-fee{order:7}
  .consult-hero .hero-trust{order:9}
  .consult-hero .pay-alt{order:12}
}

/* ================= PACKAGE TIER CARDS =================
   A scannable three-up summary that sits above the detailed packages, so a
   visitor can pick a tier in about five seconds. The middle card is
   deliberately dominant: it is the package most organizations need, and an
   undifferentiated row of three makes people stall. .tiers > .tier x3 */
.tiers{display:grid;grid-template-columns:1fr 1.14fr 1fr;gap:20px;align-items:center;margin-top:34px}
@media(max-width:900px){.tiers{grid-template-columns:1fr;gap:16px}}
.tier{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px;text-align:center;display:flex;flex-direction:column}
.tier-name{font-family:var(--sans);font-size:.74rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-dark);margin:0 0 10px}
.tier-price{font-family:var(--display);font-weight:700;font-size:2.5rem;line-height:1;
  color:var(--navy);margin:0}
.tier-for{font-size:.88rem;color:var(--muted);margin:10px 0 0;line-height:1.5;min-height:2.6em}
.tier-rule{width:34px;height:3px;border-radius:2px;background:var(--line);margin:16px auto}
.tier-what{font-size:.97rem;color:var(--ink);line-height:1.6;margin:0 0 20px;font-weight:500}
.tier .btn{margin-top:auto}

/* The dominant middle card. Raised, navy-topped, with the badge above it. */
.tier.is-featured{border-color:var(--navy);border-width:2px;padding:36px 28px 32px;
  box-shadow:0 18px 48px rgba(3,27,136,.17);z-index:1}
.tier.is-featured .tier-price{font-size:3rem}
.tier.is-featured .tier-rule{background:var(--gold)}
.tier-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--navy);color:#fff;font-family:var(--sans);font-size:.68rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 15px;border-radius:999px;white-space:nowrap}
@media(max-width:900px){
  .tier.is-featured{padding:34px 24px 28px;order:-1}
  .tier.is-featured .tier-price{font-size:2.7rem}
  .tier-for{min-height:0}
}

/* ================= ATTORNEY, NOT A FILING SERVICE =================
   Answers the LegalZoom / Northwest / Clerky comparison head-on, high on the
   page. Two-line claim, one paragraph, one button. */
.attorney-claim{background:linear-gradient(160deg,var(--navy-deep,#021463) 0%,var(--navy) 62%,#0A2FA8 100%);
  color:#fff;padding:56px 0}
.attorney-claim .ac-inner{max-width:760px;margin:0 auto;text-align:center}
.attorney-claim h2{font-size:clamp(1.55rem,3.1vw,2.1rem);line-height:1.25;color:#fff;margin:0 0 18px}
.attorney-claim h2 span{display:block;color:var(--gold-light,#AAB6FB)}
.attorney-claim p{font-size:1.04rem;line-height:1.72;color:rgba(255,255,255,.88);margin:0 0 26px}
@media(max-width:700px){.attorney-claim{padding:44px 0}.attorney-claim p{font-size:.98rem}}

/* ================= COMPACT CREDIBILITY STRIP =================
   Sits immediately under the hero: award, one short client quote, and a link
   into the full reviews further down. Deliberately one band high so it reads
   as reassurance in passing rather than a section that needs reading.
   The Rule 4-7.13(b)(8)(F) disclaimer sits inside it, adjacent to the quote. */
.credstrip{background:var(--soft);border-top:1px solid var(--line-soft,var(--line));
  border-bottom:1px solid var(--line-soft,var(--line));padding:22px 0}
.credstrip .cs-inner{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.cs-award{display:flex;align-items:center;gap:9px;flex:none}
.cs-stars{color:#F89838;letter-spacing:1.5px;font-size:.95rem;line-height:1}
.cs-award b{font-size:.84rem;font-weight:700;color:var(--navy);line-height:1.35}
.cs-divide{width:1px;height:34px;background:var(--line);flex:none}
.cs-quote{max-width:46ch;margin:0;font-family:var(--display);font-size:1rem;font-style:italic;
  color:var(--ink);line-height:1.5}
.cs-who{display:block;font-family:var(--sans);font-size:.78rem;font-style:normal;
  font-weight:600;color:var(--muted);margin-top:5px}
.cs-more{flex:none;font-size:.86rem;font-weight:700;color:var(--navy);text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap}
.cs-more:hover{color:var(--gold-dark)}
.cs-note{max-width:820px;margin:14px auto 0;text-align:center;font-size:.73rem;line-height:1.6;
  color:var(--muted)}
@media(max-width:880px){
  .credstrip .cs-inner{gap:16px}
  .cs-divide{display:none}
  .cs-quote{max-width:none;text-align:center;font-size:.95rem}
  .cs-award{justify-content:center;width:100%}
  .cs-more{width:100%;text-align:center}
}

/* ================= "WHAT'S INCLUDED" ACCORDION =================
   Reuses the .faq details treatment, but the panels hold package contents
   rather than an answer paragraph, so they need list and button styling the
   .faq rules do not provide. Scoped to .inc-faq so the FAQ further down the
   page is untouched. */
.inc-faq summary{font-family:var(--display);font-size:1.06rem}
.inc-faq summary strong{font-weight:700;color:var(--navy)}
.inc-sub{font-family:var(--sans);font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-dark);margin-left:10px;white-space:nowrap}
.inc-body{padding:0 0 22px}
.inc-body ul{list-style:none;padding:0;margin:0 0 20px}
.inc-body li{position:relative;padding-left:27px;margin-bottom:9px;font-size:.95rem;
  color:var(--body);line-height:1.55}
.inc-body li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:800}
.inc-body .btn-row{margin:0}
.inc-body .pay-alt{max-width:none;text-align:left;margin-top:16px}
@media(max-width:560px){
  .inc-faq summary{font-size:.99rem}
  .inc-sub{display:block;margin:6px 0 0}
  .inc-body .btn{width:100%}
}

/* Inline variant of the credibility strip, for the hero copy column. The
   band version reads left-to-right across the full width; inside a hero
   column it has to stack, so this is a separate treatment rather than a
   media query on the band. Fills the space the tall lead form creates
   beside a short headline. */
.cs-inline{margin:26px 0 0;padding:20px 22px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.cs-inline .cs-top{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.cs-inline .cs-stars{color:#F89838;letter-spacing:1.5px;font-size:.92rem;line-height:1}
.cs-inline .cs-top b{font-size:.79rem;font-weight:700;color:var(--navy);line-height:1.3}
.cs-inline .cs-quote{margin:0;font-family:var(--display);font-size:1.02rem;font-style:italic;
  color:var(--ink);line-height:1.55}
.cs-inline .cs-foot{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-top:11px;flex-wrap:wrap}
.cs-inline .cs-who{font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--muted)}
.cs-inline .cs-more{font-size:.82rem;font-weight:700;color:var(--navy);
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cs-inline .cs-more:hover{color:var(--gold-dark)}
.cs-inline .cs-note{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line-soft,var(--line));
  font-size:.7rem;line-height:1.55;color:var(--muted)}
@media(max-width:940px){
  .consult-hero .cs-inline{order:10}
  .cs-inline{margin-top:22px;padding:18px}
}

/* The attorney claim and the attorney band said the same thing in two
   adjacent sections. Merged: the claim keeps the dark treatment and now
   carries the faces and the partner line as its own evidence. Face borders
   and body copy are re-toned for the dark background. */
.attorney-claim .ac-faces{display:flex;justify-content:center;gap:20px;margin:30px 0 20px}
.attorney-claim .ac-faces img{width:104px;height:104px;border-radius:50%;object-fit:cover;
  object-position:top;border:3px solid rgba(255,255,255,.9);box-shadow:0 8px 26px rgba(0,0,0,.28)}
.attorney-claim .ac-names{font-family:var(--sans);font-size:.75rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light,#AAB6FB);margin:0 0 14px}
.attorney-claim .ac-bio{font-size:.97rem;line-height:1.7;color:rgba(255,255,255,.82);
  max-width:66ch;margin:0 auto 26px}
.attorney-claim .ac-bio strong{color:#fff;font-weight:700}
.attorney-claim .ac-rule{width:44px;height:3px;border-radius:2px;
  background:var(--gold-light,#AAB6FB);margin:26px auto 0;opacity:.5}
@media(max-width:700px){
  .attorney-claim .ac-faces img{width:88px;height:88px}
  .attorney-claim .ac-faces{gap:14px;margin:24px 0 16px}
}
/* "Every package includes" panel, relocated out of the old attorney band
   into the What's-included section where it now belongs. */
.inc-common{max-width:760px;margin:0 auto 30px}
.inc-common h3{font-size:1.06rem;margin:0 0 14px;color:var(--navy)}
.inc-common ul{list-style:none;padding:0;margin:0;columns:2;column-gap:36px}
.inc-common li{position:relative;padding-left:26px;margin-bottom:9px;font-size:.94rem;
  line-height:1.5;break-inside:avoid;-webkit-column-break-inside:avoid}
.inc-common li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:800}
@media(max-width:620px){.inc-common ul{columns:1}}

/* ================= WHAT'S INCLUDED (rebuilt) =================
   Three package panels that read as a comparison rather than a generic FAQ.
   Shared items are pulled out above so each panel only shows what is
   distinctive; the Complete panel opens by default and carries the accent. */
.inc-common{max-width:none;margin:0 0 26px;padding:22px 24px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg)}
.inc-common .ic-label{font-family:var(--sans);font-size:.72rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dark);margin:0 0 14px}
.inc-pkgs{display:grid;gap:14px}
.inc-pkgs .ip{background:#fff;border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.inc-pkgs .ip[open]{border-left-color:var(--gold);box-shadow:var(--sh-sm)}
.inc-pkgs .ip.is-featured{border-left-color:var(--navy)}
.inc-pkgs .ip.is-featured[open]{border-color:#BFCFEF;border-left-color:var(--navy);
  box-shadow:0 10px 30px rgba(3,27,136,.11)}
.inc-pkgs summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:18px 22px}
.inc-pkgs summary::-webkit-details-marker{display:none}
.inc-pkgs .ip-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.inc-pkgs .ip-name{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--navy)}
.inc-pkgs .ip-badge{font-family:var(--sans);font-size:.66rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--navy);padding:4px 10px;border-radius:999px;
  white-space:nowrap}
.inc-pkgs .ip-price{font-family:var(--display);font-weight:700;font-size:1.45rem;color:var(--navy);
  flex:none;display:flex;align-items:center;gap:12px}
.inc-pkgs .ip-price::after{content:"+";color:var(--gold);font-size:1.3rem;font-weight:400;
  line-height:1;transition:transform .3s cubic-bezier(.34,1.5,.64,1)}
.inc-pkgs .ip[open] .ip-price::after{transform:rotate(45deg)}
.inc-pkgs .ip-body{padding:0 22px 22px}
.inc-pkgs .ip-body ul{list-style:none;padding:0;margin:0 0 20px;columns:2;column-gap:34px}
.inc-pkgs .ip-body li{position:relative;padding-left:26px;margin-bottom:9px;font-size:.93rem;
  line-height:1.5;color:var(--body);break-inside:avoid;-webkit-column-break-inside:avoid}
.inc-pkgs .ip-body li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:800}
.inc-pkgs .ip-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--line-soft,var(--line))}
.inc-pkgs .ip-pay{font-size:.83rem;font-weight:600;color:var(--muted);text-decoration:underline;
  text-underline-offset:3px}
.inc-pkgs .ip-pay:hover{color:var(--navy)}
.inc-jump{font-family:var(--sans);font-size:.92rem;font-weight:700;color:var(--navy);
  text-decoration:underline;text-underline-offset:3px}
.inc-jump:hover{color:var(--gold-dark)}
@media(max-width:700px){
  .inc-pkgs summary{padding:16px 18px;gap:10px}
  .inc-pkgs .ip-name{font-size:1.04rem}
  .inc-pkgs .ip-price{font-size:1.28rem}
  .inc-pkgs .ip-body{padding:0 18px 18px}
  .inc-pkgs .ip-body ul,.inc-common ul{columns:1}
  .inc-pkgs .ip-actions .btn{width:100%}
  .inc-common{padding:18px}
}
/* Quiet sub-label for the non-featured package panels; the navy pill is
   reserved for the one package we are actually steering people toward. */
.inc-pkgs .ip-sub{font-family:var(--sans);font-size:.82rem;font-weight:500;color:var(--muted)}
@media(max-width:620px){.inc-pkgs .ip-sub{display:block;width:100%}}

/* ================= SPLIT PROCESS LAYOUT =================
   /nonprofit-formation ran four centered, narrow, single-column sections in
   a row. This gives the process section a different shape: heading and intro
   on the left, the steps as a 2x2 grid on the right. .steps-split wraps;
   .steps.g2 is the grid. */
.steps-split{display:grid;grid-template-columns:.86fr 1.14fr;gap:54px;align-items:start}
@media(max-width:940px){.steps-split{grid-template-columns:1fr;gap:30px}}
.steps-split .ss-copy h2{font-size:clamp(1.5rem,2.6vw,1.9rem);margin:0 0 16px;color:var(--navy);
  line-height:1.24}
.steps-split .ss-copy .rule{margin:0 0 18px}
.steps-split .ss-copy p{color:var(--body);font-size:.97rem;line-height:1.72;margin:0}
.steps-split .ss-copy .note{margin-top:16px;font-size:.88rem}
.steps.g2{grid-template-columns:1fr 1fr;gap:30px 34px;margin:0}
.steps.g2 .step{padding-left:0;padding-top:56px}
.steps.g2 .step::before{width:42px;height:42px;font-size:1.1rem}
.steps.g2 .step h3{font-size:1.04rem}
.steps.g2 .step p{font-size:.92rem;line-height:1.6}
@media(max-width:560px){.steps.g2{grid-template-columns:1fr;gap:26px}}

/* Two-up variant of the accept/reject block. The default stacks, which is
   right inside a narrow article column; in a full-width section the two
   panels belong side by side so the contrast is immediate. */
.saynot.g2{grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:860px){.saynot.g2{grid-template-columns:1fr;gap:16px}}
/* Left-aligned section head with the intro beside it, so this section does
   not repeat the centered-narrow shape used elsewhere on the page. */
.who-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:end;margin-bottom:6px}
@media(max-width:860px){.who-head{grid-template-columns:1fr;gap:14px;align-items:start}}
.who-head h2{font-size:clamp(1.5rem,2.6vw,1.9rem);margin:0 0 14px;color:var(--navy);line-height:1.24}
.who-head .rule{margin:0}
.who-head p{margin:0;color:var(--body);font-size:.99rem;line-height:1.7}
/* Text link under the hero trust row, pointing at the package detail. Takes
   the slot the hero pay link used to occupy; the primary button already
   covers #pricing, so this points one step deeper, at #included. */
.hero-jump{margin:14px 0 0;font-size:.89rem}
.hero-jump a{font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.hero-jump a:hover{color:var(--gold-dark)}
@media(max-width:940px){
  .consult-hero .hero-jump{order:10}
  .consult-hero .cs-inline{order:11}
}

/* ---- Hero trust row and package link: differentiate the two ----
   Both were navy text stacked on top of each other and read as one block.
   The trust row becomes a set of ticked chips — a component, visually
   distinct from a text link — and the package link gains a rule above it,
   an arrow, and a lighter weight so the two no longer compete.
   Appended after the originals so these win at equal specificity. */
ul.hero-trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  margin:20px 0 0;padding:0;font-size:0;line-height:0}
ul.hero-trust li{display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px 7px 11px}
ul.hero-trust li svg{width:13px;height:13px;flex:none;color:var(--green)}
ul.hero-trust li span{font-family:var(--sans);font-size:.8rem;font-weight:600;
  color:var(--body);line-height:1.3}
.hero-jump{margin:20px 0 0;padding-top:16px;font-size:.89rem;
  border-top:1px solid var(--line-soft,var(--line))}
.hero-jump a{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);
  font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(3,27,136,.32)}
.hero-jump a::after{content:"\203A";font-size:1.15rem;line-height:1;font-weight:400;
  color:var(--gold);transition:transform .2s}
.hero-jump a:hover{color:var(--gold-dark);text-decoration-color:currentColor}
.hero-jump a:hover::after{transform:translateX(3px)}
@media(max-width:700px){
  ul.hero-trust{gap:6px}
  ul.hero-trust li{padding:6px 11px 6px 9px}
  ul.hero-trust li span{font-size:.76rem}
}

/* ================= STANDALONE PRICE SECTION =================
   On single-package service pages the price box used to sit in the right
   column of the attorney band. That band is now a full-width dark claim, so
   the price box needs its own section. Centered, capped, with room to breathe. */
.price-solo{max-width:620px;margin:0 auto}
.price-solo .price-box{margin:0}

/* ================= PRICE BESIDE CONTENT =================
   Puts the quoted price alongside the explanation of what it buys, instead of
   centring the price box alone with dead space either side. Price left,
   content right; stacks on tablet with the price first. */
.price-beside{display:grid;grid-template-columns:.88fr 1.12fr;gap:46px;align-items:start}
@media(max-width:980px){.price-beside{grid-template-columns:1fr;gap:32px}}
.price-beside .price-solo{max-width:none;margin:0}
.price-beside .pb-copy h2{font-size:clamp(1.42rem,2.5vw,1.8rem);margin:0 0 14px;color:var(--navy);line-height:1.26}
.price-beside .pb-copy h2 + .rule{margin:0 0 18px}
.price-beside .pb-copy h3{font-size:1.06rem;margin:1.4em 0 .4em;color:var(--ink)}
.price-beside .pb-copy p{color:var(--body);font-size:.97rem;line-height:1.72;margin:0 0 .9em}
.price-beside .pb-copy p:last-child{margin-bottom:0}
.price-beside .pb-copy .steps{gap:22px;margin:20px 0 0}
.price-beside .pb-copy .steps .step{padding-left:54px}
.price-beside .pb-copy .steps .step::before{width:38px;height:38px;font-size:1.02rem}
.price-beside .pb-copy .steps .step h3{font-size:1rem;margin:.1em 0 .3em}
.price-beside .pb-copy .steps .step p{font-size:.92rem;line-height:1.6}

/* ============================================================================
   MOBILE SIMPLIFICATION (v211)
   Phones only. Every rule below sits inside a max-width media query, so the
   desktop layout is byte-for-byte unchanged. Reversible: delete this block.
   ============================================================================ */

/* 1 — The navy utility bar collapses to a single tappable phone line.
       Email, Schedule, Client Portal and Pay Invoice are not removed; they
       move into the hamburger menu (rule 2) so nothing becomes unreachable. */
@media(max-width:900px){
  .utility .container{padding-top:6px;padding-bottom:6px;gap:0;min-height:0;flex-wrap:nowrap}
  .u-left .u-item:nth-child(2){display:none}   /* email address */
  .u-right{display:none}                       /* Schedule / Portal / Pay Invoice */
  .u-left{display:contents}
  .u-left .u-item:first-child{order:1;font-size:.84rem;white-space:nowrap;flex:0 0 auto}
  .u-left .u-item:first-child a{white-space:nowrap}
  .u-left .u-item:first-child svg{width:12px;height:12px;flex:0 0 auto}
}

/* 2 — Those links reappear at the foot of the mobile menu. Hidden on desktop,
       where they still live in the utility bar. */
.nav-util-extra{display:none}
@media(max-width:1080px){
  .nav .nav-util-extra{display:block}
  .nav .nav-util-extra a{display:flex;align-items:center;gap:9px;width:100%;
    padding:14px 4px;font-size:.95rem;font-weight:600;color:var(--navy);
    border-bottom:1px solid var(--line-soft)}
  .nav .nav-util-extra svg{width:14px;height:14px;fill:currentColor;opacity:.75}
  .nav .nav-util-extra.is-first{margin-top:14px;border-top:1px solid var(--line)}
}

/* 3 — Hero order on phones: the pitch and the buttons come first, the form
       goes last. Previously the 800px form sat between the headline and the
       copy, pushing pricing nearly four screens down. */
@media(max-width:760px){
  .consult-hero > .consult-col-form{order:20;margin:26px 0 0}
  .consult-hero .cs-inline{order:19}
}

/* 4 — On phones the form card shows its heading and the booking button; the
       message fields sit behind a toggle (added by js/main.js). Submitting
       still behaves exactly as before once expanded. */
.cf-toggle{display:none}
@media(max-width:760px){
  #consult-form .cf-toggle{display:block;width:100%;margin:2px 0 0;padding:11px 12px;
    background:none;border:0;border-top:1px solid var(--line);cursor:pointer;
    font:inherit;font-size:.85rem;font-weight:600;color:var(--navy);opacity:.85}
  #consult-form .cf-toggle:hover{opacity:1}
  #consult-form.cf-collapsed:not(.is-sent) .cf-or,
  #consult-form.cf-collapsed:not(.is-sent) #lead-form{display:none}
  #consult-form.cf-collapsed.cf-open:not(.is-sent) .cf-or{display:flex}
  #consult-form.cf-collapsed.cf-open:not(.is-sent) #lead-form{display:grid}
  #consult-form.cf-collapsed.cf-open .cf-toggle{display:none}
}

/* 5 — Hero spacing on phones: tighter rhythm and full-width buttons, so the
       "See Formation Packages" button clears the fold on a 375x812 screen. */
@media(max-width:760px){
  .consult-hero .breadcrumb{margin-bottom:10px;font-size:.78rem}
  .consult-hero .eyebrow{margin-bottom:8px}
  .consult-hero h1{margin-bottom:.3em}
  .consult-hero .lead{margin-bottom:14px}
  .consult-hero .lp-fee{margin:0 0 16px}
  .consult-hero .btn-row{gap:10px;margin:0 0 16px}
  .consult-hero .btn-row .btn{width:100%;justify-content:center}
  .consult-hero .hero-trust{margin:0 0 12px}
  section.hero{padding-top:26px;padding-bottom:34px}
}

/* 6 — Packages on phones lead with Essential ($999). Complete keeps its
       "Most Popular" badge, larger price and heavier card; it simply no
       longer jumps ahead of the entry price in the stack. Overrides the
       `order:-1` set at line ~2072. Desktop order is unchanged. */
@media(max-width:900px){
  .tiers .tier.is-featured{order:0}
}

/* 7 — Remove the duplicated calls to action in the mobile hero. The hero
       already carries a primary "Schedule a Free Consultation" button, so
       the card below drops its own booking button and its heading; on phones
       it becomes the message path only. Desktop keeps the full card. */
@media(max-width:760px){
  #consult-form .cf-book,
  #consult-form .cf-head,
  #consult-form .cf-sub{display:none}
  #consult-form{padding:0;border:0;background:none;box-shadow:none}
  #consult-form .cf-toggle{width:100%;margin:0;padding:14px 12px;background:#fff;
    border:1px solid var(--line);border-radius:12px;border-top:1px solid var(--line);
    font-size:.92rem;font-weight:700;opacity:1}
  #consult-form.cf-collapsed.cf-open:not(.is-sent){padding:22px;background:#fff;
    border:1px solid var(--line);border-radius:14px}
}

/* 8 — Section leads: a shorter version on phones. Both sentences stay in the
       markup; each breakpoint shows one. */
.lead-short{display:none}
@media(max-width:760px){
  .lead-full{display:none}
  .lead-short{display:block}
}

/* 9 — Comparison table on phones: hidden behind a button, reopened as
       stacked cards (built by js/main.js from the table itself). */
.cmpc-btn{display:none}
.cmpc-list{display:none}
@media(max-width:760px){
  .cmpc-mobile .cmp-wrap{display:none}
  .cmpc-mobile .cmpc-btn{display:flex;flex-direction:column;gap:3px;width:100%;
    margin:22px 0 0;padding:16px 18px;text-align:left;cursor:pointer;
    background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy);
    border-radius:12px;font:inherit;box-shadow:var(--sh-sm)}
  .cmpc-btn-t{font-family:var(--display);font-weight:700;font-size:1.04rem;color:var(--navy)}
  .cmpc-btn-s{font-size:.82rem;color:var(--muted)}
  .cmpc-mobile.cmpc-open .cmpc-list{display:grid;gap:12px;margin-top:14px}
  .cmpc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 17px}
  .cmpc-feat{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--navy);margin:0 0 9px}
  .cmpc-rows{list-style:none;padding:0;margin:0;display:grid;gap:7px}
  .cmpc-rows li{display:grid;gap:1px;padding:8px 10px;border-radius:8px;background:var(--soft)}
  .cmpc-rows li.is-us{background:#EDF3FF;border:1px solid #C7D7FA}
  .cmpc-opt{font-family:var(--sans);font-size:.68rem;font-weight:800;letter-spacing:.09em;
    text-transform:uppercase;color:var(--muted)}
  .cmpc-rows li.is-us .cmpc-opt{color:var(--navy)}
  .cmpc-val{font-size:.9rem;color:var(--ink);line-height:1.45}
  .cmpc-rows li.is-us .cmpc-val{font-weight:600}
}

/* 10 — /nonprofit-formation, phones only: the long "Why Growth & Protection"
        trademark explainer collapses to a single card linking to /trademark.
        The full section is untouched on desktop; nothing is deleted. */
.tm-mobile{display:none}
@media(max-width:760px){
  #why-trademark > .split{display:none}
  #why-trademark .tm-mobile{display:block}
  .tm-card{display:grid;gap:5px;padding:20px 20px 18px;background:#fff;
    border:1px solid var(--line);border-left:4px solid var(--navy);
    border-radius:12px;box-shadow:var(--sh-sm)}
  .tm-card-e{font-family:var(--sans);font-size:.68rem;font-weight:800;letter-spacing:.11em;
    text-transform:uppercase;color:var(--muted)}
  .tm-card-h{font-family:var(--display);font-weight:700;font-size:1.08rem;
    line-height:1.3;color:var(--navy)}
  .tm-card-l{font-size:.88rem;font-weight:600;color:var(--gold-dark, var(--navy));margin-top:3px}
}

/* 11 — Mobile hero, final order. The "Compare what each package includes"
        link is dropped on phones (the packages section is one tap away from
        the button above it), and the message option moves directly under the
        two buttons instead of sitting at the foot of the hero.
        Order on phones: eyebrow, H1, lead, price, buttons, message, chips,
        review. Desktop is unaffected. */
@media(max-width:760px){
  .consult-hero .hero-jump{display:none}
  .consult-hero > .consult-col-form{order:9;margin:0 0 16px}
  .consult-hero .hero-trust{order:10}
  .consult-hero .cs-inline{order:11}
}

/* 12 — "Who this is for": the coral "You likely need a different page" panel
        is hidden at every width, leaving only "This is the right fit", which
        then runs full width. The markup is untouched, so restoring it is a
        matter of deleting this rule. NOTE: that panel carried the only links
        to /churches, /private-foundations, /501c4-social-welfare,
        /501c6-business-league, /501c7-social-club and /nonprofit-reinstatement
        from this page. */
#who-for .saynot .say.is-no{display:none}
#who-for .saynot.g2{grid-template-columns:1fr}

/* 13 — Related Reading on phones: the seven article cards collapse to one
        card linking through to the blog. Desktop keeps the full grid. */
.rr-mobile{display:none}
@media(max-width:760px){
  #related-reading .grid{display:none}
  #related-reading .rr-mobile{display:block;margin-top:18px}
  .rr-card{display:grid;gap:5px;padding:20px;background:#fff;border:1px solid var(--line);
    border-left:4px solid var(--navy);border-radius:12px;box-shadow:var(--sh-sm)}
  .rr-card-h{font-family:var(--display);font-weight:700;font-size:1.08rem;color:var(--navy)}
  .rr-card-s{font-size:.88rem;color:var(--muted);line-height:1.5}
  .rr-card-l{font-size:.88rem;font-weight:700;color:var(--navy);margin-top:3px}
}

/* 14 — Sticky mobile CTA bar (markup injected by js/main.js on pages that
        carry data-sticky-cta). Phones only. */
.scta{display:none}
@media(max-width:760px){
  .scta{position:fixed;left:0;right:0;bottom:0;z-index:880;
    display:flex;gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(8px);
    border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(3,27,136,.08);
    transform:translateY(110%);transition:transform .22s ease;
    pointer-events:none;visibility:hidden}
  .scta.is-on{transform:translateY(0);pointer-events:auto;visibility:visible}
  .scta-btn{display:flex;align-items:center;justify-content:center;gap:7px;
    min-height:48px;padding:0 14px;border-radius:10px;
    font-family:var(--sans);font-weight:700;font-size:.92rem;text-align:center;line-height:1.15}
  .scta-call{flex:0 0 33%;background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
  .scta-book{flex:1 1 auto;background:var(--navy);color:#fff}
  .scta-btn svg{width:17px;height:17px;flex:none}
  /* keep the closing content clear of the bar */
  body.has-scta{padding-bottom:70px}
  /* lift the Clio chat bubble above the bar so they do not overlap */
  body.has-scta iframe[src*="clio"],
  body.has-scta div[class*="clio"][style*="fixed"]{bottom:78px !important}
}

/* 15 — iOS zooms the page whenever a focused form control is under 16px.
        Every field was 14.4px, so tapping one lurched the layout. */
@media(max-width:760px){
  input,select,textarea,
  #consult-form input,#consult-form select,#consult-form textarea,
  .tight-page #consult-form input,.tight-page #consult-form select,
  .tight-page #consult-form textarea{font-size:16px}
}

/* 16 — Tap targets. These three text links were 17-22px tall on a phone,
        well under the 44px guideline. */
@media(max-width:760px){
  .inc-jump,.cs-more,
  #how-formation .note a,
  .note a[href="#included"]{display:inline-flex;align-items:center;
    min-height:44px;padding:6px 2px}
}

/* 17 — The quiet "or pay and get started" line is hidden on phones, where the
        goal is a conversation first. The desktop quiet line is untouched. */
@media(max-width:760px){
  .ip-actions .ip-pay{display:none}
}

/* ============================================================================
   BLOG CATEGORY NAVIGATION (v218)
   .article-row is display:grid, which beats the UA [hidden] rule, so hiding
   is done with a class carrying !important rather than the attribute.
   ============================================================================ */
.blogcats{background:linear-gradient(180deg,#F7F9FF 0%,#fff 100%);
  border-bottom:1px solid var(--line);padding:22px 0 20px}
.blogcat-row{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;align-items:center}
.blogcat-btn{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:.86rem;font-weight:600;color:var(--navy);
  background:#fff;border:1px solid #D4DDF2;border-radius:999px;padding:9px 16px;
  cursor:pointer;transition:transform .14s,box-shadow .14s,background .14s,border-color .14s;
  min-height:40px;white-space:nowrap;box-shadow:0 1px 2px rgba(3,27,136,.04)}
.blogcat-btn:hover{border-color:var(--navy);transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(3,27,136,.10)}
.blogcat-btn .blogcat-n{display:inline-flex;align-items:center;justify-content:center;
  min-width:21px;height:21px;padding:0 6px;border-radius:999px;
  background:var(--soft);color:var(--muted);font-size:.72rem;font-weight:800;line-height:1}
.blogcat-btn.is-on{background:var(--navy);color:#fff;border-color:var(--navy);
  box-shadow:0 4px 12px rgba(3,27,136,.22)}
.blogcat-btn.is-on .blogcat-n{background:rgba(255,255,255,.22);color:#fff}
.blogcat-btn.is-empty{opacity:.45}
.blogcat-count{text-align:center;margin:14px 0 0;font-size:.82rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.blogcat-empty{text-align:center;margin:14px auto 0;max-width:560px;font-size:.94rem;
  color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px}

/* the actual fix */
.article-row.is-filtered-out{display:none !important}
.article-row{animation:artin .26s ease both}
@keyframes artin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .blogcats{padding:16px 0 14px}
  .blogcat-row{gap:8px;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;padding:2px 14px 8px;margin:0 -14px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%)}
  .blogcat-row::-webkit-scrollbar{display:none}
  .blogcat-btn{flex:0 0 auto;min-height:42px;font-size:.85rem;padding:9px 15px}
  .blogcat-count{font-size:.76rem;margin-top:10px}
}

/* Blog post: related services, resources and official sources (v216) */
.nextup{background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy);
  border-radius:12px;padding:24px 26px;box-shadow:var(--sh-sm)}
.nextup h2{font-size:1.15rem;margin:0 0 14px;color:var(--navy)}
.nextup-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.nextup-list li{position:relative;padding-left:20px;font-size:.96rem;line-height:1.5}
.nextup-list li::before{content:"\203A";position:absolute;left:0;color:var(--gold);font-weight:700}
.nextup-list a{font-weight:600}
@media(max-width:760px){.nextup{padding:20px}.nextup h2{font-size:1.06rem}}

/* Entity-type router on /nonprofit-formation (v216) — catches ad traffic that
   searched generically for a nonprofit attorney but needs a different route. */
.ntypes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.ntype{display:grid;gap:5px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--navy);
  border-radius:11px;padding:17px 19px;transition:.16s}
.ntype:hover{border-left-color:var(--gold);box-shadow:var(--sh-sm);transform:translateY(-1px)}
.ntype-h{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--navy);line-height:1.25}
.ntype-d{font-size:.88rem;color:var(--muted);line-height:1.5}
@media(max-width:980px){.ntypes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ntypes{grid-template-columns:1fr;gap:10px;margin-top:22px}
  .ntype{padding:15px 17px}.ntype-h{font-size:.98rem}}

/* Hub router: lead card + the "not sure which type?" line on service pages (v217) */
.ntype.is-lead{border-left-color:var(--gold);background:linear-gradient(180deg,#FBFCFF,#fff)}
.ntype.is-lead .ntype-h{color:var(--navy)}
.hubline{margin:.5em 0 1.1em;font-size:.9rem}
.hubline a{font-weight:600;color:var(--navy);border-bottom:1px solid rgba(3,27,136,.25)}
.hubline a:hover{border-bottom-color:var(--navy)}
@media(max-width:760px){.hubline{order:4;font-size:.86rem;margin:.2em 0 .9em}}

/* ============================================================================
   /nonprofit-attorney — paid-traffic router (v219)
   Not an SEO page. Its whole job is to move someone to the right service page
   in one click, so the four routes are the largest thing after the hero.
   ============================================================================ */
.routes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:32px}
.route{background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy);
  border-radius:14px;padding:26px 26px 22px;box-shadow:var(--sh-sm);
  display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}
.route:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(3,27,136,.10)}
.route-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:6px;text-decoration:none}
a.route-head:hover .route-t{text-decoration:underline}
.route-t{font-family:var(--display);font-weight:700;font-size:1.32rem;color:var(--navy);line-height:1.2}
.route-p{font-family:var(--display);font-weight:700;font-size:1.06rem;color:var(--gold-dark,var(--navy));
  white-space:nowrap;background:var(--gold-soft,#F2F5FF);border-radius:999px;padding:4px 12px}
.route-who{margin:0 0 10px;font-size:1rem;font-weight:600;color:var(--ink)}
.route-b{margin:0 0 16px;font-size:.93rem;color:var(--muted);line-height:1.6}
.route-subs{list-style:none;padding:16px 0 0;margin:auto 0 0;border-top:1px solid var(--line-soft);
  display:grid;gap:8px}
.route-subs li{position:relative;padding-left:18px;font-size:.9rem;line-height:1.45}
.route-subs li::before{content:"\203A";position:absolute;left:0;color:var(--gold);font-weight:700}
.route-subs a{font-weight:600;color:var(--navy)}
@media(max-width:900px){.routes{grid-template-columns:1fr;gap:14px;margin-top:26px}
  .route{padding:22px 20px 18px}.route-t{font-size:1.18rem}.route-p{font-size:.98rem}}

/* Lead-capture modal on /nonprofit-attorney (v220) — keeps the hero short */
.lead-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-start;
  justify-content:center;padding:4vh 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.lead-modal[hidden]{display:none}
.lead-modal-back{position:fixed;inset:0;background:rgba(8,16,48,.58);backdrop-filter:blur(2px)}
.lead-modal-panel{position:relative;z-index:1;width:100%;max-width:560px;margin:auto 0;background:#fff;border-radius:14px;
  animation:lmin .2s ease both}
@keyframes lmin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.lead-modal-x{position:absolute;top:-6px;right:-6px;z-index:2;width:36px;height:36px;
  border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);
  font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:var(--sh-sm)}
.lead-modal-x:hover{background:var(--soft)}
.lead-modal #consult-form{max-height:none}
body.lead-modal-open{overflow:hidden}
.hero-trust.center-trust{justify-content:center}
@media(max-width:760px){
  .lead-modal{padding:0}
  .lead-modal-panel{max-width:none;min-height:100%;margin:0}
  .lead-modal-x{top:10px;right:12px}
  .lead-modal #consult-form{border-radius:0;min-height:100vh;padding:56px 20px 32px}
}

/* /nonprofit-attorney — route cards v221 (eyebrow + explore link) */
.route-eyebrow{font-family:var(--sans);font-size:.68rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.route .route-t{font-family:var(--display);font-weight:700;font-size:1.36rem;line-height:1.2;
  color:var(--navy);margin:0 0 9px}
.route .route-t a{color:inherit;text-decoration:none}
.route .route-t a:hover{text-decoration:underline}
.route .route-p{display:inline-block;font-family:var(--display);font-weight:700;font-size:1.02rem;
  color:var(--navy);background:var(--gold-soft,#EDF3FF);border:1px solid #C7D7FA;
  border-radius:999px;padding:4px 13px;margin:0 0 12px;white-space:nowrap}
.route-cta{margin:0 0 4px}
.route-cta a{font-family:var(--sans);font-weight:700;font-size:.95rem;color:var(--navy)}
.route-cta a:hover{text-decoration:underline}

/* "Not sure where to start" steps */
.hiw{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 34px;margin-top:30px}
.hiw-step{display:flex;gap:16px;align-items:flex-start}
.hiw-n{flex:none;width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);
  font-weight:700;font-size:1.05rem}
.hiw-h{margin:6px 0 4px;font-family:var(--display);font-weight:700;font-size:1.06rem;color:var(--navy);line-height:1.3}
.hiw-d{margin:0;font-size:.93rem;color:var(--muted);line-height:1.55}
@media(max-width:860px){.hiw{grid-template-columns:1fr;gap:16px;margin-top:24px}
  .hiw-n{width:34px;height:34px;font-size:.98rem}.hiw-h{font-size:1rem}}

/* Pricing cards v224: unified CTAs, accent on the featured package,
   eligibility note on Essential, Google review badge in the hero. */
.btn-accent{background:var(--green,#0F8A4F);color:#fff;border:1.5px solid var(--green,#0F8A4F);
  box-shadow:0 4px 14px rgba(15,138,79,.28)}
.btn-accent:hover{background:#0C7342;border-color:#0C7342;color:#fff}
.tier-warn{margin:8px 0 0;padding:9px 12px;background:#FFF8E6;border:1px solid #F0DFAE;
  border-radius:8px;font-size:.79rem;line-height:1.45;color:#6B5518;text-align:left}
.tier.is-featured .tier-warn{display:none}
.cs-google{display:inline-flex;align-items:center;gap:8px;margin:0 10px 12px 0;padding:8px 13px;
  background:#fff;border:1px solid var(--line);border-radius:10px;text-decoration:none;box-shadow:var(--sh-sm)}
.cs-google-stars{color:#F5A623;letter-spacing:1px;font-size:.92rem}
.cs-google-t{font-family:var(--sans);font-weight:700;font-size:.84rem;color:var(--navy)}
@media(max-width:760px){
  .consult-hero .cs-google{order:11;margin:0 0 10px}
  .tier-warn{font-size:.77rem;padding:8px 11px}
}

/* Flat-fee and unused-fee-refund badges on the nonprofit pages (v225) */
.guarantees{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:38px 0}
.gbadges{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1100px){.gbadges{grid-template-columns:repeat(2,1fr)}}
.gbadge{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--green,#0F8A4F);border-radius:13px;padding:22px 24px;box-shadow:var(--sh-sm)}
.gbadge-ic{flex:none;width:42px;height:42px;border-radius:50%;background:#EAF7F0;
  display:flex;align-items:center;justify-content:center;color:var(--green,#0F8A4F)}
.gbadge-ic svg{width:22px;height:22px}
.gbadge-h{margin:3px 0 6px;font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--navy);line-height:1.25}
.gbadge-d{margin:0;font-size:.91rem;color:var(--muted);line-height:1.6}
@media(max-width:860px){.gbadges{grid-template-columns:1fr;gap:14px}
  .guarantees{padding:28px 0}.gbadge{padding:18px 19px;gap:13px}
  .gbadge-ic{width:36px;height:36px}.gbadge-ic svg{width:19px;height:19px}
  .gbadge-h{font-size:1.04rem}.gbadge-d{font-size:.89rem}}

/* v229 — call button in hero, review strip beside pricing, quick lead modal */
.btn-call{display:inline-flex;align-items:center;gap:8px}
.btn-call svg{width:16px;height:16px;flex:none}
.proofstrip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}
.proof{max-width:720px;margin:0 auto;text-align:center}
.proof-stars{color:#F5A623;letter-spacing:2px;font-size:1.02rem}
.proof-q{margin:8px 0 6px;font-family:var(--display);font-size:1.2rem;line-height:1.45;color:var(--ink)}
.proof-w{margin:0;font-size:.88rem;color:var(--muted)}
.proof-w a{font-weight:600;color:var(--navy)}
.proof-d{margin:8px 0 0;font-size:.72rem;color:var(--muted)}
.quick-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 26px;box-shadow:var(--sh)}
.quick-card h3{margin:0 0 6px;font-size:1.22rem;color:var(--navy)}
.quick-sub{margin:0 0 18px;font-size:.93rem;color:var(--muted)}
.qf-stack{grid-template-columns:1fr !important}
.quick-or{margin:14px 0 0;text-align:center;font-size:.9rem;color:var(--muted)}
.quick-or a{font-weight:600;color:var(--navy)}
@media(max-width:760px){
  .proofstrip{padding:20px 0}.proof-q{font-size:1.06rem}
  .consult-hero .btn-call{order:8;width:100%;justify-content:center}
  .quick-card{border-radius:0;min-height:100vh;padding:56px 20px 32px}
}
.qf-status{margin:9px 0 0;font-size:.88rem;font-weight:600;min-height:1px}
.qf-status.ok{color:#0B6B43}
.qf-status.err{color:#A32020}
.qf-row{display:grid;gap:12px;margin-bottom:14px}
.qf-row label{display:grid;gap:5px}
.qf-row span{font-size:.78rem;font-weight:700;color:var(--ink)}
.qf-row input{width:100%;padding:11px 13px;border:1px solid #C9D3EA;border-radius:8px;font-size:16px}
.qf-note{margin:11px 0 0;font-size:.74rem;color:var(--muted);line-height:1.5}
.proof-cta{margin-top:18px}

/* v230 — mobile hero parity.
   On phones every service hero now reads like /nonprofit-attorney: headline,
   lead, buttons, trust chips, then a one-line Avvo badge. The full review card
   (291px on a phone) is desktop-only. */
.hero-avvo{display:none}
.hero-avvo-note{display:none}
@media(min-width:761px){
  .consult-hero .hero-avvo,
  .consult-hero .hero-avvo-note{display:none !important}
}
@media(max-width:760px){
  .consult-hero .cs-inline{display:none}
  .consult-hero .hero-avvo{display:inline-flex;align-items:center;gap:9px;order:11;
    margin:2px 0 0;padding:9px 14px;background:#fff;border:1px solid var(--line);
    border-radius:10px;text-decoration:none;box-shadow:var(--sh-sm);align-self:flex-start}
  .consult-hero .hero-avvo-stars{color:#F5A623;letter-spacing:1px;font-size:.95rem}
  .consult-hero .hero-avvo-t{font-family:var(--sans);font-weight:700;font-size:.84rem;color:var(--navy)}
  .consult-hero .hero-avvo-note{display:block;order:12;margin:7px 0 2px;
    font-size:.7rem;color:var(--muted);line-height:1.45}
  .consult-hero .cs-google{order:13}
}

/* v231 — guarantee strip in the hero.
   Four pills that scroll horizontally on a phone and link down to the full
   badges. Kept deliberately small so it reads as reassurance, not a second
   headline. */
.herobadges{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.hb{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;background:#fff;
  border:1px solid #D4DDF2;border-radius:999px;text-decoration:none;
  box-shadow:0 1px 2px rgba(3,27,136,.05);transition:.15s}
.hb:hover{border-color:var(--navy);box-shadow:0 4px 10px rgba(3,27,136,.10);transform:translateY(-1px)}
.hb svg{width:15px;height:15px;flex:none;color:var(--green,#0F8A4F)}
.hb span{font-family:var(--sans);font-size:.79rem;font-weight:700;color:var(--navy);white-space:nowrap}
@media(max-width:760px){
  .consult-hero .herobadges{order:9;margin:12px 0 0;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:2px 14px 6px;margin-left:-14px;margin-right:-14px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 20px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 20px),transparent 100%)}
  .consult-hero .herobadges::-webkit-scrollbar{display:none}
  .hb{flex:0 0 auto;padding:8px 13px}
  .hb span{font-size:.78rem}
}
/* four guarantee cards read better two-up than four across */
.gbadges{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.gbadges{grid-template-columns:1fr}}
/* smooth the jump from the hero pills to the cards */
#guarantees{scroll-margin-top:86px}

/* ---- 18. inline related-reading line inside blog posts ---- */
.prose .inline-related,
.container .inline-related{
  margin:28px 0 8px;
  padding:14px 16px;
  border-left:3px solid var(--accent,#c8a04a);
  background:#f7f6f3;
  border-radius:0 6px 6px 0;
  font-size:.95rem;
  line-height:1.6;
}
.inline-related strong{color:#0f2b46}

/* ============================================================
   19. Resources page: about band + external resources
   Scoped to #about-band and #external-resources only.
   ============================================================ */
#about-band{background:#fff;border-bottom:1px solid var(--line-soft)}
#about-band .about-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:40px;align-items:start}
#about-band h2{font-size:1.75rem;margin:6px 0 14px;line-height:1.25}
#about-band .about-copy hr.rule{margin:0 0 18px}
#about-band .about-copy p{color:var(--body)}
#about-band .about-points{list-style:none;padding:0;margin:18px 0 22px}
#about-band .about-points li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--body)}
#about-band .about-points li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--gold)}
#about-band .about-aside{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:22px 20px}
#about-band .about-stat{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
#about-band .about-stat:last-of-type{border-bottom:0}
#about-band .as-n{font-size:1.65rem;font-weight:700;color:var(--navy);line-height:1;min-width:58px}
#about-band .as-l{font-size:.92rem;color:var(--muted);line-height:1.35}
#about-band .about-aside-note{font-size:.92rem;color:var(--muted);margin:14px 0 12px}

#external-resources .ext-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:26px}
#external-resources .ext-group{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px 10px}
#external-resources .ext-h{margin:0 0 14px;font-size:1.05rem}
#external-resources .ext-list{list-style:none;padding:0;margin:0}
#external-resources .ext-item{padding:12px 0;border-top:1px solid var(--line-soft)}
#external-resources .ext-item:first-child{border-top:0;padding-top:0}
#external-resources .ext-link{display:block;font-weight:650;color:var(--navy);text-decoration:none;line-height:1.35}
#external-resources .ext-link:hover{text-decoration:underline}
#external-resources .ext-link::after{content:" \2197";font-size:.82em;color:var(--gold);text-decoration:none}
#external-resources .ext-desc{display:block;margin-top:4px;font-size:.92rem;color:var(--muted);line-height:1.5}
#external-resources .ext-note{margin-top:24px;font-size:.86rem;color:var(--muted);text-align:center;max-width:760px;margin-left:auto;margin-right:auto}

@media(max-width:860px){
  #about-band .about-grid{grid-template-columns:1fr;gap:26px}
  #about-band h2{font-size:1.45rem}
  #external-resources .ext-wrap{grid-template-columns:1fr;gap:18px}
  #external-resources .ext-group{padding:18px 18px 8px}
}

/* ============================================================
   20. Blog prose: pull quote + accept/refuse pair
   Scoped to .prose so nothing else on the site is affected.
   ============================================================ */
.prose .pullquote{margin:30px 0;padding:22px 26px;background:var(--gold-soft);
  border-left:4px solid var(--gold);border-radius:0 12px 12px 0}
.prose .pullquote p{margin:0;font-size:1.12rem;line-height:1.55;color:var(--navy);font-weight:600}

.prose .vs-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0}
.prose .vs-col{border:1px solid var(--line);border-radius:12px;padding:18px 20px 14px;background:#fff}
.prose .vs-col .vs-h{margin:0 0 10px;font-weight:700;font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase}
.prose .vs-col ul{margin:0;padding-left:20px}
.prose .vs-col li{margin-bottom:7px;font-size:.95rem;line-height:1.5;color:var(--body)}
.prose .vs-yes{background:#F2FAF4;border-color:#CDE9D6}
.prose .vs-yes .vs-h{color:#1E8449}
.prose .vs-no{background:#FDF4F4;border-color:#F0D3D3}
.prose .vs-no .vs-h{color:#C0392B}

@media(max-width:700px){
  .prose .vs-pair{grid-template-columns:1fr;gap:14px}
  .prose .pullquote{padding:18px 20px;margin:24px 0}
  .prose .pullquote p{font-size:1.02rem}
}