/* ==========================================================================
   THE WRIGHT TEAM — Design System & Stylesheet
   Table of contents:
     1. Design tokens (custom properties)
     2. Reset & base
     3. Typography utilities
     4. Layout utilities
     5. Buttons
     6. Header & navigation
     7. Hero
     8. Section heading / breadcrumbs / anchor targets
     9. Stat band
    10. Split feature
    11. Paths grid (home)
    12. Process steps
    13. Card grid
    14. Testimonials
    15. FAQ accordion
    16. CTA band / Quote band
    17. Fort Gordon (military page)
    18. Listings + filters (spotlight)
    19. Communities grid
    20. Values + Team (about)
    21. Contact form
    22. Footer
    23. Media / art placeholders
    24. Scroll-reveal animation system
    25. Reduced motion & focus-visible
    26. Responsive breakpoints
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. DESIGN TOKENS                                                        */
/* ---------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --maroon-900: #34091c;
  --maroon-800: #4a0f26;
  --maroon-700: #641533;
  --maroon-600: #7f1c3f;
  --maroon-500: #9c2a4d;

  --gold-700: #8c6420;
  --gold-600: #a9812f;
  --gold-500: #c9a227;
  --gold-400: #d9b74e;
  --gold-300: #e8cd85;
  --gold-100: #f5ead0;

  --charcoal-900: #1c1917;
  --charcoal-800: #262220;
  --charcoal-700: #362f2c;
  --charcoal-600: #4a4038;

  --stone-100: #f8f4ec;
  --stone-200: #f0e9db;
  --stone-300: #e3d9c4;

  --wood-500: #8a5c3c;
  --wood-700: #5f3c26;

  --warm-white: #fdfbf6;
  --ink: #211c19;
  --ink-soft: #5a534c;
  /* WCAG AA fix (was #8a827a at 3.66:1 on warm-white, below the 4.5:1
     minimum for normal text): darkened to 6.3:1 on warm-white / 6.0:1 on
     stone-100. Fixes breadcrumbs, page-toc labels, testimonial/listing
     pending copy, team-card tags, and the contact-form privacy line. */
  --ink-faint: #655c53;

  /* Semantic aliases */
  --color-bg: var(--warm-white);
  --color-surface: #ffffff;
  --color-text: var(--ink);
  --color-text-soft: var(--ink-soft);
  --color-border: #e5ddcd;
  --color-primary: var(--maroon-700);
  --color-primary-dark: var(--maroon-900);
  --color-gold: var(--gold-500);
  /* Deliberately distinct from the brand maroon: form-validation states
     need to read as universally "error red" rather than brand color, so
     this is its own semantic token instead of a brand palette entry. */
  --color-error: #b3312f;

  /* Typography */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.6rem, 3vw + 2.2rem, 5.4rem);
  --fs-h1: clamp(2.2rem, 2vw + 1.7rem, 3.6rem);
  --fs-h2: clamp(1.8rem, 1.4vw + 1.4rem, 2.75rem);
  --fs-h3: clamp(1.2rem, 0.5vw + 1.05rem, 1.5rem);
  --fs-lg: 1.15rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  /* Spacing */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8.5rem;

  /* Layout */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-med: 450ms;
  --dur-slow: 900ms;

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(28, 20, 15, 0.06);
  --shadow-md: 0 12px 32px rgba(28, 20, 15, 0.1);
  --shadow-lg: 0 28px 70px rgba(28, 20, 15, 0.18);
  --shadow-gold: 0 10px 26px rgba(201, 162, 39, 0.35);

  --header-h: 84px;
}

/* ---------------------------------------------------------------------- */
/* 2. RESET & BASE                                                         */
/* ---------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

address {
  font-style: normal;
}

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

/* Skip link */
.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 999;
  background: var(--maroon-900);
  color: var(--warm-white);
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  top: 1rem;
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--gold-300);
  color: var(--maroon-900);
}

/* ---------------------------------------------------------------------- */
/* 3. TYPOGRAPHY UTILITIES                                                 */
/* ---------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-700);
}

/* Eyebrows sit on dark hero/CTA/quote-band backgrounds too; lighter gold
   reads better there while keeping AA contrast on both light and dark. */
.hero__eyebrow,
.cta-band .eyebrow,
.footer__pre-eyebrow,
.fort-gordon .eyebrow,
.contact-info__card .eyebrow {
  color: var(--gold-300);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

em {
  font-style: italic;
  color: var(--maroon-700);
}

/* ---------------------------------------------------------------------- */
/* 4. LAYOUT UTILITIES                                                     */
/* ---------------------------------------------------------------------- */
main {
  display: block;
}

.anchor-target {
  display: block;
  scroll-margin-top: calc(var(--header-h) + 12px);
}

section > .anchor-target {
  height: 0;
}

/* ---------------------------------------------------------------------- */
/* 5. BUTTONS                                                              */
/* ---------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
  will-change: transform;
}

.btn:hover {
  transform: translateY(-2px);
}

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

.btn--primary {
  background: var(--maroon-700);
  color: var(--warm-white);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--maroon-800);
  box-shadow: var(--shadow-md);
}

.btn--gold {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--maroon-900);
  box-shadow: var(--shadow-gold);
}

.btn--gold:hover {
  box-shadow: 0 16px 36px rgba(201, 162, 39, 0.45);
}

.btn--outline {
  background: transparent;
  color: var(--maroon-700);
  border: 1.5px solid var(--maroon-700);
}

.btn--outline:hover {
  background: var(--maroon-700);
  color: var(--warm-white);
}

.btn--outline-light {
  background: transparent;
  color: var(--warm-white);
  border: 1.5px solid rgba(253, 251, 246, 0.55);
  backdrop-filter: blur(6px);
}

.btn--outline-light:hover {
  background: rgba(253, 251, 246, 0.12);
  border-color: var(--warm-white);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
}

.btn--ghost:hover {
  color: var(--maroon-700);
}

.btn--sm {
  padding: 0.65rem 1.35rem;
  font-size: 0.85rem;
}

.btn--lg {
  padding: 1.1rem 2.25rem;
  font-size: 1rem;
}

.btn--block {
  width: 100%;
}

.btn__spinner {
  display: none;
}

/* ---------------------------------------------------------------------- */
/* 6. HEADER & NAVIGATION                                                  */
/* ---------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out),
    background var(--dur-med) var(--ease-out);
  /* Layered luxury header background: burgundy-to-maroon gradient as the
     base, with a faint skyline line-art + brushed-metallic texture layer
     added below (see .site-header__scene). Persistent in every scroll
     state so brand text stays a single consistent light color rather
     than swapping between light/dark per state. */
  background: linear-gradient(165deg, var(--maroon-900) 0%, var(--maroon-700) 55%, var(--maroon-800) 100%);
  /* Soft inset shadow along the upper edge — a restrained recessed-panel
     cue rather than a drop shadow, so the bar reads as dimensional rather
     than flat without looking glossy. */
  box-shadow: inset 0 3px 5px rgba(10, 5, 4, 0.32);
}

