/* =================================================================
   FLUID TYPOGRAPHY ROOT SCALE (1rem = 16px at 1920px width)
   ================================================================= */
html {
  font-size: 16px;
}
@media (max-width: 1700px) {
  html {
    font-size: 15px;
  }
}
@media (max-width: 1536px) {
  html {
    font-size: 14px;
  }
}
@media (max-width: 1400px) {
  html {
    font-size: 13px;
  }
}
@media (max-width: 1366px) {
  html {
    font-size: 12px;
  }
}
@media (max-width: 1280px) {
  html {
    font-size: 12px;
  }
}

@media (max-width: 1025px) {
  html {
    font-size: 16px;
  }
}

/* =============================================
   Duhorea Hotel - theme.css
   Figma: aXktfgQB2yFRnraPCvyU6N node 1-2
   ============================================= */

/* ==============================
   CSS VARIABLES
   ============================== */
:root {
  /* Colors */
  --gold: #b99d75;
  --gold-light: #e6b673;
  --dark-green: #283527;
  --mid-green: #53624e;
  --near-black: #161719;
  --black: #050505;
  --white: #ffffff;
  --gray-text: #6b7280;
  --light-gray: #cfcfcf;

  /* Fonts */
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-display: "Marcellus", Georgia, serif;
  --font-sans: "Inter", sans-serif;

  /* Layout Spacing */
  --section-gutter: 14.1875rem;
  --section-py: 6rem;

  /* Typography Scale */
  --fs-hero: 4.5rem;
  --fs-title-lg: 4.25rem;
  --fs-title: 3.25rem;
  --fs-card-lg: 2rem;
  --fs-card-md: 1.75rem;
  --fs-card-sm: 1.5rem;
  --fs-subtitle: 1rem;
  --fs-body: 1rem;
  --wide-width-size: 91.25rem;
}

/* Responsive Variables */
@media (max-width: 75rem) {
  :root {
    --section-gutter: 5rem;
    --section-py: 3.75rem;

    --fs-hero: 3.5rem;
    --fs-title-lg: 3.25rem;
    --fs-title: 2.75rem;
    --fs-card-lg: 1.75rem;
    --fs-card-md: 1.5rem;
    --fs-card-sm: 1.25rem;
    --fs-subtitle: 0.875rem;
  }
}

@media (max-width: 48rem) {
  :root {
    --section-gutter: 1.5rem;
    --section-py: 2.5rem;

    --fs-hero: 2.625rem;
    --fs-title-lg: 3rem;
    --fs-title: 2.25rem;
    --fs-card-lg: 1.5rem;
    --fs-card-md: 1.375rem;
    --fs-card-sm: 1.125rem;
    --fs-subtitle: 0.875rem;
  }
}

::-webkit-scrollbar {
  width: 0.3125rem;
}

::-webkit-scrollbar-track {
  background: #fff;
}

::-webkit-scrollbar-thumb {
  background: var(--dark-green);
  border-radius: 0.5rem;
}

body {
  line-height: 1.5;
  color: #fff;
  font-size: 1rem;
  font-family: var(--font-sans);
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a {
  text-decoration: none;
}
.admin-bar .gtlegacy-header {
  top: 2rem;
}

/* ==============================
   REUSABLE CONTAINER
   ============================== */
.container {
  width: 100%;
  max-width: var(--wide-width-size);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
  box-sizing: border-box;
}

.bic-section {
  padding: var(--section-py) 0;
}
/* ==============================
   BASE OVERRIDES
   ============================== */

#home-main {
  margin-top: 0;
}

/* ==============================
   SHARED COMPONENTS
   ============================== */

/* Eyebrow / section subtitle */
.section-subtitle {
  color: var(--gold);
  font-size: var(--fs-subtitle);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  font-family: var(--font-display);
}

/* Section heading stack */
.section-heading {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.section-heading .section-title {
  font-size: var(--fs-title);
  font-weight: 600;
  color: var(--white);
  font-family: var(--font-serif);
  line-height: 1.1;
  margin: 0;
}
.section-heading .section-desc {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
  width: 64%;
}
.section-heading--center {
  text-align: center;
  align-items: center;
}
.section-heading--center .section-desc {
  margin-left: auto;
  margin-right: auto;
}

.wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* Buttons */
.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1.25rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.5);
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 500;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.3s ease,
    color 0.3s ease,
    background 0.3s ease;
  background: transparent;
  line-height: 1;
  height: 3.125rem;
  font-family: "Cormorant Garamond";
}
.cs-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.cs-btn-outline {
  /* alias, same as cs-btn */
}

/* ==============================
   HEADER
   ============================== */
.gtlegacy-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  transition:
    background 0.35s ease,
    backdrop-filter 0.35s ease;
}
.gtlegacy-header.scrolled {
  background: rgba(28, 35, 27, 0.96);
  backdrop-filter: blur(0.625rem);
}
.header-inner {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 7.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
}
.header-logo-link {
  display: flex;
  align-items: center;
}
.header-logo-img {
  height: 3rem;
  width: auto;
}
.header-logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.08em;
  font-family: var(--font-display);
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.desktop-nav a {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  position: relative;
  transition: color 0.2s;
}
.desktop-nav a:hover {
  color: var(--gold);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.header-lang-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--white);
  padding: 0.25rem;
}
/* =================================================================
   LUXURY FULLSCREEN MOBILE MENU DRAWER
   ================================================================= */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  background: rgba(13, 17, 14, 0.96); /* Dark green-black tint */
  backdrop-filter: blur(1.25rem);
  -webkit-backdrop-filter: blur(1.25rem);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 3rem 1rem;
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: end;
  width: 100%;
  padding-bottom: 1.5rem;
}

.mobile-nav-logo img {
  height: 3rem;
  width: auto;
  display: block;
}

.mobile-nav-logo span {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.12em;
}

.mobile-nav-close {
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 0.5rem;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-nav-close:hover {
  color: var(--gold);
  transform: rotate(90deg);
}

.mobile-nav-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: 2rem 1rem;
}

.mobile-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mobile-nav-link {
  font-family: var(--font-serif);
  font-size: 1.875rem;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    color 0.3s ease,
    padding-left 0.3s ease;
}

.mobile-nav-link .menu-num {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  font-weight: 600;
}

