/* ---------------------------------------------------------------
   PALETTE  --  navy and antique gold
   The whole site is driven by the tokens below. Change a color here
   and every page follows; nothing else in this file needs to change.

   Three alternates (forest, burgundy, patriot) were built and tested
   during design and are kept in assets/css/palettes-alternate.css,
   which is NOT loaded. Navy and gold was chosen in September 2026 and
   the switcher was removed, so shipping the alternates on every page
   load was dead weight. To try one again: link that file after this
   one and put data-palette="forest" on <html>.
   --------------------------------------------------------------- */
:root {
  /* --- Navy & antique gold (default) --- */
  --brand:          #16304F;
  --brand-deep:     #0D1F35;
  --brand-soft:     #2B4A72;
  --brand-tint:     #EBEFF5;
  --brand-darkest:  #081525;

  --accent:         #C2A14B;
  --accent-deep:    #806420;
  --accent-tint:    #F7F1E0;
  --accent-hover:   #D2B463;
  --accent-line:    #E3D5A8;
  --on-accent:      #241B06;
  /* Accent as TEXT on a dark brand ground — must stay legible there. */
  --accent-light:   #D8BC6B;

  --on-brand:       #EAF0F7;
  --on-brand-dim:   #CBD9E8;
  --on-brand-muted: #A9BCD1;
  --hero-3:         #23456E;

  --surface:        #E6E4DD;
  --surface-alt:    #F7F6F2;
  --white:          #FFFFFF;
  --ink:            #1E2430;
  --charcoal:       #1A1F29;
  --muted:          #55606E;
  --line:           #D3D6DC;

  /* --- Aliases kept so page content written against the first build
         keeps working. These follow whichever palette is active. --- */
  --burgundy:       var(--brand);
  --burgundy-deep:  var(--brand-deep);
  --burgundy-soft:  var(--brand-soft);
  --burgundy-tint:  var(--brand-tint);
  --gold:           var(--accent);
  --gold-deep:      var(--accent-deep);
  --gold-tint:      var(--accent-tint);
  --cream:          var(--surface);
  --cream-deep:     var(--line);
  --warm-white:     var(--surface-alt);

  /* Type */
  --serif: "Libre Baskerville", "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Metrics */
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(20,25,35,.08), 0 2px 8px rgba(20,25,35,.05);
  --shadow-md: 0 2px 6px rgba(20,25,35,.09), 0 10px 28px rgba(20,25,35,.09);
  --shadow-lg: 0 6px 16px rgba(20,25,35,.10), 0 22px 48px rgba(20,25,35,.13);
  --t: 180ms cubic-bezier(.4,0,.2,1);
}




/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink);
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--burgundy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--burgundy-soft); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); color: var(--burgundy); line-height: 1.22; margin: 0 0 .6em; font-weight: 700; }
h1 { font-size: clamp(2rem, 1.35rem + 2.2vw, 3.05rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2.05rem); margin-top: 2.2em; }
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.35rem); margin-top: 1.9em; color: var(--burgundy-deep); }
h4 { font-size: 1.02rem; font-family: var(--sans); font-weight: 700; letter-spacing: .01em; margin-top: 1.6em; }
p { margin: 0 0 1.15em; }
strong { font-weight: 650; color: var(--charcoal); }
/* Inherit color on dark grounds so bold text never goes dark-on-dark */
.utility strong, .hero strong, .sec-deep strong, .site-footer strong,
.page-hero strong, .side-cta strong, .office-head strong, thead th strong,
.brand strong, .mobile-bar strong { color: inherit; }
.eyebrow {
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
  margin: 0 0 .9rem;
}
.lede { font-size: 1.16rem; line-height: 1.6; color: var(--muted); }
.small { font-size: .87rem; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
section { padding: clamp(2.75rem, 5vw, 4.75rem) 0; }
.sec-cream { background: var(--cream); }
.sec-white { background: var(--white); }
.sec-warm  { background: var(--warm-white); }
.sec-deep  { background: var(--brand); color: var(--on-brand); }
.sec-deep h1, .sec-deep h2, .sec-deep h3 { color: var(--white); }
.sec-deep a:not(.btn) { color: var(--accent-light); }
/* --accent-deep is tuned for light grounds; on a dark section it is
   dark-on-dark. Any eyebrow label inside one uses the light accent. */
.sec-deep .eyebrow { color: var(--accent-light); }
.grid { display: grid; gap: 1.5rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); align-items: start; }
/* minmax(0,1fr), not 1fr: a plain fr track is floored at min-content, so a wide
   table would push the whole column past the viewport instead of scrolling
   inside its own .table-wrap. */
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-size: .94rem; font-weight: 650; letter-spacing: .01em;
  padding: .82rem 1.5rem; min-height: 46px; border-radius: var(--radius);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: var(--shadow-sm); }
.btn-gold:hover { background: var(--accent-hover); color: var(--on-accent); box-shadow: var(--shadow-md); }
.btn-burgundy { background: var(--burgundy); color: var(--white); border-color: var(--burgundy); }
.btn-burgundy:hover { background: var(--burgundy-soft); color: var(--white); }
.btn-outline { background: transparent; color: var(--burgundy); border-color: var(--burgundy); }
.btn-outline:hover { background: var(--burgundy); color: var(--white); }
.btn-ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn-ghost-light:hover { background: var(--white); color: var(--burgundy); }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin: 1.6rem 0 0; }

