/* ==========================================================================
   Devine Custom Homes — styles.css
   --------------------------------------------------------------------------
   Structure (search these markers to jump around):

   01. TOKENS ............ :root custom properties (design tokens)
   02. RESET ............. normalise + base element styles
   03. TYPOGRAPHY ........ headings, body, eyebrow, lede
   04. LAYOUT ............ .l-container, .section, .grid utilities
   05. BUTTONS ........... .btn and modifiers
   06. HEADER ............ .site-header, .nav, .mobile-menu
   07. HERO .............. .hero and modifiers
   08. CARDS ............. .plan-card, .community-card, .post-card, .showhome-card
   09. FILTER BAR ........ .filter-bar (client-side archive filtering)
   10. SPLIT / STORY ..... .split (image + copy block)
   11. SERVICES .......... .services, .service
   12. TESTIMONIALS ...... .testimonial
   13. CTA BAND .......... .cta-band, .portal-band
   14. SINGLE TEMPLATES .. .single-*, .stat-row, .feature-list, .sidebar
   15. FORMS ............. .form, .form-embed (GHL placeholder)
   16. FOOTER ............ .site-footer
   17. MOBILE CTA ........ .mobile-cta (sticky bottom bar)
   18. SWIPER OVERRIDES .. minimal restyle of Swiper defaults
   19. UTILITIES ......... .u-* helpers, .visually-hidden
   20. MOTION ............ reduced-motion + reveal animations

   Every repeatable block is BEM-named so the markup maps 1:1 onto WordPress
   template parts later (see README.md).
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  /* Colour
     Palette taken straight from the 2023 logo files (Logos/):
     Miraj Blue #19162B, Desert Sand #E6C5AC, white. Navy carries the brand
     and every dark block; sand is the accent, exactly as the logo pairs them. */
  --ink: #19162b; /* miraj blue — body text, headings, dark blocks */
  --charcoal: #2a2640; /* navy, lifted — hover states, secondary dark   */
  --bg: #f7efe7; /* cream — a light tint of desert sand           */
  --surface: #ffffff;
  --stone: #5c5766; /* muted text — 7.0:1 on white, 6.1:1 on bg      */
  --sand: #e6c5ac; /* desert sand — tan panels (exact logo colour)  */
  --accent: #e6c5ac; /* desert sand — fills, icons and rules          */
  --accent-hover: #d9b292; /* sand, deepened                                */
  --forest: #221e38; /* deepest navy — portal band, forest sections   */

  /* Derived colour.
     Desert sand is light (2.0:1 on white), so it can never be *text* on a
     light ground. --accent-text is sand deepened until it passes AA (6.2:1
     on white, 5.4:1 on --bg); every eyebrow, link and small icon on a light
     ground uses it. On sand panels it only reaches 3.8:1, so text there
     falls back to --ink. Sand fills always carry navy labels (10.9:1). */
  --accent-text: #7a5b43;
  --accent-text-hover: #5e4531;
  --line: #ebddd0; /* hairline rules                    */
  --line-strong: #dcc9b8; /* decorative dividers               */
  --line-input: #948a7e; /* control borders — 3.4:1 on white  */
  --ink-on-dark: #f7efe7;
  --stone-on-dark: #c9bcb0; /* muted on navy — 9.2:1             */
  /* Hero scrim, mobile default: text runs full width, so it stays even.
     Never let this drop below ~.80 anywhere text lands — the previous version
     thinned to .15 at 40% height, exactly where the headline sits, and white
     type disappeared into a brightly lit window. */
  --overlay: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.84) 45%,
    rgba(0, 0, 0, 0.9) 100%
  );
  --focus: #19162b;

  /* Geometry */
  --radius: 6px;
  --radius-lg: 12px;
  --radius-pill: 100px; /* buttons are full pills            */
  --cut: 3.5rem; /* diagonal corner cut on media      */
  --maxw: 100rem; /* 1600px — matches their .container-x */
  --maxw-wide: 122rem;
  --maxw-narrow: 51.5rem;
  --gutter: clamp(1.25rem, 6.25vw, 5.5rem);

  /* Rhythm */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: clamp(4rem, 9vw, 7.5rem);

  /* Type */
  --font-display:
    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif;
  --font-sans:
    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif;

  --fs-eyebrow: 0.75rem;
  --fs-small: 0.8125rem;
  --fs-body: 1rem;
  --fs-lede: clamp(1.0625rem, 1.6vw, 1.25rem);
  --fs-h4: clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.75rem);
  --fs-h2: clamp(2rem, 4vw, 3.5rem);
  --fs-h1: clamp(2.375rem, 5.4vw, 4.5rem);
  --fs-display: clamp(3rem, 7.4vw, 6rem);
  --fw-display: 600; /* headline weight — Montserrat stays,
                                           the weight does the editorial work  */

  --lh-tight: 1.02;
  --lh-heading: 1.14;
  --lh-body: 1.65;
  --tracking-eyebrow: 0.16em;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 12px 28px -14px rgba(0, 0, 0, 0.26);
  --shadow-lg: 0 26px 60px -26px rgba(0, 0, 0, 0.38);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.35s;

  /* Chrome */
  --header-h: 76px;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 92px;
  }
}

/* ==========================================================================
   02. RESET
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* offset in-page anchors so the fixed header never covers a heading */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Locked while the full-screen mobile menu is open */
body.is-menu-open {
  overflow: hidden;
}

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

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

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

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

/* <figure> and <blockquote> carry a browser default of `1em 40px`, which
   silently inset every figure-based component (testimonial cards, mosaic
   tiles) by 40px a side. */
figure,
blockquote,
dl,
dd {
  margin: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-lg) 0;
}

/* Consistent, always-visible focus ring (keyboard users) */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -100px;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--ink);
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: var(--space-sm);
}

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

/* Display headings run heavier and tighter — closer to the editorial serif
   feel of the reference without leaving the brand typeface. */
h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: var(--fw-display);
  letter-spacing: -0.025em;
}
h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-display);
  letter-spacing: -0.02em;
  line-height: 1.08;
}
h3 {
  font-size: var(--fs-h3);
}
h4 {
  font-size: var(--fs-h4);
}

p {
  margin: 0 0 var(--space-sm);
  max-width: 70ch;
}
p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 600;
}

/* Small uppercase label above a heading */
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--space-xs);
}
.eyebrow--muted {
  color: var(--stone);
}
.eyebrow--on-dark {
  color: var(--sand);
}
/* deep sand only reaches 3.8:1 on a sand panel — go navy there */
.section--sand .eyebrow:not(.eyebrow--on-dark) {
  color: var(--ink);
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--stone);
  max-width: 60ch;
}

.prose > * + * {
  margin-top: var(--space-sm);
}
.prose h3 {
  margin-top: var(--space-lg);
}
.prose a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.prose a:hover {
  color: var(--accent-text-hover);
}

/* Inline text link with an animated underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.link-arrow::after {
  content: "";
  width: 1.25rem;
  height: 1px;
  background: currentColor;
  transition: width var(--dur) var(--ease);
}
.link-arrow:hover::after {
  width: 2rem;
}

/* ==========================================================================
   04. LAYOUT
   ========================================================================== */

.l-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.l-container--narrow {
  max-width: var(--maxw-narrow);
}
.l-container--wide {
  max-width: var(--maxw-wide);
}

