/* ============================================================
   MODU CAFÉ — style.css (extracted from index.html)
   ============================================================ */

/* ============================================================
   MODU CAFÉ — design tokens
   ============================================================ */
:root{
  --ink:#0b0b0c;
  --ink-2:#111012;
  --panel:#16151a;
  --panel-2:#1d1b21;

  --line:rgba(233,185,73,.16);
  --line-soft:rgba(255,255,255,.08);

  --gold:#e9b949;
  --gold-bright:#f7d98a;
  --gold-deep:#c8902b;
  --gold-grad:linear-gradient(135deg,#f7d98a 0%,#e9b949 42%,#c8902b 100%);

  --white:#f6f3ec;
  --muted:#a9a39a;
  --muted-2:#7d7870;

  --maxw:1240px;
  --pad:clamp(1.15rem,5vw,2.5rem);
  --r:18px;
  --r-lg:26px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --font-d:"Fraunces",Georgia,serif;
  --font-b:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ============================================================
   reset + base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--font-b);
  background:var(--ink);
  color:var(--white);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* warm grain over the whole page for depth */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.035;mix-blend-mode:overlay;
}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ============================================================
   shared typographic pieces
   ============================================================ */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.72rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);
}
.eyebrow.center::after{
  content:"";width:26px;height:1px;background:var(--gold-grad);
  box-shadow:0 0 12px rgba(233,185,73,.6);
}
.section-head{max-width:640px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{
  font-family:var(--font-d);font-weight:600;
  font-size:clamp(2.1rem,5.4vw,3.5rem);line-height:1.04;letter-spacing:-.01em;
  margin:1rem 0 .9rem;
}
.section-head h2 em{font-style:italic;color:transparent;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text}
.section-head p{color:var(--muted);font-size:1.04rem;max-width:54ch}
.section-head.center p{margin-inline:auto}

.gold-text{color:transparent;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text}

/* buttons */
.btn{
  --bg:var(--gold-grad);
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.7rem;border-radius:100px;
  font-weight:700;font-size:.95rem;letter-spacing:.01em;
  background:var(--gold-grad);color:#1a1407;
  box-shadow:0 10px 30px -10px rgba(233,185,73,.55);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .35s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(233,185,73,.7);filter:brightness(1.04)}
.btn:active{transform:translateY(-1px)}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn--ghost{
  background:transparent;color:var(--white);
  border:1px solid var(--line);box-shadow:none;
}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-bright);box-shadow:0 12px 30px -16px rgba(233,185,73,.5)}

/* skip link */
.skip{position:fixed;left:1rem;top:-60px;z-index:200;background:var(--gold);color:#1a1407;
  padding:.6rem 1rem;border-radius:8px;font-weight:700;transition:top .25s}
.skip:focus{top:1rem}

/* ============================================================
   header / nav
   ============================================================ */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.header.scrolled{
  background:rgba(10,10,11,.78);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--line-soft);
}
.nav{
  min-height:82px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:3rem;
}

.nav-cta{
  margin-left:2rem;
}

.nav-links{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,2.2vw,2rem)}
.nav-links a{
  position:relative;font-weight:600;font-size:.95rem;color:var(--white);
  padding:.4rem 0;opacity:.86;transition:opacity .25s,color .25s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
  background:var(--gold-grad);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-links a:hover,.nav-links a.active{opacity:1;color:var(--gold-bright)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:.8rem}
.nav-cta .btn{padding:.7rem 1.25rem;font-size:.9rem}

.burger{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--line-soft);
  align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{width:20px;height:2px;background:var(--gold);border-radius:2px;transition:transform .3s var(--ease),opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:99;display:grid;place-items:center;
  background:rgba(8,8,9,.96);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.drawer.open{opacity:1;visibility:visible}
.drawer ul{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center}
.drawer a{
  font-family:var(--font-d);font-size:2rem;font-weight:500;color:var(--white);
  padding:.5rem 1rem;opacity:0;transform:translateY(14px);transition:.4s var(--ease);
}
.drawer.open a{opacity:1;transform:none}
.drawer.open a:nth-child(1){transition-delay:.06s}
.drawer.open li:nth-child(2) a{transition-delay:.12s}
.drawer.open li:nth-child(3) a{transition-delay:.18s}
.drawer.open li:nth-child(4) a{transition-delay:.24s}
.drawer.open li:nth-child(5) a{transition-delay:.3s}
.drawer.open li:nth-child(6) a{transition-delay:.36s}
.drawer a:hover{color:var(--gold-bright)}
.drawer .btn{margin-top:1.4rem;font-size:1rem}

/* ============================================================
   hero
   ============================================================ */
.hero{
  position:relative;
  z-index:1;
  padding:clamp(8rem,16vh,10rem) 0 clamp(3rem,7vw,5rem);
  overflow:hidden;

  background:
    url("./Assets/Modu Header.png")
    center center / cover no-repeat;

  min-height:100vh;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;

  background:
    linear-gradient(
      to right,
      rgba(0,0,0,.75),
      rgba(0,0,0,.45)
    );
}

.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:300px;

  z-index:-1;

  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.4) 40%,
      rgba(0,0,0,.8) 70%,
      #000 100%
    );
}
@keyframes floatglow{from{transform:translateY(-12px) scale(1)}to{transform:translateY(18px) scale(1.06)}}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
}
.hero-copy{
  width: 100%;
  max-width: none;
  overflow: visible;
}
.hero h1{
  font-family:var(--font-d);
  font-weight:500;
  font-size:clamp(1.9rem,4.5vw,3.3rem);
  line-height:1.05;
  letter-spacing:-0.015em;

  opacity:0;
  transform:translateY(30px);
  animation:heroPop 1.2s ease-out forwards;
}

@keyframes heroPop{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.hero h1 .line>span{display:block;transform:translateY(110%);transition:transform 1s var(--ease)}
.loaded .hero h1 .line>span{transform:none}
.hero h1 em{font-style:italic;color:transparent;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text}
.hero-sub{
  margin:1.4rem 0 2rem;
  color:var(--muted);
  font-size:clamp(0.9rem,1.4vw,1rem);
  line-height:1.7;
  max-width:40ch;

  opacity:0;
  transform:translateY(18px);
  transition:.9s var(--ease) .35s;
}
.loaded .hero-sub{opacity:1;transform:none}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;opacity:0;transform:translateY(18px);transition:.9s var(--ease) .5s}
.loaded .hero-actions{opacity:1;transform:none}

/* hero visual — gold ring + floating drink */
.hero-visual{position:relative;display:grid;place-items:center;min-height:420px}
.ring{
  position:relative;width:min(86%,400px);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 50% 38%,rgba(233,185,73,.18),transparent 60%),
    conic-gradient(from 210deg,#f7d98a,#c8902b,#7a5a18,#f7d98a);
  padding:2px;
  box-shadow:0 0 60px -10px rgba(233,185,73,.5),inset 0 0 40px rgba(0,0,0,.4);
  opacity:0;transform:scale(.8);transition:1.1s var(--ease) .25s;
  animation:spin 22s linear infinite;
}
.loaded .ring{opacity:1;transform:scale(1)}
@keyframes spin{to{transform:rotate(360deg)}}
.ring-inner{
  width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,#26221b,#0e0d0c 70%);
  display:grid;place-items:center;animation:spin 22s linear infinite reverse;
}
.ring-inner img{
  width:118%;height:118%;object-fit:cover;object-position:center 42%;
  filter:saturate(1.05) contrast(1.02);
}
.hero-chip{
  position:absolute;left:-2%;bottom:8%;z-index:3;
  background:rgba(18,17,15,.86);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:16px;padding:.8rem 1.1rem;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
  display:flex;align-items:center;gap:.8rem;
  opacity:0;transform:translateY(20px) scale(.95);transition:.8s var(--ease) .7s;
  animation:bob 5s ease-in-out infinite 1.6s;
}
.loaded .hero-chip{opacity:1;transform:none}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
.hero-chip .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.hero-chip b{font-family:var(--font-d);font-size:1.05rem}
.hero-chip span{display:block;font-size:.74rem;color:var(--muted);letter-spacing:.04em}

/* stat strip */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(3rem,7vw,4.5rem);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
  background:var(--line-soft);
}
.stats div{background:var(--ink);padding:1.3rem 1.2rem;text-align:center}
.stats b{display:block;font-family:var(--font-d);font-size:clamp(1.5rem,4vw,2rem);font-weight:600;color:var(--gold-bright)}
.stats span{font-size:.78rem;color:var(--muted);letter-spacing:.04em}

/* ============================================================
   reveal animation utility
   ============================================================ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
/* progressive enhancement: if JS is unavailable, never hide content */
html:not(.js) .reveal,
html:not(.js) .hero-sub,
html:not(.js) .hero-actions,
html:not(.js) .ring,
html:not(.js) .hero-chip{opacity:1!important;transform:none!important}
html:not(.js) .hero h1 .line>span{transform:none!important}

/* generic section rhythm */
.section{position:relative;z-index:1;padding:clamp(4.5rem,11vw,7.5rem) 0}
.section--tint{background:linear-gradient(180deg,var(--ink),var(--ink-2) 50%,var(--ink))}

