/*
Theme Name: Home Buyers Reserve
Theme URI: https://homebuyersreserve.com/
Author: Home Buyers Reserve LLC
Description: Custom conversion-focused theme for Home Buyers Reserve LLC.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: home-buyers-reserve
*/

/* ==========================================================================
   HOME BUYERS RESERVE LLC — STYLESHEET
   Built directly against DESIGN-SYSTEM.md. Every color, spacing, and
   typography value below traces back to a token defined in that document.
   Do not introduce new raw values (hex codes, pixel sizes) without adding
   them to the design system doc first — that discipline is what keeps this
   site's visual language consistent as it expands to future landing pages.

   TABLE OF CONTENTS
   1.  Font Faces
   2.  Design Tokens (Custom Properties)
   3.  Reset / Base
   4.  Utilities
   5.  Layout Primitives
   6.  Typography
   7.  Buttons
   8.  Forms
   9.  Motion / Scroll Reveal
   10. Header
   11. Hero
   12. Situations Grid
   13. Trust Bar
   14. Process ("Here's What Happens Next")
   15. Assurance
   16. Why Us
   17. Comparison Table
   18. FAQ
   19. Final CTA
   20. Footer
   21. Sticky Mobile CTA Bar
   22. Responsive Breakpoints Summary
   ========================================================================== */


/* ==========================================================================
   1. FONT FACES
   Self-hosted, font-display: swap to avoid render-blocking / invisible text.
   REPLACE: ensure these .woff2 files exist in assets/fonts/ before launch.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-soft-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-soft-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-soft-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   2. DESIGN TOKENS
   Direct implementation of DESIGN-SYSTEM.md. See that document for the
   rationale behind each value.
   ========================================================================== */

:root {
  /* -- Palette --------------------------------------------------------- */
  --reserve-green-900: #0F231C;
  --reserve-green-700: #1B3B2F;
  --reserve-green-500: #2B5443;
  --brass-600: #B8863F;
  --brass-700: #9C7130;
  --brass-200: #E8D9BC;
  --ivory-100: #FAF6EE;
  --ivory-50: #FFFDF9;
  --charcoal-900: #2B2723;
  --charcoal-600: #5C574F;
  --signal-red-600: #A23B2E;
  --signal-green-600: #3D6B4F;

  /* -- Semantic aliases -------------------------------------------------- */
  --color-bg-page: var(--ivory-100);
  --color-bg-surface: var(--ivory-50);
  --color-bg-inverse: var(--reserve-green-900);

  --color-text-primary: var(--charcoal-900);
  --color-text-secondary: var(--charcoal-600);
  --color-text-inverse: var(--ivory-100);
  --color-text-inverse-secondary: rgba(250, 246, 238, 0.72);
  --color-text-accent: var(--brass-600);

  --color-border-hairline: var(--brass-200);
  --color-border-inverse: rgba(250, 246, 238, 0.16);

  --color-cta-bg: var(--brass-600);
  --color-cta-bg-hover: var(--brass-700);
  --color-cta-text: var(--reserve-green-900);

  --color-cta-secondary-bg: transparent;
  --color-cta-secondary-border: var(--ivory-100);
  --color-cta-secondary-text: var(--ivory-100);

  --color-success: var(--signal-green-600);
  --color-error: var(--signal-red-600);

  /* -- Typography ---------------------------------------------------------
     clamp(min, preferred, max) — fluid scale, mobile value to desktop value.
  */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-display-xl: clamp(2.25rem, 1.6rem + 2.7vw, 3.75rem);
  --text-display-lg: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --text-display-md: clamp(1.5rem, 1.3rem + 0.85vw, 2rem);
  --text-body-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-body: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --text-body-sm: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  --text-label: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --text-eyebrow: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem);

  /* -- Spacing (8px base unit) -------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;

  /* -- Layout -------------------------------------------------------------- */
  --content-max-width: 1200px;
  --radius-base: 4px;
  --radius-card: 6px;

  /* -- Motion ---------------------------------------------------------------
     Values are only ever consumed inside .js-scoped selectors — see Section 9.
  */
  --motion-duration-fast: 150ms;
  --motion-duration-base: 250ms;
  --motion-duration-slow: 400ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* -- Shadow (used sparingly — hover states only, never at rest) ---------- */
  --shadow-hover: 0 2px 8px rgba(15, 35, 28, 0.06);
}


/* ==========================================================================
   3. RESET / BASE
   ========================================================================== */

*,
*::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-body);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

svg {
  display: block;
}

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

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

input {
  font-family: inherit;
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-text-primary);
}

p {
  margin: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* Visible focus state on every interactive element — never removed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brass-600);
  outline-offset: 2px;
  border-radius: var(--radius-base);
}


/* ==========================================================================
   4. UTILITIES
   ========================================================================== */

.u-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;
}

