/* hide theme chrome (design has own nav) */.page-header,.site-header,.site-description,.wp-block-post-title,.entry-title,header.wp-block-template-part,.entry-header{display:none!important}
/* =========================================================
   Sisu Development — Core Tokens
   Colors, type scales, and semantic element styles.
   Import once, then use the custom properties below.
   ========================================================= */

/* ---------- Webfonts (Google Fonts — see README font notes) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =======================================================
     COLOR — Core palette
     Anchor values come from the Pecan Heights flyers and the
     brand-voice doc. Neutrals and extended accents are new
     additions to round the system out.
     ======================================================= */

  /* Ink / near-black — primary background on dark surfaces */
  --ink-900: #0E0E0E;      /* deepest, reserved for shadow pools */
  --ink-800: #1A1A1A;      /* PRIMARY DARK from brand doc */
  --ink-700: #262626;      /* card surface on dark */
  --ink-600: #3A3A3A;      /* hairlines on dark */

  /* Paper / warm neutrals — primary background on light surfaces */
  --paper-50:  #FAF7F1;    /* page bg, warm off-white */
  --paper-100: #F5ECD7;    /* LIGHT GOLD from brand doc */
  --paper-200: #EDE4CF;    /* subtle panel */
  --paper-300: #D9CFB7;    /* divider on paper */

  /* Gold — signature accent */
  --gold-300: #E4CE93;     /* tint / hover on dark */
  --gold-500: #C5A55A;     /* GOLD ACCENT from brand doc */
  --gold-600: #A88841;     /* pressed / link-visited */
  --gold-700: #7D6328;     /* text-on-paper when contrast needed */

  /* Sage — secondary accent, pulled from Pecan Heights "sage green accents" */
  --sage-300: #B7C4A8;
  --sage-500: #7E9472;     /* primary sage */
  --sage-700: #4E5E46;

  /* Pecan / wood brown — tertiary, supports "wood slat details" */
  --pecan-300: #C9A888;
  --pecan-500: #8B6A4B;
  --pecan-700: #563F2A;

  /* Neutral grays (cool-neutral, used in docs / body text) */
  --gray-50:  #F4F4F3;
  --gray-100: #E7E6E3;
  --gray-200: #CFCDC8;
  --gray-300: #A9A7A1;
  --gray-500: #6B6A66;
  --gray-700: #3E3E3B;

  /* Semantic — status */
  --status-ok:    #5F7D4F;
  --status-warn:  #B88A2E;
  --status-err:   #8E3A3A;

  /* =======================================================
     COLOR — Semantic aliases (use these in components)
     ======================================================= */

  /* Light theme (default) */
  --bg:           var(--paper-50);
  --bg-raised:   #FFFFFF;
  --bg-sunken:    var(--paper-100);
  --fg:           var(--ink-800);
  --fg-muted:     var(--gray-500);
  --fg-subtle:    var(--gray-300);
  --border:       var(--paper-300);
  --border-strong: var(--ink-800);
  --accent:       var(--gold-500);
  --accent-fg:    var(--ink-800);        /* gold + black = high contrast stamp */
  --accent-ink:   var(--gold-700);       /* when placing gold-family text on paper */
  --link:         var(--ink-800);
  --link-hover:   var(--gold-600);

  /* =======================================================
     TYPE — Families
     Cormorant Garamond: display serif. Closest Google Fonts
     match to the Didone-ish logo serif (the shipped logo uses
     a similar high-contrast display cut; see README).
     Inter: workhorse sans for UI, body, all-caps labels.
     JetBrains Mono: specs, lot numbers, data readouts.
     ======================================================= */
  --font-display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* =======================================================
     TYPE — Scale (desktop-first; scales down via clamps)
     ======================================================= */
  --fs-overline:  0.75rem;   /* 12px — all-caps eyebrow */
  --fs-label:     0.8125rem; /* 13px */
  --fs-body-sm:   0.875rem;  /* 14px */
  --fs-body:      1rem;      /* 16px */
  --fs-body-lg:   1.125rem;  /* 18px */
  --fs-h6:        1.25rem;   /* 20px */
  --fs-h5:        1.5rem;    /* 24px */
  --fs-h4:        2rem;      /* 32px */
  --fs-h3:        2.75rem;   /* 44px */
  --fs-h2:        3.5rem;    /* 56px */
  --fs-h1:        clamp(3rem, 6vw, 5.5rem); /* 48–88px */
  --fs-display:   clamp(4rem, 9vw, 8rem);   /* hero headlines */

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-body:   1.55;
  --lh-loose:  1.75;

  /* Letter-spacing — Sisu leans on airy, wide-tracked all caps */
  --ls-tightest: -0.02em;
  --ls-tight:    -0.01em;
  --ls-normal:   0em;
  --ls-wide:     0.08em;     /* all-caps labels */
  --ls-wider:    0.14em;     /* flyer-style eyebrows */
  --ls-widest:   0.26em;     /* hero spacing like "B U I L D Y O U R V I S I O N" */

  /* =======================================================
     SPACING — 4px base, generous top-end for architectural layouts
     ======================================================= */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* =======================================================
     RADII — v2 (May 2026 refresh)
     Sisu's print pieces stay square (image frames, dividers,
     numeric badges). Interactive elements get rounded so the
     digital surfaces read modern and trustworthy alongside the
     national builders folks are comparing us to.

     Use --radius-sm/md/lg for surfaces, --radius-pill for any
     standalone CTA, status chip, or input. Use --radius-1/2
     only when matching a print piece deliberately.
     ======================================================= */
  --radius-0:    0;
  --radius-1:    2px;     /* legacy / print-matched square */
  --radius-2:    4px;     /* legacy / print-matched square */
  --radius-sm:   8px;     /* tags, small chips, inline buttons */
  --radius-md:   14px;    /* inputs, secondary buttons, tiles */
  --radius-lg:   20px;    /* cards, modals, content panels */
  --radius-xl:   28px;    /* hero search bar, featured cards */
  --radius-pill: 999px;   /* primary CTAs, status pills, badges */

  /* Component defaults — components can read these directly
     so we can tune the whole system from one place. */
  --radius-button:  var(--radius-pill);
  --radius-badge:   var(--radius-pill);
  --radius-card:    var(--radius-lg);
  --radius-input:   var(--radius-md);
  --radius-image:   var(--radius-lg);

  /* Touch target floor — never render an interactive element
     smaller than this on either axis. Mobile-first guidance. */
  --tap-min: 44px;

  /* =======================================================
     ELEVATION — soft, warm shadows (paper light)
     ======================================================= */
  --shadow-1: 0 1px 2px rgba(26, 26, 26, 0.06);
  --shadow-2: 0 4px 12px rgba(26, 26, 26, 0.08);
  --shadow-3: 0 16px 40px rgba(26, 26, 26, 0.12);
  --shadow-inset: inset 0 0 0 1px rgba(26,26,26,0.06);

  /* Dark-surface shadow (used on ink backgrounds, very subtle) */
  --shadow-dark-1: 0 1px 0 rgba(255,255,255,0.04), 0 4px 16px rgba(0,0,0,0.5);

  /* =======================================================
     MOTION
     ======================================================= */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* Layout */
  --container-max: 1200px;
  --container-gutter: clamp(1.25rem, 4vw, 3rem);
}

