/* ===== 00-base.css ===== */
/* ==========================================================================
   Pristine O2 World — 00-base.css (foundation)
   Tokens · @font-face · reset · .page · paper texture · .sec-label · .sec-title
   · buttons · form fields · header/nav · offcanvas · modal · responsive helpers
   Desktop (>=1200px): every Figma px value is written as calc(N * var(--u)).
   Below 1200px the scaled canvas is abandoned (plain px / clamp()).
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --u: calc(
    100vw / 1920
  ); /* one design pixel (JS in <head> corrects for the scrollbar) */

  --c-forest: #0f2e2c;
  --c-green: #5d9670;
  --c-green-2: #309452;
  --c-brown: #523c16;
  --c-gold: #a9834a;
  --c-gold-2: #c9a86e;
  --c-gold-3: #ddb672;
  --c-gold-4: #b88731;
  --c-gold-5: #a67d3c;
  --c-text: #686868;
  --c-text-2: #3a3a3a;
  --c-text-3: #595a5c;
  --c-cream: #fffbf7;
  --c-cream-2: #fefaf6;
  --c-arch: rgba(20, 48, 17, 0.95);
  --c-line-gold: #daccb1;
  --c-error: #b3261e;

  --grad-primary: linear-gradient(90deg, #0f2e2c 0%, #309452 100%);
  --grad-gold: linear-gradient(90deg, #523c16 0%, #b88731 100%);
  --grad-floor: linear-gradient(90deg, #523c16 0%, #a67d3c 100%);

  --f-display: "Brown Casalova", "Italiana", "Cormorant Garamond", serif;
  --f-script: "Great Day", "Great Vibes", cursive;
  --f-body: "Poppins", sans-serif;
  --f-nav: "Montserrat", sans-serif;
  --f-num: "Playfair Display", serif;
  --f-small: "Manrope", sans-serif;
  --f-grot: "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-kai: "Lora", serif;
  --f-amp: "Brygada 1918", serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-menu: cubic-bezier(0.77, 0, 0.175, 1);
  --t-hover: 0.3s ease;
  --header-h: calc(107 * var(--u));
}
@media (min-width: 1920px) {
  :root {
    --u: 1px;
  }
}

/* ---------- 2. Local fonts ---------- */
@font-face {
  font-family: "Brown Casalova";
  src: url("../fonts/BrownCasalova.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Great Day";
  src: url("../fonts/GreatDay.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Great Day";
  src: url("../fonts/GreatDay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 3. Reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}
body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-text);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden; /* safety net: never a horizontal scrollbar (propagates to the viewport) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* lenis.css hides the viewport scrollbar while stopped; keep Bootstrap's own
   scroll-lock + padding compensation in charge so the layout never jumps. */
html.lenis.lenis-stopped {
  overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote {
  margin: 0;
  font-weight: 400;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
img,
svg {
  vertical-align: middle;
}
em {
  font-style: italic;
}
strong {
  font-weight: 500;
}
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}
::selection {
  background: rgba(169, 131, 74, 0.25);
  color: var(--c-forest);
}

/* Page wrapper: >=1920 screens show the design 1:1 centered; body is cream full-bleed. */
.page {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
}

/* Paper texture helper (cream sections: opacity .06 · dark arches: .15) */
.paper {
  position: relative;
  background: var(--c-cream);
}
.paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../images/paper-texture.webp") center / cover no-repeat;
  opacity: 0.06;
}
.paper--dark {
  background: var(--c-arch);
}
.paper--dark::before {
  opacity: 0.15;
}

/* ---------- 4. .sec-label — vertical side label ---------- */
.sec-label {
  position: absolute;
  top: 0;
  left: calc(66.5 * var(--u));
  z-index: 2;
  margin: 0;
  padding: 0;
  pointer-events: none;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
  font: 400 calc(32 * var(--u)) / 1 var(--f-display);
  color: var(--c-gold);
  text-transform: capitalize;
  letter-spacing: 0;
}
.sec-label::after {
  /* the 156u gold line (sits on top after the 180° turn) */
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: calc(156 * var(--u));
  margin-top: calc(26 * var(--u));
  background: var(--c-gold);
  opacity: 0.37;
}

/* ---------- 5. .sec-title — stacked heading ----------
   --st-top  : top of the script word in design px (91 default, 75 where the spec says so)
   --st-left : left offset of the script word in design px
   The big heading's box ends at the script's bottom (script top + 60) so the
   subtitle's 24u margin lands exactly where Figma puts it. */
.sec-title {
  --st-top: 91;
  --st-left: 0;
  position: relative;
}
.sec-title__big {
  margin: 0;
  height: calc((var(--st-top) + 60) * var(--u));
  font: 400 calc(100 * var(--u)) / normal var(--f-display);
  color: var(--c-forest);
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}
.sec-title__script {
  position: absolute;
  left: calc(var(--st-left) * var(--u));
  top: calc(var(--st-top) * var(--u));
  font: 400 calc(60 * var(--u)) / 1 var(--f-script);
  color: var(--c-green);
  text-transform: capitalize;
  white-space: nowrap;
  letter-spacing: 0;
}
.sec-title__sub {
  margin: calc(24 * var(--u)) 0 0;
  font: 300 calc(24 * var(--u)) / normal var(--f-body);
  color: var(--c-brown);
  text-transform: capitalize;
}
.sec-title--light .sec-title__big,
.sec-title--light .sec-title__sub {
  color: #fff;
}
.sec-title--light .sec-title__script {
  color: var(--c-gold-3);
}
.sec-title--brown .sec-title__big {
  color: var(--c-brown);
}
.sec-title--brown .sec-title__script {
  color: var(--c-gold-2);
}
.sec-title--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* script-word offsets given per section in the spec */
.s-gallery .sec-title,
.s-location .sec-title,
.s-developer .sec-title,
.s-config .sec-title--center {
  --st-top: 75;
}

/* ---------- 6. Buttons ---------- */
.btn-grad,
.btn-outline-brown,
.btn-submit,
.btn-tab,
.btn-cta-footer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--t-hover),
    filter var(--t-hover),
    color var(--t-hover),
    background-color var(--t-hover),
    border-color var(--t-hover),
    box-shadow var(--t-hover),
    text-decoration-color var(--t-hover),
    -webkit-text-fill-color var(--t-hover);
}

/* .btn-grad — "download brochure" */
.btn-grad {
  width: calc(403 * var(--u));
  height: calc(69 * var(--u));
  gap: calc(11 * var(--u));
  padding: 0;
  background: var(--grad-primary);
  border: 1px solid var(--c-forest);
  color: #fff;
  font: 500 calc(20 * var(--u)) / 1 var(--f-body);
  text-transform: capitalize;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: calc(4 * var(--u));
}
.btn-grad:hover,
.btn-grad:focus-visible {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-2px);
}
.btn-grad > img,
.btn-grad > svg,
.btn-grad .btn__icon,
.btn-grad:not(:has(img, svg, .btn__icon))::after {
  content: "";
  flex: 0 0 auto;
  width: calc(13.19 * var(--u));
  height: calc(22 * var(--u));
  background: url("../icons/download-arrow-white.svg") center / 100% 100%
    no-repeat;
}

/* .btn-outline-brown — same box, gradient text */
.btn-outline-brown {
  width: calc(403 * var(--u));
  height: calc(69 * var(--u));
  gap: calc(11 * var(--u));
  padding: 0;
  border: 1px solid var(--c-brown);
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font: 500 calc(20 * var(--u)) / 1 var(--f-body);
  text-transform: capitalize;
  text-decoration: underline;
  text-decoration-color: var(--c-brown);
  text-decoration-thickness: 1px;
  text-underline-offset: calc(4 * var(--u));
}
.btn-outline-brown > img,
.btn-outline-brown > svg,
.btn-outline-brown .btn__icon,
.btn-outline-brown:not(:has(img, svg, .btn__icon))::after {
  content: "";
  flex: 0 0 auto;
  width: calc(13.19 * var(--u));
  height: calc(22 * var(--u));
  background: url("../icons/download-arrow-gold.svg") center / 100% 100%
    no-repeat;
  transition:
    filter var(--t-hover),
    background-image var(--t-hover);
}
.btn-outline-brown:hover,
.btn-outline-brown:focus-visible {
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-decoration-color: #fff;
  transform: translateY(-2px);
}
.btn-outline-brown:hover::after,
.btn-outline-brown:focus-visible::after {
  background-image: url("../icons/download-arrow-white.svg");
}
.btn-outline-brown:hover > img,
.btn-outline-brown:focus-visible > img {
  filter: brightness(0) invert(1);
}

/* .btn-submit — full-width gradient */
.btn-submit {
  width: 100%;
  height: calc(69 * var(--u));
  padding: 0 calc(16 * var(--u));
  background: var(--grad-primary);
  border: 1px solid rgba(82, 82, 82, 0.35);
  color: #fff;
  font: 400 calc(24 * var(--u)) / 1 var(--f-body);
  text-transform: uppercase;
  letter-spacing: 0;
}
.btn-submit--gold {
  background: var(--grad-floor);
}
.btn-submit:hover,
.btn-submit:focus-visible {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-2px);
}
.btn-submit:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
  filter: none;
}

/* .btn-tab — gallery tabs */
.btn-tab {
  width: calc(192 * var(--u));
  height: calc(69 * var(--u));
  padding: 0;
  border: 1px solid var(--c-brown);
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font: 500 calc(20 * var(--u)) / 1 var(--f-body);
  text-transform: uppercase;
  letter-spacing: 0;
}
.btn-tab:hover,
.btn-tab:focus-visible,
.btn-tab.active,
.btn-tab.is-active,
.btn-tab[aria-selected="true"],
.btn-tab[aria-pressed="true"] {
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* .arrow-circle — slider arrows (white ring + arrow, hover: white disc + forest arrow)
   Markup: <button class="arrow-circle arrow-circle--prev" aria-label="Previous slide"></button> */
.arrow-group {
  display: inline-flex;
  gap: calc(11 * var(--u));
}
.arrow-circle {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  width: calc(73.84 * var(--u));
  height: calc(73.84 * var(--u));
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition:
    background-color var(--t-hover),
    color var(--t-hover),
    transform var(--t-hover);
}
.arrow-circle::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 73.84 73.84'%3E%3Cpath d='M18.393 35.7863C17.8407 35.7863 17.393 36.234 17.393 36.7863C17.393 37.3386 17.8407 37.7863 18.393 37.7863V36.7863V35.7863ZM55.8863 37.4934C56.2768 37.1029 56.2768 36.4697 55.8863 36.0792L49.5223 29.7153C49.1318 29.3247 48.4986 29.3247 48.1081 29.7153C47.7176 30.1058 47.7176 30.7389 48.1081 31.1295L53.765 36.7863L48.1081 42.4432C47.7176 42.8337 47.7176 43.4669 48.1081 43.8574C48.4986 44.2479 49.1318 44.2479 49.5223 43.8574L55.8863 37.4934ZM18.393 36.7863V37.7863L55.1792 37.7863V36.7863V35.7863L18.393 35.7863V36.7863Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 73.84 73.84'%3E%3Cpath d='M18.393 35.7863C17.8407 35.7863 17.393 36.234 17.393 36.7863C17.393 37.3386 17.8407 37.7863 18.393 37.7863V36.7863V35.7863ZM55.8863 37.4934C56.2768 37.1029 56.2768 36.4697 55.8863 36.0792L49.5223 29.7153C49.1318 29.3247 48.4986 29.3247 48.1081 29.7153C47.7176 30.1058 47.7176 30.7389 48.1081 31.1295L53.765 36.7863L48.1081 42.4432C47.7176 42.8337 47.7176 43.4669 48.1081 43.8574C48.4986 44.2479 49.1318 44.2479 49.5223 43.8574L55.8863 37.4934ZM18.393 36.7863V37.7863L55.1792 37.7863V36.7863V35.7863L18.393 35.7863V36.7863Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  transition: transform var(--t-hover);
}
.arrow-circle--prev::before,
.arrow-circle.prev::before,
.arrow-circle[data-dir="prev"]::before {
  transform: scaleX(-1);
}
.arrow-circle:has(> img, > svg)::before {
  display: none;
}
.arrow-circle > img,
.arrow-circle > svg {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
}
.arrow-circle--prev > img,
.arrow-circle.prev > img {
  transform: scaleX(-1);
}
.arrow-circle:hover,
.arrow-circle:focus-visible {
  background: #fff;
  color: var(--c-forest);
}
.arrow-circle:hover > img,
.arrow-circle:focus-visible > img {
  filter: invert(1);
}
.arrow-circle:hover::before {
  transform: translateX(3px);
}
.arrow-circle--prev:hover::before,
.arrow-circle.prev:hover::before,
.arrow-circle[data-dir="prev"]:hover::before {
  transform: scaleX(-1) translateX(3px);
}
.arrow-circle--dark {
  border-color: var(--c-brown);
  color: var(--c-brown);
}
.arrow-circle--dark:hover {
  background: var(--c-brown);
  color: #fff;
}

/* .btn-cta-footer — "Request a Private Presentation" */
.btn-cta-footer {
  width: calc(322 * var(--u));
  height: calc(64 * var(--u));
  padding: 0;
  border: 2px solid transparent;
  border-image: var(--grad-primary) 1;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font: 500 calc(20 * var(--u)) / 1 var(--f-grot);
  letter-spacing: 0;
}
.btn-cta-footer:hover,
.btn-cta-footer:focus-visible {
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #fff;
  -webkit-text-fill-color: #fff;
  transform: translateY(-2px);
}

/* .know-more — 209u × 134u: text at left 0 / top 55u, thin gold circle + arrow line
   (circle + line come from know-more-circle.svg / know-more-line.svg, positioned as in know-more-full.svg) */
.know-more {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: calc(209 * var(--u));
  height: calc(134 * var(--u));
  padding: calc(55 * var(--u)) 0 0;
  font: 400 calc(19.3 * var(--u)) / 1 var(--f-grot);
  letter-spacing: 0; /* Inter runs ~7% wider than Haas Grot Disp at 20u */
  color: var(--c-gold);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--t-hover);
}
.know-more::before {
  content: "";
  position: absolute;
  left: calc(51.66 * var(--u));
  top: 0;
  width: calc(128 * var(--u));
  height: calc(134 * var(--u));
  background: url("../icons/know-more-circle.svg") center / 100% 100% no-repeat;
  transition: transform 0.6s var(--ease-out);
}
.know-more::after {
  content: "";
  position: absolute;
  left: calc(128.16 * var(--u));
  top: calc(63.32 * var(--u));
  width: calc(80.16 * var(--u));
  height: calc(7.36 * var(--u));
  background: url("../icons/know-more-line.svg") center / 100% 100% no-repeat;
  transition: transform 0.6s var(--ease-out);
}
.know-more:hover,
.know-more:focus-visible {
  color: var(--c-gold-4);
}
.know-more:hover::before,
.know-more:focus-visible::before {
  transform: scale(1.04);
}
.know-more:hover::after,
.know-more:focus-visible::after {
  transform: translateX(calc(8 * var(--u)));
}

/* ---------- 7. Enquiry form fields (About card + modal) ---------- */
.enquiry-form {
  display: grid;
  gap: calc(20 * var(--u));
  margin: 0;
}
.enquiry-form .btn-submit {
  margin-top: calc(15 * var(--u));
}
.field {
  display: block;
  margin: 0;
}
.field__label,
.enquiry-form label,
.enquiry-form .form-label {
  display: block;
  margin: 0 0 calc(12 * var(--u));
  padding: 0;
  font: 400 calc(18 * var(--u)) / normal var(--f-body);
  color: rgba(169, 131, 74, 0.6);
  text-transform: capitalize;
}
.field__input,
.enquiry-form
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(
    [type="button"]
  ),
.enquiry-form .form-control,
.enquiry-form select,
.enquiry-form textarea {
  display: block;
  width: 100%;
  height: calc(61 * var(--u));
  margin: 0;
  padding: 0 calc(18 * var(--u));
  border: 1px solid rgba(82, 82, 82, 0.35);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  font: 300 calc(18 * var(--u)) / normal var(--f-body);
  color: var(--c-brown);
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color var(--t-hover),
    box-shadow var(--t-hover);
}
.enquiry-form textarea {
  height: auto;
  min-height: calc(120 * var(--u));
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  resize: vertical;
}
.field__input::placeholder,
.enquiry-form input::placeholder,
.enquiry-form textarea::placeholder {
  color: rgba(82, 60, 22, 0.4);
}
.field__input:focus,
.enquiry-form input:focus,
.enquiry-form .form-control:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(169, 131, 74, 0.15);
  background: #fff;
  color: var(--c-brown);
  outline: 0;
}
.enquiry-form.was-validated input:invalid,
.enquiry-form.was-validated .form-control:invalid,
.enquiry-form input.is-invalid,
.enquiry-form .form-control.is-invalid {
  border-color: var(--c-error);
  background-image: none;
  padding-right: calc(18 * var(--u));
}
.enquiry-form.was-validated input:valid,
.enquiry-form.was-validated .form-control:valid,
.enquiry-form input.is-valid,
.enquiry-form .form-control.is-valid {
  border-color: rgba(82, 82, 82, 0.35);
  background-image: none;
  padding-right: calc(18 * var(--u));
}
.enquiry-form.was-validated input:valid:focus,
.enquiry-form.was-validated .form-control:valid:focus {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(169, 131, 74, 0.15);
}
.enquiry-form.was-validated input:invalid:focus,
.enquiry-form.was-validated .form-control:invalid:focus {
  border-color: var(--c-error);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}
