/* ==========================================================================
   HACIENDA HOMES - Main Stylesheet
   Design Reference: web-homepage-1-r4.pdf (1000px → 1440px = 1.44x scale)
   ========================================================================== */

/* ==========================================================================
   CSS Reset & Base
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Brand Colors */
  --color-dark-walnut: #4b412a;
  --color-desert-oasis: #007179;
  --color-yuma-nights: #3d4856;
  --color-yuma-breeze: #6f879b;
  --color-desert-palms: #768464;
  --color-hardware: #2d2c2b;
  --color-white: #ffffff;
  --color-gray-bg: #f0f0ec;
  --color-nav-bg: #f7f3ee;
  --color-submit-btn: #4a5a42;
  --color-submit-btn-hover: #3d4a36;
  --color-error: #dc3545;
  --color-disabled: #999999;

  /* Legacy aliases - for backward compatibility */
  --dark-walnut: var(--color-dark-walnut);
  --desert-oasis: var(--color-desert-oasis);
  --hardware: var(--color-hardware);
  --white: var(--color-white);
  --gray-bg: var(--color-gray-bg);

  /* Fonts */
  --font-heading: 'Cardo', Georgia, serif;
  --font-body: 'Manrope', sans-serif;

  /* Legacy font aliases */
  --font-serif: var(--font-heading);
  --font-sans: var(--font-body);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

/* Anchor link offset for fixed header */
[id] {
  scroll-margin-top: 170px;
}

/* Community pages need extra offset for sticky agent/nav section */
.community-details[id],
.standard-features[id],
.pricing-plans[id] {
  scroll-margin-top: 200px;
}

/* ==========================================================================
   Password Gate
   ========================================================================== */
body.is-protected {
  overflow: hidden;
}

body.is-protected.unlocked {
  overflow: auto;
}

body.is-protected.unlocked .password-gate {
  display: none;
}

.password-gate {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-nav-bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-gate-content {
  text-align: center;
  padding: 40px;
  max-width: 400px;
}

.password-gate-logo {
  height: 80px;
  margin-bottom: 32px;
}

.password-gate-content h2 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-dark-walnut);
  margin-bottom: 24px;
}

.password-gate-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.password-gate-form input {
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 16px;
  border: 1px solid var(--color-dark-walnut);
  border-radius: 0;
  text-align: center;
}

.password-gate-form input:focus {
  outline: 2px solid var(--color-desert-oasis);
  outline-offset: 2px;
}

.password-gate-form button {
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-dark-walnut);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.password-gate-form button:hover {
  background: var(--color-hardware);
}

.password-error {
  color: var(--color-error);
  font-size: 14px;
  margin-top: 16px;
}

/* Skip Link for Accessibility */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-hardware);
  color: var(--white);
  padding: 8px 16px;
  text-decoration: none;
  z-index: 1000;
  font-weight: 600;
}

.skip-link:focus {
  top: 100px;
}

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

html {
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--hardware);
  line-height: 1.6;
  background: var(--color-nav-bg);
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
}

main {
  overflow-x: hidden;
  width: 100%;
}


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

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

/* Focus indicators for accessibility */
a:focus,
button:focus,
input:focus,
select:focus {
  outline: 2px solid var(--color-desert-oasis);
  outline-offset: 2px;
}

/* Focus indicators for dark backgrounds */
.intake-form-wrap a:focus,
.intake-form-wrap button:focus,
.intake-form-wrap input:focus,
.intake-form-wrap select:focus {
  outline-color: var(--white);
}

ul, ol {
  list-style: none;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-nav-bg);
  transition: all 0.4s ease;
}

/* Scrolled/shrunk state */
.site-header.is-scrolled .utility-bar {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
}

.site-header.is-scrolled .header-lines {
  opacity: 0;
}

.site-header.is-scrolled .logo-img {
  height: 50px;
}

.site-header.is-scrolled .main-nav {
  padding: 20px 40px;
}

.header-lines {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  z-index: 102;
  transition: opacity 0.4s ease;
}

/* Logo positioned to span both nav bars */
.site-header .logo {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 101;
}

.logo-img {
  height: 75px;
  width: auto;
  transition: height 0.4s ease;
}

/* Utility Bar - Top Left */
.utility-bar {
  padding: 12px 40px 12px 50px;
  background: var(--color-nav-bg);
  transition: all 0.3s ease;
  max-height: 50px;
  overflow: hidden;
}

.utility-nav {
  display: flex;
  gap: 32px;
}

.utility-nav a {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-desert-oasis);
  transition: color 0.2s;
}

.utility-nav a:hover {
  color: var(--dark-walnut);
}

/* Main Nav */
.main-nav {
  background: var(--color-nav-bg);
  padding: 55px 40px;
  transition: padding 0.4s ease;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 100px;
  padding-right: 140px;
}

.nav-links {
  display: flex;
  gap: 48px;
}

.nav-links a {
  font-size: 12.18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-dark-walnut);
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--desert-oasis);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav-links a.active {
  color: var(--desert-oasis);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Desktop Submenu */
.nav-links > li {
  position: relative;
}

.nav-links .submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  background: var(--white);
  min-width: 200px;
  padding: 12px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav-links .submenu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav-links .has-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-links .submenu li {
  padding: 0;
}

.nav-links .submenu a {
  display: block;
  padding: 10px 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.nav-links .submenu a:hover {
  background: var(--color-nav-bg);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 103;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-dark-walnut);
  transition: all 0.3s ease;
}

.mobile-menu-toggle.is-active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.is-active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.is-active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Navigation */
.mobile-nav {
  position: fixed;
  top: 130px;
  left: 0;
  right: 0;
  background: var(--color-nav-bg);
  padding: 24px 40px 32px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav-links a {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-dark-walnut);
  text-decoration: none;
  transition: color 0.2s;
}

.mobile-nav-links a:hover {
  color: var(--color-desert-oasis);
}

.mobile-nav-links a.active,
.mobile-nav-links .submenu-toggle.active {
  color: var(--color-desert-oasis);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mobile-nav-divider {
  height: 1px;
  background: var(--color-dark-walnut);
  opacity: 0.2;
  margin: 8px 0;
}

/* Mobile Submenu */
.mobile-nav-links .submenu-toggle {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-dark-walnut);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-nav-links .submenu-toggle::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.mobile-nav-links .submenu-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

.mobile-nav-links .submenu {
  display: none;
  flex-direction: column;
  gap: 0px;
  padding: 0px 0 0 16px;
  margin-top: 12px;
  border-left: 2px solid rgba(64, 50, 38, 0.2);
}

.mobile-nav-links .submenu.is-open {
  display: flex;
}

.mobile-nav-links .submenu a {
  font-size: 13px;
  font-weight: 500;
}

/* Logo */
.logo {
  display: flex;
  align-items: flex-start;
  color: var(--dark-walnut);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero {
  position: relative;
  height: 70vh;
  min-height: 520px;
  margin-top: 130px;
  background-image: url('../images/home-hero.webp');
  background-size: cover;
  background-position: center center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 48px 34px;
  overflow: hidden;
}

.hero--bg-top {
  background-position: center top;
}

.hero--bg-bottom {
  background-position: center bottom;
}

/* Instagram link appended to the nav (after the last menu item). Inherits the
   nav link colour (dark walnut) via .nav-links a / .mobile-nav-links a; the SVG
   follows through stroke="currentColor". */
.nav-item--instagram a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Pull the icon closer to the last nav item (the flex gap is a uniform 48px). */
.nav-links .nav-item--instagram {
  margin-left: -28px;
}

.nav-links .nav-item--instagram svg,
.mobile-nav-links .nav-item--instagram svg {
  width: 28px;
  height: 28px;
}

.hero-content {
  background: var(--white);
  padding: 13px 64px 19px 38px;
  position: absolute;
  top: 240px;
  left: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

/* Letter animation for text */
.hero-eyebrow .letter,
.hero-title .letter,
.community-title .letter,
.intake-title .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-eyebrow .letter.visible,
.hero-title .letter.visible,
.community-title .letter.visible,
.intake-title .letter.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Button reveal animation - fade in with subtle slide */
.community-content .btn {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 1.8s ease, transform 1.8s ease;
}

.community-content .btn.revealed {
  opacity: 1;
  transform: translateX(0);
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-hardware);
  line-height: 1.2;
  margin-bottom: 0;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 700;
  color: var(--color-hardware);
  line-height: 1.2;
  letter-spacing: 0;
}

.hero-title em {
  font-style: normal;
  font-weight: 700;
}

.hero-note {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   DIVIDER BAR (with HH Monogram)
   ========================================================================== */
.divider-bar {
  background: var(--hardware);
  padding: 45px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.hh-spacer-icon {
  height: 78px;
  width: auto;
}

/* ==========================================================================
   COMMUNITY SECTIONS (Livingston Ranch, Barkley Ranch)
   ========================================================================== */
.community-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.community-row-short {
  height: 483px;
}

.community-row-reverse {
  direction: rtl;
}

.community-row-reverse > * {
  direction: ltr;
}

/* Community Images */
.community-images {
  position: relative;
  min-height: 258px;
  overflow: hidden;
}

.community-images .img-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 140s ease-out;
}

.community-images .img-full.img-top {
  object-position: center top;
}

.community-images .img-full.img-bottom {
  object-position: center bottom;
}

.community-images .img-full.auto-zooming {
  transform: scale(2.5);
}

.community-images .img-full.img-rotated {
  transform: rotate(90deg) scale(1.95);
  object-fit: cover;
}

.community-images .img-full.img-rotated.auto-zooming {
  transform: rotate(90deg) scale(3);
}

/* Community Badge */
.community-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  background: var(--white);
  opacity: 0;
  transition: opacity 2.5s ease;
}

.community-badge.visible {
  opacity: 1;
}

.badge-img {
  width: 70px;
  height: auto;
}

/* Community Content */
.community-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 34px 80px 34px 120px;
  background: var(--white);
}

/* Inner content wrapper. By default it's transparent to layout (display:contents)
   so the children behave as direct flex items — every existing row is unchanged.
   The effortless row opts in below to make it a fixed-width box. */
.community-content-box {
  display: contents;
}

.community-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-yuma-nights);
  margin-bottom: 16px;
}

.community-title {
  font-family: var(--font-heading);
  font-size: 68px;
  font-weight: 700;
  color: var(--color-hardware);
  line-height: 1.2;
  letter-spacing: 0;
  margin-bottom: 24px;
}

.community-title em {
  font-style: italic;
}

