/* ================================================================
   Rove Home Muscat Central — microsite
   Design canvas: 1920 × 8316. Scale system: 1rem = 10px @1920
   (html font-size = 0.520833vw), so design px ÷ 10 = rem.
   ================================================================ */

:root {
  --blue: #00548b;
  --gold: #fdaa00;
  --ink: #3d3d3d;
  --grey-panel: #d9d9d9;
  --oswald: "Oswald", "Arial Narrow", sans-serif;
  --roboto: "Roboto", "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 0.520833vw; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--roboto);
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button {
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible {
  outline: 0.15rem solid rgba(255,255,255,.7);
  outline-offset: 0.5rem;
  border-radius: 0.2rem;
}

.frame {
  position: relative;
  max-width: 192rem;
  margin: 0 auto;
  height: 100%;
}

/* ---------- shared type ---------- */
.sec-title {
  font-family: var(--oswald);
  font-weight: 600;
  font-size: 6.4rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blue);
  text-align: center;
}
.sec-title.left { text-align: left; }
.sec-copy {
  font-size: 1.8rem;
  line-height: 1.6;
  text-align: center;
  max-width: 64rem;
  margin: 2.6rem auto 0;
}
.sec-copy.light { color: #fff; max-width: 84rem; }

/* ---------- reveal animations ---------- */
.reveal, .reveal-card {
  opacity: 0;
  transform: translateY(3.4rem);
  transition: opacity 0.9s cubic-bezier(.22,.61,.36,1), transform 0.9s cubic-bezier(.22,.61,.36,1);
}
.reveal.d1 { transition-delay: .12s; }
.reveal.d2 { transition-delay: .24s; }
.reveal.d3 { transition-delay: .36s; }
.reveal.d4 { transition-delay: .48s; }
.in-view .reveal, .in-view .reveal-card,
.reveal.in-view, .reveal-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* parallax images get GPU hint */
[data-parallax] { will-change: transform; }

/* ================================================================
   1. HERO  (design y 0–935)
   ================================================================ */
.hero {
  position: relative;
  height: 93.5rem;
  overflow: hidden;
  color: #fff;
}
.hero-bg {
  position: absolute;
  inset: -22% 0 0;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,20,35,.55) 0%, rgba(10,20,35,.18) 42%, rgba(10,20,35,0) 60%),
    linear-gradient(180deg, rgba(10,20,35,.25) 0%, rgba(10,20,35,0) 30%);
}
.hero-logo {
  position: absolute;
  left: 27.5rem; top: 7.3rem;
  width: 21rem;
}
.hero-title {
  position: absolute;
  left: 27.1rem; top: 24.8rem;
  font-family: var(--oswald);
  font-weight: 600;
  font-size: 7.5rem;
  line-height: 1.13;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
.hero-sub {
  position: absolute;
  left: 27.5rem; top: 45.4rem;
  font-size: 2.4rem;
  font-weight: 400;
}
.hero-ctas {
  position: absolute;
  left: 27.1rem; top: 51.7rem;
  display: flex;
  gap: 2.1rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 6.6rem;
  padding: 0 2.9rem;
  background: var(--blue);
  color: #fff;
  font-family: var(--oswald);
  font-weight: 500;
  font-size: 2.4rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background .3s, transform .3s;
}
.btn:hover { filter: brightness(1.18); transform: translateY(-0.3rem); }
.hero-dev {
  position: absolute;
  left: 27.3rem; top: 69.5rem;
}
.hero-dev span { font-size: 2.4rem; }
.hero-dev img { width: 9.7rem; margin-top: 1.2rem; margin-left: 2.2rem; }

/* "A joint venture between" badge — lives in the About Rove Hotels section */
.jv-badge {
  position: absolute;
  left: 100.5rem; bottom: 0;
  width: 42.5rem;
  padding: 2.4rem 3rem 3rem;
  background: #fff;
  color: #1a1a1a;
  text-align: center;
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
}
.jv-badge p { font-size: 2rem; font-weight: 700; }
.jv-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  margin-top: 2rem;
}
.jv-emaar { width: 12rem; }
.jv-dubai { width: 14.5rem; }

/* ================================================================
   2. A NEW CHAPTER  (design y 935–2270, h 1335)
   ================================================================ */
