/* Fonts served from the site itself (the Greek and Latin pieces Google Fonts would send; unicode-range picks what a page needs) */
@font-face{font-family:"Syne";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/syne-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Syne";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/syne-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Syne";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/syne-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --yellow:#FFCC00; --grey:#4D4D4D; --cream:#F5EDE3; --paper:#FFFCF0; --white:#FFFFFF; --mist:#EEEEEE; --red:#F5333F;
  --ink:var(--grey);
  --font:"Syne",system-ui,sans-serif;
  --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:500;font-size:clamp(30px,3.4vw,62px);line-height:1.08;letter-spacing:-.01em;margin:0 0 24px}
.h3{font-weight:600;font-size:clamp(20px,1.7vw,26px);line-height:1.2;margin:0 0 8px}
.lead{font-weight:400;font-size:clamp(17px,1.5vw,26px);line-height:1.4;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 32px 0 8px;background:rgba(255,252,240,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:999px;box-shadow:0 12px 32px rgba(60,45,0,.12),0 1px 0 rgba(0,0,0,.03)}
.site-header__logo img{width:58px;height:58px;display:block}
.nav{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav a,.nav button{font:500 15px/1 var(--font);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{position:relative;background:var(--yellow) url(/assets/brand/bruno-wordmark.svg) no-repeat center bottom/100% auto;color:var(--grey);padding-block:clamp(56px,7vw,110px) clamp(28px,3vw,48px);font-size:14px}
.site-footer__grid{display:grid;grid-template-columns:auto auto auto;justify-content:center;gap:clamp(40px,11vw,200px)}
.site-footer__grid img{width:56px;height:56px}
.site-footer .lead{display:none}
.site-footer .eyebrow{font-size:12px;letter-spacing:.06em;margin-bottom:12px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.site-footer a{text-decoration:none}.site-footer a:hover{opacity:1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.site-footer__base{margin:clamp(32px,4vw,64px) auto 0;max-width:min(100%,760px);font-size:12px;opacity:.85}
@media (max-width:768px){.site-footer__grid{grid-template-columns:1fr;justify-content:start;gap:28px}}

/* 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:4px var(--grey);paint-order:stroke fill;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 */
.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:var(--yellow)}
.home-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:.86fr 1.14fr;gap:32px;align-items:center;width:100%}
.hero-title{font-family:var(--font);font-weight:500;font-size:clamp(24px,2.8vw,50px);line-height:1.12;letter-spacing:-.01em;margin:0 0 24px;text-wrap:balance}
.hero-title span{display:block;margin-bottom:.14em}
.hero-title mark{display:block;background:none;color:inherit;font-weight:800;font-size:1.3em;line-height:1;letter-spacing:-.015em;overflow-wrap:break-word}
.home-hero .hero-title{font-size:clamp(23px,2.65vw,48px);line-height:1.1;margin:0 0 20px}
.home-hero .hero-title span{margin:0}
.home-hero .hero-title strong{display:block;font-weight:800;font-size:2.7em;line-height:.9;letter-spacing:-.02em;margin:.02em 0 .08em -.04em}
.home-hero .lead{max-width:26ch;font-size:clamp(18px,1.55vw,28px)}
.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 - 160px) * 1.1));aspect-ratio:1062/960;justify-self:center}
.hero-art__layer{position:absolute;will-change:transform}
.hero-art__cups{left:0;top:0;width:100%;height:auto}
.hero-art__split{inset:0;visibility:hidden}
.hero-art__split img{position:absolute;height:auto;max-width:none;will-change:transform}
.hero-awards{display:flex;align-items:center;gap:10px;margin:28px 0}
.hero-awards__badge{height:clamp(34px,3vw,46px);width:auto}
.home-hero .hero__actions{margin-top:28px}
/* smaller laptops: slimmer buttons so both stay on one row beside the picture */
@media (min-width:901px) and (max-width:1180px){.home-hero .hero__actions .btn{padding:0 18px;font-size:13px;letter-spacing:.04em}}
@media (max-width:900px){
  .home-hero__grid{grid-template-columns:1fr}
  .hero-art{width:100%;max-width:560px}
}
/* Portrait tablets: the phone layout, roomier — copy on the left, the cups between it and the buttons */
@media (min-width:641px) and (max-width:900px) and (orientation:portrait){
  .home-hero__grid{gap:0}
  .home-hero__text{display:contents}
  .home-hero .hero-title{font-size:clamp(28px,4.4vw,38px)}
  .home-hero .lead{max-width:34ch}
  .hero-awards{margin:20px 0 0}
  .hero-art{order:1;width:88%;margin-top:20px}
  .home-hero .hero__actions{order:2;margin-top:20px;flex-wrap:nowrap}
  .home-hero .hero__actions .btn{flex:1;justify-content:center}
}
/* Small landscape screens (e.g. a tablet on its side at 900px): text beside the picture, as on desktop */
@media (min-width:769px) and (max-width:900px) and (orientation:landscape){
  .home-hero__grid{grid-template-columns:.86fr 1.14fr}
  .hero-art{width:min(100%,calc((100svh - 160px) * 1.1));max-width:none}
  .home-hero .hero__actions .btn{padding:0 14px;font-size:12px;letter-spacing:.03em}
}

