/* ==========================================================================
   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 mapped from prominenthomes.ca's own theme tokens:
     rust #800d19, birch #fcf9f5 / #eae3d5, slate #262426. Deep burgundy
     carries the brand; warm off-white and tan carry the ground. */
  --ink:#262426;            /* slate — near-black body text            */
  --charcoal:#474447;       /* slate-50 — dark blocks                  */
  --bg:#FCF9F5;             /* birch — warm off-white page ground      */
  --surface:#FFFFFF;
  --stone:#6B6252;          /* muted text — AA on bg, white and sand   */
  --sand:#EAE3D5;           /* birch-20 — tan panels                   */
  --accent:#800D19;         /* rust — the brand burgundy               */
  --accent-hover:#570009;   /* rust-60                                 */
  --forest:#32250C;         /* birch-60 — deep warm brown contrast     */

  /* Derived colour.
     The burgundy is dark enough (10.06:1 on --bg) to be used as text, as an
     icon and as a fill behind white labels — no lightened sibling needed. */
  --line:#EAE3D5;                       /* hairline rules                    */
  --line-strong:#DED6C6;                /* decorative dividers               */
  --line-input:#948A76;                 /* control borders — 3.41:1 on white */
  --ink-on-dark:#FCF9F5;
  --stone-on-dark:#C5BCAB;              /* muted on burgundy — 5.61: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(38,36,38,.72) 0%,rgba(38,36,38,.84) 45%,rgba(38,36,38,.90) 100%);
  --focus:#800D19;

  /* Geometry */
  --radius:2px;
  --radius-lg:4px;
  --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:.25rem;
  --space-2xs:.5rem;
  --space-xs:.75rem;
  --space-sm:1rem;
  --space-md:1.5rem;
  --space-lg:2.5rem;
  --space-xl:4rem;
  --space-2xl:clamp(4rem,9vw,7.5rem);

  /* Type */
  --font-serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --fs-eyebrow:.75rem;
  --fs-small:.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(1.875rem,3.6vw,3.25rem);
  --fs-h1:clamp(2.375rem,5.4vw,4.5rem);
  --fs-display:clamp(2.875rem,7vw,5.75rem);

  --lh-tight:1.06;
  --lh-heading:1.14;
  --lh-body:1.65;
  --tracking-eyebrow:.16em;

  /* Effects */
  --shadow-sm:0 1px 2px rgba(38,36,38,.05);
  --shadow-md:0 12px 28px -14px rgba(38,36,38,.26);
  --shadow-lg:0 26px 60px -26px rgba(38,36,38,.38);
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.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:.75rem 1.25rem;
  background:var(--accent);
  color:#fff;
  border-radius:var(--radius-pill);
  font-weight:600;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:var(--space-sm); }


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

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

h1{ font-size:var(--fs-h1); line-height:var(--lh-tight); }
h2{ font-size:var(--fs-h2); }
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);
  margin:0 0 var(--space-xs);
}
.eyebrow--muted{ color:var(--stone); }
.eyebrow--on-dark{ color:var(--sand); }

.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-decoration:underline;
  text-underline-offset:.2em;
}
.prose a:hover{ color:var(--accent-hover); }

/* Inline text link with an animated underline */
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight:600;
  font-size:var(--fs-small);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent);
}
.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:.5rem;
  padding:.9375rem 1.875rem;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  font-size:var(--fs-small);
  font-weight:600;
  letter-spacing:.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:#fff; }
.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,.55); color:#fff; }
.btn--ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* Primary action on a dark ground. A burgundy fill on near-black reads muddy;
   the light pill is what the reference uses in the same position. */
