/* ===========================================================================
   Haware Swaraj, Davdi Gaon, Dombivli East
   Design system: "Set Square". The site is drawn like an architect's issue
   sheet, ruled on the 30 degree geometry of the Haware mark. Hairlines instead
   of shadows, monospaced figures, paper white ground, and picture is never
   covered: there is no scrim anywhere in this stylesheet.

   Contrast: every text on background pair used below is computed, not guessed.
   The table is in section 2.2. Nothing under 4.5:1 carries body text and
   nothing under 3:1 carries large text.
   =========================================================================== */

/* ---------------------------------------------------------------- 1. FONTS */
/* Self-hosted from the Google Fonts CSS API v2 responses, latin subset only.
   Two files, 45 KB total. Archivo is preloaded in the head; the mono is not,
   because it sets nothing above the fold. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/archivo-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric matched fallback, so the swap from Arial to Archivo does not reflow.
   Arithmetic, read off the shipped font tables rather than estimated:
     Archivo  unitsPerEm 1000, sxHeight 526, hhea asc 878, desc 210, gap 0
     Arial    unitsPerEm 2048, sxHeight 1062
     size-adjust      = (526/1000) / (1062/2048) = 1.01436  -> 101.44%
     ascent-override  = (878/1000) / 1.01436             ->  86.56%
     descent-override = (210/1000) / 1.01436             ->  20.70% */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 101.44%;
  ascent-override: 86.56%;
  descent-override: 20.70%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------- 2. TOKENS */

:root {
  /* --- sampled off the real mark, never altered --- */
  --brand-blue: #0f5ea8;
  --brand-red: #e8282b;
  --brand-yellow: #f8ec21;
  --brand-ink: #1f1f1f;
  --brand-teal: #1d8994;

  /* --- ground --- */
  --bg: #ffffff;
  --surface: #f4f7fa;
  --well: #ebf0f5;
  --ground-deep: #072f54;
  --ground-stage: #041c33;

  /* --- text --- */
  --text: #1f1f1f;
  --text-head: #072f54;
  --text-muted: #5a6672;
  --text-label: #46525e;
  --on-deep: #ffffff;
  --on-deep-muted: #b9c6d6;
  --on-deep-dim: #8fa3b8;

  /* --- action --- */
  --primary: #0f5ea8;
  --primary-hover: #0d4b84;
  --cta: #d6242a;
  --cta-hover: #b81c22;
  --accent: #f8ec21;
  --teal-deep: #14646d;
  --deep-hover: #0a3d6b;
  --wa: #25d366;
  --wa-ink: #0b2e16;

  /* --- line --- */
  --line: #d9dee6;
  --line-strong: #b7b7b7;
  --line-on-deep: rgba(255, 255, 255, 0.18);

  /* inherited network alias, still referenced by two spoke pages */
  --ink: #1f1f1f;

  /* --- the signature device --- */
  --triband-h: linear-gradient(
    90deg,
    var(--brand-blue) 0 33.334%,
    var(--brand-red) 33.334% 66.667%,
    var(--brand-yellow) 66.667% 100%
  );
  --triband-v: linear-gradient(
    180deg,
    var(--brand-blue) 0 33.334%,
    var(--brand-red) 33.334% 66.667%,
    var(--brand-yellow) 66.667% 100%
  );

  /* --- type --- */
  --font-ui: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI",
    Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas,
    monospace;

  --t-h1: clamp(2rem, 1.35rem + 2.9vw, 3.25rem); /* 32px to 52px */
  --t-h2: clamp(1.4375rem, 1rem + 1.95vw, 2.375rem); /* 23px to 38px */
  --t-h3: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem); /* 19px to 24px */
  --t-h4: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem); /* 17px to 19px */
  --t-body: 1rem; /* 16px, 17px at 1024 */
  --t-small: 0.875rem; /* 14px, 15px at 1024 */
  --t-label: 0.6875rem; /* 11px, 12px at 1024 */
  --t-fig: 0.9375rem; /* mono figure, 15px, 17px at 1024 */
  --t-big: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); /* 28px to 40px */

  /* --- space --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --gap: clamp(16px, 2.2vw, 32px);
  --pad-section: clamp(56px, 8vw, 112px);

  /* --- radius, shadow --- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 3px;
  --r-pill: 999px;
  --sh-1: 0 1px 0 var(--line);
  --sh-2: 0 10px 28px -14px rgba(7, 47, 84, 0.28);

  /* --- motion --- */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --dur-4: 400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (min-width: 1024px) {
  :root {
    --t-body: 1.0625rem;
    --t-small: 0.9375rem;
    --t-label: 0.75rem;
    --t-fig: 1.0625rem;
  }
}

/* ----------------------------------------------------------- 3. RESET/BASE */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* clip does not create a scroll container, so the sticky header keeps working */
@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

img,
video,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text-head);
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--t-h2);
  line-height: 1.18;
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
}

h4 {
  font-size: var(--t-h4);
  line-height: 1.3;
  font-weight: 600;
}

