/* ==========================================================================
   Sattva Evermore - Core Stylesheet
   Kaggalipura, Kanakapura Main Road, South Bengaluru
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Typography
   4.  Layout primitives
   5.  Buttons & CTAs
   6.  Header / navigation
   7.  Hero & sliders
   8.  Content components
   9.  Forms & modal
   10. Sticky CTAs, popup, WhatsApp
   11. Footer
   12. Utilities & motion preferences
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Palette - restrained luxury: warm paper, charcoal ink, clay + muted gold */
  --paper:      #FBF9F5;
  --paper-2:    #F4F0E8;
  --paper-3:    #EBE4D8;
  --ink:        #17170F;
  --ink-2:      #3B3B31;
  --ink-3:      #6E6E62;
  --line:       #E1D9CA;
  --line-soft:  #EFE9DE;
  --clay:       #8C6B4F;
  --gold:       #A9873F;
  --forest:     #2B3A2D;
  --white:      #FFFFFF;
  --danger:     #A03A2B;
  --ok:         #2F6A45;

  /* Type */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.4rem, 6.4vw, 4.6rem);
  --fs-h1:      clamp(2.1rem, 5vw, 3.5rem);
  --fs-h2:      clamp(1.7rem, 3.6vw, 2.6rem);
  --fs-h3:      clamp(1.22rem, 2.1vw, 1.5rem);
  --fs-h4:      clamp(1.05rem, 1.6vw, 1.16rem);
  --fs-body:    clamp(0.98rem, 1.05vw, 1.06rem);
  --fs-small:   0.875rem;
  --fs-xs:      0.78rem;

  /* Space & rhythm.
     --section-y is applied to BOTH edges, so the gap at a seam is twice this
     value: ~88px at 390px, ~154px at 1280px, ~176px on a large desktop.
     The upper clamp matters - without it, 8vw reached 120px a side and a
     wide screen showed 240px of empty ground between sections. */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(2.75rem, 6vw, 5.5rem);
  --maxw: 1240px;
  --maxw-narrow: 780px;

  /* Shape */
  --radius: 2px;
  --radius-lg: 4px;

  /* Chrome */
  --header-h: 72px;
  --mobilebar-h: 62px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 992px) {
  :root { --header-h: 84px; --mobilebar-h: 0px; }
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: 0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: var(--mobilebar-h);
}

img, picture, svg, video { max-width: 100%; display: block; }
img { height: auto; background: var(--paper-2); }

a { color: inherit; text-decoration: none; }
a:not([class]) {
  color: var(--clay);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:not([class]):hover { color: var(--ink); }

button, input, select, textarea { font: inherit; color: inherit; }

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

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

::selection { background: var(--ink); color: var(--paper); }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 500; letter-spacing: 0.01em; line-height: 1.4; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.7;
  color: var(--ink-2);
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 1rem;
}
.eyebrow--light { color: rgba(255,255,255,0.78); }

.rule {
  width: 56px; height: 1px;
  background: var(--gold);
  border: 0; margin: 0 0 1.5rem;
}
.rule--center { margin-inline: auto; }

strong, b { font-weight: 500; color: var(--ink); }

/* First body-copy mention of the project on each main page, linked to the
   domain root. Bold against the 300-weight body, with a gold underline so it
   reads as a deliberate brand link rather than an ordinary inline link. */
.project-link {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.project-link:hover { color: var(--clay); text-decoration-color: var(--clay); }

/* Outbound reference links (Wikipedia, BIAL, BMRCL). Same bold weight as the
   brand link, with a clay underline rather than gold to tell them apart. */
.ext-link {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.ext-link:hover { color: var(--clay); }

.section--ink .project-link, .section--forest .project-link,
.section--ink .ext-link, .section--forest .ext-link { color: var(--white); }
.section--ink .project-link:hover, .section--forest .project-link:hover,
.section--ink .ext-link:hover, .section--forest .ext-link:hover {
  color: #E6C889; text-decoration-color: #E6C889;
}

.prose > * + h2 { margin-top: 2em; }
.prose > * + h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1.15em; }
.prose li { margin-bottom: 0.45em; }
.prose li::marker { color: var(--gold); }

/* ---------- 4. Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.25rem, 4.5vw, 4rem); }
.section--alt { background: var(--paper-2); }
.section--ink { background: var(--ink); color: rgba(255,255,255,0.74); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--white); }
.section--forest { background: var(--forest); color: rgba(255,255,255,0.76); }
.section--forest h2, .section--forest h3 { color: var(--white); }

/* Section rhythm at a seam.
   Two adjacent sections each contribute their own vertical padding, so the
   gap at the boundary doubles. Where the backgrounds differ that reads as a
   deliberate change of ground. Where they match there is nothing to justify
   it and the seam reads as a void - so collapse the second section's top
   padding and let the first one's bottom padding set the interval. */
.section:not(.section--alt):not(.section--ink):not(.section--forest):not(.cta-band)
  + .section:not(.section--alt):not(.section--ink):not(.section--forest):not(.cta-band),
.section--alt + .section--alt,
.section--ink + .section--ink,
.section--forest + .section--forest,
.section--forest + .cta-band,
.cta-band + .section--forest {
  padding-top: 0;
}

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }

