/* Main stylesheet — layout, components, utilities. Tokens live in tokens.css. */
@import url("tokens.css");

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-900);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
/* Headings split the logo's two type colors: the wordmark navy carries the
   page and section titles, the logo's teal carries the level below them, so
   the hierarchy reads in brand colors instead of one flat navy. */
h1, h2, h3, h4 { font-family: var(--font-head); line-height: var(--lh-head); font-weight: 600; }
h1, h2 { color: var(--logo-navy); }
h3 { color: var(--logo-teal-text); }
h4 { color: var(--logo-navy-deep); }
h1 { font-size: var(--fs-3xl); margin: 0 0 var(--sp-4); }
h2 { font-size: var(--fs-2xl); margin: 0 0 var(--sp-4); }
h3 { font-size: var(--fs-xl); margin: 0 0 var(--sp-3); }

/* Page-title rule — echoes the teal knot line under the wordmark, tailing off
   into the yarn ball's sand the way the line does in the logo. The home hero
   is exempt: the logo image above it already draws that line. */
h1::after {
  content: ""; display: block; width: 84px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--logo-teal) 0 62%, var(--logo-sand) 62% 100%);
  margin-top: var(--sp-3);
}
.hero h1::after { display: none; }
.center h1::after, h1.center::after { margin-left: auto; margin-right: auto; }

p { margin: 0 0 var(--sp-4); max-width: var(--maxw-prose); }
a { color: var(--logo-teal-text); }
a:hover { color: var(--logo-navy); }

/* Lead-in emphasis picks up the wordmark navy — but never inside a link,
   where it would fight the link color. */
.prose strong, .card strong { color: var(--logo-navy); }
a strong { color: inherit; }

/* ---------- Accessibility helpers ---------- */
:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: 4px; }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--sage-700); color: var(--white); padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: var(--white); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }
.section { padding: var(--sp-8) 0; }
.section--tight { padding: var(--sp-7) 0; }
.section--sand { background: var(--sand-100); }
.section--sage { background: var(--sage-50); }
main { display: block; }
.prose { max-width: var(--maxw-prose); }
.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }
.lead { font-size: var(--fs-lg); color: var(--ink-700); }
/* Eyebrow — set like the logo's "IEP ADVOCACY AND COACHING" line: teal caps
   flanked by short teal dashes. */
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-xs);
  font-weight: 700; color: var(--logo-teal-text); margin: 0 0 var(--sp-2);
  display: flex; align-items: center; gap: var(--sp-3);
}
.eyebrow::before, .eyebrow::after {
  content: ""; flex: none; width: 1.75rem; height: 2px; border-radius: 999px;
  background: var(--logo-teal);
}
/* Flex ignores text-align, so re-center explicitly — both when .center sits on
   the eyebrow itself (home) and when it's inherited from a wrapper (error,
   payment-result). */
.eyebrow.center, .center .eyebrow { justify-content: center; }

/* ---------- Header / nav ---------- */
.site-header { background: var(--cream); border-bottom: 1px solid var(--sand-200); position: sticky; top: 0; z-index: 40; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); max-width: var(--maxw); margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-head); font-weight: 600; font-size: var(--fs-lg); color: var(--logo-navy); text-decoration: none; }
.brand svg { flex: none; }
.brand__logo { width: auto; height: 64px; }
@media (max-width: 620px) { .brand__logo { height: 44px; } }
.nav { display: flex; align-items: center; gap: var(--sp-2); }
.nav__list { display: flex; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.nav__link { display: inline-block; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); color: var(--ink-700); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); }
.nav__link:hover { background: var(--sage-50); color: var(--logo-navy); }
.nav__link[aria-current="page"] { color: var(--logo-navy); background: var(--sage-100); }
.nav-toggle { display: none; }
.nav-scrim { display: none; }

