/* ==========================================================================
   Triton Humming Valley — Signature Villas at Nandi Hills
   Palette derived from the project photography:
   terracotta roofs · travertine stone · deep tropical green · brand gold
   ========================================================================== */

:root{
  /* ground */
  --ink:        #0C1611;
  --ink-2:      #12211A;
  --ink-3:      #1B2E25;
  --ink-line:   #24382D;

  /* light */
  --cream:      #FAF7F1;
  --cream-2:    #F2ECE1;
  --sand:       #E4DACA;
  --sand-line:  #DCD0BC;

  /* accents */
  --gold:       #C9A24A;
  --gold-2:     #E0C173;
  --gold-soft:  rgba(201,162,74,.14);
  --terra:      #BF6239;

  /* type */
  --text:       #182420;
  --text-2:     #5A6760;
  --text-3:     #8B958E;
  --on-dark:    #EFE9DE;
  --on-dark-2:  #A3B4A8;

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

  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1280px;
  --sec-y: clamp(72px, 11vw, 148px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15.5px,.42vw + 14.4px,17px);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0 0 1.15em; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--gold); color:#0C1611; }

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

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--on-dark);
  padding:12px 20px; font-size:14px; letter-spacing:.06em;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- layout ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--sec-y); position:relative; }
.section--tint{ background:var(--cream-2); }
.section--dark{ background:var(--ink); color:var(--on-dark); }

/* ---------- type primitives ---------- */
.eyebrow{
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--terra);
  margin:0 0 20px;
}
.eyebrow--light{ color:var(--gold-2); }

.h2{
  font-family:var(--serif);
  font-size:clamp(34px,5.2vw,60px);
  line-height:1.08;
  letter-spacing:-.012em;
  font-weight:400;
  margin:0 0 26px;
}
.h2 em{ font-style:italic; color:var(--terra); font-weight:300; }
.h2--light em{ color:var(--gold-2); }

.lede{
  font-size:clamp(17px,1.15vw + 14px,21px);
  line-height:1.62;
  color:var(--text);
  font-weight:300;
}
.lede--light{ color:var(--on-dark); }

.rule{
  width:64px; height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
  margin:0 0 30px;
}
.rule--center{ margin-inline:auto; background:linear-gradient(90deg,transparent,var(--gold),transparent); width:110px; }
.rule--light{ background:linear-gradient(90deg,var(--gold-2),transparent); }

.section__head{ text-align:center; max-width:720px; margin:0 auto clamp(48px,6vw,80px); }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--gold); --fg:#101A14;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  position:relative; overflow:hidden;
  padding:16px 34px;
  background:var(--bg); color:var(--fg);
  font-size:12.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  border:1px solid transparent;
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), transform .4s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.45),transparent 80%);
  transform:translateX(-120%);
  transition:transform .75s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:hover::after{ transform:translateX(120%); }
.btn--gold{ --bg:var(--gold); --fg:#101A14; }
.btn--gold:hover{ --bg:var(--gold-2); }
.btn--ghost{
  background:transparent; color:#fff;
  border-color:rgba(255,255,255,.42);
}
.btn--ghost:hover{ background:rgba(255,255,255,.1); border-color:#fff; }
.btn--ghost-light{
  background:transparent; color:var(--on-dark);
  border-color:rgba(201,162,74,.5);
  margin-top:8px;
}
.btn--ghost-light:hover{ background:var(--gold-soft); border-color:var(--gold); color:var(--gold-2); }
.btn--block{ width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  color:var(--terra);
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), gap .35s var(--ease);
}
.link-arrow svg{ width:22px; height:11px; transition:transform .35s var(--ease); }
.link-arrow:hover{ border-color:var(--terra); gap:16px; }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ---------- topbar ---------- */
.topbar{
  background:var(--ink);
  color:var(--on-dark-2);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-bottom:1px solid var(--ink-line);
  position:relative; z-index:60;
}
.topbar__inner{
  display:flex; align-items:center; justify-content:center;
  gap:18px; height:38px;
  text-align:center;
}
.topbar__rera b{ color:var(--gold-2); font-weight:500; letter-spacing:.06em; }
.topbar__sep{ width:1px; height:12px; background:var(--ink-line); }
@media (max-width:860px){
  .topbar__note,.topbar__sep{ display:none; }
  .topbar__inner{ font-size:10px; }
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:70;
  background:rgba(12,22,17,0);
  border-bottom:1px solid rgba(255,255,255,0);
  transition:background .45s var(--ease), border-color .45s var(--ease),
             backdrop-filter .45s var(--ease);
}
.nav.is-stuck{
  background:rgba(12,22,17,.92);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--ink-line);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:clamp(66px,7vw,86px);
}

