/* King Strategic Solutions — nonprofit microsite
   Brand: Deep #332445 · Royal #663399 · Magenta #7B2D8E · Light #C6B8D3
          Charcoal #34495E · Off-white #F0EDEF · White
   Type:  Playfair Display (display) · Poppins (text), self-hosted. */

@font-face { font-family: "Playfair Display"; src: url("../fonts/PlayfairDisplay-normal-400-900.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/PlayfairDisplay-italic-400-900.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-normal-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-normal-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-normal-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-normal-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --deep: #332445;
  --deep-2: #281c37;
  --royal: #663399;
  --magenta: #7B2D8E;
  --light: #C6B8D3;
  --charcoal: #34495E;
  --paper: #F0EDEF;
  --white: #FFFFFF;
  --ink-soft: #4d5d6e;          /* charcoal tint for secondary text, AA on paper and white */
  --on-deep-soft: #d9cfe3;      /* secondary text on deep */

  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --text: "Poppins", "Segoe UI", system-ui, sans-serif;

  --measure: 64ch;
  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 76rem;
  --rule: 1px solid var(--light);
  --section: clamp(4rem, 9vw, 8.5rem);
}

*, *::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: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--text);
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--royal); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--magenta); }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 2px; }
.on-deep :focus-visible, .site-footer :focus-visible { outline-color: var(--light); }

h1, h2, h3 { font-family: var(--display); color: var(--deep); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 0.6em; }
h1 { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem); letter-spacing: -0.02em; line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--magenta); }
p { margin: 0 0 1.1em; max-width: var(--measure); }
strong { font-weight: 600; color: var(--deep); }

.skip { position: absolute; left: 1rem; top: -4rem; background: var(--deep); color: var(--white); padding: 0.7rem 1rem; z-index: 100; border-radius: 4px; }
.skip:focus { top: 1rem; color: var(--white); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Section label: a short line and a word. The line is the identity, not the logo. */
.label { display: flex; align-items: center; gap: 0.9rem; font-family: var(--text); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--magenta); margin: 0 0 1.4rem; }
.label::before { content: ""; width: 2.6rem; height: 1px; background: currentColor; flex: none; }
.on-deep .label { color: var(--light); }