.mobile-nav-link:hover {
  color: var(--gold);
  padding-left: 0.75rem;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-nav-drawer.is-open .mobile-nav-link {
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger delays for menu links */
.mobile-nav-drawer.is-open .mobile-nav-link:nth-child(1) {
  animation-delay: 0.2s;
}
.mobile-nav-drawer.is-open .mobile-nav-link:nth-child(2) {
  animation-delay: 0.35s;
}
.mobile-nav-drawer.is-open .mobile-nav-link:nth-child(3) {
  animation-delay: 0.55s;
}
.mobile-nav-drawer.is-open .mobile-nav-link:nth-child(4) {
  animation-delay: 0.75s;
}
.mobile-nav-drawer.is-open .mobile-nav-link:nth-child(5) {
  animation-delay: 0.95s;
}
.mobile-nav-drawer.is-open .mobile-nav-link:nth-child(6) {
  animation-delay: 1.15s;
}
.mobile-nav-drawer.is-open .mobile-nav-link:nth-child(7) {
  animation-delay: 1.35s;
}

.mobile-nav-footer {
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.08);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-nav-contact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mobile-nav-contact .contact-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.1em;
}

.mobile-nav-contact .contact-phone {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--white);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mobile-nav-contact .contact-phone:hover {
  color: var(--gold);
}

/* Custom animation transitions */
.transition-fade {
  transition-property: opacity, transform !important;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.transition-slide {
  transition-property: transform, opacity !important;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.duration-300 {
  transition-duration: 300ms !important;
}

.duration-250 {
  transition-duration: 250ms !important;
}

.translate-x-full {
  transform: translateX(100%) !important;
}

.-translate-x-full {
  transform: translateX(-100%) !important;
}

.translate-x-0 {
  transform: translateX(0) !important;
}

.opacity-0 {
  opacity: 0 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

/* ==============================
   SECTION 1: HERO
   Figma: 1920x920, parallax bg + 59% black overlay
   ============================== */
.home-hero {
  position: relative;
  height: 57.5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-bg-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 120%;
  top: -10%;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.59);
  z-index: 1;
}

.hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-content {
  text-align: center;
  max-width: 76.625rem;
}

.hero-subtitle-wrap {
  margin-bottom: 1.25rem;
}

.hero-subtitle {
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.05em;
  display: block;
  font-family: var(--font-display);
}

.hero-title {
  font-size: var(--fs-hero);
  font-weight: 400;
  color: var(--white);
  font-family: var(--font-display);
  line-height: 1.5;
  margin: 0;
}

/* ==============================
   SECTION 2: THE DUHORÉA STORY
   Figma: 1920x920, bg #283527
   Left: stacked images, Right: content 50rem col
   ============================== */
.section-story {
  background: var(--dark-green);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.story-container {
  display: flex;
  align-items: center;
  gap: 6rem;
  height: 100%;
}

.story-images {
  flex: 0 0 41.625rem;
  position: relative;
  height: 44.5625rem;
}

.story-img-main {
  position: absolute;
  left: 0;
  top: 47%;
  transform: translateY(-50%);
  overflow: hidden;
  border-radius: 0.625rem;
}

.story-img-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-img-secondary {
  position: absolute;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 0.625rem;
}

.story-img-secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-content {
}

.story-title-wrap {
  margin-bottom: 2rem;
}

.story-content .section-subtitle-wrap {
  margin-bottom: 0.5rem;
}

.story-text p {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.75;
  margin: 2rem 0;
  text-align: justify;
}

.story-btn-wrap {
  margin-top: 0.5rem;
}

/* ==============================
   SECTION 3: THE RECLINE (Accommodations)
   Figma: 1920x920, bg #161719
   ============================== */
.section-accommodations {
  background: var(--near-black);
}

.accommodations-container {
  /* Layout spacing and max-width are handled by .cs-container */
}

.section-accommodations .section-heading {
  margin-bottom: 3rem;
}

.accommodations-slider-wrap {
  position: relative;
  margin-bottom: 3rem;
}

.accommodations-swiper {
  width: 100%;
  overflow: hidden;
}

.accommodations-swiper .swiper-wrapper {
  display: flex;
  gap: 0;
}

.room-card {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.room-card-photo {
  width: 100%;
  height: 100%;
}

.room-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
  aspect-ratio: 1/1;
}

.room-card:hover .room-card-photo img {
  transform: scale(1.06);
}

.room-card-label {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 1rem;
  background: rgba(5, 5, 5, 0.88);
  padding: 0.875rem 1.25rem;
}

.room-card-label span {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--white);
  font-family: var(--font-serif);
  display: block;
}

/* Nav arrows */
.accom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.5rem;
  height: 3.5rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s;
  border-radius: 1.75rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
}

.accom-nav svg path {
  stroke: #fff;
}

.accom-nav:hover {
  background: var(--gold);
}

.accom-nav-prev {
  left: -4.6875rem;
}
.accom-nav-next {
  right: -4.6875rem;
}

.accommodations-cta {
  display: flex;
  justify-content: center;
}

/* ==============================
   SECTION 4: THE TABLE (Dining)
   Figma: 1920x1210, bg #283527
   2 feature rows: full-bleed image + content
   ============================== */
.section-table {
  background: var(--dark-green);
  padding: var(--section-py) 0;
}

.table-container {
  /* Layout spacing and max-width are handled by .cs-container */
}

.section-table .section-heading {
  margin-bottom: 3.75rem;
}

.fc-wrap {
  display: flex;
  align-items: stretch;
  background: var(--black);
  margin-bottom: 0;
}

/* Luxury Sticky Card Stacking on Desktop */
@media (min-width: 48.0625rem) {
  .section-table {
    padding-bottom: 180px !important;
  }

  .fc-wrap {
    position: sticky !important;
    top: 0 !important;
    overflow: hidden !important;
    background: #000000 !important;
    will-change: transform, opacity !important;
    transition: 0.3s !important;
  }

  .fc-wrap:last-child {
    margin-bottom: 0 !important;
  }

  .fc-wrap + .fc-wrap {
    border-top: none !important;
  }
}

.fc-img {
  flex: 0 0 50%;
  overflow: hidden;
  height: 100%;
}

.fc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.fc-wrap:hover .fc-img img {
  transform: scale(1.04);
}

.fc-content {
  padding: 3.25rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--black);
}

.fc-wrap--reverse .fc-content {
  align-items: end;
  text-align: end;
}

.fc-content .section-subtitle-wrap {
  margin-bottom: 0.5rem;
}

.fc-title {
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--white);
  font-family: var(--font-serif);
  line-height: 1.2;
  margin: 0 0 1.5rem;
}

.fc-btn {
  margin-top: 1.25rem;
}

.fc-text p {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.75;
  margin: 0;
}

/* Reversed row (content left, img right) */
.fc-wrap--reverse {
  flex-direction: row-reverse;
}

/* ==============================
   SECTION 5: THE RETREAT
   Figma: 1920x411, parallax bg + 60% overlay
   ============================== */
