/* ===== sisu-tokens.css ===== */
/* =========================================================
   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-shell.css ===== */
/* =========================================================
   Sisu — Page Shell
   Shared nav + footer + page-shell styles for the new vanilla
   HTML pages (Contact, Privacy, Terms, Accessibility, Commercial,
   etc.). Pair with sisu-tokens.css.
   ========================================================= */

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

/* ---------- SKIP LINK ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink-800); color: var(--paper-50);
  padding: 12px 18px;
  font-family: var(--font-sans); font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.skip:focus { left: 16px; top: 16px; }

/* ---------- 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 { display: flex; align-items: center; text-decoration: none; }
.nav .brand img { height: 44px; display: block; }
.nav .links { display: flex; gap: 28px; justify-self: center; }
.nav .links a {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-800); text-decoration: none;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
@media (hover:hover) and (pointer:fine) { .nav .links a:hover { color: var(--gold-700); } }
.nav .links a.is-on { color: var(--gold-700); }
.nav .links a.is-on::after {
  content: ''; width: 5px; height: 5px; background: var(--gold-500); border-radius: 50%;
}
.nav .right { display: flex; gap: 14px; align-items: center; }
.nav .cta {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  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;
  transition: background var(--dur-fast) var(--ease-standard);
}
@media (hover:hover) and (pointer:fine) { .nav .cta:hover { background: var(--gold-500); color: var(--ink-800); } }

/* lang toggle pill */
.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;
}
.lang a {
  padding: 9px 14px; min-height: 38px;
  display: inline-flex; align-items: center;
  color: var(--gray-700); text-decoration: none;
}
@media (hover:hover) and (pointer:fine) { .lang a:hover { color: var(--ink-800); } }
.lang a.is-on { background: var(--ink-800); color: var(--paper-50); }
.lang .sep { width: 1px; background: var(--paper-300); }

@media (max-width: 1100px) { .nav .links { display: none; } }

/* ---------- PAGE SHELL ---------- */
main.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 112px) clamp(20px, 5vw, 64px) clamp(64px, 8vw, 120px);
}

/* page header (eyebrow + h1 + lead) */
.page-head { margin-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--paper-300); padding-bottom: clamp(40px, 5vw, 64px); }
.page-head .crumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 28px;
  display: inline-flex; align-items: center; gap: 10px;
}
.page-head .crumb a { color: var(--gray-500); text-decoration: none; }
@media (hover:hover) and (pointer:fine) { .page-head .crumb a:hover { color: var(--ink-800); } }
.page-head .crumb .sep { color: var(--paper-300); }
.page-head .eyebrow { margin-bottom: 24px; }
.page-head h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin-bottom: 24px;
  text-wrap: pretty;
  letter-spacing: -0.01em;
}
.page-head h1 em { font-style: italic; }
.page-head .lead {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--gray-700);
  max-width: 68ch;
}

/* page sections */
.page-section { margin-bottom: clamp(48px, 6vw, 80px); }
.page-section:last-child { margin-bottom: 0; }
.page-section h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 24px;
  text-wrap: pretty;
}
.page-section h2 em { font-style: italic; }
.page-section h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 32px 0 12px;
  color: var(--ink-800);
}
.page-section p {
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 16px;
  max-width: 70ch;
}
.page-section p:last-child { margin-bottom: 0; }
.page-section ul, .page-section ol {
  margin: 0 0 20px;
  padding-left: 24px;
  max-width: 70ch;
}
.page-section li {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 8px;
}
.page-section a { color: var(--ink-800); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
@media (hover:hover) and (pointer:fine) { .page-section a:hover { color: var(--gold-700); } }

/* section heading with number */
.section-head {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-800);
  margin-bottom: 32px;
}
.section-head .num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gold-700);
}
.section-head h2 { margin: 0; }