.community-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--color-hardware);
  margin-top: 48px;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.community-link:hover {
  color: var(--color-desert-oasis);
}

/* Barkley Ranch specific colors */
.community-row-reverse .community-label {
  color: var(--color-desert-palms);
}

/* Reverse rows place the content in the LEFT column. On large screens anchor it
   to the inner (right) edge near the centre line — mirroring the standard rows
   whose content hugs the centre — so it doesn't strand at the far-left edge on
   wide monitors. Scoped to >1024px so the stacked tablet/mobile layouts (which
   reset to a single left-aligned column) are untouched. */
@media (min-width: 1025px) {
  .community-row-reverse .community-content {
    align-items: center;
    text-align: right;
    padding: 34px 120px 34px 80px;
  }

  /* The "crafted." (Barkley Ranch) row per client direction: center the content
     box within its column (overriding the reverse rows' right-anchored default),
     but left-align the eyebrow, heading, button and link inside the box. */
  .community-row--barkley .community-content {
    align-items: center;
    text-align: left;
    padding: 34px 80px;
  }

  .community-row--barkley .community-content-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    max-width: 600px;
  }

  /* The "effortless design." row sits directly above the intake form. Anchor its
     content to the right (toward the centre line) in a fixed-width box that mirrors
     the form's 500px box, and left-align the text inside. Result: the eyebrow,
     title, button and link share the SAME left edge AND right edge as the form
     fields below — the two blocks line up edge-to-edge as one column hugging the
     centre. Both use right padding 80px + a 500px box anchored right, so they
     track together at any viewport width. */
  .community-row--effortless .community-content {
    align-items: left;
    padding: 34px 80px;
  }

  .community-row--effortless .community-content-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    max-width: 600px;
  }
}

.arrow-icon {
  width: 12px;
  height: 12px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  transition: transform 0.2s ease;
}

a:hover .arrow-icon,
.community-link:hover .arrow-icon,
.intake-link:hover .arrow-icon,
.hh-difference-link:hover .arrow-icon {
  transform: translate(3px, -3px);
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 8px 32px;
  border: none;
  cursor: default;
  transition: background 0.2s;
  min-width: 320px;
  max-width: 100%;
}

.btn-olive {
  background: var(--color-desert-palms);
  color: var(--white);
}

.btn-dark {
  background: var(--color-yuma-nights);
  color: var(--white);
}

.btn-walnut {
  background: var(--color-dark-walnut);
  color: var(--white);
}

/* ==========================================================================
   HH DIFFERENCE SECTION
   ========================================================================== */
.hh-difference {
  background: var(--gray-bg);
  padding: 128px 0;
  overflow: hidden;
}

.hh-difference-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  align-items: stretch;
}

.hh-difference-image {
  position: relative;
  max-width: 440px;
  aspect-ratio: 440 / 458;
  margin: 0 auto;
}

.hh-difference-content {
  padding: 0;
  max-width: 420px;
}

.hh-difference-image > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.hh-difference-image > img.img-top {
  object-position: center top;
}

.hh-difference-image > img.img-bottom {
  object-position: center bottom;
}

.hh-difference-title {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-hardware);
  margin-bottom: 24px;
}

.hh-difference-text {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 2.25;
  letter-spacing: -0.003em;
  color: var(--color-yuma-nights);
  margin-bottom: 24px;
}

.hh-difference-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-hardware);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}

.hh-difference-link:hover {
  color: var(--color-hardware);
}

/* ==========================================================================
   EXPLORE CARDS SECTION
   ========================================================================== */
.explore-cards {
  background: var(--white);
  padding: 80px 0 0;
}

.explore-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 0 32px;
}

.explore-card {
  display: block;
  text-decoration: none;
  transition: transform 0.2s;
}

.explore-card:hover {
  transform: translateY(-4px);
}

.explore-card-img {
  aspect-ratio: 1/1;
  overflow: hidden;
}

.explore-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.explore-card:hover .explore-card-img img {
  transform: scale(1.03);
}

/* ==========================================================================
   EXPLORE CAROUSEL
   ========================================================================== */
.explore-carousel {
  background: var(--white);
  padding: 80px 0 0 32px;
  overflow: hidden;
  position: relative;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.3s ease, background 0.3s ease;
}

.carousel-arrow:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 1);
}

.carousel-arrow svg {
  width: 24px;
  height: 24px;
  color: var(--color-yuma-nights);
}

.carousel-arrow-left {
  left: 16px;
}

.carousel-arrow-right {
  right: 16px;
}

.explore-carousel.in-view {
  background: var(--white);
}

.explore-carousel-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 32px;
  padding: 0 32px;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.explore-carousel-track::-webkit-scrollbar {
  display: none;
}

.explore-carousel-track:active {
  cursor: grabbing;
}

.explore-slide {
  flex: 0 0 calc(33.333% - 22px);
  min-width: 280px;
  text-decoration: none;
  flex-shrink: 0;
}

.explore-slide-img {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  position: relative;
}

.explore-slide-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 0 0 rgba(128, 128, 128, 0.4);
  transition: box-shadow 0.4s ease;
  pointer-events: none;
}

.explore-slide:hover .explore-slide-img::after {
  box-shadow: inset 0 0 0 15px #fff;
}

.explore-slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 140s ease-out;
}

.explore-slide-img img.img-top {
  object-position: center top;
}

.explore-slide-img img.img-bottom {
  object-position: center bottom;
}

.explore-slide:hover .explore-slide-img img {
  transform: scale(2.5);
}

.explore-slide-label {
  padding: 40px 0;
  text-align: center;
}

.explore-slide-title {
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-hardware);
}

/* ==========================================================================
   HISTORY CAROUSEL
   ========================================================================== */
.history-section {
  background: var(--gray-bg); /* #f0f0ec — warm off-white behind the white cards */
  padding: 16px 0 80px;
  overflow: hidden;
  scroll-margin-top: 120px;
}

.history-header {
  max-width: 720px;
  margin: 0 auto 40px;
  padding: 0 32px;
  text-align: center;
}

.history-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-hardware);
  margin: 0 0 16px;
}

.history-intro {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-yuma-nights);
  margin: 0;
}

.history-carousel {
  position: relative;
}

.history-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.3s ease, background 0.3s ease;
}

.history-arrow:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 1);
}

.history-arrow svg {
  width: 24px;
  height: 24px;
  color: var(--color-yuma-nights);
}

.history-arrow-left {
  left: 16px;
}

.history-arrow-right {
  right: 16px;
}

.history-carousel-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 32px;
  padding: 0 32px;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.history-carousel-track::-webkit-scrollbar {
  display: none;
}

.history-carousel-track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.history-card {
  flex: 0 0 420px;
  min-width: 420px;
  min-height: 480px;
}

.history-card--photo {
  overflow: hidden;
}

.history-card--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.history-card--text {
  display: flex;
  flex-direction: column;
  background: var(--white);
  padding: 48px 44px;
}

.history-card-era {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-desert-oasis);
  margin: 0 0 12px;
}

.history-card-heading {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-hardware);
  margin: 0 0 16px;
}

.history-card-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-yuma-nights);
  margin: 0;
}

/* ==========================================================================
   LANDSCAPE BANNER
   ========================================================================== */
.landscape-banner {
  position: relative;
  width: 100%;
  max-height: 350px;
  overflow: hidden;
}

.landscape-banner > img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.landscape-banner > img.img-top {
  object-position: center top;
}

.landscape-banner > img.img-bottom {
  object-position: center bottom;
}

.landscape-banner-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.landscape-banner-logo img {
  height: 80px;
  width: auto;
}

/* ==========================================================================
   INTAKE FORM SECTION
   ========================================================================== */
.intake-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.intake-row > * {
  width: 100%;
}

.intake-form-wrap {
  background: var(--color-desert-palms);
  /* Anchor the 500px form box to the right (toward the centre line) so it mirrors
     the "effortless design." content box directly above it — same width, same
     left/right edges, hugging the centre. The ≤1024px override keeps the stacked
     layouts left-aligned. */
  padding: 40px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
}

/* Contact page: contained, centered green box around the intake form */
.intake-form-section {
  padding: 10px 120px 80px;
  background: transparent;
}

.intake-form-wrap-boxed {
  padding: 60px 80px;
  max-width: 760px;
  margin: 0 auto;
  justify-content: center;
}

.intake-form-wrap-boxed .intake-form {
  max-width: none;
}

.intake-form {
  width: 100%;
  max-width: 500px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}

.form-field {
  position: relative;
  display: flex;
  flex-direction: column;
}

.form-field label {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--white);
  pointer-events: none;
  transition: all 0.2s ease;
  background: transparent;
  padding: 0 4px;
}

/* Float label up when input is focused or has content */
.form-field:has(input:focus) label,
.form-field:has(input:not(:placeholder-shown)) label,
.form-field:has(select:focus) label {
  top: 0;
  transform: translateY(-50%);
  font-size: 11px;
  background: var(--color-desert-palms);
}

.form-field input,
.form-field select {
  background: transparent;
  border: 1px solid var(--white);
  padding: 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--white);
  outline: none;
  transition: border-color 0.2s;
}

.form-field input:focus,
.form-field select:focus {
  border-color: var(--white);
}

.form-field input::placeholder {
  color: transparent;
}

.form-field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

.form-field select option {
  background: var(--color-desert-palms);
  color: var(--white);
}

/* Form validation states */
.form-field input:invalid:not(:placeholder-shown),
.form-field select:invalid {
  border-color: var(--color-error);
}

.form-field:has(input:invalid:not(:placeholder-shown)) label,
.form-field:has(select:invalid) label {
  color: var(--color-error);
}

.form-field input:valid:not(:placeholder-shown) {
  border-color: var(--white);
}

/* Submit button */
.btn-submit {
  background: var(--color-submit-btn);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 16px 32px;
  border: none;
  cursor: pointer;
  width: calc(50% - 12px);
  transition: background 0.2s;
}

.btn-submit:hover {
  background: var(--color-submit-btn-hover);
}

.btn-submit:disabled {
  background: var(--color-disabled);
  cursor: not-allowed;
}

.form-footer {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 24px;
}

.form-footer-full {
  display: block;
}

.btn-submit-full {
  width: 100%;
}

.form-footer-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-alt {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white);
  margin: 0;
}

.form-contact {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--white);
  margin: 0;
}

.form-contact a {
  font-weight: 400;
  margin-left: 0;
}

/* Intake Content */
.intake-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 54px 80px 54px 120px;
  background: var(--white);
}

.intake-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-desert-palms);
  margin-bottom: 8px;
}

