/* =========================================================================
   Anchor Haven Home Care
   Design system + components.

   Direction: white page, slate-gray structure, color drawn from the logo.
   Reference register is modern product-site craft (21st.dev / shadcn): white
   surfaces, hairline slate borders, small radii, restrained shadow, generous
   space. Not pill buttons, not gradient-blob AI defaults.

   Palette is sampled from the logo artwork:
       navy  #002254   the anchor
       teal  #2E8296   the roofline and the heart
   Slate carries every neutral. Color appears as deliberate splashes:
   the hero wash, icons, rules, the closing call to action.

   Theme is locked to light. There is no dark mode and no accessibility
   widget. Contrast, focus, target size and reduced motion are built in and
   apply to every visitor with no setting to find.

   Shape rule (locked): buttons 8px, cards and media 12px, form controls 8px.
   Nothing on the page is a pill and nothing invents its own radius.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Brand, straight from the logo */
  --navy: #002254;
  --navy-600: #0b3a78;
  --navy-050: #eef2f8;
  --teal: #2e8296;
  --teal-700: #236a7b;   /* accent at body size, 6.1:1 on white */
  --teal-050: #eaf4f7;

  /* Slate carries all structure */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-900: #0f172a;

  /* Roles */
  --paper: #ffffff;
  --ink: var(--navy);
  --body: var(--slate-600);   /* 7.4:1 on white */
  --muted: var(--slate-500);  /* 4.8:1 on white */
  --line: var(--slate-200);
  --line-2: var(--slate-300);
  --on-navy: #ffffff;
  --on-navy-soft: #c3d3e6;
  --on-navy-accent: #9fd4e2;  /* 9.6:1 on navy */

  /* Shadow, tinted to the brand. Borders do most of the work. */
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.04);
  --shadow-md: 0 4px 16px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 16px 44px rgb(0 34 84 / 0.1), 0 2px 8px rgb(15 23 42 / 0.04);

  /* Radius */
  --r-btn: 8px;
  --r-card: 12px;
  --r-media: 12px;
  --r-field: 8px;

  /* Type */
  --font-display: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --step--1: clamp(0.875rem, 0.84rem + 0.18vw, 0.9688rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.23vw, 1.1875rem);
  --step-1: clamp(1.1875rem, 1.11rem + 0.38vw, 1.375rem);
  --step-2: clamp(1.375rem, 1.24rem + 0.68vw, 1.8125rem);
  --step-3: clamp(1.6875rem, 1.44rem + 1.22vw, 2.4375rem);
  --step-4: clamp(2rem, 1.62rem + 1.9vw, 3.0625rem);

  /* Space */
  --gutter: clamp(1.15rem, 0.7rem + 2.2vw, 2.5rem);
  --section-y: clamp(3.25rem, 2.2rem + 5vw, 6rem);
  --stack: clamp(1rem, 0.85rem + 0.7vw, 1.5rem);

  --measure: 68ch;
  --wrap: 1180px;
  --wrap-wide: 1360px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 200ms;
}

@media (prefers-contrast: more) {
  :root {
    --line: #94a3b8;
    --line-2: #64748b;
    --muted: #3d4c5b;
    --body: #23303f;
  }
  .btn, .card, .panel, .tile, .field input, .field select, .field textarea { border-width: 2px; }
}

/* -------------------------------------------------------------------------
   2. Reset and base
   ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute only sets display:none in the UA stylesheet, so any
   author rule that sets display beats it. .btn is display:inline-flex, which
   is exactly how all three funnel buttons ended up visible at once. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.018em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); letter-spacing: -0.012em; }
h4 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.005em; }

p, li { text-wrap: pretty; }
p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; color: var(--slate-900); }

a { color: var(--teal-700); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--navy); }

img, picture, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.15em; margin: 0 0 1em; }
li { margin-bottom: 0.4em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

::selection { background: var(--teal); color: #fff; }

:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 2px; border-radius: 3px; }
.on-navy :focus-visible { outline-color: var(--on-navy-accent); }

/* -------------------------------------------------------------------------
   3. Layout primitives
   ---------------------------------------------------------------------- */

