/* ==========================================================================
   PARK TITAN — Landing page stylesheet
   Plain CSS. No frameworks, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --gold: #D98218;
  --gold-soft: #F2AF5C;
  --ink: #0D0D0D;
  --ash: #6B6B6B;
  --haze: #E9E7E4;
  --ivory: #F2F2F2;
  --ivory-alt: #E9E9E9;
  --noir: #673190;
  --line: #DCDCDC;
  --white: #ffffff;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", Helvetica, Arial, sans-serif;

  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.06);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; margin: 0; }
p { margin: 0; }

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

.icon { width: 24px; height: 24px; display: inline-block; flex: none; }
.icon svg { width: 100%; height: 100%; display: block; }

/* --------------------------------------------------------------------------
   3. Typography scale
   -------------------------------------------------------------------------- */
.t-hero {
  font-family: var(--font-display); font-weight: 500;
  font-size: 38px; line-height: 1.05; letter-spacing: -0.02em;
  max-width: 700px; margin-inline: auto;
}
.t-section {
  font-family: var(--font-display); font-weight: 500;
  font-size: 34px; line-height: 1.15;
}
.t-sub {
  font-family: var(--font-display); font-weight: 500;
  font-size: 28px; line-height: 1.2;
}
.t-body {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.8;
  max-width: 700px; margin-inline: auto;
}
.t-body-sm { font-family: var(--font-sans); font-size: 16px; line-height: 1.7; }
.t-label {
  font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   4. Layout helpers
   -------------------------------------------------------------------------- */
.section { width: 100%; padding-block: 40px; }
.section--ivory { background: var(--ivory); }
.section--noir  { background: var(--noir); }
.section--alt   { background: var(--ivory-alt); }
.cfg--alt { background: var(--ivory-alt); }
#showcase .showcase__nav { background: var(--ivory); }
#showcase .showcase__detail { background: var(--ivory-alt); }
#showcase .cta { background: var(--ivory); }
#testimonials .t-section, #testimonials .testi__foot .t-sub { color: var(--ivory); }
#testimonials .muted { color: rgba(242,242,242,0.7); }
#testimonials .eyebrow { color: var(--gold-soft); }
#testimonials .testi__foot em { color: var(--gold-soft) !important; }
#testimonials .btn-ghost { border-color: var(--gold-soft); color: var(--gold-soft); }
#testimonials .btn-ghost:hover { background: var(--gold-soft); color: var(--noir); }

.wrap { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: 24px; }
.wrap--narrow { max-width: 900px; }
.center { text-align: center; }

.eyebrow { color: var(--gold); }
.muted { color: var(--ash); }
.rule { display: block; height: 1px; width: 160px; background: rgba(199, 154, 69, 0.5); margin: 24px auto 0; }

/* --------------------------------------------------------------------------
   5. Section 1 — Before / after comparison slider
   -------------------------------------------------------------------------- */
.compare-intro { max-width: 700px; margin: 0 auto 64px; padding-inline: 24px; text-align: center; }
.compare-intro .t-hero { color: var(--ivory); margin-top: 24px; }
.compare-intro .t-body { color: rgba(250, 248, 244, 0.7); margin-top: 24px; }

.compare {
  position: relative; width: 100%; overflow: hidden;
  background: var(--ink); user-select: none; touch-action: pan-y;
}
.compare__base { position: relative; }
.compare__img { width: 100%; height: 560px; object-fit: cover; }
.compare__veil-after {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(13,13,13,.85), rgba(103,49,144,.3) 50%, rgba(103,49,144,.8));
}
.compare__before { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 50% 0 0); }
.compare__before .compare__img { height: 100%; filter: grayscale(1); }
.compare__veil-before {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(238,234,227,.95), rgba(238,234,227,.55) 50%, rgba(238,234,227,.4));
}

.compare__text { position: absolute; inset: 0; display: flex; pointer-events: none; --pos: 50; }
.compare__panel {
  display: flex; flex-direction: column; align-items: center;
  gap: calc(40px * var(--k)); padding: 48px 16px 0; overflow: hidden;
  transition: none;
}
.compare__panel--before { width: calc(var(--pos) * 1%); --k: clamp(0.45, calc(var(--pos) / 50), 1.35); }
.compare__panel--after  { width: calc((100 - var(--pos)) * 1%); --k: clamp(0.45, calc((100 - var(--pos)) / 50), 1.35); }
.compare__panel h3 { font-family: var(--font-sans); font-size: calc(20px * var(--k)); font-weight: 600; letter-spacing: calc(0.22em * var(--k)); white-space: nowrap; }
.compare__panel p { margin-top: calc(12px * var(--k)); font-size: calc(12px * var(--k)); letter-spacing: 0.08em; }
.compare__panel--before h3 { color: var(--ink); }
.compare__panel--before p  { color: var(--ash); }
.compare__panel--after h3  { color: var(--gold); }
.compare__panel--after p   { color: rgba(226, 198, 139, 0.8); }

.stats { display: flex; align-items: flex-start; justify-content: center; gap: calc(24px * var(--k, 1)); }
.stat { width: calc(80px * var(--k, 1)); display: flex; flex-direction: column; align-items: center; gap: calc(12px * var(--k, 1)); text-align: center; }
.stat .icon { width: calc(28px * var(--k, 1)); height: calc(28px * var(--k, 1)); }
.stat span { white-space: pre-line; font-size: calc(10px * var(--k, 1)); line-height: 1.25; letter-spacing: 0.14em; }
.stats--muted .icon, .stats--muted span { color: var(--ash); }
.stats--gold .icon { color: var(--gold); }
.stats--gold span  { color: var(--gold-soft); }

.compare__handle { position: absolute; top: 0; bottom: 0; z-index: 10; width: 1px; background: rgba(226, 198, 139, 0.7); left: 50%; }
.compare__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  height: 48px; width: 48px; border-radius: 999px; cursor: ew-resize;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(226, 198, 139, 0.7); background: rgba(31, 31, 31, 0.6);
  backdrop-filter: blur(4px); color: var(--gold-soft);
}
.compare__grip .icon { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   6. Section 2 — Academies carousel (page-flip notebook)
   -------------------------------------------------------------------------- */
.carousel { position: relative; width: 100%; }
.carousel__stage { perspective: 1600px; }
.carousel__grid { display: grid; grid-template-columns: 1fr; gap: 0; }

.acard { background: var(--white); overflow: hidden; transform-style: preserve-3d; backface-visibility: hidden; }
.acard__img { width: 100%; height: 280px; object-fit: cover; }
/* min-height, never height. The body centres its children, so a fixed height
   makes over-long content overflow BOTH ends - and the top end sits on top of
   .acard__img. That is what happened on narrow phones, where the benefits grid
   is 2 columns and the name wraps to two lines. min-height keeps the roomy
   look on desktop, where the content fits, and lets the card grow on mobile. */
.acard__body { min-height: 168px; padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.acard__head { display: flex; align-items: center; gap: 12px; }
.acard__logo { height: 75px; width: 75px; flex: none; object-fit: contain; }
.acard__name { font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 1.35;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); }
.acard__lines { margin-top: 24px; max-width: 520px; color: var(--ash); font-size: 16px; line-height: 1.7; }
.acard__lines span { display: block; }
.acard--full .acard__body { min-height: 300px; }
.acard__rule { display: block; height: 1px; width: 56px; background: var(--gold); margin-top: 20px; }
.acard--full .acard__lines { margin-top: 16px; }
.acard__benefits { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.acard__benefits li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 8px 12px; }
.acard__benefits svg { height: 20px; width: 20px; color: var(--gold); }
.acard__benefits span { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); }
.acard__cta { margin-top: 24px; align-self: flex-start; display: inline-flex; align-items: center; gap: 12px;
  background: var(--gold); color: #fff; border: 0; padding: 12px 24px; cursor: pointer; }
.acard__cta svg { height: 16px; width: 16px; }

.nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  height: 44px; width: 44px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(199, 154, 69, 0.4); background: rgba(255, 255, 255, 0.9);
  color: var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); transition: background 200ms ease;
}
.nav-btn:hover { background: var(--white); }
.nav-btn--prev { left: 16px; }
.nav-btn--next { right: 16px; }
.nav-btn .icon { width: 20px; height: 20px; }

