:root {
  --bg: #0e0d0c; --bg-soft:#151816; --text:#f3f3f3; --muted:#bcbcbc;
  --accent:#e8d8a6; --card:#111114; --stroke:#2a2a2f;
}
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font:16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--accent); text-decoration:none; }
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 18px; }
.hero { position:relative; min-height:70vh; display:grid; place-items:center; text-align:center; }
.hero .overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.7)); }
.hero .inner { position:relative; z-index:1; }
.btn { display:inline-block; border:1px solid var(--accent); color:#111; background:var(--accent); }
.grid { display:grid; gap:0px; }
.cards-2 { grid-template-columns:1fr; }
.card { background:var(--card); border:0px solid var(--stroke); border-radius:0px; padding:40px; }
.eyebrow { margin-bottom:8px; }
h1,h2,h3 { margin:0 0 10px; line-height:1.2; }
h1 { font-size:clamp(2rem, 4vw, 3rem); }
h2 { font-size:clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size:1.2rem; }
.list { list-style:none; padding:0; margin:0; }
.list li { padding:6px 0; border-bottom:1px dashed var(--stroke); }
.kiko-slab { border-radius:0px; overflow:hidden; position:relative; }
.kiko-slab .copy { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; background:linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.7) 100%); }
.kiko-cta { flex-wrap:wrap; margin-top:10px; }
.menu-group { margin-bottom:28px; }
.menu-item { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:0px solid var(--stroke); }
.menu-item .desc { color:var(--muted); font-size:.95rem; }


@media (min-width: 760px){
  .cards-2 { grid-template-columns:repeat(2,1fr); }
  .hero { min-height:80vh; }
}

/* Full-bleed transparent header that frosts on scroll */
.has-transparent-header header.section,
.has-transparent-header .site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
  z-index: 50;
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}

/* Hero container */
.hero--swiper {
  position: relative;
  min-height: 100dvh;       /* Modern, avoids mobile URL bar jumps */
  height: 100svh;           /* Fallback */
  color: #fff;
  overflow: clip;
}

/* Swiper sizing */
.hero--swiper .swiper,
.hero--swiper .swiper-wrapper,
.hero--swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

/* Slides */
.hero--swiper .swiper-slide {
  position: relative;
}
.hero--swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  filter: saturate(.9);
}

/* Overlay: deep vignette + subtle gradient for legibility */
.hero--swiper .hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: normal;
  z-index: 1;
}

.hero--swiper .hero-overlay{
  background:
    radial-gradient(120% 120% at 50% 20%, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.45) 100%),
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.38) 100%);
}

/* Content */
.hero--swiper .inner {
  inset: 0;
  z-index: 2;
  padding: clamp(16px, 3vw, 40px);
}
.hero--swiper h1 {
  margin: 0 0 .35em 0;
  font-size: clamp(2rem, 4.5vw, 4.25rem);
  letter-spacing: .02em;
  line-height: 1.05;
}
.hero--swiper .eyebrow {
  opacity: .9;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: clamp(.8rem, 1.2vw, .95rem);
  margin-bottom: 1.25rem;
}

/* Buttons inherit your existing .btn styles; add subtle lift */
.hero--swiper .kiko-cta .btn {
  margin: .25rem .35rem;
  backdrop-filter: saturate(120%);
}
.hero--swiper .kiko-cta .ghost {
  border-color: rgba(255,255,255,.5);
}

/* Controls: minimalist & classy */
.hero--swiper .swiper-button-prev,
.hero--swiper .swiper-button-next {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset;
  transition: background .2s ease, transform .2s ease;
}
.hero--swiper .swiper-button-prev:hover,
.hero--swiper .swiper-button-next:hover {
  background: rgba(255,255,255,.16);
  transform: translateY(-1px);
}
.hero--swiper .swiper-button-prev:after,
.hero--swiper .swiper-button-next:after {
  font-size: 16px;
  color: #fff;
}

/* Pagination dots */
.hero--swiper .swiper-pagination-bullet {
  background: rgba(255,255,255,.55);
  opacity: 1;
}
.hero--swiper .swiper-pagination-bullet-active {
  background: #fff;
}

/* Ensure header nav is legible over slides */
.has-transparent-header header.section a,
.has-transparent-header .site-header a {
  color: #fff;
}

/* Transparent header over hero */
.has-transparent-header .site-header{
  transition:background .25s, backdrop-filter .25s, box-shadow .25s;
}

/* Reduce vertical padding for header (overrides .section default) */
.site-header.section{ padding:12px 0; }

/* Full-bleed brand (flush to viewport, not container) */
.brand--fullbleed{
  display:block; /* above background, below menus if needed */
}
.brand--fullbleed img{
  object-fit:contain;
}

/* Keep nav from overlapping the logo by adding left gutter */
.nav-row{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:64px;
  /* leave space for the logo at the left */
}


/* WP admin bar offsets when logged in */
body.admin-bar.has-transparent-header .site-header{ top:50px; left:100px }
@media (max-width:782px){
  body.admin-bar.has-transparent-header .site-header{ top:46px; }
}

/* ===== Fix for overlay/content outside Swiper ===== */

/* 1) Lock hero to a single viewport and create a positioning context */
.hero.hero--swiper{
  position: relative;
  margin: 0; padding: 0;
  height: 100vh; min-height: 100vh;
  overflow: hidden;
  color: #fff;
}
@supports (height: 100dvh){
  .hero.hero--swiper{ height: 100dvh; min-height: 100dvh; }
}

/* 2) Swiper fills the hero exactly (and stays behind content) */
.hero.hero--swiper > .swiper{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  z-index: 0;
}
.hero.hero--swiper .swiper-wrapper,
.hero.hero--swiper .swiper-slide{ height: 100%; }
.hero.hero--swiper .swiper-slide img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}

/* 3) Overlay + content are taken out of flow so they don't add height */
.hero.hero--swiper > .hero-overlay,
.hero.hero--swiper > .inner{
  position: absolute;
  inset: 0;
}
.hero.hero--swiper > .hero-overlay{
  z-index: 1; pointer-events: none;
  /* lighter overlay; tweak alphas to taste */
  background:
    linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.60) 100%),
    radial-gradient(120% 120% at 50% 20%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.55) 100%);
}
.hero.hero--swiper > .inner{
  z-index: 2;
  display: grid; place-items: center;
  text-align: center;
  padding: clamp(16px, 3vw, 40px);
}

/* 4) Position the H1 directly under the logo (optional) */
:root{
  --brand-h: clamp(48px, 10vh, 120px);  /* logo height */
  --brand-gap: -20px;                    /* space below logo */
  --brand-side: clamp(12px, 2vw, 30px); /* left inset for title */
  --admin-offset: 0px;
}
body.admin-bar{ --admin-offset: 32px; }
@media (max-width: 782px){ body.admin-bar{ --admin-offset: 46px; } }


.hero--swiper .hero-title{
  position: absolute;
  left: var(--brand-side);
  top: calc(var(--brand-h) + var(--brand-gap) + var(--admin-offset));
  margin: 0; text-align: left; line-height: 1.05;
}

/* Make sure header sits over the hero (translucent on scroll if you use that) */
.has-transparent-header .site-header{ position:absolute; top:0; left:0; right:0; background:transparent; z-index:50; }



h1.hero-title{
  font-size: clamp(1.25rem, 3.2vw, 2.4rem); /* smaller than your global h1 */
  font-weight: 400;                           /* try 300–400 if your font supports it */
  letter-spacing: .06em;                      /* keeps uppercase elegant */
  line-height: 1.1;
  text-transform: none;                       /* remove if you want it uppercase */
}

.hero--swiper .inner{ position: relative; }


/* ===== Our Locations section ===== */

/* Section with background image + same overlay as hero */
.section--locations{
  position: relative;
  background: #0c0c0e;
  background-image: var(--section-bg);
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}
.section--locations .section-overlay.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* same overlay as hero (light-ish; tweak alphas to taste) */
  background:
    linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.60) 100%),
    radial-gradient(120% 120% at 50% 20%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.55) 100%);
}
.section--locations .container{ position: relative; z-index: 1; }

.section--locations .section-title{
  margin: 0 0 18px;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: .04em;
}

/* Grid: 2 cards on desktop */
.locations-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px){
  .locations-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
}

/* Each location item contains the card and the hidden action bar */
.location-item{ position: relative; }

/* Card with 2/3 image, 1/3 name */
.location-card{     /* 2/3 media, 1/3 meta */
  transform: translateZ(0);
}
.location-card .media{ min-height: 0; }
.location-card .media img{ object-position: center;
}

@media (min-width: 1024px) {
  .locations-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}



.eyebrow{
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
}



/* Overlay (slightly lighter, reusable) */
:root{
  --ov-top: .18;     /* 0–1, top gradient */
  --ov-bottom: .44;  /* bottom gradient */
  --ov-mid: .22;     /* mid vignette */
  --ov-end: .48;     /* edge vignette */
}
.hero--swiper .hero-overlay,
.section--locations .section-overlay.hero-overlay{
  background:
    linear-gradient(180deg, rgb(0 0 0 / var(--ov-top)) 0%, rgb(0 0 0 / var(--ov-bottom)) 100%),
    radial-gradient(120% 120% at 50% 20%, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / var(--ov-mid)) 60%, rgb(0 0 0 / var(--ov-end)) 100%);
}


