/* Pedro Barn Hotel — Main Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400&family=Lato:wght@300;400;700&display=swap');

/* ===== CSS Variables ===== */
/* Primary palette values are the exact hex codes from the Pedro Barn
   Brand Guideline (Luxury Brown, Vintage Warm White, Luxury Beige,
   Barn Brown, Sustainability Green). Neutral/utility tones (background,
   foreground, muted, border) sit outside the guideline's named swatches
   and are kept as the site's existing cream/near-black extension of
   that palette. */
:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(23, 56%, 7%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(23, 56%, 7%);
  --primary: #3D2614;         /* Luxury Brown — brand guideline */
  --primary-foreground: #E7CAAD; /* Vintage Warm White — brand guideline */
  --secondary: #D0AF91;       /* Luxury Beige — brand guideline */
  --secondary-foreground: #3D2614;
  --muted: hsl(36, 30%, 88%);
  --muted-foreground: hsl(20, 20%, 40%);
  --accent: #54C38B;          /* Sustainability Green — brand guideline */
  --accent-foreground: hsl(0, 0%, 100%);
  --border: hsl(27, 25%, 82%);
  --radius: 0.25rem;
  --barn-brown: #664128;      /* Barn Brown — brand guideline */
  --saddle-brown: #72482B;    /* Saddle Brown — brand guideline */
  --royal-beige: #BE9D81;     /* Royal Beige — brand guideline */
  --warm-white: #E7CAAD;      /* Vintage Warm White — brand guideline */
  --warm-white-rgb: 231, 202, 173;
  --hotel-dark: hsl(23, 56%, 7%);
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

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

h1, h2, h3, h4, h5, h6, p {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ===== Typography ===== */
.font-heading { font-family: 'Fraunces', serif; }
.font-body { font-family: 'Lato', sans-serif; }

/* ===== Layout ===== */
.container-hotel {
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
}

.section-padding {
  padding: 2rem 1.5rem;
}

@media (min-width: 768px) {
  .section-padding { padding: 3.5rem 3rem; }
}

@media (min-width: 1024px) {
  .section-padding { padding: 4rem 6rem; }
}

.section-padding--compact {
  padding: 1.5rem 1.5rem;
}

@media (min-width: 768px) {
  .section-padding--compact { padding: 2rem 3rem; }
}

@media (min-width: 1024px) {
  .section-padding--compact { padding: 2.25rem 6rem; }
}

/* Homepage Dining section: photo is tall (58vh), so the section's normal
   bottom padding reads as an oversized empty gap before the Awards bar
   right below it. Tighten just this instance — placed after all
   .section-padding breakpoints above so it correctly overrides them. */
.dining-story-section { padding-bottom: 1.25rem; }

@media (min-width: 768px) {
  .dining-story-section { padding-bottom: 1.5rem; }
}

@media (min-width: 1024px) {
  .dining-story-section { padding-bottom: 2rem; }
}

/* ===== Animations ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-up { animation: fadeUp 0.8s ease-out forwards; }
.animate-fade-in { animation: fadeIn 1s ease-out forwards; }

/* The scroll-triggered hide-then-fade-in behavior this class used to
   provide has been removed entirely. It relied on an IntersectionObserver
   correctly firing for every section on every page; when that failed to
   trigger (as happened on desktop for at least one section), the section
   was left permanently invisible even though it was fully present in the
   DOM. Content is now always shown immediately, with no dependency on
   JS execution or scroll-timing. This class name is kept only so existing
   markup using it doesn't need to change. */
.reveal {
  opacity: 1;
  transform: none;
}

/* ===== Page Loader (splash logo -> flies to header on load) ===== */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease;
}

.page-loader.page-loader--fade { opacity: 0; pointer-events: none; }
.page-loader.page-loader--done { display: none; }

.page-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.page-loader-inner.page-loader-inner--visible {
  opacity: 1;
  transform: scale(1);
}

.page-loader-mark {
  width: 90px;
  height: 90px;
  object-fit: contain;
  display: block;
}

.page-loader-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
}

.page-loader-name {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  color: var(--primary-foreground);
}

.page-loader-tagline {
  font-family: 'Lato', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-top: 0.4rem;
}

/* ===== Navigation ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background 0.5s, box-shadow 0.3s;
}

.site-header.scrolled {
  background: var(--primary);
  box-shadow: 0 1px 8px rgba(0,0,0,0.2);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 1.25rem;
  margin: 0 auto;
  transition: height 0.3s ease;
}

@media (min-width: 1024px) {
  .header-inner { padding: 0 2rem; }
}

.site-header.scrolled .header-inner {
  height: 60px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
}

.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
}

.logo-mark {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex-shrink: 0;
  transition: width 0.3s ease, height 0.3s ease;
}

.logo-wordmark {
  display: none;
  flex-direction: column;
  line-height: 1.2;
}

@media (min-width: 480px) {
  .logo-wordmark { display: flex; }
}

.logo-wordmark-line1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--primary-foreground);
}

.logo-wordmark-line2 {
  font-family: 'Lato', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-top: 0.15rem;
}

@media (min-width: 768px) {
  .logo-mark { width: 54px; height: 54px; }
}

.site-header.scrolled .logo-mark {
  width: 36px;
  height: 36px;
}

.main-nav {
  display: none;
  align-items: center;
  gap: 0.5rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (min-width: 1024px) {
  .main-nav { display: flex; }
}

.main-nav a {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.header-transparent .main-nav a,
.site-header.scrolled .main-nav a {
  color: var(--primary-foreground);
  border-color: rgba(231, 202, 173, 0.35);
}

.main-nav a:hover { background: rgba(231, 202, 173, 0.12); }

.main-nav a.active,
.site-header.scrolled .main-nav a.active {
  background: var(--primary-foreground);
  color: var(--primary);
  border-color: transparent;
}

.main-nav a.active:hover,
.site-header.scrolled .main-nav a.active:hover {
  background: var(--primary-foreground);
  opacity: 0.9;
}

.mobile-menu a.active { opacity: 0.85; text-decoration: underline; }

.header-book {
  display: none;
}

@media (min-width: 1024px) {
  .header-book { display: block; }
}

a.header-book {
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: #0A2B1C;
}

a.header-book:hover { background: #46AD79; }

/* ===== Buttons ===== */
.btn {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.95rem 2.4rem;
  border-radius: 999px;
  display: inline-block;
  text-align: center;
  transition: background 0.25s ease, transform 0.25s ease;
  cursor: pointer;
  border: none;
  background: var(--accent);
  color: #14472E;
}

.btn:hover { background: #46AD79; transform: translateY(-1px); }

.btn-primary {
  background: var(--accent);
  color: #14472E;
}

.btn-primary:hover { background: #46AD79; }

.btn-outline {
  border: none;
  background: var(--accent);
  color: #14472E;
}

.btn-outline:hover { background: #46AD79; }

.btn-outline-dark {
  border: none;
  color: #14472E;
  background: var(--accent);
}

.btn-outline-dark:hover { background: #46AD79; color: #14472E; }

.btn-hero {
  background: var(--accent);
  color: #14472E;
  font-size: 0.875rem;
  padding: 1rem 2.5rem;
}

.btn-hero:hover { background: #46AD79; }

.btn-ghost-white {
  border: none;
  background: var(--accent);
  color: #14472E;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.95rem 2.4rem;
  border-radius: 999px;
  display: inline-block;
  transition: background 0.25s ease, transform 0.25s ease;
}

.btn-ghost-white:hover { background: #46AD79; transform: translateY(-1px); }

.link-underline {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  color: var(--primary);
  border-bottom: 1px solid var(--primary);
  padding-bottom: 2px;
  transition: opacity 0.3s;
}

.link-underline:hover { opacity: 0.7; }

/* ===== Our Story Section ===== */
.story-divider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 5.5rem;
  margin: -0.5rem 0 1.25rem;
}

.story-divider-line {
  flex: 1;
  height: 1px;
  background: var(--secondary);
}

.story-divider-icon {
  width: 14px;
  height: 14px;
  color: var(--secondary);
  flex-shrink: 0;
}

.story-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start !important;
  width: fit-content !important;
  flex: 0 0 auto !important;
}

.story-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.story-cta:hover svg { transform: translateX(4px); }

.story-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.story-stat-value {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  color: var(--saddle-brown);
  margin-bottom: 0.15rem;
}

.story-stat-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
}

/* Facility stats (Sauna & Jacuzzi, Restaurant, Pub) that have no numeric
   value line above them — .story-stats stretches all children to equal
   height, so pinning the label to the bottom here lines it up with the
   labels under the numeric stats (2019 / 9) instead of sitting flush top. */
.story-stat-facility {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Homepage amenity pills — outlined pills for Sauna & Jacuzzi /
   Restaurant / Pub, replacing the old numeric stat row
   (2019 Established / 9 Rooms). */
.story-amenity-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.story-amenity-pill {
  border: 1px solid rgba(102, 65, 40, 0.35);
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
}

.story-amenity-pill span {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--foreground);
}

@media (max-width: 480px) {
  .story-amenity-pills { gap: 0.6rem; }
  .story-amenity-pill { padding: 0.5rem 1.1rem; }
}

/* Center these fixed-width decorative elements when their column is
   text-center (e.g. the homepage Dining section) — scoped so the
   Our Story section, which reuses the same components, stays untouched. */
.text-center .story-divider,
.text-center .heading-underline {
  margin-left: auto;
  margin-right: auto;
}

.story-image-wrap {
  position: relative;
  padding-bottom: 1.75rem;
}

@media (min-width: 640px) {
  .story-image-wrap { padding-bottom: 0; padding-left: 0; }
}

.story-image-frame {
  position: relative;
  width: 100%;
  height: 58vh;
  height: 58dvh;
  max-height: 560px;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid var(--secondary);
}

@media (max-width: 1023px) {
  .story-image-frame { height: 42vh; height: 42dvh; max-height: 420px; }
}

@media (max-width: 767px) {
  .story-image-frame { height: 38vh; height: 38dvh; max-height: 380px; }
}

@media (max-width: 767px) and (max-height: 700px) {
  .story-image-frame { height: 30vh; height: 30dvh; max-height: 300px; }
}

.story-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-badge {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--card);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  padding: 0.65rem 0.85rem;
  max-width: 15rem;
}

@media (min-width: 640px) {
  .story-badge {
    left: -1.5rem;
    bottom: -1.5rem;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    max-width: 17rem;
  }
}

.story-badge-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
}

.story-badge-icon svg { width: 20px; height: 20px; }

@media (min-width: 640px) {
  .story-badge-icon { width: 40px; height: 40px; }
  .story-badge-icon svg { width: 28px; height: 28px; }
}

.story-badge-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--saddle-brown);
  font-family: 'Lato', sans-serif;
  margin-bottom: 0.15rem;
}

.story-badge-text {
  font-family: 'Fraunces', serif;
  font-size: 0.85rem;
  color: var(--foreground);
  line-height: 1.3;
}

@media (min-width: 640px) {
  .story-badge-text { font-size: 0.95rem; }
}

/* ===== Mobile Menu ===== */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transition: color 0.3s;
}

@media (min-width: 1024px) {
  .menu-toggle { display: none; }
}

.header-transparent .menu-toggle { color: var(--primary-foreground); }
.site-header.scrolled .menu-toggle { color: var(--primary-foreground); }

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--primary);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  overflow-y: auto;
  padding: 6rem 1.5rem 3rem;
  box-sizing: border-box;
}

.mobile-menu.open { display: flex; animation: fadeIn 0.3s ease; }

.mobile-menu a {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  color: var(--primary-foreground);
  transition: opacity 0.3s;
}

.mobile-menu a:hover { opacity: 0.7; }

/* ===== Footer ===== */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 2.5rem 1.5rem 1.25rem;
}

@media (min-width: 1024px) {
  .site-footer { padding: 2.5rem 3rem 1.25rem; }
}

.footer-decor {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, black 35%, transparent 100%);
  mask-image: linear-gradient(to left, black 35%, transparent 100%);
}

@media (min-width: 1280px) {
  .footer-decor { display: block; }
}

.footer-decor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  filter: grayscale(15%) brightness(0.65);
}

.footer-inner {
  position: relative;
  z-index: 2;
  max-width: 80rem;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1fr auto; gap: 1.5rem; }
}

.footer-socials-col { justify-content: flex-start; }

@media (min-width: 1024px) {
  .footer-socials-col { justify-content: flex-end; }
}

.footer-desc {
  font-size: 0.875rem;
  opacity: 0.7;
  line-height: 1.7;
  margin-bottom: 1rem;
  font-family: 'Lato', sans-serif;
}

.footer-tourism-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid rgba(84, 195, 139, 0.35);
  color: var(--accent);
  font-size: 0.75rem;
  font-family: 'Lato', sans-serif;
  padding: 0.55rem 0.9rem;
}

.footer-tourism-badge svg { flex-shrink: 0; }

.footer-socials {
  display: flex;
  gap: 0.75rem;
}

.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(231,202,173,0.35);
  color: var(--primary-foreground);
  transition: background 0.3s, border-color 0.3s;
  flex-shrink: 0;
}

.footer-social-icon svg { width: 16px; height: 16px; }

.footer-social-icon:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: var(--primary);
}

.footer-heading {
  display: block;
  width: 100%;
  background: none;
  border: none;
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--secondary);
  margin-bottom: 1rem;
  text-transform: uppercase;
  text-align: left;
  padding: 0;
}

/* Accordion behavior: mobile only. Desktop resets everything back to a
   plain always-open heading, matching the original design. */
