/* ============================================================
   Zenithy Development — ZEN micro-site design system
   Structure and variable NAMES are inherited from the Anchan /
   Botanica / Mouana sheets so the four stay diffable; only the
   :root values, the hard-coded rgb triplets and the display
   typography changed.

   Palette lifted from Zenithy's own Next.js CSS chunks, not
   eyedropped from a screenshot:
     --color-gold        #c29a5b   brand gold
     --color-gold-text   #8a6d30   gold that reads on white
     gradient partner    #b08847
     card shadow tint    #1e140a

   Typography: Zenithy set their whole site in Poppins, so this
   sheet does too — --serif is Poppins here rather than a
   Cormorant-style display face. Poppins is much heavier than
   Cormorant at the same weight, so the display sizes drop to
   200/300 and gain tracking; see the h1-h4 block below.
   ============================================================ */

:root {
  --charcoal: #1c1a17;
  --espresso: #2e2820;
  --cream: #f7f4ee;
  --cream-2: #e8e2d6;
  --ink: #241f18;
  --ink-soft: #6a6154;
  --gold: #8a6d30;        /* readable copper on cream */
  --gold-soft: #d7b578;   /* copper on plum */
  --gold-bright: #e0c188;
  --sand: #c8b894;
  --hair: rgba(36, 31, 24, 0.12);
  --hair-light: rgba(247, 244, 238, 0.16);

  --serif: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", 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; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  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 ---------- */
/* Poppins carries far more weight than the Cormorant this block was written
   for, so the display sizes run light and slightly tracked-out instead. */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; line-height: 1.12; letter-spacing: -0.005em; }