p {
  margin: 0 0 var(--s-4);
  max-width: 68ch;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--primary-hover);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-4) 0;
}

button {
  font: inherit;
  color: inherit;
}

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

.on-deep :focus-visible,
.hero__panel :focus-visible,
.film :focus-visible,
.footer :focus-visible,
.contact :focus-visible,
.masthead :focus-visible {
  outline-color: var(--accent);
}

::selection {
  background: var(--accent);
  color: var(--brand-ink);
}

/* ------------------------------------------------------- 4. LAYOUT PRIMITIVES */

.container {
  width: min(100% - 32px, 1200px);
  margin-inline: auto;
}

.section {
  padding-block: var(--pad-section);
}

.section--tint {
  background: var(--surface);
}

.section__head {
  margin-bottom: var(--s-6);
}

.section__head.center {
  text-align: center;
}

.section__head.center .eyebrow {
  justify-content: center;
}

.section__title {
  font-size: var(--t-h2);
  margin-top: var(--s-3);
}

.section__title--light {
  color: var(--on-deep);
}

.eyebrow,
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-label);
  font-variant-numeric: tabular-nums;
}

/* the section marker: an exact equilateral, 12 by 10.39, the 0.86603 ratio */
.eyebrow::before,
.hero__eyebrow::before {
  content: "";
  flex: none;
  width: 12px;
  height: 10.39px;
  background: var(--brand-blue);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.eyebrow--light,
.hero__eyebrow {
  color: var(--on-deep-muted);
}

.eyebrow--light::before,
.hero__eyebrow::before {
  background: var(--accent);
}

/* the tri-band rule: decoration and wayfinding only, never a state */
.triband {
  height: 4px;
  background: var(--triband-h);
}

.triband--v {
  width: 6px;
  height: auto;
  background: var(--triband-v);
}

/* An "issued" panel: tri-band head, hairline on the other three sides.
   The band is painted into a transparent 4px top border via background-origin,
   NOT with border-image. border-image with a gradient slices the source across
   all four edges, which paints the left border solid blue and the right solid
   yellow. This way only the top edge carries the band. */
.issued,
.panel,
.facts,
.contact__form,
.modal__dialog,
.film__end,
.footer__bar {
  border: 1px solid var(--line);
  border-top: 4px solid transparent;
  background-color: var(--bg);
  background-image: var(--triband-h);
  background-repeat: no-repeat;
  background-size: 100% 4px;
  background-position: top left;
  background-origin: border-box;
}

.issued,
.panel {
  border-radius: var(--r-0);
  padding: clamp(20px, 3vw, 32px);
}

.issued--spaced {
  margin-top: var(--s-6);
}

.issued > h3 {
  margin-top: var(--s-3);
}

.issued > .btn {
  margin-top: var(--s-5);
}

.panel--tint {
  background-color: var(--surface);
}

.prose p {
  color: var(--text);
}

.reg-no {
  font-family: var(--font-mono);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* a solid caption bar attached below a picture, always outside the frame */
.figbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
  justify-content: space-between;
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 0;
  padding: 10px 14px;
}

.figbar__k {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-label);
}

.figbar__v {
  font-size: var(--t-small);
  color: var(--text-muted);
}

/* ------------------------------------------------------------- 5. BUTTONS */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--r-1);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.btn:active {
  filter: brightness(0.94);
}

.btn--lg {
  min-height: 52px;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* .btn--cta is the primary. .btn--gold is the inherited network name for the
   same job and is kept working so no page in the tree breaks. */
.btn--cta,
.btn--gold {
  background: var(--cta);
  color: #ffffff; /* 5.07:1 */
}

.btn--cta:hover,
.btn--gold:hover {
  background: var(--cta-hover);
  color: #ffffff; /* 6.51:1 */
}

.btn--solid {
  background: var(--primary);
  color: #ffffff; /* 6.59:1 */
}

.btn--solid:hover {
  background: var(--primary-hover);
  color: #ffffff; /* 8.91:1 */
}

.btn--ghost {
  background: transparent;
  color: var(--text-head); /* 13.60:1 on paper */
  border: 1.5px solid var(--line-strong);
}

.btn--ghost:hover {
  border-color: var(--primary);
  color: var(--primary-hover); /* 8.91:1 */
}

/* on a deep ground */
.btn--on-deep,
.btn--outline-light {
  background: transparent;
  color: #ffffff; /* 13.60:1 on --ground-deep */
  border: 1.5px solid var(--on-deep-dim);
}

.btn--on-deep:hover,
.btn--outline-light:hover {
  background: var(--deep-hover);
  border-color: var(--deep-hover);
  color: #ffffff; /* 11.10:1 */
}

.btn--phone svg {
  flex: none;
}

/* -------------------------------------------------------------- 6. TOPBAR */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  min-height: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding-block: 5px;
  font-size: var(--t-label);
}

.topbar__rera {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-label); /* 7.99:1 on surface region */
}

.topbar__rera b,
.topbar__rera .reg-no {
  color: var(--text);
  font-weight: 500;
}