/* ============================================================
   featured — signature drinks
   ============================================================ */
.menu-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem}
.subhead{font-family:var(--font-d);font-size:1.5rem;font-weight:600;margin:3.4rem 0 1.4rem;display:flex;align-items:center;gap:.8rem}
.drinks-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.2rem;
}

.poster{
  position:relative;
  overflow:hidden;
  border-radius:var(--r);
  border:1px solid var(--line-soft);
  cursor:pointer;
  transition:
    transform .5s var(--ease),
    border-color .5s;
}

.poster:hover{
  transform:translateY(-6px);
  border-color:var(--gold);
}

/* Signature Drinks fade-in: .poster's own transition was overriding
   .reveal and dropping opacity, so the cards revealed without fading.
   Re-add opacity here (matching the Kitchen cards) while keeping the
   existing hover lift/border timings intact. Stagger comes from
   .reveal.d1–.d3; prefers-reduced-motion is handled globally. */
.drinks-grid .poster{
  transition-property: transform, border-color, opacity;
  transition-duration: .5s, .5s, .8s;
  transition-timing-function: var(--ease), ease, var(--ease);
  /* transition-delay intentionally left unset so .reveal.d1–.d3 can stagger */
}

.poster .frame{
  aspect-ratio:4/5;
  overflow:hidden;
}

.poster .frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}

.poster:hover img{
  transform:scale(1.07);
}

.poster::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to top,
      rgba(7,7,8,.94),
      rgba(7,7,8,.18) 55%,
      rgba(7,7,8,.28)
    );
}

.poster figcaption{
  position:absolute;
  inset:auto 0 0 0;
  padding:1.2rem;
  z-index:2;
}

.poster .name{
  font-family:var(--font-d);
  font-size:1.25rem;
  font-weight:600;
  line-height:1.2;
  color:var(--white);
}

.poster .name small{
  display:block;
  margin-top:.35rem;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-family:var(--font-b);
  font-weight:700;
  color:var(--gold);
}

.price{
  display:inline-flex;
  margin-top:.75rem;
  padding:.38rem .75rem;
  border-radius:999px;
  background:rgba(18,17,15,.75);
  border:1px solid var(--line);
  color:var(--gold-bright);
  font-size:.82rem;
  font-weight:700;
  backdrop-filter:blur(8px);
}

/* food cards */
.food-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.food-card{
  position:relative;border-radius:var(--r);overflow:hidden;cursor:pointer;
  border:1px solid var(--line-soft);
}
.food-card .ph{aspect-ratio:4/5;overflow:hidden}
.food-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.food-card:hover img{transform:scale(1.07)}
.food-card .grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,7,8,.92),rgba(7,7,8,.1) 55%,rgba(7,7,8,.25))}
.food-card .info{position:absolute;inset:auto 0 0 0;padding:1.2rem}
.food-card .tag{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.food-card h4{font-family:var(--font-d);font-weight:600;font-size:1.22rem;margin-top:.3rem}
.food-card .zoom{position:absolute;top:1rem;right:1rem;width:36px;height:36px;border-radius:50%;
  background:rgba(18,17,15,.7);border:1px solid var(--line);display:grid;place-items:center;
  opacity:0;transform:scale(.8);transition:.4s var(--ease);color:var(--gold)}
.food-card:hover .zoom{opacity:1;transform:none}

.menu-foot{margin-top:3rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:center}
.menu-foot p{color:var(--muted)}

/* ============================================================
   why choose
   ============================================================ */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:3.4rem}
.feature{
  padding:2.2rem 1.7rem;border-radius:var(--r);
  background:linear-gradient(160deg,var(--panel),var(--ink-2));
  border:1px solid var(--line-soft);
  transition:transform .5s var(--ease),border-color .5s,background .5s;
}
.feature:hover{transform:translateY(-6px);border-color:var(--line);background:linear-gradient(160deg,var(--panel-2),var(--ink-2))}
.feature .ic{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.3rem;
  background:radial-gradient(circle at 30% 30%,rgba(233,185,73,.22),rgba(233,185,73,.04));
  border:1px solid var(--line);color:var(--gold);
}
.feature .ic svg{width:26px;height:26px}
.feature h3{font-family:var(--font-d);font-weight:600;font-size:1.3rem;margin-bottom:.5rem}
.feature p{color:var(--muted);font-size:.95rem}

/* ============================================================
   experiences
   ============================================================ */
.exp-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.exp-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);align-self:center;}
.exp-carousel{
  position:relative;
  width:100%;
  height:100%;
  min-height:705px;
}

.exp-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;

  opacity:0;
  transition:opacity 1.2s ease-in-out;

  will-change:opacity;
}

.exp-slide.active{
  opacity:1;
}
.exp-photo .glow{position:absolute;inset:0;box-shadow:inset 0 0 90px rgba(0,0,0,.5);pointer-events:none}
.exp-photo .badge{position:absolute;left:1.2rem;bottom:1.2rem;background:rgba(12,12,13,.8);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:14px;padding:.7rem 1rem;display:flex;align-items:center;gap:.7rem}
.exp-photo .badge b{font-family:var(--font-d);font-size:1.4rem;color:var(--gold-bright)}
.exp-photo .badge span{font-size:.76rem;color:var(--muted)}

.quotes{display:flex;flex-direction:column;gap:1.1rem}
.quote{
  padding:1.6rem 1.7rem;border-radius:var(--r);
  background:linear-gradient(160deg,var(--panel),var(--ink-2));
  border:1px solid var(--line-soft);position:relative;
  transition:transform .5s var(--ease),border-color .5s}
.quote:hover{transform:translateX(6px);border-color:var(--line)}
.quote .stars{color:var(--gold);font-size:.9rem;letter-spacing:.15em;margin-bottom:.6rem}
.quote p{font-size:1.02rem;color:var(--white)}
.quote .who{margin-top:.9rem;display:flex;align-items:center;gap:.7rem}
.quote .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  background:var(--gold-grad);color:#1a1407;font-size:.85rem}
.quote .who b{font-size:.92rem}
.quote .who span{font-size:.78rem;color:var(--muted)}

/* ============================================================
   gallery
   ============================================================ */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:1rem;margin-top:3.4rem}
.gcell{position:relative;border-radius:var(--r);overflow:hidden;cursor:pointer;border:1px solid var(--line-soft)}
.gcell img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .6s}
.gcell::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,7,8,.5),transparent 60%);
  opacity:.5;transition:opacity .5s}
.gcell:hover img{transform:scale(1.08)}
.gcell:hover::after{opacity:.15}
.gcell .pin{position:absolute;right:.8rem;bottom:.8rem;width:34px;height:34px;border-radius:50%;
  background:rgba(12,12,13,.7);border:1px solid var(--line);display:grid;place-items:center;color:var(--gold);
  opacity:0;transform:translateY(8px);transition:.4s var(--ease)}
.gcell:hover .pin{opacity:1;transform:none}
.g-tall{grid-row:span 2}
.g-wide{grid-column:span 2}

/* ============================================================
   about
   ============================================================ */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.about-media{position:relative}
.about-media img{width:100%;border-radius:var(--r-lg);aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line)}
.about-copy p{color:var(--muted);font-size:1.05rem;margin-bottom:1.1rem}
.about-copy p.lead{color:var(--white);font-size:clamp(1.15rem,2.4vw,1.4rem);font-family:var(--font-d);line-height:1.4}
.about-list{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.4rem;margin:1.8rem 0 2rem}
.about-list li{display:flex;align-items:center;gap:.7rem;font-weight:600;font-size:.95rem}
.about-list .chk{width:24px;height:24px;border-radius:50%;background:rgba(233,185,73,.12);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--gold);flex-shrink:0}
.about-list svg{width:13px;height:13px}

/* ============================================================
   CTA / visit
   ============================================================ */
.cta{position:relative;z-index:1;padding:clamp(4.5rem,11vw,7rem) 0;overflow:hidden}
.cta-inner{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(135deg,#1c1812,#0c0b0a);
  border:1px solid var(--line);
  padding:clamp(2.5rem,7vw,5rem);text-align:center;
}
.cta-inner::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  left:-120px;top:-160px;background:radial-gradient(circle,rgba(233,185,73,.18),transparent 65%)}
.cta-inner::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  right:-120px;bottom:-180px;background:radial-gradient(circle,rgba(233,185,73,.12),transparent 65%)}
.cta-inner>*{position:relative}
.cta h2{font-family:var(--font-d);font-weight:500;font-size:clamp(2.2rem,6vw,4rem);line-height:1.02;margin:1rem 0 1rem}
.cta h2 em{font-style:italic;color:transparent;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text}
.cta p{color:var(--muted);max-width:48ch;margin:0 auto 2rem;font-size:1.08rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.cta-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem 2.4rem;margin-top:2.6rem;
  padding-top:2.2rem;border-top:1px solid var(--line-soft)}
.cta-meta div{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.92rem}
.cta-meta svg{width:18px;height:18px;color:var(--gold);flex-shrink:0}
.cta-meta b{color:var(--white);font-weight:600}