/* ---------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.97); border-bottom: var(--rule); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--deep); }
.brand img { width: auto; height: 40px; }
.brand span { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); border-left: var(--rule); padding-left: 0.85rem; line-height: 1.2; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.2rem); }
.nav a { color: var(--deep); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: 0.4rem 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--magenta); color: var(--deep); }
.nav .btn { border-bottom: 0; padding: 0.7rem 1.15rem; }
.nav-toggle { display: none; background: none; border: 1px solid var(--deep); color: var(--deep); font: 500 0.9rem var(--text); padding: 0.55rem 0.9rem; border-radius: 4px; cursor: pointer; }
@media (max-width: 760px) {
  .brand span { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav ul { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); border-bottom: var(--rule); padding: 0.5rem var(--gutter) 1.25rem; }
  .nav.is-open ul { display: flex; }
  .nav li a { display: block; padding: 0.85rem 0; border-bottom: var(--rule); }
  .nav li:last-child a { margin-top: 1rem; text-align: center; border: 0; }
  .no-js .nav ul { display: flex; position: static; }
}

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--deep); color: var(--white); text-decoration: none; font-weight: 500; font-size: 1rem; line-height: 1.2; padding: 1rem 1.5rem; border-radius: 4px; border: 1px solid var(--deep); transition: background 0.2s ease, transform 0.2s ease; }
.btn:hover { background: var(--magenta); border-color: var(--magenta); color: var(--white); }
.btn:active { transform: translateY(1px); }
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn--light { background: var(--paper); color: var(--deep); border-color: var(--paper); }
.btn--light:hover { background: var(--white); color: var(--deep); border-color: var(--white); }
.btn--ghost { background: transparent; color: var(--deep); }
.btn--ghost:hover { background: var(--deep); color: var(--white); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; }
.cta-note { font-size: 0.92rem; color: var(--ink-soft); max-width: 34ch; margin: 0; }
.on-deep .cta-note { color: var(--on-deep-soft); }

/* ---------------------------------------------------------------- hero */
.hero { background: var(--paper); border-bottom: var(--rule); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; padding-top: clamp(3.5rem, 8vw, 7rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.hero h1 { margin-bottom: 0.45em; max-width: 13ch; }
.hero .lede { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.25rem); line-height: 1.65; max-width: 40ch; color: var(--charcoal); }
.hero .cta { margin-top: 2rem; }
.hero > .wrap > div:first-child > * { animation: rise 0.7s cubic-bezier(.2,.7,.2,1) both; }
.hero > .wrap > div:first-child > :nth-child(2) { animation-delay: 0.08s; }
.hero > .wrap > div:first-child > :nth-child(3) { animation-delay: 0.16s; }
.hero > .wrap > div:first-child > :nth-child(4) { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* The running list: what is held together by workarounds today */
/* hero calculator card */
.calc-card { background: var(--deep); border-radius: 6px; padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: 0 18px 40px -24px rgba(51,36,69,0.45); animation: rise 0.8s 0.3s cubic-bezier(.2,.7,.2,1) both; }
.calc-card h2 { font-family: var(--text); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--light); font-weight: 600; margin: 0 0 0.6rem; }
.calc-card .calc { background: none; border: 0; padding: 0; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .hero h1 { max-width: 15ch; } }

/* ---------------------------------------------------------------- sections */
.section { padding: var(--section) 0; }
.section--tight { padding: clamp(3rem, 6vw, 5rem) 0; }
.section--paper { background: var(--paper); }
.on-deep { background: var(--deep); color: var(--paper); }
.on-deep h2, .on-deep h3, .on-deep strong { color: var(--white); }
.on-deep h2 em { color: var(--light); }
.on-deep a:not(.btn) { color: var(--white); }
.intro { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.intro p { font-size: 1.08rem; }

/* Two organizations: an asymmetric split joined by one sentence */
.split-two { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--deep); }
.split-two article { padding: 2.2rem 2.5rem 2.2rem 0; }
.split-two article + article { padding: 2.2rem 0 2.2rem 2.5rem; border-left: var(--rule); }
.split-two .kicker { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--magenta); margin: 0 0 0.4rem; }
.split-two h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.joined { margin: 2.5rem 0 0; padding-top: 2rem; border-top: var(--rule); font-family: var(--display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.35; color: var(--deep); max-width: 34ch; }
.joined em { color: var(--magenta); }
@media (max-width: 760px) { .split-two { grid-template-columns: 1fr; } .split-two article, .split-two article + article { padding: 2rem 0; border-left: 0; } .split-two article + article { border-top: var(--rule); } }

/* What the work is: one wide row of four, with documentation flagged */
.work-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--deep); }
.work-list li { padding: 1.6rem 1.5rem 1.6rem 0; }
.work-list li + li { padding-left: 1.5rem; border-left: var(--rule); }
.work-list h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.work-list p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
.work-list .flag { display: inline-block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--white); background: var(--magenta); padding: 0.2rem 0.5rem; border-radius: 3px; margin-bottom: 0.8rem; }
.more { margin-top: 2rem; font-weight: 500; }
@media (max-width: 980px) { .work-list { grid-template-columns: 1fr 1fr; } .work-list li:nth-child(3) { padding-left: 0; border-left: 0; } .work-list li:nth-child(n+3) { border-top: var(--rule); } }
@media (max-width: 560px) { .work-list { grid-template-columns: 1fr; } .work-list li, .work-list li + li { padding: 1.4rem 0; border-left: 0; } .work-list li + li { border-top: var(--rule); } }