.brand{ display:flex; align-items:center; gap:13px; color:#fff; }
.brand__mark{ width:36px; height:36px; color:var(--gold); flex:none; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-size:17px; letter-spacing:.34em; font-weight:400;
}
.brand__sub{
  font-family:var(--serif); font-style:italic;
  font-size:13px; letter-spacing:.04em; color:var(--gold-2);
  margin-top:4px;
}

.nav__links{ display:flex; align-items:center; gap:clamp(18px,2.2vw,34px); }
.nav__links a{
  position:relative;
  font-size:12px; letter-spacing:.15em; text-transform:uppercase; font-weight:400;
  color:rgba(255,255,255,.82);
  padding:6px 0;
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-active{ color:var(--gold-2); }

.nav__cta{
  border:1px solid rgba(201,162,74,.55);
  padding:10px 22px !important;
  color:var(--gold-2) !important;
}
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:var(--gold); color:#101A14 !important; border-color:var(--gold); }

.nav__toggle{
  display:none; width:44px; height:44px;
  flex-direction:column; justify-content:center; gap:5px; align-items:flex-end;
}
.nav__toggle span{
  display:block; height:1.5px; background:#fff;
  transition:transform .4s var(--ease), opacity .3s var(--ease), width .4s var(--ease);
}
.nav__toggle span:nth-child(1){ width:24px; }
.nav__toggle span:nth-child(2){ width:18px; }
.nav__toggle span:nth-child(3){ width:24px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ width:24px; transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:900px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:fixed; inset:0 0 0 auto;
    width:min(86vw,380px);
    background:var(--ink);
    border-left:1px solid var(--ink-line);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:6px; padding:40px var(--gutter);
    transform:translateX(100%);
    transition:transform .55s var(--ease-out);
    z-index:80;
  }
  .nav__links.is-open{ transform:translateX(0); }
  .nav__links a{
    font-size:15px; letter-spacing:.18em; padding:14px 0; width:100%;
    border-bottom:1px solid var(--ink-line);
  }
  .nav__links a::after{ display:none; }
  .nav__cta{ margin-top:22px; border-bottom:1px solid rgba(201,162,74,.55) !important; text-align:center; }
  body.nav-open{ overflow:hidden; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:clamp(600px,94svh,1000px);
  margin-top:calc(-1 * clamp(66px,7vw,86px));
  padding-top:clamp(66px,7vw,86px);
  display:flex; align-items:center;
  overflow:hidden;
  background:var(--ink);
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  animation:kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{ transform:scale(1.02) translate3d(0,0,0); }
  to  { transform:scale(1.13) translate3d(-1.4%,-1.6%,0); }
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(8,15,11,.94) 0%, rgba(8,15,11,.55) 34%, rgba(8,15,11,.18) 62%, rgba(8,15,11,.55) 100%),
    linear-gradient(105deg, rgba(8,15,11,.78) 0%, rgba(8,15,11,.25) 52%, transparent 78%);
}
.hero__content{ position:relative; z-index:2; padding-block:clamp(60px,10vw,110px); color:#fff; }
.hero__title{
  font-family:var(--serif);
  font-size:clamp(48px,8.4vw,116px);
  line-height:.98;
  letter-spacing:-.022em;
  font-weight:300;
  margin:0 0 26px;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
}
.hero__title .line{ display:block; }
.hero__title em{ font-style:italic; color:var(--gold-2); }
.hero__lede{
  max-width:50ch;
  font-size:clamp(16px,1.1vw + 13.5px,20px);
  line-height:1.62;
  color:rgba(255,255,255,.88);
  margin:0 0 42px;
}

.hero__meta{
  display:flex; align-items:flex-end; flex-wrap:wrap;
  gap:clamp(26px,4vw,60px);
  padding-top:34px;
  border-top:1px solid rgba(255,255,255,.2);
  max-width:900px;
}
.hero__price{ display:flex; flex-direction:column; gap:8px; }
.hero__price-label{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.hero__price-value{
  font-family:var(--serif); font-size:clamp(38px,4.2vw,54px);
  line-height:1; color:var(--gold-2); font-weight:400;
}
.hero__price-value span{ font-size:.5em; letter-spacing:.06em; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(255,255,255,.62);
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
}
.hero__scroll-line{
  width:1px; height:52px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.6));
  position:relative; overflow:hidden;
}
.hero__scroll-line::after{
  content:""; position:absolute; left:0; top:-52px; width:1px; height:52px;
  background:linear-gradient(to bottom,transparent,var(--gold));
  animation:scrollcue 2.6s ease-in-out infinite;
}
@keyframes scrollcue{ 0%{ top:-52px; } 60%,100%{ top:52px; } }
@media (max-width:640px){ .hero__scroll{ display:none; } }

/* ---------- facts ---------- */
.facts{ background:var(--ink-2); color:var(--on-dark); border-bottom:1px solid var(--ink-line); }
.facts__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-block:clamp(36px,4.6vw,56px);
}
.fact{ text-align:center; padding-inline:14px; position:relative; }
.fact + .fact::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:46px; background:var(--ink-line);
}
.fact__num{
  display:block;
  font-family:var(--serif); font-size:clamp(34px,4vw,52px);
  line-height:1; color:var(--gold-2); font-weight:400;
  margin-bottom:12px;
}
.fact__label{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--on-dark-2);
}
@media (max-width:720px){
  .facts__grid{ grid-template-columns:repeat(2,1fr); gap:34px 0; }
  .fact:nth-child(3)::before{ display:none; }
}