.section-retreat {
  padding: 7.5rem 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.retreat-bg-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.retreat-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  top: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.retreat-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.retreat-container {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}

.retreat-content {
  max-width: 41.4375rem;
}

.retreat-content .section-subtitle-wrap {
  margin-bottom: 0.5rem;
}

.retreat-title {
  font-size: var(--fs-title);
  font-weight: 600;
  color: var(--white);
  font-family: var(--font-serif);
  line-height: 1.1;
  margin: 0.5rem 0 1.75rem;
}

/* ==============================
   SECTION 6: THE LENS (City Guide)
   Figma: Frame 5, 1920x985
   Section bg dark, 3 white cards 467x617
   ============================== */
.section-lens {
  background: var(--dark-green);
  padding: var(--section-py) 0;
}

.lens-container {
  /* Layout spacing and max-width are handled by .cs-container */
}

.lens-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.lens-card {
  background: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 0.0625rem solid var(--gold);
}

.lens-card-img {
  position: relative;
  overflow: hidden;
  height: 21.8125rem;
  flex-shrink: 0;
}

.lens-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.lens-card:hover .lens-card-img img {
  transform: scale(1.05);
}

.lens-card-content {
  padding: 1.5rem 1.5rem 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.lens-card-title {
  font-size: var(--fs-card-lg);
  font-weight: 600;
  color: #111827;
  font-family: var(--font-serif);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.lens-card-text {
  font-size: 1rem;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.6;
  margin: 0 0 1.25rem;
  flex: 1;
}

.lens-card-btn-wrap {
  margin-top: auto;
}

.lens-card-link {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 0.1875rem;
}

.lens-card-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.0625rem;
  background: var(--gold);
}

.lens-card-link:hover {
  color: var(--gold);
}

/* ==============================
   SECTION 7: THE INVITATION
   Figma: 1920x859, bg #000
   2 large cards side by side 721x520
   ============================== */
.section-invitation {
  background: var(--black);
}

.invitation-container {
  /* Layout spacing and max-width are handled by .cs-container */
}

.section-invitation .section-heading {
  margin-bottom: 3rem;
}

.invitation-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.invitation-card {
  height: 32.5rem;
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
}

.invitation-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  transition: opacity 0.3s ease;
  z-index: 1;
}

.invitation-card:hover .invitation-card-overlay {
  background: rgba(0, 0, 0, 0.28);
}

.invitation-card-content {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  justify-content: center;
}

.invitation-card-title {
  font-size: var(--fs-card-lg);
  font-weight: 600;
  color: var(--white);
  font-family: var(--font-serif);
  line-height: 1.2;
  margin: 0;
}

/* ==============================
   SECTION 8: THE ADDRESS (Nearby Places Carousel)
   Figma: 1920x763, bg #000
   Cards 380x520, horizontal scroll
   ============================== */
.section-address {
  background: var(--black);
}

.address-header {
  margin-bottom: 3rem;
}
.address-header .section-heading .section-desc {
  width: 47%;
}

.address-carousel-container {
  width: 100%;
  overflow: hidden;
}

.address-swiper .swiper-wrapper {
  display: flex;
  gap: 0;
}

.address-card {
  height: 32.5rem;
  flex-shrink: 0;
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: pointer;
}

.address-card-scrim {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18.75rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
  z-index: 1;
}

.address-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 0;
  transition: background 0.3s;
}

.address-card:hover .address-card-overlay {
  background: rgba(0, 0, 0, 0.15);
}

.address-card-badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  padding: 0.3125rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--white);
  z-index: 3;
  border-radius: 0.25rem;
  border: 0.0625rem solid #b99d75;
  background: rgba(0, 0, 0, 0.5);
}

.address-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1.625rem;
  color: var(--white);
  z-index: 2;
}

.address-card-cat {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gold);
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
}

.address-card-name {
  font-size: var(--fs-card-md);
  font-weight: 400;
  color: var(--white);
  font-family: var(--font-serif);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.address-card-details {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.address-card-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
}

.address-card-detail-row svg {
  flex-shrink: 0;
  margin-top: 0.0625rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ==============================
   SECTION 9: TESTIMONIALS
   Figma: 1920x435
   Left col: #53624e (41.75rem), Right col: #283527
   ============================== */
.section-testimonials {
  overflow: hidden;
  background: var(--dark-green);
}

.testimonials-inner {
  display: flex;
  height: 100%;
}

.testimonials-left-col {
}

.testimonials-right-col {
  flex: 1;
  padding: 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.testimonials-stars {
  display: flex;
  gap: 0.25rem;
}

.star-icon {
  color: #ccd6df;
  font-family: Arial;
  font-size: 1.125rem;
}

.testimonials-swiper {
  flex: 1;
}

.testimonial-item {
  padding-right: 2.5rem;
}

.testimonial-quote {
}

.testimonial-details {
  display: flex;
  flex-direction: column;
}

p.testimonial-quote {
  margin: 1.25rem 0 1.5625rem;
}
.testimonial-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--light-gray);
}

.testimonial-source {
  font-weight: 400;
  color: var(--light-gray);
}

/* Testimonial swiper pagination */
.testimonials-pagination {
  position: absolute !important;
  bottom: 0;
  text-align: left !important;
  margin-top: 2rem !important;
  display: flex !important;
  align-items: center;
  gap: 0.625rem;
}

.testimonials-pagination .swiper-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--light-gray) !important;
  opacity: 0.35 !important;
  border-radius: 50%;
  margin: 0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.testimonials-pagination .swiper-pagination-bullet:hover {
  opacity: 0.7 !important;
}

.testimonials-pagination .swiper-pagination-bullet-active {
  width: 1.5rem !important;
  height: 0.5rem;
  border-radius: 0.25rem !important;
  opacity: 1 !important;
  background: var(--white) !important;
}

/* ==============================
   FOOTER OVERRIDE for Duhorea design
   Figma: 1920x448 total
   Main footer bg: #050505, inner 91.625rem
   Copyright bar: 4.625rem
   ============================== */
.site-footer {
  background: var(--black) !important;
}

.site-footer .container {
}

.footer-content-wrapper {
  display: flex;
  flex-direction: column;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 3rem;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
}

.footer-hotel-name {
  font-size: 2rem;
  font-weight: 600;
  color: var(--white);
  font-family: var(--font-serif);
  margin: 0 0 1rem;
}

.footer-contact-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-contact-row a {
  font-weight: 400;
  color: #fff;
  text-decoration: none;
}

.footer-contact-row a:hover {
  color: var(--gold);
}

.footer-separator {
  color: #fff;
  font-size: 0.875rem;
}

.footer-ctas {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-self: center;
}

.footer-btn-concierge {
  display: flex;
  padding: 0.875rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 62.4375rem;
  border-bottom: 0.0625rem solid #fff;
  background: rgba(0, 0, 0, 0);
  color: #fff;
  font-size: 1.125rem;
  font-family: var(--font-serif);
  text-decoration: none;
}

.footer-btn-concierge:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.footer-btn-journey {
  display: inline-flex;
  align-items: center;
  padding: 0.875rem 1.75rem;
  background: var(--white);
  color: var(--dark-green);
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s;
  font-family: var(--font-serif);
  border-radius: 62.4375rem;
}

.footer-btn-journey:hover {
  background: #e8e8e8;
}

.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4.625rem;
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.08);
  font-size: 1rem;
  color: var(--white);
}

.footer-social-follow {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1rem;
  color: var(--white);
}

