/* === Global hard reset so nothing goes off-screen === */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;              /* kill sideways scroll */
}

/* Media is responsive by default */
img, video { max-width: 100%; height: auto; display: block; }

/* ===============================
   NAV + LOGO (header + drawer)
   =============================== */
.brand, .brand a, .logo, .logo a, .site-logo, .site-logo a { color:#111 !important; }/* NAV PATCH: removed legacy nav rule */
/* NAV PATCH: removed legacy nav rule */



/* ===============================
   HERO / H1 stacking fix
   =============================== */
/* If there’s a blur/gradient overlay, push it behind text */
.hero-blur-overlay,
.lead-card::before,
.lead-card::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Pull real text above everything */
.lead-card h1,
.lead-card p,
#hero-heading {
  position: relative;
  z-index: 2;
  /* ensure solid text, not gradient-clipped */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: #222 !important;               /* readable black */
}

/* ===============================
   MOBILE LAYOUT (≤768px)
   =============================== */
@media (max-width:768px){
  /* wider feel with safe gutters */
  .container{max-width:100%; padding-inline:16px}

  /* hero full-bleed without overflow tricks */
  .hero-wrap .container{padding-inline:0}
  .hero-grid{grid-template-columns:1fr !important; gap:14px}

  /* carousel & card stack: no negative-width hacks */
  .carousel-field, .card-stack, #cardStack{
    margin-left:0; margin-right:0;
    width:100% !important;
    max-width:100% !important;
  }

  /* CTAs go full width */
  .lead-ctas .btn{width:100%}

  /* booking aligned to viewport; no bleed */
  .booking-section .container{padding-inline:16px}
  .booking-section, .booking-card{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    overflow:visible !important;
  }
  .form-grid{display:block; width:100%}
  .form-row{width:100%}
}

/* Hide ALL carousel controls on phones (swipe-only) */
@media (max-width:768px){
  .carousel-controls,
  .carousel .controls,
  .carousel .nav,
  .card-stack .controls,
  .card-stack .nav,
  .lead-card .controls,
  .lead-card .dots,
  .lead-card .arrows,
  .carousel-dots,
  .carousel-prev, .carousel-next,
  .prevBtn, .nextBtn { display:none !important; }
}

/* Safety: any “section/card” can’t exceed viewport */
.section, .card, .booking-card { max-width: 100% !important; }
/* Wider content width matching your previous style */
.container{
  max-width: clamp(1000px, 92vw, 1400px);
  margin: 0 auto;
  padding: clamp(14px, 2vw, 24px);
}
/* --- Keep the Nav always visible and above content --- */
header.site{
  position: relative;           /* or sticky if you already use it */
  z-index: 1000;                /* make sure it's above sections */
}

/* --- Wide rail (we already set this) --- */
:root{ --rail-desktop: 860px; }         /* default */
body.rail-wide{ --rail-desktop: 1120px; }/* opt-in per page */

/* Containers that should match the rail (header + content) */
main .section > .container,
main > .container,
.page-header > .container,
.page-content > .container{
  width: min(100%, var(--rail-desktop)) !important;
  margin-inline: auto !important;
  padding-inline: 16px !important;
}

/* Ensure the sub-page header section clears the nav visually */
.page-header{
  margin-top: clamp(10px, 2vh, 22px);     /* space below the Nav */
}

/* Card shells stay full width of the container */
.page-header .header-card,
.page-content .content-card{
  width: 100%;
}

/* Optional: match home "welcome" spacing and look */
.page-header .header-card{
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  padding: clamp(16px, 2.2vw, 28px);
}
.page-content .content-card{
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.06);
  padding: clamp(14px, 2vw, 24px);
}
/* === Subpage scaffold (simple + non-sticky) === */
:root{
  --rail: 1120px;                /* shared width for subpages */
  --rose:#CD2C58; --accent:#E06B80; --blush:#FFE6D4;
}

.subpage .container{
  width: min(100%, var(--rail));
  margin: 0 auto;
  padding: 0 16px;
}

