/* ===================================================================
   Bowland Tipis - Design System
   Palette locked to brand guidelines. Canvas is a warm paper tint,
   Forest Green is the primary interactive colour, Amber is the warm
   secondary accent (campfire glow). EB Garamond throughout, mono stack for labels.
=================================================================== */

/* EB Garamond - self-hosted (previously Google Fonts). Same weights as before. */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/eb-garamond-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/eb-garamond-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/eb-garamond-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/eb-garamond-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/eb-garamond-latin-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('/assets/fonts/eb-garamond-latin-500-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  /* Brand palette (locked) */
  --forest:      #29331f;
  --forest-deep: #1c2416;
  --sage:        #4a5433;
  --amber:       #e3851a;
  --amber-deep:  #b8690a;
  --tour-accent: var(--amber);
  --amber-text:  #9e5806; /* darker Amber for small text on light backgrounds (WCAG AA contrast) */
  --amber-accent:#c06e10; /* Amber for large italic heading accents on light backgrounds (3:1 contrast) */
  --stone:       #604848;
  --sand:        #f7cca1;

  /* Derived tints for a light canvas - still within brand family */
  --paper:       #fbf6ec;
  --paper-warm:  #f4ecd9;
  --line:        #e4d9c2;
  --ink:         #2a2620;

  /* Type */
  --font-display: 'EB Garamond', Georgia, serif;
  --font-mono: 'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Shape */
  --radius: 10px;
}

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

html{
  scroll-behavior:smooth;
  font-size: 18px;
}

@media (max-width: 480px){
  html{ font-size: 17px; }
}

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.mono{ font-family: var(--font-mono); }

.wrap{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 6vw;
  position: relative;
  z-index: 1;
}

.eyebrow{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-text);
  margin-bottom: 1.2rem;
  display:flex;
  align-items:center;
  gap: 0.7rem;
}

.eyebrow::before{
  content:"";
  display:block;
  width: 28px;
  height: 2px;
  background: var(--amber);
  flex-shrink:0;
}

a:focus-visible,
button:focus-visible{
  outline: 2px solid var(--forest);
  outline-offset: 3px;
}

/* =========================== Utility bar =========================== */

.utility-bar{
  background: var(--forest-deep);
  color: var(--sand);
}

.utility-bar .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1.5rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.utility-bar .u-left,
.utility-bar .u-right{
  display:flex;
  align-items:center;
  gap: 1.4rem;
}

.utility-bar a:hover,
.utility-bar a:focus-visible{ color: var(--amber); }

.utility-bar .u-left span,
.utility-bar .u-right span{ opacity:0.7; }

@media (max-width: 640px){
  .utility-bar .u-right{ display:none; }
}

/* =========================== Header / Nav =========================== */

.site-header-wrap{
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-header-wrap.is-transparent-hero{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

.site-header{
  background: rgba(251,246,236,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transition: background 0.35s ease, border-color 0.35s ease;
}

.is-transparent-hero .site-header{
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.is-transparent-hero.is-scrolled .site-header{
  background: rgba(251,246,236,0.94);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--line);
}

.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top: 0;
  padding-bottom: 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 0.75rem;
  position:relative;
  padding: 10px 0;
}

.brand img{
  height: 70px;
  width:auto;
  transition: opacity 0.35s ease;
}

.brand .logo-dark{
  opacity:1;
}

.brand .logo-light{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  opacity:0;
}

.is-transparent-hero .brand .logo-dark{ opacity:0; }
.is-transparent-hero .brand .logo-light{ opacity:1; }

.is-transparent-hero.is-scrolled .brand .logo-dark{ opacity:1; }
.is-transparent-hero.is-scrolled .brand .logo-light{ opacity:0; }

.brand-word{
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--forest);
}

.main-nav{
  display:none;
}

@media (min-width: 1120px){
  .main-nav{
    display:flex;
    align-items:center;
    gap: 1.6rem;
  }
  .main-nav a,
  .nav-dropdown-trigger{
    font-size: 1.12rem;
    color: var(--ink);
    position:relative;
    padding: 0.3rem 0;
    transition: color 0.2s ease;
  }
  .main-nav a::after,
  .nav-dropdown-trigger::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-2px;
    height:1px;
    background: var(--amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s var(--ease);
  }
  .main-nav a:hover,
  .main-nav a:focus-visible,
  .nav-dropdown-trigger:hover,
  .nav-dropdown-trigger:focus-visible{ color: var(--forest); }
  .main-nav a:hover::after,
  .main-nav a:focus-visible::after,
  .nav-dropdown-trigger:hover::after,
  .nav-dropdown-trigger:focus-visible::after{ transform: scaleX(1); }

  .is-transparent-hero .main-nav a,
  .is-transparent-hero .nav-dropdown-trigger{ color: var(--paper); }
  .is-transparent-hero.is-scrolled .main-nav a,
  .is-transparent-hero.is-scrolled .nav-dropdown-trigger{ color: var(--ink); }
}

a.nav-cta{
  display:none;
}

@media (min-width: 1120px){
  a.nav-cta{
    display:inline-flex;
    align-items:center;
    font-size: 1rem;
    padding: 0.55rem 1.4rem;
  }
}

.nav-toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background:none;
  border:none;
  cursor:pointer;
}

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

.nav-toggle span{
  display:block;
  height: 1.5px;
  background: var(--forest);
  transition: background 0.3s ease, transform 0.25s ease, opacity 0.25s ease;
}

.is-transparent-hero .nav-toggle span{ background: var(--paper); }
.is-transparent-hero.is-scrolled .nav-toggle span{ background: var(--forest); }

.nav-toggle.is-open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav{
  display:none;
  flex-direction:column;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.mobile-nav.is-open{ display:flex; }

.mobile-nav-scroll{
  display:flex;
  flex-direction:column;
  padding: 0.5rem 6vw 1.6rem;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1120px){
  .mobile-nav{ display:none !important; }
}

.mobile-nav a{
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
  color: var(--ink);
}

.mobile-nav .nav-cta{
  display:flex;
  width: 100%;
  justify-content:center;
  margin-top: 0;
  align-self:stretch;
  color: var(--paper);
}

.mobile-nav-divider{
  height: 1px;
  background: var(--line);
  margin: 1rem 0;
  flex-shrink:0;
}

.mobile-nav-social{
  display:flex;
  gap: 0.9rem;
  margin-top: 1.2rem;
  padding-bottom: 0.2rem;
}

.mobile-nav-social a{
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--forest);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.mobile-nav-social a:hover,
.mobile-nav-social a:focus-visible{
  border-color: var(--amber);
  color: var(--amber);
}

.mobile-nav-social svg{
  width: 17px;
  height: 17px;
}

/* =========================== Dropdown nav =========================== */

.nav-item-dropdown{
  position:relative;
}

.nav-dropdown-trigger{
  display:inline-flex !important;
  align-items:center;
  gap: 0.35rem;
  background:none;
  border:none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor:pointer;
  padding: 0.3rem 0;
}

.nav-caret{
  width: 9px;
  height: 9px;
  transition: transform 0.2s ease;
}

.nav-item-dropdown:hover .nav-caret,
.nav-item-dropdown:focus-within .nav-caret{
  transform: rotate(180deg);
}

/* Outer box: starts flush at top:100% (zero gap) and uses padding-top to
   create visual breathing room. Because the padding is part of this box's
   own hoverable area, moving the pointer straight down from the trigger
   into that space never leaves the hoverable region - fixing the
   "closes before you can click" bug caused by a true gap. */
.nav-dropdown-menu{
  position:absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 14px;
  opacity:0;
  pointer-events:none;
  transition: opacity 0.2s ease;
  z-index: 60;
}

.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu{
  opacity:1;
  pointer-events:auto;
}

.nav-dropdown-panel{
  min-width: 230px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 40px -16px rgba(28,36,22,0.25);
  padding: 0.5rem;
}

.nav-dropdown-panel a{
  display:block;
  padding: 0.65rem 0.9rem;
  border-radius: calc(var(--radius) - 4px);
  color: var(--ink) !important;
  font-size: 0.98rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-panel a:hover,
.nav-dropdown-panel a:focus-visible{
  background: var(--paper-warm);
  color: var(--forest) !important;
}

.nav-dropdown-panel a.is-active{
  color: var(--amber) !important;
  font-weight: 600;
}

/* Active state - top-level links */
.main-nav a.is-active,
.nav-dropdown-trigger.is-active{
  color: var(--forest);
}

.main-nav a.is-active::after{
  transform: scaleX(1) !important;
  background: var(--forest) !important;
}

.is-transparent-hero .main-nav a.is-active,
.is-transparent-hero .nav-dropdown-trigger.is-active{
  color: var(--sand);
}

.is-transparent-hero .main-nav a.is-active::after{
  background: var(--sand) !important;
}

.mobile-nav-group{
  border-bottom: 1px solid var(--line);
}

.mobile-nav-group-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  background:none;
  border:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  font: inherit;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: normal;
  color: var(--ink);
  padding: 0.8rem 0;
}

.mobile-nav-group-toggle.is-active{
  font-weight: 600;
  color: var(--amber);
}

.mobile-nav-caret{
  width: 10px;
  height: 10px;
  flex-shrink:0;
  transition: transform 0.25s ease;
}

.mobile-nav-group-toggle[aria-expanded="true"] .mobile-nav-caret{
  transform: rotate(180deg);
}

.mobile-nav-sublist{
  max-height: 0;
  overflow:hidden;
  transition: max-height 0.3s ease;
}

.mobile-nav-group-toggle[aria-expanded="true"] + .mobile-nav-sublist{
  max-height: 400px;
}

.mobile-nav .mobile-nav-sublink{
  display:block;
  padding: 0.6rem 0 0.6rem 1rem;
  border-bottom: none;
  font-size: 0.95rem;
  color: var(--stone);
}

.mobile-nav .mobile-nav-sublink.is-active{
  color: var(--amber);
  font-weight: 600;
}

/* =========================== Hero =========================== */

.hero{
  position:relative;
  min-height: max(640px, 88vh);
  padding-top: 7rem;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background: var(--forest-deep);
}

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

.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity 1.4s var(--ease);
}