/* ============================================================
   footer
   ============================================================ */
.footer{position:relative;z-index:1;background:var(--ink-2);border-top:1px solid var(--line-soft);padding:clamp(3.5rem,7vw,5rem) 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}
.foot-brand img{height:42px;margin-bottom:1.2rem}
.foot-brand p{color:var(--muted);font-size:.95rem;max-width:34ch}
.foot-socials{display:flex;gap:.7rem;margin-top:1.4rem}
.foot-socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-soft);color:var(--muted);transition:.35s var(--ease)}
.foot-socials a:hover{color:var(--gold);border-color:var(--gold);transform:translateY(-3px)}
.foot-socials svg{width:18px;height:18px}
.foot-col h5{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.foot-col li{margin-bottom:.7rem}
.foot-col a,.foot-col span{color:var(--muted);font-size:.95rem;transition:color .25s}
.foot-col a:hover{color:var(--gold-bright)}
.foot-bottom{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.foot-bottom p{color:var(--muted-2);font-size:.85rem}
.foot-bottom .tag{font-family:var(--font-d);font-style:italic;color:var(--gold);font-size:1rem}

/* ============================================================
   lightbox
   ============================================================ */
.lightbox{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  background:rgba(6,6,7,.94);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.35s var(--ease)}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:86vh;border-radius:14px;border:1px solid var(--line);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.9);transform:scale(.96);transition:transform .4s var(--ease)}
.lightbox.open img{transform:scale(1)}
.lightbox .close{position:absolute;top:1.2rem;right:1.2rem;width:48px;height:48px;border-radius:50%;
  background:rgba(20,19,17,.8);border:1px solid var(--line);color:var(--gold);font-size:1.4rem;display:grid;place-items:center}
.lightbox .close:hover{background:var(--gold);color:#1a1407}
.lightbox figcaption{position:absolute;bottom:1.4rem;left:0;right:0;text-align:center;color:var(--muted);font-size:.9rem}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:1080px){
  .drinks-grid,.food-grid,.why-grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
.nav{
  min-height:82px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:3rem;
}
  .brand-mark{width:38px;height:38px;font-size:1rem}
  .brand-name{font-size:1rem}
  .brand-sub{font-size:.58rem}
  .nav-links{display:none}
  .nav-cta .btn{display:none}
  .burger{display:flex}
  .hero{padding-top:clamp(7rem,14vh,8rem)}
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-copy{max-width:none;margin-inline:auto}
  .hero-copy .eyebrow{justify-content:center}
  .hero-sub{margin-inline:auto}
  .hero-actions{justify-content:center}
  .hero-visual{order:-1;min-height:auto;margin-bottom:1rem}
  .ring{width:min(74%,330px)}
  .exp-grid{grid-template-columns:1fr;gap:2.4rem}
  .exp-photo{max-width:520px;margin-inline:auto;width:100%}
  .about-grid{grid-template-columns:1fr;gap:2.6rem}
  .about-media{max-width:460px;margin-inline:auto;width:100%;order:-1}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:620px){
  .stats{grid-template-columns:1fr 1fr}
  .drinks-grid,.food-grid,.why-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:160px}
  .g-wide{grid-column:span 2}
  .about-list{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{justify-content:center;text-align:center}
}
@media (max-width:480px){
  .nav{min-height:68px}
  .brand-mark{width:36px;height:36px}
  .brand-name{font-size:.95rem}
  .brand-sub{font-size:.55rem}
  .burger{width:42px;height:42px}
}

@media (max-width:380px){
  .gallery{grid-template-columns:1fr;grid-auto-rows:220px}
  .g-wide,.g-tall{grid-column:auto;grid-row:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.hero-sub,.hero-actions,.ring,.hero-chip,.hero h1 .line>span{opacity:1;transform:none}
}


/* ============================================================
   Safe polish pass — dark/gold continuity + hero transition
   ============================================================ */
.hero{
  background-color:var(--ink);
}
.hero::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.58) 46%,rgba(0,0,0,.32) 100%),
    radial-gradient(circle at 16% 52%,rgba(233,185,73,.14),transparent 34%);
}
.hero::after{
  height:clamp(280px,34vh,420px);
  background:linear-gradient(to bottom,rgba(11,11,12,0) 0%,rgba(11,11,12,.48) 42%,var(--ink) 100%);
}
.section--tint{
  margin-top:-1px;
  background:
    radial-gradient(circle at 18% 0%,rgba(233,185,73,.08),transparent 32%),
    linear-gradient(180deg,var(--ink) 0%,#0f0e10 36%,var(--ink-2) 64%,var(--ink) 100%);
}
.feature,.quote{
  background:linear-gradient(160deg,rgba(22,21,26,.94),rgba(17,16,18,.98));
}
.feature:hover,.quote:hover{
  border-color:var(--line);
}
.poster,.food-card,.gcell,.exp-photo,.about-media img,.cta-inner{
  box-shadow:0 22px 60px -38px rgba(0,0,0,.88);
}
.drinks-grid .poster.reveal{
  opacity:0;
  transform:translateY(30px);
}
.drinks-grid .poster.reveal.is-visible{
  opacity:1;
  transform:none;
}
.poster figcaption,.food-card .info{
  pointer-events:none;
}
@media (max-width:900px){
  .hero::before{
    background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.82) 100%);
  }
}



/* ============================================================
   Client demo polish — warm coffee palette + mobile presentation
   Keeps the existing layout while making the page feel brighter,
   warmer, and more café-friendly after the hero section.
   ============================================================ */
:root{
  --coffee:#2b170f;
  --coffee-2:#3b2417;
  --espresso:#1f120c;
  --cream:#fff7ec;
  --cream-2:#f7ead8;
  --cream-3:#eed8bd;
  --latte:#c88a45;
  --caramel:#e1ad62;
  --cocoa:#6f4a32;
  --coffee-text:#2a1710;
  --coffee-muted:#715945;
  --coffee-line:rgba(111,74,50,.18);
  --coffee-shadow:0 24px 70px -42px rgba(62,35,18,.45);
}

body{
  background:
    radial-gradient(circle at 18% 0%,rgba(225,173,98,.16),transparent 30%),
    linear-gradient(180deg,#2b170f 0%,#fff7ec 24%,#f7ead8 100%);
}

.header.scrolled{
  background:rgba(43,23,15,.88);
  border-bottom-color:rgba(225,173,98,.22);
  box-shadow:0 16px 48px -34px rgba(0,0,0,.75);
}

.hero{
  background-color:var(--coffee);
}
.hero::before{
  background:
    linear-gradient(90deg,rgba(43,23,15,.68) 0%,rgba(43,23,15,.46) 48%,rgba(43,23,15,.24) 100%),
    radial-gradient(circle at 18% 50%,rgba(225,173,98,.25),transparent 38%);
}
.hero::after{
  height:clamp(320px,38vh,480px);
  background:linear-gradient(to bottom,rgba(43,23,15,0) 0%,rgba(43,23,15,.42) 44%,var(--cream) 100%);
}
.hero h1,
.hero .eyebrow,
.hero-sub,
.hero-actions{
  position:relative;
  z-index:2;
}
.hero-sub{
  color:rgba(255,247,236,.84);
}

.section,
.section--tint,
.cta{
  color:var(--coffee-text);
}
.section{
  background:
    radial-gradient(circle at 86% 10%,rgba(225,173,98,.14),transparent 28%),
    linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);
}
.section--tint{
  background:
    radial-gradient(circle at 15% 0%,rgba(200,138,69,.18),transparent 30%),
    radial-gradient(circle at 92% 16%,rgba(233,185,73,.12),transparent 26%),
    linear-gradient(180deg,var(--cream) 0%,#fbf0e1 48%,var(--cream-2) 100%);
}
#menu{
  margin-top:-1px;
  padding-top:clamp(5rem,10vw,7rem);
}
#why,
#gallery{
  background:
    radial-gradient(circle at 10% 18%,rgba(225,173,98,.12),transparent 25%),
    linear-gradient(180deg,#fffaf2 0%,var(--cream-2) 100%);
}
#experiences,
#about{
  background:
    radial-gradient(circle at 80% 8%,rgba(111,74,50,.10),transparent 28%),
    linear-gradient(180deg,var(--cream-2) 0%,#fff7ec 100%);
}

