/* ==========================================================
   Canvas by Urbando — hero
   The artwork is 1590 x 742. Background, headline and the
   family cut-out all live on the same "scene" box, so the
   headline stays locked behind the family at every size.
   ========================================================== */

@font-face {
  font-family: "Ortisan Signature";
  src: url("../fonts/ortisan-signature.woff2") format("woff2"),
       url("../fonts/ortisan-signature.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --olive: #7c8c5b; */
  --olive: #7D8D5C;
  --olive-deep: #6b7b4c;
  --navy: #3f4578;
  --ink: #1b1b1b;
  --sky-top: #c2e3fc;
  --sky-low: #e0eff8;
  --rule: rgba(88, 110, 130, .55);

  --art-w: 1590;
  --art-h: 742;
  --gutter: clamp(16px, 7.55vw, 150px);
  --hero-h: max(min(95svh, 58vw), 42vw);

  --font-ui: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-logo: "Marcellus", Georgia, "Times New Roman", serif;
  --font-script: "Ortisan Signature", "Sacramento", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.mt-2{margin-top: 20px !important;}
.about__copy h3{margin: 0 0 .1em;font-family: var(--font-display);font-weight: 400;font-size: clamp(26px, 1.85vw, 38px);line-height: 1.05;letter-spacing: 0;text-transform: uppercase;color: var(--navy);}
.bold{font-weight: bold !important;}
.sqft{position: relative;}
.sqft::before{    content: "+" !important;
    position: absolute;
    top: -20%;
    right: -15%;
    font-size: 2.3vw;
    color: #000;
    visibility: visible !important;}
.hero_bottom_content{    
  color: var(--navy);
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 4;
    font-weight: bold;
     font-size: clamp(14px, 1.13vw, 20px);
     text-transform: uppercase;
     text-align: right;
     background: linear-gradient(
        to left,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.5) 70%,
        transparent 100%
    );
    padding: 25px 40px;
  }
  .no-wrap{text-wrap: nowrap;}
  .text-wrap li{text-wrap: nowrap;}
  .opacity-0{opacity: 0;}
.bg_1{
    position: absolute;
    inset: 0;
    /* z-index: -1; */
    background: url(../images/bg-1.webp) center center / cover no-repeat;
}
.bg_1_1{
    position: absolute;
    inset: 0;
    /* z-index: -1; */
    background: url(../images/bg-1.webp) center bottom / cover no-repeat;
}
.bg_2{
   position: absolute;
    inset: 0;
    /* z-index: -1; */
    background: url(../images/bg-2.webp) center top / cover no-repeat;
}
.bg_2_2{
   position: absolute;
    inset: 0;
    /* z-index: -1; */
    background: url(../images/bg-2.webp) center center / cover no-repeat;
}
.bg_2_2_2{
   position: absolute;
    inset: 0;
    /* z-index: -1; */
    background: url(../images/bg-2.webp) center bottom / cover no-repeat;
}
.bg_3{
   position: absolute;
    inset: 0;
    /* z-index: -1; */
    background: url(../images/bg-3.webp) center top / cover no-repeat;
}
.bg_3_3{
   position: absolute;
    inset: 0;
    /* z-index: -1; */
    background: url(../images/bg-3.webp) center center / cover no-repeat;
}
.bg_3_3_3{
   position: absolute;
    inset: 0;
    /* z-index: -1; */
    background: url(../images/bg-3.webp) center bottom / cover no-repeat;
}
/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px var(--gutter) 0;
  transition: padding .35s ease, background-color .35s ease, box-shadow .35s ease;
}
/* Sticky state, toggled from main.js once the page is scrolled.
   No backdrop-filter here on purpose: it would turn the header into the
   containing block of the fixed mobile drawer and break it. */
.site-header.is-stuck {
  padding-block: 7px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 6px 24px rgba(30, 40, 60, .12);
}
.site-header.is-stuck .logo { width: clamp(70px, 5vw, 84px); }
.site-header.is-stuck .nav__list { background: none; }

.logo {
  display: grid;
  justify-items: center;
  width: clamp(84px, 6.6vw, 112px);
  flex: none;
  color: #4d6a3a;
  line-height: 1;
  transition: width .35s ease;
}
.logo img, .logo svg { width: 100%; height: auto; }
.logo__word {
  font-family: var(--font-logo);
  font-size: clamp(14px, 1.13vw, 19px);
  letter-spacing: .34em;
  margin: 4px -0.34em 0 0;
}
.logo__tag {
  font-family: var(--font-logo);
  font-size: clamp(6px, .5vw, 8.5px);
  color: #2c2c2c;
  margin-top: 3px;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; }
@media (min-width: 1280px) {
  /* the menu is centred on the page, not between logo and button */
  .nav { position: absolute; left: 50%; top: 25px; transform: translateX(-50%); transition: top .35s ease; }
  .site-header.is-stuck .nav { top: calc(50% - 21px); }
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.82vw, 32px);
  height: 42px;
  padding: 0 clamp(16px, 1.8vw, 30px);
  border-block: 1px solid var(--rule);
  background: rgba(176, 200, 218, .22);
}
.nav__list a {
  position: relative;
  display: block;
  padding: 6px 0;
  font-size: clamp(13px, .95vw, 15px);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1.5px;
  background: var(--olive-deep);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}