/* ---------- Utility bar ---------- */
.utility {
  background: var(--brand-deep); color: var(--on-brand-dim);
  font-size: .8rem; letter-spacing: .01em;
}
.utility .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.6rem; padding: .5rem 0; }
.utility a:not(.btn) { color: var(--on-brand); text-decoration: none; }
.utility a:hover { color: var(--accent-light); text-decoration: underline; }
.utility .u-sep { color: rgba(255,255,255,.28); }
.utility .u-right { margin-left: auto; display: flex; gap: 1.25rem; align-items: center; }
@media (max-width: 720px) { .utility .u-right { margin-left: 0; } }

/* ---------- Header / nav ---------- */
.site-header { background: var(--white); position: sticky; top: 0; z-index: 60;
  box-shadow: 0 1px 0 var(--line), 0 2px 14px rgba(40,25,20,.06); }
.header-inner { display: flex; align-items: center; gap: 1.5rem; padding: .9rem 0; }
.brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; flex: 0 1 auto; min-width: 0; }
/* The firm's mark. It is a four-square checkerboard whose light cells are
   white, so it always sits on a white tile with a hairline edge — otherwise
   half the mark disappears into whatever is behind it. */
.brand-mark {
  width: 54px; height: 54px; flex: 0 0 54px; border-radius: 3px;
  background: #fff; border: 1px solid var(--line);
  object-fit: contain; display: block;
}
.brand-text { line-height: 1.2; min-width: 0; }
.brand-name { font-family: var(--serif); font-size: 1.06rem; font-weight: 700; color: var(--burgundy); display: block; }
.brand-sub { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); font-weight: 650; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.header-phone { text-decoration: none; text-align: right; display: block; line-height: 1.2; }
.header-phone .hp-label { display: block; font-size: .68rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
.header-phone .hp-num { display: block; font-family: var(--serif); font-size: 1.22rem;
  font-weight: 700; color: var(--burgundy); }
.header-phone:hover .hp-num { color: var(--burgundy-soft); }

/* --- second row: the navigation bar --- */
.navbar { background: var(--burgundy-deep); border-top: 3px solid var(--gold);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.10); }
.nav > ul { list-style: none; display: flex; align-items: stretch; gap: 0; margin: 0; padding: 0; }
.nav > ul > li { position: relative; }
.nav > ul > li > a {
  display: flex; align-items: center; gap: .35rem; height: 100%;
  padding: .82rem .95rem; font-size: .855rem; font-weight: 600;
  color: var(--on-brand); text-decoration: none; white-space: nowrap;
  transition: color var(--t), background var(--t), box-shadow var(--t);
}
.nav > ul > li > a:hover, .nav > ul > li.is-open > a { color: var(--accent-light); background: rgba(0,0,0,.22); }
.nav > ul > li.current > a { color: var(--white); background: rgba(0,0,0,.28);
  box-shadow: inset 0 -3px 0 var(--gold); }
.nav .caret { width: 7px; height: 7px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6;
  transition: transform var(--t); }
/* Point the chevron up while its submenu is open. On a phone the menu is the
   only thing on screen, so this is the only cue that the tap did anything. */
.nav > ul > li.is-open > a .caret { transform: rotate(-135deg) translateY(-2px); opacity: 1; }
.submenu {
  position: absolute; top: 100%; left: 0; min-width: 310px;
  background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-lg);
  list-style: none; margin: 0; padding: .5rem; display: none; z-index: 70;
}
.nav > ul > li.is-open .submenu { display: block; }
.nav > ul > li:last-of-type .submenu { left: auto; right: 0; }
.submenu a { display: block; padding: .5rem .7rem; font-size: .86rem; color: var(--charcoal);
  text-decoration: none; border-radius: var(--radius); line-height: 1.4; }
.submenu a:hover { background: var(--burgundy-tint); color: var(--burgundy); }
.submenu .sm-head { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 700; padding: .55rem .7rem .3rem; }
.nav-cta { display: none; }

.nav-toggle {
  margin-left: auto; display: none; align-items: center; gap: .5rem;
  background: var(--brand); color: #fff; border: 0; border-radius: var(--radius);
  padding: .65rem 1rem; font: 650 .88rem var(--sans); cursor: pointer; min-height: 46px;
}

@media (max-width: 1240px) {
  .nav > ul > li > a { padding: .8rem .7rem; font-size: .82rem; }
  .brand-name { font-size: .98rem; }
}
@media (max-width: 1060px) {
  .header-actions { gap: .9rem; }
  .header-actions .btn { display: none; }
  .brand-sub { display: none; }
  .nav > ul > li > a { padding: .78rem .55rem; font-size: .79rem; }
}
@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }
  .header-actions { display: none; }
  .navbar { border-top: 0; background: transparent; }
  .navbar > .wrap { width: 100%; }
  .nav {
    background: var(--burgundy); border-top: 3px solid var(--gold);
    max-height: calc(100vh - 90px); overflow-y: auto; display: none; padding: .4rem 0 1.4rem;
  }
  .site-header.nav-open .nav { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
  .nav > ul > li > a { padding: .9rem .2rem; border-bottom: 1px solid rgba(255,255,255,.16);
    font-size: .98rem; justify-content: space-between; }
  .submenu { position: static; display: none; box-shadow: none; border: 0;
    border-left: 3px solid var(--gold); border-radius: 0; margin: .2rem 0 .7rem .2rem;
    padding: .2rem 0 .2rem .7rem; min-width: 0; background: rgba(255,255,255,.06); }
  .submenu a { color: var(--on-brand-dim); }
  .submenu a:hover { background: rgba(255,255,255,.12); color: var(--accent-light); }
  .submenu .sm-head { color: var(--accent-light); }
  .nav-cta { display: flex; margin: 1.1rem .2rem 0; }
  .nav-cta .btn { width: 100%; }
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1200px 460px at 78% -12%, rgba(212,175,55,.20), transparent 62%),
    linear-gradient(158deg, var(--brand-deep) 0%, var(--brand) 52%, var(--hero-3) 100%);
  color: var(--on-brand); position: relative; overflow: hidden;
  padding: clamp(3rem, 6.5vw, 5.75rem) 0 clamp(2.75rem, 5vw, 4.5rem);
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 4px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 46%, transparent 100%);
}
.hero h1 { color: var(--white); max-width: 20ch; }
.hero .lede { color: var(--on-brand-dim); font-size: clamp(1.03rem, .95rem + .4vw, 1.22rem); max-width: 56ch; }
.hero .eyebrow { color: var(--accent-light); }
.hero-grid { display: grid; gap: clamp(2rem, 4vw, 3.25rem); grid-template-columns: minmax(0,1.25fr) minmax(0,.85fr); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-card {
  background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-lg); padding: 1.6rem 1.5rem; backdrop-filter: blur(3px);
}
.hero-card h2 { font-size: 1.16rem; margin: 0 0 .9rem; color: var(--accent-light); }
.hero-card ul { margin: 0; padding-left: 1.15rem; }
.hero-card li { margin-bottom: .55rem; font-size: .95rem; color: var(--on-brand-dim); }

