/* ======================================================================
   GLOBAL RESET & BASE STYLES
   Box-sizing, typography defaults, links, buttons, root color variables
   ====================================================================== */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background: #fff;
  color: #1a1208;
  padding: 0.75rem 1.5rem;
  font-family: Lato, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #b8963e;
  transition: top 0.2s
}

.skip-nav:focus {
  top: 1rem
}


/* ======================================================================
   ROOT COLOR VARIABLES (Set 1 - Main Theme)
   ====================================================================== */
:root {
  --background: hsl(30, 12%, 92%);
  --foreground: hsl(18, 10%, 20%);
  --card: hsl(28, 18%, 88%);
  --card-foreground: hsl(18, 10%, 20%);
  --popover: hsl(30, 12%, 92%);
  --primary: hsl(18, 10%, 20%);
  --primary-foreground: hsl(28, 18%, 83%);
  --secondary: hsl(28, 18%, 83%);
  --secondary-foreground: hsl(18, 10%, 20%);
  --muted: hsl(27, 17%, 85%);
  --muted-foreground: hsl(16, 6%, 24%);
  --accent: hsl(152, 49%, 55%);
  --accent-foreground: hsl(18, 10%, 20%);
  --border: hsl(28, 14%, 78%);
  --input: hsl(28, 14%, 78%);
  --tudor-black: hsl(18, 10%, 20%);
  --glendower-black: hsl(18, 11%, 18%);
  --saddle-black: hsl(16, 6%, 24%);
  --glendower-green: hsl(152, 49%, 55%);
  --warm-white: hsl(28, 18%, 83%);
  --luxury-beige: hsl(27, 22%, 81%);
  --royal-beige: hsl(30, 12%, 92%);
  --hue-1: hsl(27, 17%, 85%);
  --hue-2: hsl(28, 18%, 88%);
  --hue-3: hsl(30, 12%, 92%)
}

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

html {
  scroll-behavior: smooth;
  font-family: Lato, sans-serif;
  -webkit-text-size-adjust: 100%
}

body {
  overflow-x: hidden;
  background-color: var(--background);
  color: var(--foreground);
  font-family: Lato, sans-serif;
  font-weight: 300;
  line-height: 1.5
}

h1,
h2,
h3,
h4 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2
}

p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  line-height: 1.8
}

a {
  color: inherit;
  text-decoration: none
}

img {
  display: block;
  max-width: 100%;
  height: auto
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0
}

ul,
ol {
  list-style: none
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 100%
}


/* ======================================================================
   SHARED UI: BUTTONS, EYEBROWS, DIVIDERS, REVEAL ANIMATIONS
   Used across multiple pages
   ====================================================================== */
.eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--accent)
}

.section-padding {
  padding: 6rem 8%
}

.ornament-diamond {
  width: 0.375rem;
  height: 0.375rem;
  transform: rotate(45deg);
  background-color: var(--accent);
  flex-shrink: 0
}

.section-divider-gradient {
  height: 4px;
  background: linear-gradient(to right, var(--tudor-black), var(--accent), var(--tudor-black));
  opacity: 0.15
}

.btn-hotel-primary {
  display: inline-block;
  cursor: pointer;
  border: none;
  background-color: var(--secondary);
  padding: 1rem 2.25rem;
  font-family: Lato, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center
}

.btn-hotel-primary:hover {
  background-color: var(--accent);
  color: #fff
}

.btn-hotel-ghost {
  cursor: pointer;
  font-family: Lato, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--secondary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 1px solid hsl(28 18% 83% / 0.5);
  padding-bottom: 3px;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none
}

.btn-hotel-ghost:hover {
  color: var(--accent);
  border-bottom-color: var(--accent)
}

.btn-hotel-outline {
  display: inline-block;
  cursor: pointer;
  border: 1px solid var(--secondary);
  background-color: transparent;
  padding: 1rem 2.25rem;
  font-family: Lato, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--secondary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
}

.btn-hotel-outline:hover {
  background-color: var(--secondary);
  color: var(--primary)
}

.btn-hotel-green {
  cursor: pointer;
  border: none;
  background-color: var(--accent);
  padding: 0.75rem 1.75rem;
  font-family: Lato, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
}

.btn-hotel-green:hover {
  background-color: var(--secondary)
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0)
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}


/* ======================================================================
   MAIN NAVIGATION (#main-nav)
   Sticky header, logo, nav links, mobile hamburger menu
   ====================================================================== */
#main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  transition: all 0.5s ease
}

#main-nav.scrolled {
  background-color: hsl(18 10% 20% / 0.97);
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2)
}

.nav-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  text-decoration: none
}

.nav-logo-main {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: var(--secondary);
  text-transform: uppercase
}

.nav-logo-sub {
  font-family: Lato, sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent)
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none
}

.nav-links a {
  font-family: Lato, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: hsl(28 18% 83% / 0.8);
  transition: color 0.3s ease;
  text-decoration: none
}

.nav-links a:hover {
  color: var(--accent)
}

.nav-links a.is-active {
  color: var(--gold, #b8963e);
  background: rgba(184, 150, 62, .12);
  border: 0.5px solid rgba(184, 150, 62, .45);
  padding: .38rem .85rem;
  border-radius: 999px;
  transition: background .25s, color .25s, border-color .25s
}

.nav-links a.is-active:hover {
  background: rgba(184, 150, 62, .22);
  color: var(--gold, #b8963e)
}

.nav-reserve {
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #ffffff;
  border: 1px solid hsl(28 18% 83% / 0.3);
  padding: 0.6rem 1.2rem;
  transition: all 0.3s ease;
  background: #38312E;
  cursor: pointer
}

.nav-reserve:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: white
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--secondary);
  transition: all 0.3s ease
}

.nav-mobile {
  display: none;
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  background-color: hsl(18 10% 20% / 0.98);
  padding: 2rem 8%;
  flex-direction: column;
  gap: 0;
  z-index: 999
}

.nav-mobile.open {
  display: flex
}

.nav-mobile a {
  font-family: Lato, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: hsl(28 18% 83% / 0.8);
  padding: 0.75rem 0;
  border-bottom: 1px solid hsl(28 18% 83% / 0.08);
  text-decoration: none;
  transition: color 0.3s
}

.nav-mobile a:hover {
  color: var(--accent)
}


/* ======================================================================
   HOMEPAGE: HERO SECTION (#hero)
   Fullscreen hero slideshow on index.php
   ====================================================================== */
#hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--primary)
}

.hero-slides {
  position: absolute;
  inset: 0
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease
}

.hero-slide.active {
  opacity: 1
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, hsl(18 10% 20% / 0.7) 0%, hsl(18 10% 20% / 0.3) 50%, transparent 100%)
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 8%;
  padding-bottom: 9vh;
  max-width: 780px;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

.hero-eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
  opacity: 0;
  animation: fadeUp 1s ease 0.3s forwards
}

.hero-h1 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  line-height: 1.12;
  color: var(--secondary);
  margin-bottom: 1.25rem;
  opacity: 0;
  animation: fadeUp 1s ease 0.6s forwards
}

.hero-h1 em {
  font-style: normal;
  display: block;
  font-size: 0.65em;
  letter-spacing: 0.08em;
  color: var(--luxury-beige)
}

.hero-tagline {
  color: var(--luxury-beige);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 2.25rem;
  opacity: 0;
  animation: fadeUp 1s ease 0.9s forwards
}

.hero-actions {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  opacity: 0;
  animation: fadeUp 1s ease 1.1s forwards
}

.hero-caption {
  position: absolute;
  bottom: 8vh;
  left: 8%;
  z-index: 2;
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(28 18% 83% / 0.5);
  opacity: 0;
  animation: fadeIn 0.8s ease 1.5s forwards
}

.hero-dots {
  position: absolute;
  bottom: 8vh;
  right: 8%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.625rem
}

.hero-dot {
  width: 1px;
  height: 1.75rem;
  background-color: hsl(28 18% 83% / 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0
}

.hero-dot.active {
  height: 2.75rem;
  background-color: var(--secondary)
}

.hero-dot:hover {
  background-color: var(--secondary);
  height: 2.75rem
}


/* ======================================================================
   HOMEPAGE: ANNOUNCEMENT BAR (#announce-bar)
   ====================================================================== */
#announce-bar {
  background-color: var(--primary);
  color: var(--secondary);
  text-align: center;
  padding: 0.875rem 4%;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  font-family: Lato, sans-serif;
  font-weight: 300
}

#announce-bar strong {
  font-weight: 700;
  color: var(--accent)
}

#announce-bar .announce-cta {
  color: var(--secondary);
  margin-left: 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: 1px solid hsl(28 18% 83% / 0.4);
  padding-bottom: 2px;
  cursor: pointer;
  transition: color 0.2s ease;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none
}

#announce-bar .announce-cta:hover {
  color: var(--accent)
}


/* ======================================================================
   HOMEPAGE: BOOKING BAR (#booking-bar)
   IPMS247 date/guest search bar
   ====================================================================== */
#booking-bar {
  background-color: var(--primary);
  padding: 1.75rem 8%;
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap
}

.booking-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
  min-width: 140px
}

.booking-field label {
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(28, 18%, 75%)
}

.booking-field input,
.booking-field select {
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.75rem 0.875rem;
  font-family: Lato, sans-serif;
  font-size: 0.88rem;
  color: var(--secondary);
  outline: none;
  transition: border-color 0.3s;
  appearance: none;
  -webkit-appearance: none
}

.booking-field input:focus,
.booking-field select:focus {
  border-color: var(--accent)
}

.booking-field input::placeholder {
  color: hsl(28 18% 83% / 0.3)
}

.booking-field-promo {
  flex: 0.8;
  min-width: 140px
}


/* ======================================================================
   HOMEPAGE: ABOUT SECTION (#about)
   About teaser with image, year badge, features
   ====================================================================== */
#about {
  background-color: var(--background);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  padding: 6rem 8%
}

.about-image-wrap {
  position: relative
}

.about-image-inner {
  width: 100%;
  aspect-ratio: 6/6;
  position: relative;
  overflow: hidden
}

.about-image-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.about-year-badge {
  position: absolute;
  top: 2rem;
  left: 0;
  background-color: var(--primary);
  color: var(--secondary);
  padding: 1.25rem 1.125rem;
  text-align: center;
  font-family: Georgia, serif;
  z-index: 10
}

.about-year-badge span.year {
  font-size: 1.875rem;
  display: block;
  line-height: 1
}

.about-year-badge span.est {
  font-family: Lato, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 0.25rem;
  display: block
}

.about-text blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--foreground);
  line-height: 1.6
}

.about-text p {
  color: var(--muted-foreground);
  margin-bottom: 1rem
}

.about-ornament {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 1.5rem 0
}

.about-ornament-line {
  flex: 1;
  height: 1px;
  background-color: #EFBF04;
  opacity: 0.5
}

.about-features {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2rem
}

@media (min-width:640px) {
  .about-features {
    flex-direction: row;
    gap: 2rem
  }
}

.about-feature {
  flex: 1
}

.about-feature-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(76, 175, 135, 0.4);
  background-color: rgba(76, 175, 135, 0.06)
}

.about-feature-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--accent);
  stroke-width: 1.6
}

.about-feature h4 {
  font-family: Lato, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--foreground);
  margin-bottom: 0.25rem
}

.about-feature p {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  margin: 0;
  line-height: 1.6
}

.about-feature-heading {
  font-family: Lato, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--foreground);
  margin-bottom: 0.25rem
}


/* ======================================================================
   HOMEPAGE: ROOMS PREVIEW CARDS (.rooms-modern / .rc-card)
   Room teaser cards on index.php
   ====================================================================== */
.rooms-modern {
  padding: 5rem 8%;
  background: #f0ebe0;
  text-align: center;
  position: relative
}

.rooms-header {
  margin-bottom: 3rem
}

.rooms-header .eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: #c9a96e;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  margin-bottom: 0.75rem
}

.rooms-header .eyebrow::before,
.rooms-header .eyebrow::after {
  content: '';
  display: inline-block;
  width: 40px;
  height: 0.5px;
  background: #c9a96e
}

.rooms-modern h2 {
  font-family: Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  color: #1a120a;
  font-weight: 400;
  margin: 0 0 1rem;
  letter-spacing: -0.01em
}

.rooms-sub {
  max-width: 560px;
  margin: 0 auto 0;
  color: #6b5c48;
  font-size: 0.95rem;
  line-height: 1.8;
  font-family: Georgia, serif
}

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

.rc-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 0.5px solid rgba(201, 169, 110, .2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left
}

.rc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.1)
}

.rc-img {
  position: relative;
  height: 260px;
  overflow: hidden
}

.rc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease
}

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

.rc-overlay {
  display: none
}

.rc-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  background: #2d5a3d;
  padding: 5px 12px;
  border-radius: 4px
}

.rc-over-text {
  display: none
}

.rc-body {
  padding: 1.5rem 1.5rem 1.75rem
}

.rc-name {
  font-family: Georgia, serif;
  font-size: 1.35rem;
  color: #1a120a;
  font-weight: 400;
  margin-bottom: 0.6rem;
  display: block
}

.rc-eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a6f3e;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem
}

.rc-eyebrow::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a6f3e' stroke-width='1.4' viewBox='0 0 24 24'%3E%3Cpath d='M2 17h20M2 12h20M7 17V7M17 17V7'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0
}

.rc-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 0.5px solid rgba(201, 169, 110, .2)
}

.rc-specs span {
  font-family: Lato, sans-serif;
  font-size: 0.75rem;
  color: #5a4a38;
  background: #f7f3ec;
  border: 0.5px solid rgba(201, 169, 110, .25);
  border-radius: 4px;
  padding: 5px 12px
}

.rc-cta {
  font-family: Lato, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #2d5a3d;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 0.2s ease
}

.rc-cta:hover {
  gap: 0.7rem
}

.rooms-footer {
  margin-top: 3rem;
  text-align: center
}

.main-btn {
  display: inline-block;
  padding: 14px 36px;
  background: #2d5a3d;
  border: none;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-family: Lato, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: background 0.3s, transform 0.2s
}

.main-btn:hover {
  background: #1e3d2a;
  transform: translateY(-2px)
}

.main-btn::before {
  display: none
}

@media (max-width:1024px) {
  .rooms-modern {
    padding: 4rem 6%
  }

  .rc-img {
    height: 220px
  }
}

@media (max-width:768px) {
  .rooms-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem
  }

  .rooms-modern {
    padding: 3.5rem 6%
  }
}

@media (max-width:540px) {
  .rooms-grid {
    grid-template-columns: 1fr
  }

  .rooms-modern {
    padding: 3rem 5%
  }

  .rc-img {
    height: 200px
  }
}


/* ======================================================================
   HOMEPAGE: DINING SECTION (#dining) - OLD VERSION
   ====================================================================== */
#dining {
  background-color: var(--hue-2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden
}

.dining-image {
  position: relative;
  overflow: hidden;
  align-self: stretch
}

.dining-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  position: absolute;
  inset: 0;
  transform: scale(0.85);
  transform-origin: center center
}

.dining-image-badge {
  position: absolute;
  bottom: 2.5rem;
  left: 2.5rem;
  background-color: hsl(18 10% 20% / 0.9);
  border-left: 3px solid var(--accent);
  padding: 1rem 1.25rem
}

.dining-image-badge .open {
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.25rem
}

.dining-image-badge p {
  font-family: Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--secondary);
  margin: 0
}

.dining-content {
  padding: 3rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden
}

@media (max-width:1024px) {
  .dining-content {
    padding: 3rem 2rem
  }
}

.dining-content h2 {
  color: var(--foreground);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  margin-bottom: 1.25rem
}

.dining-content>p {
  color: var(--muted-foreground);
  margin-bottom: 1rem
}

.dining-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.5rem
}

.dining-menu-item {
  padding: 1.25rem;
  border: 1px solid hsl(18 10% 20% / 0.1);
  background-color: hsl(30 12% 92% / 0.3)
}

.dining-menu-item .time {
  font-family: Lato, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem
}

.dining-menu-item h4 {
  font-family: Georgia, serif;
  font-size: 1rem;
  color: var(--foreground);
  margin-bottom: 0.25rem
}

.dining-menu-item p {
  font-size: 0.82rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: 0
}


/* ======================================================================
   HOMEPAGE: HIGH TEA SECTION (#high-tea) - OLD VERSION
   ====================================================================== */
#high-tea {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background-color: var(--background)
}

.high-tea-image {
  position: relative;
  overflow: hidden
}

.high-tea-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(0.85);
  transform-origin: center center
}

.high-tea-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, var(--hue-3) 100%)
}

.high-tea-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 3rem;
  overflow: hidden
}

.high-tea-content h2 {
  color: var(--foreground);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  margin-bottom: 0.75rem
}

.high-tea-content blockquote {
  font-family: Georgia, serif;
  font-style: italic;
  color: var(--foreground);
  line-height: 1.5;
  margin: 1rem 0;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  position: relative
}

.high-tea-content blockquote .quote-mark {
  position: absolute;
  top: -1.25rem;
  left: -1.5rem;
  color: hsl(152 49% 55% / 0.4);
  font-family: Georgia, serif;
  font-size: 4.5rem;
  line-height: 1
}

.high-tea-content p {
  color: var(--muted-foreground);
  margin-bottom: 1rem
}


/* ======================================================================
   HOMEPAGE: EXPERIENCES TEASER (#experiences)
   ====================================================================== */
#experiences {
  background-color: var(--primary);
  padding: 6rem 8%;
  position: relative;
  overflow: hidden
}

.experiences-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Georgia, serif;
  font-size: 20vw;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.03);
  pointer-events: none;
  user-select: none;
  white-space: nowrap
}

.experiences-header {
  max-width: 640px;
  margin-bottom: 3.5rem
}

.experiences-header h2 {
  color: var(--secondary);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem)
}

.experiences-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: hsl(28 18% 83% / 0.1)
}

.experience-item {
  background-color: var(--primary);
  padding: 2rem;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer
}

.experience-item:hover {
  background-color: hsl(28 18% 83% / 0.04);
  border-bottom-color: var(--accent)
}

.experience-num {
  font-family: Georgia, serif;
  font-size: 2.25rem;
  line-height: 1;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.06)
}

.experience-item h4 {
  font-family: Georgia, serif;
  font-size: 1rem;
  color: var(--secondary);
  margin-bottom: 0.5rem
}

.experience-item p {
  font-size: 0.82rem;
  line-height: 1.625;
  color: hsl(28 18% 83% / 0.6);
  margin: 0
}

.experiences-cta {
  text-align: center;
  margin-top: 3rem
}


/* ======================================================================
   HOMEPAGE: SPA SECTION (#spa)
   ====================================================================== */
#spa {
  background-color: var(--glendower-black);
  padding: 6rem 8%;
  position: relative
}

#spa::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, hsl(152 49% 55% / 0.04) 0%, transparent 70%);
  pointer-events: none
}

.spa-header {
  max-width: 640px;
  margin-bottom: 3.5rem;
  position: relative;
  z-index: 1
}

.spa-header h2 {
  color: var(--secondary);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  margin-bottom: 1.25rem
}

.spa-header p {
  color: hsl(28 18% 83% / 0.7)
}

.spa-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1
}

.spa-image-wrap {
  position: relative
}

.spa-image-wrap img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover
}

.spa-image-accent {
  position: absolute;
  bottom: 2rem;
  right: 0;
  width: 45%;
  aspect-ratio: 1;
  border: 1px solid hsl(152 49% 55% / 0.3)
}

.spa-treatments {
  display: flex;
  flex-direction: column;
  gap: 2rem
}

.spa-treatment {
  padding-left: 1.5rem;
  border-left: 2px solid hsl(152 49% 55% / 0.2);
  transition: border-color 0.3s ease
}

.spa-treatment:hover {
  border-left-color: var(--accent)
}

.spa-treatment h4 {
  font-family: Georgia, serif;
  font-size: 1.05rem;
  color: var(--secondary);
  margin-bottom: 0.5rem
}

.spa-treatment p {
  font-size: 0.85rem;
  line-height: 1.625;
  color: hsl(28 18% 83% / 0.6);
  margin-bottom: 0.5rem
}

.spa-treatment .duration {
  font-family: Lato, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700
}


/* ======================================================================
   HOMEPAGE: THE PUB SECTION (#pub)
   Old pub layout
   ====================================================================== */
#pub {
  background: #1a1208;
  padding: 0
}

.pub-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(200, 180, 140, 0.06)
}

.pub-story {
  padding: 4rem 5% 3.5rem 8%;
  border-right: 1px solid rgba(200, 180, 140, 0.06)
}

.pub-eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--accent);
  margin-bottom: 0.75rem
}

.pub-heading {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  color: hsl(28, 18%, 83%);
  line-height: 1.2;
  margin-bottom: 0
}

.pub-divider {
  width: 28px;
  height: 1px;
  background: var(--accent);
  margin: 1.25rem 0
}

.pub-body {
  font-family: Lato, sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.85;
  color: hsla(28, 18%, 83%, 0.6);
  margin-bottom: 1rem
}

.pub-badge {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #c8a84b;
  border: 0.5px solid rgba(200, 168, 75, 0.35);
  padding: 6px 14px
}

.pub-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: rgba(200, 180, 140, 0.06)
}

.pub-menu-cell {
  background: #1e1610;
  padding: 2rem 1.75rem;
  transition: background 0.25s
}

.pub-menu-cell:hover {
  background: #241c10
}

.pub-menu-tag {
  font-family: Lato, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 0.6rem
}

.pub-menu-desc {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: hsl(28, 18%, 83%);
  line-height: 1.5;
  margin: 0
}

.pub-photo-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  height: 420px
}

.pub-photo-item {
  position: relative;
  overflow: hidden
}

.pub-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease
}

.pub-photo-item:hover img {
  transform: scale(1.04)
}

.pub-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 10, 4, 0.55) 0%, transparent 60%);
  transition: opacity 0.3s
}

.pub-photo-item:hover .pub-photo-overlay {
  opacity: 0.5
}

@media (max-width:900px) {
  .pub-split {
    grid-template-columns: 1fr
  }

  .pub-story {
    padding: 3rem 8%;
    border-right: none;
    border-bottom: 1px solid rgba(200, 180, 140, 0.06)
  }

  .pub-menu-grid {
    grid-template-columns: 1fr 1fr
  }

  .pub-photo-strip {
    height: 280px
  }
}

@media (max-width:540px) {
  .pub-menu-grid {
    grid-template-columns: 1fr
  }

  .pub-photo-strip {
    grid-template-columns: 1fr;
    height: auto
  }

  .pub-photo-item {
    height: 240px
  }
}


/* ======================================================================
   HOMEPAGE: OFFERS SECTION (#offers) - OLD VERSION
   ====================================================================== */
#offers {
  background-color: var(--luxury-beige);
  padding: 6rem 8%;
  content-visibility: auto;
  contain-intrinsic-size: 0 800px
}

.offers-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 5rem;
  align-items: start;
  position: relative;
  z-index: 1
}

.offers-header h2 {
  color: var(--foreground);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  margin-bottom: 1.25rem
}

.offers-header>p {
  color: var(--muted-foreground)
}

.offers-packages {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0
}

.offer-package {
  padding: 1.5rem 2rem;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
  background-color: hsl(18 10% 20% / 0)
}

.offer-package:hover {
  background-color: hsl(28 18% 83% / 0.04);
  border-bottom-color: var(--accent)
}

.offer-package-label {
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.25rem
}

.offer-package h4 {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  color: var(--foreground);
  margin-bottom: 0.5rem
}

.offer-package p {
  font-size: 0.82rem;
  line-height: 1.625;
  color: var(--muted-foreground);
  margin-bottom: 1rem
}

.offer-package-footer {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.offer-package-rate {
  font-family: Georgia, serif;
  font-size: 1.2rem;
  color: var(--foreground)
}

.offer-package-rate sup {
  font-family: Lato, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  opacity: 0.6;
  vertical-align: super
}

.offers-enhancements {
  margin-top: 4rem
}

.offers-enhancements h3 {
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem
}

.enhancements-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem
}

.enhancement-item {
  flex: 1;
  min-width: 180px;
  padding: 1.5rem;
  background-color: var(--background);
  border-top: 2px solid var(--accent)
}

.enhancement-item h4 {
  font-family: Georgia, serif;
  font-size: 0.9rem;
  color: var(--foreground);
  margin-bottom: 0.25rem
}

.enhancement-item p {
  font-size: 0.82rem;
  color: var(--muted-foreground);
  margin: 0
}

.gift-voucher-banner {
  margin-top: 4rem;
  padding: 2.5rem;
  background-color: var(--primary);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem
}

.gift-voucher-banner h3 {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  color: var(--secondary);
  margin-bottom: 0.5rem
}

.gift-voucher-banner p {
  color: hsl(28 18% 83% / 0.7);
  max-width: 480px;
  font-size: 0.9rem
}


/* ======================================================================
   HOMEPAGE: RECOGNITION / AWARDS (#recognition) - OLD TILE VERSION
   ====================================================================== */
#recognition {
  background-color: var(--background);
  padding: 5rem 8%;
  text-align: center
}

#recognition h2 {
  color: var(--foreground);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  margin: 0.5rem 0
}

.recognition-intro {
  color: hsl(16 6% 24% / 0.65);
  max-width: 560px;
  margin: 0.75rem auto 0;
  font-size: 0.9rem;
  line-height: 1.7
}

.rec-score-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 680px;
  margin: 3rem auto 0
}

.rec-score-tile {
  background: #1a1208;
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem
}

.rec-score-left {
  text-align: center
}

.rec-tile-num {
  font-family: Georgia, serif;
  font-size: 2.8rem;
  color: #b8963e;
  line-height: 1
}

.rec-tile-outof {
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(220, 200, 160, 0.4);
  margin-top: 3px
}

.rec-tile-sep {
  width: 0.5px;
  height: 48px;
  background: rgba(200, 180, 140, 0.15);
  flex-shrink: 0
}

.rec-score-right {
  text-align: left
}

.rec-tile-stars {
  font-size: 0.85rem;
  color: #b8963e;
  letter-spacing: 1px;
  margin-bottom: 5px
}

.rec-tile-star-empty {
  color: rgba(184, 150, 62, 0.25)
}

.rec-tile-dots {
  font-size: 0.6rem;
  color: #4caf87;
  letter-spacing: 3px;
  margin-bottom: 5px
}

.rec-tile-source {
  font-family: Lato, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #4caf87
}

.rec-tile-count {
  font-family: Lato, sans-serif;
  font-size: 0.62rem;
  color: rgba(220, 200, 160, 0.3);
  margin-top: 2px
}

.rec-award-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-width: 680px;
  margin: 10px auto 0
}

.rec-award-tile {
  background: hsl(28 12% 86%);
  padding: 1.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  transition: background 0.25s
}

.rec-award-tile:hover {
  background: hsl(28 12% 80%)
}

.rec-award-tile-icon {
  width: 42px;
  height: 42px;
  border: 0.5px solid rgba(184, 150, 62, 0.4);
  display: flex;
  align-items: center;
  justify-content: center
}

.rec-award-tile-icon svg {
  width: 20px;
  height: 20px;
  stroke: #b8963e
}

.rec-award-tile-name {
  font-family: Georgia, serif;
  font-size: 0.82rem;
  color: #1a1208;
  line-height: 1.3
}

.rec-award-tile-source {
  font-family: Lato, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #4caf87
}


/* ======================================================================
   HOMEPAGE: TESTIMONIALS (#testimonials)
   ====================================================================== */
#testimonials {
  background-color: var(--muted);
  padding: 5rem 8%
}

.testimonials-header {
  max-width: 640px;
  margin-bottom: 3rem
}

.testimonials-header h2 {
  color: var(--foreground);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem)
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem
}

.testimonial-card {
  background-color: var(--background);
  padding: 2.5rem
}

.testimonial-stars {
  color: var(--accent);
  letter-spacing: 3px;
  font-size: 0.8rem;
  margin-bottom: 1.25rem
}

