/* ==========================================================================
   CODE NAME TOL — Inspira Builders
   Palette sampled from TOL_PRESENTOR.pdf: deep forest greens, sage accents,
   mist-light section backgrounds. Variable names are kept from the base
   template so the layout rules are untouched — only the values changed.
   ========================================================================== */
:root {
  --navy: #22331d; /* deep forest — dark surfaces (nav bar, footer, hero) */
  --gold: #5d7748; /* sage accent — text, borders, buttons on light bg */
  --gold-on-dark: #a8bf93; /* lighter sage — accents that sit on the dark greens */
  --teal: #3e5238; /* forest mid — secondary accent */
  --stone: #eef1e8; /* mist — alternating section background */
  --muted: #6b7a66;
  --ink: #1f2a1c;
  --hh: 72px;
}

body {
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  overflow-x: hidden;
  background: #fff;
}
a {
  text-decoration: none;
  color: inherit;
}
h1,
h2,
h3,
h4 {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  line-height: 1.25;
}

/* ── Utility overrides ── */
.wrap {
  max-width: 80%;
  margin: 0 auto;
  padding: 0 20px;
}
.section {
  padding: 80px 0;
}
.bg-stone {
  background: var(--stone);
}
.bg-navy {
  background: var(--navy);
  color: #fff;
}
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.rule {
  width: 60px;
  height: 3px;
  background: var(--gold);
  margin-top: 14px;
  border-radius: 2px;
}

/* ── Buttons ── */
.btn-primary-custom {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  transition: all 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary-custom:hover {
  background: #2c4326;
  color: #fff;
}
.btn-gold {
  background: var(--gold);
  color: var(--navy);
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  transition: all 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-gold:hover {
  background: #4e6539;
  color: var(--navy);
}
.btn-outline-custom {
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s;
}
.btn-outline-custom:hover {
  background: var(--navy);
  color: #fff;
}
.btn-submit {
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  width: 100%;
  justify-content: center;
  padding: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: "DM Sans", sans-serif;
  transition: background 0.25s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-submit:hover {
  background: #4e6539;
}

/* ── Top Bar ── */
.top-bar {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.78rem;
  padding: 6px 0;
}
.tb-right {
  display: flex;
  gap: 16px;
}
.tb-right a {
  color: rgba(255, 255, 255, 0.8);
}
.tb-right a:hover {
  color: var(--gold);
}
.tb-right i {
  margin-right: 4px;
  font-size: 0.7rem;
}

/* ── Navbar ── */
.embassy-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  height: var(--hh);
  transition:
    box-shadow 0.3s,
    background 0.3s;
}
.embassy-nav.scrolled {
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.99);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-logo-img {
  height: 44px;
  width: auto;
}
.nav-links {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links li a {
  display: block;
  padding: 10px 14px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink);
  border-radius: 6px;
  transition:
    color 0.2s,
    background 0.2s;
  white-space: nowrap;
}
.nav-links li a:hover,
.nav-links li a.active {
  color: var(--gold);
  background: rgba(120, 150, 95, 0.06);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  margin-left:16px;
}
.nav-phone i {
  color: var(--gold);
  font-size: 0.75rem;
}
.nav-cta-btn {
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 0.84rem;
  font-family: "DM Sans", sans-serif;
  transition: all 0.25s;
  white-space: nowrap;
}
.nav-cta-btn:hover {
  background: #4e6539;
  transform: translateY(-1px);
}
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  position: relative;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.2s;
}
.nav-hamburger:hover {
  background: rgba(0, 0, 0, 0.04);
}
.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.hamburger-line:nth-child(1) {
  top: 12px;
}
.hamburger-line:nth-child(2) {
  top: 19px;
}
.hamburger-line:nth-child(3) {
  top: 26px;
}
.nav-hamburger.is-active .hamburger-line:nth-child(1) {
  top: 19px;
  transform: translateX(-50%) rotate(45deg);
}
.nav-hamburger.is-active .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: translateX(-50%) scaleX(0);
}
.nav-hamburger.is-active .hamburger-line:nth-child(3) {
  top: 19px;
  transform: translateX(-50%) rotate(-45deg);
}