/* ---------- Hero rotator ----------
   All slides sit in the same grid cell, so the section is as tall as the
   tallest slide and nothing jumps as it advances. Inactive slides keep their
   space but are hidden from both the screen and the tab order. */
.hero-rotator { padding-block: 0; }
.hero-stage { display: grid; }
.hero-slide {
  grid-area: 1 / 1;
  padding: clamp(3rem, 6.5vw, 5.5rem) 0 clamp(3.5rem, 5vw, 4.75rem);
  opacity: 0; visibility: hidden;
  transition: opacity 620ms ease;
  /* Slides are all as tall as the tallest one, so a short slide's content is
     centered in that box rather than stranded at the top. */
  display: grid; align-content: center;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }

/* Display line that carries the firm name (and the other slide titles). It is
   not an h1 — the page already has one on the first slide. */
.hero-firm {
  font-family: var(--serif); font-weight: 400; color: var(--white);
  font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.35rem);
  line-height: 1.16; letter-spacing: -.01em; margin: 0 0 1rem;
}
.hero-firm b { font-weight: 700; color: var(--accent-light); display: block; }
.hero-firm span { font-size: .8em; }
/* One slide carries the page's h1; the global h1 rules must not narrow it. */
h1.hero-firm { max-width: 34ch; }
.hero .hero-firm { max-width: 34ch; }

.hero-figure { margin: 0; }
/* A landscape photograph sits shorter than a portrait one; cap it so it stays
   centered in the column instead of stretching to fill it. */
.hero-figure-wide { align-self: center; }
.hero-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}
/* Slots waiting on photography from the firm. */
.hero-figure-empty .hero-ph {
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  border: 2px dashed rgba(255,255,255,.34); background: rgba(255,255,255,.055);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.1rem; padding: 1.5rem; text-align: center;
}
.hero-figure-empty .tbd { font-size: .84rem; max-width: 24ch; }

/* Controls: one row centered at the foot of the stage, so nothing ever
   overlaps the slide copy at any width. */
