/* ==========================================================================
   AEROVISTA - PAGE SECTIONS
   Composition only. Reusable pieces live in components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO  - HOME-PAGE-DEMO.html, the split

   The old hero was an overlay: one photograph bled across the viewport with
   the copy laid on top of it behind a scrim. The demo does the opposite and
   splits the first screen in two - a paper column carrying the headline, the
   lede and the price, and a photographic column beside it that is never
   written over. Nothing has to be darkened to stay readable, the serif
   headline sits on the ground it was drawn for, and the photograph is shown
   whole rather than as a texture behind text.

   The demo's proportions exactly: .78fr of copy to 1.22fr of image, floored at
   360px and 480px so neither column can collapse, and a first screen capped at
   840px so it never becomes a tall empty band on a large monitor.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--c-warm-white);
  color: var(--c-ink);
  /* The header is three floating islands with nothing behind them, so the hero
     has to reach the top of the viewport for the page to show through the gaps
     between them. main still reserves --nav-h for every other page; the hero
     gives that reservation back and takes the clearance internally instead, on
     .hero__copy, so every piece of hero content stays exactly where it was. */
  margin-top: calc(var(--nav-h) * -1);
}

/* Below the split breakpoint the two halves stack, and the photograph goes
   first. A block of type followed by a picture reads as a document; the
   building first, then the pitch, reads as a project — and it is the
   photograph that makes someone keep scrolling, not the headline.

   The conversion is not lost by pushing the CTA down: the sticky bar carries
   Call, WhatsApp, Directions and Site visit at every scroll position on
   exactly these widths. */
@media (max-width: 999px) {
  .hero__figure { order: -1; }

  /* Mobile visitors first need to recognise the building, then make one clear
     next decision. The photograph remains prominent but no longer consumes a
     whole first screen; the copy rises as a comfortable reading surface. */
  .hero__figure {
    min-height: clamp(270px, 42svh, 390px);
    max-height: none;
  }
  .hero__copy {
    position: relative;
    z-index: var(--z-overlay);
    margin-top: -24px;
    padding-top: clamp(28px, 7vw, 40px);
    border-radius: 24px 24px 0 0;
    background: var(--c-warm-white);
    box-shadow: 0 -1px 0 rgba(11, 6, 36, .06);
  }
  .hero__display {
    font-size: clamp(2.55rem, 11.5vw, 4.1rem);
    line-height: .9;
    max-width: 10ch;
  }
  .hero__kw { margin-top: var(--s-sm); max-width: 32ch; }
  .hero__price-row { align-items: flex-start; }
  .hero__cta { width: 100%; }
  /* Basis `auto` rather than a 148px floor: a 148px basis let a long label be
     squeezed into a narrow column and wrap onto two lines while there was room
     on the row for it. With `auto` the pair sits side by side when both fit
     and wraps to its own line when it does not. Height comes from the button
     token — this used to hard-code 52px, which made the hero CTA the one
     button on the site that was a different size from the rest. */
  .hero__cta > * {
    flex: 1 1 auto;
    min-height: var(--btn-h-sm);
  }

  /* The mobile page opening follows the menu's calm navy ground. Image heroes
     retain their photograph; plain heroes gain the same clear, intentional
     entry point rather than opening as an unremarkable white strip. */
  .page-hero { min-height: calc(36svh + var(--nav-h)); }
  .page-hero__inner {
    padding-top: calc(var(--nav-h) + clamp(2rem, 7vw, 3rem));
    padding-bottom: clamp(2rem, 8vw, 3.5rem);
  }
  .page-hero--plain {
    background: linear-gradient(145deg, #151d49 0%, var(--c-ink) 58%, #09071d 100%);
    border-bottom: 0;
    color: var(--c-warm-white);
  }
  .page-hero--plain .page-hero__inner {
    padding-block: calc(var(--nav-h) + clamp(2rem, 7vw, 3rem)) clamp(2rem, 8vw, 3.5rem);
  }
  .page-hero--plain .page-hero__crumb,
  .page-hero--plain .t-muted { color: var(--c-stone-on-dark); }
}
@media (min-width: 1000px) {
  .hero {
    grid-template-columns: minmax(360px, .78fr) minmax(480px, 1.22fr);
    /* The nav is a fixed band above this, not an overlay on it, so the hero
       asks for what is left of the viewport rather than all of it. */
    /* Measured from the top of the viewport now rather than from below a bar,
       so the nav zone is added back to keep the foot of the hero where it was. */
    min-height: min(calc(840px + var(--nav-h)), 100svh);
  }
}

/* Copy column. Headline at the top, price and CTA pinned to the foot, and the
   space between them doing the composition - which is why it is a flex column
   with space-between rather than a stack of margins. */
.hero__copy {
  /* One value, so the height media queries below can retune the hero's
     breathing room without having to restate the header clearance. */
  --hero-pad: clamp(2.75rem, 1.30rem + 6.0vw, 7.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sec-sm);
  /* Header clearance lives here rather than on main, because the hero itself
     is pulled up under the header. The sum is identical to the old
     nav-height-plus-padding, so the headline has not moved. */
  padding-top: calc(var(--nav-top) + var(--nav-logo-h) + var(--hero-pad));
  padding-bottom: var(--hero-pad);
  padding-inline: var(--gutter);
}
/* Below the split breakpoint the photograph is the first thing in the stack
   and it is what sits under the header, so the copy needs no clearance. */
@media (max-width: 999px) {
  .hero__copy { padding-top: var(--hero-pad); }
}
@media (min-width: 1000px) {
  .hero__copy { padding-inline: var(--gutter) clamp(1.75rem, 0.4rem + 4vw, 6rem); }
}

.hero__h1 { margin: 0; }
/* The demo's headline: serif, 8ch, and set tighter than anything else on the
   site - 0.84 leading with -0.065em tracking is what makes three short lines
   read as one mass rather than as three lines. */
.hero__display {
  display: block;
  margin-top: var(--s-md);
  font-family: var(--font-display);
  /* Sized by both axes. --t-display-l is a width-based clamp, which is only
     half the problem: a 1366x768 laptop is wide and short, so the width rule
     asked for 116px of type on a 584px viewport and three lines of it pushed
     the price and the primary CTA a full screen below the fold. The svh cap is
     the height half — the headline can never take more than 13% of the
     viewport per line, whatever the width says. Continuous, so there is no
     breakpoint for a screen to fall between. */
  font-size: min(var(--t-display-l), 13svh);
  font-weight: var(--w-display);
  line-height: .86;
  letter-spacing: -.06em;
  max-width: 9ch;
  text-wrap: initial;
}
/* The keyword line stays a sentence in the sans: it is the phrase the page
   ranks for and it is read, not looked at. */
.hero__kw {
  display: block;
  margin-top: var(--s-md);
  font-size: var(--t-body-l);
  font-weight: var(--w-normal);
  line-height: 1.5;
  letter-spacing: -.015em;
  color: var(--c-ink);
  max-width: 29ch;
}

/* Address block. Tracked uppercase, the demo's one use of grey in the hero. */
.hero__location {
  color: var(--c-stone-text);
  font-size: var(--t-ui);
  line-height: 1.7;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
}

/* Price and CTA share a row above a hairline - the demo's closing gesture on
   the copy column, and the only rule in the hero. */
.hero__price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-sm) var(--s-md);
  margin-top: var(--s-md);
  padding-top: var(--s-sm);
  border-top: var(--border-width) solid var(--hairline);
}
.hero__price {
  font-family: var(--font-display);
  font-size: var(--t-stat);
  font-weight: var(--w-display);
  line-height: 1;
  letter-spacing: var(--ls-heading);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* "onwards" is a qualifier on the figure, not part of it. Sans, small, grey. */
.hero__price small {
  font-family: var(--font);
  font-size: var(--t-ui);
  font-weight: var(--w-normal);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-stone-text);
}

/* Proof line. On the split hero this sits on paper, so it takes ink rather
   than the warm white it needed when it was laid over a photograph. */
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  /* A generous column gap is the separator. Anything drawn between items - a
     "." or a border-left - belongs to one of them, so it strands at the start
     of a wrapped row; at 375px this list always wraps. */
  gap: 4px var(--s-md);
  margin-top: var(--s-sm);
  font-size: var(--t-ui);
  line-height: 1.5;
  color: var(--c-stone-text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  max-width: 46ch;
}
.hero__proof-item { white-space: nowrap; }
.hero__proof-fig  { font-weight: var(--w-medium); color: var(--c-ink); }

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-sm); align-items: center; }
.hero__explore { margin-top: var(--s-sm); }
.hero__note { margin-top: var(--s-md); }

/* Image column. It is a figure, not a background: the photograph is the point
   of the right-hand half and nothing is written across it except the caption
   the demo puts in its bottom corners. */
.hero__figure {
  position: relative;
  margin: 0;
  /* A band, not a screen. At 58svh the photograph filled the phone on its own
     and the headline underneath it was a scroll away from a visitor who had
     not yet been told what they were looking at. */
  min-height: 42svh;
  max-height: 60vh;
  overflow: hidden;
  background: var(--c-ink-soft);
}
@media (min-width: 1000px) {
  .hero__figure { max-height: none; }
}
@media (min-width: 1000px) {
  .hero__figure { min-height: 0; }
}
/* The direct-child <picture> only. This used to be `.hero__figure img`, which
   also caught the project mark added below and stretched it to the full frame. */
.hero__figure > picture,
.hero__figure > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__figure > picture img {
  object-fit: cover;
  /* The demo pans the tower slightly right of centre so the building sits in
     the outer half of the frame rather than behind the copy column. */
  object-position: 62% center;
}
/* The demo also scales this image on hover. It does not get that here: the
   hero photograph already carries data-anim="hero", whose entry animation owns
   the img's transform, and two rules animating the same property on the same
   element is how a hover ends up cancelling a reveal mid-flight. The card
   images keep their hover scale — nothing else is competing for it there. */