/* Mobile nav */
@media (max-width: 860px) {
  .nav { position: fixed; inset: 0 0 0 auto; width: min(320px, 80vw); background: var(--cream); flex-direction: column; align-items: stretch; padding: var(--sp-7) var(--sp-5); box-shadow: var(--shadow-md); transform: translateX(100%); transition: transform 0.2s ease; }
  .nav[data-open="true"] { transform: translateX(0); }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { padding: var(--sp-3); font-size: var(--fs-base); }
  .nav-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); background: none; border: 1px solid var(--sand-300); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); font: inherit; font-weight: 700; color: var(--ink-900); cursor: pointer; }
  .nav-scrim { display: none; position: fixed; inset: 0; background: rgba(38,35,32,0.4); z-index: 39; }
  .nav-scrim[data-open="true"] { display: block; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-radius: 999px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; border: 2px solid transparent; line-height: 1.1; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.btn--primary { background: var(--sage-700); color: var(--white); }
.btn--primary:hover { background: var(--sage-800); color: var(--white); }
.btn--secondary { background: var(--terracotta-600); color: var(--white); }
.btn--secondary:hover { background: #244d47; color: var(--white); }
.btn--ghost { background: transparent; color: var(--logo-navy); border-color: var(--sage-300); }
.btn--ghost:hover { background: var(--sage-50); color: var(--logo-navy); }
.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.btn--block { display: flex; width: 100%; }
.nav__cta { margin-left: var(--sp-2); }

/* ---------- Hero ---------- */
.hero { padding: var(--sp-8) 0; background: var(--cream); position: relative; overflow: hidden; }
.hero__inner { max-width: 760px; }
.hero__logo { width: 100%; max-width: 560px; height: auto; margin-bottom: var(--sp-2); }
.hero h1 { color: var(--logo-navy); }
.hero .lead { margin-bottom: var(--sp-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- Biography hero ---------- */
.bio-hero { display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-7); align-items: center; }
.bio-hero__photo {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: center top;
  border-radius: var(--radius); border: 1px solid var(--sand-200); box-shadow: var(--shadow-md);
}
.bio-hero__sep { color: var(--sage-300); margin: 0 var(--sp-3); }
/* Homepage teaser: smaller portrait, since it introduces the bio rather than
   being the page's subject. */
.bio-hero--compact { grid-template-columns: 240px 1fr; gap: var(--sp-6); }
.bio-hero--compact h2 { margin-bottom: var(--sp-2); }
@media (max-width: 760px) {
  .bio-hero { grid-template-columns: 1fr; gap: var(--sp-5); }
  .bio-hero__photo { max-width: 260px; }
}

/* Credential figures — bare stat tiles, no plot and so no hover layer. Values
   are set in the body sans: a serif at this size reads as decoration, not data.
   Digits keep the font's proportional figures (tabular is for aligned columns). */
.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
  margin: var(--sp-8) 0 0; padding: 0;
}
@media (max-width: 760px) { .stat-row { grid-template-columns: 1fr; gap: var(--sp-4); } }
.stat {
  display: flex; flex-direction: column-reverse; gap: var(--sp-2);
  background: var(--white); border: 1px solid var(--sand-200); border-top: 3px solid var(--logo-teal);
  border-radius: var(--radius-sm); padding: var(--sp-5);
}
.stat__value {
  margin: 0; font-family: var(--font-body); font-weight: 700; line-height: 1.05;
  font-size: clamp(2rem, 4vw, 2.5rem); color: var(--logo-navy);
}
.stat__label { font-size: var(--fs-sm); color: var(--ink-700); }

/* ---------- Homepage ----------
   Accent helpers. The icon set strokes with currentColor, so an accent class on
   the wrapper colours the icon, the rule, or the heading it sits with. */
.accent-teal { color: var(--logo-teal-text); }
.accent-sand { color: #8a6a44; }        /* sand darkened until it reads on cream */
.accent-navy { color: var(--logo-navy); }
.accent-teal-solid, .accent-sand-solid, .accent-navy-solid {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 50%; color: var(--white);
}
.accent-teal-solid { background: var(--terracotta-500); }
.accent-sand-solid { background: #b08b5b; }
.accent-navy-solid { background: var(--logo-navy); }
.icon { display: block; }

/* Script-style tagline — the recurring "Together, we untangle…" line. */
.script-line {
  font-family: var(--font-head); font-style: italic; font-size: var(--fs-lg);
  color: var(--terracotta-600); margin-bottom: var(--sp-4);
}
.script-line--light { color: var(--sage-300); }

/* Rope wave between bands, echoing the line under the wordmark. */
.rope { display: block; width: 100%; height: 40px; }
.rope--navy path { stroke: var(--logo-navy); }
.rope--teal path { stroke: var(--logo-teal); }
.rope--mixed path:first-child { stroke: var(--logo-teal); }
.rope--mixed path:last-child { stroke: var(--logo-sand); opacity: 1; }

/* Hero: copy left, photo right. The rope sits below the grid, so the grid
   needs its own bottom breathing room or the rope crosses the photo. */
.hero-split { background: var(--cream); padding-top: var(--sp-6); }
.hero-split__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7);
  align-items: center; padding-bottom: var(--sp-5);
}
.hero-split__copy h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.hero-split__copy h1::after { display: none; }
.hero-split__photo {
  width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md);
  border: 1px solid var(--sand-200);
}
@media (max-width: 860px) {
  .hero-split__inner { grid-template-columns: 1fr; }
  .hero-split__photo { order: -1; }
}

/* "You may be here because…" — six equal prompts. */
.reason-grid {
  list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-4);
}
@media (max-width: 1000px) { .reason-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .reason-grid { grid-template-columns: repeat(2, 1fr); } }
.reason {
  background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--radius-sm);
  padding: var(--sp-5) var(--sp-4); text-align: center;
}
.reason__icon { display: grid; place-items: center; margin: 0 auto var(--sp-4); }
.reason h3 { font-family: var(--font-body); font-size: var(--fs-base); color: var(--logo-navy); margin-bottom: var(--sp-3); }
.reason p { font-size: var(--fs-sm); color: var(--ink-700); max-width: none; }