/* Section rhythm */
.section{ padding: clamp(86px, 8vw, 150px) 0; }

/* Card base */
.location-card{
  background: rgba(17,17,20,.35);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 2fr 1fr; /* 2/3 image, 1/3 title */
  min-height: 340px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
  backdrop-filter: blur(4px) saturate(112%);
}
.location-card .media{ position: relative; }
.location-card .media::after{ /* soft top vignette on images */
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 40%);
  pointer-events:none;
}
.location-card .media img{
  width:100%; max-height:240px; object-fit:cover; display:block;
}
.location-card .meta{
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.22);
  padding: 16px;
}
.location-card h3{ margin:0; font-size: clamp(1.1rem, 2vw, 1.4rem); letter-spacing:.06em; }

/* Hover/focus */
.location-item:hover .location-card,
.location-item:focus-within .location-card{
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 24px 50px rgba(0,0,0,.4);
  border-color: rgba(255,255,255,.14);
}

/* Action bar (appears beneath on hover) */
.location-actions{
  position:absolute; left:0; right:0; bottom:-12px;
  opacity:0; transform:translateY(8px);
  pointer-events:none; transition:opacity .25s, transform .25s;
}
.location-item:hover .location-actions,
.location-item:focus-within .location-actions{
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.actions-bar{
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px; padding:10px 12px;
  backdrop-filter: blur(6px);
}
.location-actions .btn{ margin:0 2px; }

/* ===== Kiko — Font Theme B: Caps Engraved ===== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&family=Cinzel:wght@500;600&display=swap');

/* Variables for easy tweaking */
:root{
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Cinzel", Georgia, serif;
  --display-case: uppercase;     /* all-caps for that engraved vibe */
  --display-track: .22em;        /* wider spacing */
  --display-weight: 500;         /* elegant, not shouty */
}

/* Body copy stays modern and readable */
html, body{
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: .01em;
}

/* Display styling applied where it matters */
h1, h2, h3,
.hero--swiper .hero-title,
.has-transparent-header .site-header nav a,
.eyebrow{
  font-family: var(--font-display);
  text-transform: var(--display-case);
  letter-spacing: var(--display-track);
  font-weight: var(--display-weight);
}

/* Hero title – refined and calm */
.hero--swiper h1.hero-title{
  line-height: 1.08;   /* a touch tighter than nav */
}

/* Eyebrow – small, airy, premium */
.eyebrow{
  font-size: .78rem;
  opacity: .9;
}

/* Header nav – understated */
.has-transparent-header .site-header nav a{
  font-size: .82rem;
  opacity: .88;
}
.has-transparent-header .site-header nav a:hover{ opacity: 1; }

/* Buttons stay slim to match the typography */
.btn{ padding: 9px 14px; border-radius: 999px; font-weight: 600; }

/* === Reset hero title/eyebrow to centered stack === */
.hero--swiper .inner{ place-items:center; }

.hero--swiper h1.hero-title{
  position: static;        /* undo absolute */
  left: auto; top: auto;   /* undo offsets */
  margin: 0 0 .4rem;       /* space above eyebrow */
  text-align: center;      /* undo left align */
  /* keep your sizing/weight if you like: */
  font-size: clamp(1.45rem, 3.2vw, 2.3rem);
  font-weight: 400;
  letter-spacing: .2em;    /* adjust to taste */
  text-transform: none;    /* or 'uppercase' if you prefer */
}

.hero--swiper .inner > .eyebrow{
  position: static;        /* undo absolute */
  transform: none;         /* remove translateY */
  display: block;          /* normal flow */
  margin: 0 0 1rem;        /* space before CTAs */
}

/* Reset old positioning and tighten H1 → eyebrow gap */
.hero--swiper .inner > h1.hero-title{
  text-align: center !important;   /* bring closer to eyebrow */
}

.hero--swiper .inner > p.eyebrow{
  position: static !important;     /* kill any previous translateY */    /* remove default top margin; keep small bottom before CTAs */
}

/* (optional) even tighter on large screens */
@media (min-width: 960px){
  .hero--swiper .inner > h1.hero-title{ margin-bottom: .15rem !important; }
  .hero--swiper .inner > p.eyebrow{ margin-bottom: .8rem !important; }
}

/* Offsets for the full-bleed logo */
:root{
  --brand-offset-x: 100px; /* in from left */
  --brand-offset-y: 30px;  /* down from top */
}

.brand--fullbleed{           /* pin to viewport */
  z-index: 60;
  line-height: 0;
}
.brand--fullbleed img{
  display: block;
  height: clamp(64px, 9vh, 96px);
  width: auto;
}


@media (max-width: 782px){
  body.admin-bar .brand--fullbleed{
    top: calc(var(--brand-offset-y) + 46px);
  }
}

/* (optional) keep nav from colliding with the logo */
.nav-row{
  padding-left: calc(var(--brand-offset-x) + clamp(120px, 20vw, 300px));
}



/* HERO: H1 above eyebrow */
:root{
  --hero-gap-title-eyebrow: .25rem;  /* space between H1 and eyebrow */
  --hero-gap-eyebrow-ctas: 1rem;     /* space between eyebrow and CTAs */
}

.hero--swiper .inner{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
}

/* H1 first */
.hero--swiper .inner > h1.hero-title{
  order: 0;
  position: static !important;
  left: auto !important; top: auto !important;
  margin: 0 0 var(--hero-gap-title-eyebrow) !important;
  line-height: 1.05;
}

/* Eyebrow under H1 */
.hero--swiper .inner > p.eyebrow{
  order: 1;
  margin: 0 0 var(--hero-gap-eyebrow-ctas) !important;
  transform: none !important;
}

/* CTAs follow */
.hero--swiper .inner > .kiko-cta{ order: 2; }

/* Lay out the row */
.site-header .nav-row{ /* change to space-between if you add a logo in here */
  gap: 16px;
}

/* Horizontal menu */
.site-header .primary-menu{
  display:flex;
  gap: 18px;            /* space between items */
  margin:0;
  padding:0;
  list-style:none;
}

/* Links */
.site-header .primary-menu > li > a{
  padding:8px 10px;
  text-decoration:none;
  line-height:1;
}

/* (Optional) simple hover/active affordance */
.site-header .primary-menu > li > a:hover,
.site-header .primary-menu > li.current-menu-item > a{
  opacity:.8; /* or use a border-bottom, colour change, etc. */
}

/* Keep submenus vertical (if you have them) */
.site-header .primary-menu .sub-menu{
  list-style:none;
  margin:0;
}

.site-header .primary-menu li:hover > .sub-menu{ display:block; }


/* === Compact header nav === */
:root{
  --nav-font: .64rem;   /* text size */
  --nav-gap: 15px;      /* space between items */
  --nav-xpad: 6px;      /* left/right padding per link */
  --nav-ls: .18em;      /* letter-spacing (caps look cleaner a bit tighter) */
}

/* Desktop / tablet tweaks only */
@media (min-width: 760px){
  .has-transparent-header .site-header nav a{
    font-size: var(--nav-font);
    letter-spacing: var(--nav-ls);
  }
  .site-header .primary-menu{
    gap: var(--nav-gap);
  }
  .site-header .primary-menu > li > a{
    padding: 6px var(--nav-xpad);
    line-height: 1;          /* keep it tight */
  }
}

/* (Optional) extra-compact on large screens */
@media (min-width: 1200px){
  :root{
    --nav-font: .60rem;
    --nav-gap: 18px;
    --nav-xpad: 5px;
  }
}

/* parent */
.site-header .primary-menu li { position: relative; }

/* sleek transparent dropdown (matches home bg) */
.site-header .primary-menu .sub-menu{
  position: absolute;
  top: calc(100% - 4px);
  left: 40px;
  transform: translateX(-2px);
  display: none;

  /* Fallback first, then modern colour-mix that uses --bg */ /* fallback matching var(--bg) */
  background: color-mix(in srgb, var(--bg) 62%, transparent);

  backdrop-filter: saturate(120%) blur(4px);
  -webkit-backdrop-filter: saturate(120%) blur(4px);

  padding: 4px;
  border-radius: 0;
  border: 0px solid rgba(255,255,255,.06);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  z-index: 120;
}


/* show on hover/focus */
.site-header .primary-menu li:hover > .sub-menu,
.site-header .primary-menu li:focus-within > .sub-menu{
  display: block;
}

/* items */
.site-header .primary-menu .sub-menu > li { margin: 0; }

/* links: small, tight leading */
.site-header .primary-menu .sub-menu > li > a{
  display: block;
  color: #fff;
  font-size: .74rem;
  line-height: .25;
  padding: 6px 10px;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 4px;
}

/* hover */
.site-header .primary-menu .sub-menu > li > a:hover{
  background: rgba(255,255,255,.30);
}

/* right edge guard */
.site-header .primary-menu > li:last-child > .sub-menu{ transform: translateX(2px);
}

/* Submenu link highlight: black on hover/focus/active */
.site-header .primary-menu .sub-menu > li > a:hover,
.site-header .primary-menu .sub-menu > li > a:focus,
.site-header .primary-menu .sub-menu > li > a:active{
  background: #00000000;              /* ← solid black highlight */
  color: #fff;                   /* keep contrast crisp */
  outline: none;                 /* remove default outline */
}

/* Optional: a subtle 1px inner stroke for definition on dark bg */
.site-header .primary-menu .sub-menu > li > a:hover{
  box-shadow: inset 0 0 0 0px rgba(255,255,255,.06);
}

/* How far to push the dropdown horizontally */
:root{
  --submenu-shift-x: -30px;  /* tweak to taste */
}

/* Ensure parents are positioning contexts */
.site-header .primary-menu > li{ position: relative; }

/* Shift dropdown to the right of the parent label */
.site-header .primary-menu > li > .sub-menu{
  left: var(--submenu-shift-x);
  right: auto;
  top: calc(100% - 4px);
}

/* If the parent is the last item, anchor from the right so it doesn't fall off-screen */
.site-header .primary-menu > li:last-child > .sub-menu{
  left: auto;
  right: var(--submenu-shift-x);
}

/* Optional: a subtle arrow alignment if you use one later */
.site-header .primary-menu > li > .sub-menu::before{
  content:"";
  position:absolute;
  top:-6px; left: 12px;            /* keeps the caret under the parent label */
  width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:6px solid rgba(0,0,0,.62);
}

/* === Full-bleed header nav with 100px right inset === */
:root{
  --nav-inset-right: 100px;
}

/* Let the nav row ignore the .container max-width */
.site-header .nav-row{
  width: 100%;
  max-width: none;
  margin: 0;                 /* kill auto centring from .container */
  padding-right: var(--nav-inset-right);  /* right inset */
  /* keep your existing left padding to avoid the logo */
  /* padding-left is already defined in your CSS; leave it or tweak here if needed */
}

/* Ensure items hug the right edge neatly */
.site-header .nav-row{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Unstick the logo */
.brand--fullbleed{
  position: absolute !important;
  top: 0;
  left: 0;
}

/* Remove the admin-bar offsets that were only needed for fixed positioning */
body.admin-bar .brand--fullbleed{ top: 0; }



/* "+" button: white, transparent, hidden by default */
.kg-plus{
  right: 10px; bottom: 10px;

  /* look */                /* transparent white */

  /* hide by default */
}


/* last resort */
.kg-tile .kg-plus{ pointer-events:none !important; }


/* Tile establishes positioning */
.kg-tile{ position: relative; overflow: hidden; }

/* Centred "+" badge (hidden by default) */
.kg-plus{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.9);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;

  /* white + transparent look */
  color: #fff !important; 
  background: rgba(255,255,255,.10)!important;
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  box-shadow: 0 8px 24px rgba(0,0,0,.45),
              inset 0 0 0 1px rgba(255,255,255,.06);

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

/* Render the plus if you're not using an SVG/icon */
.kg-plus::before{
  content:"+";
  font-size: 18px;
  line-height: 1;
}

/* Show on hover/focus (accessible) */
.kg-tile:hover .kg-plus,
.kg-tile:focus-within .kg-plus{
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

/* (Optional) respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .kg-plus{ transition: none; }
}

.kg-tile .kg-plus{ opacity:0 !important; }
.kg-tile:hover .kg-plus,
.kg-tile:focus-within .kg-plus{ opacity:1 !important; }

:root{ --gallery-drop: 140px; }

/* --- LOWER THE WHOLE GALLERY AREA (title + grid) --- */
.kiko-gallery{
  /* how much extra space to add on top */
  --gallery-drop: 140px; /* tweak to taste */
  position: relative;
}
.kiko-gallery::before{
  content:"";
  display:block;
  height: var(--gallery-drop);
}

@media (min-width:760px){
  .site-header .primary-menu > li.has-divider-before{
    position: relative;
    padding-left: 14px;     /* space after the line */
    margin-left: 6px;       /* tiny nudge */
  }
  .site-header .primary-menu > li.has-divider-before::before{
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 1.1em;          /* line height matches text */
    background: rgba(255,255,255,.38);  /* white + transparent */
  }
}

.kiko-loc{ background:var(--bg); color:var(--text); font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial }
.kiko-loc .container{ max-width:1200px; margin:0 auto; padding:0 20px }



/* HERO */
.kiko-hero{ position:relative; min-height:80vh; display:grid; place-items:center; overflow:hidden }
.kiko-hero img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.92) }
.kiko-hero .veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 120% at 50% 25%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.78) 100%);
}
.kiko-hero .copy{ position:relative; z-index:1; text-align:center; padding:40px }
.kiko-hero .eyebrow{ letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.85); font-size:.82rem; margin:0 0 .4rem }
.kiko-hero h1{
  margin:0 0 .7rem;
  font-family:"Cinzel", Georgia, serif; letter-spacing:.22em; text-transform:uppercase;
  font-weight:400; font-size:clamp(1.25rem,3.2vw,2.4rem);
}

