/* ============================================================
   AVHAD HOMESTEAD — brochure theme
   Navy / cream / gold, maze motif, arch framing.
   Loaded after style.css: overrides the previous look & feel.
   ============================================================ */

:root {
  /* palette lifted from the brochure */
  --navy: #0d2540;
  --navy-deep: #081a2d;
  --navy-soft: #16385c;
  --gold: #c19a5b;
  --gold-deep: #a07c3f;
  --gold-light: #dcbd84;
  --gold-pale: #efe3cb;
  --cream: #f3efe8;
  --cream-warm: #faf5ed;
  --ink: #22211f;

  --primary: var(--navy);
  --text-color: #4a4842;
  --text-color-2: #6f6a61;
  --text-dark: #22211f;
  --dark-blue: var(--navy);
  --primary-pink: var(--gold);

  --display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --body: "Jost", "Montserrat", system-ui, sans-serif;

  /* every legacy font hook now resolves to the brochure pairing */
  --CeraGodrejInterio-Regular: var(--body);
  --TheFuture-Regular: var(--body);
  --Cera-Godrej-Interio: var(--display);
  --TT_Neoris_Regular: var(--body);
  --Montserrat: var(--body);

  --maze-light: url("../assets/images/overlay/maze-light.svg");
  --maze-dark: url("../assets/images/overlay/maze-dark.svg");
  --arch: 50% 50% 0 0 / 28% 28% 0 0;
}

/* ---------- base ---------- */

body {
  background-color: var(--cream);
  font-family: var(--body);
  font-weight: 300;
  color: var(--text-color);
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.18;
}

body::-webkit-scrollbar-thumb {
  background-color: var(--gold);
  box-shadow: none;
}

::selection {
  background: var(--gold);
  color: #fff;
}

/* ---------- section canvases: alternating navy / cream ---------- */

.texture-pattern::after {
  background: none;
}

/* the Japanese-theme decorations are retired */
.texture-pattern.sun-pattern::before,
.overlay-tree,
.falling-leaves,
.amenities-txt-container::before,
.amenities-txt-container::after,
.contact-container::after,
footer .leaf,
.moon-img-wrap {
  display: none !important;
}

section.section-overview,
section.section-amenities,
section.section-gallery,
section.section-about {
  background-color: var(--cream);
}

/* Connect With Us sits on its own warm-cream band, sai-palm-view-style,
   rather than the navy used by the other closing bands */
section.section-contact {
  background-color: var(--cream-warm);
  color: var(--text-color);
}

section.section-config,
section.section-specifications,
section.section-location {
  background-color: var(--navy);
  color: rgba(255, 255, 255, 0.82);
  /* soft lift from the top edge so the band has depth without any pattern */
  background-image: radial-gradient(
    130% 95% at 50% 0%,
    rgba(22, 56, 92, 0.85) 0%,
    rgba(13, 37, 64, 0) 62%
  );
}

/* The maze motif stays, but only as a whisper at the outer edges: the tile is
   enlarged, dimmed, and masked away from the middle so it never competes with
   the copy sitting on top of it. */
section.section-config::after,
section.section-specifications::after,
section.section-location::after {
  background: var(--maze-light) repeat center center;
  background-size: 860px 860px;
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(
    ellipse 105% 80% at 50% 50%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.45) 58%,
    #000 88%
  );
  mask-image: radial-gradient(
    ellipse 105% 80% at 50% 50%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.45) 58%,
    #000 88%
  );
}

/* a hairline gold rule separates the bands */
section.section-config,
section.section-specifications,
section.section-location,
section.section-contact {
  border-top: 1px solid rgba(193, 154, 91, 0.35);
  border-bottom: 1px solid rgba(193, 154, 91, 0.35);
}

/* ---------- typography system ---------- */

.section-heading .section-title {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.1rem;
  position: relative;
  padding-bottom: 0.9rem;
}

.section-heading .section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 1px;
  background: var(--gold);
}

.section-heading .section-title.text-center {
  text-align: center;
}

.section-heading .section-title.text-center::after {
  left: 50%;
  transform: translateX(-50%);
}

.section-heading .section-subtitle {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.9vw, 3rem);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--primary);
  text-transform: none;
}

.section-heading .section-desc {
  font-family: var(--body);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.85;
  color: #000;
}

.section-heading .section-desc.text-center {
  margin-left: auto;
  margin-right: auto;
}

