/* ==========================================================================
   Codename – The Grand Six | Ensaara Metropark
   Campaign stylesheet. Translates the hoarding design language to the web:
   cream editorial paper, ticket/scallop motifs, taped corners, earthy type.
   ========================================================================== */

/* ---------- tokens ------------------------------------------------------ */
:root {
  /* campaign base — ivory, warmed toward the brochure's #fffbef paper */
  --paper: #f8f3e6;
  --paper-lift: #fffbef;
  --paper-deep: #efe6d3;
  --rule: #ddd0b7;

  /* campaign ink */
  --ink: #3a2416;
  --ink-soft: #7a644c;
  --ink-faint: #a08d74;

  /* Brown + ivory, sampled from the print brochure: the deep brown of the
     unit-plan pills is #461300, its paper is #fffbef. The brochure is now the
     brand reference, replacing the olive/navy accents taken from the hoardings. */
  --brown: #461300;
  --brown-deep: #300d00;
  --brown-mid: #5d2208;

  /* Former hoarding accents. Kept as aliases so the ~20 rules in style.css and
     lp.css that reference them need no edits, and any section still marked
     data-accent="olive" or "navy" resolves to brown. */
  --olive: var(--brown);
  --olive-dark: var(--brown-deep);
  --navy: var(--brown);

  /* the accent in play for the current section */
  --accent: var(--brown);
  --accent-ink: #ffffff;

  /* type */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  /* --serif: "Myraid Pro", Georgia, "Times New Roman", serif; */

  --sans:
    "Myraid Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* rhythm */
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(56px, 9vw, 128px);
  --maxw: 1240px;

  --shadow-paper: 0 18px 44px rgba(58, 36, 22, 0.13);
  --shadow-soft: 0 10px 30px rgba(58, 36, 22, 0.08);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* accent themes applied per-section */
[data-accent="olive"] {
  --accent: var(--olive);
}
[data-accent="navy"] {
  --accent: var(--navy);
}
[data-accent="brown"] {
  --accent: var(--brown);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
picture {
  display: block;
}
a {
  color: inherit;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  font-size: 14px;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- layout ------------------------------------------------------ */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section);
  position: relative;
}
.section--tint {
  background: var(--paper-lift);
}
.section--deep {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- campaign typography ---------------------------------------- */
.eyebrow {
  font-size: clamp(10px, 1.5vw, 11.5px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
.section--deep .eyebrow {
  color: rgba(247, 242, 231, 0.55);
}

.section-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}

.lede {
  font-size: clamp(16px, 1.9vw, 18.5px);
  line-height: 1.72;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 8px;
}
.section--deep .lede {
  color: rgba(247, 242, 231, 0.8);
}

/* the campaign lock-up: statement over the anchor line */
.lockup {
  margin: 0;
}
.lockup__line {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 1.06;
  font-size: clamp(15px, 2.5vw, 26px);
}
.lockup__anchor {
  display: block;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.004em;
  line-height: 1.03;
  font-size: clamp(24px, 4.6vw, 50px);
  color: var(--accent);
}

/* ==========================================================================
   Ticket / scallop / tape — the hoarding's core graphic device, in CSS
   ========================================================================== */

/* convex semicircle bumps along the bottom edge, as on the hoarding ticket */
.scallop {
  position: relative;
}
.scallop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px;
  background-image: radial-gradient(
    circle at 10px 0,
    var(--scallop-color, var(--paper-lift)) 9.4px,
    transparent 9.8px
  );
  background-size: 20px 10px;
  background-repeat: repeat-x;
  pointer-events: none;
}

/* the taped paper "Code Name: The Grand Six" identity element */
.ticket {
  --scallop-color: var(--paper-lift);
  position: relative;
  background: var(--paper-lift);
  padding: clamp(18px, 3vw, 30px) clamp(26px, 5vw, 58px)
    clamp(16px, 2.6vw, 26px);
  text-align: center;
  box-shadow: var(--shadow-paper);
  max-width: 420px;
}
.ticket__kicker {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 20px);
  color: var(--ink);
  margin: 0 0 2px;
  line-height: 1.2;
}
.ticket__name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(26px, 4.6vw, 44px);
  line-height: 1.08;
  margin: 0;
  color: var(--accent);
  letter-spacing: -0.005em;
}

/* translucent tape strips at the upper corners */
.ticket__tape {
  position: absolute;
  top: -11px;
  width: clamp(52px, 8vw, 78px);
  height: 26px;
  background: rgba(255, 255, 255, 0.46);
  border-left: 1px solid rgba(255, 255, 255, 0.58);
  border-right: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow: 0 2px 7px rgba(58, 36, 22, 0.13);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}
.ticket__tape--l {
  left: 4px;
  transform: rotate(-24deg);
}
.ticket__tape--r {
  right: 4px;
  transform: rotate(24deg);
}

