/* ==========================================================================
   Devprayag–Pauri belt land business
   Design tokens derived from the corridor itself:
   deodar forest (dark), the Alaknanda–Bhagirathi confluence (teal),
   cut autumn terraces (harvest gold), river mist (background).
   ========================================================================== */

:root {
  /* --- Surface: the palette's cream, plus two derived tints ------------
     Four values alone give no separation between page and card, so
     everything flattens. --paper and --mist-deep are interpolated. */
  --mist:        #ECDFCC;
  --mist-deep:   #DFD0B8;
  --paper:       #F6F0E6;

  /* --- Ink: #181C14, the darkest value, carried through a ramp ---------- */
  --deodar-900:  #181C14;
  --deodar-800:  #20261C;
  --deodar-700:  #2B3327;
  --deodar-600:  #3C3D37;

  /* --- Sage: #697565. Below 4.5:1 on cream, so it never sets body text.
     Links use the darkened end of the same hue. ------------------------- */
  --sangam-700:  #2A3327;
  --sangam-600:  #3F4B3B;
  --sangam-500:  #697565;
  --sangam-300:  #9AA394;
  --sangam-100:  #DDE3D6;

  /* --- Alert: the one functional warm. Land-law and document warnings
     only -- never decoration. A terracotta accent here is the single
     addition that would make this palette look machine-generated. ------- */
  --terrace-700: #5F3D1B;
  --terrace-600: #7E5125;
  --terrace-500: #96683A;
  --terrace-200: #E3D2B4;
  --terrace-100: #F3EADA;

  /* --- Text: #3C3D37 and a ramp down to hairlines ---------------------- */
  --stone-900:   #181C14;
  --stone-700:   #3C3D37;
  --stone-600:   #4E5147;
  --stone-500:   #5E6357;
  --stone-400:   #686D62;
  --stone-300:   #A9AE9F;
  --stone-200:   #CFCDBC;
  --stone-100:   #E2DCCB;

  /* --- Functional ------------------------------------------------------ */
  --whatsapp:    #167C40;
  --whatsapp-dk: #0F6132;
  --warn-bg:     #F3EADA;
  --warn-br:     #96683A;
  --danger:      #8C3A24;

  /* --- Type ------------------------------------------------------------ */
  --ff-display: "Halant", Georgia, serif;
  --ff-body:    "Mukta", system-ui, -apple-system, sans-serif;
  --ff-data:    "IBM Plex Mono", ui-monospace, monospace;

  --fs-hero:    clamp(2.1rem, 7.2vw, 4.1rem);
  --fs-h1:      clamp(1.85rem, 5.4vw, 3rem);
  --fs-h2:      clamp(1.5rem, 4.2vw, 2.25rem);
  --fs-h3:      clamp(1.2rem, 3vw, 1.5rem);
  --fs-h4:      1.09rem;
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-data:    0.78rem;

  /* --- Space ----------------------------------------------------------- */
  --gap:        1.25rem;
  --section-y:  clamp(3.25rem, 8vw, 6rem);
  --radius:     4px;
  --radius-lg:  8px;
  --shell:      1180px;
  --measure:    68ch;

  --shadow-sm:  0 1px 2px rgba(11,26,22,.06), 0 2px 8px rgba(11,26,22,.05);
  --shadow-md:  0 4px 12px rgba(11,26,22,.09), 0 12px 28px rgba(11,26,22,.07);
  --ease:       0.22s cubic-bezier(.4,.14,.3,1);

  --bottombar-h: 0px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--stone-900);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: var(--bottombar-h);
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; padding: 0; }
a { color: var(--sangam-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }

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

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

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--deodar-900);
  text-wrap: balance;
}

:lang(hi) h1, :lang(hi) h2, :lang(hi) h3, :lang(hi) h4 { line-height: 1.34; letter-spacing: 0; }
:lang(hi) body, html[lang="hi"] body { line-height: 1.8; }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; }

p { text-wrap: pretty; }
strong { font-weight: 600; }

.prose > * + * { margin-top: 1.1em; }
.prose { max-width: var(--measure); }
/* Not buttons. A .btn inside prose was inheriting the body-link
   colour over its own dark fill -- dark text on a dark button,
   which measured 1.05:1 and read as an empty rectangle. */
.prose a:not(.btn) { color: var(--sangam-700); }

.lede {
  font-size: clamp(1.08rem, 2.3vw, 1.32rem);
  line-height: 1.6;
  color: var(--stone-700);
  max-width: 60ch;
}
html[lang="hi"] .lede { line-height: 1.78; }

/* The eyebrow doubles as the corridor wayfinder — it always names a place
   or a stage, never a decorative word. */
.eyebrow {
  font-family: var(--ff-data);
  font-size: var(--fs-data);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terrace-700);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .85rem;
}
.eyebrow::before {
  content: "";
  /*width: 1.6rem;*/
  height: 2px;
  background: var(--terrace-600);
  flex: none;
}
html[lang="hi"] .eyebrow { letter-spacing: .04em; font-family: var(--ff-body); font-size: .8rem; }

.data {
  font-family: var(--ff-data);
  font-size: var(--fs-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.15rem;
}
@media (min-width: 700px) { .shell { padding-inline: 2rem; } }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.section--dark { background: var(--deodar-900); color: var(--stone-200); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--paper); }
.section--dark .eyebrow { color: var(--terrace-500); }
.section--dark .eyebrow::before { background: var(--terrace-500); }
.section--dark .lede { color: var(--stone-300); }
.section--paper { background: var(--paper); }
.section--band { background: var(--mist-deep); }

.section-head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section-head .lede { margin-top: .7rem; }

.grid { display: grid; gap: var(--gap); }
@media (min-width: 620px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 620px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.stack-lg > * + * { margin-top: 2.5rem; }
.center-x { text-align: center; margin-inline: auto; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.4rem;
  border-radius: var(--radius);
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
  min-height: 46px;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--wa      { background: var(--whatsapp); color: #fff; }
.btn--wa:hover{ background: var(--whatsapp-dk); }

.btn--call    { background: var(--deodar-800); color: #fff; }
.btn--call:hover { background: var(--deodar-700); }

.btn--primary { background: var(--terrace-600); color: #fff; }
.btn--primary:hover { background: var(--terrace-700); }

.btn--ghost   { background: transparent; color: var(--deodar-800); border-color: var(--stone-300); }
.btn--ghost:hover { border-color: var(--deodar-800); background: var(--paper); }

.section--dark .btn--ghost { color: var(--paper); border-color: rgba(255,255,255,.32); }
.section--dark .btn--ghost:hover { border-color: var(--paper); background: rgba(255,255,255,.07); }

.btn--sm { padding: .55rem 1rem; min-height: 40px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* Text link with a moving underline — used for card CTAs */
.tlink {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--sangam-700);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-bottom: 1.5px solid var(--sangam-300);
  padding-bottom: 1px;
  transition: border-color var(--ease), gap var(--ease);
}
.tlink:hover { border-color: var(--sangam-700); gap: .6rem; }

/* ==========================================================================
   Header
   ========================================================================== */

/* The dark utility bar that used to sit above the header was removed.
   Its rules went with it. The phone number lives in the action bar on
   phones and in the footer everywhere. */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--stone-200);
}
.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 66px;
}

/* Wordmark: two stacked lines + the corridor tick. The tick is the same
   ascending line as the elevation graphic, shrunk to a monogram. */
.wordmark { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.wordmark__tick { flex: none; width: 30px; height: 30px; }
.wordmark__text { display: flex; flex-direction: column; line-height: 1.12; }
.wordmark__l1 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--deodar-900);
  letter-spacing: -.01em;
}
.wordmark__l2 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: .95rem;
  color: var(--sangam-700);
  letter-spacing: -.01em;
}

.nav { display: none; }
@media (min-width: 1100px) {
  .nav { display: flex; align-items: center; gap: 1.45rem; }
  .nav a {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--stone-700);
    text-decoration: none;
    padding-block: .35rem;
    border-bottom: 2px solid transparent;
    transition: color var(--ease), border-color var(--ease);
    white-space: nowrap;
  }
  .nav a:hover { color: var(--deodar-900); border-color: var(--terrace-500); }
  .nav a[aria-current="page"] { color: var(--deodar-900); border-color: var(--terrace-600); }
}

.masthead__actions { display: flex; align-items: center; gap: .5rem; }
.lang-toggle {
  font-family: var(--ff-data);
  font-size: var(--fs-data);
  border: 1.5px solid var(--stone-300);
  border-radius: var(--radius);
  padding: .42rem .65rem;
  color: var(--stone-700);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--ease), color var(--ease);
}
.lang-toggle:hover { border-color: var(--sangam-600); color: var(--sangam-700); }
html[lang="hi"] .lang-toggle { font-family: var(--ff-body); }

.masthead .btn--wa { display: none; }
@media (min-width: 1000px) { .masthead .btn--wa { display: inline-flex; } }

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1.5px solid var(--stone-300);
  border-radius: var(--radius);
}
.burger svg { width: 20px; height: 20px; }
@media (min-width: 1100px) { .burger { display: none; } }

/* Slide-out panel */
.drawer {
  position: fixed; inset: 0;
  z-index: 90;
  visibility: hidden;
  pointer-events: none;
}
.drawer[data-open="true"] { visibility: visible; pointer-events: auto; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(11,26,22,.55);
  opacity: 0;
  transition: opacity var(--ease);
}
.drawer[data-open="true"] .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(88vw, 360px);
  background: var(--paper);
  padding: 1.15rem 1.15rem 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--ease);
  display: flex;
  flex-direction: column;
}
.drawer[data-open="true"] .drawer__panel { transform: none; }
.drawer__head { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.drawer__close {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--stone-300); border-radius: var(--radius);
}
.drawer__close svg { width: 18px; height: 18px; }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a {
  padding: .82rem .2rem;
  border-bottom: 1px solid var(--stone-100);
  color: var(--deodar-900);
  text-decoration: none;
  font-weight: 500;
}
.drawer nav a[aria-current="page"] { color: var(--terrace-700); }
.drawer__cta { margin-top: 1.4rem; display: grid; gap: .6rem; }

/* Mobile bottom action bar — the single most important control for this
   audience, so it never scrolls away. */
.actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--stone-200);
  border-top: 1px solid var(--stone-200);
  box-shadow: 0 -4px 16px rgba(11,26,22,.09);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.actionbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem .5rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: #fff;
  min-height: 54px;
}
.actionbar svg { width: 18px; height: 18px; }
.actionbar .ab-wa { background: var(--whatsapp); }
.actionbar .ab-call { background: var(--deodar-800); }
@media (min-width: 1000px) { .actionbar { display: none; } }

