/* hero mockups (see hero-x.js). Only active with ?hx=a|b|c|d. */

/* ---------- A: framed ---------- */
.hx-a .hero { padding:12px; background:#fff; }
.hx-a .hero .bg, .hx-a .hero .shade { inset:12px; border-radius:30px; overflow:hidden; }
.hx-a .hero .shade { background:linear-gradient(180deg, rgba(10,12,10,.18) 0%, rgba(10,12,10,0) 32%, rgba(10,12,10,.18) 60%, rgba(10,12,10,.62) 100%); }
.hx-a .hero .top { top:34px; width:min(1200px, calc(100% - 120px)); }
.hx-a .hero .copy { top:auto; bottom:84px; transform:none; align-items:flex-end; width:min(1200px, calc(100% - 120px)); }
.hx-a .hxleft { display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.hx-a .copy h1 { font-size:clamp(60px, 7.6vw, 118px); }
.hxpill { display:inline-flex; align-items:center; gap:9px; padding:8px 14px 8px 10px; border-radius:99px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font-family:var(--fu); font-size:13px; font-weight:600; color:#fff; }
.hxpill i { width:8px; height:8px; border-radius:50%; background:#9fe07a; box-shadow:0 0 0 4px rgba(159,224,122,.25); animation:livepulse 2s ease-in-out infinite; }
@keyframes livepulse { 50% { box-shadow:0 0 0 7px rgba(159,224,122,0); } }
.hxscroll { position:absolute; left:50%; bottom:30px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:#fff; font-family:var(--fu); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; z-index:5; opacity:.85; }
.hxscroll i { width:1.5px; height:28px; background:linear-gradient(#fff, transparent); animation:scrollcue 1.8s ease-in-out infinite; transform-origin:top; }
@keyframes scrollcue { 0% { transform:scaleY(0); } 50% { transform:scaleY(1); } 100% { transform:scaleY(1); opacity:0; } }

/* ---------- B: split + builder teaser ---------- */
.hx-b .hero { background:#fff; color:var(--ink); height:auto; min-height:0; padding:150px 0 72px; }
.hx-b .hero .bg, .hx-b .hero .shade { display:none; }
.hx-b .hero .top .logo img { filter:none; }
.hx-b .hero .nav { background:rgba(20,22,18,.04); border-color:var(--line); color:var(--ink); box-shadow:none; }
.hx-b .hero .top .btn.white { background:var(--ink); color:#fff; }
.hx-b .hero .copy { position:relative; top:auto; transform:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center; }
.hx-b .hxleft { display:flex; flex-direction:column; gap:28px; }
.hx-b .copy h1 { color:var(--ink); font-size:clamp(56px, 6.2vw, 96px); text-shadow:none; text-wrap:balance; white-space:normal; }
.hx-b .side { max-width:440px; } .hx-b .side .eyebrow { color:var(--olive); opacity:1; } .hx-b .side p { color:var(--muted); }
.hx-b .side .btn.white { background:var(--olive); color:#fff; } .hx-b .side .btn.line { background:var(--card); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); backdrop-filter:none; }
.hxphoto { position:relative; height:min(620px, 70vh); border-radius:36px; background-size:cover; background-position:center 60%; box-shadow:0 30px 60px rgba(20,24,16,.18); }
.hxf { position:absolute; display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:20px; background:rgba(255,255,255,.88); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 40px rgba(20,24,16,.18); color:var(--ink); font-family:var(--fu); animation:floaty 6s ease-in-out infinite; }
.hxf b { display:block; font-size:15px; font-weight:600; } .hxf small { display:block; font-size:11px; color:var(--muted); letter-spacing:.04em; }
.hxf .cup.hxsm { --s:44px; }
.hxf.f1 { left:-28px; top:16%; }
.hxf.f2 { right:-24px; bottom:18%; flex-direction:column; align-items:flex-start; gap:2px; padding:14px 18px; animation-delay:-2s; }
.hxf.f2 b { font-family:var(--fd); font-size:34px; line-height:1; letter-spacing:-.04em; color:var(--olive); font-weight:700; } .hxf.f2 span { font-size:12px; color:var(--muted); }
.hxf.f3 { left:12%; bottom:-18px; font-size:13px; font-weight:600; padding:10px 14px; animation-delay:-4s; }
.hxf.f3 i { width:8px; height:8px; border-radius:50%; background:var(--olive); box-shadow:0 0 0 4px rgba(72,97,55,.18); }
@keyframes floaty { 50% { transform:translateY(-10px); } }

/* ---------- C: cinematic ---------- */
.hx-c .hero .shade { background:linear-gradient(180deg, rgba(10,12,10,.2) 0%, rgba(10,12,10,.05) 30%, rgba(10,12,10,.3) 62%, rgba(10,12,10,.66) 100%); }
.hx-c .hero .copy { top:auto; bottom:118px; transform:none; flex-direction:column; align-items:center; text-align:center; gap:22px; }
.hx-c .copy h1 { font-size:clamp(64px, 10.4vw, 168px); line-height:.9; letter-spacing:-.055em; }
.hx-c .side { max-width:520px; display:flex; flex-direction:column; align-items:center; }
.hx-c .side .eyebrow { display:none; } .hx-c .side p { font-size:18px; }
.hx-c .side .btns { justify-content:center; }
.hxband { position:absolute; left:0; right:0; bottom:0; z-index:4; height:56px; display:flex; align-items:center; overflow:hidden; background:rgba(255,255,255,.1); border-top:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.hxmq { display:flex; width:max-content; animation:hxmq 40s linear infinite; }
.hxmq span { padding:0 28px; color:#fff; font-family:var(--fu); font-size:15px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; position:relative; }
.hxmq span::after { content:""; position:absolute; right:-3px; top:50%; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.55); transform:translateY(-50%); }
@keyframes hxmq { to { transform:translateX(-33.333%); } }

/* ---------- D: signature cup ---------- */
.hx-d .hero .copy { justify-content:flex-start; }
.hx-d .hxleft { display:flex; flex-direction:column; gap:26px; max-width:560px; }
.hx-d .copy h1 { font-size:clamp(56px, 6.6vw, 104px); }
.hxcup { position:absolute; right:max(48px, calc((100% - 1200px) / 2 + 20px)); top:50%; transform:translateY(-46%); width:min(420px, 34vw); aspect-ratio:1; z-index:3; display:grid; place-items:center; }
.hxcup .cup.hxbig { --s:72%; box-shadow:0 40px 70px rgba(10,12,8,.35), 0 8px 18px rgba(10,12,8,.2), inset 0 0 0 1px rgba(0,0,0,.04); animation:cupfloat 7s ease-in-out infinite; }
.hxcup .cup.hxbig s { animation:liqspin 40s linear infinite; }
@keyframes cupfloat { 50% { transform:translateY(-12px) rotate(-3deg); } }
@keyframes liqspin { to { transform:rotate(360deg); } }
.hxring { position:absolute; inset:0; width:100%; height:100%; animation:ringspin 30s linear infinite; overflow:visible; }
.hxring text { font-family:var(--fu); font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; fill:#fff; }
@keyframes ringspin { to { transform:rotate(360deg); } }
.steam { position:absolute; top:-4%; left:50%; width:30%; height:30%; transform:translateX(-50%); pointer-events:none; }
.steam i { position:absolute; bottom:0; width:16%; height:80%; border-radius:50%; background:radial-gradient(ellipse at center, rgba(255,255,255,.55), transparent 70%); filter:blur(8px); animation:steam 4.5s ease-in-out infinite; }
.steam i:nth-child(1) { left:18%; } .steam i:nth-child(2) { left:44%; animation-delay:-1.5s; } .steam i:nth-child(3) { left:70%; animation-delay:-3s; }
@keyframes steam { 0% { transform:translateY(20%) scaleX(1); opacity:0; } 40% { opacity:.9; } 100% { transform:translateY(-60%) scaleX(1.6); opacity:0; } }

/* ---------- tablet + phone ---------- */
@media (max-width:1199px) {
  .hx-b .hero .copy { grid-template-columns:1fr; gap:40px; } .hxphoto { height:420px; } .hxf.f1 { left:12px; } .hxf.f2 { right:12px; }
  .hx-d .hxcup { width:min(320px, 34vw); }
}
@media (max-width:809px) {
  .hx-a .hero { padding:8px; } .hx-a .hero .bg, .hx-a .hero .shade { inset:8px; border-radius:22px; }
  .hx-a .hero .top { top:24px; width:calc(100% - 48px); } .hx-a .hero .copy { bottom:64px; width:calc(100% - 48px); flex-direction:column; align-items:flex-start; top:auto; transform:none; }
  .hx-a .copy h1 { font-size:42px; } .hxpill { font-size:11.5px; } .hxscroll { display:none; }
  .hx-b .hero { padding:110px 0 48px; } .hx-b .copy h1 { font-size:44px; } .hxphoto { height:360px; border-radius:26px; }
  .hxf { padding:9px 12px; border-radius:16px; } .hxf b { font-size:13px; } .hxf .cup.hxsm { --s:34px; } .hxf.f2 b { font-size:26px; }
  .hx-c .hero .copy { bottom:84px; } .hx-c .copy h1 { font-size:54px; } .hx-c .side p { font-size:14px; } .hxband { height:44px; } .hxmq span { font-size:13px; padding:0 18px; }
  .hx-d .hero .copy { top:auto; bottom:40px; transform:none; } .hx-d .copy h1 { font-size:40px; }
  .hxcup { right:50%; top:118px; transform:translateX(50%); width:200px; }
}

/* ---------- B: illustrated service map ---------- */
.hxmapwrap { overflow:visible; background:#eef1e6; }
.hxmap { position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; clip-path:inset(0 round 36px); }
.hxmap .contours path { animation:contour 9s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:center; }
.hxmap .contours path:nth-child(2n) { animation-delay:-3s; }
@keyframes contour { to { transform:scale(1.03); } }
.hxmap .pin { cursor:default; }
.hxmap .pin .dot { fill:#486137; stroke:#fff; stroke-width:2.5; }
.hxmap .pin .halo { fill:rgba(72,97,55,.16); transform-box:fill-box; transform-origin:center; animation:pinpulse 2.8s ease-out infinite; animation-delay:var(--d); }
@keyframes pinpulse { 0% { transform:scale(.5); opacity:1; } 100% { transform:scale(1.9); opacity:0; } }
.hxmap .pin .lbl rect { fill:#fff; filter:drop-shadow(0 3px 6px rgba(30,34,24,.12)); }
.hxmap .pin .lbl text { font-family:var(--fu); font-size:11px; font-weight:600; fill:#141612; letter-spacing:-.01em; }
.hxmap .pin .lbl { transition:transform .35s cubic-bezier(.34,1.56,.64,1); transform-box:fill-box; }
.hxmap .pin:hover .dot { fill:#c6a57b; }
.hxmap .pin:hover .lbl rect { fill:#141612; } .hxmap .pin:hover .lbl text { fill:#fff; }
.hxmapwrap .hxf.f1 { left:-26px; top:40%; }
.hxmapwrap .hxf.f2 { right:-22px; top:62%; bottom:auto; }
.hxmapwrap .hxf.f3 { left:12%; right:auto; top:auto; bottom:-18px; }
@media (max-width:809px) { .hxmapwrap .hxf.f1 { left:10px; top:auto; bottom:16px; } .hxmapwrap .hxf.f2 { right:10px; top:14px; } .hxmapwrap .hxf.f3 { display:none; } }
@media (max-width:809px) { .hxmap { clip-path:inset(0 round 26px); } }

/* ---------- B: map in its own clip, event cards above it ---------- */
.hxmapwrap { background:transparent !important; box-shadow:none; }
.hxclip { position:absolute; inset:0; border-radius:36px; overflow:hidden; background:#eef1e6; box-shadow:0 30px 60px rgba(20,24,16,.18); }
.hxclip .hxmap { clip-path:none; }
.hxmapwrap.relief .hxclip { perspective:1400px; background:#d3dfc0; }
.hxmapwrap.relief .hxmap { transform:rotateX(26deg) scale(1.22) translateY(-3%); transform-origin:50% 62%; }
.hxmapwrap.relief .hxclip::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(228,236,213,.95) 0%, rgba(228,236,213,0) 16%); }
.hxmapwrap.relief .contours path { animation:none; }
.hxevs { position:absolute; inset:0; pointer-events:none; }
.hxev { position:absolute; display:flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; border-radius:16px; background:rgba(255,255,255,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 16px 34px rgba(20,24,16,.18); font-family:var(--fu); white-space:nowrap; transform:translate(-18px, calc(-100% - 26px)) scale(.86); transform-origin:18px 100%;
  opacity:0; transition:opacity .45s var(--ease), transform .6s cubic-bezier(.34,1.56,.64,1); z-index:3; }
.hxev.on { opacity:1; transform:translate(-18px, calc(-100% - 26px)); }
.hxev.flip { transform:translate(calc(-100% + 18px), calc(-100% - 26px)) scale(.86); transform-origin:calc(100% - 18px) 100%; }
.hxev.flip.on { transform:translate(calc(-100% + 18px), calc(-100% - 26px)); }
.hxev img { width:40px; height:40px; border-radius:11px; object-fit:cover; }
.hxev b { display:block; font-size:14px; font-weight:600; color:var(--ink); } .hxev small { display:block; font-size:11.5px; color:var(--muted); margin-top:1px; }
.hxev .stem { position:absolute; left:17px; top:100%; width:2px; height:24px; background:linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.4)); }
.hxev.flip .stem { left:auto; right:17px; }
.hxev .stem::after { content:""; position:absolute; left:50%; bottom:-4px; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(72,97,55,.35); }
@media (max-width:809px) { .hxclip { border-radius:26px; } .hxev { padding:6px 10px 6px 6px; } .hxev img { width:32px; height:32px; } .hxev b { font-size:12.5px; } }
.hxmapwrap .hxf.f3 { left:22px; right:auto; top:22px; bottom:auto; z-index:4; }
@media (max-width:809px) { .hxmapwrap .hxf.f3 { display:none; } }
/* smaller event cards (Timmy): compact pills */
.hxev { gap:7px; padding:4px 11px 4px 4px; border-radius:99px; box-shadow:0 10px 22px rgba(20,24,16,.18); transform:translate(-14px, calc(-100% - 18px)) scale(.86); transform-origin:14px 100%; }
.hxev.on { transform:translate(-14px, calc(-100% - 18px)); }
.hxev.flip { transform:translate(calc(-100% + 14px), calc(-100% - 18px)) scale(.86); transform-origin:calc(100% - 14px) 100%; }
.hxev.flip.on { transform:translate(calc(-100% + 14px), calc(-100% - 18px)); }
.hxev img { width:28px; height:28px; border-radius:50%; }
.hxev b { font-size:12px; line-height:14px; } .hxev small { font-size:10px; line-height:12px; margin-top:0; }
.hxev .stem { left:13px; height:16px; } .hxev.flip .stem { right:13px; }
.hxev .stem::after { width:6px; height:6px; margin-left:-3px; bottom:-3px; box-shadow:0 0 0 2px rgba(72,97,55,.35); }
@media (max-width:809px) { .hxev { padding:3px 9px 3px 3px; } .hxev img { width:24px; height:24px; } .hxev b { font-size:11px; } .hxev small { font-size:9.5px; } }

/* ---------- story mode: one big highlighted card, a glowing pin, a celebration ---------- */
.hxev.big { gap:12px; padding:8px 18px 8px 8px; border-radius:20px; background:#fff; box-shadow:0 22px 46px rgba(20,24,16,.26), 0 0 0 2px var(--olive);
  transform:translate(-22px, calc(-100% - 30px)) scale(.7); transform-origin:22px 100%; transition:opacity .4s var(--ease), transform .6s cubic-bezier(.34,1.56,.64,1); }
.hxev.big.on { transform:translate(-22px, calc(-100% - 30px)) scale(1); }
.hxev.big.flip { transform:translate(calc(-100% + 22px), calc(-100% - 30px)) scale(.7); transform-origin:calc(100% - 22px) 100%; }
.hxev.big.flip.on { transform:translate(calc(-100% + 22px), calc(-100% - 30px)) scale(1); }
.hxev.big.below { transform:translate(-22px, 30px) scale(.7); transform-origin:22px 0; } .hxev.big.below.on { transform:translate(-22px, 30px) scale(1); }
.hxev.big.below .stem { top:auto; bottom:100%; }
.hxev.big img { width:56px; height:56px; border-radius:14px; }
.hxev.big small { font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--olive); }
.hxev.big b { font-size:17px; line-height:21px; margin-top:1px; } .hxev.big span { display:block; font-size:12.5px; color:var(--muted); }
.hxev.big .stem { left:21px; height:28px; width:2px; background:var(--olive); }
.hxev.big .stem::after { display:none; }
.hxmap .pin.live .dot { fill:#c6a57b; transform:scale(1.5); transform-box:fill-box; transform-origin:center; transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.hxmap .pin .dot { transition:transform .4s ease, fill .3s ease; }
.hxmap .pin.live .halo { animation:pinlive 1.2s ease-out infinite; fill:rgba(198,165,123,.45); }
@keyframes pinlive { 0% { transform:scale(.6); opacity:1; } 100% { transform:scale(3.2); opacity:0; } }
.hxmap .pin.live .lbl rect { fill:#141612; } .hxmap .pin.live .lbl text { fill:#fff; }
.hxfx { position:absolute; inset:0; pointer-events:none; z-index:2; overflow:visible; }
.fx { position:absolute; display:block; pointer-events:none; }
.fx.petals { width:9px; height:13px; border-radius:60% 0 60% 0; box-shadow:inset -1px -1px 0 rgba(0,0,0,.05); }
.fx.confetti { width:7px; height:11px; border-radius:2px; }
.fx.sparkle { width:10px; height:10px; clip-path:polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.fx.hearts { font-size:16px; line-height:1; text-shadow:0 2px 6px rgba(0,0,0,.12); }
.fx.light { width:10px; height:10px; border-radius:50%; filter:blur(1px); box-shadow:0 0 14px 4px rgba(255,233,168,.7); }
.fx.steam { width:22px; height:22px; border-radius:50%; filter:blur(5px); }
@media (max-width:809px) { .hxev.big img { width:42px; height:42px; } .hxev.big b { font-size:14px; line-height:18px; } .hxev.big { padding:6px 12px 6px 6px; } }

/* ---------- story v2: the celebration lives inside a small scene card; bigger cart that steams while it pours ---------- */
.hxev.big.scene { flex-direction:column; align-items:stretch; gap:0; padding:6px; width:196px; border-radius:20px; white-space:normal; }
.scph { position:relative; height:118px; border-radius:15px; overflow:hidden; isolation:isolate; perspective:400px; }
.scph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; animation:sczoom 4s ease-out both; }
.scph::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,12,8,.05), rgba(10,12,8,.28)); }
@keyframes sczoom { from { transform:scale(1.12); } to { transform:scale(1); } }
.scfx { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.scfx .fx { position:absolute; left:0; top:0; }
.sctag { position:absolute; left:8px; top:8px; padding:4px 8px; border-radius:99px; background:rgba(255,255,255,.9); font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--olive); }
.sccap { padding:8px 6px 4px; } .sccap b { font-size:15px; line-height:19px; } .sccap span { display:block; font-size:11.5px; color:var(--muted); }
.fx.petals { width:12px; height:16px; border-radius:70% 0 70% 0; box-shadow:inset -1px -2px 0 rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.12); }
.fx.confetti { width:8px; height:13px; border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.15); }
.fx.sparkle { width:16px; height:16px; filter:drop-shadow(0 0 4px rgba(255,220,120,.9)); }
.fx.hearts { font-size:20px; text-shadow:0 2px 6px rgba(0,0,0,.2); }
.fx.light { width:9px; height:9px; box-shadow:0 0 16px 6px rgba(255,236,170,.85); }
.fx.steam { width:30px; height:30px; filter:blur(7px); }
.cartg .cartbody { filter:drop-shadow(0 3px 4px rgba(20,24,16,.25)); }
.cartg .csteam path { fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; opacity:0; }
.cartg.pouring .csteam path { animation:cartsteam 1.4s ease-out infinite; } .cartg.pouring .csteam path:nth-child(2) { animation-delay:.5s; }
@keyframes cartsteam { 0% { opacity:0; transform:translateY(4px); } 40% { opacity:.95; } 100% { opacity:0; transform:translateY(-8px); } }
@media (max-width:809px) { .hxev.big.scene { width:160px; } .scph { height:92px; } .sccap b { font-size:13px; } }
.hxev.big.scene .scph img { width:100%; height:100%; border-radius:0; }
.hxev.big.scene .sccap span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- story v3: small card, separate celebration on the map, Instagram style comments ---------- */
.hxev.mini { gap:7px; padding:7px 13px 7px 10px; border-radius:99px; background:#fff; box-shadow:0 12px 26px rgba(20,24,16,.22), 0 0 0 1.5px var(--olive); white-space:nowrap;
  transform:translate(-16px, calc(-100% - 22px)) scale(.7); transform-origin:16px 100%; transition:opacity .35s var(--ease), transform .55s cubic-bezier(.34,1.56,.64,1); }
.hxev.mini.on { transform:translate(-16px, calc(-100% - 22px)) scale(1); }
.hxev.mini.flip { transform:translate(calc(-100% + 16px), calc(-100% - 22px)) scale(.7); transform-origin:calc(100% - 16px) 100%; }
.hxev.mini.flip.on { transform:translate(calc(-100% + 16px), calc(-100% - 22px)) scale(1); }
.hxev.mini.below { transform:translate(-16px, 22px) scale(.7); transform-origin:16px 0; } .hxev.mini.below.on { transform:translate(-16px, 22px) scale(1); }
.hxev.mini.below .stem { top:auto; bottom:100%; }
.hxev.mini b { font-size:13.5px; font-weight:700; } .hxev.mini span { font-size:11.5px; color:var(--muted); }
.hxev.mini .dotlive { width:7px; height:7px; border-radius:50%; background:#d6455d; box-shadow:0 0 0 3px rgba(214,69,93,.2); animation:livepulse 1.6s ease-in-out infinite; }
.hxev.mini .stem { left:15px; height:20px; width:1.5px; background:var(--olive); } .hxev.mini.flip .stem { left:auto; right:15px; }
.hxev.mini .stem::after { display:none; }
.hxclip .hxfx { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.hxclip .fx { position:absolute; left:0; top:0; }
.fxglow { position:absolute; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(255,246,214,.9), rgba(255,236,170,.35) 45%, transparent 70%); }
.igc { position:absolute; display:flex; align-items:center; gap:6px; padding:5px 10px 5px 5px; border-radius:99px; background:rgba(255,255,255,.95); box-shadow:0 6px 16px rgba(20,24,16,.16);
  font-family:var(--fu); font-size:11px; line-height:14px; color:var(--ink); white-space:nowrap; max-width:230px; }
.igc span { overflow:hidden; text-overflow:ellipsis; } .igc b { font-weight:700; }
.igc i { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:8.5px; font-weight:700; text-transform:uppercase; color:#fff;
  background:linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); box-shadow:inset 0 0 0 2px #fff; flex-shrink:0; }
@media (max-width:809px) { .igc { font-size:10px; max-width:170px; } .hxev.mini b { font-size:12px; } }

/* ---------- WHERE WE'VE POURED: the map story as its own section ---------- */
.where .wherein { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; align-items:center; }
.where .wl { display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.weye { font-family:var(--fu); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--olive); }
.where .lede { margin-top:0; color:var(--muted); }
.wtowns { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px; }
.wtowns li { padding:7px 13px; border-radius:99px; background:var(--card); font-family:var(--fu); font-size:13.5px; font-weight:600; letter-spacing:var(--lsu); }
.where .wmap { position:relative; }
.where .hxphoto { height:620px; }
.igc { max-width:none; }
@media (max-width:1199px) { .where .wherein { grid-template-columns:1fr; gap:36px; } .where .hxphoto { height:560px; } }
@media (max-width:809px) { .where .hxphoto { height:430px; } .wtowns li { font-size:12px; padding:6px 11px; } }
.where { overflow-x:clip; }
.where .hxf.f3 { display:none; }
.where .h2 { font-size:52px; line-height:58px; }
@media (max-width:1199px) { .where .h2 { font-size:42px; line-height:48px; } }
@media (max-width:809px) { .where .h2 { font-size:30px; line-height:36px; } }
/* split hero with a photo in the card */
.hxphotocard { background-size:cover; background-position:center; animation:herodrift 26s ease-in-out infinite alternate; overflow:hidden; }
.hxpc-tag { position:absolute; left:22px; bottom:22px; display:inline-flex; align-items:center; gap:8px; padding:9px 14px 9px 11px; border-radius:99px; background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-family:var(--fu); font-size:13px; font-weight:600; color:var(--ink); box-shadow:0 10px 26px rgba(20,24,16,.18); }
.hxpc-tag i { width:8px; height:8px; border-radius:50%; background:var(--olive); box-shadow:0 0 0 4px rgba(72,97,55,.2); }
/* the hills card: logo top right, booking pill top left, glass caption along the bottom */
.hxphotocard { animation:none; background-position:center 62%; }
.hxpc-shade { position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, rgba(10,14,8,.28) 0%, rgba(10,14,8,0) 24%, rgba(10,14,8,0) 55%, rgba(10,14,8,.42) 100%); pointer-events:none; }
.hxphotocard .hxpc-tag { left:22px; top:22px; bottom:auto; background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.4); box-shadow:none; }
.hxphotocard .hxpc-tag i { background:#b9e08f; box-shadow:0 0 0 4px rgba(185,224,143,.25); animation:livepulse 2s ease-in-out infinite; }
.hxpc-logo { position:absolute; right:24px; top:18px; width:96px; height:auto; filter:drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.hxpc-cap { position:absolute; left:16px; right:16px; bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 14px 14px 20px; border-radius:22px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.38); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); color:#fff;
  transition:background .3s var(--ease), transform .45s cubic-bezier(.34,1.56,.64,1); }
.hxpc-cap:hover { background:rgba(255,255,255,.26); transform:translateY(-2px); }
.hxpc-cap b { display:block; font-family:var(--fd); font-weight:600; font-size:22px; line-height:26px; letter-spacing:-.025em; }
.hxpc-cap small { display:block; font-family:var(--fu); font-size:12.5px; opacity:.88; margin-top:3px; letter-spacing:.01em; }
.hxpc-cap i { width:42px; height:42px; flex-shrink:0; border-radius:50%; background:#fff; color:var(--ink); display:grid; place-items:center; transition:transform .45s cubic-bezier(.34,1.56,.64,1); }
.hxpc-cap:hover i { transform:rotate(45deg); } .hxpc-cap i svg { width:13px; height:13px; }
@media (max-width:809px) { .hxpc-logo { width:68px; right:16px; top:14px; } .hxphotocard .hxpc-tag { left:14px; top:14px; font-size:11px; padding:7px 11px 7px 9px; }
  .hxpc-cap { left:10px; right:10px; bottom:10px; padding:10px 10px 10px 14px; border-radius:18px; } .hxpc-cap b { font-size:17px; line-height:21px; } .hxpc-cap small { font-size:11px; } .hxpc-cap i { width:36px; height:36px; } }
@media (max-width:809px) { .hx-b .hero { padding-top:138px; } }
/* more life in the hero card: this month's pour + an est. stamp */
.hxpc-pour { position:absolute; left:22px; top:42%; display:flex; align-items:center; gap:11px; padding:9px 16px 9px 9px; border-radius:20px; background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 16px 34px rgba(20,24,16,.22); color:var(--ink); font-family:var(--fu); animation:floaty 6s ease-in-out infinite;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.hxpc-pour .cup.hxsm { --s:46px; }
.hxpc-pour small { display:block; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--olive); }
.hxpc-pour b { display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; margin-top:1px; }
.hxpc-est { position:absolute; right:24px; top:44%; width:92px; height:92px; border-radius:50%; display:grid; place-items:center; text-align:center;
  border:1.5px solid rgba(255,255,255,.75); color:#fff; font-family:var(--fu); font-size:10px; line-height:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(255,255,255,.1); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transform:rotate(-10deg); animation:estspin 30s linear infinite; }
@keyframes estspin { from { transform:rotate(-10deg); } 50% { transform:rotate(8deg); } to { transform:rotate(-10deg); } }
@media (max-width:809px) { .hxpc-pour { left:12px; top:auto; bottom:92px; padding:7px 12px 7px 7px; } .hxpc-pour .cup.hxsm { --s:36px; } .hxpc-pour b { font-size:13px; }
  .hxpc-est { width:70px; height:70px; font-size:8px; line-height:11px; right:14px; top:auto; bottom:96px; } }
/* ---------- card designs C, D, E ---------- */
.hxpc-k { display:block; font-family:var(--fu); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; opacity:.9; }
/* C editorial: a big line written on the photo */
.hcd-c .hxpc-shade { background:linear-gradient(180deg, rgba(10,14,8,.25) 0%, rgba(10,14,8,0) 30%, rgba(10,14,8,.15) 55%, rgba(10,14,8,.62) 100%); }
.hxpc-ed { position:absolute; left:32px; right:32px; bottom:30px; color:#fff; }
.hxpc-ed b { display:block; font-family:var(--fd); font-weight:600; font-size:clamp(40px, 4.6vw, 64px); line-height:.98; letter-spacing:-.045em; margin:12px 0 18px; text-shadow:0 2px 24px rgba(0,0,0,.25); }
.hxpc-ed a { display:inline-flex; align-items:center; gap:8px; font-family:var(--fu); font-size:14px; font-weight:600; padding-bottom:3px; border-bottom:1.5px solid rgba(255,255,255,.7); }
.hxpc-ed a svg, .hxpc-menu a svg { width:12px; height:12px; }
/* D postcard: white border frame, greeting, stamp */
.hcd-d { box-shadow:0 30px 60px rgba(20,24,16,.18), inset 0 0 0 14px #fbf9f3; border-radius:30px; }
.hcd-d .hxpc-shade { inset:14px; border-radius:18px; background:linear-gradient(180deg, rgba(10,14,8,0) 45%, rgba(10,14,8,.5) 100%); }
.hxpc-post { position:absolute; left:40px; bottom:40px; color:#fff; }
.hxpc-pk { font-family:Georgia, 'Times New Roman', serif; font-style:italic; font-size:22px; opacity:.95; }
.hxpc-post b { display:block; font-family:var(--fd); font-weight:700; font-size:clamp(34px, 3.8vw, 54px); line-height:1; letter-spacing:-.04em; text-transform:uppercase; margin:4px 0 10px; }
.hxpc-pl { font-family:var(--fu); font-size:12.5px; font-weight:600; letter-spacing:.06em; opacity:.9; }
.hxpc-stamp { position:absolute; right:34px; top:34px; width:104px; height:124px; background:#fbf9f3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; transform:rotate(5deg);
  -webkit-mask:radial-gradient(circle 5px at 5px 5px, transparent 98%, #000) -5px -5px / 13px 13px; mask:radial-gradient(circle 5px at 5px 5px, transparent 98%, #000) -5px -5px / 13px 13px; box-shadow:0 10px 20px rgba(0,0,0,.2); }
.hxpc-stamp img { width:70px; } .hxpc-stamp i { font-style:normal; font-family:var(--fu); font-size:9px; line-height:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--olive); text-align:center; }
/* E menu peek: frosted panel with this month's drinks */
.hxpc-menu { position:absolute; right:18px; top:86px; bottom:18px; width:228px; padding:18px; border-radius:24px; background:rgba(255,255,255,.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 40px rgba(20,24,16,.2); display:flex; flex-direction:column; gap:12px; color:var(--ink); }
.hxpc-menu .hxpc-k { color:var(--olive); }
.hxpc-mi { display:flex; align-items:center; gap:10px; font-family:var(--fu); font-size:14px; font-weight:600; line-height:18px; }
.hxpc-mi .cup.hxsm { --s:46px; }
.hxpc-menu a { margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px; height:42px; border-radius:12px; background:var(--olive); color:#fff; font-family:var(--fu); font-size:14px; font-weight:600; }
.hcd-e .hxpc-logo { right:auto; left:22px; top:auto; bottom:22px; }
.hcd-e .hxpc-tag { left:22px; }
@media (max-width:809px) { .hxpc-ed { left:18px; right:18px; bottom:18px; } .hxpc-post { left:28px; bottom:28px; } .hxpc-pk { font-size:16px; } .hxpc-stamp { width:76px; height:92px; right:24px; top:24px; } .hxpc-stamp img { width:50px; }
  .hxpc-menu { width:auto; left:12px; right:12px; top:auto; bottom:12px; padding:12px; gap:8px; } .hxpc-mi { font-size:12.5px; } .hxpc-mi .cup.hxsm { --s:32px; } .hcd-e .hxpc-logo { display:none; } }
/* D stamp: a clean postage stamp with a dashed inner edge; E panel sized to its drinks */
.hxpc-stamp { -webkit-mask:none; mask:none; border-radius:4px; outline:1.5px dashed var(--olive); outline-offset:-8px; }
.hxpc-menu { bottom:auto; }
.hxpc-menu a { margin-top:6px; }
/* zoomed-out map: gentler tilt so no town is cropped */
.hxmapwrap.relief .hxmap { transform:rotateX(18deg) scale(1.06); transform-origin:50% 55%; }