.enquiry-form .invalid-feedback {
  margin-top: calc(6 * var(--u));
  font: 300 calc(14 * var(--u)) / 1.4 var(--f-body);
  color: var(--c-error);
  text-transform: none;
}
.form-rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: rgba(169, 131, 74, 0.2);
  opacity: 1;
}

/* success state (JS hides the host's other children and appends .form-success) */
.is-success {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(24 * var(--u)) 0;
  animation: fs-in 0.7s var(--ease-out) both;
}
.form-success__icon {
  display: grid;
  place-items: center;
  width: calc(88 * var(--u));
  height: calc(88 * var(--u));
  margin: 0 auto calc(24 * var(--u));
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  color: var(--c-gold);
}
.form-success__icon svg {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.form-success__icon path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: fs-draw 0.7s 0.35s var(--ease-out) forwards;
}
.form-success__title {
  margin: 0 0 calc(8 * var(--u));
  font: 400 calc(40 * var(--u)) / normal var(--f-display);
  color: var(--c-gold);
  text-transform: capitalize;
}
.form-success__text {
  margin: 0;
  font: 300 calc(18 * var(--u)) / 1.6 var(--f-body);
  color: var(--c-brown);
}
@keyframes fs-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fs-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ---------- 8. Header / nav ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  height: var(--header-h);
  background: transparent;
  transition:
    background-color 0.4s ease,
    box-shadow 0.4s ease,
    height 0.4s ease,
    backdrop-filter 0.4s ease;
}
.site-header__inner {
  position: relative;
  max-width: 1920px;
  height: 100%;
  margin: 0 auto;
}
.site-header__logo {
  position: absolute;
  left: 50%;
  top: calc(30 * var(--u));
  z-index: 2;
  width: calc(172 * var(--u));
  transform: translateX(-50%);
  transition:
    width 0.4s ease,
    top 0.4s ease;
}
.site-header__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.site-nav {
  position: absolute;
  left: 50%;
  top: calc(43 * var(--u));
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(1154 * var(--u));
  height: calc(50 * var(--u));
  transition: top 0.4s ease;
}
.site-nav__group {
  position: relative;
  height: 100%;
}
.site-nav__group--left {
  width: calc(401 * var(--u));
}
.site-nav__group--right {
  width: calc(423 * var(--u));
}
.site-nav__group li {
  position: absolute;
  top: 0;
  left: calc(var(--x) * var(--u));
  height: 100%;
}
.site-nav__group a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  width: calc(var(--w) * var(--u));
  padding: 0 calc(10 * var(--u));
  font: 500 calc(16 * var(--u)) / 1 var(--f-nav);
  color: var(--c-brown);
  text-transform: capitalize;
  white-space: nowrap;
  transition: color var(--t-hover);
}
.site-nav__group a::after {
  content: "";
  position: absolute;
  left: calc(10 * var(--u));
  right: calc(10 * var(--u));
  bottom: calc(9 * var(--u));
  height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out);
}
.site-nav__group a:hover,
.site-nav__group a:focus-visible,
.site-nav__group a[aria-current="true"] {
  color: var(--c-gold);
}
.site-nav__group a:hover::after,
.site-nav__group a:focus-visible::after,
.site-nav__group a[aria-current="true"]::after {
  transform: scaleX(1);
}
/* Figma link boxes (left / width): Home 0/63 · About Us 143/88 · Amenities 311/90 | Location 0/81 · Gallery 161/76 · Contact Us 317/99 */
.site-nav__group--left li:nth-child(1) {
  --x: 0;
  --w: 63;
}
.site-nav__group--left li:nth-child(2) {
  --x: 143;
  --w: 88;
}
.site-nav__group--left li:nth-child(3) {
  --x: 311;
  --w: 90;
}
.site-nav__group--right li:nth-child(1) {
  --x: 0;
  --w: 81;
}
.site-nav__group--right li:nth-child(2) {
  --x: 161;
  --w: 76;
}
.site-nav__group--right li:nth-child(3) {
  --x: 317;
  --w: 99;
}

.site-header.is-scrolled {
  height: calc(90 * var(--u));
  background: rgba(255, 251, 247, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px rgba(15, 46, 44, 0.08);
}
.site-header.is-scrolled .site-header__logo {
  width: calc(120 * var(--u));
  top: calc(18 * var(--u));
}
.site-header.is-scrolled .site-nav {
  top: calc(22 * var(--u));
}

/* hamburger (shown < 1200px) */
.hamburger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hamburger span {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-brown);
  transition:
    transform 0.35s var(--ease-out),
    opacity 0.25s ease,
    top 0.35s var(--ease-out);
}
.hamburger span:nth-child(1) {
  top: 14px;
}
.hamburger span:nth-child(2) {
  top: 21px;
}
.hamburger span:nth-child(3) {
  top: 28px;
}
.hamburger[aria-expanded="true"] span:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: translateX(-8px);
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

/* ---------- 9. Offcanvas #mobileMenu ---------- */
.mobile-menu {
  /* 100%, not 100vw: the offcanvas is position:fixed, so 100% already resolves against the viewport and
     — unlike 100vw — it excludes a classic scrollbar instead of overflowing past it */
  --bs-offcanvas-width: 100%;
  /* the panel is full-bleed, but its contents sit in a column so the menu does not look sparse on a
     1199px tablet; --mm-gutter is the minimum side margin on the narrowest phone */
  --mm-gutter: clamp(20px, 6vw, 40px);
  --mm-inner: min(100%, 560px);
  --bs-offcanvas-bg: #0f2e2c;
  --bs-offcanvas-color: #fffbf7;
  --bs-offcanvas-border-width: 0;
  --bs-offcanvas-padding-x: 0;
  --bs-offcanvas-padding-y: 0;
  --bs-offcanvas-transition: transform 0.7s var(--ease-menu);
  width: var(--bs-offcanvas-width);
  max-width: 100%;
  background: #0f2e2c;
  color: #fffbf7;
  border: 0;
  transition: var(--bs-offcanvas-transition);
}
.mobile-menu::before {
  /* paper texture */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../images/paper-texture.webp") center / cover no-repeat;
  opacity: 0.1;
}
.mobile-menu::after {
  /* faint leaf, bottom-right — scaled to the full-screen panel */
  content: "";
  position: absolute;
  right: clamp(-70px, -8vw, -30px);
  bottom: -40px;
  z-index: 0;
  width: clamp(280px, 62vw, 460px);
  aspect-ratio: 320 / 310;
  height: auto;
  pointer-events: none;
  background: url("../icons/deco-leaf-usp.svg") center / contain no-repeat;
  opacity: 0.12;
}
.mobile-menu .offcanvas-header,
.mobile-menu .offcanvas-body {
  position: relative;
  z-index: 1;
}
.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* the bar stays full-bleed; the padding lines its logo and close button up with the nav column below */
  padding: 16px max(var(--mm-gutter), calc((100% - var(--mm-inner)) / 2));
  background: #fffbf7;
}
.mobile-menu__logo {
  display: block;
  width: 130px;
}
.mobile-menu__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.mobile-menu__close {
  position: relative;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transition:
    background-color var(--t-hover),
    transform var(--t-hover);
}
.mobile-menu__close span {
  position: absolute;
  left: 10px;
  top: 19px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-brown);
}
.mobile-menu__close span:nth-child(1) {
  transform: rotate(45deg);
}
.mobile-menu__close span:nth-child(2) {
  transform: rotate(-45deg);
}
.mobile-menu__close:hover {
  background: rgba(169, 131, 74, 0.12);
  transform: rotate(90deg);
}
.mobile-menu__body {
  display: flex;
  flex-direction: column;
  padding: 0 var(--mm-gutter);
  overflow-y: auto;
}
/* the nav takes the slack so the foot sits at the bottom of the screen; it stays top-aligned rather than
   centred so a small phone in landscape scrolls instead of clipping the first item */
.mobile-menu__body > nav {
  flex: 1 0 auto;
  width: var(--mm-inner);
  margin-inline: auto;
}
.mobile-menu__list {
  padding: clamp(16px, 4vh, 36px) 0 8px;
}
.mobile-menu__list li {
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 0.45s ease,
    transform 0.6s var(--ease-out);
}
.offcanvas.showing .mobile-menu__list li,
.offcanvas.show .mobile-menu__list li {
  opacity: 1;
  transform: none;
  transition-delay: calc(140ms + 80ms * var(--i, 0));
}
.offcanvas.hiding .mobile-menu__list li {
  transition-delay: 0ms;
  transition-duration: 0.25s;
}
.mobile-menu__list a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: clamp(11px, 1.6vh, 18px) 0;
  border-bottom: 1px solid rgba(255, 251, 247, 0.08);
  font: 400 clamp(30px, 8vw, 44px) / 1.15 var(--f-display);
  color: #fffbf7;
  text-transform: capitalize;
  letter-spacing: 0;
  transition:
    color var(--t-hover),
    transform var(--t-hover);
}
.mobile-menu__list a small {
  flex: 0 0 clamp(22px, 5vw, 30px);
  font: 500 clamp(12px, 3vw, 14px) / 1 var(--f-small);
  color: var(--c-gold-2);
  letter-spacing: 0.12em;
}
.mobile-menu__list a:hover,
.mobile-menu__list a:focus-visible,
.mobile-menu__list a[aria-current="true"] {
  color: var(--c-gold-3);
  transform: translateX(6px);
}
.mobile-menu__foot {
  flex: 0 0 auto;
  width: var(--mm-inner);
  margin-inline: auto;
  padding: 20px 0 clamp(24px, 4vh, 40px);
  display: grid;
  gap: 18px;
}
.mobile-menu__foot .btn-submit {
  height: 56px;
  font-size: 18px;
  margin: 0;
}
.mobile-menu__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 18px / 1 var(--f-body);
  color: #fffbf7;
  letter-spacing: 0.02em;
}
.mobile-menu__phone img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}
.mobile-menu__phone:hover {
  color: var(--c-gold-3);
}
.mobile-menu__social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mobile-menu__social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition:
    transform var(--t-hover),
    background-color var(--t-hover);
}
.mobile-menu__social img {
  width: 36px;
  height: 36px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* Short screens — a 640px-tall phone, or any phone in landscape. At the sizes above, the six nav rows
   plus the call-to-action add up to slightly more than the viewport, which pushes "Enquire Now" below
   the fold. Tighten the vertical rhythm rather than let the panel scroll for 20 stray pixels. */
@media (max-height: 700px) {
  .mobile-menu__head { padding-top: 12px; padding-bottom: 12px; }
  .mobile-menu__logo { width: 104px; }
  .mobile-menu__list { padding-top: 8px; }
  .mobile-menu__list a { padding: 8px 0; font-size: clamp(24px, 6.5vw, 32px); }
  .mobile-menu__foot { gap: 12px; padding: 12px 0 16px; }
  .mobile-menu__foot .btn-submit { height: 46px; font-size: 16px; }
  .mobile-menu__phone { font-size: 16px; }
  .mobile-menu__social a, .mobile-menu__social img { width: 32px; height: 32px; }
}
.mobile-menu__social .is-glyph {
  border: 1px solid #fffbf7;
}
.mobile-menu__social .is-glyph img {
  width: 20px;
  height: 15px;
}
.mobile-menu__social a:hover {
  transform: translateY(-2px);
}
.offcanvas-backdrop {
  background-color: rgba(15, 46, 44, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.offcanvas-backdrop.show {
  opacity: 1;
}

/* ---------- 10. Modal #enquiryModal ---------- */
.modal-backdrop {
  --bs-backdrop-bg: rgba(15, 46, 44, 0.72);
  --bs-backdrop-opacity: 1;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#enquiryModal .modal-dialog {
  width: calc(620 * var(--u));
  max-width: 92vw;
  margin: 1.75rem auto;
}
#enquiryModal .modal-content {
  position: relative;
  background: #fff;
  border: 1.5px solid rgba(169, 131, 74, 0.25);
  border-radius: 0;
  padding: calc(48 * var(--u)) calc(56 * var(--u)) calc(56 * var(--u));
  box-shadow: 0 30px 80px rgba(15, 46, 44, 0.25);
  color: var(--c-brown);
}
#enquiryModal .modal-body {
  padding: 0;
}
#enquiryModal.fade .modal-dialog {
  transform: translateY(28px) scale(0.96);
  opacity: 0;
  transition:
    transform 0.55s var(--ease-out),
    opacity 0.55s var(--ease-out);
}
#enquiryModal.show .modal-dialog {
  transform: none;
  opacity: 1;
}
.enquiry-modal__logo {
  display: block;
  width: calc(120 * var(--u));
  height: auto;
  margin: 0 auto calc(20 * var(--u));
}
.enquiry-modal__title {
  margin: 0;
  font: 400 calc(40 * var(--u)) / normal var(--f-display);
  color: var(--c-gold);
  text-align: center;
  text-transform: capitalize;
}
.enquiry-modal__sub {
  margin: calc(8 * var(--u)) 0 0;
  font: 300 calc(18 * var(--u)) / normal var(--f-body);
  color: var(--c-brown);
  text-align: center;
  text-transform: capitalize;
  white-space: nowrap;
}
.enquiry-modal__inner > .form-rule {
  margin: calc(24 * var(--u)) 0 calc(30 * var(--u));
}
.enquiry-modal__close {
  position: absolute;
  top: calc(20 * var(--u));
  right: calc(20 * var(--u));
  z-index: 3;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  background: transparent;
  color: var(--c-gold);
  cursor: pointer;
  transition:
    background-color var(--t-hover),
    color var(--t-hover),
    transform var(--t-hover);
}
.enquiry-modal__close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(16 * var(--u));
  height: 1px;
  background: currentColor;
  transition: background-color var(--t-hover);
}
.enquiry-modal__close span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.enquiry-modal__close span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.enquiry-modal__close:hover,
.enquiry-modal__close:focus-visible {
  background: var(--c-gold);
  color: #fff;
  transform: rotate(90deg);
}

/* ---------- 11. Generic responsive helpers ---------- */
.only-mobile {
  display: none;
}
.sec-pad {
  padding: 96px 0;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu__list li,
  .form-success,
  .form-success__icon path {
    transition: none;
    animation: none;
  }
}

/* ---------- 12. Below 1200px — shared components reflow in plain px ---------- */
@media (max-width: 1199.98px) {
  :root {
    --header-h: 80px;
  }
  .only-desktop {
    display: none !important;
  }
  .only-mobile {
    display: block;
  }
  .sec-pad {
    padding: 64px 0;
  }
  .sec-label {
    display: none;
  }

  .sec-title {
    --big: clamp(52px, 11vw, 84px);
    --scr: clamp(32px, 7vw, 52px);
  }
  .sec-title .sec-title__big {
    font-size: var(--big);
    line-height: 1.2;
    height: calc(0.9 * var(--big) + var(--scr));
    white-space: normal;
  }
  .sec-title .sec-title__script {
    font-size: var(--scr);
    line-height: 1;
    top: calc(0.9 * var(--big));
    left: 0;
  }
  .sec-title--center .sec-title__script {
    left: 50%;
    transform: translateX(-30%);
  }
  .sec-title .sec-title__sub {
    font-size: 18px;
    line-height: 1.5;
    margin-top: 16px;
  }

  .btn-grad,
  .btn-outline-brown {
    width: 100%;
    max-width: 360px;
    height: 56px;
    gap: 10px;
    font-size: 16px;
    text-underline-offset: 4px;
  }
  .btn-grad > img,
  .btn-grad > svg,
  .btn-grad .btn__icon,
  .btn-grad::after,
  .btn-outline-brown > img,
  .btn-outline-brown > svg,
  .btn-outline-brown .btn__icon,
  .btn-outline-brown::after {
    width: 12px;
    height: 20px;
  }
  .btn-submit {
    height: 56px;
    font-size: 18px;
    padding: 0 16px;
  }
  .btn-tab {
    width: 150px;
    height: 52px;
    font-size: 15px;
  }
  .btn-cta-footer {
    width: 100%;
    max-width: 322px;
    height: 56px;
    font-size: 16px;
  }
  .arrow-group {
    gap: 10px;
  }
  .arrow-circle {
    width: 56px;
    height: 56px;
  }
  .know-more {
    width: 168px;
    height: 108px;
    padding-top: 44px;
    font-size: 16px;
  }
  .know-more::before {
    left: 41.5px;
    width: 103px;
    height: 108px;
  }
  .know-more::after {
    left: 103px;
    top: 51px;
    width: 64.5px;
    height: 6px;
  }
  .know-more:hover::after {
    transform: translateX(6px);
  }

  .enquiry-form {
    gap: 16px;
  }
  .enquiry-form .btn-submit {
    margin-top: 8px;
  }
  .field__label,
  .enquiry-form label,
  .enquiry-form .form-label {
    font-size: 15px;
    margin-bottom: 8px;
  }
  .field__input,
  .enquiry-form
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(
      [type="button"]
    ),
  .enquiry-form .form-control,
  .enquiry-form select,
  .enquiry-form textarea {
    height: 52px;
    padding: 0 14px;
    font-size: 16px;
  }
  .enquiry-form textarea {
    height: auto;
    min-height: 110px;
    padding: 12px 14px;
  }
  .enquiry-form .invalid-feedback {
    font-size: 13px;
    margin-top: 5px;
  }
  .form-success {
    padding: 16px 0;
  }
  .form-success__icon {
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
  }
  .form-success__icon svg {
    width: 32px;
    height: 32px;
  }
  .form-success__title {
    font-size: 32px;
    margin-bottom: 6px;
  }
  .form-success__text {
    font-size: 15px;
  }

  .site-header {
    height: 80px;
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
  }
  .site-header__logo {
    position: static;
    transform: none;
    width: 140px;
  }
  .site-nav {
    display: none;
  }
  .hamburger {
    display: block;
  }
  .site-header.is-scrolled {
    height: 68px;
  }
  .site-header.is-scrolled .site-header__logo {
    width: 112px;
    top: auto;
  }

  #enquiryModal .modal-dialog {
    width: min(520px, 92vw);
    max-width: 92vw;
    margin: 1rem auto;
  }
  #enquiryModal .modal-content {
    padding: 40px 32px 36px;
  }
  .enquiry-modal__logo {
    width: 100px;
    margin-bottom: 16px;
  }
  .enquiry-modal__title {
    font-size: 30px;
  }
  .enquiry-modal__sub {
    font-size: 15px;
    margin-top: 6px;
    white-space: normal;
  }
  .enquiry-modal__inner > .form-rule {
    margin: 18px 0 22px;
  }
  .enquiry-modal__close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
  }
  .enquiry-modal__close span {
    width: 14px;
  }
}
@media (max-width: 575.98px) {
  .site-header__inner {
    padding: 0 16px;
  }
  .site-header__logo {
    width: 124px;
  }
  #enquiryModal .modal-content {
    padding: 36px 22px 30px;
  }
  .enquiry-modal__title {
    font-size: 28px;
  }
  .btn-tab {
    width: calc(50% - 8px);
  }
}

