:root{

  --primary:#C64B65;

  --secondary:#EDE4D6;

  --accent:#F7B33C;

  --neutral:#F9F6EE;

  --slate:#585654;





  /* NEW: fonts */

  --font-heading: "Playfair Display", serif;

  --font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;



    /* Brand spectrum (left→right like the artwork lines) */

   --soft-peach:  #F7CEA6;

  --soft-salmon: #F1B6AA;

  --soft-orange: #F0A58F;

  --soft-coral:  #EF9490;

  --soft-rose:   #DA8F9C;

  --soft-plum:   #C57B96;



   --bg-cream:#F9F6EE;

  --brand-peach:#F6B476;

  --brand-salmon:#EB8B7C;

  --brand-orange:#EA6F50;

  --brand-coral:#E95251;

  --brand-rose:#C64B65;

  --brand-plum:#A2295C;

}







/* Body / default text = Lato */

.tuscany{ font-family: var(--font-body); color:var(--slate); }



/* Headings = Playfair Display */

.tuscany h1,

.tuscany h2,

.tuscany h3,

.tuscany h4,

.tuscany h5,

.tuscany h6,

.tuscany .section-title,

.tuscany .hero-title,

.tuscany .footer-brand,

.tuscany .brand-link{

  font-family: var(--font-heading);

  font-weight: 700;

  letter-spacing: .2px;

}



/* Body = Lato everywhere, including header/footer */

body { font-family: var(--font-body); color: var(--slate); }



/* Headings (incl. brand) = Playfair */

.brand-link,

.footer-brand,

h1,h2,h3,h4,h5,h6,

.section-title,

.hero-title {

  font-family: var(--font-heading);

  font-weight: 700;

  letter-spacing:.2px;

}



.bullet1 {

  color: var(--accent);

}



.bullet2 {

  color: var(--slate);

}



.tuscany .container{ max-width:1200px; margin:0 auto; padding:0 16px; }

.pad{ padding:clamp(40px,6vw,80px) 0; }

.bg-white{ background:#fff; }

.bg-neutral{ background:var(--neutral); }

/* Swiper */

.swiper{ width:100%; }

.swiper-slide img{ width:100%; height:clamp(380px,55vw,800px); object-fit:cover; }



#gallery .swiper-slide img{

   border-radius:20px; 

    }

/* Hero */

.hero-wrap{ position:relative; }

.hero-overlay{

  position:absolute; inset:auto 16px 16px 16px;

  background:rgba(88,86,84,.55);

  color:#fff; padding:16px 18px; border-radius:20px; backdrop-filter:blur(2px);

}

.hero-title{ font-size:clamp(24px,4vw,40px); margin:0 0 6px; }

.lead{ font-size:clamp(16px,2.2vw,18px); color:var(--primary); }

/* Features */

.features{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }

.feature{ background:#fff; border:1px solid #eaeaea; border-radius:25px; padding:14px 16px; }

.tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

.tag{ background:#eaf4fb; color:#234; padding:.35rem .6rem; border-radius:999px; border:1px solid #d3e6f5; }

/* Gallery thumbs */

.gallery-wrap{ position:relative; }

.thumbs .swiper-slide{ opacity:.5; cursor:pointer; height: 90px; border-radius: 12px;}

.thumbs .swiper-slide-thumb-active{ opacity:1; border:2px solid var(--primary); border-radius:22px; }

.thumbs img{ height:90px; border-radius: 20px;}

/* Reviews */

.review-card{ background:#fff; border:1px solid #e7e7e7; border-left:4px solid var(--primary); padding:16px; border-radius:20px; width:60%;margin:0 auto}

.review-text{ color:#333; }

.review-author{ margin-top:8px; color:#666; font-weight:600; }

/* Calendar */

.calendar { max-width: 900px; margin: 0 auto; }

.cal-month{ background:#fff; border:1px solid #eaeaea; border-radius:20px; padding:14px; }

.cal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }

.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }

.cal-day{ font-weight:700; font-size:.8rem; color:#666; text-align:center; }

.cal-cell{ aspect-ratio:1/1; background:#fafafa; border:1px solid #eee; border-radius:8px; font-size:.85rem; display:flex; flex-direction:column; padding:6px; }

.cal-price{ margin-top:auto; font-weight:700; color:var(--primary); }

/* Map */

.map-embed{ width:100%; height:clamp(400px,55vw,675px); border:0; border-radius:20px; }

/* Form */

.form{ background:#fff; border:1px solid #eaeaea; border-radius:20px; padding:16px; }

.form label{ font-weight:600; display:block; margin:.4rem 0 .2rem; }

.form input,.form textarea{ width:100%; padding:.7rem .8rem; border:1px solid #ddd; border-radius:8px; }

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

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

.btn{ display:inline-block; background:var(--primary); color:#fff; padding:.75rem 1.1rem; border-radius:25px; font-weight:600; border-width: 1px; border-color: var(--primary);border-style: solid;}

.btn:hover{

    background: #fff;

  border-color: #ddd;

  color:var(--slate) ;

  border-width: 1px;

  border-style: solid;

  transition: ease 0.3s;



}

.success{ background:#e8f8ed; border:1px solid #b8e6c4; color:#215a2e; padding:12px 14px; border-radius:10px; margin-bottom:12px; }

/* Optional alternate backgrounds */

/* .tuscany > section:nth-of-type(odd){ background:#fff; }

.tuscany > section:nth-of-type(even){ background:var(--neutral); } */

/* --- One-view month grid --- */

.month-grid{

  display:grid;

  grid-template-columns:repeat(2,minmax(180px,1fr));

  gap:12px;

}

@media(min-width:640px){ .month-grid{ grid-template-columns:repeat(3,minmax(180px,1fr)); } }

@media(min-width:900px){ .month-grid{ grid-template-columns:repeat(4,minmax(180px,1fr)); } }



/* Anchor jump offset for sticky header */

#hero, #features, #gallery, #reviews, #calendar, #map, #enquiry { scroll-margin-top: 0px; }

html:focus-within { scroll-behavior: smooth; }



/* 1) Kill the hero section padding so the image starts right under the header */

.hero-section { padding-top: 0}



.month-card{

  position:relative;

  background:#fff;

  border:1px solid #eaeaea;

  border-radius:12px;

  padding:14px;

  min-height:120px;

  display:flex;

  flex-direction:column;

}

.month-name{

  font-weight:700;

  color:#444;

  margin-bottom:auto; /* push rate to bottom unless split */

}

.month-rate{

  font-size:1.2rem;

  font-weight:800;

  color:var(--primary);

  margin-top:auto;

}



/* Split card for Dec/Jan */

.month-card.month-split{

  padding:0; /* we'll position inner bits */

  overflow:hidden;

}

.month-card.month-split .month-name{

  position:absolute;

  left:12px; top:10px;

  margin:0;

}

.month-card.month-split::before{

  content:"";

  position:absolute; inset:0;

  /* thin diagonal from top-left to bottom-right */

  background:

    linear-gradient(135deg, transparent 49.5%, rgba(0,0,0,.16) 50%, transparent 50.5%);

  pointer-events:none;

  border-radius:12px;

}

.price-corner{

  position:absolute;

  font-weight:800;

  font-size:1.05rem;

  padding:8px 10px;

  border-radius:10px;

  background:#fff;

  border:1px solid #eee;

  box-shadow:0 1px 0 rgba(0,0,0,.02);

}

.price-top-left{  left:10px;  top:36px;   color:#b05a0b; } /* Xmas/NY */

.price-bottom-right{ right:10px; bottom:10px; color:#2a2; } /* rest of month */



/* --- One-view month grid --- */

.month-grid{

  display:grid;

  grid-template-columns:repeat(2,minmax(180px,1fr));

  gap:12px;

}

@media(min-width:640px){ .month-grid{ grid-template-columns:repeat(3,minmax(180px,1fr)); } }

@media(min-width:900px){ .month-grid{ grid-template-columns:repeat(4,minmax(180px,1fr)); } }



.month-card{

  position:relative;

  background:#fff;

  border:1px solid #eaeaea;

  border-radius:12px;

  padding:14px;

  min-height:120px;

  display:flex;

  flex-direction:column;

}

.month-name{

  font-weight:700;

  color:#444;

  margin-bottom:auto;

}

.month-rate{

  font-size:1.2rem;

  font-weight:800;

  color:var(--primary);

  margin-top:auto;

}



/* Split card for Dec/Jan */

.month-card.month-split{

  padding:0;

  overflow:hidden;

}

.month-card.month-split .month-name{

  position:absolute;

  left:12px; top:10px;

  margin:0;

}



/* Diagonal divider (TL -> BR) */

.month-card.month-split::before{

  content:"";

  position:absolute; inset:0;

  background:

    linear-gradient(135deg, transparent 49.5%, rgba(0,0,0,.16) 50%, transparent 50.5%);

  pointer-events:none;

  border-radius:12px;

}



/* Price boxes */

.price-box{

  position:absolute;

  padding:8px 10px;

  max-width:70%;

}



/* Side placement */

.price-left{  left:0px;  }

.price-right{ right:0px; }



/* Vertical placement */

.price-top{    top:32px; }

.price-bottom{ bottom:5px; }



/* Default vertical centering when no explicit top/bottom */

.price-box:not(.price-top):not(.price-bottom){

  top:50%;

  transform:translateY(-50%);

}



/* Styling differences */

.price-box .price-value{

  font-weight:800;

  font-size:1.05rem;

  line-height:1.1;

  color:var(--primary);

}

.price-box.xmas .price-value{ color:#b05a0b; }



.price-label{

  font-size:.72rem;

  font-weight:700;

  color:#6b4a0f;

  background:#fff7e6;

  border:1px solid #f5dfb5;

  border-radius:999px;

  padding:2px 8px;

  margin-bottom:6px;

  display:inline-block;

}



/* Make sure the overlay always sits above the swiper */

.hero-wrap{ position:relative; }                     /* you already have this */

.hero-swiper{ position:relative; z-index:1; }        /* swiper below */

.hero-overlay{

  position:absolute;

  inset:auto 16px 16px 16px;

  z-index:5;                                         /* <-- key line */

  pointer-events:none;                               /* overlay doesn't block clicks on slides */

}



/* Belt-and-braces: keep slides at a lower stacking level */

.swiper,

.swiper-wrapper,

.swiper-slide{ position:relative; z-index:0; }



/* Make sure the overlay always sits above the swiper */

.hero-wrap{ position:relative; }                     /* you already have this */

.hero-swiper{ position:relative; z-index:1; }        /* swiper below */

.hero-overlay{

  position:absolute;

  inset:auto 16px 28px 16px;

  z-index:5;                                         /* <-- key line */

  pointer-events:none;                               /* overlay doesn't block clicks on slides */

}



/* Belt-and-braces: keep slides at a lower stacking level */

.swiper,

.swiper-wrapper,

.swiper-slide{ position:relative; z-index:0; }







.hero-wrap.full-bleed,

.tuscany .hero-wrap.full-bleed {

  width: 100vw;

  position: relative;

  left: 50%;

  right: 50%;

  margin-left: -50vw;

  margin-right: -50vw;

  max-width: 100vw; /* prevent 1200px container from capping width */

}



.hero-overlay { z-index: 5; } /* from earlier fix */

.hero-overlay .overlay-inner{

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 16px; /* matches your .container side padding */

}



/* ---------- Header ---------- */

.site-header{

  position: sticky; top: 0; z-index: 60;

  background: var(--primary); color: #fff;

  box-shadow: 0 4px 12px rgba(0,0,0,.06);

  border-top-width: 4px;

  border-style: solid;

  border-color:var(--primary);

  border-bottom-width:1px;

  border-right-width:0px;

  border-left-width:0px;

}

.site-brand{

  text-align: center;

  padding: 10px 16px 4px;

}

.brand-link{

  color: #fff; text-decoration: none;

  font-family: "Playfair Display", serif;

  font-weight: 700;

  font-size: clamp(24px, 4vw, 36px);

  letter-spacing: .5px;

}

.site-nav{

  display: flex; justify-content: center; align-items: center;

  gap: 12px; padding: 8px 16px 12px;

}

.site-nav .menu{

  list-style: none; margin: 0; padding: 0;

  display: flex; gap: clamp(10px, 2.2vw, 22px); flex-wrap: wrap;

}

.site-nav .menu a{

  color: #fff; text-decoration: none; font-weight: 600;

  padding: 6px 10px; border-radius: 8px;

}

.site-nav .menu a:hover, .site-nav .menu a:focus{

  background: rgba(255,255,255,.16);

}



/* Mobile nav */

.nav-toggle{

  display: none;

  background: rgba(255,255,255,.12);

  border: 1px solid rgba(255,255,255,.25);

  color:#fff; font-weight:600; border-radius:8px; padding:8px 10px;

}

@media (max-width: 768px){

  .nav-toggle{ display: inline-block; }

  .site-nav{ flex-direction: column; align-items: center; }

  .site-nav .menu{ display: none; flex-direction: column; gap: 10px; }

  .site-nav .menu.is-open{ display: flex; }

}



/* Optional active link state (when hash matches) */

.site-nav .menu a[aria-current="true"]{

  background: rgba(255,255,255,.22);

}

/* ---------- Sticky layout so footer anchors the page ---------- */

html, body { height: 100%; }

body { display: flex; min-height: 100%; flex-direction: column; }

.site-main { flex: 1 0 auto; }

.site-footer { flex-shrink: 0; }



/* ---------- Footer ---------- */

.site-footer{

  background: var(--slate);

  color: #fff;

  border-top: 1px solid rgba(255,255,255,.08);

}

.site-footer a{ color:#fff; text-decoration:none; }

.site-footer a:hover{ text-decoration: underline; }



.site-footer .footer-inner{

  display: grid;

  grid-template-columns: 1fr;

  gap: 12px;

  padding: 18px 16px 24px;

}



.footer-brand{

  display: inline-block;

  font-family: "Playfair Display", serif;

  font-weight: 700;

  font-size: clamp(18px, 2.6vw, 22px);

  letter-spacing: .3px;

}



.footer-menu{

  list-style:none; margin:0; padding:0;

  display:flex; flex-wrap:wrap; gap:10px 16px;

  font-weight: 600;

  opacity:.95;

}

.footer-menu a{

  padding:4px 8px; border-radius:8px;

  background: rgba(255,255,255,.06);

}

.footer-menu a:hover{ background: rgba(255,255,255,.14); text-decoration:none; }



/* Meta row: back-to-top, ©, email */

.footer-meta{

  display:flex; align-items:center; gap:12px; flex-wrap:wrap;

  font-size:.95rem; opacity:.9;

}

.to-top{

  display:inline-flex; align-items:center; justify-content:center;

  width:28px; height:28px; border-radius:999px;

  background: rgba(255,255,255,.14);

  border:1px solid rgba(255,255,255,.18);

  line-height:1; font-weight:800;

}

.to-top:hover{ background: rgba(255,255,255,.24); text-decoration:none; }

.footer-mail{ word-break: break-word; }



/* Responsive layout */

@media (min-width: 720px){

  .site-footer .footer-inner{

    grid-template-columns: auto 1fr auto;

    align-items: center;

  }

  .footer-brand{ margin-right: 12px; }

  .footer-meta{ justify-self: end; }

}



/* Hamburger button */

.nav-toggle{

  display:none;

  flex-direction:column;

  justify-content:space-between;

  width:28px; height:22px;

  padding:0; border:none; background:transparent; cursor:pointer;

}

.nav-toggle span{

  display:block; height:3px; width:100%;

  background:#fff; border-radius:2px;

  transition:transform .3s ease, opacity .3s ease;

}

.nav-toggle.is-active span:nth-child(1){ transform: translateY(9px) rotate(45deg); }

.nav-toggle.is-active span:nth-child(2){ opacity:0; }

.nav-toggle.is-active span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }



/* Desktop/ Mobile switch */

.menu-desktop{ display:flex; gap:clamp(10px,2.2vw,22px); flex-wrap:wrap; }

@media (max-width: 768px){

  .nav-toggle{ display:flex; }

  .menu-desktop{ display:none; }

}



/* Off-canvas panel */

.offcanvas{

  position:fixed; top:0; right:0; height:100vh; width:min(320px, 82vw);

  background: var(--slate); color:#fff;

  transform: translateX(100%); transition: transform .32s ease;

  z-index: 80; /* above sticky header (60) */

  box-shadow: -8px 0 20px rgba(0,0,0,.18);

  display:flex; flex-direction:column;

}

.offcanvas[aria-hidden="false"]{ transform: translateX(0); }



.offcanvas-header{

  display:flex; align-items:center; justify-content:space-between;

  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.12);

}

.offcanvas-title{

  font-family: var(--font-heading, "Playfair Display", serif);

  font-weight:700; font-size:18px;

}

.offcanvas-close{

  background:transparent; border:none; color:#fff;

  font-size:26px; line-height:1; cursor:pointer;

}



.offcanvas-menu{

  list-style:none; margin:0; padding: 14px 10px;

  display:flex; flex-direction:column; gap:24px;

}

.offcanvas-menu a{

  color:#fff; text-decoration:none; font-weight:600; font-family: var(--font-body, "Lato", sans-serif);

  padding:10px 12px; border-radius:10px;

  background: rgba(255,255,255,.06);

}

.offcanvas-menu a:hover{ background: rgba(255,255,255,.14); }



/* Backdrop */

.offcanvas-backdrop{

  position:fixed; inset:0; background: rgba(0,0,0,.38);

  z-index: 70; opacity:0; visibility:hidden; transition: opacity .25s ease;

}

.offcanvas-backdrop.is-visible{ opacity:1; visibility:visible; }



/* Lock scroll when open */

body.no-scroll{ overflow:hidden; }



/* Header container */

.site-header{

  position: sticky; top: 0; z-index: 60;

  background: var(--primary); color: #fff;

  box-shadow: 0 4px 12px rgba(0,0,0,.06);

  border-top: 4px solid var(--primary);

}



/* ONE-LINE BAR */

.header-bar{

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;   /* centers the brand */

  height: 76px;              /* nice compact height on mobile */

  padding: 0 48px;           /* space for the hamburger */

}



/* Brand centered */

.brand-link{

  color:#fff; text-decoration:none;

  font-family: var(--font-heading, "Playfair Display", serif);

  font-weight:700;

  font-size: clamp(20px, 5vw, 26px);

  letter-spacing:.3px;

}



/* Hamburger on the RIGHT of the same line */

.nav-toggle{

  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);

  display: none;               /* shown on mobile below */

  flex-direction: column; justify-content: space-between;

  width: 28px; height: 22px;

  padding: 0; border: 0; background: transparent; cursor: pointer;

}

.nav-toggle span{

  display:block; height:3px; width:100%;

  background:#fff; border-radius:2px;

  transition: transform .3s ease, opacity .3s ease;

}

.nav-toggle.is-active span:nth-child(1){ transform: translateY(9px) rotate(45deg); }

.nav-toggle.is-active span:nth-child(2){ opacity:0; }

.nav-toggle.is-active span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }



/* Desktop menu under the bar; hide on mobile */

.menu-desktop{ display:flex; gap: clamp(10px, 2.2vw, 22px); padding: 10px 16px 12px; justify-content:center; }

@media (max-width: 768px){

  .nav-toggle{ display:flex; }

  .menu-desktop{ display:none; }

  .site-nav{ display:none; } /* collapse the desktop nav row entirely on mobile */

}



/* Keep your existing off-canvas styles (drawer+backdrop) */



/* =========================

   Description block — single column with bullets

   ========================= */

#description { /* already bg-white pad */ }



#description .container > p {

  line-height: 1.7;

  color: #2f2f2f;

}



#description {

  padding-top: 0px;

}



/* Intro paragraph = slightly larger “lead” */

#description .container > p:first-of-type {

  font-size: clamp(17px, 2.2vw, 18px);

  margin-bottom: 14px;

}



/* Closing line = tasteful emphasis */

#description .container > p:last-of-type {

  margin-top: 14px;

  font-style: italic;

  font-weight: 600;

  color: #333;

}



/* Single-column list with standard bullets */

#description ul {

  margin: 16px 0 0;

  padding-left: 1.2rem;            /* space for bullets */

  list-style: disc !important;     /* force bullets even if previous CSS removed them */

}



#description li {

  margin: 0;

  padding: 0;

  color: #444;

  line-height: 1.65;

}



/* spacing between items */

#description li + li { margin-top: 8px; }



/* Remove any old tick/badge pseudo-bullets if present */

#description li::before { content: none !important; }



/* Vimeo link → compact pill button (optional, matches theme) */

#description a[href*="vimeo.com"] {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 8px 12px;

  font-weight: 700;

  border: 1px solid #eaeaea;

  border-radius: 25px;

  background: var(--primary);

  text-decoration: none;

  color: #fff;

  margin-top: 12px;

}

#description a[href*="vimeo.com"]::before {

  content: "▶";

  display: inline-block;

  font-size: 12px;

  transform: translateY(1px);

  color: var(--accent);

}

#description a[href*="vimeo.com"]:hover {

  background: #fff;

  border-color: #ddd;

  color:var(--slate) ;

  transition: ease 0.3s;

}



/* Inset the bullets a bit more */

#description ul{

  padding-left: 2.25rem !important;  /* was 1.2rem */

  list-style-position: outside;      /* keep classic bullets */

}