/* gold accent line, as used across the brochure spreads */
.accent-line {
  font-family: GOUDYOLST-BT-ITALIC;
  font-size: clamp(1.15rem, 1.6vw, 1.7rem);
  color: var(--gold-deep);
  letter-spacing: 0.01em;
  margin-top: 1.25rem;
}

/* on navy bands */
.section-config .section-heading .section-subtitle,
.section-specifications .section-heading .section-subtitle,
.section-location .section-heading .section-subtitle {
  color: #fff;
}

.section-config .section-heading .section-title,
.section-specifications .section-heading .section-title,
.section-location .section-heading .section-title {
  color: var(--gold-light);
  font-weight: 400;
}

.section-config .section-heading .section-desc,
.section-specifications .section-heading .section-desc,
.section-location .section-heading .section-desc {
  color: #fff;
  font-weight: 400;
}

.section-config .accent-line,
.section-specifications .accent-line,
.section-location .accent-line {
  color: var(--gold-light);
}

.line {
  background-color: rgba(193, 154, 91, 0.75);
  height: 1px;
}

/* ---------- section containers ---------- */

/* The amenities and location bands were pinned to the right edge of the
   screen (margin: auto 0 auto auto), so their content ran off one side while
   every other band sat centred - and the wider the monitor, the more lopsided
   it looked. They are centred now, matching the rest of the page, and capped
   so the layout stops growing on very large screens. */
.custom-container,
.location-container {
  width: 90%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

.calc-container {
  max-width: 1600px;
}

/* ---------- arch motif ---------- */

.arch-frame {
  position: relative;
  padding: 14px;
}

.arch-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold);
  border-radius: var(--arch);
  pointer-events: none;
}

.arch-frame > img,
.arch-frame .arch-media,
.arch-frame a img {
  border-radius: var(--arch);
  display: block;
  width: 100%;
}

/* ---------- header / nav ---------- */

header.scrolled {
  background: rgba(8, 26, 45, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(193, 154, 91, 0.3);
}

.navbar-container {
  padding: 1.35rem clamp(1.25rem, 2.5vw, 3rem);
  gap: 1.5rem;
}

.navbar-container .primary-button .btnPrimary {
  padding: 0.85rem 1.9rem;
}

.navLinks {
  gap: clamp(1rem, 1.6vw, 2.2rem);
  flex-wrap: nowrap;
}

.navLinks .navLink {
  white-space: nowrap;
  font-family: var(--body);
  font-size: clamp(0.66rem, 0.78vw, 0.78rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.88);
}

.navLinks .navLink::after {
  height: 1px;
  bottom: -8px;
  border-radius: 0;
  background-color: var(--gold);
}

/* ---------- buttons ---------- */

.btnPrimary {
  white-space: nowrap;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.95rem 2.4rem;
  color: #fff;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 0;
  justify-content: center;
  gap: 0.6rem;
  transition: all 0.45s ease;
}

.btnPrimary::after {
  display: none;
}

.btnPrimary:hover {
  background: transparent;
  color: var(--gold);
}

.btnPrimary.light {
  background: var(--gold);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.65);
}

.btnPrimary.light:hover {
  background: #fff;
  color: var(--navy);
}

.btnPrimary.custom-size {
  font-size: 0.7rem;
  padding: 0.8rem 1.4rem;
}

.btnPrimary .icon {
  display: inline-flex;
  align-items: center;
}

.btnPrimary .icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.btnPrimary .icon img {
  filter: brightness(0) invert(1);
}

/* ---------- hero banner ---------- */

section.main-banner {
  background: var(--navy-deep) var(--maze-light) repeat center center;
  background-size: 620px 620px;
  overflow: hidden;
}

/* The banner artwork is composed to its own proportions - 2000x900 on the
   desktop slide - so it is shown at that aspect rather than being forced to
   the height of the viewport. Stretching it to full screen height meant
   object-fit: cover scaled it up and cropped the sides off, losing part of
   the baked-in artwork. Width drives the size; height follows. */
section.main-banner .custom-slider,
section.main-banner .carousel-inner,
section.main-banner .carousel-item {
  width: 100%;
  height: auto;
}

section.main-banner .carousel-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.banner-overlay-txt {
  bottom: 14%;
  left: 0;
  right: 0;
  margin: 0 auto;
  align-items: center;
  text-align: center;
  z-index: 3;
  gap: 0.75rem;
  width: min(90%, 1000px);
  padding: 0 1rem;
}

