/* ==========================================================================
   EKTAARA — style.css
   Fonts:   --ser  = headings (Cormorant Garamond)
            --body = body / UI text  <-- change THIS one line to match the brochure font
   Colours: red brand only. Sections alternate ivory / white. No gold, no olive.
   ========================================================================== */
:root {
  --nav-h: 72px;
  --sec-pad: 55px;
  --sec-pad-band: 55px;
  --d1: #af1d21;
  --d2: #af1d21;
  --red: #af1d21;
  --ivory: #F6F3EB;
  --ink: #2a1a1c;
  --ser: 'Cormorant Garamond', serif;
  --body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --sans: var(--body);
  --head: var(--ser);
  --sp: clamp(64px, 8vw, 110px);
  --head-gap: clamp(1rem, 2vw, 1.6rem);
  --red-btn: #a41d21;
  --red-btn-dk: #8a1519
}

* { box-sizing: border-box }
html.lenis, html.lenis body { height: auto }
.lenis.lenis-smooth { scroll-behavior: auto !important }

body {
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  background: var(--ivory);
  color: var(--ink);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  margin: 0
}
body.is-loading { overflow: hidden; height: 100vh }
img { max-width: 100%; display: block }
section[id] { scroll-margin-top: 60px }

.container-fluid { width: min(95%, 1600px); max-width: none; margin-inline: auto; padding-inline: 0 }

h1, h2, h3 { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.12; margin: 0 }
h2 { font-size: clamp(1.7rem, 4.2vw, 3.4rem) }
.serif, h1 .serif, h2 .serif { font-family: var(--ser); font-style: italic; font-weight: 600; text-transform: none; letter-spacing: 0 }
h2 .serif { font-size: 1.15em }
.gold { color: var(--red) }
.dark { background: var(--red-btn); color: var(--ivory) }

.eyebrow {
  display: inline-flex; align-items: center; gap: .9rem; margin: 0 0 .6rem;
  font: 600 1.3rem var(--ser); letter-spacing: .3em; text-transform: uppercase; color: var(--red)
}
.eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--red) }
.sec-head .eyebrow::after { content: ""; width: 40px; height: 1px; background: var(--red) }
.logosizes { width: 200px }

