/* ============================================================
   Sweet Monster — Oak Park, IL
   Design system & styles
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --bg:          #FAF6F0;
  --surface:     #FFFFFF;
  --cream:       #F4EDE3;
  --cream-deep:  #EFE6D9;
  --ink:         #1A1613;
  --ink-soft:    #473F38;
  --muted:       #6C635B;
  --line:        #E7DCD0;

  --pink:        #FF4F86;
  --pink-deep:   #C81E56;
  --pink-dark:   #A5164A;
  --pink-soft:   #FFD9E4;
  --taro:        #7B5CF0;
  --taro-deep:   #5B3FD1;
  --taro-soft:   #E4DCFF;
  --butter:      #F7C948;

  /* Fall seasonal accents (stay up after Halloween) */
  --pumpkin:      #E2711D;
  --pumpkin-deep: #A63A05;
  --pumpkin-dark: #7F2B03;
  --pumpkin-soft: #FFE8D1;

  --serif:       'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:        'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm:   12px;
  --radius:      20px;
  --radius-lg:   28px;
  --shadow-sm:   0 2px 10px rgba(26,22,19,.05);
  --shadow:      0 18px 40px -22px rgba(26,22,19,.28);
  --shadow-lg:   0 40px 80px -40px rgba(26,22,19,.35);

  --container:   1200px;
  --ease:        cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
iframe{ border:0; }
[hidden]{ display:none !important; }

/* Subtle paper grain */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Utilities ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,40px);
}
.section{ padding:clamp(64px,9vw,120px) 0; }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.skip-link{
  position:fixed; top:-120px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:10px 18px;
  border-radius:0 0 12px 12px; z-index:10000; font-weight:600;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pink-deep); margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px; background:var(--pink);
}
.eyebrow.light{ color:#FFAEC5; }
.eyebrow.light::before{ background:#FFAEC5; }

.display{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2rem,4.2vw,3.35rem);
  line-height:1.04;
  letter-spacing:-.025em;
  color:var(--ink);
}
.display em{
  font-style:italic;
  font-weight:400;
  color:var(--pink-deep);
  white-space:nowrap;
}
.display.light{ color:var(--bg); }
.display.light em{ color:#FF9FBE; }

.text-link{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:.95rem; color:var(--ink);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:color .2s, border-color .2s, gap .2s;
}
.text-link span{ transition:transform .2s var(--ease); }
.text-link:hover{ color:var(--pink-deep); border-color:var(--pink); }
.text-link:hover span{ transform:translateX(4px); }
.text-link--btn{
  background:none; padding:0 0 2px; font-family:inherit; cursor:pointer;
  border:0; border-bottom:1px solid transparent; text-align:left;
}
.text-link--btn:hover{ border-bottom-color:var(--pink); }
.text-link--btn:focus-visible{ outline:2px solid var(--pink-deep); outline-offset:3px; border-radius:4px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:999px;
  font-family:var(--sans); font-weight:600; font-size:.95rem; line-height:1;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             background-color .18s, color .18s, border-color .18s;
}
.btn .arrow{ transition:transform .2s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn:focus-visible{ outline:3px solid var(--butter); outline-offset:3px; }
.btn:active{ transform:scale(.985); }

.btn-primary{
  background:var(--pink-deep); color:#fff;
  box-shadow:0 10px 24px -12px rgba(200,30,86,.8);
}
.btn-primary:hover{
  background:var(--pink-dark);
  box-shadow:0 16px 30px -12px rgba(165,22,74,.85);
  transform:translateY(-1px);
}
.btn-outline{ border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--bg); }
.btn-dark{ background:var(--ink); color:var(--bg); }
.btn-dark:hover{ background:#2C2621; transform:translateY(-1px); }
.btn-light{ background:var(--bg); color:var(--ink); }
.btn-light:hover{ background:#fff; transform:translateY(-1px); box-shadow:0 16px 30px -16px rgba(0,0,0,.5); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink-soft); }
.btn-ghost:hover{ background:var(--cream); border-color:var(--ink); color:var(--ink); transform:none; box-shadow:var(--shadow-sm); }
.btn-pumpkin{
  background:var(--pumpkin-deep); color:#fff;
  box-shadow:0 10px 24px -12px rgba(166,58,5,.75);
}
.btn-pumpkin:hover{
  background:var(--pumpkin-dark);
  box-shadow:0 16px 30px -12px rgba(127,43,3,.82);
  transform:translateY(-1px);
}
.btn-sm{ padding:11px 20px; font-size:.87rem; }

.btn-plain{ padding-inline:16px; color:var(--ink-soft); }
.btn-plain:hover{ color:var(--ink); background:rgba(26,22,19,.05); }
.btn-on-dark{
  background:transparent; color:var(--bg);
  border-color:rgba(250,246,240,.34);
}
.btn-on-dark:hover{
  background:rgba(250,246,240,.12);
  border-color:rgba(250,246,240,.68);
  transform:translateY(-1px);
}
.btn-block{ width:100%; }
.btn-caret{ flex:none; margin-top:1px; transition:transform .2s var(--ease); }
.btn:hover .btn-caret{ transform:translateY(2px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{ position:sticky; top:0; z-index:1000; }

.topbar{
  background:var(--ink);
  color:rgba(250,246,240,.82);
  font-size:.76rem; letter-spacing:.04em;
}
.topbar-inner{
  display:flex; justify-content:space-between; align-items:center;
  height:38px; gap:16px;
}
.topbar-item{ display:inline-flex; align-items:center; gap:8px; }
.topbar .dot{
  width:7px; height:7px; border-radius:50%;
  background:#6BE0A1; box-shadow:0 0 0 3px rgba(107,224,161,.22);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(107,224,161,.22); }
  50%{ box-shadow:0 0 0 6px rgba(107,224,161,.06); }
}
/* Closed: dark red light, no pulse */
.topbar-item.is-closed .dot{
  background:#8B1A1A; box-shadow:0 0 0 3px rgba(139,26,26,.30);
  animation:none;
}
.topbar-item.is-closed{ color:rgba(250,246,240,.70); }
.topbar-loc{ transition:color .2s; }
.topbar-loc:hover{ color:#fff; }

.nav{
  background:rgba(250,246,240,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  position:relative;
  transition:box-shadow .2s;
}
.site-header.scrolled .nav{ box-shadow:0 10px 30px -22px rgba(26,22,19,.35); }
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:76px; gap:24px;
}
.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand-logo{
  width:44px; height:44px; flex:none; display:block;
  object-fit:contain;
}
.brand-logo--footer{ width:38px; height:38px; }
.brand-name{
  font-family:var(--serif); font-weight:600; font-size:1.5rem;
  letter-spacing:-.03em; line-height:1; color:var(--ink);
  white-space:nowrap;
}
.brand-name span{ color:var(--pink-deep); }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  position:relative; padding:8px 14px; border-radius:999px;
  font-size:.9rem; font-weight:500; color:var(--ink-soft);
  transition:color .2s, background-color .2s;
}
.nav-links a:hover{ color:var(--ink); background:rgba(26,22,19,.05); }

.nav-actions{ display:flex; align-items:center; gap:18px; }
.nav-phone{
  font-size:.88rem; font-weight:600; color:var(--ink-soft);
  transition:color .2s;
}
.nav-phone:hover{ color:var(--pink-deep); }

.menu-toggle{
  display:none; width:44px; height:44px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface);
  position:relative;
}
.menu-toggle span{
  position:absolute; left:50%; width:18px; height:2px; border-radius:2px;
  background:var(--ink); transform:translateX(-50%);
  transition:transform .25s var(--ease), opacity .2s;
}
.menu-toggle span:nth-child(1){ top:17px; }
.menu-toggle span:nth-child(2){ top:24px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateX(-50%) translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ transform:translateX(-50%) translateY(-3.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:clamp(48px,7vw,84px) 0 0; position:relative; }
.hero-grid{
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(32px,5vw,64px); align-items:center;
  padding-bottom:clamp(48px,7vw,80px);
}
.hero-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.9rem,6.4vw,5.4rem);
  line-height:.97; letter-spacing:-.035em;
  margin-bottom:24px;
}
.hero-title em{
  font-style:italic; font-weight:400; color:var(--pink-deep);
  position:relative; white-space:nowrap;
}
.hero-lead{
  max-width:46ch; font-size:clamp(1.02rem,1.3vw,1.15rem);
  color:var(--ink-soft); margin-bottom:32px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:44px; }

.hero-facts{
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,52px);
  padding-top:26px; border-top:1px solid var(--line);
}
.hero-facts li{
  display:flex; flex-direction:column; gap:2px;
  font-size:.84rem; color:var(--muted);
}
.hero-facts strong{
  font-family:var(--serif); font-weight:600; font-size:1.75rem;
  color:var(--ink); letter-spacing:-.02em; line-height:1.1;
}

/* Hero art */
.hero-art{ display:flex; justify-content:flex-end; }
.arch{
  position:relative;
  width:min(100%,430px);
  aspect-ratio:4 / 5;
  border-radius:245px 245px 32px 32px;
  background:linear-gradient(158deg,#FFE7D6 0%,#FFC3D6 46%,#C9B7FF 100%);
  overflow:hidden;
  box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.5);
}
.arch::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120% 80% at 28% 12%,rgba(255,255,255,.65),transparent 55%),
             radial-gradient(90% 70% at 85% 95%,rgba(123,92,240,.32),transparent 60%);
}
.arch::after{
  content:"";
  position:absolute; width:260px; height:260px; border-radius:50%;
  right:-90px; top:-70px;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 0 0 26px rgba(255,255,255,.12);
}
.arch-inner{
  position:relative; z-index:2; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:44px 24px 34px;
}
.arch-photo{ padding:0; }
.arch-photo picture,.arch-photo img{ display:block; width:100%; height:100%; }
.arch-photo img{ object-fit:cover; object-position:center 40%; }
.arch-photo::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(26,22,19,.20) 0%,rgba(26,22,19,0) 26%,rgba(26,22,19,0) 56%,rgba(26,22,19,.42) 100%);
}
.art-tag,.art-chip{
  position:absolute; left:50%; transform:translateX(-50%);
  z-index:3; white-space:nowrap;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.9);
  color:var(--ink);
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  padding:7px 14px; border-radius:999px;
  box-shadow:var(--shadow-sm);
}
.art-tag{ top:26px; }
.art-chip{ bottom:24px; }

