/* Reusable components. Every class here corresponds to a pattern in
   design-language.md. Page-specific composition lives in page-*.css. */

/* ─── Container & sections ─────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--sg-max-content);
  margin: 0 auto;
  padding: 0 var(--sg-gutter);
}

.container--narrow {
  max-width: var(--sg-max-narrow);
}

.container--wide {
  max-width: var(--sg-max-wide);
}

.section {
  padding-top: var(--sg-section-pad-y);
  padding-bottom: var(--sg-section-pad-y);
}

.section--md {
  padding-top: var(--sg-section-pad-y-md);
  padding-bottom: var(--sg-section-pad-y-md);
}

.section--sm {
  padding-top: var(--sg-section-pad-y-sm);
  padding-bottom: var(--sg-section-pad-y-sm);
}

.section--white { background-color: var(--sg-white); }
.section--cream { background-color: var(--sg-cream); }
.section--navy {
  background-color: var(--sg-cape-navy);
  color: var(--sg-white);
}
.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 { color: var(--sg-white); }
.section--navy p { color: var(--sg-on-dark-text-muted); }

/* ─── Section opener (eyebrow + rule + headline) ────────────────── */

.eyebrow {
  display: inline-block;
  font-family: var(--sg-font-display);
  font-size: var(--sg-size-eyebrow);
  font-weight: var(--sg-w-bold);
  letter-spacing: var(--sg-ls-eyebrow);
  line-height: 1;
  color: var(--sg-hero-blue);
  text-transform: uppercase;
}

.section--navy .eyebrow {
  color: var(--sg-hero-blue);
}

.eyebrow--white {
  color: var(--sg-white);
}

.eyebrow--red {
  color: var(--sg-hero-red);
}

.section-opener {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-opener__rule {
  display: block;
  width: 32px;
  height: 3px;
  background-color: var(--sg-hero-blue);
  border: 0;
  margin: 0;
}

.section-opener__title {
  font-size: var(--sg-size-h2);
  font-weight: var(--sg-w-bold);
  letter-spacing: var(--sg-ls-tight);
  line-height: var(--sg-lh-tight);
  color: var(--sg-ink);
  max-width: 22ch;
}

.section--navy .section-opener__title { color: var(--sg-white); }

.section-opener__lede {
  font-size: var(--sg-size-body-lg);
  color: var(--sg-steel);
  max-width: 56ch;
  line-height: var(--sg-lh-relaxed);
}

.section--navy .section-opener__lede { color: var(--sg-on-dark-text-muted); }

/* ─── Buttons ───────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--sg-font-display);
  font-size: var(--sg-size-button);
  font-weight: var(--sg-w-bold);
  letter-spacing: var(--sg-ls-button);
  line-height: 1;
  border-radius: var(--sg-radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--sg-duration) var(--sg-ease),
              border-color var(--sg-duration) var(--sg-ease),
              color var(--sg-duration) var(--sg-ease),
              transform var(--sg-duration) var(--sg-ease);
  white-space: nowrap;
}

.btn:hover { text-decoration: none; }

.btn-primary {
  background-color: var(--sg-hero-blue);
  color: var(--sg-white);
  border: 1.5px solid var(--sg-hero-blue);
}

.btn-primary:hover {
  background-color: var(--sg-hero-blue-hover);
  border-color: var(--sg-hero-blue-hover);
}

.btn-ghost {
  background-color: transparent;
  color: var(--sg-ink);
  border: 1.5px solid var(--sg-rule);
}

.btn-ghost:hover {
  border-color: var(--sg-hero-blue);
  color: var(--sg-hero-blue);
}

.section--navy .btn-ghost {
  color: var(--sg-white);
  border-color: var(--sg-on-dark-border);
}

.section--navy .btn-ghost:hover {
  border-color: var(--sg-white);
  color: var(--sg-white);
}

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sg-hero-blue);
  font-weight: var(--sg-w-semibold);
  font-size: var(--sg-size-body);
  text-decoration: none;
  transition: gap var(--sg-duration) var(--sg-ease);
}

.btn-text::after {
  content: "→";
  transition: transform var(--sg-duration) var(--sg-ease);
}

.btn-text:hover {
  text-decoration: none;
  gap: 10px;
}

.btn-text:hover::after { transform: translateX(2px); }

.section--navy .btn-text {
  color: var(--sg-white);
}

/* ─── Pills & tags ──────────────────────────────────────────────── */

.tag {
  display: inline-block;
  font-family: var(--sg-font-display);
  font-size: var(--sg-size-eyebrow);
  font-weight: var(--sg-w-bold);
  letter-spacing: var(--sg-ls-eyebrow);
  color: var(--sg-hero-blue);
  text-transform: uppercase;
  line-height: 1;
}

.tag--pill {
  background-color: var(--sg-hero-blue-light);
  padding: 4px 10px;
  border-radius: var(--sg-radius-sm);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--sg-ink);
  border-radius: var(--sg-radius-sm);
  font-size: 12px;
  font-weight: var(--sg-w-medium);
  text-decoration: none;
  transition: background-color var(--sg-duration) var(--sg-ease);
}

