/* ============================================================
   Pristine Amore — global styles
   tokens · base · header helpers · enquiry modal · offcanvas
   lead form fields · floating rail helpers
   ============================================================ */

:root {
  --gold: #d9bd77;
  --gold-soft: #e7d7a8;
  --brown-950: #241708;
  --brown-900: #2e1d0e;
  --brown-800: #3a2817;
  --cream: #f6efe3;
  --ink: #1e1e1e;
  /* Display serif: Figma uses "Test Domaine Display" (commercial trial, not on
     Google Fonts). Gilda Display is the substitute — the design itself uses it
     in the configurations card. Self-host Domaine later and it wins the stack. */
  --font-display: "Test Domaine Display", "Gilda Display", serif;
  --font-body: "Darker Grotesque", sans-serif;
  --font-eyebrow: "Montserrat", sans-serif;
  /* fixed header height = logo box + padding-block; the hero reserves it
     so the banner starts below the nav instead of running under it */
  --nav-h: 90px;
}

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

html {
  scroll-behavior: auto;
  overflow-x: hidden;
}
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--brown-950);
  color: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
button {
  font-family: inherit;
}

.container-lp {
  width: min(100% - 40px, 1680px);
  margin-inline: auto;
}
@media (min-width: 1200px) {
  .container-lp {
    width: min(100% - 240px, 1680px);
  }
}

::selection {
  background: var(--gold);
  color: var(--brown-950);
}


/* ------------------- banner form ---------------- */

/* The banner artwork keeps its right 32.55% as a white panel (the RERA strip
   sits in the top of it) — the card is parked inside that panel and scales
   with it, so it lines up at every desktop width. Hidden below 768px, where
   the portrait artwork has no such panel. */
.banner_form_wrapper{
  top: 0;
  right: 0;
  width: 32.55%;
  height: 100%;
  /* pinned from the top rather than centred, so the card keeps a fixed gap
     below the RERA number + QR printed into the artwork. Padding percentages
     resolve against the banner's width, so the card holds the same position
     and the same slim proportion of the panel at every desktop width. */
  align-items: flex-start;
  justify-content: center;
  padding: 8.5% 4% 2%;
}

.b_form{
    /* radii sum past the card width, so the browser scales them down to a
       true semicircle — the arch keeps its shape at any width */
    border-radius: 999px 999px 0 0;
    border: 1px solid #bc9051;
    /* generous top inset — the arch is a semicircle, so the title needs to
       clear the curve before the card is full width */
    padding: 13% 9% 6%;
    /* a lighter warm brown than the modal's #372523 — the card sits on the
       banner's white panel, where the deep brown read as a heavy block */
    background:
      radial-gradient(120% 62% at 50% 0%, rgba(217, 189, 119, 0.18) 0%, rgba(217, 189, 119, 0) 62%),
      linear-gradient(180deg, #6d5049 0%, #5e433d 45%, #543a35 100%);
    box-shadow: 0 18px 44px rgba(55, 37, 35, 0.18);
    height: auto;
    width: 100%;
}

/* the panel is a third of the banner, so the card's type and fields track the
   viewport rather than sitting at their modal sizes */
.banner_form_wrapper .enq-title{
  /* the card narrows to ~190px at the 768px breakpoint — the title has to
     drop below the modal's floor to stay inside the arch */
  font-size: clamp(13px, 1.5vw, 34px);
  letter-spacing: 0.04em;
}
.banner_form_wrapper .enq-sub{
  font-size: clamp(10px, 0.85vw, 17px);
  margin-bottom: clamp(10px, 1.35vw, 26px);
}
.banner_form_wrapper .enq-divider{
  width: clamp(34px, 3.3vw, 64px);
  margin-bottom: clamp(10px, 1.35vw, 26px);
}
.banner_form_wrapper .lead-field{
  margin-bottom: clamp(8px, 0.95vw, 18px);
}
.banner_form_wrapper .lead-field input{
  font-size: clamp(11px, 0.9vw, 17px);
  padding: clamp(7px, 0.73vw, 14px) clamp(10px, 0.95vw, 18px);
  /* the 5% white of the modal disappears on the lighter card — sink the
     fields instead of floating them */
  background: rgba(46, 29, 27, 0.28);
  border-color: rgba(217, 189, 119, 0.45);
}

.banner_form_wrapper .lead-field input:focus{
  background: rgba(46, 29, 27, 0.34);
  border-color: var(--gold);
}
.banner_form_wrapper .lead-err{
  font-size: clamp(10px, 0.73vw, 14px);
}
.banner_form_wrapper .lead-submit{
  font-size: clamp(10px, 0.83vw, 16px);
  padding: clamp(8px, 0.8vw, 15px) 24px;
  letter-spacing: 0.16em;
}





/* ------------------------------------------------------------
   Enquiry modal — premium arch card
   ------------------------------------------------------------ */
.modal-backdrop.show {
  opacity: 0.72;
}
#enquiryModal .modal-dialog {
  max-width: 460px;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease;
  transform: translateY(36px) scale(0.96);
  opacity: 0;
}
#enquiryModal.show .modal-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}
#enquiryModal .modal-content {
  background: linear-gradient(178deg, #31200d 0%, #241708 100%);
  border: 1px solid rgba(217, 189, 119, 0.45);
  border-radius: 230px 230px 24px 24px;
  padding: clamp(40px, 4vw, 56px) clamp(26px, 3vw, 44px) clamp(30px, 3vw, 40px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  position: relative;
  /* no overflow:hidden — the arch radius would clip the corner-floating close button */
}
#enquiryModal .modal-content::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(217, 189, 119, 0.25);
  border-radius: 220px 220px 18px 18px;
  pointer-events: none;
}
/* layout via .position-absolute .d-flex .align-items-center .justify-content-center .rounded-circle */
.enq-close {
  top: 18px;
  right: 20px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(217, 189, 119, 0.5);
  background: rgba(36, 23, 8, 0.6);
  color: var(--gold);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.3s ease,
    transform 0.3s ease,
    color 0.3s ease;
}
.enq-close:hover {
  background: var(--gold);
  color: var(--brown-950);
  transform: rotate(90deg);
}
.enq-eyebrow {
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-family: var(--font-eyebrow);
  font-size: 12px;
  font-weight: 400;
  color: rgba(246, 239, 227, 0.75);
  margin-bottom: 10px;
}
.enq-title {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(26px, 2vw, 34px);
  color: var(--gold);
  margin-bottom: 6px;
}
.enq-sub {
  font-size: 17px;
  font-weight: 300;
  color: rgba(246, 239, 227, 0.78);
  margin-bottom: 26px;
}
.enq-divider {
  width: 64px;
  height: 1px;
  margin: 0 auto 26px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ------------------------------------------------------------
   Lead form fields (modal + contact section)
   ------------------------------------------------------------ */
/* box via .position-relative .text-start */
.lead-field {
  margin-bottom: 18px;
}
/* .lead-field input carries .w-100 */
.lead-field input {
  background: rgba(246, 239, 227, 0.05);
  border: 1px solid rgba(217, 189, 119, 0.35);
  border-radius: 10px;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--cream);
  outline: none;
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.lead-field input::placeholder {
  color: rgba(246, 239, 227, 0.55);
}
.lead-field input:focus {
  border-color: var(--gold);
  background: rgba(246, 239, 227, 0.08);
  box-shadow: 0 0 0 3px rgba(217, 189, 119, 0.15);
}
.lead-field input.is-invalid {
  border-color: #e0655b;
}
.lead-field input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(224, 101, 91, 0.18);
}
.lead-err {
  display: none;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #f0968e;
  margin-top: 6px;
  padding-left: 4px;
}
.lead-err.is-visible {
  display: block;
}

/* the modal submit carries .w-100 .border-0; .form-cta-early re-styles both */
.lead-submit {
  cursor: pointer;
  border-radius: 12px;
  padding: 15px 24px;
  background: linear-gradient(
    120deg,
    #c9a85c 0%,
    var(--gold) 45%,
    #b99a50 100%
  );
  color: var(--brown-950);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    filter 0.3s ease;
}
.lead-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(217, 189, 119, 0.28);
  filter: brightness(1.05);
}
.lead-submit:disabled {
  opacity: 0.75;
  cursor: default;
  transform: none;
}
.enq-privacy {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 300;
  color: rgba(246, 239, 227, 0.5);
}

/* ------------------------------------------------------------
   Mobile offcanvas menu — full width, premium
   ------------------------------------------------------------ */