/* solid accent block with scalloped foot — the hoarding's price panel */
.price-block {
  --scallop-color: var(--accent);
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: clamp(14px, 2.5vw, 28px);
  background: var(--accent);
  color: var(--accent-ink);
  padding: clamp(12px, 2vw, 19px) clamp(18px, 3vw, 30px);
}
.price-block__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.price-block__cell + .price-block__cell {
  border-left: 1px solid rgba(255, 255, 255, 0.38);
  padding-left: clamp(14px, 2.5vw, 28px);
}
.price-block__big {
  font-weight: 800;
  /* Figure sizes increased by request — the price and configuration are the
     two numbers the hero has to land. */
  font-size: clamp(23px, 3.8vw, 41px);
  line-height: 1.06;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.price-block__small {
  font-weight: 600;
  font-size: clamp(13px, 1.9vw, 18px);
  line-height: 1.3;
  opacity: 0.93;
}

/* ---------- buttons ----------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 14px 30px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bg);
  border-radius: 2px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.25s var(--ease),
    background-color 0.25s var(--ease),
    color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.btn:active {
  transform: translateY(0);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: currentColor;
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn--on-image {
  --btn-bg: rgba(255, 255, 255, 0.1);
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--on-image:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

.btn--wide {
  width: 100%;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(247, 242, 231, 0.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 4px 22px rgba(58, 36, 22, 0.07);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
  padding-block: 10px;
}
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.brand img {
  height: 45px;
  width: auto;
  max-width: 150px;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.9vw, 30px);
}
/* "Download Brochure" is materially longer than the old "Enquire Now" and was
   squeezing the nav until both it and the links wrapped onto two lines. */
.nav a,
.header-cta {
  white-space: nowrap;
}
.nav a {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 6px;
  position: relative;
  transition: color 0.22s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 0;
  background: var(--olive);
  transition: width 0.28s var(--ease);
}
.nav a:hover {
  color: var(--ink);
}
.nav a:hover::after {
  width: 100%;
}

.header-cta {
  color: #f7f2e7 !important;
  padding: 11px 18px;
  min-height: 44px;
  font-size: 12px;
  letter-spacing: 0.07em;
  --btn-bg: var(--olive);
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.6px;
  background: var(--ink);
  position: relative;
  transition: background 0.2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.6px;
  background: var(--ink);
  transition:
    transform 0.28s var(--ease),
    top 0.28s var(--ease);
}
.nav-toggle span::before {
  top: -6.5px;
}
.nav-toggle span::after {
  top: 6.5px;
}
.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] span::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: calc(100vh - 68px);
  min-height: calc(100svh - 68px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(22px, 4vw, 44px) clamp(24px, 4vw, 52px);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s var(--ease);
}
.hero__slide.is-active {
  opacity: 1;
}
.hero__slide picture {
  width: 100%;
  height: 100%;
}
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(24, 16, 9, 0.4) 0%,
    rgba(24, 16, 9, 0.1) 26%,
    rgba(24, 16, 9, 0.2) 55%,
    rgba(24, 16, 9, 0.74) 100%
  );
}

.hero__top {
  display: flex;
  justify-content: center;
}
.hero .ticket {
  --scallop-color: var(--paper-lift);
}
.hero .ticket__name {
  color: var(--ink);
}

.hero__body {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vw, 26px);
  color: #fff;
  text-shadow: 0 1px 18px rgba(20, 12, 6, 0.34);
}
.hero .lockup__anchor {
  color: #fff;
}
.hero .lockup__line {
  color: rgba(255, 255, 255, 0.94);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(16px, 3vw, 34px);
}
.hero .price-block {
  --accent: var(--olive-dark);
  --scallop-color: var(--olive-dark);
}