@media (max-width: 767px) {
  .footer-col { border-top: 1px solid rgba(231, 202, 173, 0.15); }
  .footer-col:last-of-type { border-bottom: 1px solid rgba(231, 202, 173, 0.15); }

  .footer-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 1.1rem 0;
    margin-bottom: 0;
  }

  .footer-accordion-icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .footer-accordion-icon::before,
  .footer-accordion-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--secondary);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .footer-accordion-icon::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
  .footer-accordion-icon::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }

  .footer-accordion-toggle[aria-expanded="true"] .footer-accordion-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
  }

  .footer-col .footer-links {
    max-height: 0;
    overflow: hidden;
    gap: 0;
    transition: max-height 0.35s ease, padding-bottom 0.35s ease;
  }

  .footer-accordion-toggle[aria-expanded="true"] + .footer-links {
    max-height: 400px;
    padding-bottom: 1.25rem;
    gap: 0.75rem;
  }
}

.footer-links { display: flex; flex-direction: column; gap: 0.6rem; }

.footer-links a {
  font-size: 0.875rem;
  opacity: 0.75;
  font-family: 'Lato', sans-serif;
  transition: opacity 0.3s;
}

.footer-links a:hover { opacity: 1; }

.footer-badges {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(231,202,173,0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-badge {
  font-size: 0.75rem;
  opacity: 0.5;
  font-family: 'Lato', sans-serif;
}

.footer-bottom {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(231,202,173,0.12);
}

.footer-copy {
  font-size: 0.7rem;
  opacity: 0.5;
  font-family: 'Lato', sans-serif;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero-photo-zone {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--primary);
}

@media (max-width: 767px) {
  .hero {
    height: auto;
    min-height: 0;
  }

  .hero-photo-zone {
    flex: none;
    height: 78vh;
    height: 78dvh;
    min-height: 460px;
  }
}

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

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(23, 10, 5, 0.42) 0%,
    rgba(23, 10, 5, 0) 16%,
    rgba(23, 10, 5, 0) 55%,
    rgba(23, 10, 5, 0.85) 100%
  );
}

.hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 0 1.5rem 2.25rem;
}

@media (min-width: 1024px) {
  .hero-content { padding: 0 3rem 2.75rem; }
}

.hero-label {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: #FFFFFF;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  margin-bottom: 1rem;
  padding: 0.4rem 0.9rem;
  background: rgba(15, 8, 4, 0.28);
  border-radius: 3px;
  backdrop-filter: blur(2px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(2.25rem, 6.5vw, 3.75rem);
  color: var(--warm-white);
  margin-bottom: 1.5rem;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
}

.hero-trust-bar {
  background: var(--primary);
  padding: 1rem 1.5rem;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .hero-trust-bar { padding: 1.25rem 3rem; }
}

.hero-trust-bar .awards-flex {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  gap: 1.5rem 2rem;
}

@media (min-width: 640px) {
  .hero-trust-bar .awards-flex { grid-template-columns: repeat(4, 1fr); }
}

.hero-trust-bar .award-seal {
  width: 100%;
  padding: 0 1rem;
  border-right: none;
}

@media (min-width: 640px) {
  .hero-trust-bar .award-seal {
    border-right: 1px solid rgba(208, 175, 145, 0.25);
  }

  .hero-trust-bar .award-seal:last-child {
    border-right: none;
  }
}

.hero-trust-bar .award-seal-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 0.4rem;
}

.hero-trust-bar .award-seal-icon svg {
  width: 13px;
  height: 13px;
}

.hero-trust-bar .award-seal-text {
  font-size: 0.8rem;
}

/* ===== Promo Banner ===== */
.promo-banner {
  background: var(--accent);
  padding: 1rem 1.5rem;
  text-align: center;
}

.promo-banner a {
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent-foreground);
}

.promo-banner a:hover { text-decoration: underline; }

/* ===== Page Header ===== */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 8rem 1.5rem 3rem;
  border: 3px double rgba(208, 175, 145, 0.6);
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .page-hero { padding: 9rem 3rem 3rem; }
}

.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.page-hero-img--zoom { transform: scale(1.12); }

/* Shows the full photo within the standard hero box instead of
   cropping it — used when a photo's proportions don't suit a tight
   cover-crop. Empty space (if any) fills with the hero's own
   background color rather than looking blank. */
.page-hero-img--contain {
  object-fit: contain;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(23, 10, 5, 0.6) 0%,
    rgba(23, 10, 5, 0.35) 20%,
    rgba(23, 10, 5, 0.4) 45%,
    rgba(23, 10, 5, 0.75) 100%
  );
  z-index: 1;
}

/* Stronger, flatter darkening for hero photos with busy detail
   throughout the frame (e.g. the pub's bottle-lined shelves), where
   the standard gradient still leaves the text hard to read. */
.page-hero-overlay--strong {
  background: linear-gradient(
    to bottom,
    rgba(10, 5, 2, 0.55) 0%,
    rgba(10, 5, 2, 0.45) 30%,
    rgba(10, 5, 2, 0.65) 60%,
    rgba(10, 5, 2, 0.88) 100%
  ), rgba(10, 5, 2, 0.25);
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 80rem;
  margin: 0;
}

/* ===== Estate Story (About page) ===== */
.estate-story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .estate-story-grid { grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: center; }
}

.estate-story-header { margin-bottom: 2rem; }

.estate-wordmark {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.85rem;
}

.estate-header-rule {
  width: 64px;
  height: 1px;
  background: var(--barn-brown);
  margin-bottom: 0.85rem;
}

.estate-tagline {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--barn-brown);
}

.estate-points {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.estate-point {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.estate-point-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1px solid var(--secondary);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.estate-point-icon svg {
  width: 22px;
  height: 22px;
  color: var(--barn-brown);
}

.estate-point-heading {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--primary);
  margin-bottom: 0.4rem;
}

.estate-point-text {
  font-family: 'Lato', sans-serif;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

/* Timeline connector variant — replaces the icon boxes with a
   vertical rule and small dot markers linking the three points. */
.estate-points--timeline {
  gap: 0;
  padding-left: 2rem;
  border-left: 2px solid rgba(208, 175, 145, 0.5);
}

.estate-point--timeline {
  position: relative;
  padding-bottom: 2rem;
}

.estate-point--timeline:last-child {
  padding-bottom: 0;
}

.estate-point--timeline::before {
  content: '';
  position: absolute;
  left: -2.45rem;
  top: 0.3rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--secondary);
}

.estate-photo-card {
  border-radius: 16px;
  overflow: hidden;
  height: 22rem;
}

@media (min-width: 1024px) {
  .estate-photo-card { height: 32rem; }
}

.estate-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.estate-feature-strip {
  background: var(--primary);
  border-radius: 0 0 16px 16px;
  padding: 1.5rem 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  gap: 1.5rem 0.5rem;
}

@media (min-width: 640px) {
  .estate-feature-strip { grid-template-columns: repeat(4, 1fr); }
}

.estate-feature-item {
  text-align: center;
  position: relative;
  padding: 0 0.5rem;
}

.estate-feature-item + .estate-feature-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: rgba(231, 202, 173, 0.2);
  display: none;
}

@media (min-width: 640px) {
  .estate-feature-item::before { display: block; }
}

.estate-feature-item svg {
  width: 26px;
  height: 26px;
  color: var(--secondary);
  margin-bottom: 0.6rem;
}

.estate-feature-icon {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 0.75rem;
}

.estate-feature-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-foreground);
  margin-bottom: 0.2rem;
}

.estate-feature-sub {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  color: rgba(231, 202, 173, 0.7);
}

.estate-tagline-banner {
  background: var(--primary);
  padding: 1.5rem;
  text-align: center;
}

.estate-tagline-banner p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--secondary);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.estate-tagline-banner .rule {
  width: 40px;
  height: 1px;
  background: rgba(208, 175, 145, 0.5);
  display: inline-block;
}

.estate-feature-banner-wrap { position: relative; }

.estate-banner-gradient-green {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18, 28, 18, 0.92) 0%, rgba(18, 28, 18, 0.62) 45%, rgba(18, 28, 18, 0.15) 80%, transparent 100%);
}

@media (max-width: 767px) {
  .estate-banner-gradient-green { background: linear-gradient(180deg, rgba(18, 28, 18, 0.3) 0%, rgba(18, 28, 18, 0.92) 65%); }
}

.estate-quote-box {
  display: inline-block;
  margin-top: 1.5rem;
  border: 1px solid rgba(231, 202, 173, 0.35);
  border-radius: 6px;
  padding: 0.85rem 1.75rem;
  text-align: center;
}

.estate-quote-title {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 0.3rem;
}

.estate-quote-sub {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(231, 202, 173, 0.85);
}

.estate-feature-strip-light {
  position: relative;
  z-index: 2;
  margin-top: -2.5rem;
  background: var(--background);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1rem;
}

@media (min-width: 768px) {
  .estate-feature-strip-light {
    margin-top: -3.5rem;
    grid-template-columns: repeat(4, 1fr);
    padding: 2.25rem 2rem;
  }
}

.estate-feature-item-light {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  position: relative;
  padding-right: 0.5rem;
}

@media (min-width: 768px) {
  .estate-feature-item-light + .estate-feature-item-light::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(61, 38, 20, 0.15);
  }
}

.estate-feature-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.estate-feature-icon-circle svg {
  width: 22px;
  height: 22px;
  color: var(--barn-brown);
}

.estate-feature-icon-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.estate-feature-heading {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.3rem;
}

.estate-feature-text {
  font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--muted-foreground);
}

.estate-banner {
  position: relative;
  overflow: hidden;
  min-height: max(420px, 65vh);
  min-height: max(420px, 65dvh);
  max-height: 650px;
  display: flex;
  align-items: center;
}

.estate-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.estate-banner-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23,10,5,0.9) 0%, rgba(23,10,5,0.6) 45%, rgba(23,10,5,0.15) 80%, transparent 100%);
}

@media (max-width: 767px) {
  .estate-banner { align-items: flex-end; }
  .estate-banner-gradient { background: linear-gradient(180deg, rgba(23,10,5,0.35) 0%, rgba(23,10,5,0.92) 65%); }
}

.estate-banner-content {
  position: relative;
  z-index: 1;
  max-width: 32rem;
  padding: 3rem 1.5rem;
}

@media (min-width: 768px) {
  .estate-banner-content { padding: 3rem 4rem; }
}

.estate-banner-content .section-title {
  font-weight: 500;
}

.page-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  opacity: 0.85;
  font-family: 'Lato', sans-serif;
  margin-bottom: 0.85rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.page-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(2rem, 8vw, 3.5rem);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.page-hero-description {
  margin-top: 1.25rem;
  max-width: 32rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(208, 175, 145, 0.6);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(231, 202, 173, 0.92);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Bordered accent-line fact block under the hero description —
   left gold rule + bold short statement, echoing the Glendower
   reference pattern. */
.page-hero-accent-line {
  margin-top: 1.25rem;
  max-width: 32rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(208, 175, 145, 0.6);
}

.page-hero-accent-line p {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(231, 202, 173, 0.92);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  margin: 0;
}

/* Stat strip: a dark band directly beneath a page-hero photo, giving a
   few quick facts before any body copy. */
.page-stat-strip {
  background: #1a1108;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem 0;
  text-align: center;
  border: 3px double rgba(208, 175, 145, 0.6);
  border-top: none;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .page-stat-strip { padding: 1.35rem 3rem; }
}

.page-stat-item {
  flex: 1 1 0;
  min-width: 140px;
  padding: 0 1.5rem;
  border-left: 1px solid rgba(208, 175, 145, 0.3);
}

.page-stat-item:last-child {
  border-right: 1px solid rgba(208, 175, 145, 0.3);
}

/* On mobile the strip wraps into a 2-column grid, but :last-child only
   ever matches the final item overall — so the right edge of the top
   row (2nd item) was left without a closing border. Give every 2nd
   item a right border here so both rows are enclosed symmetrically. */
@media (max-width: 767px) {
  .page-stat-item:nth-child(2n) {
    border-right: 1px solid rgba(208, 175, 145, 0.3);
  }
}

.page-stat-item--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  text-align: left;
}

.page-stat-item-icon {
  width: 22px;
  height: 22px;
  color: var(--secondary);
  flex-shrink: 0;
}

.page-stat-item-icon svg { width: 100%; height: 100%; }

/* Every page-stat-strip across the site shares one design: a dimmed,
   letter-spaced sans-serif headline line, followed by a smaller, even
   more subdued uppercase caption line underneath. Roles are assigned by
   DOM position (first paragraph vs. the one after it) rather than by
   class name, since some pages mark up the headline as
   .page-stat-item-value and others (Dining) mark it up as
   .page-stat-item-label — this keeps every page's markup untouched
   while guaranteeing identical rendering everywhere. */
.page-stat-item-value,
.page-stat-item-label {
  margin: 0;
}

.page-stat-item p:first-child {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 28px;
  line-height: 1.1;
  color: rgba(231, 202, 173, 0.7);
}

.page-stat-item p:first-child ~ p {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.65rem;
  line-height: 1.4;
  color: rgba(231, 202, 173, 0.7);
  margin-top: 0.35rem;
}

/* Mobile-only: the big stat numbers (2019, 4.2/5, etc.) run oversized
   at phone widths against the narrower stat-item columns — scale them
   down here. Placed after the base rule above (same selector/specificity)
   so it correctly wins on mobile widths instead of being overridden by
   source order. Desktop/tablet keep the original sizes untouched. */