/* ===== 02-hero.css ===== */
/* ==========================================================================
   02 — Hero  (.s-hero)
   Full marketing banner, shown uncropped: the artwork carries its own headline,
   so nothing is zoomed, overlaid or cropped. Desktop art 2000 × 900,
   mobile art 500 × 800 (swapped with <picture> at 768px).
   The section is padded by the fixed header height so the banner never sits
   under the nav.
   ========================================================================== */
.s-hero {
  position: relative;
  width: 100%;
  padding-top: var(--header-h);
  background: #fffbf7; /* matches the header's scrolled cream, shown behind the nav strip */
  isolation: isolate;
}

/* --- media: the banner itself --- */
.s-hero__media {
  position: relative;
  width: 100%;
  line-height: 0;
}
.s-hero__media picture {
  display: block;
}
.s-hero__bg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* --- headline is baked into the artwork; the <h1> stays for a11y / SEO only --- */
.s-hero__content {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.s-hero__title {
  margin: 0;
  font: inherit;
}

/* ===== 03-about.css ===== */
/* ==========================================================================
   03 — About  (.s-about)   Figma 192:74 · 1920 × 1646
   Cream + paper texture · side label "About" · gold leaf line-drawing bottom-left
   · text block (title / copy / CTA row) · inline enquiry card · three framed photos
   ========================================================================== */

/* ---------- shared (all widths) ---------- */
.s-about {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.s-about__container {
  position: relative;
  z-index: 1;
}
.s-about__leaf {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.s-about__text {
  position: relative;
  z-index: 2;
}

.s-about__copy {
  display: grid;
}
.s-about__copy p {
  margin: 0;
  font: 300 calc(18 * var(--u)) / calc(40 * var(--u)) var(--f-body);
  color: var(--c-text);
  text-transform: capitalize;
}
.s-about__hl {
  font-weight: 500;
  font-style: italic;
  color: var(--c-brown);
}
.s-about__cta {
  display: flex;
  align-items: center;
}

.s-about__card {
  position: relative;
  z-index: 3;
  display: block;
  margin: 0;
  background: #fff;
  border: 1.5px solid rgba(169, 131, 74, 0.25);
}
.s-about__card-in {
  position: relative;
}
.s-about__card-head {
  position: relative;
  text-align: center;
}
.s-about__card-title {
  margin: 0;
  font: 400 calc(40 * var(--u)) / normal var(--f-display);
  color: var(--c-gold);
  text-transform: capitalize;
  letter-spacing: 0;
  white-space: nowrap;
}
.s-about__card-sub {
  margin: 0;
  font: 300 calc(18 * var(--u)) / normal var(--f-body);
  color: var(--c-brown);
  text-transform: capitalize;
}

.s-about__photos {
  position: relative;
  z-index: 2;
  margin: 0;
}
.s-about__photo {
  --bw: calc(
    10 * var(--u)
  ); /* frame border; the photo covers the whole 524 × 628 frame (Figma
                                                      "fill" is computed on the outer box, the inside stroke clips it) */
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: var(--bw) solid #fff;
  box-shadow: 0 0 4.8px rgba(0, 0, 0, 0.25);
}
.s-about__photo img {
  position: absolute;
  left: calc(-1 * var(--bw));
  top: calc(-1 * var(--bw));
  display: block;
  width: calc(100% + 2 * var(--bw));
  height: calc(100% + 2 * var(--bw));
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 1s var(--ease-out);
  will-change: transform;
  backface-visibility: hidden;
}
.s-about__photo:hover img,
.s-about__photo:focus-within img {
  transform: scale(1.04);
}
.s-about__dots {
  display: none;
}

/* ---------- desktop ≥ 1200: the scaled Figma canvas ---------- */
@media (min-width: 1200px) {
  .s-about {
    height: calc(1646 * var(--u));
  }
  /* the Bootstrap container is only a mobile helper: on desktop it is transparent to layout */
  .s-about > .s-about__container {
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* side label "About" — Figma: line x 66 / y 0–156, text x 53–75 / y 182–281.
     00-base.css draws the line as an in-flow inline-block inside writing-mode:vertical-rl, where
     vertical-align:middle snaps it to the sideways baseline (it rendered at x 55, 11u left of centre).
     Scoped fix (00-base.css is the foundation's file): the line leaves the flow and is pinned to the
     box's centre line; the label box is then just the text (top 182 = 156 line + 26 gap) and the line
     hangs off the end of the text that the base's 180° turn puts on top. */
  .s-about .sec-label {
    top: calc(182 * var(--u));
  }
  .s-about .sec-label::after {
    position: absolute;
    left: calc(50% - 0.5px);
    top: calc(100% + 26 * var(--u));
    display: block;
    margin: 0;
    vertical-align: baseline;
  }

  /* rotated leaf vector (Figma 192:77, −108.89°): tight bounds measured on the reference → left −33.5 / top 804 */
  .s-about__leaf {
    left: calc(-33.5 * var(--u));
    top: calc(804 * var(--u));
    width: calc(306 * var(--u));
    height: calc(334 * var(--u));
  }

  /* text block 192:1442 — left 199 (156 + 43 component offset), top 79, width 850 */
  .s-about__text {
    position: absolute;
    left: calc(199 * var(--u));
    top: calc(79 * var(--u));
    width: calc(850 * var(--u));
  }
  /* Figma's title grid is 158.7 tall (script line box = 67.7 at 60px), so the 24 gap lands the subtitle at y 261.7 */
  .s-about .sec-title__big {
    height: calc((var(--st-top) + 67.7) * var(--u));
  }
  .s-about .sec-title__script {
    line-height: normal;
  }
  .s-about .sec-title__sub {
    line-height: calc(36 * var(--u));
  } /* Figma's "normal" for Poppins 24 = 36; Chrome gives 35 */
  .s-about__copy {
    gap: calc(12 * var(--u));
    margin-top: calc(24 * var(--u));
    width: calc(850 * var(--u));
  }
  /* CTA row 650 × 134: .btn-grad at 0/32.5 (vertically centred), .know-more at 441/0 → 38 gap */
  .s-about__cta {
    width: calc(650 * var(--u));
    height: calc(134 * var(--u));
    margin-top: calc(24 * var(--u));
    gap: calc(38 * var(--u));
  }
  .s-about__cta .btn-grad,
  .s-about__cta .know-more {
    flex: 0 0 auto;
  }

  /* enquiry card 192:1470 — left 1233, top 79, 524 × 677; inner column 465 wide.
     Figma renders the children inset by the 1.5 stroke (column lands at x 1264 / y 122 on the reference),
     and Chrome paints a 1.5px border as 1px, so the padding is 42 top / 27 right / 30 bottom / 30 left
     to hit the same pixels (card outer box 79→756 = 677). */
  .s-about__card {
    position: absolute;
    left: calc(1233 * var(--u));
    top: calc(79 * var(--u));
    width: calc(524 * var(--u));
    min-height: calc(677 * var(--u));
    padding: calc(42 * var(--u)) calc(27 * var(--u)) calc(30 * var(--u))
      calc(30 * var(--u));
  }
  .s-about__card-head {
    height: calc(89 * var(--u));
  }
  .s-about__card-sub {
    position: absolute;
    left: 50%;
    top: calc(62 * var(--u));
    transform: translateX(-50%);
    white-space: nowrap;
  }
  /* rule at column y 124 (467 wide, 1px past the column on each side); fields start at 159 */
  .s-about .form-rule {
    width: calc(100% + 2 * var(--u));
    margin: calc(35 * var(--u)) 0 calc(34 * var(--u)) calc(-1 * var(--u));
  }

  /* photos 192:1467-69 — top 851, 524 × 628, left 157 / 698 / 1239 */
  .s-about__photos {
    position: absolute;
    left: 0;
    top: calc(851 * var(--u));
    width: 100%;
    height: calc(628 * var(--u));
    overflow: visible;
  }
  .s-about__photos .swiper-wrapper {
    display: block;
    width: 100%;
    height: 100%;
    transform: none;
  }
  .s-about__photo {
    position: absolute;
    top: 0;
    width: calc(524 * var(--u));
    height: calc(628 * var(--u));
  }
  .s-about__photo:nth-child(1) {
    left: calc(157 * var(--u));
  }
  .s-about__photo:nth-child(2) {
    left: calc(698 * var(--u));
  }
  .s-about__photo:nth-child(3) {
    left: calc(1239 * var(--u));
  }
}

/* ---------- below 1200: reflow (title → copy → CTA → card → photos) ---------- */
@media (max-width: 1199.98px) {
  .s-about {
    height: auto;
    padding: 96px 0;
  }
  .s-about__leaf {
    left: -48px;
    bottom: 24px;
    top: auto;
    width: 240px;
    height: auto;
    opacity: 0.75;
  }

  .s-about__text {
    max-width: 720px;
  }
  .s-about__copy {
    gap: 12px;
    margin-top: 22px;
  }
  .s-about__copy p {
    font-size: 16px;
    line-height: 1.85;
  }
  .s-about__cta {
    flex-wrap: wrap;
    gap: 16px 36px;
    width: auto;
    height: auto;
    margin-top: 28px;
  }
  /* base's desktop icon rule (.btn-grad:not(:has(…))::after, 0,2,1) outranks its own mobile override (0,1,1);
     re-assert the 12 × 20 icon here so it does not collapse to a 3px dot on phones */
  .s-about .btn-grad:not(:has(img, svg, .btn__icon))::after {
    width: 12px;
    height: 20px;
  }

  .s-about__card {
    max-width: 520px;
    margin: 48px auto 0;
    padding: 34px 28px 30px;
    min-height: 0;
  }
  .s-about__card-head {
    height: auto;
  }
  .s-about__card-title {
    font-size: 32px;
    white-space: normal;
  }
  .s-about__card-sub {
    position: static;
    transform: none;
    white-space: normal;
    font-size: 15px;
    line-height: 1.5;
    margin-top: 6px;
  }
  .s-about .form-rule {
    width: 100%;
    margin: 20px 0 22px;
  }

  .s-about__photos {
    margin-top: 56px;
    overflow: visible;
  }
  .s-about__photos .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    transform: none;
  }
  .s-about__photo {
    --bw: 8px;
    width: auto;
    height: auto;
    aspect-ratio: 524 / 628;
  }
}

@media (max-width: 767.98px) {
  .s-about {
    padding: 64px 0;
  }
  .s-about__container {
    --bs-gutter-x: 2rem;
  } /* 16px side gutters on phones */
  .s-about__leaf {
    display: none;
  }
  .s-about__copy {
    margin-top: 18px;
  }
  .s-about__copy p {
    font-size: 15px;
    line-height: 1.8;
  }
  .s-about__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 24px;
  }
  .s-about__cta .btn-grad {
    width: 100%;
  }
  .s-about__card {
    margin-top: 40px;
    padding: 30px 20px 26px;
  }
  .s-about__card-title {
    font-size: 30px;
  }

  /* phone: horizontal Swiper, 1.15 slides per view (initialised in 03-about.js) */
  .s-about__photos {
    margin: 44px -16px 0;
    padding: 6px 16px 8px;
    overflow: hidden;
  }
  .s-about__photos .swiper-wrapper {
    display: flex;
    grid-template-columns: none;
    gap: 0;
  }
  .s-about__photo {
    aspect-ratio: 4 / 5;
  }
  .s-about__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    position: static;
    margin-top: 16px;
    width: auto;
  }
  .s-about__dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 50%;
    opacity: 1;
    background: rgba(169, 131, 74, 0.3);
    transition:
      background-color var(--t-hover),
      transform var(--t-hover);
  }
  .s-about__dots .swiper-pagination-bullet-active {
    background: var(--c-gold);
    transform: scale(1.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-about__photo img {
    transition: none;
  }
}

/* ===== 04-usp.css ===== */
/* ==========================================================================
   04 — USP  (.s-usp)  Figma 192:82 — 1920 × 1836
   cream + texture · dark semicircle arch (2233 tall, r 960) · towers image
   · "usp's" side label · gold leaf · reveal heading · fade Swiper · progress
   ========================================================================== */
.s-usp {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(1836 * var(--u));
  background: var(--c-cream);
  color: #fff;
}

/* dark arch: perfect semicircle top (edge y = 960 on the sides, y = 0 at the centre) */
.s-usp__arch {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  height: calc(2233 * var(--u));
  border-radius: calc(960 * var(--u)) calc(960 * var(--u)) 0 0;
  background: var(--c-arch);
  overflow: hidden;
  pointer-events: none;
}
.s-usp__arch::before {
  opacity: 0.15;
}

/* towers + yellow blossoms (transparent top) — overflow the bottom edge, clipped by the section */
.s-usp__buildings {
  position: absolute;
  left: calc(-5 * var(--u));
  top: calc(933 * var(--u));
  z-index: 2;
  width: calc(1939 * var(--u));
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* side label: Figma frame is centred on x = 67. sideways = the ’ stays rotated with the letters (mixed would set it upright, full-width) */
.s-usp .sec-label {
  left: calc(67 * var(--u));
  z-index: 3;
  text-orientation: sideways;
}

/* gold leaf line drawing — sits over the cream / arch edge, top-right (tip at 1855 / 198 in the reference) */
.s-usp__leaf {
  position: absolute;
  left: calc(1504 * var(--u));
  top: calc(198 * var(--u));
  z-index: 6;
  width: calc(352 * var(--u));
  height: calc(340 * var(--u));
  pointer-events: none;
  user-select: none;
}

/* ---------- reveal heading (Figma "Component 2": box 890 × 150 at 515 / 156) ---------- */
.usp-reveal-wrap {
  position: absolute;
  left: calc(515 * var(--u));
  top: calc(156 * var(--u));
  z-index: 3;
  width: calc(890 * var(--u));
  height: calc(150 * var(--u));
}
.usp-reveal {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  font: 400 calc(64 * var(--u)) / 1.2 var(--f-display);
  color: #fff;
  text-transform: capitalize;
  text-align: center;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition:
    clip-path 1.2s var(--ease-out),
    -webkit-clip-path 1.2s var(--ease-out);
}
.usp-reveal.is-in {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}
.usp-reveal__l1 {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.usp-reveal__w {
  position: absolute;
  left: calc(305 * var(--u));
  top: calc(73 * var(--u));
  transform: translateX(-50%);
}
.usp-reveal__s {
  position: absolute;
  left: calc(583 * var(--u));
  top: calc(82 * var(--u));
  transform: translateX(-50%);
  font: 400 calc(64 * var(--u)) / 1 var(--f-script);
  color: var(--c-gold-3);
  text-transform: lowercase;
}

/* ---------- fade slider: title (top 398) + 1240 × 613 image (top 534) ---------- */
.usp-swiper {
  position: absolute;
  left: calc(340 * var(--u));
  top: calc(398 * var(--u));
  z-index: 4;
  width: calc(1240 * var(--u));
  height: calc(749 * var(--u));
}
.usp-swiper .swiper-button-prev,
.usp-swiper .swiper-button-next,
.usp-swiper .swiper-pagination {
  display: none;
}
.usp-slide {
  position: relative;
  width: 100%;
  height: 100%;
}
.usp__title {
  position: absolute;
  left: 50%;
  top: calc(3.5 * var(--u));
  transform: translateX(-50%);
  width: 100%;
  margin: 0; /* Figma box is 1018 wide; centred text, so the full 1240 keeps the ':' on line 1 with fallback glyph widths */
  font-size: 0;
  line-height: 0; /* no strut: each line takes its own font's normal line box, as in Figma */
  text-align: center;
  color: #fff;
  text-transform: capitalize;
  opacity: 0;
  transform: translate(-50%, calc(14 * var(--u)));
  transition:
    opacity 0.7s ease 0.15s,
    transform 0.9s var(--ease-out) 0.15s;
}
.swiper-slide-active .usp__title {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* explicit line boxes (57.6 = 1.2 × 48, 48 = 1.5 × 32): with `normal`, Chrome would add the Italiana fallback metrics of ':' and '-' and push line 2 down */
.usp__t {
  font: 400 calc(48 * var(--u)) / calc(53.8 * var(--u)) var(--f-display);
  color: #fff;
  letter-spacing: 0;
  white-space: nowrap;
}
.usp__s {
  font: 300 italic calc(32 * var(--u)) / calc(48 * var(--u)) var(--f-body);
  color: #fff;
  letter-spacing: 0;
}
.usp__hy {
  font-family: var(--f-num);
  line-height: 0;
} /* Brown Casalova has no '-', and Italiana's hyphen glyph is blank → Playfair (same fallback as the '2' of O2) */
.usp__media {
  position: absolute;
  left: 0;
  top: calc(136 * var(--u));
  width: 100%;
  height: calc(613 * var(--u));
  margin: 0;
  overflow: hidden;
  background: rgba(20, 48, 17, 0.35);
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='21' fill='%23FFFBF7' stroke='%230F2E2C'/%3E%3Cpath d='M16 22h13M24 17l5 5-5 5' fill='none' stroke='%230F2E2C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      22 22,
    pointer;
}
.usp__media.is-left {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='21' fill='%23FFFBF7' stroke='%230F2E2C'/%3E%3Cpath d='M28 22H15M20 17l-5 5 5 5' fill='none' stroke='%230F2E2C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      22 22,
    pointer;
}
.usp__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.4s var(--ease-out);
}
.usp__media:hover img {
  transform: scale(1.03);
}

/* ---------- custom pagination: "1" · track (585 → 1334 at y 1188) · "5" ---------- */
.usp-pag {
  position: absolute;
  left: calc(533 * var(--u));
  top: calc(1200 * var(--u));
  z-index: 4;
  width: calc(853 * var(--u));
  height: calc(43.2 * var(--u));
}
.usp-pag__cur,
.usp-pag__total {
  position: absolute;
  top: calc(-2 * var(--u));
  width: calc(27 * var(--u));
  /* Brown Casalova has no digits; the Figma render shows its sans fallback — Poppins 400 matches those glyphs (cap 25px, "1" 9px wide) */
  font: 400 calc(36 * var(--u)) / calc(43.2 * var(--u)) var(--f-body);
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
.usp-pag__cur {
  left: 0;
}
.usp-pag__total {
  left: calc(826 * var(--u));
}
.usp-pag__track {
  position: absolute;
  left: calc(51.5 * var(--u));
  top: calc(25 * var(--u) - 12px);
  width: calc(751 * var(--u));
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.usp-pag__track:focus-visible {
  outline-offset: 0;
}
.usp-pag__line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 1px);
  height: 2px;
  border-radius: 2px;
  background: rgba(201, 168, 110, 0.4);
}
.usp-pag__fill {
  position: absolute;
  left: 0;
  top: calc(50% - 1.25px);
  height: 2.5px;
  border-radius: 2px;
  width: 15.687%; /* 117.5 / 749 — slide 1, as drawn in Figma; JS animates to 100% on slide 5 */
  background: var(--c-gold-2);
  transition: width 0.9s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .usp-reveal {
    clip-path: none;
    -webkit-clip-path: none;
    transition: none;
  }
  .usp__title,
  .usp__media img,
  .usp-pag__fill {
    transition: none;
  }
  /* belt and braces: the JS never adds .is-fx under reduce-motion, and gsap.matchMedia reverts the whole
     context if the setting is flipped mid-session — this covers the class outliving either path */
  .s-usp.is-fx .s-usp__arch,
  .s-usp.is-fx .sec-label {
    clip-path: none;
    -webkit-clip-path: none;
  }
  .s-usp.is-fx .s-usp__arch::after {
    content: none;
  }
  .s-usp.is-fx .s-usp__leaf,
  .s-usp.is-fx .usp-swiper,
  .s-usp.is-fx .usp-pag,
  .s-usp.is-fx .s-usp__buildings {
    opacity: 1;
  }
}

/* ---------- scroll reveal (driven by 04-usp.js) ----------
   The same construction as section 09: .is-fx only lands once GSAP, ScrollTrigger and "no reduce-motion"
   are all true, so with the CDN blocked, JS off or reduce-motion on the section paints exactly as the rules
   above describe it. --usp-cut is the fill edge climbing through the arc; the clip and the gold chord read it. */
.s-usp.is-fx .s-usp__arch {
  /* the arc is the top 960u of the arch's own box — i.e. always half the arch's width, which is why one
     declaration covers both layouts once the breakpoint below swaps the length */
  --usp-cap: calc(960 * var(--u));
  --usp-p: 1; /* 1 = not drawn yet · 0 = the arc has closed on itself */
  clip-path: inset(calc(var(--usp-cap) * var(--usp-p)) 0 0 0);
  -webkit-clip-path: inset(calc(var(--usp-cap) * var(--usp-p)) 0 0 0);
}
.s-usp.is-fx .s-usp__arch::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--usp-cap) * var(--usp-p));
  z-index: 1;
  height: 1px;
  background: var(--c-gold);
  opacity: 0.5;
  pointer-events: none;
}
/* the label's transform is spoken for (translateX(-50%) rotate(180deg)), so it is wiped, not moved */
.s-usp.is-fx .sec-label {
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
}
/* GSAP scrubs the heading wipe itself — leaving the CSS transition on would re-animate it every frame */
.s-usp.is-fx .usp-reveal {
  transition: none;
}
.s-usp.is-fx .s-usp__leaf,
.s-usp.is-fx .usp-swiper,
.s-usp.is-fx .usp-pag,
.s-usp.is-fx .s-usp__buildings {
  opacity: 0;
}

/* ==========================================================================
   < 1200px — reflow: arch keeps its semicircle (r = 50vw), everything static & centred
   ========================================================================== */
@media (max-width: 1199.98px) {
  .s-usp {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: clamp(104px, 22vw, 190px) 0 0;
  }
  .s-usp__arch {
    height: 140%;
    border-radius: 50vw 50vw 0 0;
  }
  /* the cap is a 50vw radius down here — still exactly half the arch's width, so only the length changes */
  .s-usp.is-fx .s-usp__arch {
    --usp-cap: 50vw;
  }
  .s-usp.is-fx .s-usp__arch::after {
    content: none;
  } /* a 1px chord across a 50vw cap is just noise */
  .s-usp__buildings {
    position: relative;
    left: auto;
    top: auto;
    display: block;
    order: 10;
    align-self: flex-start;
    width: 120%;
    max-width: none;
    margin: 8px 0 0 -10%;
  }
  .s-usp__leaf {
    left: auto;
    right: 8px;
    top: 10px;
    width: clamp(96px, 18vw, 180px);
    height: auto;
    opacity: 0.85;
  }

  .usp-reveal-wrap {
    position: relative;
    left: auto;
    top: auto;
    width: min(100% - 32px, 720px);
    height: auto;
    margin: 0 auto;
  }
  .usp-reveal {
    height: auto;
    font-size: clamp(34px, 5.4vw, 44px);
    line-height: 1.22;
    white-space: normal;
  }
  .usp-reveal__l1,
  .usp-reveal__w,
  .usp-reveal__s {
    position: static;
    transform: none;
  }
  .usp-reveal__s {
    font-size: 1.05em;
    line-height: 1;
  }

  .usp-swiper {
    position: relative;
    left: auto;
    top: auto;
    width: min(100% - 32px, 960px);
    height: auto;
    margin: 40px auto 0;
  }
  .usp-swiper .swiper-wrapper {
    align-items: stretch;
  }
  .usp-slide {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .usp__title {
    position: static;
    width: 100%;
    transform: translateY(12px);
  }
  .swiper-slide-active .usp__title {
    transform: none;
  }
  .usp__t {
    font-size: clamp(24px, 4.2vw, 34px);
    line-height: 1.25;
    white-space: normal;
  }
  .usp__s {
    font-size: clamp(16px, 2.6vw, 22px);
    line-height: 1.5;
  }
  .usp__media {
    position: relative;
    top: auto;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-top: 20px;
  }

  .usp-pag {
    position: relative;
    left: auto;
    top: auto;
    width: min(100% - 32px, 640px);
    height: auto;
    margin: 28px auto 0;
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .usp-pag__cur,
  .usp-pag__total {
    position: static;
    width: auto;
    min-width: 18px;
    font-size: 24px;
  }
  .usp-pag__track {
    position: relative;
    left: auto;
    top: auto;
    flex: 1 1 auto;
    width: auto;
    height: 24px;
  }
}
@media (max-width: 767.98px) {
  .s-usp__buildings {
    width: 132%;
    margin: 4px 0 0 -16%;
  }
  .usp-swiper,
  .usp-pag {
    margin-top: 28px;
  }
  .usp-pag {
    gap: 14px;
  }
  .usp-pag__cur,
  .usp-pag__total {
    font-size: 20px;
  }
  .usp-reveal__s {
    font-size: 1.1em;
  }
}

/* ===== 05-config.css ===== */
/* ==========================================================================
   05 — Configuration + "Our Amenities" intro  (.s-config, Figma 192:99, 1920 × 1502)
   Desktop (>=1200px): absolute Figma coordinates in calc(N * var(--u)).
   Below 1200px: title → image panel with the card overlapping its bottom → arrows → "Our Amenities".
   ========================================================================== */
.s-config {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(1502 * var(--u));
  background: var(--c-cream); /* + .paper::before texture (.06) */
}
.s-config .sec-label {
  z-index: 2;
}
.s-config .sec-label--amen {
  left: calc(68 * var(--u));
  top: calc(1109.44 * var(--u));
}

/* wrappers are transparent on desktop so every child positions against the section */
@media (min-width: 1200px) {
  .s-config__inner,
  .s-config__stage {
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }
}

/* faded towers — the asset carries Figma's 60% opacity; the radial cream fade (centre 573/299, radii 577/346, Figma stops) is a mask */
.s-config__towers {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: calc(-224 * var(--u));
  top: calc(415 * var(--u));
  width: calc(1075 * var(--u));
  height: calc(645 * var(--u));
  -webkit-mask-image: radial-gradient(
    calc(577 * var(--u)) calc(346 * var(--u)) at calc(573 * var(--u))
      calc(299 * var(--u)),
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.357) 27.08%,
    rgba(0, 0, 0, 0.101) 71.66%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: radial-gradient(
    calc(577 * var(--u)) calc(346 * var(--u)) at calc(573 * var(--u))
      calc(299 * var(--u)),
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.357) 27.08%,
    rgba(0, 0, 0, 0.101) 71.66%,
    rgba(0, 0, 0, 0) 100%
  );
}
.s-config__towers img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
} /* the asset already carries Figma's 60% layer opacity in its alpha */

/* title block — left 165, top 102, width 578 (script at 0/91 = .sec-title defaults) */
.s-config__title {
  position: absolute;
  z-index: 2;
  left: calc(165 * var(--u));
  top: calc(102 * var(--u));
  width: calc(578 * var(--u));
}

/* interior image panel — 945 × 1078 at right 0 / top 2, overlay rgba(82,60,22,.26) */
.s-config__panel {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  right: 0;
  top: calc(2 * var(--u));
  width: calc(945 * var(--u));
  height: calc(1078 * var(--u));
  background: var(--c-brown);
}
.s-config__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(82, 60, 22, 0.26);
  pointer-events: none;
}
.s-config__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.s-config__bg.is-active {
  opacity: 1;
}
.s-config__bg:not([src]) {
  visibility: hidden;
}

/* white card — 509 × 602 at 1198 / 254; content column 465 wide, centred, gap 24 */
.s-config__card {
  position: absolute;
  z-index: 3;
  left: calc(1198 * var(--u));
  top: calc(254 * var(--u));
  width: calc(509 * var(--u));
  height: calc(602 * var(--u));
  background: #fff;
}
.s-config .config-swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.s-config .config-swiper .swiper-button-prev,
.s-config .config-swiper .swiper-button-next,
.s-config .config-swiper .swiper-pagination {
  display: none;
}
.s-config__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #fff;
}
.s-config__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--u));
  width: calc(465 * var(--u));
}
/* 320u, not Figma's 259u: 259 was sized around the old "2500-3200 sqft" placeholder and wrapped it on
   purpose. The real areas are shorter, and at 259u only "811 sq.ft" fits on one line while the other four
   wrap after the hyphen — so the card changed height as you swiped. 320u holds all five on one line
   (the longest, "Carpet Area - 1688 sq.ft", measures 278.5u) inside the 465u column. */