.subhero{                      /* the top descriptive section */
  position: static;            /* not sticky, not fixed */
  margin: 24px auto 26px;
}
.subhero .card{
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(0,0,0,.08);
  padding: clamp(16px, 2.2vw, 28px);
}
.subhero .eyebrow{
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  font-weight: 700;
  font-size: .9rem;
}
.subhero h1{
  margin: 6px 0 8px;
  font-weight: 800;
  color: var(--rose);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.subhero p{ color: rgba(0,0,0,.65); margin: 0 0 14px; }

.subhero .cta-row{
  display: flex; gap: 12px; flex-wrap: wrap;
}
.btn{ display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:.85rem 1.35rem; font-weight:700; text-decoration:none; transition:.2s ease;
}
.btn-rose{
  background: linear-gradient(90deg, var(--rose), var(--accent));
  color:#fff; box-shadow:0 8px 22px rgba(205,44,88,.28);
}
.btn-rose:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(205,44,88,.36); }
.btn-ghost{
  border:2px solid var(--rose); color:var(--rose); background:transparent;
}
.btn-ghost:hover{ background: var(--blush); transform: translateY(-2px); }

.section-content{ margin: 6px auto 40px; }
.section-content .card{
  border-radius: 22px; background:#fff; padding: clamp(14px,2vw,24px);
  box-shadow: 0 12px 32px rgba(0,0,0,.06);
}

/* Simple menu grid */
.menu-grid{
  display:grid; gap:20px;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
}
.menu-grid figure{
  margin:0; background:#fff; border-radius:18px; overflow:hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.08); transition:.25s ease;
}
.menu-grid figure:hover{ transform:translateY(-3px); box-shadow:0 18px 46px rgba(0,0,0,.16); }
.menu-grid img{ display:block; width:100%; height:auto; object-fit:cover; }
.menu-grid figcaption{ text-align:center; color:rgba(0,0,0,.55); font-size:.9rem; padding:10px 0 12px; }
/* -------- Pretty Form Kit (shared by Book + Contact) -------- */
.form {
  display: grid;
  gap: 16px;
}
.form.two-col {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 860px) { .form.two-col { grid-template-columns: 1fr; } }

.field {
  display: grid;
  gap: 8px;
}
.field label {
  font-weight: 700;
  color: #7a0f2b;
  letter-spacing: .2px;
}
.input, .select, .textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(205,44,88,.20);
  padding: .9rem 1rem;
  background: linear-gradient(180deg, #FFE6D4, #fff);
  outline: none;
  font: inherit;
  color: #2b2b2b;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: #CD2C58;
  box-shadow: 0 0 0 3px rgba(205,44,88,.18);
}
.help {
  color: rgba(0,0,0,.55);
  font-size: .9rem;
}

/* Card extras */
.card.split {
  display: grid;
  grid-template-columns: 1.3fr .9fr;
  gap: 18px;
}
@media (max-width: 980px){ .card.split { grid-template-columns: 1fr; } }

.card .aside {
  display: grid;
  gap: 18px;
}

/* Map wrapper */
.map-frame {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  border: 1px solid rgba(205,44,88,.15);
}

/* Accent headings in cards */
.card h3, .card h4 {
  margin: 0 0 8px 0;
  color: #CD2C58;
  font-weight: 800;
}

