:root{
  --yellow:#FFCC00; --grey:#4D4D4D; --cream:#F5EDE3; --white:#FFFFFF; --mist:#EEEEEE; --red:#F5333F;
  --ink:var(--grey);
  --font:"Manrope",system-ui,sans-serif; /* launch: "proxima-nova" via Bruno Typekit */
  --max:1320px; --pad:48px; --space:clamp(56px,10vw,140px); --radius:8px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
@media (max-width:1024px){:root{--pad:32px}}
@media (max-width:640px){:root{--pad:16px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 clamp(17px,1.2vw,20px)/1.55 var(--font);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--grey);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:100;background:var(--yellow);padding:8px 14px}

.container{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--space)}
.section--yellow{background:var(--yellow)}
.section--grey{background:var(--grey);color:var(--white)}
.section--white{background:var(--white)}

.eyebrow{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin:0 0 20px}
.display{font-weight:800;font-size:clamp(52px,9vw,150px);line-height:.92;letter-spacing:-.035em;margin:0}
.h2{font-weight:800;font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-.03em;margin:0 0 24px}
.h3{font-weight:700;font-size:clamp(22px,2vw,28px);line-height:1.15;margin:0 0 8px}
.lead{font-weight:300;font-size:clamp(20px,2vw,30px);line-height:1.35;max-width:32ch;margin:0}

.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font:700 15px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:2px solid var(--grey);color:var(--grey);background:transparent;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.btn:hover{background:var(--grey);color:var(--white)}
.btn--yellow{background:var(--yellow);border-color:var(--yellow)}
.btn--yellow:hover{background:var(--grey);border-color:var(--grey);color:var(--yellow)}
.btn--ghost-light{border-color:var(--white);color:var(--white)}
.btn--ghost-light:hover{background:var(--white);color:var(--grey)}

/* Header */
/* Floating pill header: overlays the first section, which reserves space for it */
.site-header{position:sticky;top:0;z-index:50;padding-top:16px;margin-bottom:-88px;pointer-events:none}
.site-header__row{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;width:calc(100% - 2 * var(--pad));max-width:1180px;margin-inline:auto;padding:0 28px 0 12px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:24px;box-shadow:0 12px 32px rgba(60,45,0,.12),0 1px 0 rgba(0,0,0,.03)}
.site-header__logo img{width:52px;height:52px;display:block}
.nav{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav a,.nav button{font:700 13px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:8px 0}
.nav a:hover,.nav button:hover{box-shadow:inset 0 -2px 0 var(--yellow)}
.lang{display:flex;gap:4px}
.lang button{font:700 12px/1 var(--font);letter-spacing:.12em;border:0;background:none;padding:8px;cursor:pointer;color:var(--ink);opacity:.5}
.lang button[aria-pressed="true"]{opacity:1;box-shadow:inset 0 -2px 0 var(--yellow)}
.menu-toggle{display:none;background:none;border:0;font:700 13px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:12px 0;color:var(--ink)}
@media (max-width:1024px){
  .menu-toggle{display:block}
  .site-header nav{position:absolute;top:calc(100% + 10px);left:0;right:0;max-height:calc(100dvh - 120px);background:var(--white);border-radius:24px;box-shadow:0 18px 40px rgba(60,45,0,.16);padding:24px 28px;overflow:auto;display:none}
  .site-header[data-menu-open] nav{display:block}
  .nav{flex-direction:column;gap:8px}
  .nav a,.nav button{font-size:22px;letter-spacing:.02em;text-transform:none;padding:10px 0}
}

/* Footer */
.site-footer{background:var(--grey);color:var(--white);padding-block:80px 40px}
.site-footer__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:48px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-footer a{text-decoration:none;opacity:.85}.site-footer a:hover{opacity:1;color:var(--yellow)}
.site-footer__base{margin-top:64px;padding-top:24px;border-top:1px solid rgba(255,255,255,.15);font-size:14px;opacity:.7}
@media (max-width:768px){.site-footer__grid{grid-template-columns:1fr}}

/* Home */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;color:var(--white);overflow:hidden;background:var(--grey)}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.1) 60%),linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.6))}
.hero__content{position:relative;z-index:1;padding-block:0 clamp(48px,8vw,96px);width:100%}
.hero .display{max-width:11ch;margin-bottom:24px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}


/* Shared page bits */
.page-head{padding-top:max(var(--space),136px);padding-bottom:clamp(40px,6vw,80px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:14px 16px;font:400 17px var(--font);color:var(--ink);background:var(--white);border:1.5px solid var(--mist);border-radius:var(--radius)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--grey);outline:none}

/* Franchise */
.concept__num{display:block;font-weight:800;font-size:clamp(80px,11vw,160px);line-height:.8;letter-spacing:-.05em;color:var(--yellow);-webkit-text-stroke:2px var(--grey);margin-bottom:-.28em;position:relative;z-index:1}
.check{list-style:none;padding:0;margin:0}
.check li{padding:14px 0 14px 36px;border-bottom:1px solid var(--mist);position:relative}
.check li::before{content:"";position:absolute;left:0;top:20px;width:18px;height:18px;border-radius:50%;background:var(--yellow)}

/* Form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;max-width:960px}
.field{display:grid;gap:10px}
.field > span{font-weight:700;font-size:14px;letter-spacing:.04em}
.field--wide{grid-column:1 / -1}
.consent{display:flex;gap:14px;align-items:flex-start;font-size:15px}
.consent input{width:22px;height:22px;accent-color:var(--grey);flex:none;margin-top:2px}
.field input:user-invalid,.field select:user-invalid{border-color:var(--red);box-shadow:inset 3px 0 0 var(--red)}
@media (max-width:700px){.form{grid-template-columns:1fr}}

/* Task 10 polish: anchor targets under sticky header */
[id]{scroll-margin-top:110px}

/* Final-fixes: focus ring on grey/dark backgrounds, active nav link */
.site-footer :focus-visible,.section--grey :focus-visible,.hero :focus-visible{outline-color:var(--yellow)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--yellow)}

/* ===== Home hero: splash composition ===== */
.home-hero{position:relative;z-index:0;overflow:hidden;min-height:100svh;display:grid;align-items:center;padding:120px 0 48px;}
.home-hero__bg{position:absolute;inset:0;background:radial-gradient(60% 70% at 72% 50%,#FFDA3D 0%,rgba(255,218,61,0) 70%),var(--yellow)}
.home-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;align-items:center;width:100%}
.hero-title{font-family:"Literata",Georgia,serif;font-weight:900;font-optical-sizing:auto;font-size:clamp(44px,5.6vw,92px);line-height:1.04;letter-spacing:-.015em;margin:0 0 28px;max-width:14ch;text-wrap:balance}
.hero-title span{display:block;margin-bottom:.2em}
/* The highlight is a band trimmed at the top (not the font's full line box), so it never touches the line above */
.hero-title mark{background:linear-gradient(var(--grey),var(--grey)) 0 100%/100% 84% no-repeat;color:var(--white);padding:0 .18em .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone;font-style:italic}
.home-hero .hero-title{font-size:clamp(40px,5.2vw,86px);line-height:1.12;letter-spacing:-.02em}
.home-hero .lead{max-width:30ch}
.btn--dark{background:var(--grey);border-color:var(--grey);color:var(--white)}
.btn--dark:hover{background:var(--white);border-color:var(--white);color:var(--grey)}
.hero-art{position:relative;width:min(100%, calc((100svh - 190px) / 1.09));aspect-ratio:1200/1310;justify-self:center}
.hero-art__grid{position:absolute;left:10%;right:8%;top:16%;bottom:12%;border:1px solid rgba(255,255,255,.7);background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px);background-size:12.5% 12.5%}
.hero-art__shadow{position:absolute;left:18%;right:22%;bottom:-2%;height:6%;border-radius:50%;background:radial-gradient(ellipse,rgba(77,60,0,.28),rgba(77,60,0,0) 70%)}
.hero-art__layer{position:absolute;will-change:transform}
.hero-art__cups{left:0;top:0;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(77,60,0,.22))}
.hero-art__bean{left:var(--x);top:var(--y);width:var(--w);height:auto;rotate:var(--r,0deg)}
.hero-art__bean--back{filter:blur(3px) drop-shadow(0 10px 12px rgba(77,60,0,.18));opacity:.85}
.hero-art__bean--front{z-index:2;filter:drop-shadow(0 22px 22px rgba(77,40,0,.35))}
.hero-awards{display:flex;align-items:center;gap:10px;margin:28px 0}
.hero-awards__badge{height:clamp(48px,4.4vw,64px);width:auto;filter:drop-shadow(0 8px 10px rgba(77,60,0,.2));transition:transform .4s var(--ease)}
.home-hero .hero__actions{margin-top:28px}
.hero-awards__badge:hover{transform:translateY(-6px) rotate(-3deg)}
@media (max-width:900px){
  .home-hero__grid{grid-template-columns:1fr}
  .hero-art{width:100%;max-width:560px}
}