.topbar__rera a {
  color: var(--primary); /* 6.13:1 on surface */
}

.topbar__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-small);
  color: var(--text-muted); /* 5.46:1 on surface */
}

.topbar__contact a {
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
}

.topbar__contact a:hover {
  text-decoration: underline;
}

.topbar__sep {
  color: var(--line-strong);
}

/* -------------------------------------------------------------- 7. HEADER */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur-2) var(--ease-out);
}

.header.scrolled {
  box-shadow: var(--sh-2);
  border-bottom: 0;
}

.header.scrolled::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: var(--triband-h);
}

.header__inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* the brand lockup: a real logo, never upscaled past its native 387 by 181 */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
}

.brand__logo {
  height: 38px;
  width: auto;
  flex: none;
}

.brand__rule {
  width: 1px;
  height: 26px;
  background: var(--line-strong);
  flex: none;
}

.brand__wordmark,
.brand__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brand__name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--text-head); /* 13.60:1 */
}

.brand__name b {
  font-weight: 700;
}

.brand__loc {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--text-label); /* 7.99:1 */
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header__actions .btn {
  min-height: 44px;
  padding-inline: 18px;
}

/* ----------------------------------------------------------------- 8. NAV */

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav__close {
  display: none;
}

.nav__link {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--text); /* 16.48:1 */
  text-decoration: none;
  padding: 8px 0;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 2px;
  width: 0;
  background: var(--primary);
  transition: width var(--dur-2) var(--ease-out);
}

.nav__link:hover {
  color: var(--primary);
}

.nav__link:hover::after,
.nav__link.active::after,
.nav__link[aria-current="page"]::after {
  width: 100%;
}

.nav__link.active,
.nav__link[aria-current="page"] {
  color: var(--primary); /* 6.59:1 */
}

.nav-backdrop {
  display: none;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text-head);
  transition: transform var(--dur-2) var(--ease-out),
    opacity var(--dur-1) linear;
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------------- 9. HERO */
/* Split Sheet. A solid navy type panel beside a clean render.
   No scrim, no gradient, no Ken Burns, no slideshow, no text on picture. */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  background: var(--ground-deep);
}

.hero__figure {
  order: -1;
  position: relative;
  min-width: 0;
  background: var(--surface);
}

.hero__pic,
.hero__slide--first {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 58%;
  display: block;
}

.hero__panel {
  position: relative;
  background: var(--ground-deep);
  color: var(--on-deep);
  min-width: 0;
}

/* the seam. Horizontal at phone, vertical from 1024. */
.hero__panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--triband-h);
  z-index: 2;
}

.hero__panel-inner {
  padding: 32px 16px 34px;
  max-width: 640px;
}

.hero__title {
  color: #ffffff; /* 13.60:1 */
  margin-top: 20px;
  font-size: var(--t-h1);
}

.hero__title-2,
.hero__sub {
  display: block;
  margin-top: 8px;
  font-size: var(--t-h4);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--on-deep-muted); /* 7.85:1 */
}

.hero__lead {
  margin-top: 18px;
  margin-bottom: 0;
  max-width: 46ch;
  font-size: var(--t-h4);
  line-height: 1.55;
  color: var(--on-deep-muted); /* 7.85:1 */
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.hero__cta .btn {
  flex: 1 1 100%;
}

.hero__rule {
  height: 1px;
  background: var(--line-on-deep);
  margin-top: 28px;
}

.hero__reg {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-deep-muted); /* 7.85:1 */
}

.hero__reg b {
  font-weight: 500;
  color: #ffffff; /* 13.60:1 */
  letter-spacing: 0.02em;
}

/* legacy hero hooks kept alive so nothing in the tree breaks.
   .hero__scrim is deliberately neutralised: no wash ever covers a picture. */
.hero__slides {
  display: contents;
}

.hero__scrim {
  display: none !important;
}

.hero__content {
  position: relative;
}

.hero__stats,
.hero__scroll {
  display: none;
}

/* --------------------------------------------------------- 10. STAT STRIP */

.statstrip-band {
  background: var(--surface);
}

.statstrip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  margin: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.stat {
  background: var(--surface);
  padding: 24px 20px;
  margin: 0;
}

.stat__figure {
  display: block;
  font-size: var(--t-big);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-head); /* 12.65:1 on surface */
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block;
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--text-label); /* 7.43:1 on surface */
}

/* ------------------------------------------------------ 11. IDENTITY BAND */

.idband {
  background: var(--ground-deep);
}

.idband__box {
  position: relative;
  aspect-ratio: 1600 / 682;
  background: var(--ground-deep);
  overflow: hidden;
}

.idband__box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.idband__note {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding: 14px 0 16px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--on-deep-muted); /* 7.85:1 */
}

.idband__note a {
  color: var(--accent); /* 11.02:1 */
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ------------------------------------------------------- 12. PROJECT BAND */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

.about__media {
  order: -1;
  min-width: 0;
}

.about__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-0);
}