/* Caption, in the two bottom corners, over the photograph. It sits on a foot
   scrim rather than on bare image - the demo gets away with white-on-photo
   because its render happens to be dark at the bottom; a caption that has to
   be legible over whatever photograph the fact sheet names does not. */
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--scrim-image);
  pointer-events: none;
}
.hero__figure-meta {
  position: absolute;
  z-index: var(--z-overlay);
  right: var(--s-sm); bottom: var(--s-sm); left: var(--s-sm);
  display: flex;
  justify-content: space-between;
  gap: var(--s-sm);
  color: var(--c-white);
  font-size: var(--t-ui);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
}
/* The image leads the stack below 1000px, so the sticky bar is at the other
   end of the hero and the caption needs no clearance from it. */

/* Below 360px a side-by-side pair leaves each button too narrow to aim at, so
   they stack full-width instead of shrinking. Report, Responsive content. */
@media (max-width: 359px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta > * { width: 100%; justify-content: center; }
  .hero__price-row { display: block; }
  .hero__price-row .hero__cta { margin-top: var(--s-sm); }
}

/* --- Viewport height -----------------------------------------------------
   Width is only half of a phone. A 375x667 iPhone SE, a landscape phone and a
   1366x640 laptop all have plenty of width and very little height. The split
   hero is far less exposed to this than the overlay one was - the copy column
   is sized by its own content and only the image column is measured in
   viewport units - so what is left is trimming the photograph and tightening
   the type, not rebuilding the layout.                                       */

/* Laptops. 1366x768 and 1440x900 are the two commonest desktop screens in
   this market and both leave under 700px of viewport once browser chrome is
   taken out. The hero stops spending its height on padding and on the one
   element the nav already duplicates. */
@media (max-height: 820px) {
  .hero__copy    { --hero-pad: var(--s-md); gap: var(--s-md); }
  .hero__display { margin-top: var(--s-sm); }
  .hero__kw      { margin-top: var(--s-sm); font-size: var(--t-body); }
  .hero__figure  { min-height: 46svh; }
}
@media (max-height: 700px) {
  .hero__figure  { min-height: 40svh; }
  .hero__explore { display: none; }   /* the nav and the scroll both reach it */
  .hero__location { display: none; }  /* the footer NAP and the map both carry it */
}
@media (max-height: 560px) {
  .hero__figure  { min-height: 34svh; }
  .hero__display { font-size: min(var(--t-h1), 13svh); }
}
@media (max-height: 480px) {
  /* The narrow measures exist to force a portrait phone's headline onto three
     balanced lines. In landscape the width is the surplus and the height is
     the constraint, so the caps come off and each block takes fewer lines. */
  .hero__display  { font-size: min(var(--t-h2), 15svh); max-width: none; }
  .hero__kw       { margin-top: var(--s-xs); font-size: var(--t-body); max-width: none; }
  .hero__proof    { margin-top: var(--s-xs); gap: 2px var(--s-sm); max-width: none; }
  .hero__explore  { display: none; }   /* the nav and the scroll both reach it */
  .hero__copy     { --hero-pad: var(--s-sm); gap: var(--s-md); }
  .hero__figure   { min-height: 34svh; }
}
@media (max-height: 400px) {
  .hero__display { font-size: min(var(--t-h3), 16svh); }
  .hero .t-eyebrow { display: none; }  /* the wordmark already says it */
}

/* Keep the mobile image proportion intentional on short phones too. The
   height-only rules above also serve desktop laptops, so this later mobile
   rule prevents those desktop reductions from overriding the phone layout. */
@media (max-width: 999px) {
  .hero__figure { min-height: clamp(240px, 42svh, 390px); }
}

/* The page hero below still uses .hero__media, the absolutely-positioned
   full-bleed image the old home hero was built on. It is kept for that one
   caller rather than deleted. */
.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-image);
}
.hero__media img { object-fit: cover; }

/* --------------------------------------------------------------------------
   PAGE HERO - inner pages
   Shorter than the home hero so the content below is reachable on a phone
   without a full swipe.
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Same as the home hero: pulled up under the floating header so the glass
     islands have the page's own photograph behind them rather than a strip of
     empty ground above it. The clearance moves inside, to __inner. */
  margin-top: calc(var(--nav-h) * -1);
  min-height: calc(46svh + var(--nav-h));
  overflow: hidden;
}
/* The dark ground belongs to the image variant, where it is the colour behind
   a photograph that has not decoded yet. It used to sit on .page-hero itself,
   which also caught the plain variant — and because sections.css loads after
   base.css, that single-class background beat .mode-light's transparent one.
   The plain hero was therefore drawing ink-coloured text on an ink-coloured
   band: the H1 and breadcrumb on every route without a hero image were
   invisible. The markup asks for mode-light; this lets it have it. */
.page-hero--image { background: var(--c-ink); }
/* Over photography the eyebrow and the H1 are read against a sunset sky, not
   against paper. Orange disappears into it, so on the image variant every
   piece of copy takes warm white and the scrim underneath does the rest.
   Report 2.3: the accent is for fills and large decoration, never small vital
   text on an image. */
.page-hero--image .t-eyebrow { color: var(--c-warm-white); }
.page-hero__inner {
  position: relative;
  z-index: var(--z-overlay);
  width: 100%;
  padding-block: calc(var(--nav-h) + var(--sec-sm)) var(--sec-sm);
}
/* Without artwork it is a plain light band, not a stretched placeholder. */
.page-hero:not(.media-scrim) { min-height: 0; }

/* --------------------------------------------------------------------------
   PANEL - a bordered block for a single statement or call to action
   -------------------------------------------------------------------------- */

.panel {
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--s-md);
  max-width: 60ch;
}
.mode-dark .panel { border-color: var(--hairline-dark); }

/* --------------------------------------------------------------------------
   AMENITY + GALLERY GRIDS
   -------------------------------------------------------------------------- */

.amen-grid {
  display: grid;
  gap: var(--sec-sm) var(--col-gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .amen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .amen-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gallery-grid {
  display: grid;
  gap: var(--col-gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Most site photographs are portrait 1200x1600. Cropping them to 4:3 throws
   away the top and bottom of a room, so they keep their own ratio. */
.gallery-grid .card.is-portrait .card__media { aspect-ratio: 3 / 4; }

/* --------------------------------------------------------------------------
   PROSE - legal documents only
   -------------------------------------------------------------------------- */

.prose h2 { margin-top: var(--s-lg); }
.prose h2:first-child { margin-top: 0; }
.prose p {
  margin-top: var(--s-sm);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-stone-text);
}
.prose ul {
  margin-top: var(--s-sm);
  padding-left: 1.25rem;
  list-style: disc;
}
.prose li {
  margin-top: 0.35rem;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-stone-text);
}
.prose strong { color: var(--c-ink); font-weight: var(--w-medium); }

/* --------------------------------------------------------------------------
   STATEMENT
   -------------------------------------------------------------------------- */

.statement__head { max-width: 16ch; }
.statement__body { margin-top: var(--s-md); }

@media (min-width: 1200px) {
  .statement__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--col-gap);
    align-items: end;
  }
  .statement__body { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   SECTION HEADER - repeated pattern: index, heading, one line of support
   -------------------------------------------------------------------------- */

/* HOME-PAGE-DEMO.html sets a section head as two blocks on one baseline: the
   numbered accent eyebrow and the serif heading on the left, one line of
   support on the right, and a generous gap between them. Every page template
   already emits exactly these three elements in this order, so the whole site
   picks the demo's head up from this one rule.

   It stacks below 1000px, because two columns of 34px type at phone width is
   two columns of one word each. */
.sec-head {
  display: grid;
  gap: var(--s-xs);
  /* A heading belongs to what follows it. --sec-sm is the gap between two
     unrelated blocks; this is the gap inside one. */
  margin-bottom: var(--s-lg);
}
.sec-head h2 { max-width: 13ch; margin-top: var(--s-xs); }
.sec-head__sub { margin-top: var(--s-sm); max-width: 38ch; }

@media (min-width: 1000px) {
  .sec-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: end;
    gap: var(--s-md) var(--sec-sm);
  }
  /* The index and the heading are the left column; the support line is the
     right one, bottom-aligned to the heading's last baseline. */
  .sec-head__idx { grid-column: 1; grid-row: 1; }
  .sec-head h2   { grid-column: 1; grid-row: 2; }
  .sec-head__sub { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: end; }
  /* A head with no support line must not leave the heading in a half-width
     column with nothing beside it. */
  .sec-head:not(:has(.sec-head__sub)) { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   RESIDENCES
   -------------------------------------------------------------------------- */

.residences { display: grid; gap: var(--col-gap); }
@media (min-width: 768px) {
  .residences { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.res-card__area {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs) var(--s-sm);
  margin-top: var(--s-xs);
}

/* --------------------------------------------------------------------------
   AMENITIES
   -------------------------------------------------------------------------- */

.amenity__list { margin-top: var(--s-sm); display: grid; gap: 6px; }
.amenity__item {
  padding-left: var(--s-sm);
  position: relative;
  font-size: var(--t-body);
  color: var(--c-stone-text);
}
.mode-dark .amenity__item { color: var(--c-stone-on-dark); }
.amenity__item::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 7px; height: 1px;
  background: var(--c-accent);
}

/* --------------------------------------------------------------------------
   PROOF - the real site photographs
   Most are portrait 1200x1600, so this section is laid out for portrait
   rather than cropping them into the 4:3 card used elsewhere.
   -------------------------------------------------------------------------- */

.proof .card__media { aspect-ratio: 3 / 4; }

.proof__note {
  margin-top: var(--sec-sm);
  padding-top: var(--s-sm);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   LOCATION
   -------------------------------------------------------------------------- */

/* The single-column track must be explicitly minmax(0,1fr). An implicit `auto`
   track sizes to max-content, which inherits the map's 620px minimum and pushes
   the whole page wider than the phone screen instead of letting the map scroll
   inside its own box. */
.location__grid { display: grid; gap: var(--sec-sm); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) {
  .location__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-lg); align-items: start; }
}

.locmap-wrap {
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-sm);
  overflow-x: auto;          /* the map keeps its own scroll on narrow screens */
  overscroll-behavior-x: contain;
}
.mode-dark .locmap-wrap { border-color: var(--hairline-dark); }
.locmap-wrap svg { min-width: 620px; width: 100%; height: auto; }

/* Below the tablet breakpoint the map fits the screen instead of asking for a
   sideways swipe. The 620px floor existed because the SVG's labels are sized
   in its own 1200x700 user units — scaled to a 335px column they would render
   at 3-4px. So the floor is dropped and the label type is scaled up in user
   units to compensate, which keeps it readable at the size the map actually
   renders. The map is orientation; the exact distances are in the list beside
   it, so a schematic that fits beats a precise one that is half off-screen. */
@media (max-width: 899px) {
  .locmap-wrap { padding: 0; overflow-x: visible; }
  .locmap-wrap svg { min-width: 0; }
  /* Twenty-eight labels drawn for a 1200px canvas do not survive being scaled
     into a 333px one — bumping them all just turns unreadable into collided.
     So the map sheds a tier instead: the per-pin distances and the rotated
     road names come off, because the list directly beneath the map already
     gives every landmark and its distance in plain text. What is left is the
     project pin and the places it is being measured against, at a size that
     can actually be read. Both tiers return in full from 900px up. */
  .locmap .pl-dist,
  .locmap .rd-label { display: none; }
  .locmap .pl     { font-size: 30px; }
  .locmap .here-t { font-size: 34px; }
}

/* The action and the swipe cue that sit under the map. Navigation never
   depends on scrolling the SVG sideways — the button does that job. */
.locmap-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
  margin-top: var(--s-sm);
}
/* Its own line, always. Sharing the row with the button leaves it clipped at
   375px, and a cue that cannot be read explains nothing. */