/* Marquee */
.marquee{
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:flex; align-items:center; gap:30px;
  white-space:nowrap; width:max-content;
  animation:marquee 34s linear infinite;
}
.marquee-track span{
  font-family:var(--serif); font-style:italic;
  font-size:1.05rem; color:var(--ink-soft);
}
.marquee-track span:nth-child(even){ color:var(--pink); font-style:normal; font-size:.8rem; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   SEASONAL PROMO — Pumpkin Spice Milk Tea
   ============================================================ */
.seasonal-band{
  position:relative;
  overflow:hidden;
  padding:clamp(18px,2.6vw,28px) 0;
  background:
    radial-gradient(90% 140% at 88% 0%,rgba(226,113,29,.16),transparent 58%),
    radial-gradient(70% 120% at 0% 100%,rgba(123,92,240,.08),transparent 60%),
    linear-gradient(180deg,#FFF8EC 0%,#FBEDDA 100%);
  border-bottom:1px solid var(--line);
}
.seasonal-inner{
  display:flex;
  align-items:center;
  gap:clamp(16px,2.4vw,26px);
  flex-wrap:wrap;
}
.seasonal-thumb{
  width:clamp(76px,9vw,108px);
  aspect-ratio:1;
  flex:none;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(166,58,5,.18);
  box-shadow:var(--shadow-sm);
  transform:rotate(-2.5deg);
}
.seasonal-thumb picture,
.seasonal-thumb img{ display:block; width:100%; height:100%; }
.seasonal-thumb img{ object-fit:cover; }
.seasonal-copy{ flex:1 1 300px; min-width:0; }
.seasonal-kicker{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--pumpkin-deep);
  margin-bottom:4px;
}
.seasonal-title{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.3rem,2.5vw,1.8rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
}
.seasonal-text{
  font-size:.9rem;
  color:var(--muted);
  margin-top:4px;
  max-width:62ch;
}
.seasonal-cta{ flex:none; margin-left:auto; }

@media (max-width:780px){
  .seasonal-inner{ gap:14px; }
  .seasonal-thumb{ width:68px; border-radius:14px; }
  .seasonal-copy{ flex:1 1 220px; }
  .seasonal-cta{ margin-left:0; width:100%; }
}
@media (max-width:520px){
  .seasonal-band{ padding:16px 0 18px; }
  .seasonal-text{ font-size:.84rem; }
}

/* ============================================================
   STORY
   ============================================================ */
.story-grid{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(40px,6vw,80px); align-items:center;
}
.story-art{ position:relative; }
.collage{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  position:relative; padding:10px 0 46px;
}
.collage-card{
  position:relative; overflow:hidden;
  border-radius:26px; aspect-ratio:3 / 4;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.7);
  transition:transform .4s var(--ease);
}
.collage-card picture,.collage-card img{ display:block; width:100%; height:100%; }
.collage-card img{ object-fit:cover; }
.card-a{ background:linear-gradient(160deg,#FFE1CC,#FF9BBB); transform:rotate(-4deg) translateY(10px); }
.card-b{ background:linear-gradient(160deg,#CBBDFF,#6D4AFF); color:#fff; transform:rotate(4deg) translateY(-4px); }
.collage:hover .card-a{ transform:rotate(-6deg) translateY(6px); }
.collage:hover .card-b{ transform:rotate(6deg) translateY(-8px); }
.collage-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(26,22,19,0) 52%,rgba(26,22,19,.66) 100%);
}
.collage-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:16px 18px;
  font-weight:700; font-size:.92rem; letter-spacing:.01em; color:#fff;
}
.collage-badge{
  position:absolute; left:50%; bottom:-12px; transform:translateX(-50%);
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:12px 22px; text-align:center;
  box-shadow:var(--shadow); display:flex; align-items:baseline; gap:8px;
  white-space:nowrap;
}
.badge-big{ font-family:var(--serif); font-size:1.9rem; font-weight:600; color:var(--pink-deep); letter-spacing:-.02em; }
.badge-small{ font-size:.76rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }

.story-copy .display{ margin-bottom:22px; }
.story-copy > p{ color:var(--ink-soft); margin-bottom:16px; max-width:56ch; }

.value-list{ margin:30px 0; }
.value-list li{
  display:grid; grid-template-columns:auto 1fr; gap:16px;
  padding:18px 0; border-top:1px solid var(--line);
}
.value-list li:last-child{ border-bottom:1px solid var(--line); }
.value-icon{
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--pink-soft); color:var(--pink-deep);
  font-size:.85rem; flex:none; margin-top:2px;
}
.value-list strong{ display:block; font-size:.98rem; font-weight:700; margin-bottom:2px; }
.value-list span{ font-size:.9rem; color:var(--muted); }