.banner-overlay-txt .banner-eyebrow {
  font-family: var(--body);
  font-size: 0.72rem;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.banner-overlay-txt .banner-overlay-title {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 4.6rem);
  letter-spacing: 0.12em;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.1;
}

.banner-overlay-txt .banner-rule {
  width: 78px;
  height: 1px;
  background: var(--gold);
  margin: 0.4rem auto;
}

.banner-overlay-txt .banner-overlay-subtitle {
  font-family: var(--display);
  font-size: clamp(1rem, 1.7vw, 1.7rem);
  color: var(--gold-light);
  text-transform: none;
  letter-spacing: 0.02em;
}

.banner-overlay-txt .banner-meta {
  font-family: var(--body);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.85rem;
}

/* ---------- overview + enquiry card ---------- */

section.section-overview {
  padding: 4rem 0;
}

.overview-content {
  margin: auto;
}

/* ---------- shared form card (overview / modal / contact) ---------- */
/* one design for all three forms, matching the Bayline reference: ivory
   paper inside a gold double rule, a centred serif title over a hairline,
   and square fields that pick up a gold ring on focus. */

.overview-form,
.contact-card,
.custom-modal-content {
  background: var(--cream-warm);
  border: 1px solid rgba(193, 154, 91, 0.45);
  border-radius: 0;
  padding: 3.25rem 2.75rem;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 34px 80px -46px rgba(13, 37, 64, 0.7);
  transition: box-shadow 0.7s ease;
}

.overview-form:hover,
.contact-card:hover,
.custom-modal-content:hover {
  box-shadow: 0 42px 96px -46px rgba(13, 37, 64, 0.78);
}

/* the double rule: a firm inner frame with a lighter one just inside it.
   width/height/background are reset because the base stylesheet uses these
   same pseudo-elements on the modal for the retired tree artwork. */
.overview-form::before,
.contact-card::before,
.custom-modal-content::before {
  content: "";
  position: absolute;
  inset: 14px;
  width: auto;
  height: auto;
  z-index: 2;
  background: none;
  border: 1px solid rgba(193, 154, 91, 0.6);
  pointer-events: none;
}

.overview-form::after,
.contact-card::after,
.custom-modal-content::after {
  content: "";
  position: absolute;
  inset: 22px;
  width: auto;
  height: auto;
  z-index: 2;
  background: none;
  border: 1px solid rgba(193, 154, 91, 0.26);
  pointer-events: none;
}

.overview-form form,
.contact-card form,
.custom-modal-content form {
  width: 100%;
  position: relative;
  z-index: 3;
}

/* the modal reuses the card shell, so it drops its own padding and framing */
.custom-modal-content .modal-body {
  position: relative;
  z-index: 3;
  padding: 0;
}

.custom-modal-content .modal-heading {
  position: relative;
  z-index: 3;
}

/* ---------- form typography ---------- */

.form-title,
.modal-heading-title {
  font-family: var(--display);
  color: var(--ink);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  margin: 0 auto;
  letter-spacing: 0.01em;
}

.form-title::after,
.modal-heading-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  margin: 0.85rem auto 0;
  background: linear-gradient(
    90deg,
    rgba(193, 154, 91, 0),
    var(--gold),
    rgba(193, 154, 91, 0)
  );
}

.form-subtitle,
.modal-heading-sub {
  font-family: var(--body);
  color: var(--text-color);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.65;
  text-align: center;
  max-width: 28rem;
  margin: 0.85rem auto 0.5rem auto;
}

.overview-form .form-check-label,
.overview-form .checkbox-label,
.contact-card .form-check-label,
.contact-card .checkbox-label,
.custom-modal-content .checkbox-label,
.custom-modal-content .form-check-label {
  color: var(--text-color-2);
  font-size: 0.8rem;
  line-height: 1.6;
}

/* ---------- fields ---------- */

.overview-form .custom-input,
.contact-card .custom-input,
.custom-modal-content .custom-input {
  background-color: #fff;
  border: 1px solid rgba(13, 37, 64, 0.18);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  padding: 0.9rem 1rem;
  transition: border-color 0.45s ease, background-color 0.45s ease,
    box-shadow 0.45s ease;
}

.overview-form .custom-input:focus,
.contact-card .custom-input:focus,
.custom-modal-content .custom-input:focus {
  background-color: #fff;
  border-color: var(--gold);
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(193, 154, 91, 0.18);
}

