/* ==========================================================================
   Voice for Blind — Concept A: "Clarity"
   Clean, institutional, trust-first design system.
   Palette: pale blue background, steel-blue primary, ink text, muted teal accent.
   ========================================================================== */

/* -------------------------------- Tokens -------------------------------- */
:root {
  /* Brand palette */
  --bg: #EAF4FC;
  --surface: #FFFFFF;
  --primary: #1D6FA5;
  --primary-dark: #145a87;
  --primary-tint: #DCEBF6;
  --ink: #1C2733;
  --ink-soft: rgba(28, 39, 51, 0.72);
  --ink-faint: rgba(28, 39, 51, 0.56);
  --accent: #2E9E8C;        /* decorative use only: icons, borders, badges, dot motif */
  --accent-text: #1F7A6C;   /* AA-safe variant for links / small text on light bg */
  --accent-tint: #DEF0EC;
  --divider: rgba(28, 39, 51, 0.13);
  --divider-strong: rgba(28, 39, 51, 0.2);
  --focus-color: #10456a;
  --danger: #B3261E;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible", -apple-system, "Segoe UI", Arial, sans-serif;

  --fs-h1: clamp(2.1rem, 1.55rem + 2.3vw, 3.4rem);
  --fs-h2: clamp(1.5rem, 1.3rem + 0.9vw, 2.15rem);
  --fs-h3: clamp(1.18rem, 1.08rem + 0.4vw, 1.4rem);
  --fs-lede: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);

  /* Shape / elevation */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 3px rgba(28, 39, 51, 0.08);
  --shadow-md: 0 10px 30px rgba(20, 42, 60, 0.1);

  --container-w: 1120px;
  --space-section: clamp(3rem, 2.4rem + 2.5vw, 5.5rem);
}

/* -------------------------------- Reset -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd {
  margin: 0;
}
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

/* -------------------------------- Base -------------------------------- */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.65;
  min-width: 320px;
}

main { display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
h1 { font-size: var(--fs-h1); font-weight: 500; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 700; font-family: var(--font-body); }

p { color: var(--ink-soft); }

a { text-decoration-color: rgba(31, 122, 108, 0.45); text-underline-offset: 0.15em; }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 1rem + 2vw, 2.5rem);
}

/* Visually-hidden but available to assistive tech */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 1000;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 1rem;
}

/* Focus visibility — never removed, always replaced */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------- Buttons -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover { background: var(--primary-dark); }

.btn-outline {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary-dark);
}
.btn-outline:hover { background: var(--primary-tint); }

.btn-on-dark {
  background: #fff;
  color: var(--primary-dark);
}
.btn-on-dark:hover { background: var(--primary-tint); }

.btn-outline-on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}
.btn-outline-on-dark:hover { background: rgba(255, 255, 255, 0.12); }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Inline text link with arrow, used inside cards */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--accent-text);
  text-decoration: underline;
  min-height: 44px;
  padding-block: 0.5rem;
}
.link-arrow:hover { color: var(--primary-dark); }
.link-arrow svg { flex-shrink: 0; transition: transform 0.15s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* -------------------------------- Header / Nav -------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  min-height: 44px;
}
.brand-mark {
  color: var(--primary);
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.brand-name-accent { color: var(--primary); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.nav-toggle:hover { background: var(--primary-tint); }
.icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav .nav-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}
.nav-link:hover { color: var(--primary-dark); background: var(--primary-tint); }
.nav-link[aria-current="page"] {
  color: var(--primary-dark);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.nav-item-dropdown { position: relative; }
.dropdown-toggle .chevron { transition: transform 0.15s ease; }
.dropdown-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.nav-item-dropdown.has-current-page > .dropdown-toggle {
  color: var(--primary-dark);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.5rem;
}
.dropdown-menu a {
  display: block;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  color: var(--ink);
}
.dropdown-menu a:hover { background: var(--primary-tint); color: var(--primary-dark); }
.dropdown-menu a[aria-current="page"] { color: var(--primary-dark); background: var(--primary-tint); }

/* Desktop dropdown positioning */
@media (min-width: 860px) {
  .dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  }
  .dropdown-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* Mobile nav */
@media (max-width: 859.98px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--divider);
    box-shadow: var(--shadow-md);
  }
  .site-nav:not(.is-open) { display: none; }
  .site-nav .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem clamp(1.25rem, 1rem + 2vw, 2.5rem) 1.25rem;
  }
  .site-nav .nav-link { width: 100%; }
  .nav-item-dropdown { display: flex; flex-direction: column; }
  .dropdown-toggle { width: 100%; justify-content: space-between; }
  .dropdown-menu {
    border: none;
    box-shadow: none;
    padding: 0 0 0 0.75rem;
  }
  .dropdown-menu:not(.is-open) { display: none; }
}
@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; }
  .site-nav .nav-list { flex-direction: row; }
}