/* boxed list (used for "what to expect", "what we don't track" etc) */
.box-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--paper-300);
  border: 1px solid var(--paper-300);
}
.box-list li {
  background: var(--bg-raised);
  padding: 20px 22px;
  margin: 0;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 22px;
  align-items: baseline;
}
.box-list li .n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold-700);
}
.box-list li .body strong {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink-800);
  margin-bottom: 4px;
}
.box-list li .body { font-size: 0.9375rem; color: var(--gray-700); line-height: 1.55; }

/* dl meta (used for office hours, address etc.) */
dl.meta {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px 28px;
  margin: 0;
}
dl.meta dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  padding-top: 4px;
}
dl.meta dd {
  margin: 0;
  font-size: 1rem;
  color: var(--ink-800);
  line-height: 1.5;
}
dl.meta dd a { color: var(--ink-800); text-decoration: none; border-bottom: 1px solid var(--gold-500); }
@media (hover:hover) and (pointer:fine) { dl.meta dd a:hover { color: var(--gold-700); } }
@media (max-width: 640px) {
  dl.meta { grid-template-columns: 1fr; gap: 4px 0; }
  dl.meta dd { margin-bottom: 16px; }
}

/* CTA band */
.cta-band {
  margin-top: clamp(48px, 6vw, 80px);
  background: var(--ink-800);
  color: var(--paper-50);
  padding: clamp(40px, 5vw, 64px);
  border-radius: var(--radius-md);
  text-align: center;
}
.cta-band .eyebrow {
  color: var(--gold-500);
  margin-bottom: 18px;
  font-size: 11px;
  letter-spacing: 0.26em;
}
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin: 0 0 16px;
  color: var(--paper-50);
}
.cta-band h2 em { font-style: italic; color: var(--gold-500); }
.cta-band p {
  color: var(--gray-200);
  font-size: 1.0625rem;
  max-width: 56ch;
  margin: 0 auto 28px;
}
.cta-band .actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.cta-band .actions a {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 14px 26px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: all var(--dur-fast) var(--ease-standard);
}
.cta-band .actions .gold { background: var(--gold-500); color: var(--ink-800); }
@media (hover:hover) and (pointer:fine) { .cta-band .actions .gold:hover { background: var(--gold-300); } }
.cta-band .actions .ghost { background: transparent; color: var(--paper-50); border: 1px solid rgba(250,247,241,0.4); }
@media (hover:hover) and (pointer:fine) { .cta-band .actions .ghost:hover { background: var(--paper-50); color: var(--ink-800); border-color: var(--paper-50); } }

/* ============================================================
   ROUNDED CARD SECTION PATTERN (v3 — DR Horton / Lennar style)
   ============================================================
   Wrap any full-bleed <section> or <header> in
   <div class="card-section">...</div> and it becomes a floating
   rounded card on the cream paper background.

   - Outer padding gives the card breathing room from page edges
   - Inner child gets border-radius + overflow:hidden so images and
     videos clip cleanly to the rounded corners
   - Dark/image cards get a soft shadow to lift off the page
   - Light cards just round; no shadow (would look heavy on cream)
   - Adjacent .card-section blocks collapse padding to avoid double gap

   This was added in Phase 5L. Pages that previously had full-bleed
   sections need ONLY to be wrapped — no other markup changes.
   ============================================================ */
.card-section {
  background: var(--paper-50);
  padding: clamp(10px, 1.2vw, 18px) clamp(16px, 3vw, 40px);
}
.card-section + .card-section { padding-top: 0; }
.card-section:first-child { padding-top: clamp(14px, 1.8vw, 24px); }
.card-section:last-child  { padding-bottom: clamp(24px, 3vw, 40px); }

.card-section > * {
  border-radius: clamp(20px, 2vw, 32px);
  overflow: hidden;
  display: block;
  position: relative;
}
/* Dark / image-heavy sections get a soft elevation */
.card-section > .hero,
.card-section > .ph-hero,
.card-section > .featured,
.card-section > .cta-band,
.card-section > .ph-section[data-tone="dark"],
.card-section > [class*="dark"] {
  box-shadow: 0 18px 48px rgba(14,14,14,0.18), 0 6px 14px rgba(14,14,14,0.08);
}
/* Trust strip should look like a thin pill card, not full bleed */
.card-section > .trust {
  border: 1px solid var(--paper-300);
}

