/* Preflight Client: shared stylesheet (owner: site-v2 design lead; see CONTRIBUTING.md and
   .agent/site-v2/DESIGN_SYSTEM.md). Page-only styles go in /assets/pages/<page>.css, never here.
   Palette fixed by the operator (.agent/site-v1/BLUEPRINT.md). Contrast: tools/contrast.py.
   Teal is a non-text colour: icons, diagram strokes, link underlines, glow. Never text, never under white text. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallback so the swap to Archivo does not shift the layout (Archivo: ascent 878,
   descent 210, UPM 1000; it sets about 6% wider than Arial at normal width). */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 106%;
  ascent-override: 82.8%;
  descent-override: 19.8%;
  line-gap-override: 0%;
}

:root {
  /* Operator palette (fixed) */
  --navy: #102A43;
  --teal: #0F9D8A;
  --green: #087F5B;
  --warm-white: #F8FAF9;
  --mint: #E6F7F2;
  --slate: #475569;
  /* Derived from the palette's own hues, for depth */
  --white: #FFFFFF;
  --navy-deep: #0A1D30;     /* bottom of the dark stage, footer base */
  --navy-raise: #173552;    /* raised panel on navy */
  --mist: #A9BBCB;          /* secondary text on navy surfaces; 7.4:1 on navy */
  --rule: #C9D6D1;          /* non-text hairline on warm white / white */
  --rule-navy: #2B4560;     /* non-text hairline on navy */
  --green-hover: #06694B;
  --error: #B42318;         /* error text and borders; 5.9:1 on white */
  --teal-glow: rgba(15, 157, 138, 0.22);
  --grid-line: rgba(169, 187, 203, 0.07);

  --font: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --display-stretch: 118%;
  --title-stretch: 106%;

  /* Type scale: body steps are fixed; display steps are fluid. Floor (operator 2026-10-26 01:14, "this font is
     tiny"): nothing renders under 16px. --step--1 is that floor (fine print, hints, flags, footer base);
     --step-0 is 17px (short supporting text); body is --step-1, 18px. tools/type_floor.py checks the render. */
  --step--1: 1rem;
  --step-0: 1.0625rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;
  --step-4: clamp(2rem, 1.25rem + 2.6vw, 3.125rem);
  --step-5: clamp(2.5rem, 1.1rem + 4.6vw, 4.75rem);
  --display: clamp(2.6rem, 0.8rem + 4.9vw, 5.25rem);

  --gutter: 1rem;
  --wrap: 76rem;
  --section: clamp(4.5rem, 2.2rem + 7vw, 8.5rem);
  --radius: 16px;           /* panels */
  --radius-small: 8px;      /* controls */
  --radius-pill: 999px;
  --focus: 3px solid var(--teal);

  --shadow-raise: 0 1px 2px rgba(10, 29, 48, 0.06), 0 22px 44px -22px rgba(10, 29, 48, 0.34);
  --edge-dark: inset 0 1px 0 rgba(248, 250, 249, 0.08), 0 0 0 1px rgba(15, 157, 138, 0.28), 0 30px 60px -30px rgba(0, 0, 0, 0.6);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-press: 120ms;
  --dur-state: 220ms;
  --dur-enter: 700ms;
}
@media (min-width: 40rem) { :root { --gutter: 2rem; } }
@media (min-width: 90rem) { :root { --gutter: 3rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--warm-white);
  color: var(--slate);
  font-family: var(--font);
  font-size: var(--step-1);
  line-height: 1.6;
  font-stretch: 100%;
  font-kerning: normal;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; }
img { display: block; }

h1, h2, h3 {
  color: var(--navy);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.2; font-weight: 720; font-stretch: var(--title-stretch); letter-spacing: -0.01em; }
p, ul, ol, dl { margin: 0 0 1em; }
p, li { max-width: 65ch; text-wrap: pretty; }
strong { color: var(--navy); font-weight: 700; }

