@charset "UTF-8";
/* ==========================================================================
   Sattva Centralis — Core Stylesheet
   Jigani, Bommasandra-Jigani Link Road, Anekal, South Bengaluru
   Sections: Variables / Reset / Typography / Global / Header / Hero /
             Buttons / Highlights / Pricing / Floor Plans / Amenities /
             Location / FAQ / Forms / Footer / Utilities
   Responsive rules live in responsive.css
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root{
  /* Brand */
  --gold:#b4894a;
  --gold-deep:#8f6a33;
  --gold-soft:#d9be86;
  --gold-wash:#f6f0e4;

  /* Ink & neutrals */
  --ink:#191a16;
  --ink-2:#3a3c34;
  --muted:#6e7166;
  --muted-2:#8d9086;

  /* Surfaces */
  --bg:#fcfbf7;
  --surface:#ffffff;
  --surface-2:#f6f4ed;
  --deep:#15160f;
  --deep-2:#22241a;

  /* Lines & shadow */
  --line:#e7e3d8;
  --line-2:#d8d3c4;
  --shadow-sm:0 1px 2px rgba(25,26,22,.05), 0 2px 8px rgba(25,26,22,.04);
  --shadow:0 4px 14px rgba(25,26,22,.07), 0 14px 40px rgba(25,26,22,.06);
  --shadow-lg:0 10px 30px rgba(25,26,22,.10), 0 30px 70px rgba(25,26,22,.10);

  /* Layout */
  --container:1240px;
  --container-narrow:880px;
  --gutter:20px;
  --radius:4px;
  --radius-lg:8px;

  /* Spacing scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:88px; --s-10:120px;

  /* Type */
  --font-display:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,"Times New Roman",serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Chrome */
  --header-h:76px;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*,*::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(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,picture,svg,video{max-width:100%;display:block}
img{height:auto}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-6) 0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
::selection{background:var(--gold-soft);color:var(--ink)}
[hidden]{display:none !important}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.16;
  letter-spacing:-.015em;color:var(--ink)}
h1{font-size:clamp(2rem,5.2vw,3.5rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.28}
h4{font-size:1.0625rem;line-height:1.35}
h5,h6{font-family:var(--font-body);font-size:.8125rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong,b{font-weight:600;color:var(--ink)}
/* --ink is near-black, so the rule above turns <strong> invisible on any dark
   background (1.04:1 against the footer). Emphasis should inherit the local
   text colour there and lean on weight alone. Google also treats dark-on-dark
   text as hidden text, so this is a ranking risk as well as a legibility one. */
.site-footer strong, .site-footer b,
.section--dark strong, .section--dark b,
.cta-band strong, .cta-band b,
.hero strong, .hero b,
.page-hero strong, .page-hero b{color:inherit}
/* The footer's fine print is dimmed; its labels need to sit above it. */
.footer-seo strong{color:#d7d5c9}
.lead{font-size:clamp(1.0625rem,1.7vw,1.1875rem);color:var(--ink-2);line-height:1.72}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:var(--s-4)}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);flex:none}
.section-head--center .eyebrow::before{display:none}
.prose p{color:var(--ink-2)}
.prose h3{margin:var(--s-6) 0 var(--s-3)}
.prose ul{margin:0 0 1.05em;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:20px;margin-bottom:.45em;color:var(--ink-2)}
.prose ul li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;
  border:1px solid var(--gold);transform:rotate(45deg)}
.prose a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color .2s}
.prose a:hover{color:var(--ink)}
/* First mention of the project name on each page links to the site root.
   Bold whether or not an outer <strong> already covers the phrase. */
.prose a[href="https://www.sattvascentralis.in/"]{font-weight:700}

/* ==========================================================================
   4. GLOBAL LAYOUT
   ========================================================================== */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:var(--container-narrow)}
.section{padding-block:var(--s-9)}
.section--tight{padding-block:var(--s-8)}
.section--alt{background:var(--surface-2)}
.section--wash{background:linear-gradient(180deg,var(--gold-wash) 0%,var(--bg) 100%)}
.section--dark{background:var(--deep);color:#efece2}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark p{color:#c6c4b7}
.section--dark .eyebrow{color:var(--gold-soft)}
.section--dark .eyebrow::before{background:var(--gold-soft)}

.section-head{max-width:760px;margin-bottom:var(--s-7)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{margin-top:var(--s-4);color:var(--muted);font-size:1.0625rem}

.grid{display:grid;gap:var(--s-5)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-8);align-items:center}
.split--reverse .split__media{order:2}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;min-height:48px;font-size:.9375rem;font-weight:600;letter-spacing:.02em;
  border:1px solid transparent;border-radius:var(--radius);cursor:pointer;text-align:center;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),
             transform .2s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px;flex:none}