.btn--light{ background:var(--bg); color:var(--ink); }
.btn--light:hover{ background:#fff; }

.btn--sm{ padding:.6875rem 1.25rem; font-size:.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,.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:.625rem;
  margin-right:auto;
  flex:none;
}
.site-header__logo-mark{
  width:2rem; height:2rem;
  flex:none;
  color:var(--accent);
  transition:color var(--dur) var(--ease);
}
body.has-hero .site-header:not(.site-header--solid) .site-header__logo-mark{ color:#fff; }
.site-header__logo-text{
  font-family:var(--font-serif);
  font-size:1.0625rem;
  line-height:1.1;
  letter-spacing:.01em;
  color:var(--ink);
  transition:color var(--dur) var(--ease);
}
.site-header__logo-sub{
  display:block;
  font-family:var(--font-sans);
  font-size:.5625rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--stone);
  margin-top:.15rem;
}

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

@media (min-width:1024px){
  .nav{ display:block; }
  .nav__list{ display:flex; align-items:center; gap:clamp(.875rem,1.7vw,1.5rem); }
  .nav__link{
    position:relative;
    display:inline-block;
    padding-block:.5rem;
    white-space:nowrap;
    font-size:.8125rem;
    font-weight:500;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--charcoal);
    transition:color var(--dur) var(--ease);
  }
  .nav__link::after{
    content:"";
    position:absolute;
    left:0; bottom:.15rem;
    width:0; height:1px;
    background:var(--accent);
    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); }
  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:.4375rem;
  font-size:.875rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--charcoal);
  white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
.site-header__phone:hover{ color:var(--accent); }
.site-header__phone svg{ width:.875rem; height:.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:-.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-serif);
  font-size:1.5rem;
  color:var(--ink);
}
.mobile-menu__link[aria-current="page"]{ color:var(--accent); }

.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(38,36,38,.88) 0%,rgba(38,36,38,.82) 46%,rgba(38,36,38,.42) 72%,rgba(38,36,38,.28) 100%),
      linear-gradient(180deg,rgba(38,36,38,.34) 0%,rgba(38,36,38,0) 24%,rgba(38,36,38,0) 68%,rgba(38,36,38,.46) 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,.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,.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,.24);
}
@media (min-width:768px){ .hero__stats{ display:flex; } }
.hero__stat-value{
  display:block;
  font-family:var(--font-serif);
  font-size:1.75rem;
  line-height:1.1;
  color:#fff;
}
.hero__stat-label{
  font-size:var(--fs-eyebrow);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
}

/* 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:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.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(38,36,38,.86) 0%,rgba(38,36,38,.90) 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(38,36,38,.90) 0%,rgba(38,36,38,.86) 48%,rgba(38,36,38,.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,.88); }
.page-hero--media .breadcrumb{ color:rgba(255,255,255,.80); }
.page-hero--media .breadcrumb a:hover{ color:#fff; }
.page-hero--media .breadcrumb__sep{ opacity:.6; }


/* Breadcrumb */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  font-size:var(--fs-small);
  color:var(--stone);
  margin-bottom:var(--space-sm);
}
.breadcrumb__sep{ opacity:.5; }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb--on-dark{ color:rgba(255,255,255,.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 .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:.3125rem .625rem;
  border-radius:2px;
  background:var(--sand);
  color:var(--charcoal);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}
.chip--accent{ background:var(--accent); color:#fff; }
.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:.75rem; left:.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 .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:.375rem;
  font-size:var(--fs-small);
  color:var(--stone);
  margin-bottom:var(--space-sm);
}
.plan-card__location svg{ width:.8125rem; height:.8125rem; flex:none; color:var(--accent); }

.plan-card__price{
  font-family:var(--font-serif);
  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:.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 .7s var(--ease);
}
.community-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(28,27,25,0) 35%,rgba(28,27,25,.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,.78);
  margin-bottom:.375rem;
}
.community-card__title{
  font-size:var(--fs-h3);
  color:#fff;
  margin:0 0 .375rem;
}
.community-card__meta{
  font-size:var(--fs-small);
  color:rgba(255,255,255,.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:.5rem;
  font-size:var(--fs-eyebrow);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:var(--space-2xs);
}
.post-card__category{ color:var(--accent); 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:.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:.5rem;
}
.filter-chip{
  padding:.5rem .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:.3125rem; margin:0; }
.field__label{
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--stone);
}
.field__control{
  width:100%;
  padding:.6875rem .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 .75rem center;
  background-size:.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-decoration:underline;
  text-underline-offset:.2em;
}
.filter-bar__reset:hover{ color:var(--accent-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-serif);
  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:.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:.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);
  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) * .75);
  color:var(--accent);
  margin-bottom:var(--space-sm);
}
.testimonial__stars svg{ width:.9375rem; height:.9375rem; }
.testimonial__quote{
  font-family:var(--font-serif);
  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); }