.locmap-cue { margin: 0; flex: 1 0 100%; }
/* The map no longer overflows at any width — it scales to fit below 900px and
   has room above it — so the swipe cue has nothing left to explain. */
.locmap-cue { display: none; }

.dist { border-top: var(--border-width) solid var(--hairline); }
.mode-dark .dist { border-top-color: var(--hairline-dark); }

.dist__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-sm);
  padding-block: 14px;
  border-bottom: var(--border-width) solid var(--hairline);
}
.mode-dark .dist__row { border-bottom-color: var(--hairline-dark); }

.dist__km { flex: none; font-variant-numeric: tabular-nums; }
/* A landmark with no verified distance says so rather than showing a guess. */
.dist__km--none { opacity: .55; }
.price-list__note { max-width: 58rem; line-height: 1.55; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   ENQUIRE
   -------------------------------------------------------------------------- */

.enquire__grid { display: grid; gap: var(--sec-sm); }
@media (min-width: 1200px) {
  .enquire__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-lg); align-items: start; }
}
.enquire__form { display: grid; gap: var(--s-sm); }
@media (min-width: 768px) {
  .enquire__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-sm); }
}

/* --------------------------------------------------------------------------
   DESIGN & ARCHITECTURE

   An elevation on one side and the five decisions on the other, each on its
   own hairline. The list is an <ol> because it is presented as five numbered
   decisions and the numbers are drawn from the counter rather than typed, so
   adding or removing one can never leave the sequence wrong.
   -------------------------------------------------------------------------- */

.arch { display: grid; gap: var(--sec-sm); }
@media (min-width: 1000px) {
  .arch {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    gap: var(--sec-sm) var(--s-xl);
    align-items: start;
  }
  /* The elevation is tall and the list is long; sticking it means the
     photograph is still there when you reach the fifth decision. */
  .arch__figure { position: sticky; top: calc(var(--nav-h) + var(--s-md)); }
}

.arch__figure { margin: 0; }
.arch__cap { margin-top: var(--s-sm); }

.arch__list { counter-reset: arch; display: grid; }

.arch__item {
  counter-increment: arch;
  padding-block: var(--s-md);
  border-top: var(--border-width) solid var(--hairline);
}
.arch__item:last-child { border-bottom: var(--border-width) solid var(--hairline); }

/* The number is set in the display face and hung in the margin, so the heading
   keeps a flush left edge and the sequence still reads down the column. */
.arch__head {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s-xs);
  margin-bottom: var(--s-xs);
}
.arch__head::before {
  content: counter(arch, decimal-leading-zero);
  font-family: var(--font);
  font-size: var(--t-ui);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-meta);
  color: var(--c-accent-text);
}
.arch__item > p { padding-left: calc(2.75rem + var(--s-xs)); }

@media (max-width: 479px) {
  /* At phone width 2.75rem of hanging indent is 12% of the measure. The number
     goes above the heading instead of beside it. */
  .arch__head { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .arch__item > p { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   EMI CALCULATOR

   Two columns: the things you change on the left, the answer on the right,
   with the answer set in the display face at stat size so it is the largest
   thing in the section. It stacks below 1000px with the answer underneath,
   which is the right order on a phone - you move a slider, then look down.
   -------------------------------------------------------------------------- */

.emi { display: grid; gap: var(--sec-sm); }
@media (min-width: 1000px) {
  .emi {
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    gap: var(--s-lg);
    align-items: start;
  }
}

.emi__controls { display: grid; gap: var(--s-md); align-content: start; }
.emi__field { display: grid; gap: var(--s-xs); }

/* The live value, in the label. Tabular so it does not shift the label text
   sideways as the digits change under a moving thumb. */
.emi__now {
  float: right;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-transform: none;
  letter-spacing: 0;
}

/* --- Range control -------------------------------------------------------
   Styled from scratch, because the platform control is a rounded pill in
   every browser and this theme has no rounded anything. The filled portion is
   painted with a gradient stop at --fill, which ui.js keeps in step with the
   value - there is no other way to colour the left half of a track.          */

.emi__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--tap-min);       /* the control is the target, not the track */
  margin: 0;
  background: none;
  cursor: pointer;
}
.emi__range:focus { outline: none; }
.emi__range:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }

.emi__range::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(to right,
              var(--c-accent) 0 var(--fill, 20%),
              var(--hairline) var(--fill, 20%) 100%);
}
.emi__range::-moz-range-track {
  height: 4px;
  background: linear-gradient(to right,
              var(--c-accent) 0 var(--fill, 20%),
              var(--hairline) var(--fill, 20%) 100%);
}

/* A square thumb, like every other corner on the site. */
.emi__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  margin-top: -7px;             /* centres an 18px thumb on a 4px track */
  background: var(--c-ink);
  border: 0;
  transition: transform var(--m-fast) var(--ease-out),
              background-color var(--m-fast) var(--ease-out);
}
.emi__range::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--c-ink);
  border: 0;
  border-radius: 0;
  transition: transform var(--m-fast) var(--ease-out),
              background-color var(--m-fast) var(--ease-out);
}
/* Grab and drag are the two states that matter on a slider: the thumb grows
   under the finger so it is not hidden by it, and turns accent while held. */
.emi__range:hover::-webkit-slider-thumb  { transform: scale(1.12); }
.emi__range:active::-webkit-slider-thumb { transform: scale(1.3); background: var(--c-accent); }
.emi__range:hover::-moz-range-thumb      { transform: scale(1.12); }
.emi__range:active::-moz-range-thumb     { transform: scale(1.3); background: var(--c-accent); }

@media (prefers-reduced-motion: reduce) {
  .emi__range::-webkit-slider-thumb,
  .emi__range::-moz-range-thumb { transition: none; }
  .emi__range:hover::-webkit-slider-thumb,
  .emi__range:active::-webkit-slider-thumb,
  .emi__range:hover::-moz-range-thumb,
  .emi__range:active::-moz-range-thumb { transform: none; }
}

/* --- The answer ---------------------------------------------------------- */

.emi__out {
  padding-top: var(--s-md);
  border-top: var(--border-width) solid var(--hairline);
}
@media (min-width: 1000px) {
  .emi__out {
    padding-top: 0;
    padding-left: var(--s-lg);
    border-top: 0;
    border-left: var(--border-width) solid var(--hairline);
  }
}

