/* ==========================================================================
   AEROVISTA — index2.html only (Google Ads version of the tour, 2 Oct 2026)
   Loaded after style.css / responsive.css / mobile.css. Re-weights what the
   tour already has, it does not restyle it:
   · desktop hero: location, "Starting from" price, four trust facts, one
     primary action (Book) + one secondary (Get price list) + a quiet Call
   · phones: the offer card straight under a shorter slideshow band, with
     Book / Get price list and the four trust facts in the first screen
   · phones: real site photos second, residences third, the film after them
   · phone dock: Call | Price list | Book visit; the price rail is retired
     because the dock now carries the price list
   ========================================================================== */

/* --- Desktop hero ------------------------------------------------------- */
.hero-location { margin-top: 0.55rem; font-size: 0.92rem; font-weight: 500; letter-spacing: 0.02em; color: rgba(255,255,255,0.9); }
.hero-location + .hero-positioning { margin-top: 0.3rem; font-size: clamp(0.95rem, 1.2vw, 1.1rem); color: rgba(255,255,255,0.78); }
.hero-price-desktop .hero-price-detail:first-child { letter-spacing: 0.02em; opacity: 0.85; }
.hero-facts--lp2 { margin-top: 1.1rem; padding-top: 0.9rem; gap: 0.6rem 2rem; }
.hero-facts--lp2 dt { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.hero-facts--lp2 dd { font-size: 0.95rem; }
.hero-actions { align-items: center; margin-top: 1.3rem; }
.hero-call-line { margin-top: 0.7rem; font-size: 0.86rem; color: rgba(255,255,255,0.7); }
.hero-call { font-size: 0.86rem; font-weight: 500; color: rgba(255,255,255,0.86); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.35); }
.hero-call:hover { color: #fff; text-decoration-color: var(--gold); }

@media (min-width: 769px) {
  /* The headline block is longer than the tour's, so the brand word gives up
     a little size and the pocket a little more width. */
  .hero-pocket { max-width: 700px; }
  .hero-title-word { font-size: clamp(2.6rem, 4.4vw, 4.2rem); }
  .hero-match { font-size: clamp(1.6rem, 2.5vw, 2.3rem); }
  /* The film now sits mid-page, so it opens on its own solid ground */
  .film { margin-top: var(--sec-gap); padding-top: clamp(2rem, 4vw, 3rem); background: rgba(11,13,28,0.94); }
}

/* --- Price-list sheet: plain English heading instead of chat bubbles ----- */
.wa-bar .wa-bar-title { margin: 0.1rem 0 0.15rem; padding-right: 0; font-size: 1.3rem; color: #111B21; }
.wa-bar .wa-bar-lede { margin: 0 0 0.55rem; font-size: 0.88rem; line-height: 1.45; color: #3B4A54; }

/* --- Phones ------------------------------------------------------------- */
@media (max-width: 768px) {
  /* A plain 16:9 band (was ~46% of the screen) so the offer card starts in
     the first screen; every slide is cut to 16:9, so nothing is cropped. */
  :root { --band: 56.25vw; }
  .hero-slide { object-position: 50% 50%; }

  /* Order: offer card → site photos → residences → film → amenities →
     location → trust & EMI → privacy → specification → FAQ → contact */
  .content > .m-hero { order: 1; }
  .content > #progress { order: 2; }
  .content > #residences { order: 3; }
  .content > .film { order: 4; margin-top: var(--sec-gap); border-radius: var(--panel-r); margin-inline: var(--gutter); }
  .content > #amenities { order: 5; }
  .content > #location { order: 6; }
  .content > .sec--trust { order: 7; }
  .content > #privacy-light { order: 8; }
  .content > #specification { order: 9; }
  .content > #faq { order: 10; }
  .content > #contact { order: 11; }
  .content > #arrival, .content > #overview { display: none; }

  /* Offer card */
  .m-hero { margin-top: 0; border-radius: 0 0 var(--panel-r) var(--panel-r); padding: 1.05rem 1.2rem 1.15rem; }
  .m-hero-kicker { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }
  .m-hero-title { margin-top: 0.25rem; font-size: clamp(1.55rem, 6.9vw, 1.9rem); }
  .m-hero-loc { margin-top: 0.35rem; font-size: 0.86rem; font-weight: 600; color: var(--ink-text); }
  .m-hero-lines { margin-top: 0.1rem; font-size: 0.84rem; }
  .m-hero-price { margin-top: 0.75rem; padding: 0.7rem 1rem; width: 100%; text-align: left; }
  .m-hero-amount { font-size: 1.75rem; }
  .m-hero-specs { margin-top: 0.7rem; gap: 0.6rem; }
  .m-hero-specs dd { font-size: 1.1rem; }
  .m-hero-actions { display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; margin-top: 0.85rem; }
  .m-hero-actions .btn { margin-top: 0; min-height: 52px; padding-inline: 0.6rem; border-radius: 14px; font-size: 0.86rem; white-space: nowrap; }
  .m-hero-cta2 { color: var(--ink-text); background: transparent; border: 1.5px solid var(--ink-text); }
  .m-hero-cta2:active { background: rgba(22,23,27,0.06); }

  /* Four trust facts, two by two */
  .lp2-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0.8rem 0 0; padding: 0; list-style: none; }
  .lp2-trust li { display: flex; flex-direction: column; gap: 1px; padding: 0.45rem 0.65rem; border-radius: 12px; background: var(--ivory-2); }
  .lp2-trust span { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-text-2); }
  .lp2-trust b { font-size: 0.82rem; font-weight: 600; color: var(--ink-text); }

  /* Real-progress photos, compact: smaller cards so two peek at once */
  #progress .sheet .t-h1 { font-size: clamp(1.6rem, 7vw, 2rem); }
  #progress .sheet .t-body-light { font-size: 0.9rem; }
  #progress .strip figure { flex-basis: 62vw; }
  #progress .strip img { aspect-ratio: 4 / 5; }
  #progress .strip figcaption { margin-top: 0.5rem; font-size: 0.82rem; }

  /* Dock: Call | Price list | Book visit — the booking stays the strongest */
  .mobile-bar { grid-template-columns: 1fr 1.25fr 1.45fr; }
  .mobile-bar-btn--price { color: #16171B; background: var(--gold); border-color: var(--gold); font-weight: 600;
    --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6M8 13h8M8 17h5'/></svg>"); }

  /* The dock now carries the price list, so the rail above it is retired */
  .price-rail { display: none !important; }
  body { padding-bottom: calc(var(--dock-clear) + 16px); }
  .wa-bar { --wa-gap: calc(var(--dock-bottom) + var(--dock-h) + 8px); }
  .mute-toggle { bottom: calc(var(--dock-bottom) + var(--dock-h) + 8px); }
}

/* Short phones: keep both buttons in the first screen */
@media (max-width: 768px) and (max-height: 700px) {
  .m-hero { padding-top: 0.8rem; }
  .m-hero-lines { display: none; }
  .m-hero-price { margin-top: 0.55rem; padding: 0.55rem 0.9rem; }
  .m-hero-specs { margin-top: 0.5rem; }
}

/* --- Hero slideshow controls (js/index2.js, 2 Oct 2026) -----------------
   Arrows at the picture's edges, "View full" beside the caption, a tap on the
   picture opens the full view, a swipe steps. Auto-play carries on unless the
   visitor takes over, and resumes 10 s after their last step. */
.hero-intro { cursor: zoom-in; }
.hero-pocket { cursor: auto; }
.hero-nav { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%;
  background: rgba(11,13,28,0.45); border: 1px solid rgba(255,255,255,0.22); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color 0.2s, opacity 0.4s; }
.hero-nav:hover { background: rgba(11,13,28,0.75); }
.hero-nav:focus-visible, .hero-full:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hero-nav::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; }
.hero-nav--prev { left: 16px; }
.hero-nav--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.hero-nav--next { right: 16px; }
.hero-nav--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.hero-full { pointer-events: auto; display: inline-flex; align-items: center; gap: 0.4rem; height: 34px; padding: 0 0.85rem 0 0.7rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 500; color: #fff; background: rgba(11,13,28,0.42); border: 1px solid rgba(255,255,255,0.22); cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero-full::before { content: ''; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/></svg>") center / contain no-repeat; }
.hero-full:hover { background: rgba(11,13,28,0.7); }
/* Past the hero on desktop the stage sits behind the sheets: no controls there */
.video-bg.past-hero .hero-nav { opacity: 0; pointer-events: none; }

@media (max-width: 768px) {
  /* The band is under .content's top padding; let taps and swipes through to
     the picture (the sheets themselves stay tappable) */
  .content { pointer-events: none; }
  .content > * { pointer-events: auto; }
  .hero-slides { touch-action: pan-y; }
  .hero-nav { width: 36px; height: 36px; margin-top: -18px; background: rgba(11,13,28,0.38); }
  .hero-nav::before { width: 8px; height: 8px; }
  .hero-nav--prev { left: 8px; }
  .hero-nav--next { right: 8px; }
  .video-bg.past-hero .hero-nav { opacity: 1; pointer-events: auto; }   /* the band stays on screen */
  .hero-full { height: 30px; padding: 0 0.7rem 0 0.6rem; font-size: 0.72rem; }
  .hero-full span { display: none; }      /* icon only on a phone; the label is in aria-label */
  .hero-full { width: 30px; padding: 0; justify-content: center; }
  .hero-slide-ui { gap: 0.4rem; }
  .hero-slide-dots { margin-left: auto; }
}

/* --- Phones: frosted-glass ground under the hero (2 Oct 2026, client) ------
   Replaces the tower photograph behind the sheets. The hero's first frame,
   blurred until only its colour is left, under a dark glass tint: the sheets
   read as glass over the same scene the band shows. No new download (768w is
   the smallest cut of the slide already in use). */
@media (max-width: 768px) {
  .page-bg { overflow: hidden; background: #0B0D1C; }
  .page-bg::before { content: ''; position: absolute; inset: -80px;
    background: url('../assets/images/hero-rooftop-garden-768w.webp') center / cover no-repeat;
    filter: blur(40px) saturate(150%); transform: scale(1.1); opacity: 0.9; }
  .page-bg::after { background:
      radial-gradient(120% 60% at 20% 0%, rgba(255,255,255,0.10), transparent 60%),
      linear-gradient(to bottom, rgba(14,17,34,0.42), rgba(8,10,22,0.70)); }
}

/* --- Desktop hero polish (2 Oct 2026, from the desktop hero review) -------- */
@media (min-width: 769px) {
  /* 1. Slideshow controls: one bar on the right, clear of the headline */
  .hero-slide-ui { left: auto; right: 104px; transform: none; gap: 0.6rem; }
  .hero-slide-ui .hero-nav { position: relative; top: auto; left: auto; right: auto; flex: none; margin: 0; width: 38px; height: 38px; pointer-events: auto; }
  .video-bg.past-hero .hero-full { pointer-events: none; }
  /* 2. A soft fade from the left keeps the white type legible on bright frames */
  .hero-scrim { background:
      linear-gradient(to right, rgba(6,8,20,0.66) 0%, rgba(6,8,20,0.42) 32%, rgba(6,8,20,0) 58%),
      linear-gradient(to bottom, rgba(6,8,20,0.42) 0%, transparent 18%); }
  /* 3. The price is a button: it opens the price list */
  button.hero-price-desktop { font: inherit; color: #fff; text-align: left; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
  button.hero-price-desktop:hover { background: rgba(11,13,28,0.78); border-color: rgba(201,175,134,0.85); }
  button.hero-price-desktop:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  /* 4. The gold price pill waits until the hero (and its own button) is passed */
  body.lp2-in-hero .desk-float-btn--price { opacity: 0; pointer-events: none; transform: translateY(6px); }
  .desk-float-btn--price { transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background-color 0.25s; }
  /* 6. Readable facts and the price note */
  .hero-facts--lp2 dt { font-size: 0.78rem; color: rgba(255,255,255,0.86); }
  .hero-facts--lp2 dd { font-size: 1rem; }
  .hero-note { margin-top: 0.45rem; font-size: 0.74rem; color: rgba(255,255,255,0.72); }
}
/* Small laptops: no dots in the bar so it fits beside the buttons */
@media (min-width: 769px) and (max-width: 1199px) {
  .hero-slide-dots { display: none; }
}
/* 5. Wide screens: the headline lines up with the logo, and grows a little */
@media (min-width: 1600px) {
  .hero-intro { padding-left: max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter))); }
  .hero-pocket { max-width: 780px; }
  .hero-title-word { font-size: clamp(4.2rem, 4.4vw, 5.2rem); }
  .hero-match { font-size: clamp(2.3rem, 2.5vw, 2.9rem); }
  .hero-location { font-size: 1.02rem; }
  .hero-facts--lp2 dd { font-size: 1.08rem; }
}

/* --- Desktop hero on short screens (2 Oct 2026: the text ran into the logo) --
   The block is bottom-aligned, so on a short window it grew up under the
   header. It now never starts above the header (safe alignment + top room),
   and below ~820px of height the type and spacing tighten so it still fits. */
@media (min-width: 769px) {
  .hero-intro { padding-top: 116px; align-items: safe flex-end; }
}
@media (min-width: 769px) and (max-height: 820px) {
  .hero-title-word { font-size: clamp(2.2rem, 6.4vh, 3.6rem); }
  .hero-match { margin-top: 0.35rem; font-size: clamp(1.3rem, 3.7vh, 2rem); max-width: 26ch; }
  .hero-location { margin-top: 0.35rem; }
  .hero-price-desktop { margin-top: 0.8rem; padding: 0.5rem 0.95rem 0.55rem; }
  .hero-price-figure { font-size: clamp(1.4rem, 3.6vh, 1.9rem); }
  .hero-facts--lp2 { margin-top: 0.75rem; padding-top: 0.65rem; }
  .hero-actions { margin-top: 0.9rem; }
  .hero-actions .btn { min-height: 44px; padding-block: 0.6rem; }
  .hero-call-line { margin-top: 0.5rem; }
  .hero-note { margin-top: 0.25rem; }
}
@media (min-width: 769px) and (max-height: 680px) {
  .hero-location + .hero-positioning { display: none; }   /* the facts below carry the substance */
  .hero-match { font-size: clamp(1.2rem, 3.5vh, 1.6rem); max-width: none; }
  .hero-facts--lp2 dt { font-size: 0.7rem; }
  .hero-facts--lp2 dd { font-size: 0.92rem; }
}

/* The floating column's box covered "View full" while its price pill is hidden:
   only the buttons themselves take clicks */
@media (min-width: 769px) {
  .desk-float { pointer-events: none; }
  .desk-float > * { pointer-events: auto; }
  body.lp2-in-hero .desk-float-btn--price { pointer-events: none; }
}

/* --- Film: the play control is the icon alone (2 Oct 2026, client) --------
   The label ("Play film", "Pause", the duration) stays in the button's
   aria-label; video-scroll.js still writes the hidden text, harmlessly. */
.film-play { gap: 0; padding: 0.5rem; }
.film-play-text { display: none; }
@media (max-width: 768px) { .film-play { padding: 0.4rem; } }

/* --- Phones: the hero starts UNDER the nav (2 Oct 2026, client) -----------
   The nav keeps its own look (frosted logo chip + menu button, unchanged);
   only the slideshow band, the content and the glass ground move down so the
   picture begins below the chip instead of behind it. 12px top + 46px chip
   + 12px gap = 70px. */
@media (max-width: 768px) {
  :root { --nav-clear: calc(70px + env(safe-area-inset-top)); }
  .video-bg { top: var(--nav-clear); }
  .content { padding-top: calc(var(--band) + var(--nav-clear)); }
  .page-bg { top: calc(var(--band) + var(--nav-clear)); }
  /* The strip behind the nav is white frosted glass (client: "instead of navy
     dark blue use glass", then "change it white glass") */
  body::before { content: ''; position: fixed; top: -40px; left: -40px; right: -40px; height: calc(var(--nav-clear) + 80px); z-index: 0; pointer-events: none;
    filter: blur(28px) saturate(150%);   /* the soft lower edge tucks under the band */
    background:
      linear-gradient(to bottom, rgba(255,255,255,0.78), rgba(255,255,255,0.66)),
      url('../assets/images/hero-rooftop-garden-768w.webp') center 30% / cover no-repeat; }
}

/* Phones: the logo sits straight on the white glass strip, no chip behind it
   (2 Oct 2026, client). Size, position and the menu button are unchanged. */
@media (max-width: 768px) {
  .brand-glass { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Phones: logo 25% larger (2 Oct 2026, client): 27 → 34px and 18 → 22.5px */
@media (max-width: 768px) {
  .brand-logo { height: 34px; }
  .brand-dev { height: 22.5px; }
  .brand-divider { height: 22px; }
  .brand-glass { max-width: 290px; }
}