/* ── Offcanvas ── */
.offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(34, 51, 29, 0.5);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.4s;
}
.offcanvas-overlay.active {
  opacity: 1;
  visibility: visible;
}
.offcanvas-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1300;
  width: 100%;
  background: var(--navy);
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.offcanvas-panel.active {
  transform: translateX(0);
}
.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.offcanvas-logo-img {
  height: 36px;
  filter: brightness(0) invert(1);
}
.offcanvas-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.offcanvas-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transform: rotate(90deg);
}
.offcanvas-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.offcanvas-nav {
  list-style: none;
  padding: 0;
  margin: 0 0 auto;
}
.offcanvas-nav li {
  opacity: 0;
  transform: translateX(30px);
  transition:
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc(0.06s * var(--i));
}
.offcanvas-panel.active .offcanvas-nav li {
  opacity: 1;
  transform: translateX(0);
}
.offcanvas-nav li a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.05rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.25s;
  text-decoration: none;
}
.offcanvas-nav li a:hover {
  color: var(--gold);
  padding-left: 8px;
}
.oc-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold);
  opacity: 0.5;
  min-width: 20px;
  font-family: "DM Sans", sans-serif;
}
.offcanvas-cta {
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.offcanvas-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.offcanvas-phone i {
  margin-left: auto;
}
.offcanvas-phone:hover {
  color: var(--gold);
}
.offcanvas-phone i {
  color: var(--gold);
  font-size: 0.8rem;
}
.offcanvas-footer {
  padding: 16px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.5;
}

/* ── Premium Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(34, 51, 29, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.4s;
}
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.modal-container {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(120, 150, 95, 0.1);
  transform: translateY(40px) scale(0.95);
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.35s ease;
}
.modal-overlay.active .modal-container {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
}
.modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
  color: #fff;
}
.modal-hero {
  position: relative;
  padding: 36px 32px 28px;
  overflow: hidden;
}
.modal-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--navy) 0%,
    #2c4326 40%,
    var(--teal) 100%
  );
  z-index: 0;
}
.modal-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238ba677' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
    repeat;
  opacity: 0.5;
}
.modal-hero-content {
  position: relative;
  z-index: 1;
}
.modal-badge {
  display: inline-block;
  background: rgba(120, 150, 95, 0.2);
  border: 1px solid rgba(120, 150, 95, 0.4);
  color: var(--gold);
  padding: 5px 14px;
  border-radius: 30px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  backdrop-filter: blur(4px);
}
.modal-title {
  color: #fff;
  font-family: "Playfair Display", serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
}
.modal-title em {
  font-style: italic;
  color: var(--gold);
}
.modal-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.88rem;
  margin: 0;
}
.modal-body {
  padding: 28px 32px 32px;
}
.modal-form .form-group {
  margin-bottom: 18px;
}
.modal-form .form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}
.modal-form .input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  background: #fafafa;
}
.modal-form .input-wrap:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(120, 150, 95, 0.1);
  background: #fff;
}
.modal-form .input-icon {
  position: absolute;
  left: 14px;
  color: var(--gold);
  font-size: 0.82rem;
  opacity: 0.6;
  pointer-events: none;
}
.modal-form input,
.modal-form select {
  width: 100%;
  padding: 13px 14px 13px 40px;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  outline: none;
  border-radius: 10px;
}
.modal-form input::placeholder {
  color: #aaa;
}
.modal-form .phone-wrap {
  gap: 0;
}
.modal-form .phone-select {
  width: auto;
  min-width: 100px;
  padding: 13px 8px 13px 14px;
  border: none;
  border-right: 1.5px solid #e0e0e0;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  border-radius: 10px 0 0 10px;
  appearance: auto;
  -webkit-appearance: auto;
  outline: none;
}
.modal-form .phone-wrap input {
  flex: 1;
  padding-left: 14px;
  border-radius: 0 10px 10px 0;
}
.modal-form .form-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}
.modal-form .form-consent input {
  margin-top: 2px;
  width: auto;
  accent-color: var(--gold);
}
.modal-form .form-consent a {
  color: var(--gold);
  text-decoration: underline;
}
.modal-submit {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, var(--gold) 0%, #7fa063 100%);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s;
  box-shadow: 0 4px 16px rgba(120, 150, 95, 0.3);
  position: relative;
  overflow: hidden;
}
.modal-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 0.5s;
}
.modal-submit:hover::before {
  transform: translateX(100%);
}
.modal-submit:hover {
  box-shadow: 0 8px 28px rgba(120, 150, 95, 0.45);
  transform: translateY(-1px);
}
.modal-trust {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 14px;
}
.modal-trust i {
  color: var(--teal);
  margin-right: 4px;
  font-size: 0.7rem;
}
.modal-form .form-success,
.modal-form .form-error {
  font-size: 0.85rem;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  display: none;
  border-left: 3px solid;
}
.modal-form .form-success {
  background: #d4edda;
  color: #155724;
  border-color: #28a745;
}
.modal-form .form-error {
  background: #f8d7da;
  color: #721c24;
  border-color: #dc3545;
}

/* ── Lightbox ── */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
}
.lb-overlay.active {
  display: flex;
}
.lb-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10;
}
.lb-prev,
.lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 2rem;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s;
}
.lb-prev {
  left: 20px;
}
.lb-next {
  right: 20px;
}
.lb-prev:hover,
.lb-next:hover {
  background: rgba(255, 255, 255, 0.3);
}
.lb-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
}

