/* =========================================================
   T SQUARE · Tathawade, Pune — teaser landing page
   Govind Group × IVWA  ·  Powered by Sellability
   Palette: black · brass gold · sunset amber
   ========================================================= */

:root{
  --black:#0b0908;      /* warm near-black, not neutral */
  --black-2:#161210;
  --black-3:#1f1815;
  --gold:#c9a24a;
  --gold-2:#e0c07d;
  --gold-3:#8f6f2c;
  --cream:#f8f5f0;      /* near-white body text */
  --white:#ffffff;
  --grey:#bdb3a6;       /* lighter, so copy reads whiter */
  --line:rgba(201,162,74,.28);

  --amber-1:#f6c584;
  --amber-2:#e88b3c;
  --maroon:#8e1b1b;
  --ember:#c2622a;      /* burnt orange, mid-point between gold and maroon */
  --orange:#ee7a2f;     /* accent orange — 7.1:1 on the dark ground */
  --orange-2:#f5a854;   /* light orange for gradient tops */
  --orange-3:#d9611e;   /* deep orange for gradient bottoms */
  --glow:rgba(232,139,60,.20);
  --glow-soft:rgba(232,139,60,.10);

  --navh:clamp(60px,8vw,80px);
  --maxw:1180px;
  --pad:clamp(20px,5vw,52px);
  --r:4px;
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--cream);
  background:var(--black);
  font-family:var(--font);font-size:16px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* a slow warm wash behind everything — keeps the dark from reading as flat black */
body::before{
  content:"";position:fixed;inset:0;z-index:-10;pointer-events:none;
  background:
    radial-gradient(70% 45% at 85% 8%,  rgba(246,197,132,.10), transparent 62%),
    radial-gradient(60% 40% at 5% 55%,  rgba(194,98,42,.10),   transparent 65%),
    radial-gradient(90% 50% at 50% 105%,rgba(142,27,27,.14),   transparent 70%);
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;line-height:1.15;letter-spacing:.01em}
p{margin:0 0 1em}
::selection{background:var(--gold);color:#000}
a,button,input,select,label{-webkit-tap-highlight-color:rgba(201,162,74,.2)}
/* anchors must not land underneath the fixed header */
section[id],[id="top"]{scroll-margin-top:calc(var(--navh) + 8px)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* Off-screen but readable by search engines and screen readers — used for the
   page H1, since the hero is deliberately wordless. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- shared type ---------- */

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.9rem;border:1px solid var(--orange);border-radius:2px;
  background:linear-gradient(135deg,var(--orange-2) 0%,var(--orange) 55%,var(--orange-3) 100%);
  color:#1a0e04;font-weight:700;font-size:.82rem;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  transition:background .25s,color .25s,transform .25s,box-shadow .25s;
}
.btn:hover{background:linear-gradient(135deg,#f8bd77 0%,var(--orange-2) 50%,var(--orange) 100%);
  border-color:var(--orange-2);transform:translateY(-2px);
  box-shadow:0 12px 32px -10px rgba(238,122,47,.85)}
.btn:active{transform:none}
.btn--sm{padding:.6rem 1.15rem;font-size:.7rem;letter-spacing:.1em}
.btn--block{width:100%;padding:1rem}

/* ---------- logo lockups ---------- */
.lockup{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.lockup__logos{display:flex;align-items:center;gap:.9rem}
.lockup__rule{width:1px;height:28px;background:var(--line)}
.logo{height:34px;width:auto;object-fit:contain}
.logo--sell{height:24px}
.logo--text{
  height:auto;font-size:.82rem;font-weight:700;letter-spacing:.16em;color:var(--gold-2);
  white-space:nowrap;line-height:1.2;
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,#140e0b 0%,#0d0908 100%);
  transition:box-shadow .35s;
}
/* sunset hairline along the bottom edge, matching the footer */
.nav::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--orange),var(--gold),transparent);
}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(10px,3vw,32px);height:var(--navh);transition:height .35s;
  /* clears the notch when a phone is held sideways */
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
}
.nav.is-stuck{box-shadow:0 10px 30px -18px rgba(0,0,0,.95)}
.nav.is-stuck .nav__inner{height:calc(var(--navh) - 6px)}

/* Header lockup runs as a single row so the label, both logos, the phone and
   the CTA all share one optical centre line at every width. */
.lockup--nav{
  flex-direction:row;align-items:center;gap:clamp(8px,1.6vw,16px);
  flex:0 1 auto;min-width:0;
}
.lockup--nav .lockup__logos{min-width:0;gap:clamp(8px,1.8vw,18px)}
.nav .logo{height:clamp(22px,4.4vw,34px);transition:height .35s}
.nav.is-stuck .logo{height:clamp(20px,3.6vw,28px)}
.nav .lockup__rule{height:clamp(18px,3.2vw,28px)}
.nav .logo--text{font-size:clamp(.55rem,1.5vw,.82rem);letter-spacing:.1em}

.nav__right{display:flex;align-items:center;gap:clamp(8px,1.6vw,20px);flex:0 0 auto}
.nav__tel{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:.86rem;font-weight:600;letter-spacing:.06em;color:var(--gold-2);
  white-space:nowrap;transition:color .25s}
.nav__tel:hover{color:#fff}
.nav__tel svg{width:16px;height:16px;flex:none}
.nav__cta{white-space:nowrap;flex:none}
.nav__cta-short{display:none}

/* ---------- hero ---------- */
.hero{position:relative;min-height:calc(100vh - var(--navh));min-height:calc(100svh - var(--navh));display:flex;align-items:center;isolation:isolate;overflow:hidden}
.hero__media{
  position:absolute;inset:0;z-index:-2;
  background-image:
    radial-gradient(58% 44% at 50% 40%, rgba(232,214,186,.22), transparent 68%),
    linear-gradient(178deg,#0d0c0b 0%,#171412 40%,#0a0a0a 100%);
  background-size:contain;background-position:center;background-repeat:no-repeat;
}
/* The key visual is now a real <picture> element (crawlable by image search,
   responsive, WebP-first) instead of a CSS background; .hero__media stays as
   the warm gradient bed behind it. */
.hero__pic{position:absolute;inset:0;z-index:-2;display:block}
.hero__img{width:100%;height:100%;object-fit:contain;object-position:center}

/* mobile-only hero video (464x832 portrait) — src is injected by JS so
   desktop never downloads it; falls back to .hero__media gradient */
.hero__video{
  display:none;position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:contain;object-position:center;
  background:var(--black);pointer-events:none;
}

/* ---------- sections ---------- */
.section{padding:clamp(64px,8.5vw,116px) 0;position:relative}

/* ---------- register ---------- */
.section--register{
  position:relative;isolation:isolate;
  background:
    radial-gradient(58% 60% at 78% 12%, var(--glow), transparent 66%),
    radial-gradient(52% 55% at 10% 92%, rgba(142,27,27,.20), transparent 68%),
    linear-gradient(180deg,var(--black) 0%,#120d0a 55%,var(--black) 100%);
}
/* hairline of sunset across the top edge */
.section--register::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--orange),transparent);
}
.formwrap{display:flex;justify-content:center}
.formwrap .form{width:min(440px,100%)}

.form{
  position:relative;
  background:linear-gradient(165deg,#1c1512 0%,var(--black-2) 60%);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 30px 70px -40px rgba(232,139,60,.5), inset 0 1px 0 rgba(246,197,132,.08);
  padding:clamp(22px,3.2vw,36px);display:grid;gap:.95rem}
.form--modal{gap:.8rem}
.form--modal .field{gap:.35rem}
.form__title{margin:0 0 .3rem;font-size:.72rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--orange-2)}
.field{display:grid;gap:.45rem}
.field label{
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);font-weight:600;
}

.field input,.field select{
  width:100%;min-height:52px;padding:.9rem 1.05rem;
  border:1px solid rgba(248,245,240,.14);border-radius:6px;
  font:inherit;font-size:.95rem;color:var(--white);
  background:
    linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 55%),
    rgba(6,4,3,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .2s,box-shadow .2s,background .2s;
  appearance:none;-webkit-appearance:none;
}
.field input::placeholder{color:#968b7f;opacity:1}

.field input:hover:not(:focus),.field select:hover:not(:focus){
  border-color:rgba(248,245,240,.26);
}
.field input:focus,.field select:focus{
  outline:0;border-color:var(--orange);
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 55%),rgba(10,6,4,.85);
  box-shadow:0 0 0 3px rgba(238,122,47,.22), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Chrome paints autofilled fields pale with dark text, which looks broken on a
   dark form. The inset shadow repaints the surface; the huge transition delay
   stops the yellow flash on load. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--white);
  -webkit-box-shadow:0 0 0 1000px #100b09 inset;
  box-shadow:0 0 0 1000px #100b09 inset;
  caret-color:var(--white);
  transition:background-color 100000s ease-in-out 0s;
}

/* appearance:none above strips the native arrow, so draw one back on as a
   background layer — it stays out of the click path and re-centres itself at
   every breakpoint where the control's min-height changes.
   The doubled .field.field--select is deliberate: the responsive rules further
   down re-declare `padding` and the `background` shorthand on `.field select`,
   and would otherwise reset the chevron and the padding that clears it.
   Options are painted by the OS, so colour them explicitly or Windows renders
   them white-on-white. */
.field.field--select select{
  padding-right:2.6rem;cursor:pointer;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%23e0c07d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 55%);
  background-repeat:no-repeat,no-repeat;
  background-position:right 1.05rem center,0 0;
  background-size:12px 8px,auto;
  background-color:rgba(6,4,3,.72);
}
.field.field--select select:focus{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%23ee7a2f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 55%);
  background-repeat:no-repeat,no-repeat;
  background-position:right 1.05rem center,0 0;
  background-size:12px 8px,auto;
  background-color:rgba(10,6,4,.85);
}
/* until a real choice is made the control still reads as a placeholder */
.field.field--select select:invalid{color:#968b7f}
.field--select select option{background:#100b09;color:var(--cream)}
.field--select select option[value=""]{color:#968b7f}

.field.is-bad input,.field.is-bad select{border-color:#e06a56;box-shadow:0 0 0 3px rgba(224,106,86,.18)}
.err{color:#f09484;font-size:.74rem;line-height:1.4}
.err:empty{display:none}

/* consent row reads as its own block rather than floating text */
.check{
  display:flex;gap:.7rem;align-items:flex-start;font-size:.78rem;color:var(--grey);
  cursor:pointer;line-height:1.55;
  padding:.75rem .85rem;border-radius:6px;
  border:1px solid rgba(248,245,240,.08);background:rgba(255,255,255,.02);
  transition:border-color .2s,background .2s;
}
.check:hover{border-color:rgba(248,245,240,.18);background:rgba(255,255,255,.035)}
.check input{
  margin-top:.1rem;accent-color:var(--orange);
  width:17px;height:17px;flex:none;cursor:pointer;
}
.form__note{margin:0;font-size:.86rem;min-height:1.2em}
.form__note.ok{color:var(--gold-2);font-weight:600}
.form__note.bad{color:#e07b6c}

/* ---------- footer ---------- */
.foot{
  position:relative;border-top:0;
  background:linear-gradient(180deg,#150f0c 0%,#0a0706 70%);
  padding:clamp(38px,6vw,58px) 0 clamp(28px,4vw,38px);
}
.foot::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--orange),var(--gold),transparent);
}
.foot__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.4rem}
.foot--min{padding:clamp(26px,4vw,40px) 0 clamp(22px,3vw,32px)}
.foot--min .foot__inner{gap:1rem}
.foot__logos{display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,3vw,22px);flex-wrap:wrap}
.foot__tel{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:1.15rem;font-weight:700;letter-spacing:.1em;
  color:var(--gold-2);transition:opacity .25s;
}
.foot__tel:hover{opacity:.78}
.foot__tel-ico{
  flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:0;color:#140d07;
  background:linear-gradient(135deg,var(--gold-2) 0%,var(--gold) 50%,var(--ember) 100%);
  box-shadow:0 6px 18px -8px rgba(232,139,60,.8);
  transition:transform .25s,box-shadow .25s;
}
.foot__tel:hover .foot__tel-ico{transform:scale(1.06);box-shadow:0 10px 24px -8px rgba(232,139,60,.95)}
.foot__tel-ico svg{width:17px;height:17px}
.foot__links{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.4rem}
.foot__links a{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);
  transition:color .25s}
.foot__links a:hover{color:var(--orange)}
.foot__legal{margin:0;max-width:54ch;font-size:.72rem;line-height:1.7;color:#8a7d6f}
.foot__copy{margin:0;font-size:.7rem;letter-spacing:.06em;color:#8a7d6f}

/* ---------- floating contact buttons ---------- */
/* WhatsApp anchors bottom-left, call bottom-right, so neither sits over the other */
.fab{
  position:fixed;bottom:16px;z-index:85;isolation:isolate;
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.85);
  margin-bottom:env(safe-area-inset-bottom);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s;
}
.fab svg{width:25px;height:25px}
.fab:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 16px 32px -12px rgba(0,0,0,.9)}
.fab:active{transform:scale(.95)}

.fab--wa{left:max(16px,env(safe-area-inset-left));background:#1a9e4b;color:#fff}
.fab--enquire{
  right:max(16px,env(safe-area-inset-right));bottom:78px;border:0;cursor:pointer;padding:0;
  background:linear-gradient(135deg,var(--orange-2),var(--orange) 55%,var(--orange-3));
  color:#1a0e04;
}
.fab--call{right:max(16px,env(safe-area-inset-right));
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--ember));color:#140d07}
.fab--call svg{width:22px;height:22px}

/* one soft pulse ring so the WhatsApp button reads as the live channel */
.fab--wa::before{
  content:"";position:absolute;width:100%;height:100%;border-radius:50%;
  background:#25d366;opacity:.5;z-index:-1;animation:fabPulse 2.4s ease-out infinite;
}
@keyframes fabPulse{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(1.7);opacity:0}
  100%{transform:scale(1.7);opacity:0}
}