/* kept in their own rules - a browser drops a whole selector list if any
   one entry uses a pseudo-element it doesn't recognise */
.overview-form .custom-input::placeholder,
.contact-card .custom-input::placeholder,
.custom-modal-content .custom-input::placeholder {
  color: rgba(107, 120, 134, 0.85) !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.overview-form .custom-input::-webkit-input-placeholder,
.contact-card .custom-input::-webkit-input-placeholder,
.custom-modal-content .custom-input::-webkit-input-placeholder {
  color: rgba(107, 120, 134, 0.85) !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.overview-form .custom-input::-moz-placeholder,
.contact-card .custom-input::-moz-placeholder,
.custom-modal-content .custom-input::-moz-placeholder {
  color: rgba(107, 120, 134, 0.85) !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.overview-form .form-check,
.contact-card .form-check,
.custom-modal-content .form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.4rem 0 0.2rem;
  padding-left: 0;
}

.overview-form .form-check-input,
.contact-card .form-check-input,
.custom-modal-content .form-check-input {
  background-color: #fff;
  border: 1px solid rgba(13, 37, 64, 0.3);
  border-radius: 0;
  float: none;
  margin: 0.2rem 0 0;
  flex: 0 0 auto;
}

.overview-form .form-check-input:checked,
.contact-card .form-check-input:checked,
.custom-modal-content .form-check-input:checked {
  background-color: var(--gold);
  border-color: var(--gold);
}

.overview-form .form-check-input:focus,
.contact-card .form-check-input:focus,
.custom-modal-content .form-check-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(193, 154, 91, 0.2);
}

.invalid-feedback {
  color: #b4433f;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

/* ---------- submit ---------- */

.overview-form .btn-submit-1,
.contact-card .btn-submit-1,
.custom-modal-content .btn-submit-1 {
  position: relative;
  width: 100%;
  justify-content: center;
  overflow: hidden;
  margin-top: 0.75rem;
  gap: 0.6rem;
  background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 60%, var(--gold) 100%);
  border-color: transparent;
  border-radius: 0;
  letter-spacing: 0.16em;
  box-shadow: 0 10px 26px -6px rgba(160, 124, 63, 0.5);
  transition: transform 0.5s ease, box-shadow 0.5s ease, filter 0.5s ease;
}

/* a slow highlight sweeps across the button on hover */
.overview-form .btn-submit-1::before,
.contact-card .btn-submit-1::before,
.custom-modal-content .btn-submit-1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 22%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 78%
  );
  transform: translateX(-125%);
  transition: transform 0.9s ease;
  pointer-events: none;
}

.overview-form .btn-submit-1:hover,
.contact-card .btn-submit-1:hover,
.custom-modal-content .btn-submit-1:hover {
  color: #fff;
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 14px 30px -6px rgba(160, 124, 63, 0.6);
}

.overview-form .btn-submit-1:hover::before,
.contact-card .btn-submit-1:hover::before,
.custom-modal-content .btn-submit-1:hover::before {
  transform: translateX(125%);
}

.overview-form .btn-submit-1:active,
.contact-card .btn-submit-1:active,
.custom-modal-content .btn-submit-1:active {
  transform: translateY(0);
}

/* ---------- configuration ---------- */

section.section-config {
  padding: 4rem 0;
}

.section-config .section-heading .section-subtitle.text-center {
  max-width: none;
}

.section-config .section-heading .section-desc {
  max-width: none;
}

.config-nav .custom-nav .nav-item .nav-link {
  font-family: var(--body);
  border: 1px solid rgba(193, 154, 91, 0.6);
  border-radius: 0;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.22em;
  font-size: 0.76rem;
  font-weight: 400;
  text-transform: uppercase;
  padding: 0.8rem 2.4rem;
}

.config-nav .custom-nav .nav-item .nav-link.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.config-about {
  background: var(--navy-deep);
  border: 1px solid rgba(193, 154, 91, 0.6);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  padding: 3.5rem 0;
}

.config-about-txt .config-title {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.8vw, 2rem);
  color: #fff;
  margin-bottom: 1rem;
}

.config-about-txt .config-subtitle {
  font-family: var(--body);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.8;
  font-weight: 400;
}

.config-more-info .more-info .more-info-txt {
  font-family: var(--body);
  font-size: 0.95rem;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.config-more-info .more-info .more-info-icon img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(28%) saturate(640%)
    hue-rotate(348deg) brightness(89%) contrast(86%);
}