.hero-controls {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 1.05rem; z-index: 3;
  display: flex; align-items: center; gap: .55rem;
}
.hero-nav {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; flex: 0 0 38px;
  background: rgba(8,21,37,.5); border: 1.5px solid rgba(255,255,255,.42);
  display: grid; place-items: center;
  transition: background var(--t), border-color var(--t);
}
.hero-nav:hover { background: rgba(8,21,37,.9); border-color: var(--gold); }
.hero-nav span { width: 9px; height: 9px; display: block;
  border-top: 2px solid #fff; border-right: 2px solid #fff; }
.hero-prev span { transform: rotate(-135deg) translate(-1px, -1px); }
.hero-next span { transform: rotate(45deg) translate(-1px, 1px); }

.hero-dots { display: flex; align-items: center; gap: .1rem; margin: 0 .2rem; }
/* The dot is 11px because that is the right size to look at. The button around
   it is 24px because that is the smallest thing a thumb can reliably hit. */
.hero-dot {
  width: 24px; height: 24px; padding: 0; cursor: pointer;
  background: none; border: 0; border-radius: 50%; position: relative;
}
.hero-dot::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: rgba(255,255,255,.32); border: 1.5px solid rgba(255,255,255,.55);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.hero-dot:hover::before { background: rgba(255,255,255,.7); }
.hero-dot[aria-selected="true"]::before {
  background: var(--gold); border-color: var(--gold); transform: scale(1.2);
}

.hero-pause {
  width: 30px; height: 30px; padding: 0; cursor: pointer; flex: 0 0 30px;
  border-radius: 50%; background: transparent; border: 1.5px solid rgba(255,255,255,.45);
  display: grid; place-items: center; margin-left: .2rem;
}
.hero-pause:hover { border-color: var(--gold); }
.hero-pause span { width: 8px; height: 9px; display: block;
  border-left: 2.5px solid #fff; border-right: 2.5px solid #fff; }
.hero-pause[aria-pressed="true"] span {
  width: 0; height: 0; border: 0;
  border-left: 9px solid #fff; border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent; margin-left: 2px;
}

@media (max-width: 940px) {
  .hero-grid-photo .hero-figure { order: -1; max-width: 330px; }
  .hero-slide { padding-bottom: 4rem; }
  /* On a phone the slides differ enough in height that holding them all to the
     tallest leaves a screenful of empty navy. Below this width each slide sizes
     itself instead, and the script stops the rotation once the hero scrolls out
     of view so the page never shifts under someone who has moved on. */
  .hero-slide { display: none; }
  .hero-slide.is-active { display: grid; opacity: 1; visibility: visible; }
}
@media (max-width: 620px) {
  .hero-grid-photo .hero-figure { max-width: 250px; }
  .hero-nav { width: 34px; height: 34px; flex-basis: 34px; }
}

/* Page hero (interior) */
.page-hero {
  background: linear-gradient(150deg, var(--brand-deep), var(--brand) 68%, var(--hero-3));
  color: var(--on-brand); padding: clamp(2.25rem, 4vw, 3.5rem) 0 clamp(2rem, 3.5vw, 3rem);
  border-bottom: 4px solid var(--gold);
}
.page-hero h1 { color: var(--white); margin-bottom: .45em; }
.page-hero .lede { color: var(--on-brand-dim); max-width: 62ch; }
.page-hero .eyebrow { color: var(--accent-light); }

/* ---------- Breadcrumb ---------- */
.crumbs { font-size: .8rem; color: rgba(255,255,255,.72); margin-bottom: 1rem; }
.crumbs a { color: rgba(255,255,255,.9); text-decoration: none; }
.crumbs a:hover { color: var(--accent-light); text-decoration: underline; }
.crumbs span { opacity: .5; margin: 0 .4rem; }

/* ---------- Cards ---------- */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.5rem 1.45rem; box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  display: flex; flex-direction: column;
}
a.card { text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.card h3 { margin-top: 0; font-size: 1.14rem; }
.card p { color: var(--muted); font-size: .94rem; margin-bottom: .9rem; }
.card .card-link { margin-top: auto; font-weight: 650; font-size: .88rem; color: var(--burgundy); }
.card .card-link::after { content: " →"; color: var(--gold-deep); }
.card-num {
  font-family: var(--serif); font-size: .8rem; font-weight: 700; color: var(--gold-deep);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: .5rem;
}
.card-cream { background: var(--warm-white); }
.card-accent { border-top: 4px solid var(--gold); }

/* Pathway cards */
.path-card {
  background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 1.25rem 1.3rem; text-decoration: none; color: inherit;
  display: block; box-shadow: var(--shadow-sm); transition: all var(--t);
}
.path-card:hover { border-left-color: var(--burgundy); transform: translateX(3px); box-shadow: var(--shadow-md); }
.path-card strong { display: block; font-family: var(--serif); font-size: 1.02rem; color: var(--burgundy); margin-bottom: .3rem; }
.path-card span { font-size: .89rem; color: var(--muted); }

/* ---------- Content blocks ---------- */
.prose { max-width: 74ch; min-width: 0; }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.3rem; }
.prose li { margin-bottom: .55em; }
.prose li::marker { color: var(--gold-deep); }

.keybox {
  background: var(--accent-tint); border: 1px solid var(--accent-line); border-left: 5px solid var(--accent);
  border-radius: var(--radius); padding: 1.35rem 1.5rem; margin: 1.75rem 0;
}
.keybox h3, .keybox h2 { margin: 0 0 .7rem; font-size: 1.05rem; font-family: var(--sans); font-weight: 700; color: var(--burgundy-deep); letter-spacing: .01em; }
.keybox ul { margin: 0; padding-left: 1.2rem; }
.keybox li { margin-bottom: .45em; font-size: .95rem; }
.keybox p:last-child { margin-bottom: 0; }

.callout {
  background: var(--burgundy-tint); border-left: 5px solid var(--burgundy);
  border-radius: var(--radius); padding: 1.25rem 1.4rem; margin: 1.75rem 0; font-size: .96rem;
}
.callout strong { color: var(--burgundy); }
.callout p:last-child { margin-bottom: 0; }

.checklist { list-style: none; padding: 0; margin: 1.3rem 0; }
.checklist li {
  position: relative; padding-left: 2rem; margin-bottom: .8rem; font-size: .96rem;
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 13px; height: 8px;
  border-left: 2.5px solid var(--gold-deep); border-bottom: 2.5px solid var(--gold-deep);
  transform: rotate(-45deg);
}

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 1.25rem; margin: 2rem 0; }
.stat { border-top: 3px solid var(--gold); padding-top: .9rem; }
.stat b { display: block; font-family: var(--serif); font-size: 1.5rem; color: var(--burgundy); line-height: 1.1; }
.stat span { font-size: .87rem; color: var(--muted); }

/* Tables */
.table-wrap { overflow-x: auto; margin: 1.75rem 0; border: 1px solid var(--line); border-radius: var(--radius-lg); }
table { border-collapse: collapse; width: 100%; background: var(--white); font-size: .93rem; min-width: 520px; }
thead th { background: var(--burgundy); color: var(--white); font-family: var(--sans); font-weight: 650; text-align: left; padding: .8rem .95rem; font-size: .85rem; letter-spacing: .02em; }
td, tbody th { border-top: 1px solid var(--line); padding: .78rem .95rem; text-align: left; vertical-align: top; }
tbody tr:nth-child(even) { background: var(--warm-white); }
tbody th { font-weight: 650; color: var(--burgundy); }

/* FAQ accordion — visible text, details/summary */
.faq { margin: 1.5rem 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); background: var(--white); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2.6rem 1.05rem 1.15rem;
  font-family: var(--serif); font-size: 1.02rem; font-weight: 700; color: var(--burgundy);
  position: relative; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.1rem; top: 1.45rem; width: 10px; height: 10px;
  border-right: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep);
  transform: rotate(45deg); transition: transform var(--t);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { background: var(--burgundy-tint); }
