/* ==========================================================
   Florida Probate Lawyers — shared stylesheet
   Palette tuned to the logo: navy #052542, gold #C39F54
   ========================================================== */

:root {
  --navy-950: #031A30;
  --navy-900: #052542;
  --navy-800: #103456;
  --harbor: #2E4A70;
  --slate: #4A6285;
  --steel: #7489A6;
  --mist: #9FB2C8;
  --haze: #DCE3EB;

  --gold-300: #E3CC96;
  --gold-500: #C39F54;
  --gold-700: #7A5C22;

  --parchment-50: #FAF7F0;
  --parchment-100: #F4EEE1;
  --parchment-200: #E8DEC8;
  --parchment-300: #D6C8A8;
  --ink: #2A3547;
  --error: #9B2C2C;

  --font-head: "Alegreya Sans", "Source Sans 3", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  --header-h: 80px;
  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 8vw, 6.5rem);
  --grain-opacity: .06;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--parchment-100);
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-700); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--navy-900); }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy-950);
  margin: 0 0 .6em;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(2.5rem, 3.6vw + 1.2rem, 4.25rem); line-height: 1.04; font-weight: 700; }
h2 { font-size: clamp(1.9rem, 1.9vw + 1.2rem, 2.75rem); line-height: 1.12; font-weight: 700; }
h3 { font-size: 1.35rem; line-height: 1.25; font-weight: 700; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
.prose { max-width: 68ch; }
.lead { font-size: clamp(1.15rem, .5vw + 1rem, 1.3rem); line-height: 1.6; }
.eyebrow {
  font-family: "Alegreya Sans SC", var(--font-head);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: .08em;
  color: var(--gold-700);
  margin: 0 0 .75rem;
}
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--navy-900); color: var(--parchment-100);
  padding: .6rem 1rem; border-radius: 3px;
}
.skip-link:focus { top: 1rem; color: var(--parchment-100); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
section[id], div[id], li[id] { scroll-margin-top: calc(var(--header-h) + 1.25rem); }

/* ---------- Themes (alternating light / navy) ---------- */
.theme-parchment { background: var(--parchment-100); }
.theme-parchment-light { background: var(--parchment-50); }
.theme-navy, .theme-navy-mid, .theme-navy-deep { color: var(--haze); }
.theme-navy { background: var(--navy-900); }
.theme-navy-mid { background: var(--navy-800); }
.theme-navy-deep { background: var(--navy-950); }
:is(.theme-navy, .theme-navy-mid, .theme-navy-deep) :is(h1, h2, h3, h4) { color: var(--parchment-100); }
:is(.theme-navy, .theme-navy-mid, .theme-navy-deep) .eyebrow { color: var(--gold-500); }
:is(.theme-navy, .theme-navy-mid, .theme-navy-deep) a:not(.btn) { color: var(--gold-300); }
:is(.theme-navy, .theme-navy-mid, .theme-navy-deep) a:not(.btn):hover { color: var(--parchment-100); }
.theme-parchment-light + .theme-parchment-light,
.theme-parchment + .theme-parchment { border-top: 1px solid var(--parchment-300); }

/* ---------- Parchment grain (inline SVG, no image requests) ---------- */
.grain { position: relative; isolation: isolate; }
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain--navy { --grain-opacity: .05; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; min-height: 48px;
  padding: .8rem 1.45rem;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; text-align: center;
  border: 1px solid transparent; border-radius: 3px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn--gold { background: var(--gold-500); color: var(--navy-950); }
.btn--gold:hover { background: var(--gold-300); color: var(--navy-950); }
.btn--navy { background: var(--navy-900); color: var(--parchment-100); }
.btn--navy:hover { background: var(--navy-800); color: var(--parchment-100); }
.btn--outline-light { border-color: var(--mist); color: var(--parchment-100); background: transparent; }
.btn--outline-light:hover { border-color: var(--gold-500); color: var(--parchment-100); }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--parchment-50);
  border-bottom: 1px solid var(--gold-500);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: var(--header-h);
}
.site-logo { display: block; flex-shrink: 0; }
.site-logo img { height: 54px; width: auto; }
.nav-toggle {
  display: none;
  align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--parchment-300); border-radius: 3px;
  padding: .55rem .8rem; min-height: 44px;
  font: 600 .95rem var(--font-body); color: var(--navy-900); cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 18px; height: 2px; background: var(--navy-900); position: relative;
  transition: transform .2s ease;
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .25rem; }
.site-nav a {
  display: block; padding: .5rem .7rem;
  font-weight: 600; font-size: .98rem; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.site-nav a:hover { color: var(--navy-900); border-bottom-color: var(--parchment-300); }
.site-nav a.is-active { color: var(--navy-900); border-bottom-color: var(--gold-700); }
.site-nav .nav-cta { margin-left: .75rem; }
.site-nav .nav-cta a {
  background: var(--navy-900); color: var(--parchment-100);
  border: 0; border-radius: 3px; padding: .65rem 1.1rem;
}
.site-nav .nav-cta a:hover, .site-nav .nav-cta a.is-active { background: var(--navy-800); color: var(--parchment-100); }

@media (max-width: 1219px) {
  :root { --header-h: 68px; }
  .site-logo img { height: 44px; }
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--parchment-50);
    border-bottom: 1px solid var(--gold-500);
    box-shadow: 0 18px 30px -18px rgba(3, 26, 48, .35);
    display: none;
  }
  .js .site-nav.is-open { display: block; }
  .js .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.25rem; }
  .js .site-nav a { padding: .85rem 0; border-bottom: 1px solid var(--parchment-200); }
  .js .site-nav a.is-active { border-bottom-color: var(--parchment-200); box-shadow: inset 3px 0 0 var(--gold-700); padding-left: .85rem; }
  .js .site-nav .nav-cta { margin: 1rem 0 0; }
  .js .site-nav .nav-cta a { text-align: center; padding: .9rem 1rem; }
  /* Without JavaScript, the menu simply wraps below the logo */
  .no-js .site-header__inner { flex-wrap: wrap; padding-block: .75rem; }
  .no-js .site-nav ul { flex-wrap: wrap; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(4.5rem, 9vw, 7.5rem); overflow: hidden; }
