/* ============================================================
   Botanica Luxury Villas — site design system
   (Editorial Luxury, re-tokenised to a foliage/stone palette.
    Structure and variable NAMES are inherited from the Mouana sheet;
    only :root values and the hard-coded rgb triplets changed.)
   ============================================================ */

/* Cormorant Garamond and Jost are served from our own origin. They used to come
   from Google Fonts, which put two third-party handshakes in front of them —
   googleapis for the CSS, then gstatic for the files — so the page was laid out
   in the system faces and reflowed once they landed. Three variable files, latin
   only, which is every character these pages render (checked against all
   thirteen built pages; the one exception is the baht sign, and BahtFix below
   has always handled that).

   font-display is `optional`, not the `swap` the Raleway pages use, and the
   difference is the point. On those pages Arial sits within 0.6% of Raleway and
   a metric-matched fallback holds every line break, so swapping moves nothing.
   Here it does not work: no size-adjust between 92% and 101% keeps both the
   47px Cormorant heading in the 466px column and the 12px Jost footer note on
   their own line counts, because what differs is the shape of the letters, not
   the total advance. Scaling the fallback to match the metrics actually made it
   worse — the largest shift on /about went from 50px to 78px, and on
   /rental-program from 86px to 103px, as more lines were pushed over a wrap
   boundary. `optional` removes the swap entirely: the face is either ready
   inside the block period and painted from the first frame, or it is not used
   for this page view at all and comes from cache on the next. Nothing reflows
   either way. The fallbacks below are still scaled, so the rare fallback render
   sits on the same baselines rather than looking like a different document. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url("/assets/fonts/cormorant-garamond-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 500;
  font-display: optional;
  src: url("/assets/fonts/cormorant-garamond-latin-italic-var.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 500;
  font-display: optional;
  src: url("/assets/fonts/jost-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* The faces still have to travel, so what they replace is pinned and scaled to
   their own metrics, and the overrides put the line boxes on the same baselines.
   The ratios are measured per weight against these pages' own text and then
   weighted by how many characters are actually set in each — a single figure
   taken at weight 400 was wrong for both, because the body copy is Jost 300 and
   the headings are Cormorant 500, and being 1% wide is enough to push a heading
   onto a second line and shove everything below it down by 33px.
   Cormorant vs Times New Roman: 97.1% at 300, 96.8% at 500.
   Jost vs Arial: 92.6% at 300, 93.6% at 400, 100.6% at 500 — the sans figure
   leans to the 300, since the long paragraphs are what wrap.
   Liberation Serif and Liberation Sans are the metric clones on Linux. */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Times New Roman"), local("Times"), local("Liberation Serif");
  size-adjust: 96.88%;
  ascent-override: 95.37%;
  descent-override: 29.62%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jost Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 92.95%;
  ascent-override: 115.12%;
  descent-override: 40.34%;
  line-gap-override: 0%;
}

/* Neither Cormorant Garamond nor Jost carries U+0E3F, so every ฿ on the site
   fell through to a system serif and rendered visibly larger and heavier than
   the digits beside it. This maps that one codepoint — and only that one — to a
   local grotesque, scaled down to sit level with Cormorant's figures. No extra
   font is downloaded: local() only, and anything with no match simply falls
   through to the next family in the stack as before. */
@font-face {
  font-family: "BahtFix";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial"),
       local("Liberation Sans"), local("Roboto"), local("Segoe UI");
  unicode-range: U+0E3F;
  /* 70% fitted against Cormorant's oldstyle figures by rendering the same
     price at a range of values and comparing cap heights; 78% still stood
     proud of the M, 64% read as a footnote. */
  size-adjust: 70%;
}

:root {
  --charcoal: #10160f;
  --espresso: #1a2318;
  --cream: #f5f3ec;
  --cream-2: #e6e7db;
  --ink: #1e2620;
  --ink-soft: #4e5a4c;
  --gold: #3f6b35;        /* readable accent on cream */
  --gold-soft: #8bb87a;   /* accent on dark */
  --gold-bright: #a4cd93;
  --sand: #b8c4a4;
  --hair: rgba(30, 38, 32, 0.12);
  --hair-light: rgba(245, 243, 236, 0.16);

  --serif: "BahtFix", "Cormorant Garamond", "Cormorant Fallback", "Times New Roman", Times, serif;
  --sans: "BahtFix", "Jost", "Jost Fallback", Arial, Helvetica, sans-serif;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --maxw: 1240px;
  --pad: clamp(1.25rem, 5vw, 4rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Form controls take their font from the UA, not from the page, so the
   lining figures set on body stop at every <button> — which is what the
   filter chips and their prices are. font-variant-numeric is not part of
   the font-family they are already given, so it has to be handed over on
   its own. */
button, input, select, textarea { font-variant-numeric: inherit; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  /* Cormorant Garamond defaults to old-style figures too — more visibly than
     Raleway, since its text figures are small as well as uneven. Jost is
     already lining, so this is a no-op there. See the note in landing.html:
     a rule that sets only tabular-nums would switch the lining set back off. */
  font-variant-numeric: lining-nums;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film-grain overlay (fixed, non-interactive) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--charcoal); color: var(--cream); padding: 0.75rem 1.25rem; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; }
.display { font-size: clamp(2.9rem, 8vw, 6.5rem); font-weight: 500; }
h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
p { font-weight: 300; }
em { font-style: italic; color: var(--gold); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.28em;
  color: var(--gold);
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(63, 107, 53, 0.05);
}
.eyebrow.on-dark { color: var(--gold-soft); border-color: var(--hair-light); background: rgba(139, 184, 122, 0.08); }
.eyebrow svg { width: 13px; height: 13px; flex: none; }

.lede { font-size: clamp(1.05rem, 2vw, 1.28rem); color: var(--ink-soft); max-width: 46ch; }
.on-dark .lede, .lede.on-dark { color: rgba(245, 243, 236, 0.72); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
section { padding-block: clamp(5rem, 12vw, 10rem); position: relative; }
.section-dark { background: var(--charcoal); color: var(--cream); }
.section-espresso { background: var(--espresso); color: var(--cream); }
.section-cream2 { background: var(--cream-2); }

.section-head { max-width: 62rem; }
.section-head h2 { margin-top: 1.4rem; }
.section-head .lede { margin-top: 1.4rem; }

/* ---------- Buttons (island / button-in-button) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 0.7rem 0.75rem 0.7rem 1.5rem;
  border-radius: 999px;
  background: var(--gold-soft); color: #0d180c;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.5s var(--ease), transform 0.4s var(--ease);
  will-change: transform;
}
.btn .ic {
  width: 2.1rem; height: 2.1rem; border-radius: 999px;
  background: rgba(13, 24, 12, 0.14);
  display: grid; place-items: center;
  transition: transform 0.5s var(--ease), background 0.5s var(--ease);
}
.btn .ic svg { width: 15px; height: 15px; }
.btn:hover { background: var(--gold-bright); }
.btn:hover .ic { transform: translate(3px, -3px); background: rgba(13, 24, 12, 0.22); }
.btn:active { transform: scale(0.975); }

.btn-ghost {
  background: transparent; color: inherit;
  border: 1px solid var(--hair);
}
.btn-ghost .ic { background: rgba(30, 38, 32, 0.08); }
.section-dark .btn-ghost, .hero .btn-ghost { border-color: var(--hair-light); color: var(--cream); }
.section-dark .btn-ghost .ic, .hero .btn-ghost .ic { background: rgba(245, 243, 236, 0.12); }
.btn-ghost:hover { background: rgba(63, 107, 53, 0.08); }

.textlink {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold);
}
.textlink svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease); }
.textlink:hover svg { transform: translateX(4px); }

/* ---------- Navigation (floating glass pill) ---------- */
.nav-outer { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; justify-content: center; padding-top: 1.4rem; pointer-events: none; }
.nav {
  pointer-events: auto;
  display: flex; align-items: center; gap: 2.4rem;
  padding: 0.6rem 0.6rem 0.6rem 1.6rem;
  border-radius: 999px;
  /* Solid by default: the bar sits over cream on every interior page, and a
     half-transparent dark pill turns muddy grey there. */
  background: rgba(16, 22, 15, 0.94);
  border: 1px solid rgba(245, 243, 236, 0.14);
  box-shadow: 0 16px 36px -18px rgba(16, 22, 15, 0.55);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
  max-width: calc(100vw - 2rem);
}
/* Only while parked over the home hero footage does it float clear. */
.nav.is-clear { background: rgba(16, 22, 15, 0.42); box-shadow: none; }
.nav-logo img { height: 34px; width: 34px; display: block; }
.nav-links { display: flex; align-items: center; gap: 1.9rem; }
.nav-links a {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.13em; color: rgba(245, 243, 236, 0.82);
  position: relative; padding: 0.3rem 0;
  transition: color 0.4s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--gold-soft); transition: width 0.4s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--cream); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; }
