/* ===========================================================
   Qalbi Coffee Co. — stylesheet
   =========================================================== */

:root{
  --cream:        #FBF2E4;
  --cream-2:      #F3E3CB;
  --cream-3:      #EFE0C8;
  --ink:          #3A2413;
  --brown:        #6B4226;
  --brown-deep:   #4A2C17;
  --brown-light:  #A97C50;
  --tan:          #D9BB93;
  --pink:         #F2607A;
  --pink-2:       #FF8FA3;
  --pink-light:   #FFE1E7;
  --green:        #8AA66F;
  --white:        #FFFFFF;

  --shadow-soft: 0 10px 30px rgba(74,44,23,0.10);
  --shadow-pop:  0 16px 40px rgba(242,96,122,0.25);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --font-head: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;
  --font-script: 'Caveat', cursive;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family: var(--font-head); color: var(--brown-deep); margin:0 0 .4em; line-height:1.15; }
h1{ font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight:600; }
h2{ font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight:600; }
h3{ font-size: 1.3rem; font-weight:600; }
p{ margin:0 0 1em; color: var(--brown); }
.wrap{ max-width: 1180px; margin:0 auto; padding: 0 24px; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.script{ font-family: var(--font-script); font-weight:700; color: var(--pink); }
.inline-script{ font-size: 1.3em; display:inline-block; transform: rotate(-2deg); }
.underline-accent{ position:relative; white-space:nowrap; }
.underline-accent::after{
  content:""; position:absolute; left:0; right:0; bottom:.02em; height:.32em;
  background: var(--pink-light); z-index:-1; border-radius: 6px;
  transform: scaleX(0); transform-origin:left; transition: transform .6s ease;
}
.is-visible .underline-accent::after{ transform: scaleX(1); }
.eyebrow{
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .14em;
  font-size: .78rem; font-weight:600; color: var(--pink); margin: 0 0 .8em;
}
.section-sub{ max-width: 560px; margin: -.4em auto 2.5em; font-size: 1.02rem; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  font-family: var(--font-head); font-weight:600; font-size: .98rem;
  padding: .95em 1.7em; border-radius: 999px; border: none; cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--pink), var(--pink-2));
  color: var(--white); box-shadow: var(--shadow-pop);
}
.btn-primary:hover{ transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 45px rgba(242,96,122,.35); }
.btn-primary span{ transition: transform .25s ease; }
.btn-primary:hover span{ transform: translateX(3px); }
.btn-ghost{
  background: var(--white); color: var(--brown-deep); border: 2px solid var(--cream-3);
}
.btn-ghost:hover{ border-color: var(--pink); color: var(--pink); transform: translateY(-3px); }
.btn-block{ width:100%; position:relative; overflow:hidden; }

/* ---------- reveal-on-scroll ---------- */
.reveal-up{
  opacity:0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--d, 0s);
}
.reveal-up.is-visible{ opacity:1; transform: translateY(0); }

/* ===========================================================
   Scroll progress coffee cup
   =========================================================== */
.pour-tracker{
  position: fixed; right: 18px; bottom: 18px; z-index: 500;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background: rgba(255,255,255,.75); backdrop-filter: blur(8px);
  padding: 8px 8px 6px; border-radius: 18px; box-shadow: var(--shadow-soft);
}
.pour-cup{ width: 30px; height: 40px; overflow:visible; }
.cup-outline{ fill: var(--white); stroke: var(--brown-light); stroke-width:2; }
.cup-handle{ fill:none; stroke: var(--brown-light); stroke-width:3; stroke-linecap:round; }
.cup-rim{ fill: var(--cream-3); stroke: var(--brown-light); stroke-width:1.5; }
.cup-fill{ fill: var(--pink); transition: y .12s linear, height .12s linear; }
.pour-pct{ font-family: var(--font-head); font-size: .62rem; font-weight:600; color: var(--brown); }