/* 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(--paper);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:var(--yellow)}
.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:76%;max-width:none;max-height:none;inset:-2% 0 2%;filter:none}
.menu-stage__item.is-active{opacity:1;visibility:visible}
.drinks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px}
.drink{font:500 12px/1 var(--font);padding:9px 14px;border-radius:999px;border:1px solid rgba(77,77,77,.55);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(--paper);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:600 12px/1 var(--font);padding:9px 13px;border-radius:999px;border:1px solid rgba(77,77,77,.55);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%)}
.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(--paper);z-index:4}
.unique-head{text-align:center;margin-bottom:clamp(28px,6vh,64px)}
.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%,30vh);aspect-ratio:1;margin:0 auto 28px;border-radius:50%;background:var(--yellow);overflow:hidden}
.u-circle img{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);max-width:none;border-radius:50%;object-fit:cover;transition:transform .8s var(--ease)}
@media (hover:hover){.u-item:hover .u-circle img{transform:scale(1.06)}}

.u-item__body .h3{margin:0 0 4px;font-size:clamp(18px,1.5vw,24px);font-weight:600}
.u-item__body p{margin:0 auto;max-width:24ch;font-size:clamp(15px,1.25vw,19px);line-height:1.4}
.fr-panel{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.fr-list{list-style:none;margin:36px 0;padding:0;display:grid;grid-template-columns:auto auto;justify-content:start;gap:32px clamp(40px,7vw,120px)}
.fr-list li{display:grid;gap:4px}
.fr-list .concept__num{font-size:clamp(44px,4.6vw,80px);line-height:1;letter-spacing:-.01em;margin:0 0 6px;color:var(--white);-webkit-text-stroke:0}
.fr-list strong{font-size:clamp(17px,1.4vw,22px);font-weight:700}
.fr-list li span:last-child{font-size:clamp(15px,1.25vw,19px)}
.fr-panel__img{margin-right:calc(var(--pad) * -1 - max(0px,(100vw - var(--max)) / 2))}
.fr-panel__img img{display:block;width:100%;height:auto;max-width:none}
@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;margin-right:0}}
@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:80vh;width:auto;max-width:100%;margin-left:auto}

/* Closing section: the slogan with three cups floating around it (home.js drifts them on scroll) */
.jbc{position:relative;z-index:1;overflow:hidden;background:var(--yellow);height:clamp(320px,37vw,720px)}
.jbc__title{position:absolute;left:50%;top:40%;width:54%;height:auto;margin:0;translate:-50% -50%}
.jbc__cup{position:absolute;height:auto;will-change:transform}
.jbc__cup--1{left:23%;top:4%;width:12.5%;z-index:0}
.jbc__cup--2{left:46.5%;top:44%;width:9%;z-index:2}
.jbc__cup--3{left:74%;top:40%;width:12.5%;z-index:2}
.jbc__title{z-index:1}
@media (max-width:767px){
  .jbc{height:94vw}
  .jbc__title{width:88%;top:44%}
  .jbc__cup--1{left:8%;top:6%;width:30%}
  .jbc__cup--2{left:40%;top:54%;width:22%}
  .jbc__cup--3{left:66%;top:56%;width:30%}
}

