@charset "utf-8";
/* ==========================================================================
   PROVIDENT PALM VISTA, Shilphata Junction, Daighar Gaon
   Concept: THE CLEARING. A nine-module frame with the middle cut out.

   The mark is one path: a 44.14 unit square on a 3 x 3 grid of 14.71 modules,
   bottom-left module cut away, centre module punched out by the nonzero fill
   rule. Seven of nine solid, one corner opened, the middle empty. The page is
   built from that square, so the desktop column is 360px, the container is
   3 x 360 + 2 x 24 = 1128px, and every plate carries the same notch.

   Six rules govern this whole file. Break one and the concept is gone.

     1. NOTHING is ever drawn on top of picture content. No wash, no chip, no
        badge, no caption, no gradient. Where text and an image touch, the text
        sits on an opaque fill and the ratio is exact rather than estimated.
     2. NO ROUNDED CORNERS above 2px. Depth is the notch and the hairline.
        Shadows exist on three elements in the build, all of them overlays.
     3. ONE uppercase rule, and it applies to the word PROVIDENT. Eyebrows,
        nav, table headers, labels and buttons are all sentence case.
     4. NO GRADIENT. The one gradient token is the standing scrim rule in
        section 24, and this build uses it zero times.
     5. NOTHING LOOPS. No hero drift, no crossfade, no pulse, no shimmer, no
        marquee, no loading bar. This site runs zero endless animations.
     6. NOTHING TRANSLATES ON HOVER. Cards move border-color and nothing else.

   Colour is assigned by role, never by mood. Navy marks the record, which is
   anything a buyer can go and check. Green is the land. Every ratio in the
   comments below was computed with the WCAG 2.x relative-luminance formula,
   not estimated.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TYPE FILES
   Self-hosted, latin subset only, swap, preloaded in the head. No runtime
   request to fonts.googleapis.com.

   The glyph that would force a second latin-ext file is the rupee sign
   U+20B9, so every price on this site is written "Rs 60 lakh". That decision
   saves two font files and costs nothing, because the fact register already
   words it that way.

   Jost is declared 300 400 on purpose. The file is variable across 100..900
   and could be pushed to 700 at any moment, which would make the headlines
   look like the other nineteen sites. It is used at 300 for h1, h2 and the
   stat figures, at 400 for h3, and nowhere else.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url(/fonts/jost-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 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;
}

/* Metric-matched fallbacks, so the webfont swap cannot reflow a line. The
   arithmetic is read off the shipped font tables, not estimated. Arial has
   unitsPerEm 2048 and sxHeight 1062, so its x-height ratio is 0.518555.

     Jost     upm 1000, sxHeight 460, hhea asc 1070, desc 375, gap 0
              size-adjust      = (460/1000) / 0.518555 =  88.71%
              ascent-override  = (1070/1000) / 0.8871  = 120.62%
              descent-override = (375/1000)  / 0.8871  =  42.28%
     Archivo  upm 1000, sxHeight 526, hhea asc 878, desc 210, gap 0
              size-adjust      = (526/1000) / 0.518555 = 101.44%
              ascent-override  = (878/1000) / 1.01436  =  86.56%
              descent-override = (210/1000) / 1.01436  =  20.70%

   The Archivo triple is identical to the one shipped on Haware Dombivli East
   because it is the same file. It was copied, not recomputed. */
@font-face {
  font-family: "Jost Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 88.71%;
  ascent-override: 120.62%;
  descent-override: 42.28%;
  line-gap-override: 0%;
}
@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
   Two values are SAMPLED from the vector lockup, #1D407D and #231F20.
   Everything else is DERIVED and says so.
   -------------------------------------------------------------------------- */
:root {
  /* Ground, the cleared land ---------------------------------------------- */
  --ground:       #EFF2EA;  /* DERIVED  page field, pale mineral green-white   */
  --surface:      #FAFBF7;  /* DERIVED  panels, cards, the form  1.09 : ground */
  --tint:         #E7E2D4;  /* DERIVED  the sand band            1.14 : ground */
  --canopy:       #12291F;  /* DERIVED  the one dark ground     13.62 : ground */

  /* Ink -------------------------------------------------------------------- */
  --ink:          #231F20;  /* SAMPLED  lockup near-black. Headings    14.41:1 */
  --body:         #414A43;  /* DERIVED  running copy                   8.12:1 */
  --muted:        #575F5A;  /* DERIVED  labels, captions, meta         5.82:1 */
  --on-dark:      #EFF2EA;  /* the ground colour, used on --canopy    13.62:1 */
  --on-dark-2:    #B4BFB4;  /* DERIVED  secondary copy on --canopy     8.11:1 */

  /* Brand, THE RECORD ------------------------------------------------------ */
  --navy:         #1D407D;  /* SAMPLED  lockup navy. Text-safe on light 8.92:1 */
  --navy-deep:    #16305E;  /* DERIVED  hover fill and pressed state   11.47:1 */
  --sky:          #A6BEE7;  /* DERIVED  the navy LIGHTENED for canopy   8.18:1 */

  /* Brand-adjacent, THE LAND ----------------------------------------------- */
  --palm-deep:    #2A5C3E;  /* DERIVED  text-safe green on light       6.88:1 */
  --palm:         #3E7A54;  /* DERIVED  NON-TEXT only: rules, ticks     4.51:1 */
  --palm-light:   #7FB894;  /* DERIVED  rules and ticks on --canopy     6.74:1 */

  /* Action ----------------------------------------------------------------- */
  --action:       #1D407D;  /* = --navy.  Ground-coloured label at     8.92:1 */
  --action-hover: #16305E;  /* = --navy-deep. Label at                11.47:1 */

  /* Structure -------------------------------------------------------------- */
  --line:         #DCE0D2;  /* DERIVED  decorative hairline     1.19, non-info */
  --line-strong:  #79837B;  /* DERIVED  interactive boundary           3.47:1 */
  --line-dark:    #3A4D44;  /* DERIVED  cream 18% on canopy     1.71, non-info */
  --line-dark-2:  #6F7D74;  /* DERIVED  cream 42% on canopy, boundary  3.57:1 */

  /* State ------------------------------------------------------------------ */
  --err:          #97231A;  /* DERIVED                                 7.22:1 */
  --ok:           #1F6B3B;  /* DERIVED                                 5.76:1 */

  /* WhatsApp. The brand fill, kept, with a --canopy glyph on it rather than a
     white one: white on #25D366 is 2.02:1 and fails 1.4.11, --canopy on
     #25D366 is 7.62:1 and passes with room. One element uses this token.   */
  --wa:           #25D366;  /* brand green, canopy glyph on it         7.62:1 */

  /* Type ------------------------------------------------------------------- */
  --font-display: "Jost", "Jost Fallback", "Avenir Next", "Century Gothic", system-ui, sans-serif;
  --font-text:    "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;

  /* Space, 4px base -------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 104px; --s-10: 144px;

  /* The module. The desktop column is exactly 360px, which is also the phone
     canvas, so the page is three phones wide and every desktop column has
     already been proved at the phone breakpoint.                          */
  --module:    360px;
  --gutter:    24px;
  --container: 1128px;                      /* 3 * 360 + 2 * 24              */
  --block:     clamp(56px, 9vw, 104px);     /* section block padding         */
  --head-gap:  clamp(28px, 4.5vw, 48px);    /* section head to section body  */

  /* Radius, which is nearly zero ------------------------------------------- */
  --r-0: 0;        /* plates, panels, tables, tiles, the form card, images    */
  --r-1: 2px;      /* buttons, inputs, selects, chips. Two pixels, not four   */
  --r-pill: 999px; /* the WhatsApp float button only                          */

  /* The notch ladder. Never computed as a percentage: on a wide box a third
     of the side is absurd, so it is set per component from this ladder.

     --notch also carries a 0px fallback, because every notched box that holds
     content reserves `padding-bottom: max(<its pad>, var(--notch))` so that
     nothing can land in the cut corner and be sliced off. Without the
     fallback that max() is invalid on an un-notched box and the padding
     silently disappears.                                                   */
  --notch:       0px;
  --notch-hero:  56px;
  --notch-plate: 40px;
  --notch-tile:  28px;
  --notch-note:  24px;

  /* Shadow. Green-black, because a neutral grey shadow on a green-tinted
     ground reads as dirt. Exactly three elements may cast one: the drawer,
     the modal dialog and the lightbox image. Not the header, not the sticky
     bar, not one single card.                                             */
  --sh-drawer: 0 16px 40px -20px rgba(18, 41, 31, .45);
  --sh-modal:  0 24px 60px -28px rgba(18, 41, 31, .55);
  --sh-light:  0 32px 80px -32px rgba(18, 41, 31, .70);

  /* Motion. The ladder stops at four. The fifth step on the previous build
     was the hero crossfade, and this site has no crossfade to time.        */
  --d-1: 120ms;   /* press, focus, checkbox                                  */
  --d-2: 180ms;   /* colour and underline on hover                           */
  --d-3: 280ms;   /* reveal, drawer, sticky bar                              */
  --d-4: 400ms;   /* image scale inside overflow:hidden                      */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* Depth. No literal z-index value appears anywhere else in this file.     */
  --z-base: 0; --z-plate: 10; --z-header: 30; --z-mobile-bar: 40;
  --z-drawer-backdrop: 50; --z-drawer: 60; --z-float: 70;
  --z-modal-backdrop: 80; --z-modal: 90; --z-lightbox: 100;
}