.hero-slide.is-active{ opacity:1; }

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

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(0deg, rgba(28,36,22,0.78) 0%, rgba(28,36,22,0.25) 55%, rgba(28,36,22,0.15) 100%);
  z-index:1;
}

.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding: 0 6vw clamp(3rem, 7vw, 5.5rem);
  color: var(--paper);
}

.hero-captions{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.hero-caption{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  opacity:0;
  transition: opacity 1.4s var(--ease);
  pointer-events:none;
}

.hero-caption.is-active{
  opacity:1;
  pointer-events:auto;
}

.hero-content .eyebrow{ color: var(--sand); }

.hero-title{
  font-weight:700;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.04;
  max-width: 23ch;
  margin-bottom: 1.2rem;
}

.hero-title em{
  font-style:italic;
  color: var(--amber);
}

.hero-sub{
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  max-width: 46ch;
  color: var(--sand);
  line-height:1.6;
  margin-bottom: 1.8rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  padding: 0.85rem 1.9rem;
  border: 1px solid var(--amber);
  background: var(--amber);
  color: var(--forest-deep); /* dark text on Amber - readable (5.8:1 contrast) */
  border-radius: var(--radius);
  cursor:pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-icon{
  width: 15px;
  height: 15px;
  flex-shrink:0;
  transition: transform 0.25s ease;
}

.btn:hover .btn-icon,
.btn:focus-visible .btn-icon{
  transform: translateX(3px);
}

.btn:hover,
.btn:focus-visible{
  background: var(--forest);
  color: var(--paper);
  box-shadow: 0 12px 32px -14px rgba(41,51,31,0.45);
  transform: translateY(-1px);
}

.btn-outline{
  background: transparent;
  color: var(--forest);
  border-color: var(--forest);
}

.btn-outline:hover,
.btn-outline:focus-visible{
  background: var(--forest);
  color: var(--paper);
  box-shadow: 0 12px 32px -14px rgba(41,51,31,0.55);
}

/* Date/time field icons - iOS Safari renders these with no visible icon
   at all by default (unlike desktop browsers), so this restores a real
   one sitewide via a single rule rather than per-page. The native picker
   indicator stays fully present and tappable underneath, just invisible,
   so tapping the icon still opens the real native picker. */
input[type="date"], input[type="time"]{
  padding-right: 2.6rem !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 18px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
input[type="date"]{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234a5433' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") !important;
}
input[type="time"]{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234a5433' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") !important;
}
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator{
  opacity: 0;
}

.hero-dots{
  position:absolute;
  right: calc(6vw - 7.5px);
  bottom: calc(clamp(2rem, 5vw, 3.2rem) - 7.5px);
  z-index:2;
  display:flex;
  gap: 0;
}

/* 24px tap area (accessibility), same small dot drawn in the middle */
.hero-dots .dot{
  width: 24px; height: 24px;
  display:flex; align-items:center; justify-content:center;
  background: none;
  border:none;
  cursor:pointer;
  padding:0;
}
.hero-dots .dot::before{
  content:"";
  width: 9px; height: 9px;
  border-radius:50%;
  background: rgba(247,204,161,0.4);
  transition: background 0.25s ease, transform 0.25s ease;
}

.hero-dots .dot.is-active::before{
  background: var(--sand);
  transform: scale(1.25);
}

/* =========================== Section shell =========================== */

.section{
  padding: clamp(4rem, 9vw, 7rem) 0;
  position:relative;
  overflow:hidden;
}

.section-head{
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.section-title{
  font-weight:600;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height:1.12;
  color: var(--forest-deep);
}

.section-title em{
  font-style:italic;
  color: var(--amber-accent);
}

.section-body{
  font-size: 1.05rem;
  line-height:1.75;
  color: var(--stone);
  margin-top: 1rem;
}

.divider-leaf{
  display:flex;
  justify-content:center;
  margin: 0 auto clamp(2.5rem, 6vw, 4rem);
  width: 46px;
  opacity: 0.55;
}

/* =========================== Stats bar =========================== */

.stats-bar{
  background: var(--paper-warm);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stats-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  text-align:center;
}

.stat-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: clamp(2rem, 4vw, 2.8rem) 1rem;
  border-left: 1px solid var(--line);
}

.stat-item:first-child{ border-left:none; }

.stat-number{
  font-weight:700;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--forest-deep);
  line-height:1;
  margin-bottom: 0.5rem;
}

.stat-number--text{
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
}

.stat-label{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}

@media (max-width: 600px){
  .stat-number{ font-size: clamp(1.3rem, 6vw, 1.8rem); }
  .stat-label{ font-size: 0.6rem; letter-spacing: 0.04em; }
  .stat-item{ padding: 1.5rem 0.5rem; }
}

@media (max-width: 480px){
  .stats-grid:has(.stat-item--hide-mobile){ grid-template-columns: repeat(2, 1fr); }
  .stat-item--hide-mobile{ display:none; }
  .stat-item--hide-mobile + .stat-item{ border-left:none; }
}

/* =========================== Intro / poem block =========================== */

.intro{
  background: var(--paper-warm);
  text-align:center;
}

.intro-verse{
  max-width: 46ch;
  margin: 0 auto;
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.85;
  color: var(--forest-deep);
}

/* =========================== Feature split =========================== */

.feature-split{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items:center;
}

@media (min-width: 900px){
  .feature-split{
    grid-template-columns: 1fr 1fr;
  }
  .feature-split--reverse .feature-media{
    order: 2;
  }
}

.feature-media{
  position:relative;
  aspect-ratio: 4/3;
  overflow:hidden;
  border-radius: var(--radius);
}

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

.feature-media::before{
  content:"";
  position:absolute;
  inset: -12px auto auto -12px;
  width: 70%;
  height: 70%;
  border: 1px solid var(--amber);
  z-index:-1;
}

/* =========================== Cards grid =========================== */

.cards-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
}

.cards-grid--three{
  grid-template-columns: repeat(3, 1fr);
}

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

@media (max-width: 600px){
  .cards-grid--three{
    grid-template-columns: 1fr;
  }
}

.card{
  position:relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3vw, 2.4rem);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.card:hover,
.card:focus-within{
  transform: translateY(-6px);
  border-color: rgba(212,140,74,0.5);
  box-shadow: 0 24px 48px -28px rgba(212,140,74,0.45), 0 4px 18px -8px rgba(41,51,31,0.12);
}

.card-icon{
  width: 40px;
  height: 40px;
  margin-bottom: 1.2rem;
  color: var(--forest);
}

.card h3,
.sitemap-card > h2,
.sitemap-cta-card > h2{
  font-weight:600;
  font-size: 1.3rem;
  color: var(--forest-deep);
  margin-bottom: 0.6rem;
}

.card p{
  font-size: 0.98rem;
  line-height:1.65;
  color: var(--stone);
}

/* =========================== Image CTA break =========================== */

.image-cta{
  position:relative;
  min-height: 82vh;
  padding: clamp(3rem, 6vw, 5rem) 0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  color: var(--paper);
}

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

.image-cta::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(28,36,22,0.4) 0%, rgba(28,36,22,0.62) 100%);
}