/* sections */
.sec { position: relative; padding: var(--sec-pad) 0; overflow: hidden }
.sec-head { text-align: center; margin: 0 auto var(--head-gap); max-width: 980px }
.sec-head h2 { color: var(--d1) }
.sec-head h2 .serif { color: var(--red) }
.dark .sec-head h2 { color: var(--ivory) }
.dark .sec-head h2 .serif { color: #fff }
.sec-sub { margin: .6rem 0 0; color: #77706b; font-size: .92rem; line-height: 1.8 }
.sec-cta { display: flex; justify-content: center; margin-top: var(--head-gap) }

html.anim .rv, html.anim .h-ani { opacity: 0; transform: translateY(32px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1) }
html.anim .rv.in { opacity: 1; transform: none }

.sp-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em 0 .16em; margin: -.08em 0 -.16em; perspective: 700px }
.sp-c { display: inline-block; transform-origin: 50% 100% -.2em; will-change: transform }

/* wrappers (alternate backgrounds: ivory / white) */
.cz { position: relative }
.cz-from-ivory { background: var(--ivory) }
.cz-from-white { background: #fff }
.cz-from-red { background: #fff }
.cz-clip { position: relative; overflow: hidden }

/* buttons */
.btn-gold, .btn-dark {
  position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .9rem;
  border: 0; padding: .95rem 2rem; font: 700 .7rem var(--body); letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
  transition: transform .35s, box-shadow .35s, background .35s
}
.btn-gold { background: var(--red-btn); color: #fff; box-shadow: 0 10px 28px rgba(164, 29, 33, .3) }
.btn-gold:hover { transform: translateY(-3px); background: var(--red-btn-dk); box-shadow: 0 14px 32px rgba(164, 29, 33, .4) }
.btn-dark { background: var(--red-btn); color: #fff; border: 1px solid var(--red-btn) }
.btn-dark:hover { background: var(--red-btn-dk); transform: translateY(-3px) }
.btn-gold::before, .btn-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform .9s
}
.btn-gold:hover::before, .btn-dark:hover::before { transform: translateX(130%) }
.btn-gold::after, .btn-dark::after { content: "\2192"; font-size: 1.1rem; transition: transform .35s }
.btn-gold:hover::after, .btn-dark:hover::after { transform: translateX(6px) }
.sticky-cta button::after { display: none }

/* loader: white background, red progress */
#loader { position: fixed; inset: 0; z-index: 9999; overflow: hidden; background: #fff }
.ld-ui { position: absolute; left: 50%; top: calc(50% + 3.6rem); transform: translateX(-50%); text-align: center; color: var(--red-btn); font-family: var(--body); width: min(260px, 70vw) }
.ld-ui span { font-size: 1.5rem; font-weight: 700 }
.ld-ui small { font-size: .85rem }
.ld-bar { height: 2px; background: rgba(164, 29, 33, .18); margin-top: .7rem; overflow: hidden }
.ld-bar i { display: block; height: 100%; width: 0; background: var(--red-btn) }

/* nav (white) */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000; display: flex; justify-content: space-between; align-items: center;
  padding: .8rem clamp(1rem, 4vw, 3rem); background: #fff; border-bottom: 1px solid rgba(164, 29, 33, .18);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .06); transition: background .6s, border-color .6s
}
body.is-loading .nav { background: transparent; border-color: transparent; box-shadow: none }
.logo { color: var(--red-btn); text-decoration: none; display: flex; flex-direction: column; line-height: 1; transform-origin: 0 0 }
.nav-r { display: flex; align-items: center; gap: 1.6rem }
.nav .btn-gold { padding: .75rem 1.3rem }
.progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--red-btn); transform: scaleX(0); transform-origin: 0 50% }
.links { list-style: none; margin: 0; padding: 0; gap: 1.5rem; align-items: center }
@media(min-width:1200px) { .links { gap: 1.9rem } }
.links a, .menu a {
  color: var(--red-btn); text-decoration: none; font: 600 .74rem var(--body); letter-spacing: .14em; text-transform: uppercase; position: relative; padding: .4rem 0
}
.links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--red-btn); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s }
.links a:hover::after, .links a.act::after { transform: scaleX(1) }
.links a.act, .menu li a.act, .menu-tel { color: var(--red-btn) !important }
.burger { width: 44px; height: 44px; background: none; border: 1px solid var(--red-btn); display: grid; place-content: center; gap: 6px; padding: 0 }
.burger i { display: block; width: 20px; height: 1.5px; background: var(--red-btn); transition: .35s }
.burger.on i:first-child { transform: translateY(3.7px) rotate(45deg) }
.burger.on i:last-child { transform: translateY(-3.7px) rotate(-45deg) }
.menu {
  position: fixed; inset: 0; z-index: 9990; background: #fff; display: flex; flex-direction: column; justify-content: center; padding: 6rem 2rem 4rem;
  clip-path: circle(0% at calc(100% - 2.6rem) 2.2rem); transition: clip-path .8s cubic-bezier(.7, 0, .2, 1); visibility: hidden
}
.menu.open { clip-path: circle(150% at calc(100% - 2.6rem) 2.2rem); visibility: visible }
.menu ul { list-style: none; padding: 0; margin: 0 0 2rem }
.menu li { overflow: hidden; border-bottom: 1px solid rgba(164, 29, 33, .2) }
.menu li a {
  display: block; font: italic 600 clamp(2rem, 9vw, 3rem) var(--ser); text-transform: none; letter-spacing: 0; padding: .7rem 0;
  transform: translateY(100%); transition: transform .7s cubic-bezier(.2, .8, .2, 1)
}
.menu.open li a { transform: none }
.menu.open li:nth-child(2) a { transition-delay: .08s }
.menu.open li:nth-child(3) a { transition-delay: .16s }
.menu.open li:nth-child(4) a { transition-delay: .24s }
.menu.open li:nth-child(5) a { transition-delay: .32s }
.menu.open li:nth-child(6) a { transition-delay: .4s }
.menu-tel { font-size: 1rem !important }
@media(min-width:992px) { .menu { display: none } }
@media(max-width:991px) { .nav-r .btn-gold { display: none } }

/* spaces: horizontal scroll */
.poss { background: var(--ivory); position: relative; overflow: hidden }

/* DESKTOP: NO GSAP pin (no pin-spacer -> no gap, safe while resizing / inspecting).
   .poss is position:sticky inside .poss-wrap. The ::after spacer is exactly one screen-width tall =
   the distance the track slides sideways. JS only scrubs the track (see initSpaces in main.js). */
@media(min-width:992px) {
  html.anim .poss-wrap { position: relative }
  html.anim .poss-wrap::after { content: ""; display: block; height: 0; padding-top: 100% }
  html.anim .poss { position: sticky; top: var(--nav-h) }
}

.hs-track { display: flex; width: 200% }
.hs-panel { flex: 0 0 50%; width: 50%; height: calc(100vh - var(--nav-h)); min-height: 440px; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch }
.hs-text { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-width: 0; padding: 2rem clamp(1.2rem, 5vw, 5rem) }
.hs-text > * { width: 100%; max-width: 480px }
.hs-text h2 { color: var(--d1) }
.hs-text h2 .serif { color: var(--red) }
.blk-no { display: block; font-family: var(--body); font-variant-numeric: lining-nums; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 700; line-height: 1; color: rgba(175, 29, 33, .45); margin: 0 0 .35rem; position: relative; z-index: 1 }
.tick { list-style: none; padding: 0; margin: 1rem 0 0; font: 500 clamp(1rem, 1.5vw, 1.2rem) var(--body); text-align: center }
.tick li { padding: .7rem 0; border-bottom: 1px solid rgba(175, 29, 33, .18); transition: color .35s }
.tick li::before { content: "✦"; color: var(--red); margin-right: .8rem }
.tick li:hover { color: var(--red) }
.hs-img { position: relative; overflow: hidden; min-height: 0 }
.hs-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.hs-img::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(246, 243, 235, .65); pointer-events: none }
.hs-bar { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(175, 29, 33, .18); z-index: 4 }
.hs-dots { display: none }
@media(max-width:991px) { .hs-dots { display: block } }
.hs-bar span { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: 0 50% }
@media(min-width:992px) { .hs-bar { display: block } }

