/* ==========================================================================
   Krythic design system
   Paper, ink and evergreen. Restrained editorial layouts.
   All colors flow through design tokens below.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.6; }
img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
h1, h2, h3, h4 { line-height: 1.15; overflow-wrap: break-word; text-wrap: balance; }
p { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* ---------- Tokens ---------- */
:root {
  /* Type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, monospace;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);
  --text-2xl: clamp(1.7rem, 1.3rem + 2vw, 2.4rem);
  --text-3xl: clamp(2.2rem, 1.6rem + 3.2vw, 3.6rem);

  /* Space & shape */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem;
  --radius-sm: 3px; --radius: 4px; --radius-lg: 4px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow: 0 8px 24px rgb(0 0 0 / 0.07);
  --measure: 65ch;
  --header-height: 6rem;
  --target-min: 24px;
  --content-width: 72rem;
}

/* Palette: Paper / Ink / Evergreen */
:root {
  --bg: #F6F5EF;
  --bg-alt: #E8EDE5;
  --surface: #FFFFFF;
  --border: #B8BFB5;
  --ink: #202923;
  --ink-muted: #535E55;
  --accent: #245C45;
  --accent-hover: #194532;
  --accent-soft: #E1EADD;
  --link: #245C45;

  --band-bg: #202E27;
  --band-bg-deep: #202E27;
  --band-ink: #F6F5EF;
  --band-ink-muted: #CAD4C9;
  --band-border: #637469;
  --band-accent: #C8DDAB;
  --focus-ring: #245C45;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--link); text-underline-offset: 3px; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
a:hover { color: var(--accent-hover); }
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* WCAG 2.2 — 2.4.11 Focus Not Obscured (Minimum).
   The header is sticky, so anything scrolled to by keyboard must clear it. */
:where(a, button, input, textarea, select, summary, [tabindex]),
:where(h1, h2, h3, :target, #main) {
  scroll-margin-block-start: calc(var(--header-height) + var(--space-4));
}
.band-dark :focus-visible { outline-color: var(--band-accent); }
::selection { background: var(--accent-soft); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--surface); color: var(--ink);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--space-4); }

/* ---------- Layout primitives ---------- */
.section { padding-block: var(--space-24); }
.section-inner { max-width: var(--content-width); margin-inline: auto; padding-inline: var(--space-6); }
.band-alt { background: var(--bg-alt); }
.band-dark {
  background: var(--band-bg);
  color: var(--band-ink);
}
.band-dark a { color: var(--band-accent); }
.band-dark .eyebrow { color: var(--band-accent); }

.eyebrow {
  font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3);
}
.lede { font-size: var(--text-lg); max-width: var(--measure); }
.band-dark .lede { color: var(--band-ink-muted); }
.muted { color: var(--ink-muted); }

.section-heading { max-width: var(--measure); margin-bottom: var(--space-12); }
.section-heading h2 { font-size: var(--text-2xl); }
.section-heading p:not(.eyebrow) { margin-top: var(--space-4); color: var(--ink-muted); }
.section-heading.row {
  max-width: none; display: flex; flex-wrap: wrap; gap: var(--space-6);
  align-items: end; justify-content: space-between;
}