/* Buttons (keep your palette) */
.btn { cursor: pointer; }
.btn.block { width: 100%; justify-content: center; }
/* === Vibey Form Kit (scoped, keeps layout intact) === */
:root { --rose:#CD2C58; --accent:#E06B80; --peach:#FFC69D; --blush:#FFE6D4; }

.vibe-card{background:#fff;border-radius:22px;box-shadow:0 14px 38px rgba(0,0,0,.08);padding:clamp(16px,2.2vw,28px);}
.vibe-title{margin:0 0 8px 0;color:var(--rose);font-weight:800}
.vibe-help{color:rgba(0,0,0,.6);margin:0 0 14px 0}

.vibe-form{display:grid;gap:14px}
.vibe-form.two{grid-template-columns:1fr 1fr}
@media (max-width:900px){.vibe-form.two{grid-template-columns:1fr}}

.v-field{display:grid;gap:8px}
.v-label{font-weight:700;color:#7a0f2b;letter-spacing:.2px}
.v-input,.v-select,.v-textarea{
  width:100%;border-radius:14px;border:1px solid rgba(205,44,88,.22);
  padding:.95rem 1rem;background:linear-gradient(180deg,var(--blush),#fff);
  outline:none;font:inherit;color:#2b2b2b;transition:box-shadow .2s,border-color .2s;
}
.v-input:focus,.v-select:focus,.v-textarea:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(205,44,88,.18)}

.v-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.v-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  padding:.9rem 1.35rem;font-weight:800;text-decoration:none;transition:.2s;cursor:pointer}
.v-btn.rose{background:linear-gradient(90deg,var(--rose),var(--accent));color:#fff;box-shadow:0 8px 22px rgba(205,44,88,.26)}
.v-btn.rose:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(205,44,88,.34)}
.v-btn.ghost{border:2px solid var(--rose);color:var(--rose);background:transparent}
.v-btn.ghost:hover{background:var(--blush);transform:translateY(-2px)}
.v-btn.block{width:100%}

.v-split{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
@media (max-width:980px){.v-split{grid-template-columns:1fr}}

.map-card .map-frame{border-radius:16px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.10);
  border:1px solid rgba(205,44,88,.15)}
.badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;background:rgba(205,44,88,.1);color:var(--rose);font-weight:700;font-size:.85rem}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(205,44,88,.25),transparent);margin:10px 0}

/* Scope to this section for specificity */
#booking .book-grid{
  display:grid;
  grid-template-columns: 1fr;      /* stack on mobile */
  gap: 2rem;
  align-items: stretch;
}

/* Desktop/tablet: two columns */
@media (min-width: 900px){
  #booking .book-grid{
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row dense;     /* keeps items tight and on same row */
  }

  /* Booking spans the full width (row 1) */
  #booking .book-grid .booking{
    grid-column: 1 / -1;
  }

  /* Map + info sit side-by-side on row 2 */
  #booking .book-grid .map,
  #booking .book-grid .info{
    grid-column: auto;             /* default placement */
    height: 100%;
  }
}

/* Ensure both cards match the white style + equal height feel */
#booking .book-grid > .block-card{
  background:#fff;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:1.5rem 1.75rem;
  display:flex;
  flex-direction:column;
}

/* Map iframe stays tidy */
#booking .map-embed{ margin-top:.75rem; border-radius:14px; overflow:hidden; }
#booking .map-embed iframe{ width:100%; aspect-ratio:16/9; border:0; }
/* Removed invalid <style> tag */
  /* ——— FORCE LAYOUT FOR BOOKING SECTION ——— */
  #booking .container > .book-grid{
    display:grid !important;
    grid-template-columns: 1fr !important;   /* mobile: stack */
    gap: 2rem !important;
    align-items: stretch !important;
  }

  /* Ensure the three cards are direct children and full width */
  #booking .book-grid > .block-card{
    width:100% !important;
    background:#fff !important;
    border-radius:20px !important;
    box-shadow:0 10px 30px rgba(0,0,0,.08) !important;
    padding:1.5rem 1.75rem !important;
    display:flex !important;
    flex-direction:column !important;
    height:100% !important;
  }

  /* Desktop/tablet: 2 columns, booking spans both */
  @media (min-width: 900px){
    #booking .container > .book-grid{
      grid-template-columns: 1fr 1fr !important;
      grid-auto-flow: row dense !important;
    }
    /* Explicit placement with rows/cols to avoid reordering by other CSS */
    #booking .book-grid > .booking{
      grid-column: 1 / -1 !important;  /* full-width row 1 */
      grid-row: 1 !important;
    }
    #booking .book-grid > .map{
      grid-column: 1 / 2 !important;   /* left on row 2 */
      grid-row: 2 !important;
    }
    #booking .book-grid > .info{
      grid-column: 2 / 3 !important;   /* right on row 2 */
      grid-row: 2 !important;
    }
  }

  /* Map iframe tidy */
  #booking .map-embed{ margin-top:.75rem !important; border-radius:14px !important; overflow:hidden !important; }
  #booking .map-embed iframe{ width:100% !important; aspect-ratio:16/9 !important; border:0 !important; }