.testimonial-card blockquote {
  font-family: Georgia, serif;
  font-style: italic;
  color: var(--foreground);
  line-height: 1.7;
  margin-bottom: 1.5rem
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem
}

.testimonial-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--warm-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  color: var(--foreground);
  flex-shrink: 0
}

.testimonial-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--foreground)
}

.testimonial-loc {
  font-size: 0.75rem;
  color: var(--muted-foreground)
}

.testimonial-platform {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.125rem
}


/* ======================================================================
   HOMEPAGE: CONTACT SECTION (#contact)
   ====================================================================== */
#contact {
  background-color: var(--background);
  padding: 6rem 8%
}

.contact-header {
  max-width: 640px;
  margin-bottom: 4rem
}

.contact-header h2 {
  color: var(--foreground);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem)
}

.contact-header p {
  color: var(--muted-foreground);
  margin-top: 1rem
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem
}

.contact-info-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-bottom: 1.75rem
}

.contact-info-icon {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid hsl(18 10% 20% / 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
  font-size: 0.9rem
}

.contact-info-label {
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(18 10% 20% / 0.5);
  margin-bottom: 0.25rem
}

.contact-info-value {
  font-size: 0.92rem;
  color: var(--muted-foreground);
  white-space: pre-line
}

.contact-whatsapp {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background-color: hsl(152 49% 55% / 0.1);
  border: 1px solid hsl(152 49% 55% / 0.3);
  margin-top: 1rem;
  cursor: pointer;
  transition: background-color 0.3s
}

.contact-whatsapp:hover {
  background-color: hsl(152 49% 55% / 0.18)
}

.contact-whatsapp p {
  font-size: 0.85rem;
  color: var(--foreground);
  margin: 0
}

.contact-whatsapp strong {
  font-weight: 700;
  color: var(--accent)
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem
}

.form-field label {
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(18 10% 20% / 0.6)
}

.form-field input,
.form-field select,
.form-field textarea {
  background-color: transparent;
  border: 1px solid hsl(18 10% 20% / 0.25);
  padding: 0.75rem 1rem;
  font-family: Lato, sans-serif;
  font-size: 0.9rem;
  color: var(--foreground);
  outline: none;
  transition: border-color 0.3s;
  width: 100%
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--accent)
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: hsl(18 10% 20% / 0.3)
}

.form-field select {
  appearance: none;
  -webkit-appearance: none
}

.form-field textarea {
  resize: vertical;
  min-height: 120px
}

.form-disclaimer {
  font-size: 0.72rem;
  color: hsl(18 10% 20% / 0.4);
  letter-spacing: 0.05em
}


/* ======================================================================
   SITE-WIDE FOOTER
   Footer grid, links, social icons, bottom bar
   ====================================================================== */
footer {
  position: relative;
  background-color: var(--glendower-black);
  padding: 2rem 8% 0.5rem;
  overflow: hidden
}

footer::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 540px;
  height: 320px;
  background-image: url('./Hotel_Glendower_Lights_A_detailed_line_.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.50;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to top left, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to top left, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%)
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr auto;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid hsl(28 18% 83% / 0.1);
  margin-bottom: 0.75rem
}

.footer-brand-sub {
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 1.5rem
}

.footer-brand-desc {
  color: hsl(27 22% 81% / 0.55);
  font-size: 0.85rem;
  line-height: 1.8;
  max-width: 300px;
  margin-bottom: 1.5rem
}

.footer-eco {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background-color: hsl(152 49% 55% / 0.1);
  border: 1px solid hsl(152 49% 55% / 0.3);
  padding: 0.75rem 1.25rem
}

.footer-eco-icon {
  color: var(--accent);
  font-size: 1.125rem
}

.footer-eco p {
  font-size: 0.78rem;
  color: hsl(27 22% 81% / 0.7);
  margin: 0
}

.footer-col h4 {
  font-family: Lato, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-top: 3rem;
  margin-bottom: 1.5rem
}

.footer-col ul {
  list-style: none
}

.footer-col ul li {
  margin-bottom: 0.75rem
}

.footer-col ul li a {
  font-size: 0.83rem;
  color: hsl(27 22% 81% / 0.55);
  font-weight: 300;
  transition: color 0.3s;
  text-decoration: none
}

.footer-col ul li a:hover {
  color: var(--accent)
}

.footer-bottom {
  display: flex;
  justify-content: flex-start
}

.footer-copyright {
  font-size: 0.62rem;
  color: hsl(27 22% 81% / 0.35)
}

.footer-social {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding-top: 2.6rem
}

.footer-social-btn {
  width: 44px;
  height: 44px;
  border: 1px solid hsl(28 18% 83% / 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #ffffff;
  transition: all 0.3s;
  cursor: pointer;
  font-family: Lato, sans-serif;
  text-decoration: none
}

.footer-social-btn:hover {
  border-color: var(--accent);
  color: var(--accent)
}

.footer-social-btn--fb:hover {
  border-color: #1877F2
}

.footer-social-btn--ig:hover {
  border-color: #E1306C
}

@media (max-width:768px) {
  footer {
    padding: 0
  }

  .footer-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0
  }

  .footer-brand {
    text-align: center;
    padding: 2rem 1.5rem 1.5rem;
    border-bottom: 0.5px solid rgba(184, 150, 62, .15);
    width: 100%
  }

  .footer-brand a {
    display: inline-block !important;
    margin-bottom: 1rem !important
  }

  .footer-brand-sub {
    display: block;
    margin-bottom: .75rem;
    font-size: .55rem
  }

  .footer-brand-desc {
    max-width: 100%;
    font-size: .78rem;
    line-height: 1.75;
    margin-bottom: 1rem
  }

  .footer-eco {
    justify-content: center;
    border: 0.5px solid rgba(76, 175, 135, .25);
    border-radius: 4px;
    padding: .4rem .75rem;
    display: inline-flex
  }

  .footer-grid .footer-col:nth-child(2),
  .footer-grid .footer-col:nth-child(3) {
    display: block;
    width: auto;
    flex: 1;
    padding: 1.25rem 1.25rem;
    vertical-align: top
  }

  .footer-grid {
    display: grid;
    grid-template-areas: "brand brand" "col2  col3" "col4  col4" "social social" "bottom bottom";
    grid-template-columns: 1fr 1fr
  }

  .footer-brand {
    grid-area: brand
  }

  .footer-col h4 {
    margin-top: 0
  }

  .footer-col:nth-child(2) {
    grid-area: col2;
    padding: 1.25rem 1rem 1.25rem 1.25rem;
    border-right: 0.5px solid rgba(184, 150, 62, .12);
    border-bottom: 0.5px solid rgba(184, 150, 62, .12)
  }

  .footer-col:nth-child(3) {
    grid-area: col3;
    padding: 1.25rem 1.25rem 1.25rem 1rem;
    border-left: none;
    border-bottom: 0.5px solid rgba(184, 150, 62, .12)
  }

  .footer-col:nth-child(3)::after {
    display: none
  }

  .footer-col:nth-child(4) {
    grid-area: col4;
    width: 100%;
    display: block;
    text-align: center;
    padding: 1.1rem 1.25rem;
    border-bottom: 0.5px solid rgba(184, 150, 62, .12)
  }

  .footer-col:nth-child(4) h4 {
    text-align: center;
    margin-top: 0;
    margin-bottom: .65rem
  }

  .footer-col:nth-child(4) ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .3rem;
    list-style: none
  }

  .footer-col:nth-child(4) ul li {
    margin-bottom: 0
  }

  .footer-col:nth-child(4) ul li a {
    font-size: .65rem;
    padding: .2rem .55rem;
    border: 0.5px solid rgba(240, 232, 216, .15);
    border-radius: 3px;
    display: inline-block
  }

  .footer-bottom {
    grid-area: bottom;
    text-align: center;
    padding: 1rem 1.5rem
  }

  .footer-social {
    grid-area: social;
    flex-direction: row;
    justify-content: center;
    padding: 1.1rem 1.25rem;
    border-bottom: 0.5px solid rgba(184, 150, 62, .12)
  }

  .footer-social-btn {
    width: 38px;
    height: 38px
  }

  .footer-copyright {
    font-size: .62rem
  }
}

@media (max-width:480px) {
  .footer-col:nth-child(2) {
    padding: 1.1rem .9rem 1.1rem 1rem
  }

  .footer-col:nth-child(3) {
    padding: 1.1rem 1rem 1.1rem .9rem
  }

  .footer-col h4 {
    font-size: .55rem;
    margin-bottom: .6rem
  }

  .footer-col ul li a {
    font-size: .72rem
  }
}

@media (max-width:1024px) {
  #about {
    grid-template-columns: 1fr
  }

  .rooms-page .rooms-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem
  }

  .room-card-img {
    aspect-ratio: 16/9
  }

  #dining {
    grid-template-columns: 1fr
  }

  .dining-image {
    min-height: 300px
  }

  #high-tea {
    grid-template-columns: 1fr
  }

  .high-tea-image {
    min-height: 300px
  }

  .high-tea-image::after {
    display: none
  }

  .experiences-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .spa-layout {
    grid-template-columns: 1fr
  }

  .pub-layout {
    grid-template-columns: 1fr
  }

  .offers-layout {
    grid-template-columns: 1fr
  }

  .testimonials-grid {
    grid-template-columns: 1fr
  }

  .contact-layout {
    grid-template-columns: 1fr
  }
}

@media (max-width:768px) {
  .nav-links {
    display: none
  }

  .nav-reserve {
    display: none
  }

  .nav-hamburger {
    display: flex
  }

  .section-padding {
    padding: 4rem 6%
  }

  #about {
    padding: 4rem 6%
  }

  .experiences-grid {
    grid-template-columns: 1fr 1fr
  }

  grid-template-columns:1fr;
}


/* ======================================================================
   ROOMS LISTING PAGE: GRID OVERRIDES (.rooms-page)
   ====================================================================== */
.rooms-page .rooms-grid {
  grid-template-columns: 1fr;
  gap: 1.25rem
}

#rooms {
  padding: 4rem 6%
}

.dining-content {
  padding: 3rem 6%
}

.high-tea-content {
  padding: 3rem 6%
}

#experiences {
  padding: 4rem 6%
}

#spa {
  padding: 4rem 6%
}

#pub {
  padding: 0
}

#offers {
  padding: 4rem 6%
}

#recognition {
  padding: 3rem 6%
}

#testimonials {
  padding: 3rem 6%
}

#contact {
  padding: 4rem 6%
}

.form-row {
  grid-template-columns: 1fr
}

.dining-menu {
  grid-template-columns: 1fr
}

.pub-menu {
  grid-template-columns: 1fr
}

.awards-row {
  gap: 1.5rem
}
}

@media (max-width:1024px) {
  #about {
    grid-template-columns: 1fr;
    gap: 3rem
  }

  #dining {
    grid-template-columns: 1fr
  }

  #high-tea {
    grid-template-columns: 1fr
  }

  .spa-layout {
    grid-template-columns: 1fr
  }

  .offers-layout {
    grid-template-columns: 1fr
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 3rem
  }

  .testimonials-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem
  }

  .rooms-page .rooms-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem
  }

  .pub-split {
    grid-template-columns: 1fr
  }

  .pub-story {
    padding: 3rem 6%;
    border-right: none;
    border-bottom: 1px solid rgba(200, 180, 140, 0.06)
  }

  .pub-menu-grid {
    grid-template-columns: 1fr 1fr
  }

  .rec-score-tiles {
    max-width: 100%
  }

  .rec-award-tiles {
    max-width: 100%
  }
}

@media (max-width:768px) {
  .nav-links {
    display: none
  }

  .nav-reserve {
    display: none
  }

  .nav-hamburger {
    display: flex
  }

  #main-nav {
    padding: 0 5%;
    height: 64px
  }

  .nav-logo-img {
    height: 44px
  }

  #hero {
    min-height: 100svh
  }

  .hero-h1 {
    font-size: clamp(1.8rem, 8vw, 3rem) !important;
    line-height: 1.15 !important
  }

  .hero-eyebrow {
    font-size: 0.55rem;
    letter-spacing: 0.18em
  }

  .hero-tagline {
    font-size: 0.88rem;
    max-width: 90%
  }

  .hero-content {
    padding: 0 6% 6rem
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem
  }

  .hero-actions .btn-hotel-primary,
  .hero-actions .btn-hotel-ghost {
    width: auto;
    text-align: center;
    justify-content: center;
    padding: 1rem 2rem
  }

  .hero-dots {
    bottom: 1rem
  }

  #booking-bar {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 6%
  }

  .booking-field {
    min-width: 100%
  }

  #booking-bar button {
    width: 100%
  }

  .booking-field-promo {
    display: none
  }

  #announce-bar {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
    padding: 0.75rem 6%;
    font-size: 0.78rem
  }

  .announce-cta {
    margin: 0 auto
  }

  #about {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 3.5rem 6%
  }

  .about-image-wrap {
    max-height: 300px
  }

  .about-image-inner img {
    height: 300px
  }

  .about-year-badge {
    right: 0.5rem;
    bottom: -1rem
  }

  .about-features {
    grid-template-columns: 1fr 1fr;
    gap: 1rem
  }

  .about-ornament {
    margin: 1rem 0
  }

  .rooms-header {
    padding: 0
  }

  .rooms-page .rooms-grid {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  .room-card-body {
    padding: 1.25rem
  }

  .room-card-name {
    font-size: 1.1rem
  }

  .room-card-img {
    aspect-ratio: 16/9
  }

  .rooms-cta {
    margin-top: 1.5rem
  }

  #dining {
    grid-template-columns: 1fr
  }

  .dining-image {
    min-height: 240px;
    max-height: 300px
  }

  .dining-image img {
    max-height: 300px
  }

  .dining-content {
    padding: 2.5rem 6%
  }

  #high-tea {
    grid-template-columns: 1fr
  }

  .high-tea-image {
    min-height: 220px;
    order: -1
  }

  .high-tea-content {
    padding: 2.5rem 6%
  }

  #experiences {
    padding: 4rem 6%
  }

  .experiences-header {
    padding: 0 0 2rem
  }

  .experiences-grid {
    grid-template-columns: 1fr;
    gap: 0
  }

  .experience-item {
    padding: 1.25rem 0
  }

  .experience-num {
    font-size: 1.8rem
  }

  .experiences-bg-text {
    display: none
  }

  #spa {
    padding: 4rem 6%
  }

  .spa-layout {
    grid-template-columns: 1fr
  }

  .spa-image-wrap {
    max-height: 260px
  }

  .spa-treatments {
    padding: 2rem 0 0
  }

  .spa-treatment {
    padding: 1rem 0
  }

  .spa-header {
    text-align: center
  }

  .pub-split {
    grid-template-columns: 1fr
  }

  .pub-story {
    padding: 2.5rem 6%;
    border-right: none;
    border-bottom: 1px solid rgba(200, 180, 140, 0.06)
  }

  .pub-menu-grid {
    grid-template-columns: 1fr 1fr
  }

  .pub-menu-cell {
    padding: 1.25rem
  }

  .pub-photo-strip {
    height: 200px
  }

  .pub-heading {
    font-size: clamp(1.4rem, 5vw, 2rem)
  }

  .pub-stats {
    grid-template-columns: 1fr
  }

  .pub-stat {
    border-right: none;
    border-bottom: 1px solid rgba(200, 180, 140, 0.06)
  }

  .pub-stat:last-child {
    border-bottom: none
  }

  #offers {
    padding: 4rem 6%
  }

  .offers-layout {
    grid-template-columns: 1fr
  }

  .offers-packages {
    grid-template-columns: 1fr
  }

  .enhancements-grid {
    grid-template-columns: 1fr 1fr
  }

  .gift-voucher-banner {
    flex-direction: column;
    gap: 1.25rem
  }

  .gift-voucher-banner button {
    width: 100%
  }

  #recognition {
    padding: 3.5rem 6%
  }

  .rec-score-tiles {
    grid-template-columns: 1fr;
    gap: 6px;
    max-width: 100%
  }

  .rec-score-tile {
    padding: 1.25rem 1.5rem
  }

  .rec-tile-num {
    font-size: 2.2rem
  }

  .rec-award-tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    max-width: 100%
  }

  #testimonials {
    padding: 3.5rem 6%
  }

  .testimonials-grid {
    grid-template-columns: 1fr
  }

  .testimonials-header {
    text-align: center
  }

  #contact {
    padding: 4rem 6%
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .form-row {
    grid-template-columns: 1fr
  }

  .contact-form button {
    width: 100%
  }

  .footer-bottom {
    text-align: center
  }

  .footer-social {
    justify-content: center
  }
}

@media (max-width:480px) {
  #main-nav {
    padding: 0 4%
  }

  .nav-logo-img {
    height: 38px
  }

  .hero-h1 {
    font-size: clamp(1.5rem, 9vw, 2.2rem) !important
  }

  .hero-tagline {
    display: none
  }

  .hero-content {
    padding: 0 5% 5rem
  }

  .announce-cta {
    display: none
  }

  .about-features {
    grid-template-columns: 1fr
  }

  .about-year-badge {
    display: none
  }

  .room-card-img {
    aspect-ratio: 4/3
  }

  .pub-menu-grid {
    grid-template-columns: 1fr
  }

  .pub-photo-strip {
    grid-template-columns: 1fr;
    height: auto
  }

  .pub-photo-item {
    height: 220px
  }

  .rec-award-tiles {
    grid-template-columns: 1fr 1fr
  }

  .rec-score-tile {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem
  }

  .rec-tile-sep {
    width: 40px;
    height: 0.5px
  }

  .rec-score-right {
    text-align: center
  }

  .enhancements-grid {
    grid-template-columns: 1fr
  }

  .offer-package {
    padding: 1.5rem
  }

  .form-row {
    grid-template-columns: 1fr
  }

  .testimonial-card {
    padding: 1.5rem
  }
}

#offers {
  background-color: #38312E;
  padding: 0
}


/* ======================================================================
   HOMEPAGE: OFFERS SECTION (#offers) - REDESIGNED ROW VERSION
   Replaces earlier offers block with row layout + animated gold line
   ====================================================================== */
.offers-head {
  padding: 4.5rem 8% 2.5rem;
  border-bottom: 0.5px solid rgba(184, 150, 62, 0.15)
}

.offers-head .eyebrow {
  margin-bottom: 0.75rem
}

.offers-head-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem
}

.offers-head-inner h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--secondary);
  margin: 0;
  flex-shrink: 0
}

.offers-head-inner>p {
  font-size: 0.85rem;
  color: hsl(28 18% 83% / 0.5);
  line-height: 1.85;
  max-width: 340px;
  text-align: right;
  margin: 0
}

.offers-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 0.5px solid rgba(184, 150, 62, 0.12);
  height: 305px
}

.offers-row-img {
  overflow: hidden;
  height: 100%
}

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

.offers-row:hover .offers-row-img img {
  transform: scale(1.03)
}

.offers-row--reverse .offers-row-img {
  order: 2
}

.offers-row--reverse .offers-row-body {
  order: 1;
  padding-left: 8%;
  padding-right: 4rem
}

.offers-row-body {
  padding: 3rem 4rem 3rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden
}

.offers-row-tag {
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.4rem
}

.offers-row-body h3 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  color: var(--secondary);
  margin: 0 0 0.85rem;
  line-height: 1.2
}

.offers-row-body p {
  font-size: 0.83rem;
  color: hsl(28 18% 83% / 0.58);
  line-height: 1.85;
  margin: 0 0 1.75rem
}

.offers-row-footer {
  display: flex;
  align-items: center;
  gap: 1.5rem
}

.offers-row-meta {
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(28 18% 83% / 0.28)
}

/* Extended Stay row — light cream background per mockup, dark text override */
.offers-row--reverse {
  background-color: #f7f4f0
}

.offers-row--reverse .offers-row-tag {
  color: #b8963e
}

.offers-row--reverse .offers-row-body h3 {
  color: #1a1208
}

.offers-row--reverse .offers-row-body p {
  color: rgba(26, 18, 8, 0.65)
}

.offers-row--reverse .offers-row-meta {
  color: rgba(26, 18, 8, 0.35)
}

/* ======================================================================
   OFFERS PAGE: ROMANTIC EXPERIENCES TIER CARDS (.ro-tiers)
   Sits beneath the Romantic Experiences row on offers.php
   ====================================================================== */
.ro-tiers {
  position: relative;
  padding: 4.5rem 8% 5rem;
  border-bottom: 0.5px solid rgba(184, 150, 62, 0.12);
  overflow: hidden
}

.ro-tiers-bg {
  position: absolute;
  width: 170px;
  height: 170px;
  opacity: .08;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23c9a96e' stroke-width='1'%3E%3Cpath d='M40 360c10-40 0-80-30-100M40 360c-10-40 0-80 30-100M40 360v-140'/%3E%3Ccircle cx='40' cy='210' r='10'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain
}

.ro-tiers-bg--left {
  left: -20px;
  bottom: -20px
}

.ro-tiers-bg--right {
  right: -20px;
  top: -20px;
  transform: scaleX(-1)
}

.ro-tiers-head {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto 3.25rem;
  text-align: center
}

.ro-tiers-head h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--serif, Georgia, serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--secondary);
  margin: 0 0 1.1rem
}

.ro-tiers-head h3::before,
.ro-tiers-head h3::after {
  content: '';
  width: 34px;
  height: 1px;
  background: #b8963e;
  flex-shrink: 0
}

.ro-tiers-head h3 svg {
  width: 13px;
  height: 13px;
  stroke: #b8963e;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0
}

.ro-tiers-head p {
  font-size: 0.8rem;
  color: hsl(28 18% 83% / 0.55);
  line-height: 1.85;
  margin: 0
}

.ro-tier-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto
}

.ro-tier {
  position: relative;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(184, 150, 62, 0.4);
  padding: 2rem 1.85rem 2.1rem;
  display: flex;
  flex-direction: column;
  min-height: 480px;
  overflow: hidden;
  transition: border-color .3s
}

.ro-tier::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 16, 11, 0.35) 0%, rgba(10, 16, 11, 0.55) 45%, rgba(10, 16, 11, 0.92) 78%, #0a100b 100%);
  z-index: 0
}

.ro-tier:hover {
  border-color: rgba(184, 150, 62, 0.7)
}

.ro-tier > * {
  position: relative;
  z-index: 1
}

.ro-tier-name {
  margin-top: auto;
  font-family: var(--serif, Georgia, serif);
  font-weight: 400;
  font-size: 1.25rem;
  color: #e6c98a;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  margin-bottom: 0.85rem;
  line-height: 1.25
}

.ro-tier-desc {
  font-size: 0.78rem;
  color: rgba(245, 240, 232, 0.78);
  line-height: 1.7;
  margin: 0 0 1.4rem
}

.ro-tier-includes {
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.55);
  margin: 0 0 0.9rem;
  padding-top: 0.9rem;
  border-top: 0.5px solid rgba(201, 169, 110, 0.3)
}

.ro-tier-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem
}

.ro-tier-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.76rem;
  color: rgba(245, 240, 232, 0.85);
  line-height: 1.5
}

.ro-tier-list li svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 0.1rem;
  stroke: #c9a96e;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

@media (max-width: 900px) {
  .ro-tier {
    min-height: 420px
  }
}


@media (max-width: 900px) {
  .ro-tier-grid {
    grid-template-columns: 1fr
  }
}

.offers-enhancements {
  padding: 2.25rem 8%;
  border-bottom: 0.5px solid rgba(184, 150, 62, 0.12)
}

.offers-enh-label {
  font-family: Lato, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(28 18% 83% / 0.35);
  margin: 0 0 1.25rem
}

.offers-enh-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0
}

.offers-enh-item {
  padding: 1rem 1.5rem 1rem 0;
  border-right: 0.5px solid rgba(184, 150, 62, 0.1);
  padding-right: 1.5rem;
  margin-right: 0
}

.offers-enh-item:first-child {
  padding-left: 0
}

.offers-enh-item:last-child {
  border-right: none
}

.offers-enh-item::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  margin-bottom: 0.65rem
}

.offers-enh-item h4 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--secondary);
  margin: 0 0 0.3rem
}

.offers-enh-item p {
  font-size: 0.77rem;
  color: hsl(28 18% 83% / 0.42);
  line-height: 1.65;
  margin: 0
}

.offers-voucher {
  padding: 3.75rem 8%;
  background-color: hsl(18 12% 10%);
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden
}

.offers-voucher-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 55% center;
  opacity: 0.30;
  pointer-events: none;
  user-select: none
}

.offers-voucher-text {
  flex: 1;
  min-width: 240px
}

.offers-voucher-text h3 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--secondary);
  margin: 0 0 0.45rem
}

.offers-voucher-text p {
  font-size: 0.82rem;
  color: hsl(28 18% 83% / 0.5);
  line-height: 1.8;
  margin: 0;
  max-width: 480px
}

.offers-voucher-divider {
  width: 1px;
  height: 70px;
  background: rgba(184, 150, 62, 0.18);
  flex-shrink: 0
}

@media (max-width:1024px) {
  .offers-head-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem
  }

  .offers-head-inner>p {
    text-align: left;
    max-width: 100%
  }

  .offers-row,
  .offers-row--reverse {
    grid-template-columns: 1fr;
    height: auto
  }

  .offers-row-img {
    height: 260px
  }

  .offers-row--reverse .offers-row-img {
    order: 0
  }

  .offers-row--reverse .offers-row-body {
    order: 0;
    padding-left: 2rem;
    padding-right: 2rem
  }

  .offers-row-body {
    padding: 2.25rem 2rem
  }

  .offers-enh-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 0
  }

  .offers-enh-item:nth-child(2) {
    border-right: none
  }

  .offers-enh-item:nth-child(3) {
    padding-left: 0
  }
}

@media (max-width:768px) {
  .offers-head {
    padding: 3.5rem 6% 2rem
  }

  .offers-enhancements {
    padding: 2rem 6%
  }

  .offers-voucher {
    padding: 2.25rem 6%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem
  }

  .offers-voucher-divider {
    display: none
  }
}

@media (max-width:480px) {
  .offers-row-body {
    padding: 1.75rem 6%
  }

  .offers-row-img {
    height: 220px
  }

  .offers-enh-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem
  }

  .offers-enh-item {
    border-right: none;
    border-bottom: 0.5px solid rgba(184, 150, 62, 0.1);
    padding-bottom: 1.25rem
  }

  .offers-enh-item:last-child {
    border-bottom: none
  }

  .offers-row-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem
  }
}

.offers-line-track {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none
}

.offers-row:not(.offers-row--reverse) .offers-line-track {
  top: 0;
  bottom: auto
}

.offers-row--reverse .offers-line-track {
  bottom: 0;
  top: auto
}

.offers-gold-dot,
.offers-gold-line {
  position: absolute;
  opacity: 0
}

.offers-gold-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%
}

.offers-row:not(.offers-row--reverse) .offers-gold-dot {
  top: -3px;
  bottom: auto
}

.offers-row--reverse .offers-gold-dot {
  bottom: -3px;
  top: auto
}

.offers-gold-line {
  height: 2px;
  width: 0;
  background: var(--accent);
  top: 0
}

.offers-row:not(.offers-row--reverse) .offers-gold-dot {
  left: 0
}

.offers-row:not(.offers-row--reverse) .offers-gold-line {
  left: 0;
  transform-origin: left center
}

.offers-row--reverse .offers-gold-dot {
  right: 0;
  left: auto
}

.offers-row--reverse .offers-gold-line {
  right: 0;
  left: auto;
  transform-origin: right center
}

#offers.line-animate .offers-row:not(.offers-row--reverse) .offers-gold-dot {
  animation: offerDotRight 6s ease-in-out infinite
}

#offers.line-animate .offers-row:not(.offers-row--reverse) .offers-gold-line {
  animation: offerLineRight 6s ease-in-out infinite
}

#offers.line-animate .offers-row--reverse .offers-gold-dot {
  animation: offerDotLeft 6s ease-in-out infinite;
  animation-delay: 0.6s
}