@media (max-width: 767px) {
  .page-stat-item p:first-child {
    font-size: 16px;
  }

  .page-stat-item p:first-child ~ p {
    font-size: 0.55rem;
  }
}

/* ===== Wellness treatment cards: photo + icon badge ===== */
.wellness-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1.25rem;
}

@media (min-width: 768px) {
  .wellness-card-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem 1.75rem; }
}

.wellness-photo-wrap { position: relative; }

.wellness-card-photo {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 14px;
  overflow: hidden;
}

.wellness-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

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

.wellness-card-icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  border: 1px solid var(--secondary);
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--saddle-brown);
  box-shadow: 0 6px 16px rgba(61, 38, 20, 0.18);
}

.wellness-card-icon svg { width: 22px; height: 22px; }

.wellness-card-title {
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--foreground);
  margin: 2rem 0 0.5rem;
}

.wellness-card-desc {
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 639px) {
  .wellness-card-icon { width: 3.25rem; height: 3.25rem; }
  .wellness-card-icon svg { width: 19px; height: 19px; }
  .wellness-card-title { font-size: 1rem; margin-top: 1.75rem; }
  .wellness-card-desc { font-size: 0.82rem; }
}

/* ===== Cards / Grid ===== */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

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

@media (min-width: 640px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}

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

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 2rem;
}

.card-simple {
  border: 1px solid var(--border);
  padding: 1.5rem;
  transition: box-shadow 0.3s;
}

.card-simple:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); }

.card-title {
  font-family: 'Fraunces', serif;
  font-size: 1.125rem;
  color: var(--foreground);
  margin-bottom: 0.5rem;
}

.card-desc {
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

/* ===== Experience Cards (experiences.php: photo + icon badge) ===== */
.experience-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1.25rem;
}

@media (min-width: 768px) {
  .experience-card-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem 1.75rem; }
}

.experience-photo-wrap { position: relative; }

.experience-card-photo {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 14px;
  overflow: hidden;
}

.experience-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

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

.experience-card-icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  border: 1px solid var(--secondary);
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--saddle-brown);
  box-shadow: 0 6px 16px rgba(61, 38, 20, 0.18);
}

.experience-card-icon svg { width: 22px; height: 22px; }

.experience-card-title {
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--foreground);
  margin: 2rem 0 0.5rem;
}

.experience-card-desc {
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 639px) {
  .experience-card-icon { width: 3.25rem; height: 3.25rem; }
  .experience-card-icon svg { width: 19px; height: 19px; }
  .experience-card-title { font-size: 1rem; margin-top: 1.75rem; }
  .experience-card-desc { font-size: 0.82rem; }
}

/* ===== Room Overlay Cards ===== */
.room-overlay-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 0.75rem;
  overflow: hidden;
  display: block;
}

.room-overlay-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

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

.room-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23,10,5,0.92) 0%, rgba(23,10,5,0.25) 55%, transparent 100%);
}

.room-overlay-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.1rem;
}

.room-overlay-title {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.35rem;
}

.room-overlay-desc {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.room-overlay-link {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.6);
  padding-bottom: 2px;
  transition: opacity 0.3s;
}

.room-overlay-card:hover .room-overlay-link { opacity: 0.75; }

/* ===== Sections ===== */
.section-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted-foreground);
  font-family: 'Lato', sans-serif;
  margin-bottom: 1rem;
}

.section-label-light {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  opacity: 0.6;
  font-family: 'Lato', sans-serif;
  margin-bottom: 1rem;
}

.section-label-accent {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--accent);
  font-family: 'Lato', sans-serif;
  margin-bottom: 1rem;
}

.section-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--foreground);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.heading-underline {
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--secondary);
  margin: -0.75rem 0 1.5rem;
}

.section-title-light {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--warm-white);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.section-body {
  font-family: 'Lato', sans-serif;
  color: var(--muted-foreground);
  line-height: 1.8;
}

/* About page: editorial two-block layout (The Estate / Pedro Barn Hotel) */
.estate-editorial-block {
  padding: 5rem 1.5rem;
}

@media (min-width: 768px) {
  .estate-editorial-block { padding: 5rem 3rem; }
}

.estate-editorial-block--alt {
  background: var(--luxury-beige, #F0E9DC);
}

.estate-editorial-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.75rem;
  align-items: center;
}

.estate-editorial-row--reverse {
  direction: rtl;
}

.estate-editorial-row--reverse > * {
  direction: ltr;
}

.estate-editorial-photo img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  box-shadow: 0 20px 40px rgba(43, 32, 24, 0.18);
}

.estate-editorial-heading {
  display: flex;
  align-items: center;
}

.estate-editorial-accent {
  width: 5px;
  height: 1.5em;
  background: var(--barn-brown, #664128);
  display: inline-block;
  margin-right: 16px;
  flex-shrink: 0;
}

.estate-editorial-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  height: 380px;
}

.estate-editorial-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  box-shadow: 0 14px 28px rgba(43, 32, 24, 0.15);
}

/* About page: Pedro Barn Hotel wavy-transition editorial block */
.estate-wave-block {
  max-width: 80rem;
  margin: 3rem auto;
  background: #F3ECE1;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(43, 32, 24, 0.1);
}

.estate-wave-photo {
  position: relative;
  height: 320px;
}

.estate-wave-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.estate-wave-svg {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 70px;
}

.estate-wave-content {
  padding: 10px 4rem 3.5rem;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 3rem;
  align-items: start;
}

.estate-wave-left img {
  width: 150px;
  display: block;
  margin-bottom: 14px;
}

.estate-wave-left h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 26px;
  color: var(--primary, #2b2018);
  margin: 0 0 10px;
}

.estate-wave-flourish {
  color: #a9834f;
  font-size: 13px;
  letter-spacing: 0.1em;
}

.estate-wave-textcols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.25rem;
}

.estate-wave-textcols p {
  font-family: 'Lato', sans-serif;
  color: var(--muted-foreground);
  line-height: 1.8;
  font-size: 13.8px;
  margin: 0;
}

.estate-wave-divider {
  border-left: 1px solid #d9c6a8;
  padding-left: 2.25rem;
}

.estate-wave-caption {
  text-align: center;
  padding-bottom: 2.5rem;
  font-size: 12.5px;
  color: #8a7a68;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.estate-wave-caption svg {
  width: 13px;
  height: 13px;
  stroke: #a9834f;
  fill: none;
  stroke-width: 1.6;
}

@media (max-width: 900px) {
  .estate-wave-content {
    grid-template-columns: 1fr;
    padding: 10px 1.5rem 2.5rem;
  }
  .estate-wave-textcols {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .estate-wave-divider {
    border-left: none;
    border-top: 1px solid #d9c6a8;
    padding-left: 0;
    padding-top: 1.25rem;
  }
}

.estate-editorial-grid-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 900px) {
  .estate-editorial-row,
  .estate-editorial-row--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .estate-editorial-photo img {
    height: 280px;
  }
  .estate-editorial-grid {
    height: auto;
    grid-template-columns: 1fr;
  }
  .estate-editorial-grid-stack {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    height: 160px;
  }
}

/* Experiences page intro line — spans the full container and centers,
   so it reads as one confident line on desktop instead of a narrow,
   left-aligned block sitting in a large empty area above the cards. */
.experiences-intro {
  max-width: 58rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}

/* From Garden to Table: drop cap + italic serif treatment (Option 3) */
.has-dropcap .dropcap {
  float: left;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 0.7;
  color: var(--saddle-brown);
  margin: 0.1rem 0.5rem 0 0;
}

.section-body-italic {
  font-style: italic;
  font-family: 'Fraunces', serif;
}

@media (max-width: 639px) {
  .has-dropcap .dropcap { font-size: 2.6rem; margin: 0.05rem 0.4rem 0 0; }
}

@media (max-width: 767px) and (max-height: 700px) {
  .section-title, .section-title-light { margin-bottom: 0.75rem; }
  .section-body { line-height: 1.5; }
  .mb-6 { margin-bottom: 0.75rem; }
}

/* ===== Image Sections ===== */
.image-text-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  min-width: 0;
}

.image-text-grid > * {
  min-width: 0;
}

.story-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.story-text-col .story-divider {
  margin-left: auto;
  margin-right: auto;
}

.story-text-col .story-cta {
  margin-left: auto;
  margin-right: auto;
}

.story-text-col .story-amenity-pills {
  justify-content: center;
}

@media (max-width: 767px) and (max-height: 700px) {
  .image-text-grid { gap: 0.85rem; }
}

@media (min-width: 1024px) {
  .image-text-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }

  .image-text-grid--reverse-desktop > *:first-child { order: 2; }
  .image-text-grid--reverse-desktop > *:last-child { order: 1; }
}

.aspect-45 { aspect-ratio: 4/5; max-height: 62vh; max-height: 62dvh; overflow: hidden; margin: 0 auto; }
.aspect-sq { aspect-ratio: 1/1; max-height: 62vh; max-height: 62dvh; overflow: hidden; margin: 0 auto; }
.aspect-169 { aspect-ratio: 16/9; max-height: 62vh; max-height: 62dvh; overflow: hidden; }

@media (max-width: 1023px) {
  .aspect-45, .aspect-sq, .aspect-169 {
    max-height: 50vh;
    max-height: 50dvh;
  }
}

@media (max-width: 767px) {
  .aspect-45, .aspect-sq, .aspect-169 {
    max-height: 38vh;
    max-height: 38dvh;
  }
}

.aspect-45 img,
.aspect-sq img,
.aspect-169 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.aspect-45 img:hover,
.aspect-sq img:hover,
.aspect-169 img:hover { transform: scale(1.05); }

/* ===== Image Hero Overlay ===== */
.img-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.img-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(23, 10, 5, 0.6);
}

.img-hero-content {
  position: relative;
  z-index: 10;
  padding: 3rem 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 1024px) {
  .img-hero-content { padding: 5rem 3rem; }
}

/* Compact variant: shorter box, tighter padding so content isn't
   clipped by the section's overflow:hidden. */
.img-hero--compact { min-height: 340px; }
.img-hero--compact .img-hero-content { padding: 2rem 1.5rem; }

@media (min-width: 1024px) {
  .img-hero--compact { min-height: 320px; }
  .img-hero--compact .img-hero-content { padding: 2.25rem 3rem; }
}

/* ===== Accommodation Section ===== */
.bg-primary { background: var(--primary); }
.bg-secondary { background: var(--secondary); }
.bg-muted { background: var(--muted); }
.bg-card { background: var(--card); }
.bg-background { background: var(--background); }
.text-primary { color: var(--primary); }
.text-primary-fg { color: var(--primary-foreground); }
.text-secondary-fg { color: var(--secondary-foreground); }
.text-foreground { color: var(--foreground); }
.text-muted { color: var(--muted-foreground); }
.text-accent { color: var(--accent); }
.text-warm-white { color: var(--warm-white); }

/* ===== Accommodation Cards ===== */
.room-card img {
  width: 100%;
  aspect-ratio: 4/3;
  max-height: 42vh;
  max-height: 42dvh;
  object-fit: cover;
  transition: transform 0.7s ease;
}

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

.room-card-inner {
  overflow: hidden;
}

.room-card-body {
  padding: 1.5rem 0;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 1.5rem;
}

.room-card-title {
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.room-card-desc {
  font-size: 0.875rem;
  opacity: 0.7;
  font-family: 'Lato', sans-serif;
  margin-bottom: 1rem;
}

/* ===== Full-Screen Hero Sections ===== */
/* The homepage hero and 404 page are full-bleed, one-screen "moment"
   sections. Uses min-height (not a hard-capped height), so if content
   is ever taller than one screen — which varies slightly by browser/OS
   chrome and font rendering — it simply flows to the next section
   instead of being clipped. */
html {
  scroll-behavior: smooth;
  height: 100%;
}

body { min-height: 100%; }

main > section.hero,
main > .not-found {
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  overflow-y: visible;
}

main > section.hero {
  overflow-y: hidden;
}

main > .not-found {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The page-hero banner (interior page title strip) is intentionally NOT
   full screen — it's a compact banner, not a slide. Full-height only made
   sense for the homepage hero; on interior pages it left a huge empty gap
   before the real content. */
main > section.page-hero {
  height: auto;
  min-height: 300px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 2rem;
  overflow: hidden;
}

@media (min-width: 1024px) {
  main > section.page-hero {
    width: 100%;
    height: auto;
    aspect-ratio: unset;
    min-height: 340px;
    padding-bottom: 2.5rem;
  }
}

/* Regular content sections now size naturally to their content instead
   of being stretched to fill the full screen — stretching short
   content to 100vh with centered alignment left large, awkward empty
   gaps above and below it that read as broken or unfinished. */
main > .reveal:first-child { padding-top: 4.5rem; }

@media (min-width: 1024px) {
  main > .reveal:first-child { padding-top: 0; }
}


.awards-bar {
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 2rem 1.5rem;
}

.awards-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
  max-width: 80rem;
  margin: 0 auto;
}

.award-seal {
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.award-seal-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--secondary);
  background: rgba(208, 175, 145, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem;
}

.award-seal-icon svg {
  width: 19px;
  height: 19px;
  color: var(--secondary);
}

.award-seal-text {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--primary-foreground);
  opacity: 0.85;
}

/* ===== Reviews ===== */
.review-card {
  border: 1px solid var(--border);
  padding: 2rem;
}

