/* ===============================
   Forage — site theme & responsive nav
   =============================== */

/* ---- Palette (from new logo) ---- */
:root{
  --brand:       #1F5B50;   /* deep pine */
  --brand-ink:   #15453C;
  --brand-light: #8EC07C;   /* hamburger button */
  --accent:      #ED7A30;   /* orange */
  --bg:          #F7F1E6;   /* <-- back to warm cream */
  --text:        #0F1916;
  --card:        #FFFFFF;
}


/* ---- Base ---- */
html,body{ background:var(--bg); color:var(--text); }

/* Header stays white */
.nav{ background:#fff; border-bottom:1px solid rgb(0 0 0 / 6%); }

/* Layout */
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:nowrap; }
.links{ display:flex; align-items:center; gap:16px; }
.brand b{ white-space:nowrap; }

/* Buttons */
.cta,.cta:link,.cta:visited{
  background:var(--brand); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:160px; font-weight:700; border:0; text-decoration:none;
}
.cta.alt{ background:var(--accent); color:#fff; }
.cta *{ color:inherit; }

/* Badges & cards */
.badge{ background:color-mix(in srgb, var(--brand-light) 18%, #fff); color:var(--brand-ink); padding:.5rem .75rem; border-radius:999px; }
.card{ background:var(--card); }

/* A11y helper */
.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; }

/* Subtle depth under hero */
.hero{
  background: radial-gradient(1200px 300px at 50% -80px, rgb(0 0 0 / 4%), transparent);
}

/* ---- Hamburger (hidden on desktop) ---- */
.menu-toggle{
  display:none; width:44px; height:44px; border-radius:14px;
  background:#fff; border:1px solid rgb(0 0 0 / 10%); box-shadow:0 6px 16px rgb(0 0 0 / 8%);
  cursor:pointer; transition:transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
.menu-toggle:hover{ box-shadow:0 8px 20px rgb(0 0 0 / 10%); }
.menu-toggle:active{ transform:translateY(1px); }
.menu-toggle:focus-visible{ outline:2px solid rgba(31,77,58,.35); outline-offset:2px; }

/* Icon bars */
.menu-toggle .menu-icon{
  position:relative; width:20px; height:2px; border-radius:2px; background:var(--text); color:var(--text);
  transition:background .2s ease;
}
.menu-toggle .menu-icon::before,
.menu-toggle .menu-icon::after{
  content:""; position:absolute; left:0; width:20px; height:2px; border-radius:2px; background:currentColor; transition:transform .2s ease;
}
.menu-toggle .menu-icon::before{ top:-6px; }
.menu-toggle .menu-icon::after { top: 6px; }
.nav-open .menu-toggle .menu-icon{ background:transparent; }
.nav-open .menu-toggle .menu-icon::before{ transform:translateY(6px) rotate(45deg); }
.nav-open .menu-toggle .menu-icon::after { transform:translateY(-6px) rotate(-45deg); }

/* ---- Desktop logo sizes (≈ +160%) ---- */
@media (min-width:1201px){
  .brand img{ height:104px; }                 /* header logo */
  .hero img.hero-logo{ height:198px !important; } /* home hero logo */
  .nav-inner{ padding-top:18px; padding-bottom:18px; }
}

/* ---- Drawer & mobile/tablet tweaks ---- */
@media (max-width:1200px){
  /* Compact header */
  .brand b{ display:none; }
  .brand img{ height:60px; filter:drop-shadow(0 1px 2px rgb(0 0 0 / 10%)); }

  /* Hamburger visible and green */
  .menu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--brand-light) !important; color:var(--brand-ink);
  }
  .menu-toggle .menu-icon{ background:currentColor; color:var(--brand-ink); }
  .menu-toggle .menu-icon::before, .menu-toggle .menu-icon::after{ background:currentColor; }
  .menu-toggle{ position:relative; z-index:95; } /* stay above drawer */

  /* Drawer panel (hidden by default) */
  .nav .links{
    position:fixed; top:0; right:0; height:100vh; width:min(86vw,360px);
    background:#fff; border-left:1px solid rgb(0 0 0 / 8%); box-shadow:-12px 0 30px rgb(0 0 0 / 15%);
    padding:72px 20px 20px; display:flex; flex-direction:column; gap:14px;
    transform:translateX(105%); transition:transform .25s ease; z-index:80;
    pointer-events:none; /* don’t eat taps when hidden */
  }
  body.nav-open .nav .links{ transform:translateX(0); pointer-events:auto; }

  /* Drawer links */
  .nav .links a{ display:block; font-size:18px; padding:10px 6px; color:var(--text); }
  .nav .links .cta{ width:100%; justify-content:center; }

  /* Backdrop */
  .nav-overlay{
    position:fixed; inset:0; background:rgb(0 0 0 / 35%); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:70;
  }
  body.nav-open .nav-overlay{ opacity:1; pointer-events:auto; }

  /* Hero/logo sizing on small screens */
  .hero img.hero-logo{ height:140px !important; }
  .nav-inner{ padding-top:12px; padding-bottom:12px; }
}

/* ---- Very small phones ---- */
@media (max-width:420px){
  .brand img{ height:52px; }
  .hero img.hero-logo{ height:120px !important; }
}
/* === FORCED green hamburger with shade/texture (mobile/tablet) === */
@media (max-width:1200px){
  /* Highest-specificity, wins over older rules */
  .nav .menu-toggle{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:14px;

    /* light-green fill with gentle vertical gradient */
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--brand-light) 96%, #fff) 0%,
                             color-mix(in srgb, var(--brand-light) 78%, #000) 100%) !important;

    /* edge + depth */
    border:1px solid rgb(0 0 0 / 14%) !important;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 35%),  /* inner top highlight */
      0 2px 6px rgb(0 0 0 / 10%),
      0 8px 18px rgb(0 0 0 / 12%) !important;

    /* make sure it’s above anything */
    z-index:95;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* soft gloss & micro-texture (no image needed) */
  .nav .menu-toggle::after{
    content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
    background:
      radial-gradient(120% 60% at 50% -20%, rgba(255,255,255,.22), transparent 60%),
      linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,.00));
    mix-blend-mode:overlay;
  }

  /* bars color = dark ink to contrast on green */
  .nav .menu-toggle .menu-icon{
    color: var(--brand-ink) !important;
    background: currentColor !important;
  }
  .nav .menu-toggle .menu-icon::before,
  .nav .menu-toggle .menu-icon::after{
    background: currentColor !important;
  }
}/* === Sage/Light-green NAV BAR === */
:root{
  /* keep your palette names the same */
  --brand:       #1F5B50;   /* deep pine */
  --brand-ink:   #15453C;   /* dark ink */
  --brand-light: #8EC07C;   /* <-- sage/light green from logo */
}