/* "Support at Every Step" — four framework columns with divider rules. */
.framework__head { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); }
.framework__head h2 { margin: 0; text-align: center; }
.framework__ornament { flex: none; }
.framework-grid {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
@media (max-width: 860px) { .framework-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .framework-grid { grid-template-columns: 1fr; } }
.fstep { padding: 0 var(--sp-5); text-align: center; border-left: 1px solid var(--sand-200); }
.fstep:first-child { border-left: 0; }
@media (max-width: 860px) { .fstep:nth-child(odd) { border-left: 0; } }
@media (max-width: 560px) { .fstep { border-left: 0; } }
.fstep__icon { display: grid; place-items: center; margin: 0 auto var(--sp-3); }
.fstep__title {
  font-family: var(--font-body); font-size: var(--fs-lg); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-2);
}
.fstep__tagline { font-weight: 700; font-size: var(--fs-sm); margin-bottom: var(--sp-3); max-width: none; }
.fstep p:last-child { font-size: var(--fs-sm); color: var(--ink-700); max-width: none; }

/* "Meet Kellie" panel — round portrait, copy, credential badges. */
.founder-panel {
  display: grid; grid-template-columns: 200px 1fr 320px; gap: var(--sp-6); align-items: center;
  background: var(--sand-100); border: 1px solid var(--sand-200);
  border-radius: var(--radius); padding: var(--sp-6);
}
@media (max-width: 1000px) { .founder-panel { grid-template-columns: 160px 1fr; } .founder-panel__stats { grid-column: 1 / -1; } }
@media (max-width: 620px) { .founder-panel { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.founder-panel__photo {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 20%;
  border-radius: 50%; border: 4px solid var(--white); box-shadow: var(--shadow-md);
  max-width: 200px;
}
.founder-panel__copy p { font-size: var(--fs-sm); color: var(--ink-700); }
.founder-panel__copy p:last-child { margin-bottom: 0; }
/* "Doctorate" is a much wider value than "20+", so give it a wider column
   rather than letting it squeeze the two numeric badges. */
.stat-badges { display: grid; grid-template-columns: 0.8fr 1fr 1.4fr; gap: var(--sp-3); margin: 0 0 var(--sp-5); padding: 0; }
.badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); }
.badge__icon { flex: none; margin-bottom: var(--sp-1); }
.badge__value {
  margin: 0; font-family: var(--font-body); font-weight: 700; line-height: 1.05;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem); color: var(--logo-navy);
}
.badge__label {
  font-size: var(--fs-xs); color: var(--logo-navy); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3;
}
.badge__sublabel {
  display: block; margin-top: var(--sp-1); font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--ink-700);
}