/* Optional: nudge the whole list a touch, for a deeper inset */

#description .container > p + ul{

  margin-left: .25rem;

}



/* Keep item spacing tidy */

#description li + li{ margin-top: 10px; }



.hero-bullets{ display:flex; flex-wrap:wrap; align-items:center; gap:0; font-weight:600; }

.hero-bullets span + span::before{ content:" · "; opacity:.9; }



/* Reviews: header row */

.review-header{

  display:flex; align-items:center; justify-content:space-between;

  gap:10px; margin-bottom:8px;

}

.review-title{

  font-weight:700;

  font-family: var(--font-heading, "Playfair Display", serif);

  color:#333;

  font-size: 1.05rem;

}

.review-score{

  font-weight:800; font-size:.95rem; line-height:1;

  color: var(--accent);

  background: var(--neutral);

  border:1px solid var(--slate);

  padding:6px 10px; border-radius:999px;

}



/* Masonry ONLY for Features on mobile, with anti-overlap guards */

@media (max-width: 768px){

  #features .features{

    display: block !important;   /* override grid */

    column-count: 2;

    column-gap: 14px;

  }

  #features .feature{

    display: inline-block;       /* needed for multi-column flow */

    width: 100%;

    margin: 0 0 14px;



    /* prevent splitting/overlap in columns */

   break-inside: avoid-column;

    -webkit-column-break-inside: avoid;

    -moz-column-break-inside: avoid;

    page-break-inside: avoid;



    /* clip bubbles/badges that extend out */

    overflow: hidden;

    box-sizing: border-box;

    background-clip: padding-box;

  }



  /* safety: long tags/inline elements shouldn’t overflow */

  #features .feature *{ max-width: 100%; }



  .review-card{  width:80%;}

}



