/* ============================================================
   DELGADO PURDY — INTERIOR PAGE PATTERNS
   Section library for practice-area pages. Extends the homepage
   design language: same tokens, same motion vocabulary (bird,
   stamps, case-file rails, ink reveals, drawn lines).
   Loads AFTER tokens.css + main.css.
   ============================================================ */

/* ============ Page hero ============ */
.phero { position: relative; background: var(--gradient-navy); overflow: hidden; }
.phero__in { position: relative; max-width: 1440px; margin: 0 auto; padding: 40px 64px 88px; }
.phero__watermark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 560px; opacity: 0.05; pointer-events: none; user-select: none;
}
.phero__watermark img { width: 100%; height: auto; display: block; }
.crumbs { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; animation: dpFade .8s ease .05s backwards; }
.crumbs a, .crumbs span { font-family: var(--font-body); font-size: 12.5px; letter-spacing: .04em; color: var(--navy-300); text-decoration: none; }
.crumbs a:hover { color: var(--paper-100); }
.crumbs .sep { color: rgba(251,249,246,.35); }
.crumbs [aria-current] { color: var(--taupe-300); font-weight: var(--fw-bold); }
/* Same split as the homepage hero: head (eyebrow/h1/sub) and body (intro/CTAs/
   stats) stack in column 1, the aside spans both rows in column 2. Row 1 is
   max-content so a tall aside never opens a gap between the title and intro. */
.phero__grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 1fr auto; grid-template-rows: max-content 1fr;
  column-gap: 64px; row-gap: 0; align-items: start; margin-top: 44px;
}
.phero__head { grid-column: 1; grid-row: 1; }
.phero__body { grid-column: 1; grid-row: 2; }
.phero__aside { grid-column: 2; grid-row: 1 / span 2; }
/* stats run the full hero width on their own row: four multi-word stats have
   nowhere to go inside the copy column once the aside went wide */
.phero__statsrow { grid-column: 1 / -1; grid-row: 3; margin-top: 52px; }
/* items share the full row instead of hugging content and leaving dead space */
.phero__statsrow .phero__stat { flex: 1 1 auto; }
.phero__eyebrow-row { animation: dpUp .7s var(--ease-out) .1s backwards; }
.phero__eyebrow { color: var(--taupe-300); }
.phero__h1 {
  margin-top: 24px; font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: 58px; line-height: 1.08; letter-spacing: -.015em; color: var(--paper-100);
  max-width: 18ch; animation: dpUp .8s var(--ease-out) .2s backwards;
}
.phero__sub {
  margin-top: 14px; font-family: var(--font-display); font-size: 27px; line-height: 1.25;
  color: var(--taupe-300); animation: dpUp .8s var(--ease-out) .3s backwards;
}
.phero__sub em { font-style: italic; }
.phero__intro {
  margin-top: 24px; max-width: 58ch; font-family: var(--font-body); font-size: 19px;
  line-height: 1.68; color: var(--navy-200); animation: dpUp .8s var(--ease-out) .4s backwards;
}
.phero__ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 32px; animation: dpUp .8s var(--ease-out) .5s backwards; }
.phero__stats { display: flex; flex-wrap: wrap; margin-top: 48px; border-top: 1px solid rgba(251,249,246,.14); padding-top: 24px; animation: dpUp .8s var(--ease-out) .62s backwards; }
.phero__stat { padding: 0 26px; border-left: 1px solid rgba(251,249,246,.14); }
.phero__stat:first-child { padding-left: 0; border-left: none; }
.phero__stat-num { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 27px; color: var(--paper-100); }
/* hero stat with no figure promotes its label into the display slot */
.phero__stat-num--label { font-size: 20px; line-height: 1.3; }
.phero__stat-label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 10.5px; letter-spacing: .14em; color: var(--taupe-300); margin-top: 3px; }
.phero__stat-detail { font-family: var(--font-body); font-size: 12.5px; color: var(--navy-300); margin-top: 4px; }

/* The case-file stamp — page number badge, homepage stamp language */
.phero__file { position: relative; align-self: center; animation: dpSealIn .9s var(--ease-out) .45s backwards; }
/* .001 not 0: see the LCP note above the keyframes in main.css */
@keyframes dpSealIn { from { opacity: .001; transform: rotate(4deg) scale(.6) } to { opacity: 1; transform: rotate(-3deg) scale(1) } }
.phero__stamp {
  width: 168px; height: 168px; border-radius: 50%; border: 1.5px solid rgba(251,249,246,.5);
  display: flex; align-items: center; justify-content: center; position: relative;
  transform: rotate(-3deg); transition: transform .35s var(--ease-out), border-color .3s ease, background .3s ease;
}
.phero__file:hover .phero__stamp { transform: rotate(0deg) scale(1.05); border-color: var(--paper-100); background: rgba(251,249,246,.06); }
.phero__stamp-ring { position: absolute; inset: 8px; border-radius: 50%; border: 1px dashed rgba(251,249,246,.32); }
.phero__file:hover .phero__stamp-ring { animation: dpSpin 9s linear infinite; }
.phero__stamp-inner { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding: 0 14px; }
.phero__stamp-num { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-semibold); font-size: 44px; line-height: 1; color: var(--paper-100); }
.phero__stamp-label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 8.5px; letter-spacing: .2em; color: var(--taupe-300); }

/* ============ Generic section scaffolding ============ */
.sect { position: relative; }
.sect__in { max-width: 1440px; margin: 0 auto; padding: 96px 64px; }
.sect--tight .sect__in { padding: 80px 64px; }
.sect--paper { background: var(--paper-100); }
.sect--dawn { background: var(--gradient-dawn); border-top: 1px solid var(--border-hairline); }
.sect--warm { background: var(--gradient-warm); border-top: 1px solid var(--border-hairline); }
.sect--white { background: var(--paper-0); border-top: 1px solid var(--border-hairline); }
.sect__head { max-width: 880px; margin-bottom: 52px; }
.sect__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sect__head--center .eyebrow-row { justify-content: center; }
.sect__eyebrow { color: var(--navy-600); }
.sect__h2 {
  margin-top: 20px; font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: 42px; line-height: 1.14; letter-spacing: -.015em; color: var(--navy-900);
}
.sect__h2 em { font-style: italic; color: var(--crimson); }
.sect__intro { margin-top: 18px; font-family: var(--font-body); font-size: 18.5px; line-height: 1.65; color: var(--text-muted); max-width: 82ch; }
.sect__head--center .sect__intro { margin-left: auto; margin-right: auto; }
.sect__head--center .squiggle { margin-left: auto; margin-right: auto; }

/* ============ intro — centered ink block ============ */
.pintro__body {
  margin: 40px auto 0; max-width: 52ch; text-align: center;
  font-family: var(--font-display); font-size: 23px; line-height: 1.66; letter-spacing: -.005em;
  background-image: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-300) 6%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============ prose — editorial two-column spread ============
   Body copy left; a sticky oversized display heading (with ghost
   numeral) fills the right column — no dead whitespace. */
