/* ==========================================================================
   Proudhouse Builders - design preview
   Fonts: Cormorant Garamond (display) + Manrope (text), via Google Fonts.
   Palette: onyx black + champagne gold. The logo keeps its own blue and green.
   ========================================================================== */

/* Black and gold: one deliberate dark theme (logo keeps its own blue and green on a light plate) */
:root {
  color-scheme: dark;

  --navy-950: #050505; /* Onyx */
  --navy-900: #0b0b0c;
  --smoked: #17171a; /* Smoked Black */
  --navy-800: #121214;
  --navy-700: #b88a2c; /* Deep Gold */
  --sea: #f1d994; /* Pale Gold, active states and glass highlights */
  --sea-ink: #e6c670;
  --brass: #dcb55a; /* Champagne Gold */
  --brass-light: #e6c670;
  --brass-soft: #f1d994;
  --brass-ink: #e6c670;
  --gold-deep: #b88a2c;

  --bg: #060606;
  --bg-alt: #0d0d0f;
  --surface: #141417;
  --text: #f4f0e6;
  --text-soft: #b8b2a4;
  --accent-text: #e6c670;
  --line: rgba(230, 198, 112, 0.2);
  --band: #0a0a0b;
  --footer: #030303;
  --focus: #f1d994;
  --link: #e6c670;
  --field-bg: rgba(255, 255, 255, 0.05);
  --field-line: rgba(230, 198, 112, 0.4);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 22px 44px -18px rgba(0, 0, 0, 0.8);

  /* Glass: smoked black with a gold edge */
  --glass-tint: rgba(10, 10, 12, 0.72);
  --glass-solid: rgba(10, 10, 12, 0.97);
  --glass-edge: rgba(230, 198, 112, 0.3);

  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Manrope", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  --max: 2200px; /* fluid: content stretches with the screen up to very large monitors */
  --gutter: clamp(1.25rem, 4.5vw, 7rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --radius: 22px;
  --radius-sm: 12px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Surfaces that stay dark in both themes */
.on-dark {
  --text: #f4f0e6;
  --text-soft: #b8b2a4;
  --accent-text: #f1d994;
  --line: rgba(255, 255, 255, 0.16);
  --focus: #f1d994;
  --link: #f1d994;
  color: var(--text);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.2em; }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 6rem; }

.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: 0.8rem 1.2rem; border-radius: 999px;
  background: var(--brass-light); color: var(--navy-950); font-weight: 700; text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* ---------- Type ---------- */
h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  letter-spacing: -0.005em;
  color: var(--text);
}
h1 { font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5rem); line-height: 1.02; letter-spacing: -0.015em; }
h2 { font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.6rem); line-height: 1.08; }
h3 { font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.15rem); line-height: 1.15; }
h2 em, h1 em { font-style: italic; font-weight: 500; }
.lede { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); line-height: 1.65; color: var(--text-soft); max-width: 40rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font: 700 0.74rem/1.3 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text);
}
.eyebrow::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; flex: none; }
.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--bg-alt); }
.section--band { background: var(--band); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4.5vw, 3.75rem); display: grid; gap: 1.1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem;
  min-height: 3.1rem; padding: 0.8rem 1.6rem; border-radius: 999px;
  font: 700 0.92rem/1.2 var(--sans); letter-spacing: 0.03em; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; position: relative; overflow: hidden;
  transition: transform 0.35s var(--ease), background-color 0.3s, box-shadow 0.35s var(--ease), border-color 0.3s, color 0.3s;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary {
  background: linear-gradient(180deg, #f1d994, var(--brass-light) 55%, #c19a3e);
  color: var(--navy-950);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 22px -8px rgba(176, 141, 87, 0.7);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 14px 28px -10px rgba(176, 141, 87, 0.85); }
.btn--ghost { color: var(--text); border-color: color-mix(in srgb, var(--text) 45%, transparent); background: transparent; }
.btn--ghost:hover { background: color-mix(in srgb, var(--text) 9%, transparent); border-color: var(--text); transform: translateY(-2px); }
.on-dark .btn--ghost, .hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.on-dark .btn--ghost:hover, .hero .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem;
  font-weight: 700; font-size: 0.92rem; letter-spacing: 0.03em; text-decoration: none; color: var(--accent-text);
  border-bottom: 1px solid transparent;
}
.link-arrow svg { width: 1em; height: 1em; transition: transform 0.35s var(--ease); }
.link-arrow:hover { border-bottom-color: currentColor; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Liquid glass ---------- */
.glass {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0) 100%),
    var(--glass-tint);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 14px 34px -10px rgba(0, 0, 0, 0.45);
  color: #fff;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-solid); }
}
.glass::before { /* top sheen */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  -webkit-mask: linear-gradient(180deg, #000, transparent); mask: linear-gradient(180deg, #000, transparent);
}

/* ---------- Header / nav ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; padding: 0.75rem var(--gutter) 0; pointer-events: none; }
.nav {
  pointer-events: auto; max-width: var(--max); margin-inline: auto; border-radius: 999px;
  display: flex; align-items: center; gap: 1rem; padding: 0.45rem 0.55rem 0.45rem 1.4rem; min-height: 3.5rem;
  transition: background-color 0.4s, box-shadow 0.4s;
}
.site-header.is-scrolled .nav { --glass-tint: rgba(9, 9, 11, 0.8); }
.brand { display: inline-flex; flex-direction: column; text-decoration: none; color: #fff; line-height: 1; padding: 0.25rem 0; margin-right: auto; }
.brand-mark { font-family: var(--serif); font-weight: 600; font-size: 1.55rem; letter-spacing: 0.01em; }
.brand-sub { font: 700 0.58rem/1 var(--sans); letter-spacing: 0.5em; text-transform: uppercase; color: var(--brass-soft); margin-top: 0.22rem; padding-left: 0.1rem; }
.nav-links { display: flex; align-items: center; gap: 0.15rem; }
.nav-links .nav-link, .nav-phone {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.4rem 0.95rem; border-radius: 999px;
  color: #fff; text-decoration: none; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; transition: background-color 0.25s;
}
.nav-links .nav-link:hover, .nav-phone:hover { background: rgba(255, 255, 255, 0.14); }
.nav-links .nav-link[aria-current] { color: var(--brass-soft); }
.nav-phone { background: linear-gradient(180deg, #f1d994, var(--brass-light)); color: var(--navy-950); font-weight: 700; gap: 0.5rem; padding-inline: 1.15rem; }
.nav-phone:hover { background: #f6e2a8; }
.nav-phone svg { width: 1em; height: 1em; }
.nav-toggle {
  display: none; align-items: center; min-height: 2.75rem; padding: 0 1.05rem; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; font: 700 0.88rem var(--sans);
}
.site-header .on-dark, .nav { --focus: #f1d994; }

@media (max-width: 999px) {
  .nav { padding-left: 1.15rem; flex-wrap: wrap; }
  .nav-phone .nav-phone-text { display: none; }
  .nav-phone { min-width: 2.75rem; justify-content: center; padding-inline: 0.8rem; }
  .nav-phone svg { width: 1.15rem; height: 1.15rem; }
  .js .nav-toggle { display: inline-flex; }
  .nav-links { order: 5; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 0.25rem 0.5rem 0.75rem; }
  .nav-links .nav-link { padding-inline: 1rem; font-size: 1rem; border-radius: var(--radius-sm); }
  .js .nav-links { display: none; }
  .js .nav-links.is-open { display: flex; }
  .nav { border-radius: 28px; }
  .js .nav:has(.nav-links.is-open) { border-radius: 28px; }
  html:not(.js) .nav-links { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}
@media (min-width: 1000px) { .nav { padding-right: 0.5rem; } }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; background: var(--navy-950); }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(7, 22, 43, 0.88) 0%, rgba(7, 22, 43, 0.66) 40%, rgba(7, 22, 43, 0.05) 85%),
    linear-gradient(180deg, rgba(7, 22, 43, 0.5) 0%, rgba(7, 22, 43, 0) 26%, rgba(7, 22, 43, 0) 65%, rgba(7, 22, 43, 0.55) 100%);
}
.hero-inner { padding-block: clamp(8rem, 13vw, 10rem) clamp(3rem, 6vw, 5rem); display: grid; gap: 1.5rem; justify-items: start; }
.hero h1, .hero .lede { color: #fff; }
.hero .eyebrow { color: var(--brass-soft); }
.hero h1 { max-width: 17ch; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
.hero .lede { color: rgba(255, 255, 255, 0.92); max-width: 34rem; }
.hero-tagline { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); color: var(--brass-soft); line-height: 1.2; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.5rem; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.65rem 1.25rem; border-radius: 999px; margin-top: 1.25rem;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.45;
}
.hero-pill::after { content: none; }
.hero-pill .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--brass-light); box-shadow: 0 0 0 4px rgba(220, 181, 90, 0.25); flex: none; }

@media (prefers-reduced-motion: no-preference) {
  [data-rise] { animation: rise 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  .hero-media img { animation: settle 2.4s var(--ease) both; }
  @keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }
}

/* ---------- Stats strip ---------- */
.stats { background: var(--band); padding-block: clamp(2.75rem, 5vw, 4.25rem); border-block: 1px solid rgba(255, 255, 255, 0.08); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 0.5rem clamp(1rem, 2.5vw, 2.25rem); border-left: 1px solid var(--line); display: grid; gap: 0.35rem; align-content: start; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat .num { font-family: var(--serif); font-weight: 500; font-size: clamp(3.2rem, 2rem + 4vw, 5.25rem); line-height: 0.95; color: #fff; font-variant-numeric: lining-nums; letter-spacing: -0.02em; }
.stat .num small { font-size: 0.5em; color: var(--brass-soft); margin-right: 0.04em; vertical-align: 0.5em; letter-spacing: 0; }
.stat .label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); }
.stat .sub { font-size: 0.9rem; color: var(--text-soft); line-height: 1.5; }
@media (max-width: 859px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ---------- Intro / values ---------- */
.intro-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); grid-template-columns: 1fr; }
@media (min-width: 960px) { .intro-grid { grid-template-columns: 5fr 7fr; align-items: start; } .intro-copy { position: sticky; top: 7rem; } }
.intro-copy { display: grid; gap: 1.5rem; }
.pull { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.25; color: var(--accent-text); padding-left: 1.25rem; border-left: 2px solid var(--brass); }
.values { display: grid; }
.value { display: grid; grid-template-columns: 3rem 1fr; gap: 0.5rem clamp(1.25rem, 3vw, 2.5rem); padding-block: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--line); }
.value:last-child { border-bottom: 1px solid var(--line); }
.value-num { font-family: var(--serif); font-style: italic; font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem); color: var(--brass); line-height: 1; padding-top: 0.2rem; font-variant-numeric: lining-nums; }
.value p { color: var(--text-soft); margin-top: 0.6rem; max-width: 34rem; }