.nav .btn { padding: 0.55rem 0.6rem 0.55rem 1.15rem; font-size: 0.7rem; }
.nav .btn .ic { width: 1.8rem; height: 1.8rem; }

.nav-toggle {
  display: none; width: 2.6rem; height: 2.6rem; border-radius: 999px;
  background: rgba(245, 243, 236, 0.1); border: none; cursor: pointer;
  position: relative; flex: none;
}
.nav-toggle span { position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; background: var(--cream); transition: transform 0.5s var(--ease), opacity 0.3s var(--ease); }
.nav-toggle span:nth-child(1) { transform: translate(-50%, -5px); }
.nav-toggle span:nth-child(2) { transform: translate(-50%, 0); }
.nav-toggle span:nth-child(3) { transform: translate(-50%, 5px); }

/* Mobile overlay menu */
.nav-overlay {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(11, 17, 11, 0.9);
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  display: flex; flex-direction: column; justify-content: center; gap: 0.4rem;
  padding: var(--pad);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
.nav-overlay a {
  font-family: var(--serif); font-size: clamp(2.2rem, 9vw, 3.6rem); color: var(--cream);
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), color 0.3s var(--ease);
}
.nav-overlay a:hover { color: var(--gold-soft); }
.nav-overlay .ov-cta {
  margin-top: 1.6rem;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: #0d180c;
}
body.menu-open { overflow: hidden; }
body.menu-open .nav-overlay { opacity: 1; visibility: visible; }
body.menu-open .nav-overlay a { opacity: 1; transform: translateY(0); }
body.menu-open .nav-overlay a:nth-child(1) { transition-delay: 0.08s; }
body.menu-open .nav-overlay a:nth-child(2) { transition-delay: 0.14s; }
body.menu-open .nav-overlay a:nth-child(3) { transition-delay: 0.2s; }
body.menu-open .nav-overlay a:nth-child(4) { transition-delay: 0.26s; }
body.menu-open .nav-overlay a:nth-child(5) { transition-delay: 0.32s; }
body.menu-open .nav-toggle span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100dvh; display: flex; align-items: flex-end; color: var(--cream); overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; background: var(--charcoal) center/cover no-repeat; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-media video.ready { opacity: 1; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,14,8,0.72) 0%, rgba(8,14,8,0.42) 45%, rgba(8,14,8,0.12) 75%, rgba(8,14,8,0.05) 100%),
    linear-gradient(180deg, rgba(8,14,8,0.62) 0%, rgba(8,14,8,0.42) 40%, rgba(8,14,8,0.92) 100%);
}
.hero-media { filter: brightness(0.8); }
.hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(3.5rem, 9vw, 7rem); padding-top: 9rem; }
.hero .display { max-width: 16ch; margin-top: 1.6rem; }
.hero .lede { margin-top: 1.6rem; color: rgba(245, 243, 236, 0.78); }
.hero-actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero-meta { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 2.5rem; border-top: 1px solid var(--hair-light); padding-top: 1.6rem; }
.hero-meta div { min-width: 7rem; }
.hero-meta dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold-soft); }
.hero-meta dd { font-family: var(--serif); font-size: 1.5rem; margin-top: 0.3rem; }
.scroll-cue { position: absolute; right: var(--pad); bottom: clamp(3.5rem, 9vw, 7rem); z-index: 2; writing-mode: vertical-rl; font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(245,243,236,0.6); }

/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 4rem; }
.pillar { padding: 2rem 1.6rem; border-top: 1px solid var(--hair); }
.section-dark .pillar { border-top-color: var(--hair-light); }
.pillar .ic-line { width: 30px; height: 30px; color: var(--gold); }
.section-dark .pillar .ic-line { color: var(--gold-soft); }
.pillar h3 { margin: 1.2rem 0 0.6rem; font-size: 1.35rem; }
.pillar p { font-size: 0.95rem; color: var(--ink-soft); }
.section-dark .pillar p { color: rgba(245,243,236,0.66); }

