@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root{--ink:#191919;--muted:#666666;--accent:#191919;--line:#dddddd;--paper:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:115px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}[hidden]{display:none!important}.skip{position:fixed;top:-60px;z-index:100;background:#fff;padding:15px}.skip:focus{top:10px}.header{height:112px;background:#ffffffed;backdrop-filter:blur(16px);position:fixed;inset:0 0 auto;z-index:30;padding:16px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #19191912}.logo{width:86px;height:68px;object-fit:contain}.header nav{display:flex;gap:34px;font-size:14px}.header nav a{padding:12px 0}.header nav a:hover{color:var(--accent)}.header-cta{font-size:14px;border-bottom:1px solid var(--ink);padding:10px 0}.nav-toggle{display:none}.hero-journey{height:210vh}.hero-stage{height:100svh;min-height:720px;position:sticky;top:0;overflow:hidden}.hero-copy{position:absolute;top:31%;left:7%;z-index:2;width:47%}.eyebrow,.section-label{font-size:12px;letter-spacing:.16em;font-weight:500}.hero-copy h1{font-family:'Playfair Display',serif;font-size:clamp(55px,5.9vw,92px);line-height:1.13;font-weight:500;letter-spacing:-.055em;margin:26px 0}.hero-copy em,.about em{color:var(--accent);font-weight:500}.hero-copy p{color:var(--muted);line-height:1.8}.underlink{display:inline-flex;align-items:center;gap:35px;border-bottom:1px solid currentColor;padding:12px 0;margin-top:25px;font-size:14px}.hero-picture{position:absolute;left:56%;top:18%;width:40%;height:70%;overflow:hidden;will-change:top,left,width,height}.hero-picture>img{width:100%;height:100%;object-fit:cover;object-position:62% center;will-change:transform}.picture-shade{position:absolute;inset:0;background:linear-gradient(90deg,#00000066,transparent 70%);opacity:0}.hero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:7%;color:#fff;opacity:0;pointer-events:none}.hero-overlay h2{font-family:'Playfair Display',serif;font-size:clamp(65px,8vw,125px);font-weight:500;line-height:1.1;letter-spacing:-.04em;margin-top:25px}.hero-foot{position:absolute;bottom:4%;left:7%;right:5%;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.08em}.section{padding:95px 7%}.section-label{display:flex;justify-content:space-between;padding-bottom:30px;border-bottom:1px solid var(--line)}.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:9%;padding:64px 0 12px}.about h2{font-family:'Playfair Display',serif;font-weight:500;line-height:1.35;font-size:clamp(34px,3.3vw,54px);letter-spacing:-.04em}.about p{line-height:1.95;color:var(--muted);margin-bottom:20px}.footer{background:var(--ink);color:white;padding:65px 7%;display:flex;align-items:center;justify-content:space-between;gap:35px}.footer img{width:130px}.footer p{font-size:12px;color:#cccccc}
@media(max-width:900px){.header{height:90px}.logo{width:72px;height:58px}.header nav{gap:20px}.header-cta{display:none}.hero-copy{left:6%;top:26%}.hero-copy h1{font-size:62px}.hero-stage{min-height:690px}.about-grid{gap:35px}.footer{flex-wrap:wrap}}
@media(max-width:600px){html{scroll-padding-top:90px}.header{padding:12px 6%;height:84px}.logo{width:65px;height:52px}.header>nav{display:none}.nav-toggle{display:block;border:0;background:none;font-size:14px}.header #mobile-nav{position:absolute;top:84px;left:0;right:0;display:flex;flex-direction:column;background:white;padding:24px 6%;border-bottom:1px solid var(--line);gap:10px}.hero-stage{min-height:780px}.hero-copy{top:130px;left:7%;width:86%}.hero-copy h1{font-size:54px;margin:18px 0}.hero-copy p{font-size:15px;line-height:1.6}.hero-copy .underlink{margin-top:12px}.hero-picture{top:470px;left:7%;width:86%;height:245px}.hero-foot{bottom:22px;font-size:12px}.hero-foot>span{display:none}.hero-overlay h2{font-size:65px}.section{padding:65px 7%}.section-label{font-size:12px;gap:25px}.section-label span:last-child{display:none}.about-grid{grid-template-columns:1fr;padding-top:35px;gap:24px}.about h2{font-size:35px}.footer{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-journey{height:auto}.hero-stage{position:relative}.hero-overlay{display:none}}
.cup-scene{position:absolute;left:74%;top:55%;width:min(53vw,820px);transform:translate(-50%,-50%);z-index:3;pointer-events:none;will-change:transform}.cup-scene img{width:100%;height:auto;filter:drop-shadow(8px 27px 20px #19191912);transform:rotate(-8deg);will-change:transform}.cup-story{position:absolute;top:32%;left:56%;width:37%;opacity:0;pointer-events:none;will-change:transform,opacity}.cup-story h2,.coffee-info h2,.experience h2,.franchise h2{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(38px,4.2vw,66px);line-height:1.2;letter-spacing:-.045em;margin:25px 0}.cup-story em{color:var(--accent)}.cup-story p{color:var(--muted);line-height:1.9}.coffee-section{background:var(--ink);color:#fff;overflow:hidden}.coffee-section .section-label{border-color:#ffffff30}.coffee-grid{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:5%;min-height:660px}.coffee-visual{position:relative;display:grid;place-items:center;min-width:0}.coffee-word{font-family:'Manrope',sans-serif;font-size:clamp(55px,8vw,125px);font-weight:700;letter-spacing:-.07em;color:#ffffff0a;position:absolute;top:25%;left:0}.coffee-visual img{width:90%;position:relative;z-index:1;transition:opacity .18s,transform .5s}.coffee-visual img.changing{opacity:0;transform:translateY(20px) rotate(4deg)}.coffee-info{padding:45px 0}.coffee-info h2 em{color:#ffffff}.coffee-controls{display:flex;gap:20px;border-bottom:1px solid #ffffff30;margin:30px 0}.coffee-choice{background:transparent;color:#ffffff90;border:0;border-bottom:2px solid transparent;padding:12px 0;font-size:14px;min-height:48px}.coffee-choice[aria-pressed=true]{color:white;border-bottom-color:#ffffff}.coffee-detail h3{font-size:22px;font-weight:500;margin-bottom:10px}.coffee-detail p{color:#cccccc;font-size:16px;line-height:1.8}.experience{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:8%;padding-top:110px;padding-bottom:110px}.experience-photo{overflow:hidden;aspect-ratio:1.05}.experience-photo img{width:100%;height:100%;object-fit:cover;object-position:62%;will-change:transform}.experience h2{font-size:clamp(35px,3.8vw,58px)}.experience em,.franchise em{color:var(--accent)}.experience p{color:var(--muted);line-height:1.9}.franchise{background:#f6f6f6}.franchise-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:9%;align-items:center;margin:40px 0 60px}.franchise-intro p{line-height:1.9;color:var(--muted)}.franchise h2{font-size:clamp(37px,3.8vw,60px)}.solid-link{display:inline-flex;background:var(--ink);color:white;padding:18px 24px;gap:40px;font-size:14px;margin-top:25px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:35px}.steps article{border-top:1px solid #cccccc;padding-top:25px}.steps span{font-size:13px;color:var(--accent)}.steps h3{font-size:20px;font-weight:500;margin:18px 0 12px}.steps p{font-size:15px;color:var(--muted);line-height:1.8}.footer{display:block}.footer-main{display:grid;grid-template-columns:.7fr 1.5fr .7fr;gap:6%;padding:20px 0 70px}.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:18px}.footer-contact .mail{font-family:'Playfair Display',serif;font-size:clamp(22px,2.5vw,38px);letter-spacing:-.03em}.footer-contact p{font-size:15px;line-height:1.8;color:#cccccc}.footer nav{display:flex;flex-direction:column;gap:22px;font-size:14px;padding-top:25px}.footer-bottom{border-top:1px solid #ffffff30;padding-top:25px;display:flex;justify-content:space-between;font-size:12px;color:#cccccc}.hero-copy{will-change:transform,opacity}
@media(max-width:900px){.cup-scene{width:59vw;left:73%}.cup-story{left:50%;width:43%}.coffee-grid{gap:3%;grid-template-columns:1fr 1fr;min-height:580px}.coffee-controls{gap:13px}.experience{gap:5%}.steps{grid-template-columns:1fr 1fr}.franchise-intro{gap:5%}.footer-main{grid-template-columns:1fr 2fr}.footer nav{grid-column:2}.hero-copy h1{font-size:clamp(46px,6.7vw,62px)}}
@media(max-width:600px){.cup-scene{left:53%;top:69%;width:91vw;max-width:440px}.cup-story{top:130px;left:7%;width:86%}.cup-story h2{font-size:42px}.cup-story p{font-size:15px}.hero-copy h1{font-size:52px}.hero-journey{height:220svh}.hero-stage{height:100svh;min-height:790px}.coffee-grid{display:flex;flex-direction:column;gap:0;min-height:0}.coffee-visual{width:100%;height:340px}.coffee-visual img{height:340px;width:auto}.coffee-word{font-size:75px}.coffee-info{padding:0 0 15px;width:100%}.coffee-info h2{font-size:44px}.experience{grid-template-columns:1fr;gap:30px}.experience-photo{aspect-ratio:1.15}.experience-copy h2{font-size:39px}.franchise-intro{grid-template-columns:1fr;gap:10px;margin:25px 0 40px}.franchise h2{font-size:39px}.steps{gap:30px 20px}.steps h3{font-size:18px}.steps p{font-size:14px}.footer-main{display:flex;flex-direction:column;gap:45px;padding-bottom:40px}.footer-main> a img{width:105px}.footer-contact .mail{font-size:25px}.footer nav{padding-top:0}.footer-bottom{gap:22px;line-height:1.6}}
@media(prefers-reduced-motion:reduce){.hero-journey{height:auto}.cup-story{display:none}.coffee-visual img{transition:none}}
.bean-journey{height:340svh;background:white}.bean-stage{height:calc(100svh - 112px);min-height:600px;position:sticky;top:112px;overflow:hidden;isolation:isolate}.foliage{position:absolute;width:49%;height:130%;top:-15%;pointer-events:none;will-change:transform,opacity;z-index:2}.foliage img{height:100%;width:100%;object-fit:contain}.foliage-back-left{left:-15%}.foliage-back-right{right:-15%}.foliage-back-right img,.foliage-front-right img{transform:scaleX(-1)}.foliage-front-left{left:-17%;top:-25%;width:57%;height:155%;z-index:4}.foliage-front-right{right:-17%;top:-25%;width:57%;height:155%;z-index:4}.bean-intro{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:3;padding:5%;will-change:transform,opacity}.bean-intro h2,.bean-ending h2{font-family:'Playfair Display',serif;font-size:clamp(40px,5.1vw,78px);font-weight:500;line-height:1.2;letter-spacing:-.045em;margin:24px 0}.bean-intro p,.bean-ending p{line-height:1.85;color:#666}.flying-beans{position:absolute;left:50%;top:49%;width:57vw;max-width:850px;opacity:0;z-index:5;pointer-events:none;will-change:transform,opacity;transform:translate(-50%,-50%) scale(.3)}.flying-beans img{width:100%;height:auto;filter:drop-shadow(0 20px 15px #00000010)}.bean-ending{position:absolute;top:29%;left:7%;width:44%;opacity:0;z-index:6;pointer-events:none;will-change:transform,opacity}.bean-ending h2{font-size:clamp(37px,4.3vw,65px)}.bean-bottom{position:absolute;bottom:25px;left:7%;right:7%;display:flex;justify-content:space-between;font-size:12px;letter-spacing:.1em;z-index:7;color:#666}.cup-scene{padding:12px}
@media(min-width:901px){.cup-scene{width:min(49vw,790px);left:73%}}
@media(max-width:900px){.bean-stage{top:90px;height:calc(100svh - 90px)}.bean-ending{width:45%}.bean-ending h2{font-size:43px}}
@media(max-width:600px){.bean-journey{height:320svh}.bean-stage{top:84px;height:calc(100svh - 84px);min-height:650px}.foliage{width:100%;height:115%;top:-5%}.foliage-back-left{left:-49%}.foliage-back-right{right:-49%}.foliage-front-left{left:-53%;width:105%;height:135%;top:-15%}.foliage-front-right{right:-53%;width:105%;height:135%;top:-15%}.bean-intro h2{font-size:44px}.bean-intro p{max-width:225px;font-size:15px}.bean-ending{top:10%;left:7%;width:86%}.bean-ending h2{font-size:37px}.bean-ending p{font-size:15px}.flying-beans{width:92vw;top:58%}.bean-bottom{bottom:24px;font-size:12px}.bean-bottom span:first-child{display:none}}
@media(prefers-reduced-motion:reduce){.bean-journey{height:auto}.bean-stage{position:relative;top:auto;min-height:650px}.foliage-front-left,.foliage-front-right{display:none}.bean-ending,.flying-beans{display:none}}
.bean-particles{position:absolute;inset:0;pointer-events:none;z-index:5}.bean-particle{position:absolute;left:0;top:0;width:20px;opacity:0;will-change:transform,width,opacity}.bean-surface,.cherry-surface{position:relative;display:block;width:100%;overflow:hidden}.bean-surface img,.cherry-surface img{position:absolute;height:auto;display:block}.bean-surface{filter:drop-shadow(0 10px 12px #00000012)}.cherry-surface{position:absolute;left:0;top:0;border-radius:50%}.bean-ending{z-index:6}
@media(prefers-reduced-motion:reduce){.bean-particles{display:none}}
.menu-page{padding:180px 7% 100px}.menu-heading{display:flex;justify-content:space-between;align-items:end;padding-bottom:55px}.menu-heading h1{font-family:'Playfair Display',serif;font-size:clamp(58px,7vw,100px);line-height:1.2;letter-spacing:-.055em;font-weight:500;margin:20px 0 0}.menu-heading p{line-height:1.8;color:#666}.menu-filter-bar{position:sticky;top:112px;background:#ffffffef;backdrop-filter:blur(16px);z-index:10;border-top:1px solid #ddd;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:40px;padding:5px 0}.menu-filters{display:flex;gap:25px;overflow-x:auto}.menu-filters button{border:0;background:none;color:#777;padding:18px 0;white-space:nowrap;font-size:14px;border-bottom:2px solid transparent}.menu-filters button[aria-pressed=true]{color:#111;border-bottom-color:#111}.menu-count{font-size:12px;white-space:nowrap;color:#666}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px}.product-card{border:0;padding:0;text-align:left;background:none;color:#191919;min-width:0}.product-photo{aspect-ratio:1;overflow:hidden;background:#363736}.product-photo img{width:100%;height:100%;object-fit:contain;transition:transform .4s}.product-card:hover img{transform:scale(1.08)}.product-card-category{display:block;font-size:12px;color:#777;margin:20px 0 8px}.product-card h2{font-family:'Manrope',sans-serif;font-size:18px;line-height:1.5;font-weight:500;letter-spacing:-.025em}.product-modal{padding:0;border:0;margin:auto;width:min(520px,90vw);max-height:90svh;overflow:auto;background:white;color:#191919}.product-modal::backdrop{background:#000b;backdrop-filter:blur(8px)}.product-close{position:absolute;right:14px;top:14px;border:0;border-radius:50%;width:42px;height:42px;background:white;color:black;font-size:28px;z-index:2}.product-large{width:100%;max-height:60svh;object-fit:contain;background:#363736}.product-modal-info{padding:25px 30px 35px}.product-modal-info h2{font-family:'Playfair Display',serif;font-size:32px;font-weight:500;line-height:1.3;margin-top:12px}
@media(max-width:1050px){.header nav{gap:20px}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.menu-filters{gap:18px}}
@media(max-width:900px){.menu-filter-bar{top:90px}.menu-count{display:none}.menu-page{padding-top:140px}}
@media(max-width:600px){.menu-page{padding:130px 6% 65px}.menu-heading{display:block;padding-bottom:35px}.menu-heading h1{font-size:62px}.menu-heading p{margin-top:20px;font-size:15px}.menu-filter-bar{top:84px;margin-bottom:28px}.menu-filters{gap:22px}.menu-filters button{font-size:14px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}.product-card h2{font-size:16px;line-height:1.5}.product-card-category{margin-top:15px}.product-modal-info h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){.product-photo img{transition:none}}
@media(min-width:601px) and (max-width:800px){.header>nav{display:none}.nav-toggle{display:block;border:0;background:none;font-size:14px}.header #mobile-nav{position:absolute;top:90px;left:0;right:0;display:flex;flex-direction:column;background:white;padding:24px 6%;border-bottom:1px solid #ddd;gap:10px}}
.cup-scene .paper-morph{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain;opacity:0;will-change:transform,opacity}.cup-scene .ceramic-morph{will-change:transform,opacity}