/* ---------- Project cards ---------- */
.projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.project-card {
  position: relative; isolation: isolate; border-radius: var(--radius); overflow: hidden; color: #fff; display: flex; align-items: flex-end;
  min-height: clamp(480px, 46vw, 600px); background: var(--navy-900); box-shadow: var(--shadow-card);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.project-card--wide { grid-column: 1 / -1; min-height: clamp(520px, 48vw, 680px); }
.project-card:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 34px 60px -20px rgba(0, 0, 0, 0.55); }
.card-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.project-card:hover .card-media img { transform: scale(1.045); }
.project-card::after { /* scrim */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 22, 43, 0.15) 0%, rgba(7, 22, 43, 0) 30%, rgba(7, 22, 43, 0.62) 68%, rgba(7, 22, 43, 0.9) 100%);
}
.card-body { width: 100%; padding: clamp(1.25rem, 2.6vw, 2.25rem); display: grid; gap: 1.1rem; }
.card-body .eyebrow { color: var(--brass-soft); }
.card-body h3 { color: #fff; font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem); line-height: 1.05; }
.card-body h3 a { text-decoration: none; }
.card-body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* whole card clickable */
.card-body h3 a:focus-visible { outline: none; }
.project-card:has(h3 a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
.card-desc { color: rgba(255, 255, 255, 0.9); font-size: 1.02rem; max-width: 32rem; }
.facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; border-radius: 16px; overflow: hidden; width: fit-content; max-width: 100%; }
.facts > div { padding: 0.8rem 1.35rem; border-left: 1px solid rgba(255, 255, 255, 0.16); display: grid; gap: 0.15rem; align-content: start; min-width: 0; position: relative; }
.facts > div:first-child { border-left: 0; }
.facts dt { font: 700 0.66rem/1.2 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-soft); }
.facts dd { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; line-height: 1.2; color: #fff; font-variant-numeric: lining-nums; }
.facts dd.is-text { font-family: var(--sans); font-weight: 600; font-size: 0.92rem; line-height: 1.35; }
.project-card .facts::after { /* hover sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
  transition: transform 1s var(--ease);
}
.project-card:hover .facts::after { transform: translateX(120%); }
.card-cta { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; color: #fff; }
.card-cta svg { width: 1.05em; height: 1.05em; transition: transform 0.35s var(--ease); }
.project-card:hover .card-cta svg { transform: translateX(5px); }
@media (max-width: 859px) {
  .projects-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; width: 100%; }
  .facts > div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 1.1rem; }
  .facts > div:first-child { border-top: 0; }
  .facts dd { text-align: right; }
}

/* ---------- Paths ---------- */
.paths { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.path { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.path--land { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; }
@media (min-width: 960px) { .path--land { grid-template-columns: 1.1fr 0.9fr; } }
.path-body { padding: clamp(1.75rem, 4vw, 3.25rem); display: grid; gap: 1.25rem; align-content: start; }
.path-body > p { color: var(--text-soft); max-width: 36rem; }
.path-media { position: relative; min-height: 320px; background: var(--navy-900); }
.path-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.path-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 22, 43, 0.35), rgba(7, 22, 43, 0) 50%); pointer-events: none; }
.steps { counter-reset: step; display: grid; gap: 0; margin-block: 0.5rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3.25rem 1fr; gap: 0 0.5rem; padding-block: 0.95rem; border-top: 1px solid var(--line); }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--serif); font-style: italic; font-size: 1.6rem; line-height: 1.2; color: var(--brass); font-variant-numeric: lining-nums; }
.steps strong { font-weight: 700; display: block; }
.steps span { color: var(--text-soft); font-size: 0.96rem; }
.path-actions { display: flex; flex-wrap: wrap; gap: 0.85rem 1.25rem; align-items: center; margin-top: 0.5rem; }
@media (max-width: 859px) { .paths { grid-template-columns: 1fr; } }

/* ---------- Sales ---------- */
.sales-grid { display: grid; gap: clamp(1rem, 2.5vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 960px) { .sales-grid { grid-template-columns: 5fr 6fr; align-items: stretch; } }
.listing {
  position: relative; isolation: isolate; border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 3rem); color: #fff; overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(220, 181, 90, 0.22), transparent 55%),
    linear-gradient(160deg, #123663 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  display: grid; gap: 1.1rem; align-content: space-between; box-shadow: var(--shadow-card); border: 1px solid rgba(255, 255, 255, 0.1);
}
.listing::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); }
.listing h3, .listing .price { color: #fff; }
.listing .eyebrow { color: var(--brass-soft); }
.listing address { font-style: normal; color: rgba(255, 255, 255, 0.82); }
.price { font-family: var(--serif); font-weight: 500; font-size: clamp(3rem, 2rem + 3.5vw, 4.75rem); line-height: 1; font-variant-numeric: lining-nums; letter-spacing: -0.01em; }
.badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.85rem; border-radius: 999px; font: 700 0.7rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.badge--avail { background: var(--brass-light); color: var(--navy-950); }
.badge--sold { border: 1px solid var(--brass); color: var(--accent-text); }
.sales-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.sale { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1.25rem; align-items: center; padding-block: 1.35rem; border-top: 1px solid var(--line); }
.sale:last-child { border-bottom: 1px solid var(--line); }
.sale h4 { margin: 0; font: 700 1.05rem/1.35 var(--sans); }
.sale p { color: var(--text-soft); font-size: 0.92rem; }
.sale .price-sm { font-family: var(--serif); font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); font-weight: 500; line-height: 1; font-variant-numeric: lining-nums; text-align: right; }
.sale .badge { justify-self: end; }
.sale-right { display: grid; gap: 0.5rem; justify-items: end; }

/* ---------- Partners ---------- */
.partners h2, .partners .partner-name { color: #fff; }
.partners .lede { color: var(--text-soft); }
.partner-list { columns: 3; column-gap: clamp(1.5rem, 4vw, 4rem); }
.partner-list li { break-inside: avoid; border-top: 1px solid var(--line); padding: 0.9rem 0; font-family: var(--serif); font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem); line-height: 1.2; color: #fff; font-weight: 500; transition: color 0.3s, padding-left 0.4s var(--ease); }
.partner-list li:hover { color: var(--brass-soft); padding-left: 0.5rem; }
@media (max-width: 859px) { .partner-list { columns: 2; } }
@media (max-width: 519px) { .partner-list { columns: 1; } }

/* ---------- Leadership ---------- */
.leader { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 960px) { .leader { grid-template-columns: 5fr 7fr; align-items: start; } }
.leader-card { border-left: 2px solid var(--brass); padding-left: clamp(1.25rem, 3vw, 2.5rem); display: grid; gap: 1.25rem; }
.leader-card .leader-name { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.5rem); line-height: 1.05; }
.leader-card p { color: var(--text-soft); font-size: 1.05rem; max-width: 38rem; }
.monogram { font-family: var(--serif); font-style: italic; font-size: clamp(7rem, 5rem + 9vw, 13rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 1px var(--brass); opacity: 0.9; user-select: none; }

/* ---------- Waterline strip ---------- */
.waterline { position: relative; isolation: isolate; color: #fff; overflow: hidden; padding-block: clamp(4.5rem, 10vw, 8rem); background: var(--navy-900); }
.waterline-media { position: absolute; inset: 0; z-index: -2; }
.waterline-media img { width: 100%; height: 100%; object-fit: cover; }
.waterline::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 22, 43, 0.7), rgba(7, 22, 43, 0.15)); }
.waterline-panel { max-width: 40rem; padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--radius); display: grid; gap: 1.25rem; justify-items: start; }
.waterline-panel h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.3rem); }
.waterline-panel .eyebrow { color: var(--brass-soft); }