.btn-primary{background:var(--gold);color:#fff;border-color:var(--gold);box-shadow:0 2px 10px rgba(180,137,74,.28)}
.btn-primary:hover{background:var(--gold-deep);border-color:var(--gold-deep);box-shadow:0 8px 22px rgba(180,137,74,.34)}

.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:var(--deep-2);border-color:var(--deep-2)}

.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-outline:hover{border-color:var(--ink);background:var(--ink);color:#fff}

.btn-light{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-light:hover{background:#fff;color:var(--ink);border-color:#fff}

.btn-ghost{background:transparent;color:var(--gold-deep);border-color:transparent;padding-inline:0;min-height:auto}
.btn-ghost:hover{color:var(--ink);transform:none}
.btn-ghost::after{content:"\2192";transition:transform .25s var(--ease)}
.btn-ghost:hover::after{transform:translateX(5px)}

.btn-wa{background:#1faa53;color:#fff;border-color:#1faa53}
.btn-wa:hover{background:#179044;border-color:#179044}

.btn-block{width:100%}
.btn-lg{padding:17px 34px;min-height:56px;font-size:1rem}
.btn-sm{padding:10px 18px;min-height:40px;font-size:.875rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.btn-row--center{justify-content:center}

.btn.is-loading{pointer-events:none;opacity:.85}
.btn.is-loading .btn__label{visibility:hidden}
.btn.is-loading::after{content:"";position:absolute;width:18px;height:18px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   6. HEADER
   ========================================================================== */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0}

.site-header{position:fixed;inset:0 0 auto 0;z-index:120;height:var(--header-h);
  display:flex;align-items:center;background:transparent;
  transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.site-header__inner{display:flex;align-items:center;gap:var(--s-5);width:100%;
  max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* Logo */
.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo__mark{width:38px;height:38px;flex:none;border:1px solid var(--gold);display:grid;
  place-items:center;font-family:var(--font-display);font-size:.9375rem;font-weight:700;
  letter-spacing:.02em;color:var(--gold)}
.logo__text{display:flex;flex-direction:column;line-height:1.05}
.logo__name{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;transition:color .3s}
.logo__by{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);
  transition:color .3s}

/* Nav */
.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:2px;list-style:none}
.nav__link{display:block;padding:9px 11px;font-size:.875rem;font-weight:500;color:rgba(255,255,255,.9);
  border-radius:var(--radius);position:relative;white-space:nowrap;transition:color .25s}
.nav__link::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:#fff}
.header-cta{flex:none;margin-left:var(--s-3)}
.nav-toggle{position:relative;display:none;width:46px;height:46px;flex:none;margin-left:auto;
  align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.35);border-radius:var(--radius)}
.nav-toggle__bars,.nav-toggle__bars::before,.nav-toggle__bars::after{display:block;width:20px;height:1.5px;
  background:#fff;transition:transform .3s var(--ease),opacity .2s}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute}
.nav-toggle__bars::before{transform:translateY(-6px)}
.nav-toggle__bars::after{transform:translateY(6px)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:rotate(-45deg)}

/* Scrolled / solid state */
.site-header.is-solid{background:rgba(252,251,247,.96);box-shadow:0 1px 0 var(--line),0 6px 24px rgba(25,26,22,.06);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-header.is-solid .logo__name{color:var(--ink)}
.site-header.is-solid .logo__by{color:var(--muted)}
.site-header.is-solid .nav__link{color:var(--ink-2)}
.site-header.is-solid .nav__link:hover,.site-header.is-solid .nav__link[aria-current="page"]{color:var(--ink)}
.site-header.is-solid .nav-toggle{border-color:var(--line-2)}
.site-header.is-solid .nav-toggle__bars,
.site-header.is-solid .nav-toggle__bars::before,
.site-header.is-solid .nav-toggle__bars::after{background:var(--ink)}
.site-header.is-solid .btn-light{background:var(--gold);color:#fff;border-color:var(--gold)}
.site-header.is-solid .btn-light:hover{background:var(--gold-deep);border-color:var(--gold-deep)}

/* Inner pages open with a solid header */
body.has-solid-header .site-header{background:rgba(252,251,247,.96);box-shadow:0 1px 0 var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.has-solid-header .logo__name{color:var(--ink)}
body.has-solid-header .logo__by{color:var(--muted)}
body.has-solid-header .nav__link{color:var(--ink-2)}
body.has-solid-header .nav__link[aria-current="page"]{color:var(--ink)}
body.has-solid-header .nav-toggle{border-color:var(--line-2)}
body.has-solid-header .nav-toggle__bars,
body.has-solid-header .nav-toggle__bars::before,
body.has-solid-header .nav-toggle__bars::after{background:var(--ink)}
body.has-solid-header .btn-light{background:var(--gold);color:#fff;border-color:var(--gold)}
body.has-solid-header .btn-light:hover{background:var(--gold-deep);border-color:var(--gold-deep)}

.nav-backdrop{position:fixed;inset:0;background:rgba(21,22,15,.5);opacity:0;visibility:hidden;
  z-index:118;transition:opacity .3s,visibility .3s}
.nav-backdrop.is-open{opacity:1;visibility:visible}

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero{position:relative;min-height:clamp(560px,92vh,880px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--deep)}
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease);will-change:opacity}
.hero__slide.is-active{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 7.5s linear}
.hero__slide.is-active img{transform:scale(1)}
/* Two washes: the vertical one seats the header and the CTA row, the
   horizontal one darkens the left third where the copy sits. Without it the
   H1 lands on top of the project signage in the photograph and the two sets
   of lettering read as a ghosted double image. */
.hero__scrim{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(21,22,15,.60) 0%,rgba(21,22,15,.26) 34%,rgba(21,22,15,.74) 78%,rgba(21,22,15,.90) 100%),
    linear-gradient(90deg,rgba(21,22,15,.58) 0%,rgba(21,22,15,.34) 38%,rgba(21,22,15,0) 72%)}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:calc(var(--header-h) + var(--s-7)) var(--s-8)}
.hero__badge{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;margin-bottom:var(--s-5);
  border:1px solid rgba(217,190,134,.55);background:rgba(21,22,15,.35);border-radius:100px;
  font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero__badge .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-soft);
  animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.hero h1{color:#fff;max-width:15ch;margin-bottom:var(--s-4);text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero__sub{font-family:var(--font-display);font-size:clamp(1.0625rem,2.3vw,1.5rem);font-weight:400;
  color:#efeadd;max-width:36ch;margin-bottom:var(--s-5);line-height:1.4}
.hero__addr{display:flex;align-items:flex-start;gap:9px;color:rgba(255,255,255,.82);font-size:.9375rem;
  margin-bottom:var(--s-6);max-width:46ch}
.hero__addr svg{width:17px;height:17px;flex:none;margin-top:4px;color:var(--gold-soft)}

.hero__facts{display:flex;flex-wrap:wrap;margin-bottom:var(--s-6);
  border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.hero__fact{padding:15px 26px 15px 0;margin-right:26px;border-right:1px solid rgba(255,255,255,.18)}
.hero__fact:last-child{border-right:0;margin-right:0;padding-right:0}
.hero__fact b{display:block;font-family:var(--font-display);font-size:1.375rem;font-weight:600;color:#fff;line-height:1.15}
.hero__fact span{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}

/* In normal flow, directly under the CTA row. Absolutely positioning these in
   the hero's bottom-right corner made them overlap the last button on short or
   wide viewports — and because they sat above it, they swallowed its clicks. */
.hero__dots{display:flex;gap:9px;margin-top:var(--s-6);padding:0}
.hero__dot{width:30px;height:3px;background:rgba(255,255,255,.32);border-radius:2px;transition:background .3s}
.hero__dot.is-active{background:var(--gold-soft)}
.hero__dot:hover{background:rgba(255,255,255,.65)}

/* ==========================================================================
   8. PAGE HERO (inner pages)
   ========================================================================== */
.page-hero{position:relative;padding-block:calc(var(--header-h) + var(--s-8)) var(--s-8);
  background:var(--deep);overflow:hidden}
.page-hero__bg{position:absolute;inset:0}
.page-hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.page-hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,22,15,.86) 0%,rgba(21,22,15,.6) 50%,rgba(21,22,15,.88) 100%)}
.page-hero__inner{position:relative;z-index:2}
.page-hero h1{color:#fff;max-width:20ch;margin-bottom:var(--s-4)}
.page-hero p{color:#d5d2c6;max-width:62ch;font-size:1.0625rem}
.page-hero .btn-row{margin-top:var(--s-6)}

/* Breadcrumbs */
.breadcrumb{margin-bottom:var(--s-5)}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;font-size:.8125rem}
.breadcrumb li{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.6)}
.breadcrumb li+li::before{content:"/";color:rgba(255,255,255,.35)}
.breadcrumb a{color:rgba(255,255,255,.78);transition:color .2s}
.breadcrumb a:hover{color:var(--gold-soft)}
.breadcrumb [aria-current="page"]{color:var(--gold-soft)}

/* ==========================================================================
   9. CARDS & HIGHLIGHTS
   ========================================================================== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.card__body{padding:var(--s-5)}
.card__media{position:relative;overflow:hidden;background:var(--surface-2);aspect-ratio:16/9}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card h3{margin-bottom:var(--s-2)}
.card p{color:var(--muted);font-size:.9375rem}

.highlight{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--s-5);text-align:center;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.highlight:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.highlight__icon{width:44px;height:44px;margin:0 auto var(--s-4);display:grid;place-items:center;
  border-radius:50%;background:var(--gold-wash);color:var(--gold-deep)}
.highlight__icon svg{width:21px;height:21px}
.highlight b{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:600;
  color:var(--ink);line-height:1.2;margin-bottom:2px}
.highlight span{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.fact-table{width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden}
.fact-table tr+tr{border-top:1px solid var(--line)}
.fact-table th,.fact-table td{padding:15px 20px;text-align:left;font-size:.9375rem;vertical-align:top}
.fact-table th{width:42%;font-weight:600;color:var(--muted);background:var(--surface-2)}
.fact-table td{color:var(--ink)}

.strip{display:flex;flex-wrap:wrap;gap:var(--s-5);padding:var(--s-5) var(--s-6);
  background:var(--gold-wash);border:1px solid #eee0c6;border-radius:var(--radius-lg)}
.strip__item{flex:1 1 160px}
.strip__item b{display:block;font-family:var(--font-display);font-size:1.25rem;color:var(--ink)}
.strip__item span{font-size:.8125rem;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}

.note{padding:var(--s-5);background:var(--surface-2);border-left:3px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;font-size:.9375rem;color:var(--ink-2)}
.note--warn{background:#fdf6ec;border-left-color:#d79b3a}
.note strong{display:block;margin-bottom:4px;color:var(--ink)}

.figure{margin:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.figure img{width:100%}
.figure figcaption{padding:12px 18px;font-size:.8125rem;color:var(--muted);
  background:var(--surface-2);border-top:1px solid var(--line)}

/* ==========================================================================
   10. PRICING
   ========================================================================== */
.price-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.price-table{min-width:660px}
.price-table thead th{padding:16px 20px;text-align:left;font-family:var(--font-body);font-size:.75rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.price-table tbody tr+tr{border-top:1px solid var(--line)}
.price-table tbody tr{transition:background .25s}
.price-table tbody tr:hover{background:var(--gold-wash)}
.price-table td{padding:18px 20px;font-size:.9375rem;vertical-align:middle}
.price-table .u-config{font-family:var(--font-display);font-size:1.125rem;font-weight:600;color:var(--ink)}
.price-table .u-price{font-weight:600;color:var(--gold-deep)}

.price-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.price-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold-soft)}
.price-card__type{font-family:var(--font-display);font-size:1.75rem;font-weight:600;line-height:1}
.price-card__size{font-size:.9375rem;color:var(--muted)}
.price-card__amt{font-family:var(--font-display);font-size:1.375rem;font-weight:600;color:var(--gold-deep)}
.price-card__amt small{display:block;font-family:var(--font-body);font-size:.75rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.price-card ul{list-style:none;font-size:.875rem;color:var(--ink-2)}
.price-card ul li{padding:7px 0;border-bottom:1px dashed var(--line);display:flex;justify-content:space-between;gap:12px}
.price-card ul li:last-child{border-bottom:0}
.price-card ul li span{color:var(--muted)}
.price-card .btn{margin-top:auto}

/* ==========================================================================
   11. FLOOR PLANS
   ========================================================================== */
.plan-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.plan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan-card__media{position:relative;aspect-ratio:12/7;background:#fff;overflow:hidden;
  border-bottom:1px solid var(--line)}
.plan-card__media img{width:100%;height:100%;object-fit:contain}

/* Zoomable floor plan — plans are detailed drawings, so allow a full-size view */
.plan-zoom{display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in;
  position:relative;aspect-ratio:12/7;overflow:hidden}
.plan-zoom img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease)}
.plan-zoom:hover img{transform:scale(1.04)}
.plan-zoom__hint{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:100px;background:rgba(21,22,15,.78);color:#fff;
  font-size:.75rem;font-weight:600;letter-spacing:.06em;opacity:0;transform:translateY(6px);
  transition:opacity .3s,transform .3s var(--ease)}
.plan-zoom__hint svg{width:14px;height:14px}
.plan-zoom:hover .plan-zoom__hint,.plan-zoom:focus-visible .plan-zoom__hint{opacity:1;transform:none}
.plan-card__body{padding:var(--s-5)}
.plan-card__body h3{margin-bottom:var(--s-2)}
.plan-card__meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-bottom:var(--s-4);
  font-size:.875rem;color:var(--muted)}
.plan-card__meta b{color:var(--ink);font-weight:600}

/* ==========================================================================
   12. AMENITIES
   ========================================================================== */
.amenity{display:flex;align-items:flex-start;gap:var(--s-4);padding:var(--s-5);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.amenity:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--gold-soft)}
.amenity__icon{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--gold-wash);color:var(--gold-deep)}
.amenity__icon svg{width:22px;height:22px}
.amenity h3{font-size:1.0625rem;margin-bottom:5px}
.amenity p{font-size:.875rem;color:var(--muted);margin:0}

.amenity-tile{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;background:var(--deep)}
.amenity-tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.amenity-tile:hover img{transform:scale(1.06)}
.amenity-tile__cap{position:absolute;inset:auto 0 0 0;padding:var(--s-6) var(--s-4) var(--s-4);
  background:linear-gradient(180deg,transparent,rgba(21,22,15,.88));color:#fff}
.amenity-tile__cap b{display:block;font-family:var(--font-display);font-size:1.125rem;font-weight:600}
.amenity-tile__cap span{font-size:.8125rem;color:rgba(255,255,255,.72)}

/* ==========================================================================
   13. LOCATION
   ========================================================================== */
.loc-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.loc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.loc-card__media{aspect-ratio:12/7;overflow:hidden;background:var(--surface-2)}
.loc-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.loc-card:hover .loc-card__media img{transform:scale(1.05)}
.loc-card__body{padding:var(--s-5)}
/* Icon-led variant: used where the supplied photo set has no image that
   honestly represents the category (IT parks, schools, hospitals, retail).
   A mismatched stock photo is worse than a clear icon. */
.loc-card__title{display:flex;align-items:center;gap:var(--s-3)}
.loc-card__icon{width:42px;height:42px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:var(--gold-wash);color:var(--gold-deep)}
.loc-card__icon svg{width:21px;height:21px}
.loc-card:has(.loc-card__icon) .loc-card__body{padding-top:var(--s-6)}
.loc-card h3{font-size:1.125rem;margin-bottom:var(--s-3)}
.loc-list{list-style:none}
.loc-list li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);
  padding:10px 0;border-bottom:1px dashed var(--line);font-size:.9375rem}