/* ==============================
   SWIPER CUSTOM OVERRIDES
   ============================== */

.address-swiper .swiper-wrapper {
}

/* Testimonials: single slide full width */
.testimonials-swiper .swiper-slide {
  width: 100% !important;
}

/* ==============================
   PARALLAX SCROLL ANIMATION
   (handled by smoother-script.js)
   ============================== */
/* JS adds inline transform */

/* ==============================
   RESPONSIVE - TABLET (max 75rem)
   ============================== */
@media (max-width: 75rem) {
  .home-hero {
    height: 43.75rem;
  }

  .section-story {
    height: auto;
    padding: var(--section-py) 0;
  }
  .story-container {
    flex-direction: column;
    gap: 3rem;
    align-items: flex-start;
    height: auto;
  }
  .story-images {
    flex: none;
    width: 100%;
    height: 25rem;
  }
  .story-img-main {
    width: 60%;
    height: 100%;
    position: relative;
    transform: none;
    top: auto;
  }
  .story-img-secondary {
    width: 40%;
    height: 17.5rem;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
  }
  .story-content {
    flex: none;
    padding-left: 0;
  }

  .lens-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .invitation-cards {
    grid-template-columns: 1fr;
  }
  .invitation-card {
    height: 23.75rem;
  }

  .testimonials-left-col {
    flex: 0 0 18.75rem;
  }
  .testimonials-right-col {
    padding: 2.5rem;
  }
  .testimonial-quote {
    font-size: 1.125rem;
  }
}

/* ==============================
   RESPONSIVE - MOBILE (max 48rem)
   ============================== */