#offers.line-animate .offers-row--reverse .offers-gold-line {
  animation: offerLineLeft 6s ease-in-out infinite;
  animation-delay: 0.6s
}

@keyframes offerDotRight {
  0% {
    left: 0;
    opacity: 1
  }

  65% {
    left: calc(100% - 8px);
    opacity: 1
  }

  80% {
    left: calc(100% - 8px);
    opacity: 0
  }

  81% {
    left: 0;
    opacity: 0
  }

  100% {
    left: 0;
    opacity: 1
  }
}

@keyframes offerLineRight {
  0% {
    left: 0;
    width: 0;
    opacity: 1
  }

  65% {
    left: 0;
    width: 100%;
    opacity: 1
  }

  80% {
    left: 0;
    width: 100%;
    opacity: 0
  }

  81% {
    left: 0;
    width: 0;
    opacity: 0
  }

  100% {
    left: 0;
    width: 0;
    opacity: 1
  }
}

@keyframes offerDotLeft {
  0% {
    right: 0;
    opacity: 1
  }

  65% {
    right: calc(100% - 8px);
    opacity: 1
  }

  80% {
    right: calc(100% - 8px);
    opacity: 0
  }

  81% {
    right: 0;
    opacity: 0
  }

  100% {
    right: 0;
    opacity: 1
  }
}

@keyframes offerLineLeft {
  0% {
    right: 0;
    width: 0;
    opacity: 1
  }

  65% {
    right: 0;
    width: 100%;
    opacity: 1
  }

  80% {
    right: 0;
    width: 100%;
    opacity: 0
  }

  81% {
    right: 0;
    width: 0;
    opacity: 0
  }

  100% {
    right: 0;
    width: 0;
    opacity: 1
  }
}


/* ======================================================================
   LOUNGE / BAR PHOTO GALLERY (#lounge-gallery)
   Split panel gallery with thumbnails
   ====================================================================== */
#lounge-gallery {
  display: block;
  width: 100%;
  overflow: hidden;
  background: hsl(18, 10%, 12%)
}

.lounge-split {
  display: grid;
  grid-template-columns: 42% 58%;
  height: 520px;
  overflow: hidden
}

.lounge-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.5rem 1.5rem 2.5rem;
  background: hsl(18, 10%, 12%);
  overflow: hidden;
  width: 300px;
  flex-shrink: 0
}

.lounge-right {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  width: 100%
}

.lounge-panel-top {
  flex: 1
}

.lounge-eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem
}

.lounge-title {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--secondary);
  margin: 0 0 1rem;
  line-height: 1.25
}

.lounge-panel-divider {
  width: 36px;
  height: 2px;
  background-color: var(--accent);
  margin: 0 0 1.5rem;
  opacity: 0.6
}

.lounge-panel-desc {
  font-family: Lato, sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.8;
  color: hsl(28 18% 83% / 0.6);
  margin: 0 0 2rem;
  max-width: 380px
}

.lounge-cap-title-wrap {
  border-left: 2px solid hsl(28 18% 83% / 0.12);
  padding-left: 1rem;
  margin-bottom: 2.5rem
}

.lounge-cap-tag-panel {
  font-family: Lato, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.35rem
}

.lounge-cap-title-panel {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--secondary);
  margin: 0;
  line-height: 1.3
}

.lounge-panel-bottom {
  flex-shrink: 0
}

.lounge-nav-btns {
  display: flex;
  align-items: center;
  gap: 1rem
}

.lounge-nav-btn {
  width: 40px;
  height: 40px;
  border: 0.5px solid hsl(28 18% 83% / 0.2);
  background: transparent;
  color: hsl(28 18% 83% / 0.6);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s, color 0.25s, background 0.25s
}

.lounge-nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: hsl(152 49% 55% / 0.06)
}

.lounge-counter {
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: hsl(28 18% 83% / 0.35)
}

.lounge-photo-wrap {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden;
  min-height: 400px;
  min-width: 0
}

.lounge-photo-wrap .lounge-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease
}

.lounge-photo-wrap .lounge-slide.active {
  opacity: 1
}

.lounge-photo-wrap .lounge-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.lounge-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 6, 3, 0.45) 0%, transparent 50%);
  pointer-events: none
}

.lounge-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  flex-shrink: 0;
  height: 110px;
  overflow: hidden;
  padding-right: 70px
}

.lounge-thumb {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-top: 2px solid transparent;
  transition: border-color 0.25s ease
}

.lounge-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 6, 3, 0.45);
  transition: background 0.3s ease;
  pointer-events: none
}

.lounge-thumb.active {
  border-top-color: var(--accent)
}

.lounge-thumb.active::after {
  background: rgba(10, 6, 3, 0.1)
}

.lounge-thumb:hover::after {
  background: rgba(10, 6, 3, 0.15)
}

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

.lounge-thumb:hover img {
  transform: scale(1.06)
}

.lounge-thumb-num {
  position: absolute;
  bottom: 0.4rem;
  left: 0.6rem;
  font-family: Lato, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: hsl(28 18% 83% / 0.6);
  z-index: 1
}

.lounge-thumb.active .lounge-thumb-num {
  color: var(--accent)
}

@media (max-width:1024px) {
  .lounge-photo-wrap {
    min-height: 320px
  }

  .lounge-panel {
    padding: 2.5rem 6%
  }

  .lounge-thumbs {
    height: 80px
  }
}

@media (max-width:768px) {
  .lounge-photo-wrap {
    min-height: 240px
  }

  .lounge-panel {
    padding: 3.5rem 1.5rem 2.5rem
  }

  .lounge-title {
    font-size: 1.2rem
  }

  .lounge-panel-desc {
    font-size: 0.82rem
  }

  .lounge-thumbs {
    padding-right: 0
  }
}

@media (max-width:480px) {
  .lounge-thumbs {
    grid-template-columns: repeat(2, 1fr);
    height: 120px
  }

  .lounge-cap-title-panel {
    font-size: 0.9rem
  }
}


/* ======================================================================
   ABOUT PAGE: SLIDESHOW (.about-slideshow / .as-*)
   Photo slideshow with side panel on about.php
   ====================================================================== */
.about-slideshow {
  margin: 3rem 0 4rem;
  padding: 0 8%
}

.as-split {
  display: grid;
  grid-template-columns: 35% 65%;
  height: 520px;
  border: 0.5px solid rgba(30, 20, 10, .08);
  overflow: hidden
}

.as-panel {
  background: #1a1208;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(200, 180, 140, .08)
}

.as-panel-eyebrow {
  font-family: Lato, sans-serif;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: var(--accent);
  margin-bottom: .6rem
}

.as-panel-h2 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: hsl(28, 18%, 83%);
  line-height: 1.3;
  margin-bottom: 0
}

.as-panel-divider {
  width: 20px;
  height: 1px;
  background: var(--accent);
  margin: 1.1rem 0
}

.as-panel-desc {
  font-family: Lato, sans-serif;
  font-size: .82rem;
  font-weight: 300;
  color: hsla(28, 18%, 83%, .55);
  line-height: 1.85;
  flex: 1
}

.as-caption-label {
  font-family: Lato, sans-serif;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--accent);
  margin-bottom: .25rem;
  margin-top: 1.5rem
}

.as-caption-title {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: hsl(28, 18%, 83%);
  margin-bottom: 1.25rem
}

.as-panel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.as-dots {
  display: flex;
  gap: .4rem;
  align-items: center
}

.as-dot {
  width: 24px;
  height: 2px;
  background: rgba(200, 180, 140, .2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all .3s
}

.as-dot.as-dot-active {
  background: #b8963e;
  width: 36px
}

.as-arrows {
  display: flex;
  gap: .4rem
}

.as-arr {
  width: 32px;
  height: 32px;
  border: 0.5px solid rgba(200, 180, 140, .25);
  background: transparent;
  color: hsl(28, 18%, 83%);
  cursor: pointer;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s
}

.as-arr:hover {
  border-color: var(--accent);
  color: var(--accent)
}

.as-photo-wrap {
  position: relative;
  overflow: hidden
}

.as-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease
}

.as-slide.as-active {
  opacity: 1
}

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

.as-slide-tag {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  background: rgba(15, 10, 4, .55);
  border-left: 2px solid var(--accent);
  padding: 4px 10px;
  font-family: Lato, sans-serif;
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--accent);
  z-index: 2
}

@media(max-width:900px) {
  .about-slideshow {
    padding: 0 6%
  }

  .as-split {
    grid-template-columns: 1fr;
    height: auto
  }

  .as-panel {
    padding: 1.75rem;
    border-right: none;
    border-bottom: 1px solid rgba(200, 180, 140, .08)
  }

  .as-photo-wrap {
    height: 280px
  }

  .as-slide {
    position: absolute
  }
}

@media(max-width:480px) {
  .as-photo-wrap {
    height: 220px
  }
}


/* ======================================================================
   HOMEPAGE: RECOGNITION / AWARDS (.recognition-modern) - CURRENT GRID VERSION
   3-column card grid with logos - currently in use
   ====================================================================== */
.recognition-modern {
  padding: 6rem 8%;
  text-align: center;
  background: #fdf8f0;
  position: relative;
  overflow: hidden
}

.recognition-modern::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -30px;
  width: 600px;
  height: 600px;
 /* background: url('./leaf-right.webp') no-repeat; */
  background-size: contain;
  opacity: 0.6
}

.recognition-modern::after {
  content: "";
  position: absolute;
  bottom: -60px;
  right: -30px;
  width: 500px;
  height: 500px;
  /* background: url('./leaf-left.webp') no-repeat;*/
  background-size: contain;
  opacity: 0.6;
  transform: scaleX(-1) scaleY(-1) rotate(10deg)
}

.recognition-modern h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 1rem 0;
  color: #222
}

.recognition-sub {
  max-width: 700px;
  margin: auto;
  color: #666;
  font-size: 0.95rem
}

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

.rec-card {
  background: #fff;
  padding: 1.8rem;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease
}

.rec-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08)
}

.rec-card img {
  height: 28px;
  margin-bottom: 1rem
}

.rec-card img[src*="TripAdvisor"] {
  height: 40px;
  width: 40px;
  border-radius: 9px;
  padding: 2px
}

.rec-card img[src*="Green Tourism"] {
  height: 44px;
  width: 44px;
  border-radius: 50%;
  padding: 2px
}

.rec-card img[src*="Sri Lanka Tourism"] {
  height: 46px;
  width: 46px;
  border-radius: 50%;
  padding: 1px;
  object-fit: contain;
  background: #fff
}

.rec-card h3 {
  font-family: Georgia, serif;
  font-size: 1.4rem;
  margin-bottom: 0.3rem
}

.rec-card h3 span {
  font-size: 0.8rem;
  color: #888
}

.rec-card p {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4caf87
}

.rec-card small {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: #777
}

@media (max-width:900px) {
  .recognition-grid-modern {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:600px) {
  .recognition-grid-modern {
    grid-template-columns: 1fr
  }
}

@media (max-width:1024px) {
  #dining {
    height: auto;
    max-height: none;
    overflow: visible;
    grid-template-columns: 1fr
  }

  .dining-image {
    height: 300px;
    min-height: 300px
  }

  .dining-image img {
    position: absolute;
    inset: 0;
    height: 100%;
    transform: scale(1)
  }

  .dining-content {
    padding: 2.5rem 6%
  }

  .dining-menu {
    grid-template-columns: 1fr 1fr
  }

  #high-tea {
    height: auto;
    max-height: none;
    overflow: visible;
    grid-template-columns: 1fr
  }

  .high-tea-image {
    height: 280px
  }

  .high-tea-image img {
    position: relative;
    width: 100%;
    height: 100%;
    transform: scale(1)
  }

  .high-tea-content {
    padding: 2.5rem 6%
  }
}

@media (max-width:1024px) {
  .lounge-split {
    grid-template-columns: 1fr;
    height: auto
  }

  .lounge-panel {
    width: 100%;
    padding: 2.5rem 6%
  }

  .lounge-right {
    flex-direction: column
  }

  .lounge-photo-wrap {
    min-height: 280px;
    height: 280px;
    position: relative
  }

  .lounge-thumbs {
    height: 80px;
    padding-right: 0;
    grid-template-columns: repeat(4, 1fr)
  }
}

@media (max-width:1024px) and (min-width:769px) {
  .nav-links {
    gap: 1.25rem
  }

  .nav-links a {
    font-size: 0.68rem
  }

  #main-nav {
    padding: 0 4%
  }
}

@media (max-width:1024px) and (min-width:769px) {
  .hero-h1 {
    font-size: clamp(2.2rem, 5vw, 3.5rem)
  }

  .hero-content {
    max-width: 600px
  }
}

@media (max-width:1024px) and (min-width:769px) {
  #booking-bar {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.5rem 6%
  }

  .booking-field {
    min-width: 160px
  }
}

@media (max-width:1024px) and (min-width:769px) {
  #about {
    gap: 3rem;
    padding: 5rem 6%
  }

  .about-image-inner {
    aspect-ratio: 4/3
  }
}

@media (max-width:1024px) and (min-width:769px) {
  .rec-score-tiles {
    grid-template-columns: 1fr 1fr;
    max-width: 100%
  }

  .rec-award-tiles {
    grid-template-columns: repeat(5, 1fr);
    max-width: 100%
  }

  .recognition-grid-modern {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media (max-width:1024px) and (min-width:769px) {}

@media (max-width:768px) {
  #main-nav {
    height: 64px;
    padding: 0 5%
  }

  .nav-logo-main {
    font-size: 0.9rem
  }

  .nav-mobile a {
    padding: 1rem 0;
    font-size: 0.85rem
  }

  .nav-mobile {
    padding: 1.5rem 6%
  }

  .hero-content {
    padding: 0 6% 7rem;
    max-width: 100%
  }

  .hero-h1 {
    font-size: clamp(1.9rem, 7.5vw, 2.8rem) !important
  }

  .hero-tagline {
    font-size: 0.9rem;
    line-height: 1.65;
    max-width: 100%
  }

  .hero-actions {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start
  }

  .hero-actions .btn-hotel-primary,
  .hero-actions .btn-hotel-ghost {
    width: auto;
    text-align: center;
    padding: 1rem 2rem
  }

  .hero-caption {
    display: none
  }

  .hero-dots {
    bottom: 1.5rem;
    right: 5%
  }

  #booking-bar {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem 6%
  }

  .booking-field {
    min-width: 100%;
    flex: none
  }

  .booking-field-promo {
    display: none
  }

  #booking-bar .btn-hotel-green {
    width: 100%;
    text-align: center;
    padding: 1rem
  }

  #announce-bar {
    font-size: 0.75rem;
    padding: 0.75rem 5%;
    line-height: 1.6
  }

  .announce-cta {
    display: block;
    margin: 0.4rem auto 0
  }

  #about {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 3.5rem 6%
  }

  .about-image-inner {
    aspect-ratio: 4/3
  }

  .about-image-inner img {
    height: 100%
  }

  .about-text blockquote {
    font-size: 1.05rem;
    padding-left: 1rem
  }

  .about-features {
    flex-direction: column;
    gap: 1.25rem
  }

  .rooms-modern {
    padding: 3rem 5%
  }

  .rooms-page .rooms-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2rem
  }

  .room-img img {
    height: 200px
  }

  #dining {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
    overflow: visible
  }

  .dining-image {
    height: 260px;
    min-height: 260px
  }

  .dining-image img {
    transform: scale(1)
  }

  .dining-content {
    padding: 2.5rem 6%
  }

  .dining-menu {
    grid-template-columns: 1fr;
    gap: 0.75rem
  }

  .dining-menu-item {
    padding: 1rem
  }

  .dining-image-badge {
    bottom: 1rem;
    left: 1rem;
    padding: 0.75rem 1rem
  }

  #high-tea {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
    overflow: visible
  }

  .high-tea-image {
    height: 240px;
    order: -1
  }

  .high-tea-image img {
    transform: scale(1);
    height: 100%
  }

  .high-tea-image::after {
    display: none
  }

  .high-tea-content {
    padding: 2.5rem 6%
  }

  .high-tea-content blockquote {
    font-size: 1.05rem
  }

  #experiences {
    padding: 4rem 6%
  }

  .experiences-grid {
    grid-template-columns: 1fr
  }

  .experience-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid hsl(28 18% 83% / 0.08)
  }

  .experience-item:last-child {
    border-bottom: none
  }

  .experiences-bg-text {
    display: none
  }

  .experiences-header {
    margin-bottom: 2rem
  }

  #spa {
    padding: 4rem 6%
  }

  .spa-layout {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .spa-image-wrap img {
    aspect-ratio: 3/2
  }

  .spa-image-accent {
    display: none
  }

  .spa-header {
    margin-bottom: 2rem
  }

  .pub-split {
    grid-template-columns: 1fr
  }

  .pub-story {
    padding: 2.5rem 6%;
    border-right: none;
    border-bottom: 1px solid rgba(200, 180, 140, 0.06)
  }

  .pub-menu-grid {
    grid-template-columns: 1fr 1fr
  }

  .pub-menu-cell {
    padding: 1.25rem 1rem
  }

  .pub-photo-strip {
    height: 220px
  }

  .pub-photo-strip .pub-photo-item {
    height: 220px
  }

  #offers {
    padding: 0
  }

  .offers-head {
    padding: 3rem 6% 1.75rem
  }

  .offers-head-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem
  }

  .offers-head-inner>p {
    text-align: left;
    max-width: 100%
  }

  .offers-row,
  .offers-row--reverse {
    grid-template-columns: 1fr;
    height: auto
  }

  .offers-row-img {
    height: 240px
  }

  .offers-row--reverse .offers-row-img {
    order: 0
  }

  .offers-row--reverse .offers-row-body {
    order: 0;
    padding-left: 6%;
    padding-right: 6%
  }

  .offers-row-body {
    padding: 2rem 6%
  }

  .offers-enhancements {
    padding: 2rem 6%
  }

  .offers-enh-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 0
  }

  .offers-enh-item:nth-child(2) {
    border-right: none
  }

  .offers-enh-item:nth-child(3) {
    padding-left: 0
  }

  .offers-voucher {
    padding: 2rem 6%;
    flex-direction: column;
    gap: 1.5rem
  }

  .offers-voucher-divider {
    display: none
  }

  .offers-voucher button {
    width: 100%
  }

  .offers-row-footer {
    flex-wrap: wrap;
    gap: 0.75rem
  }

  #recognition {
    padding: 3.5rem 6%
  }

  .recognition-modern {
    padding: 3.5rem 6%
  }

  .recognition-modern::before,
  .recognition-modern::after {
    opacity: 0.3;
    width: 280px;
    height: 280px
  }

  .recognition-grid-modern {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem
  }

  .rec-card {
    padding: 1.4rem
  }

  .rec-score-tiles {
    grid-template-columns: 1fr;
    max-width: 100%
  }

  .rec-award-tiles {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%
  }

  #testimonials {
    padding: 3.5rem 6%
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem
  }

  .testimonial-card {
    padding: 2rem
  }

  #contact {
    padding: 4rem 6%
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .form-row {
    grid-template-columns: 1fr
  }

  .contact-form button {
    width: 100%
  }

  .lounge-split {
    grid-template-columns: 1fr;
    height: auto
  }

  .lounge-panel {
    width: 100%;
    padding: 2.5rem 6%
  }

  .lounge-photo-wrap {
    min-height: 260px;
    height: 260px
  }

  .lounge-thumbs {
    height: 75px;
    padding-right: 0
  }

  .about-slideshow {
    padding: 0 6%;
    margin: 2rem 0 3rem
  }

  .as-split {
    grid-template-columns: 1fr;
    height: auto
  }

  .as-panel {
    padding: 1.75rem 6%;
    border-right: none;
    border-bottom: 1px solid rgba(200, 180, 140, .08)
  }

  .as-photo-wrap {
    height: 260px
  }

  footer {
    padding: 3rem 6%
  }

  .footer-bottom {
    text-align: center
  }

  .footer-social {
    justify-content: center
  }

  .section-padding {
    padding: 3.5rem 6%
  }

  h1,
  h2 {
    overflow-wrap: break-word;
    word-break: break-word
  }
}

@media (max-width:480px) {
  #main-nav {
    padding: 0 4%;
    height: 60px
  }

  .nav-logo-main {
    font-size: 0.85rem;
    letter-spacing: 0.06em
  }

  .nav-logo-sub {
    font-size: 0.5rem;
    letter-spacing: 0.16em
  }

  .hero-h1 {
    font-size: clamp(1.6rem, 8.5vw, 2.2rem) !important
  }

  .hero-eyebrow {
    font-size: 0.52rem
  }

  .hero-tagline {
    font-size: 0.85rem
  }

  .hero-content {
    padding: 0 5% 6rem
  }

  .about-text blockquote {
    font-size: 1rem;
    margin: 1.25rem 0
  }

  .about-year-badge {
    display: none
  }

  .dining-image {
    height: 220px;
    min-height: 220px
  }

  .dining-image-badge {
    display: none
  }

  .high-tea-image {
    height: 200px
  }

  .pub-menu-grid {
    grid-template-columns: 1fr
  }

  .pub-photo-strip {
    grid-template-columns: 1fr;
    height: auto
  }

  .pub-photo-item,
  .pub-photo-strip .pub-photo-item {
    height: 200px
  }

  .offers-row-img {
    height: 200px
  }

  .offers-enh-grid {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  .offers-enh-item {
    border-right: none;
    border-bottom: 0.5px solid rgba(184, 150, 62, 0.1);
    padding-bottom: 1rem
  }

  .offers-enh-item:last-child {
    border-bottom: none
  }

  .recognition-grid-modern {
    grid-template-columns: 1fr
  }

  .rec-award-tiles {
    grid-template-columns: 1fr 1fr
  }

  .rec-score-tile {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem
  }

  .rec-tile-sep {
    width: 48px;
    height: 0.5px
  }

  .rec-score-right {
    text-align: center
  }

  .enhancements-grid {
    grid-template-columns: 1fr
  }

  .testimonial-card {
    padding: 1.5rem
  }

  footer {
    padding: 2.5rem 5%
  }

  .lounge-thumbs {
    grid-template-columns: repeat(2, 1fr);
    height: 120px
  }

  .lounge-photo-wrap {
    min-height: 220px;
    height: 220px
  }

  .as-photo-wrap {
    height: 200px
  }

  .room-img img {
    height: 180px
  }

  .room-content {
    padding: 1.25rem
  }
}

@media (max-width:768px) {

  .btn-hotel-primary,
  .btn-hotel-outline,
  .btn-hotel-green {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center
  }

  .hero-actions .btn-hotel-primary,
  .hero-actions .btn-hotel-ghost {
    width: auto;
    display: inline-flex;
    align-self: flex-start
  }

  .nav-mobile a {
    min-height: 48px;
    display: flex;
    align-items: center
  }

  img,
  video,
  iframe,
  embed,
  object {
    max-width: 100%
  }

  table {
    overflow-x: auto;
    display: block
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
    -webkit-appearance: none
  }
}

#dining {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: hsl(18, 10%, 10%);
  height: auto;
  max-height: none;
  overflow: visible;
  align-items: stretch
}


/* ======================================================================
   DINING PAGE: FEATURE LAYOUT (.dining-f-*)
   Redesigned dining section with corner flourish
   ====================================================================== */
.dining-f-image {
  position: relative;
  overflow: hidden;
  min-height: 520px
}

.dining-f-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transition: transform 6s ease
}

.dining-f-image:hover img {
  transform: scale(1)
}

.dining-f-corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 52px 52px 0 0;
  border-color: #c9a96e transparent transparent transparent;
  z-index: 2
}

.dining-f-content {
  padding: 3.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: hsl(18, 10%, 10%)
}

.dining-f-eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #c9a96e;
  margin-bottom: 0.75rem
}

.dining-f-h2 {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  color: hsl(28, 18%, 83%);
  line-height: 1.2;
  margin-bottom: 0.9rem
}

.dining-f-ornament {
  width: 36px;
  height: 1px;
  background: #c9a96e;
  margin-bottom: 1rem
}

.dining-f-quote {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(201, 169, 110, 0.85);
  line-height: 1.7;
  border: none;
  padding: 0;
  margin-bottom: 1.5rem
}

.dining-f-menu {
  list-style: none;
  margin-bottom: 1.5rem
}

.dining-f-menu li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 0.5px solid rgba(201, 169, 110, 0.1);
  font-family: Lato, sans-serif;
  font-size: 0.82rem;
  color: rgba(232, 220, 200, 0.65);
  letter-spacing: 0.03em
}

.dining-f-menu li:last-child {
  border-bottom: none
}

.dining-f-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c9a96e;
  opacity: 0.55;
  flex-shrink: 0
}

.dining-f-hours {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  font-family: Lato, sans-serif;
  font-size: 0.78rem;
  color: rgba(232, 220, 200, 0.45)
}

.dining-f-hours-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4caf87;
  flex-shrink: 0
}

.dining-f-btns {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap
}

.dining-f-btn-gold {
  background: #c9a96e;
  color: hsl(18, 10%, 10%);
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.85rem 1.5rem;
  border: none;
  border-radius: 0;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, color 0.2s
}

.dining-f-btn-gold:hover {
  background: #b8935a;
  color: #fff
}

.dining-f-btn-ghost {
  background: transparent;
  color: hsl(28, 18%, 83%);
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.85rem 1.5rem;
  border: 0.5px solid rgba(232, 220, 200, 0.2);
  border-radius: 0;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.2s, color 0.2s
}

.dining-f-btn-ghost:hover {
  border-color: rgba(232, 220, 200, 0.5);
  color: #fff
}

@media (max-width:1024px) {
  #dining {
    grid-template-columns: 1fr
  }

  .dining-f-image {
    min-height: 320px
  }

  .dining-f-content {
    padding: 2.5rem 6%
  }
}

@media (max-width:768px) {
  .dining-f-image {
    min-height: 260px
  }

  .dining-f-content {
    padding: 2rem 6%
  }

  .dining-f-h2 {
    font-size: 1.4rem
  }

  .dining-f-corner {
    border-width: 36px 36px 0 0
  }
}


/* ======================================================================
   ROOMS: HORIZONTAL SLIDER (.rooms-slider-section)
   Draggable room slider used on homepage or rooms page
   ====================================================================== */
.rooms-slider-section {
  background: #38312E;
  padding: 5rem 6% 4rem;
  overflow: hidden
}

.rooms-slider-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 3rem
}

.rooms-slider-titleblock {
  display: flex;
  flex-direction: column;
  align-items: center
}

.rooms-slider-h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 350;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  color: #e8dcc8;
  line-height: 1.05;
  letter-spacing: -0.01em
}

.rooms-slider-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 320px;
  margin: 1.5rem auto 0
}

.rooms-slider-divider::before,
.rooms-slider-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: #b8963e;
  opacity: .55
}

.rooms-slider-divider-diamond {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  background: var(--accent);
  transform: rotate(45deg)
}

.rooms-slider-viewall {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(232, 220, 200, 0.45);
  text-decoration: none;
  margin-top: 0.75rem;
  white-space: nowrap;
  transition: color 0.2s
}

.rooms-slider-viewall:hover {
  color: #c9a96e
}

.rooms-slider-track-wrap {
  overflow: hidden;
  cursor: grab;
  user-select: none;
  position: relative
}

.rooms-slider-track-wrap:active {
  cursor: grabbing
}

.rooms-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--warm-white);
  border: 1px solid rgba(184, 150, 62, .3);
  color: var(--tudor-black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s, border-color .25s, opacity .25s;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .1)
}

.rooms-slider-arrow--prev {
  left: -22px
}

.rooms-slider-arrow--next {
  right: -22px
}

.rooms-slider-arrow:hover {
  background: #b8963e;
  color: #fff;
  border-color: #b8963e
}

.rooms-slider-arrow:disabled {
  opacity: 0.3;
  pointer-events: none
}

.rooms-slider-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.rooms-slide-card {
  flex: 0 0 calc(33.333% - 1rem);
  min-width: 0
}