/* Overview - editorial two-column intro.
   A centred narrow column left large voids either side on a wide screen, so
   the label and key facts take the left track and the prose the right. */
.overview { display: grid; gap: clamp(1.75rem, 3.5vw, 3.5rem); }
@media (min-width: 900px) {
  /* Track ratio chosen so the prose fills its column at a comfortable
     measure - a tighter cap would leave slack at the right edge and bring
     back the empty-margin look this layout exists to fix. */
  .overview { grid-template-columns: minmax(220px, 1fr) minmax(0, 1.45fr); }
}
.overview__aside .rule { margin-bottom: 1.75rem; }
.overview__body { max-width: 76ch; }
.overview__body > .btn-row { margin-top: 2rem; }

.overview__meta { margin: 0; display: grid; gap: 1.1rem; }
.overview__meta > div { display: grid; gap: 0.25rem; }
.overview__meta dt {
  font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
}
.overview__meta dd {
  margin: 0; font-size: var(--fs-small); color: var(--ink); line-height: 1.5;
}

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-first > .split__media { order: -1; }
  .split--wide-text { grid-template-columns: 1.15fr 1fr; }
}

.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper-3);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--4x3 { aspect-ratio: 4 / 3; }
.media-frame--3x2 { aspect-ratio: 3 / 2; }
.media-frame--1x1 { aspect-ratio: 1 / 1; }
.media-frame--16x9 { aspect-ratio: 16 / 9; }
.media-frame--12x7 { aspect-ratio: 12 / 7; }   /* native ratio of the supplied stills */
.media-frame--wide { aspect-ratio: 1896 / 830; } /* native ratio of the supplied renders */

/* Drawings must never be cropped */
.media-frame--plan { aspect-ratio: 12 / 7; background: var(--white); }
.media-frame--plan img { object-fit: contain; }

/* Honest image labelling - marketing render vs. awaiting approved drawing */
.is-render::after, .is-indicative::after, .is-placeholder::after {
  position: absolute;
  left: 0; bottom: 0;
  background: rgba(23,23,15,0.82);
  color: rgba(255,255,255,0.9);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  pointer-events: none;
}
.is-render::after { content: "Artist's impression"; }
.is-indicative::after { content: "Indicative \00b7 not to scale"; }
.is-placeholder::after { content: "Awaiting approved drawing"; }

/* Breadcrumbs */
.breadcrumbs {
  padding-block: 1rem 0;
  font-size: var(--fs-small);
  color: var(--ink-3);
}
.breadcrumbs ol {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 0.4rem 0.55rem; margin: 0; padding: 0;
}
.breadcrumbs li + li::before { content: "/"; margin-right: 0.55rem; color: var(--line); }
.breadcrumbs a:hover { color: var(--clay); }
.breadcrumbs [aria-current] { color: var(--ink); }