.loc-list li:last-child{border-bottom:0}
.loc-list span:first-child{color:var(--ink-2)}
.loc-list span:last-child{flex:none;font-weight:600;color:var(--gold-deep);font-size:.875rem}

/* Scannable fact lists inside prose.
   Long runs of "X is approximately N km away" read as a wall of text; as a
   name/distance pair the eye can jump straight to the row it wants. */
.prose .fact-list{list-style:none;margin:0 0 var(--s-5);padding:0;
  border-top:1px solid var(--line)}
.prose .fact-list li{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s-4);padding:11px 0;margin:0;border-bottom:1px solid var(--line);
  font-size:.9375rem}
.prose .fact-list li::before{display:none}
.prose .fact-list li span:first-child{color:var(--ink-2);padding-left:0}
.prose .fact-list li span:last-child{flex:none;font-weight:600;color:var(--gold-deep);
  font-size:.875rem;white-space:nowrap}
.prose .fact-list em{font-style:normal;color:var(--muted-2);font-size:.8125rem}

.loc-note{font-size:.8125rem;color:var(--muted);margin-top:calc(var(--s-5) * -1 + 4px)}

.fact-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5) var(--s-6);
  margin-bottom:var(--s-5)}
.fact-cols h4{font-family:var(--font-body);font-size:.75rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:var(--s-3)}
.fact-cols .fact-list{margin-bottom:0}