.split { display: grid; gap: var(--space-12); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.split h2 { font-size: var(--text-2xl); }
.rich-copy > * + * { margin-top: var(--space-4); }
.rich-copy p { max-width: var(--measure); color: var(--ink-muted); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: var(--content-width); margin-inline: auto; padding: var(--space-3) var(--space-6);
  display: flex; align-items: center; gap: var(--space-8);
}
.brand-lockup { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.brand-mark { fill: var(--accent); flex: none; }
.band-dark .brand-mark, .site-footer .brand-mark { fill: var(--band-accent); }
.brand-copy strong { font-size: 1.15rem; letter-spacing: -0.01em; }
.brand-copy small { display: block; font-size: 0.72rem; color: var(--ink-muted); letter-spacing: 0.02em; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: var(--space-6); }
.site-nav a {
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.95rem;
  padding-block: var(--space-2); border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent); }
.header-cta { flex: none; }
.nav-toggle { display: none; }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0.7rem 1.35rem; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.95rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  min-height: 44px;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.button.primary { background: var(--accent); color: #fff; }
.button.primary:hover { background: var(--accent-hover); color: #fff; }
.band-dark .button.primary { background: var(--band-accent); color: var(--band-bg); }
.band-dark .button.primary:hover { background: #DFEBCF; color: var(--band-bg); }
.button.ghost { border-color: var(--border); color: var(--ink); background: var(--surface); }
.button.ghost:hover { border-color: var(--accent); color: var(--accent); }
.band-dark .button.ghost { background: transparent; border-color: var(--band-border); color: var(--band-ink); }
.band-dark .button.ghost:hover { border-color: var(--band-accent); color: var(--band-accent); }
.button:active { transform: translateY(1px); }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-24); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-16); align-items: center;
}
.hero h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; margin-bottom: var(--space-6); }
.hero-copy .lede { margin-bottom: var(--space-8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.page-hero { padding-block: var(--space-16) var(--space-24); }
.page-hero h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; margin-bottom: var(--space-6); max-width: 22ch; }
.page-hero .hero-actions { margin-top: var(--space-8); }

/* ---------- Value strip ---------- */
.band-strip { background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); padding-block: var(--space-8); }
.strip-item { display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.strip-item strong { font-size: var(--text-base); }
.strip-item span { color: var(--ink-muted); }

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: var(--space-6); }
.card-grid.three { grid-template-columns: repeat(3, 1fr); }
.card-grid.two { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.card h3 { font-size: var(--text-xl); }
.card p { color: var(--ink-muted); }
.card-index { font-family: var(--font-mono); color: var(--accent); font-weight: 600; }
.card-kicker {
  font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.card-more { color: var(--accent); font-weight: 600; margin-top: auto; }

/* Whole-card click target without nested-link a11y problems */
.service-card { position: relative; transition: border-color 160ms ease, box-shadow 160ms ease; }
.service-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-link:hover { color: var(--accent); }

.card-details summary {
  cursor: pointer; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; min-height: var(--target-min);
}
.card-details summary:hover { color: var(--accent); }
.card-details p { margin-top: var(--space-3); }

.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.tag-row li {
  font-size: 0.8rem; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); border-radius: 999px; padding: 3px 12px;
}

/* ---------- Service rows ---------- */
.service-rows { display: grid; gap: var(--space-8); }
.service-row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-8);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--space-8);
}
.service-row h3 { font-size: var(--text-xl); margin-top: var(--space-2); }
.service-row .button { margin-top: var(--space-2); justify-self: start; }
.service-row .card-link { position: static; }
.service-row .card-link::after { content: none; }
.service-row .card-link:hover { text-decoration: underline; }

/* ---------- Process ---------- */
.process-track {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6);
  counter-reset: step;
}
.process-step {
  position: relative; padding: var(--space-6);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  display: grid; gap: var(--space-2); align-content: start;
}
.process-num {
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; border-radius: 50%;
  margin-bottom: var(--space-2);
}
.process-step h3 { font-size: var(--text-lg); }
.process-step p { color: var(--ink-muted); font-size: var(--text-sm); }

/* ---------- Stack / lists ---------- */
.stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.stack-grid li {
  border-top: 3px solid var(--accent); background: var(--surface);
  border-inline: 1px solid var(--border); border-bottom: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: var(--space-6); display: grid; gap: var(--space-2);
}
.stack-grid span { color: var(--ink-muted); font-size: var(--text-sm); }

.check-list { display: grid; gap: var(--space-3); max-width: var(--measure); }
.check-list li { padding-left: 1.9rem; position: relative; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.35rem;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--accent-soft);
}
.check-list li::after {
  content: ""; position: absolute; left: 0.28rem; top: 0.6rem;
  width: 0.5rem; height: 0.3rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding-block: var(--space-4); font-size: var(--text-sm); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--target-min); }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--ink-muted); }
.breadcrumbs [aria-current="page"] { color: var(--ink-muted); }

/* ---------- FAQ / legal / empty states ---------- */
.faq-list { max-width: var(--measure); }
.faq-list h3 { font-size: var(--text-xl); margin-top: var(--space-12); }
.faq-list h3:first-of-type { margin-top: 0; }
.faq-list p { margin-top: var(--space-3); color: var(--ink-muted); }

.legal-copy { max-width: var(--measure); }
.legal-copy h2 { font-size: var(--text-xl); margin-top: var(--space-12); }
.legal-copy h2:first-child { margin-top: 0; }
.legal-copy p { margin-top: var(--space-3); color: var(--ink-muted); }

