/* ==========================================================================
   Watt Security — Components
   Reusable component styles, matching architecture/COMPONENT_ARCHITECTURE.md
   one-to-one. This milestone implements: Skip Link, Header, Logo,
   Navigation, CTA Button, Mobile Menu Toggle.
   Mobile-first: base rules target the smallest viewport; media queries
   progressively enhance for tablet/desktop (design/SPACING.md breakpoints).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Skip Link (specifications/ACCESSIBILITY_SPECIFICATION.md §1)
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: var(--z-skip-link);
  padding: var(--space-xs) var(--space-md);
  background-color: var(--color-navy);
  color: var(--color-text-offwhite);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-sm);
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus-visible {
  top: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Header (design/UI_COMPONENTS.md §9 Navigation Bar; architecture/
   COMPONENT_ARCHITECTURE.md §1-2 Header/Navigation)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-navy);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-sm);
  position: relative;
}

/* ---- Logo (official asset: assets/logo/logo_watt.jpg — do not modify the
   file itself; only its displayed size is controlled here) ---- */
.site-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.site-header__logo-img {
  display: block;
  height: 2.5rem;   /* 40px — mobile/tablet */
  width: auto;
}

@media (min-width: 768px) {
  .site-header__logo-img {
    height: 3rem;   /* 48px — desktop */
  }
}

/* --------------------------------------------------------------------------
   Navigation
   Mobile/Tablet (<1024px): collapses into a dropdown panel toggled by the
   hamburger button. Desktop (>=1024px): displayed inline in the header row.
   The 1024px cutoff (rather than 768px) is a deliberate choice: fitting the
   logo + 5 links + CTA comfortably requires full desktop width — see the
   Milestone 6 report for the rationale (resolves the open question left in
   design/SPACING.md §4 regarding tablet nav treatment).
   -------------------------------------------------------------------------- */
.nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
  background-color: var(--color-navy);
  padding: var(--space-md);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-slow) var(--ease-in-out),
    max-height var(--duration-slow) var(--ease-in-out),
    visibility 0s linear var(--duration-slow);
}

.nav.is-open {
  max-height: 28rem;
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--duration-slow) var(--ease-in-out),
    max-height var(--duration-slow) var(--ease-in-out),
    visibility 0s linear 0s;
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.nav__link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-nav-mobile);
  letter-spacing: var(--ls-nav);
  color: var(--color-text-offwhite);
  padding-block: var(--space-xxs);
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.nav__link:hover {
  color: var(--color-gold);
}

.nav__link[aria-current="page"] {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

.nav__cta {
  align-self: flex-start;
}

@media (min-width: 1024px) {
  .nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
    background-color: transparent;
    padding: 0;
    max-height: none;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
  }

  .nav__link {
    font-size: var(--fs-nav);
  }

  .nav__cta {
    align-self: center;
  }
}

/* --------------------------------------------------------------------------
   Mobile Menu Toggle (hamburger / close icon swap)
   -------------------------------------------------------------------------- */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;  /* 44px minimum touch target, per specifications/ACCESSIBILITY_SPECIFICATION.md §7 */
  height: 2.75rem;
  color: var(--color-text-offwhite);
  flex: 0 0 auto;
}

.menu-toggle__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.menu-toggle__icon--close {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close {
  display: block;
}

@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   CTA Button (design/UI_COMPONENTS.md §1 Primary Button)
   Reusable across the site — not header-specific, but introduced now
   because the header's "Demander un devis" CTA is the first consumer.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; /* was inline-block — widened in Milestone 15 so a
    .btn can optionally contain an icon (Contact's Call/WhatsApp buttons)
    alongside its text; a single text-only child renders identically to
    the previous inline-block, so this doesn't affect any existing button */
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-button-mobile);
  letter-spacing: var(--ls-button);
  line-height: 1;
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid transparent; /* reserved so --btn--secondary's visible
    border doesn't change the box size relative to --btn--primary */
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.btn svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .btn {
    font-size: var(--fs-button);
  }
}

.btn--primary {
  background-color: var(--color-gold);
  color: var(--color-navy-deep);
}

.btn--primary:hover {
  background-color: var(--color-gold-deep);
}

.btn--secondary {
  background-color: transparent;
  border-color: var(--color-text-offwhite);
  color: var(--color-text-offwhite);
}

.btn--secondary:hover {
  background-color: rgba(242, 243, 245, 0.1);
}

