/* Dharti Group — ethos, why-Dharti, story page
   ============================================================ */

/* ============================================================
   ETHOS — Gateway of India (permanence)
   ============================================================ */
.ethos{
  padding:clamp(5rem,12vh,8rem) var(--gutter);
  text-align:center;
}
.ethos__inner{ max-width:42rem; margin:0 auto; }
.ethos__statement{
  font-weight:500; font-size:clamp(1.3rem,2.8vw,2.1rem);
  line-height:1.42; letter-spacing:-.02em; margin:1.2rem 0 1.6rem;
}
.ethos__statement em{ color:var(--gold-2); }
/* Block-level, not inline-flex. `.ethos__link` below is inline-flex, so an
   inline-level signature would let the link ride up onto the same line
   instead of sitting under it. */
.ethos__sign{
  display:flex; justify-content:center; align-items:center; gap:.8rem;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.ethos__rule{ width:36px; height:1px; background:var(--gold); }

/* ============================================================
   WHY DHARTI — Mumbai waterfront
   ============================================================ */
.why{
  padding:clamp(5rem,12vh,8rem) var(--gutter);
}
.stats{
  max-width:820px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr);
  gap:1rem; text-align:center;
}
.stat{ display:flex; flex-direction:column; align-items:center; padding:1rem 0; }
.stat__line{ display:inline-flex; align-items:baseline; }
.stat__num, .stat__suf{
  font-weight:700; color:var(--gold-2);
  font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1;
}
.stat__suf{ margin-left:.05em; }
.stat__label{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); margin-top:.7rem; }
.stats__note{ text-align:center; font-size:.62rem; letter-spacing:.06em; color:var(--muted); margin-top:1.2rem; font-style:italic; }
.why__cols{
  max-width:960px; margin:clamp(2.5rem,5vw,4rem) auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
  padding-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line);
}
.why__idx{ font-size:.62rem; letter-spacing:.18em; color:var(--gold); }
.why__title{ font-weight:500; font-size:1.15rem; color:var(--bone); margin:.7rem 0 .5rem; }
.why__text{ color:var(--bone-dim); font-size:.9rem; line-height:1.65; }

/* light-section overrides for the stat block */
.sec-light .stat__num,
.sec-light .stat__suf{ color:var(--gold-deep); }
.sec-light .stat__label{ color:#5a6478; }

@media (max-width:900px){
  .why__cols{ grid-template-columns:1fr; gap:1.6rem; }
  .stats{ grid-template-columns:1fr; gap:1.8rem; }
}

/* ============================================================
   HOMEPAGE ADDITIONS — ethos body + section links
   ============================================================ */
.ethos__body{
  max-width:34rem; margin:0 auto 1.8rem;
  color:#4a5468; font-size:.95rem; line-height:1.75;
}
.ethos__body em{ color:var(--gold-deep); font-style:normal; letter-spacing:.02em; }
.ethos__link,
.why__link{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); transition:color .3s var(--ease);
}
.ethos__link{ margin-top:1.8rem; }
.ethos__link span,
.why__link span{ transition:transform .4s var(--ease); }
.ethos__link:hover span,
.why__link:hover span{ transform:translateX(5px); }
.why__more{
  max-width:960px; margin:clamp(2.2rem,4vw,3rem) auto 0; text-align:center;
}

/* ============================================================
   THE STORY — page shell
   Everything below is /story/ only.
   ============================================================ */
.story{ --maxw:64rem; }
.story .st-wrap{ max-width:64rem; margin:0 auto; }

.st-sec{ padding:clamp(4.5rem,11vh,8rem) var(--gutter); }
.st-sec--tight{ padding-top:clamp(2.5rem,6vh,4rem); }
.st-sec--light{ background:var(--cream); color:var(--ink); }

.st-rule{
  width:100%; max-width:64rem; height:1px; border:0;
  margin:clamp(3.5rem,8vh,6rem) auto;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(198,161,91,.12) 40%,transparent 100%);
}