/* ==========================================================================
   Demo ribbon
   ========================================================================== */

.ribbon {
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-br);
  color: var(--terrace-700);
  font-size: var(--fs-xs);
  text-align: center;
  padding: .5rem 1rem;
  font-weight: 500;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  background: var(--deodar-900);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
/* Layered ridgelines stand in for the photograph until real land photos
   arrive. They are drawn, not stock — the plan forbids stock imagery. */
.hero__ridges {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 62%;
  z-index: -1;
  opacity: .95;
}
.hero__glow {
  position: absolute;
  top: -20%; right: -10%;
  width: 60vw; height: 60vw;
  max-width: 620px; max-height: 620px;
  background: radial-gradient(circle, rgba(27,139,149,.28), transparent 68%);
  z-index: -2;
  pointer-events: none;
}
.hero__in { padding-block: 50px; }
.hero h1 { color: var(--paper); font-size: var(--fs-hero); font-weight: 600; max-width: 16ch; }
.hero .eyebrow { color: var(--terrace-500); }
.hero .eyebrow::before { background: var(--terrace-500); }
.hero__sub {
  margin-top: 1.15rem;
  color: var(--stone-300);
  font-size: clamp(1rem, 2.2vw, 1.16rem);
  max-width: 48ch;
  line-height: 1.68;
}
.hero__cta { margin-top: 1.9rem; }

/* The trust line is quoted verbatim from the intake form. It gets a rule
   above it so it reads as a standing promise, not marketing copy. */
.hero__promise {
  margin-top: 2.1rem;
  padding-top: 1.05rem;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--ff-data);
  font-size: var(--fs-data);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sangam-300);
  max-width: 42ch;
}
html[lang="hi"] .hero__promise { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: .9rem; }
.hero__promise svg { width: 16px; height: 16px; flex: none; }

/* ==========================================================================
   SIGNATURE: the corridor as an elevation profile.
   The belt is a 1,175 m climb over 65 km, and that climb decides view,
   water, winter and price. Drawing it as a flat map would throw away the
   one fact that matters most, so the map IS the elevation profile.
   ========================================================================== */

.corridor { position: relative; }
.corridor__svg { width: 100%; height: auto; overflow: visible; }

.corridor__road { fill: none; stroke: var(--sangam-500); stroke-width: 2.5; stroke-linecap: round; }
.corridor__fill { fill: url(#corridorFill); }
.corridor__svg--m .corridor__fill { fill: url(#corridorFill-m); }
.corridor__grid { stroke: var(--stone-200); stroke-width: 1; stroke-dasharray: 2 4; }
.section--dark .corridor__grid { stroke: rgba(255,255,255,.12); }

.corridor__node { fill: var(--paper); stroke: var(--sangam-600); stroke-width: 2.5; transition: r var(--ease), fill var(--ease); }
.corridor__node--major { fill: var(--terrace-500); stroke: var(--terrace-700); }
.section--dark .corridor__node { fill: var(--deodar-900); }
.section--dark .corridor__node--major { fill: var(--terrace-500); }

.corridor__label {
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 600;
  fill: var(--deodar-900);
}
.section--dark .corridor__label { fill: var(--paper); }
.corridor__alt {
  font-family: var(--ff-data);
  font-size: 10.5px;
  fill: var(--stone-500);
  letter-spacing: .04em;
}
.section--dark .corridor__alt { fill: var(--sangam-300); }

.corridor__hit { cursor: pointer; }
.corridor__hit:hover .corridor__node { r: 8; }
.corridor__hit:hover .corridor__label { fill: var(--terrace-700); }
.section--dark .corridor__hit:hover .corridor__label { fill: var(--terrace-500); }

.corridor__axis {
  font-family: var(--ff-data);
  font-size: 10px;
  fill: var(--stone-400);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Hero variant floats over the ridgelines */
.hero__corridor {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(1.25rem, 4vw, 2.25rem);
  z-index: 2;
}
.hero__corridor .corridor__svg { max-width: var(--shell); margin-inline: auto; }

/* ==========================================================================
   Trust strip
   ========================================================================== */

.trustrip {
  display: grid;
  gap: 1px;
  background: var(--stone-200);
  border-block: 1px solid var(--stone-200);
}
@media (min-width: 620px) { .trustrip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .trustrip { grid-template-columns: repeat(4, 1fr); } }
.trustrip__item { background: var(--paper); padding: 1.6rem 1.35rem; }
.trustrip__fig {
  font-family: var(--ff-display);
  font-size: 2.35rem;
  font-weight: 700;
  line-height: 1;
  color: var(--terrace-600);
  font-variant-numeric: tabular-nums;
}
.trustrip__fig--sm { font-size: 1.5rem; color: var(--sangam-700); }
.trustrip__lbl { margin-top: .5rem; font-size: var(--fs-sm); color: var(--stone-700); line-height: 1.45; }
.trustrip__sub { font-size: var(--fs-xs); color: var(--stone-500); margin-top: .15rem; }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--paper);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.card:hover { border-color: var(--stone-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.card__media { position: relative; aspect-ratio: 4 / 3; background: var(--mist-deep); overflow: hidden; }
.card__media img, .card__media svg { width: 100%; height: 100%; object-fit: cover; }
.card__media a { display: block; height: 100%; }

.card__badges { position: absolute; top: .7rem; left: .7rem; display: flex; flex-wrap: wrap; gap: .35rem; z-index: 2; }
.badge {
  font-family: var(--ff-data);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .55rem;
  border-radius: 3px;
  background: var(--deodar-900);
  color: #fff;
  white-space: nowrap;
}
html[lang="hi"] .badge { font-family: var(--ff-body); letter-spacing: .02em; text-transform: none; font-size: .72rem; }
.badge--available   { background: var(--sangam-600); }
.badge--negotiation { background: var(--terrace-600); }
.badge--sold        { background: var(--stone-500); }
.badge--doc         { background: var(--deodar-800); }
.badge--warn        { background: var(--danger); }
.badge--nri         { background: var(--terrace-600); }

/* Location chip sits on the image bottom, like the reference's banner
   actions, but carries only what a land buyer actually needs: where it is
   and how big it is. */
.card__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.2rem .7rem .65rem;
  background: linear-gradient(to top, rgba(11,26,22,.86), transparent);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  z-index: 2;
}
.ochip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--ff-data);
  font-size: 11px;
  color: #fff;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,.2);
  padding: .24rem .5rem;
  border-radius: 3px;
}
html[lang="hi"] .ochip { font-family: var(--ff-body); font-size: .76rem; }
.ochip svg { width: 12px; height: 12px; opacity: .85; }

.card__body { padding: 1.15rem 1.15rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.card__price {
  font-family: var(--ff-data);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--terrace-700);
  letter-spacing: -.01em;
  margin-bottom: .3rem;
}
.card__price span { font-size: .72rem; color: var(--stone-500); font-weight: 400; }
.card__title { font-size: 1.14rem; line-height: 1.3; margin-bottom: .55rem; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--sangam-700); }
.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .85rem;
  padding-block: .7rem;
  border-top: 1px solid var(--stone-100);
  margin-top: auto;
  font-size: var(--fs-xs);
  color: var(--stone-600);
}
.card__meta dt { font-family: var(--ff-data); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--stone-400); }
html[lang="hi"] .card__meta dt { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: .72rem; }
.card__meta dd { font-weight: 500; color: var(--stone-700); }
.card__metaitem { display: flex; flex-direction: column; gap: 1px; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-top: .85rem; border-top: 1px solid var(--stone-100); }

/* Terrain placeholder — obviously drawn, never mistaken for a photograph */
.placeholder-note {
  position: absolute;
  bottom: .55rem; right: .55rem;
  font-family: var(--ff-data);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  background: rgba(11,26,22,.45);
  padding: .18rem .4rem;
  border-radius: 2px;
  z-index: 3;
}
html[lang="hi"] .placeholder-note { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: .68rem; }

/* ==========================================================================
   Service cards
   ========================================================================== */

.svc {
  background: var(--paper);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.svc:hover { border-color: var(--sangam-300); box-shadow: var(--shadow-sm); }
.svc__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sangam-100);
  color: var(--sangam-700);
  margin-bottom: 1rem;
}
.svc__icon svg { width: 22px; height: 22px; }
.svc h3 { font-size: 1.16rem; margin-bottom: .5rem; }
.svc p { font-size: var(--fs-sm); color: var(--stone-700); }
.svc__link { margin-top: 1.1rem; }

/* ==========================================================================
   Process — a real sequence, so it is genuinely numbered
   ========================================================================== */

.steps { display: grid; gap: 0; counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step { position: relative; padding: 1.6rem 0 1.6rem 3.4rem; border-top: 1px solid rgba(255,255,255,.14); }
@media (min-width: 860px) {
  .step { padding: 2.1rem 1.35rem 0 0; border-top: 1px solid rgba(255,255,255,.2); }
}
.step__n {
  position: absolute;
  left: 0; top: 1.6rem;
  font-family: var(--ff-data);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--terrace-500);
  line-height: 1;
}
@media (min-width: 860px) { .step__n { top: .95rem; font-size: 1.2rem; } }
.step h3 { font-size: 1.1rem; margin-bottom: .8rem; color: var(--paper); }
.step dl { display: grid; gap: .75rem; }
.step dt {
  font-family: var(--ff-data);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sangam-300);
  margin-bottom: .2rem;
}
html[lang="hi"] .step dt { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: .78rem; }
.step dd { font-size: var(--fs-sm); color: var(--stone-300); line-height: 1.6; }

/* ==========================================================================
   Areas
   ========================================================================== */

.arealist { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .arealist { grid-template-columns: repeat(3, 1fr); } }

.area-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.35rem 1.35rem;
  display: flex;
  flex-direction: column;
  transition: border-color var(--ease), box-shadow var(--ease);
  overflow: hidden;
}
.area-card:hover { border-color: var(--sangam-300); box-shadow: var(--shadow-md); }
.area-card--home { border-color: var(--terrace-500); border-width: 1.5px; }
.area-card__alt {
  font-family: var(--ff-data);
  font-size: var(--fs-data);
  color: var(--sangam-700);
  letter-spacing: .06em;
  margin-bottom: .5rem;
  display: flex;
  align-items: baseline;
  gap: .4rem;
}
.area-card__alt strong { font-size: 1.15rem; font-weight: 500; color: var(--deodar-900); }
.area-card h3 { font-size: 1.32rem; margin-bottom: .3rem; }
.area-card__district { font-size: var(--fs-xs); color: var(--stone-500); margin-bottom: .8rem; }
.area-card p { font-size: var(--fs-sm); color: var(--stone-700); margin-bottom: 1.1rem; }
.area-card__link { margin-top: auto; }
.area-card__flag {
  position: absolute;
  top: 0; right: 0;
  background: var(--terrace-600);
  color: #fff;
  font-family: var(--ff-data);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .28rem .6rem;
  border-bottom-left-radius: var(--radius);
}
html[lang="hi"] .area-card__flag { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: .72rem; }