.s-config__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--u));
  width: calc(320 * var(--u));
  text-align: center;
}
.s-config__bhk {
  position: relative;
  top: calc(6 * var(--u)); /* Figma baseline sits 63u below the 77u line box */
  margin: 0;
  font: 400 calc(64 * var(--u)) / calc(77 * var(--u)) var(--f-display);
  color: var(--c-gold);
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}
.s-config__bhk .num {
  font-family: var(--f-kai);
  font-weight: 400;
  line-height: 1;
}
.s-config__area {
  margin: 0;
  font: 300 calc(24 * var(--u)) / normal var(--f-body);
  color: var(--c-text-2);
  text-transform: capitalize;
}
/* the carpet-area value: one unbroken run, and `none` so the element's capitalize does not render "811 Sq.ft" */
.s-config__area .nb {
  white-space: nowrap;
  text-transform: none;
}
.s-config__divider {
  display: block;
  width: calc(478 * var(--u));
  height: 1px;
  flex: 0 0 auto;
}
.s-config__plan {
  width: calc(365 * var(--u));
  height: calc(269 * var(--u));
  overflow: hidden;
  flex: 0 0 auto;
  filter: blur(calc(5.8 * var(--u)));
}
.s-config__plan img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
/* Figma paints the button with a 650u-wide primary gradient clipped to the 465u box */
.s-config .btn-submit {
  flex: 0 0 auto;
  background: linear-gradient(90deg, #0f2e2c 0%, #309452 139.78%);
}
.s-config .btn-submit:hover,
.s-config .btn-submit:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* arrows — 1368 / 901 over the image panel */
.s-config__nav {
  position: absolute;
  z-index: 4;
  left: calc(1368 * var(--u));
  top: calc(901 * var(--u));
}

/* flower — 247 × 265 at 851 / 938 (over the panel's bottom-left corner) */
.s-config__flower {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  left: calc(851 * var(--u));
  top: calc(938 * var(--u));
  width: calc(247 * var(--u));
  height: calc(265 * var(--u));
}

/* "OUR amenities" — 601 wide centred on x 962.49, top 1263.44; script at 114 inside the 501 text box (= 164 from the 601 box) */
.s-config__amen {
  --st-left: 164;
  position: absolute;
  z-index: 2;
  left: calc(662 * var(--u));
  top: calc(1263.44 * var(--u));
  width: calc(601 * var(--u));
  margin: 0;
}
.s-config__amen .sec-title__sub {
  text-align: center;
}

/* ---------- < 1200px ---------- */
@media (max-width: 1199.98px) {
  .s-config {
    height: auto;
    padding: 96px 0 80px;
  }
  .s-config__inner {
    position: relative;
    z-index: 1;
  }
  .s-config__towers {
    left: auto;
    right: -12%;
    top: 24px;
    width: 70%;
    max-width: 760px;
    height: auto;
    aspect-ratio: 1075 / 645;
    opacity: 0.8;
    -webkit-mask-image: radial-gradient(
      ellipse 54% 54% at 53% 46%,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.35) 27%,
      rgba(0, 0, 0, 0.1) 72%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 54% 54% at 53% 46%,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.35) 27%,
      rgba(0, 0, 0, 0.1) 72%,
      transparent 100%
    );
  }
  .s-config__title {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 578px;
    margin: 0 0 40px;
  }
  .s-config__stage {
    position: relative;
    width: 100%;
  }
  .s-config__panel {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .s-config__card {
    position: relative;
    left: auto;
    top: auto;
    width: 88%;
    max-width: 509px;
    height: auto;
    margin: -28% auto 0;
    box-shadow: 0 24px 60px rgba(15, 46, 44, 0.14);
  }
  .s-config__slide {
    height: auto;
    padding: 36px 28px;
  }
  .s-config__col {
    width: 100%;
    gap: 22px;
  }
  .s-config__head {
    width: 100%;
    gap: 8px;
  }
  .s-config__bhk {
    top: 0;
    font-size: 48px;
    line-height: 1.2;
  }
  .s-config__area {
    font-size: 18px;
    line-height: 1.5;
  }
  .s-config__divider {
    width: 100%;
  }
  .s-config__plan {
    width: 100%;
    max-width: 365px;
    height: auto;
    aspect-ratio: 365 / 269;
    filter: blur(5px);
  }
  .s-config .btn-submit {
    max-width: 100%;
  }
  .s-config__nav {
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }
  .s-config .arrow-circle {
    border-color: var(--c-brown);
    color: var(--c-brown);
  }
  .s-config .arrow-circle:hover,
  .s-config .arrow-circle:focus-visible {
    background: var(--c-brown);
    color: #fff;
  }
  .s-config__flower {
    left: -14px;
    top: auto;
    bottom: -6px;
    width: 150px;
    height: auto;
    z-index: 1;
  }
  .s-config__amen {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 601px;
    margin: 80px auto 0;
  }
  .s-config__amen .sec-title__script {
    transform: none;
    translate: -30% 0;
  } /* AOS-safe centring (AOS overwrites transform) */
}
@media (max-width: 767.98px) {
  .s-config {
    padding: 64px 0 56px;
  }
  .s-config__inner {
    padding-left: 16px;
    padding-right: 16px;
  }
  .s-config__towers {
    display: none;
  }
  .s-config__title {
    margin-bottom: 32px;
  }
  .s-config__panel {
    aspect-ratio: 4 / 5;
  }
  .s-config__card {
    width: 92%;
    margin-top: -40%;
  }
  .s-config__slide {
    padding: 28px 20px;
  }
  .s-config__bhk {
    font-size: 40px;
  }
  .s-config__area {
    font-size: 16px;
  }
  .s-config__flower {
    width: 112px;
    left: -10px;
  }
  .s-config__amen {
    margin-top: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .s-config__bg {
    transition: none;
  }
}

/* ===== 06-amenities.css ===== */
/* ==========================================================================
   06 — Amenities slider  (.s-amenities)   Figma 192:139 · 1920 × 1036
   Fade slider 1920×986 at top 0 · white card 578×724 centered at top 114
   · card title 40u Kai (Lora) #A9834A · photo 546×514 at 16/194 inside the card
   · arrows centered at x 960.34 / top 866 · vertical progress at x 1800 / top 81
   · cream + paper strip 986→1036 (the section is .paper)
   ========================================================================== */
.s-amenities {
  --amen-p: calc(1 / 6); /* progress = current / total (JS updates it) */
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(1036 * var(--u));
  background: var(--c-cream);
}

/* ---- slider ---- */
.s-amenities .amenities-swiper {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: calc(986 * var(--u));
}
.s-amenities .swiper-wrapper {
  height: 100%;
}
.s-amenities .amen-slide {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.s-amenities .amen-slide__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.s-amenities .amen-slide__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1);
  transform: scale(1);
  transform-origin: center;
}
.s-amenities .amen-slide__bg::after {
  /* rgba(0,0,0,.2) overlay */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
/* slow drift on the visible background (restarts each time a slide becomes active) */
.s-amenities .swiper-slide-active .amen-slide__bg img {
  animation: amen-drift 14s ease-in-out infinite alternate;
}
@keyframes amen-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

/* ---- white card ---- */
.s-amenities .amen-card {
  position: absolute;
  left: 50%;
  top: calc(114 * var(--u));
  z-index: 2;
  width: calc(578 * var(--u));
  height: calc(724 * var(--u));
  margin: 0 0 0 calc(-289 * var(--u)); /* centered without transform (AOS owns transform) */
  padding: 0;
  background: #fff;
}
.s-amenities .amen-card__title {
  position: absolute;
  left: calc(96 * var(--u));
  top: calc(119 * var(--u));
  width: calc(387 * var(--u));
  margin: 0;
  padding: 0;
  transform: translateY(
    -50%
  ); /* block centre at 119u: a 2-line title starts at 68u exactly as in Figma */
  /* Figma: Bpmf Zihi Kai 40 / 114.8%. Lora stands in; 41u / 51u reproduces the reference
     render's glyph height (43px) and line pitch (51px) measured in figma/05-amenities.png */
  font: 400 calc(41 * var(--u)) / calc(51 * var(--u)) var(--f-kai);
  color: var(--c-gold);
  text-transform: capitalize;
  text-align: center;
  letter-spacing: 0;
}
/* JS adds these when a title would exceed two lines (e.g. "Temperature-Controlled Rooftop Pool") */
.s-amenities .amen-card__title.is-wide {
  left: calc(16 * var(--u));
  width: calc(546 * var(--u));
}
.s-amenities .amen-card__title.is-small {
  font-size: calc(34 * var(--u));
  line-height: calc(44 * var(--u));
}
.s-amenities .amen-card__photo {
  position: absolute;
  left: calc(16 * var(--u));
  top: calc(194 * var(--u));
  width: calc(546 * var(--u));
  height: calc(514 * var(--u));
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #f3efe8;
}
.s-amenities .amen-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.2s var(--ease-out);
}
.s-amenities .amen-card:hover .amen-card__photo img {
  transform: scale(1.04);
}