/* ---------- page head ---------- */
.st-head{
  padding:clamp(6.5rem,14vh,9.5rem) var(--gutter) clamp(3rem,7vh,5rem);
  /* Stock, from the company profile deck. Bright frame, so it takes a lower
     opacity than the others; held low in the crop to keep the figure under
     the lede rather than behind the h1. */
  --bg:url("../assets/stock/skyline-view.jpg");
  --bg:image-set(url("../assets/stock/skyline-view.webp") type("image/webp"),
                 url("../assets/stock/skyline-view.jpg")  type("image/jpeg"));
  --bg-pos:center 62%;
  --bg-op:.4;
}
.st-head__inner{ max-width:64rem; margin:0 auto; }
.st-head__title{
  font-weight:500; font-size:clamp(2.4rem,7vw,4.6rem); line-height:1.02;
  letter-spacing:-.035em; margin:1rem 0 0; color:var(--bone);
}
.st-head__title em{ font-style:italic; color:var(--gold-2); }
.st-head__lede{
  max-width:34rem; margin:1.8rem 0 0;
  font-size:clamp(1rem,1.7vw,1.15rem); line-height:1.7; color:var(--bone-dim);
}
.st-meta{
  display:flex; flex-wrap:wrap; gap:.6rem 2.4rem;
  margin-top:clamp(2.4rem,5vw,3.4rem);
  padding-top:1.4rem; border-top:1px solid var(--line);
}
.st-meta__item{ display:flex; flex-direction:column; gap:.3rem; }
.st-meta__k{ font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.st-meta__v{ font-size:.86rem; color:var(--bone); letter-spacing:.01em; }

/* ============================================================
   LEADERSHIP
   ============================================================ */
.st-lead{ padding-top:clamp(1rem,3vh,2rem); }
.st-figure{
  max-width:64rem; margin:0 auto;
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:center;
}
.st-figure + .st-figure{ margin-top:clamp(4rem,9vh,7rem); }
.st-figure--flip{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
.st-figure--flip .st-figure__media{ order:2; }
.st-figure--sub .st-portrait{ max-width:22rem; margin-left:auto; }

/* portrait */
.st-portrait{
  position:relative; border:1px solid var(--line); border-radius:2px;
  overflow:hidden; background:var(--ink-2);
}
.st-portrait img{
  display:block; width:100%; height:auto; aspect-ratio:2/3;
  object-fit:cover; object-position:center 18%;
}
.st-portrait::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 48%,rgba(6,13,28,.34) 72%,rgba(6,13,28,.88));
}
.st-portrait--lead{ box-shadow:0 40px 90px -50px rgba(0,0,0,.9); }
.st-portrait--lead::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:2;
  background:linear-gradient(90deg,var(--gold),rgba(198,161,91,0));
}
.st-portrait__cap{
  position:absolute; left:0; bottom:0; z-index:1; padding:1.1rem 1.2rem;
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-dim);
}

/* body beside the portrait */
.st-figure__role{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
}
.st-figure__role::before{ content:""; width:26px; height:1px; background:var(--gold); }
.st-figure__name{
  font-weight:500; font-size:clamp(1.6rem,3.6vw,2.6rem); line-height:1.12;
  letter-spacing:-.025em; margin:.9rem 0 0; color:var(--bone);
}
.st-figure__cred{
  margin:.9rem 0 0; font-size:clamp(1rem,2vw,1.3rem); line-height:1.45;
  color:var(--gold-2); font-style:italic; letter-spacing:-.01em;
}
.st-figure__bio{ margin-top:1.6rem; display:grid; gap:1rem; }
.st-figure__bio p{ color:var(--bone-dim); font-size:.95rem; line-height:1.78; }
.st-figure--sub .st-figure__name{ font-size:clamp(1.35rem,2.6vw,1.9rem); }
.st-figure--sub .st-figure__bio p{ font-size:.9rem; }

/* ============================================================
   THE FOUNDING — editorial columns on cream
   ============================================================ */