.nav__list a { transition: color .3s ease; }
.nav__list a:hover,
.nav__list a.is-active { color: var(--olive-deep); }
.nav__list a:hover::after,
.nav__list a:focus-visible::after,
.nav__list a.is-active::after { transform: scaleX(1); transform-origin: left; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 21px;
  background: var(--olive);
  color: #fff;
  font-size: clamp(13px, .95vw, 15px);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s ease;
}
.btn:hover { background: var(--olive-deep); }
.btn--lg { height: clamp(44px, 2.55vw, 50px); padding-inline: clamp(20px, 1.3vw, 26px); font-size: clamp(14px, .94vw, 18px); }
.btn--outline {
  background: transparent;
  color: var(--navy);
  /* box-shadow: inset 0 0 0 1.5px var(--navy); */
  border: 1px solid #444979;
  transition: background .25s ease, color .25s ease;
}
.btn--outline:hover { background: var(--navy); color: #fff; }
.header__cta { flex: none; }
.nav__cta { display: none; }

.burger {
  display: none;
  flex: none;
  width: 44px; height: 40px;
  padding: 0 10px;
  border: 0;
  background: var(--olive);
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: #fff;
  transition: transform .25s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0; z-index: 15;
  background: rgba(20, 28, 40, .35);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: var(--hero-h);
  overflow: hidden;
  background: linear-gradient(var(--sky-top), var(--sky-low));
  isolation: isolate;
}

.scene {
  position: absolute;
  left: 50%; top: 50%;
  width: max(100%, calc(var(--hero-h) * var(--art-w) / var(--art-h)));
  aspect-ratio: 1590 / 742;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.scene img { width: 100%; height: 100%; object-fit: cover; }
.scene--bg    { z-index: 1; }
.scene--title { z-index: 2; }
.scene--fg    { z-index: 3; }

/* Headline lockup: every measurement is a share of its own
   width (cqw), so it scales as one piece. */
.lockup {
  position: absolute;
  left: 14.15%;
  top: 12.4%;
  width: 72.14%;
  aspect-ratio: 1147 / 366;
  margin: 0;
  container-type: inline-size;
  color: var(--navy);
  font-weight: 400;
  will-change: transform;
}
.lockup > * { position: absolute; }
.lockup__script { z-index: 2; }

.lockup__script {
  font-family: var(--font-script);
  line-height: 1;
  white-space: nowrap;
}
.lockup__script--your  { 
  /* left: .5cqw;  */
  left: 22cqw;
    top: 2.3cqw;  font-size: 6.5cqw; }
.lockup__script--story { left: 77.85cqw; top: 16.5cqw; font-size: 6.2cqw;line-height: normal; }

.lockup__canvas {
  /* left: 4.45cqw; */
  left: 29.45cqw;
  top: 5.36cqw;
  font-family: var(--font-display);
  font-size: 27.4cqw;
  line-height: 1;
  letter-spacing: -.004em;
  white-space: nowrap;
  /* the artwork's letterforms are Bebas Neue widened ~11% */
  scale: 1.112 1;
  transform-origin: 0 0;
  color: transparent;
  background: linear-gradient(180deg,
      #7D8D5C 0%, #7D8D5C 30%,
      rgba(132, 148, 100, .78) 55%,
      rgba(140, 156, 110, .34) 76%,
      rgba(140, 156, 110, 0) 93%);
  -webkit-background-clip: text;
          background-clip: text;
}
.lockup__your {
  left: 77.75cqw;
  top: 10.99cqw;
  scale: .935 1;
  transform-origin: 0 0;
  font-family: var(--font-display);
  font-size: 8.75cqw;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- Tablet / small laptop: menu collapses ---------- */
@media (max-width: 1279.98px) {
  .burger { display: block; }
  .site-header { gap: 12px; }
  .header__cta { margin-left: auto; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 30;
    width: min(340px, 86vw);
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 88px 28px max(28px, env(safe-area-inset-bottom));
    background: #f4f9fd;
    box-shadow: -18px 0 40px rgba(30, 50, 70, .18);
    overflow-y: auto;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .35s cubic-bezier(.3,.7,.2,1), visibility 0s .35s;
  }
  .nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform .35s cubic-bezier(.3,.7,.2,1);
  }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
  }
  .nav__list a {
    padding: 10px 0;
    font-size: 15px;
    border-bottom: 1px solid rgba(88, 110, 130, .3);
  }
  .nav__list a::after { display: none; }
  .nav__cta { display: inline-flex; height: 40px; font-size: 15px; }
  .burger { position: relative; z-index: 40; }
  .site-header.is-stuck { padding-block: 6px; }
  .site-header.is-stuck .logo { width: 76px; }
  .logo { width: 92px; }
  .logo__word { font-size: 15px; }
  .logo__tag { font-size: 7px; }
}

/* ---------- Portrait screens & phones ----------
   The scene is enlarged and pinned to the bottom so the whole
   family stays in frame; the headline sits in the sky above
   and still tucks in behind their heads. */
@media (max-width: 767px), (max-aspect-ratio: 3/4) {
  :root { --hero-h: clamp(440px, 128vw, 100svh); }

  .scene {
    left: -61.4vw; top: auto; bottom: 0;
    width: 230vw;
    transform: none;
  }
  .scene--bg {
    -webkit-mask-image: linear-gradient(transparent 0, #000 24%);
            mask-image: linear-gradient(transparent 0, #000 24%);
  }
  .scene--title {
    left: 0; top: 0; bottom: 0;
    width: 100%;
    aspect-ratio: auto;
  }
  /* Stacked lockup: CANVAS runs the full width behind the heads,
     "Your" sits on its top-left, "YOUR Story" on its top-right. */
  .lockup {
    left: 4%;
    top: auto;
    bottom: 52vw;
    width: 92%;
    aspect-ratio: 100 / 40;
  }
  .lockup__canvas { 
    /* left: 0;  */
    left: 20cqw;
    top: 8.16cqw; font-size: 39.6cqw; }
  .lockup__script--your  { 
    left: 11cqw;
    /* left: .8cqw; */
     top: 1cqw; font-size: 10.1cqw; }
  .lockup__your  { left: 71cqw; top: -8.4cqw; font-size: 11cqw; }
  .lockup__script--story { left: 69.3cqw; top: -4.4cqw; font-size: 8.9cqw; }
}

@media (max-width: 420px) {
  .header__cta { display: none; }
  .burger { margin-left: auto; }
}

/* Short landscape phones */
@media (max-height: 460px) and (orientation: landscape) {
  .site-header { padding-top: 8px; }
  .logo { width: 70px; }
  .logo__word { font-size: 12px; }
  .logo__tag { display: none; }
  .nav { padding-top: 64px; }
  .nav__list a { padding: 10px 0; }
}

/* ---------- Enquiry popup ---------- */
.modal {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-top: 5px solid var(--olive);
  background: #fff;
  color: var(--ink);
  overflow: auto;
  box-shadow: 0 30px 80px rgba(20, 28, 45, .35);
}
.modal::backdrop { background: rgba(24, 30, 48, .55); backdrop-filter: blur(3px); }
.modal__body { position: relative; padding: 30px 30px 28px; }
.modal__close {
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px;
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: #555;
}
.modal__close:hover { color: var(--ink); }
.modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--navy);
}
.modal__title em {
  margin-right: .12em;
  font-family: var(--font-script);
  font-style: normal;
  font-size: 1em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--olive-deep);
}
.modal__sub { margin: 8px 0 20px; font-size: 14px; font-weight: 400; line-height: 1.5; color: #555; }

.field { margin-bottom: 14px; }
.field label {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
}
.field label small { font-weight: 400; text-transform: none; letter-spacing: 0; color: #6b7078; }
.field textarea { height: auto; min-height: 84px; padding: 11px 14px; resize: vertical; line-height: 1.45; }
.field input, .field select, .field textarea {
  width: 100%; padding-inline: 14px;
  border: 1px solid #c9cdd3; border-radius: 0; background-color: #fff;
  font: 400 16px var(--font-ui); color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.field input, .field select { height: 46px; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, #555 50%), linear-gradient(135deg, #555 50%, transparent 50%);
  background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px rgba(124, 140, 91, .25);
}
.field__err { display: none; margin-top: 5px; font-size: 12.5px; font-weight: 400; color: #b3261e; }
.field.is-invalid input { border-color: #b3261e; }
.field.is-invalid .field__err { display: block; }

.modal__submit { width: 100%; height: 48px; margin-top: 4px; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: 15px; }
.modal__submit[disabled] { opacity: .6; cursor: wait; }
.modal__note { margin: 12px 0 0; font-size: 12px; font-weight: 400; line-height: 1.5; color: #6b7078; }

.modal__done { display: none; padding: 18px 0 6px; text-align: center; }
.modal__done p { margin: 10px 0 0; font-size: 15px; font-weight: 400; line-height: 1.55; color: #444; }
.modal.is-done form, .modal.is-done .modal__sub, .modal.is-done .modal__body > .modal__title { display: none; }
.modal.is-done .modal__done { display: block; }

@media (max-width: 420px) {
  .modal__body { padding: 26px 20px 22px; }
  .modal__title { font-size: 28px; }
}
.modal__link { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* two fields side by side in the wider popups */
.modal--wide { width: min(560px, calc(100vw - 32px)); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.field input[type="date"] { min-width: 0; text-transform: uppercase; font-size: 15px; }
.field.is-invalid select { border-color: #b3261e; }
@media (max-width: 480px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

/* Image popup (master plan) */
.modal--image {
  width: min(1200px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  border-top: 0;
  background: #fff;
  overflow: hidden;
}
.modal--image[open] { display: flex; flex-direction: column; }
.modal--image .modal__close {
  z-index: 2;
  top: 8px; right: 8px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 10px rgba(20, 28, 45, .2);
}
.modal__stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #f3f4ef;
}
.modal__stage img {
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 24px - 34px);
  object-fit: contain;
  cursor: zoom-in;
}
.modal__stage.is-zoomed img { width: auto; max-width: none; max-height: none; cursor: zoom-out; }
.modal__hint { flex: none; margin: 0; padding: 8px 12px; font-size: 12px; font-weight: 400; text-align: center; color: #6b7078; }

/* ---------- About ---------- */
.about {
  --about-bg: #fbebd3;
  position: relative;
  isolation: isolate;
  min-height: 52.1vw;                 /* artwork ratio 1920 : 1000 */
  /* bottom padding keeps the copy + RERA panel above the artwork's tree line
     (tree line sits ~73% down the image = ~14vw above the section bottom) */
  padding: clamp(48px, 5vw, 96px) var(--gutter) 17vw;
  background: var(--about-bg);
  overflow: hidden;
}
/* artwork is width-fitted and pinned to the bottom, so its height always follows the
   viewport width; any extra section height above it fades into the section colour */
.about__bg {
  position: absolute; inset: auto 0 0 0; z-index: -1;
  height: 52.1vw;
  background: url("../images/about-bg.webp") center bottom / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(transparent 0, #000 22%);
          mask-image: linear-gradient(transparent 0, #000 22%);
}
.about__inner {
  display: grid;
  grid-template-columns: minmax(0, 488px) minmax(0, 1fr);
  column-gap: clamp(32px, 4.2vw, 70px);
  align-items: start;
  width: min(100%, 62vw, 1180px);
  min-width: min(100%, 880px);
  margin-inline: auto;
}

.about__title { position: relative; margin: 0 0 clamp(14px, 1.4vw, 24px); font-weight: 400; line-height: 1; }
.about__script {
  display: block;
  margin: 0 0 0 -.86em;
  font-family: var(--font-script);
  font-size: clamp(42px, 4vw, 72px);
  line-height: 1.25;
  color: var(--ink);
  position: relative; z-index: 1;
}
.about__word {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(52px, 4.9vw, 90px);
  line-height: .95;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--olive);
}
.about__copy p {
  margin: 0 0 1em;
  font-size: clamp(14px, 1.02vw, 17px);
  font-weight: 400;
  line-height: 1.75;
  color: #232323;
}
.about__actions {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 14px 12px;
  margin-top: clamp(14px, 1.6vw, 30px);
}
.about__actions .btn { font-size: clamp(12.5px, .9vw, 17.5px); padding-inline: clamp(14px, 1.3vw, 22px);height: 48px; }
/* RERA / layout approval: it sits over the lawn artwork at most widths, so it gets its
   own soft panel (same treatment as .legal__rera) and lines up with the buttons */
.about .rera_box {
  width: fit-content;
  max-width: 100%;
  padding: 10px 16px;
  border-left: 3px solid var(--olive);
  background: rgba(251, 235, 211, .88);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.about .about__rera {
  margin: 0;
  font-size: clamp(12px, .8vw, 15px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .02em;
  text-align: left;
  text-transform: uppercase;
  color: #232323;
}
.about .about__rera .nowrap { white-space: nowrap; }

.stats {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: clamp(26px, 2.9vw, 50px) clamp(28px, 3.2vw, 56px);
  margin: clamp(2px, .4vw, 8px) 0 0;
  justify-content: end;
}
.stat { display: flex; flex-direction: column-reverse; gap: 4px; }   /* dt/dd order for a11y, number on top visually */
.stat dd { margin: 0; display: flex; align-items: baseline; gap: .55em; color: var(--navy); white-space: nowrap; }
.stat dt { font-size: clamp(13px, .95vw, 16px); font-weight: 400; color: #232323; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(46px, 4.8vw, 90px);
  line-height: .9;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}
/* Count-up numbers: an invisible copy of the final value shares one grid cell with
   the live number, so the width never changes while main.js counts and the text
   baseline stays true in both flex and inline layouts. */
[data-count][data-final] { display: inline-grid; justify-items: start; }
[data-count][data-final]::before { content: attr(data-final); grid-area: 1 / 1; visibility: hidden; }
[data-count][data-final] > span { grid-area: 1 / 1; }
.stat__unit {
  font-size: clamp(14px, 1.1vw, 19px);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
}
@media (max-width: 1700px) { .about__inner {grid-template-columns: minmax(0, 400px) minmax(0, 1fr);} }
@media (max-width: 1023px) { 
  .about { min-height: 0; padding-bottom: 46vw; }
  .about__inner { grid-template-columns: minmax(0, 1fr); row-gap: 44px; width: min(100%, 640px); min-width: 0; }
  .about__script { margin-left: -.3em; }
  .stats { grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: start; }
  /* scenery is pinned under the content and fades into the section colour */
  .about__bg {
    inset: auto 0 0 0; height: 80vw;
    background-size: 150vw auto; background-position: 72% bottom;
    -webkit-mask-image: linear-gradient(transparent 0, #000 45%);
            mask-image: linear-gradient(transparent 0, #000 45%);
  }
}
@media (max-width: 599px) {
  .about { padding-top: 44px; padding-bottom: 62vw; }
  .about__script { margin-left: -.12em; }
  .about__bg { height: 110vw; background-size: 205vw auto; background-position: 78% bottom; }
  .about__actions { display: grid; grid-template-columns: 1fr; }
  .about__actions .btn { height: 46px; font-size: 14px; }
  .stats { gap: 24px 14px; grid-template-columns: repeat(2, minmax(0, auto)); justify-content: space-between;}
  .stat__num { font-size: clamp(32px, 9.4vw, 46px); letter-spacing: -1px;}
  .stat__unit { font-size: 12px; }
  .stat dt { font-size: 12.5px; }
  .stat dd { gap: .3em; }
}
@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr; }
}

/* ---------- About Urbando ---------- */
.urbando {
  position: relative;
  padding: clamp(40px, 2.4vw, 56px) var(--gutter) clamp(48px, 5vw, 100px);
  /* background:
    radial-gradient(60% 45% at 100% 8%, rgba(190, 205, 150, .38), transparent 70%),
    radial-gradient(45% 60% at 0% 25%, rgba(250, 214, 180, .55), transparent 70%),
    linear-gradient(#fdf5e8, #fdf8ee 30%); */
  overflow: hidden;
}
.urbando__inner {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 36fr);
  grid-template-areas: "title intro" "art side";
  column-gap: clamp(28px, 4vw, 20px);
  width: min(100%, 70vw, 1500px);
  min-width: min(100%, 900px);
  margin-inline: auto;
}
.urbando__title { grid-area: title; margin: 0; font-weight: 400; }
.urbando__script {
  display: block;
  width: max-content;
  margin: 0 0 20px -.04em;
  font-family: var(--font-script);
  font-size: clamp(38px, 3.12vw, 64px);
  line-height: 1.5;
  color: var(--ink);
  position: relative; z-index: 1;
}
.urbando__headline {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(44px, 5.2vw, 90px);
  line-height: .84;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--olive);
  /* the artwork's headline is Bebas Neue condensed ~15% */
  width: calc(100% / .85);
  scale: .85 1;
  transform-origin: 0 0;
}
.urbando__intro {
  grid-area: intro;
  align-self: end;
  margin: 0;
  font-size: clamp(15px, .94vw, 18px);
  font-weight: 400;
  line-height: 1.68;
  color: #232323;
}
.urbando__art {
  grid-area: art;
  margin: clamp(20px, 2vw, 40px) 0 0 -9%;
  width: 102%;
}
.urbando__art img { width: 100%; height: auto; }
.urbando__side { grid-area: side; padding-top: clamp(40px, 4vw, 78px); }

.brands { display: grid; gap: clamp(30px, 2.2vw, 56px); margin-bottom: clamp(36px, 3.4vw, 64px); }
.brand img { width: auto; height: auto; max-width: none; margin-bottom: 14px; }
.brand:nth-child(1) img { height: clamp(30px, 1.85vw, 36px); }
.brand:nth-child(2) img { height: clamp(33px, 2.05vw, 40px); }
.brand:nth-child(3) img { height: clamp(50px, 3.15vw, 61px); }
.brand p {
  margin: 0;
  /* max-width: 24em; */
  text-wrap: balance;
  font-size: clamp(15px, .94vw, 18px);
  font-weight: 400;
  line-height: 1.45;
  color: #232323;
}

@media (max-width: 1023px) {
  .urbando__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "intro" "art" "side";
    width: min(100%, 640px); min-width: 0;
  }
  .urbando__headline { font-size: clamp(56px, 8.6vw, 84px); }
  .urbando__script { font-size: clamp(44px, 6.4vw, 60px); }
  .urbando__intro { margin-top: 22px; }
  .urbando__art { width: 108%; margin: 12px 0 0 -4%; }
  .urbando__side { padding-top: 16px; }
}
@media (max-width: 599px) {
  .urbando { padding-top: 36px; padding-bottom: 88px; }
  .urbando__headline { font-size: clamp(36px, 11.6vw, 56px); }
  .urbando__headline br { display: none; }
  .urbando__script { font-size: clamp(34px, 10vw, 44px); }
  .urbando__art { width: 116%; margin-left: -8%; }
  .btn--lg { width: 100%; height: 48px; }
}

/* ---------- One Canvas, many starting points ---------- */
.starts {
  position: relative;
  padding: clamp(40px, 2.6vw, 60px) var(--gutter) clamp(48px, 4.4vw, 90px);
  /* background:
    radial-gradient(40% 55% at 0% 30%, rgba(250, 214, 180, .5), transparent 70%),
    radial-gradient(38% 50% at 100% 78%, rgba(200, 212, 165, .35), transparent 70%),
    #fdf8ee; */
  overflow: hidden;
}
.starts__inner { width: min(100%, 84.5vw, 1700px); min-width: min(100%, 940px); margin-inline: auto; }

.starts__title { margin: 0; font-weight: 400; text-align: center; }
.starts__script {
  display: block;
  width: max-content;
  margin: 0 auto 20px;
  font-family: var(--font-script);
  font-size: clamp(38px, 3.2vw, 66px);
  line-height: 1.5;
  color: var(--ink);
  position: relative; z-index: 1;
}
.starts__headline {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(44px, 5.3vw, 90px);
  line-height: .9;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--olive);
  scale: .85 1;                         /* same condensed cut as the other section headlines */
}

.starts__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 41.2vw) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "tl art tr" "bl art br";
  margin-top: clamp(16px, 1.6vw, 34px);
}
/* the divider runs the full width and passes behind the painting */
.starts__grid::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(60, 60, 60, .32);
}
.starts__art { grid-area: art; position: relative; z-index: 1; margin: 0; align-self: center; }
.starts__art img { width: 100%; height: auto; }

.start { position: relative; }
.start--tl { grid-area: tl; align-self: end; }
.start--bl { grid-area: bl; align-self: start; }
.start--tr { grid-area: tr; align-self: end; }
.start--br { grid-area: br; align-self: start; }
.start--tl, .start--bl { padding-right: clamp(20px, 3.8vw, 76px); text-align: right; }
.start--tr, .start--br { padding-left: clamp(20px, 3.8vw, 76px); }
.start--tl, .start--tr { padding-bottom: clamp(22px, 2.1vw, 42px); }
.start--bl, .start--br { padding-top: clamp(20px, 1.9vw, 38px); }

.start h3 {
  margin: 0 0 .1em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 1.85vw, 38px);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--navy);
}
.start p {
  margin: 0;
  max-width: 15.2em;
  font-size: clamp(14.5px, .95vw, 18px);
  font-weight: 400;
  line-height: 1.68;
  color: #232323;
}
.start--tl p, .start--bl p { margin-left: auto; }

@media (max-width: 1023px) {
  .starts__inner { width: min(100%, 680px); min-width: 0; }
  .starts__headline { font-size: clamp(52px, 8.6vw, 84px); }
  .starts__script { font-size: clamp(42px, 6.4vw, 60px); }
  .starts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas: "art art" "tl tr" "bl br";
    column-gap: 36px;
  }
  .starts__grid::before { display: none; }
  .starts__art { width: min(100%, 520px); justify-self: center; margin-bottom: 8px; }
  .start, .start--tl, .start--bl, .start--tr, .start--br { padding: 22px 0; text-align: left; align-self: start; }
  .start--bl, .start--br { border-top: 1px solid rgba(60, 60, 60, .25); }
  .start p, .start--tl p, .start--bl p { max-width: none; margin-left: 0; }
}
@media (max-width: 599px) {
  .starts { padding-top: 36px; padding-bottom: 88px; }
  .starts__headline { font-size: clamp(36px, 12.4vw, 58px); }
  .starts__script { font-size: clamp(34px, 10vw, 44px); }
  .starts__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "tl" "tr" "bl" "br"; }
  .starts__art { width: 108%; margin-left: -4%; }
  .start--tr { border-top: 1px solid rgba(60, 60, 60, .25); }
  .start h3 { font-size: 28px; }
}
/* the phone bottom gap for the WhatsApp button now belongs to the last section only */
@media (max-width: 599px) { .urbando { padding-bottom: 48px; } }

/* ---------- Why Padappai (slick slider) ---------- */
.why {
  position: relative;
  padding: clamp(44px, 3.2vw, 70px) var(--gutter) clamp(48px, 4.4vw, 90px);
  /* background:
    radial-gradient(34% 60% at 0% 28%, rgba(176, 178, 214, .62), transparent 72%),
    radial-gradient(30% 40% at 100% 0%, rgba(190, 192, 224, .45), transparent 70%),
    radial-gradient(30% 34% at 100% 100%, rgba(190, 192, 224, .4), transparent 70%),
    radial-gradient(40% 30% at 35% 0%, rgba(200, 202, 230, .4), transparent 70%),
    #f3f3fa; */
  overflow: hidden;
}
.why__inner { width: min(100%, 69vw, 1500px); min-width: min(100%, 900px); margin-inline: auto; }

.why__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.why__title { margin: 0; font-weight: 400; min-width: 0; }
.why__script {
  display: block;
  width: max-content;
  margin: 0 0 20px .02em;
  font-family: var(--font-script);
  font-size: clamp(38px, 3.2vw, 66px);
  line-height: 1.5;
  color: var(--ink);
  position: relative; z-index: 1;
}
.why__headline {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(44px, 5.25vw, 90px);
  line-height: .84;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--navy);
  width: calc(100% / .85);
  scale: .85 1;
  transform-origin: 0 0;
}

.why__arrows { display: flex; gap: 10px; flex: none; padding-bottom: 4px; }
.why__arrow {
  display: grid; place-items: center;
  width: clamp(40px, 2.4vw, 46px); height: clamp(40px, 2.4vw, 46px);
  padding: 0;
  border: 1.5px solid var(--ink);
  background: rgba(255, 255, 255, .7);
  color: var(--ink);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
}
.why__arrow:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.why__arrow.slick-disabled { opacity: .35; cursor: default; pointer-events: none; }
.why__arrow svg { transition: transform .25s ease; }
.why__arrow--prev:hover svg { transform: translateX(-3px); }
.why__arrow--next:hover svg { transform: translateX(3px); }

/* The next card peeks in from the right and fades out:
   slick sizes slides from the list's content box, so padding-right on
   .slick-list leaves room for the peek without changing slidesToShow. */
.why__viewport {
  margin-top: clamp(20px, 2.2vw, 44px);
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 99%);
          mask-image: linear-gradient(90deg, #000 86%, transparent 99%);
}
.why__slider .slick-list { padding: 0 20.8% 0 0 !important; }
.why__slider .slick-track { display: flex; margin-left: 0; }
.why__slider .slick-slide { height: auto; }
/* before slick boots: same look, no layout jump */
.why__slider:not(.slick-initialized) { display: grid; grid-auto-flow: column; grid-auto-columns: 39.6%; overflow: hidden; }

.why-card { padding-right: clamp(24px, 3vw, 60px); outline: none; }
.why-card__art { margin: 0 0 clamp(14px, 1.4vw, 28px); max-width: 480px; aspect-ratio: 500 / 450; }
.why-card__art img { width: 100%; height: 100%; object-fit: contain; object-position: left center; transition: transform .7s cubic-bezier(.2,.7,.2,1); transform-origin: 50% 60%; }
.why-card:hover .why-card__art img { transform: scale(1.035); }
.why-card h3 {
  margin: 0 0 .12em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 1.85vw, 38px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
}
.why-card p {
  margin: 0;
  max-width: 25em;
  font-size: clamp(14.5px, .95vw, 18px);
  font-weight: 400;
  line-height: 1.68;
  color: #232323;
}

.why__dots { margin-top: clamp(26px, 2.6vw, 50px); }
.why__dots ul { display: flex; justify-content: center; gap: 6px; }
.why__dots li { display: flex; }
.why__dots button {
  width: 34px; height: 5px; padding: 0; border: 0;
  background: rgba(63, 69, 120, .28);
  font-size: 0; color: transparent; cursor: pointer;
  position: relative;
  transition: background .3s ease, width .3s ease;
}
.why__dots button::before { content: ""; position: absolute; inset: -12px 0; }   /* bigger tap target */
.why__dots .slick-active button { background: var(--navy); }

@media (max-width: 1023px) {
  .why__inner { width: min(100%, 680px); min-width: 0; }
  .why__headline { font-size: clamp(52px, 8.6vw, 84px); }
  .why__script { font-size: clamp(42px, 6.4vw, 60px); }
  .why__slider .slick-list { padding-right: 12% !important; }
  .why__slider:not(.slick-initialized) { grid-auto-columns: 44%; }
  .why-card { padding-right: 24px; }
}
@media (max-width: 599px) {
  .why { padding-top: 40px; padding-bottom: 88px; }
  .why__head { align-items: flex-end; }
  .why__headline { font-size: clamp(36px, 11.6vw, 56px); }
  .why__script { font-size: clamp(34px, 10vw, 44px); }
  /* .why__arrows { display: none; }                     */
  .why__slider .slick-list { padding-right: 16% !important; }
  .why__slider:not(.slick-initialized) { grid-auto-columns: 84%; }
  .why-card { padding-right: 18px; }
  .why-card h3 { font-size: 28px; }
}
@media (max-width: 599px) { .starts { padding-bottom: 48px; } }

/* ---------- Appreciation potential ---------- */
.growth {
  position: relative;
  padding: clamp(28px, 1.6vw, 40px) var(--gutter) clamp(40px, 3vw, 70px);
  /* background:
    radial-gradient(30% 34% at 100% 0%, rgba(190, 192, 224, .4), transparent 70%),  
    radial-gradient(30% 36% at 0% 34%, rgba(176, 178, 214, .5), transparent 72%),
    radial-gradient(30% 45% at 100% 62%, rgba(186, 188, 222, .5), transparent 72%),
    radial-gradient(26% 30% at 8% 60%, rgba(196, 198, 228, .35), transparent 70%),
    #f3f3fa;
  overflow: hidden; */
}
.growth__inner { width: min(100%, 70vw, 1500px); min-width: min(100%, 900px); margin-inline: auto; }

.growth__title { margin: 0; font-weight: 400; text-align: center; }
.growth__script {
  display: block;
  width: max-content; max-width: 100%;
  margin: 0 auto 20px;
  font-family: var(--font-script);
  font-size: clamp(36px, 3.1vw, 64px);
  line-height: 1.45;
  color: var(--ink);
  position: relative; z-index: 1;
}
.growth__headline {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(44px, 5.3vw, 90px);
  line-height: .9;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--navy);
  scale: .85 1;
}
.growth__lead {
  max-width: 37em;
  margin: clamp(14px, 1.3vw, 26px) auto 0;
  font-size: clamp(15px, .95vw, 18px);
  font-weight: 400;
  line-height: 1.68;
  text-align: center;
  color: #232323;
}

/* cards keep a one-third width and centre as a group, so 2 or 3 cards both sit centred */
.value-cards {
  --vc-gap: clamp(12px, 1.2vw, 24px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vc-gap);
  margin: clamp(26px, 2.3vw, 46px) 0 0;
}
.value-card {
  flex: 0 1 calc((100% - 2 * var(--vc-gap)) / 3);
  min-width: 0;
  display: flex; flex-direction: column-reverse; align-items: center; justify-content: center;
  gap: 6px;
  min-height: clamp(120px, 7.9vw, 152px);
  padding: 18px 14px;
  background: #fff;
  border: 1.5px solid #dcdceb;
  text-align: center;
  transition: border-color .3s ease, box-shadow .3s ease, translate .3s ease;
}
.value-card:hover { border-color: var(--navy); box-shadow: 0 14px 30px rgba(63, 69, 120, .12); translate: 0 -4px; }
.value-card dt {
  font-size: clamp(13px, .94vw, 18px);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
}
.value-card dd { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: .5em; color: var(--navy); }
.value-card .stat__num { font-size: clamp(52px, 4.5vw, 88px); line-height: .82; }
.value-card__unit { font-size: clamp(20px, 1.6vw, 31px); font-weight: 700; color: var(--ink); }

.possible {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  align-items: center;
  column-gap: clamp(24px, 3vw, 60px);
  margin-top: clamp(28px, 2.6vw, 52px);
  padding-left: clamp(0px, 3.4vw, 66px);
}
.possible__title {
  margin: 0 0 clamp(18px, 1.9vw, 38px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 3.35vw, 66px);
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
  width: calc(100% / .85);
  scale: .85 1;
  transform-origin: 0 0;
}
.possible__copy p {
  margin: 0 0 1em;
  max-width: 25em;
  font-size: clamp(15px, .95vw, 18px);
  font-weight: 400;
  line-height: 1.68;
  color: #232323;
}
.possible__copy .possible__tag { margin-bottom: 0; font-weight: 600; color: var(--navy); }
.possible__art { margin: 0 -2% 0 0; }
.possible__art img { width: 100%; height: auto; }

@media (max-width: 1023px) {
  .growth__inner { width: min(100%, 680px); min-width: 0; }
  .growth__headline { font-size: clamp(50px, 8.2vw, 80px); }
  .growth__script { font-size: clamp(40px, 6.2vw, 58px); }
  .value-card dt { font-size: 12.5px; }
  .possible { grid-template-columns: minmax(0, 1fr); padding-left: 0; row-gap: 12px; }
  .possible__copy p { max-width: none; }
  .possible__art { width: 104%; margin: 0 0 0 -2%; }
}
@media (max-width: 599px) {
  .growth { padding-top: 36px; padding-bottom: 88px; }
  .growth__headline { font-size: clamp(34px, 11vw, 54px); scale: .85 1; }
  .growth__script { font-size: clamp(24px, 7.7vw, 40px); white-space: nowrap; }
  .value-card { flex-basis: 100%; min-height: 112px; }
  .possible__title { font-size: clamp(36px, 10.4vw, 48px); }
  .possible__tag br { display: none; }
}
@media (max-width: 599px) { .why { padding-bottom: 48px; } }

/* ---------- Location ---------- */
.location {
  position: relative;
  padding: clamp(48px, 5.4vw, 110px) var(--gutter) clamp(56px, 6.6vw, 130px);
  /* background:
    radial-gradient(34% 60% at 100% 22%, rgba(172, 174, 212, .6), transparent 72%),
    radial-gradient(40% 40% at 0% 45%, rgba(190, 192, 224, .45), transparent 72%),
    radial-gradient(60% 30% at 50% 100%, rgba(200, 202, 230, .35), transparent 70%),
    #f3f3fa; */
  overflow: hidden;
}
.location__inner { width: min(100%, 69vw, 1500px); min-width: min(100%, 920px); margin-inline: auto; }
.location__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.3vw, 90px);
  line-height: .9;
  letter-spacing: -.012em;
  text-align: center;
  text-transform: uppercase;
  color: var(--navy);
  scale: .85 1;
  margin-inline: -8%;                 /* room for the long line before the condense */
}
.location__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 12.6vw);
  align-items: center;
  column-gap: clamp(24px, 2.7vw, 54px);
  margin-top: clamp(20px, 2.2vw, 44px);
}
.location__map { position: relative; margin: 0; }
.location__map img { width: 100%; height: auto; }
.location__pin {                      /* pulse under the painted pin; position is a % of the map image */
  position: absolute;
   /* left: 47.17%; top: 58.9%; */
      left: 49%; top: 60%;

  width: 0; height: 0;
}