.prose-duo { display: grid; grid-template-columns: 1fr minmax(0, 720px); gap: 80px; align-items: start; }
.prose-duo__head { grid-column: 1; grid-row: 1; position: sticky; top: 130px; }
.prose-duo__head-in { position: relative; padding-top: 34px; }
.prose-duo__ghost {
  position: absolute; top: -44px; left: -10px; z-index: 0;
  font-family: var(--font-display); font-style: italic; font-weight: var(--fw-semibold);
  font-size: 170px; line-height: 1; color: var(--paper-300);
  pointer-events: none; user-select: none;
}
.sect--white .prose-duo__ghost { color: var(--paper-200); }
.prose-duo__head .eyebrow-row, .prose-duo__head .duo-h2, .prose-duo__head .squiggle { position: relative; z-index: 1; }
.duo-h2 {
  margin-top: 18px; font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: 37px; line-height: 1.16; letter-spacing: -.015em; color: var(--navy-900);
  max-width: 15ch;
}
.duo-h2 em { font-style: italic; color: var(--crimson); }
.prose-duo__body { grid-column: 2; grid-row: 1; }
.prose-duo--bare .prose-duo__head { padding-top: 0; }

.prose { max-width: 760px; }
.prose--dropcap > .prose__block:first-child > p:first-of-type::first-letter,
/* paired caps: used where two parallel paragraphs open a section, one per
   founder on /about/, so the J and the T read as a deliberate device */
.prose--dropcap2 > .prose__block:first-child > p:nth-of-type(-n+2)::first-letter {
  font-family: var(--font-display); font-style: italic; font-weight: var(--fw-semibold);
  font-size: 64px; line-height: .8; color: var(--crimson);
  float: left; padding: 10px 12px 0 0;
}
.prose__block + .prose__block { margin-top: 40px; }
.prose__block h3 {
  position: relative; font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: 25px; line-height: 1.2; color: var(--navy-900); padding-left: 44px; margin-bottom: 16px;
}
.prose__block h3::before {
  content: ""; position: absolute; left: 0; top: .58em; width: 30px; height: 2px; background: var(--red-500);
}
.prose__block p { font-family: var(--font-body); font-size: 18.5px; line-height: 1.75; color: var(--text-body); }
.prose__block p + p { margin-top: 16px; }
.prose__block p em { font-style: italic; }
.prose__block a { color: var(--crimson); font-weight: var(--fw-bold); text-decoration: none; }
.prose__block a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============ steps — "The Path" traveling-bird timeline ============ */
.steps { position: relative; max-width: 860px; }
.steps__rail { position: absolute; left: 27px; top: 10px; bottom: 40px; width: 1px; background: var(--taupe-300); }
.steps__trail { position: absolute; left: 26.5px; top: 10px; width: 2px; height: 0; background: var(--navy-700); transition: height .55s var(--ease-out); }
.steps__bird { position: absolute; left: -68px; top: 0; width: 66px; height: 68px; opacity: .95; transition: top .55s var(--ease-out); pointer-events: none; z-index: 2; }
.step { position: relative; display: flex; gap: 36px; padding: 26px 0 34px 0; }
.step__num {
  position: relative; z-index: 1; flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: var(--paper-0); border: 1px solid var(--taupe-300); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic; font-weight: var(--fw-semibold);
  font-size: 21px; color: var(--taupe-600);
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--ease-out);
}
.step.is-active .step__num { background: var(--navy-700); border-color: var(--navy-700); color: var(--paper-100); transform: scale(1.08); }
.step__body { padding-top: 6px; }
.step__title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 23px; line-height: 1.2; color: var(--navy-900); transition: color .2s ease; }
.step.is-active .step__title { font-style: italic; }
.step__text { margin-top: 10px; font-family: var(--font-body); font-size: 17.5px; line-height: 1.7; color: var(--text-body); }
/* a step with no title carries the whole point, so it takes the title's weight
   instead of rendering in the smaller secondary style */
.step__text--lead { margin-top: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.34; color: var(--navy-900); }

/* ============ cards — ghost-numeral cards ============ */
.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.pcards--2 { grid-template-columns: repeat(2, 1fr); }
.pcards--4 { grid-template-columns: repeat(4, 1fr); }
.pcard {
  position: relative; display: flex; flex-direction: column; background: var(--paper-0);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 30px 30px 26px; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-decoration: none;
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--navy-200); }
.pcard__ghost {
  position: absolute; top: -14px; right: 12px; font-family: var(--font-display); font-style: italic;
  font-size: 92px; line-height: 1; color: var(--paper-300); pointer-events: none; user-select: none;
  transition: color .25s ease;
}
.pcard:hover .pcard__ghost { color: var(--taupe-200); }
.pcard__title { position: relative; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 22px; line-height: 1.22; color: var(--navy-900); max-width: 88%; }
.pcard:hover .pcard__title { text-decoration: underline; text-decoration-color: var(--red-500); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.pcard__body { position: relative; margin-top: 12px; font-family: var(--font-body); font-size: 16.5px; line-height: 1.65; color: var(--text-body); flex: 1; }
.pcard__link { position: relative; display: inline-block; margin-top: 18px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 14px; color: var(--crimson); text-decoration: none; }
.pcard__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============ checklist — stamped checks ============ */
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; max-width: 1000px; }
.check {
  display: flex; gap: 18px; align-items: flex-start; background: var(--paper-0);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  padding: 20px 24px; box-shadow: var(--shadow-xs);
  transition: transform .25s ease, box-shadow .25s ease;
}
.check:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.check__seal {
  flex: none; width: 40px; height: 40px; border-radius: 50%; position: relative;
  border: 1.5px solid var(--crimson); display: flex; align-items: center; justify-content: center;
  transform: rotate(-6deg); transition: transform .3s var(--ease-out);
}
.check:hover .check__seal { transform: rotate(0deg) scale(1.08); }
.check__seal::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px dashed rgba(140,17,27,.4); }
.check:hover .check__seal::after { animation: dpSpin 9s linear infinite; }
.check__seal svg { color: var(--crimson); }
.check__title { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 15.5px; color: var(--navy-900); padding-top: 8px; }
.check__title:only-child { padding-top: 9px; }
.check__body { margin-top: 6px; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text-muted); }

/* ============ split — sticky case-file rail ============ */
/* centre-align so the shorter side (usually the rail box) sits level with the
   prose instead of both hugging the top. Sticky is dropped: it fought the
   centring, and the rail is short enough not to need it. */
.psplit { display: grid; grid-template-columns: 400px 1fr; gap: 72px; align-items: center; }
.psplit__rail { position: relative; }
.psplit__tab {
  display: inline-block; background: var(--taupe-100); border: 1px solid var(--border-hairline);
  border-bottom: none; border-radius: 12px 12px 0 0; padding: 10px 20px 9px;
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 10.5px;
  letter-spacing: .18em; color: var(--taupe-700); text-transform: uppercase;
}
.psplit__box {
  background: var(--paper-0); border: 1px solid var(--border-hairline);
  border-radius: 0 20px 20px 20px; box-shadow: var(--shadow-md); padding: 30px 32px;
}
.psplit__row { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--border-hairline); }
.psplit__row:last-child { border-bottom: none; padding-bottom: 0; }
.psplit__row:first-child { padding-top: 0; }
.psplit__label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 11px; letter-spacing: .12em; line-height: 1.6; text-transform: uppercase; color: var(--taupe-700); padding-top: 2px; flex: 0 0 auto; max-width: 54%; }
.psplit__value { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--navy-800); text-align: right; min-width: 0; overflow-wrap: break-word; }
/* long values stack: label above, full-width value below */
.psplit__row--stack { display: block; }
.psplit__row--stack .psplit__label { display: block; max-width: none; }
.psplit__row--stack .psplit__value { display: block; text-align: left; margin-top: 6px; }