/* Back-to-top (sticky) */

.back-to-top[hidden]{ display:none !important; }



.back-to-top{

  position: fixed;

  right: 16px;

  bottom: calc(16px + env(safe-area-inset-bottom));

  z-index: 95; /* above header/backdrop */

  width: 44px; height: 44px;

  border-radius: 999px;

  border: 1px solid rgba(0,0,0,.08);

  background: var(--slate);

  color: #fff; font-weight: 800; line-height: 1;

  display: inline-flex; align-items: center; justify-content: center;

  box-shadow: 0 6px 18px rgba(0,0,0,.18);

  cursor: pointer;



  opacity: 0; transform: translateY(8px);

  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;

}

.back-to-top.is-visible{ opacity: 1; transform: translateY(0); }



.back-to-top:hover{ box-shadow: 0 8px 22px rgba(0,0,0,.22); }

.back-to-top:focus-visible{

  outline: 2px solid #fff; outline-offset: 2px;

  box-shadow: 0 0 0 3px rgba(255,255,255,.6), 0 8px 22px rgba(0,0,0,.22);

}



/* Admin bar clearance */

.admin-bar .back-to-top{ bottom: calc(16px + 32px); }

@media (max-width:782px){

  .admin-bar .back-to-top{ bottom: calc(16px + 46px); }

}



