/* ==========================================================================
   RIVA — SITE STYLES
   Source of truth: Riva Design System.html (v2)
   Tokens below were extracted directly from that file. If the Design
   System changes, update the custom properties in :root first — almost
   everything else on the page inherits from them.

   ACCESSIBILITY NOTE (read before changing colors):
   Two colors from the Design System fail WCAG AA as TEXT on light
   backgrounds: gold (#FAAD00) measures 1.53:1 on cream, muted tan
   (#9A948A) measures 2.42:1 on cream. Both need 4.5:1 for body text.
   Per build instructions, accessibility overrides the Design System
   where they conflict. RULE: gold and muted-tan are decorative only
   (dividers, icon fills, backgrounds) on light surfaces. They're safe
   as text ONLY on dark surfaces (gold-on-black = 10.34:1, fine).
   Don't reintroduce them as light-surface text without rechecking
   contrast — use a tool like WebAIM's contrast checker.
   ========================================================================== */

:root {
  /* --- Color tokens (from Design System v2) --- */
  --color-cream: #EDE6D8;        /* primary background */
  --color-cream-soft: #ece9e3;   /* secondary background / card fill */
  --color-tan-line: #ddd3c2;     /* hairline borders on cream */
  --color-white: #FFFFFF;
  --color-ink: #494C51;          /* primary body text — 6.94:1 on cream, passes AA */
  --color-ink-muted: #9A948A;    /* DECORATIVE ONLY on light bg — fails AA as text, see note above */
  --color-black: #0B0B0C;        /* dark section background */
  --color-black-soft: #232327;   /* dark section secondary background */
  --color-cyan: #00C2D4;         /* primary accent — buttons, links, focus states */
  --color-cyan-deep: #008797;    /* cyan accent on white surfaces (better contrast for small text/underlines) */
  --color-gold: #FAAD00;         /* secondary accent — DECORATIVE ONLY on light bg */
  --color-true-black: #000000;   /* WORDMARK ONLY — Design System: "the only use of black." Don't use elsewhere. */

  /* --- Type --- */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Archivo', system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;

  /* --- Layout --- */
  --container-max: 1080px;
  --container-padding: 24px;
  --radius: 2px; /* Design System uses a near-flat 2px radius everywhere — sharp, not rounded */

  /* --- Spacing scale (derived from Design System's 64px section gutters) --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-cream);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-cyan-deep);
}

::selection {
  background: var(--color-cyan);
  color: var(--color-black);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--color-ink);
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   ACCESSIBILITY UTILITIES
   ========================================================================== */

.visually-hidden {
  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 {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-cyan);
  color: var(--color-black);
  padding: 12px 20px;
  font-weight: 700;
  z-index: 1000;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
}

:focus-visible {
  outline: 3px solid var(--color-cyan);
  outline-offset: 2px;
}

/* ==========================================================================
   LAYOUT — CONTAINER (reuse this on every future page)
   ========================================================================== */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.section {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  border-top: 1px solid var(--color-tan-line);
}

.section--dark {
  background: var(--color-black);
  color: var(--color-cream);
  border-top-color: var(--color-black-soft);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark p {
  color: var(--color-cream);
}

.section--alt {
  background: var(--color-white);
  border-top-color: var(--color-cream-soft);
}

.why-riva {
  border-top: 1px solid var(--color-tan-line);
}

.why-riva.section--dark {
  border-top-color: var(--color-black-soft);
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-cyan-deep);
  margin-bottom: var(--space-2);
}

/* Numbered/dash eyebrow mark (Design System pattern: "02 — LABEL").
   Gold is reserved for dark grounds only — on light sections (Trust, FAQ)
   the number stays cyan-deep so it still passes AA as text. See the
   accessibility note at the top of this file. */
.section-eyebrow__num,
.section-eyebrow__dash {
  color: var(--color-cyan-deep);
}

.section--dark .section-eyebrow {
  color: var(--color-cyan);
}

.section--dark .section-eyebrow__num,
.section--dark .section-eyebrow__dash {
  color: var(--color-gold);
}

.section-heading {
  font-size: clamp(32px, 5.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
  max-width: 18ch;
}

.section-intro {
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.6;
  color: var(--color-ink);
  max-width: 680px;
  margin-bottom: var(--space-5);
}

.section--dark .section-intro {
  color: var(--color-cream);
}

/* ==========================================================================
   BUTTONS (component — reuse across all future pages)
   Sizes/colors match Design System v2's button spec exactly.
   ========================================================================== */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-size: 15px;
  font-family: var(--font-body);
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.12s ease, opacity 0.12s ease;
  white-space: nowrap;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Primary — solid cyan fill, black label (Design System: "works on any surface") */
.btn--primary {
  background: var(--color-cyan);
  color: var(--color-black);
}

/* Secondary — outlined, dark ink on light surfaces */
.btn--secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
  font-weight: 600;
  padding: 11px 20px;
}

/* Secondary on dark backgrounds needs the cyan outline instead of dark ink (contrast) */
.section--dark .btn--secondary {
  color: var(--color-cyan);
  border-color: var(--color-cyan);
}

.btn--block {
  width: 100%;
  justify-content: center;
}

@media (max-width: 480px) {
  .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   HEADER
   Logo only — CTAs and phone live in the hero and Final CTA sections.
   Default: solid sticky black bar (pages with no hero photo to sit on, e.g.
   privacy.html). On pages with a hero — body.has-hero, currently just the
   homepage — the header overlays transparently on the photo instead (Design
   System pattern: nav sits directly on the photo, not a solid block above
   it), and js/main.js adds .is-scrolled once the hero clears the viewport
   to switch it back to the same solid black bar. The logo is always white —
   the nav background is never light, so the wordmark's true-black variant
   isn't used in this header.
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-black);
  border-bottom: 1px solid var(--color-black-soft);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

body.has-hero .site-header {
  background: transparent;
  border-bottom-color: transparent;
}

body.has-hero .site-header.is-scrolled {
  background: var(--color-black);
  border-bottom-color: var(--color-black-soft);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.site-logo {
  font-family: var(--font-display);
  font-weight: 800; /* Extra Bold — Design System wordmark spec */
  font-size: 28px;
  letter-spacing: 0.01em;
  text-transform: uppercase; /* "Riva" in markup renders as "RIVA" */
  color: var(--color-white);
  text-decoration: none;
}

/* ==========================================================================
   HERO
   Photo: images/hero-electrician.jpg — see index.html hero comment.
   Scrim is horizontal (dark behind the text on the left, fading to the
   clear, undarkened photo on the right) per the Design System's own
   cover treatment (ds-chunk-00) — not a vertical bottom-heavy fade.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* 92vh left a band of empty dark space below the CTAs once the headline
     and column got tighter. Sizing closer to the content removes that dead
     space without re-fighting the photo's aspect ratio. */
  min-height: 68vh;
  background-color: var(--color-black);
  /* Three layers, front to back: (1) the horizontal scrim that darkens the
     left side where the type sits, (2) a uniform top-to-bottom scrim across
     the WHOLE photo — Design System cover treatment (ds-chunk-00) layers
     this second gradient independent of the text-side one, which is what
     visually pushes the photo back into the background rather than just
     dimming one side of it, (3) the photo itself. */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.10)),
    linear-gradient(90deg, rgba(11, 11, 12, 0.92) 0%, rgba(11, 11, 12, 0.82) 28%, rgba(11, 11, 12, 0.45) 52%, rgba(11, 11, 12, 0) 70%),
    linear-gradient(180deg, rgba(11, 11, 12, 0.55) 0%, rgba(11, 11, 12, 0.12) 26%, rgba(11, 11, 12, 0.12) 60%, rgba(11, 11, 12, 0.6) 100%),
    url("../images/hero-electrician.jpg");
  /* Plain `cover` leaves no horizontal slack to shift on wide screens, so the
     subject's face still lands near center. But the source photo is a short,
     wide panorama — zooming the width up ALSO scales the height up
     proportionally (background-size's "auto" preserves intrinsic aspect),
     which crops out the headroom above the cap and the shoulder/arm context
     that makes the Design System's framing read as composed rather than
     cropped-in. Keep the zoom minimal — just enough to clear plain cover —
     and accept a more modest rightward push in exchange for keeping that
     breathing room around the subject. */
  background-size: cover;
  background-position: 76% center;
  /* Without this, a hero taller than the zoomed image's scaled height (e.g.
     once a long headline pushes the section past min-height) tiles the
     photo instead of just showing solid background-color past the edge —
     that's the ghost strip that showed up at the top of the hero. */
  background-repeat: no-repeat;
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