/* ===== BOOK GRID: exact placement (booking full-width, then map + info) ===== */
.book-map .book-grid{
  display: grid;
  gap: clamp(20px, 3vw, 28px);
}

/* Desktop layout */
@media (min-width: 900px){
  .book-map .book-grid{
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "booking booking"
      "map     info";
    align-items: stretch;
  }
  .book-map .booking{ grid-area: booking; }
  .book-map .map    { grid-area: map;     }
  .book-map .info   { grid-area: info;    }
}

/* Make the two lower cards equal height + same white look */
.book-map .map.block-card,
.book-map .info.block-card{
  background:#fff;
  border-radius:20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 1.5rem 1.75rem;
  display:flex;
  flex-direction:column;
  min-height: 340px; /* feel free to tweak */
}

/* Map iframe fills its card */
.book-map .map .map-embed{ margin-top:.75rem; border-radius:14px; overflow:hidden; }
.book-map .map .map-embed iframe{ width:100%; aspect-ratio:16/9; border:0; }

/* Mobile: simple stack (already good, just ensure no weirdness) */
@media (max-width: 899px){
  .book-map .book-grid{ grid-template-columns: 1fr !important; grid-template-areas: none; }
}

/* === FULL-WIDTH MAP EMBED (no inner white margin) === */
.book-map .map.block-card {
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important; /* remove inner white */
  box-shadow: none !important;
}

/* Map header area now becomes its own bar inside the section */
.book-map .map.block-card h2 {
  background: #fff;
  color: var(--rose, #CD2C58);
  font-weight: 600;
  font-size: 1.4rem;
  padding: 1.25rem 1.75rem;
  margin: 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}


.book-map .map-embed iframe {
  width: 100%;
  height: 420px; /* adjust as needed */
  border: 0;
  display: block;
}

/* Remove bottom muted text background, make it float on background */
.book-map .location-info {
  padding: 1rem 1.5rem;
  background: #fff;
  border-radius: 0 0 20px 20px;
  font-size: 0.95rem;
  color: #555;
  margin-top: -5px;
}

/* ===== FULL-BLEED GOOGLE MAP (no inner white) ===== */

/* Strip padding/margins and let the iframe fill the card */
.book-map .map.block-card{
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: transparent !important; /* no inner white */
  box-shadow: none !important;        /* card chrome handled by outer wrapper if needed */
}

/* Kill any previous margins on the embed wrapper */
.book-map .map.block-card .map-embed{
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  height: min(60vh, 520px) !important; /* adjust height if you like */
  display: block !important;
}

/* Iframe fills the wrapper completely */
.book-map .map.block-card .map-embed iframe{
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}



/* Put the title over the map as a small pill (no white bar) */
.book-map .map.block-card h2{
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: .45rem .9rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--rose, #CD2C58) !important;
  background: rgba(255,255,255,.92) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  z-index: 2 !important;
}

/* If any earlier CSS added a top margin—neutralize it */
.book-map .map-embed,
.map-embed{
  margin-top: 0 !important;
}

/* ====== ABOUT PAGE VIBES — visual-only, no layout changes ====== */
/* brand helpers */
:root{
  --rose:#CD2C58;   /* primary */
  --peach:#E06B80;  /* mid */
  --apricot:#FFC69D;
  --cream:#FFE6D4;
  --ink:rgba(20,20,20,.85);
}

/* Hero: soft gradient glow + subtle grain */
.hero-about{
  position: relative;
  background: radial-gradient(80rem 40rem at 10% -10%, rgba(255,198,157,.35), transparent 60%),
              radial-gradient(70rem 36rem at 110% -15%, rgba(224,107,128,.22), transparent 60%);
  overflow: hidden;
}
.hero-about::after{
  content:"";
  position:absolute; inset:-2px;
  background-image: radial-gradient(1px 1px at 20% 30%, rgba(0,0,0,.05) 40%, transparent 41%),
                    radial-gradient(1px 1px at 70% 60%, rgba(0,0,0,.05) 40%, transparent 41%);
  background-size: 12px 12px, 16px 16px;
  opacity:.18; pointer-events:none;
}

.hero-about .header-card{
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.92));
  border-radius: 20px;
  box-shadow: 0 20px 55px rgba(205,44,88,.10);
}