/* ---- arrows ---- */
.s-amenities .amen-nav {
  position: absolute;
  left: 50%;
  top: calc(866 * var(--u));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: calc(11 * var(--u));
  width: calc(158.68 * var(--u)); /* 73.84 + 11 + 73.84 */
  margin-left: calc(
    -79 * var(--u)
  ); /* centered at x 960.34 without transform (AOS owns transform) */
}
.s-amenities .amen-nav .arrow-circle {
  flex: 0 0 auto;
}
.s-amenities .amen-fraction {
  display: none;
} /* horizontal fraction: mobile/tablet only */

/* ---- vertical progress ---- */
.s-amenities .amen-progress {
  position: absolute;
  left: calc(1800 * var(--u));
  top: calc(80 * var(--u));
  z-index: 3;
  width: 2px;
  height: calc(832 * var(--u));
  margin-left: -1px; /* 830u line + 1u round caps */
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  cursor: pointer;
}
.s-amenities .amen-progress::before {
  /* wider hit area for the click-to-jump */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  right: -12px;
}
.s-amenities .amen-progress__fill {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2.5px;
  margin-left: -1.25px;
  height: calc(100% * var(--amen-p));
  background: #fff;
  border-radius: 2px;
  transition: height 0.9s var(--ease-out);
}

/* hide Swiper's default UI in case the bundle CSS injects it */
.s-amenities .swiper-button-prev,
.s-amenities .swiper-button-next,
.s-amenities .swiper-pagination {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .s-amenities .swiper-slide-active .amen-slide__bg img {
    animation: none;
  }
  .s-amenities .amen-card__photo img,
  .s-amenities .amen-progress__fill {
    transition: none;
  }
}

/* ==========================================================================
   < 1200px — slide = bg 100% × 640px, card 88% (max 420) centered on the slide,
   photo 4:3, arrows + fraction below on the cream strip, vertical progress hidden
   ========================================================================== */
@media (max-width: 1199.98px) {
  .s-amenities {
    height: auto;
    padding: 0 0 72px;
  }
  .s-amenities .amenities-swiper {
    position: relative;
    height: 640px;
  }
  .s-amenities .amen-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
  }
  .s-amenities .amen-card {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    width: 88%;
    max-width: 420px;
    height: auto;
    padding: 0 16px 16px;
  }
  .s-amenities .amen-card__title,
  .s-amenities .amen-card__title.is-wide,
  .s-amenities .amen-card__title.is-small {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    padding: 26px 8px 22px;
    font-size: clamp(22px, 5.4vw, 30px);
    line-height: 1.2;
    text-wrap: balance;
  }
  .s-amenities .amen-card__photo {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .s-amenities .amen-nav {
    position: static;
    transform: none;
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 28px 16px 0;
  }
  .s-amenities .amen-nav .arrow-circle {
    border-color: var(--c-brown);
    color: var(--c-brown);
  }
  .s-amenities .amen-nav .arrow-circle:hover,
  .s-amenities .amen-nav .arrow-circle:focus-visible {
    background: var(--c-brown);
    color: #fff;
  }
  .s-amenities .amen-fraction {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    min-width: 120px;
    justify-content: center;
    font: 400 16px / 1 var(--f-num);
    color: var(--c-gold);
    letter-spacing: 0.08em;
  }
  .s-amenities .amen-fraction__sep {
    display: inline-block;
    width: 36px;
    height: 1px;
    background: rgba(169, 131, 74, 0.45);
  }
  .s-amenities .amen-fraction__total {
    color: rgba(169, 131, 74, 0.6);
  }
  .s-amenities .amen-progress {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .s-amenities {
    padding-bottom: 56px;
  }
  .s-amenities .amenities-swiper {
    height: 600px;
  }
  .s-amenities .amen-nav {
    padding-top: 24px;
    gap: 16px;
  }
  .s-amenities .amen-fraction {
    min-width: 104px;
    font-size: 15px;
  }
  .s-amenities .amen-fraction__sep {
    width: 28px;
  }
}
@media (max-width: 575.98px) {
  .s-amenities .amen-card {
    width: 100%;
    max-width: 380px;
    padding: 0 12px 12px;
  }
  .s-amenities .amen-card__title {
    padding: 22px 4px 18px;
  }
}

/* ===== 07-gallery.css ===== */
/* ==========================================================================
   07 — Gallery  (.s-gallery)   Figma 192:196 · 1920 × 1080
   Cream + texture · side label "gallery" · title block · exterior/interior tabs
   · centered "auto" Swiper (main 1084×550, neighbours 1000×680 greyscale)
   · brown ellipse prev/next buttons.  Every selector is scoped under .s-gallery.
   ========================================================================== */
.s-gallery {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(1080 * var(--u));
}
.s-gallery .sec-label {
  left: calc(49 * var(--u));
  top: calc(-1 * var(--u));
}
.s-gallery__inner {
  position: relative;
  z-index: 1;
  height: 100%;
}

/* head: title block + tabs (desktop: absolute at Figma coords; below 1200 it is a Bootstrap .container) */
.s-gallery__head.container {
  position: static;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
.s-gallery__title {
  position: absolute;
  left: calc(120 * var(--u));
  top: calc(96 * var(--u));
  width: calc(601 * var(--u));
  z-index: 2;
}
.s-gallery__title .sec-title__sub {
  text-align: left;
}
.s-gallery__tabs {
  position: absolute;
  left: calc(1398 * var(--u));
  top: calc(212 * var(--u));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
}
.s-gallery__tabs .btn-tab {
  flex: 0 0 auto;
}

/* stage: the two tab panels (fading) + prev/next */
.s-gallery__stage {
  position: absolute;
  left: 0;
  top: calc(355 * var(--u));
  width: 100%;
  height: calc(680 * var(--u));
}
.s-gallery__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s;
}
.s-gallery__panel.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease;
}

/* Swiper — slidesPerView:'auto' + centeredSlides. Each slide box is 1224u × 680u
   (1084 image + 2 × 70 half-gap → neighbours sit exactly 140 from the main image).
   Main image: 1084×550 vertically centred. Neighbours: 1000×680 greyscale,
   pulled towards the main image (prev → right-aligned, next → left-aligned). */
.s-gallery .gallery-swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.s-gallery .gallery-swiper .swiper-wrapper {
  align-items: stretch;
}
.s-gallery .gs-slide {
  position: relative;
  box-sizing: border-box;
  width: calc(1224 * var(--u));
  height: calc(680 * var(--u));
  flex-shrink: 0;
}
.s-gallery .gs-media {
  position: absolute;
  inset: 0 calc(112 * var(--u));
  margin: 0;
  overflow: hidden;
  background: #e9e4dc;
  filter: grayscale(1);
  transition:
    top 0.9s ease,
    right 0.9s ease,
    bottom 0.9s ease,
    left 0.9s ease,
    filter 0.9s ease,
    transform 0.9s ease;
}
.s-gallery .gs-slide.swiper-slide-prev .gs-media {
  inset: 0 calc(70 * var(--u)) 0 calc(154 * var(--u));
}
.s-gallery .gs-slide.swiper-slide-next .gs-media {
  inset: 0 calc(154 * var(--u)) 0 calc(70 * var(--u));
}
.s-gallery .gs-slide.swiper-slide-active .gs-media {
  inset: calc(65 * var(--u)) calc(70 * var(--u));
  filter: grayscale(0);
}
.s-gallery .gs-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.2s var(--ease-out);
}
.s-gallery .gs-slide.swiper-slide-active .gs-media:hover img {
  transform: scale(1.03);
}
.s-gallery .gallery-swiper .swiper-button-prev,
.s-gallery .gallery-swiper .swiper-button-next,
.s-gallery .gallery-swiper .swiper-pagination {
  display: none;
}

/* prev / next — 176u × 156u boxes over the side slides; ellipse 159×156 (#523C16) at left 0 */
.s-gallery__nav {
  display: contents;
}
.s-gallery .gs-nav {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(176 * var(--u));
  height: calc(156 * var(--u));
  padding: 0 calc(16 * var(--u));
  margin: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.s-gallery .gs-nav::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: calc(159 * var(--u));
  height: calc(156 * var(--u));
  background: var(--c-brown);
  -webkit-mask: url("../icons/gallery-ellipse.svg") center / 100% 100% no-repeat;
  mask: url("../icons/gallery-ellipse.svg") center / 100% 100% no-repeat;
  transform-origin: 50% 50%;
  transition:
    background-color var(--t-hover),
    transform var(--t-hover);
}
.s-gallery .gs-nav--prev {
  left: calc(190 * var(--u));
  top: calc(148 * var(--u));
} /* 503 − 355 */
.s-gallery .gs-nav--next {
  left: calc(1563 * var(--u));
  top: calc(155 * var(--u));
  padding: 0 calc(34 * var(--u));
} /* 510 − 355 */
.s-gallery .gs-nav__row {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--u));
}
.s-gallery .gs-nav__text {
  font: 500 calc(18 * var(--u)) / calc(41 * var(--u)) var(--f-nav);
  color: #fff;
  text-transform: capitalize;
  white-space: nowrap;
  letter-spacing: 0;
}
.s-gallery .gs-nav__arrow {
  flex: 0 0 auto;
  display: block;
  width: calc(36.5 * var(--u));
  height: calc(11.05 * var(--u));
  margin: 0 calc(-0.75 * var(--u)); /* the Figma row item is 35u wide; the exported arrow is 36.5u */
  transition: transform var(--t-hover);
}
.s-gallery .gs-nav--prev .gs-nav__arrow {
  transform: scaleX(-1);
}
.s-gallery .gs-nav:hover::before,
.s-gallery .gs-nav:focus-visible::before {
  background: var(--c-forest);
  transform: scale(1.05);
}
.s-gallery .gs-nav--next:hover .gs-nav__arrow,
.s-gallery .gs-nav--next:focus-visible .gs-nav__arrow {
  transform: translateX(calc(5 * var(--u)));
}
.s-gallery .gs-nav--prev:hover .gs-nav__arrow,
.s-gallery .gs-nav--prev:focus-visible .gs-nav__arrow {
  transform: scaleX(-1) translateX(calc(5 * var(--u)));
}
/* focus ring hugs the ellipse (the mask on ::before would clip an outline there) */
.s-gallery .gs-nav:focus-visible {
  outline: none;
}
.s-gallery .gs-nav:focus-visible::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  pointer-events: none;
  width: calc(159 * var(--u) + 10px);
  height: calc(156 * var(--u) + 10px);
  border: 2px solid var(--c-gold);
  border-radius: 50%;
}