/* ---------- Double-bezel project cards ---------- */
.grid-projects { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.4rem; margin-top: 3.5rem; }
.bezel {
  background: rgba(30, 38, 32, 0.045);
  border: 1px solid var(--hair);
  padding: 0.5rem; border-radius: 30px;
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.section-dark .bezel, .section-espresso .bezel { background: rgba(245,243,236,0.05); border-color: var(--hair-light); }
.bezel-inner {
  border-radius: 22px; overflow: hidden; position: relative;
  background: #fff; box-shadow: inset 0 1px 1px rgba(255,255,255,0.5);
}
.card-proj { grid-column: span 4; }
.card-proj.feature { grid-column: span 8; }
.card-proj.wide { grid-column: span 6; }

/* Balanced 2-column grid (4-card collections) with equal-height cards */
.grid-projects.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-projects.grid-2 .card-proj { grid-column: auto; }
.grid-2 .card-proj > a, .grid-2 .bezel, .grid-2 .bezel-inner { height: 100%; }
.grid-2 .bezel-inner { display: flex; flex-direction: column; }
.grid-2 .card-body { flex: 1; display: flex; flex-direction: column; }
.grid-2 .card-foot { margin-top: auto; }
@media (max-width: 768px) { .grid-projects.grid-2 { grid-template-columns: 1fr; } }
.card-proj a { display: block; height: 100%; }
.bezel:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(16,22,15,0.4); }
.card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.card-proj.feature .card-media { aspect-ratio: 16/10; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.bezel:hover .card-media img { transform: scale(1.05); }
.card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(11,17,11,0.55) 100%); }
.status-tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 500;
  padding: 0.35rem 0.8rem; border-radius: 999px;
  background: rgba(139, 184, 122, 0.92); color: #0d180c; backdrop-filter: blur(4px);
}
.status-tag.sold { background: rgba(16,22,15,0.66); color: rgba(245,243,236,0.9); }
.card-body { padding: 1.5rem 1.4rem 1.7rem; }
.bezel-inner .card-body { color: var(--ink); }
.card-loc { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); display: flex; align-items: center; gap: 0.45rem; }
.card-loc svg { width: 13px; height: 13px; flex: none; }
.pillar .ic-line svg, .stat .ic-line svg { width: 100%; height: 100%; }
.footer h4 + .ic-line { display: none; }
.card-body h3 { margin: 0.7rem 0 0.7rem; }
.card-body p { font-size: 0.92rem; color: var(--ink-soft); }
.card-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.chip { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); border: 1px solid var(--hair); border-radius: 999px; padding: 0.3rem 0.7rem; }
.card-foot { margin-top: 1.3rem; display: flex; align-items: center; justify-content: space-between; }

/* ---------- Split / editorial ---------- */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split.reverse .split-media { order: -1; }
.split-media .bezel { padding: 0.6rem; }
.split-media img { border-radius: 20px; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.stat-row { display: flex; gap: 2.6rem; margin-top: 2.4rem; flex-wrap: wrap; }
.stat b { font-family: var(--serif); font-size: 2.6rem; font-weight: 500; display: block; color: var(--gold); }
.section-dark .stat b { color: var(--gold-soft); }
.stat span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-soft); }
.section-dark .stat span { color: rgba(245,243,236,0.6); }

/* ---------- Gallery grid ---------- */
.gallery-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 3rem; }
.gallery-strip figure { min-width: 0; }
.gallery-strip img { border-radius: 18px; aspect-ratio: 3/4; object-fit: cover; width: 100%; height: 100%; }
@media (max-width: 560px) { .gallery-strip { grid-template-columns: repeat(2, 1fr); } }
.gallery-subhead { font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--ink); margin-top: 3rem; }
.gallery-strip.section-gal { margin-top: 1.1rem; }
/* two small sections side by side */
.gallery-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; margin-top: 3rem; }
.gallery-pair .gallery-subhead { margin-top: 0; }
.gallery-strip.fill { grid-template-columns: 1fr; }
@media (max-width: 768px) { .gallery-pair { grid-template-columns: 1fr; gap: 0; } .gallery-pair > div:last-child .gallery-subhead { margin-top: 2.4rem; } }

/* ---------- Enquiry form ---------- */
.enquiry-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.form-card { }
.enquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.enquiry-form .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(245,243,236,0.6); margin-bottom: 0.5rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.9rem 1rem; font-family: var(--sans); font-size: 0.95rem; font-weight: 300;
  color: var(--cream); background: rgba(245,243,236,0.06);
  border: 1px solid rgba(245,243,236,0.16); border-radius: 12px;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(245,243,236,0.4); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-soft); background: rgba(245,243,236,0.1); }
.field select option { color: #111; }
.hp { position: absolute; left: -9999px; }
.form-note { grid-column: 1/-1; font-size: 0.85rem; min-height: 1.2em; color: rgba(245,243,236,0.7); }
.form-note.success { color: var(--gold-bright); }
.form-note.error { color: #e98b7a; }
.enquiry-form .btn { grid-column: 1/-1; justify-self: start; }

/* ---------- Inline availability ask (project pages) ---------- */
/* Lives inside the espresso unit-table band, so it inherits the dark .field
   styling — do not move it onto a cream section without restyling the inputs. */
.inline-enquiry {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.6rem, 5vw, 4rem);
  align-items: start; margin-top: clamp(2.4rem, 5vw, 3.4rem);
  padding-top: clamp(2.4rem, 5vw, 3.4rem); border-top: 1px solid var(--hair-light);
}
.inline-enquiry-head { font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.15; }
.inline-enquiry-lede { margin-top: 0.9rem; font-size: 0.98rem; font-weight: 300; line-height: 1.65; color: rgba(245,243,236,0.72); max-width: 46ch; }
.inline-enquiry .textlink { margin-top: 1.2rem; }
.inline-form { align-content: start; }
@media (max-width: 768px) { .inline-enquiry { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer { background: var(--charcoal); color: rgba(245,243,236,0.7); padding-block: clamp(3.5rem, 8vw, 6rem) 2.5rem; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.footer-logo img { height: 30px; margin-bottom: 1.4rem; }
.footer h4 { font-family: var(--sans); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold-soft); font-weight: 500; margin-bottom: 1.2rem; }
.footer a { color: rgba(245,243,236,0.7); transition: color 0.3s var(--ease); display: block; padding: 0.3rem 0; font-size: 0.95rem; }
.footer a:hover { color: var(--cream); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 3.5rem; padding-top: 1.8rem; border-top: 1px solid var(--hair-light); font-size: 0.8rem; letter-spacing: 0.04em; }

/* ---------- Breadcrumb ---------- */
.crumb { padding-top: 8rem; }
.crumb ol { list-style: none; display: flex; gap: 0.6rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); }
.crumb a { color: var(--gold); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero { padding-top: 11rem; padding-bottom: clamp(3rem, 7vw, 5rem); }
.page-hero .display { font-size: clamp(2.6rem, 7vw, 5rem); margin-top: 1.4rem; }

/* Photo-backed section banner. The scrim is what keeps the type legible over
   renders that run from near-white sky to dark foliage. */
.page-hero.has-bg { position: relative; isolation: isolate; overflow: hidden;
  padding-top: 12.5rem; padding-bottom: clamp(4rem, 8vw, 6.5rem); }
.page-hero.has-bg > .wrap { position: relative; z-index: 1; }
.page-hero-media { position: absolute; inset: 0; z-index: 0;
  background: var(--charcoal) center/cover no-repeat; }
/* Two-axis scrim, same logic as the home hero: the horizontal pass buys
   contrast under the left-aligned type, the vertical pass seats the band
   against the nav above and the section below. */
.page-hero-media::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,14,8,0.82) 0%, rgba(8,14,8,0.58) 45%, rgba(8,14,8,0.24) 75%, rgba(8,14,8,0.14) 100%),
    linear-gradient(180deg, rgba(8,14,8,0.74) 0%, rgba(8,14,8,0.44) 40%, rgba(8,14,8,0.86) 100%); }