/* Thin metallic gold divider beneath the nav — a soft sheen rather than a
   flat line, fading out at both ends. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    var(--gold-400) 18%,
    var(--gold-500) 50%,
    var(--gold-400) 82%,
    transparent
  );
  opacity: 0.85;
}

.site-header.is-scrolled {
  height: 72px;
  box-shadow: var(--shadow-lg), inset 0 3px 5px rgba(10, 5, 4, 0.32);
}

.site-header .brand,
.site-header .nav__link,
.site-header .nav__dropdown-toggle,
.site-header .nav__phone {
  color: var(--warm-white);
}

/* .btn--ghost's default hover recolors to maroon (correct for its other,
   light-background use on the Contact page) — explicitly pin the header's
   phone pill to stay light on hover too, since the header background is
   maroon in every state now and maroon-on-maroon would be invisible. */
.site-header .nav__phone:hover {
  color: var(--warm-white);
}

body.menu-open .site-header {
  background: var(--warm-white);
}
body.menu-open .site-header .brand,
body.menu-open .site-header .nav__link {
  color: var(--ink);
}

/* Decorative background layers — clipped to their own wrapper (not the
   header itself) so the Properties nav dropdown, which intentionally
   renders below the header's bottom edge, is never cropped. */
.site-header__scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.site-header__skyline {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 140' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23e8cd85' stroke-width='2'%3E%3Cpath d='M0 140V70h22V50h18v20h14V38h20v32h16V90h26V60h18v20h20V44h16v46h24V30h20v60h18V80h16v30h22V54h18v22h16V96h20V44h22v52h16V74h18v24h24V38h18v58h20V64h16v30h22V90h18v20'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 480px 100%;
  opacity: 0.07;
}

.site-header__metallic {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    102deg,
    rgba(232, 205, 133, 0.05) 0px,
    rgba(232, 205, 133, 0.05) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: overlay;
  opacity: 0.55;
}

.site-header__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-out);
}

/* The header's sole logo is now the Better Homes & Gardens Real Estate
   Executive Partners affiliate mark (the Wright Team mark lives only in
   the homepage hero). The BHGRE logo has genuine alpha transparency and
   its green tone already carries reasonable contrast against the maroon
   gradient on its own (verified against the header's actual gradient
   stops), so no opaque box is used. A soft, low-opacity glass backdrop
   plus a gentle warm light falloff sit behind it purely for extra
   readability margin — restrained "architectural signage" depth, not a
   decorative panel. */
.header-brand__mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-md);
}

.header-brand__mark::before {
  /* gentle light falloff */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210px;
  height: 150px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(232, 205, 133, 0.22) 0%, rgba(232, 205, 133, 0.08) 45%, rgba(232, 205, 133, 0) 75%);
  filter: blur(3px);
  z-index: -1;
  pointer-events: none;
}

.header-brand__mark::after {
  /* minimal glass-like backdrop, only as much as needed for readability */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(253, 251, 246, 0.07);
  border: 1px solid rgba(253, 251, 246, 0.14);
  border-radius: var(--radius-md);
  backdrop-filter: blur(3px);
  z-index: -1;
}

.header-brand__mark .logo-image {
  max-height: 34px;
  width: auto;
  filter: drop-shadow(0 1px 3px rgba(15, 8, 6, 0.35));
}

@media (max-width: 420px) {
  .header-brand__mark {
    padding: 0.4rem 0.65rem;
  }

  .header-brand__mark .logo-image {
    max-height: 26px;
  }
}

.brand:hover .header-brand__mark .logo-image {
  filter: drop-shadow(0 2px 5px rgba(15, 8, 6, 0.4));
}

/* Original light backing-chip treatment — still used by the FOOTER's
   Wright Team logo (unchanged/out of scope for this header/hero pass). */
.brand__logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--warm-white);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.brand__logo-chip .logo-image {
  max-height: 44px;
  width: auto;
}