/* Gradient headline + tidy copy */
.hero-about .header-card h1{
  background: linear-gradient(90deg, var(--rose), var(--peach));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing:.2px;
}
.hero-about .header-card p{
  color: rgba(0,0,0,.72);
  line-height: 1.7;
}

/* Content card polish */
.about-copy{
  --card: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98));
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.08);
  color: var(--ink);
}

/* Section headers get a rosy underline accent */
.about-copy h2{
  position: relative;
  font-weight: 800;
  letter-spacing:.2px;
  margin: 1.1rem 0 .75rem;
}
.about-copy h2::after{
  content:"";
  position:absolute; left:0; bottom:-6px;
  width: 72px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--rose), var(--apricot));
  box-shadow: 0 4px 16px rgba(205,44,88,.28);
}

/* Body text rhythm */
.about-copy p{
  font-size: clamp(1rem, .98rem + .2vw, 1.08rem);
  line-height: 1.75;
  color: rgba(0,0,0,.8);
}

/* Friendly bullet list with olive-dot vibes */
.about-copy .nice-list{
  margin: .75rem 0 1.25rem;
  padding: 0;
  list-style: none;
  display: grid; gap: .55rem;
}
.about-copy .nice-list li{
  position: relative;
  padding-left: 1.35rem;
}
.about-copy .nice-list li::before{
  content:"";
  position:absolute; left:0; top:.45rem;
  width:.55rem; height:.55rem; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #6e8b4e 0%, #476634 60%, #2e4a22 100%);
  box-shadow: 0 0 0 2px rgba(110,139,78,.15);
}

/* Stats: pill cards that glow lightly */
.about-copy .stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .9rem;
  margin-bottom: .8rem;
}
.about-copy .stat{
  position: relative;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  padding: 1rem .9rem;
  text-align: center;
  overflow:hidden;
}
.about-copy .stat::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,198,157,.22), rgba(224,107,128,.18));
  opacity:.18; pointer-events:none;
}
.about-copy .stat .num{
  font-weight: 900;
  font-size: clamp(1.15rem, .9rem + 1.1vw, 1.7rem);
  letter-spacing:.3px;
  color:#1b1b1b;
}
.about-copy .stat .num span{ font-size:.8em; font-weight:800; opacity:.85; }
.about-copy .stat .label{
  margin-top:.2rem; font-size:.93rem; opacity:.75;
}

/* CTA row — micro hover lift */
.about-copy .cta-row.center .btn{
  transform: translateY(0); transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 24px rgba(205,44,88,.12);
}
.about-copy .cta-row.center .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(205,44,88,.18);
}

/* Soft entrance for the content card (no layout shift) */
@media (prefers-reduced-motion: no-preference){
  .about-copy{ animation: about-pop .35s ease-out both; }
  @keyframes about-pop{
    from{ opacity:0; transform: translateY(6px) scale(.995); }
    to{ opacity:1; transform: translateY(0) scale(1); }
  }
}

/* Mobile tweaks */
@media (max-width: 780px){
  .about-copy .stats{ grid-template-columns: 1fr 1fr; }
}