/* ---------------------------------------------------------------- cost of waiting */
.calc { background: var(--deep-2); border: 1px solid rgba(198,184,211,0.35); border-radius: 6px; padding: clamp(1.4rem, 3vw, 2.2rem); }
.calc fieldset { border: 0; padding: 0; margin: 0; }
.calc legend { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--light); margin-bottom: 1.2rem; }
.field { display: grid; grid-template-columns: 1fr 7.5rem; gap: 0.4rem 1rem; align-items: center; padding: 0.9rem 0; border-top: 1px solid rgba(198,184,211,0.25); }
.field label { color: var(--white); font-size: 0.98rem; line-height: 1.4; }
.field small { grid-column: 1 / -1; color: var(--on-deep-soft); font-size: 0.82rem; }
.field input { width: 100%; font: 500 1.05rem var(--text); color: var(--deep); background: var(--paper); border: 1px solid var(--light); border-radius: 4px; padding: 0.55rem 0.7rem; text-align: right; }
.field input:focus-visible { outline: 3px solid var(--light); outline-offset: 2px; }
.result { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--light); display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.result div { min-width: 0; }
.result dt { font-size: 0.82rem; color: var(--on-deep-soft); margin-bottom: 0.2rem; }
.result dd { margin: 0; font-family: var(--display); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1.05; color: var(--white); font-weight: 600; overflow-wrap: anywhere; }
.result .week dd { color: var(--light); }
.calc-note { margin: 1.2rem 0 0; font-size: 0.82rem; color: var(--on-deep-soft); }
.calc-static { color: var(--on-deep-soft); }
.js .calc-static { display: none; }
.no-js .calc { display: none; }
@media (max-width: 420px) { .field { grid-template-columns: 1fr 6rem; } .result { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- ready, with image */
.ready .wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.ready figure { margin: 0; position: relative; }
.ready figure img { border-radius: 6px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ready figure::after { content: ""; position: absolute; inset: 1.2rem -1.2rem -1.2rem 1.2rem; border: 1px solid var(--magenta); border-radius: 6px; z-index: -1; }
.ready figcaption { font-size: 0.85rem; color: var(--ink-soft); margin-top: 1.8rem; }
.checks { list-style: none; padding: 0; margin: 1.6rem 0 2rem; border-top: var(--rule); }
.checks li { padding: 0.85rem 0 0.85rem 2rem; border-bottom: var(--rule); position: relative; }
.checks li::before { content: ""; position: absolute; left: 0.2rem; top: 1.25rem; width: 0.8rem; height: 0.45rem; border-left: 2px solid var(--magenta); border-bottom: 2px solid var(--magenta); transform: rotate(-45deg); }
@media (max-width: 900px) { .ready .wrap { grid-template-columns: 1fr; } .ready figure { max-width: 30rem; margin-right: 1.2rem; } }

/* ---------------------------------------------------------------- triggers: sticky split */
.triggers .wrap { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); }
.triggers .sticky { position: sticky; top: 7rem; align-self: start; }
.triggers ol { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.triggers li { padding: 1.7rem 0; border-top: var(--rule); display: grid; grid-template-columns: 1fr; }
.triggers li:last-child { border-bottom: var(--rule); }
.triggers h3 { margin-bottom: 0.35rem; }
.triggers li p { margin: 0; color: var(--ink-soft); }
@media (max-width: 900px) { .triggers .wrap { grid-template-columns: 1fr; } .triggers .sticky { position: static; } }

/* ---------------------------------------------------------------- proof */
.proof-group { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--deep); }
.proof-group + .proof-group { border-top: var(--rule); }
.proof-group h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.figure-big { font-family: var(--display); font-weight: 700; font-size: clamp(4rem, 2.5rem + 7vw, 8.5rem); line-height: 0.9; color: var(--deep); letter-spacing: -0.03em; margin: 0.2em 0 0.15em; }
.figure-big + p { font-size: 1rem; color: var(--ink-soft); max-width: 30ch; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 0 2rem; }
.stats div { padding: 1.2rem 1.2rem 1.2rem 0; border-bottom: var(--rule); }
.stats div:nth-child(even) { padding-left: 1.2rem; border-left: var(--rule); }
.stats dt { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); color: var(--magenta); line-height: 1; margin-bottom: 0.35rem; }
.stats dd { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--charcoal); }
.stats .wide { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; }
.outcomes { list-style: none; margin: 0; padding: 0; }
.outcomes li { padding: 1.1rem 0; border-bottom: var(--rule); }
.outcomes li:first-child { padding-top: 0; }
.outcomes b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--deep); margin-bottom: 0.25rem; }
.outcomes p { margin: 0; font-size: 0.97rem; }
.anon { font-size: 0.85rem; color: var(--ink-soft); margin-top: 1.5rem; }
@media (max-width: 900px) { .proof-group { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } .stats div:nth-child(even) { padding-left: 0; border-left: 0; } }