/* ---------- 5. Buttons & CTAs ---------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.btn:hover { --btn-bg: var(--clay); --btn-bd: var(--clay); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); }

.btn--light { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-bd: var(--white); }
.btn--light:hover { --btn-bg: var(--gold); --btn-fg: var(--white); --btn-bd: var(--gold); }

.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255,255,255,0.55); }
.btn--outline-light:hover { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-bd: var(--white); }

.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--white); --btn-bd: var(--gold); }
.btn--gold:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); }

.btn--sm { min-height: 40px; padding: 0.55rem 1.1rem; font-size: 0.75rem; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn-row--center { justify-content: center; }

/* Quiet text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.3rem;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.link-arrow::after { content: "\2192"; transition: transform .25s var(--ease); }
.link-arrow:hover { color: var(--clay); border-color: var(--clay); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow--light { color: var(--white); border-color: rgba(255,255,255,0.35); }
.link-arrow--light:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- 6. Header / navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 1px 24px rgba(23,23,15,0.07); }

.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.32rem; font-weight: 600; color: var(--ink);
  letter-spacing: 0.03em;
}
.brand__sub {
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
}

.nav { display: none; }
@media (min-width: 992px) {
  .nav { display: flex; align-items: center; gap: clamp(0.7rem, 1.15vw, 1.5rem); }
}
.nav__link {
  position: relative;
  font-size: clamp(0.7rem, 0.62vw, 0.78rem);
  font-weight: 400; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-2);
  padding-block: 0.4rem;
  white-space: nowrap;          /* never let a nav label wrap the header */
  transition: color .25s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--gold);
  transition: right .3s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { right: 0; }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 500; }

.header__actions { display: flex; align-items: center; gap: 0.6rem; }
.header__cta { display: none; }
@media (min-width: 992px) { .header__cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 11px;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
@media (min-width: 992px) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block; height: 1.5px; width: 100%; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0 0 0 auto; z-index: 950;
  width: min(88vw, 380px);
  background: var(--paper);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .34s var(--ease);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav__close {
  width: 42px; height: 42px; border: 1px solid var(--line); background: transparent;
  border-radius: var(--radius); font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--ink);
}
.mobile-nav__list { list-style: none; margin: 0; padding: 0.5rem var(--gutter) 1rem; }
.mobile-nav__list a {
  display: block; padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1rem; letter-spacing: 0.03em; color: var(--ink);
}
.mobile-nav__list a[aria-current="page"] { color: var(--clay); }
.mobile-nav__foot { padding: 1.25rem var(--gutter) 1rem; display: grid; gap: 0.6rem; }
.mobile-nav__legal { padding: 0 var(--gutter) 2rem; font-size: var(--fs-xs); color: var(--ink-3); }

.backdrop {
  position: fixed; inset: 0; z-index: 940;
  background: rgba(23,23,15,0.45);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.backdrop.is-visible { opacity: 1; visibility: visible; }

body.is-locked { overflow: hidden; }

/* ---------- 7. Hero & sliders ---------- */
.hero {
  position: relative;
  min-height: clamp(520px, 78vh, 760px);
  display: flex; align-items: flex-end;
  background: var(--ink);
  overflow: hidden;
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,12,8,0.52) 0%, rgba(12,12,8,0.30) 38%, rgba(12,12,8,0.84) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.75rem, 6vw, 4rem); }
.hero__content { max-width: 44rem; color: rgba(255,255,255,0.86); }
.hero__title {
  font-size: var(--fs-display);
  color: var(--white);
  margin-bottom: 0.3em;
  letter-spacing: -0.015em;
}
.hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  color: rgba(255,255,255,0.9);
  font-weight: 300;
  max-width: 36rem;
  margin-bottom: 1.6rem;
}
.hero__facts {
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.65rem;
}
.hero__facts li {
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.92);
}
.hero__facts li.is-price { border-color: rgba(214,181,116,0.75); color: #E6C889; }
.hero__note {
  margin-top: 1.35rem;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.66);
  max-width: 44rem;
  line-height: 1.6;
}
.hero__dots {
  position: absolute; z-index: 3;
  right: var(--gutter); bottom: clamp(1.25rem, 3vw, 2rem);
  display: flex; gap: 0.5rem;
}
.hero__dot {
  width: 34px; height: 3px; padding: 0;
  border: 0; background: rgba(255,255,255,0.32);
  cursor: pointer; border-radius: 2px;
  transition: background-color .3s var(--ease);
}
.hero__dot[aria-selected="true"] { background: #D6B574; }

/* Compact page hero for inner pages */
.page-hero {
  position: relative;
  min-height: clamp(300px, 44vh, 440px);
  display: flex; align-items: flex-end;
  background: var(--ink);
  overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,12,8,0.44) 0%, rgba(12,12,8,0.8) 100%);
}
.page-hero__inner {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.75rem, 4vw, 2.75rem);
  color: rgba(255,255,255,0.84);
}
.page-hero h1 { color: var(--white); margin-bottom: 0.4em; }
.page-hero p { max-width: 46rem; color: rgba(255,255,255,0.84); }
.page-hero .breadcrumbs { color: rgba(255,255,255,0.65); padding-top: 0; margin-bottom: 1.25rem; }
.page-hero .breadcrumbs [aria-current] { color: rgba(255,255,255,0.95); }
.page-hero .breadcrumbs li + li::before { color: rgba(255,255,255,0.35); }
.page-hero .breadcrumbs a:hover { color: #E6C889; }

/* ---------- 8. Content components ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  transition: border-color .3s var(--ease);
}
.card:hover { border-color: var(--clay); }
.card__label {
  font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 0.75rem;
}
.card p:last-child { margin-bottom: 0; }

/* Stat / highlight cards */
.stat {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  color: var(--ink); line-height: 1.05; letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}
.stat__label {
  font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay);
  margin-bottom: 0.5rem;
}
.stat__note { font-size: var(--fs-small); color: var(--ink-3); margin: 0; line-height: 1.55; }