.offcanvas.menu-offcanvas {
  width: 100vw !important;
  max-width: 100vw;
  background: linear-gradient(165deg, #2a1a09 0%, #241708 60%, #1c1106 100%);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-offcanvas .offcanvas-header {
  padding: 22px 24px;
  border-bottom: 1px solid rgba(217, 189, 119, 0.18);
}
/* layout via .ms-auto .d-flex .align-items-center .justify-content-center .rounded-circle .bg-transparent */
.menu-close {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(217, 189, 119, 0.5);
  color: var(--gold);
  font-size: 17px;
  cursor: pointer;
  transition:
    background 0.35s ease,
    color 0.35s ease,
    transform 0.35s ease;
}
.menu-close:hover {
  background: var(--gold);
  color: var(--brown-950);
  transform: rotate(90deg);
}
/* .offcanvas-body carries .d-flex .flex-column; .menu-nav carries .list-unstyled .text-center */
.menu-offcanvas .offcanvas-body {
  padding: 8vh 24px 32px;
}
.menu-nav a {
  display: inline-block;
  padding: 13px 6px;
  font-family: var(--font-display);
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  transition:
    color 0.3s ease,
    letter-spacing 0.3s ease;
}
.menu-nav a:hover {
  color: var(--gold);
  letter-spacing: 0.18em;
}
.menu-nav li {
  opacity: 0;
  transform: translateX(36px);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-offcanvas.show .menu-nav li {
  opacity: 1;
  transform: translateY(0);
}
.menu-offcanvas.show .menu-nav li:nth-child(1) {
  transition-delay: 0.12s;
}
.menu-offcanvas.show .menu-nav li:nth-child(2) {
  transition-delay: 0.18s;
}
.menu-offcanvas.show .menu-nav li:nth-child(3) {
  transition-delay: 0.24s;
}
.menu-offcanvas.show .menu-nav li:nth-child(4) {
  transition-delay: 0.3s;
}
.menu-offcanvas.show .menu-nav li:nth-child(5) {
  transition-delay: 0.36s;
}
.menu-offcanvas.show .menu-nav li:nth-child(6) {
  transition-delay: 0.42s;
}
.menu-offcanvas.show .menu-nav li:nth-child(7) {
  transition-delay: 0.48s;
}
/* .mt-auto .text-center */
.menu-cta-wrap {
  padding-top: 32px;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s ease 0.55s,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.55s;
}
.menu-offcanvas.show .menu-cta-wrap {
  opacity: 1;
  transform: translateY(0);
}
/* .d-inline-block .bg-transparent .rounded-pill */
.menu-cta {
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 14px 40px;
  font-size: 15px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.35s ease,
    color 0.35s ease;
}
.menu-cta:hover {
  background: var(--gold);
  color: var(--brown-950);
}


.hero-rail {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hero-rail.hide-cta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}








/* ============================================================
   HERO (#home) — full-viewport hero + top nav + floating rail
   Figma nodes 91:179173 (hero, 1920x1080) + 91:181999 (rail 64x327)
   ============================================================ */

/* .position-relative .overflow-hidden */
.sec-hero {
  /* height is the banner artwork's own aspect ratio — no viewport min-height */
  padding-top: var(--nav-h);
  background: #f2e8d8;
  isolation: isolate;
}

/* ---------- Background photo + gradient scrim ---------- */
.hero-bg {
  z-index: 0;
  pointer-events: none;
}

/* .d-block .w-100 — the banner sets the hero's height */
.hero-bg-img {
  height: auto;
  aspect-ratio: 2000 / 900;
}

/* ---------- Banner slider ---------- */
/* Prev/next — phones only (.d-md-none); on desktop the dots are enough and the
   arrows would sit over the enquiry card. Same round gold frame as the
   configurations / gallery sliders. */
.hero-prev,
.hero-next {
  pointer-events: auto;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0.85px solid #bc9051;
  background: rgba(26, 15, 5, 0.42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #f6efe3;
  line-height: 0;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

/* .d-md-none only sets display at >=768 — the flex centring lives here */
@media (max-width: 767.98px) {
  .hero-prev,
  .hero-next {
    display: inline-flex;
  }
}

.hero-prev {
  left: 12px;
}

.hero-next {
  right: 12px;
}

.hero-prev:active,
.hero-next:active {
  background: #bc9051;
  color: #ffffff;
}

.hero-prev .slider-nav-ico,
.hero-next .slider-nav-ico {
  font-size: 16px;
}

/* .hero-bg kills pointer events for the scrim; the dots need them back */
.hero-swiper .hero-dots {
  pointer-events: auto;
  bottom: 18px;
  z-index: 2;
  /* the right third of the artwork is white — white bullets would vanish */
  width: 67.4%;
}

.hero-swiper .hero-dots .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin-inline: 5px;
  background: #fff;
  opacity: 0.45;
  transition: opacity 0.3s ease, width 0.3s ease;
}

.hero-swiper .hero-dots .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 5px;
  opacity: 1;
  background: var(--gold, #c9a35c);
}

/* ---------- Navbar ---------- */
/* pinning + flex row via .fixed-top .d-flex .align-items-center .justify-content-between .gap-4 */
.hero-nav {
  z-index: 1035; /* above rail (1030), below Bootstrap offcanvas backdrop (1040) */
  /* Figma: nav row x=120 → 1837 on the 1920 canvas (120px left / 83px right) */
  padding-inline: 6.25% 4.32%;
  padding-block: 12px;
  /* solid bar at rest too — the banner now sits below the nav, not under it */
  background: linear-gradient(180deg, rgba(26, 15, 5, 0.97) 0%, rgba(36, 23, 8, 0.92) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: box-shadow 0.4s ease, padding 0.35s ease;
}

.hero-nav.is-scrolled {
  padding-block: 8px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}

/* Logo — Figma box 142x86, source PNG has large transparent padding,
   reproduced with the exact Figma crop (w 174.2%, h 161.79%, x -37.36%, y -31.25%)
   box via .position-relative .d-block .flex-shrink-0 .overflow-hidden */
.hero-logo {
  width: 110px;
  height: 66px;
  transition: transform 0.35s ease;
  transform-origin: left center;
}

.hero-nav.is-scrolled .hero-logo {
  transform: scale(0.8);
}

.hero-logo-img {
  position: absolute;
  width: 174.2%;
  height: 161.79%;
  left: -37.36%;
  top: -31.25%;
  max-width: none;
}

/* .d-none .d-lg-flex .align-items-center */
.hero-menu {
  gap: clamp(24px, 3.125vw, 60px);
}

.hero-menu-link {
  font-family: var(--font-body, "Darker Grotesque"), sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 0.99vw, 19px);
  line-height: normal;
  color: #f7f5f0;
  text-decoration: none;
  text-transform: capitalize;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.hero-menu-link:hover,
.hero-menu-link:focus-visible {
  color: var(--gold);
}

/* Raheja Homes developer lockup, right of the nav (replaces the old CTA pill).
   Wide horizontal artwork, so the box carries the artwork's own aspect ratio.
   .d-none .d-md-inline-flex .align-items-center .flex-shrink-0 */
.hero-dev-logo {
  width: clamp(120px, 11.5vw, 190px);
  aspect-ratio: 2626 / 528;
  transition: transform 0.35s ease;
  transform-origin: right center;
}

/* shrinks in step with the project logo on the left */
.hero-nav.is-scrolled .hero-dev-logo {
  transform: scale(0.8);
}

/* Hamburger (offcanvas trigger, <992px only)
   .d-inline-flex .d-lg-none .align-items-center .justify-content-center .p-0 .border-0 .bg-transparent */
.hero-toggler {
  width: 44px;
  height: 44px;
  color: #f7f5f0;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.hero-toggler:hover,
.hero-toggler:focus-visible {
  color: var(--gold);
}

/* ---------- Headline block ----------
   The banner artwork carries its own headline, so .hero-content is
   .visually-hidden in the markup — kept in the DOM for the h1 / SEO only. */

/* ---------- Floating right-edge rail (fixed) ---------- */
/* .position-fixed .d-flex */
.hero-rail {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1030;
  flex-direction: column;
  gap: 13px;
  width: 64px;
}

/* .w-100 (+ .text-decoration-none on the call link) */
.hero-rail-enquire,
.hero-rail-call {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #b38b62;
  border-right: 0;
  cursor: pointer;
  transition: filter 0.25s ease;
}

.hero-rail-enquire {
  height: 164px;
  gap: 10px;
  background: linear-gradient(
    9.514deg,
    #644432 2.398%,
    #644432 30.592%,
    #704e39 48.352%,
    #75533c 66.564%,
    #a17b57 98.967%,
    #c3996c 107.72%
  );
}

.hero-rail-call {
  height: 150px;
  gap: 10px;
  background: #f2e8d8;
}

/* vertical rail reads bottom-to-top, so the icon sits below the label */
.hero-rail-mail {
  order: 1;
}

.hero-rail-enquire:hover,
.hero-rail-call:hover {
  filter: brightness(1.06);
}

/* ---------- Flash / shine sweep on the quick-contact buttons ---------- */
.hero-rail-enquire,
.hero-rail-call {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* the moving highlight band */
.hero-rail-enquire::after,
.hero-rail-call::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -120%;
  width: 60%;
  height: 220%;
  pointer-events: none;
  transform: rotate(18deg);
  animation: rail-flash 3.2s ease-in-out infinite;
}

.hero-rail-enquire::after {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 245, 225, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.hero-rail-call::after {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation-delay: 1.6s;
}

/* keep the label above the sweep so the gradient text stays crisp */
.hero-rail-text,
.hero-rail-phone,
.hero-rail-mail {
  position: relative;
  z-index: 1;
}

@keyframes rail-flash {
  0% {
    left: -120%;
  }
  55%,
  100% {
    left: 140%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rail-enquire::after,
  .hero-rail-call::after {
    animation: none;
    opacity: 0;
  }
}

/* Vertical text, reading bottom-to-top (Figma -90deg rotation) */
.hero-rail-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-body, "Darker Grotesque"), sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
  color: #ffffff;
}

/* "Call Now" gradient text — dark at the bottom ("C"), light toward the top */
.hero-rail-call-text {
  background: linear-gradient(
    180deg,
    #644432 0.582%,
    #644432 49.588%,
    #75533c 61.874%,
    #a17b57 85.423%,
    #c3996c 101.8%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* .d-inline-flex */
.hero-rail-phone {
  width: 20px;
  height: 20px;
}

/* .d-inline-flex — envelope icon on the Enquire button */
.hero-rail-mail {
  width: 20px;
  height: 20px;
  color: #ffffff;
}

.hero-rail-mail-img {
  width: 20px;
  height: 20px;
}

.hero-rail-phone-img {
  width: 20px;
  height: 20px;
  transform: rotate(-90deg); /* Figma rotates the phone glyph -90deg */
}

/* ============================================================
   Responsive
   ============================================================ */



@media (max-width: 1399.98px) {
  .hero-nav {
    padding-inline: 4.5% 3.5%;
  }
}

@media (max-width: 991.98px) {
  :root {
    --nav-h: 78px;
  }

  .hero-nav {
    padding-inline: 20px;
    padding-block: 10px;
  }

  .hero-logo {
    width: 96px;
    height: 58px;
  }
}

/* phones serve their own portrait 500x800 artwork */
@media (max-width: 767.98px) {
  .hero-bg-img {
    aspect-ratio: 500 / 800;
  }

  /* the portrait artwork has no white panel — the card is dropped here and the
     nav / rail CTAs carry the enquiry instead (.d-none on the wrapper) */
  .hero-swiper .hero-dots {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  :root {
    --nav-h: 68px;
  }

  .hero-nav {
    padding-block: 8px;
  }

  .hero-logo {
    width: 86px;
    height: 52px;
  }
}




/* ============================================================
   SECTION: overview  (light "OVERVIEW" intro + dark "HIGHLIGHTS" USP panel)
   Figma node 262:10218 — 1920 x 2599 (light 0–1218, dark 1218–2599)
   ============================================================ */

/* .sec-overview: .position-relative */

/* ---------- shared eyebrow (.align-items-center) ---------- */
.ov-eyebrow {
  display: inline-flex;
  gap: 12px;
}
/* .flex-shrink-0 */
.ov-eyebrow-star {
  width: 26px;
  height: 24px;
  transform: rotate(90deg);
}
.ov-eyebrow-text {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 0.9375vw, 18px);
  line-height: 1.556;
  letter-spacing: 0.389em;
  text-transform: uppercase;
  background-image: linear-gradient(
    267.12deg,
    #644432 2.51%,
    #644432 26.1%,
    #be9251 40.79%,
    #c49550 54.13%,
    #bc9051 67.23%,
    #644432 99.76%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   Part 1 — light intro
   ============================================================ */
/* .position-relative */
.ov-intro {
  z-index: 2;
  background: #f2e8d8;
  padding-top: clamp(60px, 6.198vw, 119px);
}

.ov-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 45%;
  column-gap: clamp(32px, 3.906vw, 75px);
  align-items: start;
}

.ov-copy {
  max-width: 784px;
}

.ov-copy .ov-eyebrow {
  margin-bottom: 12px;
}

.ov-title {
  margin: 0 0 12px;
  max-width: 660px;
  font-family: "Test Domaine Display", "Domaine Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.125vw, 60px);
  line-height: 1.2;
  text-transform: uppercase;
  color: #372523;
}

.ov-subtitle {
  margin: 0 0 24px;
  font-family: "Darker Grotesque", sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 1.667vw, 32px);
  line-height: normal;
  text-transform: capitalize;
  color: #5b3421;
}
.ov-subtitle strong {
  font-weight: 800;
}

.ov-body {
  margin: 0 0 24px;
}
.ov-body p {
  margin: 0;
  font-family: "Darker Grotesque", sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.042vw, 20px);
  line-height: 1.6;
  text-transform: capitalize;
  color: #333333;
}
.ov-body strong {
  font-weight: 800;
}

/* ---------- CTAs ---------- */
/* .d-flex .flex-wrap .align-items-center */
.ov-cta-row {
  gap: 24px;
}

.ov-cta {
  cursor: pointer;
  font-family: "Darker Grotesque", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: normal;
  text-transform: capitalize;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    filter 0.3s ease;
}
.ov-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(100, 68, 50, 0.18);
}

/* solid pill — gold keyline, inner gradient pill (.d-inline-flex) */
.ov-cta-solid {
  width: min(253px, 100%);
  height: 66px;
  padding: 6px;
  background: transparent;
  border: 1px solid #cda866;
  border-radius: 42px;
}
/* .flex-grow-1 .h-100 .d-flex .align-items-center .justify-content-center */
.ov-cta-solid-inner {
  border: 1px solid rgba(217, 189, 119, 0.4); /* var(--gold) @ 40% */
  border-radius: 42px;
  background: linear-gradient(
    90deg,
    #644432 0.58%,
    #644432 49.59%,
    #75533c 61.87%,
    #a17b57 85.42%,
    #c3996c 101.8%
  );
  color: #ffffff;
}

/* Download Brochure — same solid construction, just wider for the longer label
   and its icon. Both CTAs now share .ov-cta-solid, so ring, gradient, radius and
   height stay in one place. */
.ov-cta-solid--dl {
  width: min(273px, 100%);
}
.ov-cta-solid--dl .ov-cta-solid-inner {
  gap: 10px;
}
.ov-cta-dl-icon {
  font-size: 20px;
}

/* ---------- arch photo (right column) ---------- */
/* .position-relative .overflow-hidden — inner img: .w-100 .h-100 .object-fit-cover .d-block */
.ov-arch {
  margin: clamp(40px, 5.26vw, 101px) 0 0;
  width: 100%;
  max-width: 756.26px;
  aspect-ratio: 756.26 / 961.35;
  border-radius: 373.86px 373.86px 10px 10px;
}
/* .position-absolute */
.ov-arch-outline {
  inset: 2.556% 1.925% 1.849% 1.812%;
  border: 2px solid #e5c4ad;
  border-radius: 386.73px 386.73px 10px 10px;
  pointer-events: none;
}

/* ---------- sofa photo (overlaps dark panel) ---------- */
/* .position-relative .overflow-hidden — inner img: .w-100 .h-100 .object-fit-cover .d-block */
.ov-sofa {
  z-index: 2;
  margin: clamp(80px, 10.21vw, 196px) 0 clamp(-204px, -10.63vw, -64px);
  width: min(843px, 100%);
  aspect-ratio: 843 / 480.64;
  border-radius: 10px;
}

/* ============================================================
   Part 2 — dark HIGHLIGHTS / USP panel
   ============================================================ */
/* .position-relative .overflow-hidden */
.ov-usps {
  z-index: 1;
  background: #372523;
}

/* .position-relative .mx-auto */
.ov-usps-stage {
  max-width: 1920px;
  aspect-ratio: 1920 / 1381;
}

/* .justify-content-center */
.ov-eyebrow-dark {
  position: absolute;
  top: 24.69%;
  left: 0;
  width: 100%;
  display: flex;
  z-index: 2;
}
.ov-eyebrow-dark .ov-eyebrow-text {
  background-image: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #ffce88;
}

/* decorative blurred gold glows */
/* .position-absolute — inner img: .w-100 .h-100 .d-block */
.ov-glow {
  width: 25.42%; /* 488 / 1920 */
  aspect-ratio: 488 / 491;
  z-index: 1;
  pointer-events: none;
}
.ov-glow-1 {
  left: 44.45%;
  top: 18.5%;
} /* Ellipse 1857 */
.ov-glow-2 {
  left: 17.65%; /* +7%, follows .ov-usp-2 */
  top: 26.9%;
} /* Ellipse 1858 */
.ov-glow-3 {
  left: 67.71%; /* -7%, follows .ov-usp-3 */
  top: 28.2%;
} /* Ellipse 1859 */
.ov-glow-4 {
  left: 14.58%; /* +7%, follows .ov-usp-4 */
  top: 56.23%;
} /* Ellipse 1856 */
.ov-glow-5 {
  left: 69.43%; /* -7%, follows .ov-usp-5 */
  top: 55.5%;
} /* Ellipse 1860 */

/* USP items — absolute scatter on desktop.
   Flush-left: the numerals all hang off the top-left of their block, so
   centred copy left every wrapped title (03, 05) sitting off-axis. The two
   side points form mirrored columns — equal width, equal margin from their
   own edge (7.4% | 20.52% ... 20.52% | 7.4%) — and share row tops. */
.ov-usp {
  position: absolute;
  /* above .ov-building (3): rows 04/05 sit at the tower's widest point, so the
     copy has to stay legible where it grazes the line art */
  z-index: 4;
  text-align: left;
}
.ov-usp-1 {
  left: 39.06%;
  top: 34.83%;
  width: 21.88%;
}
.ov-usp-2 {
  left: 12%;
  top: 43%;
  width: 19.4%;
}
.ov-usp-3 {
  left: 68.6%; /* mirrors .ov-usp-2: 100 - 12 - 19.4 */
  top: 43%;
  width: 19.4%;
}
.ov-usp-4 {
  left: 12%;
  top: 72.27%;
  width: 19.4%;
}
.ov-usp-5 {
  left: 68.6%;
  top: 72.27%;
  width: 19.4%;
}

/* Slider scaffold, inert here: the container and wrapper generate no boxes, so
   each .ov-usp keeps positioning against .ov-usps-stage exactly as before.
   Switched on below 992px, where the points become a real swiper. */
.ov-usps-swiper,
.ov-usps-swiper > .swiper-wrapper {
  display: contents;
}
.ov-usps-nav {
  display: none;
}
/* .swiper-slide would otherwise force height:100% on the scattered points */
.ov-usp.swiper-slide {
  height: auto;
}

.ov-usp-num {
  /* exact PP Editorial Old numerals exported from Figma as SVG (opacity baked in) */
  --ov-num-h: clamp(56px, 5.573vw, 107px); /* 107px glyph @ 1920 */
  position: absolute;
  z-index: 0;
  height: var(--ov-num-h);
  width: auto;
  pointer-events: none;
}
.ov-usp-1 .ov-usp-num,
.ov-usp-2 .ov-usp-num,
.ov-usp-3 .ov-usp-num,
.ov-usp-4 .ov-usp-num,
.ov-usp-5 .ov-usp-num {
  left: calc(var(--ov-num-h) * -0.45);
  top: calc(var(--ov-num-h) * -0.9);
}

/* .position-relative */
.ov-usp-title {
  z-index: 1;
  margin: 0 0 5px;
  font-family: "PP Editorial Old", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(18px, 1.406vw, 27px);
  line-height: 1.5;
  text-transform: capitalize;
  color: #ffce88;
}
/* .position-relative */
.ov-usp-text {
  z-index: 1;
  margin: 0;
  font-family: "Darker Grotesque", sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.042vw, 20px);
  line-height: 1.75;
  color: #ffffff;
}

/* building render, pinned to panel bottom (.overflow-hidden) */
.ov-building {
  position: absolute;
  left: 35.42%; /* centred: (100 - 29.17) / 2 */
  bottom: 0;
  width: 29.17%; /* 560 / 1920 — portrait render, kept clear of the side columns */
  aspect-ratio: 1122 / 1402;
  margin: 0;
  z-index: 3;
}
/* .position-absolute .top-0 .start-0 .d-block .object-fit-cover */
.ov-building img {
  width: 100%;
  height: 100%;
  max-width: none;
}

/* ---- Highlights choreography -------------------------------------------
   The tower draws itself in bottom-up first, then the five points land one
   by one, 01 → 05.

   Desktop: all six live in one absolutely-positioned stage and come into view
   together, so a single .is-revealed on .ov-usps-stage drives the whole
   sequence — the order is then pure CSS delay and can't race. AOS is
   deliberately not used on these elements; it owns transform/opacity and
   fires on its own offset, which is what would break the ordering.

   Below 992px the stage is a stacked column with the tower LAST, so one
   sequence would strand the points; there each block carries its own
   .is-revealed instead (see the media query — delays are dropped).

   The clip lives on the <img>, never on .ov-building itself: Chrome applies
   an element's own clip-path when computing IntersectionObserver rects, so
   clipping an observed element zeroes its area and it can never be seen to
   intersect — the tower would stay hidden for good. */
.ov-building img {
  clip-path: inset(100% 0 0 0);
  opacity: 0;
  transform: translateY(28px);
  transition: clip-path 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.7s ease-out;
  will-change: clip-path, transform;
}
.ov-usps-stage.is-revealed .ov-building img,
.ov-building.is-revealed img {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* the points: each rises and fades, its numeral swelling a beat behind */
.ov-usp {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease-out,
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ov-usp .ov-usp-num {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1s ease-out, transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ov-usps-stage.is-revealed .ov-usp,
.ov-usps-stage.is-revealed .ov-usp .ov-usp-num,
.ov-usp.is-revealed,
.ov-usp.is-revealed .ov-usp-num {
  opacity: 1;
  transform: none;
}

/* stagger — starts as the tower is finishing its wipe, 150ms apart */
.ov-usp-1 {
  --ov-delay: 0.95s;
}
.ov-usp-2 {
  --ov-delay: 1.1s;
}
.ov-usp-3 {
  --ov-delay: 1.25s;
}
.ov-usp-4 {
  --ov-delay: 1.4s;
}
.ov-usp-5 {
  --ov-delay: 1.55s;
}
.ov-usps-stage.is-revealed .ov-usp {
  transition-delay: var(--ov-delay, 0s);
}
.ov-usps-stage.is-revealed .ov-usp .ov-usp-num {
  transition-delay: calc(var(--ov-delay, 0s) + 0.08s);
}

@media (prefers-reduced-motion: reduce) {
  .ov-building img,
  .ov-usps-stage.is-revealed .ov-building img,
  .ov-building.is-revealed img,
  .ov-usp,
  .ov-usp .ov-usp-num,
  .ov-usps-stage.is-revealed .ov-usp,
  .ov-usp.is-revealed {
    clip-path: none;
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 991.98px) {
  .ov-intro {
    padding-top: 64px;
  }
  .ov-intro-grid {
    display: flex;
    flex-direction: column;
  }
  .ov-intro-left,
  .ov-intro-right {
    display: contents;
  }
  .ov-copy {
    order: 1;
    max-width: none;
  }
  .ov-arch {
    order: 2;
    margin: 48px auto 0;
    width: min(100%, 520px);
  }
  .ov-sofa {
    order: 3;
    margin: 40px 0 -80px;
    width: 100%;
  }

  /* dark panel becomes stacked flow */
  .ov-usps-stage {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 44px;
    padding: 96px 20px 0;
  }
  .ov-eyebrow-dark {
    position: static;
    width: auto;
  }
  .ov-usp {
    position: static;
    width: min(100%, 420px);
    text-align: center;
  }
  .ov-usp-num {
    position: static;
    display: block;
    height: clamp(64px, 12vw, 96px);
    margin-inline: auto;
    /* margin-bottom: clamp(-34px, -3vw, -18px); */
    margin-bottom: 20px;
  }

  /* ---- the five points become a slider ---- */
  .ov-usps-swiper {
    display: block;
    width: 100%;
  }
  .ov-usps-swiper > .swiper-wrapper {
    display: flex;
    align-items: flex-start;
  }
  .ov-usp.swiper-slide {
    width: 100%;
    max-width: none;
    height: auto;
  }
  .ov-usps-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
  }
  /* two classes deep so this beats Swiper's own .swiper-pagination-horizontal
     rules, which are also two deep and would otherwise re-absolute the dots */
  .ov-usps-nav .ov-usps-dots {
    display: flex;
    position: static;
    justify-content: center;
    width: auto;
    gap: 10px;
    margin: 0;
  }
  .ov-usps-prev,
  .ov-usps-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 0.85px solid #bc9051;
    color: #bc9051;
    line-height: 0;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .ov-usps-prev:hover,
  .ov-usps-next:hover {
    background-color: #bc9051;
    color: #372523;
  }
  .ov-usps-dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    background: #ffce88;
    opacity: 0.3;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .ov-usps-dots .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.25);
  }
  .ov-building {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: 440px;
    margin: 12px auto 0;
  }
  .ov-glow {
    width: 55%;
  }
}

@media (max-width: 575.98px) {
  .ov-intro {
    padding-top: 48px;
  }
  .ov-sofa {
    margin-bottom: -56px;
  }
  .ov-usps-stage {
    padding-top: 80px;
    gap: 36px;
  }
  .ov-cta-row {
    gap: 16px;
  }
}
/* ============================================================
   CONFIGURATIONS — "A Home For Every Chapter of Life" (sec-confo)
   Figma 91:181653 — 1920x1080 full-bleed Swiper section
   ============================================================ */

/* .position-relative .overflow-hidden — .confo-swiper carries .w-100 */
.sec-confo {
  background: #241708;
}

/* ---------- Slide layout : photo left (1114/1920) + card right (806/1920) ---------- */
/* .position-relative .d-flex .align-items-stretch — relative so each slide can
   carry its own .confo-head, which used to sit on the section and stayed put
   while the slides moved behind it */
.confo-slide {
  height: min(56.25vw, 1080px); /* 1080 @ 1920, scales proportionally below */
}

/* .position-relative .overflow-hidden */
.confo-photo {
  width: 58.0208%; /* 1114/1920 */
  background: #241708;
}

/* The render fills its frame with a centred cover crop.
   This used to carry the Figma crop box (172.35% wide, left-aligned), which
   showed only the left ~58% of each render — and at mobile widths, where the
   frame goes full-bleed, that slab was all you ever saw. Filling the frame
   keeps the subject centred at every breakpoint. */
/* .position-absolute .start-0 .object-fit-cover */
.confo-photo-img {
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-position: center;
}

/* .position-absolute */
.confo-photo-shade {
  inset: 0;
  pointer-events: none;
}
.confo-photo-shade--one {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.676) 75.241%,
    rgba(0, 0, 0, 0.828) 85.52%,
    #000 100%
  );
}
.confo-photo-shade--two {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000 100%);
}

/* .position-absolute .text-nowrap */
.confo-impression {
  right: clamp(12px, 0.885vw, 17px);
  bottom: clamp(14px, 1.4vw, 27px);
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 0.9375vw, 18px);
  line-height: 1.033;
  text-transform: uppercase;
  color: #fff;
}

/* ---------- Cards ---------- */
/* .d-flex .align-items-center .justify-content-center */
.confo-card {
  width: 41.9792%; /* 806/1920 */
}
.confo-card--one {
  background: #f2e8d8;
}
.confo-card--two {
  background: #f3ece3;
}

/* .d-flex .flex-column .align-items-center .text-center */
.confo-card-inner {
  width: min(85%, clamp(300px, 28.34vw, 544px)); /* 544 @ 1920 */
  /* reserves the nav-arrow row (51px + 40px gap @1920) inside the centered block, per Figma */
  padding-bottom: clamp(56px, 4.74vw, 91px);
}

/* Arched, blurred floor plan (slide 1) — 466x427, top radius 250, border #BC9051 (.overflow-hidden) */
.confo-arch {
  width: clamp(250px, 24.27vw, 466px);
  aspect-ratio: 466 / 427;
  border: 1px solid #bc9051;
  border-radius: 250px 250px 0 0;
  margin-bottom: clamp(24px, 2.084vw, 40px);
}

/* Rectangular blurred floor plan (slide 2) — 544x377, border #AD812D (.w-100 .overflow-hidden) */
.confo-plan-rect {
  aspect-ratio: 544 / 377;
  border: 1px solid #ad812d;
  margin-bottom: clamp(34px, 3.282vw, 63px);
}

/* Figma image fill is stretched into the frame (verified against render) + 3.4px layer blur */
/* .d-block .w-100 .h-100 .object-fit-fill */
.confo-plan-img {
  filter: blur(3.4px);
}

/* Card titles */
.confo-card-title {
  margin: 0 0 clamp(26px, 2.188vw, 42px);
  font-family: var(--font-display, "Gilda Display"), "Gilda Display", serif;
  font-weight: 400;
  font-size: clamp(34px, 3.125vw, 60px);
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #372523;
}
.confo-card-title-sub {
  display: inline-block;
  font-size: clamp(20px, 1.667vw, 32px);
  line-height: 1.875; /* 60px @ 32px */
  letter-spacing: 2px;
}
.confo-card-title--two {
  font-family: "Gilda Display", var(--font-display, serif), serif;
  line-height: 1.334; /* 80px @ 60px */
  white-space: nowrap;
}
.confo-sqft {
  font-size: clamp(20px, 1.667vw, 32px);
  letter-spacing: 2px;
}

/* Card 2 paragraph */
.confo-card-text {
  margin: 0 0 clamp(26px, 2.188vw, 42px);
  max-width: 501px;
  font-family: var(--font-body, "Montserrat"), "Montserrat", sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 0.834vw, 16px);
  line-height: 2;
  text-transform: capitalize;
  color: #333;
}