.emi__figure {
  margin-top: var(--s-xs);
  font-family: var(--font-display);
  font-size: var(--t-display-m);
  font-weight: var(--w-display);
  line-height: 1;
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.emi__rows { margin-top: var(--s-md); display: grid; }
.emi__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-sm);
  padding-block: 10px;
  border-bottom: var(--border-width) solid var(--hairline);
  font-size: var(--t-small);
}
.emi__row > span:first-child { color: var(--c-stone-text); }
.emi__row > span:last-child {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.emi__note { margin-top: var(--s-sm); }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

/* The demo has two dark grounds and the footer is the deeper of them: .mode-dark
   is the #10184B statement band, the footer is #0B0624 ink. Stated here rather
   than by giving the footer a second mode class. */
.footer { background: var(--c-ink); }

.footer__closing { max-width: 15ch; }

/* Column headings in the footer are the demo's accent label: orange, tracked,
   uppercase. On the ink ground the bright accent is legible (4.82:1) and the
   deeper text value is not, so this is one of the places the raw accent is
   correct for small text. */
/* Scoped through .mode-dark so it outranks the .mode-dark .t-meta rule these
   headings also match — the footer h2 carries .t-meta, and a single-class
   selector loses to it. */
.mode-dark .footer__col h2 { color: var(--c-accent-bright); }

.footer__grid {
  display: grid;
  gap: var(--sec-sm);
  margin-top: var(--sec-sm);
  padding-top: var(--sec-sm);
  border-top: var(--border-width) solid var(--hairline-dark);
}
@media (min-width: 768px)  { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.footer__col h2 { margin-bottom: var(--s-sm); }
.footer__list { display: grid; gap: 10px; }
.footer__list a,
.footer__list button { font-size: var(--t-body); color: var(--c-stone-on-dark); }
.footer__list a:hover,
.footer__list button:hover { color: var(--c-warm-white); }

/* On a phone the footer is where Call, WhatsApp and Directions are actually
   found, and a 20px line of text is not a control. The rows get a real target
   height below the desktop breakpoint; above it the list stays tight. */
@media (max-width: 1199px) {
  .footer__list { gap: 2px; }
  .footer__list a,
  .footer__list button {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

.footer__legal {
  margin-top: var(--sec-sm);
  padding-top: var(--s-sm);
  border-top: var(--border-width) solid var(--hairline-dark);
  display: grid;
  gap: var(--s-sm);
}
.footer__disclosure { max-width: 76ch; }

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
  margin-top: var(--s-md);
}

/* The sticky bar must not cover the end of the footer on mobile. --bar-h grew
   with the four-action bar, so this clearance follows it automatically — the
   legal links and the disclosure are exactly the content that must never end
   up underneath it. */
@media (max-width: 1199px) {
  .footer { padding-bottom: calc(var(--sec-sm) + var(--bar-h) + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   FLASH - server-side form errors, shown only when JS validation was bypassed
   -------------------------------------------------------------------------- */

.flash {
  padding-block: var(--s-sm);
  padding-top: var(--s-sm);
  background: var(--c-warm-white);
  border-bottom: var(--border-width) solid var(--c-error);
  color: var(--c-error);
}

/* --------------------------------------------------------------------------
   LIGHT-THEME COMPOSITION
   Added in the polish pass. Light is the default ground; dark is reserved for
   one statement and the footer.
   -------------------------------------------------------------------------- */

/* Inner pages that have no artwork open on warm white rather than a dark
   band — a dark strip with nothing in it reads as a mistake, not a choice. */
.page-hero--plain {
  min-height: 0;
  padding-top: var(--sec-sm);
  border-bottom: var(--border-width) solid var(--hairline);
}
.page-hero--plain .page-hero__inner {
  padding-block: calc(var(--nav-h) - var(--sec-sm)) var(--sec-sm);
}

.page-hero__crumb { color: var(--c-stone-text); }
.page-hero--image .page-hero__crumb,
.page-hero--image .t-muted,
.page-hero--image .t-caption { color: var(--c-warm-white); }
/* The breadcrumb link renders 15px tall. Padding gives it a tappable box
   without moving the text or opening a gap in the hero. */
.page-hero__crumb a {
  display: inline-block;
  padding-block: 14px;
  margin-block: -14px;
}

/* Developer credit strip. Sits between the light page and the dark footer and
   gives the Dukia mark a ground it can be read on. */
.devcredit {
  border-top: var(--border-width) solid var(--hairline);
  padding-block: var(--s-md);
}
.devcredit__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm) var(--s-md);
  flex-wrap: wrap;
  text-align: center;
}

/* Fact strip on a light ground: the outer box is dropped and only the internal
   dividers remain, so it reads as a row of figures rather than a table. */
.mode-light .facts,
.mode-alt   .facts {
  border-top: var(--border-width) solid var(--hairline);
  border-left: 0;
  border-bottom: var(--border-width) solid var(--hairline);
}
/* The demo's strip is a compact band, not a row of tall boxes: 22px of block
   padding under a serif figure. --s-lg here left two thirds of every cell
   empty, because the grid stretches all five to the height of whichever one
   wrapped. */
.mode-light .facts__item,
.mode-alt   .facts__item {
  border-bottom: 0;
  border-right: var(--border-width) solid var(--hairline);
  padding-block: var(--s-md);
}
/* No dangling divider at the end of each visual row. */
.mode-light .facts__item:last-child,
.mode-alt   .facts__item:last-child { border-right: 0; }
@media (max-width: 767px) {
  .mode-light .facts__item:nth-child(2n),
  .mode-alt   .facts__item:nth-child(2n) { border-right: 0; }
  .mode-light .facts__item,
  .mode-alt   .facts__item {
    border-bottom: var(--border-width) solid var(--hairline);
    padding-block: var(--s-md);
  }
}
/* --t-h2 is the section-heading size, and the demo's theme pushed that to 64px
   — far too large for a cell in a five-across strip. The fact figure has its
   own token, which is what the demo's 24px strip figure actually maps to. */
.mode-light .facts__value,
.mode-alt   .facts__value { font-size: var(--t-stat); }

/* Section index and card index are metadata-sized accent text: they take the
   deeper accent on light grounds and the brighter one on dark. */
.sec-head__idx,
.card__index { color: var(--c-accent-text); }
.mode-dark .sec-head__idx,
.mode-dark .card__index { color: var(--c-accent-bright); }

/* --------------------------------------------------------------------------
   PROOF - editorial sequence
   One large frame, two supporting, then a detail row. Stacks on mobile in the
   same reading order.
   -------------------------------------------------------------------------- */

.proof__lead { display: grid; gap: var(--col-gap); }
@media (min-width: 1000px) {
  .proof__lead { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
}

.proof__side { display: grid; gap: var(--col-gap); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (min-width: 1000px) { .proof__side { grid-template-columns: minmax(0, 1fr); } }

.proof__detail {
  display: grid;
  gap: var(--col-gap);
  margin-top: var(--col-gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .proof__detail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.proof figure { margin: 0; }
.proof .card__media { border-radius: var(--r-sm); }
.proof__cap { margin-top: var(--s-xs); color: var(--c-stone-text); }

/* Homepage 2026: a distinct editorial composition, with mobile as discovery. */
.av-hero { min-height:100svh; margin-top:calc(var(--nav-h) * -1); display:grid; grid-template-columns:minmax(0,42%) minmax(0,58%); position:relative; background:var(--c-bg); overflow:hidden; }
.av-hero__copy { padding:calc(var(--nav-h) + var(--s-md)) var(--gutter) calc(var(--sec-lg) + 5.75rem); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; position:relative; z-index:2; }
.av-hero__title,.av-philosophy__title { font-family:var(--font-display); font-size:clamp(4.5rem,6vw,6rem); line-height:.83; letter-spacing:var(--ls-display); font-weight:var(--w-display); margin:var(--s-md) 0; }
.av-hero__intro { max-width:28ch; font-size:var(--t-body); line-height:var(--lh-body); color:var(--c-stone-text); }
.av-hero__actions { display:flex; gap:var(--s-sm); flex-wrap:wrap; margin-top:var(--s-md); }
.av-hero__image { margin:0; min-height:100svh; position:relative; overflow:hidden; }
.av-hero__image picture,.av-hero__image img { display:block; width:100%; height:100%; }
.av-hero__image img { object-fit:cover; object-position:center; transition:transform var(--m-hero) var(--ease); }
.av-hero:hover .av-hero__image img { transform:scale(1.025); }
.av-hero__image figcaption,.av-hero__scroll { font-size:var(--t-micro); text-transform:uppercase; letter-spacing:var(--ls-meta); }
.av-hero__image figcaption { position:absolute; bottom:var(--s-md); right:var(--s-md); color:var(--c-bg); z-index:2; }
.av-hero__stats { position:absolute; z-index:3; bottom:0; left:0; right:0; width:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hairline); margin:0; background:rgba(240,242,250,.93); backdrop-filter:blur(8px); }
.av-hero__stats div { padding:var(--s-sm) var(--gutter); border-right:1px solid var(--hairline); }
.av-hero__stats div:last-child { border-right:0; }
.av-hero__stats dt { font-size:var(--t-micro); text-transform:uppercase; letter-spacing:var(--ls-meta); color:var(--c-stone-text); }
.av-hero__stats dd { margin:4px 0 0; font-family:var(--font-display); font-size:var(--t-h3); line-height:1; }
.av-hero__scroll { position:absolute; bottom:calc(5.75rem + var(--s-md)); left:calc(42% + var(--s-md)); color:var(--c-bg); z-index:3; text-decoration:none; }
.av-philosophy { padding:var(--sec-lg) 0; color:var(--c-bg); }
.av-philosophy .t-eyebrow { color:var(--c-stone-on-dark); }
.av-philosophy__title { max-width:13ch; margin-block:var(--s-lg); }
.av-philosophy__title em { color:var(--c-accent); font-style:normal; }
.av-philosophy__details { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hairline-dark); }
.av-philosophy__detail { border-bottom:1px solid var(--hairline-dark); }
.av-philosophy__trigger { width:100%; min-height:64px; padding:var(--s-sm) 0; color:inherit; background:none; border:0; font:var(--t-ui) var(--font); text-transform:uppercase; letter-spacing:var(--ls-meta); text-align:left; display:flex; gap:var(--s-sm); align-items:center; cursor:pointer; }
.av-philosophy__trigger span { color:var(--c-accent); }.av-philosophy__trigger i { margin-left:auto; font-style:normal; }
.av-philosophy__panel { color:var(--c-stone-on-dark); padding-right:var(--s-md); }.av-philosophy__panel p { margin:0 0 var(--s-md); }
.av-story { display:grid; gap:var(--s-xl); grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }.av-story__image { margin:0; position:sticky; top:calc(var(--nav-h) + var(--s-md)); }.av-story__image .card__media { overflow:hidden; }.av-story__image img { object-position:var(--story-image-position,50% 52%); transition:object-position 650ms var(--ease),transform 650ms var(--ease); }.av-story__image figcaption { margin-top:var(--s-sm); }.av-story__list { padding:0; margin:0; list-style:none; border-top:1px solid var(--hairline); }.av-story__item { padding:var(--s-md) 0; border-bottom:1px solid var(--hairline); transition:padding-left var(--m-normal) var(--ease),color var(--m-normal) var(--ease); }.av-story__item.is-active { padding-left:var(--s-sm); }.av-story__item.is-active h3 { color:var(--c-accent-text); }.av-story__item span { color:var(--c-accent-text); font-size:var(--t-micro); letter-spacing:var(--ls-meta); }.av-story__item h3 { margin:8px 0; font:var(--t-h3)/var(--lh-heading) var(--font-display); }.av-story__item p { max-width:36ch; margin:0; }
.av-selector__tabs,.av-explorer__tabs { display:flex; gap:var(--s-md); border-bottom:1px solid var(--hairline); margin-bottom:var(--s-md); overflow:auto; }.av-selector__tabs button,.av-explorer__tabs button,.av-proof__controls button { min-height:48px; background:transparent; border:0; border-bottom:2px solid transparent; color:var(--c-stone-text); white-space:nowrap; font:var(--t-ui) var(--font); text-transform:uppercase; letter-spacing:var(--ls-meta); cursor:pointer; }.av-selector__tabs button[aria-selected=true],.av-explorer__tabs button[aria-selected=true],.av-proof__controls button[aria-selected=true] { color:var(--c-ink); border-color:var(--c-accent); }.av-selector__panel,.av-explorer__panel,.av-proof__panel { display:none; animation:av-crossfade var(--m-text) var(--ease); }.av-selector__panel.is-active,.av-explorer__panel.is-active,.av-proof__panel.is-active { display:grid; }.av-selector__panel { grid-template-columns:minmax(0,1.45fr) minmax(250px,.55fr); gap:var(--s-lg); align-items:center; }.av-selector__media img,.av-explorer__image img,.av-proof__image img { width:100%; height:100%; object-fit:cover; }.av-selector__content h3 { margin:var(--s-sm) 0; }.av-selector__content dl { margin:var(--s-md) 0; border-top:1px solid var(--hairline); }.av-selector__content dl div { padding:var(--s-sm) 0; border-bottom:1px solid var(--hairline); }.av-selector__content dt { font-size:var(--t-micro); text-transform:uppercase; letter-spacing:var(--ls-meta); color:var(--c-stone-text); }.av-selector__content dd { margin:5px 0 0; }.av-explorer__tabs { border-color:var(--hairline-dark); }.av-explorer__tabs button { color:var(--c-stone-on-dark); }.av-explorer__tabs button[aria-selected=true] { color:var(--c-bg); }.av-explorer__panel { grid-template-columns:minmax(0,1.45fr) minmax(220px,.55fr); align-items:end; gap:var(--s-lg); }.av-explorer__panel h3 { margin:var(--s-sm) 0; }.av-explorer__panel .t-eyebrow { color:var(--c-stone-on-dark); }.av-explorer__panel .t-muted { color:var(--c-stone-on-dark); }.av-explorer__tabs small { display:block; color:var(--c-accent); font-size:inherit; }.av-proof__panel { grid-template-columns:minmax(0,1.5fr) minmax(220px,.5fr); gap:var(--s-lg); align-items:end; }.av-proof__panel h3 { margin:var(--s-sm) 0; }.av-proof__image { position:relative; }.av-proof__controls { margin-top:var(--s-md); display:flex; gap:var(--s-sm); }.av-proof__controls button { border:1px solid var(--hairline); padding:0 var(--s-sm); }
@keyframes av-crossfade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (max-width:899px) { .av-hero { display:flex; flex-direction:column; min-height:0; margin-top:calc(var(--nav-h) * -1); padding-top:calc(var(--nav-h) * .2); }.av-hero__image { order:1; min-height:clamp(300px,52svh,540px); margin:0 var(--gutter); }.av-hero__copy { order:2; padding:var(--s-md) var(--gutter) var(--s-sm); }.av-hero__title { font-size:clamp(3.5rem,15vw,4.5rem); margin:var(--s-sm) 0; }.av-hero__intro { max-width:34ch; }.av-hero__stats { position:static; order:3; width:auto; margin:var(--s-md) var(--gutter) 0; grid-template-columns:repeat(3,1fr); background:transparent; backdrop-filter:none; }.av-hero__stats div { padding:var(--s-sm) 8px; }.av-hero__stats div:last-child { display:none; }.av-hero__stats dd { font-size:var(--t-body); }.av-hero__scroll { position:static; order:4; color:var(--c-ink); margin:var(--s-md) var(--gutter); }.av-hero__image figcaption { display:none; }.av-philosophy__title { font-size:clamp(2.7rem,12vw,4rem); }.av-philosophy__details { grid-template-columns:1fr; }.av-story,.av-selector__panel,.av-explorer__panel,.av-proof__panel { grid-template-columns:1fr; gap:var(--s-md); }.av-story__image { position:static; }.av-story__item { padding-block:var(--s-sm); }.av-story__item p { display:none; }.av-story__item.is-active p { display:block; margin-top:var(--s-xs); }.av-explorer__tabs { gap:var(--s-sm); }.av-explorer__panel { grid-template-areas:'image' 'copy'; }.av-explorer__image { grid-area:image; }.av-proof__panel { grid-template-areas:'image' 'copy'; }.av-proof__image { grid-area:image; }.av-proof__controls { overflow:auto; }.av-selector__panel,.av-explorer__panel,.av-proof__panel { touch-action:pan-y; } }
@media (prefers-reduced-motion:reduce) { .av-hero:hover .av-hero__image img { transform:none; }.av-selector__panel,.av-explorer__panel,.av-proof__panel { animation:none; } }
@media (max-width:899px) { .av-hero,.av-philosophy,.av-story,.av-selector,.av-explorer,.av-proof,.location__grid,.enquire__grid { min-width:0; } .av-selector__tabs,.av-explorer__tabs,.av-proof__controls { scrollbar-width:none; } .av-selector__tabs::-webkit-scrollbar,.av-explorer__tabs::-webkit-scrollbar,.av-proof__controls::-webkit-scrollbar { display:none; } }

/* The earlier rail rule no longer applies to this section. */
.proof .rail { display: block; }

/* --------------------------------------------------------------------------
   RESIDENCE PANELS
   Editorial panels rather than property cards: an index line, a dominant
   photograph, then the facts. No badge, no icon row, no button.
   -------------------------------------------------------------------------- */

.res-panel { display: block; }
.res-panel__idx {
  display: flex;
  align-items: baseline;
  gap: var(--s-xs);
  padding-bottom: var(--s-sm);
  margin-bottom: var(--s-sm);
  border-bottom: var(--border-width) solid var(--hairline);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
}
.mode-dark .res-panel__idx { border-bottom-color: var(--hairline-dark); }
.res-panel .card__body { padding-top: var(--s-md); }
.res-panel .card__title { margin-top: 0; }

/* The index line takes the accent on hover, so the whole panel reads as one
   target rather than only the arrow responding. */
@media (hover: hover) and (pointer: fine) {
  .res-panel:hover .res-panel__idx { border-bottom-color: var(--c-accent); }
}

/* Fact strip values that set over two lines (a full month, a structure
   description) must not collide with the line beneath. */
.facts__value { text-wrap: balance; }

/* --------------------------------------------------------------------------
   AMENITY PLATES
   Same system as the residence panels: numbered category label, then a taller
   editorial plate. Four groups instead of fifty-one icons.
   -------------------------------------------------------------------------- */

.amen-plate__idx {
  display: flex;
  align-items: baseline;
  gap: var(--s-xs);
  padding-bottom: 10px;
  margin-bottom: var(--s-sm);
  border-bottom: var(--border-width) solid var(--hairline);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
}
.mode-dark .amen-plate__idx { border-bottom-color: var(--hairline-dark); }
.amen-plate .card__body { padding-top: var(--s-sm); }

/* --------------------------------------------------------------------------
   ENQUIRY SURFACE
   The single conversion block on the page sits on white, one step up from the
   warm-white ground. A hairline and a change of surface, not a shadow.
   -------------------------------------------------------------------------- */

.enquire__grid.surface { align-items: start; }
@media (min-width: 1200px) {
  .enquire__grid.surface { padding: var(--s-lg); }
}

/* Landmark rows are buttons: tap or keyboard, never hover-only. */
.dist__name {
  text-align: left;
  padding: 0;
  color: inherit;
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  flex: 1;
}
.dist__name:hover,
.dist__name:focus-visible,
.dist__name.is-on { color: var(--c-accent-text); }
.mode-dark .dist__name:hover,
.mode-dark .dist__name.is-on { color: var(--c-accent); }

/* Landmarks with no pin stay plain text — they must not look interactive. */
.dist__name--static { cursor: default; }
.dist__name--static:hover { color: inherit; }

/* --------------------------------------------------------------------------
   PLAN - an architect's drawing, shown large and linked at full size

   Unlike a photograph, the value here is the small print. It gets a white
   ground rather than the paper texture (a drawing on a textured field reads
   as a scan), no crop, and a link out to the full-resolution file, because
   1100px is not enough to read a room label on a phone.
   -------------------------------------------------------------------------- */

.plan { margin: 0; }
.plan__frame {
  display: block;
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--r-sm);
  background: #fff;
  padding: var(--s-sm);
  overflow: hidden;
}
.plan__frame img { display: block; width: 100%; height: auto; }
.plan__cap {
  margin-top: var(--s-sm);
  color: var(--c-stone-text);
  max-width: 68ch;
}


/* ==========================================================================
   AEROVISTA DEDICATED LANDING PAGE STYLES (/aerovista/)
   Strictly scoped under .laero-* to ensure zero bleed into other pages.
   ========================================================================== */

/* Mandatory Gate Modal Lock */
.laero-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  overflow-y: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s cubic-bezier(.22, 1, .36, 1), visibility 0.35s cubic-bezier(.22, 1, .36, 1);
}
.laero-gate.is-dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.laero-gate__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 6, 36, 0.84);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.laero-gate__panel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 490px;
  max-height: min(calc(100dvh - 40px), 680px);
  overflow-y: auto;
  background: var(--c-surface);
  border: 1px solid rgba(163, 124, 30, 0.35);
  border-radius: var(--r-island, 20px);
  padding: clamp(24px, 5vw, 36px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  margin: auto;
  color: var(--c-ink);
}
.laero-gate__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--c-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.laero-gate__close:hover {
  background: rgba(204, 63, 0, 0.12);
  color: var(--c-accent, #CC3F00);
  border-color: rgba(204, 63, 0, 0.25);
  transform: scale(1.08);
}
.laero-gate__brand {
  text-align: center;
  margin-bottom: var(--s-md);
}
.laero-gate__logo {
  height: 50px;
  width: auto;
  margin: 0 auto;
  object-fit: contain;
}
.logo-brand--aerovista {
  height: clamp(48px, 3.2vw, 62px);
  max-height: 62px;
  width: auto;
  object-fit: contain;
}
.nav__logo--aerovista {
  height: auto;
  min-height: calc(var(--nav-logo-h) + 12px);
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: clamp(14px, 1.5vw, 26px);
  padding-right: clamp(16px, 1.8vw, 30px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Aerovista page dark hero navigation adjustments */
.laero-hero-sec ~ .nav .nav__links,
body:has(.laero-hero-sec) .nav .nav__links {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.90);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
}
.laero-hero-sec ~ .nav .nav__link,
body:has(.laero-hero-sec) .nav .nav__link {
  color: var(--c-ink);
  font-weight: var(--w-medium);
  text-shadow: none;
}
.laero-gate__strapline {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-accent-text, #A37C1E);
  margin-top: 4px;
  font-weight: 600;
}
.laero-gate__head {
  text-align: center;
  margin-bottom: var(--s-md);
}
.laero-gate__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 12px;
  background: rgba(163, 124, 30, 0.12);
  color: var(--c-accent-text, #A37C1E);
  border-radius: 9999px;
  margin-bottom: var(--s-xs);
}
.laero-gate__title {
  font-family: var(--font-heading, inherit);
  font-size: clamp(20px, 4vw, 24px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-ink);
  margin-bottom: var(--s-xs);
}
.laero-gate__desc {
  font-size: 14px;
  color: var(--c-stone-text);
  line-height: 1.5;
}
.laero-gate__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm, 12px);
}
.laero-gate__submit {
  margin-top: 4px;
}
.laero-gate__foot {
  margin-top: var(--s-md);
  text-align: center;
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-sm);
}

/* Blur state for main content while gate is active */
.laero-content.is-blurred {
  filter: blur(12px);
  pointer-events: none;
  user-select: none;
  transition: filter 0.45s ease;
}
html.laero-locked,
body.laero-locked {
  overflow: hidden !important;
  touch-action: none;
}

/* Remove dead space above hero section on Aerovista page */
body:has(.laero-hero-sec) main#main {
  padding-top: 0;
}

/* --------------------------------------------------------------------------
   01. HERO SECTION (Split Cinematic Composition)
   -------------------------------------------------------------------------- */
.laero-hero-sec {
  /* Architectural Copper / Terracotta Accent Color Tokens */
  --aerovista-accent: #C96A3D;
  --aerovista-accent-dark: #A95632;
  --aerovista-accent-soft: #B97855;
  --aerovista-accent-hover: #D0784D;
  --aerovista-accent-cta: #B85F35;
  --aerovista-accent-sep: rgba(201, 106, 61, 0.42);

  /* Scope shared dark variables locally within the hero */
  --c-accent: var(--aerovista-accent);
  --c-accent-bright: var(--aerovista-accent);
  --c-accent-hover: var(--aerovista-accent-hover);

  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
  padding-top: calc(var(--nav-top) + var(--nav-logo-h) + 32px);
  padding-bottom: clamp(28px, 4vw, 48px);
  background: #0B0624;
  background: radial-gradient(circle at 75% 30%, #1A1340 0%, #0B0624 75%);
}
@media (max-width: 999px) {
  .laero-hero-sec {
    padding-top: calc(var(--nav-top) + var(--nav-logo-h) + 20px);
    padding-bottom: 28px;
  }
}
.laero-hero-wrap {
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
}
.laero-hero__grid {
  display: grid;
  grid-template-columns: 0.88fr 1.35fr;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}
.laero-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.laero-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s-sm);
}
.laero-hero-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.laero-hero-tag .t-accent {
  color: var(--aerovista-accent, #C96A3D);
  margin-left: 0.35em;
}
.laero-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 5px 14px;
  border-radius: 9999px;
}
.laero-pill--gold {
  background: rgba(229, 195, 120, 0.15);
  color: var(--c-gold, #E5C378);
  border: 1px solid rgba(229, 195, 120, 0.3);
}
.laero-pill--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.laero-hero__title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(2.5rem, 2.1rem + 3.8vw, 4.75rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0 0 var(--s-sm);
}
.laero-hero__title .t-accent {
  color: var(--aerovista-accent, #C96A3D);
}
.laero-hero__meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent, #CC3F00);
  color: var(--aerovista-accent, #C96A3D);
  margin-bottom: var(--s-sm);
}
.laero-hero__meta-pill .sep {
  color: rgba(255, 255, 255, 0.25);
  color: var(--aerovista-accent-sep, rgba(201, 106, 61, 0.42));
}
.laero-hero__subtitle {
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.18rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 52ch;
  margin: 0 0 var(--s-lg);
}
.laero-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.laero-hero-sec .btn-primary {
  background: var(--aerovista-accent-cta, #B85F35);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(169, 86, 50, 0.22);
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.laero-hero-sec .btn-primary:hover {
  background: var(--aerovista-accent-hover, #D0784D);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(169, 86, 50, 0.28);
}
.laero-hero-sec .btn-primary:active {
  transform: translateY(0);
}
.laero-btn-video {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.laero-btn-video:hover {
  background: #FFFFFF;
  color: var(--c-ink);
  border-color: #FFFFFF;
}

/* Right Visual Frame */
.laero-hero__visual-col {
  position: relative;
  transform: translateY(-15px);
}
.laero-hero__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9.6;
  border-radius: var(--r-island, 20px);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
  background: #0E0B1B;
}
@media (min-width: 1025px) {
  .laero-hero__frame {
    min-height: clamp(380px, 52vh, 600px);
  }
}
.laero-hero__pic,
.laero-hero__img,
.laero-hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.laero-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 6, 36, 0.15) 0%, rgba(11, 6, 36, 0.2) 50%, rgba(11, 6, 36, 0.75) 100%);
  pointer-events: none;
}

/* Icon-only floating controls on Hero Video */
.laero-hero-icon-btn {
  position: absolute;
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(11, 6, 36, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}
.laero-hero-icon-btn:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  background: var(--aerovista-accent, #C96A3D);
  border-color: var(--aerovista-accent, #C96A3D);
  transform: scale(1.08);
}
.laero-hero-sound-btn {
  top: 20px;
  right: 20px;
}
.laero-hero-expand-btn {
  top: 20px;
  right: 74px;
}
.laero-hero-sound-btn .laero-hero-sound-on {
  display: none;
}
.laero-hero-sound-btn .laero-hero-sound-off {
  display: block;
}
.laero-hero__quote-badge {
  position: absolute;
  bottom: 24px;
  right: 24px;
  text-align: right;
  z-index: 2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.laero-quote-title {
  display: block;
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  font-style: italic;
  color: #FFFFFF;
}
.laero-quote-sub {
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--c-gold, #E5C378);
  margin-top: 4px;
}

/* Scroll Indicator Pill */
.laero-hero__scroll {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 4vw, 44px);
}
.laero-scroll-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  padding: 8px 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.25s ease;
  color: rgba(255, 255, 255, 0.72);
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: color 0.25s ease, opacity 0.25s ease;
  text-decoration: none;
  cursor: pointer;
}
.laero-scroll-pill:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  background: transparent;
  border-color: transparent;
}
.laero-scroll-mouse {
  width: 14px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  width: 24px;
  height: 38px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 4px;
  padding-top: 6px;
  box-sizing: border-box;
  transition: border-color 0.25s ease;
}
.laero-scroll-pill:hover .laero-scroll-mouse {
  border-color: #FFFFFF;
}
.laero-scroll-wheel {
  width: 3px;
  height: 5px;
  width: 3.5px;
  height: 7px;
  background: var(--c-accent, #CC3F00);
  background: var(--aerovista-accent, #C96A3D);
  border-radius: 2px;
  animation: laeroWheel 1.8s infinite ease;
}
@keyframes laeroWheel {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(6px); opacity: 0; }
  100% { transform: translateY(10px); opacity: 0; }
}

/* Video Modal Drawer */
.laero-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.laero-video-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.laero-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px);
}
.laero-video-modal__box {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  background: #0E0B1B;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--r-island, 20px);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}
.laero-video-modal__x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.laero-video-modal__x:hover {
  background: var(--c-accent);
}
.laero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 80vh;
  background: #000;
  overflow: hidden;
}
.laero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.laero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.laero-arrow--prev { left: 16px; }
.laero-arrow--next { right: 16px; }
.laero-arrow:hover { background: var(--c-accent); border-color: var(--c-accent); }
.laero-indicator-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFF;
}
.laero-indicator-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 8px var(--c-accent);
}
.laero-audio-toggle-wrap {
  position: absolute;
  top: 16px;
  right: 64px;
  z-index: 4;
}
.laero-audio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #FFF;
  cursor: pointer;
  transition: all 0.2s ease;
}
.laero-audio-btn:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  transform: scale(1.08);
}
.laero-play-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(204, 63, 0, 0.9);
  border: none;
  color: #FFF;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.laero-play-center:hover {
  transform: translate(-50%, -50%) scale(1.08);
}
.laero-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 100%);
}
.laero-ctrl-btn {
  background: none;
  border: none;
  color: #FFF;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.laero-scrubber-wrap {
  flex: 1;
  display: flex;
  align-items: center;
}
.laero-scrubber {
  width: 100%;
  cursor: pointer;
  accent-color: var(--c-accent);
}
.laero-time {
  font-size: 11px;
  font-family: monospace;
  color: rgba(255, 255, 255, 0.8);
}
.laero-player__caption {
  padding: 14px 20px;
  background: #140F26;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   02. PROJECT OVERVIEW (6-Metric Statistics Ribbon)
   -------------------------------------------------------------------------- */
.laero-stats-sec {
  background: #0E0921;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: clamp(24px, 3.5vw, 36px) 0;
}
.laero-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.laero-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.laero-stat-card:last-child {
  border-right: none;
}
.laero-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--c-gold, #E5C378);
  margin-bottom: 10px;
}
.laero-stat__num {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem);
  font-weight: 500;
  line-height: 1.15;
  color: #FFFFFF;
  margin-bottom: 4px;
  white-space: nowrap;
}
.laero-stat__lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   03. DESIGN PHILOSOPHY ("DESIGNED FOR")
   -------------------------------------------------------------------------- */