/* On very narrow viewports, drop side padding so cards feel
   tighter and don't waste horizontal space */
@media (max-width: 600px) {
  .card-section {
    padding-left: clamp(8px, 2vw, 14px);
    padding-right: clamp(8px, 2vw, 14px);
  }
  .card-section > * { border-radius: 16px; }
}

/* ============================================================
   DUAL CARD PATTERN (v3 — image card + text card side-by-side)
   ============================================================
   For image + text sections (heroes, featured project blocks,
   showcase splits). Two rounded cards with a 20-40px gap.

   USAGE in HTML:
     <section class="dual-card">
       <div class="dc-photo"><img decoding="async" src="..." alt="..."></div>
       <div class="dc-text">[copy]</div>
     </section>

   - Image card aspect-ratio matches your square photos (1:1) so
     `object-fit: cover` fills perfectly with NO cropping and NO bands
   - minmax(0, ...) on tracks prevents content from forcing overflow
   - Cards rounded, soft shadow, breath between them
   - Stack to one column on mobile
   - Add data-tone="light" or data-tone="dark" on .dc-text to swap colors
   ============================================================ */
section.dual-card,
.dual-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  align-items: stretch;
  background: transparent;
}
@media (max-width: 900px) {
  section.dual-card,
  .dual-card-grid { grid-template-columns: minmax(0, 1fr); }
}
.dc-photo {
  position: relative;
  background: var(--ink-700);
  border-radius: clamp(18px, 1.6vw, 26px);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: 0 10px 28px rgba(14,14,14,0.12);
  min-width: 0;
  width: 100%;
}
.dc-photo img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}
.dc-photo .dc-tag {
  position: absolute; bottom: 20px; left: 22px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; color: rgba(250,247,241,0.92);
  background: rgba(0,0,0,0.55); padding: 8px 12px;
  text-transform: uppercase;
}
.dc-text {
  background: var(--ink-800); color: var(--paper-50);
  border-radius: clamp(18px, 1.6vw, 26px);
  padding: clamp(32px, 3.5vw, 56px) clamp(28px, 3vw, 48px);
  display: flex; flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 2vw, 32px);
  box-shadow: 0 10px 28px rgba(14,14,14,0.18);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.dc-text[data-tone="light"] {
  background: var(--paper-100);
  color: var(--ink-800);
  box-shadow: 0 10px 28px rgba(14,14,14,0.08);
}
.dc-text > * { max-width: 100%; overflow-wrap: break-word; }
.dc-text h2,
.dc-text .h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(32px, 3.6vw, 60px); line-height: 1.05;
  letter-spacing: -0.02em; margin: 0;
}
.dc-text h2 em { font-style: italic; color: var(--gold-500); font-weight: 400; }
.dc-text[data-tone="light"] h2 em { color: var(--gold-700); }
.dc-text p.dc-lede {
  font-family: var(--font-sans); font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65; margin: 0; color: rgba(250,247,241,0.82);
  max-width: 54ch;
}
.dc-text[data-tone="light"] p.dc-lede { color: var(--gray-700); }
.dc-text .dc-eyebrow {
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.26em;
  color: var(--gold-500);
  display: flex; align-items: center; gap: 12px;
}
.dc-text .dc-eyebrow::before {
  content: ''; width: 28px; height: 1px; background: var(--gold-500);
}
.dc-text .dc-cta-row {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
/* When .dual-card sits directly inside a .card-section wrapper,
   the wrapper's rounding/shadow shouldn't apply — the inner cards
   are the visible surfaces. */
.card-section > .dual-card {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

/* ---------- FOOTER (v2 — DR Horton / Lennar style, distributed) ---------- */
.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 */
.wa-float {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  padding: 14px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: transform var(--dur-fast) var(--ease-standard);
}
@media (hover:hover) and (pointer:fine) { .wa-float:hover { transform: translateY(-2px); } }
.wa-float img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
@media (max-width: 480px) {
  .wa-float .wa-label { display: none; }
  .wa-float { padding: 14px; }
}


/* ===== sisu-consent.css ===== */
/* =========================================================
   Cookie consent banner styles
   Injected by sisu-runtime.js on first visit.
   ========================================================= */
#sisu-consent-banner {
  position: fixed;
  left: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 100;
  background: var(--ink-800, #1A1A1A);
  color: var(--paper-50, #FAF7F1);
  border-radius: clamp(14px, 1.4vw, 20px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.32), 0 6px 16px rgba(0,0,0,0.16);
  font-family: var(--font-sans, system-ui, sans-serif);
  max-width: 720px;
  margin: 0 auto;
  animation: sc-rise 320ms cubic-bezier(.16,1,.3,1);
}
@keyframes sc-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
#sisu-consent-banner .sc-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 18px 22px;
  align-items: center;
}
@media (max-width: 640px) {
  #sisu-consent-banner .sc-inner {
    grid-template-columns: 1fr;
  }
}
#sisu-consent-banner .sc-copy strong {
  font-family: var(--font-display, Georgia, serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 4px;
  color: var(--gold-500, #C5A55A);
}
#sisu-consent-banner .sc-copy p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  color: rgba(250,247,241,0.78);
}
#sisu-consent-banner .sc-copy a {
  color: var(--gold-300, #E4CE93);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#sisu-consent-banner .sc-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
#sisu-consent-banner .sc-btn-primary,
#sisu-consent-banner .sc-btn-secondary {
  appearance: none;
  border: 1px solid transparent;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 18px;
  min-height: 40px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms, color 160ms, transform 120ms;
}
#sisu-consent-banner .sc-btn-primary {
  background: var(--gold-500, #C5A55A);
  color: var(--ink-800, #1A1A1A);
}
@media (hover:hover) and (pointer:fine) { #sisu-consent-banner .sc-btn-primary:hover {
  background: var(--gold-300, #E4CE93);
} }
#sisu-consent-banner .sc-btn-secondary {
  background: transparent;
  color: var(--paper-50, #FAF7F1);
  border-color: rgba(250,247,241,0.35);
}
@media (hover:hover) and (pointer:fine) { #sisu-consent-banner .sc-btn-secondary:hover {
  background: rgba(250,247,241,0.08);
  border-color: rgba(250,247,241,0.6);
} }
#sisu-consent-banner button:active {
  transform: scale(0.98);
}