.hero__where {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(17px, 2.4vw, 22px);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hero__where svg {
  flex: none;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero__ctas .btn {
  --btn-bg: var(--olive);
  flex: 1 1 auto;
  min-width: 190px;
}

/* RERA badge floating top-right, as on the hoarding */
.hero__rera {
  position: absolute;
  top: clamp(16px, 3vw, 30px);
  right: var(--gutter);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 13px;
  background: rgba(255, 255, 255, 0.93);
  padding: 12px 17px;
  border-radius: 3px;
  box-shadow: var(--shadow-soft);
}
.hero__rera img {
  width: 56px;
  height: 56px;
}
.hero__rera .qr {
  width: 64px;
  height: 64px;
}
.hero__rera-text {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}
.hero__rera-text strong {
  display: block;
  font-size: 18px;
  letter-spacing: 0.02em;
}
.hero__rera-text a {
  color: var(--ink-soft);
  text-decoration: none;
}

/* ==========================================================================
   Story — "Make Room For Life"
   ========================================================================== */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(18px, 2.6vw, 32px);
  margin-top: clamp(30px, 4vw, 52px);
}
.story-card {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ink);
  min-height: clamp(330px, 40vw, 430px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.story-card > picture {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.story-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  transition: transform 0.8s var(--ease);
}
.story-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(22, 14, 8, 0.84) 0%,
    rgba(22, 14, 8, 0.3) 48%,
    rgba(22, 14, 8, 0.06) 100%
  );
}
.story-card:hover img {
  transform: scale(1.045);
}
.story-card__body {
  flex: 1 1 auto;
  width: 100%;
  padding: clamp(20px, 2.8vw, 30px);
  color: #fff;
}
.story-card__body .lockup__line {
  font-size: clamp(13px, 1.6vw, 15.5px);
  color: rgba(255, 255, 255, 0.9);
}
.story-card__body .lockup__anchor {
  font-size: clamp(19px, 2.2vw, 25px);
  color: #fff;
}
.story-card__note {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Amenities
   ========================================================================== */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(24px, 3vw, 36px) 0 clamp(24px, 3vw, 34px);
}
.tab {
  background: transparent;
  border: 1.5px solid var(--rule);
  border-radius: 2px;
  padding: 11px 20px;
  min-height: 46px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.tab:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
}
.tab[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.panel[hidden] {
  display: none;
}
.panel__intro {
  margin: 0 0 clamp(24px, 3vw, 36px);
  color: var(--ink-soft);
  max-width: 72ch;
  font-size: 15.5px;
  line-height: 1.72; /* same rhythm as .lede in the other sections */
}

.amenity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  /* same gap as the plan and story grids, so the sections read as one system */
  gap: clamp(18px, 2.4vw, 28px);
}
.amenity {
  /* <figure> has a default 1em 40px margin. Without this the tiles sat 40px in
     from the heading on both sides, with 100px gaps between them. The story
     cards and the overview picture already clear it; these never did. */
  margin: 0;
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.amenity img {
  width: 100%;
  aspect-ratio: 45 / 32;
  object-fit: cover;
}
.amenity figcaption {
  padding: 13px 16px 15px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

.amenity-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px 22px;
}
.amenity-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.amenity-list li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  background: var(--accent);
  border-radius: 50%;
}

/* ==========================================================================
   Floor plans
   ========================================================================== */
/* Two-up, not three. The plans are landscape, so column width sets how large
   the drawing can render — at three across the printed room dimensions were
   unreadable. Two across roughly doubles the drawn area. */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(28px, 3.5vw, 44px);
}
/* three plans into two columns leaves one on its own — centre it rather than
   letting it sit orphaned in the left column */
.plan-grid .plan:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - clamp(9px, 1.2vw, 14px));
}
@media (max-width: 640px) {
  .plan-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .plan-grid .plan:last-child:nth-child(odd) {
    grid-column: auto;
    width: 100%;
  }
}
/* ---------- overview: copy + image ------------------------------------- */
.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.overview-copy .lede {
  max-width: 54ch;
}
.overview-figure {
  --scallop-color: var(--paper-lift);
  position: relative;
  margin: 0;
  background: var(--paper-lift);
  padding: 10px 10px 0;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-paper);
}
.overview-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 45 / 32;
  object-fit: cover;
}
.overview-figure figcaption {
  padding: 9px 2px 11px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* ink-faint measured only 3.1:1 on the ivory card; ink-soft clears 4.5:1 */
  color: var(--ink-soft);
  text-align: right;
}

@media (max-width: 880px) {
  .overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .overview-figure {
    order: -1; /* picture first on a phone, then the copy */
  }
}

/* ---------- the two brochure moments ------------------------------------ */
/* 1. the offer, in the enquiry section */
.brochure-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 7px 14px 7px 12px;
  background: rgba(255, 251, 239, 0.12);
  border: 1px solid rgba(255, 251, 239, 0.34);
  border-radius: 2px;
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.brochure-badge svg {
  flex: none;
  opacity: 0.85;
}

/* 2. the delivery, in the success card */
.form-brochure {
  margin: 20px 0 0;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.form-brochure .btn {
  min-width: 232px;
}
.form-brochure__hint {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
}

/* Building floor plate. Sits above .plan-grid as a single full-width card:
   it is a wide, detailed drawing and is unreadable at unit-card size. */
.plan--wide {
  width: 100%;
  margin-top: clamp(28px, 3.5vw, 44px);
}
/* The base .plan__figure img crops to 4/3 with object-fit: cover, which sliced
   the edges off the drawings — including the printed room dimensions. The
   brochure plans are portrait and differ in ratio from each other, so every
   plan is now shown whole inside a fixed box. */
.plan--wide .plan__figure img {
  aspect-ratio: 1800 / 734;
  object-fit: contain;
  background: var(--paper-lift);
}
/* The unit plans are now landscape (rotated out of the brochure's vertical
   printing), and they differ in ratio from each other — 1.12, 1.29 and 1.44.
   A 4:3 box with object-fit: contain shows every one of them whole: the
   narrower plans use the full height, the wider ones the full width. */
.plan-grid .plan__figure img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--paper-lift);
  /* inset slightly so the "Apartment C2 / A2 / B2" caption and the
     "Type 1 Apartment" label don't sit flush against the card border */
  padding: 8px;
}

/* Tap-to-enlarge affordance. The drawings carry printed room dimensions that
   are unreadable at card size, so the lightbox is the real view — say so
   rather than relying on the magnifier icon alone. */