.faq .faq-body { padding: 0 1.15rem 1.25rem; font-size: .96rem; color: var(--ink); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---------- Sidebar ---------- */
.sidebar { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 1.25rem; }
@media (max-width: 1000px) { .sidebar { position: static; } }
.side-box { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--burgundy); border-radius: var(--radius-lg); padding: 1.3rem 1.25rem; box-shadow: var(--shadow-sm); }
.side-box h3 { margin: 0 0 .8rem; font-size: 1.02rem; font-family: var(--sans); font-weight: 700; letter-spacing: .01em; }
.side-box ul { list-style: none; margin: 0; padding: 0; }
.side-box li { border-bottom: 1px solid var(--line); }
.side-box li:last-child { border-bottom: 0; }
.side-box li a { display: block; padding: .52rem 0; font-size: .9rem; text-decoration: none; color: var(--charcoal); }
.side-box li a:hover { color: var(--burgundy); padding-left: .3rem; transition: padding var(--t); }
.side-cta { background: var(--brand); border-color: var(--brand); color: var(--on-brand); border-top-color: var(--accent); }
.side-cta h3 { color: var(--white); }
.side-cta p { font-size: .92rem; color: var(--on-brand-dim); }
.side-cta .btn { width: 100%; }
.side-phone { font-family: var(--serif); font-size: 1.3rem; color: var(--accent-light); text-decoration: none; display: block; margin: .5rem 0 .9rem; }

/* ---------- Blog ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.filter-btn {
  font: 600 .84rem var(--sans); padding: .5rem 1rem; min-height: 40px;
  border: 1.5px solid var(--line); background: var(--white); color: var(--charcoal);
  border-radius: 999px; cursor: pointer; transition: all var(--t);
}
.filter-btn:hover { border-color: var(--gold); }
.filter-btn.active { background: var(--burgundy); border-color: var(--burgundy); color: var(--white); }
.search-wrap { margin: 0 0 1.5rem; max-width: 460px; }
.search-wrap input {
  width: 100%; padding: .78rem 1rem; min-height: 46px; font: 400 .95rem var(--sans);
  border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink);
}
.search-wrap input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }

.post-card { position: relative; }
.post-card .kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .65rem; }
.tag {
  font: 700 .68rem var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: .26rem .55rem; border-radius: 3px; background: var(--cream); color: var(--burgundy);
}
.tag-guide    { background: var(--brand-tint); color: var(--brand); }
.tag-faq      { background: var(--gold-tint); color: var(--gold-deep); }
.tag-checklist{ background: #E2E8DF; color: #33512F; }
.tag-update   { background: #E5E2EE; color: #3D3663; }
.post-meta { font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .35rem .8rem; }
.post-meta .dot { opacity: .4; }
.no-results { display: none; padding: 2rem; text-align: center; color: var(--muted); background: var(--white); border: 1px dashed var(--line); border-radius: var(--radius-lg); }

/* Article */
.article-body { max-width: 72ch; font-size: 1.045rem; }
.article-body h2 { border-bottom: 1px solid var(--line); padding-bottom: .35em; }
.article-body h2::before { content: ""; display: block; width: 46px; height: 3px; background: var(--gold); margin-bottom: .6rem; }
.article-lead { margin: 0 0 2rem; }
.article-lead img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-md); background: var(--surface);
}
.lead-zoom {
  display: block; position: relative; width: 100%; padding: 0; cursor: zoom-in;
  background: none; border: 0; text-align: left;
}
.lead-zoom-hint {
  position: absolute; right: .7rem; bottom: .7rem;
  background: rgba(8,21,37,.82); color: #fff; border-radius: 999px;
  font: 650 .74rem var(--sans); letter-spacing: .02em; padding: .34rem .8rem;
  transition: background var(--t);
}
.lead-zoom:hover .lead-zoom-hint { background: var(--brand); }

.article-lead figcaption {
  margin-top: .7rem; font-size: .84rem; color: var(--muted); line-height: 1.5;
}

/* A required legal notice, not decoration. It sits at the foot of the article
   with a marker in the caption, and it is not allowed to shrink into the small
   print on the way there. */
.fn-ref {
  text-decoration: none; font-weight: 700; color: var(--brand);
  padding: 0 .15rem; scroll-margin-top: 150px;
}
.fn-ref:hover { text-decoration: underline; }
.footnotes {
  margin-top: 1.5rem; padding: 1.1rem 1.3rem;
  background: var(--surface-alt); border: 1px solid var(--line);
  border-left: 4px solid var(--brand); border-radius: var(--radius);
}
.footnotes ol { margin: 0; padding-left: 1.3rem; }
.footnotes li { font-size: .88rem; line-height: 1.6; color: var(--ink); }
.footnotes li::marker { color: var(--brand); font-weight: 700; }
.footnotes strong { color: var(--brand-deep); }
.fn-back { text-decoration: none; margin-left: .3rem; color: var(--brand); }
.fn-back:hover { text-decoration: underline; }

.article-meta-bar {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center;
  padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 0 0 2rem; font-size: .87rem; color: var(--muted);
}
.toc { background: var(--cream); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem; margin: 0 0 2rem; }
/* --gold-deep on the cream panel measures 4.39:1 at this size - just under
   AA. The label takes the deep brand color, which clears it in every
   palette; the gold stays in the rule above and the list markers. */