a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--teal);
    text-decoration-thickness: 2px; text-underline-offset: 0.22em;
    transition: text-decoration-thickness var(--dur-state) var(--ease-out), text-underline-offset var(--dur-state) var(--ease-out); }
a:hover { text-decoration-thickness: 3px; text-underline-offset: 0.3em; }
:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.lead { font-size: var(--step-2); line-height: 1.5; color: var(--slate); max-width: 44ch; }
.small { font-size: var(--step--1); line-height: 1.55; }
/* Fine print people must read (consent, price label, trust line): body size, never smaller. */
.fine { font-size: var(--step-1); line-height: 1.55; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.display { font-size: var(--display); line-height: 0.96; letter-spacing: -0.03em; font-stretch: 122%; }

/* Skip link */
.skip { position: absolute; left: 0.75rem; top: -4rem; z-index: 60; background: var(--white);
  color: var(--navy); padding: 0.6rem 1rem; border-radius: var(--radius-small); font-weight: 700; }
.skip:focus { top: 0.75rem; }

/* ---- Buttons: one primary (green), one secondary (outline). Press = 1px down; hover lifts the edge light. ---- */
.button {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem; padding: 0.8rem 1.5rem;
  border-radius: var(--radius-small); border: 2px solid transparent;
  font: inherit; font-size: var(--step-0); font-weight: 700; font-stretch: 108%; line-height: 1.2; letter-spacing: 0.005em;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out),
              box-shadow var(--dur-state) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.button:active { transform: translateY(1px); }
.button-primary { background: var(--green); color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 24px -12px rgba(8, 127, 91, 0.7); }
.button-primary:hover { background: var(--green-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 4px rgba(15, 157, 138, 0.18), 0 14px 28px -12px rgba(8, 127, 91, 0.8); }
.button-secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.button-secondary:hover { background: var(--mint); }
.on-navy .button-secondary, .site-header .button-secondary { color: var(--warm-white); border-color: rgba(248, 250, 249, 0.7); }
.on-navy .button-secondary:hover { background: var(--rule-navy); border-color: var(--warm-white); }
.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 0; }
.button:disabled { cursor: progress; }
@media (max-width: 29.99rem) { .button-row .button { flex: 1 1 100%; } }

/* ---- Surfaces ----
   .on-navy  dark stage: navy, a fine technical grid that fades out, one teal light. Text warm white / mist.
   .on-mint  pale mint band.  .on-paper  white band.  Default page surface is warm white. */
.on-navy { position: relative; isolation: isolate; background-color: var(--navy); color: var(--warm-white);
  background-image: radial-gradient(52rem 34rem at 88% 0%, var(--teal-glow), transparent 62%),
                    linear-gradient(180deg, var(--navy) 40%, var(--navy-deep)); }
.on-navy::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 4rem 4rem; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 20%, #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 90% at 70% 20%, #000 10%, transparent 75%); }
.on-navy h1, .on-navy h2, .on-navy h3, .on-navy strong { color: var(--warm-white); }
.on-navy p, .on-navy li { color: var(--warm-white); }
.on-navy .lead, .on-navy .small { color: var(--mist); }
.on-navy a:not(.button) { color: var(--warm-white); }
.on-mint { background: var(--mint); }
.on-mint, .on-mint p, .on-mint li { color: var(--navy); }
.on-paper { background: var(--white); }
.card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.75rem; }

/* Panels: .panel is a raised light surface; .panel-dark a navy surface with a luminous teal edge. */
.panel { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-raise); padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.panel-dark { background: var(--navy-raise); color: var(--warm-white); border-radius: var(--radius); box-shadow: var(--edge-dark);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.panel-dark h2, .panel-dark h3, .panel-dark p, .panel-dark li, .panel-dark strong { color: var(--warm-white); }

/* Flag: a small sentence-case tag (never uppercase, never tracked). */
.flag { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 0.9rem; padding: 0.25rem 0.75rem 0.25rem 0.55rem;
  border-radius: var(--radius-pill); background: var(--mint); color: var(--navy); font-size: var(--step--1); font-weight: 700; }
.flag::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--teal); }

