/* ===== 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 ===== */

  /* =========================================================
     PORTFOLIO, monograph treatment
     Numbered chapters, paper + ink alternation, no stats,
     no filter chrome. Each home reads as an editorial entry.
     ========================================================= */

  :root {
    --pf-rule: 1px solid var(--paper-300);
    --pf-rule-dark: 1px solid var(--ink-600);
    --pf-mono-xs: 10px;
    --pf-mono-sm: 11px;
  }

  /* ============ HERO ============ */
  .pf2-hero {
    background: var(--ink-800); color: var(--paper-50);
    padding: clamp(80px, 10vw, 144px) clamp(24px, 6vw, 96px) 0;
    position: relative; overflow: hidden;
  }
  .pf2-hero::before {
    content: ''; position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 1px; height: 56px; background: var(--gold-500); opacity: 0.6;
  }
  .pf2-hero-inner { max-width: 1280px; margin: 0 auto; position: relative; }

  .pf2-hero-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: clamp(56px, 8vw, 96px);
    font-family: var(--font-mono); font-size: var(--pf-mono-sm);
    letter-spacing: 0.18em; text-transform: uppercase;
  }
  .pf2-hero-meta .left { color: var(--gold-500); display: flex; align-items: center; gap: 14px; }
  .pf2-hero-meta .left::before {
    content: ''; width: 28px; height: 1px; background: var(--gold-500);
  }
  .pf2-hero-meta .right { color: rgba(250,247,241,0.55); }

  .pf2-hero h1 {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(64px, 10vw, 168px); line-height: 0.92;
    letter-spacing: -0.03em; margin: 0 0 clamp(40px, 4vw, 56px);
    color: var(--paper-50); max-width: 14ch;
  }
  .pf2-hero h1 em {
    font-style: italic; font-weight: 400; color: var(--gold-500);
  }
  .pf2-hero h1 .comma { color: var(--gold-500); font-style: normal; }

  .pf2-hero-body {
    display: grid; grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 6vw, 96px);
    padding: clamp(40px, 5vw, 64px) 0;
    border-top: var(--pf-rule-dark);
  }
  @media (max-width: 800px) { .pf2-hero-body { grid-template-columns: 1fr; } }

  .pf2-hero-body .colA {
    font-family: var(--font-mono); font-size: 14px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gold-300); line-height: 2;
  }
  .pf2-hero-body .colA .lbl { color: rgba(250,247,241,0.45); display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: 0.2em; }

  .pf2-hero-body .lede {
    font-family: var(--font-sans); font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.6; color: rgba(250,247,241,0.82);
    max-width: 56ch; margin: 0;
  }

  /* ============ TABLE OF CONTENTS ============ */
  .pf2-toc {
    background: var(--ink-800); color: var(--paper-50);
    padding: 0 clamp(24px, 6vw, 96px) clamp(56px, 7vw, 96px);
  }
  .pf2-toc-inner {
    max-width: 1280px; margin: 0 auto;
    border-top: var(--pf-rule-dark);
    padding-top: 32px;
  }
  .pf2-toc-head {
    font-family: var(--font-mono); font-size: var(--pf-mono-sm);
    letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(250,247,241,0.45); margin-bottom: 24px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  }
  .pf2-toc-list {
    display: grid; gap: 0;
  }
  .pf2-toc-row {
    display: grid;
    grid-template-columns: 64px 1fr auto auto;
    gap: clamp(16px, 3vw, 48px);
    align-items: baseline;
    padding: 18px 0;
    border-top: 1px solid rgba(250,247,241,0.08);
    color: rgba(250,247,241,0.75);
    text-decoration: none;
    transition: color var(--dur-fast), padding var(--dur-base) var(--ease-out);
  }
  .pf2-toc-row:last-child { border-bottom: 1px solid rgba(250,247,241,0.08); }
  @media (hover:hover) and (pointer:fine) { .pf2-toc-row:hover { color: var(--gold-300); padding-left: 12px; } }
  .pf2-toc-row .n {
    font-family: var(--font-mono); font-size: var(--pf-mono-sm);
    letter-spacing: 0.16em; color: var(--gold-500);
  }
  .pf2-toc-row .t {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.005em;
    color: var(--paper-50);
  }
  @media (hover:hover) and (pointer:fine) { .pf2-toc-row:hover .t { color: var(--gold-300); } }
  .pf2-toc-row .city {
    font-family: var(--font-mono); font-size: var(--pf-mono-xs);
    letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(250,247,241,0.45);
  }
  .pf2-toc-row .arrow {
    font-family: var(--font-mono); font-size: var(--pf-mono-sm);
    color: rgba(250,247,241,0.3);
  }
  @media (hover:hover) and (pointer:fine) { .pf2-toc-row:hover .arrow { color: var(--gold-500); } }
  @media (max-width: 700px) {
    .pf2-toc-row { grid-template-columns: 48px 1fr auto; }
    .pf2-toc-row .city { display: none; }
  }

  /* ============ CHAPTER (shared) ============ */
  .pf2-chapter {
    background: var(--paper-50);
    padding: clamp(80px, 10vw, 144px) clamp(24px, 6vw, 96px);
    position: relative;
  }
  .pf2-chapter.is-dark {
    background: var(--ink-800); color: var(--paper-50);
  }
  .pf2-chapter.is-cream { background: var(--paper-100); }
  .pf2-chapter-inner { max-width: 1280px; margin: 0 auto; }

  /* Chapter slug, appears above title in every entry */
  .pf2-slug {
    display: flex; align-items: baseline; gap: 18px;
    font-family: var(--font-mono); font-size: var(--pf-mono-sm);
    letter-spacing: 0.2em; text-transform: uppercase;
    margin-bottom: 28px;
  }
  .pf2-slug .ch {
    color: var(--gold-700);
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: clamp(22px, 2.2vw, 32px); letter-spacing: -0.01em;
    text-transform: none; line-height: 1;
  }
  .is-dark .pf2-slug .ch { color: var(--gold-500); }
  .pf2-slug .rule { flex: 0 0 32px; height: 1px; background: var(--gold-500); }
  .pf2-slug .tag { color: var(--gray-500); }
  .is-dark .pf2-slug .tag { color: rgba(250,247,241,0.5); }

  /* Project title block */
  .pf2-title {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(44px, 5.5vw, 84px);
    line-height: 0.98; letter-spacing: -0.022em;
    margin: 0 0 20px; color: var(--ink-800);
  }
  .is-dark .pf2-title { color: var(--paper-50); }
  .pf2-title em { font-style: italic; color: var(--gold-700); font-weight: 400; }
  .is-dark .pf2-title em { color: var(--gold-500); }

  .pf2-addr {
    font-family: var(--font-mono); font-size: var(--pf-mono-sm);
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gray-500); margin: 0 0 28px;
  }
  .is-dark .pf2-addr { color: rgba(250,247,241,0.5); }

  .pf2-body {
    font-family: var(--font-sans); font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.7; color: var(--gray-700); margin: 0 0 32px;
    max-width: 56ch;
  }
  .is-dark .pf2-body { color: rgba(250,247,241,0.72); }

  /* Spec ribbon, small mono key/values, no counts, just facts */
  .pf2-specs {
    display: flex; flex-wrap: wrap; gap: 0;
    border-top: 1px solid var(--paper-300);
    border-bottom: 1px solid var(--paper-300);
  }
  .is-dark .pf2-specs {
    border-top-color: var(--ink-600);
    border-bottom-color: var(--ink-600);
  }
  .pf2-specs .s {
    display: flex; flex-direction: column; gap: 6px;
    padding: 18px 28px 18px 0;
    flex: 0 0 auto;
    min-width: 110px;
  }
  .pf2-specs .s + .s { padding-left: 28px; border-left: 1px solid var(--paper-300); }
  .is-dark .pf2-specs .s + .s { border-left-color: var(--ink-600); }
  .pf2-specs .k {
    font-family: var(--font-mono); font-size: var(--pf-mono-xs);
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gray-500);
  }
  .is-dark .pf2-specs .k { color: rgba(250,247,241,0.45); }
  .pf2-specs .v {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(20px, 1.7vw, 24px); line-height: 1;
    letter-spacing: -0.005em; color: var(--ink-800);
  }
  .is-dark .pf2-specs .v { color: var(--paper-50); }

  /* Image plate, placeholder when no real photo */
  .pf2-plate {
    position: relative; overflow: hidden;
    background:
      linear-gradient(180deg, rgba(26,26,26,0.04), rgba(26,26,26,0.16)),
      repeating-linear-gradient(135deg, var(--paper-200) 0 18px, var(--paper-300) 18px 19px);
    border: 1px solid var(--paper-300);
    border-radius: var(--radius-image);
  }
  .is-dark .pf2-plate {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.4)),
      repeating-linear-gradient(135deg, rgba(250,247,241,0.04) 0 16px, rgba(250,247,241,0.07) 16px 17px);
    border-color: var(--ink-600);
  }
  .pf2-plate img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  .pf2-plate .ph {
    position: absolute; left: 18px; bottom: 18px;
    font-family: var(--font-mono); font-size: var(--pf-mono-xs);
    letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(26,26,26,0.45);
  }
  .is-dark .pf2-plate .ph { color: rgba(250,247,241,0.5); }
  .pf2-plate.has-img .ph { display: none; }
  .pf2-plate .corner {
    position: absolute; top: 18px; right: 18px;
    font-family: var(--font-mono); font-size: var(--pf-mono-xs);
    letter-spacing: 0.2em; text-transform: uppercase;
    background: var(--ink-800); color: var(--paper-50);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
  }
  .pf2-reno {
    position: absolute; right: 10px; bottom: 10px;
    font-family: var(--font-mono); font-size: var(--pf-mono-xs);
    letter-spacing: 0.22em; text-transform: uppercase;
    background: var(--paper-50); color: var(--ink-800);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; gap: 8px;
    z-index: 2;
  }
  .pf2-reno::before {
    content: ''; width: 6px; height: 6px;
    background: var(--gold-500);
    border-radius: 50%;
    flex: none;
  }
  .pf2-plate .pf2-reno { right: 18px; bottom: 18px; }

  /* ============ CHAPTER LAYOUTS ============ */

  /* Layout A: image-left, text-right */
  .pf2-layout-a {
    display: grid; grid-template-columns: 1.15fr 1fr;
    gap: clamp(40px, 5vw, 80px); align-items: center;
  }
  .pf2-layout-a .pf2-plate { aspect-ratio: 4 / 3; }
  .pf2-layout-a.is-portrait {
    grid-template-columns: 0.85fr 1fr;
    align-items: stretch;
  }
  .pf2-layout-a.is-portrait .pf2-plate { aspect-ratio: 9 / 16; }
  .pf2-layout-a.is-portrait .pf2-text {
    display: flex; flex-direction: column; justify-content: center;
    gap: 22px;
  }
  @media (max-width: 800px) {
    .pf2-layout-a.is-portrait { grid-template-columns: 1fr; }
    .pf2-layout-a.is-portrait .pf2-plate { aspect-ratio: 4 / 5; }
  }

  /* Layout B: text-left, image-right */
  .pf2-layout-b {
    display: grid; grid-template-columns: 1fr 1.15fr;
    gap: clamp(40px, 5vw, 80px); align-items: center;
  }
  .pf2-layout-b .pf2-plate { aspect-ratio: 4 / 3; }

  @media (max-width: 800px) {
    .pf2-layout-a, .pf2-layout-b {
      grid-template-columns: 1fr;
    }
    .pf2-layout-b .pf2-text { order: 2; }
    .pf2-layout-b .pf2-plate { order: 1; }
  }

  /* Layout C: full-bleed feature with overlay text band below */
  .pf2-layout-c .pf2-plate { aspect-ratio: 21 / 9; margin-bottom: 48px; }
  .pf2-layout-c .pf2-feat {
    display: grid; grid-template-columns: 1fr 1.4fr;
    gap: clamp(40px, 5vw, 80px); align-items: start;
  }
  @media (max-width: 800px) {
    .pf2-layout-c .pf2-feat { grid-template-columns: 1fr; }
    .pf2-layout-c .pf2-plate { aspect-ratio: 4 / 3; }
  }

  /* Layout D: row treatment (group of homes, triptych or duet) */
  .pf2-layout-d .pf2-head {
    display: grid; grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 5vw, 80px); align-items: end;
    margin-bottom: clamp(40px, 5vw, 64px);
  }
  @media (max-width: 800px) {
    .pf2-layout-d .pf2-head { grid-template-columns: 1fr; }
  }
  .pf2-row {
    display: grid; gap: clamp(16px, 2vw, 28px);
  }
  .pf2-row.is-three { grid-template-columns: repeat(3, 1fr); }
  .pf2-row.is-two { grid-template-columns: repeat(2, 1fr); }
  @media (max-width: 900px) {
    .pf2-row.is-three, .pf2-row.is-two { grid-template-columns: 1fr; }
  }
  .pf2-unit { display: flex; flex-direction: column; gap: 16px; }
  .pf2-unit .pf2-plate { aspect-ratio: 4 / 5; }
  .pf2-unit .lab {
    font-family: var(--font-mono); font-size: var(--pf-mono-xs);
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold-700);
  }
  .is-dark .pf2-unit .lab { color: var(--gold-500); }
  .pf2-unit .name {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(22px, 2vw, 30px); line-height: 1.05;
    letter-spacing: -0.01em; color: var(--ink-800); margin: 0;
  }
  .is-dark .pf2-unit .name { color: var(--paper-50); }
  .pf2-unit .name em { font-style: italic; color: var(--gold-700); font-weight: 400; }
  .is-dark .pf2-unit .name em { color: var(--gold-500); }
  .pf2-unit .micro {
    font-family: var(--font-mono); font-size: var(--pf-mono-xs);
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gray-500); display: flex; gap: 14px; flex-wrap: wrap;
    border-top: 1px solid var(--paper-300); padding-top: 12px;
  }
  .is-dark .pf2-unit .micro {
    color: rgba(250,247,241,0.5);
    border-top-color: var(--ink-600);
  }

  /* ============ CONTACT SHEET (Casa 309 photo gallery) ============ */
  .pf2-sheet {
    margin-top: clamp(48px, 5vw, 72px);
    padding-top: clamp(32px, 4vw, 48px);
    border-top: 1px solid var(--paper-300);
  }
  .is-cream .pf2-sheet { border-top-color: var(--paper-300); }
  .is-dark .pf2-sheet { border-top-color: var(--ink-600); }
  .is-dark .pf2-sheet-head { color: rgba(250,247,241,0.5); }
  .is-dark .pf2-sheet-head .lab { color: var(--gold-500); }
  .is-dark .pf2-sheet-grid .frame { background: var(--ink-700); }
  .pf2-sheet-head {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
    margin-bottom: clamp(24px, 3vw, 36px);
    font-family: var(--font-mono); font-size: var(--pf-mono-sm);
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gray-500);
  }
  .pf2-sheet-head .lab { color: var(--gold-700); }
  .pf2-sheet-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 1fr;
    gap: clamp(8px, 1vw, 14px);
  }
  .pf2-sheet-grid .frame {
    position: relative; overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--paper-200);
    border-radius: var(--radius-md);
  }
  .pf2-sheet-grid .frame 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) { .pf2-sheet-grid .frame:hover img { transform: scale(1.03); } }
  .pf2-sheet-grid .frame .tag {
    position: absolute; left: 10px; bottom: 10px;
    font-family: var(--font-mono); font-size: 9px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--paper-50);
    background: rgba(26,26,26,0.7);
    padding: 5px 10px;
    border-radius: var(--radius-pill);
  }
  /* Spans for editorial rhythm in the contact sheet */
  .pf2-sheet-grid .span-3 { grid-column: span 3; }
  .pf2-sheet-grid .span-2 { grid-column: span 2; }
  .pf2-sheet-grid .span-2.tall { aspect-ratio: 3 / 4; }
  .pf2-sheet-grid .span-3.wide { aspect-ratio: 16 / 9; }
  @media (max-width: 800px) {
    .pf2-sheet-grid { grid-template-columns: repeat(2, 1fr); }
    .pf2-sheet-grid .span-3,
    .pf2-sheet-grid .span-2 { grid-column: span 1; }
    .pf2-sheet-grid .span-2.tall { aspect-ratio: 4 / 3; }
    .pf2-sheet-grid .span-3.wide { aspect-ratio: 4 / 3; }
  }

  /* ============ CLOSING BLOCK ============ */
  .pf2-close {
    background: var(--ink-800); color: var(--paper-50);
    padding: clamp(96px, 12vw, 180px) clamp(24px, 6vw, 96px);
    position: relative; overflow: hidden;
  }
  .pf2-close::before {
    content: ''; position: absolute; inset: auto -20% -40% -20%;
    height: 100%;
    background: radial-gradient(ellipse at 50% 100%, rgba(197,165,90,0.12), transparent 60%);
    pointer-events: none;
  }
  .pf2-close-inner {
    max-width: 1080px; margin: 0 auto; position: relative;
    text-align: center;
  }
  .pf2-close .eyebrow {
    font-family: var(--font-mono); font-size: var(--pf-mono-sm);
    letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--gold-500); margin-bottom: 40px;
    display: inline-flex; align-items: center; gap: 16px;
  }
  .pf2-close .eyebrow::before,
  .pf2-close .eyebrow::after {
    content: ''; width: 32px; height: 1px; background: var(--gold-500);
  }
  .pf2-close h2 {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(44px, 6vw, 96px); line-height: 1;
    letter-spacing: -0.025em; margin: 0 0 40px;
    color: var(--paper-50); max-width: 16ch; margin-inline: auto;
  }
  .pf2-close h2 em { font-style: italic; color: var(--gold-500); font-weight: 400; }
  .pf2-close p {
    font-family: var(--font-sans); font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.7; color: rgba(250,247,241,0.78);
    max-width: 60ch; margin: 0 auto 48px;
  }
  .pf2-close .signature {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(20px, 1.8vw, 26px); color: var(--gold-300);
    margin-bottom: 56px;
  }
  .pf2-close .actions {
    display: inline-flex; align-items: center; gap: 28px; flex-wrap: wrap;
    justify-content: center;
  }
  .pf2-close .actions .primary {
    font-family: var(--font-sans); font-size: 14px; font-weight: 600;
    letter-spacing: 0.01em;
    padding: 18px 36px; 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) { .pf2-close .actions .primary:hover {
    background: var(--gold-300); transform: translateY(-2px);
  } }
  .pf2-close .actions .ghost {
    font-family: var(--font-mono); font-size: var(--pf-mono-sm);
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(250,247,241,0.7); text-decoration: none;
  }
  @media (hover:hover) and (pointer:fine) { .pf2-close .actions .ghost:hover { color: var(--gold-300); } }

  /* ============ SECTION DIVIDER ============ */
  .pf2-divide {
    background: var(--paper-50); padding: 0 clamp(24px, 6vw, 96px);
  }
  .pf2-divide .inner {
    max-width: 1280px; margin: 0 auto;
    border-top: 1px solid var(--paper-300);
  }



  /* ============ LIGHTBOX (isolated stylesheet) ============ */
  #pf2Lightbox {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 200;
    background: rgba(14, 14, 14, 0.96);
    display: none;
    flex-direction: column;
    cursor: zoom-out;
  }
  #pf2Lightbox.is-open { display: flex; }

  #pf2Lightbox .pf2-lightbox-stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 48px 0;
    position: relative;
    min-height: 0;
  }
  #pf2Lightbox img {
    max-width: 100%;
    max-height: 78vh; max-height: 78dvh;
    object-fit: contain;
    display: block;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  }
  #pf2Lightbox .pf2-lightbox-foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 24px 48px 36px;
    color: rgba(250,247,241,0.6);
  }
  #pf2Lightbox .pf2-lightbox-caption {
    color: rgba(250,247,241,0.92);
    max-width: 60%;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    letter-spacing: 0.03em;
  }
  #pf2Lightbox .pf2-lightbox-counter {
    color: #C5A55A;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  #pf2Lightbox button {
    background: rgba(26,26,26,0.55);
    border: 1px solid rgba(250,247,241,0.25);
    color: #FAF7F1;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    padding: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
    transition: background 120ms, border-color 120ms, color 120ms;
  }
  @media (hover:hover) and (pointer:fine) { #pf2Lightbox button:hover {
    background: #C5A55A;
    border-color: #C5A55A;
    color: #1A1A1A;
  } }

  #pf2Lightbox .pf2-lightbox-close {
    position: fixed;
    top: max(24px, env(safe-area-inset-top)); right: max(32px, env(safe-area-inset-right));
    z-index: 2;
    width: 44px; height: 44px;
    font-size: 18px;
  }
  #pf2Lightbox .pf2-lightbox-prev,
  #pf2Lightbox .pf2-lightbox-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 56px; height: 56px;
    font-size: 24px;
    line-height: 1;
  }
  #pf2Lightbox .pf2-lightbox-prev { left: 32px; }
  #pf2Lightbox .pf2-lightbox-next { right: 32px; }

  @media (max-width: 700px) {
    #pf2Lightbox .pf2-lightbox-prev,
    #pf2Lightbox .pf2-lightbox-next { width: 44px; height: 44px; font-size: 20px; }
    #pf2Lightbox .pf2-lightbox-caption { max-width: 100%; font-size: 12px; }
  }

  /* Hint clickability on every real photo */
  .pf2-plate.has-img,
  .pf2-sheet-grid .frame { cursor: zoom-in; }

  /* ---------- 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; }
  .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); }


/* 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}

/* SISU-PF-MOBILE-TAG: hide contact-sheet labels on phones (they covered the small frames) */
@media(max-width:700px){.pf2-sheet-grid .frame .tag{display:none!important}}