/* CTA — "Unlock Floor Plans & Price": double ring pill with brown-gold gradient core */
/* .position-relative .p-0 */
.confo-cta {
  width: clamp(230px, 15.21vw, 292px);
  height: clamp(54px, 3.438vw, 66px);
  background: none;
  border: 1px solid #cda866;
  border-radius: 42px;
  cursor: pointer;
  transition: filter 0.3s ease;
}
.confo-cta::before {
  content: "";
  position: absolute;
  inset: 7px 8px 6px;
  background: linear-gradient(
    90deg,
    #644432 0.58%,
    #644432 49.59%,
    #75533c 61.87%,
    #a17b57 85.42%,
    #c3996c 101.8%
  );
  border: 1px solid rgba(217, 189, 119, 0.4);
  border-radius: 42px;
}
.confo-cta:hover {
  filter: brightness(1.1);
}
/* .position-relative .text-nowrap */
.confo-cta-label {
  z-index: 1;
  font-family: "Darker Grotesque", sans-serif;
  font-weight: 600;
  font-size: clamp(17px, 1.042vw, 20px);
  line-height: normal;
  text-transform: capitalize;
  color: #fff;
}

/* CTA — "Download Brochure": white pill, gradient gold text + download icon
   .d-flex .align-items-center .justify-content-center .p-0 .border-0 .rounded-pill */