.u-container {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-3);
  z-index: 1000;
  background: var(--reserve-green-900);
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-base);
  font-weight: 600;
  transition: top var(--motion-duration-fast) var(--motion-ease);
}

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


/* ==========================================================================
   5. LAYOUT PRIMITIVES
   ========================================================================== */

.section__intro {
  max-width: 640px;
  margin-bottom: var(--space-6);
}

.section__intro + .compare__table-wrap {
  margin-top: 0;
}

.section__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-accent);
  margin: 0 0 var(--space-2);
}

.section__heading {
  font-size: var(--text-display-lg);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

.section__heading--centered {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.section__subheading {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

section {
  padding-block: var(--space-7);
}

@media (min-width: 960px) {
  section {
    padding-block: var(--space-9);
  }
}


/* ==========================================================================
   6. TYPOGRAPHY (body-level rules; component-level type lives with each
      component below)
   ========================================================================== */

p, li {
  max-width: 75ch;
}


/* ==========================================================================
   7. BUTTONS
   Governing rule: must remain unmistakably clickable even within the
   refined design language. See DESIGN-SYSTEM.md Section 6.1.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-base);
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color var(--motion-duration-fast) var(--motion-ease),
              border-color var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease),
              transform var(--motion-duration-fast) var(--motion-ease);
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background-color: var(--color-cta-bg);
  color: var(--color-cta-text);
  border-color: var(--color-cta-bg);
}

.btn--primary:hover {
  background-color: var(--color-cta-bg-hover);
  border-color: var(--color-cta-bg-hover);
}

.btn--secondary {
  background-color: var(--color-cta-secondary-bg);
  color: var(--color-cta-secondary-text);
  border-color: var(--color-cta-secondary-border);
}

.btn--secondary:hover {
  background-color: rgba(250, 246, 238, 0.08);
  border-color: var(--brass-600);
  color: var(--brass-200);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn__label-loading {
  display: none;
}


/* ==========================================================================
   8. FORMS
   ========================================================================== */

.form-field {
  margin-bottom: var(--space-4);
  text-align: left;
}

.form-field__label {
  display: block;
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.form-field__input {
  width: 100%;
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  font-size: 16px; /* Never smaller — prevents iOS auto-zoom on focus */
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-base);
  transition: border-color var(--motion-duration-fast) var(--motion-ease);
}

.form-field__input::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.6;
}

.form-field__input:focus {
  outline: none;
  border: 2px solid var(--brass-600);
  padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
}

.form-field__input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.form-field__error {
  font-size: var(--text-body-sm);
  color: var(--color-error);
  margin-top: var(--space-1);
}

/* -- Lead form container (used for both hero and final-CTA forms) -------- */

.lead-form {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  text-align: center;
  position: relative;
}

.lead-form__heading {
  font-size: var(--text-display-md);
  margin-bottom: var(--space-1);
}

.lead-form__subheading {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.lead-form__submit {
  width: 100%;
  margin-top: var(--space-2);
}

.lead-form__privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
}

.lead-form__privacy img {
  width: 14px;
  height: 14px;
}

.lead-form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  text-align: center;
}

.lead-form__success img {
  width: 40px;
  height: 40px;
}

.lead-form__success p {
  font-size: var(--text-body-lg);
  color: var(--color-text-primary);
  font-weight: 500;
}

/* When JS marks a form as submitted, hide the fields/button and show the
   success state. Handled by script.js toggling the [hidden] attribute;
   this rule is a safety net in case of a class-based fallback. */
.lead-form.is-submitted .form-field,
.lead-form.is-submitted .lead-form__submit,
.lead-form.is-submitted .lead-form__privacy,
.lead-form.is-submitted .lead-form__heading,
.lead-form.is-submitted .lead-form__subheading {
  display: none;
}


/* ==========================================================================
   9. MOTION / SCROLL REVEAL
   Subtle fade + slide only, applied via JS-added .is-visible class.
   Entirely opt-in via the .js html class so no-JS visitors always see
   fully visible content with zero animation dependency.
   ========================================================================== */

.js main > section:not(.hero) {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--motion-duration-slow) var(--motion-ease),
              transform var(--motion-duration-slow) var(--motion-ease);
}

.js main > section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js main > section:not(.hero) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================================
   10. HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--reserve-green-900);
  border-bottom: 1px solid var(--color-border-inverse);
}

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

.site-header__logo {
  flex-shrink: 0;
  display: block;
}

.site-header__logo-img {
  width: auto;
  height: 36px;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-header__phone {
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-inverse);
}

.site-header__phone-icon {
  width: 20px;
  height: 20px;
}

.site-header__phone-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.site-header__phone-label {
  font-size: 0.6875rem;
  color: var(--color-text-inverse-secondary);
}

.site-header__phone-number {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--brass-200);
}