.hero .container { position: relative; }
.hero__content { max-width: 760px; position: relative; z-index: 1; }
.hero h1 { margin-bottom: .35em; }
.hero .lead { color: var(--haze); max-width: 60ch; }
.hero__meta { margin-top: 2.25rem; color: var(--mist); font-size: .98rem; }
/* The gold arc echoes the ring around the logo's column */
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(640px, 70vw); aspect-ratio: 1;
  right: max(-180px, -12vw); top: 50%;
  border: 2px solid var(--gold-500); border-right-color: transparent; border-radius: 50%;
  transform: translateY(-50%) rotate(-35deg);
  opacity: .45;
}
/* Optional photo: set --hero-image on the section, e.g. style="--hero-image:url('/images/hero.webp')" */
.hero--image {
  background-image: linear-gradient(rgba(5, 37, 66, .86), rgba(5, 37, 66, .86)), var(--hero-image);
  background-size: cover; background-position: center;
}
.hero--compact { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.hero--compact::after { width: min(460px, 60vw); opacity: .35; }

.breadcrumb { font-size: .95rem; color: var(--mist); margin-bottom: 1.5rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: var(--steel); }

.jump-links { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(159, 178, 200, .3); }
.jump-links p { font-size: .95rem; color: var(--mist); margin-bottom: .6rem; }
.jump-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.jump-links a {
  display: inline-block; padding: .4rem .85rem; border: 1px solid rgba(159, 178, 200, .45);
  border-radius: 999px; font-size: .95rem; text-decoration: none;
}
.theme-navy .jump-links a { color: var(--parchment-100); }
.theme-navy .jump-links a:hover { border-color: var(--gold-500); color: var(--parchment-100); }

/* ---------- Layout helpers ---------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) {
  .split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--6-6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.section-intro { max-width: 68ch; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.section-intro p { font-size: 1.1rem; }
.gold-rule { width: 56px; height: 2px; background: var(--gold-500); margin: 0 0 1.5rem; border: 0; }

/* Panel used for asides on parchment */
.panel {
  background: var(--parchment-50);
  border: 1px solid var(--parchment-300);
  border-radius: 4px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.theme-parchment-light .panel { background: var(--parchment-100); }
.panel h3 { font-size: 1.2rem; }

/* Gold check list */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding-left: 1.9rem; margin-bottom: .7rem; }
.checklist li::before {
  content: ""; position: absolute; left: .2rem; top: .45em;
  width: .45rem; height: .8rem;
  border: solid var(--gold-700); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
:is(.theme-navy, .theme-navy-mid) .checklist li::before { border-color: var(--gold-500); }
.checklist--columns { columns: 2 280px; column-gap: 2.5rem; }
.checklist--columns li { break-inside: avoid; }

/* Glossary */
.glossary { margin: 0; }
.glossary dt { font-family: var(--font-head); font-weight: 700; color: var(--navy-900); font-size: 1.1rem; }
.glossary dd { margin: .15rem 0 1.1rem; }
.glossary dd:last-child { margin-bottom: 0; }

/* ---------- Process: horizontal timeline (home) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 1.5rem; counter-reset: step; }
.timeline li { position: relative; counter-increment: step; }
.timeline__marker, .steps__marker {
  display: grid; place-items: center;
  border: 2px solid var(--gold-500); border-radius: 50%;
  font-family: var(--font-head); font-weight: 700; color: var(--gold-300);
  background: var(--navy-900);
  position: relative; z-index: 1;
}
.timeline__marker { width: 52px; height: 52px; font-size: 1.3rem; }
.timeline h3 { font-size: 1.15rem; margin: 1.1rem 0 .35rem; }
.timeline p { font-size: .98rem; color: var(--mist); }
.timeline li:not(:last-child)::after {
  content: ""; position: absolute; background: rgba(195, 159, 84, .55);
}
@media (min-width: 1000px) {
  .timeline { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .timeline li:not(:last-child)::after { height: 1px; top: 26px; left: 64px; right: -1.1rem; }
}
@media (max-width: 999px) {
  .timeline__link { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 1.25rem; }
  .timeline h3 { margin-top: .75rem; }
  .timeline__link > :not(.timeline__marker) { grid-column: 2; }
  .timeline__marker { grid-row: 1 / span 2; }
  .timeline li:not(:last-child)::after { width: 1px; left: 25.5px; top: 60px; bottom: -1.75rem; }
}
.after-link { margin-top: 2.75rem; }

/* ---------- Process: vertical stepper (probate page) ---------- */
.steps { list-style: none; margin: 0; padding: 0; max-width: 880px; }
.steps li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: clamp(1.25rem, 3vw, 2.25rem);
  position: relative; padding-bottom: clamp(2.25rem, 4vw, 3rem);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 31.5px; top: 72px; bottom: 8px;
  width: 1px; background: rgba(195, 159, 84, .55);
}
.steps__marker { width: 64px; height: 64px; font-size: 1.55rem; }
.steps__body { padding-top: .7rem; }
.steps h3 { font-size: 1.45rem; margin-bottom: .45rem; }
.steps p { color: var(--haze); }
.steps .our-role {
  margin-top: .9rem; padding: .85rem 1.1rem;
  background: rgba(3, 26, 48, .45); border-left: 2px solid var(--gold-500);
  font-size: .98rem; color: var(--haze);
}
.steps .our-role strong { color: var(--gold-300); font-weight: 600; }

/* ---------- Two-path comparison (home) ---------- */
.paths { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) {
  .paths { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .paths > * { padding-inline: clamp(1.5rem, 3vw, 3rem); }
  .paths > :first-child { padding-left: 0; border-right: 1px solid var(--parchment-300); }
}
.paths h3 { font-size: 1.55rem; }
.paths .path-label { font-size: .95rem; color: var(--slate); margin-bottom: .35rem; }
.note { margin-top: 2.5rem; font-size: 1rem; color: var(--slate); }

/* Comparison table (probate page) */
.table-wrap { overflow-x: auto; margin: 0 0 3.5rem; border: 1px solid var(--parchment-300); border-radius: 4px; background: var(--parchment-50); }
.compare { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 1rem; }
.compare caption { text-align: left; padding: 1.1rem 1.25rem; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--navy-950); border-bottom: 1px solid var(--parchment-300); }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 1rem 1.25rem; border-bottom: 1px solid var(--parchment-200); }
.compare tr:last-child > * { border-bottom: 0; }
.compare thead th { background: var(--navy-900); color: var(--parchment-100); font-family: var(--font-head); font-size: 1.1rem; }
.compare tbody th { width: 22%; font-weight: 600; color: var(--navy-900); }