/* =========================================================
   DARK THEME — reverse the paper/ink pairing.
   Add class="theme-dark" to a parent, or use on <body>.
   ========================================================= */
.theme-dark {
  --bg:         var(--ink-800);
  --bg-raised:  var(--ink-700);
  --bg-sunken:  var(--ink-900);
  --fg:         var(--paper-50);
  --fg-muted:   var(--gray-200);
  --fg-subtle:  var(--gray-300);
  --border:     var(--ink-600);
  --border-strong: var(--paper-100);
  --accent:     var(--gold-500);
  --accent-fg:  var(--ink-800);
  --accent-ink: var(--gold-300);
  --link:       var(--paper-50);
  --link-hover: var(--gold-300);
}

/* =========================================================
   BASE — reset-lite + element defaults
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
}

/* =========================================================
   SEMANTIC TYPE — drop-in element styles
   ========================================================= */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-5);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-4);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-4);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}

h6, .h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h6);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}

p, .p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-4);
  color: var(--fg);
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg);
  max-width: 62ch;
}

.small, small {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

/* Hero/flyer style spaced caps — "B U I L D Y O U R V I S I O N" */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--fg-muted);
}

.label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg);
}

/* Italic tagline — "for a better living", always italic */
.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
}

/* Data / specs readout — used for lot numbers, sqft, $/sqft */
.spec, .mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-normal);
}

.spec-number {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: var(--ls-tightest);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-standard);
}
@media (hover:hover) and (pointer:fine) { a:hover { color: var(--link-hover); } }

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

/* Utility — a thin gold keyline often used between sections */
.rule-gold {
  border: 0;
  border-top: 1px solid var(--gold-500);
  width: 48px;
  margin: var(--space-4) 0;
}

/* =========================================================
   COMPONENTS — v2 baselines
   These give the whole system a coherent geometry without
   every page redeclaring its own button/badge/card styles.
   Override locally only when you have a real reason.
   ========================================================= */

/* --- Buttons ---------------------------------------------
   Pill geometry, 48px min height for mobile tap targets.
   Three tones: primary (gold), ink (dark), outline.
   The "ghost" link-style button keeps a thin gold underline
   as a brand callback — that one stays square.
*/
.btn {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap-min);
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

.btn-primary {
  background: var(--gold-500);
  color: var(--ink-800);
}
@media (hover:hover) and (pointer:fine) { .btn-primary:hover { background: var(--gold-300); } }

.btn-ink {
  background: var(--ink-800);
  color: var(--paper-50);
}
@media (hover:hover) and (pointer:fine) { .btn-ink:hover { background: #2A2A2A; } }

.btn-outline {
  background: transparent;
  color: var(--ink-800);
  border-color: var(--ink-800);
}
@media (hover:hover) and (pointer:fine) { .btn-outline:hover { background: var(--ink-800); color: var(--paper-50); } }

.btn-outline-light {
  background: transparent;
  color: var(--paper-50);
  border-color: rgba(250,247,241,0.6);
}
@media (hover:hover) and (pointer:fine) { .btn-outline-light:hover { background: var(--paper-50); color: var(--ink-800); border-color: var(--paper-50); } }

/* The "read more" affordance — kept square with gold underline
   as a callback to the print system. Sentence case, not caps. */
.btn-link {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-800);
  text-decoration: none;
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1.5px solid var(--gold-500);
  border-radius: 0;
}
@media (hover:hover) and (pointer:fine) { .btn-link:hover { color: var(--gold-700); } }

/* Compact size for dense UI */
.btn-sm { padding: 10px 18px; font-size: 13px; min-height: 38px; }

/* --- Badges ---------------------------------------------
   Pill-shaped, used for status, tags, "available" markers.
   The print-style square stamp lives on as .badge-stamp.
*/
.badge {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-badge);
  border: 1px solid transparent;
  line-height: 1.2;
}
.badge-gold    { background: var(--gold-500); color: var(--ink-800); }
.badge-ink     { background: var(--ink-800); color: var(--paper-50); }
.badge-sage    { background: var(--sage-500); color: var(--paper-50); }
.badge-outline { background: transparent; color: var(--ink-800); border-color: var(--paper-300); }
.badge-soft    { background: var(--paper-100); color: var(--gold-700); }
.badge-ok      { background: rgba(95,125,79,0.12); color: var(--status-ok); border-color: rgba(95,125,79,0.3); }
.badge-warn    { background: rgba(184,138,46,0.12); color: var(--status-warn); border-color: rgba(184,138,46,0.3); }

/* The print callback — wide-tracked caps in a hairline rectangle.
   Use only on flyers, hero overlays, lot-number stamps. */
.badge-stamp {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-1);
  border: 1px solid currentColor;
  display: inline-block;
}

/* --- Cards ----------------------------------------------
   Soft surface, hairline border, 20px radius.
   Photo + content cards keep the image radius matched.
*/
.card {
  background: var(--bg-raised);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
@media (hover:hover) and (pointer:fine) { .card-hover:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); } }

.card-ink {
  background: var(--ink-800);
  color: var(--paper-50);
  border-color: var(--ink-600);
  box-shadow: var(--shadow-dark-1);
}

.card-body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 10px; }

.card-media {
  background: var(--paper-200);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Inputs ----------------------------------------------
   Pill-edged on hero searches; rounded-rect elsewhere.
*/
.input {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1;
  padding: 14px 18px;
  min-height: var(--tap-min);
  background: #fff;
  color: var(--ink-800);
  border: 1px solid var(--paper-300);
  border-radius: var(--radius-input);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.input:focus { outline: none; border-color: var(--ink-800); box-shadow: 0 0 0 3px rgba(197,165,90,0.25); }
.input-search { border-radius: var(--radius-pill); padding-left: 22px; padding-right: 22px; }

/* --- Sticky mobile action bar ----------------------------
   Click-to-call + primary CTA, sits above the fold on small
   screens. Hidden on >=768px (desktop has nav CTAs).
*/
.mobile-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: none;
  gap: 10px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--paper-300);
}
.mobile-action-bar .btn { flex: 1; padding-left: 18px; padding-right: 18px; }
@media (max-width: 767px) {
  .mobile-action-bar { display: flex; }
}