/* Top bar background + text colors */
.nav{
  background: var(--brand-light) !important;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
}

/* Links/readability on green bar */
.nav .brand b,
.nav .links a{
  color: var(--brand-ink) !important;
}

/* Contact pill on desktop: white for contrast */
@media (min-width: 1201px){
  .nav .links .cta{
    background:#fff !important; color: var(--brand-ink) !important;
    box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
    border: 1px solid rgb(0 0 0 / 10%);
  }
  .nav .links .cta:hover{ filter: brightness(0.98); }
}

/* Hamburger on green bar (mobile/tablet): subtle white button with dark bars */
@media (max-width:1200px){
  .nav .menu-toggle{
    background: #ffffff !important;  /* stands out on green bar */
    border: 1px solid rgb(0 0 0 / 14%) !important;
    box-shadow: 0 6px 16px rgb(0 0 0 / 10%) !important;
  }
  .nav .menu-toggle .menu-icon{
    color: var(--brand-ink) !important;      /* bar color */
    background: currentColor !important;
  }
  .nav .menu-toggle .menu-icon::before,
  .nav .menu-toggle .menu-icon::after{
    background: currentColor !important;
  }

  /* Drawer panel stays white for readability */
  .nav .links{
    background:#fff !important;
  }
}/* --- Nudge nav bar to a softer sage --- */
:root{
  /* previous: #8EC07C */
  --brand-light: #A3C3AD;  /* muted sage, closer to the logo */
}

/* Use the sage on the top bar */
.nav{
  background: var(--brand-light) !important;
  border-bottom: 1px solid rgb(0 0 0 / 12%);
}

/* Keep link text readable on sage */
.nav .brand b,
.nav .links a{
  color: var(--brand-ink) !important; /* #15453C */
}

