/**
 * MYORI POP ATELIER — standalone edition
 * Forest-teal structure, Myori Aqua actions, tactile flavor fields, arch portals,
 * asymmetric bento pacing, and motion that respects reduced-motion preferences.
 */
:root {
  --forest:#12413f;--deep:#0b302f;--aqua:#71cfca;--aqua-soft:#dff7f4;
  --lavender:#d1a9e1;--lavender-soft:#f0e2f6;--mango:#ffb055;
  --mango-soft:#ffe2b5;--blush:#ff9ea9;--blush-soft:#ffe2e5;
  --milk:#fffaf2;--paper:#f6f1e8;--ink:#153a38;--red:#d52921;
  --ease:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--milk)}body{margin:0;overflow-x:hidden;background:var(--milk);color:var(--ink);font-family:"Plus Jakarta Sans",sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
body:before{position:fixed;inset:0;z-index:1000;pointer-events:none;content:"";opacity:.14;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");mix-blend-mode:multiply}
h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif;letter-spacing:-.05em;line-height:.98}h1 em,h2 em{color:var(--blush);font-style:normal;font-weight:500}a{color:inherit;text-decoration:none}img,video{display:block;max-width:100%}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button:not(:disabled),a[href]{cursor:pointer}:focus-visible{outline:3px solid var(--mango);outline-offset:4px}::selection{background:var(--aqua);color:var(--deep)}
.section{padding:clamp(1rem,3vw,2rem) max(1.25rem,calc((100vw - 1420px)/2))}.eyebrow{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.15rem;font-size:.68rem;font-weight:800;letter-spacing:.15em;line-height:1.2;text-transform:uppercase}.eyebrow:before{width:.45rem;height:.45rem;border-radius:50%;background:var(--blush);content:""}
.button{display:inline-flex;min-height:3.65rem;padding:0 1.45rem;align-items:center;justify-content:center;gap:.65rem;border:0;border-radius:1rem 2.1rem 1rem 1rem;background:var(--forest);color:white;font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;transition:transform .16s var(--ease),background .18s var(--ease),color .18s var(--ease)}.button:hover{background:var(--aqua);color:var(--deep);transform:translateY(-3px)}.button:active{transform:scale(.97)}.text-link{display:inline-flex;padding-bottom:.15rem;align-items:center;border-bottom:1px solid currentColor;font-size:.78rem;font-weight:800}.text-link.light{color:var(--aqua)}.button-row{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.notice{display:grid;min-height:2.2rem;padding:.45rem clamp(1rem,3vw,2.5rem);grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;background:var(--forest);color:white;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.notice>span{color:var(--aqua)}.notice small{color:var(--aqua);font-weight:800}.notice strong{animation:noticeIn .3s var(--ease)}
.header{position:sticky;top:0;z-index:50;display:grid;height:6.5rem;padding:0 clamp(1rem,3vw,3.5rem);grid-template-columns:minmax(12rem,1fr) auto minmax(12rem,1fr);align-items:center;gap:1.4rem;border-bottom:1px solid rgba(18,65,63,.13);background:rgba(255,250,242,.9);backdrop-filter:blur(18px)}.logo{display:block;width:min(20rem,100%)}.logo img{width:100%;height:6rem;object-fit:contain;object-position:left center}.nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.6rem)}.nav a{position:relative;padding:.8rem 0;font-size:.72rem;font-weight:800;text-transform:uppercase}.nav a:after{position:absolute;right:0;bottom:.45rem;left:0;height:3px;border-radius:3px;background:var(--blush);content:"";transform:scaleX(0);transition:transform .2s var(--ease)}.nav a:hover:after,.nav a.active:after{transform:scaleX(1)}.header-actions{display:flex;justify-content:flex-end;gap:.7rem}.mood-button{min-height:2.8rem;padding:0 1rem;border:0;border-radius:999px;background:var(--aqua);color:var(--deep);font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;transition:.18s var(--ease)}.mood-button:hover{background:var(--mango);transform:translateY(-2px)}.menu-button{display:none;width:2.8rem;height:2.8rem;border:1px solid rgba(18,65,63,.2);border-radius:50%;background:transparent;color:var(--forest);font-size:1.2rem}.mobile-nav{display:none}
.footer{padding:clamp(1rem,1vw,3rem) max(2rem,calc((100vw - 1420px)/2)) 1.5rem;background:var(--milk)}.footer-top{display:flex;margin-bottom:2rem;align-items:center;gap:2rem}.footer-top img{width:8rem;height:8rem;object-fit:contain}.footer-top p{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1.7rem,3vw,3.15rem);font-weight:650;letter-spacing:-.04em;line-height:1.08}.footer-links{display:grid;margin:0 0 4rem auto;grid-template-columns:repeat(2,1fr);gap:3rem}.footer-links div{display:flex;flex-direction:column;gap:.55rem}.footer-links small{margin-bottom:.4rem;color:#718482;font-size:.6rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.footer-links a{width:max-content;font-size:.76rem;font-weight:700}.footer-links a:hover{color:#d86c78}.footer-bottom{display:flex;padding-top:1.3rem;justify-content:space-between;gap:1rem;border-top:1px solid rgba(18,65,63,.18);color:#687b79;font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.hero{display:grid;min-height:calc(100vh - 21rem);grid-template-columns:43% 57%;align-items:stretch;background-color:#d0d1d1;}.hero-copy{display:flex;padding:clamp(4rem,8vw,8rem) clamp(2rem,5vw,6rem) clamp(4rem,6vw,6rem) max(1.25rem,calc((100vw - 1420px)/2));flex-direction:column;justify-content:center}.hero h1{max-width:12ch;margin-bottom:1.5rem;font-size:clamp(4rem,7vw,8.2rem)}.hero-copy>p{max-width:35rem;margin-bottom:1.5rem;color:#38615f;font-size:clamp(.95rem,1.3vw,1.2rem);line-height:1.75}.micro-notes{display:flex;margin-top:1rem;gap:1.2rem;flex-wrap:wrap;color:#54706e;font-size:.65rem;font-weight:700;text-transform:uppercase}.micro-notes span:first-child{color:#3f8f8b}.micro-notes span:last-child{color:#b76d16}.hero-media{position:relative;min-height:40rem;overflow:hidden;border-bottom-left-radius:clamp(6rem,13vw,14rem);transform:translate3d(0,var(--parallax-y,0),0)}.hero-media video{width:100%;height:100%;object-fit:cover;object-position:58% center}.media-label{position:absolute;right:clamp(1rem,3vw,3rem);bottom:clamp(1rem,3vw,2.7rem);display:flex;min-width:13rem;padding:1rem 1.2rem;flex-direction:column;border-radius:1rem 2.7rem 1rem 1rem;background:rgba(255,250,242,.9);box-shadow:0 20px 60px rgba(18,65,63,.16);backdrop-filter:blur(14px)}.media-label small{font-size:.58rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.media-label strong{font-family:"Bricolage Grotesque",sans-serif;font-size:1.25rem}
.moving-ribbon{overflow:hidden;background:var(--forest);color:white}.moving-ribbon div{width:max-content;padding:1.2rem 0;font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1rem,2vw,1.8rem);font-weight:750;letter-spacing:.07em;word-spacing:1rem;animation:ribbon 34s linear infinite}.carousel-section{overflow:hidden;background:var(--paper)}.section-title{max-width:1420px;margin:0 auto 2rem}.row-title{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}.section-title h2{max-width:12ch;margin:0;font-size:clamp(3rem,6vw,6.3rem)}.carousel-buttons{display:flex;gap:.55rem}.carousel-buttons button{display:grid;width:3rem;height:3rem;place-items:center;border:1px solid rgba(18,65,63,.2);border-radius:50%;background:transparent;color:var(--forest)}.carousel-buttons button:hover{background:var(--forest);color:white}.product-rail{display:flex;width:calc(100% + max(1.25rem,calc((100vw - 1420px)/2)));gap:clamp(1rem,2vw,2rem);overflow-x:auto;padding-bottom:1rem;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none}.product-rail::-webkit-scrollbar{display:none}