.plan__hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.plan__hint svg {
  flex: none;
  opacity: 0.9;
}
.plan:hover .plan__hint,
.plan:focus-visible .plan__hint {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.plan {
  --scallop-color: var(--paper-lift);
  position: relative;
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-paper);
}
.plan__figure {
  position: relative;
  overflow: hidden;
  background: var(--paper-deep);
}
.plan__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.plan__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-soft);
}
.plan__figure {
  display: block;
}
.plan__body {
  display: block;
  padding: 18px 20px 22px;
}
.plan__name {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(19px, 2.2vw, 24px);
  margin: 0 0 5px;
  color: var(--ink);
}
.plan__meta {
  display: block;
  margin: 0;
  /* carpet areas: larger and in full ink, so the figure reads as a figure */
  font-size: clamp(15px, 1.5vw, 17.5px);
  font-weight: 700;
  color: var(--ink);
}
.plan__flag {
  display: inline-block;
  margin-top: 11px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8c5a1b;
  background: #f6ead4;
  border: 1px solid #e3cfa6;
  padding: 4px 9px;
  border-radius: 2px;
}
.plan-cta {
  margin-top: clamp(26px, 3.4vw, 38px);
  text-align: center;
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(20, 13, 7, 0.9);
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s var(--ease),
    visibility 0.3s var(--ease);
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox[hidden] {
  display: none;
}
.lightbox__inner {
  max-width: 1000px;
  width: 100%;
  text-align: center;
}
.lightbox__img {
  max-width: 100%;
  max-height: 76svh;
  width: auto;
  margin-inline: auto;
  background: var(--paper-lift);
  border-radius: 2px;
}
.lightbox__caption {
  color: var(--paper);
  margin: 16px 0 0;
  font-family: var(--serif);
  font-size: clamp(17px, 2.2vw, 22px);
}
.lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* ==========================================================================
   Location
   ========================================================================== */
.location-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(24px, 3.6vw, 52px);
  align-items: center;
}
.map-frame {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  aspect-ratio: 16 / 11;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.address {
  font-style: normal;
  font-family: var(--serif);
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 22px;
}

/* ==========================================================================
   Enquiry form
   ========================================================================== */
.enquire-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.form-card {
  --scallop-color: var(--paper-lift);
  position: relative;
  background: var(--paper-lift);
  padding: clamp(24px, 3.4vw, 42px);
  box-shadow: var(--shadow-paper);
}
.section--deep .form-card {
  color: var(--ink);
}

.field {
  margin-bottom: 18px;
}
.field label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.field label .req {
  color: #a8452b;
}
.field input,
.field textarea {
  width: 100%;
  /* 16px prevents iOS zoom-on-focus */
  font-size: 16px;
  padding: 14px 15px;
  min-height: 52px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  transition:
    border-color 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}
.field textarea {
  min-height: 104px;
  resize: vertical;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(61, 83, 35, 0.13);
  outline: none;
}
.field[data-invalid] input,
.field[data-invalid] textarea {
  border-color: #b4553c;
}
.field__error {
  display: none;
  margin: 6px 0 0;
  font-size: 12.5px;
  color: #a8452b;
}
.field[data-invalid] .field__error {
  display: block;
}

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

.form-status {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.55;
}
.form-status[data-state="error"] {
  color: #a8452b;
}
.form-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.55;
}

.form-success {
  text-align: center;
  padding: clamp(14px, 3vw, 30px) 0;
}
.form-success__tick {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--olive);
  display: grid;
  place-items: center;
}
.form-success h3 {
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 27px);
  margin: 0 0 8px;
  color: var(--ink);
}
.form-success p {
  margin: 0 auto;
  color: var(--ink-soft);
  max-width: 40ch;
}

button[disabled] {
  opacity: 0.62;
  cursor: progress;
}

.contact-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 26px;
}
.contact-rail a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(247, 242, 231, 0.22);
  border-radius: 2px;
  text-decoration: none;
  transition:
    background-color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.contact-rail a:hover {
  background: rgba(247, 242, 231, 0.08);
  border-color: rgba(247, 242, 231, 0.4);
}
.contact-rail .lbl {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 242, 231, 0.55);
  margin-bottom: 2px;
}
.contact-rail .val {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--ink);
  color: rgba(247, 242, 231, 0.78);
  padding-block: clamp(46px, 6vw, 76px) 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.3fr;
  gap: clamp(26px, 3.6vw, 54px);
  padding-bottom: clamp(30px, 4vw, 48px);
}
.site-footer img.footer-logo {
  height: 62px;
  width: auto;
  margin-bottom: 16px;
}
.footer-h {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(247, 242, 231, 0.5);
  margin: 0 0 14px;
}
.site-footer p {
  margin: 0 0 12px;
  font-size: 16.5px;
  line-height: 1.68;
}
.site-footer a {
  color: var(--paper);
}

.rera-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(247, 242, 231, 0.06);
  border: 1px solid rgba(247, 242, 231, 0.16);
  padding: 16px;
  border-radius: 2px;
}
.rera-box img.qr {
  width: 84px;
  height: 84px;
  background: #fff;
  padding: 4px;
  flex: none;
}
.rera-box .num {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--paper);
  margin: 2px 0 4px;
}