/* ── Hero Static Banner ── */
.hero-banner {
  margin-top: var(--hh);
  line-height: 0;
}
.hero-banner-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hero-banner-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── About ── */
.about-img-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

/* ── Tables ── */
.highlight-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.highlight-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e5e5;
}
.highlight-table td:first-child {
  font-weight: 600;
  color: var(--navy);
  width: 40%;
  background: rgba(120, 150, 95, 0.06);
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.price-table thead {
  background: var(--navy);
  color: #fff;
}
.price-table th {
  padding: 14px 18px;
  font-weight: 600;
  text-align: left;
  font-size: 0.85rem;
}
.price-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #f0f0f0;
}
.price-table .td-highlight {
  background: rgba(120, 150, 95, 0.08);
}
.td-type {
  font-weight: 600;
  color: var(--navy);
}
.td-price {
  font-weight: 700;
  color: var(--gold);
}
.btn-know-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 6px 16px;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  background: transparent;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  transition: all 0.3s;
  white-space: nowrap;
  vertical-align: middle;
}
.btn-know-more:hover {
  background: var(--gold);
  color: #fff;
}
.btn-know-more i {
  font-size: 0.65rem;
  transition: transform 0.3s;
}
.btn-know-more:hover i {
  transform: translateX(3px);
}

/* ── Floor Plans ── */
.fp-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #f8f8f6;
  border: 1px solid #eee;
  cursor: pointer;
  transition: box-shadow 0.3s;
}
.fp-item:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.fp-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  padding: 8px;
  background: #f8f8f6;
  transition: filter 0.3s;
}
.fp-item.fp-locked img {
  filter: blur(9px);
}
/* Transparent green tint over each master plan tile */
.fp-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 55, 23, 0.877);
  pointer-events: none;
  z-index: 1;
  transition: background 0.3s;
}
.fp-item:hover::before {
  background: rgba(34, 51, 29, 0.3);
}
.fp-view-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 30px;
  background: var(--gold);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 2;
  transition:
    transform 0.3s,
    background 0.3s;
}
.fp-item:hover .fp-view-cta {
  transform: translate(-50%, -50%) scale(1.06);
}
.fp-item-lbl {
  position: relative;
  z-index: 2;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border-top: 1px solid #eee;
}

/* ── Amenities ── */
.amenity-item {
  background: #fff;
  border-radius: 10px;
  padding: 24px 16px;
  text-align: center;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.amenity-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
.amenity-icon {
  font-size: 1.8rem;
  color: var(--gold);
  margin-bottom: 10px;
}
.amenity-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
}

/* ── Gallery ── */
.gallery-item {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  transition: transform 0.5s;
}
.gallery-item:hover img {
  transform: scale(1.05);
}
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(34, 51, 29, 0.4), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-item:hover::after {
  opacity: 1;
}