.pill:hover {
  background-color: rgba(0, 0, 0, 0.10);
  text-decoration: none;
}

/* ─── Cards ─────────────────────────────────────────────────────── */

.card {
  background-color: var(--sg-white);
  border: var(--sg-border-card);
  border-radius: var(--sg-radius-card);
  padding: 32px;
  box-shadow: var(--sg-shadow-card);
}

.card--no-shadow { box-shadow: none; }

.card--on-dark {
  background-color: var(--sg-on-dark-fill);
  border: var(--sg-border-rule-dark);
  box-shadow: none;
  color: var(--sg-white);
}

.card--on-dark p { color: var(--sg-on-dark-text-muted); }

.card__title {
  font-family: var(--sg-font-display);
  font-size: 18px;
  font-weight: var(--sg-w-bold);
  color: var(--sg-ink);
  margin-bottom: 8px;
  line-height: var(--sg-lh-snug);
}

.card--on-dark .card__title { color: var(--sg-white); }

.card__body {
  font-size: var(--sg-size-body-sm);
  color: var(--sg-steel);
  line-height: var(--sg-lh-relaxed);
}

.card--on-dark .card__body { color: var(--sg-on-dark-text-muted); }

/* ─── Stat / proof cards ────────────────────────────────────────── */

.stat-card {
  background-color: var(--sg-white);
  border: var(--sg-border-card);
  border-radius: var(--sg-radius-card);
  padding: 36px;
  box-shadow: var(--sg-shadow-card);
}

.stat-card__eyebrow {
  display: block;
  font-size: var(--sg-size-eyebrow);
  font-weight: var(--sg-w-bold);
  letter-spacing: var(--sg-ls-eyebrow);
  color: var(--sg-hero-blue);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.stat-card__number {
  display: block;
  font-family: var(--sg-font-display);
  font-size: var(--sg-size-stat-card);
  font-weight: var(--sg-w-black);
  letter-spacing: var(--sg-ls-tight);
  line-height: 1;
  color: var(--sg-hero-blue);
  margin-bottom: 12px;
}

.stat-card__number--red { color: var(--sg-hero-red); }

.stat-card__desc {
  font-size: 16px;
  color: var(--sg-steel);
  line-height: var(--sg-lh-relaxed);
}

.stat-card--on-dark {
  background-color: var(--sg-on-dark-fill);
  border-color: var(--sg-on-dark-border);
  box-shadow: none;
}

.stat-card--on-dark .stat-card__number { color: var(--sg-white); }
.stat-card--on-dark .stat-card__desc { color: var(--sg-on-dark-text-muted); }

.stat-card--on-dark .stat-card__accent {
  display: block;
  width: 32px;
  height: 3px;
  background-color: var(--sg-hero-red);
  margin-bottom: 16px;
}

/* ─── Frosted overlay stat card (Section 4 home, dark photographic bg) ── */

.stat-card--frosted {
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--sg-white);
}

.stat-card--frosted .stat-card__number {
  color: var(--sg-white);
  font-size: var(--sg-size-stat-card);
}

.stat-card--frosted .stat-card__accent {
  display: block;
  width: 32px;
  height: 3px;
  background-color: var(--sg-hero-red);
  margin: 12px 0;
}

.stat-card--frosted .stat-card__desc { color: var(--sg-on-dark-text-muted); }

/* ─── Grid layouts ──────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--sg-gutter);
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }
}

/* ─── Accordion ─────────────────────────────────────────────────── */

.accordion {
  border-top: var(--sg-border-rule);
}