/* (unchanged) desktop Contact button stays white for contrast */
/* Mustard Contact button (nav + drawer) */
:root{
  /* Pick your mustard — tweak if you like */
  --mustard: #F0C13E; /* alt ideas: #D9A500, #F2C94C, #E0B04F */
}

/* Desktop nav pill */
@media (min-width:1201px){
  .nav .links .cta{
    background: var(--mustard) !important;
    color: var(--brand-ink) !important;        /* dark text for contrast */
    border: 1px solid rgb(0 0 0 / 12%);
    box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
  }
  .nav .links .cta:hover{ filter: brightness(0.98); }
  .nav .links .cta:active{ transform: translateY(1px); }
}

/* Mobile/tablet drawer button */
@media (max-width:1200px){
  .nav .links .cta{
    background: var(--mustard) !important;
    color: var(--brand-ink) !important;
    border: 1px solid rgb(0 0 0 / 12%);
  }
}

/* Contact button = exact logo orange */
:root{
  --accent: #ED7A30;  /* update if your exact hex is different */
}

/* Desktop nav pill */
@media (min-width:1201px){
  .nav .links .cta{
    background: var(--accent) !important;
    color: #fff !important;
    border: 1px solid rgb(0 0 0 / 10%);
    box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
  }
  .nav .links .cta:hover{ filter: brightness(.98); }
  .nav .links .cta:active{ transform: translateY(1px); }
}

/* Mobile/tablet drawer button */
@media (max-width:1200px){
  .nav .links .cta{
    background: var(--accent) !important;
    color: #fff !important;
    border: 1px solid rgb(0 0 0 / 10%);
  }
}/* =========================
   OPTION A + POLISH PACK
   ========================= */

/* Outline “Contact” on the sage nav (desktop + mobile drawer) */
@media (min-width:1201px){
  .nav .links .cta{
    background: transparent !important;
    color: var(--brand-ink) !important;
    border: 2px solid color-mix(in srgb, var(--brand-ink) 70%, #fff) !important;
    box-shadow: none !important;
  }
  .nav .links .cta:hover{
    background: color-mix(in srgb, var(--brand-light) 35%, #fff) !important;
  }
  .nav .links .cta:active{ transform: translateY(1px); }
  .nav .links .cta *{ color: inherit !important; }
}
@media (max-width:1200px){
  .nav .links .cta{
    background: transparent !important;
    color: var(--brand-ink) !important;
    border: 2px solid color-mix(in srgb, var(--brand-ink) 70%, #fff) !important;
    box-shadow: none !important;
  }
  .nav .links .cta:hover{
    background: color-mix(in srgb, var(--brand-light) 35%, #fff) !important;
  }
  .nav .links .cta *{ color: inherit !important; }
}

/* --- Polish pack --- */

/* Tighter header spacing (works with larger logo) */
.nav-inner{ padding-top:10px; padding-bottom:10px; }

/* Understated link hover (underline animation) */
.nav .links a{
  text-decoration:none; position:relative;
}
.nav .links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background: currentColor; opacity:0; transform:scaleX(0);
  transition: transform .18s ease, opacity .18s ease;
}
.nav .links a:hover::after{ opacity:.6; transform:scaleX(1); }

/* Badges closer to your sage tone */
.badge{
  background: color-mix(in srgb, var(--brand-light) 16%, #fff) !important;
  color: var(--brand-ink) !important;
}

/* Cards: softer shadow & radius */
.card{
  border-radius:18px;
  box-shadow:0 10px 30px rgb(0 0 0 / 8%);
  border:1px solid rgb(0 0 0 / 6%);
}
/* Typography polish */
:root{
  --leading: 1.6;
  --tracking-tight: -0.01em;
}
body{ line-height: var(--leading); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1,h2,h3{ letter-spacing: var(--tracking-tight); }
h1{ margin-bottom: .3em; }
h2{ margin: 1.2em 0 .5em; font-size: clamp(20px, 3.6vw, 28px); }

/* Calmer paragraph measure */
.container > p,
.section > p{ max-width: 70ch; }
/* Even vertical rhythm */
.section{ padding: clamp(18px, 5vw, 36px) 20px; }

/* Hairline divider between major sections (not the hero) */
.section + .section{
  background:
    linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,0)) 0 0/100% 1px no-repeat;
}
/* Softer hover + crisp focus */
.cta{ transition: transform .08s ease, filter .15s ease, box-shadow .15s ease; }
.cta:hover{ filter: brightness(1.02); }
.cta:active{ transform: translateY(1px); }
.cta:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--brand) 60%, #fff);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
}
@media (max-width:1200px){
  .nav .links a{
    padding: 12px 6px;           /* bigger touch target */
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .nav .links a:last-child{ border-bottom: 0; }
}
/* ===== Locations page — background carousel ===== */
.locations-hero{
  position: relative;
  min-height: clamp(320px, 46vw, 520px);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate; /* keeps overlay effects contained */
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Slides behind content */
.bg-carousel{
  position: absolute; inset: 0;
  z-index: -1;
}
.bg-carousel .slide{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; animation: fadeShow 30s infinite;
  will-change: opacity, transform;
  transform: scale(1.04); /* slight zoom for depth */
}

/* Assign your images here (upload files with these names) */
.bg-carousel .s1{ background-image: url("/assets/img/locations/bg-1.jpg"); animation-delay: 0s; }
.bg-carousel .s2{ background-image: url("/assets/img/locations/bg-2.jpg"); animation-delay: 6s; }
.bg-carousel .s3{ background-image: url("/assets/img/locations/bg-3.jpg"); animation-delay: 12s; }
.bg-carousel .s4{ background-image: url("/assets/img/locations/bg-4.jpg"); animation-delay: 18s; }
.bg-carousel .s5{ background-image: url("/assets/img/locations/bg-5.jpg"); animation-delay: 24s; }

/* Gentle dark/cream mask so text stays readable over photos */
.locations-hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,.10) 40%, transparent 65%),
    radial-gradient(1200px 300px at 50% -80px, rgba(0,0,0,.08), transparent);
  pointer-events:none;
}