/* ==========================================================================
   Deals
   ========================================================================== */

.deal { background: var(--paper); border: 1px solid var(--stone-200); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.deal__media { position: relative; aspect-ratio: 3 / 2; background: var(--mist-deep); }
.deal__media img, .deal__media svg { width: 100%; height: 100%; object-fit: cover; }
.deal__type {
  position: absolute; top: .65rem; left: .65rem;
  font-family: var(--ff-data); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  background: var(--deodar-900); color: #fff; padding: .28rem .55rem; border-radius: 3px;
}
html[lang="hi"] .deal__type { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: .72rem; }
.deal__body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.deal__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.deal__village { font-family: var(--ff-display); font-size: 1.1rem; font-weight: 600; color: var(--deodar-900); }
.deal__date { font-family: var(--ff-data); font-size: var(--fs-data); color: var(--stone-500); white-space: nowrap; }
.deal__story { font-size: var(--fs-sm); color: var(--stone-700); margin-bottom: .9rem; }
.deal__facts { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; }
.fact {
  font-family: var(--ff-data);
  font-size: 10.5px;
  letter-spacing: .04em;
  background: var(--mist-deep);
  color: var(--stone-700);
  border: 1px solid var(--stone-200);
  padding: .24rem .5rem;
  border-radius: 3px;
}
html[lang="hi"] .fact { font-family: var(--ff-body); font-size: .76rem; }

/* ==========================================================================
   Filters
   ========================================================================== */

.filterbar { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 1.9rem; }
.filtergroup { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.filtergroup__lbl {
  font-family: var(--ff-data);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone-400);
  min-width: 4.5rem;
}
html[lang="hi"] .filtergroup__lbl { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: .78rem; }
.chip {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: .42rem .82rem;
  border: 1.5px solid var(--stone-200);
  border-radius: 100px;
  background: var(--paper);
  color: var(--stone-700);
  transition: border-color var(--ease), background var(--ease), color var(--ease);
  min-height: 36px;
}
.chip:hover { border-color: var(--sangam-300); }
.chip[aria-pressed="true"] { background: var(--deodar-900); border-color: var(--deodar-900); color: #fff; }
.result-count { font-family: var(--ff-data); font-size: var(--fs-data); color: var(--stone-500); }
html[lang="hi"] .result-count { font-family: var(--ff-body); font-size: .85rem; }

.is-hidden { display: none !important; }

.empty-state {
  border: 1.5px dashed var(--stone-300);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--stone-600);
  background: var(--paper);
}
.empty-state p { max-width: 42ch; margin-inline: auto; margin-bottom: 1.1rem; }

/* ==========================================================================
   Property detail
   ========================================================================== */

.detail-grid { display: grid; gap: 2.25rem; }
@media (min-width: 960px) { .detail-grid { grid-template-columns: minmax(0,1.62fr) minmax(0,1fr); gap: 3rem; align-items: start; } }

.gallery { display: grid; gap: .5rem; }
.gallery__main { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background: var(--mist-deep); position: relative; }
.gallery__main img, .gallery__main svg { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.gallery__thumbs button { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; border: 2px solid transparent; background: var(--mist-deep); }
.gallery__thumbs button[aria-current="true"] { border-color: var(--terrace-600); }
.gallery__thumbs img, .gallery__thumbs svg { width: 100%; height: 100%; object-fit: cover; }

.spec-table { border: 1px solid var(--stone-200); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); }
.spec-table div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .82rem 1.05rem; border-bottom: 1px solid var(--stone-100); }
.spec-table div:last-child { border-bottom: none; }
.spec-table dt { font-size: var(--fs-xs); color: var(--stone-500); }
.spec-table dd { font-family: var(--ff-data); font-size: var(--fs-sm); font-weight: 500; color: var(--deodar-900); text-align: right; }
html[lang="hi"] .spec-table dd { font-family: var(--ff-body); }

.sticky-cta { position: sticky; top: 5.5rem; display: grid; gap: 1rem; }
.cta-box { background: var(--paper); border: 1px solid var(--stone-200); border-radius: var(--radius-lg); padding: 1.4rem; }
.cta-box__price { font-family: var(--ff-data); font-size: 1.35rem; font-weight: 500; color: var(--terrace-700); }
.cta-box__note { font-size: var(--fs-xs); color: var(--stone-500); margin-top: .2rem; margin-bottom: 1.15rem; }
.cta-box .btn + .btn { margin-top: .55rem; }
.cta-box__hours { margin-top: .9rem; font-size: var(--fs-xs); color: var(--stone-500); text-align: center; }

.videovisit {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--sangam-100);
  border: 1px solid var(--sangam-300);
  border-radius: var(--radius-lg);
  padding: .95rem 1.05rem;
  font-size: var(--fs-sm);
  color: var(--sangam-700);
}
.videovisit svg { width: 18px; height: 18px; flex: none; margin-top: .2rem; }

.highlights li {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .5rem 0;
  font-size: var(--fs-sm);
  color: var(--stone-700);
}
.highlights svg { width: 17px; height: 17px; flex: none; margin-top: .28rem; color: var(--sangam-600); }

/* ==========================================================================
   Guide / long-form
   ========================================================================== */

.guide-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) { .guide-grid { grid-template-columns: minmax(0,1fr) 260px; gap: 3.5rem; align-items: start; } }

.toc { position: sticky; top: 5.5rem; font-size: var(--fs-sm); }
.toc h2 {
  font-family: var(--ff-data);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone-400);
  margin-bottom: .8rem;
}
html[lang="hi"] .toc h2 { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: .8rem; }
.toc a { display: block; padding: .38rem 0 .38rem .8rem; border-left: 2px solid var(--stone-200); color: var(--stone-600); text-decoration: none; }
.toc a:hover { border-color: var(--terrace-500); color: var(--deodar-900); }
@media (max-width: 999px) { .toc { display: none; } }

.callout {
  border-left: 3px solid var(--terrace-600);
  background: var(--terrace-100);
  padding: 1.15rem 1.3rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-sm);
  color: var(--terrace-700);
}
.callout--info { border-color: var(--sangam-600); background: var(--sangam-100); color: var(--sangam-700); }
.callout strong { display: block; margin-bottom: .3rem; color: inherit; }

.can-cannot { display: grid; gap: var(--gap); }
@media (min-width: 760px) { .can-cannot { grid-template-columns: 1fr 1fr; } }
.cc-box { border-radius: var(--radius-lg); padding: 1.4rem 1.35rem; border: 1px solid; }
.cc-box--can { background: var(--sangam-100); border-color: var(--sangam-300); }
.cc-box--cannot { background: #FBEDEA; border-color: #E4B5AC; }
.cc-box h3 { font-size: 1.14rem; margin-bottom: .9rem; display: flex; align-items: center; gap: .5rem; }
.cc-box--can h3 { color: var(--sangam-700); }
.cc-box--cannot h3 { color: var(--danger); }
.cc-box h3 svg { width: 20px; height: 20px; }
.cc-box li { display: flex; gap: .6rem; padding: .42rem 0; font-size: var(--fs-sm); line-height: 1.55; }
.cc-box li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; margin-top: .58rem; }
.cc-box--can li::before { background: var(--sangam-600); }
.cc-box--cannot li::before { background: var(--danger); }

.reviewed {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ff-data); font-size: var(--fs-data);
  color: var(--stone-500);
  border: 1px solid var(--stone-200);
  background: var(--paper);
  padding: .35rem .7rem; border-radius: 100px;
}
html[lang="hi"] .reviewed { font-family: var(--ff-body); font-size: .82rem; }
.reviewed svg { width: 13px; height: 13px; }

/* ==========================================================================
   Converter widget
   ========================================================================== */

.converter { background: var(--paper); border: 1px solid var(--stone-200); border-radius: var(--radius-lg); padding: 1.5rem 1.4rem; }
.converter h3 { font-size: 1.14rem; margin-bottom: .4rem; }
.converter__intro { font-size: var(--fs-sm); color: var(--stone-600); margin-bottom: 1.15rem; }
.converter__row { display: grid; gap: .8rem; }
@media (min-width: 620px) { .converter__row { grid-template-columns: repeat(3, 1fr); } }
.field label {
  display: block;
  font-family: var(--ff-data);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone-500);
  margin-bottom: .35rem;
}
html[lang="hi"] .field label { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: .82rem; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1.5px solid var(--stone-300);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: var(--fs-body);
  min-height: 46px;
  transition: border-color var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sangam-600); }
.field input[type="number"] { font-family: var(--ff-data); font-variant-numeric: tabular-nums; }
.field textarea { min-height: 110px; resize: vertical; }
.field__hint { font-size: var(--fs-xs); color: var(--stone-500); margin-top: .3rem; }
.field__err { font-size: var(--fs-xs); color: var(--danger); margin-top: .3rem; display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select { border-color: var(--danger); }
.field[data-invalid="true"] .field__err { display: block; }
.converter__note { margin-top: 1rem; font-size: var(--fs-xs); color: var(--terrace-700); background: var(--terrace-100); padding: .6rem .8rem; border-radius: var(--radius); }

/* ==========================================================================
   Form
   ========================================================================== */

.form-grid { display: grid; gap: 1.15rem; }
@media (min-width: 700px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.form-card { background: var(--paper); border: 1px solid var(--stone-200); border-radius: var(--radius-lg); padding: clamp(1.35rem, 4vw, 2.25rem); }
.form-foot { margin-top: 1.5rem; padding-top: 1.35rem; border-top: 1px solid var(--stone-100); }
.checkline { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--fs-sm); color: var(--stone-700); }
.checkline input { width: 20px; height: 20px; margin-top: .18rem; accent-color: var(--sangam-600); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   About
   ========================================================================== */

.about-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 860px) { .about-grid { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 3.25rem; } }
.portrait { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; background: var(--mist-deep); }
.portrait img, .portrait svg { width: 100%; height: 100%; object-fit: cover; }
.portrait__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2rem 1rem .85rem;
  background: linear-gradient(to top, rgba(11,26,22,.85), transparent);
  color: #fff;
  font-size: var(--fs-xs);
}