/* ---------- Contact & forms ---------- */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 5fr 6fr; align-items: start; } }
.contact-info { display: grid; gap: 1.75rem; }
.contact-info h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); }
.info-block { display: grid; gap: 0.35rem; }
.info-block h3 { font: 700 0.72rem/1.3 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); }
.info-block a, .info-block address { font-style: normal; font-size: 1.1rem; text-decoration: none; }
.info-block a.big-phone { font-family: var(--serif); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); font-weight: 500; line-height: 1.1; display: inline-flex; align-items: center; min-height: 2.75rem; }
.info-block a:hover { color: var(--accent-text); }
.hours { display: grid; max-width: 22rem; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.45rem; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.hours dt { color: var(--text-soft); }
.hours dd { font-weight: 600; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3.5vw, 2.75rem); box-shadow: var(--shadow-card); }
.form { display: grid; gap: 1.1rem; }
.form h2, .form h3 { margin-bottom: 0.25rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; }
.field .opt { font-weight: 500; color: var(--text-soft); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.7rem 1rem; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--field-bg); border: 1px solid var(--field-line); border-radius: var(--radius-sm);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.form-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-note { min-height: 1.5rem; font-weight: 600; font-size: 0.95rem; color: var(--accent-text); }
.form-note:empty { display: none; }
.form-note a { color: inherit; }
.form-fine { font-size: 0.85rem; color: var(--text-soft); }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer); color: var(--text); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand .brand { margin-right: 0; }
.footer-brand p { color: var(--text-soft); margin-top: 1rem; max-width: 22rem; font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.3; }
.footer-col h2 { font: 700 0.72rem/1.3 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.75rem; }
.footer-col a, .footer-col address { color: var(--text); font-style: normal; text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer-col address { display: block; min-height: 0; color: var(--text-soft); }
.footer-col a:hover { color: var(--brass-soft); }
.footer-col li { display: block; }
.footer-base { padding-top: 1.5rem; color: var(--text-soft); font-size: 0.85rem; }

/* ---------- Floating CTA ---------- */
.float-cta {
  position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 55;
  display: inline-flex; align-items: center; gap: 0.65rem; min-height: 3.25rem; padding: 0.6rem 1.35rem; border-radius: 999px;
  color: #fff; text-decoration: none; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em;
  transition: transform 0.5s var(--ease), opacity 0.4s;
  --focus: #f1d994;
}
.float-cta svg { width: 1.1rem; height: 1.1rem; color: var(--brass-soft); flex: none; }
.float-cta:hover { transform: translateY(-3px); }
.float-cta.is-hidden { opacity: 0; transform: translateY(1rem); pointer-events: none; visibility: hidden; }
@media (max-width: 519px) { .float-cta { padding-inline: 1.1rem; font-size: 0.88rem; } }

/* ---------- Scroll reveal (visible by default; JS opts elements in) ---------- */
.js .reveal.is-pending { opacity: 0; transform: translateY(22px); }
.js .reveal-img.is-pending { opacity: 0; transform: scale(1.04); }
.reveal, .reveal-img { transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.project-card.reveal { transition: opacity 0.9s var(--ease), transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }

/* ---------- Project page ---------- */
.crumbs { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; }
.crumbs a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; text-decoration: none; color: rgba(255, 255, 255, 0.9); }
.crumbs a:hover { color: var(--brass-soft); }
.crumbs svg { width: 1em; height: 1em; }
.hero--project .hero-inner { grid-template-columns: 1fr; align-items: end; gap: 2rem; justify-items: stretch; padding-block: clamp(8rem, 15vw, 11rem) clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 960px) { .hero--project .hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }
.hero--project .hero-text { display: grid; gap: 1.25rem; justify-items: start; }
.hero--project h1 { max-width: 12ch; font-size: clamp(3.2rem, 1.6rem + 7vw, 7rem); }
.hero--project .hero-scrim {
  background:
    linear-gradient(90deg, rgba(7, 22, 43, 0.82) 0%, rgba(7, 22, 43, 0.5) 50%, rgba(7, 22, 43, 0.12) 100%),
    linear-gradient(180deg, rgba(7, 22, 43, 0.6) 0%, rgba(7, 22, 43, 0) 30%, rgba(7, 22, 43, 0) 55%, rgba(7, 22, 43, 0.7) 100%);
}
.fact-panel { border-radius: var(--radius); padding: clamp(1.25rem, 2.5vw, 2rem); display: grid; gap: 0; }
.fact-panel h2 { font: 700 0.72rem/1.3 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-soft); padding-bottom: 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.fact-panel dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.fact-panel dl > div:last-child { border-bottom: 0; padding-bottom: 0.25rem; }
.fact-panel dt { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); }
.fact-panel dd { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.1rem); line-height: 1.1; text-align: right; font-variant-numeric: lining-nums; }
.fact-panel dd.is-text { font-family: var(--sans); font-size: 1rem; font-weight: 600; }

.overview { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 960px) { .overview { grid-template-columns: 5fr 7fr; align-items: start; } }
.overview-copy { display: grid; gap: 1.25rem; color: var(--text-soft); font-size: 1.08rem; max-width: 40rem; }
.overview-copy strong { color: var(--text); }

.gallery { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(200px, 27vw, 380px); gap: clamp(0.6rem, 1.4vw, 1.1rem); }
.gallery figure { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--navy-900); }
.gallery a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gallery a:hover img { transform: scale(1.05); }
.gallery figcaption { position: absolute; left: 0.75rem; bottom: 0.75rem; right: 0.75rem; padding: 0.45rem 0.9rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; width: fit-content; max-width: calc(100% - 1.5rem); opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.5s var(--ease); pointer-events: none; }
.gallery figure:hover figcaption, .gallery a:focus-visible + figcaption { opacity: 1; transform: none; }
.g1 { grid-column: span 8; } .g2 { grid-column: span 4; }
.g3, .g4, .g5 { grid-column: span 4; }
.g6, .g7 { grid-column: span 6; }
@media (max-width: 859px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(150px, 38vw, 300px); }
  .g1 { grid-column: 1 / -1; grid-row: span 1; }
  .g2, .g3, .g4, .g5, .g6 { grid-column: span 1; }
  .g7 { grid-column: 1 / -1; }
  .gallery figcaption { display: none; }
}
@media (max-width: 519px) {
  .gallery { grid-template-columns: 1fr; grid-auto-rows: clamp(200px, 62vw, 300px); }
  .g1, .g2, .g3, .g4, .g5, .g6, .g7 { grid-column: 1 / -1; }
}
.gallery-note { margin-top: 1rem; color: var(--text-soft); font-size: 0.88rem; }