.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap--wide { width: min(100% - (var(--gutter) * 2), var(--wrap-wide)); }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 760px); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.25rem, 1.6rem + 3.5vw, 4rem); }
/* Sections separate with a hairline, never with a change of background. */
.section--ruled { border-top: 1px solid var(--line); }
.section--soft { background: var(--slate-50); }

.stack > * + * { margin-top: var(--stack); }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--body); max-width: 58ch; }
.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--teal);
}

.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--navy); color: #fff;
  padding: 0.8rem 1.4rem;
  border-radius: 0 0 var(--r-btn) var(--r-btn);
  font-weight: 600; text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); color: #fff; }

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

/* -------------------------------------------------------------------------
   4. Buttons and links
   Square-cornered at 8px. Solid navy leads, white with a slate hairline
   supports, teal carries the conversion action.
   ---------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--navy);
  --btn-ink: #ffffff;
  --btn-edge: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.68rem 1.4rem;
  border: 1px solid var(--btn-edge);
  border-radius: var(--r-btn);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { --btn-bg: var(--navy-600); --btn-edge: var(--navy-600); color: #fff; }
.btn:active { transform: translateY(1px); }

.btn--accent { --btn-bg: var(--teal-700); --btn-edge: var(--teal-700); }
.btn--accent:hover { --btn-bg: var(--navy); --btn-edge: var(--navy); }

.btn--ghost {
  --btn-bg: #ffffff;
  --btn-ink: var(--navy);
  --btn-edge: var(--slate-300);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { --btn-bg: var(--slate-50); --btn-edge: var(--slate-400); color: var(--navy); }

.cta-navy .btn:not(.btn--ghost) { --btn-bg: #ffffff; --btn-ink: var(--navy); --btn-edge: #ffffff; }
.cta-navy .btn:not(.btn--ghost):hover { --btn-bg: var(--on-navy-accent); --btn-edge: var(--on-navy-accent); color: var(--navy); }
.cta-navy .btn--ghost { --btn-bg: transparent; --btn-ink: #ffffff; --btn-edge: rgb(255 255 255 / 0.4); box-shadow: none; }
.cta-navy .btn--ghost:hover { --btn-bg: rgb(255 255 255 / 0.1); --btn-edge: #fff; color: #fff; }

.btn--lg { min-height: 54px; padding: 0.85rem 1.85rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.tel { white-space: nowrap; font-variant-numeric: tabular-nums; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-display); font-weight: 600;
  text-decoration: none; color: var(--teal-700);
}
.arrow-link:hover { color: var(--navy); text-decoration: underline; }
.arrow-link svg { transition: transform var(--dur) var(--ease); }
.arrow-link:hover svg { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   5. Header. White, hairline bottom, full-color logo.
   ---------------------------------------------------------------------- */

.utility {
  background: var(--slate-50);
  border-bottom: 1px solid var(--line);
  color: var(--slate-600);
  font-size: 0.875rem;
}
.utility__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.35rem 1.5rem; padding-block: 0.5rem;
}
.utility p { margin: 0; max-width: none; }
.utility a { color: var(--navy); font-weight: 600; text-decoration: none; }
.utility a:hover { color: var(--teal-700); text-decoration: underline; }
@media (max-width: 40rem) {
  .utility__hours { display: none; }
  .utility__inner { justify-content: center; }
}

.header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 80px;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand img { width: auto; height: clamp(46px, 4.2vw, 60px); }

.nav { display: flex; align-items: center; gap: clamp(0.5rem, 1.2vw, 1.1rem); }
.nav__list {
  display: flex; align-items: center; gap: clamp(0.1rem, 0.7vw, 0.6rem);
  list-style: none; margin: 0; padding: 0;
}
.nav__list li { margin: 0; }
.nav__link {
  display: block;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-display);
  font-size: 0.9688rem;
  font-weight: 600;
  color: var(--slate-700);
  text-decoration: none;
  border-radius: var(--r-btn);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover { color: var(--navy); background: var(--slate-100); }
.nav__link.is-current { color: var(--navy); }
.nav__link.is-current::after {
  content: ""; display: block; height: 2px; margin-top: 4px;
  border-radius: 2px; background: var(--teal);
}