.section {
  padding-block: var(--space-2xl);
}
.section--tight {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.section--flush-top {
  padding-top: 0;
}
.section--flush-bottom {
  padding-bottom: 0;
}
.section--surface {
  background: var(--surface);
}
.section--sand {
  background: var(--sand);
}
.section--dark {
  background: var(--charcoal);
  color: var(--ink-on-dark);
}
.section--forest {
  background: var(--forest);
  color: var(--ink-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--forest h1,
.section--forest h2,
.section--forest h3,
.section--forest h4 {
  color: var(--ink-on-dark);
}
.section--dark .lede,
.section--forest .lede {
  color: var(--stone-on-dark);
}

/* Section header: eyebrow + title + lede, optional trailing link */
.section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.section__heading {
  max-width: 34ch;
  margin: 0;
}
.section__lede {
  margin-top: var(--space-xs);
}
.section__header--stack {
  display: block;
}
.section__header--center {
  display: block;
  text-align: center;
  max-width: var(--maxw-narrow);
  margin-inline: auto;
}
.section__header--center .section__heading,
.section__header--center .lede {
  margin-inline: auto;
}

/* Generic responsive grid */
.grid {
  display: grid;
  gap: var(--space-md);
}
.grid--2 {
  grid-template-columns: 1fr;
}
.grid--3 {
  grid-template-columns: 1fr;
}
.grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid {
    gap: var(--space-lg);
  }
}

/* Empty-state shown by the filter when nothing matches */
.grid__empty {
  grid-column: 1 / -1;
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--stone);
}
.grid__empty[hidden] {
  display: none;
}

/* ==========================================================================
   05. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9375rem 1.875rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.btn:active {
  transform: translateY(1px);
}

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

.btn--dark {
  background: var(--charcoal);
  color: var(--ink-on-dark);
}
.btn--dark:hover {
  background: var(--ink);
}

.btn--outline {
  border-color: var(--line-input);
  color: var(--ink);
}
.btn--outline:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.btn--ghost {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.btn--ghost:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

/* Primary action on a dark ground. The sand pill (.btn--accent) is the brand
   pairing; this is the quieter alternative. */
.btn--light {
  background: var(--bg);
  color: var(--ink);
}
.btn--light:hover {
  background: #fff;
}

.btn--sm {
  padding: 0.6875rem 1.25rem;
  font-size: 0.75rem;
}
.btn--block {
  display: flex;
  width: 100%;
}

.btn__icon {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* ==========================================================================
   06. HEADER
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.site-header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Transparent-over-hero state (JS adds .site-header--solid past the fold).
   Only applies on pages whose <body> carries .has-hero. */
body.has-hero .site-header:not(.site-header--solid) {
  background: transparent;
  border-bottom-color: transparent;
}
body.has-hero .site-header:not(.site-header--solid) .site-header__logo-mark,
body.has-hero .site-header:not(.site-header--solid) .nav__link,
body.has-hero .site-header:not(.site-header--solid) .site-header__phone,
body.has-hero .site-header:not(.site-header--solid) .nav-toggle {
  color: #fff;
}
body.has-hero .site-header:not(.site-header--solid) .site-header__logo-text {
  color: #fff;
}
body.has-hero .site-header:not(.site-header--solid) .site-header__logo-sub {
  color: rgba(255, 255, 255, 0.72);
}
body.has-hero .site-header:not(.site-header--solid) .nav__link::after {
  background: #fff;
}
body.has-hero .site-header:not(.site-header--solid) .nav-toggle__bar {
  background: #fff;
}
body.has-hero .site-header--solid {
  box-shadow: var(--shadow-sm);
}

/* Logo */
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-right: auto;
  flex: none;
}
.site-header__logo-mark {
  width: 2.25rem;
  height: 2rem;
  flex: none;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
body.has-hero .site-header:not(.site-header--solid) .site-header__logo-mark {
  color: var(--accent);
}
.site-header__logo-text {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.site-header__logo-sub {
  display: block;
  font-family: var(--font-display);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 0.15rem;
}

/* Desktop nav */
.nav {
  display: none;
}

@media (min-width: 1024px) {
  .nav {
    display: block;
  }
  .nav__list {
    display: flex;
    align-items: center;
    gap: clamp(0.875rem, 1.7vw, 1.5rem);
  }
  .nav__link {
    position: relative;
    display: inline-block;
    padding-block: 0.5rem;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--charcoal);
    transition: color var(--dur) var(--ease);
  }
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.15rem;
    width: 0;
    height: 1px;
    background: var(--accent-text);
    transition: width var(--dur) var(--ease);
  }
  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after {
    width: 100%;
  }
  .nav__link[aria-current="page"] {
    color: var(--accent-text);
  }
  body.has-hero
    .site-header:not(.site-header--solid)
    .nav__link[aria-current="page"] {
    color: #fff;
  }
}

/* Header actions */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}
@media (min-width: 1024px) {
  .site-header__actions {
    margin-left: var(--space-lg);
  }
}

.site-header__phone {
  display: none;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.site-header__phone:hover {
  color: var(--accent-text);
}
.site-header__phone svg {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
}
@media (min-width: 768px) {
  .site-header__phone {
    display: inline-flex;
  }
}

.site-header__cta {
  display: none;
}
@media (min-width: 768px) {
  .site-header__cta {
    display: inline-flex;
  }
}

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.625rem;
  color: var(--charcoal);
}
.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition:
    transform var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}
@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

/* Full-screen mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding: calc(var(--header-h) + var(--space-lg)) var(--gutter) var(--space-lg);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  /* visibility gets a 0s duration with a delay rather than being interpolated:
     it must flip to visible the instant the panel opens (a hidden element
     cannot take focus), and stay visible until the fade-out has finished. */
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s linear 0s;
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
}
.mobile-menu__item + .mobile-menu__item {
  border-top: 1px solid var(--line);
}
.mobile-menu__link {
  display: block;
  padding: 1.0625rem 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--ink);
}
.mobile-menu__link[aria-current="page"] {
  color: var(--accent-text);
}

.mobile-menu__footer {
  margin-top: auto;
  padding-top: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
}
.mobile-menu__phone {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--charcoal);
}
.mobile-menu__meta {
  font-size: var(--fs-small);
  color: var(--stone);
}
@media (min-width: 1024px) {
  .mobile-menu {
    display: none;
  }
}

/* Pages without a hero need the fixed header's height reserved */
body:not(.has-hero) .site-main {
  padding-top: var(--header-h);
}

/* ==========================================================================
   07. HERO
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(88svh, 860px);
  padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-2xl);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.hero--tall {
  min-height: min(100svh, 1000px);
}
.hero--compact {
  min-height: min(56svh, 520px);
  align-items: center;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay);
}

/* Desktop: hero copy is capped at 40rem (~45% of the container), so the scrim
   can stay heavy on the left and open right to let the house show. */
@media (min-width: 1024px) {
  .hero__media::after {
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.5) 46%,
        rgba(0, 0, 0, 0.2) 72%,
        rgba(0, 0, 0, 0.1) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.22) 0%,
        rgba(0, 0, 0, 0) 24%,
        rgba(0, 0, 0, 0) 68%,
        rgba(0, 0, 0, 0.34) 100%
      );
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* The measure lives on the text, not the container — a ch-based cap on the
   wrapper also squeezed the button row onto two lines. */
.hero__content {
  max-width: 32rem;
}
.hero__content--wide {
  max-width: 40rem;
}

.hero__eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: var(--space-sm);
}
.hero__title {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  color: #fff;
  max-width: 13ch;
  margin-bottom: var(--space-sm);
}
.hero--compact .hero__title {
  font-size: var(--fs-h1);
}
.hero__subtitle {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 44ch;
  margin-bottom: var(--space-lg);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* Small stat strip pinned to the bottom of the home hero */
.hero__stats {
  display: none;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}
@media (min-width: 768px) {
  .hero__stats {
    display: flex;
  }
}
.hero__stat-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.1;
  color: #fff;
}
.hero__stat-label {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* --- Home hero: background video + slanted bottom edge ------------------
   The <video> has no src until main.js adds one on tablets/desktops, so the
   poster <picture> underneath is what phones and reduced-motion users get. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.hero__video.is-playing {
  opacity: 1;
}
.hero--home {
  /* the cut lets the next section's cream ground slide under the photo */
  /* clip-path:polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);
  padding-bottom:calc(var(--space-2xl) + 4vw); */
}
.hero--home .hero__eyebrow {
  color: var(--sand);
}
.hero--home .hero__title {
  max-width: 14ch;
}
.hero--home .hero__subtitle {
  margin-bottom: var(--space-md);
  max-width: 52ch;
}
.hero--home .hero__actions {
  margin-top: var(--space-md);
}

/* Scroll hint */
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-2xl);
  z-index: 1;
  display: none;
  writing-mode: vertical-rl;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
@media (min-width: 1024px) {
  .hero__scroll {
    display: block;
  }
}

/* Page hero for interior pages (no photo, sand ground) */
.page-hero {
  padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-xl);
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}
.page-hero__inner {
  max-width: 56ch;
}
.page-hero__title {
  margin-bottom: var(--space-sm);
}

/* --- Photographic page hero -----------------------------------------------
   The flat sand band still exists (.page-hero on its own); this modifier puts
   a photo behind it. The scrim is not decorative: at 0.84 alpha the muted lede
   colour still clears 4.5:1 even where the photo underneath is pure white, so
   text is legible on ANY image dropped in later. Don't lighten it past .84
   without re-checking. */
.page-hero--media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  border-bottom: 0;
  padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-2xl);
}
.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Mobile: text runs the full width, so the scrim has to be even */
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.86) 0%,
    rgba(0, 0, 0, 0.9) 100%
  );
}
@media (min-width: 1024px) {
  /* Desktop: copy is capped at 56ch (~40% of the container), so the gradient
     can open up on the right and let the photograph show. */
  .page-hero__media::after {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0.86) 48%,
      rgba(0, 0, 0, 0.34) 100%
    );
  }
}
.page-hero--media .page-hero__title {
  color: #fff;
}
.page-hero--media .eyebrow {
  color: var(--sand);
}
.page-hero--media .lede {
  color: rgba(255, 255, 255, 0.88);
}
.page-hero--media .breadcrumb {
  color: rgba(255, 255, 255, 0.8);
}
.page-hero--media .breadcrumb a:hover {
  color: #fff;
}
.page-hero--media .breadcrumb__sep {
  opacity: 0.6;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  color: var(--stone);
  margin-bottom: var(--space-sm);
}
.breadcrumb__sep {
  opacity: 0.5;
}
.breadcrumb a:hover {
  color: var(--accent-text);
}
.breadcrumb--on-dark {
  color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   08. CARDS
   --------------------------------------------------------------------------
   Every archive on the site is built from one of these four card blocks.
   They are deliberately self-contained: markup + styles move together into a
   WordPress template part with zero layout assumptions about the parent.
   ========================================================================== */

/* --- Shared media frame ------------------------------------------------- */
.card-media {
  position: relative;
  overflow: hidden;
  background: var(--sand);
  border-radius: var(--radius);
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.card-media--4x3 {
  aspect-ratio: 4 / 3;
}
.card-media--3x2 {
  aspect-ratio: 3 / 2;
}
.card-media--16x10 {
  aspect-ratio: 16 / 10;
}

/* --- Status chip -------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0.3125rem 0.625rem;
  border-radius: 2px;
  background: var(--sand);
  color: var(--charcoal);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip--accent {
  background: var(--accent);
  color: var(--ink);
}
.chip--dark {
  background: var(--charcoal);
  color: var(--ink-on-dark);
}
.chip--outline {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--stone);
}

.card-media__chip {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
}

/* --- Home plan card ----------------------------------------------------- */
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.plan-card:hover .card-media img {
  transform: scale(1.05);
}
/* keyboard focus lands on the inner link — lift the whole card with it */
.plan-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.plan-card .card-media {
  border-radius: 0;
}

.plan-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-md);
}
.plan-card__title {
  font-size: var(--fs-h4);
  margin: 0 0 0.25rem;
}
/* Stretched link — whole card is clickable, one link in the a11y tree */
.plan-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.plan-card__link:focus-visible {
  outline: none;
}
.plan-card:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.plan-card__location {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--fs-small);
  color: var(--stone);
  margin-bottom: var(--space-sm);
}
.plan-card__location svg {
  width: 0.8125rem;
  height: 0.8125rem;
  flex: none;
  color: var(--accent-text);
}