.intake-title {
  font-family: var(--font-serif);
  font-size: 68px;
  font-weight: 700;
  color: var(--color-hardware);
  line-height: 1.2;
  margin-bottom: 24px;
}

.intake-content .btn {
  margin-bottom: 32px;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 1.8s ease, transform 1.8s ease;
}

.intake-content .btn.revealed {
  opacity: 1;
  transform: translateX(0);
}

.intake-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-desert-palms);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.intake-link:hover {
  color: var(--color-desert-palms);
}

.intake-contact {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-desert-palms);
  line-height: 1.6;
}

.intake-contact a {
  color: var(--color-desert-palms);
  text-decoration: none;
}

.intake-contact a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--gray-bg);
}

/* Full-width sunset banner — extends edge to edge, with the logo over it */
.footer-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  width: 100%;
  overflow: hidden;
}

/* Sunset texture fills the banner, extending up behind the logo */
.footer-texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.footer-texture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

.footer-logo {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 64px 48px;
}

.footer-logo-img {
  height: 100px;
  width: auto;
}

/* ==========================================================================
   PAGE TEMPLATES (About, Contact, etc.)
   ========================================================================== */
.page-header {
  background: var(--color-gray-bg);
  padding: 100px 40px;
  margin-top: 130px; /* clear the fixed site header so the heading reads as centered (matches .community-hero) */
  text-align: center;
}

.page-header h1 {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark-walnut);
}

/* 404 / error page */
.error-404 {
  margin-top: 130px; /* clear the fixed site header */
  min-height: 56vh;
  padding: 80px 40px;
  background: var(--color-gray-bg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.error-404-code {
  font-family: var(--font-heading);
  font-size: 110px;
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  color: var(--color-desert-palms);
  margin: 0;
}

.error-404-title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark-walnut);
  margin: 12px 0 10px;
}

.error-404-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-hardware);
  max-width: 480px;
  margin: 0 auto 28px;
}

.error-404 .btn {
  text-decoration: none;
}

.content-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 40px;
}

.content-section h2 {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  font-style: italic;
  color: var(--color-dark-walnut);
  margin-bottom: 16px;
  margin-top: 40px;
}

.content-section h2:first-of-type {
  margin-top: 0;
}

.content-section p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-hardware);
  margin-bottom: 16px;
}

.content-section ul {
  margin: 16px 0;
  padding-left: 24px;
  list-style: disc;
}

.content-section li {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 8px;
}

/* Contact Page */
.contact-info {
  background: var(--color-gray-bg);
  padding: 32px;
  margin: 32px 0;
  border-radius: 4px;
}

.contact-info h2 {
  margin-top: 0;
  /* "Get In Touch" — Cardo Bold, non-italic (overrides the italic .content-section h2). */
  font-weight: 700;
  font-style: normal;
}

.contact-form {
  margin-top: 40px;
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-dark-walnut);
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 16px;
  font-family: var(--font-body);
  font-size: 16px;
  border: 1px solid var(--color-dark-walnut);
  background: var(--color-white);
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--color-desert-oasis);
  outline: none;
}

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

/* Contact form validation states */
.form-group input:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {
  border-color: var(--color-error);
}

.form-group input:valid:not(:placeholder-shown),
.form-group textarea:valid:not(:placeholder-shown) {
  border-color: var(--color-desert-oasis);
}

.btn-contact-submit {
  display: inline-block;
  background: var(--color-desert-oasis);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 16px 40px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-contact-submit:hover {
  background: var(--color-dark-walnut);
}

/* ==========================================================================
   COMMUNITY PAGES
   ========================================================================== */
.community-hero {
  position: relative;
  height: 50vh;
  min-height: 320px;
  margin-top: 130px;
  margin-bottom: 0;
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.community-hero--bg-top {
  background-position: center top;
}

.community-hero--bg-bottom {
  background-position: center bottom;
}

.community-page {
  /* Prevent any gaps from margin collapsing */
  display: flex;
  flex-direction: column;
}

.community-hero-lr {
  background-image: url('../images/livingston-hero.webp');
}

.community-hero-br {
  background-image: url('../images/barkley-ranch-hero.webp');
}

.community-hero-our-story {
  background-image: url('../images/our-story-hero.webp');
}

.community-hero-experience-yuma {
  background-image: url('../images/experience-yuma-hero.webp');
}

.community-hero-contact {
  background-image: url('../images/contact-hero.webp');
}

.community-hero-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.community-hero-badge-img {
  width: 70px;
  height: auto;
}

/* Agents Section */
/* Sticky Nav Container */
.sticky-nav-container {
  position: relative;
  z-index: 90;
  margin-top: 0;
  transition: all 0.3s ease;
}

.sticky-nav-container.is-sticky {
  position: fixed;
  top: 90px;
  left: 0;
  right: 0;
  z-index: 90;
  overflow: visible;
}

.sticky-nav-container.is-sticky::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  height: 100px;
  background: var(--color-nav-bg);
  pointer-events: none;
}

.sticky-nav-placeholder {
  display: none;
}

.announcement-banner {
  background: var(--color-desert-oasis);
  color: var(--color-white);
  text-align: center;
  padding: 14px 24px;
}

.announcement-banner p {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.agents-section {
  background: var(--color-hardware);
  padding: 60px 48px;
  transition: padding 0.3s ease;
}

.sticky-nav-container.is-sticky .agents-section {
  padding: 16px 48px;
}

.agents-grid {
  display: flex;
  justify-content: center;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.agent-card {
  display: flex;
  align-items: center;
  gap: 24px;
}

.agent-photo {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-gray-bg);
  transition: width 0.3s ease, height 0.3s ease;
}

.sticky-nav-container.is-sticky .agent-photo {
  width: 60px;
  height: 60px;
}

.agent-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agent-name {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-white);
  margin: 0;
}

.agent-title,
.agent-phone,
.agent-email,
.agent-meta {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-white);
  margin: 0;
  transition: opacity 0.3s ease, max-height 0.3s ease;
  max-height: 50px;
  overflow: hidden;
}

/* Meta line ("29 Yrs Experience", "Hablo Español") — subtle note under contact. */
.agent-meta {
  font-size: 13px;
  font-style: italic;
  opacity: 0.85;
  margin-top: 4px;
}

.sticky-nav-container.is-sticky .agent-title,
.sticky-nav-container.is-sticky .agent-phone,
.sticky-nav-container.is-sticky .agent-email,
.sticky-nav-container.is-sticky .agent-meta {
  opacity: 0;
  max-height: 0;
}

.agent-phone a,
.agent-email a {
  color: var(--color-white);
  text-decoration: underline;
}

.agent-phone a:hover,
.agent-email a:hover {
  text-decoration: underline;
}

/* Community Secondary Navigation */
.community-nav {
  background: var(--color-nav-bg);
  padding: 24px 40px;
  transition: padding 0.3s ease;
}

.sticky-nav-container.is-sticky .community-nav {
  padding: 16px 40px;
}

.community-nav-links {
  display: flex;
  justify-content: center;
  gap: 48px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.community-nav-links a {
  font-family: var(--font-body);
  font-size: 12.18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-dark-walnut);
  text-decoration: none;
  transition: color 0.2s;
}

.community-nav-links a:hover {
  color: var(--color-desert-oasis);
}

.community-nav-links a.active {
  color: var(--color-desert-oasis);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Community Overview Section */
.community-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.community-overview-video {
  background: var(--color-black);
  aspect-ratio: 16/9;
  overflow: hidden;
}

.video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.community-video,
.community-overview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 12px;
  z-index: 10;
}

.video-control-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-white);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.video-control-btn svg {
  width: 24px;
  height: 24px;
}

.video-control-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

.community-overview-content {
  background: var(--color-gray-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.community-overview-title {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 700;
  color: var(--color-hardware);
  text-align: center;
  line-height: 1.2;
  max-width: 620px;
}

/* Community Details Section */
.community-details {
  background: var(--color-white);
  padding: 60px 48px;
}

.community-details-heading {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  color: var(--color-hardware);
  text-align: center;
  line-height: 1.4;
  margin: 0 auto 48px;
  max-width: 1440px;
}

.community-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 1440px;
  margin: 0 auto;
}

.community-details-text p {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-hardware);
  line-height: 1.8;
  margin-bottom: 16px;
}

.community-details-stats {
  background: var(--color-gray-bg);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon img,
.stat-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Filter to colorize to Desert Oasis teal #007179 */
  filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1000%) hue-rotate(166deg) brightness(95%) contrast(101%);
}

.stat-content {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
}

.stat-value {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-dark-walnut);
  line-height: 1.1;
}

.stat-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-hardware);
  letter-spacing: 0.05em;
}

/* Standard Features Section */
.standard-features {
  background: var(--color-gray-bg);
  padding: 48px;
}

.standard-features .features-grid {
  max-width: 1440px;
  margin: 0 auto;
}

.features-controls {
  display: flex;
  gap: 24px;
}

.features-control {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-hardware);
  cursor: pointer;
  padding: 0;
}

.features-control:hover {
  color: var(--color-desert-oasis);
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: stretch;
}

.features-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.features-content-wrap .features-controls {
  margin-bottom: 12px;
}

.feature-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-yuma-breeze);
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-white);
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
}

.feature-tab:hover {
  background: var(--color-yuma-nights);
}

.feature-tab.active {
  background: var(--color-yuma-nights);
}

.feature-tab .arrow-icon {
  width: 10px;
  height: 10px;
  margin-left: auto;
  transition: transform 0.2s ease;
}

.feature-tab:hover .arrow-icon,
.feature-tab.active .arrow-icon {
  transform: translate(3px, -3px);
}

.features-content-wrap {
  display: flex;
  flex-direction: column;
}

.features-content {
  background: var(--color-white);
  padding: 32px;
}

.features-collapse-all {
  display: none;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-hardware);
  cursor: pointer;
  padding: 16px 32px;
  text-align: right;
}

.features-collapse-all:hover {
  color: var(--color-desert-oasis);
}

.features-content-wrap.all-expanded .features-collapse-all {
  display: block;
}

.features-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-hardware);
  margin-bottom: 16px;
}

/* Mobile-only heading - hidden on desktop */
.features-title-mobile {
  display: none;
}

.feature-panel {
  display: none;
}

.feature-panel.active {
  display: block;
}

.feature-panel-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-hardware);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-hardware);
}

.feature-panel p {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-hardware);
  line-height: 1.8;
  margin-bottom: 16px;
}

.feature-panel ul {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-hardware);
  line-height: 1.8;
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}