.rooms-slide-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
  margin-bottom: 1.2rem
}

.rooms-slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: block
}

.rooms-slide-card:hover .rooms-slide-img img {
  transform: scale(1)
}

.rooms-slide-img-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #3d3225, #1a1510)
}

.rooms-slide-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(15, 23, 41, 0.88);
  border: 0.5px solid rgba(201, 169, 110, 0.35);
  color: #c9a96e;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 9px
}

.rooms-slide-name {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  color: #e8dcc8;
  margin-bottom: 0.6rem;
  line-height: 1.2
}

.rooms-slide-specs {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 1.2rem;
  flex-wrap: wrap
}

.rooms-slide-spec {
  font-size: 0.72rem;
  color: rgba(232, 220, 200, 0.45);
  display: flex;
  align-items: center;
  gap: 6px
}

.rooms-slide-spec::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(201, 169, 110, 0.5);
  flex-shrink: 0
}

.rooms-slide-spec:first-child::before {
  display: none
}

.rooms-slide-spec+.rooms-slide-spec {
  margin-left: 8px
}

.rooms-slide-btn {
  display: inline-block;
  border: 1px solid rgba(232, 220, 200, 0.3);
  color: #e8dcc8;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s
}

.rooms-slide-btn:hover {
  background: #c9a96e;
  border-color: #c9a96e;
  color: #0f1729
}

.rooms-slider-dots {
  display: flex;
  align-items: center;
  gap: 8px
}

.rs-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(201, 169, 110, 0.3);
  border: none;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
  padding: 0
}

.rs-dot.active {
  background: #c9a96e;
  transform: scale(1.4)
}

.rs-dot:hover {
  background: rgba(201, 169, 110, 0.6)
}

.rooms-slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2.25rem
}

.rooms-nav-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(232, 220, 200, 0.07);
  border: 1px solid rgba(201, 169, 110, 0.3);
  color: #e8dcc8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s;
  flex-shrink: 0
}

.rooms-nav-arrow:hover {
  background: #c9a96e;
  border-color: #c9a96e;
  color: #0f1729;
  transform: scale(1.08)
}

.rooms-nav-arrow:disabled {
  opacity: 0.2;
  pointer-events: none
}

@media (max-width:640px) {
  .rooms-nav-arrow {
    width: 38px;
    height: 38px
  }

  .rooms-slider-nav {
    gap: 1rem;
    margin-top: 1.75rem
  }
}

@media (max-width:1024px) {
  .rooms-slide-card {
    flex: 0 0 calc(50% - 0.75rem)
  }
}

@media (max-width:640px) {
  .rooms-slider-section {
    padding: 3.5rem 6% 3rem
  }

  .rooms-slide-card {
    flex: 0 0 85%
  }

  .rooms-slider-h2 {
    font-size: 2.2rem
  }
}

@media (max-width:380px) {
  .rooms-slider-h2 {
    font-size: 1.9rem
  }
}


/* ======================================================================
   HIGH TEA: PROGRESS RINGS (.ht-progress-section)
   Animated stat rings/bars
   ====================================================================== */
.ht-progress-section {
  background: hsl(18, 11%, 18%);
  padding: 1.5rem 4%;
  position: relative;
  overflow: hidden
}

.ht-progress-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(201, 169, 110, 0.04) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 20% 50%, rgba(0, 0, 0, 0.15) 0%, transparent 70%);
  pointer-events: none
}

.ht-progress-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 2px 1fr 2px 1fr;
  gap: 0;
  align-items: center
}

.ht-divider-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(201, 169, 110, 0.25), transparent);
  margin: 0 auto
}

.ht-stat {
  padding: 0 2.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem
}

.ht-stat-ring {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0
}

.ht-stat-ring svg {
  width: 80px;
  height: 80px;
  transform: rotate(-90deg)
}

.ht-ring-bg {
  fill: none;
  stroke: rgba(201, 169, 110, 0.1);
  stroke-width: 2
}

.ht-ring-fill {
  fill: none;
  stroke: #c9a96e;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.ht-ring-fill.animated {
  stroke-dashoffset: var(--offset)
}

.ht-stat-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 1.15rem;
  color: #c9a96e;
  font-weight: 400
}

.ht-stat-label {
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, 0.55);
  margin-bottom: 0.2rem
}

.ht-stat-desc {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.88rem;
  color: rgba(245, 240, 232, 0.5);
  line-height: 1.5
}

.ht-bar-wrap {
  width: 100%;
  max-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem
}

.ht-bar-track {
  height: 1px;
  background: rgba(201, 169, 110, 0.1);
  position: relative;
  overflow: hidden
}

.ht-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #c9a96e;
  width: 0%;
  transition: width 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.ht-bar-fill.animated {
  width: var(--width)
}

.ht-bar-pct {
  font-family: Georgia, serif;
  font-size: 0.65rem;
  color: rgba(201, 169, 110, 0.5);
  text-align: right
}

@media (max-width:900px) {
  .ht-progress-inner {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .ht-divider-line {
    display: none
  }

  .ht-stat {
    padding: 0
  }
}


/* ======================================================================
   HIGH TEA: NEW FULL-BLEED SECTION (#high-tea-new)
   Replaces old #high-tea layout
   ====================================================================== */
#high-tea-new {
  position: relative;
  height: 88vh;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 0 88vh
}

.ht-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.ht-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transition: transform 8s ease;
  display: block
}

#high-tea-new:hover .ht-photo img {
  transform: scale(1)
}

.ht-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(30, 22, 16, 0.92) 0%, rgba(30, 22, 16, 0.75) 45%, rgba(30, 22, 16, 0.15) 70%, transparent 100%);
  z-index: 1
}

.ht-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 6rem;
  max-width: 620px
}

.ht-eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #c9a96e;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem
}

.ht-eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: #c9a96e
}

.ht-heading {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  color: #f5f0e8;
  line-height: 1.05;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em
}

.ht-rule {
  width: 40px;
  height: 1px;
  background: #c9a96e;
  margin-bottom: 1.75rem;
  opacity: 0.6
}

.ht-features {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 2.5rem
}

.ht-feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem
}

.ht-feature-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: rgba(201, 169, 110, 0.12);
  border: 1px solid rgba(201, 169, 110, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px
}

.ht-feature-icon svg {
  width: 16px;
  height: 16px;
  stroke: #c9a96e;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ht-feature-text {
  font-family: Lato, sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(245, 240, 232, 0.65);
  line-height: 1.5
}

.ht-feature-text strong {
  display: block;
  color: #f5f0e8;
  font-weight: 500;
  margin-bottom: 0.15rem
}

.ht-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: #c9a96e;
  color: hsl(18, 11%, 18%);
  font-family: Lato, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.2s, color 0.2s
}

.ht-cta:hover {
  background: #b8935a;
  color: #fff
}

.ht-cta svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round
}

@media (max-width:1024px) {
  #high-tea-new {
    height: auto;
    min-height: 80vh
  }

  .ht-content {
    padding: 5rem 6% 4rem;
    position: relative;
    max-width: 100%
  }

  .ht-photo {
    position: absolute
  }

  .ht-photo-overlay {
    background: linear-gradient(to bottom, rgba(30, 22, 16, 0.75) 0%, rgba(30, 22, 16, 0.88) 60%, rgba(30, 22, 16, 0.95) 100%)
  }
}

@media (max-width:640px) {
  #high-tea-new {
    min-height: 100vh
  }

  .ht-heading {
    font-size: 2.6rem
  }

  .ht-content {
    padding: 6rem 6% 4rem
  }
}

:root {
  --ink: #0e0b07;
  --parchment: #f7f3ec;
  --warm-white: #faf8f4;
  --gold: #b8963e;
  --gold-light: #d4ae62;
  --mist: #e8e2d8;
  --charcoal: #2a2318;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Lato', sans-serif
}


/* ======================================================================
   ABOUT PAGE: HERO (.ab-hero)
   about.php page hero with scroll cue
   ====================================================================== */
.ab-hero {
  position: relative;
  height: 30svh;
  min-height: 460px;
  max-height: 500px;
  overflow: hidden;
  display: flex;
  align-items: flex-end
}

.ab-hero-bg {
  position: absolute;
  inset: 0;
  background: #1a1208 url('/assets/Hotel Glen.webp') center / cover no-repeat;
  transform: scale(1.06);
  animation: heroScale 8s var(--ease-out) forwards
}

@keyframes heroScale {
  from {
    transform: scale(1.06)
  }

  to {
    transform: scale(1.00)
  }
}

.ab-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 11, 7, .88) 0%, rgba(14, 11, 7, .30) 55%, rgba(14, 11, 7, .10) 100%)
}

.ab-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 8% 2rem;
  width: 100%;
  animation: heroUp .9s .3s var(--ease-out) both
}

@keyframes heroUp {
  from {
    opacity: 0;
    transform: translateY(28px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.ab-eyebrow {
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: var(--gold);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: .75rem
}

.ab-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0
}

.ab-hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  color: #f0e8d8;
  line-height: 1.0;
  max-width: 720px;
  margin-bottom: 1.5rem
}

.ab-hero-meta {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  color: hsla(28, 18%, 80%, .65);
  letter-spacing: .06em;
  border-left: 1px solid rgba(184, 150, 62, .35);
  padding-left: 1rem;
  max-width: 400px;
  line-height: 1.7
}

.ab-scroll-cue {
  position: absolute;
  bottom: 2rem;
  right: 8%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: rgba(240, 232, 216, .3);
  font-family: var(--sans);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  animation: heroUp .9s .7s var(--ease-out) both
}

.ab-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(184, 150, 62, .5), transparent);
  animation: scrollLine 2s 1.5s ease-in-out infinite
}

@keyframes scrollLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
    opacity: 1
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1
  }

  51% {
    transform: scaleY(1);
    transform-origin: bottom
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: .3
  }
}


/* ======================================================================
   ABOUT PAGE: INTRO + STATS BAND (.ab-intro / .ab-stats-band)
   ====================================================================== */
.ab-body {
  background: var(--warm-white)
}

.ab-section {
  padding: 3.5rem 8%
}

.ab-section--dark {
  background: var(--charcoal)
}

.ab-section--tinted {
  background: var(--parchment)
}

.ab-label {
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: 1rem
}

.ab-rule {
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin: 1.5rem 0
}

.ab-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center
}

.ab-intro-img-wrap {
  position: relative
}

.ab-intro-img-wrap img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
  filter: saturate(.9) contrast(1.02)
}

.ab-intro-badge {
  position: absolute;
  bottom: -1.25rem;
  left: -1.25rem;
  background: var(--charcoal);
  padding: .9rem 1.25rem;
  text-align: center;
  border-top: 2px solid var(--gold)
}

.ab-intro-badge-num {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--gold-light);
  line-height: 1.1;
  display: block
}

.ab-intro-badge-lbl {
  font-family: var(--sans);
  font-size: .48rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, .45);
  margin-top: .3rem;
  display: block
}

.ab-intro-text h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 1rem
}

.ab-intro-text h2 em {
  font-style: italic;
  color: #5a4a2a
}

.ab-intro-text p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .93rem;
  color: #4a4033;
  line-height: 1.95;
  margin-bottom: 1.1rem
}

.ab-stats-wrap {
  border-left: 2px solid var(--gold);
  border-right: 2px solid var(--gold)
}

.ab-stats-band {
  background: var(--ink);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold)
}

.ab-stat {
  padding: 1.1rem 2rem;
  border-right: 1px solid rgba(184, 150, 62, .35);
  position: relative;
  text-align: center
}

.ab-stat:last-child {
  border-right: none
}

.ab-stat-num {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--gold-light);
  line-height: 1;
  display: block;
  margin-bottom: .3rem
}

.ab-stat-num sup {
  font-size: .9rem;
  vertical-align: super
}

.ab-stat-lbl {
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--gold);
  margin-bottom: .3rem
}

.ab-stat-desc {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 300;
  color: #FFFFFF
}


/* ======================================================================
   ABOUT PAGE: STORY SPLIT PANELS (.ab-story-*)
   Dark panel + photo split, includes many now-unused .ab-story-* utility classes
   ====================================================================== */
.ab-story-section {
  position: relative;
  padding: 0 !important;
  overflow: hidden
}

.ab-story-intro {
  text-align: center;
  padding: 5rem 8% 4rem;
  border-bottom: 1px solid rgba(184, 150, 62, .15);
  background: var(--charcoal)
}

.ab-story-intro .ab-label {
  color: var(--gold);
  margin-bottom: 1.2rem
}

.ab-story-intro-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  color: rgba(240, 232, 216, .75);
  line-height: 1.5;
  max-width: 760px;
  margin: 0 auto
}

.ab-story-intro-quote em {
  color: var(--gold-light);
  font-style: normal
}

.ab-story-split {
  display: grid;
  grid-template-columns: 45% 55%;
  height: calc(100vh - 80px);
  max-height: 860px;
  min-height: 580px;
  align-items: stretch
}

.ab-story-dark-panel {
  background: #0e0b07;
  padding: 3.5rem 5% 3rem 6%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden
}

.ab-story-eyebrow {
  margin-bottom: 1.2rem
}

.ab-story-eyebrow span {
  font-family: var(--sans);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #b8963e
}

.ab-story-heading {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  color: #f0e8d8;
  line-height: .95;
  margin: 0 0 .4rem;
  letter-spacing: -.01em
}

.ab-story-heading em {
  font-style: italic;
  color: #b8963e;
  display: block
}

.ab-story-rule {
  width: 40px;
  height: 1px;
  background: #b8963e;
  margin: 1rem 0 1.25rem;
  flex-shrink: 0
}

.ab-story-para {
  font-family: var(--sans);
  font-size: clamp(.80rem, 1.3vh, .88rem);
  font-weight: 300;
  color: rgba(240, 232, 216, .62);
  line-height: 2;
  margin: 0 0 1.25rem
}

.ab-story-quote {
  border-left: 2px solid rgba(184, 150, 62, .4);
  padding: .2rem 0 .2rem 1.25rem;
  margin: 0 0 1.75rem;
  border-radius: 0;
  flex-shrink: 0
}

.ab-story-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(.9rem, 1vw, 1.05rem);
  color: rgba(240, 232, 216, .78);
  line-height: 1.85;
  margin: 0
}

.ab-story-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .65rem;
  margin-top: auto;
  flex-shrink: 0
}

.ab-story-stat {
  padding: .85rem 1rem;
  border: 0.5px solid rgba(184, 150, 62, .2);
  background: rgba(184, 150, 62, .05)
}

.ab-story-stat-num {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vh, 1.9rem);
  font-weight: 400;
  color: #b8963e;
  line-height: 1
}

.ab-story-stat-num sup {
  font-size: .8rem
}

.ab-story-stat-label {
  font-family: var(--sans);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, .38);
  margin-top: .3rem
}

.ab-story-img-panel {
  position: relative;
  overflow: hidden
}

.ab-story-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.78) saturate(1.05);
  transform: scale(1.04);
  transition: transform 2.4s cubic-bezier(.16, 1, .3, 1)
}

.ab-story-img-panel:hover .ab-story-photo {
  transform: scale(1.0)
}

.ab-story-img-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(8, 6, 4, .85) 0%, rgba(8, 6, 4, .3) 25%, transparent 55%);
  pointer-events: none;
  z-index: 1
}

.ab-story-img-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 6, 4, .65) 0%, transparent 45%);
  pointer-events: none;
  z-index: 1
}

.ab-story-img-overlay {
  position: absolute;
  bottom: 2.5rem;
  right: 2.5rem;
  z-index: 2;
  text-align: right
}

.ab-story-img-tag {
  font-family: var(--sans);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #EFBF04;
  margin-bottom: .5rem
}

.ab-story-img-title {
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: #EFBF04;
  line-height: 1.25
}

@media (max-width:900px) {
  .ab-story-split {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none
  }

  .ab-story-img-panel {
    min-height: 280px;
    order: -1
  }

  .ab-story-dark-panel {
    padding: 2.5rem 5%;
    order: 1
  }

  .ab-story-img-overlay {
    display: none
  }

  .ab-story-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    margin-top: 1.5rem
  }

  .ab-story-stat {
    padding: .75rem .85rem
  }

  .ab-story-stat-num {
    font-size: clamp(1.4rem, 5vw, 1.8rem)
  }

  .ab-story-heading {
    font-size: clamp(1.8rem, 7vw, 2.8rem)
  }

  .ab-story-para {
    font-size: .82rem
  }

  .ab-story-quote p {
    font-size: .85rem
  }

  .ab-story-rule {
    margin: .75rem 0 1rem
  }
}

@media (max-width:560px) {
  .ab-story-dark-panel {
    padding: 2rem 5%
  }

  .ab-story-heading {
    font-size: clamp(1.6rem, 8vw, 2.2rem)
  }

  .ab-story-eyebrow span {
    font-size: .48rem
  }
}

.ab-story-ghost {
  display: none
}

.ab-story-cols {
  display: none
}

.ab-story-img-col {
  display: none
}

.ab-story-text-col {
  display: none
}

.ab-story-watermark {
  display: none
}

.ab-story-photo-credit {
  display: none
}

.ab-story-aside {
  display: none
}

.ab-story-cards {
  display: none
}

.ab-story-right {
  display: none
}

.ab-story-right-strip {
  display: none
}

.ab-story-cols {
  display: none
}

.ab-story-img-col {
  display: none
}

.ab-story-text-col {
  display: none
}

.ab-story-watermark {
  display: none
}

.ab-story-photo-credit {
  display: none
}

.ab-story-aside {
  display: none
}

.ab-story-cards {
  display: none
}

.ab-story-right {
  display: none
}

.ab-story-right-strip {
  display: none
}

.ab-story-cols {
  display: none
}

.ab-story-img-col {
  display: none
}

.ab-story-text-col {
  display: none
}

.ab-story-watermark {
  display: none
}

.ab-story-photo-credit {
  display: none
}

.ab-story-aside {
  display: none
}

.ab-story-cols {
  display: none
}

.ab-story-img-col {
  display: none
}

.ab-story-text-col {
  display: none
}

.ab-story-watermark {
  display: none
}

.ab-story-photo-credit {
  display: none
}

.ab-story-aside {
  display: none
}

.ab-story-cols {
  display: none
}

.ab-story-img-col {
  display: none
}

.ab-story-text-col {
  display: none
}

.ab-story-watermark {
  display: none
}

.ab-story-photo-credit {
  display: none
}

.ab-story-aside {
  display: none
}

.ab-story-cols {
  display: none
}

.ab-story-img-col {
  display: none
}

.ab-story-text-col {
  display: none
}

.ab-story-watermark {
  display: none
}

.ab-story-photo-credit {
  display: none
}

.ab-story-aside {
  display: none
}


/* ======================================================================
   ABOUT PAGE: PHOTO GALLERY (.ab-gallery)
   Fullscreen gallery with side caption panel
   ====================================================================== */
.ab-gallery {
  position: relative;
  height: 640px;
  overflow: hidden;
  background: var(--charcoal)
}

.ab-gallery-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease
}

.ab-gallery-slide.active {
  opacity: 1
}

.ab-gallery-slide.active img {
  animation: kbZoom 7s ease-out forwards
}

@keyframes kbZoom {
  from {
    transform: scale(1.07)
  }

  to {
    transform: scale(1.00)
  }
}

.ab-gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.82) brightness(.82);
  transform-origin: center center
}

.ab-gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(14, 11, 7, .88) 0%, rgba(14, 11, 7, .15) 42%), linear-gradient(to top, rgba(14, 11, 7, .55) 0%, transparent 45%);
  z-index: 1
}

.ab-gallery-ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: stretch;
  pointer-events: none
}

.ab-gallery-ghost-num {
  position: absolute;
  bottom: -1rem;
  left: 6%;
  font-family: var(--serif);
  font-size: clamp(7rem, 16vw, 13rem);
  font-weight: 300;
  color: rgba(184, 150, 62, .07);
  line-height: 1;
  user-select: none;
  pointer-events: none;
  transition: opacity .6s;
  z-index: 2
}

.ab-gallery-panel {
  margin-left: auto;
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3rem 3rem 3rem 2.5rem;
  pointer-events: all;
  border-left: 1px solid rgba(184, 150, 62, .18);
  background: linear-gradient(to right, transparent, rgba(14, 11, 7, .55))
}

.ab-gallery-caption-lbl {
  font-family: var(--sans);
  font-size: .54rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: .7rem
}

.ab-gallery-caption-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: #f0e8d8;
  line-height: 1.45;
  margin-bottom: 2.5rem
}

.ab-gallery-progress {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, .12);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden
}

.ab-gallery-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--gold);
  transition: width .4s var(--ease-out)
}

.ab-gallery-count {
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(240, 232, 216, .3);
  margin-bottom: 1.2rem
}

.ab-gallery-count em {
  font-style: normal;
  font-size: .9rem;
  color: rgba(240, 232, 216, .8);
  margin-right: .15em
}

.ab-gallery-btns {
  display: flex;
  gap: .6rem
}

.ab-gallery-btn {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(200, 180, 140, .25);
  background: rgba(14, 11, 7, .35);
  color: #f0e8d8;
  cursor: pointer;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s;
  backdrop-filter: blur(6px);
  flex-shrink: 0
}

.ab-gallery-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(14, 11, 7, .6)
}

.ab-gallery-dots {
  position: absolute;
  bottom: 2.75rem;
  left: 6%;
  z-index: 4;
  display: flex;
  gap: .55rem;
  align-items: center;
  pointer-events: all
}

.ab-gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid rgba(184, 150, 62, .5);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all .3s
}

.ab-gallery-dot.active {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.3)
}


/* ======================================================================
   ABOUT PAGE: FEATURES STRIP (.ab-features-grid)
   ====================================================================== */
.ab-features-inner {
  text-align: center;
  margin-bottom: 2.5rem
}

.ab-features-inner h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  color: var(--ink);
  margin-bottom: .4rem;
  line-height: 1.2
}

.ab-features-inner h2 em {
  font-style: italic;
  color: #7a6540
}

.ab-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--mist)
}

.ab-feat {
  padding: 3rem 2rem;
  border-right: 1px solid var(--mist);
  text-align: center;
  position: relative;
  transition: background .3s
}

.ab-feat:last-child {
  border-right: none
}

.ab-feat::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  height: 2px;
  width: 0;
  background: var(--gold);
  transition: width .35s var(--ease-out)
}

.ab-feat:hover {
  background: var(--parchment)
}

.ab-feat:hover::after {
  width: 48px
}

.ab-feat-icon {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(184, 150, 62, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem
}

.ab-feat-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ab-feat h4 {
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink);
  margin-bottom: .65rem
}

.ab-feat p {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 300;
  color: #5a5040;
  line-height: 1.8
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out)
}

.reveal.in {
  opacity: 1;
  transform: none
}

@media (max-width:960px) {
  .ab-intro {
    grid-template-columns: 1fr;
    gap: 3rem
  }

  .ab-intro-badge {
    left: auto;
    right: 1rem;
    bottom: -1.5rem
  }

  .ab-intro-img-wrap img {
    height: 380px
  }

  .ab-stats-band {
    grid-template-columns: 1fr 1fr
  }

  .ab-stat:nth-child(2) {
    border-right: none
  }

  .ab-stat:nth-child(3) {
    border-right: 1px solid rgba(184, 150, 62, .35);
    border-left: 1px solid rgba(184, 150, 62, .35)
  }

  .ab-stat:nth-child(4) {
    border-right: 1px solid rgba(184, 150, 62, .35)
  }

  .ab-story-cols {
    min-height: 560px
  }

  .ab-story-text-col {
    width: 70%;
    padding: 4rem 6%
  }

  .ab-story-img-col::after {
    background: linear-gradient(to right, rgba(10, 8, 5, .98) 0%, rgba(10, 8, 5, .88) 40%, rgba(10, 8, 5, .55) 70%, transparent 100%), linear-gradient(to top, rgba(10, 8, 5, .5) 0%, transparent 40%)
  }

  .ab-features-grid {
    grid-template-columns: 1fr 1fr
  }

  .ab-feat:nth-child(2) {
    border-right: none
  }

  .ab-feat:nth-child(3) {
    border-right: 1px solid var(--mist)
  }

  .ab-feat:nth-child(4) {
    border-right: none
  }

  .ab-gallery {
    height: 480px
  }

  .ab-gallery-panel {
    width: 230px;
    padding: 2rem 1.75rem
  }
}

@media (max-width:580px) {
  .ab-section {
    padding: 4rem 6%
  }

  .ab-stats-band {
    grid-template-columns: 1fr 1fr
  }

  .ab-gallery {
    height: 420px
  }

  .ab-gallery-panel {
    width: 190px;
    padding: 1.5rem 1.25rem
  }

  .ab-gallery-caption-title {
    font-size: 1.05rem
  }

  .ab-gallery-ghost-num {
    font-size: 6rem
  }

  .ab-features-grid {
    grid-template-columns: 1fr 1fr
  }

  .ab-hero h1 {
    font-size: 2.2rem
  }

  .ab-intro-img-wrap img {
    height: 280px
  }

  .ab-story-cols {
    min-height: auto
  }

  .ab-story-text-col {
    width: 100%;
    padding: 4rem 5% 5rem
  }

  .ab-story-ghost {
    display: none
  }

  .ab-story-photo-credit {
    display: none
  }

  .ab-story-img-col::after {
    background: linear-gradient(to right, rgba(10, 8, 5, .98) 0%, rgba(10, 8, 5, .95) 100%)
  }
}

@media (max-width:480px) {
  .ab-section {
    padding: 3rem 5%
  }

  .ab-hero {
    min-height: 320px;
    max-height: none
  }

  .ab-hero h1 {
    font-size: clamp(1.6rem, 8vw, 2rem);
    line-height: 1.15
  }

  .ab-hero-meta {
    font-size: 0.85rem
  }

  .ab-gallery {
    height: 340px
  }

  .ab-gallery-panel {
    width: 160px;
    padding: 1.25rem 1rem
  }

  .ab-gallery-ghost-num {
    font-size: 4rem
  }

  .ab-stats-band {
    grid-template-columns: 1fr 1fr
  }

  .ab-features-grid {
    grid-template-columns: 1fr
  }

  .ab-intro-img-wrap {
    height: 240px
  }

  .ab-intro-img-wrap img {
    height: 240px;
    object-fit: cover
  }

  .about-slideshow {
    padding: 0 5%;
    margin: 1.5rem 0 2.5rem
  }
}


/* ======================================================================
   ABOUT PAGE: STATS BAND (REDESIGNED) (.ab-stats-new)
   Replaces earlier .ab-stats-band
   ====================================================================== */
.ab-stats-new {
  background: #0e0b07;
  border: 0.5px solid rgba(184, 150, 62, .25);
  margin: 0
}

.ab-stats-new-inner {
  display: flex;
  align-items: stretch
}

.ab-stat-new {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .35rem 1rem .35rem
}

.ab-stat-new-div {
  width: 1px;
  background: rgba(184, 150, 62, .2);
  flex-shrink: 0;
  margin: .35rem 0
}

.ab-stat-new-icon {
  height: 16px;
  margin-bottom: .25rem;
  display: flex;
  align-items: center;
  justify-content: center
}

.ab-stat-new-icon svg {
  max-height: 16px;
  width: auto
}

.ab-stat-new-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: #b8963e;
  line-height: 1;
  margin-bottom: .14rem;
  letter-spacing: -.01em
}

.ab-stat-new-num sup {
  font-size: .6em;
  vertical-align: super
}

.ab-stat-new-lbl {
  font-family: Lato, sans-serif;
  font-size: .42rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(184, 150, 62, .7);
  margin-bottom: .14rem
}

.ab-stat-new-desc {
  font-family: Lato, sans-serif;
  font-size: .6rem;
  font-weight: 300;
  color: rgba(240, 232, 216, .45)
}

.ab-stat-new-orn {
  font-size: .45rem;
  color: rgba(184, 150, 62, .3);
  letter-spacing: .1em;
  margin-top: .2rem
}