/* ===== page-specific ===== */

  /* head bar */
  .fp-head {
    display: grid; grid-template-columns: 1.1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: end;
    margin-bottom: clamp(40px, 5vw, 64px);
    padding-bottom: clamp(32px, 4vw, 56px);
    border-bottom: 1px solid var(--paper-300);
  }
  @media (max-width: 880px) { .fp-head { grid-template-columns: 1fr; gap: 24px; } }
  .fp-head h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: 1.0; margin: 0 0 16px; letter-spacing: -0.01em; }
  .fp-head h1 em { font-style: italic; }
  .fp-head .lead { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--gray-700); max-width: 50ch; line-height: 1.55; margin: 0; }
  .fp-head .stats { display: grid; gap: 4px; }
  .fp-head .stats .row { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--paper-300); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-500); }
  .fp-head .stats .row:last-child { border-bottom: 1px solid var(--paper-300); }
  .fp-head .stats .row strong { font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; color: var(--ink-800); letter-spacing: 0; text-transform: none; font-weight: 500; }

  /* filter bar */
  .filterbar {
    position: sticky; top: 80px; z-index: 10;
    background: var(--paper-50);
    padding: 16px 0;
    margin-bottom: 32px;
    border-top: 1px solid var(--ink-800);
    border-bottom: 1px solid var(--paper-300);
    display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
  }
  .filterbar .group { display: flex; align-items: center; gap: 8px; }
  .filterbar .label {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--gray-500);
  }
  .filterbar .pills { display: flex; gap: 4px; }
  .filterbar .pill {
    appearance: none;
    background: transparent;
    border: 1px solid var(--paper-300);
    color: var(--ink-800);
    font-family: var(--font-sans);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.04em;
    padding: 8px 14px; min-height: 36px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-standard);
  }
  @media (hover:hover) and (pointer:fine) { .filterbar .pill:hover { border-color: var(--ink-800); } }
  .filterbar .pill.is-on { background: var(--ink-800); color: var(--paper-50); border-color: var(--ink-800); }
  .filterbar .results-count {
    margin-left: auto;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold-700);
  }

  /* plan group */
  .group-title {
    display: grid; grid-template-columns: 60px 1fr auto; gap: 22px;
    align-items: baseline;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ink-800);
    margin: 56px 0 28px;
  }
  .group-title:first-of-type { margin-top: 0; }
  .group-title .num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--gold-700); }
  .group-title h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; margin: 0; color: var(--ink-800); }
  .group-title h2 em { font-style: italic; }
  .group-title .note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-500); }

  /* plan grid */
  .plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
  @media (max-width: 880px) { .plan-grid { grid-template-columns: 1fr; } }
  .plan-card {
    background: var(--bg-raised);
    border: 1px solid var(--paper-300);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    transition: box-shadow var(--dur-base) var(--ease-standard);
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 18px rgba(14,14,14,0.06);
  }
  @media (hover:hover) and (pointer:fine) { .plan-card:hover { box-shadow: 0 14px 36px rgba(14,14,14,0.14); transform: translateY(-2px); } }
  .plan-card { transition: box-shadow var(--dur-base), transform var(--dur-base); }
  .plan-card.is-hidden { display: none; }

  /* v3: image at 4:3 aspect ratio matching the actual concept renders
     (2400x1792 source files). Cover fits perfectly with no cropping. */
  .plan-card .img {
    position: relative;
    background: var(--paper-100);
    background-size: cover; background-position: center;
    overflow: hidden;
    aspect-ratio: 4 / 3;
  }
  /* Pecan Heights plan renders are 2048x2048 (square). Use contain so the entire
     facade is visible with breathing room, no edge clipping. */
  .plan-card[data-type="townhome"] .img {
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--paper-100);
  }
  /* hide the bottom data-tag badge on townhome cards since it overlaps the rendered ground */
  .plan-card[data-type="townhome"] .img::after { display: none; }
  .plan-card .img::after {
    content: attr(data-tag);
    position: absolute; bottom: 12px; left: 14px;
    background: var(--ink-800); color: var(--gold-500);
    padding: 4px 9px;
    font-family: var(--font-mono); font-size: 9px;
    letter-spacing: 0.18em; text-transform: uppercase;
  }
  .plan-card.no-img .img {
    background: linear-gradient(135deg, var(--paper-100) 0%, var(--paper-200) 100%);
    background-image:
      linear-gradient(135deg, var(--paper-100) 0%, var(--paper-200) 100%),
      repeating-linear-gradient(45deg, transparent 0 18px, rgba(26,26,26,0.04) 18px 19px);
  }

  /* schematic mini-floorplan */
  .plan-card .schematic {
    position: absolute; inset: 18px;
    border: 1px solid var(--ink-800);
    display: grid;
    pointer-events: none;
  }
  .plan-card .schematic .room {
    border: 1px solid rgba(26,26,26,0.4);
    font-family: var(--font-mono); font-size: 9px;
    color: var(--gray-700);
    padding: 5px 7px;
    letter-spacing: 0.06em;
    background: rgba(255,255,255,0.5);
  }

  .plan-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; }
  .plan-card .top-row { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--paper-300); }
  .plan-card .pn { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--gold-700); }
  .plan-card .price { font-family: var(--font-display); font-size: 1.125rem; color: var(--ink-800); font-style: italic; }
  .plan-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; line-height: 1; margin: 0; color: var(--ink-800); }
  .plan-card h3 em { font-style: italic; }
  .plan-card .desc { font-size: 0.9375rem; color: var(--gray-700); line-height: 1.55; margin: 0; }
  .plan-card .specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--paper-300); border-bottom: 1px solid var(--paper-300); }
  .plan-card .specs div { display: flex; flex-direction: column; gap: 2px; }
  .plan-card .specs .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-500); }
  .plan-card .specs .v { font-family: var(--font-display); font-size: 1.125rem; color: var(--ink-800); }
  .plan-card .actions { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
  .plan-card .actions a {
    font-family: var(--font-sans); font-size: 11px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    text-decoration: none;
    padding: 10px 14px; min-height: 40px;
    display: inline-flex; align-items: center;
    border-radius: var(--radius-pill);
  }
  .plan-card .actions a.primary { background: var(--ink-800); color: var(--paper-50); }
  @media (hover:hover) and (pointer:fine) { .plan-card .actions a.primary:hover { background: var(--gold-500); color: var(--ink-800); } }
  .plan-card .actions a.ghost { color: var(--ink-800); padding-left: 0; }
  @media (hover:hover) and (pointer:fine) { .plan-card .actions a.ghost:hover { color: var(--gold-700); } }

  /* exterior styles gallery — rounded-card v2 to match concept-plan style */
  .ex-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
  @media (max-width: 760px) { .ex-grid { grid-template-columns: 1fr; } }
  .ex-card {
    margin: 0;
    background: var(--bg-raised);
    border: 1px solid var(--paper-300);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 18px rgba(14,14,14,0.06);
    transition: box-shadow var(--dur-base) var(--ease-standard),
                transform var(--dur-base) var(--ease-standard);
  }
  @media (hover:hover) and (pointer:fine) { .ex-card:hover { box-shadow: 0 14px 36px rgba(14,14,14,0.14); transform: translateY(-2px); } }
  /* aspect-ratio matches the 2400x1792 source renders — full house visible, no crop */
  .ex-card .ex-img {
    position: relative;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: var(--paper-100);
  }
  .ex-card .ex-img::after { content: 'RENDER · NOT A SISU BUILD'; position: absolute; top: 12px; right: 12px; background: rgba(26,26,26,0.82); color: var(--gold-500); padding: 4px 9px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; }
  .ex-card figcaption { padding: 22px 24px 26px; }
  .ex-card .ex-n { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--gold-700); display: block; margin-bottom: 6px; }
  .ex-card h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.15; margin: 0 0 8px; color: var(--ink-800); }
  .ex-card h4 em { font-style: italic; }
  .ex-card p { font-size: 0.9375rem; line-height: 1.55; color: var(--gray-700); margin: 0; }

  /* empty state */
  .empty-state {
    display: none;
    padding: 64px 24px;
    text-align: center;
    background: var(--bg-raised);
    border: 1px dashed var(--paper-300);
    border-radius: var(--radius-md);
  }
  .empty-state.is-on { display: block; }
  .empty-state h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; color: var(--ink-800); margin: 0 0 8px; }
  .empty-state p { font-size: 0.9375rem; color: var(--gray-700); margin: 0 0 18px; }
  .empty-state button {
    background: transparent; border: 1px solid var(--ink-800);
    color: var(--ink-800);
    padding: 10px 18px;
    font-family: var(--font-sans); font-size: 11px;
    font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    border-radius: var(--radius-pill);
    cursor: pointer;
  }
  @media (hover:hover) and (pointer:fine) { .empty-state button:hover { background: var(--ink-800); color: var(--paper-50); } }


/* SISU-GOLDEM-2026-05-29: fill ungolded heading accents (existing explicit gold preserved by specificity) */
h1 em,h2 em,h3 em{color:var(--gold-700);font-style:italic}