.lightbox { border: 0; padding: 0; background: transparent; max-width: min(94vw, 1300px); max-height: 94vh; color: #fff; overflow: visible; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox img { max-width: 100%; max-height: 82vh; width: auto; height: auto; margin-inline: auto; border-radius: var(--radius-sm); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.lightbox p { text-align: center; margin-top: 0.9rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.9); }
.lightbox-close { position: absolute; right: 0; top: -3.5rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0 1.1rem; border-radius: 999px; cursor: pointer; font: 700 0.88rem var(--sans); color: #fff; --focus: #f1d994; }

.offering-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 960px) { .offering-grid { grid-template-columns: 5fr 6fr; align-items: start; } }
.offering-copy { display: grid; gap: 1.25rem; align-content: start; }
.offering-copy .lede { max-width: 30rem; }
.back-row { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 0.5rem; }
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.related-grid .project-card { min-height: clamp(440px, 40vw, 540px); }
@media (max-width: 859px) { .related-grid { grid-template-columns: 1fr; } }

/* ---------- Fine-tuning ---------- */
@media (max-width: 519px) {
  .hero-actions .btn { width: 100%; }
  .hero-pill { border-radius: 22px; }
  .stat .num { font-size: clamp(2.9rem, 14vw, 3.6rem); }
  .sale { grid-template-columns: 1fr; }
  .sale-right { justify-items: start; grid-auto-flow: column; justify-content: space-between; align-items: center; }
  .sale .price-sm { text-align: left; }
  .listing .btn { width: 100%; }
}
@media print { .site-header, .float-cta { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

@media (max-width: 859px) {
  .hero-scrim, .hero--project .hero-scrim {
    background:
      linear-gradient(180deg, rgba(7, 22, 43, 0.62) 0%, rgba(7, 22, 43, 0.6) 55%, rgba(7, 22, 43, 0.82) 100%);
  }
}

.float-cta { white-space: nowrap; }
@media (max-width: 859px) {
  .project-card::after {
    background: linear-gradient(180deg, rgba(7, 22, 43, 0.25) 0%, rgba(7, 22, 43, 0.4) 28%, rgba(7, 22, 43, 0.74) 55%, rgba(7, 22, 43, 0.93) 100%);
  }
}
@media (max-width: 959px) { .sales-grid { row-gap: 2.75rem; } }
.nav:has(.nav-links.is-open) { --glass-tint: rgba(9, 9, 11, 0.93); }
.monogram { margin-top: 1.25rem; padding-bottom: 0.25rem; }
@media (max-width: 959px) { .monogram { font-size: clamp(5rem, 4rem + 8vw, 8rem); } }

/* ==========================================================================
   Luxury package: Sea Glass accents, chips, glass panels, floating labels
   ========================================================================== */

/* Links use Proudhouse Blue (Sea Glass on dark surfaces) */
.link-arrow { color: var(--link); }
.on-dark .link-arrow, .hero .link-arrow { color: var(--sea); }
.info-block a:hover, .footer-col a:hover { color: var(--link); }
.on-dark .info-block a:hover, .footer-col a:hover { color: var(--sea); }

/* Glass edge gets a faint Sea Glass tint */
.glass {
  border-color: rgba(190, 240, 236, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(241, 217, 148, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 14px 34px -10px rgba(0, 0, 0, 0.45),
    0 34px 60px -30px rgba(0, 0, 0, 0.35);
}

/* Nav: firms up on scroll, Sea Glass active states */
.nav { transition: background-color 0.4s, box-shadow 0.4s, -webkit-backdrop-filter 0.4s, backdrop-filter 0.4s; }
.site-header.is-scrolled .nav {
  --glass-tint: rgba(8, 8, 10, 0.88);
  -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 1px 2px rgba(0, 0, 0, 0.3), 0 22px 44px -14px rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: dark) { .site-header.is-scrolled .nav { --glass-tint: rgba(24, 24, 28, 0.9); } }
.nav-links .nav-link:hover, .nav-phone:hover { background: rgba(241, 217, 148, 0.16); }
.nav-links .nav-link[aria-current] { color: var(--sea); background: rgba(241, 217, 148, 0.12); }
.nav-links .nav-link.is-active { color: var(--sea); background: rgba(241, 217, 148, 0.12); }
.nav-phone:hover { background: #f6e2a8; }
.nav-toggle[aria-expanded="true"] { background: rgba(241, 217, 148, 0.2); border-color: rgba(241, 217, 148, 0.6); }

/* Buttons: solid brass, glass outline, text link with arrow */
.btn--ghost { backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.on-dark .btn--ghost, .hero .btn--ghost { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); }
.on-dark .btn--ghost:hover, .hero .btn--ghost:hover { background: rgba(241, 217, 148, 0.18); border-color: var(--sea); }
.btn::after { /* sheen sweep */
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%); transition: transform 0.9s var(--ease);
}
.btn:hover::after { transform: translateX(130%); }

/* Status chips */
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; padding: 0.32rem 0.9rem; border-radius: 999px;
  font: 700 0.7rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent;
}
.chip::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; flex: none; }
.chip--available { background: var(--sea); color: var(--navy-950); }
.chip--sold { border-color: var(--brass); color: var(--accent-text); }
.chip--planning { border-color: rgba(241, 217, 148, 0.7); color: var(--sea); background: rgba(241, 217, 148, 0.1); }
.chip--request { border-color: var(--brass); color: var(--brass); background: rgba(220, 181, 90, 0.1); }
.on-dark .chip--sold { color: #f1d994; }
/* on light surfaces, use the AA-safe darker tones */
.path .chip--planning, .path .chip--request { color: var(--accent-text); }
.path .chip--request { background: rgba(220, 181, 90, 0.14); }
.card-chip {
  position: absolute; top: 1.15rem; left: 1.15rem; z-index: 3; color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02)), rgba(8, 8, 10, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  border-color: rgba(255, 255, 255, 0.26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.card-chip::before { background: var(--brass); }
.card-chip.chip--planning::before { background: var(--sea); }
.fact-panel .chip--planning { font-size: 0.72rem; }

/* Large numerals with thin brass rules */
.stat::before { content: ""; width: 2.75rem; height: 1px; background: var(--brass); margin-bottom: 0.9rem; }
.facts > div { border-left-color: rgba(220, 181, 90, 0.35); }
.facts dd:not(.is-text) { font-size: 1.55rem; }
.fact-panel dl > div { border-bottom-color: rgba(220, 181, 90, 0.32); }
.fact-panel h2 { border-bottom-color: rgba(220, 181, 90, 0.5); color: var(--brass); }
.fact-panel dd:not(.is-text) { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.7rem); }
.price::after { content: ""; display: block; width: 3rem; height: 1px; background: var(--brass); margin-top: 1rem; }
.value-num, .steps li::before { color: var(--accent-text); }

/* Cards: lift + sheen, slower image zoom */
.card-media img { transition: transform 1.8s var(--ease); }
.project-card:hover .card-media img { transform: scale(1.06); }
.path, .listing { transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.path:hover, .listing:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 34px 60px -26px rgba(0, 0, 0, 0.45); }
.path::after, .listing::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 62%); transition: transform 1.2s var(--ease);
}
.path { position: relative; }
.path:hover::after, .listing:hover::after { transform: translateX(130%); }
.project-card.reveal.is-pending { transform: translateY(22px); }

/* Aurora backdrop so glass panels read on light sections */
.aurora { overflow: hidden; isolation: isolate; }
.aurora::before {
  content: ""; position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 45% at 85% 20%, rgba(241, 217, 148, 0.32), transparent 70%),
    radial-gradient(38% 42% at 10% 85%, rgba(220, 181, 90, 0.1), transparent 70%),
    radial-gradient(30% 35% at 60% 100%, rgba(220, 181, 90, 0.28), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  .aurora::before {
    background:
      radial-gradient(40% 45% at 85% 20%, rgba(241, 217, 148, 0.14), transparent 70%),
      radial-gradient(38% 42% at 10% 85%, rgba(220, 181, 90, 0.45), transparent 70%),
      radial-gradient(30% 35% at 60% 100%, rgba(220, 181, 90, 0.12), transparent 70%);
  }
}

/* Glass form panel */
.glass-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5));
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(14, 14, 16, 0.04), 0 1px 2px rgba(14, 14, 16, 0.08), 0 30px 60px -28px rgba(14, 14, 16, 0.35);
}
.glass-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 38%; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); }
.glass-panel > * { position: relative; }
@media (prefers-color-scheme: dark) {
  .glass-panel {
    background: linear-gradient(160deg, rgba(24, 24, 28, 0.78), rgba(24, 24, 28, 0.5));
    border-color: rgba(190, 240, 236, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.4), 0 30px 60px -28px rgba(0, 0, 0, 0.7);
  }
  .glass-panel::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-panel { background: var(--surface); }
  .card-chip { background: rgba(8, 8, 10, 0.9); }
  .btn--ghost { backdrop-filter: none; }
}

/* Floating labels + brass focus ring */
.field { position: relative; }
.field input, .field select, .field textarea { padding: 1.45rem 1rem 0.5rem; min-height: 3.5rem; }
.field textarea { padding-top: 1.7rem; min-height: 8rem; }
.field label {
  position: absolute; left: 1rem; top: 1.05rem; margin: 0; max-width: calc(100% - 2rem); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 500; font-size: 1rem; line-height: 1.3; letter-spacing: 0; color: var(--text-soft); transform-origin: left top;
  transition: transform 0.25s var(--ease), color 0.25s;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select + label {
  transform: translateY(-0.72rem) scale(0.78); font-weight: 700; letter-spacing: 0.02em; color: var(--accent-text);
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23dcb55a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 0.8rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid transparent; border-color: var(--accent-text);
  box-shadow: 0 0 0 4px rgba(220, 181, 90, 0.5), 0 8px 20px -10px rgba(220, 181, 90, 0.8);
}
@media (prefers-color-scheme: dark) {
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--brass); box-shadow: 0 0 0 4px rgba(220, 181, 90, 0.42), 0 8px 20px -10px rgba(220, 181, 90, 0.7); }
}
.form-note { color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) { .field label { transition: none; } }