/* ---------------------------------------------------------------- quote */
.quote { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--paper); }
.quote blockquote { margin: 0 auto; max-width: 52rem; text-align: center; }
.quote blockquote p { font-family: var(--display); font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.4; color: var(--deep); max-width: none; margin: 0 0 1.4rem; }
.quote blockquote p::before { content: "\201C"; display: block; font-size: 4.5rem; line-height: 0.6; color: var(--magenta); font-style: normal; margin-bottom: 1rem; }
.quote cite { font-style: normal; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }


/* ---------------------------------------------------------------- closing */
.closing { padding: clamp(5rem, 10vw, 9rem) 0; background: var(--deep); color: var(--paper); position: relative; overflow: hidden; }
.closing::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: clamp(2rem, 4vw, 3rem); height: 1px; background: rgba(198,184,211,0.4); }
.closing h2 { color: var(--white); font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem); max-width: 20ch; letter-spacing: -0.02em; }
.closing h2 em { color: var(--light); }
.closing p { color: var(--on-deep-soft); font-size: 1.1rem; max-width: 46ch; }
.closing .cta { margin-top: 2.2rem; }
.closing .alt { font-size: 0.95rem; margin-top: 1.5rem; }

/* ---------------------------------------------------------------- page heads */
.page-head { background: var(--paper); border-bottom: var(--rule); padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem); }
.page-head h1 { font-size: clamp(2.4rem, 1.5rem + 3.8vw, 4.6rem); max-width: 16ch; }
.page-head .lede { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem); max-width: 48ch; }

/* ---------------------------------------------------------------- services */
.svc { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 5vw, 5rem); padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: var(--rule); }
.svc:first-of-type { border-top: 1px solid var(--deep); }
.svc h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); margin: 0; }
.svc ul { margin: 0 0 1em; padding-left: 1.2rem; }
.svc li { margin-bottom: 0.4rem; }
.svc li::marker { color: var(--magenta); }
.svc-feature { background: var(--deep); color: var(--paper); border-radius: 8px; padding: clamp(2rem, 5vw, 4rem); margin: clamp(1rem, 3vw, 2rem) 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.svc-feature h2 { color: var(--white); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); }
.svc-feature h2 em { color: var(--light); }
.svc-feature p, .svc-feature li { color: var(--on-deep-soft); }
.svc-feature strong { color: var(--white); }
.svc-feature ul { padding-left: 1.2rem; }
.svc-feature li::marker { color: var(--light); }
.svc-feature img { border-radius: 6px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
@media (max-width: 860px) { .svc, .svc-feature { grid-template-columns: 1fr; } .svc-feature img { max-width: 24rem; } }


.price { font-family: var(--display); font-weight: 600; color: var(--deep); }

/* ---------------------------------------------------------------- about */
.about-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 6rem); }
.about-grid aside { position: sticky; top: 7rem; align-self: start; }
.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--deep); }
.facts li { padding: 1rem 0; border-bottom: var(--rule); }
.facts b { display: block; font-family: var(--display); font-size: 1.15rem; color: var(--deep); font-weight: 600; }
.facts span { font-size: 0.9rem; color: var(--ink-soft); }
.prose h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); margin-top: 2.2em; }
.prose h2:first-child { margin-top: 0; }
.prose .big { font-family: var(--display); font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); line-height: 1.4; color: var(--deep); max-width: 30ch; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } .about-grid aside { position: static; } }