.pullquote {
  font-family: var(--ff-display);
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  line-height: 1.45;
  color: var(--deodar-900);
  border-left: 3px solid var(--terrace-600);
  padding-left: 1.25rem;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.quote {
  background: var(--paper);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
}
.quote__mark { font-family: var(--ff-display); font-size: 2.6rem; line-height: .7; color: var(--terrace-200); margin-bottom: .4rem; }
.quote p { font-size: 1.04rem; line-height: 1.6; color: var(--stone-900); margin-bottom: 1.1rem; }
.quote footer { margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--stone-100); }
.quote cite { font-style: normal; font-weight: 600; font-size: var(--fs-sm); color: var(--deodar-900); display: block; }
.quote__deal { font-family: var(--ff-data); font-size: var(--fs-data); color: var(--stone-500); }
html[lang="hi"] .quote__deal { font-family: var(--ff-body); font-size: .82rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { border-top: 1px solid var(--stone-200); }
.faq details { border-bottom: 1px solid var(--stone-200); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  font-family: var(--ff-display);
  font-size: 1.09rem;
  font-weight: 600;
  color: var(--deodar-900);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  margin-top: .42rem;
  border-right: 2px solid var(--terrace-600);
  border-bottom: 2px solid var(--terrace-600);
  transform: rotate(45deg);
  transition: transform var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > div { padding-bottom: 1.35rem; font-size: var(--fs-sm); color: var(--stone-700); max-width: var(--measure); }

/* ==========================================================================
   Split CTA band
   ========================================================================== */

.splitcta { display: grid; gap: 1px; background: rgba(255,255,255,.16); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 760px) { .splitcta { grid-template-columns: 1fr 1fr; } }
.splitcta__pane { background: var(--deodar-800); padding: clamp(1.6rem, 4vw, 2.4rem); display: flex; flex-direction: column; }
.splitcta__pane h3 { font-size: 1.3rem; margin-bottom: .55rem; color: var(--paper); }
.splitcta__pane p { font-size: var(--fs-sm); color: var(--stone-300); margin-bottom: 1.4rem; }
.splitcta__pane .btn-row { margin-top: auto; }
.splitcta__tag {
  font-family: var(--ff-data);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terrace-500);
  margin-bottom: .6rem;
}
html[lang="hi"] .splitcta__tag { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: .78rem; }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { background: var(--deodar-900); color: var(--stone-300); padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem; font-size: var(--fs-sm); }
.footer__top { display: grid; gap: 2.25rem; }
@media (min-width: 760px) { .footer__top { grid-template-columns: 1.5fr 1fr 1.2fr; gap: 2.5rem; } }
.footer h4 {
  font-family: var(--ff-data);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sangam-300);
  margin-bottom: .95rem;
}
html[lang="hi"] .footer h4 { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: .8rem; }
.footer a { color: var(--stone-300); text-decoration: none; }
.footer a:hover { color: var(--terrace-500); }
.footer__links { display: grid; gap: .5rem; }
.footer__brand .wordmark__l1 { color: var(--paper); }
.footer__brand .wordmark__l2 { color: var(--sangam-300); }
.footer__nap { margin-top: 1.1rem; line-height: 1.7; color: var(--stone-400); }
.footer__nap a { display: inline-block; }
.footer__phone { font-family: var(--ff-data); letter-spacing: .02em; }
.footer__coverage {
  margin-top: 1.15rem;
  padding: .7rem .9rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  color: var(--stone-300);
}
.footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255,255,255,.13);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--stone-500);
}
.footer__legal { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.footer__tick { margin-bottom: 1rem; opacity: .5; }

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */

.pagehead { background: var(--deodar-900); color: var(--paper); padding-block: clamp(2.25rem, 6vw, 3.75rem); position: relative; overflow: hidden; }
.pagehead h1 { color: var(--paper); max-width: 22ch; }
.pagehead .lede { color: var(--stone-300); margin-top: .9rem; }
.pagehead .eyebrow { color: var(--terrace-500); }
.pagehead .eyebrow::before { background: var(--terrace-500); }
.pagehead__glow {
  position: absolute; top: -40%; right: -5%;
  width: 45vw; height: 45vw; max-width: 460px; max-height: 460px;
  background: radial-gradient(circle, rgba(27,139,149,.22), transparent 70%);
  pointer-events: none;
}

.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: var(--fs-xs); color: var(--stone-400); margin-bottom: .9rem; }
.crumbs a { color: var(--stone-300); text-decoration: none; }
.crumbs a:hover { color: var(--terrace-500); }
.crumbs span[aria-hidden] { opacity: .5; }

/* ==========================================================================
   Misc
   ========================================================================== */

.skip {
  position: absolute; left: -9999px;
  background: var(--terrace-600); color: #fff;
  padding: .7rem 1.1rem; z-index: 200; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; top: 0; }

.disclaimer-note { font-size: var(--fs-xs); color: var(--stone-500); max-width: var(--measure); }

.notice {
  background: var(--warn-bg);
  border: 1px solid var(--warn-br);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  font-size: var(--fs-sm);
  color: var(--terrace-700);
}
.notice strong { display: block; margin-bottom: .25rem; }

.distance-table td, .distance-table th { padding: .62rem .5rem; border-bottom: 1px solid var(--stone-200); text-align: left; font-size: var(--fs-sm); }
.distance-table th { font-family: var(--ff-data); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--stone-400); font-weight: 500; }
html[lang="hi"] .distance-table th { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: .78rem; }
.distance-table td:not(:first-child) { font-family: var(--ff-data); font-variant-numeric: tabular-nums; color: var(--stone-700); }

.bullets li { display: flex; gap: .65rem; padding: .45rem 0; font-size: var(--fs-sm); color: var(--stone-700); line-height: 1.6; }
.bullets li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--terrace-600); margin-top: .6rem; }

.error-code { font-family: var(--ff-data); font-size: clamp(4rem, 18vw, 9rem); font-weight: 500; color: var(--terrace-500); line-height: 1; }

/* --- Corridor: two boards, one per screen size ------------------------- */
.corridor__wrap--d { display: none; }
.corridor__wrap--m { display: block; }
@media (min-width: 720px) {
  .corridor__wrap--d { display: block; }
  .corridor__wrap--m { display: none; }
}
/* The mobile board is a narrower coordinate space, so the same type
   survives being scaled down to a phone. */
.corridor__svg--m .corridor__label { font-size: 17px; }
.corridor__svg--m .corridor__alt   { font-size: 12.5px; }
.corridor__svg--m .corridor__axis  { font-size: 12px; }
.corridor__svg--m .corridor__road  { stroke-width: 3.2; }

/* --- Real media: phone photos and phone video ------------------------- */
/* These are shot vertically on a phone at the plot. Forcing them into a
   landscape frame would crop away the slope, which is the whole subject. */
.card__media { position: relative; }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.playdot {
  position: absolute; inset: 0; margin: auto;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11,26,22,.62); backdrop-filter: blur(2px);
  border: 1.5px solid rgba(255,255,255,.62);
  pointer-events: none;
}
.playdot svg { width: 22px; height: 22px; color: #fff; margin-left: 3px; }

.media { position: relative; background: var(--deodar-900); border-radius: var(--r-md); overflow: hidden; }
.media img, .media video { display: block; width: 100%; height: 100%; }
.media--portrait { aspect-ratio: 3 / 4; }
.media--landscape { aspect-ratio: 4 / 3; }
.media--portrait img, .media--portrait video { object-fit: contain; }
.media--landscape img { object-fit: cover; }
.media--video video { object-fit: contain; background: #000; }
.media__dur {
  position: absolute; right: .6rem; bottom: .6rem;
  font: 500 .7rem/1 var(--font-mono); letter-spacing: .04em;
  color: #fff; background: rgba(11,26,22,.72);
  padding: .28rem .45rem; border-radius: 4px; pointer-events: none;
}
.media[hidden] { display: none; }

/* On a portrait plate the drawn backdrop stops the letterboxing reading as a bug */
.media--portrait::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(160deg, var(--deodar-700), var(--deodar-900));
}
.media--portrait img, .media--portrait video { position: relative; z-index: 1; }

.gallery__thumbs button { position: relative; }
.gallery__thumbs .playdot { width: 30px; height: 30px; border-width: 1px; }
.gallery__thumbs .playdot svg { width: 13px; height: 13px; margin-left: 2px; }

/* --- Eligibility line under a listing description --------------------- */
.eligibility {
  display: flex; gap: .55rem; align-items: flex-start;
  margin-top: 1rem; padding: .8rem .9rem;
  background: var(--sand-100); border-left: 3px solid var(--terrace-600);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .88rem; line-height: 1.5; color: var(--stone-700);
}
.eligibility svg { width: 17px; height: 17px; flex: none; margin-top: .1rem; color: var(--terrace-600); }
.eligibility a { font-weight: 600; white-space: nowrap; }

/* --- What is near this land ------------------------------------------- */
.nearby { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .1rem; }
.nearby__item {
  padding: 1.05rem 0; border-top: 1px solid var(--stone-200);
  display: grid; gap: .35rem;
}
.nearby__item:last-child { border-bottom: 1px solid var(--stone-200); }
.nearby__head {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
}
.nearby__head h3 {
  font: 600 1.02rem/1.3 var(--font-display); margin: 0; color: var(--deodar-900);
}
.nearby__facts { display: flex; gap: .5rem; align-items: baseline; }
.nearby__km, .nearby__alt {
  font: 500 .74rem/1 var(--font-mono); letter-spacing: .04em;
  padding: .26rem .45rem; border-radius: 4px;
}
.nearby__km { background: var(--sangam-50); color: var(--sangam-700); }
.nearby__km--ask { background: var(--stone-100); color: var(--stone-500); }
.nearby__alt { background: var(--stone-100); color: var(--stone-600); }
.nearby__item p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--stone-600); max-width: 62ch; }

/* A quiet marker so temples, viewpoints and towns are scannable apart */
.nearby__item--temple  .nearby__head h3::before,
.nearby__item--viewpoint .nearby__head h3::before,
.nearby__item--river   .nearby__head h3::before,
.nearby__item--town    .nearby__head h3::before,
.nearby__item--village .nearby__head h3::before,
.nearby__item--landmark .nearby__head h3::before {
  content: ""; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: .55rem; vertical-align: middle;
  background: var(--terrace-600);
}
.nearby__item--viewpoint .nearby__head h3::before { background: var(--sangam-600); }
.nearby__item--river   .nearby__head h3::before { background: var(--sangam-600); }
.nearby__item--town    .nearby__head h3::before { background: var(--stone-400); }
.nearby__item--village .nearby__head h3::before { background: var(--stone-400); }