.section-head h2,
.subhead,
.feature h3,
.quote p,
.about-copy p.lead,
.cta h2{
  color:var(--coffee-text);
}
.section-head p,
.menu-foot p,
.feature p,
.quote .who span,
.about-copy p,
.cta p,
.cta-meta div{
  color:var(--coffee-muted);
}
.eyebrow,
.subhead::before,
.food-card .tag,
.poster .name small,
.foot-col h5{
  color:#b8782f;
}
.section-head h2 em,
.hero h1 em,
.cta h2 em,
.gold-text{
  background:linear-gradient(135deg,#8f551f 0%,#c88a45 42%,#e1ad62 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

.btn{
  background:linear-gradient(135deg,#f3c778 0%,#d99743 48%,#b56f24 100%);
  color:#251207;
  box-shadow:0 14px 34px -16px rgba(181,111,36,.58);
}
.btn:hover{
  box-shadow:0 20px 46px -18px rgba(181,111,36,.7);
}
.btn--ghost{
  color:var(--coffee-text);
  background:rgba(255,250,242,.58);
  border-color:rgba(111,74,50,.22);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{
  color:#8f551f;
  background:rgba(255,250,242,.9);
  border-color:rgba(181,111,36,.45);
}
.hero .btn--ghost,
.cta-inner .btn--ghost{
  color:#fff7ec;
  background:rgba(43,23,15,.18);
  border-color:rgba(255,247,236,.34);
}
.hero .btn--ghost:hover,
.cta-inner .btn--ghost:hover{
  color:#ffe7bd;
  border-color:rgba(225,173,98,.78);
}

.poster,
.food-card,
.gcell,
.exp-photo,
.about-media img{
  border-color:var(--coffee-line);
  box-shadow:var(--coffee-shadow);
}
.poster:hover,
.food-card:hover,
.gcell:hover,
.exp-photo:hover,
.about-media img:hover{
  border-color:rgba(181,111,36,.42);
}
.poster::after{
  background:linear-gradient(to top,rgba(35,18,10,.92),rgba(35,18,10,.18) 58%,rgba(35,18,10,.18));
}
.food-card .grad{
  background:linear-gradient(to top,rgba(35,18,10,.9),rgba(35,18,10,.10) 58%,rgba(35,18,10,.16));
}
.poster .name,
.food-card h4,
.price,
.food-card .zoom{
  color:#fff7ec;
}
.price,
.food-card .zoom{
  background:rgba(43,23,15,.72);
  border-color:rgba(225,173,98,.34);
}

.feature,
.quote{
  background:
    linear-gradient(160deg,rgba(255,252,247,.92),rgba(247,234,216,.86));
  border-color:var(--coffee-line);
  box-shadow:var(--coffee-shadow);
}
.feature:hover,
.quote:hover{
  border-color:rgba(181,111,36,.38);
  background:linear-gradient(160deg,#fffaf2,#f5e3cc);
}
.feature .ic{
  background:radial-gradient(circle at 30% 30%,rgba(225,173,98,.38),rgba(225,173,98,.12));
  border-color:rgba(181,111,36,.28);
  color:#9f5f24;
}
.quote .stars{
  color:#b8782f;
}
.quote .av{
  background:linear-gradient(135deg,#f3c778,#c88a45);
  color:#251207;
}

.exp-photo .badge{
  background:rgba(43,23,15,.84);
  border-color:rgba(225,173,98,.34);
}
.exp-photo .badge b{
  color:#ffe1a6;
}
.exp-photo .badge span{
  color:rgba(255,247,236,.72);
}
.about-list .chk{
  background:rgba(225,173,98,.18);
  border-color:rgba(181,111,36,.30);
  color:#9f5f24;
}

.cta{
  background:linear-gradient(180deg,#fff7ec 0%,#f1dcc1 100%);
}
.cta-inner{
  background:
    radial-gradient(circle at 12% 0%,rgba(255,231,189,.42),transparent 32%),
    linear-gradient(135deg,#4a2c1b 0%,#2b170f 100%);
  border-color:rgba(225,173,98,.30);
  color:#fff7ec;
  box-shadow:0 28px 84px -44px rgba(43,23,15,.68);
}
.cta-inner h2,
.cta-inner p,
.cta-inner .cta-meta div,
.cta-inner .cta-meta b{
  color:#fff7ec;
}
.cta-inner p,
.cta-inner .cta-meta div{
  color:rgba(255,247,236,.76);
}

.footer{
  background:linear-gradient(180deg,#2b170f 0%,#1f120c 100%);
  border-top-color:rgba(225,173,98,.22);
}
.footer,
.footer .foot-bottom .tag{
  color:#fff7ec;
}
.foot-brand p,
.foot-col a,
.foot-col span,
.foot-bottom p{
  color:rgba(255,247,236,.68);
}
.foot-col a:hover,
.foot-socials a:hover{
  color:#f3c778;
}
.foot-socials a{
  border-color:rgba(255,247,236,.16);
  color:rgba(255,247,236,.68);
}

.drawer{
  background:rgba(43,23,15,.97);
}
.drawer a{
  color:#fff7ec;
}
.drawer a:hover{
  color:#f3c778;
}

@media (max-width:900px){
  .hero{
    min-height:100svh;
    padding-top:clamp(6.8rem,13vh,8rem);
    background-position:center top;
  }
  .hero::before{
    background:
      linear-gradient(180deg,rgba(43,23,15,.46) 0%,rgba(43,23,15,.60) 48%,rgba(43,23,15,.76) 100%),
      radial-gradient(circle at 50% 38%,rgba(225,173,98,.20),transparent 44%);
  }
  .hero::after{
    height:42vh;
    background:linear-gradient(to bottom,rgba(43,23,15,0) 0%,rgba(43,23,15,.54) 42%,var(--cream) 100%);
  }
  .hero-copy{
    max-width:680px;
  }
  .hero h1{
    font-size:clamp(2.25rem,9vw,4.5rem);
  }
  .hero-sub{
    max-width:34rem;
    color:rgba(255,247,236,.9);
  }
  .menu-head{
    align-items:center;
    text-align:center;
    justify-content:center;
  }
  .menu-head .section-head,
  .section-head{
    margin-inline:auto;
    text-align:center;
  }
  .section-head p{
    margin-inline:auto;
  }
  .feature,
  .quote{
    border-radius:20px;
  }
}

@media (max-width:620px){
  .section,
  .section--tint,
  .cta{
    padding-block:clamp(3.6rem,12vw,5rem);
  }
  #menu{
    padding-top:clamp(4rem,13vw,5.5rem);
  }
  .hero-actions{
    width:100%;
    max-width:360px;
    margin-inline:auto;
  }
  .hero-actions .btn{
    width:100%;
    justify-content:center;
    padding:1rem 1.25rem;
  }
  .drinks-grid,
  .food-grid,
  .why-grid{
    gap:1rem;
  }
  .poster,
  .food-card,
  .feature,
  .quote,
  .cta-inner{
    border-radius:22px;
  }
  .feature,
  .quote{
    padding:1.55rem 1.3rem;
  }
  .quote:hover{
    transform:translateY(-4px);
  }
  .gallery{
    gap:.85rem;
  }
  .cta-inner{
    padding:clamp(2rem,8vw,3rem) 1.25rem;
  }
  .cta-meta{
    gap:1rem;
    align-items:center;
  }
  .cta-meta div{
    width:100%;
    justify-content:center;
  }
  .drawer a{
    font-size:clamp(1.65rem,8vw,2.1rem);
  }
}

@media (max-width:480px){
  .header.scrolled{
    background:rgba(43,23,15,.94);
  }
  .hero h1{
    font-size:clamp(2.05rem,10.5vw,3.3rem);
  }
  .hero-sub{
    font-size:.96rem;
  }
  .section-head h2,
  .cta h2{
    font-size:clamp(2rem,10vw,3rem);
  }
  .subhead{
    justify-content:center;
    text-align:center;
  }
  .poster figcaption,
  .food-card .info{
    padding:1.05rem;
  }
}



/* ============================================================
   Final client-demo polish — gallery, footer, and premium motion
   ============================================================ */
#gallery{
  position:relative;
  overflow:hidden;
  padding-top:clamp(5rem,10vw,7.25rem);
  background:
    radial-gradient(circle at 18% 12%,rgba(225,173,98,.18),transparent 30%),
    radial-gradient(circle at 82% 18%,rgba(111,74,50,.10),transparent 28%),
    linear-gradient(180deg,#fffaf2 0%,#f7ead8 100%);
}
#gallery::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.20),transparent 34%,rgba(74,44,27,.05));
}
#gallery .wrap{
  position:relative;
}
#gallery .section-head{
  max-width:720px;
}
#gallery .section-head h2{
  text-wrap:balance;
}
#gallery .section-head p{
  max-width:58ch;
}
.gallery{
  width:min(100%,1060px);
  margin:clamp(2.6rem,5vw,3.8rem) auto 0;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:170px;
  grid-auto-flow:dense;
  gap:clamp(.9rem,1.6vw,1.15rem);
}
.gcell{
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  padding:0;
  border:1px solid rgba(111,74,50,.18);
  border-radius:26px;
  background:#ead6bd;
  box-shadow:0 26px 74px -44px rgba(62,35,18,.50);
  isolation:isolate;
  transform:translateZ(0);
  transition:transform .65s var(--ease),box-shadow .65s var(--ease),border-color .65s var(--ease),filter .65s var(--ease);
}
.gcell:nth-child(1){grid-column:1 / span 3;grid-row:span 2;}
.gcell:nth-child(2){grid-column:4 / span 5;grid-row:span 1;}
.gcell:nth-child(3){grid-column:9 / span 4;grid-row:span 1;}
.gcell:nth-child(4){grid-column:4 / span 3;grid-row:span 1;}
.gcell:nth-child(5){grid-column:7 / span 6;grid-row:span 1;}
.gcell:nth-child(6){grid-column:1 / span 12;grid-row:span 1;}
.gcell img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(1.03) contrast(1.01) brightness(1.01);
  transition:transform 1s var(--ease),filter .8s var(--ease);
}
.gcell:nth-child(6) img{
  object-position:center 44%;
}
.gcell::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(255,247,236,.10),transparent 38%),
    linear-gradient(to top,rgba(43,23,15,.46),transparent 58%);
  opacity:.62;
  transition:opacity .55s var(--ease);
}
.gcell::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 0%,rgba(255,247,236,.34) 45%,transparent 68%);
  transform:translateX(-130%);
  transition:transform .9s var(--ease);
}
.gcell:hover{
  transform:translateY(-8px) scale(1.012);
  border-color:rgba(181,111,36,.46);
  box-shadow:0 32px 90px -42px rgba(62,35,18,.64);
}
.gcell:hover img{
  transform:scale(1.06);
  filter:saturate(1.08) contrast(1.03) brightness(1.03);
}
.gcell:hover::after{
  opacity:.30;
}
.gcell:hover::before{
  transform:translateX(130%);
}
.gcell .pin{
  z-index:3;
  right:1rem;
  bottom:1rem;
  background:rgba(43,23,15,.72);
  color:#f3c778;
  border-color:rgba(255,247,236,.24);
  backdrop-filter:blur(10px);
}