/* ---------- < 1200px: reflow ---------- */
@media (max-width: 1199.98px) {
  .s-gallery {
    height: auto;
    padding: 96px 0;
  }
  .s-gallery__inner {
    height: auto;
  }
  .s-gallery__head.container {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
  } /* Bootstrap container widths, restated (the desktop reset above out-specifies them) */
  .s-gallery__title {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-width: 640px;
  } /* stays the containing block for the absolutely positioned .sec-title__script (position:static would let it resolve against the .container and ignore its padding) */
  .s-gallery__tabs {
    position: static;
    margin-top: 32px;
    gap: 16px;
  }

  .s-gallery__stage {
    position: relative;
    top: auto;
    height: auto;
    margin-top: 40px;
  }
  .s-gallery__panel {
    position: absolute;
    inset: 0;
  }
  .s-gallery__panel.is-active {
    position: relative;
    inset: auto;
  }

  .s-gallery .gs-slide {
    width: 78%;
    height: auto;
  }
  .s-gallery .gs-media {
    position: relative;
    inset: auto;
    margin: 0 8px;
    aspect-ratio: 16 / 10;
    transform: scale(0.94);
    transform-origin: 50% 50%;
    transition:
      filter 0.9s ease,
      transform 0.9s ease;
    will-change: transform;
  }
  .s-gallery .gs-slide.swiper-slide-prev .gs-media,
  .s-gallery .gs-slide.swiper-slide-next .gs-media {
    inset: auto;
  }
  .s-gallery .gs-slide.swiper-slide-active .gs-media {
    inset: auto;
    transform: none;
    filter: grayscale(0);
  }

  /* prev / next: 96px circles centred under the slider */
  .s-gallery__nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 32px;
  }
  .s-gallery .gs-nav,
  .s-gallery .gs-nav--prev,
  .s-gallery .gs-nav--next {
    position: relative;
    left: auto;
    top: auto;
    width: 96px;
    height: 96px;
    padding: 0;
  }
  .s-gallery .gs-nav::before {
    width: 96px;
    height: 96px;
  }
  .s-gallery .gs-nav:focus-visible::after {
    width: 106px;
    height: 106px;
  }
  .s-gallery .gs-nav__row {
    flex-direction: column;
    gap: 6px;
  }
  .s-gallery .gs-nav--next .gs-nav__row {
    flex-direction: column-reverse;
  }
  .s-gallery .gs-nav__text {
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.02em;
  }
  .s-gallery .gs-nav__arrow {
    width: 30px;
    height: 9px;
    margin: 0;
  }
  .s-gallery .gs-nav--next:hover .gs-nav__arrow {
    transform: translateX(4px);
  }
  .s-gallery .gs-nav--prev:hover .gs-nav__arrow {
    transform: scaleX(-1) translateX(4px);
  }
}
@media (max-width: 991.98px) {
  .s-gallery__head.container {
    max-width: 720px;
  }
}
@media (max-width: 767.98px) {
  .s-gallery {
    padding: 64px 0;
  }
  .s-gallery__head.container {
    max-width: 540px;
    padding: 0 16px;
  }
  .s-gallery__tabs {
    margin-top: 28px;
  }
  .s-gallery__stage {
    margin-top: 32px;
  }
  .s-gallery .gs-slide {
    width: 84%;
  }
  .s-gallery .gs-media {
    margin: 0 6px;
  }
  .s-gallery__nav {
    margin-top: 28px;
    gap: 16px;
  }
  .s-gallery .gs-nav,
  .s-gallery .gs-nav--prev,
  .s-gallery .gs-nav--next {
    width: 88px;
    height: 88px;
  }
  .s-gallery .gs-nav::before {
    width: 88px;
    height: 88px;
  }
  .s-gallery .gs-nav:focus-visible::after {
    width: 98px;
    height: 98px;
  }
}
@media (max-width: 575.98px) {
  .s-gallery__head.container {
    max-width: none;
    padding: 0 16px;
  }
  .s-gallery__tabs {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .s-gallery .gs-media,
  .s-gallery .gs-media img,
  .s-gallery__panel,
  .s-gallery .gs-nav::before,
  .s-gallery .gs-nav__arrow {
    transition: none;
  }
}

/* ===== 08-location.css ===== */
/* ==========================================================================
   08 — Location  (.s-location)   Figma 192:270 · 1920 × 1646
   Cream + paper texture · side label "connectivity" · title block + copy
   · site map · "LOCATION ADVANTAGES" + "Connectivity & Convenience"
   · Bootstrap-collapse accordion (.loc-acc) · gold leaf bottom-right.
   Every selector is scoped under .s-location.
   ========================================================================== */

/* ---------- shared (all widths) ---------- */
.s-location {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.s-location__container {
  position: relative;
  z-index: 1;
}
.s-location__intro {
  position: relative;
  z-index: 2;
}
.s-location .sec-title__sub {
  color: var(--c-text-2);
}

.s-location__copy {
  display: grid;
}
.s-location__copy p {
  margin: 0;
  font: 300 calc(18 * var(--u)) / calc(40 * var(--u)) var(--f-body);
  color: var(--c-text);
  text-transform: capitalize;
}

.s-location__map {
  position: relative;
  z-index: 1;
  margin: 0;
}
.s-location__map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
}

.s-location__adv {
  position: relative;
  z-index: 2;
}
.s-location__eyebrow {
  margin: 0;
  font: 500 calc(16 * var(--u)) / calc(23.96 * var(--u)) var(--f-nav);
  color: var(--c-green);
  text-transform: uppercase;
  letter-spacing: calc(1.438 * var(--u));
}
.s-location__heading {
  margin: 0;
  font: 400 calc(44 * var(--u)) / calc(92.755 * var(--u)) var(--f-display);
  color: var(--c-forest);
  text-transform: capitalize;
  letter-spacing: 0;
  white-space: nowrap;
}
.s-location__amp {
  font-family: var(--f-amp);
  font-style: italic;
  font-weight: 400;
  font-size: 1em;
  line-height: 0;
  color: inherit;
} /* line-height 0: Brygada's metrics must not grow the 92.755 line box */

/* accordion */
.s-location .loc-acc {
  position: relative;
}
.s-location .loc-acc__item {
  position: relative;
  transition: margin-top 0.35s ease;
}
.s-location .loc-acc__head {
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: inherit;
}
.s-location .loc-acc__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.s-location .loc-acc__btn::after {
  /* the 1.2px #DACCB1 rule (Figma draws it just above the frame edge) */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.2px;
  background: var(--c-line-gold);
  pointer-events: none;
}
.s-location .loc-acc__name {
  font: 400 calc(21.6 * var(--u)) / 1.5 var(--f-body);
  color: var(--c-text-2);
  text-transform: capitalize;
  letter-spacing: calc(0.216 * var(--u));
  transition: color var(--t-hover);
}
.s-location .loc-acc__btn[aria-expanded="true"] .loc-acc__name {
  color: var(--c-brown);
}
.s-location .loc-acc__btn:hover .loc-acc__name,
.s-location .loc-acc__btn:focus-visible .loc-acc__name {
  color: var(--c-gold);
}
.s-location .loc-acc__btn:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 4px;
}
/* plus / minus: two 2.4u bars; the vertical one turns and fades away when the item is open */
.s-location .loc-acc__icon {
  position: relative;
  flex: 0 0 auto;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}
.s-location .loc-acc__icon::before,
.s-location .loc-acc__icon::after {
  content: "";
  position: absolute;
  background: var(--c-text-2);
  transition:
    transform 0.35s var(--ease-out),
    opacity 0.3s ease,
    background-color var(--t-hover);
}
.s-location .loc-acc__icon::before {
  left: 0;
  top: calc(7.8 * var(--u));
  width: 100%;
  height: calc(2.4 * var(--u));
}
.s-location .loc-acc__icon::after {
  left: calc(8.4 * var(--u));
  top: 0;
  width: calc(2.4 * var(--u));
  height: 100%;
  opacity: 0.9;
}
.s-location .loc-acc__btn[aria-expanded="true"] .loc-acc__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}
.s-location .loc-acc__btn:hover .loc-acc__icon::before,
.s-location .loc-acc__btn:hover .loc-acc__icon::after {
  background: var(--c-gold);
}

