/* BP-WEB-TORONTO-01 -- structural CSS for the Harbourline Cleaning Co. demo build.
   Base tokens/nav/page-hero/service-card/form/FAQ/footer skeleton reused and extended
   from TASKS/BP-WEB-TESTSITE-01/BUILD/assets/css/base.css (the v1 Clearwater build) --
   see DECISIONS.md for exactly what changed and why. New in this build: the hero-video
   scrim component (LAYOUT_ARCHETYPES.md's IMAGE-GROUND TEXT OVERLAY, video variant),
   the flagship/uniform EDITORIAL MODULAR services grid, the WEIGHTED-EMPTY BALANCE
   about layout, the service-areas even-hierarchy grid, the illustrative-pricing panel,
   the FULL-BLEED TYPOGRAPHIC STATEMENT page-hero variant (Contact/FAQ), and the demo
   ribbon. Non-typographic: type.css supplies font tokens/colour tokens. */

:root {
  --container: 72rem;
  --gutter: 1.25rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --radius: 0.5rem;
  --focus-ring: 3px solid #2f5f6b;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg, #fff);
  color: var(--ink, #1c2430);
  font-family: var(--font-body);
  line-height: var(--body-line-height, 1.6);
}
img, svg { max-width: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.75em 1.25em;
  z-index: 200;
}
.skip-link:focus {
  left: var(--gutter);
  top: var(--space-2);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Demo ribbon (non-dismissible, every page) ---- */
.demo-ribbon {
  background: var(--ink);
  color: #fff;
  font-size: 0.8125rem;
  text-align: center;
  padding: 0.5em var(--gutter);
}
.demo-ribbon .wrap { max-width: none; }

/* ---- Nav ---- */
.site-nav {
  border-bottom: 1px solid var(--hairline, #e3e1da);
  background: var(--nav-bg, #fff);
}
.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
  gap: var(--space-2);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-display);
  font-weight: var(--brand-weight, 700);
  font-size: clamp(1.0625rem, 4.2vw, 1.375rem);
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
  flex: 1 1 auto;
}
.brand-mark { flex: 0 0 auto; }
.brand span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.nav-links {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  flex-wrap: wrap;
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-weight: var(--nav-weight, 600);
  font-size: 1rem;
}
.nav-links a:hover { text-decoration: underline; }
.nav-links a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
/* .nav-links a.nav-cta (not a bare .nav-cta) so this rule outranks .nav-links a on
   specificity -- carried forward from v1's own fix, found by that build's contrast
   audit: a bare .nav-cta lost the specificity tiebreak against .nav-links a and the
   CTA silently rendered in --ink text on an --accent fill instead of --accent-ink.
   No other rule in this file targets .nav-cta, so this is the only selector deciding
   the CTA's computed color -- verified by construction; a live computed-style check
   against the rendered page is Phase 3's job (RESPONSIVE_QA_ENGINE.md / Phase 3
   validation), not re-derived here. */
.nav-links a.nav-cta {
  background: var(--accent);
  color: var(--accent-ink, #fff);
  padding: 0.6em 1.2em;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none !important;
}
.nav-toggle {
  display: none;
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--hairline-strong, #b7bcc4);
  border-radius: var(--radius);
  padding: 0.5em 0.65em;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  white-space: nowrap;
}

/* Breakpoint held at 60rem (960px) -- reused from v1's own reasoning (which itself
   reused Source 09's 768px-overlap fix, TEST_RESULTS/nav-768-overlap.md): a brand
   name + 5 links + CTA button that fits at 960px+ does not fit at 768px. */
@media (max-width: 59.9375rem) {
  .nav-links { display: none; }
  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--nav-bg, #fff);
    border-bottom: 1px solid var(--hairline, #e3e1da);
    padding: var(--space-2) var(--gutter) var(--space-3);
    z-index: 50;
  }
  .nav-toggle { display: inline-block; }
  .site-nav { position: relative; }
}

/* ---- Hero (Home only) -- IMAGE-GROUND TEXT OVERLAY, video variant.
   LAYOUT_ARCHETYPES.md: "UNSAFE BY DEFAULT... every use requires a scrim/gradient
   sized to guarantee contrast regardless of the underlying photo." The video's
   camera push moves the plain wall out of frame by mid-clip, so a static "text sits
   on the pale wall" assumption is not reliable across the whole 8s loop -- the scrim
   below is sized so the headline sits inside its guaranteed-opaque zone regardless of
   what the video is showing at that moment. Measured composited contrast in
   DECISIONS.md. */
.hero-media {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.hero-media video,
.hero-media > img.hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-media > img.hero-fallback { display: none; }
/* prefers-reduced-motion: reduce -- show the still, never start the video. Belt for
   the visual swap; hero-motion.js is the braces stopping actual playback/preload. */
@media (prefers-reduced-motion: reduce) {
  .hero-media video { display: none; }
  .hero-media > img.hero-fallback { display: block; }
}
.hero-media .hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(28, 36, 48, 0.86) 0%,
    rgba(28, 36, 48, 0.86) 40%,
    rgba(28, 36, 48, 0.55) 58%,
    rgba(28, 36, 48, 0) 74%
  );
}
.hero-media .hero-content {
  position: relative;
  padding-block: var(--space-6) var(--space-5);
  min-height: 34rem;
  display: flex;
  align-items: center;
}
.hero-media .hero-content .wrap { max-width: 48rem; }
.hero-media h1 {
  font-family: var(--font-display);
  font-weight: var(--h1-weight, 700);
  font-size: var(--h1-size);
  line-height: var(--h1-line-height, 1.14);
  letter-spacing: var(--h1-tracking, -0.005em);
  margin: 0 0 var(--space-3);
  color: #fff;
  max-width: 20ch;
  text-wrap: balance;
}
.hero-media .lede {
  font-family: var(--font-body);
  font-size: 1.1875rem;
  line-height: 1.6;
  color: #e7e9ec;
  max-width: 34ch;
  margin: 0 0 var(--space-4);
}
@media (max-width: 47.9375rem) {
  .hero-media .hero-content { min-height: 30rem; padding-block: var(--space-5) var(--space-4); }
  .hero-media .hero-scrim {
    background: linear-gradient(
      180deg,
      rgba(28, 36, 48, 0.35) 0%,
      rgba(28, 36, 48, 0.82) 46%,
      rgba(28, 36, 48, 0.9) 100%
    );
  }
  .hero-media .hero-content { align-items: flex-end; }
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink, #fff);
  font-family: var(--font-body);
  font-weight: var(--btn-weight, 700);
  font-size: 1rem;
  padding: 0.85em 1.75em;
  border-radius: var(--radius);
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn:hover { filter: brightness(0.92); }
.btn-light {
  background: #fff;
  color: var(--ink);
}
.btn-group { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---- Page hero (Services/detail/About/Areas -- image contained, not overlaid).
   EDITORIAL MODULAR logic: image is its own module, headline is a second, separate
   module -- deliberately NOT the overlay technique, reserved for the Home hero alone
   (LAYOUT_ARCHETYPES.md: "there's only room for the technique to matter once or twice
   per page before it loses impact through repetition" -- extended site-wide here so
   the one full-bleed-overlay moment stays a real spike, not a repeated template). */
.page-hero {
  padding-block: var(--space-5) var(--space-4);
  background: var(--hero-bg, #f3f1ec);
}
.page-hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-4);
  align-items: center;
}
.page-hero.no-media .wrap { display: block; max-width: 44rem; }
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--h1-weight, 700);
  font-size: var(--h1-size-page);
  line-height: 1.15;
  letter-spacing: var(--h1-tracking, -0.005em);
  margin: 0 0 var(--space-2);
  color: var(--ink);
  text-wrap: balance;
}
.page-hero .lede {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-muted, #566072);
  max-width: 38rem;
  margin: 0;
}
.page-hero .media-frame {
  border-radius: var(--radius);
  overflow: hidden;
}
.page-hero .media-frame img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 47.9375rem) {
  .page-hero .wrap { grid-template-columns: 1fr; }
  .page-hero .media-frame { order: -1; }
}