.disclaimer {
  border-top: 1px solid rgba(247, 242, 231, 0.16);
  padding-block: 22px;
  font-size: 11.8px;
  line-height: 1.66;
  color: rgba(247, 242, 231, 0.55);
}
.copyright {
  border-top: 1px solid rgba(247, 242, 231, 0.16);
  padding-block: 18px calc(18px + var(--sticky-pad, 0px));
  font-size: 12.5px;
  color: rgba(247, 242, 231, 0.55);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
}

/* ==========================================================================
   Sticky mobile CTA
   ========================================================================== */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  background: var(--paper-lift);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -6px 24px rgba(58, 36, 22, 0.12);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
}
.sticky-cta a {
  flex: 1 1 0;
  /* without this, the longest label ("Download Brochure") sets a min-content
     floor that pushes the bar past a 320px viewport */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 50px;
  border-radius: 2px;
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1.5px solid var(--rule);
  color: var(--ink);
  transition: background-color 0.2s var(--ease);
}
.sticky-cta a.is-primary {
  flex: 1.5 1 0;
  background: var(--olive);
  border-color: var(--olive);
  color: #fff;
}
.sticky-cta a.is-wa {
  border-color: #1f8f4e;
  color: #14713d;
}
.sticky-cta svg {
  flex: none;
}

/* ==========================================================================
   Motion
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
.reveal[data-delay="1"] {
  transition-delay: 0.09s;
}
.reveal[data-delay="2"] {
  transition-delay: 0.18s;
}
.reveal[data-delay="3"] {
  transition-delay: 0.27s;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .location-grid,
  .enquire-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Header collapse. Pulled out of the 860px block and widened: with "Download
   Brochure" in the header and the nav links set to nowrap, the desktop header
   overflows its container just below 1120px. Measured, not guessed — 1100px
   still overflowed at 1024. Everything below 860px is unaffected, since this
   range contains it. */
@media (max-width: 1120px) {
  html {
    scroll-padding-top: 66px;
  }

  .nav-toggle {
    display: flex;
  }
  .header-cta {
    display: none;
  }
  .site-header__inner {
    min-height: 60px;
  }
  .brand img {
    height: 36px;
  }

  .nav {
    position: fixed;
    inset: 60px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper-lift);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 16px 34px rgba(58, 36, 22, 0.13);
    padding: 6px 0 14px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.26s var(--ease),
      transform 0.26s var(--ease),
      visibility 0.26s var(--ease);
    max-height: calc(100svh - 60px);
    overflow-y: auto;
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav a {
    padding: 15px var(--gutter);
    border-bottom: 1px solid var(--paper-deep);
    font-size: 13px;
  }
  .nav a::after {
    display: none;
  }
  .nav .header-cta {
    display: flex;
    margin: 14px var(--gutter) 0;
    border-bottom: 0;
    color: #fff;
    justify-content: center;
  }

  /* keep the sticky bar clear of page content */
  .sticky-cta {
    display: flex;
  }
  body {
    padding-bottom: 0;
  }
  .site-footer {
    --sticky-pad: 62px;
  }
}