.confo-dl {
  gap: 10px;
  width: clamp(230px, 14.85vw, 285px);
  height: clamp(50px, 3.073vw, 59px);
  background: #fff;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}
.confo-dl:hover {
  box-shadow: 0 6px 18px rgba(173, 129, 45, 0.25);
}
.confo-dl-icon {
  width: clamp(20px, 1.25vw, 24px);
  height: auto;
}
.confo-dl-label {
  font-family:
    "Avenir", "Avenir Next", var(--font-body, "Montserrat"), sans-serif;
  font-weight: 800;
  font-size: clamp(14px, 0.9375vw, 18px);
  text-transform: uppercase;
  white-space: nowrap;
  background-image: linear-gradient(
    90deg,
    #ad812d 1.94%,
    #ad812d 3.06%,
    #b38833 12.94%,
    #c39d45 28.94%,
    #cfab52 36.94%,
    #b78d2e 96.94%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- Section heading overlay (bottom-left, over the photo) ---------- */
/* .position-absolute */
/* One per slide, absolute inside .confo-slide. Both the desktop `bottom` and the
   mobile `top` below are measured from the slide's top edge, which is where the
   section's top edge was too — so the offsets are unchanged from when this sat
   on the section. */
.confo-head {
  z-index: 4;
  left: clamp(20px, 6.25vw, 120px);
  bottom: clamp(32px, 3.698vw, 71px);
  width: min(880px, 47vw);
  pointer-events: none;
}

/* .d-flex .align-items-center */
.confo-eyebrow {
  gap: 12px;
  margin-bottom: clamp(18px, 1.667vw, 32px);
}
.confo-eyebrow-star {
  width: clamp(18px, 1.354vw, 26px);
  height: auto;
  transform: rotate(90deg);
}
.confo-eyebrow-text {
  margin: 0;
  font-family: var(--font-body, "Montserrat"), "Montserrat", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 0.9375vw, 18px);
  line-height: 1.556;
  letter-spacing: clamp(4px, 0.365vw, 7px);
  text-transform: uppercase;
  color: #ffce88;
  white-space: nowrap;
}

.confo-title {
  margin: 0;
  font-family: var(--font-display, "Gilda Display"), "Gilda Display", serif;
  font-weight: 400;
  font-size: clamp(30px, 3.125vw, 60px);
  line-height: 1.334; /* 80px */
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
}

/* ---------- Custom Swiper navigation (centered under the card column) ---------- */
/* .position-absolute .d-flex .align-items-center */
.confo-nav {
  z-index: 5;
  left: 79.01%; /* centre of the 806px card column */
  bottom: clamp(60px, 7.344vw, 141px);
  transform: translateX(-50%);
  gap: 13.6px;
}
/* .p-0 .rounded-circle .bg-transparent — inner svg: .w-100 .h-100 .d-block */
.confo-prev,
.confo-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(42px, 2.657vw, 51px);
  height: clamp(42px, 2.657vw, 51px);
  border: 0.85px solid #bc9051;
  color: #bc9051;
  line-height: 0;
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}
.confo-prev:hover,
.confo-next:hover {
  background: #bc9051;
  color: #ffffff;
  transform: scale(1.06);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1199.98px) {
  .confo-head {
    width: min(880px, 52vw);
  }
}

@media (max-width: 991.98px) {
  .sec-confo {
    --confo-ph: clamp(360px, 66vw, 560px);
  }

  .confo-slide {
    flex-direction: column;
    height: auto;
  }
  /* content first, configuration photo after it */
  .confo-card {
    order: 1;
    width: 100%;
    flex: 1 0 auto;
    padding: 56px 24px 132px;
  }
  .confo-photo {
    order: 2;
    width: 100%;
    height: var(--confo-ph);
  }
  .confo-card-inner {
    width: min(544px, 100%);
  }

  .confo-arch {
    margin-bottom: 28px;
  }
  .confo-plan-rect {
    margin-bottom: 36px;
  }

  /* the photo is last now, so the slide's bottom edge IS the photo's bottom —
     the head keeps the same 24px lift off it that it had when the photo led */
  .confo-head {
    left: 20px;
    right: 20px;
    width: auto;
    top: auto;
    bottom: 24px;
    transform: none;
  }
  .confo-title {
    font-size: clamp(26px, 4.6vw, 44px);
  }
  .confo-eyebrow {
    margin-bottom: 14px;
  }

  /* arrows tuck into the card's bottom padding, clear of the photo below —
     measured up from the slide bottom, so past the photo's full height */
  .confo-nav {
    left: 50%;
    bottom: calc(var(--confo-ph) + 48px);
  }
  .confo-impression {
    right: 14px;
    bottom: 14px;
    font-size: 11px;
  }
}

@media (max-width: 767.98px) {
  .sec-confo {
    --confo-ph: clamp(340px, 78vw, 480px);
  }
  .confo-card {
    padding: 44px 20px 124px;
  }
  .confo-card-title--two {
    white-space: normal;
  }
}

@media (max-width: 575.98px) {
  .sec-confo {
    --confo-ph: clamp(300px, 96vw, 420px);
  }
  .confo-card {
    padding: 40px 16px 116px;
  }
  .confo-arch {
    width: min(100%, 320px);
  }
  .confo-title {
    font-size: clamp(24px, 6.9vw, 30px);
    letter-spacing: 1px;
  }
  .confo-eyebrow-text {
    letter-spacing: 3px;
    font-size: 12px;
  }
  .confo-card-title {
    font-size: clamp(30px, 9vw, 34px);
  }
  .confo-nav {
    bottom: calc(var(--confo-ph) + 40px);
  }
}
/* ============================================================
   LOCATION — "Kalyani Nagar. Timeless. Well-Connected."
   Figma node 91:181697 (1920 x 1377)
   ============================================================ */

/* .position-relative .overflow-hidden */
.sec-location {
  background: #f2e8d8;
  padding-top: clamp(48px, 4.167vw, 80px); /* Figma: content top 80 */
}

@media (min-width: 992px) {
  .sec-location {
    /* section height driven by the absolutely-positioned map (map bottom ~1400,
       frame is 1377 — bottom 23px of the map is clipped by design) */
    min-height: min(71.72vw, 1377px);
  }
}

/* ---------- decorative flower texture (bottom-left, 15%) ---------- */
/* .position-absolute */
.loc-flower {
  z-index: 0;
  left: -91px;
  bottom: -99px;
  width: 532px;
  height: auto;
  opacity: 0.15;
  transform: rotate(27.48deg);
  pointer-events: none;
}

/* ---------- left column ---------- */
/* .position-relative */
.loc-content {
  z-index: 2;
}

/* .d-flex .flex-column */
.loc-head {
  gap: 12px;
  max-width: 859px;
}

/* .d-flex .align-items-center */
.loc-eyebrow {
  gap: 12px;
}

/* .flex-shrink-0 */
.loc-eyebrow-icon {
  width: 20px;
  height: 20px;
  transform: rotate(90deg);
}

.loc-eyebrow-text {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 0.938vw, 18px);
  line-height: 1.556; /* 28/18 */
  letter-spacing: clamp(4px, 0.365vw, 7px);
  text-transform: uppercase;
  background: linear-gradient(
    263.63deg,
    #644432 2.51%,
    #644432 26.1%,
    #be9251 40.79%,
    #c49550 54.13%,
    #bc9051 67.23%,
    #644432 99.76%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.loc-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.125vw, 60px); /* Figma 60 */
  line-height: 1.2;
  text-transform: uppercase;
  color: #372523;
  max-width: 859px;
}

.loc-desc {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(16px, 1.042vw, 20px); /* Figma 20 */
  line-height: 1.6; /* 32/20 */
  text-transform: capitalize;
  color: #333333;
  max-width: 616px;
}

/* ---------- accordion (Bootstrap, restyled per Figma) ---------- */
.loc-accordion {
  margin-top: clamp(36px, 3.021vw, 58px); /* Figma: 429 - (80+291) = 58 */
  max-width: 547px;
}

.loc-accordion .accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 0.6px solid var(--gold);
  border-radius: 0;
}