.about__media-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
  justify-content: space-between;
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 0;
  padding: 10px 14px;
}

.about__media-badge strong {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-label); /* 7.99:1 */
}

.about__media-badge span {
  font-size: var(--t-small);
  color: var(--text-muted); /* 5.87:1 */
}

.about__text .section__title {
  margin-bottom: var(--s-4);
}

.about__list {
  margin: var(--s-5) 0;
  border-top: 1px solid var(--line);
}

.about__list li {
  border-bottom: 1px solid var(--line);
  padding: 11px 0 11px 20px;
  position: relative;
  font-size: var(--t-body);
}

.about__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 6px;
  height: 2px;
  background: var(--brand-blue);
}

/* -------------------------------------------------------- 13. THE REGISTER */
/* The centrepiece of this site. Values that are a number, a date, a coordinate
   or a registration string are set in the mono; everything else is Archivo.
   That single rule is what makes the table read as a record. */

.facts {
  margin: 0;
}

.facts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.facts__row:nth-child(even) {
  background: var(--well);
}

.facts__row:last-child {
  border-bottom: 0;
}

.facts dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-label); /* 7.99 on paper, 6.97 on the well stripe */
}

.facts dd {
  margin: 0;
  color: var(--text); /* 16.48 on paper, 14.38 on the well stripe */
  font-size: var(--t-body);
}

.facts dd b,
.facts dd .num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-fig);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.facts__note {
  margin-top: var(--s-5);
  font-size: var(--t-small);
  color: var(--text-muted); /* 5.87:1 */
  max-width: 68ch;
}

/* --------------------------------------------------------- 14. RESIDENCES */

.configs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--gap);
}

.config-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-0);
  padding: clamp(20px, 3vw, 28px);
  transition: border-color var(--dur-2) var(--ease-out);
  display: flex;
  flex-direction: column;
}

.config-card:hover {
  border-color: var(--primary);
}

.config-card__k {
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--text-head); /* 13.60:1 */
  letter-spacing: -0.01em;
}

.config-card__area {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-fig);
  color: var(--text); /* 16.48:1 */
  font-variant-numeric: tabular-nums;
}

.config-card__meta {
  margin-top: 4px;
  font-size: var(--t-small);
  color: var(--text-muted); /* 5.87:1 */
}

.config-card p {
  font-size: var(--t-small);
  color: var(--text);
  margin-bottom: var(--s-5);
}

.config-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* what the enquirer receives, in place of a price table */
.request-panel {
  display: grid;
  gap: 0;
  margin-top: var(--s-4);
}

.request-panel__row {
  display: grid;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.request-panel__row:first-child {
  border-top: 1px solid var(--line);
}

.request-panel__k {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-label); /* 7.99:1 */
}

.request-panel__v {
  font-size: var(--t-h4);
  color: var(--text); /* 16.48:1 */
}

/* --------------------------------------------- 15. PLAN AND SHEET VIEWER */
/* Wide technical drawings pan inside their own box. The grid track must be
   minmax(0, 1fr), never 1fr, or the drawing stretches its track instead of
   scrolling and the page gains a horizontal scrollbar at 360px. */

.plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}

.plan {
  position: relative;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--r-0);
  min-width: 0;
}

.plan__tab {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 52px;
  height: 26px;
  padding-right: 8px;
  background: var(--ground-deep);
  /* 15.01px is 26 * tan30, so the lead edge runs at exactly 30 degrees,
     the same angle as the outer edges of the mark */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 15.01px 100%);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent); /* 11.02:1 */
}

.plan__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  background: var(--well);
}

.plan__scroll img {
  min-width: 760px;
  width: 100%;
  height: auto;
  display: block;
}

.plan__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  background: var(--bg);
}

.plan__cap strong {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-label); /* 7.99:1 */
}

.plan__cap span {
  font-size: var(--t-small);
  color: var(--text-muted); /* 5.87:1 */
}

.plan__hint {
  padding: 0 14px 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--text-label); /* 7.99:1 */
}

@media (min-width: 720px) {
  .plan__hint {
    display: none;
  }
}

/* -------------------------------------------------- 16. AMENITY SCHEDULE */
/* Typographic, because it is read off labelled drawings. No icon set ships. */

.realm + .realm {
  margin-top: var(--s-6);
}

.realm__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--s-2);
}

.realm__head::before {
  content: "";
  flex: none;
  width: 12px;
  height: 10.39px;
  background: var(--brand-blue);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.realm__name {
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--text-head); /* 13.60:1 */
  letter-spacing: -0.01em;
}

.realm__head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.realm__size {
  order: 3;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-label); /* 7.99:1 */
}

.realm__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0 var(--gap);
}

.realm__list li {
  position: relative;
  padding: 11px 0 11px 20px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-body);
  color: var(--text); /* 16.48:1 */
}

.realm__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 6px;
  height: 2px;
  background: var(--brand-blue);
}

/* ----------------------------------------------------------- 17. THE FILM */
/* Click to play. Nothing is ever drawn over the picture between play and end. */