/* Configuration cards */
.config-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
}
.config-card__body { padding: clamp(1.4rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.config-card__type {
  font-family: var(--font-display); font-size: 1.9rem; color: var(--ink); line-height: 1; margin-bottom: 0.25rem;
}
.config-card__size { font-size: 0.95rem; color: var(--clay); margin-bottom: 1rem; }
.config-card dl { margin: 0 0 1.25rem; display: grid; gap: 0.55rem; }
.config-card dl > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--line); padding-bottom: 0.5rem; }
.config-card dt { font-size: var(--fs-small); color: var(--ink-3); }
.config-card dd { margin: 0; font-size: var(--fs-small); color: var(--ink); text-align: right; }
.config-card .btn { margin-top: auto; }
.config-card[hidden] { display: none; }

/* Feature / amenity list */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.feature-list li {
  position: relative; padding-left: 1.7rem; font-size: 0.97rem;
}
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 0.66em;
  width: 9px; height: 1px; background: var(--gold);
}

/* Status chips */
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-3); background: var(--white);
}
.chip--pending { border-color: #D8C48F; background: #FBF5E4; color: #6F5514; }
.chip--confirmed { border-color: #BFD8C6; background: #F0F7F2; color: var(--ok); }
.chip--tba { border-color: var(--line); background: var(--paper-2); color: var(--ink-3); }

/* Tables -> responsive cards */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%; border-collapse: collapse; font-size: 0.95rem; background: var(--white);
}
table.data caption {
  caption-side: bottom; text-align: left; padding-top: 0.9rem;
  font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6;
}
table.data th, table.data td {
  text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data thead th {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  background: var(--paper-2);
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data th[scope="row"] { font-weight: 500; color: var(--ink); }

@media (max-width: 640px) {
  table.data.is-stacked, table.data.is-stacked thead, table.data.is-stacked tbody,
  table.data.is-stacked tr, table.data.is-stacked th, table.data.is-stacked td { display: block; width: 100%; }
  table.data.is-stacked thead { display: none; }
  table.data.is-stacked tr {
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    margin-bottom: 0.85rem; padding: 0.35rem 0.9rem;
  }
  table.data.is-stacked td, table.data.is-stacked th {
    border-bottom: 1px dotted var(--line-soft); padding: 0.6rem 0;
    display: flex; justify-content: space-between; gap: 1rem; text-align: right;
  }
  table.data.is-stacked td::before, table.data.is-stacked th[scope="row"]::before {
    content: attr(data-label);
    font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-3); text-align: left; flex: none; padding-right: 0.75rem;
  }
  table.data.is-stacked tr > *:last-child { border-bottom: 0; }
}

/* Accordion (FAQ) */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__btn {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  width: 100%; padding: 1.25rem 0; background: none; border: 0; cursor: pointer;
  text-align: left; font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  color: var(--ink); line-height: 1.35;
}
.accordion__btn:hover { color: var(--clay); }
.accordion__icon { position: relative; flex: none; width: 16px; height: 16px; margin-top: 0.35em; }
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; background: var(--clay);
  left: 0; top: 50%; width: 100%; height: 1.5px; transform: translateY(-50%);
}
.accordion__icon::after { transform: translateY(-50%) rotate(90deg); transition: transform .3s var(--ease); }
.accordion__btn[aria-expanded="true"] .accordion__icon::after { transform: translateY(-50%) rotate(0deg); }
.accordion__panel { padding: 0 0 1.4rem; max-width: 72ch; }
.accordion__panel[hidden] { display: none; }
.accordion__panel p:first-child { margin-top: 0; }

/* Tabs */
.tabs__list {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin-bottom: 2rem;
}
.tabs__tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 0.75rem 1.1rem; cursor: pointer;
  font-size: 0.8rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.tabs__panel[hidden] { display: none; }

/* Filter pills */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.filter-pill {
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.5rem 1.05rem; cursor: pointer;
  font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.filter-pill:hover { border-color: var(--clay); color: var(--ink); }
.filter-pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Gallery */
.gallery-grid {
  display: grid; gap: clamp(0.6rem, 1.4vw, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.gallery-item {
  position: relative; display: block; width: 100%; padding: 0; margin: 0;
  aspect-ratio: 12 / 7;
  border: 0; background: var(--paper-3); cursor: zoom-in; overflow: hidden;
  border-radius: var(--radius-lg);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.75rem 1rem 0.85rem;
  background: linear-gradient(180deg, rgba(12,12,8,0) 0%, rgba(12,12,8,0.8) 100%);
  color: rgba(255,255,255,0.94);
  font-size: var(--fs-small); text-align: left;
}
.gallery-item[hidden] { display: none; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,10,7,0.94);
  display: none; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open { display: flex; }
.lightbox__figure { margin: 0; max-width: min(1100px, 100%); }
.lightbox__figure img { max-height: 78vh; width: auto; margin-inline: auto; object-fit: contain; }
.lightbox__caption { color: rgba(255,255,255,0.8); font-size: var(--fs-small); text-align: center; padding-top: 1rem; }
.lightbox__btn {
  position: absolute; background: transparent; border: 1px solid rgba(255,255,255,0.3);
  color: var(--white); width: 48px; height: 48px; border-radius: 50%;
  cursor: pointer; font-size: 1.2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .25s var(--ease);
}
.lightbox__btn:hover { background: rgba(255,255,255,0.14); }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__prev { left: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative; padding: 0 0 1.6rem 1.9rem;
  border-left: 1px solid var(--line);
}
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before {
  content: ""; position: absolute; left: -4.5px; top: 0.55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--gold);
}
.timeline li.is-current::before { background: var(--gold); }
.timeline__date {
  display: block; font-size: var(--fs-xs); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--clay); margin-bottom: 0.25rem;
}
.timeline__title { font-family: var(--font-body); font-weight: 500; color: var(--ink); margin: 0 0 0.2rem; font-size: 1rem; }
.timeline p { font-size: var(--fs-small); color: var(--ink-3); margin: 0; }

/* Callouts */
.note {
  border-left: 2px solid var(--gold);
  background: var(--paper-2);
  padding: 1rem 1.25rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  line-height: 1.65;
}
.note--plain { border-left-color: var(--line); background: transparent; }
.note strong { color: var(--ink); }
.note + .note { margin-top: 0.75rem; }
.section--ink .note, .section--forest .note {
  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7);
}
.section--ink .note strong, .section--forest .note strong { color: var(--white); }

.disclaimer-text { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.65; }

/* Map */
/* width must stay definite: aspect-ratio + min-height would otherwise
   inflate the box past the viewport on narrow screens. */
.map-embed {
  position: relative;
  width: 100%; max-width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper-2); overflow: hidden;
}
@media (min-width: 700px) { .map-embed { min-height: 320px; } }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Address card shown until a real map embed is configured. Written for the
   visitor, not the developer - the setup note lives in an HTML comment. */