.st-year{
  display:block; font-weight:700; line-height:.86; letter-spacing:-.05em;
  font-size:clamp(4rem,15vw,9rem); color:rgba(6,13,28,.09);
  margin-bottom:.9rem;
}
.st-sec--light .st-eyebrow{ color:var(--gold-deep); }
.st-eyebrow{ font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }
.st-title{
  font-weight:500; font-size:clamp(1.6rem,3.6vw,2.5rem); line-height:1.16;
  letter-spacing:-.025em; margin:.9rem 0 0;
}
.st-split{
  max-width:64rem; margin:0 auto;
  display:grid; gap:clamp(1.6rem,5vw,4rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start;
}
.st-prose{ display:grid; gap:1.05rem; }
.st-prose p{ font-size:.98rem; line-height:1.8; }
.st-sec--light .st-prose p{ color:#3f4a5e; }
.st-prose p:first-child{ font-size:1.08rem; line-height:1.7; color:var(--ink); }
.st-sec--light .st-prose p:first-child{ color:var(--ink); }

/* ============================================================
   PHILOSOPHY — the mission statement
   ============================================================ */
.st-mission{ max-width:52rem; margin:0 auto; text-align:center; }
.st-mission__mark{
  display:block; width:34px; height:auto; margin:0 auto 1.6rem; opacity:.9;
}
.st-mission__line{
  font-weight:500; font-size:clamp(2rem,6vw,3.6rem); line-height:1.06;
  letter-spacing:-.04em; color:var(--ink);
}
.st-mission__line em{ font-style:italic; color:var(--gold-deep); }
.st-mission__sub{
  margin-top:1.2rem; font-size:.62rem; letter-spacing:.26em;
  text-transform:uppercase; color:#6b7486;
}
.st-mission__prose{
  max-width:40rem; margin:clamp(2.4rem,5vw,3.4rem) auto 0;
  display:grid; gap:1.05rem; text-align:left;
}
.st-mission__prose p{ color:#3f4a5e; font-size:.98rem; line-height:1.8; }

/* ============================================================
   VISION — over the sky plate
   ============================================================ */
.st-vision{
  position:relative; isolation:isolate;
  /* Was Marine Drive, which put a second skyline under the one already carrying
     .st-head. The copy here is about expanding a footprint and building things
     that outlast their decade, so the frame is Mumbai mid-build: towers going up
     under cranes at golden hour. Path is relative to this stylesheet, matching
     the convention in projects.css, contact.css and teaser.css. */
  --bg:url("../assets/stock/mumbai-rising.jpg");
  --bg:image-set(url("../assets/stock/mumbai-rising.webp") type("image/webp"),
                 url("../assets/stock/mumbai-rising.jpg")  type("image/jpeg"));
}
.st-vision__inner{ max-width:50rem; margin:0 auto; }
.st-vision__lede{
  font-weight:500; font-size:clamp(1.5rem,3.6vw,2.4rem); line-height:1.22;
  letter-spacing:-.03em; margin:1rem 0 0; color:var(--bone);
}
.st-vision__lede em{ font-style:italic; color:var(--gold-2); }
.st-vision__prose{ margin-top:1.8rem; display:grid; gap:1.05rem; }
.st-vision__prose p{ color:var(--bone-dim); font-size:.97rem; line-height:1.8; }

/* ============================================================
   FOOTPRINT — the Mumbai corridor map
   ============================================================ */
.st-foot{
  max-width:64rem; margin:0 auto;
  display:grid; gap:clamp(2rem,6vw,5rem);
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  align-items:center;
}
.st-map{ position:relative; display:flex; flex-direction:column; align-items:center; }
.st-map svg{
  display:block; width:auto; height:min(72vh,700px);
  max-width:100%; margin:0 auto;
}
.st-map__note{
  margin-top:1rem; text-align:center;
  font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; color:#8a93a3;
}
/* map palette */
.st-map{
  --land:rgba(6,13,28,.075);
  --park:rgba(6,13,28,.13);
  --water:rgba(6,13,28,.16);
  --label:#5a6478;
  --labelKey:var(--ink);
}
.map-land{ fill:var(--land); stroke:var(--land); stroke-width:13; stroke-linejoin:round; }
.map-park{ fill:var(--park); }
.map-line{ stroke:rgba(6,13,28,.3); stroke-width:1.1; }
.map-dot{ fill:rgba(6,13,28,.34); }
.map-wave{ stroke:var(--water); stroke-width:1.2; fill:none; stroke-linecap:round; }
.map-label{
  font-family:var(--font); font-size:7px; letter-spacing:.16em;
  text-transform:uppercase; fill:var(--label);
}
.map-label--sea{ font-size:6.5px; letter-spacing:.34em; fill:rgba(6,13,28,.32); }
.map-label--park{ font-size:6px; letter-spacing:.2em; fill:rgba(6,13,28,.42); }
.map-key{
  font-family:var(--font); font-size:10px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; fill:var(--labelKey);
}
.map-pin__core{ fill:var(--gold-deep); }
.map-pin__ring{ fill:none; stroke:var(--gold-deep); stroke-width:1.2; opacity:.45; }
.map-pin__halo{ fill:var(--gold-deep); opacity:.16; transform-box:fill-box; transform-origin:center; }
.map-north{ fill:none; stroke:rgba(6,13,28,.4); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; }

/* SION — where we are going, not where we have built.
   Hollow pin, dashed spur, lighter key: the three filled pins on the spine
   stay the record of completed and ongoing work, and this one reads as the
   next one without being mistaken for them. */
.map-spur{
  fill:none; stroke:var(--gold-deep); stroke-width:1.2;
  stroke-dasharray:3 4; stroke-linecap:round; opacity:.55;
}
.map-pin--next .map-pin__ring{ opacity:.75; stroke-dasharray:2.4 2.4; }
.map-pin--next .map-pin__halo{ opacity:.1; }
.map-key--next{ fill:var(--gold-deep); }
.map-label--next{ font-size:6px; letter-spacing:.2em; fill:rgba(6,13,28,.42); }

@keyframes st-ping{
  0%   { transform:scale(.55); opacity:.34; }
  70%  { transform:scale(1.9);  opacity:0;   }
  100% { transform:scale(1.9);  opacity:0;   }
}
.map-pin__halo{ animation:st-ping 3.4s var(--ease) infinite; }
.map-pin:nth-of-type(2) .map-pin__halo{ animation-delay:.55s; }
.map-pin:nth-of-type(3) .map-pin__halo{ animation-delay:1.1s; }
.map-pin--next .map-pin__halo{ animation-delay:1.65s; }

/* ============================================================
   MEMBERSHIPS + CLOSING
   ============================================================ */
.st-badges{
  max-width:64rem; margin:clamp(2.2rem,5vw,3.2rem) auto 0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1rem;
}
.st-badge{
  display:flex; flex-direction:column; gap:.55rem;
  padding:1.5rem 1.6rem; border:1px solid var(--line); border-radius:2px;
  background:rgba(243,239,230,.02);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.st-badge:hover{ border-color:rgba(198,161,91,.42); background:rgba(198,161,91,.05); }
.st-badge__abbr{ font-weight:700; font-size:1.05rem; letter-spacing:.06em; color:var(--gold-2); }
.st-badge__full{ font-size:.8rem; color:var(--bone-dim); line-height:1.55; }

.st-close{ max-width:64rem; margin:0 auto; text-align:center; }
.st-close__title{
  font-weight:500; font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.18;
  letter-spacing:-.025em; margin:1rem 0 1.8rem; color:var(--bone);
}
.st-close__actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.st-disclaimer{
  max-width:64rem; margin:clamp(2.4rem,5vw,3.4rem) auto 0;
  padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:.68rem; line-height:1.7; color:var(--muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .st-figure,
  .st-split,
  .st-foot{ grid-template-columns:1fr; }
  .st-figure--flip{ grid-template-columns:1fr; }
  .st-figure--flip .st-figure__media{ order:0; }
  .st-figure__media{ max-width:26rem; }
  /* stacked, both portraits sit on the left edge like everything else */
  .st-figure--sub .st-portrait{ max-width:none; margin-left:0; }
  .st-foot{ gap:2.4rem; }
  /* the map carries small type, so on narrow screens it takes the full column
     width and steps its labels up rather than shrinking into illegibility */
  .st-map{ width:100%; }
  .st-map svg{ width:100%; height:auto; max-width:20rem; }
  .map-label{ font-size:8.5px; }
  .map-label--sea{ font-size:8px; }
  .map-key{ font-size:12px; }
  .st-year{ font-size:clamp(3.5rem,18vw,6rem); }
}
@media (max-width:620px){
  .st-badges{ grid-template-columns:1fr; }
  .st-meta{ gap:1.1rem 1.8rem; }
  .st-figure__media{ max-width:none; }
  .st-close__actions{ flex-direction:column; align-items:stretch; }
  .st-close__actions .btn{ justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .map-pin__halo{ animation:none; opacity:.16; }
}