.dist { display: grid; gap: clamp(8px, .62vw, 12px); margin-bottom: clamp(28px, 2.6vw, 50px); }
.dist li { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dist__place { font-size: clamp(15px, 1vw, 19px); font-weight: 400; letter-spacing: .02em; line-height: 1.42; color: #232323; }
.dist__km {
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.12vw, 22px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dist__km [data-count][data-final] { justify-items: end; }

@media (max-width: 1023px) {
  .location__inner { width: min(100%, 680px); min-width: 0; }
  .location__title { font-size: clamp(44px, 7.6vw, 76px); margin-inline: -6%; }
  .location__grid { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .location__map { width: 108%; margin-left: -4%; }
  .dist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; row-gap: 12px; }
  .dist li { padding-bottom: 12px; border-bottom: 1px solid rgba(63, 69, 120, .18); }
  .dist__place br { display: none; }
}
@media (max-width: 599px) {
  .location { padding-top: 44px; padding-bottom: 88px; }
  .location__title { font-size: clamp(34px, 11vw, 52px); }
  .location__map { width: 116%; margin-left: -8%; }
  .dist { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) { .growth { padding-bottom: 48px; } }

/* line breaks that only apply on phones */
.br-sm { display: none; }
@media (max-width: 599px) { .br-sm { display: inline; } }

/* ---------- Amenities / Features (tabs + slick) ---------- */
.amen {
  position: relative;
  padding: clamp(48px, 4.4vw, 90px) var(--gutter) clamp(48px, 4.2vw, 84px);
  /* background:
    radial-gradient(38% 60% at 0% 12%, rgba(196, 208, 160, .5), transparent 72%),
    radial-gradient(40% 70% at 100% 40%, rgba(250, 218, 190, .5), transparent 72%),
    radial-gradient(40% 40% at 10% 100%, rgba(206, 216, 176, .35), transparent 70%),
    #fdf8ee; */
  overflow: hidden;
}
.amen__inner { width: min(100%, 69vw, 1500px); min-width: min(100%, 920px); margin-inline: auto; }
.amen__title { margin: 0; font-weight: 400; text-align: center; }
.amen__script {
  display: block; width: max-content; margin: 0 auto 20px;
  font-family: var(--font-script);
  font-size: clamp(38px, 3.3vw, 68px);
  line-height: 1.5;
  color: var(--ink);
  position: relative; z-index: 1;
}
.amen__headline {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 5.3vw, 90px);
  line-height: .9;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--olive);
  scale: .85 1;
  margin-inline: -8%;
}

.tabs {
  display: flex; align-items: center;
  width: max-content; max-width: 100%;
  margin: clamp(22px, 2.3vw, 46px) auto 0;
  border-block: 1px solid rgba(60, 60, 60, .38);
}
.tabs__btn {
  position: relative;
  padding: 12px clamp(20px, 1.8vw, 35px);
  border: 0; background: none; cursor: pointer;
  font: 500 clamp(14px, .89vw, 17px) var(--font-ui);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink);
  transition: color .3s ease;
}
.tabs__btn + .tabs__btn::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 1px; background: rgba(60, 60, 60, .38);
}
.tabs__btn::after {
  content: ""; position: absolute; left: clamp(20px, 1.8vw, 35px); right: clamp(20px, 1.8vw, 35px); bottom: 7px;
  height: 1.5px; background: var(--navy);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}