.chapter {
  position: relative;
  height: 133.5rem;
  overflow: hidden;
  background: #fff;
}
.chapter-bg {
  position: absolute;
  top: -36.2rem; left: 0; right: 0;
  height: 135.6rem;                    /* image placed y573–1929 in design */
}
.chapter-bg img { width: 100%; height: 100%; object-fit: cover; }
.chapter-tint {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 99.4rem;                     /* photo region within section */
  background: linear-gradient(180deg, rgba(0,84,139,.9) 0%, rgba(0,84,139,.45) 18%, rgba(0,84,139,0) 42%);
}
.chapter::after {                       /* white below the photo (y1929+) */
  content: "";
  position: absolute;
  top: 99.4rem; left: 0; right: 0; bottom: 0;
  background: #fff;
}
.chapter .frame { z-index: 2; }
.chapter-title {
  position: absolute;
  left: 26.7rem; top: 6.4rem;
  font-family: var(--oswald);
  font-weight: 600;
  font-size: 6.4rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}
.chapter-copy {
  position: absolute;
  left: 79.1rem; top: 8rem;
  width: 85rem;
  font-size: 1.8rem;
  line-height: 1.6;
  color: #fff;
}

.pillars { position: absolute; inset: 0; z-index: 3; }
.pillar-card {
  position: absolute;
  left: var(--l); top: var(--t);
  width: 25rem; height: 79.2rem;
  overflow: hidden;
  box-shadow: 0 1.8rem 4rem rgba(10,40,70,.28);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.pillar-card:hover { transform: translateY(-1.2rem); }
.pillar-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.pillar-card:hover img { transform: scale(1.06); }
.pillar-grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,84,139,.95) 0%, rgba(0,84,139,.72) 16%, rgba(0,84,139,.28) 34%, rgba(0,84,139,0) 48%);
}
/* crop tuning: keep the Mutrah waterfront city visible (card 3)
   and the front of the train in frame (card 5) */
.pillar-card:nth-child(3) img { object-position: 80% center; }
.pillar-card:nth-child(5) img { object-position: 15% center; }
.pillar-card h3 {
  position: absolute;
  left: 2.5rem; top: 3.2rem;
  font-family: var(--oswald);
  font-weight: 500;
  font-size: 3.5rem;
  line-height: 1.28;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
}
.pillar-icon {
  position: absolute;
  left: 50%; bottom: 5.6rem;
  transform: translateX(-50%);
  width: 7rem; height: 7rem;
  border: 0.15rem solid #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.pillar-icon svg { width: 3.4rem; height: 3.4rem; }

/* mobile-only swipe cue for the pillar cards */
.pillars-hint { display: none; }

/* staggered card entrance */
.reveal-card { transform: translateY(6rem); }
.pillar-card:nth-child(1) { transition-delay: 0s; }
.pillar-card:nth-child(2) { transition-delay: .12s; }
.pillar-card:nth-child(3) { transition-delay: .24s; }
.pillar-card:nth-child(4) { transition-delay: .36s; }
.pillar-card:nth-child(5) { transition-delay: .48s; }

/* ================================================================
   3. ROVE HOME HAS IT ALL  (design y 2270–3200, h 930)
   ================================================================ */
.amenities {
  position: relative;
  padding: 9rem 0 8rem;
  background: var(--blue);
  overflow: hidden;
}
.amenities .sec-title { color: #fff; }
.arch {
  position: absolute;
  z-index: 0;
  opacity: .9;
  pointer-events: none;
}
.arch-l { left: 0; top: 19rem; width: 38rem; }
.amenities .frame, .connected .frame { z-index: 1; }

.amen-grid {
  display: grid;
  grid-template-columns: 30.5rem 43.4rem 31rem;
  grid-template-rows: 26rem 25rem;
  gap: 1rem;
  justify-content: center;
  margin-top: 5.5rem;
}
.amen-panel {
  grid-row: 1 / 3;
  background: var(--grey-panel);
  padding: 4.9rem 4.6rem;
  transition: opacity .24s ease, transform .32s cubic-bezier(.22,.61,.36,1);
}
.amen-panel h3 {
  font-family: var(--oswald);
  font-weight: 600;
  font-size: 3.4rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blue);
}
.amen-panel p {
  font-size: 1.6rem;
  line-height: 1.36;
  margin-top: 1.8rem;
}
.amen-mid {
  grid-row: 1 / 3;
  display: grid;
  grid-template-rows: 26rem 25rem;
  gap: 1rem;
}
.amen-img {
  overflow: hidden;
  transition: opacity .24s ease, transform .36s cubic-bezier(.22,.61,.36,1);
}
.amen-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1), filter .36s ease;
}
.amen-img:hover img { transform: scale(1.05); }
.amen-tall { grid-row: 1 / 3; }