/* Buttons reuse your system but with tokens */
.kiko-cta{ display:flex; gap:12px; justify-content:center }
.kiko-cta .btn{
  display:inline-block; padding:10px 16px; border-radius:999px;
  border:1px solid var(--accent); background:var(--accent); color:#111; font-weight:600;
}
.kiko-cta .btn.ghost{ background:transparent; color:var(--accent); border-color:var(--accent) }

/* Section rhythm */
.kiko-loc .section{ padding:clamp(70px,8vw,130px) 0 }

/* INTRO */
.kiko-intro .lead{ max-width:760px; margin:0 auto }
.kiko-intro h2{
  font-family:"Cinzel", serif; letter-spacing:.2em; text-transform:uppercase;
  font-size:clamp(1.2rem,2.4vw,1.8rem); margin:0 0 .7rem; color:var(--text);
}
.kiko-intro p{ color:var(--muted) }

/* FEATURE STRIPS */
.kiko-feature{ position:relative; isolation:isolate; margin:60px 0; border-top:1px solid var(--stroke) }
.kiko-feature .grid{ display:grid; gap:24px }
.kiko-feature .media{ position:relative; border:0px solid rgba(255,255,255,.08); background:var(--card) }
.kiko-feature .media img{ position:absolute; inset:0; width:100%; height:100%;object-fit:cover; filter:saturate(.92) }

.kiko-feature h3{
  font-family:"Cinzel", serif; letter-spacing:.18em; text-transform:uppercase;
  font-size:1rem; margin:0 0 .45rem; color:var(--accent);
}
.kiko-feature p{ color:var(--text) }
.kiko-feature .tag{
  display:inline-block; padding:6px 10px; border:1px solid var(--stroke); border-radius:999px;
  letter-spacing:.14em; text-transform:uppercase; font-size:.68rem; color:var(--muted); margin-bottom:.6rem;
}
@media (min-width:920px){
  .kiko-feature .grid{ grid-template-columns:5fr 4fr }
  .kiko-feature.alt .grid{ grid-template-columns:4fr 5fr }
}

/* BOOKING */
.kiko-book{ background:var(--bg-soft); border-top:1px solid var(--stroke) }
.kiko-book h2{
  font-family:"Cinzel", serif; letter-spacing:.2em; text-transform:uppercase;
  font-size:1rem; margin:0 0 .9rem; color:var(--accent);
}
.kiko-book .widget{ background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px; overflow:hidden }

/* FIND US */
.kiko-find .grid{ display:grid; gap:20px }
@media (min-width:900px){ .kiko-find .grid{ grid-template-columns:1fr 1fr } }
.kiko-find h3{
  font-family:"Cinzel", serif; letter-spacing:.18em; text-transform:uppercase;
  font-size:1rem; margin:0 0 .5rem; color:var(--accent);
}
.kiko-find .map iframe{ width:100%; height:340px; border:0 }

/* Tiny footer spacer */
.kiko-tail{ height:30px }

/* --- Make feature images start the same distance from the top --- */
:root{
  --feature-top-gap: clamp(40px, 6vw, 72px); /* space from previous section */
  --feature-media-min: 420px;               /* consistent media height floor */
  --feature-media-ratio: 3 / 2;             /* optional: enforce shape */
}

.kiko-feature{
  padding-top: var(--feature-top-gap);
  margin-top: 0;                /* avoid compounding with any margins */
}

/* Both columns align from the top (no vertical centring) */
.kiko-feature .grid{
  align-items: start;
}

/* Normalise media block */
.kiko-feature .media{
  margin-top: 0;
  min-height: var(--feature-media-min);
  aspect-ratio: var(--feature-media-ratio); /* remove if you prefer auto height */
  display: block;
}

/* Ensure copy doesn't float vertically */
.kiko-feature .copy{
  align-self: start;    /* was center */
  margin-top: 0;
  width:100%;
}