/* Photo frame: art-directed crop (object-position per use), navy grade. */
/* Photo frame: art-directed crop (object-position per use) with the brand duotone: the photo is turned to greys,
   screened over navy (shadows become navy) and multiplied by mint (highlights become mint). The generated photos'
   warm greens and morning light otherwise fight the navy/teal palette (operator 2026-10-26: "the photos kind of
   look out of place"). Photos only; illustrations do not go in a .photo-frame. */
.photo-frame { position: relative; isolation: isolate; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--navy); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12) brightness(1.04); mix-blend-mode: screen; }
.photo-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, rgba(16, 42, 67, 0) 45%, rgba(16, 42, 67, 0.5)), var(--mint);
  mix-blend-mode: multiply; }

/* ---- Header: a full-width navy bar at rest; once the page scrolls (site.js sets .is-scrolled on <html>)
   it becomes a floating pill with a luminous edge. Without JS it stays a sticky bar. ---- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--navy); color: var(--warm-white);
  transition: background-color var(--dur-state) var(--ease-out), padding var(--dur-state) var(--ease-out); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.75rem;
  border-radius: 0; transition: background-color var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out),
  min-height var(--dur-state) var(--ease-out), border-radius var(--dur-state) var(--ease-out); }
.logo { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--warm-white);
  text-decoration: none; font-weight: 800; font-stretch: var(--display-stretch); font-size: 1.1875rem; letter-spacing: -0.015em; }
/* Logo slot (DESIGN_SYSTEM.md "Logo slot", .agent/logo-v3/DECISION.md): the c1 Louver P lockup, sized by height:
   32px desktop, 28px under 40rem; under 22.5rem (360px) the slot crops to the P mark alone (the lockup's first
   77 of 495 viewBox units), because mark.svg is the navy-on-light artwork. Header is navy: logo-dark.svg. */
.brand { display: inline-flex; align-items: center; height: 2rem; overflow: hidden; }
@media (max-width: 39.99rem) { .brand { height: 1.75rem; } }
@media (max-width: 22.49rem) { .brand { width: 1.375rem; } }
.brand > svg, .brand > img { display: block; height: 100%; width: auto; max-width: none; flex: none; transition: transform var(--dur-state) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .logo:hover .brand > img { transform: translateY(-1px); } }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem 0.35rem; flex-wrap: wrap; }
.site-nav li { max-width: none; }
.site-nav a:not(.button) { position: relative; display: inline-block; color: var(--warm-white); text-decoration: none; font-size: var(--step-0);
  font-weight: 600; padding: 0.45rem 0.8rem; border-radius: var(--radius-pill);
  transition: background-color var(--dur-state) var(--ease-out); }
.site-nav a:not(.button)::after { content: ""; position: absolute; left: 50%; bottom: 0.15rem; width: 0.3rem; height: 0.3rem; margin-left: -0.15rem;
  border-radius: 50%; background: var(--teal); opacity: 0; transform: scale(0.4);
  transition: opacity var(--dur-state) var(--ease-out), transform var(--dur-state) var(--ease-out); }
.site-nav a:not(.button):hover { background: rgba(248, 250, 249, 0.08); }
.site-nav a[aria-current="page"]::after, .site-nav a:not(.button):hover::after { opacity: 1; transform: scale(1); }
.site-nav { display: flex; align-items: center; gap: 1.25rem; }
.nav-cta { min-height: 2.75rem; padding: 0.55rem 1.1rem; }
.nav-cta[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--warm-white); }
.menu-button { display: none; }
/* Phone book bar (AUDIENCE.md: a way to book on every screen height). Lives in the header markup so it is the same
   on every page; hidden on /book/ itself (its link carries aria-current there) and wherever the full nav shows. */