/* ===== Hero Gradient Heading (confirmed working) ===== */
.hero-gradient {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;

  /* The visible gradient */
  background-image: linear-gradient(
    90deg,
    #CD2C58 0%,
    #E06B80 40%,
    #FFC69D 85%,
    #FFE6D4 100%
  );
  background-size: 100%;
  background-repeat: repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback for Safari/Edge */
}

/* optional glow for subtle vibe */
.hero-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(224,107,128,0.15) 0%,
    rgba(255,198,157,0.1) 60%,
    transparent 100%
  );
  filter: blur(30px);
  pointer-events: none;
}

/* make sure parent allows pseudo element to sit correctly */
.lead-card {
  position: relative;
}

/* ---------- v9.5 mobile stacking (safe selectors only) ---------- */
@media (max-width: 768px) {

  /* Stack known two-column wrappers */
  .book-grid,
  .hero-grid,
  .grid-2,
  .two-col,
  .cols-2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .book-grid > *,
  .hero-grid > *,
  .grid-2 > *,
  .two-col > *,
  .cols-2 > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Decorative left rail/sidenote used on sections */
  .left-rail,
  .side-rail,
  .sidenote,
  .section-rail {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
  }

  /* Cards/panels that must shrink to screen width */
  .card,
  .content-card,
  .panel,
  .hero-card,
  .box {
    max-width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* CTA rows become a simple vertical stack */
  .lead-ctas,
  .ctas,
  .cta-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .lead-ctas > *,
  .ctas > *,
  .cta-row > * {
    width: 100% !important;
  }

  /* Google Map full width on mobile */
  .map-embed iframe,
  iframe[src*="google.com/maps"] {
    display: block;
    width: 100% !important;
    height: 380px !important;
    border: 0;
  }
}
/* ---------- v9.7: booking/map mobile fixes (targeted) ---------- */

/* 0) Kill the overly-generic global that forces flex on the 2nd section */
@media (max-width: 899px) {
  /* The container inside the booking section must NOT be flex */
  section.book-map > .container {
    display: block !important;           /* cancels section:nth-of-type(2) > div */
  }
}

/* 1) Make the booking grid a single column on mobile */
@media (max-width: 899px) {
  #booking .book-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  /* Ensure each block-card spans the full width and flows vertically */
  #booking .book-grid > .block-card {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 2 !important;               /* content above any decoration */
  }
}

/* 2) Neutralise the decorative left rail in this section on mobile */
@media (max-width: 899px) {
  /* If the rail is a pseudo-element on the section */
  section.book-map::before {
    content: none !important;
    display: none !important;
  }

  /* If the rail is a real node with one of these names */
  #booking .left-rail,
  #booking .side-rail,
  #booking .sidenote,
  #booking .section-rail,
  #booking .label-vertical {
    display: none !important;
  }
}

/* 3) Map must be full-width and a reliable height on mobile */
@media (max-width: 899px) {
  #booking .map iframe,
  #booking .map-embed iframe,
  #booking iframe[src*="google.com/maps"] {
    display: block;
    width: 100% !important;
    height: 380px !important;
    border: 0;
  }
}
/* ---------- v9.8: unify form widths on Book + Contact ---------- */

/* 1) Shared form card width to match index’s content card */
#booking .book-form,
#booking .form,
#contact .contact-form,
#contact form,
.section--contact .contact-form,
.section--contact form {
  width: min(100%, 720px) !important;   /* match index’s visual width */
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* If the form sits inside a card/panel, make the card itself full-width and center the content */
#booking .block-card,
#contact .block-card,
#booking .content-card,
#contact .content-card {
  max-width: 100% !important;           /* card fills container like index */
  padding-left: clamp(16px, 3vw, 28px);
  padding-right: clamp(16px, 3vw, 28px);
}

/* 2) Inputs should use full line width inside the form */
#booking .book-form input,
#booking .book-form select,
#booking .book-form textarea,
#contact .contact-form input,
#contact .contact-form select,
#contact .contact-form textarea {
  width: 100% !important;
  box-sizing: border-box;
}