.tabs__btn:hover { color: var(--navy); }
.tabs__btn[aria-selected="true"], .tabs__btn[aria-pressed="true"] { color: var(--navy); font-weight: 700; }
.tabs__btn:hover::after, .tabs__btn:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.tabs__btn[aria-selected="true"]::after { transform: scaleX(0); }

.amen__panels { margin-top: clamp(24px, 2.5vw, 50px); }
.amen__panel[hidden] { display: none; }
.amen__panel:focus-visible { outline-offset: 8px; }
.amen__viewport {
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
}
.amen__slider .slick-list { padding: 0 12.7% 0 0 !important; }
.amen__slider .slick-track { display: flex; margin-left: 0; }
.amen__slider .slick-slide { height: auto; }
.amen__slide { height: 100%; padding-right: clamp(14px, 1.78vw, 34px); box-sizing: border-box; }
.amen__slider:not(.slick-initialized) { display: grid; grid-auto-flow: column; grid-auto-columns: 29.1%; gap: 0; overflow: hidden; }

.amen-card {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 24px;
  height: 100%;
  /* aspect-ratio: 1 / 1; */
  padding: clamp(20px, 1.8vw, 36px);
  background: #fff;
  border: 1.5px solid #dedfe4;
  color: var(--ink);
  outline: none;
  transition: background-color .45s ease, border-color .45s ease, color .45s ease;
}
/* .amen-card__icon { width: clamp(52px, 3.75vw, 74px); height: auto; color: var(--olive); transition: color .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); filter: none;} */
.amen-card__icon { width: clamp(52px, 3.75vw, 60px); height: auto; color: var(--olive); transition: color .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); filter: none;}