/* ============ comparison table ============ */
.ctable-wrap { border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; background: var(--paper-0); overflow-x: auto; }
.ctable { width: 100%; border-collapse: collapse; min-width: 560px; }
.ctable th {
  background: var(--navy-700); color: var(--paper-100); font-family: var(--font-body);
  font-weight: var(--fw-bold); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  text-align: left; padding: 16px 24px;
}
.ctable td { padding: 26px 24px; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--text-body); border-top: 1px solid var(--border-hairline); vertical-align: top; }
.ctable td:first-child { font-weight: var(--fw-bold); color: var(--navy-900); }
.ctable tr { transition: background .15s ease; }
.ctable tbody tr:hover { background: var(--paper-200); }
.ctable-note { margin-top: 14px; font-family: var(--font-body); font-size: 13px; color: var(--text-muted); }

/* ============ centered section bodies (faq, steps, checks, rel, form) ============ */
.faq, .steps, .checks, .rel, .pform { margin-left: auto; margin-right: auto; }
.faq-tail { text-align: center; margin-top: 6px; }
/* section-level CTA row: reusable so any section can carry a button */
.sect-cta { margin-top: 38px; text-align: center; }
.sect-cta__lead { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--text-muted); margin-bottom: 16px; }
.sect-cta__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.sect-cta--left { text-align: left; }
.sect-cta--left .sect-cta__row { justify-content: flex-start; }
/* These buttons carry descriptive link text, which is good anchor text but too
   long for a fixed-height nowrap button on a phone. Let them wrap instead. */
.sect-cta .btn, .faq-tail .btn {
  height: auto; min-height: 48px; max-width: 100%;
  padding: 13px 26px; white-space: normal; text-align: center; line-height: 1.35;
}

/* ============ faq — accordion in index-row language ============ */
.faq { max-width: 880px; border-top: 1px solid var(--border-hairline); }
.faq__item { border-bottom: 1px solid var(--border-hairline); }
.faq__q {
  display: flex; align-items: center; gap: 20px; width: 100%; padding: 22px 4px;
  background: none; border: none; cursor: pointer; text-align: left;
}
.faq__num { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 11.5px; letter-spacing: .08em; color: var(--taupe-600); width: 26px; flex: none; transition: color .2s ease; }
.faq__qtext { font-family: var(--font-display); font-size: 21px; line-height: 1.3; letter-spacing: -.01em; color: var(--navy-900); flex: 1; transition: color .2s ease; }
.faq__toggle {
  flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid var(--taupe-300); border-radius: 50%; color: var(--navy-700);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .3s var(--ease-out);
}
.faq__toggle svg { transition: transform .3s var(--ease-out); }
.faq__item.is-open .faq__num { color: var(--crimson); }
.faq__item.is-open .faq__qtext { font-style: italic; }
.faq__item.is-open .faq__toggle { background: var(--navy-700); border-color: var(--navy-700); color: #FBF9F6; }
.faq__item.is-open .faq__toggle svg { transform: rotate(45deg); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height .45s var(--ease-out); }
.faq__a-in { padding: 2px 4px 26px; }
.faq__a-in p { font-family: var(--font-body); font-size: 17.5px; line-height: 1.7; color: var(--text-body); }
.faq__a-in p + p { margin-top: 12px; }

/* ============ personas — tilted paper plaques ============ */
.personas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.personas--2 { grid-template-columns: repeat(2, 1fr); }
.persona {
  background: var(--paper-0); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 30px 30px 28px;
  transition: transform .3s var(--ease-out), box-shadow .25s ease;
}
.persona:nth-child(odd) { transform: rotate(-.7deg); }
.persona:nth-child(even) { transform: rotate(.7deg); }
.persona:hover { transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-lg); }
.persona__title { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-semibold); font-size: 21px; line-height: 1.25; color: var(--navy-900); }
.persona__rule { width: 30px; height: 2px; background: var(--red-500); margin-top: 12px; }
.persona__body { margin-top: 14px; font-family: var(--font-body); font-size: 16.5px; line-height: 1.65; color: var(--text-body); }

/* ============ attorney spotlight — navy band ============ */
.sect--attorney { background: linear-gradient(165deg, #1b3143 0%, #142430 60%, #0f1d27 100%); overflow: hidden; }
/* the section head sits on the navy band, so it takes the light treatment */
.sect--attorney .sect__h2 { color: var(--paper-100); }
.sect--attorney .sect__h2 em { color: var(--taupe-300); }
.sect--attorney .sect__eyebrow { color: var(--taupe-300); }
.sect--attorney .sect__intro { color: var(--navy-200); }
.attorney { display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: center; }
.attorney .sect__eyebrow { color: var(--taupe-300); }
/* Real headshot. Matches the placeholder's 26px radius so a band that has its
   photo and one that does not still read as the same component. aspect-ratio
   (not a height) so object-fit never re-crops the face at narrow widths. */
.attorney__photo {
  position: relative; border-radius: 26px; overflow: hidden;
  aspect-ratio: 4 / 5; background: rgba(251,249,246,.04);
  box-shadow: 0 18px 44px rgba(8,16,24,.34);
}
.attorney__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.attorney__h2 { margin-top: 0; font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 38px; line-height: 1.16; letter-spacing: -.015em; color: var(--paper-100); }
.attorney__h2 em { font-style: italic; color: var(--taupe-300); }
.attorney__body { margin-top: 20px; font-family: var(--font-body); font-size: 17.5px; line-height: 1.7; color: var(--navy-200); max-width: 58ch; }
.attorney__link { display: inline-block; margin-top: 22px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 14.5px; color: var(--paper-100); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; text-decoration-color: rgba(251,249,246,.45); }
.attorney__link:hover { color: var(--taupe-300); }

/* ============ image placeholder (site-wide) ============ */
.imgslot {
  position: relative; border: 1.5px dashed var(--taupe-400); border-radius: 26px;
  background: repeating-linear-gradient(-45deg, var(--paper-200) 0 14px, var(--paper-100) 14px 28px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 32px; text-align: center; min-height: 260px;
}
.imgslot--navy { border-color: rgba(191,169,149,.55); background: repeating-linear-gradient(-45deg, rgba(251,249,246,.05) 0 14px, rgba(251,249,246,.02) 14px 28px); }
.imgslot__icon { color: var(--taupe-600); opacity: .8; }
.imgslot--navy .imgslot__icon { color: var(--taupe-300); }
.imgslot__tag { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 10px; letter-spacing: .2em; color: var(--taupe-700); }
.imgslot--navy .imgslot__tag { color: var(--taupe-300); }
.imgslot__desc { font-family: var(--font-display); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--text-subtle); max-width: 40ch; }
.imgslot--navy .imgslot__desc { color: var(--navy-200); }
.imgslot__caption { margin-top: 12px; font-family: var(--font-body); font-size: 13px; color: var(--text-muted); text-align: center; }

/* ============ quote ============ */
.pquote { max-width: 780px; margin: 0 auto; text-align: center; position: relative; padding-top: 46px; }
.pquote__mark {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-style: italic; font-size: 110px; line-height: 1;
  color: var(--taupe-300); pointer-events: none;
}
.pquote__text { font-family: var(--font-display); font-style: italic; font-size: 26px; line-height: 1.5; color: var(--navy-800); }
.pquote__who { margin-top: 20px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 14px; color: var(--navy-900); }
.pquote__detail { margin-top: 4px; font-family: var(--font-body); font-size: 12.5px; color: var(--text-muted); }

/* ============ stats band (paper) ============ */
.pstats { display: flex; flex-wrap: wrap; border-top: 1px solid var(--border-hairline); padding-top: 28px; }
.pstats__item { flex: 1 1 200px; padding: 0 28px; border-left: 1px solid var(--border-hairline); margin-bottom: 12px; }
.pstats__item:first-child { padding-left: 0; border-left: none; }
.pstats__num { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 34px; color: var(--navy-900); }
/* items with no figure promote their label into the display slot, so the row
   never renders blank space where a number should be */
.pstats__num--label { font-size: 23px; line-height: 1.25; letter-spacing: -.01em; }
.pstats__label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 11px; letter-spacing: .14em; color: var(--crimson); margin-top: 4px; }
.pstats__detail { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); margin-top: 5px; }

