/* Khan Law — Prototype V2 (Real Estate, SEO + Lead + AI optimised)
   Brand tokens inherited without change from V1 (Prototype/assets/css/custom.css).
   Appended below the V1 port: V2-only utilities for glossary hero TOC, trust strip,
   intent router, reviews wall, office card, lawyer card, sticky right rail, lead
   magnet card, audience toggle, and corporate considerations expandable. */

/* ============ V1 BRAND BASE (ported verbatim) ============ */

:root {
  --navy: #040725;
  --navy-2: #0a0f3a;
  --navy-soft: #171a32;
  --gold: #EBB30A;
  --gold-2: #ECB41F;
  --gold-soft: #F6CE5C;
  --ink: #0B0E2B;
  --muted: #BFC0D2;
  --paper: #FBFBF8;
  --line: rgba(235,179,10,0.18);
  --glass: rgba(255,255,255,0.06);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Lato', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--paper);
  color: #0f1130;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .serif { font-family: 'Cinzel', 'Playfair Display', Georgia, serif; letter-spacing: 0.01em; }

/* Editorial monospace accent (2026 aesthetic: data, labels, section coords) */
.mono, .overline-num, .trust-item .sml, .data-hero .cell .lbl,
.calc-result .breakdown, .showcase-label, .lm-meta, .qa-meta,
.editorial-coord, .eyebrow-mono {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', 'Menlo', monospace;
  letter-spacing: 0.02em;
}

/* Hairline dividers (replaces heavy card shadows in editorial surfaces) */
.hairline { border-top: 1px solid rgba(4,7,37,0.08); }
.hairline-strong { border-top: 1px solid rgba(4,7,37,0.14); }
.hairline-gold { border-top: 1px solid rgba(235,179,10,0.32); }

/* Editorial section number (big serif numeral + rule + label) */
.editorial-number {
  display: flex; align-items: baseline; gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(4,7,37,0.12);
}
.editorial-number .num {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 3.5rem; line-height: 1; color: #040725;
  letter-spacing: -0.02em;
}
.editorial-number .num .slash { color: rgba(4,7,37,0.25); margin: 0 .3rem; }
.editorial-number .label {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(4,7,37,0.5); font-weight: 500;
}

.hero-wrap {
  background: linear-gradient(180deg, #03051c 0%, #050929 55%, #070d33 100%);
  overflow: hidden;
  position: relative;
}
.hero-wrap::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(235,179,10,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(235,179,10,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 20%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 0%, transparent 70%);
  pointer-events: none;
}

.grain::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
  opacity: 0.04;
  mix-blend-mode: overlay;
}

.gold-text {
  background: linear-gradient(135deg, #F6CE5C 0%, #EBB30A 40%, #C4900A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Chip — default is the light-background variant (readable on paper).
   .on-dark is the hero-band variant ported from V1. */
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem; border-radius: 6px;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .72rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(235,179,10,0.14);
  border: 1px solid rgba(235,179,10,0.45);
  color: #8B6508;
}
.chip.on-dark {
  border-radius: 999px;
  font-family: 'Lato', sans-serif; font-weight: 600;
  background: rgba(235,179,10,0.08);
  border-color: rgba(235,179,10,0.35);
  color: #F6CE5C;
}

/* Buttons — 8px radius, tighter padding, no heavy edge shadow. Pairs with
   Cinzel caps without looking chunky. Use .btn-gold.pill for the sticky
   mobile CTA only. */
.btn-gold {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #EBB30A;
  color: #040725; font-weight: 700; font-size: .9rem;
  padding: .65rem 1.1rem; border-radius: 8px;
  border: 1px solid #C99208;
  transition: background .2s ease, transform .15s ease;
}
.btn-gold:hover { background: #F6CE5C; transform: translateY(-1px); }
.btn-gold:active { transform: translateY(0); }
.btn-gold.pill { border-radius: 999px; }
.btn-gold.lg { padding: .85rem 1.35rem; font-size: .95rem; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: #fff; font-size: .9rem;
  padding: .6rem 1.05rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.22);
  transition: all .2s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(235,179,10,0.5); color: #F6CE5C; }
.btn-ghost.on-light { color: #040725; border-color: rgba(4,7,37,0.18); }
.btn-ghost.on-light:hover { background: rgba(4,7,37,0.04); border-color: #EBB30A; color: #C49007; }
.btn-ghost.pill { border-radius: 999px; }
.btn-ghost.lg { padding: .8rem 1.3rem; font-size: .95rem; }

.card-elev {
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(4,7,37,0.03);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card-elev:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(4,7,37,0.18); border-color: rgba(235,179,10,0.45); }

.card-dark {
  background: linear-gradient(180deg, #0a0f3a 0%, #040725 100%);
  border: 1px solid rgba(235,179,10,0.15);
  border-radius: 12px;
  color: #E8E9F4;
}

/* Floating navy pill header. Transparent positioning wrapper, inner
   container becomes a contained bar with rounded corners, gold hairline,
   and a soft shadow. Sits detached from the top edge for the premium
   Linear / Raycast feel. */
.nav-blur {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-top: 14px;
  pointer-events: none;
}
.nav-blur > div:first-child {
  background: #040725;
  border: 1px solid rgba(235,179,10,0.22);
  border-radius: 14px;
  box-shadow: 0 16px 40px -16px rgba(4,7,37,0.55), 0 2px 6px -2px rgba(4,7,37,0.3);
  pointer-events: auto;
}
/* Mobile drawer tucks under the pill with rounded bottom corners. */
#mobile-nav {
  max-width: 80rem;
  margin: .5rem auto 0;
  border-radius: 14px;
  border: 1px solid rgba(235,179,10,0.18) !important;
  box-shadow: 0 16px 40px -16px rgba(4,7,37,0.55);
  pointer-events: auto;
}
/* Main content clears the new floating pill height (14 top padding + 72
   pill + 14 breathing). Overrides the inline pt-[72px] Tailwind class
   every page uses. */
main#main { padding-top: 100px !important; }

.marquee { display: flex; gap: 3rem; white-space: nowrap; animation: marquee 28s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.step-rail { position: relative; }
.step-rail::before{
  content:""; position:absolute; left: 28px; top:0; bottom:0; width:2px;
  background: linear-gradient(180deg, rgba(235,179,10,0.6), rgba(235,179,10,0.05));
}
.step-dot {
  width: 56px; height: 56px; border-radius: 999px;
  background: #EBB30A;
  color: #040725; font-weight: 800;
  display:flex; align-items:center; justify-content:center;
  font-family: 'Cinzel', serif;
  flex: 0 0 56px;
  border: 2px solid #C99208;
}

details.faq {
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}
details.faq[open] {
  border-color: rgba(235,179,10,0.45);
  box-shadow: 0 20px 40px -24px rgba(4,7,37,0.25);
}
details.faq > summary {
  list-style: none; cursor: pointer;
  display:flex; align-items:center; justify-content: space-between; gap: 1rem;
  font-weight: 700; color: #040725;
}
details.faq > summary::-webkit-details-marker { display:none; }
details.faq .chev {
  width: 32px; height: 32px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(235,179,10,0.12); color:#C49007;
  transition: transform .3s ease, background .3s ease;
}
details.faq[open] .chev { transform: rotate(45deg); background: #EBB30A; color:#040725; }

.reveal { opacity: 0; transform: translateY(22px); transition: all .7s cubic-bezier(.2,.65,.2,1); }
.reveal.visible { opacity: 1; transform: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #fafaf5; }
::-webkit-scrollbar-thumb { background: #e8d48a; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #EBB30A; }

.progress-top {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: transparent; pointer-events: none;
}
.progress-top > span {
  display:block; height:100%; width: 0%;
  background: linear-gradient(90deg, #F6CE5C, #EBB30A, #C48C05);
  transition: width .1s linear;
}

.calc-field {
  background: #fff; border: 1px solid rgba(4,7,37,0.12);
  border-radius: 12px; padding: .75rem 1rem; font-size: 1rem; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.calc-field:focus { outline: none; border-color: #EBB30A; box-shadow: 0 0 0 4px rgba(235,179,10,0.18); }

.tab-btn {
  padding: .65rem 1.15rem; border-radius: 8px;
  color: #040725; font-weight: 700; font-size: .92rem;
  border: 1px solid rgba(4,7,37,0.1); background: #fff;
  transition: all .2s ease;
}
.tab-btn:hover { border-color: rgba(4,7,37,0.25); }
.tab-btn.active { background: #040725; color: #EBB30A; border-color: #040725; }

.icon-square {
  width: 48px; height: 48px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(235,179,10,0.12); color:#C49007;
}

.float-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  color: #fff;
}

@media (max-width: 900px){ .step-rail::before{ left: 22px; } }

.img-slot {
  position: relative;
  background: linear-gradient(135deg, #F5EFD9 0%, #EADFB9 100%);
  border: 1px dashed rgba(235,179,10,0.55);
  border-radius: 14px;
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 1rem;
}
.img-slot::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(45deg, rgba(4,7,37,0.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(4,7,37,0.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(4,7,37,0.04) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(4,7,37,0.04) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  pointer-events:none;
}
.img-slot-label {
  position: relative;
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #7A5B00;
  background: rgba(255,255,255,0.88);
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  font-weight: 700;
  border: 1px solid rgba(235,179,10,0.35);
}
.img-slot.dark {
  background: linear-gradient(135deg, #0d112e 0%, #1a1e44 100%);
  border-color: rgba(235,179,10,0.35);
}
.img-slot.dark .img-slot-label {
  background: rgba(235,179,10,0.15);
  color: #F6CE5C;
  border-color: rgba(235,179,10,0.25);
}

.aspect-portrait-4-5 { aspect-ratio: 4 / 5; }
.aspect-portrait-5-6 { aspect-ratio: 5 / 6; }
.aspect-landscape-4-3 { aspect-ratio: 4 / 3; }
.aspect-square-1-1 { aspect-ratio: 1 / 1; }

.img-frame { position: relative; overflow: hidden; border-radius: 20px; background: #0b0e2b; }
.img-frame > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.overline-num {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: #C49007;
}
.overline-num .num {
  font-family: 'Cinzel', serif;
  font-weight: 700; font-size: .95rem;
  color: #040725;
  padding: .1rem .55rem;
  background: rgba(235,179,10,0.14);
  border-radius: 6px;
  letter-spacing: 0;
}
.overline-num.light { color: #F6CE5C; }
.overline-num.light .num { color: #F6CE5C; background: rgba(235,179,10,0.15); }

.stat-block { border-left: 2px solid rgba(235,179,10,0.5); padding: .2rem 0 .2rem 1rem; }
.stat-block .num {
  font-family: 'Cinzel', serif; font-weight: 700;
  color: #F6CE5C; font-size: 1.9rem; line-height: 1;
}
.stat-block .lbl { color: rgba(255,255,255,0.6); font-size: .78rem; letter-spacing: .05em; margin-top: .35rem; }

.logo-pill {
  display: inline-flex; align-items: center;
  padding: .55rem 1rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.72);
  font-weight: 700; font-size: .85rem; letter-spacing: .02em;
}

.promise-num {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 3rem; color: #EBB30A; line-height: 1; opacity: .9;
}

/* Practice areas — floating pill grid. Each tile is its own paper or navy
   card at 14px radius with gold hairline and soft detached shadow, matching
   the header and promises pill rhythm. Real Estate is the full width
   featured card (row 1); the four phase two practices are compact equal
   tiles (row 2). */
.practice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px)  { .practice-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .practice-grid { grid-template-columns: repeat(4, 1fr); } }

.practice-card {
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(4,7,37,0.03);
  padding: 1.5rem 1.5rem 1.25rem;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-decoration: none;
  color: inherit;
}
.practice-card:hover {
  transform: translateY(-2px);
  border-color: rgba(235,179,10,0.45);
  box-shadow: 0 18px 40px -24px rgba(4,7,37,0.2);
}
.practice-card .pc-icon {
  width: 32px; height: 32px;
  color: #C48C05;
  margin-bottom: .95rem;
}
.practice-card .pc-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(4,7,37,0.52);
}
.practice-card .pc-eyebrow .idx { color: #C48C05; font-weight: 500; }
.practice-card .pc-name {
  font-family: 'Cinzel', serif; font-weight: 700;
  color: #040725;
  font-size: 1.2rem;
  line-height: 1.12;
  margin: .55rem 0 .55rem;
  letter-spacing: .005em;
}
.practice-card .pc-lede {
  font-size: .88rem;
  color: rgba(4,7,37,0.66);
  line-height: 1.5;
}
.practice-card .pc-divider {
  height: 1px; background: rgba(4,7,37,0.08);
  margin: 1rem 0 .85rem;
}
.practice-card .pc-svcs {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .38rem;
}
.practice-card .pc-svcs li {
  position: relative;
  padding-left: 1rem;
  font-size: .82rem;
  color: rgba(4,7,37,0.72);
  line-height: 1.45;
}
.practice-card .pc-svcs li::before {
  content: ""; position: absolute;
  left: 0; top: .55rem;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: #EBB30A;
}
.practice-card .pc-cta {
  margin-top: auto;
  padding-top: 1rem;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Lato', sans-serif; font-weight: 700;
  font-size: .85rem;
  color: #C48C05;
  letter-spacing: .01em;
}
.practice-card .pc-cta svg { width: 14px; height: 14px; transition: transform .2s ease; }
.practice-card:hover .pc-cta svg { transform: translateX(3px); }

/* Featured Real Estate card — spans the full row, horizontal internal
   layout, navy surface, gold hairline, larger content rhythm. */
.practice-card.featured {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #0a0f3a 0%, #040725 100%);
  border-color: rgba(235,179,10,0.24);
  box-shadow: 0 16px 40px -16px rgba(4,7,37,0.55), 0 2px 6px -2px rgba(4,7,37,0.3);
  padding: 2rem 1.75rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .practice-card.featured { padding: 2.25rem 2rem; }
}
@media (min-width: 1024px) {
  .practice-card.featured {
    grid-template-columns: 5fr 7fr;
    gap: 3rem;
    padding: 2.5rem 2.5rem;
    align-items: center;
  }
}
.practice-card.featured:hover {
  transform: translateY(-2px);
  border-color: rgba(235,179,10,0.5);
  box-shadow: 0 24px 60px -20px rgba(4,7,37,0.65), 0 4px 10px -2px rgba(4,7,37,0.3);
}
.practice-card.featured .pc-icon { color: #F6CE5C; width: 40px; height: 40px; margin-bottom: 1rem; }
.practice-card.featured .pc-eyebrow { color: rgba(255,255,255,0.62); }
.practice-card.featured .pc-eyebrow .idx { color: #F6CE5C; }
.practice-card.featured .pc-name {
  color: #fff;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.08;
  margin: .7rem 0 .75rem;
  max-width: 14ch;
}
.practice-card.featured .pc-lede {
  color: rgba(255,255,255,0.72);
  font-size: .98rem;
  max-width: 42ch;
}
.practice-card.featured .pc-divider { background: rgba(235,179,10,0.18); margin: 1.25rem 0 1rem; }
.practice-card.featured .pc-svcs li { color: rgba(255,255,255,0.78); font-size: .9rem; }
.practice-card.featured .pc-svcs li::before { background: #EBB30A; top: .6rem; }
.practice-card.featured .pc-cta {
  color: #F6CE5C;
  font-size: .95rem;
  padding-top: 1.25rem;
}
.practice-card.featured .pc-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  margin-top: 1.25rem;
}
.practice-card.featured .pc-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .7rem; border-radius: 6px;
  background: rgba(235,179,10,0.08);
  border: 1px solid rgba(235,179,10,0.22);
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: #F6CE5C;
}

/* ============================================================
   PRACTICE AREAS · OPTION B — ALTERNATING DIPTYCH
   5 horizontal floating pills, icon panel alternates left and right.
   ============================================================ */
.practice-diptych { display: grid; gap: 1.25rem; }
.practice-diptych .pd-row {
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(4,7,37,0.03);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
@media (min-width: 768px) {
  .practice-diptych .pd-row { grid-template-columns: 5fr 7fr; }
  .practice-diptych .pd-row.rev { grid-template-columns: 7fr 5fr; }
  .practice-diptych .pd-row.rev .pd-image { order: 2; }
  .practice-diptych .pd-row.rev .pd-body  { order: 1; }
}
.practice-diptych .pd-row:hover {
  transform: translateY(-2px);
  border-color: rgba(235,179,10,0.45);
  box-shadow: 0 18px 40px -24px rgba(4,7,37,0.2);
}
.practice-diptych .pd-image {
  background: linear-gradient(135deg, #0a0f3a 0%, #040725 100%);
  min-height: 220px;
  display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.practice-diptych .pd-image::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(235,179,10,0.14), transparent 60%);
}
.practice-diptych .pd-image svg { width: 72px; height: 72px; color: #F6CE5C; position: relative; z-index: 1; stroke-width: 1.25; }
.practice-diptych .pd-body {
  padding: 1.75rem;
  display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 768px) { .practice-diptych .pd-body { padding: 2.25rem; } }
.practice-diptych .pd-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem; letter-spacing: .22em; text-transform: uppercase;
  color: #C48C05;
}
.practice-diptych .pd-name {
  font-family: 'Cinzel', serif; font-weight: 700;
  color: #040725;
  font-size: 1.5rem; line-height: 1.1;
  margin: .55rem 0 .6rem;
}
.practice-diptych .pd-lede {
  color: rgba(4,7,37,0.68);
  font-size: .95rem; line-height: 1.55;
  max-width: 52ch;
}
.practice-diptych .pd-cta {
  margin-top: 1.25rem;
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: .9rem; color: #C48C05;
}
.practice-diptych .pd-cta svg { width: 14px; height: 14px; transition: transform .2s ease; }
.practice-diptych .pd-row:hover .pd-cta svg { transform: translateX(3px); }

/* ============================================================
   PRACTICE AREAS · OPTION C — UNIFIED DARK LEDGER
   Single navy pill, 5 columns divided by gold hairlines.
   ============================================================ */
.practice-ledger {
  background: linear-gradient(180deg, #0a0f3a 0%, #040725 100%);
  border: 1px solid rgba(235,179,10,0.22);
  border-radius: 14px;
  box-shadow: 0 16px 40px -16px rgba(4,7,37,0.55), 0 2px 6px -2px rgba(4,7,37,0.3);
  overflow: hidden;
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .practice-ledger { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .practice-ledger { grid-template-columns: repeat(5, 1fr); } }
.practice-ledger .pl-col {
  padding: 2rem 1.5rem;
  border-right: 1px solid rgba(235,179,10,0.14);
  border-bottom: 1px solid rgba(235,179,10,0.14);
  display: flex; flex-direction: column; gap: .55rem;
  text-decoration: none; color: inherit;
  position: relative; transition: background .25s ease;
}
.practice-ledger .pl-col:hover { background: rgba(235,179,10,0.04); }
@media (min-width: 1024px) {
  .practice-ledger .pl-col:nth-child(5n) { border-right: 0; }
  .practice-ledger .pl-col { border-bottom: 0; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .practice-ledger .pl-col:nth-child(2n) { border-right: 0; }
  .practice-ledger .pl-col:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 639px) {
  .practice-ledger .pl-col { border-right: 0; }
  .practice-ledger .pl-col:last-child { border-bottom: 0; }
}
.practice-ledger .pl-icon { width: 30px; height: 30px; color: #F6CE5C; }
.practice-ledger .pl-idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(235,179,10,0.7);
  margin-top: .45rem;
}
.practice-ledger .pl-name {
  font-family: 'Cinzel', serif; font-weight: 600;
  color: #fff;
  font-size: 1.15rem; line-height: 1.1;
}
.practice-ledger .pl-lede {
  font-size: .82rem; color: rgba(255,255,255,0.6); line-height: 1.5;
}
.practice-ledger .pl-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: #F6CE5C;
  padding-top: .9rem;
}
.practice-ledger .pl-cta svg { width: 12px; height: 12px; transition: transform .2s ease; }
.practice-ledger .pl-col:hover .pl-cta svg { transform: translateX(3px); }

/* ============================================================
   PRACTICE AREAS · OPTION D — EDITORIAL NUMBERED LIST (floating pill)
   Rows live inside a paper floating pill: 14px radius, gold hairline,
   soft detached shadow — matching the header and promises pill rhythm.
   Hairline row dividers, giant gold Cinzel numerals, no inner cards.
   ============================================================ */
.practice-list {
  background: #fff;
  border: 1px solid rgba(235,179,10,0.22);
  border-radius: 14px;
  box-shadow: 0 16px 40px -16px rgba(4,7,37,0.2), 0 2px 6px -2px rgba(4,7,37,0.08);
  overflow: hidden;
  display: grid; gap: 0;
}
.practice-list .plr-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 1.25rem; align-items: center;
  padding: 1.4rem 1.5rem;
  border-bottom: 1px solid rgba(4,7,37,0.08);
  text-decoration: none; color: inherit;
  transition: background .25s ease, padding-left .25s ease;
}
@media (min-width: 768px) {
  .practice-list .plr-row { gap: 2rem; padding: 1.75rem 2.25rem; }
}
@media (min-width: 1024px) {
  .practice-list .plr-row { padding: 1.9rem 2.75rem; }
}
.practice-list .plr-row:last-child { border-bottom: 0; }
.practice-list .plr-row:hover {
  background: linear-gradient(90deg, rgba(235,179,10,0.07), rgba(235,179,10,0) 70%);
  padding-left: 2.25rem;
}
@media (min-width: 768px) { .practice-list .plr-row:hover { padding-left: 3rem; } }
@media (min-width: 1024px) { .practice-list .plr-row:hover { padding-left: 3.5rem; } }

.practice-list .plr-num {
  font-family: 'Cinzel', serif; font-weight: 700;
  color: #EBB30A;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1; letter-spacing: -.01em;
  min-width: 3.25ch; opacity: .95;
}
.practice-list .plr-body { display: grid; gap: .35rem; }
.practice-list .plr-name {
  font-family: 'Cinzel', serif; font-weight: 700;
  color: #040725;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem); line-height: 1.1;
}
.practice-list .plr-lede {
  color: rgba(4,7,37,0.65);
  font-size: .92rem; line-height: 1.5;
  max-width: 62ch;
}
.practice-list .plr-arrow {
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(4,7,37,0.15);
  display: grid; place-items: center;
  color: #040725; flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.practice-list .plr-row:hover .plr-arrow {
  background: #EBB30A; border-color: #EBB30A; color: #040725; transform: translateX(3px);
}
@media (max-width: 767px) {
  .practice-list .plr-row { grid-template-columns: auto 1fr; padding: 1.25rem 1.25rem; }
  .practice-list .plr-row:hover { padding-left: 1.75rem; }
  .practice-list .plr-arrow { display: none; }
}

/* ============================================================
   PRACTICE AREAS · OPTION E — TABBED DETAIL PANEL
   5 tabs + rich content panel, interactive.
   ============================================================ */
.practice-tabs {
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(4,7,37,0.03);
  overflow: hidden;
}
.practice-tabs .pt-nav {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid rgba(4,7,37,0.08);
  background: #FBFBF8;
}
@media (max-width: 767px) {
  .practice-tabs .pt-nav { grid-template-columns: 1fr; }
}
.practice-tabs .pt-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  padding: 1rem 1.1rem;
  background: transparent; border: 0;
  border-right: 1px solid rgba(4,7,37,0.08);
  border-bottom: 2px solid transparent;
  cursor: pointer; text-align: left;
  font-family: inherit;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.practice-tabs .pt-tab:last-child { border-right: 0; }
.practice-tabs .pt-tab:hover { background: rgba(235,179,10,0.05); }
.practice-tabs .pt-tab[aria-selected="true"] {
  background: #fff;
  border-bottom-color: #EBB30A;
}
@media (max-width: 767px) {
  .practice-tabs .pt-tab { border-right: 0; border-bottom: 1px solid rgba(4,7,37,0.08); }
  .practice-tabs .pt-tab[aria-selected="true"] { border-bottom: 2px solid #EBB30A; }
}
.practice-tabs .pt-tab .idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(4,7,37,0.4);
}
.practice-tabs .pt-tab[aria-selected="true"] .idx { color: #C48C05; }
.practice-tabs .pt-tab .label {
  font-family: 'Cinzel', serif; font-weight: 600;
  font-size: .98rem; color: #040725; line-height: 1.1;
}
.practice-tabs .pt-panel { display: none; padding: 2rem 1.75rem; }
@media (min-width: 1024px) { .practice-tabs .pt-panel { padding: 2.75rem 2.5rem; } }
.practice-tabs .pt-panel[aria-hidden="false"] { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
  .practice-tabs .pt-panel[aria-hidden="false"] { grid-template-columns: 5fr 7fr; align-items: center; }
}
.practice-tabs .pt-panel .tp-visual {
  background: linear-gradient(135deg, #0a0f3a 0%, #040725 100%);
  border-radius: 10px;
  min-height: 220px;
  display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.practice-tabs .pt-panel .tp-visual::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(235,179,10,0.14), transparent 60%);
}
.practice-tabs .pt-panel .tp-visual svg { width: 80px; height: 80px; color: #F6CE5C; position: relative; z-index: 1; stroke-width: 1.25; }
.practice-tabs .pt-panel .tp-content { display: grid; gap: .8rem; }
.practice-tabs .pt-panel .tp-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: #C48C05;
}
.practice-tabs .pt-panel .tp-name {
  font-family: 'Cinzel', serif; font-weight: 700;
  color: #040725;
  font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.05;
}
.practice-tabs .pt-panel .tp-lede {
  color: rgba(4,7,37,0.7);
  font-size: 1rem; line-height: 1.55; max-width: 52ch;
}
.practice-tabs .pt-panel .tp-svcs {
  list-style: none; padding: 0; margin: .5rem 0 0;
  display: grid; gap: .35rem;
}
.practice-tabs .pt-panel .tp-svcs li {
  position: relative; padding-left: 1rem;
  font-size: .9rem; color: rgba(4,7,37,0.75); line-height: 1.45;
}
.practice-tabs .pt-panel .tp-svcs li::before {
  content: ""; position: absolute; left: 0; top: .6rem;
  width: 5px; height: 5px; border-radius: 999px; background: #EBB30A;
}
.practice-tabs .pt-panel .tp-cta {
  margin-top: .85rem;
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; color: #C48C05;
}
.practice-tabs .pt-panel .tp-cta svg { width: 14px; height: 14px; }

/* Three promises — floating navy pill card.
   Same treatment as the header pill: #040725 surface, 14px rounded corners,
   gold hairline, soft detached shadow. Image left, content right on desktop;
   stacks on mobile with the image on top. */
.promises-pill {
  background: #040725;
  border: 1px solid rgba(235,179,10,0.22);
  border-radius: 14px;
  box-shadow: 0 16px 40px -16px rgba(4,7,37,0.55), 0 2px 6px -2px rgba(4,7,37,0.3);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .promises-pill { grid-template-columns: 5fr 7fr; }
}
.promises-pill .pp-image {
  position: relative;
  min-height: 320px;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .promises-pill .pp-image { min-height: 100%; }
}
.promises-pill .pp-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.promises-pill .pp-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,7,37,0) 55%, rgba(4,7,37,0.55) 100%);
  pointer-events: none;
}
@media (min-width: 1024px) {
  .promises-pill .pp-image::after {
    background: linear-gradient(90deg, rgba(4,7,37,0) 60%, rgba(4,7,37,0.7) 100%);
  }
}
.promises-pill .pp-body {
  padding: 2rem 1.5rem 2.25rem;
}
@media (min-width: 768px) { .promises-pill .pp-body { padding: 3rem 2.5rem; } }
@media (min-width: 1024px) { .promises-pill .pp-body { padding: 3.5rem 3.25rem; } }
.promises-pill .pp-eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .35rem .7rem; border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(235,179,10,0.18);
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.promises-pill .pp-eyebrow .num { color: #F6CE5C; font-weight: 500; }
.promises-pill .pp-h2 {
  font-family: 'Cinzel', serif; font-weight: 700;
  color: #fff;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.08;
  margin-top: 1.1rem;
  max-width: 16ch;
}
.promises-pill .pp-list { margin-top: 2.25rem; display: grid; gap: 1.75rem; }
@media (min-width: 768px) { .promises-pill .pp-list { gap: 2rem; } }
.promises-pill .pp-item { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
@media (min-width: 768px) { .promises-pill .pp-item { gap: 1.75rem; } }
.promises-pill .pp-num {
  font-family: 'Cinzel', serif; font-weight: 700;
  color: #EBB30A; line-height: 1;
  font-size: 2.75rem; opacity: .95;
  min-width: 2.25ch;
}
@media (min-width: 768px) { .promises-pill .pp-num { font-size: 3.25rem; } }
.promises-pill .pp-item h3 {
  font-family: 'Cinzel', serif; font-weight: 600;
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: .01em;
  margin-bottom: .5rem;
}
@media (min-width: 768px) { .promises-pill .pp-item h3 { font-size: 1.35rem; } }
.promises-pill .pp-item p {
  color: rgba(255,255,255,0.7);
  font-size: .95rem;
  line-height: 1.55;
  max-width: 52ch;
}

/* Horizontal timeline. Dots centred in each column. Connector line runs
   from the centre of dot 1 to the centre of the last dot so it stops
   exactly at the final step instead of overshooting. */
.timeline-h {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative;
}
.timeline-h::before{
  content:""; position:absolute;
  left: 10%; right: 10%;
  top: 27px; height: 2px;
  background: linear-gradient(90deg, rgba(235,179,10,0.25) 0%, rgba(235,179,10,0.95) 100%);
  z-index: 0;
}
.timeline-h .tl-node {
  position: relative;
  padding: 0 .5rem;
  text-align: center;
}
.timeline-h .tl-dot {
  width: 56px; height: 56px; border-radius: 999px;
  background: #fff; border: 2px solid #EBB30A; color: #040725;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700;
  position: relative; z-index: 1;
  margin: 0 auto 1.1rem;
}
.timeline-h .tl-node:last-child .tl-dot { background: #EBB30A; color: #040725; }
@media (max-width: 900px) {
  .timeline-h { grid-template-columns: 1fr; gap: 1.25rem; }
  .timeline-h::before { display: none; }
  .timeline-h .tl-node { text-align: left; padding: 0; }
  .timeline-h .tl-dot { margin: 0 0 .5rem; }
}

.quote-mark { font-family: 'Cinzel', serif; font-size: 5rem; color: rgba(235,179,10,0.5); line-height: .6; margin-bottom: -.5rem; }

.contact-tile {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 2rem 1.5rem;
  text-align: center; color: #fff;
  transition: all .25s ease; display: block;
}
.contact-tile:hover { background: #EBB30A; color: #040725; border-color: #EBB30A; transform: translateY(-3px); }
.contact-tile .ct-icon {
  width: 56px; height: 56px; margin: 0 auto 1rem;
  border-radius: 999px;
  background: rgba(235,179,10,0.16); color: #F6CE5C;
  display:flex; align-items:center; justify-content:center;
}
.contact-tile:hover .ct-icon { background: #040725; color: #EBB30A; }

.mobile-actions {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(4,7,37,0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(235,179,10,0.25);
  gap: .75rem; z-index: 45;
}
.mobile-actions a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 1rem; border-radius: 12px;
  font-weight: 700; font-size: .95rem; gap: .4rem;
}
.mobile-actions a.call { background: rgba(255,255,255,0.08); color: #fff; }
.mobile-actions a.quote { background: #EBB30A; color: #040725; }
@media (min-width: 1024px) { .mobile-actions { display: none; } }
body.has-mobile-actions { padding-bottom: 86px; }
@media (min-width: 1024px) { body.has-mobile-actions { padding-bottom: 0; } }

.city-link {
  display: inline-flex; align-items: center; justify-content: space-between;
  padding: .9rem 1rem;
  background: rgba(4,7,37,0.03);
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 12px; color: #040725; font-weight: 700;
  transition: all .2s ease;
}
.city-link:hover { border-color: rgba(235,179,10,0.55); background: rgba(235,179,10,0.08); color: #C49007; }
.city-link .arrow { transition: transform .25s ease; }
.city-link:hover .arrow { transform: translateX(4px); }

.signature {
  font-family: 'Cinzel', serif; font-style: italic;
  font-size: 1.6rem; color: #040725; letter-spacing: .02em;
  transform: rotate(-2deg); display: inline-block;
  border-bottom: 2px solid #EBB30A; padding-bottom: .25rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* V1 primary nav dropdowns */
.nav-dd { position: relative; }
.nav-dd-trigger {
  display: inline-flex; align-items: center; gap: .35rem;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.8);
  font-size: .92rem; font-weight: 400;
  padding: .25rem 0;
  font-family: inherit;
  transition: color .2s ease;
}
.nav-dd-trigger:hover,
.nav-dd-trigger[aria-expanded="true"],
.nav-dd:hover .nav-dd-trigger { color: #EBB30A; }
.nav-dd-trigger .chev { width: 12px; height: 12px; transition: transform .25s ease; }
.nav-dd:hover .nav-dd-trigger .chev,
.nav-dd-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }

.nav-dd-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 320px;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgba(4,7,37,0.35), 0 4px 12px -4px rgba(4,7,37,0.12);
  padding: .55rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .25s cubic-bezier(.2,.65,.2,1);
  z-index: 60;
}
.nav-dd-panel::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 18px; }
.nav-dd:hover .nav-dd-panel,
.nav-dd:focus-within .nav-dd-panel,
.nav-dd-panel.is-open {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dd-item {
  display: block; padding: .65rem .9rem; border-radius: 10px;
  color: #040725; font-size: .92rem; font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.nav-dd-item .lbl { display: block; font-size: .72rem; font-weight: 500; color: rgba(4,7,37,0.55); margin-top: .15rem; }
.nav-dd-item:hover { background: rgba(235,179,10,0.10); color: #C49007; }
.nav-dd-item:hover .lbl { color: rgba(196,144,7,0.8); }
.nav-dd-item[aria-current="page"] { background: rgba(4,7,37,0.04); }
.nav-dd-item[aria-current="page"]::after { content: "•"; margin-left: .4rem; color: #EBB30A; }
.nav-dd-section-label {
  padding: .35rem .9rem .15rem;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
  color: rgba(4,7,37,0.45); font-weight: 700;
}

.mobile-dd { border-top: 1px solid rgba(255,255,255,0.08); }
.mobile-dd > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 0; cursor: pointer; list-style: none;
  color: rgba(255,255,255,0.85); font-weight: 600;
}
.mobile-dd > summary::-webkit-details-marker { display: none; }
.mobile-dd > summary .chev { width: 14px; height: 14px; transition: transform .25s ease; }
.mobile-dd[open] > summary .chev { transform: rotate(180deg); }
.mobile-dd[open] > summary { color: #EBB30A; }
.mobile-dd-list { padding: .25rem 0 .85rem .9rem; display: flex; flex-direction: column; gap: .65rem; }
.mobile-dd-list a { color: rgba(255,255,255,0.7); font-size: .9rem; }
.mobile-dd-list a[aria-current="page"] { color: #EBB30A; }

/* =================================================================
   Primary nav v2 additions (5 practice dropdowns + phone + book CTA).
   Desktop breakpoint pushed from lg (1024) to xl (1280) to fit the
   extra dropdown triggers without crowding. Phone chip appears
   alongside the gold "Book a call" CTA on the right side.
   ================================================================= */
.nav-blur .nav-dd-trigger { font-size: .88rem; padding: .2rem 0; letter-spacing: -0.005em; }
.nav-blur nav[aria-label="Primary"] a { font-size: .88rem; }
.nav-dd-trigger[aria-current="true"] { color: #EBB30A; }
.nav-dd-trigger[aria-current="true"]::after { content: "•"; margin-left: .3rem; color: #EBB30A; font-size: 1.1em; line-height: 0; }

.nav-phone {
  display: inline-flex; align-items: center; gap: .5rem;
  color: rgba(255,255,255,0.88);
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem; letter-spacing: .01em;
  padding: .4rem .75rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.02);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  white-space: nowrap;
}
.nav-phone:hover { color: #EBB30A; border-color: rgba(235,179,10,0.5); background: rgba(235,179,10,0.08); }
.nav-phone svg { width: 13px; height: 13px; flex-shrink: 0; }

@media (max-width: 1439px) {
  .nav-phone .num { display: none; }
  .nav-phone { padding: .5rem; }
}

/* =================================================================
   Mobile navigation drawer v2
   Slide in from the right with blurred backdrop, sticky top close
   button, tap to call tile, grouped practice areas, flat resources
   list, sticky bottom Book a call CTA with trust line.
   ================================================================= */
.mobile-backdrop {
  position: fixed; inset: 0;
  background: rgba(4,7,37,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
  z-index: 40;
}
.mobile-backdrop.is-open { opacity: 1; pointer-events: auto; }

.mobile-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(92%, 400px);
  background: linear-gradient(180deg, #040725 0%, #0a0f3a 60%, #040725 100%);
  border-left: 1px solid rgba(235,179,10,0.22);
  box-shadow: -30px 0 80px -20px rgba(0,0,0,0.6);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.65,.2,1);
  z-index: 60;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.mobile-drawer.is-open { transform: translateX(0); }

.md-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.md-close {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent; cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.md-close:hover { color: #EBB30A; background: rgba(235,179,10,0.1); border-color: rgba(235,179,10,0.4); }

.md-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1rem 1rem;
  -webkit-overflow-scrolling: touch;
}

.md-call {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.15rem;
  background: linear-gradient(135deg, rgba(235,179,10,0.15) 0%, rgba(235,179,10,0.05) 100%);
  border: 1px solid rgba(235,179,10,0.4);
  border-radius: 14px;
  color: #fff;
  margin-bottom: 1.25rem;
  transition: border-color .2s ease, transform .2s ease;
}
.md-call:hover { border-color: #F6CE5C; transform: translateY(-1px); }
.md-call-icon {
  flex-shrink: 0; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(235,179,10,0.2);
  color: #F6CE5C;
}
.md-call-icon svg { width: 18px; height: 18px; }
.md-call .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(246,206,92,0.85); font-weight: 700;
}
.md-call .num { font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 700; color: #fff; margin-top: .1rem; }
.md-call .arr { margin-left: auto; color: rgba(255,255,255,0.5); width: 16px; height: 16px; flex-shrink: 0; }

.md-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,0.42); font-weight: 700;
  margin: 1.5rem .25rem .6rem;
  display: flex; align-items: center; gap: .6rem;
}
.md-section-label::after {
  content: ""; flex: 1; height: 1px;
  background: rgba(255,255,255,0.08);
}
.md-section-label:first-child { margin-top: 0; }

.md-dd {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: .4rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.md-dd[open] { background: rgba(235,179,10,0.04); border-color: rgba(235,179,10,0.22); }
.md-dd > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.1rem; cursor: pointer; list-style: none;
  color: rgba(255,255,255,0.9); font-weight: 600; font-size: .96rem;
}
.md-dd > summary::-webkit-details-marker { display: none; }
.md-dd > summary .chev {
  width: 16px; height: 16px;
  color: rgba(255,255,255,0.45);
  transition: transform .25s ease, color .2s ease;
  flex-shrink: 0;
}
.md-dd[open] > summary { color: #F6CE5C; }
.md-dd[open] > summary .chev { transform: rotate(180deg); color: #F6CE5C; }
.md-dd-list {
  padding: .15rem .55rem .9rem;
  display: flex; flex-direction: column;
}
.md-dd-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem .8rem;
  color: rgba(255,255,255,0.72); font-size: .9rem;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.md-dd-list a:hover { background: rgba(235,179,10,0.08); color: #F6CE5C; }
.md-dd-list a[aria-current="page"] { background: rgba(235,179,10,0.1); color: #F6CE5C; font-weight: 700; }
.md-dd-list a[aria-current="page"]::after { content: "•"; color: #EBB30A; margin-left: .4rem; }

.md-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.1rem;
  color: rgba(255,255,255,0.88); font-weight: 600; font-size: .94rem;
  border-radius: 12px;
  border: 1px solid transparent;
  margin-bottom: .25rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.md-link:hover { background: rgba(235,179,10,0.06); color: #F6CE5C; border-color: rgba(235,179,10,0.2); }
.md-link[aria-current="page"] { background: rgba(235,179,10,0.1); color: #F6CE5C; border-color: rgba(235,179,10,0.35); }
.md-link svg { opacity: .4; width: 14px; height: 14px; transition: opacity .15s ease; flex-shrink: 0; }
.md-link:hover svg { opacity: 1; }

.md-foot {
  padding: 1rem 1.25rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(4,7,37,0.7) 0%, rgba(4,7,37,1) 30%);
}
.md-foot .btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%;
  padding: .9rem 1.25rem;
  font-size: .98rem;
  border-radius: 10px;
}
.md-foot-meta {
  text-align: center;
  margin-top: .85rem;
  font-size: .74rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,0.5);
}
.md-foot-meta .stars { color: #F6CE5C; letter-spacing: .08em; margin-right: .35rem; }

body.nav-open { overflow: hidden; }

/* Burger becomes X when drawer open */
#burger.is-open svg:not(.close) { display: none; }
#burger .close { display: none; }
#burger.is-open .close { display: inline-block; }

/* ============ V2 ADDITIONS (new components for SEO / Lead / AI pillars) ============ */

/* Mega menu: promoted tile inside a nav-dd-panel (used for "Try the LTT Calculator") */
.nav-dd-panel.mega { min-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .65rem; }
.nav-dd-feature {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1rem 1.1rem; border-radius: 12px;
  background: linear-gradient(180deg, #040725 0%, #0a0f3a 100%);
  color: #fff; gap: .8rem;
  min-height: 170px;
}
.nav-dd-feature .title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.05rem; color: #F6CE5C; }
.nav-dd-feature .copy { font-size: .84rem; color: rgba(255,255,255,0.72); }
.nav-dd-feature .cta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 700; color: #EBB30A;
}

/* Intent router: 5 tile grid (Buy / Sell / Mortgage / Refinance / Other) */
/* Intent router — bento layout. First tile spans two columns for an
   asymmetric 2026 feel. Each tile carries a numeric coord, a serif label,
   and a mono caption. */
.intent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .75rem;
}
.intent-grid.bento { grid-template-columns: repeat(6, 1fr); }
.intent-grid.bento .intent-tile:nth-child(1) { grid-column: span 3; grid-row: span 2; min-height: 230px; background: linear-gradient(180deg, #040725 0%, #0a0f3a 100%); color: #fff; border-color: rgba(235,179,10,0.3); }
.intent-grid.bento .intent-tile:nth-child(1) .lbl { color: rgba(255,255,255,0.6); }
.intent-grid.bento .intent-tile:nth-child(1) .coord { color: rgba(235,179,10,0.75); }
.intent-grid.bento .intent-tile:nth-child(2) { grid-column: span 3; }
.intent-grid.bento .intent-tile:nth-child(n+3) { grid-column: span 2; }
@media (max-width: 900px) { .intent-grid.bento { grid-template-columns: 1fr; } .intent-grid.bento .intent-tile { grid-column: span 1 !important; grid-row: span 1 !important; min-height: auto; } }

.intent-tile {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.1rem 1.1rem 1rem;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.1);
  border-radius: 10px;
  color: #040725;
  min-height: 140px;
  transition: all .25s ease;
  overflow: hidden;
}
.intent-tile::before {
  content: ""; position: absolute;
  top: 0; right: 0; bottom: 0; width: 3px;
  background: #EBB30A;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .3s ease;
}
.intent-tile:hover { border-color: rgba(235,179,10,0.55); transform: translateY(-2px); }
.intent-tile:hover::before { transform: scaleY(1); }
.intent-tile .coord {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .65rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(4,7,37,0.4); font-weight: 500;
}
.intent-tile .label { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.35rem; line-height: 1.1; margin-top: .5rem; }
.intent-tile .lbl { font-size: .84rem; color: rgba(4,7,37,0.62); margin-top: .3rem; }
.intent-tile .arrow {
  margin-top: .75rem; display: inline-flex; align-items: center; gap: .35rem;
  color: #C49007; font-weight: 700; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase;
}

/* Trust strip — editorial data band with mono labels and ruled separators.
   Default is paper surface; .on-dark variant is the navy card with gold
   hairline + gold numerals used on the landing below the cinematic hero. */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 10px;
  overflow: hidden;
}
.trust-item {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.15rem 1.35rem;
  border-right: 1px solid rgba(4,7,37,0.06);
}
.trust-item:last-child { border-right: 0; }
.trust-item .big { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.5rem; color: #040725; letter-spacing: -0.01em; }
.trust-item .sml { font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace; font-size: .68rem; letter-spacing: .12em; color: rgba(4,7,37,0.55); text-transform: uppercase; }
.trust-stars { color: #EBB30A; font-size: 1rem; letter-spacing: .12em; }
@media (max-width: 640px) { .trust-item { border-right: 0; border-bottom: 1px solid rgba(4,7,37,0.06); } .trust-item:last-child { border-bottom: 0; } }

/* Dark trust strip — navy gradient surface, gold hairline borders inside
   and out, gold-tinted big numerals, white muted labels. Hint of gold,
   not a gold slab. */
.trust-strip.on-dark {
  background: linear-gradient(180deg, #040725 0%, #070d33 100%);
  border: 1px solid rgba(235,179,10,0.3);
}
.trust-strip.on-dark .trust-item {
  border-right: 1px solid rgba(235,179,10,0.12);
}
.trust-strip.on-dark .trust-item:last-child { border-right: 0; }
.trust-strip.on-dark .trust-item .big { color: #F6CE5C; }
.trust-strip.on-dark .trust-item .sml { color: rgba(255,255,255,0.6); }
@media (max-width: 640px) {
  .trust-strip.on-dark .trust-item { border-right: 0; border-bottom: 1px solid rgba(235,179,10,0.12); }
  .trust-strip.on-dark .trust-item:last-child { border-bottom: 0; }
}

/* Quick Answer — flex layout so the Q badge owns its own column. AI
   extraction target on the glossary hero term. */
.quick-answer {
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #FFFBEB 0%, #FBF4D6 100%);
  border: 1px solid rgba(235,179,10,0.35);
  color: #0B0E2B;
}
.quick-answer .qa-badge {
  width: 44px; height: 44px; border-radius: 10px;
  background: #EBB30A; color: #040725;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.quick-answer .qa-content { min-width: 0; }
.quick-answer .qa-label {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: #8B6508; font-weight: 500; margin-bottom: .5rem;
}
.quick-answer p { font-size: 1.02rem; line-height: 1.6; color: #0B0E2B; margin: 0; }
.quick-answer .qa-meta {
  margin-top: .85rem; padding-top: .7rem;
  border-top: 1px solid rgba(235,179,10,0.3);
  font-size: .75rem; color: rgba(11,14,43,0.55);
}

/* Sidebar TOC (sticky on desktop, accordion on mobile) */
.toc {
  position: sticky; top: 96px;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 12px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}
.toc .toc-label { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(4,7,37,0.55); font-weight: 700; margin-bottom: .6rem; }
.toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.toc li a {
  display: block;
  padding: .45rem .6rem; border-radius: 8px;
  color: rgba(4,7,37,0.72); font-size: .87rem;
  border-left: 2px solid transparent;
  transition: all .2s ease;
}
.toc li a:hover { background: rgba(235,179,10,0.08); color: #C49007; border-left-color: #EBB30A; }
.toc li a.is-active { color: #040725; font-weight: 700; border-left-color: #EBB30A; background: rgba(235,179,10,0.08); }
@media (max-width: 1023px) {
  .toc { position: static; max-height: none; }
}

/* Glossary card + glossary index grid */
.glossary-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.glossary-card {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.2rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 14px;
  transition: all .25s ease;
}
.glossary-card:hover { border-color: rgba(235,179,10,0.5); transform: translateY(-2px); }
.glossary-card .term { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.05rem; color: #040725; }
.glossary-card .def { font-size: .88rem; color: rgba(4,7,37,0.7); margin: .4rem 0 .7rem; line-height: 1.5; }
.glossary-card .tag {
  display: inline-block; padding: .15rem .55rem; border-radius: 6px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.glossary-card .tag.individual { background: rgba(235,179,10,0.14); color: #7A5B00; }
.glossary-card .tag.corporate { background: rgba(4,7,37,0.08); color: #040725; }
.glossary-card .tag.both { background: linear-gradient(90deg, rgba(235,179,10,0.14), rgba(4,7,37,0.08)); color: #040725; }

.glossary-search {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.25rem;
  background: #fff;
  border: 2px solid rgba(4,7,37,0.1);
  border-radius: 999px;
  transition: all .2s ease;
}
.glossary-search:focus-within { border-color: #EBB30A; box-shadow: 0 0 0 4px rgba(235,179,10,0.18); }
.glossary-search input { flex: 1; border: 0; outline: none; font-size: 1rem; background: transparent; }

/* Alphabet anchor strip */
.alpha-strip {
  display: flex; flex-wrap: wrap; gap: .35rem;
  padding: .65rem;
  background: rgba(4,7,37,0.03);
  border-radius: 12px;
}
.alpha-strip a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: .85rem;
  color: #040725; background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  transition: all .15s ease;
}
.alpha-strip a:hover,
.alpha-strip a.has-terms:hover { background: #EBB30A; color: #040725; border-color: #EBB30A; }
.alpha-strip a.empty { opacity: .35; pointer-events: none; }

/* Reviews wall */
.reviews-wall {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.review-card {
  padding: 1.25rem;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 12px;
}
.review-card .stars { color: #EBB30A; letter-spacing: .1em; margin-bottom: .5rem; }
.review-card blockquote { font-size: .95rem; line-height: 1.55; color: rgba(4,7,37,0.82); margin: 0; }
.review-card .meta { margin-top: .9rem; display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: rgba(4,7,37,0.55); }
.review-card .meta .name { font-weight: 700; color: #040725; }

/* Office card */
.office-card {
  padding: 1.5rem;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: .85rem;
}
.office-card .city { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.25rem; color: #040725; }
.office-card .addr { font-size: .9rem; color: rgba(4,7,37,0.75); line-height: 1.5; }
.office-card .row { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: #040725; font-weight: 600; }
.office-card .map-thumb { border-radius: 12px; aspect-ratio: 16 / 9; overflow: hidden; background: #eef0f5; }
.office-card .map-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Lawyer credential card (compact and full) */
.lawyer-card {
  display: flex; gap: 1rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 12px;
  transition: all .25s ease;
}
.lawyer-card:hover { border-color: rgba(235,179,10,0.45); }
.lawyer-card .avatar {
  width: 72px; height: 72px; border-radius: 14px; overflow: hidden; flex: 0 0 72px;
  background: #0b0e2b;
}
.lawyer-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.lawyer-card .name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.05rem; color: #040725; }
.lawyer-card .title { font-size: .82rem; color: rgba(4,7,37,0.65); margin-top: .1rem; }
.lawyer-card .creds { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.lawyer-card .creds .badge {
  font-size: .68rem; letter-spacing: .05em; padding: .15rem .5rem; border-radius: 6px;
  background: rgba(4,7,37,0.06); color: #040725; font-weight: 700;
}
.lawyer-card.full { flex-direction: column; padding: 1.5rem; }
.lawyer-card.full .avatar { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 16px; flex: unset; }

/* Sticky right rail booking widget (desktop only) */
.right-rail {
  position: sticky; top: 96px;
  padding: 1.5rem;
  background: linear-gradient(180deg, #040725 0%, #0a0f3a 100%);
  border: 1px solid rgba(235,179,10,0.25);
  border-radius: 14px;
  color: #fff;
}
.right-rail .rail-eyebrow { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #F6CE5C; font-weight: 700; margin-bottom: .5rem; }
.right-rail h3 { font-family: 'Cinzel', serif; font-size: 1.25rem; margin-bottom: .75rem; color: #fff; }
.right-rail .rail-stats { margin: 1rem 0; display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; color: rgba(255,255,255,0.75); }

/* Lead magnet — editorial book-jacket layout.
   Cover has real visual weight: jurisdiction stripe, title, year, pagination.
   Body shows format, length, file size, and a single sharp CTA. */
.lead-magnet {
  display: grid; grid-template-columns: 170px 1fr; gap: 1.5rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 14px;
  color: #040725;
  transition: border-color .25s ease, transform .25s ease;
}
.lead-magnet:hover { border-color: rgba(235,179,10,0.5); transform: translateY(-2px); }
.lm-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, #0a0f3a 0%, #040725 100%);
  border-radius: 6px;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 1rem .9rem;
  color: #F6CE5C;
  box-shadow: 0 20px 30px -18px rgba(4,7,37,0.5);
}
.lm-cover::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(235,179,10,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(235,179,10,0.05) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
}
.lm-cover .lm-stripe {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: #EBB30A; font-weight: 500;
}
.lm-cover .lm-cover-title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: .92rem; line-height: 1.15;
  color: #F6CE5C;
  margin-top: .85rem;
  position: relative;
}
.lm-cover .lm-cover-foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: flex-end;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .62rem; letter-spacing: .12em;
  color: rgba(235,179,10,0.75);
  position: relative;
  padding-top: .65rem;
  border-top: 1px solid rgba(235,179,10,0.3);
}
.lm-cover .lm-cover-year {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.1rem;
  color: #EBB30A; letter-spacing: 0;
}
.lm-body { display: flex; flex-direction: column; gap: .35rem; }
.lm-body .lm-eyebrow {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
  color: #C49007; font-weight: 500;
}
.lm-body .lm-title {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.2rem; line-height: 1.2;
  color: #040725; margin: .2rem 0 .15rem;
}
.lm-body .lm-desc { font-size: .9rem; color: rgba(4,7,37,0.7); line-height: 1.5; }
.lm-body .lm-meta {
  margin-top: .4rem; font-size: .7rem; letter-spacing: .04em;
  color: rgba(4,7,37,0.5);
  display: flex; gap: .65rem; flex-wrap: wrap;
}
.lm-body .lm-meta span + span::before {
  content: "·"; margin-right: .65rem; color: rgba(4,7,37,0.3);
}
.lm-body .lm-cta { margin-top: .85rem; align-self: flex-start; }
@media (max-width: 640px) { .lead-magnet { grid-template-columns: 1fr; } .lm-cover { max-width: 220px; } }

/* Audience toggle (segmented control) */
.audience-toggle {
  display: inline-flex; padding: .3rem;
  background: rgba(4,7,37,0.06);
  border-radius: 999px;
  gap: .2rem;
}
.audience-toggle label {
  position: relative; cursor: pointer;
  padding: .55rem 1rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600; color: rgba(4,7,37,0.65);
  transition: all .2s ease;
}
.audience-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.audience-toggle input:checked + span,
.audience-toggle label.is-active { color: #040725; }
.audience-toggle label:has(input:checked) { background: #EBB30A; color: #040725; }

/* Corporate considerations expandable (distinct from plain FAQ) */
details.corp-expandable {
  background: linear-gradient(180deg, #0a0f3a 0%, #040725 100%);
  border: 1px solid rgba(235,179,10,0.2);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  color: #E8E9F4;
}
details.corp-expandable > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
details.corp-expandable > summary::-webkit-details-marker { display: none; }
details.corp-expandable .corp-label {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: #F6CE5C; font-weight: 700;
}
details.corp-expandable .corp-label::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px; background: #EBB30A;
}
details.corp-expandable h3 { font-family: 'Cinzel', serif; font-size: 1.15rem; color: #fff; margin-top: .25rem; }
details.corp-expandable .chev {
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(235,179,10,0.18); color: #F6CE5C;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease;
}
details.corp-expandable[open] .chev { transform: rotate(180deg); }
details.corp-expandable .body { margin-top: 1rem; color: rgba(232,233,244,0.85); line-height: 1.6; font-size: .95rem; }

/* Magazine-style featured post (blog index hero) */
.mag-hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center;
}
.mag-hero .mag-image { aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #0b0e2b; }
.mag-hero .mag-eyebrow { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #C49007; font-weight: 700; }
.mag-hero .mag-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.6rem; line-height: 1.2; color: #040725; margin: .5rem 0 .85rem; }
.mag-hero .mag-excerpt { font-size: 1rem; color: rgba(4,7,37,0.72); line-height: 1.55; }
.mag-hero .mag-meta { margin-top: 1rem; display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: rgba(4,7,37,0.6); }
@media (max-width: 900px) { .mag-hero { grid-template-columns: 1fr; gap: 1.25rem; } .mag-hero .mag-title { font-size: 1.55rem; } }

/* Blog post card (index grid) */
.post-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(4,7,37,0.08);
  border-radius: 12px; overflow: hidden;
  transition: all .25s ease;
}
.post-card:hover { transform: translateY(-3px); border-color: rgba(235,179,10,0.4); }
.post-card .thumb { aspect-ratio: 16 / 10; background: #0b0e2b; }
.post-card .body { padding: 1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .4rem; }
.post-card .eyebrow { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: #C49007; font-weight: 700; }
.post-card .title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.05rem; color: #040725; line-height: 1.3; }
.post-card .excerpt { font-size: .85rem; color: rgba(4,7,37,0.7); }
.post-card .meta { margin-top: .4rem; font-size: .75rem; color: rgba(4,7,37,0.55); }

/* LTT Calculator — big tool card variant (Calculator standalone page hero) */
.calc-hero {
  padding: 1.75rem;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 14px;
  box-shadow: 0 30px 60px -28px rgba(4,7,37,0.25);
}
.calc-result {
  padding: 1.25rem 1.5rem;
  background: linear-gradient(180deg, #040725 0%, #0a0f3a 100%);
  border-radius: 14px; color: #fff;
  display: grid; gap: .4rem;
}
.calc-result .big {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 2.25rem; color: #F6CE5C; line-height: 1;
}
.calc-result .breakdown { font-size: .85rem; color: rgba(255,255,255,0.7); line-height: 1.55; }
.calc-result .breakdown .row { display: flex; justify-content: space-between; padding: .2rem 0; }
.calc-result .breakdown .row.sub { border-top: 1px solid rgba(255,255,255,0.12); padding-top: .55rem; margin-top: .35rem; }

/* Data-led hero band (Corporate clients) */
.data-hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(235,179,10,0.28);
  border-radius: 12px;
  overflow: hidden;
}
.data-hero .cell {
  text-align: left;
  padding: 1.4rem 1.5rem;
  border-right: 1px solid rgba(235,179,10,0.2);
}
.data-hero .cell:last-child { border-right: 0; }
.data-hero .cell .big { font-family: 'Cinzel', serif; font-weight: 700; font-size: 2.5rem; color: #F6CE5C; line-height: 1; letter-spacing: -0.02em; }
.data-hero .cell .lbl { font-size: .68rem; color: rgba(255,255,255,0.62); margin-top: .5rem; letter-spacing: .14em; text-transform: uppercase; }
.data-hero.on-light .cell .big { color: #040725; }
.data-hero.on-light .cell .lbl { color: rgba(4,7,37,0.55); }
@media (max-width: 900px) { .data-hero .cell { border-right: 0; border-bottom: 1px solid rgba(235,179,10,0.2); } .data-hero .cell:last-child { border-bottom: 0; } }

/* Pull quote (blog detail) */
.pull-quote {
  border-left: 4px solid #EBB30A;
  padding: .5rem 0 .5rem 1.5rem;
  font-family: 'Cinzel', serif;
  font-style: italic; font-size: 1.35rem;
  color: #040725; line-height: 1.35;
}
.pull-quote .attr { display: block; margin-top: .65rem; font-family: 'Lato', sans-serif; font-style: normal; font-size: .85rem; color: rgba(4,7,37,0.55); letter-spacing: .04em; }

/* Inline auto linked glossary mark (blog detail) */
.glossary-link {
  color: #040725; text-decoration: none;
  border-bottom: 1px dotted rgba(235,179,10,0.75);
  cursor: help;
  transition: all .2s ease;
}
.glossary-link:hover { color: #C49007; border-bottom-style: solid; }

/* Breadcrumb trail */
.breadcrumbs {
  display: flex; flex-wrap: wrap; gap: .35rem;
  font-size: .78rem; color: rgba(4,7,37,0.55);
}
.breadcrumbs a { color: rgba(4,7,37,0.7); }
.breadcrumbs a:hover { color: #C49007; }
.breadcrumbs .sep { color: rgba(4,7,37,0.3); }

/* Dark-variant breadcrumbs for hero bands */
.breadcrumbs.on-dark { color: rgba(255,255,255,0.6); }
.breadcrumbs.on-dark a { color: rgba(255,255,255,0.75); }
.breadcrumbs.on-dark a:hover { color: #F6CE5C; }
.breadcrumbs.on-dark .sep { color: rgba(255,255,255,0.3); }

/* Section headline pattern used across pages */
.section-head { display: flex; flex-direction: column; gap: .5rem; max-width: 720px; }
.section-head h2 { font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 700; color: #040725; line-height: 1.15; }
.section-head p { color: rgba(4,7,37,0.7); font-size: 1.02rem; line-height: 1.55; }

/* Process timeline (vertical variant used on service pages) */
.process-v { display: flex; flex-direction: column; gap: 1.25rem; position: relative; padding-left: 2.5rem; }
.process-v::before {
  content: ""; position: absolute; left: 1rem; top: .5rem; bottom: .5rem; width: 2px;
  background: linear-gradient(180deg, #EBB30A, rgba(235,179,10,0.15));
}
.process-v .pv-node { position: relative; }
.process-v .pv-dot {
  position: absolute; left: -2.5rem; top: 0;
  width: 32px; height: 32px; border-radius: 999px;
  background: #EBB30A; color: #040725;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #040725;
}

/* Text body for long article pages (glossary, blog detail) */
.prose-lawyer { max-width: 720px; color: rgba(4,7,37,0.85); font-size: 1.02rem; line-height: 1.65; }
.prose-lawyer h2 { font-family: 'Cinzel', serif; font-size: 1.65rem; color: #040725; margin: 2rem 0 .85rem; }
.prose-lawyer h3 { font-family: 'Cinzel', serif; font-size: 1.25rem; color: #040725; margin: 1.5rem 0 .6rem; }
.prose-lawyer p { margin-bottom: 1rem; }
.prose-lawyer ul { margin: .75rem 0 1rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.prose-lawyer li { list-style: disc; }
.prose-lawyer table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.prose-lawyer th, .prose-lawyer td { padding: .65rem .85rem; border: 1px solid rgba(4,7,37,0.1); text-align: left; }
.prose-lawyer th { background: rgba(4,7,37,0.04); font-weight: 700; color: #040725; }
.prose-lawyer .callout { padding: 1rem 1.25rem; background: rgba(235,179,10,0.08); border-left: 3px solid #EBB30A; border-radius: 8px; margin: 1rem 0; }
.prose-lawyer a { color: #C49007; border-bottom: 1px solid rgba(235,179,10,0.4); }
.prose-lawyer a:hover { border-bottom-color: #C49007; }

/* Final CTA panel — dark navy hero wrap, gold rule above title, three
   contact modality cards (Call / Email / Get a quote). Used as the closing
   section on every service page and on the landing. */
.final-cta {
  background: linear-gradient(180deg, #040725 0%, #070d33 100%);
  border-radius: 14px;
  padding: 4rem 2rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(235,179,10,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(235,179,10,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 20%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 0%, transparent 70%);
  pointer-events: none;
}
.final-cta > * { position: relative; }
.final-cta .fc-rule {
  display: inline-flex; align-items: center; gap: 1rem;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: #F6CE5C; font-weight: 500;
  margin-bottom: 1.5rem;
}
.final-cta .fc-rule::before,
.final-cta .fc-rule::after {
  content: ""; width: 40px; height: 1px; background: rgba(235,179,10,0.6);
}
.final-cta h2 {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 2.5rem; line-height: 1.15; color: #fff;
  max-width: 24ch; margin: 0 auto 1rem;
}
.final-cta h2 .gold-text { display: inline; }
.final-cta .fc-sub { max-width: 48ch; margin: 0 auto 3rem; color: rgba(255,255,255,0.65); font-size: 1rem; line-height: 1.6; }
.final-cta .fc-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  max-width: 900px; margin: 0 auto;
}
.final-cta .fc-foot {
  margin-top: 2rem;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .72rem; letter-spacing: .14em; color: rgba(255,255,255,0.55);
}
@media (max-width: 640px) { .final-cta { padding: 3rem 1.25rem; } .final-cta h2 { font-size: 1.85rem; } }

/* Consideration grid — numbered "things buyers don't know" cards, matching
   V1 pattern. Explicit 3-column desktop grid inside a warm cream section
   band. Cards use V1 .card-elev with a text-3xl gold serif numeral on top.
   .flag highlights a hot-topic card with a gold ring. */
.consideration-band { background: transparent; padding: 0; }
.consideration-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
  margin-top: 3rem;
}
@media (min-width: 768px) { .consideration-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .consideration-grid { grid-template-columns: repeat(3, 1fr); } }

.consideration-card { padding: 1.5rem; }
.consideration-card .cc-num {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.9rem; color: #C49007; line-height: 1;
}
.consideration-card .cc-title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.15rem; color: #040725;
  margin-top: .85rem;
  line-height: 1.25;
}
.consideration-card .cc-copy {
  font-size: .9rem; line-height: 1.55;
  color: rgba(4,7,37,0.65); margin-top: .55rem;
}
.consideration-card.flag {
  border-color: rgba(235,179,10,0.4);
  box-shadow: 0 0 0 1px rgba(235,179,10,0.2);
}

/* Service row — "Other transactions we handle" carousel style.
   Horizontally scrolls on small screens, 4 columns desktop. Each card has
   a serif title, short copy, and a "From $XXX" price with arrow. */
.service-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.service-card {
  padding: 1.5rem 1.5rem 1.65rem;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: .75rem;
  transition: all .25s ease;
  min-height: 200px;
}
.service-card:hover { border-color: rgba(235,179,10,0.55); transform: translateY(-3px); }
.service-card.active { border-color: rgba(235,179,10,0.55); box-shadow: 0 0 0 3px rgba(235,179,10,0.12); }
.service-card .sc-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.2rem; color: #040725; letter-spacing: -0.005em; }
.service-card .sc-copy { font-size: .88rem; line-height: 1.5; color: rgba(4,7,37,0.66); flex: 1; }
.service-card .sc-price {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 1rem;
  color: #C49007;
}
.service-card .sc-price .arrow { transition: transform .2s ease; }
.service-card:hover .sc-price .arrow { transform: translateX(3px); }

/* Side by side comparison — two cards, one highlighted as recommended.
   Pair with .compare-card.dark for the alternative option. */
.compare-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}
.compare-card {
  padding: 1.75rem;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: .85rem;
}
.compare-card.recommended { border-color: rgba(235,179,10,0.5); box-shadow: 0 0 0 3px rgba(235,179,10,0.14); }
.compare-card.dark {
  background: linear-gradient(180deg, #0a0f3a 0%, #040725 100%);
  border-color: rgba(235,179,10,0.2);
  color: #E8E9F4;
}
.compare-card .cmp-eyebrow {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: #C49007; font-weight: 500;
}
.compare-card.dark .cmp-eyebrow { color: #F6CE5C; }
.compare-card .cmp-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.35rem; color: #040725; line-height: 1.15; }
.compare-card.dark .cmp-title { color: #fff; }
.compare-card .cmp-copy { font-size: .92rem; color: rgba(4,7,37,0.68); line-height: 1.55; }
.compare-card.dark .cmp-copy { color: rgba(255,255,255,0.72); }
.compare-card ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .9rem; }
.compare-card ul li { display: flex; gap: .65rem; align-items: flex-start; }
.compare-card ul li::before { content: "●"; color: #EBB30A; font-size: .9rem; line-height: 1.4; flex-shrink: 0; }
.compare-card .cmp-more {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .85rem; font-weight: 700; color: #C49007;
  margin-top: .5rem;
}
.compare-card.dark .cmp-more { color: #F6CE5C; }

/* Comparison table — capability rows, yes / no cells, one column highlighted
   as the recommended option. Used on PoA style comparisons. */
.compare-table {
  width: 100%; border-collapse: collapse; font-size: .92rem;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 12px;
  overflow: hidden;
}
.compare-table thead th {
  background: #040725; color: #fff;
  font-family: 'Cinzel', serif; font-weight: 600; font-size: .95rem;
  text-align: left;
  padding: .95rem 1.1rem;
}
.compare-table thead th.khan { background: #C48C05; color: #040725; }
.compare-table tbody td { padding: .85rem 1.1rem; border-bottom: 1px solid rgba(4,7,37,0.06); }
.compare-table tbody tr:nth-child(even) td { background: rgba(4,7,37,0.02); }
.compare-table tbody tr:nth-child(even) td.khan { background: rgba(235,179,10,0.06); }
.compare-table tbody td:first-child { font-weight: 700; color: #040725; }
.compare-table tbody td.khan { background: #FBF4D6; color: #040725; }
.compare-table .cell-yes { color: #2E7D32; font-weight: 700; }
.compare-table .cell-no { color: #B22222; font-weight: 700; }

/* Where we practice — city link grid, pairs with V1 .city-link */
.city-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .65rem;
}

/* Strategies grid — 2x3 outcome-led card grid used on estate planning, wills,
   and any page that lists strategies with a measurable outcome. Each card
   ends in a mono uppercase outcome tag separated by a hairline. */
.strategies-grid {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  margin-top: 3rem;
}
@media (min-width: 768px) { .strategies-grid { grid-template-columns: repeat(2, 1fr); } }

.strategy-card {
  padding: 1.75rem;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: .95rem;
  transition: all .25s ease;
}
.strategy-card:hover { border-color: rgba(235,179,10,0.45); transform: translateY(-2px); }
.strategy-card.flag {
  border-color: rgba(235,179,10,0.45);
  box-shadow: 0 0 0 1px rgba(235,179,10,0.25);
}
.strategy-card .st-head { display: flex; align-items: baseline; gap: 1rem; }
.strategy-card .st-num {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.85rem; color: #C49007; line-height: 1;
}
.strategy-card .st-title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.1rem; color: #040725; line-height: 1.2;
}
.strategy-card .st-copy {
  font-size: .92rem; line-height: 1.6;
  color: rgba(4,7,37,0.7); flex: 1;
}
.strategy-card .st-copy em { font-style: italic; }
.strategy-card .st-outcome {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: #C49007; font-weight: 500;
  padding-top: .85rem;
  border-top: 1px solid rgba(4,7,37,0.08);
}

/* Process list — four-step numbered card used on service pages to describe
   the work sequence. Single containing card with gold circle numerals on
   the left of each step. */
.process-list {
  padding: 2rem;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 1.75rem;
}
.process-step { display: grid; grid-template-columns: 48px 1fr; gap: 1.25rem; align-items: start; }
.process-step .ps-num {
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(235,179,10,0.14);
  color: #C49007;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 1rem;
  flex-shrink: 0;
}
.process-step .ps-title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.1rem; color: #040725;
}
.process-step .ps-copy {
  font-size: .92rem; color: rgba(4,7,37,0.68);
  line-height: 1.55; margin-top: .4rem;
}

/* Corporate strategies — 4-card row with icon on top for pages that present
   corporate / business client considerations. Pairs with .corp-pricing
   dark pricing panel placed directly below. */
.corp-strategies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}
.corp-card {
  padding: 1.5rem;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: .85rem;
  min-height: 260px;
  transition: all .25s ease;
}
.corp-card:hover { transform: translateY(-2px); border-color: rgba(235,179,10,0.4); }
.corp-card.flag { box-shadow: 0 0 0 1px rgba(235,179,10,0.35); border-color: rgba(235,179,10,0.5); }
.corp-card .cp-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(235,179,10,0.14); color: #C49007;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.corp-card .cp-title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.05rem; color: #040725; line-height: 1.2;
}
.corp-card .cp-copy {
  font-size: .88rem; line-height: 1.55;
  color: rgba(4,7,37,0.66); flex: 1;
}

.corp-pricing {
  margin-top: 1.25rem;
  background: linear-gradient(180deg, #0a0f3a 0%, #040725 100%);
  border: 1px solid rgba(235,179,10,0.2);
  border-radius: 14px;
  padding: 2.5rem;
  display: grid; grid-template-columns: 1fr auto;
  gap: 2.5rem;
  align-items: center;
  color: #E8E9F4;
}
@media (max-width: 900px) { .corp-pricing { grid-template-columns: 1fr; gap: 1.5rem; } }
.corp-pricing .cp-label {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: #F6CE5C; font-weight: 500;
}
.corp-pricing .cp-headline {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.7rem; color: #fff;
  margin-top: .5rem; line-height: 1.2;
}
.corp-pricing p { margin-top: .85rem; color: rgba(255,255,255,0.72); font-size: .92rem; line-height: 1.55; }
.corp-pricing p strong { color: #F6CE5C; font-weight: 700; }
.corp-pricing ul { margin-top: 1.15rem; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .55rem; }
.corp-pricing ul li {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .88rem; color: rgba(255,255,255,0.8);
}
.corp-pricing ul li::before { content: "●"; color: #EBB30A; line-height: 1.2; }

/* Reviews showcase — asymmetric layout. Left column has intro heading, big
   rating chip, Google link. Right column has a featured large review. A
   3-card grid follows below for three shorter testimonials. */
.reviews-showcase {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  align-items: start;
}
@media (min-width: 900px) { .reviews-showcase { grid-template-columns: 1fr 1.4fr; gap: 3rem; } }

.rating-chip { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0 .5rem; }
.rating-chip .stars { color: #EBB30A; font-size: 1.15rem; letter-spacing: .15em; }
.rating-chip .score {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.75rem; color: #040725; line-height: 1;
}
.rating-chip .score sub {
  font-family: 'Lato', sans-serif; font-size: .8rem;
  color: rgba(4,7,37,0.5); font-weight: 400;
}
.rating-chip .caption { font-size: .82rem; color: rgba(4,7,37,0.6); }

.review-featured {
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 14px;
  padding: 2rem;
  position: relative;
}
.review-featured .rf-mark {
  font-family: 'Cinzel', serif;
  font-size: 3rem; line-height: .5;
  color: #EBB30A; display: inline-block;
  margin-bottom: 1rem;
}
.review-featured blockquote {
  font-family: 'Cinzel', serif; font-weight: 500;
  font-size: 1.2rem; line-height: 1.45; color: #040725;
  margin: 0 0 1.5rem;
}
.review-featured .rf-author { display: flex; align-items: center; gap: .85rem; }
.review-featured .rf-avatar {
  width: 44px; height: 44px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(135deg, #F5EFD9 0%, #EADFB9 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: .85rem; color: #7A5B00;
  flex-shrink: 0;
}
.review-featured .rf-avatar.checker::before {
  content: ""; position: absolute;
  width: 44px; height: 44px; border-radius: 999px;
  background-image:
    linear-gradient(45deg, rgba(4,7,37,0.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(4,7,37,0.06) 25%, transparent 25%);
  background-size: 8px 8px;
}
.review-featured .rf-name { font-weight: 700; color: #040725; font-size: .95rem; }
.review-featured .rf-meta { font-size: .78rem; color: rgba(4,7,37,0.55); margin-top: .15rem; }

/* History / about timeline — year-led chronological milestones.
   Used on the About Us page and the "Where we came from" section. */
.history-timeline { position: relative; display: flex; flex-direction: column; gap: 0; }
.history-timeline::before {
  content: ""; position: absolute; left: 140px; top: .5rem; bottom: .5rem;
  width: 1px; background: rgba(4,7,37,0.12);
}
.history-timeline .ht-row {
  display: grid; grid-template-columns: 140px 1fr; gap: 2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(4,7,37,0.08);
  position: relative;
}
.history-timeline .ht-row:last-child { border-bottom: 0; }
.history-timeline .ht-year {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.85rem; color: #040725; line-height: 1; letter-spacing: -0.01em;
  text-align: left;
}
.history-timeline .ht-year-sub {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(4,7,37,0.5); font-weight: 500; margin-top: .35rem;
}
.history-timeline .ht-row::before {
  content: ""; position: absolute;
  left: 134px; top: 1.5rem;
  width: 13px; height: 13px; border-radius: 999px;
  background: #EBB30A; border: 2px solid #FBFBF8;
  box-shadow: 0 0 0 1px rgba(235,179,10,0.5);
  z-index: 1;
}
.history-timeline .ht-body { padding-left: 1.5rem; padding-right: 0; min-width: 0; }
.history-timeline .ht-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.15rem; color: #040725; }
.history-timeline .ht-copy { font-size: .95rem; color: rgba(4,7,37,0.68); line-height: 1.55; margin-top: .3rem; }
.history-timeline .ht-meta {
  margin-top: .55rem;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .68rem; letter-spacing: .12em;
  color: rgba(4,7,37,0.5); text-transform: uppercase;
}
@media (max-width: 700px) {
  .history-timeline::before { left: 9px; }
  .history-timeline .ht-row { grid-template-columns: 1fr; gap: .25rem; padding-left: 2rem; }
  .history-timeline .ht-row::before { left: 0; top: 1.55rem; }
  .history-timeline .ht-body { padding-left: 0; }
}

/* Lawyer note — portrait + credential tab + signed note from the lawyer.
   Mirrors the V1 "Meet your lawyer" section pattern. */
.lawyer-note {
  display: grid; grid-template-columns: 360px 1fr; gap: 3rem;
  align-items: start;
}
.lawyer-note .ln-portrait {
  position: relative;
}
.lawyer-note .ln-portrait .img-frame { aspect-ratio: 4/5; border-radius: 12px; }
.lawyer-note .ln-credential {
  position: absolute; bottom: -18px; left: -18px;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 10px;
  padding: .85rem 1.1rem;
  box-shadow: 0 18px 30px -20px rgba(4,7,37,0.25);
  min-width: 200px;
}
.lawyer-note .ln-credential .ln-eyebrow {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: #C49007; font-weight: 500;
}
.lawyer-note .ln-credential .ln-year {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.7rem;
  color: #040725; line-height: 1; margin-top: .3rem;
}
.lawyer-note .ln-credential .ln-sub {
  font-size: .72rem; color: rgba(4,7,37,0.55); margin-top: .3rem;
}
.lawyer-note .ln-body p { font-size: 1.02rem; color: rgba(4,7,37,0.82); line-height: 1.65; margin-bottom: 1rem; }
.lawyer-note .ln-signoff { margin-top: 1.25rem; }
.lawyer-note .ln-signoff .ln-attr { margin-top: .65rem; font-size: .85rem; color: rgba(4,7,37,0.6); }
.lawyer-note .ln-chips { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem; }
@media (max-width: 900px) { .lawyer-note { grid-template-columns: 1fr; gap: 2rem; } .lawyer-note .ln-credential { position: static; margin-top: 1rem; } }

/* Footer — floating navy card matching the header pill + hero card.
   Outer wrapper is transparent, inner max-w-7xl container is the visible
   card with rounded corners, gold hairline, and a soft shadow. */
.site-footer {
  background: transparent;
  color: rgba(255,255,255,0.68);
  padding: 0 1.25rem 1.25rem;
}
@media (min-width: 768px) { .site-footer { padding: 0 2rem 2rem; } }
.site-footer > div:first-child {
  background: #03051c;
  border: 1px solid rgba(235,179,10,0.22);
  border-radius: 14px;
  padding: 3.5rem 2rem 2rem;
  box-shadow: 0 -16px 40px -16px rgba(4,7,37,0.25), 0 2px 6px -2px rgba(4,7,37,0.2);
}
@media (min-width: 768px) { .site-footer > div:first-child { padding: 4rem 3rem 2.5rem; } }
.site-footer .ft-logo { filter: none; }
.site-footer .ft-title { color: #fff; font-family: 'Cinzel', serif; font-weight: 700; font-size: 1rem; margin-bottom: 1rem; }
.site-footer a { color: inherit; transition: color .2s ease; }
.site-footer a:hover { color: #EBB30A; }
.site-footer .ft-social {
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; color: rgba(255,255,255,0.8);
}
.site-footer .ft-social:hover { border-color: rgba(235,179,10,0.5); color: #F6CE5C; background: rgba(235,179,10,0.05); }
.site-footer .ft-disclaimer {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: .78rem; color: rgba(255,255,255,0.45); line-height: 1.65;
}
.site-footer .ft-bottom {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column; gap: .75rem;
  font-size: .75rem; color: rgba(255,255,255,0.5);
}
@media (min-width: 768px) { .site-footer .ft-bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
.site-footer .ft-bottom-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ============ HERO PATTERNS (seven reusable variants) ============ */

/* Shared: every hero variant uses these for consistent vertical rhythm. */
.hero-pattern { position: relative; overflow: hidden; }
.hero-pattern .hp-eyebrow {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: #C49007; font-weight: 500;
  display: inline-flex; align-items: center; gap: .65rem;
}
.hero-pattern .hp-eyebrow::before { content: ""; width: 28px; height: 1px; background: #EBB30A; }
.hero-pattern.on-dark .hp-eyebrow { color: #F6CE5C; }
.hero-pattern.on-dark .hp-eyebrow::before { background: rgba(235,179,10,0.7); }
.hero-pattern .hp-h1 {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  line-height: 1.1; letter-spacing: -0.01em;
  color: #040725;
}
.hero-pattern.on-dark .hp-h1 { color: #fff; }
.hero-pattern .hp-sub { font-size: 1.08rem; line-height: 1.55; color: rgba(4,7,37,0.68); max-width: 42rem; }
.hero-pattern.on-dark .hp-sub { color: rgba(255,255,255,0.72); }
.hero-pattern .hp-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-pattern .hp-meta {
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(4,7,37,0.55);
}
.hero-pattern.on-dark .hp-meta { color: rgba(255,255,255,0.6); }
.hero-pattern .hp-meta .stars { color: #EBB30A; letter-spacing: .1em; }

/* 1. Centered Statement — editorial homepage pattern. Mono eyebrow,
   large Cinzel statement centred, narrow supporting line, two CTA row,
   trust line below. Paper background. */
.hero-centered { padding: 3.5rem 0 3rem; text-align: center; }
.hero-centered .hp-eyebrow { justify-content: center; }
.hero-centered .hp-eyebrow::before,
.hero-centered .hp-eyebrow::after { content: ""; width: 28px; height: 1px; background: #EBB30A; }
.hero-centered .hp-h1 { margin: 1rem auto .85rem; max-width: 22ch; }
.hero-centered .hp-sub { margin: 0 auto; }
.hero-centered .hp-actions { justify-content: center; margin-top: 1.75rem; }
.hero-centered .hp-meta { justify-content: center; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(4,7,37,0.08); max-width: 42rem; margin-left: auto; margin-right: auto; }

/* 2. Split Asymmetric — copy left, visual right with floating credential.
   Service pages, lawyer bios. */
.hero-split {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem;
  align-items: center;
  padding: 2.5rem 0;
}
@media (min-width: 900px) { .hero-split { grid-template-columns: 6fr 5fr; gap: 3.5rem; } }
.hero-split .hs-copy > * + * { margin-top: 1.25rem; }
.hero-split .hs-visual { position: relative; }
.hero-split .hs-visual .img-frame { aspect-ratio: 4 / 5; border-radius: 12px; }
.hero-split .hs-badge {
  position: absolute; bottom: -16px; left: -16px;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 10px;
  padding: .85rem 1.1rem;
  box-shadow: 0 18px 30px -20px rgba(4,7,37,0.25);
  min-width: 190px;
}
.hero-split .hs-badge .hb-label {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: #C49007; font-weight: 500;
}
.hero-split .hs-badge .hb-big {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.5rem; color: #040725; line-height: 1; margin-top: .3rem;
}
.hero-split .hs-badge .hb-sub { font-size: .72rem; color: rgba(4,7,37,0.55); margin-top: .3rem; }

/* 3. Dark Panel — full-bleed navy with grid-paper mask, high-impact for
   landing alternates or corporate hero. */
.hero-dark {
  background: linear-gradient(180deg, #03051c 0%, #050929 55%, #070d33 100%);
  padding: 4rem 0 4.25rem;
  color: #fff;
  border-radius: 14px;
}
.hero-dark::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(235,179,10,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(235,179,10,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 72%);
  pointer-events: none;
}
.hero-dark > * { position: relative; }
.hero-dark .hp-h1 { max-width: 24ch; }

/* 4. Data Forward — copy left, stats grid right baked into the hero.
   Corporate clients, lawyer bio, any proof-first page. */
.hero-data {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem;
  padding: 2.5rem 0;
  align-items: center;
}
@media (min-width: 900px) { .hero-data { grid-template-columns: 6fr 5fr; gap: 3rem; } }
.hero-data .hd-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid rgba(4,7,37,0.1);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.hero-data .hd-stat {
  padding: 1.35rem 1.45rem;
  border-right: 1px solid rgba(4,7,37,0.08);
  border-bottom: 1px solid rgba(4,7,37,0.08);
}
.hero-data .hd-stat:nth-child(2n) { border-right: 0; }
.hero-data .hd-stat:nth-child(n+3) { border-bottom: 0; }
.hero-data .hd-big {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.75rem; color: #040725; line-height: 1; letter-spacing: -0.01em;
}
.hero-data .hd-lbl {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(4,7,37,0.55); margin-top: .55rem;
}

/* 5. Tool First — compact text above, interactive surface dominates.
   Calculator and hub pages. */
.hero-tool {
  display: grid; gap: 1.75rem;
  padding: 2rem 0 2.5rem;
}
.hero-tool .ht-intro { display: flex; flex-direction: column; gap: 1rem; max-width: 48rem; }
.hero-tool .ht-intro .hp-h1 { font-size: clamp(1.65rem, 2.75vw, 2.25rem); }
.hero-tool .ht-slot {
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 20px 40px -24px rgba(4,7,37,0.18);
}

/* 6. Minimal Article — clean breadcrumbs plus H1 plus one line.
   Glossary terms, blog detail, any content surface. */
.hero-minimal {
  padding: 1.75rem 0 1.75rem;
  display: flex; flex-direction: column; gap: 1.15rem;
  border-bottom: 1px solid rgba(4,7,37,0.08);
  margin-bottom: 2rem;
}
.hero-minimal .hm-crumbs { color: rgba(4,7,37,0.55); font-size: .8rem; }
.hero-minimal .hp-h1 { font-size: clamp(1.65rem, 2.75vw, 2.25rem); max-width: 28ch; }
.hero-minimal .hm-byline {
  display: flex; align-items: center; gap: .85rem;
  font-size: .85rem; color: rgba(4,7,37,0.6);
}
.hero-minimal .hm-byline .hm-avatar {
  width: 34px; height: 34px; border-radius: 999px; background: #EADFB9;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: .78rem; color: #7A5B00;
}
.hero-minimal .hm-byline .hm-divider { width: 4px; height: 4px; border-radius: 999px; background: rgba(4,7,37,0.25); }

/* 7. Magazine Cover — image-led with headline overlay, byline below,
   blog / feature use. */
.hero-magazine {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 8;
  min-height: 360px;
}
.hero-magazine .hm-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #0a0f3a 0%, #040725 100%);
}
.hero-magazine .hm-bg .img-slot { height: 100%; border-radius: 0; border: 0; }
.hero-magazine .hm-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(4,7,37,0.25) 55%, rgba(4,7,37,0.88) 100%);
}
.hero-magazine .hm-content {
  position: absolute; inset: auto 0 0 0;
  padding: 2rem 2.25rem 2rem;
  color: #fff;
  display: flex; flex-direction: column; gap: .75rem;
}
.hero-magazine .hm-eyebrow {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: #F6CE5C; font-weight: 500;
}
.hero-magazine .hm-title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  line-height: 1.15; color: #fff; max-width: 40ch;
}
.hero-magazine .hm-meta {
  display: flex; align-items: center; gap: .65rem;
  font-size: .8rem; color: rgba(255,255,255,0.75);
  margin-top: .35rem;
}
.hero-magazine .hm-meta .hm-avatar {
  width: 30px; height: 30px; border-radius: 999px; overflow: hidden;
  background: #EADFB9;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: .7rem; color: #7A5B00;
}

/* ============ HERO PATTERNS · IMAGE LED VARIANTS (8 through 14) ============ */

/* 8. Full-bleed image — photo covers entire hero, darkened overlay, headline
   centred. Homepage alt, brand moments, campaign landers. */
.hero-fullbleed {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 520px;
  display: flex; align-items: center; justify-content: center;
}
.hero-fullbleed .hfb-bg { position: absolute; inset: 0; }
.hero-fullbleed .hfb-bg .img-frame,
.hero-fullbleed .hfb-bg .img-slot { height: 100%; border-radius: 0; border: 0; }
.hero-fullbleed .hfb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,7,37,0.2) 0%, rgba(4,7,37,0.65) 100%);
}
.hero-fullbleed .hfb-content {
  position: relative; z-index: 1; text-align: center;
  padding: 3.5rem 2rem; max-width: 56rem;
  color: #fff;
}
.hero-fullbleed .hp-h1 { color: #fff; max-width: 22ch; margin: 1.25rem auto .85rem; }
.hero-fullbleed .hp-sub { color: rgba(255,255,255,0.78); margin: 0 auto 1.75rem; }
.hero-fullbleed .hp-actions { justify-content: center; }

/* 9. Right image dominant — image takes larger column on the right, content
   card floats over with a gold left border accent. Service pages feeling
   premium. */
.hero-right-image {
  display: grid; grid-template-columns: 1fr; gap: 0;
  min-height: 520px;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
@media (min-width: 900px) { .hero-right-image { grid-template-columns: 5fr 7fr; } }
.hero-right-image .hri-image { position: relative; min-height: 320px; }
.hero-right-image .hri-image .img-frame,
.hero-right-image .hri-image .img-slot {
  width: 100%; height: 100%;
  border-radius: 0; border: 0;
}
.hero-right-image .hri-content {
  padding: 2.5rem 2.5rem;
  display: flex; flex-direction: column; justify-content: center; gap: 1.25rem;
  border-left: 4px solid #EBB30A;
  background: #fff;
}
@media (min-width: 900px) {
  .hero-right-image .hri-content { padding: 3rem 2.75rem; border-left: 4px solid #EBB30A; }
}

/* 10. Image with bottom stat band — full image hero with navy stat strip
   docked to the bottom of the block, turning hero into image + data. */
.hero-image-stats {
  border-radius: 14px;
  overflow: hidden;
  background: #040725;
}
.hero-image-stats .his-image {
  position: relative;
  aspect-ratio: 16 / 7;
  min-height: 320px;
}
.hero-image-stats .his-image .img-frame,
.hero-image-stats .his-image .img-slot {
  height: 100%; border-radius: 0; border: 0;
}
.hero-image-stats .his-content {
  position: absolute; inset: auto 0 0 0;
  padding: 2.5rem 2.25rem 1.5rem;
  background: linear-gradient(180deg, transparent 0%, rgba(4,7,37,0.85) 100%);
  color: #fff;
}
.hero-image-stats .his-content .hp-h1 { color: #fff; max-width: 34ch; }
.hero-image-stats .his-content .hp-eyebrow { color: #F6CE5C; }
.hero-image-stats .his-content .hp-eyebrow::before { background: rgba(235,179,10,0.7); }
.hero-image-stats .his-stats {
  background: #040725;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  color: #fff;
}
.hero-image-stats .his-stat {
  padding: 1.25rem 1.5rem;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.hero-image-stats .his-stat:last-child { border-right: 0; }
.hero-image-stats .his-big {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.5rem; color: #F6CE5C; line-height: 1;
}
.hero-image-stats .his-lbl {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); margin-top: .5rem;
}

/* 11. Diptych — two images flanking a centred headline block. Visual
   variety moment for hub pages or campaign landings. */
.hero-diptych {
  display: grid; grid-template-columns: 1fr;
  gap: 0;
  border-radius: 14px; overflow: hidden;
}
@media (min-width: 900px) { .hero-diptych { grid-template-columns: 1fr auto 1fr; } }
.hero-diptych .hd-panel { position: relative; aspect-ratio: 4 / 5; min-height: 280px; }
.hero-diptych .hd-panel .img-frame,
.hero-diptych .hd-panel .img-slot { height: 100%; border-radius: 0; border: 0; }
.hero-diptych .hd-middle {
  padding: 2.5rem 2rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  justify-content: center; text-align: center;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  min-width: 0;
}
@media (min-width: 900px) { .hero-diptych .hd-middle { padding: 2.5rem 2.75rem; border-top: 0; border-bottom: 0; min-width: 340px; } }
.hero-diptych .hd-middle .hp-h1 { font-size: clamp(1.55rem, 2.25vw, 2.15rem); }

/* 12. Portrait plus pull quote — lawyer portrait flanks a Cinzel pull
   quote, authority + human moment. */
.hero-quote {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  padding: 2rem 0;
  align-items: center;
}
@media (min-width: 900px) { .hero-quote { grid-template-columns: 5fr 7fr; gap: 3rem; } }
.hero-quote .hq-portrait { position: relative; }
.hero-quote .hq-portrait .img-frame { aspect-ratio: 4 / 5; border-radius: 12px; }
.hero-quote .hq-portrait .hq-tag {
  position: absolute; top: 1rem; left: 1rem;
  background: rgba(4,7,37,0.85); color: #F6CE5C;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  padding: .45rem .7rem; border-radius: 6px;
  font-weight: 500;
  backdrop-filter: blur(4px);
}
.hero-quote .hq-body { display: flex; flex-direction: column; gap: 1.5rem; }
.hero-quote .hq-mark {
  font-family: 'Cinzel', serif; font-size: 4.5rem; color: #EBB30A; line-height: .5;
}
.hero-quote blockquote {
  font-family: 'Cinzel', serif; font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.3; color: #040725;
  margin: 0; max-width: 34ch;
}
.hero-quote .hq-attr {
  display: flex; align-items: center; gap: .75rem;
  padding-top: 1rem; border-top: 1px solid rgba(4,7,37,0.1);
  font-size: .85rem; color: rgba(4,7,37,0.6);
}
.hero-quote .hq-attr .hq-name { font-weight: 700; color: #040725; }

/* 13. Image with floating badges — big image and two small floating badges
   carrying proof points (fee, rating, stat). Impact + proof. */
.hero-badges {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  align-items: center;
  padding: 2.5rem 0;
}
@media (min-width: 900px) { .hero-badges { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.hero-badges .hbg-image { position: relative; }
.hero-badges .hbg-image .img-frame { aspect-ratio: 5 / 4; border-radius: 12px; }
.hero-badges .hbg-float {
  position: absolute;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  box-shadow: 0 20px 35px -18px rgba(4,7,37,0.32);
  min-width: 180px;
}
.hero-badges .hbg-float.top-right { top: -18px; right: -18px; }
.hero-badges .hbg-float.bottom-left { bottom: -18px; left: -18px; }
.hero-badges .hbg-float .hbg-label {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: #C49007; font-weight: 500;
}
.hero-badges .hbg-float .hbg-big {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.35rem; color: #040725; line-height: 1; margin-top: .3rem;
}
.hero-badges .hbg-float .hbg-stars { color: #EBB30A; font-size: 1rem; margin-top: .25rem; letter-spacing: .1em; }
.hero-badges .hbg-float .hbg-sub { font-size: .72rem; color: rgba(4,7,37,0.55); margin-top: .25rem; }

/* 14. Image tile strip — copy + primary CTA at top, horizontal row of 4
   property tiles below. Shows breadth of work in the fold. */
.hero-tiles {
  display: grid; gap: 2rem;
  padding: 2rem 0;
}
.hero-tiles .ht-intro { max-width: 56rem; display: flex; flex-direction: column; gap: 1rem; }
.hero-tiles .ht-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
@media (min-width: 900px) { .hero-tiles .ht-row { grid-template-columns: repeat(4, 1fr); } }
.hero-tiles .ht-tile {
  position: relative; aspect-ratio: 4 / 5;
  border-radius: 10px; overflow: hidden;
  background: #0b0e2b;
}
.hero-tiles .ht-tile .img-frame,
.hero-tiles .ht-tile .img-slot { height: 100%; width: 100%; border-radius: 0; border: 0; }
.hero-tiles .ht-tile .ht-label {
  position: absolute; inset: auto 0 0 0;
  padding: .85rem 1rem;
  background: linear-gradient(180deg, transparent 0%, rgba(4,7,37,0.88) 100%);
  color: #fff;
}
.hero-tiles .ht-tile .ht-eyebrow {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: #F6CE5C; font-weight: 500;
}
.hero-tiles .ht-tile .ht-name {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1rem; color: #fff; margin-top: .2rem;
}

/* Component showcase page-only helpers (editorial 2026 layout) */
.showcase-section { padding: 3.5rem 0 3rem; border-top: 1px solid rgba(4,7,37,0.08); }
.showcase-section:first-of-type { border-top: 0; }
.showcase-label {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(4,7,37,0.45); font-weight: 500;
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: .9rem;
}
.showcase-label::before { content: ""; width: 36px; height: 1px; background: #EBB30A; display: inline-block; }
.showcase-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 1.85rem); color: #040725; margin-bottom: .4rem; letter-spacing: -0.01em; line-height: 1.2; }
.showcase-sub { font-size: 1rem; color: rgba(4,7,37,0.65); margin-bottom: 2rem; max-width: 700px; }

.block-label {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(4,7,37,0.5); font-weight: 500;
  margin-bottom: .85rem;
  display: flex; align-items: center; gap: .6rem;
}
.block-label::before { content: "›"; color: #EBB30A; font-size: .85rem; }

/* =================================================================
   Chapter 24 · Floating card family (`.cta-card`)
   Shared navy pill card used as sidebar CTAs, rail blocks, office
   cards, fee cards, lawyer direct line cards, checklist cards.
   Same 14px radius + gold hairline + soft shadow rhythm as the
   header pill, hero card, and footer card.
   ================================================================= */
.cta-card {
  padding: 1.75rem;
  background: linear-gradient(180deg, #040725 0%, #0a0f3a 100%);
  border: 1px solid rgba(235,179,10,0.25);
  border-radius: 14px;
  color: #fff;
  box-shadow: 0 20px 50px -30px rgba(0,0,0,0.55);
}
.cta-card .cc-eyebrow {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: #F6CE5C; font-weight: 700; margin-bottom: .6rem;
}
.cta-card .cc-title {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem; line-height: 1.25; font-weight: 700;
  color: #fff; margin-bottom: .75rem;
}
.cta-card .cc-sub { color: rgba(255,255,255,0.72); font-size: .9rem; line-height: 1.6; margin-bottom: 1.1rem; }
.cta-card .cc-list { display: flex; flex-direction: column; gap: .4rem; font-size: .85rem; color: rgba(255,255,255,0.78); margin-bottom: 1.25rem; }
.cta-card .cc-divider { height: 1px; background: rgba(235,179,10,0.18); margin: 1rem 0 1.25rem; }

/* Fee variant */
.cta-card .cc-price {
  font-family: 'Cinzel', serif;
  font-size: 2.4rem; font-weight: 700; color: #EBB30A;
  line-height: 1; margin: .25rem 0 .25rem;
  letter-spacing: -0.01em;
}
.cta-card .cc-price-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-bottom: 1.1rem;
}
.cta-card .cc-included { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.cta-card .cc-included li {
  position: relative; padding-left: 1.75rem;
  font-size: .86rem; color: rgba(255,255,255,0.82); line-height: 1.45;
}
.cta-card .cc-included li::before {
  content: ""; position: absolute; left: 0; top: .1rem;
  width: 1.1rem; height: 1.1rem; border-radius: 4px;
  background: rgba(235,179,10,0.14);
  border: 1px solid rgba(235,179,10,0.32);
}
.cta-card .cc-included li::after {
  content: ""; position: absolute; left: .3rem; top: .42rem;
  width: .5rem; height: .24rem;
  border-left: 1.5px solid #EBB30A;
  border-bottom: 1.5px solid #EBB30A;
  transform: rotate(-45deg);
}

/* Lawyer direct line variant */
.cta-card .cc-lawyer-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.cta-card .cc-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #171a32, #090d26);
  border: 2px solid rgba(235,179,10,0.4);
  object-fit: cover; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700; color: #F6CE5C; font-size: 1.05rem;
}
.cta-card .cc-lawyer-meta .name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.05rem; color: #fff; line-height: 1.2; }
.cta-card .cc-lawyer-meta .role {
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(246,206,92,0.88); margin-top: .25rem;
}
.cta-card .cc-contact-row { display: flex; flex-direction: column; gap: .4rem; font-size: .86rem; color: rgba(255,255,255,0.82); margin-bottom: 1.25rem; }
.cta-card .cc-contact-row a { color: #F6CE5C; }
.cta-card .cc-contact-row a:hover { color: #fff; }
.cta-card .cc-contact-row .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,0.42); margin-right: .5rem;
}

/* Office variant */
.cta-card .cc-city {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: #F6CE5C; margin-bottom: .5rem; font-weight: 700;
}
.cta-card .cc-address { font-family: 'Cinzel', serif; font-size: 1.05rem; line-height: 1.5; color: #fff; margin-bottom: .9rem; }
.cta-card .cc-hours-row { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; color: rgba(255,255,255,0.62); margin-bottom: 1.25rem; }
.cta-card .cc-hours-row strong { color: rgba(255,255,255,0.85); font-weight: 600; font-size: .82rem; }

/* Two-button stack */
.cta-card .cc-actions { display: flex; flex-direction: column; gap: .6rem; }
.cta-card .cc-actions .btn-gold,
.cta-card .cc-actions .btn-ghost { width: 100%; justify-content: center; }

/* Rail pair — two cta cards side by side at md+ */
.cta-rail-pair {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
}
@media (min-width: 768px) {
  .cta-rail-pair { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

/* =================================================================
   Chapter 25 · Client journey patterns (3 versions)
   Replaces the flat `.process-list` used on service pages. Built
   to carry 10 to 15 steps across grouped phases.
   ================================================================= */

/* Shared actor chip used across all three versions */
.actor-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600;
  padding: .2rem .55rem; border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.actor-chip.firm { background: rgba(235,179,10,0.1); border-color: rgba(235,179,10,0.35); color: #C48C05; }
.actor-chip.client { background: rgba(4,7,37,0.06); border-color: rgba(4,7,37,0.14); color: #040725; }
.actor-chip.both { background: #040725; color: #F6CE5C; }
.on-dark .actor-chip.firm { background: rgba(235,179,10,0.18); color: #F6CE5C; }
.on-dark .actor-chip.client { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); }

/* ---------- Version A · Horizontal journey rail ---------- */
.journey-rail {
  position: relative;
  padding: 1.5rem 0 .5rem;
}
.journey-rail .jr-phases {
  display: grid;
  gap: 0;
  position: relative;
  margin-top: 1rem;
}
@media (min-width: 1024px) {
  .journey-rail .jr-phases {
    grid-template-columns: repeat(4, 1fr);
  }
}
.journey-rail .jr-phase {
  position: relative;
  padding: 1rem 1.25rem 1.5rem;
  border-left: 1px dashed rgba(4,7,37,0.14);
}
.journey-rail .jr-phase:first-child { border-left: 0; }
@media (max-width: 1023px) {
  .journey-rail .jr-phase { border-left: 0; border-top: 1px dashed rgba(4,7,37,0.14); padding: 1.5rem 0 1rem; }
  .journey-rail .jr-phase:first-child { border-top: 0; }
}
.journey-rail .jr-phase-head {
  display: flex; align-items: baseline; gap: .6rem;
  margin-bottom: 1.1rem;
}
.journey-rail .jr-phase-num {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 2rem; color: rgba(235,179,10,0.35); line-height: 1;
}
.journey-rail .jr-phase-meta .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
  color: #C48C05; font-weight: 700; display: block;
}
.journey-rail .jr-phase-meta .title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.05rem; color: #040725; line-height: 1.2; margin-top: .2rem;
}
.journey-rail .jr-steps {
  display: flex; flex-direction: column; gap: 1rem;
  position: relative;
  padding-left: 1.25rem;
}
.journey-rail .jr-steps::before {
  content: ""; position: absolute;
  left: .35rem; top: .5rem; bottom: .5rem;
  width: 1px; background: rgba(4,7,37,0.1);
}
.journey-rail .jr-step { position: relative; }
.journey-rail .jr-step::before {
  content: ""; position: absolute;
  left: -1.1rem; top: .35rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: #EBB30A; box-shadow: 0 0 0 3px #FBFBF8, 0 0 0 4px rgba(235,179,10,0.3);
}
.journey-rail .jr-step .jr-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem; letter-spacing: .15em; color: rgba(4,7,37,0.5);
  font-weight: 600; margin-bottom: .2rem;
}
.journey-rail .jr-step .jr-title {
  font-weight: 700; color: #040725; font-size: .95rem; line-height: 1.3; margin-bottom: .15rem;
}
.journey-rail .jr-step .jr-sub {
  font-size: .82rem; color: rgba(4,7,37,0.62); line-height: 1.45;
}

/* ---------- Version B · Vertical phase timeline ---------- */
.phase-timeline {
  display: flex; flex-direction: column;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.phase-timeline .pt-phase {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(4,7,37,0.08);
}
.phase-timeline .pt-phase:first-child { border-top: 0; }
@media (min-width: 900px) {
  .phase-timeline .pt-phase { grid-template-columns: 240px 1fr; }
}
.phase-timeline .pt-phase-head {
  padding: 1.75rem 1.5rem;
  background: linear-gradient(180deg, #FBFBF8 0%, rgba(235,179,10,0.05) 100%);
  border-right: 1px solid rgba(4,7,37,0.08);
}
@media (max-width: 899px) {
  .phase-timeline .pt-phase-head { border-right: 0; border-bottom: 1px solid rgba(4,7,37,0.08); padding: 1.25rem 1.5rem; }
}
.phase-timeline .pt-phase-chip {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem; letter-spacing: .22em; text-transform: uppercase;
  color: #C48C05; font-weight: 700;
  padding: .3rem .7rem;
  background: #fff; border: 1px solid rgba(235,179,10,0.4);
  border-radius: 999px;
  margin-bottom: .75rem;
}
.phase-timeline .pt-phase-title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.25rem; color: #040725; line-height: 1.2;
  margin-bottom: .35rem;
}
.phase-timeline .pt-phase-meta {
  font-size: .82rem; color: rgba(4,7,37,0.55);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .05em;
}
.phase-timeline .pt-steps {
  display: flex; flex-direction: column;
  padding: .5rem 0;
}
.phase-timeline .pt-step {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  border-top: 1px dashed rgba(4,7,37,0.08);
  align-items: start;
}
.phase-timeline .pt-step:first-child { border-top: 0; }
.phase-timeline .pt-step .pt-num {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.25rem; color: #EBB30A; line-height: 1;
  padding-top: .15rem;
}
.phase-timeline .pt-step .pt-body .title {
  font-weight: 700; color: #040725; font-size: .98rem; line-height: 1.35; margin-bottom: .25rem;
}
.phase-timeline .pt-step .pt-body .copy {
  font-size: .87rem; color: rgba(4,7,37,0.65); line-height: 1.5;
}
.phase-timeline .pt-step .pt-actor {
  padding-top: .25rem;
}
@media (max-width: 640px) {
  .phase-timeline .pt-step { grid-template-columns: 2.25rem 1fr; padding: 1rem 1.25rem; }
  .phase-timeline .pt-step .pt-actor { grid-column: 2; padding-top: .5rem; }
}

/* ---------- Version C · Card deck with progress bar ---------- */
.step-deck-wrap { padding-top: .5rem; }
.step-deck-progress {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 .5rem 2rem;
}
.step-deck-progress::before {
  content: ""; position: absolute;
  left: 1rem; right: 1rem; top: 50%; transform: translateY(calc(-50% - .9rem));
  height: 2px; background: rgba(4,7,37,0.08); border-radius: 2px;
}
.step-deck-progress::after {
  content: ""; position: absolute;
  left: 1rem; top: 50%; transform: translateY(calc(-50% - .9rem));
  width: 65%; height: 2px;
  background: linear-gradient(90deg, #EBB30A 0%, #F6CE5C 100%);
  border-radius: 2px;
}
.step-deck-progress .sdp-mark {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(4,7,37,0.5); font-weight: 600;
}
.step-deck-progress .sdp-mark::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: #FBFBF8; border: 2px solid rgba(4,7,37,0.2);
  margin-bottom: .6rem;
}
.step-deck-progress .sdp-mark.on { color: #C48C05; }
.step-deck-progress .sdp-mark.on::before { background: #EBB30A; border-color: #EBB30A; box-shadow: 0 0 0 4px rgba(235,179,10,0.2); }
.step-deck {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .step-deck { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .step-deck { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .step-deck { grid-template-columns: repeat(4, 1fr); } }
.sd-card {
  position: relative;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.08);
  border-radius: 12px;
  transition: border-color .2s ease, transform .2s ease;
}
.sd-card:hover { border-color: rgba(235,179,10,0.4); transform: translateY(-2px); }
.sd-card.active { background: linear-gradient(180deg, #FBFBF8 0%, #fff 100%); border-color: rgba(235,179,10,0.45); box-shadow: 0 10px 30px -20px rgba(235,179,10,0.35); }
.sd-card .sd-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .75rem;
}
.sd-card .sd-num {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.5rem; color: rgba(235,179,10,0.85); line-height: 1;
}
.sd-card .sd-day {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(4,7,37,0.5); font-weight: 600;
}
.sd-card .sd-title {
  font-weight: 700; color: #040725; font-size: .98rem; line-height: 1.3; margin-bottom: .5rem;
}
.sd-card .sd-copy {
  font-size: .84rem; color: rgba(4,7,37,0.65); line-height: 1.5; margin-bottom: .9rem;
}
.sd-card .sd-foot { display: flex; justify-content: space-between; align-items: center; }

/* =================================================================
   TRANSACTION PAGES — 13-chapter shell components
   Used by /real-estate-purchase, /real-estate-sale, /real-estate-mortgage,
   /real-estate-refinance. Per brief `Transaction Pages Build Instructions.md`.
   ================================================================= */

/* Hero Quick Answer variant for transaction pages — AI extraction target,
   50–80 words. Uses a separate class to avoid the grid layout on the
   earlier `.quick-answer` pattern (glossary hero term, LTT calc, components). */
.qa-hero {
  display: block;
  border: 1px solid rgba(4,7,37,0.12);
  border-left: 3px solid #EBB30A;
  background: linear-gradient(180deg, rgba(235,179,10,0.045) 0%, rgba(235,179,10,0.02) 100%);
  border-radius: 10px;
  padding: 1.15rem 1.35rem;
  margin-top: 1.75rem;
  max-width: 680px;
}
.qa-hero .qa-label {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem; letter-spacing: .26em; text-transform: uppercase;
  color: #C48C05; font-weight: 600; margin-bottom: .55rem;
}
.qa-hero p { color: rgba(4,7,37,0.86); font-size: .96rem; line-height: 1.6; margin: 0; }
.qa-hero .qa-date {
  margin-top: .85rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem; letter-spacing: .12em;
  color: rgba(4,7,37,0.5);
}

/* Mid-page CTA band — compact horizontal break between chapters */
.mid-cta-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  background: rgba(4,7,37,0.035);
  border: 1px solid rgba(4,7,37,0.1);
  border-left: 3px solid #EBB30A;
  border-radius: 12px;
  padding: 1.15rem 1.6rem;
  margin: 2.25rem 0 0;
}
.mid-cta-band .mcb-headline {
  font-family: 'Cinzel', serif; font-weight: 600;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: #040725; line-height: 1.25;
  margin: 0;
}
@media (max-width: 640px) {
  .mid-cta-band { flex-direction: column; align-items: flex-start; padding: 1.1rem 1.25rem; }
}

/* Corporate considerations dark band — Chapter 9 full-width visual break */
.corp-band {
  background: linear-gradient(135deg, #040725 0%, #171a32 100%);
  border: 1px solid rgba(235,179,10,0.22);
  border-radius: 14px;
  padding: 2.75rem 2.25rem;
  color: #fff;
  position: relative; overflow: hidden;
}
.corp-band::before {
  content: ""; position: absolute; top: 0; right: 0;
  width: 280px; height: 280px;
  background: radial-gradient(circle at top right, rgba(235,179,10,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.corp-band .cb-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  color: #EBB30A; font-weight: 600; margin-bottom: .9rem;
  position: relative;
}
.corp-band .cb-title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem); line-height: 1.2;
  color: #fff; margin-bottom: 1.1rem;
  position: relative;
}
.corp-band .cb-body {
  color: rgba(232,233,244,0.85);
  font-size: 1rem; line-height: 1.65;
  max-width: 820px; margin-bottom: 1.5rem;
  position: relative;
}
.corp-band .cb-bullets { list-style: none; padding: 0; margin: 0 0 1.9rem 0; position: relative; }
.corp-band .cb-bullets li {
  position: relative; padding-left: 1.75rem;
  color: rgba(232,233,244,0.9); font-size: .95rem; line-height: 1.55; margin-bottom: .7rem;
}
.corp-band .cb-bullets li::before {
  content: ""; position: absolute; left: 0; top: .6rem;
  width: 14px; height: 1px; background: #EBB30A;
}
.corp-band .cb-cta { position: relative; }

/* Desktop sticky consult rail — appears at scroll 800px, collapses at 4000px */
.consult-rail {
  display: none;
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
  width: 288px;
  background: #fff;
  border: 1px solid rgba(4,7,37,0.1);
  border-radius: 14px;
  padding: 1.2rem 1.25rem 1.1rem;
  box-shadow: 0 20px 55px -20px rgba(4,7,37,0.38), 0 4px 12px -4px rgba(4,7,37,0.08);
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, width .25s ease, padding .25s ease;
}
.consult-rail.is-visible { opacity: 1; transform: translateY(0); }
.consult-rail.is-collapsed { width: 52px; padding: .8rem; cursor: pointer; }
.consult-rail.is-collapsed .cr-body,
.consult-rail.is-collapsed .cr-cta { display: none; }
.consult-rail .cr-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem; letter-spacing: .24em; text-transform: uppercase;
  color: #C48C05; font-weight: 600; margin-bottom: .4rem;
}
.consult-rail .cr-title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.02rem; color: #040725; line-height: 1.25; margin: 0 0 .55rem;
}
.consult-rail .cr-copy {
  font-size: .82rem; color: rgba(4,7,37,0.65); line-height: 1.45; margin: 0 0 .9rem;
}
.consult-rail .cr-cta { display: flex; gap: .5rem; }
.consult-rail .cr-cta .btn-gold { flex: 1 1 auto; justify-content: center; padding: .55rem .75rem; font-size: .85rem; }
.consult-rail .cr-cta .cr-call {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(4,7,37,0.04); color: #040725;
  border: 1px solid rgba(4,7,37,0.1);
  flex-shrink: 0; transition: background .15s ease, color .15s ease;
}
.consult-rail .cr-cta .cr-call:hover { background: #040725; color: #EBB30A; }
.consult-rail .cr-toggle {
  position: absolute; top: .45rem; right: .45rem;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(4,7,37,0.05); border: 1px solid rgba(4,7,37,0.1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(4,7,37,0.55);
  transition: background .15s ease, color .15s ease;
}
.consult-rail .cr-toggle:hover { background: rgba(235,179,10,0.12); color: #C48C05; }
.consult-rail.is-collapsed .cr-toggle {
  position: static; margin: 0 auto;
  width: 36px; height: 36px;
  background: #040725; color: #EBB30A;
  border-color: rgba(235,179,10,0.3);
}
@media (min-width: 1280px) { .consult-rail { display: block; } }

/* Lead magnet email capture — Chapter 8 checklist download inline form */
.lm-form { display: flex; gap: .55rem; margin-top: .9rem; flex-wrap: wrap; align-items: stretch; }
.lm-form input[type="email"] {
  flex: 1 1 240px; min-width: 0;
  padding: .7rem .9rem;
  border: 1px solid rgba(4,7,37,0.15);
  border-radius: 8px;
  font-size: .92rem;
  background: #fff;
  color: #040725;
  font-family: 'Lato', sans-serif;
}
.lm-form input[type="email"]:focus {
  outline: none;
  border-color: #EBB30A;
  box-shadow: 0 0 0 3px rgba(235,179,10,0.18);
}
.lm-form button { white-space: nowrap; flex-shrink: 0; }
.lm-privacy { margin-top: .6rem; font-size: .72rem; color: rgba(4,7,37,0.55); line-height: 1.45; }
.lm-status { margin-top: .55rem; font-size: .82rem; color: #0f7b3a; line-height: 1.45; font-weight: 600; }

/* Refinance calculator verdict line */
.rf-verdict {
  margin-top: .85rem;
  padding: .7rem .85rem;
  border-radius: 8px;
  font-size: .85rem; line-height: 1.45;
  font-weight: 600;
}
.rf-verdict.good { background: rgba(15,123,58,0.1); color: #0f7b3a; border: 1px solid rgba(15,123,58,0.2); }
.rf-verdict.caution { background: rgba(235,179,10,0.1); color: #8a6305; border: 1px solid rgba(235,179,10,0.3); }
.rf-verdict.warn { background: rgba(176,49,44,0.08); color: #8a1e1a; border: 1px solid rgba(176,49,44,0.22); }




/* ── Mobile drawer: split title-link + expand toggle (CMS) ── */
.md-dd-head { display: flex; align-items: center; justify-content: space-between; }
.md-dd-head .md-dd-title { flex: 1 1 auto; padding: .9rem 1.1rem; color: rgba(255,255,255,0.9); font-weight: 600; font-size: .96rem; }
.md-dd-head .md-dd-title:hover { color: #F6CE5C; }
.md-dd-toggle { flex-shrink: 0; padding: .9rem 1.1rem; background: none; border: 0; cursor: pointer; color: rgba(255,255,255,0.45); display: flex; align-items: center; }
.md-dd-toggle .chev { width: 16px; height: 16px; transition: transform .25s ease, color .2s ease; }
.md-dd.open { background: rgba(235,179,10,0.04); border-color: rgba(235,179,10,0.22); }
.md-dd.open .md-dd-title { color: #F6CE5C; }
.md-dd.open .md-dd-toggle .chev { transform: rotate(180deg); color: #F6CE5C; }
.md-dd > .md-dd-list { display: none; }
.md-dd.open > .md-dd-list { display: flex; }