/* --------------------------------------------------------------------------
   3. RESET AND BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 1024px) { html { scroll-padding-top: 92px; } }

body {
  background: var(--ground);
  color: var(--body);
  font-family: var(--font-text);
  font-weight: 400;
  font-size: clamp(1.03125rem, 1.001rem + .135vw, 1.09375rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: overflow:hidden on the root makes a scroll container
     and quietly kills position:sticky on the header. */
  overflow-x: clip;
}
@supports not (overflow: clip) { body { overflow-x: hidden; } }

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--palm-light); color: var(--ink); }

/* Focus. The outline is never suppressed anywhere in this file. Because clip-path
   clips an outline, no interactive element is ever notched: the notch sits on
   a non-interactive wrapper and the focusable element is outside it. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--palm-deep);      /* 6.88 / 7.49 / 6.01:1          */
  outline-offset: 2px;
}
.standing :where(a, button):focus-visible,
.footer   :where(a, button):focus-visible,
.topbar   :where(a, button):focus-visible,
.mobile-cta :where(a, button):focus-visible,
.lightbox :where(button):focus-visible {
  outline-color: var(--palm-light);         /* 6.74:1 on --canopy            */
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-lightbox);
  padding: 12px 18px; background: var(--navy); color: var(--ground);
  font-weight: 600; font-size: .875rem;
}
.skip:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------------------
   4. TYPE SCALE
   Mobile ratio about 1.19, desktop about 1.26. Both ends of every clamp are
   real values at 360px and at 1100px, and the middle term is the exact line
   through those two points.

   Hierarchy inside the display face comes from size and colour, never weight.
   Jost is never bolded and no <strong> goes inside an h1 or h2: emphasis in a
   heading is done by dropping the second half to --muted.
   -------------------------------------------------------------------------- */
h1, h2 { font-family: var(--font-display); font-weight: 300; color: var(--ink); }
h3     { font-family: var(--font-display); font-weight: 400; color: var(--ink); }
h4, h5, h6, .card__t { font-family: var(--font-text); font-weight: 600; color: var(--ink); }

h1 { font-size: clamp(2.125rem, 1.456rem + 2.973vw, 3.5rem); line-height: 1.06; letter-spacing: -.01em; }
h2 { font-size: clamp(1.625rem, 1.139rem + 2.162vw, 2.625rem); line-height: 1.14; letter-spacing: -.008em; }
h3 { font-size: clamp(1.25rem, 1.068rem + .811vw, 1.625rem); line-height: 1.24; letter-spacing: -.004em; }
h4, .card__t { font-size: clamp(1.0625rem, 1.002rem + .27vw, 1.1875rem); line-height: 1.32; }
@media (min-width: 1100px) {
  h1 { line-height: 1.0; letter-spacing: -.018em; }
  h2 { line-height: 1.08; }
}

p, li { font-size: clamp(1.03125rem, 1.001rem + .135vw, 1.09375rem); line-height: 1.68; }
strong, b { font-weight: 600; color: var(--ink); }
small, .cap, .small { font-size: clamp(.875rem, .86rem + .068vw, .90625rem); line-height: 1.5; letter-spacing: .002em; }
.lead { font-size: clamp(1.09375rem, .987rem + .473vw, 1.3125rem); line-height: 1.58; color: var(--body); }

/* The one uppercase rule in the entire stylesheet. It is applied to the word
   PROVIDENT and to nothing else: the h1's first line, the promoter line, the
   developer credit and the footer. Everything else on this site, including
   eyebrows, nav, table headers, buttons and stat labels, is sentence case,
   and that single decision does more to break the family resemblance than
   any component change. */
.brandword {
  display: block;
  font-family: var(--font-text); font-weight: 700;
  font-size: clamp(.8125rem, .752rem + .27vw, .9375rem);
  line-height: 1.2; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);                       /* 8.92:1 on --ground            */
}

/* Eyebrow, label, stat label. Sentence case, Archivo 600, preceded by a 24px
   --palm rule rather than by wide tracking. */
.eyebrow, .lbl {
  display: block;
  font-family: var(--font-text); font-weight: 600;
  font-size: clamp(.71875rem, .704rem + .068vw, .75rem);
  line-height: 1.2; letter-spacing: .02em;
  color: var(--palm-deep);                  /* 6.88 / 7.49 / 6.01:1          */
}
.eyebrow::before {
  content: ""; display: block;
  width: 24px; height: 2px; margin-bottom: 12px;
  background: var(--palm);                  /* 4.51:1 non-text               */
}
.lbl { color: var(--muted); }               /* 5.82 / 6.33 / 5.09:1          */
.eyebrow--dark { color: var(--palm-light); }
.eyebrow--dark::before { background: var(--palm-light); }