.brand:hover .brand__logo-chip {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.brand__tagline {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  white-space: nowrap;
}

/* On the narrowest phones, the logo chip + persistent contact CTA +
   menu toggle already fill the available header width; drop the
   supplementary locality tag rather than let anything wrap or crowd —
   the logo itself remains the priority brand element at every size. */
@media (max-width: 420px) {
  .brand__tagline {
    display: none;
  }
}

.nav {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav__item {
  position: relative;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 0.1rem;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1.5px;
  background: var(--gold-500);
  transition: right var(--dur-med) var(--ease-out);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  right: 0;
}

.nav__chevron {
  transition: transform var(--dur-fast) var(--ease-out);
}

.nav__item--dropdown:hover .nav__chevron,
.nav__dropdown-toggle[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 220px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
    visibility var(--dur-fast);
}

.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown,
.nav__dropdown-toggle[aria-expanded="true"] + .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav__dropdown-link {
  display: block;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out);
}

.nav__dropdown-link:hover,
.nav__dropdown-link.is-active {
  background: var(--stone-100);
  color: var(--maroon-700);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav__phone {
  display: none;
}

.mobnav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}

.mobnav__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

body.menu-open .mobnav__toggle .mobnav__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
body.menu-open .mobnav__toggle .mobnav__bar:nth-child(2) {
  opacity: 0;
}
body.menu-open .mobnav__toggle .mobnav__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobnav {
  position: fixed;
  inset: 0;
  top: var(--header-h);
  background: var(--warm-white);
  padding: var(--space-lg) var(--container-pad) var(--space-xl);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out),
    visibility var(--dur-med);
}

body.menu-open .mobnav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobnav__list {
  display: flex;
  flex-direction: column;
}

.mobnav__item > a,
.mobnav__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  border-bottom: 1px solid var(--color-border);
  width: 100%;
  color: var(--ink);
}

.mobnav__submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-out);
}

.mobnav__item--group.is-open .mobnav__submenu {
  max-height: 320px;
}

.mobnav__item--group.is-open .mobnav__group-toggle svg {
  transform: rotate(180deg);
}

.mobnav__group-toggle svg {
  transition: transform var(--dur-fast) var(--ease-out);
}

.mobnav__submenu li a {
  display: block;
  padding: 0.85rem 0 0.85rem 1rem;
  font-size: 1rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--color-border);
}

.mobnav__footer {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
}

.mobnav__phone {
  font-weight: 600;
  color: var(--maroon-700);
}

/* ---------------------------------------------------------------------- */
/* 7. HERO                                                                 */
/* ---------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--header-h) + var(--space-lg)) var(--container-pad) var(--space-2xl);
  overflow: hidden;
  isolation: isolate;
  color: var(--warm-white);
}

.hero__scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, var(--maroon-900) 0%, var(--maroon-800) 38%, var(--charcoal-900) 100%);
}

.hero--stone .hero__scene {
  background: linear-gradient(160deg, var(--charcoal-800) 0%, var(--wood-700) 55%, var(--maroon-900) 100%);
}

.hero--charcoal .hero__scene {
  background: linear-gradient(160deg, var(--charcoal-900) 0%, var(--charcoal-700) 45%, var(--maroon-900) 100%);
}

.hero--maroon .hero__scene {
  background: linear-gradient(160deg, var(--maroon-900) 0%, var(--maroon-700) 45%, var(--charcoal-900) 100%);
}

.hero__gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 50% 20%, rgba(201, 162, 39, 0.18), transparent 70%);
  animation: heroGlow 14s ease-in-out infinite alternate;
}

@keyframes heroGlow {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Homepage-only background depth (scoped to .hero--home so every other
   page's hero — which shares the same .hero__scene/.hero__gradient/
   .hero__grain/.hero__topo classes — is completely unaffected). Two
   extra layers on top of the existing base gradient: a faint Augusta-
   inspired skyline-and-bridge line-art illustration, and a very low-
   opacity brushed-texture layer. Purely decorative (behind aria-hidden
   .hero__scene), never competing with the logo/headline/copy/CTAs. */
.hero--home .hero__scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 220' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23e8cd85' stroke-width='1.6'%3E%3Cpath d='M0 220V150h16V128h12v18h10V110h16v30h14V138h20V96h12v40h18V80h10v56h20V64h14v20h16V150h18V110h12v18h16V72h18v46h14V96h20v58h16V86h12v24h18V150h14v20'/%3E%3Cpath d='M330 220C330 150 380 92 430 92C480 92 530 150 530 220' /%3E%3Cpath d='M360 220C360 168 392 130 430 130C468 130 500 168 500 220'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: 900px 100%;
  opacity: 0.055;
}

.hero--home .hero__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    96deg,
    rgba(232, 205, 133, 0.035) 0px,
    rgba(232, 205, 133, 0.035) 1px,
    transparent 1px,
    transparent 5px
  );
  mix-blend-mode: overlay;
  opacity: 0.6;
}

.hero__topo {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 55%;
  fill: none;
  stroke: rgba(232, 205, 133, 0.16);
  stroke-width: 1.4;
}

.hero__content {
  position: relative;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.hero__eyebrow {
  color: var(--gold-300);
}

.hero__title {
  font-size: var(--fs-hero);
  color: var(--warm-white);
  font-weight: 400;
}

.hero__title em {
  color: var(--gold-400);
  font-style: italic;
}

.hero__sub {
  max-width: 620px;
  font-size: var(--fs-lg);
  color: rgba(253, 251, 246, 0.82);
  margin-top: 0.25rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: var(--space-sm);
}

.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 1.5px solid rgba(253, 251, 246, 0.5);
  border-radius: var(--radius-pill);
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.hero__scroll-cue span {
  width: 3px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--gold-400);
  animation: scrollCue 2s var(--ease-in-out) infinite;
}

@keyframes scrollCue {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    transform: translateY(14px);
    opacity: 0;
  }
}