/* ---------------------------------------------------------------- contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.book { background: var(--deep); color: var(--paper); border-radius: 8px; padding: clamp(1.8rem, 4vw, 3rem); }
.book h2 { color: var(--white); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); }
.book p { color: var(--on-deep-soft); }
.book ul { padding-left: 1.2rem; color: var(--on-deep-soft); margin: 0 0 1.8rem; }
.book li::marker { color: var(--light); }
form .row { margin-bottom: 1.2rem; }
form label, form .lbl { display: block; font-weight: 500; color: var(--deep); margin-bottom: 0.35rem; font-size: 0.95rem; }
form .opt { font-weight: 400; color: var(--ink-soft); font-size: 0.85rem; }
form input[type="text"], form input[type="email"], form select, form textarea { width: 100%; font: 400 1rem var(--text); color: var(--charcoal); background: var(--white); border: 1px solid #8f84a0; border-radius: 4px; padding: 0.75rem 0.85rem; }
form textarea { min-height: 9rem; resize: vertical; }
form input:focus-visible, form select:focus-visible, form textarea:focus-visible { outline: 3px solid var(--magenta); outline-offset: 1px; border-color: var(--magenta); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .two-col { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 4px; font-weight: 500; }
.form-status:empty { display: none; }
.form-status.ok { background: #efe8f4; color: var(--deep); border-left: 4px solid var(--magenta); }
.form-status.err { background: #fbeaea; color: #8a1c1c; border-left: 4px solid #8a1c1c; }
form .hint { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--ink-soft); }
.fine { font-size: 0.85rem; color: var(--ink-soft); margin-top: 1rem; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- legal */
.legal { max-width: 46rem; }
.legal h2 { font-size: 1.6rem; margin-top: 2.2em; }
.legal h2:first-of-type { margin-top: 0; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.4rem; }
.updated { font-size: 0.9rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--deep-2); color: var(--on-deep-soft); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; font-size: 0.93rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem 3rem; }
.site-footer h2 { font-family: var(--text); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--light); font-weight: 600; margin: 0 0 0.9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--white); }
.site-footer .mark { width: 44px; height: auto; margin-bottom: 1rem; }
.site-footer .tag { font-family: var(--display); font-style: italic; color: var(--white); font-size: 1.15rem; margin: 0 0 0.4rem; }
.site-footer .bottom { grid-column: 1 / -1; border-top: 1px solid rgba(198,184,211,0.25); padding-top: 1.5rem; margin-top: 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; font-size: 0.85rem; }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 404 */
.nf { min-height: 60vh; display: flex; align-items: center; }
.proof-group--first { border-top: 0 !important; padding-top: 0; }
.ready figure, .svc-feature picture { isolation: isolate; }
.nav a.btn, .nav a.btn:hover { color: var(--white); border-bottom: 0; }
.nav a.btn[aria-current="page"] { background: var(--magenta); border-color: var(--magenta); }
.site-footer .mark { width: 150px; height: auto; }
.stats div.wide { border-left: 0; padding-left: 0; }
.stats div:nth-child(2) { padding-left: 1.2rem; border-left: var(--rule); }
.stats div:nth-child(4) { padding-left: 0; border-left: 0; }
.stats dt { white-space: nowrap; }
.result .year { grid-column: 1 / -1; }
.result .year dd { font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); }
@media (max-width: 480px) { .stats div:nth-child(2) { padding-left: 0; border-left: 0; } }
.work-list--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .work-list--5 { grid-template-columns: 1fr 1fr; } .work-list--5 li, .work-list--5 li + li { padding: 1.4rem 1.5rem 1.4rem 0; border-left: 0; border-top: var(--rule); } .work-list--5 li:nth-child(even) { padding-left: 1.5rem; border-left: var(--rule); } .work-list--5 li:first-child, .work-list--5 li:nth-child(2) { border-top: 0; } }
@media (max-width: 560px) { .work-list--5 { grid-template-columns: 1fr; } .work-list--5 li, .work-list--5 li:nth-child(even) { padding: 1.4rem 0; border-left: 0; } .work-list--5 li:nth-child(2) { border-top: var(--rule); } }
/* Borrowed restraint: lighter display weight, larger wordmark, less vertical air */
h1, h2 { font-weight: 500; }
h1 em, h2 em { font-weight: 400; }
.brand img { height: 48px; }
:root { --section: clamp(3.5rem, 7.5vw, 7rem); }
.work-list--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .work-list--3 li:nth-child(3) { padding-left: 1.5rem; border-left: var(--rule); border-top: 0; } }
@media (max-width: 820px) { .work-list--3 { grid-template-columns: 1fr; } .work-list--3 li, .work-list--3 li + li, .work-list--3 li:nth-child(3) { padding: 1.4rem 0; border-left: 0; } .work-list--3 li + li, .work-list--3 li:nth-child(3) { border-top: var(--rule); } }
/* hero is one column; calculator sits in its own section below (Revision 6) */
.hero .wrap { grid-template-columns: minmax(0, 1fr); }
.hero h1 { max-width: 20ch; }
.hero .lede { max-width: 52ch; }
.cost .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.cost h2 { font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); }
.cost p { color: var(--on-deep-soft); }
@media (max-width: 900px) { .cost .wrap { grid-template-columns: 1fr; } .hero h1 { max-width: 20ch; } }
/* Revision 7: cost title on top, calculator full width */
.cost .wrap { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.cost h2 { margin: 0; }
.cost .calc fieldset { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
.cost .field { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; }
.cost .field label { min-height: 2.8em; font-size: 1.05rem; }
.cost .field input { font-size: 1.25rem; padding: 0.7rem 0.8rem; }
.cost .result { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cost .result dd { font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); }
@media (max-width: 900px) { .cost .calc fieldset { grid-template-columns: 1fr; } .cost .field label { min-height: 0; } .cost .result { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .cost .result { grid-template-columns: 1fr; } }
/* Revision 8: quote gets its own band so it reads apart from the pillars */
.quote { background: #E4DCEA; padding: clamp(3.5rem, 7vw, 6rem) 0; }
.quote cite { color: var(--deep); }
/* Revision 9: three-part calculator (money, time, missed chances) */
.cost .calc .calc-part { display: block; padding: 0 0 clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 clamp(1.5rem, 3vw, 2.2rem); border-bottom: 1px solid rgba(198,184,211,0.35); }
.cost .calc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
.cost .calc-part .field label { min-height: 4.2em; }
.cost .calc-part .result { margin-top: 1.2rem; }
.cost .calc-part .result dd { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); }
.calc-intro { font-size: 1.1rem; margin: 0.8rem 0 0; }
.calc-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
.calc-checks li { border-top: 1px solid rgba(198,184,211,0.25); }
.calc-checks label { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.8rem 0; color: var(--white); font-size: 1rem; line-height: 1.45; cursor: pointer; }
.calc-checks input { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; flex: none; accent-color: var(--light); }
.calc-checks input:focus-visible { outline: 3px solid var(--light); outline-offset: 2px; }
.calc-miss { margin: 1.2rem 0 0; font-size: 1.1rem; color: var(--on-deep-soft); }
.calc-miss strong { font-family: var(--display, inherit); font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); color: var(--white); margin-right: 0.4rem; }
@media (max-width: 900px) { .cost .calc-part .field label { min-height: 0; } }
/* Revision 10: calculator summary and call to action */
.calc-summary { background: var(--deep); border: 1px solid rgba(198,184,211,0.35); border-radius: 6px; padding: clamp(1.4rem, 3vw, 2.2rem); }
.calc-summary h3 { font-family: var(--text); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--light); margin: 0 0 1rem; }
.calc-totals { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem clamp(1.5rem, 3vw, 2.5rem); color: var(--on-deep-soft); }
.calc-totals strong { display: block; font-family: var(--display, inherit); font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); font-weight: 500; color: var(--white); line-height: 1.1; }
.calc-summary p { font-size: 1.1rem; max-width: 52ch; margin: 0 0 1.4rem; }
/* Revision 11: each part's results sit beside its inputs, money left and hours right */
.cost .calc-part .result { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem clamp(1.5rem, 3vw, 2.5rem); }
.cost .calc-part .result > div { min-width: 0; }
@media (max-width: 420px) { .cost .calc-part .result { grid-template-columns: 1fr; } }
.cost .calc-part .result > div { grid-column: auto; }
/* Revision 12: featured service without an image */
.svc-feature--solo { grid-template-columns: minmax(0, 1fr); }
.svc-feature--solo > div { max-width: 62ch; }