.story-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:28px; }

/* ============================================================
   MENU
   ============================================================ */
.menu-section{ background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:32px; margin-bottom:40px;
}
.section-note{ max-width:340px; font-size:.93rem; color:var(--muted); }

.tabs{
  display:inline-flex; gap:4px; padding:5px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; margin-bottom:40px;
  box-shadow:var(--shadow-sm);
}
.tab{
  padding:11px 22px; border-radius:999px;
  font-size:.87rem; font-weight:600; color:var(--ink-soft);
  transition:background-color .2s, color .2s;
}
.tab:hover{ color:var(--ink); }
.tab.is-active{ background:var(--ink); color:var(--bg); }
.tab:focus-visible{ outline:2px solid var(--butter); outline-offset:2px; }

.menu-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr));
  gap:18px;
}
.menu-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px;
  display:flex; flex-direction:column; gap:10px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  position:relative;
  overflow:hidden;
}
.menu-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:#D9CABC;
}
.menu-card.is-hidden{ display:none; }

/* photo across the top of every menu card */
.card-photo{
  position:relative;
  margin:-26px -26px 2px;
  overflow:hidden;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.card-photo picture{ display:block; }
.card-photo img{
  display:block; width:100%; height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  transition:transform .55s var(--ease);
}
.menu-card:hover .card-photo img{ transform:scale(1.05); }

.menu-card-top{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
.menu-card h3{
  font-family:var(--serif); font-weight:600; font-size:1.4rem;
  letter-spacing:-.015em; line-height:1.15;
}
.menu-card .price{
  font-size:.86rem; font-weight:700; color:var(--pink-deep); white-space:nowrap;
}
.menu-card p{ font-size:.93rem; color:var(--muted); }
.menu-card .tag{
  align-self:flex-start; margin-top:4px;
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--taro-deep); background:var(--taro-soft);
  padding:4px 10px; border-radius:999px;
}
.menu-card .tag-seasonal{
  color:var(--pumpkin-deep);
  background:var(--pumpkin-soft);
}

.menu-foot{
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; flex-wrap:wrap;
  margin-top:44px; padding-top:32px; border-top:1px solid var(--line);
}
.menu-foot p{ font-size:.88rem; color:var(--muted); max-width:52ch; }
.menu-foot-actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* ============================================================
   FLAVORS + ROLL-IN TOPPINGS
   ============================================================ */
.flavor-band{ margin-top:clamp(48px,6vw,84px); }
.flavor-head,.topping-head{ max-width:62ch; margin-bottom:24px; }
.topping-head{ margin-top:clamp(40px,5vw,64px); }
.flavor-head h3,.topping-head h3{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.35rem,2.4vw,1.85rem);
  letter-spacing:-.015em; line-height:1.15;
  margin-bottom:8px;
}
.flavor-head p,.topping-head p{ font-size:.93rem; color:var(--muted); }

.flavor-strip{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:16px; list-style:none;
}
.flavor-chip{ display:flex; flex-direction:column; gap:9px; }
.flavor-chip picture{
  display:block; overflow:hidden;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--cream);
}
.flavor-chip img{
  display:block; width:100%; height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  transition:transform .45s var(--ease);
}
.flavor-chip:hover img{ transform:scale(1.06); }
.flavor-chip span{
  font-size:.85rem; font-weight:600; color:var(--ink-soft);
}

.topping-strip{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(116px,1fr));
  gap:18px; list-style:none;
}
.topping-chip{ display:flex; flex-direction:column; gap:9px; text-align:center; }
.topping-chip picture{
  display:block; overflow:hidden;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--cream);
  box-shadow:var(--shadow);
}
.topping-chip img{
  display:block; width:100%; height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  transition:transform .45s var(--ease);
}
.topping-chip:hover img{ transform:scale(1.08); }
.topping-chip span{
  font-size:.8rem; font-weight:600; color:var(--ink-soft); line-height:1.3;
}

/* ============================================================
   DRINK WALL
   ============================================================ */
.drink-band{ margin-top:clamp(48px,6vw,84px); }
.drink-head{ max-width:62ch; margin-bottom:clamp(26px,3vw,40px); }
.drink-head h3{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.5rem,2.8vw,2.1rem);
  letter-spacing:-.02em; line-height:1.12;
  margin-bottom:10px;
}
.drink-head p{ font-size:.93rem; color:var(--muted); }
.drink-group{ margin-bottom:clamp(30px,4vw,52px); }
.drink-group:last-child{ margin-bottom:0; }
.drink-group-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.05rem,1.8vw,1.3rem);
  letter-spacing:-.01em;
  margin-bottom:16px; padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.drink-group-head span{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.drink-strip{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:16px; list-style:none;
}
.drink-tile{ display:flex; flex-direction:column; gap:8px; position:relative; }
.drink-tile picture{
  display:block; overflow:hidden;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--cream);
  box-shadow:var(--shadow-sm);
}
.drink-tile img{
  display:block; width:100%; height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  transition:transform .45s var(--ease);
}
.drink-tile:hover img{ transform:scale(1.07); }
.drink-name{ font-size:.84rem; font-weight:600; color:var(--ink-soft); line-height:1.3; }
.drink-price{ font-size:.8rem; font-weight:700; color:var(--pink-deep); }