@media (min-width: 760px) {
  .nearby__item { grid-template-columns: 20rem 1fr; gap: 1.5rem; align-items: start; }
  .nearby__head { flex-direction: column; gap: .4rem; }
}

/* A phone-shot vertical clip blown up to a full desktop column looks like a
   mistake. Hold it near its native width and let the plate frame it. */
@media (min-width: 760px) {
  .media--portrait { max-width: 26rem; margin-inline: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v2 refinements
   ═══════════════════════════════════════════════════════════════════════ */

.masthead { transition: padding .18s ease, box-shadow .18s ease; }
body.is-scrolled .masthead {
  padding-block: .45rem;
  box-shadow: 0 1px 0 var(--stone-200), 0 6px 18px -12px rgba(24,28,20,.4);
}
body.is-scrolled .masthead .wordmark__sub { display: none; }

/* --- Price carries the emphasis colour cannot ------------------------- */
.card__price {
  font: 600 1.35rem/1.15 var(--font-mono, var(--ff-data));
  letter-spacing: -.015em;
  color: var(--deodar-900);
}
.card__price span {
  font-size: .68rem; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--stone-500);
}
.cta-box__price { font-size: 1.85rem; letter-spacing: -.02em; }

/* Badges lose their fill. Only warnings get colour now. */
.badge {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--deodar-900);
  backdrop-filter: blur(3px);
}
.badge--doc { color: var(--deodar-900); }
.badge--warn { color: var(--terrace-700); border-color: var(--terrace-500); background: var(--terrace-100); }

/* --- Split spec table ------------------------------------------------- */
.spec-table__split dt {
  font: 500 .68rem/1 var(--ff-data); letter-spacing: .1em; text-transform: uppercase;
  color: var(--stone-400); padding-top: 1rem;
}
.spec-table__split { border-top: 1px solid var(--stone-200); }
.spec-table__pending dt, .spec-table__pending dd { color: var(--stone-400); }
.spec-table__pending dd { font-style: italic; }

/* --- Nearby: elevation as a bar, tying the section to the corridor ---- */
.nearby__bar {
  display: block; height: 3px; margin-top: .45rem;
  background: var(--stone-200); border-radius: 2px; overflow: hidden;
}
.nearby__bar i {
  display: block; height: 100%; background: var(--sangam-500);
  border-radius: 2px; width: var(--pct, 0%);
  transform-origin: left; transform: scaleX(0);
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.is-revealed .nearby__bar i { transform: scaleX(1); }

/* --- Scroll reveals. The old rules that lived here have been folded
       into the appear block at the end of this file, so [data-reveal]
       and everything else now share one start state, one easing and one
       failsafe. The markup did not change. --------------------------- */

/* --- The corridor draws itself as you scroll -------------------------- */
.corridor__road--draw {
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: calc(var(--len, 2000) * (1 - var(--draw, 0)));
}
.corridor__node--draw, .corridor__label--draw, .corridor__alt--draw {
  opacity: 0; transition: opacity .32s ease;
}
.corridor__node--draw.is-lit, .corridor__label--draw.is-lit,
.corridor__alt--draw.is-lit { opacity: 1; }

/* --- Card media zoom -------------------------------------------------- */
.card__media { overflow: hidden; }
.card__media img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
@media (hover: hover) {
  .card:hover .card__media img { transform: scale(1.04); }
}

/* --- Gallery crossfade ------------------------------------------------ */
.gallery__main .media { transition: opacity .28s ease; }
.gallery__main .media[hidden] { display: block; opacity: 0; pointer-events: none;
  position: absolute; inset: 0; }
.gallery__main { position: relative; }

/* --- Docked mini player ----------------------------------------------- */
.miniplayer {
  position: fixed; z-index: 60; right: 1rem; bottom: 1rem;
  width: 180px; border-radius: var(--r-md); overflow: hidden;
  background: var(--deodar-900);
  box-shadow: 0 12px 34px -10px rgba(24,28,20,.6);
  opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.7,.3,1);
}
.miniplayer.is-docked { opacity: 1; transform: none; pointer-events: auto; }
.miniplayer video { display: block; width: 100%; height: auto; }
.miniplayer__bar {
  display: flex; gap: .25rem; justify-content: flex-end;
  padding: .3rem; background: var(--deodar-800);
}
.miniplayer__bar button {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer; color: var(--mist);
  border-radius: 5px;
}
.miniplayer__bar button:hover { background: rgba(236,223,204,.14); }
.miniplayer__bar svg { width: 15px; height: 15px; }
@media (max-width: 700px) and (orientation: portrait) {
  .miniplayer { display: none; }   /* the WhatsApp bar wins the space */
}
@media (max-width: 700px) and (orientation: landscape) {
  .miniplayer { width: 120px; right: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom)); }
}

/* --- Form grouping ---------------------------------------------------- */
.formgroup { border: 0; padding: 0; margin: 0 0 2rem; }
.formgroup__lbl {
  font: 500 .7rem/1 var(--ff-data); letter-spacing: .12em; text-transform: uppercase;
  color: var(--stone-500); display: block; margin-bottom: .9rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--stone-200);
}
.wa-preview {
  margin: 1.25rem 0; padding: .9rem 1rem;
  background: var(--paper); border: 1px solid var(--stone-200);
  border-radius: var(--r-sm);
}
.wa-preview__lbl {
  font: 500 .68rem/1 var(--ff-data); letter-spacing: .1em; text-transform: uppercase;
  color: var(--stone-500); margin: 0 0 .5rem;
}
.wa-preview__body {
  font: 400 .86rem/1.55 var(--ff-body); color: var(--stone-700);
  white-space: pre-wrap; margin: 0; max-height: 11rem; overflow-y: auto;
}
.wa-preview:empty { display: none; }

/* --- Safe areas: without this the sticky bar sits under the iPhone
       home indicator on every notched device. -------------------------- */
.actionbar { padding-bottom: env(safe-area-inset-bottom); }
.hero { min-height: 92svh; }
@supports not (height: 1svh) { .hero { min-height: 92vh; } }

/* --- Motion off means motion off -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .corridor__road--draw { stroke-dashoffset: 0 !important; }
  .corridor__node--draw, .corridor__label--draw, .corridor__alt--draw { opacity: 1 !important; }
  .nearby__bar i { transform: scaleX(1) !important; }
  .miniplayer { transition: none; }
}

/* --- Hero photograph -------------------------------------------------
   A real image with a gradient scrim gives depth for free. Parallax was
   considered and rejected: it is the worst offender for scroll jank on
   mid-range Android and adds nothing to a page whose job is WhatsApp. */
.hero--photo { position: relative; overflow: hidden; }
/* The hero background is the clip itself. Its poster frame covers the
   moment before the first video frame paints, so there is no separate
   still element and nothing to cross-fade between. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(24,28,20,.86) 0%, rgba(24,28,20,.55) 38%, rgba(24,28,20,.92) 100%),
    linear-gradient(90deg, rgba(24,28,20,.72) 0%, rgba(24,28,20,0) 62%);
}
.hero--photo .hero__in { position: relative; z-index: 2; }
.hero--photo .hero__glow { z-index: 1; opacity: .35; }
@media (max-width: 700px) {
  .hero__scrim { background: linear-gradient(180deg, rgba(24,28,20,.80) 0%, rgba(24,28,20,.66) 45%, rgba(24,28,20,.94) 100%); }
}

.footer__mail { color: var(--mist); text-decoration: none; border-bottom: 1px solid rgba(236,223,204,.28); }
.footer__mail:hover { border-bottom-color: var(--mist); }
.footer__replynote {
  display: block; margin-top: .55rem;
  font: 400 .78rem/1.5 var(--ff-body); color: var(--stone-400); font-style: normal;
}

/* --- Founder photograph ----------------------------------------------- */
.founder__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }

/* --- Hero video sits over the still, so a slow connection still gets a
       finished hero rather than a black box. -------------------------- */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%; z-index: 0;
  background: var(--deodar-900);
}

/* iOS draws its own start-playback glyph over any inline video that is
   sitting paused -- in Low Power Mode, or during the moment before the
   first frame decodes. This is a background, not a player: there is
   nothing for anyone to press. The script starts it on the first touch
   if the browser refused to on its own. */
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-enclosure,
.hero__video::-webkit-media-controls-panel,
.hero__video::-webkit-media-controls-play-button,
.hero__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
}
.hero__video { pointer-events: none; }
/* Motion off keeps the element -- hiding it would leave an empty hero.
   The script simply never starts it, so the poster frame stands in as a
   still background. */

/* --- Brand line beneath the hero title -------------------------------- */
.hero__brandline {
  font: 500 clamp(.95rem, 2.2vw, 1.18rem)/1.45 var(--ff-body);
  color: var(--mist); opacity: .9; margin: .55rem 0 0; max-width: 34ch;
  letter-spacing: .002em;
}

/* ══════════════════════════════════════════════════════════════════════
   Turnkey cottage projects
   ══════════════════════════════════════════════════════════════════════ */
.section--cottages { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* --- Two ways in: buy through us, or bring your own land -------------- */
.cpaths {
  list-style: none; margin: 0 0 clamp(2rem, 5vw, 3.25rem); padding: 0;
  display: grid; gap: 1rem;
}
@media (min-width: 780px) { .cpaths { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.cpath {
  background: var(--paper); border: 1px solid var(--stone-200);
  border-left: 3px solid var(--sangam-500);
  border-radius: var(--r-md); padding: 1.5rem 1.4rem;
}
.cpath h3 {
  font: 600 clamp(1.08rem, 2.4vw, 1.28rem)/1.3 var(--ff-display);
  margin: 0 0 .6rem; color: var(--deodar-900);
}
.cpath p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--stone-600); }

/* --- Build system: text beside a real photograph of the frame -------- */
.csystem {
  display: grid; gap: 1.5rem; align-items: center;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}
@media (min-width: 860px) { .csystem { grid-template-columns: 1fr 1.05fr; gap: 2.5rem; } }
.csystem__txt h3 {
  font: 600 clamp(1.3rem, 3vw, 1.75rem)/1.25 var(--ff-display);
  margin: 0 0 .8rem; color: var(--deodar-900);
}
.csystem__txt p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--stone-600); max-width: 54ch; }
.csystem__img {
  border-radius: var(--r-md); overflow: hidden; background: var(--deodar-900);
  aspect-ratio: 4 / 3;
}
.csystem__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cchips { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.cchips li {
  font: 500 .78rem/1 var(--ff-data); letter-spacing: .02em;
  padding: .5rem .7rem; border-radius: 100px;
  background: var(--sangam-100); color: var(--sangam-700);
  border: 1px solid var(--stone-200);
}

/* --- Benefits -------------------------------------------------------- */
.cbenefits {
  list-style: none; margin: 0 0 clamp(2rem, 5vw, 3.25rem); padding: 0;
  display: grid; gap: 1rem;
}
@media (min-width: 720px) { .cbenefits { grid-template-columns: repeat(3, 1fr); } }
.cbenefit {
  padding: 1.4rem 1.3rem; border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--stone-200);
}
.cbenefit h3 {
  font: 600 1.05rem/1.3 var(--ff-display); margin: 0 0 .5rem; color: var(--deodar-900);
}
.cbenefit p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--stone-600); }

