:root{--espresso:#5C3B18;--dark-roast:#6F5C47;--mocha:#907D67;--latte:#B5A088;--oat:#D0BCA4;--cream:#F8E7D3;--cream-dark:#EDD5B8;--parchment:#FDF3E7;--deep:#3A2410;}
*{margin:0;padding:0;box-sizing:border-box;}html{scroll-behavior:auto;}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--espresso);overflow-x:hidden;}
a{color:inherit;}img{max-width:100%;height:auto;}
#scroll-bar{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--oat);z-index:9999;pointer-events:none;}
nav{position:fixed;top:3px;left:0;right:0;z-index:1000;background:var(--espresso);display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:54px;transition:box-shadow 0.4s;}
nav.scrolled{box-shadow:0 4px 24px rgba(58,36,16,0.5);}
.nav-logo{display:flex;align-items:center;text-decoration:none;line-height:0;}
.nav-logo img{height:36px;width:auto;display:block;object-fit:contain;}
.nav-pill{font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;background:var(--oat);color:var(--espresso);padding:6px 14px;border-radius:100px;cursor:pointer;transition:transform 0.15s,background 0.2s;text-decoration:none;white-space:nowrap;}
.nav-pill:active{transform:scale(0.95);background:var(--cream);}
.hero{background:var(--espresso);height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 24px 52px;position:relative;overflow:hidden;padding-top:57px;max-width:100%;}
.hero-bg{position:absolute;inset:0;will-change:transform;}
.hero-blob{position:absolute;border-radius:50%;will-change:transform;}
.blob1{width:320px;height:320px;top:-80px;right:-80px;background:#4A2E10;opacity:0.55;}
.blob2{width:180px;height:180px;top:60px;right:40px;border:1.5px solid var(--mocha);opacity:0.3;background:transparent;}
.blob3{width:100px;height:100px;bottom:160px;left:-30px;background:var(--dark-roast);opacity:0.35;}
.blob4{width:60px;height:60px;bottom:80px;right:30px;background:var(--mocha);opacity:0.2;}
.hero-cup-wrap{position:absolute;top:80px;right:24px;display:flex;flex-direction:column;align-items:center;will-change:transform;}
.steam-group{display:flex;gap:6px;align-items:flex-end;margin-bottom:8px;}
.steam{border-radius:2px;background:var(--oat);opacity:0;animation:stm 2.6s ease-in-out infinite;}
.steam:nth-child(1){width:2px;height:20px;}.steam:nth-child(2){width:2px;height:13px;animation-delay:.7s;}.steam:nth-child(3){width:2px;height:20px;animation-delay:1.4s;}
@keyframes stm{0%{opacity:0;transform:translateY(0)scaleX(1);}40%{opacity:.7;transform:translateY(-14px)scaleX(1.4);}100%{opacity:0;transform:translateY(-30px)scaleX(.7);}}
.hero-cup{width:92px;height:92px;border-radius:50%;background:var(--dark-roast);border:2px solid var(--mocha);display:flex;align-items:center;justify-content:center;font-size:40px;animation:bobble 5s ease-in-out infinite;}
@keyframes bobble{0%,100%{transform:translateY(0)rotate(-2deg);}50%{transform:translateY(-16px)rotate(2deg);}}
.hero-eyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mocha);margin-bottom:14px;position:relative;z-index:2;}
.hero-title{font-family:'Playfair Display',serif;font-size:clamp(38px,11vw,56px);line-height:1.07;color:var(--cream);margin-bottom:18px;position:relative;z-index:2;}
.hero-title em{color:var(--oat);font-style:italic;display:block;}
.hero-sub{font-size:14px;line-height:1.7;color:var(--latte);margin-bottom:32px;max-width:300px;position:relative;z-index:2;}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:2;}
.btn-p{background:var(--cream);color:var(--espresso);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:13px 24px;border-radius:100px;cursor:pointer;transition:transform .2s;text-decoration:none;display:inline-block;}
.btn-p:active{transform:scale(.95);}
.btn-o{border:1px solid var(--mocha);color:var(--oat);font-size:12px;letter-spacing:.08em;padding:13px 22px;border-radius:100px;cursor:pointer;transition:transform .2s;text-decoration:none;display:inline-block;}
.btn-o:active{transform:scale(.95);}
.hero-stats{display:flex;margin-top:40px;border-top:1px solid #4A2E10;padding-top:24px;position:relative;z-index:2;}
.hero-stat{flex:1;text-align:center;padding:0 8px;position:relative;}
.hero-stat:not(:last-child)::after{content:'';position:absolute;right:0;top:10%;height:80%;width:1px;background:#4A2E10;}
.stat-n{font-family:'Playfair Display',serif;font-size:26px;color:var(--cream);line-height:1;margin-bottom:4px;}
.stat-l{font-size:10px;color:var(--mocha);line-height:1.4;}
.scroll-hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:2;opacity:.6;}
.scroll-hint span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mocha);}
.scroll-line{width:1px;height:32px;background:var(--mocha);animation:pulse-line 2s ease-in-out infinite;}
@keyframes pulse-line{0%,100%{opacity:.6;}50%{opacity:1;}}
.marquee-wrap{background:var(--oat);overflow:hidden;max-width:100%;padding:12px 0;border-top:1px solid var(--latte);border-bottom:1px solid var(--latte);}
.marquee-row{display:flex;will-change:transform;}
.marquee-item{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--espresso);white-space:nowrap;padding:0 28px;flex-shrink:0;}
.marquee-item.italic{font-family:'Playfair Display',serif;font-style:italic;font-size:13px;letter-spacing:.06em;}
.mdot{color:var(--mocha);}
.h-pin-wrap{overflow:hidden;max-width:100%;width:100%;}.h-pin-inner{display:flex;width:300vw;height:100svh;}
.h-panel{width:100vw;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:48px 24px;flex-shrink:0;}
.hp1{background:var(--espresso);}.hp2{background:var(--deep);}.hp3{background:var(--dark-roast);}
.h-panel-num{font-family:'Playfair Display',serif;font-size:80px;color:rgba(255,255,255,0.06);line-height:1;margin-bottom:-20px;}
.h-panel-eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mocha);margin-bottom:10px;}
.h-panel-title{font-family:'Playfair Display',serif;font-style:italic;font-size:28px;color:var(--cream);line-height:1.2;margin-bottom:12px;}
.h-panel-body{font-size:13px;color:var(--latte);line-height:1.7;max-width:280px;}
.h-panel-pill{margin-top:20px;display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.1);color:var(--oat);padding:6px 14px;border-radius:100px;border:1px solid rgba(255,255,255,.15);}
.stats-section{background:var(--espresso);display:grid;grid-template-columns:1fr 1fr;gap:1px;background-color:var(--dark-roast);}
.stat-card{background:var(--espresso);padding:32px 20px;text-align:center;}
.sc-num{font-family:'Playfair Display',serif;font-size:48px;color:var(--cream);line-height:1;}
.sc-unit{font-size:22px;color:var(--oat);}
.sc-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mocha);margin-top:8px;line-height:1.5;}
.about-strip{background:var(--parchment);padding:48px 24px;display:flex;flex-direction:column;gap:36px;}
.about-item{display:flex;align-items:flex-start;gap:16px;}
.a-icon{width:48px;height:48px;border-radius:50%;background:var(--espresso);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.about-item-text h3{font-family:'Playfair Display',serif;font-style:italic;font-size:17px;color:var(--espresso);margin-bottom:4px;}
.about-item-text p{font-size:13px;color:var(--dark-roast);line-height:1.65;}
.section-head{padding:44px 24px 20px;background:var(--cream);}
.eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mocha);display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.eyebrow::before{content:'';display:block;width:0;height:1px;background:var(--latte);}
.section-title{font-family:'Playfair Display',serif;font-size:30px;font-style:italic;color:var(--espresso);line-height:1.15;}
.menu-section{background:var(--parchment);}
.menu-cols-label{display:flex;justify-content:flex-end;gap:16px;padding:0 24px 8px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha);}
.menu-cols-label span{min-width:52px;text-align:right;}
.menu-cat-title{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mocha);padding:16px 24px 10px;border-top:1px solid var(--oat);position:sticky;top:57px;background:var(--parchment);z-index:10;transition:background .3s,color .3s,padding .3s;}
.menu-cat-title.stuck{background:var(--espresso);color:var(--oat);padding:12px 24px;}
.menu-row{display:flex;align-items:center;padding:14px 24px;border-bottom:1px solid rgba(176,153,128,0.35);transition:background .2s;box-shadow:0 1px 0 rgba(255,255,255,0.6);}
.menu-row:active{background:var(--cream-dark);}
.menu-item-info{flex:1;}
.menu-item-name{font-size:16px;color:var(--espresso);font-family:'Libre Baskerville',serif;font-weight:700;letter-spacing:.01em;}
.menu-item-desc{font-size:11px;color:var(--mocha);margin-top:2px;font-style:italic;}
.menu-prices{display:flex;gap:4px;}
.menu-price{font-size:14px;color:var(--espresso);min-width:52px;text-align:right;font-weight:700;}
.specialty-section{background:var(--cream);padding:0 0 44px;}
.specialty-scroll{display:flex;gap:14px;overflow-x:auto;padding:4px 24px 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.specialty-scroll::-webkit-scrollbar{display:none;}
.specialty-card{flex-shrink:0;width:220px;background:var(--espresso);border-radius:18px;padding:22px 20px;scroll-snap-align:start;cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.specialty-card:active{transform:scale(.95);}
.sc-price{font-size:11px;color:var(--mocha);letter-spacing:.06em;margin-bottom:10px;}
.sc-name{font-family:'Playfair Display',serif;font-style:italic;font-size:22px;color:var(--cream);line-height:1.1;margin-bottom:10px;}
.sc-desc{font-size:12px;color:var(--latte);line-height:1.6;}
.sc-tag{margin-top:16px;display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--espresso);background:var(--oat);padding:4px 10px;border-radius:100px;}
.scroll-dots{display:flex;justify-content:center;gap:6px;padding-bottom:4px;}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--latte);transition:background .3s,transform .3s;}
.sdot.active{background:var(--espresso);transform:scale(1.4);}
.quote-section{background:var(--deep);padding:80px 24px;text-align:center;position:relative;overflow:hidden;}
.q-bg{position:absolute;font-family:'Playfair Display',serif;font-size:130px;font-style:italic;color:rgba(255,255,255,.03);top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;will-change:transform;}
.q-line{width:0;height:1px;background:var(--mocha);margin:0 auto 28px;}
.q-mark{font-family:'Playfair Display',serif;font-size:60px;color:var(--dark-roast);line-height:.6;display:block;margin-bottom:20px;}
.q-text{font-family:'Playfair Display',serif;font-style:italic;font-size:22px;color:var(--oat);line-height:1.5;max-width:280px;margin:0 auto 16px;}
.q-attr{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mocha);}
.extras-section{background:var(--espresso);padding:40px 24px;}
.extras-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:24px;}
.extra-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 10px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:13px;color:var(--oat);}
.extra-item:nth-child(even){padding:10px 0 10px 12px;border-left:1px solid rgba(255,255,255,.07);}
.ep{color:var(--mocha);font-size:12px;}
.baked-note{margin-top:24px;padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:12px;font-size:13px;color:var(--latte);font-style:italic;text-align:center;line-height:1.6;}
.club-section{background:var(--deep);padding:0 24px 52px;position:relative;overflow:hidden;}
.club-section-head{padding:44px 0 24px;}
.club-bg-txt{position:absolute;top:20px;left:-10px;font-family:'Playfair Display',serif;font-size:110px;color:rgba(255,255,255,.03);font-style:italic;pointer-events:none;white-space:nowrap;will-change:transform;}
.club-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:28px 24px;}
.club-perk{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);}
.club-perk:last-child{border-bottom:none;}
.pdot{width:8px;height:8px;border-radius:50%;background:var(--oat);flex-shrink:0;margin-top:5px;}
.ptxt{font-size:14px;color:var(--latte);line-height:1.5;}
.club-cta{width:100%;margin-top:24px;background:var(--oat);color:var(--espresso);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:15px;border-radius:100px;text-align:center;cursor:pointer;transition:background .2s,transform .15s;display:block;text-decoration:none;}
.club-cta:active{transform:scale(.97);background:var(--cream);}
.visit-section{background:var(--parchment);padding:40px 24px 52px;}
.visit-detail{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--oat);}
.visit-detail:last-child{border-bottom:none;}
.v-icon{width:40px;height:40px;border-radius:50%;background:var(--cream-dark);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.v-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mocha);margin-bottom:3px;}
.v-val{font-size:15px;color:var(--espresso);font-family:'Libre Baskerville',serif;line-height:1.5;}
.map-box{margin-top:24px;height:160px;border-radius:16px;overflow:hidden;border:1px solid var(--oat);}
footer{background:var(--deep);padding:36px 24px;text-align:center;}
.f-logo{font-family:'Playfair Display',serif;font-style:italic;font-size:22px;color:var(--oat);margin-bottom:8px;}
.f-phone{font-size:13px;color:var(--mocha);margin-bottom:20px;}
.f-copy{font-size:11px;color:rgba(176,153,128,.35);}
.g-fade{opacity:0;}.g-up{opacity:0;transform:translateY(40px);}.g-left{opacity:0;transform:translateX(-40px);}.g-right{opacity:0;transform:translateX(40px);}.g-scale{opacity:0;transform:scale(0.85);}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}.g-fade,.g-up,.g-left,.g-right,.g-scale{opacity:1;transform:none;}}