/* "Why Choose Knot Alone?" — icon beside copy, divided into three. */
.why-grid {
  list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6);
}
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; gap: var(--sp-5); } }
.why { display: flex; gap: var(--sp-4); align-items: flex-start; padding-left: var(--sp-5); border-left: 1px solid var(--sand-200); }
.why:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 860px) { .why { border-left: 0; padding-left: 0; } }
.why__icon { flex: none; }
.why h3 { font-family: var(--font-body); font-size: var(--fs-lg); color: var(--logo-navy); margin-bottom: var(--sp-2); }
.why p { font-size: var(--fs-sm); color: var(--ink-700); max-width: none; }

/* "Start Untangling the Process" — three resource links + a library panel. */
.start-grid {
  margin-top: var(--sp-6);
  display: grid; grid-template-columns: repeat(3, 1fr) 1.15fr; gap: var(--sp-4); align-items: stretch;
}
@media (max-width: 1000px) { .start-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .start-grid { grid-template-columns: 1fr; } }
.start-card {
  background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--radius-sm);
  padding: var(--sp-5); text-decoration: none; color: inherit;
}
.start-card:hover { border-color: var(--sage-300); box-shadow: var(--shadow-md); color: inherit; }
.start-card__icon, .start-panel__icon { display: block; margin-bottom: var(--sp-3); }
.start-card h3 { font-family: var(--font-body); font-size: var(--fs-base); color: var(--logo-navy); margin-bottom: var(--sp-2); }
.start-card p { font-size: var(--fs-sm); color: var(--ink-700); max-width: none; }
.start-panel {
  background: var(--sage-50); border: 1px solid var(--sage-100); border-radius: var(--radius-sm);
  padding: var(--sp-5); display: flex; flex-direction: column; justify-content: center;
}
.start-panel p { font-size: var(--fs-sm); max-width: none; }

/* Closing band. */
.closing-band { background: var(--logo-navy); color: var(--sand-100); padding: var(--sp-7) 0; overflow: hidden; }
.closing-band__inner { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); align-items: center; }
@media (max-width: 860px) {
  .closing-band__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
.closing-band__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
@media (max-width: 860px) { .closing-band__actions { align-items: center; } }
.closing-band h2 { color: var(--white); }

/* Phone + email beside the closing CTA. */
.contact-inline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.contact-inline li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.contact-inline__icon { flex: none; color: var(--logo-sand); display: grid; place-items: center; }
.contact-inline a { color: var(--sand-100); text-decoration: none; font-weight: 600; }
.contact-inline a:hover { color: var(--white); text-decoration: underline; }
.closing-band h2::after { display: none; }
.closing-band p { color: var(--sand-100); }
.btn--sand { background: var(--logo-sand); color: var(--logo-navy); }
.btn--sand:hover { background: var(--sand-200); color: var(--logo-navy); }
.btn--outline { background: transparent; color: var(--logo-navy); border-color: var(--logo-navy); }
.btn--outline:hover { background: var(--sage-50); color: var(--logo-navy); }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }
.card { background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.card h3 { margin-top: 0; color: var(--logo-teal-text); }
.card__meta { font-size: var(--fs-sm); color: var(--ink-500); }
.card--link { text-decoration: none; color: inherit; display: block; }
.card--link:hover { border-color: var(--sage-300); box-shadow: var(--shadow-md); }

/* ---------- Downloadable resources ---------- */
.download h3 { margin-bottom: var(--sp-1); }
.download__subtitle { font-family: var(--font-head); color: var(--ink-700); margin-bottom: var(--sp-4); }
.download__meta { font-size: var(--fs-sm); color: var(--ink-500); margin-left: var(--sp-3); white-space: nowrap; }

/* ---------- Steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.step { display: flex; gap: var(--sp-4); align-items: flex-start; }
.step__num { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--logo-navy); color: var(--white); display: grid; place-items: center; font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 700; }
/* Numerals alternate navy/teal, the way the yarn ball's strands do. */
.step:nth-child(even) .step__num { background: var(--logo-teal-text); }
.step__body { flex: 1; }
.step__body h3 { margin-bottom: var(--sp-1); }

/* ---------- Services: pathway steps + levels of support ----------
   Both card types put a small teal label above a navy title, mirroring the
   logo's teal subtitle sitting under the navy wordmark. */
.card-label {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-xs);
  font-weight: 700; color: var(--logo-teal-text); margin: 0 0 var(--sp-1);
}
.pathway h2, .level h3 { color: var(--logo-navy); }
.pathway h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.pathway__icon { font-size: 1.75rem; line-height: 1; margin: 0 0 var(--sp-4); }