.plan-card__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--charcoal);
  margin-bottom: var(--space-sm);
}

/* Icon stat row: Beds • Baths • Sq Ft • Garage */
.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem var(--space-sm);
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}
.stat-row__item {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--charcoal);
  white-space: nowrap;
}
.stat-row__item svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--stone);
}
.stat-row__label {
  color: var(--stone);
  font-weight: 400;
}

/* --- Community card ----------------------------------------------------- */
.community-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
  isolation: isolate;
  background: var(--charcoal);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.community-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.community-card:hover .community-card__media img {
  transform: scale(1.05);
}

.community-card__media {
  aspect-ratio: 4 / 5;
}
@media (min-width: 768px) {
  .community-card__media {
    aspect-ratio: 3 / 4;
  }
}
/* The two-up archive gives each card roughly twice the width it gets in the
   home page's four-up grid, where a portrait crop would run ~800px tall. */
@media (min-width: 768px) {
  .community-card--wide .community-card__media {
    aspect-ratio: 16 / 11;
  }
}
.community-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.community-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0.78) 100%
  );
}

.community-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: var(--space-md);
  color: #fff;
}
.community-card__location {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0.375rem;
}
.community-card__title {
  font-size: var(--fs-h3);
  color: #fff;
  margin: 0 0 0.375rem;
}
.community-card__meta {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}
.community-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* --- Blog / news card --------------------------------------------------- */
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.post-card:hover .card-media img {
  transform: scale(1.05);
}
.post-card .card-media {
  border-radius: 0;
}
.post-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--space-2xs);
}
.post-card__category {
  color: var(--accent-text);
  font-weight: 600;
}
.post-card__title {
  font-size: var(--fs-h4);
  margin: 0 0 var(--space-2xs);
}
.post-card__excerpt {
  font-size: var(--fs-small);
  color: var(--stone);
  margin-bottom: var(--space-sm);
}
.post-card__more {
  margin-top: auto;
}
.post-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- Showhome card ------------------------------------------------------ */
.showhome-card {
  display: grid;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 768px) {
  .showhome-card {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: stretch;
  }
  .showhome-card--reverse .showhome-card__media {
    order: 2;
  }
}
.showhome-card__media {
  aspect-ratio: 4 / 3;
}
@media (min-width: 768px) {
  .showhome-card__media {
    aspect-ratio: auto;
    min-height: 340px;
  }
}
.showhome-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showhome-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
@media (min-width: 768px) {
  .showhome-card__body {
    padding: var(--space-lg);
    justify-content: center;
  }
}
/* the body is a flex column, so a bare chip would stretch to full width */
.showhome-card__body > .chip {
  align-self: flex-start;
}
.showhome-card__title {
  margin: 0;
}
.showhome-card__address {
  font-style: normal;
  color: var(--stone);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.showhome-card__hours {
  display: grid;
  gap: 0.25rem;
  padding: var(--space-xs) 0;
  border-block: 1px solid var(--line);
  font-size: var(--fs-small);
}
.showhome-card__hours-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
}
.showhome-card__hours-day {
  color: var(--stone);
}
.showhome-card__hours-time {
  font-weight: 500;
}
.showhome-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

/* ==========================================================================
   08b. ANGLED MEDIA
   --------------------------------------------------------------------------
   The reference site's signature: media and panels are cut on the diagonal
   rather than sitting in plain rectangles. One token (--cut) drives the angle
   everywhere, so the whole motif is tunable from :root — set --cut:0 to turn
   it off site-wide.
   ========================================================================== */

/* Corner slices — a fixed length, so the angle stays consistent between a
   small card and a large one. */
.is-cut-tl {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}
.is-cut-br {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%
  );
}

/* Full parallelogram for the large editorial images. This one is a percentage
   rather than a length: the slant has to read as deliberate at any width, and
   a 2.75rem offset on a wide image just looks like a rendering fault. */
.is-cut-diag {
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
}

/* Soften both on small screens, where a deep cut eats the subject */
@media (max-width: 640px) {
  .is-cut-tl,
  .is-cut-br {
    --cut: 1.5rem;
  }
  .is-cut-diag {
    clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .is-cut-tl,
  .is-cut-br,
  .is-cut-diag {
    transition: clip-path var(--dur) var(--ease);
  }
}

/* ==========================================================================
   09. FILTER BAR
   ========================================================================== */

.filter-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: var(--surface);
  border-block: 1px solid var(--line);
  padding-block: var(--space-sm);
}

.filter-bar__inner {
  display: grid;
  gap: var(--space-sm);
}

/* Status chip toggles */
.filter-bar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.filter-chip {
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--line-input);
  border-radius: 100px;
  background: transparent;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--charcoal);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.filter-chip:hover {
  border-color: var(--ink);
}
.filter-chip[aria-pressed="true"] {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--ink-on-dark);
}

/* Select controls */
.filter-bar__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  align-items: end;
}
@media (min-width: 768px) {
  .filter-bar__controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .filter-bar__controls {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* .field is a <p>, so it inherits the paragraph bottom margin — and the
   last one also picks up p:last-child{margin-bottom:0}, which knocked it
   16px out of line with its siblings under align-items:end. The grid gap
   owns the spacing here. */
.field {
  display: grid;
  gap: 0.3125rem;
  margin: 0;
}
.field__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}
.field__control {
  width: 100%;
  padding: 0.6875rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--line-input);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease);
}
.field__control:hover {
  border-color: var(--stone);
}
select.field__control {
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236E665C' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.75rem;
  cursor: pointer;
}

.filter-bar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  font-size: var(--fs-small);
  color: var(--stone);
}
.filter-bar__count strong {
  color: var(--ink);
  font-weight: 600;
}
.filter-bar__reset {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.filter-bar__reset:hover {
  color: var(--accent-text-hover);
}

/* Cards hidden by the filter */
.is-filtered-out {
  display: none !important;
}

/* ==========================================================================
   10. SPLIT / STORY
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
}
@media (min-width: 1024px) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 6vw, 5rem);
  }
  .split--reverse .split__media {
    order: 2;
  }
  .split--media-wide {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.split__media {
  position: relative;
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.split__media--landscape img {
  aspect-ratio: 3 / 2;
}

/* Small overlapping secondary image */
.split__media-inset {
  position: absolute;
  right: -1.5rem;
  bottom: -2rem;
  width: 44%;
  display: none;
  border: 8px solid var(--bg);
  border-radius: var(--radius);
  overflow: hidden;
}
.split__media-inset img {
  aspect-ratio: 1 / 1;
  border-radius: 0;
}
@media (min-width: 1024px) {
  .split__media-inset {
    display: block;
  }
}

.split__content > * + * {
  margin-top: var(--space-sm);
}
.split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding-top: var(--space-2xs);
}

/* Numbered / labelled figure stats under the story copy */
.figure-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  padding-top: var(--space-md);
  margin-top: var(--space-md);
  border-top: 1px solid var(--line);
}
.figure-list__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.05;
  color: var(--ink);
}
.figure-list__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ==========================================================================
   11. SERVICES
   ========================================================================== */

.services {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 640px) {
  .services {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .services {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--space-md);
  background: var(--surface);
  transition: background-color var(--dur) var(--ease);
}
.service:hover {
  background: var(--bg);
}
.service__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent-text);
  margin-bottom: var(--space-2xs);
}
.service__title {
  font-size: var(--fs-h4);
  margin: 0;
}
.service__text {
  font-size: var(--fs-small);
  color: var(--stone);
  margin: 0;
}

/* Expanded variant used on About */
.service--expanded {
  padding: var(--space-lg);
}
.service--expanded .service__text {
  font-size: var(--fs-body);
}

/* ==========================================================================
   12. TESTIMONIALS
   ========================================================================== */

.testimonial {
  display: flex;
  flex-direction: column;
  height: auto;
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.testimonial__stars {
  display: flex;
  gap: calc(var(--space-3xs) * 0.75);
  color: var(--accent-text);
  margin-bottom: var(--space-sm);
}
.testimonial__stars svg {
  width: 0.9375rem;
  height: 0.9375rem;
}
.testimonial__quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--charcoal);
  margin: 0 0 var(--space-md);
}
.testimonial__footer {
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}
.testimonial__author {
  display: block;
  font-weight: 600;
  font-size: var(--fs-small);
}
.testimonial__meta {
  font-size: var(--fs-small);
  color: var(--stone);
}

/* Testimonials inside a Swiper need equal heights */
.swiper-slide .testimonial {
  height: 100%;
}

/* ==========================================================================
   13. CTA BAND
   ========================================================================== */

/* Default is slate: the footer directly below is burgundy, and stacking two
   burgundy blocks flattens the close of every page. --accent is available for
   mid-page bands where it has room to breathe. */
.cta-band {
  background: var(--ink);
  color: var(--ink-on-dark);
  padding-block: var(--space-2xl);
}
.cta-band--forest {
  background: var(--forest);
}
.cta-band--accent {
  background: var(--accent);
  color: var(--ink);
}
.cta-band--accent .cta-band__title {
  color: var(--ink);
}

