@view-transition{navigation:auto}
:root{font-family:'Avenir LT Std','AvenirLTStd-Roman','Avenir','Avenir Next','Helvetica Neue',Helvetica,Arial,sans-serif;color:#171717;background:#fff;font-synthesis:none;--line:#e4e4e4;--muted:#6b6b6b;--ease:cubic-bezier(.22,1,.36,1);--gutter:clamp(24px,4.5vw,80px);--t-page:clamp(46px,6.4vw,96px);--t-detail:clamp(34px,4.4vw,64px);--t-section:clamp(30px,3.3vw,48px);--t-sub:clamp(24px,2.4vw,36px);--t-card:20px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,select,input{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:6px}::selection{background:#171717;color:#fff}header:not(.page-head){height:90px;display:flex;align-items:center;gap:30px;padding:0 var(--gutter);position:sticky;top:0;z-index:10;background:#ffffffed;border-bottom:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.mark{font-size:36px;font-weight:500;line-height:1;letter-spacing:-3px;margin-right:18px;transition:transform .5s var(--ease)}.mark:hover{transform:rotate(-12deg)}nav{display:flex;gap:clamp(16px,2vw,32px)}nav a,.country,#language,#menu{font-size:14px;letter-spacing:.015em}nav a{position:relative;padding:12px 0;color:#555}nav a:after{content:'';position:absolute;bottom:4px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}nav a:hover:after,nav a[aria-current=page]:after{transform:scaleX(1);transform-origin:left}nav a[aria-current=page]{color:#111}.country{margin-left:auto;font-size:12px;letter-spacing:.13em}#language{min-width:42px;min-height:42px;border:1px solid #ddd;border-radius:50%;font-size:12px;transition:background .25s,color .25s}#language:hover{background:#171717;color:white}#menu{display:none}body.home{padding:12px}body.home header{position:absolute;inset:12px 12px auto;height:90px;color:#fff;background:linear-gradient(#0005,transparent);border:0;backdrop-filter:none;-webkit-backdrop-filter:none}body.home nav a{color:#fff}body.home #language{border-color:#ffffff70}.hero{height:calc(100svh - 24px);min-height:620px;position:relative;background:#777;overflow:hidden;color:white}.hero-photo{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;animation:photo-in 1.5s var(--ease) both}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0002 0%,transparent 28%,#0001 48%,#0009 100%);pointer-events:none}.identity{position:absolute;z-index:1;left:var(--gutter);bottom:clamp(70px,12vh,130px);text-align:left;animation:arrive 1s .12s var(--ease) both}.identity img{width:clamp(270px,33vw,480px);height:auto}.identity p{font-size:12px;letter-spacing:.3em;margin:30px 0 0}.hero-caption{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:28px;display:flex;justify-content:space-between;align-items:end;font-size:12px;letter-spacing:.06em;gap:24px}.hero-caption span{color:#ffffffc7}.hero-caption a{display:flex;align-items:center;gap:32px;font-size:14px;border-bottom:1px solid #fff7;padding:12px 0}.hero-caption a b{font-weight:400;transition:transform .4s var(--ease)}.hero-caption a:hover b{transform:translate(3px,-3px)}.page{max-width:1560px;margin:auto;padding:clamp(48px,7vw,112px) var(--gutter) 120px;min-height:calc(100svh - 230px)}h1{font-size:var(--t-page);font-weight:400;line-height:1.03;letter-spacing:-.065em;margin:0 0 clamp(48px,6vw,90px);text-wrap:balance}h1:empty{display:none}h2{font-weight:400;font-size:var(--t-sub);line-height:1.25;letter-spacing:-.035em;text-wrap:balance}p{font-size:16px;line-height:1.85}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:12px;color:var(--muted)}.split{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,8vw,130px);align-items:start}.split>img{width:100%;aspect-ratio:4/5;object-fit:cover}.prose{max-width:620px}.prose p{margin:0 0 26px;color:#555}.prose h2{margin-top:22px;margin-bottom:36px}.textlink{display:inline-flex;align-items:center;gap:20px;border-bottom:1px solid #222;padding:14px 0;font-size:14px;margin-top:16px;transition:color .25s,transform .4s var(--ease)}.textlink:hover{color:#6f6f6f;transform:translateX(3px)}.footer{border-top:1px solid var(--line);margin:0 var(--gutter);padding:36px 0 48px;display:flex;align-items:baseline;justify-content:space-between;gap:25px;font-size:12px;letter-spacing:.07em;color:var(--muted)}.filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 48px;padding:14px 0;position:sticky;top:90px;z-index:6;background:#fffffff2;border-bottom:1px solid transparent;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.filters button{padding:12px 22px;border:1px solid var(--line);border-radius:28px;font-size:14px;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}.filters button:hover{border-color:#171717}.filters button.active{background:#171717;color:#fff;border-color:#171717}.locations-intro{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-top:calc(-1 * clamp(30px,4vw,62px));padding-bottom:32px;border-bottom:1px solid var(--line)}.locations-intro .eyebrow{margin:0}.locations-intro>p:last-child{max-width:490px;margin:0;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 32px}.store{display:block;min-width:0;content-visibility:auto;contain-intrinsic-size:auto 640px}.store .image-wrap{overflow:hidden;aspect-ratio:3/2;background:#f4f4f4}.store img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}.store:hover img{transform:scale(1.025)}.store-copy{padding-top:18px;border-top:1px solid var(--line)}.store h2{font-size:var(--t-card);line-height:1.25;margin:0 0 22px;letter-spacing:-.035em}.store-facts{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid var(--line);padding:18px 0}.store-facts span{display:block;margin-bottom:7px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6f6f6f}.store-facts p{margin:0;font-size:13px;line-height:1.55;white-space:pre-line}.store-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#f3f3f1;color:#171717}.store-placeholder span{font-size:clamp(64px,9vw,130px);font-weight:300;letter-spacing:-.12em;line-height:.8}.store-placeholder small{max-width:80%;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-align:center}.detail-placeholder{min-height:560px}.store-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:13px;color:var(--muted)}.store-meta a{color:#171717;border-bottom:1px solid #999;padding:7px 0;white-space:nowrap;transition:color .25s,border-color .25s}.store-meta a:hover{color:#6f6f6f;border-color:#171717}.store-actions{display:flex;align-items:center;gap:18px}.store-mainlink{display:block}.store-mainlink:focus-visible{outline-offset:5px}.location-detail-head{max-width:1180px}.detail-back{display:inline-block;margin-bottom:54px;font-size:13px;border-bottom:1px solid #aaa;padding-bottom:8px}.location-detail-head h1{max-width:1200px;margin-bottom:55px;font-size:var(--t-detail)}.location-hero{aspect-ratio:16/8;max-height:none}.location-hero.portrait{height:min(72vw,860px);aspect-ratio:auto;object-fit:contain;background:#f3f3f1}.location-detail-grid{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.55fr);gap:clamp(60px,10vw,160px);padding:72px 0 20px;align-items:start}.location-detail-grid aside{position:sticky;top:125px}.location-detail-grid.no-story{display:block;max-width:620px}.location-detail-grid.no-story aside{position:static}.location-detail-grid .store-facts{grid-template-columns:1fr;padding:24px 0}.location-story{max-width:780px}.location-story>.eyebrow{margin:0 0 34px}.location-story>p:not(.eyebrow):not(.location-credit){font-size:clamp(18px,1.55vw,24px);line-height:1.75;letter-spacing:-.015em;margin:0 0 28px;color:#333}.location-credit{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.09em;color:var(--muted)}.wide{display:block;width:100%;max-height:720px;object-fit:cover}.film{aspect-ratio:16/9;width:100%;border:0;background:#111}.career-intro{max-width:1050px;margin:0 auto 80px;text-align:center}.career-intro h1{font-size:var(--t-page);line-height:1.02;margin:35px 0}.career-intro p:not(.eyebrow){max-width:500px;margin:24px auto;color:var(--muted)}.career-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:42px;min-width:238px;margin-top:24px;padding:17px 20px;background:#171717;border:1px solid #171717;color:#fff;font-size:14px;text-align:left;transition:background .25s,color .25s,transform .4s var(--ease)}.career-cta:hover{background:#fff;color:#171717;transform:translateY(-2px)}.career-cta span{font-size:16px}.career-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;margin:80px 0 120px;counter-reset:pillars}.career-columns>div{border-top:1px solid var(--line);padding-top:24px;counter-increment:pillars}.career-columns>div:before{content:'0' counter(pillars);font-size:12px;color:#6f6f6f}.career-columns p{color:var(--muted)}.notice{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;margin-top:30px;max-width:900px}.notice h2{margin-top:0}.contact-email{margin:30px 0 0;font-size:clamp(17px,1.6vw,21px);letter-spacing:-.01em}.contact-email a{border-bottom:1px solid #999;padding-bottom:6px;transition:color .25s,border-color .25s}.contact-email a:hover{color:#6f6f6f;border-color:#171717}.contact-note{color:var(--muted)}.contact-list{display:flex;flex-direction:column}.contact-list a{padding:28px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;transition:padding .4s var(--ease)}.contact-list a:hover{padding-left:12px}.detail-info{max-width:750px;margin-top:40px}.detail-info p{white-space:pre-line}.small{font-size:13px;color:var(--muted);margin-top:35px}.language-th{line-height:1.6}html[lang=th] h1{letter-spacing:-.025em;line-height:1.3}.reveal-pending{opacity:0;transform:translateY(22px)}.reveal-visible{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease)}.skip-link{position:fixed;top:12px;left:12px;transform:translateY(-180%);background:#fff;color:#111;padding:12px 20px;z-index:100}.skip-link:focus{transform:none}.menu-open{overflow:hidden}@keyframes photo-in{from{transform:scale(1.035)}to{transform:scale(1)}}@keyframes arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}::view-transition-old(root){animation:fade-out .18s ease both}::view-transition-new(root){animation:arrive .4s var(--ease) both}@keyframes fade-out{to{opacity:0}}@media(min-width:1600px){.hero-photo{object-position:center 44%}}@media(max-width:1050px){header:not(.page-head){gap:18px}nav{gap:16px}.country{display:none}.mark{margin-right:8px}#language{margin-left:auto}.split{gap:40px}}@media(max-width:800px){header:not(.page-head){height:78px}#menu{display:block;margin-left:auto;min-height:44px}#language{margin-left:0}nav{display:flex;visibility:hidden;opacity:0;transform:translateY(-10px);position:fixed;top:78px;left:0;right:0;height:calc(100dvh - 78px);overflow:auto;background:#fff;color:#111;padding:32px var(--gutter) 80px;flex-direction:column;gap:14px;transition:opacity .3s,transform .4s var(--ease),visibility .3s;pointer-events:none}nav.open{visibility:visible;opacity:1;transform:none;pointer-events:auto}nav a,body.home nav a{font-size:clamp(28px,6vw,42px);color:#171717;padding:12px 0;letter-spacing:-.03em}body.home header{height:78px}body.home nav{top:90px;height:calc(100dvh - 90px)}body.menu-open header{background:white;color:#171717}body.menu-open #language{border-color:#ddd}.hero{min-height:560px}.identity{bottom:145px}.identity img{width:280px}.identity p{margin-top:22px}.hero-caption{bottom:24px;align-items:start;flex-direction:column;gap:8px}.hero-caption a{gap:50px}.hero-photo{object-position:51% center}.page{padding-top:44px;padding-bottom:75px}.split{grid-template-columns:1fr;gap:40px}.location-detail-grid{grid-template-columns:1fr;gap:50px;padding-top:50px}.location-detail-grid aside{position:static}.location-story>p:not(.eyebrow):not(.location-credit){font-size:18px}.location-hero.portrait{height:min(125vw,760px)}.split>img{aspect-ratio:4/3}.locations-intro{align-items:flex-start;flex-direction:column;gap:14px;margin-top:-22px}.grid{gap:48px 22px}.store h2{font-size:17px}.store-meta{align-items:flex-start;flex-direction:column;gap:7px}.career-columns{grid-template-columns:1fr;gap:30px;margin:55px 0 75px}.career-columns h2{margin-bottom:12px}.footer{flex-wrap:wrap;line-height:1.7}.footer>span:last-child{flex-basis:100%}}@media(max-width:800px){.filters{top:78px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);-webkit-overflow-scrolling:touch;margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter);border-bottom-color:var(--line)}.filters button{scroll-snap-align:center}.filters::-webkit-scrollbar{display:none}}@media(max-width:540px){body.home{padding:8px}body.home header{inset:8px 8px auto}.hero{height:calc(100svh - 16px)}.grid{grid-template-columns:1fr}.store-meta{align-items:flex-start;flex-direction:column}.store-actions{width:100%;justify-content:space-between}.store-facts{grid-template-columns:1fr}.detail-placeholder{min-height:380px}.filters{gap:7px}.filters button{padding:10px 15px}.career-intro{margin-bottom:50px}.hero-caption span{font-size:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal-pending{opacity:1;transform:none}::view-transition-old(root),::view-transition-new(root){animation:none!important}}

/* Official outlined brand assets supplied by the brand team. */
.mark .brand-mark{display:block;width:30px;height:32px;object-fit:contain}.brand-lockup{display:flex;flex-direction:column;align-items:center;gap:14px;width:clamp(270px,33vw,480px)}.identity .brand-lockup img{display:block;width:100%;height:auto;filter:brightness(0) invert(1)}.identity .brand-lockup .brand-wordmark{width:78%}.home-footer>a .brand-mark{width:50px;height:auto;display:block}.footer-tagline{display:block;width:min(330px,100%);height:auto}

/* Consistent uppercase English navigation across every route. */
html[lang=en] header nav a{text-transform:uppercase;letter-spacing:.06em}

.jobs-page{max-width:1180px;margin:0 auto}.jobs-heading{margin:10px 0 64px}.jobs-heading .eyebrow{margin:0 0 22px}.jobs-heading h1{font-size:var(--t-page);line-height:.92;margin:0 0 34px}.jobs-heading>p:last-child{max-width:650px;color:var(--muted);margin:0}.jobs-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.11em;text-transform:uppercase}.jobs-toolbar span:last-child{color:var(--muted)}.jobs-group{margin-top:68px}.jobs-group-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:22px}.jobs-group-heading h2{font-size:var(--t-sub);margin:0}.jobs-group-heading span{font-size:12px;letter-spacing:.12em;color:var(--muted)}.job-card{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(180px,.75fr) minmax(150px,.55fr);gap:32px;align-items:center;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.job-type{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}.job-card h3{font-size:var(--t-card);font-weight:400;letter-spacing:-.035em;margin:0}.job-meta{display:flex;flex-direction:column;gap:8px;font-size:14px}.job-status{font-size:13px;line-height:1.6;color:var(--muted);margin:0}.jobs-note{max-width:720px;margin:88px 0 10px;padding-top:30px;border-top:1px solid var(--line)}.jobs-note p{margin:0;color:var(--muted)}@media(max-width:800px){.jobs-heading{margin-bottom:44px}.jobs-group{margin-top:48px}.job-card{grid-template-columns:1fr;gap:20px}.job-meta{flex-direction:row;flex-wrap:wrap;gap:10px 24px}.job-status{max-width:320px}.jobs-note{margin-top:64px}}

/* Coffee discovery rail on store detail pages. */
.location-coffees{margin-top:clamp(80px,10vw,150px);padding-top:42px;border-top:1px solid var(--line)}.location-coffees-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:38px}.location-coffees-head h2{font-size:var(--t-section);line-height:1.05;letter-spacing:-.045em;margin:0}.location-coffees-head .textlink{margin-top:20px}.coffee-controls{display:flex;gap:8px}.coffee-controls button{width:48px;height:48px;border:1px solid #ccc;border-radius:50%;font-size:18px;transition:background .25s,color .25s,border-color .25s}.coffee-controls button:hover{background:#171717;color:#fff;border-color:#171717}.coffee-controls button:disabled{opacity:.28;cursor:default;background:transparent;color:#171717;border-color:#ccc}.coffee-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,31%);gap:24px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline mandatory;scrollbar-width:none;padding:0 0 22px}.coffee-rail::-webkit-scrollbar{display:none}.coffee-card{min-width:0;scroll-snap-align:start}.coffee-visual{aspect-ratio:1;background:#f5f5f3;overflow:hidden}.coffee-visual img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply;transition:transform .7s var(--ease)}.coffee-card:hover img{transform:scale(1.045)}.coffee-card>p{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:16px 0 6px}.coffee-card h3{font-size:var(--t-card);font-weight:400;line-height:1.35;letter-spacing:-.025em;margin:0 0 9px}.coffee-card>span{font-size:14px;color:var(--muted)}.location-coffee-progress{height:1px;background:var(--line);margin-top:20px;overflow:hidden}.location-coffee-progress span{display:block;width:100%;height:100%;background:#171717;transform:scaleX(.12);transform-origin:left;transition:transform .35s var(--ease)}html[lang=th] .location-coffees-head h2{letter-spacing:0}@media(max-width:800px){.location-coffees{margin-top:75px}.location-coffees-head{align-items:flex-start}.location-coffees-head h2{font-size:var(--t-section)}.coffee-rail{grid-auto-columns:minmax(250px,72%);gap:16px}.location-coffee-progress{margin-top:12px}}@media(max-width:520px){.coffee-controls{display:none}.coffee-rail{grid-auto-columns:84%}}
.footer-social{display:flex;flex-wrap:wrap;gap:8px 24px}.footer-social a{color:var(--muted);padding:0 0 2px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}.footer-social a:hover{color:#171717;border-color:#171717}.page-head{padding-bottom:30px;border-bottom:1px solid var(--line);margin-bottom:clamp(44px,5vw,72px)}.page-head .eyebrow{margin:0 0 20px}.page-head h1{margin:0}.page-intro{max-width:620px;color:var(--muted);margin:26px 0 0}.page-head .career-cta{margin-top:30px}.store-copy{position:relative;padding-top:18px}.store-copy .eyebrow{margin:0 0 12px}.store .store-copy h2{margin:0 0 10px;max-width:calc(100% - 40px)}.store-line{font-size:14px;line-height:1.6;color:var(--muted);margin:0}.store-arrow{position:absolute;right:0;top:20px;font-size:18px;color:#171717;transition:transform .35s var(--ease)}.store:hover .store-arrow{transform:translate(3px,-3px)}.grid.locations-grid{gap:78px 36px}.location-hero{aspect-ratio:2.2}.wide{aspect-ratio:2.2;max-height:none}.location-hero.portrait{aspect-ratio:auto}.film-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px 36px}.film-item{min-width:0}.film-poster{display:block;width:100%;aspect-ratio:16/9;background:#f2f1ee;border:0;padding:0;position:relative;overflow:hidden;cursor:pointer;color:#171717;transition:background .5s var(--ease),color .5s var(--ease)}
.film-poster:hover{background:#171717;color:#fff}
.film-no{position:absolute;top:16px;left:18px;font-size:12px;letter-spacing:.16em;color:currentColor;opacity:.55}
.film-subject{position:absolute;left:18px;bottom:14px;right:18px;text-align:left;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:currentColor;opacity:.55;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.film-poster:hover .film-no,.film-poster:hover .film-subject{opacity:.75}.film-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#171717;opacity:1;transition:transform .5s var(--ease),opacity .3s}
.film-play svg{width:52px;height:52px}
.film-play circle{fill:none;stroke:currentColor;stroke-width:1}
.film-play path{fill:currentColor}.film-poster:hover .film-play{transform:scale(1.14);opacity:1}.film-copy{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-top:16px}.film-copy h2{font-size:var(--t-card);margin:0}.film-copy .textlink{margin-top:0;flex-shrink:0}.coffee-card{display:flex;flex-direction:column}.coffee-card h3{min-height:2.7em;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}html[lang=th] .coffee-card>p{letter-spacing:0}@media(max-width:800px){.film-grid{grid-template-columns:1fr;gap:40px}.grid.locations-grid{gap:52px 22px}.page-head{margin-bottom:38px;padding-bottom:24px}.page-intro{margin-top:20px}}.page>.career-cta{margin-bottom:60px}.page-head.jobs-heading h1{margin:0}.page-head.jobs-heading>p:last-child{margin:26px 0 0}.page-head.jobs-heading{margin-bottom:clamp(44px,5vw,72px)}@media(max-width:540px){.film-copy{flex-direction:column;align-items:flex-start;gap:4px}.film-copy .textlink{margin-top:6px}}
/* mobile refinement 2026-09-24 */
.city-group{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:0;font-weight:400;font-size:13px;letter-spacing:.14em;text-transform:uppercase;border-top:1px solid #171717;padding-top:13px}
.city-group span:last-child{color:var(--muted);letter-spacing:.1em;font-size:12px}
.locations-grid .city-group+.store{margin-top:-6px}
html[lang=th] .city-group{text-transform:none;letter-spacing:.02em;font-size:15px}
html[lang=th] h2{line-height:1.35}
html[lang=th] .eyebrow{font-size:13px;letter-spacing:.1em}
html[lang=th] .footer,html[lang=th] .store-line{font-size:13px}
@media(max-width:800px){
 header:not(.page-head),body.home header{height:58px}
 .mark{font-size:28px;display:inline-flex;align-items:center;min-height:44px;margin-right:0}
 nav,body.home nav{top:58px;height:calc(100dvh - 58px)}
 .filters{top:58px}
 html{scroll-padding-top:86px}
 .store h2{font-size:20px;line-height:1.3;margin-bottom:16px}
 .store-line{font-size:12px}
 .locations-grid{gap:34px 22px}
 .locations-grid .city-group{margin-top:12px}
 .detail-back,.contact-email a,.footer a,.footer-social a,.textlink{display:inline-flex;align-items:center;min-height:44px}
 .footer{row-gap:0}
 .contact-list a{padding:22px 0}
 #language{min-width:44px;min-height:44px}
 .filters button{min-height:44px;padding-top:0;padding-bottom:0}
 .store-facts a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px}
}
/* inline arrow glyphs (iOS renders ↗ ↓ → as emoji; these are drawn) */
.ar{display:inline-block;margin-left:.3em;width:.7em;height:.7em;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:square;vertical-align:-.02em;flex:none}
.ar path{vector-effect:non-scaling-stroke}
.ar-ne{transform:rotate(-45deg)}
.ar-l{transform:rotate(180deg)}
.ar-d{transform:rotate(90deg)}
.store-arrow .ar,.place-caption>span .ar{width:.78em;height:.78em}
.store-arrow .ar,.place-caption>span .ar,button>.ar,.coffee-controls .ar{margin-left:0}
/* legal pages 2026-09-25 */
.legal-page{max-width:760px}
.legal-page .page-head{margin-bottom:clamp(36px,4vw,56px)}
.legal-copy h2{font-size:17px;letter-spacing:-.01em;margin:44px 0 14px;line-height:1.4}
.legal-copy h2:first-child{margin-top:0}
.legal-copy p{font-size:15px;line-height:1.85;margin:0 0 16px;color:#454545}
html[lang=th] .legal-copy p{line-height:1.95}
html[lang=th] .legal-copy h2{line-height:1.5}
.legal-version{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.06em;color:var(--muted)}
@media(max-width:800px){.film-grid{grid-template-columns:1fr;gap:40px}.film-play svg{width:44px;height:44px}.film-subject{font-size:12px;letter-spacing:.12em}}
html[lang=th] .film-subject{letter-spacing:.06em}
/* social icons: drop official brand SVGs into /assets/social/<name>.svg and add
   class="has-icon" to the link — the text label stays for screen readers. */
.footer-social a.has-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0}
.footer-social a.has-icon img,.footer-social a.has-icon svg{width:18px;height:18px;display:block;opacity:.72;transition:opacity .25s}
.footer-social a.has-icon:hover img,.footer-social a.has-icon:hover svg{opacity:1}
.footer-social a.has-icon .social-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.footer-social:has(a.has-icon){gap:4px}
/* job listings 2026-09-25 */
.ar-u{transform:rotate(-90deg)}
.job-actions{display:flex;justify-content:flex-end}
.job-toggle{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:13px;letter-spacing:.02em;border-bottom:1px solid #aaa;padding:0 0 2px;transition:color .25s,border-color .25s}
.job-toggle:hover{color:#6f6f6f;border-color:#171717}
.job-detail{padding:4px 0 38px;max-width:760px}
.job-intro{font-size:16px;line-height:1.8;color:#454545;margin:0 0 30px}
.job-section{margin-bottom:26px}
.job-section h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400;margin:0 0 12px}
.job-section ul{margin:0;padding-left:18px}
.job-section li{font-size:15px;line-height:1.75;color:#454545;margin-bottom:9px}
html[lang=th] .job-section h4{letter-spacing:.04em;text-transform:none;font-size:13px}
html[lang=th] .job-section li,html[lang=th] .job-intro{line-height:1.95}
@media(max-width:800px){
 .job-actions{justify-content:flex-start}
 .job-detail{padding-bottom:30px}
 .job-section li{font-size:14px}
}
.job-note{margin:10px 0 0;font-size:13px;color:#171717;border-bottom:1px solid var(--line);display:inline-block;padding-bottom:3px}
/* ---- application form ---- */
.apply-page{max-width:640px}
.apply-form{margin-top:44px}
.fld{margin-bottom:34px}
.fld>label,.fld-label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
html[lang=th] .fld>label,html[lang=th] .fld-label{letter-spacing:.04em;text-transform:none;font-size:13px}
.fld-note{margin:8px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.fld input[type=text],.fld input[type=tel],.fld input[type=email],.fld select,.fld textarea{display:block;width:100%;margin-top:14px;padding:12px 0;border:0;border-bottom:1px solid var(--line);background:none;font-size:16px;border-radius:0;transition:border-color .25s}
.fld select{appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%236b6b6b' stroke-width='1.15'%3E%3Cpath d='M1.6 4.6 7 10l5.4-5.4'/%3E%3C/svg%3E") right center/12px no-repeat;padding-right:24px}
.fld textarea{resize:vertical;line-height:1.55}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-bottom-color:#171717}
.fld input.bad,.fld select.bad,.fld textarea.bad{border-bottom-color:#b00020}
.fld input[type=file]{margin-top:14px;font-size:14px;color:var(--muted);max-width:100%}
.fld input[type=file]::file-selector-button{font:inherit;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:10px 18px;margin-right:16px;border:1px solid var(--line);background:none;color:#171717;cursor:pointer;transition:background .25s,color .25s}
.fld input[type=file]::file-selector-button:hover{background:#171717;color:#fff;border-color:#171717}
.chk-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,max-content));gap:14px 34px;margin-top:18px}
.chk{display:inline-flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5;cursor:pointer;min-height:32px}
.chk input{width:16px;height:16px;margin:3px 0 0;accent-color:#171717;flex:none}
.consent{margin:8px 0 0;align-items:flex-start;color:var(--muted);font-size:14px}
.consent a{border-bottom:1px solid var(--line)}
.consent a:hover{border-bottom-color:#171717;color:#171717}
.apply-foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.apply-send{border:1px solid #171717;background:#171717;color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:16px 40px;min-height:52px;transition:background .25s,color .25s}
html[lang=th] .apply-send{letter-spacing:.04em;text-transform:none;font-size:15px}
.apply-send:hover{background:none;color:#171717}
.apply-send:disabled{opacity:.45;cursor:default;background:#171717;color:#fff}
.apply-status{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
.apply-status.is-err{color:#b00020}
.apply-done h2{font-size:var(--t-sub);font-weight:400;margin:0}
.apply-done p{max-width:520px;color:var(--muted);margin:18px 0 0;line-height:1.6}
@media(max-width:800px){.chk-row{grid-template-columns:1fr 1fr;gap:12px 16px}.apply-form{margin-top:34px}.fld{margin-bottom:30px}.apply-send{width:100%}.apply-foot{margin-top:36px}}
.fld-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:20px}
.fld-trio label{display:block;font-size:13px;color:var(--muted)}
.fld-trio input{display:block;width:100%;margin-top:8px;padding:10px 0;border:0;border-bottom:1px solid var(--line);background:none;font-size:16px;border-radius:0;transition:border-color .25s}
.fld-trio input::placeholder{color:#c4c4c4}
.fld-trio input:focus{outline:0;border-bottom-color:#171717}
@media(max-width:800px){.fld-trio{grid-template-columns:1fr;gap:20px}}

/* ─── Mobile menu icon (2026-09-26) ──────────────────────────────────────
   arabica.com puts a three-line icon in the top-left corner, before the
   mark, and never spells out the word. The button keeps an aria-label, so
   the control still announces itself to a screen reader; only the visible
   word is gone. Three lines out of one element: the two edges are the
   pseudo-elements, the middle is the element's own background. */
#menu .burger{display:block;position:relative;width:20px;height:13px;
  background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat}
#menu .burger:before,#menu .burger:after{content:'';position:absolute;left:0;right:0;
  height:1.5px;background:currentColor;
  transition:transform .3s var(--ease),top .3s var(--ease),bottom .3s var(--ease)}
#menu .burger:before{top:0}
#menu .burger:after{bottom:0}
#menu[aria-expanded="true"] .burger{background-image:none}
#menu[aria-expanded="true"] .burger:before{top:6px;transform:rotate(45deg)}
#menu[aria-expanded="true"] .burger:after{bottom:5.5px;transform:rotate(-45deg)}
@media(max-width:800px){
  /* the icon leads the header, as it does on arabica.com */
  #menu{order:-1;margin-left:0;margin-right:2px;min-width:44px;
    display:flex;align-items:center;justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
  #menu .burger:before,#menu .burger:after{transition:none}
}

/* ─── Careers photo strip (2026-09-26) ───────────────────────────────────
   The idea is borrowed from arabica.com/en/careers/ — a row of photographs
   butted edge to edge, the set duplicated so it loops — but not its
   full-bleed width. Every other page on this site (locations' 637x425
   cards, shop's 418x418 tiles, philosophy's columns) lives inside the same
   1560px measure and starts at the same left edge as the H1 and eyebrow.
   A strip that ran to the viewport edge would be the only element on the
   site that broke that, so it is held to the measure instead.

   Cell proportion is theirs: 310x245. Width is set so roughly four and a
   half cells show, as they do at 1440, and is capped once the measure stops
   growing at 1560. */
.career-strip{overflow:hidden;margin:clamp(40px,5vw,72px) 0;
  --cell:min(21.5vw,(1560px - 2*clamp(24px,4.5vw,80px))/4.5)}
.career-track{display:flex;width:max-content;animation:career-strip 52s linear infinite}
.career-strip img{display:block;flex:0 0 auto;width:var(--cell);
  aspect-ratio:310/245;object-fit:cover}
@keyframes career-strip{to{transform:translateX(-50%)}}
.career-strip:hover .career-track{animation-play-state:paused}
/* only phones need the bigger cell; at tablet widths the default formula
   still shows four-and-a-bit cells, which is the rhythm the desktop has */
@media(max-width:600px){
  .career-strip{--cell:52vw}
  .career-track{animation-duration:34s}
}
/* the strip is decoration in motion; hold it still when that is not wanted */
@media(prefers-reduced-motion:reduce){
  .career-track{animation:none}
  .career-strip{overflow-x:auto}
}

/* ─── Locations: nearest-to-me (2026-09-26) ──────────────────────────────
   A sort, not a filter, so it sits apart from the city buttons rather than
   among them. Nothing requests a location until it is pressed. */
.locations-sort{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin:0 0 26px}
#nearest{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:none;
  color:#333;cursor:pointer;transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
/* the hover rule must not outrank the pressed state: the pointer is still on
   the button right after the click, and #nearest:hover:not(:disabled) (1,2,0)
   beats #nearest.active (1,1,0), which left the label dark on black */
#nearest:hover:not(:disabled):not(.active){border-color:#999;color:#111}
#nearest.active{background:#171717;border-color:#171717;color:#fff}
#nearest.active:hover{background:#000;border-color:#000;color:#fff}
#nearest:disabled{opacity:.55;cursor:default}
.geo-note{font-size:12px;color:var(--muted);letter-spacing:.02em}
.store-distance{float:right;color:var(--muted);margin-right:40px}
html[lang=th] #nearest{letter-spacing:.04em;text-transform:none;font-size:13px}
html[lang=th] .geo-note{letter-spacing:0}
@media(max-width:600px){
  .locations-sort{margin-bottom:20px}
  #nearest{padding:9px 15px}
}
@media(prefers-reduced-motion:reduce){#nearest{transition:none}}

/* ─── Mobile header arrangement, matched to arabica.com (2026-09-26) ─────
   Measured from their phone screenshot: the menu icon sits at the left
   gutter with the mark immediately after it, and Instagram sits at the
   right gutter. Ours had all four controls bunched in the left half, with
   Instagram floating at 62% of the width.

   The menu button keeps a 44px-high target and is narrowed to 32px so the
   icon and the mark read as one group rather than two. */
@media(max-width:800px){
  header:not(.page-head){gap:10px}
  #menu{order:-1;margin:0;min-width:0;width:32px;height:44px;
    display:flex;align-items:center;justify-content:flex-start}
  /* everything from the language toggle rightwards goes to the far edge */
  #language{margin-left:auto}
}

/* The header Instagram link was sized only in home.css, which the other 68
   pages never load — they rendered a bare 22px image with no tap target.
   Its sizing belongs with the rest of the shared header. */
.header-ig{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex-shrink:0}
.header-ig img{width:20px;height:20px;display:block}

/* WCAG 2.2 SC 2.5.8 target size on desktop.
   The min-height:44px rule above is inside @media(max-width:800px), so on
   desktop these links were 14-17px tall. Vertical padding was tried first
   and rejected: it grew the footer 102 -> 112px and the homepage hero bar
   44 -> 56px, eating 12px of the one-screen hero.
   An absolutely positioned ::before takes no layout space at all. It is
   expanded vertically only -- every one of these links is already wider
   than 24px, and horizontal expansion would overlap the neighbour in the
   same row. */
.footer a,.footer-social a,.contact-email a,.detail-back,.textlink,.chk a,a[href^="tel:"]{position:relative}
.footer a:before,.footer-social a:before,.contact-email a:before,.detail-back:before,
.textlink:before,.chk a:before,a[href^="tel:"]:before{content:"";position:absolute;inset:-5px 0}
/* A film tile with a real still: the frame fills the tile and the number,
   subject and play mark sit over it. Tiles without a still are unchanged. */
.film-poster{position:relative;overflow:hidden}
.film-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-poster.has-still .film-no,.film-poster.has-still .film-subject{z-index:1;color:#fff;opacity:.85}
.film-poster.has-still:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0006,#0000 38%,#0000 62%,#0006)}
.film-poster.has-still .film-play{z-index:2}
.film-poster.has-still .film-play svg circle{fill:#ffffff26;stroke:#fff}
.film-poster.has-still .film-play svg path{fill:#fff}

html[lang=en] #language{font-size:13px}

/* brewing guide on bean product pages 2026-10-02 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.brewing{margin-top:clamp(56px,7vw,96px);padding-top:26px;border-top:1px solid var(--line)}
.brewing-head{margin:0 0 10px;font-size:12px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.brewing-intro{margin:0 0 30px;font-size:14px;color:var(--muted);max-width:620px}
.brewing-scroll{overflow-x:auto;scrollbar-width:none}
.brewing-scroll::-webkit-scrollbar{display:none}
.brewing-table{width:100%;border-collapse:collapse;font-size:14px;min-width:540px}
.brewing-table th,.brewing-table td{text-align:left;padding:15px 22px 15px 0;border-top:1px solid var(--line);font-weight:400;white-space:nowrap;vertical-align:baseline}
.brewing-table thead th{border-top:0;padding-top:0;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.brewing-table tbody th{color:#171717}
.brewing-table td{color:#575757}
html[lang=th] .brewing-head{letter-spacing:.06em}
html[lang=th] .brewing-table thead th{letter-spacing:0;text-transform:none;font-size:13px}
@media(max-width:800px){
 .brewing-scroll{overflow:visible}
 .brewing-table{min-width:0;display:block}
 .brewing-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .brewing-table tbody,.brewing-table tr,.brewing-table th,.brewing-table td{display:block}
 .brewing-table tr{border-top:1px solid var(--line);padding:18px 0 6px}
 .brewing-table tbody th{border:0;padding:0 0 12px;font-size:16px}
 .brewing-table td{border:0;padding:0 0 9px;display:flex;justify-content:space-between;gap:18px;white-space:normal}
 .brewing-table td:before{content:attr(data-label);color:var(--muted);font-size:13px;flex:0 0 auto}
}

button.textlink{background:none;border:0;border-bottom:1px solid #222;border-radius:0;color:inherit;font:inherit;font-size:14px;cursor:pointer;padding:14px 0}
.delivery{margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}.delivery-links{display:flex;flex-direction:column;gap:12px;margin-top:16px}.delivery-links a{border:1px solid #202020;padding:17px 20px;display:flex;justify-content:space-between;align-items:center;font-size:14px;transition:background .25s,color .25s,opacity .25s}.delivery-links a:first-child{color:#fff;background:#171717}.delivery-links a:first-child:hover{opacity:.76}.delivery-links a:not(:first-child):hover{background:#171717;color:#fff}