.review-quote {
  font-family: 'Fraunces', serif;
  font-size: 1.125rem;
  font-style: italic;
  color: var(--foreground);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.review-author {
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
}

.review-origin {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* ===== Cuisine Grid ===== */
.cuisine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .cuisine-grid { gap: 1.5rem; }
}

.cuisine-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  width: 100%;
  aspect-ratio: 3/4;
  max-height: 44vh;
  max-height: 44dvh;
}

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

.cuisine-item:hover img { transform: scale(1.05); }

.cuisine-caption {
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .cuisine-caption { font-size: 0.75rem; }
}

/* ===== Flavours to Savour — dining.php "Our Cuisine" ===== */
.flavours-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 3rem;
}

.flavours-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px -20px rgba(61, 38, 20, 0.35);
}

.flavours-card-photo {
  position: relative;
  aspect-ratio: 4/4.3;
  overflow: hidden;
}

.flavours-card-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(61, 38, 20, 0.22);
  z-index: 1;
  pointer-events: none;
}

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

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

.flavours-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 1.25rem 1.35rem;
  text-align: center;
  background: linear-gradient(to top, rgba(61, 38, 20, 0.85) 0%, rgba(61, 38, 20, 0.55) 60%, rgba(61, 38, 20, 0) 100%);
}

.flavours-card-title {
  font-family: 'Fraunces', serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-white);
  margin: 0;
}

.flavours-card-ornament {
  display: none;
}

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

/* ===== Cuisine Showcase — Editorial Ornaments (dining.php "Our Cuisine") =====
   Scoped to their own classes rather than the shared .cuisine-* rules above,
   since cuisine-grid/cuisine-item/cuisine-caption are also reused as a plain
   photo gallery on suite-room.php and deluxe-double-room.php. */
.ornament-divider {
  display: flex;
  justify-content: center;
  color: var(--secondary);
  margin: 1rem auto 1.5rem;
}

.ornament-divider--sm { margin: 0.85rem auto 0; }

.ornament-divider--logo {
  align-items: center;
  gap: 10px;
  color: var(--barn-brown);
}

.ornament-divider--logo .ornament-divider-line {
  height: 1px;
  width: 60px;
  background: var(--barn-brown);
}

.ornament-divider--logo .ornament-divider-scroll {
  flex-shrink: 0;
}

.ornament-divider--logo .ornament-divider-logo {
  height: 34px;
  width: auto;
  flex-shrink: 0;
}

.leaf-sprig-divider {
  display: flex;
  color: var(--secondary);
  margin: 1rem 0;
}

.dining-wave-divider {
  position: relative;
  line-height: 0;
}

.dining-wave-svg {
  width: 100%;
  height: 60px;
  display: block;
}

@media (min-width: 768px) {
  .dining-wave-svg { height: 90px; }
}

.dining-wave-emblem {
  position: absolute;
  right: 1.5rem;
  bottom: -24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #16241a;
  border: 1px solid rgba(231, 202, 173, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

@media (min-width: 768px) {
  .dining-wave-emblem { right: 3rem; width: 60px; height: 60px; bottom: -30px; }
}

.dining-wave-emblem svg {
  width: 20px;
  height: 20px;
  color: var(--secondary);
}

/* ===== Gallery Grid ===== */

/* Gallery: category filter pills */
.gallery-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
}

.gallery-filter-btn {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--saddle-brown);
  background: transparent;
  border: 1px solid var(--secondary);
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.gallery-filter-btn:hover { background: rgba(208, 175, 145, 0.25); }

.gallery-filter-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.gallery-item[hidden] { display: none; }

.gallery-empty-state {
  text-align: center;
  font-family: 'Lato', sans-serif;
  color: var(--muted-foreground);
  padding: 2rem 0;
}

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

@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

.gallery-item { overflow: hidden; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.gallery-item:hover img { transform: scale(1.05); }

.gallery-item:first-child {
  aspect-ratio: 16/9;
}

@media (min-width: 768px) {
  .gallery-item:first-child {
    grid-column: span 2;
  }
}

.gallery-item:not(:first-child) {
  aspect-ratio: 1/1;
}

/* ===== Sustainability ===== */
.sustainability-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* ===== Form ===== */
.contact-form { display: flex; flex-direction: column; gap: 1rem; }

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

.form-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--foreground);
  font-family: 'Lato', sans-serif;
}

.form-input,
.form-textarea {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 0.75rem 1rem;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  color: var(--foreground);
  outline: none;
  transition: border-color 0.3s;
  width: 100%;
}

.form-input:focus,
.form-textarea:focus { border-color: var(--primary); }

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

.form-success {
  display: none;
  background: var(--accent);
  color: white;
  padding: 1rem 1.5rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  text-align: center;
}

.form-success.show { display: block; }

.form-error {
  display: none;
  color: #b23b3b;
  background: rgba(178, 59, 59, 0.08);
  border: 1px solid rgba(178, 59, 59, 0.3);
  padding: 0.75rem 1rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
  border-radius: 0.4rem;
  margin: -0.5rem 0 0.5rem;
}

.form-error.show { display: block; }

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

@media (min-width: 480px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2372482B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 16px;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form-disclaimer {
  font-size: 0.75rem;
  opacity: 0.55;
  font-family: 'Lato', sans-serif;
  margin: -0.25rem 0 0.25rem;
}

/* ===== Contact page: info block, detail rows, WhatsApp bar, map ===== */
.contact-page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .contact-page-layout { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
}

.contact-divider {
  width: 48px;
  height: 2px;
  background: var(--secondary);
  margin: 0.85rem 0 1.5rem;
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.contact-detail-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--saddle-brown);
}

.contact-detail-icon svg { width: 18px; height: 18px; }

.contact-detail-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  font-family: 'Lato', sans-serif;
  margin-bottom: 0.25rem;
}

.contact-detail-value {
  font-family: 'Lato', sans-serif;
  font-size: 0.9rem;
  color: var(--foreground);
}

a.contact-detail-value:hover { color: var(--primary); }

.contact-detail-value--static { opacity: 0.75; }

.whatsapp-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid rgba(84, 195, 139, 0.3);
  background: rgba(84, 195, 139, 0.06);
  padding: 1rem 1.25rem;
  margin-top: 2rem;
  transition: background 0.3s ease;
}

.whatsapp-bar:hover { background: rgba(84, 195, 139, 0.12); }

.whatsapp-bar svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent);
}

.whatsapp-bar p {
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
  color: var(--foreground);
  margin: 0;
}

.map-section { padding-bottom: 0; }

.contact-form-section { padding-bottom: 1.5rem; }

@media (min-width: 1024px) {
  .contact-form-section { padding-bottom: 2rem; }
}

.map-section .container-hotel { padding: 0.5rem 1.5rem 2rem; }

@media (min-width: 1024px) {
  .map-section .container-hotel { padding: 0.5rem 6rem 2rem; }
}

.map-embed { display: block; }

/* ===== Utilities ===== */
.text-center { text-align: center; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }

.italic { font-style: italic; }
.font-bold { font-weight: 700; }

.flex-center-gap { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) {
  .flex-center-gap { flex-direction: row; }
}

.badge {
  display: inline-block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  background: var(--accent);
  color: white;
  padding: 0.25rem 0.75rem;
  margin-bottom: 1rem;
}

/* ===== Policies ===== */
.policy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .policy-grid { grid-template-columns: repeat(2, 1fr); }
}

.policy-link {
  border: 1px solid var(--border);
  padding: 1.5rem;
  display: block;
  transition: box-shadow 0.3s;
}

.policy-link:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); }

.policy-link-title {
  font-family: 'Fraunces', serif;
  font-size: 1.125rem;
  color: var(--foreground);
  margin-bottom: 0.5rem;
}

.policy-link-desc {
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

/* ===== Payment Options ===== */
.payment-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.payment-item {
  font-family: 'Lato', sans-serif;
  font-size: 0.9375rem;
  color: var(--foreground);
}

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

@media (min-width: 768px) {
  .security-grid { grid-template-columns: repeat(4, 1fr); }
}

.security-item {
  border: 1px solid var(--border);
  padding: 1.5rem;
  text-align: center;
}

.security-title {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  color: var(--foreground);
  margin-bottom: 0.25rem;
}

.security-desc {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-family: 'Lato', sans-serif;
}

/* ===== Feature List ===== */
/* ===== Room Detail — Magazine Style Header ===== */
.room-magazine-photo {
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 16/7;
  max-width: 50rem;
  margin: 0 auto 2rem;
}

.room-magazine-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .room-magazine-photo { aspect-ratio: 4/3; }
}

/* Room detail pages (Suite/Deluxe/Superior): full-bleed banner photo
   with the title overlaid at the bottom, matching the Evening Dining
   banner treatment on dining.php. */
.room-hero-banner {
  position: relative;
  height: 42vh;
  height: 42dvh;
  min-height: 280px;
  max-height: 440px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.room-hero-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-hero-banner-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23,10,5,0.05) 0%, rgba(23,10,5,0.85) 100%);
}

.room-hero-banner-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 1.75rem 1.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .room-hero-banner-content { padding: 2rem 3rem; }
}

.room-hero-banner-content .section-title { margin-bottom: 0; }

/* Room detail pages (Suite/Deluxe/Superior), Option E: a floating info
   card overlaps the bottom edge of the photo instead of text sitting
   directly on the image — avoids the fixed header ever overlapping
   photo content, since the photo isn't full-bleed under the header. */
.room-photo-card-wrap {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
  padding: 6.5rem 1.5rem 4.5rem;
}

@media (min-width: 768px) {
  .room-photo-card-wrap { padding: 7.5rem 3rem 5rem; }
}

/* Positioning context for the card below — deliberately NOT the element
   with overflow:hidden, so the card isn't clipped when it overlaps the
   photo's bottom edge. */
.room-photo-frame {
  position: relative;
}

.room-photo-card-photo {
  aspect-ratio: 3/2;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(61, 38, 20, 0.2);
}

.room-photo-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.room-info-card {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  background: var(--background);
  border: 1px solid var(--secondary);
  border-radius: 12px;
  padding: 1.25rem 2rem;
  text-align: center;
  box-shadow: 0 12px 30px rgba(61, 38, 20, 0.18);
  width: 88%;
  max-width: 30rem;
}

.room-info-card .section-title {
  margin: 0;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
}

@media (max-width: 640px) {
  .room-photo-card-photo { aspect-ratio: 4/3; }
  .room-info-card { padding: 0.9rem 1.25rem; }
}

/* Amenities collapse into a single wrapping row on the detail pages,
   instead of the 2-column icon-above-label grid used elsewhere, since
   the banner already establishes plenty of visual weight above. */
.room-amenity-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.25rem 2.75rem;
  max-width: 68rem;
  margin: 0 auto 2rem;
}

.room-amenity-row .room-amenity-box {
  flex: 0 1 11.5rem;
}

.feature-list { display: flex; flex-direction: column; gap: 0.5rem; }
.feature-item {
  font-family: 'Lato', sans-serif;
  font-size: 0.9375rem;
  color: var(--foreground);
}

/* ===== Accommodation Listing — Enhanced Room Cards ===== */
.room-availability-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 20px;
}

.room-tags {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.6rem;
  column-gap: 0.75rem;
  margin-bottom: 1.5rem;
  min-width: 0;
}

.room-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.8125rem;
  color: var(--foreground);
  border: 1px solid var(--barn-brown);
  border-radius: 999px;
  padding: 0.5rem 1rem;
}

.room-tag svg {
  width: 15px;
  height: 15px;
  color: var(--barn-brown);
  flex-shrink: 0;
}

@media (max-width: 400px) {
  .room-tags {
    column-gap: 0.5rem;
  }
  .room-tag {
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
    gap: 0.4rem;
  }
  .room-tag svg {
    width: 13px;
    height: 13px;
  }
}

.room-amenity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 0.75rem;
  margin-bottom: 2rem;
}

@media (min-width: 480px) {
  .room-amenity-grid { grid-template-columns: repeat(3, 1fr); }
}

.room-amenity-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.65rem;
  padding: 0.5rem 0.5rem;
}

.room-amenity-box svg {
  width: 20px;
  height: 20px;
  padding: 14px;
  box-sizing: content-box;
  border: 1px solid var(--secondary);
  border-radius: 50%;
  background: var(--background);
  color: var(--saddle-brown);
  flex-shrink: 0;
}

.room-amenity-box img {
  width: 36px;
  height: 36px;
  padding: 14px;
  box-sizing: content-box;
  border: 1px solid var(--secondary);
  border-radius: 50%;
  background: var(--background);
  object-fit: contain;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .room-amenity-box img {
    width: 48px;
    height: 48px;
    padding: 16px;
  }
}

.room-amenity-box span {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  color: var(--foreground);
  line-height: 1.4;
}

.room-check-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}

.room-check-list li {
  position: relative;
  padding-left: 1.6rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  color: var(--foreground);
  line-height: 1.4;
}

.room-check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
}

.room-check-list li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 0.45rem;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid var(--saddle-brown);
  border-bottom: 1.5px solid var(--saddle-brown);
  transform: rotate(-45deg);
}

.room-check-list--2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem 1.5rem;
}

@media (min-width: 480px) {
  .room-check-list--2col { grid-template-columns: 1fr 1fr; }
}

.room-check-list--icons li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-left: 0;
  font-size: 1.05rem;
}

.room-check-list--icons li::before,
.room-check-list--icons li::after {
  content: none;
}