@media (max-width: 48rem) {
  .home-hero {
    height: 35rem;
  }

  .header-logo-img {
    height: 2.25rem !important;
  }

  .section-story {
    padding: var(--section-py) 0;
    height: auto;
  }
  .story-images {
    height: 18.75rem;
  }
  .story-img-secondary {
    display: none;
  }
  .story-img-main {
    width: 100%;
    height: 18.75rem;
    position: relative;
    transform: none;
    top: auto;
  }

  .lens-cards {
    grid-template-columns: 1fr;
  }

  .fc-wrap {
    flex-direction: column;
  }
  .fc-wrap--reverse {
    flex-direction: column;
  }
  .fc-img {
    height: 16.25rem;
    flex: none;
  }
  .fc-content {
    padding: 2rem 1rem;
  }
  .fc-title {
    font-size: 1.75rem;
  }

  .section-testimonials {
    height: auto;
  }
  .testimonials-inner {
    flex-direction: column;
  }
  .testimonials-left-col {
    display: none;
  }
  .testimonials-right-col {
    padding: 3rem 1.5rem;
  }

  .invitation-card {
    height: 20rem;
  }

  .section-retreat {
    padding: 4.5rem 0;
  }

  .lens-card-img {
    height: 16rem;
  }
  .mobile-menu-btn {
    display: block;
  }
  .desktop-nav {
    display: none;
  }
  .header-inner {
    padding: 0 1.5rem;
  }

  .footer-info-block {
    padding: 3rem 0;
  }
  .footer-btn-journey,
  .footer-btn-concierge {
    padding: 0.8rem 1rem;
    font-size: 1rem;
  }
  .footer-bottom-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ==============================
   SECTION SPACING RESET
   Ensure no gap between sections
   ============================== */
.home-hero,
.section-story,
.section-accommodations,
.section-table,
.section-retreat,
.section-lens,
.section-invitation,
.section-address,
.section-testimonials {
  margin: 0;
}

/* ==============================
   SITE FOOTER (override existing footer.php)
   Already themed via .site-footer above
   ============================== */

/* Remove GT Legacy footer decoration for home */
body.page-template-default .footer-decoration-circle-1 {
  opacity: 0.2;
}

/* ==============================
   FOOTER INFO BLOCK
   ============================== */
.footer-info-block {
  padding: 6rem 0;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.footer-social-icon {
  color: var(--white);
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.footer-social-icon:hover {
  color: var(--gold);
}

/* ==============================
   SECTION SUBTITLE WRAP HELPER
   ============================== */
.section-subtitle-wrap {
  margin-bottom: 0.5rem;
}
.section-address {
  padding-bottom: var(--section-py);
  overflow: hidden;
}

/* ==============================
   HEADER - REDESIGN
   Figma: 2-row, transparent, fixed
   Top bar: 2.5rem  |  Main row: ~5rem
   Total: ~7.5rem visible height
   ============================== */

/* Reset body classes from old theme */
body {
  margin: 0;
  padding: 0;
  background: var(--black);
}
body .flex-grow {
  flex-grow: unset;
}

/* Top bar */
.header-top-bar {
  padding: 1.25rem 0;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
}
.header-top-inner {
}
.header-top-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.header-top-phone {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.header-phone {
  font-family: "Cormorant Garamond";
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  transition: color 0.2s;
}
.header-phone:hover {
  color: var(--gold);
}
.header-top-right {
  display: flex;
  align-items: center;
  gap: 1.875rem;
  justify-content: right;
}
.header-lang {
  font-family: "Cormorant Garamond";
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--white);
  cursor: pointer;
  letter-spacing: 0.02em;
}

/* Main nav row */
.header-main-row {
  padding: 1.875rem 0;
  display: flex;
  align-items: center;
}
.header-main-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

/* Left nav links */
.header-nav-left {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.header-nav-link {
  font-family: "Cormorant Garamond";
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  position: relative;
  transition: color 0.2s;
}
.header-nav-link::after {
  content: "";
  position: absolute;
  bottom: -0.1875rem;
  left: 0;
  width: 0;
  height: 0.0625rem;
  background: var(--gold);
  transition: width 0.25s ease;
}
.header-nav-link:hover {
  color: var(--gold);
}
.header-nav-link:hover::after {
  width: 100%;
}

/* Center logo */
.header-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.header-logo-img {
  height: 3.25rem;
  width: auto;
  display: block;
}
.header-logo-text {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.12em;
  font-family: var(--font-serif);
  white-space: nowrap;
}

/* Right: buttons + mobile toggle */
.header-nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
}

/* Header buttons - smaller padding */
.header-btn-concierge {
  color: #fff;
  font-family: "Cormorant Garamond";
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
}

.header-btn-concierge:hover {
  color: var(--gold);
  transition: color 0.2s ease-in-out;
}
.header-btn-journey {
  font-size: 1rem;
  border-color: var(--gold);
}

/* Scrolled state */
.gtlegacy-header.scrolled .header-top-bar {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.gtlegacy-header.scrolled .header-main-row {
  padding: 0.625rem 0 !important;
}

.gtlegacy-header.scrolled .header-top-bar {
  display: none;
}
/* Mobile toggle hidden on desktop */
.mobile-menu-btn {
  display: none;
}

/* ==============================
   FIX: Remove empty ruleset
   ============================== */
/* .cs-btn-outline is an alias — styles come from .cs-btn */

/* ==============================
   BODY / PAGE WRAPPER RESET
   Override old theme flex classes
   ============================== */
#page {
  flex-grow: unset !important;
  display: block !important;
}

.swiper-slide {
  overflow: hidden;
}

/* ==============================
   HEADER MOBILE RESPONSIVE
   ============================== */
@media (max-width: 75rem) {
  .header-main-inner {
    padding: 0 2.5rem;
  }
  .header-top-inner {
    padding: 0 2.5rem;
  }
  .header-nav-left {
    gap: 1.5rem;
  }
  .header-nav-link {
    font-size: 1rem;
  }
}

@media (max-width: 56.25rem) {
  /* Hide desktop nav and right buttons, show hamburger */
  .header-nav-left {
    display: none;
  }
  .header-btn-concierge,
  .header-btn-journey {
    display: none;
  }
  .mobile-menu-btn {
    display: flex;
  }
  .header-top-bar {
    display: none;
  }

  /* Logo takes full width */
  .header-main-inner {
    grid-template-columns: 1fr 1fr;
    padding: 0;
  }
}

/* ==============================
   SECTION-LEVEL BODY BG CONTINUITY
   ============================== */
/* Prevent white flash between sections when bg is dark */
html,
body {
  background: var(--black);
}

/* ==============================
   LENIS SMOOTH SCROLL STYLES
   ============================== */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

.recline-hero {
  position: relative;
  height: 51.25rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recline-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

.recline-hero__bg picture,
.recline-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recline-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.recline-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  position: absolute;
  bottom: 4.5rem;
}

.recline-hero__eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
}

.recline-hero__title {
  font-size: 3.25rem;
  font-weight: 600;
  color: var(--white);
  font-family: var(--font-serif);
  line-height: 1.1;
  margin: 0;
}

.recline-hero__desc {
  font-size: 1rem;
  color: var(--white);
  line-height: 1.5;
  margin: 0;
  opacity: 0.5;
}

.recline-hero__desc p {
  margin: 0;
}

/* -----------------------------------------------
   SECTION 2 — ROOM LISTING
   Figma: 1920x3280, bg #283527
   Inner max-width: 91.625rem, padded 0 14.1875rem
   section-header: H=8.0625rem, title 3.25rem/600 #111 + desc 1rem/400 #888
   room-cards: 6 cards, each 1466x480
   ----------------------------------------------- */
.recline-listing {
  background: var(--dark-green);
  padding: 5rem 0;
}

.recline-listing__header {
  margin-bottom: 3rem;
  max-width: 91.625rem;
}

.recline-listing__title {
  font-size: 3.25rem;
  font-weight: 600;
  color: #111111;
  font-family: var(--font-serif);
  line-height: 1.1;
  margin: 0 0 1rem;
}

.recline-listing__desc {
  font-size: 1rem;
  font-weight: 400;
  color: #888888;
  line-height: 1.65;
  max-width: 50rem;
  margin: 0;
}

/* -----------------------------------------------
   ROOM CARDS
   Each card: 1466x480
   Photo panel: 50.3125rem wide (flex: 0 0 50.3125rem)
   Info panel: 41.3125rem wide (flex: 0 0 41.3125rem), bg #161719
   photo-left:  photo first, info second
   photo-right: info first, photo second
   ----------------------------------------------- */
.recline-cards {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.recline-card {
  display: flex;
  height: 30rem;
  overflow: hidden;
}

/* Photo Left layout */
.recline-card--photo-left {
  flex-direction: row;
}

/* Photo Right layout */
.recline-card--photo-right {
  flex-direction: row-reverse;
}

/* Photo panel */
.recline-card__photo {
  flex: 0 0 50.3125rem;
  overflow: hidden;
}

.recline-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}

.recline-card:hover .recline-card__photo img {
  transform: scale(1.04);
}

/* Info panel */
.recline-card__info {
  background: var(--near-black);
  padding: 3rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
}

.recline-card__info-top {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Category eyebrow: 0.6875rem/600 gold */
.recline-card__category {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
}

/* Room name: 2rem/600 white, serif */
.recline-card__name {
  font-size: 2rem;
  font-weight: 600;
  color: var(--white);
  font-family: var(--font-serif);
  line-height: 1.15;
  margin: 0;
  transition: all 0.3s;
}

.recline-card__name:hover {
  color: var(--gold);
  transition: all 0.3s;
}

/* Stats row: icon + guests · size · bed */
.recline-card__stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--white);
  line-height: 1;
}

.recline-card__stats svg {
  flex-shrink: 0;
  color: var(--white);
}

.recline-card__dot {
  font-size: 0.875rem;
}

/* Description */
.recline-card__desc {
  font-weight: 400;
  color: var(--white);
  line-height: 1.65;
  margin: 0;
  opacity: 0.7;
}

/* Gold divider: 3rem × 0.0625rem */
.recline-card__divider {
  width: 3rem;
  height: 0.0625rem;
  background: rgb(171, 145, 108);
  margin-top: 0.25rem;
}

/* Amenities row: flex wrap, gap, pill style */
.recline-card__amenities {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.recline-card__amenity {
  font-size: 0.9375rem;
  color: var(--white);
  padding: 0.375rem 0.75rem;
  white-space: nowrap;
  border-radius: 0.3125rem;
  border: 0.0625rem solid #ddd;
  display: flex;
  padding: 0.375rem 0.625rem;
  align-items: flex-start;
}

/* Bottom row: price left + button right */
.recline-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.recline-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.recline-card__price-from {
  font-size: 1rem;
  font-weight: 400;
  color: #999999;
}

.recline-card__price-amount {
  font-size: 3.25rem;
  font-weight: 600;
  color: rgb(171, 145, 108);
  font-family: var(--font-serif);
  line-height: 1;
  letter-spacing: -0.01em;
}

.recline-card__price-unit {
  font-size: 1rem;
  font-weight: 400;
  color: #999999;
}

/* -----------------------------------------------
   SECTION 3 — CTA BANNER
   Figma: CTA component - 1920x411
   Parallax bg + 70% overlay
   Content: subtitle 1rem/500 gold | title 3.25rem/600 white | btn
   ----------------------------------------------- */
.recline-cta {
  position: relative;
  height: 25.6875rem;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.recline-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 200%;
  top: -50%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.recline-cta__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.recline-cta__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 14.1875rem;
}

.recline-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* -----------------------------------------------
   RESPONSIVE — TABLET (max 75rem)
   ----------------------------------------------- */
@media (max-width: 75rem) {
  .recline-cta__content {
    padding: 0 5rem;
  }

  .recline-card__photo {
    flex: 0 0 55%;
  }
  .recline-card__info {
    flex: 1;
    padding: 2.25rem 2.25rem;
  }
  .recline-card__price-amount {
    font-size: 2.25rem;
  }
  .recline-listing__title {
    font-size: 2.75rem;
  }
}

/* -----------------------------------------------
   RESPONSIVE — MOBILE (max 48rem)
   ----------------------------------------------- */
@media (max-width: 48rem) {
  .recline-hero {
    height: 35rem;
  }
  .recline-hero__title {
    font-size: 2.5rem;
  }

  .recline-listing {
    padding: 3rem 0;
  }
  .recline-listing__title {
    font-size: 2.25rem;
  }

  .recline-card {
    flex-direction: column !important;
    height: auto;
  }
  .recline-card__photo {
    flex: none;
    width: 100%;
    height: 16.25rem;
  }
  .recline-card__info {
    flex: none;
    width: 100%;
    height: auto;
    padding: 2rem 1.5rem;
  }
  .recline-card__price-amount {
    font-size: 2rem;
  }
  .recline-card__name {
    font-size: 1.625rem;
  }

  .recline-cta {
    height: auto;
    padding: 4rem 0;
  }
  .recline-cta__bg {
    height: 100%;
    top: 0;
  }
  .recline-cta__content {
    padding: 0 1.5rem;
  }
  .recline-cta__title {
    font-size: 2.25rem;
  }
}

/* =================================================================
   SINGLE: THE RECLINE — Room Detail Page
   Figma: node 127-321 | Page bg: #f7f4ef
   ================================================================= */

/* -----------------------------------------------
   1. HERO — 1920x820
   Same structure as recline-hero but uses img tag
   ----------------------------------------------- */
.room-hero {
  position: relative;
  height: 51.25rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.room-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.room-hero__bg picture,
.room-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* .room-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
} */
.room-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 28rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.room-hero__eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
}
.room-hero__title {
  font-size: 3.25rem;
  font-weight: 600;
  color: var(--white);
  font-family: var(--font-serif);
  line-height: 1.1;
  margin: 0;
}
.room-hero__desc {
  font-size: 1rem;
  font-weight: 400;
  color: var(--white);
  line-height: 1.5;
  margin: 0;
}

/* -----------------------------------------------
   2. OVERVIEW BAR — 1920x173, bg #080808
   3 stats flex row, dividers between
   ----------------------------------------------- */
.room-overview-bar {
  background: #080808;
  display: flex;
  align-items: center;
  padding: 2.5rem 0;
}

.room-overview-bar__inner {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.room-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 5.8125rem;
}
.room-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--white);
}
.room-stat__label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.room-stat__value {
  font-size: 2rem;
  font-weight: 600;
  color: var(--white);
  font-family: var(--font-serif);
  line-height: 1;
}
.room-stat__divider {
  width: 0.0625rem;
  height: 3.75rem;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

/* -----------------------------------------------
   3. MAIN CONTENT — 1920x462, bg #283527
   Left col: title + description
   Right col: policy block bg #080808
   ----------------------------------------------- */
.room-main-content {
  background: var(--dark-green);
  padding: 5rem 0;
}
.room-main-content__inner {
  margin: 0 auto;
  display: flex;
  gap: 5rem;
  align-items: flex-start;
}
.room-main-content__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
/* Title section */
.room-title-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.room-title-section__name {
  font-size: 3.25rem;
  font-weight: 600;
  color: var(--white);
  font-family: var(--font-serif);
  line-height: 1.1;
  margin: 0;
}
.room-title-section__divider {
  width: 3rem;
  height: 0.0625rem;
  background: rgb(171, 145, 108);
}
/* Description */
.room-description {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.room-description__heading {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.room-description p {
  font-size: 1rem;
  font-weight: 400;
  color: rgb(170, 170, 170);
  line-height: 1.75;
  margin: 0;
}
/* Shared section label + underline */
.room-section-label {
  font-size: 2rem;
  font-weight: 600;
  color: var(--gold);
  font-family: var(--font-serif);
  display: block;
  line-height: 1.1;
}
.room-section-underline {
  width: 3rem;
  height: 0.0625rem;
  background: rgb(171, 145, 108);
}
/* Policy block */
.room-policy-block {
  flex: 0 0 25rem;
  background: #080808;
  display: flex;
  align-items: center;
  justify-content: center;
}
.room-policy-block__inner {
  padding: 2.5rem 2.5rem;
  width: 100%;
}
.room-policy-block__title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--gold);
  font-family: var(--font-serif);
  margin: 0 0 1.5rem;
  line-height: 1.1;
}
.room-policy-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.room-policy-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 1rem;
  font-weight: 400;
  color: rgb(200, 200, 200);
  line-height: 1.5;
}
.room-policy-dot {
  width: 0.375rem;
  height: 0.375rem;
  background: rgb(171, 145, 108);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.4375rem;
}