/* ---------------------------------------------------------------------- */
/* 7a. HERO SIGNATURE MOMENT (homepage only)                              */
/* The homepage's one signature visual moment: the Wright Team's own "W"       */
/* monogram (isolated directly from the official Volume I logo — the exact    */
/* same pixels used in the header/footer, never redrawn, recolored, or        */
/* stretched), presented as a small refined mark above the headline with a    */
/* soft rise-and-fade entrance. Replaces an earlier generic isometric house   */
/* icon that read as a stock template motif rather than an ownable brand      */
/* asset. Purely decorative (aria-hidden; the eyebrow/H1 remain the real,     */
/* accessible content), so it degrades gracefully — no animation support,     */
/* JS disabled, or reduced motion simply shows the finished mark at rest.     */
/* ---------------------------------------------------------------------- */
.hero__signature {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

/* Gentle ambient gold halo behind the full logo lockup — lifts the mark's
   own dark/red linework off the hero's dark gradient without any
   recoloring of the source artwork itself. Sized up slightly alongside
   the larger logo below. */
.hero__signature::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 460px;
  height: 460px;
  max-width: 74vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(217, 183, 78, 0.36) 0%, rgba(217, 183, 78, 0.12) 45%, rgba(217, 183, 78, 0) 72%);
  filter: blur(6px);
}

/* Understated dimensional treatment: a soft offset shadow (approx. 4px)
   for lift, plus a faint warm rim-light drop-shadow offset up-left (a
   thin "catch light" edge rather than a bevel or outline) — restrained
   "illuminated wall emblem" depth, not a glossy/chrome effect. The logo's
   own pixels are never recolored or redrawn. */
.hero-mark {
  position: relative;
  width: 270px;
  height: auto;
  filter: drop-shadow(3px 4px 7px rgba(10, 5, 4, 0.45)) drop-shadow(-1px -1px 0 rgba(232, 205, 133, 0.35));
}

@media (min-width: 641px) {
  .hero-mark {
    width: 320px;
    opacity: 0;
    transform: translateY(16px);
    animation: heroMarkRise 0.9s var(--ease-out) 0.2s both, heroMarkFloat 7s ease-in-out 1.1s infinite;
  }
}

@keyframes heroMarkRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Very slow, minimal float (~3px) once the entrance settles — never more
   than a gentle drift. prefers-reduced-motion collapses this globally
   (see the site-wide reduced-motion rule near the top of this file). */
@keyframes heroMarkFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* ---------------------------------------------------------------------- */
/* 8. SECTION HEADING / BREADCRUMBS                                        */
/* ---------------------------------------------------------------------- */
.section-heading {
  max-width: 680px;
  margin: 0 auto var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.section-heading--center {
  text-align: center;
  align-items: center;
}

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

.section-heading__sub {
  color: var(--ink-soft);
  font-size: var(--fs-lg);
}

.breadcrumbs {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1.5rem var(--container-pad) 0;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

.breadcrumbs a {
  color: var(--ink-soft);
  transition: color var(--dur-fast);
}

.breadcrumbs a:hover {
  color: var(--maroon-700);
}

.breadcrumbs__sep {
  opacity: 0.5;
}

/* On-page table of contents for long resource pages (e.g. Military
   Relocation). Horizontally scrollable on mobile so it never wraps into
   a wall of pills. */
.page-toc {
  max-width: var(--container-max);
  margin: 1.5rem auto 0;
  padding: 0 var(--container-pad);
}

.page-toc__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}

.page-toc__list {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}

.page-toc__list a {
  display: inline-block;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.page-toc__list a:hover {
  border-color: var(--maroon-700);
  color: var(--maroon-700);
}

/* ---------------------------------------------------------------------- */
/* 9. STAT BAND                                                            */
/* ---------------------------------------------------------------------- */
.stat-band {
  background: var(--charcoal-900);
  color: var(--warm-white);
  padding: var(--space-xl) var(--container-pad);
}

.stat-band__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-md);
  text-align: center;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  color: var(--gold-400);
}

.stat__label {
  font-size: var(--fs-sm);
  color: rgba(253, 251, 246, 0.7);
  letter-spacing: 0.03em;
}

/* Credibility chips: qualitative verified facts, not invented numbers.
   Same slot as stat-band but sized for short phrases rather than digits. */
.credibility-band .stat__value {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--gold-400);
}

.credibility-band .stat__label {
  max-width: 22ch;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------- */
/* 10. SPLIT FEATURE                                                       */
/* ---------------------------------------------------------------------- */
.split {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-2xl) var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.split--reverse {
  direction: rtl;
}
.split--reverse > * {
  direction: ltr;
}

.split__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.split__title {
  font-size: var(--fs-h2);
  margin: 0.5rem 0 1rem;
}

.split__text {
  color: var(--ink-soft);
  font-size: var(--fs-lg);
  margin-bottom: 1.25rem;
}

.split__bullets {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.split__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--ink);
  font-size: 0.95rem;
}

.split__bullets svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--gold-600);
}

/* ---------------------------------------------------------------------- */
/* 11. PATHS GRID (home)                                                   */
/* ---------------------------------------------------------------------- */
.paths {
  background: var(--stone-100);
  padding: var(--space-2xl) var(--container-pad);
}

.paths__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.paths__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.path-card {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  overflow: hidden;
}

.path-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(100, 21, 51, 0.04), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-med);
}

.path-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.path-card:hover::before {
  opacity: 1;
}

.path-card__icon {
  display: inline-flex;
  color: var(--maroon-700);
}

.path-card__title {
  font-size: 1.2rem;
}

.path-card__text {
  color: var(--ink-soft);
  font-size: 0.92rem;
  flex-grow: 1;
}

.path-card__arrow {
  align-self: flex-end;
  color: var(--gold-600);
  font-size: 1.2rem;
  transition: transform var(--dur-fast) var(--ease-out);
}

.path-card:hover .path-card__arrow {
  transform: translateX(6px);
}