.cta-band__inner {
  display: grid;
  gap: var(--space-md);
  align-items: center;
  text-align: center;
  justify-items: center;
}
@media (min-width: 1024px) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    text-align: left;
    justify-items: start;
  }
}
.cta-band__title {
  font-size: var(--fs-h2);
  color: var(--ink-on-dark);
  margin: 0 0 var(--space-2xs);
  max-width: 20ch;
}
.cta-band__text {
  color: var(--stone-on-dark);
  margin: 0;
  max-width: 52ch;
}
.cta-band--accent .cta-band__text {
  color: var(--ink);
  opacity: 0.82;
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* BuilderTrend homeowner portal band */
.portal-band {
  background: var(--forest);
  color: var(--ink-on-dark);
}
.portal-band__inner {
  display: grid;
  gap: var(--space-md);
  align-items: center;
}
@media (min-width: 1024px) {
  .portal-band__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}
.portal-band__icon {
  width: 3rem;
  height: 3rem;
  color: var(--sand);
  flex: none;
}
.portal-band__title {
  color: var(--ink-on-dark);
  margin: 0 0 0.25rem;
  font-size: var(--fs-h3);
}
.portal-band__text {
  color: var(--stone-on-dark);
  margin: 0;
  font-size: var(--fs-small);
}

/* Photo-backed CTA band. Same 0.84 scrim floor as the page hero. */
.cta-band--media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
}
.cta-band__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.cta-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.86) 0%,
    rgba(0, 0, 0, 0.9) 100%
  );
}
@media (min-width: 1024px) {
  .cta-band__media::after {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0.86) 52%,
      rgba(0, 0, 0, 0.4) 100%
    );
  }
}

/* --- Image mosaic ---------------------------------------------------------
   Breaks up the long text stretches on the home and about pages. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
@media (min-width: 900px) {
  .mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
  }
}
.mosaic__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sand);
}
.mosaic__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.mosaic__item:hover img {
  transform: scale(1.04);
}
.mosaic__item--tall {
  aspect-ratio: 3 / 4;
}
.mosaic__item--wide {
  aspect-ratio: 3 / 4;
}
@media (min-width: 900px) {
  /* the second tile drops to sit against the baseline of the first */
  .mosaic__item--offset {
    margin-top: var(--space-xl);
  }
}
.mosaic__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-sm);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 500;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.82) 100%
  );
}

/* ==========================================================================
   14. SINGLE TEMPLATES
   --------------------------------------------------------------------------
   Shared chrome for single-home_plan.php / single-community.php:
   gallery, title block, two-column body + sticky sidebar.
   ========================================================================== */

/* --- Gallery ------------------------------------------------------------ */
.gallery {
  position: relative;
  background: var(--charcoal);
}
.gallery__slide img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
@media (min-width: 1024px) {
  .gallery__slide img {
    aspect-ratio: 16 / 9;
    max-height: 76svh;
  }
}
.gallery__count {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 2;
  padding: 0.375rem 0.75rem;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

/* Thumbnail strip under the main gallery */
.gallery-thumbs {
  padding-block: var(--space-2xs);
  background: var(--charcoal);
}
.gallery-thumbs .swiper-slide {
  width: 96px;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}
.gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}
.gallery-thumbs img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

/* --- Title block -------------------------------------------------------- */
.single-head {
  display: grid;
  gap: var(--space-md);
  align-items: end;
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1024px) {
  .single-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
.single-head__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-xs);
}
.single-head__title {
  margin: 0 0 0.375rem;
}
.single-head__location {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--stone);
  margin: 0;
}
.single-head__location svg {
  width: 1rem;
  height: 1rem;
  color: var(--accent-text);
  flex: none;
}
.single-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* --- Big stat bar ------------------------------------------------------- */
.stat-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-block: var(--space-lg);
}
@media (min-width: 768px) {
  .stat-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.stat-bar__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--space-md);
  background: var(--surface);
  text-align: center;
  align-items: center;
}
.stat-bar__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent-text);
  margin-bottom: 0.25rem;
}
.stat-bar__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
}
.stat-bar__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}

/* --- Body + sidebar ----------------------------------------------------- */
.single-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}
@media (min-width: 1024px) {
  .single-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}
@media (min-width: 1024px) {
  .sidebar {
    position: sticky;
    top: calc(var(--header-h) + var(--space-md));
  }
}
.sidebar__panel {
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sidebar__panel--dark {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--ink-on-dark);
}
.sidebar__panel--dark .sidebar__title {
  color: var(--ink-on-dark);
}
.sidebar__panel--dark .sidebar__text {
  color: var(--stone-on-dark);
}
.sidebar__title {
  font-size: var(--fs-h4);
  margin: 0 0 0.375rem;
}
.sidebar__text {
  font-size: var(--fs-small);
  color: var(--stone);
  margin: 0 0 var(--space-sm);
}
.sidebar__contact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  color: var(--stone-on-dark);
  margin-top: var(--space-sm);
}
.sidebar__contact a {
  color: var(--ink-on-dark);
  font-weight: 600;
}
.sidebar__contact a:hover {
  color: var(--sand);
}

/* --- Feature list ------------------------------------------------------- */
.feature-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem var(--space-md);
  margin: 0;
}
@media (min-width: 640px) {
  .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.feature-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: var(--fs-small);
  line-height: 1.5;
}
.feature-list__item svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  margin-top: 0.2rem;
  color: var(--accent-text);
}

/* --- Spec table (community facts, warranty details) --------------------- */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.spec-table th,
.spec-table td {
  padding: 0.75rem 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.spec-table th {
  width: 40%;
  font-weight: 500;
  color: var(--stone);
}

/* --- Floorplan block ---------------------------------------------------- */
.floorplan {
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.floorplan__image {
  background: var(--bg);
  border-radius: var(--radius);
  padding: var(--space-sm);
  margin-bottom: var(--space-md);
}
.floorplan__image img {
  width: 100%;
}
.floorplan__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* --- Map placeholder ---------------------------------------------------- */
.map-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--sand);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-md);
}
.map-embed--tall {
  aspect-ratio: 4 / 3;
}
.map-embed__note {
  position: relative;
  z-index: 1;
  font-size: var(--fs-small);
  color: var(--stone);
  max-width: 34ch;
}
.map-embed__note svg {
  width: 2rem;
  height: 2rem;
  margin: 0 auto 0.5rem;
  color: var(--accent-text);
}
/* faint grid so an empty map frame still reads as a map */
.map-embed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(110, 102, 92, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 102, 92, 0.13) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* --- Amenities ---------------------------------------------------------- */
.amenity-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}
@media (min-width: 640px) {
  .amenity-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .amenity-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.amenity {
  display: grid;
  gap: 0.375rem;
}
.amenity__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent-text);
}
.amenity__title {
  font-size: var(--fs-body);
  font-weight: 600;
  font-family: var(--font-sans);
  margin: 0;
}
.amenity__text {
  font-size: var(--fs-small);
  color: var(--stone);
  margin: 0;
}

/* --- Team / sales block ------------------------------------------------- */
/* An implicit `auto` column sizes to max-content, so a 600px-wide <img>
   attribute widened the column past the viewport. minmax(0,1fr) pins it. */
.team {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .team {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.team-member__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: var(--space-sm);
  background: var(--sand);
}
.team-member__name {
  font-size: var(--fs-h4);
  margin: 0 0 0.125rem;
}
.team-member__role {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--space-2xs);
}
.team-member__contact {
  display: grid;
  gap: 0.25rem;
  font-size: var(--fs-small);
  color: var(--stone);
  overflow-wrap: anywhere; /* email addresses are unbreakable strings */
}
.team-member__contact a:hover {
  color: var(--accent-text);
}

/* --- Trust badges ------------------------------------------------------- */
.badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: center;
}
@media (min-width: 768px) {
  .badges {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.badge {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.badge__icon {
  width: 2rem;
  height: 2rem;
  color: var(--accent-text);
}
.badge__title {
  font-size: var(--fs-small);
  font-weight: 600;
  margin: 0;
}
.badge__text {
  font-size: var(--fs-eyebrow);
  color: var(--stone);
  margin: 0;
  letter-spacing: 0.04em;
}

/* --- Process steps ------------------------------------------------------ */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  counter-reset: step;
}
@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.step {
  counter-increment: step;
}
.step::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--accent-text);
  margin-bottom: 0.5rem;
}
.step__title {
  font-size: var(--fs-h4);
  margin: 0 0 0.25rem;
}
.step__text {
  font-size: var(--fs-small);
  color: var(--stone);
  margin: 0;
}

/* ==========================================================================
   15. FORMS
   ========================================================================== */

.form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}
.form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}
@media (min-width: 640px) {
  .form__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.form__control {
  width: 100%;
  padding: 0.8125rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--line-input);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.form__control:hover {
  border-color: var(--stone);
}
.form__control:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.14);
}
textarea.form__control {
  min-height: 130px;
  resize: vertical;
}
.form__hint {
  font-size: var(--fs-eyebrow);
  color: var(--stone);
  letter-spacing: 0.02em;
}

/*  GHL LeadConnector embed target.
    The dashed frame is placeholder-only chrome — when the real iframe is
    dropped in, delete the .form-embed__note child and keep the wrapper. */
.form-embed {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
  padding: var(--space-md);
  background: var(--bg);
  border: 1px dashed var(--line-input);
  border-radius: var(--radius-lg);
  text-align: center;
}
.form-embed--tall {
  min-height: 520px;
}
.form-embed__note {
  display: grid;
  gap: 0.375rem;
  max-width: 38ch;
}
.form-embed__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text);
}
.form-embed__text {
  font-size: var(--fs-small);
  color: var(--stone);
  margin: 0;
}
.form-embed iframe {
  width: 100%;
  border: 0;
}

/* Contact detail list */
.contact-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}
.contact-item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}
.contact-item__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin-top: 0.2rem;
  color: var(--accent-text);
}
.contact-item__label {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.125rem;
}
.contact-item__value {
  font-style: normal;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
}
.contact-item__value a:hover {
  color: var(--accent-text);
}

