/* Coffee Original: shared tokens, chrome, signature rope and ribbon */
:root{
  --canvas:#1B0C0D;
  --panel:#27110F;
  --panel-2:#311613;
  --brand:#7A0305;
  --brand-deep:#5A0306;
  --accent:#F3E7D6;
  --accent-hover:#FFF4E4;
  --accent-muted:rgba(243,231,214,.16);
  --text-primary:#F3E7D6;
  --text-secondary:#CBB49B;
  --line:rgba(243,231,214,.14);
  --line-strong:rgba(243,231,214,.42);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --f-display:"Bitter",Georgia,serif;
  --f-script:"Pacifico",cursive;
  --f-body:"Golos Text",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --gutter:clamp(16px,5vw,72px);
  --maxw:1240px;
  --tshadow:0 1px 2px rgba(10,3,4,.95),0 3px 12px rgba(10,3,4,.78),0 10px 44px rgba(10,3,4,.8);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:hidden;overflow-x:clip;margin:0;background:var(--canvas);color:var(--text-primary);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;animation:pageIn .9s var(--ease-out) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:1.05;margin:0;letter-spacing:-.01em}
p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--accent);color:var(--brand);padding:10px 16px;border-radius:8px;font-weight:600;transition:top .3s var(--ease-out)}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
main{display:block}
section[id],footer[id]{scroll-margin-top:72px}
main:focus{outline:none}
.wrap{width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto}
.mono{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.script{font-family:var(--f-script);font-weight:400;letter-spacing:0}

/* one environment: fixed background layer */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--canvas)}
.env::before{content:"";position:absolute;width:140vmax;height:140vmax;left:-20vmax;top:-30vmax;background:radial-gradient(circle at 30% 30%,rgba(122,3,5,.32),transparent 45%),radial-gradient(circle at 75% 70%,rgba(203,180,155,.08),transparent 40%);animation:envDrift 90s var(--ease-io) -20s infinite alternate}
.env::after{content:"";position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes envDrift{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(8vmax,10vmax,0) rotate(18deg)}}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background-color .5s var(--ease-out),box-shadow .5s var(--ease-out),transform .5s var(--ease-out)}
.nav.solid{background:rgba(27,12,13,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:72px;width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto}
.nav-in .brand{justify-self:start}
.nav-in .tabs{justify-self:center}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:44px;height:44px;border-radius:50%;transition:transform .8s var(--ease-out)}
.brand:hover img{transform:rotate(-14deg)}
.brand b{font-family:var(--f-display);font-weight:900;font-size:1.02rem;letter-spacing:.04em;line-height:1;text-transform:uppercase}
.brand b span{display:block;font-size:.72em;letter-spacing:.2em;color:var(--text-secondary);font-weight:700;margin-top:3px}
.links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.links a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;text-decoration:none;font-size:.95rem;color:var(--text-secondary);border-radius:8px;transition:color .3s var(--ease-out),background-color .3s var(--ease-out)}
.links a:hover,.links a[aria-current="page"]{color:var(--text-primary);background:var(--accent-muted)}
.links .btn{margin-left:8px;color:var(--brand)}
.links .btn:hover{color:var(--brand);background:var(--accent-hover)}