/* ---------------------------------------------------------------------- */
/* 12. PROCESS STEPS                                                       */
/* ---------------------------------------------------------------------- */
.process {
  padding: var(--space-2xl) var(--container-pad);
}

.process__inner {
  max-width: 900px;
  margin: 0 auto;
}

.process__list {
  display: flex;
  flex-direction: column;
}

.process__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
}

.process__step:last-child {
  border-bottom: 1px solid var(--color-border);
}

.process__num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--gold-500);
}

.process__title {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

.process__text {
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------- */
/* 13. CARD GRID                                                           */
/* ---------------------------------------------------------------------- */
.card-section {
  padding: var(--space-2xl) var(--container-pad);
  background: var(--stone-100);
}

.card-section__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.card__media .media-placeholder,
.card__media .media-photo {
  transition: transform var(--dur-slow) var(--ease-out);
}

.card:hover .card__media .media-placeholder,
.card:hover .card__media .media-photo {
  transform: scale(1.06);
}

.card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
}

.card__tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.card__title {
  font-size: 1.2rem;
}

.card__text {
  color: var(--ink-soft);
  font-size: 0.92rem;
  flex-grow: 1;
}

.card__link {
  font-weight: 600;
  color: var(--maroon-700);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.card__link span {
  transition: transform var(--dur-fast) var(--ease-out);
}

.card__link:hover span {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------------- */
/* 14. TESTIMONIALS                                                        */
/* ---------------------------------------------------------------------- */
.testimonials {
  padding: var(--space-2xl) var(--container-pad);
  background: var(--warm-white);
}

.testimonials__inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.testimonial-track__viewport {
  overflow: hidden;
}

.testimonial-track__list {
  display: flex;
  transition: transform var(--dur-med) var(--ease-in-out);
}

.testimonial-slide {
  flex: 0 0 100%;
  padding: 0 var(--space-sm);
}

.testimonial-slide blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.6vw + 0.8rem, 1.65rem);
  font-style: italic;
  color: var(--ink);
  line-height: 1.5;
}

.testimonial-slide footer {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.testimonial-slide__name {
  font-weight: 600;
}

.testimonial-slide__meta {
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}

.testimonial-slide--pending blockquote p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-faint);
}

.testimonial-slide--pending .testimonial-slide__name {
  color: var(--ink-faint);
}

/* Compact single-quote trust block used on service pages (see
   ui.pullQuote) — shares the homepage testimonial's typography so it
   reads as the same design system, without the carousel chrome a lone
   quote doesn't need. */
.pull-quote {
  padding: var(--space-2xl) var(--container-pad);
  background: var(--stone-100);
}

.pull-quote__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.pull-quote__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--gold-400);
  margin-bottom: -0.75rem;
}

.pull-quote__eyebrow {
  justify-content: center;
  margin-bottom: 0.75rem;
}

.pull-quote blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.3vw + 0.8rem, 1.5rem);
  color: var(--ink);
  line-height: 1.55;
}

.pull-quote footer {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.pull-quote__name {
  font-weight: 600;
}

.pull-quote__meta {
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}

.testimonial-track__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: var(--space-md);
}

.testimonial-track__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--maroon-700);
  transition: background var(--dur-fast), color var(--dur-fast);
}

.testimonial-track__btn:hover {
  background: var(--maroon-700);
  color: var(--warm-white);
}

.testimonial-track__dots {
  display: flex;
  gap: 0.5rem;
}

.testimonial-track__dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background var(--dur-fast), transform var(--dur-fast);
}

.testimonial-track__dots button.is-active {
  background: var(--gold-500);
  transform: scale(1.3);
}

/* ---------------------------------------------------------------------- */
/* 15. FAQ ACCORDION                                                       */
/* ---------------------------------------------------------------------- */
.faq {
  padding: var(--space-2xl) var(--container-pad);
  background: var(--stone-100);
}

.faq__inner {
  max-width: 780px;
  margin: 0 auto;
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.faq__icon {
  flex-shrink: 0;
  color: var(--gold-600);
  transition: transform var(--dur-fast) var(--ease-out);
}

.faq__question[aria-expanded="true"] .faq__icon {
  transform: rotate(45deg);
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-out);
}

.faq__answer p {
  padding-bottom: 1.35rem;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ---------------------------------------------------------------------- */
/* 16. CTA BAND / QUOTE BAND                                               */
/* ---------------------------------------------------------------------- */
.cta-band {
  padding: var(--space-2xl) var(--container-pad);
  text-align: center;
  color: var(--warm-white);
  background: linear-gradient(150deg, var(--maroon-800), var(--maroon-900));
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 60% at 50% 0%, rgba(201, 162, 39, 0.16), transparent 70%);
}

.cta-band--charcoal {
  background: linear-gradient(150deg, var(--charcoal-800), var(--charcoal-900));
}

.cta-band__inner {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.cta-band__title {
  font-size: var(--fs-h2);
  color: var(--warm-white);
}

.cta-band__sub {
  color: rgba(253, 251, 246, 0.78);
  font-size: var(--fs-lg);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 0.75rem;
}

.quote-band {
  padding: var(--space-2xl) var(--container-pad);
  background: var(--stone-100);
  text-align: center;
}

.quote-band__inner {
  max-width: 760px;
  margin: 0 auto;
}

.quote-band__mark {
  color: var(--gold-500);
  margin: 0 auto 1rem;
}

.quote-band__quote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.8vw + 1rem, 2rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--maroon-800);
}