.config-about-img {
  border-radius: 0;
  border: 1px solid rgba(193, 154, 91, 0.4);
  /* the plan sheets are drawn on cream paper, so the box matches them and any
     letterboxing reads as margin rather than a panel behind the drawing */
  background: var(--cream);
}

/* A floor plan is a dimensioned drawing, so it is fitted whole rather than
   cropped to fill the box. It is blurred because the plan is gated: the shape
   of the home reads, the room dimensions do not, and the card alongside
   carries the Check Price button that opens the enquiry form. */
.config-about-img img {
  object-fit: contain;
  backdrop-filter: none;
  padding: 0.5rem;
  filter: blur(7px);
  transform: scale(1.03);
  transition: filter 0.5s ease;
}

/* the padlock sits over the blur as the visual cue that it is gated */
.config-about-img::after {
  width: 68px;
  height: 68px;
  opacity: 0.75;
  z-index: 2;
}

/* ---------- check-price button on the configuration card ---------- */

.config-cta {
  margin-top: 1.75rem;
  display: flex;
  justify-content: center;
}

.config-about .btn-check-price {
  padding: 0.95rem 2.4rem;
  border-radius: 0;
  background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 60%, var(--gold) 100%);
  border: 1px solid transparent;
  color: #fff;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 26px -8px rgba(160, 124, 63, 0.55);
  transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
}

.config-about .btn-check-price:hover,
.config-about .btn-check-price:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 14px 32px -8px rgba(160, 124, 63, 0.65);
}

.config-about .btn-check-price:active {
  transform: translateY(0);
}

/* ---------- amenities ---------- */

section.section-amenities {
  padding: 4rem 0;
}

.feature-accordion {
  border-top: 1px solid rgba(193, 154, 91, 0.45);
}

.feature-item {
  border-bottom: 1px solid rgba(193, 154, 91, 0.45);
}

.feature-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--body);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--primary);
  cursor: pointer;
  transition: color 0.3s ease;
}

.feature-toggle::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1px solid var(--gold-deep);
  border-bottom: 1px solid var(--gold-deep);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.feature-toggle[aria-expanded="true"] {
  color: var(--gold-deep);
}

.feature-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

.feature-body {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.75;
  color: #000;
  padding: 0 1.5rem 1rem 0;
  margin: 0;
}

.amenities-img {
  border-radius: var(--arch);
  transform: scale(0.88);
}

.amenities-img::after {
  background: linear-gradient(
    0deg,
    rgba(8, 26, 45, 0.62) 0%,
    rgba(8, 26, 45, 0.62) 100%
  );
}

/* the label sits on whatever the render happens to show at the foot of the
   frame - often pale marble - so the scrim has to carry it on its own */
.amenities-swiper-2 .swiper-slide.swiper-slide-active .amenities-img::after {
  background: linear-gradient(
    0deg,
    rgba(8, 26, 45, 0.88) 0%,
    rgba(8, 26, 45, 0.6) 22%,
    rgba(8, 26, 45, 0.18) 45%,
    rgba(8, 26, 45, 0) 65%
  );
  opacity: 1;
}

.amenities-txt {
  background: transparent;
  /* the scrim is an ::after on the same box, so it paints over the label
     unless the label is lifted above it */
  z-index: 2;
  left: 0;
  top: auto;
  bottom: 7%;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.02em;
  opacity: 0;
  padding: 0;
}

.amenities-txt span {
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: #fff;
  font-weight: 500;
  text-shadow: 0 1px 8px rgba(8, 26, 45, 0.9), 0 0 2px rgba(8, 26, 45, 0.7);
}

.amenities-txt span.mb-2 {
  margin-bottom: 0 !important;
  margin-right: 0.5rem;
}

.swiper-button-container .swiper-nav .swiper-button {
  width: 46px;
  height: 46px;
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s ease;
}

.swiper-button-container .swiper-nav .swiper-button:hover {
  background: var(--gold);
  color: #fff;
}

.swiper-button-container .swiper-nav .swiper-button svg {
  width: 22px;
  height: 22px;
}

/* ---------- specifications ---------- */

section.section-specifications {
  padding: 4rem 0;
}

.spec-card {
  height: 100%;
  background: var(--navy-deep);
  border: 1px solid rgba(193, 154, 91, 0.55);
  border-radius: 0;
  padding: 2.25rem 1.5rem;
  text-align: center;
  transition: all 0.45s ease;
}