.feature-panel li {
  margin-bottom: 8px;
}

.collapse-bottom {
  margin-top: 24px;
}

/* Pricing & Plans Section */
.pricing-plans {
  padding: 80px 48px;
  background: var(--color-white);
}

.pricing-plans-heading {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-hardware);
  text-align: center;
  margin-bottom: 48px;
}

.pricing-plans-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 0;
  max-width: 1440px;
  margin: 0 auto;
  border: 1px solid #d0cdc8;
  /* Stretch both columns to the same height so the plan list and the
     interactive panel always end on the same line. The plan rows carry their
     own dark background, so any space below the last row stays transparent. */
  align-items: stretch;
}

.plans-list {
  border-right: 1px solid #d0cdc8;
  overflow-y: auto;
}

/* Dark background lives on each row, not the container, so unused
   space below the rows stays transparent when there are fewer plans
   than the right panel's height (e.g. Barkley vs Livingston). */
.plan-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 19px 12px;
  background: var(--color-yuma-nights);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-align: left;
}

.plan-row.active {
  background: var(--color-yuma-breeze);
}

.plan-row:last-child {
  border-bottom: none;
}

.plan-thumbnail-wrap {
  flex-shrink: 0;
}

.plan-thumbnail {
  background: #e8e4de;
  position: relative;
  overflow: hidden;
}

.plan-thumbnail img {
  width: auto;
  height: 60px;
  object-fit: cover;
}

.plan-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.plan-number {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
  margin: 0;
}

.plan-detail-text {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-white);
  margin: 0;
  line-height: 1.5;
}

.plan-indicators {
  display: none;
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--color-white);
  background: transparent;
}

.indicator.active {
  background: var(--color-white);
}

/* Plan view toggle (Floor Plan / Interactive) */
.plan-view-toggle {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}

.plan-view-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}

.plan-view-link .arrow-icon {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.plan-view-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

.plan-view-link:hover .arrow-icon {
  transform: translate(3px, -3px);
}

.plan-view-link.active {
  color: var(--color-white);
}

/* Plans view switching */
.plans-view-interactive {
  background: var(--color-white);
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.plans-view-interactive.active {
  display: flex;
}

.plans-view-elevations {
  flex: 1;
  position: relative;
  visibility: hidden;
}

.plans-view-elevations.active {
  visibility: visible;
}

.floorplan-zoom-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floorplan-zoom-container.grabbing {
  cursor: grabbing;
}

.plans-view-interactive .floor-plan-image {
  display: block;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.15s ease;
  user-select: none;
}

.floorplan-zoom-container.grabbing .floor-plan-image {
  transition: none;
}

/* Every plan's viewer is mounted at once and kept alive; only the active one is
   shown. Inactive iframes stay laid out at full size but transparent (not
   display:none) so the size-dependent 3D viewer fully initialises in the
   background — switching then reveals an already-rendered view instantly. */
.floorplan-zoom-container .plans-floorplan-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.floorplan-zoom-container .plans-floorplan-iframe.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.floorplan-zoom-container .floor-plan-image {
  display: none;
}

.floorplan-zoom-container .floor-plan-image.active {
  display: block;
}

.floorplan-zoom-controls {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}

.floorplan-zoom-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(45, 44, 43, 0.7);
  color: var(--color-white);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.floorplan-zoom-btn:hover {
  background: rgba(45, 44, 43, 0.9);
}

/* Elevations Slider */
.elevations-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.elevations-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.elevations-slide.active {
  opacity: 1;
  position: relative;
}

.elevations-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.elevations-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(45, 44, 43, 0.7);
  border: none;
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s;
}

.elevations-nav:hover {
  background: rgba(45, 44, 43, 0.9);
}

.elevations-prev {
  left: 12px;
}

.elevations-next {
  right: 12px;
}

.elevations-nav svg {
  width: 20px;
  height: 20px;
}

.elevations-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.elevations-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.2s;
}

.elevations-dot.active {
  background: var(--color-white);
}

/* Mobile plans navigation - hidden on desktop */
.plans-mobile-nav {
  display: none;
}

.plans-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.plans-nav-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.plans-nav-btn svg {
  width: 20px;
  height: 20px;
}

.plans-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.plans-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--color-white);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease;
}

.plans-dot.active {
  background: var(--color-white);
}

.plans-interactive {
  background: var(--color-white);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

/* Tap-to-open full-screen interactive viewer (mobile/tablet only). The inline
   ML3DS embed is unusable at small sizes, so below 1024px we hide it behind a
   tappable static preview that launches the viewer full-screen. Desktop keeps
   the inline embed and never shows the launch button or modal. */
.plans-mobile-launch {
  display: none;
}

.plans-fs-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plans-fs-modal[hidden] {
  display: none;
}

.plans-fs-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.94);
}

.plans-fs-body {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.plans-fs-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.plans-fs-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.plans-fs-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(45, 44, 43, 0.85);
  color: var(--color-white);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plans-fs-close:hover {
  background: rgba(45, 44, 43, 1);
}

.interactive-placeholder {
  display: block;
  position: relative;
  flex: 1;
}

.interactive-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), #d0cdc8, transparent calc(50% + 1px)),
              linear-gradient(to top right, transparent calc(50% - 1px), #d0cdc8, transparent calc(50% + 1px));
}

.interactive-placeholder span {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-hardware);
  position: relative;
  z-index: 1;
}

.interactive-floor-plan-image {
  display: block;
  width: 100%;
  height: auto;
}

.interactive-placeholder:has(.interactive-floor-plan-image)::before {
  display: none;
}

/* Gallery is a horizontal thumbnail strip below the viewer (not an overlay), so
   the interactive viewer keeps its full width and all of its own tools/zoom
   slider, and the strip never covers anything. */
.plans-carousel {
  grid-column: 1 / -1;
  background: var(--color-yuma-nights);
  border-top: 1px solid #d0cdc8;
  padding: 16px 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

/* Reveal/collapse were part of the old overlay; the strip is always shown now. */
.plans-carousel.revealed,
.plans-carousel.collapsed {
  transform: none;
}

/* Carousel Toggle Buttons */
.carousel-toggle {
  position: absolute;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--color-hardware);
  transition: color 0.2s, opacity 0.3s;
  z-index: 5;
}

.carousel-toggle:hover {
  color: var(--color-desert-oasis);
}

.carousel-toggle .arrow-icon {
  width: 14px;
  height: 14px;
}

/* Collapsed state toggle - sits in top right of plans-interactive area */
.carousel-toggle.collapsed {
  top: 12px;
  right: 12px;
  transform: none;
  opacity: 0;
  pointer-events: none;
  background: rgba(60, 60, 60, 0.75);
  border-radius: 4px;
  padding: 8px 12px;
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: 6px;
}

.carousel-toggle.collapsed .arrow-icon {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.carousel-toggle.collapsed .view-text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.carousel-toggle.collapsed:hover {
  background: rgba(80, 80, 80, 0.75);
}

.carousel-toggle.collapsed:hover .arrow-icon {
  transform: rotate(180deg) translate(3px, -3px);
  color: var(--color-yuma-breeze);
}

.carousel-toggle.collapsed.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Expanded state toggle - sits at top right of carousel */
.carousel-toggle.expanded {
  top: 10px;
  right: 10px;
  left: auto;
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: 4px;
}

.carousel-toggle.expanded:hover {
  color: #e0e0e0;
}

.carousel-toggle.expanded .hide-text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.carousel-toggle.expanded .arrow-icon {
  transform: rotate(0deg);
  transition: transform 0.2s ease, color 0.2s ease;
}

.carousel-toggle.expanded:hover .arrow-icon {
  transform: translate(3px, -3px);
  color: var(--color-yuma-breeze);
}

.plans-carousel-label {
  display: none;
}

.plans-carousel-track {
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  align-items: center;
  flex: 1;
  /* Right-align thumbnails so they read as belonging to the selected plan's
     viewer (right column) rather than the plan list on the left. */
  justify-content: flex-end;
}

.carousel-thumb {
  width: 96px;
  height: 68px;
  background-size: cover;
  background-position: center center;
  background-color: var(--color-white);
  border: 1px solid #d0cdc8;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}

.carousel-thumb:hover {
  border-color: var(--color-yuma-nights);
}

.carousel-thumb.active {
  border-color: var(--color-desert-oasis);
  border-width: 2px;
  transform: scale(1.05);
}

/* ==========================================================================
   GALLERY LIGHTBOX MODAL
   ========================================================================== */
.gallery-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-lightbox[hidden] {
  display: none;
}

.lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(45, 44, 43, 0.85);
}

.lightbox-content {
  position: relative;
  width: 90%;
  max-width: 1400px;
  /* Leave room above/below for the close button, counter and zoom controls
     (which sit outside the content box) so nothing gets clipped. */
  height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 40px;
  cursor: pointer;
  padding: 10px;
  line-height: 1;
  transition: opacity 0.2s;
}

.lightbox-close:hover {
  opacity: 0.7;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--color-white);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 10;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
  left: -70px;
}

.lightbox-next {
  right: -70px;
}

.lightbox-prev svg,
.lightbox-next svg {
  width: 24px;
  height: 24px;
}

.lightbox-image-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lightbox-image {
  max-width: 100%;
  max-height: calc(100% - 60px);
  object-fit: contain;
  cursor: zoom-in;
  transform-origin: center center;
  transition: transform 0.15s ease;
  will-change: transform;
  touch-action: none;
}

.lightbox-image.is-zoomed {
  cursor: grab;
}

.lightbox-image.is-dragging {
  cursor: grabbing;
  transition: none;
}

/* Zoom controls (bottom-right of the lightbox) */
.lightbox-zoom {
  position: absolute;
  bottom: -44px;
  right: 0;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.lightbox-zoom-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.lightbox-zoom-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.lightbox-caption {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  margin-top: 16px;
  padding: 0 40px;
  max-width: 800px;
}

.lightbox-counter {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   LOT AVAILABILITY SECTION
   ========================================================================== */
.lot-availability {
  background: var(--color-gray-bg);
  padding: 80px 40px;
}

.lot-availability-heading {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-hardware);
  text-align: center;
  margin-bottom: 48px;
}

.lot-availability-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  max-width: 1440px;
  margin: 0 auto;
  align-items: start;
}

.lot-map {
  background: var(--color-white);
  border: 1px solid #d0cdc8;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}

.lot-map img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
  transform-origin: center center;
}

.lot-map.zoomed {
  cursor: grab;
}