/* ============ solo card — one-card sections never leave a dead right column */
.psolo { display: grid; grid-template-columns: 1fr minmax(300px, 400px); gap: 64px; align-items: center; }
.psolo__copy .sect__head { margin-bottom: 0; }
.psolo__card { display: grid; }

/* ============ rating card — testimonials aggregate, homepage badge language */
.ratecard {
  max-width: 520px; margin: 0 auto; text-align: center; background: var(--paper-0);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 44px 40px;
}
.ratecard__score { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 74px; line-height: 1; color: var(--navy-900); }
.ratecard__stars { display: flex; justify-content: center; gap: 5px; margin-top: 14px; }
.ratecard__label { margin-top: 16px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--crimson); }
.ratecard__detail { margin-top: 8px; font-family: var(--font-body); font-size: 14.5px; color: var(--text-muted); }

/* ============ postgrid — blog article cards + topic filter ============ */
.pfilter {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 940px; margin: 0 auto;
}
.pfilter__pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 13px;
  color: var(--navy-800); background: var(--paper-0);
  border: 1px solid var(--border-hairline); border-radius: 999px; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pfilter__pill:hover { background: var(--navy-800); border-color: var(--navy-800); color: var(--paper-0); }
.pfilter__pill:hover .pfilter__n { background: rgba(251,249,246,.22); color: var(--paper-0); }
.pfilter__pill.is-on { background: var(--navy-900); border-color: var(--navy-900); color: var(--paper-0); }
.pfilter__pill.is-on .pfilter__n { background: rgba(251,249,246,.22); color: var(--paper-0); }
.pfilter__n {
  font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 999px;
  background: var(--paper-200); color: var(--text-subtle); transition: background .2s ease, color .2s ease;
}
.pfilter__status {
  margin-top: 14px; text-align: center; font-family: var(--font-body);
  font-size: 13px; color: var(--text-subtle);
}

.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 38px; }
.ptile {
  display: flex; flex-direction: column; background: var(--paper-0);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ptile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--navy-200); }
.ptile__img { display: block; position: relative; aspect-ratio: 1450 / 1200; overflow: hidden; background: var(--paper-200); }
.ptile__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out); }
.ptile:hover .ptile__img img { transform: scale(1.04); }
/* posts still waiting on photography get the brand mark, not a broken frame */
.ptile__img--none { background: var(--gradient-navy); display: grid; place-items: center; }
.ptile__img--none img { width: 76px; height: auto; opacity: .3; transform: none; }
.ptile:hover .ptile__img--none img { transform: none; }
.ptile__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.ptile__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ptile__cat {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--crimson);
}
.ptile__date { font-family: var(--font-body); font-size: 12px; color: var(--text-subtle); }
.ptile__title {
  margin-top: 10px; font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: 21px; line-height: 1.24; color: var(--navy-900);
}
.ptile:hover .ptile__title { text-decoration: underline; text-decoration-color: var(--red-500); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ptile__desc {
  margin-top: 10px; flex: 1; font-family: var(--font-body); font-size: 16px;
  line-height: 1.62; color: var(--text-body);
}
.ptile__more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 13px; color: var(--crimson);
}
.ptile:hover .ptile__more { gap: 11px; }
.ptile__more svg { transition: transform .25s ease; }
.ptile:hover .ptile__more svg { transform: translateX(3px); }

/* newest article leads the grid at double width, until a filter is applied */
.ptile--feature { grid-column: span 2; flex-direction: row; }
.ptile--feature .ptile__img { flex: 0 0 52%; aspect-ratio: auto; }
.ptile--feature .ptile__body { justify-content: center; padding: 30px 32px; }
.ptile--feature .ptile__title { font-size: 27px; }
.ptile--feature .ptile__desc { flex: 0 1 auto; font-size: 17px; }
.pgrid.is-filtering .ptile--feature { grid-column: auto; flex-direction: column; }
.pgrid.is-filtering .ptile--feature .ptile__img { flex: none; aspect-ratio: 1450 / 1200; }
.pgrid.is-filtering .ptile--feature .ptile__body { padding: 22px 24px 24px; justify-content: flex-start; }
.pgrid.is-filtering .ptile--feature .ptile__title { font-size: 21px; }
.ptile[hidden] { display: none; }