.image-cta .wrap{
  position:relative;
  z-index:1;
}

.image-cta .eyebrow{
  color: var(--sand);
  justify-content:center;
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
}

.image-cta h2{
  font-weight:600;
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  line-height:1.14;
  max-width: 22ch;
  margin: 0 auto 1.2rem;
}

.image-cta p{
  color: var(--sand-dim, #e8c398);
  max-width: 46ch;
  margin: 0 auto 1.8rem;
  line-height:1.7;
}

/* =========================== CTA banner =========================== */

.cta-banner{
  background: var(--forest);
  color: var(--paper);
  text-align:center;
  position:relative;
  overflow:hidden;
}

.cta-banner .eyebrow{
  color: var(--sand);
  justify-content:center;
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
}

.cta-banner h2{
  font-weight:600;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height:1.14;
  max-width: 24ch;
  margin: 0 auto 1.2rem;
}

.cta-banner p{
  color: var(--sand-dim, #e8c398);
  max-width: 50ch;
  margin: 0 auto 2rem;
  line-height:1.7;
}

/* =========================== Gallery carousel =========================== */

.carousel-section{
  padding: clamp(4rem, 9vw, 7rem) 0;
  position:relative;
  background: var(--paper-warm);
  border-top: 1px solid var(--line);
}

.carousel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
}

.carousel-header .section-title{
  margin:0;
}

.carousel-header--centered{
  position:relative;
  display:block;
  text-align:center;
}

.carousel-header--centered .eyebrow{
  justify-content:center;
}

.carousel-header--centered .carousel-arrows{
  position:absolute;
  top: 0.3rem;
  right: 0;
}

@media (max-width: 560px){
  .carousel-header--centered .carousel-arrows{
    position:static;
    justify-content:center;
    margin-top: 1.2rem;
  }
}

.carousel-arrows{
  display:flex;
  gap: 0.6rem;
  flex-shrink:0;
}

.carousel-arrow{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--forest);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.carousel-arrow svg{
  width: 16px;
  height: 16px;
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible{
  background: var(--forest);
  border-color: var(--forest);
  color: var(--paper);
}

.carousel-track{
  display:flex;
  gap: 1rem;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar{ display:none; }

.carousel-slide{
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 72vw;
}

@media (min-width: 620px){
  .carousel-slide{ width: calc((100% - 2 * 1rem) / 2.4); }
}

@media (min-width: 900px){
  .carousel-slide{ width: calc((100% - 3 * 1rem) / 3.4); }
}

@media (min-width: 1220px){
  .carousel-slide{ width: calc((100% - 4 * 1rem) / 4.4); }
}

.carousel-slide-btn{
  display:block;
  width:100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
  background:none;
  padding:0;
  cursor: zoom-in;
}

.carousel-slide-btn img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform 0.4s ease;
}

.carousel-slide-btn:hover img,
.carousel-slide-btn:focus-visible img{
  transform: scale(1.05);
}

/* =========================== 360 Tour cards + modal =========================== */

.tour-rooms-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.2rem);
}

@media (min-width: 900px){
  .tour-rooms-grid{
    grid-template-columns: repeat(4, 1fr);
  }
  .tour-rooms-grid--five{
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 700px) and (max-width: 899.98px){
  .tour-rooms-grid--five{
    grid-template-columns: repeat(3, 1fr);
  }
}

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

.tour-room-desc{
  margin-top: 0.9rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--stone);
}

/* Spacious tour carousel - reuses the proven carousel-track/carousel-arrow
   scroll mechanic (same JS, zero changes needed) but with much wider,
   deliberately fewer-per-view slides for a premium, unhurried feel rather
   than cramming every room into one tight row. */

.carousel-track--tour{
  gap: clamp(1.5rem, 3vw, 2rem);
}

.tour-carousel-slide{
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 100%;
}

@media (min-width: 700px){
  .tour-carousel-slide{ width: 300px; }
}

@media (min-width: 1000px){
  .tour-carousel-slide{ width: 280px; }
  .carousel-track--center-few{
    justify-content: center;
  }
}

.tour-carousel-slide .tour-card{
  max-width:none;
  width:100%;
  aspect-ratio: 5/4;
  box-shadow: 0 1px 2px rgba(28,36,22,0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.tour-carousel-slide .tour-card:hover,
.tour-carousel-slide .tour-card:focus-visible{
  box-shadow: 0 24px 44px -20px rgba(28,36,22,0.28);
  transform: translateY(-4px);
}

.tour-carousel-slide .tour-room-desc{
  margin-top: 1.1rem;
  font-size: 0.98rem;
}

.tour-cards-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.tour-cards-grid--four{
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
}

@media (max-width: 640px){
  .tour-cards-grid--four{
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }
}

.tour-card{
  position:relative;
  aspect-ratio: 4/3;
  max-width: 280px;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
  background:none;
  padding:0;
  cursor:pointer;
  display:block;
}

.tour-cards-grid .tour-card,
.tour-room .tour-card{
  max-width: none;
}

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

.tour-card:hover img,
.tour-card:focus-visible img{
  transform: scale(1.06);
}

.tour-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(28,36,22,0) 45%, rgba(28,36,22,0.75) 100%);
}

.tour-card-badge{
  position:absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap: 0.3rem;
  background: rgba(28,36,22,0.55);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
}

.tour-card-badge svg{ width:12px; height:12px; }

.tour-card-label{
  position:absolute;
  left: 0.85rem;
  bottom: 0.7rem;
  z-index:1;
  color: var(--paper);
  font-weight: 600;
  font-size: 0.98rem;
  text-align:left;
}

.tour-modal{
  position:fixed;
  inset:0;
  background: var(--forest-deep);
  display:none;
  z-index:1100;
}

.tour-modal.is-open{ display:block; }

.tour-modal-viewer{
  position:absolute;
  inset:0;
}

.tour-modal-label{
  position:absolute;
  top: 20px;
  left: 24px;
  z-index:2;
  color: var(--paper);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  pointer-events:none;
}

.tour-modal-close{
  position:absolute;
  top: 16px;
  right: 20px;
  z-index:3;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: rgba(247,246,236,0.12);
  border: 1px solid rgba(247,204,161,0.3);
  color: var(--paper);
  font-size: 22px;
  line-height:1;
  cursor:pointer;
  transition: background 0.2s ease;
}

.tour-modal-close:hover,
.tour-modal-close:focus-visible{
  background: var(--amber);
  color: var(--forest-deep);
}

.side-slider{
  position:relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
}

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

.side-slider-slide.is-active{ opacity:1; }

.side-slider-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.side-slider-dots{
  position:absolute;
  bottom: calc(1rem - 9px);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap: 0;
  z-index:1;
}

/* 24px tap area (accessibility), same small dot drawn in the middle */
.side-slider-dots .dot{
  width: 24px;
  height: 24px;
  display:flex; align-items:center; justify-content:center;
  background: none;
  border:none;
  padding:0;
  cursor:pointer;
}
.side-slider-dots .dot::before{
  content:"";
  width: 6px;
  height: 6px;
  border-radius:50%;
  background: rgba(247,246,236,0.45);
}

.side-slider-dots .dot.is-active::before{
  background: var(--paper);
}

/* =========================== Lightbox =========================== */

.lightbox{
  position:fixed;
  inset:0;
  background: rgba(28,36,22,0.94);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding: 24px;
}

.lightbox.is-open{ display:flex; }

.lightbox-figure{
  max-width: 1100px;
  max-height: 86vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lightbox-figure img{
  max-width:100%;
  max-height:86vh;
  border-radius: var(--radius);
  object-fit:contain;
}

.lightbox-close{
  position:absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: rgba(247,246,236,0.1);
  border: 1px solid rgba(247,204,161,0.3);
  color: var(--paper);
  font-size: 22px;
  line-height:1;
  cursor:pointer;
  transition: background 0.2s ease;
}

.lightbox-close:hover,
.lightbox-close:focus-visible{
  background: var(--amber);
  color: var(--forest-deep);
}

.lightbox-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius:50%;
  background: rgba(247,246,236,0.1);
  border: 1px solid rgba(247,204,161,0.3);
  color: var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background 0.2s ease;
}