/* --- Price and timeline strip ---------------------------------------- */
.cfacts {
  display: grid; gap: 0; margin-bottom: clamp(2rem, 5vw, 3.25rem);
  background: var(--deodar-900); border-radius: var(--r-md); overflow: hidden;
}
@media (min-width: 780px) { .cfacts { grid-template-columns: repeat(3, 1fr); } }
.cfact { padding: 1.6rem 1.4rem; border-bottom: 1px solid rgba(236,223,204,.13); }
.cfact:last-child { border-bottom: 0; }
@media (min-width: 780px) {
  .cfact { border-bottom: 0; border-right: 1px solid rgba(236,223,204,.13); }
  .cfact:last-child { border-right: 0; }
}
.cfact__fig {
  font: 600 clamp(1.5rem, 3.6vw, 2rem)/1 var(--ff-data);
  letter-spacing: -.02em; color: var(--mist); margin: 0 0 .45rem;
}
.cfact__lbl {
  font: 500 .72rem/1.3 var(--ff-data); letter-spacing: .1em; text-transform: uppercase;
  color: var(--sangam-300); margin: 0 0 .5rem;
}
.cfact__sub { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--stone-300); }
.cuses { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.cuses li {
  font: 500 .82rem/1 var(--ff-body); color: var(--mist);
  padding: .45rem .7rem; border: 1px solid rgba(236,223,204,.28); border-radius: 100px;
}

/* --- Gallery of real work -------------------------------------------- */
.cshots__h {
  font: 600 clamp(1.15rem, 2.6vw, 1.4rem)/1.3 var(--ff-display);
  margin: 0 0 1.2rem; color: var(--deodar-900);
}
.cshots { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
@media (min-width: 640px) { .cshots { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cshots { grid-template-columns: repeat(3, 1fr); } }
.cshot { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--paper);
  border: 1px solid var(--stone-200); }
.cshot img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.cshot--portrait img { aspect-ratio: 3 / 4; }
@media (hover: hover) { .cshot:hover img { transform: scale(1.04); } }
.cshot figcaption {
  padding: .8rem .9rem; font-size: .85rem; line-height: 1.5; color: var(--stone-600);
}

/* --- Closing call to action ------------------------------------------ */
.ccta {
  display: grid; gap: 1.4rem; padding: clamp(1.6rem, 4vw, 2.4rem);
  background: var(--mist-deep); border-radius: var(--r-md);
  border: 1px solid var(--stone-200);
}
@media (min-width: 860px) { .ccta { grid-template-columns: 1.4fr auto; align-items: center; gap: 2.5rem; } }
.ccta h3 {
  font: 600 clamp(1.2rem, 2.8vw, 1.55rem)/1.3 var(--ff-display);
  margin: 0 0 .55rem; color: var(--deodar-900);
}
.ccta p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--stone-600); max-width: 58ch; }
.ccta .btn-row { flex-wrap: wrap; }

/* --- Homepage teaser -------------------------------------------------- */
.cteaser {
  display: grid; gap: 1.3rem; align-items: center;
}
@media (min-width: 820px) { .cteaser { grid-template-columns: 1.05fr 1fr; gap: 2.5rem; } }
.cteaser__img { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 10; background: var(--deodar-900); }
.cteaser__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A label beside a call button, e.g. whose number it is */
.btn__note { font-weight: 400; opacity: .72; font-size: .86em; margin-left: .3rem; }

/* --- Brand mark and tagline ------------------------------------------- */
.brandmark { display: block; flex: none; }
.wordmark__tag {
  display: block;
  font: 500 .56rem/1.2 var(--ff-data);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--stone-400); margin-top: .2rem; white-space: nowrap;
}
.footer .wordmark__tag { color: var(--sangam-300); }
/* The tagline is long; it only earns its place once the nav is not competing
   for the same row. Below that it is dropped rather than allowed to push the
   header wider than the viewport. */
.wordmark__tag { display: none; }
@media (min-width: 1280px) { .wordmark__tag { display: block; } }
body.is-scrolled .masthead .wordmark__tag { display: none; }

/* The off-canvas drawer must not widen the document while closed. */
body { overflow-x: hidden; }

/* ------------------------------------------------------------ smooth scroll
   Lenis runtime hooks. The classes are added to <html> only while the
   library is actually driving the scroll, so a JS-off or reduced-motion
   visitor is untouched by any of this. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* =====================================================================
   Appear effect (Framer-style)
   ---------------------------------------------------------------------
   Content blocks rise and fade in as they cross the fold; the first
   screen animates on load instead of on scroll. Only opacity, transform
   and (briefly) filter are touched, so nothing here forces layout.

   The hidden start state is set by CSS at parse time -- so there is no
   flash of finished content -- but only under html.js, and an inline
   failsafe in <head> adds html.appear-fail if the script never arrives.
   JS off, JS broken, or motion turned down: everything is just visible.

   TWO THINGS TO KNOW BEFORE EDITING THIS BLOCK:

   1. The start state is written as :not(.is-revealed) rather than as a
      pair of rules fighting each other. Adding the class stops the rule
      matching, so the element returns to whatever the rest of the sheet
      says it should be -- .card:hover keeps its lift, gallery slides
      keep their crossfade. An override rule would have had to outrank
      all of those, and would have broken them.

   2. The target list is wrapped in :where() so it contributes nothing to
      specificity. Written with :is(), the list would inherit the weight
      of its heaviest branch and quietly outrank half the stylesheet.

   The list is mirrored by APPEAR_SELECTOR in site.js. Change one, change
   the other, and re-run the pairing check.
   ================================================================== */

/* Always on, so the transition survives the start-state rule dropping
   away at reveal time -- otherwise the element would jump, not travel. */
html.js :where(
  .section > .shell > *,
  .section > .shell > .about-grid > *,
  .grid > *,
  .trustrip__item,
  .nearby__item,
  .svc,
  .step,
  .prose > *,
  .highlights > *,
  .bullets > li,
  .gallery,
  .media,
  .spec-table,
  .detail-grid > *,
  .cta-box,
  .converter,
  .videovisit,
  .eligibility,
  .corridor__wrap,
  .form-grid > *,
  [data-reveal]
):not(:where(
  .grid, .prose, .highlights, .detail-grid, .about-grid, .form-grid,
  .btn-row, .gallery__main .media
)) {
  transition:
    opacity .72s cubic-bezier(.16, 1, .3, 1) var(--appear-d, 0ms),
    transform .82s cubic-bezier(.16, 1, .3, 1) var(--appear-d, 0ms);
  /* No will-change on purpose: this matches ~950 elements on the biggest
     page, and promoting all of them would cost more layer memory than
     the animation is worth. Compositing happens anyway once a transition
     on opacity/transform actually starts. */
}

/* The start state itself. */
html.js :where(
  .section > .shell > *,
  .section > .shell > .about-grid > *,
  .grid > *,
  .trustrip__item,
  .nearby__item,
  .svc,
  .step,
  .prose > *,
  .highlights > *,
  .bullets > li,
  .gallery,
  .media,
  .spec-table,
  .detail-grid > *,
  .cta-box,
  .converter,
  .videovisit,
  .eligibility,
  .corridor__wrap,
  .form-grid > *,
  [data-reveal]
):not(:where(
  .grid, .prose, .highlights, .detail-grid, .about-grid, .form-grid,
  .btn-row, .gallery__main .media
)):not(.is-revealed) {
  opacity: 0;
  transform: translate3d(0, var(--appear-y, 26px), 0) scale(var(--appear-s, .985));
}

/* Bigger objects carry more travel, small text blocks less. That
   variation is what keeps a page from reading as one mechanical sweep. */
html.js :where(.card, .media, .gallery, .cta-box, .videovisit, .corridor__wrap) {
  --appear-y: 34px;
  --appear-s: .975;
}
html.js :where(.prose > *, .bullets > li, .crumbs, .eyebrow) {
  --appear-y: 16px;
  --appear-s: 1;
}

/* Stagger. --i is set per sibling by the script and capped, so the tail
   of a long list never waits a second and a half for its turn. */
html.js [style*="--i"] { --appear-d: calc(var(--i, 0) * 70ms); }

/* --- First screen: appears on load, not on scroll -------------------- */
html.js :where(.hero__in > *, .pagehead .shell > *) {
  transition:
    opacity .85s cubic-bezier(.16, 1, .3, 1) var(--appear-d, 0ms),
    transform .95s cubic-bezier(.16, 1, .3, 1) var(--appear-d, 0ms),
    filter .85s cubic-bezier(.16, 1, .3, 1) var(--appear-d, 0ms);
}
html.js :where(.hero__in > *, .pagehead .shell > *):not(.is-revealed) {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(6px);
}

/* --- Failsafe, and motion off means motion off -----------------------
   html.motion-off is set inline in <head> from prefers-reduced-motion,
   and again by the script for save-data and 2G. html.appear-fail is the
   inline timer firing because the script never arrived. Either one puts
   every block straight into its finished state with nothing left to
   play. This is the one place !important is warranted: it exists to beat
   the start state above under any circumstances. */