/* Light-background variant (design/UI_COMPONENTS.md §1: "border/text in
   Watt Navy on light backgrounds, Off-White on dark ones" — only the dark
   variant existed before this milestone, since the Hero was the only
   consumer so far. The Contact section's "Appeler" button is the first
   secondary button on a light background: plain --btn--secondary's
   Off-White text was measured near-invisible there. */
.btn--secondary-on-light {
  border-color: var(--color-navy);
  color: var(--color-navy);
}

@media (hover: hover) and (pointer: fine) {
  .btn--secondary-on-light:hover {
    background-color: rgba(11, 26, 51, 0.06);
  }
}

/* --------------------------------------------------------------------------
   Hero (specifications/HOME_PAGE_SPECIFICATION.md §1)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--color-navy-deep); /* fallback beneath the gradient */
}

/* Milestone 23: real hero poster (assets/images/hero/hero-poster.webp)
   replaces the earlier placeholder gradient. .hero__overlay (below) still
   guarantees text contrast over it. Oversized (110% height, -5% top) so
   the parallax translate in hero-parallax.js never reveals an edge gap
   underneath. background-color is kept as a fallback while the image
   loads or if it ever fails to. */
.hero__media {
  position: absolute;
  top: -5%;
  left: 0;
  right: 0;
  height: 110%;
  background-color: var(--color-navy-deep);
}

.hero__media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 19, 31, 0.35) 0%, rgba(8, 19, 31, 0.65) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-block: var(--space-3xl);
}

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h6-mobile);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
  animation: hero-fade-up var(--duration-slow) var(--ease-out) both;
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h1-mobile);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--color-text-offwhite);
  margin-bottom: var(--space-md);
  animation: hero-fade-up var(--duration-slow) var(--ease-out) 80ms both;
}

.hero__text {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg-mobile);
  line-height: 1.6;
  color: var(--color-text-offwhite);
  max-width: 42rem;
  margin-bottom: var(--space-lg);
  animation: hero-fade-up var(--duration-slow) var(--ease-out) 160ms both;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  animation: hero-fade-up var(--duration-slow) var(--ease-out) 240ms both;
}

@media (min-width: 600px) {
  .hero__actions {
    flex-direction: row;
    align-items: center;
  }
}

@media (min-width: 768px) {
  .hero__eyebrow {
    font-size: var(--fs-h6);
  }

  .hero__title {
    font-size: var(--fs-h1);
  }

  .hero__text {
    font-size: var(--fs-body-lg);
  }
}

@keyframes hero-scroll-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

.hero__scroll-indicator {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: var(--color-text-offwhite);
  animation: hero-scroll-pulse 2s var(--ease-in-out) infinite;
}

/* --------------------------------------------------------------------------
   Services (specifications/HOME_PAGE_SPECIFICATION.md §3)
   -------------------------------------------------------------------------- */
.services {
  background-color: var(--color-bg-light);
  padding-block: var(--space-2xl);
}

@media (min-width: 1024px) {
  .services {
    padding-block: var(--space-3xl);
  }
}

.services__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h6-mobile);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  /* Watt Navy (not Gold) on this light section background: Gold measures
     ~2.7:1 and even Gold-Deep only ~4:1 on Pearl White, both failing WCAG
     AA at this text size (design/COLOR_PALETTE.md §4). Navy is explicitly
     documented there for "primary text on light backgrounds where emphasis
     is needed" — the Hero's eyebrow keeps plain Gold since it sits on the
     dark navy background instead, where the ratio is a safe ~6:1. */
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.services__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2-mobile);
  line-height: 1.15;
  color: var(--color-text-ink);
  max-width: 32ch;
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .services__eyebrow {
    font-size: var(--fs-h6);
  }

  .services__title {
    font-size: var(--fs-h2);
  }
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Service Card (design/UI_COMPONENTS.md §2 Service Card) ---- */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-light-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

@media (min-width: 1024px) {
  .service-card {
    padding: var(--space-lg);
  }
}

.service-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-navy);
  margin-bottom: var(--space-md);
  transition: color var(--duration-base) var(--ease-out);
}

.service-card__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h5-mobile);
  color: var(--color-text-ink);
  margin-bottom: var(--space-xs);
  transition: color var(--duration-base) var(--ease-out);
}

@media (min-width: 768px) {
  .service-card__title {
    font-size: var(--fs-h5);
  }
}

.service-card__description {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--color-text-graphite);
  margin-bottom: var(--space-md);
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  color: var(--color-navy);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  margin-top: auto;
  align-self: flex-start;
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}

.service-card__link svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--duration-fast) var(--ease-out);
}

/* Hover effects gated to devices with a real pointer (mouse/trackpad):
   avoids a "stuck hover" state on touch after a tap. */