.amen-tabs {
  display: flex;
  justify-content: center;
  gap: 6rem;
  margin-top: 5rem;
}
.amen-tab {
  position: relative;
  font-family: var(--oswald);
  font-weight: 500;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  padding-bottom: 1rem;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .3s, transform .3s cubic-bezier(.22,.61,.36,1);
}
.amen-tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0.3rem;
  background: #fff;
  border-radius: 0.2rem;
  transform: scaleX(0);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.amen-tab:hover { color: rgba(255,255,255,.8); }
.amen-tab.active { color: #fff; font-weight: 600; transform: translateY(-0.2rem); }
.amen-tab.active::after { transform: scaleX(1); }
.amen-tab:focus-visible {
  outline: 0.15rem solid rgba(255,255,255,.7);
  outline-offset: 0.6rem;
  border-radius: 0.2rem;
}

/* content swap: animate children so the fixed grid never blinks or jumps */
.amen-grid.leaving .amen-panel,
.amen-grid.leaving .amen-img {
  opacity: 0;
  transform: translateY(0.8rem);
}
.amen-grid.leaving .amen-img img { filter: saturate(.9); }
.amen-grid.entering .amen-panel {
  animation: amenFadeIn .46s cubic-bezier(.22,.61,.36,1) both;
}
.amen-grid.entering .amen-mid .amen-img:first-child {
  animation: amenFadeIn .46s cubic-bezier(.22,.61,.36,1) .04s both;
}
.amen-grid.entering .amen-mid .amen-img:last-child {
  animation: amenFadeIn .46s cubic-bezier(.22,.61,.36,1) .09s both;
}
.amen-grid.entering .amen-tall {
  animation: amenFadeIn .46s cubic-bezier(.22,.61,.36,1) .14s both;
}
.amen-grid.entering .amen-img img {
  animation: amenImageIn .7s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes amenFadeIn {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes amenImageIn {
  from { transform: scale(1.025); filter: saturate(.9); }
  to { transform: scale(1); filter: saturate(1); }
}

@keyframes hintSlide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(0.8rem); }
}

/* ================================================================
   4. ABOUT ROVE HOTELS  (design y 3200–3765, h 565)
   ================================================================ */
.about {
  position: relative;
  height: 56.5rem;
  overflow: hidden;
}
.about-bg { position: absolute; inset: -10% 0; }
.about-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: left center;
}
.about::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(270deg, rgba(235,244,250,.72) 0%, rgba(235,244,250,.35) 38%, rgba(235,244,250,0) 55%);
}
.about .frame { position: relative; z-index: 2; }
.about-content {
  position: absolute;
  left: 100.7rem; top: 5.9rem;
  width: 62rem;
}
.about-content p {
  font-size: 1.8rem;
  line-height: 1.55;
  margin-top: 2.6rem;
}
.about-content p + p { margin-top: 2rem; }

/* ================================================================
   5. APARTMENTS  (design y 3765–4770, h 1005)
   ================================================================ */
.apartments {
  position: relative;
  background: var(--blue);
  padding: 14.5rem 0 6rem;
  color: #fff;
}
.apt-title {
  font-family: var(--oswald);
  font-weight: 600;
  font-size: 4.4rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
}
.apt-tabs {
  display: flex;
  justify-content: center;
  gap: 3.6rem;
  margin-top: 5.6rem;
}
.apt-tab {
  font-family: var(--oswald);
  font-weight: 600;
  font-size: 3.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 1rem;
  border-bottom: 0.4rem solid transparent;
  transition: color .3s, border-color .3s;
}
.apt-tab:hover { color: var(--gold); }
.apt-tab.active { color: var(--gold); border-bottom-color: var(--gold); }

.apt-sizes {
  text-align: center;
  font-size: 1.9rem;
  margin-top: 3.4rem;
}
.apt-sizes strong { font-weight: 700; }
.apt-sizes em { font-style: normal; font-weight: 700; color: var(--gold); }