/* ---------- overview ---------- */
.overview__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(40px,6vw,96px); align-items:center;
}
.overview__text p{ color:var(--text-2); }
.overview__text .lede{ color:var(--text); margin-bottom:1.3em; }

.ticks{ margin-top:32px; display:grid; gap:13px; }
.ticks li{
  position:relative; padding-left:30px;
  font-size:14.5px; letter-spacing:.02em; color:var(--text);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:13px; height:7px;
  border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg);
}

.stack{ position:relative; margin:0; padding-bottom:12%; padding-right:10%; }
.stack__back{
  width:100%; aspect-ratio:4/3.2; object-fit:cover;
  box-shadow:0 30px 70px -30px rgba(24,36,32,.5);
}
.stack__front{
  position:absolute; right:0; bottom:0;
  width:52%; aspect-ratio:3/3.6; object-fit:cover;
  border:9px solid var(--cream);
  box-shadow:0 26px 56px -24px rgba(24,36,32,.55);
}
.stack__badge{
  position:absolute; left:-6px; top:8%;
  background:var(--ink); color:var(--on-dark);
  padding:18px 22px;
  display:flex; align-items:center; gap:14px;
  box-shadow:0 20px 44px -18px rgba(12,22,17,.6);
}
.stack__badge-num{
  font-family:var(--serif); font-size:40px; line-height:1; color:var(--gold-2);
}
.stack__badge-num span{ font-size:.42em; letter-spacing:.05em; }
.stack__badge-txt{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  line-height:1.5; color:var(--on-dark-2);
}
@media (max-width:900px){
  .overview__grid{ grid-template-columns:1fr; }
  .overview__media{ order:-1; }
  .stack{ padding-right:14%; }
}