/* -------------------------------- Banners -------------------------------- */
.banner {
  position: relative;
  border-bottom: 1px solid var(--divider);
  overflow: hidden;
}
.banner-inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-section);
}
.banner--full .banner-inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 860px) {
  .banner--full .banner-inner { grid-template-columns: 1.1fr 0.9fr; }
}
.banner-eyebrow {
  display: inline-block;
  font-weight: 700;
  color: var(--accent-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 0.9rem;
}
.banner-title { max-width: 20ch; }
.banner-subtitle {
  margin-top: 1rem;
  font-size: var(--fs-lede);
  max-width: 46ch;
  color: var(--ink-soft);
}
.banner-actions { margin-top: 2rem; }

.banner--mini {
  position: relative;
  background-color: var(--bg);
  /* Photo assigned per-instance via an inline background-image style on the
     element itself (see HTML) — NOT via a --photo custom property: relative
     url()s inside a custom property resolve against the stylesheet that
     reads it (this file's own folder), not the HTML document, which silently
     broke every photo here. The ink scrim below keeps white text at AA
     contrast even over the busiest part of the photo.
     min-height + a top-biased background-position keep these 1600x1000
     photos from cropping through people's faces: the box was previously
     only ~300-380px tall against a much wider viewport, cropping to a ~5:1
     sliver centered on the photo's vertical midpoint — which cut foreheads
     off since these portraits carry their subjects' faces higher in frame. */
  min-height: clamp(300px, 32vw, 440px);
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
}
.banner--mini::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 39, 51, 0.68);
  pointer-events: none;
  z-index: 0;
}
.banner--mini .banner-inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.25rem, 1.9rem + 1.5vw, 3.25rem);
}
.banner--mini .banner-title { max-width: none; color: #fff; }
.banner--mini .banner-subtitle { max-width: 60ch; color: #fff; }

.banner-art { justify-self: center; }
.banner-art svg { width: 100%; max-width: 420px; height: auto; }
.banner-art img {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--divider);
}

/* Faint braille dot-grid texture — signature element, used sparingly (2 sections total) */
.dot-texture { position: relative; }
.dot-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(29, 111, 165, 0.16) 1.6px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, black, rgba(0,0,0,0.15) 75%, transparent);
  mask-image: linear-gradient(to bottom, black, rgba(0,0,0,0.15) 75%, transparent);
  pointer-events: none;
  z-index: 0;
}

/* -------------------------------- Media split (text + photo) -------------------------------- */
.split {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
  .split--reverse .split-media { order: 2; }
  .split--reverse .split-text { order: 1; }
}
.split-text { display: flex; flex-direction: column; gap: 1rem; }
.split-text .section-lede { margin-top: 0; }
.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
}

/* -------------------------------- Sections -------------------------------- */
.section {
  padding-block: var(--space-section);
  border-bottom: 1px solid var(--divider);
}
.section:last-of-type { border-bottom: 0; }
.section--alt { background: var(--surface); }

.section-header { max-width: 62ch; margin-bottom: clamp(2rem, 1.7rem + 1vw, 2.75rem); }
.section-header.center { margin-inline: auto; text-align: center; }
.section-lede { margin-top: 0.85rem; font-size: var(--fs-lede); }

/* -------------------------------- Grids / Cards -------------------------------- */
.grid {
  display: grid;
  gap: 1.5rem;
}
.grid--2 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.section--alt .card { background: var(--bg); }

.card-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary-tint);
  color: var(--primary-dark);
  flex-shrink: 0;
}
.card-title { margin-top: 0.25rem; }
.card-text { flex-grow: 1; }

/* Card with a photo header (e.g. Scribe Assistance "I Need / I Want" cards) */
.card--photo { padding: 0; gap: 0; overflow: hidden; }
.card-photo { aspect-ratio: 4 / 3; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; }
.card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex-grow: 1;
}

/* Simple list-style item (no card chrome) used for "Where Your Support Goes" etc. */
.plain-grid-item {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-block: 0.25rem;
}
.plain-grid-item .item-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-text);
}

/* -------------------------------- Steps (braille dot-cluster motif) -------------------------------- */
.steps-list {
  display: grid;
  gap: 2rem;
}
@media (min-width: 720px) {
  .steps-list { grid-template-columns: repeat(3, 1fr); }
}
.step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.step-dots {
  width: 40px;
  height: 56px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
  gap: 6px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
}
.section--alt .step-dots { background: var(--bg); }
.step-dots .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--divider-strong);
  background: transparent;
}
.step-dots .dot--filled {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: inset 0 -1px 1.5px rgba(11, 40, 60, 0.45), 0 1px 0 rgba(255, 255, 255, 0.5);
}
.step h3 { margin-top: 0.15rem; }