/* Renders run bright behind the type, so lift the body copy off the image. */
.page-hero.has-bg .lede { color: rgba(245, 243, 236, 0.93); }
.page-hero.has-bg .chip { color: rgba(245, 243, 236, 0.92);
  border-color: rgba(245, 243, 236, 0.34); background: rgba(8, 14, 8, 0.3); }
.page-hero.has-bg .display,
.page-hero.has-bg .lede { text-shadow: 0 1px 20px rgba(8, 14, 8, 0.55); }

@media (prefers-reduced-motion: no-preference) {
  .page-hero-media { transform: scale(1.04); animation: heroDrift 22s var(--ease) infinite alternate; }
}
@keyframes heroDrift { from { transform: scale(1.04) translate3d(0, 0, 0); }
                       to   { transform: scale(1.09) translate3d(0, -1.2%, 0); } }

/* ---------- Specs / dl ---------- */
.specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 3rem; }
.specs div { border-top: 1px solid var(--hair); padding-top: 1.1rem; }
.specs dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); }
.specs dd { font-family: var(--serif); font-size: 1.7rem; margin-top: 0.4rem; }

/* ---------- Price + area plans ---------- */
.price-tag {
  display: inline-block; margin-top: 1.8rem; padding-top: 1.1rem;
  font-family: var(--serif); font-size: 1.7rem; color: var(--gold);
  border-top: 1px solid var(--hair);
}
.card-price { font-family: var(--serif); font-size: 1.1rem; color: var(--gold); }
.promo-note {
  display: inline-block; margin-top: 0.9rem;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold);
  background: rgba(63, 107, 53, 0.08); border: 1px solid var(--hair);
  border-radius: 999px; padding: 0.45rem 1rem;
}
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; margin-top: 3rem; }
.plan-card .bezel { padding: 0.5rem; }
.plan-card .bezel-inner { background: #fff; }
.plan-card img { width: 100%; height: auto; object-fit: contain; background: #fff; display: block; }
.plan-card figcaption { margin-top: 0.9rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-soft); text-align: center; }
.plan-card.master { grid-column: 1 / -1; }
@media (max-width: 768px) { .plan-grid { grid-template-columns: 1fr; } }

/* ---------- WhatsApp float ---------- */
.wa-float { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90; width: 3.4rem; height: 3.4rem; border-radius: 999px; background: var(--gold-soft); display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(16,22,15,0.5); transition: transform 0.4s var(--ease); }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 22px; height: 22px; color: #0d180c; }

/* ---------- Sticky mobile CTA bar ---------- */
/* Phones only. On desktop the nav bar keeps "Get price list" in view already;
   on a phone the nav collapses into a burger and nothing conversion-shaped
   stays on screen, which is why the price-list buttons recorded zero clicks. */
.cta-bar { display: none; }
.cta-bar-wa, .cta-bar-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 3rem; border-radius: 999px; font-family: var(--sans);
  font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
}
.cta-bar-wa { flex: 0 0 auto; padding-inline: 1.1rem; color: var(--cream); border: 1px solid var(--hair-light); background: rgba(245,243,236,0.06); }
.cta-bar-wa svg { width: 19px; height: 19px; }
.cta-bar-btn { flex: 1 1 auto; background: var(--gold-soft); color: #0d180c; }

@media (max-width: 768px) {
  .cta-bar {
    position: fixed; inset: auto 0 0 0; z-index: 95;
    display: flex; gap: 0.6rem; padding: 0.7rem var(--pad) calc(0.7rem + env(safe-area-inset-bottom));
    background: rgba(26, 35, 24, 0.92);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--hair-light);
    transform: translateY(110%); transition: transform 0.45s var(--ease);
  }
  /* Held back over the hero so it does not cover the opening statement, and
     hidden again whenever a dialog or the burger menu owns the screen. */
  .cta-bar.is-up { transform: translateY(0); }
  body.modal-open .cta-bar, body.menu-open .cta-bar, body.lb-open .cta-bar { transform: translateY(110%); }
  /* Two contact affordances stacked in the same corner reads as clutter. */
  .wa-float { display: none; }
  .footer { padding-bottom: 6rem; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(8, 14, 8, 0.94);
  display: none; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
body.lb-open { overflow: hidden; }
body.lb-open .lightbox { display: flex; }
.lightbox img { max-width: 90vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); }
.lightbox button {
  position: absolute; background: rgba(245, 243, 236, 0.1); border: 1px solid var(--hair-light);
  color: var(--cream); width: 3rem; height: 3rem; border-radius: 999px; cursor: pointer;
  font-size: 1.6rem; line-height: 1; display: grid; place-items: center;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.lightbox button:hover { background: rgba(245, 243, 236, 0.22); }
.lb-close { top: 1.4rem; right: 1.4rem; }
.lb-prev { left: 1.4rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1.4rem; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); font-size: 0.72rem; letter-spacing: 0.16em; color: rgba(245, 243, 236, 0.7); }
@media (max-width: 560px) { .lb-prev { left: 0.5rem; } .lb-next { right: 0.5rem; } .lightbox button { width: 2.6rem; height: 2.6rem; } }

/* ---------- Modal lightbox (price-list request form) ---------- */
.modal-lightbox {
  position: fixed; inset: 0; z-index: 160;
  display: none; align-items: center; justify-content: center; padding: 1.5rem;
}
.modal-lightbox.open { display: flex; }
body.modal-open { overflow: hidden; }
.modal-backdrop {
  position: absolute; inset: 0; background: rgba(8, 14, 8, 0.82);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.modal-card {
  position: relative; width: 100%; max-width: 27rem; max-height: calc(100vh - 3rem); overflow-y: auto;
  background: var(--espresso); color: var(--cream);
  border: 1px solid var(--hair-light); border-radius: 18px;
  padding: 1.8rem clamp(1.4rem, 4vw, 2.1rem);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.6);
}
.modal-card h3 { font-size: 1.7rem; line-height: 1.15; }
.modal-close {
  position: absolute; top: 0.9rem; right: 0.9rem; width: 2.2rem; height: 2.2rem;
  border-radius: 999px; border: 1px solid var(--hair-light); background: rgba(245, 243, 236, 0.06);
  color: var(--cream); font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: background 0.3s var(--ease);
}
.modal-close:hover { background: rgba(245, 243, 236, 0.16); }
.modal-form { grid-template-columns: 1fr; margin-top: 1.1rem; gap: 0.7rem; }
.modal-form .field label { margin-bottom: 0.35rem; }
.modal-form .field input, .modal-form .field select { padding: 0.65rem 0.85rem; font-size: 0.9rem; }
.modal-form .btn { margin-top: 0.15rem; }

/* ---------- Catalogue filters ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2.5rem; }
.filter-group { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.filter-group + .filter-group { margin-left: 1.6rem; }
.filter-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-soft); margin-right: 0.4rem; }
.section-dark .filter-label { color: rgba(245,243,236,0.55); }
.filter-chip {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft);
  border: 1px solid var(--hair); border-radius: 999px; padding: 0.4rem 0.9rem;
  background: transparent; cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.filter-chip:hover { border-color: var(--gold); color: var(--gold); }
.filter-chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--cream); }
.section-dark .filter-chip { color: rgba(245,243,236,0.7); border-color: var(--hair-light); }
.section-dark .filter-chip:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.section-dark .filter-chip[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold-soft); color: #0d180c; }
.filter-count { margin-top: 1.8rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-soft); }
.section-dark .filter-count { color: rgba(245,243,236,0.55); }
.card-proj[hidden] { display: none; }
.filter-empty { margin-top: 3rem; font-family: var(--serif); font-size: 1.6rem; }
@media (max-width: 768px) { .filter-group + .filter-group { margin-left: 0; } .filter-bar { flex-direction: column; align-items: flex-start; gap: 1rem; } }

/* Equal-height cards for the catalogue / any 3-up grid */
.grid-projects.grid-eq .card-proj > .bezel { height: 100%; }
.grid-projects.grid-eq .bezel > a { height: 100%; }
.grid-projects.grid-eq .bezel-inner { height: 100%; display: flex; flex-direction: column; }
.grid-projects.grid-eq .card-body { flex: 1; display: flex; flex-direction: column; }
.grid-projects.grid-eq .card-foot { margin-top: auto; }

/* ---------- Editorial prose (guides, about) ---------- */
.prose { max-width: 44rem; }
.prose h3 { margin-top: 2.8rem; }
.prose h3:first-child { margin-top: 0; }
.prose p { margin-top: 1.1rem; color: var(--ink-soft); }
.section-dark .prose p, .section-espresso .prose p { color: rgba(245,243,236,0.72); }
.prose ul { margin-top: 1.1rem; padding-left: 1.1rem; color: var(--ink-soft); }
.prose li { margin-top: 0.5rem; }
.section-dark .prose ul, .section-espresso .prose ul { color: rgba(245,243,236,0.72); }
.data-table { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: 0.92rem; }
.data-table th, .data-table td { text-align: left; padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--hair); }
.data-table th { font-family: var(--sans); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); font-weight: 500; }
.data-table td { color: var(--ink-soft); }
.table-scroll { overflow-x: auto; }
.section-dark .data-table th, .section-espresso .data-table th { color: var(--gold-soft); }
.section-dark .data-table td, .section-espresso .data-table td { color: rgba(245,243,236,0.78); border-bottom-color: var(--hair-light); }
.section-dark .data-table th, .section-espresso .data-table th { border-bottom-color: var(--hair-light); }