.spec-card:hover {
  border-color: var(--gold);
  background: var(--navy-soft);
  transform: translateY(-4px);
}

.spec-card .spec-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 1.15rem auto;
}

.spec-card .spec-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(70%) sepia(28%) saturate(640%)
    hue-rotate(348deg) brightness(89%) contrast(86%);
}

.spec-card .spec-txt {
  font-family: var(--body);
  font-size: 1.08rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0;
}

/* The arrows belong to the phone slider only; the desktop grid needs no
   controls, so they are hidden until the layout switches over. */
.spec-nav {
  display: none;
}

/* On a phone the eight cards become a slider showing one at a time, driven
   by the gold arrows centred beneath it. Built on scroll-snap rather than
   Owl, so the Bootstrap grid markup is untouched and the desktop layout is
   left exactly as it was. */
@media (max-width: 767.98px) {
  .spec-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* the row's negative gutter would push the scroller past the container
       and give the whole page a horizontal scrollbar */
    margin-left: 0;
    margin-right: 0;
    /* the native scrollbar is hidden: the arrows are the affordance */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .spec-grid::-webkit-scrollbar {
    display: none;
  }

  /* one card fills the viewport at a time */
  .spec-grid > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    scroll-snap-align: center;
  }

  .spec-card {
    padding: 2.25rem 1.25rem;
  }

  .spec-card .spec-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1.1rem;
  }

  .spec-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.75rem;
  }

  .spec-nav-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 0;
    color: var(--gold-light);
    cursor: pointer;
    transition: all 0.4s ease;
  }

  .spec-nav-btn svg {
    width: 22px;
    height: 22px;
  }

  .spec-nav-btn:hover,
  .spec-nav-btn:focus-visible {
    background: var(--gold);
    color: #fff;
  }

  /* at either end the button dims rather than disappearing, so the pair
     never shifts position mid-slide */
  .spec-nav-btn[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  .spec-nav-btn[disabled]:hover {
    background: transparent;
    color: var(--gold-light);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spec-grid {
    scroll-behavior: auto;
  }
}

/* ---------- gallery ---------- */

section.section-gallery {
  padding: 4rem 0;
}

.custom-nav-tabs .custom-nav-link {
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-color-2);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0.6rem 1.2rem;
}

.custom-nav-tabs .custom-nav-link.active,
.custom-nav-tabs .nav-item.show .custom-nav-link {
  color: var(--primary);
  background: transparent;
  border-bottom-color: var(--gold);
}

/* square: the gold vector.png frame laid over the active slide is a perfect
   rectangle, so an arched crop cut its top corners off */
.gal_image {
  border-radius: 0;
  overflow: hidden;
}

/* One strip now mixes portrait exteriors with landscape interiors. Every
   slide gets the same height so the elevations no longer tower over the
   interiors, and each image is centred within it rather than hung from the
   top edge. The height goes on the item, not the stage: Owl positions the
   stage itself to centre the active slide, and turning it into a flex
   container throws that calculation off at the single-slide breakpoint. */
.gal-carousel .owl-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58vh;
}

/* the box shrink-wraps the image rather than filling the slot, so the gold
   frame stays tight to the picture instead of floating around letterboxing */
.gal-carousel .gal_image {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.gal-carousel .gal_image img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 58vh;
}

.gal-carousel .owl-nav button {
  border: 1px solid var(--gold) !important;
  border-radius: 0 !important;
  width: 46px;
  height: 46px;
}

/* ---------- location ---------- */

section.section-location {
  padding: 4rem 0;
}

.section-location .section-heading .section-subtitle {
  font-size: clamp(1.3rem, 2vw, 2rem);
}

.loc-back {
  padding: 0 2rem 0 0;
  border-radius: 0;
}