/* Back-to-top: remove square focus/tap highlight, keep accessible ring */

.back-to-top {

  -webkit-tap-highlight-color: transparent; /* iOS tap gray */

  appearance: none;

  -webkit-appearance: none;

  outline: none; /* remove UA outline */

  border-radius: 999px; /* ensure round hit area */

}



.back-to-top:focus { outline: none; }



/* Rounded focus ring that respects border-radius */

.back-to-top:focus-visible{

  outline: none;

  box-shadow:

    0 0 0 3px rgba(255,255,255,.65),  /* visible ring */

    0 8px 22px rgba(0,0,0,.22);       /* same hover shadow */

}



/* Firefox inner focus quirk */

.back-to-top::-moz-focus-inner { border: 0; }



/* Calendar: always 2 cols, add right-side padding on small screens */





/* small devices: nudge content in from the right edge */

@media (max-width: 768px){

  #calendar .container{

    padding-right: calc(10px + env(safe-area-inset-right)); /* was 16px; tweak to taste */

  }

  #calendar .month-card{ box-sizing: border-box; } /* guards against border overflow */



  #calendar .month-grid{

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr)); /* never overflow */

  gap: 12px;

}

}



/* if you still see a 1–2px spill on very narrow phones, add this: */

#calendar{ overflow-x: clip; } /* clips sub-pixel overflow without affecting layout */





/* --- Enquiry form: font + layout fixes --- */

#enquiry .form{

  box-sizing: border-box;

  max-width: 860px;           /* keeps it tidy on widescreens */

  margin: 0 auto;

  font-family: var(--font-body); /* Lato */

}

#enquiry .form *{ box-sizing: border-box; }



/* 2-column on ≥768px, single column below */

#enquiry .form .row{

  display: grid;

  grid-template-columns: 1fr;

  gap: 12px;

  align-items: start;

}

@media (min-width: 768px){

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

  #enquiry .form .row > div{ min-width: 0; } /* allow shrink, avoid overflow */

}



/* Inputs/textarea: correct font, sizing and mobile behavior */

#enquiry .form input,

#enquiry .form textarea{

  display: block;

  width: 100%;

  max-width: 100%;

  font-family: var(--font-body);  /* Lato */

  font-size: 16px;                /* avoids iOS zoom-on-focus */

  line-height: 1.4;

  padding: .75rem .9rem;

  border: 1px solid #ddd;

  border-radius: 20px;

  background: #fff;

  color: var(--slate);

}



/* Placeholder = Lato everywhere */

#enquiry .form input::placeholder,

#enquiry .form textarea::placeholder{ font-family: var(--font-body); color:#9aa0a6; opacity:1; }

#enquiry .form input::-webkit-input-placeholder,

#enquiry .form textarea::-webkit-input-placeholder{ font-family: var(--font-body); }

#enquiry .form input::-moz-placeholder,

#enquiry .form textarea::-moz-placeholder{ font-family: var(--font-body); }

#enquiry .form input:-ms-input-placeholder,

#enquiry .form textarea:-ms-input-placeholder{ font-family: var(--font-body); }

#enquiry .form input:-moz-placeholder,

#enquiry .form textarea:-moz-placeholder{ font-family: var(--font-body); }



/* Small niceties */

#enquiry .form label{ margin:.45rem 0 .25rem; }

#enquiry .form .btn{ white-space: nowrap; }

#enquiry .success{ margin-bottom: 14px; }



/* Guard against tiny horizontal spill on very small phones */

#enquiry{ overflow-x: clip; }



/* ===== Header: white background + primary blue text/links ===== */

.site-header{

  background:#ffffff !important;

  color: var(--primary) !important;

  box-shadow: 0 4px 12px rgba(0,0,0,.06);

  border-top: 2px solid var(--brand-peach);

  border-bottom: 1px solid var(--secondary);

}



/* Brand in primary */

.brand-link{

  color: var(--primary) !important;

}



/* Desktop menu links: primary text, subtle blue hover */

.site-nav .menu a{

  color: var(--slate) !important;

  background: transparent;

  border-radius: 25px;

}

.site-nav .menu a:hover,

.site-nav .menu a:focus{

  background: rgba(92,164,215,.12); /* lighter shade of primary */

  color: var(--primary) !important;

}



/* "Current" item state in blue tint */

.site-nav .menu a[aria-current="true"]{

  background: rgba(92,164,215,.18) !important;

  color: var(--primary) !important;

}



/* Mobile hamburger = primary bars on white */

.nav-toggle{

  border-color: rgba(92,164,215,.35);

}

.nav-toggle span{

  background: var(--primary) !important;

}



.header-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.header-bar {

  display: flex;

  align-items: center;

  justify-content: space-between; /* spaces out left, centre, right */

  position: relative;

}