/* ============================================================
   SIGNATURES
   ============================================================ */
.signatures{ background:var(--bg); }
.sig-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.sig-card{
  position:relative; overflow:hidden;
  min-height:340px; border-radius:var(--radius-lg);
  padding:28px; display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:var(--shadow); isolation:isolate;
  transition:transform .35s var(--ease);
}
.sig-card:hover{ transform:translateY(-6px); }
.sig-card::after{
  content:""; position:absolute; z-index:-1;
  width:220px; height:220px; border-radius:50%;
  right:-70px; top:-60px;
  background:rgba(255,255,255,.28);
}
.sig-card::before{
  content:""; position:absolute; z-index:-1;
  width:130px; height:130px; border-radius:50%;
  left:-40px; bottom:-30px;
  background:rgba(255,255,255,.16);
}
/* photo layer: real shop photography behind the copy, dark wash on top */
.sig-photo{ position:absolute; inset:0; margin:0; z-index:0; }
.sig-photo picture,.sig-photo img{ display:block; width:100%; height:100%; }
.sig-photo img{ height:100%!important; object-fit:cover; object-position:center 45%; }
.sig-photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(26,22,19,.76) 0%,rgba(26,22,19,.68) 42%,rgba(26,22,19,.72) 70%,rgba(26,22,19,.84) 100%);
}
.sig-card > :not(.sig-photo){ position:relative; z-index:1; }
.sig-a{ background:linear-gradient(155deg,#FFD3E0,#FF7BA8); color:var(--bg); }
.sig-b{ background:linear-gradient(155deg,#B9A6FF,#6D4AFF); color:var(--bg); }
.sig-c{ background:linear-gradient(155deg,#FFE9B8,#FFC85C); color:var(--bg); }
.sig-index{
  font-family:var(--serif); font-size:.9rem; font-weight:600;
  letter-spacing:.1em; color:var(--bg); opacity:.78;
}
.sig-body h3{
  font-family:var(--serif); font-weight:600; font-size:1.85rem;
  line-height:1.08; letter-spacing:-.02em; margin-bottom:10px; color:var(--bg);
}
.sig-body p{ font-size:.93rem; line-height:1.55; color:var(--bg); opacity:.9; max-width:30ch; }
.sig-pill{
  align-self:flex-start; margin-top:18px;
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px;
  background:rgba(255,255,255,.86); color:var(--ink);
}

/* ============================================================
   ORDER BAND
   ============================================================ */
.order-band{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--bg);
  padding:clamp(64px,9vw,120px) 0;
}
.order-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 70% at 15% 20%,rgba(255,79,134,.22),transparent 60%),
             radial-gradient(55% 70% at 90% 85%,rgba(123,92,240,.28),transparent 60%);
  pointer-events:none;
}
.order-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(36px,6vw,72px); align-items:center;
}
.order-copy .display{ margin-bottom:20px; }
.order-lead{ color:rgba(250,246,240,.72); max-width:46ch; margin-bottom:30px; font-size:1.05rem; }
.order-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.order-hours{ font-size:.82rem; color:rgba(250,246,240,.62); letter-spacing:.03em; }

.order-visual{ position:relative; display:flex; justify-content:center; align-items:center; min-height:340px; }
.order-photo{
  position:absolute; inset:0; margin:0; overflow:hidden;
  border-radius:var(--radius-lg);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.6);
}
.order-photo picture,.order-photo img{ display:block; width:100%; height:100%; }
.order-photo img{ height:100%!important; object-fit:cover; object-position:center 55%; }
.order-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(26,22,19,.18) 0%,rgba(26,22,19,0) 45%,rgba(26,22,19,.40) 100%);
}
.orb{ position:absolute; border-radius:50%; filter:blur(2px); opacity:.9; }
.orb-1{
  width:190px; height:190px; left:4%; top:6%;
  background:radial-gradient(circle at 35% 30%,#FFB0CC,#FF4F86);
  box-shadow:0 0 80px rgba(255,79,134,.4);
}
.orb-2{
  width:150px; height:150px; right:6%; bottom:8%;
  background:radial-gradient(circle at 35% 30%,#C9B7FF,#6D4AFF);
  box-shadow:0 0 70px rgba(123,92,240,.45);
}
.order-ticket{
  position:relative; z-index:2;
  background:var(--bg); color:var(--ink);
  border-radius:24px; padding:34px 36px;
  width:min(100%,300px); text-align:center;
  transform:rotate(-5deg);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.6);
  display:flex; flex-direction:column; gap:12px;
}
.order-ticket::before,
.order-ticket::after{
  content:""; position:absolute; width:22px; height:22px; border-radius:50%;
  background:var(--ink); top:50%; transform:translateY(-50%);
}
.order-ticket::before{ left:-11px; }
.order-ticket::after{ right:-11px; }
.ticket-top{
  font-size:.7rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pink-deep);
}
.ticket-main{ font-size:2.6rem; line-height:1; }
.ticket-bottom{
  font-size:.8rem; font-weight:600; color:var(--muted);
  border-top:1px dashed var(--line); padding-top:12px;
}

/* ============================================================
   REVIEWS
   ============================================================ */
.review-band{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--bg);
  padding:clamp(64px,9vw,120px) 0;
}
.review-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 70% at 12% 15%,rgba(255,79,134,.22),transparent 60%),
             radial-gradient(55% 70% at 92% 88%,rgba(123,92,240,.26),transparent 60%);
  pointer-events:none;
}
.review-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:.95fr 1.05fr;
  gap:clamp(36px,6vw,72px); align-items:center;
}
.review-copy .display{ margin-bottom:20px; }
.review-lead{ color:rgba(250,246,240,.72); max-width:44ch; margin-bottom:26px; font-size:1.05rem; }
.review-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.review-note{ font-size:.82rem; color:rgba(250,246,240,.55); letter-spacing:.03em; }
.review-note a{ color:rgba(250,246,240,.8); text-decoration:underline; text-underline-offset:3px; }
.review-note a:hover{ color:var(--pink); }