.stat__n {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.625rem, 1.26rem + 1.622vw, 2.375rem);
  line-height: 1.02; letter-spacing: -.012em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.price__n {
  font-family: var(--font-text); font-weight: 600;
  font-size: clamp(1.5rem, 1.257rem + 1.081vw, 2rem);
  line-height: 1; letter-spacing: -.006em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.rera__n {
  font-family: var(--font-text); font-weight: 500;
  font-size: clamp(.875rem, .845rem + .135vw, .9375rem);
  line-height: 1.3; letter-spacing: .02em;
  color: var(--navy); font-variant-numeric: tabular-nums;  /* 8.92 / 9.71:1  */
  word-break: break-word;
}
.rera__n--dark { color: var(--sky); }       /* 8.18:1 on --canopy            */

/* --------------------------------------------------------------------------
   5. LAYOUT PRIMITIVES
   Sections are separated by space and by one notched frame each. There is no
   `.section + .section { border-top: 2px }` anywhere, because a page that
   reads as a stack of trays is the network default. The ground changes
   exactly four times on the hub and each change means something: sand is
   where money is discussed, canopy is where the register is.
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - 32px, var(--container)); margin-inline: auto; }

.section { padding-block: var(--block); }
.section + .section { border-top: 0; }
.section--tint   { background: var(--tint); }
.section--canopy { background: var(--canopy); color: var(--on-dark-2); }
.section--canopy h1, .section--canopy h2, .section--canopy h3,
.section--canopy h4, .section--canopy .stat__n { color: var(--on-dark); }

.section__head { max-width: 68ch; margin-bottom: var(--head-gap); }
.section__head .eyebrow { margin-bottom: var(--s-3); }
.section__head p { margin-top: var(--s-4); color: var(--muted); }
.section--canopy .section__head p { color: var(--on-dark-2); }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }
.prose ul { list-style: none; }
.prose ol { padding-left: 20px; }
.prose li + li { margin-top: var(--s-2); }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border: 2px solid var(--palm);   /* the void, 4.51:1 */
}
.prose a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--navy-deep); }
.prose blockquote { padding-left: var(--s-5); border-left: 3px solid var(--palm); color: var(--ink); }

.block { margin-top: var(--s-6); }
.center { text-align: center; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* The 3-track. Grids that are not this one use auto-fit with a min() floor so
   they cannot overflow at 360px even if a maintainer forgets a query. */
.grid-3 { display: grid; gap: var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 760px)  { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   6. THE MOTIF: the notched frame
   One motif, two features, both read straight off provident-mark.svg.

   Feature one, THE NOTCH. The bottom-left corner is cut away square. The
   polygon below is the mark's outline, literally.

   Feature two, THE VOID. The mark has a hole in the middle. On the page the
   hole is a gap in the top edge of a frame, and the section label sits in it,
   the way a legend sits on a fieldset.

   The 1px frame is drawn as a --palm box with a 1px pad and a --ground child,
   both carrying the same clip, because clip-path cuts a border off at the
   corner and a bordered box cannot be notched. The inner polygon is therefore
   2px smaller than the outer one, which at a 40px notch is a sub-pixel
   divergence along the 45 degree run and is invisible. That is deliberate.
   Do not "fix" it by putting a border back on.

   Banned, and why:
     - anything interactive, because clip-path clips the focus outline
     - any box under 180px wide, where the notch reads as a rendering fault
     - the three unit plans and any line drawing, because clipping a corner
       off a technical drawing is altering a developer document
     - the lockup, the mark, the favicon
     - nested notches. A notched box never contains another notched box.
   -------------------------------------------------------------------------- */
.notch {
  --notch: var(--notch-tile);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    var(--notch) 100%,
    var(--notch) calc(100% - var(--notch)),
    0 calc(100% - var(--notch))
  );
}
.notch--hero  { --notch: var(--notch-hero); }
.notch--plate { --notch: var(--notch-plate); }
.notch--note  { --notch: var(--notch-note); }

/* The frame does NOT carry the clip on itself, and that is load bearing: a
   clip-path clips every descendant, so putting .notch on .frame slices the top
   half off .frame__label, which is the entire point of the component. So the
   hairline is painted by ::before and the fill by .frame__in, both clipped,
   and the label sits between them, unclipped, in the gap it makes in the top
   edge. Size a frame with .notch--plate or .notch--tile, which set --notch and
   nothing else. Never put .notch itself on a .frame. */
.frame {
  --notch: var(--notch-plate);
  position: relative;
  padding: 1px;
}
.frame::before,
.frame__in {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    var(--notch) 100%,
    var(--notch) calc(100% - var(--notch)),
    0 calc(100% - var(--notch))
  );
}
.frame::before {
  content: ""; position: absolute; inset: 0;
  background: var(--palm);                  /* the hairline, 4.51:1 non-text */
}
.frame__in {
  position: relative;                       /* paints above the hairline     */
  background: var(--ground);
  padding: clamp(20px, 3vw, 32px);
  padding-bottom: max(clamp(20px, 3vw, 32px), var(--notch));
}
.section--tint .frame__in { background: var(--tint); }
.frame__label {
  position: absolute; top: 0; left: 32px; z-index: var(--z-plate);
  transform: translateY(-50%);
  padding-inline: 12px;
  background: var(--ground);
}
.section--tint .frame__label { background: var(--tint); }

/* --palm is 3.02:1 on the canopy green, inside the margin of error of a
   rounded value, so the frame on the dark band is drawn in --palm-light. */
.frame--dark::before { background: var(--palm-light); }  /* 6.74:1 on canopy */
.frame--dark .frame__in,
.frame--dark .frame__label,
.section--canopy .frame__label { background: var(--canopy); }
.frame--dark .frame__label { color: var(--palm-light); }

/* The plate. An image box whose shape is painted before the image decodes, so
   CLS is zero and there is no skeleton shimmer and no spinner. */
.plate {
  position: relative; overflow: hidden;
  background: var(--tint);
  border-radius: var(--r-0);
}
.section--canopy .plate { background: var(--line-dark); }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate--center { width: min(100%, 900px); margin-inline: auto; }
.figcap, .plate__cap {
  display: block; margin-top: var(--s-3);
  font-size: clamp(.875rem, .86rem + .068vw, .90625rem);
  line-height: 1.5; color: var(--muted);    /* 5.82:1                        */
}
.section--canopy .figcap { color: var(--on-dark-2); }   /* 8.11:1            */