/* ── FAQ ── */
.faq-item {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-q {
  width: 100%;
  background: #fff;
  border: none;
  padding: 18px 20px;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  transition: background 0.2s;
}
.faq-q:hover {
  background: var(--stone);
}
.faq-q .faq-num {
  color: var(--gold);
  margin-right: 12px;
  font-weight: 700;
}
.faq-q i {
  color: var(--gold);
  font-size: 0.8rem;
  transition: transform 0.3s;
}
.faq-item.open .faq-q i {
  transform: rotate(180deg);
}
.faq-a {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.7;
}
.faq-item.open .faq-a {
  padding: 0 20px 18px;
  max-height: 300px;
}

/* ── Location ── */
.loc-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.loc-accordion-item {
  border: 1px solid rgba(93, 119, 72, 0.2) !important;
  border-radius: 12px !important;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 4px 15px rgba(34, 51, 29, 0.04);
  transition: all 0.3s ease;
}
.loc-accordion-item:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 6px 20px rgba(34, 51, 29, 0.08);
}
.loc-accordion-btn {
  background: #ffffff;
  color: var(--navy);
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: none !important;
  transition: all 0.3s ease;
}
.loc-accordion-btn:not(.collapsed) {
  background: rgba(93, 119, 72, 0.1);
  color: var(--navy);
}
.loc-accordion-btn::after {
  background-size: 0.9rem;
  filter: brightness(0.3) sepia(1) hue-rotate(65deg) saturate(2);
  transition: transform 0.3s ease;
}
.loc-accordion-title {
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.3px;
}
.loc-icon {
  color: var(--gold);
  font-size: 1.1rem;
  width: 22px;
  text-align: center;
}
.loc-badge-count {
  display: none !important;
}
.loc-accordion-body {
  padding: 6px 16px 14px 16px;
  background: #ffffff;
  border-top: 1px dashed rgba(93, 119, 72, 0.18);
}
.loc-cat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  transition: background-color 0.2s ease, padding-left 0.2s ease;
}
.loc-cat-item:last-child {
  border-bottom: none;
}
.loc-cat-item:hover {
  background-color: rgba(93, 119, 72, 0.06);
  padding-left: 14px;
}
.loc-place {
  font-weight: 600;
  color: var(--ink);
}
.loc-time {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.82rem;
  background: rgba(93, 119, 72, 0.09);
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.loc-map-wrap {
  position: relative;
  height: 100%;
  min-height: 340px;
  overflow: hidden;
}
.loc-map-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 991px) {
  .loc-map-wrap {
    height: auto;
    min-height: 0;
  }
  .loc-map-img {
    position: static;
    height: auto;
  }
}

/* ── Contact ── */
.contact-form-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 28px;
}
.contact-phone-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: #fff;
}
.contact-phone-item i {
  color: var(--gold);
  font-size: 1.1rem;
}
.contact-phone-item span {
  font-weight: 600;
}

/* ── Forms ── */
.embassy-form .form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.embassy-form .form-row.single {
  display: block;
}
.embassy-form input,
.embassy-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.88rem;
  font-family: "DM Sans", sans-serif;
  transition: border-color 0.2s;
}
.embassy-form input:focus,
.embassy-form select:focus {
  outline: none;
  border-color: var(--gold);
}
.form-phone-wrap {
  display: flex;
  gap: 8px;
}
.form-phone-wrap select {
  width: auto;
  min-width: 130px;
}
.form-phone-wrap input {
  flex: 1;
}
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 0.8rem;
  color: var(--muted);
}
.form-consent input {
  margin-top: 3px;
  width: auto;
}
.form-consent a {
  color: var(--gold);
  text-decoration: underline;
}
.form-success,
.form-error {
  font-size: 0.85rem;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 12px;
  display: none;
}
.form-success {
  background: #d4edda;
  color: #155724;
}
.form-error {
  background: #f8d7da;
  color: #721c24;
}
.input-wrap.field-error input,
.input-wrap.field-error select,
.embassy-form input.field-error,
.embassy-form select.field-error {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.12) !important;
}
.input-wrap.field-valid input,
.embassy-form input.field-valid {
  border-color: #28a745 !important;
}
.field-msg {
  font-size: 0.75rem;
  margin-top: 4px;
  display: none;
  padding-left: 2px;
  line-height: 1.3;
}
.field-msg.error {
  color: #dc3545;
}
.field-msg.valid {
  color: #28a745;
}