/* Brand logo: the supplied logo is shown unaltered (original colors) on a frosted ivory plate so it stays legible over photos and in dark mode. */
.brand-plate { display: inline-flex; align-items: center; padding: 0.3rem 0.7rem; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 6px 18px rgba(8, 8, 10, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.brand-plate img { display: block; height: 2.35rem; width: auto; }
.footer-brand .brand-plate img { height: 2.9rem; }
@media (max-width: 760px) { .brand-plate img { height: 2rem; } }

/* ==========================================================================
   Black and gold finish: one deliberate dark theme, clean surfaces, champagne
   gold accents, smoked-glass panels with a fine gold edge. Overrides above.
   ========================================================================== */
html { color-scheme: dark; }
body { background: var(--bg); color: var(--text); }
::selection { background: rgba(220, 181, 90, 0.35); color: #fff; }
.section--alt { background: var(--bg-alt); position: relative; }
.section--alt::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(220, 181, 90, 0.55), transparent); }
.eyebrow::before { background: linear-gradient(90deg, var(--brass), rgba(220, 181, 90, 0)); }

/* Metallic gold buttons, quiet gold-outline ghost buttons */
.btn--primary {
  background: linear-gradient(180deg, #f6e2a8 0%, #e6c670 38%, #cfa443 72%, #b88a2c 100%);
  color: #050505;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(120, 84, 10, 0.35), 0 10px 26px -10px rgba(220, 181, 90, 0.55);
}
.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(120, 84, 10, 0.35), 0 16px 34px -10px rgba(220, 181, 90, 0.7); }
.btn--ghost, .on-dark .btn--ghost, .hero .btn--ghost { color: #f4f0e6; border-color: rgba(230, 198, 112, 0.55); background: rgba(255, 255, 255, 0.04); }
.btn--ghost:hover, .on-dark .btn--ghost:hover, .hero .btn--ghost:hover { background: rgba(230, 198, 112, 0.14); border-color: #f1d994; }
.nav-phone { background: linear-gradient(180deg, #f6e2a8, #e6c670 50%, #c9a03f); color: #050505; }
.nav-phone:hover { background: linear-gradient(180deg, #fbeec0, #efd180 50%, #d6ad4a); }
.nav-links .nav-link:hover { background: rgba(230, 198, 112, 0.14); }
.nav-links .nav-link[aria-current], .nav-links .nav-link.is-active { color: #f1d994; background: rgba(230, 198, 112, 0.14); }

/* Display italics in gold */
h1 em, h2 em, .hero h1 em, .hero h2 em, .on-dark h1 em, .on-dark h2 em {
  background: linear-gradient(100deg, #f6e2a8 0%, #e0b85a 55%, #c19a3e 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-right: 0.06em;
}
.pull { color: var(--brass-soft); }
.value-num, .steps li::before { color: var(--brass); }

/* Status chips */
.chip--available, .badge--avail { background: linear-gradient(180deg, #f1d994, #dcb55a); color: #050505; border-color: transparent; }
.chip--planning { border-color: rgba(241, 217, 148, 0.7); color: #f1d994; background: rgba(241, 217, 148, 0.1); }

/* Glass: smoked black with a fine gold edge */
.glass { border-color: rgba(230, 198, 112, 0.3); }
.glass:not(.listing):not(.path)::after, .glass-panel::after, .fact-panel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(135deg, rgba(246, 226, 168, 0.85), rgba(230, 198, 112, 0.18) 38%, rgba(255, 255, 255, 0.04) 60%, rgba(230, 198, 112, 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite: exclude;
}
.glass-panel {
  position: relative;
  background: linear-gradient(160deg, rgba(30, 30, 35, 0.78), rgba(10, 10, 12, 0.6));
  border: 1px solid rgba(230, 198, 112, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.5), 0 30px 60px -28px rgba(0, 0, 0, 0.85);
}
.glass-panel::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); }
.aurora::before {
  background:
    radial-gradient(40% 45% at 85% 20%, rgba(220, 181, 90, 0.16), transparent 70%),
    radial-gradient(38% 42% at 10% 85%, rgba(184, 138, 44, 0.12), transparent 70%),
    radial-gradient(30% 35% at 60% 100%, rgba(241, 217, 148, 0.08), transparent 70%);
}
.site-header.is-scrolled .nav { --glass-tint: rgba(8, 8, 10, 0.88); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-panel { background: var(--surface); } }

/* Depth on dark bands: a soft gold glow, nothing busy */
.stats, .section--band, .partners { background-image: radial-gradient(55% 90% at 12% 0%, rgba(220, 181, 90, 0.09), transparent 70%); background-color: var(--band); }
.stat::before, .price::after { background: linear-gradient(90deg, var(--brass), rgba(220, 181, 90, 0)); }
.leader-card { border-left: 2px solid var(--brass); border-image: none; }
.path, .form-card { background: var(--surface); border-color: rgba(230, 198, 112, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 48px -24px rgba(0, 0, 0, 0.8); }
.field input, .field select, .field textarea { color: var(--text); }
.field select option { background: #141417; color: #f4f0e6; }

/* ==========================================================================
   Brand balance: black and gold lead, the logo's blue and green are the supporting
   accents (roughly 60% black, 25% gold, 15% logo blue and green together).
   Gold: buttons, numerals, headline italics. Blue: links, focus, in-development.
   Green: available, success. Both appear in the fine glass edge and brand rule.
   ========================================================================== */
:root {
  --blue: #2f6fd0;       /* logo blue, fills and glows */
  --blue-soft: #8db8f3;  /* logo blue tone for text on black (AA) */
  --leaf: #34b45a;       /* logo green, fills and glows */
  --leaf-soft: #86dba0;  /* logo green tone for text on black (AA) */
  --focus: #8db8f3;
  --link: #8db8f3;
}

/* Brand rule: a hairline in blue, gold and green between sections */
.section--alt::before { background: linear-gradient(90deg, transparent, rgba(47, 111, 208, 0.7) 18%, rgba(220, 181, 90, 0.85) 50%, rgba(52, 180, 90, 0.7) 82%, transparent); }
.site-footer { position: relative; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(47, 111, 208, 0.7) 18%, rgba(220, 181, 90, 0.85) 50%, rgba(52, 180, 90, 0.7) 82%, transparent); }

/* Links and focus in logo blue, hovers stay gold */
.overview-copy a, .lede a, .form-fine a, .form-note a, .gallery-note a { color: var(--blue-soft); text-decoration-color: rgba(141, 184, 243, 0.5); }
.link-arrow { color: var(--brass-soft); }
.footer-col a:hover, .info-block a:hover { color: var(--brass-soft); }
:focus-visible { outline-color: var(--focus); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-color: var(--blue-soft); }

/* Status chips: Available in logo green, In development in logo blue, Sold and Request in gold */
.chip--available, .badge--avail { background: linear-gradient(180deg, #5fd283, var(--leaf)); color: #04180b; border-color: transparent; }
.chip--planning { border-color: rgba(141, 184, 243, 0.75); color: var(--blue-soft); background: rgba(47, 111, 208, 0.18); }
.card-chip.chip--planning::before { background: var(--blue-soft); }
.chip--available::before, .badge--avail::before { background: #04180b; }

/* Glass edge: gold leads, a touch of blue and green catches the light */
.glass:not(.listing):not(.path)::after, .glass-panel::after, .fact-panel::after {
  background: linear-gradient(135deg, rgba(246, 226, 168, 0.85) 0%, rgba(79, 143, 224, 0.4) 34%, rgba(255, 255, 255, 0.04) 55%, rgba(52, 180, 90, 0.42) 80%, rgba(230, 198, 112, 0.55) 100%);
}

/* Depth: soft blue and green glows over black, gold stays the brightest */
.aurora::before {
  background:
    radial-gradient(40% 45% at 85% 20%, rgba(220, 181, 90, 0.16), transparent 70%),
    radial-gradient(38% 42% at 8% 85%, rgba(47, 111, 208, 0.22), transparent 70%),
    radial-gradient(30% 35% at 60% 105%, rgba(52, 180, 90, 0.14), transparent 70%);
}
.stats, .section--band, .partners {
  background-image:
    radial-gradient(50% 90% at 10% 0%, rgba(47, 111, 208, 0.2), transparent 70%),
    radial-gradient(40% 80% at 95% 100%, rgba(52, 180, 90, 0.1), transparent 70%),
    radial-gradient(45% 70% at 60% 0%, rgba(220, 181, 90, 0.07), transparent 70%);
  background-color: var(--band);
}
.hero-pill .dot { background: var(--leaf); box-shadow: 0 0 0 4px rgba(52, 180, 90, 0.22); }
.nav-links .nav-link:hover { background: rgba(47, 111, 208, 0.2); }
.leader-card { border-left-color: transparent; border-image: linear-gradient(180deg, #f1d994, #2f6fd0 55%, #34b45a) 1; }
.lightbox-close:focus-visible { outline-color: var(--blue-soft); }

/* Larger header logo: full size at the top of the page, a little smaller once you scroll */
.nav { min-height: 4.9rem; padding: 0.5rem 0.65rem 0.5rem 0.6rem; gap: 1.25rem; transition: min-height 0.35s var(--ease), background-color 0.4s, box-shadow 0.4s, -webkit-backdrop-filter 0.4s, backdrop-filter 0.4s; }
.brand { padding: 0; }
.brand-plate { padding: 0.35rem 0.85rem; border-radius: 1.05rem; transition: padding 0.35s var(--ease); }
.brand-plate img { height: 3.6rem; transition: height 0.35s var(--ease); }
.site-header.is-scrolled .nav { min-height: 4.1rem; }
.site-header.is-scrolled .brand-plate img { height: 2.95rem; }
.footer-brand .brand-plate img { height: 4.6rem; }
@media (max-width: 999px) { .nav { min-height: 4.4rem; } .brand-plate img { height: 3.1rem; } .site-header.is-scrolled .brand-plate img { height: 2.7rem; } }
@media (max-width: 519px) { .nav { min-height: 4.1rem; padding-left: 0.5rem; } .brand-plate { padding: 0.3rem 0.65rem; } .brand-plate img { height: 2.7rem; } .site-header.is-scrolled .brand-plate img { height: 2.4rem; } .footer-brand .brand-plate img { height: 3.8rem; } }
.hero-inner { padding-top: clamp(9rem, 14vw, 11rem); }

/* Fluid scale: the whole layout grows with the screen. Content spans the full width (side space grows gently),
   and type, spacing and controls scale from phones up to large monitors. */
html { font-size: clamp(16px, 0.35vw + 12px, 21px); }
.container { max-width: min(100%, calc(var(--max) + var(--gutter) * 2)); }
@media (min-width: 1500px) {
  .projects-grid, .related-grid { gap: clamp(1.25rem, 1.6vw, 2.5rem); }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1900px) {
  .section { padding-block: clamp(6rem, 7vw, 10rem); }
}

/* ==========================================================================
   Proudhouse tri-tone: black and gold stay the signature. Plain sections turn white
   so the logo's blue and green are clearly visible, then alternate with the black
   sections (alt, band, aurora). Light sections use the logo blue for labels and
   links, a blue to green gradient on display italics, and a blue-green-gold rule.
   ========================================================================== */
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) {
  --bg: #ffffff;
  --bg-alt: #f2f6fb;
  --surface: #ffffff;
  --text: #0b0b0c;
  --text-soft: #46505e;
  --accent-text: #1a56b0;
  --line: rgba(12, 12, 14, 0.14);
  --link: #1a56b0;
  --focus: #1a56b0;
  --field-bg: #ffffff;
  --field-line: rgba(12, 12, 14, 0.34);
  color-scheme: light;
  color: var(--text);
  background:
    radial-gradient(55% 45% at 100% 0%, rgba(26, 86, 176, 0.07), transparent 70%),
    radial-gradient(45% 40% at 0% 100%, rgba(52, 180, 90, 0.07), transparent 70%),
    #ffffff;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #1a56b0 0%, #34b45a 55%, #dcb55a 100%) 1;
}
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) .eyebrow::before { background: linear-gradient(90deg, #1a56b0, #34b45a); }
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) h1 em,
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) h2 em {
  background: linear-gradient(100deg, #1a56b0 0%, #1f9a4b 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) .pull { color: var(--text); border-left-color: var(--brass); }
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) .value-num,
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) .steps li::before { color: #1a56b0; }
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) .btn--ghost { color: #0b0b0c; border-color: rgba(12, 12, 14, 0.5); background: transparent; }
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) .btn--ghost:hover { background: rgba(26, 86, 176, 0.08); border-color: #1a56b0; }
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) .link-arrow { color: #1a56b0; }
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) .path { background: #fff; border-color: rgba(26, 86, 176, 0.18); box-shadow: 0 1px 2px rgba(12, 12, 14, 0.06), 0 26px 50px -26px rgba(26, 86, 176, 0.32); }
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) .chip--sold,
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) .chip--request { color: #7a5a14; border-color: #b88a2c; background: rgba(220, 181, 90, 0.14); }
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) .chip--planning { color: #1a56b0; border-color: rgba(26, 86, 176, 0.6); background: rgba(26, 86, 176, 0.08); }
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) .field input,
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) .field select,
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) .field textarea { background: #fff; color: #0b0b0c; border-color: rgba(12, 12, 14, 0.34); }
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) .partner-list li { color: var(--text); }
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) .monogram { -webkit-text-stroke-color: rgba(26, 86, 176, 0.45); }
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) .leader-card { border-image: linear-gradient(180deg, #1a56b0, #34b45a 60%, #dcb55a) 1; }

/* Dark sections: logo blue and green read stronger on black */
.section--alt::before, .site-footer::before { height: 2px; background: linear-gradient(90deg, transparent, #2f6fd0 16%, #dcb55a 50%, #34b45a 84%, transparent); }
.stats, .section--band, .partners {
  background-image:
    radial-gradient(50% 95% at 8% 0%, rgba(47, 111, 208, 0.32), transparent 70%),
    radial-gradient(42% 85% at 96% 100%, rgba(52, 180, 90, 0.18), transparent 70%),
    radial-gradient(40% 60% at 55% 0%, rgba(220, 181, 90, 0.08), transparent 70%);
}

/* Shared footer rows (legal links, copyright) and a compact one-row header on phones */
.footer-grid { }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.2fr 1.4fr 1fr; } }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0 1.75rem; padding-top: 1.25rem; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text-soft); text-decoration: none; font-size: 0.9rem; }
.footer-legal a:hover { color: var(--brass-soft); }
.footer-base { padding-top: 0.5rem; color: var(--text-soft); font-size: 0.85rem; }
@media (max-width: 859px) { .footer-base { padding-bottom: 4.5rem; } }
@media (max-width: 559px) {
  .nav { flex-wrap: wrap; gap: 0.5rem; }
  .nav-phone-text { display: none; }
  .nav-phone { padding: 0.4rem 0.8rem; min-width: 2.75rem; justify-content: center; }
  .nav-toggle { padding: 0 0.9rem; }
  .brand-plate img { height: 2.35rem; }
  .site-header.is-scrolled .brand-plate img { height: 2.1rem; }
}

/* Status chips sitting on photos stay readable: smoked glass behind blue and gold labels */
.card-chip { background: rgba(8, 8, 10, 0.72); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); }
.card-chip.chip--planning { color: var(--blue-soft); border-color: rgba(141, 184, 243, 0.8); }

/* ==========================================================================
   Header v2: slim contact bar, glass navigation with concentric logo plate,
   gold underline hovers, a rich Projects menu with photos, an About menu,
   and a clean accordion on phones.
   ========================================================================== */
:root { --topbar-h: 2.6rem; }
.site-header { padding: 0; }
.topbar {
  pointer-events: auto; max-height: var(--topbar-h); overflow: hidden; position: relative;
  background: linear-gradient(180deg, rgba(4, 4, 5, 0.94), rgba(8, 8, 10, 0.8));
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  transition: max-height 0.4s var(--ease), opacity 0.3s;
}
.topbar::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(47, 111, 208, 0.7) 14%, rgba(246, 226, 168, 0.9) 50%, rgba(52, 180, 90, 0.7) 86%, transparent); }
.site-header.is-scrolled .topbar { max-height: 0; opacity: 0; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--topbar-h); }
.topbar-tag { font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: var(--brass-soft); letter-spacing: 0.01em; }
.topbar-info { display: flex; align-items: center; gap: 1.75rem; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--text-soft); }
.topbar-info li { display: inline-flex; align-items: center; gap: 0.5rem; }
.topbar-info svg { width: 0.95rem; height: 0.95rem; color: var(--brass); flex: none; }
.topbar-info a { color: #f4f0e6; font-weight: 700; text-decoration: none; letter-spacing: 0.05em; }
.topbar-info a:hover { color: var(--brass-soft); }

.nav-shell { padding: 0.7rem var(--gutter) 0; pointer-events: none; transition: padding 0.35s var(--ease); }
.site-header.is-scrolled .nav-shell { padding-top: 0.5rem; }
.nav { border-radius: 1.65rem; min-height: 5.1rem; padding: 0.55rem 0.7rem 0.55rem 0.55rem; gap: 1.1rem; position: relative; }
.brand { padding: 0; margin-right: 0; flex: none; }
.brand-plate { border-radius: 1.1rem; padding: 0.35rem 0.9rem; }
.brand-plate img { height: 3.6rem; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 0.1rem; }
.nav-item { display: flex; align-items: center; position: relative; }
.nav-item.has-mega { position: static; }
.nav-links .nav-link {
  position: relative; display: inline-flex; align-items: center; min-height: 2.9rem; padding: 0.4rem 1rem; border-radius: 999px;
  color: #f4f0e6; text-decoration: none; font-size: 0.93rem; font-weight: 600; letter-spacing: 0.035em; background: transparent;
  transition: color 0.25s;
}
.nav-links .nav-link::after {
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0.38rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #f6e2a8, #dcb55a 60%, rgba(220, 181, 90, 0.2));
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
}
.nav-links .nav-link:hover, .nav-links .nav-link:focus-visible, .nav-item:hover > .nav-link { background: transparent; color: #fff; }
.nav-links .nav-link:hover::after, .nav-item:hover > .nav-link::after, .nav-links .nav-link[aria-current]::after, .nav-links .nav-link.is-active::after { transform: scaleX(1); }
.nav-links .nav-link[aria-current], .nav-links .nav-link.is-active { color: #f6e2a8; background: transparent; }
.nav-sub-toggle {
  appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: var(--brass); cursor: pointer;
  width: 1.7rem; height: 2.9rem; margin-left: -0.85rem; margin-right: 0.15rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
}
.nav-sub-toggle svg { width: 0.75rem; height: 0.75rem; transition: transform 0.35s var(--ease); }
.nav-item:hover > .nav-sub-toggle svg, .nav-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-sub-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.nav-phone { margin-left: 0.35rem; padding-inline: 1.25rem; min-height: 3rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 24px -10px rgba(220, 181, 90, 0.7); }

/* Rich menus */
.mega, .submenu {
  display: none; position: absolute; top: calc(100% + 0.75rem); z-index: 5; border-radius: 1.6rem; padding: 1.1rem;
  background: linear-gradient(180deg, rgba(26, 26, 30, 0.97), rgba(8, 8, 10, 0.98));
  border: 1px solid rgba(230, 198, 112, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 44px 80px -32px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.mega::before, .submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.95rem; height: 0.95rem; } /* hover bridge */
.mega { left: 50%; width: min(1040px, calc(100vw - 2 * var(--gutter))); transform: translateX(-50%); }
.submenu { left: 50%; width: 20.5rem; transform: translateX(-50%); padding: 0.6rem; }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.mega-card { position: relative; display: grid; grid-template-rows: 9.5rem auto; border-radius: 1.15rem; overflow: hidden; text-decoration: none; color: #fff; background: #0d0d0f; border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.5s var(--ease), border-color 0.3s, box-shadow 0.5s var(--ease); }
.mega-card:hover, .mega-card:focus-visible { transform: translateY(-4px); border-color: rgba(230, 198, 112, 0.65); box-shadow: 0 24px 40px -22px rgba(220, 181, 90, 0.45); }
.mega-card[aria-current] { border-color: rgba(230, 198, 112, 0.7); }
.mc-media { position: relative; display: block; overflow: hidden; }
.mc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.mega-card:hover .mc-media img { transform: scale(1.08); }
.mc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55)); }
.mc-chip { position: absolute; top: 0.65rem; left: 0.65rem; z-index: 2; background: rgba(8, 8, 10, 0.72); }
.mc-body { display: grid; gap: 0.2rem; padding: 0.85rem 1rem 1rem; }
.mc-name { font-family: var(--serif); font-size: 1.55rem; line-height: 1.1; }
.mc-meta { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--text-soft); }
.mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 0.9rem 0.4rem 0.1rem; border-top: 1px solid rgba(230, 198, 112, 0.2); }
.mega-foot p { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--brass-soft); }
.mega-foot .link-arrow { color: #f1d994; }
.submenu a { display: grid; gap: 0.1rem; padding: 0.75rem 1rem; border-radius: 0.95rem; text-decoration: none; color: #f4f0e6; transition: background-color 0.25s, transform 0.3s var(--ease); }
.submenu a:hover, .submenu a:focus-visible { background: rgba(230, 198, 112, 0.13); transform: translateX(3px); }
.submenu a[aria-current] { background: rgba(230, 198, 112, 0.1); }
.submenu strong { font-size: 0.97rem; font-weight: 700; letter-spacing: 0.02em; }
.submenu small { font-size: 0.8rem; color: var(--text-soft); }
@keyframes menuIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.nav-item.is-open > .mega, .nav-item.is-open > .submenu { display: block; animation: menuIn 0.3s var(--ease) both; }
@media (min-width: 1000px) and (hover: hover) {
  .nav-item:hover > .mega, .nav-item:hover > .submenu, .nav-item:focus-within > .mega, .nav-item:focus-within > .submenu { display: block; animation: menuIn 0.3s var(--ease) both; }
}

/* The glass edge on the bar slowly catches the light */
@media (prefers-reduced-motion: no-preference) {
  .nav.glass::after { background-size: 220% 220%; animation: edgeFlow 14s ease-in-out infinite; }
  @keyframes edgeFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
}
.site-header.is-scrolled .nav { min-height: 4.2rem; }
.site-header.is-scrolled .brand-plate img { height: 2.95rem; }

/* Room for the contact bar above the first screen */
.hero-inner { padding-top: clamp(11rem, 15vw, 13rem); }
.hero--project .hero-inner, .hero--page .hero-inner, .hero--index .hero-inner { padding-top: clamp(11rem, 15vw, 13rem); }
[id] { scroll-margin-top: 7rem; }

@media (max-width: 999px) {
  .topbar-info li:not(:last-child) { display: none; }
  .nav { min-height: 4.5rem; padding-left: 0.5rem; flex-wrap: wrap; border-radius: 1.5rem; }
  .brand-plate img { height: 3.1rem; }
  .site-header.is-scrolled .brand-plate img { height: 2.7rem; }
  .nav-links { margin-left: 0; order: 5; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 0.35rem 0.4rem 0.8rem; }
  .nav-item, .nav-item.has-mega { position: relative; flex-wrap: wrap; align-items: center; }
  .nav-item > .nav-link { flex: 1 1 0; }
  .nav-links .nav-link { padding-inline: 0.9rem; font-size: 1.05rem; min-height: 3rem; border-radius: 0.9rem; }
  .nav-links .nav-link::after { left: 0.9rem; right: auto; width: 2rem; bottom: 0.45rem; }
  .nav-sub-toggle { margin: 0; width: 3rem; height: 3rem; border: 1px solid rgba(230, 198, 112, 0.35); }
  .mega, .submenu { position: static; transform: none; width: auto; flex-basis: 100%; padding: 0.35rem 0 0.6rem; background: none; border: 0; box-shadow: none; animation: none !important; }
  .mega::before, .submenu::before { content: none; }
  .mega-grid { grid-template-columns: 1fr; gap: 0.5rem; }
  .mega-card { grid-template-rows: none; grid-template-columns: 5.5rem 1fr; border-radius: 0.95rem; }
  .mc-media { height: 100%; min-height: 4.6rem; }
  .mc-chip, .mega-foot p { display: none; }
  .mc-name { font-size: 1.3rem; }
  .mega-foot { margin-top: 0.4rem; padding-top: 0.6rem; }
  .submenu a { padding: 0.65rem 0.9rem; }
}
@media (max-width: 759px) {
  .topbar { display: none; }
  .hero-inner, .hero--project .hero-inner, .hero--page .hero-inner, .hero--index .hero-inner { padding-top: clamp(8rem, 24vw, 9.5rem); }
}
.nav-item.is-dismissed > .mega, .nav-item.is-dismissed > .submenu { display: none !important; }
.site-header { --nav-gap: 1.85rem; }
.site-header.is-scrolled { --nav-gap: 1.4rem; }
.submenu { top: calc(100% + var(--nav-gap)); }
.submenu::before { top: calc(-1 * var(--nav-gap)); height: var(--nav-gap); }
@media (max-width: 999px) { .submenu { top: auto; } }
@media (max-width: 559px) {
  .nav { min-height: 4.1rem; gap: 0.5rem; padding: 0.45rem 0.55rem 0.45rem 0.45rem; }
  .brand-plate { padding: 0.28rem 0.65rem; border-radius: 0.95rem; }
  .brand-plate img { height: 2.55rem; }
  .site-header.is-scrolled .brand-plate img { height: 2.3rem; }
  .nav-phone { margin-left: auto; }
}

/* ==========================================================================
   Elevation pass: cinematic hero, featured glass card, expanding project
   showcase, count-up numbers, light that follows the cursor on glass, reading
   progress in the brand colors, and soft page transitions.
   ========================================================================== */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: 0.25s ease both fadeOutPage; }
  ::view-transition-new(root) { animation: 0.45s ease both fadeInPage; }
  @keyframes fadeOutPage { to { opacity: 0; } }
  @keyframes fadeInPage { from { opacity: 0; } }
}

/* Reading progress, in the logo's blue, gold and green */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 80; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #2f6fd0, #f1d994 55%, #34b45a); pointer-events: none; }

/* Hero: slow cinematic push-in, parallax, scroll cue */
.hero-media { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .hero-media img { animation: pushIn 32s ease-in-out infinite alternate; transform-origin: 60% 55%; }
  @keyframes pushIn { from { transform: scale(1.02); } to { transform: scale(1.12); } }
}
.scroll-cue { position: absolute; left: 50%; bottom: 1.4rem; z-index: 3; width: 1.6rem; height: 2.6rem; border: 1px solid rgba(246, 226, 168, 0.65); border-radius: 999px; transform: translateX(-50%); pointer-events: none; opacity: 0.85; }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 0.5rem; width: 3px; height: 0.5rem; margin-left: -1.5px; border-radius: 3px; background: #f1d994; }
@media (prefers-reduced-motion: no-preference) { .scroll-cue::after { animation: cue 2.2s ease-in-out infinite; } @keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(0.95rem); } } }
@media (max-width: 759px) { .scroll-cue { display: none; } }

/* Featured glass card on the home hero */
.hero-feature { position: absolute; right: var(--gutter); bottom: clamp(2.5rem, 6vw, 5rem); z-index: 3; width: min(23rem, 28vw); padding: 1.5rem 1.6rem 1.4rem; border-radius: 1.5rem; display: grid; gap: 0.7rem; justify-items: start; transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.hero-feature:hover { transform: translateY(-6px); }
.hf-name { font-family: var(--serif); font-size: clamp(1.9rem, 1.4rem + 1.2vw, 2.6rem); line-height: 1.05; color: #fff; text-decoration: none; }
.hf-meta { color: var(--text-soft); font-size: 0.92rem; letter-spacing: 0.03em; }
.hero-feature .link-arrow { color: #f1d994; }
@media (max-width: 1099px) { .hero-feature { display: none; } }

/* Project showcase: hover or focus a project and it opens up */
@media (min-width: 1000px) and (hover: hover) {
  .showcase { display: flex; gap: clamp(0.75rem, 1.2vw, 1.25rem); height: clamp(560px, 66vh, 740px); }
  .showcase .project-card, .showcase .project-card.reveal, .showcase .project-card--wide {
    grid-column: auto; flex: 1 1 0; min-width: 0; min-height: 0; height: 100%;
    transition: flex 0.9s var(--ease), opacity 0.9s var(--ease), transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
  }
  .showcase .project-card.is-active { flex: 2.7 1 0; }
  .showcase .project-card:hover { transform: none; }
  .showcase .card-desc, .showcase .facts, .showcase .card-cta { opacity: 0; transform: translateY(14px); max-height: 0; overflow: hidden; margin: 0; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), max-height 0.7s var(--ease); }
  .showcase .project-card.is-active .card-desc, .showcase .project-card.is-active .facts, .showcase .project-card.is-active .card-cta { opacity: 1; transform: none; max-height: 22rem; transition-delay: 0.25s; }
  .showcase .card-body h3 { font-size: clamp(1.7rem, 1.2rem + 1.1vw, 2.5rem); transition: font-size 0.6s var(--ease); }
  .showcase .project-card.is-active .card-body h3 { font-size: clamp(2.3rem, 1.5rem + 2vw, 3.4rem); }
  .showcase .card-body { padding-bottom: clamp(1.25rem, 2.4vw, 2.25rem); }
}

/* Light that follows the cursor across glass surfaces */
.spot { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgba(246, 226, 168, 0.16), rgba(246, 226, 168, 0) 62%); }
:hover > .spot { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .progress { display: none; } }
.form-card, .fact-panel { position: relative; }

/* Dark cards that sit inside white sections keep their own light-on-dark labels */
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) :is(.project-card, .listing, .glass, .mega-card) .chip--planning { color: var(--blue-soft); border-color: rgba(141, 184, 243, 0.8); background: rgba(47, 111, 208, 0.2); }
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) :is(.project-card, .listing, .glass, .mega-card) :is(.chip--request, .chip--sold) { color: #f1d994; border-color: rgba(230, 198, 112, 0.75); background: rgba(220, 181, 90, 0.14); }
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) :is(.project-card, .listing, .glass) .link-arrow { color: #f1d994; }
.section:not(.section--alt):not(.section--band):not(.aurora):not(.on-dark) :is(.project-card, .listing, .glass) .eyebrow { color: var(--brass-soft); }
.topbar-info a { display: inline-flex; align-items: center; min-height: var(--topbar-h); }
.sitemap-list a, .site-map a { display: inline-flex; align-items: center; min-height: 2.75rem; }
input[type="checkbox"] { width: 1.35rem; height: 1.35rem; accent-color: #dcb55a; }

/* Attention: the gold call button breathes, sends out a soft ring and rings its handset now and then.
   It stops while you hover and for visitors who prefer less motion. */
.topbar-cta { gap: 0.45rem; color: #f1d994 !important; }
.topbar-cta svg { width: 0.9rem; height: 0.9rem; transition: transform 0.35s var(--ease); }
.topbar-cta:hover svg { transform: translateX(4px); }
.nav-phone { position: relative; isolation: isolate; }
@media (prefers-reduced-motion: no-preference) {
  .nav-phone { animation: phoneBreath 2.8s ease-in-out infinite; }
  .nav-phone::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: 2px solid rgba(246, 226, 168, 0.85); pointer-events: none; animation: phoneRing 2.8s ease-out infinite; }
  .nav-phone svg { animation: phoneShake 5.6s ease-in-out infinite; transform-origin: 50% 55%; }
  .nav-phone:hover, .nav-phone:focus-visible { animation-play-state: paused; }
  .nav-phone:hover::before, .nav-phone:hover svg { animation-play-state: paused; }
  .float-cta { animation: phoneBreath 3.2s ease-in-out infinite; }
  .float-cta:hover { animation-play-state: paused; }
  .float-cta svg { animation: phoneShake 5.6s ease-in-out 1.2s infinite; transform-origin: 50% 55%; }
  @keyframes phoneBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
  @keyframes phoneRing { 0% { transform: scale(1); opacity: 0.9; } 65%, 100% { transform: scale(1.38, 1.75); opacity: 0; } }
  @keyframes phoneShake {
    0%, 84%, 100% { transform: rotate(0deg); }
    86% { transform: rotate(-16deg); } 88% { transform: rotate(14deg); } 90% { transform: rotate(-12deg); }
    92% { transform: rotate(9deg); } 94% { transform: rotate(-5deg); } 96% { transform: rotate(0deg); }
  }
}

/* Portraits are colored to the brand; keep them crisp and let them breathe */
.person-media img { filter: contrast(1.03) saturate(1.04); }

/* ==========================================================================
   Refined type scale: smaller, lighter, wider-tracked type reads as more
   luxurious. Headlines are quieter, labels are small and spaced, numbers are
   elegant instead of loud.
   ========================================================================== */
html { font-size: clamp(15px, 0.26vw + 11.8px, 18.5px); }
body { font-size: 0.97rem; line-height: 1.75; }
h1, h2, h3, .serif { font-weight: 500; }
h1 { font-size: clamp(2.3rem, 1.15rem + 3.5vw, 4.1rem); line-height: 1.04; letter-spacing: -0.012em; }
h2 { font-size: clamp(1.8rem, 1.15rem + 2vw, 2.85rem); line-height: 1.1; }
h3 { font-size: clamp(1.35rem, 1.1rem + 0.75vw, 1.8rem); line-height: 1.18; }
.hero--project h1 { font-size: clamp(2.7rem, 1.4rem + 4.6vw, 4.9rem); }
.lede { font-size: clamp(0.98rem, 0.93rem + 0.22vw, 1.12rem); }
.eyebrow { font-size: 0.68rem; letter-spacing: 0.28em; }
.hero-tagline, .topbar-tag { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.7rem); }
.topbar-tag { font-size: 1rem; }
.nav-links .nav-link { font-size: 0.86rem; letter-spacing: 0.06em; }
.nav-phone { font-size: 0.86rem; letter-spacing: 0.04em; }
.btn { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }
.stat .num { font-size: clamp(2.5rem, 1.6rem + 2.8vw, 3.9rem); font-weight: 500; }
.stat .label { font-size: 0.7rem; letter-spacing: 0.22em; }
.stat .sub { font-size: 0.85rem; }
.price { font-size: clamp(2.3rem, 1.6rem + 2.4vw, 3.5rem); }
.sale .price-sm { font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.8rem); }
.hf-name { font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem); }
.mc-name { font-size: 1.3rem; }
.card-body h3, .showcase .card-body h3 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); }
.showcase .project-card.is-active .card-body h3 { font-size: clamp(2rem, 1.4rem + 1.7vw, 3rem); }
@media (min-width: 1000px) and (hover: hover) { .showcase .card-body h3 { font-size: clamp(1.45rem, 1.1rem + 0.7vw, 1.9rem); } }
.facts dt, .fact-panel dt { font-size: 0.62rem; letter-spacing: 0.22em; }
.facts dd:not(.is-text) { font-size: 1.3rem; }
.fact-panel dd:not(.is-text) { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.value h3, .path h3, .person h3 { font-size: clamp(1.4rem, 1.15rem + 0.7vw, 1.85rem); }
.leader-card .leader-name { font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.8rem); }
.info-block a.big-phone { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem); }
.pull { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.65rem); }
.partner-list li { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); }
.monogram { font-size: clamp(5rem, 3.6rem + 6vw, 10rem); }
.footer-brand p { font-size: 1.2rem; }
.footer-col h2, .info-block h3, .fact-panel h2 { font-size: 0.66rem; letter-spacing: 0.26em; }
.mega-foot p { font-size: 1.05rem; }