.quote-band__attr {
  margin-top: 1.25rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------- */
/* 17. FORT GORDON (military page)                                         */
/* ---------------------------------------------------------------------- */
.fort-gordon {
  background: var(--charcoal-900);
  color: var(--warm-white);
  padding: var(--space-2xl) var(--container-pad);
}

.fort-gordon__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.fort-gordon__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.fort-gordon__art {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(135deg, var(--maroon-800) 0 3px, var(--charcoal-800) 3px 46px),
    radial-gradient(circle at 30% 30%, rgba(201, 162, 39, 0.35), transparent 60%);
}

.fort-gordon__content .split__title,
.fort-gordon__content .split__text {
  color: var(--warm-white);
}

.fort-gordon__content .split__text {
  color: rgba(253, 251, 246, 0.78);
}

.fort-gordon__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.fort-gordon__list li {
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: rgba(253, 251, 246, 0.05);
  border: 1px solid rgba(253, 251, 246, 0.1);
}

.fort-gordon__list span {
  display: block;
  font-weight: 600;
  color: var(--gold-400);
  margin-bottom: 0.25rem;
}

.fort-gordon__list p {
  font-size: 0.88rem;
  color: rgba(253, 251, 246, 0.72);
}

.fort-gordon__note {
  font-size: 0.82rem;
  font-style: italic;
  color: rgba(253, 251, 246, 0.6);
  margin: -0.5rem 0 1.5rem;
}

/* BAH info band */
.bah-info {
  padding: var(--space-2xl) var(--container-pad);
  background: var(--stone-100);
}

.bah-info__inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.bah-info__text {
  color: var(--ink-soft);
  font-size: var(--fs-lg);
  margin-bottom: 0.5rem;
}

/* PCS checklist download CTA */
.checklist-cta {
  padding: var(--space-2xl) var(--container-pad);
  text-align: center;
  background: linear-gradient(150deg, var(--charcoal-800), var(--maroon-900));
  color: var(--warm-white);
}

.checklist-cta__inner {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.checklist-cta__icon {
  color: var(--gold-400);
  margin-bottom: 0.5rem;
}

.checklist-cta__text {
  color: rgba(253, 251, 246, 0.78);
  margin-bottom: 0.75rem;
}

/* ---------------------------------------------------------------------- */
/* 18. LISTINGS + FILTERS (spotlight)                                      */
/* ---------------------------------------------------------------------- */
.listings {
  padding: var(--space-2xl) var(--container-pad);
}

.listings__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.listings__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.filter-btn {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: all var(--dur-fast) var(--ease-out);
}

.filter-btn:hover {
  border-color: var(--maroon-700);
  color: var(--maroon-700);
}

.filter-btn.is-active {
  background: var(--maroon-700);
  border-color: var(--maroon-700);
  color: var(--warm-white);
}

.listings__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.listing-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), opacity var(--dur-med), display var(--dur-med) allow-discrete;
}

.listing-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.listing-card.is-hidden {
  display: none;
}

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

.listing-card__media .media-placeholder {
  transition: transform var(--dur-slow) var(--ease-out);
}

.listing-card:hover .listing-card__media .media-placeholder {
  transform: scale(1.06);
}

.listing-card__sample-tag {
  position: absolute;
  bottom: 0.85rem;
  left: 0.85rem;
  right: 0.85rem;
  background: rgba(28, 20, 15, 0.72);
  color: var(--warm-white);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}

.listing-card__status {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background: rgba(28, 20, 15, 0.72);
  color: var(--gold-300);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}

.listing-card__save {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(253, 251, 246, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--maroon-700);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast);
}

.listing-card__save:hover {
  transform: scale(1.1);
}

.listing-card__save.is-saved {
  color: var(--gold-600);
}

.listing-card__save.is-saved svg {
  fill: currentColor;
}

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

.listing-card__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.listing-card__price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--maroon-800);
}