/* --------------------------------------------------------------------------
   7. BUTTONS
   Flat fills only, sentence case, 2px radius, never notched. The gradient
   wash and the wide-tracked caps the network puts on every button are both
   gone.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 13px 22px;
  font-family: var(--font-text); font-weight: 600; font-size: .875rem;
  line-height: 1; letter-spacing: .01em;
  border: 1px solid transparent; border-radius: var(--r-1);
  background: transparent; color: var(--ink);
  cursor: pointer; text-align: center;
  transition: background-color var(--d-2) var(--ease-out),
              color var(--d-2) var(--ease-out),
              border-color var(--d-2) var(--ease-out);
}
.btn--lg    { min-height: 52px; padding: 17px 26px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--action); color: var(--ground); border-color: var(--action); }  /* 8.92:1  */
.btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); }      /* 11.47:1 */
.btn--ghost { border-color: var(--line-strong); color: var(--ink); }                             /* 3.47:1  */
.btn--ghost:hover { border-color: var(--action); color: var(--navy); }
.btn--ghost-dark { border-color: var(--line-dark-2); color: var(--on-dark); }                    /* 3.57:1  */
.btn--ghost-dark:hover { border-color: var(--on-dark); }
.btn[disabled] { opacity: .62; cursor: default; }
.ask { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
@media (min-width: 480px) { .ask { display: flex; flex-wrap: wrap; } }

/* --------------------------------------------------------------------------
   8. TOPBAR
   The registration short form, linking to /towers/. Never a run-on list of
   eight numbers: that is unreadable at 360px.
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--canopy); color: var(--on-dark-2);
  font-family: var(--font-text); font-size: .75rem; line-height: 1.4;
}
.topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-1) var(--s-5); padding-block: var(--s-2);
}
.topbar a { color: var(--on-dark); }        /* 13.62:1                       */
.topbar a:hover { color: var(--palm-light); }
.topbar__rera { font-weight: 500; color: var(--sky); font-variant-numeric: tabular-nums; } /* 8.18:1 */
/* At 620px and below the topbar wraps to two centred lines and the phone
   drops, because the sticky bar already carries it. */
@media (max-width: 620px) {
  .topbar__inner { justify-content: center; text-align: center; }
  .topbar__phone { display: none; }
}

/* --------------------------------------------------------------------------
   9. HEADER, NAV, DRAWER
   Fixed height at every breakpoint. It does not shrink on scroll, because a
   moving header is a template tell and this one carries a true vector lockup
   that would resample on every frame.
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(239, 242, 234, .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.header.scrolled { background: var(--ground); border-bottom-color: var(--line); }  /* no shadow */
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); height: 64px;
}
@media (min-width: 1024px) { .header__inner { height: 76px; } }

.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand__logo { height: 36px; width: auto; }
@media (min-width: 1024px) { .brand__logo { height: 42px; } }

.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav__link {
  position: relative;
  font-family: var(--font-text); font-weight: 500; font-size: .90625rem;
  line-height: 1; color: var(--body);
  padding-block: var(--s-2);
  transition: color var(--d-2) var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--palm);
  transition: right var(--d-2) var(--ease-out);
}
.nav__link:hover, .nav__link[aria-current="page"], .nav__link.active { color: var(--navy); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after,
.nav__link.active::after { right: 0; }
.nav__close { display: none; }
.nav-backdrop { display: none; }

.header__actions { display: flex; align-items: center; gap: var(--s-2); }
.nav-toggle {
  display: none; min-width: 44px; min-height: 44px;
  place-content: center; gap: 5px;
  background: transparent; border: 0; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--ink);
  transition: transform var(--d-2) var(--ease-out), opacity var(--d-1);
}
.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); }

@media (max-width: 1023px) {
  /* backdrop-filter creates a containing block, which breaks the fixed drawer */
  .header, .header.scrolled {
    backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ground);
  }
  .nav-toggle { display: grid; }
  .header__actions .btn { display: none; }
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(86%, 340px); z-index: var(--z-drawer);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 72px var(--s-5) var(--s-6);
    background: var(--ground);
    box-shadow: var(--sh-drawer);           /* shadow 1 of 3                 */
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--d-3) var(--ease-in-out), visibility var(--d-3);
    overflow-y: auto;
  }
  .nav.open { transform: none; visibility: visible; }
  .nav__link {
    font-size: 1rem; min-height: 44px;
    display: flex; align-items: center;
    padding-block: var(--s-3); border-bottom: 1px solid var(--line);
  }
  .nav__link::after { display: none; }
  .nav__cta { margin-top: var(--s-5); }
  .nav__close {
    display: grid; place-content: center;
    position: absolute; top: 12px; right: 12px;
    min-width: 44px; min-height: 44px;
    font-size: 1.5rem; line-height: 1; color: var(--ink);
    background: transparent; border: 0; cursor: pointer;
  }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: var(--z-drawer-backdrop);
    background: rgba(18, 41, 31, .55);
    opacity: 0; visibility: hidden;
    transition: opacity var(--d-3) var(--ease-in-out), visibility var(--d-3);
  }
  .nav-backdrop.open { opacity: 1; visibility: visible; }
}

/* --------------------------------------------------------------------------
   10. THE HERO, pattern name: THE PLATE
   One static square image. No rotation, no crossfade, no drift, no data-bg
   div, no second decode, no scroll cue.

   520 CSS px is the hard ceiling on the plate at every viewport. At DPR 2
   that asks 1040 device pixels against a 1039 pixel source, a 1.001x
   upscale, so the hero renders at native resolution on a retina laptop. On a
   360px phone the plate is 328px, which at DPR 3 asks 984 against 1039, a
   downscale. This hero never upscales its source at any device pixel ratio,
   and that is only possible because the plate is a square and refuses to
   grow.

   Phone order is name, picture, terms. DOM order equals visual order, and
   there is no `order:` reshuffling anywhere in this file.
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(32px, 6vw, 72px) clamp(48px, 7vw, 104px); }
.hero__grid { display: grid; gap: clamp(28px, 5vw, 40px); }
.hero__title { margin-top: var(--s-4); }
.hero__title .brandword { margin-bottom: var(--s-2); }
.hero__lead { margin-top: var(--s-5); max-width: 36ch; }

.hero__media { position: relative; z-index: var(--z-plate); }
.hero__plate {
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;
  background: var(--tint);
}
.hero__plate img { width: 100%; height: 100%; object-fit: cover; }

.hero__price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5);
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.hero__price-cfg { color: var(--muted); font-size: clamp(.875rem, .86rem + .068vw, .90625rem); }
.hero__price-note {
  flex-basis: 100%; margin-top: var(--s-1);
  font-size: clamp(.875rem, .86rem + .068vw, .90625rem);
  line-height: 1.5; color: var(--muted);    /* 5.82:1                        */
}
.hero__cta { display: grid; gap: var(--s-3); margin-top: var(--s-6); }