/* If you keep the alt layout, still align from the top */
.kiko-feature.alt .grid{
  align-items: start;
}

/* ===== Opening Times (matches site tokens) ===== */
.kiko-hours{
  background: var(--bg-soft);
  border-top: 1px solid var(--stroke);
}

.kiko-hours .hours-title{
  margin: 0 0 1rem;
  font-family: "Cinzel", Georgia, serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--accent);
}

/* Grid of rows */
.kiko-hours .hours-grid{
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: var(--card);
  padding: 12px;
}

.kiko-hours .hours-row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px dashed var(--stroke);
}
.kiko-hours .hours-row:last-child{ border-bottom: 0; }

.kiko-hours .hours-day{
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--muted);
}

.kiko-hours .hours-time{
  font-size: .98rem;
  color: var(--text);
}
.kiko-hours .hours-time.is-closed{
  color: var(--muted);
  opacity: .8;
}

/* Footnote + CTA */
.kiko-hours .hours-note{
  color: var(--muted);
  margin: 12px 2px 0;
  font-size: .92rem;
}

.kiko-hours .hours-cta{
  margin-top: 14px;
}
.kiko-hours .hours-cta .btn{
  border-color: var(--accent);
  background: var(--accent);
  color: #111;
}
.kiko-hours .hours-cta .btn.ghost{
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

/* Larger screens: add gentle columns if desired */
@media (min-width: 760px){
  .kiko-hours .hours-grid{
    padding: 14px;
  }
}

/* ===== Kiko Image Menu ===== */
.kiko-image-menu{ background: var(--bg); color: var(--text); }

/* Hero */
.kiko-image-menu .kim-hero{
  position: relative; min-height: 56vh; display: grid; place-items: center; overflow: hidden;
}
.kiko-image-menu .kim-hero .bg{
  position: absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.92);
}
.kiko-image-menu .kim-hero .veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 120% at 50% 25%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.78) 100%);
}
.kiko-image-menu .kim-hero .inner{
  position: relative; z-index: 2; text-align: center; padding: clamp(16px,3vw,36px);
}
.kiko-image-menu .kim-hero .eyebrow{
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.86); font-size: .82rem; margin: 0 0 .4rem;
}
.kiko-image-menu .kim-hero h1{
  margin: 0 0 .4rem; font-family: "Cinzel", Georgia, serif; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}
.kiko-image-menu .kim-hero .lede{ color: var(--muted); max-width: 760px; margin: 0 auto; }

/* Section shell */
.kiko-image-menu .kim-section{ padding: clamp(70px, 8vw, 120px) 0; }

/* Category index chips */
.kiko-image-menu .kim-index{
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.kiko-image-menu .kim-chip{
  border-radius: 999px; padding: 8px 12px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--stroke); background: transparent; color: var(--text); cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.kiko-image-menu .kim-chip:hover{ background: rgba(255,255,255,.06); }
.kiko-image-menu .kim-chip.is-active{ border-color: var(--accent); color: var(--accent); }
.kiko-image-menu .kim-chip.ghost{ color: var(--muted); }

/* Frame with subtle gold edge */
.kiko-image-menu .kim-frame{
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 2px rgba(232,216,166,.12);
  background: var(--card);
  border-radius: 12px;
  padding: clamp(8px,1.6vw,14px);
}

/* Swiper */
.kiko-image-menu .kim-swiper{ width:100%; }
.kiko-image-menu .kim-swiper .swiper-slide{
  display:flex; align-items:center; justify-content:center; min-height: 60vh;
}

}
@media (min-width: 860px){
  .kiko-image-menu .kim-page{ padding-top: 130%; }
}
.kiko-image-menu .kim-page > img{ inset:0;
}
/* Gold frame illusion */
.kiko-image-menu .kim-page::before{ position:absolute; inset:10px;
  border: 1px solid var(--accent);
  box-shadow: inset 0 0 0 2px rgba(232,216,166,.18);
  pointer-events:none;
}

/* Small tag badges inside the image (top-left) */
.kiko-image-menu .kim-badges{
  position:absolute; left:14px; top:14px; display:flex; gap:6px; flex-wrap:wrap; z-index:2;
}
.kiko-image-menu .kim-badge{
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12);
  color:#fff; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 8px; border-radius:999px;
}

