/* ===========================================================
   Shriram Reserve villaments, Bannerghatta Road, South Bengaluru: lead generation landing page
   (pre launch). TEMPLATE 1 (the house template, refined on 30 Sep 2026 after the user said the
   fonts and design looked AI generated): Archivo Expanded (OFL) for headings, Archivo (OFL) for
   text, a rupee-only Archivo subset for the price figures; white and stone grounds with charcoal
   ink instead of cream and walnut; terracotta brick CTAs from the developer's teaser; one 2px
   radius; hairlines instead of floating shadows; emerald grounds with an olive leaf texture and a liquid glass
   top bar (30 Sep). The refinement block is at the end of this file. The user picked this template on
   03 Oct 2026; Template 2 is archived in ~/Sites/shriram-bannerghatta-assets/work/archive-template-2-03oct/.
   =========================================================== */

/* ============ FONTS (self-hosted, Latin subsets from Google Fonts, OFL) ============
   This stylesheet is inlined into index.html by inline-css.sh, so every url() here resolves
   against the PAGE: fonts/ is right, ../fonts/ would point at the domain root. The preload in
   the head must name the same files. Self-hosting removed the render-blocking Google Fonts
   request, which cost about a second of FCP on a phone. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/archivo-rupee.woff2) format("woff2");unicode-range:U+20B9}
@font-face{font-family:"Archivo Expanded";font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/archivo-exp112.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Archivo Expanded";font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/archivo-rupee.woff2) format("woff2");unicode-range:U+20B9}

/* metric-matched fallback, so the swap to the web font moves no text (CLS). Numbers from fontTools:
   letter-frequency-weighted advance width against Arial, typo ascent and descent divided by it. */
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("Liberation Sans"),local("Arimo");size-adjust:98.61%;ascent-override:89.04%;descent-override:21.30%;line-gap-override:0%}
@font-face{font-family:"Archivo Expanded Fallback";src:local("Arial"),local("Liberation Sans"),local("Arimo");size-adjust:112.42%;ascent-override:78.10%;descent-override:18.68%;line-gap-override:0%}

/* ============ TOKENS ============ */
:root{
  /* Shriram Reserve palette: the walnut of the pergola and the terracotta brick of the developer's
     teaser (sampled from the teaser frames on 29 Sep 2026), cream grounds, and the Shriram gold #bb905b
     of shriramproperties.com as the accent. Terracotta buttons carry white text at 4.66:1 or more on
     their lightest stop (#b85a2c). */
  --ink:#2b211c;
  --indigo:#2b211c;
  --indigo-deep:#221812;
  --indigo-night:#1a120d;
  --royal:#54443a;
  --gold:#bb905b;
  --gold-soft:#d0ab78;
  --gold-bright:#e8cc9f;
  --gold-ink:#7a5a2e;
  --brick:#b85a2c;
  --brick-deep:#96431f;
  --brick-night:#763217;
  --cream:#f6efe6;
  --cream-2:#efe3d4;
  --paper:#ffffff;
  --white:#ffffff;
  --muted:#6b5f57;
  --muted-light:#a0948b;
  --line:rgba(43,33,28,.10);
  --line-gold:rgba(187,144,91,.45);
  --ease:cubic-bezier(.32,.72,0,1);
  --shadow-soft:0 24px 70px -35px rgba(26,18,13,.28);
  --shadow-card:0 30px 90px -40px rgba(26,18,13,.26), 0 4px 18px -8px rgba(26,18,13,.10);
  --r-outer:1rem;
  --r-inner:calc(1rem - .4rem);
  --btn-r:3px;
  --display:"Archivo Expanded","Archivo Expanded Fallback",Arial,sans-serif;
  --text:"Archivo","Archivo Fallback",Arial,-apple-system,"Segoe UI",sans-serif;
  --mark:"Archivo Expanded","Archivo Expanded Fallback",Arial,sans-serif;
  /* the same colours as rgb triples, for the rgba() washes */
  --dark-rgb:26,18,13;
  --shadow-rgb:26,18,13;
  --royal-rgb:84,68,58;
  --accent-rgb:187,144,91;
  --tint-rgb:232,204,159;
  --paper-rgb:246,239,230;
  --paper2-rgb:239,227,212;
  --hi-rgb:232,204,159;
  --brick-rgb:184,90,44;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
.trust-item,.rera-inline,table.facts td,.foot-rera{overflow-wrap:anywhere}
html{scroll-behavior:smooth}
body{
  font-family:var(--text);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--indigo-night)}
img{max-width:100%;height:auto;display:block}
picture{display:contents}
a{color:inherit}
h1,h2,h3,.serif{font-family:var(--display);font-weight:500;letter-spacing:0}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select{font-family:inherit}

/* grain */
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ============ BELOW THE FOLD ============ */
/* content-visibility:auto was removed on 23 Sep 2026: its 1000px placeholders sent the nav links
   to the wrong place on a fresh visit and kept off-screen headings out of the accessibility tree */
@media(max-width:900px){.grain{display:none}}

/* ============ REVEAL ============ */
/* opacity + lift only: a blur filter here cost about a second of first-frame paint on phones.
   Hidden only under html.js (set by the first line of the head), so without JavaScript every
   section, the site-visit form included, stays visible. */
.js .rv{opacity:0;transform:translateY(42px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.js .rv.in{opacity:1;transform:translateY(0)}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:center;padding:1.1rem 1rem 0;pointer-events:none}
.nav-pill{
  pointer-events:auto;
  display:flex;align-items:center;gap:1.4rem;
  background:rgba(var(--dark-rgb),.55);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(var(--hi-rgb),.22);
  border-radius:999px;
  padding:.55rem .65rem .55rem 1.35rem;
  box-shadow:0 18px 50px -20px rgba(var(--dark-rgb),.7);
  transition:background .5s var(--ease),transform .5s var(--ease);
  max-width:100%;
}
.nav.scrolled .nav-pill{background:rgba(var(--dark-rgb),.88)}
.nav-logo{display:flex;flex-direction:column;line-height:1.05;color:#fff;text-decoration:none;white-space:nowrap}
.nav-logo .l1{font-family:var(--mark);font-size:.92rem;letter-spacing:.2em;font-weight:700;color:var(--gold-bright)}
.nav-logo .l1 em{font-style:normal;color:#fff;font-weight:400}
.nav-logo .l2{font-size:.54rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:.25rem;font-weight:600}
.nav-links{display:flex;gap:1.15rem;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.8)}
.nav-links a{text-decoration:none;transition:color .4s var(--ease)}
.nav-links a:hover{color:var(--gold-bright)}
.nav-cta{
  display:flex;align-items:center;gap:.55rem;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:var(--indigo-night);font-weight:700;font-size:.76rem;letter-spacing:.04em;
  border-radius:999px;padding:.62rem .62rem .62rem 1.1rem;
  text-decoration:none;white-space:nowrap;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.nav-cta .dot{width:1.65rem;height:1.65rem;border-radius:999px;background:rgba(var(--dark-rgb),.16);display:flex;align-items:center;justify-content:center;transition:transform .45s var(--ease)}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 12px 30px -12px rgba(var(--accent-rgb),.8)}
.nav-cta:hover .dot{transform:translate(2px,-1px) scale(1.06)}
.nav-cta:active{transform:scale(.98)}
.nav-phone{display:flex;align-items:center;gap:.4rem;color:rgba(255,255,255,.88);font-size:.78rem;font-weight:700;text-decoration:none;white-space:nowrap}
.nav-phone:hover{color:var(--gold-bright)}
@media(max-width:900px){.nav-links,.nav-phone{display:none}.nav-pill{gap:.9rem}}
@media(max-width:640px){
  .nav{padding:.8rem .75rem 0}
  .nav-pill{width:100%;justify-content:space-between;gap:.5rem;padding:.45rem .45rem .45rem .95rem;overflow:hidden}
  .nav-logo{min-width:0}
  .nav-logo .l1{font-size:.72rem;letter-spacing:.14em}
  .nav-logo .l2{display:none}
  .nav-cta{font-size:.7rem;padding:.6rem .95rem;flex:none}
  .nav-cta .dot{display:none}
}

/* ============ HERO (mobile first, the house template hero) ============
   A photo banner with the name and the two-part price box on its dark top, nothing laid over the
   building, then the lead form as a white card pulled over the photo's bottom edge, so it is the
   next thing a thumb reaches. The lead-in, chips and the brochure button follow the form.
   Phones: the phone crop is pinned to the banner bottom at full width and the bottom padding
   reserves exactly its height, so the text never sits on the photo at any width. */
.hero{position:relative;color:#fff;background:var(--cream)}
.hero-banner{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,rgb(var(--dark-rgb)) 0%,rgb(var(--dark-rgb)) 45%,var(--indigo-deep) 100%);padding:5.1rem 1rem calc(var(--m-photo) - 2.6rem);--m-photo:85.9vw}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{position:absolute;left:0;bottom:0;width:100%;height:var(--m-photo);object-fit:cover;object-position:50% 80%;max-width:none;-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 16%,#000 40%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 16%,#000 40%)}
.hero-veil{position:absolute;left:0;right:0;bottom:0;height:calc(var(--m-photo) + 2px);z-index:-1;background:linear-gradient(180deg,rgba(var(--dark-rgb),0) 0%,rgba(var(--dark-rgb),0) 68%,rgba(var(--dark-rgb),.5) 100%)}
.hero-wrap{width:min(1200px,100%);margin:0 auto}
.hero-copy{max-width:36rem}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid rgba(var(--hi-rgb),.35);
  background:rgba(255,255,255,.05);
  color:var(--gold-bright);
  border-radius:999px;padding:.4rem .95rem;
  font-size:.6rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
}
.eyebrow .spark{width:5px;height:5px;border-radius:99px;background:var(--gold-bright);box-shadow:0 0 12px 2px rgba(var(--tint-rgb),.9)}
.hero h1{font-size:clamp(1.55rem,8vw,2.15rem);line-height:1.1;margin:.8rem 0 .45rem}
.hero h1 .gold{display:block;color:var(--gold-bright);margin-top:.08em}
.hero-at{font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.86)}
/* price hook: the two-part box (2 BHK | 3 BHK starting price, since 26 Sep 2026) */
.hero-price{display:inline-flex;align-items:stretch;margin-top:.85rem;border:1px solid rgba(var(--hi-rgb),.55);background:rgba(var(--dark-rgb),.38);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.hero-price>div{display:flex;flex-direction:column;justify-content:center;gap:.32rem;padding:.75rem .95rem}
.hero-price .hp-at{border-left:1px solid rgba(var(--hi-rgb),.45)}
.hero-price .hp-big{font-family:var(--display);font-size:1.22rem;font-weight:700;line-height:1;color:var(--gold-bright)}
.hero-price .hp-lbl{font-size:.56rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-bright);white-space:nowrap}
.hero-price .hp-val{font-family:var(--display);font-size:1.5rem;font-weight:700;line-height:1;color:#fff;white-space:nowrap}
.hero-note{position:absolute;left:1rem;right:1rem;bottom:2.3rem;font-size:.55rem;letter-spacing:.04em;color:rgba(255,255,255,.78);text-shadow:0 1px 6px rgba(0,0,0,.75)}
.hero-rule{width:3.2rem;height:1px;background:linear-gradient(90deg,var(--gold-bright),transparent);margin:1.3rem 0 0}

/* the band under the banner: the form card first, then the lead-in and the brochure */
.hero-lower{position:relative;z-index:2;color:var(--ink);padding:0 1rem 2.4rem}
.hero-lower-wrap{width:min(1200px,100%);margin:0 auto}
.hero-more{margin-top:1.8rem}
.hero-sub{font-family:var(--text);font-size:.95rem;line-height:1.6;color:var(--muted);max-width:40rem}
.hero-side{margin-top:1.2rem}
.hero-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--white);border:1px solid var(--cream-2);
  border-radius:999px;padding:.42rem .85rem;
  font-size:.7rem;font-weight:600;color:var(--ink);
}
.chip svg{color:var(--gold-ink)}