.empty-state {
  border: 1px dashed var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--space-12);
  display: grid; gap: var(--space-4); justify-items: start; max-width: var(--measure);
}
.empty-state h3 { font-size: var(--text-xl); }
.empty-state p { color: var(--ink-muted); }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: start; }
.panel-form {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-8);
  display: grid; gap: var(--space-6);
}
.panel-form h2 { font-size: var(--text-xl); }
.field { display: grid; gap: var(--space-2); }
.field label { font-weight: 600; font-size: var(--text-sm); }
.field .optional { font-weight: 400; color: var(--ink-muted); }
.field input, .field textarea {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem; background: var(--bg); color: var(--ink); width: 100%;
}
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 0; border-color: var(--focus-ring); }
.field-hint { font-size: var(--text-sm); color: var(--ink-muted); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #B91C1C; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { font-weight: 600; min-height: 1.5em; }
.form-status.ok { color: var(--accent-hover); }
.form-status.error { color: #B91C1C; }

.contact-aside { display: grid; gap: var(--space-6); align-content: start; }
.contact-aside h2 { font-size: var(--text-xl); }
.contact-aside ol { display: grid; gap: var(--space-4); counter-reset: step; }
.contact-aside li { padding-left: 2.4rem; position: relative; color: var(--ink-muted); }
.contact-aside li strong { color: var(--ink); display: block; }
.contact-aside li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0.1rem;
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-hover); font-weight: 700; font-size: var(--text-sm);
}

/* ---------- CTA band ---------- */
.cta-band { padding-block: var(--space-24); text-align: center; }
.cta-band h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.cta-band p { color: var(--band-ink-muted); max-width: var(--measure); margin-inline: auto; margin-bottom: var(--space-8); }
.cta-band .button { min-width: 14rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--band-bg);
  color: var(--band-ink); margin-top: auto;
}
.footer-inner {
  max-width: var(--content-width); margin-inline: auto; padding: var(--space-16) var(--space-6);
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12);
}
.footer-brand { display: grid; gap: var(--space-4); align-content: start; }
.footer-brand p { color: var(--band-ink-muted); font-size: var(--text-sm); max-width: 32ch; }
.footer-nav h2 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--band-ink-muted); margin-bottom: var(--space-4); }
.footer-nav ul { display: grid; gap: var(--space-3); }
.footer-nav a {
  color: var(--band-ink); text-decoration: none; font-size: var(--text-sm);
  display: inline-flex; align-items: center; min-height: var(--target-min);
}
.footer-nav a:hover { color: var(--band-accent); text-decoration: underline; }
.footer-base { border-top: 1px solid var(--band-border); }
.footer-base a { color: var(--band-ink); }
.footer-base p {
  max-width: var(--content-width); margin-inline: auto; padding: var(--space-6);
  font-size: var(--text-sm); color: var(--band-ink-muted);
}