.laero-philosophy-sec {
  background: var(--c-surface, #FFFFFF);
  padding: clamp(48px, 6vw, 84px) 0;
  border-bottom: 1px solid var(--hairline);
}
.laero-philo-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.laero-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent, #CC3F00);
  margin-bottom: 8px;
}
.laero-philo__title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(2rem, 1.7rem + 1.6vw, 3rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin: 0 0 var(--s-sm);
}
.laero-philo__lead {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-stone-text);
  max-width: 44ch;
}
.laero-philo__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}
.laero-philo-col {
  padding: 16px;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.015);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.laero-philo-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.laero-philo-num {
  font-family: var(--font-heading, Georgia, serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--c-accent, #CC3F00);
}
.laero-philo-col__title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-ink);
  margin: 0 0 8px;
}
.laero-philo-col__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-stone-text);
  margin: 0;
}

/* --------------------------------------------------------------------------
   04. RESIDENCES VISUAL EXPLORER (2 & 3 BHK)
   -------------------------------------------------------------------------- */
.laero-residences-sec {
  background: var(--c-canvas, #F9F8F6);
  padding: clamp(52px, 6vw, 90px) 0;
  border-bottom: 1px solid var(--hairline);
}
.laero-res-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(24px, 4vw, 40px);
}
.laero-typology-switch {
  display: inline-flex;
  padding: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.laero-type-pill {
  padding: 8px 24px;
  border-radius: 9999px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-stone-text);
  cursor: pointer;
  transition: all 0.22s ease;
}
.laero-type-pill.is-active {
  background: var(--c-accent, #CC3F00);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(204, 63, 0, 0.35);
}
.laero-res-container {
  display: none;
}
.laero-res-container.is-active {
  display: block;
}
.laero-explorer-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(32px, 4.5vw, 60px);
  align-items: start;
}
.laero-explorer__info {
  position: sticky;
  top: 100px;
}
.laero-explorer__lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-stone-text);
  margin-bottom: var(--s-md);
}
.laero-explorer__specs {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 16px 0;
  margin-bottom: var(--s-lg);
}
.laero-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}
.laero-spec-k {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-stone-text);
}
.laero-spec-v {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
}
.laero-explorer__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Stage & Thumbs */
.laero-explorer__stage-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.laero-stage-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-island, 20px);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  background: #111;
}
.laero-stage-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.laero-stage-caption {
  position: absolute;
  bottom: 18px;
  left: 20px;
  z-index: 2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.laero-stage-controls {
  position: absolute;
  bottom: 18px;
  right: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.laero-stage-counter {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.laero-ctrl-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.laero-ctrl-arrow:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

/* Thumbs row */
.laero-explorer__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.laero-thumb-card {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  background: #000;
  cursor: pointer;
  transition: all 0.2s ease;
}
.laero-thumb-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.laero-thumb-card:hover img,
.laero-thumb-card.is-active img {
  opacity: 1;
}
.laero-thumb-card.is-active {
  border-color: var(--c-accent, #CC3F00);
}
.laero-thumb-lbl {
  position: absolute;
  bottom: 6px;
  left: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #FFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* --------------------------------------------------------------------------
   05. CURATED AMENITIES (5 Category Cards Row)
   -------------------------------------------------------------------------- */
.laero-amenities-sec {
  background: var(--c-surface, #FFFFFF);
  padding: clamp(52px, 6vw, 90px) 0;
  border-bottom: 1px solid var(--hairline);
}
.laero-amen-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(24px, 4vw, 40px);
}
.laero-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent, #CC3F00);
}
.laero-inline-link:hover {
  color: var(--c-accent-hover, #B33600);
}
.laero-amen-carousel {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}
.laero-amen-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-canvas, #F9F8F6);
  border: 1px solid var(--hairline);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.laero-amen-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}
.laero-amen-card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #111;
}
.laero-amen-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.laero-amen-card:hover .laero-amen-card__media img {
  transform: scale(1.05);
}
.laero-amen-card__body {
  padding: 16px 14px;
}
.laero-amen-card__title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--c-ink);
  margin: 0 0 6px;
}
.laero-amen-card__desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-stone-text);
  margin: 0;
}