/* -----------------------------------------------
   4. GALLERY SECTION — 1920x676, bg #283527
   Heading 2rem gold + underline
   Slide strip: 5 x 667x500, no padding (edge-to-edge)
   Pagination dots centered below
   ----------------------------------------------- */
.room-gallery {
  background: var(--dark-green);
  padding-top: 4rem;
  padding-bottom: 3rem;
  overflow: hidden;
}
.room-gallery__heading {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.room-gallery__slider {
  width: 100%;
  overflow: hidden;
}
.room-gallery-swiper {
  width: 100%;
  overflow: visible;
}
.room-gallery-swiper .swiper-slide {
  width: 41.6875rem !important;
  flex-shrink: 0;
}
.room-gallery__photo {
  width: 41.6875rem;
  height: 31.25rem;
  overflow: hidden;
}
.room-gallery__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.room-gallery-swiper .swiper-slide:hover .room-gallery__photo img {
  transform: scale(1.04);
}
/* Pagination dots */
.room-gallery-pagination {
  position: static !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem !important;
  padding: 0 !important;
}
.room-gallery-pagination .swiper-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  background: rgb(247, 244, 239);
  opacity: 1;
  border-radius: 50%;
  margin: 0 !important;
  transition:
    width 0.2s,
    height 0.2s,
    background 0.2s;
}
.room-gallery-pagination .swiper-pagination-bullet-active {
  width: 0.625rem;
  height: 0.625rem;
  background: rgb(171, 145, 108);
}

/* -----------------------------------------------
   5. AMENITIES SECTION — 1920x374, bg #283527
   4-col grid, each item: 0.3125rem gold bullet + text
   ----------------------------------------------- */
.room-amenities {
  background: var(--dark-green);
  padding: 4rem 0;
}
.room-amenities__inner {
  margin: 0 auto;
}
.room-amenities__heading {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 2rem;
}
.room-amenities__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.room-amenity-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
}
.room-amenity-bullet {
  width: 0.3125rem;
  height: 0.3125rem;
  background: rgb(171, 145, 108);
  border-radius: 50%;
  flex-shrink: 0;
}
.room-amenity-label {
  font-size: 1rem;
  font-weight: 400;
  color: rgb(195, 193, 188);
  line-height: 1.5;
}