.film {
  background: var(--ground-deep);
  padding-block: var(--pad-section);
  position: relative;
}

.film::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--triband-h);
}

.film__head {
  transition: opacity var(--dur-3) var(--ease-out);
}

.film .section__title {
  color: var(--on-deep);
}

.film__lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-3);
  margin-bottom: var(--s-6);
}

.film__lead p {
  margin: 0;
  max-width: 46ch;
  font-size: var(--t-h4);
  line-height: 1.55;
  color: var(--on-deep-muted); /* 7.85:1 */
}

.film__chip {
  flex: none;
  border: 1px solid var(--line-on-deep);
  border-radius: var(--r-1);
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--on-deep-dim); /* 5.25:1, 13px so the floor is cleared */
  font-variant-numeric: tabular-nums;
}

.film__stage {
  position: relative;
  max-width: 1000px;
  margin-inline: auto;
  aspect-ratio: 1920 / 818;
  background: var(--ground-stage);
  border-radius: var(--r-0);
  transition: max-width var(--dur-3) var(--ease-out);
}

.film__stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--ground-stage);
}

/* the only thing on the poster is a 64px opaque disc, inset from the bottom
   left so it never sits on the frame's subject. No wash, no gradient. */
.film__play {
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--r-pill);
  background: rgba(7, 47, 84, 0.92);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: opacity var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out);
}

.film__play::before {
  content: "";
  width: 18px;
  height: 20.78px;
  margin-left: 4px;
  background: #ffffff; /* 13.60:1 against the disc */
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.film__play:hover {
  background: rgba(7, 47, 84, 1);
}

/* the invitation. It sits in a solid bar attached to the stage's bottom edge,
   outside the picture, so the frame is never covered. */
.film__bar {
  max-width: 1000px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-4);
  background: var(--ground-stage);
  border: 1px solid var(--line-on-deep);
  border-top: 0;
  transition: max-width var(--dur-3) var(--ease-out);
}

.film__bar-copy {
  min-width: 0;
}

.film__bar-copy b {
  display: block;
  font-size: var(--t-h4);
  font-weight: 600;
  color: #ffffff; /* 17.23:1 on the stage ground */
}

.film__bar-copy span {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-deep-muted); /* 9.94:1 on the stage ground */
}

.film__bar .btn {
  margin-left: auto;
}

.film--playing .film__play,
.film--playing .film__bar {
  opacity: 0;
  visibility: hidden;
}

.film--playing .film__bar {
  height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

.film--playing .film__head {
  opacity: 0.35;
}

.film--playing.film--ended .film__head {
  opacity: 1;
}

.film--playing .film__stage {
  max-width: min(1200px, 100%);
}

.film__cap {
  margin: var(--s-4) auto 0;
  max-width: 1000px;
  font-size: var(--t-small);
  color: var(--on-deep-muted); /* 7.85:1 */
}

.film__transcript {
  max-width: 1000px;
  margin: var(--s-3) auto 0;
  border-top: 1px solid var(--line-on-deep);
  padding-top: var(--s-3);
}

.film__transcript summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent); /* 11.02:1 */
}

.film__transcript p {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  color: var(--on-deep-muted); /* 7.85:1 */
}

/* the conversion moment: a solid card BELOW the stage, never over the frame */
.film__end {
  max-width: 1000px;
  margin: var(--s-5) auto 0;
  background-color: var(--ground-stage);
  border-right-color: var(--line-on-deep);
  border-bottom-color: var(--line-on-deep);
  border-left-color: var(--line-on-deep);
  padding: clamp(20px, 3vw, 28px);
  display: none;
  transform: translateY(12px);
  opacity: 0;
  transition: transform var(--dur-3) var(--ease-out),
    opacity var(--dur-3) var(--ease-out);
}

.film__end h3 {
  color: #ffffff; /* 13.60:1 */
}

.film__end p {
  margin: var(--s-2) 0 var(--s-5);
  font-size: var(--t-small);
  color: var(--on-deep-muted); /* 7.85:1 */
}

.film__end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.film--ended .film__end {
  display: block;
}

.film--ended .film__end.is-in {
  transform: none;
  opacity: 1;
}

/* ------------------------------------------------------------ 18. LOCATION */

.near {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--gap);
}

.near__group {
  min-width: 0;
}

.near__label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-label); /* 7.99:1 */
}

.near__items li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--text); /* 16.48:1 */
}

/* ------------------------------------------------------------- 19. GALLERY */

.g-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--s-4);
}

.g-item {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-0);
  background: var(--bg);
  text-decoration: none;
  cursor: zoom-in;
  transition: border-color var(--dur-2) var(--ease-out);
}

.g-item:hover {
  border-color: var(--primary);
}

/* Never a fixed grid-auto-rows height and never height:100% without an
   aspect-ratio. That pairing is what produced 0px tiles on phones. */
.g-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.g-item--wide img,
.g-item--fit img {
  object-fit: contain;
  background: var(--well);
}