/* Controls */
.kiko-image-menu .kim-swiper .swiper-button-prev,
.kiko-image-menu .kim-swiper .swiper-button-next{
  width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.kiko-image-menu .kim-swiper .swiper-button-prev:after,
.kiko-image-menu .kim-swiper .swiper-button-next:after{ font-size: 16px; color: #fff; }
.kiko-image-menu .kim-swiper .swiper-pagination{ color: var(--muted); font-size: .9rem;
}

/* Footnote */
.kiko-image-menu .kim-note{ color: var(--muted); margin-top: 10px; }

/* Scope all to the menu slider wrapper */
.menu-slider,
.menu-slider .swiper,
.menu-slider .swiper-wrapper,
.menu-slider .swiper-slide{
  height: 100%;
}


.hero--swiper .swiper-slide img,
.kg-grid .kg-tile img { height:100%; object-fit:cover !important; }

/* Wrap your menu slider in: <section class="menu-slider">… */
.menu-slider { --menu-vpad: 100px; } /* room for header/pagination */

/* Kill fixed heights from other Swipers */
.menu-slider .swiper,
.menu-slider .swiper-wrapper,
.menu-slider .swiper-slide{
  height: auto !important;
}

/* Centre each slide and give viewport breathing room */
.menu-slider .swiper-slide{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(8px, 2vw, 24px);
  overflow: visible !important;       /* never crop */
}

/* The actual image: never crop, never stretch */
.menu-slider .swiper-slide img{
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 1200px);       /* match your site width */
  max-height: calc(100dvh - var(--menu-vpad)); /* fit on screen */
  object-fit: contain !important;     /* show full page */
  display: block;
}

/* If you’re using a frame, make sure it doesn’t clip */
.menu-slider .frame{
  padding: clamp(8px, 1.2vw, 16px);
  border: 1px solid rgba(232,216,166,.5);      /* gold */
  box-shadow: 0 0 0 2px rgba(232,216,166,.15) inset, 0 24px 60px rgba(0,0,0,.45);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(3px) saturate(115%);
  overflow: visible !important;
}

/* Make sure any global “cover” rule loses inside menu-slider */
.menu-slider :is(img, .swiper-zoom-container img){
  object-fit: contain !important;
}

/* Navigation/UI floating (doesn't change layout height) */
.menu-slider .swiper-button-prev,
.menu-slider .swiper-button-next{
  top: 50%; transform: translateY(-50%);
}
.menu-slider .swiper-pagination{
  position: absolute; bottom: 12px; left: 0; right: 0;
}

/* ===== Responsive header: hamburger + offcanvas ===== */

/* Hide hamburger on desktop, show on mobile */
.hamburger{
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  margin-left: 10px;
  width: 44px; height: 44px;
  display: none;                 /* default hidden */
  align-items: center; justify-content: center;
  z-index: 130;                  /* above header */
}
.hamburger-box{ position: relative; width: 26px; height: 18px; }
.hamburger-line{
  position: absolute; left: 0; right: 0;
  height: 2px; border-radius: 2px;
  background: #fff;              /* readable over transparent header */
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.hamburger .line-1{ top: 0; }
.hamburger .line-2{ top: 8px; }
.hamburger .line-3{ top: 16px; }

/* Morph to X when active */
.hamburger.is-active .line-1{ top: 8px; transform: rotate(45deg); }
.hamburger.is-active .line-2{ opacity: 0; }
.hamburger.is-active .line-3{ top: 8px; transform: rotate(-45deg); }

/* Offcanvas shell */
.offcanvas{
  position: fixed; inset: 0; z-index: 120;
  pointer-events: none;          /* disabled until open */
}
.offcanvas__scrim{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.offcanvas__inner{
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(88vw, 420px);
  background: rgba(17,17,20,.92);
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  box-shadow: -20px 0 60px rgba(0,0,0,.5);
  transform: translateX(102%);
  transition: transform .28s ease;
  padding: 18px 18px 24px;
  border-left: 1px solid var(--stroke);
  display: grid; grid-template-rows: auto 1fr auto;
}

/* Close button */
.offcanvas__close{
  appearance: none; border: 1px solid rgba(255,255,255,.35);
  background: transparent; color: #fff;
  border-radius: 999px; width: 36px; height: 36px;
  font-size: 20px; line-height: 1; cursor: pointer;
  justify-self: end;
}

/* Offcanvas menu list */
.offcanvas-menu{
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; gap: 2px;
}
.offcanvas-menu > li > a{
  display: block; padding: 12px 10px;
  color: #fff; text-decoration: none;
  border-radius: 8px;
}
.offcanvas-menu > li > a:hover{
  background: rgba(255,255,255,.08);
}

/* Footer CTA inside panel */
.offcanvas__footer{ padding-top: 10px; }

/* Open state */
body.nav-open{ overflow: hidden; } /* lock scroll */
body.nav-open .offcanvas{ pointer-events: auto; }
body.nav-open .offcanvas__scrim{ opacity: 1; pointer-events: auto; }
body.nav-open .offcanvas__inner{ transform: translateX(0); }

@media (max-width: 899.98px){
  /* Show hamburger on mobile */
  .hamburger{
    display: inline-flex;
  }

  /* Hide inline menu on mobile */
  .site-header .primary-menu{
    display: none;
  }

  /* Bring logo closer to the top-left on mobile */
  .brand--fullbleed{
    top: 10px !important;
  }

  /* Use a small side inset for the menu on mobile */
  :root{
    --nav-inset-right: 14px;   /* was 100px */
  }

  /* Remove big desktop left padding so things hug the sides more */
  .nav-row{
    padding-left: 14px;        /* small left gutter */
    justify-content: flex-end; /* keep menu to the right */
  }
}
/* Optional: adjust link colour over dark hero for transparent header */
.has-transparent-header .site-header a{ color: #fff; }


/* ===== Visit (Opening Times + Find Us) ===== */
.kiko-visit { padding: clamp(70px, 8vw, 130px) 0; }
.visit-grid {
  display: grid;
  gap: 22px;
  align-items: start;
}
@media (min-width: 900px){
  .visit-grid { grid-template-columns: 1fr 2fr; }
}

.visit-hours {
  padding: 18px;
}
.visit-hours .hours-title { margin: 0 0 .6rem; font-size: 1rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.hours-grid { display: grid; gap: 8px; margin-bottom: 10px; }
.hours-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--stroke);
}
.hours-row:last-child { border-bottom: 0; }
.hours-day { color: var(--muted); }
.hours-time.is-closed { opacity: .7; font-style: italic; }
.hours-note { color: var(--muted); font-size: .9rem; margin: 8px 0 14px; }
.hours-cta .btn { padding: 9px 14px; }

.visit-find .find-title {
  margin: 0 0 .6rem;
  font-size: 1rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.visit-find .address { color: var(--text); margin-bottom: 12px; }

.map-embed {
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16/10;        /* responsive height */
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Match the 'Our Story' background from home */
.kiko-visit{
  background: var(--bg-soft);   /* #151518 */
  border: 0;                    /* remove any stray borders */
}


/* Keep contrast on the times panel */
.visit-hours{
  background: var(--card);      /* #111114 */
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}

.kiko-gallery{ background: var(--bg); color: var(--text); }

/* Classy underline for nav links */
.site-header .primary-menu > li > a{
  position: relative;
  display: inline-block;   /* so the underline matches the text width */
  padding-bottom: 6px;     /* room for the underline */
}

/* The underline */
.site-header .primary-menu > li > a::after{
  content:"";
  position:absolute;
  left: 0; right: 0;
  bottom: 0;              /* sits just under the text */
  height: 1px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .26s ease;
  opacity: .95;
}

/* Show on hover/focus */
.site-header .primary-menu > li > a:hover::after,
.site-header .primary-menu > li > a:focus-visible::after{
  transform: scaleX(1);
}

/* Keep it on for current page/section */
.site-header .primary-menu > li.current-menu-item > a::after,
.site-header .primary-menu > li.current-menu-ancestor > a::after,
.site-header .primary_page_item > a::after,
.site-header .primary_page_parent > a::after{
  transform: scaleX(1);
}

/* Optional: soften non-active links a touch */
.has-transparent-header .site-header .primary-menu > li > a{
  opacity: .92;
}
.has-transparent-header .site-header .primary-menu > li.current-menu-item > a,
.has-transparent-header .site-header .primary-menu > li.current-menu-ancestor > a{
  opacity: 1;
}

/* (Optional) offcanvas menu: same underline, but a little tighter */
.offcanvas .offcanvas-menu > li > a{
  position: relative;
  padding-bottom: 6px;
}
.offcanvas .offcanvas-menu > li > a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .22s ease;
}
.offcanvas .offcanvas-menu > li > a:hover::after,
.offcanvas .offcanvas-menu > li > a:focus-visible::after,
.offcanvas .offcanvas-menu > li.current-menu-item > a::after,
.offcanvas .offcanvas-menu > li.current-menu-ancestor > a::after{
  transform: scaleX(1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-header .primary-menu > li > a::after,
  .offcanvas .offcanvas-menu > li > a::after{
    transition: none;
  }
}

/* === Show the whole image (no crop) inside the menu swiper === */

/* Let the slide size to its content */
.kiko-image-menu .kim-swiper,
.kiko-image-menu .kim-swiper .swiper-wrapper,
.kiko-image-menu .kim-swiper .swiper-slide{
  height: auto !important;
  min-height: 0;
}

/* Kill the forced poster aspect and make it a flexible container */
.kiko-image-menu .kim-page{
  position: relative;
  width: 100%;
  height: auto;              /* was padding-top trick */
  padding-top: 0 !important; /* remove the ratio */
  border: 0;                 /* optional: remove inner border if it pinches */
  background: transparent;   /* optional */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* The actual image: contain inside the viewport and frame width */
.kiko-image-menu .kim-page > img{
  position: static;          /* no absolute fill */
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 820px);                 /* adjust width cap */
  max-height: calc(100dvh - 180px);            /* fits on screen */
  object-fit: contain !important;
  object-position: center !important;
  display: block;
  filter: none;                                   /* optional: remove extra filtering */
}

/* Remove the inner gold frame that could make it feel cropped (optional) */
.kiko-image-menu .kim-page::before{ content: none; }

/* Keep the whole swiper narrower and centred */
.kiko-image-menu .kim-frame{ max-width: min(92vw, 1200px); margin: 0 auto; }
.kiko-image-menu .kim-swiper{ max-width: min(90vw, 820px); margin: 0 auto; padding-inline: 44px; }
.kiko-image-menu .kim-swiper .swiper-button-prev{ left: 8px; }
.kiko-image-menu .kim-swiper .swiper-button-next{ right: 8px; }

/* Make bullets/arrows float; they shouldn't add height */
.kiko-image-menu .kim-swiper .swiper-pagination{ position: absolute; bottom: 10px; left: 0; right: 0; }

/* Card now has 3 rows: image, title, actions */
.section--locations .location-card{
  display: grid;
  grid-template-rows: 2fr auto auto; /* media, meta, actions */
}

/* Actions live inside, always visible, centred */
.section--locations .location-card .location-actions{
  position: static;           /* normal flow inside the card */
  display: flex;
  justify-content: center;
  margin-top: 10px;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* Keep the pill look */
.section--locations .location-card .actions-bar{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 10px 12px;
  backdrop-filter: blur(6px);
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* Neutralise hover reveal rules from earlier */
.section--locations .location-item:hover .location-actions,
.section--locations .location-item:focus-within .location-actions{
  opacity: 1; transform: none; pointer-events: auto;
}

/* Since actions are inside, remove the old absolute styles */
.section--locations .location-item{ padding-bottom: 0; }

/* ==== Kiko Contact Page (uses global brand tokens) ==== */

.kiko-contact{
  background: var(--bg);
  color: var(--text);
}

/* Container spacing stays consistent with the rest of the site */
.kiko-contact .container{
  max-width: 1120px;
}

/* Heading strip */
.kiko-contact-header{
  margin-bottom: clamp(32px, 4vw, 48px);
}
.kiko-contact-header .eyebrow{
  font-size: 0.8rem;
  margin: 0 0 0.6rem;
}
.kiko-contact-header h1{
  margin: 0 0 0.5rem;
}
.kiko-contact-header .lede{
  max-width: 520px;
  font-size: 0.95rem;
  color: var(--muted);
}

/* Grid layout */
.kiko-contact-grid{
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(240px, 1fr);
  gap: clamp(40px, 6vw, 80px);
}

/* Blocks */
.kiko-contact-block{
  margin-bottom: 2rem;
}
.kiko-contact-block h2{
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.9rem;
}
.kiko-contact-block p{
  margin: 0 0 0.5rem;
}
.kiko-contact-block strong{
  color: var(--accent);
  font-weight: 500;
}

/* Hours & location text */
.kiko-hours-group{
  margin-bottom: 1.6rem;
}
.kiko-hours-group span.label{
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.kiko-hours-group p{
  white-space: pre-line;
}

/* Right column lists */
.kiko-contact-right a{
  color: var(--text);
  text-decoration: none;
}
.kiko-contact-right a:hover{
  color: var(--accent);
}
.kiko-contact-right .kiko-contact-block p{
  margin-bottom: 0.25rem;
}


.kiko-social-list a{
  font-size: 0.9rem;
}

/* Reservations button – uses your .btn language */
.kiko-res-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.8rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  text-decoration: none;
  margin-top: 1.4rem;
  transition: background 0.2s ease, color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
}
.kiko-res-button:hover{
  background: rgba(232,216,166,0.15);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

/* Map section */
.kiko-contact-map-section{
  padding: 0 0 clamp(40px, 6vw, 60px);
}
.kiko-contact-map{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 18px;
}
.kiko-contact-map-inner{
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,0.6);
  border: 1px solid var(--stroke);
}
.kiko-contact-map-inner iframe{
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
}

/* Responsive */
@media (max-width: 800px){
  .kiko-contact-grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (max-width: 520px){
  .kiko-contact-map-inner iframe{
    height: 280px;
  }
}

.offcanvas__inner{
  z-index: 2;   /* panel above scrim */
}

.offcanvas__scrim{
  z-index: 1;   /* under panel, but still clickable beyond it */
}

/* Mobile tidy for Location page */
@media (max-width: 767px){

  /* Make the hero feel like a single screen */
  .kiko-loc .kiko-hero{
    margin: 0;
    padding: 0;
    min-height: 100vh;
  }

  @supports (height: 100dvh){
    .kiko-loc .kiko-hero{
      min-height: 100dvh;
    }
  }

  /* Bring the intro up closer to the hero */
  .kiko-loc .kiko-intro.section{
    padding-top: 32px;
    padding-bottom: 56px;
  }

  /* Reduce big vertical gaps on mobile so it feels like one continuous page */
  .kiko-loc .kiko-feature{
    margin: 32px 0;
  }

  .kiko-loc .kiko-feature .media{
    min-height: 260px;   /* instead of 420px+ on tiny screens */
  }

  /* Visit section a bit tighter too */
  .kiko-loc .kiko-visit.section{
    padding-top: 48px;
    padding-bottom: 56px;
  }
}

@media (max-width: 899.98px){
  /* Tighten vertical spacing in the offcanvas nav */
  .offcanvas-menu{
    gap: 0; /* remove the extra gap between items */
  }


}

@media (max-width: 899.98px){
  .offcanvas-menu > li > a{
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* === Mobile tweaks: logo, burger + menu spacing === */
@media (max-width: 899.98px){

  /* 1. Logo + burger nearer the edges */
  .brand--fullbleed{
    left: 16px;              /* bring logo in from the very edge */
  }

  .site-header .nav-row{
    padding-left: 16px;      /* kill the huge left gutter on mobile */
    padding-right: 16px;     /* burger ~16px from the right */
  }

  /* 2. Tighter vertical spacing in the slide-out menu */
  .offcanvas nav ul,
  .offcanvas-menu{
    margin-top: 4px !important;
    gap: 0 !important;
  }

  .offcanvas nav ul li,
  .offcanvas-menu > li{
    margin: 0 !important;
  }

  .offcanvas nav ul li a,
  .offcanvas-menu > li > a{
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    line-height: 1.1 !important;  /* clamp the text itself */
  }
}

/* === Tighten offcanvas menu on mobile === */
@media (max-width: 899.98px){

  /* Turn the menu back into a normal block list */
  .offcanvas-menu{
    display: block !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
  }

  .offcanvas-menu > li{
    margin: 0 0 4px !important;    /* small gap between items */
  }

  .offcanvas-menu > li > a{
    display: block;
    padding: 2px 0 !important;     /* tiny vertical padding */
    line-height: 1.1 !important;   /* tight line-height */
  }

  /* Sub-items under LOCATIONS */
  .offcanvas-menu .sub-menu{
    margin: 2px 0 0 !important;
    padding-left: 14px;            /* slight indent */
  }
  .offcanvas-menu .sub-menu li{
    margin: 0 0 2px !important;
  }
  .offcanvas-menu .sub-menu li a{
    padding: 1px 0 !important;
    line-height: 1.1 !important;
    font-size: 0.8rem;
  }
}

/* Mobile: tighter card padding */
@media (max-width: 767px){
  .card{
    padding:20px;   /* or 10px 12px if you want a touch more sideways */
  }
}

/* Location actions: centre + wrap nicely */
.location-actions{
  display: flex;
  justify-content: center;
}

.actions-bar{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;              /* keep your spacing */
}

/* Make buttons wrap to 2 + 1 and still stay centred */
.actions-bar .btn{
  flex: 0 1 160px;       /* tweak 150px to control when they wrap */
  text-align: center;
}

/* SUBSITES ONLY (not main blog): HR above "About" in OFFCANVAS menu */
body:not(.blog-1) .offcanvas-menu > li.oc-about-divider {
  position: relative;
  margin-top: 14px;    /* space above About */
  padding-top: 14px;   /* room for the line inside the li */
}

body:not(.blog-1) .offcanvas-menu > li.oc-about-divider::before {
  content: "";
  position: absolute;
  left: -4px;          /* tiny bleed beyond text; tweak if needed */
  right: -4px;
  top: 0;
  height: 1px;
  background: rgba(255,255,255,.25); /* or var(--stroke) / var(--accent) */
}


/* Feature sections – full-section background images with dark overlay */
.kiko-feature--prep,
.kiko-feature--drinks,
.kiko-feature--room{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.kiko-feature--prep::before,
.kiko-feature--drinks::before,
.kiko-feature--room::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65); /* dark overlay */
  pointer-events: none;
}

/* Make sure content sits above the overlay */
.kiko-feature--prep .container,
.kiko-feature--drinks .container,
.kiko-feature--room .container{
  position: relative;
  z-index: 1;
}

/* Location – make feature backgrounds run full height */
.kiko-loc .kiko-feature{
  margin: 0;                                   /* no outside gap */
  padding: var(--feature-top-gap) 0;           /* vertical spacing INSIDE the bg */
  border-top: 1px solid var(--stroke);
}


/* Text column card over the background image */
.kiko-feature--prep .copy,
.kiko-feature--drinks .copy,
.kiko-feature--room .copy{
  background: var(--card);                         /* same feel as your .card */
  padding: 32px 30px;
  border-radius: 0px;                             /* change to 0 if you want it dead flat */
  border: 0px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
                           /* keeps it nicely narrow */
}

/* Visit – responsive button layout: 2 on top, 1 centred below */
.visit-hours .hours-cta{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* centre each row */
  gap: 10px;                 /* space between buttons */
}

.visit-hours .hours-cta .btn{
  text-align: center;
}

/* From small–medium upwards: aim for two per row */
@media (min-width: 520px){
  .visit-hours .hours-cta .btn{
    flex: 0 1 calc(50% - 8px);  /* 2 per row, with gap */
    max-width: 210px;
  }
}
/* --- Location hero spacing: kicker → H1 → tagline → buttons --- */

/* Reset hero eyebrows inside the hero copy only */
.kiko-hero .copy > p.eyebrow{
  margin: 0;
}

/* If there is a kicker eyebrow above the H1 */
.kiko-hero .copy > p.eyebrow:first-child{
  margin-bottom: .4rem;          /* small gap above title */
}

/* Title → tagline gap (same feel as home) */
.kiko-hero .copy > h1{
  margin: 0 0 .25rem;            /* H1 to tagline */
  line-height: 1.05;
}

/* Tagline eyebrow under H1 → CTAs */
.kiko-hero .copy > h1 + p.eyebrow{
  margin: 0 0 2.4rem;            /* ↑ this is the gap you care about */
}

/* Buttons immediately after the tagline gap */
.kiko-hero .copy > .kiko-cta{
  margin-top: 0;                 /* no extra gap on the nav itself */
}

/* === OFFCANVAS: clean vertical menu with nested subitems === */

/* === OFFCANVAS: clean vertical menu with extra spacing === */



/* Root list */
#offcanvasNav .offcanvas-menu {
  display: block;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  font-family: var(--font-display, "Cinzel", serif);
}

/* Top-level items */
#offcanvasNav .offcanvas-menu > li {
  display: block;              /* important after all: unset */
  margin: 24px 0 0 ;            /* spacing between main items */
}

#offcanvasNav .offcanvas-menu > li > a {
  padding: 6px 0;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
}

#offcanvasNav .offcanvas-menu > li > a:hover {
  color: var(--accent);
}

/* Submenu – directly under parent, indented */
#offcanvasNav .offcanvas-menu .sub-menu {
  display: block;              /* give it block flow again */
  list-style: none;
  margin: 8px 0 0;             /* small gap under parent */
  padding-left: 26px;          /* ← actual indent */
}

/* Submenu items */
#offcanvasNav .offcanvas-menu .sub-menu > li {
  display: block;
  margin: 0 0 24px;            /* spacing between child items */
}

#offcanvasNav .offcanvas-menu .sub-menu > li > a {
  display: block;
  padding: 2px 0;
  text-decoration: none;
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#offcanvasNav .offcanvas-menu .sub-menu > li > a:hover {
  color: var(--accent);
}

/* Offcanvas links: text-width underline */
#offcanvasNav .offcanvas-menu > li > a{
  display: inline-block;  /* instead of full-width block */
}



/* SUBSITES ONLY (not main/root blog): horizontal rule above "About" in offcanvas */
body:not(.blog-1) #offcanvasNav .offcanvas-menu > li.oc-about-divider {
  position: relative;
  margin-top: 54px;   /* space above the item */
  padding-top: 44px;  /* space between the rule and the label */
}