/* ---------- Editorial brand ---------- */
.brand-copy strong { font-size: 1.55rem; letter-spacing: -0.055em; font-weight: 650; }
.brand-copy small { font-size: 0.75rem; letter-spacing: 0; }
.brand-mark { width: 24px; height: 24px; }
.site-nav ul { gap: 1.25rem; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.eyebrow { color: var(--accent); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; margin-bottom: 1.5rem; }
.studio-hero { padding-block: 4rem 0; }
.studio-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 4rem; align-items: end; margin-bottom: 3rem; }
.studio-intro h1 { font-size: clamp(2.65rem, 4.5vw, 4rem); font-weight: 500; letter-spacing: -0.055em; line-height: 1.08; text-wrap: initial; }
.studio-intro-copy .lede { font-size: 1.125rem; color: var(--ink-muted); max-width: 38ch; }
.studio-intro-copy .hero-actions { margin-top: 1.75rem; gap: 0.75rem 1.5rem; align-items: center; }
.text-link { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px; font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.text-link span { text-decoration: none; }
.studio-image img { width: 100%; height: clamp(15rem, 30vw, 24rem); object-fit: cover; object-position: center 55%; }
.studio-image figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.8rem; padding-block: 1rem; border-bottom: 1px solid var(--border); color: var(--ink-muted); }
.editorial-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: 5rem; }
.editorial-split h2 { font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.035em; }
.editorial-split .section-heading { margin-bottom: 0; }
.offering { padding-block: 1.75rem; border-top: 1px solid var(--border); }
.offering:first-child { padding-top: 0; border-top: 0; }
.offering:last-child { padding-bottom: 0; }
.offering h3 { font-size: var(--text-xl); font-weight: 500; }
.offering h3 a { display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.offering h3 a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }
.offering h3 span { color: var(--accent); flex: none; }
.offering p { color: var(--ink-muted); margin-top: 0.65rem; max-width: 50ch; }
.product-feature { border-block: 1px solid var(--border); }
.product-feature .product-lede { font-size: var(--text-xl); line-height: 1.4; color: var(--ink); max-width: 30ch; }
.product-note { font-size: var(--text-sm); border-top: 1px solid var(--border); padding-top: 1.5rem; }
.process-track { gap: 2rem; }
.process-step { padding: 1.5rem 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
.process-num { background: transparent; color: var(--accent); border-radius: 0; font-family: var(--font-mono); place-items: start; width: auto; height: auto; font-size: 0.875rem; margin-bottom: 1rem; }
.process-step h3 { font-size: 1.15rem; font-weight: 600; }
.process-step p { font-size: 1rem; }
.principle-list { display: grid; gap: 2rem; }
.principle-list article + article { border-top: 1px solid var(--border); padding-top: 2rem; }
.principle-list h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; }
.principle-list p { color: var(--ink-muted); }
.contact-invite { display: flex; align-items: center; justify-content: space-between; gap: 3rem; text-align: left; }
.contact-invite > div { max-width: 40rem; }
.contact-invite h2 { font-size: clamp(2rem, 3.8vw, 3.3rem); font-weight: 500; letter-spacing: -0.04em; }
.contact-invite p { margin-inline: 0; margin-bottom: 0; }
.contact-invite .eyebrow { margin-bottom: 1.5rem; }
.contact-invite .button { flex: none; }
.site-footer { border-top: 1px solid var(--band-border); }
.site-footer a { color: var(--band-ink); }
.site-footer :focus-visible { outline-color: var(--band-accent); }
.footer-nav a { min-height: 32px; }
.card { box-shadow: none; }
.card-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.three > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.service-row { border-inline: 0; border-bottom: 0; border-radius: 0; background: transparent; padding-inline: 0; }
.field input, .field textarea { border-color: #758172; }
.page-hero h1 { font-weight: 500; letter-spacing: -0.04em; }

@media (max-width: 68rem) {
  .header-inner { gap: 1.25rem; }
  .studio-intro { gap: 2rem; }
}
@media (max-width: 48rem) {
  .studio-hero { padding-top: 2.5rem; }
  .studio-intro, .editorial-split { grid-template-columns: 1fr; gap: 2rem; }
  .studio-intro h1 { font-size: clamp(2.5rem, 7.5vw, 3.5rem); }
  .studio-intro-copy .lede { max-width: 45ch; }
  .contact-invite { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .card-grid.three, .card-grid.two, .process-track { grid-template-columns: 1fr; }
  .card-grid.three > :last-child:nth-child(odd) { grid-column: auto; }
  .studio-image figcaption span:last-child { display: none; }
  .section-inner, .header-inner { padding-inline: 1.25rem; }
  .brand-copy small { display: none; }
  .section { padding-block: 3.5rem; }
  .cta-band { padding-block: 3.5rem; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 60rem) {
  .section { padding-block: var(--space-16); }
  .hero-grid, .split, .contact-layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero-panel { max-width: 26rem; }
  .card-grid.three, .stack-grid, .process-track, .strip-grid { grid-template-columns: 1fr 1fr; }
  .service-row { grid-template-columns: 1fr; gap: var(--space-4); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 68rem) {
  .card-grid.two, .card-grid.three, .stack-grid, .process-track, .strip-grid { grid-template-columns: 1fr; }
  .brand-copy small { display: none; }
  .header-cta { display: none; }

  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin-left: auto; background: none; border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 0.45rem 0.9rem; color: var(--ink); font-weight: 600;
  }
  .nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after {
    display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px;
  }
  .nav-toggle-icon { position: relative; }
  .nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-icon::before { top: -5px; }
  .nav-toggle-icon::after { top: 5px; }

  /* Collapse the nav only when JS is available to reopen it */
  html.js .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: var(--space-4) var(--space-6) var(--space-6);
    box-shadow: var(--shadow);
  }
  html.js .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: var(--space-2); }
  .site-nav a { display: block; padding: var(--space-3) 0; font-size: var(--text-lg); border-bottom: none; }
  .site-nav a[aria-current="page"] { color: var(--accent); }

  html:not(.js) .site-nav { margin-left: 0; width: 100%; order: 3; }
  html:not(.js) .header-inner { flex-wrap: wrap; gap: var(--space-3); }
  html:not(.js) .nav-toggle { display: none; }
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.price-grid { align-items: stretch; }
.price-card { gap: var(--space-4); }
.price-card .check-list { margin-block: var(--space-2); }
.price-card .button { margin-top: auto; align-self: start; }
.price {
  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem;
}
.price-prefix, .price-unit {
  font-size: var(--text-sm); font-weight: 600; color: var(--ink-muted);
  letter-spacing: 0.02em; text-transform: none;
}
.price-card.featured { border-color: var(--accent); box-shadow: var(--shadow); }
.price-card.featured .card-kicker { color: var(--accent-hover); }

/* Inline code in prose (security page) */
code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.1em 0.4em;
  overflow-wrap: break-word;
}

/* ==========================================================================
   Form error summary — WCAG 3.3.1 / 3.3.3, focus moved here on failed submit
   ========================================================================== */
.error-summary {
  border: 2px solid #B91C1C; border-radius: var(--radius);
  background: #FEF2F2; color: #7F1D1D; padding: var(--space-4) var(--space-6);
}
.error-summary:focus-visible { outline-offset: 4px; }
.error-summary h3 { font-size: var(--text-base); margin-bottom: var(--space-2); }
.error-summary ul { display: grid; gap: var(--space-2); padding-left: var(--space-6); }
.error-summary a { color: #7F1D1D; font-weight: 600; }
.field-error { font-size: var(--text-sm); font-weight: 600; color: #B91C1C; }

/* ==========================================================================
   User preference media queries
   ========================================================================== */

/* Windows High Contrast / forced-colors: meaning must survive colour removal.
   Anything that communicates state through background or border colour alone
   needs an explicit system-colour fallback here. */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }

  /* Dark bands and the footer paint their background with a gradient, and
     forced-colors strips background images. Without these rules the panel
     loses its dark ground while the light text stays, leaving text on text.
     Force both ends of every dark surface to the system pair. */
  .band-dark, .site-footer, .cta-band, .hero.band-dark, .page-hero.band-dark {
    background: Canvas; color: CanvasText; forced-color-adjust: none;
  }
  .band-dark .lede, .cta-band p, .footer-brand p, .footer-nav h2,
  .footer-base p, .band-dark .eyebrow, .panel-chip, .band-dark p, .band-dark h1,
  .band-dark h2, .band-dark h3, .band-dark strong, .band-dark small { color: CanvasText; }
  .band-dark a, .site-footer a, .footer-nav a, .footer-base a { color: LinkText; }
  .site-footer :focus-visible { outline-color: Highlight; }
  .band-dark .brand-mark, .site-footer .brand-mark { fill: CanvasText; }
  .band-dark .button.ghost { color: ButtonText; border-color: ButtonText; background: ButtonFace; }
  /* The decorative product mock uses a solid dark fill that survives
     forced-colors, so its chip text must be forced too or it goes black-on-dark. */
  .panel-window { background: Canvas; forced-color-adjust: none; }
  .panel-window, .panel-bar, .footer-base { border-color: CanvasText; }

  .button { border: 1px solid ButtonText; }
  .button.primary, .band-dark .button.primary { background: ButtonFace; color: ButtonText; forced-color-adjust: none; }
  .button.primary { border-color: ButtonText; }

  .card, .service-row, .process-step, .stack-grid li, .panel-form, .empty-state { border: 1px solid CanvasText; }

  /* CSS-drawn checkmarks would otherwise disappear entirely */
  .check-list li::before { background: Canvas; border: 1px solid CanvasText; }
  .check-list li::after { border-left-color: CanvasText; border-bottom-color: CanvasText; }

  .tag-row li { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  .process-num, .contact-aside li::before { border: 1px solid CanvasText; forced-color-adjust: none; background: Canvas; color: CanvasText; }

  .site-nav a[aria-current="page"] { border-bottom: 3px solid CanvasText; }
  .site-header { border-bottom: 1px solid CanvasText; backdrop-filter: none; }

  .dot, .panel-line, .panel-bar span { background: CanvasText; }
  .error-summary { border: 2px solid CanvasText; }
  .price-card.featured { border: 2px solid CanvasText; }
}

/* Users asking the OS for more contrast get denser borders and darker secondary text */
@media (prefers-contrast: more) {
  :root {
    --ink-muted: #303C32;
    --border: #657367;
    --band-ink-muted: #E1EADD;
    --band-border: #91A18E;
  }
  .card, .service-row, .process-step, .stack-grid li, .panel-form { border-width: 2px; }
  .field input, .field textarea { border-width: 2px; }
  :focus-visible { outline-width: 4px; }
  a { text-decoration-thickness: 2px; }
}

/* Backdrop blur behind text is a readability problem for some users */
@media (prefers-reduced-transparency: reduce) {
  .site-header { backdrop-filter: none; background: var(--bg); }
}

/* Print: the pricing and accessibility pages get printed and filed by buyers */
@media print {
  .site-header, .site-nav, .nav-toggle, .cta-band, .skip-link { display: none !important; }
  .band-dark, .site-footer { background: #fff !important; color: #000 !important; }
  .section { padding-block: var(--space-8); }
  a[href^="http"]::after, a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #444; }
}