.loc-accordion .accordion-button {
  display: flex;
  align-items: center;
  gap: 20px; /* icon 37 -> label at 57 */
  background: transparent;
  color: #3c1300;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(22px, 1.667vw, 32px); /* Figma 32 */
  line-height: 1.7;
  min-height: clamp(64px, 4.167vw, 80px); /* Figma 80 */
  padding: 0 19px 0 0; /* chevron right inset 19 */
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.loc-accordion .accordion-button:focus {
  box-shadow: none;
  outline: 0;
}

.loc-accordion .accordion-button:not(.collapsed) {
  background: #644432;
  color: #ffffff;
  border-bottom: 0.6px solid var(--gold);
  box-shadow: none;
}

/* .flex-shrink-0 */
.loc-acc-icon {
  width: clamp(28px, 1.927vw, 37px);
  height: auto;
}

/* chevron — Flaticon glyph (fi-rr-angle-small-down) in place of the Figma svg */
.loc-accordion .accordion-button::after {
  content: "\e07c";
  font-family: "uicons-regular-rounded";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  flex-shrink: 0;
  margin-left: auto;
  width: auto;
  height: auto;
  font-size: 20px;
  color: #644432;
  background-image: none;
  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

.loc-accordion .accordion-button:not(.collapsed)::after {
  color: #ffffff;
  transform: rotate(-180deg);
}

.loc-accordion .accordion-body {
  padding: 15px 0; /* Figma: 153 body = 15 + 123 + 15 */
}

.loc-acc-list {
  margin: 0;
  padding-left: 30px;
  max-width: 478px;
  list-style: disc;
}

.loc-acc-list li {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(16px, 1.042vw, 20px); /* Figma 20 */
  line-height: 2.05; /* 41/20 */
  color: #333333;
  text-transform: capitalize;
}

.loc-acc-list li::marker {
  color: #333333;
  font-size: 0.65em;
}

/* ---------- map (right, bleeds to viewport edge) ---------- */
.loc-map-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 40px 0 0;
  aspect-ratio: 979 / 1280;
}

@media (min-width: 992px) {
  .loc-map-wrap {
    position: absolute;
    top: min(6.25vw, 120px); /* Figma 120 */
    right: 0;
    width: min(50.99vw, 979px); /* Figma 979 */
    margin: 0;
  }
}

/* keep the map clear of the 547px accordion on narrow desktops */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .loc-map-wrap {
    width: 42vw;
  }
}

/* .w-100 .h-100 .object-fit-cover */
.loc-map {
  position: absolute;
  inset: 0;
  object-position: center top;
}

/* left-edge fade of the map into the cream background */
.loc-map-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    258deg,
    rgba(242, 232, 216, 0) 75.95%,
    rgba(242, 232, 216, 0.81) 86.88%,
    #f2e8d8 92.68%
  );
}

/* .position-absolute .text-nowrap */
.loc-map-note {
  z-index: 2;
  right: clamp(16px, 6.3vw, 121px); /* Figma: 121 from right */
  bottom: clamp(12px, 1.93vw, 37px); /* Figma: 37 from map bottom */
  margin: 0;
  background: #f2e8d8;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(14px, 1.042vw, 20px); /* Figma 20 */
  line-height: 1.6; /* 32/20 */
  color: #372523;
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
  .sec-location {
    padding-bottom: 0; /* map is full-bleed last element */
  }

  .loc-map-wrap {
    margin-top: 40px;
  }

  .loc-flower {
    width: 300px;
    left: -60px;
    bottom: -60px;
  }
}

@media (max-width: 575.98px) {
  .loc-accordion .accordion-button {
    gap: 14px;
  }

  .loc-acc-list {
    padding-left: 24px;
  }
}
/* ============================================================
   GALLERY — "The Amore Experience"  (Figma 91:181736, 1920 canvas)
   ============================================================ */

/* .overflow-hidden */
.sec-gallery {
  background: #372523;
  padding: clamp(56px, 4.166vw, 80px) 0 clamp(48px, 3.49vw, 67px);
}

/* ---------- Header ---------- */

/* .d-flex .flex-column .align-items-center .text-center */
.sec-gallery .gal-head {
  gap: 12px;
}

/* .d-flex .align-items-center .justify-content-center */
.sec-gallery .gal-eyebrow {
  gap: 12px;
}

.sec-gallery .gal-eyebrow-icon {
  width: 22px;
  height: auto;
  transform: rotate(90deg);
}

.sec-gallery .gal-eyebrow-text {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 0.9375vw, 18px);
  line-height: 28px;
  letter-spacing: clamp(4px, 0.3645vw, 7px);
  text-transform: uppercase;
  color: #ffce88;
}

.sec-gallery .gal-title {
  margin: 0;
  font-family: var(--font-display, "Test Domaine Display", serif);
  font-weight: 400;
  font-size: clamp(32px, 3.125vw, 60px);
  line-height: 1.059;
  text-transform: uppercase;
  color: #ffffff;
}