.g-cap {
  display: block;
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-label); /* 7.99:1 */
}

/* ------------------------------------------------------- 20. PROMOTER BAND */

.promoter__logo {
  width: 240px;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--s-5);
}

.promoter__group {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-deep); /* 6.35:1 on surface, the one place teal carries text */
}

.promoter__name {
  margin: var(--s-2) 0 var(--s-4);
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--text-head); /* 12.65:1 on surface */
}

.promoter__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}

/* ------------------------------------------------------------- 21. RERA BAND */

.rera {
  background: var(--ground-deep);
}

.rera__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

.rera__no {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--accent); /* 11.02:1 */
  margin: 0 0 var(--s-4);
}

.rera .facts {
  background-color: var(--bg);
}

.rera p {
  color: var(--on-deep-muted); /* 7.85:1 */
  font-size: var(--t-small);
}

.rera p a {
  color: var(--accent); /* 11.02:1 */
}

.rera .panel h3 {
  color: var(--text-head); /* 12.65:1 on the tinted panel */
}

.rera .panel p {
  font-size: var(--t-body);
  color: var(--text); /* 15.33:1 on the tinted panel */
}

.rera .panel p a {
  color: var(--primary); /* 6.13:1 on the tinted panel */
}

/* ----------------------------------------------------------------- 22. FAQ */

.faq__list {
  border-top: 1px solid var(--line-strong);
  max-width: 900px;
  margin-inline: auto;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--text-head); /* 13.60:1 */
  min-height: 44px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::before {
  content: "";
  flex: none;
  width: 12px;
  height: 10.39px;
  background: var(--brand-blue);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: rotate(90deg);
  transition: transform var(--dur-2) var(--ease-out);
}

.faq-item[open] summary::before {
  transform: rotate(180deg);
}

.faq-item__body {
  padding: 0 0 18px 24px;
}

.faq-item__body p {
  font-size: var(--t-small);
  color: var(--text); /* 16.48:1 */
  margin: 0;
}

/* ------------------------------------------------------------- 23. CONTACT */

.contact {
  background: var(--ground-deep);
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

.contact__info {
  order: 2;
}

.contact__lead {
  margin-top: var(--s-4);
  margin-bottom: 0;
  font-size: var(--t-h4);
  line-height: 1.55;
  color: var(--on-deep-muted); /* 7.85:1 */
  max-width: 46ch;
}

.contact__details {
  margin-top: var(--s-5);
  border-top: 1px solid var(--line-on-deep);
}

.contact__details li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-on-deep);
  color: var(--on-deep-muted); /* 7.85:1 */
  font-size: var(--t-small);
}

.contact__icon {
  flex: none;
  font-size: 18px;
  line-height: 1.4;
}

.contact__details strong {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-deep-muted); /* 7.85:1, the small size gets the headroom */
  margin-bottom: 3px;
}

.contact__details a {
  color: #ffffff; /* 13.60:1 */
  font-weight: 600;
  text-decoration: none;
}

.contact__details a:hover {
  color: var(--accent);
}

.contact__form {
  order: 1;
  padding: clamp(20px, 3vw, 32px);
}

.contact__form h3 {
  margin-bottom: var(--s-5);
}

.field {
  margin-bottom: var(--s-4);
}

.field > label,
.field-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-label); /* 7.99:1 */
}

.field input,
.field select,
.field textarea,
.modal__form input,
.modal__form select,
.modal__form textarea {
  width: 100%;
  min-height: 48px;
  padding: 13px 14px;
  background: #ffffff;
  color: var(--text); /* 16.48:1 */
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  font-family: var(--font-ui);
  font-size: 16px; /* 16px minimum stops iOS zooming the viewport on focus */
  line-height: 1.4;
}

.field textarea,
.modal__form textarea {
  min-height: 96px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder,
.modal__form input::placeholder {
  color: var(--text-muted); /* 5.87:1 */
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.modal__form input:focus,
.modal__form select:focus {
  border-color: var(--primary);
}

.field select,
.modal__form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #46525e 50%),
    linear-gradient(135deg, #46525e 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.form-note {
  margin: var(--s-3) 0 0;
  padding: 12px 14px;
  background: var(--surface);
  border-left: 3px solid var(--primary);
  font-size: var(--t-small);
  color: var(--text); /* 15.33:1 on surface */
}

.form-note--err {
  border-left-color: var(--cta);
  color: var(--cta-hover); /* 6.05:1 on surface */
  font-weight: 600;
}

.form-fineprint {
  margin: var(--s-3) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted); /* 5.87:1 */
}

/* ------------------------------------------------- 24. EXPLORE, SIBLINGS */

.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--s-4);
}

.explore-card,
.sibling {
  display: block;
  padding: 18px 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-0);
  text-decoration: none;
  transition: border-color var(--dur-2) var(--ease-out);
}

.explore-card:hover,
.sibling:hover {
  border-color: var(--primary);
}

.explore-card h4,
.sibling strong {
  display: block;
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--text-head); /* 13.60:1 */
}