:is(html.appear-fail, html.motion-off) :is(
  .section > .shell > *,
  .section > .shell > .about-grid > *,
  .grid > *,
  .trustrip__item,
  .nearby__item,
  .svc,
  .step,
  .prose > *,
  .highlights > *,
  .bullets > li,
  .gallery,
  .media,
  .spec-table,
  .detail-grid > *,
  .cta-box,
  .converter,
  .videovisit,
  .eligibility,
  .corridor__wrap,
  .form-grid > *,
  .hero__in > *,
  .pagehead .shell > *,
  [data-reveal]
):not(.gallery__main .media) {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* =====================================================================
   Pointer and scroll interactions
   ---------------------------------------------------------------------
   Magnetic buttons, card tilt, hero parallax, scroll progress and the
   pinned corridor. Every one is applied by the script and every one is
   decoration: with JS off none of these classes are ever set, and the
   page keeps its ordinary hover states.
   ================================================================== */

/* --- Scroll progress ------------------------------------------------
   Above the masthead, which is z-index 60 and sticky. Two pixels: a
   position report, not a feature. */
.scrollprog {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 61;
  pointer-events: none; background: rgba(24, 28, 20, .06);
}
.scrollprog i {
  display: block; height: 100%;
  background: var(--sangam-500);
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

/* --- Hero parallax --------------------------------------------------
   The layers are oversized by exactly the distance they are allowed to
   travel (12% in the script), so drifting never uncovers an edge. */
.hero--photo.has-parallax .hero__video {
  height: 114%;
  will-change: transform;
}

/* --- Magnetic buttons -----------------------------------------------
   While engaged the button's own transform transition is dropped: the
   script is already easing the position, and two easings on one value
   read as rubber. */
.btn.is-magnetic {
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}

/* --- Card tilt -------------------------------------------------------
   The appear block gives every card a .82s transform transition, which
   is right for an entrance and far too slow for a cursor. */
.card.is-tilting { transition: transform .12s linear, border-color var(--ease), box-shadow var(--ease); }
.card.is-tilt-reset { transition: transform .45s cubic-bezier(.16, 1, .3, 1), border-color var(--ease), box-shadow var(--ease); }

/* --- Pinned corridor -------------------------------------------------
   The board holds while the road draws under it. Built by the script,
   so the section is an ordinary block if anything fails. */
.pin { position: relative; }
.pin__inner { position: sticky; top: 6.5rem; }
.corridor__caption {
  margin-top: 1rem; min-height: 1.6em;
  font: 500 var(--fs-sm)/1.5 var(--ff-body);
  color: var(--stone-500); text-align: center;
}
.corridor__caption strong { color: var(--stone-700); font-weight: 600; }
.corridor__caption.is-swap { animation: capfade .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes capfade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* The pin is desktop-only in the script; this keeps the CSS honest if
   the window is resized down with the pin already built. */
@media (max-width: 899px) {
  .pin { height: auto !important; }
  .pin__inner { position: static; }
  .corridor__caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scrollprog { display: none; }
  .pin { height: auto !important; }
  .pin__inner { position: static; }
  .corridor__caption { display: none; }
  .hero--photo.has-parallax .hero__video { height: 100%; transform: none !important; }
  .card.is-tilting, .card.is-tilt-reset { transition: none; }
}

/* =====================================================================
   Framer-style extras
   ---------------------------------------------------------------------
   Cross-page transitions, card video previews, heading line reveals, a
   staggered drawer, a cursor spotlight, scroll skew and a stacked step
   deck. Same rules as everything else here: motion off, save-data or a
   missing script leaves the page working and still.
   ================================================================== */

/* --- 1. Cross-page transitions ---------------------------------------
   Native browser feature, no library. Browsers without it navigate the
   ordinary way and lose nothing. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vt-out .18s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: vt-in .32s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* The masthead keeps its own identity across the navigation, so the
   header does not blink on every page change. */
.masthead { view-transition-name: masthead; }
.actionbar { view-transition-name: actionbar; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* --- 2. Card video previews ------------------------------------------
   The clip sits over the poster still, in the same box, and only fades
   up once it is genuinely playing. */
.card__media { position: relative; }
.card__preview {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
  opacity: 0; transition: opacity .45s ease;
  pointer-events: none;
}
.card__preview.is-playing { opacity: 1; }
.card__media .playdot { z-index: 2; transition: opacity .3s ease; }
.card__media.is-previewing .playdot { opacity: 0; }
.card__preview::-webkit-media-controls,
.card__preview::-webkit-media-controls-start-playback-button {
  display: none !important; -webkit-appearance: none;
}

/* --- 3. Heading line reveal ------------------------------------------
   Each measured line gets a mask; the line inside rides up out of it.
   Until the script has measured, .line-mask does not exist and the
   heading is ordinary text. */
.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: block;
  transform: translateY(100%);
  transition: transform .8s cubic-bezier(.16, 1, .3, 1) var(--appear-d, 0ms);
}
.is-revealed .line-mask > span,
.line-mask.is-revealed > span { transform: none; }

/* --- 4. Staggered drawer ---------------------------------------------
   Pure CSS. The panel already slides; its links now arrive behind it
   rather than with it. */
.drawer nav a {
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.drawer[data-open="true"] nav a { opacity: 1; transform: none; }
.drawer[data-open="true"] nav a:nth-child(1) { transition-delay: 90ms; }
.drawer[data-open="true"] nav a:nth-child(2) { transition-delay: 130ms; }
.drawer[data-open="true"] nav a:nth-child(3) { transition-delay: 170ms; }
.drawer[data-open="true"] nav a:nth-child(4) { transition-delay: 210ms; }
.drawer[data-open="true"] nav a:nth-child(5) { transition-delay: 250ms; }
.drawer[data-open="true"] nav a:nth-child(6) { transition-delay: 290ms; }
.drawer[data-open="true"] nav a:nth-child(7) { transition-delay: 330ms; }
.drawer[data-open="true"] nav a:nth-child(8) { transition-delay: 370ms; }
.drawer[data-open="true"] nav a:nth-child(n+9) { transition-delay: 410ms; }
.drawer[data-open="true"] .drawer__cta { transition: opacity .4s ease 460ms; }

/* --- 5. Cursor spotlight ---------------------------------------------
   Coordinates come from the tilt handler, so this costs no extra
   listener. Pointer devices only -- there is no cursor to follow on a
   phone, and the layer would just be a repaint. */
@media (hover: hover) and (pointer: fine) {
  .card { position: relative; }
  .card::after {
    content: ""; position: absolute; inset: 0; z-index: 3;
    border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(
      340px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, .16), transparent 62%);
  }
  .card:hover::after { opacity: 1; }
}

/* --- 6. Scroll skew ---------------------------------------------------
   Applied by the script to a handful of large blocks only, capped well
   below the point where text starts to look broken. */
.skewable { will-change: transform; }

/* --- 7. Stacked step deck --------------------------------------------
   Each step holds at the top while the next slides over it. Sticky does
   the stacking; where the browser supports scroll-driven animation the
   held card also scales back, which is what sells the depth. */
@media (min-width: 900px) {
  .steps.is-stacked { --step-top: 7rem; }
  .steps.is-stacked .step {
    position: sticky;
    top: calc(var(--step-top) + var(--i, 0) * 1.1rem);
    background: var(--paper);
    border: 1px solid var(--stone-100);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.75rem;
    box-shadow: 0 12px 30px -26px rgba(24, 28, 20, .55);
  }
  @supports (animation-timeline: view()) {
    .steps.is-stacked .step {
      animation: step-recede linear both;
      animation-timeline: view();
      animation-range: exit-crossing 0% exit-crossing 100%;
    }
    @keyframes step-recede {
      to { transform: scale(.965); opacity: .82; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .line-mask > span { transform: none !important; transition: none; }
  .drawer nav a { opacity: 1; transform: none; transition: none; }
  .card__preview { transition: none; }
  .skewable { transform: none !important; }
  .steps.is-stacked .step { position: static; animation: none; }
}

/* --- Hero: brand name over the belt line ------------------------------
   The name carries the hero; the line that used to be the h1 sits under
   it as the tagline. It stays an h2 rather than a paragraph so the
   phrase people actually search for keeps its heading weight. */
.hero__tagline {
  color: var(--mist);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 3.1vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: .5rem 0 0;
  max-width: 22ch;
}
html[lang="hi"] .hero__tagline { font-family: var(--ff-body); letter-spacing: 0; }

/* The name is a name, not a sentence: it should not wrap at 16ch. */
.hero h1 { max-width: 20ch; }

/* --- Hero: the secondary call to action ------------------------------
   .btn--ghost is drawn for light backgrounds -- dark text inside a pale
   hairline. Over a photograph that is nearly invisible, which is what
   was happening here. Solid cream, dark text: it reads at a glance
   without competing with the green primary. */
.hero__cta .btn--ghost {
  background: var(--mist);
  color: var(--deodar-900);
  border-color: var(--mist);
  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .85);
}
.hero__cta .btn--ghost:hover,
.hero__cta .btn--ghost:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--deodar-900);
}

/* --- Footer stamp ----------------------------------------------------
   The year and the date the site was last changed. Written by
   stamp-date.py from the pre-commit hook, so it cannot go stale the way
   a hand-typed year does. */
.footer__stamp {
  width: 100%;
  order: 3;
  margin: .85rem 0 0;
  font: 400 .74rem/1.5 var(--ff-body);
  color: var(--stone-400);
}
.footer__stamp time { font-family: var(--ff-data); letter-spacing: .01em; }

/* =====================================================================
   Media: stop clipping portrait items, and add an expand control
   ---------------------------------------------------------------------
   .gallery__main forces a 16/10 landscape box with overflow:hidden. The
   listing media is portrait (3/4), so the bottom of every portrait video
   was cut off -- taking the native control bar with it. That is why the
   clips looked unplayable on a desktop: the play button was below the
   crop line.
   ================================================================== */
.gallery__main:has(.media) {
  aspect-ratio: auto;
  overflow: visible;
  background: none;
}

/* The expand control sits on every image and clip. */
.media { position: relative; }
.media__expand,
.figure-expand {
  position: absolute; top: .6rem; right: .6rem; z-index: 4;
  display: inline-flex; align-items: center; gap: .35rem;
  font: 500 .74rem/1 var(--ff-body);
  color: #fff; background: rgba(11, 26, 22, .72);
  border: 1px solid rgba(255, 255, 255, .22);
  padding: .42rem .6rem; border-radius: 999px;
  cursor: pointer; backdrop-filter: blur(4px);
  transition: background .2s ease, border-color .2s ease;
}
.media__expand:hover, .figure-expand:hover {
  background: rgba(11, 26, 22, .9); border-color: rgba(255, 255, 255, .5);
}
.media__expand svg, .figure-expand svg { width: 13px; height: 13px; }
/* Keep clear of the duration badge, which sits bottom-right. */
.media--video .media__expand { top: .6rem; }

/* --- Lightbox --------------------------------------------------------
   Built by the script. Plain fixed overlay rather than <dialog>, so the
   behaviour is identical on every browser the site supports. */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(11, 14, 10, .92);
  padding: clamp(.75rem, 3vw, 2rem);
  opacity: 0; transition: opacity .22s ease;
}
.lightbox.is-open { opacity: 1; }

/* The real fix for the frozen page. `.lightbox { display: grid }` is an
   author rule, so it overrides the browser's [hidden] { display: none }.
   Closing the overlay set hidden=true and nothing happened visually: it
   stayed full-screen at opacity 0, eating every click and wheel event.
   Higher specificity, so order does not matter. */
.lightbox[hidden] { display: none; }

/* Third lock, and the one that works during the fade. For the 220ms the
   viewer takes to fade out it is still a full-screen element; without
   this it keeps intercepting the click that follows a close. Only the
   open state accepts pointers. */
.lightbox:not(.is-open) { pointer-events: none; }
.lightbox.is-open { pointer-events: auto; }
.lightbox__inner { max-width: min(96vw, 1400px); max-height: 92vh; display: grid; }
.lightbox img, .lightbox video {
  max-width: 100%; max-height: 92vh;
  width: auto; height: auto; display: block;
  border-radius: var(--radius); background: #000;
}
.lightbox__close {
  position: absolute; top: clamp(.6rem, 2vw, 1.2rem); right: clamp(.6rem, 2vw, 1.2rem);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
}
.lightbox__close:hover { background: rgba(255, 255, 255, .22); }
.lightbox__close svg { width: 18px; height: 18px; }
.lightbox__cap {
  margin: .7rem 0 0; text-align: center;
  font: 400 .82rem/1.5 var(--ff-body); color: var(--stone-300);
}

/* Above the picture, so it is never the thing you cannot reach. */
.lightbox__close { z-index: 2; }

/* Native controls have to be reachable. On a portrait clip the control
   bar is at the bottom of the frame, and at 92vh the frame plus the
   caption is taller than the box that holds them, so the bar gets
   pushed out of sight. */
.lightbox img, .lightbox video { max-height: 86vh; }

body.is-lightbox { overflow: hidden; }

/* --------------------------------------------------- contrast fixes
   --stone-400 is the colour of nearly every small label on the site:
   the SIZE / ACCESS / TERRAIN keys on a card, the filter headings,
   breadcrumbs, table headers, the footer stamp. At #7C8275 it measured
   3.49:1 on paper, where 4.5:1 is the readable minimum for text this
   small, so all of it sat a shade below legible.

   It could not simply be darkened, because the same token is used on
   the dark page header and in the footer, where darkening makes things
   worse -- it was already 4.37:1 there. So the token is darkened for
   the light backgrounds it mostly serves, and lifted back up wherever
   the background is dark. Both directions now clear 4.5:1. */
.footer,
.pagehead,
.section--dark,
.splitcta__pane,
.cfacts { --stone-400: var(--stone-300); }


@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
}

/* Four units now, so the row wraps instead of squeezing to three. */
@media (min-width: 620px) {
  .converter__row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .converter__row { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------------ sort
   Sits on the same row as the result count, pushed to the right, which
   is where people look for it. A native <select> on purpose: it is
   keyboard-operable and screen-reader-labelled for free, and on a phone
   it opens the system picker instead of a list I would have to build
   and then get wrong. The chevron is ours; the arrow the browser draws
   is turned off so the control matches the chips beside it. */
.sortwrap { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.sortwrap .filtergroup__lbl { min-width: 0; }

.sortsel { position: relative; display: inline-flex; align-items: center; }

.sortsel select {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--stone-700);
  background: var(--paper);
  border: 1.5px solid var(--stone-200);
  border-radius: 100px;
  padding: .42rem 2.1rem .42rem .82rem;
  min-height: 36px;
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease);
}
.sortsel select:hover { border-color: var(--sangam-300); }
.sortsel select:focus-visible { outline: 2px solid var(--sangam-500); outline-offset: 2px; }

.sortsel svg {
  position: absolute;
  right: .72rem;
  width: 14px;
  height: 14px;
  color: var(--stone-400);
  pointer-events: none;
}

/* The one thing a rate-based sort has to say out loud, said only when
   a price sort is actually running. */
.sortnote {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--stone-500);
  max-width: 46rem;
  margin: -1.1rem 0 1.4rem;
}
/* Explicit, because an author display rule would otherwise beat the
   browser's [hidden] and leave this on screen permanently. */
.sortnote[hidden] { display: none; }

@media (max-width: 640px) {
  .sortwrap { margin-left: 0; width: 100%; }
  .sortsel { flex: 1 1 auto; }
  .sortsel select { width: 100%; }
}

html[lang="hi"] .sortsel select { font-size: .82rem; }

/* The figure the price sort compares. Sits under the headline price,
   quiet, because it is a cross-check rather than the asking price. */
.card__rate {
  display: block;
  margin-top: .2rem;
  font-family: var(--ff-data);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--stone-400);
}
html[lang="hi"] .card__rate { font-family: var(--ff-body); font-size: .76rem; }