.carousel {
  position: relative;
  max-width: 137.6rem;
  margin: 4.4rem auto 0;
}
.car-viewport { overflow: hidden; }
.car-track {
  display: flex;
  gap: 1.6rem;
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.car-slide {
  flex: 0 0 44.8rem;
  height: 48rem;
  overflow: hidden;
}
.car-slide img { width: 100%; height: 100%; object-fit: cover; }
.car-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 5rem; height: 5rem;
  color: #fff;
  opacity: .85;
  transition: opacity .3s, transform .3s;
}
.car-btn:hover { opacity: 1; }
.car-btn.prev { left: -6.4rem; }
.car-btn.next { right: -6.4rem; }
.car-btn.prev:hover { transform: translateY(-50%) translateX(-0.4rem); }
.car-btn.next:hover { transform: translateY(-50%) translateX(0.4rem); }
.car-btn svg { width: 100%; height: 100%; }

/* ================================================================
   6. WHY INVEST  (design y 4770–5710, h 940)
   ================================================================ */
.invest {
  position: relative;
  height: 94rem;
  background: #fff;
  overflow: hidden;
}
.invest-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.invest-panel img {
  position: absolute;
  top: -8%; height: 116%;
  object-fit: cover;
}
/* slanted seams (measured from design):
   left seam  top x640 → bottom x760
   right seam top x1265 → bottom x1155  (panels butt together, no gap) */
.ip-left  { clip-path: polygon(0 0, 33.5% 0, 39.8% 100%, 0 100%); }
.ip-mid   { clip-path: polygon(33.3% 0, 66.1% 0, 60.3% 100%, 39.6% 100%); }
.ip-right { clip-path: polygon(65.9% 0, 100% 0, 100% 100%, 60.1% 100%); }
/* map each photo onto its own panel region, not the full width */
.ip-left  img { left: 0;     width: 40%; }
.ip-mid   img { left: 33%;   width: 33.5%; }
.ip-right img { left: 60%;   width: 40%; }