/* ---------- fixed mobile action bar ---------- */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;isolation:isolate;
  background:linear-gradient(180deg,rgba(22,16,13,.97),rgba(10,7,6,.97));
  backdrop-filter:blur(12px);border-top:0;
  padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  gap:10px;
}
.actionbar::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--orange),var(--gold),transparent);
}
.actionbar__btn{
  flex:1 1 0;min-width:0;min-height:48px;
  display:inline-flex;align-items:center;justify-content:center;gap:.42rem;
  border:1px solid var(--gold);border-radius:3px;padding:.8rem .4rem;
  font-family:inherit;font-size:.66rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s,transform .15s;
}
.actionbar__btn:active{transform:scale(.97)}
.actionbar__btn svg{width:16px;height:16px;flex:none}
.actionbar__btn--call{background:transparent;color:var(--gold-2)}
.actionbar__btn--call:active{background:rgba(201,162,74,.14)}
.actionbar__btn--wa{background:#25d366;border-color:#25d366;color:#062b14}
.actionbar__btn--enquire{
  background:linear-gradient(135deg,var(--orange-2),var(--orange) 55%,var(--orange-3));
  border-color:var(--orange);color:#1a0e04}

/* ---------- loader ---------- */
.loader{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:
    radial-gradient(60% 45% at 50% 45%, rgba(232,139,60,.18), transparent 70%),
    linear-gradient(180deg,#150f0c 0%,var(--black) 65%);
  transition:opacity .5s ease,visibility .5s;
}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loader__mark{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:0 24px}
.loader__code{
  font-size:.55rem;letter-spacing:.34em;text-transform:uppercase;color:var(--grey);
  animation:loaderIn .7s both;
}
.loader__name{
  font-size:clamp(1.6rem,7vw,2.4rem);font-weight:800;letter-spacing:.3em;text-indent:.3em;
  text-transform:uppercase;
  color:var(--gold);
  animation:loaderIn .7s cubic-bezier(.2,.7,.3,1) both;
}
.loader__place{
  font-size:.58rem;letter-spacing:.36em;text-transform:uppercase;color:var(--grey);
  animation:loaderIn .7s .12s cubic-bezier(.2,.7,.3,1) both;
}
.loader__bar{
  margin-top:1.1rem;width:min(180px,52vw);height:2px;border-radius:2px;
  background:rgba(201,162,74,.18);overflow:hidden;display:block;
}
.loader__bar i{
  display:block;width:40%;height:100%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold-2),var(--ember),transparent);
  animation:loaderSweep 1.15s ease-in-out infinite;
}
@keyframes loaderIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes loaderSweep{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}
body.is-loading{overflow:hidden}

/* ---------- popup lead form ---------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(12,7,4,.84);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .3s}
.modal__box{
  position:relative;width:min(440px,100%);max-height:calc(100svh - 40px);overflow-y:auto;
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(232,139,60,.14), transparent 70%),
    linear-gradient(170deg,#1c1512 0%,var(--black-2) 65%);
  border:1px solid var(--line);border-radius:6px;
  padding:clamp(26px,4vw,38px) clamp(20px,3.4vw,34px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  opacity:0;transform:translateY(18px) scale(.98);transition:opacity .34s,transform .34s cubic-bezier(.2,.7,.3,1);
  overscroll-behavior:contain;
}
.modal.is-open .modal__backdrop{opacity:1}
.modal.is-open .modal__box{opacity:1;transform:none}

.modal__x{
  position:absolute;top:10px;right:10px;width:38px;height:38px;display:grid;place-items:center;
  border:0;border-radius:50%;background:transparent;color:var(--grey);cursor:pointer;
  transition:color .2s,background .2s;
}
.modal__x:hover{color:#fff;background:rgba(255,255,255,.08)}
.modal__x svg{width:18px;height:18px}

.modal__title{font-size:clamp(1.15rem,4.2vw,1.4rem);text-transform:uppercase;
  letter-spacing:.08em;color:#fff;margin-bottom:1.4rem;padding-right:32px}
.modal__title::after{
  content:"";display:block;width:52px;height:2px;margin-top:.7rem;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--orange));
}
.form--modal{background:transparent;border:0;padding:0;box-shadow:none}

body.modal-open{overflow:hidden}

@media (max-width:520px){
  /* The box sits bottom-anchored, clear of the fixed action bar, so that
     clearance and the modal's own padding both have to come out of the height
     the box may take. Leave them out of the cap and the title and close button
     are pushed off the top of a short screen, with no way to scroll them back. */
  .modal{padding:12px;align-items:flex-end;--modal-clear:64px}
  .modal__box{
    margin-bottom:var(--modal-clear);border-radius:8px;padding:26px 18px 22px;
    max-height:calc(100svh - 24px - var(--modal-clear));
  }
  .modal__title{font-size:1.1rem;margin-bottom:1.1rem}
}

/* ---------- legal pages ---------- */
.legal-page{padding-bottom:0}
.legal{padding:clamp(46px,7vw,72px) 0 clamp(56px,8vw,88px)}
.legal__wrap{max-width:760px}
.legal__eyebrow{margin:0 0 .8rem;font-size:.6rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-2)}
.legal__title{font-size:clamp(1.7rem,5.4vw,2.6rem);text-transform:uppercase;letter-spacing:.03em;
  color:#fff;margin-bottom:.5rem}
.legal__meta{font-size:.74rem;letter-spacing:.06em;color:#5f5a52;
  padding-bottom:1.8rem;margin-bottom:2.2rem;border-bottom:1px solid var(--line)}
.legal h2{font-size:.92rem;text-transform:uppercase;letter-spacing:.08em;color:var(--orange-2);
  margin:2.4rem 0 .8rem}
.legal h2:first-of-type{margin-top:0}
.legal p{font-size:.92rem;line-height:1.85;color:rgba(243,237,225,.8)}
.legal strong{color:#fff;font-weight:600}
.legal ul{margin:0 0 1em;padding-left:1.1rem;display:grid;gap:.45rem}
.legal li{font-size:.92rem;line-height:1.75;color:rgba(243,237,225,.8)}
.legal li::marker{color:var(--orange)}
.legal a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--gold-2)}

@media (max-width:720px){
  .legal{padding-top:clamp(40px,9vw,56px)}
  .legal p,.legal li{font-size:.88rem}
}

/* Sunset-gradient text, applied only where clipping is supported — otherwise the
   solid colours declared above stand, rather than the text going invisible. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .form__title,.foot__tel-num,.legal__eyebrow{
    background-image:linear-gradient(90deg,var(--gold-2),var(--orange));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .loader__name{
    background-image:linear-gradient(120deg,var(--amber-1) 0%,var(--gold) 45%,var(--ember) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}

/* ---------- thank-you page ---------- */
.ty{
  min-height:calc(100svh - var(--navh));display:grid;place-items:center;text-align:center;
  padding:clamp(44px,7vw,68px) 0 clamp(60px,9vw,90px);
  background:
    radial-gradient(60% 45% at 50% 18%, var(--glow), transparent 68%),
    radial-gradient(50% 40% at 12% 92%, rgba(142,27,27,.18), transparent 70%);
}
.ty__wrap{max-width:620px}

.ty__tick{width:76px;height:76px;margin:0 auto 1.8rem}
.ty__tick svg{width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ty__ring{stroke:var(--gold);stroke-width:1.5;opacity:.55;
  stroke-dasharray:151;stroke-dashoffset:151;animation:tyRing .7s ease-out forwards}
.ty__check{stroke:var(--orange-2);stroke-width:3;
  stroke-dasharray:40;stroke-dashoffset:40;animation:tyCheck .45s .55s ease-out forwards}
@keyframes tyRing{to{stroke-dashoffset:0}}
@keyframes tyCheck{to{stroke-dashoffset:0}}

.ty__eyebrow{margin:0 0 .7rem;font-size:.6rem;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--orange)}
.ty__title{font-size:clamp(2rem,7vw,3.2rem);text-transform:uppercase;letter-spacing:.04em;
  color:#fff;margin-bottom:1.1rem}
.ty__lead{font-size:1rem;line-height:1.8;color:var(--grey);margin-bottom:2.6rem}
.ty__lead strong{color:var(--gold-2);font-weight:600;white-space:nowrap}

.ty__steps{list-style:none;margin:0 0 2.6rem;padding:0;display:grid;gap:.9rem;text-align:left}
.ty__steps li{
  display:flex;align-items:flex-start;gap:1rem;
  padding:1rem 1.2rem;border:1px solid rgba(201,162,74,.2);border-radius:4px;
  background:linear-gradient(150deg,rgba(28,21,18,.9),rgba(22,18,16,.6));
}
.ty__steps span{
  flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--orange-2),var(--orange-3));color:#1a0e04;
  font-size:.72rem;font-weight:800;
}
.ty__steps b{display:block;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;margin-bottom:.2rem}
.ty__steps div{font-size:.86rem;line-height:1.65;color:var(--grey)}

.ty__soon{margin:0 0 1rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey)}
.ty__cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-bottom:2.2rem}
.btn--wa{background:#25d366;border-color:#25d366;color:#062b14}
.btn--wa:hover{background:#31e074;border-color:#31e074;color:#062b14;
  box-shadow:0 12px 30px -12px rgba(37,211,102,.7)}
.ty__back{font-size:.78rem;letter-spacing:.1em;color:var(--grey);transition:color .25s}
.ty__back:hover{color:var(--orange-2)}

@media (max-width:720px){
  .ty{padding-top:clamp(38px,9vw,54px)}
  .ty__cta{flex-direction:column}
  .ty__cta .btn{width:100%}
  .ty__steps li{padding:.9rem 1rem}
}

/* honeypot — off-screen rather than display:none, which some bots skip */
.hp{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);opacity:0;pointer-events:none;
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.3,1)}
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.2s}
.reveal[data-delay="3"]{transition-delay:.3s}
.reveal[data-delay="4"]{transition-delay:.4s}
.reveal.is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:980px){
  
  .foot__inner{grid-template-columns:1fr}
}

@media (max-width:720px){
  body.has-hero-video .hero__video{display:block}
  body.has-hero-video .hero__media{display:none}

  /* The reel is 464x832. Give the hero that exact ratio and let the video sit
     in normal flow, so it meets all four borders with no crop and no bars. */
  body.has-hero-video .hero{min-height:0;height:auto;display:block}
  body.has-hero-video .hero__video{
    position:relative;inset:auto;z-index:0;
    width:100%;height:auto;aspect-ratio:464 / 832;
    object-fit:cover;            /* ratio matches the source, so nothing is cut */
  }

  /* phone collapses to an icon; the number stays reachable via the call pill */
  .nav__tel span{display:none}
  .nav__tel{width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:50%}
  .nav__cta-full{display:none}
  .nav__cta-short{display:inline}
  .actionbar{display:flex}
  /* every fixed-bottom element needs the page to end above it */
  body{padding-bottom:70px}
  /* the fixed action bar already carries Call and Enquire here */
  .fab{display:none}

  /* 16px inputs — anything smaller makes iOS Safari zoom on focus */
  .field input,.field select{font-size:16px;padding:.95rem 1rem;min-height:54px}
  .field label{font-size:.64rem}

  /* touch targets ≥44px */
  .nav__tel{width:42px;height:42px}
  .nav__tel svg{width:18px;height:18px}
  .btn--sm{padding:.7rem 1.05rem}

  /* the action bar must not cover the submit button or the legal text */
  .section--register{padding-bottom:clamp(70px,14vw,96px)}

  /* ribbon and heading were colliding at the top of the numbers block */

  h1,h2,h3{text-wrap:balance}
}