/* ------------------------------------------------------------- the map
   Leaflet supplies the machinery and none of the look. Everything the
   visitor sees -- the pins, the cards, the frame -- is the site's own,
   so the map reads as part of the page rather than an embed dropped
   into it. */
.mapwrap {
  border: 1px solid var(--stone-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
}
.mapwrap__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); }
.mapwrap--solo .mapwrap__grid { grid-template-columns: minmax(0, 1fr); }

.mapwrap__canvas { height: 420px; background: var(--mist-deep); }
.mapwrap--solo .mapwrap__canvas { height: 300px; }

/* Until the tiles arrive there is a quiet placeholder rather than a
   white hole the page jumps around. */
.mapwrap:not(.is-ready) .mapwrap__canvas {
  display: grid; place-items: center;
}
.mapwrap:not(.is-ready) .mapwrap__canvas::after {
  content: '';
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--stone-200); border-top-color: var(--sangam-500);
  animation: mapspin .8s linear infinite;
}
.mapwrap.is-ready .mapwrap__canvas::after,
.mapwrap.is-failed .mapwrap__canvas::after { content: none; }
@keyframes mapspin { to { transform: rotate(360deg); } }

.mapwrap__side {
  border-left: 1px solid var(--stone-100);
  max-height: 420px; overflow-y: auto; padding: .6rem;
  display: grid; gap: .4rem; align-content: start;
}
.mlist__h {
  margin: .2rem .3rem .3rem;
  font-family: var(--ff-data); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--stone-500);
}
html[lang="hi"] .mlist__h { font-family: var(--ff-body); letter-spacing: 0; text-transform: none; font-size: .76rem; }

.mcard {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .6rem;
  align-items: center; padding: .45rem; border-radius: var(--radius);
  transition: background var(--ease);
}
.mcard:hover { background: var(--mist); }
.mcard img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--mist-deep); }
.mcard--sold img { filter: grayscale(1); opacity: .6; }
.mcard__b { min-width: 0; }
.mcard__t {
  margin: 0; font-size: .84rem; font-weight: 600; line-height: 1.3;
  display: flex; align-items: center; gap: .3rem; min-width: 0;
}
.mcard__t > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mcard__sold {
  flex: none; font-size: .62rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--terrace-600);
  background: rgba(190, 90, 60, .12); padding: .08rem .3rem; border-radius: 4px;
}
.mcard__m { margin: .15rem 0 0; font-size: .74rem; color: var(--stone-500);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard__p { margin: .1rem 0 0; font-family: var(--ff-data); font-size: .8rem;
            font-weight: 600; color: var(--stone-700); }

/* The marker. A pill, not a teardrop -- it has to carry a number. */
.mpin {
  display: inline-block; transform: translate(-50%, -50%);
  background: var(--deodar-900); color: var(--mist);
  font-family: var(--ff-data); font-size: .74rem; font-weight: 600;
  padding: .3rem .55rem; border-radius: 999px; white-space: nowrap;
  border: 1.5px solid var(--mist); box-shadow: 0 4px 12px -4px rgba(24,28,20,.5);
  transition: background var(--ease), transform var(--ease);
}
.mpin--sold { background: var(--terrace-600); }
.leaflet-marker-icon:hover .mpin,
.leaflet-marker-icon .mpin.is-on { background: var(--sangam-700); }
.leaflet-marker-icon:focus-visible .mpin { outline: 2px solid var(--sangam-500); outline-offset: 2px; }

.mapnote {
  margin: 0; padding: .6rem .9rem;
  border-top: 1px solid var(--stone-100);
  font-size: var(--fs-xs); line-height: 1.55; color: var(--stone-500);
  background: var(--mist);
}
.mapnote b { color: var(--stone-700); font-weight: 600; }

.leaflet-container { font: inherit; background: var(--mist-deep); }
.leaflet-container a { color: var(--sangam-700); }
.leaflet-control-attribution { font-size: 10px; }

@media (max-width: 800px) {
  .mapwrap__grid { grid-template-columns: minmax(0, 1fr); }
  .mapwrap__side { border-left: 0; border-top: 1px solid var(--stone-100); max-height: 300px; }
  .mapwrap__canvas { height: 320px; }
  .mapwrap--solo .mapwrap__canvas { height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .mapwrap:not(.is-ready) .mapwrap__canvas::after { animation: none; }
}

/* The way out to Google Maps. Their satellite view and their directions,
   in the app already on the phone -- the one job our own tiles cannot
   do without a paid licence. */
.mgo {
  display: inline-flex; align-items: center; gap: .3rem;
  font-weight: 600; color: var(--sangam-700);
  text-decoration: underline; text-underline-offset: 2px;
  white-space: nowrap;
}
.mgo::after {
  content: ''; width: 11px; height: 11px; flex: none;
  background: currentColor;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
}
.mgo:hover { color: var(--sangam-500); }

/* Leaflet's own layer switcher, dressed to match. */
.leaflet-control-layers {
  border: 1px solid var(--stone-200) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px -6px rgba(24,28,20,.3) !important;
  background: var(--paper) !important;
  padding: .3rem .5rem !important;
  font-size: var(--fs-xs);
}
.leaflet-control-layers label { margin: 0; font-weight: 500; color: var(--stone-700); }
.leaflet-control-layers-selector { margin-right: .3rem; }

/* A Google embed fills the frame itself, so the spinner and the tinted
   backdrop that belong to our own map would only show through the edges
   of an iframe that is still loading. */
.mapwrap.is-embed .mapwrap__canvas { background: var(--mist-deep); padding: 0; }
.mapwrap.is-embed .mapwrap__canvas iframe { border: 0; width: 100%; height: 100%; display: block; }