/* -------------------------------- CTA band -------------------------------- */
.cta-band {
  position: relative;
  background-color: var(--primary);
  /* Photo assigned per-instance via an inline background-image style on the
     element itself (see HTML) — NOT via a --photo custom property: relative
     url()s inside a custom property resolve against the stylesheet that
     reads it (this file's own folder), not the HTML document, which silently
     broke every photo here. The ink scrim is a ::after (not ::before) so it
     doesn't collide with .dot-texture::before on the 3 bands that combine
     both classes; it still keeps white text at AA contrast over the busiest
     part of the photo. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  padding-block: clamp(2.75rem, 2.3rem + 1.8vw, 4rem);
  text-align: center;
}
/* Parallax-style fixed background on capable desktop viewports only:
   iOS Safari doesn't support background-attachment:fixed (harmlessly falls
   back to scroll there). Deliberately NOT gated behind prefers-reduced-motion
   (unlike the site's real animations) — this is a static background-paint
   property, not a moving/animating effect, and gating it there was also
   silently disabling it for anyone whose OS reports a reduced-motion
   preference even without asking for one, which made it hard to verify. */
@media (min-width: 768px) {
  .cta-band { background-attachment: fixed; }
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 39, 51, 0.68);
  pointer-events: none;
  z-index: 0;
}
.cta-band-inner { position: relative; z-index: 1; max-width: 46ch; margin-inline: auto; }
.cta-band h2 { color: #fff; }
.cta-band p {
  color: #fff;
  margin-top: 0.75rem;
  font-size: var(--fs-lede);
}
.cta-band .btn-group { justify-content: center; margin-top: 2rem; }

.cta-strip {
  background: var(--accent-tint);
  border-top: 1px solid var(--divider);
  padding-block: 2.25rem;
}
.cta-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.cta-strip h2 { font-size: 1.3rem; }
.cta-strip p { margin-top: 0.25rem; }

/* -------------------------------- Accordion (Guidance schemes) -------------------------------- */
.accordion { display: flex; flex-direction: column; gap: 1rem; }
.accordion-item {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  padding: 1.25rem 1.5rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
}
.accordion-trigger:hover { background: var(--primary-tint); }
.accordion-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--divider-strong);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--primary-dark);
  transition: transform 0.18s ease;
}
.accordion-trigger[aria-expanded="true"] .accordion-icon { transform: rotate(45deg); }

.accordion-panel { padding: 0 1.5rem 1.75rem; }
.accordion-panel[hidden] { display: none; }

.scheme-fields { display: grid; gap: 1.25rem; }
@media (min-width: 640px) {
  .scheme-fields { grid-template-columns: repeat(2, 1fr); }
}
.scheme-field dt {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.scheme-field dd { color: var(--ink-soft); }

/* -------------------------------- Contact page -------------------------------- */
.contact-layout {
  display: grid;
  gap: 3rem;
}
@media (min-width: 860px) {
  .contact-layout { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
}

.contact-info-list { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.5rem; }
.contact-info-item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-info-item .item-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary-dark);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-info-item h3 { font-size: 1rem; font-family: var(--font-body); font-weight: 700; }
.contact-info-item a,
.contact-info-item p { color: var(--ink-soft); text-decoration: none; }
.contact-info-item a { color: var(--accent-text); text-decoration: underline; }
.contact-info-item a:hover { color: var(--primary-dark); }

.contact-form {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
}
.form-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) {
  .form-grid--2col { grid-template-columns: 1fr 1fr; }
}
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-weight: 700; }
.form-group .hint { font-weight: 400; color: var(--ink-soft); font-size: 0.9rem; }
.form-group input,
.form-group select,
.form-group textarea {
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--divider-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 1px;
  border-color: var(--focus-color);
}
.form-actions { margin-top: 0.5rem; }

.form-confirmation {
  text-align: center;
  padding: 2.5rem 1rem;
}
.form-confirmation .confirm-icon {
  margin: 0 auto 1.25rem;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-text);
  display: inline-flex; align-items: center; justify-content: center;
}
.form-confirmation[hidden] { display: none; }
.form-confirmation h2:focus {
  outline: 3px solid var(--focus-color);
  outline-offset: 4px;
  border-radius: 4px;
}

/* -------------------------------- Footer -------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.86);
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(2.75rem, 2.3rem + 1.8vw, 4rem);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}
.footer-brand .brand-name { color: #fff; }
.footer-brand p { margin-top: 0.9rem; max-width: 32ch; color: rgba(255, 255, 255, 0.72); }

.footer-heading {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.86);
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.footer-col a:hover { color: #fff; text-decoration: underline; }

.social-list { flex-direction: row !important; gap: 0.6rem !important; flex-wrap: wrap; }
.social-list a {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
}
.social-list a:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255,255,255,0.5); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-block: 1.25rem;
}
.footer-bottom p { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; }

/* -------------------------------- Utility -------------------------------- */
.text-center { text-align: center; }
.mt-lg { margin-top: clamp(2rem, 1.7rem + 1vw, 2.75rem); }
.eyebrow-list {
  display: flex; flex-direction: column; gap: 0.9rem;
  margin-top: 1.5rem;
}
.eyebrow-list li {
  display: flex; gap: 0.75rem; align-items: flex-start;
  color: var(--ink-soft);
}
.eyebrow-list .bullet-dot {
  flex-shrink: 0;
  margin-top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.closing-lines {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--primary-dark);
  font-weight: 500;
}

@media (max-width: 480px) {
  .btn-group { flex-direction: column; align-items: stretch; }
}