/* Foreground copy */
.hero-overlay{
  color: #fff;
  padding: clamp(18px, 4vw, 28px) 20px 24px;
  text-shadow: 0 2px 18px rgba(0,0,0,.32);
}
.hero-overlay h1{
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.hero-overlay p{
  max-width: 70ch;
  margin: 0;
  opacity: .95;
}

/* Fade/hold animation timings */
@keyframes fadeShow{
  0%{ opacity: 0; }
  6%{ opacity: 1; }
  20%{ opacity: 1; }
  26%{ opacity: 0; }
  100%{ opacity: 0; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .bg-carousel .slide{ animation: none; opacity: 1; }
  .bg-carousel .slide:not(.s1){ display: none; }
}
/* Each slide now gets ~6s visible (fade in/out included) over 36s total */
.bg-carousel .slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; animation: fadeShow 36s infinite;
  will-change:opacity, transform; transform:scale(1.04);
}

/* Point to your 6 images (adjust extensions if you used .webp) */
.bg-carousel .s1{ background-image:url("/assets/img/locations/bg-1.jpg"); animation-delay: 0s;  }
.bg-carousel .s2{ background-image:url("/assets/img/locations/bg-2.jpg"); animation-delay: 6s;  }
.bg-carousel .s3{ background-image:url("/assets/img/locations/bg-3.jpg"); animation-delay: 12s; }
.bg-carousel .s4{ background-image:url("/assets/img/locations/bg-4.jpg"); animation-delay: 18s; }
.bg-carousel .s5{ background-image:url("/assets/img/locations/bg-5.jpg"); animation-delay: 24s; }
.bg-carousel .s6{ background-image:url("/assets/img/locations/bg-6.jpg"); animation-delay: 30s; }

/* Fade/hold timing tuned for 6 slides */
@keyframes fadeShow{
  0%   { opacity:0; }
  6%   { opacity:1; }   /* fade-in */
  20%  { opacity:1; }   /* hold */
  26%  { opacity:0; }   /* fade-out */
  100% { opacity:0; }
}
.locations-hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.26), rgba(0,0,0,.12) 40%, transparent 65%),
    radial-gradient(1200px 300px at 50% -80px, rgba(0,0,0,.10), transparent);
  pointer-events:none;
}
/* ===== Locations carousel controls ===== */
/* 1) Tweak these three knobs */
:root{
  --slide-time: 7s;   /* time per image. e.g., 4s (faster) … 10s (slower) */
  --fade-time: 1s;    /* fade in/out time for each image */
  --zoom: 1.06;       /* 1.00=no zoom, 1.03 subtle, 1.08 medium, 1.12 strong */
}