.room-check-list--icons li img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.room-check-list--icons.room-check-list--icons-circle li img {
  width: 34px;
  height: 34px;
  padding: 12px;
  box-sizing: content-box;
  border: 1px solid var(--secondary);
  border-radius: 50%;
  background: var(--background);
}

.room-card-photo-wrap { display: flex; flex-direction: column; gap: 0.75rem; }

.room-card-gate-img {
  display: block;
  max-width: 220px;
  width: 100%;
  height: auto;
  margin-top: 1.5rem;
}

.room-card-thumbs {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.room-card-thumbs::-webkit-scrollbar {
  display: none;
}

.room-card-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 0.5rem;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  cursor: pointer;
  background: none;
  opacity: 0.6;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.room-card-thumb.active,
.room-card-thumb:hover { opacity: 1; border-color: var(--secondary); }

.room-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-direct-badge {
  width: 48px;
  height: 48px;
  margin: 0 auto 1.25rem;
  border: 1px solid rgba(24,12,5,0.3);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary-foreground);
}

.book-direct-badge svg { width: 22px; height: 22px; }

/* Room pages: the photo gallery section right after the main content
   was stacking its own top padding on top of the previous section's
   bottom padding, reading as an oversized empty gap. Tighten just the
   top side here. */
.room-gallery-section { padding-top: 1.25rem; }

@media (min-width: 768px) {
  .room-gallery-section { padding-top: 1.5rem; }
}

@media (min-width: 1024px) {
  .room-gallery-section { padding-top: 2rem; }
}

/* Accommodation page: each room card (Suite/Deluxe/Superior) fits one
   screen individually, matching the pattern used on dining.php's Bar &
   Lounge and From Garden to Table sections. Only applies at >=1024px,
   matching .image-text-grid's own breakpoint for going side-by-side —
   below that the columns stack and natural height is correct. */
.room-card-section {
  min-height: 0;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid rgba(208, 175, 145, 0.5);
  scroll-margin-top: 90px;
}

@media (min-width: 1024px) {
  .room-card-section .image-text-grid { align-items: start; }
}

.room-card-section--tinted {
  background: var(--muted);
}

@media (min-width: 768px) {
  .room-card-section { padding-top: 2.25rem; padding-bottom: 2.25rem; }
}

@media (min-width: 1024px) {
  .room-card-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  /* Option 2: enlarge the room photo now that the section has a full
     screen to work with, instead of leaving it at the standard
     .story-image-frame size used elsewhere (index.php Our Story, etc.) */
  .room-card-section .story-image-frame {
    height: 74vh;
    height: 74dvh;
    max-height: 760px;
  }

  /* Option 2: amenities switch from the icon-above-label vertical style
     (used on the individual room detail pages) to icon-left horizontal
     rows here, so they scale better across the wider column this
     enlarged layout leaves for text. */
  .room-card-section .room-amenity-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1.5rem;
  }

  .room-card-section .room-amenity-box {
    flex-direction: row;
    text-align: left;
    gap: 0.85rem;
    padding: 0;
  }

  .room-card-section .room-amenity-box span { font-size: 0.85rem; }
}

/* ===== 404 ===== */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 2rem;
}

.not-found-num {
  font-family: 'Fraunces', serif;
  font-size: 8rem;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 1rem;
}

.not-found-title {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  color: var(--foreground);
  margin-bottom: 1rem;
}

.not-found-desc {
  font-family: 'Lato', sans-serif;
  color: var(--muted-foreground);
  margin-bottom: 2rem;
}

/* ===== Responsive helpers ===== */
.hidden-mobile { display: none; }
@media (min-width: 768px) {
  .hidden-mobile { display: block; }
}

.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
/* ===== Dining Page — Rustic Lodge (Option 2) ===== */

/* From Garden to Table: same one-screen, centered treatment as Bar &
   Lounge below — the section's natural content height was shorter than
   the viewport, leaving a stray empty gap before the next section.
   Only applies at >=1024px, matching .image-text-grid's own breakpoint
   for going side-by-side — below that the columns stack and natural
   height (no forced full-viewport centering) is correct. */
.restaurant-section {
  min-height: 0;
  padding-top: 2rem;
}

@media (min-width: 768px) {
  .restaurant-section { padding-top: 3.5rem; }
}

@media (min-width: 1024px) {
  .restaurant-section {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    /* Extra top padding offsets the fixed header (60px scrolled height)
       so the centered content sits mid-way in the VISIBLE viewport
       below the header, not the full 100vh. */
    padding-top: calc(2.5rem + 60px);
    padding-bottom: 2rem;
  }
}

/* Larger photo for this section: fills its column width (instead of
   .aspect-45's centered, narrower-than-column sizing) and allows a
   taller max-height since the section now has more room to work with. */
.restaurant-photo {
  width: 100%;
  aspect-ratio: 4/5;
  max-height: 60vh;
  max-height: 60dvh;
  overflow: hidden;
  margin: 0;
}

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

.restaurant-photo:hover img { transform: scale(1.05); }

@media (max-width: 1023px) {
  .restaurant-photo { max-height: 50vh; max-height: 50dvh; }
}

@media (max-width: 767px) {
  .restaurant-photo { max-height: 38vh; max-height: 38dvh; }
}

/* Bar & Lounge: fit the whole section within one screen, image sized up.
   Only applies at >=1024px, matching .image-text-grid's own breakpoint for
   going side-by-side — below that the columns stack and natural height
   (no forced full-viewport centering) is correct. */
/* Framed images: rounded corners with a fine brown keyline */
.img-framed {
  border-radius: 12px;
  border: 1px solid var(--barn-brown);
  overflow: hidden;
}

/* Ornate notched-corner frame with a gold keyline, evoking a mounted
   picture frame rather than a plain rounded rectangle. */
.img-framed--ornate {
  --notch: 22px;
  padding: 7px;
  background: linear-gradient(155deg, #cbaa5c, #8a6a2f);
  clip-path: polygon(
    var(--notch) 0, calc(100% - var(--notch)) 0,
    100% var(--notch), 100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%, var(--notch) 100%,
    0 calc(100% - var(--notch)), 0 var(--notch)
  );
}

.img-framed--ornate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(
    calc(var(--notch) - 5px) 0, calc(100% - var(--notch) + 5px) 0,
    100% calc(var(--notch) - 5px), 100% calc(100% - var(--notch) + 5px),
    calc(100% - var(--notch) + 5px) 100%, calc(var(--notch) - 5px) 100%,
    0 calc(100% - var(--notch) + 5px), 0 calc(var(--notch) - 5px)
  );
}

/* Softer frame variant: larger radius, no keyline, gentle lift shadow */
.img-framed--soft {
  border: none;
  border-radius: 24px;
  box-shadow: 0 20px 45px rgba(61, 38, 20, 0.22);
}

/* Opening Hours card (dining.php "Bar & Lounge") */
.hours-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  text-align: left;
  border: 1px solid var(--secondary);
  border-radius: 14px;
  background: var(--background);
  padding: 1.5rem 1.75rem;
  max-width: 26rem;
  margin: 0 auto;
}

.hours-card-icon {
  flex-shrink: 0;
  width: 3.75rem;
  height: 3.75rem;
  color: var(--saddle-brown);
}

.hours-card-icon svg { width: 100%; height: 100%; }

.hours-card-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--saddle-brown);
  margin-bottom: 0.5rem;
}

.hours-card-line {
  font-family: 'Lato', sans-serif;
  color: var(--foreground);
  line-height: 1.6;
}

@media (max-width: 480px) {
  .hours-card { padding: 1.25rem; gap: 1rem; }
  .hours-card-icon { width: 3rem; height: 3rem; }
}

.estate-banner--dining {
  min-height: 380px;
  max-height: none;
  flex: 1 1 auto;
  /* Fixed clearance so the label/heading never sits under the fixed
     header (60-80px) — this banner is shorter now that it shares the
     screen with the hours band, so centering alone can leave very
     little room above the text depending on scroll position. */
  padding-top: 76px;
}

/* The content's own top padding would stack on top of the clearance
   above, needlessly inflating the section further — the section-level
   padding-top already handles header clearance on its own. */
.estate-banner--dining .estate-banner-content { padding-top: 1.25rem; padding-bottom: 1.5rem; }

/* Minimal variant (Option 6): the photo carries only the headline with a
   light, mostly-transparent overlay that just fades in at the bottom for
   legibility — the descriptive copy and hours moved to the cream band
   below instead of competing with the image. */
.estate-banner--minimal {
  min-height: 320px;
}

.estate-banner-gradient--minimal {
  background: linear-gradient(180deg, rgba(23, 10, 5, 0.05) 0%, rgba(23, 10, 5, 0.15) 55%, rgba(23, 10, 5, 0.6) 100%);
}

/* ===== Dining page redesign additions ===== */

/* 1. The Pedro Barn Table: solid cream ground, no photo backdrop */
.dining-promo--flat {
  position: static;
  overflow: visible;
  background: var(--background);
  padding: 3.5rem 0 !important;
}

.dining-promo--flat .dining-promo-grid { align-items: start !important; }

/* 2. Dining Hours: pill-shaped strip instead of a boxy card */
/* 3. Afternoon Tea: always bottom-anchored full-bleed (not left-right) */
.estate-banner--bottom { align-items: flex-end; }

.estate-banner--tall {
  max-height: 900px;
  min-height: max(420px, 85vh);
  min-height: max(420px, 85dvh);
}

/* Split-panel treatment for photos that are portrait-oriented (e.g.
   Afternoon Tea) — a fixed-width photo column at a taller aspect ratio
   crops far less than forcing the same photo across a full-bleed
   landscape banner. */
.dining-split-banner {
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  .dining-split-banner {
    position: relative;
    overflow: hidden;
    height: calc(100vh - 60px);
    max-height: 1080px;
    min-height: 580px;
    background: var(--primary);
  }
}

.dining-split-banner-right {
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  .dining-split-banner-right {
    position: relative;
    z-index: 2;
    flex-direction: row;
    width: 38%;
    margin-left: auto;
    height: 100%;
  }
}

.dining-split-banner-text {
  background: var(--primary);
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* old Edge/IE */
}

.dining-split-banner-text::-webkit-scrollbar {
  display: none;               /* Chrome, Safari, new Edge */
}

@media (min-width: 900px) {
  .dining-split-banner-text { background: var(--primary); }
}

.dining-split-banner-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.dining-split-banner-label .rule {
  width: 28px;
  height: 1px;
  background: var(--secondary);
  display: inline-block;
  flex-shrink: 0;
}

.dining-split-banner-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .dining-split-banner-text { padding: 3rem 4rem; }
}

.dining-split-banner-photo {
  width: 100%;
  aspect-ratio: 3/2;
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .dining-split-banner-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    z-index: 1;
    overflow: hidden;
  }
}

.dining-split-banner-photo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(30px) brightness(0.7) saturate(1.1);
  transform: scale(1.15);
  display: block;
}

@media (min-width: 900px) {
  /* Constrain the photo container itself to the visible strip
     (matches the text panel's width on the other side), then let the
     image cover it fully — guarantees zero letterbox gap on any edge. */
  .dining-split-banner-photo {
    width: 62%;
  }
}

.dining-split-banner-photo-fg {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

@media (min-width: 900px) {
  .dining-split-banner-photo-fg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 20% center;
    transform: scale(1.15);
    transform-origin: 20% 50%;
  }
}

@media (max-width: 899px) {
  .dining-split-banner-photo-bg { display: none; }
  .dining-split-banner-photo-fg { object-fit: cover; }
}

.dining-split-banner-seam {
  display: none;
}

@media (min-width: 900px) {
  .dining-split-banner-seam {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    flex-shrink: 0;
    background: var(--barn-brown);
  }

  .dining-split-banner-seam span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Lato', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--secondary);
    white-space: nowrap;
  }

  .dining-split-banner-label--mobile { display: none; }
}

/* Pub page — light split intro (cream text panel + photo), matching
   the "A Comfortable Place to Settle In" reference layout. */
.pub-split-intro {
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  .pub-split-intro {
    flex-direction: row;
    min-height: 520px;
  }
  .pub-split-intro--reverse {
    flex-direction: row-reverse;
  }
  .pub-split-intro--fixed {
    align-items: stretch;
    min-height: 0;
  }
  .pub-split-intro--fixed .pub-split-intro-photo {
    height: auto;
    position: relative;
  }
  .pub-split-intro--fixed .pub-split-intro-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pub-split-intro--fixed .pub-split-intro-text {
    padding-bottom: 2rem;
    text-align: center;
    align-items: center;
  }
  .pub-split-intro--fixed .pub-split-intro-rule {
    margin-left: auto;
    margin-right: auto;
  }
  .pub-split-intro--fixed .pub-split-intro-desc {
    margin-left: auto;
    margin-right: auto;
  }
  .pub-split-intro--fixed .pub-split-intro-text {
    width: 50%;
  }
  .pub-split-intro--fixed .pub-split-intro-photo {
    width: 50%;
  }
}

.pub-split-intro-text {
  background: #FFFFFF;
  padding: 3rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.pub-split-intro-text > a.btn {
  align-self: flex-start;
}

.pub-split-intro--text-center .pub-split-intro-text {
  text-align: center;
  align-items: center;
  justify-content: center;
}

.pub-split-intro--text-center .pub-split-intro-rule {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 900px) {
  .pub-split-intro-text {
    width: 46%;
    padding: 4rem 4.5rem 4rem 4rem;
  }
}

.pub-split-intro-eyebrow {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 1.25rem;
}

.pub-split-intro-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  color: var(--primary);
  line-height: 1.18;
  margin: 0 0 1.5rem;
}

