:root {
      /* --brand: #26ebb9; */
      --brand: #d8ff66;
      --ink-900: #0e0e0e;
      --ink-700: #1f1f1f;
      --ink-600: #2a2a2a;
      --ink-500: #404040;
      --ink-300: #8c8c8c;
      --ink-100: #ececec;
      --surface: #f7f7f7;
      --white: #fff;
      --ring: 0 0 0 .25rem color-mix(in srgb, var(--brand) 30%, transparent);
      --radius: 18px;

      --paragraph-font: "Roboto", sans-serif;
      --secondary-font: 'Hanken Grotesk', sans-serif;
      --third-font: 'Poppins', sans-serif;
      --forth-font: 'Overpass', sans-serif;
      --fifth-font: 'Plus Jakarta Sans', sans-serif;
      --sixth-font: 'Playwrite NZ', cursive;
    }

    /* Put this after Bootstrap and after your main variables */
    #faqAcc {
      --bs-accordion-bg: #fff;
      --bs-accordion-color: var(--ink-900);
      --bs-accordion-border-color: var(--ink-100);

      --bs-accordion-btn-bg: #fff;
      --bs-accordion-btn-color: var(--ink-900);
      --bs-accordion-btn-icon-color: currentColor;

      /* Active (expanded) state */
      --bs-accordion-active-bg: color-mix(in srgb, var(--brand) 10%, white);
      /* or just #fff */
      --bs-accordion-active-color: var(--ink-900);

      /* Focus ring (was blue) */
      --bs-accordion-btn-focus-box-shadow: var(--ring);
      /* you already defined --ring */
    }

    /* Optional: remove the default blue link color inside answers */
    #faqAcc .accordion-body a {
      color: var(--ink-300);
      text-decoration: none;
    }

    #faqAcc .accordion-body a:hover {
      color: var(--ink-900);
    }

    #faqAcc .accordion-body a:hover{ color: color-mix(in srgb, var(--brand) 50%, var(--ink-900)) }



    html {
      scroll-behavior: smooth
    }

    body {
      font-family: Roboto, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color: var(--ink-900);
      background: var(--surface);
      line-height: 1.6
    }

    h1,
    h2,
    h3 {
      font-family: var(--fifth-font);
      letter-spacing: -.02em;
      font-weight: 600 !important;
      padding-bottom: 20px;
    }

    .accordion-item h2 {
      padding-bottom: 0 !important;
    }

    .highlight {
      font-family: var(--sixth-font);
      color: var(--brand);
    }

    .navbar {
      background: #fff
    }

    .navbar-brand {
      font-family: var(--fifth-font);
      font-weight: 700;
    }

    .container-narrow {
      max-width: 1140px
    }

    .btn-brand {
      --bs-btn-bg: var(--brand);
      --bs-btn-border-color: var(--brand);
      --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 86%, black);
      --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 86%, black)
    }

    .btn-ghost {
      background: transparent;
      border: 1px solid var(--brand);
      color: var(--brand)
    }

    .btn-ghost:hover {
      background: color-mix(in srgb, var(--brand) 12%, transparent)
    }

    .btn-blk-ghost {
      background: transparent;
      border: 1px solid var(--ink-500);
      color: var(--ink-500)
    }

    .btn-blk-ghost:hover {
      background: color-mix(in srgb, var(--brand) 12%, transparent)
    }

    .btn-soft {
      background: color-mix(in srgb, var(--brand) 15%, white);
      border: 1px solid color-mix(in srgb, var(--brand) 30%, white);
      color: var(--ink-700)
    }

    .btn-soft:hover {
      background: color-mix(in srgb, var(--brand) 25%, white)
    }

    .hero {
      background: linear-gradient(180deg, #ffffff 0%, #fdfdfd 100%)
    }
    

    .shadow-soft {
      box-shadow: 0 10px 30px rgba(0, 0, 0, .05)
    }

    .card {
      border: 1px solid var(--ink-100);
      border-radius: var(--radius)
    }

    .icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: grid;
      place-items: center
    }

    .section-title {
      font-family: var(--secondary-font);
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      font-size: .85rem;
      color: #6d6d6d;
    }

    .map-frame {
      border: 0;
      width: 100%;
      height: 520px;
      border-radius: var(--radius)
    }

    .form-control:focus,
    .form-select:focus {
      box-shadow: var(--ring);
      border-color: var(--brand)
    }

    .badge-soft {
      font-family: var(--paragraph-font);
      font-weight: 400;
      font-size: 0.8em;
      color: #000;
      background: color-mix(in srgb, var(--brand) 12%, white);
      border: 1px solid color-mix(in srgb, var(--brand) 25%, white)
    }

    .logo-dot {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: var(--brand);
      display: inline-block;
      margin-right: .4rem
    }

    footer {
      background: #0f1312;
      color: #dfe7e5
    }

    footer a {
      color: var(--brand);
      text-decoration: none;
    }

    footer a:hover {
      color: var(--ink-300);
    }