.lightbox-nav svg{ width:18px; height:18px; }

.lightbox-nav:hover,
.lightbox-nav:focus-visible{
  background: var(--amber);
  color: var(--forest-deep);
}

.lightbox-nav.prev{ left:16px; }
.lightbox-nav.next{ right:16px; }

@media (max-width: 700px){
  .lightbox-nav.prev{ left:8px; }
  .lightbox-nav.next{ right:8px; }
}

/* =========================== FAQ accordion =========================== */

.faq-accordion{
  max-width: 780px;
}

.enquiry-main .faq-accordion{
  max-width: none;
}

.faq-item{
  border-bottom: 1px solid var(--line);
}

.faq-item summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 1rem;
  padding: 1.5rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--forest-deep);
}

.faq-item summary::-webkit-details-marker{ display:none; }

.faq-item-icon{
  flex-shrink:0;
  width: 24px;
  height: 24px;
  border-radius:50%;
  border: 1.5px solid var(--amber);
  color: var(--amber);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.faq-item-icon svg{
  width: 12px;
  height: 12px;
  display:block;
  transition: transform 0.25s ease;
}

.faq-item[open] .faq-item-icon{
  background: var(--amber);
  color: var(--paper);
}

.faq-item[open] .faq-item-icon svg{
  transform: rotate(45deg);
}

.faq-item-body{
  padding: 0 0 1.6rem;
  color: var(--stone);
  line-height: 1.75;
}

.faq-item-body p{ margin-bottom: 0.9rem; }
.faq-item-body p:last-child{ margin-bottom:0; }

.faq-item-body ul{
  margin: 0.5rem 0 0.9rem 1.2rem;
}

.faq-item-body li{
  margin-bottom: 0.4rem;
}

/* =========================== Masonry gallery =========================== */

.gallery-masonry{
  columns: 1;
  column-gap: 1rem;
}

@media (min-width: 560px){
  .gallery-masonry{ columns: 2; }
}

@media (min-width: 900px){
  .gallery-masonry{ columns: 3; }
}

@media (min-width: 1200px){
  .gallery-masonry{ columns: 4; }
}

.gallery-masonry-item{
  display:block;
  width:100%;
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
  background:none;
  padding:0;
  cursor: zoom-in;
}

.gallery-masonry-item img{
  display:block;
  width:100%;
  height:auto;
  transition: transform 0.4s ease;
}

.gallery-masonry-item:hover img,
.gallery-masonry-item:focus-visible img{
  transform: scale(1.04);
}

.gallery-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 0.5rem;
  flex-wrap:wrap;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.gallery-page-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 42px;
  height: 42px;
  padding: 0 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.98rem;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gallery-page-link:hover,
.gallery-page-link:focus-visible{
  border-color: var(--amber);
  color: var(--forest);
}

.gallery-page-link.is-current{
  background: var(--forest);
  border-color: var(--forest);
  color: var(--paper);
}

.gallery-page-ellipsis{
  color: var(--sage);
  padding: 0 0.3rem;
}

.gallery-count-note{
  text-align:center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--sage);
  margin-bottom: clamp(2rem, 4vw, 2.6rem);
}

/* =========================== Enquiry page layout + sidebar =========================== */

.enquiry-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items:start;
}

@media (min-width: 960px){
  .enquiry-layout{
    grid-template-columns: 1.7fr 1fr;
  }
}

.enquiry-main{ min-width:0; }

.enquiry-sidebar{
  position:relative;
  text-align:left;
}

.sidebar-card{
  position:relative;
  overflow:hidden;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3vw, 2.4rem);
  box-shadow: 0 24px 48px -28px rgba(28,36,22,0.22);
}

.sidebar-card .leaf-motif{
  opacity: 0.16;
}

.sidebar-card > *{
  position:relative;
  z-index:1;
}

.sidebar-card h3,
.sidebar-card h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--forest-deep);
  margin-bottom: 0.8rem;
}

.sidebar-card p{
  color: var(--stone);
  line-height:1.7;
  margin-bottom: 1.6rem;
}

.sidebar-contact-row{
  display:flex;
  align-items:flex-start;
  gap: 0.9rem;
  margin-bottom: 1.3rem;
}

.sidebar-contact-icon{
  flex-shrink:0;
  width: 38px;
  height: 38px;
  border-radius:50%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--amber);
  display:flex;
  align-items:center;
  justify-content:center;
}

.sidebar-contact-icon svg{ width:17px; height:17px; }

.sidebar-contact-row strong{
  display:block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.25rem;
  font-weight:normal;
}

.sidebar-contact-row span,
.sidebar-contact-row a{
  color: var(--ink);
  line-height:1.5;
}

.sidebar-contact-row a{ text-decoration:none; }
.sidebar-contact-row a:hover{ color: var(--forest); text-decoration:underline; }

.sidebar-divider{
  height:1px;
  background: var(--line);
  margin: 1.8rem 0;
}

/* Replaces the old .sidebar-divider approach in the 'legal' sidebar -
   an empty div relying purely on margin for spacing was collapsing
   unpredictably against its neighbours. padding-top never collapses,
   so this guarantees the gap without ever drawing a second line. */
.sidebar-legal-question{
  padding-top: 1.8rem;
}

.sidebar-steps{
  list-style:none;
  margin: 1rem 0 1.8rem;
  padding:0;
  counter-reset: sidebar-step;
}

.sidebar-steps li{
  display:flex;
  align-items:flex-start;
  gap: 0.9rem;
  margin-bottom: 1rem;
  color: var(--ink);
  line-height:1.5;
}

.sidebar-steps li:last-child{ margin-bottom:0; }

.sidebar-step-num{
  flex-shrink:0;
  width: 26px;
  height: 26px;
  border-radius:50%;
  background: var(--forest);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight:600;
  font-size: 0.85rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sidebar-btn-stack{
  display:flex;
  flex-direction:column;
  gap: 0.9rem;
  margin-top: 0.4rem;
}

.sidebar-btn-stack .btn{
  width:100%;
  justify-content:center;
}

.sidebar-link-list{
  display:flex;
  flex-direction:column;
}

.sidebar-link-list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.02rem;
  transition: color 0.2s ease;
}

.sidebar-link-list a:hover,
.sidebar-link-list a:focus-visible{ color: var(--amber); }

.sidebar-link-list .btn-icon{
  flex-shrink:0;
  color: var(--amber);
}

.sidebar-social{
  display:flex;
  gap: 0.6rem;
  margin-top: 1.8rem;
}

.sidebar-social a{
  width: 38px;
  height: 38px;
  border-radius:50%;
  border: 1px solid var(--line);
  color: var(--forest);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.sidebar-social a:hover{
  background: var(--forest);
  color: var(--paper);
}

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

/* =========================== Enquiry form =========================== */

.enq-form-wrap{
  max-width: 640px;
  margin: 0 auto;
}

.enq-stepper{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
}

.enq-step-node{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 0.5rem;
}

.enq-step-circle{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--sage);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.25s ease;
}

.enq-step-node.is-active .enq-step-circle{
  border-color: var(--amber);
  background: var(--amber);
  color: var(--paper);
}

.enq-step-node.is-done .enq-step-circle{
  border-color: var(--forest);
  background: var(--forest);
  color: var(--paper);
}

.enq-step-label{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
  white-space: nowrap;
}

.enq-step-node.is-active .enq-step-label{
  color: var(--forest-deep);
  font-weight: 600;
}

.enq-step-connector{
  width: clamp(28px, 8vw, 70px);
  height: 1.5px;
  background: var(--line);
  margin-bottom: 1.5rem;
}

.enq-step-connector.is-done{ background: var(--forest); }

.enq-step{ display:none; }
.enq-step.is-active{ display:block; }

.enq-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.6rem);
}

.enq-fieldset-title{
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--forest-deep);
  margin-bottom: 1.6rem;
}

.enq-field-row{
  margin-bottom: 1.3rem;
}

.enq-field-row.enq-two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.enq-field-row.enq-three-col{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.enq-form label{
  display:block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.5rem;
}

.enq-form input[type="text"],
.enq-form input[type="tel"],
.enq-form input[type="email"],
.enq-form select,
.enq-form textarea{
  width:100%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body, 'EB Garamond', Georgia, serif);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: calc(var(--radius) - 4px);
}

.enq-form input:focus,
.enq-form select:focus,
.enq-form textarea:focus{
  outline: none;
  border-color: var(--amber);
}

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