.map-embed__fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; text-align: center; padding: 2rem;
  color: var(--ink-3); font-size: var(--fs-small); line-height: 1.6;
  background:
    linear-gradient(var(--paper-2), var(--paper-2)) padding-box,
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(140,107,79,0.05) 11px 22px);
}
.map-embed__pin { width: 30px; height: 30px; color: var(--clay); margin-bottom: 0.15rem; }
.map-embed__fallback strong {
  display: block; font-family: var(--font-display);
  font-size: 1.35rem; color: var(--ink); letter-spacing: 0.01em;
}

/* CTA band */
.cta-band { background: var(--forest); color: rgba(255,255,255,0.8); }
.cta-band h2 { color: var(--white); }
.cta-band__inner { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1fr 1fr; } }

/* Quick links grid */
.quicklinks {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.quicklinks a {
  background: var(--white); padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  transition: background-color .25s var(--ease);
}
.quicklinks a:hover { background: var(--paper-2); }
.quicklinks__title { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); }
.quicklinks__desc { font-size: var(--fs-small); color: var(--ink-3); line-height: 1.55; }

/* ---------- 9. Forms & modal ---------- */
.form { display: grid; gap: 1rem; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.35rem; }
.field label {
  font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.field .req { color: var(--clay); }
.field input, .field select, .field textarea {
  width: 100%;
  min-width: 0;                 /* date/number inputs carry an intrinsic width */
  max-width: 100%;
  padding: 0.8rem 0.9rem;
  min-height: 48px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.98rem; font-weight: 300;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E6E62' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.95rem center; background-size: 12px;
  padding-right: 2.4rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--clay); outline: none; box-shadow: 0 0 0 3px rgba(140,107,79,0.14);
}
.field .error {
  font-size: var(--fs-xs); color: var(--danger); letter-spacing: 0; text-transform: none; min-height: 1.2em;
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field--phone .phone-wrap { display: flex; }
.field--phone .phone-prefix {
  display: inline-flex; align-items: center; padding: 0 0.75rem;
  border: 1px solid var(--line); border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--paper-2); font-size: 0.95rem; color: var(--ink-3);
}
.field--phone input { border-radius: 0 var(--radius) var(--radius) 0; }