/* Flush to the same left edge every other section's .container uses, but NOT
   auto-centered as its own box — Design System cover treatment (ds-chunk-00):
   typography sits in the negative space at the left of the photo, the
   subject stays dominant on the right. margin:0 auto here would pull the
   block toward the viewport's horizontal center instead, off the negative
   space and over the photo on wide screens. */
.hero__inner {
  max-width: 780px;
  padding-left: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
  padding-right: var(--container-padding);
}

.hero__eyebrow {
  color: var(--color-cyan);
  margin-bottom: var(--space-3);
}

.hero__eyebrow .section-eyebrow__num,
.hero__eyebrow .section-eyebrow__dash {
  color: var(--color-gold);
}

.hero h1 {
  font-size: clamp(28px, 4.4vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-cream);
  margin-bottom: var(--space-3);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}

/* Short gold underline directly under the headline — Design System mechanic
   (ds-chunk-00) that was missing entirely from the first build. */
.hero__rule {
  width: 80px;
  height: 4px;
  background: var(--color-gold);
  border: none;
  margin: 0 0 var(--space-3);
}

.hero__supporting {
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-cream);
  max-width: 480px;
  margin-bottom: var(--space-3);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero__cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.hero__cta-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Secondary button needs the cyan-outline treatment on this dark photo surface,
   same logic as .section--dark .btn--secondary below. */
