/* ==========================================================================
   Texas RV Center — site styles
   Consumes assets/css/tokens.css. No framework, no runtime dependencies.

   Scope mode is VISUAL_RECON. The source's structure and identity — red
   statement headings, navy rules, centred body, four equal feature cards — are
   reproduced. What is raised here is CRAFT: type scale and rhythm, a real
   elevation system, refined controls, and consistent interaction states.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: "Source Sans Pro";
  src: url("/assets/fonts/source-sans-pro-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/assets/fonts/source-sans-pro-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/assets/fonts/source-sans-pro-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Local additions to the token set ------------------------------------- */
:root {
  --navy-tint: rgba(0, 38, 82, 0.055);
  --navy-tint-strong: rgba(0, 38, 82, 0.10);
  --navy-deep: #001730;
  --surface-soft: #f5f6f8;

  /* Softer and larger than a typical UI shadow — high-contrast drop shadows
     read as cheap at this scale. */
  --elev-1: 0 1px 2px rgba(0, 24, 55, 0.04), 0 2px 8px rgba(0, 24, 55, 0.05);
  --elev-2: 0 2px 6px rgba(0, 24, 55, 0.05), 0 14px 34px rgba(0, 24, 55, 0.08);
  --elev-3: 0 6px 14px rgba(0, 24, 55, 0.07), 0 28px 60px rgba(0, 24, 55, 0.13);

  --section-y: clamp(76px, 9.5vw, 132px);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--color-navy); color: var(--color-white); }

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

h1, h2, h3 { margin: 0 0 var(--space-4); color: var(--color-navy); text-wrap: balance; }
p { margin: 0 0 var(--space-5); }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: var(--weight-bold); color: var(--color-navy); }

a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-link-hover); }

/* --- Utilities ------------------------------------------------------------ */
.container {
  width: 100%; max-width: var(--container-max);
  margin-inline: auto; padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--color-navy); color: var(--color-white);
  padding: var(--space-3) var(--space-5); font-weight: var(--weight-semibold);
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus { top: 0; color: var(--color-white); }

/* The source's signature: a large red statement heading with a navy rule
   centred beneath it, opening each major section. */
.statement {
  max-width: 46rem; margin: 0 auto var(--space-6);
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: -0.019em;
  color: var(--color-red);
  text-align: center;
}
.rule {
  display: block; width: min(420px, 58%); height: 2px;
  margin: 0 auto var(--space-8);
  background: linear-gradient(90deg,
    rgba(0, 38, 82, 0.15) 0%, var(--color-navy) 22%,
    var(--color-navy) 78%, rgba(0, 38, 82, 0.15) 100%);
}

.prose--centered { max-width: 40rem; margin-inline: auto; text-align: center; }
.prose--centered p { margin-bottom: var(--space-5); }
.prose--centered p:last-child { margin-bottom: 0; }

.section { padding-block: var(--section-y); }
.section--features {
  background: linear-gradient(165deg, var(--color-navy) 0%, var(--navy-deep) 100%);
}
.section--testimonials { background: var(--surface-soft); }
.section--contact { background: var(--surface-soft); }

.section__title {
  margin-bottom: var(--space-8);
  font-size: clamp(1.7rem, 3.1vw, 2.4rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.018em;
  text-align: center;
}

/* --- Utility bar ---------------------------------------------------------- */
.utility {
  background: var(--color-navy); color: rgba(255, 255, 255, 0.92);
  font-size: 0.75rem; font-weight: var(--weight-semibold);
  letter-spacing: 0.09em; text-transform: uppercase;
}
.utility__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); min-height: 46px;
}
.utility__phone {
  color: var(--color-white); text-decoration: none; white-space: nowrap;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.utility__phone:hover { color: var(--color-white); opacity: 0.82; }
.utility__address { margin: 0; }
@media (max-width: 767px) {
  .utility__address { display: none; }
  .utility__inner { justify-content: center; }
}

/* --- Header --------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 40;
  background: var(--color-white);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.header[data-scrolled] { box-shadow: var(--elev-1); }
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); min-height: 86px;
}
.header__logo { display: flex; align-items: center; flex: none; min-height: 44px; }
.header__logo img { width: clamp(178px, 17vw, 232px); height: auto; }

.header__toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--color-navy);
}
.header__toggle-box { position: relative; display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.header__toggle-box::before, .header__toggle-box::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--duration-base) var(--ease-standard), top var(--duration-base) var(--ease-standard);
}
.header__toggle-box::before { top: -7px; }
.header__toggle-box::after { top: 7px; }
.header__toggle[aria-expanded="true"] .header__toggle-box { background: transparent; }
.header__toggle[aria-expanded="true"] .header__toggle-box::before { top: 0; transform: rotate(45deg); }
.header__toggle[aria-expanded="true"] .header__toggle-box::after { top: 0; transform: rotate(-45deg); }

/* --- Nav ------------------------------------------------------------------ */
.nav { display: flex; align-items: center; gap: var(--space-7); }
.nav__list { display: flex; align-items: center; gap: var(--space-6); }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.75rem; font-weight: var(--weight-bold);
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--color-navy); text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
/* Underline drawn on a pseudo-element so it can animate from the centre
   without shifting the link's box. */