.toc h2, .toc h3 { margin: 0 0 .7rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-family: var(--sans); color: var(--brand-deep); }
.toc ol { margin: 0; padding-left: 1.2rem; font-size: .93rem; }
.toc li { margin-bottom: .35rem; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ---------- Testimonials ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tmn-grid { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
/* <figure> carries a 40px UA margin; inside a grid cell that eats the column. */
.tmn-card { gap: 0; margin: 0; }
.tmn-card blockquote { margin: 0 0 1.1rem; }
.tmn-card blockquote p { margin: 0; color: var(--ink); font-size: .97rem; line-height: 1.66; }
.tmn-tag { align-self: flex-start; margin-bottom: .9rem; }
.tmn-note {
  font-size: .82rem; color: var(--muted); background: var(--surface-alt);
  border-left: 3px solid var(--accent-line); border-radius: var(--radius);
  padding: .6rem .8rem; margin: 0 0 1.1rem;
}
.tmn-by { display: flex; align-items: center; gap: .8rem; margin-top: auto;
  padding-top: 1rem; border-top: 1px solid var(--line); }
.tmn-avatar {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--line); background: var(--surface);
}
.tmn-initials {
  display: grid; place-items: center; background: var(--brand); color: var(--accent-light);
  font-family: var(--serif); font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  border-color: var(--brand);
}
.tmn-who { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.tmn-who strong { font-family: var(--serif); color: var(--burgundy); font-size: 1rem; }
.tmn-detail { font-size: .8rem; color: var(--muted); }

/* ---------- Video testimonials ---------- */
.vid-section .filters { margin-bottom: 1.25rem; }
.vid-rotator { position: relative; }
.vid-stage { display: grid; }
.vid-slide {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 500ms ease;
  display: grid; gap: clamp(1.5rem, 3.5vw, 2.75rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center;
  padding-bottom: 4rem;
}
.vid-slide.is-active { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .vid-slide { transition: none; } }
@media (max-width: 860px) {
  .vid-slide { grid-template-columns: minmax(0, 1fr); }
  .vid-slide { display: none; }
  .vid-slide.is-active { display: grid; }
}
.vid-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--brand-darkest);
  border: 1px solid rgba(255,255,255,.26); box-shadow: 0 18px 44px rgba(0,0,0,.34);
}
.vid-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Click-to-load YouTube: a poster frame that becomes the player on demand. */
.vid-yt { background-size: cover; background-position: center;
  background-color: var(--brand-darkest); }
.vid-yt::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,21,37,.30), rgba(8,21,37,.66));
  transition: background var(--t);
}
.vid-yt:hover::before { background: linear-gradient(180deg, rgba(8,21,37,.18), rgba(8,21,37,.52)); }
.vid-yt-btn {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
}
.vid-yt-btn .vid-play { transition: opacity var(--t), transform var(--t); }
.vid-yt-btn:hover .vid-play { opacity: 1; transform: scale(1.06); }
.vid-yt[data-yt-loaded]::before { display: none; }
.vid-yt[data-yt-loaded] .vid-yt-btn { display: none; }
.vid-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
/* Shown in place of the player where it cannot run. Nothing navigates on its
   own; the link is there for the viewer to take or leave. */
.vid-notice {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.1rem; padding: clamp(1.1rem, 3vw, 2rem); text-align: center;
  background: rgba(8,21,37,.88);
}
.vid-notice p {
  margin: 0; max-width: 42ch; color: var(--on-brand-dim);
  font-size: clamp(.86rem, .8rem + .2vw, .95rem); line-height: 1.55;
}
.vid-yt[data-yt-notice]::before { display: none; }
.vid-yt[data-yt-notice] .vid-yt-btn { display: none; }

.vid-frame-empty {
  border-style: dashed; border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.055);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
}
.vid-play {
  width: 0; height: 0; border-left: 26px solid var(--accent-light);
  border-top: 16px solid transparent; border-bottom: 16px solid transparent;
  margin-left: 6px; opacity: .85;
}
.vid-slot {
  font: 700 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-brand-muted);
}
.vid-copy blockquote { margin: 0 0 .8rem; }
.vid-copy blockquote p { color: var(--white); font-family: var(--serif);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); line-height: 1.45; margin: 0; }
.vid-title {
  color: var(--white); font-family: var(--serif);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); line-height: 1.45; margin: 0 0 .8rem;
}
.vid-copy .tmn-by { border-top-color: rgba(255,255,255,.2); }
.vid-copy .tmn-by strong { color: var(--accent-light); }
/* --muted is a light-ground color; on the dark video panel it is dark-on-dark. */
.vid-copy .tmn-detail { color: var(--on-brand-muted); }
.vid-controls { bottom: 0; }

/* ---------- Flow map ----------
   A three-stage explainer built from type rather than a picture: it stays
   readable on a phone, the text is selectable and searchable, a screen reader
   can follow it, and it cannot go out of date behind a JPEG. */
.flowmap {
  margin: 2.25rem 0; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--white); overflow: hidden; box-shadow: var(--shadow-sm);
}
.flowmap-head {
  background: var(--brand); color: var(--white); margin: 0;
  font-family: var(--serif); font-weight: 700; line-height: 1.3;
  font-size: clamp(1.02rem, .95rem + .4vw, 1.22rem);
  padding: .95rem 1.25rem; border-bottom: 3px solid var(--gold);
}
.flowmap-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 820px) { .flowmap-grid { grid-template-columns: minmax(0, 1fr); } }
.flowmap-step { padding: 1.3rem 1.25rem; border-left: 1px solid var(--line); }
.flowmap-step:first-child { border-left: 0; }
@media (max-width: 820px) {
  .flowmap-step { border-left: 0; border-top: 1px solid var(--line); }
  .flowmap-step:first-child { border-top: 0; }
}
.flowmap-num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand); border: 1.5px solid var(--gold);
  font: 700 .9rem var(--serif); margin: 0 0 .7rem;
}
.flowmap-step h3 {
  margin: 0 0 .75rem; font-size: 1.02rem; font-family: var(--sans); font-weight: 700;
  letter-spacing: .01em; color: var(--brand-deep);
}
.flowmap-step ul { list-style: none; margin: 0; padding: 0; }
.flowmap-step li {
  position: relative; padding-left: 1.15rem; margin-bottom: .7rem;
  font-size: .92rem; line-height: 1.55;
}
.flowmap-step li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold-deep);
}
.flowmap-step li:last-child { margin-bottom: 0; }
.flowmap-note {
  margin: 0; padding: 1.1rem 1.25rem; font-size: .92rem; line-height: 1.6;
  background: var(--accent-tint); border-top: 1px solid var(--accent-line);
}
.flowmap-note strong { color: var(--brand-deep); }