.hero .btn--secondary {
  color: var(--color-cyan);
  border-color: var(--color-cyan);
}

@media (max-width: 960px) {
  .hero {
    min-height: 68vh;
    background-size: cover; /* the desktop 145% zoom exists only to create slack for the right-anchored crop; mobile uses its own centered crop below */
    background-position: center 30%;
    background-image:
      linear-gradient(90deg, rgba(11, 11, 12, 0.94) 0%, rgba(11, 11, 12, 0.88) 45%, rgba(11, 11, 12, 0.55) 75%, rgba(11, 11, 12, 0.25) 100%),
      url("../images/hero-electrician.jpg");
  }

  .hero__cta-group {
    width: 100%;
  }
}

/* ==========================================================================
   WHY RIVA
   Dark split-screen per Design System ds-chunk-08: text panel on a dark
   ground, full-bleed real photography on the right — not cropped into a
   card, edge-to-edge with the viewport. The text column's left edge lines
   up with every other section's container edge via the calc() below.
   ========================================================================== */

.why-riva__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 640px;
}

.why-riva__content {
  padding: var(--space-7) var(--space-5) var(--space-7)
    max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.why-riva__photo {
  position: relative;
  min-height: 360px;
}

.why-riva__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-riva__opener {
  font-size: 20px;
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: var(--space-6);
}

/* Narrower column here than other sections — stack the two checklists
   instead of running them side by side. */
.why-riva .two-col {
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

@media (max-width: 760px) {
  .two-col {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

@media (max-width: 900px) {
  .why-riva__grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .why-riva__content {
    padding: var(--space-6) var(--container-padding);
  }
  .why-riva__photo {
    min-height: 320px;
  }
}

.col-heading {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted-on-white, var(--color-ink));
  margin-bottom: var(--space-3);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--color-tan-line);
  font-size: 17px;
}

.check-list li:first-child {
  border-top: none;
}

.check-list svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--color-cyan-deep);
}

.section--dark .check-list li {
  border-top-color: var(--color-black-soft);
}