@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }

  /* Underline reveal (not a color change) for the link — safe at any text
     size/weight, unlike the Gold-Deep accent below. */
  .service-card:hover .service-card__link {
    text-decoration-color: currentColor;
  }

  .service-card:hover .service-card__link svg {
    transform: translateX(2px);
  }
}

/* The Gold-Deep hover accent on the icon/title is additionally gated to
   >=768px: below that, the title renders at 17px (--fs-h5-mobile), too
   small/not-bold-enough to qualify as WCAG "large text", and Gold-Deep on
   the card's Fog background falls just under 4.5:1 at that size. At
   >=768px the title is 20px bold (--fs-h5), which clears the 3:1 "large
   text" threshold comfortably (design/COLOR_PALETTE.md §4). The link text
   never grows past 14px, so it always uses the underline treatment above
   instead of a color change. Below 768px, hover still lifts the card
   (rule above) — the icon/title just keep their default colors. */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .service-card:hover .service-card__icon,
  .service-card:hover .service-card__title {
    color: var(--color-gold-deep);
  }
}

/* Whole card is the only clickable target: the visible link is stretched
   over the entire card via ::after, so there is a single real <a> per card
   (avoids nesting interactive elements) while the full card area responds
   to clicks/taps, per design/UI_COMPONENTS.md §8. */
.service-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Progressive enhancement: in browsers supporting :has(), show the focus
   ring around the whole card (clearer for keyboard users, since the whole
   card is the actual target) instead of just the small link text. Falls
   back to the global :focus-visible ring on the link itself otherwise. */
@supports selector(:has(a)) {
  .service-card__link:focus-visible {
    outline: none;
  }

  .service-card:has(.service-card__link:focus-visible) {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
  }
}

/* --------------------------------------------------------------------------
   Why Choose Us (specifications/HOME_PAGE_SPECIFICATION.md §4)
   Deliberately distinct from the Service Card treatment above: section
   background/card background are reversed (Fog section / Pearl White
   cards, vs. Services' Pearl White section / Fog cards), icons sit in a
   solid circular badge instead of plain, text is centered instead of
   left-aligned, and cards carry a resting shadow instead of none.
   -------------------------------------------------------------------------- */
.why-us {
  background-color: var(--color-bg-light-alt);
  padding-block: var(--space-2xl);
}

@media (min-width: 1024px) {
  .why-us {
    padding-block: var(--space-3xl);
  }
}

.why-us__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h6-mobile);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  /* Navy, not Gold: same borderline-contrast reasoning as .services__eyebrow
     (design/COLOR_PALETTE.md §4) — this section's Fog background is just as
     light as Services' Pearl White. */
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.why-us__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2-mobile);
  line-height: 1.15;
  color: var(--color-text-ink);
  max-width: 32ch;
  margin-bottom: var(--space-md);
}

.why-us__intro {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg-mobile);
  line-height: 1.6;
  color: var(--color-text-graphite);
  max-width: 60ch;
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .why-us__eyebrow {
    font-size: var(--fs-h6);
  }

  .why-us__title {
    font-size: var(--fs-h2);
  }

  .why-us__intro {
    font-size: var(--fs-body-lg);
  }
}

.why-us__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .why-us__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .why-us__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Why-Us Card ---- */
/* Milestone 10 fix (flagged during the Milestone 9 review, applied now as
   an indispensable correction): the reveal transition and the hover
   transition used to be declared in two separate rules of different
   specificity (.has-scroll-reveal .why-us__card vs. the plain .why-us__card
   inside the hover media query). Because both set the same `transition`
   shorthand, the higher-specificity rule silently replaced the lower one's
   value instead of merging with it — once `.has-scroll-reveal` was active
   (the normal case whenever JS runs), `transform`/`box-shadow` dropped out
   of the transition list entirely and the hover lift snapped instantly
   instead of easing in. Fixed by declaring one single, unified `transition`
   on the base rule so nothing can override it — the reveal's stagger delay
   is applied only to opacity/translate via the --reveal-delay custom
   property, so it never leaks into the hover transition either. */
.why-us__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--duration-slow) var(--ease-out) var(--reveal-delay, 0s),
    translate var(--duration-slow) var(--ease-out) var(--reveal-delay, 0s),
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

/* Progressive enhancement: pre-reveal state only exists once JS confirms
   it will actually run the reveal (main.js -> scroll-reveal.js adds this
   class to <html>). Without it (JS disabled/failed), cards stay fully
   visible via the default rule above — see scroll-reveal.js header comment
   and specifications/ACCESSIBILITY_SPECIFICATION.md §6. */