.dots { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.dot { height: 8px; width: 8px; border-radius: 999px; background: rgba(111, 106, 99, 0.3); transition: all 300ms ease; }
.dot.is-active { width: 24px; background: var(--gold); }

@keyframes page-flip-out { from { transform: rotateY(0); opacity: 1; } to { transform: rotateY(-92deg); opacity: .15; } }
@keyframes page-flip-in  { from { transform: rotateY(92deg); opacity: .15; } to { transform: rotateY(0); opacity: 1; } }
@keyframes page-flip-out-right { from { transform: rotateY(0); opacity: 1; } to { transform: rotateY(92deg); opacity: .15; } }
@keyframes page-flip-in-right  { from { transform: rotateY(-92deg); opacity: .15; } to { transform: rotateY(0); opacity: 1; } }

.flip-out       { animation: page-flip-out .7s cubic-bezier(.55,0,.85,.35) both; transform-origin: left center; }
.flip-in        { animation: page-flip-in .85s cubic-bezier(.2,.7,.3,1) both;  transform-origin: left center; }
.flip-out-right { animation: page-flip-out-right .7s cubic-bezier(.55,0,.85,.35) both; transform-origin: right center; }
.flip-in-right  { animation: page-flip-in-right .85s cubic-bezier(.2,.7,.3,1) both;  transform-origin: right center; }

/* --------------------------------------------------------------------------
   7. Section 3 — Academies showcase (nav + lifestyle image + detail)
   -------------------------------------------------------------------------- */
.showcase__split { margin-top: 56px; display: grid; grid-template-columns: 1fr; width: 100%; }

.showcase__nav { background: var(--ivory-alt); padding: 32px 24px; display: flex; flex-direction: column; justify-content: center; }
.showcase__navbtn {
  display: flex; align-items: center; gap: 20px; height: 104px; text-align: left;
  border-bottom: 1px solid var(--line); color: var(--ink); transition: color 500ms ease;
}
.showcase__navbtn:hover { color: var(--gold); }
.showcase__navbtn.is-active { color: var(--gold); }
.showcase__ring {
  height: 75px; width: 75px; flex: none; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: transparent; transition: all 500ms ease;
}
.showcase__navbtn.is-active .showcase__ring { border-color: var(--gold); background: rgba(199, 154, 69, 0.15); }
.showcase__ring img { height: 52px; width: 52px; object-fit: contain; }
.showcase__navbtn .label { flex: 1; font-size: 16px; }
.showcase__navbtn .icon { width: 16px; height: 16px; opacity: 0; transform: translateX(-8px); transition: all 500ms ease; }
.showcase__navbtn.is-active .icon { opacity: 1; transform: translateX(0); }

.showcase__media { position: relative; width: 100%; height: 360px; overflow: hidden; }
.showcase__media img {
  position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover;
  opacity: 0; transition: opacity 500ms ease-out;
}
.showcase__media img.is-active { opacity: 1; }
.showcase__pager { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.showcase__pager .dot:not(.is-active) { background: rgba(255, 255, 255, 0.6); }

.showcase__detail {
  display: grid; grid-template-columns: 1fr; align-items: center; gap: 40px;
  width: 100%; padding: 56px 24px; border-top: 1px solid var(--line); background: var(--ivory);
}
.showcase__detail.is-fading { animation: fade-in 500ms ease both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.showcase__logo { height: 75px; width: 75px; object-fit: contain; }
.showcase__detail h3 { margin-top: 20px; color: var(--ink); }
.showcase__hair { display: block; margin-top: 20px; height: 1px; width: 56px; background: var(--gold); }
.showcase__detail .desc { margin-top: 20px; max-width: 520px; color: var(--ash); }

.btn-solid {
  margin-top: 32px; display: inline-flex; align-items: center; gap: 12px;
  background: var(--gold); color: var(--white); padding: 16px 28px; transition: opacity 500ms ease;
}
.btn-solid:hover { opacity: 0.9; }
.btn-solid .icon { width: 16px; height: 16px; }

.benefits { display: grid; grid-template-columns: 1fr; }
.benefits li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 0; }
.benefits .icon { width: 24px; height: 24px; color: var(--gold); }
.benefits span { font-size: 12px; color: var(--ink); }

.cta {
  width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; background: var(--ivory-alt); padding: 48px 24px; text-align: center;
}
.cta em { display: block; font-style: italic; color: var(--gold); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--gold);
  color: var(--gold); padding: 16px 28px; transition: background 500ms ease, color 500ms ease;
}
.btn-ghost:hover { background: var(--gold); color: var(--white); }
.btn-ghost .icon { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   8. Section 4 — Life designed for every moment
   -------------------------------------------------------------------------- */
.moments { background: var(--ivory); padding-block: 56px; }
.moments__grid { margin-top: 56px; display: grid; grid-template-columns: 1fr; gap: 20px; }
.moments__grid + .moments__grid { margin-top: 20px; }

.moment {
  position: relative; height: 320px; overflow: hidden; border-radius: 20px;
  opacity: 0; transform: translateY(24px); transition: opacity 700ms ease-out, transform 700ms ease-out;
}
.is-shown .moment { opacity: 1; transform: none; }
.moment img {
  position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover;
  transition: transform 1000ms ease-out;
}
.moment:hover img { transform: scale(1.05); }
.moment__veil {
  position: absolute; inset: 0; transition: background 700ms ease;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.4) 55%, rgba(0,0,0,.25));
}
.moment:hover .moment__veil { background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.55) 55%, rgba(0,0,0,.25)); }
.moment__tag { position: absolute; top: 28px; left: 28px; display: flex; align-items: center; gap: 12px; }
.moment__tag .ring {
  height: 40px; width: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(199, 154, 69, 0.7); color: var(--gold);
}
.moment__tag .ring .icon { width: 20px; height: 20px; }
.moment__tag .t-label { font-size: 12px; color: var(--white); }
.moment__body {
  position: absolute; left: 28px; right: 28px; bottom: 28px;
  transition: transform 700ms ease-out;
}
.moment:hover .moment__body { transform: translateY(-10px); }
.moment__body h3 { font-size: 30px; line-height: 1.15; color: var(--white); }
.moment__body h3 span { display: block; }
.moment__body p { margin-top: 16px; max-width: 320px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.75); }
.moment__link { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--white); }
.moment__link .icon { width: 16px; height: 16px; }


/* --------------------------------------------------------------------------
   9. Section 5 — Experience life at Park Titan (video + amenities)
   -------------------------------------------------------------------------- */
.video__title {
  margin-top: 16px; font-size: 52px; line-height: 1.05;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink);
}
.video__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--noir);
  opacity: 0; transform: translateY(18px); transition: opacity 1000ms ease-out, transform 1000ms ease-out;
}
.video__frame iframe { position: absolute; inset: 0; height: 100%; width: 100%; border: 0; }
.video__shell { margin: 48px auto 0; width: 100%; max-width: 1400px; padding-inline: 0; }

.amenities { margin-top: 64px; }
.tagline-row { display: flex; align-items: center; justify-content: center; gap: 24px; }
.tagline-row .hair { display: none; height: 1px; flex: 1; max-width: 220px; }
.tagline-row .hair--l { background: linear-gradient(to right, transparent, rgba(199,154,69,.5)); }
.tagline-row .hair--r { background: linear-gradient(to left, transparent, rgba(199,154,69,.5)); }
.tagline { text-align: center; font-family: var(--font-display); font-size: 28px; line-height: 1.35; color: var(--ink); }
.tagline i { font-style: italic; color: var(--gold); }