.section--dark .check-list svg {
  color: var(--color-cyan);
}

/* ==========================================================================
   ICON ROW — Design System pattern (ds-chunk-09 "Product Promise" / ds-chunk-21
   "AI"): a Phosphor icon + a short label, stacked with hairline dividers.
   Icons communicate a distinct idea per row, never a repeated decorative mark.
   ========================================================================== */

.icon-row {
  display: flex;
  flex-direction: column;
}

.icon-row li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--color-tan-line);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-ink);
}

.icon-row li:first-child {
  border-top: none;
}

.icon-row .ph {
  flex-shrink: 0;
  width: 24px;
  font-size: 21px;
  text-align: center;
  color: var(--color-cyan-deep);
}

.section--dark .icon-row li {
  border-top-color: var(--color-black-soft);
  color: var(--color-cream);
}

.section--dark .icon-row .ph {
  color: var(--color-cyan);
}

/* ==========================================================================
   ICON GRID — Design System pattern (ds-chunk-07 "Dependability"): a colored
   top rule, an icon, a short label, and a one-line description. Used for the
   Trust section's four dependability pillars.
   ========================================================================== */

.icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.icon-grid__item {
  border-top: 2px solid var(--color-cyan);
  padding-top: 16px;
}

.icon-grid__item .ph {
  font-size: 26px;
  color: var(--color-ink);
}

.section--dark .icon-grid__item .ph,
.section--alt .icon-grid__item .ph {
  color: var(--color-ink);
}

.icon-grid__label {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-ink);
  margin-top: 14px;
}

.icon-grid__desc {
  font-size: 14px;
  color: var(--color-ink);
  opacity: 0.65;
  margin-top: 4px;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .icon-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .icon-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   TECHNOLOGY
   ========================================================================== */

.tech-list {
  margin-bottom: var(--space-5);
}

.tech-closer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-cream);
}

/* ==========================================================================
   TRUST
   Dependability icon-grid (ds-chunk-07) + the comparison device below it.
   ========================================================================== */

.trust__lede {
  font-size: 20px;
  line-height: 1.65;
  max-width: 640px;
  margin-bottom: var(--space-5);
}

.trust__contrast {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-ink-muted);
  margin-top: var(--space-6);
}

.trust__contrast-riva {
  color: var(--color-ink);
  font-weight: 700;
}

/* ==========================================================================
   COMPARISON DEVICE
   Design System's signature "wrong vs. right" motif (ds-chunk-06): a grayed
   generic statement next to a cyan-labeled correct one. The "wrong" row's
   number/label use muted-tan decoratively (short tag, not body copy); the
   actual sentence stays on the AA-safe ink color, distinguished by weight
   instead of a failing-contrast gray. See the accessibility note up top.
   ========================================================================== */

.compare {
  display: grid;
  gap: 2px;
  margin: var(--space-5) 0;
  max-width: 640px;
}

.compare__row {
  display: grid;
  grid-template-columns: 28px 140px 1fr;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-tan-line);
}

.compare__row:first-child {
  border-top: none;
}

.compare__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-muted);
}

.compare__label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.compare__statement {
  font-size: 17px;
  font-weight: 400;
  color: var(--color-ink);
}

.compare__row--right .compare__num,
.compare__row--right .compare__label {
  color: var(--color-cyan-deep);
}

.compare__row--right .compare__statement {
  font-weight: 700;
}

@media (max-width: 600px) {
  .compare__row {
    grid-template-columns: 24px 1fr;
    grid-template-areas: "num label" "stmt stmt";
  }
  .compare__statement {
    grid-area: stmt;
    margin-top: 4px;
  }
}

/* ==========================================================================
   FAQ (accessible accordion — no JS framework, plain progressive enhancement)
   ========================================================================== */

.faq-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

@media (max-width: 860px) {
  .faq-groups {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.faq-group-heading {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cyan-deep);
  margin-bottom: var(--space-3);
}

.faq-item {
  border-bottom: 1px solid var(--color-tan-line);
}

.faq-item h4 {
  margin: 0;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: none;
  border: none;
  text-align: left;
  padding: 18px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink);
}