.review-scores{
  display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin-bottom:26px;
}
.review-scores li{
  display:flex; align-items:baseline; gap:8px;
  border:1px solid rgba(250,246,240,.16);
  background:rgba(250,246,240,.05);
  border-radius:999px; padding:8px 16px;
  font-size:.78rem; color:rgba(250,246,240,.62); letter-spacing:.03em;
}
.review-scores strong{
  font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--bg);
}

.review-cards{ list-style:none; display:grid; gap:16px; }
.review-card{
  background:rgba(250,246,240,.05);
  border:1px solid rgba(250,246,240,.13);
  border-radius:var(--radius);
  padding:26px 28px;
}
.review-card:nth-child(2){ margin-left:auto; width:96%; }
.review-card:nth-child(3){ width:92%; margin-left:4%; }
.review-src{
  font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pink); margin-bottom:12px;
}
.review-stars{ display:flex; gap:4px; margin-bottom:14px; }
.review-stars svg{ width:15px; height:15px; fill:var(--pink); }
.review-quote{
  font-family:var(--serif); font-weight:400;
  font-size:1.06rem; line-height:1.55; color:var(--bg);
}
.review-who{
  margin-top:16px; font-size:.78rem; letter-spacing:.04em;
  color:rgba(250,246,240,.55);
}
.review-who a{ color:rgba(250,246,240,.75); text-decoration:underline; text-underline-offset:3px; }
.review-who a:hover{ color:var(--pink); }

/* ============================================================
   VISIT
   ============================================================ */
.visit{ background:var(--bg); }
.visit-grid{
  display:grid; grid-template-columns:1fr 1.15fr;
  gap:clamp(32px,5vw,60px); align-items:start;
}
.info-block{ padding:22px 0; border-bottom:1px solid var(--line); }
.info-block:first-child{ padding-top:0; }
.info-label{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.info-value{
  font-family:var(--serif); font-size:clamp(1.4rem,2.2vw,1.7rem);
  font-weight:500; letter-spacing:-.01em; line-height:1.25; margin-bottom:10px;
}
.info-value a{ transition:color .2s; }
.info-value a:hover{ color:var(--pink-deep); }
.info-note{ font-size:.84rem; color:var(--muted); margin-top:8px; }

.hours li{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:20px; font-size:.95rem; color:var(--ink-soft);
  padding:6px 0;
}
.hours li span:last-child{ font-weight:600; color:var(--ink); }

.social-row{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; }
.social{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface);
  font-size:.87rem; font-weight:600;
  transition:transform .2s var(--ease), border-color .2s, color .2s, box-shadow .2s;
}
.social:hover{ transform:translateY(-2px); border-color:var(--pink); color:var(--pink-deep); box-shadow:var(--shadow-sm); }

.visit-map{
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow);
  background:var(--cream);
  min-height:460px;
}
.visit-map iframe{ width:100%; height:100%; min-height:460px; display:block; filter:saturate(.92); }

.visit-photos{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(28px,4vw,44px);
  list-style:none;
}
.visit-photo{ position:relative; }
.visit-photo picture{ display:block; }
.visit-photo img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  background:var(--cream);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.visit-photo:hover img{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.visit-photo .visit-cap{
  margin-top:10px;
  font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink); color:var(--bg); padding:70px 0 28px; }
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:clamp(28px,4vw,56px);
  padding-bottom:48px;
  border-bottom:1px solid rgba(250,246,240,.12);
}
.footer-brand .brand-name{ color:var(--bg); }
.footer-brand .brand-name span{ color:var(--pink); }
.footer-brand p{
  margin-top:16px; max-width:34ch;
  font-size:.9rem; color:rgba(250,246,240,.62);
}
.footer-col{ display:flex; flex-direction:column; gap:10px; }
.footer-head{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(250,246,240,.62); margin-bottom:6px;
}
.footer-col a{
  font-size:.9rem; color:rgba(250,246,240,.8);
  transition:color .2s;
  width:fit-content;
}
.footer-col a:hover{ color:var(--pink); }
.footer-btn{
  font-size:.9rem; color:rgba(250,246,240,.8);
  text-align:left; width:fit-content; padding:0;
  transition:color .2s;
}
.footer-btn:hover{ color:var(--pink); }
.footer-btn:focus-visible{ outline:2px solid var(--pink); outline-offset:4px; border-radius:3px; }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding-top:24px;
  font-size:.8rem; color:rgba(250,246,240,.62);
  letter-spacing:.02em;
}

/* ============================================================
   DELIVERY DIALOG
   ============================================================ */