.has-scroll-reveal .why-us__card {
  opacity: 0;
  translate: 0 16px;
}

.has-scroll-reveal .why-us__card.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* Staggered reveal, per design/ANIMATIONS.md §4 (~60ms per item). Only
   opacity/translate read --reveal-delay (see the base rule above), so the
   hover transition below is never delayed by a card's position in the grid. */
.why-us__card:nth-child(2) {
  --reveal-delay: 60ms;
}
.why-us__card:nth-child(3) {
  --reveal-delay: 120ms;
}
.why-us__card:nth-child(4) {
  --reveal-delay: 180ms;
}
.why-us__card:nth-child(5) {
  --reveal-delay: 240ms;
}
.why-us__card:nth-child(6) {
  --reveal-delay: 300ms;
}

@media (hover: hover) and (pointer: fine) {
  .why-us__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
}

.why-us__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--color-navy);
  color: var(--color-text-offwhite);
  margin-bottom: var(--space-md);
}

.why-us__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.why-us__card-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h5-mobile);
  color: var(--color-text-ink);
  margin-bottom: var(--space-xs);
}

@media (min-width: 768px) {
  .why-us__card-title {
    font-size: var(--fs-h5);
  }
}

.why-us__card-description {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--color-text-graphite);
}

/* --------------------------------------------------------------------------
   Key Numbers (specifications/HOME_PAGE_SPECIFICATION.md §5)
   A third, deliberately distinct treatment: dark Navy section (vs. the two
   light sections before it), no card fill/border at all — just a thin gold
   top rule, an outlined (not solid) circular icon, and the number itself
   as the dominant visual element in Gold. Content is rendered entirely by
   assets/js/modules/counters.js from data/stats.json.
   -------------------------------------------------------------------------- */
.key-numbers {
  background-color: var(--color-navy);
  padding-block: var(--space-2xl);
}

@media (min-width: 1024px) {
  .key-numbers {
    padding-block: var(--space-3xl);
  }
}

.key-numbers__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h6-mobile);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.key-numbers__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2-mobile);
  line-height: 1.15;
  color: var(--color-text-offwhite);
  max-width: 32ch;
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .key-numbers__eyebrow {
    font-size: var(--fs-h6);
  }

  .key-numbers__title {
    font-size: var(--fs-h2);
  }
}

.key-numbers__noscript {
  font-family: var(--font-body);
  color: var(--color-text-cool-gray);
}

.key-numbers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .key-numbers__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .key-numbers__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Stat ---- */
.key-numbers__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: var(--space-lg);
  border-top: 2px solid var(--color-gold);
}

.key-numbers__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid var(--color-gold);
  border-radius: 50%;
  color: var(--color-gold);
  margin-bottom: var(--space-md);
}

.key-numbers__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.key-numbers__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h1-mobile);
  color: var(--color-gold);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

@media (min-width: 768px) {
  .key-numbers__value {
    font-size: var(--fs-h2);
  }
}

.key-numbers__subvalue {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5-mobile);
  /* Gold (not Gold-Deep): at 17-20px semibold this text doesn't qualify as
     WCAG "large text" (needs 700-weight bold or 24px), so it needs the full
     4.5:1 ratio — Gold-Deep on Navy measures ~4.07:1 here (fails), Gold
     measures ~6.02:1 (passes). design/COLOR_PALETTE.md §4. */
  color: var(--color-gold);
}

.key-numbers__stat-title {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--color-text-offwhite);
  margin-bottom: var(--space-xxs);
}

.key-numbers__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-text-cool-gray);
}

/* --------------------------------------------------------------------------
   K9 (specifications/HOME_PAGE_SPECIFICATION.md §7)
   A fourth, structurally distinct treatment: not a card grid at all, but a
   two-column image + content layout with generous whitespace. Light section
   background (alternating back from Key Numbers' dark Navy), image column
   framed with rounded corners and a soft shadow for a premium feel.
   -------------------------------------------------------------------------- */
.k9 {
  background-color: var(--color-bg-light);
  padding-block: var(--space-2xl);
}

@media (min-width: 1024px) {
  .k9 {
    padding-block: var(--space-3xl);
  }
}

.k9__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 1024px) {
  .k9__inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-2xl);
  }

  /* Image on the right on desktop, per the brief's "colonne droite" —
     content is first in the DOM (so it reads first for keyboard/AT users
     and ranks first for the section's textual content), reordered
     visually only at the breakpoint where two columns actually exist. */
  .k9__media {
    order: 2;
  }
}