/* 2) Apply timing + zoom */
.bg-carousel .slide{
  will-change: opacity, transform;
  animation:
    fadeShow calc(var(--slide-time) * 6) infinite linear,
    kenburns calc(var(--slide-time) * 6) infinite linear;
}

/* 3) Stagger each slide using the same per-image time */
.bg-carousel .s1{ animation-delay:  calc(var(--slide-time) * 0), calc(var(--slide-time) * 0); }
.bg-carousel .s2{ animation-delay:  calc(var(--slide-time) * 1), calc(var(--slide-time) * 1); }
.bg-carousel .s3{ animation-delay:  calc(var(--slide-time) * 2), calc(var(--slide-time) * 2); }
.bg-carousel .s4{ animation-delay:  calc(var(--slide-time) * 3), calc(var(--slide-time) * 3); }
.bg-carousel .s5{ animation-delay:  calc(var(--slide-time) * 4), calc(var(--slide-time) * 4); }
.bg-carousel .s6{ animation-delay:  calc(var(--slide-time) * 5), calc(var(--slide-time) * 5); }

/* 4) Fade/hold curve uses your fade-time */
@keyframes fadeShow{
  0%   { opacity: 0; }
  /* fade in */
  calc((var(--fade-time) / var(--slide-time)) * 100%) { opacity: 1; }
  /* hold */
  calc((100% / 6) - (var(--fade-time) / var(--slide-time)) * 100%) { opacity: 1; }
  /* fade out */
  calc((100% / 6)) { opacity: 0; }
  100% { opacity: 0; }
}

/* 5) Ken Burns (zoom in and back out gently) */
@keyframes kenburns{
  0%   { transform: scale(1); }
  50%  { transform: scale(var(--zoom)); }
  100% { transform: scale(1); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .bg-carousel .slide{
    animation: none; opacity: 1; transform: none;
  }
  .bg-carousel .slide:not(.s1){ display: none; }
}
/* ===== Locations carousel: robust timing + zoom (6 slides) ===== */

/* 1) Controls */
:root{
  --slide-time: 7s;   /* per-image time: 4s fast … 10s slow */
  --zoom: 1.06;       /* 1.00=no zoom, 1.03 subtle, 1.08 medium, 1.12 strong */
  --loop: calc(var(--slide-time) * 6);
}

/* 2) Apply timing + zoom (two animations on each slide) */
.bg-carousel .slide{
  will-change: opacity, transform;
  animation: fadeShow var(--loop) infinite linear,
             kenburns var(--loop) infinite linear;
  opacity: 0;
  transform: scale(1);
}

/* 3) Stagger each slide by one “slot” of var(--slide-time) */
.bg-carousel .s1{ animation-delay: calc(var(--slide-time) * 0), calc(var(--slide-time) * 0); }
.bg-carousel .s2{ animation-delay: calc(var(--slide-time) * 1), calc(var(--slide-time) * 1); }
.bg-carousel .s3{ animation-delay: calc(var(--slide-time) * 2), calc(var(--slide-time) * 2); }
.bg-carousel .s4{ animation-delay: calc(var(--slide-time) * 3), calc(var(--slide-time) * 3); }
.bg-carousel .s5{ animation-delay: calc(var(--slide-time) * 4), calc(var(--slide-time) * 4); }
.bg-carousel .s6{ animation-delay: calc(var(--slide-time) * 5), calc(var(--slide-time) * 5); }

/* 4) Cross-browser fade/hold. No calc() in selectors. 
      Timeline per slide: fade-in (0→6%), hold (6→20%), fade-out (20→26%) */
@keyframes fadeShow{
  0%   { opacity: 0; }
  6%   { opacity: 1; }  /* fade in */
  20%  { opacity: 1; }  /* hold */
  26%  { opacity: 0; }  /* fade out */
  100% { opacity: 0; }
}

/* 5) Ken Burns zoom */
@keyframes kenburns{
  0%   { transform: scale(1); }
  50%  { transform: scale(var(--zoom)); }
  100% { transform: scale(1); }
}

/* Optional: show the first slide immediately while animations spin up */
.bg-carousel .s1{ opacity: 1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bg-carousel .slide{ animation: none; opacity: 1; transform: none; }
  .bg-carousel .slide:not(.s1){ display: none; }
}
/* ===== Locations hero: readable glass overlay ===== */
.locations-hero .hero-overlay{
  /* switch text back to dark */
  color: var(--text) !important;

  /* glassy, semi-transparent light panel */
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);

  /* shape & depth */
  display: inline-block;
  padding: 14px 18px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);

  /* spacing inside the hero */
  margin: 0 0 18px 0;
}