/* --------------------------------------------------------------------------
   06. ACTUAL SITE PHOTOGRAPHS (Architectural Masonry)
   -------------------------------------------------------------------------- */
.laero-site-sec {
  background: #EFECE6;
  padding: clamp(52px, 6vw, 90px) 0;
  border-bottom: 1px solid var(--hairline);
}
.laero-site-split-grid {
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: clamp(32px, 4.5vw, 64px);
  grid-template-columns: 0.9fr 2.6fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.laero-site-grid-col {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  grid-template-columns: 1.45fr 1fr 1fr 1fr; /* Increased external container size by ~30% */
  gap: 12px;
}
.laero-site-grid__c2,
.laero-site-grid__c3,
.laero-site-grid__c4 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.laero-site-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #111;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.laero-site-card--tall {
  aspect-ratio: 3 / 4;
  height: 100%;
}
.laero-site-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.laero-site-card:hover img {
  transform: scale(1.04);
}
.laero-site-card--slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm, 6px);
  background: #111;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  user-select: none;
  touch-action: pan-y;
  cursor: pointer;
}
.laero-slider-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.laero-slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
.laero-site-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.laero-site-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform 0.5s ease;
}
.laero-site-card--slider:hover .laero-site-slide img {
  transform: scale(1.03);
}
.laero-slide-indicators {
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 8px;
  border-radius: 9999px;
  pointer-events: none;
}
.laero-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: all 0.35s ease;
}
.laero-indicator.is-active {
  width: 16px;
  border-radius: 4px;
  background: #FFFFFF;
}
.laero-site-card__tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFF;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   07. STRATEGIC LOCATION (55/45 Split Map + 8 Landmarks)
   -------------------------------------------------------------------------- */