/* Panels */
.panel{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:32px;padding-block:var(--space);overflow:hidden}
.panel__inner{position:relative;z-index:1;width:100%}
.panel--menu{background:var(--cream);z-index:1}
.menu-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.menu-stage{position:relative;width:min(100%,64vh);aspect-ratio:1;justify-self:center}
.menu-stage__circle{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle at 36% 30%,#FFDC4A 0%,var(--yellow) 62%);box-shadow:inset 0 -24px 60px rgba(150,100,0,.14)}
.menu-stage__item{position:absolute;inset:-4% 0 4%;margin:auto;width:auto;height:auto;max-width:64%;max-height:70%;opacity:0;visibility:hidden;filter:drop-shadow(0 26px 28px rgba(80,50,0,.28))}
.menu-stage__item--cups{width:92%;max-width:none;max-height:none}
.menu-stage__item.is-active{opacity:1;visibility:visible}
.drinks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px}
.drink{font:700 13px/1 var(--font);letter-spacing:.04em;padding:11px 16px;border-radius:999px;border:1.5px solid rgba(77,77,77,.35);background:transparent;color:var(--grey);cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.drink:hover,.drink[aria-pressed="true"]{background:var(--grey);border-color:var(--grey);color:var(--white)}
.menu-split__text .h2{margin-bottom:20px}
.menu-split__text .lead{margin-bottom:36px}
.panel--stores{background:var(--cream);z-index:2}
.stores-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.stores-split__text .h2{margin-bottom:20px}
.stores-split__text .lead{margin-bottom:28px}
.store-cities{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.store-cities li{font:700 13px/1 var(--font);padding:10px 14px;border-radius:999px;border:1.5px solid rgba(77,77,77,.3);cursor:default;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.store-cities li span{opacity:.55;margin-left:6px}
.store-cities li:hover,.store-cities li.is-hot{background:var(--grey);border-color:var(--grey);color:var(--white)}
.stores-map{position:relative;width:min(100%,64vh);aspect-ratio:1;justify-self:center}
.stores-map__circle{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle at 36% 30%,#FFDC4A 0%,var(--yellow) 62%);box-shadow:inset 0 -24px 60px rgba(150,100,0,.14)}
.stores-map__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map-dot{fill:rgba(77,60,0,.42)}
.map-inset{fill:none;stroke:rgba(77,60,0,.35);stroke-width:2;stroke-dasharray:6 6}
.map-pin{cursor:pointer}
.map-pin__dot{fill:var(--grey);stroke:var(--white);stroke-width:4}
.map-pin:not(.map-pin--big) .map-pin__ring{display:none}
.map-pin__ring{fill:none;stroke:var(--grey);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:pin-pulse 2.4s var(--ease) infinite}
.map-pin__label{font:700 22px var(--font);fill:var(--grey);opacity:0;transition:opacity .25s}
.map-pin:hover .map-pin__label,.map-pin.is-hot .map-pin__label{opacity:1}
.map-pin.is-hot .map-pin__dot,.map-pin.is-on .map-pin__dot{fill:var(--red)}
.map-pin.is-on .map-pin__label{opacity:1}
.map-pin__dot{transition:fill .25s,opacity .4s}
.map-pin.is-dim{opacity:.25}
.map-pin{transition:opacity .4s}
.menu-find{margin:56px 0 0;text-align:center}
.store-cities__more{border-style:dashed!important;opacity:.7}
@keyframes pin-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.map-pin__ring{animation:none;opacity:0}}
.panel--franchise{background:var(--yellow);z-index:3}
.panel--unique{background:var(--grey);color:var(--white);z-index:4}
.unique-head{text-align:center;margin-bottom:clamp(28px,5vh,56px)}
.unique-head .eyebrow{color:var(--yellow)}
.unique-head .h2{margin:0}
.u-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px)}
.u-item{text-align:center}
.u-circle{position:relative;width:min(100%,34vh);aspect-ratio:1;margin:0 auto 28px;border-radius:50%;background:var(--yellow)}
.u-circle img{position:absolute;inset:7%;width:86%;height:86%;border-radius:50%;object-fit:cover;transition:transform .8s var(--ease)}
.u-item:hover .u-circle img{transform:scale(1.06)}
.u-num{display:block;font:800 13px/1 var(--font);letter-spacing:.2em;color:var(--yellow);margin-bottom:10px}
.u-item__body .h3{color:var(--white);margin:0 0 8px}
.u-item__body p{margin:0 auto;max-width:30ch;font-size:16px;line-height:1.5;opacity:.85}
.fr-panel{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.fr-list{list-style:none;margin:40px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
.fr-list li{display:grid;gap:4px}
.fr-list .concept__num{font-size:clamp(48px,5vw,72px);margin:0;color:transparent}
.fr-list strong{font-size:20px}
.fr-panel__img img{display:block;width:100%;aspect-ratio:911/671;object-fit:cover;border-radius:28px;box-shadow:0 30px 60px rgba(90,60,0,.22)}
@media (max-width:1024px){.fr-panel{grid-template-columns:1fr}.menu-split{grid-template-columns:1fr}.stores-split{grid-template-columns:1fr}.fr-panel__img{max-width:560px}}
@media (max-width:768px){
  .panel{min-height:0}
  .u-list{grid-template-columns:1fr;gap:48px}.u-circle{width:72%}
  .fr-list{grid-template-columns:1fr 1fr}
}

/* Staged scenes (home.js, >768px): one pinned screen, sections stacked, objects animate between them */
.scenes.is-staged{position:relative;height:100vh;overflow:hidden}
.scenes.is-staged > section{position:absolute;inset:0;height:100vh;min-height:0}
.scenes.is-staged .panel{padding:112px 0 40px;justify-content:center}
.scenes.is-staged .fr-panel__img img{max-height:62vh;object-fit:cover}

/* Sideways strip before the footer (home.js loops the rows in opposite directions; the end padding
   matches the gap so a 50% shift lands exactly on the repeat) */
.strip{position:relative;z-index:1;overflow:hidden;background:var(--yellow);padding:clamp(48px,8vw,104px) 0}
.strip__row{overflow:hidden}
.strip__track{display:flex;align-items:center;gap:clamp(24px,3vw,48px);padding-right:clamp(24px,3vw,48px);width:max-content;will-change:transform}
.strip__track span{font:800 clamp(48px,8vw,128px)/1 var(--font);letter-spacing:-.03em;color:var(--grey);white-space:nowrap}
.strip__track img{height:clamp(84px,11vw,170px);width:auto;filter:drop-shadow(0 16px 18px rgba(80,50,0,.25))}
.strip__row--b{margin-top:clamp(20px,2.5vw,36px)}
.strip__row--b span{font-size:clamp(26px,3.6vw,52px);letter-spacing:.02em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--grey)}
.strip__row--b .dot{font-size:.5em;color:var(--grey);-webkit-text-stroke:0}

/* ===== 404: a Bruno cup lands spilled in front of a giant 404 and knocks the 0 askew ===== */
.e404{position:relative;z-index:0;overflow:hidden;min-height:100svh;display:grid;align-items:center;padding:128px 0 64px}
.e404__grid{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center}
.e404 .hero-title{max-width:13ch;font-size:clamp(40px,4.4vw,72px);line-height:1.15;margin-bottom:22px}
.e404 .lead{max-width:30ch;margin-bottom:8px}
.e404__art{--code:clamp(140px,15vw,250px);display:grid;justify-items:center}
.e404__code{display:flex;margin:0;font:900 var(--code)/.8 "Literata",Georgia,serif;font-optical-sizing:auto;letter-spacing:-.04em;color:var(--grey)}
.e404__code span{display:inline-block;animation:e404-drop .8s var(--ease) both}
.e404__code span:nth-child(2){animation:e404-drop .8s .1s var(--ease) both,e404-knock 1.4s 1s cubic-bezier(.34,1.56,.64,1) both;transform-origin:50% 100%}
.e404__code span:nth-child(3){animation-delay:.2s}
.e404__cup{position:relative;width:min(100%,600px);height:auto;margin-top:calc(var(--code) * -.42);animation:e404-land 1s .45s cubic-bezier(.34,1.3,.64,1) both}
@keyframes e404-drop{from{transform:translateY(-60px);opacity:0}}
@keyframes e404-land{from{transform:translate(30px,-80px) rotate(-10deg);opacity:0}}
@keyframes e404-knock{0%{rotate:0deg}40%{rotate:14deg}100%{rotate:9deg}}
@media (prefers-reduced-motion:reduce){.e404__code span,.e404__code span:nth-child(2),.e404__cup{animation:none}}
@media (max-width:900px){
  .e404{padding:112px 0 48px}
  .e404__grid{grid-template-columns:1fr;gap:12px}
  .e404__art{order:-1;--code:clamp(96px,28vw,180px)}
  .e404__cup{width:min(92%,420px)}
}

/* ===== Company page ===== */
.co-hero{padding:136px 0 var(--space);min-height:92svh;display:grid;align-items:center}
.co-hero__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.co-hero .hero-title{max-width:15ch;font-size:clamp(40px,5vw,84px);line-height:1.22}
.co-badge{position:relative;width:min(100%,56vh);aspect-ratio:1;justify-self:center}
.co-badge__circle{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle at 36% 30%,#FFDC4A 0%,var(--yellow) 62%);box-shadow:inset 0 -24px 60px rgba(150,100,0,.14),0 30px 60px rgba(120,80,0,.15)}
.co-badge__logo{position:absolute;inset:0;margin:auto;width:46%;height:auto;filter:drop-shadow(0 20px 24px rgba(80,50,0,.25))}
.co-badge__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.co-badge__ring text{font:800 10.5px var(--font);letter-spacing:.3em;fill:var(--grey)}

.history{background:var(--white)}
.history__head{text-align:center;max-width:760px;margin:0 auto clamp(56px,9vh,104px)}
.history__head .h2{margin-bottom:16px}
.history__head .lead{margin:0 auto;max-width:48ch;font-size:clamp(17px,1.4vw,22px)}
.history__body{position:relative}
.history__line{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(77,77,77,.14)}
.history__fill{position:absolute;inset:0;background:var(--yellow);transform:scaleY(0);transform-origin:top}
.history__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(64px,11vh,128px)}
.h-row{display:grid;grid-template-columns:1fr 96px 1fr;align-items:center}
.h-row__year{margin:0;font:800 clamp(72px,9vw,150px)/.9 var(--font);letter-spacing:-.05em;color:var(--grey);text-align:right;transition:color .5s var(--ease)}
.h-row__node{position:relative;z-index:1;justify-self:center;width:22px;height:22px;border-radius:50%;background:var(--white);border:3px solid rgba(77,77,77,.25);transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.h-row__content{display:flex;align-items:center;gap:28px}
.h-row__circle{position:relative;flex:none;width:clamp(120px,13vw,190px);aspect-ratio:1;border-radius:50%;background:var(--yellow)}
.h-row__circle img{position:absolute;inset:0;margin:auto;width:74%;height:74%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(80,50,0,.25))}
.h-row__circle--photo img{width:86%;height:86%;border-radius:50%;object-fit:cover;filter:none}
.h-row__text{margin:0;max-width:32ch;font-size:18px;line-height:1.5}
.h-row:nth-child(even) .h-row__year{order:3;text-align:left}
.h-row:nth-child(even) .h-row__node{order:2}
.h-row:nth-child(even) .h-row__content{order:1;flex-direction:row-reverse;text-align:right}
.h-row.is-on .h-row__node{background:var(--yellow);border-color:var(--yellow);box-shadow:0 0 0 8px rgba(255,204,0,.28)}
.history.is-live .h-row:not(.is-on) .h-row__year{color:rgba(77,77,77,.18)}
@media (max-width:760px){
  .history__line{left:11px}
  .h-row{grid-template-columns:22px 1fr;column-gap:20px;row-gap:16px}
  .h-row .h-row__node,.h-row:nth-child(even) .h-row__node{order:0;grid-row:1;grid-column:1}
  .h-row .h-row__year,.h-row:nth-child(even) .h-row__year{order:0;grid-column:2;text-align:left;font-size:64px}
  .h-row .h-row__content,.h-row:nth-child(even) .h-row__content{order:0;grid-column:2;flex-direction:column;align-items:flex-start;text-align:left}
}
.principles__list{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.p-item__circle{width:clamp(110px,10vw,150px);aspect-ratio:1;border-radius:50%;background:var(--yellow);display:grid;place-items:center;margin-bottom:24px}
.p-item .concept__num{margin:0;font-size:clamp(44px,4vw,64px);color:transparent}
.p-item p{margin:0;opacity:.85;max-width:26ch}

.philosophy__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:center}
.philosophy__img img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:28px;box-shadow:0 30px 60px rgba(60,40,10,.18)}
.philosophy__quote{max-width:none;font-size:clamp(34px,3.4vw,56px);line-height:1.22;margin:0 0 28px}
.philosophy__text p:not(.eyebrow){margin:0 0 16px;max-width:52ch}

.co-cta__row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px}
.co-cta__title{margin:0;font-size:clamp(52px,7vw,120px)}