.s-location .loc-acc__panel {
  position: relative;
}
.s-location .loc-acc__body {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.s-location .loc-acc__row {
  display: flex;
  align-items: center;
  margin: 0;
}
.s-location .loc-acc__pin {
  flex: 0 0 auto;
  display: block;
}
.s-location .loc-acc__place,
.s-location .loc-acc__dist {
  font: 300 calc(18 * var(--u)) / 1.5 var(--f-body);
  color: var(--c-text-2);
  text-transform: capitalize;
  letter-spacing: calc(0.18 * var(--u));
}
.s-location .loc-acc__dist {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: calc(16 * var(--u));
  text-align: right;
  white-space: nowrap;
}

.s-location__leaf {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* ---------- desktop ≥ 1200: the scaled Figma canvas ---------- */
@media (min-width: 1200px) {
  .s-location {
    height: calc(1646 * var(--u));
  }
  /* the Bootstrap container is only a mobile helper: on desktop it is transparent to layout */
  .s-location > .s-location__container {
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* title block 192:276 — left 120, top 78, width 708 */
  .s-location__intro {
    position: absolute;
    left: calc(120 * var(--u));
    top: calc(78 * var(--u));
    width: calc(708 * var(--u));
  }
  /* the Figma title grid is 134 tall (script at 75), so the 24 gap lands the subtitle box at y 236 and the copy at 296 */
  .s-location .sec-title__big {
    height: calc(134 * var(--u));
  }
  .s-location .sec-title__sub {
    line-height: calc(36 * var(--u));
  }
  .s-location__copy {
    gap: calc(12 * var(--u));
    margin-top: calc(24 * var(--u));
    width: calc(708 * var(--u));
  }

  /* map 192:285 — 1058 × 913 at 926 / 139 (right edge runs past 1920 and is clipped by the section) */
  .s-location__map {
    position: absolute;
    left: calc(926 * var(--u));
    top: calc(139 * var(--u));
    width: calc(1058 * var(--u));
    height: calc(913 * var(--u));
  }

  /* advantages 192:286 — left 120, top 611, width 722.4:
     eyebrow (23.96 tall) · heading line box 92.755 at top 639.35 · accordion at top 745 */
  .s-location__adv {
    position: absolute;
    left: calc(120 * var(--u));
    top: calc(611 * var(--u));
    width: calc(722.4 * var(--u));
  }
  .s-location__eyebrow {
    position: relative;
    top: calc(1.5 * var(--u));
  } /* Montserrat sits 1.5px higher in Chrome than in Figma's 23.96 line box */
  .s-location__heading {
    position: relative;
    top: calc(3 * var(--u));
    margin-top: calc(4.39 * var(--u));
  } /* Chrome sets the caps 3px higher in the 92.755 line box than Figma does */
  .s-location .loc-acc {
    margin-top: calc(12.895 * var(--u));
    width: calc(722.4 * var(--u));
  }

  /* header block = 32.4 text row + 19.2 gap (rule occupies the last 1.2) */
  .s-location .loc-acc__btn {
    height: calc(51.6 * var(--u));
    padding: 0 0 calc(19.2 * var(--u));
  }
  .s-location .loc-acc__item + .loc-acc__item {
    margin-top: calc(24 * var(--u));
  }
  .s-location .loc-acc__item--tight:not(.is-open) + .loc-acc__item {
    margin-top: calc(8.4 * var(--u));
  } /* 24 − 15.6, see the partial */
  .s-location .loc-acc__btn--top.collapsed {
    align-items: flex-start;
  } /* "it parks": icon at the row top while collapsed, see the partial */
  /* open body: 42 above the rows, 42 below (18 + the 24 item gap) */
  .s-location .loc-acc__body {
    gap: calc(28.8 * var(--u));
    padding: calc(42 * var(--u)) 0 calc(18 * var(--u));
  }
  .s-location .loc-acc__row {
    gap: calc(19.2 * var(--u));
    min-height: calc(27 * var(--u));
  }
  .s-location .loc-acc__pin {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
  }

  /* leaf 192:369 — the exported SVG is the tight box of the rotated artwork (Figma’s 614 × 517 container at 1494 / 1091
     is mostly padding); measured against the reference: 1566 / 1151 at ×0.995 */
  .s-location__leaf {
    left: calc(1566 * var(--u));
    top: calc(1151 * var(--u));
    width: calc(414 * var(--u));
    height: calc(433 * var(--u));
  }
}

/* ---------- below 1200: reflow (title + copy → map → advantages + accordion) ---------- */
@media (max-width: 1199.98px) {
  .s-location {
    height: auto;
    padding: 96px 0;
  }
  .s-location__intro {
    max-width: 720px;
  }
  .s-location__copy {
    gap: 12px;
    margin-top: 22px;
  }
  .s-location__copy p {
    font-size: 16px;
    line-height: 1.85;
  }

  .s-location__map {
    width: 100%;
    max-width: 640px;
    margin: 44px auto 0;
  }
  .s-location__map img {
    height: auto;
    object-position: center;
  }

  .s-location__adv {
    margin-top: 56px;
  }
  .s-location__eyebrow {
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 1.3px;
  }
  .s-location__heading {
    font-size: clamp(28px, 5.2vw, 40px);
    line-height: 1.3;
    margin-top: 8px;
    white-space: normal;
  }
  .s-location .loc-acc {
    margin-top: 20px;
  }
  .s-location .loc-acc__btn {
    padding: 14px 0 15px;
  }
  .s-location .loc-acc__name {
    font-size: 18px;
    letter-spacing: 0.2px;
  }
  .s-location .loc-acc__icon {
    width: 16px;
    height: 16px;
  }
  .s-location .loc-acc__icon::before {
    top: 7px;
    height: 2px;
  }
  .s-location .loc-acc__icon::after {
    left: 7px;
    width: 2px;
  }
  .s-location .loc-acc__item + .loc-acc__item {
    margin-top: 8px;
  }
  .s-location .loc-acc__body {
    gap: 14px;
    padding: 22px 0 10px;
  }
  .s-location .loc-acc__row {
    gap: 14px;
    min-height: 24px;
  }
  .s-location .loc-acc__pin {
    width: 20px;
    height: 20px;
  }
  .s-location .loc-acc__place,
  .s-location .loc-acc__dist {
    font-size: 15px;
    letter-spacing: 0.15px;
  }
  .s-location .loc-acc__dist {
    padding-left: 12px;
  }

  .s-location__leaf {
    left: auto;
    right: -60px;
    top: auto;
    bottom: -48px;
    width: 250px;
    height: auto;
    opacity: 0.55;
  }
}

@media (max-width: 767.98px) {
  .s-location {
    padding: 64px 0;
  }
  .s-location__container {
    --bs-gutter-x: 2rem;
  } /* 16px side gutters on phones */
  .s-location__copy {
    margin-top: 18px;
  }
  .s-location__copy p {
    font-size: 15px;
    line-height: 1.8;
  }
  .s-location__map {
    margin-top: 36px;
  }
  .s-location__adv {
    margin-top: 44px;
  }
  .s-location__heading {
    font-size: clamp(26px, 7.4vw, 34px);
  }
  .s-location .loc-acc__name {
    font-size: 17px;
  }
  .s-location .loc-acc__place,
  .s-location .loc-acc__dist {
    font-size: 14px;
  }
  .s-location .loc-acc__place {
    line-height: 1.4;
  }
  .s-location__leaf {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-location .loc-acc__item,
  .s-location .loc-acc__icon::before,
  .s-location .loc-acc__icon::after {
    transition: none;
  }
}

/* ===== 09-developer.css ===== */
/* ==========================================================================
   09 — About Developer  (.s-developer)  Figma 192:370 — 1920 × 1611
   cream + texture · dark semicircle arch (2233 tall, r 960) · "about developer"
   side label · gold leaf · centred title block · four stats · towers image
   ========================================================================== */
.s-developer {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(1611 * var(--u));
  background: var(--c-cream);
  color: #fff;
}

/* dark arch: perfect semicircle top (edge y = 960 on the sides, y = 0 at the centre) */
.s-developer__arch {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  height: calc(2233 * var(--u));
  border-radius: calc(960 * var(--u)) calc(960 * var(--u)) 0 0;
  background: var(--c-arch);
  overflow: hidden;
  pointer-events: none;
}
.s-developer__arch::before {
  opacity: 0.15;
}

/* side label (Figma frame centred on x = 66.5 — base default) */
.s-developer .sec-label {
  z-index: 3;
}

/* gold leaf line drawing — Figma box 352 × 270 at 249 / 95 with the 345 × 143 leaf centred in it;
   placed by matching the reference ink (x 265–592, y 154–289). Straddles the arch edge by design. */
.s-developer__leaf {
  position: absolute;
  left: calc(248.5 * var(--u));
  top: calc(153.5 * var(--u));
  z-index: 3;
  width: calc(345 * var(--u));
  height: calc(143 * var(--u));
  pointer-events: none;
  user-select: none;
}

/* ---------- intro block: 708 wide at 606 / 80, everything centred ---------- */
.s-developer__intro {
  position: absolute;
  left: calc(606 * var(--u));
  top: calc(80 * var(--u));
  z-index: 3;
  width: calc(708 * var(--u));
  text-align: center;
}
.s-developer .sec-title {
  --st-left: 33;
  width: calc(578 * var(--u));
  margin: 0 auto;
}
/* the ABOUT + script stack hugs the ABOUT text so the script's 33u offset is measured from ABOUT's left edge, as in Figma */
.s-developer__stack {
  position: relative;
  display: block;
  width: max-content;
  margin: 0 auto;
}
.s-developer .sec-title__sub {
  text-align: center;
  white-space: nowrap;
}
.s-developer__copy {
  width: 100%;
  margin: calc(24 * var(--u)) 0 0;
  font: 300 calc(18 * var(--u)) / calc(40 * var(--u)) var(--f-body);
  color: #fff;
  text-transform: capitalize;
  text-align: center;
}

/* ---------- stats row: top 460 · columns 151/259 · 532/372 · 1026/259 · 1407/259 ---------- */
.s-developer__stats {
  position: absolute;
  left: 0;
  top: calc(460 * var(--u));
  z-index: 3;
  width: 100%;
  height: calc(200 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.s-developer__stat {
  position: absolute;
  top: 0;
  left: calc(var(--x) * var(--u));
  width: calc(var(--w) * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.s-developer__stat:nth-child(1) {
  --x: 151;
  --w: 259;
}
.s-developer__stat:nth-child(2) {
  --x: 532;
  --w: 372;
}
.s-developer__stat:nth-child(3) {
  --x: 1026;
  --w: 259;
}
.s-developer__stat:nth-child(4) {
  --x: 1407;
  --w: 259;
}
.s-developer__num {
  display: block;
  margin: 0;
  font: 400 calc(80 * var(--u)) / normal var(--f-num);
  color: var(--c-gold-2);
  text-transform: capitalize;
  white-space: nowrap;
  letter-spacing: 0;
  font-variant-numeric: normal;
}
.s-developer__lbl {
  display: block;
  margin: calc(24 * var(--u)) 0 0;
  font: 300 calc(24 * var(--u)) / normal var(--f-body);
  color: #fff;
  text-transform: capitalize;
  white-space: nowrap;
}

/* ---------- towers image (transparent top) — 1920 × 995, bottom edge at 1611 ---------- */
.s-developer__building {
  position: absolute;
  left: 0;
  top: calc(616 * var(--u));
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* ---------- scroll reveal (driven by 09-developer.js) ----------
   .is-fx is added by the GSAP matchMedia context, so every initial state below only exists once GSAP,
   ScrollTrigger and "no reduce-motion" are all true at the same time. CDN blocked, JS off or
   reduce-motion on and the class never lands, so the section paints exactly as the rules above describe
   it. --dev-cut is the fill edge: the JS writes it, the clip and the gold chord both read it. */
.s-developer.is-fx .s-developer__arch {
  /* the arc is the top 960u of the arch's own box — i.e. always half the arch's width, which is why one
     declaration covers both layouts once the breakpoint below swaps the length */
  --dev-cap: calc(960 * var(--u));
  --dev-p: 1; /* 1 = not drawn yet · 0 = the arc has closed on itself */
  clip-path: inset(calc(var(--dev-cap) * var(--dev-p)) 0 0 0);
  -webkit-clip-path: inset(calc(var(--dev-cap) * var(--dev-p)) 0 0 0);
}
/* the gold chord riding the fill edge. the arch is already overflow:hidden with the 960u radius, so the
   line is cut to the dome's width at that height and shrinks to nothing exactly at the apex; it sits at
   the clip edge rather than above it, so the clip keeps it. */
.s-developer.is-fx .s-developer__arch::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--dev-cap) * var(--dev-p));
  z-index: 1;
  height: 1px;
  background: var(--c-gold);
  opacity: 0.5;
  pointer-events: none;
}
/* the label's transform is spoken for (translateX(-50%) rotate(180deg)), so it is wiped, not moved */
.s-developer.is-fx .sec-label {
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
}
/* the pieces that arrive one at a time — declared here only so nothing can flash in the frame between
   DOMContentLoaded and the timeline being built; GSAP writes the same values itself a moment later */
.s-developer.is-fx .s-developer__leaf,
.s-developer.is-fx .sec-title__big,
.s-developer.is-fx .sec-title__script,
.s-developer.is-fx .sec-title__sub,
.s-developer.is-fx .s-developer__copy,
.s-developer.is-fx .s-developer__stat,
.s-developer.is-fx .s-developer__building {
  opacity: 0;
}

/* ==========================================================================
   < 1200px — reflow: arch keeps its semicircle (r = 50vw); intro → stats (2 × 2) → towers
   ========================================================================== */
@media (max-width: 1199.98px) {
  .s-developer {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: clamp(96px, 20vw, 170px) 0 0;
  }
  .s-developer__arch {
    height: auto;
    bottom: 0;
    border-radius: 50vw 50vw 0 0;
  }
  /* the cap is a 50vw radius down here — still exactly half the arch's width, so only the length changes */
  .s-developer.is-fx .s-developer__arch {
    --dev-cap: 50vw;
  }
  .s-developer.is-fx .s-developer__arch::after {
    content: none;
  } /* a 1px chord across a 50vw cap is just noise */
  .s-developer__leaf {
    left: -4px;
    top: clamp(8px, 2.5vw, 28px);
    width: clamp(120px, 28vw, 230px);
    height: auto;
    opacity: 0.9;
  }

  .s-developer__intro {
    position: relative;
    left: auto;
    top: auto;
    width: min(100% - 32px, 708px);
    margin: 0 auto;
  }
  .s-developer .sec-title {
    width: 100%;
    max-width: 578px;
  }
  .s-developer__stack {
    width: max-content;
    max-width: 100%;
  }
  .s-developer .sec-title .sec-title__script {
    left: 50%;
    transform: none;
    translate: -50% 0;
  } /* AOS-safe centring (AOS overwrites transform) */
  .s-developer .sec-title__sub {
    white-space: normal;
  }
  .s-developer__copy {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.8;
  }

  .s-developer__stats {
    position: relative;
    left: auto;
    top: auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 16px;
    width: min(100% - 32px, 640px);
    margin: 48px auto 0;
  }
  .s-developer__stat {
    position: static;
    left: auto;
    width: auto;
  }
  .s-developer__num {
    font-size: clamp(38px, 12vw, 48px);
    line-height: 1.2;
  }
  .s-developer__lbl {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.5;
    white-space: normal;
  }

  .s-developer__building {
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;
    order: 10;
    align-self: stretch;
    width: 100%;
    margin: 40px 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* belt and braces: the JS never adds .is-fx under reduce-motion, and gsap.matchMedia reverts the whole
     context if the setting is flipped mid-session — this covers the class outliving either path */
  .s-developer.is-fx .s-developer__arch,
  .s-developer.is-fx .sec-label {
    clip-path: none;
    -webkit-clip-path: none;
  }
  .s-developer.is-fx .s-developer__arch::after {
    content: none;
  }
  .s-developer.is-fx .s-developer__leaf,
  .s-developer.is-fx .sec-title__big,
  .s-developer.is-fx .sec-title__script,
  .s-developer.is-fx .sec-title__sub,
  .s-developer.is-fx .s-developer__copy,
  .s-developer.is-fx .s-developer__stat,
  .s-developer.is-fx .s-developer__building {
    opacity: 1;
  }
}

@media (max-width: 767.98px) {
  .s-developer {
    padding-top: clamp(88px, 24vw, 120px);
  }
  .s-developer__copy {
    font-size: 15px;
  }
  .s-developer__stats {
    gap: 30px 12px;
    margin-top: 40px;
  }
  .s-developer__num {
    font-size: clamp(30px, 9.6vw, 48px);
  } /* "10 Million" (≈4.3 × font-size wide) must fit half the phone width */
  .s-developer__lbl {
    font-size: 15px;
  }
  .s-developer__building {
    width: 124%;
    max-width: none;
    align-self: center;
    margin-top: 32px;
  }
}

/* ===== 10-footer.css ===== */
/* ==========================================================================
   10 — Footer  (.s-footer / #contact)   Figma 192:399 · 1920 × 841
   Cream + paper texture · faded aerial photo (192:403, 1919 × 1055 at top 87, clipped)
   · content wrapper 1723 wide at 115 / 110: brand + CTA · logo · EXPLORE · CONTACT
   · social row · legal row · 1px rule · RERA row (4 QR groups + registration text)
   ========================================================================== */

/* ---------- shared (all widths) ---------- */
.s-footer {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.s-footer__bg {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
  user-select: none;
}
.s-footer__wrap {
  position: relative;
  z-index: 1;
}

/* brand */
.s-footer__name {
  margin: 0;
  font: 400 calc(64 * var(--u)) / calc(79 * var(--u)) var(--f-display);
  color: var(--c-forest);
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}
/* Brown Casalova has no digits; Figma sets the 2 in Playfair. Playfair's taller ascent grows the line box
   by ~9u and pushes the baseline down ~8u — exactly where Figma paints it (cap top at y 131), so leave it. */
.s-footer__num {
  font-family: var(--f-num);
  font-weight: 400;
}
.s-footer__tag {
  margin: 0;
  font: 300 italic calc(32 * var(--u)) / normal var(--f-grot);
  color: var(--c-text-2);
  text-transform: capitalize;
  white-space: nowrap;
}
.s-footer__brand .btn-cta-footer {
  display: inline-flex;
  font-weight: 400;
} /* Figma: Haas Grot Disp "55 Roman" = regular; 500 renders visibly heavier than the reference */

/* logo */
.s-footer__logo {
  display: block;
}
.s-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s var(--ease-out);
}
.s-footer__logo:hover img {
  transform: scale(1.03);
}

/* column headings */
.s-footer__h {
  margin: 0;
  font: 400 calc(48 * var(--u)) / normal var(--f-display);
  color: var(--c-forest);
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}

/* explore list */
.s-footer__links a {
  display: flex;
  align-items: center;
  font: 300 calc(20 * var(--u)) / calc(36 * var(--u)) var(--f-grot);
  color: var(--c-text-3);
  white-space: nowrap;
  transition:
    color var(--t-hover),
    transform var(--t-hover);
}
.s-footer__chev {
  flex: 0 0 auto;
  display: block;
  width: calc(7 * var(--u));
  height: calc(11 * var(--u));
  margin: 0 calc(15 * var(--u)) 0 calc(1 * var(--u));
  color: var(
    --c-green
  ); /* text lands at column x 24 (Inter has a 1u side bearing) */
  transition: transform var(--t-hover);
}
.s-footer__links a:hover,
.s-footer__links a:focus-visible {
  color: var(--c-forest);
}
.s-footer__links a:hover .s-footer__chev,
.s-footer__links a:focus-visible .s-footer__chev {
  transform: translateX(calc(3 * var(--u)));
}

/* contact rows */
.s-footer__contact {
  margin: 0;
  font-style: normal;
}
.s-footer__row {
  display: flex;
  align-items: flex-start;
  margin: 0;
  color: var(--c-text-3);
}
.s-footer__row-text {
  display: block;
  font: 300 calc(20 * var(--u)) / calc(30 * var(--u)) var(--f-grot);
  color: var(--c-text-3);
  transition: color var(--t-hover);
}
.s-footer__ic {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  margin-right: calc(12 * var(--u));
}
.s-footer__ic img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.s-footer__row--addr .s-footer__ic img {
  /* mingcute:location-fill — 13.5 × 16.36 leaf inside the 18 box */
  left: calc(2.25 * var(--u));
  top: calc(1.5 * var(--u));
  width: calc(13.5 * var(--u));
  height: calc(16.36 * var(--u));
}
a.s-footer__row:hover .s-footer__row-text,
a.s-footer__row:focus-visible .s-footer__row-text {
  color: var(--c-forest);
}

/* social */
.s-footer__social {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.s-footer__social a {
  position: relative;
  display: block;
  width: calc(37.8 * var(--u));
  height: calc(37.8 * var(--u));
  border-radius: 50%;
  color: var(--c-forest);
  background: transparent;
  transition:
    background-color var(--t-hover),
    color var(--t-hover),
    transform var(--t-hover);
}
.s-footer__social a svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.s-footer__social a.s-footer__yt {
  border: 1.08px solid currentColor;
}
.s-footer__social a.s-footer__yt svg {
  /* mynaui:youtube glyph, 18.78 × 13.5, centred */
  left: 50%;
  top: 50%;
  width: calc(18.78 * var(--u));
  height: calc(13.5 * var(--u));
  transform: translate(-50%, -50%);
}
.s-footer__social a:hover,
.s-footer__social a:focus-visible {
  background: var(--c-forest);
  color: #fff;
  transform: translateY(-2px);
}

/* legal row */
.s-footer__legal {
  color: var(--c-text-3);
}
.s-footer__copy,
.s-footer__privacy,
.s-footer__credit {
  margin: 0;
  font: 500 calc(16 * var(--u)) / calc(20 * var(--u)) var(--f-small);
  color: var(--c-text-3);
  text-transform: capitalize;
  white-space: nowrap;
}
.s-footer__privacy {
  transition: color var(--t-hover);
}
.s-footer__privacy:hover,
.s-footer__privacy:focus-visible {
  color: var(--c-forest);
}
.s-footer__credit {
  display: inline-flex;
  align-items: center;
  line-height: normal;
  text-transform: none;
} /* Figma: "Created by" (not capitalised) */
.s-footer__credit img {
  display: block;
  width: calc(77.29 * var(--u));
  height: calc(22.66 * var(--u));
  transition: transform var(--t-hover);
}
.s-footer__credit:hover img {
  transform: translateY(-1px);
}

/* rule */
.s-footer__rule {
  display: block;
  height: 1px;
  margin: 0;
  border: 0;
  background: rgba(78, 78, 80, 0.3);
  opacity: 1;
}

/* RERA row */
.s-footer__qr {
  display: flex;
  margin: 0;
  padding: 0;
}
.s-footer__qr li {
  flex: 0 0 auto;
}
.s-footer__qr img {
  display: block;
  width: 100%;
  height: auto;
}
.s-footer__rera-no,
.s-footer__disclaimer {
  margin: 0;
  font: 500 calc(16 * var(--u)) / calc(20 * var(--u)) var(--f-small);
  color: var(--c-text-3);
  text-transform: capitalize;
}
.s-footer__rera-no {
  white-space: pre;
}
.s-footer__disclaimer {
  line-height: calc(29 * var(--u));
}

/* ---------- desktop ≥ 1200: the scaled Figma canvas ---------- */
@media (min-width: 1200px) {
  .s-footer {
    height: calc(841 * var(--u));
  }
  .s-footer__bg {
    top: calc(87 * var(--u));
    width: calc(1919 * var(--u));
    height: auto;
  }

  /* the Bootstrap container is only a mobile helper: on desktop it is the 1723-wide Figma wrapper at 115 / 110 */
  .s-footer > .s-footer__wrap {
    position: absolute;
    left: calc(115 * var(--u));
    top: calc(110 * var(--u));
    width: calc(1723 * var(--u));
    height: calc(670 * var(--u));
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .s-footer__top {
    position: static;
  }

  /* brand 192:406 — 710 × 223 at 0 / 0 */
  .s-footer__brand {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(710 * var(--u));
    height: calc(223 * var(--u));
  }
  .s-footer__name {
    position: absolute;
    left: 0;
    top: 0;
  }
  .s-footer__tag {
    position: absolute;
    left: 0;
    top: calc(84 * var(--u));
  }
  .s-footer__brand .btn-cta-footer {
    position: absolute;
    left: 0;
    top: calc(159 * var(--u));
  }

  /* logo — 272 × 121 at page 824 / 100 → wrapper 709 / −10 */
  .s-footer__logo {
    position: absolute;
    left: calc(709 * var(--u));
    top: calc(-10 * var(--u));
    width: calc(272 * var(--u));
    height: calc(121 * var(--u));
  }

  /* EXPLORE 192:414 at 1173 · CONTACT 192:432 at 1470 (both 292 tall) */
  .s-footer__col {
    position: absolute;
    top: 0;
    height: calc(292 * var(--u));
  }
  .s-footer__col--explore {
    left: calc(1173 * var(--u));
    width: calc(131 * var(--u));
  }
  .s-footer__col--contact {
    left: calc(1470 * var(--u));
    width: calc(253 * var(--u));
  }
  .s-footer__h {
    position: absolute;
    left: 0;
    top: 0;
    line-height: calc(62 * var(--u));
  } /* Figma's "normal" for Brown Casalova 48 = 62; Chrome gives 58 */
  .s-footer__links {
    position: absolute;
    left: 0;
    top: calc(72 * var(--u));
  }
  .s-footer__links li {
    height: calc(36 * var(--u));
  }
  .s-footer__links li + li {
    margin-top: calc(10 * var(--u));
  } /* rows 46 apart */
  .s-footer__contact {
    position: absolute;
    left: 0;
    top: calc(72 * var(--u));
    width: 100%;
    height: calc(148 * var(--u));
  }
  .s-footer__row {
    position: absolute;
    left: 0;
  }
  .s-footer__row--phone {
    top: 0;
  }
  .s-footer__row--phone .s-footer__ic {
    margin-top: calc(6 * var(--u));
  }
  .s-footer__row--mail {
    top: calc(44 * var(--u));
  }
  .s-footer__row--mail .s-footer__ic {
    margin-top: calc(6 * var(--u));
  }
  .s-footer__row--addr {
    top: calc(88 * var(--u));
    width: calc(253 * var(--u));
  }
  .s-footer__row--addr .s-footer__ic {
    margin-top: calc(6 * var(--u));
  }
  /* Figma wraps the 190-wide address into 4 lines; Inter is wider than Haas Grot, so the breaks are explicit */
  .s-footer__row--addr .s-footer__row-text {
    width: auto;
    white-space: nowrap;
  }
  .s-footer__ln {
    display: block;
  }

  /* social 192:452 — top 345, six 37.8 circles on a 48.6 pitch */
  .s-footer__social {
    position: absolute;
    left: 0;
    top: calc(345 * var(--u));
    flex-wrap: nowrap;
    gap: calc(10.8 * var(--u));
  }

  /* legal 192:475 — top 419.8, 23 tall */
  .s-footer__legal {
    position: absolute;
    left: 0;
    top: calc(419.8 * var(--u));
    width: 100%;
    height: calc(23 * var(--u));
  }
  .s-footer__copy {
    position: absolute;
    left: 0;
    top: calc(2 * var(--u));
  }
  .s-footer__privacy {
    position: absolute;
    left: calc(800 * var(--u));
    top: calc(3 * var(--u));
  }
  .s-footer__credit {
    position: absolute;
    left: calc(1514 * var(--u));
    top: 0;
    width: calc(171.2 * var(--u));
    height: calc(22.58 * var(--u));
    display: block;
  }
  .s-footer__credit span {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .s-footer__credit img {
    position: absolute;
    left: calc(94 * var(--u));
    top: 0;
  }

  /* rule 192:522 — top 478.8, 1692 wide */
  .s-footer__rule {
    position: absolute;
    left: 0;
    top: calc(478.8 * var(--u));
    width: calc(1692 * var(--u));
  }

  /* RERA 192:523 — top 509 */
  .s-footer__rera {
    position: absolute;
    left: 0;
    top: calc(509 * var(--u));
    width: 100%;
    height: calc(161 * var(--u));
  }
  .s-footer__qr {
    position: absolute;
    left: calc(-9 * var(--u));
    top: calc(9.8 * var(--u));
    gap: calc(7 * var(--u));
  }
  .s-footer__qr li {
    width: calc(107.85 * var(--u));
    height: calc(128.89 * var(--u));
  }
  .s-footer__rera-text {
    position: static;
  }
  .s-footer__rera-no {
    position: absolute;
    left: calc(521 * var(--u));
    top: calc(-6.2 * var(--u));
    width: calc(946 * var(--u));
  }
  .s-footer__disclaimer {
    position: absolute;
    left: calc(521 * var(--u));
    top: calc(23.8 * var(--u));
    width: calc(1172 * var(--u));
  }
}

/* ---------- below 1200: reflow (brand → logo → columns → socials → legal → QR → RERA) ---------- */
@media (max-width: 1199.98px) {
  .s-footer {
    height: auto;
    padding: 96px 0 48px;
  }
  /* cover stretches the photo's busy tree band under the QR / RERA text: keep it as a soft veil */
  .s-footer__bg {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    opacity: 0.7;
  }

  .s-footer__top {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    column-gap: clamp(64px, 12vw, 140px);
    row-gap: 48px;
  }
  .s-footer__brand {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .s-footer__name {
    font-size: clamp(36px, 6vw, 52px);
    line-height: 1.2;
    white-space: normal;
  }
  .s-footer__tag {
    font-size: clamp(22px, 3.4vw, 28px);
    margin-top: 6px;
  }
  .s-footer__brand .btn-cta-footer {
    margin-top: 28px;
  }
  .s-footer__logo {
    grid-column: 1 / -1;
    justify-self: center;
    width: 220px;
    margin-top: -8px;
  }

  .s-footer__h {
    font-size: 36px;
    margin-bottom: 20px;
  }
  .s-footer__links li + li {
    margin-top: 8px;
  }
  .s-footer__links a {
    font-size: 17px;
    line-height: 30px;
  }
  .s-footer__chev {
    width: 7px;
    height: 11px;
    margin: 0 14px 0 1px;
  }
  .s-footer__contact {
    display: grid;
    gap: 14px;
    max-width: 320px;
  }
  .s-footer__row-text {
    font-size: 17px;
    line-height: 28px;
  }
  .s-footer__ic {
    width: 18px;
    height: 18px;
    margin: 5px 12px 0 0;
  }
  .s-footer__row--addr .s-footer__ic img {
    left: 2.25px;
    top: 1.5px;
    width: 13.5px;
    height: 16.36px;
  }

  .s-footer__social {
    justify-content: center;
    gap: 12px;
    margin-top: 56px;
  }
  .s-footer__social a {
    width: 40px;
    height: 40px;
  }
  .s-footer__social a.s-footer__yt svg {
    width: 19px;
    height: 13.7px;
  }

  .s-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
    margin-top: 40px;
  }
  .s-footer__copy,
  .s-footer__privacy,
  .s-footer__credit {
    font-size: 14px;
    line-height: 20px;
    white-space: normal;
  }
  .s-footer__credit {
    gap: 10px;
  }
  .s-footer__credit img {
    width: 70px;
    height: 20.5px;
  }

  .s-footer__rule {
    width: 100%;
    margin-top: 28px;
  }

  .s-footer__rera {
    margin-top: 32px;
  }
  .s-footer__qr {
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .s-footer__qr li {
    width: 108px;
  }
  .s-footer__rera-text {
    margin-top: 24px;
  }
  .s-footer__rera-no {
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
  }
  .s-footer__disclaimer {
    font-size: 14px;
    line-height: 1.75;
    margin-top: 10px;
  }
}

@media (max-width: 767.98px) {
  .s-footer {
    padding: 64px 0 40px;
  }
  .s-footer__wrap {
    --bs-gutter-x: 2rem;
  } /* 16px side gutters on phones */

  .s-footer__top {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    justify-content: stretch;
  }
  .s-footer__brand .btn-cta-footer {
    width: 100%;
    max-width: 322px;
  }
  .s-footer__logo {
    width: 190px;
  }
  .s-footer__col {
    justify-self: start;
  }
  .s-footer__h {
    font-size: 32px;
    margin-bottom: 16px;
  }
  .s-footer__contact {
    max-width: none;
  }

  .s-footer__social {
    justify-content: flex-start;
    gap: 10px;
    margin-top: 44px;
  }
  .s-footer__social a {
    width: 38px;
    height: 38px;
  }

  .s-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 32px;
  }
  .s-footer__rule {
    margin-top: 24px;
  }
  .s-footer__rera {
    margin-top: 28px;
  }
  .s-footer__qr {
    display: grid;
    grid-template-columns: repeat(2, 108px);
    gap: 12px 24px;
  }
  .s-footer__qr li {
    width: auto;
  }
  .s-footer__rera-no {
    font-size: 13px;
  }
  .s-footer__disclaimer {
    font-size: 13px;
    line-height: 1.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-footer__logo img,
  .s-footer__social a,
  .s-footer__chev,
  .s-footer__credit img {
    transition: none;
  }
}

/* ===== 11-lightbox.css ===== */
/* ==========================================================================
   11 — Fancybox 6 lightbox (amenity photos in 06, project gallery in 07)
   A brand skin over the default Fancybox theme plus the cursor that tells
   visitors a picture opens. fancybox.css is linked before this file, so
   single-class selectors are enough to win the cascade.
   ========================================================================== */

/* the picture is the button — say so, and keep a visible focus ring on it */
.amen-card__photo img {
  cursor: zoom-in;
}
.s-gallery .gs-slide.swiper-slide-active .gs-media img {
  cursor: zoom-in;
}
.s-location__map img {
  cursor: zoom-in;
}
.amen-card__photo img:focus-visible,
.s-location__map img:focus-visible,
.s-gallery .gs-media img:focus-visible {
  outline: 2px solid var(--c-gold-2);
  outline-offset: 4px;
}

/* forest backdrop, cream glyphs, gold on hover — the palette the rest of the page uses */
.fancybox--o2 {
  --fancybox-color: var(--c-cream);
  --fancybox-backdrop-bg: rgba(12, 30, 22, 0.96);
  --f-button-bg: rgba(255, 251, 247, 0.1);
  --f-button-color: var(--c-cream);
  --f-button-hover-bg: var(--c-gold-2);
  --f-button-hover-color: var(--c-forest);
  --f-button-active-bg: var(--c-gold-2);
  --f-button-active-color: var(--c-forest);
  --f-button-border-radius: 50%;
  --f-button-outline-color: var(--c-gold-2);
  --f-arrow-bg: rgba(255, 251, 247, 0.1);
  --f-arrow-color: var(--c-cream);
  --f-arrow-hover-bg: var(--c-gold-2);
  --f-arrow-hover-color: var(--c-forest);
  --f-close-button-color: var(--c-cream);
  --f-close-button-hover-color: var(--c-gold-2);
  --f-progressbar-color: var(--c-gold-2);
  --f-caption-color: var(--c-cream);
  --f-caption-font: 300 15px/1.6 var(--f-body);
  --f-toolbar-font: var(--f-body);
  --f-toolbar-color: var(--c-cream);
  --f-spinner-color-2: var(--c-gold-2);
}
/* v6 opens a real <dialog> with showModal(), so it is in the browser's top layer and already paints above
   everything — these numbers only matter if modal:false is ever set. The dialog cannot be reached through
   mainClass, hence the element selector. */
dialog.fancybox__dialog {
  z-index: 1090;
}
.fancybox--o2.fancybox__container {
  z-index: 1080;
}
.fancybox--o2 .f-caption {
  max-width: 900px;
  margin: 0 auto;
  /* no capitalize here: the amenity captions are already title case in the markup, while the gallery and
     map captions are full sentences that would read as "Location Map Of Upper Kharadi, Pune: ..." */
  text-transform: none;
  letter-spacing: 0.01em;
}
.fancybox--o2 .f-carousel__toolbar {
  letter-spacing: 0.04em;
}
/* v6 shows the thumbnail rail by default and the toolbar carries a toggle for it — gold the selection
   so it belongs to the same palette as the rest of the lightbox */
.fancybox--o2 {
  --f-thumb-selected-shadow: inset 0 0 0 2px var(--c-gold-2);
  --f-thumb-focus-shadow: inset 0 0 0 2px var(--c-gold-3);
}

/* ===== 12-thankyou.css ===== */
/* ==========================================================================
   12 — Thank-you page (thank-you.php)
   Same vocabulary as the rest of the site: cream + paper texture, the dark
   semicircle dome, the stacked .sec-title, gold accents. It reuses the shared
   footer, so it also needs the --u canvas the rest of the page is built on.
   ========================================================================== */
.ty-bar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(107 * var(--u));
  background: var(--c-cream);
}
.ty-bar__logo img {
  display: block;
  width: calc(150 * var(--u));
  height: auto;
}

.s-ty {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(1000 * var(--u));
  background: var(--c-cream);
  color: #fff;
}
/* the same dome as sections 04 and 09: a true 960u-radius semicircle clipped by the section.
   --ty-p is the fill edge, 1 = not drawn yet · 0 = the arc has closed (the inline script animates it). */
.s-ty__arch {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  height: calc(2233 * var(--u));
  border-radius: calc(960 * var(--u)) calc(960 * var(--u)) 0 0;
  background: var(--c-arch);
  overflow: hidden;
  pointer-events: none;
}
.s-ty__arch::before {
  opacity: 0.15;
}
.s-ty.is-fx .s-ty__arch {
  --ty-cap: calc(960 * var(--u));
  --ty-p: 1;
  clip-path: inset(calc(var(--ty-cap) * var(--ty-p)) 0 0 0);
  -webkit-clip-path: inset(calc(var(--ty-cap) * var(--ty-p)) 0 0 0);
}
.s-ty.is-fx .s-ty__arch::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--ty-cap) * var(--ty-p));
  z-index: 1;
  height: 1px;
  background: var(--c-gold);
  opacity: 0.5;
  pointer-events: none;
}
.s-ty__leaf {
  position: absolute;
  left: calc(210 * var(--u));
  top: calc(150 * var(--u));
  z-index: 3;
  width: calc(345 * var(--u));
  height: calc(143 * var(--u));
  pointer-events: none;
  user-select: none;
}

/* 230u, not the dome's centre: it keeps the primary CTA above the fold on a 1080-tall screen */
.s-ty__inner {
  position: absolute;
  left: 50%;
  top: calc(230 * var(--u));
  z-index: 3;
  width: calc(820 * var(--u));
  transform: translateX(-50%);
  text-align: center;
}

/* gold ring + tick, sized off the same scale as the stat numbers */
.s-ty__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(92 * var(--u));
  height: calc(92 * var(--u));
  margin: 0 auto calc(34 * var(--u));
  border: 1px solid var(--c-gold-2);
  border-radius: 50%;
  background: rgba(201, 168, 110, 0.12);
  color: var(--c-gold-2);
}
.s-ty__check svg {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
}

.s-ty__title {
  --st-top: 75;
  width: calc(578 * var(--u));
  margin: 0 auto;
}
.s-ty__stack {
  position: relative;
  display: block;
  width: max-content;
  margin: 0 auto;
}
.s-ty .sec-title__sub {
  text-align: center;
  white-space: nowrap;
}
.s-ty__copy {
  width: calc(700 * var(--u));
  margin: calc(26 * var(--u)) auto 0;
  font: 300 calc(18 * var(--u)) / calc(34 * var(--u)) var(--f-body);
  color: #fff;
  text-transform: capitalize;
  text-align: center;
}
.s-ty__num {
  font-family: var(--f-num);
} /* Brown Casalova has no digits — same fallback as the logo's "2" */

.s-ty__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(40 * var(--u));
  margin-top: calc(44 * var(--u));
}
.s-ty__actions .btn-grad {
  text-decoration: none;
}
/* a plain gold link rather than .know-more: that component carries its own circle-and-line drawing,
   sized for the hero, which overpowers the button beside it here */
.s-ty__link {
  position: relative;
  padding-bottom: calc(6 * var(--u));
  font: 400 calc(16 * var(--u)) / 1 var(--f-nav);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold-2);
  white-space: nowrap;
}
.s-ty__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--c-gold-2);
  opacity: 0.55;
  transition: opacity var(--t-hover);
}
.s-ty__link:hover {
  color: var(--c-gold-3);
}
.s-ty__link:hover::after {
  opacity: 1;
}

/* ==========================================================================
   < 1200px — the scaled canvas is abandoned, as everywhere else
   ========================================================================== */
@media (max-width: 1199.98px) {
  .ty-bar {
    height: 72px;
  }
  .ty-bar__logo img {
    width: 116px;
  }

  .s-ty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 76svh;
    padding: clamp(64px, 14vw, 120px) 16px clamp(72px, 16vw, 130px);
  }
  .s-ty__arch {
    height: 100%;
    bottom: 0;
    border-radius: 50vw 50vw 0 0;
  }
  .s-ty.is-fx .s-ty__arch {
    --ty-cap: 50vw;
  }
  .s-ty.is-fx .s-ty__arch::after {
    content: none;
  }
  .s-ty__leaf {
    left: -6px;
    top: clamp(8px, 2.5vw, 26px);
    width: clamp(120px, 28vw, 220px);
    height: auto;
    opacity: 0.9;
  }

  .s-ty__inner {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 620px);
    transform: none;
  }
  .s-ty__check {
    width: 72px;
    height: 72px;
    margin-bottom: 24px;
  }
  .s-ty__check svg {
    width: 34px;
    height: 34px;
  }
  .s-ty__title {
    width: 100%;
    max-width: 578px;
  }
  .s-ty .sec-title__sub {
    white-space: normal;
  }
  .s-ty__copy {
    width: 100%;
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.8;
  }
  .s-ty__actions {
    flex-direction: column;
    gap: 22px;
    margin-top: 34px;
  }
  .s-ty__link {
    padding-bottom: 5px;
    font-size: 14px;
  }
}
@media (max-width: 767.98px) {
  .s-ty {
    min-height: 72svh;
  }
  .s-ty__copy {
    font-size: 15px;
  }
}