/* Honeypot - hidden from real users, visible to naive bots */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.consent { display: flex; gap: 0.65rem; align-items: flex-start; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; }
.consent input { width: 18px; height: 18px; min-height: 0; flex: none; margin-top: 0.2em; accent-color: var(--clay); }
.consent a { color: inherit; text-decoration: underline; }

.form__status { font-size: var(--fs-small); min-height: 1.5em; }
.form__status.is-error { color: var(--danger); }
.form__status.is-success { color: var(--ok); }
.form__status.is-pending { color: var(--ink-3); }

.form-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.form-panel--ink { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); }
.form-panel--ink .field label { color: rgba(255,255,255,0.68); }
.form-panel--ink .consent { color: rgba(255,255,255,0.62); }
.form-panel--ink .form__status.is-success { color: #8FD0A8; }
.form-panel--ink .form__status.is-error { color: #F0A392; }
.form-panel--ink .form__status.is-pending { color: rgba(255,255,255,0.6); }
.form-panel--ink .field .error { color: #F0A392; }
/* background-color, NOT the `background` shorthand: the shorthand resets
   background-repeat/size/position, which would leave the select's custom
   arrow tiling at full height across the field. */
.form-panel--ink .field input, .form-panel--ink .field select, .form-panel--ink .field textarea {
  background-color: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22); color: var(--white);
}
.form-panel--ink .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23D8D4C8' stroke-width='1.4'/%3E%3C/svg%3E");
}
.form-panel--ink .field input::placeholder, .form-panel--ink .field textarea::placeholder { color: rgba(255,255,255,0.42); }
.form-panel--ink .field--phone .phone-prefix { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.72); }
.form-panel--ink option { color: var(--ink); }

/* Modal */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgba(23,23,15,0.62);
  overflow-y: auto;
}
.modal.is-open { display: flex; }
.modal__dialog {
  position: relative;
  width: min(560px, 100%);
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 24px 70px rgba(12,12,8,0.3);
}
.modal__close {
  position: absolute; top: 0.85rem; right: 0.85rem;
  width: 40px; height: 40px; border: 1px solid var(--line); background: var(--paper);
  border-radius: var(--radius); cursor: pointer; color: var(--ink); font-size: 1.15rem; line-height: 1;
  z-index: 2;
}
.modal__close:hover { background: var(--paper-2); }
.modal__title { margin-bottom: 0.4rem; padding-right: 2.5rem; }
.modal__intro { font-size: var(--fs-small); color: var(--ink-3); margin-bottom: 1.5rem; }

/* ---------- 10. Sticky CTAs, popup, WhatsApp ---------- */
/* Anchored bottom-right rather than mid-height, so it never overlaps
   artwork or headlines in the hero. */
.desktop-cta {
  position: fixed; right: 0; bottom: clamp(1.25rem, 4vh, 2.5rem);
  z-index: 880; display: none; flex-direction: column; gap: 1px;
  border-radius: var(--radius) 0 0 var(--radius); overflow: hidden;
  box-shadow: 0 8px 30px rgba(12,12,8,0.16);
}
@media (min-width: 992px) { .desktop-cta { display: flex; } }
/* Collapsed to icons so it never covers page content; the labels slide
   out on hover or keyboard focus. */