@media(max-width:991px) {
  /* mobile: Swiper, one slide at a time -> heading, image, points */
  .poss { --swiper-theme-color: #a41d21; --swiper-pagination-bullet-inactive-color: #a41d21; --swiper-pagination-bullet-inactive-opacity: .3; --swiper-pagination-bottom: 14px }
  .hs-track { width: 100%; transition-property: transform }
  .hs-panel { flex: 0 0 100%; width: 100%; height: auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; padding: 1.8rem 1.4rem 3.4rem; text-align: center }
  .hs-text { display: contents }
  .hs-text > * { margin-left: auto; margin-right: auto }
  .blk-no { order: 1 }
  .hs-text h2 { order: 2 }
  .hs-img { order: 3; flex: none; width: 100%; max-width: 520px; height: auto; aspect-ratio: 4/3; margin: 1.4rem auto .4rem }
  .tick { order: 4; margin-top: 1rem }
}

/* fallback (desktop only) when animation libs / motion are off: native horizontal swipe */
@media(min-width:992px) {
  html.hs-native .hs-track { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none }
  html.hs-native .hs-track::-webkit-scrollbar { display: none }
  html.hs-native .hs-panel { flex: 0 0 100%; width: 100%; scroll-snap-align: start }
  html.hs-native .hs-bar { display: none }
}

/* plans */
.plan { background: var(--ivory) }
.tabs { display: inline-flex; padding: .35rem; border: 1.5px solid var(--red-btn); border-radius: 50px; gap: 0; margin-bottom: var(--head-gap); background: #fff; box-shadow: 0 12px 30px rgba(175, 29, 33, .1) }
.tabs button { position: relative; min-width: 150px; background: none; border: 0; border-radius: 50px; padding: .85rem 2rem; font: 700 .68rem var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--red-btn); transition: .3s; cursor: pointer }
.tabs button:hover { background: var(--red-btn); color: #fff }
.tabs .on { background: var(--red-btn); color: #fff; box-shadow: 0 8px 20px rgba(164, 29, 33, .35) }
.pane { max-width: 1000px; margin: 0 auto }
.plan-card, .site { position: relative; background: #fff; border: 1px solid rgba(175, 29, 33, .3); padding: 1.1rem; box-shadow: 0 30px 60px rgba(175, 29, 33, .16); transform-style: preserve-3d }
.site { max-width: 760px; margin: 0 auto; padding: .9rem }
.plan-card img, .site img { width: 100% }
.plan-card::before, .site::before, .plan-card::after, .site::after { content: ""; position: absolute; width: 34px; height: 34px; pointer-events: none }
.plan-card::before, .site::before { top: -9px; left: -9px; border-top: 2px solid var(--red); border-left: 2px solid var(--red) }
.plan-card::after, .site::after { bottom: -9px; right: -9px; border-bottom: 2px solid var(--red); border-right: 2px solid var(--red) }
.arrow { font-size: 2.4rem; color: var(--red) }
.carpet { width: 150px; height: 150px; border-radius: 50%; border: 1px solid var(--red); display: grid; place-content: center; margin: 1rem auto 0; font: 600 .54rem var(--body); letter-spacing: .14em; color: var(--d1); outline: 1px solid rgba(175, 29, 33, .3); outline-offset: 6px }
.carpet b { display: block; color: var(--red); font-size: 1.05rem; letter-spacing: .03em; margin-top: .3rem }
.site-view { position: relative; height: clamp(340px, 66vh, 600px); background: #fff; overflow: hidden }
.site-view a { display: block; width: 100%; height: 100% }
.site-view img { width: 100%; height: 100%; object-fit: contain; transition: filter .9s ease, transform 1.2s ease }
.site-view.blur img { filter: blur(14px); transform: scale(1.06) }
.site-veil { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .22); transition: opacity .7s ease, visibility .7s }
.site-view:not(.blur) .site-veil { opacity: 0; visibility: hidden; pointer-events: none }
.site-btn { animation: sitePulse 2.2s ease-in-out infinite }
@keyframes sitePulse { 0% { box-shadow: 0 0 0 0 rgba(164, 29, 33, .55) } 70% { box-shadow: 0 0 0 22px rgba(164, 29, 33, 0) } 100% { box-shadow: 0 0 0 0 rgba(164, 29, 33, 0) } }
.plan-card img { width: 100%; max-height: 62vh; object-fit: contain }
.pv { position: relative }
.pv-in { overflow: hidden; transition: filter .9s ease, transform 1.2s ease }
.pv.blur .pv-in { filter: blur(10px); transform: scale(1.03) }
.pv-veil { position: absolute; inset: 1.1rem; z-index: 5; display: grid; place-items: center; background: rgba(0, 0, 0, .22); transition: opacity .7s ease, visibility .7s }
.pv:not(.blur) .pv-veil { opacity: 0; visibility: hidden; pointer-events: none }
.pv-btn { padding: .85rem 1.4rem; font-size: .64rem }
@media(max-width:767px) { .arrow { transform: none } .tabs button { padding: .8rem 1.3rem } }
@media(max-width:575px) { .site-view { height: clamp(300px, 58vh, 480px) } .tabs button { min-width: 0; flex: 1 } }

/* location */
.loc { background: #fff }
/* .loc-row > div { display: flex; min-width: 0 } */

/* MAP: shown at its own proportions (1036 x 758, no stretching). Frame height = image height; row is vertically centred. */
.loc-row { align-items: center !important }
.loc-visual {
  position: relative; display: block; flex: none; align-self: auto; width: 100%; min-width: 0; padding: 9px; overflow: hidden;
  background: #fff; border: 1px solid rgba(175, 29, 33, .45); box-shadow: 0 24px 60px rgba(175, 29, 33, .12)
}
.loc-visual::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(175, 29, 33, .18); pointer-events: none }
.loc-visual img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 1036 / 758; object-fit: contain }
.loc-map-caption {
  position: absolute; left: 24px; bottom: 24px; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 13px 17px; color: var(--d1);
  background: rgba(255, 255, 255, .95); font: 700 .56rem var(--body); letter-spacing: 1.5px; box-shadow: 0 5px 20px rgba(175, 29, 33, .08)
}
.loc-map-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(175, 29, 33, .15) }

.loc-details { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: clamp(22px, 3vw, 42px); background: rgba(255, 255, 255, .75); border: 1px solid rgba(175, 29, 33, .18); box-shadow: 0 24px 60px rgba(175, 29, 33, .055) }
.loc-details-top { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; color: #000; font: 700 .62rem var(--body); letter-spacing: 2px }
.loc-line { height: 1px; flex: 1; background: rgba(175, 29, 33, .3) }
.loc-accordion {
  flex: 1; --bs-accordion-bg: transparent; --bs-accordion-border-color: transparent; --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23af1d21'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23af1d21'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}
.loc-accordion .accordion-item { background: transparent; border: 0; border-bottom: 1px solid rgba(175, 29, 33, .14); border-radius: 0 }
.loc-accordion .accordion-header { margin: 0; font-weight: 400; letter-spacing: 0; text-transform: none; font-family: var(--body) }
.loc-accordion .accordion-button { display: flex; align-items: center; gap: 15px; padding: 20px 26px 20px 0; color: var(--d1); background: transparent; box-shadow: none; border-radius: 0; font: 600 clamp(17px, 1.6vw, 23px)/1.4 var(--ser) }
.loc-accordion .accordion-button:not(.collapsed) { color: var(--red); background: transparent }
.loc-accordion .accordion-button::after { position: absolute; right: 0; width: 13px; height: 13px; background-size: 13px }
.loc-count { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; color: var(--red); background: rgba(175, 29, 33, .06); border: 1px solid rgba(175, 29, 33, .25); font: 700 .72rem var(--body) }
.loc-accordion .accordion-button:not(.collapsed) .loc-count { color: #fff; background: var(--red-btn); border-color: var(--red-btn) }
.loc-accordion .accordion-body { padding: 0 0 18px 51px }
.dist { list-style: none; padding: 0; margin: 0 }
.dist li { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 9px 0; border-bottom: 1px solid rgba(175, 29, 33, .08); color: #000; font-size: .9rem; line-height: 1.5; transition: padding .25s, color .25s }
.dist li:last-child { border-bottom: 0 }
.dist li:hover { padding-left: 5px; color: var(--d1) }
.dist b { flex-shrink: 0; color: var(--red); font: 700 .92rem var(--body); white-space: nowrap }
.loc-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: auto; padding-top: 25px }
.loc-footer-note { color: #000; font: 700 .56rem/1.7 var(--body); letter-spacing: 1.5px }

@media(max-width:991px) { .loc-accordion .accordion-body { padding-left: 43px } }
@media(max-width:575px) {
  .loc-row { --bs-gutter-y: 22px }
  .loc-visual { flex: initial; width: 100% }
  .loc-map-caption { left: 19px; bottom: 19px; padding: 11px 12px; font-size: .5rem }
  .loc-details { padding: 22px 18px }
  .loc-accordion .accordion-button { gap: 10px; padding: 17px 23px 17px 0; font-size: 17px }
  .loc-count { flex-basis: 30px; width: 30px; height: 30px; font-size: .62rem }
  .loc-accordion .accordion-body { padding: 0 0 15px 40px }
  .loc-footer { justify-content: center; text-align: center }
  .loc-footer-note { width: 100% }
}

/* regency group (ivory section, white card) */
.group { padding: var(--sec-pad-band) 0; overflow: hidden; background: var(--ivory) }
.group-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; margin: 0; padding: 0 }
.group-img { position: relative; min-height: 640px; overflow: hidden; background: #25171a; box-shadow: 0 35px 85px rgba(0, 0, 0, .3); outline: 1px solid rgba(175, 29, 33, .4); outline-offset: 10px }
.group-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(30, 10, 12, .72) 100%); pointer-events: none }
.group-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.06); transition: transform 1.1s, filter .8s }
.group-img:hover img { transform: scale(1.05); filter: grayscale(40%) }
.tag { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; font: 700 .55rem var(--body); letter-spacing: .2em; text-transform: uppercase; color: #fff }
.group-card { position: relative; z-index: 3; min-width: 0; margin: 0 0 0 -4rem; padding: clamp(2rem, 4vw, 4rem); background: #fff; color: var(--ink); border-top: 4px solid var(--red); box-shadow: 0 40px 90px rgba(0, 0, 0, .18) }
.group-card::before { content: "\201C"; position: absolute; right: 1.6rem; top: .2rem; font: 600 9rem/1 var(--ser); color: rgba(175, 29, 33, .12); display: none; pointer-events: none }
.group-card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--red), transparent) }
.astra-lead { margin: 0 0 1.3rem; font: 500 clamp(1.5rem, 2.3vw, 2.1rem)/1.3 var(--ser); color: var(--red) }
.astra-sm { margin: 0; color: #000; font-size: .9rem; line-height: 1.85 }
.lbl { display: flex; align-items: center; gap: 1rem; margin: 2rem 0 1.4rem }
.lbl span { font: 700 .6rem var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--red) }
.lbl::after { content: ""; flex: 1; height: 1px; background: rgba(175, 29, 33, .25) }
.rg-carousel { width: 100%; min-width: 0; overflow: hidden }
.rg-stats { display: flex; flex-wrap: nowrap; gap: 12px; width: 100%; margin: 0; padding: 6px 2px 16px; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none }
.rg-stats::-webkit-scrollbar { display: none }
.rg-stats li { position: relative; flex: 0 0 calc((100% - 24px)/3); min-width: 0; min-height: 150px; padding: 1.5rem 1rem 1.3rem; overflow: hidden; background: var(--ivory); border: 1px solid rgba(175, 29, 33, .12); box-shadow: 0 8px 20px rgba(175, 29, 33, .07); scroll-snap-align: start; transition: transform .35s, box-shadow .35s, border-color .35s }
.rg-stats li:hover { transform: translateY(-5px); border-color: rgba(175, 29, 33, .6); box-shadow: 0 16px 32px rgba(175, 29, 33, .16) }
.rg-stats li::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26%; height: 3px; background: var(--red); transition: width .45s }
.rg-stats li:hover::after { width: 100% }
.rg-stats i { position: absolute; top: .8rem; right: .8rem; color: rgba(175, 29, 33, .6); font: normal 700 .6rem var(--body); letter-spacing: .1em }
.rg-stats b { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem; margin-top: .5rem; color: var(--red); font: 500 clamp(1.8rem, 3vw, 2.8rem)/1.1 var(--ser); font-variant-numeric: lining-nums }
.rg-stats li > span { display: block; margin-top: .65rem; color: #3a2a2c; font: 700 .56rem/1.5 var(--body); letter-spacing: .1em; text-transform: uppercase }
.rg-stats small { display: block; margin-top: .3rem; color: #000; font-size: .78rem; line-height: 1.5 }
.rg-slider-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 1.2rem }
.rg-arrow { display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid var(--red-btn); border-radius: 50%; background: transparent; color: var(--red-btn); font-size: 1.2rem; cursor: pointer; transition: background .3s, color .3s, border-color .3s, opacity .3s }
.rg-arrow:hover:not(:disabled) { background: var(--red-btn); border-color: var(--red-btn); color: #fff }
.rg-arrow:disabled { opacity: .35; cursor: not-allowed }
@media(max-width:991px) {
  .group-grid { display: block }
  .group-img { min-height: 380px; margin: 0 10px }
  .group-card { margin: -3rem 1rem 0 }
  .rg-stats li { flex-basis: calc((100% - 12px)/2) }
}
@media(max-width:575px) {
  .group-card { margin: -2.5rem .6rem 0; padding: 1.6rem 1.2rem }
  .group-card::before { font-size: 6rem }
  .rg-stats { gap: 9px }
  .rg-stats li { flex-basis: calc((100% - 9px)/2); min-height: 135px; padding: 1.2rem .8rem 1rem }
  .rg-stats b { font-size: clamp(1.5rem, 7vw, 2rem) }
  .rg-stats li > span { font-size: .52rem }
  .rg-stats small { font-size: .64rem }
}

/* contact (white section; white card with red accents) */
.contact { background: #fff; overflow: visible; padding: var(--sec-pad-band) 0 }
.c-card { display: grid; grid-template-columns: 5fr 7fr; align-items: stretch; background: #fff; color: var(--ink); outline: 1px solid rgba(175, 29, 33, .35); outline-offset: 10px; box-shadow: 0 30px 70px rgba(175, 29, 33, .14); margin: 10px }
.c-img { position: relative; min-height: 420px; overflow: hidden }
.c-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.c-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(1.4rem, 3vw, 2.4rem) }
.c-cap h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); text-transform: none; margin: 0 }
.c-phones { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 1.2rem }
.c-phones a { color: var(--ivory); text-decoration: none; font: 600 .9rem var(--body); padding-bottom: .2rem; border-bottom: 1px solid #fff }
.c-form { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 4vw, 3.5rem) }
.c-form::before { content: ""; position: absolute; top: 1.2rem; right: 1.2rem; width: 56px; height: 56px; border-top: 1px solid var(--red); border-right: 1px solid var(--red) }
.c-form h2 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); margin-bottom: 2rem; color: var(--d1) }
.c-form .lead-form { width: 100% }
@media(max-width:991px) {
  .contact { padding: 35px 0 }
  .c-card { display: block; margin: 0; outline: 0; background: transparent; box-shadow: none }
  .c-img { min-height: 0; height: 260px }
  .c-form { margin: -64px 14px 0; padding: 1.8rem 1.3rem 1.5rem; background: #fff; border-top: 3px solid var(--red); box-shadow: 0 22px 50px rgba(175, 29, 33, .2); z-index: 2 }
  .c-form::before { display: none }
  .c-form .eyebrow { width: 100%; justify-content: center; margin-bottom: 1.2rem; font-size: 1.1rem; letter-spacing: .24em }
  .c-form .eyebrow::after { content: ""; width: 40px; height: 1px; background: var(--red) }
  .c-form .fld { margin-bottom: 1.1rem }
  .c-form .chk { margin-bottom: 1.2rem }
}

/* forms (dark text on the white contact card / white modal) */
.fld { position: relative; margin-bottom: 1.5rem }
.fld input { width: 100%; border: 0; border-bottom: 1px solid rgba(175, 29, 33, .45); background: transparent; padding: 1.5rem 0 .6rem; font: 500 clamp(1rem, 1.5vw, 1.2rem) var(--body); outline: 0; color: var(--ink); transition: .3s }
.fld input:focus { border-color: var(--red); box-shadow: 0 1px 0 var(--red) }
.fld label { position: absolute; left: 0; top: 1.2rem; font-family: var(--body); font-weight: 500; font-size: clamp(1rem, 1.5vw, 1.2rem); color: #6b5a5c; opacity: .85; pointer-events: none; transition: .25s }
.fld input:focus + label, .fld input:not(:placeholder-shown) + label { top: 0; font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--red); opacity: 1 }
.fld.err input { border-color: var(--red) }
.fld.err::after { content: attr(data-e); position: absolute; left: 0; bottom: -1.1rem; font-size: .68rem; color: var(--red) }
.chk { display: flex; gap: .8rem; align-items: flex-start; font-family: var(--body); font-weight: 500; font-size: .85rem; margin-bottom: 1.5rem; cursor: pointer; color: var(--ink); position: relative }
.chk input { position: absolute; opacity: 0 }
.chk i { flex: none; width: 20px; height: 20px; border: 1px solid var(--red); display: grid; place-items: center; transition: .2s }
.chk input:checked + i { background: var(--red) }
.chk input:checked + i::after { content: "✓"; font-size: .8rem; color: #fff }
.modal-content.lux { background: #fff; color: var(--ink); padding: clamp(1.6rem, 4vw, 2.6rem); border: 1px solid rgba(175, 29, 33, .35); border-radius: 0 }
.lux h3 { text-transform: none; font-size: 2rem; margin: .4rem 0 1.6rem }
.lux .btn-close { position: absolute; right: 1rem; top: 1rem; filter: none }
.lux-logo { display: flex; justify-content: center; width: 100% }
.lux-logo .logo { margin: 0 auto }
/* red button on the white card / modal */
.lux .btn-gold, .c-card .btn-gold { background: var(--red-btn); color: #fff; box-shadow: 0 10px 28px rgba(164, 29, 33, .3) }
.lux .btn-gold:hover, .c-card .btn-gold:hover { background: var(--red-btn-dk); color: #fff }

/* floats */
.wa { position: fixed; right: 1rem; bottom: 5.2rem; width: 54px; height: 54px; border-radius: 50%; background: #25D366; display: grid; place-items: center; z-index: 900; box-shadow: 0 8px 24px rgba(0, 0, 0, .4) }
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: flex }
.sticky-cta a, .sticky-cta button { flex: 1; padding: 1rem; text-align: center; border: 0; font: 700 .72rem var(--body); letter-spacing: .15em; text-transform: uppercase; text-decoration: none }
.sticky-cta a { background: var(--red-btn-dk); color: #fff }
.sticky-cta button { background: var(--red-btn); color: #fff }
@media(min-width:768px) { .wa { bottom: 1.5rem } }
@media(prefers-reduced-motion:reduce) { * { transition: none !important; animation: none !important } }

/* footer */
.foot { position: relative; background: #fff; color: #333; border-top: 3px solid var(--red) }
.foot-grid { display: grid; grid-template-columns: 1fr 1.5fr 2fr; gap: 1.6rem; align-items: center; padding: 1.6rem 0 }
.foot-logos { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start }
.rg-box { background: transparent; padding: 0; display: inline-block }
.rg { max-width: 160px; display: block }
.foot-rera { display: flex; align-items: center; gap: 1.3rem; padding: 1.2rem 1.4rem; border-radius: 14px; 
  /* background: #fff;
   border: 1px solid #eee; 
   border-top: 3px solid var(--red);  */
   /* box-shadow: 0 10px 28px rgba(0, 0, 0, .07)  */
  }
.qr { width: 100px; display: block; background: #fff; padding: 6px; border-radius: 8px; border: 1px solid #e5e5e5 }
.foot-info h4 { margin: 0 0 .5rem; font: 600 1.25rem var(--ser); color: #1c1a17 }
.fi-l { margin: 0 0 .15rem; font: 600 .66rem var(--body); letter-spacing: .12em; text-transform: uppercase; color: #888 }
.fi-v { margin: 0 0 0rem; font-size: 1rem; font-weight: 700; letter-spacing: .04em; color: #1c1a17 }
.fi-a { position: relative; z-index: 5; display: inline-block; cursor: pointer; pointer-events: auto; color: #1a5fb4; text-decoration: none; font-size: .88rem; border-bottom: 1px solid transparent; transition: border-color .2s }
.fi-a:hover { border-bottom-color: #1a5fb4 }
.footer-rera-link a { position: relative; z-index: 3; pointer-events: auto; cursor: pointer }
.disc { margin: 0; padding-left: 1.5rem; border-left: 2px solid var(--red); font-size: .74rem; line-height: 1.8; color: #666 }
.disc b { color: #1c1a17; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem }
.disc a { color: #1a5fb4; text-decoration: none }
.foot-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1.5rem; padding: .9rem 0; border-top: 1px solid #e8e4dc; font-size: .78rem; color: #666 }
.foot-bar a { color: #444; text-decoration: none; transition: color .2s }
.foot-bar a:hover { color: var(--red-btn) }
/* .footer-legal-separator { margin: 0 .35rem; color: #bbb } */
@media(min-width:992px) {
  .foot-grid { gap: 0 }
  .foot-logos { align-items: center; padding-right: 2rem }
  .foot-rera, .disc { position: relative }
  .foot-rera { justify-content: center; padding: .6rem 2rem }
  .disc { padding-left: 2rem; border-left: 0 }
  .foot-rera::before, .disc::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 110px; transform: translateY(-50%); background: rgb(164 29 33) }
}
@media(max-width:991px) {
  .foot-grid { grid-template-columns: 1fr 1.4fr; gap: 2rem }
  .disc { grid-column: 1/-1; border-left: 0; border-top: 1px solid #e8e4dc; padding: 1.2rem 0 0 }
}
@media(max-width:575px) {
  .foot-grid { grid-template-columns: 1fr; justify-items: center; text-align: center }
  .foot-logos { align-items: center }
  .foot-rera { flex-direction: column; text-align: center; width: 100% }
  .foot-bar { justify-content: center; text-align: center; padding-bottom: 5.5rem }
}

/* hero */
.hero-slider { position: relative; background: var(--ivory); padding-top: var(--nav-h) }
.hero-slider .carousel-item img { width: 100%; height: 100%;  object-fit: contain }
.hero-slider .carousel-indicators { margin-bottom: 1.4rem }
.hero-slider .carousel-indicators button { width: 34px; height: 3px; border: 0; background: var(--red); opacity: .45; margin: 0 5px }
.hero-slider .carousel-indicators .active { opacity: 1 }
.hero-slider .carousel-control-prev, .hero-slider .carousel-control-next { width: 9% }

/* lightbox */
.fancybox__container {
  --fancybox-bg: rgba(24, 4, 8, .97); --f-button-color: #fff; --f-button-bg: transparent; --f-button-hover-bg: rgba(255, 255, 255, .18);
  --f-button-hover-color: #fff; --f-button-svg-stroke-width: 1.6; --f-thumb-outline-color: #af1d21; --f-thumb-border-radius: 0; z-index: 20000 !important
}
.fancybox__caption { font: 700 .74rem var(--body); letter-spacing: .2em; text-transform: uppercase; color: #fff; text-align: center }
.fancybox__content { border: 1px solid rgba(255, 255, 255, .4); box-shadow: 0 30px 80px rgba(0, 0, 0, .6) }
.fancybox__nav .f-button { border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; width: 48px; height: 48px }

/* phone field */
.fld-tel .iti { display: block; width: 100% }
.fld-tel label { top: calc(1.2rem - 2px); left: 5.4rem }
.fld-tel:focus-within label, .fld-tel.filled label { top: 0; left: 0; font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--red); opacity: 1 }
.fld-tel { margin-top: 1.8rem }
.fld-tel input { padding-top: 1.5rem }
.fld-tel .iti__selected-dial-code { color: var(--ink); font: 500 clamp(1rem, 1.5vw, 1.2rem) var(--body) }
.fld-tel .iti__arrow { border-top-color: var(--red) }
.fld-tel .iti__arrow--up { border-bottom-color: var(--red) }
.iti--separate-dial-code .iti__selected-flag { background: transparent !important }
.iti__country-list { color: #222; background: #fff; font-size: .88rem; max-width: min(320px, 88vw); max-height: 220px; overscroll-behavior: contain }
.iti--container { z-index: 30000 }
.fld-tel .iti__dropdown-content { z-index: 60 }
.modal { z-index: 20100 }
.modal-backdrop { z-index: 20090 }

/* gallery */
.gal { position: relative; background: #fff; color: var(--ink) }
.gal .container-fluid { position: relative }
.gal .cover { overflow: hidden; padding: 16px 0 22px }
.gal .cover .swiper-slide { height: auto }
.gal .g-item { display: block; position: relative; width: 100%; aspect-ratio: 4/5; padding: 8px; overflow: hidden; cursor: zoom-in; background: #fff; border: 1px solid rgba(175, 29, 33, .45); box-shadow: 0 18px 40px rgba(175, 29, 33, .14) }
.gal .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease }
.gal .g-item:hover img { transform: scale(1.06) }
.gal .g-item::before { content: ""; position: absolute; inset: 8px; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(40, 10, 12, .88) 0%, rgba(40, 10, 12, .35) 32%, rgba(40, 10, 12, 0) 58%) }
.gal .g-item::after { content: "+"; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; z-index: 3; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--red); font: 400 1.7rem/1 var(--body); opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: .35s }
.gal .g-item:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1) }
.gal .cap { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; display: flex; flex-direction: column; gap: .3rem; padding: 1.2rem 1.1rem; color: #fff; font-size: 1.3 rem; text-align: left; pointer-events: none }
.gal .cap::before { content: attr(data-n); font: 700 .7rem var(--body); font-style: normal; letter-spacing: .26em; color: #fff }
.gal .cap::after { content: ""; width: 34px; height: 2px; margin-top: .25rem; background: #fff }
.g-nav { display: flex; justify-content: center; align-items: center; gap: 1.4rem; margin-top: var(--head-gap) }
.g-prev, .g-next { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--red-btn); background: transparent; color: var(--red-btn); font-size: 1.3rem; display: grid; place-items: center; cursor: pointer; transition: background .3s, color .3s }
.g-prev:hover, .g-next:hover { background: var(--red-btn); border-color: var(--red-btn); color: #fff }
.g-prog { display: flex; flex-direction: column; align-items: center; gap: .6rem; width: min(260px, 38vw) }
.g-count { display: inline-flex; align-items: baseline; gap: .5rem; font-family: var(--body); letter-spacing: 0; font-variant-numeric: lining-nums }
.g-count b { font: 700 clamp(2.2rem, 4vw, 3.2rem)/1 var(--body); font-variant-numeric: lining-nums; color: rgba(175, 29, 33, .45) }
.g-count em { font: 700 1.1rem/1 var(--body); font-style: normal; font-variant-numeric: lining-nums; color: rgba(175, 29, 33, .45); margin-left: 0 }
.g-bar { display: block; position: relative; width: 100%; height: 2px; background: rgba(175, 29, 33, .2) }
.g-bar u { position: absolute; left: 0; top: 0; height: 100%; width: 12.5%; background: var(--red); transition: width .5s ease; text-decoration: none }
@media(max-width:575px) {
  .gal .g-item { padding: 6px }
  .gal .g-item::before { inset: 6px }
  .gal .cap { left: 6px; right: 6px; bottom: 6px; font-size: 1.15rem }
  .g-prev, .g-next { width: 46px; height: 46px }
  .g-nav { gap: 1rem }
}

/* validation */
.lead-form label.error { position: static !important; display: block; transform: none !important; margin: -20px 0 8px !important; padding: 0 !important; font-size: 11px; line-height: 1.2; letter-spacing: .2px; text-transform: none; font-weight: 500; color: var(--red) !important; pointer-events: none }
.lead-form .chk + label.error { margin: 4px 0 6px !important }
.lead-form .iti__tel-input { line-height: normal !important; transform: translateY(-7px) }
.lead-form .iti__selected-dial-code { line-height: normal !important }

/* no italics on decorative spans (headings keep the serif face, body text uses --body) */
.serif, h1 .serif, h2 .serif, .menu li a, .gal .cap, .sec-head h2 .serif, .blk h2 .serif, em, i { font-style: normal !important }
body { font-variant-numeric: lining-nums }

/* no circle-zoom clipping */
[data-zoom] { clip-path: none !important }

/* Spaces slider (mobile): centred circular arrows */
@media (max-width: 991px) {
  .hs-slider-controls { display: flex !important; align-items: center; justify-content: center; gap: 14px; position: relative; z-index: 5 }
  .hs-arrow { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border: 1.5px solid var(--red-btn); border-radius: 50%; background: transparent; color: var(--red-btn); font-family: Arial, sans-serif; font-size: 22px; line-height: 1; cursor: pointer; transition: background .3s ease, color .3s ease, opacity .3s ease, transform .3s ease }
  .hs-arrow:hover:not(:disabled) { background: var(--red-btn); color: #fff; transform: translateY(-2px) }
  .hs-arrow:disabled { opacity: .35; cursor: not-allowed }
  .hs-dots { display: none !important }
}