/* ---------- WhatsApp hand-off (post-submit step) ---------- */
.wa-handoff { margin-top: 1.4rem; }
.enquiry-wrap .wa-handoff { margin-top: 0; }
.modal-card.is-done > .eyebrow,
.modal-card.is-done > h3,
.modal-card.is-done > .lede { display: none; }
.modal-card.is-done .wa-handoff { margin-top: 0.4rem; }
/* Keep the heading clear of the card's close button. */
.modal-card.is-done .wa-handoff-head { padding-right: 2.4rem; }
.wa-handoff-head {
  font-family: var(--serif); font-size: 1.6rem; line-height: 1.15;
  color: var(--cream);
}
.wa-handoff-head em { font-style: italic; color: var(--gold-bright); }
.wa-handoff-lede { margin-top: 0.7rem; color: rgba(245, 243, 236, 0.72); font-size: 0.95rem; }
/* The base .btn pads asymmetrically for its trailing arrow pill; this one leads
   with the WhatsApp glyph instead, so it pads evenly. */
.wa-handoff-btn {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.3rem;
  padding: 0.75rem 1.5rem;
  background: #25d366; color: #0b2016;
}
.wa-handoff-btn:hover { background: #1fb857; color: #0b2016; }
/* .enquiry-form sets display:grid, which outranks the UA [hidden] rule. */
.enquiry-form[hidden] { display: none; }
.wa-handoff-ic svg { width: 1.25rem; height: 1.25rem; display: block; }
.wa-handoff-note {
  margin-top: 1rem; font-size: 0.82rem; line-height: 1.5;
  color: rgba(245, 243, 236, 0.6);
}
.wa-handoff-note .bang {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; margin-right: 0.4rem; border-radius: 999px;
  background: var(--gold-soft); color: var(--charcoal);
  font-size: 0.72rem; font-weight: 500;
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; } .reveal.d4 { transition-delay: 0.32s; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .specs { grid-template-columns: repeat(2, 1fr); }
  .card-proj, .card-proj.feature, .card-proj.wide { grid-column: span 6; }
}
@media (max-width: 768px) {
  .nav-links, .nav > .btn { display: none; }
  .nav-toggle { display: block; }
  .nav { gap: 1rem; padding: 0.55rem 0.6rem 0.55rem 1.2rem; }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .split-media img { aspect-ratio: 16/11; }
  .enquiry-wrap { grid-template-columns: 1fr; }
  .enquiry-form { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .pillars { grid-template-columns: 1fr; gap: 0; margin-top: 2.5rem; }
  .card-proj, .card-proj.feature, .card-proj.wide { grid-column: 1 / -1; }
  .grid-projects { grid-template-columns: 1fr; }
  .hero-meta { gap: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* ---------- Espresso sections need the same on-dark treatment as .section-dark
   Back-ported from anchan-site 2026-09-02. The sheet only ever put pillars,
   specs and stats on .section-dark, so on a .section-espresso band the body
   copy fell back to --ink-soft (#4e5a4c) over #1a2318 — a contrast ratio under
   1.5:1, effectively invisible. */
.section-espresso .pillar { border-top-color: var(--hair-light); }
.section-espresso .pillar p { color: rgba(245, 243, 236, 0.7); }
.section-espresso .pillar .ic-line { color: var(--gold-soft); }
.section-espresso .specs div { border-top-color: var(--hair-light); }
.section-espresso .specs dt { color: var(--gold-soft); }
.section-espresso .stat b { color: var(--gold-soft); }
.section-espresso .stat span { color: rgba(245, 243, 236, 0.6); }
.section-espresso .chip { color: rgba(245, 243, 236, 0.75); border-color: var(--hair-light); }
.section-espresso .filter-label { color: rgba(245, 243, 236, 0.55); }

/* ---- ZEN phone field (generated by phone_flags.py) ---------------------- */
.zen-tel { position: relative; display: flex; align-items: stretch; gap: 0; }
.zen-tel > input[type="tel"] {
  flex: 1 1 auto; min-width: 0;
  border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
  border-left: 0 !important;
}
.zen-tel__btn {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.9rem 0.7rem 0.9rem 0.9rem;
  font: inherit; font-size: 0.95rem; font-weight: 300; line-height: 1;
  color: inherit; cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.zen-tel__btn:hover { background: rgba(255, 255, 255, 0.1); }
.zen-tel__btn:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.modal-form .zen-tel__btn { padding: 0.65rem 0.55rem 0.65rem 0.75rem; font-size: 0.9rem; }

/* One sprite sheet, 230 flags in a single 42px-wide column of 28px cells. At
   background-size 21px the sheet is shown at half scale, so a country's cell is
   at -index*14px — which is the only number phone_field.js needs to know.
   Fitted, not stretched: Switzerland is square and the padding either side of it
   is transparent, so it takes the panel's colour rather than a false white. */
.zen-tel__flag {
  width: 21px; height: 14px; flex: 0 0 21px;
  display: block; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  background-image: url("flags.png?v=8a52ee86");
  background-repeat: no-repeat;
  background-size: 21px auto;
}
.zen-tel__code { opacity: 0.85; white-space: nowrap; }
.zen-tel__caret { width: 10px; height: 6px; opacity: 0.6; flex: 0 0 10px; }

.zen-tel__panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  width: min(19rem, 78vw); max-height: 17rem;
  /* max-height is overwritten inline on open, sized to whatever the nearest
     scrolling ancestor actually leaves free. */
  display: flex; flex-direction: column;
  background: var(--charcoal, #1c1b18);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
/* display:flex above outranks the UA [hidden] rule, exactly as .enquiry-form does
   — without this the panel is painted over the field below it from page load,
   never closes after a choice, and its list is empty until first opened. */
.zen-tel__panel[hidden] { display: none; }
/* Not enough room under the field — inside the price-list modal, for one. */
.zen-tel__panel.is-up { top: auto; bottom: calc(100% + 6px); }

.zen-tel__search {
  width: 100%; padding: 0.6rem 0.8rem; font: inherit; font-size: 0.85rem;
  color: inherit; background: rgba(255, 255, 255, 0.06);
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0 !important;
}
.zen-tel__search:focus { outline: none; background: rgba(255, 255, 255, 0.1); }
.zen-tel__list { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.zen-tel__opt {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.5rem 0.8rem; font: inherit; font-size: 0.85rem; font-weight: 300;
  color: inherit; text-align: left; background: none; border: 0; cursor: pointer;
}
.zen-tel__opt:hover, .zen-tel__opt:focus-visible, .zen-tel__opt.is-on {
  background: rgba(255, 255, 255, 0.09); outline: none;
}
.zen-tel__name { flex: 1 1 auto; }
.zen-tel__opt .zen-tel__code { opacity: 0.6; font-variant-numeric: lining-nums tabular-nums; }
.zen-tel__empty { padding: 0.9rem; margin: 0; font-size: 0.85rem; opacity: 0.6; }

@media (prefers-reduced-motion: reduce) {
  .zen-tel__btn { transition: none; }
}
/* ---- end ZEN phone field ----------------------------------------------- */

/* ==========================================================================
   One-page landing (branch `landing-onepager`)
   ========================================================================== */

/* ---------- Project tiles ---------- */
.ptile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem; margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.ptile {
  display: flex; flex-direction: column; text-align: left; cursor: pointer;
  background: var(--cream); border: 1px solid var(--hair); border-radius: 14px;
  overflow: hidden; padding: 0; font-family: var(--sans); color: inherit; text-decoration: none;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s var(--ease);
}
.ptile:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 22px 40px -26px rgba(16,22,15,0.5); }
.ptile-media { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--cream-2); }
.ptile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.ptile:hover .ptile-media img { transform: scale(1.04); }
.ptile-body { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.1rem 1.2rem; }
.ptile-meta { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); }
.ptile-name { font-family: var(--serif); font-size: 1.12rem; line-height: 1.2; }
.ptile-price { font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- Area cards ---------- */
.acards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.6rem; margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.acard { padding: 1.8rem; border: 1px solid var(--hair); border-radius: 14px; background: var(--cream-2); }
.acard h3 { font-family: var(--serif); font-size: 1.35rem; }
.acard p { margin-top: 0.7rem; font-size: 0.92rem; font-weight: 300; line-height: 1.6; color: var(--ink-soft); }
.acard-count { display: inline-block; margin-top: 1rem; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); }

/* ---------- Quiz + booker chips ---------- */
/* Chips are <button>, so they carry no form value — every handler reads
   data-value and writes it into a hidden field before submit. */
.qopts { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.8rem; }
.qopts-inline { flex-direction: row; flex-wrap: wrap; margin-top: 0; }
.qopt {
  font-family: var(--sans); font-size: 0.95rem; font-weight: 300; text-align: left; cursor: pointer;
  padding: 0.85rem 1.1rem; border-radius: 12px; color: var(--cream);
  background: rgba(245,243,236,0.06); border: 1px solid rgba(245,243,236,0.16);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.qopts-inline .qopt { flex: 1 1 auto; text-align: center; padding: 0.7rem 1rem; font-size: 0.88rem; }
.qopt:hover { border-color: var(--gold-soft); background: rgba(245,243,236,0.1); }
.qopt.is-on { background: var(--gold-soft); border-color: var(--gold-soft); color: #0d180c; }

/* ---------- Quiz shell ---------- */
.modal-wide .modal-card { max-width: 44rem; }
.quiz-card { max-height: 88vh; overflow: auto; }
.quiz-progress { height: 2px; background: rgba(245,243,236,0.14); border-radius: 2px; margin-bottom: 1.8rem; }
.quiz-bar { display: block; height: 100%; width: 0; background: var(--gold-soft); border-radius: 2px; transition: width 0.45s var(--ease); }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--hair-light); }
.quiz-back { background: none; border: 0; cursor: pointer; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.06em; color: rgba(245,243,236,0.7); }
.quiz-back:hover { color: var(--cream); }
.quiz-count { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(245,243,236,0.45); }

/* ---------- Quiz results ---------- */
.qres { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: center; padding: 0.9rem 0; border-bottom: 1px solid var(--hair-light); }
.qres:first-child { padding-top: 1.4rem; }
.qres img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.qres-meta { display: block; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold-soft); }
.qres h4 { font-family: var(--serif); font-size: 1.15rem; line-height: 1.2; margin-top: 0.25rem; }
.qres-price { display: block; margin-top: 0.3rem; font-size: 0.88rem; color: rgba(245,243,236,0.8); }
.qres-beds { display: block; font-size: 0.78rem; color: rgba(245,243,236,0.5); }
.qres.is-top { position: relative; }
.qres.is-top::after { content: "Best fit"; position: absolute; right: 0; top: 1rem; font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.18em; color: #0d180c; background: var(--gold-soft); padding: 0.2rem 0.5rem; border-radius: 999px; }

/* ---------- Payment plan inside the quiz ---------- */
.quiz-plan { margin-top: 1.8rem; padding: 1.2rem 1.3rem; border: 1px solid var(--hair-light); border-radius: 14px; background: rgba(245,243,236,0.04); }
.quiz-plan-head { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold-soft); }
.quiz-plan-table { margin-top: 0.9rem; font-size: 0.82rem; }
.quiz-plan-table td { padding: 0.4rem 0.6rem 0.4rem 0; border-bottom: 1px solid rgba(245,243,236,0.08); }
.quiz-plan-table td:last-child { text-align: right; white-space: nowrap; color: var(--cream); }
.quiz-plan-note { margin-top: 0.9rem; font-size: 0.76rem; line-height: 1.5; color: rgba(245,243,236,0.55); }
.quiz-ask { grid-column: 1/-1; margin-top: 1.6rem; font-size: 0.92rem; font-weight: 300; line-height: 1.6; color: rgba(245,243,236,0.75); }
.quiz-form { margin-top: 0.6rem; }

@media (max-width: 768px) {
  .qres { grid-template-columns: 4.2rem 1fr; }
  .qres.is-top::after { top: 0.6rem; }
  .quiz-card { max-height: 92vh; }
}

/* The "Best fit" pill sits in the result row's top-right corner; without this the
   meta line runs under it on a 375px screen. */
.qres.is-top .qres-meta { padding-right: 4.6rem; }

/* ---------- Project picker inside the finder ---------- */
/* Twenty options will not fit a phone screen, so this one list scrolls inside
   the step rather than making the whole card taller than the viewport. */
.qopts-scroll { max-height: 22rem; overflow-y: auto; padding-right: 0.4rem; }
/* A two-line option — headline plus a line of what it actually does. Shared by
   the project picker and the tile chooser. */
.qopts-scroll .qopt, .qopts-choice .qopt { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 1rem; }
.qopts-scroll .qopt b, .qopts-choice .qopt b { font-family: var(--serif); font-size: 1.02rem; font-weight: 400; }
.qopts-scroll .qopt span, .qopts-choice .qopt span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.62; }
.qopts-scroll .qopt.is-on span, .qopts-choice .qopt.is-on span { opacity: 0.8; }
.qopts-choice { margin-top: 1.6rem; }
.qopts-choice .qopt { padding: 1rem 1.2rem; gap: 0.35rem; }
.qopts-choice .qopt b { font-size: 1.16rem; }
.qopts-choice .qopt span { text-transform: none; letter-spacing: 0; font-size: 0.84rem; line-height: 1.45; opacity: 0.6; }

/* ---------- "I don't use WhatsApp" ---------- */
.alt-channel-toggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 300;
  color: rgba(245,243,236,0.6); text-decoration: underline; text-underline-offset: 3px;
}
.alt-channel-toggle:hover { color: var(--cream); }
.alt-channel-body > label { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(245,243,236,0.6); margin-bottom: 0.5rem; }
.alt-email { margin-top: 0.9rem; }

/* ---------- Project page: the quiz is the hero ---------- */
.project-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
/* The finder's controls are styled for a dark surface — it carries its own
   ground here rather than being restyled for cream. */
.quiz-inline {
  background: var(--espresso); color: var(--cream);
  border-radius: 18px; padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: 0 30px 60px -40px rgba(16, 22, 15, 0.6);
  /* .quiz-card caps height for the modal; inline, the card grows with the page
     instead of scrolling inside itself. */
  max-height: none; overflow: visible;
}
.quiz-inline .quiz-nav { border-top-color: var(--hair-light); }
.quiz-inline h3 { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; }
.quiz-inline .qres img { border-radius: 8px; }
@media (max-width: 900px) {
  .project-hero-grid { grid-template-columns: 1fr; }
  /* On a phone the quiz sits under the name and the price, which is the whole
     of what the visitor needs before deciding to start it. */
  .quiz-inline { margin-top: 2.2rem; }
}
.project-hero-back { margin-top: 1.2rem; }
@media (max-width: 900px) { .quiz-inline { margin-top: 1.6rem; } }

/* ==========================================================================
   Project page design variants (/preview/v1|v2|v3/<slug>)
   ========================================================================== */

/* ---------- Variant 2: the finder sits on the hero photo ---------- */
.hero-quiz .hero-inner { padding-top: 8rem; }
.hero-quiz-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
/* Glass rather than the solid espresso the inline card uses elsewhere: on a
   photo, a solid block reads as a hole punched in the picture. */
.hero-quiz .quiz-inline {
  background: rgba(16, 22, 15, 0.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--hair-light);
}
@media (max-width: 900px) {
  .hero-quiz { min-height: 0; padding-bottom: 3rem; }
  .hero-quiz-grid { grid-template-columns: 1fr; }
  .hero-quiz .hero-inner { padding-top: 7rem; padding-bottom: 0; }
}

/* ---------- Variant 3: split screen ---------- */
.hero-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 100dvh; }
/* .hero paints a full-bleed scrim in ::after for type over footage. Here the
   type is on its own panel, and that scrim was greying the panel out — and
   sitting above it, since only .hero-inner claims a z-index. */
.hero-split::after { display: none; }
.hero-split-media { position: relative; background: var(--charcoal) center/cover no-repeat; }
.hero-split-panel { position: relative; z-index: 2; background: var(--espresso); color: var(--cream); display: flex; align-items: center; overflow-y: auto; }
.hero-split-inner { width: 100%; padding: clamp(6rem, 9vw, 8rem) clamp(1.5rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
.hero-split .price-tag { margin-top: 1.4rem; }
.price-tag.on-dark { color: var(--cream); border-color: var(--hair-light); }
/* It carries the panel's own ground, so it needs none of its own. */
.hero-split .quiz-inline { background: none; padding: 0; box-shadow: none; margin-top: 2rem; }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; min-height: 0; }
  .hero-split-media { min-height: 42vh; }
  .hero-split-inner { padding-top: clamp(2.5rem, 8vw, 4rem); }
}

/* ---------- Google map ---------- */
.map-frame { margin-top: clamp(2.4rem, 5vw, 3.4rem); border-radius: 18px; overflow: hidden; border: 1px solid var(--hair); background: var(--cream-2); }
.map-frame iframe { display: block; width: 100%; height: clamp(20rem, 46vh, 30rem); border: 0; }

/* ---------- The finder as a heading's own subheading ---------- */
/* Variant 3 runs the name, the price and the first question as one block, so
   the quiz must not announce itself a second time: no progress rail and no
   top margin until a question has been answered. */
.quiz-inline .quiz-progress { display: none; }
.quiz-inline.quiz-started .quiz-progress { display: block; }
.quiz-lead { margin-top: 0; }
.hero-split .quiz-inline { margin-top: 1.6rem; }
.hero-split .quiz-lead { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.2; }
.hero-split .qopts-choice { margin-top: 1.2rem; }

/* ---------- "Search the whole island instead" ---------- */
.quiz-widen {
  display: inline-block; margin-top: 0.9rem; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 300;
  color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px;
}
.quiz-widen:hover { color: var(--gold-bright); }

/* ---------- Project gallery: whole rows only ---------- */
/* The count is trimmed in build.py to divide evenly by both the desktop and the
   phone column count, so there is never a ragged last row and never a lone
   leftover image stretched across the page. */
.gallery-grid { display: grid; gap: 1rem; margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.gallery-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-grid figure { min-width: 0; margin: 0; position: relative; }
.gallery-grid figcaption {
  position: absolute; left: 0.7rem; bottom: 0.7rem; max-width: calc(100% - 1.4rem);
  padding: 0.3rem 0.65rem; border-radius: 999px;
  background: rgba(20, 24, 20, 0.62); color: #fff;
  font-size: 0.78rem; line-height: 1.3; letter-spacing: 0.01em;
}
.gallery-grid img {
  display: block; width: 100%; aspect-ratio: 4/3;
  object-fit: cover; border-radius: 14px;
}
@media (max-width: 760px) { .gallery-3 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Unit result rows (project-page finder) ---------- */
/* No thumbnail: these are units in one development, and the same render beside
   each of them would say nothing about the difference between them. */
.qres-unit { grid-template-columns: 1fr; }
.qres-unit h4 { font-size: 1.35rem; margin-top: 0.3rem; }
.qres-unit .qres-beds { margin-top: 0.25rem; }
.qres-unit.is-top::after { content: "Best fit"; }

/* ---------- The map inside the viewing block ---------- */
.enquiry-wrap .map-frame { margin-top: 2rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--hair-light); }
.enquiry-wrap .map-frame iframe { display: block; width: 100%; height: clamp(17rem, 34vh, 24rem); border: 0; }
.map-note { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.7rem; font-size: 0.78rem; color: rgba(245,243,236,0.55); }
.map-note svg { width: 14px; height: 14px; flex: none; }

/* ---------- How many units an answer leaves you ---------- */
.qopt-count {
  float: right; margin-left: 1rem;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-soft); opacity: 0.85;
}
.qopt.is-on .qopt-count { color: #0d180c; opacity: 0.7; }
.qopt.is-empty { opacity: 0.45; }
.qopt.is-empty .qopt-count { color: rgba(245,243,236,0.5); }

/* ---------- What is behind the number ---------- */
/* A short, blurred sample under the form rather than the whole shortlist
   blurred out: a full-height wall of blur reads as a broken page. The legend
   is never blurred — what the reader is being asked to trade a number for has
   to be legible, and that is the words, not the numbers. */
.peek {
  margin-top: 1.6rem; padding: 1rem 1.1rem 0;
  border: 1px solid var(--hair-light); border-radius: 14px;
  background: rgba(245, 243, 236, 0.04);
}
.peek-legend {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--gold-soft);
}
.peek-legend li { display: flex; align-items: center; gap: 0.42rem; }
.peek-legend svg { width: 15px; height: 15px; flex: none; }
.peek-body {
  position: relative; margin-top: 0.85rem; max-height: 7.5rem; overflow: hidden;
  filter: blur(6px);
  user-select: none; -webkit-user-select: none; pointer-events: none;
}
/* Fades into the card instead of being chopped off at a hard edge. */
.peek-body::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3.2rem;
  background: linear-gradient(180deg, rgba(26,35,24,0), rgba(26,35,24,0.95));
}
.peek-row {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: 0.34rem 0; font-size: 0.85rem; color: rgba(245,243,236,0.8);
  border-bottom: 1px solid rgba(245,243,236,0.08);
}
.peek-row span:nth-child(2) { flex: 1; font-size: 0.76rem; opacity: 0.7; }
.peek-row b { white-space: nowrap; color: var(--cream); }
.peek-row-plan span { font-size: 0.8rem; }