/* ---------- Tabs ---------- */

/* .d-flex .justify-content-center */
.sec-gallery .gal-tabs-wrap {
  margin-top: clamp(28px, 2.083vw, 40px);
}

/* .position-relative .d-flex */
.sec-gallery .gal-tabs {
  gap: clamp(40px, 3.75vw, 72px);
}

/* faint full-width baseline under both tabs (white @ 29%) */
.sec-gallery .gal-tabs::after {
  content: "";
  position: absolute;
  inset-inline: -2px;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.29);
}

/* .position-relative .bg-transparent .border-0 */
.sec-gallery .gal-tab {
  appearance: none;
  padding: 0 21px 10px;
  cursor: pointer;
  font-family: "Darker Grotesque", sans-serif;
  font-weight: 500;
  font-size: clamp(19px, 1.25vw, 24px);
  line-height: 1.375;
  text-transform: capitalize;
  color: #ffce88;
  transition: opacity 0.3s ease;
}

.sec-gallery .gal-tab:hover {
  opacity: 0.8;
}

/* gold active underline (sits above the faint baseline) */
.sec-gallery .gal-tab::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #ffce88;
  opacity: 0;
  transform: scaleX(0.4);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  z-index: 1;
}

.sec-gallery .gal-tab.is-active {
  font-weight: 600;
}

.sec-gallery .gal-tab.is-active::before {
  opacity: 1;
  transform: scaleX(1);
}

/* ---------- Carousel ---------- */

.sec-gallery .gal-slider-zone {
  margin-top: clamp(36px, 3.125vw, 60px);
  /* proportional sizing driven by the active-slide width (653px @ 1920) */
  --gal-slide-w: min(653px, 34.01vw);
  /* One timing for the whole gallery. Must stay equal to `speed` on the Swiper
     instance in main.js, or the card morph and the slide travel drift apart. */
  --gal-dur: 1000ms;
  --gal-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* .gal-swiper carries .w-100 .overflow-hidden */

/* Swiper translates the wrapper linearly unless told otherwise, which fights
   the eased card morph and reads as a snap. Hand it the same curve. */
.sec-gallery .gal-swiper {
  --swiper-wrapper-transition-timing-function: var(--gal-ease);
}

.sec-gallery .gal-swiper .swiper-slide {
  width: var(--gal-slide-w);
  height: calc(
    var(--gal-slide-w) * 0.9143
  ); /* 597px @ 1920 — side-card height */
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.sec-gallery .gal-card {
  position: relative;
  margin: 0;
  width: calc(var(--gal-slide-w) * 0.7519); /* 491px @ 1920 */
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  transform: none;
  transition:
    width var(--gal-dur) var(--gal-ease),
    height var(--gal-dur) var(--gal-ease),
    margin var(--gal-dur) var(--gal-ease),
    transform var(--gal-dur) var(--gal-ease);
  will-change: transform;
}

/* .gal-card img carries .w-100 .h-100 .object-fit-cover .d-block */

/* Fancybox trigger — wraps the image and fills the card (.d-block .w-100 .h-100) */
.sec-gallery .gal-zoom {
  cursor: zoom-in;
}

/* Fancybox fits the image to this slide's padding box — NOT to the `margin`
   option, which only feeds its zoom animation. Its stock 44px/0 leaves the
   image running almost edge to edge, so inset it here instead. Loaded after
   jquery.fancybox.min.css, so no !important needed. */
.fancybox-slide--image {
  padding: clamp(56px, 12vh, 120px) clamp(16px, 8vw, 160px);
}

/* inset gold frame line — visible on the active (centre) card only */
.sec-gallery .gal-card::after {
  content: "";
  position: absolute;
  inset: 14px 14px 14px 15px;
  border: 1px solid #bc9051;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--gal-dur) var(--gal-ease);
}

/* side cards: perspective tilt, outer edge receding (per Figma) */
.sec-gallery .gal-swiper .swiper-slide-prev {
  justify-content: flex-end;
}

.sec-gallery .gal-swiper .swiper-slide-prev .gal-card {
  /* inner edge recedes toward page centre (Figma); scaleX keeps the 491px footprint */
  transform-origin: left center;
  transform: perspective(1680px) rotateY(18deg) scaleX(1.162);
}

.sec-gallery .gal-swiper .swiper-slide-next {
  justify-content: flex-start;
}

.sec-gallery .gal-swiper .swiper-slide-next .gal-card {
  transform-origin: right center;
  transform: perspective(1680px) rotateY(-18deg) scaleX(1.162);
}

/* active (centre) card: full width, shorter, dropped 28px, gold frame on */
.sec-gallery .gal-swiper .swiper-slide-active .gal-card {
  width: 100%;
  height: calc(var(--gal-slide-w) * 0.8009); /* 523px @ 1920 */
  margin-top: calc(var(--gal-slide-w) * 0.0429); /* 28px @ 1920 */
  transform: none;
}

.sec-gallery .gal-swiper .swiper-slide-active .gal-card::after {
  opacity: 1;
}

/* ---------- Arrows ---------- */

/* .d-flex .align-items-center .justify-content-center */
.sec-gallery .gal-nav {
  gap: 13.6px;
  margin-top: 20px;
}

/* .p-0 .rounded-circle .bg-transparent — inner svg: .w-100 .h-100 .d-block */
.sec-gallery .gal-prev,
.sec-gallery .gal-next {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 51px;
  height: 51px;
  border: 0.85px solid #bc9051;
  color: #bc9051;
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    opacity 0.3s ease;
}

.sec-gallery .gal-prev:hover,
.sec-gallery .gal-next:hover {
  background: #bc9051;
  color: #ffffff;
  transform: scale(1.06);
}

.sec-gallery .gal-prev:active,
.sec-gallery .gal-next:active {
  transform: scale(0.96);
}

/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {
  .sec-gallery .gal-slider-zone {
    --gal-slide-w: min(520px, 62vw);
  }

  .sec-gallery .gal-card,
  .sec-gallery .gal-card::after {
    border-radius: 16px;
  }

  .sec-gallery .gal-card::after {
    inset: 10px;
  }
}

@media (max-width: 767.98px) {
  .sec-gallery .gal-eyebrow-text {
    line-height: 22px;
  }

  .sec-gallery .gal-slider-zone {
    --gal-slide-w: 78vw;
  }

  .sec-gallery .gal-swiper .swiper-slide-prev .gal-card {
    transform-origin: left center;
    transform: perspective(1100px) rotateY(14deg) scaleX(1.12);
  }

  .sec-gallery .gal-swiper .swiper-slide-next .gal-card {
    transform-origin: right center;
    transform: perspective(1100px) rotateY(-14deg) scaleX(1.12);
  }

  .sec-gallery .gal-nav {
    margin-top: 16px;
  }

  .sec-gallery .gal-prev,
  .sec-gallery .gal-next {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 575.98px) {
  .sec-gallery .gal-tabs {
    gap: 28px;
  }

  .sec-gallery .gal-tab {
    padding: 0 14px 8px;
  }

  .sec-gallery .gal-slider-zone {
    --gal-slide-w: 84vw;
  }

  .sec-gallery .gal-card,
  .sec-gallery .gal-card::after {
    border-radius: 12px;
  }

  .sec-gallery .gal-card::after {
    inset: 8px;
  }
}
/* ==========================================================================
   LEGACY — "A Legacy of Trust" (About Pristine Developers)  |  #about
   Figma node 262:5253 — 1920x1209, cream bg
   ========================================================================== */

/* .overflow-hidden */
.sec-legacy {
  background: #f2e8d8;
  padding-top: clamp(64px, 5.729vw, 110px); /* Figma: 110 */
  padding-bottom: clamp(40px, 3.4375vw, 66px); /* Figma: 1209 - 1143 = 66 */
}

/* ---------- Head row: eyebrow + title (left) / body copy (right) ---------- */

/* .d-flex .align-items-start .position-relative */
.legacy-head {
  gap: 24px;
  z-index: 2; /* above the pulled-up visual */
}

/* .d-flex .flex-column .flex-shrink-0 */
.legacy-head-left {
  gap: 12px;
  margin-left: 7.262%; /* (242-120)/1680 */
}

/* .d-flex .align-items-center */
.legacy-eyebrow {
  gap: 12px;
}

/* 20px design slot; svg canvas is 26x24 (stroke bleed), rotated 90deg per Figma */
/* .d-inline-flex .align-items-center .justify-content-center .flex-shrink-0 */
.legacy-sparkle-box {
  width: 20px;
  height: 20px;
}

/* .flex-shrink-0 */
.legacy-sparkle {
  width: 26px;
  height: 24px;
  max-width: none;
  transform: rotate(90deg);
}

.legacy-eyebrow-text {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 0.9375vw, 18px); /* Figma: 18 */
  line-height: 1.556; /* Figma: 28px */
  letter-spacing: clamp(3px, 0.365vw, 7px); /* Figma: 7px */
  text-transform: uppercase;
  background-image: linear-gradient(
    261.4deg,
    #644432 2.51%,
    #644432 26.1%,
    #be9251 40.79%,
    #c49550 54.13%,
    #bc9051 67.23%,
    #644432 99.76%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.legacy-title {
  margin: 0;
  font-family: var(--font-display, "Test Domaine Display", serif);
  font-weight: 400;
  font-size: clamp(32px, 3.125vw, 60px); /* Figma: 60 */
  line-height: 1.2;
  text-transform: uppercase;
  color: #372523;
}

.legacy-copy {
  flex: 0 1 710px; /* Figma: w 710 */
  margin: 16px 7.857% 0 auto; /* top 126 vs 110; right gap 132/1680 */
  font-family: "Darker Grotesque", sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.042vw, 20px); /* Figma: 20 */
  line-height: 1.6; /* Figma: 32px */
  color: #333333;
  text-transform: capitalize;
}

/* ---------- Visual composite: towers cutout + aerial strip + logo ---------- */

/* .position-relative */
.legacy-body {
  z-index: 1;
  /* head flow bottom 222, towers frame top 176 -> overlap 46px @1920 */
  margin-top: clamp(-46px, -2.3958vw, -20px);
}

/* .position-relative */
.legacy-visual {
  /* towers frame y 176 -> aerial bottom y 1143 => 967 tall x 1680 wide */
  aspect-ratio: 1680 / 967;
}

/* .position-absolute .top-0 .start-0 .w-100 */
.legacy-towers {
  z-index: 1;
}

/* .position-absolute .bottom-0 .start-0 .w-100 */
.legacy-aerial {
  z-index: 2; /* aerial paints over the towers' cut base, per Figma */
}

/* Logo frame 142x86 @1920, cropped view of the full logo artwork (Figma crop) */
/* .position-absolute .overflow-hidden .d-block */
.legacy-logo {
  z-index: 3;
  right: 1.31%; /* 22/1680 */
  bottom: 3.413%; /* 33/967  */
  width: clamp(84px, 8.452%, 142px); /* 142/1680 */
  aspect-ratio: 71 / 43;
}

.legacy-logo img {
  position: absolute;
  left: -59.65%;
  top: -32.45%;
  width: 218.46%;
  height: 165.56%;
  max-width: none;
}

/* ---------- Stats 2x2 grid (overlays the cream area right of the towers) ---------- */

.legacy-stats {
  position: absolute;
  z-index: 3;
  left: 63.571%; /* (1188-120)/1680 */
  top: 17.166%; /* (342-176)/967   */
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.396vw, 46px); /* Figma: 46 */
}

/* .d-grid .align-items-center */
.legacy-stats-row {
  grid-template-columns: minmax(clamp(104px, 9.167vw, 176px), auto) auto; /* col 1 = 176 @1920 */
  column-gap: clamp(20px, 3.003vw, 57.66px); /* Figma: 57.66 */
  justify-content: start;
}

/* .d-flex .flex-column */
.legacy-stat {
  gap: clamp(10px, 0.878vw, 16.85px); /* Figma: 16.85 */
}

.legacy-stat-num {
  font-family: var(--font-display, "Test Domaine Display", serif);
  font-weight: 400;
  font-size: clamp(30px, 3.333vw, 64px); /* Figma: 64 */
  line-height: normal;
  color: #bc9051;
  text-transform: capitalize;
  white-space: nowrap;
}

.legacy-stat-label {
  font-family: "Darker Grotesque", sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.042vw, 20px); /* Figma: 20 */
  line-height: 1.487; /* Figma: 29.74px */
  text-transform: uppercase;
  color: #372523;
  opacity: 0.6;
}