.pub-split-intro-rule {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--saddle-brown);
  margin: 0 0 1.5rem;
}

.pub-split-intro-desc {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--primary);
  opacity: 0.82;
  margin: 0 0 2rem;
  max-width: 32rem;
}

.pub-split-intro-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.pub-split-intro-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
}

@media (min-width: 900px) {
  .pub-split-intro-photo {
    width: 54%;
    aspect-ratio: auto;
  }
}

.pub-split-intro-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pub page — "From Fire to Table" offer row (reuses .offer-row base) */
#pub-fire-to-table {
  height: 460px;
}

#pub-fire-to-table .offer-row-body { padding: 2.5rem 4rem; }

#pub-fire-to-table .offer-row-body h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}

@media (max-width: 899px) {
  #pub-fire-to-table { height: auto; }
  #pub-fire-to-table .offer-row-body { padding: 2.25rem 2rem; }
}

/* Wellness page — Fitness Center, "Design B" layout:
   split panel (text + icon grid on left, photo stack on right). */
.fitness-b-section {
  background: #FFFFFF;
  padding: 2.5rem 0;
}

@media (min-width: 900px) {
  .fitness-b-section {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    padding: 2rem 0;
  }
}

.fitness-b-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

@media (min-width: 900px) {
  .fitness-b-grid {
    grid-template-columns: 2fr 3fr;
    align-items: center;
    gap: 3.5rem;
  }
}

.fitness-b-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--saddle-brown);
  margin: 0 0 0.5rem;
}

.fitness-b-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(2.25rem, 3.8vw, 3.1rem);
  color: var(--primary);
  margin: 0 0 1rem;
}

.fitness-b-desc {
  font-family: 'Lato', sans-serif;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--muted-foreground);
  margin: 0;
  max-width: 30rem;
}

.fitness-b-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  color: var(--secondary);
}

.fitness-b-divider-line {
  height: 1px;
  width: 50px;
  background: var(--secondary);
  flex-shrink: 0;
}

.fitness-b-divider svg { width: 16px; height: 16px; flex-shrink: 0; }

.fitness-b-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1.25rem;
  margin-top: 2rem;
}

.fitness-b-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.fitness-b-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fitness-b-feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fitness-b-feature-heading {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 0.15rem;
}

.fitness-b-feature-text {
  font-family: 'Lato', sans-serif;
  font-size: 0.9rem;
  color: var(--muted-foreground);
  margin: 0;
}

.fitness-b-photo-main {
  border-radius: 8px;
  overflow: hidden;
}

.fitness-b-photo-main img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

@media (min-width: 900px) {
  .fitness-b-photo-main img {
    height: 58vh;
    aspect-ratio: auto;
    max-height: 560px;
  }
}

.fitness-b-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.fitness-b-thumbs img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  cursor: pointer;
}

@media (min-width: 900px) {
  .fitness-b-thumbs img {
    height: 14vh;
    aspect-ratio: auto;
    max-height: 130px;
  }
}

.estate-banner-gradient--bottom {
  background: linear-gradient(180deg, rgba(23, 10, 5, 0.15) 0%, rgba(23, 10, 5, 0.35) 45%, rgba(23, 10, 5, 0.92) 100%);
}

/* 5. Crafted to Delight: captions overlaid on the photo itself */
.cuisine-item--overlay {
  position: relative;
}

.cuisine-item--overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23, 10, 5, 0.75) 0%, rgba(23, 10, 5, 0) 55%);
}

/* Merged full-bleed version: photo fills the whole section, text and
   features overlay directly on it instead of stacking as separate cards */
.pub-merged {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
}

.pub-merged-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pub-merged-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 10, 5, 0.75) 0%,
    rgba(23, 10, 5, 0.15) 32%,
    rgba(23, 10, 5, 0.15) 62%,
    rgba(23, 10, 5, 0.85) 100%
  );
}

.pub-merged-content {
  position: relative;
  z-index: 1;
  padding: 2.5rem 1.5rem 1.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .pub-merged-content { padding: 3.5rem 3rem 1.5rem; }
}

.pub-merged-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 1rem;
}

.pub-merged-label .dash {
  width: 22px;
  height: 1px;
  background: var(--secondary);
  display: inline-block;
}

.pub-merged-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  color: #fff;
  line-height: 1.3;
  max-width: 30rem;
  margin: 0 auto;
}

.pub-merged-features {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 0 1.5rem 2rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
}

.pub-merged-feature {
  font-family: 'Lato', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-white);
}

.pub-split-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 0.5rem;
}

.pub-split-features .pub-merged-feature {
  color: var(--secondary);
}

/* Merged continuous cocktail strip: photos butt edge-to-edge with a thin
   hairline instead of a visible gap between them */
.pub-coverflow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  max-width: 56rem;
  margin: 0 auto;
}

.pub-coverflow-peek {
  flex: 0 0 auto;
  width: 85px;
  height: 220px;
  border-radius: 10px;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (max-width: 400px) {
  .pub-coverflow { gap: 0.6rem; }
  .pub-coverflow-peek { width: 60px; height: 160px; }
}

@media (min-width: 640px) {
  .pub-coverflow-peek { width: 150px; height: 340px; }
}

.pub-coverflow-peek:hover { opacity: 0.65; }

.pub-coverflow-peek img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pub-coverflow-main {
  flex: 1 1 auto;
  max-width: 28rem;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}

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

.pub-coverflow-caption {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  color: #fff;
  text-align: center;
  margin: 1.5rem 0 0;
}

.pub-coverflow-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.pub-coverflow-dots span {
  width: 7px;
  height: 7px;
  padding: 8px;
  background-clip: content-box;
  border-radius: 50%;
  background-color: rgba(208, 175, 145, 0.35);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  box-sizing: content-box;
}

.pub-coverflow-dots span.active {
  background: var(--secondary);
  transform: scale(1.3);
}

/* ===== Pub slideshow: matches sibling split sections (photo left, text right) ===== */

.pub-slideshow-link {
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #14472E;
  text-decoration: none;
  background: var(--accent);
  border: none;
  padding: 0.95rem 2.4rem;
  border-radius: 999px;
  transition: background 0.25s ease, transform 0.25s ease;
}

.pub-slideshow-link:hover { background: #46AD79; transform: translateY(-1px); }

.pub-slideshow-link.btn-two-line {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  padding: 0.65rem 2.4rem;
}

.pub-slideshow--split {
  display: flex;
  flex-direction: column;
  background: #F5EEE1;
}

@media (min-width: 900px) {
  .pub-slideshow--split {
    flex-direction: row;
    height: calc(100vh - 60px);
    max-height: 900px;
    min-height: 480px;
    overflow: hidden;
  }
}

.pub-slideshow-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
}

@media (min-width: 900px) {
  .pub-slideshow-photo {
    width: 46%;
    aspect-ratio: auto;
  }
}

.pub-slideshow-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

.pub-slideshow-text {
  background: #F5EEE1;
  padding: 3rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* On mobile, show the text before the photo so this section's
   carousel doesn't sit directly against the previous section's
   photo with no text break in between. Desktop keeps photo-left,
   text-right (DOM order), unaffected by this. */
@media (max-width: 899px) {
  .pub-slideshow-text {
    order: -1;
  }
}

@media (min-width: 900px) {
  .pub-slideshow-text {
    width: 54%;
    padding: 4rem 4.5rem 4rem 4rem;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .pub-slideshow-text::-webkit-scrollbar {
    display: none;
  }
}

.pub-frame-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pub-frame-arrow:hover {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.85);
}

.pub-frame-arrow svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pub-frame-arrow--prev { left: 16px; }
.pub-frame-arrow--next { right: 16px; }

@media (min-width: 768px) {
  .pub-frame-arrow--prev { left: 20px; }
  .pub-frame-arrow--next { right: 20px; }
}

.pub-frame-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.pub-frame-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}

.pub-frame-dots span.active {
  background: var(--accent);
  width: 20px;
  border-radius: 4px;
}

.pub-intro-quote {
  border-left: 2px solid var(--secondary);
  padding-left: 1.25rem;
  margin: 1.5rem auto;
  max-width: 34rem;
  text-align: left;
}

.pub-intro-quote p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--foreground);
  line-height: 1.6;
  margin: 0;
}

.pub-intro-tagline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--saddle-brown);
  line-height: 1.65;
  margin: 0 0 2.5rem;
}

.pub-menu-downloads {
  border-top: 1px solid var(--border);
  padding-top: 2rem;
}

.pub-menu-downloads-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
}

.pub-menu-downloads-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.cuisine-caption-overlay {
  position: absolute;
  left: 1rem;
  bottom: 0.85rem;
  z-index: 2;
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-white);
}

/* 6. Bar & Lounge: left-aligned, hours as one inline pill */

.estate-banner-content--minimal {
  max-width: none;
  padding-bottom: 2rem;
}

.dining-hours-lead {
  max-width: 40rem;
  margin: 0 auto 1rem;
}

/* Split layout (photo + text) replacing the old full-bleed banner, plus
   a bounded card for the Dining Hours band so it reads as a distinct
   panel rather than floating on the plain page background. */
.dining-intimate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 900px) {
  .dining-intimate-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.dining-intimate-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

/* Compact Dining Hours summary within the Evening Dining banner */
.banner-hours-summary {
  margin-top: 0.85rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.banner-hours-summary strong {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  color: #fff;
}

.banner-hours-dot {
  color: var(--secondary);
  font-size: 0.55rem;
}

@media (max-width: 639px) {
  .banner-hours-summary { font-size: 0.78rem; gap: 0.45rem; margin-top: 1rem; }
}


.ornament-divider--light { color: var(--warm-white); }



/* Dark CTA with green pill button */
.cta-dark { background: var(--primary); }

.cta-dark--black { background: #000000; }

/* ===== Dining promo (photo backdrop + headline + cuisine pills) ===== */
.dining-promo {
  position: relative;
  overflow: hidden;
  padding: 4rem 1.5rem;
}

@media (min-width: 900px) {
  .dining-promo { padding: 4rem 3rem; }
}

.dining-promo-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 900px) {
  .dining-promo-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
}

.dining-promo-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.9rem, 4.5vw, 2.75rem);
  line-height: 1.2;
  color: var(--primary);
}

.dining-cuisine-title {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 4.5vw, 2.4rem);
  line-height: 1.2;
  color: var(--primary);
}

.dining-promo-title em {
  font-style: italic;
  color: var(--barn-brown);
}

/* Photo + text split for The Pedro Barn Table */
.dining-promo--split .dining-promo-grid {
  grid-template-columns: 1fr;
  align-items: start;
}

.dining-promo--split .dining-promo-grid--centered {
  align-items: center;
}

.dining-promo--split .dining-promo-grid--centered > div:first-child {
  margin-top: 2rem;
}

/* Mobile-only: this section sits directly under the page-stat-strip on
   About, which already separates it from the hero above. The section's
   own 4rem top padding plus the 2rem margin-top above were stacking
   into a large empty gap before "The Estate" heading on phones. Trim
   both here; desktop/tablet (where the text sits beside the photo)
   keep their original spacing untouched. */
@media (max-width: 899px) {
  .estate-intro {
    padding-top: 1.5rem;
  }

  .dining-promo--split .dining-promo-grid--centered > div:first-child {
    margin-top: 0;
  }
}

/* Desktop: the same 2rem margin-top above, combined with the photo's own
   2.2rem margin-top and align-items:center, was leaving a large empty
   gap above "The Estate" heading — bigger than the gap above the photo
   beside it. This selector is scoped to .estate-intro (the only section
   using the centered split-grid), so no other page is affected. */
@media (min-width: 900px) {
  .estate-intro .dining-promo-grid--centered > div:first-child {
    margin-top: 0;
  }
}

@media (min-width: 900px) {
  .dining-promo--split .dining-promo-grid { grid-template-columns: 1fr 1.25fr; }
  .dining-promo--split .dining-promo-grid--reverse { grid-template-columns: 1.25fr 1fr; }
  .dining-promo--split .dining-promo-grid--reverse > *:first-child { order: 2; }
  .dining-promo--split .dining-promo-grid--reverse > *:last-child { order: 1; }
}

.dining-promo-photo {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 10px;
  overflow: hidden;
}

@media (min-width: 900px) {
  .dining-promo--split .dining-promo-photo {
    margin-top: 2.2rem;
  }
}

.dining-promo-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cuisine-photo-merged .dining-promo-photo {
  border-radius: 10px 10px 0 0;
  margin-bottom: 0;
  aspect-ratio: 5/4;
}

@media (min-width: 900px) {
  .cuisine-photo-merged .dining-promo-photo {
    aspect-ratio: auto;
    height: 510px;
  }
}

.cuisine-photo-merged .cuisine-badge-panel {
  border-radius: 0 0 10px 10px;
  margin-top: 0;
}

/* Reusable icon-led feature strip (Pedro Barn Table page, Pub page) */
.dining-feature-strip {
  background: var(--background);
  border-top: 1px solid rgba(61, 38, 20, 0.1);
  border-bottom: 1px solid rgba(61, 38, 20, 0.1);
  padding: 2.25rem 0;
}

.dining-feature-strip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1rem;
}

@media (min-width: 900px) {
  .dining-feature-strip-grid { grid-template-columns: repeat(4, 1fr); }
}

.dining-feature-strip-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.dining-feature-strip-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--barn-brown);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dining-feature-strip-icon-circle svg {
  width: 20px;
  height: 20px;
  color: var(--barn-brown);
}