.enq-type-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}

.enq-type-card{
  display:block;
  border: 1.5px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
  padding: 0.9rem 0.5rem;
  text-align:center;
  cursor:pointer;
  font-size: 0.9rem;
  color: var(--sage);
  transition: all 0.2s ease;
  user-select:none;
}

.enq-type-card:hover{ border-color: var(--amber); }

.enq-type-card.is-selected{
  border-color: var(--amber);
  background: var(--sand);
  color: var(--forest-deep);
  font-weight: 600;
}

.enq-type-card input{ display:none; }

.enq-conditional{
  display:none;
  margin-top: 1.2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--amber);
}

.enq-conditional.is-visible{ display:block; }

.enq-note{
  font-style: italic;
  color: var(--sage);
  font-size: 0.95rem;
}

.enq-partner-block{
  display:none;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--line);
}

.enq-partner-block.is-visible{ display:block; }

.enq-nav-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top: 1.8rem;
}

.enq-demo-note{
  text-align:center;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--sage);
  margin-top: 1.4rem;
}

/* ---------- Pill toggle (replaces checkboxes everywhere) ---------- */

.enq-form .enq-pill-toggle{
  display:flex;
  align-items:center;
  gap: 0.8rem;
  cursor:pointer;
  user-select:none;
  margin-top: 0.6rem;
  text-transform:none;
  letter-spacing:normal;
  font-size:1rem;
  color: var(--ink);
}

.enq-pill-toggle input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}

.enq-pill-track{
  position:relative;
  width: 44px;
  height: 25px;
  flex-shrink:0;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.25s ease;
}

.enq-pill-thumb{
  position:absolute;
  top: 2.5px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius:50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(28,36,22,0.25);
  transition: transform 0.25s ease;
}

.enq-pill-toggle input:checked + .enq-pill-track{
  background: var(--forest);
}

.enq-pill-toggle input:checked + .enq-pill-track .enq-pill-thumb{
  transform: translateX(19px);
}

.enq-pill-toggle input:focus-visible + .enq-pill-track{
  box-shadow: 0 0 0 3px rgba(212,140,74,0.4);
}

.enq-pill-label{
  font-family: var(--font-body, 'EB Garamond', Georgia, serif);
  font-size: 0.96rem;
  color: var(--ink);
  text-transform:none;
  letter-spacing:0;
  line-height:1.5;
}

.enq-pill-label a{
  color: var(--amber);
  text-decoration: underline;
}

.enq-form .enq-pill-toggle--privacy{
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--line);
  align-items:flex-start;
}

.enq-pill-toggle--privacy .enq-pill-track{
  margin-top: 0.15rem;
}

@media (max-width: 560px){
  .enq-field-row.enq-two-col,
  .enq-field-row.enq-three-col{
    grid-template-columns: 1fr;
  }
  .enq-type-grid{
    grid-template-columns: 1fr;
  }
  .enq-step-label{ display:none; }
}

/* =========================== Footer =========================== */

.site-footer{
  background: var(--forest-deep);
  color: var(--sand);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 2.6rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(247,204,161,0.15);
}

@media (min-width: 720px){
  .footer-grid{
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2rem;
  }
}

.footer-brand img{
  height: 60px;
  width: auto;
  margin-bottom: 1.4rem;
  padding: 4px 0;
}

.footer-brand p{
  color: #cdbfa0;
  font-size: 0.92rem;
  line-height:1.7;
  max-width: 34ch;
}

.footer-social{
  display:flex;
  gap: 0.9rem;
  margin-top: 1.4rem;
}

.footer-social a{
  width: 34px; height: 34px;
  border: 1px solid rgba(247,204,161,0.3);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 0.85rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}

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

.footer-social a:hover,
.footer-social a:focus-visible{
  border-color: var(--amber);
  color: var(--amber);
}

.footer-col h4,
.footer-col h2{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.2rem;
}

.footer-col a,
.footer-col li{
  display:block;
  color: #cdbfa0;
  font-size: 0.95rem;
  padding: 0.35rem 0;
  transition: color 0.2s ease;
}

.footer-col a:hover,
.footer-col a:focus-visible{ color: var(--sand); }

.footer-contact-row{
  display:flex;
  align-items:center;
  gap: 0.7rem;
  padding: 0.2rem 0;
}

.footer-contact-row--top{
  align-items:flex-start;
}

.footer-contact-icon{
  flex-shrink:0;
  width: 17px;
  height: 17px;
  color: var(--amber);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.footer-contact-row--top .footer-contact-icon{
  margin-top: 0.2rem;
}

.footer-contact-icon svg{
  width: 17px;
  height: 17px;
  display:block;
}

.footer-contact-row a,
.footer-contact-row span:not(.footer-contact-icon){
  color: #cdbfa0;
  font-size: 0.95rem;
  line-height: 1.55;
  transition: color 0.2s ease;
}

.footer-contact-row a:hover,
.footer-contact-row a:focus-visible{ color: var(--sand); }

.footer-bottom{
  display:flex;
  flex-direction:column;
  gap: 0.8rem;
  align-items:center;
  text-align:center;
  padding-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: #a8987a;
}

@media (min-width: 720px){
  .footer-bottom{
    flex-direction:row;
    justify-content:space-between;
    text-align:left;
  }
}

.footer-bottom a{ color: #a8987a; }
.footer-bottom a:hover,
.footer-bottom a:focus-visible{ color: var(--sand); }

/* =========================== Leaf motif (depth) =========================== */

.leaf-motif-svg{
  width:100%;
  height:auto;
  display:block;
}

.leaf-motif{
  position:absolute;
  pointer-events:none;
  z-index:0;
  color: var(--sage);
  opacity: 0.5;
  filter: drop-shadow(0 14px 24px rgba(28,36,22,0.12));
}

.leaf-motif--light{
  color: var(--sand);
  opacity: 0.35;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.25));
}

.leaf-motif--intro-left{
  top: 6%;
  left: -40px;
  width: 190px;
  transform: rotate(-10deg);
}

.leaf-motif--feature{
  top: -20px;
  right: -30px;
  width: 210px;
  transform: rotate(18deg) scaleX(-1);
}

.leaf-motif--cards{
  bottom: 4%;
  left: -30px;
  width: 190px;
  transform: rotate(-6deg);
}

.leaf-motif--cta{
  top: 8%;
  right: 4%;
  width: 180px;
  transform: rotate(8deg);
}

@media (max-width: 700px){
  .leaf-motif{ opacity: 0.32; width: 130px !important; }
  .leaf-motif--light{ opacity: 0.24; }
}

/* =========================== Scroll reveal =========================== */

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

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

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-slide{ transition:none; }
  .card, .btn{ transition:none; }
}

/* =========================== Sitemap page =========================== */

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

@media (min-width: 720px){
  .sitemap-grid{
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

.sitemap-col h4{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1rem;
}

.sitemap-col a{
  display:block;
  color: var(--stone);
  font-size: 1.02rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s ease;
}

.sitemap-col a:hover,
.sitemap-col a:focus-visible{ color: var(--amber); }

/* =========================== 404 page =========================== */

.error-404{
  max-width: 720px;
  margin: 0 auto;
  text-align:center;
}

.error-404-code{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(4rem, 14vw, 7rem);
  line-height:1;
  color: var(--amber);
  opacity: 0.9;
  margin-bottom: 0.5rem;
}

.error-404-links{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  margin-left: auto;
  margin-right: auto;
  max-width: 1240px;
  text-align:left;
}

@media (min-width: 720px){
  .error-404-links{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================== Contact map =========================== */

.contact-map{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px -28px rgba(28,36,22,0.22);
  line-height:0;
}

.contact-map iframe{
  display:block;
}

/* =========================== Legal page content =========================== */

.legal-content{
  max-width: 78ch;
}

.legal-content .legal-updated{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 2rem;
}

.legal-content .section-body{
  color: var(--stone);
}

.legal-content h3,
.legal-content h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--forest-deep);
  margin-top: 2.6rem;
  margin-bottom: 0.8rem;
}

/* Removed the h3:first-of-type{margin-top:0} special case - it left the
   very first heading looking cramped against the intro paragraph above it
   whenever there wasn't a legal-note box in between to provide the gap.
   Every h3 now gets the same consistent spacing. */

.legal-content ul{
  margin: 0.8rem 0 1.2rem 1.3rem;
  color: var(--stone);
  font-size: 1.05rem;
  line-height: 1.75;
}

.legal-content li{
  margin-bottom: 0.6rem;
  line-height: 1.7;
}

.legal-content .legal-note{
  font-style: italic;
  padding: 1rem 1.4rem;
  background: var(--paper-warm);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.4rem 0;
}

.legal-content .legal-address{
  margin-top: 1.4rem;
}

.legal-address-row{
  display:flex;
  align-items:flex-start;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
  color: var(--stone);
  font-size: 1.05rem;
  line-height: 1.7;
}

.legal-address-row:last-child{ margin-bottom:0; }

.legal-address-row a{ color: var(--stone); transition: color 0.2s ease; }
.legal-address-row a:hover,
.legal-address-row a:focus-visible{ color: var(--amber); }

.legal-address-icon{
  flex-shrink:0;
  width: 38px;
  height: 38px;
  border-radius:50%;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  color: var(--amber);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: -0.1rem;
}

.legal-address-icon svg{ width:17px; height:17px; }

/* ---------- Enquiry form (Britebiz) - late-availability page ---------- */
.enquiry-split{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items:stretch;
}
@media (max-width: 900px){
  .enquiry-split{ grid-template-columns: 1fr; }
}

.enquiry-visual{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  min-height: 380px;
}
.enquiry-visual img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.enquiry-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(0deg, rgba(28,36,22,0.9) 0%, rgba(28,36,22,0.2) 60%);
}
.enquiry-visual-content{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--paper);
}
.enquiry-visual-content .eyebrow{ color: var(--sand); }
.enquiry-visual-content h3{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  margin: 0.6rem 0;
}
.enquiry-visual-content p{
  color: rgba(251,246,236,0.85);
  margin: 0 0 1.4rem;
  line-height:1.6;
}