/* ============ related — index rows ============ */
.rel { max-width: 880px; border-top: 1px solid var(--border-hairline); }
.rel__row {
  display: flex; align-items: center; gap: 20px; padding: 21px 4px;
  border-bottom: 1px solid var(--border-hairline); text-decoration: none;
  transition: background .2s ease;
}
.rel__row:hover { background: rgba(255,255,255,.55); }
.rel__title { font-family: var(--font-display); font-size: 22px; letter-spacing: -.01em; color: var(--navy-900); transition: color .2s ease; }
.rel__row:hover .rel__title { font-style: italic; text-decoration: underline; text-decoration-color: var(--red-500); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.rel__desc { flex: 1; text-align: right; font-family: var(--font-body); font-size: 13px; color: var(--text-subtle); padding-right: 6px; }
.rel__arrow {
  flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid var(--taupe-300); border-radius: 50%; color: var(--navy-700);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.rel__row:hover .rel__arrow { background: var(--navy-700); border-color: var(--navy-700); color: #FBF9F6; }

/* ============ page CTA — rounded navy container ============ */
.pcta { background: var(--paper-100); }
.pcta__card {
  position: relative; max-width: 1100px; margin: 0 auto; background: var(--gradient-navy);
  border-radius: 30px; box-shadow: var(--shadow-lg); overflow: hidden;
  padding: 76px 64px; text-align: center;
}
/* bottom-right, pulled in far enough that the bird's head and face sit inside
   the card (the head sits at roughly 90% across the artwork) */
.pcta__watermark { position: absolute; right: 4px; bottom: -54px; width: 400px; opacity: .07; pointer-events: none; }
.pcta__watermark img { width: 100%; height: auto; display: block; }
.pcta__eyebrow-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.pcta__eyebrow { color: var(--taupe-300); }
.pcta__h2 { position: relative; margin: 20px auto 0; max-width: 24ch; font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 40px; line-height: 1.16; letter-spacing: -.015em; color: var(--paper-100); }
.pcta__h2 em { font-style: italic; color: var(--taupe-300); }
/* 68ch, not the old 52ch: at 52ch the paragraph rendered 483px inside 972px of
   card, narrower than its own 557px headline, and the longest CTA bodies ran to
   12 centred lines. 68ch sits the body just wider than the h2 and stays inside
   the readable 45-75ch band. */
.pcta__body { position: relative; margin: 16px auto 0; max-width: 68ch; font-family: var(--font-body); font-size: 18px; line-height: 1.65; color: var(--navy-200); }
.pcta__expect { position: relative; display: flex; flex-direction: column; gap: 6px; margin-top: 22px; }
.pcta__expect p { font-family: var(--font-body); font-size: 15px; color: var(--taupe-300); }
.pcta__row { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; margin-top: 30px; }
.pcta__call { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 14.5px; color: var(--paper-100); text-decoration: none; }
.pcta__call:hover { color: var(--taupe-300); }

/* ============ Post hero (blog articles) ============ */
.phero--post .phero__h1 { font-size: 46px; max-width: 24ch; }
.phero--post .phero__in { padding-bottom: 72px; }
.phero__byline { display: flex; align-items: center; gap: 14px; margin-top: 20px; animation: dpUp .8s var(--ease-out) .28s backwards; }
.phero__cat {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--paper-100); border: 1px solid rgba(251,249,246,.4);
  border-radius: var(--radius-pill); padding: 6px 14px; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.phero__cat:hover { background: rgba(251,249,246,.1); color: var(--paper-100); }
.phero__bysep { width: 1px; height: 14px; background: rgba(251,249,246,.25); }
.phero__date { font-family: var(--font-body); font-size: 13px; color: var(--navy-300); }

/* ============ Hero visual (image placeholder + seal overlay) ============ */
.phero__visual { position: relative; width: 430px; min-height: 440px; align-self: center; animation: dpUp .9s var(--ease-out) .35s backwards; }
/* Standard interior hero frame (David, 2026-07-27): landscape and larger, so
   two-subject shots stay whole. aspect-ratio (not min-height) keeps the box
   the same shape at every width, so cover never crops a face back out; the
   clamp stops the wider frame from starving the copy column near 1120px. */
.phero__visual--wide { width: clamp(430px, 42vw, 580px); min-height: 0; aspect-ratio: 1450 / 1200; }
.phero__visual .hero__frame { position: absolute; inset: 22px -22px -22px 22px; border: 1px solid rgba(191,169,149,.5); border-radius: 30px; }
.phero__visual-img { position: absolute; inset: 0; border-radius: 26px; min-height: 0; padding: 28px; }
.phero__visual-stamp { position: absolute; left: -30px; bottom: 26px; z-index: 2; animation: dpSealIn .9s var(--ease-out) .55s backwards; }
.phero__stamp--seal {
  width: 116px; height: 116px; background: var(--navy-700);
  border: 1.5px solid rgba(251,249,246,.75); box-shadow: var(--shadow-lg);
}
.phero__stamp--seal .phero__stamp-ring { inset: 6px; }
.phero__stamp--seal .phero__stamp-label { font-size: 7.5px; }
.phero--post .phero__visual { width: 360px; min-height: 330px; }
/* must follow the rule above: same specificity, so source order decides */
.phero--post .phero__visual--wide { width: clamp(340px, 34vw, 480px); min-height: 0; }
.phero__stamp--seal { transform: rotate(-4deg); transition: transform .35s var(--ease-out); }
.phero__visual:hover .phero__stamp--seal { transform: rotate(0deg) scale(1.06); }
.phero__visual:hover .phero__stamp--seal .phero__stamp-ring { animation: dpSpin 9s linear infinite; }

/* ============ Hero portrait (bio pages) ============ */
.phero__portrait { position: relative; width: 400px; height: 480px; align-self: center; animation: dpUp .9s var(--ease-out) .32s backwards; }
.phero__portrait .hero__frame { position: absolute; inset: 22px -22px -22px 22px; border: 1px solid rgba(191,169,149,.5); border-radius: 30px; }
.phero__portrait-photo { position: absolute; inset: 0; z-index: 1; border-radius: 26px; overflow: hidden; }
.phero__portrait-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; }

/* ============ Form (contact / consultation) ============ */
.pform { max-width: 880px; background: var(--paper-0); border: 1px solid var(--border-hairline); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 44px 48px; }
.pform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.pform__field { display: flex; flex-direction: column; gap: 8px; }
.pform__field--full { grid-column: 1 / -1; }
.pform__label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe-700); }
.pform__input {
  font-family: var(--font-body); font-size: 15px; color: var(--navy-900);
  background: var(--paper-50); border: 1px solid var(--border-default);
  border-radius: var(--radius-pill); padding: 13px 20px; outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  appearance: none; -webkit-appearance: none; width: 100%;
}
select.pform__input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6153' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 20px center; padding-right: 44px;
}
.pform__input--area { border-radius: var(--radius-lg); resize: vertical; min-height: 130px; }
.pform__input:focus { border-color: var(--focus-ring); box-shadow: var(--shadow-focus); }
.pform__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.pform__privacy { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); }
.pform__note { margin-top: 18px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.6; color: var(--text-muted); max-width: 60ch; }
/* Honeypot. Bots fill anything they can find, so this has to be reachable in
   the DOM and invisible to people. Moved off-screen rather than
   display:none, because some bots skip hidden fields entirely, which would
   defeat the trap. aria-hidden + tabindex -1 keep it away from screen readers
   and the tab order. */
.pform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pform__error, .pform__success { font-family: var(--font-body); }
/* Same --crimson the booking widget's .book__error uses, so a failed send
   reads identically wherever it happens on the site. */
.pform__error { margin-top: 18px; font-size: 14.5px; line-height: 1.6; color: var(--crimson); max-width: 60ch; }
/* The success panel REPLACES the form rather than sitting under it: leaving a
   filled-in form on screen invites a second submission of the same message. */
.pform__success { max-width: 880px; margin-left: auto; margin-right: auto; background: var(--paper-0); border: 1px solid var(--border-hairline); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 44px 48px; }
/* Copy comes from the form section's `success` field in pagedata, so it is
   already translated per locale and needs no chrome pair. */
.pform__success-p { font-size: 18.5px; line-height: 1.6; color: var(--text-strong); max-width: 62ch; }
/* Some resets drop the UA [hidden] rule; make it explicit so a failed state
   can never flash on screen. */
.pform__error[hidden], .pform__success[hidden], [data-label-idle][hidden], [data-label-sending][hidden] { display: none; }
@media (max-width: 700px) {
  .pform__success { padding: 28px 22px; border-radius: var(--radius-lg); }
  .pform__success-p { font-size: 17px; }
}