/* 3) Optional: keep two-column rows on desktop, stack on mobile */
.form-row,
#booking .form-row,
#contact .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 768px) {
  .form-row,
  #booking .form-row,
  #contact .form-row {
    grid-template-columns: 1fr;         /* stack on mobile for readability */
  }
}

/* Full-bleed everything AFTER the hero on Book + Contact (mobile only) */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; } /* prevent stray horizontal scroll */

  /* Make every following section span the viewport width */
  .page-book  #vibes ~ section,
  .page-contact  #vibes ~ section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;   /* zero the section gutter */
    padding-right: 0;
    border-radius: 0;  /* remove rounded card edge if inherited */
    box-shadow: none;  /* remove card shadow if inherited */
  }

  /* If those sections contain .container/.wrap, let content breathe a bit */
  .page-book  #vibes ~ section .container,
  .page-contact  #vibes ~ section .container,
  .page-book  #vibes ~ section .wrap,
  .page-contact  #vibes ~ section .wrap {
    max-width: 100%;
    padding-left: 16px;   /* adjust to 0 for true edge-to-edge content */
    padding-right: 16px;
  }

  /* Media inside becomes fluid */
  .page-book  #vibes ~ section img,
  .page-contact  #vibes ~ section img,
  .page-book  #vibes ~ section video,
  .page-contact  #vibes ~ section video,
  .page-book  #vibes ~ section iframe,
  .page-contact  #vibes ~ section iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* If your sections use a "card" inner element, flatten it on mobile */
  .page-book  #vibes ~ section .card,
  .page-contact  #vibes ~ section .card {
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
  }
}
/* === Gradient Heading Style (Global Reusable) === */
.gradient-text {
  background: linear-gradient(90deg, #CD2C58 0%, #E06B80 50%, #FFC69D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700; /* Bold */
  display: inline-block;
}

/* Reveal states (hard override) */
.reveal { 
  opacity: 0 !important; 
  transform: translateY(40px) !important; 
  transition: opacity .4s ease, transform .4s ease !important; 
  will-change: opacity, transform;
}
.reveal.in { 
  opacity: 1 !important; 
  transform: none !important; 
}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.in { transition: none !important; transform: none !important; opacity: 1 !important; }
}

html {
  font-size: 80%;
}

/* Reduce gap between hero and booking section */
#booking {
  margin-top: 2rem;
}

/* Optional: reduce bottom margin of hero if needed */
.hero-block {
  margin-bottom: 1rem;
}
/* Fix for Google Map iframe on mobile */
.map-embed {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Updated Map Embed CSS for consistent mobile height */
.map-embed {
  width: 100%;
  height: auto;
  max-width: 100%;
  position: relative;
}

.map-embed iframe {
  width: 100%;
  height: 300px;
  min-height: 300px;
  border: 0;
  display: block;
}

/* Optional mobile tuning */
@media (max-width: 480px) {
  .map-embed iframe {
    height: 280px;
  }
}

/* Final Fix for Google Maps on Mobile */
.map.block-card {
  padding: 0;
  overflow: visible;
}

.map.block-card .map-embed {
  width: 100%;
  height: auto;
  padding: 16px; /* Add visual spacing around the map */
}

.map.block-card iframe {
  width: 100%;
  height: 300px;
  min-height: 280px;
  display: block;
  border: none;
}

/* === Booking polish (bk-) — v1 === */
.page-content .container,
.bk-section .container { width:min(1050px,92vw); margin-inline:auto; }

.bk-section { padding:clamp(16px,3.5vw,48px) 0; }

.bk-card {
  background:rgba(255,255,255,.95);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:0 6px 28px rgba(0,0,0,.08);
  backdrop-filter:blur(6px);
  padding:clamp(16px,2.4vw,28px);
}

.bk-grid { display:grid; gap:clamp(14px,2vw,22px); }
.bk-grid-2 { grid-template-columns:1fr; }
@media (min-width:900px){ .bk-grid-2 { grid-template-columns:1fr 1fr; } }

/* Form */
.bk-form .field{ display:flex; flex-direction:column; gap:6px; }
.bk-form label{ font-weight:600; font-size:.95rem; }
.bk-input,.bk-select,.bk-textarea{
  width:100%; padding:14px 14px; border-radius:12px;
  border:1px solid rgba(0,0,0,.12); background:#fff; font:inherit;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.02);
}
.bk-input:focus,.bk-select:focus,.bk-textarea:focus{
  outline:2px solid #FFC69D; border-color:#E06B80;
}
.bk-textarea{ min-height:120px; resize:vertical; }
.bk-hint{ font-size:.9rem; color:rgba(0,0,0,.6); }

.bk-btn-row{ display:flex; gap:10px; flex-wrap:wrap; }
.bk-btn-primary{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:12px 16px; border-radius:999px; border:none;
  background:#CD2C58; color:#fff; font-weight:700;
  box-shadow:0 6px 18px rgba(205,44,88,.35);
  transition:transform .12s ease, box-shadow .12s ease;
}
.bk-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(205,44,88,.45); }
.bk-btn-ghost{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:12px 16px; border-radius:999px; border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.85); color:#CD2C58; font-weight:700;
}