.amenities__cols { margin-top: 48px; display: grid; grid-template-columns: 1fr; }
.amenities__col { padding: 32px 0; }
.amenities__col h3 {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold);
  opacity: 0; transform: translateY(18px); transition: opacity 700ms ease-out, transform 700ms ease-out;
}
.amenities__col h3 .icon { width: 24px; height: 24px; }
.amenities__col ul { margin-top: 24px; }
.amenities__col li {
  display: flex; align-items: flex-start; gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(18px); transition: opacity 700ms ease-out, transform 700ms ease-out;
}
.bullet { margin-top: 9px; height: 9px; width: 9px; flex: none; border-radius: 999px; background: var(--gold); }
.amenities__col li span:last-child { font-size: 16px; line-height: 1.6; color: var(--ink); }

.is-revealed .video__frame,
.is-revealed .amenities__col h3,
.is-revealed .amenities__col li { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .compare__img { height: 640px; }
  .compare__panel { gap: calc(48px * var(--k)); padding-top: 64px; }
  .compare__panel h3 { font-size: calc(24px * var(--k)); }
  .compare__panel p { font-size: calc(14px * var(--k)); }
  .stats { gap: calc(48px * var(--k, 1)); }
  .stat { width: calc(96px * var(--k, 1)); }
  .stat span { font-size: calc(11px * var(--k, 1)); }

  .carousel__grid { grid-template-columns: 1fr 1fr; }
  .acard__img { height: 380px; }
  .acard__body { min-height: 228px; padding: 32px; }
  .acard--full .acard__body { min-height: 340px; }
  .acard__benefits { grid-template-columns: repeat(4, 1fr); }
  .acard__benefits li + li { border-left: 1px solid var(--line); }
  .acard__name { font-size: 16px; }

  .showcase__media { height: 480px; }
  .benefits { grid-template-columns: 1fr 1fr; }
  .benefits li { align-items: center; text-align: center; border-left: 1px solid var(--line); padding: 8px 24px; }

  .tagline-row .hair { display: block; }
}

@media (min-width: 768px) {
  .section { padding-block: 56px; }
  .t-hero { font-size: 56px; }
  .t-section { font-size: 44px; }
  .t-sub { font-size: 34px; }
  .t-body { font-size: 17px; }

  .acard__img { height: 460px; }
  .acard__body { min-height: 276px; padding: 40px; }
  .acard--full .acard__body { min-height: 380px; }

  .moments__grid--three { grid-template-columns: repeat(3, 1fr); }
  .moments__grid--two { grid-template-columns: repeat(2, 1fr); }
  .moment { height: 420px; }
  .moment__body h3 { font-size: 34px; }

  .video__title { font-size: 76px; }
  .video__shell { padding-inline: 24px; }
  .tagline { font-size: 34px; }

  .amenities__cols { grid-template-columns: repeat(3, 1fr); }
  .amenities__col { padding: 0 40px; }
  .amenities__col + .amenities__col { border-left: 1px solid var(--line); }

  .cta { flex-direction: row; gap: 48px; }
}

@media (min-width: 1024px) {
  .section { padding-block: 72px; }
  .t-hero { font-size: 72px; }
  .t-section { font-size: 56px; }
  .t-sub { font-size: 40px; }
  .t-body { font-size: 18px; }

  .showcase__split { grid-template-columns: 380px 1fr; }
  .showcase__nav { padding: 0 48px; }
  .showcase__media { height: 620px; }
  .showcase__detail { grid-template-columns: 1.1fr 1.4fr; gap: 64px; padding-inline: 48px; }
  .benefits { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1280px) {
  .showcase__split { grid-template-columns: 440px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.tagline-row .leaf { width:18px; height:18px; color: var(--gold); flex: none; }

/* --------------------------------------------------------------------------
   9. Testimonials
   -------------------------------------------------------------------------- */
.testi__grid {
  display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 56px;
}
.testi__card {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--noir); display: block; padding: 0; text-align: left;
}
.testi__card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms ease;
}
.testi__card:hover img { transform: scale(1.02); }
.testi__card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 32%, rgba(0,0,0,0) 62%);
}
.testi__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.75);
  background: rgba(255,255,255,.12); backdrop-filter: blur(2px);
  display: grid; place-items: center; z-index: 2;
  transition: background 400ms ease, border-color 400ms ease, transform 400ms ease;
}
.testi__play svg { width: 22px; height: 22px; margin-left: 3px; fill: var(--white); transition: fill 400ms ease; }
.testi__card:hover .testi__play {
  background: rgba(199,154,69,.9); border-color: var(--gold);
  transform: translate(-50%, -50%) scale(1.06);
}
.testi__card:hover .testi__play svg { fill: var(--white); }
.testi__meta { position: absolute; left: 28px; bottom: 24px; z-index: 2; }
.testi__quote { font-family: var(--font-display); font-size: 34px; line-height: 0; color: var(--gold); display: block; height: 14px; }
.testi__name { font-family: var(--font-display); font-size: 24px; color: var(--white); margin-top: 10px; }
.testi__role { font-family: var(--font-sans); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); margin-top: 4px; }

.testi__foot { margin-top: 64px; text-align: center; }
.testi__foot .btn-ghost { margin-top: 28px; }

/* Modal */
.testi__modal {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(10,10,10,.9);
}
.testi__modal.is-open { display: flex; }
.testi__modal-inner { width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; }
.testi__modal-inner iframe { width: 100%; height: 100%; border: 0; display: block; }
.testi__close {
  position: absolute; top: 20px; right: 24px; color: var(--white);
  font-size: 30px; line-height: 1; font-family: var(--font-sans);
}
.testi__close:hover { color: var(--gold); }

@media (min-width: 768px) {
  .testi__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* --------------------------------------------------------------------------
   6b. Section 2B — Flipbook (real book page turn)
   -------------------------------------------------------------------------- */
.flipbook__stage { perspective: 2200px; }
.flipbook__spread { position: relative; display: grid; grid-template-columns: 1fr; }
.flipbook__page { position: relative; background: var(--white); }
.flipbook__page--left { display: none; }
.flipbook__spine { display: none; }

.flipbook__leaf {
  position: absolute; top: 0; right: 0; width: 100%; height: 100%;
  transform-style: preserve-3d; transform-origin: left center;
  transform: rotateY(0deg); pointer-events: none; opacity: 0;
}
.flipbook.is-turning .flipbook__leaf { opacity: 1; }
.flipbook.is-turning-next .flipbook__leaf { animation: leaf-next 1s cubic-bezier(.45,.05,.3,1) both; }
.flipbook.is-turning-prev .flipbook__leaf { animation: leaf-prev 1s cubic-bezier(.45,.05,.3,1) both; }
@keyframes leaf-next { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }
@keyframes leaf-prev { from { transform: rotateY(-180deg); } to { transform: rotateY(0deg); } }

.flipbook__face {
  position: absolute; inset: 0; backface-visibility: hidden; background: var(--white);
  box-shadow: 0 18px 50px rgba(31, 31, 31, 0.18);
}
.flipbook__face--back { transform: rotateY(180deg); }

@media (min-width: 640px) {
  .flipbook__spread { grid-template-columns: 1fr 1fr; }
  .flipbook__page--left { display: block; }
  .flipbook__leaf { width: 50%; }
  .flipbook__spine {
    display: block; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(13,13,13,.14), transparent); z-index: 4;
  }
}

/* --------------------------------------------------------------------------
   7. Section 7 — Connected to everything (map + 6 category cards)
   -------------------------------------------------------------------------- */
.near__title { font-family: var(--font-display); font-size: 40px; line-height: 1.08; color: var(--ink); margin-top: 20px; }
.near__title em { display: block; font-style: italic; color: var(--gold); margin-top: 4px; }
@media (min-width: 768px) { .near__title { font-size: 58px; } }

.near .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; transition-delay: var(--d, 0ms); }
.near.is-in .reveal { opacity: 1; transform: none; }