.map-embed{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-2)}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ==========================================================================
   14. FAQ
   ========================================================================== */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);width:100%;
  padding:22px 0;text-align:left;font-family:var(--font-display);font-size:1.0625rem;font-weight:600;
  color:var(--ink);transition:color .25s}
.faq__q:hover{color:var(--gold-deep)}
.faq__icon{position:relative;width:20px;height:20px;flex:none;margin-top:4px}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:50%;top:50%;background:var(--gold);
  transform:translate(-50%,-50%);transition:transform .3s var(--ease),opacity .3s}
.faq__icon::before{width:13px;height:1.5px}
.faq__icon::after{width:1.5px;height:13px}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq__a{overflow:hidden;height:0}
.faq__a-inner{padding:0 0 22px;max-width:80ch;color:var(--ink-2);font-size:.9375rem;line-height:1.75}
.faq__a-inner p+p{margin-top:.85em}

/* ==========================================================================
   15. FORMS
   ========================================================================== */
.form-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--s-6);box-shadow:var(--shadow-sm)}
.form-panel h3{margin-bottom:var(--s-2)}
.form-panel .form-intro{color:var(--muted);font-size:.9375rem;margin-bottom:var(--s-5)}

.field{margin-bottom:var(--s-4);position:relative}
.field label{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.04em;color:var(--ink-2);margin-bottom:7px}
.field .req{color:#c0392b;margin-left:2px}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;font-size:.9375rem;
  background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--radius);
  transition:border-color .25s,box-shadow .25s,background .25s}