/* -----------------------------------------------
   7. OTHER ROOMS SECTION — bg #283527
   section-heading + recline-cards (reused)
   ----------------------------------------------- */
.room-other-rooms {
  background: var(--dark-green);
}

.room-other-rooms__inner .section-heading {
  margin-bottom: 3rem;
}

/* -----------------------------------------------
   RESPONSIVE — TABLET (max 75rem)
   ----------------------------------------------- */
@media (max-width: 75rem) {
  .room-hero {
    height: 43.75rem;
  }
  .room-hero__content {
    width: 90%;
  }
  .room-hero__title {
    font-size: 2.75rem;
  }
  .room-main-content__inner {
    flex-direction: column;
    gap: 2.5rem;
  }
  .room-policy-block {
    flex: none;
    width: 100%;
  }
  .room-amenities__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .room-gallery-swiper .swiper-slide {
    width: 31.25rem !important;
  }
  .room-gallery__photo {
    width: 31.25rem;
    height: 23.4375rem;
  }
}

/* -----------------------------------------------
   RESPONSIVE — MOBILE (max 48rem)
   ----------------------------------------------- */
@media (max-width: 48rem) {
  .room-hero__title {
    font-size: 2.25rem;
  }
  .room-overview-bar {
    height: auto;
    padding: 1.25rem 0;
  }
  .room-overview-bar__inner {
    padding: 0 1.5rem;
    gap: 1.25rem;
    height: auto;
  }
  .room-stat__value {
    font-size: 1.5rem;
  }
  .room-stat {
    flex: auto;
  }
  .room-amenities,
  .room-gallery,
  .room-main-content {
    padding: 2.5rem 0;
  }
  .room-stat__label {
    font-size: 0.875rem;
  }
  .room-stat__divider {
    display: none;
  }

  .room-title-section__name {
    font-size: 2.25rem;
  }
  .room-amenities__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .room-gallery-swiper .swiper-slide {
    width: 17.5rem !important;
  }
  .room-gallery__photo {
    width: 17.5rem;
    height: 13.125rem;
  }

  .cs-btn {
    height: 2.625rem;
  }
}

/* =================================================================
   ADDITIONAL RESPONSIVE BREAKPOINTS (1536, 1440, 1366, 1280, 1024)
   ================================================================= */

/* --- Screen: 96rem --- */
@media (max-width: 96rem) {
  .recline-cta__content {
    padding: 0 7.5rem;
  }
}

/* --- Screen: 90rem --- */
@media (max-width: 90rem) {
  .recline-cta__content {
    padding: 0 5rem;
  }
  .recline-card {
    height: auto;
    min-height: 30rem;
  }
  .recline-card__photo {
    flex: 0 0 52%;
  }
  .recline-card__info {
    padding: 2.5rem;
  }
  .recline-card__price-amount {
    font-size: 2.625rem;
  }
  .recline-listing__title {
    font-size: 2.875rem;
  }
}

/* --- Screen: 85.375rem --- */
@media (max-width: 85.375rem) {
  .recline-card__photo {
    flex: 0 0 50%;
  }
  .recline-card__info {
    padding: 2rem;
  }
  .recline-card__name {
    font-size: 1.75rem;
  }
  .recline-card__stats {
    font-size: 0.9375rem;
  }
  .recline-card__price-amount {
    font-size: 2.375rem;
  }
  .recline-listing__title {
    font-size: 2.625rem;
  }

  .room-main-content__inner {
    gap: 3rem;
  }
  .room-policy-block {
    flex: 0 0 21.875rem;
  }
}

