/* ================================================================
   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: #1e1e1e;
  --ink-soft: #3c3c3c;   /* brochure band */
  --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: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.4,0,.2,1);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* slide indicators */
.hero-dots {
  position: absolute;
  left: 0; right: 0; bottom: 3.4rem;
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  z-index: 3;
}
.hero-dot {
  width: 1rem; height: 1rem;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  box-shadow: 0 0.1rem 0.6rem rgba(10,20,35,.55);
  transition: background .3s, transform .3s;
}
.hero-dot:hover { background: rgba(255,255,255,.75); }
.hero-dot.is-active { background: #fff; transform: scale(1.15); }
.hero-dot:focus-visible { outline: 0.15rem solid #fff; outline-offset: 0.4rem; }
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,20,35,.74) 0%, rgba(10,20,35,.58) 30%,
                           rgba(10,20,35,.42) 44%, rgba(10,20,35,0) 64%),
    linear-gradient(180deg, rgba(10,20,35,.30) 0%, rgba(10,20,35,0) 26%);
}
.hero-logo {
  position: absolute;
  left: 27.5rem; top: 7.3rem;
  width: 21rem;
}
.hero-title {
  position: absolute;
  left: 27.1rem; top: 23.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: 42.8rem;
  font-size: 2.4rem;
  font-weight: 700;
}
.hero-ctas {
  position: absolute;
  left: 27.1rem; top: 48.8rem;
  display: flex;
  gap: 1.3rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 6.9rem;
  padding: 0 2.5rem;
  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.btn-gold { background: var(--gold); }
.btn:hover { filter: brightness(1.18); transform: translateY(-0.3rem); }
.hero-dev {
  position: absolute;
  left: 27.3rem; top: 61.9rem;
}
.hero-dev span { font-size: 2.6rem; font-weight: 500; }
.hero-dev img { width: 9rem; margin-top: 2.3rem; margin-left: 3.3rem; }

/* "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: 92.8rem;                     /* photo region, ends y1863 in design */
  /* V11 leaves the aerial untinted and only sinks it into the blue band */
  background: linear-gradient(180deg,
    rgba(0,84,139,0) 0%, rgba(0,84,139,0) 53%,
    rgba(0,84,139,1) 67%, rgba(0,84,139,1) 100%);
}
.chapter::after {                       /* sky wash below the blue band */
  content: "";
  position: absolute;
  top: 92.8rem; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #cfebf7 0%, #e8f5fb 42%, #fff 100%);
}
.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: var(--h, 70.6rem);
  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%);
}
.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: 8.9rem; height: 8.9rem;
  border: 0.2rem solid #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.pillar-icon svg { width: 4.1rem; height: 4.1rem; }

/* 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. BUILDING OVERVIEW  (design y 2270–3502, h 1232)
   ================================================================ */
.overview {
  position: relative;
  height: 123.2rem;
  padding-top: 2.4rem;
  background: #fff;
  overflow: hidden;
}
.overview-img {                         /* sits behind the heading, which falls
                                           on the render's empty sky */
  position: absolute;
  left: -5.1rem; top: 4.2rem;
  width: 202.5rem;
}
.overview-img img { width: 100%; height: auto; }
.overview .frame { position: relative; z-index: 1; }
.overview-sub {
  margin-top: 1rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: var(--ink);
}
/* the desktop render carries its own labels, so the list is for assistive
   tech there and only becomes visible in the stacked layout */
.overview-levels {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ================================================================
   4. ROVE HOME HAS IT ALL  (design y 3502–4442, h 930)
   ================================================================ */
.amenities {
  position: relative;
  padding: 0.4rem 0 6.8rem;
  background: #fff;
  overflow: hidden;
}
.amenities .sec-copy { color: var(--ink); max-width: 66rem; margin-top: 4.3rem; font-weight: 700; }
.arch {
  position: absolute;
  z-index: 0;
  opacity: .9;
  pointer-events: none;
}
.arch-l { left: 0; top: 51.2rem; width: 27.1rem; }
.arch-r { right: 0; top: 27.7rem; width: 36.8rem; }
.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: 3.8rem;
}
.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: 4.9rem;
}
.amen-tab {
  position: relative;
  font-family: var(--oswald);
  font-weight: 500;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a8c4d7;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .3s, transform .3s cubic-bezier(.22,.61,.36,1);
}
.amen-tab:hover { color: #6f9cbd; }
.amen-tab.active { color: var(--blue); font-weight: 600; transform: translateY(-0.2rem); }
.amen-tab:focus-visible {
  outline: 0.15rem solid rgba(0,84,139,.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); }
}

/* ================================================================
   5. ABOUT ROVE HOTELS  (design y 4442–5048, h 565)
   ================================================================ */