.field textarea{min-height:104px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;background-repeat:no-repeat;
  background-position:right 15px center;background-size:11px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236e7166' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E")}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted-2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(180,137,74,.14)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#c0392b;background:#fdf4f3}
.field.is-valid input,.field.is-valid select{border-color:#3a9d5d}
.field__error{display:none;margin-top:6px;font-size:.8125rem;color:#c0392b}
.field.has-error .field__error{display:block}
.field--phone .phone-group{display:flex}
.field--phone .phone-code{display:grid;place-items:center;padding:0 13px;font-size:.9375rem;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--line-2);border-right:0;border-radius:var(--radius) 0 0 var(--radius)}
.field--phone input{border-radius:0 var(--radius) var(--radius) 0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}

.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}

.form-consent{display:flex;align-items:flex-start;gap:10px;margin-bottom:var(--s-4);
  font-size:.75rem;line-height:1.6;color:var(--muted)}
.form-consent input{width:16px;height:16px;flex:none;margin-top:3px;accent-color:var(--gold)}
.form-consent a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}

.form-success{display:none;padding:var(--s-6) var(--s-4);text-align:center}
.form-success.is-visible{display:block;animation:fadeUp .5s var(--ease)}
.form-success__icon{width:56px;height:56px;margin:0 auto var(--s-4);display:grid;place-items:center;
  border-radius:50%;background:#eaf6ee;color:#2f8b50}
.form-success__icon svg{width:27px;height:27px}
.form-success h3{margin-bottom:var(--s-2)}
.form-success p{color:var(--muted);font-size:.9375rem}
.form-note{margin-top:var(--s-4);font-size:.75rem;color:var(--muted-2);text-align:center;line-height:1.6}

/* ==========================================================================
   16. MODAL
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:var(--s-4)}
.modal.is-open{display:flex}
.modal__backdrop{position:absolute;inset:0;background:rgba(21,22,15,.66);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fadeIn .3s var(--ease)}
.modal__dialog{position:relative;z-index:2;width:100%;max-width:460px;max-height:92vh;overflow-y:auto;
  background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  animation:modalIn .4s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal__head{padding:var(--s-6) var(--s-6) 0;position:relative}
.modal__head .eyebrow{margin-bottom:var(--s-2)}
.modal__head h3{font-size:1.375rem;margin-bottom:6px}
.modal__head p{font-size:.875rem;color:var(--muted)}
.modal__body{padding:var(--s-5) var(--s-6) var(--s-6)}
.modal__close{position:absolute;top:14px;right:14px;width:38px;height:38px;display:grid;place-items:center;
  border-radius:50%;color:var(--muted);transition:background .2s,color .2s}
.modal__close:hover{background:var(--surface-2);color:var(--ink)}
.modal__close svg{width:17px;height:17px}
body.modal-open{overflow:hidden}

/* ==========================================================================
   17. CTA BANDS
   ========================================================================== */
.cta-band{position:relative;padding-block:var(--s-9);background:var(--deep);overflow:hidden;text-align:center}
.cta-band__bg{position:absolute;inset:0}
.cta-band__bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.cta-band__bg::after{content:"";position:absolute;inset:0;background:rgba(21,22,15,.62)}
.cta-band__inner{position:relative;z-index:2;max-width:680px;margin-inline:auto}
.cta-band h2{color:#fff;margin-bottom:var(--s-4)}
.cta-band p{color:#c9c7ba;margin-bottom:var(--s-6)}

.cta-inline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-5);
  padding:var(--s-6);margin-top:var(--s-6);background:var(--gold-wash);border:1px solid #eee0c6;
  border-radius:var(--radius-lg)}
/* This box carries its own 32px of padding. When it closes a section, trim the
   section's own padding by the same amount so the gap to the next section
   matches the gap between two plain sections. */
.section > .container > .cta-inline:last-child,
.section > .container--narrow > .cta-inline:last-child{margin-bottom:calc(var(--s-6) * -1)}
.cta-inline__text{flex:1 1 320px}
.cta-inline h3{font-size:1.25rem;margin-bottom:5px}
.cta-inline p{font-size:.9375rem;color:var(--muted);margin:0}

/* ==========================================================================
   18. GALLERY & LIGHTBOX
   ========================================================================== */
.gallery-filters{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-6)}
.gallery-filter{padding:9px 18px;font-size:.875rem;font-weight:500;color:var(--muted);
  border:1px solid var(--line-2);border-radius:100px;transition:all .25s var(--ease)}