/* ---------- small phones ---------- */
@media (max-width:520px){
  .nav__inner{gap:10px}
  .nav .logo{height:22px}
  .nav.is-stuck .logo{height:20px}
  .nav .lockup__logos{gap:.55rem}
  .nav .lockup__rule{height:20px}
  .nav__right{gap:8px}
  .nav__tel{width:38px;height:38px}
  .btn--sm{padding:.62rem .9rem;font-size:.66rem;letter-spacing:.08em}

  .form{padding:22px 18px}
  .check{font-size:.76rem}
}

@media (max-width:380px){
  :root{--pad:16px}

  /* popup was overflowing a 320x568 screen — tighten it until it fits */
  .modal{padding:8px;--modal-clear:58px}
  .modal__box{padding:20px 15px 18px;max-height:calc(100svh - 16px - var(--modal-clear))}
  .modal__title{font-size:1.05rem;margin-bottom:.9rem}
  .form--modal{gap:.62rem}
  .field input,.field select{min-height:50px;padding:.78rem .9rem}
  .check{padding:.6rem .7rem;font-size:.73rem}

  .loader__name{letter-spacing:.2em;text-indent:.2em}
  .ty__title{font-size:1.7rem}
  .ty__steps li{padding:.8rem .85rem;gap:.75rem}
  .foot__tel{font-size:1.02rem}
  .foot__tel-ico{width:32px;height:32px}
  /* the fixed call pill covers dialling, so the bar keeps only the CTA */
  .nav__tel{display:none}
  .nav .logo{height:20px}
  .nav .logo--text{font-size:.52rem;letter-spacing:.06em}
  .btn--sm{padding:.58rem .8rem;font-size:.62rem}
  .actionbar{gap:8px;padding-left:10px;padding-right:10px}
  .actionbar__btn{font-size:.58rem;letter-spacing:.02em;padding:.75rem .25rem;gap:.32rem}
  .actionbar__btn svg{width:15px;height:15px}
}

/* ---------- phones held sideways: 100svh is too short to bottom-anchor ---------- */
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  .hero{min-height:78vh}
  /* a 464:832 box is far taller than a sideways phone — cap it and centre */
  body.has-hero-video .hero{height:78svh}
  body.has-hero-video .hero__video{height:100%;aspect-ratio:auto;object-fit:contain}

  /* very little vertical room here — compress every stacked block */
  /* the action bar is hidden here, so the box needs no clearance beneath it */
  .modal{align-items:center;padding:10px;--modal-clear:0px}
  .modal__box{max-height:calc(100svh - 20px);margin-bottom:0;padding:18px 22px}
  .modal__title{margin-bottom:.8rem;font-size:1.05rem}
  .form--modal{gap:.5rem}
  .field input,.field select{min-height:44px;padding:.6rem .9rem}
  .check{padding:.5rem .65rem;font-size:.72rem}
  .btn--block{padding:.75rem}

  /* the action bar was eating a fifth of the screen */
  .actionbar{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .actionbar__btn{min-height:40px;padding:.5rem .4rem}
  body{padding-bottom:56px}

  .ty{min-height:auto;padding-top:34px;padding-bottom:40px}
}

/* ---------- hit areas for fingers ----------
   Width alone does not say what is doing the pointing: a tablet in portrait and
   a phone held sideways are both touch devices that fall outside the phone
   breakpoints above. So these restate the 44px minimum against the pointer as
   well as the width, and standalone controls carry the band themselves.
   Links set inside a sentence are deliberately left out — padding those would
   break the line rhythm of the prose around them. */
@media (max-width:720px),(pointer:coarse){
  .btn--sm{min-height:44px}
  .jump a{display:inline-flex;align-items:center;min-height:44px}
  .mapbar__go{min-height:44px}
  .ty__back{display:inline-flex;align-items:center;min-height:44px}
  .brand{padding-block:.55rem}
  .foot__nav a,.foot__links a{display:flex;align-items:center;min-height:44px}
  .modal__x,.drawer__x{width:44px;height:44px}
  .modal__title{padding-right:46px}
  /* the 17px box alone is a hard target; the whole .check row stays tappable */
  .check input{width:22px;height:22px;margin-top:0}
}

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

/* =========================================================
   STORY SECTIONS  ·  CODENAME T SQUARE
   An Integrated Address / A World of Choice

   ALIGNMENT RULE: inside .wrap every block starts at the same
   left edge. The section numeral is a chip on the eyebrow line,
   never a grid column, so headings and content grids share one
   edge at every breakpoint.
   ========================================================= */

/* ---------------------------------------------------------
   1 · SECTION SHELL
   --------------------------------------------------------- */
.band{
  padding:clamp(58px,6.6vw,94px) 0;
  position:relative;isolation:isolate;
  background:var(--black);
}
.band--alt{background:#100c0a}
.band--alt::before,
.band--intro::before,
.band--teaser::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--gold-3),var(--gold),var(--orange),var(--gold-3),transparent);
  opacity:.65;
}
.band--alt::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 46% at 84% 6%,var(--glow-soft),transparent 64%),
             radial-gradient(50% 44% at 6% 96%,rgba(142,27,27,.12),transparent 68%);
}

/* ---------------------------------------------------------
   2 · SECTION HEAD  —  one left edge, always
   --------------------------------------------------------- */
.sect__head{margin:0 0 clamp(30px,3.6vw,46px);max-width:100%}

/* numeral + rule + label, all on one line that starts at the edge */
.sect__eyebrow{
  display:flex;align-items:center;gap:.7rem;margin:0 0 .9rem;
  font-size:.6rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--orange-2);
}
.sect__num{
  flex:none;display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 .45rem;
  border:1px solid rgba(201,162,74,.4);border-radius:3px;
  font-size:.64rem;font-weight:800;letter-spacing:.08em;color:var(--gold-2);
  background:linear-gradient(150deg,rgba(246,197,132,.14),transparent 75%);
}
.sect__eyebrow::after{
  content:"";flex:none;width:clamp(18px,3vw,34px);height:1px;order:-1;
  background:linear-gradient(90deg,var(--orange),transparent);
}
.sect__eyebrow .sect__num{order:-2}

.sect__title{
  margin:0;font-size:clamp(1.4rem,3.4vw,2.15rem);line-height:1.14;
  text-transform:uppercase;letter-spacing:.01em;color:#fff;font-weight:700;
  max-width:24ch;
}
.sect__title em{font-style:normal;color:var(--gold-2)}
.sect__lead{
  margin:1rem 0 0;max-width:64ch;
  font-size:.95rem;line-height:1.85;color:rgba(243,237,225,.8);
}
.sect__lead + .sect__lead{margin-top:.7rem}
.sect__lead strong{color:#fff;font-weight:600}
.sect__lead a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* centred variant, statement sections only */
.sect__head--center{text-align:center}
.sect__head--center .sect__eyebrow{justify-content:center}
.sect__head--center .sect__title{max-width:26ch;margin-inline:auto}
.sect__head--center .sect__lead{margin-inline:auto}

.rule{display:block;width:58px;height:2px;margin:clamp(14px,2vw,20px) 0 0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--orange))}
.rule--center{margin-inline:auto}

/* ---------------------------------------------------------
   3 · DISPLAY TYPE  (with a slow gold sweep)
   --------------------------------------------------------- */
.display{
  margin:0;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.7rem,5.2vw,3.1rem);line-height:1.08;letter-spacing:.005em;
  background:linear-gradient(96deg,var(--gold) 0%,var(--gold-2) 18%,#fffaf2 38%,
             var(--orange-2) 62%,var(--gold-2) 82%,var(--gold) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:sweep 11s ease-in-out infinite;
}
@keyframes sweep{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.display span{display:block}
.display .display__k{display:block;font-size:.38em;font-weight:700;letter-spacing:.24em;
  line-height:1.3;margin-bottom:.6em}
.display--sm{font-size:clamp(1.35rem,4vw,2.3rem)}

/* ---------------------------------------------------------
   4 · CARD SURFACES
   --------------------------------------------------------- */
.surface{
  position:relative;border:1px solid rgba(201,162,74,.2);border-radius:var(--r);
  background:linear-gradient(155deg,rgba(32,24,20,.96),rgba(19,15,13,.6));
  box-shadow:inset 0 1px 0 rgba(246,197,132,.06);
}
.lift{transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .4s,box-shadow .4s}
.lift:hover{transform:translateY(-6px);border-color:rgba(238,122,47,.48);
  box-shadow:0 28px 56px -34px rgba(238,122,47,.95),inset 0 1px 0 rgba(246,197,132,.12)}
.topline::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);opacity:.5;
  transition:opacity .4s;
}
.topline:hover::before{opacity:1}

/* icon plate shared by every card family */
.ico{
  width:46px;height:46px;display:grid;place-items:center;margin-bottom:1rem;flex:none;
  border-radius:50%;border:1px solid rgba(201,162,74,.35);color:var(--orange-2);
  background:radial-gradient(circle at 32% 26%,rgba(246,197,132,.2),transparent 72%);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .4s,color .4s,box-shadow .4s;
}
.ico svg{width:20px;height:20px}
.ico--sq{border-radius:var(--r);width:50px;height:50px;color:var(--gold-2);
  background:linear-gradient(150deg,rgba(246,197,132,.14),transparent 70%)}
.ico--sq svg{width:23px;height:23px}
.lift:hover .ico{
  transform:translateY(-2px) scale(1.06);color:var(--orange);
  border-color:rgba(238,122,47,.6);
  box-shadow:0 0 0 4px rgba(238,122,47,.07),0 12px 26px -14px rgba(238,122,47,.9);
}

/* ---------------------------------------------------------
   5 · STAGGERED REVEAL  (parent gets .is-in from script.js)
   --------------------------------------------------------- */
.stagger>*{opacity:0;transform:translateY(20px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1)}
.stagger.is-in>*{opacity:1;transform:none}
.stagger.is-in>*:nth-child(1){transition-delay:.04s}
.stagger.is-in>*:nth-child(2){transition-delay:.11s}
.stagger.is-in>*:nth-child(3){transition-delay:.18s}
.stagger.is-in>*:nth-child(4){transition-delay:.25s}
.stagger.is-in>*:nth-child(5){transition-delay:.32s}
.stagger.is-in>*:nth-child(6){transition-delay:.39s}
.stagger.is-in>*:nth-child(7){transition-delay:.46s}
.stagger.is-in>*:nth-child(8){transition-delay:.53s}
.stagger.is-in>*:nth-child(9){transition-delay:.60s}
.stagger.is-in>*:nth-child(10){transition-delay:.67s}

/* ---------------------------------------------------------
   6 · INTRO
   --------------------------------------------------------- */
.band--intro{
  background:
    radial-gradient(62% 55% at 82% 0%,var(--glow),transparent 64%),
    radial-gradient(52% 50% at 6% 100%,rgba(142,27,27,.16),transparent 70%),
    var(--black);
}
.intro{max-width:880px;margin-inline:auto;text-align:center}
.intro__eyebrow{margin:0 0 1.1rem;font-size:.6rem;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--orange-2)}
.intro .lede{max-width:62ch;margin:0 auto 1rem;font-size:clamp(.95rem,1.5vw,1.06rem);
  line-height:1.9;color:rgba(243,237,225,.86)}
.intro .lede strong{color:#fff;font-weight:600}
.intro__sign{margin:1.5rem 0 0;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-2);font-weight:600}

.glance{list-style:none;margin:clamp(30px,4vw,46px) 0 0;padding:0;
  display:grid;gap:1px;grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(201,162,74,.2);border-radius:var(--r);overflow:hidden;
  background:rgba(201,162,74,.2)}
.glance li{padding:1.3rem .9rem;text-align:center;background:#120e0c;
  transition:background .4s}
.glance li:hover{background:#171110}
.glance .ico{width:34px;height:34px;margin:0 auto .7rem}
.glance .ico svg{width:16px;height:16px}
.glance li:hover .ico{transform:translateY(-2px) scale(1.06);color:var(--orange);
  border-color:rgba(238,122,47,.6)}
.glance b{display:block;font-size:.56rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey);margin-bottom:.35rem}
.glance span{display:block;font-size:.85rem;font-weight:600;letter-spacing:.04em;color:var(--gold-2)}