.invest-title {
  position: absolute;
  left: 0; right: 0;
  top: 6.8rem;
  font-family: var(--oswald);
  font-weight: 600;
  font-size: 6.4rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  text-shadow: 0 0.2rem 2rem rgba(0,0,0,.25);
  z-index: 2;
}
.invest-cap {
  position: absolute;
  top: 19rem;
  width: 44rem;
  text-align: center;
  z-index: 2;
}
.ip-mid .invest-cap { top: 21.5rem; }
.ip-left  .invest-cap { left: 16rem; }
.ip-mid   .invest-cap { left: 50%; transform: translateX(-50%); width: 52rem; }
.ip-right .invest-cap { right: 13rem; }
.invest-cap p {
  font-size: 1.8rem;
  line-height: 1.55;
  font-weight: 500;
  margin-top: 1.8rem;
}
.invest-cap.dark { color: var(--ink); }
.invest-cap.dark .invest-icon { color: var(--blue); border-color: var(--blue); }
.ip-left .invest-cap p {
  color: #fff;
  text-shadow: 0 0.1rem 1.2rem rgba(0,0,0,.35);
}
.invest-cap.light { color: #fff; }
.invest-cap.light .invest-icon { color: #fff; border-color: #fff; }
.invest-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6.6rem; height: 6.6rem;
  border: 0.15rem solid;
  border-radius: 50%;
}
.invest-icon svg { width: 3.4rem; height: 3.4rem; }

/* ================================================================
   7. LIVE CONNECTED  (design y 5710–6805, h 1095)
   ================================================================ */
.connected {
  position: relative;
  padding: 4.8rem 0 10rem;
  background: #fff;
  overflow: hidden;
}
.map {
  max-width: 137.6rem;
  margin: 5.4rem auto 0;
  overflow: hidden;
}
.map img { width: 100%; }

/* ================================================================
   8. DOWNLOAD BROCHURE  (design y 6805–7090, h 285)
   ================================================================ */
.brochure { background: var(--gold); }
.brochure-link {
  display: block;
  text-align: center;
  padding: 7.6rem 2rem 7rem;
  transition: background .3s;
}
.brochure-link:hover { background: #ffb51e; }
.brochure h2 {
  font-family: var(--oswald);
  font-weight: 600;
  font-size: 6.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.brochure p {
  font-family: var(--oswald);
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 2.4rem;
}

/* ================================================================
   9. LEO DEVELOPMENTS  (design y 7090–8080, h 990)
   ================================================================ */
.leo {
  position: relative;
  height: 99rem;
  overflow: hidden;
  background: linear-gradient(180deg, #75b4f7, #a9cdf6);
}
.leo-bg {
  position: absolute;
  top: -17rem; left: 0; right: 0;
  height: 156rem;                       /* image placed y6919–8479 in design */
}
.leo-bg img { width: 100%; height: 100%; object-fit: cover; }
.leo .frame { z-index: 1; }
.leo-head {
  position: absolute;
  left: 24.7rem; top: 7.4rem;
  display: flex;
  align-items: flex-start;
  gap: 2.4rem;
}
.leo-head img { width: 11.6rem; }
.leo-head h2 {
  font-family: var(--oswald);
  font-weight: 600;
  font-size: 6.4rem;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blue);
}
.leo-copy {
  position: absolute;
  left: 88rem; top: 7.4rem;
  width: 68rem;
}
.leo-copy p {
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--ink);
}
.leo-copy p + p { margin-top: 3.2rem; }

/* ================================================================
   10. FOOTER  (design y 8080–8316, h 236)
   ================================================================ */
.footer {
  background: var(--blue);
  color: #fff;
}
.footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rem;
  padding: 5.4rem 4rem;
}
.f-rove { width: 19.5rem; }
.f-dev { text-align: center; }
.f-dev span { font-size: 1.8rem; }
.f-dev img { width: 7.6rem; margin: 1.2rem auto 0; }
.f-contact { list-style: none; }
.f-contact li {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-size: 1.8rem;
}
.f-contact li + li { margin-top: 1.8rem; }
.f-contact svg { width: 2rem; height: 2rem; flex: none; }
.f-contact a:hover { text-decoration: underline; }
.f-social {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.f-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem; height: 4.4rem;
  transition: opacity .3s;
}
.f-social a:hover { opacity: .75; }
.f-social img { width: 3.6rem; height: 3.6rem; }

/* ================================================================
   RESPONSIVE  (≤900px: fixed type scale + stacked layouts)
   ================================================================ */
@media (max-width: 900px) {
  html { font-size: 8.5px; }

  /* readable type + breathing room on small screens */
  .sec-title { font-size: 4.2rem; line-height: 1.12; padding: 0 2.4rem; }
  .sec-copy { font-size: 1.9rem; line-height: 1.65; padding: 0 2.8rem; max-width: 56rem; }
  .chapter-title { font-size: 4.6rem; }
  .invest-title { font-size: 4.6rem; }
  .brochure h2 { font-size: 4.4rem; padding: 0 2rem; }
  .brochure p { font-size: 1.8rem; padding: 0 2rem; }

  .hero { height: auto; min-height: 100svh; }
  .hero-logo { left: 3rem; top: 3rem; width: 16rem; }
  .hero-title { position: static; padding: 26rem 3rem 0; font-size: 5.6rem; }
  .hero-sub { position: static; padding: 2rem 3rem 0; }
  .hero-ctas { position: static; padding: 3rem 3rem 0; flex-wrap: wrap; }
  .hero-dev { position: static; padding: 4rem 3rem 6rem; }
  .hero-dev img { margin-left: 0; }
  .jv-badge {
    position: static;
    width: auto;
    margin: 0 2.8rem 5rem;
    padding: 4.2rem 2.4rem 4.6rem;
    clip-path: none;
  }
  .jv-badge p { font-size: 2.1rem; }
  .jv-badge .jv-logos { gap: 2.8rem; margin-top: 2.6rem; }
  .jv-badge .jv-emaar { width: 13rem; }
  .jv-badge .jv-dubai { width: 15.5rem; }

  .chapter { height: auto; padding-bottom: 6rem; }
  .chapter-bg { top: 0; height: 100%; }
  .chapter-tint { height: 100%; background: rgba(0,84,139,.72); }
  .chapter::after { display: none; }
  .chapter-title { position: static; padding: 6rem 3rem 0; }
  .chapter-copy { position: static; width: auto; padding: 2.4rem 3rem 0; }
  .pillars-hint {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 4rem 3rem 0;
    color: #fff;
    font-family: var(--oswald);
    font-weight: 500;
    font-size: 1.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .pillars-hint svg {
    width: 2.4rem; height: 2.4rem;
    animation: hintSlide 1.6s ease-in-out infinite;
  }
  .pillars {
    position: static;
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    padding: 2.4rem 3rem 2rem;
    scroll-snap-type: x mandatory;
  }
  .pillar-card {
    position: static;
    flex: 0 0 26rem;
    height: 58rem;
    scroll-snap-align: center;
  }

  /* tabs above the images on mobile */
  .amenities .frame { display: flex; flex-direction: column; }
  .amenities .sec-title { order: 1; }
  .amenities .sec-copy { order: 2; }
  .amenities .amen-tabs { order: 3; margin-top: 4.4rem; }
  .amenities .amen-grid { order: 4; margin-top: 4.4rem; }

  .amen-grid {
    grid-template-columns: minmax(0, 44rem);
    grid-template-rows: auto;
    padding: 0 3rem;
  }
  .amen-panel, .amen-mid, .amen-tall { grid-row: auto; }
  .amen-mid { grid-template-rows: 30rem 22rem; }
  .amen-tall { height: 34rem; }
  .amen-tabs { flex-wrap: wrap; gap: 2.4rem 3.6rem; padding: 0 3rem; justify-content: center; }

  .about { height: auto; }
  .about::before {
    background: linear-gradient(180deg, rgba(235,244,250,.96) 0%, rgba(235,244,250,.9) 70%, rgba(235,244,250,.75) 100%);
  }
  .about-content { position: static; width: auto; padding: 6rem 2.8rem; }
  .about-content p { font-size: 1.9rem; line-height: 1.65; }
  .sec-title.left { text-align: center; padding: 0; }

  .apartments { padding-top: 7rem; }
  .apt-title { font-size: 3.2rem; padding: 0 2rem; }
  .apt-tabs { flex-wrap: wrap; gap: 1.6rem 2.6rem; padding: 0 2rem; }
  .apt-tab { font-size: 2.4rem; }
  .apt-sizes { padding: 0 2.8rem; font-size: 1.8rem; }
  .carousel { max-width: none; padding: 0 6rem; }
  .car-slide { flex: 0 0 100%; }
  .car-btn.prev { left: 0.6rem; }
  .car-btn.next { right: 0.6rem; }

  .invest { height: auto; }
  .invest-panel { position: relative; clip-path: none !important; height: 62rem; }
  .invest-panel img { inset: 0; left: 0 !important; width: 100% !important; height: 100%; }
  .invest-title {
    position: static;
    padding: 5.5rem 2rem;
    background: #fff;
    color: var(--blue);
    text-shadow: none;
  }
  .ip-mid { display: flex; flex-direction: column; }
  /* caption + icon sit in the clean space at the top of each photo */
  .invest-cap, .ip-left .invest-cap, .ip-mid .invest-cap, .ip-right .invest-cap {
    position: absolute; left: 50%; right: auto; top: 5rem; bottom: auto;
    transform: translateX(-50%);
    width: 80%;
  }
  .invest-cap.dark { color: #fff; }
  .invest-cap.dark .invest-icon { color: #fff; border-color: #fff; }
  .invest-panel::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,30,55,.55), rgba(0,30,55,0) 55%);
  }
  .invest-cap { z-index: 2; }

  .arch { display: none; }
  .map { margin-left: 3rem; margin-right: 3rem; }

  .leo { height: auto; background: linear-gradient(180deg, #75b4f7, #c4ddf8); }
  /* skyline becomes a bottom band so copy sits on the clean gradient */
  .leo-bg { top: auto; bottom: 0; height: 42rem; }
  .leo-bg img { object-position: center bottom; }
  .leo-head {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    padding: 6rem 2.8rem 0;
  }
  .leo-head img { width: 9rem; }
  .leo-head h2 { font-size: 4.2rem; }
  .leo-copy { position: static; width: auto; padding: 3rem 2.8rem 46rem; }
  .leo-copy p { font-size: 1.9rem; line-height: 1.65; }

  .footer-row { flex-direction: column; gap: 3.6rem; text-align: center; }
  .f-contact li { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-card { opacity: 1; transform: none; transition: none; }
  .amen-panel,
  .amen-img,
  .amen-img img,
  .amen-tab,
  .pillars-hint svg {
    animation: none !important;
    transition: none !important;
  }
  .amen-grid.leaving .amen-panel,
  .amen-grid.leaving .amen-img {
    opacity: 1;
    transform: none;
  }
  html { scroll-behavior: auto; }
}