.near__map { position: relative; width: 100%; height: 340px; margin-top: 48px; overflow: hidden; }
@media (min-width: 768px) { .near__map { height: 520px; } }
.near__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(20%) contrast(95%) brightness(102%); }
.near__label-mask { position: absolute; left: 24%; top: 18%; width: 42%; height: 46%; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at center, rgba(250,248,244,0.98) 0%, rgba(250,248,244,0.65) 45%, transparent 100%); }
.near__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: none; z-index: 3; }
.near__pin svg { width: 44px; height: 44px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.near__pin span { margin-top: 4px; background: rgba(255,255,255,.95); border: 1px solid rgba(199,154,69,.5); border-radius: 999px; padding: 6px 16px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }

.near__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 40px auto 0; padding: 0 24px; --d: 300ms; }
.near__chip { border: 1px solid var(--line); background: var(--white); border-radius: 0; padding: 8px 20px; font-family: var(--font-sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ash); transition: color .3s, border-color .3s, background .3s; cursor: pointer; }
.near__chip:hover, .near__chip.is-active { border-color: var(--gold); background: var(--gold); color: var(--white); }

.near__grid { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 40px 16px 0; }
@media (min-width: 640px) { .near__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .near__grid { grid-template-columns: repeat(3, 1fr); } }

.near__card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 26px; box-shadow: 0 2px 18px rgba(13,13,13,.06); }
.near__card.is-active { border-color: rgba(199,154,69,.6); }
.near__head { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.near__icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 999px; border: 1px solid rgba(199,154,69,.35); background: rgba(199,154,69,.1); color: var(--gold); transition: transform .5s ease; }
.near__icon svg { width: 24px; height: 24px; }
.near__card.is-active .near__icon { transform: scale(1.1); }
.near__head h3 { flex: 1; font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.near__chev svg { width: 20px; height: 20px; color: var(--ash); transition: transform .3s; }
.near__card.is-open .near__chev svg { transform: rotate(180deg); }

.near__body { display: none; }
.near__card.is-open .near__body { display: block; }
.near__grouplabel { font-family: var(--font-display); font-size: 19px; color: var(--ink); margin: 24px 0 8px; }
.near__list { margin-top: 24px; }
.near__grouplabel + .near__list { margin-top: 0; }
.near__list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--ash); }
.near__dot { width: 5px; height: 5px; flex: none; margin-top: 9px; border-radius: 999px; background: var(--gold); }