/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: var(--ink-on-dark);
  padding-top: var(--space-2xl);
  /* clear the sticky mobile CTA bar */
  padding-bottom: calc(var(--space-lg) + 76px);
}
@media (min-width: 768px) {
  .site-footer {
    padding-bottom: var(--space-lg);
  }
}

.site-footer__top {
  display: grid;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .site-footer__top {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: var(--space-xl);
  }
}

.site-footer__brand {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}
.site-footer__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.site-footer__logo-mark {
  width: 2.5rem;
  height: 2.25rem;
  color: var(--sand);
  flex: none;
}
.site-footer__logo-text {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-on-dark);
  line-height: 1.1;
}
.site-footer__logo-sub {
  display: block;
  font-family: var(--font-display);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone-on-dark);
  margin-top: 0.15rem;
}
.site-footer__tagline {
  font-size: var(--fs-small);
  color: var(--stone-on-dark);
  max-width: 34ch;
  margin: 0;
}

.site-footer__heading {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sand);
  margin: 0 0 var(--space-sm);
}

.site-footer__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
}
.site-footer__link {
  font-size: var(--fs-small);
  color: var(--stone-on-dark);
  transition: color var(--dur) var(--ease);
}
.site-footer__link:hover {
  color: var(--ink-on-dark);
}

.site-footer__contact {
  display: grid;
  gap: var(--space-sm);
  font-size: var(--fs-small);
}
.site-footer__contact address {
  font-style: normal;
  color: var(--stone-on-dark);
  line-height: 1.6;
}
.site-footer__contact a {
  color: var(--ink-on-dark);
}
.site-footer__contact a:hover {
  color: var(--sand);
}

.site-footer__social {
  display: flex;
  gap: 0.625rem;
}
.site-footer__social-link {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  color: var(--stone-on-dark);
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.site-footer__social-link:hover {
  color: var(--ink);
  background: var(--sand);
  border-color: var(--sand);
}
.site-footer__social-link svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

/* BuilderTrend login button in the footer */
.site-footer__portal {
  display: inline-flex;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-on-dark);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.site-footer__portal:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--sand);
}
.site-footer__portal svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.04em;
  color: var(--stone-on-dark);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.site-footer__legal a:hover {
  color: var(--ink-on-dark);
}

/* ==========================================================================
   17. STICKY MOBILE CTA
   ========================================================================== */

.mobile-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.625rem var(--gutter)
    calc(0.625rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px -12px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur) var(--ease);
}
/* JS hides it while the mobile menu is open */
.mobile-cta.is-hidden {
  transform: translateY(110%);
}
.mobile-cta__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9375rem 1rem;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--charcoal);
}
.mobile-cta__call svg {
  width: 1rem;
  height: 1rem;
}
@media (min-width: 768px) {
  .mobile-cta {
    display: none;
  }
}

/* ==========================================================================
   18. SWIPER OVERRIDES
   ========================================================================== */

.swiper {
  width: 100%;
  overflow: hidden;
}
/* Card carousels need room inside the clipping box for the hover lift and the
   focus ring. Padding buys it; overflow:visible would let the full slide track
   widen the document and put a horizontal scrollbar on every page. */
.swiper--inset {
  padding: 14px 14px 18px;
}
.swiper-slide {
  height: auto;
}

.slider {
  position: relative;
}
.slider__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.slider__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-input);
  border-radius: 50%;
  color: var(--charcoal);
  background: var(--surface);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.slider__btn:hover {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--ink-on-dark);
}
.slider__btn svg {
  width: 1rem;
  height: 1rem;
}
.slider__btn.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Gallery arrows sit on top of the image */
.gallery__btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.92);
  border-color: transparent;
}
.gallery__btn--prev {
  left: var(--space-sm);
}
.gallery__btn--next {
  right: var(--space-sm);
}

.swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--space-md);
}
.swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  opacity: 1;
  transition:
    background-color var(--dur) var(--ease),
    width var(--dur) var(--ease);
}
.swiper-pagination-bullet-active {
  background: var(--ink);
  width: 22px;
  border-radius: 4px;
}

/* ==========================================================================
   19. UTILITIES
   ========================================================================== */

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

.u-center {
  text-align: center;
}
.u-mt-sm {
  margin-top: var(--space-sm);
}
.u-mt-md {
  margin-top: var(--space-md);
}
.u-mt-lg {
  margin-top: var(--space-lg);
}
.u-mb-lg {
  margin-bottom: var(--space-lg);
}
.u-flex-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.u-flex-actions--center {
  justify-content: center;
}
.u-center p,
.u-center .lede {
  margin-inline: auto;
}
.u-hide-mobile {
  display: none;
}
@media (min-width: 768px) {
  .u-hide-mobile {
    display: block;
  }
}

/* Divider rule with generous air */
.rule {
  border-top: 1px solid var(--line);
  margin-block: var(--space-lg);
}

/* ==========================================================================
   20. MOTION
   ========================================================================== */

/* Fade/rise on scroll — JS adds .is-visible via IntersectionObserver.
   Elements stay visible if JS never runs (progressive enhancement below). */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* If JS is disabled the .js class is never set, so nothing is hidden. */
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}

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

/* ==========================================================================
   21. PRINT
   ========================================================================== */

@media print {
  .site-header,
  .mobile-menu,
  .mobile-cta,
  .cta-band,
  .site-footer,
  .slider__controls {
    display: none !important;
  }
  body {
    background: #fff;
  }
  .site-main {
    padding-top: 0 !important;
  }
}

/* ==========================================================================
   22. WORDPRESS ADDITIONS
   --------------------------------------------------------------------------
   Everything the CMS needs that the static build did not: pagination,
   the no-JS filter button, admin-bar offset, classic-editor alignment classes.
   ========================================================================== */

/* Admin bar pushes the fixed header down for logged-in users. */
body.admin-bar .site-header {
  top: 32px;
}
body.admin-bar .mobile-menu {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .site-header,
  body.admin-bar .mobile-menu {
    top: 46px;
  }
}

/* Filter form: the meta row is a flex row inside a <form>. */
.filter-bar__inner {
  margin: 0;
}
.filter-bar__apply {
  margin-inline-start: auto;
}
html.js .filter-bar__apply {
  display: none;
}
.filter-bar__reset {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.filter-bar__count {
  margin: 0;
}
.grid__empty p {
  margin: 0;
}
.grid__empty p + p {
  margin-top: var(--space-xs);
}
.grid__empty a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Pagination */
.pagination {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: center;
}
.pagination__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--surface);
  text-decoration: none;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.pagination a.page-numbers:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-on-dark);
}
.pagination .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}
.pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--stone);
}
.pagination .page-numbers svg {
  width: 1rem;
  height: 1rem;
}

/* Single plan: price line under the intro heading. */
.single-head__price {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.02em;
}

/* Inline search form */
.form--inline {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}
@media (max-width: 640px) {
  .form--inline {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Classic editor alignment + captions inside .prose */
.prose img {
  max-width: 100%;
  height: auto;
}
.prose .alignleft {
  float: left;
  margin: 0 var(--space-md) var(--space-sm) 0;
}
.prose .alignright {
  float: right;
  margin: 0 0 var(--space-sm) var(--space-md);
}
.prose .aligncenter {
  display: block;
  margin: var(--space-md) auto;
}
.prose .wp-caption {
  max-width: 100%;
}
.prose .wp-caption-text {
  font-size: var(--fs-small);
  color: var(--stone);
  margin-top: 0.5rem;
}
.prose iframe {
  max-width: 100%;
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.form-embed iframe {
  width: 100%;
  border: 0;
  min-height: 100%;
}
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Sidebar contact line: keep the phone glyph inline-sized. */
.sidebar__contact svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* ==========================================================================
   23. DROPDOWN NAVIGATION (client request: "Homes" parent with sub-pages)
   ========================================================================== */

/* Desktop */
.nav__item--has-children {
  position: relative;
}
.nav__row {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.nav__link--static {
  cursor: default;
}
.nav__sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: -0.125rem;
  color: inherit;
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.nav__sub-toggle svg {
  width: 0.875rem;
  height: 0.875rem;
}
.nav__item--has-children:hover .nav__sub-toggle,
.nav__item--has-children.is-open .nav__sub-toggle,
.nav__sub-toggle[aria-expanded="true"] {
  transform: rotate(180deg);
}
.nav__sub {
  position: absolute;
  top: 100%;
  left: -0.75rem;
  min-width: 14rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.375rem);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s linear var(--dur);
  z-index: 101;
}
.nav__item--has-children:hover .nav__sub,
.nav__item--has-children:focus-within .nav__sub,
.nav__item--has-children.is-open .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s linear 0s;
}
.nav__item--has-children::after {
  /* hover bridge so the menu doesn't close crossing the gap */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.75rem;
}
.nav__sub-link {
  display: block;
  padding: 0.625rem 1.125rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal);
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.nav__sub-link:hover,
.nav__sub-link:focus-visible {
  background: var(--bg);
  color: var(--accent-text);
}
.nav__sub-link[aria-current="page"] {
  color: var(--accent-text);
}
body.has-hero .site-header:not(.site-header--solid) .nav__sub-toggle {
  color: #fff;
}
body.has-hero .site-header:not(.site-header--solid) .nav__sub-link {
  color: var(--charcoal);
}
body.has-hero
  .site-header:not(.site-header--solid)
  .nav__sub-link[aria-current="page"] {
  color: var(--accent-text);
}
@media (prefers-reduced-motion: reduce) {
  .nav__sub,
  .nav__sub-toggle {
    transition: none;
  }
}

/* Mobile accordion */
.mobile-menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.mobile-menu__row .mobile-menu__link {
  flex: 1 1 auto;
}
.mobile-menu__link--static {
  cursor: default;
}
.mobile-menu__sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.625rem;
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.mobile-menu__sub-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}
.mobile-menu__sub-toggle[aria-expanded="true"] {
  transform: rotate(180deg);
}
.mobile-menu__sub {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--sand);
}
.mobile-menu__sub[hidden] {
  display: none;
}
.mobile-menu__sub-link {
  display: block;
  padding: 0.6875rem 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--charcoal);
}
.mobile-menu__sub-link[aria-current="page"] {
  color: var(--accent-text);
}