.explore-card span,
.sibling span {
  display: block;
  margin-top: 4px;
  font-size: var(--t-small);
  color: var(--text-muted); /* 5.87:1 */
}

.siblings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--s-4);
}

/* --------------------------------------------------- 25. SPOKE MASTHEAD */

.masthead {
  background: var(--ground-deep);
  color: var(--on-deep);
  padding-block: clamp(36px, 5vw, 64px);
  position: relative;
}

.masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--triband-h);
}

.masthead h1 {
  color: #ffffff; /* 13.60:1 */
  margin-top: var(--s-3);
}

.masthead p {
  margin-top: var(--s-4);
  margin-bottom: 0;
  max-width: 62ch;
  font-size: var(--t-h4);
  line-height: 1.55;
  color: var(--on-deep-muted); /* 7.85:1 */
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-deep-muted); /* 7.85:1 */
}

.crumbs a {
  color: var(--accent); /* 11.02:1 */
  text-decoration: none;
}

.crumbs a:hover {
  text-decoration: underline;
}

.crumbs span {
  color: var(--on-deep-dim);
}

/* -------------------------------------------------------------- 26. FOOTER */

.footer {
  background: var(--ground-deep);
  color: var(--on-deep-muted);
  padding-top: var(--s-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7) var(--gap);
  padding-bottom: var(--s-7);
}

.footer__brand p {
  font-size: var(--t-small);
  color: var(--on-deep-muted); /* 7.85:1 */
  margin: var(--s-4) 0;
  max-width: 46ch;
}

.footer__logo {
  width: 132px;
  height: auto;
  display: block;
}

.footer__rera {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  color: var(--accent); /* 11.02:1 */
}

.footer__socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--s-4);
}

.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-on-deep);
  border-radius: var(--r-1);
  color: #ffffff; /* 13.60:1 */
  transition: background-color var(--dur-2) var(--ease-out);
}

.footer__social:hover {
  background: var(--deep-hover);
  color: #ffffff;
}

.footer__socials-label {
  font-size: 13px;
  color: var(--on-deep-dim); /* 5.25:1 at 13px */
}

.footer__col h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent); /* 11.02:1 */
  margin-bottom: var(--s-2);
}

.footer__col a {
  display: block;
  padding: 11px 0;
  font-size: 15px;
  color: var(--on-deep-muted); /* 7.85:1 */
  text-decoration: none;
  border-bottom: 1px solid var(--line-on-deep);
}

.footer__col a:hover {
  color: #ffffff;
}

.footer__addr {
  margin-top: var(--s-3);
  font-size: 13px;
  color: var(--on-deep-dim); /* 5.25:1 at 13px */
}

.footer__bar {
  background-color: var(--ground-deep);
  border-color: transparent;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--s-4);
  justify-content: space-between;
  padding-block: var(--s-4);
  font-size: 13px;
  color: var(--on-deep-dim); /* 5.25:1 at 13px */
}

.footer__bar-inner p {
  margin: 0;
}

.footer__legal a {
  color: var(--on-deep-muted); /* 7.85:1 */
  text-decoration: none;
}

.footer__legal a:hover {
  color: #ffffff;
}

.footer__disclaimer {
  padding-bottom: calc(var(--s-7) + env(safe-area-inset-bottom));
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--on-deep-muted); /* 7.85:1, headroom for the smallest type on deep */
  max-width: none;
}

/* ------------------------------------------------- 27. FLOAT, MOBILE BAR */

.float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  text-decoration: none;
}

.float--wa {
  background: var(--wa);
  color: var(--wa-ink); /* 7.47:1 */
}

.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: none;
  grid-template-columns: 1fr 1fr 1.2fr;
  transform: translateY(100%);
  transition: transform var(--dur-3) var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-cta.show {
  transform: none;
}

.mcta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 6px 4px;
  border: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
}

.mcta--call {
  background: var(--ground-deep);
  color: #ffffff; /* 13.60:1 */
}

.mcta--wa {
  background: var(--wa);
  color: var(--wa-ink); /* 7.47:1 */
}

.mcta--enquire {
  background: var(--cta);
  color: #ffffff; /* 5.07:1 */
}

/* --------------------------------------------------------------- 28. MODAL */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal.open {
  display: flex;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 28, 51, 0.72);
}

.modal__dialog {
  position: relative;
  width: min(100%, 460px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border-radius: var(--r-2);
  box-shadow: var(--sh-2);
  padding: clamp(20px, 4vw, 30px);
}

.modal__close,
.lightbox__close,
.nav__close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-head);
}

/* The rule above shares the 44px hit target across all three close buttons, but it also
   set display on .nav__close, which overrode the earlier rule hiding it and leaked the
   drawer close button into the desktop header. Re-assert it here; the mobile media query
   later in this file re-enables it where it belongs. */