.lot-map.zoomed.dragging {
  cursor: grabbing;
}

.lot-map.zoomed img {
  transform: scale(2.5);
}

.lot-map-zoom-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #d0cdc8;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  z-index: 5;
}

.lot-map-zoom-hint svg {
  width: 20px;
  height: 20px;
  color: var(--color-hardware);
}

.lot-map-zoom-hint:hover {
  background: var(--color-white);
}

.lot-map.zoomed .lot-map-zoom-hint svg line:nth-child(3),
.lot-map.zoomed .lot-map-zoom-hint svg line:nth-child(4) {
  display: none;
}

.lot-map.zoomed .lot-map-zoom-hint::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 2px;
  background: var(--color-hardware);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lot-table-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lot-filter-buttons {
  display: grid;
  /* Wrap buttons onto extra rows instead of squeezing columns narrower than
     their longest word ("Available"), which made the text break out of the
     box on smaller screens. The em minimum tracks the responsive font size. */
  grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
  gap: 6px;
  margin-bottom: 16px;
}

.lot-filter-btn {
  min-width: 0;
  padding: 8px 6px;
  border: 2px solid var(--color-yuma-nights);
  background: var(--color-white);
  color: var(--color-yuma-nights);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Status filter buttons double as the colour legend — each carries its lot
   status colour as a constant fill (the standalone legend bar was dropped). */
.lot-filter-btn[data-filter="available"] { background: var(--lot-available); }
.lot-filter-btn[data-filter="spec"] { background: var(--lot-spec); }
.lot-filter-btn[data-filter="model"] { background: var(--lot-model); }
.lot-filter-btn[data-filter="sold"] { background: var(--lot-sold); }

/* Hover/active keep the button's own fill so the legend colour stays visible. */
.lot-filter-btn:hover {
  filter: brightness(0.96);
}

.lot-filter-btn.active {
  box-shadow: 0 0 0 3px var(--color-dark-walnut);
  position: relative;
  z-index: 1;
}

.lot-table-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  min-height: 0;
}

.lot-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}

.lot-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.lot-table thead::before {
  content: '';
  position: absolute;
  top: -500px;
  left: -10px;
  right: -10px;
  height: 500px;
  background: var(--color-yuma-nights);
  z-index: -1;
}

.lot-table thead th {
  background: var(--color-yuma-nights);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 16px;
  text-align: center;
  border: 2px solid var(--color-yuma-nights);
}

.lot-table tbody td {
  background: var(--color-white);
  padding: 8px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-hardware);
  border: 2px solid var(--color-yuma-nights);
}

.lot-table tbody tr:hover td {
  background: var(--color-nav-bg);
}

.lot-sold {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lot-table tbody tr:has(.lot-sold) td {
  background: var(--color-yuma-breeze);
  color: var(--color-white);
}

.lot-table tbody tr:has(.lot-sold):hover td {
  background: #5a7389;
}

.lot-available {
  color: var(--color-desert-oasis);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Interactive lot map (Phase pages): inline-SVG lots coloured by status,
   legend, hover tooltip, and table<->map sync.
   -------------------------------------------------------------------------- */
.lot-availability {
  /* Palette per client (matches the Barkley map):
     Available = Desert Palms, Available Spec = Yuma Breeze,
     Model Home = Desert Oasis, Sold = Yuma Night. */
  --lot-available: #bcc1b2;
  --lot-spec: #b9c3cc;
  --lot-model: #8ea6ad;
  --lot-sold: #8b8c95;
}

/* Inline SVG map container — zoom is via the hint button (lots stay clickable) */
.lot-map--svg {
  cursor: default;
  background: #f5f0e0;
}

.lot-map-svg {
  display: block;
  width: 100%;
  transition: transform 0.3s ease;
  transform-origin: center center;
}

.lot-map-svg svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Leaflet-style +/- zoom control, top-left of the map (transform is driven
   entirely by main.js via an inline style on .lot-map-svg). */
.lot-map-zoom {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.lot-map-zoom-btn {
  width: 34px;
  height: 34px;
  border: 0;
  background: var(--color-white);
  color: var(--color-hardware);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.lot-map-zoom-btn + .lot-map-zoom-btn {
  border-top: 1px solid #d0cdc8;
}

.lot-map-zoom-btn:hover {
  background: var(--color-nav-bg);
}

.lot-map-zoom-btn:disabled {
  color: #bdbab4;
  cursor: default;
  background: var(--color-white);
}

/* Lot polygons — fill by status (beats the SVG's own `.s1 { fill:none }`
   and the inline fill="transparent" via higher specificity). */
.lot-map-svg svg path.lot-path {
  cursor: pointer;
  fill-opacity: 1;
  transition: fill-opacity 0.15s ease, stroke-width 0.15s ease, filter 0.15s ease;
}

.lot-map-svg svg path.lot-path--available { fill: var(--lot-available); }
.lot-map-svg svg path.lot-path--spec { fill: var(--lot-spec); }
.lot-map-svg svg path.lot-path--model { fill: var(--lot-model); }
.lot-map-svg svg path.lot-path--sold { fill: var(--lot-sold); }

.lot-map-svg svg path.lot-path.is-active {
  filter: brightness(0.92);
  stroke-width: 3;
}

.lot-map-svg svg path.lot-path.is-selected {
  stroke: var(--color-dark-walnut);
  stroke-width: 3.5;
}

/* Filtered-out lots fade to a light neutral beige (distinct from the
   light-green Available) so the map stays readable, never blank. */
.lot-map-svg svg path.lot-path.is-dimmed {
  fill: #e4e0d6;
  fill-opacity: 0.9;
}

/* Lot number labels (generated in main.js, centered in each polygon) */
.lot-map-svg svg text.lot-label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  fill: var(--color-hardware);
  pointer-events: none;
  user-select: none;
}

.lot-map-svg svg text.lot-label.is-active {
  fill: var(--color-dark-walnut);
}

.lot-map-svg svg text.lot-label.is-dimmed {
  opacity: 0.4;
}

/* Hover tooltip on the map */
.lot-tooltip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  background: var(--color-yuma-nights);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.lot-tooltip.visible { opacity: 1; }

.lot-tooltip-note {
  display: block;
  font-weight: 500;
  font-size: 11px;
  opacity: 0.9;
}

.lot-tooltip-status {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}

/* Optional description under the lot number (from the Description field, or
   any wording typed after the number in "Lot #"). */
.lot-cell-note {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-hardware);
  opacity: 0.8;
}

/* Status pill in the table — filled badge (the palette is too light for text) */
.lot-status {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 11px;
  font-weight: 700;
  font-size: 11px;
  color: var(--color-hardware);
  white-space: nowrap;
}

.lot-status--available { background: var(--lot-available); }
.lot-status--spec { background: var(--lot-spec); }
.lot-status--model { background: var(--lot-model); }
.lot-status--sold { background: var(--lot-sold); }

/* Table <-> map highlight + selection */
.lot-table tbody tr.is-active td { background: var(--color-nav-bg); }
.lot-table tbody tr.is-selected td {
  outline: 2px solid var(--color-dark-walnut);
  outline-offset: -2px;
}

/* ==========================================================================
   SPEC HOMES CAROUSEL
   ========================================================================== */
.spec-homes-carousel {
  background: var(--color-desert-palms);
  padding: 60px 0;
}

.spec-homes-header {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1296px;
  margin: 0 auto 32px;
  padding: 0 48px;
}

.spec-homes-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-white);
}

.spec-homes-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-yuma-nights);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0.6;
  transition: opacity 0.3s ease, background 0.3s ease;
}

.spec-homes-arrow:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 1);
}

.spec-homes-arrow svg {
  width: 24px;
  height: 24px;
}

.spec-homes-prev {
  left: 16px;
}

.spec-homes-next {
  right: 16px;
}

.spec-homes-track-wrap {
  position: relative;
}

.spec-homes-track-wrap::before,
.spec-homes-track-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: max(32px, calc((100vw - 1200px) / 2 - 40px));
  z-index: 2;
  pointer-events: none;
}

.spec-homes-track-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--color-desert-palms), transparent);
}

.spec-homes-track-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--color-desert-palms), transparent);
}

.spec-homes-track {
  display: flex;
  gap: 32px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  padding: 0 max(48px, calc((100vw - 1200px) / 2));
}

.spec-home-card {
  flex: 0 0 calc((1200px - 64px) / 3);
  background: var(--color-white);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

.spec-home-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.spec-home-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.spec-home-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spec-home-info {
  position: relative;
  padding: 20px 24px 0;
}

.spec-home-price {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-yuma-nights);
  margin-bottom: 4px;
}

.spec-home-lot {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-desert-oasis);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.spec-home-name-bar {
  background: var(--color-hardware);
  padding: 12px 24px;
  text-align: center;
}

.spec-home-plan {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-white);
  margin: 0;
}

.spec-home-details,
.spec-home-sqft {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-yuma-nights);
  line-height: 1.5;
}

.spec-home-sqft {
  margin-bottom: 16px;
}

.spec-home-links {
  position: absolute;
  top: 20px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.spec-home-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-yuma-nights);
  background: var(--color-white);
  border: 1.5px solid var(--color-yuma-nights);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.spec-home-link .arrow-icon {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.spec-home-link:hover {
  background: var(--color-yuma-nights);
  color: var(--color-white);
}

.spec-home-link:hover .arrow-icon {
  transform: translate(3px, -3px);
}

/* PDF Viewer Modal */
.pdf-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdf-modal[hidden] {
  display: none;
}

.pdf-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.pdf-modal-content {
  position: relative;
  width: 90vw;
  height: 90vh;
  max-width: 1000px;
  background: var(--color-white);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.pdf-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.pdf-modal-close:hover {
  opacity: 0.7;
}

.pdf-modal-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Floorplan Image Modal */
.floorplan-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floorplan-modal[hidden] {
  display: none;
}

.floorplan-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.floorplan-modal-content {
  position: relative;
  width: 90vw;
  max-width: 900px;
  max-height: 90vh;
}

.floorplan-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  z-index: 1;
}

.floorplan-modal-close:hover {
  opacity: 0.7;
}

.floorplan-modal-img {
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}

/* ==========================================================================
   COMMUNITY FOOTER
   ========================================================================== */
.community-footer {
  background: var(--color-hardware);
}

.community-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.community-footer .footer-map {
  min-height: 400px;
}

.community-footer .footer-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  /* Dark-mode map: invert colors so the background reads black and the
     labels/roads appear light, then hue-rotate to neutralize the cyan shift
     that invert() introduces. Grayscale keeps the result neutral. */
  filter: invert(1) hue-rotate(180deg) grayscale(100%) contrast(1.05);
}