.nav__toggle {
  display: none; align-items: center; gap: 0.5rem;
  min-height: 46px; padding: 0.5rem 0.9rem;
  border: 1px solid var(--slate-300); border-radius: var(--r-btn);
  background: #fff; color: var(--navy);
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600;
  cursor: pointer;
}
.nav__toggle:hover { background: var(--slate-50); }
.nav__burger { width: 18px; height: 12px; position: relative; }
.nav__burger span {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { top: 5px; }
.nav__burger span:nth-child(3) { top: 10px; }
[aria-expanded="true"] .nav__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
[aria-expanded="true"] .nav__burger span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav__burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 68rem) {
  .nav__toggle { display: inline-flex; }
  .nav {
    position: absolute; inset: 100% 0 auto 0; display: block;
    padding: 1rem var(--gutter) 1.6rem;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
  .nav[hidden] { display: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: 0.85rem 0.6rem; font-size: 1.0625rem;
    border-bottom: 1px solid var(--line); border-radius: 0;
  }
  .nav__link.is-current::after { display: none; }
  .nav__link.is-current { background: var(--teal-050); border-radius: var(--r-btn); }
  .nav__cta { display: block; margin-top: 1.1rem; }
  .nav__cta .btn { width: 100%; }
  .nav__phone { display: block; margin-top: 0.85rem; text-align: center; font-weight: 600; }
}
@media (min-width: 68.0625rem) {
  .nav[hidden] { display: flex; }
  .nav__phone { display: none; }
}

/* -------------------------------------------------------------------------
   6. Hero. The one gradient on the site: a soft wash of the two logo colors
   bleeding out of the top corners into white.
   ---------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: clamp(2.5rem, 1.8rem + 3.2vw, 4.75rem);
  padding-bottom: clamp(3rem, 2.2rem + 4vw, 5.5rem);
  background:
    radial-gradient(58rem 34rem at 12% -14%, rgb(46 130 150 / 0.13), transparent 62%),
    radial-gradient(52rem 30rem at 96% -6%, rgb(0 34 84 / 0.1), transparent 58%),
    linear-gradient(180deg, var(--slate-50) 0%, #ffffff 62%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero__grid { display: grid; gap: clamp(2rem, 1.2rem + 4vw, 4rem); align-items: center; }
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); }
}
.hero h1 { margin-bottom: 0.4em; }
.hero__lede { font-size: var(--step-1); line-height: 1.55; max-width: 46ch; }
.hero .btn-row { margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.hero__media img {
  width: 100%;
  border-radius: var(--r-media);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

.page-head {
  padding-block: clamp(2.25rem, 1.8rem + 3vw, 4rem) clamp(1.75rem, 1.4rem + 2vw, 3rem);
  background: linear-gradient(180deg, var(--slate-50) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
}
.page-head h1 { max-width: 20ch; }
.page-head .lede { margin-top: 0.6em; }

.crumbs { font-size: var(--step--1); color: var(--muted); margin-bottom: 1rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--slate-300); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--teal-700); }

/* -------------------------------------------------------------------------
   7. Fact strip, cards, panels, splits
   ---------------------------------------------------------------------- */

.facts { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
@media (min-width: 48rem) {
  .facts { grid-template-columns: repeat(3, 1fr); }
  .facts > * + * { border-left: 1px solid var(--line); }
}
.fact { padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); background: var(--paper); }
.fact:not(:last-child) { border-bottom: 1px solid var(--line); }
@media (min-width: 48rem) { .fact:not(:last-child) { border-bottom: 0; } }
.fact h3 { font-size: var(--step-1); margin-bottom: 0.35em; }
.fact p { font-size: var(--step--1); color: var(--muted); margin: 0; }
.fact svg { width: 26px; height: 26px; color: var(--teal); margin-bottom: 0.9rem; }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.card h3 { font-size: var(--step-1); }
.card p:last-child { margin-bottom: 0; }

.panel { border-radius: var(--r-card); padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.panel--soft { background: var(--teal-050); border: 1px solid #cfe4ea; }
.panel--outline { background: var(--paper); border: 1px solid var(--line-2); }
.panel h3 { font-size: var(--step-2); }

.duo { display: grid; gap: clamp(1.25rem, 1rem + 1.4vw, 2rem); align-items: start; }
@media (min-width: 54rem) { .duo { grid-template-columns: 1fr 1fr; } }

.split { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 4rem); align-items: center; }
@media (min-width: 58rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--media-first .split__media { order: -1; }
}
.split__media img {
  width: 100%; border-radius: var(--r-media);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-md);
}

.feature__grid { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 58rem) {
  .feature__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.feature img {
  width: 100%; border-radius: var(--r-media);
  border: 1px solid var(--line);
  aspect-ratio: 5 / 4; object-fit: cover; box-shadow: var(--shadow-md);
}

/* The single navy block per page, reserved for the closing action. */
.cta-navy {
  background:
    radial-gradient(40rem 20rem at 80% 0%, rgb(46 130 150 / 0.35), transparent 60%),
    var(--navy);
  border-radius: var(--r-card);
  padding: clamp(2.5rem, 2rem + 3vw, 4rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  text-align: center;
}
.cta-navy h2 { color: #fff; }
.cta-navy p { color: var(--on-navy-soft); margin-inline: auto; }
.cta-navy a:not(.btn) { color: var(--on-navy-accent); }

/* -------------------------------------------------------------------------
   8. Services grid. Photos sit above the text on white. Nothing depends on a
   dark scrim over a photograph to stay readable.
   ---------------------------------------------------------------------- */

.bento { display: grid; grid-template-columns: 1fr; gap: clamp(0.9rem, 0.7rem + 0.8vw, 1.25rem); }
@media (min-width: 48rem) { .bento { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 62rem) { .bento { grid-template-columns: repeat(12, 1fr); } }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tile:hover { box-shadow: var(--shadow-md); border-color: var(--slate-300); }
.tile__body { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.tile h3 { font-size: var(--step-1); margin-bottom: 0.35em; }
.tile p { font-size: var(--step--1); color: var(--muted); margin: 0; max-width: 46ch; }
.tile > svg {
  width: 28px; height: 28px; color: var(--teal);
  margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 1.75rem) 0;
}
.tile--tint { background: var(--slate-50); }
.tile--accent { background: var(--teal-050); border-color: #cfe4ea; }
.tile--tint, .tile--accent { min-height: 13.5rem; }
.tile--tint .tile__body, .tile--accent .tile__body { margin-top: auto; }
/* flex:1 lets the photo absorb any extra row height, so a short tile beside a
   tall one never ends in a band of empty white. */
.tile--photo img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 48rem) {
  .tile--a { grid-column: span 4; }
  .tile--b { grid-column: span 2; }
  .tile--c { grid-column: span 3; }
  .tile--d { grid-column: span 3; }
  .tile--e { grid-column: span 2; }
  .tile--f { grid-column: span 4; }
}
@media (min-width: 62rem) {
  .tile--a { grid-column: span 7; }
  .tile--b { grid-column: span 5; }
  .tile--c { grid-column: span 5; }
  .tile--d { grid-column: span 3; }
  .tile--e { grid-column: span 4; }
  .tile--f { grid-column: span 12; }
  .tile--f:has(img) { flex-direction: row; align-items: stretch; }
  .tile--f img { width: 44%; height: auto; aspect-ratio: auto; min-height: 15rem; border-bottom: 0; border-right: 1px solid var(--line); }
  .tile--f:has(img) .tile__body { align-self: center; max-width: 54ch; }
  /* Without an image it stays a normal block, so the icon and the text run the
     full width instead of leaving half the row empty. The paragraph cap has to
     lift too, or the text still wraps at 46ch inside a full width tile. */
  .tile--f:not(:has(img)) .tile__body { max-width: 92ch; }
  .tile--f:not(:has(img)) p { max-width: 88ch; }
}

/* -------------------------------------------------------------------------
   9. Stages rail
   ---------------------------------------------------------------------- */

.rail { border-left: 2px solid var(--slate-200); padding-left: clamp(1.25rem, 1rem + 1.4vw, 2.25rem); }
.stage { position: relative; padding-block: clamp(1.1rem, 0.9rem + 1vw, 1.65rem); }
.stage + .stage { border-top: 1px solid var(--line); }
.stage::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.25rem, 1rem + 1.4vw, 2.25rem) - 2px);
  top: calc(clamp(1.1rem, 0.9rem + 1vw, 1.65rem) + 0.62em);
  width: clamp(0.9rem, 0.75rem + 0.8vw, 1.4rem);
  height: 2px;
  background: var(--teal);
}
.stage h3 { font-size: var(--step-2); margin-bottom: 0.25em; }
.stage p { color: var(--body); margin: 0; }

/* -------------------------------------------------------------------------
   10. Lists, chips, notices, quotes, empty state
   ---------------------------------------------------------------------- */

.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding-left: 1.9rem; margin-bottom: 0.7rem; }
.ticks li:last-child { margin-bottom: 0; }
.ticks svg { position: absolute; left: 0; top: 0.3em; width: 19px; height: 19px; color: var(--teal); }
.ticks--no svg { color: var(--slate-400); }
.cta-navy .ticks svg { color: var(--on-navy-accent); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.chips li { margin: 0; }
.chip {
  display: inline-block;
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-btn);
  background: var(--slate-50);
  color: var(--slate-700);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
a.chip:hover { border-color: var(--teal); color: var(--navy); background: var(--teal-050); }

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  background: var(--slate-50);
  border-radius: var(--r-card);
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem) clamp(1.2rem, 1rem + 1vw, 1.6rem);
}
.notice h3 { font-size: var(--step-1); }
.notice p:last-child { margin-bottom: 0; }
.notice--urgent { border-left-color: #b3391f; }

.quote { border: 0; margin: 0; padding: 0; }
.quote p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--navy);
  max-width: 34ch;
}
.quote figcaption { margin-top: 1.1rem; font-size: var(--step--1); color: var(--muted); }
.quote cite { font-style: normal; font-weight: 600; color: var(--slate-900); display: block; }