.nav__link::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 12px;
  height: 2px; background: var(--color-red);
  transition: left var(--duration-base) var(--ease-standard), right var(--duration-base) var(--ease-standard);
}
.nav__link:hover { color: var(--color-red); }
.nav__link:hover::after { left: 0; right: 0; }
.nav__link[aria-current="true"] { color: var(--color-red); }
.nav__link[aria-current="true"]::after { left: 0; right: 0; }

.header__social { display: flex; align-items: center; gap: var(--space-2); }
.header__social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  color: var(--color-red); border-radius: 50%;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.header__social a:hover { background: rgba(163, 30, 33, 0.08); color: var(--color-red-dark); }

/* The source header has no phone button — the utility bar carries the call
   action. The button appears only inside the mobile drawer, where the utility
   bar has collapsed to a single line. Specificity is raised deliberately:
   `.btn` is declared later at equal specificity and would otherwise win. */
.nav .nav__cta { display: none; }

@media (max-width: 1023px) {
  .nav { flex-wrap: wrap; justify-content: flex-end; gap: var(--space-4); }
  .nav__list { flex-wrap: wrap; gap: var(--space-4); }

  .js .header__toggle { display: inline-flex; }
  .js .nav {
    position: fixed; inset: 0 0 0 auto; width: min(330px, 86vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: var(--space-4);
    padding: calc(86px + var(--space-6)) var(--space-6) var(--space-6);
    background: var(--color-white);
    box-shadow: var(--elev-3);
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--duration-base) var(--ease-entrance), visibility var(--duration-base);
  }
  .js .nav[data-open] { transform: translateX(0); visibility: visible; }
  .js .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .js .nav__link {
    padding: var(--space-4) 0; font-size: 1.0625rem; letter-spacing: 0.02em;
    text-transform: none; border-bottom: 1px solid var(--color-border);
  }
  .js .nav__link::after { display: none; }
  .js .header__social { justify-content: flex-start; margin-top: var(--space-2); }
  .js .nav .nav__cta { display: inline-flex; }
  body[data-nav-open] { overflow: hidden; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .js .nav { transition: visibility var(--duration-base); transform: none; opacity: 0; }
  .js .nav[data-open] { opacity: 1; }
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 14px 34px;
  font-family: inherit; font-size: 0.75rem; font-weight: var(--weight-bold);
  letter-spacing: 0.11em; text-transform: uppercase;
  text-decoration: none; border: 2px solid transparent;
  border-radius: 3px; cursor: pointer;
  box-shadow: var(--elev-1);
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.btn--primary { background: var(--color-red); color: var(--color-white); }
.btn--primary:hover {
  background: var(--color-red-dark); color: var(--color-white);
  box-shadow: var(--elev-2); transform: translateY(-1px);
}
.btn:active { transform: translateY(1px); box-shadow: var(--elev-1); transition-duration: var(--duration-instant); }
/* Secondary hero action. Was referenced in the markup but its rule was lost in
   the polish rewrite, leaving brand red text on the navy panel — a real
   contrast failure, not a style nit. */
.btn--ghost {
  background: transparent; color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.55); box-shadow: none;
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12); color: var(--color-white);
  border-color: var(--color-white); box-shadow: none;
}

.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--color-bg-alt); color: var(--color-text-muted);
  border-color: transparent; cursor: not-allowed; box-shadow: none; transform: none;
}
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } }

/* --- Hero -----------------------------------------------------------------
   Taller, with a graded scrim under the panel so the navy sits ON the
   photograph rather than beside it, and a wider type scale. */