/* 3D icon tabs (main nav), always one centered row */
.tabs{position:relative;gap:2px;flex-wrap:nowrap}
.tl-short{display:none}
.tab{position:relative;display:flex;align-items:center;gap:9px;min-height:56px !important;padding:0 12px !important;font-family:var(--f-display);font-weight:700;font-size:.76rem !important;letter-spacing:.09em;text-transform:uppercase;color:var(--text-secondary);-webkit-tap-highlight-color:transparent;background:transparent !important}
.tab:hover{color:var(--text-primary)}
.tab.active{color:var(--text-primary)}
.ti{position:relative;display:block;width:36px;height:36px;flex:none;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.tab:not(.active):hover .ti{transform:scale(1.12)}
.tab:not(.active):active .ti{transform:scale(.8);transition-duration:.15s}
.ti svg{width:100%;height:100%;overflow:visible;transform-origin:50% 80%;animation:tiPop .75s cubic-bezier(.34,1.56,.64,1) calc(var(--n,0)*100ms + 150ms) both}
.tabs.ready .ti svg{animation:none}
.tabs.ready .tab.play .ti svg{animation:tiPlay .75s cubic-bezier(.34,1.4,.64,1)}
@keyframes tiPop{0%{transform:scale(0)}60%{transform:scale(1.14)}80%{transform:scale(.95)}100%{transform:scale(1)}}
@keyframes tiPlay{0%{transform:scale(1)}25%{transform:scale(.82) rotate(-8deg)}55%{transform:scale(1.16) rotate(6deg) translateY(-3px)}80%{transform:scale(.97) rotate(-2deg)}100%{transform:scale(1)}}
.ti .steam{animation:tiSteam 3.6s var(--ease-io) -1.1s infinite}
@keyframes tiSteam{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(-2px);opacity:.35}}
.bubble{position:absolute;left:0;bottom:4px;width:100px;height:3px;border-radius:3px;background:var(--accent);transform-origin:0 50%;transform:translateX(var(--bx,0)) scaleX(var(--bw,0));opacity:var(--bo,0);pointer-events:none;transition:transform .5s cubic-bezier(.34,1.3,.64,1),opacity .3s var(--ease-out)}
.tabs.no-anim .bubble{transition:none}
body.kids .bubble{background:var(--brand)}
/* the NEW badge: glossy, with its mirrored reflection */
.new{position:absolute;top:-7px;right:-24px;z-index:3;overflow:hidden;padding:2px 7px 3px;border-radius:999px 999px 999px 3px;background:var(--brand);color:var(--accent);font:800 .56rem/1.25 var(--f-body);letter-spacing:.06em;box-shadow:inset 0 0 0 1px rgba(255,214,200,.2),inset 0 0 10px rgba(255,214,200,.3),inset 0 3px 7px rgba(255,214,200,.4),inset 0 -4px 3px rgba(255,214,200,.3),0 1px 3px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.65)}
.new .refl{position:absolute;left:50%;top:0;padding-top:2px;opacity:.4;transform:translateX(-50%) scaleY(-1) translateY(-10px);-webkit-mask-image:linear-gradient(to top,#fff 10%,transparent 50%);mask-image:linear-gradient(to top,#fff 20%,transparent 50%)}
.gdefs{position:absolute;width:0;height:0;overflow:hidden}
/* tighter tiers: drop the wordmark, then stack label under icon */
@media (max-width:1180px){
  .brand b{display:none}
  .tab{gap:7px;padding:0 9px !important;font-size:.7rem !important;letter-spacing:.07em}
  .ti{width:32px;height:32px}
}
@media (max-width:820px){
  .nav-in{gap:8px}
  .tabs{gap:0}
  .tab{flex-direction:column;justify-content:center;gap:3px;min-height:64px !important;padding:0 7px !important;font-size:.58rem !important;letter-spacing:.05em}
  .ti{width:28px;height:28px}
  .tl-long{display:none}
  .tl-short{display:inline}
  .new{top:-6px;right:-18px;padding:1px 5px 2px;font-size:.5rem}
  .bubble{bottom:1px}
  .brand img{width:38px;height:38px}
}
@media (max-width:400px){
  .tab{padding:0 5px !important;font-size:.52rem !important;letter-spacing:.03em}
  .ti{width:26px;height:26px}
  .brand img{width:34px;height:34px}
}

/* signature 1: the ribbon (like ALL NATURAL on the badge) */
.ribbon{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.5em 1.9em .46em;background:var(--accent);color:var(--brand);font-family:var(--f-display);font-weight:700;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;line-height:1.2;clip-path:polygon(0 0,100% 0,calc(100% - .9em) 50%,100% 100%,0 100%,.9em 50%)}
.ribbon.on-red{background:var(--accent);color:var(--brand)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:50px;padding:0 1.9em;border:0;background:var(--accent);color:var(--brand);font-family:var(--f-display);font-weight:800;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%,14px 50%);transition:background-color .35s var(--ease-out),transform .35s var(--ease-out)}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.small{min-height:40px;padding:0 1.5em;font-size:.82rem;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%,10px 50%)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:50px;padding:0 1.5em;border:1.5px solid var(--line-strong);border-radius:999px;color:var(--text-primary);font-weight:500;text-decoration:none;transition:border-color .35s var(--ease-out),background-color .35s var(--ease-out)}
.btn-ghost:hover{border-color:var(--accent);background:var(--accent-muted)}
@media (pointer:coarse){.btn,.btn-ghost{min-height:48px}}
@media (max-width:420px){.btn{font-size:.84rem;padding:0 1.5em;letter-spacing:.03em}}