.accordion-button {
  font-family: var(--display) !important;
  color: #fff !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(193, 154, 91, 0.75) !important;
  padding: 1.15rem 0 !important;
  text-transform: uppercase;
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.accordion-body {
  padding-left: 0;
  padding-right: 0;
}

.acc-intro {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 1.4rem;
}

.accordion-content .acc-location {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.accordion-content .acc-icon img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(28%) saturate(640%)
    hue-rotate(348deg) brightness(89%) contrast(86%);
  width: 14px;
}

.location-map {
  border: 1px solid rgba(193, 154, 91, 0.45);
  padding: 10px;
}

/* ---------- about ---------- */

section.section-about {
  padding: 4rem 0;
}

.about-main-content {
  margin: 0 auto;
}

/* ---------- contact ---------- */

section.section-contact {
  padding: 4rem 0;
}

.section-contact .section-heading .section-subtitle {
  font-size: clamp(1.6rem, 2.4vw, 2.6rem);
}

.contact-details {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0 0;
  display: grid;
  gap: 1.4rem;
}

.contact-details li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.contact-details .contact-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(193, 154, 91, 0.12);
  color: var(--gold-deep);
  font-size: 0.85rem;
  margin-top: 0.1rem;
}

.contact-label {
  display: block;
  font-weight: 700;
  font-family: var(--body);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.2rem;
}

.contact-value {
  font-family: var(--body);
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-dark);
  text-decoration: none;
}

a.contact-value:hover {
  color: var(--gold-deep);
}

/* ---------- fixed buttons & modal ---------- */

.fixed-button .btnPrimary {
  border-radius: 0;
  font-size: 0.8rem;
  padding: 1rem 1.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  background: var(--navy-deep);
  border-top: 1px solid rgba(193, 154, 91, 0.6);
}

.mobile-cta-btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem 0.5rem;
  background: transparent;
  border: 0;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

.mobile-cta-btn i {
  color: var(--gold-light);
}

.mobile-cta-btn + .mobile-cta-btn {
  border-left: 1px solid rgba(193, 154, 91, 0.6);
}