.logo img {

  display: block;

  height: 110px;

  width: 180px;

  margin-top: 50px;

}



/* Centre the brand name absolutely in the middle */

.brand-centre {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

}



.brand-link {

  font-size: 1.8rem;

  font-weight: bold;

  text-decoration: none;

}







.header-bar{

  display:flex;

  align-items:center;

  justify-content:space-between;

  position:relative;

  padding-block: .6rem 1.1rem; /* extra bottom space for the tagline */

}







/* centre block */

.brand-centre{

  position:absolute;

  left:50%;

  transform:translateX(-50%);

  text-align:center;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:.25rem;

  pointer-events:none; /* so absolute block doesn't block clicks */

}



.brand-link{

  font-size:1.8rem;

  font-weight:700;

  text-decoration:none;

  pointer-events:auto; /* clickable brand link */

}



/* tagline style */

.brand-tagline{

  color:var(--slate);

  font-size:.9rem;

  line-height:1.2;

  letter-spacing:.04em;

  font-weight:500;

  white-space:nowrap; /* remove if you prefer wrapping */

}



/* Small-screen tweaks */

@media (max-width: 480px){

  .brand-link{ font-size:1.4rem; }

  .brand-tagline{ font-size:.8rem; white-space:normal; }

}



/* Space so the line isn't clipped */

.header-bar{

  padding-bottom: 0.8rem;   /* adjust to taste */

  position: relative;

}



/* Make the <hr> visible and centred under the brand */

.brand-centre hr{

  width: 270px;             /* or 100% if you want full width of the brand block */

  margin: .35rem auto 0;    /* centre it */

  border: 0;                /* reset theme defaults */

  height: 2px;              /* actual line thickness */

  background: #5856543a;

  opacity: .7;              /* optional */

}



.section-title {

  text-align: center;

}



.season-table {

  

  border-collapse: collapse;           /* single grid lines */

  border: 1px solid #e5e7eb;          /* outer border */

  font-size: 0.95rem;

    

}



.season-table th,

.season-table td {

  border: 1px solid #e5e7eb;          /* inner cell borders */

  padding: .6rem .8rem;

  

}



.season-table thead th {

  background: #f8fafc;                /* subtle header bg */

  text-align: left;

  font-weight: 600;

}



.season-table tbody tr:nth-child(even){

  background: #fafafa;                /* zebra striping (optional) */

}



/* Align your price column to the right (Nightly) */

.season-table td:last-child,

.season-table th:last-child{

  text-align: right;

  white-space: nowrap;

}



.section-header{

  display: flex;

  flex-direction: column;

  align-items: center;   /* centres the block’s contents */

  text-align: center;    /* centres the text itself */

  gap: .35rem;

  margin-inline: auto;   /* centres the block if it’s shrink-to-fit */

  /* optional: uncomment to shrink to content width

  width: max-content;

  */

  margin-bottom: 30px;

}



.section-eyebrow{

  display: inline-block;

  font-size: .78rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--accent);

}



.section-title{

  margin: 0;

}



/* Key Features: full brand gradient background */



:root{

  /* Base cream */

  --bg-cream:     #F9F6EE;



  /* Gentle tints/shades for a soft gradient */

  --bg-cream-50:  #FCFBF7; /* a touch lighter */

  --bg-cream-200: #F1ECE0; /* a touch deeper */

}



/* Default: vertical (top→bottom) cream gradient */

.bg-cream-gradient{

  background: var(--bg-cream); /* fallback */

  background-image: linear-gradient(

    180deg,

    var(--bg-cream-50) 0%,

    var(--bg-cream)    40%,

    var(--bg-cream-200) 100%

  );

}



/* Optional variants */

.bg-cream-gradient.diagonal{

  background-image: linear-gradient(

    135deg,

    var(--bg-cream-50),

    var(--bg-cream),

    var(--bg-cream-200)

  );

}

.bg-cream-gradient.radial{

  background-image:

    radial-gradient(120% 80% at 50% 0%,

      var(--bg-cream-50) 0%,

      var(--bg-cream) 55%,

      var(--bg-cream-200) 100%

    );

}



/* Container: centred, tight spacing */

.swiper-pagination{

  position: static;             /* keep them in normal flow under the slider */

  display: flex;

  justify-content: center;

  align-items: center;

  gap: .4rem;                   /* space between dots */

  margin-top: .75rem;

}



/* Bullets: small, neutral, perfectly round */

.swiper-pagination-bullet{

  width: 7px;

  height: 7px;

  border-radius: 9999px;

  background: #D9CBB9;          /* muted neutral */

  opacity: 1;                   /* Swiper dims by default; we control colour instead */

  transform: translateY(0);     /* reset any theme bumps */

  margin: 0 !important;         /* remove Swiper inline spacing */

}



/* Active bullet: use your primary/rose and a ring */

.swiper-pagination-bullet-active{

  background: #C64B65;          /* --primary (rose) */

  box-shadow: 0 0 0 3px rgba(198,75,101,.18); /* soft ring for focus */

}



/* Keyboard focus visible */

.swiper-pagination-bullet:focus-visible{

  outline: 2px solid #C64B65;

  outline-offset: 2px;

}



/* Optional: turn bullets into dashes (pill style) */

.swiper-pagination-bullet{

  width: 16px;                  /* make pills */

  height: 4px;

  border-radius: 9999px;

}

.swiper-pagination-bullet-active{

  width: 20px;

}



/* Positioning (Swiper provides base styles; this refines them) */

.swiper-button-prev,