.empty {
  text-align: center;
  border: 1px dashed var(--slate-300);
  border-radius: var(--r-card);
  padding: clamp(2.25rem, 1.8rem + 2.5vw, 3.5rem) clamp(1.25rem, 1rem + 2vw, 3rem);
  background: var(--slate-50);
}
.empty svg { width: 38px; height: 38px; color: var(--teal); margin: 0 auto 1.25rem; }
.empty p { margin-inline: auto; }

/* -------------------------------------------------------------------------
   11. Disclosure list (FAQ)
   ---------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem) 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal-700); }
.faq summary:focus-visible { outline-offset: -3px; }
.faq__icon {
  flex: 0 0 auto; width: 21px; height: 21px; margin-top: 0.2em;
  color: var(--teal);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] .faq__icon { transform: rotate(45deg); }
.faq__body { padding-bottom: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); }
.faq__body > :last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   12. Footer. Light, so the logo can appear in its full color form.
   ---------------------------------------------------------------------- */

.footer {
  background: var(--slate-50);
  border-top: 1px solid var(--line);
  color: var(--body);
  padding-block: clamp(3rem, 2.2rem + 3vw, 4.5rem) 1.75rem;
}
.footer a { color: var(--slate-600); text-decoration: none; }
.footer a:hover { color: var(--navy); text-decoration: underline; }
.footer__grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 46rem) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; } }
.footer__brand img { height: 56px; width: auto; margin-bottom: 1.1rem; }
.footer__tag { font-family: var(--font-display); color: var(--teal-700); font-weight: 600; }
.footer h3 {
  font-size: 0.8125rem; letter-spacing: 0.11em; text-transform: uppercase;
  font-weight: 600; color: var(--slate-900); margin-bottom: 1rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0.55rem; }