/* ---------- Real plans in the locked sample, and after unlock ---------- */
.peek-body.has-plan { display: flex; gap: 0.9rem; }
.peek-plan { flex: 0 0 34%; }
.peek-plan img { width: 100%; height: 7.5rem; object-fit: cover; border-radius: 8px; background: #f5f3ec; }
.peek-rows { flex: 1; min-width: 0; }
.quiz-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.7rem; margin-top: 1.4rem; }
.quiz-plans img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #f5f3ec; border-radius: 10px; }

/* ---------- Home page split hero (ported from the 13 Sep production deploy) ---------- */
/* The home page runs footage in the same half the project pages run a still. */
.hero-split-media video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-split-media video.ready { opacity: 1; }
/* Three stats across half a screen, under a finder: the full-bleed sizing
   wrapped every one of them onto its own line. The finder's own nav rail
   already draws a hairline directly above, so the stats do not draw a second. */
.hero-split .hero-meta { margin-top: 1.4rem; gap: 1.2rem 2rem; padding-top: 0; border-top: 0; }
.hero-split .hero-meta div { min-width: 6rem; }
.hero-split .hero-meta dd { font-size: 1.15rem; }
/* The picker is twenty projects deep; in a panel it has to scroll, not stretch. */
.hero-split .qopts-scroll { max-height: min(46vh, 26rem); }

/* Project finder: units visible, prices + schedule blurred until the lead. */
.quiz-locked .qres-unit h4,
.quiz-locked [data-plan-rows] td:last-child,
.quiz-locked .qlock { filter: blur(7px); user-select: none; pointer-events: none; }
.quiz-locked [data-quiz-plan] { margin-top: 1.4rem; }

/* WhatsApp next to the menu button — mobile only; desktop keeps .wa-float. */
.nav-wa { display: none; }
@media (max-width: 768px) {
  .nav-wa {
    display: grid; place-items: center; flex: none;
    width: 2.6rem; height: 2.6rem; border-radius: 999px;
    background: rgba(245, 243, 236, 0.1); color: #25d366;
  }
  .nav-wa svg { width: 20px; height: 20px; }
  .nav { gap: 0.6rem; }
  .nav-logo { margin-right: 0.4rem; }
}