.community-footer .footer-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 40px;
}

.footer-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.footer-contact .footer-instagram {
  margin-top: 24px;
}

.footer-col-heading {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 24px;
}

/* Office Hours */
.hours-list {
  margin: 0;
  padding: 0;
}

.hours-row {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  max-width: 250px;
}

.hours-row:first-child {
  border-top: none;
  padding-top: 0;
}

.hours-row dt {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-white);
  min-width: 80px;
}

.hours-row dd {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* Contact / Phone Button */
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.btn-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-desert-oasis);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}

.btn-phone:hover {
  background: #005f66;
  transform: translateY(-2px);
}

.btn-phone svg {
  width: 20px;
  height: 20px;
}

.footer-instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: color 0.2s, transform 0.2s;
}

.footer-instagram:hover {
  color: var(--color-desert-oasis);
  transform: translateY(-2px);
}

.footer-instagram svg {
  width: 28px;
  height: 28px;
}

/* Map */
.map-container {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.map-container iframe {
  display: block;
}

/* ==========================================================================
   CONTENT INTRO SECTION
   Image + text block for narrative content (company story, page intros)
   ========================================================================== */
.content-intro {
  padding: 100px 0;
  overflow: hidden;
}

.content-intro--gray {
  background: var(--color-gray-bg);
}

.content-intro--white {
  background: var(--color-white);
}

/* Image Feature — single centered photo */
.image-feature {
  padding: 0 0 100px;
  background: var(--color-white);
}

.image-feature-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  justify-content: center;
}

.image-feature-inner > img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
}

.content-intro-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  align-items: center;
}

.content-intro--reverse .content-intro-main {
  direction: rtl;
}

.content-intro--reverse .content-intro-main > * {
  direction: ltr;
}

.content-intro-image {
  position: relative;
}

.content-intro-image > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.content-intro-image > img.img-top {
  object-position: center top;
}

.content-intro-image > img.img-bottom {
  object-position: center bottom;
}

.content-intro-content {
  padding: 0;
  max-width: 480px;
}

.content-intro-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-desert-oasis);
  margin-bottom: 16px;
}

.content-intro-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-hardware);
  line-height: 1.3;
  margin-bottom: 24px;
}

.content-intro-text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 2;
  letter-spacing: -0.003em;
  color: var(--color-yuma-nights);
  margin-bottom: 16px;
}

.content-intro-text:last-of-type {
  margin-bottom: 24px;
}

.content-intro-text strong {
  font-weight: 700;
}

.content-intro-below {
  max-width: 1200px;
  margin: 56px auto 0;
  padding: 0 48px;
  text-align: center;
}

.content-intro-below .content-intro-text {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.content-intro-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-hardware);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}

.content-intro-link:hover {
  color: var(--color-desert-oasis);
}

/* Two images side-by-side in the image column. Stretch to the full row
   height so the pair matches the text block (parent uses align-items: center);
   the images grow wider to fill the column at that height. */
.content-intro-image--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-self: stretch;
}

.content-intro-image--pair > img {
  height: 100%;
  border-radius: 5px;
}

/* When the intro shows a two-image pair (e.g. Explore Yuma), give the image
   column more of the row so the photos read wider. Above the mobile stack
   breakpoint only, so the ≤768px single-column layout is untouched. */
@media (min-width: 769px) {
  .content-intro-main:has(.content-intro-image--pair) {
    grid-template-columns: 1.7fr 1fr;
    gap: 48px;
    max-width: 1320px;
  }
}

/* CTA rendered as a solid button (e.g. "Visit Yuma") */
.content-intro-button {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-white);
  background: #007179;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 2px;
  transition: background 0.2s;
}

.content-intro-button:hover {
  background: #005a61;
  color: var(--color-white);
}

/* ==========================================================================
   ICON GRID SECTION
   Grid of icon cards for amenities, services, or feature highlights
   ========================================================================== */
.icon-grid {
  padding: 100px 0;
  overflow: hidden;
}

.icon-grid--gray {
  background: var(--color-gray-bg);
}

.icon-grid--white {
  background: var(--color-white);
}

.icon-grid-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

.icon-grid-header {
  text-align: center;
  margin-bottom: 64px;
}

.icon-grid-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-desert-oasis);
  margin-bottom: 16px;
}

.icon-grid-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-hardware);
  line-height: 1.3;
}

.icon-grid-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px 40px;
}

.icon-grid-card {
  text-align: center;
  padding: 0 16px;
  width: calc((100% - 80px) / 3);
}

.icon-grid-card-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-desert-oasis);
}

.icon-grid-card-icon svg {
  width: 100%;
  height: 100%;
}

.icon-grid-card-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-hardware);
  margin-bottom: 12px;
}

.icon-grid-card-text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--color-yuma-nights);
}

/* ==========================================================================
   PHOTO STRIP SECTION
   Full-width photo band used as a visual spacer between sections
   ========================================================================== */
.photo-strip {
  width: 100%;
  height: 180px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ==========================================================================
   STATS BAR SECTION
   Horizontal strip of key statistics/numbers
   ========================================================================== */
.stats-bar {
  background: var(--color-hardware);
  padding: 56px 0;
  overflow: hidden;
}

.stats-bar--walnut {
  background: var(--color-dark-walnut);
}

.stats-bar--oasis {
  background: var(--color-desert-oasis);
}

.stats-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 56px 80px;
}

.stats-bar-item {
  text-align: center;
  flex: 0 1 auto;
  max-width: calc(25% - 60px);
}

.stats-bar-value {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.1;
  margin-bottom: 8px;
}

.stats-bar-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   TEXT COLUMNS SECTION
   Two-column text layout with centered heading
   ========================================================================== */
.text-columns {
  padding: 100px 0;
  overflow: hidden;
}

.text-columns--gray {
  background: var(--color-gray-bg);
}

.text-columns--white {
  background: var(--color-white);
}

.text-columns-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

.text-columns-header {
  text-align: center;
  margin-bottom: 56px;
}

.text-columns-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-desert-oasis);
  margin-bottom: 16px;
}

.text-columns-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-hardware);
  line-height: 1.3;
}

.text-columns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.text-columns-col h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-hardware);
  margin-bottom: 16px;
}

.text-columns-col p {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-yuma-nights);
  line-height: 1.8;
  margin-bottom: 16px;
}