/* ── DESKTOP (768px+) ── */
@media(min-width:768px){
  nav{height:64px;padding:0 48px;}
  nav.scrolled{box-shadow:0 4px 32px rgba(58,36,16,0.4);}
  .nav-logo img{height:42px;}
  .nav-pill{font-size:12px;padding:8px 20px;}
  .hero{padding:0 64px 72px;padding-top:64px;justify-content:center;flex-direction:row;align-items:flex-end;gap:80px;}
  .hero-content{flex:1;max-width:560px;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:0;}
  .hero-eyebrow{font-size:11px;}
  .hero-title{font-size:clamp(52px,6vw,80px);margin-bottom:24px;}
  .hero-sub{font-size:16px;max-width:420px;margin-bottom:40px;}
  .hero-btns{gap:16px;}
  .btn-p,.btn-o{font-size:13px;padding:14px 32px;}
  .hero-stats{margin-top:56px;padding-top:32px;}
  .stat-n{font-size:32px;}
  .stat-l{font-size:11px;}
  .hero-cup-wrap{position:relative;top:auto;right:auto;flex-shrink:0;align-self:center;margin-bottom:40px;}
  .hero-cup{width:160px;height:160px;font-size:68px;}
  .steam:nth-child(1){width:3px;height:32px;}
  .steam:nth-child(2){width:3px;height:22px;}
  .steam:nth-child(3){width:3px;height:32px;}
  .blob1{width:500px;height:500px;top:-120px;right:-120px;}
  .blob2{width:280px;height:280px;top:80px;right:80px;}
  .blob3{width:160px;height:160px;}
  .blob4{width:100px;height:100px;}
  .marquee-item{font-size:13px;padding:0 40px;}
  .marquee-item.italic{font-size:15px;}
  .h-panel{padding:0 120px;justify-content:center;align-items:flex-start;}
  .h-panel-num{font-size:160px;margin-bottom:-40px;}
  .h-panel-title{font-size:64px;max-width:600px;}
  .h-panel-body{font-size:18px;max-width:520px;line-height:1.8;}
  .h-panel-pill{font-size:12px;padding:10px 24px;margin-top:32px;}
  .stats-section{grid-template-columns:1fr 1fr;}
  .stat-card{padding:48px 40px;}
  .about-strip{padding:72px 80px;flex-direction:row;gap:48px;align-items:flex-start;}
  .about-item{flex-direction:column;flex:1;gap:12px;}
  .a-icon{width:56px;height:56px;font-size:24px;}
  .about-item-text h3{font-size:20px;}
  .about-item-text p{font-size:14px;}
  .section-head{padding:72px 80px 32px;}
  .section-title{font-size:44px;}
  .eyebrow{font-size:11px;}
  .menu-section{max-width:900px;margin:0 auto;width:100%;}
  .menu-cols-label{padding:0 48px 12px;}
  .menu-cols-label span{min-width:80px;}
  .menu-cat-title{padding:20px 48px 12px;top:64px;}
  .menu-cat-title.stuck{padding:14px 48px;}
  .menu-row{padding:16px 48px;}
  .menu-row:hover{background:var(--cream-dark);}
  .menu-item-name{font-size:18px;}
  .menu-price{font-size:16px;min-width:80px;}
  .specialty-section{padding:0 0 64px;}
  .specialty-scroll{padding:8px 80px 20px;gap:20px;}
  .specialty-card{width:280px;padding:28px 24px;border-radius:22px;}
  .specialty-card:hover{transform:translateY(-6px) scale(1.02);}
  .sc-name{font-size:28px;}
  .sc-desc{font-size:13px;}
  .quote-section{padding:120px 80px;}
  .q-text{font-size:32px;max-width:480px;}
  .q-bg{font-size:200px;}
  .extras-section{padding:64px 80px;}
  .extras-grid{grid-template-columns:repeat(4,1fr);}
  .extra-item{padding:12px 16px 12px 0;font-size:14px;}
  .extra-item:nth-child(even){padding:12px 0 12px 16px;}
  .ep{font-size:13px;}
  .baked-note{margin-top:32px;font-size:15px;padding:20px;}
  .club-section{padding:0 80px 80px;}
  .club-section-head{padding:72px 0 32px;}
  .club-card{display:grid;grid-template-columns:1fr 1fr;padding:40px;}
  .club-perk{padding:16px 20px 16px 0;border-bottom:none;border-right:1px solid rgba(255,255,255,.07);}
  .club-perk:nth-child(even){padding:16px 0 16px 20px;border-right:none;}
  .club-perk:nth-child(1),.club-perk:nth-child(2){border-bottom:1px solid rgba(255,255,255,.07);}
  .ptxt{font-size:15px;}
  .club-cta{max-width:360px;font-size:14px;padding:18px;}
  .club-bg-txt{font-size:180px;}
  .visit-section{padding:72px 80px 80px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
  .visit-details-col{display:flex;flex-direction:column;}
  .visit-detail{padding:20px 0;}
  .v-icon{width:48px;height:48px;font-size:18px;}
  .v-label{font-size:11px;}
  .v-val{font-size:17px;}
  .map-box{margin-top:0;height:320px;border-radius:20px;}
  #cup-section{padding:80px;flex-direction:row;gap:80px;justify-content:center;align-items:center;}
  #coffee-cup-svg{width:320px;height:350px;}
  #cup-label{font-size:11px;margin-bottom:0;}
  #cup-msg{font-size:14px;margin-top:0;}
  footer{padding:56px 80px;display:flex;align-items:center;justify-content:space-between;text-align:left;}
  .f-logo{font-size:28px;margin-bottom:0;}
  .f-phone{margin-bottom:0;}
  .f-copy{text-align:right;}
}
@media(min-width:1100px){
  .hero{padding:0 100px 80px;padding-top:64px;gap:120px;}
  .hero-title{font-size:clamp(64px,5.5vw,96px);}
  .hero-cup{width:200px;height:200px;font-size:84px;}
  .section-head{padding:80px 120px 36px;}
  .about-strip,.extras-section,.club-section{padding-left:120px;padding-right:120px;}
  .club-section{padding-bottom:100px;}
  .visit-section{padding:80px 120px 100px;}
  .specialty-scroll{padding:8px 120px 20px;}
  .h-panel{padding:100px 120px;}
  .menu-section{max-width:100%;}
  .menu-cols-label,.menu-row{padding-left:120px;padding-right:120px;}
  .menu-cat-title{padding-left:120px;padding-right:120px;}
  .menu-cat-title.stuck{padding-left:120px;padding-right:120px;}
  #cup-section{padding:100px 120px;}
  .specialty-card{width:320px;}
  .q-text{font-size:38px;max-width:600px;}
}