.gallery-filter:hover{border-color:var(--ink);color:var(--ink)}
.gallery-filter.is-active{background:var(--ink);border-color:var(--ink);color:#fff}

.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.gallery-item{position:relative;overflow:hidden;border-radius:var(--radius-lg);aspect-ratio:4/3;
  background:var(--surface-2);cursor:zoom-in;border:0;padding:0;width:100%}
.gallery-item.is-hidden{display:none}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gallery-item:hover img{transform:scale(1.07)}
.gallery-item__cap{position:absolute;inset:auto 0 0 0;padding:var(--s-6) var(--s-4) var(--s-3);text-align:left;
  background:linear-gradient(180deg,transparent,rgba(21,22,15,.85));color:#fff;font-size:.875rem;font-weight:500;
  opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s var(--ease)}
.gallery-item:hover .gallery-item__cap,.gallery-item:focus-visible .gallery-item__cap{opacity:1;transform:none}

.lightbox{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;
  background:rgba(15,16,11,.94);padding:var(--s-6) var(--s-4)}
.lightbox.is-open{display:flex;animation:fadeIn .25s var(--ease)}
.lightbox__fig{margin:0;max-width:1100px;width:100%;text-align:center}
.lightbox__fig img{width:100%;max-height:78vh;object-fit:contain;border-radius:var(--radius)}
.lightbox__fig figcaption{margin-top:var(--s-4);color:rgba(255,255,255,.78);font-size:.875rem}
.lightbox__btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;display:grid;
  place-items:center;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  border-radius:50%;transition:background .25s}