.footer{
  position:relative;
  margin-top:-1px;
  padding:clamp(4rem,7vw,5.5rem) 0 2rem;
  background:
    radial-gradient(circle at 16% 0%,rgba(225,173,98,.16),transparent 34%),
    linear-gradient(180deg,#301a10 0%,#1a0e09 100%);
  border-top:1px solid rgba(225,173,98,.22);
  box-shadow:inset 0 1px 0 rgba(255,247,236,.05);
}
.footer::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(243,199,120,.72),transparent);
}
.foot-grid{
  display:grid;
  grid-template-columns:minmax(260px,1.45fr) repeat(3,minmax(130px,1fr));
  gap:clamp(2rem,4vw,4rem);
  align-items:start;
}
.foot-brand{
  max-width:360px;
}
.foot-brand img{
  display:block;
  width:min(185px,72vw);
  height:auto;
  max-height:48px;
  object-fit:contain;
  object-position:left center;
  margin:0 0 1.15rem;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.24));
}
.foot-brand p{
  max-width:31ch;
  color:rgba(255,247,236,.74);
  line-height:1.75;
}
.foot-socials{
  gap:.8rem;
  margin-top:1.45rem;
}
.foot-socials a{
  width:42px;
  height:42px;
  border-radius:999px;
  background:rgba(255,247,236,.045);
  border-color:rgba(255,247,236,.14);
  color:rgba(255,247,236,.74);
  transition:transform .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease);
}
.foot-socials a:hover{
  transform:translateY(-5px);
  color:#251207;
  background:linear-gradient(135deg,#f3c778,#d99743);
  border-color:rgba(243,199,120,.72);
  box-shadow:0 18px 36px -22px rgba(243,199,120,.72);
}
.foot-col h5{
  color:#d99743;
  margin-bottom:1.1rem;
  letter-spacing:.22em;
}
.foot-col li{
  margin-bottom:.78rem;
}
.foot-col a,
.foot-col span{
  color:rgba(255,247,236,.70);
  line-height:1.55;
}
.foot-col a{
  position:relative;
}
.foot-col a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:100%;
  height:1px;
  background:#f3c778;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--ease);
}
.foot-col a:hover{
  color:#f3c778;
}
.foot-col a:hover::after{
  transform:scaleX(1);
}
.foot-bottom{
  margin-top:clamp(2.6rem,5vw,3.8rem);
  padding-top:1.6rem;
  border-top:1px solid rgba(255,247,236,.10);
}
.foot-bottom p{
  color:rgba(255,247,236,.60);
}
.foot-bottom .tag{
  color:#f3c778;
  text-shadow:0 0 24px rgba(243,199,120,.14);
}

/* Premium motion system */
.btn,
.poster,
.food-card,
.gcell,
.feature,
.quote,
.cta-inner{
  will-change:transform;
}
.btn{
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.34) 42%,transparent 66%);
  transform:translateX(-130%);
  transition:transform .75s var(--ease);
}
.btn:hover::before{
  transform:translateX(130%);
}
.reveal{
  opacity:0;
  transform:translateY(34px) scale(.985);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
.gallery .gcell.reveal:nth-child(1){transition-delay:.04s;}
.gallery .gcell.reveal:nth-child(2){transition-delay:.10s;}
.gallery .gcell.reveal:nth-child(3){transition-delay:.16s;}
.gallery .gcell.reveal:nth-child(4){transition-delay:.22s;}
.gallery .gcell.reveal:nth-child(5){transition-delay:.28s;}
.gallery .gcell.reveal:nth-child(6){transition-delay:.34s;}
.section-head h2 em{
  position:relative;
}
.section-head h2 em::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:.02em;
  height:.08em;
  border-radius:999px;
  background:rgba(225,173,98,.34);
  z-index:-1;
}

@media (max-width:1080px){
  .gallery{
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-auto-rows:180px;
  }
  .gcell:nth-child(1){grid-column:1 / span 3;grid-row:span 2;}
  .gcell:nth-child(2){grid-column:4 / span 3;grid-row:span 1;}
  .gcell:nth-child(3){grid-column:4 / span 3;grid-row:span 1;}
  .gcell:nth-child(4){grid-column:1 / span 3;grid-row:span 1;}
  .gcell:nth-child(5){grid-column:4 / span 3;grid-row:span 1;}
  .gcell:nth-child(6){grid-column:1 / span 6;grid-row:span 1;}
}
@media (max-width:900px){
  .foot-grid{
    grid-template-columns:1.2fr 1fr 1fr;
  }
  .foot-brand{
    grid-column:1 / -1;
    max-width:620px;
  }
}
@media (max-width:700px){
  .gallery{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    gap:1rem;
    width:min(100%,420px);
  }
  .gcell,
  .gcell:nth-child(n){
    grid-column:auto;
    grid-row:auto;
    aspect-ratio:4 / 5;
    border-radius:24px;
  }
  .gcell:nth-child(2),
  .gcell:nth-child(3),
  .gcell:nth-child(5),
  .gcell:nth-child(6){
    aspect-ratio:16 / 11;
  }
  .foot-grid{
    grid-template-columns:1fr;
    gap:2rem;
    text-align:left;
  }
  .foot-brand{
    max-width:none;
  }
  .foot-brand img{
    width:min(170px,70vw);
  }
  .foot-bottom{
    align-items:flex-start;
    justify-content:flex-start;
    text-align:left;
  }
}
@media (max-width:480px){
  #gallery{
    padding-top:4.2rem;
  }
  .gallery{
    margin-top:2rem;
  }
  .gcell,
  .gcell:nth-child(n){
    border-radius:22px;
  }
  .footer{
    padding-top:3.4rem;
  }
  .foot-socials a{
    width:40px;
    height:40px;
  }
}
@media (prefers-reduced-motion:reduce){
  .btn::before,
  .gcell::before{
    display:none!important;
  }
}


/* ============================================================
   mobile clarity patch: no blur-based animation or heavy glass blur
   ============================================================ */
@media (max-width:760px){
  .reveal,
  .reveal.is-visible{
    opacity:1!important;
    filter:none!important;
    transform:none!important;
    transition:opacity .45s var(--ease),transform .45s var(--ease);
  }
  .header.scrolled,
  .drawer,
  .btn--ghost,
  .price,
  .hero-chip,
  .exp-photo .badge,
  .gcell .pin{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  .gallery img,
  .poster img,
  .food-card img,
  .exp-slide,
  .about-media img{
    filter:none!important;
    image-rendering:auto;
  }
}

/* If a mobile file preview delays JavaScript, keep the page readable. */
@supports (-webkit-touch-callout:none){
  .reveal,
  .reveal.is-visible{
    opacity:1!important;
    filter:none!important;
    transform:none!important;
  }
}

/* ============================================================
   Final demo pass — compact people-first gallery + theme toggle
   ============================================================ */
html,body{transition:background-color .45s var(--ease),color .45s var(--ease)}
/* Hero heading/sub must never transition color — prevents black flash on theme switch */
.hero h1,.hero .eyebrow,.hero-sub,.hero-chip b,.hero-chip span{transition:opacity .9s var(--ease),transform .9s var(--ease)!important}
body,
.header,
.drawer,
.section,
.feature,
.poster,
.quote,
.food-card,
.cta-inner,
.gcell,
.footer,
.foot-socials a,
.btn,
.btn--ghost,
.theme-toggle,
.theme-toggle__shell,
.theme-toggle__thumb{
  transition:background-color .45s var(--ease),background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease),filter .45s var(--ease),opacity .45s var(--ease);
}