.k9__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h6-mobile);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.k9__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2-mobile);
  line-height: 1.15;
  color: var(--color-text-ink);
  margin-bottom: var(--space-md);
}

.k9__text {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg-mobile);
  line-height: 1.6;
  color: var(--color-text-graphite);
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .k9__eyebrow {
    font-size: var(--fs-h6);
  }

  .k9__title {
    font-size: var(--fs-h2);
  }

  .k9__text {
    font-size: var(--fs-body-lg);
  }
}

.k9__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.k9__list-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text-ink);
}

.k9__list-icon {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-gold-deep);
}

.k9__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.k9__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Gallery (specifications/HOME_PAGE_SPECIFICATION.md §8)
   A 5th distinct treatment: dark Navy Deep section — deliberately, since a
   photo grid reads as more premium against a dark backdrop, and every
   other section so far has alternated between light variants and one
   minimal dark band (Key Numbers). Cards have no border, just a subtly
   lighter Navy Light surface for the caption beneath each photo.
   -------------------------------------------------------------------------- */
.gallery {
  background-color: var(--color-navy-deep);
  padding-block: var(--space-2xl);
}

@media (min-width: 1024px) {
  .gallery {
    padding-block: var(--space-3xl);
  }
}

.gallery__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h6-mobile);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.gallery__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2-mobile);
  line-height: 1.15;
  color: var(--color-text-offwhite);
  max-width: 32ch;
  margin-bottom: var(--space-md);
}

.gallery__intro {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg-mobile);
  line-height: 1.6;
  color: var(--color-text-cool-gray);
  max-width: 60ch;
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .gallery__eyebrow {
    font-size: var(--fs-h6);
  }

  .gallery__title {
    font-size: var(--fs-h2);
  }

  .gallery__intro {
    font-size: var(--fs-body-lg);
  }
}

.gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Gallery Item ---- */
.gallery__item {
  display: flex;
  flex-direction: column;
  background-color: var(--color-navy-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--duration-slow) var(--ease-out) var(--reveal-delay, 0s),
    translate var(--duration-slow) var(--ease-out) var(--reveal-delay, 0s);
}

/* Progressive enhancement: see scroll-reveal.js / .why-us__card for the
   full rationale — without has-scroll-reveal (JS disabled/failed), items
   stay fully visible via the rule above. */
.has-scroll-reveal .gallery__item {
  opacity: 0;
  translate: 0 16px;
}

.has-scroll-reveal .gallery__item.is-visible {
  opacity: 1;
  translate: 0 0;
}

.gallery__grid .gallery__item:nth-child(2) {
  --reveal-delay: 60ms;
}
.gallery__grid .gallery__item:nth-child(3) {
  --reveal-delay: 120ms;
}
.gallery__grid .gallery__item:nth-child(4) {
  --reveal-delay: 180ms;
}
.gallery__grid .gallery__item:nth-child(5) {
  --reveal-delay: 240ms;
}
.gallery__grid .gallery__item:nth-child(6) {
  --reveal-delay: 300ms;
}
.gallery__grid .gallery__item:nth-child(7) {
  --reveal-delay: 360ms;
}
.gallery__grid .gallery__item:nth-child(8) {
  --reveal-delay: 420ms;
}
.gallery__grid .gallery__item:nth-child(9) {
  --reveal-delay: 480ms;
}

.gallery__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-out);
}

.gallery__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(8, 19, 31, 0);
  transition: background-color var(--duration-base) var(--ease-out);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .gallery__item:hover .gallery__image {
    transform: scale(1.05);
  }

  .gallery__item:hover .gallery__media::after {
    background-color: rgba(8, 19, 31, 0.25);
  }
}

.gallery__caption {
  padding: var(--space-md);
}

.gallery__item-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h5-mobile);
  color: var(--color-text-offwhite);
  margin-bottom: var(--space-xs);
}

@media (min-width: 768px) {
  .gallery__item-title {
    font-size: var(--fs-h5);
  }
}

.gallery__item-description {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--color-text-cool-gray);
}

/* --------------------------------------------------------------------------
   Testimonials (specifications/HOME_PAGE_SPECIFICATION.md §10;
   design/UI_COMPONENTS.md §2 Testimonial Card)
   Light section again (rhythm alternation back from the Gallery's dark
   Navy Deep) — quiet, editorial cards: gold quotation mark accent, neutral
   Fog surface, avatar + name/company as attribution.
   -------------------------------------------------------------------------- */
.testimonials {
  background-color: var(--color-bg-light);
  padding-block: var(--space-2xl);
}

