/* ==========================================================================
   Fried Law, PLLC — Design system & components
   Direction: "Authority" — navy + gold, Source Serif 4 + Source Sans 3.
   Framework-free. Single source of truth for the whole site.
   ========================================================================== */

:root {
  --navy:#0e1f33; --navy-2:#16293f; --navy-3:#0a1826;
  --gold:#c6a052; --gold-2:#dcbd7e; --gold-deep:#9c7a2f;
  --cream:#f6f2ea; --cream-2:#efe8da;
  --ink:#16212c; --text:#3a4650; --muted:#5f6a76;
  --line:#ddd4c2; --line-navy:#24384f;
  --white:#ffffff;
  --maxw:1200px;
  --display:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ui:'Source Sans 3', system-ui, -apple-system, sans-serif;
  --transition: all .2s ease;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{
  font-family:var(--ui); background:var(--cream); color:var(--text);
  line-height:1.72; font-size:1.02rem; overflow-x:clip;
  -webkit-font-smoothing:antialiased; direction:ltr;
}
h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); font-weight:600; line-height:1.16; letter-spacing:-.005em; text-wrap:balance; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.3rem,4vw,2.6rem); }
.eyebrow{ font-size:.76rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-deep); }
.eyebrow.light{ color:var(--gold-2); }