.accordion__item {
  border-bottom: var(--sg-border-rule);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 24px 0;
  font-family: var(--sg-font-display);
  font-size: 20px;
  font-weight: var(--sg-w-bold);
  color: var(--sg-ink);
  text-align: left;
  transition: color var(--sg-duration) var(--sg-ease);
}

.accordion__trigger:hover { color: var(--sg-hero-red); }

.accordion__trigger[aria-expanded="true"] {
  color: var(--sg-hero-red);
}

.accordion__icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  flex-shrink: 0;
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background-color: var(--sg-hero-red);
  transition: transform var(--sg-duration) var(--sg-ease);
}

.accordion__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.accordion__icon::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: translateX(-50%) scaleY(0);
}

.accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--sg-duration-slow) var(--sg-ease);
}

.accordion__panel[data-open="true"] {
  /* JS sets explicit max-height to scrollHeight */
}

.accordion__panel-inner {
  padding: 0 0 24px 0;
  color: var(--sg-steel);
  font-size: var(--sg-size-body);
  line-height: var(--sg-lh-relaxed);
}

/* ─── Tabs ──────────────────────────────────────────────────────── */

.tabs__list {
  display: flex;
  gap: 32px;
  border-bottom: var(--sg-border-rule);
  list-style: none;
  padding: 0;
}

.section--navy .tabs__list {
  border-bottom-color: var(--sg-on-dark-border);
}

.tabs__trigger {
  position: relative;
  padding: 16px 0;
  font-family: var(--sg-font-display);
  font-size: var(--sg-size-body-lg);
  font-weight: var(--sg-w-bold);
  color: var(--sg-ink);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--sg-duration) var(--sg-ease);
}

.section--navy .tabs__trigger {
  color: rgba(255, 255, 255, 0.5);
}

.section--navy .tabs__trigger[aria-selected="true"] {
  color: var(--sg-white);
}

.tabs__trigger:hover {
  color: var(--sg-hero-blue);
}

.tabs__trigger[aria-selected="true"] {
  color: var(--sg-hero-blue);
}

.tabs__trigger[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--sg-hero-blue);
}

.tabs__panel {
  display: none;
  padding-top: 48px;
}

.tabs__panel[data-active="true"] {
  display: block;
  animation: tab-fade var(--sg-duration-slow) var(--sg-ease) both;
}

@keyframes tab-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Breadcrumb ────────────────────────────────────────────────── */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sg-size-meta);
  padding: 20px 0;
  border-bottom: var(--sg-border-rule);
}

.breadcrumb__link {
  color: var(--sg-hero-blue);
  font-weight: var(--sg-w-semibold);
}

.breadcrumb__sep {
  color: var(--sg-steel);
}

.breadcrumb__current {
  color: var(--sg-ink);
  font-weight: var(--sg-w-semibold);
}

/* ─── Site nav ──────────────────────────────────────────────────── */

/* Nav sits transparent over the hero. Text color is a fixed warm gold
   on dark variant (matches the result of mix-blend-mode: difference of
   white over the slide-1 hero blue). Once scrolled past the hero, a
   subtle solid backdrop fades in and text switches to dark ink for
   readability over body sections.

   Tried mix-blend-mode itself but the nav's z-index creates a stacking
   context that traps the blend, and the CTA pill needs to stay solid
   Hero Blue so we can't put the blend mode on the whole nav. Hardcoded
   color is the pragmatic substitute. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--sg-z-nav);
  min-height: var(--sg-nav-height);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--sg-duration) var(--sg-ease),
              border-color var(--sg-duration) var(--sg-ease),
              color var(--sg-duration) var(--sg-ease);
  --sg-nav-text: var(--sg-ink);
}

/* Dark variant (home, work, thinking pages with dark heroes): warm
   peach text floats over the dark gradient. This is the color the
   sample's mix-blend-mode produces — applied directly here to avoid
   stacking-context complications. */
.site-nav[data-variant="dark"] {
  --sg-nav-text: #FFC58B;
}

/* Once the user scrolls past the hero, fade in a solid backdrop. Glass
   blur on light pages, navy on dark. Text switches to ink (light) or
   warm white (dark) for readability against the solid surface. */
.site-nav[data-scrolled="true"] {
  background-color: rgba(250, 250, 248, 0.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--sg-rule);
  --sg-nav-text: var(--sg-ink);
}