@media (max-width: 860px) {

  .hero {
    min-height: calc(100vh - 60px);
    min-height: calc(100svh - 60px);
    /* With the ticket hidden, mobile has no element reserving space at the
       top of the hero (unlike desktop, where the empty .hero__top still
       occupies a flex slot). Set the breathing room explicitly instead. */
    padding-block: 36px clamp(24px, 4vw, 52px);
  }
  .hero__rera {
    position: static;
    align-self: flex-start;
    margin: 0 var(--gutter) 12px;
    padding: 6px 10px;
    gap: 8px;
  }
  .hero__rera img {
    width: 44px;
    height: 44px;
  }
  .hero__rera .qr {
    width: 50px;
    height: 38px;
  }
  .hero__top {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .hero__facts {
    gap: 16px;
  }
  .hero__ctas .btn {
    min-width: 0;
    flex: 1 1 45%;
    padding-inline: 14px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
  .story-card {
    min-height: 300px;
  }
}

/* Very narrow phones (320-400px): the RERA badge and the two-column footer
   both push past the viewport. The badge got wider when the registration
   number was enlarged, so it needs its own floor here. */
@media (max-width: 400px) {
  .hero__rera-text {
    font-size: 12.5px;
  }
  .hero__rera-text strong {
    font-size: 15px;
  }
  .hero__rera img {
    width: 38px;
    height: 38px;
  }
  .hero__rera .qr {
    width: 44px;
    height: 44px;
  }
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* the enlarged registration number gives this box a min-content floor wider
     than a 320px screen — shrink the figure and let the QR sit above the text */
  .rera-box {
    flex-wrap: wrap;
    gap: 12px;
    padding: 13px;
  }
  .rera-box > * {
    min-width: 0;
  }
  .rera-box .num {
    font-size: 17px;
    overflow-wrap: anywhere;
  }
  .rera-box img.qr {
    width: 68px;
    height: 68px;
  }
  .sticky-cta {
    gap: 5px;
    padding-inline: 7px;
  }
  .sticky-cta a {
    font-size: 10.5px;
    letter-spacing: 0.04em;
    padding-inline: 4px;
  }
}

@media (max-width: 480px) {
  .hero {
    padding-block: 30px 20px;
  }
  .hero__ctas {
    gap: 9px;
  }
  .hero__ctas .btn {
    min-height: 50px;
    font-size: 12px;
    letter-spacing: 0.09em;
  }
  .price-block {
    width: 100%;
    justify-content: flex-start;
  }
  .ticket {
    padding-inline: 22px;
  }
  .amenity-grid {
    grid-template-columns: 1fr;
  }
  .tabs {
    gap: 6px;
  }
  .tab {
    padding: 10px 14px;
    font-size: 11.5px;
    flex: 1 1 45%;
  }
  .copyright {
    flex-direction: column;
    gap: 6px;
  }
}

/* very short viewports: protect above-the-fold CTA visibility */
@media (max-height: 620px) and (max-width: 860px) {
  .hero {
    min-height: auto;
    padding-block: 18px 26px;
  }
  .hero__rera {
    display: none;
  }
}

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

@media print {
  .site-header,
  .sticky-cta,
  .lightbox,
  .hero__ctas {
    display: none !important;
  }
}

/* --- 28 Sep 2026 content refresh: brochure-led master plan + location --- */
.masterplan-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.masterplan-figure { margin: 0; overflow: hidden; background: #fff; }
.masterplan-figure img { display: block; width: 100%; height: auto; }
.masterplan-figure figcaption { padding: 10px 14px; font-size: 12px; opacity: .72; }

.plan__desc {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  opacity: .82;
}

.location-brochure-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  margin-top: 32px;
}
.location-brochure-map { margin: 0; overflow: hidden; background: #f5ead9; }
.location-brochure-map img { display: block; width: 100%; height: auto; }
.location-highlights { display: grid; gap: 14px; }
.location-card {
  border-top: 1px solid rgba(58,36,22,.22);
  padding-top: 14px;
}
.location-card h3 { margin: 0 0 4px; font-size: 18px; }
.location-card p { margin: 0; line-height: 1.55; }
.location-card .location-time { font-weight: 700; margin-bottom: 4px; }
.location-highlights .address { margin: 10px 0 4px; }

@media (max-width: 880px) {
  .masterplan-grid,
  .location-brochure-grid { grid-template-columns: 1fr; }
}

/* --- Nearby Facilities editorial redesign --- */
.location-brochure-grid {
  grid-template-columns: minmax(0, 1.03fr) minmax(340px, .97fr);
  gap: clamp(42px, 6vw, 86px);
  align-items: center;
}

.location-brochure-map {
  box-shadow: 0 18px 46px rgba(58,36,22,.08);
}

.location-story {
  position: relative;
  padding: clamp(28px, 3.6vw, 46px) 0 clamp(12px, 2vw, 24px) clamp(24px, 3vw, 42px);
  border-left: 1px solid rgba(58,36,22,.22);
}

.location-story::before {
  content: "";
  position: absolute;
  left: -2px;
  top: clamp(28px, 3.6vw, 46px);
  width: 3px;
  height: 72px;
  background: var(--olive, #6e6d43);
}

.location-story__intro {
  max-width: 520px;
  margin-bottom: clamp(26px, 3vw, 38px);
}

.location-story__kicker {
  font-family: var(--sans);
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--olive, #6e6d43);
}

.location-story__intro h3 {
  margin: 0 0 14px;
  max-width: 440px;
  font-family: var(--serif);
  font-size: clamp(28px, 3.1vw, 43px);
  line-height: 1.08;
  font-weight: 500;
  color: var(--ink, #3a2416);
}

.location-story__intro p {
  font-family: var(--sans);
  margin: 0;
  max-width: 470px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(58,36,22,.78);
}

.location-story__benefits {
  display: grid;
  gap: 0;
  max-width: 520px;
}

.location-benefit {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgba(58,36,22,.16);
}

.location-benefit:last-child {
  border-bottom: 1px solid rgba(58,36,22,.16);
}

.location-benefit__no {
  font-family: var(--sans);
  padding-top: 3px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--olive, #6e6d43);
}

.location-benefit h4 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ink, #3a2416);
}

.location-benefit p {
  font-family: var(--sans);
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(58,36,22,.72);
}

@media (max-width: 880px) {
  .location-brochure-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .location-story {
    padding: 28px 0 0 24px;
  }
}

@media (max-width: 560px) {
  .location-story {
    padding-left: 18px;
  }
  .location-benefit {
    grid-template-columns: 30px 1fr;
    gap: 12px;
  }
}


/* ==========================================================================
   28 Sep 2026 - client feedback pass
   One block, appended last, and scoped with .hero:not(.hero--lp) wherever it
   touches the hero, so lp.php (which shares this file) is unaffected.
   ========================================================================== */

/* ---- Hero, desktop: mirror the photograph, keep all text to its left ------ */
@media (min-width: 981px) {
  /* The people sat bottom-left, directly under the headline, price block and
     buttons. Mirroring puts them on the right, in clear view. */
  .hero:not(.hero--lp) .hero__slide img {
    transform: scaleX(-1);
  }
  .hero:not(.hero--lp) .hero__scrim {
    background:
      linear-gradient(to right, rgba(24, 16, 9, 0.62) 0%, rgba(24, 16, 9, 0.34) 36%, rgba(24, 16, 9, 0) 60%),
      linear-gradient(to bottom, rgba(24, 16, 9, 0.4) 0%, rgba(24, 16, 9, 0.06) 26%, rgba(24, 16, 9, 0.12) 55%, rgba(24, 16, 9, 0.6) 100%);
  }
  /* Headline, price block and buttons stay in a left column; the buttons used
     to run the full width and covered the right-hand side of the picture. */
  .hero:not(.hero--lp) .hero__body > * {
    max-width: 640px;
  }
  /* Same reason for the headline: at full size its right end ran across the
     child's neck. Sized so both lines end before him at every desktop width. */
  .hero:not(.hero--lp) .lockup__anchor {
    font-size: min(40px, 3.3vw);
  }
  .hero:not(.hero--lp) .lockup__line {
    font-size: min(21px, 1.75vw);
  }
}

/* ---- Hero, tablet and phone: picture on top, text on its own panel -------- */
@media (max-width: 980px) {
  .hero:not(.hero--lp) {
    display: block;
    min-height: 0;
    padding: 0;
    overflow: visible;
    background: var(--ink);
  }
  .hero:not(.hero--lp) .hero__media {
    position: relative;
    inset: auto;
    z-index: 0;
    height: clamp(260px, 62vw, 520px);
  }
  /* people are at the left of the original photograph; do not mirror here */
  .hero:not(.hero--lp) .hero__slide img {
    transform: none;
    object-position: left center;
  }
  .hero:not(.hero--lp) .hero__scrim,
  .hero:not(.hero--lp) .hero__top {
    display: none;
  }
  .hero:not(.hero--lp) .hero__rera {
    position: absolute;
    top: 12px;
    left: var(--gutter);
    margin: 0;
    z-index: 2;
  }
  .hero:not(.hero--lp) .hero__body {
    padding-block: 26px 34px;
  }
}

/* ---- Banner claim ---------------------------------------------------------- */
/* The claim is exactly two lines: "Besa's Largest" over "3BHK Flats". Each line
   is a block that never wraps, so "3BHK Flats" cannot be split across lines. */
.claim-line {
  display: block;
  white-space: nowrap;
}
.hero:not(.hero--lp) .hero__ctas .btn:not(.btn--on-image) {
  font-size: 16px;
}

/* ---- Phone number: larger everywhere it appears --------------------------- */
.hero:not(.hero--lp) .hero__ctas .btn {
  min-height: 64px;
}
.hero:not(.hero--lp) .hero__ctas .btn--on-image {
  font-size: clamp(18px, 1.9vw, 23px);
  font-weight: 800;
  letter-spacing: 0.05em;
}
@media (max-width: 640px) {
  .hero:not(.hero--lp) .hero__ctas .btn {
    flex-basis: 100%;
  }
}
.contact-rail a[href^="tel:"] .val {
  font-size: 28px;
  font-weight: 700;
}
.site-footer a[href^="tel:"] {
  font-size: 20px;
  font-weight: 700;
}

/* ---- Story cards: the whole photograph, text underneath ------------------- */
/* Portrait cards cropped each landscape photo to about 58% of its width and
   laid the text over the lower part, which is where the people are. The photo
   is now shown in full at 16:10 and the text sits on its own panel below. */
.story-card {
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  background: var(--ink);
}
.story-card::before {
  display: none;
}
.story-card > picture {
  position: static;
  z-index: auto;
  display: block;
}
.story-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center center;
}
.story-card:hover img {
  transform: none;
}
/* the few cards whose photo is a different shape from 16:10 */
.story-card[data-slug="guests"] img {
  object-position: 10% center;
}
.story-card[data-slug="passion"] img {
  object-position: left center;
}
.story-card[data-slug="work"] img {
  object-position: center 68%;
}
.story-card__body {
  padding: 20px 22px 24px;
}

/* ---- Enquiry pop-up -------------------------------------------------------- */
.form-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: var(--ink);
}
.form-modal[hidden] {
  display: none;
}
.form-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 14, 8, 0.74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fm-fade 0.22s ease-out;
}
.form-modal__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(22px, 3vw, 34px);
  background: var(--paper-lift);
  border-radius: 2px;
  box-shadow: 0 30px 80px rgba(10, 6, 3, 0.5);
  animation: fm-rise 0.28s var(--ease);
}
.form-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  font-size: 30px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}
.form-modal__close:hover,
.form-modal__close:focus-visible {
  color: var(--ink);
}
.form-modal__head {
  margin: 0 0 18px;
  padding-right: 34px;
}
.form-modal__head h2 {
  margin: 10px 0 8px;
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.15;
  color: var(--ink);
}
.form-modal__head p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.form-modal .brochure-badge {
  margin: 0;
  background: var(--brown);
  border-color: var(--brown);
  color: #fff;
}
/* the form card carries its own padding, shadow and scalloped edge for the
   page; inside the pop-up the panel provides all three */