/* ===========================================================
   Header
   =========================================================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 400;
  padding: 18px 0; transition: padding .3s ease, background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled{
  padding: 10px 0; background: rgba(251,242,228,.85); backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px rgba(74,44,23,.08);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:38px; height:38px; object-fit:contain; }
.brand-name{ font-family: var(--font-head); font-weight:600; font-size:1.2rem; color: var(--brown-deep); }
.brand-name em{ font-style:normal; color: var(--pink); }
.main-nav{ display:flex; align-items:center; gap: 30px; }
.nav-link{ font-family: var(--font-head); font-weight:500; font-size:.95rem; color: var(--brown-deep); position:relative; padding: 4px 0; }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background: var(--pink);
  transition: width .25s ease;
}
.nav-link:hover::after{ width:100%; }
.nav-cta{
  background: var(--brown-deep); color: var(--white) !important; padding: .6em 1.3em; border-radius:999px;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background: var(--pink); }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.burger span{ width:24px; height:2.5px; background: var(--brown-deep); border-radius:2px; transition: transform .3s ease, opacity .3s ease; }
.burger.open span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

/* ===========================================================
   Hero
   =========================================================== */
.hero{
  position:relative; padding: 150px 0 90px; overflow:hidden;
}
.hero-blob{ position:absolute; border-radius:50%; filter: blur(10px); opacity:.55; z-index:0; }
.blob-1{ width:420px; height:420px; background: radial-gradient(circle at 30% 30%, var(--pink-light), transparent 70%); top:-120px; right:-100px; }
.blob-2{ width:340px; height:340px; background: radial-gradient(circle at 30% 30%, var(--tan), transparent 70%); bottom:-140px; left:-120px; opacity:.4; }

.floating-beans{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.floating-beans span{
  position:absolute; font-size: 1.6rem; opacity:.5; animation: bob 6s ease-in-out infinite;
}
.floating-beans span:nth-child(1){ top:14%; left:6%; animation-delay:0s; }
.floating-beans span:nth-child(2){ top:65%; left:12%; animation-delay:1.1s; font-size:1.2rem; }
.floating-beans span:nth-child(3){ top:22%; left:46%; animation-delay:2.1s; font-size:1.1rem; }
.floating-beans span:nth-child(4){ top:78%; left:40%; animation-delay:.6s; }
.floating-beans span:nth-child(5){ top:10%; right:38%; animation-delay:1.7s; font-size:1.3rem; }
.floating-beans span:nth-child(6){ top:52%; right:8%; animation-delay:2.6s; font-size:1.1rem; }
@keyframes bob{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-18px) rotate(8deg); }
}

.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:center; }
.eyebrow{ display:inline-block; }
.hero-copy .eyebrow{
  background: var(--white); padding: .5em 1em; border-radius:999px; box-shadow: var(--shadow-soft);
}
.hero-sub{ max-width: 460px; font-size: 1.08rem; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin: 1.8em 0 1.2em; }
.hero-socials{ display:flex; gap:18px; }
.hero-socials a{ font-size:.88rem; font-weight:600; color: var(--brown-light); border-bottom: 1px dashed var(--tan); padding-bottom:2px; }
.hero-socials a:hover{ color: var(--pink); border-color: var(--pink); }

/* pour scene */
.hero-visual{ position:relative; display:flex; justify-content:center; }
.pour-scene{ position:relative; width: 260px; }
.hero-cup{ width:100%; height:auto; overflow:visible; }
.cup-top-shadow{ fill: rgba(74,44,23,.08); }
.hero-cup-outline{ fill: var(--white); stroke: var(--brown-light); stroke-width:3; }
.hero-cup-handle{ fill:none; stroke: var(--brown-light); stroke-width:5; stroke-linecap:round; }
.hero-cup-rim{ fill: var(--cream-2); stroke: var(--brown-light); stroke-width:2; }
.hero-cup-fill{ fill: var(--pink); }
.hero-cup-fill-top{ fill: var(--pink-2); }
#heroFill{ fill: var(--pink); }
#heroFillTop{ fill: var(--pink-2); }