.ab-story-intro {
  display: none
}

.ab-story-intro .ab-label {
  position: relative;
  z-index: 2;
  color: #b8963e;
  margin-bottom: 1rem;
  font-size: .58rem;
  letter-spacing: .38em
}

.ab-story-intro-ornament {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: .5rem 0
}

.ab-story-intro-ornament svg {
  width: 110px;
  height: 22px
}

.ab-story-intro-quote {
  position: relative;
  z-index: 2;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  color: rgba(240, 232, 216, .9);
  line-height: 1.5;
  max-width: 820px;
  margin: 0 auto
}

.ab-story-intro-quote em {
  color: #b8963e;
  font-style: italic
}

@media (max-width:768px) {
  .ab-stats-new-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto
  }

  .ab-stat-new-div {
    display: none
  }

  .ab-stat-new {
    padding: 1.25rem 1rem 1rem;
    border-bottom: 0.5px solid rgba(184, 150, 62, .15)
  }

  .ab-stat-new:nth-child(4),
  .ab-stat-new:nth-child(8) {
    border-left: 0.5px solid rgba(184, 150, 62, .15)
  }

  .ab-stat-new:nth-child(6),
  .ab-stat-new:nth-child(8) {
    border-bottom: none
  }

  .ab-stat-new-num {
    font-size: clamp(1.6rem, 7vw, 2.4rem)
  }

  .ab-story-intro {
    display: none
  }
}

@media (max-width:480px) {
  .ab-stat-new {
    padding: 1rem .75rem .85rem
  }

  .ab-stat-new-icon {
    height: 28px
  }

  .ab-stat-new-num {
    font-size: clamp(1.4rem, 6vw, 2rem)
  }

  .ab-stat-new-desc {
    font-size: .68rem
  }
}

:root {
  --gold: #c9a96e;
  --gold-light: #e8d5b0;
  --dark: #0e0c09;
  --dark-mid: #1c1814;
  --text-body: #4a4540;
  --text-muted: #857f78;
  --warm-mid: #ede8e0
}


/* ======================================================================
   SHARED: GENERIC PAGE HERO (.page-hero)
   Used across rooms/dining/spa/pub/offers/contact sub-pages
   ====================================================================== */
.page-hero {
  position: relative;
  min-height: 60svh;
  display: grid;
  place-items: end start;
  overflow: hidden;
  background: var(--dark)
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  background: #1a1208 url('/assets/room.webp') center/cover no-repeat
}

.page-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(14, 12, 9, 0.25) 0%, rgba(14, 12, 9, 0.15) 40%, rgba(14, 12, 9, 0.72) 75%, rgba(14, 12, 9, 0.92) 100%)
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  padding: 6rem 8% 5rem;
  max-width: 760px
}

.page-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: .56rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem
}

.page-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  opacity: .6
}

.page-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(3rem, 6vw, 5.5rem);
  color: var(--warm-white);
  line-height: 1.08;
  margin-bottom: 1.75rem;
  letter-spacing: -.01em
}

.page-hero p {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: .88rem;
  color: rgba(247, 244, 239, .65);
  line-height: 1.85;
  max-width: 440px
}

.hero-scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  right: 8%;
  z-index: 2;
  font-family: 'DM Sans', sans-serif;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, .55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  writing-mode: vertical-rl
}

.hero-scroll-hint::after {
  content: '';
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollLine 2s ease-in-out infinite
}

@keyframes scrollLine {

  0%,
  100% {
    opacity: .4;
    transform: scaleY(1)
  }

  50% {
    opacity: 1;
    transform: scaleY(.6)
  }
}

.breadcrumb {
  position: absolute;
  top: 2rem;
  left: 8%;
  z-index: 3;
  font-family: 'DM Sans', sans-serif;
  font-size: .65rem;
  letter-spacing: .12em;
  color: rgba(247, 244, 239, .3)
}

.breadcrumb a {
  color: rgba(247, 244, 239, .35);
  text-decoration: none
}

.breadcrumb a:hover {
  color: var(--gold)
}

.breadcrumb span {
  margin: 0 .6em;
  opacity: .4
}


/* ======================================================================
   ROOMS PAGE: COUNT STRIP + AMENITIES (.rooms-count-strip / .amenities-*)
   ====================================================================== */
.rooms-count-strip {
  background: var(--dark);
  color: var(--warm-white);
  padding: 1.0rem 2%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  border-top: 1px solid rgba(201, 169, 110, .25);
  border-bottom: 1px solid rgba(201, 169, 110, .25)
}

.count-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem
}

.count-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  font-weight: 300;
  font-style: italic;
  color: var(--gold);
  line-height: 1
}

.count-label {
  font-family: 'DM Sans', sans-serif;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, .35);
  text-align: center
}

.count-divider {
  width: 1px;
  height: 40px;
  background: rgba(201, 169, 110, .2);
  flex-shrink: 0
}

.amenities-section {
  background: #fff;
  padding: 4rem 8% 4.5rem;
  border-bottom: 1px solid rgba(14, 12, 9, .07)
}

.amenities-heading {
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #1a1612;
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  gap: 1.5rem
}

.amenities-heading::before,
.amenities-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(14, 12, 9, .12)
}

.amenities-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  row-gap: 2.5rem
}

.amenity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 0 1rem;
  border-left: 1px solid rgba(14, 12, 9, .08);
  cursor: default;
  transition: opacity .2s
}

.amenity-item:first-child {
  border-left: none
}

.amenity-item:nth-child(7) {
  border-left: none
}

.amenity-item:nth-child(13) {
  border-left: none
}

.amenity-item svg {
  width: 28px;
  height: 28px;
  stroke: #9aaa9a;
  stroke-width: 1.2;
  fill: none;
  flex-shrink: 0;
  transition: stroke .2s
}

.amenity-item:hover svg {
  stroke: #c9a96e
}

.amenity-item-name {
  font-family: 'DM Sans', Lato, sans-serif;
  font-size: .78rem;
  font-weight: 400;
  color: #3a3530;
  text-align: center;
  line-height: 1.35
}

.amenity-upon-request {
  display: block;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #4caf87;
  margin-top: 3px
}

@media (max-width:1024px) {
  .amenities-grid {
    grid-template-columns: repeat(4, 1fr)
  }

  .amenity-item:nth-child(5) {
    border-left: none
  }

  .amenity-item:nth-child(9) {
    border-left: none
  }
}

@media (max-width:640px) {
  .amenities-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 2rem
  }

  .amenity-item:nth-child(4) {
    border-left: none
  }

  .amenity-item:nth-child(7) {
    border-left: none
  }

  .amenity-item:nth-child(10) {
    border-left: none
  }

  .amenity-item svg {
    width: 24px;
    height: 24px
  }

  .amenity-item-name {
    font-size: .72rem
  }

  .amenities-section {
    padding: 3rem 6% 3.5rem
  }
}

@media (max-width:768px) {
  .amenity-pill {
    font-size: .82rem;
    padding: .6rem .9rem;
    gap: .5rem;
    white-space: normal
  }
}


/* ======================================================================
   ROOMS PAGE: ROOM CARD SECTIONS (.room-section / .room-info)
   Full room detail blocks with lamp decoration, image slider
   ====================================================================== */
.rooms-body {
  background: #fff
}

.room-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
  position: relative;
  border-bottom: 1px solid rgba(14, 12, 9, .06);
  overflow: hidden;
  background: #fdfbf8
}

.room-section.flip {
  grid-template-columns: 1fr 1fr
}

.room-section.flip .room-img {
  order: 2
}

.room-section.flip .room-info {
  order: 1
}

/* Decorative lamp/sign graphic, absolutely positioned at the outer edge
   of the info column so it never competes with the text for centering */
.room-lamp {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1rem;
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1
}

.room-section.flip .room-lamp {
  right: auto;
  left: 1rem
}

.room-lamp img {
  width: 100%;
  height: auto;
  max-height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(14, 12, 9, .14))
}

.room-img {
  position: relative;
  overflow: hidden;
  background: #1a1510
}

.room-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(.25, .46, .45, .94)
}

.room-section:hover .room-img img {
  transform: scale(1.04)
}

.room-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 12, 9, .4) 0%, transparent 60%);
  z-index: 1
}

.room-img-counter {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 3;
  background: rgba(14, 12, 9, .65);
  color: #e8dcc8;
  font-family: 'DM Sans', sans-serif;
  font-size: .65rem;
  letter-spacing: .1em;
  padding: .35rem .8rem;
  border-radius: 2px
}

.room-img-slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.room-img-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s ease
}

.room-img-slide.active {
  opacity: 1
}

.room-img-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(.25, .46, .45, .94)
}

.room-img-slide.active img {
  transform: scale(1.04)
}

.room-img-arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 4;
  pointer-events: none
}

.room-img-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 255.255);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  transition: background .2s, border-color .2s;
  flex-shrink: 0
}

.room-img-arrow:hover {
  background: rgba(201, 169, 110, 0.85);
  border-color: #c9a96e
}

.room-img-arrow svg {
  width: 16px;
  height: 16px;
  stroke: #000000;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s
}

.room-img-arrow:hover svg {
  stroke: #1a1510
}

.room-img-cat {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(14, 12, 9, .75);
  color: #c9a96e;
  font-family: 'DM Sans', sans-serif;
  font-size: .52rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  padding: .55rem 1.1rem
}

.room-info {
  background: #fdfbf8;
  padding: 2rem 13rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-left: 1px solid rgba(14, 12, 9, .06);
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none
}

.room-info::-webkit-scrollbar {
  display: none
}

.room-section.flip .room-info {
  border-left: none;
  border-right: 1px solid rgba(14, 12, 9, .06);
  padding: 2rem 3rem 2rem 13rem
}

.room-info-inner {
  max-width: 460px;
  overflow: visible;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center
}

.room-section.flip .room-info-inner {
  margin-left: auto;
  margin-right: auto
}

.room-cat {
  font-family: 'DM Sans', Lato, sans-serif;
  font-size: 12px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: #b8963e;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px
}

.room-cat::before,
.room-cat::after {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(to var(--dir, right), transparent, #b8963e)
}

.room-cat::before {
  --dir: left
}

.room-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: 34px !important;
  color: #0e2616;
  line-height: 1.15;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: .02em
}

.room-name-divider {
  width: 56px;
  height: 10px;
  margin: 0 auto 22px;
  opacity: .85
}

.room-desc {
  font-family: 'DM Sans', Lato, sans-serif;
  font-weight: 300;
  font-size: 15px !important;
  color: #3a3228;
  line-height: 1.75;
  margin-bottom: 22px
}

.room-specs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  margin-bottom: 26px;
  max-width: 100%
}

.room-spec {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', Lato, sans-serif;
  font-size: 14px !important;
  font-weight: 500;
  color: #1a1510;
  border: 1px solid rgba(184, 150, 62, .35);
  border-radius: 999px;
  background: #fff;
  padding: .85rem 1.4rem;
  margin: 0;
  white-space: nowrap
}

.room-spec-icon {
  width: 22px;
  height: 22px;
  stroke: #c9a96e;
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0
}

.room-extras {
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px
}

.room-extra {
  font-family: 'DM Sans', Lato, sans-serif;
  font-size: 13px !important;
  font-weight: 400;
  color: #3a3228;
  display: flex;
  align-items: center;
  gap: 10px
}

.room-extra::before {
  content: '';
  width: 14px;
  height: 1px;
  background: #c9a96e;
  opacity: .6;
  flex-shrink: 0
}

/* Compact modifier: for room cards with denser content (long description,
   3 specs, multiple extras) so everything still fits one screen */
.room-info-inner.is-compact .room-cat {
  margin-bottom: 8px
}

.room-info-inner.is-compact .room-name {
  font-size: 30px !important;
  margin-bottom: 8px
}

.room-info-inner.is-compact .room-name-divider {
  margin: 0 auto 14px
}

.room-info-inner.is-compact .room-desc {
  font-size: 14px !important;
  line-height: 1.55;
  margin-bottom: 14px
}

.room-info-inner.is-compact .room-specs {
  margin-bottom: 14px
}

.room-info-inner.is-compact .room-spec {
  padding: .6rem 1.1rem;
  font-size: 13px !important
}

.room-info-inner.is-compact .room-extras {
  margin-bottom: 14px;
  gap: 4px
}

.room-info-inner.is-compact .room-cta {
  padding: .65rem 1.8rem
}

.room-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: center;
  font-family: 'DM Sans', Lato, sans-serif;
  font-size: 13px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: #e9d9ad;
  text-decoration: none;
  background: #0e2616;
  border: 1px solid #b8963e;
  border-radius: 999px;
  padding: .85rem 2.1rem;
  box-shadow: inset 0 0 0 1px rgba(184, 150, 62, .25);
  transition: background .25s, gap .2s, transform .2s
}

.room-cta svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform .2s
}

.room-cta:hover {
  background: #143420;
  color: #fff6dc;
  gap: .9rem;
  transform: translateY(-1px)
}

.room-cta:hover svg {
  transform: translateX(3px)
}

.room-num {
  display: none
}

.room-img-size {
  display: none
}

.room-price-notice {
  display: none
}

@media (max-width:1100px) {
  .room-info {
    padding: 4rem 3.5rem
  }

  .room-section.flip .room-info {
    padding: 4rem 3.5rem
  }

  .room-lamp {
    display: none
  }

  .room-section,
  .room-section.flip {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:900px) {
  .room-section {
    grid-template-columns: 1fr;
    min-height: auto
  }

  .room-section.flip .room-img {
    order: 1
  }

  .room-section.flip .room-info {
    order: 2
  }

  .room-img {
    min-height: 55vw
  }

  .room-info {
    padding: 3rem 6%;
    border: none
  }

  .room-section.flip .room-info {
    padding: 3rem 6%
  }

  .room-info-inner {
    max-width: 100%;
    margin: 0
  }
}

@media (max-width:540px) {
  .room-img {
    min-height: 70vw
  }

  .room-info {
    padding: 2.5rem 6%
  }

  .room-name {
    font-size: 1.5rem
  }
}

@media(max-width:768px) {
  .page-hero-inner {
    padding: 5rem 6% 4rem
  }

  .rooms-body {
    padding: 2.5rem 4%;
    gap: 2rem
  }

  .room-section,
  .room-section.flip {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    max-height: none
  }

  .room-section.flip .room-img {
    order: 0
  }

  .room-section.flip .room-info {
    order: 0
  }

  .room-lamp {
    display: none
  }

  .room-info,
  .room-section.flip .room-info {
    padding: 2.5rem 6%;
    border: none;
    border-top: 1px solid rgba(201, 169, 110, .12)
  }

  .amenities-section {
    padding: 2rem 6%
  }

  .rooms-count-strip {
    padding: 1.5rem 6%;
    gap: 1.5rem
  }

  .hero-scroll-hint {
    display: none
  }
}

@media(max-width:480px) {
  .rooms-body {
    padding: 2rem 4%;
    gap: 1.5rem
  }

  .room-info,
  .room-section.flip .room-info {
    padding: 2rem 5%
  }

  .room-cta {
    width: 100%;
    justify-content: center
  }

  .count-item:nth-child(n+4) {
    display: none
  }

  .count-divider:nth-child(n+4) {
    display: none
  }
}


/* ======================================================================
   ROOMS PAGE: GIFT VOUCHER BANNER (.voucher-section)
   ====================================================================== */
.voucher-section {
  background: #f0ebe1;
  padding: 0 0 0rem
}

.voucher-banner {
  background: var(--dark);
  padding: 2rem 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
  position: relative;
  overflow: hidden
}

.voucher-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  
}

.voucher-banner h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  color: var(--warm-white);
  margin-bottom: .85rem;
  line-height: 1.2
}

.voucher-banner p {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: .875rem;
  color: rgba(247, 244, 239, .45);
  line-height: 1.85
}

.btn-hotel-primary {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--dark);
  text-decoration: none;
  background: var(--gold);
  padding: 1.1rem 2.2rem;
  border: 1px solid var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .25s, color .25s
}

.btn-hotel-primary:hover {
  background: transparent;
  color: var(--gold)
}

@media(max-width:900px) {
  .voucher-banner {
    gap: 1.5rem;
    padding: 3rem 2.5rem
  }

  .voucher-section {
    padding: 0 0 4rem
  }
}

@media(max-width:768px) {
  .voucher-section {
    padding: 0 0 3rem
  }

  .voucher-banner a {
    width: 100%;

/* ======================================================================
   DINING PAGE: ROOT VARIABLES (Set 2 - 'd-' prefix theme)
   Second color/font variable set for redesigned dining page
   ====================================================================== */
    text-align: center;
    justify-content: center
  }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s cubic-bezier(.25, .46, .45, .94), transform .75s cubic-bezier(.25, .46, .45, .94)
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0)
}

:root {
  --ink: #100d08;
  --ink-mid: #1c1610;
  --ink-soft: #2a2018;
  --parchment: #f7f3ec;
  --cream: #faf8f4;
  --gold: #c9a84c;
  --gold-dim: rgba(201, 168, 76, .25);
  --gold-faint: rgba(201, 168, 76, .08);
  --text-light: #f0e8d8;
  --text-muted: rgba(240, 232, 216, .55);
  --text-body: #6b5f4e;
  --border-lt: rgba(26, 20, 8, .08);
  --border-dk: rgba(255, 255, 255, .07);
  --display: 'Playfair Display', Georgia, serif;
  --body: 'Jost', sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1)
}

.d-page *,
.d-page *::before,
.d-page *::after {
  box-sizing: border-box
}

.d-page {
  font-family: var(--body);
  color: var(--ink)
}

.d-page img {
  display: block;
  width: 100%
}

.d-page a {
  text-decoration: none
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0)
}

.reveal-delay-1 {
  transition-delay: .12s
}

.reveal-delay-2 {
  transition-delay: .24s
}

.reveal-delay-3 {
  transition-delay: .36s
}

.d-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-size: .6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--gold)
}

.d-eyebrow--line::before {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  background: var(--gold)
}

.d-eyebrow--after::after {
  content: '';
  flex: 1;
  max-width: 80px;
  height: 0.5px;
  background: var(--gold-dim)
}

.d-rule {
  width: 28px;
  height: 1px;
  background: var(--gold);
  margin: 1.5rem 0
}

.d-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .7rem;
  font-family: var(--body);
  font-size: .62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  padding: .9rem 1.8rem;
  border: 0.5px solid var(--gold-dim);
  color: #ffffff;
  background: #6e5231;
  position: relative;
  overflow: hidden;
  transition: background .25s, border-color .25s
}

.d-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink)
}

.d-btn:hover span {
  color: var(--ink)
}

.d-btn span {
  position: relative;
  z-index: 1
}

.d-btn svg {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  transition: color .25s
}

.d-btn:hover svg {
  color: var(--ink)
}

.d-btn--light {
  background: #b8963e;
  color: #1a1208;
  border-color: #b8963e
}

.d-btn--light:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink)
}

.d-tag {
  font-family: var(--body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 0.5px solid var(--gold-dim);
  color: #a07830;
  padding: 5px 12px;
  background: transparent;
  transition: background .25s, color .25s, border-color .25s
}

.d-tag:hover {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold)
}


/* ======================================================================
   DINING PAGE: HERO (.d-hero)
   ====================================================================== */
.d-hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden
}

.d-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: .48;
  transform: scale(1.06);
  animation: heroZoom 18s var(--ease) forwards
}

@keyframes heroZoom {
  from {
    transform: scale(1.06)
  }

  to {
    transform: scale(1.00)
  }
}

.d-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 4, .96) 0%, rgba(10, 8, 4, .45) 45%, rgba(10, 8, 4, .1) 100%), linear-gradient(to right, rgba(10, 8, 4, .5) 0%, transparent 60%)
}

.d-hero__breadcrumb {
  position: absolute;
  top: 2.25rem;
  left: 8%;
  z-index: 4;
  font-family: var(--body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, .3);
  animation: fadeIn .6s .2s both
}

.d-hero__breadcrumb a {
  color: rgba(240, 232, 216, .35);
  transition: color .2s
}

.d-hero__breadcrumb a:hover {
  color: var(--gold)
}

.d-hero__breadcrumb span {
  margin: 0 .6em;
  opacity: .5
}

.d-hero__est {
  position: absolute;
  top: 2rem;
  right: 8%;
  z-index: 4;
  border: 0.5px solid rgba(201, 168, 76, .2);
  padding: .7rem 1.1rem;
  text-align: center;
  animation: fadeIn .6s .3s both
}

.d-hero__est em {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: .8rem;
  color: var(--gold);
  margin-bottom: .2rem
}

.d-hero__est small {
  font-family: var(--body);
  font-size: .58rem;
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted)
}

.d-hero__content {
  position: relative;
  z-index: 3;
  padding: 0 8% 5.5rem;
  animation: heroContent .9s .15s var(--ease) both
}

@keyframes heroContent {
  from {
    opacity: 0;
    transform: translateY(36px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.d-hero__content .d-eyebrow {
  margin-bottom: 1.25rem
}

.d-hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(3rem, 7vw, 6rem);
  color: var(--text-light);
  line-height: 1.06;
  margin-bottom: 1.5rem;
  max-width: 680px
}

.d-hero__sub {
  font-family: var(--body);
  font-weight: 300;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.85;
  max-width: 460px
}

.d-hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  right: 8%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  font-family: var(--body);
  font-size: .55rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, .3);
  animation: fadeIn .6s 1.2s both
}

.d-hero__scroll-line {
  width: 1px;
  height: 40px;
  background: rgba(201, 168, 76, .25);
  animation: scrollPulse 2.5s 1.5s infinite
}

@keyframes scrollPulse {

  0%,
  100% {
    opacity: .25
  }

  50% {
    opacity: .7
  }
}


/* ======================================================================
   DINING PAGE: SUBNAV (.d-subnav)
   Sticky in-page nav (Restaurant / High Tea / Pub Atmosphere)
   ====================================================================== */
.d-subnav {
  background: var(--ink-mid);
  display: flex;
  align-items: center;
  padding: 0 8%;
  border-bottom: 0.5px solid rgba(201, 168, 76, .12);
  position: sticky;
  top: 0;
  z-index: 100
}

.d-subnav__item {
  font-family: var(--body);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #ffffff;
  padding: 1.1rem 1.5rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .2s, border-color .2s
}

.d-subnav__item:hover {
  color: rgba(240, 232, 216, .7)
}

.d-subnav__item.is-active {
  color: var(--gold);
  border-bottom-color: var(--gold)
}

.d-subnav__reserve {
  margin-left: auto;
  font-family: var(--body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-light);
  padding: .6rem 1.2rem;
  background: #6e5231;
  border: 0.5px solid #1e2d1e;
  transition: background .25s, color .25s
}

.d-subnav__reserve:hover {
  background: #2c3e2c;
  border-color: #2c3e2c;
  color: var(--gold-light)
}


/* ======================================================================
   DINING PAGE: INTRO (.d-intro)
   ====================================================================== */
.d-intro {
  background: var(--cream);
  padding: 6rem 8%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start
}

.d-intro__heading {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  color: var(--ink);
  line-height: 1.13
}

.d-intro__heading em {
  font-style: italic;
  color: #8a6a2a
}

.d-intro__right {
  padding-top: .5rem
}

.d-intro__text {
  font-family: var(--body);
  font-weight: 300;
  font-size: .93rem;
  color: var(--text-body);
  line-height: 1.95;
  margin-bottom: 1rem
}

.d-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.75rem
}

.d-intro__cta {
  margin-top: 2.25rem
}


/* ======================================================================
   DINING PAGE: SHOWCASE (.d-showcase)
   Cuisine tags, background photo with veil
   ====================================================================== */
.d-showcase {
  position: relative;
  overflow: hidden;
  background: var(--parchment)
}

.d-showcase__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none
}

.d-showcase__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block
}

.d-showcase__bg-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(247, 243, 236, .97) 0%, rgba(247, 243, 236, .94) 42%, rgba(247, 243, 236, .55) 70%, rgba(247, 243, 236, .10) 100%)
}

.d-showcase__body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 38% 62%;
  gap: 0;
  padding: 0.10rem 0 2.5rem 8%;
  min-height: 460px;
  align-items: stretch
}

.d-showcase__left {
  padding-right: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.d-showcase__logomark {
  width: 56px;
  height: 68px;
  margin-bottom: 1.4rem;
  flex-shrink: 0
}

.d-showcase__logomark svg {
  width: 100%;
  height: 100%
}

.d-showcase__eyebrow {
  font-family: var(--body);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
  display: block
}

.d-showcase__heading {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.8vw, 3.6rem);
  color: var(--ink);
  line-height: 1.12
}

.d-showcase__heading em {
  font-style: italic;
  color: #8a6218;
  display: inline
}

.d-showcase__ornament {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: 2rem
}

.d-showcase__ornament span {
  flex: 1;
  max-width: 64px;
  height: 0.5px;
  background: linear-gradient(to right, var(--gold-dim), transparent)
}

.d-showcase__ornament span:last-child {
  background: linear-gradient(to left, var(--gold-dim), transparent)
}

.d-showcase__ornament i {
  font-style: normal;
  color: var(--gold);
  font-size: .6rem;
  opacity: .5
}

.d-showcase__right {
  padding: 0 8% 0 0;
  display: flex;
  height: 100%
}

.d-showcase__right-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: 1.5rem;
  width: 100%
}

.d-showcase__text {
  font-family: var(--body);
  font-weight: 500;
  font-size: .9rem;
  color: var(--text-body);
  line-height: 1.75;
  margin-bottom: .85rem
}

.d-showcase__cuisines {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.25rem 0 1.5rem
}

.d-showcase__cuisines-wrap {
  width: fit-content;
  max-width: 100%
}

.d-showcase__cuisine-tag {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 0.5px solid var(--gold-dim);
  padding: .45rem .9rem .45rem .7rem;
  background: #8a6218;
  transition: background .25s, border-color .25s;
  cursor: default
}

.d-showcase__cuisine-tag:hover {
  background: var(--gold);
  border-color: var(--gold)
}

.d-showcase__cuisine-tag:hover svg,
.d-showcase__cuisine-tag:hover span {
  color: var(--ink)
}

.d-showcase__cuisine-tag svg {
  width: 15px;
  height: 15px;
  color: var(--gold);
  flex-shrink: 0;
  transition: color .25s
}