.listing-card__area {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.listing-card__title {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.listing-card__facts {
  display: flex;
  gap: 0.9rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.listing-card__price--pending {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-faint);
}

.listing-card__pending-note {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}

.listings__empty {
  text-align: center;
  padding: var(--space-lg) 0;
  color: var(--ink-soft);
}

.listings__empty a {
  color: var(--maroon-700);
  font-weight: 600;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------- */
/* 19. COMMUNITIES GRID                                                    */
/* ---------------------------------------------------------------------- */
.communities {
  padding: var(--space-2xl) var(--container-pad);
  background: var(--stone-100);
}

.communities__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.communities__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.community-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.community-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.community-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}


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

.community-card__title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.community-card__text {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.community-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.community-card__tags li {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--maroon-700);
  background: var(--stone-200);
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
}

/* ---------------------------------------------------------------------- */
/* 20. VALUES + TEAM (about)                                               */
/* ---------------------------------------------------------------------- */
.values {
  padding: var(--space-2xl) var(--container-pad);
}

.values__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.values__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.value-card {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.value-card:hover {
  border-color: var(--gold-500);
  box-shadow: var(--shadow-sm);
}

.value-card__num {
  font-family: var(--font-display);
  color: var(--gold-500);
  font-size: 1.3rem;
  display: block;
  margin-bottom: 0.6rem;
}

.value-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.value-card p {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.team {
  padding: var(--space-2xl) var(--container-pad);
  background: var(--stone-100);
}

.team__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.team__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.team-card {
  text-align: center;
}

.team-card__photo {
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 0 auto 1rem;
  max-width: 160px;
  box-shadow: var(--shadow-sm);
}

.team-card__name {
  font-size: 1.05rem;
}

.team-card__role {
  color: var(--maroon-700);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.2rem 0;
}

.team-card--full {
  display: flex;
  flex-direction: column;
  background: var(--warm-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  box-shadow: var(--shadow-sm);
}

.team-card__bio {
  text-align: left;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-top: 0.75rem;
}

.team-card__credentials {
  text-align: left;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.6;
  margin-top: 0.5rem;
  padding-left: 1.1rem;
}

.team-card__contact {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.86rem;
}

.team-card__contact a {
  color: var(--maroon-700);
  font-weight: 500;
}

.team-card__contact a:hover {
  color: var(--maroon-900);
}

.team-card__license {
  color: var(--ink-faint);
  font-size: 0.76rem;
}

.team-card__tag {
  color: var(--ink-faint);
  font-size: 0.8rem;
}

/* ---------------------------------------------------------------------- */
/* 21. CONTACT FORM                                                        */
/* ---------------------------------------------------------------------- */
.contact-section {
  padding: var(--space-2xl) var(--container-pad) var(--space-3xl);
}

.contact-section__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

.contact-form-wrap__sub {
  color: var(--ink-soft);
  margin: 0.75rem 0 var(--space-lg);
  max-width: 46ch;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.field input,
.field select,
.field textarea {
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: 0.95rem;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--maroon-700);
  box-shadow: 0 0 0 4px rgba(100, 21, 51, 0.08);
  outline: none;
}

.field textarea {
  resize: vertical;
  min-height: 120px;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--color-error);
}

.field__error {
  font-size: 0.78rem;
  color: var(--color-error);
  min-height: 1em;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.checkbox input {
  margin-top: 0.2rem;
  width: 16px;
  height: 16px;
  accent-color: var(--maroon-700);
}

.contact-form button[type="submit"] {
  margin-top: 0.5rem;
}

.contact-form.is-submitting .btn__label {
  opacity: 0;
}

.contact-form.is-submitting .btn__spinner {
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(253, 251, 246, 0.4);
  border-top-color: var(--warm-white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.contact-form__privacy {
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align: center;
}

.contact-form__success {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  background: var(--stone-100);
  border-radius: var(--radius-md);
}

.contact-form__success svg {
  color: var(--gold-600);
  margin: 0 auto 1rem;
}

.contact-form__success h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.contact-form__success p {
  color: var(--ink-soft);
  max-width: 40ch;
  margin: 0 auto;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-info__card {
  background: var(--charcoal-900);
  color: var(--warm-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.contact-info__card h3 {
  color: var(--gold-400);
  font-size: 1rem;
}

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: rgba(253, 251, 246, 0.85);
  transition: color var(--dur-fast);
}

a.contact-info__item:hover {
  color: var(--gold-300);
}

.contact-info__item svg {
  flex-shrink: 0;
  color: var(--gold-500);
  margin-top: 0.1rem;
}

.contact-info__map {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.contact-info__map-art {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(0deg, var(--stone-300) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--stone-300) 0 1px, transparent 1px 40px), var(--stone-100);
  position: relative;
}

.contact-info__map-art::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -100%);
  background: var(--maroon-700);
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  box-shadow: 0 0 0 6px rgba(100, 21, 51, 0.15);
}

.contact-info__team {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.contact-info__team h3 {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.contact-directory {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-directory__item {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.contact-directory__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.contact-directory__name {
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.5rem;
}

.contact-directory__name span {
  display: block;
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.82rem;
  margin-top: 0.1rem;
}

.contact-directory__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.contact-info__quick {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.contact-info__quick h3 {
  font-size: 0.95rem;
  margin-bottom: 0.85rem;
}

.contact-info__quick ul {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.contact-info__quick a {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--maroon-700);
}

.contact-info__quick a:hover {
  color: var(--maroon-900);
}

/* ---------------------------------------------------------------------- */
/* 22. FOOTER                                                              */
/* ---------------------------------------------------------------------- */
.site-footer {
  background: var(--charcoal-900);
  color: rgba(253, 251, 246, 0.85);
}

.footer__pre {
  background: linear-gradient(150deg, var(--maroon-800), var(--maroon-900));
  padding: var(--space-xl) var(--container-pad);
  text-align: center;
}

.footer__pre-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.footer__pre-eyebrow {
  color: var(--gold-300);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer__pre-heading {
  font-size: var(--fs-h2);
  color: var(--warm-white);
}

.footer__main {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-2xl) var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.brand__logo-chip--footer {
  padding: 0.6rem 1rem;
}

.brand__logo-chip--footer .logo-image {
  max-height: 58px;
}

.footer__tagline {
  margin-top: 0.85rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-300);
}

.footer__desc {
  margin: 0.6rem 0 1.25rem;
  font-size: 0.9rem;
  max-width: 40ch;
  color: rgba(253, 251, 246, 0.65);
}

.footer__social {
  display: flex;
  gap: 0.75rem;
}

.footer__social-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(253, 251, 246, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}

a.footer__social-link:hover {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--maroon-900);
}

.footer__social-link.is-disabled {
  opacity: 0.35;
  cursor: default;
}

/* Marks a value that hasn't been verified yet — visible enough to flag
   for follow-up, quiet enough not to look broken. */
.is-placeholder {
  font-style: italic;
  opacity: 0.65;
  text-decoration: underline dashed rgba(253, 251, 246, 0.4);
  text-underline-offset: 3px;
}

.nav__phone--placeholder,
.mobnav__phone--placeholder {
  opacity: 0.6;
  cursor: default;
  font-style: italic;
}

.nav__phone--placeholder:hover {
  transform: none;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.footer__heading {
  color: var(--gold-400);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer__links a {
  font-size: 0.9rem;
  color: rgba(253, 251, 246, 0.7);
  transition: color var(--dur-fast);
}

.footer__links a:hover {
  color: var(--gold-300);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer__contact address {
  font-size: 0.9rem;
  color: rgba(253, 251, 246, 0.7);
  margin-bottom: 0.4rem;
}

.footer__contact a {
  font-size: 0.9rem;
  color: rgba(253, 251, 246, 0.7);
  transition: color var(--dur-fast);
}

.footer__contact a:hover {
  color: var(--gold-300);
}

.footer__office {
  margin-bottom: 0.5rem;
}

.footer__office-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 0.2rem;
}

.footer__bottom {
  border-top: 1px solid rgba(253, 251, 246, 0.1);
  padding: var(--space-md) var(--container-pad);
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: 0.78rem;
  color: rgba(253, 251, 246, 0.5);
}

.footer__legal-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer__legal {
  max-width: 68ch;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------- */
/* 23. MEDIA PLACEHOLDERS                                                  */
/* Every image slot on the site is a professional-photography placeholder */
/* — a labeled frame, not a decorative graphic pretending to be a photo.  */
/* Swap the parent's background-image in production; this block can stay. */
/* ---------------------------------------------------------------------- */
.media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1.25rem;
  position: relative;
  color: rgba(253, 251, 246, 0.82);
}

.media-placeholder::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(253, 251, 246, 0.28);
  border-radius: calc(var(--radius-md) - 8px);
  pointer-events: none;
}

.media-placeholder__icon {
  display: inline-flex;
  opacity: 0.85;
}

.media-placeholder__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 16ch;
  opacity: 0.85;
}

.media-placeholder__label:empty {
  display: none;
}

.media-placeholder--1 {
  background: linear-gradient(150deg, var(--maroon-600), var(--maroon-900));
}

.media-placeholder--2 {
  background: linear-gradient(150deg, var(--wood-500), var(--charcoal-800));
}

.media-placeholder--3 {
  background: linear-gradient(150deg, var(--charcoal-700), var(--maroon-800));
  color: rgba(253, 251, 246, 0.9);
}

.media-placeholder--4 {
  background: linear-gradient(150deg, var(--charcoal-600), var(--maroon-800));
}

/* Team headshots sit inside a circular frame — fill it edge to edge and
   drop the dashed inset (the parent circle already reads as a frame). */
.team-card__photo {
  overflow: hidden;
}

.team-card__photo .media-placeholder {
  padding: 0;
}

.team-card__photo .media-placeholder::before {
  inset: 6px;
  border-radius: 50%;
}

.team-card__photo .media-placeholder__icon svg {
  width: 34px;
  height: 34px;
}

.team-card__photo-note {
  font-size: 0.72rem;
  color: var(--ink-faint);
  font-style: italic;
}

/* Real approved photography (headshots, brand logos) — fills the same
   frames the placeholder system uses, so no layout differs between a
   verified photo and a pending placeholder slot. */
.media-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.logo-image {
  display: block;
  height: auto;
  max-width: 100%;
}

.card__media--image,
.split__media--image {
  background: var(--stone-100);
}

/* Logos must never be cropped/distorted — contain + padding instead of
   the cover-crop treatment used for real photography. */
.card__media--contain,
.split__media--contain {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.card__media--contain .media-photo,
.split__media--contain .media-photo {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.card:hover .card__media--contain .media-photo {
  transform: none;
}

/* Compliance / brand-logo strip — footer + about page brokerage card */
.logo-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}

.logo-band .logo-image {
  max-height: 46px;
  width: auto;
}

/* Footer background is dark charcoal, and several compliance marks are
   solid black with transparent backgrounds — rather than recoloring the
   official logos (not permitted), each sits on its own small light
   backing chip so it stays legible without altering the mark itself. */
.logo-band--footer {
  padding-top: var(--space-md);
  margin-top: var(--space-md);
  border-top: 1px solid rgba(253, 251, 246, 0.14);
  gap: var(--space-sm);
}

.logo-band--footer .logo-chip {
  display: inline-flex;
  align-items: center;
  background: var(--warm-white);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.85rem;
}

.logo-band--footer .logo-image {
  max-height: 28px;
}

/* ---------------------------------------------------------------------- */
/* 24. SCROLL-REVEAL ANIMATION SYSTEM                                      */
/* ---------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--stagger, 0) * 90ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero__content [data-reveal] {
  transition-delay: calc(var(--stagger, 0) * 90ms + 120ms);
}

/* ---------------------------------------------------------------------- */
/* 26. RESPONSIVE BREAKPOINTS                                              */
/* ---------------------------------------------------------------------- */
@media (min-width: 640px) {
  .stat-band__inner {
    grid-template-columns: repeat(4, 1fr);
  }

  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }

  .team__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

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

  .communities__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .values__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .listings__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .nav {
    display: block;
  }

  .nav__phone {
    display: inline-flex;
  }

  .mobnav__toggle {
    display: none;
  }

  /* Perfectly centered navigation: a 3-column grid with equal-width
     outer tracks (1fr/auto/1fr) keeps the nav's center point mathematically
     locked to the CENTER of .site-header__inner — and since that container
     itself is centered in the viewport via margin:0 auto, the nav ends up
     centered in the actual browser viewport, not just "between" whatever
     the left/right clusters happen to measure (a plain flex space-between
     could not guarantee that once the two side clusters differ in width,
     which is exactly what changed when the header went from two logos to
     one). */
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .header-brand {
    justify-self: start;
  }

  .nav {
    justify-self: center;
  }

  .site-header__actions {
    justify-self: end;
  }

  .split,
  .fort-gordon__inner {
    grid-template-columns: 1fr 1fr;
  }

  .split--reverse {
    direction: ltr;
  }

  .split--reverse .split__media {
    order: 2;
  }

  .contact-section__inner {
    grid-template-columns: 1.3fr 1fr;
  }
}

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

  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .values__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .communities__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .listings__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .team__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  :root {
    --header-h: 92px;
  }
}

@media (max-width: 899px) {
  .site-header.is-scrolled {
    height: 68px;
  }
}