.pour-stream{
  position:absolute; top:-70px; left:50%; transform: translateX(-50%);
  width: 6px; height:0; border-radius: 0 0 6px 6px;
  background: linear-gradient(var(--brown-light), var(--pink));
  opacity:0;
}
.pour-scene.pouring .pour-stream{
  opacity:1; animation: streamFall 2.1s ease-in forwards;
}
@keyframes streamFall{
  0%{ height:0; }
  70%{ height:78px; }
  100%{ height:78px; opacity:0; }
}
#heroFillTop{ transition: opacity .2s linear; }
.steam{
  position:absolute; width:5px; height:26px; border-radius:50%;
  background: linear-gradient(rgba(169,124,80,0), rgba(169,124,80,.35));
  opacity:0; filter: blur(1px);
}
.s1{ top:8px; left:44%; }
.s2{ top:2px; left:52%; }
.s3{ top:10px; left:60%; }
.pour-scene.pouring .steam{ animation: rise 3s ease-in-out 1.9s infinite; }
.pour-scene.pouring .s2{ animation-delay: 2.2s; }
.pour-scene.pouring .s3{ animation-delay: 2.5s; }
@keyframes rise{
  0%{ opacity:0; transform: translateY(0) scaleY(1); }
  30%{ opacity:.8; }
  100%{ opacity:0; transform: translateY(-46px) scaleY(1.6); }
}
.sleeve-badge{
  position:absolute; left:50%; top:56%; transform: translate(-50%,-50%);
  width:54px; height:54px; background: var(--white); border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-soft);
  padding:8px;
}
.sleeve-badge img{ width:100%; }

.scroll-cue{
  position:absolute; bottom: 18px; left:50%; transform: translateX(-50%);
  width:26px; height:42px; border:2px solid var(--brown-light); border-radius:20px; z-index:2;
}
.scroll-cue span{
  position:absolute; top:8px; left:50%; width:4px; height:8px; background: var(--pink);
  border-radius:2px; transform: translateX(-50%); animation: cueDrop 1.6s ease-in-out infinite;
}
@keyframes cueDrop{
  0%{ opacity:1; top:8px; }
  70%{ opacity:0; top:22px; }
  100%{ opacity:0; top:8px; }
}

/* ===========================================================
   Marquee
   =========================================================== */
.marquee{
  background: var(--brown-deep); overflow:hidden; padding: 14px 0; white-space:nowrap;
}
.marquee-track{ display:inline-flex; animation: scrollMarquee 26s linear infinite; }
.marquee-track span{
  font-family: var(--font-head); font-weight:600; color: var(--cream);
  font-size: 1rem; padding: 0 28px; letter-spacing:.03em;
}
@keyframes scrollMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ===========================================================
   About
   =========================================================== */
.about{ padding: 110px 0; }
.about-inner{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items:center; }
.about-emblem-card{
  background: var(--white); border-radius: var(--radius-lg); padding: 50px 30px;
  text-align:center; box-shadow: var(--shadow-soft); position:relative;
}
.about-emblem{ width: 110px; margin: 0 auto 20px; }
.big-script{ font-size: 2rem; line-height:1.15; }
.about-copy h2{ max-width: 480px; }
.about-copy p{ max-width: 520px; }
.about-chips{ display:flex; flex-wrap:wrap; gap:12px; margin-top: 1.6em; }
.chip{
  display:flex; align-items:center; gap:8px; background: var(--white);
  padding: .7em 1.1em; border-radius: 999px; font-weight:600; font-size:.9rem;
  color: var(--brown-deep); box-shadow: var(--shadow-soft);
  transition: transform .25s ease;
}
.chip:hover{ transform: translateY(-4px); }
.chip-ico{ font-size:1.1rem; }

/* ===========================================================
   Services
   =========================================================== */
.services{ padding: 90px 0 110px; background: var(--cream-2); position:relative; }
.service-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 50px;
}
.service-card{
  background: var(--white); border-radius: var(--radius-md); padding: 34px 26px;
  box-shadow: var(--shadow-soft); transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.service-card:hover{ transform: translateY(-8px) rotate(-.5deg); box-shadow: 0 22px 40px rgba(74,44,23,.14); }
.service-ico{
  width:56px; height:56px; border-radius:16px; background: var(--pink-light);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom: 18px;
}
.service-card p{ font-size: .95rem; margin-bottom:0; }

/* ===========================================================
   Menu
   =========================================================== */
.menu-section{ padding: 110px 0; }
.menu-tabs{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin: 0 0 40px;
}
.menu-tab{
  font-family: var(--font-head); font-weight:600; font-size:.9rem; padding: .7em 1.4em;
  border-radius:999px; border:2px solid var(--cream-3); background: var(--white); cursor:pointer;
  color: var(--brown-deep); transition: all .25s ease;
}
.menu-tab:hover{ border-color: var(--pink); }
.menu-tab.active{
  background: linear-gradient(135deg, var(--pink), var(--pink-2)); color:var(--white); border-color:transparent;
  box-shadow: var(--shadow-pop);
}
.menu-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 760px; margin: 0 auto;
}
.menu-item{
  display:flex; justify-content:space-between; align-items:center; gap: 14px;
  background: var(--white); padding: 18px 22px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft); opacity:0; transform: translateY(14px);
  animation: itemIn .5s ease forwards;
}
@keyframes itemIn{ to{ opacity:1; transform:translateY(0); } }
.menu-item .name{ font-family: var(--font-head); font-weight:600; color: var(--brown-deep); }
.menu-item .dots{ flex:1; border-bottom: 2px dotted var(--cream-3); margin: 0 8px; height: 8px; }
.menu-item .price{ font-family: var(--font-head); font-weight:600; color: var(--pink); white-space:nowrap; }
.menu-image-cta{ text-align:center; margin-top: 44px; }