.d-showcase__cuisine-tag span {
  font-family: var(--body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffffff;
  transition: color .25s
}

.d-showcase__cuisine-tag--reserve {
  background: #b8963e;
  border-color: #b8963e;
  cursor: pointer;
  margin-top: 1.5rem;
  padding: 1rem 2rem;
  gap: 0.75rem;
  width: 100%;
  justify-content: space-between
}

.d-showcase__cuisine-tag--reserve span {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  font-weight: 500
}

.d-showcase__cuisine-tag--reserve svg {
  width: 14px;
  height: 14px
}

.d-showcase__cuisine-tag--reserve:hover {
  background: var(--gold);
  border-color: var(--gold)
}

.d-showcase__cuisine-tag--reserve span,
.d-showcase__cuisine-tag--reserve svg {
  color: #1a1208
}

.d-showcase__cta {
  margin-top: 0
}

.d-showcase__features {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #ffffff;
  border-top: 0.5px solid var(--border-lt);
  box-shadow: 0 -1px 0 rgba(201, 168, 76, .08) inset
}

.d-showcase__feature {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.2rem 2rem;
  border-right: 0.5px solid var(--border-lt);
  transition: background .25s
}

.d-showcase__feature:last-child {
  border-right: none
}

.d-showcase__feature:hover {
  background: rgba(201, 168, 76, .04)
}

.d-showcase__feature-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 0.5px solid var(--gold-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-top: .1rem
}

.d-showcase__feature-icon svg {
  width: 18px;
  height: 18px
}

.d-showcase__feature h4 {
  font-family: var(--body);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .35rem
}

.d-showcase__feature p {
  font-family: var(--body);
  font-weight: 300;
  font-size: .82rem;
  color: var(--text-body);
  line-height: 1.7
}

@media (max-width:960px) {
  .d-showcase__body {
    grid-template-columns: 1fr;
    padding: 4.5rem 7% 4rem;
    gap: 3rem
  }

  .d-showcase__left {
    padding-right: 0;
    height: auto
  }

  .d-showcase__right {
    padding-right: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem
  }

  .d-showcase__right-content {
    justify-content: flex-start
  }

  .d-showcase__bg-veil {
    background: rgba(247, 243, 236, .92)
  }

  .d-showcase__features {
    grid-template-columns: repeat(2, 1fr)
  }

  .d-showcase__feature:nth-child(2) {
    border-right: none
  }

  .d-showcase__feature:nth-child(3) {
    border-top: 0.5px solid var(--border-lt)
  }

  .d-showcase__feature:nth-child(4) {
    border-top: 0.5px solid var(--border-lt);
    border-right: none
  }
}

@media (max-width:600px) {
  .d-showcase__body {
    padding: 3.5rem 6% 3rem
  }

  .d-showcase__features {
    grid-template-columns: 1fr
  }

  .d-showcase__feature {
    border-right: none;
    border-bottom: 0.5px solid var(--border-lt)
  }

  .d-showcase__feature:last-child {
    border-bottom: none
  }
}


/* ======================================================================
   DINING PAGE: HOURS CARDS (.dwu-*)
   'Dining wherever you are' / hours-at-a-glance cards
   ====================================================================== */
.dwu-wrap {
  background: #faf8f4;
  padding: 2.5rem 4% 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box
}

.dwu-header {
  text-align: center;
  margin-bottom: 3rem
}

.dwu-eyebrow__text {
  font-family: Lato, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #c9a84c;
  display: block;
  margin-bottom: 0.9rem
}

.dwu-heading {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  color: #1e1609;
  line-height: 1.18;
  margin-bottom: 1.25rem
}

.dwu-rule {
  width: 44px;
  height: 1.5px;
  background: #c9a84c;
  margin: 0 auto
}

.dwu-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #e8e0d0;
  border: 1px solid #e8e0d0;
  border-radius: 14px;
  overflow: hidden;
  width: 100%;
  max-width: 1080px
}

.dwu-card {
  background: #fff;
  padding: 2.75rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
  transition: background .25s;
  box-sizing: border-box
}

.dwu-card:hover {
  background: #fdf9f3
}

.dwu-card--featured {
  background: #fdf7ee
}

.dwu-card--featured:hover {
  background: #faf2e4
}

.dwu-card__icon-wrap {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(185, 148, 50, .45);
  background: rgba(201, 168, 76, .07);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .25s, border-color .25s
}

.dwu-card:hover .dwu-card__icon-wrap {
  background: rgba(201, 168, 76, .13);
  border-color: rgba(185, 148, 50, .7)
}

.dwu-card__icon {
  width: 34px;
  height: 34px;
  color: #c9a84c
}

.dwu-card__label {
  font-family: Lato, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #c9a84c
}

.dwu-card__time {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.65rem, 2.4vw, 2.2rem);
  color: #1e1609;
  letter-spacing: 0.01em;
  line-height: 1
}

.dwu-card__note {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.82rem;
  color: #6b5d4a;
  line-height: 1.75;
  max-width: 22ch
}

@media (max-width:900px) {
  .dwu-wrap {
    padding: 4rem 6% 4.5rem
  }

  .dwu-cards {
    grid-template-columns: 1fr;
    max-width: 440px;
    border-radius: 12px
  }

  .dwu-card {
    padding: 2.25rem 1.75rem 2rem
  }
}

@media (max-width:540px) {
  .dwu-heading {
    font-size: clamp(1.7rem, 7vw, 2.2rem)
  }

  .dwu-header {
    margin-bottom: 2rem
  }
}


/* ======================================================================
   DINING PAGE: HOURS STRIP (.d-hours)
   ====================================================================== */
.d-hours {
  background: var(--ink-mid);
  display: grid;
  grid-template-columns: repeat(3, 1fr)
}

.d-hour {
  padding: 3.5rem 3rem;
  border-right: 0.5px solid var(--border-dk);
  transition: background .3s
}

.d-hour:last-child {
  border-right: none
}

.d-hour:hover {
  background: var(--gold-faint)
}

.d-hour__label {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--body);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem
}

.d-hour__label::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--gold-dim)
}

.d-hour__time {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2rem;
  color: var(--text-light);
  margin-bottom: .6rem;
  letter-spacing: -.015em
}

.d-hour__note {
  font-family: var(--body);
  font-weight: 300;
  font-size: .8rem;
  color: rgba(200, 185, 165, .45);
  line-height: 1.75
}


/* ======================================================================
   DINING PAGE: RESTAURANT FEATURE (.d-restaurant)
   ====================================================================== */
.d-restaurant {
  display: grid;
  grid-template-columns: 58% 42%;
  background: var(--parchment);
  border-top: 0.5px solid var(--border-lt)
}

.d-restaurant__img {
  position: relative;
  overflow: hidden;
  min-height: 560px
}

.d-restaurant__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease)
}

.d-restaurant:hover .d-restaurant__img img {
  transform: scale(1.04)
}

.d-restaurant__badge {
  position: absolute;
  bottom: 1.75rem;
  left: 1.75rem;
  background: rgba(10, 8, 4, .88);
  backdrop-filter: blur(8px);
  border-left: 2px solid var(--gold);
  padding: .8rem 1.25rem
}

.d-restaurant__badge-label {
  display: block;
  font-family: var(--body);
  font-size: .55rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .3rem
}

.d-restaurant__badge p {
  font-family: var(--body);
  font-weight: 300;
  font-size: .75rem;
  color: rgba(220, 205, 185, .6)
}

.d-restaurant__body {
  padding: 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.d-restaurant__body .d-eyebrow {
  margin-bottom: 1rem
}

.d-restaurant__body h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 2.8vw, 2.8rem);
  color: var(--ink);
  line-height: 1.15
}

.d-restaurant__body h2 em {
  font-style: italic
}

.d-restaurant__text {
  font-family: var(--body);
  font-weight: 300;
  font-size: .92rem;
  color: var(--text-body);
  line-height: 1.95;
  margin-bottom: 1rem
}

.d-restaurant__detail {
  background: var(--cream);
  border: 0.5px solid var(--border-lt);
  border-left: 2px solid var(--gold-dim);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  font-family: var(--display);
  font-style: italic;
  font-size: .95rem;
  color: #6b5040;
  line-height: 1.65
}


/* ======================================================================
   DINING PAGE: HIGH TEA FEATURE (.d-hightea)
   ====================================================================== */
.d-hightea {
  position: relative;
  display: grid;
  grid-template-columns: 55% 45%;
  align-items: stretch;
  overflow: hidden;
  background: var(--ink);
  height: 460px
}

.d-hightea__img {
  position: relative;
  overflow: hidden
}

.d-hightea__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.2s var(--ease)
}

.d-hightea:hover .d-hightea__img img {
  transform: scale(1.04)
}

.d-hightea__img-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, rgba(10, 8, 4, .9) 100%)
}

.d-hightea__body {
  padding: 1.5rem 3rem 1.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  background: var(--ink-mid);
  position: relative;
  overflow: visible
}

.d-hightea__body::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 28px, rgba(201, 168, 76, .025) 28px, rgba(201, 168, 76, .025) 29px), repeating-linear-gradient(-45deg, transparent, transparent 28px, rgba(201, 168, 76, .025) 28px, rgba(201, 168, 76, .025) 29px);
  pointer-events: none
}

.d-hightea__body>* {
  position: relative;
  z-index: 1
}

.d-hightea__body .d-eyebrow {
  margin-bottom: .5rem
}

.d-hightea__title {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  color: var(--text-light);
  line-height: 1.1;
  margin-top: .6rem;
  margin-bottom: .75rem
}

.d-hightea__quote {
  border-left: 2px solid rgba(201, 168, 76, .35);
  padding: .5rem 1rem;
  margin: 0 0 .75rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  color: rgba(240, 232, 216, .6);
  line-height: 1.6
}

.d-hightea__text {
  font-family: var(--body);
  font-weight: 300;
  font-size: .8rem;
  color: rgba(220, 205, 185, .5);
  line-height: 1.8;
  margin-bottom: .5rem
}

.d-hightea__avail {
  font-family: var(--body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: .75rem 0 1rem;
  opacity: .85
}


/* ======================================================================
   DINING PAGE: ATMOSPHERE GRID (.d-atmosphere)
   ====================================================================== */
.d-atmosphere {
  background: var(--cream);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 0.5px solid var(--border-lt)
}

.d-atm-item {
  padding: 3.5rem 2.75rem;
  border-right: 0.5px solid var(--border-lt);
  transition: background .3s
}

.d-atm-item:last-child {
  border-right: none
}

.d-atm-item:hover {
  background: rgba(201, 168, 76, .04)
}

.d-atm-item__icon {
  width: 36px;
  height: 36px;
  margin-bottom: 1.5rem;
  border: 0.5px solid var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center
}

.d-atm-item__icon svg {
  width: 16px;
  height: 16px;
  fill: var(--gold);
  opacity: .7
}

.d-atm-item h4 {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: .6rem
}

.d-atm-item p {
  font-family: var(--body);
  font-weight: 300;
  font-size: .85rem;
  color: var(--text-body);
  line-height: 1.8
}


/* ======================================================================
   DINING PAGE: CLOSING QUOTE BAR (.d-quote-bar)
   ====================================================================== */
.d-quote-bar {
  background: var(--ink);
  padding: 6rem 8%;
  text-align: center;
  border-top: 0.5px solid var(--border-dk)
}

.d-quote-bar__orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2.5rem
}

.d-quote-bar__orn span {
  width: 48px;
  height: 0.5px;
  background: var(--gold-dim)
}

.d-quote-bar__orn i {
  font-family: var(--display);
  font-style: italic;
  font-size: .8rem;
  color: var(--gold);
  letter-spacing: .08em
}

.d-quote-bar blockquote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.5vw, 1.9rem);
  color: var(--text-light);
  line-height: 1.5;
  max-width: 640px;
  margin: 0 auto 2rem
}

.d-quote-bar__attr {
  font-family: var(--body);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .7
}

.d-quote-bar__cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 3rem
}

@media (max-width:960px) {
  .d-intro {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 4.5rem 7%
  }

  .d-hours {
    grid-template-columns: 1fr
  }

  .d-hour {
    border-right: none;
    border-bottom: 0.5px solid var(--border-dk);
    padding: 2.5rem 2rem
  }

  .d-hour:last-child {
    border-bottom: none
  }

  .d-restaurant {
    grid-template-columns: 1fr
  }

  .d-restaurant__img {
    min-height: 300px
  }

  .d-restaurant__body {
    padding: 3rem 2.5rem
  }

  .d-hightea {
    grid-template-columns: 1fr;
    height: auto
  }

  .d-hightea__img {
    min-height: 320px
  }

  .d-hightea__img-veil {
    background: linear-gradient(to bottom, transparent 60%, rgba(10, 8, 4, .9) 100%)
  }

  .d-hightea__body {
    padding: 3rem 2.5rem
  }

  .d-atmosphere {
    grid-template-columns: 1fr
  }

  .d-atm-item {
    border-right: none;
    border-bottom: 0.5px solid var(--border-lt)
  }

  .d-atm-item:last-child {
    border-bottom: none
  }

  .d-subnav {
    padding: 0 5%;
    overflow-x: auto
  }
}

@media (max-width:600px) {
  .d-hero__content {
    padding: 0 6% 4.5rem
  }

  .d-hero__breadcrumb {
    left: 6%
  }

  .d-hero__est {
    right: 6%;
    top: 1.5rem
  }

  .d-intro {
    padding: 3.5rem 6%
  }

  .d-restaurant__body {
    padding: 2.5rem 2rem
  }

  .d-hightea__body {
    padding: 2.5rem 2rem
  }

  .d-quote-bar {
    padding: 4.5rem 6%
  }

  .d-quote-bar__cta {
    flex-direction: column;
    align-items: center
  }

  .d-subnav__reserve {
    display: none
  }
}

@media (max-width:480px) {
  .d-hero__content {
    padding: 0 5% 4rem
  }

  .d-intro {
    padding: 3rem 5%;
    flex-direction: column;
    gap: 2rem
  }

  .d-restaurant__img,
  .d-hightea__img {
    min-height: 220px
  }

  .d-restaurant__body,
  .d-hightea__body {
    padding: 2rem 5%
  }

  .d-hours {
    grid-template-columns: 1fr
  }

  .d-hour {
    padding: 2rem 5%
  }

  .d-atmosphere {
    grid-template-columns: 1fr
  }

  .d-atm-item {
    padding: 1.5rem 5%
  }

  .d-quote-bar {
    padding: 3.5rem 5%
  }

  .d-quote-bar__cta a {
    width: 100%;
    text-align: center
  }

  .d-subnav {
    gap: 1rem;
    padding: 0 4%
  }
}

:root {
  --gold: #c9a96e;
  --gold-light: #e8d5b0;
  --dark: #0e0c09;
  --dark2: #161310;
  --dark3: #1e1a14;
  --gold-dim: rgba(201, 169, 110, .18);
  --cream: #f7f2ea;
  --warm: #faf7f2;
  --text: #e8e0d0;
  --text-body: #4a4540;
  --muted: rgba(232, 224, 208, .5);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', sans-serif
}


/* ======================================================================
   EXPERIENCES PAGE: HERO (.hero)
   Page-specific hero (not #hero)
   ====================================================================== */
.hero {
  position: relative;
  min-height: 50svh;
  display: grid;
  place-items: end start;
  overflow: hidden;
  background: var(--dark)
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: #1a1208 url('./TheCountryBeyondtheGardenGate.webp') center/cover no-repeat
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(14, 12, 9, 0.25) 0%, rgba(14, 12, 9, 0.15) 40%, rgba(14, 12, 9, 0.72) 75%, rgba(14, 12, 9, 0.92) 100%)
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding: 6rem 8% 5rem;
  max-width: 760px
}

.hero-eyebrow {
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  opacity: .6
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(3rem, 3vw, 5.5rem);
  color: var(--warm-white);
  line-height: 1.08;
  margin-bottom: 1.75rem;
  letter-spacing: -.01em
}

.hero p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  color: rgba(247, 244, 239, .65);
  line-height: 1.85;
  max-width: 440px;
  margin-bottom: 2.25rem
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--sans);
  font-size: .63rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--dark);
  background: var(--gold);
  padding: .95em 2em;
  text-decoration: none;
  transition: background .25s
}

.hero-cta:hover {
  background: var(--gold-light)
}

.hero-cta svg {
  transition: transform .25s
}

.hero-cta:hover svg {
  transform: translateX(4px)
}

.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  right: 8%;
  z-index: 2;
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, .55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  writing-mode: vertical-rl
}

.hero-scroll::after {
  content: '';
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollLine 2s ease-in-out infinite
}

@keyframes scrollLine {

  0%,
  100% {
    opacity: .4;
    transform: scaleY(1)
  }

  50% {
    opacity: 1;
    transform: scaleY(.6)
  }
}


/* ======================================================================
   EXPERIENCES PAGE: INTRO PHOTO (.intro2-photo)
   Full-width promise photo with overlaid CTA button
   ====================================================================== */
.intro2-photo {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  background: #f7f3ec
}

.intro2-photo-frame {
  position: relative;
  height: calc(100vh - 80px);
  max-height: 720px;
  display: inline-block
}

.intro2-photo-frame img {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block
}

.intro2-photo-cta {
  position: absolute;
  left: 6%;
  bottom: 9%;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  color: #f3ead2;
  background: #16261c;
  border: 1px solid rgba(201, 169, 110, .5);
  padding: .85rem 1.7rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background .3s, gap .2s
}

.intro2-photo-cta:hover {
  background: #1f3326;
  gap: .95rem
}

.intro2-photo-cta svg {
  width: 14px;
  height: 14px
}

@media (max-width:768px) {
  .intro2-photo-cta {
    left: 5%;
    bottom: 8%;
    font-size: .72rem;
    padding: .7rem 1.4rem
  }
}

@media (max-width:480px) {
  .intro2-photo-cta {
    bottom: 5%
  }
}



/* ======================================================================
   EXPERIENCES PAGE: 12 EXPERIENCE CARDS (.exp-section / .exp-card)
   The numbered 01-12 grid of curated experiences
   ====================================================================== */
.exp-section {
  background: var(--dark2);
  padding: 6rem 5%;
  position: relative
}

/* Override shared #experiences background (used on homepage teaser)
   so this page's experiences grid gets the light background instead */
.exp-section#experiences {
  background-color: #faf8f4;
  background: #fdf7ee
}

.exp-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent)
}

.exp-section-head {
  text-align: center;
  margin-bottom: 4rem
}

.exp-section-tag {
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4em;
  color: var(--gold);
  margin-bottom: 1rem
}

.exp-section-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  color: #000000;
  line-height: 1.3
}

.exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto
}

.exp-card {
  background: var(--dark3);
  border: 1px solid rgba(201, 169, 110, .1);
  padding: 2.5rem 2.25rem;
  position: relative;
  overflow: hidden;
  transition: border-color .4s, transform .4s, box-shadow .4s;
  cursor: default
}

.exp-card:hover {
  border-color: rgba(201, 169, 110, .45);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(201, 169, 110, .15)
}

.exp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(201, 169, 110, .04), transparent);
  transition: left .6s ease
}

.exp-card:hover::before {
  left: 150%
}

.exp-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 2.25rem;
  right: 2.25rem;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity .4s
}

.exp-card:hover::after {
  opacity: 1
}

.exp-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem
}

.exp-card-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 3rem;
  color: var(--gold);
  opacity: .2;
  line-height: 1;
  transition: opacity .4s
}

.exp-card:hover .exp-card-num {
  opacity: .6
}

.exp-card-badge {
  font-family: var(--sans);
  font-size: .55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--gold);
  background: var(--gold-dim);
  padding: .35em .8em;
  border-radius: 2px;
  white-space: nowrap;
  margin-top: .4rem
}

.exp-icon {
  width: 38px;
  height: 38px;
  color: var(--gold);
  margin-bottom: 1.25rem;
  opacity: .55;
  transition: opacity .4s, transform .4s
}

.exp-card:hover .exp-icon {
  opacity: 1;
  transform: scale(1.08)
}

.exp-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: .85rem;
  transition: color .3s
}

.exp-card:hover h3 {
  color: #fff
}

.exp-card p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .8rem;
  color: rgba(232, 224, 208, .45);
  line-height: 2;
  transition: color .3s
}

.exp-card:hover p {
  color: rgba(232, 224, 208, .7)
}

.exp-card--wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center
}

.exp-card--wide-divider {
  border-left: 1px solid rgba(201, 169, 110, .12);
  padding-left: 3rem
}

/* Photo banner variant — cards with a representative photograph */
.exp-card.has-photo {
  padding: 0;
  display: flex;
  flex-direction: column
}

.exp-card-photo {
  position: relative;
  height: 190px;
  overflow: hidden
}

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

.exp-card.has-photo:hover .exp-card-photo img {
  transform: scale(1.05)
}

.exp-card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 12, 9, 0) 55%, var(--dark3) 100%)
}

.exp-card-body {
  padding: 1.5rem 2.25rem 2.5rem;
  flex: 1;
  display: flex;
  flex-direction: column
}

.exp-card.has-photo .exp-card-top {
  margin-bottom: 1rem
}

.exp-card.has-photo .exp-card-num {
  font-size: 2.1rem
}


/* ======================================================================
   EXPERIENCES PAGE: CONCIERGE CTA (.concierge)
   'Arrange Your Experiences' banner
   ====================================================================== */
.concierge {
  background: var(--dark);
  padding: 2rem 6%;
  position: relative;
  overflow: hidden
}

.concierge-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 60% center;
  opacity: 0.30;
  pointer-events: none;
  user-select: none
}

.concierge::before {
  content: '';
  position: absolute;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(201, 169, 110, .06);
  pointer-events: none
}

.concierge::after {
  content: '';
  position: absolute;
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
  width: 340px;
  height: 340px;
  border-radius: 50%;
  border: 1px solid rgba(201, 169, 110, .1);
  pointer-events: none
}

.concierge-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5rem;
  align-items: center
}

.concierge-tag {
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: var(--gold);
  margin-bottom: 1.1rem
}

.concierge-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 3vw, 3rem);
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 1rem
}

.concierge-body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .88rem;
  color: var(--muted);
  line-height: 2;
  max-width: 500px
}

.concierge-btn {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: var(--dark);
  background: var(--gold);
  padding: 1.15em 2.5em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .3s, box-shadow .3s;
  box-shadow: 0 8px 30px rgba(201, 169, 110, .25)
}

.concierge-btn:hover {
  background: var(--gold-light);
  box-shadow: 0 12px 40px rgba(201, 169, 110, .4)
}

.concierge-btn svg {
  transition: transform .3s
}

.concierge-btn:hover svg {
  transform: translateX(5px)
}

.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.25, .46, .45, .94), transform .7s cubic-bezier(.25, .46, .45, .94)
}

.rv.on {
  opacity: 1;
  transform: none
}

.rv.d1 {
  transition-delay: .1s
}

.rv.d2 {
  transition-delay: .2s
}

.rv.d3 {
  transition-delay: .3s
}

.rv.d4 {
  transition-delay: .4s
}

@media (max-width:1024px) {
  .hero-content {
    grid-template-columns: 1fr
  }

  .hero-right {
    display: none
  }

  .exp-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .exp-card--wide {
    grid-column: span 2
  }

  .concierge-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }
}

@media (max-width:768px) {
  .exp-section {
    padding: 4rem 4%
  }

  .concierge {
    padding: 4rem 6%
  }

  .exp-grid {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  .exp-card--wide {
    grid-column: span 1;
    display: block
  }

  .exp-card--wide-divider {
    border-left: none;
    padding-left: 0;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(201, 169, 110, .12);
    padding-top: 1.5rem
  }
}

@media (max-width:480px) {
  .exp-section {
    padding: 3rem 5%
  }

  .concierge {
    padding: 3rem 5%
  }
}

.page-hero {
  padding: 9rem 6% 5rem;
  position: relative;
  overflow: hidden;
  min-height: 320px;
  background: #1a1208
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 10, 4, 0.45)
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 700px
}

.page-eyebrow {
  font-family: Lato, sans-serif;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--accent);
  margin-bottom: 1rem
}

.page-hero h1 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: #e8dfd0;
  line-height: 1.2;
  margin-bottom: 1.25rem
}

.page-hero p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: hsl(28, 18%, 90%);
  line-height: 1.8;
  max-width: 540px
}

.breadcrumb {
  margin-top: 2rem;
  font-family: Lato, sans-serif;
  font-size: .7rem;
  letter-spacing: .1em;
  color: hsla(28, 18%, 83%, .4)
}

.breadcrumb a {
  color: hsla(28, 18%, 83%, .5)
}

.breadcrumb a:hover {
  color: var(--accent)
}

.breadcrumb span {
  margin: 0 .5em
}


/* ======================================================================
   SPA PAGE: INTRO SPLIT (.spa-intro-*)
   ====================================================================== */
.spa-body {
  background: #fff;
  padding: 0
}

.spa-intro-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 0.5px solid rgba(30, 20, 10, .08)
}

.spa-intro-text {
  padding: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 0.5px solid rgba(30, 20, 10, .08)
}

.spa-intro-eyebrow {
  font-family: Lato, sans-serif;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: var(--accent);
  margin-bottom: .6rem
}

.spa-intro-text h2 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  color: var(--foreground);
  margin-bottom: 0;
  line-height: 1.25
}

.spa-intro-divider {
  width: 24px;
  height: 1px;
  background: var(--accent);
  margin: 1.25rem 0
}

.spa-intro-text p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: .92rem;
  color: var(--muted-foreground);
  line-height: 1.9;
  margin-bottom: 1rem
}

.spa-hours-pill {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  border: 0.5px solid rgba(76, 175, 135, .35);
  padding: 6px 14px;
  align-self: flex-start;
  margin-top: .5rem
}

.spa-hours-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0
}

.spa-hours-pill span {
  font-family: Lato, sans-serif;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent)
}

.spa-intro-photo {
  position: relative;
  overflow: hidden;
  min-height: 420px
}

.spa-intro-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.spa-intro-photo-note {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  background: #1a1208;
  border-left: 2px solid var(--accent);
  padding: .6rem 1rem;
  font-family: Lato, sans-serif;
  font-size: .68rem;
  font-weight: 300;
  color: #ffffff
}

.spa-treatments-heading {
  background: #f7f4f0;
  padding: 2.5rem 3.5rem 1.75rem;
  border-bottom: 0.5px solid rgba(30, 20, 10, .07)
}

.spa-treatments-heading h2 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: var(--foreground);
  margin-bottom: .4rem
}

.spa-treatments-heading p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: .88rem;
  color: var(--muted-foreground);
  line-height: 1.8;
  max-width: 600px
}


/* ======================================================================
   SPA PAGE: TREATMENT CARDS (.spa-grid / .spa-card)
   ====================================================================== */
.spa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5px;
  background: rgba(30, 20, 10, .06)
}

.spa-card {
  background: #fff;
  padding: 1.75rem 2rem;
  transition: background .2s
}

.spa-card:hover {
  background: #faf8f5
}

.spa-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .6rem
}

.spa-card h4 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  color: var(--foreground);
  line-height: 1.3;
  margin: 0
}

.spa-card-dur {
  font-family: Lato, sans-serif;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 1px;
  white-space: nowrap;
  flex-shrink: 0
}

.spa-card-line {
  width: 20px;
  height: 1px;
  background: var(--accent);
  margin: .75rem 0
}

.spa-card p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: .85rem;
  color: var(--muted-foreground);
  line-height: 1.8;
  margin: 0
}

.spa-enquire {
  background: #fff;
  border-top: 0.5px solid rgba(30, 20, 10, .08);
  padding: 1.75rem 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem
}

.spa-enquire p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: .88rem;
  color: var(--muted-foreground);
  margin: 0;
  flex: 1;
  line-height: 1.8
}

@media(max-width:900px) {
  .spa-intro-split {
    grid-template-columns: 1fr
  }

  .spa-intro-text {
    padding: 2.5rem 6%;
    border-right: none;
    border-bottom: .5px solid rgba(30, 20, 10, .08)
  }

  .spa-intro-photo {
    min-height: 260px
  }

  .spa-treatments-heading {
    padding: 2rem 6% 1.5rem
  }

  .spa-grid {
    grid-template-columns: 1fr
  }

  .spa-card {
    padding: 1.5rem 6%
  }

  .spa-enquire {
    padding: 1.5rem 6%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem
  }

  .spa-enquire a {
    width: 100%;
    text-align: center
  }
}

@media(max-width:540px) {
  .spa-card-header {
    flex-direction: column;
    gap: .4rem
  }
}

@media(max-width:480px) {
  .spa-intro-text {
    padding: 2.5rem 5%
  }

  .spa-intro-photo {
    min-height: 200px
  }

  .spa-treatments-heading {
    padding: 2rem 5% 1.25rem
  }

  .spa-card {
    padding: 1.5rem 5%
  }

  .spa-enquire {
    padding: 1.5rem 5%
  }

  .page-hero {
    padding: 6rem 5% 3rem
  }

  .page-hero h1 {
    font-size: clamp(1.5rem, 8vw, 2rem)
  }
}

.page-hero {
  padding: 6rem 8% 5rem;
  position: relative;
  overflow: hidden;
  min-height: 320px;
  background: #1a1208
}


/* ======================================================================
   SHARED: PAGE HERO IMAGE OVERLAY (.page-hero-img)
   ====================================================================== */
.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.page-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .25;
  display: block
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 700px
}

.page-eyebrow {
  font-family: Lato, sans-serif;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--accent);
  margin-bottom: 1rem
}