.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:rgba(255,255,255,.9); }
.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 .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(38,36,38,.86) 0%,rgba(38,36,38,.90) 100%);
}
@media (min-width:1024px){
  .cta-band__media::after{
    background:linear-gradient(90deg,rgba(38,36,38,.90) 0%,rgba(38,36,38,.86) 52%,rgba(38,36,38,.40) 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 .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(38,36,38,0) 0%,rgba(38,36,38,.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:.375rem .75rem;
  border-radius:2px;
  background:rgba(28,27,25,.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:.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:.5rem; margin-bottom:var(--space-xs); }
.single-head__title{ margin:0 0 .375rem; }
.single-head__location{
  display:flex;
  align-items:center;
  gap:.4375rem;
  color:var(--stone);
  margin:0;
}
.single-head__location svg{ width:1rem; height:1rem; color:var(--accent); 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:.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); margin-bottom:.25rem; }
.stat-bar__value{
  font-family:var(--font-serif);
  font-size:1.5rem;
  line-height:1;
  color:var(--ink);
}
.stat-bar__label{
  font-size:var(--fs-eyebrow);
  letter-spacing:.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 .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:.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:.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:.625rem;
  font-size:var(--fs-small);
  line-height:1.5;
}
.feature-list__item svg{
  width:1rem; height:1rem;
  flex:none;
  margin-top:.2rem;
  color:var(--accent);
}

/* --- 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:.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 .5rem;
  color:var(--accent);
}
/* 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,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(110,102,92,.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:.375rem; }
.amenity__icon{ width:1.5rem; height:1.5rem; color:var(--accent); }
.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 .125rem; }
.team-member__role{
  font-size:var(--fs-eyebrow);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 var(--space-2xs);
}
.team-member__contact{
  display:grid;
  gap:.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); }

/* --- 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:.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); }
.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:.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-serif);
  font-size:1.75rem;
  color:var(--accent);
  margin-bottom:.5rem;
}
.step__title{ font-size:var(--fs-h4); margin: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:.8125rem .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(--accent);
  box-shadow:0 0 0 3px rgba(200,90,44,.15);
}
textarea.form__control{ min-height:130px; resize:vertical; }
.form__hint{ font-size:var(--fs-eyebrow); color:var(--stone); letter-spacing:.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:.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);
}
.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:.2rem;
  color:var(--accent);
}
.contact-item__label{
  display:block;
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:.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); }


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

.site-footer{
  background:var(--accent);
  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,.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:.625rem; }
.site-footer__logo-mark{ width:2.25rem; height:2.25rem; color:var(--sand); flex:none; }
.site-footer__logo-text{
  font-family:var(--font-serif);
  font-size:1.125rem;
  color:var(--ink-on-dark);
  line-height:1.1;
}
.site-footer__logo-sub{
  display:block;
  font-family:var(--font-sans);
  font-size:.5625rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--stone-on-dark);
  margin-top:.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:.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:.625rem; }
.site-footer__social-link{
  display:grid;
  place-items:center;
  width:2.375rem; height:2.375rem;
  border:1px solid rgba(255,255,255,.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:.5rem;
  padding:.6875rem 1.125rem;
  border:1px solid rgba(255,255,255,.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,.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:.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:.5rem;
  padding:.625rem var(--gutter) calc(.625rem + env(safe-area-inset-bottom,0px));
  background:var(--surface);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 20px -12px rgba(28,27,25,.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:.5rem;
  padding:.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:.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:.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,.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:.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(--accent); 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 .7s var(--ease),transform .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:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.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; }
}