.lightbox{
  position: fixed; inset:0; background: rgba(58,36,19,.85); z-index: 900;
  display:flex; align-items:center; justify-content:center; padding: 40px 20px;
  opacity:0; pointer-events:none; transition: opacity .3s ease;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-height: 88vh; border-radius: 18px; box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.lightbox-close{
  position:absolute; top:22px; right:26px; background: var(--white); border:none; width:44px; height:44px;
  border-radius:50%; font-size:1.1rem; cursor:pointer; box-shadow: var(--shadow-soft);
}

/* ===========================================================
   Gallery
   =========================================================== */
.gallery{ padding: 90px 0 110px; background: var(--cream-2); }
.gallery-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 160px; gap: 16px; margin: 50px 0;
}
.gtile{
  border-radius: var(--radius-md); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; position:relative; overflow:hidden; transition: transform .35s ease;
}
.gtile:hover{ transform: scale(1.03) rotate(-.5deg); }
.gtile span{ font-size:2.2rem; }
.gtile p{ font-family: var(--font-head); font-weight:600; font-size:.85rem; color: var(--brown-deep); margin:0; text-align:center; padding:0 14px; }
.g-big{ grid-row: span 2; background: linear-gradient(160deg, var(--pink-light), #fff); }
.g-pink{ background: linear-gradient(160deg, var(--pink), var(--pink-2)); }
.g-pink span, .g-pink p{ color: var(--white); }
.g-green{ background: linear-gradient(160deg, var(--green), #b9cf9f); }
.g-green span, .g-green p{ color: var(--white); }
.g-brown{ background: linear-gradient(160deg, var(--brown), var(--brown-light)); }
.g-brown span, .g-brown p{ color: var(--white); }
.g-tan{ background: linear-gradient(160deg, var(--tan), var(--cream)); }
.g-cream{ background: var(--white); }
.social-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.social-pill{
  background: var(--white); padding: .8em 1.5em; border-radius:999px; font-weight:600; font-size:.9rem;
  box-shadow: var(--shadow-soft); transition: transform .25s ease, color .25s ease;
}
.social-pill:hover{ transform: translateY(-4px); color: var(--pink); }

/* ===========================================================
   Book / Inquiry
   =========================================================== */
.book{ padding: 110px 0; }
.book-inner{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 56px; }
.book-info h2{ max-width: 440px; }
.book-steps{ margin: 2em 0; display:flex; flex-direction:column; gap: 14px; }
.book-steps li{
  display:flex; align-items:center; gap: 14px; font-weight:600; color: var(--brown-deep); font-size:.98rem;
}
.book-steps span{
  width:30px; height:30px; border-radius:50%; background: var(--pink-light); color: var(--pink);
  display:flex; align-items:center; justify-content:center; font-family: var(--font-head); font-weight:700; flex-shrink:0;
}
.book-note{
  background: var(--cream-2); border-left: 4px solid var(--pink); padding: 16px 20px; border-radius: 0 14px 14px 0;
  font-size:.92rem; color: var(--brown-deep);
}

.book-form{
  background: var(--white); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-soft);
  position:relative;
}
.form-row{ margin-bottom: 20px; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
label{ display:block; font-family: var(--font-head); font-weight:600; font-size:.88rem; color: var(--brown-deep); margin-bottom: 8px; }
.hint{ font-weight:400; color: var(--brown-light); font-size:.82em; }
input[type="text"], input[type="tel"], input[type="email"], input[type="date"], input[type="number"], textarea{
  width:100%; padding: .85em 1em; border-radius: 12px; border: 2px solid var(--cream-3);
  background: var(--cream); font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  transition: border-color .25s ease, background .25s ease;
}
input:focus, textarea:focus{ outline:none; border-color: var(--pink); background: var(--white); }
textarea{ resize: vertical; }
.fee-row legend{ font-family: var(--font-head); font-weight:600; font-size:.88rem; color: var(--brown-deep); margin-bottom:10px; padding:0; }
.radio-group{ display:flex; gap:12px; }
.radio-pill{
  display:flex; align-items:center; gap:8px; background: var(--cream); border:2px solid var(--cream-3);
  padding: .6em 1.3em; border-radius:999px; font-weight:600; font-size:.88rem; cursor:pointer; margin:0;
  transition: all .2s ease;
}
.radio-pill:has(input:checked){ border-color: var(--pink); background: var(--pink-light); color: var(--pink); }
.radio-pill input{ accent-color: var(--pink); }

.btn-cup{ display:inline-block; transition: transform .4s ease; }
.btn-block.submitting .btn-cup{ animation: cupTilt 1s ease-in-out infinite; }
@keyframes cupTilt{
  0%,100%{ transform: rotate(0deg); }
  50%{ transform: rotate(-18deg); }
}
.form-fineprint{ text-align:center; font-size:.82rem; margin: 16px 0 0; }
.form-fineprint a{ color: var(--pink); font-weight:600; }

.form-success{
  position:absolute; inset:0; background: var(--white); border-radius: var(--radius-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding: 40px; opacity:0; pointer-events:none; transform: scale(.95); transition: all .4s cubic-bezier(.22,1,.36,1);
}
.form-success.show{ opacity:1; pointer-events:auto; transform: scale(1); }
.success-cup{ font-size: 3.2rem; margin-bottom: 14px; animation: popIn .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes popIn{ 0%{ transform: scale(0) rotate(-30deg); } 100%{ transform: scale(1) rotate(0); } }
.form-success p{ max-width: 320px; }

/* ===========================================================
   Footer
   =========================================================== */
.site-footer{ background: var(--brown-deep); color: var(--cream); padding: 70px 0 0; }
.footer-inner{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 50px; }
.footer-brand .brand-name{ color: var(--cream); }
.footer-brand .brand-name em{ color: var(--pink-2); }
.footer-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.footer-brand p{ color: rgba(251,242,228,.65); font-size:.9rem; }
.footer-links h4{ font-family: var(--font-head); color: var(--cream); margin-bottom: 16px; font-size:1rem; }
.footer-links a{ display:block; color: rgba(251,242,228,.75); font-size:.92rem; margin-bottom: 10px; transition: color .2s ease; }
.footer-links a:hover{ color: var(--pink-2); }
.footer-bottom{ border-top: 1px solid rgba(251,242,228,.12); padding: 20px 0; text-align:center; }
.footer-bottom p{ color: rgba(251,242,228,.55); font-size:.82rem; margin:0; }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; text-align:center; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-ctas, .hero-socials{ justify-content:center; }
  .about-inner{ grid-template-columns: 1fr; }
  .service-grid{ grid-template-columns: repeat(2,1fr); }
  .book-inner{ grid-template-columns: 1fr; }
  .footer-inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .main-nav{
    position: fixed; top: 0; right:0; height:100vh; width: min(78vw, 320px);
    background: var(--white); flex-direction:column; align-items:flex-start;
    padding: 100px 30px 30px; gap: 26px; transform: translateX(100%);
    transition: transform .35s cubic-bezier(.22,1,.36,1); box-shadow: -10px 0 40px rgba(0,0,0,.12);
  }
  .main-nav.open{ transform: translateX(0); }
  .nav-cta{ margin-top: 10px; }
  .burger{ display:flex; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .g-big{ grid-row: span 1; }
  .menu-grid{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .footer-inner{ grid-template-columns: 1fr; text-align:left; }
  .service-grid{ grid-template-columns: 1fr; }
  .pour-tracker{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html{ scroll-behavior:auto; }
}