.footer__reg {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.25rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--muted);
}
.footer__reg p { max-width: 94ch; }
.footer__reg strong { color: var(--slate-700); }
.footer__legal {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem;
  align-items: center; justify-content: space-between;
  margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.footer__legal li { margin: 0; }

/* -------------------------------------------------------------------------
   13. Forms
   Label above the control, hint under the label, error under the control.
   No placeholder is ever used as a label.
   ---------------------------------------------------------------------- */

.form { max-width: 46rem; }
.form fieldset { border: 0; margin: 0; padding: 0; }
.form legend {
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 600;
  color: var(--navy); padding: 0; margin-bottom: 0.35em;
}

.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.3rem; }
/* A group of choices needs more air beneath it than a single input does,
   otherwise the next label reads as part of the group. */
fieldset.field { margin-bottom: 2rem; }
.field > label:not(.consent), .field > .field__label {
  font-family: var(--font-display); font-size: 0.9688rem; font-weight: 600;
  color: var(--slate-900); line-height: 1.35;
}
.field__hint { font-size: var(--step--1); color: var(--muted); }
.field__optional { font-weight: 400; color: var(--muted); }
.req { color: #b3391f; font-weight: 700; }

.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="url"], .field input[type="date"], .field input[type="month"],
.field input[type="number"], .field select, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--r-field);
  background: var(--paper);
  color: var(--slate-900);
  font-family: var(--font-body);
  font-size: 1rem;   /* 16px keeps iOS Safari from zooming on focus */
  line-height: 1.5;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field select {
  appearance: none; padding-right: 2.6rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.1rem top 55%, right 0.75rem top 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field input::placeholder, .field textarea::placeholder { color: var(--slate-400); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--slate-400); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--teal-700);
  outline-offset: 1px;
  border-color: var(--teal-700);
}
.field [aria-invalid="true"] { border-color: #b3391f; border-width: 2px; }

.field__error {
  display: flex; align-items: flex-start; gap: 0.4rem;
  font-size: var(--step--1); font-weight: 600; color: #b3391f;
}
.field__error:empty { display: none; }
.field__error svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 0.15em; }