.enquiry-form-panel{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3vw, 2.6rem);
}

.brite-form .brite-field-row{ margin-bottom: 1.1rem; }
.brite-form .brite-clear{ display:none; }
.brite-form .hide{ display:none; }

.brite-form label{
  display:block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.4rem;
}

.brite-form input[type="text"],
.brite-form select,
.brite-form textarea{
  width:100%;
  font-family: var(--font-display);
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.25s ease;
}
.brite-form input[type="text"]:focus,
.brite-form select:focus,
.brite-form textarea:focus{
  outline:none;
  border-color: var(--amber);
}
.brite-form textarea{ resize:vertical; min-height:110px; }

/* Consent "checkbox" restyled as a toggle switch, same look across every
   form on the site (late availability, contact, brochure, venue tour).
   Still a real <input type="checkbox" id="consent">, same id, same
   required attribute - only the visual layer (the track/thumb spans) is
   new, so the existing JS that reads/toggles #consent needs no changes. */
.consent-row{
  margin: 0.4rem 0 1.4rem;
}
.brite-form .pill-toggle{
  display:flex !important;
  align-items:flex-start;
  gap: 0.8rem;
  cursor:pointer;
  user-select:none;
  text-transform:none;
  font-family: var(--font-display);
  font-size:1rem;
  letter-spacing:normal;
  color: var(--ink);
}
.pill-toggle input[type="checkbox"]{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}
.pill-track{
  flex-shrink:0;
  width: 44px;
  height: 24px;
  background: var(--line);
  border-radius: 999px;
  position:relative;
  margin-top: 0.15rem;
  transition: background 0.25s ease;
}
.pill-thumb{
  position:absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius:50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: left 0.25s ease;
}
.pill-toggle input:checked ~ .pill-track{
  background: var(--amber);
}
.pill-toggle input:checked ~ .pill-track .pill-thumb{
  left: 22px;
}
.pill-toggle input:focus-visible ~ .pill-track{
  box-shadow: 0 0 0 3px rgba(227,133,26,0.35);
}
.pill-label{
  font-size: 0.92rem;
  line-height:1.5;
  color: var(--ink);
}
.pill-label span{ font-style:italic; }

.brite-form input[type="submit"]{
  font-family: var(--font-display);
  font-size: 1.02rem;
  padding: 0.85rem 1.9rem;
  border: 1px solid var(--amber);
  background: var(--amber);
  color: var(--forest-deep); /* dark text on Amber - readable (5.8:1 contrast) */
  border-radius: var(--radius);
  cursor:pointer;
  transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.brite-form input[type="submit"]:disabled{
  opacity:0.5;
  cursor:not-allowed;
}
.brite-form input[type="submit"]:not(:disabled):hover{
  background: var(--forest);
  border-color: var(--forest);
  color: var(--paper);
}

.data-protection-note{ font-size:0.85rem; color: var(--stone); margin-top:1.2rem; line-height:1.5; }
.data-protection-note a{ color:var(--ink); font-weight:600; }

/* ---------- Package cards (late-availability) - check list + price list ---------- */
.check-list{
  list-style:none;
  margin: 0.4rem 0 0;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap: 0.7rem;
  text-align:left;
}
.check-list li{
  display:flex;
  align-items:flex-start;
  gap: 0.6rem;
  line-height:1.5;
  color: var(--ink);
}
.check-list svg{
  width: 18px;
  height: 18px;
  flex-shrink:0;
  margin-top: 0.2rem;
  color: var(--amber);
}

/* ---------- Nested sub-bullets under a check-list item ---------- */
.check-list .check-sublist{
  list-style:none;
  margin: 0.6rem 0 0 1.9rem;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap: 0.45rem;
}
.check-list .check-sublist li{
  display:flex;
  align-items:flex-start;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: var(--stone);
  line-height:1.5;
}
.check-list .check-sublist li::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background: var(--sage);
  margin-top: 0.6rem;
  flex-shrink:0;
}

/* ---------- Price list: single row, label left, small "From" pill + non-bold price right ---------- */
.price-list{
  list-style:none;
  margin: 0.4rem 0 0;
  padding: 0;
  text-align:left;
}
.price-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.price-list li:first-child{ padding-top: 0.2rem; }
.price-list li:last-child{ border-bottom:none; }
.price-list li > span:first-child{
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--forest-deep);
}
.price-block{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 0.3rem;
}
.price-from-pill{
  display:inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber-deep);
  background: rgba(227,133,26,0.12);
  border: 1px solid rgba(227,133,26,0.32);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.price-value{
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
}

/* ---------- Divider under a card title (late-availability package cards) ---------- */
.card-divider{
  border:none;
  border-top: 1px solid var(--line);
  margin: 0.9rem 0 1.3rem;
  width: 100%;
}

/* ---------- Pricing page - no tabs, everything visible on scroll ---------- */
.pricing-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(2rem, 4vw, 3.4rem);
  box-shadow: 0 30px 60px -35px rgba(41,51,31,0.18);
}

.pricing-card h2{ margin: 0.4rem 0 1.1rem; }
.pricing-card hr.card-divider{ margin: 0 0 1.6rem; }

.pricing-lead{
  font-size: 1.05rem;
  color: var(--stone);
  line-height:1.7;
  margin-bottom: 1.8rem;
  max-width: 65ch;
}

.pricing-note{
  font-size: 0.92rem;
  color: var(--stone);
  font-style: italic;
  margin-top: 1.6rem;
  line-height:1.6;
}

.pricing-actions{
  margin-top: 2.2rem;
  display:flex;
  gap: 1rem;
  flex-wrap:wrap;
}

/* Venue Hire: two-column layout - big price callout on the left, checklist on the right */
.venue-hire-layout{
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items:start;
}
@media (max-width: 820px){
  .venue-hire-layout{ grid-template-columns: 1fr; }
}

.price-hero-value{
  display:block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 700;
  color: var(--forest-deep);
  line-height:1;
  margin: 0.7rem 0 1rem;
}

/* Food & Drink: compact price cards in a row */
.price-card{
  text-align:center;
}
.price-card h3{ margin-bottom: 1rem; }
.price-card .price-from-pill{ margin-bottom: 0.5rem; }
.price-card .price-hero-value{
  font-size: 1.9rem;
  margin: 0.4rem 0 0;
}

/* ---------- 360 tour cards + modal, side-slider - ported from Barns ---------- */
.tour-cards-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.tour-cards-grid--four{
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
}

@media (max-width: 640px){
  .tour-cards-grid--four{
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }
}

.tour-card{
  position:relative;
  aspect-ratio: 4/3;
  max-width: 280px;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
  background:none;
  padding:0;
  cursor:pointer;
  display:block;
}

.tour-cards-grid .tour-card,
.tour-room .tour-card{
  max-width: none;
}

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