@media (min-width: 1024px) {
  .testimonials {
    padding-block: var(--space-3xl);
  }
}

.testimonials__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h6-mobile);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.testimonials__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2-mobile);
  line-height: 1.15;
  color: var(--color-text-ink);
  max-width: 32ch;
  margin-bottom: var(--space-md);
}

.testimonials__intro {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg-mobile);
  line-height: 1.6;
  color: var(--color-text-graphite);
  max-width: 60ch;
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .testimonials__eyebrow {
    font-size: var(--fs-h6);
  }

  .testimonials__title {
    font-size: var(--fs-h2);
  }

  .testimonials__intro {
    font-size: var(--fs-body-lg);
  }
}

.testimonials__noscript {
  font-family: var(--font-body);
  color: var(--color-text-graphite);
}

.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Testimonial Card ---- */
.testimonial-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-light-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--duration-slow) var(--ease-out) var(--reveal-delay, 0s),
    translate var(--duration-slow) var(--ease-out) var(--reveal-delay, 0s);
}

/* Progressive enhancement: see scroll-reveal.js / .why-us__card for the
   full rationale — without has-scroll-reveal (JS disabled/failed, or the
   fetch of data/testimonials.json failing), cards stay fully visible via
   the rule above (when they exist at all — see testimonials.js). */
.has-scroll-reveal .testimonial-card {
  opacity: 0;
  translate: 0 16px;
}

.has-scroll-reveal .testimonial-card.is-visible {
  opacity: 1;
  translate: 0 0;
}

.testimonials__grid .testimonial-card:nth-child(2) {
  --reveal-delay: 60ms;
}
.testimonials__grid .testimonial-card:nth-child(3) {
  --reveal-delay: 120ms;
}

.testimonial-card__quote {
  margin: 0;
}

.testimonial-card__quote-mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 3rem;
  line-height: 1;
  color: var(--color-gold);
  margin-bottom: var(--space-xs);
}

.testimonial-card__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text-ink);
  margin-bottom: var(--space-md);
}

.testimonial-card__rating {
  display: flex;
  gap: var(--space-xxs);
  margin-bottom: var(--space-md);
}

.testimonial-card__star {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-border-light);
}

.testimonial-card__star--filled {
  /* Gold-Deep (not Gold): plain Gold on this card's Fog background measures
     ~2.5:1, failing even the 3:1 WCAG non-text/graphical-object threshold —
     the same issue already found and fixed for text in Milestones 8 and 10
     (design/COLOR_PALETTE.md §4). Gold-Deep measures ~4:1 here, which passes. */
  color: var(--color-gold-deep);
}

.testimonial-card__attribution {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
}

.testimonial-card__avatar {
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.testimonial-card__name {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  color: var(--color-text-ink);
}

.testimonial-card__company {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-text-graphite);
}

/* --------------------------------------------------------------------------
   FAQ (specifications/HOME_PAGE_SPECIFICATION.md §11)
   Structurally distinct from every prior section: a vertical list of
   full-width rows (an accordion), not a card grid at all. Fog section
   background (alternating from Testimonials' Pearl White), each row a
   lighter Pearl White surface with a thin border.
   -------------------------------------------------------------------------- */
.faq {
  background-color: var(--color-bg-light-alt);
  padding-block: var(--space-2xl);
}

@media (min-width: 1024px) {
  .faq {
    padding-block: var(--space-3xl);
  }
}

.faq__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h6-mobile);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.faq__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2-mobile);
  line-height: 1.15;
  color: var(--color-text-ink);
  max-width: 32ch;
  margin-bottom: var(--space-md);
}

.faq__intro {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg-mobile);
  line-height: 1.6;
  color: var(--color-text-graphite);
  max-width: 60ch;
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .faq__eyebrow {
    font-size: var(--fs-h6);
  }

  .faq__title {
    font-size: var(--fs-h2);
  }

  .faq__intro {
    font-size: var(--fs-body-lg);
  }
}

.faq__noscript {
  font-family: var(--font-body);
  color: var(--color-text-graphite);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 48rem;
}

/* ---- FAQ Item ---- */
.faq-item {
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.faq-item__heading {
  margin: 0;
}

.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md);
  text-align: left;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--color-text-ink);
  transition: color var(--duration-fast) var(--ease-out);
}

@media (min-width: 768px) {
  .faq-item__trigger {
    padding: var(--space-lg);
  }
}

@media (hover: hover) and (pointer: fine) {
  .faq-item__trigger:hover {
    color: var(--color-navy);
  }
}

.faq-item__question {
  flex: 1 1 auto;
}