/* Slab */
    .slab{padding:6rem 0;position:relative;overflow:hidden}
.slab-ghost{background:#0f1312}
.slab-brand{background:color-mix(in srgb,var(--brand) 8%,#fff)}
.slab .slab-kicker{font-family:var(--secondary-font);letter-spacing:.12em;text-transform:uppercase;color:#fff;font-size:.8rem}
.slab .slab-word{
  font-family:var(--fifth-font);
  font-weight:800; letter-spacing:-.04em; line-height:.9;
  font-size:clamp(56px,12vw,160px);
  color:var(--brand);
  margin:.25em 0 .15em;
}
.slab p.lead{max-width:60ch;margin:0 auto;color:#a0a0a0}

.slab-ghost .slab-word{ text-shadow:0 2px 14px rgba(0,0,0,.25) }
.slab-ghost .lead{ color:#cfcfcf }

.slab .slab-word{ display:inline-block; will-change: transform, opacity; }






/* ===== Upgraded Feature Cards ===== */
#features .feature-card{
  position:relative;
  text-align:center;
  padding:1.25rem 1.25rem 1.5rem;
  border:1px solid var(--ink-100);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.04);
  opacity:0;                       /* for reveal */
  transform:translateY(14px) scale(.98);
  transition:
    transform .5s cubic-bezier(.21,.7,.2,1),
    opacity .5s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}
#features .feature-card.show{
  opacity:1; transform:none;
}
#features .feature-card:hover,
#features .feature-card:focus-within{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--brand) 35%, #e5e5e5);
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}

/* glossy sweep */
#features .feature-card .shine{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.5) 40%, transparent 60%);
  transform:translateX(-120%);
  transition:transform .7s ease;
}
#features .feature-card:hover .shine{ transform:translateX(120%); }

/* icon badge */
#features .feature-icon{
  width:72px; height:72px; border-radius:22px;
  display:grid; place-items:center; margin:0 auto 10px;
  background:color-mix(in srgb, var(--brand) 16%, #fff);
  border:1px solid color-mix(in srgb, var(--brand) 35%, #eee);
  box-shadow:inset 0 0 0 6px color-mix(in srgb, var(--brand) 8%, #fff), 0 10px 30px rgba(0,0,0,.05);
  transition:transform .4s ease, box-shadow .4s ease, background .3s ease, border-color .3s ease;
}
#features .feature-card:hover .feature-icon{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 6px color-mix(in srgb, var(--brand) 14%, #fff), 0 14px 36px rgba(0,0,0,.08);
}
#features .feature-icon i{
  font-size:1.9rem; line-height:1; color:#000;
}

/* headings & copy */
#features .feature-card h3{ margin:.35rem 0 .25rem; }
#features .feature-card p{ color:var(--ink-700); }

/* fun micro “boop” on hover */
@keyframes boop{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
#features .feature-card:hover .feature-icon{ animation:boop 600ms ease-out; }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  #features .feature-card, #features .feature-card .shine, #features .feature-icon{ transition:none; animation:none }
  #features .feature-card{ opacity:1; transform:none }
}



/* === Feature icon: 84px perfect circle === */
#features .feature-icon{
  width:84px; height:84px; border-radius:50%;
  margin:0 auto 12px;
  background:color-mix(in srgb, var(--brand) 18%, #fff);
  border:1px solid color-mix(in srgb, var(--brand) 40%, #eee);
  box-shadow:
    inset 0 0 0 8px color-mix(in srgb, var(--brand) 10%, #fff),
    0 12px 34px rgba(0,0,0,.06);
}
#features .feature-card:hover .feature-icon{
  transform:translateY(-4px);
  box-shadow:
    inset 0 0 0 8px color-mix(in srgb, var(--brand) 16%, #fff),
    0 16px 40px rgba(0,0,0,.1);
}
#features .feature-icon i{
  font-size:2.2rem; line-height:1; color:#000;
}





/* add after your feature-icon rules */
#features .feature-icon{ position:relative; overflow:visible } /* ensures pseudo shows */
#features .feature-icon::before{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--brand), transparent 35%, var(--brand) 70%, transparent 100%);
  -webkit-mask: 
    radial-gradient(farthest-side, #000 98%, transparent) 
      content-box, linear-gradient(#000 0 0); 
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:3px; opacity:0; transition:opacity .35s ease;
}
#features .feature-card:hover .feature-icon::before,
#features .feature-card:focus-within .feature-icon::before{ opacity:.9 }



#features .feature-card:focus-within{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent), 0 18px 40px rgba(0,0,0,.08);
  border-color: color-mix(in srgb, var(--brand) 50%, #e5e5e5);
}
#features .feature-card a, 
#features .feature-card button{ outline:none } /* rely on card focus */


#features .feature-card p{ max-width:52ch; margin-left:auto; margin-right:auto }









/* ==== Footer reveal (sticky) ==== */
header{
  position: relative; 
  z-index: 1;
}
main{
  position: relative;            /* so we can layer it above the footer */
  z-index: 1;                    /* content sits above while revealing */
  background: var(--surface);    /* keep your light page bg */
}

footer{
  position: sticky;              /* the magic */
  bottom: 0;                     /* stick to viewport bottom */
  z-index: 0;                    /* behind main while revealing */
}

/* Optional: a soft fade where content passes over the footer */
footer{ position: sticky; bottom:0; }
footer::before{
  content:"";
  position: absolute;
  top: -18px; left: 0; right: 0; height: 18px;
  pointer-events: none;
}














/* Simple fixed-height parallax */
.parallax-section {
  height: 380px;                        /* set your fixed height */
  background-image: var(--parallax-img, url('img/action/action_bg_2.jpg'));
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;         /* parallax effect */
  position: relative;
}

/* Optional: subtle dark overlay for legibility */
.parallax-section::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.25);
}

/* Optional: centered content layer */
.parallax-section .parallax-content {
  position: relative;                   /* above overlay */
  z-index: 1;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
}

/* iOS Safari fallback (fixed background is unreliable) */
@supports (-webkit-touch-callout: none) {
  .parallax-section {
    background-attachment: scroll;      /* disable fixed on iOS */
  }
}

section[id] {
  scroll-margin-top: 50px; /* adjust to your navbar height */
}







/* Back-to-top button */
.btn-to-top{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1050;                 /* above most things */
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--brand) 40%, #eee);
  border-radius: 12px;
  background: #fff;
  color: #000;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  cursor: pointer;

  /* hidden by default */
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease, border-color .2s ease;
}