/* Community sidebar: external links (lot map / developer). */
.sidebar__links {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
}
.sidebar__links a {
  color: var(--ink-on-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.sidebar__links a:hover {
  color: var(--sand);
}

/* Header: between the desktop nav appearing (1024px) and a comfortable width
   (1280px) there is no room for the phone number next to the CTA. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-header__phone {
    display: none;
  }
  .nav__list {
    gap: 0.75rem;
  }
  .site-header__actions {
    margin-left: var(--space-sm);
  }
  .site-header__cta {
    white-space: nowrap;
    padding-inline: 1rem;
  }
}

/* Icon at the top of a dark sidebar panel (showhomes "private appointments"). */
.sidebar__panel--dark > .portal-band__icon {
  margin-bottom: var(--space-sm);
}
/* Highlighted service (e.g. Build on Your Lot) on the Services page. */
.service--featured {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Buttons placed inside .prose keep their own colours (showhomes "what to bring"). */
.prose a.btn {
  text-decoration: none;
}
.prose a.btn--dark {
  color: var(--ink-on-dark);
}
.prose a.btn--dark:hover {
  color: var(--ink-on-dark);
}
.prose a.btn--outline {
  color: var(--ink);
}
.prose a.btn--outline:hover {
  color: var(--bg);
}
.prose a.btn--accent {
  color: var(--ink);
}
.prose a.btn--accent:hover {
  color: var(--ink);
}

/* ==========================================================================
   24. CLIENT ROUND 2
   ========================================================================== */

/* Filter bar scrolls with the page (was sticky and ate the viewport). */
.filter-bar {
  position: static;
  top: auto;
}

/* CTA band: keep wrapped buttons centred on phones / short screens. */
.cta-band__actions {
  justify-content: center;
}
@media (min-width: 1024px) {
  .cta-band__actions {
    justify-content: flex-start;
  }
}

/* Action rows: a text link next to a button sits on the button's centre line. */
.split__actions,
.hero__actions,
.u-flex-actions {
  align-items: center;
}

/* ==========================================================================
   25. LIVE-SITE MIGRATION ADDITIONS
   ========================================================================== */
.chip--sold {
  background: var(--stone);
  color: #fff;
}
.floorplan__item {
  padding-block: var(--space-md);
  border-top: 1px solid var(--line);
}
.floorplan__item:first-of-type {
  border-top: 0;
  padding-top: var(--space-sm);
}
.floorplan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem var(--space-sm);
  margin-bottom: var(--space-xs);
}
.floorplan__name {
  margin: 0;
  font-size: 1.125rem;
}
.floorplan__specs {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--stone);
}
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}
.video-embed iframe,
.video-embed video,
.video-embed__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.site-footer__phones a + a::before,
.contact-item__value a + a::before {
  content: " · ";
  color: var(--stone-on-dark);
}

/* ==========================================================================
   26. CLIENT ROUND 3 — cleaner banners
   --------------------------------------------------------------------------
   Inner-page banners carry only an eyebrow and a title now, so the scrims can
   open up and let the photography read. Large white display type still clears
   WCAG AA (3:1) on the lightest part of each gradient.
   ========================================================================== */
:root {
  --overlay: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.62) 45%,
    rgba(0, 0, 0, 0.72) 100%
  );
}
@media (min-width: 1024px) {
  .hero__media::after {
    background:
      /* linear-gradient(90deg,rgba(25,22,43,.72) 0%,rgba(25,22,43,.62) 46%,rgba(25,22,43,.26) 72%,rgba(25,22,43,.16) 100%),
      linear-gradient(180deg,rgba(25,22,43,.22) 0%,rgba(25,22,43,0) 24%,rgba(25,22,43,0) 68%,rgba(25,22,43,.34) 100%); */
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.5) 46%,
        rgba(0, 0, 0, 0.2) 72%,
        rgba(0, 0, 0, 0.1) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.22) 0%,
        rgba(0, 0, 0, 0) 24%,
        rgba(0, 0, 0, 0) 68%,
        rgba(0, 0, 0, 0.34) 100%
      );
  }
}
.page-hero__media::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.58) 0%,
    rgba(0, 0, 0, 0.68) 100%
  );
}
@media (min-width: 1024px) {
  .page-hero__media::after {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.58) 48%,
      rgba(0, 0, 0, 0.18) 100%
    );
  }
}
.cta-band__media::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.66) 0%,
    rgba(0, 0, 0, 0.74) 100%
  );
}
@media (min-width: 1024px) {
  .cta-band__media::after {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.66) 52%,
      rgba(0, 0, 0, 0.28) 100%
    );
  }
}
/* Tighter banner without the intro paragraph; title sits on the photo cleanly. */
.page-hero--media {
  padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-xl);
}
.page-hero--media .page-hero__inner {
  max-width: none;
}
.page-hero--media .page-hero__title {
  margin-bottom: 0;
}
.hero--compact .hero__title {
  margin-bottom: var(--space-sm);
}

/* Flat (no-photo) banner: title spans the container, banner stays compact. */
.page-hero__inner {
  max-width: none;
}
.page-hero:not(.page-hero--media) {
  padding-block: calc(var(--header-h) + var(--space-lg)) var(--space-lg);
}
.page-hero:not(.page-hero--media) .page-hero__title {
  margin-bottom: 0;
}

/* Interactive lot map (LotWorks iframe): fixed height instead of a ratio. */
.map-embed--lot {
  aspect-ratio: auto;
  height: 600px;
  padding: 0;
  background: var(--surface);
}
@media (max-width: 767px) {
  .map-embed--lot {
    height: 70vh;
  }
}

/* A real (GHL) form inside the embed slot: drop the placeholder chrome. */
.form-embed--live {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  min-height: 0;
  text-align: left;
}
.form-embed--live iframe {
  display: block;
  width: 100%;
  border: 0;
  min-height: 0;
}

/* ==========================================================================
   21. HOME EDITORIAL
   --------------------------------------------------------------------------
   The photo-led home page components. Photo edges are SVG masks (mask-image +
   preserveAspectRatio="none", so one path stretches to any box). The shapes
   are Devine's own, taken from the logo mark: the D-bowl (a deep convex edge)
   and the gable (a soft off-centre ridge), plus a house-silhouette tile.
   Paths live as custom properties on :root below — edit/regenerate them with
   wp-content/devine-design-source/masks.py.
   ========================================================================== */

:root{
  --radius-md:.875rem;                   /* cards                              */
  --radius-xl:1.5rem;                    /* panels, photo frames (rounded-3xl) */
  --radius-leaf:2.75rem 1rem;            /* asymmetric panel corners: big top-left / bottom-right */
  --shape-bowl-r:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 800' preserveAspectRatio='none'><path d='M28 0H600C880 0 1000 200 1000 400C1000 600 880 800 600 800H28Q0 800 0 772V28Q0 0 28 0Z'/></svg>");
  --shape-bowl-l:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 800' preserveAspectRatio='none'><path d='M972 0H400C120 0 0 200 0 400C0 600 120 800 400 800H972Q1000 800 1000 772V28Q1000 0 972 0Z'/></svg>");
  --shape-bowl-rp:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1000' preserveAspectRatio='none'><path d='M28 0H520C700 0 800 210 800 500C800 790 700 1000 520 1000H28Q0 1000 0 972V28Q0 0 28 0Z'/></svg>");
  --shape-bowl-lp:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1000' preserveAspectRatio='none'><path d='M772 0H280C100 0 0 210 0 500C0 790 100 1000 280 1000H772Q800 1000 800 972V28Q800 0 772 0Z'/></svg>");
  --shape-bowl-b:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='none'><path d='M0 0H800V430C800 540 620 600 400 600C180 600 0 540 0 430Z'/></svg>");
  --shape-gable:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' preserveAspectRatio='none'><path d='M0.0 800.0L0.0 300.0L746.7 39.5Q860.0 0.0 977.9 22.4L1440.0 110.0L1440.0 800.0L0.0 800.0Z'/></svg>");
  --shape-gable-r:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' preserveAspectRatio='none'><path d='M0.0 800.0L0.0 110.0L462.1 22.4Q580.0 0.0 693.3 39.5L1440.0 300.0L1440.0 800.0L0.0 800.0Z'/></svg>");
  --shape-gable-m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='none'><path d='M0.0 800.0L0.0 120.0L136.9 47.9Q190.0 20.0 246.1 41.4L400.0 100.0L400.0 800.0L0.0 800.0Z'/></svg>");
  --shape-house:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 600' preserveAspectRatio='none'><path d='M0.0 572.0L0.0 172.0Q0.0 150.0 14.2 133.2L94.2 38.6Q120.0 8.0 157.6 21.7L379.3 102.5Q400.0 110.0 400.0 132.0L400.0 572.0Q400.0 600.0 372.0 600.0L28.0 600.0Q0.0 600.0 0.0 572.0Z'/></svg>");
  --shape-strip-r:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'><path d='M24 0H330C440 0 500 90 500 200C500 310 440 400 330 400H24Q0 400 0 376V24Q0 0 24 0Z'/></svg>");
  --shape-strip-l:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'><path d='M476 0H170C60 0 0 90 0 200C0 310 60 400 170 400H476Q500 400 500 376V24Q500 0 476 0Z'/></svg>");
}