.laero-location-sec {
  background: var(--c-surface, #FFFFFF);
  padding: clamp(52px, 6vw, 90px) 0;
  border-bottom: 1px solid var(--hairline);
}
.laero-location-grid {
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.laero-loc-map-col .locmap-wrap {
  border-radius: var(--r-island, 20px);
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}
.laero-landmarks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.laero-landmark-row {
  list-style: none;
}
.laero-lm-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--c-canvas, #F9F8F6);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  color: inherit;
}
.laero-lm-btn:hover,
.laero-lm-btn.is-on {
  background: #FFFFFF;
  border-color: var(--c-accent, #CC3F00);
  box-shadow: 0 4px 14px rgba(204, 63, 0, 0.12);
  transform: translateX(4px);
}
.laero-lm-btn.is-on .laero-lm-name,
.laero-lm-btn:hover .laero-lm-name {
  color: var(--c-accent, #CC3F00);
}
.laero-lm-name {
  font-weight: 600;
  color: var(--c-ink);
  flex: 1;
  padding: 0 10px;
  transition: color 0.2s ease;
}
.laero-lm-dist {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-accent, #CC3F00);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   08. BUYER FAQ (Clean Numbered Accordion)
   -------------------------------------------------------------------------- */
.laero-faq-sec {
  background: var(--c-canvas, #F9F8F6);
  padding: clamp(52px, 6vw, 90px) 0;
  border-bottom: 1px solid var(--hairline);
}
.laero-faq-split-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.laero-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.laero-acc-item {
  background: var(--c-surface, #FFFFFF);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.laero-acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}
.laero-acc-num {
  font-family: var(--font-heading, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--c-accent, #CC3F00);
}
.laero-acc-q {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink);
  flex: 1;
}
.laero-acc-sign {
  font-size: 20px;
  font-weight: 400;
  color: var(--c-stone-text);
  transition: transform 0.25s ease;
}
.laero-acc-trigger[aria-expanded="true"] .laero-acc-sign {
  transform: rotate(45deg);
  color: var(--c-accent);
}
.laero-acc-panel {
  display: none;
  padding: 0 20px 18px 52px;
}
.laero-acc-trigger[aria-expanded="true"] + .laero-acc-panel {
  display: block;
}
.laero-faq-more {
  padding-top: 8px;
}

/* --------------------------------------------------------------------------
   09. ENQUIRY / PRIVATE CONSULTATION (Horizontal Bar Form)
   -------------------------------------------------------------------------- */
.laero-enquiry-sec {
  background: var(--c-surface, #FFFFFF);
  padding: clamp(52px, 6vw, 90px) 0;
}
.laero-enquiry-box {
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--r-island, 20px);
  background: var(--c-canvas, #F9F8F6);
  border: 1px solid var(--hairline);
}
.laero-enquiry-intro {
  text-align: center;
  max-width: 600px;
  margin: 0 auto clamp(24px, 3vw, 36px);
}
.laero-enquiry-title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.8rem, 1.5rem + 1.4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--c-ink);
  margin: 6px 0 10px;
}
.laero-enquiry-lead {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-stone-text);
}
.laero-enquiry-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr 1.2fr;
  gap: 12px;
  align-items: center;
}
.laero-input-field .input {
  width: 100%;
  height: 48px;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 0 14px;
  font-size: 13px;
}
.laero-input-submit .btn {
  height: 48px;
  width: 100%;
}
.laero-enquiry-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}


/* ==========================================================================
   MOBILE & RESPONSIVE BREAKPOINTS (Optimized independent composition)
   ========================================================================== */
@media (max-width: 1024px) {
  .laero-hero-sec {
    min-height: auto;
    padding-top: calc(var(--nav-top) + var(--nav-logo-h) + 24px);
    padding-bottom: 36px;
  }
  .laero-hero__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .laero-hero__visual-col {
    order: -1;
    transform: none;
    width: 100%;
  }
  .laero-hero__frame {
    width: 100%;
    min-height: unset;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 48vh;
    border-radius: 16px;
  }
  .laero-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 12px;
  }
  .laero-stat-card {
    border-right: none;
  }
  .laero-philo-layout {
    grid-template-columns: 1fr;
  }
  .laero-explorer-grid {
    grid-template-columns: 1fr;
  }
  .laero-explorer__info {
    position: static;
  }
  .laero-amen-carousel {
    grid-template-columns: repeat(3, 1fr);
  }
  .laero-site-split-grid {
    grid-template-columns: 1fr;
  }
  .laero-location-grid {
    grid-template-columns: 1fr;
  }
  .laero-faq-split-grid {
    grid-template-columns: 1fr;
  }
  .laero-enquiry-inputs {
    grid-template-columns: 1fr 1fr;
  }
  .laero-input-submit {
    grid-column: span 2;
  }
}


@media (max-width: 767px) {
  .laero-hero-sec {
    min-height: auto;
    margin-top: 0;
    padding-top: calc(var(--nav-top) + var(--nav-logo-h) + 16px);
    padding-bottom: 24px;
    overflow: hidden;
  }
  .laero-hero-wrap {
    padding-left: clamp(14px, 3.5vw, 24px);
    padding-right: clamp(14px, 3.5vw, 24px);
  }
  .laero-hero__grid {
    gap: 16px;
  }
  .laero-hero__visual-col {
    order: -1;
    transform: none;
    width: 100%;
    margin: 0;
  }
  .laero-hero__frame {
    width: 100%;
    min-height: unset;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 40vh;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1);
  }
  .laero-hero-icon-btn {
    width: 36px;
    height: 36px;
  }
  .laero-hero-icon-btn svg {
    width: 16px;
    height: 16px;
  }
  .laero-hero-sound-btn {
    top: 10px;
    right: 10px;
  }
  .laero-hero-expand-btn {
    top: 10px;
    right: 52px;
  }
  .laero-hero__quote-badge {
    bottom: 8px;
    right: 10px;
  }
  .laero-quote-title {
    font-size: 11px;
    line-height: 1.2;
  }
  .laero-quote-sub {
    font-size: 8px;
    letter-spacing: 0.12em;
    margin-top: 2px;
  }
  .laero-pill-row {
    margin-bottom: 6px;
    gap: 6px;
  }
  .laero-pill {
    font-size: 10px;
    padding: 3px 10px;
    letter-spacing: 0.1em;
  }
  .laero-hero__title {
    font-size: clamp(1.75rem, 1.45rem + 1.8vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
  }
  .laero-hero__meta-pill {
    font-size: 11px;
    gap: 8px;
    margin-bottom: 8px;
  }
  .laero-hero__subtitle {
    font-size: 13.5px;
    line-height: 1.48;
    max-width: 100%;
    margin-bottom: 16px;
  }
  .laero-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }
  .laero-hero__actions .btn {
    width: 100%;
    min-height: 46px;
    justify-content: center;
    font-size: 13px;
  }
  .laero-hero__scroll {
    display: none;
  }
  .laero-philo__cols {
    grid-template-columns: 1fr;
  }
  
  /* Amenities horizontal swipe carousel on mobile */
  .laero-amen-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .laero-amen-card {
    flex: 0 0 78vw;
    scroll-snap-align: start;
  }
  
  /* Site Photos mobile layout */
  .laero-site-grid-col {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .laero-site-card--tall {
    aspect-ratio: 4 / 3;
    min-height: 320px;
    max-height: 470px;
  }
  
  /* Consultation bar on mobile */
  .laero-enquiry-inputs {
    grid-template-columns: 1fr;
  }
  .laero-input-submit {
    grid-column: span 1;
  }
  .laero-enquiry-foot {
    flex-direction: column;
    gap: 8px;
  }

  /* Video Modal on mobile */
  .laero-video-modal {
    padding: 10px;
  }
  .laero-video-modal__box {
    border-radius: 12px;
  }
  .laero-video-modal__x {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
  }
  .laero-player__ctrls {
    padding: 8px 12px;
    gap: 10px;
  }
  .laero-player__caption {
    padding: 10px 14px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .laero-hero-sec {
    padding-top: calc(var(--nav-top) + var(--nav-logo-h) + 12px);
    padding-bottom: 20px;
  }
  .laero-hero__grid {
    gap: 14px;
  }
  .laero-hero__frame {
    border-radius: 10px;
    max-height: 35vh;
  }
  .laero-hero-icon-btn {
    width: 32px;
    height: 32px;
  }
  .laero-hero-icon-btn svg {
    width: 14px;
    height: 14px;
  }
  .laero-hero-sound-btn {
    top: 8px;
    right: 8px;
  }
  .laero-hero-expand-btn {
    top: 8px;
    right: 44px;
  }
  .laero-hero__quote-badge {
    bottom: 6px;
    right: 8px;
  }
  .laero-quote-title {
    font-size: 10px;
  }
  .laero-quote-sub {
    font-size: 7.5px;
  }
  .laero-hero__title {
    font-size: clamp(1.55rem, 1.3rem + 1.5vw, 1.9rem);
    line-height: 1.1;
  }
  .laero-hero__subtitle {
    font-size: 13px;
    margin-bottom: 14px;
  }
}

/* --------------------------------------------------------------------------
   FULLSCREEN IMAGE LIGHTBOX VIEWER (Aerovista Experience)
   -------------------------------------------------------------------------- */
.laero-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: clamp(14px, 2.5vw, 28px);
  background: rgba(6, 3, 20, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.laero-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.laero-lightbox__backdrop {
  position: absolute;
  inset: 0;
  cursor: zoom-out;
  background: transparent;
}
.laero-lightbox__bar {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #FFFFFF;
}
.laero-lightbox__count {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold, #E5C378);
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.08);
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.laero-lightbox__close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.laero-lightbox__close:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  transform: scale(1.08);
}
.laero-lightbox__stage {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 1300px;
  width: 100%;
  flex: 1;
  min-height: 0;
  margin: 12px 0;
}
.laero-lightbox__img {
  max-width: 100%;
  max-height: calc(82vh - 60px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85);
  transition: transform 0.25s ease;
  user-select: none;
}
.laero-lightbox__caption {
  margin-top: 14px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  max-width: 72ch;
  line-height: 1.45;
  letter-spacing: 0.02em;
}
.laero-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.laero-lightbox__nav:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  transform: translateY(-50%) scale(1.08);
}
.laero-lightbox__nav--prev { left: clamp(10px, 2.5vw, 32px); }
.laero-lightbox__nav--next { right: clamp(10px, 2.5vw, 32px); }
@media (max-width: 767px) {
  .laero-lightbox__nav {
    width: 42px;
    height: 42px;
  }
  .laero-lightbox__nav--prev { left: 8px; }
  .laero-lightbox__nav--next { right: 8px; }
  .laero-lightbox__img {
    max-height: calc(75vh - 70px);
  }
}

/* Image Clickable Zoom Affordance across Aerovista */
.laero-zoomable {
  cursor: zoom-in !important;
  position: relative;
  transition: transform var(--m-fast) ease;
}
.laero-zoomable:hover {
  transform: translateY(-3px);
}
.laero-zoom-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(11, 6, 36, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.laero-zoomable:hover .laero-zoom-badge {
  opacity: 1;
  background: var(--c-accent);
  transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .laero-scroll-wheel,
  .laero-hero-sec *,
  .laero-thumb-card {
    animation: none !important;
    transition: none !important;
  }
}