/* ---- "+" / "−" icon: a plus made of two bars; the vertical bar scales to
   zero when open, leaving only the horizontal bar (a minus sign). ---- */
.faq-item__icon {
  position: relative;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-gold-deep);
}

.faq-item__icon-line {
  position: absolute;
  background-color: currentColor;
  border-radius: 1px;
  transition: transform var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out);
}

.faq-item__icon-line--h {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.faq-item__icon-line--v {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%) scaleY(1);
}

.faq-item__trigger[aria-expanded="true"] .faq-item__icon-line--v {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

/* ---- Answer panel: grid-template-rows 0fr -> 1fr animates height without
   JS ever measuring scrollHeight. prefers-reduced-motion is already
   handled globally (utilities.css forces near-zero transition-duration),
   so no extra rule is needed here for that. ---- */
.faq-item__answer-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-in-out);
}

.faq-item__answer-wrapper.is-open {
  grid-template-rows: 1fr;
}

.faq-item__answer-inner {
  overflow: hidden;
}

.faq-item__answer {
  padding: 0 var(--space-md) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text-graphite);
}

@media (min-width: 768px) {
  .faq-item__answer {
    padding: 0 var(--space-lg) var(--space-lg);
  }
}

/* --------------------------------------------------------------------------
   Contact (specifications/HOME_PAGE_SPECIFICATION.md §12)
   Two-column layout again (structurally distinct from every card-grid/list
   section above it) — contact details + actions on one side, a real form
   on the other. Light Pearl White background, closing the page on a calm,
   inviting note rather than the FAQ's neutral Fog.
   -------------------------------------------------------------------------- */
.contact {
  background-color: var(--color-bg-light);
  padding-block: var(--space-2xl);
}

@media (min-width: 1024px) {
  .contact {
    padding-block: var(--space-3xl);
  }
}

.contact__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .contact__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .contact__inner {
    gap: var(--space-2xl);
  }
}

.contact__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h6-mobile);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.contact__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2-mobile);
  line-height: 1.15;
  color: var(--color-text-ink);
  margin-bottom: var(--space-md);
}

.contact__text {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg-mobile);
  line-height: 1.6;
  color: var(--color-text-graphite);
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .contact__eyebrow {
    font-size: var(--fs-h6);
  }

  .contact__title {
    font-size: var(--fs-h2);
  }

  .contact__text {
    font-size: var(--fs-body-lg);
  }
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.contact__detail {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text-ink);
}

.contact__detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--color-bg-light-alt);
  color: var(--color-navy);
}

.contact__detail-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.contact__detail-link {
  color: var(--color-navy);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .contact__detail-link:hover {
    text-decoration-color: currentColor;
  }
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.contact__social {
  display: flex;
  gap: var(--space-sm);
}

.contact__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--color-border-light);
  color: var(--color-navy);
  transition: background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.contact__social-link svg {
  width: 1.125rem;
  height: 1.125rem;
}

@media (hover: hover) and (pointer: fine) {
  .contact__social-link:hover {
    background-color: var(--color-navy);
    color: var(--color-text-offwhite);
  }
}

/* ---- Contact Form (design/UI_COMPONENTS.md §3 Forms) ---- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background-color: var(--color-bg-light-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.contact-form__label {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  color: var(--color-text-ink);
}

.contact-form__input,
.contact-form__textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text-ink);
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 7rem;
}

.contact-form__input[aria-invalid="true"],
.contact-form__textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}

.contact-form__error {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-error);
  min-height: 1.2em;
}

.contact-form__submit {
  align-self: flex-start;
  margin-top: var(--space-xs);
}

.contact-form__feedback {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  min-height: 1.2em;
}

.contact-form__feedback--success {
  /* --color-success (#2E7D32) on this Fog background measures ~4.42:1,
     just under the 4.5:1 needed for text this size — a darker shade of
     the same green is used here instead (design/COLOR_PALETTE.md §4). */
  color: #256b29;
}

.contact-form__feedback--error {
  color: var(--color-error);
}

/* ---- Contact Map (Milestone 17) — same radius/shadow language as
   .k9__media and .contact-form (var(--radius-md)), but a lighter
   var(--shadow-sm) since the map sits directly on the section's own
   background rather than acting as a raised card. Widens progressively
   (a taller ratio on mobile, a wide "banner" ratio on desktop) instead of
   a fixed pixel height, per the responsive-first rule in
   architecture/CSS_ARCHITECTURE.md. ---- */
.contact__map-wrapper {
  margin-top: var(--space-xl);
}

@media (min-width: 1024px) {
  .contact__map-wrapper {
    margin-top: var(--space-2xl);
  }
}