/* ---------- investment ---------- */
.investment{ overflow:hidden; }
.investment__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 82% 12%, rgba(201,162,74,.13), transparent 58%),
    radial-gradient(90% 70% at 10% 92%, rgba(191,98,57,.11), transparent 60%);
  pointer-events:none;
}
.investment .wrap{ position:relative; z-index:2; }
.investment__head{ text-align:center; max-width:720px; margin:0 auto clamp(44px,5.5vw,68px); }

.deal{
  display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap;
  gap:0;
  border:1px solid var(--ink-line);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
  max-width:920px; margin:0 auto clamp(48px,6vw,76px);
}
.deal__side{
  flex:1 1 280px; padding:clamp(30px,4vw,46px) clamp(24px,3.4vw,44px);
  display:flex; flex-direction:column; gap:12px; text-align:center;
  align-items:center; justify-content:center;
}
.deal__label{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--on-dark-2);
}
.deal__value{
  font-family:var(--serif); font-size:clamp(38px,4.6vw,60px); line-height:1.02;
  color:var(--on-dark); font-weight:400;
}
.deal__value small{
  display:block; font-family:var(--sans); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-dark-2); margin-top:12px; font-weight:300;
}
.deal__side--accent{ background:var(--gold-soft); }
.deal__side--accent .deal__value{ color:var(--gold-2); }
.deal__arrow{
  display:flex; align-items:center; justify-content:center;
  padding-inline:8px; color:var(--gold);
  border-inline:1px solid var(--ink-line);
}
.deal__arrow svg{ width:58px; }
@media (max-width:700px){
  .deal__arrow{ border-inline:0; border-block:1px solid var(--ink-line); padding-block:14px; width:100%; }
  .deal__arrow svg{ transform:rotate(90deg); width:38px; }
}

.pillars{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.6vw,34px);
  margin-bottom:clamp(40px,5vw,60px);
}
.pillar{
  padding:32px 26px;
  border:1px solid var(--ink-line);
  background:rgba(255,255,255,.02);
  transition:border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
}
.pillar:hover{ border-color:rgba(201,162,74,.42); background:rgba(201,162,74,.05); transform:translateY(-4px); }
.pillar__icon{
  display:flex; width:44px; height:44px; margin-bottom:20px;
  color:var(--gold);
}
.pillar__icon svg{ width:100%; height:100%; }
.pillar h3{
  font-family:var(--serif); font-size:22px; line-height:1.25;
  color:var(--on-dark); margin-bottom:10px; font-weight:500;
}
.pillar p{ font-size:14px; color:var(--on-dark-2); margin:0; line-height:1.6; }
.investment__cta{ text-align:center; margin:0; }
@media (max-width:980px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .pillars{ grid-template-columns:1fr; } }

/* ---------- villas ---------- */
.villa-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,4vw,56px);
}
.villa{
  background:var(--cream-2);
  border:1px solid var(--sand-line);
  display:flex; flex-direction:column;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.villa:hover{ transform:translateY(-6px); box-shadow:0 34px 66px -34px rgba(24,36,32,.42); }
.villa__media{ position:relative; overflow:hidden; aspect-ratio:16/10.5; }
.villa__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-out);
}
.villa:hover .villa__media img{ transform:scale(1.06); }
.villa__tag{
  position:absolute; left:0; top:22px;
  background:var(--ink); color:var(--gold-2);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  padding:9px 18px;
}
.villa__body{ padding:clamp(26px,3.2vw,40px); display:flex; flex-direction:column; flex:1; }
.villa__title{
  font-family:var(--serif); font-size:clamp(28px,2.8vw,38px);
  line-height:1.1; margin-bottom:22px; font-weight:400;
}
.villa__specs{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:14px; margin:0 0 22px;
  padding-block:20px;
  border-block:1px solid var(--sand-line);
}
.villa__specs dt{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:7px;
}
.villa__specs dd{
  margin:0; font-size:15px; color:var(--text); font-weight:400;
}
.villa__desc{ color:var(--text-2); font-size:15px; margin-bottom:26px; }
.villa__body .link-arrow{ margin-top:auto; align-self:flex-start; }
@media (max-width:820px){ .villa-grid{ grid-template-columns:1fr; } }