/* ── Footer ── */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.75);
  padding: 60px 0 0;
}
.footer-brand .site-logo-img {
  height: 40px;
  margin-bottom: 14px;
  filter: brightness(0) invert(1);
}
.footer-brand p {
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 14px;
}
.footer-contact-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
  font-size: 0.85rem;
}
.footer-contact-item i {
  color: var(--gold);
  margin-top: 3px;
  flex-shrink: 0;
}
.footer-contact-item a {
  transition: color 0.2s;
}
.footer-contact-item a:hover {
  color: var(--gold);
}
.footer-col h4 {
  color: var(--gold);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 14px;
  font-family: "DM Sans", sans-serif;
}
.footer-col ul {
  list-style: none;
  padding: 0;
}
.footer-col ul li {
  margin-bottom: 6px;
}
.footer-col ul li a {
  font-size: 0.85rem;
  transition: color 0.2s;
}
.footer-col ul li a:hover {
  color: var(--gold);
}
.footer-disclaimer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.6;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.78rem;
}
.footer-bottom-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.55);
}
.footer-bottom-links a:hover {
  color: var(--gold);
}

/* ── Swiper sections ── */
.fp-swiper .fp-item,
.amenity-swiper .amenity-item,
.gallery-swiper .gallery-item {
  height: 100%;
}
.gallery-swiper .gallery-item img {
  height: 100%;
}
.fp-swiper .swiper-pagination,
.amenity-swiper .swiper-pagination {
  display: none;
}

/* ── Gallery slider ──
   Unlike the two above, the gallery stays a live Swiper at every width, so it
   must keep Swiper's own layout — no grid override, no transform reset. */
.gallery-slider {
  position: relative;
}
.gallery-swiper {
  overflow: hidden;
}
/* Lives outside .swiper, so Swiper's own absolute/bottom placement has to go. */
.gallery-pagination {
  position: relative !important;
  transform: none !important;
  bottom: auto !important;
  left: auto !important;
  margin-top: 22px;
  text-align: center;
}
.gallery-pagination .swiper-pagination-bullet {
  background: var(--navy);
  opacity: 0.3;
  width: 8px;
  height: 8px;
  transition: all 0.3s;
}
.gallery-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  width: 24px;
  border-radius: 4px;
}
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(34, 51, 29, 0.12);
  background: #fff;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(34, 51, 29, 0.15);
  transition: all 0.25s;
}
.gallery-nav:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.gallery-nav.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}
.gallery-prev {
  left: -18px;
}
.gallery-next {
  right: -18px;
}

/* ── Desktop: grid override ── */
@media (min-width: 576px) {
  .fp-swiper,
  .amenity-swiper {
    overflow: visible;
  }
  .fp-swiper .swiper-wrapper,
  .amenity-swiper .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    transform: none !important;
    transition: none !important;
  }
  .fp-swiper .swiper-slide,
  .amenity-swiper .swiper-slide {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .fp-swiper .swiper-slide {
    width: calc(33.333% - 16px) !important;
  }
  .amenity-swiper .swiper-slide {
    width: calc(25% - 18px) !important;
  }
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .nav-links,
  .nav-actions {
    display: none;
  }
  .nav-hamburger {
    display: flex;
  }
  .section {
    padding: 50px 0;
  }
}
@media (max-width: 575px) {
  .wrap {
    max-width: 95%;
  }
  .fp-swiper,
  .amenity-swiper,
  .gallery-swiper {
    overflow: hidden;
    margin-left: -10px;
    margin-right: -10px;
  }
  .fp-swiper .swiper-pagination,
  .amenity-swiper .swiper-pagination {
    display: block !important;
    position: relative !important;
    transform: none !important;
    margin-top: 20px;
  }
  .fp-swiper .swiper-pagination-bullet,
  .amenity-swiper .swiper-pagination-bullet {
    background: var(--navy);
    opacity: 0.3;
    width: 8px;
    height: 8px;
    transition: all 0.3s;
  }
  .fp-swiper .swiper-pagination-bullet-active,
  .amenity-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 24px;
    border-radius: 4px;
  }
  /* Swipe is the gesture here and the bleed leaves no room for the arrows. */
  .gallery-nav {
    display: none;
  }
  .embassy-form .form-row {
    flex-direction: column;
  }
  .form-phone-wrap {
    flex-direction: column;
  }
  .form-phone-wrap select {
    min-width: 100%;
  }
  .tb-inner {
    flex-direction: column;
    text-align: center;
  }
  .tb-right {
    justify-content: center;
  }
  .stats-row {
    gap: 0;
  }
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal-container {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 95vh;
    transform: translateY(100%);
  }
  .modal-overlay.active .modal-container {
    transform: translateY(0);
  }
  .modal-hero {
    padding: 24px 20px 18px;
  }
  .modal-title {
    font-size: 1.2rem;
  }
  .modal-body {
    padding: 20px;
  }
  .modal-form .phone-wrap {
    flex-direction: column;
  }
  .modal-form .phone-select {
    min-width: 100%;
    border-right: none;
    border-bottom: 1.5px solid #e0e0e0;
    border-radius: 10px 10px 0 0;
  }
  .modal-form .phone-wrap input {
    border-radius: 0 0 10px 10px;
  }
}