.mobile-book { display: none; }
@media (max-width: 63.99rem) {
  .mobile-book { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom)); background: rgba(10, 29, 48, 0.97);
    border-top: 1px solid var(--rule-navy); box-shadow: 0 -12px 28px -16px rgba(0, 0, 0, 0.5); }
  .mobile-book .button { width: 100%; min-height: 3.25rem; font-size: var(--step-1); }
  .mobile-book:has(a[aria-current="page"]) { display: none; }
  body:has(.mobile-book a:not([aria-current])) .site-footer { padding-bottom: 4.5rem; }   /* the bar never covers the footer base */
  html:has(.mobile-book a:not([aria-current])) { scroll-padding-bottom: 5rem; }
}

@media (min-width: 75rem) {
  .is-scrolled .site-header { background: transparent; padding-top: 0.75rem; }
  .is-scrolled .site-header .header-row { width: calc(100% - 2rem); max-width: 78rem; min-height: 4rem;
    padding-inline: 1.1rem 0.5rem; border-radius: var(--radius-pill);
    background: rgba(16, 42, 67, 0.92); box-shadow: var(--edge-dark);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
}

@media (max-width: 63.99rem) {
  .js .menu-button {
    display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.5rem 1rem;
    background: transparent; color: var(--warm-white); border: 1.5px solid rgba(248, 250, 249, 0.6);
    border-radius: var(--radius-pill); font: inherit; font-size: var(--step-0); font-weight: 700; cursor: pointer;
    transition: background-color var(--dur-state) var(--ease-out);
  }
  .js .menu-button::before { content: ""; width: 1rem; height: 0.6rem; border-block: 2px solid currentColor;
    transition: transform var(--dur-state) var(--ease-out), height var(--dur-state) var(--ease-out); }
  .js .menu-button[aria-expanded="true"]::before { height: 0; border-bottom-width: 0; }
  .header-row .logo { min-height: 4.75rem; }
  .js .menu-button:hover { background: rgba(248, 250, 249, 0.08); }
  .header-row { flex-wrap: wrap; }
  .site-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 1.25rem; padding-bottom: 1.5rem; }
  .js .site-nav:not(.is-open) { display: none; }
  .js .site-nav.is-open { animation: nav-open var(--dur-state) var(--ease-out); }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a:not(.button) { display: block; padding: 0.85rem 0.25rem; border-radius: 0; border-bottom: 1px solid var(--rule-navy);
    font-size: var(--step-2); font-stretch: var(--title-stretch); font-weight: 650; }
  .site-nav a:not(.button)::after { left: auto; right: 0.5rem; top: 50%; bottom: auto; margin: -0.2rem 0 0; width: 0.4rem; height: 0.4rem; }
  .nav-cta { align-self: stretch; min-height: 3.25rem; }
}
@keyframes nav-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Footer: deep navy, link columns, the full wordmark set large at the base ---- */
.site-footer { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-deep); color: var(--warm-white);
  padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem) 0; border-top: 1px solid var(--rule-navy); }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 4rem 4rem;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); mask-image: linear-gradient(180deg, transparent, #000 70%); }
.site-footer p { color: var(--warm-white); }
.footer-grid { display: grid; gap: 2.5rem; }
.footer-grid > div > p { color: var(--mist); max-width: 34ch; }
.footer-grid > div > .footer-contact { color: var(--warm-white); }
/* Footer: the alt Swept Chevron plane (logo-alt-dark.svg, footer only) beside the plain-text name. */
.footer-logo { margin-bottom: 1.25rem; gap: 0.85rem; font-size: var(--step-2); }
.footer-mark { display: block; height: 3rem; width: auto; }
.site-footer nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer nav a { display: inline-block; padding-block: 0.4rem; text-decoration-color: transparent; }
.site-footer nav a:hover { text-decoration-color: var(--teal); }
.site-footer a { color: var(--warm-white); }   /* every footer link, not just the nav: navy on navy is invisible */
.site-footer .footer-contact a { text-decoration-color: var(--teal); }
.footer-base { position: relative; max-width: none; border-top: 1px solid var(--rule-navy); margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 0; padding-block: 1.25rem 1.5rem; color: var(--mist); }
.site-footer .footer-base { color: var(--mist); }
@media (min-width: 60rem) {
  .footer-grid { grid-template-columns: 5fr 7fr; }
  .site-footer nav ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Grid helpers ---- */
.grid { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Stub + plain pages ---- */
.page-head { padding-block: clamp(3rem, 1.5rem + 5vw, 6rem) 1rem; }
.page-head h1 { max-width: 18ch; }
.draft-note { display: inline-block; background: var(--mint); color: var(--navy); border-left: 4px solid var(--teal);
  padding: 0.6rem 0.9rem; font-size: var(--step--1); border-radius: 0 var(--radius-small) var(--radius-small) 0; }
.plain-page { max-width: 48rem; }

/* ---- Route: the four-stage line used across the site (see DESIGN_SYSTEM.md "Route"). ---- */
.route-dot { fill: var(--teal); }

/* ---- Reveal: decorative parts only. Text is never hidden waiting for a scroll.
   site.js adds .is-in to [data-reveal] when it enters the viewport. ---- */

/* Loops marked [data-loop] pause while off screen (site.js). */
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }

/* ---- Forms (shared so any page can host a form) ---- */
.field { position: relative; margin: 0 0 1.5rem; }
.field label, .field legend, .choice-group legend { display: block; color: var(--navy); font-weight: 700; margin-bottom: 0.4rem; }
.hint { display: block; font-size: var(--step--1); color: var(--slate); margin: -0.15rem 0 0.5rem; max-width: 60ch; }
.opt { font-weight: 400; color: var(--slate); }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea {
  width: 100%; font: inherit; font-size: var(--step-0); color: var(--navy); background: var(--white);
  border: 1.5px solid #6B7A8C; border-radius: var(--radius-small); padding: 0.75rem 0.9rem; min-height: 3.25rem;
  transition: border-color var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out), background-color var(--dur-state) var(--ease-out);
}
input[type="text"]:hover, input[type="email"]:hover, input[type="tel"]:hover, select:hover, textarea:hover { border-color: var(--navy); }
textarea { min-height: 6.5rem; resize: vertical; line-height: 1.5; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.4rem, calc(100% - 0.8rem) 1.4rem; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2.25rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--focus); outline-offset: 1px; border-color: var(--navy);
  box-shadow: 0 0 0 6px rgba(15, 157, 138, 0.12); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice-group { margin: 0 0 1.5rem; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.875rem; padding: 0.5rem 1.1rem; border: 1.5px solid #6B7A8C;
  border-radius: var(--radius-pill); background: var(--white); color: var(--navy); font-size: var(--step-0); font-weight: 600;
  transition: background-color var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out); }