/* The actual line */
body:not(.blog-1) #offcanvasNav .offcanvas-menu > li.oc-about-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(255,255,255,.25); /* tweak strength */
}

/* 1. Kill the blue/grey tap highlight on mobile (iOS / Android) */
a,
button,
.btn {
  -webkit-tap-highlight-color: transparent;
}

/* 2. Normalise native button look (stops iOS adding its blue button style) */
button,
input[type="button"],
input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
}

/* 3. Remove the default blue focus outline and use a custom one for .btn */
a.btn,
.btn {
  outline: none;
}

a.btn:focus-visible,
.btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(232,216,166,.7); /* subtle gold focus ring */
}

/* Visit section: keep actions bar permanently visible */
.kiko-visit .location-actions{
  position: static;              /* no absolute positioning */
  display: flex;
  justify-content: center;
  margin-top: 16px;
  opacity: 1;                    /* always visible */
  transform: none;
  pointer-events: auto;
}

.kiko-visit .actions-bar{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 10px 12px;
  backdrop-filter: blur(6px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


/* === Buttons: subtle hover / active states === */

/* Shared transitions */
a.btn,
.btn {
  position: relative;
  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

/* Solid gold buttons */
.btn:not(.ghost) {
  background: var(--accent);
  color: #111;
  border-color: var(--accent);
}

.btn:not(.ghost):hover {
  /* fractionally brighter + tiny lift */
  background: color-mix(in srgb, var(--accent) 88%, #ffffff 12%);
  border-color: color-mix(in srgb, var(--accent) 92%, #ffffff 8%);
  
}

.btn:not(.ghost):active {
  /* “press down” feel */
  transform: translateY(0);
  
}



.btn.ghost:hover {
  /* soft gold wash + slightly brighter label */
  background: rgba(232,216,166,.12);
  color: #f5f5f5;
  border-color: color-mix(in srgb, var(--accent) 90%, #ffffff 10%);
  
}



/* Keep the custom focus ring you already set up */
a.btn:focus-visible,
.btn:focus-visible {
  outline: none;
  
}

/* FINAL OVERRIDE: ghost buttons = white → gold on hover */
.btn.ghost{
  background: transparent;
  color: #ffffff !important;                 /* white text */
  border-color: rgba(255,255,255,.75) !important;
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.btn.ghost:hover,
.btn.ghost:focus-visible{
  background: rgba(255,255,255,.06);         /* subtle wash */
  color: var(--accent) !important;           /* gold text */
  border-color: var(--accent) !important;    /* gold border */
  
}

.btn.ghost:active{
  background: rgba(255,255,255,.10);
  transform: translateY(0);
  
}

.kiko-social-list{
  display: flex;
  gap: 0.85rem;
  margin-top: 0.25rem;
}

/* Base icon pill – WHITE */
.social-icon{
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(0,0,0,.35);
  color: #fff;                 /* <- white icons */
  text-decoration: none;
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.social-icon svg{
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* Facebook: solid white */
.social-icon--fb svg{
  fill: currentColor;
  stroke: none;
}

/* Hover: keep them white, just lift + brighten border/bg */
.social-icon:hover,
.social-icon:focus-visible{
  background: rgba(255,255,255,.12);
  border-color: #fff;
  color: #fff;
   
  outline: none;
}


.map-embed{

  margin-top: 30px;
}
/* Visually hidden text (unchanged) */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Sourced With Care – match heading scale to other pages */
.swc h1{
  font-size: clamp(1.25rem, 3.2vw, 2.4rem);  /* same ballpark as hero titles */
  font-weight: 400;
  margin: 0 0 .35rem;
}

.swc h2{
  font-size: clamp(0.9rem, 1.4vw, 1.05rem); /* more “tagline” than big subhead */
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
  color: var(--accent);
}

.kiko-slab .copy{
  text-align: center;   /* centre text inside the overlay */
}

.footer{
  border-top: 1px solid var(--stroke);
  background: var(--bg-soft);
  color: var(--muted);
  padding: 32px 0;
}

.footer-inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.footer-col{
  flex: 1 1 180px;
}

/* Logo + rights text */
.footer-logo img{
  height: 60px;
  width: auto;
  display: block;
  margin-bottom: 10px;
}
.footer-meta{
  margin: 0;
  font-size: 0.8rem;
}

/* Headings + location links */
.footer-heading{
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer-nav{
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav li + li{
  margin-top: 0.25rem;
}
.footer-nav a{
  color: var(--text);
  font-size: 0.9rem;
  text-decoration: none;
}
.footer-nav a:hover{
  color: var(--accent);
}


/* Responsive stacking */
@media (max-width: 720px){
  .footer-inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-brand,
  .footer-links,
  .footer-social{
    align-items: center;
  }
  .footer-logo img{
    margin-left: auto;
    margin-right: auto;
  }
  .footer-social .kiko-social-list{
    justify-content: center;
  }
}

/* Make the social column a vertical stack */
.footer-social{
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* keeps "Follow" and icons left-aligned */
}

/* Icons directly under the "Follow" heading */
.footer-social .kiko-social-list{
  justify-content: flex-start;
  margin-top: 0.35rem; /* small gap under heading */
}


/* Mobile / touch: fit neatly inside the viewfinder */
@media (pointer: coarse) {
  .kim-lightbox__inner{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .kim-lightbox__inner img{
    max-width: 100%;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }
}

/* Fix menu lightbox size – stop it going massive */
.kim-lightbox{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Base behaviour: centre and contain the image */
.kim-lightbox__inner{
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.kim-lightbox__inner img{
  display: block;
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
}


/* MOBILE: make zoomed menu page fit the screen width */
@media (max-width: 768px){
  .kim-lightbox{
    padding: 0; /* remove side padding so the image can actually touch the edges */
  }

  .kim-lightbox__inner{
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    overflow-y: auto;      /* scroll vertically for tall menus */
    overflow-x: hidden;    /* no horizontal scroll / no “too wide” */
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .kim-lightbox__inner img{
    display: block;
    width: 100vw !important;      /* lock to viewport width */
    max-width: 100vw !important;  /* never wider than screen */
    height: auto;
    object-fit: contain;
  }
}

/* On mobile, show text first then image for the second story block */
@media (max-width: 759px){
  .cards-2--reverse-mobile > .kiko-slab{
    order: 2;
  }
  .cards-2--reverse-mobile > .card{
    order: 1;
  }
}

/* Switch order for the drinks feature on mobile */
@media (max-width: 919.98px){
  .kiko-feature.alt .copy{
    order: 2;
  }
  .kiko-feature.alt .media{
    order: 1;
  }
}

/* MOBILE: centre the feature images and stop any sideways spill */
@media (max-width: 767px){

  /* Full-width section, but with a centred content column */
  .kiko-loc .kiko-feature{
    padding-left: 0;
    padding-right: 0;
  }

  .kiko-loc .kiko-feature .container{
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;  /* same gutter both sides */
  }

  /* One column layout for the feature grid */
  .kiko-loc .kiko-feature .grid{
    grid-template-columns: 1fr;
  }

  /* Image block: no overflow, centred, same padding both sides */
  .kiko-loc .kiko-feature .media{
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;        /* hard stop for spill */
  }

  /* Kill the absolute fill on mobile so it can’t overshoot */
  .kiko-loc .kiko-feature .media img{
    position: static;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* Also kill focus ring + any UA active background on the slides */
.kiko-image-menu .kim-page img,
.kiko-image-menu .kim-page img:active,
.kiko-image-menu .kim-page img:focus {
  outline: none !important;
  -webkit-focus-ring-color: rgba(0,0,0,0) !important;
  background-color: transparent !important;
}

/* === Kiko Image Menu – kill blue/white flash on touch/swipe === */



/* If Swiper has its own slide background, override it hard */
.kiko-image-menu .swiper-slide{
  background: transparent !important;
}

/* 2. Remove tap + selection highlight just for the image-menu area */
.kiko-image-menu,
.kiko-image-menu *{
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Stop the blue text-selection rectangle */
.kiko-image-menu ::selection{
  background: transparent !important;
  color: inherit !important;
}

/* 3. Prevent any :active background “flash” on press */
.kiko-image-menu .kim-frame *:active{
  outline: none !important;
  background-color: transparent !important;
}

/* === Kiko image menu – kill blue flash in zoomed lightbox === */

/* 1. Disable tap highlight + selection inside the lightbox */
.kim-lightbox,
.kim-lightbox * {
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 2. Stop any blue focus/active styles on the close button */
.kim-lightbox__close,
.kim-lightbox__close:focus,
.kim-lightbox__close:active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 3. Ensure nothing draws a selection overlay */
.kim-lightbox ::selection {
  background: transparent !important;
  color: inherit !important;
}

/* 4. Just in case: make sure the image itself never paints a bg */
.kim-lightbox__inner img {
  background: transparent !important;
}



.brand--fullbleed img{
  display: block;
  width: auto;
  height: clamp(80px, 14vh, 150px);
}

@media (max-width: 768px){
  .brand--fullbleed img{
    height: clamp(90px, 12vw, 120px); /* softer mobile scaling */
  }
}

@media (max-width: 768px){
  /* ...your existing mobile lightbox styles... */

  /* When JS adds this class, centre the menu vertically */
  .kim-lightbox__inner--center{
    align-items: center;
  }

}


/* Ensure the card can host absolutely positioned elements */
.section--locations .location-card {
  position: relative;
}

/* Corner banner for “coming soon” */
.location-banner {
  position: absolute;
  top: 30px;
  right: -50px;
  z-index: 2;
  padding: 4px 40px;
  background: var(--accent);
  color: #111;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  font-weight: 600;
  transform: rotate(45deg);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}


/* Lightbox / zoom styles for Kiko image menu */
.kiko-image-menu .kim-page img{
  cursor: zoom-in;
}

.kim-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}
.kim-lightbox.is-open{
  display: flex;
}
.kim-lightbox__inner{
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}
.kim-lightbox__inner img{
  display: block;
  
  height: auto;
}
.kim-lightbox__close{
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
}
.kim-lightbox__hint{
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .8rem;
  color: rgba(255,255,255,.8);
}

/* MOBILE: make zoomed menu page fit the screen width AND centre vertically if it fits */
@media (max-width: 768px){
  .kim-lightbox{
    padding: 0; /* remove side padding so the image can actually touch the edges */
  }

  .kim-lightbox__inner{
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    overflow-y: auto;      /* scroll vertically for tall menus */
    overflow-x: hidden;    /* no horizontal scroll / no “too wide” */
    display: flex;
    align-items: center;   /* ← was flex-start */
    justify-content: center;
  }

  .kim-lightbox__inner img{
    display: block;
    width: 100vw !important;      /* lock to viewport width */
    max-width: 100vw !important;  /* never wider than screen */
    height: auto;
    object-fit: contain;
  }
}


/* ===== Sourced With Care (scoped) ===== */
.swc{ --bg: #0c0c0e; --bg-soft:#151518; --text:#f3f3f3; --muted:#bcbcbc; --accent:#e8d8a6; --card:#111114; --stroke:#2a2a2f; }
.swc{ position:relative; background: var(--bg); color: var(--text); }
.swc::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(120% 120% at 50% 10%, rgba(255,255,255,.06) 0, rgba(255,255,255,0) 35%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.6));
  <?php if ($bg): ?>
  background-image:
    radial-gradient(120% 120% at 50% 10%, rgba(255,255,255,.06) 0, rgba(255,255,255,0) 35%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.6)),
    url('<?php echo esc_url($bg); ?>');
  background-size: auto, auto, cover; background-position: center; background-attachment: fixed;
  <?php endif; ?>
  filter: saturate(.92);
}
.swc .container{ max-width:1200px; margin:0 auto; padding: clamp(16px,3.2vw,32px); }

/* 3-column layout: left gallery / content / right gallery */
.swc-grid{
  display:grid; gap: clamp(16px,2.4vw,26px);
  grid-template-columns: minmax(120px, 1fr) minmax(0, 680px) minmax(120px, 1fr);
  align-items:start;
}

/* Side galleries stick gently as you scroll */
.swc-gallery{
  position: sticky; top: clamp(60px, 10vh, 120px);
  display:grid; gap: clamp(10px, 1.6vw, 14px);
}
.swc-gallery .tile{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px; overflow:hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.swc-gallery .tile img{
  width:100%; height:auto; display:block; object-fit:cover;
}

/* Centre article card */
.swc-article{
  background: rgba(17,17,20,.70);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: clamp(18px, 3vw, 34px);
  backdrop-filter: blur(6px) saturate(112%);
  -webkit-backdrop-filter: blur(6px) saturate(112%);
}
.swc .eyebrow{
  text-transform:uppercase; letter-spacing:.18em; color: rgba(255,255,255,.86);
  font-family: "Cinzel", Georgia, serif; font-size: .9rem; margin: 0 0 .4rem;
}
.swc h1{
  margin:0 0 .25rem; font-family:"Cinzel", Georgia, serif;
  letter-spacing:.22em; text-transform:uppercase; font-weight:400;
  font-size: clamp(1.8rem, 3.8vw, 2.4rem);
}
.swc h2{
  margin:.1rem 0 1.1rem; font-weight:500; font-size: clamp(0.9rem, 1.6vw, 1.rem); color: var(--accent);
}
.swc .content{ color: var(--text); }
.swc .content p{ margin: 0 0 1rem; color: var(--muted); }
.swc .content ul{ padding-left: 1.1em; margin: .4rem 0 1rem; }
.swc .content li{ margin: .35rem 0; }

@media (max-width: 1199.98px){
  .swc-grid{
    grid-template-columns: 1fr;
  }

  /* hide both side galleries on mobile */
  .swc-gallery{
    display: none;
  }

  /* make sure the article just runs full-width */
  .swc-article{
    order: 1;
    max-width: 680px;
    margin: 0 auto;
  }
}

/* Tiny view tweaks */
@media (max-width: 520px){
  .swc-gallery{ grid-template-columns: 1fr; }
}


/* Hero as full-bleed image, no Swiper */
.hero.hero--swiper {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
}

/* Make the single hero image behave like a slide bg */
.hero.hero--swiper > img.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* Keep overlay + content on top */
.hero.hero--swiper > .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero.hero--swiper > .inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 40px);
  text-align: center;
}


/* ===== Sticky header (final override) ===== */

/* make sure header spans the viewport when fixed */
.site-header{
  left: 0;
  right: 0;
}

/* Sticky state */
.site-header.is-sticky{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(14,13,12,.72); /* uses your --bg feel */
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* Optional: slightly tighter padding when sticky */
.site-header.is-sticky.section{
  padding: 10px 0;
}

/* Admin bar offset */
body.admin-bar .site-header.is-sticky{
  top: 32px;
}
@media (max-width: 782px){
  body.admin-bar .site-header.is-sticky{
    top: 46px;
  }
}

/* =========================
   STICKY HEADER (FINAL)
   Paste at VERY BOTTOM
   ========================= */

:root{
  --header-h: 84px;   /* JS will overwrite this with the real height */
  --adminbar-h: 0px;
}

/* Correct admin bar offsets (DO NOT shift left/right) */
body.admin-bar{ --adminbar-h: 32px; }
@media (max-width: 782px){
  body.admin-bar{ --adminbar-h: 46px; }
}

/* Make header actually stick */
.site-header{
  position: fixed !important;
  top: var(--adminbar-h) !important;
  left: 0 !important;
  right: 0 !important;
  

  background: transparent;
  transition: background .25s ease, backdrop-filter .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Frosted/solid state after scroll */
.site-header.is-scrolled{
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Push page content down ONLY when there’s no hero */
body.no-hero{ padding-top: calc(var(--header-h) + var(--adminbar-h)); }
body.has-hero{ padding-top: 0; }

/* ===== Header height includes logo (FINAL OVERRIDE) ===== */
:root{
  --logo-h: clamp(80px, 14vh, 150px);
  --header-vpad: 14px;
  --header-left: 16px;
}

/* Header becomes a single row: logo left, nav right */
.site-header{
  display: flex;
  align-items: center;
  gap: 16px;

  /* this is what makes it "taller" */
  min-height: calc(var(--logo-h) + (var(--header-vpad) * 2));
  padding: var(--header-vpad) var(--nav-inset-right, 16px) var(--header-vpad) var(--header-left) !important;
}

/* Logo participates in layout (so header height includes it) */
.brand--fullbleed{
  position: static !important;   /* KEY: undo absolute */
  display: block;
  line-height: 0;
  margin: 0;
  z-index: 1;
}
.brand--fullbleed img{
  height: var(--logo-h) !important;
  width: auto;
}

/* Nav row sits to the right and aligns vertically */
.site-header .nav-row{
  flex: 1;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;         /* stop .container padding affecting header height */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Mobile: slightly smaller logo + padding */
@media (max-width: 899.98px){
  :root{ --logo-h: clamp(88px, 12vh, 120px); --header-vpad: 10px; }
}

@media (max-width: 768px){
  .hero.hero--swiper > img.hero-bg{
    object-position: 85% 50% !important; /* tweak: 65%–90% */
  }
}

/* Phone under the hero H1 */
.kiko-hero .kiko-hero-phone{
  margin: .2rem 0 1.1rem;
  line-height: 1.2;
}

.kiko-hero .kiko-hero-phone__link{
  color:var(--accent) !important;                 /* override global link colour */
  text-decoration: none;
  font-size: clamp(1rem, 1.2vw, 1.2rem);  /* “appropriate” scale */
  font-weight: 600;
  letter-spacing: .02em;
}

.kiko-hero .kiko-hero-phone__link:hover,
.kiko-hero .kiko-hero-phone__link:focus-visible{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.kiko-hero .kiko-hero-phone__link{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--accent) !important;
}

.kiko-hero .kiko-hero-phone__icon{
  width: 18px;
  height: 18px;
  opacity: .95;
  flex: 0 0 auto;
}

.kiko-hero .kiko-hero-phone__text{
  display: inline-block;
}