/* =========================================================
   Sisu site — shared nav, footer, CTA, common section bits.
   Loaded by every page after sisu-tokens.css.
   ========================================================= */

body { background: var(--paper-50); }

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 32px;
  padding: 18px clamp(20px, 4vw, 56px);
  background: rgba(250,247,241,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--paper-300);
}
.nav .brand img { height: 44px; display: block; }
.nav .links { display: flex; gap: 24px; justify-self: center; }
.nav .links a {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-800); text-decoration: none;
  white-space: nowrap;
}
@media (hover:hover) and (pointer:fine) { .nav .links a:hover { color: var(--gold-600); } }
.nav .links a.is-active { color: var(--gold-600); }
.nav .right { display: flex; gap: 16px; align-items: center; }
.nav .phone {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--gray-700); text-decoration: none;
}
.nav .cta {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 22px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink-800); color: var(--paper-50);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
@media (hover:hover) and (pointer:fine) { .nav .cta:hover { background: var(--gold-500); color: var(--ink-800); } }
.nav .cta:active { transform: scale(0.98); }
@media (max-width: 900px) { .nav .links, .nav .phone { display: none; } }

/* ---------- SECTION SCAFFOLDING ---------- */
section { padding: clamp(72px, 9vw, 128px) clamp(24px, 6vw, 96px); }
.container { max-width: 1240px; margin: 0 auto; }
.eyebrow-line {
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.26em;
  color: var(--gold-700); margin-bottom: 24px;
  display: flex; align-items: center; gap: 16px;
}
.eyebrow-line::before {
  content: ''; width: 32px; height: 1px; background: var(--gold-500);
}
.section-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(36px, 4.5vw, 60px); line-height: 1.05;
  letter-spacing: -0.015em; margin: 0 0 24px; max-width: 18ch;
}
.section-title em { font-style: italic; color: var(--gold-700); font-weight: 400; }
.section-lead {
  font-family: var(--font-sans); font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.65; color: var(--gray-700); max-width: 62ch;
}
.gold-rule { border: 0; border-top: 1px solid var(--gold-500); width: 32px; margin: 0; }

/* ---------- CTA BAND ---------- */
.cta-band { background: var(--ink-800); color: var(--paper-50); text-align: center; padding: clamp(80px, 10vw, 140px) clamp(24px, 6vw, 96px); position: relative; overflow: hidden; }
.cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(197,165,90,0.10), transparent 60%); pointer-events: none; }
.cta-band .spaced { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold-500); margin-bottom: 32px; white-space: nowrap; padding-left: 0.42em; }
.cta-band h2 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 72px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 36px; max-width: 22ch; margin-inline: auto; }
.cta-band h2 em { font-style: italic; color: var(--gold-500); font-weight: 400; }
.cta-band .tagline-it { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--gold-300); margin-bottom: 40px; }
.cta-band .actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; position: relative; }
.cta-band a { font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; padding: 16px 32px; min-height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.cta-band a:active { transform: scale(0.98); }
.cta-band a.gold { background: var(--gold-500); color: var(--ink-800); border-radius: var(--radius-pill); }
@media (hover:hover) and (pointer:fine) { .cta-band a.gold:hover { background: var(--gold-300); } }
.cta-band a.ghost { color: var(--paper-50); border-bottom: 1px solid var(--gold-500); padding: 8px 4px; min-height: 0; border-radius: 0; }
@media (hover:hover) and (pointer:fine) { .cta-band a.ghost:hover { color: var(--gold-300); } }

/* ---------- FOOTER ---------- */
footer { background: var(--ink-900); color: rgba(250,247,241,0.7); padding: clamp(56px, 7vw, 88px) clamp(24px, 6vw, 96px) 32px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
footer h4 { font-family: var(--font-sans); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: var(--gold-500); margin: 0 0 20px; }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
footer ul a { font-family: var(--font-sans); font-size: 14px; color: rgba(250,247,241,0.7); text-decoration: none; }
@media (hover:hover) and (pointer:fine) { footer ul a:hover { color: var(--gold-300); } }
.foot-brand { max-width: 320px; }
.foot-brand img { height: 84px; margin-bottom: 24px; }
.foot-brand p { font-family: var(--font-sans); font-size: 14px; line-height: 1.65; color: rgba(250,247,241,0.65); margin: 0 0 20px; }
.foot-brand .tagline-it { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--gold-500); }
.foot-socials { display: flex; gap: 14px; margin-top: 24px; }
.foot-socials a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(250,247,241,0.18); border-radius: var(--radius-pill); transition: background var(--dur-fast), border-color var(--dur-fast); }
@media (hover:hover) and (pointer:fine) { .foot-socials a:hover { background: var(--gold-500); border-color: var(--gold-500); } }
.foot-socials img { width: 16px; height: 16px; filter: invert(1) opacity(0.7); transition: filter var(--dur-fast); }
@media (hover:hover) and (pointer:fine) { .foot-socials a:hover img { filter: invert(0) brightness(0); } }
.foot-bar { border-top: 1px solid var(--ink-700); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(250,247,241,0.4); }

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 100; display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; background: #25D366; color: #fff; border-radius: 999px; text-decoration: none; box-shadow: 0 8px 24px rgba(37,211,102,0.35), 0 2px 6px rgba(0,0,0,0.15); font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; transition: transform var(--dur-fast), box-shadow var(--dur-fast); }
@media (hover:hover) and (pointer:fine) { .wa-float:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(37,211,102,0.45), 0 2px 6px rgba(0,0,0,0.2); } }
.wa-float img { width: 22px; height: 22px; filter: invert(1); }
.wa-float .wa-label { white-space: nowrap; }
@media (max-width: 600px) { .wa-float .wa-label { display: none; } .wa-float { padding: 14px; } }