/* ---------- quote ---------- */
.quote{
  position:relative; isolation:isolate;
  padding-block:clamp(90px,13vw,180px);
  text-align:center; color:#fff;
  background:var(--ink);
}
.quote__bg{
  position:absolute; inset:0; z-index:-1;
  background-image:url("https://i0.wp.com/tritongroup.in/wp-content/uploads/2026/05/Luxury-villas-near-airport-Bangalore-with-excellent-connectivity.webp?w=1800&ssl=1");
  background-size:cover; background-position:center;
  background-attachment:fixed;
}
.quote__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,15,11,.82),rgba(8,15,11,.9));
}
.quote__inner{ position:relative; }
.quote blockquote{ margin:0; }
.quote blockquote p{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(28px,4.4vw,56px); line-height:1.25;
  letter-spacing:-.01em; margin:0 0 28px;
}
.quote cite{
  font-style:normal; font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold-2);
}
@media (max-width:900px){ .quote__bg{ background-attachment:scroll; } }

/* ---------- amenities ---------- */
.amenity-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:1px; background:var(--sand-line);
  border:1px solid var(--sand-line);
}
.amenity{
  background:var(--cream);
  padding:clamp(28px,3.4vw,42px) 18px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center;
  transition:background .45s var(--ease);
}
.amenity:hover{ background:var(--cream-2); }
.amenity__icon{
  width:46px; height:46px; color:var(--terra);
  transition:transform .5s var(--ease), color .45s var(--ease);
}
.amenity__icon svg{ width:100%; height:100%; }
.amenity:hover .amenity__icon{ transform:translateY(-4px) scale(1.06); color:var(--gold); }
.amenity__name{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  line-height:1.6; color:var(--text-2);
}
@media (max-width:1080px){ .amenity-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:800px){ .amenity-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .amenity-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- gallery ---------- */
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:200px;
  gap:clamp(10px,1.4vw,18px);
}
.shot{
  position:relative; overflow:hidden; padding:0;
  background:var(--ink-2);
  grid-column:span 1; grid-row:span 1;
}
.shot--tall{ grid-row:span 2; }
.shot--wide{ grid-column:span 2; }
.shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease-out), filter .6s var(--ease);
}
.shot::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(8,15,11,.78),transparent 52%);
  opacity:0; transition:opacity .5s var(--ease);
}
.shot__cap{
  position:absolute; left:20px; bottom:16px; z-index:2;
  color:#fff; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.shot:hover img{ transform:scale(1.07); }
.shot:hover::after,
.shot:focus-visible::after{ opacity:1; }
.shot:hover .shot__cap,
.shot:focus-visible .shot__cap{ opacity:1; transform:translateY(0); }
@media (max-width:900px){
  .gallery__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .shot--wide{ grid-column:span 2; }
}
@media (max-width:560px){
  .gallery__grid{ grid-auto-rows:140px; }
}

/* ---------- master plan ---------- */
.masterplan__head{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,60px); align-items:end;
  margin-bottom:clamp(36px,4.4vw,56px);
}
.masterplan__note{ color:var(--text-2); margin:0; padding-bottom:8px; }
@media (max-width:820px){ .masterplan__head{ grid-template-columns:1fr; } }

.masterplan__frame{
  position:relative; display:block; width:100%; padding:0;
  border:1px solid var(--sand-line);
  background:var(--cream-2);
  overflow:hidden;
}
.masterplan__frame img{ width:100%; transition:transform 1s var(--ease-out); }
.masterplan__frame:hover img{ transform:scale(1.02); }
.masterplan__zoom{
  position:absolute; right:18px; bottom:18px;
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(12,22,17,.86); color:var(--on-dark);
  padding:11px 18px;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  backdrop-filter:blur(6px);
}
.masterplan__zoom svg{ width:15px; height:15px; color:var(--gold-2); }