.site-nav[data-variant="dark"][data-scrolled="true"] {
  background-color: rgba(15, 22, 35, 0.86);
  border-bottom-color: var(--sg-on-dark-border);
  --sg-nav-text: var(--sg-white);
}

/* Matches the sample: no max-width centering, 56px horizontal gutter so
   the brand anchors near the viewport edge (not centered with the body
   content max-width). Body sections still use max-width 1200px; the nav
   sits wider on purpose. */
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--sg-nav-height);
  max-width: none;
  margin: 0;
  padding: 0 56px;
}

@media (max-width: 700px) {
  .site-nav__inner {
    padding: 0 var(--sg-gutter);
  }
}

.site-nav__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  line-height: 1;
  color: var(--sg-nav-text);
}

.site-nav__brand:hover { text-decoration: none; }

/* Brand sizing matches the sample: 18px font weight 800. Mono and
   wordmark share size so the brand reads as one unit. */
.site-nav__monogram {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-black);
  font-size: 18px;
  letter-spacing: -0.04em;
  color: inherit;
  line-height: 1;
  display: inline-block;
}

.site-nav__wordmark {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-black);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: inherit;
  line-height: 1;
}

/* Wrapper around links + CTA. On desktop it's a transparent flex row
   sitting on the right of the nav. On mobile it becomes the full-
   screen menu panel with links at top and CTA at bottom via flex
   column + justify-content: space-between. */
.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 28px;
  color: var(--sg-nav-text);
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}

.site-nav__link {
  font-family: var(--sg-font-display);
  font-size: 14px;
  font-weight: var(--sg-w-medium);
  color: inherit;
  text-decoration: none;
  position: relative;
  padding: 8px 0;
  transition: opacity var(--sg-duration) var(--sg-ease);
  opacity: 0.9;
}

.site-nav__link:hover {
  opacity: 1;
  text-decoration: none;
}

.site-nav__link[aria-current="page"] {
  opacity: 1;
}

.site-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: currentColor;
}

/* Nav CTA matches the sample exactly: ghost pill. Transparent
   background, 1px translucent border in the current text color, warm
   peach text on dark hero. The class is added alongside `.btn` so
   these rules override .btn's filled-button defaults. */
.site-nav__cta {
  margin-left: 4px;
  background-color: transparent;
  color: var(--sg-nav-text);
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: var(--sg-w-semibold);
  letter-spacing: 0;
}

.site-nav__cta:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  border-color: currentColor;
  color: var(--sg-nav-text);
}

.site-nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  position: relative;
  border-radius: 6px;
}

.site-nav__toggle-bar {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background-color: var(--sg-ink);
  transition: transform var(--sg-duration) var(--sg-ease),
              opacity var(--sg-duration) var(--sg-ease);
}

.site-nav[data-variant="dark"] .site-nav__toggle-bar { background-color: var(--sg-white); }

.site-nav__toggle-bar:nth-child(1) { top: 14px; }
.site-nav__toggle-bar:nth-child(2) { top: 19px; }
.site-nav__toggle-bar:nth-child(3) { top: 24px; }