.hero { position: relative; background: var(--color-navy); overflow: hidden; }
.hero__media img {
  width: 100%; height: clamp(460px, 52vw, 680px);
  object-fit: cover; object-position: 30% 55%;
}
.hero__panel {
  position: absolute; inset-block: 0;
  inset-inline-end: clamp(0px, 7vw, 120px);
  width: 44%; min-width: 360px;
  display: flex; align-items: center;
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--navy-deep) 100%);
  padding: var(--space-8) clamp(28px, 3.4vw, 52px);
}
.hero__panel-inner { position: relative; max-width: 25rem; color: var(--color-white); }

.hero__eyebrow {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-5);
  font-size: 0.6875rem; font-weight: var(--weight-bold);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.hero__eyebrow-rule { display: block; width: 30px; height: 1px; background: rgba(255, 255, 255, 0.5); }

.hero__title {
  margin: 0 0 var(--space-5); color: var(--color-white);
  font-size: clamp(2.1rem, 4vw, 3.25rem);
  font-weight: var(--weight-bold); line-height: 1.06;
  letter-spacing: -0.025em; text-wrap: balance;
}
.hero__sub {
  margin: 0 0 var(--space-7);
  font-size: 1.0625rem; line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 899px) {
  .hero { display: flex; flex-direction: column; }
  .hero__media img { height: clamp(260px, 50vw, 380px); }
  .hero__panel {
    position: static; inset-inline-end: auto; width: 100%; min-width: 0;
    padding: var(--space-8) var(--gutter);
  }
  .hero__panel-inner { max-width: none; }
}

/* --- Stats strip ---------------------------------------------------------- */
.stats { background: var(--color-white); border-bottom: 1px solid var(--color-border); }
.stats__inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: clamp(28px, 3.6vw, 44px);
}
@media (max-width: 767px) { .stats__inner { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); } }

.stat {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; padding-inline: var(--space-4);
  border-right: 1px solid var(--color-border);
}
.stat:last-child { border-right: 0; }
@media (max-width: 767px) {
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
}
.stat__num {
  font-size: clamp(1.85rem, 3.2vw, 2.5rem); font-weight: var(--weight-bold);
  line-height: 1; letter-spacing: -0.03em; color: var(--color-navy);
}
.stat__plus, .stat__unit {
  font-size: 0.5em; font-weight: var(--weight-bold);
  color: var(--color-red); margin-left: 2px; vertical-align: super;
}
.stat__unit { vertical-align: baseline; margin-left: 3px; }
.stat__label {
  font-size: 0.6875rem; font-weight: var(--weight-bold);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-text-muted);
}

/* --- Aerial band ---------------------------------------------------------- */
.aerial { position: relative; background: var(--navy-deep); }
.aerial__media img {
  width: 100%; height: clamp(300px, 34vw, 460px);
  object-fit: cover; opacity: 0.92;
}
.aerial__overlay {
  position: absolute; inset: auto 0 0 0;
  padding-block: clamp(28px, 4vw, 52px);
  background: linear-gradient(180deg, rgba(0, 23, 48, 0) 0%, rgba(0, 23, 48, 0.82) 60%, rgba(0, 23, 48, 0.92) 100%);
  color: var(--color-white);
}
.aerial__kicker {
  margin: 0 0 var(--space-2);
  font-size: 0.6875rem; font-weight: var(--weight-bold);
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
}
.aerial__claim {
  margin: 0; max-width: 34rem;
  font-size: clamp(1.125rem, 2.1vw, 1.6rem); font-weight: var(--weight-semibold);
  line-height: 1.35; letter-spacing: -0.014em; text-wrap: balance;
}

/* --- Intro ---------------------------------------------------------------- */
.reserve {
  margin: var(--space-8) auto var(--space-5);
  font-size: clamp(1.0625rem, 1.8vw, 1.375rem);
  font-weight: var(--weight-bold); color: var(--color-red);
  line-height: 1.45; text-align: center; text-wrap: balance;
}
.reserve a {
  color: inherit; text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid rgba(163, 30, 33, 0.28);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.reserve a:hover { border-bottom-color: currentColor; }

.payment {
  max-width: 40rem; margin: 0 auto;
  font-size: 0.8125rem; font-style: italic; line-height: 1.7;
  color: var(--color-text-muted); text-align: center;
}

/* --- Feature cards --------------------------------------------------------
   Four equal white cards, as the source has them. An earlier build split
   these into product and attribute variants; the translucent attribute cards
   read as muddy and disabled beside the white ones. */
.section--features .section__title { color: var(--color-white); }
.cards { display: grid; gap: var(--space-5); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .cards { grid-template-columns: 1fr; } }

.card {
  background: var(--color-white); border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: var(--elev-2);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--elev-3); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }

/* Icon sits in a soft navy disc — reads as a considered element rather than a
   line drawing floating in whitespace. */
.card__icon {
  color: var(--color-navy);
  width: 46px; height: 46px;
  padding: 13px; box-sizing: content-box;
  background: var(--navy-tint); border-radius: 50%;
  margin-bottom: var(--space-6);
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.card:hover .card__icon { background: var(--color-navy); color: var(--color-white); }
.card__title {
  margin: 0 0 var(--space-3);
  font-size: 1.125rem; font-weight: var(--weight-bold);
  letter-spacing: -0.005em;
}
.card p { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--color-text-muted); }
.card p strong { color: var(--color-navy); }

/* --- Owners --------------------------------------------------------------- */
/* Owners stays white: testimonials directly below it use --surface-soft, and
   two adjacent soft-grey bands merge into one undifferentiated block. The
   alternation is white / navy / white / soft / soft, matching the source. */
.owners {
  display: grid; gap: clamp(36px, 5vw, 72px);
  grid-template-columns: 1fr 1.08fr; align-items: center;
}
@media (max-width: 899px) { .owners { grid-template-columns: 1fr; } }

.owners__text { margin: 0; }
.owners__lead {
  font-size: 1.1875rem; line-height: 1.6; color: var(--color-navy);
  font-weight: var(--weight-semibold);
}
.owners__text p { margin-bottom: var(--space-5); color: var(--color-text-muted); }
.owners__text p.owners__lead { color: var(--color-navy); }

/* Signature block — gives the section a human sign-off rather than ending on
   a stray sentence. */
.owners__signature {
  display: flex; flex-direction: column; gap: 2px;
  margin: var(--space-6) 0 0; padding-left: var(--space-5);
  border-left: 3px solid var(--color-red);
}
.owners__names {
  font-size: 1.0625rem; font-weight: var(--weight-bold); color: var(--color-navy);
}
.owners__role {
  font-size: 0.6875rem; font-weight: var(--weight-bold);
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--color-text-muted);
}

/* Video sits on an offset navy block — a small amount of depth so the media
   reads as placed rather than dropped in. */
.owners__media { position: relative; margin: 0; }
.owners__media::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  background: var(--navy-tint); border-radius: 10px; z-index: 0;
}
.owners__media .video { position: relative; z-index: 1; }
@media (max-width: 899px) { .owners__media::before { inset: 14px -14px -14px 14px; } }