.display { font-size: clamp(2.5rem, 7vw, 5.4rem); font-weight: 200; letter-spacing: 0.01em; line-height: 1.06; }
h2 { font-size: clamp(1.85rem, 4.4vw, 3.1rem); font-weight: 300; }
h3 { font-size: clamp(1.2rem, 2.6vw, 1.55rem); font-weight: 400; letter-spacing: 0; }
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(138, 109, 48, 0.05);
}
.eyebrow.on-dark { color: var(--gold-soft); border-color: var(--hair-light); background: rgba(215, 181, 120, 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(247, 244, 238, 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; }
/* The split columns are not .section-head, so they inherited no spacing between
   the eyebrow, the h2 and the lede that follows it. */
.split h2 { margin-top: 1.4rem; }
.split h2 + .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: #1c1a17;
  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(28, 26, 23, 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(28, 26, 23, 0.22); }
.btn:active { transform: scale(0.975); }

.btn-ghost {
  background: transparent; color: inherit;
  border: 1px solid var(--hair);
}
.btn-ghost .ic { background: rgba(36, 31, 24, 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(247, 244, 238, 0.12); }
.btn-ghost:hover { background: rgba(138, 109, 48, 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(28, 26, 23, 0.94);
  border: 1px solid rgba(247, 244, 238, 0.14);
  box-shadow: 0 16px 36px -18px rgba(28, 26, 23, 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(28, 26, 23, 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(247, 244, 238, 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(247, 244, 238, 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(22, 20, 16, 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: #1c1a17;
}
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(16, 14, 11,0.72) 0%, rgba(16, 14, 11,0.42) 45%, rgba(16, 14, 11,0.12) 75%, rgba(16, 14, 11,0.05) 100%),
    linear-gradient(180deg, rgba(16, 14, 11,0.62) 0%, rgba(16, 14, 11,0.42) 40%, rgba(16, 14, 11,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(247, 244, 238, 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.3rem; font-weight: 300; 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(247, 244, 238,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(247, 244, 238,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(36, 31, 24, 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(247, 244, 238,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(28, 26, 23,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(22, 20, 16,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(215, 181, 120, 0.92); color: #1c1a17; backdrop-filter: blur(4px);
}
.status-tag.sold { background: rgba(28, 26, 23,0.66); color: rgba(247, 244, 238,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; }
/* height:auto matters: the <img> carries width/height attributes for CLS, and
   a specified height makes the browser ignore aspect-ratio entirely — the
   portrait was being stretched to the full column height and side-cropped. */
.split-media img { border-radius: 20px; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.stat-row { display: flex; gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: 2.4rem; flex-wrap: wrap; }
.stat { min-width: 0; }
.stat span { display: block; max-width: 14ch; }
.stat b { font-family: var(--serif); font-size: 2.3rem; font-weight: 300; 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(247, 244, 238,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; }
/* The inherited sheet only ever put this subhead on cream. On a dark band it
   fell back to --ink and was invisible — the same defect gotchas.md records for
   .section-espresso body copy. */
.section-dark .gallery-subhead, .section-espresso .gallery-subhead, .gallery-subhead.on-dark { color: var(--cream); }
.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(247, 244, 238,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(247, 244, 238,0.06);
  border: 1px solid rgba(247, 244, 238,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(247, 244, 238,0.4); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-soft); background: rgba(247, 244, 238,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(247, 244, 238,0.7); }
.form-note.success { color: var(--gold-bright); }
.form-note.error { color: #e98b7a; }
.enquiry-form .btn { grid-column: 1/-1; justify-self: start; }

/* ---------- Footer ---------- */
.footer { background: var(--charcoal); color: rgba(247, 244, 238,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 { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.4rem; }
.footer-logo img { height: 30px; width: auto; }
/* Anchan shipped a wordmark SVG here. Zenithy publishes their wordmark only as
   a drop-shadowed PNG lockup, so the mark is the traced SVG and the word is set
   in the page font — which is Poppins, the same face Zenithy use. */
.footer-wordmark {
  font-family: var(--serif); font-size: 1.32rem; font-weight: 300;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-soft);
}
.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(247, 244, 238,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(16, 14, 11,0.82) 0%, rgba(16, 14, 11,0.58) 45%, rgba(16, 14, 11,0.24) 75%, rgba(16, 14, 11,0.14) 100%),
    linear-gradient(180deg, rgba(16, 14, 11,0.74) 0%, rgba(16, 14, 11,0.44) 40%, rgba(16, 14, 11,0.86) 100%); }
/* Renders run bright behind the type, so lift the body copy off the image. */
.page-hero.has-bg .lede { color: rgba(247, 244, 238, 0.93); }
.page-hero.has-bg .chip { color: rgba(247, 244, 238, 0.92);
  border-color: rgba(247, 244, 238, 0.34); background: rgba(16, 14, 11, 0.3); }
.page-hero.has-bg .display,
.page-hero.has-bg .lede { text-shadow: 0 1px 20px rgba(16, 14, 11, 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; display: flex; flex-direction: column; }
/* Zenithy's nearby-amenity names are much longer than Anchan's ("British
   International School" vs "Layan Beach"), so one dt wraps to three lines and
   the rest to one. Pushing dd to the bottom of an equal-height grid cell keeps
   the numbers on a line instead of stepping down the row. */
.specs dd { margin-top: auto; }
.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.45rem; font-weight: 300; 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(138, 109, 48, 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(28, 26, 23,0.5); transition: transform 0.4s var(--ease); }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 22px; height: 22px; color: #1c1a17; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(16, 14, 11, 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(247, 244, 238, 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(247, 244, 238, 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(247, 244, 238, 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(16, 14, 11, 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(247, 244, 238, 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(247, 244, 238, 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(247, 244, 238,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(247, 244, 238,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: #1c1a17; }
.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(247, 244, 238,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(247, 244, 238,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(247, 244, 238,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(247, 244, 238,0.78); border-bottom-color: var(--hair-light); }
.section-dark .data-table th, .section-espresso .data-table th { border-bottom-color: var(--hair-light); }

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

/* ---------- Collection tiles (single-page: name + photo only) ----------
   The brief is deliberately thin: the tile carries the collection name, its
   sub-district and one photograph, and every tile is a form trigger. Specs,
   prices and plans live behind the enquiry, not on the page. */
.collections {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1.2rem; margin-top: 3.5rem;
}
.collection {
  grid-column: span 2;
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
  text-align: left; color: var(--cream); font: inherit;
  border-radius: 24px; overflow: hidden;
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
/* Anchan ran five tiles; Zenithy runs two groups. `.collections` is the
   three-up row of what you can actually buy (two La Ville collections +
   Grand). `.collections--track` is the four-up row of delivered, sold-out
   projects — smaller, quieter, and there as evidence rather than as an offer. */
.collections--track { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.collections--track .collection { grid-column: span 1; border-radius: 18px; }

/* Every source photograph is pre-cropped to 16:10 at build time (960x600), so
   the served bytes match the frame and object-fit has nothing left to do. */
.collection img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 16/10;
  transition: transform 1.2s var(--ease);
}
/* The scrim carries the label, the title and the spec line over photographs
   that run from dusk sky to lit pool water. It is measured in PIXELS, not
   percentages: the two rows have very different heights (~250px vs ~178px at
   1240px), and a percentage scrim puts the sub-district label of the short
   row on bare sky. Each row therefore gets its own stops. */
.collection::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,14,11,0.95) 0, rgba(16,14,11,0.88) 74px, rgba(16,14,11,0.6) 112px, rgba(16,14,11,0.18) 152px, rgba(16,14,11,0) 190px);
  transition: background 0.6s var(--ease);
}
.collections--track .collection::after {
  background: linear-gradient(to top, rgba(16,14,11,0.95) 0, rgba(16,14,11,0.9) 62px, rgba(16,14,11,0.66) 94px, rgba(16,14,11,0.22) 128px, rgba(16,14,11,0) 162px);
}
.collection:hover { transform: translateY(-6px); box-shadow: 0 34px 66px -32px rgba(30,20,10,0.55); }
.collection:hover img { transform: scale(1.06); }
.collection:hover::after { background: linear-gradient(to top, rgba(16,14,11,0.96) 0, rgba(16,14,11,0.91) 74px, rgba(16,14,11,0.68) 112px, rgba(16,14,11,0.26) 152px, rgba(16,14,11,0.04) 190px); }
.collections--track .collection:hover::after { background: linear-gradient(to top, rgba(16,14,11,0.96) 0, rgba(16,14,11,0.93) 62px, rgba(16,14,11,0.72) 94px, rgba(16,14,11,0.3) 128px, rgba(16,14,11,0.04) 162px); }
.collection-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0.9rem 1.5rem 1.35rem;
}
.collections--track .collection-body { padding: 0.7rem 1.1rem 0.95rem; }
.collection-body .loc {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--gold-bright);
  /* This label sits highest in the stack, where the scrim is weakest and the
     photograph is often bright sky or a pale roof. Two shadows — a tight one for
     edge contrast, a wide one for a local plate — hold it without darkening the
     whole tile further. */
  text-shadow: 0 1px 3px rgba(16, 14, 11, 0.95), 0 2px 18px rgba(16, 14, 11, 0.85);
}
.collection-body h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-top: 0.35rem; color: var(--cream);
  text-shadow: 0 1px 16px rgba(16, 14, 11, 0.7);
}
.collections--track .collection-body h3 { font-size: clamp(1.05rem, 1.9vw, 1.2rem); margin-top: 0.35rem; }
/* `.collection-price` is the sibling sites' name for this line. Zenithy
   publishes no prices at all (see data/source-facts.json → gaps), so the same
   slot carries villa size / bedrooms instead and the markup says so. */
.collection-price, .collection-spec {
  display: block; margin-top: 0.45rem;
  font-family: var(--serif); font-size: 1rem; font-weight: 300; color: var(--gold-bright);
  text-shadow: 0 1px 12px rgba(16, 14, 11, 0.9);
}
.collections--track .collection-spec { font-size: 0.82rem; margin-top: 0.3rem; }
/* Status pill. The developer badges every project Now Available / Coming Soon /
   Sold Out on their own /developments page; repeating it here is what keeps the
   page honest about the four that are gone. */
.collection-badge {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.34rem 0.8rem; border-radius: 999px;
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: #221a0c; background: linear-gradient(135deg, #d7b578 0%, #b08847 100%);
  box-shadow: 0 6px 16px rgba(30, 20, 10, 0.45);
}
.collection-badge.is-soon {
  color: var(--gold-bright); background: rgba(16, 14, 11, 0.72);
  border: 1px solid rgba(215, 181, 120, 0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.collection-badge.is-gone {
  color: rgba(247, 244, 238, 0.72); background: rgba(16, 14, 11, 0.6);
  border: 1px solid rgba(247, 244, 238, 0.22);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: none;
}
.collection-cue {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.65rem;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(247, 244, 238, 0.82);
}
.collections--track .collection-cue { margin-top: 0.6rem; font-size: 0.6rem; letter-spacing: 0.14em; }
.collection-cue svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease); }
.collection:hover .collection-cue svg { transform: translateX(4px); }
@media (max-width: 900px) {
  .collections { grid-template-columns: repeat(2, 1fr); }
  .collection { grid-column: span 1; }
  .collections--track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .collections, .collections--track { grid-template-columns: 1fr; }
  /* One column means the short tiles are now as wide as the tall ones, so
     they get the taller row's scrim back. */
  .collections--track .collection::after { background: linear-gradient(to top, rgba(16,14,11,0.95) 0, rgba(16,14,11,0.88) 74px, rgba(16,14,11,0.6) 112px, rgba(16,14,11,0.18) 152px, rgba(16,14,11,0) 190px); }
}

/* ---------- Disclosure strip (we are an agency, not the developer) ------- */
.disclosure {
  margin-top: 2.5rem; padding: 1rem 1.2rem;
  border: 1px solid var(--hair-light); border-radius: 14px;
  font-size: 0.82rem; color: rgba(247, 244, 238, 0.66);
}
.disclosure a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Espresso sections need the same on-dark treatment as .section-dark
   The inherited sheet only ever put pillars/specs/stats on .section-dark, so on
   the plum "Investment" band the body copy fell back to --ink-soft (#6a6154)
   over #2e2820 — a contrast ratio under 1.5:1, effectively invisible. */
.section-espresso .pillar { border-top-color: var(--hair-light); }
.section-espresso .pillar p { color: rgba(247, 244, 238, 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(247, 244, 238, 0.6); }
.section-espresso .chip { color: rgba(247, 244, 238, 0.75); border-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(247, 244, 238, 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(247, 244, 238, 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;
}

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