.about {
  position: relative;
  height: 60.6rem;
  overflow: hidden;
}
.about-bg { position: absolute; inset: 0; }
.about-bg img {                         /* pre-cropped to the band */
  width: 100%; height: 100%;
  object-fit: cover;
}
.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: 4.6rem;
  width: 62rem;
}
.about-content p {
  font-size: 1.8rem;
  line-height: 1.55;
  margin-top: 3.4rem;
}
.about-content p + p { margin-top: 2rem; }

/* ================================================================
   6. APARTMENTS  (design y 5048–5965, h 917)
   ================================================================ */
.apartments {
  position: relative;
  background: var(--blue);
  padding: 5.4rem 0 5.9rem;
  color: #fff;
}
.apartments .sec-copy { margin-top: 1.6rem; }
.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 {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 3.6rem;
  margin-top: 4.6rem;
}
.apt-tabs::after {                      /* full-width hairline (V11) */
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 137.6rem; height: 0.2rem;
  background: rgba(255,255,255,.65);
}
.apt-tab {
  position: relative;
  font-family: var(--oswald);
  font-weight: 600;
  font-size: 3.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 1.1rem;
  transition: color .3s;
}
.apt-tab::after {                       /* gold marker riding the hairline */
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 60%; height: 0.4rem;
  background: var(--gold);
  transform: translateX(-50%) scaleX(0);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.apt-tab:hover { color: var(--gold); }
.apt-tab.active { color: var(--gold); }
.apt-tab.active::after { transform: translateX(-50%) scaleX(1); }

.apt-sizes {
  text-align: center;
  font-size: 1.9rem;
  margin-top: 2rem;
}
.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: 3.2rem 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[disabled] { opacity: .35; cursor: default; }
.car-btn[disabled]:hover { opacity: .35; transform: translateY(-50%); }
.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%; }

/* ================================================================
   7. WHY INVEST  (design y 5965–6900, h 935)
   ================================================================ */
.invest {
  position: relative;
  height: 93.5rem;
  background: #fff;
  overflow: hidden;
}
.invest-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.invest-panel img {                     /* each photo is pre-cropped to the slice
                                           its panel reveals, so it just fills it */
  position: absolute;
  top: 0; height: 100%;
  object-fit: cover;
}
/* slanted seams, taken from the V11 vector panels:
   left seam  top x637 → bottom x754
   right seam top x1283 → bottom x1166  (panels butt together, no gap) */
.ip-left  { clip-path: polygon(0 0, 33.18% 0, 39.27% 100%, 0 100%); }
.ip-mid   { clip-path: polygon(33.18% 0, 66.82% 0, 60.73% 100%, 39.27% 100%); }
.ip-right { clip-path: polygon(66.82% 0, 100% 0, 100% 100%, 60.73% 100%); }
/* each photo spans exactly its panel's bounding box (% of the 1920 band) */
.ip-left  img { left:      0; width: 39.27%; }
.ip-mid   img { left: 33.18%; width: 33.65%; }
.ip-right img { left: 60.73%; width: 39.27%; }

.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: 8.1rem;
  width: 44rem;
  text-align: center;
  color: var(--ink);
  z-index: 2;
}
.ip-mid .invest-cap { top: 15.9rem; }
.ip-left  .invest-cap { left: 10.2rem; }
.ip-mid   .invest-cap { left: 50%; transform: translateX(-50%); width: 52rem; }
.ip-right .invest-cap { right: 9.9rem; }
.invest-cap p {
  font-size: 2.4rem;
  line-height: 1.27;
  font-weight: 400;
  margin-top: 1.7rem;
}
.invest-cap p b { font-weight: 700; }
.invest-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7.6rem; height: 7.6rem;
  color: var(--blue);
  border: 0.24rem solid currentColor;
  border-radius: 50%;
}
.invest-icon svg { width: 100%; height: 100%; }

/* ================================================================
   8. LIVE CONNECTED  (design y 6900–7999, h 1099)
   ================================================================ */
.connected {
  position: relative;
  padding: 5.3rem 0 9.8rem;
  background: #fff;
  overflow: hidden;
}
.connected .sec-copy { margin-top: 2rem; font-weight: 700; }
.map {
  max-width: 137.6rem;
  margin: 2.9rem auto 0;
  overflow: hidden;
}
.map img { width: 100%; }

/* ================================================================
   9. DOWNLOAD BROCHURE  (design y 7999–8292, h 293)
   ================================================================ */
.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-soft);
}
.brochure p {
  font-family: var(--oswald);
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2.4rem;
}

/* ================================================================
   10. LEO DEVELOPMENTS  (design y 8292–9241, h 949)
   ================================================================ */