.text-columns-col p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  /* Anchor link offset for sticky header on tablet */
  [id] {
    scroll-margin-top: 160px;
  }

  .community-details[id],
  .standard-features[id],
  .pricing-plans[id] {
    scroll-margin-top: 190px;
  }

  .nav-links,
  .utility-nav,
  .utility-bar {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .header-lines {
    display: none;
  }

  .site-header .logo {
    left: 20px;
    right: auto;
  }

  .logo-img {
    height: 55px;
  }

  .site-header.is-scrolled .logo-img {
    height: 55px;
  }

  .site-header.is-scrolled .main-nav {
    padding: 38px 24px;
  }

  .main-nav {
    padding: 38px 24px;
  }

  .mobile-nav {
    top: 95px;
  }

  .hero {
    height: 35vh;
    min-height: 260px;
    margin-top: 75px;
    background-position: center 0%;
  }

  .hero-content {
    top: 150px;
  }

  .nav-container {
    padding-left: 60px;
  }

  .intake-row {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .intake-form-wrap {
    padding: 24px 24px 24px 80px;
    justify-content: flex-start;
    min-width: 50%;
  }

  .intake-form-section {
    padding: 60px 80px;
  }

  .intake-form-wrap-boxed {
    padding: 40px 40px;
  }

  .intake-form .form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .intake-form .form-field input,
  .intake-form .form-field select {
    padding: 12px 14px;
    font-size: 14px;
  }

  .intake-form .form-field label {
    font-size: 11px;
  }

  .intake-form .form-footer {
    margin-top: 20px;
  }

  .intake-form .btn-submit {
    padding: 12px 24px;
    font-size: 14px;
  }

  .intake-content {
    padding: 34px 24px 34px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 50%;
  }

  .community-row,
  .hh-difference-main {
    grid-template-columns: 1fr 1fr;
  }

  .community-row-short {
    height: 400px;
  }

  .community-images,
  .community-content {
    width: 100%;
    min-width: 0;
  }

  .community-images {
    height: 100%;
    min-height: unset;
  }

  .community-content {
    padding: 34px 24px 34px 80px;
  }

  .hero-title {
    font-size: 48px;
  }

  .community-title {
    font-size: 40px;
  }

  .intake-title {
    font-size: 36px;
  }

  .page-header h1 {
    font-size: 40px;
  }

  .content-section h2 {
    font-size: 28px;
  }

  /* Carousel responsive */
  .explore-carousel {
    padding: 60px 0 0 24px;
  }

  .explore-carousel-track {
    gap: 24px;
    padding: 0 24px 0 0;
  }

  .explore-slide {
    flex: 0 0 calc(50% - 12px);
    min-width: 240px;
  }

  .carousel-arrow {
    width: 40px;
    height: 40px;
  }

  .carousel-arrow-left {
    left: 12px;
  }

  .carousel-arrow-right {
    right: 12px;
  }

  /* History carousel responsive */
  .history-section {
    padding: 8px 0 60px;
  }

  .history-title {
    font-size: 28px;
  }

  .history-card {
    flex: 0 0 360px;
    min-width: 360px;
    min-height: 420px;
  }

  .history-card--text {
    padding: 40px 36px;
  }

  /* HH Difference responsive */
  .hh-difference {
    padding: 60px 0;
  }

  .hh-difference-main {
    padding: 0 24px;
  }

  /* Lot Availability responsive */
  .lot-availability {
    padding: 60px 24px;
  }

  .lot-availability-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .lot-table-container {
    height: auto !important;
  }

  .lot-table-wrap {
    max-height: 350px;
  }

  .lot-filter-buttons {
    gap: 6px;
    margin-bottom: 12px;
  }

  .lot-filter-btn {
    padding: 6px 12px;
    font-size: 11px;
  }

  .lot-table thead th,
  .lot-table tbody td {
    padding: 8px 12px;
    font-size: 12px;
  }

  /* Community Overview responsive */
  .community-overview {
    grid-template-columns: 1fr;
  }

  .community-overview-content {
    padding: 32px 24px;
  }

  .community-overview-title {
    font-size: 36px;
  }

  /* Spec Homes Carousel responsive - tablet */
  .spec-homes-carousel {
    padding: 48px 0;
  }

  .spec-homes-header {
    padding: 0 32px;
  }

  .spec-homes-title {
    font-size: 28px;
  }

  .spec-homes-track {
    gap: 24px;
    padding: 0 32px;
  }

  .spec-home-card {
    flex: 0 0 calc(50% - 12px);
  }

  .spec-homes-track-wrap::before,
  .spec-homes-track-wrap::after {
    display: none;
  }

  /* Agents Section responsive */
  .agents-section {
    padding: 24px;
  }

  .agents-grid {
    gap: 20px;
  }

  .agent-card {
    flex-direction: row;
    text-align: left;
    gap: 16px;
  }

  .agent-photo {
    width: 80px;
    height: 80px;
  }

  .sticky-nav-container.is-sticky .agent-photo {
    width: 50px;
    height: 50px;
  }

  .agent-name {
    font-size: 14px;
  }

  .agent-title,
  .agent-phone,
  .agent-email {
    font-size: 11px;
  }

  /* Community Nav responsive */
  .community-nav {
    padding: 12px 24px;
  }

  /* Keep the same horizontal padding when stuck so the links don't reflow
     (the base sticky rule's 40px side padding would otherwise win on specificity). */
  .sticky-nav-container.is-sticky .community-nav {
    padding: 12px 24px;
  }

  .community-nav-links {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .community-nav-links a {
    font-size: 11px;
    padding: 6px 12px;
  }

  /* Community Details responsive */
  .community-details {
    padding: 40px 24px;
  }

  .community-details-heading {
    font-size: 22px;
    margin-bottom: 32px;
  }

  .community-details-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Standard Features responsive */
  .features-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .features-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
    justify-content: center;
  }

  .features-content-wrap .features-controls {
    justify-content: center;
  }

  .feature-tab {
    padding: 8px 16px;
    font-size: 11px;
  }

  .features-content-wrap {
    padding: 24px;
  }

  .features-title {
    font-size: 28px;
    text-align: center;
  }

  /* Show mobile heading above blue boxes on tablet */
  .features-title-mobile {
    display: block;
    padding: 0 16px;
  }

  .features-content-wrap .features-title {
    display: none;
  }

  /* Pricing Plans responsive - Tablet 3-column */
  .pricing-plans {
    padding: 60px 24px;
  }

  .pricing-plans-heading {
    font-size: 28px;
  }

  .pricing-plans-grid {
    grid-template-columns: 1fr;
  }

  .plans-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-right: none;
  }

  .plan-row {
    display: none;
    flex-direction: column;
    text-align: center;
    padding: 16px;
    gap: 8px;
    border-bottom: none;
    border-right: 1px solid #d0cdc8;
  }

  .plan-row.visible {
    display: flex;
  }

  .plan-row:last-child {
    border-right: none;
  }

  .plan-row.active {
    background: var(--color-yuma-breeze);
  }

  .plan-row.active .plan-number,
  .plan-row.active .plan-detail-text {
    color: var(--color-white);
  }

  .plan-view-toggle {
    display: block;
    justify-content: center;
    margin-left: 0;
    width: 100%;
  }

  .plan-thumbnail-wrap {
    width: 100px;
    height: auto;
    margin: 0 auto;
  }

  .plan-thumbnail img {
    height: auto;
    width: 100%;
  }

  .plan-info {
    text-align: center;
  }

  .plan-number {
    font-size: 16px;
  }

  .plan-detail-text {
    font-size: 12px;
  }

  .plans-mobile-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--color-yuma-nights);
    grid-column: 1 / -1;
  }

  .plans-interactive {
    border-top: 1px solid #d0cdc8;
    min-height: 58vh;
  }

  /* Cover the cramped inline embed with a tappable preview that opens the
     viewer full-screen. */
  .plans-mobile-launch {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: var(--color-yuma-nights);
    cursor: pointer;
    overflow: hidden;
  }

  .plans-mobile-launch-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: var(--color-white);
  }

  .plans-mobile-launch-cta {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: rgba(45, 44, 43, 0.92);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  }

  .plans-mobile-launch-cta svg {
    flex: 0 0 auto;
  }

  /* Community Footer responsive */
  .community-footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .community-footer .footer-map {
    min-height: 300px;
  }

  .community-footer .footer-map iframe {
    min-height: 300px;
  }

  .community-footer .footer-info {
    padding: 48px 24px;
    text-align: center;
  }

  .footer-info-grid {
    grid-template-columns: 1fr;
  }

  .footer-contact {
    align-items: center;
  }

  .hours-list {
    display: inline-block;
    text-align: left;
  }

  .hours-row {
    max-width: none;
  }

  .footer-col-heading {
    font-size: 18px;
    margin-bottom: 20px;
  }

  /* Content Intro - Tablet */
  .content-intro {
    padding: 72px 0;
  }

  .content-intro-main {
    gap: 40px;
    padding: 0 32px;
  }

  .content-intro-below {
    margin-top: 40px;
    padding: 0 32px;
  }

  .content-intro-content {
    max-width: none;
  }

  .content-intro-title {
    font-size: 28px;
  }

  /* Icon Grid - Tablet */
  .icon-grid {
    padding: 72px 0;
  }

  .icon-grid-inner {
    padding: 0 32px;
  }

  .icon-grid-cards {
    gap: 40px 32px;
  }

  .icon-grid-card {
    width: calc((100% - 64px) / 3);
  }

  /* Stats Bar - Tablet */
  .stats-bar-inner {
    gap: 48px;
    padding: 0 32px;
  }

  .stats-bar-value {
    font-size: 32px;
  }

  /* Text Columns - Tablet */
  .text-columns {
    padding: 72px 0;
  }

  .text-columns-inner {
    padding: 0 32px;
  }

  .text-columns-grid {
    gap: 32px;
  }
}