/* signature 2: the rope from the badge, drawn by scroll */
.rope{position:relative;height:14px;overflow:hidden;width:100%}
.rope i{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cg fill='%23F3E7D6'%3E%3Cellipse cx='5' cy='7' rx='2.3' ry='6.6' transform='rotate(38 5 7)'/%3E%3Cellipse cx='-5' cy='7' rx='2.3' ry='6.6' transform='rotate(38 -5 7)'/%3E%3Cellipse cx='15' cy='7' rx='2.3' ry='6.6' transform='rotate(38 15 7)'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0/10px 14px;opacity:.85;transform:translate3d(calc((var(--draw,1) - 1)*100%),0,0)}
.rope.dim i{opacity:.35}
.rope.red i{filter:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cg fill='%237A0305'%3E%3Cellipse cx='5' cy='7' rx='2.3' ry='6.6' transform='rotate(38 5 7)'/%3E%3Cellipse cx='-5' cy='7' rx='2.3' ry='6.6' transform='rotate(38 -5 7)'/%3E%3Cellipse cx='15' cy='7' rx='2.3' ry='6.6' transform='rotate(38 15 7)'/%3E%3C/g%3E%3C/svg%3E")}

/* entrances: IntersectionObserver adds .in, children stagger by --i */
.reveal .r{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--i,0)*90ms)}
.reveal.in .r{opacity:1;transform:none}
.reveal.done .r{transition-delay:0s}