.btn-to-top i{
  font-size: 1.6rem;
  line-height: 1;
}

.btn-to-top.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.btn-to-top:hover{
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
  border-color: color-mix(in srgb, var(--brand) 60%, #ddd);
}

.btn-to-top:focus{
  outline: none;
  box-shadow: var(--ring);
}







/* --- Easter egg overlay --- */
.egg-overlay{
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;    /* don’t block clicks */
  overflow: hidden;
}
.egg-piece{
  position:absolute; width:10px; height:14px;
  border-radius:2px;
  will-change: transform, opacity;
}








/* ===== Business detail ===== */
.biz-hero{
  background:#fff;
  border-bottom:1px solid var(--ink-100);
}
.biz-title{
  font-family: var(--fifth-font);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.biz-sub{
  color: var(--ink-500);
}
.badge-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid color-mix(in srgb, var(--brand) 35%, #eee);
  background: color-mix(in srgb, var(--brand) 10%, #fff);
  border-radius: 999px;
  padding:.35rem .6rem; font-size:.82rem;
}
.badge-chip i{ line-height: 1; }

.fact-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:.4rem;
}
.fact-list li{
  display:flex; gap:.5rem; align-items:center;
  color:var(--ink-700);
}
.fact-list i{ font-size:1.2rem; }

.amenities{
  display:flex; flex-wrap:wrap; gap:.45rem .6rem;
}
.amenity{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .55rem; border-radius:10px;
  background: #fff;
  border:1px solid var(--ink-100);
  color:#000; font-size:.85rem;
}

.gallery-card .owl-carousel .item img{
  width:100%; height:auto; border-radius:12px;
}
.gallery-card .owl-dots .owl-dot span{
  background: color-mix(in srgb, var(--brand) 30%, #ddd);
}
.gallery-card .owl-dots .owl-dot.active span{
  background: var(--brand);
}

.map-card{
  border:1px solid var(--ink-100);
  border-radius: var(--radius);
  overflow:hidden;
  background:#fff;
}
#bizMap{ width: 100%; height: 320px; border-radius: var(--radius); }

.cta-row .btn{
  min-width: 160px;
}

/* Sticky action bar on mobile */
.sticky-actions{
  position: sticky; bottom: 0; z-index: 1020;
  background:#fff; border-top:1px solid var(--ink-100);
  padding:.6rem;
  display:none; /* show on small screens */
}
.sticky-actions .btn{
  flex:1 1 auto;
}
@media (max-width: 767.98px){
  .sticky-actions{ display:flex; gap:.5rem; }
}

/* small helper for subtle dividers */
.hr-soft{
  border:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--ink-100), transparent);
  margin: 1rem 0 1.25rem;
}

/* Light “section label” */
.section-kicker{
  font-family: var(--secondary-font);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #6d6d6d;
  font-size:.78rem;
}






/* Announcements */
.announcements{ display:grid; gap:.5rem }
.announce{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.75rem;
  border:1px solid var(--ink-100); background:#fff; border-radius:var(--radius);
  padding:.65rem .75rem; box-shadow:0 10px 24px rgba(0,0,0,.04);
}
.announce-badge{
  display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.85rem;
  color:#000; background:color-mix(in srgb,var(--brand) 18%,#fff);
  border:1px solid color-mix(in srgb,var(--brand) 35%,#eee);
  border-radius:999px; padding:.25rem .55rem;
}
.announce-body{ color:var(--ink-900) }
.announce-close{
  border:0; background:transparent; color:var(--ink-500); display:grid; place-items:center;
  width:32px; height:32px; border-radius:8px;
}
.announce-close:hover{ background:color-mix(in srgb,var(--brand) 10%,#fff); color:#000 }



/* Payment methods */
.pay-wrap{
  display:flex; gap:.9rem 1.2rem; align-items:center; flex-wrap:wrap;
  border:1px solid var(--ink-100); background:#fff; border-radius:var(--radius);
  padding:.6rem .8rem; box-shadow:0 10px 24px rgba(0,0,0,.04);
}
.pay-kicker{
  font-family: var(--secondary-font); text-transform:uppercase; letter-spacing:.14em;
  font-size:.78rem; color:#6d6d6d; white-space:nowrap;
}
.pay-list{ display:flex; gap:.8rem 1.1rem; flex-wrap:wrap; list-style:none; margin:0; padding:0 }
.pay-list li{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600 }
.pay-list i{ font-size:1.1rem }




/* Opening hours (static version) */
.hours-card { border:1px solid var(--ink-100); border-radius: var(--radius); background:#fff; }
.hours-table { border:0; }
.hours-table tr td { border:0; padding:.5rem .25rem; vertical-align:middle; }
.hours-table tr td:first-child { width:34%; color:var(--ink-500); }
.hours-table .today { background: color-mix(in srgb, var(--brand) 10%, #fff); border-radius: 10px; }

/* Status pill (edit class on the span to change colour) */
.status-pill{
  display:inline-block; padding:.35rem .6rem; border-radius:999px; font-weight:600; font-size:.9rem;
  background: #eee; color:#000; border:1px solid #ddd;
}
.status-open  { background: color-mix(in srgb, var(--brand) 35%, #fff); border-color: color-mix(in srgb, var(--brand) 50%, #ddd); }
.status-closed{ background: #f7d7d7; border-color: #f1bcbc; }
.status-soon  { background:#FFF4CC; border-color:#FFE59A; }



/* Specials / Offers */
.offer-grid{
  display:grid; gap:1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){ .offer-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.offer-card{
  border:1px solid var(--ink-100); background:#fff; border-radius:var(--radius);
  padding:1rem; box-shadow:0 10px 24px rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.offer-card:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand) 35%, #eee);
  box-shadow:0 16px 36px rgba(0,0,0,.08);
}
.offer-head{
  display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.35rem;
}
.offer-tag, .offer-date{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; color:#000;
  background:color-mix(in srgb,var(--brand) 14%, #fff);
  border:1px solid color-mix(in srgb,var(--brand) 35%, #eee);
  border-radius:999px; padding:.18rem .55rem;
}
.offer-title{ font-size:1.05rem; margin:.25rem 0 .35rem }
.offer-text{ color:var(--ink-700); margin:0 }



.contact a {
  text-decoration: none;
  color: #888;
}
.contact a:hover {
  color: #000;
}



/* Terms tweaks */
#terms .card p:last-child { margin-bottom: 0; }
#terms ol a { text-decoration: none; color: var(--ink-300); }
#terms ol a:hover { color: var(--ink-900); }

/* Privacy page tweaks */
#policy .card p:last-child { margin-bottom: 0; }
#policy ol a { text-decoration: none; color: var(--ink-300); }
#policy ol a:hover { color: var(--ink-900); }

/* Cookies page tweaks */
#cookies-policy .card p:last-child { margin-bottom: 0; }
#cookies-policy ol a { text-decoration: none; color: var(--ink-300); }
#cookies-policy ol a:hover { color: var(--ink-900); }



.cookies a, .privacy a, .terms a { text-decoration: none; color: var(--ink-300); }
.cookies a:hover, .privacy a:hover, .terms a:hover { color: var(--ink-900); }