.swiper-button-next{

  width: 40px;

  height: 40px;

  border-radius: 9999px;

  background: rgba(255,255,255,.85);

  color: var(--primary, #C64B65);

  box-shadow: 0 1px 8px rgba(0,0,0,.12);

}



/* icon size */

.swiper-button-prev::after,

.swiper-button-next::after{

  font-size: 16px;

}



/* hover/focus */

.swiper-button-prev:hover,

.swiper-button-next:hover{

  background: #fff;

}

.swiper-button-prev:focus-visible,

.swiper-button-next:focus-visible{

  outline: 2px solid var(--primary, #C64B65);

  outline-offset: 2px;

}



/* Remove dots if you don’t want them */

.swiper-pagination{ display: none; }



.reviews-wrap{

  position: relative;

  /* ensure the area around the slider doesn't clip the outside arrows */

  overflow: visible;

}



/* Arrows outside the slider edges on desktop */

.reviews-prev,

.reviews-next{

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 10;

  width: 42px; height: 42px;

  border-radius: 9999px;

  background: rgba(255,255,255,.92);

  color: var(--primary, #C64B65);

  box-shadow: 0 1px 10px rgba(0,0,0,.12);

  border: 1px solid rgba(0,0,0,.06);

  cursor: pointer;

}



/* Nudge outside */

.reviews-prev{ left: -26px; }

.reviews-next{ right: -26px; }



/* Keep Swiper's icon glyph, just size it */

.reviews-prev::after,

.reviews-next::after{ font-size: 16px; }



/* Pagination centred under slides */

.reviews-swiper .swiper-pagination{

  position: static;

  display: flex;

  justify-content: center;

  margin-top: .75rem;

}

.gallery-swiper{

  height: clamp(400px,55vw,600px);

}

/* Hide arrows on screens < 768px */

@media (max-width: 768px){

  /* Swiper's built-in arrow classes (hero, gallery, etc.) */

  .swiper-button-prev,

  .swiper-button-next,

  /* Reviews arrows (custom outside buttons) */

  .reviews-prev,

  .reviews-next{

    display: none !important;

  }

}







/* Mobile: logo on top, then brand, hamburger top-right */

@media (max-width: 768px){

  .site-header .header-bar{

    display: grid !important;

    grid-template-columns: 1fr;

    grid-template-areas:

      "toggle"

      "logo"

      "brand";

    row-gap: .3rem;

    align-items: center;

    justify-items: center;

    position: relative;

    padding: .5rem 12px .8rem;

    /* optional height */

  }



.gallery-swiper{

  height: 400px;

}



  /* Logo first */

  .site-header .logo{

    grid-area: logo;

    margin-top: .2rem;

  }

  .site-header .logo img{

    display: block;

    width: 100px;          /* adjust to taste */

    height: auto;

    margin: 0 auto;

  }



  /* Brand under the logo, centred */

  .site-header .brand-centre{

    grid-area: brand;

    position: static !important;   /* override desktop absolute */

    left: auto !important;

    right: auto !important;

    transform: none !important;

    text-align: center;

    pointer-events: auto;

  }

  .site-header .brand-centre hr{

    width: 80px;

    margin: .25rem auto 0;

  }



  /* Hamburger stays top-right */

  .site-header .nav-toggle{

    grid-area: toggle;

    justify-self: end;

    align-self: start;

    position: static !important;

    margin-right: 0;

  }

}



/* Mobile header: logo, brand, hamburger (hamburger top-right) */

@media (max-width: 768px){

  .site-header .header-bar{

    display: grid !important;

    grid-template-columns: 1fr;

    grid-template-areas:

      "toggle"

      "logo"

      "brand";

    row-gap: .3rem;

    align-items: center;

    justify-items: center;

    position: relative;

    padding: .5rem 12px .8rem;

   }



  /* Hamburger (reset absolute styles) */

  .site-header .nav-toggle{

    grid-area: toggle;

    justify-self: end;

    align-self: start;

    position: static !important;   /* no absolute positioning */

    top: auto !important;

    right: auto !important;

    transform: none !important;    /* <— this fixes the off-screen issue */

    display: flex;                  /* ensure visible on mobile */

    margin: 0;

  }



  /* Logo first */

  .site-header .logo{

    grid-area: logo;

    margin-top: .2rem;

  }

  .site-header .logo img{

    display: block;

    width: 100px;

    height: auto;

    margin: 0 auto;

  }



  /* Brand under logo */

  .site-header .brand-centre{

    grid-area: brand;

    position: static !important;

    left: auto !important;

    right: auto !important;

    transform: none !important;

    text-align: center;

    pointer-events: auto;

  }

  .site-header .brand-centre hr{

    width: 80px;

    margin: .25rem auto 0;

  }

}





/* Drawer + backdrop transitions (no delay here) */

.offcanvas{

  transform: translateX(100%);

  transition: transform .32s ease;

  will-change: transform;

}

.offcanvas[aria-hidden="false"]{ transform: translateX(0); }



.offcanvas-backdrop{

  opacity: 0; visibility: hidden;

  transition: opacity .25s ease;

}

.offcanvas-backdrop.is-visible{ opacity: 1; visibility: visible; }



/* Bubble around the intro content */

#hero-intro .hero-intro-inner{

  position: relative;

  margin: 0 auto;

  max-width: 1200px;

       /* warm off-white */

  border: 0px solid var(--line, #E7DCCD);     /* soft border */

  border-radius: 20px;

  padding: clamp(18px, 3.2vw, 36px);



  text-align: left;

}



#hero-intro{

  padding-bottom: 20px;

}



/* Optional: overlap the bubble slightly onto the slider on larger screens */

@media (min-width: 768px){

  #hero-intro{ margin-top: -36px; }}



  /* Accent-coloured rule inside the hero intro bubble */

#hero-intro .hero-intro-inner hr{

  width: 100%;                 /* tweak or set to 100% */

  margin: 12px auto 0;          /* centre it under the bullets */

  border: 0;                    /* remove default borders */

  height: 2px;                  /* actual line thickness */

  background: var(--accent, #F7B33C); /* your accent colour */

  opacity: .9;                  /* soften slightly */

  border-radius: 2px;           /* tiny rounding */

}



#enquiry .contact-panel{

  background: var(--neutral, #fff);

  border: 1px solid var(--line, #E7DCCD);

  border-radius: 20px;

  padding: 14px 16px;

  display: grid;

  gap: 10px;

  max-width: 860px;

  margin: 0 auto;

}

#enquiry .contact-item{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }

#enquiry .contact-label{ font-weight:700; color:var(--slate, #585654); min-width:64px; }

#enquiry .contact-link{ color:var(--primary, #C64B65); font-weight:700; text-decoration:none; }

#enquiry .contact-link:hover{ text-decoration:underline; }



/* Make sure the panel can be centered and has a finite width */

#enquiry .contact-panel{

  max-width: 860px;

  margin-left: auto !important;

  margin-right: auto !important;

  float: none !important;      /* in case something floated it */

}



/* If the parent is a GRID container, center the item */

#enquiry .contact-panel{

  justify-self: center;        /* grid cross-axis centering */

}



/* If the parent is a FLEX container (esp. flex-direction: column),

   center on the cross-axis */

#enquiry .container > .contact-panel{

  align-self: center;          /* flex cross-axis centering */

}



/* (Optional) If the parent itself was set to flex/grid and stretching children,

   force the container back to normal block flow just for this section */

#enquiry .container{

  display: block;              /* override any inherited flex/grid */

}