/* Map */
.bk-map iframe{ width:100%; height:420px; border:0; border-radius:14px; display:block; }


/* === FORCE side-by-side equal halves for Contact + Map === */

/* Mobile/tablet: stack */
@media (max-width: 899.98px){
  .booking-section-22 .bs22-row-two{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(16px, 2.4vw, 24px) !important;
    align-items: stretch !important;
  }
}

/* Desktop: strict 50 / 50 split */
@media (min-width: 900px){
  .booking-section-22 .bs22-row-two{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: clamp(16px, 2.4vw, 24px) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  /* Make sure children don't carry fixed widths from other rules */
  .booking-section-22 .bs22-row-two > .bs22-card{
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Let both cards fill equal height; map grows to use remaining space */
  .booking-section-22 .bs22-contact,
  .booking-section-22 .bs22-map{
    display: flex !important;
    flex-direction: column !important;
  }
  .booking-section-22 .bs22-map-embed{
    flex: 1 1 auto !important;
    margin-top: 0.75rem !important;
  }
  .booking-section-22 .bs22-map-embed iframe{
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
  }
}
/* === Desktop-only: pull contact text up a bit === */
@media (min-width: 900px){
  /* Reduce the extra space reserved for the floating pill on the contact card */
  .booking-section-22 .bs22-contact{
    padding-top: 40px !important;   /* was ~52px */
  }

  /* Keep the map card as-is so the pills align visually */
  .booking-section-22 .bs22-map{
    padding-top: 52px;              /* unchanged, for balance with the pill */
  }

  /* Micro tweak: tuck the small intro line closer to the pill */
  .booking-section-22 .bs22-contact .bs22-sub{
    margin-top: -4px !important;
  }
}

/* === Desktop-only: pull Contact content up; keep Map filling === */
@media (min-width: 900px){
  /* Contact card: stack content at the top */
  .booking-section-22 .bs22-contact{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* <-- was space-between */
    gap: 10px; /* pleasant breathing room between subtitle and details */
    padding-top: 52px; /* room for the floating pill; adjust if needed */
  }

  /* Nudge the small intro line a touch closer to the pill */
  .booking-section-22 .bs22-contact .bs22-sub{
    margin-top: -2px !important;
  }

  /* Ensure the details block starts right away (no stray top margin) */
  .booking-section-22 .bs22-contact .bs22-info{
    margin-top: 2px !important;
  }

  /* Map card keeps its growth behavior so the iframe fills nicely */
  .booking-section-22 .bs22-map{
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  .booking-section-22 .bs22-map-embed{
    flex: 1 1 auto !important;
    margin-top: 0.75rem !important;
  }
  .booking-section-22 .bs22-map-embed iframe{
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border: 0 !important;
  }
}


/* === PATCH — Backdrop class unification === */
.nav-backdrop.active, .nav-backdrop.show { 
  display: block; 
  opacity: 1; 
  pointer-events: auto; 
}