/* ===== 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{margin-bottom:22px}
.e404 .lead{max-width:30ch;margin-bottom:8px}
.e404__art{--code:clamp(120px,12vw,200px);display:grid;justify-items:center}
.e404__code{display:flex;margin:0;font:800 var(--code)/.8 var(--font);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(84px,24vw,150px)}
  .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-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:.25em;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(40px,3.6vw,58px);line-height:1;letter-spacing:-.01em;color:var(--white);-webkit-text-stroke:0}
.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{font-size:clamp(22px,2.6vw,44px);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-weight:500;font-size:clamp(24px,2.8vw,50px);line-height:1.12;letter-spacing:-.01em}
.co-cta__title span{display:block;margin-bottom:.14em}
.co-cta__title strong{display:block;font-weight:800;font-size:1.3em;line-height:1;letter-spacing:-.015em}
.co-cta__slogan{display:block;width:min(100%,clamp(300px,50vw,700px));height:auto}

@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:600 clamp(22px,2vw,30px)/1.2 var(--font);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 .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)}
/* While stuck: the bar's colour continues up behind the nav bar (no strip where the list shows through),
   and the list fades out under it instead of being cut off. The hero and map sit above that cover. */
.st-tools::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:104px;background:inherit}
.st-tools::after{content:"";position:absolute;left:0;right:0;top:100%;height:44px;background:linear-gradient(var(--cream),rgba(245,237,227,0));pointer-events:none}
.locator__hero{position:relative;z-index:6}
.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:600 clamp(22px,2vw,30px)/1.2 var(--font)}
.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;z-index:6}
  .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-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}
/* sized so its longest word ("μιλήσουμε.") fits the text column beside the form at every width */
.fr-apply__title{font-size:clamp(34px,3.6vw,50px);line-height:1;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:600 clamp(24px,2.2vw,32px)/1.2 var(--font)}
.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 */
.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 .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:600 clamp(21px,1.9vw,27px)/1.4 var(--font)}
.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-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(4,minmax(0,1fr));gap:20px}
.ct-card{display:flex;flex-direction:column;gap:8px;padding:14px 14px 22px;border-radius:28px;background:var(--cream);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.ct-card__photo{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:18px;margin-bottom:10px;background:var(--mist)}
.ct-card>:not(.ct-card__photo){margin-inline:8px}
.ct-card__name{margin:0;font-size:clamp(18px,1.45vw,22px);font-weight:600;line-height:1.2}
/* the jobs inbox: one wide card under the people */
.ct-card--jobs{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:22px 20px}
.ct-card--jobs .ct-card__mail{margin-top:0;padding-top:0}
.ct-card--jobs .ct-card__link{margin:0 8px 0 auto}
.ct-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(60,45,0,.1)}
.ct-card__dept{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.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;font-size:16px;line-height:1.4}
.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:400;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:1180px){.ct-card__mail a{font-size:14px}}
@media (max-width:1024px){.ct-team{grid-template-columns:repeat(2,minmax(0,1fr))}.ct-card__mail a{font-size:16px}}
@media (max-width:640px){.ct-team{gap:12px}.ct-card{padding:10px 10px 16px;border-radius:22px}.ct-card>:not(.ct-card__photo){margin-inline:4px}.ct-card__photo{border-radius:14px}.ct-card__role{font-size:14px}.ct-card__dept{font-size:10px;letter-spacing:.1em}.ct-map{width:100%}}