/* Service lists inside cards. The check-list's tick is decorative — the list
   markup already conveys that these are grouped items. */
.check-list, .plain-list { list-style: none; margin: 0; padding: 0; }
.check-list li, .plain-list li { margin-bottom: var(--sp-2); color: var(--ink-700); }
.check-list li:last-child, .plain-list li:last-child { margin-bottom: 0; }
.check-list li { position: relative; padding-left: 1.6rem; }
.check-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--logo-teal-text); font-weight: 700;
}

/* Affordance inside a linked card — the card itself is the anchor, so this is
   styled text rather than a nested link. */
.card-cta { color: var(--logo-teal-text); font-weight: 700; font-size: var(--fs-sm); margin-top: var(--sp-4); }
.card--link:hover .card-cta { color: var(--logo-navy); }

/* ---------- Service breakdown pages ---------- */
.backlink { font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--sp-4); }
.service h2 { font-size: var(--fs-lg); }
.service h3 { font-size: var(--fs-lg); margin-top: var(--sp-5); }
.service > :last-child { margin-bottom: 0; }
.level-legend .plain-list li { color: var(--ink-700); }
.level-legend .tag { margin-right: var(--sp-2); }

/* Services with detail blocks span both grid columns, so the brief cards
   beside them aren't stretched to match. */
.card--wide { grid-column: 1 / -1; }
.items-intro { font-weight: 700; color: var(--logo-navy); margin-bottom: var(--sp-3); }
.best-for {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--sand-200); color: var(--ink-700);
}
/* Long lists read better in two columns once there's room for them. */
@media (min-width: 700px) {
  .card--wide .check-list { columns: 2; column-gap: var(--sp-7); }
  .card--wide .check-list li { break-inside: avoid; }
}

/* ---------- CTA banner ---------- */
.cta-banner { background: var(--sage-700); color: var(--white); }
.cta-banner h2 { color: var(--white); }
.cta-banner p { color: var(--sage-100); }
.cta-banner .btn--ghost { color: var(--white); border-color: rgba(255,255,255,0.6); }
.cta-banner .btn--ghost:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- Forms ---------- */
.form { max-width: 640px; }
.field { margin-bottom: var(--sp-5); }
.field > label { display: block; font-weight: 700; margin-bottom: var(--sp-2); color: var(--ink-900); }
.field .hint { display: block; font-size: var(--fs-sm); color: var(--ink-500); margin-bottom: var(--sp-2); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; padding: var(--sp-3); font: inherit; color: var(--ink-900);
  background: var(--white); border: 2px solid var(--sand-300); border-radius: var(--radius-sm);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sage-500); outline: var(--focus); outline-offset: 1px; }