.amen-card h3 {
  margin: 0 0 .25em;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 1.75vw, 36px); line-height: 1.05;
  text-transform: uppercase;
}
.amen-card p { margin: 0; font-size: clamp(14.5px, .95vw, 17px); font-weight: 400; line-height: 1.4; color: #232323; transition: color .45s ease; }

/* navy state: the leading card by default, or whichever card is hovered */
.amen__slider .slick-current .amen-card,
.amen-card:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.amen__slider .slick-current .amen-card p, .amen__slider .slick-current .amen-card .amen-card__icon,
.amen-card:hover p, .amen-card:hover .amen-card__icon { color: #fff; }
.amen-card:hover .amen-card__icon { color: #fff; filter: brightness(0) invert(1);}
 .amen__slider .slick-current .amen-card .amen-card__icon{color: #fff; filter: brightness(0) invert(1);}
.amen-card:hover .amen-card__icon { transform: translateY(-4px); }
.amen__slider:has(.amen-card:hover) .slick-current .amen-card:not(:hover) { background: #fff; border-color: #dedfe4; color: var(--ink); }
.amen__slider:has(.amen-card:hover) .slick-current .amen-card:not(:hover) p { color: #232323; }
.amen__slider:has(.amen-card:hover) .slick-current .amen-card:not(:hover) .amen-card__icon { 
  color: var(--olive); 
  filter: none;
}

.amen__foot {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  margin-top: clamp(24px, 2.6vw, 50px);
}
.amen__foot .why__dots { margin-top: 0; }
.amen__arrows { display: flex; gap: 10px; justify-self: end; }

@media (max-width: 1023px) {
  .amen__inner { width: min(100%, 680px); min-width: 0; }
  .amen__headline { font-size: clamp(44px, 7.6vw, 76px); margin-inline: -6%; }
  .amen__script { font-size: clamp(42px, 6.4vw, 60px); }
  .amen__slider .slick-list { padding-right: 12% !important; }
  .amen__slider:not(.slick-initialized) { grid-auto-columns: 44%; }
  .amen-card { padding: 24px; }
}
@media (max-width: 599px) {
  .amen { padding-top: 44px; padding-bottom: 88px; }
  .amen__headline { font-size: clamp(34px, 11vw, 52px); }
  .amen__script { font-size: clamp(34px, 10vw, 44px); }
  .tabs__btn { padding-inline: 22px; }
  .amen__slider .slick-list { padding-right: 16% !important; }
  .amen__slider:not(.slick-initialized) { grid-auto-columns: 84%; }
  .amen-card { aspect-ratio: auto; min-height: 300px; }
  .amen__foot { grid-template-columns: auto 1fr; }
  .amen__foot > span { display: none; }
  .amen__foot .why__dots { justify-content: flex-start;display: none ; }
   .why__dots { display: none ; }
   

}
@media (max-width: 599px) { .location { padding-bottom: 56px; } }

/* ---------- Gallery ---------- */
.gallery {
  position: relative;
  padding: clamp(48px, 4.4vw, 90px) var(--gutter) clamp(44px, 2.6vw, 56px);
  /* background:
    radial-gradient(34% 55% at 0% 22%, rgba(206, 216, 176, .5), transparent 72%),
    radial-gradient(34% 60% at 100% 30%, rgba(250, 218, 190, .5), transparent 72%),
    #fdf8ee; */
  overflow: hidden;
}
.gallery__inner { width: min(100%, 68.7vw, 1500px); min-width: min(100%, 920px); margin-inline: auto; }
.gallery__title { margin: 0; font-weight: 400; text-align: center; }
.gallery__script {
  display: block; width: max-content; margin: 0 auto 20px;
  font-family: var(--font-script);
  font-size: clamp(38px, 3.3vw, 68px); line-height: 1.5;
  color: var(--ink);
  position: relative; z-index: 1;
}
.gallery__headline {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 5.3vw, 90px); line-height: .9;
  letter-spacing: -.012em; text-transform: uppercase;
  color: var(--olive);
  scale: .85 1;
}

.tabs--scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs--scroll::-webkit-scrollbar { display: none; }
.tabs--scroll .tabs__btn { flex: none; font-weight: 400; font-size: clamp(14px, 1vw, 19px); letter-spacing: .01em; }
.tabs--scroll .tabs__btn[aria-pressed="true"] { font-weight: 600; }

.g-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(8px, .84vw, 16px);
  margin-top: clamp(24px, 2.6vw, 50px);
  transition: opacity .25s ease;
}
.g-grid.is-switching { opacity: 0; }
.g-item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #e9e6da;
  cursor: zoom-in;
}
.g-item[hidden] { display: none; }
.g-item.is-large { grid-column: span 2; grid-row: span 2; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.g-item__cap {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: clamp(12px, 1.1vw, 22px);
  background: linear-gradient(transparent 45%, rgba(40, 44, 84, .78));
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.35vw, 26px); line-height: 1; letter-spacing: .02em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .4s ease;
}
.g-item__cap span { transform: translateY(10px); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.g-item::after {                     /* "+" in the corner */
  content: "+";
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  background: #fff; color: var(--navy);
  font: 400 22px/1 var(--font-ui);
  opacity: 0; transform: scale(.6);
  transition: opacity .35s ease, transform .45s cubic-bezier(.3,1.4,.5,1);
}
.g-item:hover img, .g-item:focus-visible img { transform: scale(1.07); }
.g-item:hover .g-item__cap, .g-item:focus-visible .g-item__cap { opacity: 1; }
.g-item:hover .g-item__cap span, .g-item:focus-visible .g-item__cap span { transform: none; }
.g-item:hover::after, .g-item:focus-visible::after { opacity: 1; transform: none; }

.gallery__more { margin-top: clamp(28px, 2.6vw, 50px); text-align: center; }
.gallery__more .btn { cursor: pointer; font-family: var(--font-ui); min-width: 156px; }
.gallery__more .btn[hidden] { display: none; }

@media (max-width: 1023px) {
  .gallery__inner { width: min(100%, 680px); min-width: 0; }
  .gallery__headline { font-size: clamp(50px, 8.4vw, 82px); }
  .gallery__script { font-size: clamp(42px, 6.4vw, 60px); }
  .g-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .g-item__cap { opacity: 1; background: linear-gradient(transparent 60%, rgba(40, 44, 84, .7)); font-size: 17px; padding: 10px; }
  .g-item__cap span { transform: none; }
}
@media (max-width: 599px) {
  .gallery { padding-top: 44px; padding-bottom: 88px; }
  .gallery__headline { font-size: clamp(36px, 12vw, 56px); }
  .gallery__script { font-size: clamp(34px, 10vw, 44px); }
  .tabs--scroll { width: auto; margin-inline: -16px; padding-inline: 16px; justify-content: flex-start; }
  .tabs--scroll .tabs__btn { padding-inline: 16px; }
  .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .g-item::after { display: none; }
}
@media (max-width: 599px) { .amen { padding-bottom: 56px; } }

/* ---------- Lightbox (slick inside a dialog) ---------- */
.lightbox {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0;
  background: rgba(22, 24, 44, .97);
  color: #fff;
  overflow: hidden;
}
.lightbox[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr) auto auto; }
.lightbox > * { min-width: 0; }
.lightbox::backdrop { background: rgba(22, 24, 44, .97); }
.lightbox__close {
  position: absolute; top: 8px; right: 10px; z-index: 3;
  width: 44px; height: 44px; border: 0; background: none; color: #fff;
  font-size: 32px; line-height: 1; cursor: pointer; opacity: .8;
  transition: opacity .2s ease, rotate .3s ease;
}
.lightbox__close:hover { opacity: 1; rotate: 90deg; }
.lightbox__count { grid-row: 1; align-self: center; padding-left: 20px; font-family: var(--font-display); font-size: 20px; letter-spacing: .06em; opacity: .85; }
.lightbox__main { grid-row: 2; min-height: 0; padding: 0 clamp(8px, 5vw, 90px); }
.lightbox__main .slick-list, .lightbox__main .slick-track, .lightbox__main .slick-slide, .lightbox__main .slick-slide > div { height: 100%; }
.lightbox__slide { display: grid !important; place-items: center; height: 100%; outline: none; }
.lightbox__slide img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  min-width: min(100%, 520px);                 /* keeps small stand-in images from looking lost */
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.lightbox__main .slick-arrow {
  position: absolute; top: 50%; z-index: 2;
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-top: -24px; padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .7); background: rgba(22, 24, 44, .4); color: #fff;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.lightbox__main .slick-arrow:hover { background: #fff; border-color: #fff; color: var(--navy); }
.lightbox__main .slick-prev { left: clamp(8px, 1.6vw, 28px); }
.lightbox__main .slick-next { right: clamp(8px, 1.6vw, 28px); }
.lightbox__caption { grid-row: 3; margin: 0; padding: 40px 20px 40px; text-align: center; font-family: var(--font-display); font-size: clamp(20px, 1.5vw, 28px); letter-spacing: .03em; text-transform: uppercase; }
.lightbox__thumbs { grid-row: 4; width: min(100%, 760px); margin: 0 auto; padding: 0 12px max(14px, env(safe-area-inset-bottom));display: none; }
.lightbox__thumb { padding: 0 4px; outline: none; cursor: pointer; }
.lightbox__thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; opacity: .4; outline: 2px solid transparent; outline-offset: -2px; transition: opacity .3s ease, outline-color .3s ease; }
.lightbox__thumb:hover img { opacity: .8; }
.lightbox__thumbs .slick-current img { opacity: 1; outline-color: #fff; }
/* no <dialog> support: same box, positioned by hand */
.lightbox.is-open { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr) auto auto; }
html.lightbox-open { overflow: hidden; }
/* slick not loaded: one slide at a time, thumbs as a simple row */
.lightbox__main.is-plain { position: relative; }
.lightbox__main.is-plain .lightbox__slide[hidden] { display: none !important; }
.lightbox__thumbs.is-plain { display: flex; justify-content: center; overflow-x: auto; }
.lightbox__thumbs.is-plain .lightbox__thumb { flex: 0 0 min(14%, 96px); }
.lightbox__main.is-plain .lightbox__slide img { transform: none; opacity: 1; }
@media (max-width: 599px) {
  .lightbox__main { padding: 0; }
  .lightbox__main .slick-arrow { display: none !important; }        /* swipe on phones */
}

/* ---------- FAQ ---------- */
.faq {
  position: relative;
  padding: clamp(44px, 3.2vw, 64px) var(--gutter) clamp(56px, 5vw, 100px);
  /* background:
    radial-gradient(30% 50% at 0% 30%, rgba(206, 216, 176, .4), transparent 72%),
    radial-gradient(34% 60% at 100% 70%, rgba(250, 218, 190, .5), transparent 72%),
    #fdf8ee; */
  overflow: hidden;
}
.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 53fr);
  column-gap: clamp(32px, 6.4vw, 124px);
  align-items: start;
  width: min(100%, 69vw, 1500px); min-width: min(100%, 920px);
  margin-inline: auto;
}
.faq__intro { position: sticky; top: 110px; }
.faq__title { margin: 0; font-weight: 400; }
.faq__script {
  display: block; width: max-content;
  margin: 0 0 20px .02em;
  font-family: var(--font-script);
  font-size: clamp(38px, 3.3vw, 68px); line-height: 1.5;
  color: var(--ink);
  position: relative; z-index: 1;
}
.faq__headline {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(44px, 5.3vw, 90px); line-height: .9;
  letter-spacing: -.012em; text-transform: uppercase;
  color: var(--olive);
  width: calc(100% / .85); scale: .85 1; transform-origin: 0 0;
}
.faq__intro p {
  max-width: 28em;
  margin: clamp(14px, 1.5vw, 30px) 0 clamp(24px, 2.2vw, 44px);
  font-size: clamp(15px, .95vw, 18px); font-weight: 400; line-height: 1.68;
  color: #232323;
}