.form-modal .form-card {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.form-modal .scallop::after {
  content: none;
}
body.modal-open {
  overflow: hidden;
}
@keyframes fm-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fm-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}


/* ==========================================================================
   Location map: click to view (client feedback, 28 Sep 2026)
   ========================================================================== */
.map-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}
.map-open:focus-visible {
  outline: 3px solid var(--brown);
  outline-offset: 3px;
}
.map-open picture,
.map-open img {
  display: block;
  width: 100%;
  height: auto;
}
.map-open__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 16px;
  background: var(--brown);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: background-color 0.2s var(--ease);
}
.map-open:hover .map-open__hint,
.map-open:focus-visible .map-open__hint {
  background: var(--brown-deep);
}

/* Lightbox, map mode. The default lightbox fits an image inside 76% of the
   screen height, which would make this tall map SMALLER than it is on the page.
   Here it is shown large inside a scrollable window instead: about 1200px wide
   on a desktop, and never narrower than 900px, so on a phone it can be panned
   and its small labels stay readable. Floor plans are unaffected. */
.lightbox--map .lightbox__inner {
  max-width: min(1200px, 100%);
  max-height: calc(100svh - clamp(32px, 8vw, 96px));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--paper-lift);
  border-radius: 2px;
  text-align: left;
}
.lightbox--map .lightbox__img {
  display: block;
  width: max(100%, 900px);
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
}
.lightbox--map .lightbox__caption {
  position: sticky;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 12px 18px;
  background: rgba(20, 13, 7, 0.94);
  font-size: 15px;
}