.field textarea { min-height: 8rem; resize: vertical; }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--error-600); }
.field__error { display: block; color: var(--error-600); font-size: var(--fs-sm); font-weight: 700; margin-top: var(--sp-2); }
.req { color: var(--terracotta-600); }
.checkbox { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); background: var(--sand-100); border: 1px solid var(--sand-200); border-radius: var(--radius-sm); }
.checkbox input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; flex: none; }
.checkbox label { font-weight: 600; font-size: var(--fs-sm); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Alerts ---------- */
.alert { padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); margin-bottom: var(--sp-5); border: 1px solid; }
.alert--success { background: var(--success-bg); border-color: var(--success-700); color: #1f4a37; }
.alert--error { background: var(--error-bg); border-color: var(--error-600); color: #7a1a15; }
.alert--info { background: var(--sage-50); border-color: var(--sage-300); color: var(--sage-800); }
.alert h2, .alert h3 { color: inherit; margin-top: 0; }

/* ---------- Embed / notice ---------- */
.embed { border: 1px solid var(--sand-200); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.embed iframe { display: block; width: 100%; border: 0; min-height: 680px; }
.notice { padding: var(--sp-4); background: var(--sand-100); border: 1px dashed var(--sand-300); border-radius: var(--radius); color: var(--ink-700); }
.todo-flag { background: #fff6e0; border: 1px dashed #d9a441; color: #7a5a12; padding: 2px 8px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 700; }

/* ---------- Pricing ---------- */
.price { font-family: var(--font-head); font-size: var(--fs-2xl); color: var(--logo-navy); }
.price-type { display: inline-block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--logo-teal-text); background: var(--sand-100); padding: 2px 8px; border-radius: 6px; }

/* ---------- FAQ ---------- */
.faq { border-bottom: 1px solid var(--sand-200); }
.faq summary { cursor: pointer; padding: var(--sp-4) 0; font-weight: 700; font-family: var(--font-head); font-size: var(--fs-lg); color: var(--logo-navy); list-style-position: inside; }
.faq[open] summary { color: var(--logo-teal-text); }
.faq p { padding-bottom: var(--sp-4); }

/* ---------- Footer ---------- */
/* No top margin: every page ends on a navy band (the CTA banner, or the
   homepage's closing band), and a cream gap between the two reads as a seam.
   The footer's own padding supplies the breathing room. */
.site-footer { background: var(--sage-800); color: var(--sand-100); }
.site-footer a { color: var(--sand-100); }
.site-footer a:hover { color: var(--white); }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-6); padding: var(--sp-7) 0; }
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--white); font-size: var(--fs-base); margin: 0 0 var(--sp-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sp-2); }
/* Standing legal statements above the copyright line. */
.site-footer__legal {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,0.15); padding: var(--sp-6) 0;
}
@media (max-width: 760px) { .site-footer__legal { grid-template-columns: 1fr; gap: var(--sp-5); } }
.footer-statement h4 { color: var(--sand-200); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.footer-statement p { font-size: var(--fs-xs); line-height: 1.6; color: var(--sage-300); max-width: none; margin-bottom: var(--sp-2); }
.footer-statement a { color: var(--sand-100); }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.15); padding: var(--sp-4) 0; font-size: var(--fs-sm); color: var(--sage-300); }

/* ---------- Contact page ----------
   One centred column. Headings and the submit button centre; field labels stay
   left-aligned, since centred form labels are hard to scan. */
.contact-column { max-width: 640px; margin-inline: auto; }
.contact-column__lead { color: var(--ink-700); margin-inline: auto; }
.contact-column h2 { margin-top: var(--sp-6); }
.contact-column > div:first-child h2 { margin-top: 0; }
.contact-column .form { max-width: none; }
.contact-card { margin-top: var(--sp-7); }
.contact-card h3 { margin-top: 0; }
.contact-card .plain-list li { color: var(--ink-900); }

/* ---------- Privacy policy ---------- */
.policy-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-5); margin: 0 0 var(--sp-5); padding: 0;
  font-size: var(--fs-sm);
}
.policy-meta dt { font-weight: 700; color: var(--logo-navy); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-xs); }
.policy-meta dd { margin: 0; color: var(--ink-700); }
.policy-section + .policy-section { margin-top: var(--sp-7); }
.policy-section h2 { font-size: var(--fs-xl); }
.policy-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.policy-list li { position: relative; padding-left: 1.4rem; margin-bottom: var(--sp-3); color: var(--ink-700); }
.policy-list li:last-child { margin-bottom: 0; }
.policy-list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--logo-teal);
}
.site-footer__sep { margin: 0 var(--sp-2); opacity: 0.6; }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.muted { color: var(--ink-500); }
.tag { display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--logo-navy); background: var(--sage-50); padding: 2px 10px; border-radius: 999px; }
.divider { border: 0; border-top: 1px solid var(--sand-200); margin: var(--sp-6) 0; }