/* Skip link & noscript ---------------------------------------------------- */
.skip-link{ position:absolute; left:-999px; top:0; background:var(--gold); color:var(--navy); padding:.7rem 1.1rem; z-index:2000; font-weight:700; }
.skip-link:focus{ left:0; }
.noscript-banner{ background:var(--navy); color:#fff; text-align:center; padding:.7rem 1rem; font-size:.9rem; }
.noscript-banner a{ color:var(--gold-2); font-weight:600; }

/* Focus visibility -------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* Nav --------------------------------------------------------------------- */
nav.site-nav{
  position:sticky; top:0; z-index:1000; direction:ltr; background:var(--navy);
  border-bottom:1px solid var(--line-navy);
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem clamp(1.3rem,4vw,2.6rem);
}
.brand{ display:flex; flex-direction:row; align-items:center; gap:.62rem; }
.brand-mark{ width:40px; height:40px; flex:0 0 auto; display:block; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand .name{ font-family:var(--display); font-weight:700; font-size:1.45rem; color:var(--gold); letter-spacing:.04em; text-transform:uppercase; }
.brand .kicker{ font-size:.58rem; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:#9fb0c2; margin-top:.36rem; }

.nav-links, .nav-links .dropdown-menu{ direction:ltr; text-align:left; }
.nav-links{ list-style:none; display:flex; align-items:center; gap:1.6rem; }
.nav-links > li > a{ font-size:.9rem; font-weight:600; color:#e7ecf1; transition:var(--transition); }
.nav-links > li > a:hover, .nav-links > li > a[aria-current="page"]{ color:var(--gold-2); }
.nav-close-li{ display:none; }
.nav-links .navcta{ border:1px solid var(--gold); color:var(--gold-2)!important; padding:.55rem 1.05rem; font-size:.82rem; font-weight:600; letter-spacing:.03em; display:inline-flex; align-items:center; gap:.5rem; }
.nav-links .navcta:hover{ background:var(--gold); color:var(--navy)!important; }

/* Services dropdown */
.has-dropdown{ position:relative; }
.nav-dropdown-trigger{ display:inline-flex; align-items:center; gap:.35rem; }
.dropdown-chevron{ transition:transform .2s; }
.dropdown-menu{
  list-style:none; position:absolute; top:calc(100% + .9rem); left:-.8rem; min-width:260px;
  background:var(--navy-2); border:1px solid var(--line-navy); box-shadow:0 20px 48px -20px rgba(0,0,0,.6);
  padding:.4rem; opacity:0; visibility:hidden; transform:translateY(6px); transition:.18s; z-index:1001;
}
.dropdown-menu a{ display:block; padding:.6rem .8rem; font-size:.86rem; font-weight:600; color:#e7ecf1; }
.dropdown-menu a:hover{ background:var(--navy); color:var(--gold-2); }
.dropdown-menu small{ display:block; color:#9fb0c2; font-size:.74rem; font-weight:400; margin-top:.15rem; }
@media (min-width:941px){
  .has-dropdown:hover .dropdown-menu, .has-dropdown:focus-within .dropdown-menu{ opacity:1; visibility:visible; transform:none; }
}

/* Hamburger + backdrop (mobile) */
.hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; background:none; border:0; cursor:pointer; }
.hamburger span{ display:block; width:25px; height:2px; background:var(--gold); transition:var(--transition); }
.nav-backdrop{ display:none; }

/* Buttons ----------------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--ui); font-weight:700; font-size:.95rem; letter-spacing:.01em; padding:.95rem 1.7rem; cursor:pointer; border:1px solid transparent; transition:var(--transition); }
.btn svg{ width:17px; height:17px; }
.btn-gold{ background:var(--gold); color:var(--navy); border-color:var(--gold); }
.btn-gold:hover{ background:var(--gold-2); }
.btn-outline-gold{ background:transparent; color:var(--gold-2); border-color:var(--gold); }
.btn-outline-gold:hover{ background:var(--gold); color:var(--navy); }
.btn-outline-ink{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline-ink:hover{ background:var(--ink); color:#fff; }
.link-underline{ font-weight:700; font-size:.95rem; color:#fff; border-bottom:2px solid var(--gold); padding-bottom:3px; }
.link-underline:hover{ color:var(--gold-2); }
.explore{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.82rem; letter-spacing:.04em; color:var(--gold-deep); }
.explore svg{ width:15px; height:15px; transition:transform .2s; }
.explore:hover svg{ transform:translateX(4px); }

/* Hero (homepage) --------------------------------------------------------- */
.hero{ background:var(--navy); color:#e4ebf2; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; }
.hero-copy{ padding:clamp(2.6rem,5.5vw,4.4rem) clamp(1.3rem,4vw,2.6rem); max-width:640px; margin-left:auto; align-self:center; }
.hero-copy .eyebrow{ display:block; margin-bottom:1.1rem; }
.hero h1{ color:#fff; font-size:clamp(2.4rem,4.8vw,3.5rem); font-weight:700; line-height:1.1; }
.hero h1 .g{ color:var(--gold-2); display:block; }
.hero .lead{ color:#cdd7e1; font-size:1.12rem; margin-top:1.2rem; max-width:48ch; }
.hero .lead strong{ color:#fff; font-weight:600; }
.hero .cta-row{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-top:1.9rem; }
.hero .cta-sub{ font-size:.9rem; color:#a8b6c4; margin-top:1rem; display:flex; align-items:center; gap:.5rem; }
.hero .cta-sub svg{ width:16px; height:16px; color:var(--gold); flex-shrink:0; }

/* Honest brand crest (no office implied) */
.hero-emblem{ position:relative; display:grid; place-items:center; padding:clamp(1.5rem,4vw,3rem); border-left:1px solid var(--line-navy); }
.crest{ position:relative; width:min(100%,360px); aspect-ratio:4/5; border:1px solid var(--gold); overflow:hidden;
  background:linear-gradient(160deg,var(--navy-2),var(--navy-3)); box-shadow:0 30px 60px -34px rgba(0,0,0,.65); }
.crest::before{ content:""; position:absolute; inset:10px; border:1px solid rgba(198,160,82,.4); z-index:2; pointer-events:none; }
.crest img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.crest figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:1; display:flex; flex-direction:column; gap:.1rem;
  padding:3.4rem 1.6rem 1.5rem; text-align:center;
  background:linear-gradient(to top, rgba(10,24,38,.94) 38%, rgba(10,24,38,.72) 62%, transparent); }
.crest .cn{ font-family:var(--display); font-size:1.3rem; color:#fff; font-weight:600; line-height:1.2; }
.crest .ce{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2); }

/* Proof strip ------------------------------------------------------------- */
.proof{ background:var(--navy-3); border-top:1px solid var(--line-navy); color:#c9d4df; }
.proof .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-block:1.1rem; }
.proof .stars{ display:flex; align-items:center; gap:.7rem; font-size:.95rem; }
.proof .stars .s{ color:var(--gold); letter-spacing:.12em; font-size:1.05rem; }
.proof .stars b{ color:#fff; font-weight:600; }
.proof .rs{ color:#8ea0b4; font-size:.84rem; }
.proof .rs a{ color:var(--gold-2); text-decoration:underline; text-underline-offset:2px; }
.proof .rs a:hover{ color:#fff; }
.proof .re{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.proof .re div{ display:flex; align-items:center; gap:.5rem; font-size:.84rem; font-weight:600; color:#b6c2ce; }
.proof .re svg{ width:17px; height:17px; color:var(--gold); }

/* Generic section --------------------------------------------------------- */
section.blk{ padding:clamp(3.4rem,6.5vw,5.2rem) 0; }
.alt{ background:var(--cream-2); }
.sec-head{ max-width:700px; }
.sec-head.center{ margin:0 auto; text-align:center; }
.sec-head h2{ font-size:clamp(2rem,3.8vw,2.8rem); margin:.8rem 0; }
.sec-head p{ color:var(--text); font-size:1.1rem; }
.sec-head .accent{ color:var(--gold-deep); font-weight:600; }

/* Practice cards ---------------------------------------------------------- */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:2.6rem; }
.card{ background:var(--white); border:1px solid var(--line); padding:1.9rem 1.6rem; display:flex; flex-direction:column; gap:.7rem; transition:var(--transition); }
.card:hover{ border-color:var(--gold); transform:translateY(-4px); box-shadow:0 18px 40px -22px rgba(22,33,44,.35); }
.icon-badge{ width:52px; height:52px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; color:var(--gold-deep); margin-bottom:.4rem; }
.icon-badge svg{ width:24px; height:24px; }
.card h3{ font-size:1.32rem; font-weight:600; }
.card ul{ list-style:none; display:flex; flex-direction:column; gap:.35rem; font-size:.94rem; color:var(--text); }
.card ul li{ padding-left:1rem; position:relative; }
.card ul li::before{ content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; background:var(--gold); border-radius:50%; }
.card .geo{ font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.card .geo b{ color:var(--ink); }
.card .explore{ margin-top:.3rem; }

/* How it works ------------------------------------------------------------ */
.how .head{ text-align:center; max-width:660px; margin:0 auto 2.6rem; }
.how .head h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); margin-top:.5rem; }
.how .head p{ color:var(--muted); margin-top:.5rem; font-size:1.05rem; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.step{ background:var(--white); border:1px solid var(--line); padding:1.9rem 1.6rem; }
.step .n{ font-family:var(--display); font-size:2.3rem; color:var(--gold-deep); line-height:1; font-weight:700; }
.step h3{ font-size:1.28rem; font-weight:600; margin:.5rem 0 .4rem; }
.step p{ color:var(--muted); font-size:.96rem; }
.step .free{ display:inline-block; margin-top:.7rem; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-deep); }

/* Fee band ---------------------------------------------------------------- */
.fee{ background:var(--navy); color:#e4ebf2; }
.fee .wrap{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1.4rem,4vw,3rem); align-items:center; padding-block:clamp(2.4rem,5vw,3.4rem); }
.fee h2{ color:#fff; font-size:clamp(1.6rem,2.8vw,2.1rem); max-width:14ch; }
.fee .desc{ max-width:48ch; }
.fee .desc strong{ color:#fff; }
.fee .pillars{ display:flex; gap:1.6rem; flex-wrap:wrap; margin-top:1rem; }
.fee .pillars div{ display:flex; align-items:center; gap:.5rem; font-size:.86rem; font-weight:600; color:var(--gold-2); }
.fee .pillars svg{ width:18px; height:18px; }

/* Attorney ---------------------------------------------------------------- */
.attorney{ background:var(--cream); }
.attorney .grid{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.6rem,5vw,4rem); align-items:center; }
/* Homepage variant: no portrait (the hero carries the only photo), so this
   section teases /about/ with a credentials panel instead of duplicating it. */
.attorney-teaser .grid{ grid-template-columns:1fr auto; }
.creds-panel{ background:var(--white); border:1px solid var(--line); padding:2rem 1.9rem;
  width:min(400px,100%); box-shadow:0 24px 50px -34px rgba(14,31,51,.4); }
.creds-panel .creds{ margin-top:0; }
/* Refined, smaller framed portrait (was oversized). */
.portrait{ position:relative; width:290px; max-width:100%; aspect-ratio:4/5; justify-self:center; border:1px solid var(--gold); background:linear-gradient(160deg,var(--navy-2),var(--navy)); display:grid; place-items:center; overflow:hidden; box-shadow:0 24px 50px -30px rgba(14,31,51,.55); }
.portrait::before{ content:""; position:absolute; inset:12px; border:1px solid rgba(198,160,82,.4); z-index:1; pointer-events:none; }
.portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.portrait span{ color:#9fb0c2; font-size:.82rem; text-align:center; padding:1rem; z-index:1; }
.attorney h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:.6rem; }
.attorney .role{ font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); }
.attorney p.bio{ margin-top:1rem; color:var(--text); max-width:54ch; font-size:1.05rem; }
.creds{ list-style:none; display:flex; flex-direction:column; gap:1rem; margin-top:1.5rem; }
.creds li{ display:flex; gap:.9rem; align-items:flex-start; }
.creds .ci{ width:40px; height:40px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; color:var(--gold-deep); flex-shrink:0; }
.creds .ci svg{ width:20px; height:20px; }
.creds b{ display:block; font-family:var(--display); font-weight:600; color:var(--ink); font-size:1.05rem; }
.creds span{ font-size:.92rem; color:var(--muted); }

/* Testimonials ------------------------------------------------------------ */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.4rem; }
.review{ background:var(--white); border:1px solid var(--line); padding:1.8rem 1.6rem; }
.review .q{ font-family:var(--display); font-size:2.6rem; color:var(--gold); line-height:.6; height:1rem; }
.review p{ font-family:var(--display); font-style:italic; font-size:1.05rem; color:var(--ink); line-height:1.5; margin:1rem 0 1.2rem; }
.review{ display:flex; flex-direction:column; }
.review p{ flex:1; }
.review .who{ font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.review .who .src{ display:flex; align-items:center; gap:.4rem; margin-top:.4rem; font-size:.74rem; font-weight:500; letter-spacing:.02em; text-transform:none; color:var(--muted); }
.review .who .g{ width:13px; height:13px; flex-shrink:0; }
.rating-line{ display:flex; align-items:center; justify-content:center; gap:.45rem; margin-top:1rem; font-size:.95rem; color:var(--muted); }
.rating-line .s{ color:var(--gold); letter-spacing:.1em; }
.rating-line b{ color:var(--ink); font-weight:700; }
.rating-line a{ color:var(--gold-deep); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.rev-more{ margin-top:2rem; text-align:center; }

/* FAQ --------------------------------------------------------------------- */
.faq-wrap{ max-width:820px; margin:0 auto; }
.faq-head{ text-align:center; margin-bottom:2.4rem; }
.faq-head h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); margin-top:.5rem; }
details.faq{ border:1px solid var(--line); background:var(--white); margin-bottom:.8rem; padding:0 1.4rem; }
details.faq > summary{ cursor:pointer; font-family:var(--display); font-weight:600; color:var(--ink); font-size:1.12rem; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1.25rem 0; }
details.faq > summary::-webkit-details-marker{ display:none; }
details.faq > summary::after{ content:"+"; color:var(--gold-deep); font-family:var(--ui); font-weight:700; font-size:1.5rem; transition:.2s; }
details.faq[open] > summary::after{ transform:rotate(45deg); }
details.faq p{ margin:0 0 1.25rem; color:var(--text); font-size:1rem; max-width:70ch; }

/* Contact ----------------------------------------------------------------- */
.contact{ background:var(--navy); color:#e4ebf2; }
.contact .grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.8rem,5vw,4rem); align-items:start; padding-block:clamp(3.2rem,6vw,4.6rem); }
.contact h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,2.7rem); margin-top:.6rem; }
.contact .intro{ color:#cdd7e1; margin-top:1rem; max-width:42ch; }
.contact .details{ list-style:none; margin-top:1.8rem; display:flex; flex-direction:column; gap:1.1rem; }
.contact .details li{ display:flex; gap:.8rem; align-items:center; font-size:1rem; }
.contact .details .ci{ width:40px; height:40px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; color:var(--gold-2); flex-shrink:0; }
.contact .details .ci svg{ width:19px; height:19px; }
.contact .details b{ color:#fff; font-weight:600; display:block; font-size:.94rem; }
.contact .details span{ color:#9fb0c2; font-size:.86rem; }
form.cf{ background:var(--white); padding:clamp(1.6rem,3vw,2.2rem); }
form.cf .row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.fg{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.fg label{ font-size:.8rem; font-weight:700; color:var(--ink); letter-spacing:.02em; }
.fg input, .fg select, .fg textarea{ font-family:var(--ui); font-size:.98rem; color:var(--ink); padding:.75rem .85rem; border:1px solid var(--line); background:var(--cream); border-radius:0; }
.fg input:focus, .fg select:focus, .fg textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
.fg textarea{ min-height:120px; resize:vertical; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
form.cf .submit{ width:100%; justify-content:center; }
form.cf .fine{ font-size:.78rem; color:var(--muted); margin-top:.8rem; text-align:center; }
#formStatus{ margin-top:.8rem; font-size:.9rem; text-align:center; min-height:1.2em; font-weight:600; }
#formStatus.ok{ color:#2e7d5b; }
#formStatus.err{ color:#b3402f; }

/* Scheduling (Calendly popup — no inline scrollbar) ---------------------- */
.book-inner{ text-align:center; }
.book .head{ max-width:640px; margin:0 auto 1.7rem; }
.book .head h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); margin-top:.5rem; }
.book .head p{ color:var(--muted); margin-top:.6rem; font-size:1.05rem; }
.book-btn{ font-size:1rem; padding:1.05rem 2.1rem; }
.cal-fallback{ text-align:center; margin-top:1.1rem; font-size:.9rem; color:var(--muted); }
.cal-fallback a{ color:var(--gold-deep); font-weight:600; }

/* Page hero + breadcrumb (sub-pages) -------------------------------------- */
.page-hero{ background:var(--navy); color:#e4ebf2; padding:clamp(2.4rem,5vw,3.6rem) 0 clamp(2.4rem,5vw,3.2rem); border-bottom:1px solid var(--line-navy); }
.breadcrumb{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; font-size:.82rem; color:#9fb0c2; margin-bottom:1.2rem; }
.breadcrumb a:hover{ color:var(--gold-2); }
.breadcrumb .sep{ color:var(--line-navy); }
.breadcrumb [aria-current="page"]{ color:var(--gold-2); }
.page-hero h1{ color:#fff; font-size:clamp(2rem,4.2vw,3rem); }
.page-hero .lead{ color:#cdd7e1; font-size:1.12rem; margin-top:1rem; max-width:58ch; }
.page-hero .geo-note{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.3rem; font-size:.82rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-2); border:1px solid var(--line-navy); padding:.5rem .9rem; }
.page-hero .geo-note svg{ width:16px; height:16px; }

/* Prose / article content ------------------------------------------------- */
.prose{ max-width:760px; }
.prose h2{ font-size:clamp(1.6rem,3vw,2.1rem); margin:2.2rem 0 .8rem; }
.prose h3{ font-size:1.28rem; margin:1.6rem 0 .6rem; }
.prose p{ margin-bottom:1.1rem; }
.prose ul, .prose ol{ margin:0 0 1.2rem 1.2rem; }
.prose li{ margin-bottom:.5rem; }
.prose strong{ color:var(--ink); }
.prose a{ color:var(--gold-deep); font-weight:600; border-bottom:1px solid var(--line); }
.prose a:hover{ border-color:var(--gold-deep); }
.info-callout{ background:var(--cream-2); border-left:3px solid var(--gold); padding:1.2rem 1.4rem; margin:1.6rem 0; }
.info-callout h4{ font-size:1.05rem; margin-bottom:.5rem; }
.info-callout.related-reading ul{ list-style:none; margin:0; }
.info-callout.related-reading li{ padding-left:1.1rem; position:relative; }
.info-callout.related-reading li::before{ content:"→"; position:absolute; left:0; color:var(--gold-deep); }

/* Layout with sidebar (service pages) */
.content-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(1.6rem,4vw,3rem); align-items:start; }
.sidebar{ position:sticky; top:88px; display:flex; flex-direction:column; gap:1.2rem; }
.side-card{ background:var(--white); border:1px solid var(--line); padding:1.5rem; }
.side-card.navyc{ background:var(--navy); color:#e4ebf2; }
.side-card h3{ font-size:1.2rem; margin-bottom:.6rem; }
.side-card.navyc h3{ color:#fff; }
.side-card p{ font-size:.92rem; color:var(--muted); margin-bottom:1rem; }
.side-card.navyc p{ color:#c3cedb; }
.side-card .btn{ width:100%; justify-content:center; }
.side-list{ list-style:none; display:flex; flex-direction:column; }
.side-list a{ display:block; padding:.6rem 0; border-bottom:1px solid var(--line); font-weight:600; font-size:.92rem; color:var(--ink); }
.side-list a:last-child{ border-bottom:0; }
.side-list a:hover{ color:var(--gold-deep); }

/* Blog index cards -------------------------------------------------------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.blog-card{ background:var(--white); border:1px solid var(--line); transition:var(--transition); }
.blog-card:hover{ border-color:var(--gold); transform:translateY(-4px); box-shadow:0 18px 40px -22px rgba(22,33,44,.35); }
.blog-card-link{ display:flex; flex-direction:column; gap:.55rem; padding:1.7rem 1.6rem; height:100%; }
.blog-card-cat{ font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); }
.blog-card-title{ font-size:1.24rem; font-weight:600; line-height:1.26; }
.blog-card-excerpt{ font-size:.94rem; color:var(--muted); flex:1; }
.blog-card-meta{ font-size:.8rem; color:var(--muted); }
.blog-card .learn-more{ font-size:.84rem; font-weight:700; color:var(--gold-deep); }
.blog-empty{ text-align:center; padding:3rem 1rem; }
.blog-empty h2{ font-size:1.6rem; } .blog-empty p{ color:var(--muted); margin-top:.6rem; }
.blog-empty a{ color:var(--gold-deep); font-weight:600; border-bottom:1px solid var(--line); }

/* Blog post --------------------------------------------------------------- */
.post-cat{ margin-bottom:.5rem; }
.post-cat a{ font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-2); }
.post-cat a:hover{ color:#fff; }
.post-byline{ color:#9fb0c2; font-size:.9rem; margin-top:1rem; }
.post-byline strong{ color:#fff; }
.legal-disclaimer{ margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--line); font-size:.82rem; color:var(--muted); font-style:italic; }
.legal-disclaimer a{ color:var(--gold-deep); font-weight:600; }

/* CTA strip --------------------------------------------------------------- */
.cta-strip{ background:var(--navy-3); color:#e4ebf2; text-align:center; }
.cta-strip .wrap{ padding-block:clamp(3rem,6vw,4.4rem); }
.cta-strip h2{ color:#fff; font-size:clamp(1.8rem,3.6vw,2.6rem); }
.cta-strip p{ color:#c3cedb; margin:1rem auto 0; max-width:48ch; }
.cta-strip .cta-row{ margin-top:1.8rem; display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

/* Footer ------------------------------------------------------------------ */
footer.site-footer{ background:var(--navy-3); color:#aab8c6; border-top:2px solid var(--gold); padding:3rem 0 1.8rem; }
.foot-top{ display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:2rem; align-items:start; }
.foot-top .name{ font-family:var(--display); font-weight:700; font-size:1.45rem; color:var(--gold); letter-spacing:.04em; text-transform:uppercase; }
.foot-top .areas{ font-size:.86rem; color:#8ea0b4; margin-top:.7rem; }
.foot-col h4{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2); margin-bottom:1rem; }
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:.6rem; font-size:.92rem; }
.foot-col a:hover{ color:var(--gold-2); }
.foot-col .r{ display:flex; gap:.55rem; align-items:center; }
.foot-col .r svg{ width:15px; height:15px; color:var(--gold); flex-shrink:0; }
.foot-bottom{ margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--line-navy); font-size:.82rem; color:#7f92a6; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.disclaimer{ font-size:.78rem; color:#6a7d91; margin-top:.9rem; max-width:80ch; line-height:1.6; }

/* Floating quick-contact + scroll-to-top ---------------------------------- */
.floating-contact{ position:fixed; right:1rem; bottom:1rem; display:flex; flex-direction:column; gap:.6rem; z-index:900; }
.fc-btn{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; box-shadow:0 8px 24px -8px rgba(0,0,0,.4); transition:var(--transition); }
.fc-btn svg{ width:22px; height:22px; }
.fc-primary{ background:var(--gold); color:var(--navy); }
.fc-primary:hover{ background:var(--gold-2); }
.fc-secondary{ background:var(--navy); color:var(--gold-2); border:1px solid var(--gold); }
.fc-secondary:hover{ background:var(--navy-2); }
/* Sits clearly ABOVE the floating call/email pair so the two never overlap. */
.scroll-top{ position:fixed; right:1rem; bottom:9rem; width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--gold-2); border:1px solid var(--gold); display:grid; place-items:center; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:var(--transition); z-index:900; }
.scroll-top svg{ width:20px; height:20px; }
.scroll-top.visible{ opacity:1; visibility:visible; transform:none; }

/* Accessibility widget ---------------------------------------------------- */
.accessibility-widget{ position:fixed; left:1rem; bottom:1rem; z-index:950; }
.acc-btn{ width:48px; height:48px; border-radius:50%; background:var(--navy); color:var(--gold-2); border:1px solid var(--gold); display:grid; place-items:center; cursor:pointer; box-shadow:0 8px 24px -8px rgba(0,0,0,.4); }
.acc-btn svg{ width:24px; height:24px; }
.acc-menu{ position:absolute; left:0; bottom:60px; width:240px; background:var(--white); border:1px solid var(--line); box-shadow:0 20px 48px -18px rgba(0,0,0,.3); padding:1rem; display:none; }
.acc-menu.active{ display:block; }
.acc-menu h4{ font-size:1rem; margin-bottom:.7rem; }
.acc-option{ display:flex; justify-content:space-between; align-items:center; padding:.55rem .2rem; cursor:pointer; border-bottom:1px solid var(--line); font-size:.9rem; }
.acc-option:hover{ color:var(--gold-deep); }
.acc-menu button#accReset{ margin-top:.8rem; width:100%; padding:.6rem; background:var(--navy); color:#fff; border:0; cursor:pointer; font-family:var(--ui); font-weight:600; }

/* Accessibility states (toggled on <body> by shared.js) */
body.high-contrast{ --cream:#fff; --cream-2:#fff; --text:#000; --ink:#000; --muted:#222; --line:#000; --navy:#000; --navy-2:#000; --navy-3:#000; --gold:#a8700a; --gold-2:#c8890f; --gold-deep:#8a5c00; }
body.high-contrast .hero, body.high-contrast .fee, body.high-contrast .contact, body.high-contrast .page-hero,
body.high-contrast .cta-strip, body.high-contrast footer.site-footer, body.high-contrast nav.site-nav{ color:#fff; }
body.large-text{ font-size:1.16rem; }
body.large-text h1{ font-size:clamp(2.7rem,5.4vw,3.9rem); }
body.highlight-links a{ background:#fff3cd; text-decoration:underline; color:#5a4300; }

/* Responsive -------------------------------------------------------------- */
@media (max-width:940px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-emblem{ border-left:0; border-top:1px solid var(--line-navy); }
  .hero-copy{ margin:0; max-width:none; }
  .proof .wrap{ justify-content:flex-start; }
  .cards{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr; }
  .fee .wrap{ grid-template-columns:1fr; }
  .attorney .grid,
  .attorney-teaser .grid{ grid-template-columns:1fr; }
  .creds-panel{ width:100%; }
  .portrait{ max-width:360px; }
  .reviews{ grid-template-columns:1fr; }
  .contact .grid{ grid-template-columns:1fr; }
  .content-grid{ grid-template-columns:1fr; }
  .sidebar{ position:static; }
  .blog-grid{ grid-template-columns:1fr 1fr; }
  .foot-top{ grid-template-columns:1fr 1fr; }

  /* --- Mobile nav drawer (bug-proof: closed by default, off-canvas) --- */
  .hamburger{ display:inline-flex; }
  .nav-links{
    position:fixed; top:0; right:0; z-index:1002;
    flex-direction:column; align-items:flex-start; gap:1.4rem;
    width:min(84vw,320px); height:100dvh; padding:1.1rem 1.7rem 2rem;
    background:var(--navy-2); border-left:2px solid var(--gold);
    box-shadow:-10px 0 40px rgba(0,0,0,.5);
    transform:translateX(100%); transition:transform .3s ease; overflow-y:auto;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-close-li{ display:block; position:sticky; top:0; align-self:flex-end; margin:0 -.3rem .3rem 0; z-index:3; }
  .nav-close{ width:44px; height:44px; display:grid; place-items:center; background:var(--navy-2); border:1px solid var(--line-navy); color:var(--gold-2); cursor:pointer; transition:var(--transition); }
  .nav-close svg{ width:20px; height:20px; }
  .nav-close:hover, .nav-close:focus-visible{ border-color:var(--gold); color:#fff; }
  .nav-backdrop{ display:block; position:fixed; inset:0; z-index:999; background:rgba(10,24,38,.6); opacity:0; visibility:hidden; transition:opacity .3s ease; }
  .nav-backdrop.active{ opacity:1; visibility:visible; }
  /* Collapsible accordion in the drawer: closed by default, expands on .open.
     max-height is a generous over-estimate of the list so nothing clips. */
  .dropdown-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0;
    background:transparent; min-width:0; display:block; overflow:hidden;
    max-height:0; padding:0 0 0 .6rem; transition:max-height .28s ease, padding .28s ease; }
  .has-dropdown.open .dropdown-menu{ max-height:600px; padding:.4rem 0 .2rem .6rem; }
  .has-dropdown.open .dropdown-chevron{ transform:rotate(180deg); }
}
@media (max-width:600px){
  .cards{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr; }
  form.cf .row{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* Calendly inline embed (contact page) — frame it like the site's other cards
   and give it more vertical room on phones, where the picker stacks. */
.calendly-inline-widget{ position:relative; width:100%; max-width:1040px; margin:0 auto; border:1px solid var(--line); background:var(--cream); }
.calendly-inline-widget iframe{ position:relative; z-index:1; }
@media (max-width:760px){ .calendly-inline-widget{ height:1040px!important; } }

/* Loading skeleton -------------------------------------------------------
   Calendly's app takes ~3.5s to paint its first available slot, and their
   iframe is transparent until it does — so this sits *behind* the iframe
   (z-index 0) and needs no JS to remove it: their opaque background covers
   it the moment it renders. Shapes mirror their real layout (profile rail +
   date picker) so the wait reads as loading rather than as a broken box. */
.cal-skeleton{ position:absolute; inset:0; z-index:0; display:flex; overflow:hidden;
  --sk:rgba(22,33,44,.085); --sk-2:rgba(22,33,44,.14); }
.cal-skeleton .cs-bar{ display:block; height:11px; background:var(--sk); border-radius:3px; }
.cal-skeleton .cs-side{ flex:0 0 33%; display:flex; flex-direction:column; align-items:flex-start;
  gap:14px; padding:36px 30px; border-right:1px solid var(--line); }
.cal-skeleton .cs-avatar{ width:54px; height:54px; border-radius:50%; background:var(--sk); margin-bottom:6px; }
.cal-skeleton .cs-title{ width:72%; height:20px; background:var(--sk-2); }
.cal-skeleton .cs-rule{ width:100%; height:1px; background:var(--line); margin:8px 0; }
.cal-skeleton .cs-main{ flex:1; display:flex; flex-direction:column; padding:36px 34px; }
.cal-skeleton .cs-h{ width:190px; height:17px; background:var(--sk-2); margin-bottom:30px; }
.cal-skeleton .cs-monthrow{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.cal-skeleton .cs-navs{ display:flex; gap:12px; }
.cal-skeleton .cs-navs i{ width:26px; height:26px; border-radius:50%; background:var(--sk); }
.cal-skeleton .cs-week,
.cal-skeleton .cs-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; max-width:400px; }
.cal-skeleton .cs-week{ margin-bottom:12px; }
.cal-skeleton .cs-week i{ height:9px; border-radius:3px; background:var(--sk); }
.cal-skeleton .cs-grid i{ aspect-ratio:1; border-radius:50%; background:var(--sk); }
.cal-skeleton .cs-tz{ width:150px; margin-top:26px; }
/* Calendly injects its own dot spinner into the container; ours replaces it. */
.calendly-inline-widget .calendly-spinner{ display:none; }

/* Removed by shared.js on Calendly's ready event — see the note there. */
.cal-skeleton.is-done{ opacity:0; animation:none; transition:opacity .35s ease; pointer-events:none; }

/* Stalled: Calendly never reported ready. Swap the shapes for a real booking
   route and lift above the iframe (z-index 1) so the link is clickable. */
.cs-fallback{ display:none; }
.cal-skeleton.is-stalled{ z-index:2; animation:none; background:var(--cream); }
.cal-skeleton.is-stalled .cs-side,
.cal-skeleton.is-stalled .cs-main{ display:none; }
.cal-skeleton.is-stalled .cs-fallback{ display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1.1rem; text-align:center; width:100%; padding:2rem; }
.cal-skeleton.is-stalled .cs-fallback p{ color:var(--muted); font-size:.98rem; }
.cal-skeleton.is-stalled .cs-fallback .cs-alt{ font-size:.88rem; }
.cal-skeleton.is-stalled .cs-fallback a[href^="tel:"]{ color:var(--gold-deep); font-weight:600; text-decoration:underline; }

/* One shared pulse so the whole skeleton breathes in step. */
.cal-skeleton{ animation:cal-pulse 1.7s ease-in-out infinite; }
@keyframes cal-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.5 } }
@media (prefers-reduced-motion:reduce){ .cal-skeleton{ animation:none; opacity:.85; } }

/* Phones: Calendly stacks its picker, so the skeleton stacks too. */
@media (max-width:760px){
  .cal-skeleton{ flex-direction:column; }
  .cal-skeleton .cs-side{ flex:0 0 auto; border-right:0; border-bottom:1px solid var(--line); padding:26px 24px; gap:12px; }
  .cal-skeleton .cs-main{ padding:26px 24px; }
  .cal-skeleton .cs-week,
  .cal-skeleton .cs-grid{ max-width:none; }
}

/* The nav is sticky, so in-page anchor jumps must clear its height. */
[id]{ scroll-margin-top:92px; }
@media (max-width:940px){ [id]{ scroll-margin-top:80px; } }