/* ============ Offices ============ */
.offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.offices--2 { grid-template-columns: repeat(2, 1fr); }
/* A lone office card inside the psolo rail. Without this it inherits the
   three-column grid above and renders at a third of the rail, roughly 116px,
   which wraps the firm name and the address one word per line.
   Two classes deep on purpose: the responsive `.offices` rules further down
   this file would otherwise win on source order and put it back to 2 or 3
   columns. It must stay single-column at EVERY width.
   Capped rather than 1fr: below 1120px the psolo rail stacks under the copy at
   full content width, and an unconstrained card stretches the office photo to
   roughly 930px, which reads as a hero image rather than a card. The cap keeps
   it card-sized when stacked and still fills the 400px rail at desktop, while
   minmax(0, ...) lets it shrink normally on a phone. */
.offices.offices--solo { grid-template-columns: minmax(0, 420px); gap: 0; }
.office {
  display: flex; flex-direction: column; background: var(--paper-0);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.office:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.office__map .imgslot { border-radius: 0; border-left: none; border-right: none; border-top: none; }
/* Real office photo. 16:9 matches the source natively so nothing is re-cropped,
   and aspect-ratio keeps every card's banner the same height whether it has a
   photo or is still showing the placeholder. */
.office__photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-200); }
.office__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.office__body { position: relative; padding: 24px 28px 28px; }
.office__pin { position: absolute; top: 26px; right: 24px; color: var(--crimson); }
.office__name { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 23px; line-height: 1.15; color: var(--navy-900); padding-right: 30px; }
.office__line { margin-top: 6px; font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; color: var(--text-body); }
.office__line:first-of-type { margin-top: 12px; }
/* block, not inline-block: the generator emits phone and link with no
   whitespace between them, so as inline-blocks they ran together into
   "(561) 403-1188Visit our Atlanta office" whenever both fit on one line.
   width:fit-content keeps the hover underline hugging the text. */
.office__phone { display: block; width: fit-content; margin-top: 12px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 15px; color: var(--crimson); text-decoration: none; }
.office__phone:hover { text-decoration: underline; text-underline-offset: 4px; }
.office__hours { margin-top: 8px; font-family: var(--font-body); font-size: 13px; color: var(--text-muted); }
.office__link { display: block; width: fit-content; margin-top: 14px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 14px; color: var(--crimson); text-decoration: none; }
.office__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============ Jump nav pills ============ */
.sect--jumpnav .sect__in { padding-top: 40px; padding-bottom: 8px; }
.jumpnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.jumpnav__pill {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 13px;
  color: var(--navy-800); background: var(--paper-0); border: 1px solid var(--border-default);
  border-radius: var(--radius-pill); padding: 9px 18px; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.jumpnav__pill:hover { background: var(--navy-700); border-color: var(--navy-700); color: var(--paper-100); transform: translateY(-1px); }

/* ============ Booking card (hero scheduling widget) ============ */
.book {
  width: 470px; background: var(--paper-0); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); padding: 28px 30px 24px; position: relative;
  animation: dpUp .9s var(--ease-out) .35s backwards;
}
.book__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.book__eyebrow { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 10.5px; letter-spacing: .18em; color: var(--crimson); }
.book__steps { display: flex; align-items: center; gap: 6px; }
.book__dot {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--taupe-300);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic; font-weight: var(--fw-semibold);
  font-size: 11.5px; color: var(--taupe-600);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.book__dot-line { width: 12px; height: 1px; background: var(--taupe-300); }
.book__dot.is-active { background: var(--navy-700); border-color: var(--navy-700); color: var(--paper-100); }
.book__dot.is-done { border-color: var(--navy-700); color: var(--navy-700); }
.book__title { margin-top: 16px; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 21px; line-height: 1.2; color: var(--navy-900); }
.book__panel { display: none; }
.book__panel.is-active { display: block; animation: dpFade .3s ease; }

/* calendar */
.book__cal-head { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.book__month { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 15.5px; color: var(--navy-900); }
.book__nav {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--taupe-300);
  background: none; cursor: pointer; color: var(--navy-700);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.book__nav:hover:not(:disabled) { background: var(--navy-700); border-color: var(--navy-700); color: var(--paper-100); }
.book__nav:disabled { opacity: .35; cursor: default; }
.book__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 10px; }
.book__dow { text-align: center; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 9.5px; letter-spacing: .08em; color: var(--taupe-600); padding: 4px 0 6px; }
.book__day {
  aspect-ratio: 1; border: none; background: none; border-radius: 50%; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; color: var(--navy-800);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.book__day:hover:not(:disabled):not(.is-selected) { background: var(--navy-100); }
.book__day:disabled { color: var(--taupe-300); cursor: default; }
.book__day.is-today { box-shadow: inset 0 0 0 1px var(--taupe-400); }
.book__day.is-selected { background: var(--navy-700); color: var(--paper-100); font-weight: var(--fw-bold); }

/* time slots */
.book__slots-label { margin-top: 14px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-700); }
.book__slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; min-height: 34px; }
.book__slots-hint { font-family: var(--font-body); font-size: 12.5px; color: var(--text-muted); padding-top: 6px; }
.book__slot {
  border: 1px solid var(--taupe-300); background: var(--paper-50); border-radius: var(--radius-pill);
  padding: 7px 14px; cursor: pointer; font-family: var(--font-body); font-weight: var(--fw-bold);
  font-size: 12.5px; color: var(--navy-800);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.book__slot:hover:not(.is-selected) { border-color: var(--navy-600); }
.book__slot.is-selected { background: var(--navy-700); border-color: var(--navy-700); color: var(--paper-100); }

/* details step */
.book__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; margin-top: 14px; }
.book__field { display: flex; flex-direction: column; gap: 5px; }
.book__field--full { grid-column: 1 / -1; }
.book__label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe-700); }
.book input.pform__input, .book select.pform__input { padding: 10px 16px; font-size: 14px; }
.book__formats { display: flex; gap: 8px; }
.book__format {
  flex: 1; border: 1px solid var(--taupe-300); background: var(--paper-50); border-radius: var(--radius-pill);
  padding: 8px 4px; cursor: pointer; text-align: center;
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 12px; color: var(--navy-800);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.book__format.is-selected { background: var(--navy-700); border-color: var(--navy-700); color: var(--paper-100); }

/* review step */
.book__review { margin-top: 14px; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: 4px 18px; background: var(--paper-50); }
.book__rrow { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border-hairline); }
.book__rrow:last-child { border-bottom: none; }
.book__rlabel { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe-700); padding-top: 2px; flex: none; }
.book__rvalue { font-family: var(--font-body); font-size: 13.5px; color: var(--navy-900); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.book__fineprint { margin-top: 12px; font-family: var(--font-body); font-size: 12px; line-height: 1.55; color: var(--text-muted); }

/* actions / footer */
.book__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.book__back {
  background: none; border: none; cursor: pointer; font-family: var(--font-body);
  font-weight: var(--fw-bold); font-size: 13px; color: var(--navy-600); padding: 8px 4px;
}
.book__back:hover { color: var(--navy-900); }
.book__next { min-width: 190px; }
.book__next:disabled, .btn.book__next[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.book__error { margin-top: 10px; font-family: var(--font-body); font-size: 12.5px; color: var(--crimson); min-height: 0; }
.book__note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-hairline); font-family: var(--font-body); font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.book__note a { color: var(--crimson); font-weight: var(--fw-bold); text-decoration: none; }
.book__note a:hover { text-decoration: underline; }

/* success */
.book__success { display: none; text-align: center; padding: 26px 6px 10px; }
.book__success.is-active { display: block; animation: dpFade .4s ease; }
.book__success-seal {
  width: 62px; height: 62px; margin: 0 auto; border-radius: 50%; border: 1.5px solid var(--crimson);
  display: flex; align-items: center; justify-content: center; color: var(--crimson);
  position: relative; transform: rotate(-6deg); animation: dpStamp .5s var(--ease-out) .1s backwards;
}
.book__success-seal::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed rgba(140,17,27,.4); }
.book__success-title { margin-top: 16px; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 21px; color: var(--navy-900); }
.book__success-body { margin-top: 8px; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text-body); }