@media (max-width:1024px){.principles__list{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .co-hero__grid,.philosophy__grid{grid-template-columns:1fr}
  .co-badge{width:min(80%,420px)}
}
@media (max-width:560px){.principles__list{grid-template-columns:1fr}}

/* Social / contact badges (company hero) */
.socials{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0;padding:0}
.social{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--grey);color:var(--white);transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.social:hover,.social:focus-visible{background:var(--yellow);color:var(--grey);transform:translateY(-3px);box-shadow:0 10px 20px rgba(200,150,0,.35)}

/* Products */
.products-hero{position:relative;z-index:3}
.products-hero__cups{width:74%;filter:drop-shadow(0 26px 30px rgba(80,50,0,.28))}
.products-hero .hero__actions{margin-top:36px}
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font:800 11px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.tag--new{background:var(--yellow);color:var(--grey)}
.tag--popular{background:var(--grey);color:var(--white)}
.tag--soon{border:1.5px solid rgba(77,77,77,.45);color:var(--grey)}
.tag--soon::before,.dot--soon{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.dot--new{background:var(--yellow);box-shadow:0 0 0 1px rgba(77,77,77,.25)}
.dot--popular{background:var(--grey)}

@property --nd-accent{syntax:"<color>";inherits:true;initial-value:#FFCC00}
@property --nd-tint{syntax:"<color>";inherits:true;initial-value:#F5EDE3}
@property --nd-intro{syntax:"<number>";inherits:true;initial-value:1}
/* --nd-intro (0→1, scrubbed on scroll) blends from the hero's yellow/cream into the current drink's colours */
.new-drinks{position:relative;z-index:2;background:color-mix(in srgb,var(--nd-tint) calc(var(--nd-intro) * 100%),var(--cream));transition:--nd-accent .9s var(--ease),--nd-tint .9s var(--ease)}
.new-drinks.is-pinned{height:100svh;padding-block:88px 24px;display:flex;align-items:center}
.new-drinks.is-pinned>.container{width:100%}
.new-drinks__head{grid-area:head;align-self:end;margin-bottom:28px}
.new-drinks__head .eyebrow{margin-bottom:12px}
.new-drinks__head .display{font-size:clamp(34px,3.4vw,54px);opacity:.35}
.nd{display:grid;grid-template-columns:1.05fr 1fr;grid-template-areas:"stage head" "stage info" "stage thumbs";column-gap:clamp(32px,6vw,96px);align-items:center}
.nd__stage{grid-area:stage;position:relative;z-index:0;aspect-ratio:1;width:100%;max-width:620px;justify-self:center}
.nd__circle{position:absolute;inset:6%;z-index:-1;border-radius:50%;background:color-mix(in srgb,var(--nd-accent) calc(var(--nd-intro) * 100%),var(--yellow));box-shadow:inset 0 -30px 70px rgba(0,0,0,.12),0 40px 70px rgba(0,0,0,.12)}
.nd__img{position:absolute;inset:0;margin:auto;width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 30px 34px rgba(0,0,0,.28))}
.nd__info{grid-area:info}
.nd__count{margin:0 0 16px;font:800 14px/1 var(--font);letter-spacing:.2em;opacity:.55}
.nd__name{margin:18px 0 10px;font:800 clamp(40px,5vw,80px)/.95 var(--font);letter-spacing:-.035em}
.nd__notes{margin:0 0 22px;font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--nd-accent);filter:brightness(.8)}
.nd__desc{margin:0 0 22px;max-width:44ch}
.nd__flavours{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0}
.nd__flavours:empty{display:none}
.nd__flavours li{padding:8px 16px;border-radius:999px;border:1.5px solid var(--grey);font-weight:700;font-size:14px}
.nd__sig{margin:0;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;opacity:.5}
.nd__thumbs{grid-area:thumbs;align-self:start;display:flex;gap:14px;margin-top:36px}
.nd__thumb{position:relative;width:76px;height:76px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.7);cursor:pointer;transition:transform .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
.nd__thumb img{position:absolute;inset:0;margin:auto;width:72%;height:72%;object-fit:contain}
.nd__thumb:hover{transform:translateY(-4px)}
.nd__thumb[aria-pressed="true"]{background:var(--white);box-shadow:0 0 0 3px var(--grey)}

.menu-head{max-width:760px;margin-bottom:clamp(40px,6vw,72px)}
.menu-head .h2{margin-bottom:16px}
.menu-head .lead{font-size:clamp(17px,1.4vw,22px)}
.menu-app{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.menu-preview{position:sticky;top:calc(50svh - min(19vw,260px));text-align:center}
.menu-preview__circle{position:relative;width:min(100%,520px);aspect-ratio:1;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 36% 30%,#FFDC4A 0%,var(--yellow) 62%);box-shadow:inset 0 -24px 60px rgba(150,100,0,.14),0 30px 60px rgba(120,80,0,.15)}
.menu-preview__img{position:absolute;inset:0;margin:auto;width:74%;height:74%;object-fit:contain;filter:drop-shadow(0 24px 26px rgba(80,50,0,.3))}
.menu-preview__name{margin:24px 0 0;font:800 clamp(22px,2vw,30px)/1.2 "Literata",Georgia,serif;font-style:italic;min-height:1.2em}
.menu-bar{position:sticky;top:100px;z-index:5;display:grid;gap:14px;padding:14px 0 18px;background:var(--white)}
.menu-tabs{position:relative;display:flex;gap:4px;padding:6px;border-radius:999px;background:var(--mist);overflow-x:auto;scrollbar-width:none}
.menu-tabs::-webkit-scrollbar{display:none}
.menu-tabs__pill{position:absolute;left:0;top:6px;bottom:6px;width:0;border-radius:999px;background:var(--yellow);box-shadow:0 6px 14px rgba(150,100,0,.2)}
.menu-tab{position:relative;z-index:1;flex:none;height:44px;padding:0 20px;border:0;border-radius:999px;background:none;font:700 15px/1 var(--font);color:var(--grey);cursor:pointer;white-space:nowrap;opacity:.7;transition:opacity .3s}
.menu-tab:hover,.menu-tab[aria-pressed="true"]{opacity:1}
.menu-filters{display:flex;flex-wrap:wrap;gap:8px}
.menu-filter{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border:1.5px solid rgba(77,77,77,.25);border-radius:999px;background:none;font:700 13px/1 var(--font);color:var(--grey);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.menu-filter:hover{border-color:var(--grey)}
.menu-filter[aria-pressed="true"]{background:var(--grey);border-color:var(--grey);color:var(--white)}
.menu-list{min-height:60vh}
.menu-group{margin-top:36px}
.menu-group__title{margin:0 0 8px;font:800 13px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;opacity:.55}
.menu-items{list-style:none;margin:0;padding:0}
.menu-item{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid rgba(77,77,77,.12);cursor:default;transition:padding .35s var(--ease)}
.menu-item__name{font-weight:700;font-size:clamp(19px,1.6vw,24px);letter-spacing:-.01em;position:relative}
.menu-item__name::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.menu-item:hover{padding-left:12px}
.menu-item:hover .menu-item__name::after{transform:scaleX(1)}
.menu-item.is-soon .menu-item__name{opacity:.55}
.menu-empty{margin:48px 0;font-size:18px;opacity:.7}
@media (max-width:900px){
  .nd{grid-template-columns:1fr;grid-template-areas:"head" "stage" "thumbs" "info"}
  .nd__stage{max-width:440px}
  .nd__thumbs{justify-content:center;margin:8px 0 36px}
  .nd__thumb{width:60px;height:60px}
  .new-drinks.is-pinned .nd__stage{max-width:min(78vw,36svh)}
  .new-drinks.is-pinned .nd__thumbs{margin:4px 0 16px}
  .new-drinks.is-pinned .new-drinks__head{margin-bottom:8px}
  .new-drinks.is-pinned .new-drinks__head .display{display:none}
  .new-drinks.is-pinned .nd__count,.new-drinks.is-pinned .nd__sig{display:none}
  .new-drinks.is-pinned .nd__name{margin:10px 0 6px;font-size:36px}
  .new-drinks.is-pinned .nd__notes{margin-bottom:10px}
  .new-drinks.is-pinned .nd__desc{font-size:15px;margin-bottom:10px}
  .menu-app{grid-template-columns:1fr}
  .menu-preview{display:none}
  .menu-bar{top:80px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  .menu-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  .menu-filter{flex:none}
}

/* Stores locator */
.locator{padding:136px 0 var(--space)}
.locator__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.locator__hero .hero-title{font-size:clamp(40px,4.6vw,76px);line-height:1.22;max-width:14ch}
.locator__hero .lead{max-width:34ch;font-size:clamp(18px,1.6vw,24px)}
.st-stats{list-style:none;display:flex;gap:clamp(24px,4vw,56px);margin:36px 0 0;padding:0}
.st-stats li{display:grid;gap:4px}
.st-stats__n{font:800 clamp(40px,4.4vw,68px)/1 var(--font);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.st-stats span{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.st-tools{position:sticky;top:100px;z-index:5;display:grid;gap:12px;margin-top:48px;padding:14px 0 16px;background:var(--cream)}
.st-search{display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;border-radius:999px;background:var(--white);box-shadow:0 8px 24px rgba(60,45,0,.08)}
.st-search svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--grey);stroke-width:2.2;stroke-linecap:round}
.st-search input{flex:1;min-width:0;height:100%;border:0;background:none;font:500 17px var(--font);color:var(--grey);outline:none}
.st-search:focus-within{box-shadow:0 0 0 3px var(--grey)}
@property --fade-l{syntax:"<length>";inherits:false;initial-value:0px}
@property --fade-r{syntax:"<length>";inherits:false;initial-value:0px}
/* Edges fade (instead of hard-clipping) on whichever side has more chips to scroll to */
.st-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);transition:--fade-l .3s var(--ease),--fade-r .3s var(--ease)}
.st-chips.can-l{--fade-l:48px}
.st-chips.can-r{--fade-r:48px}
.st-chips::-webkit-scrollbar{display:none}
.st-chips button{flex:none;height:38px;padding:0 16px;border:1.5px solid rgba(77,77,77,.25);border-radius:999px;background:none;font:700 13px/1 var(--font);color:var(--grey);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.st-chips button:hover{border-color:var(--grey)}
.st-chips button[aria-pressed="true"]{background:var(--grey);border-color:var(--grey);color:var(--white)}
.st-list{min-height:50vh}
.st-group{margin-top:40px}
.st-group__title{display:flex;align-items:baseline;gap:10px;margin:0 0 6px;font:800 clamp(26px,2.4vw,36px)/1 var(--font);letter-spacing:-.03em}
.st-group__title button{padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;background-image:linear-gradient(var(--yellow),var(--yellow));background-size:0 .28em;background-position:0 88%;background-repeat:no-repeat;transition:background-size .4s var(--ease)}
.st-group__title button:hover{background-size:100% .28em}
.st-group__title span{font-size:15px;font-weight:700;letter-spacing:0;opacity:.5}
.st-stores{list-style:none;margin:0;padding:0}
.st-store{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(77,77,77,.12);transition:padding .35s var(--ease)}
.st-store:hover{padding-left:10px}
.st-store__addr{font-weight:700;font-size:18px;text-decoration:none}
.st-store__addr small{display:block;margin-top:2px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.5}
.st-store__addr:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:4px}
.st-store__phone{font-size:15px;font-variant-numeric:tabular-nums;text-decoration:none;opacity:.75;white-space:nowrap}
.st-store__phone:hover{opacity:1}
.st-store__dir{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--white);transition:background .3s var(--ease),transform .3s var(--ease)}
.st-store__dir svg{width:18px;height:18px;fill:none;stroke:var(--grey);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.st-store__dir:hover{background:var(--yellow);transform:rotate(-8deg) scale(1.08)}
.st-empty{margin:48px 0}
.locator__map{position:sticky;top:calc(50svh - min(21vw,300px) + 40px)}
.locator .stores-map{width:min(100%,600px)}
.st-caption{display:flex;align-items:center;justify-content:center;gap:16px;min-height:44px;margin-top:8px}
.st-caption__name{margin:0;font:800 clamp(22px,2vw,30px)/1.2 "Literata",Georgia,serif;font-style:italic}
.st-caption__name span{font:700 15px var(--font);font-style:normal;opacity:.5;margin-left:4px}
.st-caption__reset{height:36px;padding:0 14px;border:1.5px solid var(--grey);border-radius:999px;background:none;font:700 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--grey);cursor:pointer}
.st-caption__reset:hover{background:var(--grey);color:var(--white)}
@media (max-width:900px){
  .locator{padding-top:112px}
  .locator__grid{grid-template-columns:1fr}
  .locator__main{display:contents}
  .locator__hero{order:-2}
  .locator__map{position:relative;top:auto;order:-1}
  .locator .stores-map{width:min(100%,420px);margin:0 auto}
  .st-tools{top:80px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  .st-store{grid-template-columns:minmax(0,1fr) 44px;row-gap:4px}
  .st-store__phone{grid-row:2;grid-column:1}
  .st-store__dir{grid-row:1/3;grid-column:2}
}

/* Franchise */
.fr-hero__photo{position:absolute;inset:16%;border-radius:50%;overflow:hidden;box-shadow:0 30px 60px rgba(90,60,0,.25)}
.fr-hero__photo img{width:100%;height:100%;object-fit:cover}
.fr-hero .hero-title{max-width:12ch;text-wrap:balance}
.fr-stats{margin:32px 0 36px}
.fr-stats .st-stats__n{font-size:clamp(34px,3.4vw,54px)}
.fr-head{max-width:760px;margin-bottom:40px}
.fc__tabs{width:max-content;max-width:100%}
.fc__tabnum{font-weight:800;opacity:.45;margin-right:4px}
.fc__body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;margin-top:clamp(32px,5vw,64px)}
.fc__stage{position:relative;aspect-ratio:1;width:100%;max-width:600px}
.fc__circle{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 36% 30%,#FFDC4A 0%,var(--yellow) 62%);box-shadow:inset 0 -24px 60px rgba(150,100,0,.14),0 30px 60px rgba(120,80,0,.15)}
.fc__photos{position:absolute;inset:7%;border-radius:50%;overflow:hidden;box-shadow:0 24px 50px rgba(90,60,0,.25)}
.fc__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.fc__photo.is-on{visibility:visible}
.fc__photo.is-top{z-index:1}
.fc__panel .concept__num{font-size:clamp(72px,8vw,128px);margin-bottom:8px}
.fc__name{margin:0 0 12px;font:800 clamp(34px,3.6vw,56px)/1 var(--font);letter-spacing:-.035em}
.fc__size{margin:0 0 28px;font-size:clamp(18px,1.5vw,22px);max-width:34ch}
.fc__label{margin:0 0 4px;font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.55}
.fc__incl li{font-weight:700}
.fc__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:32px}
.fc__price{margin:0;font:800 clamp(30px,3vw,46px)/1 var(--font);letter-spacing:-.03em}
.fr-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.fr-split__head{position:sticky;top:140px}
.fr-split__head .lead{font-size:clamp(18px,1.5vw,22px);max-width:36ch}
.fr-split__head .btn{margin-top:12px}
.fr-why__list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fr-why__item{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;padding:22px 28px 22px 22px;border-radius:28px;background:var(--white);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.fr-why__item:hover{transform:translateX(8px);box-shadow:0 18px 40px rgba(60,45,0,.1)}
.fr-why__num{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--yellow);font:800 24px/1 var(--font);letter-spacing:-.03em}
.fr-why__item .h3{margin:0 0 4px}
.fr-why__item p{margin:0;opacity:.8;max-width:52ch}
.fr-steps{position:relative}
.fr-steps__line{position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:rgba(77,77,77,.14)}
.fr-steps__fill{position:absolute;inset:0;background:var(--yellow);transform:scaleY(0);transform-origin:top}
.fr-steps__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,3.4vh,36px)}
.fr-step{position:relative;display:grid;grid-template-columns:44px auto 1fr;gap:20px;align-items:center}
.fr-step__node{position:relative;z-index:1;justify-self:center;width:18px;height:18px;border-radius:50%;background:var(--white);border:3px solid rgba(77,77,77,.25);transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.fr-step__num{font:800 clamp(28px,2.6vw,40px)/1 var(--font);letter-spacing:-.04em;transition:color .4s var(--ease)}
.fr-step p{margin:0;font-size:clamp(17px,1.4vw,21px);font-weight:700}
.fr-steps.is-live .fr-step:not(.is-on) .fr-step__num{color:rgba(77,77,77,.2)}
.fr-steps.is-live .fr-step:not(.is-on) p{opacity:.45}
.fr-step p{transition:opacity .4s var(--ease)}
.fr-step.is-on .fr-step__node{background:var(--yellow);border-color:var(--yellow);box-shadow:0 0 0 7px rgba(255,204,0,.28)}
.fr-step:last-child .fr-step__num{background:var(--yellow);padding:4px 10px;border-radius:999px}
.fr-apply__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.fr-apply__title{font-size:clamp(56px,7vw,120px);margin-bottom:24px}
.fr-apply__text .lead{font-size:clamp(18px,1.5vw,22px)}
.fr-contact{display:grid;gap:4px;margin-top:40px;padding-top:28px;border-top:2px solid rgba(77,77,77,.2)}
.fr-contact__k{margin:0;font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.fr-contact__name{margin:4px 0 6px;font:800 clamp(24px,2.2vw,32px)/1.2 "Literata",Georgia,serif;font-style:italic}
.fr-contact a{font-weight:700;text-decoration:none;width:max-content;box-shadow:inset 0 -2px 0 var(--grey)}
.fr-apply__card{padding:clamp(24px,4vw,48px);border-radius:32px;background:var(--white);box-shadow:0 30px 60px rgba(120,80,0,.18)}
.fr-apply__card .form{max-width:none;gap:22px 24px;align-items:end}
.fr-apply__card .btn--yellow:hover{background:var(--grey);color:var(--yellow)}
@media (max-width:900px){
  .fc__body,.fr-split,.fr-apply__grid{grid-template-columns:1fr}
  .fc__stage{max-width:420px;margin:0 auto}
  .fc__tabs{margin-inline:calc(var(--pad) * -1);max-width:none;width:auto;border-radius:0}
  .fr-split__head{position:static}
  .fr-why__item{grid-template-columns:1fr;gap:14px;padding:22px}
  .fr-why__num{width:56px;height:56px;font-size:19px}
}
/* Concepts pinned (desktop): photo left; heading, tabs and details stacked right, all in one screen */
#concepts.is-pinned{height:100svh;padding-block:96px 24px;display:flex;align-items:center}
#concepts.is-pinned>.container{width:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"stage head" "stage tabs" "stage panel";column-gap:clamp(32px,6vw,96px);align-content:center}
#concepts.is-pinned .fc,#concepts.is-pinned .fc__body{display:contents}
#concepts.is-pinned .fr-head{grid-area:head;margin-bottom:18px}
#concepts.is-pinned .fr-head .h2{font-size:clamp(28px,2.8vw,44px);margin:0}
#concepts.is-pinned .fc__tabs{grid-area:tabs;justify-self:start}
#concepts.is-pinned .fc__stage{grid-area:stage;align-self:center;max-width:min(600px,calc(100svh - 150px))}
#concepts.is-pinned .fc__panels{grid-area:panel;margin-top:clamp(16px,3vh,32px)}
#concepts.is-pinned .fc__panel .concept__num{font-size:clamp(52px,5vw,80px);margin-bottom:4px}
#concepts.is-pinned .fc__name{font-size:clamp(30px,3vw,46px);margin-bottom:8px}
#concepts.is-pinned .fc__size{margin-bottom:16px}
#concepts.is-pinned .fc__incl li{padding-block:9px}
#concepts.is-pinned .fc__incl li::before{top:14px}
#concepts.is-pinned .fc__foot{margin-top:20px}
#concepts.is-pinned .fc__tabnum{display:none}
#concepts.is-pinned .menu-tab{padding:0 16px}

/* Jobs */
.jobs-hero .hero-title{max-width:13ch;text-wrap:balance}
.ways{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.way{display:flex;align-items:center;gap:18px;padding:18px 20px;border-radius:24px;background:rgba(255,255,255,.55);text-decoration:none;transition:background .3s var(--ease),transform .3s var(--ease)}
.way:hover{background:var(--white);transform:translateX(6px)}
.way__num{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--grey);color:var(--yellow);font:800 20px/1 var(--font)}
.way b{display:block;font-size:18px}
.way small{display:block;margin-top:2px;font-size:15px;opacity:.75}
.file-drop{position:relative}
.file-drop input{position:absolute;bottom:0;left:50%;width:1px;height:1px;opacity:0}
.file-drop__box{display:flex;align-items:center;justify-content:center;gap:12px;min-height:88px;padding:16px;border:2px dashed rgba(77,77,77,.3);border-radius:18px;cursor:pointer;text-align:center;font-weight:700;font-size:15px;transition:border-color .3s var(--ease),background .3s var(--ease)}
.file-drop__box svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.file-drop:hover .file-drop__box,.file-drop.is-over .file-drop__box,.file-drop input:focus-visible+.file-drop__box{border-color:var(--grey);background:rgba(255,204,0,.12)}
.file-drop.has-file .file-drop__box{border-style:solid;border-color:var(--grey);background:rgba(255,204,0,.2)}

/* News */
.news-top{padding:136px 0 clamp(56px,8vw,96px)}
.news-head{max-width:880px;margin-bottom:clamp(36px,5vw,64px)}
.news-head .hero-title{font-size:clamp(40px,5vw,84px);line-height:1.22;max-width:none}
.news-head .lead{max-width:44ch;font-size:clamp(18px,1.6vw,24px)}
.news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0;font-size:14px;font-weight:700;opacity:.9}
.news-meta time{opacity:.6}
.news-tag{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:var(--mist)}
.news-tag--awards{background:var(--yellow)}
.news-tag--stores{background:var(--grey);color:var(--white)}
.news-tag--contests{background:#FDE7C9}
.news-tag--company{background:var(--white);box-shadow:inset 0 0 0 1.5px rgba(77,77,77,.3)}
.nf{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;text-decoration:none}
.nf__img{margin:0;overflow:hidden;border-radius:28px;box-shadow:0 30px 60px rgba(90,60,0,.18);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.nf__img img{width:100%;height:auto}
/* Hover lifts the whole frame — never zooms the image, so nothing gets cropped */
.nf:hover .nf__img{transform:translateY(-6px);box-shadow:0 40px 70px rgba(90,60,0,.24)}
.nf__k{margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.55}
.nf__title{margin:18px 0 14px;font:800 clamp(30px,3.2vw,50px)/1.05 var(--font);letter-spacing:-.03em;text-wrap:balance}
.nf__ex{margin:0 0 28px;opacity:.8;max-width:48ch}
.news-chips{margin-bottom:clamp(28px,4vw,48px)}
.news-chips button span{opacity:.5;margin-left:4px}
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(20px,3vw,40px)}
.nc{display:grid;gap:14px;align-content:start;text-decoration:none}
/* Every card gets the same 4:3 frame, filled edge to edge by its image */
.nc__img{aspect-ratio:4/3;margin:0 0 4px;overflow:hidden;border-radius:24px;background:var(--mist);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.nc__img img{width:100%;height:100%;object-fit:cover}
.nc:hover .nc__img{transform:translateY(-6px);box-shadow:0 24px 44px rgba(60,45,0,.16)}
.nc__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:3.45em;margin:0;font:800 clamp(20px,1.7vw,26px)/1.15 var(--font);letter-spacing:-.02em;text-wrap:balance;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:3px;text-underline-offset:5px;transition:text-decoration-color .3s var(--ease)}
.nc:hover .nc__title{text-decoration-color:var(--yellow)}
.is-reading body{overflow:hidden}
.reader{position:fixed;inset:0;z-index:100}
.reader__panel{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;background:var(--cream)}
.reader__bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--pad);background:rgba(245,237,227,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.reader__meta{display:flex;align-items:center;gap:12px;margin:0;font-size:14px;font-weight:700}
.reader__meta time{opacity:.6}
.reader__close{display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:var(--grey);color:var(--white);cursor:pointer;transition:transform .35s var(--ease),background .3s var(--ease)}
.reader__close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.reader__close:hover{transform:rotate(90deg);background:var(--yellow);color:var(--grey)}
.reader__article{max-width:780px;margin:0 auto;padding:clamp(16px,3vw,40px) var(--pad) 0}
.reader__title{margin:0 0 clamp(24px,3vw,40px);font:800 clamp(34px,4.4vw,64px)/1.05 var(--font);letter-spacing:-.035em;text-wrap:balance}
/* The figure shrink-wraps the image, so portrait/square photos get no side bars */
.reader__figure{width:fit-content;max-width:100%;margin:0 auto clamp(28px,4vw,48px);border-radius:28px;overflow:hidden;box-shadow:0 30px 60px rgba(90,60,0,.15)}
.reader__img{display:block;width:auto;height:auto;max-width:100%;max-height:72svh}
.reader__body{font-size:clamp(18px,1.4vw,21px);line-height:1.65}
.reader__body p{margin:0 0 1.1em}
.reader__body blockquote{margin:1.6em 0;padding:4px 0 4px 28px;border-left:5px solid var(--yellow)}
.reader__body blockquote p{margin:0 0 12px;font:800 clamp(21px,1.9vw,27px)/1.4 "Literata",Georgia,serif;font-style:italic}
.reader__body blockquote footer{font-size:14px;font-weight:800;letter-spacing:.06em;opacity:.65}
.reader__body .check{margin:0 0 1.2em}
.reader__nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:780px;margin:clamp(40px,6vw,72px) auto 0;padding:0 var(--pad) clamp(48px,8vw,96px)}
.reader__step{display:grid;gap:6px;padding:22px 24px;border-radius:24px;background:var(--white);font-weight:800;font-size:17px;line-height:1.25;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.reader__step small{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.reader__step--next{text-align:right}
.reader__step:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(60,45,0,.1)}
@media (max-width:900px){
  .nf{grid-template-columns:1fr}
  .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .news-grid{grid-template-columns:1fr}
  .reader__nav{grid-template-columns:1fr}
  .reader__step--next{text-align:left}
}

/* Contact */
.ct-hero .hero-title{max-width:12ch}
.ct-tiles{list-style:none;display:grid;gap:10px;margin:32px 0 0;padding:0;max-width:440px}
.ct-tile{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:22px;background:var(--white);text-decoration:none;font-weight:800;font-size:18px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ct-tile>svg{flex:none;width:44px;height:44px;padding:11px;border-radius:50%;background:var(--yellow);fill:none;stroke:var(--grey);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-tile small{display:block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.5}
.ct-tile:hover{transform:translateX(6px);box-shadow:0 14px 30px rgba(60,45,0,.1)}
.ct-follow{display:flex;align-items:center;gap:18px;margin-top:28px}
.ct-follow .eyebrow{margin:0}
.ct-follow .socials{margin:0}
.ct-map{position:relative;width:min(100%,56vh);aspect-ratio:1;justify-self:center}
.ct-map .co-badge__circle{inset:0}
.ct-map__frame{position:absolute;inset:6%;border-radius:50%;overflow:hidden;box-shadow:0 24px 50px rgba(90,60,0,.25)}
.ct-map__frame iframe{position:absolute;left:-10%;top:-10%;width:120%;height:120%;border:0;filter:grayscale(1) sepia(.25) saturate(1.3) contrast(.95) brightness(1.04);pointer-events:none}
.ct-map__pin{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--white);box-shadow:0 0 0 0 rgba(255,204,0,.7),0 10px 24px rgba(0,0,0,.25);animation:ct-pulse 2.4s var(--ease) infinite}
.ct-map__pin img{width:100%;height:100%}
@keyframes ct-pulse{0%{box-shadow:0 0 0 0 rgba(255,204,0,.75),0 10px 24px rgba(0,0,0,.25)}70%,100%{box-shadow:0 0 0 26px rgba(255,204,0,0),0 10px 24px rgba(0,0,0,.25)}}
.ct-map__btn{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);gap:8px}
.ct-map__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ct-team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ct-card{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:28px;background:var(--cream);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.ct-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(60,45,0,.1)}
.ct-card__dept{margin:0;font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.ct-card__people{display:grid;gap:10px}
.ct-person{display:flex;align-items:center;gap:12px;font-size:19px}
.ct-person__av{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--yellow);font:800 16px/1 var(--font);letter-spacing:.02em}
.ct-card__people:has(.ct-person:nth-child(2)) .ct-person{font-size:16px}
.ct-card__people:has(.ct-person:nth-child(2)) .ct-person__av{width:38px;height:38px;font-size:13px}
.ct-card__icon svg{width:48px;height:48px;padding:12px;border-radius:50%;background:var(--yellow);fill:none;stroke:var(--grey);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-card__role{margin:0;opacity:.75}
.ct-card__mail{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:8px}
.ct-card__mail a{font-weight:800;font-size:16px;white-space:nowrap;text-decoration:none;box-shadow:inset 0 -2px 0 var(--yellow)}
.ct-copy{position:relative;flex:none;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--white);cursor:pointer;transition:background .3s var(--ease)}
.ct-copy svg{width:16px;height:16px;fill:none;stroke:var(--grey);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-copy:hover{background:var(--yellow)}
.ct-copy::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,6px);padding:6px 10px;border-radius:8px;background:var(--grey);color:var(--white);font:700 12px/1 var(--font);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.ct-copy.is-done{background:var(--yellow)}
.ct-copy.is-done::after{opacity:1;transform:translate(-50%,0)}
.ct-card__link{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-weight:800;text-decoration:none;width:max-content}
.ct-card__link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.ct-card__link:hover svg{transform:translateX(4px)}
.ct-quick__k{margin-top:36px}
.fr-apply .way__num svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1024px){.ct-team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ct-team{grid-template-columns:1fr}.ct-map{width:100%}}

/* Privacy policy */
.pp-top{padding:136px 0 clamp(48px,6vw,80px)}
.pp-top .hero-title{font-size:clamp(40px,5vw,80px);max-width:none}
.pp-date{margin:-8px 0 0;font-weight:700;opacity:.65}
.pp-note{display:inline-block;margin:16px 0 0;padding:8px 14px;border-radius:999px;background:var(--yellow);font-weight:700;font-size:14px}
html:not([lang="en"]) .pp-note{display:none}
.pp-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:32px;padding:20px 24px;border-radius:24px;background:var(--white);max-width:860px}
.pp-ctrl__k{margin:0;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.pp-ctrl__v{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:15px}
.pp-ctrl__v a{font-weight:700;text-decoration:none;box-shadow:inset 0 -2px 0 var(--yellow)}
.pp-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.pp-toc{position:sticky;top:120px;max-height:calc(100svh - 150px);overflow:auto;scrollbar-width:none}
.pp-toc::-webkit-scrollbar{display:none}
.pp-toc__k{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.pp-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pp-toc a{display:grid;grid-template-columns:30px 1fr;gap:8px;padding:9px 12px;border-radius:12px;font-size:12.5px;font-weight:700;letter-spacing:.04em;line-height:1.35;text-decoration:none;opacity:.6;transition:opacity .25s,background .25s}
.pp-toc a span{font-weight:800;opacity:.6}
.pp-toc a:hover{opacity:1;background:var(--cream)}
.pp-toc a[aria-current]{opacity:1;background:var(--yellow)}
.pp-article{max-width:72ch;font-size:17px;line-height:1.7}
.pp-article p{margin:0 0 1em}
.pp-article a{font-weight:700;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.pp-intro p:first-child{font-size:clamp(18px,1.5vw,21px);line-height:1.6}
.pp-sec{padding-top:clamp(28px,4vw,44px);margin-top:clamp(28px,4vw,44px);border-top:1px solid rgba(77,77,77,.14)}
.pp-sec__t{display:flex;align-items:center;gap:16px;margin:0 0 18px;font-size:clamp(17px,1.4vw,20px);font-weight:800;letter-spacing:.06em;line-height:1.3}
.pp-sec__n{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--yellow);font-size:15px;letter-spacing:0}
.pp-article .check{margin:0 0 1em}
.pp-article .check li{padding-block:10px}
.pp-ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(40px,6vw,64px);padding:28px;border-radius:28px;background:var(--yellow)}
.pp-ask .h3{margin:0 0 4px}
.pp-ask p{margin:0}
.pp-ask .btn{text-decoration:none}
@media (max-width:900px){
  .pp-grid{grid-template-columns:1fr}
  .pp-toc{position:static;max-height:none}
  .pp-toc ol{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}
/* Both languages live in the page; show the one matching the language toggle */
html:not([lang="en"]) :is(.pp-top,.pp-body) [lang="en"],
html[lang="en"] :is(.pp-top,.pp-body) [lang="el"]{display:none}
.pp-toc a b{font-weight:inherit}

/* ==========================================================================
   Phones only (≤767px). Tablet (768px+) and desktop layouts are untouched —
   every rule below lives inside this one query.
   ========================================================================== */
@media (max-width:767px){
  /* Nothing may push the page sideways (off-screen entrance offsets, spinning stamp rings) */
  html,body{overflow-x:clip}

  /* Hero stamp badges: small enough that the rotating ring stays on screen */
  .co-hero .co-badge{width:min(74vw,300px);margin-top:8px}

  /* Swipeable rows fade at whichever edge has more to scroll to (edges set by main.js) */
  :is(.menu-tabs,.menu-filters,.drinks,.u-list,.pp-toc ol,.store-cities){
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);
    transition:--fade-l .3s var(--ease),--fade-r .3s var(--ease)}
  :is(.menu-tabs,.menu-filters,.drinks,.u-list,.pp-toc ol,.store-cities).can-l{--fade-l:36px}
  :is(.menu-tabs,.menu-filters,.drinks,.u-list,.pp-toc ol,.store-cities).can-r{--fade-r:36px}

  /* Footer: the two link lists side by side under the logo */
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:36px 20px}
  .site-footer__grid>:first-child{grid-column:1/-1}

  /* Principles / perks (Company, Jobs): a 2×2 grid instead of four tall stacked circles */
  .principles__list{grid-template-columns:1fr 1fr;gap:32px 16px}
  .p-item__circle{width:84px;margin-bottom:16px}
  .p-item .concept__num{font-size:34px}
  .p-item .h3{font-size:20px}
  .p-item p{font-size:15px;line-height:1.5}

  /* Home — let the scenes' flex/grid wrappers shrink to the screen so the swipe rows below scroll
     instead of stretching their section wider than the phone */
  .panel>*,.menu-split>*,.panel--unique .container>*{min-width:0}
  .panel>.container{width:100%}
  /* Home — drink picker: one swipeable row */
  .drinks{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  .drinks::-webkit-scrollbar{display:none}
  .drink{flex:none}
  /* Home — "unique": a swipe carousel of the three circles */
  .u-list{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 4px}
  .u-list::-webkit-scrollbar{display:none}
  .u-item{flex:0 0 78%;scroll-snap-align:center}
  .u-circle{width:82%;margin-bottom:20px}

  /* Header: a solid bar instead of a live blur, which is costly to redraw over the animated home scenes */
  .site-header__row{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.97)}
  .hero-art__bean--back{filter:none}

  /* Home hero: the cups sit between the copy and the buttons (the copy column dissolves into the grid) */
  .home-hero__grid{gap:0}
  .home-hero__text{display:contents}
  .home-hero .hero-title{font-size:clamp(32px,9.4vw,42px);margin-bottom:12px}
  .home-hero .lead{font-size:17px}
  .hero-awards{margin:14px 0 0;gap:8px}
  .hero-awards__badge{height:40px}
  .hero-art{order:1;width:min(100%,420px);max-width:none;margin-top:12px}
  .home-hero .hero__actions{order:2;margin-top:12px;flex-wrap:nowrap}
  .home-hero .hero__actions .btn{flex:1;justify-content:center;padding:0 10px;min-height:48px;font-size:13px;letter-spacing:.03em;white-space:nowrap}

  /* Home staged scenes (home.js): every scene fits one screen. Sections fill the tall viewport (the
     backdrop reaches under the browser toolbars) while the content stays inside the small one, and
     each scene's picture takes whatever height the copy leaves */
  .scenes.is-staged > section{display:flex;flex-direction:column;padding:100px 0 calc(100vh - 100svh + 16px)}
  .scenes.is-staged > section > .container{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0}
  .scenes.is-staged :is(.hero-art,.menu-stage,.stores-map){flex:1 1 0;min-height:0;width:auto;max-width:100%;max-height:min(76vw,400px);align-self:center}
  .scenes.is-staged .hero-art{max-height:min(84vw,440px)}
  .scenes.is-staged .menu-stage{margin-bottom:12px}
  .scenes.is-staged .stores-map{margin-top:8px}
  .scenes.is-staged .panel .eyebrow{margin-bottom:10px}
  .scenes.is-staged .panel .h2{font-size:clamp(30px,8.6vw,38px);margin-bottom:10px}
  .scenes.is-staged .panel .lead{font-size:17px}
  .scenes.is-staged :is(.menu-split__text,.stores-split__text) .lead{margin-bottom:14px}
  .scenes.is-staged .drinks{margin-bottom:14px}
  .scenes.is-staged .store-cities{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--pad) * -1) 14px;padding-inline:var(--pad)}
  .scenes.is-staged .store-cities::-webkit-scrollbar{display:none}
  .scenes.is-staged .store-cities li{flex:none}
  .scenes.is-staged .fr-list{margin:14px 0;gap:10px 16px}
  .scenes.is-staged .fr-list li{grid-template-columns:auto 1fr;column-gap:8px;row-gap:2px;align-items:center;align-content:center}
  .scenes.is-staged .fr-list .concept__num{font-size:30px;grid-row:span 2;margin:0}
  .scenes.is-staged .fr-list strong{font-size:16px}
  .scenes.is-staged .fr-list span:last-child{font-size:14px}
  .scenes.is-staged .fr-panel__img{flex:1 1 0;min-height:0;max-height:260px;margin-top:16px;display:flex;justify-content:center}
  .scenes.is-staged .fr-panel__img img{width:100%;height:100%;max-height:none;border-radius:20px}
  .scenes.is-staged .unique-head{margin-bottom:18px}
  .scenes.is-staged .u-circle{width:min(82%,calc(100svh - 360px));margin-bottom:16px}

  /* Products + Franchise tab rows: rounded pill bar that scrolls inside the page margins */
  .fc__tabs{margin-inline:0;border-radius:999px;width:auto;max-width:100%}

  /* Stores: each town shows 3 stores until "show all" is tapped (class set by stores-page.js) */
  .st-group.is-short .st-store:nth-child(n+4){display:none}
  .st-more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;height:40px;padding:0 16px;border:1.5px solid var(--grey);border-radius:999px;background:none;font:700 13px/1 var(--font);letter-spacing:.04em;color:var(--grey);cursor:pointer}

  /* Franchise: smaller concept photo, numbers beside the "why" cards */
  .fc__stage{max-width:min(82vw,340px)}
  .fr-why__item{grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:18px}
  .fr-why__num{width:46px;height:46px;font-size:16px}

  /* Privacy: contents become a sticky, swipeable row of section chips */
  .pp-toc{position:sticky;top:84px;z-index:5;max-height:none;margin-inline:calc(var(--pad) * -1);padding:10px var(--pad);background:var(--white);box-shadow:0 10px 20px -16px rgba(60,45,0,.35)}
  .pp-toc__k{display:none}
  .pp-toc ol{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
  .pp-toc ol::-webkit-scrollbar{display:none}
  .pp-toc li{flex:none}
  .pp-toc a{display:flex;gap:6px;white-space:nowrap;padding:8px 12px;border:1.5px solid rgba(77,77,77,.15);border-radius:999px;font-size:12px}
  .pp-toc a[aria-current]{border-color:var(--yellow)}
}