/* Safety net for aos.css: it hides every [data-aos] element until aos.js adds .aos-animate, so a blocked
   CDN (or a page that omits the script) would leave whole blocks — the site footer in particular —
   permanently invisible. 00-main.js sets .no-aos when the library is absent. */
html.no-aos [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ===== 13-loader.css ===== */
/* ==========================================================================
   13 — Submit loader
   The enquiry forms POST to thank-you.php, which calls the Google Form endpoint
   server-side before the page turns over — a visible wait. This covers it with
   a centred spinner so the visitor never wonders whether the tap registered,
   and so the form cannot be submitted twice. Built by 00-main.js on demand;
   there is no markup for it in any page.
   ========================================================================== */
.o2-loader {
  position: fixed;
  inset: 0;
  z-index: 1200;                       /* above Bootstrap's modal (1055), which is where the form sits */
  /* grid + place-items centres the RING on the viewport centre exactly; a flex column would centre the
     ring-plus-caption group instead, leaving the spinner sitting above the middle of the screen */
  display: grid;
  place-items: center;
  background: rgba(15, 46, 44, 0.94);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.o2-loader.is-on {
  opacity: 1;
}
.o2-loader__ring {
  width: 64px;
  height: 64px;
  border: 2px solid rgba(201, 168, 110, 0.25);
  border-top-color: var(--c-gold-2);
  border-radius: 50%;
  animation: o2Spin 0.9s linear infinite;
}
.o2-loader__text {
  /* taken out of the centring flow and hung below the ring */
  position: absolute;
  top: calc(50% + 58px);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font: 300 15px / 1.5 var(--f-body);
  color: var(--c-cream);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@keyframes o2Spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* no spin, but the overlay still has to say that something is happening */
  .o2-loader {
    transition: none;
  }
  .o2-loader__ring {
    animation: none;
    border-top-color: rgba(201, 168, 110, 0.25);
    border-right-color: var(--c-gold-2);
  }
}