/* ---------- SHARED NAV/FOOTER FRAGMENTS ---------- */
/* Use these via include-by-pasting; placeholder for future SSR if needed. */


  /* ============ 900 SOUTH — LOCAL ============ */
  :root {
    --blk1: #C5A55A;        /* Block 1 — gold */
    --blk1-soft: #F3E9CC;
    --blk2: #CF5A2E;        /* Block 2 — terracotta, matches the plat */
    --blk2-soft: #F6E0D2;
    --sold: #6B6A66;
  }

  /* ============ HERO ============ */
  .ns-hero {
    position: relative;
    background: var(--ink-800); color: var(--paper-50);
    min-height: 780px; overflow: hidden;
  }
  .ns-hero .photo { position: absolute; inset: 0; z-index: 0; }
  .ns-hero .photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%;
    filter: brightness(0.72) contrast(1.05) saturate(0.95);
  }
  .ns-hero .photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(26,26,26,0.62) 0%, rgba(26,26,26,0.18) 32%, rgba(26,26,26,0.12) 58%, rgba(26,26,26,0.88) 100%);
  }
  .ns-hero .inner {
    position: relative; z-index: 1;
    max-width: 1240px; margin: 0 auto;
    padding: clamp(96px, 12vw, 160px) clamp(24px, 5vw, 80px) clamp(48px, 6vw, 80px);
    min-height: 780px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .ns-hero .corner-num {
    position: absolute; top: 32px; right: clamp(24px, 5vw, 80px);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.18em; color: var(--gold-500);
  }
  .ns-hero .eyebrow {
    font-family: var(--font-sans); font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.34em;
    color: var(--gold-500); margin-bottom: 28px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  }
  .ns-hero .eyebrow .stamp {
    border: 1px solid var(--gold-500); color: var(--gold-300);
    padding: 5px 12px; border-radius: var(--radius-1);
    font-size: 10px; letter-spacing: 0.22em;
  }
  .ns-hero h1 {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(68px, 11vw, 184px); line-height: 0.9;
    letter-spacing: -0.035em; margin: 0;
  }
  .ns-hero h1 em { font-style: italic; color: var(--gold-500); font-weight: 400; }
  .ns-hero .tagline-it {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(22px, 2.2vw, 32px); color: var(--gold-300);
    margin: 22px 0 0;
  }
  .ns-hero .lede {
    font-family: var(--font-sans); font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.65; color: rgba(250,247,241,0.84);
    max-width: 58ch; margin: 30px 0 0;
  }
  .ns-hero .lede strong { color: var(--gold-500); font-weight: 500; }

  .ns-hero-foot {
    margin-top: 52px;
    display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end;
  }
  @media (max-width: 900px) { .ns-hero-foot { grid-template-columns: 1fr; } }
  .ns-hero-stats {
    display: grid; grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid rgba(250,247,241,0.18); padding-top: 24px;
  }
  @media (max-width: 700px) { .ns-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
  .ns-hero-stats .s { border-right: 1px solid rgba(250,247,241,0.10); padding-right: 18px; }
  .ns-hero-stats .s:last-child { border-right: 0; }
  .ns-hero-stats .n {
    font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px);
    font-weight: 500; line-height: 1; color: var(--paper-50); letter-spacing: -0.015em;
  }
  .ns-hero-stats .k {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: rgba(250,247,241,0.55); margin-top: 10px;
  }
  .ns-hero .ctas { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
  .ns-hero .ctas .gold {
    font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
    padding: 16px 30px; min-height: var(--tap-min);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gold-500); color: var(--ink-800);
    text-decoration: none; border-radius: var(--radius-pill);
    transition: background var(--dur-fast), transform var(--dur-fast);
  }
  @media (hover:hover) and (pointer:fine) { .ns-hero .ctas .gold:hover { background: var(--gold-300); } }
  .ns-hero .ctas .gold:active { transform: scale(0.98); }
  .ns-hero .ctas .ghost {
    font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
    color: var(--paper-50); text-decoration: none;
    border-bottom: 1px solid var(--gold-500); padding-bottom: 4px;
  }

  /* ============ MARQUEE STRIP ============ */
  .ns-strip {
    background: var(--ink-900); color: rgba(250,247,241,0.85);
    padding: 18px clamp(24px, 6vw, 96px); overflow: hidden;
    border-bottom: 1px solid var(--ink-700);
  }
  .ns-strip-inner {
    display: flex; gap: 48px; justify-content: center; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  }
  .ns-strip-inner span { color: var(--gold-500); margin: 0 4px; }

  /* ============ INTRO ============ */
  .ns-intro { background: var(--paper-50); }
  .ns-intro-grid {
    display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(48px, 6vw, 96px); align-items: start;
  }
  @media (max-width: 900px) { .ns-intro-grid { grid-template-columns: 1fr; } }
  .ns-intro .lead-body p {
    font-family: var(--font-sans); font-size: 17px; line-height: 1.75;
    color: var(--gray-700); margin: 0 0 18px; max-width: 60ch;
  }
  .ns-intro .lead-body p:first-of-type::first-letter {
    font-family: var(--font-display); font-size: 64px; font-weight: 500;
    float: left; line-height: 0.9; padding: 6px 12px 0 0; color: var(--blk2);
  }
  .ns-intro .signature {
    margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--paper-300);
    display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; max-width: 60ch;
  }
  .ns-intro .signature .name { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--ink-800); }
  .ns-intro .signature .role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--gray-500); text-transform: uppercase; margin-top: 4px; }
  .ns-intro .signature .avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--paper-100) center/cover; border: 1px solid var(--paper-300); overflow: hidden; }
  .ns-intro .signature .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

  .ns-defs { background: #fff; border: 1px solid var(--paper-300); padding: 40px; border-radius: var(--radius-card); }
  .ns-defs h3 {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--gold-700);
    text-transform: uppercase; margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--paper-300);
  }
  .ns-defs dl { margin: 0; display: grid; gap: 18px; }
  .ns-defs .row { display: grid; grid-template-columns: 130px 1fr; gap: 24px; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid var(--paper-200); }
  .ns-defs .row:last-child { border-bottom: 0; padding-bottom: 0; }
  .ns-defs dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--gray-500); text-transform: uppercase; }
  .ns-defs dd { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.55; color: var(--ink-800); }
  .ns-defs dd .big { font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1; color: var(--ink-800); letter-spacing: -0.01em; margin-right: 8px; }
  .ns-defs dd em { font-style: italic; color: var(--gold-700); }
  .ns-map-btn {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
    padding: 8px 14px; min-height: 36px; background: #fff; border: 1px solid var(--paper-300);
    border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-800); text-decoration: none;
    transition: border-color var(--dur-base), background var(--dur-base);
  }
  @media (hover:hover) and (pointer:fine) { .ns-map-btn:hover { border-color: var(--ink-800); background: var(--paper-100); } }
  .ns-map-btn svg { display: block; flex: none; }

  /* ============ SITE PLAN ============ */
  .ns-site { background: var(--paper-100); }
  .ns-site .head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 48px; }
  @media (max-width: 900px) { .ns-site .head { grid-template-columns: 1fr; } }
  .ns-site .head p { font-family: var(--font-sans); font-size: 16px; line-height: 1.7; color: var(--gray-700); max-width: 52ch; margin: 0; }
  .ns-site-stage { background: #fff; border: 1px solid var(--paper-300); padding: clamp(16px, 2vw, 28px); border-radius: var(--radius-card); }
  .ns-site-stage img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
  .ns-site-legend {
    display: flex; gap: 28px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px;
    border-top: 1px solid var(--paper-300); font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.14em; color: var(--gray-700); text-transform: uppercase;
  }
  .ns-site-legend .lg { display: flex; align-items: center; gap: 10px; }
  .ns-site-legend .sw { width: 18px; height: 18px; display: inline-block; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }

  /* ============ LOT BOARD ============ */
  .ns-lots { background: var(--paper-50); }
  .ns-lots .head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 44px; }
  @media (max-width: 900px) { .ns-lots .head { grid-template-columns: 1fr; } }
  .ns-lots .head p { font-family: var(--font-sans); font-size: 16px; line-height: 1.7; color: var(--gray-700); max-width: 52ch; margin: 0; }

  .ns-block-label {
    display: flex; align-items: baseline; gap: 16px; margin: 0 0 18px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-500);
  }
  .ns-block-label .tag { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.01em; text-transform: none; }
  .ns-block-label.b1 .tag { color: var(--gold-700); }
  .ns-block-label.b2 .tag { color: var(--blk2); }
  .ns-block-label .line { flex: 1; height: 1px; background: var(--paper-300); }

  .ns-lot-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 52px; }
  @media (max-width: 900px) { .ns-lot-grid { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 560px) { .ns-lot-grid { grid-template-columns: repeat(3, 1fr); } }

  .ns-lot {
    position: relative; background: #fff; border: 1px solid var(--paper-300);
    border-radius: var(--radius-md); padding: 16px 16px 14px; min-height: 132px;
    display: flex; flex-direction: column; gap: 6px;
    border-top: 3px solid var(--blk1);
  }
  .ns-lot.b2 { border-top-color: var(--blk2); }
  .ns-lot .ln { font-family: var(--font-display); font-size: 30px; font-weight: 500; line-height: 1; color: var(--ink-800); letter-spacing: -0.01em; }
  .ns-lot .price { font-family: var(--font-mono); font-size: 13px; color: var(--gray-700); letter-spacing: 0.02em; }
  .ns-lot .sold {
    margin-top: auto; align-self: flex-start;
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--sold); background: #EDEAE6; padding: 5px 10px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; gap: 7px;
  }
  .ns-lot .sold .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sold); }
  .ns-lot.built { border-color: var(--gold-500); box-shadow: 0 0 0 1px var(--gold-500); }
  .ns-lot.built .sold { background: var(--gold-500); color: var(--ink-800); }
  .ns-lot.built .sold .dot { background: var(--ink-800); }
  .ns-lot .built-tag {
    font-family: var(--font-sans); font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--gold-700);
    text-decoration: none; border-bottom: 1px solid var(--gold-500); padding-bottom: 1px; align-self: flex-start;
  }
  @media (hover:hover) and (pointer:fine) { .ns-lot .built-tag:hover { color: var(--ink-800); } }
  .ns-lot .corner-built {
    position: absolute; top: 12px; right: 12px;
    font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold-700);
  }
  .ns-lot-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--gray-500); text-transform: uppercase; text-align: center; margin: 4px 0 0; }

  /* ============ HOMES BUILT ============ */
  .ns-homes { background: var(--ink-800); color: var(--paper-50); }
  .ns-homes .head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 64px; }
  @media (max-width: 900px) { .ns-homes .head { grid-template-columns: 1fr; } }
  .ns-homes .head .eyebrow-line { color: var(--gold-500); }
  .ns-homes .head .eyebrow-line::before { background: var(--gold-500); }
  .ns-homes .head .section-title { color: var(--paper-50); max-width: 16ch; }
  .ns-homes .head .section-title em { color: var(--gold-500); }
  .ns-homes .head p { font-family: var(--font-sans); font-size: 17px; line-height: 1.7; color: rgba(250,247,241,0.78); max-width: 52ch; margin: 0; }

  .ns-entry { padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--ink-600); }
  .ns-entry:first-of-type { padding-top: 0; border-top: 0; }
  .ns-entry-slug {
    display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(250,247,241,0.5);
  }
  .ns-entry-slug .ch { color: var(--gold-500); font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(20px, 2vw, 28px); text-transform: none; letter-spacing: -0.01em; line-height: 1; }
  .ns-entry-slug .rule { flex: 0 0 32px; height: 1px; background: var(--gold-500); }

  .ns-trip-head { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: end; margin-bottom: 32px; }
  @media (max-width: 900px) { .ns-trip-head { grid-template-columns: 1fr; } }
  .ns-entry h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 4vw, 56px); line-height: 1.0; letter-spacing: -0.02em; margin: 0 0 14px; }
  .ns-entry h3 em { font-style: italic; color: var(--gold-500); font-weight: 400; }
  .ns-entry .addr { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250,247,241,0.5); margin: 0 0 20px; }
  .ns-entry .body { font-family: var(--font-sans); font-size: 15px; line-height: 1.7; color: rgba(250,247,241,0.78); margin: 0; max-width: 54ch; }

  .ns-trip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 800px) { .ns-trip { grid-template-columns: 1fr; } }
  .ns-unit { display: flex; flex-direction: column; gap: 14px; }
  .ns-plate { position: relative; overflow: hidden; border-radius: var(--radius-image); background: var(--ink-700); }
  .ns-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
  @media (hover:hover) and (pointer:fine) { .ns-plate:hover img { transform: scale(1.03); } }
  .ns-plate .corner { position: absolute; top: 14px; right: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; background: var(--ink-800); color: var(--paper-50); padding: 6px 12px; border-radius: var(--radius-pill); }
  .ns-unit .lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-500); }
  .ns-unit .name { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.05; letter-spacing: -0.01em; color: var(--paper-50); margin: 0; }
  .ns-unit .name em { font-style: italic; color: var(--gold-500); font-weight: 400; }
  .ns-unit .micro { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250,247,241,0.5); display: flex; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--ink-600); padding-top: 12px; }
  .ns-trip .ns-unit .ns-plate { aspect-ratio: 4 / 5; cursor: zoom-in; }

  /* feature entry (Houston / Bicentennial) */
  .ns-feat { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
  .ns-feat.flip { grid-template-columns: 1fr 1.2fr; }
  @media (max-width: 900px) { .ns-feat, .ns-feat.flip { grid-template-columns: 1fr; } .ns-feat.flip .ns-feat-text { order: 2; } .ns-feat.flip .ns-feat-img { order: 1; } }
  .ns-feat-img { position: relative; overflow: hidden; border-radius: var(--radius-image); background: var(--ink-700); aspect-ratio: 4 / 3; cursor: zoom-in; }
  .ns-feat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
  @media (hover:hover) and (pointer:fine) { .ns-feat-img:hover img { transform: scale(1.03); } }
  .ns-feat-img .corner { position: absolute; top: 16px; right: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; background: var(--ink-800); color: var(--paper-50); padding: 6px 12px; border-radius: var(--radius-pill); }
  .ns-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ink-600); border: 1px solid var(--ink-600); margin: 26px 0 24px; border-radius: var(--radius-md); overflow: hidden; }
  .ns-specs > div { background: var(--ink-800); padding: 16px 18px; }
  .ns-specs .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: rgba(250,247,241,0.5); text-transform: uppercase; margin-bottom: 6px; }
  .ns-specs .v { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--paper-50); letter-spacing: -0.01em; }
  .ns-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
  .ns-mini .ns-feat-img { aspect-ratio: 1 / 1; border-radius: var(--radius-md); }
  .ns-feat .more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--paper-50); text-decoration: none; border-bottom: 1px solid var(--gold-500); padding-bottom: 6px; align-self: start; }
  @media (hover:hover) and (pointer:fine) { .ns-feat .more:hover { color: var(--gold-300); } }

  /* ============ INTERIORS ============ */
  .ns-int { background: var(--paper-50); }
  .ns-int .head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 48px; }
  @media (max-width: 900px) { .ns-int .head { grid-template-columns: 1fr; } }
  .ns-int .head p { font-family: var(--font-sans); font-size: 16px; line-height: 1.7; color: var(--gray-700); max-width: 52ch; margin: 0; }
  .ns-int-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 180px; gap: 8px; }
  @media (max-width: 900px) { .ns-int-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } }
  .ns-int-tile { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--ink-700); cursor: zoom-in; }
  .ns-int-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
  @media (hover:hover) and (pointer:fine) { .ns-int-tile:hover img { transform: scale(1.04); } }
  .ns-int-tile::after { content: attr(data-cap); position: absolute; left: 14px; bottom: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250,247,241,0.9); background: rgba(0,0,0,0.55); padding: 6px 10px; border-radius: var(--radius-pill); opacity: 0; transition: opacity var(--dur-base); }
  @media (hover:hover) and (pointer:fine) { .ns-int-tile:hover::after { opacity: 1; } }
  .ns-int-tile.t-hero { grid-column: span 4; grid-row: span 2; }
  .ns-int-tile.t-tall { grid-column: span 2; grid-row: span 2; }
  .ns-int-tile.t-third { grid-column: span 2; grid-row: span 1; }
  .ns-int-tile.t-half { grid-column: span 3; grid-row: span 2; }
  .ns-int-tile.t-band { grid-column: span 6; grid-row: span 1; }
  @media (max-width: 900px) {
    .ns-int-tile.t-hero, .ns-int-tile.t-tall, .ns-int-tile.t-third, .ns-int-tile.t-band, .ns-int-tile.t-half { grid-column: span 2; grid-row: span 1; }
    .ns-int-tile.t-hero { grid-row: span 2; }
  }
  .ns-int-foot { margin-top: 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-500); padding-top: 22px; border-top: 1px solid var(--paper-300); }
  .ns-int-foot strong { color: var(--ink-800); font-weight: 500; }

  /* ============ LOCATION ============ */
  .ns-loc { background: var(--ink-800); color: var(--paper-50); }
  .ns-loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); align-items: start; }
  @media (max-width: 900px) { .ns-loc-grid { grid-template-columns: 1fr; } }
  .ns-loc .eyebrow-line { color: var(--gold-500); }
  .ns-loc .eyebrow-line::before { background: var(--gold-500); }
  .ns-loc h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 24px; color: var(--paper-50); max-width: 15ch; }
  .ns-loc h2 em { font-style: italic; color: var(--gold-500); font-weight: 400; }
  .ns-loc p { font-family: var(--font-sans); font-size: 16px; line-height: 1.7; color: rgba(250,247,241,0.78); max-width: 50ch; margin: 0 0 14px; }
  .ns-loc .addr { margin-top: 32px; padding: 24px; border: 1px solid rgba(250,247,241,0.18); border-radius: var(--radius-card); display: grid; gap: 6px; }
  .ns-loc .addr .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-500); }
  .ns-loc .addr .v { font-family: var(--font-display); font-size: 24px; font-weight: 500; color: var(--paper-50); letter-spacing: -0.01em; }
  .ns-loc .addr .city { font-family: var(--font-sans); font-size: 14px; color: rgba(250,247,241,0.7); }
  .ns-loc-map { aspect-ratio: 5 / 4; background: var(--ink-700); border: 1px solid rgba(250,247,241,0.14); border-radius: var(--radius-card); position: relative; overflow: hidden; }
  .ns-loc-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ns-loc-map .cap { position: absolute; left: 16px; bottom: 16px; z-index: 3; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-50); background: rgba(26,26,26,0.78); padding: 8px 12px; border-left: 2px solid var(--gold-500); }
  .ns-near { margin-top: 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid rgba(250,247,241,0.14); }
  .ns-near .row { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(250,247,241,0.08); font-family: var(--font-sans); font-size: 14px; color: rgba(250,247,241,0.85); }
  .ns-near .row:nth-child(odd) { border-right: 1px solid rgba(250,247,241,0.08); padding-right: 24px; }
  .ns-near .row:nth-child(even) { padding-left: 24px; }
  .ns-near .row .d { font-family: var(--font-mono); font-size: 12px; color: var(--gold-500); letter-spacing: 0.06em; }
  @media (max-width: 600px) { .ns-near { grid-template-columns: 1fr; } .ns-near .row:nth-child(odd) { border-right: 0; padding-right: 0; } .ns-near .row:nth-child(even) { padding-left: 0; } }

  /* ============ BUILD / CONTACT FORM ============ */
  .ns-form { background: var(--paper-100); }
  .ns-form-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(48px, 6vw, 96px); align-items: start; }
  @media (max-width: 900px) { .ns-form-grid { grid-template-columns: 1fr; } }
  .ns-form .copy h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.015em; margin: 16px 0 24px; max-width: 17ch; }
  .ns-form .copy h2 em { font-style: italic; color: var(--gold-700); font-weight: 400; }
  .ns-form .copy p { font-family: var(--font-sans); font-size: 16px; line-height: 1.7; color: var(--gray-700); max-width: 50ch; margin: 0 0 18px; }
  .ns-form .copy ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
  .ns-form .copy ul li { font-family: var(--font-sans); font-size: 14px; color: var(--ink-800); padding-left: 26px; position: relative; line-height: 1.55; }
  .ns-form .copy ul li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 14px; height: 1px; background: var(--gold-500); }
  .ns-form form { background: #fff; border: 1px solid var(--paper-300); border-radius: var(--radius-card); padding: clamp(28px, 3vw, 40px); display: grid; gap: 14px; }
  .ns-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 600px) { .ns-form .form-row { grid-template-columns: 1fr; } }
  .ns-form label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--gray-700); text-transform: uppercase; display: block; margin-bottom: 8px; }
  .ns-form input, .ns-form select, .ns-form textarea { font-family: var(--font-sans); font-size: 16px; padding: 14px 18px; border: 1px solid var(--paper-300); background: #fff; color: var(--ink-800); width: 100%; box-sizing: border-box; border-radius: var(--radius-input); min-height: var(--tap-min); }
  .ns-form textarea { min-height: 100px; resize: vertical; }
  .ns-form input:focus, .ns-form select:focus, .ns-form textarea:focus { outline: none; border-color: var(--ink-800); box-shadow: 0 0 0 3px rgba(197,165,90,0.25); }
  .ns-form button { font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; padding: 16px 28px; min-height: var(--tap-min); background: var(--ink-800); color: var(--paper-50); border: 0; cursor: pointer; border-radius: var(--radius-pill); transition: background var(--dur-fast); margin-top: 8px; }
  @media (hover:hover) and (pointer:fine) { .ns-form button:hover { background: var(--gold-600); } }
  .ns-form .hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--gray-500); margin-top: 4px; }

  /* ============ FAQ ============ */
  .ns-faq { background: var(--paper-50); }
  .ns-faq .head { margin-bottom: 56px; }
  .ns-faq-list { border-top: 1px solid var(--paper-300); }
  .ns-faq-item { border-bottom: 1px solid var(--paper-300); }
  .ns-faq-q { width: 100%; background: transparent; border: 0; cursor: pointer; text-align: left; padding: 28px 24px 28px 0; display: grid; grid-template-columns: 60px 1fr 24px; align-items: center; gap: 24px; font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; color: var(--ink-800); transition: color var(--dur-fast); }
  @media (hover:hover) and (pointer:fine) { .ns-faq-q:hover { color: var(--gold-700); } }
  .ns-faq-q .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--gold-700); }
  .ns-faq-q .ico { width: 24px; height: 24px; position: relative; }
  .ns-faq-q .ico::before, .ns-faq-q .ico::after { content: ''; position: absolute; background: var(--ink-800); }
  .ns-faq-q .ico::before { left: 0; right: 0; top: 11px; height: 2px; }
  .ns-faq-q .ico::after { top: 0; bottom: 0; left: 11px; width: 2px; transition: transform var(--dur-base); }
  .ns-faq-item.is-open .ns-faq-q .ico::after { transform: rotate(90deg); }
  .ns-faq-a { display: none; padding: 0 24px 36px 84px; font-family: var(--font-sans); font-size: 16px; line-height: 1.7; color: var(--gray-700); max-width: 80ch; }
  .ns-faq-item.is-open .ns-faq-a { display: block; }
  @media (max-width: 600px) { .ns-faq-q { grid-template-columns: 40px 1fr 20px; gap: 12px; } .ns-faq-a { padding-left: 52px; } }

  /* ---------- LANG TOGGLE ---------- */
  .nav .lang { display: inline-flex; align-items: stretch; border: 1px solid var(--paper-300); border-radius: var(--radius-pill); overflow: hidden; background: #fff; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin-right: 14px; }
  .nav .lang a { padding: 9px 14px; min-height: 38px; display: inline-flex; align-items: center; color: var(--gray-700); text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); }
  @media (hover:hover) and (pointer:fine) { .nav .lang a:hover { color: var(--ink-800); } }
  .nav .lang a.is-on { background: var(--ink-800); color: var(--paper-50); }
  .nav .lang .sep { width: 1px; background: var(--paper-300); }

  /* ---------- LIGHTBOX ---------- */
  #nsLightbox { position: fixed; inset: 0; z-index: 200; background: rgba(14,14,14,0.96); display: none; flex-direction: column; cursor: zoom-out; }
  #nsLightbox.is-open { display: flex; }
  #nsLightbox .stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 72px 48px 0; position: relative; min-height: 0; }
  #nsLightbox img { max-width: 100%; max-height: 80vh; object-fit: contain; display: block; box-shadow: 0 24px 80px rgba(0,0,0,0.6); }
  #nsLightbox .foot { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 22px 48px 36px; color: rgba(250,247,241,0.6); }
  #nsLightbox .cap { color: rgba(250,247,241,0.92); font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.03em; }
  #nsLightbox .ct { color: var(--gold-500); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
  #nsLightbox button { background: rgba(26,26,26,0.55); border: 1px solid rgba(250,247,241,0.25); color: #FAF7F1; cursor: pointer; padding: 0; border-radius: 999px; display: grid; place-items: center; transition: background 120ms, border-color 120ms, color 120ms; }
  @media (hover:hover) and (pointer:fine) { #nsLightbox button:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-800); } }
  #nsLightbox .x { position: fixed; top: 24px; right: 32px; width: 44px; height: 44px; font-size: 18px; z-index: 2; }
  #nsLightbox .prev, #nsLightbox .next { position: fixed; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 24px; z-index: 2; }
  #nsLightbox .prev { left: 32px; }
  #nsLightbox .next { right: 32px; }
  @media (max-width: 700px) { #nsLightbox .prev, #nsLightbox .next { width: 44px; height: 44px; font-size: 20px; } }

/* ===== EDITS 2026-05-31: title colors + image fit ===== */.ns-homes .ns-feat-text h2,.ns-homes .ns-feat-text h3,.cta-band h2{color:var(--paper-50)!important}.ns-homes .ns-feat-text h2 em,.ns-homes .ns-feat-text h3 em,.cta-band h2 em{color:var(--gold-500)!important}.ns-feat-img{background:var(--ink-900)!important;aspect-ratio:4/3}.ns-feat-img img{object-fit:contain!important}
/* refine: thumbnails stay cover; main home photo taller + full image */.ns-mini .ns-feat-img img{object-fit:cover!important}.ns-feat>.ns-feat-img{aspect-ratio:1/1!important}
/* fill cards like reference: cover, tall portrait, no letterbox */.ns-feat-img{background:var(--ink-700)!important}.ns-feat-img img{object-fit:cover!important}.ns-homes .ns-feat>.ns-feat-img{aspect-ratio:3/4!important}.ns-mini .ns-feat-img img{object-fit:cover!important}
/* fix location map crop: show full subdivision layout */.ns-loc-map{aspect-ratio:16/9!important;background:var(--ink-900)!important}.ns-loc-map img{object-fit:contain!important}
.site-footer {
  background: var(--ink-900, #1a1a1a);
  color: var(--paper-100, #f6f1e7);
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 64px) 28px;
}
.site-footer .sf-inner {
  max-width: 1320px;
  margin: 0 auto;
}
.site-footer .sf-top {
  display: grid;
  grid-template-columns: 1.1fr 3.4fr auto;
  gap: clamp(36px, 4.5vw, 64px);
  align-items: flex-start;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(250,247,241,0.12);
}
.site-footer .sf-brand img {
  height: 56px;
  width: auto;
  margin-bottom: 18px;
  filter: brightness(1.05);
}
.site-footer .sf-brand p.sf-blurb {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(250,247,241,0.65);
  margin: 0 0 16px;
  max-width: 280px;
}
.site-footer .sf-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--gold-500);
  display: inline-block;
}
.site-footer .sf-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}
@media (max-width: 1200px) {
  .site-footer .sf-cols { grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
}
.site-footer .sf-col h4 {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin: 0 0 16px;
}
.site-footer .sf-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer .sf-col li { margin: 0 0 9px; }
.site-footer .sf-col a {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: rgba(250,247,241,0.78);
  text-decoration: none;
  transition: color .15s ease;
  line-height: 1.4;
}
@media (hover:hover) and (pointer:fine) { .site-footer .sf-col a:hover { color: var(--gold-300); } }
.site-footer .sf-muted {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: rgba(250,247,241,0.45);
  text-transform: uppercase;
  display: inline-block;
}
.site-footer .sf-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.site-footer .sf-social h4 {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin: 0 0 6px;
}
.site-footer .sf-social .sf-icons {
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex-wrap: wrap;
}
.site-footer .sf-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(250,247,241,0.15);
  border-radius: 50%;
  opacity: 0.8;
  transition: opacity .15s ease, border-color .15s ease;
}
@media (hover:hover) and (pointer:fine) { .site-footer .sf-social a:hover {
  opacity: 1;
  border-color: var(--gold-500);
} }
.site-footer .sf-social a img {
  width: 16px;
  height: 16px;
  filter: invert(1) brightness(1.4);
}
.site-footer .sf-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 22px;
}
.site-footer .sf-copy {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(250,247,241,0.42);
  text-transform: uppercase;
}
.site-footer .sf-legal {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.site-footer .sf-legal a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(250,247,241,0.55);
  text-decoration: none;
  text-transform: uppercase;
  transition: color .15s ease;
}
@media (hover:hover) and (pointer:fine) { .site-footer .sf-legal a:hover { color: var(--gold-300); } }