/* ============ Responsive ============ */
@media (max-width: 1120px) {
  .phero__in, .sect__in { padding-left: 40px; padding-right: 40px; }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .psolo { grid-template-columns: 1fr; gap: 36px; }
  .phero__statsrow { margin-top: 40px; }
  .ptile--feature { grid-column: span 2; }
  .ptile--feature .ptile__title { font-size: 24px; }
  .steps__bird { display: none; }
  /* Hero stacks: the aside sits directly under the title, ahead of the intro,
     CTAs and stats. Spacing rides on the aside's own margins (bottom is larger
     to clear the seal / frame overhang). */
  .phero__grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; }
  .phero__head, .phero__aside, .phero__body { grid-column: 1; grid-row: auto; }
  .phero__aside { margin: 36px 0 44px; }
  .phero__file { align-self: start; }
  .phero__h1 { font-size: 46px; }
  .pcards, .pcards--4 { grid-template-columns: repeat(2, 1fr); }
  .personas { grid-template-columns: repeat(2, 1fr); }
  .psplit { grid-template-columns: 1fr; gap: 40px; }
  .psplit__rail { position: static; max-width: 560px; }
  .prose-duo { grid-template-columns: 1fr; gap: 0; }
  .prose-duo__head { grid-column: 1; grid-row: 1; position: static; margin-bottom: 34px; }
  .prose-duo__head-in { padding-top: 0; }
  .prose-duo__ghost { font-size: 110px; top: -26px; left: auto; right: 0; }
  .duo-h2 { max-width: 22ch; }
  .prose-duo__body { grid-column: 1; grid-row: 2; }
  .prose-duo--bare .prose-duo__head { display: none; }
  .attorney { grid-template-columns: 1fr; gap: 40px; }
  .attorney__slot { max-width: 480px; }
  .offices { grid-template-columns: repeat(2, 1fr); }
  .phero__portrait { width: 340px; height: 410px; align-self: start; }
  .book { width: 100%; max-width: 470px; align-self: start; }
  .phero__visual { width: 100%; max-width: 430px; min-height: 340px; align-self: start; margin-left: 0; }
  .phero__visual--wide { width: 100%; max-width: 580px; min-height: 0; }
  /* post heroes pin the visual at 360px, which out-specifies the rule above and
     was widening the whole stacked column past the page padding */
  .phero--post .phero__visual { width: 100%; max-width: 360px; }
  .phero--post .phero__visual--wide { width: 100%; max-width: 480px; }
  .phero__visual-stamp { left: auto; right: -12px; bottom: -18px; }
  /* wide frames are shorter, so the seal has to sit further out and smaller
     or it covers a subject once the hero stacks */
  .phero__visual--wide .phero__stamp--seal { width: 92px; height: 92px; }
  .phero__visual--wide .phero__visual-stamp { right: -20px; bottom: -26px; }
}
@media (max-width: 700px) {
  /* The privacy page puts a phone number and an email on their own lines in a
     prose block. As inline text they are 20px tall; the mobile floor is 44. */
  .prose p > a[href^="tel:"], .prose p > a[href^="mailto:"] {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .phero__in { padding: 24px 22px 64px; }
  .pgrid { grid-template-columns: 1fr; gap: 20px; }
  .ratecard { padding: 34px 24px; }
  .ratecard__score { font-size: 58px; }
  .step__text--lead { font-size: 19px; }
  .ptile--feature, .ptile--feature .ptile__img { grid-column: auto; }
  .ptile--feature { flex-direction: column; }
  .ptile--feature .ptile__img { flex: none; aspect-ratio: 1450 / 1200; }
  .ptile--feature .ptile__body { padding: 20px 22px 22px; }
  .ptile--feature .ptile__title { font-size: 21px; }

  /* Blog index on a phone: the filter bar wrapped to seven stacked rows (307px
     of chrome before a single article) and 38 full-height cards made a 28,000px
     page. Chips scroll sideways in one row; cards become a thumb-left list so
     roughly three fit per screen instead of one. */
  .pfilter {
    flex-wrap: nowrap; justify-content: flex-start; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; padding: 2px 22px 10px; margin: 0 -22px;
    scrollbar-width: none;
  }
  .pfilter::-webkit-scrollbar { display: none; }
  .pfilter__pill {
    flex: 0 0 auto; scroll-snap-align: start;
    padding: 10px 15px; font-size: 13px; min-height: 44px;
  }
  .pgrid { gap: 14px; }
  .ptile { flex-direction: row; align-items: stretch; }
  .ptile__img { flex: 0 0 118px; aspect-ratio: auto; align-self: stretch; }
  .ptile__img--none img { width: 46px; }
  .ptile__body { padding: 14px 16px; justify-content: center; }
  .ptile__title { font-size: 16.5px; line-height: 1.32; }
  .ptile__desc { display: none; }
  .ptile__meta { gap: 8px; }
  .ptile__more { display: none; }
  /* the lead story keeps the full card treatment */
  .ptile--feature { flex-direction: column; }
  .ptile--feature .ptile__img { flex: none; aspect-ratio: 1450 / 1200; }
  .ptile--feature .ptile__desc { display: block; }
  .ptile--feature .ptile__more { display: inline-flex; }
  .sect__in, .sect--tight .sect__in { padding: 64px 22px 72px; }
  .phero__h1 { font-size: 34px; }
  .phero__sub { font-size: 21px; }
  .sect__h2 { font-size: 29px; }
  .pcta__h2 { font-size: 28px; }
  .pcta__card { padding: 56px 26px; border-radius: 24px; }
  .pcards, .pcards--2, .pcards--4, .personas, .personas--2 { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
  .steps__rail { left: 21px; }
  .steps__trail { left: 20.5px; }
  .steps__bird { width: 50px; height: 52px; left: -4px; }
  .step { gap: 20px; padding: 20px 0 26px; }
  .step__num { width: 44px; height: 44px; font-size: 17px; }
  .step__title { font-size: 19px; }
  .faq__qtext { font-size: 17.5px; }
  .faq__a-in { padding: 2px 0 22px; }
  .rel__desc { display: none; }
  .pintro__body { font-size: 19px; }
  .psplit__row { display: block; }
  .psplit__label { display: block; max-width: none; }
  .psplit__value { display: block; text-align: left; margin-top: 5px; }
  .offices, .offices--2 { grid-template-columns: 1fr; }
  .pform { padding: 28px 22px; border-radius: var(--radius-lg); }
  .pform__grid { grid-template-columns: 1fr; }
  .phero__portrait { width: 100%; max-width: 340px; height: 400px; }
  .jumpnav__pill { font-size: 12px; padding: 8px 14px; }
  .book { padding: 22px 18px 18px; border-radius: var(--radius-lg); }
  .book__fields { grid-template-columns: 1fr; }
  .book__actions { flex-wrap: wrap; }
  .book__next { flex: 1; min-width: 0; }
  .phero__stats { gap: 0; }
  .phero__stat { flex: 1 1 40%; padding: 0 0 0 16px; margin-bottom: 14px; }
  .phero__stat:nth-child(odd) { padding-left: 0; border-left: none; }
  .phero__stamp { width: 128px; height: 128px; }
  .phero__stamp-num { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .crumbs, .phero__eyebrow-row, .phero__h1, .phero__sub, .phero__intro, .phero__ctas, .phero__stats, .phero__file { animation: none !important; }
  .persona:nth-child(odd), .persona:nth-child(even) { transform: none; }
  .faq__a { transition: none; }
}

/* ============ continuation fragments (merged into parent section) ============ */
.sect-cont { margin-top: 64px; }
.prose--cont { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ============ Booking widget on phones ============
   This is the conversion flow, and it audited worst: 78x31 time slots at
   12.5px, 30x30 month arrows, calendar cells sized only by grid width. */
@media (max-width: 820px) {
  .book__nav { width: 44px; height: 44px; }
  .book__grid { gap: 4px; }
  .book__day { font-size: 15px; min-height: 42px; }
  .book__slots { gap: 10px; }
  .book__slot { padding: 12px 18px; font-size: 15px; min-height: 46px; }
  .book__slots-label { font-size: 11px; }
  .book__dow { font-size: 11px; }
  .book__month { font-size: 17px; }
}

/* ---- book: Clio Scheduler handoff rows (replaced the 3-step placeholder
   widget 2026-08-03). Quiet link rows, not red buttons: one brand-red CTA
   per view stays the hero's. Hover is a background change per the
   button-interaction rules. ---- */
.book__lead { margin-top: 10px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.book__group { margin-top: 18px; }
.book__group-label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--taupe-700);
  padding-bottom: 8px; border-bottom: 1px solid var(--border-hairline);
}
.book__group-price { color: var(--crimson); letter-spacing: .04em; white-space: nowrap; }
.book__opt {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 10px;
  border-bottom: 1px solid var(--border-hairline); border-radius: 8px;
  text-decoration: none; transition: background .15s ease;
}
.book__opt:hover, .book__opt:focus-visible { background: var(--paper-200); }
.book__opt svg { margin-left: auto; flex: 0 0 auto; color: var(--crimson); }
.book__opt-name { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 14.5px; color: var(--navy-900); white-space: nowrap; }
.book__opt-meta { font-family: var(--font-body); font-size: 12.5px; color: var(--text-muted); }

/* ---- smart-triage widget pieces (promoted from /test-booking/ 2026-08-04) ---- */
.book button.book__opt { width: 100%; border: 0; border-bottom: 1px solid var(--border-hairline); background: none; font: inherit; text-align: left; cursor: pointer; }
.book button.book__opt:hover, .book button.book__opt:focus-visible { background: var(--paper-200); }
.book__opt.is-selected { background: var(--paper-200); box-shadow: inset 0 0 0 1.5px var(--navy-300); }
.book textarea.pform__input { min-height: 74px; resize: vertical; }
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }
[data-panel="contact"] .book__field { grid-column: 1 / -1; }
[data-panel="contact"] .pform__input { font-size: 16px; padding-top: 12px; padding-bottom: 12px; }
.tb-recap { margin: 12px 0 0; padding: 12px 14px 11px; background: var(--paper-200); border-radius: 10px; }
.tb-recap-kicker { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe-700); margin: 0; }
.tb-recap-main { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 21px; line-height: 1.2; color: var(--navy-900); margin: 3px 0 0; }
.tb-recap-meta { font-family: var(--font-body); font-size: 12.5px; color: var(--text-muted); margin: 3px 0 0; }
.tb-result { border: 1px solid var(--border-hairline); border-radius: 12px; padding: 16px 16px 14px; margin-top: 14px; background: var(--paper-100); }
.tb-result-kicker { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-700); margin: 0 0 6px; }
.tb-result-name { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 21px; color: var(--navy-900); margin: 0; }
.tb-result-meta { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }
.tb-result-why { font-family: var(--font-body); font-size: 12.5px; color: var(--text-muted); margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--border-hairline); }
.tb-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.tb-actions .btn { justify-content: center; text-align: center; }
.tb-alt { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 13.5px; color: var(--crimson); background: none; border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); padding: 11px 16px; cursor: pointer; transition: background .15s ease; }
.tb-alt:hover, .tb-alt:focus-visible { background: var(--paper-200); }
.tb-tzline { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); margin: 6px 0 0; }
.tb-privacy { font-family: var(--font-body); font-size: 11.5px; line-height: 1.55; color: var(--text-muted); margin: 10px 0 0; }