/* --- Video facade --------------------------------------------------------- */
.video {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--color-navy); overflow: hidden;
  border-radius: 14px; box-shadow: var(--elev-3);
}
.video__button {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.video__thumb {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-standard);
}
.video__button:hover .video__thumb { transform: scale(1.02); }
.video__play {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 70px; height: 70px;
  border-radius: 50%; background: var(--color-red); color: var(--color-white);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: background-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.video__button:hover .video__play { background: var(--color-red-dark); transform: translate(-50%, -50%) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .video__button:hover .video__thumb { transform: none; }
  .video__button:hover .video__play { transform: translate(-50%, -50%); }
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Testimonials --------------------------------------------------------- */
.quotes { display: grid; gap: var(--space-5); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 899px) { .quotes { grid-template-columns: 1fr; } }
.quote {
  margin: 0; height: 100%;
  background: var(--color-white); border-radius: 14px;
  padding: var(--space-8) var(--space-6) var(--space-7);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: var(--elev-1);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.quote:hover { box-shadow: var(--elev-2); }
.quote::before {
  content: "\201C"; display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.5rem; line-height: 0.7; color: var(--color-red);
  margin-bottom: var(--space-4);
}
.quote blockquote { margin: 0 0 var(--space-5); }
.quote blockquote p {
  margin: 0; font-size: 0.9375rem; font-style: italic; line-height: 1.75;
  color: var(--color-text);
}
.quote__rule { display: block; width: 32px; height: 1px; background: var(--color-border); margin-bottom: var(--space-4); }
.quote figcaption { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-1); }
.quote__name { font-size: 1.0625rem; font-weight: var(--weight-semibold); color: var(--color-navy); }
.quote__place {
  font-size: 0.6875rem; font-weight: var(--weight-bold);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted);
}

/* --- Contact -------------------------------------------------------------- */
.section__lead {
  max-width: 40rem; margin: 0 auto var(--space-8);
  text-align: center; font-size: 1.0625rem; line-height: 1.7;
  color: var(--color-text-muted);
}

.contact {
  display: grid; gap: clamp(28px, 4vw, 52px);
  grid-template-columns: 1.15fr 1fr; align-items: start;
}
@media (max-width: 899px) { .contact { grid-template-columns: 1fr; } }

.contact__card {
  background: var(--color-white); border-radius: 14px;
  padding: clamp(24px, 3.4vw, 40px);
  box-shadow: var(--elev-2);
}

/* Contact details as icon rows — replaces a stack of <br>-separated red text,
   which read as a dated block rather than scannable information. */
.contact__info { display: flex; flex-direction: column; gap: var(--space-6); }

.infolist {
  background: var(--color-white); border-radius: 14px;
  padding: var(--space-3) clamp(20px, 2.6vw, 28px);
  box-shadow: var(--elev-2);
}
.infolist__item {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.infolist__item:last-child { border-bottom: 0; }
.infolist__icon {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy-tint); color: var(--color-navy);
}
.infolist__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.infolist__label {
  font-size: 0.6875rem; font-weight: var(--weight-bold);
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--color-text-muted);
}
.infolist__value {
  font-size: 1.0625rem; font-weight: var(--weight-semibold);
  color: var(--color-navy); font-style: normal; line-height: 1.45;
  text-decoration: none;
}
a.infolist__value:hover { color: var(--color-red); text-decoration: underline; }
.infolist__value--plain { font-weight: var(--weight-regular); font-size: 1rem; }
.infolist__note { font-size: 0.8125rem; color: var(--color-text-muted); }
.infolist__link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  font-size: 0.8125rem; font-weight: var(--weight-bold);
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
}
.infolist__link svg { transition: transform var(--duration-fast) var(--ease-standard); }
.infolist__link:hover { text-decoration: underline; }
.infolist__link:hover svg { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .infolist__link:hover svg { transform: none; } }

.contact__map-frame:empty { display: none; }
.contact__map iframe {
  width: 100%; height: 300px; border: 0;
  border-radius: 14px; background: var(--color-white);
  box-shadow: var(--elev-2);
}
.contact__map-fallback { margin: 0; font-weight: var(--weight-semibold); }

/* --- Form ----------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); grid-template-columns: 1fr 1fr; }
@media (max-width: 599px) { .form__row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label {
  font-size: 0.6875rem; font-weight: var(--weight-bold);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-navy);
}
.req { color: var(--color-red); }

.field input, .field textarea {
  font-family: inherit; font-size: 1rem; color: var(--color-text);
  min-height: 50px; padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border-control);
  border-radius: 4px;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.field input:hover, .field textarea:hover { border-color: var(--color-navy); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--color-navy);
  box-shadow: 0 0 0 3px var(--navy-tint-strong);
}
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px rgba(163, 30, 33, 0.10);
}

.field__error { margin: 0; font-size: 0.8125rem; color: var(--color-red); font-weight: var(--weight-semibold); }
.form__required-note { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.form__submit { align-self: flex-start; }
.form__status { margin: 0; font-weight: var(--weight-semibold); }
.form__status[data-state="error"] { color: var(--color-red); }
.form__status[data-state="success"] { color: var(--color-navy); }
.form[data-submitting] .form__submit {
  background: var(--color-bg-alt); color: var(--color-text-muted);
  pointer-events: none; box-shadow: none;
}

/* Honeypot: out of view and out of the accessibility tree, but still a real
   focusable input so naive bots fill it. Not display:none — some bots skip
   those. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Footer ---------------------------------------------------------------
   Columns are left-aligned rather than centred. Four centred columns of
   unequal length read as scattered; a shared left edge per column gives the
   band a spine. */
.footer { background: var(--color-red); color: rgba(255, 255, 255, 0.9); }
.footer a { color: var(--color-white); text-decoration: none; }
.footer a:hover { color: var(--color-white); text-decoration: underline; }

.footer__inner {
  display: grid; gap: clamp(32px, 4vw, 48px);
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  padding-block: clamp(48px, 6vw, 80px);
  text-align: left;
}
@media (max-width: 1023px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px)  { .footer__inner { grid-template-columns: 1fr; } }