.choice span::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 1.5px solid #6B7A8C;
  transition: background-color var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out), transform var(--dur-state) var(--ease-out); }
.choice:hover span { border-color: var(--navy); }
.choice input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--warm-white); }
.choice input:checked + span::before { background: var(--teal); border-color: var(--teal); transform: scale(1.15); }
.choice input:focus-visible + span { outline: var(--focus); outline-offset: 2px; }
.field-error { display: block; color: var(--error); font-weight: 700; font-size: var(--step--1); margin-top: 0.4rem;
  animation: field-msg var(--dur-state) var(--ease-out); }
@keyframes field-msg { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.has-error input, .has-error select, .has-error textarea { border-color: var(--error); border-width: 2px; }
.has-error .choice span { border-color: var(--error); }
.error-summary { border: 2px solid var(--error); background: var(--white); border-radius: var(--radius); padding: 1.1rem 1.35rem; margin-bottom: 1.75rem;
  box-shadow: 0 18px 40px -24px rgba(180, 35, 24, 0.45); }
.error-summary h2 { font-size: var(--step-2); color: var(--error); }
.error-summary ul, .error-list { margin: 0; padding-left: 1.2rem; }
.error-summary a { color: var(--error); text-decoration-color: var(--error); }
.form-status { font-weight: 700; color: var(--navy); }
.form-status.is-error { color: var(--error); }

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