.brochure-tab {
  position: fixed;
  left: 0;
  bottom: 4.2rem;
  z-index: 999;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: var(--gold);
  color: #fff;
  border: 0;
  padding: 1.1rem 0.65rem;
  font-family: var(--body);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.custom-modal-content {
  padding: 3rem 2.5rem 2.75rem 2.5rem;
}

/* a near-opaque navy backdrop, so the banner behind never shows through
   the white modal card */
.modal-backdrop.show {
  background-color: var(--navy-deep) !important;
  opacity: 0.92 !important;
}

.custom-modal-content .modal-close img {
  filter: brightness(0);
  opacity: 0.5;
}

.custom-modal-content .modal-logo {
  width: 72px;
  margin: 0.25rem auto 1rem auto;
}

.custom-modal-content .modal-logo img {
  filter: brightness(0);
  opacity: 0.88;
}

/* the modal heading is the shared .form-title / .form-subtitle design; only
   its spacing and the close button need modal-specific handling */
.custom-modal-content .modal-heading {
  text-align: center;
  margin-bottom: 1.25rem;
}

.custom-modal-content .modal-close {
  top: 26px;
  right: 26px;
  width: 34px;
  height: 34px;
  z-index: 4;
}

.toggle-up {
  background: var(--gold);
  border-radius: 0;
}

/* ---------- offcanvas ---------- */

.offcanvas {
  background: var(--navy) var(--maze-light) repeat center center;
  background-size: 520px 520px;
}

.offcanvas-link {
  font-family: var(--display);
  color: #fff;
  letter-spacing: 0.06em;
}

.offcanvas .offcanvas-close {
  color: #fff;
}

/* ---------- footer ---------- */

footer {
  background: var(--navy-deep);
  padding: 4.5rem 0 3rem 0;
  border-top: 1px solid rgba(193, 154, 91, 0.35);
}

footer::after {
  background: var(--maze-light) repeat center center !important;
  background-size: 860px 860px !important;
  opacity: 0.45 !important;
}

footer p,
footer .disc {
  color: #fff;
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.8;
  font-weight: 400;
}

footer .disc strong {
  font-family: var(--body);
  color: var(--gold-light);
  letter-spacing: 0.22em;
  font-size: 0.76rem;
}

footer hr {
  border-color: rgba(193, 154, 91, 0.3);
  opacity: 1;
}

.footer-copyright,
.footer-copyright p {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 400;
}

.footer-rera {
  text-align: center;
  color: var(--gold-light) !important;
  letter-spacing: 0.14em;
  font-size: 0.76rem !important;
  text-transform: uppercase;
  font-weight: 400;
}

.footer-mark {
  text-align: center;
  margin-bottom: 2.5rem;
}

.footer-mark .footer-mark-name {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  letter-spacing: 0.3em;
  color: #fff;
  text-transform: uppercase;
}

.footer-mark .footer-mark-sub {
  font-family: var(--body);
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: 0.6rem;
  font-weight: 400;
}

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

@media (max-width: 1199px) {
  .navbar-container {
    padding: 1.15rem 2rem;
  }
  .calc-container,
  .location-container,
  .custom-container {
    width: 92%;
    margin: auto;
  }
  .overview-content {
    margin: auto;
  }
}

@media (max-width: 991px) {
  .offcanvas-link {
    font-size: 1.6rem;
  }
  /* the roomy desktop inset goes, but the column keeps its grid gutter -
     zeroing padding outright left the text sitting under the row's negative
     margin, i.e. a few pixels off the left edge of the screen */
  .loc-back {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  }
}

@media (max-width: 767px) {
  .navbar-container {
    padding: 1rem 1.25rem;
  }

  .calc-container {
    width: 90%;
    margin: auto;
  }

  /* every band keeps a real side gutter on a phone */
  .custom-container,
  .location-container,
  .overview-content,
  .amenities-txt-container,
  .contact-form,
  .about-main-content {
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .section-heading .section-subtitle.text-center {
    max-width: 100%;
  }

  .disc {
    width: 100%;
  }
  .overview-form,
  .contact-card,
  .custom-modal-content {
    padding: 2.5rem 1.5rem;
  }
  .overview-form::before,
  .contact-card::before,
  .custom-modal-content::before {
    inset: 9px;
  }
  .overview-form::after,
  .contact-card::after,
  .custom-modal-content::after {
    inset: 15px;
  }
  .custom-modal-content .modal-close {
    top: 18px;
    right: 18px;
  }
  .section-heading .section-desc {
    font-size: 0.96rem;
  }
  .banner-overlay-txt {
    bottom: 10%;
  }
  .config-about {
    padding: 2.5rem 0;
  }
  .amenities-img {
    transform: scale(1);
  }
  .spec-card {
    padding: 1.5rem 0.75rem;
  }
  .spec-card .spec-txt {
    font-size: 0.88rem;
  }
  .contact-card {
    padding: 2.5rem 1.25rem;
  }
  /* keep the footer clear of the sticky Call/Enquire bar */
  body {
    padding-bottom: 3.4rem;
  }
}

/* ---------- refinements ---------- */

/* centred headings read as a brochure spread, not a banner */
.section-heading .section-subtitle.text-center {
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

.section-contact .section-heading .section-subtitle,
.section-contact .section-heading .section-subtitle.text-center,
.section-about .section-heading .section-subtitle.text-center {
  max-width: none;
}

/* About is a single centred column: the prose still gets a measure so the
   lines stay readable, but a generous one - a narrow column left too much
   empty space either side on a wide screen */
.section-about .section-heading .section-desc.text-center {
  max-width: 88ch;
}

.accent-line.text-center {
  text-align: center;
}

/* spec cards stack, brochure-style */
.spec-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

.spec-card .spec-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  opacity: 1;
}

/* carousel + swiper controls: gold outline, gold arrow */
.gal-carousel .owl-nav button,
.owl-nav button {
  background: transparent !important;
  border: 1px solid var(--gold) !important;
  border-radius: 0 !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  /* owl's theme sets color: #fff at higher specificity */
  color: var(--gold-deep) !important;
  transition: all 0.4s ease;
}

.gal-carousel .owl-nav button:hover,
.swiper-button-container .swiper-nav .swiper-button:hover {
  background: var(--gold) !important;
  color: #fff !important;
}

.gal-carousel .owl-nav button svg,
.swiper-button-container .swiper-nav .swiper-button svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* gallery tabs: underline, not pill */
.custom-nav-tabs .custom-nav-link,
.custom-nav-tabs .custom-nav-link.active,
.custom-nav-tabs .nav-item.show .custom-nav-link {
  border-radius: 0 !important;
  border: none;
  border-bottom: 1px solid transparent;
  background-color: transparent !important;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  padding: 0.6rem 1.2rem;
}

.custom-nav-tabs .custom-nav-link {
  color: var(--text-color-2) !important;
}

.custom-nav-tabs .custom-nav-link.active,
.custom-nav-tabs .nav-item.show .custom-nav-link {
  color: var(--primary) !important;
  border-bottom-color: var(--gold);
}

/* closing enquiry band */
section.section-contact {
  padding: 4rem 0;
}

.section-contact .contact-container {
  padding: 0;
}

.section-contact .section-heading {
  margin-bottom: 2.75rem;
}