/* Any element that takes one of the masks */
.masked{
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}

/* Corner slice, top-right (kept for the odd inner-page use) */
.is-cut-tr{
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
@media (max-width:640px){ .is-cut-tr{ --cut:1.5rem; } }

/* Rounded cards site-wide — the flat 2px radius reads as unfinished next to
   the rounded panels above. */
.plan-card,.community-card,.post-card,.showhome-card{ border-radius:var(--radius-md); }
.card-media{ border-radius:0; }
.slider__btn{ transition-duration:.2s; }

/* --- Home hero: straight bottom, video fade -------------------------------
   The earlier polygon cut is gone; the first panel below carries the angle. */
.hero__video{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .8s var(--ease);
}
.hero__video.is-playing{ opacity:1; }
.hero--home{ clip-path:none; padding-bottom:var(--space-2xl); }
.hero--home .hero__eyebrow{ color:var(--sand); }
.hero--home .hero__title{ max-width:14ch; }
.hero--home .hero__subtitle{ margin-bottom:var(--space-md); max-width:52ch; }
.hero--home .hero__actions{ margin-top:var(--space-md); }

/* --- Feature band --------------------------------------------------------- */
.feature-band{
  position:relative;
  display:grid;
  background:var(--ink);
  color:var(--ink-on-dark);
  border-radius:var(--radius-leaf);
  overflow:hidden;
  isolation:isolate;
  box-shadow:var(--shadow-lg);
}
.feature-band__media{ position:relative; }
.feature-band__media img{
  display:block;
  width:100%; height:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  -webkit-mask-image:var(--shape-bowl-b); mask-image:var(--shape-bowl-b);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.feature-band__body{
  padding:clamp(1.25rem,4vw,3rem) clamp(1.25rem,5vw,4.5rem) clamp(2.25rem,5vw,4.5rem);
}
.feature-band__heading{ color:#fff; max-width:14ch; margin-bottom:var(--space-sm); }
.feature-band__text{
  color:var(--stone-on-dark);
  font-size:var(--fs-lede);
  line-height:1.5;
  max-width:34ch;
  margin-bottom:var(--space-md);
}
.feature-band__actions{ display:flex; flex-wrap:wrap; gap:var(--space-xs); }
@media (min-width:1024px){
  .feature-band{
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    min-height:min(36rem,60vh);
  }
  .feature-band__media img{
    position:absolute;
    inset:0;
    aspect-ratio:auto;
    width:100%;
    max-width:none;
    -webkit-mask-image:var(--shape-bowl-r); mask-image:var(--shape-bowl-r);
  }
  .feature-band__body{ align-self:center; padding-left:clamp(2rem,4vw,4rem); }
  .feature-band--no-media{ grid-template-columns:1fr; }
}

/* --- Communities stage + tiles ------------------------------------------- */
.communities-feature__head{ max-width:36rem; }
.communities-feature__stage{ position:relative; margin-top:var(--space-lg); }
.communities-feature__media img{
  display:block;
  width:100%;
  height:min(72vw,40rem);
  object-fit:cover;
  -webkit-mask-image:var(--shape-gable-m); mask-image:var(--shape-gable-m);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
@media (min-width:768px){
  .communities-feature__media img{ -webkit-mask-image:var(--shape-gable); mask-image:var(--shape-gable); }
}
.communities-feature__note-wrap{ margin-top:calc(-1 * var(--space-lg)); position:relative; z-index:1; }
.communities-feature__note{
  background:var(--ink);
  color:var(--ink-on-dark);
  border-radius:var(--radius-leaf);
  padding:clamp(1.25rem,3vw,2rem) clamp(1.25rem,3vw,2.25rem);
  max-width:26rem;
  margin-left:auto;
  box-shadow:var(--shadow-lg);
}
.communities-feature__note-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-h4);
  line-height:1.3;
  color:#fff;
  margin-bottom:var(--space-xs);
}
.communities-feature__note-text{ font-size:var(--fs-small); line-height:1.6; color:var(--stone-on-dark); margin:0; }
@media (min-width:1024px){
  .communities-feature__stage{ margin-top:calc(-1 * clamp(4rem,9vw,8rem)); }
  .communities-feature__media img{ height:min(52vw,46rem); }
  .communities-feature__note-wrap{ position:absolute; inset:auto 0 clamp(2rem,4vw,3.5rem) 0; margin:0; }
}

.communities-tiles__heading{
  text-align:center;
  font-size:var(--fs-h3);
  font-weight:500;
  letter-spacing:-.01em;
  margin-bottom:var(--space-lg);
}
.communities-tiles__grid{
  display:grid;
  gap:var(--space-lg) var(--space-md);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:768px){ .communities-tiles__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .communities-tiles__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-lg) var(--space-lg); } }

.city-tile__media{
  display:block;
  aspect-ratio:2 / 3;
  background:var(--sand);
  overflow:hidden;
  margin-bottom:var(--space-sm);
  -webkit-mask-image:var(--shape-house); mask-image:var(--shape-house);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.city-tile__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.city-tile:hover .city-tile__media img{ transform:scale(1.04); }
.city-tile__title{ font-size:var(--fs-h4); font-weight:600; margin-bottom:var(--space-2xs); }
.city-tile__title-link{ color:inherit; transition:color var(--dur) var(--ease); }
.city-tile__title-link:hover{ color:var(--accent-text); }
.city-tile__text{ font-size:var(--fs-small); color:var(--stone); margin-bottom:var(--space-2xs); }
.city-tile__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-3xs); }
.city-tile__link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--accent-text);
}
.city-tile__link:hover{ color:var(--ink); }
.city-tile__media--logo{ background:#fff; display:flex; align-items:center; justify-content:center; padding:12% 10%; }
.city-tile__media--logo img{ object-fit:contain; }
.city-tile__arrow{ width:.75rem; height:.75rem; transition:transform var(--dur) var(--ease); }
.city-tile__link:hover .city-tile__arrow{ transform:translateX(3px); }
.city-tile--custom .city-tile__media{ background:var(--ink); }

/* --- Video feature --------------------------------------------------------- */
.video-feature{ margin:var(--space-lg) 0 0; }
.video-feature__frame{
  position:relative;
  aspect-ratio:16 / 9;
  background:var(--ink);
  border-radius:var(--radius-leaf);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.video-feature__poster,
.video-feature__video,
.video-feature__frame iframe{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border:0;
}
.video-feature__frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(25,22,43,.05) 0%,rgba(25,22,43,.35) 100%);
  pointer-events:none;
}
.video-feature__play{
  position:absolute;
  inset:0;
  margin:auto;
  z-index:2;
  display:grid;
  place-items:center;
  width:clamp(4rem,9vw,6.5rem); height:clamp(4rem,9vw,6.5rem);
  border:0;
  border-radius:50%;
  background:var(--sand);
  color:var(--ink);
  cursor:pointer;
  box-shadow:0 0 0 0 rgba(230,197,172,.45), var(--shadow-lg);
  transition:transform var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow .6s var(--ease);
}
.video-feature__play:hover{ transform:scale(1.06); background:#fff; box-shadow:0 0 0 14px rgba(230,197,172,.22), var(--shadow-lg); }
.video-feature__play:focus-visible{ outline:3px solid #fff; outline-offset:4px; }
.video-feature__play-icon{ width:38%; height:38%; margin-left:6%; }
.video-feature.is-playing .video-feature__frame::after,
.video-feature.is-playing .video-feature__play{ display:none; }

/* --- Photo strip ----------------------------------------------------------- */
.photo-strip{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:78%;
  gap:var(--space-xs);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  margin-inline:calc(-1 * var(--gutter));
  padding-inline:var(--gutter);
  margin-top:var(--space-lg);
}
.photo-strip::-webkit-scrollbar{ display:none; }
.photo-strip__item{
  scroll-snap-align:start;
  margin:0;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:var(--radius-xl);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
/* bowl right · plain · bowl left — the strip reads as one soft "D · D" rhythm */
.photo-strip__item:nth-child(3n+1){ border-radius:0; -webkit-mask-image:var(--shape-strip-r); mask-image:var(--shape-strip-r); }
.photo-strip__item:nth-child(3n){ border-radius:0; -webkit-mask-image:var(--shape-strip-l); mask-image:var(--shape-strip-l); }
.photo-strip__item img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:1024px){
  .photo-strip{
    grid-auto-flow:row;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    overflow:visible;
    margin-inline:0;
    padding-inline:0;
  }
  .photo-strip{ gap:var(--space-md); }
  .photo-strip__item{ aspect-ratio:5 / 4; }
  .photo-strip--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .photo-strip--1{ grid-template-columns:1fr; }
}
.photo-strip__foot{ display:grid; gap:var(--space-md); margin-top:var(--space-xl); }
.photo-strip__tagline{
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--fs-h3);
  line-height:1.25;
  letter-spacing:-.01em;
  max-width:18ch;
  margin:0;
}
.photo-strip__copy p{ font-size:var(--fs-small); line-height:1.7; color:var(--stone); max-width:56ch; }
@media (min-width:768px){
  .photo-strip__foot{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:var(--space-xl); align-items:start; }
}

/* --- Reviews ---------------------------------------------------------------
   Heading on the cream ground; the photo below wears the angular mask and the
   review card rises out of its bottom edge (rounded top only). */
.reviews__head{ max-width:36rem; }
.reviews__stage{
  position:relative;
  margin-top:var(--space-lg);
  padding-top:clamp(6rem,18vw,10rem);
  padding-bottom:clamp(2rem,5vw,3.5rem);
  isolation:isolate;
}
.reviews__media{
  position:absolute;
  inset:0;
  z-index:-1;
  -webkit-mask-image:var(--shape-gable-m); mask-image:var(--shape-gable-m);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  background:var(--forest);
}
.reviews__media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.85); }
.reviews__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(25,22,43,.82) 0%,rgba(25,22,43,.55) 55%,rgba(25,22,43,.3) 100%),
    linear-gradient(180deg,rgba(25,22,43,0) 40%,rgba(25,22,43,.55) 100%);
}
.reviews:not(.reviews--media) .reviews__media{ display:none; }
.reviews:not(.reviews--media) .reviews__stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--forest);
  -webkit-mask-image:var(--shape-gable-m); mask-image:var(--shape-gable-m);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