/* Privacy policy */
.pp-top{padding:136px 0 clamp(48px,6vw,80px)}
.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,252,240,.98)}

  /* 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 .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(92vw,480px)}
  .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 .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(600px,47vh)}
}
@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}
}

/* Cookie consent (shown only when the admin has set an analytics ID and switched the banner on) */
.cookie{position:fixed;left:24px;bottom:24px;z-index:60;width:min(440px,calc(100vw - 32px));padding:20px;border-radius:16px;background:var(--white);color:var(--grey);box-shadow:0 20px 50px rgba(0,0,0,.2);font-size:15px;line-height:1.5;animation:cookie-in .4s var(--ease) both}
.cookie p{margin:0 0 14px}
.cookie-link{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;opacity:.85}
.cookie-link:hover{opacity:1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.cookie__btns{display:flex;gap:10px}
.cookie__btns .btn{flex:1;justify-content:center;min-height:44px;padding:0 16px;font-size:13px;cursor:pointer}
@keyframes cookie-in{from{opacity:0;transform:translateY(16px)}}
@media (max-width:640px){.cookie{left:16px;bottom:16px}}
@media (prefers-reduced-motion:reduce){.cookie{animation:none}}

/* Forms: sending state, send error, and the hidden field that catches bots */
.form .btn[disabled]{opacity:.55;cursor:progress}
.form__error{margin:0;padding:14px 16px;border-radius:var(--radius);background:var(--red);color:var(--white);font-weight:700;font-size:15px}
.form__trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* Phones: Syne runs wider than the old typeface, so the stat labels and the long email addresses get a little less room */
@media (max-width:640px){
  .st-stats{flex-wrap:wrap;gap:14px 18px}
  .st-group__title{font-size:21px;overflow-wrap:anywhere}
  .fr-apply__title{font-size:9.5vw}
  .st-stats span{font-size:11px;letter-spacing:.08em}
  .ct-card__mail a{font-size:13px;white-space:normal;overflow-wrap:anywhere}
  .ct-card__mail .ct-copy{display:none}
}

/* Home headings (designer's layout): light lines around one heavy, wide word */
.panel .lead{max-width:30ch}
.stack-title span{display:block}
.stack-title strong{display:block;font-weight:800;font-size:2.15em;line-height:.92;text-transform:uppercase;letter-spacing:-.01em;margin:.04em 0 .1em -.03em}
.stack-title--yellow span{font-weight:800;font-size:.86em;text-transform:uppercase;color:var(--yellow)}
.stack-title--yellow strong{font-size:1.72em;margin-inline:0}
@media (max-width:767px){
  .home-hero .hero-title{font-size:clamp(19px,5.4vw,23px);margin-bottom:10px}
  .home-hero .hero-title strong{font-size:2.5em}
  .scenes.is-staged .panel .h2{font-size:clamp(22px,6.4vw,28px);margin-bottom:10px}
  .scenes.is-staged .hero-awards__badge{height:30px}
  .scenes.is-staged .fr-list{grid-template-columns:1fr 1fr;justify-content:stretch}
  .scenes.is-staged .fr-list li{grid-template-columns:1fr;row-gap:2px}
  .scenes.is-staged .fr-list .concept__num{font-size:28px;grid-row:auto;margin:0 0 2px}
  .scenes.is-staged .fr-panel__img{margin-right:0}
  .scenes.is-staged .fr-panel__img img{width:auto;height:100%;max-width:100%;margin:0 auto;border-radius:0;object-fit:contain}
  .scenes.is-staged .u-circle{width:min(78%,calc(100svh - 380px))}
}
/* Short laptop screens: the franchise scene has the most copy, so it gives up some air */
@media (min-width:769px) and (max-height:780px){
  .scenes.is-staged .fr-list{margin:20px 0;gap:16px clamp(40px,7vw,120px)}
  .scenes.is-staged .fr-list .concept__num{font-size:clamp(36px,3.6vw,56px)}
  .scenes.is-staged .panel--franchise .h2{font-size:clamp(28px,3vw,48px);margin-bottom:14px}
}