/* Non-probate asset columns */
.features { display: grid; gap: 2rem 2.5rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 3.5rem; }
@media (min-width: 860px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature { border-top: 2px solid var(--navy-900); padding-top: 1.25rem; }
.feature h3 { font-size: 1.25rem; }

/* ---------- Values ledger (home) ---------- */
.values { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 820px) { .values { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.value { border-top: 1px solid var(--parchment-300); padding: 1.5rem 0 1.75rem; }
.value h3 { font-size: 1.3rem; margin-bottom: .35rem; color: var(--navy-900); }
.value p { margin: 0; }

/* ---------- Callouts & CTA bands ---------- */
.callout { display: grid; gap: 1.5rem 3rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .callout { grid-template-columns: minmax(0, 1fr) auto; } }
.callout h2 { font-size: clamp(1.7rem, 1.4vw + 1.1rem, 2.3rem); }
.callout p { max-width: 64ch; }

.fee-note {
  border: 1px solid rgba(195, 159, 84, .6); border-radius: 4px;
  padding: 1.4rem 1.5rem; margin-top: 1.75rem;
  background: rgba(3, 26, 48, .35);
}
.fee-note h3 { font-size: 1.2rem; color: var(--gold-300) !important; margin-bottom: .4rem; }

.cta-band { text-align: left; overflow: hidden; }
.cta-band .container { position: relative; }
.cta-band h2 { max-width: 20ch; }
.cta-band p { max-width: 56ch; font-size: 1.15rem; }
.cta-band::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 420px; aspect-ratio: 1; right: -120px; bottom: -220px;
  border: 2px solid var(--gold-500); border-left-color: transparent; border-radius: 50%;
  transform: rotate(20deg); opacity: .35;
}

/* ---------- Duration bars (costs & timeline) ---------- */
.durations { margin: 1.25rem 0 1.75rem; }
.duration { margin-bottom: 1.4rem; }
.duration__label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; font-size: 1rem; margin-bottom: .45rem; }
.duration__label strong { color: var(--parchment-100); font-weight: 600; }
.duration__label span { color: var(--mist); }
.duration__track { height: 10px; background: rgba(159, 178, 200, .18); border-radius: 999px; overflow: hidden; }
.duration__fill { height: 100%; background: var(--gold-500); border-radius: 999px; }
.duration__fill--formal { width: 100%; }
.duration__fill--summary { width: 42%; background: repeating-linear-gradient(90deg, var(--gold-500) 0 14px, rgba(195, 159, 84, .45) 14px 20px); }

/* ---------- FAQ ---------- */
.faq { max-width: 880px; border-top: 1px solid var(--parchment-300); }
.faq details { border-bottom: 1px solid var(--parchment-300); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.25rem 0;
  font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; line-height: 1.35; color: var(--navy-950);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 12px; height: 12px;
  border: solid var(--gold-700); border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq summary:hover { color: var(--harbor); }
.faq .faq__answer { padding: 0 0 1.4rem; max-width: 72ch; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.form-card { background: var(--parchment-50); border: 1px solid var(--parchment-300); border-radius: 4px; padding: clamp(1.5rem, 4vw, 2.75rem); }
.form-grid { display: grid; gap: 1.25rem 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .field--full { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 600; color: var(--navy-950); margin-bottom: .4rem; }
.field .optional { font-weight: 400; color: var(--slate); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: #FFFDF8; border: 1px solid var(--parchment-300); border-radius: 3px;
  padding: .75rem .9rem; min-height: 48px;
}
.field textarea { min-height: 160px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold-700) 50%), linear-gradient(135deg, var(--gold-700) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-800); outline: 3px solid rgba(195, 159, 84, .55); outline-offset: 0; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); }
.field-error { color: var(--error); font-size: .92rem; margin-top: .35rem; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-status { margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: 3px; font-weight: 600; }
.form-status:empty { display: none; }
.form-status--success { background: #E7EFE3; color: #2F4F2A; border: 1px solid #B9CDB1; }
.form-status--error { background: #F6E6E3; color: var(--error); border: 1px solid #E0B8B1; }
.form-disclaimer { font-size: .92rem; color: var(--slate); margin-top: 1.5rem; }
.btn[disabled] { opacity: .7; cursor: wait; }

.expect { list-style: none; margin: 0 0 2.5rem; padding: 0; counter-reset: exp; }
.expect li { counter-increment: exp; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.expect li::before {
  content: counter(exp);
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 2px solid var(--gold-500); border-radius: 50%;
  font-family: var(--font-head); font-weight: 700; color: var(--navy-900);
}
.expect strong { display: block; color: var(--navy-950); font-family: var(--font-head); font-size: 1.1rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: var(--mist); padding-block: 3.5rem 2rem; font-size: .98rem; }
.site-footer a { color: var(--haze); text-decoration: none; }
.site-footer a:hover { color: var(--gold-300); text-decoration: underline; }
.footer-grid { display: grid; gap: 2rem 3rem; grid-template-columns: minmax(0, 1fr); padding-bottom: 2.5rem; border-bottom: 1px solid rgba(159, 178, 200, .2); }
@media (min-width: 820px) { .footer-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.footer-brand { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--parchment-100); margin-bottom: .4rem; }
.footer-brand span { display: block; font-family: "Alegreya Sans SC", var(--font-head); font-weight: 500; font-size: 1rem; letter-spacing: .12em; color: var(--gold-500); }
.site-footer h2 { font-size: 1.05rem; color: var(--parchment-100); margin-bottom: .75rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
.footer-legal { padding-top: 1.75rem; font-size: .9rem; color: var(--steel); }
.footer-legal p { max-width: 90ch; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Keep the hero arc off the text on small screens */
@media (max-width: 700px) {
  .hero::after { width: 340px; right: -250px; top: 0; transform: rotate(-35deg); opacity: .3; }
  .cta-band::after { right: -260px; }
}

/* ==========================================================
   Photography (placeholder Unsplash images sit behind navy overlays)
   ========================================================== */
.bg-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.bg-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bg-media::after { content: ""; position: absolute; inset: 0; }
/* Hero: denser navy on the text side, more photo on the right */
.hero--photo .bg-media::after {
  background: linear-gradient(90deg, rgba(5, 37, 66, .95) 0%, rgba(5, 37, 66, .86) 50%, rgba(5, 37, 66, .66) 100%);
}
.cta-band--photo .bg-media::after { background: rgba(5, 37, 66, .88); }
@media (max-width: 800px) {
  .hero--photo .bg-media::after { background: rgba(5, 37, 66, .9); }
}

/* ==========================================================
   Hover and focus refinements
   ========================================================== */
.btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn--gold:hover, .btn--navy:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgba(3, 26, 48, .7); }
.btn--outline-light:hover { background: rgba(195, 159, 84, .12); }
.btn:active { transform: translateY(0); box-shadow: none; }

a:not(.btn) { transition: color .2s ease, text-decoration-color .2s ease; }
.prose a, .note a, .after-link a, .panel a { text-decoration-color: rgba(122, 92, 34, .45); }
.prose a:hover, .note a:hover, .after-link a:hover, .panel a:hover { text-decoration-color: currentColor; }

.site-logo { transition: opacity .2s ease; }
.site-logo:hover { opacity: .85; }

/* Desktop nav: a gold underline that draws in from the left */
@media (min-width: 1220px) {
  .site-nav li:not(.nav-cta) a { border-bottom: 0; position: relative; }
  .site-nav li:not(.nav-cta) a::after {
    content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .2rem; height: 2px;
    background: var(--gold-700); transform: scaleX(0); transform-origin: left center;
    transition: transform .25s ease;
  }
  .site-nav li:not(.nav-cta) a:hover::after { transform: scaleX(.6); background: var(--parchment-300); }
  .site-nav li:not(.nav-cta) a.is-active::after { transform: scaleX(1); background: var(--gold-700); }
}
.site-nav .nav-cta a { transition: background-color .2s ease, transform .2s ease; }
.site-nav .nav-cta a:hover { transform: translateY(-1px); }

/* Home timeline stages link to their step on the probate page */
.timeline__link { display: block; color: inherit; text-decoration: none; border-radius: 4px; }
.timeline__marker, .steps__marker { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
.timeline__link h3 { transition: color .2s ease; }
.timeline__link:hover .timeline__marker, .timeline__link:focus-visible .timeline__marker {
  background: var(--gold-500); color: var(--navy-950); transform: scale(1.06);
}
.timeline__link:hover h3, .timeline__link:focus-visible h3 { color: var(--gold-300); }
.timeline__link:focus-visible { outline-offset: 6px; }

.jump-links a { transition: background-color .2s ease, border-color .2s ease; }
.theme-navy .jump-links a:hover { background: rgba(195, 159, 84, .14); }

.faq summary { transition: color .2s ease, padding-left .25s ease; }
.faq summary:hover { padding-left: .35rem; }
.faq summary:hover::after { border-color: var(--navy-900); }
.faq details[open] summary { color: var(--harbor); }

.field input, .field select, .field textarea { transition: border-color .2s ease, background-color .2s ease; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--steel); }

/* ==========================================================
   Scroll-linked header state (class set by site.js; no layout shift)
   ========================================================== */
.site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.site-logo img { transition: transform .3s ease; transform-origin: left center; }
.site-header.is-scrolled { box-shadow: 0 10px 28px -20px rgba(3, 26, 48, .55); }
.site-header.is-scrolled .site-logo img { transform: scale(.9); }

/* ==========================================================
   Motion
   Everything here is progressive enhancement: content is fully
   visible by default and only animates in browsers that support
   CSS scroll-driven animations, with reduced motion respected.
   No JavaScript is required for any content to appear.
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* One page-load moment: the hero settles in */
  @keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .hero__content > * { animation: hero-in .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__content > :nth-child(2) { animation-delay: .08s; }
  .hero__content > :nth-child(3) { animation-delay: .16s; }
  .hero__content > :nth-child(4) { animation-delay: .24s; }
  .hero__content > :nth-child(5) { animation-delay: .32s; }

  @supports (animation-timeline: view()) {

    /* Reading progress line under the sticky header */
    @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .site-header::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: var(--gold-500); transform-origin: left center; transform: scaleX(0);
      animation: progress linear both; animation-timeline: scroll(root);
    }

    /* Gentle reveals as content enters the viewport */
    @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
    .section-intro, .value, .feature, .panel, .paths > *, .callout, .timeline li,
    .faq details, .table-wrap, .checklist--columns, .contact-grid > *, .cta-band .container > *, .expect li {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    /* Hero photo drifts slightly slower than the page */
    @keyframes drift { from { transform: translateY(0) scale(1.08); } to { transform: translateY(4%) scale(1.08); } }
    .hero--photo .bg-media img { animation: drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }

    /* Probate stepper: each connector draws down and each marker lights up as you read */
    @keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    .steps li:not(:last-child)::after {
      transform-origin: top center;
      animation: draw linear both; animation-timeline: view(); animation-range: cover 25% cover 60%;
    }
    @keyframes light-up {
      from { background: var(--navy-900); color: var(--mist); border-color: rgba(195, 159, 84, .45); }
      to { background: var(--gold-500); color: var(--navy-950); border-color: var(--gold-500); }
    }
    .steps__marker { animation: light-up linear both; animation-timeline: view(); animation-range: entry 100% cover 45%; }
    .steps li { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }

    /* Timeline bars fill in when they come into view */
    @keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .duration__fill { transform-origin: left center; animation: fill linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  }
}

/* Mobile: drop the vertical connector lines in the process layouts */
@media (max-width: 767px) {
  .timeline li:not(:last-child)::after,
  .steps li:not(:last-child)::after { display: none; }
}