#gallery{
  padding-top:clamp(4.3rem,7vw,5.6rem)!important;
  padding-bottom:clamp(3.6rem,6vw,4.8rem);
}
#gallery .section-head{
  max-width:690px;
  margin-inline:auto;
}
#gallery .section-head p{
  max-width:54ch;
}
#gallery .gallery{
  width:min(100%,980px)!important;
  margin:clamp(1.9rem,3.8vw,2.8rem) auto 0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:auto!important;
  gap:clamp(.85rem,1.4vw,1.05rem)!important;
}
#gallery .gcell,
#gallery .gcell:nth-child(n){
  grid-column:auto!important;
  grid-row:auto!important;
  aspect-ratio:4 / 4.65!important;
  border-radius:24px!important;
  overflow:hidden;
}
#gallery .gcell img{object-position:center center}
#gallery .gcell:nth-child(2) img{object-position:center 35%}
#gallery .gcell:nth-child(5) img{object-position:center 44%}
#gallery .gcell:nth-child(6) img{object-position:center 34%}
#gallery .gcell .pin{
  padding:.5rem .8rem;
  font-size:.76rem;
  letter-spacing:.02em;
}

.theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  padding:.38rem .66rem .38rem .42rem;
  border-radius:999px;
  border:1px solid rgba(111,74,50,.18);
  background:rgba(255,247,236,.8);
  color:#4a2c1b;
  box-shadow:0 10px 28px -18px rgba(62,35,18,.35);
}
.theme-toggle:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px -20px rgba(62,35,18,.42);
}
.theme-toggle__shell{
  position:relative;
  width:56px;
  height:30px;
  border-radius:999px;
  background:linear-gradient(135deg,#f7d98a 0%,#e9b949 58%,#d99743 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  flex:none;
}
.theme-toggle__thumb{
  position:absolute;
  top:4px;
  left:4px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:linear-gradient(180deg,#fff8eb 0%,#f3e4c8 100%);
  box-shadow:0 8px 18px rgba(74,44,27,.24);
}
.theme-toggle__sun,
.theme-toggle__moon{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:.75rem;
  line-height:1;
}
.theme-toggle__sun{left:8px;color:#4a2c1b}
.theme-toggle__moon{right:9px;color:#fff8eb}
.theme-toggle__text{
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}
.theme-toggle.is-bouncing .theme-toggle__thumb{animation:themeThumbBounce .45s var(--ease)}
@keyframes themeThumbBounce{
  0%{transform:translateX(0) scale(1)}
  50%{transform:translateX(var(--theme-thumb-bounce,0)) scale(1.08)}
  100%{transform:translateX(var(--theme-thumb-end,0)) scale(1)}
}
body.theme-dark{color-scheme:dark}
body.theme-dark .theme-toggle{
  background:rgba(26,14,9,.88);
  color:#f7ead8;
  border-color:rgba(243,199,120,.22);
  box-shadow:0 14px 32px -18px rgba(0,0,0,.55);
}
body.theme-dark .theme-toggle__shell{
  background:linear-gradient(135deg,#2a1a12 0%,#17100d 100%);
}
body.theme-dark .theme-toggle__thumb{
  transform:translateX(26px);
  background:linear-gradient(180deg,#f3c778 0%,#d99743 100%);
  box-shadow:0 10px 20px rgba(0,0,0,.35);
}
body.theme-dark .theme-toggle.is-bouncing .theme-toggle__thumb{
  --theme-thumb-bounce:26px;
  --theme-thumb-end:26px;
}
body:not(.theme-dark) .theme-toggle.is-bouncing .theme-toggle__thumb{
  --theme-thumb-bounce:0px;
  --theme-thumb-end:0px;
}

/* Dark theme polish */
body.theme-dark{
  --ink:#120b09;
  --ink-2:#19110e;
  --panel:#1f140f;
  --panel-2:#261915;
  --line:rgba(243,199,120,.14);
  --line-soft:rgba(255,247,236,.08);
  --white:#f7ead8;
  --muted:#c8b6a6;
  --muted-2:#a48f7d;
  --coffee:#1a120d;
  --coffee-text:#f7ead8;
  --coffee-muted:#cbb6a2;
  --coffee-line:rgba(243,199,120,.12);
  --cream:#18110d;
  --cream-2:#201611;
  background:#120b09;
  color:#f7ead8;
}
body.theme-dark::before{opacity:.05;mix-blend-mode:screen}
body.theme-dark .header{
  background:rgba(18,11,9,.88)!important;
  border-bottom:1px solid rgba(243,199,120,.10);
  box-shadow:0 18px 34px -26px rgba(0,0,0,.7);
}
body.theme-dark .drawer{
  background:linear-gradient(180deg,rgba(18,11,9,.98) 0%,rgba(12,7,6,.98) 100%)!important;
}
body.theme-dark .section,
body.theme-dark .section--tint,
body.theme-dark .quote,
body.theme-dark .feature,
body.theme-dark .poster,
body.theme-dark .food-card,
body.theme-dark .cta-inner,
body.theme-dark .experience-shell,
body.theme-dark .exp-wrap{
  border-color:rgba(243,199,120,.12)!important;
}
body.theme-dark .cta{
  background:linear-gradient(180deg,#1a120d 0%,#120b09 100%)!important;
}

body.theme-dark #gallery{
  background:
    radial-gradient(circle at 18% 10%,rgba(225,173,98,.12),transparent 32%),
    radial-gradient(circle at 80% 12%,rgba(243,199,120,.08),transparent 26%),
    linear-gradient(180deg,#1a120d 0%,#120b09 100%)!important;
}
body.theme-dark #gallery::before{
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 34%,rgba(0,0,0,.24))!important;
}
body.theme-dark #gallery .section-head p,
body.theme-dark .section-head p,
body.theme-dark .why-copy p,
body.theme-dark .about-copy p,
body.theme-dark .hero-sub,
body.theme-dark .foot-brand p,
body.theme-dark .foot-col a,
body.theme-dark .foot-col span,
body.theme-dark .foot-bottom p{
  color:rgba(247,234,216,.74)!important;
}
body.theme-dark #gallery .gcell{
  background:#201611!important;
  border-color:rgba(243,199,120,.14)!important;
  box-shadow:0 24px 60px -38px rgba(0,0,0,.72)!important;
}
body.theme-dark #gallery .gcell::after{
  background:
    linear-gradient(180deg,rgba(255,247,236,.04),transparent 38%),
    linear-gradient(to top,rgba(0,0,0,.56),transparent 60%)!important;
}
body.theme-dark #gallery .gcell .pin{
  background:rgba(12,7,6,.74)!important;
  color:#f3c778!important;
  border-color:rgba(243,199,120,.2)!important;
}
body.theme-dark .footer{
  background:
    radial-gradient(circle at 16% 0%,rgba(243,199,120,.12),transparent 34%),
    linear-gradient(180deg,#150c09 0%,#080504 100%)!important;
  border-top-color:rgba(243,199,120,.14)!important;
}
body.theme-dark .foot-socials a{
  background:rgba(255,247,236,.03)!important;
  border-color:rgba(243,199,120,.12)!important;
  color:rgba(247,234,216,.72)!important;
}
body.theme-dark .btn--ghost{
  border-color:rgba(243,199,120,.22)!important;
  background:rgba(255,247,236,.03)!important;
  color:#f7ead8!important;
}
body.theme-dark .poster::after,
body.theme-dark .food-card::after,
body.theme-dark .quote::after,
body.theme-dark .feature::after{
  opacity:.75;
}

@media (max-width:980px){
  #gallery .gallery{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:min(100%,760px)!important;
  }
  #gallery .gcell,
  #gallery .gcell:nth-child(n){aspect-ratio:4 / 4.9!important}
  .theme-toggle__text{display:none}
}
@media (max-width:700px){
  #gallery{padding-top:3.9rem!important;padding-bottom:3.2rem!important}
  #gallery .gallery{
    grid-template-columns:1fr!important;
    width:min(100%,420px)!important;
    gap:.95rem!important;
  }
  #gallery .gcell,
  #gallery .gcell:nth-child(n){aspect-ratio:4 / 4.7!important}
  .theme-toggle{padding:.34rem .38rem!important}
  .theme-toggle.theme-toggle--drawer{
    width:100%;justify-content:space-between;padding:.55rem .7rem!important;
  }
  .theme-toggle.theme-toggle--drawer .theme-toggle__text{display:block}
}

/* ============================================================
   Mobile theme stability fix + full-page dark mode coverage
   ============================================================ */

/* Prevent the mobile theme switch from feeling stuck while scrolling.
   On phones, the toggle lives inside the burger drawer only. */
@media (max-width:900px){
  .header .nav-cta > .theme-toggle{
    display:none!important;
  }
  .drawer .drawer-theme{
    margin-top:1.35rem;
    width:min(260px,78vw);
  }
  .drawer .theme-toggle--drawer{
    display:flex!important;
    width:100%;
    justify-content:space-between;
    padding:.62rem .72rem!important;
    background:rgba(255,247,236,.92);
  }
  body.theme-dark .drawer .theme-toggle--drawer{
    background:rgba(26,14,9,.92)!important;
  }
}

/* Make the fixed mobile header cleaner and less intrusive. */
@media (max-width:900px){
  .header{
    background:linear-gradient(180deg,rgba(74,44,27,.88),rgba(74,44,27,.64))!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .header.scrolled{
    background:rgba(74,44,27,.94)!important;
  }
  body.theme-dark .header,
  body.theme-dark .header.scrolled{
    background:rgba(18,11,9,.94)!important;
  }
}

/* Full light/dark theme variables using attributes so all sections obey the same state. */
body.theme-light{
  --ink:#4a2c1b;
  --ink-2:#6f4a32;
  --panel:#fff7ec;
  --panel-2:#f7ead8;
  --line:rgba(181,111,36,.22);
  --line-soft:rgba(111,74,50,.14);
  --white:#2a1710;
  --muted:#6f5a4c;
  --muted-2:#8b786a;
  --cream:#fff7ec;
  --cream-2:#f7ead8;
  --coffee:#4a2c1b;
  --coffee-text:#2a1710;
  --coffee-muted:#6f5a4c;
  --coffee-line:rgba(111,74,50,.14);
  background:#fff7ec;
  color:#2a1710;
}

body.theme-dark{
  --ink:#120b09;
  --ink-2:#1a100c;
  --panel:#201611;
  --panel-2:#291b15;
  --line:rgba(243,199,120,.18);
  --line-soft:rgba(255,247,236,.10);
  --white:#f7ead8;
  --muted:#cbb6a2;
  --muted-2:#a48f7d;
  --cream:#120b09;
  --cream-2:#1a100c;
  --coffee:#120b09;
  --coffee-text:#f7ead8;
  --coffee-muted:#cbb6a2;
  --coffee-line:rgba(243,199,120,.14);
  background:#120b09!important;
  color:#f7ead8!important;
}

/* Light mode polished coffee base */
body.theme-light .section,
body.theme-light .section--tint{
  background:
    radial-gradient(circle at 14% 10%,rgba(225,173,98,.16),transparent 30%),
    linear-gradient(180deg,#fff7ec 0%,#f7ead8 100%)!important;
  color:#2a1710!important;
}
body.theme-light .section-head h2,
body.theme-light .subhead,
body.theme-light .feature h3,
body.theme-light .quote p,
body.theme-light .about-copy p.lead{
  color:#2a1710!important;
}
body.theme-light .section-head p,
body.theme-light .feature p,
body.theme-light .quote .who span,
body.theme-light .about-copy p,
body.theme-light .menu-foot p{
  color:#6f5a4c!important;
}
body.theme-light .feature,
body.theme-light .quote{
  background:linear-gradient(160deg,#fffaf2,#f4e2ca)!important;
  border-color:rgba(111,74,50,.14)!important;
  box-shadow:0 22px 50px -36px rgba(62,35,18,.38)!important;
}

/* Dark mode must apply to every content section, not only hero/gallery/footer. */
body.theme-dark .section,
body.theme-dark .section--tint{
  background:
    radial-gradient(circle at 16% 8%,rgba(225,173,98,.10),transparent 32%),
    radial-gradient(circle at 84% 18%,rgba(243,199,120,.06),transparent 28%),
    linear-gradient(180deg,#1a100c 0%,#120b09 100%)!important;
  color:#f7ead8!important;
}
body.theme-dark .section-head h2,
body.theme-dark .subhead,
body.theme-dark .feature h3,
body.theme-dark .quote p,
body.theme-dark .food-card h4,
body.theme-dark .about-copy p.lead,
body.theme-dark .cta h2{
  color:#f7ead8!important;
}
body.theme-dark .section-head p,
body.theme-dark .feature p,
body.theme-dark .quote .who span,
body.theme-dark .about-copy p,
body.theme-dark .menu-foot p,
body.theme-dark .cta p{
  color:rgba(247,234,216,.74)!important;
}
body.theme-dark .feature,
body.theme-dark .quote,
body.theme-dark .cta-inner{
  background:linear-gradient(160deg,#241711,#150d0a)!important;
  border-color:rgba(243,199,120,.14)!important;
  box-shadow:0 24px 60px -42px rgba(0,0,0,.76)!important;
}
body.theme-dark .poster,
body.theme-dark .food-card{
  background:#1f140f!important;
  border-color:rgba(243,199,120,.14)!important;
  box-shadow:0 24px 60px -42px rgba(0,0,0,.72)!important;
}
body.theme-dark .poster::after,
body.theme-dark .food-card .grad{
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.18) 56%,rgba(0,0,0,.28))!important;
}
body.theme-dark .price{
  background:rgba(15,8,6,.78)!important;
  border-color:rgba(243,199,120,.22)!important;
  color:#f3c778!important;
}
body.theme-dark .btn--ghost{
  background:rgba(255,247,236,.035)!important;
  color:#f7ead8!important;
  border-color:rgba(243,199,120,.22)!important;
}

/* Gallery compactness maintained on phones after theme updates. */
@media (max-width:700px){
  #gallery .section-head h2{
    font-size:clamp(2rem,10vw,3rem)!important;
  }
  #gallery .gallery{
    margin-top:1.7rem!important;
  }
}

/* ============================================================
   Hero text — no color transition to prevent black flash.
   Colors are set per-theme below; only opacity/transform animate.
   ============================================================ */
.hero h1,
.hero .eyebrow,
.hero-chip b,
.hero-chip span,
.hero-sub{
  transition:opacity .9s var(--ease), transform .9s var(--ease) !important;
}
.hero h1 em{
  transition:none!important;
}

/* Dark mode hero text — light cream */
body.theme-dark .hero h1,
body.theme-dark .hero .eyebrow,
body.theme-dark .hero-chip b,
body.theme-dark .hero-chip span{
  color:#f6f3ec!important;
}
body.theme-dark .hero-sub{
  color:rgba(246,243,236,.84)!important;
}

/* Light mode hero text — also light cream (sits over dark photo) */
body.theme-light .hero h1,
body.theme-light .hero .eyebrow,
body.theme-light .hero-chip b,
body.theme-light .hero-chip span{
  color:#f6f3ec!important;
}
body.theme-light .hero h1 em{
  background:linear-gradient(135deg,#f7d98a 0%,#e9b949 42%,#c8902b 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}
body.theme-light .hero-sub{
  color:rgba(246,243,236,.84)!important;
}

/* ============================================================
   Light mode — header, nav links & bottom border fix
   ============================================================ */

/* Give the header a visible warm background in light mode */
body.theme-light .header{
  background:rgba(255,247,236,.92)!important;
  border-bottom:1px solid rgba(111,74,50,.18)!important;
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 4px 24px -16px rgba(62,35,18,.22);
}
body.theme-light .header.scrolled{
  background:rgba(255,247,236,.97)!important;
  border-bottom:1px solid rgba(181,111,36,.28)!important;
  box-shadow:0 8px 32px -18px rgba(62,35,18,.32);
}

/* Nav link colours in light mode — dark coffee text, gold hover */
body.theme-light .nav-links a{
  color:#2a1710!important;
  opacity:.82;
}
body.theme-light .nav-links a:hover,
body.theme-light .nav-links a.active{
  opacity:1;
  color:#9f5f24!important;
}

/* Keep the gold underline indicator visible in light mode */
body.theme-light .nav-links a::after{
  background:linear-gradient(135deg,#f3c778 0%,#d99743 48%,#b56f24 100%);
}

/* Mobile header in light mode */
@media (max-width:900px){
  body.theme-light .header{
    background:rgba(255,247,236,.95)!important;
    border-bottom:1px solid rgba(111,74,50,.20)!important;
  }
  body.theme-light .header.scrolled{
    background:rgba(255,247,236,.98)!important;
  }
  body.theme-light .burger-label span,
  body.theme-light .burger span{
    background:#9f5f24!important;
  }
}

/* ============================================================
   Burger menu click fix — mobile drawer reliable layer handling
   ============================================================ */
.header{
  pointer-events:auto!important;
}
.nav,
.nav-cta,
.burger{
  pointer-events:auto!important;
}
.burger{
  position:relative!important;
  z-index:1005!important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.drawer{
  z-index:1000!important;
  pointer-events:none;
}
.drawer.open{
  pointer-events:auto!important;
}
.drawer nav,
.drawer ul,
.drawer li,
.drawer a,
.drawer button{
  pointer-events:auto!important;
}
body.drawer-open{
  overflow:hidden;
}
@media (max-width:900px){
  .nav-cta{
    position:relative;
    z-index:1006;
  }
  .drawer{
    padding-top:88px;
  }
  .drawer.open{
    display:grid!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .drawer .drawer-theme{
    opacity:1!important;
    transform:none!important;
  }
  .drawer .theme-toggle--drawer{
    display:flex!important;
  }
}

/* ============================================================
   CSS-only mobile menu fix
   This removes JS dependency for the hamburger menu.
   ============================================================ */
.menu-toggle-check{
  position:fixed!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
  left:-9999px!important;
}

@media (max-width:900px){
  .header{
    z-index:8000!important;
  }

  .nav,
  .nav-cta{
    position:relative!important;
    z-index:8002!important;
  }

  .burger-label{
    display:flex!important;
    position:relative!important;
    z-index:8003!important;
    width:48px!important;
    height:48px!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:5px!important;
    border-radius:14px!important;
    border:1px solid rgba(243,199,120,.22)!important;
    background:rgba(255,247,236,.035)!important;
    cursor:pointer!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  .burger-label span{
    display:block!important;
    width:22px!important;
    height:2px!important;
    border-radius:99px!important;
    background:var(--gold)!important;
    transition:transform .28s var(--ease),opacity .28s var(--ease)!important;
  }

  #menuToggleCheck:checked ~ .header .burger-label span:nth-child(1){
    transform:translateY(7px) rotate(45deg)!important;
  }

  #menuToggleCheck:checked ~ .header .burger-label span:nth-child(2){
    opacity:0!important;
  }

  #menuToggleCheck:checked ~ .header .burger-label span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg)!important;
  }

  .drawer{
    position:fixed!important;
    inset:0!important;
    z-index:7999!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:6rem 1.25rem 2rem!important;
    background:rgba(48,26,16,.985)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-10px) scale(.99)!important;
    transition:opacity .32s var(--ease),visibility .32s var(--ease),transform .32s var(--ease)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  body.theme-dark .drawer{
    background:rgba(18,11,9,.99)!important;
  }

  #menuToggleCheck:checked ~ .drawer{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }

  .drawer nav,
  .drawer ul,
  .drawer li,
  .drawer a,
  .drawer button,
  .drawer label{
    pointer-events:auto!important;
  }

  .drawer ul{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:.55rem!important;
    text-align:center!important;
  }

  .drawer li{
    width:min(290px,84vw)!important;
  }

  .drawer a{
    display:flex!important;
    width:100%!important;
    justify-content:center!important;
    align-items:center!important;
    min-height:48px!important;
    opacity:1!important;
    transform:none!important;
    color:#fff7ec!important;
    font-family:var(--font-b)!important;
    font-size:1.05rem!important;
    font-weight:800!important;
    border-radius:16px!important;
    border:1px solid rgba(243,199,120,.13)!important;
    background:rgba(255,247,236,.035)!important;
  }

  .drawer a:hover,
  .drawer a:active{
    background:rgba(243,199,120,.12)!important;
    color:var(--gold-bright)!important;
  }

  .drawer .btn{
    margin-top:.65rem!important;
    background:var(--gold-grad)!important;
    color:#1a1407!important;
    border-color:transparent!important;
  }

  .drawer .drawer-theme{
    display:flex!important;
    justify-content:center!important;
    width:min(290px,84vw)!important;
    margin-top:.7rem!important;
    opacity:1!important;
    transform:none!important;
  }

  .drawer .theme-toggle--drawer{
    display:flex!important;
    width:100%!important;
    justify-content:space-between!important;
  }

  .drawer-close-label{
    position:absolute!important;
    top:1.1rem!important;
    right:1.1rem!important;
    width:48px!important;
    height:48px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:50%!important;
    border:1px solid rgba(243,199,120,.20)!important;
    background:rgba(255,247,236,.05)!important;
    color:var(--gold-bright)!important;
    font-size:2rem!important;
    line-height:1!important;
    cursor:pointer!important;
  }
}

@media (min-width:901px){
  .burger-label{
    display:none!important;
  }
  .drawer-close-label{
    display:none!important;
  }
}

/* Keep the CSS menu functional even if old JS classes are present. */
.drawer.open{
  opacity:1!important;
  visibility:visible!important;
}

/* ============================================================
   Premium mobile drawer polish
   Replaces full-screen menu look with a clean right-side panel.
   ============================================================ */
@media (max-width:900px){
  .header{
    z-index:9000!important;
  }

  .nav{
    min-height:74px!important;
  }

  .burger-label{
    width:48px!important;
    height:48px!important;
    border-radius:16px!important;
    background:rgba(255,247,236,.045)!important;
    border:1px solid rgba(243,199,120,.22)!important;
    box-shadow:0 12px 28px -22px rgba(0,0,0,.75)!important;
  }

  .drawer{
    position:fixed!important;
    inset:0!important;
    z-index:8999!important;
    display:block!important;
    padding:0!important;
    background:rgba(15,8,5,.52)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:none!important;
    transition:opacity .32s var(--ease),visibility .32s var(--ease)!important;
  }

  #menuToggleCheck:checked ~ .drawer{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .drawer nav{
    position:absolute!important;
    top:0!important;
    right:0!important;
    width:min(86vw,360px)!important;
    height:100%!important;
    min-height:100svh!important;
    padding:6.4rem 1.15rem 1.5rem!important;
    background:
      radial-gradient(circle at 20% 0%,rgba(243,199,120,.14),transparent 34%),
      linear-gradient(180deg,#3b2115 0%,#1a0e09 100%)!important;
    border-left:1px solid rgba(243,199,120,.18)!important;
    box-shadow:-28px 0 70px -44px rgba(0,0,0,.85)!important;
    transform:translateX(102%)!important;
    transition:transform .38s var(--ease)!important;
    overflow-y:auto!important;
  }

  body.theme-dark .drawer nav{
    background:
      radial-gradient(circle at 20% 0%,rgba(243,199,120,.10),transparent 34%),
      linear-gradient(180deg,#180d09 0%,#070403 100%)!important;
  }

  #menuToggleCheck:checked ~ .drawer nav{
    transform:none!important;
  }

  .drawer ul{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:.7rem!important;
    text-align:left!important;
  }

  .drawer li{
    width:100%!important;
    opacity:0!important;
    transform:translateX(18px)!important;
    transition:opacity .35s var(--ease),transform .35s var(--ease)!important;
  }

  #menuToggleCheck:checked ~ .drawer li{
    opacity:1!important;
    transform:none!important;
  }

  #menuToggleCheck:checked ~ .drawer li:nth-child(1){transition-delay:.06s!important}
  #menuToggleCheck:checked ~ .drawer li:nth-child(2){transition-delay:.10s!important}
  #menuToggleCheck:checked ~ .drawer li:nth-child(3){transition-delay:.14s!important}
  #menuToggleCheck:checked ~ .drawer li:nth-child(4){transition-delay:.18s!important}
  #menuToggleCheck:checked ~ .drawer li:nth-child(5){transition-delay:.22s!important}
  #menuToggleCheck:checked ~ .drawer li:nth-child(6){transition-delay:.26s!important}
  #menuToggleCheck:checked ~ .drawer li:nth-child(7){transition-delay:.30s!important}

  .drawer a{
    display:flex!important;
    width:100%!important;
    justify-content:space-between!important;
    align-items:center!important;
    min-height:52px!important;
    padding:.85rem 1rem!important;
    opacity:1!important;
    transform:none!important;
    color:#fff7ec!important;
    font-family:var(--font-b)!important;
    font-size:.98rem!important;
    font-weight:800!important;
    letter-spacing:.01em!important;
    border-radius:17px!important;
    border:1px solid rgba(243,199,120,.13)!important;
    background:rgba(255,247,236,.045)!important;
    box-shadow:none!important;
  }

  .drawer a::after{
    content:"›";
    color:var(--gold-bright);
    font-size:1.2rem;
    line-height:1;
    opacity:.82;
  }

  .drawer a:hover,
  .drawer a:active{
    background:rgba(243,199,120,.13)!important;
    color:var(--gold-bright)!important;
    transform:none!important;
  }

  .drawer .btn{
    margin-top:.25rem!important;
    background:var(--gold-grad)!important;
    color:#1a1407!important;
    border-color:transparent!important;
    justify-content:center!important;
    box-shadow:0 16px 34px -24px rgba(243,199,120,.75)!important;
  }

  .drawer .btn::after{
    color:#1a1407!important;
  }

  .drawer .drawer-theme{
    width:100%!important;
    margin-top:.5rem!important;
  }

  .drawer .theme-toggle--drawer{
    display:flex!important;
    width:100%!important;
    min-height:54px!important;
    justify-content:space-between!important;
    border-radius:17px!important;
    padding:.55rem .72rem!important;
  }

  .drawer-close-label{
    position:absolute!important;
    top:1.1rem!important;
    right:1.05rem!important;
    z-index:2!important;
    width:46px!important;
    height:46px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:50%!important;
    border:1px solid rgba(243,199,120,.22)!important;
    background:rgba(255,247,236,.06)!important;
    color:var(--gold-bright)!important;
    font-size:1.8rem!important;
    line-height:1!important;
    cursor:pointer!important;
    transition:background .28s var(--ease),transform .28s var(--ease)!important;
  }

  .drawer-close-label:hover,
  .drawer-close-label:active{
    background:rgba(243,199,120,.16)!important;
    transform:scale(.96)!important;
  }

  body.menu-open{
    overflow:hidden!important;
  }
}

@media (max-width:420px){
  .drawer nav{
    width:min(88vw,340px)!important;
  }

  .drawer a{
    min-height:50px!important;
    font-size:.95rem!important;
  }
}