.footer__col { display: flex; flex-direction: column; align-items: flex-start; }

.footer__logo {
  background: var(--color-white); border-radius: 8px; padding: var(--space-4);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
}
.footer__blurb {
  margin: var(--space-5) 0 0; font-size: 0.875rem; line-height: 1.7;
  color: rgba(255, 255, 255, 0.85); max-width: 30ch;
}
.footer__call {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-5); min-height: 44px; padding: 10px 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 4px;
  font-size: 0.9375rem; font-weight: var(--weight-bold); letter-spacing: 0.02em;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.footer__call:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--color-white); text-decoration: none; }

.footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.footer__social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 50%;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.footer__social a:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.85); }

.footer__heading {
  position: relative;
  font-size: 0.6875rem; font-weight: var(--weight-bold);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-white); margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
}
.footer__heading::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 26px; height: 2px; background: rgba(255, 255, 255, 0.55);
}

/* Hours as label/value rows with hairline dividers — scannable, and the
   values line up instead of stacking. */
.hours { margin: 0; width: 100%; max-width: 15rem; font-size: 0.875rem; }
.hours__row {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding-block: 7px; border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.hours__row:last-child { border-bottom: 0; }
.hours dt { font-weight: var(--weight-bold); }
.hours dd { margin: 0; color: rgba(255, 255, 255, 0.85); }

.footer__note {
  margin: var(--space-4) 0 0; font-size: 0.8125rem; line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
}
/* A link inside a run of text must be distinguishable by something other than
   colour — here both are white, so colour alone gives 1.3:1 against the
   surrounding text. Underline supplies the non-colour cue. */
.footer__note a { text-decoration: underline; text-underline-offset: 2px; }
.footer__badge {
  display: inline-block; margin: var(--space-5) 0 0;
  padding: 6px 12px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.6875rem; font-weight: var(--weight-bold);
  letter-spacing: 0.09em; text-transform: uppercase;
}

.footer__address { font-style: normal; line-height: 1.75; font-size: 0.875rem; margin: 0; }
.footer__legalname { display: block; font-weight: var(--weight-bold); margin-bottom: 2px; }
.footer__links { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); font-size: 0.875rem; }
.footer__links a { font-weight: var(--weight-semibold); }

.ad img { border-radius: 6px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); }
.footer__adnote {
  margin: var(--space-3) 0 0; font-size: 0.6875rem; line-height: 1.5;
  color: rgba(255, 255, 255, 0.88); max-width: 28ch;
}

.footer__legal { background: rgba(0, 0, 0, 0.14); }
.footer__legal .container {
  display: flex; flex-direction: column; align-items: center;
  /* Generous gap and padding so the credit's reveal rows, which sit outside
     its box, never crowd the copyright line above or the band edge below. */
  gap: var(--space-7);
  padding-block: var(--space-7);
  text-align: center;
}
.footer__copyright { margin: 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.8); }

/* ==========================================================================
   VGM Design Credit — D01·V2 Brand Star Reveal
   Per the inline implementation guide (v3). All selectors namespaced .vgm-*.
   Only the stars and the Google dot are exempt from footer colour matching.
   ========================================================================== */

.vgm-credit {
  /* Host footer is red with white text, so the muted-white value is the
     footer's own secondary text colour. */
  --vgm-footer-color: rgba(255, 255, 255, 0.8);
  --vgm-weight-hover: 800;
  /* --vgm-hover-track: unset — hover must not change tracking. See guide §7. */

  --vgm-ease: cubic-bezier(0.23, 1, 0.32, 1);

  font-size: 0.8125rem;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--vgm-footer-color);

  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4em;
  flex-wrap: wrap;
}

.vgm-bsr { position: relative; display: inline-block; cursor: default; }

.vgm-bsr-brand, .vgm-bsr-rated, .vgm-bsr-label {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--vgm-footer-color);
}
.vgm-bsr-brand, .vgm-bsr-label { white-space: nowrap; }

.vgm-bsr-brand {
  text-decoration: none; line-height: 1.1;
  transition: font-weight 0.22s var(--vgm-ease), letter-spacing 0.22s var(--vgm-ease);
}
.vgm-bsr-brand:hover { color: var(--vgm-footer-color); text-decoration: none; }
.vgm-bsr-brand:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