.locations-hero .hero-overlay h1{ margin:0 0 6px; letter-spacing:-0.01em; }
.locations-hero .hero-overlay p{ margin:0; opacity:.9; max-width:70ch; }

/* On small screens, bump opacity a touch for extra contrast */
@media (max-width: 600px){
  .locations-hero .hero-overlay{ background: rgba(255,255,255,.75); }
}
/* Center the glass card in the Locations hero */
.locations-hero{
  /* already grid; add horizontal centering */
  justify-items: center;                  /* centers children horizontally */
}

.locations-hero .hero-overlay{
  justify-self: center;                   /* double-ensure centering in grid */
  text-align: center;                     /* center the text inside */
  width: clamp(320px, 72vw, 960px);       /* comfy width that scales */
  margin: 0 0 18px 0;                     /* keep it near the bottom edge */
}

/* Tweak the look so it reads better over busy photos */
.locations-hero .hero-overlay{
  background: rgba(255,255,255,.68);      /* a touch more opacity */
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255,255,255,.45);/* soft edge */
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}

.locations-hero .hero-overlay h1{
  margin: 0 0 8px;
  font-size: clamp(20px, 3.2vw, 28px);
  letter-spacing: -0.01em;
}
.locations-hero .hero-overlay p{
  margin: 0 auto;
  max-width: 70ch;
  opacity: .9;
}

/* On small screens, let it breathe and increase contrast slightly */
@media (max-width: 640px){
  .locations-hero .hero-overlay{
    width: calc(100% - 28px);
    background: rgba(255,255,255,.78);
    padding: 16px 14px;
  }
}
.locations-hero .hero-overlay::after{
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.16), rgba(255,255,255,0) 40%),
    linear-gradient(to top,    rgba(255,255,255,.10), rgba(255,255,255,0) 50%);
}/* ===== Mobile nav safety net ===== */
.nav{ position: relative; z-index: 50; }
.nav-inner{ position: relative; }

/* Drawer (hidden by default) */
@media (max-width:1200px){
  .nav .links{
    position: fixed; top: 0; right: 0; height: 100vh; width: min(86vw, 360px);
    background: #fff;
    border-left: 1px solid rgb(0 0 0 / 8%);
    box-shadow: -12px 0 30px rgb(0 0 0 / 15%);
    padding: 72px 20px 20px;
    display: flex; flex-direction: column; gap: 14px;

    transform: translateX(105%);
    transition: transform .25s ease;
    pointer-events: none;   /* <<< doesn't block the button when closed */
    visibility: hidden;     /* hide from a11y and hit-testing */
    z-index: 80;
  }
  body.nav-open .nav .links{
    transform: translateX(0);
    pointer-events: auto;
    visibility: visible;
  }

  /* Hamburger must always be clickable */
  .menu-toggle{
    position: relative; z-index: 95;
    pointer-events: auto;
    touch-action: manipulation;
  }

  /* Backdrop overlay (click to close) */
  .nav-overlay{
    position: fixed; inset: 0; background: rgb(0 0 0 / 35%);
    opacity: 0; transition: opacity .2s ease;
    pointer-events: none; z-index: 70;
  }
  body.nav-open .nav-overlay{
    opacity: 1; pointer-events: auto;
  }
}
/* ===== Drawer fixes: make links clickable & soften the dim ===== */

/* Control how dark the background dim is when the menu is open */
:root{ --nav-dim: 0.18; }  /* try 0.12 (lighter) … 0.28 (darker) */