/* ---------- Lightbox ----------
   Enlarges an image over the page. Nothing navigates: closing returns the
   reader exactly where they were, with focus back on the button they pressed. */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(6,13,23,.92);
  padding: clamp(.6rem, 2vw, 2rem);
  align-items: center; justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 100%; max-height: calc(100vh - clamp(1.2rem, 4vw, 4rem));
  width: auto; height: auto; display: block;
  border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,.6);
  background: var(--white);
}
.lightbox-close {
  position: absolute; top: clamp(.5rem, 2vw, 1.1rem); right: clamp(.5rem, 2vw, 1.1rem);
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.5);
  display: grid; place-items: center; transition: background var(--t), border-color var(--t);
}
.lightbox-close:hover { background: rgba(255,255,255,.3); border-color: #fff; }
.lightbox-close::before, .lightbox-close::after {
  content: ""; position: absolute; width: 19px; height: 2px; background: #fff; border-radius: 2px;
}
.lightbox-close::before { transform: rotate(45deg); }
.lightbox-close::after { transform: rotate(-45deg); }
body.lightbox-open { overflow: hidden; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 1.05rem; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .84rem; font-weight: 650; color: var(--charcoal); }
.field .req { color: var(--burgundy); }
.field input, .field select, .field textarea {
  font: 400 .95rem var(--sans); padding: .72rem .85rem; min-height: 46px;
  border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink);
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.field .hint { font-size: .79rem; color: var(--muted); }
.consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .86rem; color: var(--muted); }
.consent input { width: 18px; height: 18px; min-height: 0; margin-top: .2rem; flex: 0 0 18px; }
.form-note { font-size: .82rem; color: var(--muted); background: var(--cream); border-radius: var(--radius); padding: .9rem 1rem; }

/* ---------- Office cards ---------- */
.office { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.office-head { background: var(--burgundy); color: var(--white); padding: 1rem 1.3rem; }
.office-head h3 { color: var(--white); margin: 0; font-size: 1.1rem; }
.office-head .badge { font: 700 .68rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-light); display: block; margin-top: .25rem; }
.office-body { padding: 1.25rem 1.3rem; font-size: .95rem; }
.office-body address { font-style: normal; margin-bottom: .9rem; line-height: 1.6; }
.office iframe { width: 100%; height: 220px; border: 0; display: block; border-top: 1px solid var(--line); }

/* ---------- Footer ---------- */
.site-footer { background: var(--brand-deep); color: var(--on-brand-dim); font-size: .9rem; padding: clamp(2.5rem,4vw,3.75rem) 0 0; }
.site-footer h2, .site-footer h4 { color: var(--accent-light); font-family: var(--sans); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); }
@media (max-width: 940px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); } }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a:not(.btn) { color: var(--on-brand-dim); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--accent-light); text-decoration: underline; }
.footer-brand .brand-mark { width: 64px; height: 64px; flex-basis: 64px; margin-bottom: 1rem;
  border-color: rgba(255,255,255,.35); }
.footer-brand p { color: var(--on-brand-muted); font-size: .88rem; line-height: 1.6; }
.footer-office { margin-bottom: 1.1rem; line-height: 1.55; }
.footer-office strong { color: var(--white); display: block; font-size: .88rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 2.5rem; padding: 1.4rem 0 2rem; font-size: .8rem; color: var(--on-brand-muted); }
.footer-bottom .fb-row { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; }
/* Build credit. Sits on its own line under the legal links, one step quieter
   than them — it is an attribution, not navigation the visitor came for. */
.footer-bottom .fb-credit { margin-top: .7rem; font-size: .78rem; color: var(--on-brand-muted); }
.footer-bottom .fb-credit a { color: var(--on-brand-dim); text-decoration: underline;
  text-underline-offset: 2px; }
.footer-bottom .fb-credit a:hover { color: var(--accent-light); }
.footer-bottom a { color: var(--on-brand-dim); }
.disclaimer { background: var(--brand-darkest); color: var(--on-brand-muted); font-size: .78rem; line-height: 1.6; padding: 1.25rem 0; }
.disclaimer strong { color: var(--accent-light); }