.site-footer .sf-credit {
  width: 100%;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(250,247,241,0.08);
  display: flex;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(250,247,241,0.38);
  text-transform: uppercase;
}
.site-footer .sf-credit a {
  color: var(--gold-500);
  text-decoration: none;
  margin-left: 6px;
  transition: color .15s ease;
}
@media (hover:hover) and (pointer:fine) { .site-footer .sf-credit a:hover { color: var(--gold-300); text-decoration: underline; } }

@media (max-width: 1024px) {
  .site-footer .sf-top {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .site-footer .sf-social { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .site-footer .sf-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 20px;
  }
  .site-footer .sf-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- LEGACY FOOTER (v1) — kept for pages not yet migrated ---------- */
.site-footer .top:not(.sf-top) {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 64px;
  align-items: flex-start;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(250,247,241,0.12);
  max-width: 1280px;
  margin: 0 auto;
}
.site-footer .mono-mark img { height: 64px; width: auto; filter: invert(1) brightness(1.1); }
.site-footer .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.site-footer h4:not(.sf-col h4):not(.sf-social h4) {
  font-family: var(--font-sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-500); margin: 0 0 18px;
}
.site-footer .cols a, .site-footer .cols span {
  display: block; font-family: var(--font-sans); font-size: 14px;
  color: var(--paper-50); text-decoration: none; padding: 5px 0; line-height: 1.4;
}
@media (hover:hover) and (pointer:fine) { .site-footer .cols a:hover { color: var(--gold-300); } }
.site-footer .cols span.muted { color: rgba(250,247,241,0.5); font-size: 12px; }
.site-footer .bottom:not(.sf-bottom) {
  max-width: 1280px; margin: 0 auto; padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
}
.site-footer .tag { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--gold-500); }
.site-footer .legal {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  color: rgba(250,247,241,0.4); text-transform: uppercase; text-align: right;
}
.site-footer .legal a { color: rgba(250,247,241,0.5); text-decoration: none; margin-left: 14px; }
@media (hover:hover) and (pointer:fine) { .site-footer .legal a:hover { color: var(--gold-300); } }
@media (max-width: 900px) {
  .site-footer .top:not(.sf-top) { grid-template-columns: 1fr; gap: 40px; }
  .site-footer .bottom:not(.sf-bottom) { flex-direction: column; align-items: flex-start; }
  .site-footer .legal { text-align: left; }
  .site-footer .legal a { margin: 0 14px 0 0; }
}

/* WhatsApp floating button */

/* lot for-sale (green) */.ns-lot.avail{border-color:#3f9142!important;background:rgba(63,145,66,0.10)!important}.ns-lot .forsale{display:inline-flex;align-items:center;gap:6px;color:#4caf50;font-weight:600;font-family:var(--font-sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.ns-lot .forsale .dot{width:7px;height:7px;border-radius:50%;background:#4caf50}