/* ==========================================================================
   TOL theme adjustments
   Accents that sit ON the dark greens need the lighter sage; sage buttons
   need white labels. Layout rules above are untouched.
   ========================================================================== */

/* ── Sage accents on dark surfaces ── */
.tb-right a:hover,
.oc-num,
.offcanvas-nav li a:hover,
.offcanvas-phone i,
.offcanvas-phone:hover,
.hero-kicker,
.hero-h1-slim em,
.stat-sep,
.modal-badge,
.modal-title em,
.fp-lock-icon,
.contact-phone-item i,
.bg-navy .eyebrow,
.footer-col h4,
.footer-contact-item i,
.footer-col ul li a:hover,
.footer-bottom-links a:hover {
  color: var(--gold-on-dark);
}

.hero-kicker,
.modal-badge {
  border-color: rgba(168, 191, 147, 0.45);
  background: rgba(168, 191, 147, 0.16);
}
.bg-navy .rule {
  background: var(--gold-on-dark);
}

/* ── Sage buttons carry white labels (sage + dark green is too low-contrast) ── */
.nav-cta-btn,
.btn-gold,
.btn-gold:hover,
.btn-submit,
.modal-submit {
  color: #fff;
}

/* ── Bootstrap utility overrides used inside the layout ── */
.text-warning {
  color: var(--gold-on-dark) !important;
}
.border-warning {
  border-color: var(--gold) !important;
}
.bg-light {
  background: var(--stone) !important;
}
.bg-navy .form-consent,
.bg-navy .form-consent label {
  color: rgba(255, 255, 255, 0.72);
}
.bg-navy .form-consent a {
  color: var(--gold-on-dark);
}
.bg-navy .form-consent input {
  accent-color: var(--gold-on-dark);
}

/* ── Inline form: one error message per input, under its own input ── */
.embassy-form .field-cell {
  flex: 1;
  min-width: 0;
}
.embassy-form .field-cell input {
  width: 100%;
}
.modal-form .field-msg {
  margin-top: 6px;
}

/* ── Logos ── */
.footer-brand .site-logo-img {
  height: 66px;
}
.nav-logo-img {
  height: 42px;
}

/* ── Thank-you page ── */
.ty-section {
  padding-top: calc(var(--hh) + 60px);
  background: var(--stone);
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.ty-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border-radius: 16px;
  padding: 48px 36px;
  box-shadow: 0 18px 50px rgba(34, 51, 29, 0.1);
}
.ty-tick {
  width: 68px;
  height: 68px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
}
.ty-card h2 em {
  font-style: italic;
  color: var(--gold);
}
.ty-lead {
  color: #444;
  font-size: 0.98rem;
  line-height: 1.75;
}
.ty-meta {
  font-size: 0.85rem;
  color: var(--muted);
}
.ty-section + .site-footer {
  padding-top: 40px;
}

@media (max-width: 575px) {
  .ty-section {
    padding-top: calc(var(--hh) + 32px);
  }
  .ty-card {
    padding: 34px 22px;
  }
}

/* ── Top bar + nav stacking ──
   The nav is fixed at top:0, which parked it on top of the top bar and hid the
   phone numbers. Offset the nav by the bar's height, then let it take the full
   top edge once the page scrolls (.scrolled is toggled in script.js). */