/* footer: beam wordmark (dark wine, caramel light, the giant ORIGINAL cut by the bottom edge) */
.bwf{--bwf-bg:#170607;--bwf-bg-rgb:23,6,7;--bwf-ink:#F3E7D6;--bwf-ink-rgb:243,231,214;--bwf-muted:#CBB49B;--bwf-acc:227,163,91;--bwf-lit:255,226,180;--bwf-wt:#9A0B12;--bwf-wf:#2A0507;--bwf-ang:118deg;--bwf-b:58%;--bwf-px:50%;--bwf-py:50%;--bwf-g:0;--bwf-top:0px;--bwf-bot:100%;position:relative;isolation:isolate;overflow:hidden;container-type:inline-size;background:var(--bwf-bg);color:var(--bwf-ink);touch-action:pan-y}
.bwf a{color:inherit;text-decoration:none}
.bwf ul{list-style:none;margin:0;padding:0}
.bwf>.rope{position:absolute;left:0;right:0;top:0;z-index:4}
.bwf-rule{position:absolute;left:0;right:0;top:14px;height:1px;z-index:3;background:linear-gradient(90deg,rgba(var(--bwf-acc),.12),rgba(var(--bwf-acc),.55) var(--bwf-b),rgba(var(--bwf-acc),.12))}
.bwf-sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.bwf-wash{position:absolute;inset:0;background:radial-gradient(120% 90% at 8% 0%,rgba(122,3,5,.45),transparent 55%),radial-gradient(90% 70% at 92% 8%,rgba(var(--bwf-acc),.12),transparent 60%),linear-gradient(180deg,rgba(var(--bwf-acc),.05),transparent 70%)}
.bwf-bands{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(var(--bwf-acc),.045) 0 1.6cqw,transparent 1.6cqw 4.2cqw);-webkit-mask-image:linear-gradient(100deg,#000 0%,transparent 55%);mask-image:linear-gradient(100deg,#000 0%,transparent 55%);opacity:.9}
.bwf-beam{position:absolute;inset:0;filter:blur(calc(1px + 1.6cqw));background:linear-gradient(var(--bwf-ang),transparent calc(var(--bwf-b) - 11%),rgba(var(--bwf-acc),.10) calc(var(--bwf-b) - 5%),rgba(var(--bwf-acc),.30) var(--bwf-b),rgba(var(--bwf-acc),.08) calc(var(--bwf-b) + 4%),transparent calc(var(--bwf-b) + 9%)),linear-gradient(var(--bwf-ang),transparent calc(var(--bwf-b) - 34%),rgba(var(--bwf-acc),.09) calc(var(--bwf-b) - 27%),transparent calc(var(--bwf-b) - 20%))}
.bwf-glow{position:absolute;inset:0;opacity:var(--bwf-g);background:radial-gradient(circle 26cqw at var(--bwf-px) var(--bwf-py),rgba(var(--bwf-acc),.16),transparent 70%)}
.bwf-grain{position:absolute;inset:0;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.bwf-inner{position:relative;z-index:2;box-sizing:border-box;max-width:1240px;margin:0 auto;padding:clamp(56px,8.5cqw,104px) var(--gutter) 0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr) minmax(0,.9fr);column-gap:clamp(24px,4cqw,56px);row-gap:44px}
.bwf-label{display:block;position:relative;padding-bottom:13px;font-family:var(--f-mono);font-size:.72rem;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--bwf-acc))}
.bwf-label::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(var(--bwf-acc),.55),rgba(var(--bwf-acc),.2));transform-origin:0 50%;transform:scaleX(var(--bwf-line,1));transition:transform 1.1s cubic-bezier(.2,.7,.1,1) var(--bwf-d,0ms)}
.bwf[data-in="false"] .bwf-label::after{--bwf-line:0}
.bwf-col{min-width:0}
.bwf-col:first-child{max-width:440px}
.bwf-fade{transition:opacity .9s ease var(--bwf-d,0ms),translate .9s cubic-bezier(.2,.7,.1,1) var(--bwf-d,0ms)}
.bwf[data-in="false"] .bwf-fade{opacity:0;translate:0 14px}
.bwf-brand{display:flex;align-items:center;gap:14px;margin-top:18px}
.bwf-brand img{width:56px;height:56px;border-radius:50%;box-shadow:0 0 0 2px rgba(var(--bwf-ink-rgb),.25)}
.bwf-brand .script{font-size:1.6rem;line-height:1}
.bwf-socials{display:flex;gap:14px;margin-top:20px}
.bwf-soc{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:8px;color:rgba(var(--bwf-ink-rgb),.7);background:linear-gradient(180deg,rgba(var(--bwf-ink-rgb),.09),rgba(var(--bwf-ink-rgb),.025));box-shadow:inset 0 0 0 1px rgba(var(--bwf-ink-rgb),.16),inset 0 1px 0 rgba(var(--bwf-ink-rgb),.14),0 6px 14px -8px rgba(0,0,0,.8);transition:color .25s,box-shadow .35s,translate .35s cubic-bezier(.2,.8,.2,1),background .35s}
.bwf-soc svg{width:19px;height:19px}
.bwf-soc:hover,.bwf-soc:focus-visible{color:var(--bwf-ink);translate:0 -2px;background:linear-gradient(180deg,rgba(var(--bwf-acc),.32),rgba(var(--bwf-acc),.08));box-shadow:inset 0 0 0 1px rgba(var(--bwf-acc),.75),inset 0 1px 0 rgba(var(--bwf-ink-rgb),.3),0 10px 26px -8px rgba(var(--bwf-acc),.75);outline:none}
.bwf-tip{position:absolute;z-index:5;left:50%;top:calc(100% + 9px);translate:-50% -4px;white-space:nowrap;font-size:.72rem;line-height:1;padding:6px 8px;border-radius:4px;background:rgba(var(--bwf-acc),.96);color:#2A0F05;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,translate .25s}
.bwf-tip::after{content:"";position:absolute;left:50%;bottom:100%;margin-left:-4px;border:4px solid transparent;border-bottom-color:rgba(var(--bwf-acc),.96)}
.bwf-soc:hover .bwf-tip,.bwf-soc:focus-visible .bwf-tip{opacity:1;translate:-50% 0}
.bwf-credits{margin-top:24px;font-size:.92rem;line-height:1.55;color:var(--bwf-muted)}
.bwf-credits p+p{margin-top:4px}
.bwf-credits b{font-weight:500;color:var(--bwf-ink)}
.bwf-credits a{color:var(--bwf-ink);background:linear-gradient(rgb(var(--bwf-acc)),rgb(var(--bwf-acc))) 0 100%/0 1px no-repeat;transition:background-size .35s cubic-bezier(.2,.8,.2,1),color .25s}
.bwf-credits a:hover,.bwf-credits a:focus-visible{background-size:100% 1px;color:#fff;outline:none}
.bwf-links{margin-top:13px;display:flex;flex-direction:column}
.bwf-link{position:relative;display:inline-flex;align-items:center;gap:8px;padding:7px 0;font-size:.98rem;line-height:1.4;color:rgba(var(--bwf-ink-rgb),.8);transition:color .25s}
.bwf-link-t{display:inline-block;transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.bwf-link::before{content:"";position:absolute;left:0;top:50%;width:6px;height:1px;background:rgb(var(--bwf-acc));transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.bwf-link svg{width:12px;height:12px;flex:none;opacity:0;translate:-6px 0;color:rgb(var(--bwf-acc));transition:opacity .25s,translate .35s cubic-bezier(.2,.8,.2,1)}
.bwf-link:hover,.bwf-link:focus-visible{color:#fff;outline:none}
.bwf-link:hover::before,.bwf-link:focus-visible::before{transform:scaleX(1)}
.bwf-link:hover .bwf-link-t,.bwf-link:focus-visible .bwf-link-t{translate:12px 0}
.bwf-link:hover svg,.bwf-link:focus-visible svg{opacity:1;translate:10px 0}
.bwf-link:focus-visible .bwf-link-t{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(var(--bwf-acc),.8)}
.bwf-word{position:relative;z-index:1;overflow:hidden;margin-top:clamp(36px,7cqw,96px);height:calc(.94 * 22cqw)}
.bwf-word-box{padding:0 var(--gutter);max-width:1240px;margin:0 auto;box-sizing:border-box}
.bwf-word-in{display:inline-flex;white-space:nowrap;font-family:var(--f-display);font-weight:900;line-height:1;letter-spacing:-.02em;text-transform:uppercase;user-select:none;-webkit-user-select:none}
.bwf-lw{display:inline-block;translate:0 0;transition:translate 1.25s cubic-bezier(.16,.84,.2,1) var(--bwf-d,0ms)}
.bwf[data-in="false"] .bwf-lw{translate:0 85%}
.bwf-l{display:inline-block;cursor:pointer;color:transparent;-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;background-size:var(--bwf-rw) var(--bwf-rh);background-position:calc(var(--bwf-x) * -1) calc(var(--bwf-y) * -1);background-image:radial-gradient(circle 22cqw at var(--bwf-px) var(--bwf-py),rgba(var(--bwf-lit),calc(var(--bwf-g) * .8)),transparent 70%),linear-gradient(var(--bwf-ang),transparent calc(var(--bwf-b) - 9%),rgba(var(--bwf-lit),.5) calc(var(--bwf-b) - 1.5%),rgba(var(--bwf-lit),.68) var(--bwf-b),rgba(var(--bwf-lit),.18) calc(var(--bwf-b) + 3.5%),transparent calc(var(--bwf-b) + 8%)),linear-gradient(180deg,var(--bwf-wt) var(--bwf-top),var(--bwf-wf) var(--bwf-bot));transition:transform .5s cubic-bezier(.2,.9,.25,1.2),filter .4s;transform-origin:50% 100%}
.bwf-l:hover{transform:translateY(-.045em);filter:brightness(1.3) saturate(1.1)}
.bwf-l.is-hop{animation:bwfHop .75s cubic-bezier(.2,.8,.2,1)}
@keyframes bwfHop{0%{transform:translateY(0) scale(1,1)}18%{transform:translateY(.02em) scale(1.06,.9)}45%{transform:translateY(-.14em) scale(.97,1.05)}70%{transform:translateY(.01em) scale(1.02,.97)}100%{transform:translateY(-.045em) scale(1,1)}}
.bwf-foot{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(var(--bwf-bg-rgb),.55) 55%,var(--bwf-bg))}
@container (max-width:760px){.bwf-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:40px}.bwf-col:first-child{grid-column:1 / -1;max-width:none}}
@container (max-width:420px){.bwf-inner{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.bwf .bwf-lw,.bwf .bwf-fade,.bwf .bwf-label::after,.bwf .bwf-l,.bwf .bwf-soc,.bwf .bwf-link-t,.bwf .bwf-link svg{transition:none!important;animation:none!important}.bwf[data-in="false"] .bwf-lw,.bwf[data-in="false"] .bwf-fade{translate:none;opacity:1}.bwf[data-in="false"] .bwf-label::after{--bwf-line:1}}

/* pause everything on hidden tabs; living loops only run in view */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  .reveal .r{opacity:1;transform:none}
  .rope i{transform:none}
}

/* footer bottom bar: copyright, heartbeat badge, back to top */
.bwf-bar{position:relative;z-index:3;box-sizing:border-box;max-width:1240px;margin:56px auto 0;padding:0 var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.bwf-copy{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bwf-muted)}
.bwf-love{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;border:1px solid rgba(243,231,214,.2);font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bwf-muted)}
.bwf-love i{font-style:normal;font-size:.95rem;color:#E5373B;display:inline-block}
.bwf.alive-love .bwf-love i,.bwf[data-in="true"] .bwf-love i{animation:bwfBeat 2s cubic-bezier(.25,1,.5,1) infinite}
@keyframes bwfBeat{0%,100%{transform:scale(1);filter:drop-shadow(0 0 5px rgba(229,55,59,.5))}15%,45%{transform:scale(1.2);filter:drop-shadow(0 0 10px rgba(229,55,59,.8))}30%{transform:scale(1)}}
.bwf-top{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(243,231,214,.2);color:var(--bwf-muted);cursor:pointer}
.bwf-top svg{width:20px;height:20px;transition:transform .3s var(--ease-out)}
.bwf-top:hover{color:var(--bwf-ink)}
.bwf-top:hover svg{transform:translateY(-5px)}
@media (max-width:720px){.bwf-bar{justify-content:center;text-align:center}.bwf-copy{order:2;width:100%}}

/* ---------- cinematic layer for every section: glass pills, magnetic pull, giant words, aurora ---------- */
.btn-ghost,.wa-call,.rev-btn,.fchip:not(.active),.bwf-top,.bwf-love{background:linear-gradient(145deg,rgba(243,231,214,.08) 0%,rgba(243,231,214,.02) 100%);border-color:rgba(243,231,214,.2);box-shadow:0 10px 30px -10px rgba(0,0,0,.55),inset 0 1px 1px rgba(243,231,214,.12),inset 0 -1px 2px rgba(0,0,0,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.btn-ghost:hover,.wa-call:hover,.rev-btn:hover:not(:disabled),.fchip:not(.active):hover,.bwf-top:hover{background:linear-gradient(145deg,rgba(243,231,214,.15) 0%,rgba(243,231,214,.04) 100%);border-color:rgba(243,231,214,.42);box-shadow:0 20px 40px -10px rgba(0,0,0,.65),inset 0 1px 1px rgba(243,231,214,.22)}
/* magnetic: the element leans toward the pointer and springs back */
.mag[data-mag]{transition:translate .4s cubic-bezier(.2,.8,.2,1),scale .4s cubic-bezier(.2,.8,.2,1),transform .35s var(--ease-out),background-color .35s var(--ease-out),background .35s var(--ease-out),border-color .35s var(--ease-out),color .25s,box-shadow .35s var(--ease-out),opacity .9s var(--ease-out)}
.mag[data-mag].mag-out{transition:translate 1.1s cubic-bezier(.3,1.8,.45,1),scale 1.1s cubic-bezier(.3,1.8,.45,1),transform .35s var(--ease-out),background-color .35s var(--ease-out),background .35s var(--ease-out),border-color .35s var(--ease-out),color .25s,box-shadow .35s var(--ease-out),opacity .9s var(--ease-out)}

.gfx{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.gfx-aurora{position:absolute;left:50%;top:50%;width:80vw;height:60%;border-radius:50%;filter:blur(80px);background:radial-gradient(circle at 50% 50%,rgba(122,3,5,.42) 0%,rgba(227,163,91,.12) 40%,transparent 70%);transform:translate(-50%,-50%) scale(1);opacity:.6}
.gfx.alive .gfx-aurora{animation:gfxBreathe 8s ease-in-out infinite alternate}
@keyframes gfxBreathe{0%{transform:translate(-50%,-50%) scale(1);opacity:.6}100%{transform:translate(-50%,-50%) scale(1.1);opacity:1}}
.gfx-grid{position:absolute;inset:0;background-size:60px 60px;background-image:linear-gradient(to right,rgba(243,231,214,.035) 1px,transparent 1px),linear-gradient(to bottom,rgba(243,231,214,.035) 1px,transparent 1px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent)}
.gfx-word{position:absolute;left:50%;bottom:-.1em;font-family:var(--f-display);font-weight:900;font-size:var(--gfs,22vw);line-height:.8;letter-spacing:-.04em;white-space:nowrap;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(243,231,214,.08);background:linear-gradient(180deg,rgba(243,231,214,.1) 0%,transparent 60%);-webkit-background-clip:text;background-clip:text;transform-origin:50% 100%;transform:translate3d(-50%,calc((1 - var(--gp,1)) * 10vh),0) scale(calc(.8 + .2 * var(--gp,1)));opacity:var(--gp,1);will-change:transform}
.hub .gfx-aurora,body.kids .gfx-aurora{background:radial-gradient(circle at 50% 50%,rgba(255,250,240,.75) 0%,rgba(227,163,91,.16) 40%,transparent 70%)}
.hub .gfx-grid,body.kids .gfx-grid{background-image:linear-gradient(to right,rgba(59,22,18,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(59,22,18,.05) 1px,transparent 1px)}
.hub .gfx-word,body.kids .gfx-word{-webkit-text-stroke:1px rgba(59,22,18,.1);background:linear-gradient(180deg,rgba(59,22,18,.08) 0%,transparent 60%);-webkit-background-clip:text;background-clip:text}
.visit .gfx-word{-webkit-text-stroke:1px rgba(243,231,214,.12);background:linear-gradient(180deg,rgba(243,231,214,.12) 0%,transparent 60%);-webkit-background-clip:text;background-clip:text}
.visit .gfx-aurora{background:radial-gradient(circle at 50% 50%,rgba(227,163,91,.25) 0%,transparent 65%)}
.mhero{isolation:isolate}
@media (max-width:720px){.gfx-word{font-size:calc(var(--gfs,22vw) * 1.25)}.gfx-aurora{filter:blur(50px)}}
@media (prefers-reduced-motion:reduce){.gfx-word{transform:translate3d(-50%,0,0);opacity:1}}

/* coffee crumb trail */
.mcrumbs{position:fixed;inset:0;width:100%;height:100%;z-index:9998;pointer-events:none}
@media (hover:none),(pointer:coarse){.mcrumbs{display:none}}
@media (prefers-reduced-motion:reduce){.mcrumbs{display:none}}
/* end crumb trail */

/* scrollbar */
html::-webkit-scrollbar{width:12px;height:12px}
html::-webkit-scrollbar-track{background:#170607;box-shadow:inset 1px 0 0 rgba(243,231,214,.06)}
html::-webkit-scrollbar-thumb{border-radius:999px;border:3px solid #170607;background:linear-gradient(180deg,#B3141B 0%,#7A0305 45%,#C77A3A 100%);box-shadow:inset 0 0 0 1px rgba(243,231,214,.25)}
html::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#D21E26 0%,#9A0B12 45%,#E3A35B 100%)}
html::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#E5373B 0%,#B3141B 45%,#F2B872 100%)}
html::-webkit-scrollbar-button{display:none;width:0;height:0}
html::-webkit-scrollbar-corner{background:#170607}
html:has(body.kids)::-webkit-scrollbar-track{background:#DCEBF3;box-shadow:inset 1px 0 0 rgba(59,22,18,.08)}
html:has(body.kids)::-webkit-scrollbar-thumb{border-color:#DCEBF3;background:linear-gradient(180deg,#E46A1F 0%,#B3141B 100%);box-shadow:none}
html:has(body.kids)::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#F07B2E 0%,#D21E26 100%)}
@supports (-moz-appearance:none){
  html{scrollbar-width:thin;scrollbar-color:#9A0B12 #170607}
  html:has(body.kids){scrollbar-color:#E46A1F #DCEBF3}
}
::selection{background:rgba(179,20,27,.85);color:#FFF4E4}
/* end scrollbar */

/* language switch */
.nav-in .lang{justify-self:end;display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:linear-gradient(145deg,rgba(243,231,214,.08),rgba(243,231,214,.02));border:1px solid rgba(243,231,214,.2);box-shadow:inset 0 1px 1px rgba(243,231,214,.1)}
.lang a{display:grid;place-items:center;min-width:38px;height:30px;padding:0 9px;border-radius:999px;font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.1em;text-decoration:none;color:var(--text-secondary);transition:color .25s,background-color .3s var(--ease-out)}
.lang a:hover:not(.on){color:var(--text-primary);background:rgba(243,231,214,.08)}
.lang a.on{background:var(--accent);color:var(--brand);cursor:default}
body.kids .nav-in .lang{background:rgba(255,255,255,.6);border-color:rgba(59,22,18,.2)}
body.kids .lang a.on{background:var(--brand);color:var(--accent)}
@media (max-width:820px){.lang a.on{display:none}.nav-in .lang{padding:2px}.lang a{min-width:34px;height:30px;padding:0 6px}}
/* end language switch */