/* .d-block */
.legacy-divider {
  width: clamp(240px, 27.03vw, 519px); /* Figma: 519 x 1 */
  height: 1px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991.98px) {
  .legacy-head {
    flex-direction: column;
    gap: 20px;
  }

  .legacy-head-left {
    margin-left: 0;
  }

  .legacy-copy {
    flex: 0 0 auto;
    margin: 0;
    width: 100%;
    max-width: 640px;
  }

  .legacy-body {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    gap: 36px;
  }

  /* stats leave the overlay and sit between copy and images */
  .legacy-stats {
    position: static;
    order: -1;
    width: 100%;
    gap: 28px;
  }

  .legacy-stats-row {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
  }

  .legacy-divider {
    width: 100%;
    max-width: 519px;
  }
}

@media (max-width: 575.98px) {
  .legacy-stats-row {
    column-gap: 16px;
  }

  .legacy-stat-num {
    font-size: 27px;
  }

  .legacy-stat-label {
    font-size: 13px;
  }

  .legacy-body {
    margin-top: 28px;
    gap: 28px;
  }

  .legacy-logo {
    width: 68px;
  }
}
/* ============================================================
   SECTION: form ("Let's Get In Touch")  —  #contact
   Figma node 91:181793 (1920 canvas, 1680x1008 photo card)
   ============================================================ */

.sec-form {
  background: #f7ebda;
  padding: 73px 0;
}

/* --- Photo stage (1680 x 1008 @1920) ------------------------ */
/* .position-relative .overflow-hidden */
.sec-form .form-stage {
  height: 1008px;
}

/* .position-absolute .w-100 .h-100 .object-fit-cover */
.sec-form .form-bg {
  inset: 0;
  object-position: center;
}

/* .position-absolute */
.sec-form .form-tint {
  inset: 0;
  background: rgba(60, 19, 0, 0.1);
  pointer-events: none;
}

/* --- Arch card (714 x 874, right 137) ----------------------- */
.sec-form .form-arch {
  position: absolute;
  /* AOS overwrites `transform` on animate, so center with calc() not translateY */
  top: calc(50% - 437px);
  right: 137px;
  width: 714px;
  height: 874px;
  background: #372523;
  border-radius: 300px 300px 0 0;
}

/* thin gold key-line inset 17/18px (.position-absolute) */
.sec-form .form-arch-line {
  inset: 18px 17px;
  border: 1px solid #bc9051;
  border-radius: 289px 288px 0 0;
  pointer-events: none;
}

/* .position-relative .h-100 .d-flex .flex-column .align-items-center */
.sec-form .form-arch-inner {
  padding: 73px 75px 0;
  gap: 32px;
}

/* --- Heading ------------------------------------------------ */
/* .d-flex .flex-column .align-items-center .text-center */
.sec-form .form-head {
  gap: 32px;
}