.faq__list { display: grid; gap: clamp(10px, .84vw, 16px); }
.faq__item {
  background: #fff;
  border: 1.5px solid #dedfe4;
  color: var(--ink);
  transition: background-color .4s ease, border-color .4s ease, color .4s ease;
}
.faq__item:hover { border-color: var(--navy); }
.faq__item.is-open { background: var(--navy); border-color: var(--navy); color: #fff; }
.faq__q { margin: 0; font-weight: 400; }
.faq__q button {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%;
  padding: clamp(20px, 1.75vw, 34px) clamp(18px, 1.75vw, 34px);
  border: 0; background: none; color: inherit; cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.25vw, 25px); line-height: 1.15; letter-spacing: .005em;
  text-align: left; text-transform: uppercase;
}
.faq__q button:focus-visible { outline: 2px solid var(--olive); outline-offset: -4px; }
.faq__q svg { flex: none; transition: rotate .45s cubic-bezier(.2,.7,.2,1); }
.faq__item.is-open .faq__q svg { rotate: 180deg; }
.faq__item.is-open .faq__q button { padding-bottom: clamp(8px, .6vw, 12px); }

/* height animates through grid rows: 0fr -> 1fr, no JS measuring */
.faq__a { display: grid; grid-template-rows: 0fr; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; min-height: 0; }
.faq__a p {
  margin: 0;
  padding: 0 clamp(18px, 1.75vw, 34px) clamp(20px, 1.75vw, 34px);
  max-width: 46em;
  font-size: clamp(14.5px, .9vw, 17px); font-weight: 400; line-height: 1.75;
}
.faq__a a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px)and (max-width: 1800px) {.cta{padding-bottom: 30vw !important;}}
@media (max-width: 1023px) {
  .faq__inner { grid-template-columns: minmax(0, 1fr); row-gap: 32px; width: min(100%, 680px); min-width: 0; }
  .faq__intro { position: static; }
  .faq__headline { font-size: clamp(52px, 8.6vw, 84px); }
  .faq__script { font-size: clamp(42px, 6.4vw, 60px); }
}
@media (max-width: 599px) {
  .faq { padding-top: 44px; padding-bottom: 88px; }
  .faq__headline { font-size: clamp(38px, 12.4vw, 58px); }
  .faq__script { font-size: clamp(34px, 10vw, 44px); }
  .faq__q button { font-size: 20px; }
}
@media (max-width: 599px) { .gallery { padding-bottom: 56px; } }

/* ---------- Closing call to action ---------- */
.cta {
  --cta-bg: #fdf3e0;
  position: relative; isolation: isolate;
  min-height: 41.6vw;                          /* artwork ratio 1919 : 799 */
  padding: clamp(44px, 3.4vw, 70px) var(--gutter) 0;
  background: var(--cta-bg);
  text-align: center;
  overflow: hidden;
}
.cta__bg { position: absolute; inset: 0; z-index: -1; background: url("../images/cta-bg.webp") center bottom / cover no-repeat; }
.cta__inner { width: min(100%, 760px); margin-inline: auto; }
.cta__title { margin: 0; font-weight: 400; }
.cta__script {
  display: block; width: max-content; margin: 0 auto 20px;
  font-family: var(--font-script);
  font-size: clamp(36px, 3.05vw, 62px); line-height: 1.5;
  color: var(--ink);
  position: relative; z-index: 1;
}
.cta__headline {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(44px, 5.3vw, 90px); line-height: .9;
  letter-spacing: -.012em; text-transform: uppercase;
  color: var(--olive);
  scale: .85 1;
  margin-inline: -10%;
}
.cta__inner p {
  max-width: 34em;
  margin: clamp(14px, 1.5vw, 30px) auto clamp(20px, 1.6vw, 32px);
  font-size: clamp(15px, .95vw, 18px); font-weight: 400; line-height: 1.68;
  color: #232323;
}
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
.cta__actions .btn--outline { background: transparent; }
.cta__actions .btn--outline:hover { background: var(--navy); }

@media (max-width: 1023px) {
  .cta { min-height: 0; padding-bottom: 52vw; }
  .cta__headline { font-size: clamp(50px, 8.4vw, 82px); margin-inline: -4%; }
  .cta__script { font-size: clamp(42px, 6.4vw, 60px); }
  /* .cta__bg {
    inset: auto 0 0 0; height: 84vw;
    background-size: 170vw auto;
    -webkit-mask-image: linear-gradient(transparent 0, #000 40%);
            mask-image: linear-gradient(transparent 0, #000 40%);
  } */
}
@media (max-width: 599px) {
  .cta { padding-top: 44px; padding-bottom: 78vw; }
  .cta__headline { font-size: clamp(38px, 12.4vw, 58px); margin-inline: 0; width: calc(100% / .85); margin-left: calc((100% - 100% / .85) / 2); }
  .cta__script { font-size: clamp(34px, 10vw, 44px); }
  /* .cta__bg { height: 120vw; background-size: 250vw auto; } */
  .cta__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .cta__actions .btn { width: 100%; }
}
@media (max-width: 599px) { .faq { padding-bottom: 56px; } }

/* ---------- Footer ---------- */
.footer {
  /* padding: clamp(12px, 2.6vw, 50px); */
  /* background:
    radial-gradient(30% 60% at 0% 100%, rgba(206, 216, 176, .45), transparent 72%),
    radial-gradient(30% 60% at 100% 60%, rgba(250, 218, 190, .5), transparent 72%),
    #fdf8ee; */
    background: #48542d;
}
.footer__panel { background: #48542d; color: #b9bdb3; padding: clamp(40px, 5vw, 96px) 0 clamp(40px, 5.2vw, 100px); overflow: hidden; }

.footer__marquee { overflow: hidden; user-select: none; }
.footer__track { display: flex; width: max-content; }
.footer__group { display: flex; flex: none; }
.footer__group span {
  flex: none;
  padding-right: .24em;
  font-family: var(--font-display);
  font-size: clamp(64px, 6.6vw, 128px);
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
  /* color: #5b6157; */
  color: #ffffff7a;
}
.footer__group .is-outline { color: transparent; 
  /* -webkit-text-stroke: 1.5px #5b6157; */
    -webkit-text-stroke: 1.5px #757a72;

   
}

.footer__box {
  width: min(100% - 2 * clamp(12px, 5.2vw, 100px), 1700px);
  margin: clamp(28px, 2.6vw, 50px) auto 0;
  padding: clamp(28px, 2.6vw, 50px) clamp(20px, 5.6vw, 108px) clamp(24px, 2.6vw, 50px);
  background: #4e5a34;
  border: 1px solid rgba(255, 255, 255, .16);
}
.footer__cols {
  display: grid;
  grid-template-columns: minmax(200px, 1.25fr) minmax(0, .95fr) minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, .9fr);
  align-items: baseline;
}
.footer__cols > * + * { padding-left: clamp(20px, 4.2vw, 80px); border-left: 1px solid rgba(255, 255, 255, .16); }
.footer__cols > * { padding-right: clamp(12px, 1.4vw, 28px); padding-bottom: 8px; }