/* Short phones (iPhone SE with its toolbars): drop the scenes' intro lines so the pictures keep some size */
@media (max-width:767px) and (max-height:620px){
  .scenes.is-staged :is(.home-hero,.panel) .lead{display:none}
  .scenes.is-staged .hero-awards{margin-top:4px}
}

/* ==========================================================================
   Tablets only (768–1024px). Phones (≤767px) and desktop (≥1025px) are untouched —
   every rule below lives inside these queries.
   ========================================================================== */
/* Landscape tablets are wide but short: keep the desktop side-by-side scenes so each fits one screen */
@media (min-width:768px) and (max-width:1024px) and (orientation:landscape){
  .menu-split,.stores-split{grid-template-columns:1fr 1fr;gap:40px}
  .fr-panel{grid-template-columns:1.1fr 1fr;gap:40px}
  .fr-panel__img{max-width:none}
  .fr-list{margin:28px 0;gap:20px 24px}
  /* Franchise concepts (pinned): a little tighter so the heading clears the header on a 768px-tall screen */
  #concepts.is-pinned .fr-head .h2{font-size:28px}
  #concepts.is-pinned .fc__panel .concept__num{font-size:44px}
  #concepts.is-pinned .fc__incl li{padding-block:7px}
}
/* Portrait tablets: stacked scenes, with the circles and hero art sized to the screen height */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .menu-stage,.stores-map{width:min(100%,40vh)}
  .hero-art{max-width:min(560px,42vh)}
}
@media (min-width:768px) and (max-width:1024px){
  /* Nothing may push the page sideways (off-screen entrance offsets on Company / Products) */
  html,body{overflow-x:clip}

  /* Page heroes (Company, Products, Franchise, Jobs, Contact): text beside the badge / map, not stacked */
  .co-hero{min-height:0;padding-bottom:clamp(64px,9vw,104px)}
  .co-hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px}
  .co-hero .co-badge,.ct-map{width:100%}

  /* Company philosophy: the photo sits beside the text instead of filling the screen */
  .philosophy__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px}

  /* Products new drinks: the desktop two-column showcase (drink left, details right) */
  .nd{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"stage head" "stage info" "stage thumbs";column-gap:32px}
  .nd__stage,.new-drinks.is-pinned .nd__stage{max-width:none}
  .nd__thumbs,.new-drinks.is-pinned .nd__thumbs{justify-content:flex-start;margin:18px 0 0}
  .new-drinks.is-pinned .new-drinks__head .display{display:block}

  /* Franchise concepts: photo beside the details, rounded tab bar inside the margins */
  .fc__body{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px}
  .fc__stage{max-width:none}
  .fc__tabs{margin-inline:0;border-radius:999px;width:auto;max-width:100%}
  /* Franchise "why": numbers beside the text */
  .fr-why__item{grid-template-columns:auto 1fr;gap:20px;align-items:start}

  /* Stores: each town shows 3 stores until "show all" is tapped (class set by stores-page.js) */
  .st-group.is-short .st-store:nth-child(n+4){display:none}
  .st-more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;height:40px;padding:0 16px;border:1.5px solid var(--grey);border-radius:999px;background:none;font:700 13px/1 var(--font);letter-spacing:.04em;color:var(--grey);cursor:pointer}
}

/* Header dropdown (≤1024px): a thicker line that sits just under the text, not at the bottom of the
   tap padding. Placed last so it also overrides the current-page line defined above. */
@media (max-width:1024px){
  .nav a:hover,.nav button:hover,.nav a[aria-current="page"]{box-shadow:none;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:4px;text-underline-offset:5px;text-decoration-skip-ink:none}
}