.delivery-dialog{
  width:min(100% - 32px,480px);
  max-width:none; max-height:calc(100dvh - 32px);
  margin:auto; padding:0; border:0;
  border-radius:var(--radius-lg);
  background:var(--surface); color:var(--ink);
  box-shadow:0 50px 100px -40px rgba(26,22,19,.65);
  overflow:auto;
  overscroll-behavior:contain;
}
.delivery-dialog::backdrop{
  background:rgba(26,22,19,.56);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.delivery-dialog[open]{ animation:dialog-in .26s var(--ease); }
@keyframes dialog-in{
  from{ opacity:0; transform:translateY(12px) scale(.985); }
  to{ opacity:1; transform:none; }
}
.delivery-card{ position:relative; padding:clamp(26px,4vw,34px); }
.dialog-close{
  position:absolute; top:12px; right:12px;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink-soft);
  transition:background-color .2s, color .2s;
}
.dialog-close:hover{ background:var(--cream); color:var(--ink); }
.dialog-close:focus-visible{ outline:2px solid var(--pink-deep); outline-offset:2px; }
.delivery-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.5rem,4vw,1.9rem); line-height:1.12;
  letter-spacing:-.02em; color:var(--ink);
  margin-bottom:10px; padding-right:34px;
}
.delivery-sub{ font-size:.92rem; color:var(--muted); margin-bottom:24px; max-width:42ch; }
.delivery-list{ display:flex; flex-direction:column; gap:10px; }
.delivery-option{
  display:flex; align-items:center; gap:14px;
  padding:13px 16px; border-radius:16px;
  border:1px solid var(--line); background:var(--surface);
  transition:transform .18s var(--ease), border-color .18s, box-shadow .18s, background-color .18s;
}
.delivery-option:hover{
  transform:translateY(-2px);
  border-color:#D9CABC; background:#FFFDFB;
  box-shadow:var(--shadow-sm);
}
.delivery-option:focus-visible{ outline:3px solid var(--pink-deep); outline-offset:2px; }
.platform-mark{
  width:42px; height:42px; border-radius:12px; flex:none;
  display:grid; place-items:center;
  font-weight:700; font-size:1.05rem; line-height:1; color:#fff;
}
.platform-uber{ background:#06C167; }
.platform-dd{ background:#FF3008; }
.platform-gh{ background:#FF8000; }
.delivery-name{
  display:flex; flex-direction:column;
  font-weight:700; font-size:.97rem; line-height:1.25;
}
.delivery-name small{
  font-weight:500; font-size:.78rem; color:var(--muted); margin-top:2px;
}
.delivery-go{
  margin-left:auto; color:var(--muted); font-size:1.05rem;
  transition:transform .18s var(--ease), color .18s;
}
.delivery-option:hover .delivery-go{ transform:translate(2px,-2px); color:var(--pink-deep); }
.delivery-foot{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  font-size:.83rem; color:var(--muted);
}
.delivery-foot a{
  color:var(--pink-deep); font-weight:600;
  text-decoration:underline; text-underline-offset:2px;
}
.delivery-foot a:hover{ color:var(--pink-dark); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page{ padding-top:clamp(32px,5vw,56px); }
.crumbs{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:.82rem; color:var(--muted);
  margin-bottom:clamp(28px,4vw,44px);
}
.crumbs a{ color:var(--ink-soft); border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.crumbs a:hover{ color:var(--pink-deep); border-color:var(--pink); }
.crumbs span[aria-current="page"]{ color:var(--ink); font-weight:600; }

.contact-grid{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(36px,6vw,72px); align-items:start;
}
.contact-lead{ color:var(--ink-soft); max-width:44ch; margin-top:16px; font-size:1.03rem; }
.contact-facts{ margin-top:32px; border-top:1px solid var(--line); }
.contact-facts li{
  display:flex; flex-direction:column; gap:2px;
  padding:15px 0; border-bottom:1px solid var(--line);
  font-size:.95rem; color:var(--ink-soft);
  overflow-wrap:anywhere;
}
.contact-facts .info-label{ margin-bottom:2px; }
.contact-facts a{ font-weight:600; color:var(--ink); transition:color .2s; }
.contact-facts a:hover{ color:var(--pink-deep); }

.contact-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(24px,4vw,38px);
  box-shadow:var(--shadow);
}
.contact-form{ display:flex; flex-direction:column; gap:18px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.field label{ font-size:.82rem; font-weight:700; letter-spacing:.02em; color:var(--ink); }
.req{ color:var(--pink-deep); }
.optional{ font-weight:500; font-size:.78rem; color:var(--muted); }
.field input,
.field select,
.field textarea{
  width:100%; font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.field textarea{ resize:vertical; min-height:132px; line-height:1.55; }
.field input:hover,
.field select:hover,
.field textarea:hover{ border-color:#D6C6B6; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--pink-deep);
  background:#fff; box-shadow:0 0 0 3px rgba(200,30,86,.14);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{
  border-color:var(--pink-dark); background:#FFF7F9;
}
.select-wrap{ position:relative; display:flex; }
.select-wrap select{
  appearance:none; -webkit-appearance:none;
  padding-right:40px; cursor:pointer;
}
.select-caret{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--ink-soft);
}
.field-error{ font-size:.8rem; font-weight:600; color:var(--pink-dark); }
.field-hint{ font-size:.78rem; color:var(--muted); }
.hp-field{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.form-note{ font-size:.8rem; color:var(--muted); }
.form-note a{
  color:var(--pink-deep); font-weight:600;
  text-decoration:underline; text-underline-offset:2px;
}
.form-status{ font-size:.85rem; font-weight:600; color:var(--ink-soft); }
.form-status:empty{ display:none; }
.form-status a{ color:var(--pink-deep); text-decoration:underline; }
.form-debug{
  display:block; margin-top:8px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.72rem; font-weight:500; line-height:1.5; color:var(--muted);
}

.form-success{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center; padding:clamp(12px,3vw,28px) 0;
}
.success-mark{
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#E3F7EB; color:#0F7B43;
}
.form-success .display{ font-size:clamp(1.8rem,3vw,2.3rem); }
.form-success p{ color:var(--ink-soft); max-width:40ch; }
.form-success .text-link{ margin-top:6px; }
.form-success:focus{ outline:none; }

/* ============================================================
   APPLICATION PAGE
   ============================================================ */
.apply-page .contact-intro{ max-width:640px; }
.apply-page .contact-intro .display{ margin-bottom:14px; }

/* Brief panel that sits beside the intro */
.apply-brief{ background:var(--cream); box-shadow:none; }
.apply-brief-title{
  font-family:var(--serif); font-weight:700; font-size:1.2rem;
  line-height:1.2; margin-bottom:12px;
}
.apply-job{ margin-top:32px; }
.apply-job-lead{ font-size:.95rem; color:var(--ink-soft); margin:0 0 14px; }
.apply-job .apply-steps{ padding-left:0; gap:12px; }
.apply-job .apply-steps li{ position:relative; padding-left:22px; }
.apply-job .apply-steps li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:50%; background:var(--pink-deep);
}
.apply-steps{
  margin:0; padding-left:20px;
  display:flex; flex-direction:column; gap:10px;
  font-size:.92rem; color:var(--ink-soft);
}
.apply-steps li{ padding-left:4px; }
.apply-steps strong{ color:var(--ink); }

/* The form card itself */
.form-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(22px,3.4vw,44px);
  box-shadow:var(--shadow);
  margin-top:clamp(30px,4vw,48px);
}
.form-section{ display:flex; flex-direction:column; gap:18px; }
.form-section + .form-section{
  margin-top:clamp(26px,3.4vw,40px);
  padding-top:clamp(26px,3.4vw,40px);
  border-top:1px solid var(--line);
}
.form-section-title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.15;
  margin-bottom:2px;
}
.form-divider{ height:1px; background:var(--line); border:0; margin:6px 0; }
.form-sub-title{
  font-family:var(--serif); font-weight:700;
  font-size:1.06rem; line-height:1.2; margin-top:4px;
}

/* Fieldset questions read like labels, without the browser's default box */
fieldset.field{ border:0; padding:0; margin:0; min-width:0; }
.field legend{
  font-size:.82rem; font-weight:700; letter-spacing:.02em;
  color:var(--ink); padding:0;
}

/* Two-up rows inside the form */
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-row--3{ grid-template-columns:1fr 1fr 1fr; }

/* Yes / no radio pairs */
.yesno{ display:flex; flex-wrap:wrap; gap:10px; }
.yesno label{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.9rem; font-weight:600;
  border:1px solid var(--line); border-radius:999px;
  background:var(--bg); padding:11px 18px;
  cursor:pointer; transition:border-color .2s, background-color .2s;
}
.yesno label:hover{ border-color:var(--pink); }
.yesno input{ width:auto; margin:0; accent-color:var(--pink-deep); }
.yesno input:checked ~ *,
.yesno label:has(input:checked){
  border-color:var(--pink-deep); background:var(--pink-soft);
}

/* Multiple-choice options (skills test) */
.options{ display:flex; flex-direction:column; gap:8px; }
.q{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start;
  font-size:.9rem; font-weight:500; line-height:1.45;
  border:1px solid var(--line); border-radius:12px;
  background:var(--bg); padding:11px 14px;
  cursor:pointer; transition:border-color .2s, background-color .2s;
}
.q:hover{ border-color:var(--pink); }
.q input{ margin:3px 0 0; accent-color:var(--pink-deep); }
.q:has(input:checked){ border-color:var(--pink-deep); background:var(--pink-soft); }
.q-num{ font-weight:700; color:var(--pink-deep); }
.q-text{ min-width:0; }
.q-other .q-text{ font-weight:600; }
.other-answer{
  display:flex; flex-direction:column; gap:6px;
  margin:2px 0 2px 26px;
}
.other-answer label{ font-size:.78rem; font-weight:600; color:var(--muted); }
.other-answer input{
  width:100%; max-width:420px; font:inherit; font-size:.9rem;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:9px 12px;
}
.other-answer input:focus-visible{
  outline:2px solid var(--pink-deep); outline-offset:2px; border-color:transparent;
}

/* Ranking question */
.rank-grid{ display:flex; flex-direction:column; gap:8px; max-width:420px; }
.rank-row{
  display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center;
  border:1px solid var(--line); border-radius:12px; background:var(--bg);
  padding:9px 14px;
}
.rank-label{ font-size:.9rem; font-weight:600; }
.rank-input{
  width:52px; text-align:center; font:inherit; font-size:.95rem; font-weight:700;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:8px 6px;
}
.rank-input:focus-visible{
  outline:2px solid var(--pink-deep); outline-offset:2px; border-color:transparent;
}

/* Availability table */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.availability{
  width:100%; min-width:520px; border-collapse:collapse;
  font-size:.9rem;
}
.availability th, .availability td{
  padding:10px 12px; text-align:left; border-bottom:1px solid var(--line);
}
.availability thead th{
  font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--ink);
}
.availability tbody th{ font-weight:600; }
.availability td input[type="time"]{
  width:100%; max-width:140px; font:inherit; font-size:.88rem;
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:8px 10px;
}
.availability td input[type="time"]:focus-visible{
  outline:2px solid var(--pink-deep); outline-offset:2px; border-color:transparent;
}
.check{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.check input{ width:auto; margin:0; accent-color:var(--pink-deep); }

/* Statement checkboxes */
.statement{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  font-size:.88rem; font-weight:500; line-height:1.5;
  border:1px solid var(--line); border-radius:12px; background:var(--bg);
  padding:14px 16px; cursor:pointer;
  transition:border-color .2s, background-color .2s;
}
.statement:hover{ border-color:var(--pink); }
.statement:has(input:checked){ border-color:var(--pink-deep); background:var(--pink-soft); }
.statement input{
  width:auto; margin:3px 0 0; accent-color:var(--pink-deep);
}

.form-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin-top:clamp(26px,3.4vw,38px);
  padding-top:clamp(22px,3vw,32px);
  border-top:1px solid var(--line);
}
.form-actions .btn-ghost{
  background:transparent; border-color:var(--line); color:var(--ink-soft);
}
.form-actions .btn-ghost:hover{
  background:var(--cream); border-color:var(--ink); color:var(--ink);
  transform:none; box-shadow:var(--shadow-sm);
}

.success-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }

/* Screen-reader-only helper */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* Off-screen helpers: the hidden POST frame and the injected PDF attachment */
.post-target, .pdf-attach{
  position:absolute; width:1px; height:1px; margin:-1px;
  border:0; padding:0; overflow:hidden; clip-path:inset(50%);
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:var(--delay,0ms);
  will-change:opacity, transform;
}
.reveal.is-visible{ opacity:1; transform:none; }

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav-phone{ display:none; }
  .footer-grid{ grid-template-columns:1.5fr 1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ justify-content:center; margin-top:8px; }
  .arch{ width:min(100%,360px); aspect-ratio:1 / 1.05; }
  .hero-facts{ gap:28px; }

  .story-grid{ grid-template-columns:1fr; }
  .story-art{ max-width:440px; margin-inline:auto; width:100%; }

  .section-head{ flex-direction:column; align-items:flex-start; gap:16px; }
  .section-note{ max-width:none; }

  .sig-grid{ grid-template-columns:1fr; }
  .sig-card{ min-height:280px; }

  .order-grid{ grid-template-columns:1fr; }
  .order-visual{ min-height:280px; order:-1; }
  .order-ticket{ transform:rotate(-3deg); }

  .visit-grid{ grid-template-columns:1fr; }
  .visit-map{ min-height:340px; }
  .visit-map iframe{ min-height:340px; }
  .visit-photos{ gap:14px; }

  .review-grid{ grid-template-columns:1fr; gap:44px; }
  .review-card:nth-child(2), .review-card:nth-child(3){ margin-left:0; width:100%; }

  .contact-grid{ grid-template-columns:1fr; gap:36px; }
  .contact-facts{ max-width:560px; }

  .apply-page .contact-intro{ max-width:none; }
  .apply-brief{ max-width:560px; }

  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}