.tour-card:hover img,
.tour-card:focus-visible img{
  transform: scale(1.06);
}

.tour-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(28,36,22,0) 45%, rgba(28,36,22,0.75) 100%);
}

.tour-card-badge{
  position:absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap: 0.3rem;
  background: rgba(28,36,22,0.55);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
}

.tour-card-badge svg{ width:12px; height:12px; }

.tour-card-label{
  position:absolute;
  left: 0.85rem;
  bottom: 0.7rem;
  z-index:1;
  color: var(--paper);
  font-weight: 600;
  font-size: 0.98rem;
  text-align:left;
}

.tour-modal{
  position:fixed;
  inset:0;
  background: var(--forest-deep);
  display:none;
  z-index:1100;
}

.tour-modal.is-open{ display:block; }

.tour-modal-viewer{
  position:absolute;
  inset:0;
}

.tour-modal-label{
  position:absolute;
  top: 20px;
  left: 24px;
  z-index:2;
  color: var(--paper);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  pointer-events:none;
}

.tour-modal-close{
  position:absolute;
  top: 16px;
  right: 20px;
  z-index:3;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: rgba(247,246,236,0.12);
  border: 1px solid rgba(247,204,161,0.3);
  color: var(--paper);
  font-size: 22px;
  line-height:1;
  cursor:pointer;
  transition: background 0.2s ease;
}

.tour-modal-close:hover,
.tour-modal-close:focus-visible{
  background: var(--amber);
  color: var(--forest-deep);
}

.side-slider{
  position:relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
}

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

.side-slider-slide.is-active{ opacity:1; }

.side-slider-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.side-slider-dots{
  position:absolute;
  bottom: calc(1rem - 9px);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap: 0;
  z-index:1;
}

/* 24px tap area (accessibility), same small dot drawn in the middle */
.side-slider-dots .dot{
  width: 24px;
  height: 24px;
  display:flex; align-items:center; justify-content:center;
  background: none;
  border:none;
  padding:0;
  cursor:pointer;
}
.side-slider-dots .dot::before{
  content:"";
  width: 6px;
  height: 6px;
  border-radius:50%;
  background: rgba(247,246,236,0.45);
}

.side-slider-dots .dot.is-active::before{
  background: var(--paper);
}

/* ---------- Spacious tour-room carousel (Bridal Lodge etc) - ported from Barns ---------- */
.tour-rooms-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.2rem);
}

@media (min-width: 900px){
  .tour-rooms-grid{
    grid-template-columns: repeat(4, 1fr);
  }
  .tour-rooms-grid--five{
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 700px) and (max-width: 899.98px){
  .tour-rooms-grid--five{
    grid-template-columns: repeat(3, 1fr);
  }
}

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

.tour-room-desc{
  margin-top: 0.9rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--stone);
}

.carousel-track--tour{
  gap: clamp(1.5rem, 3vw, 2rem);
}

.tour-carousel-slide{
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 100%;
}

@media (min-width: 700px){
  .tour-carousel-slide{ width: 300px; }
}

@media (min-width: 1000px){
  .tour-carousel-slide{ width: 280px; }
  .carousel-track--center-few{
    justify-content: center;
  }
}

.tour-carousel-slide .tour-card{
  max-width:none;
  width:100%;
  aspect-ratio: 5/4;
  box-shadow: 0 1px 2px rgba(28,36,22,0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.tour-carousel-slide .tour-card:hover,
.tour-carousel-slide .tour-card:focus-visible{
  box-shadow: 0 24px 44px -20px rgba(28,36,22,0.28);
  transform: translateY(-4px);
}

.tour-carousel-slide .tour-room-desc{
  margin-top: 1.1rem;
  font-size: 0.98rem;
}

/* ---------- Full gallery page - masonry + pagination (ported from Barns, sorted by upload date not shuffled) ---------- */
.gallery-masonry{
  columns: 1;
  column-gap: 1rem;
}

@media (min-width: 560px){
  .gallery-masonry{ columns: 2; }
}

@media (min-width: 900px){
  .gallery-masonry{ columns: 3; }
}

@media (min-width: 1200px){
  .gallery-masonry{ columns: 4; }
}

.gallery-masonry-item{
  display:block;
  width:100%;
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
  background:none;
  padding:0;
  cursor: zoom-in;
}

.gallery-masonry-item img{
  display:block;
  width:100%;
  height:auto;
  transition: transform 0.4s ease;
}

.gallery-masonry-item:hover img,
.gallery-masonry-item:focus-visible img{
  transform: scale(1.04);
}

.gallery-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 0.5rem;
  flex-wrap:wrap;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.gallery-page-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 42px;
  height: 42px;
  padding: 0 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.98rem;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gallery-page-link:hover,
.gallery-page-link:focus-visible{
  border-color: var(--amber);
  color: var(--forest);
}

.gallery-page-link.is-current{
  background: var(--forest);
  border-color: var(--forest);
  color: var(--paper);
}

.gallery-page-ellipsis{
  color: var(--sage);
  padding: 0 0.3rem;
}

.gallery-count-note{
  text-align:center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--sage);
  margin-bottom: clamp(2rem, 4vw, 2.6rem);
}

/* ---------- Fixes for enquiry-layout sections (contact/brochure/venue-tour/faq) ---------- */
/* .section has overflow:hidden by default (keeps the decorative leaf motifs
   contained), but that also breaks position:sticky on the sidebar inside
   it - sticky needs every ancestor up to the containing block to allow
   overflow. Scoped override just for sections holding the enquiry layout,
   reinforced with !important since this one has to win no matter what. */
.section:has(.enquiry-layout){
  overflow: visible !important;
}

/* These sections sit inside .intro (centre-aligned by default for the
   poem/quote-style pages), which was cascading into the form/FAQ content
   and centring paragraphs and bullet lists that should read left-aligned. */
.enquiry-main{
  text-align: left;
}

/* Britebiz's select fields ship with a visible <label> above them as well
   as their own "-- Choose... --" default option - redundant with the rest
   of the form, which is placeholder-only. Hide the label, keep the field
   (and its name/id) exactly as Britebiz needs it. */
.brite-field-row .brite-label-col{
  display:none;
}

/* Two-column form layout - text/select fields sit 50% width in pairs,
   textarea and the submit row stay full width. Pure CSS (flex-wrap on the
   form itself), the underlying field names/ids/order are untouched so
   nothing about how Britebiz reads the form has changed. */
.brite-form{
  display:flex;
  flex-wrap:wrap;
  gap: 0 1.2rem;
}
.brite-form > .brite-field-row,
.brite-form > .consent-row,
.brite-form > .hide{
  flex: 1 1 100%;
}
.brite-form > .brite-clear{
  display:none;
}
@media (min-width: 560px){
  .brite-form > .brite-field-row:not(:has(textarea)):not(:has(input[type="submit"])){
    flex: 1 1 calc(50% - 0.6rem);
  }
}

/* Select fields were sitting flush against their own edges with no room
   for the dropdown arrow - swap in our own arrow with proper padding. */
.brite-form select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a5433' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}

/* Contact page map - address/directions caption sits with the map in one
   section (not a separate cta-banner), matching Barns' layout. */
.map-section-head{
  text-align:center;
  max-width: 60ch;
  margin: 0 auto clamp(1.8rem, 3vw, 2.4rem);
}

/* ---------- Elevated tour cards - virtual-tours.php only, doesn't touch .tour-card used on accommodation pages ---------- */
.tour-feature-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.8rem, 3vw, 2.4rem);
}
@media (min-width: 900px){
  .tour-feature-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px){
  .tour-feature-grid{ grid-template-columns: 1fr; }
}

/* The lead ceremony card - full width, sits above the 3x2 grid of the
   other six spaces. */