.leo {
  position: relative;
  height: 94.9rem;
  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: 28.1rem; top: 7.4rem;
  display: flex;
  align-items: flex-start;
  gap: 3rem;
}
.leo-head img { width: 7.4rem; margin-top: 0.4rem; }
.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: 81rem; top: 7.4rem;
  width: 73rem;
}
.leo-copy p {
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--ink);
}
.leo-copy p + p { margin-top: 3.2rem; }

/* ================================================================
   11. FOOTER  (design y 9241–9512, h 271)
   ================================================================ */
.footer {
  background: var(--blue);
  color: #fff;
}
.footer-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8.9rem;
  padding: 5.3rem 4rem 4.4rem;
}
.f-rove { width: 19.5rem; }
.f-dev { text-align: center; margin-top: -0.9rem; }
.f-dev span { font-size: 1.8rem; font-weight: 700; }
.f-dev img { width: 7rem; margin: 2rem auto 0; }
.f-contact { list-style: none; margin-top: -0.5rem; }
.f-contact li {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-size: 2rem;
}
.f-contact li + li { margin-top: 3.2rem; }
.f-contact svg { width: 2rem; height: 2rem; flex: none; }
.f-contact a:hover { text-decoration: underline; }
.f-social {
  display: flex;
  align-items: center;
  gap: 3.6rem;
  margin-left: -5.7rem;                 /* V11 tucks these in by the contacts */
}
.f-social-label {
  font-size: 2rem;
  letter-spacing: 0.02em;
}
.f-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem; height: 3.2rem;
  transition: opacity .3s;
}
.f-social a:hover { opacity: .75; }
.f-social img { width: 3.2rem; height: 3.2rem; }

/* ================================================================
   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; }

  /* The hero renders are 2:1 landscape. Behind a full-height portrait hero
     `cover` threw away ~78% of each one, so on narrow screens the carousel
     becomes a band at its own aspect and the copy sits on brand blue below it. */
  .hero { height: auto; min-height: 0; background: #0a1a2b; }
  .hero .frame { position: static; display: flex; flex-direction: column; }
  .hero-bg {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 4 / 3;
  }
  .hero-shade {
    inset: 0 0 auto 0;
    aspect-ratio: 4 / 3;
    background: linear-gradient(180deg, rgba(10,20,35,.7) 0%,
                                        rgba(10,20,35,.22) 32%,
                                        rgba(10,20,35,0) 58%);
  }
  .hero-logo { left: 3rem; top: 3rem; width: 16rem; }
  .hero-dots { position: static; order: -1; margin: -4.4rem 0 0; }
  .hero-title { position: static; padding: 4.6rem 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; }

  /* Building overview: the desktop composite's baked-in labels would be a few
     pixels tall here, so the clean render is paired with the real level list. */
  .overview {
    height: auto;
    padding: 6rem 0 7rem;
    display: flex;
    flex-direction: column;   /* the render is markup-first so it can sit behind
                                 the heading on desktop; stacked, it follows it */
  }
  .overview .frame { order: 1; }
  .overview-img {
    order: 2;
    position: relative;
    left: auto; top: auto;
    width: auto;
    display: block;
    margin: 3.4rem 0 0;
  }
  .overview-levels { order: 3; }
  .overview-sub { margin-top: 2.2rem; }
  .overview-levels {
    position: static;
    width: auto; height: auto;
    margin: 3.6rem 3rem 0;
    padding: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    list-style: none;
  }
  .overview-levels li {
    padding: 1.6rem 2rem;
    background: var(--grey-panel);
    font-size: 1.8rem;
    line-height: 1.45;
    color: var(--ink);
  }
  .overview-levels li + li { margin-top: 0.8rem; }
  .overview-levels b { display: block; color: var(--blue); }

  .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; }
  .amenities { padding: 6rem 0 7rem; }
  .amenities .sec-copy { margin-top: 2.6rem; }
  .amen-grid { margin-top: 4.4rem; }

  .about { height: auto; }
  .about-bg { inset: 0; }
  .about-bg img {
    position: absolute; inset: 0;
    left: 0; top: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: left center;
  }
  .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-tabs::after { width: calc(100% - 4rem); }
  .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; top: 0 !important;
    width: 100% !important; height: 100%;
    object-fit: cover;
  }
  .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; }

  /* the desktop footer is a top-aligned row with tuned nudges; stacked, it
     centres again and those nudges have to be undone */
  .footer-row {
    flex-direction: column;
    align-items: center;
    gap: 3.6rem;
    padding: 5rem 3rem;
    text-align: center;
  }
  .f-dev { margin-top: 0; }
  /* centre the list as a block but keep the rows left-aligned, so the three
     icons line up instead of stepping with each line's width */
  .f-contact { margin-top: 0; text-align: left; }
  .f-contact li { justify-content: flex-start; }
  .f-contact li + li { margin-top: 2.4rem; }
  .f-social { margin-left: 0; gap: 2.8rem; }
}

@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; }
}