/* ---- FULL-BLEED TYPOGRAPHIC STATEMENT page-hero (Contact, FAQ only).
   LAYOUT_ARCHETYPES.md archetype 2: "works with zero imagery... exactly why it fits"
   a page with no available/needed photography -- Contact and FAQ are the two pages
   in this build's asset manifest with no page-specific image, and each carries one
   genuinely short, strong headline as the page's dominant compositional element. */
.page-hero.statement {
  padding-block: var(--space-6) var(--space-5);
}
.page-hero.statement .wrap { max-width: 46rem; }
.page-hero.statement h1 {
  font-size: clamp(2.25rem, 5.4vw + 0.4rem, 4rem);
  line-height: 1.08;
}

/* ---- Services index: flagship + uniform grid (EDITORIAL MODULAR) ---- */
.service-index {
  padding-block: var(--space-6);
}
.service-index h2 {
  font-family: var(--font-display);
  font-weight: var(--h2-weight, 600);
  font-size: var(--h2-size);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
.service-index .body-copy {
  font-size: var(--body-size, 1.0625rem);
  max-width: 42rem;
  color: var(--ink-muted, #566072);
}
.modular-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.modular-grid .service-card.flagship {
  grid-column: span 6;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: center;
}
.modular-grid .service-card.flagship .media-frame { border-radius: var(--radius); overflow: hidden; }
.modular-grid .service-card.flagship img { width: 100%; height: 100%; object-fit: cover; }
.modular-grid .service-card:not(.flagship) { grid-column: span 2; }
/* Home's highlight uses only 2 secondary cards (flagship + 2), not the full 6-card
   services index -- widen them to fill the row evenly instead of leaving a gap. */
.modular-grid.pair .service-card:not(.flagship) { grid-column: span 3; }
.service-card {
  border: 1px solid var(--hairline, #e3e1da);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  background: #fff;
}
/* Optional thumbnail on a non-flagship card (index-only listings with a generated
   image but no dedicated detail page) -- distinct from .flagship's own larger,
   side-by-side media-frame rule above. */
.service-card > .media-frame {
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-2);
}
.service-card > .media-frame img { width: 100%; height: 9rem; object-fit: cover; }
.service-card .eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 0 0 0.5em;
}
.service-card h3 {
  font-family: var(--font-display);
  font-weight: var(--h3-weight, 600);
  font-size: 1.1875rem;
  margin: 0 0 0.4em;
}
.modular-grid .service-card.flagship h3 { font-size: 1.625rem; }
.service-card p { margin: 0 0 var(--space-2); font-size: 0.9375rem; color: var(--ink-muted, #566072); flex-grow: 1; }
.service-card a.card-link { font-weight: 700; color: var(--accent); text-decoration: none; }
.service-card a.card-link:hover { text-decoration: underline; }
@media (max-width: 59.9375rem) {
  .modular-grid { grid-template-columns: repeat(2, 1fr); }
  .modular-grid .service-card.flagship { grid-column: span 2; grid-template-columns: 1fr; }
  .modular-grid .service-card:not(.flagship) { grid-column: span 1; }
  .modular-grid.pair .service-card:not(.flagship) { grid-column: span 1; }
}
@media (max-width: 35.9375rem) {
  .modular-grid { grid-template-columns: 1fr; }
  .modular-grid .service-card.flagship,
  .modular-grid .service-card:not(.flagship),
  .modular-grid.pair .service-card:not(.flagship) { grid-column: span 1; }
}

/* ---- Home: process steps (even 3-up grid) ---- */
.process-steps { padding-block: var(--space-6); }
.process-steps h2 {
  font-family: var(--font-display);
  font-weight: var(--h2-weight, 600);
  font-size: var(--h2-size);
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
.process-list {
  list-style: none;
  counter-reset: step;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.process-list li {
  counter-increment: step;
  background: var(--hero-bg, #f3f1ec);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.process-list li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink, #fff);
  margin-bottom: var(--space-2);
}
.process-list h3 { font-family: var(--font-display); font-weight: var(--h3-weight, 600); font-size: 1.0625rem; margin: 0 0 0.4em; }
.process-list p { margin: 0; font-size: 0.9375rem; color: var(--ink-muted, #566072); }
@media (max-width: 47.9375rem) {
  .process-list { grid-template-columns: 1fr; }
}

/* ---- Text-only strip (Home areas teaser -- deliberately not a grid, to vary rhythm
   against the process-steps and services sections above it) ---- */
.text-strip { padding-block: var(--space-5); }
.text-strip .wrap { max-width: 44rem; }
.text-strip h2 {
  font-family: var(--font-display);
  font-weight: var(--h2-weight, 600);
  font-size: var(--h2-size);
  margin: 0 0 var(--space-2);
}
.text-strip p { color: var(--ink-muted, #566072); font-size: var(--body-size, 1.0625rem); margin: 0 0 var(--space-2); }
.text-strip a.card-link { font-weight: 700; color: var(--accent); text-decoration: none; }
.text-strip a.card-link:hover { text-decoration: underline; }

/* ---- Service detail: checklist / not-included / pricing / schedule ---- */
.detail-categories {
  padding-block: var(--space-6);
  background: var(--hero-bg, #f3f1ec);
}
.detail-categories h2 { font-family: var(--font-display); font-weight: var(--h2-weight, 600); font-size: var(--h2-size); margin: 0 0 var(--space-2); }
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.category-card {
  background: #fff;
  border: 1px solid var(--hairline, #e3e1da);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.category-card h3 {
  font-family: var(--font-display);
  font-weight: var(--h3-weight, 600);
  font-size: 1.125rem;
  margin: 0 0 var(--space-2);
}
.category-card ul { margin: 0; padding-left: 1.1em; color: var(--ink-muted, #566072); font-size: 0.9375rem; }
.category-card li { margin-bottom: 0.4em; }
@media (max-width: 47.9375rem) {
  .category-grid { grid-template-columns: 1fr; }
}

.not-included { padding-block: var(--space-5); }
.not-included .wrap { max-width: 42rem; }
.not-included h2 { font-family: var(--font-display); font-weight: var(--h2-weight, 600); font-size: 1.5rem; margin: 0 0 var(--space-2); }
.not-included ul { padding-left: 1.2em; color: var(--ink-muted, #566072); }
.not-included li { margin-bottom: 0.5em; }

.pricing-panel {
  padding-block: var(--space-5);
}
.pricing-panel .wrap { max-width: 42rem; }
.pricing-panel .panel {
  border: 1px solid var(--hairline-strong, #b7bcc4);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--hero-bg, #f3f1ec);
}
.pricing-panel .panel-label {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted, #566072);
  margin: 0 0 var(--space-2);
}
.pricing-panel table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.pricing-panel th, .pricing-panel td { text-align: left; padding: 0.5em 0; border-bottom: 1px solid var(--hairline, #e3e1da); }
.pricing-panel tr:last-child th, .pricing-panel tr:last-child td { border-bottom: none; }
.pricing-panel .panel-foot { margin: var(--space-2) 0 0; font-size: 0.8125rem; color: var(--ink-muted, #566072); }

.schedule-options { padding-block: var(--space-5); }
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.schedule-card {
  border: 1px solid var(--hairline, #e3e1da);
  border-radius: var(--radius);
  padding: var(--space-3);
  text-align: center;
}
.schedule-card .freq {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  display: block;
  margin-bottom: 0.3em;
}
@media (max-width: 47.9375rem) {
  .schedule-grid { grid-template-columns: 1fr; }
}

/* ---- About: WEIGHTED-EMPTY BALANCE.
   LAYOUT_ARCHETYPES.md archetype 4: one region deliberately sparse (the story column,
   generous top padding, short paragraphs), rebalanced by ONE asymmetric addition (the
   about-craft.jpg flat-lay, offset into the lighter region) rather than an even
   two-column split. Only used here, once, site-wide -- an about page's unevenly
   weighted content (a short story + one image) is the one place on this site the
   content requirement ("an unevenly-weighted content set to begin with") is actually
   met; elsewhere (Service Areas) the content is evenly weighted and uses EDITORIAL
   MODULAR's even-hierarchy logic instead, per that archetype's own guidance. */
.about-balance {
  padding-block: var(--space-6);
}
.about-balance .wrap {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-5);
  align-items: start;
}
.about-balance .story { padding-top: var(--space-4); max-width: 32rem; }
.about-balance .story h2 { font-family: var(--font-display); font-weight: var(--h2-weight, 600); font-size: var(--h2-size); margin: 0 0 var(--space-2); }
.about-balance .story p { color: var(--ink-muted, #566072); font-size: var(--body-size, 1.0625rem); }
.about-balance .media-block { position: relative; }
.about-balance .media-block .media-frame { border-radius: var(--radius); overflow: hidden; margin-left: var(--space-5); }
.about-balance .media-block .media-frame img { width: 100%; object-fit: cover; }
@media (max-width: 59.9375rem) {
  .about-balance .wrap { grid-template-columns: 1fr; }
  .about-balance .story { padding-top: 0; max-width: none; }
  .about-balance .media-block .media-frame { margin-left: 0; }
}

.values-strip { padding-block: var(--space-5); background: var(--hero-bg, #f3f1ec); }
.values-strip .wrap { max-width: 42rem; }
.values-strip h2 { font-family: var(--font-display); font-weight: var(--h2-weight, 600); font-size: 1.5rem; margin: 0 0 var(--space-2); }
.values-strip p { color: var(--ink-muted, #566072); }

/* ---- Service Areas: even-hierarchy modular grid (image module + two co-equal
   list modules -- EDITORIAL MODULAR's even-hierarchy variant, not weighted-empty,
   since the two area groups are genuinely comparable in weight). ---- */
.areas-modular { padding-block: var(--space-6); }
.areas-modular .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.areas-modular .media-frame { grid-column: 1 / -1; border-radius: var(--radius); overflow: hidden; }
.areas-modular .media-frame img { width: 100%; object-fit: cover; }
.area-group h2 { font-family: var(--font-display); font-weight: var(--h2-weight, 600); font-size: 1.375rem; margin: var(--space-4) 0 var(--space-2); }
.area-group ul { margin: 0; padding-left: 1.1em; color: var(--ink-muted, #566072); }
.area-group li { margin-bottom: 0.4em; }
.area-note { grid-column: 1 / -1; font-size: 0.9375rem; color: var(--ink-muted, #566072); max-width: 44rem; margin: var(--space-2) 0 0; }
@media (max-width: 47.9375rem) {
  .areas-modular .wrap { grid-template-columns: 1fr; }
}

/* ---- CTA band ("act" -- low grid-expression variation, flat depth per
   SECTION_RHYTHM_ENGINE.md's rule for act-classified sections) ---- */
.cta-band {
  padding-block: var(--space-5);
  background: var(--ink, #1c2430);
  text-align: center;
}
.cta-band .wrap { max-width: 36rem; }
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: var(--h2-weight, 600);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #fff;
  margin: 0 0 var(--space-2);
}
.cta-band p { color: #ccd1d8; margin: 0 0 var(--space-3); }

/* ---- Form ("act") ---- */
.contact { padding-block: var(--space-6); background: var(--form-bg, #f3f1ec); }
.contact .wrap { max-width: 34rem; }
.contact .form-note {
  background: #fff;
  border: 1px solid var(--hairline-strong, #b7bcc4);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-size: 0.9375rem;
  color: var(--ink-muted, #566072);
  margin-bottom: var(--space-3);
}
.field { margin-bottom: var(--space-3); }
.field .hint { display: block; font-size: 0.8125rem; color: var(--ink-muted, #566072); margin-top: 0.3em; }
label {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--label-weight, 600);
  font-size: 0.9375rem;
  margin-bottom: 0.4em;
}
input, textarea, select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75em 0.9em;
  border: 1px solid var(--hairline-strong, #b7bcc4);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}
input:focus, textarea:focus, select:focus { outline: var(--focus-ring); outline-offset: 1px; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: #b3261e; }
.field .error { display: none; color: #b3261e; font-size: 0.8125rem; margin-top: 0.3em; }
.field.has-error .error { display: block; }
.confirmation {
  display: none;
  background: #eaf1ee;
  border: 1px solid #6f9c8f;
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-top: var(--space-3);
}
.confirmation.is-visible { display: block; }
.confirmation h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 0.4em; }
.confirmation p { margin: 0; color: var(--ink-muted, #566072); }

/* ---- FAQ ---- */
.faq { padding-block: var(--space-6); }
.faq h2 { font-family: var(--font-display); font-size: var(--h2-size); margin-bottom: var(--space-3); }
.faq-item { border-bottom: 1px solid var(--hairline, #e3e1da); }
.faq-item summary {
  cursor: pointer;
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+ "; color: var(--accent); }
.faq-item[open] summary::before { content: "\2212 "; }
.faq-item p { margin: 0 0 var(--space-3); color: var(--ink-muted, #566072); font-size: var(--body-size, 1rem); max-width: 42rem; }
.faq-link { padding-block: 0 var(--space-5); }
.faq-group h2.group-heading { font-size: 1.25rem; margin-top: var(--space-5); }
.faq-group:first-child h2.group-heading { margin-top: 0; }

/* ---- Footer ---- */
footer {
  padding-block: var(--space-5);
  border-top: 1px solid var(--hairline, #e3e1da);
  font-size: 0.875rem;
  color: var(--ink-muted, #566072);
}
.footer-notice { max-width: 46rem; margin: 0 0 var(--space-3); }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-3); padding: 0; }
.footer-links a { color: var(--ink-muted, #566072); }

.breadcrumb { font-size: 0.875rem; color: var(--ink-muted, #566072); padding-block: var(--space-2); }
.breadcrumb a { color: var(--ink-muted, #566072); }