@media (max-width:780px){
  .menu-toggle{ display:block; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    display:none; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    padding:14px clamp(20px,4vw,40px) 22px;
    box-shadow:0 24px 30px -24px rgba(26,22,19,.4);
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ padding:13px 12px; border-radius:12px; font-size:1rem; }
  .nav-actions{ gap:12px; }
  .topbar-loc{ display:none; }
  .topbar-inner{ justify-content:center; }

  .hero{ padding-top:44px; }
  .hero-title{ font-size:clamp(2.6rem,10vw,3.6rem); }
  .hero-cta{ margin-bottom:36px; }
  .hero-facts{ justify-content:space-between; }
  .hero-facts strong{ font-size:1.4rem; }

  .menu-grid{ grid-template-columns:1fr; }
  .card-photo img{ aspect-ratio:16 / 9; max-height:320px; }
  .tabs{ width:100%; overflow-x:auto; }
  .tab{ flex:1; text-align:center; white-space:nowrap; padding:11px 14px; font-size:.82rem; }

  .menu-foot{ flex-direction:column; align-items:flex-start; }
  .menu-foot-actions{ width:100%; }
  .menu-foot-actions .btn{ flex:1 1 220px; }

  .footer-bottom{ flex-direction:column; }
}

@media (max-width:520px){
  .nav-inner{ height:68px; }
  .brand-name{ font-size:1.32rem; }
  .nav-actions .btn span.arrow{ display:none; }
  .hero-cta .btn{ flex:1 1 auto; }
  .hero-facts{ gap:18px; }
  .hero-facts li{ font-size:.76rem; }
  .hero-facts strong{ font-size:1.25rem; }

  .collage{ gap:12px; }
  .collage-card{ padding:16px; border-radius:20px; }
  .collage-badge{ padding:10px 16px; }
  .badge-big{ font-size:1.5rem; }
  .badge-small{ font-size:.66rem; }

  .menu-card{ padding:22px; }
  .card-photo{ margin:-22px -22px 2px; }
  .card-photo img{ max-height:240px; }
  .flavor-strip{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:12px; }
  .topping-strip{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:14px; }
  .drink-strip{ grid-template-columns:repeat(auto-fill,minmax(126px,1fr)); gap:12px; }
  .drink-group-head{ font-size:1.02rem; margin-bottom:12px; }
  .drink-name{ font-size:.78rem; }
  .review-card{ padding:22px; }
  .visit-photos{ grid-template-columns:1fr; gap:20px; }
  .visit-photo .visit-cap{ margin-top:8px; }
  .order-visual{ min-height:240px; }
  .orb-1{ width:150px; height:150px; }
  .orb-2{ width:120px; height:120px; }
  .order-ticket{ padding:28px; }

  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ font-size:.75rem; }

  .hero-cta .btn-primary{ flex:1 0 100%; }
  .order-actions .btn{ flex:1 1 100%; }

  .form-row{ grid-template-columns:1fr; }
  .contact-card{ border-radius:22px; }

  .form-card{ border-radius:22px; padding:24px 18px; }
  .field-row, .field-row--3{ grid-template-columns:1fr; }
  .form-section-title{ font-size:1.22rem; }
  .q{ padding:10px 12px; font-size:.86rem; }
  .other-answer{ margin-left:12px; }
  .rank-grid{ max-width:none; }
  .availability{ min-width:460px; }
  .statement{ padding:12px 14px; font-size:.84rem; }
  .form-actions{ gap:12px; }
  .form-actions .btn, .success-actions .btn{ flex:1 1 100%; }

  .delivery-dialog{
    inset:auto 0 0 0;
    width:100%; max-width:100%;
    max-height:92dvh; margin:0;
    border-radius:24px 24px 0 0;
  }
  .delivery-card{ padding:28px 22px 26px; }
  .delivery-title{ padding-right:28px; }
}

