/* Dharti Group — Borivali teaser + coming-soon page
   ============================================================ */

/* The development is unnamed and unregistered. This section carries no
   specification block by design — see README.md before adding one. */
/* A banner, not a panel. The render we hold of the development is 1000px square
   and had to be blurred to survive being shown at 1080px wide, which read as a
   fault rather than as atmosphere. The section now carries the words alone over
   the faint section image, and the render stays on /flagship/ where the page is
   built around it. */
.teaser{
  /* Pressidio is a finished building, and it sat behind copy about an address that
     is still taking shape. Bush-hammered concrete says "under way" instead, and
     being abstract it cannot be mistaken for the development itself. */
  --bg:url("../assets/stock/concrete-facade.jpg");
  --bg:image-set(url("../assets/stock/concrete-facade.webp") type("image/webp"),
                 url("../assets/stock/concrete-facade.jpg")  type("image/jpeg"));
  padding:clamp(6rem,16vh,10rem) var(--gutter); text-align:center;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.teaser__head{ max-width:40rem; margin:0 auto; }
.teaser__title{
  font-weight:500; color:var(--gold-2); letter-spacing:-.02em;
  font-size:clamp(1.6rem,3.6vw,2.6rem); line-height:1.16; margin:.7rem 0 .9rem;
  text-wrap:balance;
}
.teaser__promise{
  color:var(--bone-dim); font-size:.98rem; line-height:1.7;
  max-width:34rem; margin:0 auto;
}

.teaser__cta{ margin-top:2.2rem; }

/* ============================================================
   COMING SOON PAGE
   /flagship/ only. Deliberately spare: the page's job is to say
   very little, beautifully, and to keep a way of reaching people.
   No specification block belongs here — see /flagship/.
   ============================================================ */
.fs{ --maxw:64rem; }
.fs-sec{ padding:clamp(4.5rem,11vh,8rem) var(--gutter); }

/* ---------- page head ---------- */
.fs-head{
  padding:clamp(6.5rem,14vh,9.5rem) var(--gutter) clamp(2.5rem,6vh,4rem); text-align:center;
  /* Stock, from the company profile deck. Nothing of the development itself may
     appear above the fold on an unregistered project, so the head takes the one
     picture that is pure atmosphere: towers converging on open sky, which is the
     apex mark read at full scale. */
  --bg:url("../assets/stock/towers-upward.jpg");
  --bg-pos:center 30%;
  --bg-op:.34;
}
.fs-head__inner{ max-width:44rem; margin:0 auto; }
.fs-head__title{
  font-weight:500; font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.1;
  letter-spacing:-.032em; margin:1.1rem 0 0; color:var(--gold-2);
  text-wrap:balance;
}
.fs-head__title em{ font-style:italic; color:var(--bone); }
.fs-head__lede{
  max-width:32rem; margin:1.5rem auto 0;
  font-size:clamp(1rem,1.7vw,1.12rem); line-height:1.75; color:var(--bone-dim);
}

/* ---------- the render, as atmosphere ---------- */
.fs-panel-sec{ padding:clamp(1.5rem,4vh,3rem) var(--gutter) 0; }
.fs-panel{
  position:relative; isolation:isolate;
  height:clamp(280px,52vh,540px); max-width:1080px; margin:0 auto;
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
}
.fs-panel img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.6) brightness(.7) blur(2px); transform:scale(1.06);
}
.fs-panel__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 60%, rgba(6,13,28,0) 0%, rgba(6,13,28,.74) 72%, rgba(6,13,28,.95) 100%),
    linear-gradient(180deg, rgba(6,13,28,.55), rgba(6,13,28,.24) 45%, rgba(6,13,28,.9));
}
/* the apex mark, sitting in the haze where the building will be */
.fs-panel__apex{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(90px,14vw,150px); height:auto; opacity:.5;
}
.fs-panel__apex path{ fill:var(--gold); }

/* ============================================================
   WHAT WE CAN SAY
   ============================================================ */
.fs-say__inner{
  max-width:64rem; margin:0 auto;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,5vw,4rem);
  padding-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line);
}
.fs-say__title{
  font-weight:500; font-size:clamp(1.1rem,2vw,1.35rem); line-height:1.3;
  letter-spacing:-.015em; color:var(--gold-2);
}
.fs-say__text{
  margin-top:.9rem; color:var(--bone-dim); font-size:.95rem; line-height:1.78;
}

/* ============================================================
   BE THE FIRST TO HEAR
   ============================================================ */
.fs-hear{
  /* Pure weather. Nothing of the development may appear on an unregistered
     project, and a cloud carries no address, no storey count and no skyline that
     could be read as a claim. It also happens to be the palette: gold on navy. */
  --bg:url("../assets/stock/cloud-bank.jpg");
  --bg:image-set(url("../assets/stock/cloud-bank.webp") type("image/webp"),
                 url("../assets/stock/cloud-bank.jpg")  type("image/jpeg"));
  text-align:center; border-top:1px solid var(--line);
}
.fs-hear__inner{ max-width:36rem; margin:0 auto; }
.fs-hear__title{
  font-weight:500; font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.18;
  letter-spacing:-.025em; margin:.8rem 0 .9rem; color:var(--bone);
}
.fs-hear__text{ color:var(--bone-dim); font-size:.95rem; line-height:1.75; }
.fs-hear__form{
  display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center;
  margin:1.9rem 0 .9rem;
}
.fs-hear__field{ flex:1 1 16rem; min-width:0; display:flex; flex-direction:column; gap:.5rem; text-align:left; }
.fs-hear__label{
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.fs-hear__field input{
  width:100%; background:rgba(6,13,28,.55); border:1px solid var(--line);
  color:var(--bone); font-family:inherit; font-size:.9rem;
  padding:.8rem .95rem; border-radius:2px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.fs-hear__field input:focus{ outline:none; border-color:var(--gold); background:rgba(6,13,28,.75); }
.fs-hear__form .btn{ flex:0 0 auto; align-self:flex-end; }
.fs-hear__note{
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

/* ============================================================
   IN THE MEANTIME
   ============================================================ */
.fs-meanwhile__inner{ max-width:44rem; margin:0 auto; text-align:center; }
.fs-meanwhile__title{
  font-weight:500; font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.2;
  letter-spacing:-.022em; margin:.9rem 0 0; color:var(--ink); text-wrap:balance;
}
.fs-meanwhile__text{
  margin-top:1.1rem; color:#4a5468; font-size:.95rem; line-height:1.78;
}
.fs-meanwhile__actions{
  display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2rem;
}
.fs-disclaimer{
  max-width:64rem; margin:clamp(3.5rem,8vh,5.5rem) auto 0;
  padding-top:1.4rem; border-top:1px solid rgba(6,13,28,.14);
  font-size:.62rem; line-height:1.7; color:#8a93a3;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  .fs-say__inner{ grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:520px){
  .fs-hear__form .btn{ flex:1 1 100%; justify-content:center; align-self:stretch; }
}