.page-hero h1 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: #e8dfd0;
  line-height: 1.2;
  margin-bottom: 1.25rem
}

.page-hero p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: hsl(28, 18%, 90%);
  line-height: 1.8;
  max-width: 540px
}


/* ======================================================================
   THE PUB PAGE: STATS STRIP (.pub-stats)
   ====================================================================== */
.pub-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #452a03;
  border-bottom: 1px solid rgba(200, 180, 140, .06)
}

.pub-stat {
  padding: 1rem;
  text-align: center;
  border-right: 1px solid rgba(200, 180, 140, .06)
}

.pub-stat:last-child {
  border-right: none
}

.pub-stat-num {
  font-family: Georgia, serif;
  font-size: 2.4rem;
  color: #b8963e;
  line-height: 1;
  margin-bottom: .3rem
}

.pub-stat-label {
  font-family: Lato, sans-serif;
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--accent);
  margin-bottom: .25rem
}

.pub-stat-desc {
  font-family: Lato, sans-serif;
  font-size: .75rem;
  color: hsla(28, 18%, 83%, .4)
}


/* ======================================================================
   THE PUB PAGE: SLIDER (.pub-slider-wrap)
   Horizontal draggable photo slider with captions
   ====================================================================== */
.pub-slider-wrap {
  background: #120e08;
  display: grid;
  grid-template-columns: 400px 1fr;
  height: 90vh;
  max-height: 90vh;
  overflow: hidden;
  border-top: 1px solid rgba(200, 180, 140, .06)
}

.pub-sl-left {
  padding: 3rem 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(200, 180, 140, .06);
  overflow: hidden;
  justify-content: space-between
}

.pub-sl-eyebrow {
  font-family: Lato, sans-serif;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #c9a96e;
  margin-bottom: 0.75rem;
  display: block
}

.pub-sl-h2 {
  font-family: Georgia, sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 1.8vw, 1.7rem);
  color: hsl(28, 18%, 88%);
  line-height: 1.2;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: .04em
}

.pub-sl-desc {
  font-family: Lato, sans-serif;
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(232, 220, 200, .5);
  margin-bottom: 1.25rem
}

.pub-sl-link {
  font-family: Lato, sans-serif;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: hsl(28, 18%, 83%);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 220, 200, .3);
  padding-bottom: 2px;
  display: inline-block;
  margin-bottom: 0;
  transition: color .2s, border-color .2s
}

.pub-sl-link:hover {
  color: #c9a96e;
  border-color: #c9a96e
}

.pub-sl-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(200, 180, 140, .06)
}

.pub-sl-counter {
  font-family: Georgia, serif;
  font-size: .88rem;
  color: rgba(232, 220, 200, .35);
  min-width: 40px
}

.pub-sl-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(200, 180, 140, .08);
  border: 1px solid rgba(200, 180, 140, .15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
  flex-shrink: 0
}

.pub-sl-btn:hover {
  background: #c9a96e;
  border-color: #c9a96e
}

.pub-sl-btn svg {
  width: 16px;
  height: 16px;
  stroke: hsl(28, 18%, 83%);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s
}

.pub-sl-btn:hover svg {
  stroke: #120e08
}

.pub-sl-right {
  overflow: hidden;
  position: relative;
  height: 100%
}

.pub-sl-track {
  display: flex;
  height: 100%;
  transition: transform .6s cubic-bezier(.25, .46, .45, .94);
  will-change: transform
}

.pub-sl-card {
  flex: 0 0 340px;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-right: 3px;
  cursor: default
}

.pub-sl-photo {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #2a1e10, #120e08)
}

.pub-sl-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  transition: transform .9s cubic-bezier(.25, .46, .45, .94);
  display: block
}

.pub-sl-card:hover .pub-sl-photo img {
  transform: scale(1)
}

.pub-sl-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 14, 8, .65) 0%, transparent 55%);
  pointer-events: none
}

.pub-sl-caption {
  padding: 0.5rem 1rem;
  background: rgba(18, 14, 8, 0.95);
  border-top: 1px solid rgba(200, 180, 140, .08);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem
}

.pub-sl-cap-tag {
  font-family: Lato, sans-serif;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: hsl(28, 18%, 83%);
  margin: 0;
  white-space: nowrap
}

.pub-sl-cap-desc {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: .72rem;
  color: rgba(232, 220, 200, .35);
  line-height: 1;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.pub-photo-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  height: 440px;
  background: #120e08
}

.pub-photo-item {
  position: relative;
  overflow: hidden
}

.pub-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s ease
}

.pub-photo-item:hover img {
  transform: scale(1.04)
}

.pub-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 10, 4, .55) 0%, transparent 60%)
}

@media(max-width:1100px) {
  .pub-slider-wrap {
    grid-template-columns: 320px 1fr
  }

  .pub-sl-card {
    flex: 0 0 280px
  }
}

@media(max-width:900px) {
  .pub-slider-wrap {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none
  }

  .pub-sl-left {
    padding: 3rem 6%;
    border-right: none;
    border-bottom: 1px solid rgba(200, 180, 140, .06)
  }

  .pub-sl-right {
    height: 60vh
  }

  .pub-sl-card {
    flex: 0 0 72vw;
    height: 100%
  }

  .pub-stats {
    grid-template-columns: 1fr
  }

  .pub-stat {
    border-right: none;
    border-bottom: 1px solid rgba(200, 180, 140, .06)
  }

  .pub-stat:last-child {
    border-bottom: none
  }

  .pub-photo-strip {
    height: 280px
  }
}

@media(max-width:540px) {
  .page-hero {
    padding: 7rem 6% 3.5rem;
    min-height: 280px
  }

  .pub-sl-card {
    flex: 0 0 85vw;
    height: 100%
  }

  .pub-sl-right {
    height: 55vh
  }

  .pub-photo-strip {
    grid-template-columns: 1fr;
    height: auto
  }

  .pub-photo-item {
    height: 220px
  }
}

:root {
  --gold: #c9a96e;
  --gold-dim: rgba(201, 169, 110, .15);
  --dark: #1a1510;
  --dark2: #100e09;
  --cream: #f5f0e8;
  --text-body: #4a4540;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', Lato, sans-serif
}


/* ======================================================================
   OFFERS PAGE: HERO (.of-hero)
   ====================================================================== */
.of-hero {
  position: relative;
  height: 55vh;
  min-height: 340px;
  background: var(--dark2);
  display: flex;
  align-items: flex-end;
  overflow: hidden
}

.of-hero-bg {
  position: absolute;
  inset: 0;
  background: url('./HoneymoonatGlen.webp') center bottom / cover no-repeat;
  opacity: .60;
  transform: scale(1.04);
  animation: heroZoom 16s ease forwards
}

@keyframes heroZoom {
  from {
    transform: scale(1.04)
  }

  to {
    transform: scale(1)
  }
}

.of-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 14, 9, .98) 0%, rgba(16, 14, 9, .4) 60%, transparent 100%)
}

.of-hero-inner {
  position: relative;
  z-index: 2;
  padding: 0 8% 3.5rem
}

.of-eyebrow {
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .75rem;
  display: block
}

.of-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: #f0e8d8;
  line-height: 1.1;
  margin-bottom: .75rem
}

.of-hero p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .88rem;
  color: rgba(240, 232, 216, .45);
  line-height: 1.75;
  max-width: 420px
}


/* ======================================================================
   OFFERS PAGE: PACKAGE CARDS (.of-packages / .of-pkg)
   ====================================================================== */
.of-page {
  background: var(--warm-white)
}

.of-header-band {
  background: var(--dark);
  padding: 2.5rem 8%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 0.5px solid rgba(201, 169, 110, .12)
}

.of-header-band h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #e8dcc8;
  line-height: 1.15
}

.of-header-band p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .8rem;
  color: rgba(232, 220, 200, .35);
  max-width: 260px;
  line-height: 1.75;
  text-align: right
}

.of-packages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(42, 35, 24, .08);
  gap: 1px
}

.of-pkg {
  background: #fff;
  display: flex;
  flex-direction: column
}

.of-pkg-img {
  position: relative;
  height: 340px;
  overflow: hidden;
  background: linear-gradient(145deg, #3d3020, #1a1510)
}

.of-pkg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transition: transform .9s cubic-bezier(.25, .46, .45, .94);
  display: block
}

.of-pkg:hover .of-pkg-img img {
  transform: scale(1)
}

.of-pkg-num {
  position: absolute;
  bottom: -16px;
  right: 20px;
  font-family: var(--serif);
  font-size: 7rem;
  color: rgba(201, 169, 110, .07);
  line-height: 1;
  pointer-events: none;
  z-index: 1
}

.of-pkg-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--gold);
  color: var(--dark);
  font-family: var(--sans);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 5px 12px;
  z-index: 2
}

.of-pkg-body {
  padding: 1.75rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  border-top: 0.5px solid rgba(42, 35, 24, .06)
}

.of-pkg-cat {
  font-family: var(--sans);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem
}

.of-pkg-name {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  color: var(--dark);
  line-height: 1.15;
  margin-bottom: .9rem
}

.of-pkg-rule {
  width: 28px;
  height: 1px;
  background: var(--gold);
  opacity: .5;
  margin-bottom: .9rem
}

.of-pkg-desc {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .85rem;
  color: var(--text-body);
  line-height: 1.85;
  margin-bottom: 1rem;
  flex: 1
}

.of-pkg-includes {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 400;
  color: rgba(74, 69, 64, .55);
  line-height: 1.65;
  border-left: 2px solid rgba(201, 169, 110, .3);
  padding-left: .75rem;
  margin-bottom: 1.5rem
}

.of-pkg-cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--dark);
  color: #e8dcc8;
  padding: .85rem 1.6rem;
  text-decoration: none;
  align-self: flex-start;
  transition: background .2s, color .2s
}

.of-pkg-cta:hover {
  background: var(--gold);
  color: var(--dark)
}

.of-pkg-cta svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform .2s
}

.of-pkg-cta:hover svg {
  transform: translateX(3px)
}


/* ======================================================================
   OFFERS PAGE: ENHANCEMENTS GRID (.of-enh-*)
   ====================================================================== */
.of-enh {
  background: var(--cream);
  padding: 3rem 8%;
  border-top: 1px solid rgba(42, 35, 24, .06)
}

.of-enh-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.75rem
}

.of-enh-title {
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(42, 35, 24, .45);
  white-space: nowrap
}

.of-enh-rule {
  flex: 1;
  height: 0.5px;
  background: rgba(42, 35, 24, .1)
}

.of-enh-notice {
  font-family: var(--sans);
  font-size: .55rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap
}

.of-enh-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(42, 35, 24, .08)
}

.of-enh-item {
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background .25s
}

.of-enh-item:hover {
  background: #faf8f4
}

.of-enh-photo {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: linear-gradient(145deg, #3d3020, #1a1510)
}

.of-enh-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
  display: block
}

.of-enh-item:hover .of-enh-photo img {
  transform: scale(1.04)
}

.of-enh-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 14, 9, .55) 0%, transparent 50%)
}

.of-enh-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: rgba(16, 14, 9, .65);
  border: 0.5px solid rgba(201, 169, 110, .3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center
}

.of-enh-icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round
}

.of-enh-caption {
  padding: .85rem 1rem 1rem
}

.of-enh-caption h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: .95rem;
  color: var(--dark);
  margin-bottom: .25rem
}

.of-enh-caption p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .72rem;
  color: var(--text-body);
  line-height: 1.55
}


/* ======================================================================
   OFFERS PAGE: GIFT VOUCHER BANNER (.of-voucher)
   ====================================================================== */
.of-voucher {
  background: var(--dark);
  padding: 3.5rem 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  border-top: 0.5px solid rgba(201, 169, 110, .1)
}

.of-voucher-left {
  max-width: 520px
}

.of-voucher-tag {
  font-family: var(--sans);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
  display: block
}

.of-voucher h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: #e8dcc8;
  margin-bottom: .75rem;
  line-height: 1.2
}

.of-voucher p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .82rem;
  color: rgba(232, 220, 200, .45);
  line-height: 1.8
}

.of-voucher-btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--dark);
  padding: 1rem 2rem;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .2s
}

.of-voucher-btn:hover {
  background: #b8935a;
  color: #fff
}

.of-voucher-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform .2s
}

.of-voucher-btn:hover svg {
  transform: translateX(3px)
}

.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s cubic-bezier(.16, 1, .3, 1), transform .85s cubic-bezier(.16, 1, .3, 1)
}

.rv.visible {
  opacity: 1;
  transform: none
}

.d1 {
  transition-delay: .1s
}

.d2 {
  transition-delay: .2s
}

.d3 {
  transition-delay: .3s
}

@media (max-width:960px) {
  .of-packages {
    grid-template-columns: 1fr
  }

  .of-pkg-img {
    height: 280px
  }

  .of-enh-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .of-voucher {
    flex-direction: column;
    gap: 1.75rem
  }

  .of-header-band {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem
  }

  .of-header-band p {
    text-align: left
  }
}

@media (max-width:600px) {
  .of-hero {
    height: 60vh
  }

  .of-hero-inner {
    padding: 0 6% 3rem
  }

  .of-header-band {
    padding: 2rem 6%
  }

  .of-packages {
    gap: 1px
  }

  .of-pkg-body {
    padding: 1.5rem 1.25rem
  }

  .of-enh {
    padding: 2.5rem 6%
  }

  .of-enh-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .of-voucher {
    padding: 2.5rem 6%
  }
}

@media (max-width:420px) {
  .of-enh-grid {
    grid-template-columns: 1fr
  }
}

.page-hero {
  background: #1a1208;
  padding: 6rem 8% 5rem;
  position: relative;
  overflow: hidden;
  min-height: 320px
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 10, 4, 0.45)
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 700px
}

.page-eyebrow {
  font-family: Lato, sans-serif;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--accent);
  margin-bottom: 1rem
}

.page-hero h1 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: #e8dfd0;
  line-height: 1.2;
  margin-bottom: 1.25rem
}

.page-hero p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: hsl(28, 18%, 90%);
  line-height: 1.8;
  max-width: 540px
}

.breadcrumb {
  margin-top: 2rem;
  font-family: Lato, sans-serif;
  font-size: .7rem;
  letter-spacing: .1em;
  color: hsla(28, 18%, 83%, .4)
}

.breadcrumb a {
  color: hsla(28, 18%, 83%, .5)
}

.breadcrumb a:hover {
  color: var(--accent)
}

.breadcrumb span {
  margin: 0 .5em
}


/* ======================================================================
   CONTACT PAGE: LAYOUT + FORM (.contact-page-*)
   ====================================================================== */
.contact-page-body {
  background: var(--background);
  padding: 5rem 8%
}

.contact-page-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: start
}

.contact-info-block h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--foreground);
  margin-bottom: .75rem;
  line-height: 1.3
}

.contact-info-block p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: .92rem;
  color: var(--muted-foreground);
  line-height: 1.9;
  margin-bottom: 2rem
}

.contact-divider {
  width: 24px;
  height: 1px;
  background: var(--accent);
  margin: 1.25rem 0 2rem
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem
}

.contact-detail-icon {
  width: 36px;
  height: 36px;
  border: .5px solid rgba(76, 175, 135, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.contact-detail-icon svg {
  width: 16px;
  height: 16px;
  stroke: #4caf87;
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round
}

.contact-detail-label {
  font-family: Lato, sans-serif;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--accent);
  margin-bottom: .25rem
}

.contact-detail-value {
  font-family: Lato, sans-serif;
  font-size: .92rem;
  color: var(--foreground)
}

.contact-detail-value a {
  color: var(--foreground);
  transition: color .2s
}

.contact-detail-value a:hover {
  color: var(--accent)
}

.whatsapp-bar {
  background: hsl(152, 49%, 55%, .1);
  border: .5px solid rgba(76, 175, 135, .3);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem
}

.whatsapp-bar svg {
  width: 20px;
  height: 20px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0
}

.whatsapp-bar p {
  font-family: Lato, sans-serif;
  font-size: .85rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: 0
}

.whatsapp-bar strong {
  color: var(--foreground)
}

.contact-form-block {}

.contact-form-block h3 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--foreground);
  margin-bottom: 1.75rem
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1.25rem
}

.form-field label {
  font-family: Lato, sans-serif;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--foreground)
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 0.5px solid rgba(30, 20, 10, .18);
  background: var(--background);
  font-family: Lato, sans-serif;
  font-size: .9rem;
  color: var(--foreground);
  outline: none;
  transition: border-color .2s
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--accent)
}

.form-disclaimer {
  font-family: Lato, sans-serif;
  font-size: .72rem;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
  line-height: 1.7
}

.form-field textarea {
  resize: vertical;
  min-height: 140px
}


/* ======================================================================
   CONTACT PAGE: MAP EMBED (.map-section)
   ====================================================================== */
.map-section {
  background: hsl(28, 12%, 93%);
  padding: 4rem 8%;
  margin-top: 0
}

.map-section h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--foreground);
  text-align: center;
  margin-bottom: .75rem
}

.map-section p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: .9rem;
  color: var(--muted-foreground);
  text-align: center;
  margin-bottom: 2rem
}

.map-embed {
  width: 100%;
  height: 380px;
  border: 0.5px solid rgba(30, 20, 10, .12)
}

@media(max-width:900px) {
  .contact-page-layout {
    grid-template-columns: 1fr;
    gap: 3rem
  }

  .form-row {
    grid-template-columns: 1fr
  }
}

@media(max-width:540px) {
  .contact-page-body {
    padding: 3rem 6%
  }

  .map-section {
    padding: 3rem 6%
  }
}

@media (max-width:768px) {
  .page-hero {
    padding: 7rem 6% 3.5rem;
    min-height: 300px
  }

  .page-hero h1 {
    font-size: clamp(1.6rem, 7vw, 2.4rem)
  }

  .page-hero p {
    font-size: 0.88rem
  }

  .breadcrumb {
    margin-top: 1rem
  }
}

@media (max-width:480px) {
  .page-hero {
    padding: 6rem 5% 3rem;
    min-height: 260px
  }

  .page-hero h1 {
    font-size: clamp(1.4rem, 8vw, 2rem)
  }
}

@media (max-width:768px) {
  .contact-page-body {
    padding: 3rem 6%
  }

  .contact-page-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .map-section {
    padding: 3rem 6%
  }

  .map-embed {
    height: 280px
  }

  .whatsapp-bar {
    flex-direction: column;
    gap: 0.75rem
  }

  .form-row {
    grid-template-columns: 1fr
  }

  .contact-form-block button {
    width: 100%
  }

  input,
  select,
  textarea {
    font-size: 16px !important
  }
}


/* ======================================================================
   SHARED: JQUERY UI DATEPICKER STYLING (.ui-datepicker)
   Booking date picker theme
   ====================================================================== */
.ui-datepicker {
  font-family: Lato, sans-serif;
  width: 280px;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
  background: hsl(18, 10%, 15%);
  color: hsl(28, 18%, 83%);
  z-index: 9999 !important
}

.ui-datepicker-header {
  background: hsl(18, 10%, 10%);
  border: none;
  border-bottom: 1px solid rgba(201, 169, 110, 0.25);
  border-radius: 0;
  padding: 0.9rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.ui-datepicker-title {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  color: hsl(28, 18%, 83%);
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0 auto
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 28px;
  height: 28px;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(201, 169, 110, 0.3);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  float: none
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  background: rgba(201, 169, 110, 0.15);
  border-color: #c9a96e
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: none
}

.ui-datepicker .ui-datepicker-prev::after {
  content: '‹';
  color: #c9a96e;
  font-size: 1.1rem;
  line-height: 1
}

.ui-datepicker .ui-datepicker-next::after {
  content: '›';
  color: #c9a96e;
  font-size: 1.1rem;
  line-height: 1
}

.ui-datepicker .ui-datepicker-prev.ui-state-disabled,
.ui-datepicker .ui-datepicker-next.ui-state-disabled {
  opacity: 0.3;
  cursor: default
}

.ui-datepicker table {
  width: 100%;
  border-collapse: collapse;
  padding: 0.5rem 0.75rem 0.75rem;
  font-size: 0.78rem
}

.ui-datepicker th {
  font-family: Lato, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, 0.6);
  padding: 0.5rem 0;
  border: none;
  text-align: center
}

.ui-datepicker td {
  padding: 2px;
  border: none
}

.ui-datepicker td a,
.ui-datepicker td span {
  display: block;
  text-align: center;
  padding: 6px 4px;
  font-size: 0.82rem;
  font-family: Lato, sans-serif;
  color: hsl(28, 18%, 78%);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s
}

.ui-datepicker td a:hover {
  background: rgba(201, 169, 110, 0.12);
  border-color: rgba(201, 169, 110, 0.35);
  color: #c9a96e
}

.ui-datepicker .ui-datepicker-today a,
.ui-datepicker .ui-datepicker-today span {
  background: rgba(76, 175, 135, 0.12);
  border-color: rgba(76, 175, 135, 0.4);
  color: #4caf87;
  font-weight: 700
}

.ui-datepicker .ui-state-active {
  background: hsl(18, 10%, 10%) !important;
  border-color: #c9a96e !important;
  color: #c9a96e !important;
  font-weight: 700
}

.ui-datepicker .ui-state-disabled {
  opacity: 1
}

.ui-datepicker .ui-state-disabled .ui-state-default {
  color: hsl(18, 10%, 38%);
  cursor: default
}

.ui-datepicker .ui-state-disabled .ui-state-default:hover {
  background: transparent;
  border-color: transparent;
  color: hsl(18, 10%, 38%)
}

#main-nav {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.70) 0%, transparent 100%)
}

#main-nav.scrolled {
  background: hsl(18 10% 20% / 0.97) !important
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0
}


/* ======================================================================
   SHARED: NAV LOGO IMAGE SIZE OVERRIDE (.nav-logo-img)
   ====================================================================== */
.nav-logo-img {
  height: 52px;
  width: auto;
  display: block;
  mix-blend-mode: screen;
  opacity: 1
}

.hero-h1 {
  font-size: clamp(2rem, 3.8vw, 3.6rem) !important;
  line-height: 1.15 !important
}

.hero-content {
  position: relative;
  z-index: 3 !important
}

#lounge-gallery {
  background: #1a1208
}

.lounge-split {
  display: grid;
  grid-template-columns: 65% 35%;
  height: 560px
}

.lounge-photo-wrap {
  position: relative;
  overflow: hidden
}


/* ======================================================================
   LOUNGE GALLERY: SLIDE/TAG OVERRIDES (.lounge-slide)
   Later override of earlier lounge gallery rules
   ====================================================================== */
.lounge-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease
}

.lounge-slide.active {
  opacity: 1
}

.lounge-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 7s ease
}

.lounge-slide.active img {
  transform: scale(1.04)
}

.lounge-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, rgba(15, 10, 4, 0.6) 100%)
}

.lounge-slide-tag {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  background: rgba(15, 10, 4, 0.55);
  padding: 4px 10px;
  border-left: 2px solid var(--accent)
}

.lounge-panel {
  background: #1a1208;
  padding: 2.5rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-left: 1px solid rgba(200, 180, 140, 0.08)
}

.lounge-panel-top {
  flex: 1
}

.lounge-eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--accent);
  margin-bottom: 0.75rem
}

.lounge-title {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  color: hsl(28, 18%, 83%);
  line-height: 1.3;
  margin-bottom: 0
}

.lounge-panel-divider {
  width: 28px;
  height: 1px;
  background: var(--accent);
  margin: 1.25rem 0
}

.lounge-panel-desc {
  font-family: Lato, sans-serif;
  font-size: 0.83rem;
  font-weight: 300;
  color: hsla(28, 18%, 83%, 0.65);
  line-height: 1.8;
  margin-bottom: 1.5rem
}

.lounge-cap-tag-panel {
  font-family: Lato, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 0.3rem
}

.lounge-cap-title-panel {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: hsl(28, 18%, 83%);
  line-height: 1.3;
  margin: 0
}

.lounge-panel-bottom {}

.lounge-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 1rem
}

.lounge-thumb {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.3s;
  border: 1.5px solid transparent
}

.lounge-thumb:hover {
  opacity: 0.7
}

.lounge-thumb.active {
  opacity: 1;
  border-color: var(--accent)
}

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

.lounge-thumb-num {
  position: absolute;
  bottom: 3px;
  left: 4px;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.6rem;
  color: rgba(220, 200, 160, 0.7)
}

.lounge-nav-btns {
  display: flex;
  align-items: center;
  gap: 0.75rem
}

.lounge-nav-btn {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(200, 180, 140, 0.2);
  color: hsl(28, 18%, 83%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s, border-color 0.2s
}

.lounge-nav-btn:hover {
  background: rgba(76, 175, 135, 0.2);
  border-color: var(--accent)
}

.lounge-counter {
  font-family: Lato, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: hsla(28, 18%, 83%, 0.4)
}


/* ======================================================================
   THE PUB PAGE: SIMPLE 2-UP PHOTO GALLERY (.pub-gallery)
   ====================================================================== */
.pub-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 3rem;
  overflow: hidden
}

.pub-gallery div {
  overflow: hidden;
  height: 380px
}

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

.pub-gallery div:hover img {
  transform: scale(1.04)
}

#contact {
  background-color: var(--background);
  padding: 6rem 8%
}

.contact-header {
  max-width: 640px;
  margin-bottom: 4rem
}

.contact-header h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--foreground)
}

.contact-header>p {
  color: var(--muted-foreground);
  margin-top: 1rem
}

@media (max-width:900px) {
  .lounge-split {
    grid-template-columns: 1fr;
    height: auto
  }

  .lounge-photo-wrap {
    height: 280px
  }

  .lounge-panel {
    padding: 1.5rem
  }

  .lounge-slide-overlay {
    background: none
  }

  .pub-gallery {
    grid-template-columns: 1fr
  }

  .pub-gallery div {
    height: 260px
  }
}


/* ======================================================================
   POLICY PAGES: SHARED HERO + SIDEBAR LAYOUT (.policy-hero / .policy-body)
   Used by booking-policy.php, cancellation-policy.php, etc. (repeated several times in file for each policy page)
   ====================================================================== */
.policy-hero {
  background: var(--glendower-black);
  padding: 6rem 8% 2rem;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid rgba(76, 175, 135, 0.25)
}

.policy-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(76, 175, 135, 0.07) 0%, transparent 70%);
  opacity: 0.18
}

.policy-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 740px
}

.policy-hero-eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--accent);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem
}

.policy-hero-eyebrow::after {
  content: '';
  flex: 1;
  max-width: 48px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6
}

.policy-hero h1 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--warm-white);
  line-height: 1.2;
  margin-bottom: 1.25rem
}

.policy-hero p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: hsla(28, 18%, 83%, 0.65);
  line-height: 1.8;
  max-width: 540px
}

.policy-breadcrumb {
  margin-top: 2rem;
  font-family: Lato, sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: hsla(28, 18%, 83%, 0.4)
}

.policy-breadcrumb a {
  color: hsla(28, 18%, 83%, 0.5);
  text-decoration: none;
  transition: color 0.2s
}

.policy-breadcrumb a:hover {
  color: var(--accent)
}

.policy-breadcrumb span {
  margin: 0 0.5em
}

.policy-body {
  background: var(--background);
  padding: 5rem 8%;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 4rem;
  align-items: start
}

.policy-content section {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border)
}

.policy-content section:last-child {
  border-bottom: none;
  margin-bottom: 0
}

.policy-section-num {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem
}

.policy-content h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--foreground);
  margin-bottom: 1.25rem;
  line-height: 1.3
}

.policy-content p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--muted-foreground);
  line-height: 1.9;
  margin-bottom: 1rem
}

.policy-content p:last-child {
  margin-bottom: 0
}

.policy-content ul {
  list-style: none;
  margin: 1rem 0
}

.policy-content ul li {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--muted-foreground);
  line-height: 1.8;
  padding: 0.45rem 0 0.45rem 1.4rem;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04)
}

.policy-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 5px;
  height: 5px;
  background: var(--accent);
  flex-shrink: 0
}