@media (min-width: 1024px) {
  /* At the 1128 container this resolves to a 520 / 88 / 520 split.
     Three children, two areas, and the media spans both rows. This is what
     lets the phone read name, picture, terms in DOM order while the desktop
     reads eyebrow, h1, lead, price, buttons down a left column beside the
     plate, with no `order:` property anywhere on the site. */
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 520px;
    grid-template-areas: "name media" "terms media";
    column-gap: clamp(32px, 5vw, 88px);
    row-gap: 0;
    align-items: start;
    align-content: center;
  }
  .hero__name  { grid-area: name; }
  .hero__media { grid-area: media; align-self: center; }
  .hero__terms { grid-area: terms; }
  .hero { padding-block: clamp(56px, 7vw, 104px); }
  .hero__cta { display: flex; flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   11. THE LEDGER
   Four figures, all publishable bare. A hairline grid built from a 1px gap
   over a --line ground, never per-cell borders, so there is no doubled 2px
   seam. Not a card grid, no icons, no hover, no notch: the cells are under
   180px at 360 and a notch there reads as a rendering fault.

   A ledger cell carries no figure that needs an attribution clause, because
   a ledger cell has nowhere to put one. No price, no area, no storey count
   and no date goes in here.
   -------------------------------------------------------------------------- */
/* minmax(0, 1fr), never a bare 1fr: a bare 1fr floors each track at its
   min-content width, so a long figure in a ledger cell can grow its column
   past its share and push the page into horizontal scroll. Caught on
   olympia-city at 360px, hardened across the batch. 2026-09-04. */
.ledger {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  list-style: none;
}
.ledger > * { background: var(--ground); padding: 20px 16px; }
.section--tint .ledger > * { background: var(--tint); }
.ledger .stat__n { display: block; }
.ledger .lbl { margin-top: var(--s-2); }
@media (min-width: 760px) { .ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   12. PANELS AND NOTES
   No shadow at all on a card, and the emphasis rule sits on the LEFT.
   `border-top: 2px solid` on a panel is the single most recognisable shared
   tell in this network.

   Hover on a linked card moves border-color from --line to --line-strong over
   180ms and does nothing else. Frames do not float: the network's -8px lift
   and the -2px compromise are both out.
   -------------------------------------------------------------------------- */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-0);
  padding: clamp(20px, 3vw, 32px);
  padding-bottom: max(clamp(20px, 3vw, 32px), var(--notch));
}
.panel h3, .panel h4 { margin-bottom: var(--s-2); }
.panel--dark { background: var(--canopy); border-color: var(--line-dark); color: var(--on-dark-2); }

.note {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--palm);       /* 4.51:1 non-text               */
  padding: 20px;
  padding-bottom: max(20px, var(--notch));
}
.note p { font-size: clamp(.875rem, .86rem + .068vw, .90625rem); line-height: 1.55; color: var(--muted); }
.note p + p { margin-top: var(--s-3); }
.note--dark { background: var(--canopy); border-color: var(--line-dark); border-left-color: var(--palm-light); }
.note--dark p { color: var(--on-dark-2); }

a.panel, a.card { transition: border-color var(--d-2) var(--ease-out); }
a.panel:hover, a.card:hover { border-color: var(--line-strong); }

/* --------------------------------------------------------------------------
   13. THE PRICE AND CONFIGURATION TABLE
   The three headings the network uses here are all unavailable on this
   project. The area word the network uses in this column is banned sitewide by
   the fact register, there is no per sq ft rate, and the areas we hold are per
   tower rather than per configuration. So the table is built around what is
   true, and no sq ft figure ever appears without its tower names attached.

   At 600px and below it restacks into row blocks rather than scrolling
   sideways, thead moved off-screen, each cell prefixed by its data-label.
   -------------------------------------------------------------------------- */
.ptable { width: 100%; border-collapse: collapse; }
.ptable th, .ptable td {
  text-align: left; padding: 14px 16px;
  border-bottom: 1px solid var(--line); vertical-align: baseline;
}
.ptable thead th {
  font-family: var(--font-text); font-weight: 600;
  font-size: .75rem; line-height: 1.2; letter-spacing: .02em;
  color: var(--muted);                      /* 5.82 / 5.09:1                 */
  border-bottom-color: var(--line-strong);
}
.ptable tbody th {
  font-family: var(--font-text); font-weight: 600;
  font-size: clamp(1.0625rem, 1.002rem + .27vw, 1.1875rem);
  color: var(--ink); white-space: nowrap;
}
.ptable td { font-size: clamp(.875rem, .86rem + .068vw, .90625rem); color: var(--body); }
.ptable thead th:last-child, .ptable td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ptable tr:last-child th, .ptable tr:last-child td { border-bottom: 0; }
.ptable--dark th, .ptable--dark td { border-bottom-color: var(--line-dark); }
.ptable--dark thead th,
.ptable--dark thead th:last-child { color: var(--palm-light); border-bottom-color: var(--line-dark-2); }
.ptable--dark tbody th, .ptable--dark td:last-child { color: var(--on-dark); }
.ptable--dark td { color: var(--on-dark-2); }

@media (max-width: 600px) {
  .ptable, .ptable tbody, .ptable tr, .ptable th, .ptable td { display: block; width: 100%; }
  .ptable thead { position: absolute; left: -9999px; }
  .ptable tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .ptable tr:last-child { border-bottom: 0; }
  .ptable th, .ptable td { border-bottom: 0; padding: 0; text-align: left; }
  .ptable thead th:last-child, .ptable td:last-child { text-align: left; }
  .ptable td { margin-top: var(--s-3); }
  .ptable td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--font-text); font-weight: 600;
    font-size: .71875rem; line-height: 1.2; letter-spacing: .02em;
    color: var(--muted);
  }
  .ptable--dark tr { border-bottom-color: var(--line-dark); }
  .ptable--dark td::before { color: var(--palm-light); }
}

/* Config cards. The frame is not notched, so the cards are: nested notches
   are banned and this section resolves it in favour of the tile. */
.configs { display: grid; gap: clamp(12px, 2vw, 24px); grid-template-columns: 1fr; }
.config-card {
  background: var(--surface); border: 1px solid var(--line);
  padding: 24px 22px; padding-bottom: max(24px, var(--notch));
}
.config-card__k {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.25rem, 1.068rem + .811vw, 1.625rem);
  line-height: 1.24; color: var(--ink);
}
.config-card__area {
  margin-top: var(--s-3);
  font-family: var(--font-text); font-weight: 600;
  font-size: clamp(1.0625rem, 1.002rem + .27vw, 1.1875rem);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.config-card__meta { margin-top: var(--s-1); font-size: .875rem; color: var(--muted); }
.config-card hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-5) 0; }
.config-card .btn { margin-top: var(--s-5); }
@media (min-width: 480px) { .configs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } }
@media (min-width: 760px) { .configs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   14. THE STANDING, the eight towers
   The site's signature section. Every rival answers "what stage is it at"
   with the words "Under Construction". This one answers it eight times, in
   the developer's own wording, with an as-at line.

   One ruling that is not negotiable: there is no bar, no ladder, no progress
   ring, no percentage and no sparkline in here. A bar whose length is derived
   from "19th floor slab completed" against "plinth beam completed" asserts a
   proportional relationship no source states, and it turns a construction
   fact into an implied storey count. The section is a table of words.
   -------------------------------------------------------------------------- */
.standing .frame__in { padding: 0 0 var(--notch); }
.standing__asat {
  margin-top: var(--s-3);
  font-size: clamp(.875rem, .86rem + .068vw, .90625rem);
  color: var(--palm-light);                 /* 6.74:1 on --canopy            */
}
.towers { width: 100%; border-collapse: collapse; }
.towers th, .towers td {
  text-align: left; padding: 14px 16px;
  border-bottom: 1px solid var(--line-dark); vertical-align: baseline;
  font-size: clamp(.875rem, .86rem + .068vw, .90625rem); line-height: 1.5;
}
.towers thead th,
.towers thead th:last-child {
  font-family: var(--font-text); font-weight: 600; font-size: .75rem;
  letter-spacing: .02em; color: var(--palm-light);
  border-bottom-color: var(--line-dark-2);
}
.towers tbody th {
  font-family: var(--font-text); font-weight: 600;
  font-size: clamp(1.0625rem, 1.002rem + .27vw, 1.1875rem);
  color: var(--on-dark); white-space: nowrap;
}
.towers td { color: var(--on-dark-2); }     /* 8.11:1                        */
.towers tr:last-child th, .towers tr:last-child td { border-bottom: 0; }
/* The eight verify links get padding-block so a 15px number becomes a 44px
   tap target. WCAG 2.2 SC 2.5.8. */
.towers__verify {
  display: inline-flex; align-items: center; min-height: 44px; padding-block: 12px;
  font-family: var(--font-text); font-weight: 500;
  color: var(--sky);                        /* 8.18:1 on --canopy            */
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  text-decoration: underline; text-underline-offset: 3px;
}
.towers__verify:hover { color: var(--on-dark); }

@media (max-width: 759px) {
  .towers, .towers tbody, .towers tr, .towers th, .towers td { display: block; width: 100%; }
  .towers thead { position: absolute; left: -9999px; }
  .towers tr { padding: 18px 16px; border-bottom: 1px solid var(--line-dark); }
  .towers tr:last-child { border-bottom: 0; }
  .towers th, .towers td { border-bottom: 0; padding: 0; }
  .towers td { margin-top: var(--s-3); }
  .towers td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--font-text); font-weight: 600;
    font-size: .71875rem; line-height: 1.2; letter-spacing: .02em;
    color: var(--palm-light);
  }
}
@media (min-width: 760px) { .standing .frame__in { padding: var(--s-2) var(--s-3) max(var(--s-3), var(--notch)); } }