/* form card: double bezel (site visit section, on the dark band) */
.form-shell{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(var(--hi-rgb),.28);
  border-radius:var(--r-outer);
  padding:.45rem;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 40px 100px -40px rgba(var(--dark-rgb),.85);
}
.form-core{background:var(--paper);border-radius:var(--r-inner);padding:1.7rem 1.6rem 1.45rem;color:var(--ink);box-shadow:inset 0 1px 1px rgba(255,255,255,.6)}
.form-core h3,.form-core .form-title{font-size:1.4rem;font-weight:500;line-height:1.15}
.form-core .fsub{font-size:.78rem;color:var(--muted);margin:.4rem 0 1.15rem}
.fld{margin-bottom:.8rem}
.fld label{display:block;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.fld input,.fld select{
  width:100%;border:1px solid var(--line);background:var(--white);
  border-radius:.45rem;padding:.8rem 1rem;font-size:.95rem;color:var(--ink);
  outline:none;transition:border-color .4s var(--ease),box-shadow .4s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.fld select{background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235c6473' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.fld input:focus,.fld select:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.25)}
.telwrap{display:flex;align-items:stretch;width:100%}
.telwrap select.cc{
  -webkit-appearance:none;appearance:none;
  border:1px solid var(--line);border-right:none;border-radius:.45rem 0 0 .45rem;
  background:var(--cream) url("data:image/svg+xml,%3Csvg width='9' height='6' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235d5d5d' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .5rem center;
  font-size:.78rem;font-weight:700;color:var(--ink);
  padding:0 1.3rem 0 .6rem;max-width:6.4rem;outline:none;
}
.telwrap select.cc:focus{border-color:var(--gold)}
.telwrap input{border-radius:0 .45rem .45rem 0;flex:1;min-width:0}
.fld .err{display:none;font-size:.7rem;color:#b3403f;margin-top:.3rem;font-weight:600}
.fld.bad input{border-color:#c96a5a}
.fld.bad .err{display:block}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  border-radius:var(--btn-r);font-weight:700;font-size:.86rem;letter-spacing:.02em;
  padding:.95rem 1.05rem .95rem 1.5rem;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease);
  text-decoration:none;white-space:nowrap;
}
.btn .ic{width:1.9rem;height:1.9rem;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:transform .45s var(--ease);flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:hover .ic{transform:translate(2px,-2px) scale(1.07)}
.btn:active{transform:scale(.98)}
.btn-gold{background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:var(--indigo-night);width:100%;box-shadow:0 16px 40px -16px rgba(var(--accent-rgb),.7)}
.btn-gold .ic{background:rgba(var(--dark-rgb),.14)}
.btn-gold:hover{box-shadow:0 20px 46px -16px rgba(var(--accent-rgb),.9)}
.btn-ghost{border:1px solid var(--line);color:var(--indigo);background:var(--white)}
.btn-ghost .ic{background:rgba(var(--shadow-rgb),.07)}
.btn-ink{background:var(--indigo-deep);color:#fff;box-shadow:0 16px 40px -18px rgba(var(--shadow-rgb),.7)}
.btn-ink .ic{background:rgba(255,255,255,.12)}
.btn-fit{width:auto}
.btn-line{border:1px solid rgba(var(--hi-rgb),.45);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.btn-line .ic{background:rgba(255,255,255,.12)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.form-alt{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.85rem}
.form-alt button{font-size:.8rem;font-weight:700;color:var(--indigo);text-decoration:underline;text-underline-offset:3px}
.consent{font-size:.62rem;color:var(--muted);line-height:1.5;margin-top:.9rem}
.consent a{color:var(--indigo);font-weight:700}

@keyframes ctaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes ctaShine{0%{transform:translateX(-130%) skewX(-18deg)}55%,100%{transform:translateX(240%) skewX(-18deg)}}
.cta-anim{position:relative;overflow:hidden;animation:ctaPulse 2.6s var(--ease) infinite}
.cta-anim::before{content:"";position:absolute;top:0;bottom:0;width:38%;left:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);animation:ctaShine 3.4s var(--ease) infinite;pointer-events:none}
.cta-anim:hover{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.cta-anim{animation:none}.cta-anim::before{animation:none;display:none}}
/* hero form: a white card on the light band, pulled up over the photo's bottom edge */
.hero .form-shell{
  position:relative;margin-top:-1.6rem;padding:0;
  background:var(--white);
  border:1px solid var(--cream-2);
  border-radius:.6rem;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 30px 70px -36px rgba(var(--shadow-rgb),.5),0 6px 18px -10px rgba(var(--shadow-rgb),.18);
}
.hero .form-core{background:transparent;border-radius:.6rem;padding:1.4rem 1.15rem 1.2rem;box-shadow:none}
.nw{white-space:nowrap}

/* tablets: the landscape photo under the text, so the text never sits on the building */
@media(min-width:641px){
  .hero-banner{--m-photo:47.2vw;padding:6.4rem 1.5rem calc(var(--m-photo) - 2.6rem)}
  .hero h1{font-size:clamp(2.1rem,4.6vw,2.7rem)}
  .hero-at{font-size:.68rem}
  .hero-note{left:auto;right:1.5rem;max-width:34rem;text-align:right}
  .hero-lower{padding:0 1.5rem 3rem}
  .hero .form-core{padding:1.6rem 1.5rem 1.3rem}
  #heroForm{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
  #heroForm .btn-gold{grid-column:1/-1}
  .hero-more{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.2rem 2.4rem;align-items:start}
  .hero-side{margin-top:0}
}
/* desktop: text on the banner's dark left, the photo whole on the right; the form becomes one bar
   across the banner's bottom edge, inside the first screen */
@media(min-width:981px){
  .hero-banner{display:flex;align-items:center;min-height:45vw;padding:7.2rem 1.5rem 5.4rem}
  .hero-bg{left:30%}
  .hero-bg img{top:0;height:100%;-webkit-mask-image:none;mask-image:none;object-fit:cover;object-position:40% 50%}
  .hero-veil{top:0;height:auto;background:
    linear-gradient(90deg,rgb(var(--dark-rgb)) 30%,rgba(var(--dark-rgb),.72) 36%,rgba(var(--dark-rgb),.25) 46%,rgba(var(--dark-rgb),0) 56%),
    linear-gradient(180deg,rgba(var(--dark-rgb),.55) 0%,rgba(var(--dark-rgb),0) 22%),
    linear-gradient(0deg,rgba(var(--dark-rgb),.45) 0%,rgba(var(--dark-rgb),0) 24%)}
  .hero h1{font-size:clamp(2.1rem,2.9vw,2.6rem);margin:1rem 0 .55rem}
  .hero-price>div{padding:.85rem 1.15rem}
  .hero-price .hp-big{font-size:1.35rem}
  .hero-price .hp-val{font-size:1.7rem}
  .hero-note{bottom:4.1rem}
  .hero .form-shell{margin-top:-3.3rem}
  .hero .form-core{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"t s a" "f f f" "c c c";column-gap:1.4rem;align-items:baseline;padding:1.25rem 1.6rem 1rem}
  .hero .form-core .form-title{grid-area:t;font-size:1.15rem;line-height:1.2}
  .hero .form-core .fsub{grid-area:s;margin:0;font-size:.78rem}
  #heroForm{grid-area:f;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,.9fr);gap:0 1rem;margin-top:1rem;align-items:start}
  #heroForm .fld{margin-bottom:.6rem}
  .hero .form-alt{grid-area:a;justify-content:flex-end;margin-top:0}
  .hero .consent{grid-area:c;margin-top:.2rem}
  .hero-lower{padding:0 1.5rem 3.2rem}
  .hero-more{margin-top:2.2rem;align-items:center}
  .hero-sub{font-size:1rem}
}
@media(min-width:1180px){
  #heroForm{grid-template-columns:1fr 1.2fr .9fr auto}
  #heroForm .btn-gold{grid-column:auto;width:auto;align-self:start;margin-top:calc(.62rem * 1.5 + .35rem);padding:.8rem .8rem .8rem 1.3rem}
}
@media(max-width:400px){
  .hero-price>div{padding:.65rem .75rem}
  .hero-price .hp-cfg .hp-lbl{white-space:normal;line-height:1.35}
  .hero-price .hp-big{font-size:1.08rem}
  .hero-price .hp-val{font-size:1.3rem}
  .hero-at{letter-spacing:.13em}
}
@media(max-width:420px){
  .hero-banner{padding-left:.95rem;padding-right:.95rem}
  .hero-lower{padding-left:.8rem;padding-right:.8rem}
  .eyebrow{font-size:.52rem;letter-spacing:.14em;white-space:normal;line-height:1.6}
  .form-core{padding:1.3rem 1rem 1.1rem}
  .btn{white-space:normal;font-size:.82rem;padding:.85rem 1rem .85rem 1.2rem}
}

/* ============ SECTIONS ============ */
.sec{padding:4.8rem 1.25rem}
.wrap{width:min(1160px,100%);margin:0 auto}
.sec-head{max-width:46rem;margin-bottom:2.2rem}
.sec-head h2{font-size:clamp(1.85rem,3.3vw,2.8rem);line-height:1.14;font-weight:500;letter-spacing:-.005em;margin-top:1.1rem}
.sec-head h2 em,h2 em,.band h2 em,.visit h2 em{font-style:normal;font-weight:500;color:var(--gold-ink)}
.sec-head .lead{margin-top:1.1rem;color:var(--muted);font-size:.98rem}
.eyebrow-dark{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid var(--line-gold);background:rgba(var(--accent-rgb),.10);
  color:var(--gold-ink);border-radius:999px;padding:.36rem .9rem;
  font-size:.58rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
}
.eyebrow-dark::before{content:"";width:1.1rem;height:1px;background:var(--gold)}

/* project stat strip */
.trust{background:var(--indigo-night);color:#fff;padding:0 1.25rem;position:relative;border-top:1px solid rgba(var(--hi-rgb),.25)}
.trust-wrap{width:min(1160px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(8,1fr)}
.pstat{padding:1.2rem .6rem;text-align:center;border-left:1px solid rgba(255,255,255,.08)}
.pstat:first-child{border-left:none}
.pstat .v{font-family:var(--display);font-size:1.21rem;color:var(--gold-bright);font-weight:500;line-height:1.15;overflow-wrap:anywhere}
.pstat .k{font-size:.54rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:.3rem}
@supports (grid-template-rows: subgrid){.pstat{display:grid;grid-row:span 2;grid-template-rows:subgrid}.pstat .v{align-self:end}.pstat .k{align-self:start}}
@media(max-width:1199px){.trust-wrap{grid-template-columns:repeat(4,1fr)}.pstat:nth-child(5){border-left:none}}
@media(max-width:619px){.trust-wrap{grid-template-columns:repeat(2,1fr)}.pstat{border-left:none;border-top:1px solid rgba(255,255,255,.08);padding:.85rem .5rem}.pstat:nth-child(-n+2){border-top:none}}

/* answer + facts */
.answer-band{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.answer-line{font-family:var(--display);font-size:clamp(1.33rem,2.4vw,1.79rem);line-height:1.32;font-weight:500}
.answer-line strong{font-weight:700;color:var(--indigo)}
.answer-more{margin-top:1.2rem;font-size:.95rem;color:var(--muted);line-height:1.75}
.answer-more b{color:var(--ink);font-weight:700}
.answer-cta{margin-top:1.4rem}
.facts-shell{background:var(--white);border:1px solid var(--line);border-radius:var(--r-outer);padding:.45rem;box-shadow:var(--shadow-card)}
.facts-core{border:1px solid var(--line);border-radius:var(--r-inner);overflow:hidden}
table.facts{width:100%;border-collapse:collapse;font-size:.86rem}
table.facts td{padding:.72rem 1.1rem;vertical-align:top}
table.facts tr+tr td{border-top:1px solid var(--line)}
table.facts td:first-child{font-weight:700;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);width:38%;padding-top:.85rem}
table.facts td:last-child{font-weight:600}
@media(max-width:900px){.answer-grid{grid-template-columns:1fr;gap:2rem}}

/* overview split */
.ov-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3.2rem;align-items:center}
.ov-img-shell{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r-outer);padding:.45rem;box-shadow:var(--shadow-card);transform:rotate(1deg)}
.ov-img-shell img{border-radius:var(--r-inner);width:100%;height:auto;object-fit:cover;aspect-ratio:4/3}
.imgcap{font-size:.6rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:.6rem;text-align:right;padding-right:.4rem}
.feature-list{display:grid;gap:.85rem;margin-top:1.6rem}
.feature{display:flex;gap:.85rem;align-items:flex-start}
.feature .fi{flex:none;width:2.1rem;height:2.1rem;border-radius:.6rem;background:rgba(var(--accent-rgb),.12);border:1px solid var(--line-gold);display:flex;align-items:center;justify-content:center;color:var(--gold-ink)}
.feature p{font-size:.9rem;color:var(--ink)}
.feature p b{font-weight:700}
.ebro-side{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:3rem;height:3rem;border-radius:999px;
  background:rgba(255,255,255,.96);color:var(--indigo);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.5);
  transition:all .4s var(--ease);
}
.ebro-side:hover{background:var(--gold);color:var(--indigo-night);transform:translateY(-50%) scale(1.06)}
.ebro-side.prev{left:.9rem}
.ebro-side.next{right:.9rem}
@media(max-width:900px){.ov-grid{grid-template-columns:1fr;gap:2rem}.ov-img-shell{transform:none}}
@media(max-width:640px){.ebro-side{width:2.6rem;height:2.6rem}.ebro-side.prev{left:.5rem}.ebro-side.next{right:.5rem}}

/* price table */
.price-band{background:var(--cream)}
.price-shell{background:var(--white);border:1px solid var(--line);border-radius:var(--r-outer);padding:.45rem;box-shadow:var(--shadow-card)}
.price-core{border:1px solid var(--line);border-radius:var(--r-inner);overflow:hidden}
.price-scroll{overflow-x:auto}
table.price{width:100%;border-collapse:collapse;min-width:640px}
table.price th{background:var(--indigo-deep);color:#fff;text-align:left;font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:.95rem 1.25rem}
table.price td{padding:1.05rem 1.25rem;font-size:.92rem;border-top:1px solid var(--line);vertical-align:middle}
table.price .cfg{font-family:var(--display);font-size:1.15rem;font-weight:500;display:flex;flex-direction:column;line-height:1.05;gap:.18rem}
table.price .cfg .c-sm{font-family:var(--text);font-size:.52rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
table.price .pr{font-weight:700;color:var(--gold-ink);white-space:nowrap}
table.price .act button{font-size:.7rem;font-weight:700;color:var(--indigo);border:1px solid var(--line-gold);padding:.5rem .95rem;border-radius:999px;white-space:nowrap;transition:all .4s var(--ease);animation:gpGlow 2.8s var(--ease) infinite}
@keyframes gpGlow{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}50%{box-shadow:0 0 0 7px rgba(var(--accent-rgb),.28)}}
table.price tbody tr:nth-child(2) .act button{animation-delay:.35s}
table.price tbody tr:nth-child(3) .act button{animation-delay:.7s}
table.price tbody tr:nth-child(4) .act button{animation-delay:1.05s}
table.price tbody tr:nth-child(5) .act button{animation-delay:1.4s}
table.price tbody tr:nth-child(6) .act button{animation-delay:1.75s}
table.price .act button:hover{animation-play-state:paused;background:var(--indigo-deep);color:#fff;border-color:var(--indigo-deep)}
@media (prefers-reduced-motion: reduce){table.price .act button{animation:none}}
.price-notes{display:flex;flex-wrap:wrap;gap:.8rem 1.8rem;margin-top:1.2rem;font-size:.68rem;color:var(--muted)}
.price-notes span{display:inline-flex;gap:.4rem;align-items:center}
.pay-line{margin-top:1.4rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;background:var(--white);border:1px solid var(--line);border-radius:.8rem;padding:.85rem 1.15rem}
.pay-line h3{font-family:var(--text);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.pay-line p{font-size:.82rem;color:var(--muted)}
.price-cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
@media(max-width:760px){
  .price-scroll table.price{min-width:0}
  .price-scroll table.price th:nth-child(2),.price-scroll table.price td:nth-child(2){display:none}
  .price-scroll table.price th{padding:.8rem .7rem;font-size:.58rem;letter-spacing:.1em}
  .price-scroll table.price td{padding:.9rem .7rem}
  .price-scroll table.price .pr{white-space:normal}
  .price-scroll table.price .act button{padding:.45rem .7rem;font-size:.66rem}
  table.price .cfg{font-size:1rem;gap:0}
  /* the SEO label around the configuration name ("Godrej MSR City 2 BHK Price") stays in
     the markup but leaves the narrow phone column to the name itself */
  table.price .cfg .c-sm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* location */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:start}
.loc-groups{display:grid;gap:1rem}
.loc-card{background:var(--white);border:1px solid var(--line);border-radius:1rem;padding:1.35rem 1.45rem;box-shadow:var(--shadow-soft)}
.loc-card h3{font-size:.66rem;font-weight:700;font-family:var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.loc-card ul{list-style:none;display:grid;gap:.5rem}
.loc-card li{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem}
.loc-card li b{font-weight:600}
.loc-card li span{color:var(--muted);white-space:nowrap;font-weight:700;font-size:.78rem}
.loc-map{background:var(--white);border:1px solid var(--line);border-radius:var(--r-outer);padding:.45rem;box-shadow:var(--shadow-card)}
.loc-map img{border-radius:var(--r-inner);width:100%;aspect-ratio:1600/1095;object-fit:cover}
.growth{margin-top:1.2rem;display:grid;gap:.7rem}
.growth p{display:flex;gap:.7rem;font-size:.88rem;align-items:flex-start}
.growth svg{flex:none;margin-top:.2rem;color:var(--gold)}
.map-embed{border-radius:var(--r-inner);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-soft);margin-top:1.4rem}
.map-embed iframe{display:block;width:100%;height:280px;border:0}
@media(max-width:900px){.loc-grid{grid-template-columns:1fr;gap:1.8rem}}

/* full-bleed band */
.band{position:relative;color:#fff;padding:6.5rem 1.25rem;isolation:isolate;text-align:center}
.band-bg{position:absolute;inset:0;z-index:-2}
.band-bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.band-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(var(--dark-rgb),.86),rgba(var(--dark-rgb),.55) 45%,rgba(var(--dark-rgb),.6))}
.band h2{font-size:clamp(1.9rem,3.7vw,3.2rem);font-weight:500;line-height:1.14}
.band h2 em{color:var(--gold-bright)}
.band p{max-width:38rem;margin:1.2rem auto 0;color:rgba(255,255,255,.88);font-size:.95rem}
.band .imgcap-l{position:absolute;bottom:1rem;right:1.4rem;font-size:.58rem;color:rgba(255,255,255,.45);letter-spacing:.1em;text-transform:uppercase}
.band .band-rule{width:4rem;height:1px;background:var(--gold-bright);margin:0 auto 1.4rem;opacity:.8}

/* construction / status */
.pos-note{margin-top:2rem;display:flex;gap:1rem;align-items:flex-start;background:rgba(var(--accent-rgb),.08);border:1px solid var(--line-gold);border-radius:1rem;padding:1.3rem 1.5rem;max-width:52rem}
.pos-note svg{flex:none;color:var(--gold-ink);margin-top:.15rem}
.pos-note p{font-size:.9rem}
.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.2rem}
.status-card{background:var(--white);border:1px solid var(--line);border-radius:1rem;padding:1.3rem 1.3rem;box-shadow:var(--shadow-soft)}
.status-card .n{font-family:var(--display);font-size:1.55rem;font-weight:500;color:var(--indigo);line-height:1.1}
.status-card .t{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.4rem}
@media(max-width:900px){.status-grid{grid-template-columns:repeat(2,1fr)}}

/* floor plans */
.fp-band{background:var(--cream)}
.fp-tabs{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:2rem}
.fp-hint{display:inline-flex;align-items:center;gap:.45rem;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:.7rem}
.fp-hint svg{color:var(--gold)}
.fp-tab{
  border:1px solid var(--line-gold);background:var(--white);color:var(--ink);
  border-radius:999px;padding:.7rem 1.3rem;font-size:.8rem;font-weight:700;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.12);
  transition:all .45s var(--ease);
  animation:gpGlow 2.8s var(--ease) infinite;
}
.fp-tab:nth-child(2){animation-delay:.3s}.fp-tab:nth-child(3){animation-delay:.6s}.fp-tab:nth-child(4){animation-delay:.9s}.fp-tab:nth-child(5){animation-delay:1.2s}.fp-tab:nth-child(6){animation-delay:1.5s}
.fp-tab:hover{transform:translateY(-2px);background:rgba(var(--accent-rgb),.14);animation-play-state:paused}
.fp-tab.on{animation:none;background:var(--indigo-deep);border-color:var(--indigo-deep);color:#fff;box-shadow:0 12px 30px -14px rgba(var(--shadow-rgb),.6)}
@media (prefers-reduced-motion: reduce){.fp-tab{animation:none}}
.fp-panel{display:none;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:center}
.fp-panel.on{display:grid;animation:fpin .7s var(--ease)}
@keyframes fpin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.fp-img-shell{background:var(--white);border:1px solid var(--line);border-radius:var(--r-outer);padding:.45rem;box-shadow:var(--shadow-card)}
.fp-img-shell img{border-radius:var(--r-inner);width:100%;height:auto;background:#fff;object-fit:contain;max-height:470px;padding:.9rem}
.fp-meta h3{font-size:1.7rem;font-weight:500;margin-bottom:.4rem;line-height:1.15}
.fp-meta .sub{color:var(--muted);font-size:.88rem;margin-bottom:1.3rem}
.fp-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1.5rem}
.fp-spec{background:var(--white);border:1px solid var(--line);border-radius:.8rem;padding:.85rem 1rem}
.fp-spec .v{font-family:var(--display);font-size:1.38rem;font-weight:500;color:var(--indigo);line-height:1.1}
.fp-spec .k{font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.3rem}
.fp-pts{display:grid;gap:.5rem;margin-bottom:1.6rem}
.fp-pts p{display:flex;gap:.6rem;font-size:.86rem;align-items:center}
.fp-pts svg{color:var(--gold);flex:none}
@media(max-width:900px){.fp-panel{grid-template-columns:1fr;gap:1.6rem}.fp-specs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){.fp-spec .v{font-size:1.2rem}}

/* half-visible tease: plan sharp on top, lower half frosted with the CTA */
.gate2{position:relative;overflow:hidden;border-radius:var(--r-inner);background:#fff}
.gate2 img{display:block;width:100%;height:auto}
.g2-ov{
  position:absolute;left:0;right:0;bottom:0;height:58%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  text-align:center;padding:1.4rem 1rem .9rem;
  backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(var(--paper2-rgb),.82));
  mask-image:linear-gradient(180deg,transparent 0,#000 22%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);
}
.gate-lock{width:2.9rem;height:2.9rem;border-radius:999px;background:var(--indigo-deep);color:var(--gold-bright);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -12px rgba(var(--shadow-rgb),.6)}
.gate-note{font-size:.7rem;font-weight:700;color:var(--indigo);max-width:16rem}

/* amenities */
.amen-hero{border-radius:var(--r-outer);overflow:hidden;position:relative;box-shadow:var(--shadow-card);margin-bottom:2.6rem;border:1px solid var(--line)}
.amen-hero img{width:100%;aspect-ratio:21/9;object-fit:cover}
.amen-hero .tag{position:absolute;left:1.4rem;bottom:1.2rem;background:rgba(var(--dark-rgb),.72);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(var(--hi-rgb),.3);border-radius:999px;padding:.5rem 1.1rem;font-size:.7rem;font-weight:700;letter-spacing:.08em}
.amen-hero .cap{position:absolute;right:1.2rem;bottom:1.2rem;font-size:.56rem;color:#fff;background:rgba(var(--dark-rgb),.6);padding:.3rem .65rem;border-radius:999px;letter-spacing:.08em;text-transform:uppercase}
.amen-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.amen-col{background:var(--white);border:1px solid var(--line);border-radius:1rem;padding:1.5rem 1.5rem 1.2rem;box-shadow:var(--shadow-soft)}
.amen-col h3{font-family:var(--text);font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:1rem;display:flex;gap:.5rem;align-items:center}
.amen-tags{display:flex;flex-wrap:wrap;gap:.45rem}
.amen-tags span{border:1px solid var(--line);background:var(--cream);border-radius:999px;padding:.38rem .8rem;font-size:.72rem;font-weight:600;color:var(--ink)}
@media(max-width:900px){.amen-cols{grid-template-columns:1fr}.amen-hero img{aspect-ratio:16/10}}

/* gallery */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gal-item{border-radius:.9rem;overflow:hidden;border:1px solid var(--line);position:relative;box-shadow:var(--shadow-soft)}
.gal-item img{aspect-ratio:4/2.9;object-fit:cover;width:100%;transition:transform 1.2s var(--ease)}
.gal-item:hover img{transform:scale(1.05)}
.gal-item span{position:absolute;left:.85rem;bottom:.7rem;color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.75)}
.gal-item .tag2{left:auto;right:.85rem;font-weight:600;letter-spacing:.04em;text-transform:none;opacity:.75;font-size:.56rem}
@media(max-width:760px){.gal-grid{grid-template-columns:repeat(2,1fr)}.gal-item .tag2{display:none}}

/* master plan */
.mp-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2.8rem;align-items:center}
.mp-shell{background:var(--white);border:1px solid var(--line);border-radius:var(--r-outer);padding:.45rem;box-shadow:var(--shadow-card)}
.mp-shell img{border-radius:var(--r-inner);width:100%;background:#fff;aspect-ratio:1600/1071;object-fit:cover}
.mp-pts{display:grid;gap:.8rem;margin-top:1.4rem}
.mp-pts p{display:flex;gap:.7rem;font-size:.9rem;align-items:flex-start}
.mp-pts svg{flex:none;margin-top:.2rem;color:var(--gold)}
@media(max-width:900px){.mp-grid{grid-template-columns:1fr;gap:1.8rem}}

/* specifications */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.4rem}
.spec-card{background:var(--white);border:1px solid var(--line);border-radius:1rem;padding:1.35rem 1.4rem;box-shadow:var(--shadow-soft)}
.spec-card h3{font-family:var(--text);font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:.7rem}
.spec-card p{font-size:.84rem;color:var(--muted)}
@media(max-width:900px){.spec-grid{grid-template-columns:1fr}}

/* developer */
.dev-band{background:var(--indigo-night);color:#fff;position:relative;overflow:hidden}
.dev-band::before{content:"";position:absolute;width:60rem;height:60rem;border-radius:99rem;background:radial-gradient(circle,rgba(var(--royal-rgb),.6),transparent 60%);top:-30rem;right:-20rem;pointer-events:none}
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;position:relative;z-index:1}
.dev-band .eyebrow-dark{border-color:rgba(var(--hi-rgb),.4);background:rgba(var(--hi-rgb),.08);color:var(--gold-bright)}
.dev-band h2{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.14;margin-top:1.1rem;color:#fff}
.dev-band h2 em{color:var(--gold-bright)}
.dev-copy p{font-size:.95rem;color:rgba(255,255,255,.72);margin-top:1.1rem}
.dev-copy p b{color:#fff}
.dev-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.dev-stat{background:rgba(255,255,255,.05);border:1px solid rgba(var(--hi-rgb),.22);border-radius:1rem;padding:1.4rem;box-shadow:inset 0 1px 1px rgba(255,255,255,.08)}
.dev-stat .n{font-family:var(--display);font-size:2.15rem;color:var(--gold-bright);font-weight:500;line-height:1}
.dev-stat .n span{color:rgba(255,255,255,.7);font-size:1.1rem}
.dev-stat .t{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:.5rem}
@media(max-width:900px){.dev-grid{grid-template-columns:1fr}}
@media(max-width:640px){.dev-stats{gap:.7rem}.dev-stat{padding:1.05rem 1rem}.dev-stat .n{font-size:1.55rem}.dev-stat .n span{font-size:.9rem}}

/* site visit band */
.visit{background:linear-gradient(160deg,var(--indigo-deep),var(--indigo-night));color:#fff;position:relative;overflow:hidden}
.visit::after{content:"";position:absolute;width:44rem;height:44rem;border-radius:99rem;background:radial-gradient(circle,rgba(var(--hi-rgb),.12),transparent 62%);bottom:-24rem;left:-14rem;pointer-events:none}
.visit-grid{display:grid;grid-template-columns:1fr .95fr;gap:3.4rem;align-items:center;position:relative;z-index:1}
.visit h2{font-size:clamp(1.85rem,3.4vw,2.85rem);font-weight:500;line-height:1.14}
.visit .vp{color:rgba(255,255,255,.72);margin-top:1.2rem;font-size:.95rem;max-width:30rem}
.visit-usps{display:grid;gap:.75rem;margin-top:1.8rem}
.visit-usps p{display:flex;gap:.65rem;align-items:center;font-size:.88rem;color:rgba(255,255,255,.88)}
.visit-usps svg{color:var(--gold-bright);flex:none}
.visit-alt{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
@media(max-width:900px){.visit-grid{grid-template-columns:1fr;gap:2.2rem}}

/* FAQ */
.faq-list{max-width:52rem}
details.faq{background:var(--white);border:1px solid var(--line);border-radius:.9rem;margin-bottom:.8rem;overflow:hidden;box-shadow:var(--shadow-soft);transition:box-shadow .5s var(--ease)}
details.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.4rem;cursor:pointer;font-weight:700;font-size:.95rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary .pm{flex:none;width:1.8rem;height:1.8rem;border-radius:999px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--indigo);transition:transform .5s var(--ease),background .5s var(--ease);position:relative}
details.faq[open] summary .pm{transform:rotate(45deg);background:var(--indigo-deep);color:#fff;border-color:var(--indigo-deep)}
details.faq summary .pm::before,details.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)}
details.faq summary .pm::before{width:.8rem;height:2px}
details.faq summary .pm::after{width:2px;height:.8rem}
details.faq summary:hover .pm{border-color:var(--indigo)}
.faq-hint{margin:.7rem 0 0}
details.faq .fa{padding:0 1.4rem 1.3rem;font-size:.9rem;color:var(--muted)}

/* footer */
footer{background:var(--indigo-night);color:rgba(255,255,255,.65);padding:4rem 1.25rem 8rem;font-size:.8rem;border-top:1px solid rgba(var(--hi-rgb),.2)}
.foot-wrap{width:min(1160px,100%);margin:0 auto}
.foot-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;padding-bottom:2.2rem;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand .l1{font-family:var(--mark);font-size:1.05rem;color:var(--gold-bright);letter-spacing:.2em;font-weight:700}
.foot-brand .l1 em{font-style:normal;color:#fff;font-weight:400}
.foot-brand .l2{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-top:.35rem}
.foot-brand p{margin-top:1.1rem;max-width:30rem;line-height:1.7}
footer h3{color:#fff;font-family:var(--text);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.9rem;overflow-wrap:anywhere}
.foot-rera{font-size:.78rem;line-height:1.8}
.foot-rera b{color:#fff;word-break:break-all}
.foot-rera a{color:var(--gold-bright);font-weight:700}
.disclaimer{margin-top:2rem;font-size:.68rem;line-height:1.75;color:rgba(255,255,255,.66)}
.copyline{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.68rem;color:rgba(255,255,255,.66)}
/* "Last updated" line under the disclaimer (24 Sep 2026): bump its <time> and the WebPage dateModified in the JSON-LD on every content change */
.updated{margin-top:1.2rem;font-size:.68rem;color:rgba(255,255,255,.66)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr}}

/* phone bar (the house template bar): flush blocks, three equal thirds with an icon each.
   Visible from the first paint (no JS needed); app.js adds .hide only while the visitor is typing
   in a form, when the on-screen keyboard is up, and removes it the moment typing stops. */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  padding:0 0 env(safe-area-inset-bottom);
  background:var(--indigo-night);
  display:flex;gap:0;
  box-shadow:0 -12px 30px -14px rgba(0,0,0,.5);
  transform:translateY(0);
  transition:transform .35s var(--ease);
}
.sticky-bar.hide{transform:translateY(110%)}
.sticky-bar a,.sticky-bar button{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:.45rem;border-radius:0;padding:1.1rem .4rem;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.sb-call{background:var(--indigo-night);color:#fff}
.sb-wa{background:#188246;color:#fff}
.sb-cta{background:linear-gradient(90deg,var(--gold-soft) 0%,var(--gold) 50%,var(--gold-soft) 100%);color:var(--indigo-night)}
.sticky-bar svg{width:15px;height:15px;flex:none}
@media(min-width:901px){.sticky-bar{display:none}footer{padding-bottom:6rem}}

/* side enquire tab (desktop) */
.side-tab{
  position:fixed;right:0;top:50%;z-index:56;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:var(--indigo-night);
  font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  padding:1.1rem .68rem;border-radius:0 .6rem .6rem 0;
  box-shadow:-8px 8px 30px -12px rgba(var(--accent-rgb),.7);
  transition:transform .45s var(--ease);
  display:none;
}
.side-tab:hover{transform:translateY(-50%) rotate(180deg) translateY(-3px)}
@media(min-width:901px){.side-tab{display:block}}

/* WA float (desktop, bottom-left) */
.wa-float{position:fixed;left:1.4rem;bottom:1.4rem;z-index:54;width:3.4rem;height:3.4rem;border-radius:999px;background:#1ea952;color:#fff;display:none;align-items:center;justify-content:center;box-shadow:0 18px 44px -14px rgba(30,169,82,.7);transition:transform .45s var(--ease)}
.wa-float:hover{transform:translateY(-3px) scale(1.05)}
@media(min-width:901px){.wa-float.enabled{display:flex}}

/* lightbox */
.zoomable{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:75;display:none;align-items:center;justify-content:center;padding:1.2rem;background:rgba(var(--dark-rgb),.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lb.open{display:flex}
.lb img{max-width:min(1150px,94vw);max-height:80vh;object-fit:contain;border-radius:.6rem;background:#fff;box-shadow:0 50px 130px -40px rgba(0,0,0,.9)}
.lb-cap{position:absolute;bottom:1.3rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.88);font-size:.76rem;font-weight:700;background:rgba(var(--dark-rgb),.75);border:1px solid rgba(var(--hi-rgb),.25);border-radius:999px;padding:.5rem 1.15rem;max-width:88vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-x{position:absolute;top:1.1rem;right:1.1rem;width:2.6rem;height:2.6rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .4s var(--ease)}
.lb-x:hover{background:rgba(255,255,255,.25)}

/* modal */
.modal{position:fixed;inset:0;z-index:70;display:none}
.modal.open{display:block}
.modal-veil{position:absolute;inset:0;background:rgba(var(--dark-rgb),.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .5s var(--ease)}
.modal.open .modal-veil{opacity:1}
.modal-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.96);opacity:0;
  width:min(460px,calc(100% - 2rem));
  background:var(--paper);border-radius:1.2rem;
  box-shadow:0 60px 140px -40px rgba(var(--dark-rgb),.9);
  transition:transform .55s var(--ease),opacity .55s var(--ease);
  overflow:hidden;border-top:3px solid var(--gold);
}
.modal.open .modal-card{transform:translate(-50%,-50%) scale(1);opacity:1}
@media(max-width:640px){
  /* a centred popup on phones too (it used to rise from the bottom); it scrolls inside
     itself when the keyboard or a short screen leaves less room than the form needs */
  .modal-card{width:calc(100% - 1.6rem);max-width:26rem;max-height:calc(100dvh - 2rem);overflow-y:auto;border-radius:1.1rem}
  .modal-head{padding:1.25rem 1.2rem .3rem}
  .modal-head h3{font-size:1.25rem}
  .modal-body{padding:.8rem 1.2rem 1.2rem}
  .succ{padding:2rem 1.2rem}
}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.6rem .4rem}
.modal-head h3{font-size:1.4rem;font-weight:500;line-height:1.15}
.modal-head p{font-size:.76rem;color:var(--muted);margin-top:.3rem}
.modal-x{flex:none;width:2.1rem;height:2.1rem;border-radius:999px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .4s var(--ease)}
.modal-x:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.modal-body{padding:1rem 1.6rem 1.6rem}
.succ{padding:2.4rem 1.7rem;text-align:center;display:none}
.succ .big{width:3.6rem;height:3.6rem;margin:0 auto 1.1rem;border-radius:999px;background:rgba(var(--accent-rgb),.12);border:1px solid var(--line-gold);display:flex;align-items:center;justify-content:center;color:var(--gold-ink)}
.succ h3{font-size:1.45rem;font-weight:500}
.succ p{font-size:.84rem;color:var(--muted);margin:.6rem 0 1.4rem}
.succ .btn{width:100%;margin-bottom:.6rem}

/* ============ virtual tour ============ */
.tour{background:var(--indigo-night);color:#fff;position:relative;overflow:hidden}
.tour::before{content:"";position:absolute;width:52rem;height:52rem;border-radius:99rem;background:radial-gradient(circle,rgba(var(--royal-rgb),.55),transparent 60%);top:-26rem;left:-18rem;pointer-events:none}
.tour .wrap{position:relative;z-index:1}
.tour .eyebrow-dark{border-color:rgba(var(--hi-rgb),.4);background:rgba(var(--hi-rgb),.08);color:var(--gold-bright)}
.tour .sec-head h2 em{color:var(--gold-bright)}
.tour .sec-head .lead{color:rgba(255,255,255,.74)}
.tour-stage{position:relative;aspect-ratio:16/9;border-radius:var(--r-outer);overflow:hidden;isolation:isolate;background:#000;border:1px solid rgba(255,255,255,.12);box-shadow:0 50px 90px -50px rgba(0,0,0,.85)}
.tour-stage picture{position:absolute;inset:0;display:block;z-index:0}
.tour-stage img{width:100%;height:100%;object-fit:cover;object-position:center 62%;transition:transform 1.4s var(--ease)}
.tour-stage[data-state=idle]:hover img{transform:scale(1.035)}
.tour.teaser .tour-stage{cursor:pointer}
.tour.teaser .tour-stage img{object-position:center 45%}
.tour-veil{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(var(--dark-rgb),.10),rgba(var(--dark-rgb),.16) 50%,rgba(var(--dark-rgb),.80));pointer-events:none}
/* the film itself, and the shield that keeps every click and hover away from it.
   The player is 30% taller than the stage and pulled up by half of that: the 16:9 film
   still fits the stage edge to edge, but the player's own title bar (top) and its
   "more videos" strip and logo (bottom) land in the letterbox bands, outside the frame. */
.tour-host{position:absolute;left:0;right:0;top:-15%;bottom:-15%;z-index:1;opacity:0;background:#000;transition:opacity .6s var(--ease)}
.tour-host iframe,.tour-host div{display:block;width:100%;height:100%;border:0}
.tour-shield{position:absolute;inset:0;z-index:2;display:none;cursor:pointer}
/* armed: a cued player waits under the poster and the poster lets the tap through to it */
.tour-stage.armed[data-state=idle] picture,.tour-stage.armed[data-state=idle] .tour-veil,.tour-stage.armed[data-state=idle] .tour-play,.tour-stage.armed[data-state=idle] .tour-meta{pointer-events:none}
.tour-stage.armed[data-state=idle]{cursor:pointer}
.tour-stage.active .tour-shield{display:block}
.tour-stage.active:not([data-state=loading]) .tour-host{opacity:1}
.tour-stage.active:not([data-state=loading]) picture,.tour-stage.active:not([data-state=loading]) .tour-veil,.tour-stage.active .tour-meta{display:none}
/* the opening play button doubles as the loading indicator */
.tour-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:6.4rem;height:6.4rem;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;color:var(--indigo-night);z-index:3}
.tour-stage.active:not([data-state=loading]) .tour-play{display:none}
.tour-play .ring{position:absolute;inset:0;border-radius:99rem;border:1px solid rgba(var(--hi-rgb),.6);animation:tourRing 2.8s var(--ease) infinite}
.tour-play .ring.r2{animation-delay:1s}
@keyframes tourRing{0%{transform:scale(.72);opacity:.95}100%{transform:scale(1.85);opacity:0}}
.tour-play .disc{position:relative;width:4.8rem;height:4.8rem;border-radius:99rem;background:linear-gradient(135deg,var(--gold-soft),var(--gold));display:grid;place-items:center;box-shadow:0 22px 48px -14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .5s var(--ease)}
.tour-play:hover .disc,.tour-play:focus-visible .disc{transform:scale(1.08)}
.tour-play svg{margin-left:.3rem}
.tour-stage[data-state=loading] .tour-play{pointer-events:none}
.tour-stage[data-state=loading] .tour-play .ring{animation:none;opacity:0}
.tour-stage[data-state=loading] .tour-play .disc svg{opacity:.35}
.tour-stage[data-state=loading] .tour-play .disc::after{content:"";position:absolute;inset:-.55rem;border-radius:99rem;border:2px solid rgba(var(--hi-rgb),.25);border-top-color:var(--gold-bright);animation:tourSpin .9s linear infinite}
@keyframes tourSpin{to{transform:rotate(360deg)}}
.tour-meta{position:absolute;left:1.2rem;right:1.2rem;bottom:1.15rem;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;pointer-events:none}
.tour-tag{display:inline-flex;align-items:center;gap:.5rem;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(var(--dark-rgb),.55);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:.55rem .95rem}
.tour-tag svg{color:var(--gold-bright)}
.tour-cap{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
/* paused, gated and finished states sit on a heavy blur so none of the player's own
   chrome (title, end screen, suggested videos) is ever legible underneath */
.tour-dim{position:absolute;inset:0;z-index:3;display:none;align-items:center;justify-content:center;text-align:center;padding:1.5rem 1.5rem 5rem;background:rgba(var(--dark-rgb),.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.tour-stage[data-state=paused] .tour-dim,.tour-stage[data-state=locked] .tour-dim,.tour-stage[data-state=ended] .tour-dim{display:flex}
.tour-stage[data-state=paused] .tour-dim{cursor:pointer}
.td{display:none;max-width:32rem}
.tour-stage[data-state=paused] .td-paused,.tour-stage[data-state=locked] .td-locked,.tour-stage[data-state=ended] .td-ended{display:block}
.td-ic{width:4.2rem;height:4.2rem;border-radius:99rem;margin:0 auto 1.1rem;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:var(--indigo-night);box-shadow:0 22px 48px -14px rgba(0,0,0,.7)}
.td-ic svg{margin-left:.15rem}
.td h3{font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:500;color:#fff;line-height:1.15}
.td p{color:rgba(255,255,255,.78);font-size:.92rem;margin-top:.6rem}
.td .btn{margin-top:1.2rem}
.tp-loading,.tour-stage.stalled .tp-paused{display:none}
.tour-stage.stalled .tp-loading{display:inline}
.tour-stage.stalled .td-ic svg{animation:tourSpin 1.1s linear infinite;transform-origin:center}
.td-row{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.td-row .btn{margin-top:1.2rem}
/* our own control bar, the only controls the visitor ever sees */
.tour-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;display:none;align-items:center;gap:.8rem;padding:2rem 1.1rem .9rem;background:linear-gradient(180deg,rgba(var(--dark-rgb),0),rgba(var(--dark-rgb),.88));color:#fff}
.tour-stage.active:not([data-state=loading]) .tour-bar{display:flex}
.tb-play,.tb-mute{flex:none;width:2.4rem;height:2.4rem;border-radius:99rem;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .3s var(--ease)}
.tb-play:hover,.tb-mute:hover{background:rgba(255,255,255,.22)}
.tb-play svg,.tb-mute svg{display:none}
.tour-stage:not([data-state=playing]) .tb-play .i-play,.tour-stage[data-state=playing] .tb-play .i-pause{display:block}
.tour-stage:not(.muted) .tb-mute .i-vol,.tour-stage.muted .tb-mute .i-mute{display:block}
.tb-play .i-play{margin-left:.15rem}
.tb-time{font-size:.74rem;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85);white-space:nowrap}
.tb-track{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.22);cursor:pointer;position:relative}
.tb-track::before{content:"";position:absolute;left:0;right:0;top:-.7rem;bottom:-.7rem}
.tb-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--gold-soft),var(--gold));transition:width .25s linear}
.tour-unmute{position:absolute;top:1rem;left:1rem;z-index:4;display:none;align-items:center;gap:.45rem;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo-night);background:linear-gradient(135deg,var(--gold-soft),var(--gold));border:0;border-radius:999px;padding:.6rem 1rem;cursor:pointer;box-shadow:0 14px 30px -12px rgba(0,0,0,.7)}
.tour-stage.muted[data-state=playing] .tour-unmute{display:inline-flex}
.tour-pts{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:1.4rem}
.tour-pt{display:flex;gap:.7rem;align-items:flex-start;margin:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:1rem;padding:1rem 1.15rem;font-size:.86rem;color:rgba(255,255,255,.86)}
.tour-pt svg{flex:none;color:var(--gold-bright);margin-top:.15rem}
@media (prefers-reduced-motion: reduce){.tour-play .ring{animation:none;opacity:.5}}
@media(max-width:760px){
  .tour-play{width:5.4rem;height:5.4rem}.tour-play .disc{width:4rem;height:4rem}
  .tour-pts{grid-template-columns:1fr;gap:.6rem}
  .tour-meta{flex-direction:column;align-items:flex-start;gap:.5rem}
  .tour-dim{padding:1rem 1rem 4.2rem}
  .td p{font-size:.84rem}
  .td-ic{width:3.4rem;height:3.4rem;margin-bottom:.8rem}
  .tour-bar{gap:.6rem;padding:1.6rem .8rem .7rem}
  .tb-time{font-size:.68rem}
  /* a 16:9 stage is only ~190px tall on a phone: the gate and end cards need more room,
     and while they are up the film is covered anyway */
  .tour-stage[data-state=locked],.tour-stage[data-state=ended]{aspect-ratio:auto;min-height:21rem}
}

/* ============ brochure ============ */
.bro{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3.6rem;align-items:center}
.bro-copy{max-width:none;margin-bottom:0}
.bro-pts{display:grid;gap:.7rem;margin:1.6rem 0 1.9rem}
.bro-pts p{display:flex;gap:.65rem;align-items:flex-start;font-size:.9rem;margin:0}
.bro-pts svg{flex:none;color:var(--gold-ink);margin-top:.2rem}
.bro-note{font-size:.74rem;color:var(--muted);margin-top:.9rem}
.bro-art{position:relative;border-radius:var(--r-outer);overflow:hidden;aspect-ratio:1/1;isolation:isolate;border:1px solid var(--line);box-shadow:var(--shadow-card);background:var(--indigo-deep)}
.bro-bg{position:absolute;inset:0;z-index:-1}
.bro-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
.bro-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(var(--dark-rgb),.30),rgba(var(--dark-rgb),.66))}
.bro-book{position:absolute;margin:0;border-radius:.45rem;overflow:hidden;background:#fff;box-shadow:0 34px 60px -22px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.22);transition:transform .8s var(--ease)}
.bro-book img{display:block;width:100%;height:auto}
/* landscape pages (7:5), so the books sit wider and lower than portrait covers would */
.bro-book-1{width:58%;left:5%;top:11%;transform:rotate(-5deg);z-index:2}
.bro-book-2{width:64%;right:4%;bottom:9%;transform:rotate(5deg);z-index:1}
.bro-art:hover .bro-book-1{transform:rotate(-3deg) translateY(-6px)}
.bro-art:hover .bro-book-2{transform:rotate(4deg) translateY(-4px)}
.bro-badge{position:absolute;left:1.1rem;bottom:1.1rem;z-index:3;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(var(--dark-rgb),.6);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:.55rem .95rem}
@media(max-width:900px){.bro-grid{grid-template-columns:1fr;gap:2.2rem}.bro-art{max-width:34rem;margin:0 auto;width:100%}}
@media(max-width:760px){.bro-art{aspect-ratio:1/1.05}.bro-book-1{width:62%;left:4%;top:9%}.bro-book-2{width:68%;right:3%;bottom:8%}}

/* ============ small phones: nothing wraps, nothing overlaps ============ */
/* 320 to 360 px screens (older iPhones, compact Androids): tighter price rows and spec
   tiles, one-line sticky bar buttons, and a smaller play button on the walkthrough poster so
   the tag underneath never touches it. The poster itself runs 4:3 on phones in teaser mode. */
@media(max-width:640px){.tour.teaser .tour-stage{aspect-ratio:4/3}}
@media(max-width:420px){
  .tour-play{width:4.6rem;height:4.6rem}.tour-play .disc{width:3.4rem;height:3.4rem}
  .tour-meta{left:.7rem;right:.7rem;bottom:.7rem}
  .tour-tag{font-size:.52rem;padding:.4rem .7rem;letter-spacing:.1em}
  .tour-cap{display:none}
}
@media(max-width:360px){
  .pstat .v{font-size:1.05rem}
  .price-scroll table.price th{padding:.7rem .45rem;font-size:.5rem;letter-spacing:.06em}
  .price-scroll table.price td{padding:.75rem .45rem;font-size:.82rem}
  .price-scroll table.price .cfg{font-size:.92rem}
  .price-scroll table.price .pr{font-size:.8rem}
  .price-scroll table.price .act button{padding:.4rem .55rem;font-size:.6rem}
  .fp-specs{gap:.45rem}
  .fp-spec{padding:.7rem .45rem}
  .fp-spec .v{font-size:1.02rem}
  .sticky-bar a,.sticky-bar button{padding:1.05rem .3rem;font-size:.66rem;letter-spacing:.04em;gap:.35rem;white-space:nowrap}
  .sticky-bar svg{width:13px;height:13px;flex:none}
}
/* the phone bar's three thirds share one type size (the house template's), so the price button's label
   and icon fit its third on 375 px phones; on the narrowest phones its icon steps aside */
@media(max-width:480px){.sticky-bar a,.sticky-bar button{padding:1.05rem .25rem;font-size:.64rem;letter-spacing:.07em;gap:.38rem}.sticky-bar svg{width:13px;height:13px}}
@media(max-width:374px){.sticky-bar a,.sticky-bar button{font-size:.64rem;letter-spacing:.03em;gap:.3rem}.sticky-bar .sb-cta svg{display:none}}

/* ============ page additions (ported from the Godrej MSR page, retuned for Shriram) ============ */
/* headings in Newsreader at its one shipped weight (500): no synthetic bold, a little tightening;
   figures and labels stay in DM Sans, which carries the weight */
h1,h2,h3,.serif{font-weight:500;letter-spacing:-.005em;font-synthesis:none}
.hero h1{font-weight:500;letter-spacing:-.012em}
.hero h1 .gold{font-weight:500}
.sec-head h2,.band h2,.visit h2,.dev-band h2{font-weight:500;letter-spacing:-.012em}
.sec-head h2 em,h2 em,.band h2 em,.visit h2 em{font-weight:500}
.answer-line{font-weight:400;letter-spacing:0}
.answer-line strong{font-weight:700}
.pstat .v,.status-card .n,.dev-stat .n,.hero-price .hp-val,table.price .cfg{font-family:var(--text);font-weight:700;letter-spacing:-.01em}
.form-core h3,.form-core .form-title,.modal-head h3,.succ h3,.td h3{font-weight:500}
.nav-logo .l1{font-weight:800;letter-spacing:.16em}
.nav-logo .l1 em{font-weight:400}
.foot-brand .l1{font-weight:800;letter-spacing:.16em}
.foot-brand .l1 em{font-weight:400}

/* the site visit band is dark: its heading accent needs the light tint */
.visit h2 em{color:var(--gold-bright)}

/* pre-launch band: the township aerial with a ticket card on it */
.pl-art{position:relative;border-radius:var(--r-outer);overflow:hidden;aspect-ratio:1/1;isolation:isolate;border:1px solid var(--line);box-shadow:var(--shadow-card);background:var(--indigo-deep)}
.pl-art picture,.pl-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pl-art::after{content:"";position:absolute;inset:0;background:linear-gradient(170deg,rgba(var(--dark-rgb),.08),rgba(var(--dark-rgb),.62));z-index:0}
.pl-ticket{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-2deg);z-index:1;width:min(78%,21rem);background:var(--paper);border-radius:.9rem;padding:1.35rem 1.4rem 1.2rem;box-shadow:0 40px 80px -30px rgba(0,0,0,.75);border-top:3px solid var(--gold)}
.pl-ticket .k{font-size:.58rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
.pl-ticket .t{font-family:var(--display);font-size:1.5rem;font-weight:500;line-height:1.12;margin:.35rem 0 .7rem;color:var(--ink)}
.pl-ticket ul{list-style:none;display:grid;gap:.4rem;margin:0;padding:0}
.pl-ticket li{display:flex;justify-content:space-between;gap:.8rem;font-size:.8rem;border-top:1px dashed var(--line);padding-top:.4rem}
.pl-ticket li span{color:var(--muted)}
.pl-ticket li b{font-weight:700;white-space:nowrap}
.pl-art .bro-badge{z-index:2}
@media(max-width:900px){.pl-art{max-width:34rem;margin:0 auto;width:100%}}
@media(max-width:420px){.pl-ticket{width:86%;padding:1.1rem 1.1rem 1rem}.pl-ticket .t{font-size:1.25rem}}

/* the home types, as cards (unit plans are released at launch) */
.typo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:62rem}
.typo-card{background:var(--white);border:1px solid var(--line);border-radius:1rem;padding:1.3rem 1.2rem 1.2rem;box-shadow:var(--shadow-soft);display:flex;flex-direction:column}
.typo-card .k{font-size:.58rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.typo-card h3{font-size:1.4rem;line-height:1.1;margin:.4rem 0 .2rem}
.typo-card .sz{font-family:var(--text);font-size:1.05rem;font-weight:700;color:var(--indigo)}
.typo-card .sz small{font-family:var(--text);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-left:.25rem}
.typo-card p{margin:0}
.typo-card .d{font-size:.84rem;color:var(--muted);margin:.7rem 0 1rem;flex:1}
.typo-card .pr{font-size:.8rem;font-weight:800;color:var(--gold-ink);margin-bottom:.8rem}
.typo-card .btn{width:100%;padding:.8rem .9rem;font-size:.78rem}
@media(max-width:760px){.typo-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}.typo-card{padding:1.1rem 1rem 1rem}.typo-card h3{font-size:1.2rem}}
@media(max-width:420px){.typo-grid{grid-template-columns:1fr}}
.typo-note{margin-top:1.4rem;display:flex;gap:.8rem;align-items:flex-start;background:rgba(var(--accent-rgb),.08);border:1px solid var(--line-gold);border-radius:1rem;padding:1.1rem 1.3rem;max-width:52rem}
.typo-note svg{flex:none;color:var(--gold-ink);margin-top:.15rem}
.typo-note p{font-size:.88rem}

/* location without a developer map: the Google map takes the right column at full height */
.map-embed.tall{margin-top:0}
.map-embed.tall iframe{height:430px}
@media(max-width:900px){.map-embed.tall iframe{height:320px}}

/* an odd gallery count leaves one tile alone in the two-column phone grid: let it run full width */
@media(max-width:760px){.gal-grid .gal-item:last-child:nth-child(odd){grid-column:1/-1}.gal-grid .gal-item:last-child:nth-child(odd) img{aspect-ratio:16/9}}

/* phones: status figures ("20 Mar 2026", "Pre-Launch") on one line inside a half-width card */
@media(max-width:640px){.status-card{padding:1.05rem 1rem}.status-card .n{font-size:1.2rem}}
/* 320 px phones: long button labels stay on one line */
@media(max-width:340px){.btn{font-size:.76rem;letter-spacing:0;gap:.45rem;padding-left:.9rem;padding-right:.7rem}.btn .ic{width:1.6rem;height:1.6rem}}

/* ============ photo backgrounds for the developer and site-visit bands ============ */
/* A dark gradient keeps the text and the form readable: heaviest behind the copy on the left,
   lighter towards the right, and even on phones where the columns stack. */
.dev-band,.visit{isolation:isolate}
.sec-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.sec-bg img{width:100%;height:100%;object-fit:cover}
.sec-bg::after{content:"";position:absolute;inset:0}
.sec-bg-dev img{object-position:center 55%}
.sec-bg-dev::after{background:linear-gradient(90deg,rgba(var(--dark-rgb),.94) 0%,rgba(var(--dark-rgb),.86) 42%,rgba(var(--dark-rgb),.62) 100%)}
.sec-bg-visit img{object-position:50% 55%}
.sec-bg-visit::after{background:linear-gradient(90deg,rgba(var(--dark-rgb),.93) 0%,rgba(var(--dark-rgb),.78) 48%,rgba(var(--dark-rgb),.55) 100%)}
.sec-bg-cap{position:absolute;right:3.4rem;bottom:.9rem;z-index:1;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.66);pointer-events:none}
@media(max-width:900px){
  .sec-bg-dev::after,.sec-bg-visit::after{background:linear-gradient(180deg,rgba(var(--dark-rgb),.92) 0%,rgba(var(--dark-rgb),.84) 55%,rgba(var(--dark-rgb),.9) 100%)}
  .sec-bg-cap{bottom:.6rem;right:.9rem}
}

/* readable labels (house template): nothing under about 10px on phones and tablets. This block sits
   before the phone QA block on purpose, so that block's larger phone sizes still win there. */
@media(max-width:980px){
  .eyebrow,.eyebrow-dark,.tour-tag,.pstat .k,.hero-price .hp-lbl,.hero-note,.fp-spec .k,.amen-hero .cap,.sec-bg-cap,.imgcap,.band .imgcap-l,.fld label,.gal-item span,.gal-item .tag2,.status-card .t,.dev-stat .t,.fp-hint,.foot-brand .l2,.tour-cap,.nav-logo .l2,.typo-card .k,.pl-ticket .k,.typo-card .sz small{font-size:.64rem}
  .eyebrow,.hero-price .hp-lbl{letter-spacing:.12em}
  .consent,.price-notes,.disclaimer,.gate-note,.bro-note{font-size:.75rem;line-height:1.55}
  .price-scroll table.price th,.bro-badge{font-size:.64rem}
}

/* ============ phone QA fixes (23 Sep 2026) ============ */
/* Section rhythm and modal sizes on phones. These rules existed earlier in the file, before the
   base rules they meant to override, so they never applied; restated here, after everything. */
@media(max-width:640px){
  .sec{padding-top:2.6rem;padding-bottom:2.6rem}
  .sec-head{margin-bottom:1.4rem}
  .sec-head .lead{font-size:.9rem}
  .band{padding:3.5rem 1.1rem}
  /* the band's text crosses the white umbrellas and the deck on a phone: a firmer veil keeps it AA */
  .band-veil{background:linear-gradient(0deg,rgba(var(--dark-rgb),.86),rgba(var(--dark-rgb),.5) 45%,rgba(var(--dark-rgb),.55))}
  .visit-grid{gap:1.6rem}.answer-grid{gap:1.5rem}.ov-grid{gap:1.5rem}.loc-grid{gap:1.4rem}.gal-grid{gap:.7rem}
  .modal-head{padding:1.25rem 1.2rem .3rem}
  .modal-head h3{font-size:1.25rem;text-wrap:balance}
  .modal-body{padding:.8rem 1.2rem 1.2rem}
  .succ{padding:2rem 1.2rem}
}
@media(max-width:420px){.sec{padding-left:1rem;padding-right:1rem}}
/* iOS Safari zooms the page into any field under 16px; keep every form control at 16px on touch */
@media(max-width:900px),(pointer:coarse){.fld input,.fld select,.telwrap select.cc{font-size:16px}}
@media(max-width:420px){.telwrap select.cc{max-width:5.9rem;padding:0 1.15rem 0 .55rem}.telwrap input{padding-left:.75rem;padding-right:.6rem}}
/* the popup scrolls inside itself on short (landscape) screens, so its close button and submit stay reachable */
@media(max-height:640px){.modal-card{max-height:calc(100dvh - 1.5rem);overflow-y:auto;overscroll-behavior:contain}}
/* landscape phones: the nav slides away once the banner has scrolled out, the phone bar stays */
@media(max-width:900px) and (max-height:500px){.nav{transition:transform .5s var(--ease)}.nav.scrolled{transform:translateY(-130%)}}
/* readable small print and labels, and 44px touch targets, on phones */
@media(max-width:640px){
  .consent{font-size:.75rem}.consent a{white-space:nowrap}
  .fld label{font-size:.68rem}
  .hero .eyebrow,.tour-tag{font-size:.64rem;letter-spacing:.12em}
  .pstat .k{font-size:.64rem;letter-spacing:.1em}
  .price-scroll table.price th{font-size:.64rem;letter-spacing:.06em}
  .eyebrow-dark{font-size:.64rem}
  .fp-spec .k,.status-card .t,.fp-hint{font-size:.68rem;letter-spacing:.08em}
  #gallery .imgcap{font-size:.72rem;letter-spacing:.02em;text-transform:none}
  .foot-brand .l2{letter-spacing:.14em}
  .price-scroll table.price .act button{padding:.7rem .8rem;font-size:.75rem;min-height:2.5rem}
  .modal-x{width:2.75rem;height:2.75rem}
  .form-alt button{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .5rem}
  .nav-cta{min-height:2.75rem}
  #ovCap{min-height:3.3em}
  /* the amenity carousel's disclaimer moves to a chip at the top right, clear of the long tags */
  .amen-hero .cap{top:.75rem;right:.75rem;bottom:auto;font-size:.62rem}
  /* gated plan overlays: the lock and the button keep their size */
  .g2-ov{height:auto;min-height:58%;padding:1.1rem .8rem .75rem;gap:.45rem}.g2-ov>*{flex-shrink:0}.g2-ov .gate-lock{width:2.3rem;height:2.3rem}
  /* floor plan facts: the two areas side by side, the price across */
  .fp-specs{grid-template-columns:repeat(2,minmax(0,1fr))}.fp-spec:last-child{grid-column:1/-1}
  details.faq summary{text-wrap:pretty}
}
/* gallery captions get a soft scrim on phones, so white text never sits on a pale floor */
@media(max-width:760px){.gal-item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent);pointer-events:none;z-index:1}.gal-item span{z-index:2}}
.fp-pts p{align-items:flex-start}.fp-pts svg{margin-top:.27rem}
.imgcap-note{text-transform:none;letter-spacing:0;font-size:.72rem}
.dev-band .dev-copy p{color:rgba(255,255,255,.74)}
.gal-item img[src*="model-"]{object-position:100% 100%}
h2{text-wrap:balance}
p,li{text-wrap:pretty}   /* no one-word last lines in body copy */
@media(max-width:420px){.pl-art{aspect-ratio:1/1.15}.pl-ticket{top:45%}}

/* ============ house template v10 port (23 Sep 2026) ============ */
/* phones and small tablets held sideways: the desktop banner composition fitted to a short screen,
   the landscape photo covering the banner and the text on its dark left (this page's own desktop
   photo position and veil), the form right after it */
@media(max-width:980px) and (orientation:landscape){
  .hero-banner{display:flex;align-items:center;min-height:100vh;min-height:100svh;padding:5.1rem 1.25rem 4rem}
  .hero-bg{left:30%}
  .hero-bg img{top:0;height:100%;-webkit-mask-image:none;mask-image:none;object-fit:cover;object-position:40% 50%}
  .hero-veil{top:0;height:auto;background:
    linear-gradient(90deg,rgb(var(--dark-rgb)) 30%,rgba(var(--dark-rgb),.72) 36%,rgba(var(--dark-rgb),.25) 46%,rgba(var(--dark-rgb),0) 56%),
    linear-gradient(180deg,rgba(var(--dark-rgb),.55) 0%,rgba(var(--dark-rgb),0) 22%),
    linear-gradient(0deg,rgba(var(--dark-rgb),.45) 0%,rgba(var(--dark-rgb),0) 24%)}
  .hero-copy{max-width:min(26rem,48%)}
  .hero h1{font-size:clamp(1.3rem,3.2vw,1.8rem);margin:.7rem 0 .45rem}
  .eyebrow{padding:.3rem .75rem}
  .hero-price{margin-top:.8rem}
  /* the legal note stays on the photo side, clear of the price box and of the phone bar */
  .hero-note{bottom:3.9rem;left:auto;right:1.25rem;max-width:min(34rem,44%);text-align:right}
}
/* very short sideways screens (iPhone SE and similar, about 320 px tall): name and price only */
@media(max-width:980px) and (orientation:landscape) and (max-height:360px){
  .hero-banner{padding-top:4.5rem}
  .eyebrow,.hero-at{display:none}
  .hero-copy{max-width:min(24rem,58%)}
  .hero h1{font-size:1.15rem;margin-top:0}
}
/* sideways phones: a slimmer nav and bar, and tall images capped to the screen */
@media(max-width:980px) and (orientation:landscape) and (max-height:500px){
  .nav{padding-top:.4rem}
  .nav-pill{padding-top:.3rem;padding-bottom:.3rem}
  .nav-logo .l2{display:none}
  .nav-cta{padding:.5rem 1rem}
  .nav-cta .dot{display:none}
  .sticky-bar a,.sticky-bar button{padding-top:.8rem;padding-bottom:.8rem}
  .ov-img-shell,.loc-map,.mp-shell,.bro-art,.pl-art{max-width:min(100%,120vh);margin-left:auto;margin-right:auto}
  .answer-more,.sec-head .lead{max-width:44rem}
}

/* desktop hero: the form never falls below the fold, and on wide screens the copy stays on the
   photo's dark left instead of drifting onto the towers */
@media(min-width:981px){.hero-banner{min-height:min(45vw,calc(100vh - 9rem));min-height:min(45vw,calc(100svh - 9rem))}}
/* short laptop windows (browser bars take height): the hero is trimmed so the form stays in view */
@media(min-width:981px) and (max-height:700px){
  .hero-banner{padding-top:6rem;padding-bottom:4.4rem}
  .hero h1{font-size:clamp(1.9rem,2.6vw,2.3rem);margin:1rem 0 .6rem}
  .hero-price>div{padding-top:.6rem;padding-bottom:.6rem}
}
/* hero and every section share one 1160px grid */
.hero-wrap,.hero-lower-wrap{width:min(1160px,100%)}
@media(min-width:1800px){
  .hero-banner .hero-wrap{width:auto;margin-left:6vw;margin-right:0}
  .hero-copy{max-width:32vw}
  .hero h1{font-size:clamp(2.6rem,1.9vw,4rem)}
  .hero .eyebrow{font-size:.72rem}
  .hero-at{font-size:.8rem}
  .hero-price .hp-big{font-size:1.62rem}
  .hero-price .hp-val{font-size:2.04rem}
  .hero-price .hp-lbl{font-size:.68rem}
}
/* large screens: the sections and the form bar grow together */
@media(min-width:2200px){html{font-size:112.5%}.wrap,.trust-wrap{width:min(1360px,100%)}.hero-lower-wrap{width:min(1360px,100%)}}
@media(min-width:3000px){html{font-size:125%}.wrap,.trust-wrap{width:min(1520px,100%)}.hero-lower-wrap{width:min(1520px,100%)}}

/* the popup always fits the screen (100% first, for iOS before dvh); on short screens its title
   and close button stay in view; the thank-you screen has its own close button */
.modal-card{max-height:calc(100% - 1.5rem);max-height:calc(100dvh - 1.5rem);overflow-y:auto;overscroll-behavior:contain}
.modal-x{width:2.75rem;height:2.75rem}
.modal-head h3,.succ h3{text-wrap:balance}
.succ{position:relative}
.succ-x{position:absolute;top:.9rem;right:.9rem}
@media(max-height:680px){
  .modal-head{position:sticky;top:0;z-index:2;background:var(--paper);padding-top:1rem}
  .modal-body{padding-top:.5rem}
  #modalForm .fld{margin-bottom:.55rem}
}
@media(max-height:430px){#mSub{display:none}.modal-head h3{font-size:1.1rem}}

/* comfortable tap targets on touch screens (the nav links and phone exist only above 900px) */
@media(pointer:coarse) and (min-width:901px){.nav-links a,.nav-phone{display:inline-flex;align-items:center;min-height:44px}}
@media(pointer:coarse){
  .nav-cta{min-height:44px}
  .hero .form-alt button{min-height:44px;padding:0 .8rem}
  table.price .act button{min-height:40px;padding-top:.55rem;padding-bottom:.55rem}
  .fp-tab{min-height:44px}
  .nav-logo{min-height:44px;justify-content:center}
  .consent a,.foot-rera a,.copyline a{display:inline-block;padding:.7rem 0;margin:-.7rem 0}
}

/* readable labels on desktops: about 10.5px */
@media(min-width:981px){
  .pstat .k,.hero-price .hp-lbl,.fp-spec .k,.gal-item .tag2,.imgcap,.hero-note,.eyebrow-dark,.sec-bg-cap,.amen-hero .cap,.band .imgcap-l,.foot-brand .l2,.tour-cap,.gal-item span,.nav-logo .l2,.typo-card .k,.pl-ticket .k{font-size:.66rem}
  table.price .cfg .c-sm{font-size:.6rem}
}
@media(min-width:981px) and (max-width:1799px){.hero .eyebrow{font-size:.66rem}}
/* the developer's name in the hero eyebrow steps aside where the pill would wrap; until then it
   flows as plain text inside the pill (display:contents), so no flex gap opens before it */
.eyebrow .eb-dev{display:contents}
@media(max-width:365px){.eyebrow .eb-dev{display:none}}
@media(max-width:980px) and (orientation:landscape){.eyebrow .eb-dev{display:none}}
/* gallery: the image-type label sits top right at every width, so it never meets the caption,
   as a dark pill that stays readable on bright sky and pale renders */
.gal-item .tag2{top:.6rem;bottom:auto}
.gal-item .tag2{opacity:1;background:rgba(var(--dark-rgb),.5);padding:.2rem .55rem;border-radius:999px}

/* facts table: labels never break mid-word; on phones each label sits above its value;
   K-RERA numbers break only after a slash (<wbr> in the HTML) */
table.facts td:first-child{overflow-wrap:normal}
[data-rera]{overflow-wrap:normal;word-break:normal}
.foot-rera b{word-break:normal}
@media(max-width:640px){
  table.facts,table.facts tbody,table.facts tr,table.facts td{display:block;width:auto}
  table.facts td:first-child{width:auto;padding:.85rem 1rem 0}
  table.facts td:last-child{padding:.25rem 1rem .85rem}
  table.facts tr+tr td:last-child{border-top:0}
}
@media(min-width:901px) and (max-width:1099px){table.facts td:first-child{width:33%}table.facts [data-rera]{font-size:.8rem}}

/* lightbox: captions wrap and stay centred instead of ending in an ellipsis (three lines at most on phones) */
.lb-cap{white-space:normal;text-overflow:clip;max-width:calc(100vw - 2rem);text-align:center;border-radius:.8rem}
.lb-cap{left:1rem;right:1rem;transform:none;margin-left:auto;margin-right:auto;width:fit-content}
@media(max-width:640px){.lb-cap{line-height:1.35;border-radius:1rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}}

/* nav jumps land below the fixed nav */
html{scroll-padding-top:5.5rem}
/* balanced headings and captions, no orphan words; short links never split */
.sec-head h2,.dev-band h2,.visit h2,.band h2,.form-core .form-title,.imgcap{text-wrap:balance}
.consent a,.copyline a{white-space:nowrap}
/* hero chips as a balanced 2 x 2 on desktop; stat strip figures on one line */
@media(min-width:981px){.hero-chips{display:grid;grid-template-columns:repeat(2,max-content)}}
@media(min-width:1200px){.pstat{padding-left:.4rem;padding-right:.4rem}.pstat .v{white-space:nowrap;overflow-wrap:normal}}
/* comfortable line lengths; the FAQ in two columns and the disclaimer in two on wide screens */
.sec-head .lead{max-width:40rem}
details.faq .fa{max-width:46rem}
@media(min-width:1180px){.faq-list{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;align-items:start}}
@media(min-width:901px){.pos-note{max-width:44rem}.disclaimer{columns:2;column-gap:3rem}}
/* gallery captions readable on bright photos at every width (the caption stays above the scrim) */
.gal-item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(0deg,rgba(var(--dark-rgb),.62),transparent);pointer-events:none;z-index:1}
.gal-item span{z-index:2}

/* film (once TOUR_VIDEO is set): the cued player takes the first tap; the control bar never blocks
   the lead button; the play button clears the tag on phones */
.tour-stage.armed[data-state=idle] .tour-host{opacity:.01}
.tour-bar{pointer-events:none}
.tour-bar>*{pointer-events:auto}
@media(max-width:640px){.tour-play{width:4.6rem;height:4.6rem}.tour-play .disc{width:3.4rem;height:3.4rem}.tour-meta{left:.7rem;right:.7rem;bottom:.7rem}}

/* the iPad Pro held upright (981-1100px, portrait) keeps the tablet hero: text on the dark top, the
   photo pinned under it with its faded top, the form card over the photo's bottom edge */
@media(min-width:981px) and (max-width:1100px) and (orientation:portrait){
  .hero-banner{display:block;min-height:0;--m-photo:47.2vw;padding:6.4rem 1.5rem calc(var(--m-photo) - 2.6rem)}
  .hero-bg{left:0}
  .hero-bg img{top:auto;height:var(--m-photo);object-position:50% 80%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 16%,#000 40%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 16%,#000 40%)}
  .hero-veil{top:auto;height:calc(var(--m-photo) + 2px);background:linear-gradient(180deg,rgba(var(--dark-rgb),0) 0%,rgba(var(--dark-rgb),0) 68%,rgba(var(--dark-rgb),.5) 100%)}
  .hero .form-shell{margin-top:-1.6rem}
}
/* hero form: no empty cell beside "Looking for" on tablets wide enough for the button label
   (it needs about 275px, a half cell reaches that at 700px); a tidy right-aligned button at 981-1179 */
@media(min-width:700px) and (max-width:980px){#heroForm .btn-gold{grid-column:auto;align-self:start;margin-top:calc(.64rem * 1.65 + .35rem);padding:.62rem .62rem .62rem 1.3rem}}
@media(min-width:981px) and (max-width:1179px){#heroForm .btn-gold{width:auto;justify-self:end;padding-left:2rem;margin-top:.2rem;animation:none}.hero .consent{margin-top:.6rem}}

/* upright tablets: body text at a readable measure */
@media(min-width:641px) and (max-width:900px){.spec-grid{grid-template-columns:1fr 1fr}.dev-copy p,.answer-more,.feature p{max-width:44rem}}

/* upright phones: the legal note joins the flow under the price box, so the phone bar (up from the
   first paint) can never cover it; the photo reserve shrinks by the note's height, so the form card
   stays where it was and the note sits on the photo's faded top */
@media(max-width:640px) and (orientation:portrait){
  .hero-banner{padding-bottom:calc(var(--m-photo) - 5.3rem)}
  .hero-note{position:static;margin-top:.75rem;max-width:21rem}
}

/* floating CTAs never sit on content: the WhatsApp float shows once past the hero and only where the
   page has a margin wide enough for it; the Enquire tab only where it clears the 1160px column */
@media(min-width:901px){
  .hero-note,.band .imgcap-l{right:3.6rem}
  footer{padding-bottom:6.5rem}
  .wa-float.enabled{opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
  body.past-hero .wa-float.enabled{opacity:1;pointer-events:auto}
}
@media(min-width:901px) and (max-width:1279px){.side-tab{display:none}}
@media(min-width:901px) and (max-width:1319px){.wa-float.enabled{display:none}}

/* big phones held sideways (wider than 900px but short) and touch tablets 901-1319px wide get the
   phone bar, not the desktop floats */
@media(min-width:901px) and (max-height:500px){
  .sticky-bar{display:flex}
  .side-tab,.wa-float.enabled{display:none}
  .nav-links,.nav-phone{display:none}
  footer{padding-bottom:8rem}
}
@media(min-width:901px) and (max-width:1319px) and (pointer:coarse){.sticky-bar{display:flex}footer{padding-bottom:8rem}}

/* ============ COMPACT FOOTER WHERE THE PHONE BAR SHOWS (house template, 23 Sep 2026) ============ */
/* The phone bar is about 3.4rem tall, so the footer keeps only that much room under it instead of 8rem. */
.disc-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.disc-more{display:none}
/* the disclaimer is shown whole from 641px, so the toggle leaves the tab order there too */
@media(min-width:641px){.disc-cb{display:none}}
@media(max-width:900px){
  footer{padding:2.25rem 1.1rem calc(3.4rem + 1.25rem + env(safe-area-inset-bottom))}
  .foot-grid{gap:1.4rem;padding-bottom:1.4rem}
  footer .foot-note{display:none}   /* the disclaimer and the copyright line say the same */
  .foot-rera{line-height:1.6}
  .disclaimer{margin-top:1.3rem}
  .copyline{margin-top:1rem;gap:.35rem}
  .updated{margin-top:.8rem}
}
@media(min-width:901px) and (max-width:1319px) and (pointer:coarse),(min-width:901px) and (max-height:500px){
  footer{padding-bottom:calc(3.4rem + 1.5rem + env(safe-area-inset-bottom))}
}
/* phones: three lines of the disclaimer (it opens with the Phase 3 RERA statement), the rest one tap
   away; all of it stays in the page for search */
@media(max-width:640px){
  .disclaimer{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
  .disc-cb:checked + .disclaimer{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
  .disc-more{display:inline-block;padding:.55rem 0;font-size:.72rem;font-weight:600;color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .disc-cb:checked ~ .disc-more{display:none}
  .disc-cb:focus-visible ~ .disc-more{outline:2px solid var(--gold-bright);outline-offset:2px}
}

/* thank-you screen: a plain "Back to the page" link under the buttons (house rule book), 44px tall
   to tap; it closes the popup like the close button does */
.succ-back{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 .6rem;margin-top:.2rem;font-size:.84rem;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.succ-back:hover{color:var(--ink)}

/* ============ hero, the Astoria rule (24 Sep 2026) ============ */
/* 24 Sep 2026: the hero follows the Astoria rule, the same as the Century Astoria page. One photo
   fills the whole banner at every size (never a flat dark block above or beside it); the text sits on the
   photo's darker part; the veil stays light and only darkens where the text needs contrast. */
@media (max-width:1100px) and (orientation:portrait){
  .hero-banner{display:block;min-height:0;background:rgb(var(--dark-rgb));padding:6.4rem 1.5rem 2.2rem}
  .hero-bg{left:0}
  .hero-bg img{top:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;-webkit-mask-image:none;mask-image:none}
  .hero-veil{top:0;bottom:0;height:auto;background:linear-gradient(180deg,rgba(var(--dark-rgb),.6) 0%,rgba(var(--dark-rgb),.5) 45%,rgba(var(--dark-rgb),.14) 62%,rgba(var(--dark-rgb),0) 70%,rgba(var(--dark-rgb),0) 88%,rgba(var(--dark-rgb),.28) 100%)}
  .hero-note{position:static;margin-top:.75rem;max-width:30rem;text-align:left}
  .hero .form-shell{margin-top:-1.6rem}
}
@media (max-width:640px) and (orientation:portrait){
  .hero-banner{padding:5.1rem 1rem calc(34vw + 2.2rem)}
  .hero-bg img{object-position:50% 30%}
}
@media (max-width:420px) and (orientation:portrait){.hero-banner{padding-left:.95rem;padding-right:.95rem}}
/* desktop and sideways screens: the photo runs the full banner width, a light veil on the text side */
@media (min-width:1101px),(orientation:landscape){
  .hero-bg{left:0}
  .hero-bg img{top:0;height:100%;-webkit-mask-image:none;mask-image:none;object-fit:cover;object-position:50% 50%}
  .hero-veil{top:0;height:auto;background:
    linear-gradient(90deg,rgba(var(--dark-rgb),.74) 0%,rgba(var(--dark-rgb),.6) 30%,rgba(var(--dark-rgb),.3) 44%,rgba(var(--dark-rgb),0) 58%),
    linear-gradient(180deg,rgba(var(--dark-rgb),.4) 0%,rgba(var(--dark-rgb),0) 18%),
    linear-gradient(0deg,rgba(var(--dark-rgb),.4) 0%,rgba(var(--dark-rgb),0) 22%)}
}
.hero h1,.hero-at,.hero .eyebrow{text-shadow:0 1px 14px rgba(var(--dark-rgb),.55)}
/* 24 Sep 2026: the eyebrow reads "Luxury Pre-Launch" (user's wording), so the developer's name
   steps aside up to 385 px (was 365 px): between 366 and 379 px the longer pill wrapped onto two lines */
@media(max-width:385px){.eyebrow .eb-dev{display:none}}

/* ============ line breaks and contrast (24 Sep 2026) ============ */
/* upright phones and tablets: the legal note sits in the flow on the pale tower render, so it gets
   its own small dark chip (the photo stays one photo under a light veil) */
@media (max-width:1100px) and (orientation:portrait){
  .hero-note{width:fit-content;max-width:min(30rem,100%);padding:.35rem .6rem;background:rgba(var(--dark-rgb),.62);border-radius:.3rem;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:rgba(255,255,255,.9);text-wrap:pretty}
}
/* the gold place line breaks as "in Shettigere," / "Devanahalli, Bangalore", never with "Bangalore"
   alone; upright tablets keep their single line */
@media (max-width:640px),(min-width:1101px),(orientation:landscape){.hero h1 .gold{max-width:12.5em;text-wrap:balance}}
/* the eyebrow pill on the photo: a faint dark fill instead of the white one, so its small gold
   capitals keep their contrast wherever the photo is lit */
.hero .eyebrow{background:rgba(var(--dark-rgb),.34)}
/* a home type never wraps inside its name in the price table */
table.price h3.cfg{white-space:nowrap}
/* no one-word last lines in FAQ questions and body paragraphs */
details.faq summary{text-wrap:balance}
.hero-sub,.bro-note,.tour-pt,.answer-line,.answer-more,.lead,p.fa{text-wrap:pretty}
/* sideways phones 641-699 px wide: "Looking for" takes the full row, no empty cell beside it */
@media(min-width:641px) and (max-width:699px){#heroForm .fld-cfg{grid-column:1/-1}}

/* ============ review fixes (24 Sep 2026, afternoon) ============ */
/* the hero legal note on sideways screens and desktops gets the same small dark chip as on upright
   screens, so its letters stay readable where they cross the render's white road markings (the
   photo stays one photo under the same light veil) */
@media (min-width:1101px),(orientation:landscape){
  .hero-note{width:fit-content;padding:.35rem .6rem;background:rgba(var(--dark-rgb),.62);border-radius:.3rem;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:rgba(255,255,255,.9)}
}
/* upright tablets: the price box sits where the veil has faded out, so its own fill is deeper there
   and the gold "Pre-Launch From" label keeps AA contrast over the pale rooftops (phones unchanged) */
@media (min-width:641px) and (max-width:1100px) and (orientation:portrait){.hero-price{background:rgba(var(--dark-rgb),.7)}}
/* the price table's small "Godrej MSR City" / "Price" labels: hidden up to 760 px, about 10.5px from
   981 px, and about 10px in between (they were 8.3px there) */
@media (min-width:761px) and (max-width:980px){table.price .cfg .c-sm{font-size:.64rem}}
/* the pre-launch band shows Barca's aerial render: labelled as the launched phase, a dark pill at the
   top right like the gallery tiles' labels */
.pl-cap{position:absolute;top:.6rem;right:.85rem;z-index:2;font-size:.64rem;font-weight:600;letter-spacing:.04em;line-height:1.4;color:#fff;background:rgba(var(--dark-rgb),.6);padding:.2rem .55rem;border-radius:999px;white-space:nowrap;pointer-events:none}
@media (min-width:981px){.pl-cap{font-size:.66rem}}
/* the smallest phones: a little more height, so the label clears the ticket's raised corner */
@media (max-width:350px){.pl-art{aspect-ratio:1/1.25}}

/* ============ buttons: colourful and shining (user, 25 Sep 2026) ============ */
/* Every call to action carries a light band that sweeps across it. The sweep and the pulse animate
   transform only, so they run on the compositor; nothing animates box-shadow in a loop any more
   (the old gpGlow on the price-table buttons kept a phone's main thread 15-22% busy). */
@keyframes btnShine{0%{transform:translateX(-140%) skewX(-18deg)}55%,100%{transform:translateX(280%) skewX(-18deg)}}
.btn,.nav-cta,.sticky-bar a,.sticky-bar button,table.price .act button{position:relative;overflow:hidden}
.side-tab,.wa-float{overflow:hidden}
.btn:not(.cta-anim)::before,.nav-cta::before,.sticky-bar a::before,.sticky-bar button::before,.side-tab::before,.wa-float::before,table.price .act button::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-140%) skewX(-18deg);animation:btnShine 3.6s var(--ease) infinite}
.side-tab::before{width:100%;height:40%;bottom:auto;background:linear-gradient(190deg,transparent,rgba(255,255,255,.5),transparent);animation-name:btnShineV}
@keyframes btnShineV{0%{transform:translateY(-140%)}55%,100%{transform:translateY(280%)}}
/* the three phone-bar buttons and the table rows shine one after another, not all at once */
.sticky-bar .sb-wa::before{animation-delay:.5s}
.sticky-bar .sb-cta::before{animation-delay:1s}
.nav-cta::before{animation-delay:1.6s}
/* primary actions: a brighter three-stop gold */
.btn-gold,.nav-cta,.sb-cta,.side-tab{background:linear-gradient(135deg,var(--gold-bright) 0%,var(--gold-soft) 38%,var(--gold) 100%)}
.side-tab{background:linear-gradient(180deg,var(--gold-bright) 0%,var(--gold-soft) 38%,var(--gold) 100%)}
/* the price table's Register Now: filled gold, a soft pulse (transform) and the shine */
table.price .act button{background:linear-gradient(135deg,var(--gold-bright) 0%,var(--gold-soft) 38%,var(--gold) 100%);color:var(--indigo-night);border-color:rgba(var(--accent-rgb),.55);box-shadow:0 10px 22px -12px rgba(var(--accent-rgb),.85);animation:ctaPulse 2.6s var(--ease) infinite}
table.price .act button:hover{background:var(--indigo-deep);color:#fff;border-color:var(--indigo-deep)}
table.price tbody tr:nth-child(2) .act button::before{animation-delay:.35s}
table.price tbody tr:nth-child(3) .act button::before{animation-delay:.7s}
table.price tbody tr:nth-child(4) .act button::before{animation-delay:1.05s}
table.price tbody tr:nth-child(5) .act button::before{animation-delay:1.4s}
/* secondary actions: night with a gold edge and gold lettering (7.6:1), instead of plain black or white */
.btn-ink,.btn-ghost{background:linear-gradient(135deg,#3a3843 0%,var(--indigo-night) 100%);color:#fff;border:1px solid rgba(var(--hi-rgb),.5)}
.btn-ink .ic,.btn-ghost .ic{background:rgba(var(--hi-rgb),.16)}
/* on dark photo bands and the film: a glassy gold button */
.btn-line{background:linear-gradient(135deg,rgba(var(--hi-rgb),.32),rgba(var(--accent-rgb),.16));border:1px solid rgba(var(--hi-rgb),.8);color:#fff}
.btn-line .ic{background:rgba(var(--hi-rgb),.22)}
/* the thank-you screen's WhatsApp button in WhatsApp green (white text 4.9:1 and up) */
#succWa{background:linear-gradient(135deg,#188246 0%,#0f6b36 100%);color:#fff;box-shadow:0 16px 40px -16px rgba(15,107,54,.7)}
@media (prefers-reduced-motion: reduce){
  .btn::before,.nav-cta::before,.sticky-bar a::before,.sticky-bar button::before,.side-tab::before,.wa-float::before,table.price .act button::before{animation:none;display:none}
  table.price .act button{animation:none}
}

/* ============ WhatsApp in the desktop hero (user, 26 Sep 2026) ============ */
/* The desktop hero showed no WhatsApp button. From 1320px the float shows from the first paint: the
   margin there is wide enough that it never covers the hero form or the text. At 901-1319px, where
   the float would sit on content, a WhatsApp button joins the nav instead (mouse screens only; touch
   tablets there get the phone bar, which has WhatsApp). */
.nav-wa{display:none;align-items:center;justify-content:center;flex:none;width:2.6rem;height:2.6rem;border-radius:999px;background:linear-gradient(135deg,#25b35f,#188246);color:#fff;text-decoration:none;box-shadow:0 10px 24px -12px rgba(24,130,70,.8);position:relative;overflow:hidden;transition:transform .45s var(--ease)}
.nav-wa:hover{transform:translateY(-1px) scale(1.05)}
.nav-wa svg{width:20px;height:20px;position:relative}
.nav-wa::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-140%) skewX(-18deg);animation:btnShine 3.6s var(--ease) infinite;animation-delay:2.2s}
@media (min-width:901px) and (max-width:1319px) and (pointer:fine){.nav-wa{display:inline-flex}}
@media (min-width:901px) and (max-height:500px){.nav-wa{display:none}}
@media (min-width:1320px){.wa-float.enabled{opacity:1;pointer-events:auto}}
@media (prefers-reduced-motion: reduce){.nav-wa::before{animation:none;display:none}}

/* 26-27 Sep 2026: secondary buttons carry white lettering (gold lettering on the dark gradient read as faded) */

/* ============ price table on phones: one block per home (27 Sep 2026) ============ */
/* With a larger phone text size the price buttons ran past the table's right edge (on a 320 px phone even at
   the normal size, and on a 768 px tablet at 1.3x). Up to 820 px each row is a small grid: the home type, its
   area and its price on the left and the button on the right with its own room, so the left side wraps instead
   (the Nikoo 9 pattern, commit 8e199df). Phones keep hiding the area, as the table did. */
@media(max-width:820px){
  .price-scroll table.price,.price-scroll table.price tbody{display:block;width:100%;min-width:0}
  .price-scroll table.price thead{display:none}
  .price-scroll table.price tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"cfg act" "area act" "pr act";align-items:center;column-gap:.75rem;row-gap:.25rem;padding:.8rem .85rem;border-top:1px solid var(--line)}
  .price-scroll table.price tbody tr:first-child{border-top:0}
  .price-scroll table.price td{display:block;padding:0;border:0;background:none}
  .price-scroll table.price td:nth-child(1){grid-area:cfg}
  .price-scroll table.price td:nth-child(2){display:block;grid-area:area;font-size:.82rem;color:var(--muted)}
  .price-scroll table.price td.pr{grid-area:pr;white-space:normal}
  .price-scroll table.price td.act{grid-area:act}
  .price-scroll table.price .act button{white-space:nowrap;padding:.62rem .95rem;font-size:.76rem}
  .price-scroll table.price .cfg{font-size:1.05rem}
  table.price tbody tr:nth-child(even){background:rgba(var(--paper-rgb),.55)}
}
@media(max-width:640px){.price-scroll table.price tr{grid-template-areas:"cfg act" "pr act"}.price-scroll table.price td:nth-child(2){display:none}}
@media(max-width:360px){.price-scroll table.price tr{padding:.7rem .65rem;column-gap:.5rem}.price-scroll table.price .act button{padding:.55rem .75rem;font-size:.72rem}}

/* ============ Shriram Reserve skin (29 Sep 2026) ============ */
/* Primary buttons in the terracotta of the teaser's brick, white lettering: 4.66:1 on the lightest
   stop (#b85a2c), 6.2:1 and 7.9:1 on the deeper ones. The shine band and the pulse stay as they are. */
.btn-gold,.nav-cta,.sb-cta{background:linear-gradient(135deg,var(--brick) 0%,var(--brick-deep) 55%,var(--brick-night) 100%);color:#fff}
.side-tab{background:linear-gradient(180deg,var(--brick) 0%,var(--brick-deep) 55%,var(--brick-night) 100%);color:#fff}
.btn-gold{box-shadow:0 16px 40px -16px rgba(var(--brick-rgb),.75)}
.btn-gold:hover{box-shadow:0 20px 46px -16px rgba(var(--brick-rgb),.9)}
.btn-gold .ic,.nav-cta .dot{background:rgba(255,255,255,.18)}
table.price .act button{background:linear-gradient(135deg,var(--brick) 0%,var(--brick-deep) 55%,var(--brick-night) 100%);color:#fff;border-color:rgba(var(--brick-rgb),.6);box-shadow:0 10px 22px -12px rgba(var(--brick-rgb),.85)}
table.price .act button:hover{background:var(--indigo-deep);color:#fff;border-color:var(--indigo-deep)}
/* secondary buttons: walnut with a gold edge and white lettering */
.btn-ink,.btn-ghost{background:linear-gradient(135deg,#4a382d 0%,var(--indigo-night) 100%);color:#fff;border:1px solid rgba(var(--hi-rgb),.5)}

/* hero on upright phones and tablets: the teaser's courtyard runs the full banner. The text sits on the
   dark pergola at the top, and the photo reserve below it is tall enough to show the family on the
   sofas above the form card (the photo is pinned to its bottom edge, so the people never slide under
   the text on a taller phone). */
@media (max-width:1100px) and (orientation:portrait){
  .hero-bg img{object-position:50% 100%}
  .hero-veil{background:linear-gradient(180deg,rgba(var(--dark-rgb),.62) 0%,rgba(var(--dark-rgb),.5) 40%,rgba(var(--dark-rgb),.12) 58%,rgba(var(--dark-rgb),0) 66%,rgba(var(--dark-rgb),0) 88%,rgba(var(--dark-rgb),.25) 100%)}
}
@media (max-width:640px) and (orientation:portrait){
  .hero-banner{padding:5.1rem 1rem calc(58vw + 2.2rem)}
}
@media (min-width:641px) and (max-width:1100px) and (orientation:portrait){
  .hero-banner{padding-bottom:calc(46vw + 2.2rem)}
}
/* desktop and sideways screens: the brick courtyard wall, the text on its darker left */
@media (min-width:1101px),(orientation:landscape){
  .hero-bg img{object-position:50% 45%}
}

/* the overview carousel shows the teaser's portrait frames */
.ov-img-shell img{aspect-ratio:4/5}
@media(min-width:901px){.ov-grid{grid-template-columns:1.25fr .75fr}}
@media(max-width:900px){.ov-img-shell{max-width:26rem;margin-left:auto;margin-right:auto}}

/* gallery: portrait tiles (the teaser frames are upright) */
.gal-portrait .gal-item img{aspect-ratio:4/5}
@media(max-width:760px){.gal-portrait .gal-item:last-child:nth-child(odd) img{aspect-ratio:4/5}}

/* amenities: one reference image on top of each of the three groups */
.amen-cols-img .amen-col{padding:0 0 1.2rem;overflow:hidden}
.amen-cols-img .amen-col h3,.amen-cols-img .amen-tags{margin-left:1.4rem;margin-right:1.4rem}
.amen-cols-img .amen-col h3{margin-top:1.2rem;font-size:.72rem}
.amen-pic{position:relative;margin:0}
.amen-pic img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 40%}
.amen-pic span{position:absolute;top:.6rem;right:.7rem;font-size:.62rem;font-weight:600;letter-spacing:.04em;color:#fff;background:rgba(var(--dark-rgb),.55);padding:.2rem .55rem;border-radius:999px}

/* teaser films: three upright films in a row; on phones a sideways swipe row */
.films{background:var(--cream)}
.film-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;max-width:58rem;margin:0 auto}
.film{margin:0;display:flex;flex-direction:column;gap:.6rem}
.film video{width:100%;aspect-ratio:9/16;height:auto;display:block;border-radius:.9rem;background:var(--indigo-deep);box-shadow:var(--shadow-card);object-fit:cover}
.film figcaption{font-family:var(--display);font-size:1.02rem;line-height:1.3;color:var(--ink);text-align:center;text-wrap:balance}
@media(max-width:760px){
  .film-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:68%;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 1rem .6rem;margin:0 -1rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .film-grid::-webkit-scrollbar{display:none}
  .film{scroll-snap-align:center}
}

/* the mood band: pampas at sunset, the teaser's own opening shot */
.band-bg img{object-position:50% 50%}

/* the developer and call-back bands carry upright frames: keep their brightest part in view */
.sec-bg-dev img{object-position:50% 40%}
.sec-bg-visit img{object-position:50% 45%}

/* the longer wordmark on small phones */
@media(max-width:400px){.nav-logo .l1{letter-spacing:.08em;font-size:.68rem}}
@media(max-width:340px){.nav-logo .l1{letter-spacing:.04em;font-size:.62rem}}
/* status cards: the columns never grow past the phone width at a larger text size (1.3x) */
.status-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.status-card{padding:1rem .85rem}.status-card .t{letter-spacing:.06em}}
/* the longer place line ("off Bannerghatta Road, South Bengaluru") balanced at every width, so an upright
   tablet never leaves "Bengaluru" alone on the second line (seen at 768 px, 29 Sep 2026) */
.hero h1 .gold{text-wrap:balance}

/* ============ cross-check fixes (30 Sep 2026, workflow wf_fd5c1797-dd8, every item verified by a second agent) ============ */
/* nav: the lead button keeps its full width; the tagline and the phone number step aside where the pill is short
   (it was squeezed to 28-52 px, "Get" / "Get P", from 901 to about 1180 px); on phones with larger text the
   wordmark may stack instead of being cut */
.nav-cta{flex:none}
@media(min-width:901px) and (max-width:1279px){.nav-logo .l2{display:none}.nav-pill{gap:1rem}.nav-links{gap:.9rem}}
@media(min-width:901px) and (max-width:1060px){.nav-phone{display:none}}
@media(max-width:640px){.nav-logo,.nav-logo .l1{white-space:normal}}

/* upright iPad: the hero submit clears the phone bar on the first screen */
@media (min-width:641px) and (max-width:900px) and (orientation:portrait){.hero-banner{padding-bottom:calc(46vw - 1rem)}}

/* pre launch band: the ticket sits below the villas photo (it hid the walking couple), overlapping only the path */
.pl-art{aspect-ratio:auto;overflow:visible;background:none;border:0;box-shadow:none;isolation:auto}
.pl-art::after{display:none}
.pl-art picture{position:relative;inset:auto;display:block;aspect-ratio:1/1;border-radius:var(--r-outer);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-card)}
.pl-art picture img{position:absolute;inset:0}
.pl-ticket{position:relative;left:auto;top:auto;transform:rotate(-2deg);margin:-4.5rem auto 0;width:min(86%,22rem)}
.pl-art .bro-badge{bottom:auto;top:.6rem;left:.85rem}
@media(max-width:420px){.pl-art{aspect-ratio:auto}.pl-ticket{top:auto;width:min(92%,22rem)}}
@media(max-width:350px){.pl-art{aspect-ratio:auto}}
@media(max-width:980px) and (orientation:landscape) and (max-height:500px){.pl-art{width:100%}}

/* overview on desktop: the photo beside heading, lead and list (no 180 px hole under the lead) */
@media(min-width:901px){
  #overview .wrap{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:auto 1fr;column-gap:3.2rem;align-items:start}
  #overview .ov-grid{display:contents}
  #overview .sec-head{grid-column:1;grid-row:1;margin-bottom:2rem}
  #overview .ov-grid>:first-child{grid-column:1;grid-row:2}
  #overview .ov-grid>:last-child{grid-column:2;grid-row:1/3}
}

/* amenities: the reader kept whole in the Mind photo; upright tablets lay each card out as photo + text */
.amen-pic img[src*="terrace-garden"]{object-position:50% 95%}
@media(min-width:641px) and (max-width:900px) and (orientation:portrait){
  .amen-cols-img .amen-col{display:grid;grid-template-columns:minmax(0,15rem) 1fr;grid-template-rows:1fr auto 1fr;padding:0}
  .amen-cols-img .amen-pic{grid-row:1/4;grid-column:1}
  .amen-cols-img .amen-pic img{aspect-ratio:4/5;height:100%}
  .amen-cols-img .amen-col h3{grid-column:2;grid-row:1;align-self:end;margin-top:0}
  .amen-cols-img .amen-tags{grid-column:2;grid-row:2}
}

/* developer and call back bands on desktop: no stretched 576 px upright frame (it showed 19-38% of it at 2.5-4.4x);
   the dark band and its gradient stay */
@media(min-width:901px){.sec-bg picture,.sec-bg-cap{display:none}}

/* sideways phones: films, amenity and overview images and the popup fit the short screen */
@media(max-width:980px) and (orientation:landscape) and (max-height:500px){
  .film-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;overflow:visible;margin:0 auto;padding:0;max-width:calc((100svh - 7rem)*27/16 + 2.4rem)}
  .amen-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ov-img-shell{max-width:calc((100svh - 5rem)*.8)}
}
@media(orientation:landscape) and (max-height:500px){
  .modal-card{width:min(600px,calc(100% - 2rem));max-width:none}
  #modalForm{display:grid;grid-template-columns:1fr 1fr;column-gap:.8rem}
  #modalForm > button[type=submit]{grid-column:1/-1}
  .lb{padding-bottom:4.4rem}
  .lb img{max-height:calc(100svh - 6rem)}
}

/* home types: the third card (Simplex) takes the whole row instead of sitting beside an empty half */
@media(max-width:760px){.typo-grid .typo-card:last-child:nth-child(odd){grid-column:1/-1}}

/* phone bar: equal thirds stay (house rule); with larger text the price button may wrap to two lines instead of being cut */
.sticky-bar .sb-cta{white-space:normal;line-height:1.15;text-align:center}

/* price rows at 351-360 px keep the 361 px sizes (there is room); only 350 px and below get the compact type */
@media (min-width:351px) and (max-width:360px){
  .price-scroll table.price td.pr{font-size:.92rem}
  .price-scroll table.price .act button{padding:.62rem .95rem;font-size:.76rem}
  .price-scroll table.price tr{padding:.8rem .85rem;column-gap:.75rem}
}

/* gallery labels at 320-360 px: an equal inset on both sides, a long name wraps instead of touching the edge */
@media(max-width:360px){.gal-item > span:not(.tag2){right:.85rem;letter-spacing:.06em}}

/* the hero button label is one element now, so the flex gap sits only between the label and the arrow */
.btn .lbl{display:inline}

/* ============ regressions found by the verification round (30 Sep 2026, wf_e8149a3a-79a) ============ */
/* keyboard focus on the zoomable photos: an inset ring, so overflow:hidden tiles cannot clip it */
.zoomable:focus-visible{outline:3px solid var(--gold-bright);outline-offset:-3px}
/* 641-699 px: the nav tagline steps aside so the lead button stays inside the pill */
@media(min-width:641px) and (max-width:699px){.nav-logo .l2{display:none}}
/* pre launch photo on phones: the "Reference image" caption sits under the badge, not beneath it */
@media(max-width:640px){.pl-art .pl-cap{top:3.4rem}}
/* gallery labels keep an inset on the right on every phone */
@media(max-width:760px){.gal-item > span:not(.tag2){right:.85rem}}
/* phone bar: no tag icon on phones, so a wrapped price label stays centred with its own room */
@media(max-width:480px){.sticky-bar .sb-cta svg{display:none}}

/* ============ desktop and landscape hero: the arch creative, full width (user, 30 Sep 2026) ============ */
/* The user did not want the upright courtyard creative as a side panel ("heroi image desktop mai one side kyu
   hua") and pointed at the link they gave: its hero is the developer's arch teaser scene as a landscape banner.
   It now fills the banner on every landscape screen and from 1101 px: the name and price on the shaded pillar at
   the left, the walking figure clear of the text at the centre right, and on desktops the form as a bar right
   under the photo (not over it). Upright phones and tablets keep the courtyard photo banner. */
@media (min-width:1101px),(orientation:landscape){
  .hero-bg img{object-position:50% 22%}
  .hero-veil{background:linear-gradient(90deg,rgba(var(--dark-rgb),.62) 0%,rgba(var(--dark-rgb),.42) 30%,rgba(var(--dark-rgb),0) 46%),linear-gradient(180deg,rgba(var(--dark-rgb),.34) 0%,rgba(var(--dark-rgb),0) 20%)}
  .hero h1,.hero-at,.hero .eyebrow{text-shadow:0 1px 14px rgba(var(--dark-rgb),.55)}
  /* the pill sits over a light plaster wall: the darker fill keeps its text at AA */
  .nav-pill{background:rgba(var(--dark-rgb),.88)}
}
@media (min-width:1101px),(min-width:981px) and (orientation:landscape){
  .hero-banner{min-height:calc(100vh - 12.8rem);min-height:calc(100svh - 12.8rem);padding:6.4rem 1.5rem 2rem max(5.5rem,calc((100vw - 1320px) / 2))}
  .hero-banner .hero-wrap{width:auto;margin:0}
  .hero-copy{max-width:min(34rem,38vw)}
  .hero h1{font-size:clamp(2rem,2.5vw,2.9rem)}
  .hero .form-shell{margin-top:1rem}
  .hero-lower{padding:0 max(1.5rem,calc((100vw - 1320px) / 2 - 1.5rem)) 2rem max(5.5rem,calc((100vw - 1320px) / 2))}
  .hero-lower-wrap{width:auto}
}
@media (min-width:981px) and (max-width:1279px) and (orientation:landscape),(min-width:1101px) and (max-width:1279px){
  .hero-banner{padding-left:2.2rem}.hero-lower{padding-left:2.2rem;padding-right:2.2rem}
  .hero .eyebrow .eb-dev{display:none}
  /* one row of fields with the short button label, so the submit stays in the first screen */
  #heroForm{grid-template-columns:1fr 1.2fr .9fr auto}
  #heroForm .btn-gold{grid-column:auto;width:auto;justify-self:auto;align-self:start;margin-top:calc(.62rem * 1.5 + .35rem);padding:.8rem .8rem .8rem 1.2rem}
  #heroForm .btn-gold .bl{display:none}
}
/* sideways phones: the text column stays on the pillar side of the figure */
@media (max-width:980px) and (orientation:landscape){.hero-copy{max-width:min(24rem,40%)}}

/* ===== T1 REFINED START (30 Sep 2026) =====
   Template 1, refined. The user: "txt fonts and designs ai generated lag raha hai". What changed:
   Archivo Expanded headings + Archivo text (see the font faces at the top); white and stone grounds
   with charcoal ink instead of cream and walnut; one 2px radius; hairlines instead of floating
   shadows and double framed cards; no pill eyebrows, no glowing dots, no gold second line in the
   headings (the emphasis is a lighter weight of the same face); sentence case labels instead of
   tiny tracked capitals; no decorative tick icons. Terracotta brick CTAs (from the developer's
   teaser) and the shine stay. Source of this block: ~/Sites/shriram-bannerghatta-assets/t1-refined.css
   (spliced in by build.sh; edit it there). */

:root{
  --ink:#1c1d1f;--indigo:#1c1d1f;--indigo-deep:#17181a;--indigo-night:#121314;--royal:#3a3d40;
  --gold-ink:#5b5f63;--muted:#54585c;--muted-light:#9ea2a6;
  --cream:#ffffff;--cream-2:#f2f1ee;--paper:#ffffff;
  --line:rgba(28,29,31,.13);--line-gold:rgba(187,144,91,.55);
  --dark-rgb:18,19,20;--shadow-rgb:18,19,20;--royal-rgb:58,61,64;--paper-rgb:255,255,255;--paper2-rgb:242,241,238;
  --r-outer:2px;--r-inner:2px;--btn-r:2px;
  --shadow-soft:none;--shadow-card:none;
  --stone:#f2f1ee;--ink-2:#54585c;--rule:rgba(28,29,31,.14);--night:#151617;
}

/* one shape, no floating shadows, no glass */
*,*::before,*::after{border-radius:2px!important}
.wa-float,.wa-float::before,.wa-float::after{border-radius:50%!important}
.sticky-bar,.sticky-bar *,.nav-pill,.hero-banner,.hero-bg,.hero-bg img,.band-bg img,.sec-bg img{border-radius:0!important}
*{box-shadow:none!important}
.nav-pill,.hero-price,.modal-veil,.lb{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.grain{display:none!important}
:focus-visible{outline:2px solid #b85a2c!important;outline-offset:2px}
.hero :focus-visible,.band :focus-visible,.dev-band :focus-visible,.visit :focus-visible,footer :focus-visible,.trust :focus-visible,.nav :focus-visible,.films :focus-visible,.lb :focus-visible{outline-color:#fff!important}

/* type */
html{font-variant-numeric:lining-nums}
body{font-family:var(--text);color:var(--ink);background:#fff}
h1,h2,h3,.serif{font-family:var(--display);letter-spacing:-.015em}
em{font-style:normal}
.sec-head h2,h2{font-weight:500}
.sec-head h2{font-size:clamp(1.55rem,4.6vw,2.55rem);line-height:1.12;margin-top:0}
.sec-head h2 em,h2 em,.band h2 em,.visit h2 em{font-weight:300;color:inherit}
.sec-head .lead,.lead{color:var(--ink-2);font-size:1rem;line-height:1.65}
.sec-head{margin-bottom:2rem}
.sec{padding:4.2rem 1.25rem}
@media(min-width:900px){.sec{padding:6rem 1.5rem}}
p,li,td{font-variant-numeric:lining-nums}

/* labels: sentence case, readable size, no wide tracking */
.fld label,table.facts td:first-child,.imgcap,.band .imgcap-l,.pstat .k,.status-card .t,.fp-hint,.fp-spec .k,
.gal-item span,.dev-stat .t,.foot-brand .l2,footer h3,.pl-ticket .k,.typo-card .k,.typo-card .sz small,.sec-bg-cap,
.hero-at,.hero-price .hp-lbl,table.price th,table.price .cfg .c-sm,.pay-line h3,.loc-card h3,.amen-col h3,.bro-badge,
.amen-pic span,.pl-cap,.nav-logo .l2,.side-tab,.tour-tag,.tour-cap,.gal-item .tag2{
  text-transform:none!important;letter-spacing:.005em!important}
.fld label{font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:.4rem}
.imgcap{font-size:.78rem;color:var(--ink-2);text-align:left;padding-right:0}
.gal-item span,.amen-pic span,.pl-cap,.sec-bg-cap,.band .imgcap-l{font-size:.72rem;font-weight:500}

/* eyebrows: no pills, no dots, and none above the section headings */
.eyebrow-dark{display:none!important}
.hero .eyebrow{background:none!important;border:0!important;padding:0!important;font-family:var(--text);font-size:.84rem;font-weight:500;
  letter-spacing:.01em!important;text-transform:none!important;color:rgba(255,255,255,.9)}
.eyebrow .spark,.visit .eyebrow{display:none!important}

/* nav: a full width solid bar, not a floating glass pill */
.nav{padding:0!important}
.nav-pill{width:100%!important;max-width:none!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
  background:rgba(21,22,23,.94)!important;padding:.55rem max(1rem,calc((100vw - 1320px)/2))!important;justify-content:space-between}
.nav.scrolled .nav-pill{background:#151617!important}
@media(min-width:1101px){.nav-pill{padding-left:max(5.5rem,calc((100vw - 1320px)/2))!important;padding-right:max(2.9rem,calc((100vw - 1320px)/2 + 1.5rem))!important}}
@media(min-width:981px) and (max-width:1279px){.nav-pill{padding-left:2.2rem!important;padding-right:2.2rem!important}}
.nav-wa{width:2.5rem!important;height:2.5rem!important}
.nav-logo .l1{font-family:var(--display);font-size:.9rem;font-weight:600;letter-spacing:.08em;color:#fff}
.nav-logo .l1 em{font-weight:300;color:#fff}
.nav-logo .l2{font-size:.7rem;font-weight:500;color:rgba(255,255,255,.62)}
.nav-links{font-size:.86rem;font-weight:500;color:rgba(255,255,255,.82)}
.nav-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:.35em}
.nav-cta .dot,.btn .ic{background:none!important;width:auto;height:auto}
.nav-cta{border-radius:2px!important}

/* hero */
.hero h1{font-weight:500;letter-spacing:-.025em}
.hero h1 .gold{font-family:var(--text);font-weight:400;color:rgba(255,255,255,.92);letter-spacing:0}
.hero-at{font-size:.9rem;font-weight:500;color:rgba(255,255,255,.88)}
.hero-price{border:1px solid rgba(255,255,255,.5)!important;background:rgba(18,19,20,.5)!important}
.hero-price .hp-at{border-left-color:rgba(255,255,255,.35)!important}
.hero-price .hp-lbl{font-size:.74rem;font-weight:600;color:rgba(255,255,255,.86)}
.hero-price .hp-val{font-family:var(--text);font-weight:700;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
.hero-chips{display:none!important}
.hero .form-core .form-title{font-family:var(--display);font-weight:500}
.form-core .fsub{color:var(--ink-2);font-size:.86rem}
.consent{color:var(--ink-2)}

/* forms */
.fld input,.fld select,select.cc{border:1px solid #8b9095!important;background:#fff;font-size:16px}
.telwrap{border-radius:2px}
.form-shell{background:none!important;border:0!important;padding:0!important}
.form-core{border:1px solid var(--rule)}
.hero .form-core{border:0}

/* buttons: one shape, plain arrow, terracotta brick */
.btn{border-radius:2px!important;letter-spacing:.005em;font-weight:600}
.btn .ic svg{width:15px;height:15px}
.btn:hover .ic{transform:translateX(3px)}

/* stat strip: a quiet ledger */
.trust{background:var(--night);border-top:0}
.pstat .v{font-family:var(--text);font-weight:600;font-size:1rem}
.pstat .k{font-size:.74rem;font-weight:500;color:rgba(255,255,255,.66)}

/* price */
.price-band{background:var(--stone)}
.price-shell{background:none!important;border:0!important;padding:0!important}
.price-core{border:0!important;border-top:2px solid var(--ink)!important;background:#fff}
table.price th{background:none!important;color:var(--ink-2)!important;font-size:.8rem!important;font-weight:600;border-bottom:1px solid var(--rule)}
table.price td{border-top:1px solid var(--rule)}
table.price .cfg{font-family:var(--display);font-weight:500}
table.price .pr{color:var(--ink)!important;font-size:1.12rem;font-variant-numeric:lining-nums tabular-nums}
table.price .act button{border-radius:2px!important}
.pay-line{background:#fff;border:0;border-top:1px solid var(--rule);border-radius:0}
.pay-line h3{font-size:.86rem;font-weight:700;color:var(--ink)}
.price-notes{color:var(--ink-2)}

/* homes: three ruled columns, not three floating cards */
.fp-band{background:#fff}
.typo-grid{gap:0!important;border-top:2px solid var(--ink)}
.typo-card{background:none!important;border:0!important;border-bottom:1px solid var(--rule)!important;padding:1.6rem 0!important}
@media(min-width:900px){.typo-card{padding:1.8rem 1.8rem 1.6rem 0!important}.typo-card+.typo-card{border-left:1px solid var(--rule)!important;padding-left:1.8rem!important}}
.typo-card .k{font-size:.8rem;font-weight:600;color:var(--ink-2)}
.typo-card h3{font-family:var(--display);font-weight:500}
.typo-card .sz{font-family:var(--text);font-weight:600}
.typo-card .pr{color:var(--ink);font-weight:700}
.typo-note{background:none;border:0;border-left:2px solid var(--gold);border-radius:0!important;padding-left:1rem}
.typo-note svg,.pos-note svg{display:none}

/* answer + facts */
.answer-band{background:#fff}
.answer-line strong,.answer-more b{font-weight:inherit}
.facts-shell{background:none!important;border:0!important;padding:0!important}
.facts-core{border:0!important;border-top:2px solid var(--ink)!important}
table.facts td{border-top:1px solid var(--rule)}
table.facts td:first-child{font-size:.82rem;font-weight:600;color:var(--ink-2)}

/* overview: sentences without ticks or bold lead ins */
.feature .fi{display:none}
.feature{padding:.9rem 0;border-top:1px solid var(--rule)}
.feature p b{font-weight:600}
.ov-img-shell{background:none!important;border:0!important;padding:0!important}

/* pre launch */
.bro{background:var(--stone)}
.bro-pts p svg{display:none}
.bro-pts p{padding:.7rem 0;border-top:1px solid var(--rule)}
.pl-art{background:none!important;border:0!important;padding:0!important}
.pl-ticket{border:1px solid var(--rule)}
.bro-badge{background:#151617;color:#fff;font-size:.74rem}

/* location */
.loc-card{background:none!important;border:0!important;border-top:2px solid var(--ink)!important;padding:1.1rem 0 .4rem!important}
.loc-card h3{font-family:var(--display)!important;font-size:1.02rem!important;font-weight:500!important;color:var(--ink)!important}
.loc-card h3 svg{display:none}
.loc-card li{border-top:1px solid var(--rule)}
.loc-card li span{font-variant-numeric:lining-nums tabular-nums;font-weight:600}
.map-embed{border:1px solid var(--rule);padding:0!important;background:var(--stone)}
.growth p svg{display:none}
.growth p{border-top:1px solid var(--rule);padding:.8rem 0}

/* status: one ruled row, not a 2x2 tile grid */
.status-grid{gap:0!important;border-top:2px solid var(--ink)}
.status-card{background:none!important;border:0!important;border-bottom:1px solid var(--rule)!important;padding:1.1rem 0!important}
@media(min-width:900px){.status-card+.status-card{border-left:1px solid var(--rule)!important;padding-left:1.4rem!important}}
.status-card .n{font-family:var(--display);font-weight:500}
.status-card .t{font-size:.84rem;font-weight:500;color:var(--ink-2)}
.pos-note{background:none;border:0;border-left:2px solid #b85a2c;border-radius:0!important;padding:.2rem 0 .2rem 1rem}

/* amenities: one large frame and two stacked on desktop, a swipe row on phones */
.amen-col{background:none!important;border:0!important;padding:0!important}
.amen-col h3{font-family:var(--display)!important;font-size:1.2rem!important;font-weight:500!important;color:var(--ink)!important;margin:1rem 0 .5rem!important}
.amen-col h3 svg{display:none}
.amen-tags{display:block!important}
.amen-cols-img .amen-col h3,.amen-cols-img .amen-tags{margin-left:0!important;margin-right:0!important}
.amen-tags span{display:inline;background:none!important;border:0!important;padding:0!important;font-size:.95rem;color:var(--ink-2);font-weight:400}
.amen-tags span:not(:last-child)::after{content:", "}
@media(min-width:901px){
  .amen-cols.amen-cols-img{grid-template-columns:1.2fr 1fr!important;grid-template-rows:auto auto;column-gap:2.4rem!important;row-gap:2.2rem!important;align-items:start}
  .amen-cols-img .amen-col:first-child{grid-row:1 / span 2}
  .amen-cols-img .amen-col{display:block!important}
  .amen-cols-img .amen-col:first-child .amen-pic img{aspect-ratio:4/5!important;height:auto!important}
  .amen-cols-img .amen-col:not(:first-child) .amen-pic img{aspect-ratio:16/10!important;height:auto!important}
}
@media(max-width:899px){
  .amen-cols.amen-cols-img{display:grid!important;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem!important;padding-bottom:.4rem;margin-right:-1.25rem;padding-right:1.25rem;scrollbar-width:none}
  .amen-cols.amen-cols-img::-webkit-scrollbar{display:none}
  .amen-cols-img .amen-col{scroll-snap-align:start}
}

/* mood band, films, gallery, developer, call back */
.band h2{font-weight:400;letter-spacing:-.02em}
.band h2 em{font-weight:300}
.band-rule{display:none}
.films{background:var(--stone)}
.gal-item .tag2{font-size:.7rem}
#gallery.price-band{background:#fff}
.dev-band,.visit{background:var(--night)}
.dev-stats{gap:0!important;border-top:1px solid rgba(255,255,255,.25)}
.dev-stat{background:none!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.14)!important;padding:1.1rem 0!important}
.dev-stat .n{font-family:var(--text);font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.dev-stat .t{font-size:.8rem;font-weight:500}
.visit-usps p svg{display:none}
.visit-usps p{border-top:1px solid rgba(255,255,255,.14);padding:.7rem 0}

.answer-line{font-size:clamp(1.2rem,2vw,1.5rem)!important;line-height:1.42!important;font-weight:400!important;letter-spacing:-.01em!important}
.typo-grid{max-width:none!important}
.pl-ticket{transform:none!important}
.dev-band h2 em,.visit h2 em{color:inherit!important}
.dev-stat .n{color:#fff!important}
.dev-stat .n span{color:rgba(255,255,255,.72)!important}
.foot-brand .l1{color:#fff!important;font-weight:600!important}

/* FAQ: hairline accordion */
.faq-hint{display:none!important}
details.faq{background:none!important;border:0!important;border-top:1px solid var(--rule)!important;margin:0!important}
details.faq:last-child{border-bottom:1px solid var(--rule)!important}
details.faq summary{padding:1.1rem 0!important}
details.faq .q{font-family:var(--text);font-weight:600;font-size:1rem}

/* footer and fixed pieces */
footer{background:#121314}
.foot-brand .l1{font-family:var(--display);letter-spacing:.08em}
.foot-brand .l1 em{font-weight:300}
.side-tab{font-family:var(--text);font-weight:600;font-size:.8rem}
.modal-card{border:1px solid var(--rule)}
#mTitle{font-family:var(--display);font-weight:500}

/* ---- critique fixes (30 Sep 2026 ~14:05 IST, art director + QA review) ---- */
/* hierarchy: the project name leads, the location line supports it */
.hero h1{font-size:clamp(2rem,1.2rem + 3.2vw,3.5rem)!important;line-height:1.04!important;letter-spacing:-.03em!important}
.hero h1 .gold{display:block!important;font-size:.44em!important;line-height:1.35!important;margin-top:.7rem!important;max-width:none!important}
.hero-copy{max-width:min(46rem,100%)!important}
.sec-head h2,h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.25rem)!important}
.band h2{font-size:clamp(1.75rem,1.2rem + 2vw,2.6rem)!important}
.sec-head h2 em,h2 em,.band h2 em,.visit h2 em,.dev-band h2 em{font-weight:inherit!important}
/* text steps, the wide face only for headings */
.lead,.sec-head .lead{font-size:1.0625rem}
.answer-line{font-family:var(--text)!important;font-size:clamp(1.15rem,1rem + .6vw,1.4rem)!important;line-height:1.5!important;max-width:40ch}
.answer-more,.feature p,.bro-pts p,.loc-card li,.amen-tags span{font-size:.95rem;line-height:1.6}
.loc-card li span{font-size:.95rem;font-weight:500;color:var(--ink)}
.price-notes,.consent{font-size:.75rem!important;line-height:1.55!important;max-width:88ch}
/* prices read first */
.typo-card .pr{font-size:1.25rem!important;font-weight:600!important;letter-spacing:-.01em;margin:.4rem 0 1rem!important}
table.price .pr{font-size:1.35rem!important}
table.price .act{text-align:right}
table.price .act button{font-size:.875rem!important;font-weight:600!important;padding:.75rem 1.25rem!important;min-width:9.5rem}
@media(min-width:900px){table.price .cfg .c-sm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* one CTA family: terracotta brick everywhere, green only for WhatsApp */
.btn-ink,.btn-line,.btn-ghost{background:linear-gradient(135deg,#b85a2c 0%,#96431f 55%,#763217 100%)!important;border:0!important;color:#fff!important}
.btn-ink .ic,.btn-line .ic,.btn-ghost .ic{color:#fff}
.sticky-bar .sb-call{background:linear-gradient(135deg,#7a3418 0%,#4f200e 100%)!important}
.sticky-bar a,.sticky-bar button{text-transform:none!important;letter-spacing:0!important;font-size:clamp(.8rem,3.4vw,.9rem)!important;font-weight:600!important}
/* colour and rhythm */
.pstat .v{color:#fff!important}
footer a{color:#fff!important;text-decoration-color:rgba(255,255,255,.45)}
.typo-note,.pos-note{border-left:0!important;border-top:1px solid var(--rule)!important;padding:1rem 0 0!important}
.typo-grid,.facts-core,.loc-card,.status-grid{border-top-width:1px!important}
.answer-band{background:var(--stone)!important}
.dev-band{background:var(--stone)!important;color:var(--ink)}
.dev-band .sec-bg,.dev-band .sec-bg-cap{display:none!important}
.dev-band::before,.visit::after{display:none!important}
.dev-band :focus-visible{outline-color:#b85a2c!important}
.answer-more b,.answer-line strong{font-weight:inherit!important}
.dev-band h2,.dev-stat .n{color:var(--ink)!important}
.dev-band p,.dev-band .dev-copy p,.dev-stat .t,.dev-stat .n span{color:var(--ink-2)!important}
.dev-band .dev-copy b{color:var(--ink)!important}
.dev-stats{border-top-color:var(--rule)!important}
.dev-stat{border-bottom-color:var(--rule)!important}
.ov-img-shell{transform:none!important}
#gallery .gal-item .tag2{display:none}
/* AA over photos */
.band .imgcap-l{color:rgba(255,255,255,.82)!important;font-size:.72rem}
.sec-bg-cap{color:rgba(255,255,255,.82)!important}
.gal-item span{background:rgba(18,19,20,.72)}
@media(max-width:1100px) and (orientation:portrait){.hero-veil{background:linear-gradient(180deg,rgba(18,19,20,.62) 0%,rgba(18,19,20,.55) 45%,rgba(18,19,20,.4) 58%,rgba(18,19,20,0) 68%,rgba(18,19,20,0) 88%,rgba(18,19,20,.25) 100%)!important}}
/* visible focus in the lead forms */
.hero .form-core :focus-visible,.visit .form-core :focus-visible{outline-color:#b85a2c!important}
.fld input:focus,.fld select:focus,.telwrap select.cc:focus{border-color:#1c1d1f!important}
/* FAQ open state: a clean minus, and the last row of the left column keeps its rule */
details.faq[open] summary .pm{transform:none!important;background:#1c1d1f;border-color:#1c1d1f;color:#fff}
details.faq[open] summary .pm::after{opacity:0}
@media(min-width:900px){.faq-list details.faq:nth-last-child(2){border-bottom:1px solid var(--rule)!important}.faq-list{column-gap:3rem!important}}
/* sideways phones: the prices stay above the bar */
@media(max-width:980px) and (orientation:landscape) and (max-height:500px){.hero .eyebrow,.hero-at{display:none!important}.hero h1{font-size:1.45rem!important;margin-top:0!important}.hero h1 .gold{font-size:.62em!important;margin-top:.3rem!important}}
/* phones and tablets: a clear gap between the photo and the form */
@media(max-width:1100px){.hero .form-shell{margin-top:0!important}}
.modal-head{gap:1rem}
/* one left edge on desktop: nav, hero copy, form and every section share the 1160 px column */
@media(min-width:1101px),(min-width:981px) and (orientation:landscape){
  .nav-pill{padding-left:max(1.5rem,calc((100vw - 1160px)/2))!important;padding-right:max(1.5rem,calc((100vw - 1160px)/2))!important}
  .hero-banner{padding-left:max(1.5rem,calc((100vw - 1160px)/2))!important;padding-right:max(1.5rem,calc((100vw - 1160px)/2))!important}
  .hero-lower{padding-left:max(1.5rem,calc((100vw - 1160px)/2))!important;padding-right:max(1.5rem,calc((100vw - 1160px)/2))!important}
  .hero .form-core{padding-left:0!important;padding-right:0!important}
}
.film-grid{margin-left:0!important}
figcaption{text-align:left}
.nav-wa{width:2.15rem!important;height:2.15rem!important}
.bro-grid>*{min-width:0}
@media(max-width:359px){.pl-ticket .nw{white-space:normal}.nav-logo .l1{letter-spacing:.03em;font-size:.8rem}}

/* ---- 03 Oct 2026 fixes (user picked Template 1: "sab sahi tarike se ... images mai reference images tag hatao ... design error") ---- */
/* the phone price list: no light zebra row on the deep emerald ground (it hid "On Request") */
#price table.price tbody tr{background:transparent!important}
/* no labels or badges on photos: gallery names live in the viewer caption, the pre launch badge goes */
.gal-item span,.gal-item::after,.bro-badge{display:none!important}
/* no mid sentence emphasis in the answer band */
.answer-more b,.answer-line strong{color:inherit!important}
/* teaser films: the three frames use the full column on desktop, captions under each frame left aligned */
@media(min-width:901px) and (min-height:700px){.film-grid{max-width:none!important;margin-left:0!important;margin-right:0!important}}
.film figcaption{text-align:left!important}

/* ---- 06 Oct 2026 fixes (user on the live page: "yeh button thoda upr dikha raha hai") ---- */
/* The hero form button sat 7.6 px above the fields and 4 px shorter wherever it shares a row with them (700 to
   980 px beside Looking for, and the one row layout from 981 px landscape and 1101 px): its top offset still
   assumed the template's small capital labels (.62rem), and T1 labels are .82rem at line height 1.65. Same
   breakpoints as the template's row layouts (981 to 1100 px portrait keeps the button on its own row). The
   fields get one fixed height, the button the same height and the label's exact height as its offset. */
@media(min-width:700px) and (max-width:980px),(min-width:981px) and (max-width:1100px) and (orientation:landscape),(min-width:1101px){
  #heroForm .fld label{line-height:1.65}
  #heroForm .fld input,#heroForm .fld select{height:2.8rem}
  #heroForm .btn-gold{height:2.8rem;margin-top:calc(.82rem * 1.65 + .4rem);padding-top:0;padding-bottom:0}
}
/* T1's white field background also wiped the arrow off the Looking for lists (hero, call back, popup), so they
   read as text boxes; the country code list keeps its own arrow */
.fld select:not(.cc){background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235d5d5d' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem}
/* ===== T1 LUXURY GROUNDS (30 Sep 2026, user: "page ke background theme ko thoda luxury colour dedo and kuch texture") =====
   One deep luxury colour for the feature bands (stat strip, price list, films, call back, footer, nav) and a pale tint
   of it for the light sections, both with a faint olive sprig and blossom pattern (img/tex-leaf-*.webp, 600 px
   alpha tiles, drawn by script; user 30 Sep 14:35: "baki page texture ko floral leave type"), like the leaf shadows
   on the plaster walls of the developer's teaser. Terracotta CTAs stay. The palette is set by the --lux-*
   variables (emerald / teal / navy options were previewed; the picked one is at the end of this block). */
:root{
  --lux-ivory:#f4efe6;--lux-ivory-2:rgba(244,239,230,.78);--lux-rule-deep:rgba(244,239,230,.16);
  --tex-dark:url(img/tex-leaf-dark.webp);--tex-light:url(img/tex-leaf-light.webp);--tex-size:600px;
}
body{background:var(--lux-light) var(--tex-dark) repeat;background-size:var(--tex-size)}
.sec,.fp-band,.answer-band,#overview,#location,#status,#amenities,#gallery,#faq,.hero-lower{background-color:var(--lux-light)!important;background-image:var(--tex-dark)!important;background-size:var(--tex-size)!important}
.answer-band,.bro,.dev-band{background-color:var(--lux-light-2)!important;background-image:var(--tex-dark)!important;background-size:var(--tex-size)!important}
.sec-head h2,.answer-line,.typo-card h3,.status-card .n,.loc-card h3,.amen-col h3,.dev-band h2,#faq h2,.form-core .form-title,.form-core h3{color:var(--lux-heading)!important}
.price-core,.typo-grid,.facts-core,.loc-card,.status-grid{border-top-color:var(--lux-heading)!important}

/* deep bands */
.trust,footer{background-color:var(--lux-deep-2)!important;background-image:var(--tex-light)!important;background-size:var(--tex-size)!important}
#price,.films,.visit{background-color:var(--lux-deep)!important;background-image:var(--tex-light)!important;background-size:var(--tex-size)!important}

/* price list on the deep ground */
#price .sec-head h2{color:var(--lux-ivory)!important}
#price .lead,#price .price-notes,#price .price-notes span{color:var(--lux-ivory-2)!important}
#price .price-core{background:transparent!important;border-top:2px solid var(--lux-ivory)!important}
#price table.price th{color:var(--lux-ivory-2)!important;border-bottom-color:var(--lux-rule-deep)!important;background:transparent!important}
#price table.price td{border-top-color:var(--lux-rule-deep)!important;color:var(--lux-ivory)!important;background:transparent!important}
#price table.price .cfg,#price table.price .pr{color:var(--lux-ivory)!important}
#price table.price .cfg .c-sm{color:var(--lux-ivory-2)!important}
#price .pay-line{background:transparent!important;border-top:1px solid var(--lux-rule-deep)!important;border-bottom:1px solid var(--lux-rule-deep)!important}
#price .pay-line h3,#price .pay-line p{color:var(--lux-ivory)!important}
#price :focus-visible{outline-color:#fff!important}

/* films on the deep ground */
.films .sec-head h2{color:var(--lux-ivory)!important}
.films .lead,.films .imgcap,.films figcaption{color:var(--lux-ivory-2)!important}
.films :focus-visible{outline-color:#fff!important}

/* call back band: the deep colour replaces charcoal */
.visit .sec-bg::after{background:linear-gradient(180deg,rgba(var(--lux-deep-rgb),.86),rgba(var(--lux-deep-rgb),.94))!important}
.visit-usps p{border-top-color:var(--lux-rule-deep)!important}
.trust .pstat{border-left-color:var(--lux-rule-deep)!important}

/* top bar: liquid glass (user 30 Sep 14:35: "top bar wala part liquid glass design kro"). A web approximation of the
   material (backdrop blur + saturation, a tinted fill, a bright top edge, an inner hairline and a soft specular
   sheen); it is not Apple's own Liquid Glass. The one exception to the 2 px radius: a floating capsule. */
.nav{padding:10px 12px 0!important}
.nav .nav-pill{position:relative;isolation:isolate;overflow:hidden;
  width:min(1200px,100%)!important;margin:0 auto;border-radius:20px!important;
  padding:.5rem .55rem .5rem 1.25rem!important;
  background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.05) 55%,rgba(255,255,255,.10)),rgba(var(--lux-deep-rgb),.34)!important;
  -webkit-backdrop-filter:blur(22px) saturate(175%) contrast(1.04)!important;backdrop-filter:blur(22px) saturate(175%) contrast(1.04)!important;
  border:1px solid rgba(255,255,255,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.10),0 18px 44px -24px rgba(0,0,0,.55)!important;
  transition:background .4s var(--ease)}
.nav .nav-pill::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:20px!important;pointer-events:none;
  background:radial-gradient(120% 90% at 18% -20%,rgba(255,255,255,.38),transparent 46%),linear-gradient(90deg,rgba(255,255,255,.12),transparent 38%,transparent 64%,rgba(255,255,255,.10))}
.nav .nav-pill::after{content:"";position:absolute;inset:1px;border-radius:19px!important;border:1px solid rgba(255,255,255,.12);pointer-events:none}
.nav.scrolled .nav-pill{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 55%,rgba(255,255,255,.08)),rgba(var(--lux-deep-rgb),.72)!important}
.nav .nav-cta{border-radius:13px!important}
.nav .nav-wa{border-radius:12px!important}
.nav-logo .l1,.nav-links a,.nav-phone{text-shadow:0 1px 10px rgba(0,0,0,.25)}
@media(max-width:640px){.nav{padding:8px 8px 0!important}.nav .nav-pill{border-radius:18px!important;padding:.45rem .45rem .45rem 1rem!important}.nav .nav-pill::after{border-radius:17px!important}.nav .nav-pill::before{border-radius:18px!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav .nav-pill{background:rgba(var(--lux-deep-rgb),.94)!important}}
@media (prefers-reduced-transparency: reduce){.nav .nav-pill{background:rgba(var(--lux-deep-rgb),.96)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
/* ===== T1 LUXURY GROUNDS END ===== */
:root{--lux-deep:#0f2b23;--lux-deep-rgb:15,43,35;--lux-deep-2:#0a211a;--lux-light:#f3f5f1;--lux-light-2:#e8ede6;--lux-heading:#10291f}
/* ===== T1 REFINED END ===== */