.tour-feature-lead{
  margin-bottom: clamp(1.8rem, 3vw, 2.4rem);
}
.tour-feature-lead .tour-feature-card{
  display:grid;
  grid-template-columns: 1fr;
}
@media (min-width: 780px){
  .tour-feature-lead .tour-feature-card{
    grid-template-columns: 1.3fr 1fr;
    align-items:stretch;
  }
}
.tour-feature-lead .tour-feature-card .tour-card{
  aspect-ratio: 4/3;
}
@media (min-width: 780px){
  .tour-feature-lead .tour-feature-card .tour-card{
    aspect-ratio: auto;
    height:100%;
  }
}
.tour-feature-lead .tour-feature-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: clamp(1.8rem, 3vw, 2.8rem);
  text-align:left;
}
.tour-feature-lead .tour-feature-body h3::after{
  margin-left:0;
}
.tour-feature-lead .tour-feature-body h3{
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.tour-feature-lead .tour-feature-body p{
  font-size: 1rem;
}

.tour-feature-card{
  position:relative;
  background: var(--paper);
  border-radius: 20px;
  overflow:hidden;
  border: 1px solid var(--line);
  box-shadow: 0 22px 46px -28px rgba(28,36,22,0.35);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.tour-feature-card:hover,
.tour-feature-card:focus-within{
  transform: translateY(-8px);
  box-shadow: 0 34px 64px -22px rgba(28,36,22,0.42), 0 0 0 1px rgba(227,133,26,0.3);
}

.tour-feature-card .tour-card{
  max-width:none;
  aspect-ratio: 5/4;
  border-radius:0;
  border:none;
  margin:0;
}

.tour-feature-index{
  position:absolute;
  top: 14px;
  left: 14px;
  z-index:2;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--paper);
  background: rgba(28,36,22,0.5);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}

/* Replaces the small pill badge with a proper circular "play" style
   button for this page - bigger, glassy, and it pulses gently to draw
   the eye in, since this whole page is meant to feel like the flagship
   experience. */
.tour-feature-card .tour-card-badge{
  top:auto;
  right: 16px;
  bottom: 16px;
  width: 52px;
  height: 52px;
  padding:0;
  border-radius:50%;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:0;
  font-size:0;
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.tour-feature-card .tour-card-badge svg{
  width:20px;
  height:20px;
  color: var(--paper);
}
.tour-feature-card:hover .tour-card-badge{
  background: var(--amber);
  border-color: var(--amber);
  transform: scale(1.1);
}

.tour-feature-card .tour-card-label{
  display:none;
}

.tour-feature-body{
  padding: 1.5rem 1.6rem 1.7rem;
}

.tour-feature-body h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--forest-deep);
  margin-bottom: 0.6rem;
  display:block;
}

.tour-feature-body h3::after{
  content:"";
  display:block;
  width: 32px;
  height: 2px;
  background: var(--amber);
  margin: 0.5rem auto 0;
  transition: width 0.35s ease;
}

.tour-feature-card:hover .tour-feature-body h3::after{
  width: 56px;
}

.tour-feature-body p{
  font-size: 0.92rem;
  line-height:1.65;
  color: var(--stone);
}

/* ---------- Cookie table (cookies.php) ---------- */
.legal-content .cookie-table-wrap{
  overflow-x:auto;
  margin: 1.4rem 0 1.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cookie-table{
  width:100%;
  border-collapse:collapse;
  font-size: 0.92rem;
}
.cookie-table th{
  text-align:left;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
  background: var(--paper-warm);
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
}
.cookie-table td{
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--stone);
  vertical-align:top;
}
.cookie-table tr:last-child td{ border-bottom:none; }
.cookie-table td:first-child{
  font-family: var(--font-mono);
  color: var(--ink);
  white-space:nowrap;
}

/* ---------- Sitemap page - grouped nav cards ---------- */
.sitemap-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 900px){
  .sitemap-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px){
  .sitemap-grid{ grid-template-columns: 1fr; }
}

.sitemap-card{
  text-align:left;
}

.sitemap-card h3,
.sitemap-card > h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--forest-deep);
  margin: 0.2rem 0 1rem;
}

.sitemap-card ul{
  list-style:none;
  margin:0;
  padding:0;
}

.sitemap-card li{
  border-bottom: 1px solid var(--line);
}
.sitemap-card li:last-child{ border-bottom:none; }

.sitemap-card a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.6rem;
  padding: 0.65rem 0;
  color: var(--stone);
  font-size: 0.98rem;
  transition: color 0.2s ease;
}

.sitemap-card a:hover,
.sitemap-card a:focus-visible{
  color: var(--amber-deep);
}

.sitemap-card a svg{
  flex-shrink:0;
  width:12px;
  height:12px;
  opacity:0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sitemap-card a:hover svg,
.sitemap-card a:focus-visible svg{
  opacity:1;
  transform: translateX(0);
}

/* ---------- Sitemap - 6th "can't find it" CTA card, standing out from the rest ---------- */
.sitemap-cta-card{
  background: var(--forest);
  border-color: var(--forest);
  color: var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}
.sitemap-cta-card .card-icon{
  margin-left:auto;
  margin-right:auto;
  color: var(--sand);
}
.sitemap-cta-card h3,
.sitemap-cta-card > h2{
  color: var(--paper);
}
.sitemap-cta-card p{
  color: rgba(251,246,236,0.8);
  margin-bottom: 1.4rem;
}
.sitemap-cta-card:hover{
  border-color: var(--amber);
}

/* ---------- Thank you page confirmation icon ---------- */
.thankyou-check{
  width: 70px;
  height: 70px;
  margin: 0 auto 1.6rem;
  color: var(--amber);
}
.thankyou-check svg{ width:100%; height:100%; }

/* ---------- In-app dialog (btNotify) - replaces native alert ---------- */
.bt-dialog-overlay{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding: 1.2rem; background: rgba(28,36,22,0.55);
}
.bt-dialog{
  width:100%; max-width: 440px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgba(28,36,22,0.5);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.bt-dialog-text{ color: var(--ink); font-size: 1.02rem; line-height: 1.6; margin-bottom: 1.4rem; }
.bt-dialog-actions{ display:flex; gap: 0.7rem; justify-content:flex-end; }

/* Screen-reader-only text (keeps heading order correct without changing the look) */
.sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}

/* ---------- 360 tour viewer - branded overlay (loader, hint, controls) ---------- */
.tour-modal .tour-modal-viewer{ opacity:0; transition: opacity 0.7s ease; }
.tour-modal.is-ready .tour-modal-viewer{ opacity:1; }
.tour-modal::before{
  content:""; position:absolute; left:0; right:0; top:0; height:120px; z-index:1; pointer-events:none;
  background: linear-gradient(rgba(16,21,12,0.55), rgba(16,21,12,0));
}
.tour-modal .pnlm-load-box{ display:none !important; } /* our own loader below */
.tour-modal .pnlm-container{ background: var(--forest-deep); }

.tour-loader{
  position:absolute; inset:0; z-index:2; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap: 1rem;
  color: var(--paper); font-family: var(--font-display); font-style: italic; font-size: 1.05rem;
  text-align:center; padding: 0 1.5rem; pointer-events:none;
}
.tour-modal.is-loading .tour-loader{ display:flex; }
.tour-loader-ring{
  width: 46px; height: 46px; border-radius:50%;
  border: 2px solid rgba(247,204,161,0.2); border-top-color: var(--tour-accent);
  animation: tourSpin 0.9s linear infinite;
}
@keyframes tourSpin{ to{ transform: rotate(360deg); } }

.tour-hint{
  position:absolute; left:50%; top:50%; z-index:2; pointer-events:none;
  display:flex; align-items:center; gap: 0.6rem;
  padding: 0.7rem 1.2rem; border-radius: 999px;
  background: rgba(16,21,12,0.55); color: var(--paper);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--font-display); font-size: 1rem;
  opacity:0; transform: translate(-50%, -40%); transition: opacity 0.5s ease, transform 0.5s ease;
}
.tour-hint svg{ width: 22px; height: 22px; }
.tour-hint.is-visible{ opacity:1; transform: translate(-50%, -50%); }

.tour-controls{
  position:absolute; left:50%; bottom: max(22px, env(safe-area-inset-bottom)); z-index:3;
  transform: translateX(-50%);
  display:none; gap: 4px; padding: 5px;
  border-radius: calc(var(--radius) + 4px);
  background: rgba(16,21,12,0.55); border: 1px solid rgba(247,204,161,0.22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tour-modal.is-ready .tour-controls{ display:flex; }
.tour-ctrl{
  width: 44px; height: 44px; display:flex; align-items:center; justify-content:center;
  border:none; border-radius: var(--radius); background: transparent; color: var(--paper);
  cursor:pointer; transition: background 0.2s ease, color 0.2s ease;
}
.tour-ctrl svg{ width: 22px; height: 22px; }
.tour-ctrl:hover, .tour-ctrl:focus-visible{ background: var(--tour-accent); color: var(--forest-deep); outline:none; }
@media (prefers-reduced-motion: reduce){
  .tour-loader-ring{ animation-duration: 2.5s; }
  .tour-hint, .tour-modal .tour-modal-viewer{ transition:none; }
}