.desktop-cta { max-width: 52px; transition: max-width .35s var(--ease); }
.desktop-cta:hover, .desktop-cta:focus-within { max-width: 240px; }
/* Only one CTA left (pre-launch), so it is worth showing open rather than as a
   bare icon - but ONLY where the viewport is wide enough that the expanded rail
   clears the 1240px container. Below this it stays collapsed, otherwise it
   covers the right edge of page content (it was overlapping the consent
   checkbox on the enquiry form at 1280px). */
@media (min-width: 1440px) {
  .desktop-cta--solo { max-width: 240px; }
}
.desktop-cta a, .desktop-cta button {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1rem; border: 0; cursor: pointer;
  background: var(--ink); color: var(--paper);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .25s var(--ease);
}
.desktop-cta a:hover, .desktop-cta button:hover { background: var(--clay); color: var(--white); }
.desktop-cta .is-primary { background: var(--gold); color: var(--white); }
.desktop-cta .is-primary:hover { background: var(--clay); }
.desktop-cta svg { width: 17px; height: 17px; flex: none; }

.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 890;
  /* Auto columns, so the bar re-flows correctly when the phone and WhatsApp
     CTAs are withheld during pre-launch and only Enquire remains. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 992px) { .mobile-cta { display: none; } }
.mobile-cta a, .mobile-cta button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
  min-height: var(--mobilebar-h); padding: 0.5rem 0.35rem;
  background: transparent; border: 0; border-left: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.92); cursor: pointer;
  font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase;
}
.mobile-cta > *:first-child { border-left: 0; }
.mobile-cta .is-primary { background: var(--gold); color: var(--white); font-weight: 500; }
.mobile-cta svg { width: 18px; height: 18px; }

.wa-float {
  position: fixed; z-index: 885;
  right: clamp(0.9rem, 2.5vw, 1.5rem);
  bottom: calc(var(--mobilebar-h) + 0.9rem);
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #128C4B; color: var(--white); border: 0; cursor: pointer;
  box-shadow: 0 6px 22px rgba(12,12,8,0.24);
  transition: transform .25s var(--ease);
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 27px; height: 27px; }
/* Redundant on desktop - WhatsApp is already in the sticky rail. */
@media (min-width: 992px) { .wa-float { display: none; } }

/* Delayed / exit-intent popup */
.lead-popup .modal__dialog { width: min(680px, 100%); padding: 0; overflow: hidden; }
.lead-popup__grid { display: grid; }
@media (min-width: 720px) { .lead-popup__grid { grid-template-columns: 0.8fr 1.2fr; } }
.lead-popup__media { position: relative; min-height: 180px; background: var(--paper-3); display: none; }
@media (min-width: 720px) { .lead-popup__media { display: block; } }
.lead-popup__media img { width: 100%; height: 100%; object-fit: cover; }
.lead-popup__body { padding: clamp(1.5rem, 3vw, 2.1rem); }

/* ---------- 11. Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.64); font-size: 0.9rem; }
.site-footer a:hover { color: var(--white); }
.footer__top {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 760px) { .footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer__brand .brand__name { color: var(--white); }
.footer__brand .brand__sub { color: rgba(255,255,255,0.5); }
.footer__about { margin-top: 1.25rem; max-width: 34rem; line-height: 1.7; }
.footer__heading {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--white);
  margin-bottom: 1.1rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer__contact { display: grid; gap: 0.75rem; }
.footer__contact .is-unset { color: rgba(255,255,255,0.4); font-style: italic; }
.footer__legal-note {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: 1.75rem;
  font-size: var(--fs-xs); line-height: 1.75; color: rgba(255,255,255,0.52);
}
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: 1.35rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: rgba(255,255,255,0.52);
}
.footer__bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem 1.35rem; margin: 0; padding: 0; }

/* ---------- 12. Utilities & motion ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 1100; background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.25rem; font-size: var(--fs-small);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 1.5rem; }
.mb-3 { margin-bottom: 2.25rem; }
.muted { color: var(--ink-3); }
.nowrap { white-space: nowrap; }

/* Scroll reveal - opt-in, transform+opacity only */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .mobile-cta, .desktop-cta, .wa-float, .modal, .backdrop, .mobile-nav { display: none !important; }
  body { padding-bottom: 0; background: #fff; }
  .hero, .page-hero { min-height: 0; }
}