.field input[type="file"] {
  width: 100%; padding: 0.7rem;
  border: 1px dashed var(--slate-300); border-radius: var(--r-field);
  background: var(--slate-50); color: var(--slate-900); font-size: 0.9688rem;
}

.choices { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.choices--inline { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.choice {
  display: flex; align-items: flex-start; gap: 0.7rem;
  min-height: 46px; padding: 0.65rem 0.9rem;
  border: 1px solid var(--line); border-radius: var(--r-field);
  background: var(--paper); cursor: pointer;
  font-size: 1rem; line-height: 1.45;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice:hover { border-color: var(--teal); background: var(--slate-50); }
.choice input { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin: 0.2rem 0 0; accent-color: var(--teal-700); }
.choice:has(input:checked) { border-color: var(--teal-700); background: var(--teal-050); }
.choice:has(input:focus-visible) { outline: 3px solid var(--teal-700); outline-offset: 2px; }

.consent { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.1rem; font-size: 1rem; line-height: 1.55; }
.consent input { flex: 0 0 auto; width: 1.3rem; height: 1.3rem; margin: 0.18rem 0 0; accent-color: var(--teal-700); }

.form__row { display: grid; gap: 0 1.1rem; }
@media (min-width: 40rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 46rem) { .form__row--3 { grid-template-columns: repeat(3, 1fr); } }

/* Honeypot: out of the accessibility tree and the tab order, but not
   display:none, which some form-filling scripts specifically look for. */
.hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------------------
   14. Multi-step funnel, status messages, Turnstile
   The steps only exist once JavaScript runs. Without it the form is one long
   page with a single submit button that still posts and still validates.
   ---------------------------------------------------------------------- */

.funnel__progress { margin-bottom: 2rem; }
.funnel__track { height: 6px; border-radius: 3px; background: var(--slate-200); overflow: hidden; }
.funnel__bar { height: 100%; width: 20%; border-radius: 3px; background: var(--teal-700); transition: width 320ms var(--ease); }
.funnel__count {
  display: block; margin-top: 0.6rem;
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 600; color: var(--muted);
}
.funnel__nav {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
/* Back sits left. The button that moves you forward is always hard right, even
   on the first step where there is no Back to push it there. */
.funnel__nav [data-funnel="next"],
.funnel__nav [data-funnel="submit"] { margin-left: auto; }
.step > h2 { font-size: var(--step-2); }

.form-status {
  margin-bottom: 1.5rem;
  border-radius: var(--r-card);
  padding: clamp(1rem, 0.85rem + 0.7vw, 1.35rem) clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
  border: 1px solid var(--line-2);
  background: var(--slate-50);
}
.form-status:empty { display: none; padding: 0; border: 0; margin: 0; }
.form-status h3 { font-size: var(--step-1); margin-bottom: 0.3em; }
.form-status p:last-child { margin-bottom: 0; }
.form-status--error { border-left: 3px solid #b3391f; background: #fdf6f4; }
.form-status--ok { border-left: 3px solid var(--teal); background: var(--teal-050); }
.form-status ul { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.form-status a { font-weight: 600; }

.is-busy { opacity: 0.7; pointer-events: none; }
.spinner {
  width: 1.05em; height: 1.05em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

.cf-turnstile { margin: 1.25rem 0; min-height: 65px; }
.form__legal { font-size: var(--step--1); color: var(--muted); margin-top: 1.25rem; }

/* -------------------------------------------------------------------------
   15. Texture and motion

   The dot field is the one decorative flourish, borrowed in spirit from the
   dot-pattern components in the shadcn ecosystem and rebuilt here in plain
   CSS so it costs nothing: a repeating radial-gradient masked to fade out
   before it reaches the content.
   ---------------------------------------------------------------------- */

.dots { position: relative; isolation: isolate; }
.dots::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--slate-300) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(46rem 26rem at 22% 4%, #000 0%, transparent 72%);
  mask-image: radial-gradient(46rem 26rem at 22% 4%, #000 0%, transparent 72%);
  opacity: 0.6;
}

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 560ms var(--ease), transform 560ms var(--ease);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal--d1 { transition-delay: 70ms; }
  .js .reveal--d2 { transition-delay: 140ms; }
  .js .reveal--d3 { transition-delay: 210ms; }
}

/* -------------------------------------------------------------------------
   16. Print
   ---------------------------------------------------------------------- */

@media print {
  .utility, .header, .footer__legal, .btn, .cf-turnstile, .funnel__progress, .dots::before { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .cta-navy, .footer, .hero, .page-head { background: #fff !important; }
  .cta-navy h2, .cta-navy p { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .section { padding-block: 1.2rem; }
}

/* -------------------------------------------------------------------------
   17. Utilities

   A deliberately tiny set. These exist so the markup carries no inline style
   attributes, which lets the Content-Security-Policy in _headers ban inline
   styles outright rather than allowing unsafe-inline.
   ---------------------------------------------------------------------- */

.mt-xs { margin-top: 0.75rem; }
.mt-sm { margin-top: 1.25rem; }
.mt-md { margin-top: 1.75rem; }
.mt-lg { margin-top: 2.25rem; }
.mt-xl { margin-top: 3rem; }

.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.row-center { justify-content: center; }
.stack-top { align-items: start; }

.fineprint { color: var(--muted); font-size: var(--step--1); }
.h-sm { font-size: var(--step-2); }
.cta-navy .lede { color: var(--on-navy-soft); }

.icon-accent { color: var(--teal); margin-bottom: 1.25rem; }
.icon-hero { color: var(--teal); margin: 0 auto 1.5rem; }

.card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-media);
  margin-bottom: 1.5rem;
}

/* -------------------------------------------------------------------------
   18. Preview banner

   Shown only while registrationPending is true in src/site.config.json.
   Styled as a system notice, not brand chrome, so nobody reads it as part of
   the design or forgets it is there. It disappears the moment the AHCA
   registration number is set.
   ---------------------------------------------------------------------- */

.preview-bar {
  background: var(--slate-900);
  color: #e2e8f0;
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0.7rem var(--gutter);
  text-align: center;
}
.preview-bar p { max-width: 90ch; margin: 0 auto; }
.preview-bar strong { color: #fff; letter-spacing: 0.02em; }
@media print { .preview-bar { display: none; } }

/* -------------------------------------------------------------------------
   19. Test-fill bar

   A development affordance, not a feature. site.js injects it on localhost,
   and on a pages.dev preview only when the URL carries ?testfill=1, so it can
   never appear once the real domain is attached and does not greet a client
   who opens the plain preview link. See the gate in assets/js/site.js.
   ---------------------------------------------------------------------- */

.testfill {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--slate-700);
  border-radius: var(--r-card);
  background: var(--slate-900);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-display);
  font-size: 0.8125rem;
}
.testfill__label {
  color: #94a3b8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-right: 0.25rem;
}
.testfill button {
  min-height: 34px;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--slate-700);
  border-radius: var(--r-btn);
  background: #1e293b;
  color: #e2e8f0;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.testfill button:hover { background: #334155; color: #fff; border-color: #64748b; }
.testfill button:focus-visible { outline: 3px solid var(--on-navy-accent); outline-offset: 2px; }
.testfill__note { color: #94a3b8; width: 100%; font-weight: 400; letter-spacing: 0; }
@media print { .testfill { display: none; } }