.dining-feature-strip-heading {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.dining-feature-strip-text {
  font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.cuisine-badge-panel {
  background: var(--primary);
  border-radius: 12px;
  padding: 0.85rem 0.75rem 1rem;
  margin-top: 1rem;
  text-align: center;
}

@media (min-width: 480px) {
  .cuisine-badge-panel { padding: 0.85rem 1.25rem 1rem; }
}

.cuisine-badge-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

@media (min-width: 480px) {
  .cuisine-badge-row { gap: 1.5rem 1rem; }
}

.cuisine-badge {
  width: 58px;
  flex-shrink: 0;
  text-align: center;
}

@media (min-width: 480px) {
  .cuisine-badge { width: 78px; }
}

.cuisine-badge img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 0.4rem;
  border: 2px solid rgba(208, 175, 145, 0.4);
}

@media (min-width: 480px) {
  .cuisine-badge img { width: 52px; height: 52px; margin-bottom: 0.45rem; }
}

.cuisine-badge-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.6rem;
  color: rgba(231, 202, 173, 0.85);
  line-height: 1.2;
}

@media (min-width: 480px) {
  .cuisine-badge-label { font-size: 0.68rem; line-height: 1.25; }
}

/* Option C: minimalist inline cuisine list — small icons, italic serif
   labels, dot dividers, no per-item card/circle background. */
.cuisine-badge-row--minimal {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 0.6rem;
}

.cuisine-badge--minimal {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  text-align: left;
}

.cuisine-badge--minimal img {
  width: 20px;
  height: 20px;
  margin: 0;
  border-width: 1px;
}

.cuisine-badge--minimal .cuisine-badge-label {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.8rem;
  white-space: nowrap;
}

.cuisine-badge-dot {
  color: rgba(208, 175, 145, 0.4);
  font-size: 0.8rem;
}



/* ===== High Tea split panel ===== */
.hightea-quote, .split-quote {
  border-left: 2px solid var(--secondary);
  padding-left: 1rem;
  margin: 1.25rem 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--warm-white);
  line-height: 1.6;
}

.hightea-meta, .split-meta {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: rgba(231, 202, 173, 0.7);
  margin: 1.5rem 0;
}

.hightea-btn-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
}

.hightea-btn-row .btn {
  flex: 0 1 auto;
  white-space: nowrap;
  padding: 0.9rem 1.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  min-width: 180px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (max-width: 480px) {
  .hightea-btn-row {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: wrap;
  }
  .hightea-btn-row .btn {
    text-align: center;
    white-space: normal;
  }
}

.cta-dark-body { color: rgba(var(--warm-white-rgb), 0.75); }

.btn-pill-green {
  display: inline-block;
  background: var(--accent);
  color: #14472E;
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.95rem 2.4rem;
  border-radius: 999px;
  transition: background 0.25s ease, transform 0.25s ease;
}

.btn-pill-green:hover { background: #46AD79; transform: translateY(-1px); }

.btn-two-line {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  padding: 0.6rem 2.4rem;
}

.btn-two-line-top {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.btn-two-line-main {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cta-dark-contact { margin-top: 1.5rem; }

.link-underline-light {
  color: var(--warm-white);
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(var(--warm-white-rgb), 0.5);
  padding-bottom: 2px;
  transition: opacity 0.25s ease;
}

.link-underline-light:hover { opacity: 0.7; }

/* Mobile: give cuisine photos more room — 1 wide + 2 below instead of 3 cramped columns */
@media (max-width: 639px) {
  .cuisine-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
  .cuisine-grid > div:first-child { grid-column: 1 / -1; }
  .cuisine-grid > div:first-child .cuisine-item { aspect-ratio: 4/3; }
}

/* ===== Offers page: romance packages, offer rows, gift band ===== */

/* Simple two-column row: image fills its own grid column (never
   absolutely positioned or layered under text), and the whole row
   shares one background — so there's no possibility of the photo
   bleeding through the text panel, and no risk of a button blending
   into its own background. Used for both the honeymoon banner (dark)
   and the Extended Stay banner (light, via --reverse). */
.offer-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 380px;
  background: var(--primary);
  border-bottom: 0.5px solid rgba(208, 175, 145, 0.15);
}

#pub-experience { background: #000000; }

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

/* Variant with no photo — centers the text column instead of leaving
   an empty grid cell where the image would normally sit. */
.offer-row--no-image {
  grid-template-columns: 1fr;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 2.5rem 1.5rem;
}

.offer-row--no-image .offer-row-body {
  padding: 0;
}

.offer-row--no-image .offer-row-body {
  max-width: 42rem;
  text-align: center;
  align-items: center;
}

.offer-row--no-image .offer-row-footer {
  justify-content: center;
}

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

/* ===== Full-bleed editorial gallery slideshow — used for the
   Fitness Center photo tour ===== */
.fit-gallery {
  position: relative;
  height: 640px;
  overflow: hidden;
  background: var(--primary);
}

.fit-gallery-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.fit-gallery-slide.active { opacity: 1; }

.fit-gallery-slide.active img { animation: fitKbZoom 7s ease-out forwards; }

@keyframes fitKbZoom {
  from { transform: scale(1.07); }
  to { transform: scale(1.00); }
}

.fit-gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.82) brightness(0.82);
  transform-origin: center center;
}

.fit-gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(23,15,8,0.88) 0%, rgba(23,15,8,0.15) 42%), linear-gradient(to top, rgba(23,15,8,0.55) 0%, transparent 45%);
  z-index: 1;
}

.fit-gallery-ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: stretch;
  pointer-events: none;
}

.fit-gallery-ghost-num {
  position: absolute;
  bottom: -1rem;
  left: 6%;
  font-family: 'Fraunces', serif;
  font-size: clamp(7rem, 16vw, 13rem);
  font-weight: 300;
  color: rgba(208,175,145,0.07);
  line-height: 1;
  user-select: none;
  pointer-events: none;
  transition: opacity 0.6s;
  z-index: 2;
}

.fit-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(208,175,145,0.18);
  background: linear-gradient(to right, transparent, rgba(23,15,8,0.55));
}

.fit-gallery-caption-lbl {
  font-family: 'Lato', sans-serif;
  font-size: 0.54rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--secondary);
  margin-bottom: 0.7rem;
}

.fit-gallery-caption-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.3rem;
  color: #f0e8d8;
  line-height: 1.45;
  margin-bottom: 2.5rem;
}

.fit-gallery-progress {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.fit-gallery-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--secondary);
  transition: width 0.4s ease;
}

.fit-gallery-count {
  font-family: 'Lato', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(240,232,216,0.3);
  margin-bottom: 1.2rem;
}

.fit-gallery-count em {
  font-style: normal;
  font-size: 0.9rem;
  color: rgba(240,232,216,0.8);
  margin-right: 0.15em;
}

.fit-gallery-btns { display: flex; gap: 0.6rem; }

.fit-gallery-btn {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(200,180,140,0.25);
  background: rgba(23,15,8,0.35);
  color: #f0e8d8;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  backdrop-filter: blur(6px);
  flex-shrink: 0;
}

.fit-gallery-btn:hover {
  border-color: var(--secondary);
  color: var(--secondary);
  background: rgba(23,15,8,0.6);
}

.fit-gallery-dots {
  position: absolute;
  bottom: 2.75rem;
  left: 6%;
  z-index: 4;
  display: flex;
  gap: 0.55rem;
  align-items: center;
  pointer-events: all;
}

.fit-gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid rgba(208,175,145,0.5);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s;
}

.fit-gallery-dot.active {
  background: var(--secondary);
  border-color: var(--secondary);
  transform: scale(1.3);
}

@media (max-width: 900px) {
  .fit-gallery { height: 480px; }
  .fit-gallery-panel { width: 230px; padding: 2rem 1.75rem; }
}

@media (max-width: 580px) {
  .fit-gallery { height: 420px; }
  .fit-gallery-panel { width: 190px; padding: 1.5rem 1.25rem; }
  .fit-gallery-caption-title { font-size: 1.05rem; }
  .fit-gallery-ghost-num { font-size: 6rem; }
}

@media (max-width: 480px) {
  .fit-gallery { height: 340px; }
  .fit-gallery-panel { width: 160px; padding: 1.25rem 1rem; }
  .fit-gallery-ghost-num { font-size: 4rem; }
}

.offer-row--reverse .offer-row-img { order: 2; }
.offer-row--reverse .offer-row-body { order: 1; }

.offer-row-body {
  padding: 2rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.offer-row-tag {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--secondary);
  margin: 0 0 0.5rem;
}

.offer-row-body h2 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  color: #fff;
  margin: 0 0 0.85rem;
  line-height: 1.25;
}

.offer-row-body p {
  font-size: 0.88rem;
  color: rgba(var(--warm-white-rgb), 0.75);
  line-height: 1.75;
  margin: 0 0 1.5rem;
}

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

/* Light (reverse) variant, used for Extended Stay */
.offer-row--reverse { background: #FFFFFF; }
.offer-row--reverse .offer-row-tag { color: var(--saddle-brown); }
.offer-row--reverse .offer-row-body h2 { color: var(--foreground); }
.offer-row--reverse .offer-row-body p { color: rgba(24, 12, 5, 0.65); }

/* Light variant without the order swap — image stays left, text right,
   but on a white background instead of the dark default. */
.offer-row--light { background: #FFFFFF; }
.offer-row--light .offer-row-tag { color: var(--saddle-brown); }
.offer-row--light .offer-row-body h2 { color: var(--foreground); }
.offer-row--light .offer-row-body p { color: rgba(24, 12, 5, 0.65); }
.offer-row--light .btn-gold { background: var(--accent); color: #14472E; }
.offer-row--light .btn-gold:hover { background: #46AD79; color: #14472E; }

#pub-fire-to-table.offer-row--light { background: #FFFFFF; }

@media (max-width: 1024px) {
  .offer-row, .offer-row--reverse { grid-template-columns: 1fr; height: auto; }
  .offer-row-img { height: 260px; }
  .offer-row--reverse .offer-row-img { order: 0; }
  .offer-row--reverse .offer-row-body { order: 0; }
  .offer-row-body { padding: 2.25rem 2rem; }
}

@media (min-width: 1025px) {
  #pub-fire-to-table { grid-template-columns: 46% 54%; }
}

@media (max-width: 480px) {
  .offer-row-body { padding: 1.75rem 6%; }
  .offer-row-img { height: 220px; }
  .offer-row-footer { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ===== Cinematic story split — dark text panel + full-bleed photo,
   no card frame. Sized by content, not viewport height, to avoid clipping. ===== */
.spa-story-section { overflow: hidden; }

.spa-story-split {
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: stretch;
}

.spa-story-dark-panel {
  background: #0e0b07;
  padding: 3.5rem 5% 3rem 6%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.spa-story-eyebrow { margin-bottom: 1.2rem; }

.spa-story-eyebrow span {
  font-family: 'Lato', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--secondary);
}

.spa-story-heading {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(2rem, 8vw, 3.5rem);
  color: #f0e8d8;
  line-height: 1.05;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.spa-story-heading em {
  font-style: italic;
  color: var(--secondary);
  display: block;
}

.spa-story-rule {
  width: 40px;
  height: 1px;
  background: var(--secondary);
  margin: 1rem 0 1.25rem;
  flex-shrink: 0;
}

.spa-story-lead {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(240,232,216,0.85);
  line-height: 1.6;
  margin: 0 0 1rem;
}

.spa-story-para {
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(240,232,216,0.62);
  line-height: 1.85;
  margin: 0 0 1.25rem;
}

.spa-story-quote {
  border-left: 2px solid rgba(208,175,145,0.4);
  padding: 0.2rem 0 0.2rem 1.25rem;
  margin: 0 0 1.5rem;
  flex-shrink: 0;
}

.spa-story-quote p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.98rem;
  color: rgba(240,232,216,0.78);
  line-height: 1.75;
  margin: 0;
}

.spa-story-access {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  color: rgba(208,175,145,0.75);
  margin: 0 0 1.25rem;
}

.spa-story-img-panel { position: relative; overflow: hidden; min-height: 320px; }

.spa-story-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85) saturate(1.05);
}

.spa-story-img-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(8,6,4,0.55) 0%, rgba(8,6,4,0.15) 30%, transparent 55%);
  pointer-events: none;
  z-index: 1;
}

.spa-story-img-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,6,4,0.55) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}

.spa-story-img-overlay {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 2;
  text-align: right;
}

.spa-story-img-tag {
  font-family: 'Lato', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--secondary);
}

@media (max-width: 900px) {
  .spa-story-split { grid-template-columns: 1fr; }
  .spa-story-img-panel { min-height: 280px; order: -1; }
  .spa-story-dark-panel { padding: 2.5rem 6%; order: 1; }
  .spa-story-img-overlay { display: none; }
  .spa-story-heading { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .spa-story-para { font-size: 0.82rem; }
  .spa-story-quote p { font-size: 0.9rem; }
}

@media (max-width: 560px) {
  .spa-story-dark-panel { padding: 2rem 6%; }
  .spa-story-heading { font-size: clamp(1.6rem, 8vw, 2.1rem); }
  .spa-story-eyebrow span { font-size: 0.52rem; }
}

/* Gold CTA button — shared by both offer rows */
.btn-gold {
  display: inline-block;
  background: var(--accent);
  color: #14472E;
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 2.25rem;
  border-radius: 999px;
  transition: background 0.25s ease, transform 0.25s ease;
}

.btn-gold:hover { background: #46AD79; transform: translateY(-1px); }

.btn-gold.btn-two-line {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  padding: 0.65rem 2.25rem;
}

.offer-package-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .offer-package-grid { grid-template-columns: repeat(3, 1fr); }
}

.offer-package-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3/4;
  display: flex;
  align-items: flex-end;
}