.faq-question__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-cyan-deep);
  transition: transform 0.15s ease;
}

.faq-question[aria-expanded="true"] .faq-question__icon {
  transform: rotate(45deg); /* plus becomes an x */
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease;
}

.faq-answer__inner {
  padding-bottom: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink);
  max-width: 520px;
}

.faq-answer__needs-input {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-cyan-deep);
  border: 1px dashed var(--color-cyan-deep);
  padding: 6px 10px;
  border-radius: var(--radius);
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */

.final-cta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

@media (max-width: 700px) {
  .final-cta__grid {
    grid-template-columns: 1fr;
  }
}

.final-cta__card {
  background: var(--color-black-soft);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.final-cta__card h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cyan);
}

.final-cta__card p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-cream);
}

/* ==========================================================================
   FORM MODALS — single screen, all fields, per the call: a multi-step
   advance for a 6-8 field form slows the user down more than it helps.
   Triggered by any [data-modal-target], closed via backdrop click, Escape
   (native <dialog> behavior), or the close button. See initFormModals() in
   js/main.js.
   ========================================================================== */

.form-modal {
  width: min(560px, calc(100vw - 48px));
  max-height: min(720px, calc(100vh - 48px));
  border: none;
  border-radius: var(--radius);
  padding: 0;
  background: var(--color-white);
  color: var(--color-ink);
}

.form-modal::backdrop {
  background: rgba(11, 11, 12, 0.7);
}

.form-modal[data-theme="dark"] {
  background: var(--color-black);
  color: var(--color-cream);
}

.form-modal__inner {
  padding: var(--space-5) var(--space-5) var(--space-4);
  overflow-y: auto;
  max-height: min(720px, calc(100vh - 48px));
}

.form-modal__close {
  position: sticky;
  top: var(--space-3);
  float: right;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  padding: 4px;
  line-height: 0;
}

.form-modal__close:hover,
.form-modal__close:focus-visible {
  opacity: 1;
}

.form-modal__close svg {
  width: 22px;
  height: 22px;
}

.form-modal h2 {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
  clear: both;
}

.form-modal__subhead {
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.75;
  margin-bottom: var(--space-4);
  max-width: 44ch;
}

.form-modal[data-theme="dark"] .form-modal__subhead {
  color: var(--color-cream);
}

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

.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  color: var(--color-ink);
}

.form-modal[data-theme="dark"] .form-field label {
  color: var(--color-cream);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* 16px prevents iOS auto-zoom on focus */
  padding: 13px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--color-tan-line);
  background: var(--color-white);
  color: var(--color-black);
}

.form-modal[data-theme="dark"] .form-field input,
.form-modal[data-theme="dark"] .form-field select,
.form-modal[data-theme="dark"] .form-field textarea {
  border-color: var(--color-black-soft);
  background: var(--color-cream);
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 3px solid var(--color-cyan);
  outline-offset: 1px;
}

.form-field__error {
  display: none;
  font-size: 13px;
  color: #c0392b;
  margin-top: 6px;
}

.form-modal[data-theme="dark"] .form-field__error {
  color: #ff8a80;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: #c0392b;
}

.form-field.has-error .form-field__error {
  display: block;
}

.contact-form__submit {
  margin-top: var(--space-2);
}

.form-status {
  font-size: 14px;
  padding: 10px 0;
}

.form-status[data-state="success"] {
  color: var(--color-cyan);
}

.form-status[data-state="error"] {
  color: #ff8a80;
}

/* honeypot field — hidden from sighted + screen reader users, catches simple bots */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: var(--color-black);
  color: var(--color-cream-soft);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  font-size: 14px;
}

.site-footer a {
  color: var(--color-cream-soft);
}

.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.site-footer__links {
  display: flex;
  gap: var(--space-3);
}

.site-footer__legal {
  border-top: 1px solid var(--color-black-soft);
  padding-top: var(--space-3);
  color: var(--color-ink-muted);
  font-size: 13px;
}