.jump{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:clamp(26px,3.4vw,38px) 0 0;
  padding:0;justify-content:center}
.jump a{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--grey);padding:.45rem .9rem;border:1px solid rgba(201,162,74,.22);
  border-radius:999px;transition:color .25s,border-color .25s,background .25s,transform .25s}
.jump a:hover{color:#fff;border-color:var(--orange);background:rgba(238,122,47,.1);
  transform:translateY(-2px)}

/* ---------------------------------------------------------
   7 · MARQUEE TICKER
   --------------------------------------------------------- */
.marquee{overflow:hidden;padding:.95rem 0;background:#100c0a;
  border-block:1px solid rgba(201,162,74,.22);position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:14%;z-index:2;
  pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#100c0a,transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,#100c0a,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee__track:hover{animation-play-state:paused}
.marquee__track b{display:inline-flex;align-items:center;gap:1.5rem;padding-inline:.75rem;
  font-size:.74rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-2);white-space:nowrap}
.marquee__track i{width:5px;height:5px;flex:none;transform:rotate(45deg);background:var(--orange)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------------------------------------------------
   8 · PILLARS
   --------------------------------------------------------- */
.pillars{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.pillars li{padding:1.5rem 1.1rem;text-align:center;overflow:hidden}
.pillars b{display:block;font-size:.6rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey);margin-bottom:.5rem}
.pillars span{display:block;font-size:1.05rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gold-2)}

/* ---------------------------------------------------------
   9 · SPLIT
   --------------------------------------------------------- */
.split{display:grid;gap:clamp(26px,3.6vw,48px);grid-template-columns:minmax(0,1fr);
  align-items:center}