/* The default close button is a pale outline that disappears against the light
   peach of the map, so in map mode it gets a solid dark face. */
.lightbox--map .lightbox__close {
  background: var(--brown);
  border: 2px solid #fff;
  color: #fff;
  box-shadow: 0 4px 14px rgba(10, 6, 3, 0.45);
}

/* ==========================================================================
   29 Sep 2026 - client feedback: banner hierarchy + image labels
   ========================================================================== */

/* ---- Banner: claim is the highlight, price is lower and smaller ------------ */
.hero:not(.hero--lp) .hero__facts {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0;
}
.hero__claim {
  --scallop-color: var(--accent);
  margin: 0 0 24px; /* leaves room for the scalloped edge below the block */
  padding: clamp(12px, 3vw, 18px) clamp(18px, 4.6vw, 28px);
  background: var(--accent);
  color: #fff;
  font-size: clamp(21px, 6.4vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hero__price {
  margin: 0 0 16px;
  padding: 8px 18px 8px 14px;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  background: rgba(24, 16, 9, 0.6);
  border-left: 4px solid #fff;
  color: #fff;
}
.hero__price-big {
  font-size: clamp(19px, 5vw, 26px);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.hero__price-small {
  font-size: clamp(12px, 3.2vw, 15px);
  font-weight: 600;
}
@media (min-width: 981px) {
  /* Twice the size it had inside the old block (21px). Sized in vw so that it
     stops short of the child on the second slide, who sits at about 46% of the
     width: checked from 981px to 1920px. */
  .hero__claim {
    font-size: min(42px, 3vw);
  }
  .hero__price-big {
    font-size: min(28px, 2vw);
  }
}

/* ---- Image labels ---------------------------------------------------------- */
/* Every rendered or stock image carries "Artistic Impression*"; the real
   photographs (Central Park, the lake) carry "Actual Image*". */
picture[data-tag] {
  position: relative;
  display: block;
}
picture[data-tag] img {
  display: block;
}
picture[data-tag]::after {
  content: attr(data-tag);
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 3px 9px;
  background: rgba(20, 13, 7, 0.68);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.04em;
  border-radius: 2px;
  pointer-events: none;
}
/* Banner: on the section itself on desktop, because the photograph sits under a
   dark gradient that would dim the label; on the picture on tablet and phone,
   where the photograph is its own block above the text. */
@media (min-width: 981px) {
  .hero[data-tag]::after {
    content: attr(data-tag);
    position: absolute;
    right: 18px;
    bottom: 16px;
    z-index: 3;
    padding: 3px 9px;
    background: rgba(20, 13, 7, 0.68);
    color: #fff;
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.04em;
    border-radius: 2px;
    pointer-events: none;
  }
}
@media (max-width: 980px) {
  .hero:not(.hero--lp) .hero__media[data-tag]::after {
    content: attr(data-tag);
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    padding: 3px 9px;
    background: rgba(20, 13, 7, 0.68);
    color: #fff;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.04em;
    border-radius: 2px;
    pointer-events: none;
  }
}