.contact__map {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.contact__map-noscript {
  font-family: var(--font-body);
  color: var(--color-text-graphite);
}

.contact__map-frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 0;
}

@media (min-width: 768px) {
  .contact__map-frame {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1024px) {
  .contact__map-frame {
    aspect-ratio: 21 / 9;
  }
}

/* --------------------------------------------------------------------------
   Footer (specifications/HOME_PAGE_SPECIFICATION.md §14)
   Watt Navy Deep background, Off-White text, Gold accents — reuses the
   .contact__detail / .contact__detail-icon / .contact__detail-link /
   .contact__social-link markup and classes from the Contact section
   (Milestone 15) for the coordinates column, with contextual overrides
   below since those were designed for a light background.
   -------------------------------------------------------------------------- */
.footer {
  background-color: var(--color-navy-deep);
  color: var(--color-text-offwhite);
  padding-block: var(--space-2xl);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
  }
}

.footer__col-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h6-mobile);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-md);
}

.footer__logo {
  display: inline-flex;
  margin-bottom: var(--space-md);
}

.footer__logo-img {
  display: block;
  height: 2.75rem;
  width: auto;
}

.footer__description {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--color-text-cool-gray);
  margin-bottom: var(--space-sm);
}

.footer__tagline {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  color: var(--color-text-offwhite);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer__link {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-text-cool-gray);
  transition: color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .footer__link:hover {
    color: var(--color-gold);
  }
}

.footer__address {
  font-style: normal; /* reset the browser default italic on <address> */
}

.footer__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ---- Contextual overrides: same .contact__detail* / .contact__social-link
   classes as the Contact section, adapted for this dark background. ---- */
.footer .contact__detail {
  font-size: var(--fs-body-sm);
  color: var(--color-text-cool-gray);
}

.footer .contact__detail-icon {
  width: 1.75rem;
  height: 1.75rem;
  background-color: rgba(242, 243, 245, 0.08);
  color: var(--color-gold);
}

.footer .contact__detail-icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

.footer .contact__detail-link {
  color: var(--color-text-offwhite);
}

.footer__social {
  display: flex;
  gap: var(--space-sm);
}

.footer .contact__social-link {
  border-color: var(--color-border-dark);
  color: var(--color-text-offwhite);
}

@media (hover: hover) and (pointer: fine) {
  .footer .contact__social-link:hover {
    background-color: var(--color-gold);
    color: var(--color-navy-deep);
  }
}

.footer__bottom {
  border-top: 1px solid var(--color-border-dark);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
}

.footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

@media (min-width: 768px) {
  .footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer__copyright {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-text-cool-gray);
}

.footer__legal-links {
  display: flex;
  gap: var(--space-md);
}

.footer__legal-link {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-text-cool-gray);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .footer__legal-link:hover {
    color: var(--color-gold);
    text-decoration-color: currentColor;
  }
}

/* --------------------------------------------------------------------------
   Legal Page (Milestone 21 — pages/legal-notice.html, pages/privacy-policy.html)
   A single, deliberately plain component shared by both pages, per
   architecture/PAGE_ARCHITECTURE.md §6-7 ("intentionally plain — no
   marketing content"): no cards, no imagery, no scroll-reveal, just a page
   title and a series of read-friendly text sections. The NAP contact block
   inside each page reuses .contact__details/.contact__detail unchanged
   (see assets/js/modules/legal-page.js) rather than duplicating that
   styling here.
   -------------------------------------------------------------------------- */
.legal {
  background-color: var(--color-bg-light);
  padding-block: var(--space-2xl);
}

@media (min-width: 1024px) {
  .legal {
    padding-block: var(--space-3xl);
  }
}

.legal__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h6-mobile);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.legal__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h1-mobile);
  line-height: 1.15;
  color: var(--color-text-ink);
  margin-bottom: var(--space-sm);
}

.legal__updated {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-text-graphite);
  margin-bottom: var(--space-lg);
}

.legal__intro {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg-mobile);
  line-height: 1.6;
  color: var(--color-text-graphite);
  max-width: 65ch;
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .legal__title {
    font-size: var(--fs-h1);
  }

  .legal__intro {
    font-size: var(--fs-body-lg);
  }
}

.legal__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 70ch;
}

.legal__section-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4-mobile);
  color: var(--color-text-ink);
  margin-bottom: var(--space-sm);
}

.legal__section-text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-ink);
  margin-bottom: var(--space-sm);
}

.legal__section-text:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .legal__section-title {
    font-size: var(--fs-h4);
  }
}