/* ---------- Mobile sticky action bar ---------- */
.mobile-bar { display: none; }
@media (max-width: 780px) {
  .mobile-bar {
    display: grid; grid-template-columns: 1fr 1fr; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(40,25,20,.14);
  }
  .mobile-bar a {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .95rem .5rem; min-height: 54px; font: 650 .92rem var(--sans); text-decoration: none;
  }
  .mobile-bar .mb-call { background: var(--brand); color: #fff; }
  .mobile-bar .mb-book { background: var(--accent); color: var(--on-accent); }
  body { padding-bottom: 54px; }
}

/* ---------- Misc ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--on-accent);
  padding: .75rem 1.2rem; z-index: 200; font-weight: 650; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
.rule-gold { width: 62px; height: 4px; background: var(--gold); border-radius: 2px; margin: 0 0 1.4rem; }
.center { text-align: center; }
.center .rule-gold { margin-inline: auto; }
.sec-head { max-width: 66ch; margin-bottom: 2.25rem; }
.sec-head.center { margin-inline: auto; }
.badge-pill {
  display: inline-block; font: 700 .7rem var(--sans); letter-spacing: .1em; text-transform: uppercase;
  background: var(--accent-tint); color: var(--accent-deep); border: 1px solid var(--accent-line);
  padding: .3rem .7rem; border-radius: 999px;
}
.tbd { background: #FFF3C4; border-bottom: 1px dashed #B7902A; padding: 0 .2em; color: #6B5311; font-weight: 600; }
.trust-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 1.5rem; }
.trust-item { border-left: 3px solid var(--gold); padding-left: 1rem; }
.trust-item strong { display: block; font-family: var(--serif); color: var(--burgundy); font-size: 1rem; margin-bottom: .2rem; }
.trust-item span { font-size: .87rem; color: var(--muted); line-height: 1.5; display: block; }
@media print {
  .site-header, .utility, .mobile-bar, .site-footer, .nav, .btn-row { display: none !important; }
  body { background: #fff; font-size: 11pt; }
}

/* ---------- Small-screen utility bar trim ---------- */
@media (max-width: 620px) {
  .utility .u-right { display: none; }
  .utility .wrap { gap: .3rem .9rem; }
}

/* ---------- Episode archive ---------- */
.ep-card { position: relative; }
.ep-card .kicker { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.ep-card .btn {
  /* The global .btn nowrap exists for the header CTA; inside a narrow card a long
     label has to be allowed to wrap rather than run out of the box. */
  width: 100%; white-space: normal; text-align: center;
  line-height: 1.35; height: auto; min-height: 46px; padding: .7rem 1rem;
}
.ep-audio {
  width: 100%; height: 40px; display: block;
  border-radius: var(--radius); background: var(--surface);
}
.ep-audio::-webkit-media-controls-panel { background: var(--surface); }
.ep-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }

/* ---------- Episode archive: artwork ---------- */
.ep-feature {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start;
}
@media (max-width: 860px) { .ep-feature { grid-template-columns: 1fr; } }
.ep-cover-wrap { margin: 0; }
.ep-cover {
  width: 100%; height: auto;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); background: var(--surface);
}
.ep-cover-wrap figcaption { margin-top: .8rem; color: var(--muted); line-height: 1.5; }
.ep-head { display: flex; gap: .95rem; align-items: flex-start; margin-bottom: .8rem; }
.ep-thumb {
  width: 76px; height: 76px; flex: 0 0 76px; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
}

/* ---------- Anchor offset ----------
   The header is sticky, so an anchor jump would otherwise land the target
   underneath it. This keeps #consult, the practice-hub section anchors and
   the article table of contents clear of the header on every screen size. */
[id] { scroll-margin-top: 150px; }
@media (max-width: 920px) { [id] { scroll-margin-top: 92px; } }

/* ---------- Attorney portrait ---------- */
.attorney-feature {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: start;
}
@media (max-width: 860px) { .attorney-feature { grid-template-columns: minmax(0, 1fr); } }
.portrait-col { display: flex; flex-direction: column; gap: 1.25rem; }
.attorney-emphasis { grid-column: 1 / -1; margin-top: .5rem; }
.checklist.cols-3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2rem;
}
/* .side-box drops the rule line under its last item, which is right for a
   single-column sidebar list. Laid out in columns, that "last" item sits in the
   middle of a row and loses its line while its neighbors keep theirs. */
.checklist.cols-3 li:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 860px) {
  .attorney-emphasis { grid-column: auto; }
  .checklist.cols-3 { grid-template-columns: minmax(0, 1fr); }
}
.portrait {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); background: var(--surface);
}

/* ---------- Cookie notice ----------
   Bottom-left, out of the way of the mobile Call / Book bar, and sized so it
   never becomes a wall. It is a notice, not a gate: nothing on the page is
   blocked while it is open, because making someone dismiss a box before they
   can read about a foreclosure deadline is a worse outcome than an
   unacknowledged cookie. */
.cookie-note {
  position: fixed; left: 16px; bottom: 16px; z-index: 250;
  width: min(320px, calc(100vw - 32px));
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-left: 5px solid var(--accent);
  border-radius: var(--radius-lg); padding: .8rem .95rem;
  box-shadow: 0 10px 34px rgba(20,25,35,.22);
  font-size: .84rem; line-height: 1.5;
}
.cookie-note[hidden] { display: none; }
.cookie-note h2 {
  margin: 0 0 .35rem; font-size: .92rem; font-family: var(--sans);
  font-weight: 700; letter-spacing: .01em; color: var(--brand-deep);
}
.cookie-note p { margin: 0 0 .7rem; color: var(--muted); font-size: .82rem; }
.cookie-note .cookie-btns { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cookie-note .btn { font-size: .78rem; padding: .42rem .75rem; min-height: 36px; }
.cookie-note .cookie-prefs {
  font-size: .8rem; color: var(--muted); white-space: nowrap;
  text-decoration: underline; text-underline-offset: 2px; padding: 0 .15rem;
}
.cookie-note .cookie-prefs:hover { color: var(--brand); }

/* On a phone the sticky Call / Book bar owns the bottom of the screen. */
@media (max-width: 780px) {
  .cookie-note { left: 8px; right: 8px; bottom: 62px; width: auto; }
}

/* The preferences page's own switches */
.cookie-cat {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.cookie-cat:last-of-type { border-bottom: 0; }
.cookie-cat input { width: 20px; height: 20px; margin-top: .2rem; flex: 0 0 20px; }
.cookie-cat strong { display: block; color: var(--brand); }
.cookie-cat span { font-size: .9rem; color: var(--muted); }
.cookie-cat.is-locked { opacity: .65; }