@media (max-width: 768px) {
  /* Anchor link offset for sticky header on mobile */
  [id] {
    scroll-margin-top: 320px;
  }

  .community-details[id],
  .standard-features[id],
  .pricing-plans[id] {
    scroll-margin-top: 360px;
  }

  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body > * {
    max-width: 100%;
    overflow-x: hidden;
  }

  main {
    overflow-x: hidden;
    max-width: 100%;
  }

  section {
    max-width: 100%;
    overflow-x: hidden;
  }

  .btn {
    min-width: auto;
    font-size: 16px;
  }

  .main-nav {
    padding: 24px 24px;
  }

  .site-header.is-scrolled .main-nav {
    padding: 24px 24px;
  }

  .site-header .logo {
    left: 20px;
    right: auto;
  }

  .logo-img {
    height: 45px;
  }

  .site-header.is-scrolled .logo-img {
    height: 38px;
  }

  .mobile-nav {
    top: 70px;
    padding: 20px 24px 24px;
  }

  .hero {
    padding: 100px 24px 24px;
    min-height: 225px;
    height: 35vh;
    margin-top: 55px;
  }

  .hero-content {
    top: 100px;
    padding: 10px 16px 14px 16px;
    max-width: calc(100% - 60px);
    flex-wrap: wrap;
  }

  .hero-title {
    font-size: 36px;
  }

  .hero-eyebrow {
    font-size: 12px;
  }

  .community-row {
    grid-template-columns: 1fr;
  }

  .community-row-reverse {
    direction: ltr;
  }

  .community-images {
    min-height: unset;
    order: 2;
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .community-row-short {
    height: auto;
  }

  .community-content {
    order: 1;
  }

  .community-content {
    padding: 32px 16px 32px 109px;
  }

  .intake-content {
    padding: 32px 16px 32px 109px;
  }

  .community-title {
    font-size: 32px;
  }

  .community-label {
    font-size: 11px;
    margin-bottom: 12px;
  }

  .community-link {
    margin-top: 32px;
  }

  .community-content .btn {
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .hh-difference-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
  }

  .hh-difference-image {
    margin-bottom: 48px;
  }

  .hh-difference-content {
    max-width: 100%;
  }

  .hh-difference-title {
    font-size: 28px;
  }

  .hh-difference-text {
    font-size: 14px;
    line-height: 1.8;
  }

  .intake-form-wrap {
    padding: 32px 24px;
  }

  .intake-form-section {
    padding: 40px 24px;
  }

  .intake-form-wrap-boxed {
    padding: 32px 24px;
  }

  .intake-row {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .intake-content {
    order: -1;
  }

  .intake-title {
    font-size: 32px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  /* Carousel mobile */
  .explore-carousel {
    padding: 40px 0 0 16px;
  }

  .explore-carousel-track {
    gap: 16px;
    padding: 0 16px 0 0;
  }

  .explore-slide {
    flex: 0 0 calc(75% - 8px);
    min-width: 200px;
  }

  .explore-carousel-track {
    padding: 0 16px 0 0;
  }

  .explore-slide-label {
    padding: 24px 0;
  }

  .explore-slide-title {
    font-size: 16px;
  }

  .carousel-arrow {
    width: 36px;
    height: 36px;
    opacity: 0.7;
  }

  .carousel-arrow:hover {
    opacity: 0.9;
  }

  .carousel-arrow svg {
    width: 20px;
    height: 20px;
  }

  .carousel-arrow-left {
    left: 8px;
  }

  .carousel-arrow-right {
    right: 8px;
  }

  /* History carousel mobile */
  .history-section {
    padding: 8px 0 48px;
  }

  .history-header {
    margin-bottom: 36px;
    padding: 0 24px;
  }

  .history-title {
    font-size: 26px;
  }

  .history-intro {
    font-size: 16px;
  }

  .history-carousel-track {
    gap: 16px;
    padding: 0 24px;
  }

  .history-card {
    flex: 0 0 80%;
    min-width: 260px;
    min-height: 0;
  }

  .history-card--photo {
    aspect-ratio: 3 / 4;
  }

  .history-card--text {
    padding: 32px 28px;
  }

  .history-card-heading {
    font-size: 23px;
  }

  /* Landscape banner mobile */
  .landscape-banner {
    height: 150px;
  }

  .landscape-banner > img {
    height: 100%;
    object-fit: cover;
  }

  .landscape-banner-logo img {
    height: 40px;
  }

  .footer-inner {
    min-height: 180px;
  }

  .page-header {
    padding: 80px 24px;
  }

  .page-header h1 {
    font-size: 32px;
  }

  .content-section {
    padding: 40px 24px;
  }

  .content-section h2 {
    font-size: 24px;
  }

  .contact-info {
    padding: 24px;
  }

  /* Divider bar mobile */
  .divider-bar {
    padding: 20px 0;
  }

  .hh-spacer-icon {
    height: 30px;
  }

  /* Lot Availability mobile */
  .lot-availability {
    padding: 40px 16px;
  }

  .lot-availability-heading {
    font-size: 28px;
  }

  .lot-filter-buttons {
    gap: 4px;
    margin-bottom: 10px;
  }

  .lot-filter-btn {
    padding: 5px 8px;
    font-size: 10px;
  }

  .lot-table-wrap {
    max-height: 300px;
  }

  .lot-table thead th,
  .lot-table tbody td {
    padding: 6px 8px;
    font-size: 11px;
  }

  .lot-table thead th {
    font-size: 10px;
  }

  /* Community Overview mobile */
  .community-overview-content {
    padding: 24px 16px;
  }

  .community-overview-title {
    font-size: 28px;
  }

  /* Spec Homes Carousel mobile */
  .spec-homes-carousel {
    padding: 40px 0;
  }

  .spec-homes-header {
    padding: 0 20px;
  }

  .spec-homes-title {
    font-size: 28px;
  }

  .spec-homes-track {
    gap: 16px;
    padding: 0 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .spec-home-card {
    flex: 0 0 calc(85% - 8px);
    scroll-snap-align: start;
  }

  .spec-homes-arrow {
    display: none;
  }

  .spec-home-info {
    padding: 16px;
  }

  .spec-home-price {
    font-size: 20px;
  }

  .spec-home-plan {
    font-size: 16px;
  }

  /* Agents Section mobile */
  .agents-section {
    padding: 16px;
  }

  .agents-grid {
    flex-direction: column;
    gap: 16px;
  }

  .agent-card {
    width: 100%;
  }

  .agent-photo {
    width: 60px;
    height: 60px;
  }

  .sticky-nav-container.is-sticky .agent-photo {
    width: 40px;
    height: 40px;
  }

  .sticky-nav-container.is-sticky .agents-section {
    padding: 12px 16px;
  }

  /* Community Nav mobile */
  .community-nav {
    padding: 10px 16px;
  }

  /* Match non-sticky padding when stuck so the menu keeps the same line wrap. */
  .sticky-nav-container.is-sticky .community-nav {
    padding: 10px 16px;
  }

  .community-nav-links {
    gap: 8px;
  }

  .community-nav-links a {
    font-size: 10px;
    padding: 5px 10px;
  }

  /* Community Details mobile */
  .community-details {
    padding: 32px 16px;
  }

  .community-details-heading {
    font-size: 18px;
    margin-bottom: 24px;
  }

  .community-details-text p {
    font-size: 13px;
  }

  .community-details-stats {
    padding: 24px 20px;
    gap: 20px;
  }

  .stat-item {
    gap: 14px;
  }

  .stat-icon {
    width: 32px;
    height: 32px;
  }

  .stat-value {
    font-size: 24px;
  }

  .stat-label {
    font-size: 11px;
  }

  /* Standard Features mobile */
  .standard-features {
    padding: 40px 16px;
  }

  .features-nav {
    padding: 12px;
    gap: 6px;
  }

  .feature-tab {
    padding: 6px 12px;
    font-size: 10px;
  }

  .features-content-wrap {
    padding: 16px;
  }

  .features-title {
    font-size: 24px;
    margin-bottom: 16px;
    text-align: center;
  }

  /* Show mobile heading, hide original on mobile */
  .features-title-mobile {
    display: block;
    padding: 0 16px;
  }

  .features-content-wrap .features-title {
    display: none;
  }

  .feature-panel-title {
    font-size: 14px;
  }

  .feature-panel ul li {
    font-size: 12px;
  }

  /* Pricing Plans mobile */
  .pricing-plans {
    padding: 40px 0;
  }

  .pricing-plans-heading {
    font-size: 28px;
    padding: 0 16px;
  }

  .plans-list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 16px;
    gap: 0;
  }

  .plans-list::-webkit-scrollbar {
    display: none;
  }

  .plan-row {
    flex: 0 0 calc(50% - 8px);
    min-width: calc(50% - 8px);
    scroll-snap-align: start;
    padding: 20px 12px;
    border-right: 1px solid #d0cdc8;
  }

  .plan-row.visible {
    display: flex;
  }

  .plan-thumbnail-wrap {
    width: 80px;
  }

  .plan-number {
    font-size: 14px;
  }

  .plan-detail-text {
    font-size: 11px;
  }

  .plans-mobile-nav {
    display: none;
  }

  .plans-nav-btn {
    width: 40px;
    height: 40px;
  }

  .plans-nav-btn svg {
    width: 18px;
    height: 18px;
  }

  .plans-dot {
    width: 8px;
    height: 8px;
  }

  /* Community Footer mobile */
  .community-footer .footer-info {
    padding: 40px 16px;
  }

  .footer-contact {
    align-items: center;
  }

  .btn-phone {
    font-size: 16px;
    padding: 14px 24px;
  }

  .hours-row dt,
  .hours-row dd {
    font-size: 14px;
  }

  .map-container iframe {
    height: 180px;
  }

  /* Content Intro - Mobile */
  .content-intro {
    padding: 56px 0;
  }

  .content-intro-main {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 24px;
  }

  .content-intro-below {
    margin-top: 32px;
    padding: 0 24px;
  }

  .content-intro-below .content-intro-text {
    max-width: none;
  }

  .content-intro--reverse .content-intro-main {
    direction: ltr;
  }

  .content-intro-image {
    max-width: 400px;
    margin: 0 auto;
  }

  /* Stacked: no taller sibling to match, so give the pair a fixed ratio. */
  .content-intro-image--pair > img {
    aspect-ratio: 3 / 4;
    height: auto;
  }

  .content-intro-title {
    font-size: 26px;
  }

  .content-intro-text {
    font-size: 14px;
  }

  /* Icon Grid - Mobile */
  .icon-grid {
    padding: 56px 0;
  }

  .icon-grid-inner {
    padding: 0 24px;
  }

  .icon-grid-header {
    margin-bottom: 40px;
  }

  .icon-grid-title {
    font-size: 26px;
  }

  .icon-grid-cards {
    gap: 32px 24px;
  }

  .icon-grid-card {
    width: calc((100% - 24px) / 2);
  }

  /* Photo Strip - Mobile */
  .photo-strip {
    height: 140px;
  }

  /* Stats Bar - Mobile */
  .stats-bar {
    padding: 40px 0;
  }

  .stats-bar-inner {
    flex-wrap: wrap;
    gap: 32px 40px;
    padding: 0 24px;
    justify-content: center;
  }

  .stats-bar-item {
    max-width: none;
  }

  .stats-bar-value {
    font-size: 28px;
  }

  /* Text Columns - Mobile */
  .text-columns {
    padding: 56px 0;
  }

  .text-columns-inner {
    padding: 0 24px;
  }

  .text-columns-title {
    font-size: 26px;
  }

  .text-columns-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .text-columns-col--center-mobile {
    text-align: center;
  }
}

@media (max-width: 480px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body > * {
    max-width: 100%;
    overflow-x: hidden;
  }

  .main-nav {
    padding: 35px 16px 20px;
  }

  .site-header.is-scrolled .main-nav {
    padding: 35px 16px 20px;
  }

  .site-header.is-scrolled .logo-img {
    height: 40px;
  }

  .site-header .logo {
    left: 16px;
  }

  .logo-img {
    height: 40px;
  }

  .mobile-nav {
    top: 60px;
    padding: 16px;
  }

  .hero {
    padding: 70px 16px 16px;
    min-height: 200px;
    height: 35vh;
    margin-top: 60px;
  }

  .community-hero,
  .page-header,
  .error-404 {
    margin-top: 60px;
  }

  .hero-content {
    padding: 8px 12px 10px 12px;
    max-width: calc(100% - 50px);
    flex-wrap: wrap;
    gap: 4px;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-eyebrow {
    font-size: 11px;
  }

  .community-content {
    padding: 32px 16px 32px 82px;
  }

  .intake-content {
    padding: 32px 16px 32px 82px;
  }

  .community-title {
    font-size: 28px;
  }

  .intake-title {
    font-size: 28px;
  }

  .community-badge {
    width: 80px;
    height: 80px;
  }

  .badge-img {
    width: 50px;
  }

  .btn {
    font-size: 10px;
    padding: 10px 16px;
    min-width: auto;
  }

  .community-link,
  .intake-link,
  .hh-difference-link {
    font-size: 12px;
  }

  .explore-slide {
    flex: 0 0 calc(85% - 8px);
    min-width: 180px;
  }

  .explore-slide-title {
    font-size: 14px;
  }

  .hh-difference-title {
    font-size: 24px;
  }

  .hh-difference-text {
    font-size: 13px;
  }

  .hh-difference-main {
    padding: 0 16px;
    gap: 24px;
  }

  .intake-form-wrap {
    padding: 24px 16px;
  }

  .footer-logo {
    padding: 40px 16px;
  }

  .footer-logo-img {
    height: 70px;
  }

  .form-field label {
    font-size: 11px;
  }

  .form-field input,
  .form-field select {
    font-size: 14px;
    padding: 12px 0;
  }

  .btn-submit {
    font-size: 12px;
    padding: 14px 24px;
  }

  /* Content Intro - Small Mobile */
  .content-intro {
    padding: 40px 0;
  }

  .content-intro-main {
    padding: 0 16px;
    gap: 24px;
  }

  .content-intro-below {
    padding: 0 16px;
  }

  .content-intro-title {
    font-size: 24px;
  }

  /* Icon Grid - Small Mobile */
  .icon-grid {
    padding: 40px 0;
  }

  .icon-grid-inner {
    padding: 0 16px;
  }

  .icon-grid-cards {
    gap: 32px;
  }

  .icon-grid-card {
    width: 100%;
  }

  .icon-grid-title {
    font-size: 24px;
  }

  /* Photo Strip - Small Mobile */
  .photo-strip {
    height: 120px;
  }

  /* Stats Bar - Small Mobile */
  .stats-bar {
    padding: 32px 0;
  }

  .stats-bar-inner {
    flex-direction: column;
    gap: 24px;
    padding: 0 16px;
  }

  .stats-bar-value {
    font-size: 24px;
  }

  /* Text Columns - Small Mobile */
  .text-columns {
    padding: 40px 0;
  }

  .text-columns-inner {
    padding: 0 16px;
  }

  .text-columns-title {
    font-size: 24px;
  }
}

/* Remove focus outlines from header nav links */
.site-header .nav-links .submenu a,
.site-header .nav-links a {
  outline: none !important;
}