.nav__close {
  display: none;
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.modal__head {
  margin-bottom: var(--s-5);
  padding-right: 48px;
}

.modal__head p {
  margin: var(--s-2) 0 0;
  font-size: var(--t-small);
  color: var(--text-muted); /* 5.87:1 */
}

.modal__form input,
.modal__form select {
  margin-bottom: var(--s-3);
}

/* ------------------------------------------------------------ 29. LIGHTBOX */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4, 28, 51, 0.96);
  padding: 16px;
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  box-shadow: var(--sh-2);
  background: var(--bg);
}

.lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  color: #ffffff; /* 17.23:1 on the stage ground */
  border-color: var(--line-on-deep);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-on-deep);
  border-radius: var(--r-1);
  color: #ffffff; /* 17.23:1 */
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.lightbox__nav--prev {
  left: 12px;
}

.lightbox__nav--next {
  right: 12px;
}

/* ------------------------------------------------ 30. REEL (network hook) */

.reel {
  position: relative;
  border: 1px solid var(--line);
  background: var(--ground-stage);
  cursor: pointer;
}

.reel video {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}

.reel--live {
  border-color: var(--primary);
}

/* --------------------------------------------------------------- 31. MOTION */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------- 32. BREAKPOINTS */
/* Four breakpoints and one 380px sweep. Primary canvas is 360px.
   grid-template-columns never appears inline in the markup, because an inline
   style beats a media query and silently kills every rule below. */

@media (max-width: 380px) {
  .container {
    width: calc(100% - 32px);
  }

  .btn {
    padding-inline: 18px;
    font-size: 12px;
  }

  .stat__figure {
    font-size: 28px;
  }

  .reg-no {
    font-size: 11px;
  }

  .brand__logo {
    height: 32px;
  }
}

@media (max-width: 480px) {
  .brand__loc {
    display: none;
  }

  .brand__rule {
    display: none;
  }

  .header__actions .btn--cta,
  .header__actions .btn--gold {
    display: none;
  }

  .film__cue {
    display: none;
  }

  .film__play {
    left: 16px;
    bottom: 16px;
  }

  .footer__disclaimer {
    padding-bottom: calc(var(--s-9) + env(safe-area-inset-bottom));
  }
}

@media (max-width: 620px) {
  .topbar__inner {
    justify-content: center;
    text-align: center;
  }

  .topbar__contact .topbar__sep,
  .topbar__contact span:last-child {
    display: none;
  }
}

@media (min-width: 481px) {
  .hero__cta .btn {
    flex: 0 1 auto;
  }
}

@media (min-width: 560px) {
  .facts__row {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--s-4);
    align-items: baseline;
    padding: 17px 20px;
  }
}

@media (min-width: 720px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 340px);
    z-index: 95;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #ffffff;
    border-left: 1px solid var(--line);
    padding: 16px;
    transform: translateX(100%);
    transition: transform var(--dur-4) var(--ease-inout);
    overflow-y: auto;
  }

  .nav.open {
    transform: none;
  }

  .nav__close {
    display: inline-flex;
    align-self: flex-end;
    margin-bottom: 8px;
  }

  .nav__link {
    padding: 15px 4px;
    min-height: 52px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
  }

  .nav__link::after {
    display: none;
  }

  .nav__link--mobile-cta {
    margin-top: 16px;
    justify-content: center;
    background: var(--cta);
    color: #ffffff; /* 5.07:1 */
    border-bottom: 0;
    border-radius: var(--r-1);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 13px;
  }

  .nav__link--mobile-cta:hover {
    background: var(--cta-hover);
    color: #ffffff;
  }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(4, 28, 51, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-3) var(--ease-out);
  }

  .nav-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-toggle {
    display: flex;
  }

  .float {
    display: none;
  }

  .mobile-cta {
    display: grid;
  }

  body {
    padding-bottom: 0;
  }
}

@media (min-width: 900px) {
  .statstrip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .about__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--s-7);
  }

  .about__media {
    order: 0;
  }

  .contact__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--s-7);
  }

  .contact__info {
    order: 0;
  }

  .contact__form {
    order: 0;
  }

  .rera__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .promoter__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--s-7);
    align-items: center;
  }
}

@media (min-width: 1000px) {
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  html {
    scroll-padding-top: 116px;
  }

  .header__inner {
    min-height: 76px;
  }

  .brand__logo {
    height: 44px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr);
  }

  .hero__figure {
    order: 0;
  }

  .hero__figure {
    position: relative;
  }

  .hero__pic,
  .hero__slide--first {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 58%;
  }

  .hero__panel {
    min-height: clamp(400px, 38vw, 520px);
    display: flex;
    align-items: center;
  }

  .hero__panel::after {
    left: auto;
    right: -3px;
    top: 0;
    bottom: 0;
    width: 6px;
    height: auto;
    background: var(--triband-v);
  }

  .hero__panel-inner {
    max-width: none;
    width: 100%;
    padding-block: clamp(40px, 5vw, 64px);
    padding-inline-start: max(20px, calc((100vw - 1200px) / 2));
    padding-inline-end: clamp(32px, 4vw, 72px);
  }

  .hero__title {
    line-height: 1.06;
  }

  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  }
}