/* Tightened from the guide's 0.4em: at 0.4em the revealed row floated midway
   between the brand name and the copyright line above, reading as though it
   belonged to neither. 0.12em binds it clearly to the brand. The clearance
   above comes from the legal bar's gap instead. */
.vgm-bsr-top {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 0.12em;
  display: flex; align-items: center; gap: 0.45em;
  white-space: nowrap; opacity: 0; transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.32s var(--vgm-ease), transform 0.32s var(--vgm-ease);
}

.vgm-bsr-star {
  font-size: 1em; line-height: 1; display: inline-block;
  color: #fbbc04 !important;
  opacity: 0; transform: translateY(-8px) scale(0.6);
  transition: opacity 0.28s var(--vgm-ease), transform 0.28s var(--vgm-ease), filter 0.28s;
}

.vgm-bsr-bottom {
  position: absolute; top: 100%; left: 0; margin-top: 0.4em;
  display: flex; align-items: center; gap: 0.4em;
  white-space: nowrap; opacity: 0; transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.35s var(--vgm-ease), transform 0.35s var(--vgm-ease);
}

.vgm-bsr-dot {
  width: 0.7em; height: 0.7em; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
  background: linear-gradient(135deg, #4285f4 0%, #34a853 33%, #fbbc05 66%, #ea4335 100%) !important;
}

.vgm-bsr:hover .vgm-bsr-brand,
.vgm-bsr:focus-within .vgm-bsr-brand,
.vgm-bsr.is-active .vgm-bsr-brand {
  font-weight: var(--vgm-weight-hover);
  letter-spacing: var(--vgm-hover-track, inherit);
}

.vgm-bsr:hover .vgm-bsr-top,
.vgm-bsr:focus-within .vgm-bsr-top,
.vgm-bsr.is-active .vgm-bsr-top { opacity: 1; transform: translateY(0); }

.vgm-bsr:hover .vgm-bsr-star,
.vgm-bsr:focus-within .vgm-bsr-star,
.vgm-bsr.is-active .vgm-bsr-star {
  opacity: 1; transform: translateY(0) scale(1);
  filter: drop-shadow(0 0 3px rgba(251, 188, 4, 0.6));
  transition-delay: calc(var(--i) * 70ms);
}

.vgm-bsr:hover .vgm-bsr-bottom,
.vgm-bsr:focus-within .vgm-bsr-bottom,
.vgm-bsr.is-active .vgm-bsr-bottom {
  opacity: 1; transform: translateY(0); transition-delay: 0.38s;
}

@media (max-width: 480px) {
  .vgm-bsr-top, .vgm-bsr-bottom, .vgm-bsr-label { white-space: normal; }
  .vgm-bsr-top, .vgm-bsr-bottom { max-width: 14em; }
}

.vgm-credit[data-vgm-align="right"] .vgm-bsr-top,
.vgm-credit[data-vgm-align="right"] .vgm-bsr-bottom { left: auto; right: 0; }

@media (prefers-reduced-motion: reduce) {
  .vgm-bsr-top, .vgm-bsr-bottom, .vgm-bsr-star { transform: none !important; }
  .vgm-bsr-star, .vgm-bsr-bottom { transition-delay: 0s !important; }
  .vgm-bsr-brand { transition: none; }
}

/* --- Touch targets --------------------------------------------------------
   The design system sets a 44x44 floor below 1024px. Kept in one block at the
   end of the file so it is explicit and order-independent, rather than
   scattered per component where a later rewrite silently drops it — which is
   exactly what happened to the utility-bar phone link once already.

   Inline links inside sentences stay as they are: WCAG 2.5.8 exempts targets
   inline in a block of text, and padding them to 44px wrecks prose rhythm. */
@media (max-width: 1023px) {
  .utility__phone { display: inline-flex; align-items: center; min-height: 44px; }
  .header__logo { min-height: 44px; }
  .header__social a,
  .footer__social a { width: 44px; height: 44px; }
  .infolist__value,
  a.infolist__value { display: inline-flex; align-items: center; min-height: 44px; }
  .infolist__value--plain { display: block; min-height: 0; }
  .infolist__link { min-height: 44px; }
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .contact__directions { min-height: 44px; }
}

/* --- Scroll reveal --------------------------------------------------------
   Opacity plus a short rise, applied only once an element enters view. Gated
   behind .js so nothing is ever hidden from a browser that will not run the
   script, and disabled outright under reduced motion. */
.js [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s var(--ease-entrance), transform 0.6s var(--ease-entrance);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}