.site-nav[data-mobile-open="true"] .site-nav__toggle-bar:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.site-nav[data-mobile-open="true"] .site-nav__toggle-bar:nth-child(2) { opacity: 0; }
.site-nav[data-mobile-open="true"] .site-nav__toggle-bar:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 800px) {
  /* Mobile baseline: hide the menu, show the hamburger toggle. */
  .site-nav__menu { display: none; }
  .site-nav__toggle { display: block; }

  /* Mobile menu open: the whole .site-nav__menu becomes a full-viewport
     fixed panel below the nav. Links flow at the top, CTA pushed to the
     bottom by flex column + justify-content: space-between. No
     position: fixed on the CTA itself, which avoids the iOS quirk
     where transform+fixed renders in the wrong spot. */
  .site-nav[data-mobile-open="true"] .site-nav__menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: var(--sg-nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - var(--sg-nav-height));
    padding: 32px var(--sg-gutter) max(40px, env(safe-area-inset-bottom));
    background-color: var(--sg-white);
    color: var(--sg-ink);
    overflow-y: auto;
    z-index: calc(var(--sg-z-nav) - 1);
  }

  .site-nav[data-mobile-open="true"][data-variant="dark"] .site-nav__menu {
    background-color: var(--sg-cape-navy);
    color: var(--sg-white);
  }

  /* Stack the link list vertically inside the menu. */
  .site-nav[data-mobile-open="true"] .site-nav__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .site-nav[data-mobile-open="true"] .site-nav__link {
    padding: 14px 0;
    font-size: 22px;
    font-weight: var(--sg-w-bold);
    width: 100%;
    border-bottom: none;
    opacity: 1;
    line-height: 1.3;
  }

  /* Active link: color highlight, no underline rule. */
  .site-nav[data-mobile-open="true"] .site-nav__link[aria-current="page"] {
    color: var(--sg-hero-blue);
  }
  .site-nav[data-mobile-open="true"] .site-nav__link[aria-current="page"]::after {
    display: none;
  }

  /* CTA sits at the bottom of the menu naturally (last flex child +
     justify-content: space-between). Center horizontally, not full-
     width, so the pill shape is preserved. */
  .site-nav[data-mobile-open="true"] .site-nav__cta {
    align-self: center;
    margin-top: auto;
    box-shadow: 0 12px 28px rgba(15, 22, 35, 0.18);
  }

  .site-nav[data-mobile-open="true"] .site-nav__brand {
    color: var(--sg-ink);
  }
  .site-nav[data-mobile-open="true"][data-variant="dark"] .site-nav__brand {
    color: var(--sg-white);
  }
}

/* ─── Site footer ───────────────────────────────────────────────── */

.site-footer {
  background-color: var(--sg-white);
  border-top: 3px solid var(--sg-hero-blue);
  padding: 64px 0 48px;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 48px;
  max-width: var(--sg-max-content);
  margin: 0 auto;
  padding: 0 var(--sg-gutter);
}

@media (max-width: 700px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-footer__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-black);
  font-size: 18px;
  color: var(--sg-ink);
}

.site-footer__copyright {
  font-size: var(--sg-size-meta);
  color: var(--sg-steel);
}

.site-footer__heading {
  font-family: var(--sg-font-display);
  font-size: var(--sg-size-eyebrow);
  font-weight: var(--sg-w-bold);
  letter-spacing: var(--sg-ls-eyebrow);
  text-transform: uppercase;
  color: var(--sg-ink);
  margin-bottom: 16px;
}

.site-footer__links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__link {
  font-size: 14px;
  color: var(--sg-steel);
  text-decoration: none;
  transition: color var(--sg-duration) var(--sg-ease);
}

.site-footer__link:hover {
  color: var(--sg-hero-blue);
  text-decoration: none;
}

.site-footer__legal {
  margin-top: 32px;
  padding-top: 16px;
  border-top: var(--sg-border-rule);
  max-width: var(--sg-max-content);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sg-gutter);
  padding-right: var(--sg-gutter);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--sg-steel);
}

@media (max-width: 700px) {
  .site-footer__legal {
    flex-direction: column;
  }
}

/* ─── Hero aura (radial gradient) ───────────────────────────────── */

.hero-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 70% 50%,
    rgba(26, 86, 219, 0.08) 0%,
    rgba(200, 32, 47, 0.06) 50%,
    transparent 80%
  );
}

/* ─── Hero structural grid overlay (decorative) ─────────────────── */

.hero-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,
      transparent calc(100% / 12 - 1px),
      rgba(0, 0, 0, 0.04) calc(100% / 12 - 1px),
      rgba(0, 0, 0, 0.04) calc(100% / 12),
      transparent calc(100% / 12));
  background-size: calc(100% / 12) 100%;
  opacity: 0.6;
}

/* ─── Letter component (Home §8) ────────────────────────────────── */

.letter {
  background-color: var(--sg-cream);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow-letter);
  padding: 48px;
  position: relative;
}

@media (max-width: 700px) {
  .letter { padding: 32px 24px; }
}

.letter__header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--sg-size-caption);
  color: var(--sg-steel);
  padding-bottom: 16px;
  border-bottom: var(--sg-border-rule);
  margin-bottom: 24px;
}

.letter__signature {
  font-family: var(--sg-font-display);
  font-size: 22px;
  font-weight: var(--sg-w-bold);
  color: var(--sg-ink);
  margin-top: 24px;
}