:root {
  --tbh: 34px;
}
.top-bar {
  height: var(--tbh);
  padding: 0;
  display: flex;
  align-items: center;
  display: none;
}
.top-bar .wrap {
  width: 100%;
}
.embassy-nav {
  top: 0;
}

/* ── Hero legibility ──
   hero-leaves.jpg is bright, so the base gradient left the kicker and the
   italic accent washed out. Deepen it across the whole frame. */

@media (max-width: 575px) {
  /* Keep the bar to one line so the nav offset stays accurate. */
  :root {
    --tbh: 32px;
  }
  .top-bar span:first-child {
    display: none;
  }
  .top-bar .wrap {
    justify-content: center !important;
  }
  .tb-right {
    gap: 20px;
  }
}

/* ── Sticky mobile CTA bar ──
   Desktop-only until 991px, which is exactly where .nav-actions (and with it
   the header's Enquire Now) is hidden. z-index sits below the offcanvas
   overlay (1200) and the modal (2000) so both still cover it. */
.mobile-cta-bar {
  display: none;
}

@media (max-width: 991px) {
  .mobile-cta-bar {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1150;
    /* env() keeps the buttons clear of the iOS home indicator */
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(34, 51, 29, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(168, 191, 147, 0.22);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
  }
  .mcta-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 8px;
    border-radius: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background 0.25s,
      color 0.25s;
  }
  .mcta-btn i {
    font-size: 0.85rem;
    flex-shrink: 0;
  }
  .mcta-primary {
    background: var(--gold);
    color: #fff;
    border: none;
  }
  .mcta-primary:hover {
    background: #4e6539;
  }
  .mcta-ghost {
    background: var(--gold);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
  }
  .mcta-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  /* Stop the bar from sitting on top of the footer's last row. */
  body {
    padding-bottom: 72px;
  }
}

/* Narrow phones: drop the icons before the labels start truncating. */
@media (max-width: 360px) {
  .mobile-cta-bar {
    gap: 8px;
  }
  .mcta-btn {
    font-size: 0.78rem;
    padding: 12px 6px;
    gap: 6px;
  }
  .mcta-btn i {
    display: none;
  }
}

/* ── Highlights: equal-size Key Feature pointers ──
   The boxes ran one or two lines deep, so they were visibly uneven. Making the
   column a flex parent lets every pointer share the column height equally, and
   the min-height keeps them matched once the row stacks on mobile. */
.hl-col {
  display: flex;
  flex-direction: column;
}
.hl-features {
  flex: 1;
}
.hl-feature {
  flex: 1;
  min-height: 66px;
}

@media (max-width: 767px) {
  /* Stacked, the longest pointer wraps to three lines — match them all to it. */
  .hl-feature {
    min-height: 90px;
  }
  .loc-cat-item {
   
    font-size: 12px;
    
}
}

/* Both halves of Project Specifications now open with a heading and stretch to
   the same height, so the table and the pointer list end level. */
.hl-col .highlight-table {
  flex: 1;
}
.amenity-carousel .amenity-item{
    background:#fff;
    border-radius:18px;
    padding:35px 20px;
    text-align:center;
    height:240px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border:1px solid #ececec;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    margin:12px;
}

.amenity-carousel .amenity-item:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 35px rgba(0,0,0,.15);
}

.amenity-icon{
    width:85px;
    height:85px;
    border-radius:50%;
    background:var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:34px;
    margin-bottom:20px;
    box-shadow:0 10px 25px var(--gold);
}

.amenity-item h6{
    font-size:17px;
    font-weight:600;
    line-height:1.5;
    color:#333;
    margin:0;
}

/* Navigation */

.amenity-carousel .owl-nav{
    margin-top:35px;
    display:flex;
    justify-content:center;
    gap:15px;
}

.amenity-carousel .owl-nav button{
    width:52px !important;
    height:52px !important;
    border-radius:50% !important;
    background:#fff !important;
    color:var(--gold) !important;
    font-size:22px !important;
    /* box-shadow:0 8px 20px rgba(131, 24, 24, 0.12); */
    transition:.3s;
}

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

.amenity-carousel .owl-dots{
    margin-top:20px;
}

.amenity-carousel .owl-dot span{
    width:12px;
    height:12px;
    background:#d6d6d6 !important;
}

.amenity-carousel .owl-dot.active span{
    width:28px;
    background:var(--gold) !important;
}