.lightbox__btn:hover{background:rgba(255,255,255,.2)}
.lightbox__btn svg{width:20px;height:20px}
.lightbox__prev{left:var(--s-4)}
.lightbox__next{right:var(--s-4)}
.lightbox__close{position:absolute;top:var(--s-4);right:var(--s-4);width:46px;height:46px;display:grid;
  place-items:center;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  border-radius:50%;transition:background .25s}
.lightbox__close:hover{background:rgba(255,255,255,.2)}
.lightbox__close svg{width:18px;height:18px}
.lightbox__count{position:absolute;bottom:var(--s-5);left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.6);font-size:.8125rem;letter-spacing:.1em}

/* ==========================================================================
   19. STICKY / FLOATING CTA
   ========================================================================== */
.sticky-cta{position:fixed;inset:auto 0 0 0;z-index:115;display:none;
  background:rgba(252,251,247,.97);border-top:1px solid var(--line);
  box-shadow:0 -4px 22px rgba(25,26,22,.10);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding-bottom:env(safe-area-inset-bottom)}
.sticky-cta__inner{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:1px;background:var(--line)}
/* Phone/WhatsApp disabled until launch — the bar becomes a single full-width CTA */
.sticky-cta.is-enquiry-only .sticky-cta__inner{grid-template-columns:1fr}
.sticky-cta.is-enquiry-only a{flex-direction:row;gap:9px;font-size:.8125rem;letter-spacing:.08em}
.sticky-cta a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:10px 6px;min-height:60px;background:var(--surface);font-size:.6875rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);transition:background .2s,color .2s}
.sticky-cta a svg{width:19px;height:19px}
.sticky-cta a:active{background:var(--surface-2)}
.sticky-cta .sc-wa{color:#1faa53}
.sticky-cta .sc-enquire{background:var(--gold);color:#fff}
.sticky-cta .sc-enquire:active{background:var(--gold-deep)}

.float-cta{position:fixed;right:22px;bottom:26px;z-index:114;display:flex;flex-direction:column;gap:11px}
.float-cta a{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;color:#fff;
  box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s}
.float-cta a:hover{transform:translateY(-3px) scale(1.05);box-shadow:var(--shadow-lg)}
.float-cta a svg{width:23px;height:23px}
.float-cta .fc-wa{background:#1faa53}
.float-cta .fc-call{background:var(--ink)}
.float-cta .fc-enquire{background:var(--gold)}

/* ==========================================================================
   20. FOOTER
   ========================================================================== */
.site-footer{background:var(--deep);color:#b9b7ab;padding-block:var(--s-9) 0;font-size:.9375rem}
.site-footer h4{font-family:var(--font-body);font-size:.75rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-soft);margin-bottom:var(--s-4)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:var(--s-7)}
.footer-brand .logo__name{color:#fff}
.footer-brand .logo__by{color:rgba(255,255,255,.55)}
.footer-brand p{margin-top:var(--s-4);color:#9b998e;font-size:.875rem;line-height:1.72;max-width:38ch}
.footer-links{list-style:none}
.footer-links li+li{margin-top:9px}
.footer-links a{color:#b9b7ab;font-size:.875rem;display:inline-block;transition:color .25s,padding-left .25s}
.footer-links a:hover{color:var(--gold-soft);padding-left:5px}
.footer-contact{list-style:none}
.footer-contact li{display:flex;gap:11px;margin-bottom:var(--s-4);font-size:.875rem;color:#9b998e;line-height:1.6}
.footer-contact svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--gold-soft)}
.footer-contact a{color:#d7d5c9;transition:color .25s}
.footer-contact a:hover{color:var(--gold-soft)}

.footer-seo{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid rgba(255,255,255,.1)}
.footer-seo p{font-size:.8125rem;line-height:1.78;color:#88867c}
.footer-seo p+p{margin-top:.9em}
.footer-bottom{margin-top:var(--s-6);padding-block:var(--s-5);border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4);
  font-size:.8125rem;color:#7f7d74}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:var(--s-5)}
.footer-bottom a{transition:color .25s}
.footer-bottom a:hover{color:var(--gold-soft)}

/* ==========================================================================
   21. COOKIE CONSENT
   ========================================================================== */
.cookie-bar{position:fixed;left:var(--s-4);right:var(--s-4);bottom:var(--s-4);z-index:130;display:none;
  align-items:center;gap:var(--s-5);max-width:640px;margin-inline:auto;padding:var(--s-4) var(--s-5);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.cookie-bar.is-visible{display:flex;animation:fadeUp .45s var(--ease)}
.cookie-bar p{font-size:.8125rem;color:var(--muted);line-height:1.6;margin:0}
.cookie-bar p a{color:var(--gold-deep);text-decoration:underline}
.cookie-bar .btn{flex:none}

/* ==========================================================================
   22. 404
   ========================================================================== */
.error-page{min-height:100vh;display:flex;align-items:center;
  padding-block:calc(var(--header-h) + var(--s-8)) var(--s-8);text-align:center;background:var(--bg)}
.error-page__code{font-family:var(--font-display);font-size:clamp(4.5rem,16vw,9rem);font-weight:600;
  line-height:1;color:var(--gold-soft);letter-spacing:-.04em}
.error-page h1{margin:var(--s-4) 0}
.error-page p{max-width:52ch;margin-inline:auto;color:var(--muted)}

/* ==========================================================================
   23. LEGAL PAGES
   ========================================================================== */
.legal{padding-block:calc(var(--header-h) + var(--s-8)) var(--s-9)}
.legal h1{margin-bottom:var(--s-3)}
.legal__meta{font-size:.8125rem;color:var(--muted-2);margin-bottom:var(--s-7);
  padding-bottom:var(--s-5);border-bottom:1px solid var(--line)}
.legal h2{font-size:clamp(1.25rem,2.4vw,1.5rem);margin:var(--s-7) 0 var(--s-3)}
.legal h3{font-size:1.0625rem;margin:var(--s-5) 0 var(--s-2)}
.legal p,.legal li{color:var(--ink-2);font-size:.9375rem;line-height:1.78}
.legal ul{margin:0 0 1.05em;padding-left:0;list-style:none}
.legal ul li{position:relative;padding-left:20px;margin-bottom:.5em}
.legal ul li::before{content:"";position:absolute;left:0;top:.75em;width:6px;height:6px;
  border:1px solid var(--gold);transform:rotate(45deg)}
.legal .toc{padding:var(--s-5);background:var(--surface-2);border-radius:var(--radius-lg);margin-bottom:var(--s-7)}
.legal .toc h2{margin:0 0 var(--s-3);font-size:.75rem;font-family:var(--font-body);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.legal .toc ol{columns:2;column-gap:var(--s-6);padding-left:1.2em;font-size:.875rem}
.legal .toc li{margin-bottom:6px;break-inside:avoid}
.legal .toc a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   24. UTILITIES
   ========================================================================== */
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.text-center{text-align:center}
.mt-0{margin-top:0}.mt-4{margin-top:var(--s-4)}.mt-5{margin-top:var(--s-5)}
.mt-6{margin-top:var(--s-6)}.mt-7{margin-top:var(--s-7)}
.mb-4{margin-bottom:var(--s-4)}.mb-5{margin-bottom:var(--s-5)}.mb-6{margin-bottom:var(--s-6)}
.gold{color:var(--gold-deep)}
.nowrap{white-space:nowrap}

/* Reveal-on-scroll — progressive enhancement.
   Content is visible by default. The hidden start state is applied only when
   the inline head script has added .js to <html>, so if main.js is blocked,
   fails or 404s, every section still renders instead of staying invisible. */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}

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