.product-card {
    display: grid;
    grid-template-columns: 64% 36%;
    min-width: min(42vw, 33rem);
    min-height: 3rem;
    overflow: hidden;
    border-radius: 1.5rem 7rem 1.5rem 1.5rem;
}

.product-card__media {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.product-card__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.aqua{background:var(--aqua)}.lavender{background:var(--lavender)}.mango{background:var(--mango)}.blush{background:var(--blush)}.forest{background:var(--forest)!important;color:white}
.product-card>img{width:100%;height:100%;object-fit:cover}
.product-card>div{position:relative;padding:clamp(7rem,4vw,7rem) clamp(1rem,3vw,1.2rem);flex-direction:column;justify-content:flex-end}
.product-card small,.menu-card header>small{font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.product-card h3{margin:.7rem 0 1rem;font-size:clamp(2.5rem,4vw,4.5rem)}
.product-card p{font-size:.84rem}
.product-card a{position:absolute;right:1.3rem;bottom:1.3rem;display:grid;width:3.5rem;height:3.5rem;place-items:center;border-radius:50%;background:var(--forest);color:white;font-size:1.3rem}.dark-split{display:grid;min-height:48rem;grid-template-columns:.82fr 1.18fr;align-items:center;gap:clamp(3rem,8vw,8rem);background:var(--forest);color:white}.dark-split h2{max-width:11ch;font-size:clamp(3.4rem,6vw,6.8rem)}.dark-split p{max-width:34rem;color:rgba(255,255,255,.67)}.flavor-orbit{position:relative;min-height:34rem}.bubble{position:absolute;display:grid;width:clamp(10rem,18vw,17rem);aspect-ratio:1;place-items:center;border-radius:50%;color:var(--deep);font-size:.7rem;font-weight:800;text-align:center;text-transform:uppercase;box-shadow:0 30px 80px rgba(0,0,0,.2)}.bubble strong{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1.8rem,3vw,3.1rem);text-transform:none}.bubble:nth-child(1){top:0;left:5%}.bubble:nth-child(2){right:3%;bottom:2%}.bubble:nth-child(3){bottom:0;left:15%;width:clamp(8rem,14vw,13rem)}.coffee-band{display:grid;grid-template-columns:9rem 1fr 15rem;align-items:center;gap:clamp(2rem,6vw,6rem);background:#e8cbac}.illy-mark{display:grid;width:8rem;aspect-ratio:1;place-items:center;background:var(--red);color:white;font-family:Georgia,serif;font-size:2.25rem;font-style:italic;box-shadow:1rem 1rem 0 var(--blush)}.coffee-band h2{max-width:18ch;font-size:clamp(3rem,5vw,5.5rem)}.coffee-band>strong{padding:1.2rem 0;border-top:1px solid var(--forest);border-bottom:1px solid var(--forest);font-size:.7rem;text-transform:uppercase}
.aqua-cta{position:relative;display:flex;min-height:40rem;overflow:hidden;align-items:center;background:var(--aqua)}
.aqua-cta>img{position:absolute;bottom:-20%;left:2%;width:min(40vw,30rem);transform:translate3d(0,var(--parallax-y,0),0) rotate(-7deg);}
.aqua-cta>div{position:relative;z-index:2;margin-left:44%}
.aqua-cta h2{font-size:clamp(3.6rem,6.5vw,7.2rem)}
.page-hero{display:grid;min-height:36rem;padding:clamp(4rem,8vw,8rem) max(1.25rem,calc((100vw - 1420px)/2));grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(3rem,7vw,7rem)}.page-hero h1{font-size:clamp(4.1rem,8vw,8.6rem)}.page-hero p{max-width:40rem;color:#526765}.menu-hero{background:var(--lavender-soft)}.arch-photo{position:relative;min-height:27rem;overflow:hidden;border-radius:48% 48% 1.4rem 1.4rem;background:var(--aqua);box-shadow:0 34px 90px rgba(18,65,63,.16)}.arch-photo img{width:100%;height:100%;min-height:27rem;object-fit:cover}.arch-photo span{position:absolute;border:3px solid rgba(255,255,255,.55);border-radius:50%;color:var(--forest);font-size:1.5rem}.arch-photo span:nth-of-type(1){top:12%;left:9%}.arch-photo span:nth-of-type(2){right:10%;bottom:12%;font-size:1rem}.filters{position:sticky;top:5.5rem;z-index:30;display:flex;padding:1rem max(1.25rem,calc((100vw - 1420px)/2));gap:.55rem;overflow-x:auto;border-bottom:1px solid rgba(18,65,63,.12);background:rgba(255,250,242,.91);backdrop-filter:blur(14px);scrollbar-width:none}.filters button{flex:0 0 auto;padding:.72rem 1rem;border:1px solid rgba(18,65,63,.18);border-radius:999px;background:transparent;color:var(--forest);font-size:.64rem;font-weight:800;text-transform:uppercase}.filters button:hover{background:var(--forest);color:white}.filters button.active{border-color:var(--aqua);background:var(--aqua);color:var(--deep);box-shadow:0 8px 20px rgba(113,207,202,.25)}.menu-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,1.8rem);align-items:start}.menu-card{position:relative;grid-column:span 6;overflow:hidden;border-radius:1.4rem 5rem 1.4rem 1.4rem;box-shadow:0 22px 70px rgba(18,65,63,.1),inset 0 1px rgba(255,255,255,.8)}.menu-card.offset{margin-top:4rem;border-radius:5rem 1.4rem 1.4rem 1.4rem}.menu-card.aqua{background:radial-gradient(circle at 10% 85%,rgba(255,255,255,.7),transparent 22%),var(--aqua-soft)}.menu-card.lavender{background:radial-gradient(circle at 85% 12%,rgba(255,255,255,.7),transparent 23%),var(--lavender-soft)}.menu-card.mango{background:radial-gradient(circle at 90% 85%,rgba(255,255,255,.65),transparent 24%),var(--mango-soft)}.menu-card.blush{background:radial-gradient(circle at 8% 10%,rgba(255,255,255,.7),transparent 22%),var(--blush-soft)}.menu-card header{position:relative;padding:clamp(1.5rem,3vw,2.6rem);border-bottom:1px solid rgba(18,65,63,.13)}.menu-card h2{margin:.8rem 0 0;font-size:clamp(2.25rem,4vw,3.9rem)}.price-pill{position:absolute;right:1.5rem;bottom:1.7rem;padding:.35rem .65rem;border:1px solid currentColor;border-radius:999px;font-size:.6rem}.menu-card ul{margin:0;padding:0;list-style:none}.menu-card li{display:flex;min-height:4.8rem;padding:1.05rem clamp(1.5rem,3vw,2.6rem);align-items:flex-start;justify-content:space-between;gap:1rem;border-bottom:1px solid rgba(18,65,63,.1);font-size:.82rem;font-weight:800}.menu-card li:last-child{border-bottom:0}.menu-card li small{display:block;margin-top:.15rem;color:#617876;font-size:.62rem;font-style:italic;font-weight:500}.menu-card li>b{flex:0 0 auto;font-size:.65rem;text-align:right}.mini-arch{position:absolute;top:1.5rem;right:1.8rem;z-index:2;width:2rem;height:1.4rem;border:4px solid var(--blush);border-bottom:0;border-radius:2rem 2rem 0 0;opacity:.42;box-shadow:0 -4px var(--mango),0 -8px var(--aqua),0 -12px var(--lavender)}.mango-note{display:grid;grid-template-columns:7rem 1fr;align-items:center;gap:clamp(2rem,5vw,5rem);background:var(--mango)}.mango-note>span{display:grid;width:6rem;aspect-ratio:1;place-items:center;border-radius:50%;background:var(--forest);color:white;font-size:2rem}.mango-note h2{font-size:clamp(3rem,5vw,5.7rem)}
.story-hero{background:var(--milk)}.arch-stage{position:relative;display:grid;min-height:34rem;place-items:center;overflow:hidden;border-radius:48% 48% 1.5rem 1.5rem;background:white}.arch-stage img{width:min(65%,25rem);transform:translate3d(0,var(--parallax-y,0),0)}.arch-stage span{position:absolute;padding:.35rem .75rem;border-radius:999px;background:var(--forest);color:white;font-size:.6rem;font-weight:800;text-transform:uppercase}.arch-stage span:nth-of-type(1){top:20%;left:6%;transform:rotate(-8deg)}.arch-stage span:nth-of-type(2){top:46%;right:3%;background:var(--blush);color:var(--forest);transform:rotate(7deg)}.arch-stage span:nth-of-type(3){bottom:13%;left:10%;background:var(--mango);color:var(--forest);transform:rotate(4deg)}.manifesto{display:grid;grid-template-columns:6rem 1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start;background:var(--forest);color:white}.manifesto>b{display:grid;width:4.5rem;height:4.5rem;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;font-size:.65rem}.manifesto h2{max-width:13ch;font-size:clamp(3rem,5vw,5.8rem)}.manifesto>p{margin-top:3.2rem;color:rgba(255,255,255,.67)}.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;background:var(--paper)}.principle-grid article{min-height:24rem;padding:clamp(2rem,4vw,4rem);border-top-right-radius:7rem}.principle-grid article.offset{transform:translateY(3.5rem)}.principle-grid small{display:block;margin-bottom:5rem;font-size:.64rem;font-weight:800}.principle-grid h2{font-size:clamp(2.2rem,3.5vw,4rem)}.palette-section{display:grid;grid-template-columns:.7fr 1.3fr;align-items:end;gap:clamp(3rem,7vw,7rem)}.palette-section h2{font-size:clamp(3.5rem,6vw,6.8rem)}.palette-bars{display:grid;min-height:30rem;grid-template-columns:repeat(5,1fr);align-items:end}.palette-bars span{display:flex;padding:.8rem;align-items:flex-end;transition:transform .25s var(--ease)}.palette-bars span:hover{transform:translateY(-1rem)}.palette-bars .forest{height:100%;color:white}.palette-bars .aqua{height:82%}.palette-bars .lavender{height:94%}.palette-bars .mango{height:72%}.palette-bars .blush{height:88%}.palette-bars b{font-size:.58rem}.blush-cta{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;background:var(--blush)}.blush-cta h2{margin:0;font-size:clamp(3rem,6vw,5.8rem)}
.visit-hero{align-items:end;background:var(--aqua)}.visit-hero p{margin-bottom:2rem;font-size:1.05rem}.visit-cards{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1rem,2vw,2rem);background:var(--paper)}.location-card{display:grid;min-height:36rem;overflow:hidden;grid-template-columns:1fr 1fr;border-radius:1.5rem 8rem 1.5rem 1.5rem;background:var(--lavender);box-shadow:0 28px 80px rgba(18,65,63,.12)}.location-card>img{width:100%;height:100%;object-fit:cover}.location-card>div{display:flex;padding:clamp(2rem,4vw,4rem);flex-direction:column;justify-content:center;background:rgba(209,169,225,.91);backdrop-filter:blur(10px)}.location-card small{width:max-content;margin-bottom:1.5rem;padding:.5rem .7rem;border-radius:999px;background:var(--forest);color:white;font-size:.55rem;font-weight:800;text-transform:uppercase}.location-card h2,.hours-card h2{font-size:clamp(3rem,5vw,5.5rem)}.location-card b{width:max-content;margin-top:1.5rem;padding:.55rem .8rem;border:1px solid var(--forest);border-radius:999px;font-size:.58rem;text-transform:uppercase}.hours-card{display:flex;min-height:36rem;padding:clamp(2rem,5vw,5rem);flex-direction:column;border-radius:1.5rem 1.5rem 8rem 1.5rem;background:var(--mango)}.hours-card>span{margin-bottom:4rem;font-size:2rem}.hours-card>div{display:flex;margin-top:auto;padding-top:1.2rem;justify-content:space-between;gap:1rem;border-top:1px solid rgba(18,65,63,.3);font-size:.68rem;text-transform:uppercase}.experience{display:grid;grid-template-columns:.6fr 1.4fr;gap:clamp(3rem,8vw,8rem)}.experience>div:first-child h2{font-size:clamp(3.2rem,5vw,5.8rem)}.experience article{display:grid;min-height:8.5rem;padding:1.6rem 0;grid-template-columns:3rem 1fr 1fr;align-items:center;gap:1rem;border-top:1px solid rgba(18,65,63,.2)}.experience article:last-child{border-bottom:1px solid rgba(18,65,63,.2)}.experience h3,.experience p{margin:0}.experience h3{font-size:1.45rem}.experience p{color:#526765;font-size:.78rem}.dark-cta{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;background:var(--forest);color:white}.dark-cta h2{font-size:clamp(3.2rem,6vw,6.8rem)}.aqua-button{background:var(--aqua);color:var(--deep)}
.mood-modal{position:fixed;inset:0;z-index:100;display:grid;padding:1rem;place-items:center;background:rgba(11,48,47,.67);backdrop-filter:blur(9px);transition:opacity .25s var(--ease)}.mood-modal.hidden{pointer-events:none;opacity:0}.mood-box{position:relative;width:min(43rem,100%);padding:clamp(2rem,5vw,4.5rem);border-radius:2rem 8rem 2rem 2rem;background:var(--milk);box-shadow:0 40px 120px rgba(0,0,0,.28);transform:translateY(0) scale(1);transition:transform .25s var(--ease)}.mood-modal.hidden .mood-box{transform:translateY(18px) scale(.95)}.mood-close{position:absolute;top:1.2rem;right:1.2rem;width:3rem;height:3rem;border:1px solid rgba(18,65,63,.2);border-radius:50%;background:transparent;color:var(--forest);font-size:1.3rem}.mood-box h2{font-size:clamp(3rem,7vw,6.2rem)}.mood-options{display:grid;margin:2rem 0;grid-template-columns:repeat(3,1fr);gap:.7rem}.mood-options button{min-height:8rem;padding:1.1rem;border:0;border-radius:1rem 3.5rem 1rem 1rem;color:var(--forest);text-align:left;transition:transform .18s var(--ease)}.mood-options button:hover{transform:translateY(-5px) rotate(-1deg)}.mood-options strong,.mood-options small{display:block}.mood-options strong{font-family:"Bricolage Grotesque",sans-serif;font-size:1.4rem}.mood-result{display:flex;min-height:4rem;padding-top:1rem;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid rgba(18,65,63,.2);font-size:.8rem}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.reveal.visible{opacity:1;transform:translateY(0);background-color: #d0d1d1;}
@keyframes noticeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes ribbon{to{transform:translateX(-50%)}}
@media(max-width:1050px){.header{grid-template-columns:1fr auto}.nav,.mood-button{display:none}.menu-button{display:block}.mobile-nav{position:absolute;top:100%;right:0;left:0;display:grid;max-height:0;overflow:hidden;background:var(--forest);color:white;opacity:0;transform:translateY(-8px);transition:.25s var(--ease)}.mobile-nav.open{max-height:25rem;padding:1rem clamp(1.2rem,4vw,3rem) 2rem;opacity:1;transform:none}.mobile-nav a{padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.15);font-family:"Bricolage Grotesque",sans-serif;font-size:1.4rem}.hero{grid-template-columns:1fr}.hero-media{min-height:38rem;margin-left:1rem;border-top-left-radius:8rem}.dark-split,.palette-section,.experience{grid-template-columns:1fr}.coffee-band{grid-template-columns:8rem 1fr}.coffee-band>strong{grid-column:2}.aqua-cta>div{margin-left:34%}.page-hero{grid-template-columns:1fr}.arch-photo,.arch-stage{max-width:42rem;width:100%}.manifesto{grid-template-columns:5rem 1fr}.manifesto>p{grid-column:2;margin-top:0}.visit-cards{grid-template-columns:1fr}.location-card{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.section{padding-top:2rem;padding-bottom:1rem}.notice{grid-template-columns:auto 1fr}.notice small{display:none}.header{height:4.75rem}.logo{width:10.5rem}.logo img{height:2.7rem}.hero-copy{padding-top:2rem;padding-bottom:1rem}.hero h1,.page-hero h1{font-size:clamp(2rem,12vw,4rem)}.button-row{align-items:flex-start;flex-direction:column}.micro-notes{flex-direction:row;gap:.5rem}.hero-media{min-height:28rem;margin-left:.8rem;border-top-left-radius:5rem;border-bottom-left-radius:5rem}.media-label{right:.8rem;bottom:.8rem;min-width:11rem}.row-title{align-items:flex-start;flex-direction:column}.product-card{min-width:55vw;min-height:37rem;grid-template-columns:1fr;grid-template-rows:58% 42%;border-top-right-radius:4.5rem}.product-card>div{padding:1.4rem}.product-card h3{font-size:2.4rem}.product-card p{padding-right:2.5rem;font-size:.76rem}.flavor-orbit{min-height:28rem}.bubble{width:10rem}.bubble:nth-child(2){width:9rem}.bubble:nth-child(3){width:7.5rem}.coffee-band{grid-template-columns:1fr}.coffee-band>strong{grid-column:auto}.illy-mark{width:6.5rem}.aqua-cta{min-height:40rem;align-items:flex-start}.aqua-cta>div{margin-left:0}.aqua-cta>img{right:-1%;bottom:-17%;left:auto;width:60vw}.page-hero{padding-top:5rem;padding-bottom:5rem;gap:2rem}.filters{top:4.75rem}.menu-grid{grid-template-columns:1fr}.menu-card{grid-column:auto}.menu-card.offset{margin-top:0}.menu-card li{align-items:flex-start;flex-direction:column;gap:.4rem}.menu-card li>b{text-align:left}.mango-note{grid-template-columns:1fr}.mango-note>span{width:4.5rem}.manifesto{grid-template-columns:1fr}.manifesto>p{grid-column:auto}.principle-grid{grid-template-columns:1fr}.principle-grid article.offset{transform:none}.palette-bars{min-height:23rem}.palette-bars span{padding:.5rem .25rem}.palette-bars b{font-size:.5rem;writing-mode:vertical-rl}.blush-cta{justify-content:flex-start}.location-card{grid-template-columns:1fr}.location-card>img{min-height:18rem}.hours-card{min-height:27rem}.experience article{grid-template-columns:2.2rem 1fr}.experience article p{grid-column:2}.dark-cta{align-items:flex-start;flex-direction:column}.mood-box{padding:4.5rem 1.2rem 1.5rem;border-top-right-radius:4rem}.mood-options{grid-template-columns:1fr}.mood-options button{min-height:5rem}.mood-result{align-items:flex-start;flex-direction:column}.footer-top{align-items:flex-start;flex-direction:column}.footer-links{margin-left:0}.footer-bottom{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.moving-ribbon div{transform:none!important}.reveal{opacity:1;transform:none}}

/* Explicit orbit artwork and scroll parallax — intentionally unminified for easy editing. */
.flavor-orbit {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.orbit-line {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: block;
  border: 2px solid rgba(113, 207, 202, 0.58);
  border-radius: 50%;
  pointer-events: none;
}

.orbit-line-outer {
  width: 88%;
  height: 76%;
  transform: translate(-50%, -50%) rotate(-13deg);
}

.orbit-line-inner {
  width: 64%;
  height: 52%;
  border-color: rgba(255, 158, 169, 0.48);
  transform: translate(-50%, -50%) rotate(19deg);
}

.flavor-orbit .bubble {
  z-index: 2;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

.flavor-orbit .bubble-boba {
  top: 0;
  left: 5%;
}

.flavor-orbit .bubble-coffee {
  right: 3%;
  bottom: 2%;
}

.flavor-orbit .bubble-serve {
  bottom: 0;
  left: 15%;
  width: clamp(8rem, 14vw, 13rem);
}

@media (prefers-reduced-motion: reduce) {
  [data-parallax] {
    transform: none !important;
  }
}


/* =========================================
   MYORI LOGO — STRONG GLOW + SHINE ONLY
   Logo position never moves
   ========================================= */
.logo {
  position: relative;
  display: block;
  isolation: isolate;
  overflow: visible;
}

.logo img {
  position: relative;
  z-index: 2;
  transform: none !important;
  animation: none !important;
  filter:
    brightness(1.04)
    saturate(1.08)
    drop-shadow(0 5px 9px rgba(18, 65, 63, .18));
  transition: filter 250ms ease;
}

/* Noticeable multicolor glow behind the logo */
.logo::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  border-radius: 45%;
  pointer-events: none;

  background:
    radial-gradient(circle at 15% 45%, rgba(255, 158, 169, .95), transparent 27%),
    radial-gradient(circle at 36% 58%, rgba(255, 176, 85, .9), transparent 30%),
    radial-gradient(circle at 58% 42%, rgba(113, 207, 202, .95), transparent 31%),
    radial-gradient(circle at 80% 55%, rgba(209, 169, 225, .9), transparent 29%);

  filter: blur(18px);
  opacity: .62;
  animation: myori-glow-pulse 2.2s ease-in-out infinite;
}

/* Bright shine visible only inside the PNG artwork */
.logo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;

  background: linear-gradient(
    108deg,
    transparent 12%,
    transparent 29%,
    rgba(255, 255, 255, .35) 35%,
    rgba(255, 158, 169, .95) 40%,
    rgba(255, 176, 85, 1) 45%,
    rgba(255, 255, 255, 1) 50%,
    rgba(113, 207, 202, 1) 55%,
    rgba(209, 169, 225, .95) 60%,
    rgba(255, 255, 255, .35) 66%,
    transparent 73%,
    transparent 100%
  );

  background-size: 320% 100%;
  background-position: 160% center;
  mix-blend-mode: screen;

  -webkit-mask-image: url("../images/myori-logo.png");
  mask-image: url("../images/myori-logo.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;

  animation: myori-logo-shine 2.8s ease-in-out infinite;
}

/* Stronger glow when hovered, but still no movement */
.logo:hover img,
.logo:focus-visible img {
  transform: none !important;
  filter:
    brightness(1.15)
    saturate(1.25)
    drop-shadow(0 0 6px rgba(255, 255, 255, .9))
    drop-shadow(0 0 14px rgba(113, 207, 202, .8))
    drop-shadow(0 0 24px rgba(255, 158, 169, .65));
}

.logo:hover::before,
.logo:focus-visible::before {
  opacity: 1;
  filter: blur(14px);
}

.logo:hover::after,
.logo:focus-visible::after {
  animation-duration: 1.2s;
}

@keyframes myori-glow-pulse {
  0%, 100% {
    opacity: .42;
    filter: blur(20px) brightness(.95);
  }

  50% {
    opacity: .9;
    filter: blur(14px) brightness(1.35);
  }
}

@keyframes myori-logo-shine {
  0%, 15% {
    opacity: 0;
    background-position: 160% center;
  }

  22% {
    opacity: 1;
  }

  70% {
    opacity: 1;
    background-position: -75% center;
  }

  78%, 100% {
    opacity: 0;
    background-position: -75% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo::before,
  .logo::after {
    animation: none;
  }

  .logo::before {
    opacity: .55;
  }
}


@media (max-width: 720px) {
  .logo {
    width: 18rem;       /* Change logo width here */
    max-width: 72vw;
  }

  .logo img {
    width: 100%;
    height: auto;       /* Preserves the logo proportions */
    object-fit: contain;
  }

  .header {
    height: 6rem;       /* Increase if the larger logo needs more space */
  }
}