/* ---------- location ---------- */
.location__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(38px,5.5vw,84px); align-items:center;
}
.distances{ margin:34px 0 30px; border-top:1px solid var(--ink-line); }
.distances li{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--ink-line);
}
.distances__place{ font-size:14.5px; color:var(--on-dark); }
.distances__val{
  font-family:var(--serif); font-size:19px; color:var(--gold-2); white-space:nowrap;
}
.location__map{
  position:relative; aspect-ratio:1/1;
  border:1px solid var(--ink-line);
  filter:grayscale(.35) contrast(1.05);
}
.location__map iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width:900px){
  .location__grid{ grid-template-columns:1fr; }
  .location__map{ aspect-ratio:4/3; }
}

/* ---------- enquiry ---------- */
.enquire{ background:var(--cream-2); }
.enquire__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(38px,5.5vw,84px); align-items:start;
}
.enquire__intro p{ color:var(--text-2); }
@media (max-width:900px){ .enquire__grid{ grid-template-columns:1fr; } }

.form{
  background:var(--cream);
  border:1px solid var(--sand-line);
  padding:clamp(28px,3.6vw,46px);
  box-shadow:0 34px 70px -40px rgba(24,36,32,.4);
}
.form__title{
  font-family:var(--serif); font-size:28px; line-height:1.2; margin:0 0 6px;
}
.form__sub{
  font-size:13px; color:var(--text-3); margin:0 0 28px;
  letter-spacing:.04em;
}

.field{ position:relative; margin-bottom:22px; }
.field input,
.field select{
  width:100%;
  background:transparent;
  border:0; border-bottom:1px solid var(--sand-line);
  padding:16px 0 11px;
  font-family:var(--sans); font-size:15.5px; font-weight:300; color:var(--text);
  border-radius:0;
  transition:border-color .35s var(--ease);
}
.field select{ appearance:none; cursor:pointer; padding-right:26px; }
.field:has(select)::after{
  content:""; position:absolute; right:4px; bottom:20px;
  width:8px; height:8px; pointer-events:none;
  border-right:1.4px solid var(--text-3); border-bottom:1.4px solid var(--text-3);
  transform:rotate(45deg);
}
.field input:focus,
.field select:focus{ outline:none; border-bottom-color:var(--gold); }

.field label{
  position:absolute; left:0; top:16px;
  font-size:15px; color:var(--text-3); font-weight:300;
  pointer-events:none;
  transition:transform .32s var(--ease), font-size .32s var(--ease), color .32s var(--ease);
  transform-origin:left top;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  transform:translateY(-17px) scale(.72);
  color:var(--terra);
  letter-spacing:.12em; text-transform:uppercase;
}
.label--static{
  position:absolute; top:-4px; left:0;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-3);
}

