/* ==========================================================================
   The White Hart, Great Yeldham — site styles
   Rebuild of whitehartgreatyeldham.co.uk. Mobile first.
   ========================================================================== */

:root {
  --primary: 4, 53, 32;          /* deep green  #043520 */
  --primary-light: 2, 66, 36;    /* nav green   #024224 */
  --secondary: 214, 217, 190;    /* sage        #D6D9BE */
  --secondary-light: 235, 238, 216;
  --secondary-dark: 181, 185, 146;
  --tertiary: 182, 147, 127;     /* clay        #B6937F */
  --tertiary-dark: 146, 112, 94;
  --tertiary-deep: 117, 90, 75;   /* small print on light grounds */
  --ink: #231f20;
  --paper: #ffffff;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", "Gill Sans", "Helvetica Neue", Arial, sans-serif;
  --radius: 4px;
  --header-h: 8.5rem;
  --space: clamp(3rem, 7vw, 5.5rem);
  --ease: cubic-bezier(.06, .79, .53, .99);
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 1rem;
  color: inherit;
}
p { margin: 0 0 1rem; }
p, li, .description, .card-overlay-text, .textbox { text-wrap: pretty; }
a { color: rgb(var(--primary)); text-underline-offset: 3px; }
a:hover { color: rgb(var(--tertiary-dark)); }
ul, ol { padding-left: 1.4rem; }
blockquote { margin: 0; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid rgb(var(--tertiary)); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0.5rem; top: -3rem; z-index: 200;
  background: rgb(var(--primary)); color: #fff; padding: 0.5rem 1rem;
  border-radius: var(--radius); transition: top 0.2s;
}
.skip-link:focus { top: 0.5rem; color: #fff; }
.desktop-only { display: none; }
@media (min-width: 1024px) { .desktop-only { display: inline; } }

/* Icons (inline SVG masks, colour follows currentColor) ------------------ */
.icon, i[class*="fa-"] {
  display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.icon-phone, i.fa-phone { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M164 43l58 121-42 51c26 55 62 91 117 117l51-42 121 58-28 90c-9 27-34 43-61 40C186 460 52 326 34 132c-3-27 13-52 40-61z"/></svg>');
}
.icon-bars, i.fa-bars { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 96h448v42H0zm0 139h448v42H0zm0 139h448v42H0z"/></svg>'); }
.icon-search { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M208 48a160 160 0 1 1 0 320 160 160 0 0 1 0-320zm0-40a200 200 0 1 0 121 359l134 134 28-28-134-134A200 200 0 0 0 208 8z"/></svg>'); }
.icon-close { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M55 73l137 137L329 73l30 30-137 137 137 137-30 30-137-137L55 407l-30-30 137-137L25 103z"/></svg>'); }
i.fa-angle-down, .icon-angle-down { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 340L54 170l30-30 140 140 140-140 30 30z"/></svg>'); }
i.fa-angle-up { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 172l170 170-30 30-140-140L84 372l-30-30z"/></svg>'); }
i.fa-angle-right, .icon-angle-right { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M108 86l170 170-170 170-30-30 140-140L78 116z"/></svg>'); }
i.fa-mouse-alt { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M192 0C86 0 0 86 0 192v128c0 106 86 192 192 192s192-86 192-192V192C384 86 298 0 192 0zm0 42c83 0 150 67 150 150v128c0 83-67 150-150 150S42 403 42 320V192C42 109 109 42 192 42zm0 60c-12 0-21 9-21 21v64c0 12 9 21 21 21s21-9 21-21v-64c0-12-9-21-21-21z"/></svg>'); }
i.fa-spinner-third { display: none; }
.icon-facebook { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279 288l14-93h-89v-60c0-25 12-50 52-50h40V6S259 0 225 0c-73 0-121 44-121 125v70H23v93h81v224h100V288z"/></svg>'); }
.icon-instagram { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 141a115 115 0 100 230 115 115 0 000-230zm0 190a75 75 0 110-150 75 75 0 010 150zm146-194a27 27 0 11-54 0 27 27 0 0154 0zM398 96c-17-42-50-75-92-92C271-9 177-9 142 4 100 21 67 54 50 96c-13 35-13 129 0 164 17 42 50 75 92 92 35 13 129 13 164 0 42-17 75-50 92-92 13-35 13-129 0-164zm-38 199a89 89 0 01-50 50c-35 14-117 11-155 0a89 89 0 01-50-50c-14-35-11-117 0-155a89 89 0 0150-50c35-14 117-11 155 0a89 89 0 0150 50c14 35 11 117 0 155z"/></svg>'); }
.icon-tripadvisor { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M128 152a104 104 0 00-93 57H0a132 132 0 0136-44C12 148 0 128 0 128h512s-12 20-36 37a132 132 0 0136 44h-35a104 104 0 00-185-9 104 104 0 00-72 0 104 104 0 00-92-48zm0 42a62 62 0 110 124 62 62 0 010-124zm256 0a62 62 0 110 124 62 62 0 010-124zM128 214a42 42 0 100 84 42 42 0 000-84zm256 0a42 42 0 100 84 42 42 0 000-84zM256 300l-40 70a104 104 0 0080 0z"/></svg>'); }

/* Buttons ----------------------------------------------------------------- */
/* Body buttons keep sentence case, as on the original; only the header,
   navigation and card links are set in capitals. */
.btn {
  display: inline-block;
  padding: 1rem;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  text-decoration: none;
  line-height: 1.3;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.header-ctas .btn, .booking-drop-menu-btn, .mobile-nav-ctas .btn {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem;
}
.primary-btn { background: rgb(var(--primary)); color: #fff; }
.primary-btn:hover { background: rgb(var(--primary-light)); color: #fff; }
.secondary-btn { background: rgb(var(--secondary)); color: rgb(var(--primary)); }
.secondary-btn:hover { background: rgb(var(--secondary-dark)); color: rgb(var(--primary)); }
.tertiary-btn { background: rgb(var(--tertiary)); color: #fff; }
.tertiary-btn:hover { background: rgb(var(--tertiary-dark)); color: #fff; }
.outline-btn { background: transparent; color: inherit; border: 1px solid currentColor; }

/* Sibling buttons are separated by non-breaking spaces in the source, which
   gives no vertical gap once they wrap. Lay their container out as a wrapping
   flex row so they keep an even gap on one line or two. */
a.btn + a.btn { margin-left: 0.6rem; }
p:has(> a.btn + a.btn), div:has(> a.btn + a.btn) {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
}
p:has(> a.btn + a.btn) a.btn, div:has(> a.btn + a.btn) a.btn { margin-left: 0; }
.text-center p:has(> a.btn + a.btn), section.intro p:has(> a.btn + a.btn) { justify-content: center; }

/* Header ------------------------------------------------------------------ */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  color: #fff;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  background: linear-gradient(to bottom, rgba(10, 20, 15, 0.55), rgba(10, 20, 15, 0));
}
body:not(.has-hero) #site-header,
#site-header.scrolled {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}
.header-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  max-width: 1500px;
  margin: 0 auto;
}
@media (min-width: 1024px) { .header-container { padding: 0.6rem 1rem; } }
.logo a { display: flex; align-items: center; justify-content: center; color: inherit; min-height: 44px; }
.logo svg { display: block; width: min(46vw, 300px); height: auto; }
.logo svg * { fill: currentColor; }
.logo svg .cls-1 { fill: none; }
.contact-info { display: flex; align-items: center; gap: 1rem; justify-self: start; }
.phone-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: inherit; text-decoration: none; font-size: 0.95rem;
  /* 44px hit area on touch, pulled back so the header height is unchanged */
  min-height: 44px; min-width: 44px; justify-content: center; margin: -0.5rem;
}
@media (min-width: 1024px) { .phone-link { min-width: 0; margin: 0; justify-content: flex-start; } }
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
  min-height: 44px; min-width: 44px; padding: 0.25rem; margin: -0.5rem 0;
}
.menu-toggle .icon { width: 1.3em; height: 1.3em; }
.menu-toggle-label { display: none; }
.header-ctas { justify-self: end; display: flex; align-items: center; gap: 0.6rem; }
.header-ctas .voucher { display: none; }
.header-ctas .btn { padding: 0.65rem 1.1rem; font-size: 0.8rem; white-space: nowrap; }
@media (max-width: 1023px) {
  /* comfortable to tap, but still compact enough for the header */
  /* :not(.voucher) so this never revives the gift-voucher button, which is
     deliberately hidden below 1024px */
  .phone-link { font-size: 0.85rem; }
}
/* Very small phones: the logo has to give way so the phone, menu and Book Now
   all still fit on one row without clipping. */

.book-btn { background: rgb(var(--secondary)); color: rgb(var(--primary)); }
.book-btn:hover { background: rgb(var(--secondary-dark)); }
.book-now-container { position: relative; }
.button-holder {
  position: absolute; right: 0; top: calc(100% + 0.4rem);
  min-width: 13rem;
  display: flex;
  flex-direction: column;
  background: rgb(var(--primary));
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  opacity: 0; visibility: hidden; translate: 0 -6px;
  transition: opacity 0.25s var(--ease), translate 0.25s var(--ease), visibility 0.25s;
}
.book-now-container.open .button-holder { opacity: 1; visibility: visible; translate: 0 0; }
.booking-drop-menu-btn {
  color: #fff; text-decoration: none; padding: 0.85rem 1.2rem;
  font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.booking-drop-menu-btn:last-child { border-bottom: 0; }
.booking-drop-menu-btn:hover { background: rgb(var(--primary-light)); color: #fff; }

/* Mobile header follows the original: logo and menu on the first row, then a
   full-width Gift Vouchers bar. No phone icon or Book Now in the header; the
   booking links live in the menu, as on the original. */
@media (max-width: 1023px) {
  .header-container {
    grid-template-columns: 1fr auto;
    grid-template-areas: "logo contact" "ctas ctas";
    padding: 0.5rem 0.5rem 0.5rem;
    gap: 0.5rem 0.75rem;
    align-items: center;
  }
  .logo { grid-area: logo; justify-self: start; }
  .logo svg { width: min(64vw, 250px); }
  .contact-info { grid-area: contact; justify-self: end; }
  .phone-link { display: none; }
  .header-ctas { grid-area: ctas; justify-self: stretch; display: block; }
  .header-ctas .voucher {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 56px; padding: 0.9rem 1rem; font-size: 1rem; letter-spacing: 0.06em;
  }
  .book-now-container { display: none; }
  /* original: full-height hero on phones */
  section.hero, section.hero .carousel, section.hero .carousel-track { height: min(100svh, 960px); }
}
/* Desktop nav */
.desktop-nav { display: none; }
@media (min-width: 1024px) {
  .desktop-nav { display: block; }
  .menu-toggle { display: none; }
  .header-ctas .voucher { display: inline-block; }
  #site-header.scrolled .desktop-nav,
  body:not(.has-hero) .desktop-nav { background: rgb(var(--primary-light)); }
  .desktop-nav > ul {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem;
    list-style: none; margin: 0 auto; padding: 0; max-width: 1300px;
  }
  .desktop-nav li { position: relative; }
  .desktop-nav a, .desktop-nav .nav-label {
    display: block; padding: 0.7rem 0.9rem;
    color: #fff; text-decoration: none;
    font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400;
    cursor: pointer; white-space: nowrap;
  }
  .desktop-nav > ul > li > a::after, .desktop-nav > ul > li > .nav-label::after {
    content: ""; display: block; height: 1px; background: #fff;
    transform: scaleX(0); transition: transform 0.3s var(--ease);
  }
  .desktop-nav > ul > li:hover > a::after,
  .desktop-nav > ul > li > a.active::after { transform: scaleX(1); }
  .desktop-nav ul ul {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    min-width: 15rem;
    background: rgb(var(--primary));
    list-style: none; padding: 0.4rem 0; margin: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    opacity: 0; visibility: hidden; translate: 0 8px;
    transition: opacity 0.25s var(--ease), translate 0.25s var(--ease), visibility 0.25s;
  }
  .desktop-nav li:hover > ul, .desktop-nav li:focus-within > ul {
    opacity: 1; visibility: visible; translate: 0 0;
  }
  .desktop-nav ul ul a { padding: 0.55rem 1.2rem; white-space: normal; text-align: center; }
  .desktop-nav > ul > li:nth-last-child(-n+2) > ul { left: auto; right: 0; transform: none; }
  .desktop-nav ul ul a:hover { background: rgb(var(--primary-light)); }
}

/* Mobile nav -------------------------------------------------------------- */
.mobile-nav {
  position: fixed; inset: 0; z-index: 150;
  background: rgb(var(--primary));
  color: #fff;
  overflow-y: auto;
  /* clears the two-row mobile header (logo row + Gift Vouchers bar) */
  padding: 9.5rem 1.5rem 2.5rem;
}
.mobile-nav[hidden] { display: none; }
body.nav-open { overflow: hidden; }
body.nav-open .menu-toggle .icon-bars { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M55 73l137 137L329 73l30 30-137 137 137 137-30 30-137-137L55 407l-30-30 137-137L25 103z"/></svg>'); }
body.nav-open #site-header { background: rgb(var(--primary)); color: #fff; box-shadow: none; z-index: 160; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > .mobile-nav-inner > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.mobile-nav-item { display: flex; align-items: center; justify-content: space-between; }
/* links match the original's menu: sentence case, 16px, 40px rows */
.mobile-nav a {
  display: flex; align-items: center; min-height: 40px; padding: 0.5rem 0.25rem;
  color: #fff; text-decoration: none; font-size: 1rem; letter-spacing: 0;
}
.submenu-toggle {
  background: none; border: 0; color: #fff; padding: 0.9rem;
  cursor: pointer; font-size: 1rem;
}
.submenu-toggle i { transition: transform 0.3s; }
.submenu-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.mobile-nav ul ul { padding-left: 1rem; display: none; }
.mobile-nav ul ul.open { display: block; padding-bottom: 0.5rem; }
.mobile-nav ul ul a { font-size: 0.95rem; opacity: 0.9; }
.mobile-nav-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 1.5rem; }
.mobile-nav-ctas .btn { padding: 0.8rem 0.5rem; font-size: 0.8rem; }
.mobile-nav-social { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.mobile-nav-social a {
  display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; padding: 0;
  border-radius: 50%; background: rgb(var(--secondary)); color: rgb(var(--primary));
}
.mobile-nav-social .icon { width: 1.05rem; height: 1.05rem; }

/* Layout helpers ---------------------------------------------------------- */
main.content { min-height: 60vh; }
body:not(.has-hero) main.content { padding-top: calc(var(--header-h) - 2rem); }
section.add-space { margin: var(--space) auto; }
section.no-space { margin: 0; }

/* Hero -------------------------------------------------------------------- */
section.hero { position: relative; overflow: hidden; }
section.hero, section.hero .carousel, section.hero .carousel-track { height: min(92svh, 960px); }
section.hero.small, section.hero.small .carousel, section.hero.small .carousel-track { height: min(60svh, 620px); }
section.hero .carousel-slide, section.hero .card-img { position: absolute; inset: 0; }
section.hero img { width: 100%; height: 100%; object-fit: cover; }
section.hero .video-wrapper { position: absolute; inset: 0; }
section.hero video { width: 100%; height: 100%; object-fit: cover; }
section.hero .hero-overlay { position: absolute; inset: 0; }
section.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent 30%, transparent 75%, rgba(0, 0, 0, 0.3));
}
.hero-scroll {
  position: absolute; bottom: 3.5rem; left: 50%; transform: translateX(-50%);
  z-index: 5; color: #fff; text-align: center;
}
.hero-scroll small { display: block; letter-spacing: 0.25em; text-transform: uppercase; font-size: 0.7rem; margin-bottom: 0.4rem; }
.hero-scroll i { width: 1.6em; height: 1.6em; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Carousel ---------------------------------------------------------------- */
.carousel { position: relative; overflow: hidden; max-width: 100%; }
/* stop carousel tracks (N x 100% wide) inflating grid/flex parents */
.img-text-container > *, .three-card-container > *, .splide-card-container > *,
.accommodation-item > *, .testimonial-container, .image-frame, .image-wrap { min-width: 0; }
.carousel-track { display: flex; transition: transform 0.5s var(--ease); }
.carousel-slide { flex: 0 0 100%; min-width: 0; }
.carousel.fade .carousel-track { display: block; transition: none; }
.carousel.fade .carousel-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; z-index: 1;
}
.carousel.fade .carousel-slide.current { opacity: 1; z-index: 2; }
.carousel-dots {
  position: absolute; bottom: 0.6rem; left: 0; right: 0; z-index: 6;
  display: flex; justify-content: center; gap: 0;
}
/* the dot stays 9px, but sits inside a 24px tappable button */
.carousel-dots button {
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
  background: none; cursor: pointer;
  display: grid; place-items: center;
}
.carousel-dots button::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background-color 0.25s var(--ease);
}
.carousel-dots button[aria-current="true"]::before { background: #fff; }

.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, 0.85); color: rgb(var(--primary));
  cursor: pointer; display: grid; place-items: center;
}
.carousel-arrow:hover { background: #fff; }
.carousel-arrow.prev { left: 0.75rem; }
.carousel-arrow.prev i { transform: rotate(180deg); }
.carousel-arrow.next { right: 0.75rem; }

/* Intro ------------------------------------------------------------------- */
section.intro {
  max-width: 1024px;
  padding: 0 1.25rem;
  margin-left: auto; margin-right: auto;
  text-align: center;
}
section.intro .tagline {
  margin-bottom: 1rem;
  color: rgb(var(--tertiary-dark));
  letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.85rem;
}
section.intro .section-title, section.intro h1, section.intro h2 {
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  margin-bottom: 1.25rem;
}
/* The stag flourish that closes every intro block */
.flourish {
  width: 9rem; height: 6rem; margin: 2rem auto;
  background: url('/assets/svg/green-stag.svg') no-repeat center center;
  background-size: auto 100%;
}
@media (min-width: 1024px) { .flourish { height: 8rem; } }
section.intro:not(:has(p)) .flourish { display: none; }
section.intro:has(> .flourish:last-child) { margin-bottom: 0; }
section.intro:has(> .flourish:last-child) + section.add-space { margin-top: 0; }
/* a flush section (image ribbon, footer) needs the intro to carry that gap itself */
section.intro:has(> .flourish:last-child):has(+ section.no-space), section.intro:has(> .flourish:last-child):last-child { padding-bottom: 1.75rem; }
/* the stag's own 2rem bottom margin collapses into this, so the larger value wins: 50px, matching the gap above it */
section.intro:has(> .flourish:last-child) + section.two-cards { margin-top: 3.125rem; }
section.hero + section.intro { margin-top: 3.125rem; }
/* a button closing an intro gets the same breathing room as the title above the copy */
section.intro p:has(> .btn) { margin-top: 1.75rem; }
section.full-text p:has(> .btn) { margin-top: 2rem; }
p[style*="center"]:has(> a.btn + a.btn) { justify-content: center; }

/* Full text --------------------------------------------------------------- */
section.full-text { max-width: 1280px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
section.full-text .title { font-size: clamp(1.6rem, 3vw, 2.1rem); }

/* Three cards ------------------------------------------------------------- */
/* Three states, matching the original:
   < 768px   image with a dark wash, all copy visible
   768-1023  white card, image left / copy right
   >= 1024   image with title at the base; hover reveals copy and the link  */
section.three-cards { max-width: 1536px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
.three-card-container { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 1024px) { .three-card-container { grid-template-columns: repeat(3, 1fr); } }

/* Mobile stacks image and copy in the same grid cell, so the copy sets the
   height and can never be clipped by a fixed ratio. */
.three-card-container .card { position: relative; width: 100%; overflow: hidden; display: grid; }
.three-card-container .card-inner { display: contents; }
.three-card-container .card-image { grid-area: 1 / 1; width: 100%; height: 100%; }
.three-card-container .card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.three-card-container .card-text {
  grid-area: 1 / 1; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 20rem;
  padding: 2.5rem 1.25rem; text-align: center; color: #fff;
  background: rgba(0, 0, 0, 0.5);
  transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.three-card-container .card-title { width: 100%; }
.three-card-container .title { display: block; font-size: 1.5rem; margin-bottom: 1rem; color: inherit; }
.three-card-container .text { display: block; margin-bottom: 1rem; padding: 0 1.5rem; }
.three-card-container .link {
  display: inline-block; margin: 0 auto;
  border-bottom: 2px solid rgb(var(--tertiary));
  padding-bottom: 0.25rem;
  color: rgb(var(--tertiary));
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.three-card-container .link a { display: inline-flex; align-items: center; min-height: 40px; color: inherit; text-decoration: none; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; }
.three-card-container .link .deco-line { display: none; }
.three-card-container .card:hover .link, .three-card-container .card:focus-within .link {
  color: #fff; border-color: #fff;
}

/* Tablet: a plain white card, image beside the copy */
@media (min-width: 768px) and (max-width: 1023px) {
  .three-card-container .card { display: flex; flex-direction: row; background: #fff; }
  .three-card-container .card-image { grid-area: auto; width: 50%; }
  .three-card-container .card-text {
    grid-area: auto; width: 50%; min-height: 0;
    justify-content: center;
    border: 2px solid #e5e7eb;
    background: #fff; color: var(--ink);
    padding: 2rem 1.25rem;
  }
  .three-card-container .title { color: rgb(var(--primary)); }
}

/* Desktop: title sits at the base until hover opens the card up */
@media (min-width: 1024px) {
  .three-card-container .card { display: block; cursor: pointer; }
  .three-card-container .card-image img { aspect-ratio: 4 / 5; }
  .three-card-container .card-text {
    position: absolute; inset: 0; min-height: 0;
    justify-content: flex-end;
    background: rgba(0, 0, 0, 0);
    box-shadow: inset 0 10rem 10rem 15rem rgba(0, 0, 0, 0.3);
    padding: 1rem;
  }
  .three-card-container .title { margin-bottom: 0; transition: margin-bottom 0.5s var(--ease); }
  .three-card-container .text, .three-card-container .link { display: none; }
  .three-card-container .card:hover .card-text,
  .three-card-container .card:focus-within .card-text {
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 10rem 10rem 20rem rgba(0, 0, 0, 0.5);
  }
  .three-card-container .card:hover .title,
  .three-card-container .card:focus-within .title { margin-bottom: 1rem; }
  .three-card-container .card:hover .text,
  .three-card-container .card:focus-within .text { display: block; }
  .three-card-container .card:hover .link,
  .three-card-container .card:focus-within .link { display: inline-block; }
  .three-card-container .card:hover .card-image img,
  .three-card-container .card:focus-within .card-image img { transform: scale(1.05); }
}

/* Decorated text links */
.link { display: inline-block; position: relative; }
.link a {
  color: rgb(var(--primary)); text-decoration: none;
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem;
}
.link .deco-line {
  display: block; height: 1px; background: rgb(var(--tertiary));
  transform-origin: left; transition: transform 0.3s var(--ease);
}
.link:hover .deco-line { transform: scaleX(0.55); }

/* Image + text ------------------------------------------------------------ */
/* Full-bleed image with a solid panel of copy laid over its inner edge.
   Alternate blocks carry .swap, which mirrors the layout and switches the
   panel from deep green to sage. */
section.img-text { display: block; width: 100%; padding: 0; max-width: none; }
.img-text-container { display: flex; flex-direction: column; }
@media (min-width: 768px) { .img-text-container { flex-direction: row; } }
/* The columns stretch to the taller of the two, so a long panel of copy
   never spills above and below its photograph; the photograph grows to hold it. */
@media (min-width: 1024px) { .img-text-container { align-items: stretch; justify-content: center; } }

.image-wrap { position: relative; z-index: 30; padding: 0; }
@media (min-width: 768px) { .image-wrap { width: 50%; } }
@media (min-width: 1024px) { .image-wrap { width: 60%; } }
.image-wrap .image-frame { position: relative; width: 100%; height: 100%; margin-bottom: 0; }
/* the photograph is at least 3:2, and taller whenever the copy beside it needs it */
.image-wrap { aspect-ratio: 3 / 2; }
.image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.image-wrap .carousel, .image-wrap .carousel-track, .image-wrap .carousel-slide { height: 100%; }
.image-wrap .carousel.fade img { position: absolute; inset: 0; height: 100%; }

.content-wrap { z-index: 40; display: block; width: 100%; }
/* keep a margin of photograph visible above and below the panel */
@media (min-width: 1024px) { .content-wrap { display: flex; align-items: center; padding: 3rem 0; } }
@media (min-width: 768px) { .content-wrap { width: 50%; } }
@media (min-width: 1280px) { .content-wrap { width: 40%; } }

.content-inner {
  width: 100%;
  padding: 1.5rem;
  background: rgb(var(--primary));
  color: #fff;
}
@media (min-width: 640px) { .content-inner { padding: 2rem; } }
@media (min-width: 768px) { .content-inner { padding: 1.5rem; } }
/* from here the panel reaches back across the photograph */
@media (min-width: 1024px) { .content-inner { margin-left: -3.5rem; padding: 2rem; } }
@media (min-width: 1280px) { .content-inner { margin-left: -4rem; } }
@media (min-width: 1536px) { .content-inner { margin-left: -4rem; padding: 2.75rem; } }

.content-inner .title { color: inherit; font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.content-inner .subtitle {
  display: block; margin-bottom: 1rem;
  font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: rgb(var(--tertiary));
}
.content-inner .btn { margin-top: 0.5rem; }

/* Mirrored blocks: image right, sage panel left */
@media (min-width: 768px) {
  section.img-text.swap .image-wrap { order: 2; }
  section.img-text.swap .content-wrap { order: 1; }
}
section.img-text.swap .content-inner { background: rgb(var(--secondary)); color: rgb(var(--primary)); }
section.img-text.swap .content-inner .subtitle { color: rgb(var(--tertiary-dark)); }
@media (min-width: 1024px) { section.img-text.swap .content-inner { margin-left: 3.5rem; } }
@media (min-width: 1280px) { section.img-text.swap .content-inner { margin-left: 4rem; } }
@media (min-width: 1536px) { section.img-text.swap .content-inner { margin-left: 13rem; } }
/* The text box overlaps the photo by its margin, so the slideshow arrow on that
   side moves out from under it (otherwise it can't be seen or clicked). */
@media (min-width: 1024px) {
  section.img-text:not(.swap) .image-wrap .carousel-arrow.next { right: calc(3.5rem + 0.75rem); }
  section.img-text.swap .image-wrap .carousel-arrow.prev { left: calc(3.5rem + 0.75rem); }
}
@media (min-width: 1280px) {
  section.img-text:not(.swap) .image-wrap .carousel-arrow.next { right: calc(4rem + 0.75rem); }
  section.img-text.swap .image-wrap .carousel-arrow.prev { left: calc(4rem + 0.75rem); }
}
@media (min-width: 1536px) {
  section.img-text.swap .image-wrap .carousel-arrow.prev { left: calc(13rem + 0.75rem); }
}

/* Two cards (overlay cards) ----------------------------------------------- */
section.two-cards { max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
.splide-card-container { display: grid; gap: 1.75rem; }
@media (min-width: 700px) { .splide-card-container { grid-template-columns: 1fr 1fr; } }
section.two-cards a { text-decoration: none; color: inherit; display: block; }
section.two-cards .card { position: relative; overflow: hidden; border-radius: var(--radius); }
section.two-cards .card-img img { width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; transition: transform 0.6s var(--ease); }
section.two-cards .card:hover .card-img img { transform: scale(1.045); }
section.two-cards .card-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.25) 55%, transparent);
  color: #fff;
}
.overlay-inner { padding: 1.5rem; }
.overlay-inner .card-title { font-size: 1.7rem; margin-bottom: 0.4rem; }
.card-overlay-text { display: block; font-size: 0.95rem; }
.card-overlay-text p { margin-bottom: 0.5rem; }
.card-overlay-text a { display: inline; text-decoration: underline; }
.card-overlay-text p:last-child { margin-bottom: 0.75rem; }
.icon-link { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.8rem; border-bottom: 1px solid rgb(var(--secondary)); padding-bottom: 0.2rem; }
@media (min-width: 1024px) {
  section.two-cards .card-overlay-text { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease), opacity 0.5s var(--ease); }
  section.two-cards .card:hover .card-overlay-text,
  section.two-cards a:focus-visible .card-overlay-text { max-height: 20rem; opacity: 1; }
}
@media (max-width: 1023px) {
  /* image above, solid green panel below: overlay text never fights the photo */
  section.two-cards .card-overlay { position: static; background: rgb(var(--primary)); }
}

/* Highlight band ---------------------------------------------------------- */
/* Sage panel carrying the hart line-pattern, deep green type. */
section.highlight {
  background-color: rgb(var(--secondary));
  background-image: url('/assets/svg/white-pattern.svg');
  background-repeat: no-repeat;
  background-size: 400% auto;
  background-position: top 28% center;
  color: rgb(var(--primary));
}
@media (min-width: 1024px) { section.highlight { background-size: 200% auto; } }
.highlight-inner .content {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 7rem) 1.5rem;
  text-align: center;
}
.highlight-inner .tagline {
  display: block; margin-bottom: 1rem;
  font-size: 0.875rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgb(var(--tertiary-dark));
}
.highlight-inner .title { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1.5rem; color: rgb(var(--primary)); }
.highlight-inner .description { display: block; max-width: 42rem; margin: 0 auto 2rem; }

/* Image flurry ------------------------------------------------------------
   A slow ribbon of detail shots that drifts continuously across the foot of
   the page. The track is duplicated in JS so the loop never shows a seam.  */
section.img-flurry { overflow: hidden; }
section.img-flurry .image-container {
  display: flex;
  width: max-content;
  will-change: transform;
}
section.img-flurry .image {
  flex: 0 0 auto;
  width: 60vw;
  overflow: hidden;
}
@media (min-width: 700px) { section.img-flurry .image { width: 30vw; } }
@media (min-width: 1100px) { section.img-flurry .image { width: 22vw; } }
@media (min-width: 1600px) { section.img-flurry .image { width: 17vw; } }
section.img-flurry .image img {
  width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
}
/* the strip settles when you point at it, so a photo can be looked at */
.js-anim section.img-flurry .image-container.is-marquee { animation: flurryDrift var(--flurry-duration, 90s) linear infinite; }
.js-anim section.img-flurry:hover .image-container.is-marquee { animation-play-state: paused; }
section.img-flurry .image:hover img { transform: scale(1.06); }
@keyframes flurryDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Testimonials ------------------------------------------------------------
   One review at a time in a band that runs edge to edge, so two reviews look
   as considered as ten. */
section.testimonial-feed {
  max-width: none; margin-left: 0; margin-right: 0;
  padding: clamp(3rem, 6vw, 5rem) 1.25rem;
  background: rgb(var(--primary)); color: #fff;
  position: relative; overflow: hidden;
}
section.testimonial-feed::before {
  /* a faint oversized quote mark sits behind the copy */
  content: "\201C"; position: absolute; left: 50%; top: -0.15em; transform: translateX(-50%);
  font-family: var(--serif); font-size: clamp(16rem, 30vw, 28rem); line-height: 1;
  color: rgba(255, 255, 255, 0.05); pointer-events: none;
}
.testimonial-container { max-width: 900px; margin: 0 auto; position: relative; }
.testimonial-container .testimonial-carousel { position: relative; background: none; padding: 0; overflow: hidden; }
.testimonial-carousel::before { display: none; }
.testimonial-carousel .carousel-track { border: 0; align-items: flex-start; transition: transform 0.55s var(--ease), height 0.45s var(--ease); }
.testimonal { padding: 0.5rem 3.5rem 3.25rem; text-align: center; color: #fff; }
.testimonal .diamond-large-white { display: block; width: auto; height: auto; margin: 0 auto 0.75rem; background: none; transform: none; font-size: 0; }
.testimonal .diamond-large-white::before {
  content: "\201C"; display: inline-block;
  font-family: var(--serif); font-size: 4rem; line-height: 0.7; color: rgb(var(--tertiary));
}
.testimonal .title { display: block; font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1rem; color: rgb(var(--secondary)); }
.testimonal .text { font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.75; max-width: 46rem; margin: 0 auto 1.25rem; }
.testimonal .text p { margin-bottom: 0.75rem; }
.testimonal .text.is-clamped { max-height: 12.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.testimonal .read-more { display: block; width: fit-content; background: none; border: 0; padding: 0; margin: -0.5rem auto 1.25rem; font: inherit; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--secondary)); cursor: pointer; border-bottom: 1px solid currentColor; position: relative; }
/* invisible 44px-tall hit area so it's easy to tap without changing the look */
.testimonal .read-more::after { content: ""; position: absolute; left: -0.75rem; right: -0.75rem; top: 50%; height: 44px; transform: translateY(-50%); }
.testimonal .author { display: inline-block; padding-top: 0.9rem; border-top: 1px solid rgba(var(--secondary), 0.5); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8rem; color: rgb(var(--secondary)); }
.testimonial-carousel .carousel-dots { position: absolute; left: 0; right: 0; bottom: 0; }
.testimonial-carousel .carousel-dots button::before { background: rgba(255, 255, 255, 0.4); }
.testimonial-carousel .carousel-dots button[aria-current="true"]::before { background: rgb(var(--secondary)); }
.testimonial-carousel .carousel-arrow { top: 40%; background: transparent; border: 1px solid rgba(255, 255, 255, 0.45); color: #fff; }
.testimonial-carousel .carousel-arrow:hover { background: rgba(255, 255, 255, 0.12); }
.testimonial-carousel .carousel-arrow.prev { left: 0; }
.testimonial-carousel .carousel-arrow.next { right: 0; }
@media (max-width: 699px) { .testimonal { padding-left: 0.5rem; padding-right: 0.5rem; } .testimonial-carousel .carousel-arrow { display: none; } }
.carousel.is-single .carousel-arrow, .carousel.is-single .carousel-dots, .carousel.is-single .carousel-progress { display: none; }
.carousel-progress { display: none; }

/* Accordion --------------------------------------------------------------- */
/* An editorial question list: hairline rules rather than filled bars, so a
   long run of questions stays calm and the page keeps its light feel. */
section.accordion { max-width: 900px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
section.accordion > .title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 0.5rem;
  color: rgb(var(--primary));
}
.accordion-btn {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1.5rem;
  border: 0;
  border-top: 1px solid rgba(var(--secondary-dark), 0.55);
  background: transparent;
  color: rgb(var(--primary));
  padding: 1.35rem 0.9rem;
  font-family: var(--serif); font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}
/* only the first question carries a top rule; the rest come from the answers */
.accordion-btn ~ .accordion-btn { border-top: 0; }
.accordion-btn:hover { color: rgb(var(--tertiary-dark)); background: rgba(var(--secondary), 0.28); }

/* the chevron sits in a quiet ring that fills in once the answer is open */
.accordion-btn > span:not(.faq-q) {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  border: 1px solid rgba(var(--secondary-dark), 0.9);
  color: rgb(var(--primary));
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.accordion-btn:hover > span:not(.faq-q) { border-color: rgb(var(--tertiary)); color: rgb(var(--tertiary-dark)); }
.accordion-btn i { width: 0.8em; height: 0.8em; transition: transform 0.4s var(--ease); }
.accordion-btn[aria-expanded="true"] { color: rgb(var(--primary)); }
.accordion-btn[aria-expanded="true"] > span:not(.faq-q) {
  background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: #fff;
}
.accordion-btn[aria-expanded="true"] i { transform: rotate(180deg); }
/* Expands by animating the grid row from 0fr to 1fr, so it eases open
   to its natural height without needing a hard-coded max-height. */
/* The rule under each answer is what separates one question from the next,
   so a closed answer still leaves its hairline behind. */
.accordion-content {
  display: grid; grid-template-rows: 0fr;
  border-bottom: 1px solid rgba(var(--secondary-dark), 0.55);
  transition: grid-template-rows 0.45s var(--ease);
}
.accordion-content > * { overflow: hidden; min-height: 0; padding: 0 0.9rem; }
.accordion-content.open { grid-template-rows: 1fr; }
.accordion-content.open > * { padding: 0.25rem 3.5rem 1.75rem 0.9rem; }
.accordion-content p, .accordion-content li { max-width: 64ch; }
.accordion-content p:last-child { margin-bottom: 0; }
.accordion-content ul { margin-bottom: 1rem; }
/* supplier links are printed as bare URLs and addresses; let them break */
.accordion-content a, .full-text a, .room-description a { overflow-wrap: anywhere; }

/* Menus ------------------------------------------------------------------- */
.menu-section { max-width: 1280px; margin: 0 auto var(--space); padding: 0 1.25rem; }
.mobile-menu-buttons { margin-bottom: 1.5rem; }
@media (min-width: 900px) { .mobile-menu-buttons { display: none; } }
.select-dropdown, .filter-select, .offer-filters-select {
  width: 100%; padding: 0.8rem 1rem; font-family: inherit; font-size: 1rem;
  border: 1px solid rgb(var(--secondary-dark)); border-radius: var(--radius);
  background: #fff; color: var(--ink);
}
.menu-tabs { display: none; }
@media (min-width: 900px) {
  .menu-tabs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
    margin-bottom: 2.5rem;
  }
  .menu-tabs > div { flex: 0 1 auto; max-width: none; }
  .menu-btn {
    cursor: pointer;
    border: 1px solid rgba(var(--secondary-dark), 0.9);
    border-radius: 999px;
    padding: 0.7rem 1.4rem; text-align: center;
    display: grid; place-items: center;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  }
  .menu-btn:hover { background: rgb(var(--secondary)); border-color: rgb(var(--secondary-dark)); }
  .menu-btn.active { background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: #fff; }
  .menu-btn .menu-title { font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.08em; margin: 0; }
}
.menu-content { display: none; }
.menu-content.active {
  display: block;
  background-color: rgba(var(--tertiary), 0.06);
  background-image: url('/assets/svg/black-pattern.svg');
  background-repeat: no-repeat;
  background-position: top 20% center;
  background-size: 500% auto;
  background-blend-mode: screen;
  padding: 2rem 1rem;
}
@media (min-width: 900px) { .menu-content.active { padding: 3rem 2.5rem; } }
.menu-heading { text-align: center; margin-bottom: 2.5rem; }
.menu-heading .menu-title {
  font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.4rem);
  display: block; margin-bottom: 1rem; color: rgb(var(--primary));
}
/* Notes were set in capitals, which is hard going for allergy and tips
   copy. Sentence case at a comfortable measure reads far better. */
.menu-description {
  display: block; max-width: 44rem; margin: 0 auto;
  text-transform: none; letter-spacing: 0; font-size: 0.9rem;
  line-height: 1.65; color: #55564e;
}
.menu-description p { margin-bottom: 0.5rem; }
.menu-description p:last-child { margin-bottom: 0; }

.menu-text { max-width: 46rem; margin: 0 auto; }
.menu-text .group { margin-bottom: 2.75rem; }
.menu-row.group-heading {
  /* the heading band from the original site: clay box, white serif */
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: rgb(var(--tertiary)); color: #fff;
  padding: 0.75rem 1rem; margin-bottom: 1rem; border: 0;
  font-family: var(--serif); font-size: 1.25rem; line-height: 1.4;
}
.menu-row.group-heading .text-sm { display: block; font-family: var(--sans); font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); }
.menu-row.group-heading .text-sm p { margin: 0; }
/* the price label only makes sense when prices are actually shown */
.menu-row.group-heading > span:last-child {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
}
.group-items { list-style: none; padding: 0; margin: 0; }

/* Classic menu setting: dish and price on one line, joined by a faint
   leader so the eye can travel across without a hard rule. */
.menu-item { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.7rem 0; }
.menu-item .item { flex: 1; min-width: 0; }
.menu-item .item-name { font-weight: 400; color: rgb(var(--primary)); }
.menu-item .item-desc {
  display: block; font-size: 0.9rem; color: #66675e; font-weight: 300;
  margin-top: 0.15rem; max-width: 38rem;
}
.menu-item .item-price { white-space: nowrap; font-weight: 400; color: rgb(var(--primary)); }
.menu-item .item-name { display: flex; align-items: baseline; gap: 0.5rem; }
/* the leader fills whatever room is left, so the dish name never wraps early */
.menu-item:has(.item-price) .item-name::after {
  content: "";
  flex: 1 1 auto; min-width: 1.5rem;
  border-bottom: 1px dotted rgba(var(--secondary-dark), 0.9);
  transform: translateY(-0.28em);
}

/* Accommodation ----------------------------------------------------------- */
section.accommodation { max-width: 1300px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
/* Rooms alternate side to side down the page, each a large photograph with
   the detail set on sage beside it, so the list reads as a tour of the rooms
   rather than a stack of identical boxes. */
.accommodation-item {
  display: grid; margin-bottom: 3rem;
  border: 0;
  overflow: hidden;
  background: rgb(var(--secondary-light));
}
@media (min-width: 900px) {
  .accommodation-item { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
  .accommodation-list .accommodation-item:nth-child(even) .image-container { order: 2; }
}
.accommodation-item .image-container { position: relative; min-height: 280px; }
.accommodation-item .image-container .carousel,
.accommodation-item .image-container .carousel-track,
.accommodation-item .image-container .carousel-slide,
.accommodation-item .image-container .card-img { height: 100%; }
.accommodation-item .image-container img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
@media (min-width: 900px) { .accommodation-item .image-container img { aspect-ratio: auto; } }
.accommodation-item .right-container {
  padding: clamp(1.75rem, 4vw, 3rem);
  display: flex; flex-direction: column; justify-content: center;
}
/* room name first, then the tabs, which is the order you actually read in */
.accommodation-item .tabs-wrap { display: flex; flex-direction: column; }
.room-title { order: 1; margin-bottom: 1.25rem; }
.accommodation-tabs { order: 2; display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1.25rem; }
.accommodation-tabs .tab-btn {
  cursor: pointer; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(var(--secondary-dark), 0.9); border-radius: 999px;
  color: rgb(var(--primary)); background: transparent;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.accommodation-tabs .tab-btn:hover { border-color: rgb(var(--tertiary)); color: rgb(var(--tertiary-dark)); }
.accommodation-tabs .tab-btn.active-tab {
  background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: #fff;
}
.description-wrap, .facilities-wrap { order: 3; }
.room-name { font-size: clamp(1.6rem, 2.4vw, 2rem); margin-bottom: 0.35rem; color: rgb(var(--primary)); }
.room-tagline {
  display: inline-block;
  color: rgb(var(--tertiary-dark));
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.75rem;
}
.description-wrap[hidden], .facilities-wrap[hidden] { display: none; }
.room-description p:last-child { margin-bottom: 0; }
.accommodation-item .btn { align-self: flex-start; margin-top: 1.5rem; }
/* facilities read as a tidy two-column tick list */
.facilities-wrap ul, .facilities-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: 0.4rem 1.5rem;
  font-size: 0.95rem;
}
@media (min-width: 520px) { .facilities-wrap ul, .facilities-list { grid-template-columns: 1fr 1fr; } }
.facilities-wrap li { position: relative; padding-left: 1.4rem; }
.facilities-wrap li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; background: rgb(var(--tertiary));
  transform: rotate(45deg);
}

/* Gallery ----------------------------------------------------------------- */
section.gallery { max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
section.gallery > .section-title { text-align: center; font-size: clamp(1.5rem, 2.4vw, 2rem); color: rgb(var(--primary)); margin-bottom: 1.25rem; }
.gallery-filter { margin-bottom: 1.5rem; }
.filter-select { max-width: 24rem; }
@media (min-width: 700px) { .gallery-filter .filter-select { display: none; } }
.filter-buttons { display: none; }
@media (min-width: 700px) { .filter-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; } }
.filter-buttons .btn.active { background: rgb(var(--primary)); color: #fff; }
.gallery-images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
@media (min-width: 700px) { .gallery-images { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .gallery-images { grid-template-columns: repeat(4, 1fr); } }
.gallery-images .gallery-image, .gallery-images a, .gallery-images figure { display: block; }
.gallery-images img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; cursor: pointer; transition: opacity 0.25s; }
.gallery-images img:hover { opacity: 0.88; }
.gallery-images .hidden-by-filter { display: none; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0, 0, 0, 0.92);
  display: grid; place-items: center; padding: 2rem;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 84vh; width: auto; height: auto; }
.lightbox-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: 0; color: #fff; cursor: pointer;
  width: 2.5rem; height: 2.5rem;
}
.lightbox .carousel-arrow { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* Offers ------------------------------------------------------------------ */
section.offers { max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
section.offers .section-title { text-align: center; margin-bottom: 1.5rem; }
section.offers .section-title h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0; }
.offer-feed-filter { margin-bottom: 1.5rem; }
.offer-feed-filter .offer-filters-select { max-width: 24rem; }
@media (min-width: 700px) { .offer-feed-filter .offer-filters-select { display: none; } }
.mobile-select { display: none; }
@media (min-width: 700px) { .mobile-select { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; } }
.mobile-select .btn.inactive { background: rgb(var(--secondary)); color: rgb(var(--primary)); }
.offers-container .grid-container { display: grid; gap: 2rem 1.75rem; }
/* each offer sits inside a filter wrapper, so pass the stretch through */
.offers-container .grid-container > * { display: flex; }
.offers-container .grid-container > .offer { display: flex; }
.offers-container .grid-container > * > .offer { flex: 1; }
@media (min-width: 800px) { .offers-container .grid-container { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .offers-container .grid-container { grid-template-columns: repeat(3, 1fr); } }

/* Each offer reads as a plate: full-width photograph, the price carried on a
   sage band across its foot, then the detail beneath. */
.offer {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid rgba(var(--secondary-dark), 0.6);
  overflow: hidden;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.offer:hover { box-shadow: 0 14px 34px rgba(4, 53, 32, 0.13); transform: translateY(-4px); }
.offer .offer-img { position: relative; overflow: hidden; }
.offer .offer-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.offer .overlay, .offer .offer-txt {
  display: flex; flex-direction: column; flex: 1;
  padding: 1.5rem;
}
/* The CMS wraps the copy in an extra div, so pass the stretch through it. */
.offer .overlay > .content, .offer .offer-txt > .content { display: flex; flex-direction: column; flex: 1; }
.offer .tagline {
  display: block;
  margin: 0 0 1rem;
  padding: 0.55rem 0.9rem;
  align-self: flex-start;
  background: rgb(var(--secondary));
  color: rgb(var(--primary));
  border-radius: var(--radius);
  letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem;
}
.offer .heading, .offer .offer-txt .title {
  font-size: 1.5rem; margin-bottom: 0.75rem; color: rgb(var(--primary));
}
.offer .description { flex: 1; display: flex; flex-direction: column; }
.offer .description p:last-of-type { margin-bottom: 0; }
/* the call to action always sits on the baseline, whatever the copy length */
.offer .description > p:last-child:has(.btn) { margin-top: auto; padding-top: 1.25rem; }
.offer .description .btn, .offer .offer-txt .btn { align-self: flex-start; }
.offer.hidden-by-filter { display: none; }

/* Blog -------------------------------------------------------------------- */
.blog-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.blog-filters .btn.inactive { background: rgb(var(--secondary)); color: rgb(var(--primary)); }
section.blog-feed { max-width: 1400px; margin: 0 auto var(--space); padding: 0 1.25rem; }
/* In the "more inspiration" slideshow the bottom of each slide is text and a
   Read More button, not a photo, so the dots sit underneath the cards (and dark,
   since white dots vanish on the page background) instead of on top of them. */
section.blog-feed .carousel-dots { position: static; margin-top: 0.75rem; }
section.blog-feed .carousel-dots button::before { background: rgba(var(--primary), 0.25); }
section.blog-feed .carousel-dots button[aria-current="true"]::before { background: rgb(var(--primary)); }
.blog-grid { display: grid; gap: 2rem; }
@media (min-width: 700px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card { text-decoration: none; color: inherit; display: block; }
.blog-card:hover { color: inherit; }
.blog-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.blog-card .blog-date { display: block; margin: 1rem 0 0.35rem; letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.75rem; color: rgb(var(--tertiary-deep)); }
.blog-card h2 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.blog-card:hover h2 { color: rgb(var(--tertiary-dark)); }
.blog-card p { font-size: 0.95rem; }
.blog-card.hidden-by-filter { display: none; }
article.blog-post { max-width: 820px; margin: 0 auto var(--space); padding: 0 1.25rem; }
article.blog-post img { margin: 1.5rem auto; }
article.blog-post h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-top: 2rem; color: rgb(var(--primary)); }
article.blog-post h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); margin-top: 1.5rem; color: rgb(var(--primary)); }
.back-to-blog { display: inline-block; margin-top: 2rem; }

/* Forms ------------------------------------------------------------------- */
/* The enquiry form sits in a deep green panel, as on the original:
   40px padding, 8px radius, white labels, pale inputs, tan submit. */
section.forms { max-width: 1024px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
section.forms .form-container {
  background: rgb(var(--primary)); color: #fff;
  padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 8px;
}
section.forms label { color: #fff; font-size: 0.875rem; margin-bottom: 0.5rem; }
section.forms label .required { color: rgb(205, 176, 156); }
section.forms .text-field, section.forms .email-field, section.forms .select-field, section.forms textarea,
section.forms input[type="text"], section.forms input[type="email"], section.forms input[type="tel"], section.forms select {
  background: #edf6f9; border: 1px solid #e5e7eb; border-radius: 6px; color: #000;
  min-height: 58px; padding: 1rem; margin-bottom: 1rem;
}
section.forms select { min-height: 55px; }
section.forms textarea { min-height: 178px; }
section.forms .checkbox-wrap { margin-bottom: 1rem; }
section.forms input[type="checkbox"] { width: 24px; height: 24px; }
section.forms .submit-button { background: rgb(var(--tertiary)); color: #fff; padding: 1rem; border-radius: var(--radius); }
section.forms .response-message.show { background: rgb(var(--secondary)); color: rgb(var(--primary)); }
form label { display: block; font-size: 0.9rem; letter-spacing: 0.05em; margin-bottom: 0.3rem; }
form label .required { color: rgb(var(--tertiary-dark)); }
.text-field, .email-field, .select-field, .textarea-field, form input[type="text"], form input[type="email"], form input[type="tel"], form select, form textarea {
  width: 100%; padding: 0.75rem 0.9rem; margin-bottom: 1.1rem;
  border: 1px solid #cfcfc6; border-radius: var(--radius);
  font-family: inherit; font-size: 1rem; background: #fff; color: var(--ink);
}
form textarea { min-height: 8rem; resize: vertical; }
/* a checkbox and its label read as one line */
.checkbox-wrap { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1.1rem; }
.checkbox-wrap input[type="checkbox"] { width: auto; margin: 0.35rem 0 0; flex: 0 0 auto; }
.checkbox-wrap label { margin: 0; }
form input:focus, form select:focus, form textarea:focus { border-color: rgb(var(--primary)); outline: none; }
.form-hp { position: absolute; left: -9999px; }
.submit-button { background: rgb(var(--tertiary)); color: #fff; }
.submit-button:hover { background: rgb(var(--tertiary-dark)); color: #fff; }
.response-message { display: none; }
.response-message.show { display: block; margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: var(--radius); background: rgb(var(--secondary-light)); color: rgb(var(--primary)); }
.response-message.error { background: #f6e3e0; color: #7a2e20; }

/* Embed ------------------------------------------------------------------- */
section.embed { max-width: 900px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
section.embed[id] { scroll-margin-top: calc(var(--hdr, 0px) + 1rem); }
/* The booking calendar doesn't report its height, so give it room for the
   date picker and the details step that follows on each screen size. */
section.showround-calendar { max-width: 1140px; }
section.showround-calendar iframe { height: 900px; min-height: 0; }
@media (max-width: 699px) { section.showround-calendar iframe { height: 1150px; } }
.calendar-fallback { margin: 1rem 0 0; text-align: center; font-size: 0.9rem; color: rgb(var(--tertiary-deep)); }
section.embed.pre-order { scroll-margin-top: calc(var(--hdr, 0px) + 1rem); }
section.embed.pre-order > .title { text-align: center; font-size: clamp(1.7rem, 3vw, 2.3rem); color: rgb(var(--primary)); margin-bottom: 1.25rem; }
section.embed.pre-order iframe { min-height: 1000px; }
.embed-content iframe { width: 100%; border: 0; min-height: 620px; }
/* VenueFlow's resizer sets an exact pixel height on these; our floor would
   otherwise fight it, so scope the floor to embeds without one. */
.embed-content iframe[data-height] { min-height: 0; }
/* VenueFlow sizes these once its script runs (its inline height wins). If the
   script is slow or blocked, start at each form's measured height so the form
   is never squashed to nothing. */
.embed-content iframe[data-form-id="oKdSdVZOvyUvU7hp0muP"] { height: 1105px; }
.embed-content iframe[data-form-id="t5sOaDd7Dr680zToyK7r"] { height: 590px; }
@media (max-width: 699px) {
  .embed-content iframe[data-form-id="oKdSdVZOvyUvU7hp0muP"] { height: 1180px; }
  .embed-content iframe[data-form-id="t5sOaDd7Dr680zToyK7r"] { height: 941px; }
}
#rd-widget-frame { min-height: 520px; }

/* Sitemap ----------------------------------------------------------------- */
section.sitemap { max-width: 1100px; margin: 0 auto var(--space); padding: 0 1.25rem; }
section.sitemap > ul {
  list-style: none; padding-left: 0; margin: 0;
  display: grid; gap: 1.5rem; align-items: start;
}
@media (min-width: 700px) { section.sitemap > ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { section.sitemap > ul { grid-template-columns: repeat(3, 1fr); } }
section.sitemap > ul > li {
  background: rgb(var(--secondary-light));
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}
section.sitemap > ul > li > a, section.sitemap > ul > li {
  font-family: var(--serif); font-size: 1.2rem; color: rgb(var(--primary));
}
section.sitemap > ul > li > a { text-decoration: none; }
section.sitemap > ul > li > a:hover { color: rgb(var(--tertiary-deep)); }
section.sitemap ul ul {
  list-style: none; padding-left: 0; margin: 0.75rem 0 0;
  border-top: 1px solid rgba(var(--secondary-dark), 0.8); padding-top: 0.6rem;
}
section.sitemap ul ul a {
  font-family: var(--sans); font-size: 0.92rem; color: var(--ink); text-decoration: none;
}
section.sitemap ul ul a:hover { color: rgb(var(--tertiary-deep)); text-decoration: underline; }
section.sitemap a { display: inline-block; padding: 0.3rem 0; min-height: 36px; }

/* Footer ------------------------------------------------------------------ */
footer { background: rgb(var(--primary)); color: #fff; }
footer a { color: #fff; text-decoration: none; }
footer a:hover { color: rgb(var(--secondary)); }

/* The stag and a single line set the tone before the practical detail */
.footer-lead {
  max-width: 1300px; margin: 0 auto;
  padding: 3.5rem 1.5rem 0;
  text-align: center;
}
.footer-stag {
  display: block; width: 9rem; height: 5rem; margin: 0 auto 1.25rem;
  background: url('/assets/svg/white-stag.svg') no-repeat center center;
  background-size: auto 100%;
}
.footer-lead { padding-bottom: 0; }
.footer-strapline {
  max-width: 34rem; margin: 0 auto;
  font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5; color: rgba(255, 255, 255, 0.92);
}

.footer-container {
  max-width: 1300px; margin: 0 auto;
  padding: 3rem 1.5rem 2.5rem;
  display: grid; gap: 2.5rem;
}
@media (min-width: 640px) { .footer-container { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-container { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; } }
/* the newsletter needs the full width before the columns split */
@media (min-width: 640px) and (max-width: 1023px) { .footer-col.newsletter { grid-column: 1 / -1; } }

.footer-heading {
  font-family: var(--sans); font-size: 0.75rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgb(var(--secondary));
  margin: 0 0 1.1rem;
}
.footer-col address { font-style: normal; line-height: 1.9; }
.footer-title { font-family: var(--serif); font-size: 1.6rem; margin: 0 0 0.75rem; color: #fff; }
/* The footer columns sit side by side, so keep every line of them on one
   28px baseline — otherwise the address, opening times and booking links
   drift apart line by line. */
footer address, .hours-line, .footer-links a { font-size: 1rem; line-height: 1.75; font-style: normal; }
.hours-line { margin: 0 0 0.75rem; }
.footer-note { font-size: 0.875rem; line-height: 2; color: rgba(255, 255, 255, 0.72); }
.footer-contact { margin: 0.75rem 0 0; font-family: var(--serif); font-size: 1.35rem; }
/* the phone number is a primary call to action, so make it properly tappable */
.footer-contact a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-contact a:hover { color: rgb(var(--secondary)); }

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0; }
/* A comfortable tap target on touch screens; on a pointer device the links
   stay on the same rhythm as the neighbouring columns. */
.footer-links a { display: inline-flex; align-items: center; }
@media (pointer: coarse) { .footer-links a { min-height: 40px; } }
.footer-links a { position: relative; }
.footer-links a::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px; background: rgb(var(--secondary));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.footer-links a:hover::after { transform: scaleX(1); }

.hours { margin: 0; font-size: 0.95rem; }
.hours dt {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6); margin-top: 0.9rem;
}
.hours dt:first-child { margin-top: 0; }
.hours dd { margin: 0.1rem 0 0; }

/* Newsletter */
.newsletter .form-container { display: grid; gap: 0.6rem; margin-top: 1rem; }
@media (min-width: 480px) { .newsletter .form-container { grid-template-columns: 1fr 1fr; } }
@media (min-width: 480px) { .newsletter .form-container .btn { grid-column: 1 / -1; justify-self: start; } }
/* [type] keeps these ahead of the general form field styling, which would
   otherwise paint them white and leave white text invisible. */
.newsletter input[type] {
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.07); color: #fff;
  border-radius: var(--radius);
  font-family: inherit; font-size: 0.95rem; margin: 0;
}
.newsletter input[type]::placeholder { color: rgba(255, 255, 255, 0.6); }
.newsletter input[type]:focus { border-color: rgb(var(--secondary)); outline: none; background: rgba(255, 255, 255, 0.12); }
.newsletter .primary-btn { background: rgb(var(--tertiary)); padding: 0.8rem 2rem; }
.newsletter .primary-btn:hover { background: rgb(var(--tertiary-dark)); }
.newsletter .privacy { font-size: 0.8rem; margin: 0.5rem 0 0; color: rgba(255, 255, 255, 0.65); }
.newsletter .privacy a { display: inline-flex; align-items: center; min-height: 40px; }
.newsletter .privacy a { text-decoration: underline; }

.social-icons { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.social-icons a {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.social-icons a:hover { background: rgb(var(--tertiary)); border-color: rgb(var(--tertiary)); color: #fff; }
.social-icons .icon { width: 1.05rem; height: 1.05rem; }

/* Base strip */
.footer-base {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 1300px; margin: 0 auto;
  padding: 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  text-align: center;
}
@media (min-width: 768px) { .footer-base { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer-nav ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.75rem;
  list-style: none; margin: 0; padding: 0;
}
.footer-nav a { display: inline-flex; align-items: center; min-height: 40px; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }
.site-footer-credit { font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); }

/* Cookie banner ----------------------------------------------------------- */
.cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 250;
  max-width: 34rem; margin: 0 auto;
  background: rgb(var(--primary)); color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.cookie-banner-inner { padding: 1.25rem 1.5rem; }
.cookie-banner p { font-size: 0.9rem; margin-bottom: 1rem; }
.cookie-banner a { color: rgb(var(--secondary)); }
.cookie-banner-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.cookie-banner .btn { padding: 0.6rem 1.3rem; font-size: 0.8rem; }
.cookie-banner .primary-btn { background: rgb(var(--secondary)); color: rgb(var(--primary)); }
.cookie-banner .primary-btn:hover { background: rgb(var(--secondary-dark)); }

/* Utility leftovers from source markup ------------------------------------ */
.text-center { text-align: center; }
.text-white { color: #fff; }
.uppercase { text-transform: uppercase; }
.block { display: block; }
.tracking-widest { letter-spacing: 0.25em; }
.animate-bounce { animation: bob 1.6s ease-in-out infinite; }
.hidden { display: none; }

/* ==========================================================================
   Motion
   Everything here is additive polish, gated behind the .js-anim class (set
   in the head only when the visitor has not asked for reduced motion), so
   the site is complete and readable with no JavaScript and no animation.
   ========================================================================== */

/* Sections ease up into place as they enter the viewport */
.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}
.js-anim [data-reveal].is-visible { opacity: 1; transform: none; }
.js-anim [data-reveal].is-visible > * { will-change: auto; }

/* Cards, tiles and gallery items arrive one after another rather than as a block */
.js-anim [data-reveal-child] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--stagger, 0ms);
}
.js-anim [data-reveal-child].is-visible { opacity: 1; transform: none; }

/* The stag settles in with a touch of scale */
.js-anim .flourish[data-reveal] { transform: translateY(14px) scale(0.94); }
.js-anim .flourish[data-reveal].is-visible { transform: none; transition-duration: 1s; }

/* Slow drift across the hero photography */
@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.08); } }
.js-anim section.hero .carousel-slide.current img { animation: heroDrift 7.5s ease-out both; }
.js-anim section.hero .carousel-slide:only-child img { animation: heroDrift 14s ease-out both; }

/* Buttons lift very slightly on hover */
.btn { will-change: transform; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.js-anim .btn { transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.js-anim .btn:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }

/* Editorial images breathe on hover */
.img-text-container .image-wrap img,
.blog-card img,
.offer .offer-img img { transition: transform 1.1s var(--ease); }
.img-text-container:hover .image-wrap img,
.blog-card:hover img,
.offer:hover .offer-img img { transform: scale(1.04); }
.image-wrap, .blog-card, .offer .offer-img { overflow: hidden; }

/* Gallery tiles */
.gallery-images img { transition: transform 0.7s var(--ease), opacity 0.3s var(--ease); }
.gallery-images a:hover img { transform: scale(1.05); }
.gallery-images a { overflow: hidden; display: block; }

/* Lightbox fades rather than snapping in */
.js-anim .lightbox { animation: fadeIn 0.25s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Anyone who prefers reduced motion gets none of it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal-child] { opacity: 1 !important; transform: none !important; }
  .btn:hover { transform: none; }
}


/* ==========================================================================
   Additions: hero message, booking bar, review cards, package comparison,
   masonry gallery, facts strip, room chips, menu jump bar, map, festive bar,
   page transitions, image wipes, parallax, blur-up.
   ========================================================================== */

/* Hero message and calls to action */
.hero-overlay-content {
  position: absolute; left: 0; right: 0; bottom: max(30%, 12rem); z-index: 5;
  text-align: center; color: #fff; padding: 0 1.25rem;
}
.hero-eyebrow { margin: 0 0 0.6rem; font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.hero-title {
  margin: 0 auto 1.25rem; max-width: 18ch;
  font-family: var(--serif); font-weight: 500; line-height: 1.1;
  font-size: clamp(2.1rem, 6vw, 4.4rem); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.hero-ctas { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.hero-ctas .btn { min-width: 10rem; }
@media (max-width: 599px) { .hero-ctas { flex-direction: column; align-items: center; } .hero-ctas .btn { width: min(100%, 17rem); } }
@keyframes heroRise { to { opacity: 1; transform: none; } }
.js-anim .hero-overlay-content > * { opacity: 0; transform: translateY(18px); animation: heroRise 0.9s var(--ease) forwards; }
.js-anim .hero-overlay-content > :nth-child(2) { animation-delay: 0.15s; }
.js-anim .hero-overlay-content > :nth-child(3) { animation-delay: 0.3s; }
section.hero .hero-scroll { bottom: 2.25rem; }

/* Sticky booking bar (phones only, after the hero scrolls away) */
.booking-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: rgb(var(--primary)); color: #fff;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18);
  transform: translateY(100%); transition: transform 0.35s var(--ease);
}
.booking-bar.is-on { transform: none; }
.booking-bar[hidden] { display: grid; }
.booking-bar a {
  display: flex; align-items: center; justify-content: center; min-height: 56px;
  color: #fff; text-decoration: none; font-size: 0.85rem; letter-spacing: 0.06em;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.booking-bar a:last-child { border-right: 0; }
.booking-bar a:hover { background: rgb(var(--primary-light)); color: #fff; }
@media (min-width: 1024px) { .booking-bar { display: none !important; } }
body.has-booking-bar { padding-bottom: 56px; }
body.has-booking-bar .cookie-banner { bottom: calc(56px + 0.75rem); }

/* Package comparison */
.package-compare { max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
.package-compare > .title { text-align: center; font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 1.5rem; color: rgb(var(--primary)); }
.compare-tabs { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.compare-tabs .btn.active { background: rgb(var(--primary)); color: #fff; }
.compare-grid { display: grid; gap: 1.5rem; }
.compare-card { display: none; border: 1px solid rgb(var(--secondary-dark)); border-radius: 6px; padding: 1.75rem 1.5rem; background: #fff; }
.compare-card.is-active { display: flex; flex-direction: column; }
.compare-card h3 { font-size: 1.6rem; margin-bottom: 0.25rem; color: rgb(var(--primary)); }
.compare-price { font-family: var(--serif); font-size: 1.5rem; color: rgb(var(--tertiary-deep)); margin: 0 0 1.25rem; }
.compare-card dl { margin: 0 0 1rem; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; font-size: 0.95rem; }
.compare-card dt { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--tertiary-deep)); padding-top: 0.2rem; }
.compare-card dd { margin: 0; }
.compare-card details { margin: 0 0 1.25rem; border-top: 1px solid rgba(var(--secondary-dark), 0.6); padding-top: 0.75rem; }
.compare-card summary { cursor: pointer; font-family: var(--serif); font-size: 1.1rem; color: rgb(var(--primary)); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.compare-card summary::-webkit-details-marker { display: none; }
.compare-card summary::after { content: "+"; font-size: 1.3rem; color: rgb(var(--tertiary)); }
.compare-card details[open] summary::after { content: "\2013"; }
.compare-card details ul { margin: 0.75rem 0 0; padding-left: 1.2rem; font-size: 0.92rem; }
.compare-card details li { margin-bottom: 0.3rem; }
.compare-card .btn { align-self: flex-start; margin-top: auto; }
@media (min-width: 900px) {
  .compare-tabs { display: none; }
  .compare-grid { grid-template-columns: repeat(3, 1fr); }
  .compare-card { display: flex; flex-direction: column; }
}

/* Gallery as masonry, keeping each photograph's own proportions */
.gallery-images { display: block; columns: 2; column-gap: 0.6rem; }
@media (min-width: 700px) { .gallery-images { columns: 3; } }
@media (min-width: 1100px) { .gallery-images { columns: 4; } }
.gallery-images .gallery-image { display: block; break-inside: avoid; margin: 0 0 0.6rem; }
.gallery-images img { aspect-ratio: auto; height: auto; }
.gallery-images .hidden-by-filter { display: none; }
.lightbox { flex-direction: column; gap: 0.75rem; }
.lightbox:not([hidden]) { display: flex; }
.lightbox-caption { color: #fff; font-size: 0.9rem; text-align: center; max-width: 60ch; opacity: 0.85; }
.lightbox-counter { position: absolute; top: 1.2rem; left: 1.25rem; color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; letter-spacing: 0.12em; }

/* Facts strip */
.facts-strip { max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
.facts-strip ul {
  list-style: none; margin: 0; padding: 1.5rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem;
  border-top: 1px solid rgba(var(--secondary-dark), 0.6); border-bottom: 1px solid rgba(var(--secondary-dark), 0.6);
}
@media (max-width: 899px) { .facts-strip li:last-child { grid-column: 1 / -1; } }
@media (min-width: 900px) { .facts-strip ul { grid-template-columns: repeat(5, 1fr); } }
.facts-strip li { text-align: center; }
.fact-num { display: block; font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1; color: rgb(var(--primary)); font-variant-numeric: tabular-nums; }
.fact-label { display: block; margin-top: 0.4rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--tertiary-deep)); }

/* Room facility chips */
.room-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0.25rem; padding: 0; list-style: none; }
.room-chips li { font-size: 0.74rem; letter-spacing: 0.04em; padding: 0.3rem 0.65rem; border-radius: 999px; background: #fff; border: 1px solid rgb(var(--tertiary)); color: rgb(var(--primary)); }

/* Menu jump bar (phones): sticky category chips */
.menu-jump { position: sticky; top: var(--hdr, 0px); z-index: 30; display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.6rem 0; margin: 0 0 0.75rem; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(6px); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.menu-jump::-webkit-scrollbar { display: none; }
.menu-jump a { flex: 0 0 auto; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgb(var(--tertiary)); font-size: 0.8rem; color: rgb(var(--primary)); text-decoration: none; white-space: nowrap; }
.menu-jump a.current { background: rgb(var(--primary)); color: #fff; border-color: rgb(var(--primary)); }
.menu-text .group { scroll-margin-top: calc(var(--hdr, 0px) + 4rem); }
@media (min-width: 900px) { .menu-jump { display: none; } }

/* Footer map */
.footer-map { max-width: 1300px; margin: 0 auto; padding: 0 1.5rem 2.5rem; text-align: center; }
.footer-map iframe { width: 100%; height: 260px; border: 0; border-radius: 6px; filter: saturate(0.85); display: block; margin-bottom: 1rem; }

/* Festive bar (shown September to December, dismissible) */
/* The bar comes after the nav in the header, so without this it would paint over
   the dropdowns; and it has no business showing while the phone menu is open. */
.desktop-nav { position: relative; z-index: 2; }
.festive-bar { z-index: 1; }
/* ...and the top row sits above both, so the Book Now dropdown opens over the
   nav (which wraps onto two lines at tablet widths) rather than behind it. */
.header-container.top-row { position: relative; z-index: 3; }
body.nav-open .festive-bar { display: none; }
.festive-bar { position: relative; display: block; background: rgb(var(--tertiary)); color: rgb(var(--primary)); text-align: center; padding: 0 3rem 0 1rem; font-size: 0.85rem; letter-spacing: 0.02em; }
.festive-bar a { color: rgb(var(--primary)); display: inline-flex; align-items: center; min-height: 44px; padding: 0.25rem 0; }
.festive-bar[hidden] { display: none; }
@media (max-width: 1023px) {
  .festive-bar { font-size: 0.8rem; padding: 0 2.9rem 0 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .festive-more { display: none; }
  #site-header.scrolled .festive-bar { display: none; }
}
.festive-bar a { color: #fff; text-decoration: none; }
.festive-bar a:hover { text-decoration: underline; color: #fff; }
.festive-close { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: transparent; color: rgb(var(--primary)); font-size: 1.4rem; cursor: pointer; }
body.festive-on:not(.has-hero) main.content { padding-top: calc(var(--header-h) - 2rem + 2.6rem); }

/* Page transitions, image wipes, parallax, blur-up */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }
}
.js-anim section.img-text[data-reveal] .image-wrap img { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease), transform 1.1s var(--ease); }
.js-anim section.img-text[data-reveal].is-visible .image-wrap img { clip-path: inset(0); }
.js-anim .image-frame { will-change: transform; }
.js-anim .content-inner .title::after { content: ""; display: block; width: 3rem; height: 2px; margin-top: 0.6rem; background: rgb(var(--tertiary)); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease) 0.3s; }
.js-anim section.img-text.is-visible .content-inner .title::after { transform: scaleX(1); }
.blur-up { background-size: cover; background-position: center; background-repeat: no-repeat; }
.blur-up.loaded { background-image: none !important; }
.three-card-container .card:hover .card-image img { filter: brightness(1.06); }
@media (prefers-reduced-motion: reduce) {
  .hero-overlay-content > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  section.img-text .image-wrap img { clip-path: none !important; }
}


/* FAQ search ---------------------------------------------------------------
   A hundred questions is a lot to scan, so this needs to read as a tool the
   moment you land on the page, not as an empty box. */
.faq-search {
  max-width: 1024px; margin: 0 auto 2.5rem; padding: 0 1.25rem;
  position: sticky; top: var(--hdr, 0px); z-index: 20;
}
.faq-search[hidden] { display: none; }
.faq-search-inner {
  background: rgb(var(--secondary-light));
  border: 1px solid rgb(var(--secondary-dark));
  border-radius: var(--radius);
  padding: 1.25rem clamp(1rem, 3vw, 1.75rem) 1.35rem;
}
.faq-search-title {
  margin: 0 0 0.85rem;
  font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: rgb(var(--primary)); text-align: center;
}
.faq-search-title .icon { margin-right: 0.5rem; color: rgb(var(--tertiary-dark)); }
.faq-search-field { position: relative; display: flex; align-items: center; }
.faq-search-field > .icon {
  position: absolute; left: 1.1rem; width: 1.15rem; height: 1.15rem;
  color: rgb(var(--tertiary-dark)); pointer-events: none;
}
.faq-search input {
  width: 100%; min-height: 60px;
  padding: 0.95rem 3.25rem 0.95rem 3rem;
  font-family: var(--sans); font-size: 1.05rem; color: var(--ink);
  background: #fff;
  border: 2px solid rgb(var(--primary)); border-radius: var(--radius);
  -webkit-appearance: none; appearance: none;
  box-shadow: 0 2px 8px rgba(4, 53, 32, 0.08);
}
.faq-search input::-webkit-search-cancel-button { display: none; }
.faq-search input::placeholder { color: rgba(35, 31, 32, 0.6); }
.faq-search input:focus {
  outline: none;
  border-color: rgb(var(--tertiary));
  box-shadow: 0 0 0 3px rgba(var(--tertiary), 0.35);
}
.faq-search-clear {
  position: absolute; right: 0.55rem;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: none; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: rgb(var(--tertiary-deep));
}
.faq-search-clear[hidden] { display: none; }
.faq-search-count {
  margin: 0.85rem 0 0;
  font-size: 0.875rem; letter-spacing: 0.03em; color: rgb(var(--tertiary-deep)); text-align: center;
}
.faq-search-count:empty { display: none; }
.faq-search-empty {
  margin-top: 1rem; padding: 1.25rem;
  background: #fff; border-radius: var(--radius); text-align: center;
}
.faq-search-empty[hidden] { display: none; }
.faq-search-empty p:last-child { margin-bottom: 0; }
.accordion-btn .faq-q { flex: 1 1 auto; min-width: 0; }
.accordion-btn .faq-q mark {
  background: rgb(var(--secondary)); color: rgb(var(--primary));
  padding: 0 0.15em; border-radius: 2px;
}
section.accordion[hidden] { display: none; }
.accordion-btn[hidden], .accordion-content[hidden] { display: none !important; }
/* the first question group sits right under the search, so close the gap */
.faq-search + section.accordion { margin-top: 0; padding-top: 0; }
.faq-search + section.accordion > .title { margin-top: 0; }

/* Links inside the deep green panels ---------------------------------------
   They would otherwise inherit the green link colour and vanish into the
   background, so carry the clay accent and brighten to white on hover. */
.content-inner a:not(.btn) {
  color: rgb(var(--tertiary));
  text-decoration: underline; text-underline-offset: 3px;
}
.content-inner a:not(.btn):hover,
.content-inner a:not(.btn):focus-visible { color: #fff; }


/* Callouts inside the panels: dates, offers and prices that need to be read first */
.content-inner .date-callout-list {
  list-style: none; margin: 0.5rem 0 1rem; padding: 0;
  font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.3; color: rgb(var(--secondary));
}
.content-inner .date-callout-list li { padding: 0.45rem 0; border-bottom: 1px solid rgba(var(--secondary), 0.3); margin: 0; }
.content-inner .date-callout-list li:first-child { border-top: 1px solid rgba(var(--secondary), 0.3); }
section.img-text.swap .content-inner .date-callout-list { color: rgb(var(--primary)); }
.content-inner .date-callout { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: 0.02em; color: rgb(var(--secondary)); margin: 0.25rem 0 0.75rem; }
section.img-text.swap .content-inner .date-callout { color: rgb(var(--primary)); }
.content-inner .offer-callout {
  display: inline-block; margin: 0.25rem 0 1rem; padding: 0.7rem 1rem;
  background: rgb(var(--tertiary)); color: rgb(var(--primary));
  font-weight: 500; border-radius: var(--radius); line-height: 1.45;
}
.price-callout { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.1; margin: 0.5rem 0 1.25rem; padding-top: 0.9rem; border-top: 1px solid rgba(var(--secondary), 0.35); color: rgb(var(--secondary)); }
.price-callout small { display: block; font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.06em; margin-top: 0.3rem; color: inherit; opacity: 0.9; }
.price-callout .price-sep { margin: 0 0.4rem; opacity: 0.5; }
.price-callout:has(.price-sep) small { display: inline; margin: 0 0 0 0.25rem; font-size: 0.9rem; }
section.img-text.swap .content-inner .price-callout { color: rgb(var(--tertiary-deep)); border-top-color: rgba(var(--secondary-dark), 0.8); }
/* 46-48: room between the bullet points in the package lists */
.content-inner ul li { margin-bottom: 0.5rem; }
/* 44: jump from a comparison card to the full package below */
.compare-more { display: inline-block; margin: -0.6rem 0 0.4rem; padding: 0.6rem 0; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--primary)); text-decoration: underline; text-underline-offset: 3px; }
.compare-more:hover { color: rgb(var(--tertiary-deep)); }
section.img-text[id] { scroll-margin-top: calc(var(--hdr, 0px) + 1.5rem); }

/* 67: blog cards read as cards you can open */
.blog-card { border: 1px solid rgba(var(--secondary-dark), 0.7); border-radius: var(--radius); overflow: hidden; background: #fff; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.blog-card .blog-date, .blog-card h2, .blog-card p { margin-left: 1.25rem; margin-right: 1.25rem; }
.blog-card p { margin-bottom: 0.75rem; }
.blog-card::after { content: "Read more \2192"; display: block; margin: 0 1.25rem 1.25rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--tertiary-deep)); }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(4, 53, 32, 0.13); }
.blog-card:hover::after { color: rgb(var(--primary)); }

/* 63 / 64: places laid out as cards */
section.place-grid { max-width: 1300px; margin-left: auto; margin-right: auto; padding: 0 1.25rem; }
.places { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .places { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .places { grid-template-columns: repeat(3, 1fr); } }
.place { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(var(--secondary-dark), 0.7); border-radius: var(--radius); overflow: hidden; }
.place-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.place-num { display: block; padding: 1.25rem 1.5rem 0; font-family: var(--serif); font-size: 2rem; line-height: 1; color: rgb(var(--tertiary)); }
.place-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.5rem 1.5rem; }
.place-body h2 { font-size: 1.45rem; color: rgb(var(--primary)); margin-bottom: 0.6rem; }
.place-body p { font-size: 0.95rem; }
.place-body .btn { align-self: flex-start; margin-top: auto; }
section.place-note { text-align: center; }

/* Print ------------------------------------------------------------------- */
@media print {
  #site-header, footer, .cookie-banner, .hero-scroll { display: none; }
  section.hero { height: auto; }
  /* never print a half-revealed page */
  [data-reveal], [data-reveal-child] { opacity: 1 !important; transform: none !important; }
  .accordion-content { grid-template-rows: 1fr !important; }
  .accordion-content > * { overflow: visible !important; }
}