/* --------------------------------------------------------------------------
   15. THE LAND, and the amenity treatment
   Not an icon wall. The developer's own 34 items are almost entirely
   landscape and the only amenity photographs in the pack are stock that
   depicts nothing here, so this is a planting list.

   The bullet is the mark's void: a 7px square ring, and it is the smallest
   recurrence of the motif on the site. Not a dot, not a chevron, not a tick
   glyph, not an icon font.
   -------------------------------------------------------------------------- */
.amen { display: grid; gap: clamp(12px, 2vw, 24px); grid-template-columns: 1fr; }
.amen__group {
  background: var(--surface); border: 1px solid var(--line);
  padding: clamp(20px, 3vw, 28px);
  padding-bottom: max(clamp(20px, 3vw, 28px), var(--notch));
}
.amen__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.25rem, 1.068rem + .811vw, 1.625rem);
  line-height: 1.24; color: var(--palm-deep);   /* 7.49:1 on --surface       */
}
.amen__count { display: block; margin-top: var(--s-1); color: var(--muted); font-size: .75rem; font-weight: 600; }
.amen__list { display: grid; gap: 8px 24px; margin-top: var(--s-4); list-style: none; grid-template-columns: 1fr; }
.amen__list li { position: relative; padding-left: 22px; color: var(--body); line-height: 1.55; }
.amen__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border: 2px solid var(--palm);   /* 4.51:1        */
}
@media (min-width: 480px)  { .amen__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } }
@media (min-width: 760px)  { .amen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .amen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   16. THE SHOW HOME GALLERY
   This project has no video asset of any kind, so there is no reel rail and
   no screening room. What it gets instead is eight real photographed
   interiors at 1200 x 1600, which is more than most projects in this network
   hold.

   This is the only place on the site where text sits inside an image's box,
   and it sits on a SOLID --canopy fill rather than a scrim, so the ratio is
   exact rather than estimated. The strip carries padding-left: 40px because
   the notch eats the bottom-left corner and that is exactly where the caption
   starts. The motif is structural here, not decorative: the caption is
   indented because the corner is missing.
   -------------------------------------------------------------------------- */
.g-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.g-item { display: block; background: var(--tint); overflow: hidden; cursor: zoom-in; }
.g-item__pic { display: block; overflow: hidden; }
.g-item img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform var(--d-4) var(--ease-out);
}
.g-item:hover img { transform: scale(1.03); }
.g-cap {
  display: block;
  padding: 10px 12px 12px 40px;             /* the notch is 28px, plus 12px  */
  background: var(--canopy); color: var(--on-dark);   /* 13.62:1 exact       */
  font-family: var(--font-text); font-weight: 500;
  font-size: .75rem; line-height: 1.45;
}

/* Below 760px the grid becomes a scroll-snap rail bleeding to both viewport
   edges, with the first tile aligned to the container gutter. No auto-advance,
   no dots, no arrows on touch. This and .table-scroll above 600px are the only
   two things on the site permitted to scroll sideways. */
@media (max-width: 759px) {
  .g-grid {
    grid-auto-flow: column; grid-auto-columns: 82vw;
    grid-template-columns: none;
    gap: 12px;
    margin-inline: calc(50% - 50vw);
    padding-inline: 16px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  .g-grid::-webkit-scrollbar { display: none; }
  .g-item { scroll-snap-align: start; }
}
@media (min-width: 760px)  { .g-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .g-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   17. LOCATION: address, drive times, the infrastructure register
   There is no map on this site at any URL. No pin is confirmed and the deck's
   illustrated map names a metro station that exists on no sanctioned
   alignment, so /location/ carries a status register instead.

   Status is never colour-coded. Operational, Under construction, Approved and
   Proposed all ship in identical --line-strong outline chips with --muted
   text. A green chip for one and a yellow chip for another would encode
   approval in a hue, fail 1.4.1, and be dishonest. The word carries the
   meaning.
   -------------------------------------------------------------------------- */
.addr { border-top: 1px solid var(--line); }
.addr__row {
  display: grid; grid-template-columns: 1fr; gap: var(--s-1);
  padding-block: 14px; border-bottom: 1px solid var(--line);
}
.addr__row dt {
  font-family: var(--font-text); font-weight: 600; font-size: .75rem;
  letter-spacing: .02em; color: var(--muted);
}
.addr__row dd { color: var(--ink); line-height: 1.6; }
@media (min-width: 560px) { .addr__row { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-5); align-items: baseline; } }

.near { display: grid; gap: 0; grid-template-columns: 1fr; }
.near__group { padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.near__group:last-child { border-bottom: 0; }
.near__label { margin-bottom: var(--s-3); }
.near__items { display: grid; gap: var(--s-2) 24px; list-style: none; grid-template-columns: 1fr; }
.near__items li { position: relative; padding-left: 22px; line-height: 1.6; }
.near__items li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border: 2px solid var(--palm);
}
@media (min-width: 480px) { .near__items { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } }

.infra { display: grid; gap: 0; grid-template-columns: 1fr; max-width: 860px; }
.infra__row {
  display: grid; gap: var(--s-2); grid-template-columns: 1fr;
  padding-block: var(--s-4); border-bottom: 1px solid var(--line);
}
.infra__row:last-child { border-bottom: 0; }
.infra__name { font-family: var(--font-text); font-weight: 600; color: var(--ink); }
.infra__row p { font-size: clamp(.875rem, .86rem + .068vw, .90625rem); color: var(--body); }
.chip {
  display: inline-block; justify-self: start;
  padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-1);
  font-family: var(--font-text); font-weight: 600; font-size: .71875rem;
  line-height: 1.2; letter-spacing: .02em; color: var(--muted);  /* 5.82:1   */
}