.field.is-invalid input{ border-bottom-color:#B4472F; }
.field__err{
  display:block; min-height:0; overflow:hidden;
  font-size:11.5px; letter-spacing:.06em; color:#B4472F;
  margin-top:6px; opacity:0; transform:translateY(-4px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.field.is-invalid .field__err{ opacity:1; transform:translateY(0); }

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

#submitBtn{ margin-top:8px; position:relative; }
.btn__spinner{
  width:15px; height:15px; border-radius:50%;
  border:1.6px solid rgba(16,26,20,.28); border-top-color:#101A14;
  display:none; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.form.is-sending .btn__spinner{ display:block; }
.form.is-sending #submitBtn{ pointer-events:none; opacity:.78; }

.form__status{
  margin:16px 0 0; font-size:13.5px; line-height:1.55;
  min-height:1px;
}
.form__status.is-ok{ color:#2E6B4F; }
.form__status.is-err{ color:#B4472F; }

.form__fine{
  margin:18px 0 0; font-size:11.5px; line-height:1.6; color:var(--text-3);
}

/* ---------- footer ---------- */
.footer{ background:var(--ink); color:var(--on-dark-2); padding-top:clamp(56px,7vw,88px); }
.footer__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr;
  gap:clamp(30px,4vw,56px);
  padding-bottom:clamp(40px,5vw,64px);
}
.brand--footer{ margin-bottom:20px; }
.footer__blurb{ font-size:14px; line-height:1.7; max-width:36ch; margin:0; }
.footer__col h4{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:20px; font-weight:500;
}
.footer__col a{
  display:block; font-size:14px; padding:6px 0;
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.footer__col a:hover{ color:var(--on-dark); transform:translateX(3px); }
.footer__addr{ font-size:13.5px; line-height:1.7; margin-top:14px; }

.footer__bottom{
  border-top:1px solid var(--ink-line);
  padding-block:26px 30px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
.footer__rera{ margin:0; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.footer__rera b{ color:var(--gold-2); font-weight:500; letter-spacing:.05em; }
.footer__legal{ margin:0; font-size:11.5px; color:var(--text-3); }
@media (max-width:900px){ .footer__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .footer__grid{ grid-template-columns:1fr; } }

/* ---------- sticky mobile bar ---------- */
.mobilebar{
  position:fixed; left:0; right:0; bottom:0; z-index:75;
  display:none; gap:1px;
  background:var(--ink-line);
  transform:translateY(100%);
  transition:transform .5s var(--ease-out);
}
.mobilebar.is-visible{ transform:translateY(0); }
.mobilebar__btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 10px;
  background:var(--gold); color:#101A14;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
}
.mobilebar__btn--alt{ flex:0 0 38%; background:var(--ink); color:var(--on-dark); }
.mobilebar__btn svg{ width:16px; height:16px; }
@media (max-width:720px){
  .mobilebar{ display:flex; }
  body{ padding-bottom:0; }
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:120;
  background:rgba(6,11,9,.96);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,56px);
  opacity:0; transition:opacity .35s var(--ease);
}
.lightbox.is-open{ opacity:1; }
.lightbox__figure{ margin:0; max-width:100%; max-height:100%; text-align:center; }
.lightbox__figure img{
  max-width:100%; max-height:82svh; object-fit:contain;
  margin-inline:auto;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}
.lightbox__figure figcaption{
  margin-top:20px; color:var(--on-dark-2);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
}
.lightbox__close,
.lightbox__nav{
  position:absolute; z-index:2;
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover{ background:rgba(255,255,255,.13); color:#fff; border-color:rgba(255,255,255,.4); }
.lightbox__close{ top:clamp(14px,3vw,32px); right:clamp(14px,3vw,32px); }
.lightbox__close svg{ width:20px; height:20px; }
.lightbox__nav{ top:50%; transform:translateY(-50%); }
.lightbox__nav svg{ width:20px; height:20px; }
.lightbox__nav--prev{ left:clamp(10px,2.4vw,32px); }
.lightbox__nav--next{ right:clamp(10px,2.4vw,32px); }
@media (max-width:620px){
  .lightbox__nav{ top:auto; bottom:16px; transform:none; width:46px; height:46px; }
  .lightbox__nav--prev{ left:calc(50% - 54px); }
  .lightbox__nav--next{ right:calc(50% - 54px); }
  .lightbox__figure figcaption{ margin-bottom:70px; }
}

/* ---------- reveal animation ---------- */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .95s var(--ease-out), transform .95s var(--ease-out);
  will-change:opacity, transform;
}
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.1s; }
[data-reveal-delay="2"]{ transition-delay:.2s; }
[data-reveal-delay="3"]{ transition-delay:.3s; }
[data-reveal-delay="4"]{ transition-delay:.4s; }

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

@media print{
  .nav,.topbar,.mobilebar,.hero__scroll,.lightbox,.location__map{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding-block:24px; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}