/* ---- compact attorney cards (booking page) ---- */
.attc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.attc__photo img { width: 100%; height: auto; border-radius: 14px; display: block; }
.attc__name { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 20px; color: var(--navy-900); margin: 14px 0 0; }
.attc__cred { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--taupe-700); margin: 4px 0 0; }
.attc__focus { font-family: var(--font-body); font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin: 8px 0 0; }
@media (max-width: 700px) { .attc__grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---- chrome-less page footer: the binding legal line, nothing else ---- */
.chromefree-foot { background: var(--navy-900); padding: 34px 22px 30px; }
.chromefree-foot__in { max-width: 820px; margin: 0 auto; }
.chromefree-foot .footer__disclaimer p, .chromefree-foot__line { font-family: var(--font-body); font-size: 11.5px; line-height: 1.65; color: var(--navy-300); margin: 0 0 10px; }
.chromefree-foot__line { margin-bottom: 0; }
.chromefree-foot a { color: var(--taupe-300); text-decoration: none; }
.chromefree-foot a:hover { text-decoration: underline; }
/* "Cookie settings" is a button here too; match the links beside it exactly */
.chromefree-foot__btn { color: var(--taupe-300); text-decoration: none; }
.chromefree-foot__btn:hover { color: var(--taupe-300); text-decoration: underline; }

/* ---- chrome-less booking hero: one centered column (test-page layout) ---- */
.bhero { background: var(--gradient-navy); padding: 44px 20px 68px; }
.bhero__in { max-width: 470px; margin: 0 auto; }
.bhero__head { margin-bottom: 22px; }
.bhero__head .eyebrow { color: var(--taupe-300); }
.bhero__h1 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 30px; line-height: 1.22; color: var(--paper-100); margin: 12px 0 0; letter-spacing: -0.01em; }
.bhero__intro { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--navy-200); margin: 12px 0 0; }
.bhero .book { width: 100%; max-width: 470px; margin: 0 auto; animation: none; }