@media (max-width:460px){
  .nav-inner{ gap:12px; }
  .brand{ gap:9px; }
  .brand-name{ font-size:1.15rem; }
  .brand-logo{ width:34px; height:34px; }
  .nav-actions{ gap:8px; }
  .nav-actions .btn{ padding:10px 14px; font-size:.8rem; }
  .btn-word{ display:none; }
  .hero-title{ font-size:2.45rem; }
}

@media (max-width:350px){
  .brand-name{ display:none; }
  .brand-logo{ width:38px; height:38px; }
}

/* ============================================================
   PRINT (job application) — keeps the site's look on paper
   ============================================================ */
.print-head{ display:none; }

@page{
  size: letter;
  margin: 14mm 13mm 15mm;
}

@media print{
  .topbar, .site-header, .site-footer, .delivery-dialog, .crumbs,
  .skip-link, .menu-toggle, .form-actions, .form-status, .form-note,
  .contact-intro, .apply-brief, .social-row, .post-target, .pdf-attach,
  .form-success, .hp-field{ display:none !important; }

  html, body{
    background:#fff !important;
    color:var(--ink) !important;
    font-size:10.5pt;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  /* Letterhead that only exists on paper */
  .print-head{
    display:block !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .print-head-row{
    display:flex; align-items:center; gap:12px;
    padding-bottom:9px; border-bottom:2.5pt solid var(--pink-deep);
  }
  .print-head img{ width:44px; height:44px; }
  .print-head-name{
    font-family:var(--serif); font-weight:700; font-size:19pt;
    line-height:1; color:var(--pink-deep); letter-spacing:-.01em;
    margin:0;
  }
  .print-head-doc{
    font-family:var(--serif); font-weight:600; font-size:12.5pt;
    color:var(--ink); margin:9px 0 2px;
  }
  .print-head-meta{
    font-size:8.5pt; color:var(--ink-soft); margin:0;
  }
  .print-head-meta span{ color:var(--ink); font-weight:600; }

  .section{ padding:0 !important; }
  .container{ max-width:none !important; padding:0 !important; }
  .contact-grid{ display:block !important; }

  .form-card{
    background:#fff !important;
    border:0 !important; box-shadow:none !important;
    padding:0 !important; margin:0 !important; border-radius:0 !important;
  }

  /* Section headers keep the pink identity */
  .form-section{ gap:11px !important; }
  .form-section + .form-section{
    margin-top:15pt !important; padding-top:12pt !important;
    border-top:1.4pt solid var(--pink-deep) !important;
  }
  .form-section-title{
    font-size:13.5pt !important; color:var(--pink-deep) !important;
    margin-bottom:2pt !important;
  }
  .form-section-title::after{ display:none !important; }
  .form-sub-title{ font-size:11pt !important; color:var(--ink) !important; }
  .form-hint, .field-hint, .q-hint{ font-size:8.5pt !important; color:var(--ink-soft) !important; }
  .eyebrow{ color:var(--pink-deep) !important; }

  /* Fields stay writable and stay whole on one page */
  .field, .q, .statement, .rank-row, .yesno label, .availability tr{ break-inside:avoid; }
  .form-section-title{ break-after:avoid; }
  .field label, .field legend, .q legend{ font-size:9.5pt !important; color:var(--ink) !important; }
  .field input, .field select, .field textarea,
  .other-answer input, .rank-input, .availability td input[type="time"]{
    border:0.7pt solid #B9AA9B !important; background:#fff !important;
    color:var(--ink) !important; font-size:10pt !important;
    border-radius:4px !important;
  }
  .field textarea{ min-height:34pt; }
  .q, .statement, .rank-row, .yesno label{
    border:0.7pt solid var(--line) !important; background:#fff !important;
    color:var(--ink) !important;
  }
  .q-num{
    background:var(--pink-deep) !important; color:#fff !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .req{ color:var(--pink-deep) !important; }
  .check input, .statement input, .yesno input{ accent-color:var(--pink-deep); }

  .availability{ font-size:8.5pt !important; }
  .availability th{ color:var(--pink-deep) !important; }
  .availability thead th, .availability td{ border-color:var(--line) !important; }
  .table-scroll{ overflow:visible !important; }

  a{ color:var(--pink-dark) !important; text-decoration:none; }
}