.near__foot { margin-top: auto; padding-top: 28px; }
.near__badge { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: rgba(199,154,69,.1); padding: 8px 16px; font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.near__badge svg { width: 16px; height: 16px; }

@media (min-width: 640px) {
  .near__body { display: block; }
  .near__chev { display: none; }
  .near__head { cursor: default; }
}

/* Connected — tab panel */
.near__panel { padding: 32px 16px 0; max-width: 1500px; margin: 0 auto; }
.near__card2 { display: grid; grid-template-columns: 1fr; background: var(--white); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 18px rgba(13,13,13,.06); animation: near-fade .5s ease both; }
@media (min-width: 1024px) { .near__card2 { grid-template-columns: 1fr 1fr; } }
@keyframes near-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.near__media { position: relative; height: 300px; }
@media (min-width: 1024px) { .near__media { height: 100%; min-height: 460px; } }
.near__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.near__badge--float { position: absolute; left: 20px; bottom: 20px; background: rgba(255,255,255,.95); }
.near__info { padding: 28px; }
@media (min-width: 640px) { .near__info { padding: 40px; } }
.near__head2 { display: flex; align-items: center; gap: 16px; }
.near__head2 h3 { font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.near__group { margin-top: 28px; }
.near__group .near__list { margin-top: 0; display: grid; grid-template-columns: 1fr; row-gap: 4px; }
@media (min-width: 640px) { .near__group .near__list { grid-template-columns: 1fr 1fr; } }

/* ---------- Configurations ---------- */
.cfg { background: var(--ivory); padding: 100px 0; }
.cfg__tabs { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 48px; }
@media (min-width: 1024px) { .cfg__tabs { grid-template-columns: repeat(4, 1fr); } }
.cfg__tab { display: flex; align-items: center; gap: 16px; text-align: left; padding: 24px; background: #fff; border: 0; border-left: 1px solid var(--line); cursor: pointer; transition: background .3s ease; }
.cfg__tab:first-child { border-left: 0; }
.cfg__tab svg { width: 28px; height: 28px; stroke: var(--gold); stroke-width: 1.25; fill: none; flex: none; }
.cfg__tab b { display: block; font-family: var(--font-sans); font-size: 17px; font-weight: 600; color: var(--ink); }
.cfg__tab span { display: block; font-family: var(--font-sans); font-size: 13px; color: var(--ash); }
.cfg__tab.is-active { background: var(--noir); }
.cfg__tab.is-active b { color: var(--gold); }
.cfg__tab.is-active span { color: rgba(255,255,255,.7); }
.cfg__panel { display: grid; grid-template-columns: 1fr; animation: near-fade .5s ease both; }
@media (min-width: 1024px) { .cfg__panel { grid-template-columns: 58fr 42fr; } }
.cfg__media { position: relative; min-height: 360px; }
@media (min-width: 1024px) { .cfg__media { min-height: 720px; } }
.cfg__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cfg__tag { position: absolute; left: 24px; bottom: 24px; background: rgba(103,49,144,.8); color: #fff; padding: 8px 16px; font-family: var(--font-sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.cfg__info { background: #fff; padding: 48px 28px; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 640px) { .cfg__info { padding: 48px; } }
.cfg__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px; }
.cfg__name { font-family: var(--font-display); font-size: 42px; line-height: 1; color: var(--ink); }
.cfg__area { margin-top: 12px; font-family: var(--font-sans); font-size: 16px; color: var(--ash); }
.cfg__dash { display: block; width: 64px; height: 1px; background: var(--gold); margin-top: 20px; }
.cfg__price { background: var(--noir); padding: 20px 28px; text-align: center; }
.cfg__price p { font-family: var(--font-sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.cfg__price strong { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 400; font-size: 30px; color: var(--gold); }
.cfg__lbl { margin-top: 36px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.cfg__ideal, .cfg__hl { list-style: none; margin-top: 16px; display: grid; row-gap: 12px; }
.cfg__ideal li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ash); }
.cfg__bullet { width: 36px; height: 36px; flex: none; border-radius: 999px; border: 1px solid rgba(199,154,69,.35); background: rgba(199,154,69,.1); display: grid; place-items: center; color: var(--gold); font-size: 13px; }
/* 18px icon inside the 36px gold ring, matching the original design. */
.cfg__bullet svg { width: 18px; height: 18px; display: block; }
.cfg__hl li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--ash); }
.cfg__check { color: var(--gold); font-weight: 700; line-height: 1.4; }
.cfg__sep { display: block; height: 1px; background: var(--line); margin-top: 36px; }
.cfg__cta { margin-top: 40px; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .cfg__cta { grid-template-columns: 1fr 1fr; } }
.cfg__btn { padding: 16px 24px; font-family: var(--font-sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: all .3s ease; }
.cfg__btn--ghost { border: 1px solid var(--gold); background: transparent; color: var(--gold); }
.cfg__btn--ghost:hover { background: var(--gold); color: #fff; }
.cfg__btn--solid { border: 0; background: var(--gold); color: #fff; }
.cfg__btn--solid:hover { opacity: .9; }
.cfg__strip { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); background: var(--ivory-alt, #F3EFE8); }
@media (min-width: 640px) { .cfg__strip { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cfg__strip { grid-template-columns: repeat(4, 1fr); } }
.cfg__stripitem { padding: 32px; border-left: 1px solid var(--line); }
.cfg__stripitem:first-child { border-left: 0; }
.cfg__stripitem b { display: block; font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink); }
.cfg__stripitem span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--ash); }

/* ---- Configurations section animations ---- */
@keyframes cfg-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes cfg-zoom { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
.cfg-rv { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.cfg-rv.is-in { opacity: 1; transform: none; }
.cfg-stagger > * { animation: cfg-up .6s ease both; }
.cfg-stagger > *:nth-child(1) { animation-delay: .05s; }
.cfg-stagger > *:nth-child(2) { animation-delay: .13s; }
.cfg-stagger > *:nth-child(3) { animation-delay: .21s; }
.cfg-stagger > *:nth-child(4) { animation-delay: .29s; }
.cfg-stagger > *:nth-child(5) { animation-delay: .37s; }
.cfg-stagger > *:nth-child(6) { animation-delay: .45s; }
.cfg-stagger > *:nth-child(7) { animation-delay: .53s; }
.cfg-stagger > *:nth-child(8) { animation-delay: .61s; }
.cfg-stagger > *:nth-child(9) { animation-delay: .69s; }
.cfg-stagger > *:nth-child(10) { animation-delay: .77s; }
.cfg-zoom-in { animation: cfg-zoom 1.1s ease both; }
@media (prefers-reduced-motion: reduce) { .cfg-rv, .cfg-stagger > *, .cfg-zoom-in { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---------- Closing CTA ---------- */
.cta{position:relative;width:100%;min-height:26vh;background:var(--noir);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cta__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta__veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,18,15,.72) 0%,rgba(20,18,15,.62) 45%,rgba(20,18,15,.86) 100%)}
.cta__inner{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:56px 24px;text-align:center}
.cta__eyebrow{color:var(--gold)}
.cta__rule{display:block;width:80px;height:1px;background:rgba(199,154,69,.5);margin:20px auto 0}
.cta__title{font-family:"Cormorant Garamond",serif;color:#fff;font-size:68px;line-height:1.05;margin:24px 0 0;font-weight:400}
.cta__title em{display:block;font-style:italic}
.cta__copy{max-width:620px;margin:24px auto 0;color:rgba(255,255,255,.75);font-size:18px;line-height:1.7}
.cta__pricebox{margin-top:40px}
.cta__pricelabel{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0}
.cta__price{font-family:"Cormorant Garamond",serif;font-size:54px;line-height:1;color:var(--gold);margin:8px 0}
.cta__btns{margin-top:44px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cta__btn{font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:16px 36px;border:1px solid transparent;cursor:pointer;transition:opacity .3s ease,color .3s ease,border-color .3s ease}
.cta__btn--primary{background:var(--gold);color:var(--noir)}
.cta__btn--primary:hover{opacity:.9}
.cta__btn--ghost{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.cta__btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.cta__call{margin-top:32px;color:rgba(255,255,255,.65);font-size:15px}
.cta__call a{color:var(--gold);text-decoration:none}
.cta__call a:hover{text-decoration:underline}
@media (max-width:768px){
  .cta{min-height:85vh}
  .cta__title{font-size:44px}
  .cta__copy{font-size:17px}
  .cta__price{font-size:46px}
  .cta__btns{flex-direction:column;align-items:stretch}
  .cta__btn{width:100%}
}

/* ===== Hero slider ===== */
.hero{position:relative;width:100%;height:86vh;min-height:520px;overflow:hidden;background:var(--noir)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.hero__img.is-active{opacity:1}
.hero__veil{position:absolute;inset:0;background:none}
.hero__inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
.hero__eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0}
.hero__title{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:clamp(44px,6vw,84px);line-height:1.05;text-transform:uppercase;letter-spacing:.015em;color:var(--ivory);margin:0;max-width:900px}
/* Gold line under the headline. Distinct from .hero__eyebrow, which is the
   small uppercase label that sits above it - this one is sentence case and
   set at reading size. */
.hero__sub{margin:18px 0 0;max-width:640px;color:var(--gold);font-size:clamp(16px,1.5vw,20px);line-height:1.5}
.hero__copy{margin:14px 0 0;max-width:640px;color:rgba(250,248,244,.75);font-size:18px;line-height:1.7}
.hero__cta{margin-top:40px;display:inline-block;background:var(--gold);color:var(--noir);border:1px solid var(--gold);padding:16px 40px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .3s ease,color .3s ease}
.hero__cta:hover{background:transparent;color:var(--gold)}
.hero__dots{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:2;display:flex;gap:8px}
.hero__dot{height:8px;width:8px;border-radius:999px;border:0;background:rgba(250,248,244,.4);cursor:pointer;transition:all .3s ease}
.hero__dot.is-active{width:32px;background:var(--gold)}

/* hero — left aligned + intro animation */
.hero__veil{background:none}
.hero__inner{align-items:flex-start;text-align:left;padding:0 24px}
@media (min-width:640px){.hero__inner{padding:0 48px}}
@media (min-width:1024px){.hero__inner{padding:0 80px}}
.hero__title{max-width:820px}
.hero__sub{max-width:560px}
.hero__copy{max-width:560px}
.hero__dots--left{left:24px;transform:none}
@media (min-width:640px){.hero__dots--left{left:48px}}
@media (min-width:1024px){.hero__dots--left{left:80px}}
@keyframes heroUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.hero__eyebrow,.hero__title,.hero__sub,.hero__copy,.hero__cta{opacity:0;animation:heroUp .95s cubic-bezier(.22,.61,.36,1) forwards}
.hero__eyebrow{animation-delay:.15s}
.hero__title{animation-delay:.45s}
.hero__sub{animation-delay:.7s}
.hero__copy{animation-delay:.95s}
.hero__cta{animation-delay:1.2s}

/* --------------------------------------------------------------------------
   Site header / menu
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent);
  transition: background .5s ease;
}
.site-header.is-solid, .site-header.is-open { background: rgba(103,49,144,.96); backdrop-filter: blur(8px); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; }
.site-header__logo { display: inline-flex; align-items: center; text-decoration: none; }
.site-header__logo img { height: 84px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a { font-family: Inter, sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.8); text-decoration: none; transition: color .3s ease; }
.site-nav a:hover, .site-nav a.is-active { color: var(--gold); }
.site-nav .site-nav__cta {
  font-family: Inter, sans-serif; font-size: 16px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  background: var(--gold); color: var(--ink); padding: 10px 20px;
  border: 0; cursor: pointer; transition: opacity .3s ease;
}
.site-nav .site-nav__cta:hover { opacity: .9; color: var(--ink); }

/* Offers gets a box so the promotion stands out from the other nav items.
   Targeted by href rather than a class so the markup stays untouched, and it
   applies to the desktop and mobile menus alike. Square corners to match the
   Book a Site Visit button. */
.site-nav a[href="#offers"] {
  border: 1px solid rgba(199, 154, 69, .65);
  padding: 7px 14px;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.site-nav a[href="#offers"]:hover,
.site-nav a[href="#offers"].is-active {
  border-color: var(--gold);
  background: rgba(199, 154, 69, .12);
}
/* The mobile menu is a full-width centred column: hug the text, stay centred. */
.site-nav--mobile a[href="#offers"] { align-self: center; margin: 6px 0; }
.site-header__toggle { display: none; background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.site-nav--mobile { display: none; flex-direction: column; gap: 0; border-top: 1px solid rgba(255,255,255,.1); padding: 6px 20px 20px; }
.site-nav--mobile a { padding: 10px 0; font-size: 16px; }
.site-nav--mobile .site-nav__cta { margin-top: 10px; text-align: center; padding: 12px 20px; }
.site-header.is-open .site-nav--mobile { display: flex; }
[id] { scroll-margin-top: 110px; }
@media (max-width: 1023px) {
  .site-nav--desktop { display: none; }
  .site-header__toggle { display: block; }
}


/* ---- Win-Win Fiesta offers ---- */
.fiesta { position: relative; overflow: hidden; background: var(--gold-soft); padding-block: 40px; }
@media (min-width: 768px) { .fiesta { padding-block: 56px; } }
@media (min-width: 1024px) { .fiesta { padding-block: 72px; } }
#offers .eyebrow { color: var(--noir); }
#offers .t-section { color: var(--ink); }
#offers .muted { color: var(--ink); opacity: .7; }
.fiesta__hero-stat { margin-top: 28px; }
.fiesta__hero-stat p:first-child { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .3em; color: var(--ink); opacity: .65; }
.fiesta__hero-stat p:last-child { font-family: var(--font-display); font-size: 64px; line-height: 1; color: var(--noir); margin-top: 4px; }
@media (min-width: 768px) { .fiesta__hero-stat p:last-child { font-size: 92px; } }
@media (min-width: 1024px) { .fiesta__hero-stat p:last-child { font-size: 110px; } }
.fiesta__hero-stat span { font-size: .35em; color: var(--gold); vertical-align: super; }
.fiesta__pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 8px 20px; border: 1px solid rgba(103,49,144,.35); background: rgba(247,244,238,.7); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--noir); }
.fiesta__pill i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.fiesta__confetti { position: absolute; inset: 0; pointer-events: none; }
.fiesta__confetti i { position: absolute; display: block; width: 7px; height: 12px; background: var(--c); opacity: 0; transform: translateY(-40px); transition: opacity 1.2s ease, transform 1.2s ease; transition-delay: var(--d); }
.fiesta.is-in .fiesta__confetti i { opacity: .5; transform: rotate(var(--r)); }
.fiesta__grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 56px; margin-bottom: 40px; }
@media (min-width: 640px) { .fiesta__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .fiesta__grid { grid-template-columns: repeat(4, 1fr); } }
.fiesta__card { display: flex; align-items: center; justify-content: center; padding: 56px 24px 72px; background: var(--gold-soft); transition: transform .6s ease, opacity .8s ease; }
.fiesta__card:hover { transform: translateY(-10px); }
.fiesta__balloon { position: relative; width: 100%; max-width: 250px; aspect-ratio: 5 / 6; border-radius: 50% 50% 48% 48% / 44% 44% 56% 56%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 26px 26px 34px; box-shadow: 0 18px 40px rgba(13,13,13,.18), inset -10px -14px 30px rgba(13,13,13,.08); color: var(--ink); transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .5s ease; animation: fiestaFloat 6s ease-in-out infinite; cursor: pointer; border: 0; background-color: transparent; }
.fiesta__balloon[data-balloon="cream"] { background: radial-gradient(circle at 32% 26%, #FFFBF5, #FDF6ED 42%, #F5EBDC 100%); }
.fiesta__balloon[data-balloon="peach"] { background: radial-gradient(circle at 32% 26%, #FFF4E6, #FCE6D0 42%, #F8D9B8 100%); }
.fiesta__balloon[data-balloon="lavender"] { background: radial-gradient(circle at 32% 26%, #F8F0FA, #F0E3F5 42%, #E8D6EF 100%); }
.fiesta__balloon[data-balloon="pale-gold"] { background: radial-gradient(circle at 32% 26%, #FFFAF0, #FDF1D8 42%, #F9E8C8 100%); }
.fiesta__card:nth-child(2) .fiesta__balloon { animation-delay: -1.5s; }
.fiesta__card:nth-child(3) .fiesta__balloon { animation-delay: -3s; }
.fiesta__card:nth-child(4) .fiesta__balloon { animation-delay: -4.5s; }
.fiesta__card:hover .fiesta__balloon { transform: translateY(-10px) rotate(-2deg); box-shadow: 0 26px 55px rgba(13,13,13,.26), inset -10px -14px 30px rgba(13,13,13,.08); }
.fiesta__balloon::before { content: ""; position: absolute; bottom: -12px; left: 50%; width: 18px; height: 14px; transform: translateX(-50%); background: inherit; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.fiesta__balloon::after { content: ""; position: absolute; bottom: -66px; left: 50%; width: 2px; height: 56px; background: rgba(13,13,13,.28); transform: translateX(-50%); border-radius: 2px; }
@keyframes fiestaFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.fiesta__balloon h3 { font-family: var(--font-display); font-size: 21px; line-height: 1.18; color: var(--ink); }
.fiesta__balloon h3 span { display: block; }
@media (min-width: 768px) { .fiesta__balloon h3 { font-size: 24px; } }
.fiesta__bar { display: block; width: 40px; height: 1px; margin-top: 16px; background: var(--gold); opacity: .8; transform-origin: center; transition: transform .5s ease; }
.fiesta__card:hover .fiesta__bar { transform: scaleX(1.8); }
.fiesta__arrow { display: grid; place-items: center; width: 36px; height: 36px; margin-top: 20px; border: 1px solid rgba(13,13,13,.25); border-radius: 50%; color: rgba(13,13,13,.7); transition: border-color .3s ease, color .3s ease, transform .3s ease; }
.fiesta__card:hover .fiesta__arrow { border-color: var(--gold); color: var(--gold); transform: translateX(3px); }
.fiesta__tc { margin-top: 24px; font-size: 12.5px; line-height: 1.6; color: var(--ink); opacity: .6; }

/* Fiesta popup overlay */
.fiesta__overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.fiesta__overlay.is-open { opacity: 1; pointer-events: auto; }
.fiesta__backdrop { position: absolute; inset: 0; background: rgba(13,13,13,.55); backdrop-filter: blur(4px); }
.fiesta__panel { position: relative; width: 100%; max-width: 520px; max-height: 86vh; background: #F7F4EE; border-radius: 16px; box-shadow: 0 40px 100px rgba(13,13,13,.35); transform: translateY(24px); opacity: 0; transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease; display: flex; flex-direction: column; }
.fiesta__overlay.is-open .fiesta__panel { transform: translateY(0); opacity: 1; }
@media (max-width: 639px) { .fiesta__panel { max-height: 86vh; border-radius: 24px 24px 0 0; align-self: flex-end; } }
.fiesta__panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 24px 0; }
.fiesta__panel-head h3 { font-family: var(--font-display); font-size: 24px; line-height: 1.1; color: var(--ink); }
.fiesta__panel-rule { display: block; width: 48px; height: 1px; margin-top: 12px; background: var(--gold); }
.fiesta__panel-close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: rgba(13,13,13,.55); font-size: 18px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.fiesta__panel-close:hover { background: rgba(13,13,13,.05); color: var(--ink); }
.fiesta__panel-body { overflow-y: auto; padding: 16px 24px 8px; }
.fiesta__panel-body h4 { font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: .01em; margin: 0 0 4px; }
.fiesta__panel-body p { font-size: 13.5px; line-height: 1.6; color: rgba(13,13,13,.75); margin: 0 0 12px; }
.fiesta__panel-body p small { display: block; font-size: 12px; color: rgba(13,13,13,.55); margin-top: 4px; }
.fiesta__panel-body .plan { border-left: 2px solid var(--gold); padding-left: 16px; margin-bottom: 16px; }
.fiesta__panel-body .plan:last-child { margin-bottom: 0; }
.fiesta__panel-body ul { list-style: none; padding: 0; margin: 0; }
.fiesta__panel-body li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: rgba(13,13,13,.75); margin-bottom: 8px; }
.fiesta__panel-body li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.fiesta__panel-body .highlight { font-family: var(--font-display); font-size: 26px; line-height: 1.1; color: var(--noir); margin-bottom: 8px; }
.fiesta__panel-body .footnote { display: inline-block; background: rgba(201,151,69,.15); padding: 6px 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: #8a6420; margin-top: 8px; }
.fiesta__panel-foot { padding: 16px 24px; border-top: 1px solid rgba(13,13,13,.1); background: #F7F4EE; }
.fiesta__panel-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px 24px; background: var(--noir); color: #F7F4EE; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; text-decoration: none; transition: background .3s ease; }
.fiesta__panel-cta:hover { background: var(--gold); }

/* --------------------------------------------------------------------------
   Legacy stats pill
   -------------------------------------------------------------------------- */
.legacy { width: 100%; background: var(--ivory); padding-block: 40px; }
@media (min-width: 768px) { .legacy { padding-block: 56px; } }
@media (min-width: 1024px) { .legacy { padding-block: 72px; } }
.legacy__pill { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.legacy__pill-inner {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  padding: 48px 32px; background: var(--white);
  border: 1px solid rgba(103, 49, 144, 0.3); border-radius: 999px;
  box-shadow: 0 12px 40px rgba(13, 13, 13, 0.04);
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s ease, transform .8s ease;
}
.legacy__pill-inner.is-in { opacity: 1; transform: translateY(0); }
.legacy__stat { text-align: center; }
.legacy__stat b {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 42px; line-height: 1; letter-spacing: -0.02em; color: var(--ink);
}
.legacy__stat span {
  display: block; margin-top: 12px; font-family: var(--font-sans);
  font-size: 15px; color: var(--ash);
}
@media (min-width: 640px) {
  .legacy__pill-inner { grid-template-columns: repeat(3, 1fr); padding: 56px 40px; }
}
@media (min-width: 1024px) {
  .legacy__pill-inner { grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 64px 56px; }
  .legacy__stat b { font-size: 56px; }
}
@media (max-width: 639px) {
  .legacy__pill-inner { border-radius: 32px; }
}

/* --------------------------------------------------------------------------
   Landmark Projects grid
   -------------------------------------------------------------------------- */
.landmarks { width: 100%; background: var(--ivory); padding-block: 40px; }
@media (min-width: 768px) { .landmarks { padding-block: 56px; } }
@media (min-width: 1024px) { .landmarks { padding-block: 72px; } }
.landmarks__rule {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  max-width: 520px; margin: 24px auto 0;
}
.landmarks__rule span:first-child,
.landmarks__rule span:last-child { flex: 1; height: 1px; background: rgba(31,31,31,.2); }
.landmarks__rule .t-body-sm { letter-spacing: .12em; text-transform: uppercase; color: var(--noir); }
.landmarks__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  /* Width via margin, not padding: the grid's own background is what paints the
     1px lines between cells, so padding here showed as grey bars down the
     outside edges. */
  max-width: 900px; width: calc(100% - 48px); margin: 40px auto 0;
  background: rgba(31,31,31,.1);
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.landmarks__grid.is-in { opacity: 1; transform: translateY(0); }
/* Sized to the logo plus padding rather than a fixed 16/10 box, which left a
   lot of dead space around a 125x47 wordmark. min-height carries the tallest
   logo (Park Pebbles at 66px) so every row stays the same height. */
.landmarks__cell {
  display: flex; align-items: center; justify-content: center;
  min-height: 102px; padding: 18px 14px; background: var(--ivory);
  transition: background .4s ease;
}
.landmarks__cell:hover { background: var(--white); }
/* Logos are sized by HEIGHT, not width, so the nine 800x300 files all present
   at the same optical weight regardless of how long the wordmark is.
   object-fit: contain guarantees nothing is ever stretched or cropped. */
/* Sized to match purplecorp.in exactly: its logos render at 125x47, and every
   source file is 800x300, so a height of 47px reproduces that width to the
   pixel. Height rather than width so a long wordmark never outgrows a short
   one; object-fit: contain guarantees nothing is stretched or cropped. */
.landmarks__logo {
  width: auto; height: 40px; max-width: 78%;
  object-fit: contain; display: block;
}
/* The two odd sizes. Park Eden is 226x66 - more than twice as wide per unit of
   height as the rest - so at a common height it would tower over its
   neighbours; Park Pebbles at 228x150 is nearly square and would look stunted.
   Trim one, lift the other, so all twelve read as the same size. */
.landmarks__logo--wide { height: 35px; max-width: 82%; }
.landmarks__logo--tall { height: 56px; }

@media (min-width: 768px) {
  .landmarks__logo { height: 47px; }        /* = 125px wide, as on purplecorp.in */
  .landmarks__logo--wide { height: 42px; }  /* Park Eden  - 226x66, far wider    */
  .landmarks__logo--tall { height: 66px; }  /* Park Pebbles - 228x150, squarer   */
}
@media (min-width: 768px) {
  .landmarks__grid { grid-template-columns: repeat(4, 1fr); margin-top: 56px; }
}

/* Enquiry modal */
/* Above .fiesta__overlay (9999): the offers panel's Know More button opens this
   form, and at z-index 100 it would have opened behind that overlay. */
.enq{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,20,20,.6);backdrop-filter:blur(4px);}
.enq[hidden]{display:none;}
.enq__panel{position:relative;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;background:var(--ivory,#FAF8F4);padding:36px 32px;box-shadow:0 30px 80px rgba(0,0,0,.35);}
.enq__close{position:absolute;top:12px;right:14px;border:0;background:none;font-size:26px;line-height:1;color:#8a8a8a;cursor:pointer;}
.enq__eyebrow{font-family:Inter,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold,#C79A45);margin:0;}
.enq__title{font-family:"Cormorant Garamond",serif;font-size:34px;line-height:1.1;margin:12px 0 0;color:var(--ink,#1F1F1F);} 
.enq__title em{font-style:italic;color:var(--gold,#C79A45);} 
.enq__rule{display:block;width:64px;height:1px;background:rgba(199,154,69,.6);margin-top:16px;}
.enq__form{display:flex;flex-direction:column;gap:14px;margin-top:26px;}
.enq__form input,.enq__form select,.enq__form textarea{width:100%;border:1px solid rgba(0,0,0,.12);background:#fff;padding:14px 16px;font-family:Inter,sans-serif;font-size:15px;color:var(--ink,#1F1F1F);border-radius:0;outline:none;}
.enq__form textarea{min-height:92px;resize:none;}
.enq__form input:focus,.enq__form select:focus,.enq__form textarea:focus{border-color:var(--gold,#C79A45);} 
.enq__submit{background:var(--gold,#C79A45);color:#fff;border:0;padding:16px;font-family:Inter,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;}
.enq__note{margin-top:20px;text-align:center;font-size:13px;color:#6f6f6f;}
.enq__note a{color:var(--gold,#C79A45);} 

/* --------------------------------------------------------------------------
   Footer — ported from the original Park Titan site.

   Every value below was read off the computed styles of the live footer at
   parktitan.in rather than eyeballed, so the two render identically:

     typeface        Jost (the old site's body font, not this page's Inter)
     background      #222, copyright bar #111
     address / phone 17px / line-height 25.5px / #fff
     heading         18px, bold via the <b> the original markup uses
     legal links     14px / #337ab7 / no underline   <- Bootstrap's link colour
     RERA caption    14px / #fff
     copyright       14px / #fff
   -------------------------------------------------------------------------- */
.site-footer {
  background: #222; color: #fff;
  font-family: Jost, sans-serif;
}
.site-footer__top {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  padding-top: 40px; padding-bottom: 32px;
}
.site-footer h4 {
  font-family: Jost, sans-serif; font-size: 18px; font-weight: 700;
  color: #fff; margin-bottom: 16px;
}
.site-footer p { font-size: 17px; line-height: 25.5px; color: #fff; }

/* The original leaves these as Bootstrap's default link styling - #337ab7 and
   no underline - and only overrides the phone link to white inline. Matched to
   the measured values rather than left as the browser's default blue+underline,
   which is what made the new footer look wrong against the old one. */
.site-footer a { color: #337ab7; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__col p a[href^="tel:"] { color: #fff; text-decoration: none; }

/* Needs to out-specify `.site-footer p` above, which would otherwise impose the
   address block's 25.5px line-height on this 14px paragraph. */
.site-footer .site-footer__legal { margin-top: 16px; font-size: 14px; line-height: 21px; }

/* The original's `footer { line-height: 40px }` reaches the RERA captions and
   the copyright line - that generous leading is why they sit where they do. */
/* Two across on phones. Four 1fr columns plus gaps cannot fit a 390px screen -
   the QR images stop shrinking at their intrinsic size and push the whole page
   into horizontal scroll. */
.site-footer__qr { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 560px) { .site-footer__qr { grid-template-columns: repeat(4, 1fr); } }
.site-footer__qr .qr { text-align: left; font-size: 14px; line-height: 40px; color: #fff; }
.site-footer__qr img { width: 100%; height: auto; background: #fff; }
.site-footer__qr span { display: block; }

.site-footer__bar { background: #111; padding: 10px 0; }
.site-footer__bar .copyright-text { font-size: 14px; line-height: 40px; color: #fff; }

@media (min-width: 768px) {
  .site-footer__top { grid-template-columns: 5fr 5fr; gap: 64px; padding-top: 48px; }
}

/* Shared Park Titan benefit line in the academies heading — replaces the
   "Within Your Community" / "No Weekend Travel" items that were repeated in
   every academy card. */
.academies__lead { margin-top: 24px; color: var(--ink); }
.academies__lead em { font-style: italic; color: var(--gold); }

/* Highlights check + panel button icon — restored from the original design,
   which the static export had replaced with text glyphs. */
.cfg__check svg { width: 16px; height: 16px; display: block; margin-top: 3px; }
.cfg__btn--solid { display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.cfg__btn--solid svg { width: 16px; height: 16px; flex: none; }

/* --------------------------------------------------------------------------
   Legal pages (privacypolicy.php, disclaimer.php)
   -------------------------------------------------------------------------- */
.legal__bar { background: var(--noir); padding: 12px 0; }
.legal__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.legal__bar img { height: 64px; width: auto; display: block; }
.legal__back { color: var(--gold); text-decoration: none; font-size: 13px; }
.legal__back:hover { color: var(--gold-soft); }

.legal { background: var(--ivory); padding: 56px 0 80px; }
.legal__title { color: var(--ink); }
.legal__rule { display: block; height: 1px; width: 72px; background: var(--gold); margin: 24px 0 40px; }
.legal h2 {
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--gold);
  margin-top: 40px;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin-top: 16px; font-size: 16px; line-height: 1.85; color: var(--ash); }


/* Purple Corp mark beside the "Our Legacy" eyebrow. The eyebrow is a <p> inside
   a text-align:center wrapper, so it becomes a centred flex row rather than
   inline-flex - that keeps the logo and the label on one optical baseline. */
.legacy-by { display: flex; align-items: center; justify-content: center; gap: 14px; }
.legacy-by__logo { height: 30px; width: auto; display: block; }
@media (min-width: 768px) { .legacy-by__logo { height: 36px; } }

/* Legal disclaimer strip, between the footer body and the copyright bar.
   Deliberately quiet - small, dimmed, generous line-height - but readable;
   it is a legal notice, not decoration, so it is real text rather than an
   image and is never hidden on small screens. */
.site-footer__disclaimer { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0 20px; }
.site-footer__disclaimer p {
  font-size: 12px; line-height: 1.7; color: rgba(255,255,255,.62);
  text-align: justify;
}
.site-footer__disclaimer strong { color: rgba(255,255,255,.85); font-weight: 600; letter-spacing: .04em; }
@media (min-width: 768px) {
  .site-footer__disclaimer p { font-size: 12.5px; text-align: center; }
}

/* --------------------------------------------------------------------------
   Fixed action stack (bottom-left): enquire above, call below.

   Both pills share one .fab rule so they stay identical in height, radius and
   type - a small icon-only button beside a wide pill reads as an afterthought
   rather than a pair. Only the background colour and the label differ.

   The stack is what is positioned; the pills are static inside it, so the gap
   is declared once and adding a third action later needs no new offsets.

   z-index sits above the page but BELOW the enquiry form (10000) and the
   offers panel (9999), so an open dialog is never obscured.
   -------------------------------------------------------------------------- */
.fab-stack {
  position: fixed; left: 20px; bottom: 20px; z-index: 90;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}

.fab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 14px; border: 0; border-radius: 999px;
  text-decoration: none; cursor: pointer; color: #fff;
  font-family: Inter, sans-serif; font-size: 15px; font-weight: 600;
  letter-spacing: .04em; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(31, 31, 31, .28);
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.fab:hover {
  transform: translateY(-2px); box-shadow: 0 12px 28px rgba(31, 31, 31, .34);
}
.fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.fab--call { background: var(--gold); }
.fab--call:hover { background: var(--noir); color: #fff; }
.fab--enq { background: var(--noir); }
.fab--enq:hover { background: var(--gold); color: #fff; }

.fab__icon { display: grid; place-items: center; width: 22px; height: 22px; flex: none; }
.fab__icon svg { width: 100%; height: 100%; display: block; }

/* Phones: collapse both to round icons so they cannot cover copy on a narrow
   screen. The tel: link still opens the dialler; the enquiry button still
   opens the modal - only the wording is dropped. */
@media (max-width: 767px) {
  .fab-stack { left: 16px; bottom: 16px; gap: 10px; }
  .fab { padding: 0; width: 54px; height: 54px; justify-content: center; gap: 0; }
  .fab__label { display: none; }
  .fab__icon { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .fab, .fab:hover { transition: none; transform: none; }
}

/* --------------------------------------------------------------------------
   Server-rendered tab panels

   Every location category and every home configuration is present in the HTML
   so the text is crawlable; only the selected one is shown. JavaScript toggles
   .is-active instead of rebuilding the markup.
   -------------------------------------------------------------------------- */
.near__pane, .cfg__pane { display: none; }
.near__pane.is-active { display: block; }
.cfg__pane.is-active { display: contents; }

/* The three academies not currently on the open spread. Present in the HTML so
   the copy is crawlable; the flipbook itself only ever shows two at a time. */
.flipbook__rest { display: none; }

/* --------------------------------------------------------------------------
   Locality — Hinjawadi, Pune (above the footer)
   -------------------------------------------------------------------------- */
.locality { background: var(--ivory-alt); padding-block: 56px; }
.locality__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.locality__media { position: relative; overflow: hidden; }
.locality__media img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }
.locality__title { color: var(--ink); margin-top: 16px; }
.locality__title em { display: block; font-style: italic; color: var(--gold); }
.locality__rule { display: block; height: 1px; width: 72px; background: var(--gold); margin: 20px 0 24px; }
.locality__body p { margin-top: 14px; font-size: 16px; line-height: 1.8; color: var(--ash); }
.locality__facts {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px;
}
.locality__facts li { border-left: 2px solid var(--gold); padding-left: 14px; }
.locality__facts b {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 22px; line-height: 1.15; color: var(--ink);
}
.locality__facts span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--ash); }

@media (min-width: 900px) {
  .locality { padding-block: 88px; }
  .locality__grid { grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
  .locality__media img { max-height: 520px; }
}

/* --------------------------------------------------------------------------
   Hero slide 2 - Win-Win Fiesta campaign banner

   Artwork, not a photograph, so it must never be cropped: object-fit is
   contain, and the gold behind it is sampled from the banner's own background
   so the letterboxing reads as a frame rather than a gap.

   Nothing is drawn on top of it. .hero__inner (eyebrow, title, copy, CTA) is
   faded out while this slide is showing - the banner carries its own message.

   The link is only clickable while the slide is active. Every slide occupies
   the full hero, so without this an invisible banner would swallow clicks
   meant for the slides underneath it.
   -------------------------------------------------------------------------- */
.hero__banner-link { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero--banner .hero__banner-link { pointer-events: auto; cursor: pointer; }
.hero__banner-link picture { display: contents; }

.hero__img--banner { object-fit: contain; background: #eeb947; }

.hero--banner .hero__inner { opacity: 0; pointer-events: none; }
.hero__inner { transition: opacity .6s ease; }

@media (prefers-reduced-motion: reduce) {
  .hero__inner { transition: none; }
}