.offer-package-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer-package-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23,15,8,0) 30%, rgba(23,15,8,0.86) 68%, rgba(23,15,8,0.96) 100%);
}

.offer-package-card-content {
  position: relative;
  z-index: 1;
  padding: 1.75rem;
  width: 100%;
}

.offer-package-card-title {
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

.offer-package-card-desc {
  font-size: 0.85rem;
  color: rgba(var(--warm-white-rgb), 0.82);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.offer-package-includes-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(var(--warm-white-rgb), 0.6);
  border-top: 1px solid rgba(var(--warm-white-rgb), 0.2);
  padding-top: 0.85rem;
  margin-bottom: 0.6rem;
}

.offer-package-includes { display: flex; flex-direction: column; gap: 0.45rem; }

.offer-package-includes li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgba(var(--warm-white-rgb), 0.85);
  line-height: 1.5;
}

.offer-package-includes li svg { flex: none; margin-top: 3px; color: var(--secondary); }

.offer-gift-band {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .offer-gift-band {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
}

.offer-gift-band-text { max-width: 38rem; }

/* Highland Honeymoon heading is a touch longer than "Give the Gift of
   Pedro Barn" — widen the text column and trim the heading size
   slightly so it holds to one line instead of wrapping to two. */
.offer-gift-band-text--wide {
  max-width: 46rem;
}

.offer-gift-band-text--wide .section-title {
  font-size: clamp(1.6rem, 3.2vw, 2.15rem);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .offer-gift-band-text--wide .section-title {
    white-space: normal;
  }
}

.offer-gift-band .btn { flex: none; }

/* Scoped override: shrink the gift band's vertical padding below the
   shared .section-padding defaults, and use a solid black background
   instead of the shared cta-dark brown. Placed after those breakpoints
   so it correctly overrides them. */
.offer-gift-section { padding: 1.75rem 1.5rem; background: #000000; }

@media (min-width: 768px) {
  .offer-gift-section { padding: 2rem 3rem; }
}

@media (min-width: 1024px) {
  .offer-gift-section { padding: 2.25rem 6rem; }
}
/* ===== Floating WhatsApp Button ===== */
.whatsapp-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 35;
  width: 3.25rem;
  height: 3.25rem;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float svg {
  width: 1.7rem;
  height: 1.7rem;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
  .whatsapp-float {
    right: 2rem;
    bottom: 2rem;
    width: 3.5rem;
    height: 3.5rem;
  }
  .whatsapp-float svg { width: 1.85rem; height: 1.85rem; }
}
/* ===== Room Gallery Lightbox ===== */
.gallery-photo {
  position: relative;
}

.gallery-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(24, 12, 5, 0);
  transition: background 0.2s ease;
}

.gallery-photo:hover::after {
  background: rgba(24, 12, 5, 0.12);
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(24, 12, 5, 0.94);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.lightbox-content {
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.lightbox-img {
  max-width: 92vw;
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--radius);
  display: block;
}

.lightbox-caption {
  color: var(--warm-white);
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

.lightbox-counter {
  color: var(--royal-beige);
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  margin: 0;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: transparent;
  border: none;
  color: var(--warm-white);
  cursor: pointer;
  padding: 0.5rem;
  line-height: 1;
  transition: opacity 0.2s ease;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: 0.7;
}

.lightbox-close {
  top: 1rem;
  right: 1rem;
  font-size: 1.75rem;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
}

.lightbox-prev { left: 0.5rem; }
.lightbox-next { right: 0.5rem; }

@media (min-width: 768px) {
  .lightbox-close { top: 1.5rem; right: 1.5rem; font-size: 2rem; }
  .lightbox-prev { left: 1.5rem; }
  .lightbox-next { right: 1.5rem; }
  .lightbox-caption { font-size: 0.875rem; }
}

/* ===== Room gallery: featured hero + thumbnail grid (Option B) =====
   First photo is a tall hero, remaining photos fill a thumbnail grid
   beside it on desktop. Caption sits as a gradient overlay at the
   bottom of each photo instead of below it, so grid rows stay even
   regardless of caption length. Mobile: hero spans full width above a
   simple 2-column thumbnail wrap. */
.room-gallery-featured {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 140px;
  gap: 0.85rem;
}

.room-gallery-featured .gallery-photo {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  height: 100%;
}

.room-gallery-featured .gallery-hero {
  grid-column: 1 / -1;
  grid-row: span 2;
  height: auto;
}

.room-gallery-featured .gallery-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.room-gallery-featured .gallery-caption-overlay,
.room-gallery-single .gallery-caption-overlay,
.room-gallery-pair .gallery-caption-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 0.6rem 0.75rem;
  background: linear-gradient(180deg, rgba(23,10,5,0) 55%, rgba(23,10,5,0.8) 100%);
}

.room-gallery-featured .gallery-caption-overlay span,
.room-gallery-single .gallery-caption-overlay span,
.room-gallery-pair .gallery-caption-overlay span {
  font-family: 'Lato', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-white);
}

@media (min-width: 768px) {
  .room-gallery-featured {
    grid-template-rows: repeat(2, 220px);
    grid-auto-rows: unset;
    gap: 0.75rem;
    grid-template-columns: 2fr repeat(var(--thumb-cols, 4), 1fr);
  }
  .room-gallery-featured .gallery-hero {
    grid-column: auto;
    grid-row: 1 / 3;
    height: auto;
  }
  .room-gallery-featured .gallery-caption-overlay,
  .room-gallery-single .gallery-caption-overlay,
  .room-gallery-pair .gallery-caption-overlay { padding: 1rem 1.25rem; }
  .room-gallery-featured .gallery-caption-overlay span,
  .room-gallery-single .gallery-caption-overlay span,
  .room-gallery-pair .gallery-caption-overlay span { font-size: 0.75rem; }
}

.room-gallery-featured .gallery-span-2 {
  grid-column: span 2;
}

.room-gallery-single .gallery-photo {
  height: 280px;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
}

.room-gallery-single .gallery-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.room-gallery-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.room-gallery-pair .gallery-photo {
  position: relative;
  height: 220px;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
}

.room-gallery-pair .gallery-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  .room-gallery-single .gallery-photo { height: 420px; }
  .room-gallery-pair { gap: 0.75rem; }
  .room-gallery-pair .gallery-photo { height: 360px; }
}
/* ===== Policy pages: hero, two-column body, sidebar, highlight boxes ===== */
.policy-hero {
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 9rem 1.5rem 3rem;
}

@media (min-width: 768px) {
  .policy-hero { padding: 9rem 3rem 3.5rem; }
}

.policy-hero-inner {
  max-width: 48rem;
  margin: 0 auto;
}

.policy-hero-eyebrow {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--secondary);
  margin-bottom: 0.75rem;
}

.policy-hero-inner h1 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  margin-bottom: 1rem;
}

.policy-hero-inner p {
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(var(--warm-white-rgb), 0.8);
  max-width: 40rem;
}

.policy-body {
  max-width: 80rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .policy-body {
    padding: 4.5rem 3rem 6rem;
    grid-template-columns: 1fr 320px;
    gap: 4rem;
    align-items: start;
  }
}

.policy-content section { margin-bottom: 2.75rem; }
.policy-content section:last-of-type { margin-bottom: 2rem; }

.policy-section-num {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--saddle-brown);
  margin-bottom: 0.6rem;
}

.policy-content h2 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--foreground);
  margin-bottom: 0.85rem;
}

.policy-content p {
  font-family: 'Lato', sans-serif;
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(24, 12, 5, 0.75);
  margin-bottom: 1rem;
}

.policy-content ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem 0;
}

.policy-content ul li {
  position: relative;
  padding-left: 1.25rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(24, 12, 5, 0.75);
}

.policy-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--secondary);
}

.policy-highlight {
  background: rgba(208, 175, 145, 0.15);
  border-left: 3px solid var(--secondary);
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}

.policy-highlight p { margin-bottom: 0; font-size: 0.87rem; }

.policy-warning {
  background: rgba(180, 60, 40, 0.06);
  border-left: 3px solid rgba(180, 60, 40, 0.5);
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}

.policy-warning p { margin-bottom: 0; font-size: 0.87rem; color: rgba(120, 30, 20, 0.85); }

.policy-last-updated {
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  opacity: 0.5;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* Cancellation table */
.cancellation-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.5rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
}

.cancellation-table th,
.cancellation-table td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.cancellation-table th {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}

.cancellation-table td.free { color: #2e7d4f; font-weight: 600; }
.cancellation-table td.charge { color: rgba(120, 30, 20, 0.85); }

/* Child policy age tiers */
.age-tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25rem 0 1.5rem;
}

@media (min-width: 600px) {
  .age-tiers { grid-template-columns: repeat(3, 1fr); }
}

.age-tier {
  border: 1px solid var(--border);
  padding: 1.25rem;
}

.age-tier-label {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.age-tier-range {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--saddle-brown);
  margin-bottom: 0.6rem;
}

.age-tier-desc {
  font-family: 'Lato', sans-serif;
  font-size: 0.82rem;
  line-height: 1.6;
  opacity: 0.75;
}

/* Sidebar */
.policy-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .policy-sidebar { position: sticky; top: 6.5rem; }
}

.sidebar-card {
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 1.75rem;
}

.sidebar-card-eyebrow {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--secondary);
  margin-bottom: 0.6rem;
}

.sidebar-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

.sidebar-card p {
  font-family: 'Lato', sans-serif;
  font-size: 0.83rem;
  line-height: 1.6;
  color: rgba(var(--warm-white-rgb), 0.75);
  margin-bottom: 1.25rem;
}

.sidebar-card a.btn-gold {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.sidebar-nav {
  border: 1px solid var(--border);
  padding: 1.5rem;
}

.sidebar-nav h4 {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
  margin-bottom: 1rem;
}

.sidebar-nav ul { display: flex; flex-direction: column; gap: 0.75rem; }

.sidebar-nav a {
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
  color: var(--foreground);
  opacity: 0.7;
  transition: opacity 0.3s, color 0.3s;
}

.sidebar-nav a:hover { opacity: 1; }

.sidebar-nav a.active {
  opacity: 1;
  color: var(--saddle-brown);
  font-weight: 700;
}

/* ===== Room detail hero carousel (photo carousel + centered text) ===== */
.room-hero-carousel {
  display: grid;
  grid-template-columns: 1fr;
  padding-top: 3.75rem;
}

@media (min-width: 1024px) {
  .room-hero-carousel { grid-template-columns: 1.1fr 1fr; min-height: 640px; }
}

.room-hero-carousel-photo {
  position: relative;
  height: 55vh;
  min-height: 380px;
  overflow: hidden;
  background: var(--primary);
}

@media (min-width: 1024px) {
  .room-hero-carousel-photo { height: auto; min-height: 640px; }
}

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

.room-hero-carousel-slide.active { opacity: 1; }

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

.room-hero-carousel-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(23, 15, 8, 0.72);
  color: var(--secondary);
  font-family: 'Lato', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7rem 1.1rem;
}

.room-hero-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease;
}

.room-hero-carousel-arrow:hover { background: #fff; }
.room-hero-carousel-arrow svg { width: 18px; height: 18px; }
.room-hero-carousel-arrow--prev { left: 1rem; }
.room-hero-carousel-arrow--next { right: 1rem; }

.room-hero-carousel-count {
  position: absolute;
  bottom: 1.1rem;
  right: 1.25rem;
  z-index: 2;
  background: rgba(23, 15, 8, 0.6);
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  padding: 0.35rem 0.7rem;
  border-radius: 20px;
}

.room-hero-carousel-count em { font-style: normal; }

.room-hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
}

@media (min-width: 1024px) {
  .room-hero-text { padding: 3rem 4rem; }
}

.room-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--saddle-brown);
  margin: 0 0 0.85rem;
}

.room-hero-eyebrow .rule {
  width: 20px;
  height: 1px;
  background: var(--saddle-brown);
  opacity: 0.5;
}

.room-hero-title {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  color: var(--foreground);
  margin: 0;
}

.room-hero-desc {
  font-family: 'Lato', sans-serif;
  font-size: 0.92rem;
  line-height: 1.8;
  color: rgba(24, 12, 5, 0.7);
  max-width: 32rem;
  margin: 0 0 1.75rem;
}

.room-hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.room-hero-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
  color: var(--foreground);
}

.room-hero-tag-pill svg { width: 15px; height: 15px; color: var(--saddle-brown); flex-shrink: 0; }

@media (max-width: 400px) {
  .room-hero-tags {
    gap: 0.5rem;
  }
  .room-hero-tag-pill {
    font-size: 0.75rem;
    padding: 0.45rem 0.8rem;
    gap: 0.4rem;
  }
  .room-hero-tag-pill svg {
    width: 13px;
    height: 13px;
  }
}

.btn-room-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--accent);
  color: #14472E;
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 999px;
  transition: background 0.25s ease, transform 0.25s ease;
}

.btn-room-hero:hover { background: #46AD79; transform: translateY(-1px); }
.btn-room-hero svg { width: 15px; height: 15px; transition: transform 0.3s ease; }
.btn-room-hero:hover svg { transform: translateX(3px); }