.site-header__cta {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: 0.75rem;
}

@media (min-width: 600px) {
  .site-header__phone {
    display: flex;
  }

  .site-header__cta {
    min-height: 48px;
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-label);
  }
}


/* ==========================================================================
   11. HERO
   ========================================================================== */

.hero {
  position: relative;
  padding-block: var(--space-6);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 35, 28, 0.82) 0%,
    rgba(15, 35, 28, 0.72) 45%,
    rgba(15, 35, 28, 0.88) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-6);
}

.hero__content {
  color: var(--color-text-inverse);
}

.hero .section__eyebrow {
  color: var(--brass-200);
}

.hero__heading {
  font-size: var(--text-display-xl);
  line-height: 1.1;
  color: var(--color-text-inverse);
  margin-bottom: var(--space-3);
}

.hero__subheading {
  font-size: var(--text-body-lg);
  color: var(--color-text-inverse-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  max-width: 52ch;
}

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

.hero__trust-row li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-body-sm);
  color: var(--color-text-inverse);
}

.hero__trust-row img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.hero__form-wrap {
  width: 100%;
}

.hero__call-strip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-inverse);
  border-radius: var(--radius-base);
  color: var(--color-text-inverse);
  font-size: var(--text-body-sm);
  text-align: center;
  transition: border-color var(--motion-duration-fast) var(--motion-ease);
}

.hero__call-strip:hover {
  border-color: var(--brass-600);
}

.hero__call-strip img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (min-width: 960px) {
  .hero {
    padding-block: var(--space-9);
  }

  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
    gap: var(--space-8);
  }

  .hero__content {
    padding-top: var(--space-4);
  }
}


/* ==========================================================================
   12. SITUATIONS GRID ("Is Home Buyers Reserve Right For You?")
   ========================================================================== */

.situations__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.situation-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.situation-card img {
  width: 28px;
  height: 28px;
}

.situations__reassurance {
  margin-top: var(--space-5);
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  text-align: center;
}

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

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


/* ==========================================================================
   13. TRUST BAR
   ========================================================================== */

.trust-bar {
  background-color: var(--reserve-green-900);
  padding-block: var(--space-6);
}

.trust-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.trust-bar__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.trust-bar__item img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-top: var(--space-1);
}

.trust-bar__title {
  color: var(--color-text-inverse);
  font-weight: 600;
  font-size: var(--text-body);
  margin-bottom: 2px;
}

.trust-bar__desc {
  color: var(--color-text-inverse-secondary);
  font-size: var(--text-body-sm);
}

@media (min-width: 960px) {
  .trust-bar__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ==========================================================================
   14. PROCESS ("Here's What Happens Next")
   ========================================================================== */

.process__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  counter-reset: none;
}

.process__step {
  text-align: left;
}

.process__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--reserve-green-900);
  border: 1px solid var(--brass-600);
  color: var(--brass-200);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: var(--space-3);
}

.process__step-title {
  font-size: var(--text-display-md);
  margin-bottom: var(--space-2);
}

.process__step-desc {
  color: var(--color-text-secondary);
  font-size: var(--text-body);
}

@media (min-width: 960px) {
  .process__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}


/* ==========================================================================
   15. ASSURANCE
   ========================================================================== */

.assurance {
  background-color: var(--ivory-50);
}

.assurance__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: 900px;
  margin-inline: auto;
}

.assurance__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  font-weight: 600;
  font-size: var(--text-body);
}

.assurance__item img {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

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

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


/* ==========================================================================
   16. WHY US ("Why Homeowners Choose Home Buyers Reserve")
   Asymmetric grid on desktop per design system Section 5.
   ========================================================================== */

.why-us__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

.why-us__media img {
  width: 100%;
  border-radius: var(--radius-card);
}

.why-us__list {
  margin: var(--space-4) 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.why-us__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body);
  font-weight: 500;
}

.why-us__list img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

@media (min-width: 960px) {
  .why-us__grid {
    grid-template-columns: 0.85fr 1fr;
    gap: var(--space-8);
  }
}


/* ==========================================================================
   17. COMPARISON TABLE
   Styled as a term sheet — hairline rules, no zebra striping, minimal
   ornamentation. See DESIGN-SYSTEM.md Section 5.
   ========================================================================== */

.compare__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  -webkit-overflow-scrolling: touch;
}

.compare__table {
  min-width: 640px;
  font-size: var(--text-body-sm);
}

.compare__table th,
.compare__table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border-hairline);
  vertical-align: middle;
}

.compare__table thead th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background-color: var(--ivory-50);
  border-bottom: 1px solid var(--color-border-hairline);
}