/* Smaller body copy throughout: calm, even reading text under refined headlines */
body { font-size: 0.9rem; line-height: 1.78; }
body .lede { font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem); line-height: 1.7; }
body .card-desc { font-size: 0.92rem; }
body .steps span, body .value p, body .process p, body .stack p, body .person-body p:not(.person-role) { font-size: 0.88rem; line-height: 1.75; }
body .leader-card p { font-size: 0.94rem; }
body .overview-copy { font-size: 0.95rem; }
body .prose { font-size: 0.95rem; }
body .info-block a, body .info-block address, body .location-panel address { font-size: 0.98rem; }
body .hours div, body .hours-table, body .map-list p, body .check, body .form-note, body .form-fine, body .draft-note { font-size: 0.86rem; }
body .field input, body .field select, body .field textarea, body .field label { font-size: 0.92rem; }
body .faq summary { font-size: 0.98rem; }
body .person-role, body .footer-col a, body .footer-col address { font-size: 0.86rem; }
body .footer-legal a, body .footer-base { font-size: 0.8rem; }
body .sale p, body .sale h4 { font-size: 0.88rem; }
body .badge, body .chip { font-size: 0.64rem; letter-spacing: 0.16em; }
body .submenu strong { font-size: 0.9rem; } body .submenu small { font-size: 0.76rem; }
body .mc-meta { font-size: 0.76rem; }