.policy-highlight {
  background: hsl(152, 49%, 55%, 0.08);
  border-left: 3px solid var(--accent);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 2px 2px 0
}

.policy-highlight p {
  margin: 0;
  font-style: italic;
  color: var(--foreground)
}

.policy-sidebar {
  position: sticky;
  top: 6rem
}

.sidebar-card {
  background: var(--glendower-black);
  padding: 2rem;
  margin-bottom: 1.5rem
}

.sidebar-card-eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--accent);
  margin-bottom: 0.75rem
}

.sidebar-card h3 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--warm-white);
  margin-bottom: 0.75rem;
  line-height: 1.35
}

.sidebar-card p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.82rem;
  color: hsla(28, 18%, 83%, 0.55);
  line-height: 1.75;
  margin-bottom: 1.25rem
}

.sidebar-card a.btn-hotel-primary {
  display: block;
  text-align: center;
  font-size: 0.68rem
}

.sidebar-nav {
  background: var(--card);
  padding: 1.75rem 2rem
}

.sidebar-nav h4 {
  font-family: Lato, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 1rem
}

.sidebar-nav ul {
  list-style: none
}

.sidebar-nav ul li {
  list-style: none
}

.sidebar-nav ul li::before {
  display: none
}

.sidebar-nav a {
  display: block;
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  color: var(--muted-foreground);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: color 0.2s, padding-left 0.2s
}

.sidebar-nav a:last-of-type {
  border-bottom: none
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
  color: var(--accent);
  padding-left: 0.5rem
}

.sidebar-nav li:last-child a {
  border-bottom: none
}

.policy-last-updated {
  font-family: Lato, sans-serif;
  font-size: 0.75rem;
  color: hsla(18, 10%, 20%, 0.4);
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border)
}

@media (max-width:900px) {
  .policy-body {
    grid-template-columns: 1fr;
    padding: 3rem 6%
  }

  .policy-sidebar {
    position: static
  }

  .policy-hero {
    padding: 8rem 6% 4rem
  }
}

.policy-hero {
  background: var(--glendower-black);
  padding: 6rem 8% 2rem;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid rgba(76, 175, 135, 0.25)
}

.policy-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 20% 50%, rgba(76, 175, 135, 0.07) 0%, transparent 70%);
  opacity: 0.18
}

.policy-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 740px
}

.policy-hero-eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--accent);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem
}

.policy-hero-eyebrow::after {
  content: '';
  flex: 1;
  max-width: 48px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6
}

.policy-hero h1 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--warm-white);
  line-height: 1.2;
  margin-bottom: 1.25rem
}

.policy-hero p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: hsla(28, 18%, 83%, 0.65);
  line-height: 1.8;
  max-width: 540px
}

.policy-breadcrumb {
  margin-top: 2rem;
  font-family: Lato, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: hsla(28, 18%, 83%, 0.4)
}

.policy-breadcrumb a {
  color: hsla(28, 18%, 83%, 0.5);
  transition: color 0.2s
}

.policy-breadcrumb a:hover {
  color: var(--accent)
}

.policy-breadcrumb span {
  margin: 0 0.5em
}

.policy-body {
  background: var(--background);
  padding: 5rem 8%;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 4rem;
  align-items: start
}

.policy-content section {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border)
}

.policy-content section:last-child {
  border-bottom: none;
  margin-bottom: 0
}

.policy-section-num {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem
}

.policy-content h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--foreground);
  margin-bottom: 1.25rem;
  line-height: 1.3
}

.policy-content p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--muted-foreground);
  line-height: 1.9;
  margin-bottom: 1rem
}

.policy-content p:last-child {
  margin-bottom: 0
}

.policy-content ul {
  list-style: none;
  margin: 1rem 0
}

.policy-content ul li {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--muted-foreground);
  line-height: 1.8;
  padding: 0.45rem 0 0.45rem 1.4rem;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04)
}

.policy-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 5px;
  height: 5px;
  background: var(--accent)
}

.policy-highlight {
  background: hsl(152, 49%, 55%, 0.08);
  border-left: 3px solid var(--accent);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 2px 2px 0
}

.policy-highlight p {
  margin: 0;
  font-style: italic;
  color: var(--foreground)
}

.policy-warning {
  background: hsl(30, 80%, 55%, 0.08);
  border-left: 3px solid hsl(30, 70%, 50%);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 2px 2px 0
}

.policy-warning p {
  margin: 0;
  font-style: italic;
  color: hsl(30, 50%, 30%)
}

.cancellation-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-family: Lato, sans-serif;
  font-size: 0.88rem
}

.cancellation-table th {
  background: var(--glendower-black);
  color: var(--warm-white);
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 400;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em
}

.cancellation-table td {
  padding: 0.8rem 1rem;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
  font-weight: 300
}

.cancellation-table tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.02)
}

.cancellation-table td.charge {
  color: hsl(0, 50%, 40%);
  font-weight: 400
}

.cancellation-table td.free {
  color: var(--accent);
  font-weight: 400
}

.policy-last-updated {
  font-family: Lato, sans-serif;
  font-size: 0.75rem;
  color: hsla(18, 10%, 20%, 0.4);
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border)
}

.policy-sidebar {
  position: sticky;
  top: 6rem
}

.sidebar-card {
  background: var(--glendower-black);
  padding: 2rem;
  margin-bottom: 1.5rem
}

.sidebar-card-eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--accent);
  margin-bottom: 0.75rem
}

.sidebar-card h3 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--warm-white);
  margin-bottom: 0.75rem;
  line-height: 1.35
}

.sidebar-card p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.82rem;
  color: hsla(28, 18%, 83%, 0.55);
  line-height: 1.75;
  margin-bottom: 1.25rem
}

.sidebar-card a.btn-hotel-primary {
  display: block;
  text-align: center;
  font-size: 0.68rem
}

.sidebar-nav {
  background: var(--card);
  padding: 1.75rem 2rem
}

.sidebar-nav h4 {
  font-family: Lato, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 1rem
}

.sidebar-nav ul {
  list-style: none
}

.sidebar-nav ul li {
  list-style: none
}

.sidebar-nav ul li::before {
  display: none
}

.sidebar-nav a {
  display: block;
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  color: var(--muted-foreground);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s, padding-left 0.2s
}

.sidebar-nav li:last-child a {
  border-bottom: none
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
  color: var(--accent);
  padding-left: 0.5rem
}

@media (max-width:900px) {
  .policy-body {
    grid-template-columns: 1fr;
    padding: 3rem 6%
  }

  .policy-sidebar {
    position: static
  }

  .policy-hero {
    padding: 8rem 6% 4rem
  }

  .cancellation-table {
    font-size: 0.78rem
  }

  .cancellation-table th,
  .cancellation-table td {
    padding: 0.6rem 0.5rem
  }
}

.policy-hero {
  background: var(--glendower-black);
  padding: 6rem 8% 2rem;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid rgba(76, 175, 135, 0.25)
}

.policy-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(76, 175, 135, 0.08) 0%, transparent 70%);
  opacity: 0.2
}

.policy-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 740px
}

.policy-hero-eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--accent);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem
}

.policy-hero-eyebrow::after {
  content: '';
  flex: 1;
  max-width: 48px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6
}

.policy-hero h1 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--warm-white);
  line-height: 1.2;
  margin-bottom: 1.25rem
}

.policy-hero p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: hsla(28, 18%, 83%, 0.65);
  line-height: 1.8;
  max-width: 540px
}

.policy-breadcrumb {
  margin-top: 2rem;
  font-family: Lato, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: hsla(28, 18%, 83%, 0.4)
}

.policy-breadcrumb a {
  color: hsla(28, 18%, 83%, 0.5);
  transition: color 0.2s
}

.policy-breadcrumb a:hover {
  color: var(--accent)
}

.policy-breadcrumb span {
  margin: 0 0.5em
}

.policy-body {
  background: var(--background);
  padding: 5rem 8%;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 4rem;
  align-items: start
}

.policy-content section {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border)
}

.policy-content section:last-child {
  border-bottom: none;
  margin-bottom: 0
}

.policy-section-num {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem
}

.policy-content h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--foreground);
  margin-bottom: 1.25rem;
  line-height: 1.3
}

.policy-content p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--muted-foreground);
  line-height: 1.9;
  margin-bottom: 1rem
}

.policy-content p:last-child {
  margin-bottom: 0
}

.policy-content ul {
  list-style: none;
  margin: 1rem 0
}

.policy-content ul li {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--muted-foreground);
  line-height: 1.8;
  padding: 0.45rem 0 0.45rem 1.4rem;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04)
}

.policy-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 5px;
  height: 5px;
  background: var(--accent)
}

.policy-highlight {
  background: hsl(152, 49%, 55%, 0.08);
  border-left: 3px solid var(--accent);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 2px 2px 0
}

.policy-highlight p {
  margin: 0;
  font-style: italic;
  color: var(--foreground)
}


/* ======================================================================
   CHILD POLICY PAGE: AGE TIER CARDS (.age-tiers)
   ====================================================================== */
.age-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0
}

.age-tier {
  background: var(--card);
  padding: 1.5rem 1.25rem;
  text-align: center;
  border-top: 3px solid var(--accent)
}

.age-tier-label {
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 0.4rem
}

.age-tier-range {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--foreground);
  margin-bottom: 0.5rem
}

.age-tier-desc {
  font-family: Lato, sans-serif;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--muted-foreground);
  line-height: 1.6
}

.policy-last-updated {
  font-family: Lato, sans-serif;
  font-size: 0.75rem;
  color: hsla(18, 10%, 20%, 0.4);
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border)
}

.policy-sidebar {
  position: sticky;
  top: 6rem
}

.sidebar-card {
  background: var(--glendower-black);
  padding: 2rem;
  margin-bottom: 1.5rem
}

.sidebar-card-eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--accent);
  margin-bottom: 0.75rem
}

.sidebar-card h3 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--warm-white);
  margin-bottom: 0.75rem;
  line-height: 1.35
}

.sidebar-card p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.82rem;
  color: hsla(28, 18%, 83%, 0.55);
  line-height: 1.75;
  margin-bottom: 1.25rem
}

.sidebar-card a.btn-hotel-primary {
  display: block;
  text-align: center;
  font-size: 0.68rem
}

.sidebar-nav {
  background: var(--card);
  padding: 1.75rem 2rem
}

.sidebar-nav h4 {
  font-family: Lato, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 1rem
}

.sidebar-nav ul {
  list-style: none
}

.sidebar-nav ul li {
  list-style: none
}

.sidebar-nav ul li::before {
  display: none
}

.sidebar-nav a {
  display: block;
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  color: var(--muted-foreground);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s, padding-left 0.2s
}

.sidebar-nav li:last-child a {
  border-bottom: none
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
  color: var(--accent);
  padding-left: 0.5rem
}

@media (max-width:900px) {
  .policy-body {
    grid-template-columns: 1fr;
    padding: 3rem 6%
  }

  .policy-sidebar {
    position: static
  }

  .policy-hero {
    padding: 8rem 6% 4rem
  }

  .age-tiers {
    grid-template-columns: 1fr
  }
}

.policy-hero {
  background: var(--glendower-black);
  padding: 6rem 8% 2rem;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid rgba(76, 175, 135, 0.25)
}

.policy-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 30% 60%, rgba(76, 175, 135, 0.07) 0%, transparent 70%);
  opacity: 0.16
}

.policy-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 740px
}

.policy-hero-eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--accent);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem
}

.policy-hero-eyebrow::after {
  content: '';
  flex: 1;
  max-width: 48px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6
}

.policy-hero h1 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--warm-white);
  line-height: 1.2;
  margin-bottom: 1.25rem
}

.policy-hero p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: hsla(28, 18%, 83%, 0.65);
  line-height: 1.8;
  max-width: 540px
}

.policy-breadcrumb {
  margin-top: 2rem;
  font-family: Lato, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: hsla(28, 18%, 83%, 0.4)
}

.policy-breadcrumb a {
  color: hsla(28, 18%, 83%, 0.5);
  transition: color 0.2s
}

.policy-breadcrumb a:hover {
  color: var(--accent)
}

.policy-breadcrumb span {
  margin: 0 0.5em
}

.policy-body {
  background: var(--background);
  padding: 5rem 8%;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 4rem;
  align-items: start
}

.policy-content section {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border)
}

.policy-content section:last-child {
  border-bottom: none;
  margin-bottom: 0
}

.policy-section-num {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem
}

.policy-content h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--foreground);
  margin-bottom: 1.25rem;
  line-height: 1.3
}

.policy-content p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--muted-foreground);
  line-height: 1.9;
  margin-bottom: 1rem
}

.policy-content p:last-child {
  margin-bottom: 0
}

.policy-content ul {
  list-style: none;
  margin: 1rem 0
}

.policy-content ul li {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--muted-foreground);
  line-height: 1.8;
  padding: 0.45rem 0 0.45rem 1.4rem;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04)
}

.policy-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 5px;
  height: 5px;
  background: var(--accent)
}

.policy-highlight {
  background: hsl(152, 49%, 55%, 0.08);
  border-left: 3px solid var(--accent);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 2px 2px 0
}

.policy-highlight p {
  margin: 0;
  font-style: italic;
  color: var(--foreground)
}

.policy-last-updated {
  font-family: Lato, sans-serif;
  font-size: 0.75rem;
  color: hsla(18, 10%, 20%, 0.4);
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border)
}

.policy-sidebar {
  position: sticky;
  top: 6rem
}

.sidebar-card {
  background: var(--glendower-black);
  padding: 2rem;
  margin-bottom: 1.5rem
}

.sidebar-card-eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--accent);
  margin-bottom: 0.75rem
}

.sidebar-card h3 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--warm-white);
  margin-bottom: 0.75rem;
  line-height: 1.35
}

.sidebar-card p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.82rem;
  color: hsla(28, 18%, 83%, 0.55);
  line-height: 1.75;
  margin-bottom: 1.25rem
}

.sidebar-card a.btn-hotel-primary {
  display: block;
  text-align: center;
  font-size: 0.68rem
}

.sidebar-nav {
  background: var(--card);
  padding: 1.75rem 2rem
}

.sidebar-nav h4 {
  font-family: Lato, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 1rem
}

.sidebar-nav ul {
  list-style: none
}

.sidebar-nav ul li {
  list-style: none
}

.sidebar-nav ul li::before {
  display: none
}

.sidebar-nav a {
  display: block;
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  color: var(--muted-foreground);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s, padding-left 0.2s
}

.sidebar-nav li:last-child a {
  border-bottom: none
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
  color: var(--accent);
  padding-left: 0.5rem
}

@media (max-width:900px) {
  .policy-body {
    grid-template-columns: 1fr;
    padding: 3rem 6%
  }

  .policy-sidebar {
    position: static
  }

  .policy-hero {
    padding: 8rem 6% 4rem
  }
}

.policy-hero {
  background: var(--glendower-black);
  padding: 6rem 8% 2rem;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid rgba(76, 175, 135, 0.25)
}

.policy-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 70% 40%, rgba(76, 175, 135, 0.07) 0%, transparent 70%);
  opacity: 0.30
}

.policy-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 740px
}

.policy-hero-eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--accent);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem
}

.policy-hero-eyebrow::after {
  content: '';
  flex: 1;
  max-width: 48px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6
}

.policy-hero h1 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--warm-white);
  line-height: 1.2;
  margin-bottom: 1.25rem
}

.policy-hero p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: hsla(28, 18%, 83%, 0.65);
  line-height: 1.8;
  max-width: 540px
}

.policy-breadcrumb {
  margin-top: 2rem;
  font-family: Lato, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: hsla(28, 18%, 83%, 0.4)
}

.policy-breadcrumb a {
  color: hsla(28, 18%, 83%, 0.5);
  transition: color 0.2s
}

.policy-breadcrumb a:hover {
  color: var(--accent)
}

.policy-breadcrumb span {
  margin: 0 0.5em
}

.policy-body {
  background: var(--background);
  padding: 5rem 8%;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 4rem;
  align-items: start
}

.policy-content section {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border)
}

.policy-content section:last-child {
  border-bottom: none;
  margin-bottom: 0
}

.policy-section-num {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem
}

.policy-content h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--foreground);
  margin-bottom: 1.25rem;
  line-height: 1.3
}

.policy-content p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--muted-foreground);
  line-height: 1.9;
  margin-bottom: 1rem
}

.policy-content p:last-child {
  margin-bottom: 0
}

.policy-content ul {
  list-style: none;
  margin: 1rem 0
}

.policy-content ul li {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--muted-foreground);
  line-height: 1.8;
  padding: 0.45rem 0 0.45rem 1.4rem;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04)
}

.policy-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 5px;
  height: 5px;
  background: var(--accent)
}

.policy-highlight {
  background: hsl(152, 49%, 55%, 0.08);
  border-left: 3px solid var(--accent);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 2px 2px 0
}

.policy-highlight p {
  margin: 0;
  font-style: italic;
  color: var(--foreground)
}

.policy-last-updated {
  font-family: Lato, sans-serif;
  font-size: 0.75rem;
  color: hsla(18, 10%, 20%, 0.4);
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border)
}

.policy-sidebar {
  position: sticky;
  top: 6rem
}

.sidebar-card {
  background: var(--glendower-black);
  padding: 2rem;
  margin-bottom: 1.5rem
}

.sidebar-card-eyebrow {
  font-family: Lato, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--accent);
  margin-bottom: 0.75rem
}

.sidebar-card h3 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--warm-white);
  margin-bottom: 0.75rem;
  line-height: 1.35
}

.sidebar-card p {
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.82rem;
  color: hsla(28, 18%, 83%, 0.55);
  line-height: 1.75;
  margin-bottom: 1.25rem
}

.sidebar-card a.btn-hotel-primary {
  display: block;
  text-align: center;
  font-size: 0.68rem
}

.sidebar-nav {
  background: var(--card);
  padding: 1.75rem 2rem
}

.sidebar-nav h4 {
  font-family: Lato, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;

/* ======================================================================
   SHARED: GENERIC SITE HERO (.site-hero)
   Newer unified hero used across multiple inner pages, with per-page background image classes
   ====================================================================== */
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 1rem
}

.sidebar-nav ul {
  list-style: none
}

.sidebar-nav ul li {
  list-style: none
}

.sidebar-nav ul li::before {
  display: none
}

.sidebar-nav a {
  display: block;
  font-family: Lato, sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  color: var(--muted-foreground);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s, padding-left 0.2s
}

.sidebar-nav li:last-child a {
  border-bottom: none
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
  color: var(--accent);
  padding-left: 0.5rem
}

@media (max-width:900px) {
  .policy-body {
    grid-template-columns: 1fr;
    padding: 3rem 6%
  }

  .policy-sidebar {
    position: static
  }

  .policy-hero {
    padding: 8rem 6% 4rem
  }
}

.spa-hero {
  background-image: url('./AyurvedicSpa.webp');
  background-position: center;
  background-size: cover
}

.contact-hero {
  background-image: url('/assets/contact..webp');
  background-position: center;
  background-size: cover
}

.pub-hero {
  background-image: url('./pub1.webp');
  background-position: center;
  background-size: cover
}

.site-hero {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  display: flex;
  align-items: flex-start
}

.site-hero-bg {
  position: absolute;
  inset: 0;
  background-color: #1a1208;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.06);
  animation: siteHeroScale 8s cubic-bezier(.16, 1, .3, 1) forwards
}

@keyframes siteHeroScale {
  from {
    transform: scale(1.06)
  }

  to {
    transform: scale(1.00)
  }
}

.site-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 11, 7, .88) 0%, rgba(14, 11, 7, .30) 55%, rgba(14, 11, 7, .10) 100%)
}

.site-hero-content {
  position: relative;
  z-index: 2;
  padding: 7rem 8% 4rem;
  width: 100%;
  animation: siteHeroUp .9s .3s cubic-bezier(.16, 1, .3, 1) both
}

@keyframes siteHeroUp {
  from {
    opacity: 0;
    transform: translateY(28px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.site-hero-eyebrow {
  font-family: Lato, sans-serif;
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: #b8963e;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: .75rem
}

.site-hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: #b8963e;
  flex-shrink: 0
}

.site-hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  color: #f0e8d8;
  line-height: 1.0;
  max-width: 720px;
  margin-bottom: 1.5rem
}

.site-hero-meta {
  font-family: Lato, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: hsla(28, 18%, 80%, .65);
  letter-spacing: .06em;
  border-left: 1px solid rgba(184, 150, 62, .35);
  padding-left: 1rem;
  max-width: 400px;
  line-height: 1.7;
  margin: 0
}

.rooms-hero .site-hero-bg {
  background-image: url('/assets/lounge-2.webp')
}

.dining-hero .site-hero-bg {
  background-image: url('./dining-room-new.webp')
}

.experiences-hero .site-hero-bg {
  background-image: url('./Curated Experiences.webp')
}

.spa-hero .site-hero-bg {
  background-image: url('./AyurvedicSpa.webp')
}

.pub-hero .site-hero-bg {
  background-image: url('./pub1.webp');
  background-position: center bottom
}

.offers-hero .site-hero-bg {
  background-image: url('./Honeymoon%20at%20Glen.webp');
  background-position: center bottom
}

.contact-hero .site-hero-bg {
  background-image: url('/assets/contact..webp')
}

@media (max-width:768px) {
  .site-hero {
    min-height: 200px
  }

  .site-hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.8rem)
  }

  .site-hero-content {
    padding: 5rem 6% 3rem
  }

  .site-hero-meta {
    font-size: .82rem
  }
}

@media (max-width:480px) {
  .site-hero {
    min-height: 180px
  }

  .site-hero h1 {
    font-size: clamp(1.6rem, 8vw, 2rem);
    line-height: 1.15
  }

  .site-hero-content {
    padding: 4.5rem 5% 2.5rem
  }
}


/* ======================================================================
   ABOUT PAGE: FEATURE-STRIP HERO (.ab-feat-hero)
   Small hero used above the features grid
   ====================================================================== */
.ab-feat-hero {
  position: relative;
  width: 100%;
  height: 52vh;
  min-height: 260px;
  max-height: 340px;
  overflow: hidden
}

.ab-feat-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/Glendower.webp');
  background-size: cover;
  background-position: 50% 65%
}

.ab-feat-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(245, 240, 232, 0) 0%, rgba(245, 240, 232, .05) 52%, rgba(245, 240, 232, .65) 80%, rgba(245, 240, 232, 1) 100%)
}

.ab-feat-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 1.5rem;
  text-align: center;
  z-index: 1
}

.ab-feat-hero-content h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  color: var(--ink);
  line-height: 1.15;
  text-align: center
}

.ab-feat-hero-content h2 em {
  font-style: italic;
  color: var(--gold);
  display: block
}

.ab-feat-ornament {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: .8rem
}

.ab-feat-ornament-line {
  width: 44px;
  height: .5px;
  background: rgba(184, 150, 62, .5)
}

.ab-feat-ornament-diamond {
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  opacity: .65
}

.ab-features-wrap {
  padding: 0 2.5rem;
  position: relative;
  z-index: 2;
  margin-top: -14px
}

.ab-features-wrap .ab-feat {
  padding: 1.6rem 1.5rem 1.4rem
}

.ab-cta-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1.1rem 0 1.2rem;
  background: var(--parchment);
  overflow: hidden
}

.ab-botanical {
  position: absolute;
  left: -8px;
  bottom: -12px;
  width: 170px;
  height: 170px;
  opacity: .14;
  pointer-events: none
}

.ab-cta-text {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 1.05rem;
  color: #4a4035;
  line-height: 1.65;
  position: relative;
  z-index: 2;
  padding-left: 100px
}

.ab-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #38312E;
  color: var(--gold-light);
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  padding: 1rem 1.5rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: background .25s
}

.ab-cta-btn:hover {
  background: #2c3e2c
}

.ab-cta-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--gold-light);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

@media (max-width:900px) {
  .ab-feat-hero {
    height: 42vh;
    max-height: 280px
  }

  .ab-cta-text {
    padding-left: 0
  }

  .ab-botanical {
    display: none
  }
}

@media (max-width:580px) {
  .ab-features-wrap {
    padding: 0 1rem
  }

  .ab-feat-hero {
    height: 38vh;
    max-height: 240px
  }

  .ab-cta-bar {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start
  }
}

/* ======================================================================
   OFFERS PAGE: COMING SOON / COUNTDOWN (.cs-*)
   Used by offers.php while the redesigned packages page is in progress.
   Countdown timer JS lives separately in offers.php, not here.
   ====================================================================== */
:root {
  --cs-dark: #0d0b08;
  --cs-dark2: #181410;
  --cs-gold: #c9a96e;
  --cs-gold-dim: rgba(201, 169, 110, .18);
  --cs-cream: #f5f0e8;
  --cs-serif: 'Cormorant Garamond', Georgia, serif;
  --cs-sans: 'DM Sans', Lato, sans-serif
}

.cs-page {
  background: var(--cs-dark);
  min-height: calc(100vh - 80px);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center
}

.cs-bg {
  position: absolute;
  inset: 0;
  background: #1a1208 url('./assets/Honeymoon at Glen.webp') center 35% / cover no-repeat;
  opacity: .26;
  transform: scale(1.05)
}

.cs-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 11, 8, .55) 0%, rgba(13, 11, 8, .88) 55%, var(--cs-dark) 100%)
}

.cs-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 6rem 8% 5rem;
  text-align: center
}

.cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--cs-sans);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--cs-gold);
  margin-bottom: 1.75rem
}

.cs-eyebrow span {
  width: 30px;
  height: 1px;
  background: var(--cs-gold);
  opacity: .6;
  display: block
}

.cs-inner h1 {
  font-family: var(--cs-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.15;
  color: #f5efe2;
  margin-bottom: 1.5rem
}

.cs-inner h1 em {
  color: var(--cs-gold);
  font-style: italic
}

.cs-sub {
  font-family: var(--cs-sans);
  font-weight: 300;
  font-size: .98rem;
  line-height: 1.85;
  color: rgba(240, 232, 216, .62);
  max-width: 540px;
  margin: 0 auto 3rem
}

.cs-countdown {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3.25rem;
  flex-wrap: wrap
}

.cs-unit {
  background: rgba(201, 169, 110, .05);
  border: 0.5px solid var(--cs-gold-dim);
  border-radius: 4px;
  padding: 1.1rem 1.4rem;
  min-width: 84px
}

.cs-unit-num {
  font-family: var(--cs-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  color: var(--cs-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums
}

.cs-unit-label {
  display: block;
  margin-top: .45rem;
  font-family: var(--cs-sans);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(240, 232, 216, .4)
}

.cs-note {
  font-family: var(--cs-sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, .55);
  margin-bottom: 3rem
}

.cs-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap
}

.cs-btn-primary,
.cs-btn-ghost {
  font-family: var(--cs-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 1rem 2.1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  transition: background .25s, color .25s, border-color .25s
}

.cs-btn-primary {
  background: var(--cs-gold);
  color: var(--cs-dark);
  border: 1px solid var(--cs-gold)
}

.cs-btn-primary:hover {
  background: transparent;
  color: var(--cs-gold)
}

.cs-btn-ghost {
  background: transparent;
  color: rgba(240, 232, 216, .7);
  border: 0.5px solid rgba(201, 169, 110, .3)
}

.cs-btn-ghost:hover {
  border-color: var(--cs-gold);
  color: var(--cs-gold)
}

.cs-btn-primary svg,
.cs-btn-ghost svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform .2s
}

.cs-btn-primary:hover svg,
.cs-btn-ghost:hover svg {
  transform: translateX(3px)
}

@media (max-width: 600px) {
  .cs-inner {
    padding: 5rem 6% 4rem
  }

  .cs-unit {
    min-width: 68px;
    padding: .9rem 1rem
  }

  .cs-actions {
    flex-direction: column;
    align-items: center
  }

  .cs-btn-primary,
  .cs-btn-ghost {
    width: 100%;
    max-width: 320px;
    justify-content: center
  }
}