/* --------------------------------------------------------------------------
   18. THE RERA BLOCK
   -------------------------------------------------------------------------- */
.rera { background: var(--tint); }
.rera__grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: start; }
.rera__list { list-style: none; border-top: 1px solid var(--line); }
.rera__list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4);
  padding-block: 12px; border-bottom: 1px solid var(--line);
}
.rera__tower { font-family: var(--font-text); font-weight: 600; color: var(--ink); min-width: 3.5em; }
.rera__verify {
  display: inline-flex; align-items: center; min-height: 44px; padding-block: 12px;
  color: var(--navy); font-weight: 500;     /* 7.79:1 on --tint              */
  text-decoration: underline; text-underline-offset: 3px;
}
.rera__verify:hover { color: var(--navy-deep); }
.rera__asat { margin-top: var(--s-4); font-size: clamp(.875rem, .86rem + .068vw, .90625rem); color: var(--muted); }
@media (min-width: 820px) { .rera__grid { grid-template-columns: 1.5fr .9fr; gap: var(--s-7); } }

/* --------------------------------------------------------------------------
   19. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 860px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  min-height: 44px; padding: 18px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.0625rem, 1.002rem + .27vw, 1.1875rem);
  line-height: 1.35; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 11px; height: 11px; margin-top: 6px;
  border-right: 2px solid var(--palm); border-bottom: 2px solid var(--palm);
  transform: rotate(45deg);
  transition: transform var(--d-2) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item__body { padding-bottom: 20px; }
.faq-item__body p + p { margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   20. CONTACT AND FORM
   Real visible labels above every field. The placeholder-only pattern the
   network ships is an accessibility failure and does not survive here;
   placeholders stay only as format hints.

   16px field text is what stops iOS Safari zooming on focus. The Configuration
   select offers 1 BHK, 2 BHK, 2.5 BHK and Not sure yet, and there is no 3 BHK
   option at any point.
   -------------------------------------------------------------------------- */
.contact__grid { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: 1fr; align-items: start; }
.contact__details { list-style: none; margin-top: var(--s-6); }
.contact__details li { display: flex; gap: var(--s-3); padding-block: 14px; border-bottom: 1px solid var(--line); }
.contact__details li:last-child { border-bottom: 0; }
.contact__details strong { display: block; margin-bottom: 2px; font-weight: 600; font-size: .75rem; color: var(--muted); }
.contact__details div { color: var(--ink); line-height: 1.6; }
.contact__details a { text-decoration: underline; text-underline-offset: 3px; }

.form-card {
  background: var(--surface); border: 1px solid var(--line);
  padding: clamp(22px, 3.4vw, 32px);        /* no shadow                     */
  padding-bottom: max(clamp(22px, 3.4vw, 32px), var(--notch));
}
.form-card fieldset { border: 0; }
.form-card legend { margin-bottom: var(--s-5); font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.25rem, 1.068rem + .811vw, 1.625rem); color: var(--ink); }

.field { margin-bottom: var(--s-4); }
.field > label, .modal__form label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-text); font-weight: 600; font-size: .75rem;
  line-height: 1.2; letter-spacing: .02em;
  color: var(--muted);                      /* 6.33:1 on --surface           */
}
.field input, .field select, .field textarea,
.modal__form input, .modal__form select, .modal__form textarea {
  width: 100%; min-height: 48px; padding: 13px 14px;
  font-size: 1rem;
  background: #FFFFFF; color: var(--ink);
  border: 1px solid var(--line-strong);     /* 3.78:1 on --surface           */
  border-radius: var(--r-1);
  transition: border-color var(--d-2) var(--ease-out);
}
.field textarea, .modal__form textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder,
.modal__form input::placeholder { color: var(--muted); opacity: .8; }
.field :is(input, select, textarea):focus-visible,
.modal__form :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--palm-deep); outline-offset: 2px; border-color: var(--action);
}
.field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--err); }
.field__err { display: block; margin-top: 6px; font-size: .875rem; color: var(--err); }  /* 7.86:1 */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin-top: var(--s-4); font-weight: 600; color: var(--ok); }               /* 6.27:1 */
.form-note--err { color: var(--err); }
.form-fineprint { margin-top: var(--s-3); font-size: .8125rem; line-height: 1.55; color: var(--muted); }
/* The success panel appears instantly. It does not fade and it does not slide. */
.form-done { padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ok); }
.form-done h3 { color: var(--ok); font-family: var(--font-text); font-weight: 600; }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   21. SPOKE MASTHEAD AND THE EXPLORE GRID
   The network's .page-hero paints a render behind the H1 and covers it with a
   90 per cent gradient, which is a scrim doing the work of a solid colour.
   Here the masthead is a --tint band notched on its bottom-left, the H1 sits
   on solid sand at 12.60:1, and the page's render goes BELOW it as a plate at
   its honest ceiling. No image behind text, so no scrim, and the render is
   shown at full strength instead of at 10 per cent under a wash.
   -------------------------------------------------------------------------- */
.masthead {
  background: var(--tint);
  padding-block: clamp(32px, 5vw, 64px) clamp(48px, 7vw, 88px);
  padding-bottom: max(clamp(48px, 7vw, 88px), var(--notch));
}
.masthead h1 { margin-top: var(--s-3); }
.masthead p { margin-top: var(--s-4); max-width: 68ch; color: var(--body); }   /* 7.10:1 */
.crumbs { font-size: .8125rem; color: var(--muted); }                          /* 5.09:1 */
.crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--navy); }
.crumbs span { padding-inline: 6px; }

.explore-grid { display: grid; gap: clamp(12px, 2vw, 16px); grid-template-columns: 1fr; }
.explore-card {
  display: block; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color var(--d-2) var(--ease-out);
}
.explore-card:hover { border-color: var(--line-strong); }   /* no translate   */
.explore-card h4 { margin-bottom: 2px; }
.explore-card span { font-size: .875rem; color: var(--muted); }
@media (min-width: 480px) { .explore-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } }

/* --------------------------------------------------------------------------
   22. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--canopy); color: var(--on-dark-2); padding-top: clamp(48px, 7vw, 80px); }
.footer__grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; padding-bottom: var(--s-7); }
.footer__logo { height: 38px; width: auto; margin-bottom: var(--s-4); }
.footer__brand p { font-size: .90625rem; line-height: 1.7; color: var(--on-dark-2); }   /* 8.11:1 */
.footer h4 {
  margin-bottom: var(--s-4);
  font-family: var(--font-text); font-weight: 600; font-size: .75rem;
  letter-spacing: .02em; color: var(--palm-light);        /* 6.74:1          */
}
.footer a {
  display: block; padding-block: 7px; min-height: 44px;
  font-size: .90625rem; line-height: 1.6; color: var(--on-dark-2);
  transition: color var(--d-2) var(--ease-out);
}
.footer a:hover { color: var(--on-dark); }                /* no padding shift */
.footer__rera { display: inline-block; margin-top: var(--s-4); font-size: .8125rem; color: var(--sky); }
.footer__addr { margin-top: var(--s-3); font-size: .90625rem; line-height: 1.6; }
.footer__socials { margin-top: var(--s-5); }
.footer__socials-label { display: block; margin-bottom: var(--s-2); font-weight: 600; font-size: .6875rem; color: var(--on-dark-2); }
.footer__social { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; color: var(--on-dark); }
.footer__social:hover { color: var(--palm-light); }
.footer__bar { margin-top: var(--s-6); border-top: 1px solid var(--line-dark); font-size: .8125rem; }
.footer__bar-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--s-2) var(--s-5); padding-block: var(--s-5);
}
.footer__bar p { font-size: .8125rem; }
.footer__legal a { display: inline; padding: 0; min-height: 0; text-decoration: underline; text-underline-offset: 3px; }
/* The one place channel-partner status appears outside /disclaimer/. One
   paragraph, three sentences, verbatim, once per page. */
.footer__disclaimer {
  display: block; padding-block: var(--s-4) var(--s-7);
  max-width: 96ch; font-size: .78125rem; line-height: 1.62; color: var(--on-dark-2);
}
@media (min-width: 620px)  { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s-7); } }

/* --------------------------------------------------------------------------
   23. FLOAT, STICKY BAR, MODAL, LIGHTBOX
   The float's pulse keyframe does not exist in this stylesheet. A bubble
   that throbs forever is the loudest shared tell in this network and it
   holds a compositor layer for the life of the page.
   -------------------------------------------------------------------------- */
.float {
  position: fixed; right: 20px; bottom: 24px; z-index: var(--z-float);
  display: none; place-content: center;
  width: 56px; height: 56px; border-radius: var(--r-pill);
  background: var(--wa); color: var(--canopy);   /* 7.62:1                   */
  transition: background-color var(--d-2) var(--ease-out);
}
.float:hover { background: #1EB258; }
@media (min-width: 1024px) { .float { display: grid; } }

.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mobile-bar);
  display: none; grid-template-columns: repeat(3, 1fr);
  background: var(--canopy);
  border-top: 1px solid var(--line-dark-2);      /* 3.57:1                   */
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  transition: transform var(--d-3) var(--ease-in-out);   /* no shadow        */
}
.mobile-cta.show { transform: none; }
.mcta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: 8px 4px; border: 0; cursor: pointer;
  font-family: var(--font-text); font-weight: 600; font-size: .6875rem; letter-spacing: .02em;
  background: var(--canopy); color: var(--on-dark);      /* 13.62:1          */
}
.mcta--enquire { background: var(--action); color: var(--ground); }   /* 8.92:1 */
.mcta:active { filter: brightness(.94); }
@media (max-width: 1023px) { .mobile-cta { display: grid; } }

.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.open { display: flex; }
.modal__backdrop { position: absolute; inset: 0; z-index: var(--z-modal-backdrop); background: rgba(18, 41, 31, .62); }
.modal__dialog {
  position: relative; z-index: var(--z-modal);
  width: min(100%, 440px); max-height: 90svh; overflow-y: auto;
  padding: clamp(24px, 4vw, 32px);
  background: var(--surface); border-radius: var(--r-0);
  box-shadow: var(--sh-modal);                   /* shadow 2 of 3            */
}
.modal__close {
  position: absolute; top: 8px; right: 8px;
  display: grid; place-content: center; min-width: 44px; min-height: 44px;
  font-size: 1.5rem; line-height: 1; color: var(--muted);
  background: transparent; border: 0; cursor: pointer;
}
.modal__close:hover { color: var(--ink); }
.modal__head { margin-bottom: var(--s-5); }
.modal__head p { margin-top: var(--s-2); font-size: .9375rem; color: var(--muted); }
.modal__form { display: grid; gap: var(--s-4); }

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-4); padding: 24px; background: rgba(18, 41, 31, .95);
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 92vw; max-height: 80svh; width: auto; height: auto;
  border-radius: var(--r-0);
  box-shadow: var(--sh-light);                   /* shadow 3 of 3            */
}
.lightbox__cap { max-width: 68ch; text-align: center; font-size: .875rem; color: var(--on-dark-2); }
.lightbox__close, .lightbox__nav {
  position: absolute; display: grid; place-content: center;
  min-width: 44px; min-height: 44px;
  font-size: 1.6rem; line-height: 1; color: var(--on-dark);
  background: rgba(239, 242, 234, .12);
  border: 1px solid var(--line-dark-2); border-radius: var(--r-1);
  cursor: pointer;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(239, 242, 234, .24); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__nav--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 16px; top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   24. MOTION
   Transition only opacity, transform, colour, background-color, border-color
   and outline-color. Never `all`, never height, width, top or left.

   The reveal is 10px and 280ms, not the network's 28px and 700ms. A reveal a
   human would not notice is the target. Stagger is 50ms and caps at three
   children per group.

   Must not animate, at all: the price figure, the MahaRERA numbers, the phone
   number, the eight stage strings, the lockup, the favicon, the header height
   on scroll, the H1, and the form success panel.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }
.configs .reveal:nth-child(2), .amen .reveal:nth-child(2),
.explore-grid .reveal:nth-child(2), .grid-3 .reveal:nth-child(2) { transition-delay: 50ms; }
.configs .reveal:nth-child(3), .amen .reveal:nth-child(3),
.explore-grid .reveal:nth-child(3), .grid-3 .reveal:nth-child(3) { transition-delay: 100ms; }

/* Standing rule, currently used ZERO times. If text must ever go over an
   image on this site, this exact stop is the minimum: canopy at 70 per cent
   flattens to about #354B49 over a mid-tone image, which gives --on-dark
   8.23:1. At 62 per cent it is 7.12:1, which is the floor. Below 62 per cent
   it does not ship. */
:root {
  --scrim: linear-gradient(to top, rgba(18, 41, 31, .86) 0%, rgba(18, 41, 31, .70) 55%, rgba(18, 41, 31, .62) 100%);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* The rail keeps its scroll-snap, because snapping is layout and not
     motion, but it loses smooth scrolling. */
  .g-grid { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   25. SMALL-SCREEN GUARANTEES
   360px is the design canvas, so everything above is written mobile-first and
   these are the last-mile guarantees rather than the layout. Container content
   at 360px is 328px. There is no horizontal scroll at any scroll position,
   with the drawer open or closed, with the lightbox open.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .hero__grid, .contact__grid, .rera__grid, .configs, .amen, .amen__list,
  .near__items, .explore-grid, .footer__grid, .grid-3, .infra {
    grid-template-columns: 1fr;
  }
  /* The one intentional 2-up on the phone, for a tiny stat pair. */
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .wrap { width: min(100% - 24px, var(--container)); }
  .btn { padding-inline: 16px; }
  .btn--lg { padding: 16px 18px; }
  .frame__label { left: 20px; }
  .g-cap { padding-left: 36px; }
}