.reviews__inner{
  display:grid;
  gap:var(--space-lg);
  align-items:end;
}
.reviews__inner > *{ min-width:0; }
.reviews__slider{ width:100%; max-width:34rem; }
.reviews__slider .swiper{ overflow:hidden; width:100%; border-radius:2.75rem 1rem 0 0; }

.review{
  display:flex;
  flex-direction:column;
  height:100%;
  margin:0;
  padding:clamp(1.5rem,3vw,2.75rem) clamp(1.5rem,3vw,2.75rem) clamp(1.75rem,3vw,3rem);
  background:var(--bg);
  color:var(--ink);
  border-radius:2.75rem 1rem 0 0;
}
.review__mark{ width:2rem; height:2rem; color:var(--accent-text); margin-bottom:var(--space-sm); }
.review__title{ font-size:var(--fs-h4); font-weight:600; margin-bottom:var(--space-xs); }
.review__quote{ margin:0 0 var(--space-md); font-size:1rem; line-height:1.65; color:var(--charcoal); }
.review__footer{
  margin-top:auto;
  padding-top:var(--space-sm);
  border-top:1px solid var(--line-strong);
  display:grid;
  gap:.15rem;
}
.review__stars{ display:flex; gap:2px; color:var(--accent-text); margin-bottom:.35rem; }
.review__stars svg{ width:.875rem; height:.875rem; }
.review__stars svg.is-empty{ opacity:.28; }
.review__author{ font-weight:600; font-size:var(--fs-small); }
.review__meta{ font-size:var(--fs-small); color:var(--stone); }
.review__source{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-top:.5rem;
  font-size:.75rem;
  letter-spacing:.04em;
  color:var(--stone);
}
.review__source-icon{ width:.9rem; height:.9rem; }
.swiper-slide .review{ height:100%; }

/* Progress bar + arrows sit under the card, still on the photo */
.reviews__controls{
  display:flex;
  align-items:center;
  gap:var(--space-xs);
  margin-top:var(--space-md);
}
.reviews__progress{
  position:relative;
  flex:1;
  height:3px;
  border-radius:3px;
  overflow:hidden;
  background:rgba(255,255,255,.22);
  margin-right:var(--space-sm);
}
.reviews__progress .swiper-pagination-progressbar-fill{
  position:absolute;
  inset:0;
  background:var(--sand);
  border-radius:3px;
  transform-origin:left;
}
.slider__btn--on-dark{ background:transparent; border-color:rgba(255,255,255,.4); color:#fff; }
.slider__btn--on-dark:hover{ background:#fff; border-color:#fff; color:var(--ink); }

.reviews__google{
  display:flex;
  align-items:flex-start;
  gap:var(--space-sm);
  color:var(--ink-on-dark);
  padding:0;
}
.reviews__google-icon{ width:2.25rem; height:2.25rem; flex:none; padding:.4rem; background:#fff; border-radius:50%; }
.reviews__rating{ display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; }
.reviews__rating strong{ font-family:var(--font-display); font-size:1.5rem; font-weight:600; color:#fff; line-height:1; }
.reviews__rating-stars{ display:inline-flex; gap:2px; color:var(--sand); }
.reviews__rating-stars svg{ width:.9rem; height:.9rem; }
.reviews__rating-stars svg.is-empty{ opacity:.3; }
.reviews__count{ display:block; font-weight:600; color:#fff; margin-bottom:.35rem; }
.link-arrow--on-dark{ color:var(--sand); }
.link-arrow--on-dark:hover{ color:#fff; }

@media (min-width:1024px){
  .reviews__stage{ padding-top:clamp(10rem,18vw,14rem); }
  .reviews__media,
  .reviews:not(.reviews--media) .reviews__stage::before{
    -webkit-mask-image:var(--shape-gable-r); mask-image:var(--shape-gable-r);
  }
  .reviews__inner{ grid-template-columns:minmax(0,34rem) minmax(0,1fr); }
  .reviews__google{ justify-self:end; padding-bottom:.5rem; }
}

/* --- CTA card ----------------------------------------------------------------
   Replaces the full-bleed band: a rounded navy card with the photo (or a sand
   panel) behind an angled mask on the right. Overrides section 13. */
.cta-band,.cta-band--media,.cta-band--forest,.cta-band--accent{
  background:transparent;
  color:inherit;
  padding-block:var(--space-2xl);
  overflow:visible;
}
.cta-card{
  position:relative;
  display:grid;
  background:var(--ink);
  color:var(--ink-on-dark);
  border-radius:var(--radius-leaf);
  overflow:hidden;
  isolation:isolate;
  box-shadow:var(--shadow-lg);
}
.cta-card__media{ position:relative; order:-1; }
.cta-card__media img,
.cta-card__panel{
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  -webkit-mask-image:var(--shape-bowl-b); mask-image:var(--shape-bowl-b);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.cta-card__panel{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--sand) 0%,var(--accent-hover) 100%);
  color:rgba(25,22,43,.18);
}
.cta-card__mark{ width:38%; max-width:14rem; }
.cta-card__body{
  padding:clamp(1.5rem,4vw,3rem) clamp(1.25rem,5vw,4.5rem) clamp(2.25rem,5vw,4.5rem);
}
.cta-card__title{ color:#fff; max-width:16ch; margin-bottom:var(--space-sm); }
.cta-card__text{
  color:var(--stone-on-dark);
  font-size:var(--fs-lede);
  line-height:1.5;
  max-width:36ch;
  margin-bottom:var(--space-md);
}
.cta-card__actions{ display:flex; flex-wrap:wrap; gap:var(--space-xs); }
@media (min-width:1024px){
  .cta-card{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); min-height:min(28rem,50vh); }
  .cta-card__media{ order:1; }
  .cta-card__media img,
  .cta-card__panel{
    position:absolute;
    inset:0;
    left:0;
    width:100%;
    max-width:none;
    height:100%;
    aspect-ratio:auto;
    -webkit-mask-image:var(--shape-bowl-l); mask-image:var(--shape-bowl-l);
  }
  .cta-card__body{ align-self:center; padding-right:clamp(1rem,3vw,3rem); }
}


/* ==========================================================================
   22. INNER PAGES — same shape language as the home page
   --------------------------------------------------------------------------
   Split photos take the D-bowl (bulging toward the copy), the About mosaic
   takes the tile roofline, and every panel/card that still had the 2px
   radius moves to --radius-md / --radius-leaf. Overrides sections 08–14.
   ========================================================================== */

/* Split block photo: bowl toward the copy on desktop, bowl underneath on phones */
.split__media img.split__img{
  border-radius:0;
  -webkit-mask-image:var(--shape-bowl-b); mask-image:var(--shape-bowl-b);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
@media (min-width:1024px){
  .split__media img.split__img{ -webkit-mask-image:var(--shape-bowl-rp); mask-image:var(--shape-bowl-rp); }
  .split--reverse .split__media img.split__img{ -webkit-mask-image:var(--shape-bowl-lp); mask-image:var(--shape-bowl-lp); }
  .split__media--landscape img.split__img{ -webkit-mask-image:var(--shape-bowl-r); mask-image:var(--shape-bowl-r); }
  .split--reverse .split__media--landscape img.split__img{ -webkit-mask-image:var(--shape-bowl-l); mask-image:var(--shape-bowl-l); }
}
.split__media-inset{ border-radius:1.25rem .5rem 1.25rem .5rem; }
.split__media-inset img{ border-radius:.875rem .25rem .875rem .25rem; }

/* About mosaic: the city-tile roofline */
.mosaic__item{
  border-radius:0;
  -webkit-mask-image:var(--shape-house); mask-image:var(--shape-house);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* Community cards wear the same roofline as the home page city tiles */
.community-card{
  border-radius:0;
  box-shadow:none;
  -webkit-mask-image:var(--shape-house); mask-image:var(--shape-house);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.community-card:hover{ box-shadow:none; }
.community-card__body{ padding-bottom:calc(var(--space-md) + .5rem); }

/* Panels */
.stat-row{ border-radius:var(--radius-md); overflow:hidden; }
.sidebar__panel{ border-radius:var(--radius-leaf); }
.sidebar__panel--dark{ border-radius:var(--radius-leaf); }
.floorplan{ border-radius:var(--radius-md); }
.floorplan__image{ border-radius:var(--radius-md); overflow:hidden; }
.map-embed{ border-radius:var(--radius-leaf); }
.form-embed{ border-radius:var(--radius-md); overflow:hidden; }
.badge{ border-radius:var(--radius-md); }
.services{ border-radius:var(--radius-md); }
.team-member__photo{ border-radius:var(--radius-leaf); overflow:hidden; }
.team-member__photo img{ border-radius:0; }
.gallery-thumbs .swiper-slide img,
.gallery-thumbs img{ border-radius:.5rem; }
.chip{ border-radius:var(--radius-pill); }
.filter-bar__inner{ border-radius:var(--radius-md); }
.post-card .card-media,
.showhome-card .card-media,
.community-card .card-media{ border-radius:0; }
.prose img,
.entry-content img{ border-radius:var(--radius-md); }
.form input:not([type=checkbox]):not([type=radio]),
.form textarea,
.form select{ border-radius:.625rem; }