/* ─── Modal ─────────────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 22, 35, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--sg-z-modal-backdrop);
  padding: 24px;
}

.modal-backdrop[data-open="true"] {
  display: flex;
  animation: modal-fade var(--sg-duration) var(--sg-ease) both;
}

.modal {
  position: relative;
  background-color: var(--sg-cream);
  border-radius: var(--sg-radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  max-width: 720px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 56px 64px;
  z-index: var(--sg-z-modal);
}

@media (max-width: 700px) {
  .modal { padding: 32px 24px; }
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: var(--sg-radius-pill);
  background-color: rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--sg-duration) var(--sg-ease);
  z-index: 1;
}

.modal__close:hover { background-color: rgba(0, 0, 0, 0.12); }
.modal__close::before,
.modal__close::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 2px;
  background-color: var(--sg-ink);
}
.modal__close::before { transform: rotate(45deg); }
.modal__close::after  { transform: rotate(-45deg); }

@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Letter variant. Slides up from the bottom edge, bottom-anchored,
   leaves ~33vh of breathing room at the top. Feels like a paper letter
   being slid into view, not a centered modal. Used on Home §8. */

.modal-backdrop--letter {
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.modal--letter {
  width: 100%;
  max-width: min(960px, 100%);
  max-height: 67vh;
  height: 67vh;
  padding: 56px 64px 48px;
  border-radius: var(--sg-radius-lg) var(--sg-radius-lg) 0 0;
  /* Soft top edge so the letter "rests" against the dark backdrop above */
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.35);
  margin: 0 24px;
}

.modal-backdrop--letter[data-open="true"] .modal--letter {
  animation: letter-slide-up var(--sg-duration-slow) var(--sg-ease) both;
}

@keyframes letter-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (max-width: 700px) {
  .modal--letter {
    padding: 32px 24px;
    margin: 0;
    max-width: 100%;
    border-radius: var(--sg-radius-lg) var(--sg-radius-lg) 0 0;
  }
}

/* Honor reduced motion: skip the slide animation. */
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop--letter[data-open="true"] .modal--letter {
    animation: modal-fade var(--sg-duration) var(--sg-ease) both;
  }
}

/* ─── Carousel ──────────────────────────────────────────────────── */

.carousel {
  position: relative;
  overflow: hidden;
}

.carousel__track {
  display: flex;
  transition: transform var(--sg-duration-slow) var(--sg-ease);
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.carousel__dots {
  display: flex;
  gap: 10px;
  align-items: center;
}

.carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--sg-radius-pill);
  background-color: rgba(17, 19, 24, 0.25);
  transition: background-color var(--sg-duration) var(--sg-ease),
              width var(--sg-duration) var(--sg-ease);
}

.carousel__dot[aria-current="true"] {
  background-color: var(--sg-hero-blue);
  width: 28px;
}

/* ─── Audio player ──────────────────────────────────────────────── */

.audio-player {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background-color: var(--sg-white);
  border: var(--sg-border-rule);
  border-radius: var(--sg-radius-lg);
}

.audio-player__btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--sg-radius-pill);
  background-color: var(--sg-hero-blue);
  color: var(--sg-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--sg-duration) var(--sg-ease);
}

.audio-player__btn:hover { background-color: var(--sg-hero-blue-hover); }

.audio-player__progress {
  flex: 1;
  height: 4px;
  background-color: var(--sg-rule);
  border-radius: var(--sg-radius-pill);
  position: relative;
  cursor: pointer;
}

.audio-player__progress-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background-color: var(--sg-hero-blue);
  border-radius: var(--sg-radius-pill);
}

.audio-player__time {
  font-family: var(--sg-font-display);
  font-size: 12px;
  color: var(--sg-steel);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ─── Forms ─────────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-family: var(--sg-font-display);
  font-size: var(--sg-size-eyebrow);
  font-weight: var(--sg-w-bold);
  letter-spacing: var(--sg-ls-eyebrow);
  color: var(--sg-ink);
  text-transform: uppercase;
}

.field__input,
.field__textarea {
  padding: 12px 14px;
  background-color: var(--sg-white);
  border: 1.5px solid var(--sg-rule);
  border-radius: var(--sg-radius-md);
  font-size: var(--sg-size-body);
  color: var(--sg-ink);
  transition: border-color var(--sg-duration) var(--sg-ease);
}

.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--sg-hero-blue);
}

.field__textarea {
  resize: vertical;
  min-height: 140px;
}