@media (max-width:1200px){
  /* Ensure the panel is the top interactive layer, links included */
  body.nav-open .nav .links{
    pointer-events: auto !important;
    visibility: visible !important;
    z-index: 80 !important;
  }
  body.nav-open .nav .links a,
  body.nav-open .nav .links button{
    pointer-events: auto !important;
  }

  /* Soften/adjust the overlay darkness */
  .nav-overlay{
    background: rgb(0 0 0 / var(--nav-dim)) !important;
    z-index: 70 !important;         /* stays below the drawer (80) */
  }

  /* Optional: remove dim entirely — uncomment to try a no-dim style */
  /* .nav-overlay{ background: transparent !important; } */
}@media (max-width:1200px){
  .nav .links a{
    pointer-events:auto !important;
    position:relative; z-index:81;
  }
}/* ===== Drawer: put it on top and guarantee clicks bubble ===== */
@media (max-width:1200px){
  /* Drawer panel sits ABOVE everything else */
  .nav .links{
    position: fixed; top:0; right:0; height:100vh; width:min(86vw,360px);
    z-index: 10000 !important;                 /* <<< max priority */
    pointer-events: auto !important;
    visibility: visible;
    transform: translateX(105%);
    transition: transform .25s ease;
  }
  body.nav-open .nav .links{ transform: translateX(0); }

  /* Every child is clickable (no neutering by inherited rules) */
  .nav .links *{
    pointer-events: auto !important;
  }

  /* Make each link a full-width target */
  .nav .links a{
    display:block; padding:14px 10px;
    position: relative; z-index: 10001;        /* above any accidental siblings */
  }

  /* Overlay stays BELOW drawer so it can’t smother links */
  .nav-overlay{
    z-index: 9000 !important;
    background: rgb(0 0 0 / .14);
    pointer-events: none;                      /* default: non-blocking */
  }
  body.nav-open .nav-overlay{ pointer-events: auto; }  /* tap outside to close */

  /* Hamburger stays above overlay but below links */
  .menu-toggle{ z-index: 11000 !important; }
}
/* ===== Drawer: put it on top and guarantee clicks bubble ===== */
@media (max-width:1200px){
  /* Drawer panel sits ABOVE everything else */
  .nav .links{
    position: fixed; top:0; right:0; height:100vh; width:min(86vw,360px);
    z-index: 10000 !important;                 /* <<< max priority */
    pointer-events: auto !important;
    visibility: visible;
    transform: translateX(105%);
    transition: transform .25s ease;
  }
  body.nav-open .nav .links{ transform: translateX(0); }

  /* Every child is clickable (no neutering by inherited rules) */
  .nav .links *{
    pointer-events: auto !important;
  }

  /* Make each link a full-width target */
  .nav .links a{
    display:block; padding:14px 10px;
    position: relative; z-index: 10001;        /* above any accidental siblings */
  }

  /* Overlay stays BELOW drawer so it can’t smother links */
  .nav-overlay{
    z-index: 9000 !important;
    background: rgb(0 0 0 / .14);
    pointer-events: none;                      /* default: non-blocking */
  }
  body.nav-open .nav-overlay{ pointer-events: auto; }  /* tap outside to close */

  /* Hamburger stays above overlay but below links */
  .menu-toggle{ z-index: 11000 !important; }
}
/* ===== Mobile drawer: fix stacking + ensure clicks register ===== */
:root{ --nav-dim: 0.16; } /* feel free to tweak the dim level */

/* Raise the whole nav above the overlay's stacking context */
.nav{
  position: relative;
  z-index: 20000 !important;  /* <<< critical: lift the parent context */
}

@media (max-width:1200px){
  /* Drawer panel (inside nav) — keep it highest of the two */
  .nav .links{
    position: fixed; top:0; right:0; height:100vh; width:min(86vw,360px);
    transform: translateX(105%); transition: transform .25s ease;
    pointer-events: none; visibility: hidden;
    z-index: 20010 !important;              /* above overlay below */
    background: #fff; box-shadow: -12px 0 30px rgb(0 0 0 / 15%);
    border-left: 1px solid rgb(0 0 0 / 8%);
    padding: 72px 20px 20px; display: flex; flex-direction: column; gap: 14px;
  }
  body.nav-open .nav .links{ transform: translateX(0); pointer-events:auto; visibility:visible; }

  /* Make every descendant clickable */
  .nav .links *, .nav .links a{ pointer-events:auto !important; }

  /* Overlay stays under the nav/drawer so it never smothers links */
  .nav-overlay{
    position: fixed; inset: 0;
    background: rgb(0 0 0 / var(--nav-dim));  /* adjust dim */
    opacity: 0; transition: opacity .2s ease;
    pointer-events: none;
    z-index: 19900 !important;                /* <<< lower than .nav */
  }
  body.nav-open .nav-overlay{ opacity:1; pointer-events:auto; }

  /* Keep the hamburger above everything */
  .menu-toggle{ z-index: 20020 !important; touch-action: manipulation; }
}