.sec-form .form-title {
  margin: 0;
  font-family: var(--font-display, "Test Domaine Display", serif);
  font-weight: 400;
  font-size: clamp(25px, 2.083vw, 40px);
  line-height: normal;
  white-space: nowrap;
  /* stop list verbatim from Figma (out-of-order stops clamp, as designed) */
  background: linear-gradient(
    161deg,
    rgb(152, 112, 65) 25.783%,
    rgb(184, 141, 86) 6.6472%,
    rgb(233, 185, 120) 22.927%,
    rgb(253, 203, 133) 38.584%,
    rgb(204, 159, 100) 73.377%,
    rgb(166, 125, 74) 106.43%,
    rgb(152, 112, 65) 122.09%,
    rgb(196, 151, 94) 136%,
    rgb(235, 187, 121) 148.18%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.sec-form .form-sub {
  margin: 0;
  max-width: 449px;
  height: 49px; /* Figma fixed box — keeps rhythm below exact */
  display: flex;
  align-items: center;
  font-family: var(--font-body, "Darker Grotesque", sans-serif);
  font-weight: 500;
  font-size: clamp(17px, 1.042vw, 20px);
  line-height: 28px;
  letter-spacing: 0.7181px;
  color: #ffffff;
}

/* --- Lead form ---------------------------------------------- */
/* .w-100 .d-flex .flex-column .align-items-center */
.sec-form .form-lead {
  max-width: 558px;
  gap: 32px;
}

/* .form-field carries .position-relative .w-100 */

/* .d-block .w-100 .bg-transparent */
.sec-form .form-input {
  height: 40px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid rgba(121, 115, 115, 0.7);
  border-radius: 0;
  outline: none;
  font-family: var(--font-body, "Darker Grotesque", sans-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 16px;
  letter-spacing: 0.96px;
  color: #ffffff;
  box-shadow: none;
  appearance: none;
}

.sec-form .form-input::placeholder {
  color: #b3adad;
  text-transform: uppercase;
  opacity: 1;
}

.sec-form .form-input:focus {
  border-bottom-color: #bc9051;
}

.sec-form .lead-err {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  font-family: var(--font-body, "Darker Grotesque", sans-serif);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.4px;
  color: #e4b474;
}

/* --- CTA row ------------------------------------------------ */
/* .d-flex .align-items-center .justify-content-center .flex-wrap */
.sec-form .form-actions {
  gap: 32px;
}

.sec-form .form-cta {
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}

.sec-form .form-cta:hover {
  transform: translateY(-2px);
}

/* Get Early Access — double gold outline pill (253x66) */
/* .position-relative — NOT .bg-transparent: that only resets background-color, and this
   button is also .lead-submit, whose `background` shorthand paints a gold gradient image */
.sec-form .form-cta-early {
  width: 253px;
  height: 66px;
  background: transparent;
  border: 1px solid #cda866;
  border-radius: 42px;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  text-transform: capitalize;
  color: #ffffff;
}

.sec-form .form-cta-early::before {
  content: "";
  position: absolute;
  inset: 6px 7px;
  border: 1px solid rgba(217, 189, 119, 0.4); /* --gold @ 40% */
  border-radius: 42px;
  pointer-events: none;
}

/* Download Brochure — white pill (273x67) */
/* .d-inline-flex .align-items-center .justify-content-center .border-0 .rounded-pill */
.sec-form .form-cta-brochure {
  width: 273px;
  height: 67px;
  gap: 10px;
  background: #ffffff;
}

/* .d-block */
.sec-form .form-cta-brochure-ico {
  font-size: 20px;
}

.sec-form .form-cta-brochure-txt {
  font-family: var(--font-body, "Darker Grotesque", sans-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: normal;
  text-transform: capitalize;
  background: linear-gradient(
    90deg,
    rgb(100, 68, 50) 0.58%,
    rgb(100, 68, 50) 49.59%,
    rgb(117, 83, 60) 61.87%,
    rgb(161, 123, 87) 85.42%,
    rgb(195, 153, 108) 101.8%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --- Map snippet card (613x225, left 42 / top 617) ---------- */
/* .d-block */
.sec-form .form-map {
  width: 613px;
  max-width: none;
  align-self: flex-start;
  margin-left: -33px; /* 75px pad - 33 = 42px from card edge */
  margin-top: -5px; /* flow bottom 622 -> Figma top 617 */
  background: #ffffff;
  line-height: 0;
}

/* .w-100 .d-block .border-0 */
.sec-form .form-map-img {
  display: block;
  height: 225px;
  border: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1439.98px) {
  .sec-form .form-arch {
    right: 90px;
  }
}

@media (max-width: 1199.98px) {
  .sec-form .form-arch {
    right: 48px;
  }
}

/* Stack: photo becomes full-bleed backdrop, card centers over it */
@media (max-width: 991.98px) {
  .sec-form {
    padding: 48px 0;
  }

  .sec-form .form-stage {
    height: auto;
    padding: 56px 20px;
  }

  .sec-form .form-arch {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: min(100%, 640px);
    height: auto;
    margin-inline: auto;
    border-radius: 260px 260px 0 0;
  }

  .sec-form .form-arch-line {
    border-radius: 250px 250px 0 0;
  }

  .sec-form .form-arch-inner {
    padding: 64px 40px 40px;
  }

  .sec-form .form-map {
    width: 100%;
    align-self: center;
    margin-left: 0;
    margin-top: 0;
  }

  .sec-form .form-map-img {
    height: auto;
    min-height: 225px;
    aspect-ratio: 613 / 225;
  }

  .sec-form .form-title {
    white-space: normal;
  }

  .sec-form .form-sub {
    height: auto;
  }
}

@media (max-width: 575.98px) {
  .sec-form {
    padding: 32px 0;
  }

  .sec-form .form-stage {
    padding: 40px 18px;
  }

  .sec-form .form-arch {
    border-radius: 160px 160px 0 0;
  }

  .sec-form .form-arch-line {
    inset: 12px 11px;
    border-radius: 152px 152px 0 0;
  }

  /* Top padding has to clear the arc, not just the card edge: at 56px down a
     160px corner still cuts ~38px in from each side, so the heading was
     landing on the curve. Sides clear the gold key-line (inset 11px) by a
     readable margin instead of the 11px it had. */
  .sec-form .form-arch-inner {
    padding: 78px 30px 34px;
    gap: 30px;
  }

  /* title and sub were the airy part while the fields were tight — pull the
     heading together and give the rhythm back to the inputs */
  .sec-form .form-head {
    gap: 14px;
  }

  .sec-form .form-sub {
    line-height: 24px;
  }

  .sec-form .form-lead {
    gap: 28px;
  }

  /* width:100% so the buttons' min(100%, 273px) resolves against the real
     column — as a shrink-to-fit box it measured narrower than the space
     actually available, which is what squeezed the label onto two lines */
  .sec-form .form-actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 18px;
  }

  .sec-form .form-cta-early,
  .sec-form .form-cta-brochure {
    width: min(100%, 273px);
  }

  /* .lead-submit lends this button 0.22em tracking and 24px side padding —
     more than the narrowed column holds, so the label broke onto two lines
     inside the pill. Tighten both just here so it stays on one. */
  .sec-form .form-cta-early {
    padding-inline: 14px;
    font-size: 15px;
    letter-spacing: 0.16em;
  }
}

/* Sub-360 hardware (SE 1, fold cover screens): the column is ~224px wide, so
   the tracked label needs one more step down to hold its single line. */
@media (max-width: 359.98px) {
  .sec-form .form-arch-inner {
    padding-inline: 24px;
  }

  .sec-form .form-cta-early {
    padding-inline: 8px;
    font-size: 13px;
    letter-spacing: 0.1em;
  }
}
/* ============================================================
   FOOTER — Figma node 91:181872 (frame "testimonials", 1920x555)
   bg #372523 · gold #D9BD77 · fonts: Darker Grotesque / TT Neoris Trial
   ============================================================ */

/* .overflow-hidden */
.sec-footer {
  background: #372523;
  padding: clamp(60px, 5.21vw, 100px) 0 clamp(48px, 4.95vw, 95px);
}

/* ---------- top band: brand logos (left) + RERA QR (right) ---------- */

/* .d-flex .justify-content-between */
.footer-top {
  align-items: flex-start;
  gap: 40px;
  margin-bottom: clamp(40px, 3.49vw, 67px);
}

/* .d-flex .align-items-center */
.footer-brands {
  gap: clamp(18px, 2.34vw, 44.87px);
  margin-top: 12px; /* Figma: logos sit 12px below the QR frame top */
}

/* Raheja Marques logo — 224x135 crop of the padded PNG (padding matches the crop) */
/* .position-relative .overflow-hidden .flex-shrink-0 */
.footer-amore-logo {
  width: clamp(120px, 11.67vw, 224px);
  aspect-ratio: 224 / 135;
}

.footer-amore-logo img {
  position: absolute;
  left: -38.74%;
  top: -32.16%;
  width: 177.19%;
  height: 164.57%;
  max-width: none;
}

/* gold vertical rule between the two logos (Figma Line 30, #D9BD77, 2.24px) */
/* .align-self-stretch .flex-shrink-0 */
.footer-brand-sep {
  width: 2.24px;
  background: var(--gold);
}

/* Raheja Homes developer logo — wide horizontal lockup, scaled to fit */
/* .position-relative .flex-shrink-0 */
.footer-dev-logo {
  /* Raheja Homes is a wide horizontal lockup — box matches the artwork so it
     fills the width instead of being letterboxed. */
  width: clamp(150px, 15vw, 290px);
  aspect-ratio: 2626 / 528;
}

/* .position-absolute .w-100 .h-100 .object-fit-contain */
.footer-dev-base {
  inset: 0;
  object-position: center;
}

/* ---------- RERA QR block ---------- */

/* .d-flex .flex-column .align-items-center .flex-shrink-0 */
.footer-rera {
  margin-right: 8px; /* Figma: QR column sits 8px inside the right content edge */
}

/* .position-relative */
.footer-qr-frame {
  width: 104px;
  height: 105px;
}

/* corners are pinned with .position-absolute + .top-0/.bottom-0/.start-0/.end-0 */
.footer-qr-corner {
  width: 18.18px;
  height: 18.18px;
}

.footer-qr-corner-tr {
  transform: scaleX(-1);
}
.footer-qr-corner-bl {
  transform: scaleY(-1);
}
.footer-qr-corner-br {
  transform: rotate(180deg);
}

/* .position-absolute .object-fit-cover */
.footer-qr-img {
  left: 4px;
  top: 3px;
  width: 96.7px;
  height: 96.7px;
}

/* .text-center */
.footer-rera-no {
  margin: 14px 0 0;
  font-family: "Darker Grotesque", sans-serif;
  font-weight: 500;
  font-size: clamp(17px, 1.04vw, 20px);
  line-height: 1.4; /* 28px @ 20px */
  color: var(--gold);
}

/* ---------- project consultants ---------- */

/* .list-unstyled .d-grid */
.footer-consultants {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 40px;
  margin: 0 0 clamp(30px, 2.6vw, 50px);
}

/* .d-flex .flex-column */
.footer-consultant {
  gap: 4px;
}

.footer-consultant-role {
  font-family: "Darker Grotesque", sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 0.83vw, 16px);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer-consultant-name {
  font-family: "Darker Grotesque", sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 0.94vw, 18px);
  line-height: 1.4;
  color: #ffffff;
}

/* ---------- disclaimer ---------- */

.footer-legal {
  border-top: 2.5px solid rgba(217, 189, 119, 0.14); /* Figma Vector 1 */
  padding-top: 30px;
}

.footer-disclaimer {
  margin: 0;
  font-family: "Darker Grotesque", sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 0.83vw, 16px);
  line-height: 1.75; /* 28px @ 16px */
  color: #ffffff;
}

/* ---------- bottom row: copyright + credit ---------- */

/* .d-flex .justify-content-between .flex-wrap */
.footer-bottom {
  margin-top: 30px;
  align-items: flex-end;
  gap: 20px 40px;
}

.footer-copy {
  margin: 0;
  font-family: "Darker Grotesque", sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.28; /* 23px @ 18px */
  color: var(--gold);
}

/* .d-inline-flex .align-items-center */
.footer-credit {
  margin: 0;
  gap: 12px;
}

.footer-credit-label {
  font-family: "Darker Grotesque", sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.165; /* 20.97px @ 18px */
  letter-spacing: 0.419px;
  color: var(--gold);
  white-space: nowrap;
}

/* .d-block */
.footer-credit-logo {
  width: 30px;
  height: 12px;
}

.footer-credit-name {
  font-family: "TT Neoris Trial", "Darker Grotesque", sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.165;
  letter-spacing: 0.419px;
  text-transform: capitalize;
  color: #ffffff;
}

/* ---------- responsive ---------- */

@media (max-width: 991.98px) {
  .footer-brands {
    margin-top: 0;
  }
  .footer-consultants {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .footer-top {
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }
  .footer-rera {
    margin-right: 0;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
}

@media (max-width: 575.98px) {
  .footer-top {
    gap: 30px;
  }
  .footer-consultants {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }
  .footer-legal {
    padding-top: 24px;
  }
  .footer-bottom {
    margin-top: 24px;
  }
}

/* ------------------------------------------------------------
   Mobile: quick-contact rail becomes a fixed bottom bar
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .hero-rail {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    flex-direction: row;
    gap: 0;
  }

  .hero-rail-enquire,
  .hero-rail-call {
    flex: 1 1 50%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 56px;
    padding-top: 6px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid #b38b62;
    box-shadow: 0 -6px 24px rgba(36, 23, 8, 0.28);
  }

  /* order: Call Now first, Enquire Now second */
  .hero-rail-call {
    order: -1;
    gap: 10px;
  }

  /* icons sit before their labels */
  .hero-rail-call .hero-rail-phone,
  .hero-rail-enquire .hero-rail-mail {
    order: -1;
  }

  .hero-rail-enquire {
    gap: 10px;
    border-left: 1px solid #b38b62;
  }

  .hero-rail-text {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 22px;
  }

  .hero-rail-phone-img {
    transform: none;
  }

  /* keep the footer readable above the fixed bar */
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}


/* ============================================================
   Section headings — per-character gold wipe
   Splitting.js splits each .title-wipe into .char spans; main.js
   flips .is-wiped when the heading scrolls in. Each character then
   paints itself in along a diagonal sweep, 30ms behind the one
   before it, led by a gold edge. The settled colour is currentColor,
   so every heading keeps its own section colour (gold on the hero,
   brown on the cream panels, white over the configuration photos).
   ============================================================ */
/* Split and waiting: the glyph sits under the transparent half of the tile.
   Same state the animation starts from, so nothing flashes when it fires.
   Keyed off .splitting — the class Splitting.js adds — so a heading whose
   split never ran (CDN blocked, JS off) simply renders as plain text. */
.title-wipe.splitting .char {
  position: relative;
  z-index: calc(var(--char-total) - var(--char-index));
  background-image: linear-gradient(
    -45deg,
    currentColor 45%,
    currentColor 45%,
    var(--gold) 50%,
    transparent 50%
  );
  background-size: 2em 3em;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* In view: each char drags the tile half a period diagonally, so the gold
   edge crosses the glyph and leaves it in the heading's own colour. */
.title-wipe.splitting.is-wiped .char {
  -webkit-animation: title-wipe-pos 1.3s cubic-bezier(0.3, 0, 0.3, 1) forwards;
  animation: title-wipe-pos 1.3s cubic-bezier(0.3, 0, 0.3, 1) forwards;
  -webkit-animation-delay: calc(20ms + (30ms * var(--char-index)));
  animation-delay: calc(20ms + (30ms * var(--char-index)));
}

@-webkit-keyframes title-wipe-pos {
  0% {
    background-position: 0 0;
  }
  80%,
  100% {
    background-position: -1em -1.5em;
  }
}

@keyframes title-wipe-pos {
  0% {
    background-position: 0 0;
  }
  80%,
  100% {
    background-position: -1em -1.5em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .title-wipe.splitting .char,
  .title-wipe.splitting.is-wiped .char {
    background-image: none;
    -webkit-animation: none;
    animation: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* ============================================================
   Flaticon Uicons — icon glyphs in place of the former svg assets
   (download marks, slider arrows, accordion chevron). Sized with
   font-size, coloured with `color`; the shapes come from the linked
   uicons-regular-rounded webfont.
   The sparkle eyebrows stay as their own svg assets — the Figma
   four-point star has no match in the icon font, and the stock
   sparkle read wrong at these sizes. Brand artwork — logo, QR
   corners, glow, usp numerals, the stats divider — is svg too.
   ============================================================ */
.ov-cta-dl-icon,
.form-cta-brochure-ico,
.slider-nav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  line-height: 1;
}

/* Slider prev/next — the round frame is the button's own border, so the
   glyph only needs to be the arrow itself. */
.slider-nav-ico {
  font-size: 20px;
}