/* Mobile: tight two-row header with truly centered logo + brand */

@media (max-width: 768px){

  .site-header .header-bar{

    display: grid !important;

    /* left spacer balances the right button column */

    grid-template-columns: 1fr auto 44px;   /* 44px ≈ hamburger width */

    grid-template-areas:

      "logo  .  button"

      "brand .  button";

    align-items: center;

    justify-items: center;                  /* center cells themselves */

    padding: .4rem 12px .6rem 12px;         /* even padding now */

    min-height: auto;                       /* let content set height */

    position: relative;

  }



  /* ONE-LINE BAR */

.header-bar{

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;   /* centers the brand */

  height: 136px;              /* nice compact height on mobile */

  padding: 0 48px;           /* space for the hamburger */

}



  /* Place items into the grid */

  .site-header .logo{ grid-area: logo; justify-self: center; }

  .site-header .brand-centre{

    grid-area: brand;

    position: static !important;            /* kill desktop absolute */

    left: auto !important; right: auto !important; transform: none !important;

    text-align: center; pointer-events: auto;

    justify-self: center;

  }

  .site-header .brand-centre hr{

    width: 80px; margin: .25rem auto 0;

  }



  /* Hamburger sits in the right column, vertically centered */

  .site-header .nav-toggle{

    grid-area: button;

    position: static !important;            /* no absolute needed */

    align-self: center;

    justify-self: end;

    margin: 0;

    transform: none !important;

    display: flex;

    width: 28px; height: 22px;              /* keep it compact */

  }



  /* Tighten the visuals a touch */

  .site-header .logo img{

    margin-top: 0 !important;

    width: 120px; height: auto;

  }

  .brand-link{ font-size: 1.35rem; }

}



/* Initial state: hidden & lifted slightly */

.offcanvas .offcanvas-menu li{

  opacity: 0;

  transform: translateY(-8px);

}



/* Animate in when drawer is open */

.offcanvas[aria-hidden="false"] .offcanvas-menu li{

  animation: ocItemIn .34s cubic-bezier(.2,.7,.2,1) both;

}



/* Little left/right shuffle for life */

.offcanvas[aria-hidden="false"] .offcanvas-menu li:nth-child(odd){ animation-name: ocItemInL; }

.offcanvas[aria-hidden="false"] .offcanvas-menu li:nth-child(even){ animation-name: ocItemInR; }



/* Stagger delays (adjust spacing by changing each delay) */

.offcanvas[aria-hidden="false"] .offcanvas-menu li:nth-child(1){ animation-delay: 80ms; }

.offcanvas[aria-hidden="false"] .offcanvas-menu li:nth-child(2){ animation-delay: 160ms; }

.offcanvas[aria-hidden="false"] .offcanvas-menu li:nth-child(3){ animation-delay:240ms; }

.offcanvas[aria-hidden="false"] .offcanvas-menu li:nth-child(4){ animation-delay:320ms; }

.offcanvas[aria-hidden="false"] .offcanvas-menu li:nth-child(5){ animation-delay:400ms; }

.offcanvas[aria-hidden="false"] .offcanvas-menu li:nth-child(6){ animation-delay:480ms; }

.offcanvas[aria-hidden="false"] .offcanvas-menu li:nth-child(7){ animation-delay:560ms; }

/* add more nth-child lines if you have more items */



/* Reset when closed so it replays next open */

.offcanvas[aria-hidden="true"] .offcanvas-menu li{

  opacity: 0;

  transform: translateY(-8px);

  animation: none;

}



/* Keyframes */

@keyframes ocItemIn   { from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} }

@keyframes ocItemInL  { from{opacity:0; transform:translate(-6px,-8px)} to{opacity:1; transform:none} }

@keyframes ocItemInR  { from{opacity:0; transform:translate( 6px,-8px)} to{opacity:1; transform:none} }



/* Respect reduced motion */

@media (prefers-reduced-motion: reduce){

  .offcanvas .offcanvas-menu li,

  .offcanvas[aria-hidden="false"] .offcanvas-menu li{

    animation: none !important;

    opacity: 1;

    transform: none;

  }

}



/* Remove the blue tap highlight on gallery thumbs */

.thumbs .swiper-slide,

.thumbs .swiper-slide img {

  -webkit-tap-highlight-color: transparent;  /* iOS/Android */

}



/* 404 page centring */

.error-404 {

  display: flex;

  align-items: center;       /* vertical */

  justify-content: center;   /* horizontal */

  text-align: center;

  min-height: 60vh;          /* adjust if you want it taller/shorter */

}



.error-404__inner {

  max-width: 640px;

  margin: 0 auto;

}