.footer__logo { display: block; width: clamp(96px, 6.4vw, 124px); margin-bottom: 14px; }
.footer__logo img { width: 100%; height: auto; }
.footer__brand p { margin: 0 0 18px; max-width: 15em; }
.footer p, .footer address, .footer li { font-size: clamp(13.5px, .8vw, 15.5px); font-weight: 400; font-style: normal; line-height: 1.55; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; color: #2c3029;
  transition: background .25s ease, color .25s ease, translate .25s ease;
}
.footer__social svg{color: #000;}
.footer__social a:hover { background: var(--olive); color: #fff; translate: 0 -3px; }

.footer__col h2 {
  margin: 0 0 14px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(16px, .95vw, 18px); letter-spacing: .08em; text-transform: uppercase;
  color: #fff;
}
.footer__col p + h2 { margin-top: 18px; }
.footer__col ul { display: grid; gap: 5px; }
.footer__col p, .footer__col address { margin: 0; }
.footer a { color: inherit; text-decoration: none; transition: color .25s ease; }
.footer__col a, .footer__legal a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .25s ease, background-size .4s cubic-bezier(.65, 0, .35, 1); }
.footer__col a:hover, .footer__legal a:hover { color: #fff; background-size: 100% 1px; }

.footer__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  margin-top: clamp(24px, 2.4vw, 46px);
  padding-top: clamp(18px, 1.6vw, 30px);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.footer__bar p { margin: 0; }
.footer__credit { color: #fff; white-space: nowrap; }
.footer__credit a { text-decoration: underline; text-underline-offset: 3px; }
.footer__credit a:hover { color: var(--olive); }
@media (max-width: 1300px) {.footer__cols > * + * { padding-left: clamp(20px, 2.2vw, 80px);}}
@media (max-width: 1199px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__brand p { max-width: 30em; }
  .footer__cols > * + * { padding-left: 0; border-left: 0; }
  .footer__col--wide { grid-column: span 2; }
}
@media (max-width: 599px) {
  .footer__panel { padding-bottom: 84px; }                    /* clears the WhatsApp button */
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__col--wide { grid-column: 1 / -1; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
}
/* the footer is now the last block, so the sections above drop their phone-only bottom gap */
@media (max-width: 599px) { .urbando, .starts, .why, .growth, .location, .amen, .gallery, .faq { padding-bottom: 48px; } }

/* ---------- Page loader ---------- */
.loader { display: none; }
.js .loader { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; --n: 6; }
.is-loading, .is-loading body { overflow: hidden; }
/* The sheet is six strips. Each paints its own slice of one shared background
   (sized to the viewport and shifted by its index), so together they read as a single sheet. */
.loader__strips { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.loader__strips span {
  margin-right: -1px;                                   /* hides hairline gaps from sub-pixel rounding */
  background:
    radial-gradient(40vw 50vh at 0 100vh, rgba(206, 216, 176, .5), transparent 72%),
    radial-gradient(40vw 50vh at 100vw 0, rgba(250, 218, 190, .6), transparent 72%),
    #fdf8ee;
  background-size: 100vw 100vh;
  background-position: calc(var(--i) * -100vw / var(--n)) 0;
  background-repeat: no-repeat;
  box-shadow: 0 2px 0 var(--olive);                     /* olive edge that shows as the strip lifts */
}
.loader__inner { position: relative; display: grid; justify-items: center; gap: 22px; width: min(260px, 70vw); }
.loader__logo { width: clamp(110px, 9vw, 150px); height: auto; }
.loader__bar { width: 100%; height: 2px; background: rgba(124, 140, 91, .22); overflow: hidden; }
.loader__bar span { display: block; width: 100%; height: 100%; background: var(--olive); transform: scaleX(0); transform-origin: left; }
.loader__pct { font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: .18em; color: var(--navy); font-variant-numeric: tabular-nums; }
@media (max-width: 599px) {
  .js .loader { --n: 4; }
  .loader__strips span:nth-child(n+5) { display: none; }
}

/* ---------- WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 18;
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 18px rgba(20, 60, 35, .3);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wa-float:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20, 60, 35, .35); }
@media (min-width: 1280px) { .wa-float { right: 5.9vw; bottom: 8vw; } }

/* ==== Connectivity network section ====
   Uses these variables from style.css: --gutter --font-display --font-script --font-ui --font-logo --navy --ink
   Layout first, animation at the end. */

/* ---------- Connectivity network (hub diagram) ---------- */
.net {
  position: relative;
  padding: clamp(40px, 2.6vw, 56px) var(--gutter) clamp(44px, 3.4vw, 70px);
  /* background:
    radial-gradient(30% 45% at 0% 40%, rgba(176, 178, 214, .5), transparent 72%),
    radial-gradient(34% 50% at 100% 18%, rgba(186, 188, 222, .55), transparent 72%),
    radial-gradient(40% 30% at 60% 100%, rgba(196, 198, 228, .35), transparent 70%),
    #f3f3fa; */
  overflow: hidden;
}
.net__inner { width: min(100%, max(72vw, 1100px), 1400px); margin-inline: auto; }
.net__title { margin: 0; font-weight: 400; text-align: center; }
.net__script {
  display: block; width: max-content; margin: 0 auto .04em;
  font-family: var(--font-script);
  font-size: clamp(38px, 3.3vw, 68px); line-height: 1.5;
  color: var(--ink);
  position: relative; z-index: 1;
}
.net__headline {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.9vw, 90px); line-height: .9;
  letter-spacing: -.012em; text-transform: uppercase;
  color: var(--navy);
  scale: .85 1;
}
.net__lead {
  max-width: 22em;
  margin: clamp(12px, 1.2vw, 24px) auto 0;
  font-size: clamp(14px, .9vw, 17px); font-weight: 400; line-height: 1.6;
  text-align: center; color: #232323;
}

.net__stage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 870 / 410;
  margin-top: clamp(20px, 2vw, 40px);
}
/* routes: plain spans. The wrapper sits at the start point on the hub rim;
   the line is a thin bar rotated around that point, the dot is centred on it. */
.net__lines { position: absolute; inset: 0; z-index: 2; pointer-events: none; }   /* above the hub, so the dots sit on its rim */
.net__route { position: absolute; left: var(--lx); top: var(--ly); width: 0; height: 0; }
.net__line {
  position: absolute; left: 0; top: 0;
  width: var(--len); height: .4cqw; margin-top: -.2cqw;
  background: var(--c); border-radius: .2cqw;
  transform-origin: 0 50%;
  rotate: var(--a);
}
.net__dot {
  position: absolute; left: 0; top: 0;
  width: 1.72cqw; height: 1.72cqw; margin: -.86cqw 0 0 -.86cqw;
  border-radius: 50%; background: var(--c);
}

/* hub: dark green disc, brushed-gold ring, fine white rim */
.net__hub {
  position: absolute; left: var(--x); top: var(--y); z-index: 1;
  width: 20.4cqw; aspect-ratio: 1;
  translate: -50% -50%;
  display: grid; place-content: center; justify-items: center; gap: .35cqw;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #14573f 0, #0a3a2a 55%, #052419 100%) padding-box,
    conic-gradient(from 210deg, #a9782a, #f7e08f, #c8962f, #fbe9a6, #a9782a, #f3d67d, #b98a2f, #a9782a) border-box;
  border: .92cqw solid transparent;
  box-shadow: 0 0 0 .22cqw #fff, 0 0 2.6cqw rgba(235, 190, 90, .55), 0 1.2cqw 2.6cqw rgba(30, 30, 60, .3);
  color: #fff; text-align: center;
}
.net__pin { display: block; width: 4.8cqw; height: 4.8cqw; object-fit: contain; margin-bottom: .1cqw; }
.net__hub strong {
  font-family: "Cinzel", var(--font-logo); font-weight: 700;
  font-size: 3.05cqw; letter-spacing: .01em; line-height: 1; text-transform: uppercase;
  background: linear-gradient(180deg, #f9e39a, #d9a63c 60%, #f1cf73);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.net__hub span { font-size: max(10px, 1.52cqw); font-weight: 400; line-height: 1.18; }

.net__nodes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.net__node > * { pointer-events: auto; }
.net__node { position: absolute; left: var(--x); top: var(--y); }
/* icon: colour disc, white ring, thin colour rim */
.net__icon {
  position: absolute; left: 0; top: 0; translate: -50% -50%;
  display: grid; place-items: center;
  width: 8.1cqw; aspect-ratio: 1; border-radius: 50%;
  background: var(--c); color: #fff;
  box-shadow: inset 0 0 0 .26cqw var(--c), inset 0 0 0 .64cqw #fff, 0 .4cqw 1cqw rgba(30, 30, 60, .22);
  transition: scale .35s cubic-bezier(.3, 1.4, .5, 1);
}
.net__glyph { display: block; width: 64%; height: 64%; object-fit: contain; }
.net__node:hover .net__icon { scale: 1.08; }
.net__text { position: absolute; top: var(--ty, -3.2cqw); width: max-content; }
.net__node--r .net__text { left: 5.5cqw; }
.net__node--l .net__text { right: 5.6cqw; }
.net__text h3 {
  margin: 0 0 .12em;
  font-family: var(--font-ui); font-weight: 700;
  font-size: max(12px, 1.7cqw); line-height: 1.12; text-transform: uppercase; letter-spacing: -.005em;
  color: var(--c);
}
.net__text p { margin: 0; font-size: max(10.5px, 1.2cqw); font-weight: 400; line-height: 1.36; letter-spacing: -.005em; color: #1d1d1d; }
/* km labels: offsets from their node, in stage units */
.net__stage .net__km {
  position: absolute; left: var(--dx); top: var(--dy);
  translate: -50% -50%;
  width: max-content;
  margin: 0; text-align: center; line-height: 1.15;
}
.net__km b { display: block; font-size: max(12px, 1.66cqw); font-weight: 700; color: var(--c); white-space: nowrap; }
.net__km > span { display: block; font-size: max(10px, 1.2cqw); font-weight: 400; color: #1d1d1d; }

.net__benefits {
  display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between;
  margin-top: clamp(24px, 2.4vw, 46px);
  padding: clamp(12px, 1vw, 18px) clamp(14px, 1.5vw, 28px);
  background: #fff; border: 1.5px solid #cfd0dd; border-radius: 14px;
  box-shadow: 0 6px 18px rgba(60, 64, 110, .08);
}
.net__benefits li { display: flex; align-items: center; gap: clamp(10px, .9vw, 16px); }
.net__benefits li + li { padding-left: clamp(12px, 1.5vw, 28px); border-left: 1.5px solid #cfd0dd; }
.net__bicon { flex: none; display: grid; place-items: center; width: clamp(44px, 3.5vw, 64px); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--c); color: var(--c); }
.net__bicon.is-solid { background: var(--c); box-shadow: inset 0 0 0 3px #fff; }
.net__bicon .net__glyph { width: 58%; height: 58%; }
.net__benefits h3 { margin: 0 0 3px; font-family: var(--font-ui); font-weight: 700; font-size: clamp(11.5px, .82vw, 15px); text-transform: uppercase; color: var(--c); white-space: nowrap; }
.net__benefits li:first-child h3 { color: #123c30; }
.net__benefits p { margin: 0; font-size: clamp(11.5px, .8vw, 14.5px); font-weight: 400; line-height: 1.35; color: #1d1d1d; }

/* Below 1024px: hub on top, connections as cards */
@media (max-width: 1023px) {
  .net__inner { width: min(100%, 680px); min-width: 0; }
  .net__headline { font-size: clamp(44px, 7.4vw, 72px); }
  .net__script { font-size: clamp(42px, 6.4vw, 60px); }
  .net__stage { aspect-ratio: auto; container-type: normal; display: grid; justify-items: center; gap: 28px; }
  .net__lines { display: none; }
  .net__hub { position: relative; left: auto; top: auto; translate: none; width: 220px; gap: 4px; border-width: 10px; box-shadow: 0 0 0 2px #fff, 0 0 26px rgba(235, 190, 90, .55), 0 14px 30px rgba(30, 30, 60, .3); }
  .net__pin { width: 42px; height: 42px; }
  .net__hub strong { font-size: 30px; }
  .net__hub span { font-size: 15px; }
  .net__nodes { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
  .net__node {
    position: static;
    display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "icon text" "icon km"; column-gap: 14px; align-items: start;
    padding: 16px; background: #fff; border: 1.5px solid #dcdceb; border-left: 4px solid var(--c);
  }
  .net__icon { grid-area: icon; position: static; translate: none; width: 52px; box-shadow: inset 0 0 0 2px var(--c), inset 0 0 0 5px #fff; }
  .net__text, .net__node--l .net__text, .net__node--r .net__text { grid-area: text; position: static; width: auto; }
  .net__text p { max-width: none; }
  .net__text h3 { font-size: 14.5px; } .net__text br, .net__km br, .net__benefits br, .net__lead br { display: none; }
  .net__hub span br { display: inline; }
  .net__text p { font-size: 13.5px; line-height: 1.45; }
  .net__stage .net__km { grid-area: km; position: static; translate: none; max-width: none; margin-top: 8px; text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .net__km b { font-size: 15px; } .net__km > span { font-size: 12.5px; max-width: none; margin: 0; }
  .net__benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 16px 18px; padding: 18px; }
  .net__benefits li + li { border-left: 0; padding-left: 0; }
  .net__benefits h3 { white-space: normal; }
  .net__benefits li:last-child { grid-column: 1 / -1; }
  .net__benefits h3 { font-size: 13px; } .net__benefits p { font-size: 13px; }
}
@media (min-width: 600px) and (max-width: 700px) {.net__stage .net__km{flex-direction: column;}}
@media (max-width: 599px) {
  .net { padding-top: 40px; padding-bottom: 48px; }
  .net__headline { font-size: clamp(32px, 10.4vw, 50px); width: calc(100% / .85); margin-left: calc((100% - 100% / .85) / 2); }
  .net__script { font-size: clamp(34px, 10vw, 44px); }
  .net__nodes, .net__benefits { grid-template-columns: minmax(0, 1fr); }
}

/* Count-up numbers: an invisible copy of the final value shares one grid cell with
   the live number, so the width never changes while main.js counts and the text
   baseline stays true in both flex and inline layouts. */
[data-count][data-final] { display: inline-grid; justify-items: start; }
[data-count][data-final]::before { content: attr(data-final); grid-area: 1 / 1; visibility: hidden; }
[data-count][data-final] > span { grid-area: 1 / 1; }

/* ==== Animation (in the project this part lives in animations.css) ==== */
/* ---------- Connectivity network: hub lands, routes draw out, stops pop in ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .net__hub { opacity: 0; scale: .6; transition: opacity .6s ease, scale .9s cubic-bezier(.3, 1.3, .5, 1); }
  .js .net__stage.is-in .net__hub { opacity: 1; scale: 1; }
  .net__hub::after {                                  /* slow gold ripple */
    content: ""; position: absolute; inset: -2.2cqw; border-radius: 50%;
    border: 2px solid rgba(201, 152, 58, .6);
    animation: hub-ripple 3s ease-out infinite;
  }
  @keyframes hub-ripple { 0% { scale: .92; opacity: .9; } 80%, 100% { scale: 1.18; opacity: 0; } }

  .js .net__line { scale: 0 1; transition: scale .7s cubic-bezier(.4, 0, .2, 1) calc(.55s + var(--i) * .09s); }      /* grows out from the hub */
  .js .net__dot { opacity: 0; transition: opacity .3s ease calc(.5s + var(--i) * .09s); }
  .js .net__stage.is-in .net__line { scale: 1 1; }
  .js .net__stage.is-in .net__dot { opacity: 1; }

  .js .net__icon { scale: 0; transition: scale .6s cubic-bezier(.3, 1.5, .5, 1) calc(1s + var(--i) * .09s); }
  .js .net__text, .js .net__km { opacity: 0; transition: opacity .6s ease calc(1.15s + var(--i) * .09s); }
  .js .net__stage.is-in .net__icon { scale: 1; }
  .js .net__stage.is-in .net__node:hover .net__icon { scale: 1.08; transition-delay: 0s; transition-duration: .35s; }
  .js .net__stage.is-in .net__text, .js .net__stage.is-in .net__km { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
  .net__hub::after { inset: -14px; }
}



/* ---------- Legal pages (terms / privacy / disclaimer) ---------- */
.page-legal .site-header { position: sticky; }                    /* no hero behind it, so it starts solid */
.page-legal .site-header:not(.is-stuck) { background: rgba(255, 255, 255, .96); box-shadow: 0 1px 0 rgba(30, 40, 60, .08); }
.legal {
  padding: clamp(40px, 4vw, 80px) var(--gutter) clamp(64px, 6vw, 120px);
  background:
    radial-gradient(34% 55% at 0% 12%, rgba(206, 216, 176, .45), transparent 72%),
    radial-gradient(34% 60% at 100% 60%, rgba(250, 218, 190, .5), transparent 72%),
    #fdf8ee;
}
.legal__inner { width: min(100%, 780px); margin-inline: auto; }
.legal__eyebrow { margin: 0 0 18px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #6b7078; }
.legal__eyebrow a { color: var(--olive-deep); }
.legal__title { margin: 0; font-weight: 400; }
.legal__script { display: block; width: max-content; margin: 0 0 .02em .02em; font-family: var(--font-script); font-size: clamp(38px, 3.6vw, 64px); line-height: 1.4; color: var(--ink); }
.legal__headline { display: block; font-family: var(--font-display); font-size: clamp(42px, 5vw, 84px); line-height: .9; letter-spacing: -.012em; text-transform: uppercase; color: var(--olive); width: calc(100% / .85); scale: .85 1; transform-origin: 0 0; }
.legal__lead { margin: clamp(14px, 1.4vw, 24px) 0 clamp(28px, 2.6vw, 44px); font-size: clamp(16px, 1.05vw, 19px); font-weight: 400; line-height: 1.6; color: #444; }
.legal__body { padding-top: clamp(24px, 2.4vw, 40px); border-top: 1px solid rgba(60, 60, 60, .2); }
.legal__body p, .legal__body li { font-size: clamp(15px, .98vw, 17.5px); font-weight: 400; line-height: 1.8; color: #232323; }
.legal__body p { margin: 0 0 1.2em; }
.legal__body h2 { margin: 1.6em 0 .5em; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 1.5vw, 28px); letter-spacing: .02em; text-transform: uppercase; color: var(--navy); }
.legal__body ul { margin: 0 0 1.4em; padding-left: 1.2em; list-style: disc; }
.legal__body li { margin-bottom: .35em; }
.legal__body a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.legal__rera { display: inline-block; margin-top: .6em; padding: 10px 16px; border-left: 3px solid var(--olive); background: rgba(255, 255, 255, .7); font-weight: 500; }
.legal__updated { margin: clamp(28px, 2.6vw, 44px) 0 0; font-size: 13px; font-weight: 400; color: #6b7078; }
.footer__legal a[aria-current="page"] { color: #fff; background-size: 100% 1px; }

 */
.wa-float {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 18;
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 18px rgba(20, 60, 35, .3);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wa-float:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20, 60, 35, .35); }
@media (min-width: 1280px) { .wa-float { right: 5.9vw; bottom: 8vw; } }

/* ---------- Hero: pre-launch offer badge ----------
   Lives in a zero-height anchor at the hero's bottom edge. On desktop it is placed back
   up into the hero in artwork coordinates (same maths as .scene), so it stays in the gap
   right of the family and under "YOUR Way" at every size.
   All text sizes are in cqw (share of the badge width), so the text always scales with
   the seal: the artwork is 280 units wide, 1 unit = .357cqw. */
.hero-badge-anchor { position: relative; z-index: 5; height: 0; }
.hero-badge {
  --sw: max(100vw, calc(var(--hero-h) * var(--art-w) / var(--art-h)));   /* scene width */
  position: absolute;
  left: calc(50% + .306 * var(--sw));                                     /* 80.6% across the artwork */
  bottom: calc(var(--hero-h) / 2 - .22 * var(--sw) * 742 / 1590);         /* 72% down the artwork */
  width: clamp(160px, calc(var(--sw) * .135), 300px);
  aspect-ratio: 280 / 236;
  translate: -50% 50%;
  display: block;
  container-type: inline-size;
  font-family: var(--font-ui);
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 10px 18px rgba(16, 24, 48, .28));
  transition: scale .35s cubic-bezier(.3,.7,.2,1);
}
.hero-badge__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-badge__title,
.hero-badge__price,
.hero-badge__note { position: absolute; left: 0; right: 0; white-space: nowrap; }

/* two short lines, kept inside the inner gold ring (r = 80 units) */
.hero-badge__title {
  top: 21.6cqw;
  display: flex; flex-direction: column; align-items: center;
  font-size: 4.95cqw;
  line-height: 1.2;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.hero-badge__title > span { display: block; }

/* price: an invisible copy of the final value holds the width, so the count-up never shifts it */
.hero-badge__price {
  top: 37.5cqw;
  display: grid; justify-content: center; align-items: center;
  font-size: 11.4cqw;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-badge__price::before { content: attr(data-final); grid-area: 1 / 1; visibility: hidden; }
.hero-badge__amt { grid-area: 1 / 1; justify-self: start; }
.hero-badge__strike {
  grid-area: 1 / 1;
  margin: 0 -7%;
  height: 1.5cqw;
  border-radius: 2cqw;
  background: #e3262d;
  rotate: -6deg;
  transform-origin: 0 50%;
}

.hero-badge__note {
  top: 61.6cqw;
  font-size: 5.3cqw;
  line-height: 1.2;
  color: #1f2a4f;
}

.hero-badge:hover { scale: 1.04; }
.hero-badge:focus-visible { outline-offset: 6px; border-radius: 50%; }

/* Phones, portrait and short landscape screens: the family and headline fill the hero,
   so the badge sits in the top-right corner of About, beside the "About Canvas" title */
@media (max-width: 767px), (max-aspect-ratio: 3/4), (max-height: 460px) and (orientation: landscape) {
  .hero-badge {
    left: auto; bottom: auto;
    right: max(14px, 4vw);
    top: 14px;
    width: clamp(140px, 40vw, 210px);
    translate: none;
  }
}