@media (min-width:940px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split--wide{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}
.split__body>p{margin:0 0 .8rem;max-width:60ch;font-size:.95rem;line-height:1.85;
  color:rgba(243,237,225,.8)}
.split__body>p:last-child{margin-bottom:0}
.split__body strong{color:#fff;font-weight:600}

/* ---------------------------------------------------------
   10 · ORBIT MAP
   --------------------------------------------------------- */
.orbit{width:100%;height:auto;display:block;max-width:560px;margin-inline:auto;
  filter:drop-shadow(0 26px 60px rgba(238,122,47,.22))}
.orbit .orbit__ring{fill:none;stroke:rgba(201,162,74,.26);stroke-dasharray:3 7;
  transform-origin:280px 220px;animation:spin 90s linear infinite}
.orbit .orbit__ring--b{animation-duration:130s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit .orbit__spoke{stroke:rgba(201,162,74,.16)}
.orbit .orbit__hub{fill:url(#hubGrad);stroke:rgba(246,197,132,.55)}
.orbit .orbit__pulse{fill:none;stroke:rgba(246,197,132,.5);transform-origin:280px 220px;
  animation:pulse 3.6s ease-out infinite}
@keyframes pulse{0%{r:58px;opacity:.6}100%{r:96px;opacity:0}}
.orbit .orbit__hub-t{fill:#1a0e04;font-size:15px;font-weight:800;letter-spacing:1.4px}
.orbit .orbit__hub-s{fill:rgba(26,14,4,.72);font-size:8px;font-weight:700;letter-spacing:2px}
.orbit .orbit__dot{fill:var(--orange)}
.orbit .orbit__label{fill:rgba(243,237,225,.9);font-size:12.5px;font-weight:600;letter-spacing:.6px}
.orbit .orbit__sub{fill:rgba(224,192,125,.7);font-size:9.5px;font-weight:700;letter-spacing:1px}
.orbit .orbit__node{opacity:0;transition:opacity .55s ease}
.is-in .orbit .orbit__node{opacity:1}
.is-in .orbit .orbit__node:nth-of-type(1){transition-delay:.15s}
.is-in .orbit .orbit__node:nth-of-type(2){transition-delay:.25s}
.is-in .orbit .orbit__node:nth-of-type(3){transition-delay:.35s}
.is-in .orbit .orbit__node:nth-of-type(4){transition-delay:.45s}
.is-in .orbit .orbit__node:nth-of-type(5){transition-delay:.55s}
.is-in .orbit .orbit__node:nth-of-type(6){transition-delay:.65s}
.is-in .orbit .orbit__node:nth-of-type(7){transition-delay:.75s}
.is-in .orbit .orbit__node:nth-of-type(8){transition-delay:.85s}
@media (max-width:939px){.orbit-wrap{display:none}}

/* ---------------------------------------------------------
   11 · CARD GRIDS
   --------------------------------------------------------- */
.dirs{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;
  grid-template-columns:repeat(5,minmax(0,1fr))}
.dirs li{padding:1.5rem 1.2rem 1.4rem;overflow:hidden}
.dirs__t{margin:0 0 .5rem;font-size:.74rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#fff}
.dirs__d{margin:0;font-size:.85rem;line-height:1.72;color:rgba(243,237,225,.76)}

.shape{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.shape li{padding:1.7rem 1.45rem 1.6rem;overflow:hidden}
.shape__t{margin:0 0 .55rem;font-size:.95rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#fff}
.shape__d{margin:0;font-size:.87rem;line-height:1.75;color:rgba(243,237,225,.76)}

/* ---------------------------------------------------------
   RETAIL & COMMERCIAL
   Four showroom formats, nine highlights, one investment strip.
   --------------------------------------------------------- */
.retail{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.retail li{padding:1.6rem 1.35rem 1.5rem;overflow:hidden}
.retail__k{margin:0 0 .9rem;font-size:.58rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:#8a7d6f}
.retail__t{margin:0 0 .35rem;font-size:1.22rem;font-weight:700;letter-spacing:.04em;color:#fff}
.retail__sz{
  margin:0 0 .9rem;padding-bottom:.9rem;font-size:1rem;font-weight:700;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--gold-2);
  border-bottom:1px dashed rgba(201,162,74,.2);
}
.retail__sz span{font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#8a7d6f}
.retail__d{margin:0;font-size:.84rem;line-height:1.7;color:rgba(243,237,225,.74)}

.rkeys__h{
  margin:clamp(30px,3.6vw,44px) 0 clamp(14px,1.8vw,20px);
  font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-2);display:flex;align-items:center;gap:.9rem;
}
.rkeys__h::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(201,162,74,.35),transparent)}

.rkeys{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.rkeys li{display:flex;align-items:center;gap:.9rem;padding:1.15rem 1.2rem;overflow:hidden}
.rkeys .ico{width:42px;height:42px;flex:none}
.rkeys .ico svg{width:19px;height:19px}
.rkeys__t{margin:0;font-size:.85rem;line-height:1.6;color:rgba(243,237,225,.86)}
.rkeys__t b{color:#fff;font-weight:700}

.rinvest{
  display:grid;gap:clamp(1.2rem,2.4vw,2rem);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  margin-top:clamp(26px,3.2vw,38px);padding:clamp(24px,3vw,34px);
  border:1px solid rgba(201,162,74,.3);border-radius:var(--r);
  background:
    radial-gradient(80% 120% at 12% 0%,rgba(238,122,47,.10),transparent 62%),
    linear-gradient(155deg,rgba(32,24,20,.96),rgba(17,13,11,.92));
}
.rinvest__head{min-width:0}
.rinvest__k{margin:0 0 .5rem;font-size:.6rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:#8a7d6f}
.rinvest__fig{margin:0;line-height:.95;font-variant-numeric:tabular-nums}
.rinvest__fig b{
  font-size:clamp(3rem,7vw,4.4rem);font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(96deg,var(--gold-2),#fffaf2 45%,var(--orange-2));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.rinvest__fig sup{font-size:.3em;font-weight:700;color:var(--gold-2)}
.rinvest__cap{margin:.55rem 0 0;font-size:.88rem;line-height:1.6;color:#fff;font-weight:600}
.rinvest__basis{margin:.7rem 0 0;font-size:.68rem;line-height:1.7;color:#8a7d6f;max-width:46ch}

.rinvest__pills{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.rinvest__pills li{
  display:flex;align-items:center;gap:.55rem;padding:.7rem .9rem;border-radius:var(--r);
  border:1px solid rgba(201,162,74,.22);background:rgba(246,197,132,.05);
  font-size:.72rem;font-weight:600;letter-spacing:.06em;line-height:1.4;
  color:rgba(243,237,225,.9);
}
.rinvest__pills li::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--orange);
}
.rinvest__cta{grid-column:1 / -1;justify-self:start}
.rinvest__cta svg{width:14px;height:14px}

@media (max-width:980px){
  .retail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rkeys{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rinvest{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .retail{grid-template-columns:minmax(0,1fr)}
  .rkeys{grid-template-columns:minmax(0,1fr)}
  .rinvest__pills{grid-template-columns:minmax(0,1fr)}
  .rinvest__cta{justify-self:stretch;width:100%}
}

.why{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:why;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.why li{counter-increment:why;padding:1.55rem 1.35rem 1.45rem;overflow:hidden}
.why li::after{content:"0" counter(why);position:absolute;top:1rem;right:1.25rem;
  font-size:1.5rem;font-weight:800;line-height:1;color:rgba(201,162,74,.16)}
.why .ico{width:40px;height:40px;margin-bottom:.9rem}
.why .ico svg{width:18px;height:18px}
.why__t{margin:0 0 .5rem;padding-right:2.2rem;font-size:.75rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2)}
.why__d{margin:0;font-size:.86rem;line-height:1.75;color:rgba(243,237,225,.76)}

/* ---------------------------------------------------------
   12 · EVERYTHING WITHIN REACH
   --------------------------------------------------------- */
.reach{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.reach__col{padding:1.45rem 1.35rem 1.5rem}
.reach__h{display:flex;align-items:center;gap:.6rem;margin:0 0 .9rem;padding-bottom:.85rem;
  border-bottom:1px solid rgba(201,162,74,.18);color:var(--gold-2);
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.reach__h svg{width:17px;height:17px;flex:none;color:var(--orange)}
.reach__list{list-style:none;margin:0;padding:0}
.reach__list li{display:flex;align-items:center;justify-content:space-between;gap:.9rem;
  padding:.62rem 0;font-size:.86rem;line-height:1.5;transition:padding-left .3s}
.reach__list li:hover{padding-left:.3rem}
.reach__list li+li{border-top:1px dashed rgba(201,162,74,.15)}
.reach__list b{font-weight:500;color:rgba(255,255,255,.92)}
.reach__list span{flex:none;font-size:.71rem;font-weight:700;letter-spacing:.05em;white-space:nowrap;
  color:var(--orange-2);padding:.22rem .6rem;border-radius:999px;
  border:1px solid rgba(238,122,47,.3);background:rgba(238,122,47,.08);
  transition:background .3s,color .3s}
.reach__list li:hover span{background:rgba(238,122,47,.18);color:#fff}
.footnote{margin:clamp(18px,2.4vw,26px) 0 0;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:#8a7d6f}
/* for footnotes that run to a couple of sentences — all-caps gets unreadable */
.footnote--fine{font-size:.68rem;line-height:1.75;letter-spacing:normal;
  text-transform:none;max-width:82ch}

/* ---------------------------------------------------------
   13 · METRO LINE + STATS
   --------------------------------------------------------- */
.metro{width:100%;height:auto;display:block;margin:clamp(22px,3vw,34px) 0 0}
.metro .metro__track{stroke:rgba(201,162,74,.3);stroke-width:2}
.metro .metro__live{stroke:url(#metroGrad);stroke-width:3;stroke-linecap:round}
.metro .metro__stop{fill:#120e0c;stroke:rgba(201,162,74,.55);stroke-width:1.5;
  opacity:0;transition:opacity .45s ease}
.is-in .metro .metro__stop{opacity:1}
.is-in .metro .metro__stop:nth-of-type(1){transition-delay:.35s}
.is-in .metro .metro__stop:nth-of-type(2){transition-delay:.45s}
.is-in .metro .metro__stop:nth-of-type(3){transition-delay:.55s}
.is-in .metro .metro__stop:nth-of-type(4){transition-delay:.65s}
.is-in .metro .metro__stop:nth-of-type(5){transition-delay:.75s}
.is-in .metro .metro__stop:nth-of-type(6){transition-delay:.85s}
.is-in .metro .metro__stop:nth-of-type(7){transition-delay:.95s}
.is-in .metro .metro__stop:nth-of-type(8){transition-delay:1.05s}
.is-in .metro .metro__stop:nth-of-type(9){transition-delay:1.15s}
.metro .metro__end{fill:var(--orange)}
.metro .metro__t{fill:#fff;font-size:12px;font-weight:700;letter-spacing:1.2px}
.metro .metro__c{fill:rgba(224,192,125,.85);font-size:10px;font-weight:700;letter-spacing:1.6px}

.stats{list-style:none;margin:clamp(26px,3.4vw,38px) 0 0;padding:0;display:grid;gap:1rem;
  text-align:center;grid-template-columns:repeat(4,minmax(0,1fr))}
.stats li{padding:1.5rem 1rem}
.stats__n{display:block;font-size:clamp(1.45rem,3.6vw,2.2rem);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--gold-2) 0%,var(--orange) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.stats__l{display:block;margin-top:.6rem;font-size:.62rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);line-height:1.6}
.tagline{margin:clamp(22px,3vw,30px) 0 0;font-size:.8rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-2);text-align:center}

/* ---------------------------------------------------------
   14 · PANEL / DEVELOPER / PHILOSOPHY
   --------------------------------------------------------- */
.panel{position:relative;padding:clamp(26px,3.4vw,40px);border-radius:var(--r);
  border:1px solid rgba(201,162,74,.24);
  background:linear-gradient(160deg,#1c1512 0%,var(--black-2) 70%);
  box-shadow:0 34px 76px -50px rgba(232,139,60,.75)}
.panel::before,.panel::after{content:"";position:absolute;width:44px;height:44px;
  border:1px solid var(--orange);opacity:.5;pointer-events:none;transition:width .5s,height .5s}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.panel:hover::before,.panel:hover::after{width:64px;height:64px}
.panel__k{margin:0 0 .9rem;font-size:.58rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--orange-2)}
.panel__q{margin:0;font-size:clamp(1rem,1.8vw,1.16rem);line-height:1.7;font-weight:600;color:#fff}

.dev__badge{text-align:center}
.dev__logos{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2.4vw,22px);
  flex-wrap:wrap;margin-bottom:1.2rem}
.dev__logos .logo{height:clamp(28px,4vw,38px)}
.dev__logos .lockup__rule{height:30px}
.dev__cap{margin:1.15rem 0 0;font-size:.62rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);line-height:1.9}

.philo{max-width:880px;margin-inline:auto;text-align:center;
  padding:clamp(30px,4vw,48px) clamp(22px,3.4vw,46px)}
.philo__q{margin:0 auto 1.1rem;max-width:58ch;font-size:clamp(1rem,1.8vw,1.16rem);
  line-height:1.75;color:#fff;font-weight:500}
.philo__q:last-child{margin-bottom:0}
.philo__q--soft{color:rgba(243,237,225,.76);font-weight:400;font-size:clamp(.92rem,1.5vw,1rem)}

/* ---------------------------------------------------------
   15 · WHY REGISTER NOW
   --------------------------------------------------------- */
.benefits{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.benefits li{display:flex;gap:1.1rem;align-items:flex-start;padding:1.6rem 1.4rem;overflow:hidden}
.benefits .ico{margin-bottom:0}
.benefits__b{min-width:0}
.benefits__t{margin:0 0 .45rem;font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#fff}
.benefits__d{margin:0;font-size:.86rem;line-height:1.72;color:rgba(243,237,225,.76)}

/* ---------------------------------------------------------
   16 · NEXT STEPS
   --------------------------------------------------------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.steps li{position:relative;padding:1.55rem 1.3rem 1.45rem;overflow:visible}
.steps__n{display:grid;place-items:center;width:40px;height:40px;margin-bottom:1rem;
  border-radius:50%;font-size:.78rem;font-weight:800;letter-spacing:.04em;color:#1a0e04;
  background:linear-gradient(135deg,var(--orange-2),var(--orange) 60%,var(--orange-3));
  box-shadow:0 10px 24px -12px rgba(238,122,47,.9);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s}
.steps li:hover .steps__n{transform:translateY(-2px) scale(1.08);
  box-shadow:0 14px 30px -12px rgba(238,122,47,1)}
.steps__t{margin:0 0 .5rem;font-size:.76rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#fff}
.steps__d{margin:0;font-size:.85rem;line-height:1.72;color:rgba(243,237,225,.76)}
@media (min-width:781px){
  .steps li:not(:last-child)::after{
    content:"";position:absolute;top:2.55rem;right:-1rem;width:1rem;height:1px;
    background:linear-gradient(90deg,rgba(238,122,47,.6),rgba(201,162,74,.15));
  }
}

/* ---------------------------------------------------------
   17 · TALK TO US
   --------------------------------------------------------- */
.talk{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.talk li{overflow:hidden}
.talk a,.talk button{
  display:flex;align-items:center;gap:1.1rem;width:100%;text-align:left;
  padding:1.5rem 1.4rem;border:0;background:transparent;cursor:pointer;
  font-family:inherit;color:inherit;text-decoration:none;
}
.talk .ico{margin-bottom:0}
.talk__b{min-width:0}
.talk__t{display:block;font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;margin-bottom:.3rem}
.talk__d{display:block;font-size:.84rem;line-height:1.6;color:rgba(243,237,225,.72)}
.talk__go{margin-left:auto;flex:none;color:var(--orange);transition:transform .35s}
.talk__go svg{width:18px;height:18px}
.talk li:hover .talk__go{transform:translateX(4px)}
.talk--wa .ico{color:#25d366;border-color:rgba(37,211,102,.4);
  background:radial-gradient(circle at 32% 26%,rgba(37,211,102,.18),transparent 72%)}
.talk--wa:hover .ico{color:#25d366;border-color:rgba(37,211,102,.7);
  box-shadow:0 0 0 4px rgba(37,211,102,.08),0 12px 26px -14px rgba(37,211,102,.9)}
.talk--wa:hover{border-color:rgba(37,211,102,.5)!important;
  box-shadow:0 28px 56px -34px rgba(37,211,102,.8)!important}

/* ---------------------------------------------------------
   18 · FAQ
   --------------------------------------------------------- */
.faq{display:grid;gap:.55rem}
.faq details{border:1px solid rgba(201,162,74,.2);border-radius:var(--r);
  background:linear-gradient(155deg,rgba(32,24,20,.96),rgba(19,15,13,.6));
  transition:border-color .3s,box-shadow .3s}
.faq details:hover{border-color:rgba(201,162,74,.36)}
.faq details[open]{border-color:rgba(238,122,47,.42);
  box-shadow:0 20px 44px -32px rgba(238,122,47,.8)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 2.7rem 1rem 1.2rem;position:relative;
  font-size:.89rem;font-weight:600;color:#fff;line-height:1.55}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.15rem;top:1.35rem;width:9px;height:9px;
  border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.5rem}
.faq summary:hover{color:var(--gold-2)}
.faq__a{padding:0 1.2rem 1.1rem;animation:faqIn .35s ease both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq__a p{margin:0;font-size:.86rem;line-height:1.8;color:rgba(243,237,225,.8)}
.faq__a a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------
   19 · MAHARERA
   --------------------------------------------------------- */
.rera{border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.6vw,28px);
  background:linear-gradient(160deg,#1c1512 0%,var(--black-2) 65%);
  display:flex;gap:clamp(16px,2.4vw,26px);align-items:center;flex-wrap:wrap}
.rera__qr{flex:none;width:104px;height:104px;display:grid;place-items:center;text-align:center;
  border:1px dashed rgba(201,162,74,.45);border-radius:var(--r);
  font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);padding:6px}
.rera__body{flex:1 1 260px;min-width:0}
.rera__no{margin:0 0 .4rem;font-size:1rem;font-weight:700;letter-spacing:.06em;color:#fff}
.rera__body p{margin:0;font-size:.82rem;line-height:1.75;color:var(--grey)}
.rera__body a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------
   20 · CLOSING TEASER
   --------------------------------------------------------- */
.band--teaser{
  background:
    radial-gradient(58% 60% at 80% 8%,var(--glow),transparent 66%),
    radial-gradient(54% 55% at 12% 96%,rgba(142,27,27,.24),transparent 70%),
    linear-gradient(180deg,var(--black) 0%,#140f0b 55%,var(--black) 100%);
}
.teaser{text-align:center;max-width:880px;margin-inline:auto}
.teaser__p{max-width:60ch;margin:0 auto 1rem;font-size:clamp(.94rem,1.5vw,1.04rem);
  line-height:1.9;color:rgba(243,237,225,.84)}
.teaser__p strong{color:#fff;font-weight:600}
.kicker{list-style:none;margin:clamp(22px,3vw,32px) 0 0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:.55rem 1.5rem}
.kicker li{position:relative;font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-2)}
.kicker li+li::before{content:"";position:absolute;left:-.82rem;top:50%;width:4px;height:4px;
  transform:translateY(-50%) rotate(45deg);background:var(--orange)}
.teaser__cta{margin:clamp(26px,3.4vw,36px) 0 0}
.band .btn{color:#1a0e04;text-decoration:none}
/* a slow breathing glow so the final CTA reads as the destination */
.teaser__cta .btn{animation:cta 3.4s ease-in-out infinite}
@keyframes cta{
  0%,100%{box-shadow:0 12px 32px -14px rgba(238,122,47,.55)}
  50%{box-shadow:0 16px 44px -12px rgba(238,122,47,.95)}
}
.teaser__fine{margin:1.3rem auto 0;max-width:62ch;font-size:.69rem;line-height:1.75;
  color:#8a7d6f;letter-spacing:.02em}

/* ---------------------------------------------------------
   21 · RESPONSIVE
   --------------------------------------------------------- */
@media (max-width:1080px){
  .dirs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:940px){
  .reach,.shape,.why,.benefits,.talk{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .glance{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:780px){
  .band{padding:clamp(46px,10vw,68px) 0}
  .sect__title{max-width:none}
  .sect__lead{max-width:none}
  .dirs,.reach,.shape,.why,.steps,.benefits,.talk{grid-template-columns:minmax(0,1fr)}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
  .pillars li{padding:1.15rem .75rem}
  .pillars span{font-size:.9rem}
  .panel::before,.panel::after{width:32px;height:32px}
  .rera{flex-direction:column;align-items:flex-start;text-align:left}
  .marquee__track b{font-size:.66rem;letter-spacing:.2em;gap:1.1rem}
}
@media (max-width:420px){
  .glance{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
}

/* ---------------------------------------------------------
   22 · REDUCED MOTION  —  everything decorative stops
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .display{animation:none}
  .marquee__track{animation:none}
  .orbit .orbit__ring,.orbit .orbit__pulse{animation:none}
  .teaser__cta .btn{animation:none}
  .stagger>*{opacity:1;transform:none;transition:none}
  .orbit .orbit__node,.metro .metro__stop{opacity:1;transition:none}
  .faq__a{animation:none}
}

/* =========================================================
   V4 REFINEMENTS
   Fixes measured against the v3 build:
     · split columns floated mid-height instead of aligning
     · section heads left-heavy with an empty right half
     · FAQ ran as one long single column
     · footer was a centred link dump with no hierarchy
   Plus the Google Map frame.
   ========================================================= */

/* ---------------------------------------------------------
   1 · TWO-COLUMN SECTION HEAD
   Title left, lead right, both on the container's edges, so
   the header row fills the width instead of trailing off.
   --------------------------------------------------------- */
@media (min-width:900px){
  .sect__head--split{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(28px,4vw,64px);align-items:end;
  }
  .sect__head--split .sect__eyebrow{grid-column:1 / -1}
  .sect__head--split .sect__title{grid-column:1;max-width:none;margin:0}
  .sect__head--split .sect__lead{grid-column:2;grid-row:2;margin:0;max-width:none;
    padding-bottom:.2rem}
  .sect__head--split .sect__lead + .sect__lead{grid-row:3;grid-column:2;margin-top:.7rem}
}

/* ---------------------------------------------------------
   2 · SPLIT COLUMNS ALIGN TOP AND BOTTOM
   --------------------------------------------------------- */
.split{align-items:stretch}
.split__body{display:flex;flex-direction:column}
.split__body>.sect__head{margin-bottom:clamp(18px,2.2vw,26px)}
/* the aside fills its column, its content centred inside */
.split>.panel,
.split>.orbit-wrap{display:flex;flex-direction:column;justify-content:center}
.split>.orbit-wrap{min-height:100%}

/* ---------------------------------------------------------
   3 · "A WORLD OF CHOICE" CARDS — more substance
   --------------------------------------------------------- */
.shape{gap:1.1rem;counter-reset:shape}
.shape li{
  counter-increment:shape;display:flex;flex-direction:column;
  padding:clamp(26px,2.6vw,34px) clamp(22px,2.2vw,28px) clamp(24px,2.4vw,30px);
}
.shape li::after{
  content:"0" counter(shape);position:absolute;top:1.15rem;right:1.3rem;
  font-size:1.6rem;font-weight:800;line-height:1;color:rgba(201,162,74,.15);
}
.shape .ico{margin-bottom:1.3rem}
.shape__t{margin:0 0 .65rem;padding-right:2rem;font-size:1rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#fff}
.shape__d{margin:0 0 1.3rem;font-size:.87rem;line-height:1.78;color:rgba(243,237,225,.76)}
/* a tag pinned to the bottom edge so every card ends on the same line */
.shape__tag{
  margin-top:auto;padding-top:1.1rem;border-top:1px solid rgba(201,162,74,.16);
  display:flex;align-items:center;gap:.5rem;
  font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2);
}
.shape__tag::before{content:"";width:5px;height:5px;flex:none;transform:rotate(45deg);
  background:var(--orange)}

/* ---------------------------------------------------------
   4 · LOCATION MAP
   The project's own brochure map, not an embed — gold line art on white, so
   the frame is what ties it back into the dark page.
   --------------------------------------------------------- */
.mapwrap{margin-top:clamp(30px,3.6vw,46px)}
.mapframe{
  position:relative;display:block;border:1px solid rgba(201,162,74,.28);
  border-radius:var(--r);overflow:hidden;background:var(--black-2);
  box-shadow:0 34px 76px -50px rgba(232,139,60,.7);
}
/* corner brackets, matching .panel */
.mapframe::before,.mapframe::after{content:"";position:absolute;width:40px;height:40px;
  border:1px solid var(--orange);opacity:.55;pointer-events:none;z-index:2}
.mapframe::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.mapframe::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* The map is gold line art on white and every corner of it carries a label, so
   nothing is overlaid on the artwork — the controls live in .mapbar below it.
   The frame itself is still a link to the full-size file. */
.mapframe--img{background:#fff}
.mapframe--img img{display:block;width:100%;height:auto}
.mapframe--img:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.mapbar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:.85rem;padding:.9rem 1.15rem;border:1px solid rgba(201,162,74,.2);
  border-radius:var(--r);background:linear-gradient(155deg,rgba(32,24,20,.96),rgba(19,15,13,.6));
}
.mapbar__a{display:flex;align-items:center;gap:.7rem;min-width:0}
.mapbar__a svg{width:18px;height:18px;flex:none;color:var(--orange)}
.mapbar__t{margin:0;font-size:.84rem;line-height:1.5;color:rgba(255,255,255,.92)}
.mapbar__t b{color:#fff;font-weight:600}
.mapbar__end{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.mapbar__note{
  flex:none;font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#8a7d6f;
}
.mapbar__go{
  display:inline-flex;align-items:center;gap:.5rem;flex:none;
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-2);padding:.5rem .95rem;border:1px solid rgba(201,162,74,.35);
  border-radius:999px;transition:color .3s,border-color .3s,background .3s,transform .3s;
}
.mapbar__go svg{width:14px;height:14px}
.mapbar__go:hover{color:#fff;border-color:var(--orange);background:rgba(238,122,47,.12);
  transform:translateY(-2px)}

/* ---------------------------------------------------------
   5 · FAQ IN TWO COLUMNS
   Two independent flows, so opening an answer in one column
   never pushes the other column around.
   --------------------------------------------------------- */
.faq{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.faq__col{display:grid;gap:.55rem;align-content:start}
@media (max-width:860px){
  .faq{grid-template-columns:minmax(0,1fr);gap:.55rem}
}

/* ---------------------------------------------------------
   6 · FOOTER
   --------------------------------------------------------- */
.foot--rich{padding:clamp(46px,5.5vw,72px) 0 clamp(26px,3vw,36px);background:#0a0807}
.foot--rich .foot__grid{
  display:grid;gap:clamp(28px,4vw,54px);
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  align-items:start;text-align:left;
}
.foot__brand{min-width:0}
.foot--rich .foot__logos{display:flex;align-items:center;gap:clamp(10px,2vw,18px);
  margin:0 0 1.1rem;flex-wrap:wrap;justify-content:flex-start}
.foot--rich .foot__logos .logo{height:32px}
.foot--rich .foot__logos .lockup__rule{height:26px}
.foot__tag{margin:0 0 1.3rem;max-width:34ch;font-size:.84rem;line-height:1.8;
  color:rgba(243,237,225,.74)}
.foot__tag b{display:block;color:var(--gold-2);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;font-size:.68rem;margin-bottom:.5rem}
.foot__actions{display:flex;flex-wrap:wrap;gap:.6rem}
.foot__act{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.6rem 1.05rem;border:1px solid rgba(201,162,74,.3);border-radius:999px;
  font-size:.76rem;font-weight:600;letter-spacing:.06em;color:var(--gold-2);
  transition:color .3s,border-color .3s,background .3s,transform .3s;
}
.foot__act svg{width:15px;height:15px;flex:none}
.foot__act:hover{color:#fff;border-color:var(--orange);background:rgba(238,122,47,.12);
  transform:translateY(-2px)}
.foot__act--wa{color:#25d366;border-color:rgba(37,211,102,.34)}
.foot__act--wa:hover{color:#fff;border-color:#25d366;background:rgba(37,211,102,.14)}

.foot__col{min-width:0;display:flex;flex-direction:column}
.foot__h{
  margin:0 0 1rem;font-size:.6rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--orange-2);
}
.foot__nav{display:flex;flex-direction:column;gap:.6rem}
.foot__nav a{
  font-size:.8rem;line-height:1.4;color:rgba(243,237,225,.7);
  transition:color .25s,padding-left .25s;position:relative;
}
.foot__nav a:hover{color:#fff;padding-left:.5rem}
.foot__nav a::before{
  content:"";position:absolute;left:0;top:50%;width:4px;height:1px;
  background:var(--orange);opacity:0;transition:opacity .25s;
}
.foot__nav a:hover::before{opacity:1}

.foot__rule{
  height:1px;margin:clamp(30px,3.6vw,44px) 0 clamp(20px,2.4vw,28px);
  background:linear-gradient(90deg,transparent,rgba(201,162,74,.35),rgba(238,122,47,.3),transparent);
}
.foot--rich .foot__base{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  align-items:start;text-align:left}
.foot--rich .foot__legal{margin:0;max-width:82ch;font-size:.71rem;line-height:1.85;color:#8a7d6f}
.foot--rich .foot__legal a{color:#a2937f;text-decoration:underline;text-underline-offset:2px}
.foot--rich .foot__legal a:hover{color:var(--gold-2)}
.foot__meta{text-align:right}
.foot__addr{margin:0 0 .5rem;font-size:.75rem;line-height:1.7;color:rgba(243,237,225,.72)}
.foot__addr b{color:#fff;font-weight:600}
.foot--rich .foot__copy{margin:0;font-size:.69rem;letter-spacing:.05em;color:#77695c}

/* registered entity — legal name vs. the trade name the project sells under */
.foot__entity{
  display:flex;flex-direction:column;gap:.3rem;align-items:flex-end;
  margin:0 0 .75rem;padding:.6rem .85rem;
  border:1px solid rgba(201,162,74,.22);border-radius:var(--r);
  background:rgba(246,197,132,.045);
}
.foot__entity span{display:flex;align-items:baseline;gap:.5rem;line-height:1.5}
.foot__entity i{
  font-style:normal;font-size:.56rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#8a7d6f;
}
.foot__entity b{font-size:.78rem;font-weight:600;letter-spacing:.02em;color:#fff}

@media (max-width:940px){
  .foot--rich .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__brand{grid-column:1 / -1}
  .foot--rich .foot__base{grid-template-columns:minmax(0,1fr)}
  .foot__meta{text-align:left}
  .foot__entity{align-items:flex-start;align-self:flex-start;display:inline-flex}
}
@media (max-width:560px){
  .foot--rich .foot__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .foot__actions{width:100%}
  .foot__act{flex:1 1 auto;justify-content:center}
}

/* ---------------------------------------------------------
   7 · SMALL ALIGNMENT TIDIES
   --------------------------------------------------------- */
/* the orbit no longer needs its own centring margin inside a flex column */
.orbit{margin-inline:0}
@media (max-width:939px){.orbit{margin-inline:auto}}
/* footnotes sit on the container edge like everything else */
.footnote{max-width:74ch}

/* =========================================================
   MOBILE MENU  —  hamburger + slide-in drawer
   The landing page has no nav links at narrow widths; this
   supplies them. Shown up to 860px, where the header runs out
   of room for anything more than the logos and one CTA.
   ========================================================= */

/* ---------- the button ---------- */
.nav__menu{
  display:none;                       /* desktop: the jump chips do this job */
  place-items:center;flex:none;
  width:42px;height:42px;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--gold-2);
  transition:color .25s,border-color .25s,background .25s;
  -webkit-tap-highlight-color:transparent;
}
.nav__menu:hover,.nav__menu:focus-visible{color:#fff;border-color:var(--orange);
  background:rgba(238,122,47,.1)}
.nav__bars{display:block;position:relative;width:17px;height:12px}
.nav__bars i{
  position:absolute;left:0;width:100%;height:1.5px;border-radius:2px;
  background:currentColor;transition:transform .32s cubic-bezier(.2,.7,.3,1),opacity .2s;
}
.nav__bars i:nth-child(1){top:0}
.nav__bars i:nth-child(2){top:5.25px}
.nav__bars i:nth-child(3){top:10.5px}
/* morph to an X while the drawer is open */
.nav__menu[aria-expanded="true"] .nav__bars i:nth-child(1){transform:translateY(5.25px) rotate(45deg)}
.nav__menu[aria-expanded="true"] .nav__bars i:nth-child(2){opacity:0;transform:scaleX(.4)}
.nav__menu[aria-expanded="true"] .nav__bars i:nth-child(3){transform:translateY(-5.25px) rotate(-45deg)}

@media (max-width:860px){
  .nav__menu{display:grid}
  /* the fixed action bar already carries Call at these widths */
  .nav__tel{display:none}
}

/* ---------- the drawer ---------- */
.drawer{position:fixed;inset:0;z-index:95}
.drawer__backdrop{
  position:absolute;inset:0;background:rgba(6,5,4,.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .32s ease;
}
.drawer.is-open .drawer__backdrop{opacity:1}

.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(340px,86vw);display:flex;flex-direction:column;
  background:linear-gradient(170deg,#171110 0%,var(--black-2) 55%,#0c0908 100%);
  border-left:1px solid rgba(201,162,74,.28);
  box-shadow:-30px 0 70px -30px rgba(0,0,0,.9);
  transform:translateX(100%);transition:transform .36s cubic-bezier(.2,.7,.3,1);
  overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
}
.drawer.is-open .drawer__panel{transform:none}
/* sunset hairline down the leading edge */
.drawer__panel::before{
  content:"";position:absolute;inset:0 auto 0 0;width:1px;
  background:linear-gradient(180deg,transparent,var(--gold),var(--orange),transparent);
}

.drawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:1px solid rgba(201,162,74,.18);
}
.drawer__brand{
  font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-2);line-height:1.5;
}
.drawer__brand small{display:block;font-size:.85em;letter-spacing:.16em;color:var(--grey);
  font-weight:600;margin-top:.25rem}
.drawer__x{
  flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--grey);
  transition:color .25s,border-color .25s;
}
.drawer__x:hover,.drawer__x:focus-visible{color:#fff;border-color:var(--orange)}
.drawer__x svg{width:16px;height:16px}

.drawer__nav{padding:16px 20px 4px;flex:1 1 auto}
.drawer__h{
  margin:14px 0 8px;font-size:.55rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--orange-2);
}
.drawer__h:first-child{margin-top:0}
.drawer__nav a{
  display:flex;align-items:center;gap:.7rem;padding:.62rem 0;
  font-size:.88rem;line-height:1.4;color:rgba(243,237,225,.82);
  border-bottom:1px solid rgba(201,162,74,.1);
  transition:color .25s,padding-left .25s;
}
.drawer__nav a:last-child{border-bottom:0}
.drawer__nav a::before{
  content:"";flex:none;width:4px;height:4px;transform:rotate(45deg);
  background:var(--orange);opacity:0;transition:opacity .25s;
}
.drawer__nav a:hover,.drawer__nav a:focus-visible{color:#fff;padding-left:.35rem}
.drawer__nav a:hover::before,.drawer__nav a:focus-visible::before{opacity:1}

.drawer__foot{
  position:sticky;bottom:0;margin-top:auto;
  padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(201,162,74,.18);
  background:linear-gradient(180deg,rgba(12,9,8,.86),#0c0908 45%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.drawer__acts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.6rem}
.drawer__act{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.7rem .5rem;border:1px solid rgba(201,162,74,.3);border-radius:2px;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-2);transition:color .25s,border-color .25s,background .25s;
}
.drawer__act svg{width:15px;height:15px;flex:none}
.drawer__act:hover,.drawer__act:focus-visible{color:#fff;border-color:var(--orange);
  background:rgba(238,122,47,.1)}
.drawer__act--wa{color:#25d366;border-color:rgba(37,211,102,.34)}
.drawer__act--wa:hover,.drawer__act--wa:focus-visible{color:#fff;border-color:#25d366;
  background:rgba(37,211,102,.14)}

body.menu-open{overflow:hidden}

/* the drawer replaces the fixed action bar while it is open */
body.menu-open .actionbar,
body.menu-open .fab{opacity:0;pointer-events:none;transition:opacity .2s}

@media (prefers-reduced-motion:reduce){
  .drawer__panel,.drawer__backdrop,.nav__bars i{transition:none}
}

/* ---------------------------------------------------------
   INTRO COLUMN — the at-a-glance strip and the jump chips share
   the intro's 880px column, so their edges line up with the H1
   above them instead of running 196px wider.
   --------------------------------------------------------- */
.glance,
.intro + .glance,
#overview .jump{max-width:880px;margin-inline:auto}

/* =========================================================
   AMENITIES GALLERY + IMAGE BANDS
   ========================================================= */

/* ---------- gallery grid ---------- */
.gal{display:grid;gap:.75rem;grid-template-columns:repeat(4,minmax(0,1fr))}
.gal__i{
  position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid rgba(201,162,74,.2);background:var(--black-2);
  aspect-ratio:4 / 3;isolation:isolate;
  transition:border-color .4s,box-shadow .4s,transform .4s cubic-bezier(.2,.7,.3,1);
}
/* the pool render leads the grid at double size */
.gal__i--big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gal__i img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.3,1),filter .5s;
  filter:saturate(.94) contrast(1.02) brightness(.9);
}
.gal__i::after{                       /* readability wash under the caption */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 42%,rgba(8,6,5,.5) 72%,rgba(8,6,5,.88) 100%);
  transition:opacity .4s;
}
.gal__i:hover{border-color:rgba(238,122,47,.5);transform:translateY(-4px);
  box-shadow:0 26px 54px -32px rgba(238,122,47,.85)}
.gal__i:hover img{transform:scale(1.06);filter:saturate(1.05) contrast(1.04) brightness(1)}

.gal__c{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:.85rem .95rem;display:flex;align-items:center;gap:.55rem;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;line-height:1.35;
}
.gal__c::before{content:"";width:5px;height:5px;flex:none;transform:rotate(45deg);
  background:var(--orange)}
.gal__i--big .gal__c{padding:1.15rem 1.25rem;font-size:.8rem;letter-spacing:.16em}

@media (max-width:1080px){
  .gal{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .gal__i--big{grid-column:span 2;grid-row:auto;aspect-ratio:16 / 10}
  .gal__c{padding:.7rem .75rem;font-size:.6rem;letter-spacing:.1em}
  .gal__i--big .gal__c{font-size:.68rem}
}

/* ---------- full-width image band ---------- */
.band-img{
  position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid rgba(201,162,74,.24);background:var(--black-2);
  box-shadow:0 34px 76px -50px rgba(232,139,60,.65);
}
.band-img img{
  display:block;width:100%;height:auto;
  filter:saturate(.92) contrast(1.03) brightness(.86);
}
.band-img::before,.band-img::after{content:"";position:absolute;width:42px;height:42px;
  border:1px solid var(--orange);opacity:.55;pointer-events:none;z-index:2}
.band-img::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.band-img::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.band-img__c{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem 1.3rem;
  background:linear-gradient(180deg,transparent,rgba(8,6,5,.9));
  font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-2);
}

/* ---------- two-up interior row ---------- */
.duo{display:grid;gap:.9rem;grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:clamp(22px,2.8vw,34px)}
.duo .band-img img{aspect-ratio:16 / 9;object-fit:cover;height:auto}
@media (max-width:760px){.duo{grid-template-columns:minmax(0,1fr)}}

/* the disclaimer that has to sit with any render */
.imgnote{margin:clamp(16px,2vw,22px) 0 0;font-size:.68rem;line-height:1.7;
  letter-spacing:.06em;color:#8a7d6f;max-width:86ch}

/* figure carries a default margin:1em 40px — it was shrinking every gallery
   tile inside its grid cell and leaving dead rows */
.gal__i,.band-img{margin:0}

/* =========================================================
   CONFIGURATIONS + FLOOR PLANS
   ========================================================= */

/* ---------- tower / configuration tables ---------- */
.towers{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.tower{padding:0;overflow:hidden}
.tower__h{
  display:flex;align-items:center;gap:.7rem;margin:0;
  padding:1.1rem 1.35rem;border-bottom:1px solid rgba(201,162,74,.18);
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-2);
  background:linear-gradient(90deg,rgba(238,122,47,.08),transparent 70%);
}
.tower__h svg{width:17px;height:17px;flex:none;color:var(--orange)}
.tower__h small{margin-left:auto;font-size:.58rem;letter-spacing:.16em;color:var(--grey);font-weight:600}
.tower__list{list-style:none;margin:0;padding:.4rem 1.35rem 1.3rem}
.tower__list li{
  display:flex;align-items:center;gap:.9rem;padding:.85rem 0;
  border-bottom:1px dashed rgba(201,162,74,.15);
}
.tower__list li:last-child{border-bottom:0}
.tower__t{font-size:.88rem;font-weight:600;color:#fff;flex:1 1 auto;min-width:0}
.tower__t b{display:block;font-size:.58rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);margin-top:.2rem}
.tower__a{
  flex:none;font-size:.82rem;font-weight:700;letter-spacing:.03em;color:var(--gold-2);
  font-variant-numeric:tabular-nums;
}
.tower__p{
  flex:none;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;color:var(--orange-2);padding:.3rem .7rem;border-radius:999px;
  border:1px solid rgba(238,122,47,.3);background:rgba(238,122,47,.08);
}

/* the price call-to-action under the tables */
.pricebar{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  margin-top:1rem;padding:1.3rem 1.5rem;border-radius:var(--r);
  border:1px solid rgba(201,162,74,.26);
  background:linear-gradient(150deg,#1c1512,var(--black-2) 70%);
  box-shadow:0 30px 68px -46px rgba(232,139,60,.7);
}
.pricebar__t{margin:0;font-size:.95rem;line-height:1.6;color:#fff;font-weight:600;max-width:52ch}
.pricebar__t b{color:var(--gold-2)}
.pricebar__t span{display:block;margin-top:.35rem;font-size:.78rem;font-weight:400;
  color:rgba(243,237,225,.72)}
.pricebar .btn{flex:none}

/* ---------- floor plans ---------- */
.plans{display:grid;gap:1rem;grid-template-columns:repeat(4,minmax(0,1fr))}
.plan{position:relative;overflow:hidden;padding:0;display:flex;flex-direction:column}
.plan__fig{position:relative;margin:0;overflow:hidden;background:#efece6}
.plan__fig img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover}
/* the shipped image is already blurred; this only tints it into the palette */
.plan__fig::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,14,11,.28),rgba(20,14,11,.62));
}
.plan__lock{
  position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;
  gap:.6rem;text-align:center;padding:1rem;
}
.plan__lock svg{width:24px;height:24px;color:var(--gold-2);opacity:.9}
.plan__lock span{
  font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.plan__b{padding:1.05rem 1.2rem 1.2rem;display:flex;flex-direction:column;flex:1 1 auto}
.plan__t{margin:0 0 .3rem;font-size:.82rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#fff}
.plan__m{margin:0 0 1rem;font-size:.72rem;letter-spacing:.06em;color:var(--grey)}
.plan__cta{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;padding:.68rem 1rem;cursor:pointer;font-family:inherit;
  border:1px solid rgba(201,162,74,.34);border-radius:2px;background:transparent;
  font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-2);transition:color .25s,border-color .25s,background .25s;
}
.plan__cta svg{width:13px;height:13px}
.plan__cta:hover,.plan__cta:focus-visible{color:#1a0e04;border-color:var(--orange);
  background:linear-gradient(135deg,var(--orange-2),var(--orange) 60%,var(--orange-3))}

@media (max-width:1080px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){
  .towers{grid-template-columns:minmax(0,1fr)}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .plans{grid-template-columns:minmax(0,1fr)}
  .tower__list li{flex-wrap:wrap;gap:.45rem .8rem}
  .tower__t{flex:1 1 100%}
  .pricebar .btn{width:100%}
}

/* =========================================================
   PROJECT LOCKUP
   The site is branded by the project, not by the developers.
   A typographic lockup, deliberately not an invented emblem —
   the real identity is still to come.
   ========================================================= */
.brand{
  display:grid;grid-template-columns:auto auto;align-items:center;
  column-gap:clamp(.6rem,1.4vw,.95rem);text-decoration:none;min-width:0;
}
.brand__k{
  grid-column:1;grid-row:1;
  font-size:clamp(.46rem,1.1vw,.55rem);font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:var(--orange-2);line-height:1.4;
}
.brand__n{
  grid-column:1;grid-row:2;white-space:nowrap;
  font-size:clamp(.9rem,2.4vw,1.18rem);font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.15;
  background:linear-gradient(96deg,var(--gold-2) 0%,#fffaf2 45%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.brand__p{
  grid-column:2;grid-row:1 / span 2;align-self:stretch;display:flex;align-items:center;
  padding-left:clamp(.6rem,1.4vw,.95rem);border-left:1px solid var(--line);
  font-size:clamp(.44rem,1vw,.53rem);font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--grey);line-height:1.6;white-space:nowrap;
}
.brand:hover .brand__p{color:var(--gold-2)}

/* footer gets a taller, calmer version */
.brand--foot{margin-bottom:1.15rem}
.brand--foot .brand__k{font-size:.55rem;letter-spacing:.32em}
.brand--foot .brand__n{font-size:1.3rem;letter-spacing:.18em}
.brand--foot .brand__p{font-size:.53rem}

/* the developers panel keeps its words, not their marks */
.dev__names{
  display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
  margin:0 0 1.2rem;padding-bottom:1.1rem;border-bottom:1px solid rgba(201,162,74,.18);
}
.dev__names b{
  font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-2);
}
.dev__names i{width:1px;height:18px;background:var(--line);flex:none}

@media (max-width:520px){
  .brand__p{display:none}
  .brand{grid-template-columns:auto}
}

/* =========================================================
   CONFIGURATION CARDS  (replaces the two tower tables)
   Nine configurations on a 3 x 3 grid — even rows, no dead
   column, and the repeated "carpet area / on request" labels
   collapse into one line per card.
   ========================================================= */
.cfgs{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.cfg{display:flex;flex-direction:column;padding:1.5rem 1.4rem 1.4rem;overflow:hidden}

.cfg__top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:1.1rem}
.cfg__tower{
  display:inline-flex;align-items:center;gap:.45rem;margin:0;
  font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2);padding:.32rem .7rem;border-radius:999px;
  border:1px solid rgba(201,162,74,.32);background:rgba(246,197,132,.06);
}
.cfg__tower svg{width:12px;height:12px;color:var(--orange)}
.cfg__tag{
  margin:0;font-size:.54rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);
}

.cfg__t{
  margin:0 0 .9rem;font-size:1.12rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;line-height:1.2;
}
.cfg__area{display:flex;align-items:baseline;gap:.5rem;margin:0 0 1.15rem}
.cfg__n{
  font-size:clamp(1.8rem,3.4vw,2.3rem);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  background:linear-gradient(180deg,var(--gold-2) 0%,var(--orange) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.cfg__u{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey)}

.cfg__price{
  display:flex;align-items:center;gap:.7rem;margin:0 0 1.15rem;padding-top:1rem;
  border-top:1px solid rgba(201,162,74,.16);
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);
}
.cfg__price em{
  margin-left:auto;font-style:normal;color:var(--orange-2);
  padding:.26rem .65rem;border-radius:999px;
  border:1px solid rgba(238,122,47,.3);background:rgba(238,122,47,.08);
}
.cfg__cta{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;padding:.72rem 1rem;cursor:pointer;font-family:inherit;
  border:1px solid rgba(201,162,74,.34);border-radius:2px;background:transparent;
  font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-2);transition:color .25s,border-color .25s,background .25s;
}
.cfg__cta svg{width:13px;height:13px}
.cfg__cta:hover,.cfg__cta:focus-visible{
  color:#1a0e04;border-color:var(--orange);
  background:linear-gradient(135deg,var(--orange-2),var(--orange) 60%,var(--orange-3));
}

/* the price bar now carries two actions */
.pricebar__acts{display:flex;gap:.6rem;flex-wrap:wrap;flex:none}
.btn--ghost{
  background:transparent;border-color:rgba(201,162,74,.4);color:var(--gold-2);
  box-shadow:none;
}
.btn--ghost:hover{
  background:rgba(238,122,47,.12);border-color:var(--orange);color:#fff;
  box-shadow:none;
}

@media (max-width:940px){.cfgs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .cfgs{grid-template-columns:minmax(0,1fr)}
  .pricebar__acts{width:100%}
  .pricebar__acts .btn{flex:1 1 auto}
}

/* .band .btn forces the dark label for the solid button; the ghost variant
   needs equal specificity to keep its own colour */
.band .btn--ghost{color:var(--gold-2)}
.band .btn--ghost:hover{color:#fff}

/* =========================================================
   NO SIDEWAYS SLIDE
   body carried overflow-x:hidden but html did not — on iOS Safari the
   root element still scrolls, so a wider-than-viewport child (the marquee
   track is width:max-content) can drag the whole page sideways.

   Measured: html:clip + body:hidden BREAKS the sticky header, because
   hidden makes body a scroll container. clip on BOTH stops the slide and
   keeps the header sticking. Guarded by @supports so browsers without
   clip keep the previous body-only behaviour rather than losing the header.
   ========================================================= */
@supports (overflow-x: clip){
  html,body{overflow-x:clip}
}
html,body{max-width:100%}
.marquee{max-width:100%}
/* nothing may push past the viewport edge */
/* NOT .wrap — it already caps at var(--maxw); max-width:100% would override that */
.gal,.cfgs,.plans,.reach,.dirs,.shape,.why,.steps,.benefits,.talk{max-width:100%}
img,svg,video,iframe,picture{max-width:100%}

/* =========================================================
   HERO BANNERS
   Two separate artworks — 1983x793 landscape and 940x1673
   portrait. Sizing the hero to each one's own ratio shows the
   whole banner: no letterbox bars, no cropped headline.
   ========================================================= */
.hero{overflow:hidden;isolation:isolate}
.hero__pic{position:absolute;inset:0;z-index:-2;display:block}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:center}

/* aspect-ratio + max-height made the box shrink its WIDTH when the cap
   applied (measured 1371px inside a 1440px viewport, gaps either side).
   Driving height directly keeps the hero full-bleed at every width. */
@media (min-width:721px){
  .hero{
    min-height:0;display:block;width:100%;
    height:min(calc(100vw / (1600 / 840)), 760px);
  }
}
@media (max-width:720px){
  .hero{
    min-height:0;display:block;width:100%;
    height:min(calc(100vw / (900 / 1600)), 88svh);
  }
}


/* =========================================================
   AT-A-GLANCE STRIP — fixes + two new tiles
   .glance span{display:block} was out-specifying .ico{display:grid},
   so place-items:center never applied and every 16px glyph sat at the
   top of its 34px plate — measured 8px high in all four tiles.
   ========================================================= */
.glance .ico{display:grid;place-items:center}
.glance{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.glance{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.glance{grid-template-columns:minmax(0,1fr)}}
/* the value line wraps on the longer entries — keep every tile the same height */
.glance li{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.glance span{margin-top:auto}

/* =========================================================
   EOI TIERS  —  Gold and Platinum
   Two metallic plaques on the site's black ground. The metals
   are real gradients rather than flat fills so they read as
   pressed metal against the warm dark.
   ========================================================= */
.eoi{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch}

.eoi__card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  padding:clamp(26px,3vw,34px) clamp(22px,2.6vw,30px) clamp(24px,2.8vw,30px);
  border-radius:var(--r);
}
/* a faint metal wash behind each tier */
.eoi__card::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 55% at 50% -10%,rgba(255,255,255,.07),transparent 70%);
}
.eoi__card>*{position:relative;z-index:1}

/* ---------- the plaque ---------- */
.eoi__plaque{
  display:flex;align-items:center;gap:clamp(.7rem,1.4vw,1rem);
  margin:0 0 clamp(20px,2.4vw,26px);padding:.5rem .95rem .5rem .5rem;
  border-radius:999px;box-shadow:0 14px 34px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.45);
}
.eoi__medal{
  flex:none;width:clamp(38px,4vw,46px);height:clamp(38px,4vw,46px);
  display:grid;place-items:center;border-radius:50%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 10px -4px rgba(0,0,0,.7);
}
.eoi__medal svg{width:clamp(18px,2vw,22px);height:clamp(18px,2vw,22px)}
.eoi__name{
  font-size:clamp(.86rem,1.6vw,1.05rem);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;
}
.eoi__sep{width:1px;align-self:stretch;margin-inline:.15rem;opacity:.45}
.eoi__amt{
  font-size:clamp(.95rem,1.8vw,1.15rem);font-weight:800;letter-spacing:.02em;
  white-space:nowrap;font-variant-numeric:tabular-nums;margin-left:auto;
}

/* gold tier */
.eoi--gold .eoi__plaque{
  background:linear-gradient(135deg,#f7e6ae 0%,#e3c164 26%,#c9a24a 52%,#a8801f 76%,#e8cf8b 100%);
  color:#2a1d05;
}
.eoi--gold .eoi__medal{background:linear-gradient(160deg,#fdf3d2,#d9b452 55%,#9e7519);color:#3a2806}
.eoi--gold .eoi__sep{background:#4a3608}
.eoi--gold{border-color:rgba(201,162,74,.4)}
.eoi--gold:hover{border-color:rgba(224,192,125,.75);
  box-shadow:0 30px 60px -34px rgba(201,162,74,.9),inset 0 1px 0 rgba(246,197,132,.14)}

/* platinum tier */
.eoi--plat .eoi__plaque{
  background:linear-gradient(135deg,#ffffff 0%,#dfe4e9 24%,#b8bfc7 52%,#8d959d 76%,#e8edf1 100%);
  color:#1c2126;
}
.eoi--plat .eoi__medal{background:linear-gradient(160deg,#ffffff,#c6ccd3 55%,#878f97);color:#20262c}
.eoi--plat .eoi__sep{background:#39424a}
.eoi--plat{border-color:rgba(198,206,214,.34)}
.eoi--plat:hover{border-color:rgba(226,232,238,.7);
  box-shadow:0 30px 60px -34px rgba(190,200,212,.75),inset 0 1px 0 rgba(255,255,255,.16)}

/* ---------- benefits ---------- */
.eoi__list{list-style:none;margin:0 0 clamp(22px,2.6vw,28px);padding:0;display:grid;gap:.75rem}
.eoi__list li{
  display:flex;align-items:flex-start;gap:.7rem;
  font-size:.92rem;line-height:1.6;color:rgba(243,237,225,.88);
}
.eoi__list svg{width:17px;height:17px;flex:none;margin-top:.15rem}
.eoi--gold .eoi__list svg{color:var(--gold-2)}
.eoi--plat .eoi__list svg{color:#cfd6dd}
.eoi__list b{color:#fff;font-weight:700}

.eoi__cta{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  width:100%;padding:.85rem 1.2rem;cursor:pointer;font-family:inherit;border-radius:2px;
  font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid transparent;transition:transform .25s,box-shadow .25s,filter .25s;
}
.eoi__cta svg{width:14px;height:14px}
.eoi--gold .eoi__cta{
  background:linear-gradient(135deg,#f3d78f,#c9a24a 55%,#a8801f);color:#2a1d05;
  box-shadow:0 12px 30px -14px rgba(201,162,74,.9);
}
.eoi--plat .eoi__cta{
  background:linear-gradient(135deg,#f4f7f9,#c6ced6 55%,#949ca4);color:#1c2126;
  box-shadow:0 12px 30px -14px rgba(190,200,212,.8);
}
.eoi__cta:hover{transform:translateY(-2px);filter:brightness(1.06)}

/* ---------- closing strip ---------- */
.eoi__foot{text-align:center;margin-top:clamp(26px,3.2vw,38px)}
.eoi__early{
  display:inline-block;margin:0;padding:.6rem 1.4rem;border-radius:999px;
  border:1px solid rgba(201,162,74,.3);background:rgba(246,197,132,.06);
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2);
}
.eoi__tag{
  margin:clamp(14px,1.8vw,20px) 0 0;font-style:italic;font-weight:700;
  font-size:clamp(1rem,2.2vw,1.35rem);letter-spacing:.02em;
  background:linear-gradient(96deg,var(--gold-2),#fffaf2 45%,var(--orange-2));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.eoi__terms{
  margin:clamp(18px,2.2vw,24px) auto 0;max-width:78ch;
  font-size:.68rem;line-height:1.75;color:#8a7d6f;
}

@media (max-width:820px){
  .eoi{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  .eoi__plaque{flex-wrap:wrap;row-gap:.4rem;padding:.5rem .8rem .6rem .5rem}
  .eoi__amt{margin-left:0;width:100%;padding-left:.2rem}
  .eoi__sep{display:none}
}

/* =========================================================
   AT-A-GLANCE — five tiles, one row on desktop
   Property Type carries a much longer value than the rest, so it
   gets a wider track instead of forcing every tile to its width.
   The value no longer bottom-aligns (margin-top:auto): with one
   tile wrapping to three lines that pushed the short values away
   from their labels.
   ========================================================= */
.glance{grid-template-columns:1.3fr 1fr 1.95fr 1.05fr 1.05fr}
.glance li{padding-inline:.7rem}
.glance span{margin-top:0}
.glance li{justify-content:flex-start}

@media (max-width:1024px){
  .glance{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .glance{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* five tiles over two columns leaves an orphan — let it take the row */
  .glance li:last-child{grid-column:1 / -1}
}
@media (max-width:460px){
  .glance{grid-template-columns:minmax(0,1fr)}
  .glance li:last-child{grid-column:auto}
}

/* =========================================================
   AMENITIES CAROUSEL
   The track is a native overflow-x scroller with scroll-snap, so
   touch swipe and keyboard scrolling work before any JS runs. The
   arrows and progress rail are revealed by enhance.js.
   Only this element scrolls sideways — the page never does.
   ========================================================= */
.carousel{position:relative}
.carousel__viewport{margin:0;overflow:hidden;border-radius:var(--r)}

.carousel__track{
  display:flex;gap:.75rem;margin:0;padding:0 0 .25rem;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:var(--r)}

.carousel__slide{
  flex:0 0 31%;min-width:0;scroll-snap-align:start;
}
.carousel__slide .gal__i{
  margin:0;height:100%;aspect-ratio:4 / 3;
  /* the grid feature-tile override no longer applies here */
  grid-column:auto;grid-row:auto;
}

/* ---------- controls ---------- */
.carousel__ui{
  display:flex;align-items:center;gap:clamp(.7rem,1.6vw,1.1rem);
  margin-top:clamp(16px,2vw,22px);
}
.carousel__btn{
  flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;cursor:pointer;
  border:1px solid rgba(201,162,74,.32);border-radius:50%;background:transparent;
  color:var(--gold-2);transition:color .25s,border-color .25s,background .25s,transform .25s;
}
.carousel__btn svg{width:18px;height:18px}
.carousel__btn:hover:not(:disabled),
.carousel__btn:focus-visible:not(:disabled){
  color:#fff;border-color:var(--orange);background:rgba(238,122,47,.12);transform:translateY(-2px);
}
.carousel__btn:disabled{opacity:.3;cursor:default}

.carousel__count{
  margin:0;flex:none;display:flex;align-items:baseline;gap:.3rem;
  font-size:.7rem;font-weight:700;letter-spacing:.14em;font-variant-numeric:tabular-nums;
}
.carousel__count b{color:var(--gold-2);font-size:.85rem}
.carousel__count span{color:#6f6253}
.carousel__count i{font-style:normal;color:var(--grey)}

.carousel__rail{
  flex:1 1 auto;height:2px;border-radius:2px;overflow:hidden;
  background:rgba(201,162,74,.16);
}
.carousel__rail span{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--orange));
  transition:width .25s ease;
}

@media (max-width:1024px){
  .carousel__slide{flex-basis:44%}
}
@media (max-width:640px){
  .carousel__slide{flex-basis:78%}
  .carousel__track{gap:.6rem}
  .carousel__btn{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .carousel__track{scroll-behavior:auto}
  .carousel__rail span{transition:none}
}