.compare__table tbody th {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td {
  border-bottom: none;
}

.compare__table td {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

.compare__table td img,
.compare__table th img {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--space-1);
}

.compare__table-highlight {
  background-color: rgba(184, 134, 63, 0.08);
  color: var(--color-text-primary) !important;
  font-weight: 600;
}

.compare__table thead .compare__table-highlight {
  background-color: var(--reserve-green-900);
  color: var(--color-text-inverse) !important;
}

.compare__footnote {
  margin-top: var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

/* Mobile-only scroll hint. The table requires horizontal scrolling below
   960px (see .compare__table min-width above); without a visible cue,
   testing showed this reads as a cut-off layout rather than an
   intentional scrollable region. A right-edge fade plus a small text
   hint make the affordance obvious rather than discovered by accident. */
.compare__table-wrap {
  position: relative;
}

.compare__scroll-hint {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

.compare__scroll-hint img {
  width: 16px;
  height: 16px;
}

@media (min-width: 960px) {
  .compare__scroll-hint {
    display: none;
  }
}


/* ==========================================================================
   18. FAQ
   Built on native <details>/<summary> — the CSS below styles the native
   element rather than replacing it, preserving built-in keyboard and
   screen-reader behavior.
   ========================================================================== */

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.faq__item {
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-card);
  background-color: var(--color-bg-surface);
  overflow: hidden;
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: '';
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--brass-600);
  border-bottom: 2px solid var(--brass-600);
  transform: rotate(45deg);
  transition: transform var(--motion-duration-base) var(--motion-ease);
}

.faq__item[open] .faq__question::after {
  transform: rotate(-135deg);
}

.faq__answer {
  padding: 0 var(--space-4) var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-body);
}

.faq__answer p {
  margin: 0;
}

/* Progressive enhancement: script.js applies a max-height transition using
   inline styles when JS is available. Without JS, <details> still opens
   and closes instantly and correctly via native browser behavior. */


/* ==========================================================================
   19. FINAL CTA
   ========================================================================== */

.final-cta {
  background-color: var(--reserve-green-900);
  color: var(--color-text-inverse);
}

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

.final-cta__heading {
  font-size: var(--text-display-lg);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-3);
}

.final-cta__subheading {
  font-size: var(--text-body-lg);
  color: var(--color-text-inverse-secondary);
  margin-bottom: var(--space-5);
}

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

.final-cta__contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-inverse);
}

.final-cta__contact-item img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.final-cta__contact-item small {
  color: var(--color-text-inverse-secondary);
  font-size: 0.75rem;
}

.final-cta .lead-form {
  background-color: var(--ivory-50);
}

@media (min-width: 960px) {
  .final-cta__grid {
    grid-template-columns: 1fr 0.85fr;
    align-items: center;
  }
}


/* ==========================================================================
   20. FOOTER
   ========================================================================== */

.site-footer {
  background-color: var(--reserve-green-900);
  color: var(--color-text-inverse-secondary);
  padding-top: var(--space-8);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--color-border-inverse);
}

.site-footer__brand img {
  height: 36px;
  width: auto;
  margin-bottom: var(--space-2);
}

.site-footer__tagline {
  font-size: var(--text-body-sm);
  font-style: italic;
  color: var(--color-text-inverse-secondary);
}

.site-footer__heading {
  color: var(--brass-200);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.site-footer__text {
  font-size: var(--text-body-sm);
  line-height: 1.6;
}

.site-footer__phone {
  display: inline-block;
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-text-inverse);
  margin-bottom: var(--space-1);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-body-sm);
}

.site-footer__links a:hover {
  color: var(--brass-200);
}

.site-footer__legal {
  padding-block: var(--space-5);
  font-size: 0.8125rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 960px) {
  .site-footer__inner {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
  }
}


/* ==========================================================================
   21. STICKY MOBILE CTA BAR
   Mobile only. Persists through scroll; removed from layout entirely on
   desktop rather than just visually hidden, since it has no role there.
   ========================================================================== */

.mobile-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-border-inverse);
  /* Respects devices with a home-indicator / gesture bar */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-cta-bar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56px;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mobile-cta-bar__item--call {
  background-color: var(--reserve-green-900);
  color: var(--color-text-inverse);
}

.mobile-cta-bar__item--call img {
  width: 18px;
  height: 18px;
}

.mobile-cta-bar__item--offer {
  background-color: var(--color-cta-bg);
  color: var(--color-cta-text);
}

/* Reserve space at the bottom of the page so the fixed bar never covers
   footer content or form fields on short pages. */
body {
  padding-bottom: 56px;
}

@media (min-width: 960px) {
  .mobile-cta-bar {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}


/* ==========================================================================
   22. RESPONSIVE BREAKPOINTS SUMMARY (reference only, no rules here)
   Mobile:  0–599px   (default / base styles above)
   Tablet:  600–959px (min-width: 600px)
   Desktop: 960px+    (min-width: 960px)
   Wide:    1200px+   (content max-width cap via --content-max-width)
   ========================================================================== */