/* --- Screen: 80rem --- */
@media (max-width: 80rem) {
  .recline-card__photo {
    flex: 0 0 46%;
  }
  .recline-card__info {
    padding: 1.5rem;
  }
  .recline-card__name {
    font-size: 1.5rem;
  }
  .recline-card__desc {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .recline-card__price-amount {
    font-size: 2rem;
  }

  .room-main-content__inner {
    gap: 2rem;
  }
  .room-policy-block {
    flex: 0 0 20rem;
  }
  .room-overview-bar__inner {
    padding: 0 2.5rem;
  }
}

/* --- Screen: Tablet Landscape (64rem) --- */
@media (max-width: 64rem) {
  .room-hero {
    height: 42.5rem;
  }
  .recline-hero {
    height: 42.5rem;
  }
  .room-overview-bar__inner {
    padding: 0;
  }
  .room-main-content__inner {
    flex-direction: column;
    gap: 2.5rem;
  }
  .room-policy-block {
    flex: none;
    width: 100%;
  }
  .room-amenities__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .room-gallery-swiper .swiper-slide {
    width: 30rem !important;
  }
  .room-gallery__photo {
    width: 30rem;
    height: 22.5rem;
  }

  .recline-card {
    flex-direction: column !important; /* Stack vertically */
  }
  .recline-card__photo {
    flex: none;
    width: 100%;
    height: 21.875rem;
  }
  .recline-card__info {
    padding: 1.875rem 1.25rem;
  }

  .recline-card__bottom {
    margin-top: 1.25rem;
  }
  .section-heading .section-desc,
  .address-header .section-heading .section-desc {
    width: 100%;
  }

  .accom-nav-next {
    right: 0;
  }

  .accom-nav-prev {
    left: 0;
  }
}

/* Dining swiper & experience list styling */
.fc-swiper {
  width: 100%;
  height: 100%;
}
.fc-swiper-prev,
.fc-swiper-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 0.0625rem solid var(--Color-Brown, #ab916c);
  background: rgba(0, 0, 0, 0.3);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s;
}
.fc-swiper-prev::after,
.fc-swiper-next::after {
  display: none !important;
}
.fc-swiper-prev:hover,
.fc-swiper-next:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.fc-swiper-prev {
  left: 1.25rem;
}
.fc-swiper-next {
  right: 1.25rem;
}
.fc-divider {
  width: 3rem;
  height: 0.0625rem;
  background: var(--gold);
  margin: 1.25rem 0;
}
.fc-experience {
  margin-top: 0.625rem;
}
.fc-experience-title {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  display: block;
}
.fc-experience-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fc-experience-list li {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.fc-experience-list li::before {
  content: "";
  width: 0.3125rem;
  height: 0.3125rem;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Numeric Pagination styling matching the Figma screenshot */
.archive-pagination .screen-reader-text {
  border: 0;
  clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
  clip-path: inset(50%);
  height: 0.0625rem;
  margin: -0.0625rem;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 0.0625rem;
  word-wrap: normal !important;
}

.archive-pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.archive-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--gold, #ab916c);
  background: transparent;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.archive-pagination .page-numbers.current {
  background: var(--gold, #ab916c);
  color: #ffffff;
  border-color: var(--gold, #ab916c);
}

.archive-pagination .page-numbers:hover:not(.current) {
  background: var(--gold, #ab916c);
  color: #ffffff;
  border-color: var(--gold, #ab916c);
}

/* single */

.single-post-body-text {
  color: #c8c4bb;
}
section.single-post-content {
  background: var(--dark-green);
  color: #c8c4bb;
}

/* =================================================================
   SECTION: PERFECTLY CONNECTED — The Address Page
   Figma: node 252-1902 | 1920x1078, bg #283527
   ================================================================= */

.page-address {
  background: var(--dark-green);
}
.section-perfectly-connected .section-heading {
  margin-bottom: 30px;
}
.pconn-bar {
  background: rgb(13, 10, 6);
  width: 100%;
  margin-bottom: 3rem;
}

.pconn-bar__inner {
  padding: 2.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
}

/* "PERFECTLY CONNECTED" label — 0.75rem/700, warm gold */
.pconn-bar__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: block;
}

/* 8 columns of stats */
.pconn-bar__columns {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Each stat col */
.pconn-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  flex: 1;
  position: relative;
  padding: 0 2.8125rem;
}

.pconn-stat:not(:last-child)::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2.5rem;
  width: 0.0625rem;
  background: rgba(245, 240, 232, 0.25);
}

.pconn-stat:last-child::before {
  content: none;
}

.pconn-stat__icon {
  width: 2.25rem;
  height: 2.25rem;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pconn-stat__cat {
  font-size: 1rem;
  font-weight: 400;
  color: var(--gold);
  text-align: center;
  line-height: 1.3;
}

.pconn-stat__time {
  font-size: 1.125rem;
  font-weight: 400;
  color: rgb(245, 240, 232);
  text-align: center;
  line-height: 1;
}

.pconn-contact-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgb(8, 8, 8);
  width: 100%;
}

.pconn-contact {
  background: rgb(8, 8, 8);
  padding: 5.625rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pconn-contact__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
}

.pconn-contact__divider {
  width: 3rem;
  height: 0.0625rem;
  background: var(--gold);
}

/* Contact rows */
.pconn-contact__rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pconn-contact__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 0;
}

.pconn-contact__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pconn-contact__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.pconn-contact__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1.4;
}

.pconn-contact__value {
  font-size: 1rem;
  font-weight: 400;
  color: rgb(200, 196, 187);
  line-height: 1.5;
  text-decoration: none;
}

.pconn-contact__value--link:hover {
  color: var(--gold);
}

/* Social row */
.pconn-social {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-top: 0.5rem;
}

.pconn-social__icons {
  display: flex;
  gap: 0.75rem;
}

.pconn-social__icon {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.0625rem solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  transition:
    border-color 0.2s,
    color 0.2s;
  text-decoration: none;
}

.pconn-social__icon:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.pconn-social__text {
  font-size: 0.75rem;
  font-weight: 400;
  color: #666666;
  letter-spacing: 0.03em;
}

/* Right column — map image */
.pconn-map {
  flex: 1;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.pconn-map iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 75rem) {
  .pconn-inner {
    padding: 0 5rem;
  }
  .pconn-map {
    height: auto;
    min-height: 25rem;
  }
  .pconn-stat__cat {
    font-size: 0.875rem;
  }
  .pconn-stat__time {
    font-size: 1rem;
  }
}

@media (max-width: 56.25rem) {
  .pconn-bar__columns {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  .pconn-bar__divider {
    display: none;
  }
  .pconn-stat {
    flex: 0 0 calc(25% - 1rem);
  }
  .pconn-contact-block {
    flex-direction: column;
  }
  .pconn-contact {
    width: 100%;
  }
  .pconn-map {
    height: 20rem;
  }
}

@media (max-width: 48rem) {
  .pconn-inner {
    padding: 0 1.5rem;
  }
  .pconn-bar__inner {
    padding: 1.5rem 1.25rem;
  }

  .pconn-stat {
    flex: 0 0 calc(50% - 0.5rem);
  }
}

/* =================================================================
   SECTION: BOOKING PAGE & FORM
   ================================================================= */
.page-booking {
  background: var(--black);
}

.section-booking-form {
  padding: 5rem 0 6.25rem;
}
@media (max-width: 64rem) {
  .section-booking-form {
    padding: 3.75rem 1.5rem;
  }
}
@media (max-width: 48rem) {
  .section-booking-form {
    padding: 2.5rem 1rem;
  }
}

.booking-form-wrap {
  width: 100%;
  max-width: 60rem;
  gap: 3rem;
  margin: auto;
  background: var(--black);
}

/* Contact Form 7 integration overrides */
.booking-form-wrap br {
  display: none;
}
.booking-form-wrap p {
  margin: 0;
}
.booking-form-wrap .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  margin-top: 0.625rem;
}
.booking-form-wrap form.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 3rem 4rem;
}
@media (max-width: 62rem) {
  .booking-form-wrap form.wpcf7-form {
    padding: 2.5rem 3rem;
    gap: 2.5rem;
  }
}
@media (max-width: 48rem) {
  .booking-form-wrap form.wpcf7-form {
    padding: 2rem 1.5rem;
    gap: 2rem;
  }
}

.booking-form {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.booking-form__group-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.booking-form__section-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  padding-bottom: 0.75rem;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
}

.booking-form__row {
  display: flex;
  gap: 1.5rem;
  width: 100%;
}

.booking-form__row--3cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 48rem) {
  .booking-form__row--3cols {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .booking-form__row {
    flex-direction: column;
    gap: 1.25rem;
  }
}

.booking-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.booking-form__field-label {
  font-family: var(--font-sans);
  color: var(--gold);
}

.booking-form__input-wrapper {
  position: relative;
  width: 100%;
}

.booking-form__input,
.booking-form__select,
.booking-form__textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 0.0625rem solid rgba(255, 255, 255, 0.15);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  padding: 0.875rem 1rem;
  box-sizing: border-box;
  transition:
    border-color 0.3s,
    background 0.3s;
  border-radius: 0;
  outline: none;
}

.booking-form__input::placeholder,
.booking-form__textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.booking-form__input:focus,
.booking-form__select:focus,
.booking-form__textarea:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.08);
}

.booking-form__input--date {
  padding-right: 3rem;
  cursor: pointer;
}

.booking-form__input-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-form__input[type="date"] {
  position: relative;
}
.booking-form__input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  color: transparent;
  background: transparent;
  cursor: pointer;
}

.booking-form__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 3rem;
  cursor: pointer;
}

.booking-form__select option {
  background: var(--near-black);
  color: var(--white);
}

.booking-form__field-note {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0.25rem 0 0;
}

.booking-form__textarea {
  resize: vertical;
  max-height: 9.375rem;
}

.booking-form__submit-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  position: relative;
}

.booking-form__submit {
  border-color: var(--gold) !important;
  padding: 0 3rem !important;
  color: var(--white) !important;
  font-family: var(--font-serif) !important;
  font-size: 1.125rem !important;
  transition: all 0.3s ease !important;
}

.booking-form__submit:hover {
  background: var(--gold) !important;
  color: var(--black) !important;
}