@font-face {
    font-family: 'Red Hat Display';
    src: url('../fonts/red-hat-display-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
}
:root { --cream: #f9efe1; --peach: #f4ddbe; --ink: #0d141b; --orange: #ea5504; --green: #009578; --gold: #eeaf46; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
html:has(body.motion-ready) { scroll-behavior: auto; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: 'Red Hat Display', Arial, sans-serif; }
body:has(dialog[open]) { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: .3; cursor: default; }
button, h1, h2, h3, p, figure, ul { margin: 0; }
button { border: 0; background: none; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 20px; background: var(--ink); color: white; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: fixed; inset: 0 0 auto; z-index: 20; height: 160px; pointer-events: none; }
.site-header a, .site-header button { pointer-events: auto; }
.current-page { position: absolute; top: 20px; left: 20px; display: flex; align-items: center; gap: 5px; font-size: 15px; }
.current-page img { width: 36px; height: 35px; }
.current-page i { margin-left: 3px; font-weight: 500; }
.page-marker { font-size: 14px; }
.brand { position: absolute; left: 49%; top: 20px; transform: translateX(-50%); }
.brand img { width: 184px; height: 39px; object-fit: contain; }
.fan-navigation { position: absolute; top: 0; right: 0; width: 172px; height: 160px; }
.menu-toggle { position: absolute; right: 0; top: 0; width: 48px; height: 48px; border: 15px solid var(--orange); border-top: 0; border-right: 0; border-bottom-left-radius: 100%; transition: width .25s, height .25s; }
.menu-toggle:hover { width: 57px; height: 57px; }
.mobile-menu-label { display: none; }
.fan-links li { position: absolute; font-size: 15px; font-weight: 500; transform-origin: right center; white-space: nowrap; }
.fan-links a { display: block; padding: 4px 1px; }
.fan-links a:hover { color: var(--orange); }
.fan-links li:nth-child(1) { top: 3px; right: 73px; transform: rotate(-10deg); }
.fan-links li:nth-child(2) { top: 26px; right: 103px; transform: rotate(-20deg); }
.fan-links li:nth-child(3) { top: 30px; right: 66px; transform: rotate(-30deg); }
.fan-links li:nth-child(4) { top: 60px; right: 83px; transform: rotate(-40deg); }
.fan-links li:nth-child(5) { top: 53px; right: 49px; transform: rotate(-50deg); }
.fan-links li:nth-child(6) { top: 88px; right: 53px; transform: rotate(-60deg); }
.fan-links li:nth-child(7) { top: 78px; right: 33px; transform: rotate(-75deg); }
.fan-links li:nth-child(8) { top: 70px; right: 10px; transform: rotate(-81deg); }
/* The original menu unfolds around the top-right corner. */
.navigation-dialog { position: fixed; inset: 0 0 auto auto; width: min(667px, 100vw); height: min(667px, 100vw); max-width: 100vw; max-height: 100svh; margin: 0; padding: 0; border: 0; overflow: hidden; color: var(--ink); background: transparent url('../images/menu-open.svg') center / 100% 100% no-repeat; transform-origin: right top; }
.navigation-dialog::backdrop { background: transparent; }
.dialog-heading > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.menu-close { position: absolute; right: 15px; top: 15px; width: 44px; height: 44px; font-size: 40px; line-height: 1; background: var(--cream); border-radius: 50%; }
.navigation-dialog nav a { position: absolute; font-size: 38px; font-weight: 700; white-space: nowrap; transform-origin: right center; padding: 6px 0; }
.navigation-dialog nav a:hover, .navigation-dialog nav a:focus-visible { color: white; }
.navigation-dialog nav a > span:last-child { display: none; }
.navigation-dialog nav a[aria-current]::before { content: '•'; position: absolute; left: -23px; }
.navigation-dialog nav a:nth-child(1) { top: 3%; right: 33%; transform: rotate(-11deg); }
.navigation-dialog nav a:nth-child(2) { top: 12.5%; right: 44%; transform: rotate(-22deg); }
.navigation-dialog nav a:nth-child(3) { top: 12.8%; right: 30%; transform: rotate(-33deg); }
.navigation-dialog nav a:nth-child(4) { top: 27.3%; right: 36.6%; transform: rotate(-44deg); }
.navigation-dialog nav a:nth-child(5) { top: 22.5%; right: 22%; transform: rotate(-55deg); }
.navigation-dialog nav a:nth-child(6) { top: 38%; right: 22.5%; transform: rotate(-66deg); }
.navigation-dialog nav a:nth-child(7) { top: 36.7%; right: 13.5%; transform: rotate(-78deg); }
.navigation-dialog nav a:nth-child(8) { top: 28.5%; right: 3%; transform: rotate(-81deg); }
.dialog-bottom { position: absolute; left: 40%; bottom: 18%; display: grid; gap: 14px; transform: rotate(9deg); font-size: 12px; }
.hero-track { position: relative; }
.hero { position: sticky; top: 0; height: 100svh; min-height: 680px; overflow: hidden; isolation: isolate; background: var(--cream); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }

.hero-lettering { position: relative; width: max-content; min-width: 100%; height: 100%; display: flex; align-items: center; padding: 0 50px 0 20px; will-change: transform; }
.hero-wordmark { width: auto; max-width: none; height: 661.94px; }
.hero-o { position: absolute; left: 600px; top: calc(50% - 305px); width: 645px; height: 610px; }
.hero-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-center { position: absolute; width: 372px; height: 380px; max-width: none; left: calc(50% - 186px); top: 50%; transform: translateY(-50%); }
.hero-bottom { display: contents; }
.scroll-prompt { position: absolute; left: 50px; bottom: 20px; width: 170px; display: block; }
.hero-note { position: absolute; left: 450px; bottom: 20px; max-width: 570px; font-size: 12px; font-style: italic; font-weight: 500; line-height: 1.2; }
.motion-toggle { position: absolute; right: 115px; bottom: 0; padding: 10px; font-size: 12px; display: flex; gap: 8px; align-items: center; }
/* Static layouts also provide the reduced-motion and no-JavaScript view. */
.story { height: 100svh; min-height: 720px; position: relative; background: var(--peach); z-index: 2; }
.story-stage { position: relative; height: 100%; overflow: hidden; }
.story-lines { position: absolute; top: 0; width: 100%; height: 78vh; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.story-line { width: 100%; }
.story-line img { height: 30px; width: auto; max-width: none; }
.story-line > div { display: flex; width: max-content; }
[data-marquee-speed] { animation: marquee-drift var(--marquee-duration, 35s) linear infinite; }
.motion-ready [data-marquee-speed] { animation-play-state: paused; }
.motion-ready [data-marquee-speed].is-marquee-visible { animation-play-state: running; }
.story-line span { margin-right: 40px; }
.story-cup { position: absolute; top: 50%; left: 50%; width: 459px; aspect-ratio: 1; transform: translate(-50%, -50%); }
.story-sprite { width: 100%; height: 100%; background: url('../images/tea-spritesheet.png') 0 0 / 100% 2300% no-repeat; }
.story-sprite img { width: 100%; }
.story-wipe { position: absolute; z-index: 2; width: 425px; height: 425px; left: 50%; top: 50%; margin: -212.5px 0 0 -212.5px; border-radius: 50%; background: var(--cream); transform: scale(0); }
.daily-marquee { position: absolute; left: 0; bottom: 5%; width: 100%; overflow: hidden; }
.daily-marquee > div { display: flex; width: max-content; }
.daily-marquee img { width: auto; height: clamp(100px, 12vw, 170px); max-width: none; padding-right: 60px; }
.feature-intro { display: none; }
.features { position: relative; padding: 90px 7%; background: var(--cream); z-index: 3; }
.feature-side, .feature-mobile-dot { display: none; }
.feature-main { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px; max-width: 1000px; margin: auto; }
.feature-frame { display: flex; flex-direction: column; align-items: center; text-align: center; }
.feature-dot img { width: 220px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.feature-frame > .feature-dot:last-child { display: none; }
.feature-caption { display: grid; justify-items: center; gap: 35px; font-size: 32px; font-weight: 900; line-height: 1.2; padding-top: 25px; }
.feature-arc-top, .feature-arc-bottom { content: ''; display: block; width: 248px; height: 28px; background: var(--feature-color); mask: url('../images/feature-arc-top.svg') center / contain no-repeat; }
.feature-arc-bottom { width: 163px; height: 31px; mask-image: url('../images/feature-arc-bottom.svg'); }
[data-tone="green"] { --feature-color: #009265; }
[data-tone="orange"] { --feature-color: #ea5504; }
[data-tone="blue"] { --feature-color: #54c0e8; }
[data-tone="gold"] { --feature-color: #f6ac2d; }
.motion-ready .story { height: 4000px; min-height: 0; }
.motion-ready .story-stage { position: sticky; top: 0; height: 100svh; }
.motion-ready .story-sprite img { visibility: hidden; }
.motion-ready .features { height: 5000px; margin-top: -2200px; padding: 0; background: transparent; }
.motion-ready :is(.features, .feature-intro) .feature-stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1fr 1fr minmax(405px, 1.5fr) 1fr 1fr; gap: clamp(20px, 4vw, 70px); overflow: hidden; padding: 0 3.8%; }
.motion-ready .feature-column { display: block; min-width: 0; }
.motion-ready .feature-main { max-width: none; margin: 0; }
.motion-ready .feature-frame { height: 100svh; justify-content: space-between; padding: 80px 0 40px; }
.motion-ready .feature-dot { flex: 0 0 auto; }
.motion-ready .feature-dot img { width: clamp(65px, 5.2vw, 82px); height: clamp(65px, 5.2vw, 82px); }
.motion-ready .feature-frame > .feature-dot:last-child { display: block; }
.motion-ready .feature-caption { font-size: clamp(30px, 3.05vw, 44px); padding: 0; gap: 45px; }
.motion-ready .feature-caption > span { white-space: nowrap; }
.motion-ready .feature-column:first-child .feature-frame { align-items: flex-start; }
.motion-ready .feature-column:last-child .feature-frame { align-items: flex-end; }
.recommendation { position: relative; min-height: 920px; text-align: center; background: var(--cream); z-index: 4; }
.recommendation-stage { position: relative; overflow: hidden; padding: 80px 20px 70px; }
.motion-ready .recommendation { height: 2000px; min-height: 0; margin-top: -700px; background: transparent; }
.motion-ready .recommendation-stage { position: sticky; top: 0; height: 100svh; padding-top: 100px; }
.recommendation-label { font-size: 30px; font-weight: 500; letter-spacing: 2px; line-height: 1.1; margin-bottom: 55px; }
.recommendation h2 { position: relative; font-size: clamp(32px, 5.7vw, 88px); font-weight: 900; line-height: 1.05; letter-spacing: 1px; }
.recommendation-art { position: relative; height: 510px; max-width: 1100px; margin: -30px auto 0; }
.recommendation-layer { position: absolute; will-change: transform; }
.recommendation-layer > img { width: 100%; height: auto; }
.recommended-drink { width: 287px; z-index: 3; }
.milk-tea { left: 28%; top: 35px;  }
.green-tea { right: 25%; top: 10px;  }
.splash { position: absolute; height: auto; z-index: 1; }
.splash-left { left: 3%; width: 44%; top: 70px; }
.splash-right { right: 5%; width: 44%; top: 75px; }
.fruit { position: absolute; height: auto; z-index: 4; }
.orange-one { width: 110px; left: 12%; top: 75px; transform: rotate(-20deg); }
.orange-two { width: 190px; left: 14%; bottom: 20px; }
.strawberry-one { width: 110px; right: 14%; top: 85px; transform: rotate(15deg); }
.strawberry-two { width: 130px; right: 16%; bottom: 30px; }
.recommendation-captions { display: flex; justify-content: center; gap: 100px; font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.drinks-section { position: relative; overflow: hidden; padding: 100px 0 120px; z-index: 5; background: var(--cream); }
.drinks-track { position: relative; z-index: 5; }
.heading-clip { display: block; overflow: hidden; padding: 3px; }
.heading-word { display: block; transform-origin: left bottom; }
.section-heading { display: grid; justify-items: center; width: fit-content; margin: 0 auto 60px; gap: 18px; font-weight: 900; font-size: 38px; line-height: 1; }
.section-heading::before, .section-heading::after { content: ''; display: block; height: 13px; width: 114px; border-bottom: 9px solid currentColor; border-radius: 0 0 60% 60%; }
.section-heading::after { width: 75px; height: 12px; }
.section-heading.green::before, .section-heading.green::after { color: var(--green); }
.section-heading.gold::before, .section-heading.gold::after { color: var(--gold); }
.drink-controls { display: flex; align-items: center; justify-content: space-between; margin: 0 6% 20px; font-size: 11px; font-weight: 600; letter-spacing: 1px; }
.drink-controls > div { display: flex; gap: 10px; }
.carousel-arrow { border: 1px solid rgb(13 20 27 / 25%); width: 44px; height: 44px; border-radius: 50%; font-size: 26px; line-height: 1; transition: color .2s, background .2s; }
.carousel-arrow:hover:not(:disabled) { background: var(--ink); color: var(--cream); }
.drink-carousel { display: flex; align-items: start; gap: clamp(35px, 6.9vw, 100px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(6%, calc((100vw - 1100px) / 2)); padding: 0 max(6%, calc((100vw - 1100px) / 2)) 50px; scrollbar-width: thin; scrollbar-color: var(--orange) var(--peach); }
.drink-card { display: block; flex: 0 0 clamp(290px, 28vw, 420px); scroll-snap-align: start; }
.drink-card:nth-child(even) { margin-top: 65px; }
.drink-photo { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--peach); }
.drink-photo > img { width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.drink-photo .drink-photo-circle { position: absolute; inset: 0; clip-path: ellipse(48% 48% at 50% 50%); opacity: 1; transition: clip-path .5s; }
.drink-photo .drink-photo-circle { transition: none; }
.drink-view-more { position: absolute; bottom: 15px; right: 15px; width: 70px; height: 70px; border-radius: 50%; display: grid; place-content: center; color: var(--ink); background: var(--orange); text-align: center; font-size: 11px; font-weight: 700; opacity: 0; transform: rotate(-15deg); transition: opacity .25s, transform .25s; }
.drink-card:hover .drink-view-more, .drink-card:focus-visible .drink-view-more { opacity: 1; transform: rotate(0); }
.drink-card h3 { display: flex; align-items: center; gap: 9px; padding-top: 10px; font-size: clamp(18px, 1.7vw, 26px); font-weight: 800; letter-spacing: -.5px; }
.drink-card h3 img { width: 30px; height: 44px; object-fit: contain; }
.drink-card h3 > span { color: var(--orange); margin-left: auto; font-size: 19px; }
.news-section { padding: 50px 6% 120px; }
.news-carousel { max-width: 1100px; margin: 0 auto; position: relative; }
.news-slides { position: relative; overflow: hidden; }
.news-pagination { position: absolute; right: 0; top: 0; display: flex; gap: 12px; z-index: 1; }
.news-pagination button { position: relative; overflow: hidden; width: 20px; height: 24px; font-size: 0; }
.news-pagination button::before { content: ''; display: block; width: 12px; height: 12px; border: 3px solid var(--ink); border-radius: 50%; }
.news-pagination button[aria-pressed="true"]::before { background: var(--ink); }
.news-link { display: grid; grid-template-columns: 38% 1fr; gap: 8.5%; }
.news-image { width: 100%; aspect-ratio: 21 / 13; object-fit: cover; }
.news-copy { padding: 0 0 15px; }
.news-copy time { display: block; margin: 0 80px 15px 0; font-size: 12px; font-style: italic; color: #b84100; }
.news-copy h3 { font-size: 25px; font-weight: 600; line-height: 1.65; }
.news-more { display: grid; width: fit-content; font-size: 15px; letter-spacing: .5px; margin-top: 28px; }
.news-more > span { display: block; line-height: .9; font-size: 54px; transition: transform .2s; }
.news-link:hover .news-more > span { transform: translateX(10px); }
.site-footer { overflow: hidden; padding: 0 0 35px; }
.footer-marquee { overflow: hidden; }
.footer-marquee-track { display: flex; width: max-content; padding-top: 80px; }
.footer-marquee img { width: auto; max-width: none; }
.footer-mobile-art { display: none; }
.footer-marquee-letters { display: flex; width: max-content; }
.footer-marquee-letters li { margin-right: 50px; }
.footer-marquee-letters li:nth-child(1) { margin-right: -30px; }
.footer-marquee-letters li:nth-child(2) { margin-top: 90px; }
.footer-marquee-letters li:nth-child(3) { margin-top: 50px; }
.footer-marquee-letters li:nth-child(4) { margin-top: 50px; margin-right: 135px; }
.footer-marquee-letters li:nth-child(7) { margin-top: -80px; }
.footer-marquee-letters li:nth-child(9) { margin-top: 50px; margin-right: 80px; }
.footer-marquee-letters li:nth-child(10) { margin-top: -30px; margin-right: 30px; }
.footer-marquee-letters li:nth-child(11) { margin-top: 20px; margin-right: 30px; }
.footer-marquee-letters li:nth-child(12) { margin-top: 70px; margin-right: 20px; }
.footer-marquee-letters li:nth-child(13) { margin-top: -30px; margin-right: 100px; }
.footer-top { display: flex; justify-content: end; margin: 5px 3.5% 30px; }
.footer-top a { display: grid; text-align: center; gap: 5px; font-size: 14px; letter-spacing: 1px; }
.footer-top span { font-size: 50px; line-height: 1; transition: transform .25s; }
.footer-top a:hover span { transform: translateY(-8px); }
.footer-bottom { display: flex; align-items: end; gap: 40px; padding: 0 3.5%; }
.footer-brand { display: flex; flex: 1; align-items: start; gap: 30px; min-width: 0; }
.footer-brand > a { min-width: 150px; padding-top: 15px; }
.footer-bear { position: relative; width: 180px; height: 150px; flex: 0 0 180px; margin-bottom: -50px; }
.footer-bear img { position: absolute; }
.footer-bear .bear-head { width: 150px; left: 12px; top: 0; transform: rotate(-10deg); z-index: 2; }
.footer-bear .bear-body { width: 120px; left: 18px; top: 95px; }
.footer-bear .bear-drink { width: 75px; left: -8px; top: 70px; z-index: 3; transform: rotate(-15deg); }
.footer-navigation { display: flex; align-self: start; gap: 35px; font-size: 15px; padding-top: 15px; }
.footer-navigation > div { display: grid; gap: 5px; }
.footer-navigation a:hover { color: var(--orange); }
.navigation-caption { color: #746b63; font-style: italic; white-space: nowrap; }
.footer-copyright { font-size: 11px; line-height: 1.3; text-align: right; white-space: nowrap; padding-bottom: 5px; }
.footer-language { display: inline-block; font-size: 16px; font-weight: 600; border-bottom: 3px solid var(--orange); margin-bottom: 18px; }
.error-page { max-width: 700px; padding: 180px 24px 100px; margin: auto; min-height: 65vh; }
.error-page h1 { font-size: 45px; margin-bottom: 20px; }
.error-page p { margin: 15px 0; line-height: 1.6; }
.error-page a { text-decoration: underline; }

@keyframes marquee-drift { to { transform: translateX(-50%); } }
@media (min-width: 1600px) {

    .hero-note { left: 1013px; bottom: 45px; max-width: 472px; font-size: 14px; line-height: 1.3; }
}
@media (max-width: 1199px) {
    .footer-bottom { flex-wrap: wrap; gap: 25px; }
    .footer-brand { flex: 1 0 35%; }
    .footer-navigation { gap: 24px; }
    .footer-copyright { width: 100%; }
    .hero-bottom { left: 30px; gap: 40px; }
    .scroll-prompt { flex-basis: 240px; }
    .hero-note { max-width: 500px; }
    .motion-toggle { right: 5px; bottom: 95px; }
}
@media (max-width: 767px) {
    html { scroll-padding-top: 75px; }
    .site-header { height: 85px; }
    .site-header::before { content: ''; position: absolute; width: 100%; height: 85px; background: var(--orange); clip-path: ellipse(75% 100% at 50% 0); }
    .current-page { top: 17px; left: 15px; font-size: 10px; color: var(--ink); gap: 3px; }
    .current-page img { display: none; }
    .page-marker { font-size: 11px; }
    .current-page i { font-size: 11px; }
    .brand { top: 12px; left: 51%; }
    .brand img { width: 123px; height: 28px; filter: brightness(0) invert(1); }
    .fan-navigation { width: 65px; height: 65px; }
    .fan-links { display: none; }
    .menu-toggle, .menu-toggle:hover { width: 65px; height: 65px; border: 0; border-radius: 0; padding: 0; color: var(--ink); }
    .mobile-menu-label { display: flex; gap: 5px; align-items: center; justify-content: center; font-size: 9px; }
    .mobile-menu-label > span { font-size: 21px; }
    .hero { min-height: 680px; max-height: 1000px; }

    .hero-bottom { inset: auto 20px 45px; flex-direction: column; align-items: start; gap: 26px; }
    .scroll-prompt { flex-basis: auto; gap: 8px; font-size: 11px; }
    .hero-note { flex-basis: auto; max-width: 255px; font-size: 11px; line-height: 1.35; }
    .motion-toggle { bottom: 145px; right: 0; font-size: 10px; }
    .motion-toggle span { display: none; }
    .story { min-height: 620px; height: 85svh; }
    .story-line span { margin-right: 20px; }
    .daily-marquee { bottom: 7%; }
    .daily-marquee img { height: 85px; padding-right: 30px; }
    .features { padding: 75px 20px 115px; }
    .recommendation { min-height: 690px; padding: 0; }
    .recommendation-label { font-size: 20px; margin-bottom: 35px; letter-spacing: 1px; }
    .recommendation h2 { font-size: clamp(23px, 5.7vw, 42px); letter-spacing: 0; }
    .recommendation-art { height: 365px; margin-top: 15px; }
    .recommended-drink { width: 185px; }
    .milk-tea { left: 14%; top: 45px; }
    .green-tea { right: 12%; top: 15px; }
    .splash-left { width: 65%; left: -15%; top: 80px; }
    .splash-right { width: 65%; right: -15%; top: 85px; }
    .orange-one { width: 55px; left: 1%; top: 20px; }
    .orange-two { width: 95px; left: -2%; bottom: 0; }
    .strawberry-one { width: 65px; right: -2%; top: 25px; }
    .strawberry-two { width: 75px; right: 0; bottom: 20px; }
    .recommendation-captions { gap: 20px; justify-content: space-evenly; font-size: 10px; }
    .recommendation-captions span { max-width: 140px; }
    .drinks-section { padding: 75px 0 60px; }
    .section-heading { font-size: 28px; gap: 15px; margin-bottom: 40px; }
    .section-heading::before { width: 90px; border-bottom-width: 7px; }
    .section-heading::after { width: 60px; border-bottom-width: 7px; }
    .drink-controls { margin: 0 20px 20px; font-size: 9px; letter-spacing: .5px; }
    .carousel-arrow { width: 38px; height: 38px; font-size: 23px; }
    .drink-carousel { padding: 0 20px 30px; scroll-padding-inline: 20px; gap: 25px; }
    .drink-card { flex-basis: 78%; }
    .drink-card:nth-child(even) { margin-top: 35px; }
    .drink-card h3 { font-size: 18px; }
    .drink-card h3 img { width: 25px; height: 36px; }
    .drink-view-more { opacity: 1; width: 57px; height: 57px; font-size: 9px; }
    .news-section { padding: 45px 20px 80px; }
    .news-link { display: block; }
    .news-copy { padding-top: 22px; min-height: 235px; }
    .news-copy h3 { font-size: 21px; line-height: 1.4; }
    .news-copy time { font-size: 11px; margin-bottom: 10px; }
    .news-pagination { top: auto; bottom: 0; }
    .news-more { margin-top: 15px; font-size: 12px; }
    .news-more > span { font-size: 46px; }
    .footer-top { margin: 10px 20px 30px; }
    .footer-top span { font-size: 40px; }
    .footer-bottom { padding: 0 20px; gap: 35px; }
    .footer-brand { flex-basis: 100%; justify-content: center; gap: 20px; }
    .footer-bear { width: 115px; flex-basis: 115px; height: 115px; margin-bottom: -15px; }
    .footer-bear .bear-head { width: 105px; left: 8px; }
    .footer-bear .bear-body { width: 85px; left: 12px; top: 65px; }
    .footer-bear .bear-drink { width: 55px; left: -8px; top: 45px; }
    .footer-brand > a { padding-top: 15px; }
    .footer-brand > a img { width: 160px; }
    .footer-navigation { width: 100%; justify-content: space-between; gap: 15px; padding-top: 0; font-size: 12px; }
    .navigation-caption { font-size: 10px; }
    .footer-navigation > div { gap: 10px; }
    .footer-copyright { text-align: left; font-size: 10px; padding-right: 65px; }
    .footer-language { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .hero-video { display: none; }
    .hero { background: var(--cream) url('../images/hero-reading-poster.jpg') center / cover no-repeat; }
    .motion-toggle { display: none; }
}

.intro { position: fixed; inset: 0; width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--cream); z-index: 40; overflow: hidden; }
.is-intro .hero-track { z-index: 41; pointer-events: none; }
.is-intro .site-header { z-index: 45; }
.is-intro .site-header a, .is-intro .site-header button { pointer-events: none; }
.intro-video { width: 100%; height: 100%; object-fit: cover; }
.intro-skip { position: absolute; bottom: 35px; right: 45px; padding: 15px; font-size: 16px; }
.intro-skip span { display: inline-block; font-size: 35px; margin-left: 15px; vertical-align: middle; }
body.is-intro { overflow: hidden; }
.intro-replay { position: absolute; right: 250px; bottom: 0; padding: 10px; font-size: 11px; }
.orange-three { width: 130px; left: 42%; top: 10px; z-index: 1; }
.strawberry-three { width: 95px; right: 37%; bottom: 10px; }
.motion-ready .drinks-section { position: sticky; top: 0; height: 100svh; padding: 120px 0 0; }
.motion-ready .drinks-section .section-heading { margin-bottom: 35px; }
.motion-ready .drink-carousel { width: max-content; padding: 0 calc((100vw - 390px) / 2) 50px; gap: 100px; overflow: visible; scroll-snap-type: none; }
.motion-ready .drink-card { flex: 0 0 390px; width: 390px; }
.motion-ready .drink-controls { position: absolute; bottom: 25px; left: 0; right: 0; z-index: 2; }
.motion-ready .drink-controls > div { margin-right: 100px; }
.footer-bear .bear-head { transform-origin: 50% 85%; transition: transform .5s; }
.footer-bear .bear-drink { transform-origin: left; transition: transform .5s; }
.footer-bear:hover .bear-head { transform: rotate(20deg); }
.footer-bear:hover .bear-drink { transform: rotate(-10deg); }
@media (max-width: 1024px) {
    .motion-ready .story { height: 300svh; }
    .motion-ready .features { height: 700svh; margin-top: -100svh; }
    .motion-ready :is(.features, .feature-intro) .feature-stage { grid-template-columns: 55px minmax(220px, 1fr) 55px; gap: 5px; padding: 0 10px; }
    .motion-ready .feature-column.feature-outer { display: none; }
    .motion-ready .feature-frame { padding: 10svh 0 5svh; }
    .motion-ready .feature-dot img { width: 51px; height: 51px; }
    .motion-ready .feature-caption { font-size: 24px; gap: 35px; }
    .feature-arc-top { width: 185px; height: 21px; }
    .feature-arc-bottom { width: 120px; height: 23px; }
    .motion-ready .recommendation { height: 1500px; margin-top: -80svh; }
    .motion-ready .recommendation-stage { padding-top: 130px; }
}
@media (max-width: 767px) {
    .intro-skip { bottom: 30px; right: 20px; }
    .intro-replay { bottom: 145px; right: 30px; font-size: 10px; }
    .navigation-dialog { width: 100vw; height: 100vw; min-height: 0; padding: 0; border-radius: 0; }
    .navigation-dialog nav a { font-size: 24px; padding: 4px 0; }
    .menu-close { right: 8px; top: 8px; width: 36px; height: 36px; font-size: 33px; }
    .dialog-bottom { font-size: 9px; gap: 8px; }
    .feature-main { gap: 35px 15px; }
    .feature-caption { font-size: 16px; gap: 20px; }
    .feature-dot img { width: 140px; }
    .feature-arc-top { width: 120px; height: 14px; }
    .feature-arc-bottom { width: 80px; height: 16px; }
    .story-wipe { width: 300px; height: 300px; margin: -150px 0 0 -150px; }
    .recommendation-stage { padding: 65px 15px 45px; }
    .motion-ready .recommendation-stage { padding-top: 100px; }
    .motion-ready .recommendation-art { height: 365px; }
    .orange-three { width: 70px; }
    .strawberry-three { width: 55px; }
    .motion-ready .drinks-section { padding-top: 100px; }
    .motion-ready .drink-carousel { padding: 0 calc((100vw - 312px) / 2) 40px; gap: 20px; }
    .motion-ready .drink-card { flex-basis: 312px; width: 312px; }
    .motion-ready .drink-controls { bottom: 30px; }
    .motion-ready .drink-controls > div { margin-right: 70px; }
    .motion-ready .drinks-section .section-heading { margin-bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .intro, .intro-replay { display: none !important; }
    .story-sprite { background: none; }
}

@media (min-width: 1025px) and (max-width: 1599px) {
    .hero-wordmark { height: 480px; }
    .hero-o { top: calc(50% - 280px); zoom: .75; }
    .story-lines { height: 74vh; }
    .story-line img { height: 20px; }
    .footer-marquee-letters li { zoom: .7; }
}
@media (max-width: 1024px) {
    .hero-wordmark { height: 430px; }
    .hero-o { display: none; }
    .hero-note { left: 20px; bottom: 30px; max-width: 400px; font-size: 14px; line-height: 1.2; }
    .hero-bottom { left: 20px; bottom: 30px; }
    .scroll-prompt { left: 20px; bottom: auto; top: 125px; width: 146px; transform: translateY(-50%); }
    .scroll-prompt img { width: auto; height: auto; }
    .story-cup { width: 298px; top: 50%; }
    .story-line img { height: 30px; }
    .story-lines { height: 74vh; }
    .motion-ready .feature-intro { display: block; height: 2000px; margin-top: -150svh; position: relative; z-index: 3; }
    .motion-ready .features { opacity: 0; }
    .motion-ready .features.is-active { opacity: 1; }
    .motion-ready .feature-intro.is-covered { visibility: hidden; }
    .footer-marquee-track { height: 190px; align-items: center; padding-top: 0; }
    .footer-marquee-letters { display: none; }
    .footer-mobile-art { display: block; height: 160px; flex: 0 0 auto; }
}
@media (max-width: 639px) {
    .hero-note { max-width: 238px; font-size: 10px; }
    .story-line img { height: 19px; }
    .motion-ready .feature-intro { margin-top: -180svh; }
}
.floating-bear { width: 146px; height: 151px; position: fixed; bottom: 40px; right: 30px; z-index: 6; transition: 0.5s all; opacity: 1; pointer-events: auto; clip-path: path("M145.01,62.16c-.06-.3-.11-.6-.11-.6-.19-1-.5-2.46-1.35-6.36-4.8-21.9-9.32-40.05-12.95-53.81-28.91-3.24-52.19-.22-67.71,3.03C39.86,9.24,21.29,13.64,9.59,30.19-1.11,45.32-.45,62.97,.47,71.33c2,9.94,6.84,25.44,19.33,37.89,0,0,11.72,11.68,31.01,20.1,.11,.05,5.98,2.61,5.98,2.61,.84,.23,3.44,.87,3.44,.87,.5,.91,1.13,1.97,1.9,3.1,.41,.61,1.04,1.49,1.85,2.51,.41,.52,1.57,1.94,3.29,3.63,2.61,2.57,5.04,4.3,6.3,5.15,2.4,1.62,4.7,2.83,6.77,3.75,4.33,1.61,11.08,3.55,19.5,3.62,2.49,.02,6.19,.04,10.92-.99,2.29-.5,12.64-2.93,21.17-11.17,2.61-2.52,4.34-4.91,4.88-5.66,1.03-1.45,2.92-4.31,4.5-8.25,1.91-4.77,2.53-9.34,2.7-10.7,.96-7.5,1.58-28.09,1.01-55.64Z"); }
@media print, screen and (max-width: 64.06125em) {
    .floating-bear { right: 20px; }
}
@media print, screen and (max-width: 39.99875em) {
    .floating-bear { zoom: 0.8; }
}
.floating-bear .circle { position: absolute; width: 89px; height: 85px; background-color: #2e2a26; border-radius: 50%; z-index: 1; right: 2px; bottom: -4px; }
.floating-bear .hover-link { position: absolute; z-index: 0; top: -3px; left: 10px; transform: translate(40px, 150px); transition: 1s all; }
.floating-bear .hover-link div { position: absolute; width: max-content; }
.floating-bear .hover-link .menu { clip-path: path("M113.45,8.44c3.01,5.52,1.38,14.08-3.14,17.54-5.53,4.22-11.58-2.02-29.81-3.03-2.99-.17-13.74-.59-26.53,3.03-8.47,2.4-13.64,5.39-14.8,6.07-3.08,1.81-8.16,4.8-12.99,10.35-5.26,6.04-5.37,9.55-10.07,11.55-.66,.28-5.32,2.19-9.63,.07C1.18,51.42-.59,44.21,.17,39.2c.99-6.5,6.49-10.77,15.15-16C31.97,13.13,40.69,7.85,56.75,4.25c6.63-1.49,48.48-10.87,56.7,4.19Z"); }
.floating-bear .hover-link .menu a { display: block; margin-top: 5px; transition: 0.5s all; }
.floating-bear .hover-link .menu a:is(:hover, :focus-within) { opacity: 0.6; }
.floating-bear .hover-link .store { left: 10px; top: 26px; clip-path: path("M113.41,11.24c2.8,5.82,1.26,14.17-3.14,17.54-5.53,4.22-11.58-2.02-29.81-3.03-2.99-.17-13.74-.59-26.53,3.03-8.47,2.4-13.64,5.39-14.8,6.07-3.08,1.81-8.16,4.8-12.99,10.35-5.26,6.04-5.37,9.55-10.07,11.55-.66,.28-5.32,2.19-9.63,.07C1.23,54.25-.52,47.09,.13,42c.72-5.64,5.58-9.73,15.29-17.93,5.13-4.33,11.48-9.62,21.34-14.38,.24-.12,6.16-2.96,12.36-4.88C67.1-.79,105.85-4.47,113.41,11.24Z"); }
.floating-bear .hover-link .store a { display: block; margin-top: 5px; transition: 0.5s all; }
.floating-bear .hover-link .store a:is(:hover, :focus-within) { opacity: 0.6; }
.floating-bear .bear { position: relative; width: max-content; left: 10px; bottom: -50px; z-index: 2; transform: translateY(47px); transition: 0.75s all; }
@media print, screen and (max-width: 64.06125em) {
    .floating-bear .bear { left: 9px; bottom: -64px; transform: translateY(47px) rotate(-8deg); transform-origin: bottom; }
}
.floating-bear .bear div { width: max-content; position: absolute; }
.floating-bear .bear .big-body { left: 37px; top: 0; }
.floating-bear .bear .drink { left: 35px; top: 41px; z-index: 1; transform-origin: right; transform: translateY(10px) rotate(-15deg); transition: 0.75s all; }
.floating-bear:is(:hover, :focus-within) .bear { transform: translateY(0px); }
@media print, screen and (max-width: 64.06125em) {
    .floating-bear:is(:hover, :focus-within) .bear { transform: translateY(0px) rotate(-8deg); }
}
.floating-bear:is(:hover, :focus-within) .drink { transform: translateY(0px) rotate(0deg); }
.floating-bear:is(:hover, :focus-within) .hover-link { transform: translate(0, 0); }
.floating-bear img { max-width: none; }
.floating-bear .circle > img { position: absolute; }
.floating-bear .mascot-menu { left: 10px; top: 0; }
.floating-bear .mascot-store { left: 32px; top: 15px; }
.floating-bear .mascot-mobile { display: none; }
@media (max-width: 1024px) {
    .floating-bear .mascot-menu, .floating-bear .mascot-store { display: none; }
    .floating-bear .mascot-mobile { display: block; zoom: 1.25; left: 2px; top: 3px; }
}

@media (max-width: 1024px) {
    .site-header { display: flex; align-items: flex-start; }
    .site-header::before { content: ''; position: absolute; inset: -5vw 0 auto; width: 100%; height: 16.3555vw; background: url('../images/header-mobile.svg') top / 100% auto no-repeat; clip-path: none; }
    .current-page { position: relative; top: auto; left: auto; padding: 10px 0 0 15px; flex: 10 1 0; color: white; font-size: 10px; }
    .current-page img { display: none; }
    .current-page i { font-size: 12px; }
    .page-marker { font-size: 10px; }
    .brand { position: relative; top: auto; left: auto; transform: none; padding-top: 10px; flex: 11.5 1 0; }
    .brand img { width: 106.16px; height: 22.34px; filter: none; }
    .fan-navigation { position: relative; top: auto; right: auto; width: auto; height: auto; padding: 10px 15px 0 0; flex: 1 1 0; }
    .fan-links { display: none; }
    .menu-toggle, .menu-toggle:hover { position: relative; width: 23px; height: 18px; border: 0; border-radius: 0; padding: 0; }
    .mobile-menu-label { display: block; }
}
@media (max-width: 639px) {
    .site-header::before { top: 0; }
    .current-page { flex: 5.5 1 0; }
    .brand { flex: 8 1 0; }
}

.scroll-prompt img { max-width: none; }

.motion-ready .feature-caption { font-size: 44px; gap: 0; letter-spacing: .5px; }
.motion-ready .feature-copy { margin: 50px 0; }
@media (max-width: 1024px) {
    .motion-ready .feature-mobile-dot { display: block; }
    .motion-ready .feature-caption { font-size: 24px; margin: -61px 0; }
    .motion-ready .feature-copy { margin: 35px 0 38px; }
    .motion-ready .feature-arc-top { width: 168.3px; height: 19px; }
    .motion-ready .feature-arc-bottom { width: 99.9px; height: 19px; }
    .motion-ready :is(.features, .feature-intro) .feature-stage { grid-template-columns: 51px minmax(0, 1fr) 51px; gap: 0; padding-inline: clamp(12px, 6.923vw, 27px); }
}
@media (min-width: 640px) and (max-width: 1024px) {
    .motion-ready :is(.features, .feature-intro) .feature-stage { grid-template-columns: 80px minmax(0, 1fr) 80px; padding-inline: 7%; }
    .motion-ready .feature-dot img { width: 80px; height: 80px; }
}

@media (min-width: 1025px) {
    .motion-ready :is(.features, .feature-intro) .feature-stage {
        --feature-dot-size: 82px;
        --feature-inner-gap: 200px;
        grid-template-columns: var(--feature-dot-size) minmax(0, 1fr) var(--feature-dot-size) var(--feature-inner-gap) max-content var(--feature-inner-gap) var(--feature-dot-size) minmax(0, 1fr) var(--feature-dot-size);
        gap: 0;
        padding-inline: 55px;
    }
    .motion-ready .feature-column:nth-child(1) { grid-column: 1; }
    .motion-ready .feature-column:nth-child(2) { grid-column: 3; }
    .motion-ready .feature-column:nth-child(3) { grid-column: 5; }
    .motion-ready .feature-column:nth-child(4) { grid-column: 7; }
    .motion-ready .feature-column:nth-child(5) { grid-column: 9; }
    .motion-ready .feature-dot img { width: var(--feature-dot-size); height: var(--feature-dot-size); }
}
@media (min-width: 1025px) and (max-width: 1599px) {
    .motion-ready :is(.features, .feature-intro) .feature-stage { --feature-dot-size: 75px; --feature-inner-gap: 105px; }
    .motion-ready .feature-frame { padding: 40px 0 20px; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
    .motion-ready :is(.features, .feature-intro) .feature-stage { --feature-dot-size: 70px; --feature-inner-gap: 55px; }
}

/* Recommendation geometry and breakpoints from the reference scene. */
.motion-ready .recommendation { overflow-x: clip; }
.motion-ready .recommendation-stage { height: auto; padding: 0; overflow: visible; }
.motion-ready .recommendation-art { margin: 0; width: 0; height: 0; max-width: none; }
.motion-ready .recommendation-layer { width: max-content; height: auto; bottom: auto; right: auto; transform: none; }
.motion-ready .recommendation-captions { gap: 0; letter-spacing: -1px; font-weight: 400; }
.motion-ready .recommendation-stage { position: relative; margin-bottom: 470px; position: sticky; top: 16%; }
@media screen and (min-width: 75em) and (max-width: 99.99875em) {
    .motion-ready .recommendation-stage { zoom: 0.85; top: 17%; }
}
@media print, screen and (min-width: 64.0625em) and (max-width: 74.99875em) {
    .motion-ready .recommendation-stage { zoom: 0.85; }
}
@media print, screen and (min-width: 40em) and (max-width: 64.06125em) {
    .motion-ready .recommendation-stage { zoom: 1.5; margin-bottom: 100px; }
}
@media print, screen and (max-width: 39.99875em) {
    .motion-ready .recommendation-stage { margin-bottom: 100px; }
}
.motion-ready .recommendation-label { font-size: 36px; font-weight: 500; color: #0b0b0b; letter-spacing: 3px; margin-bottom: 80px; }
@media print, screen and (max-width: 99.99875em) {
    .motion-ready .recommendation-label { margin-bottom: 112px; }
}
@media print, screen and (max-width: 74.99875em) {
    .motion-ready .recommendation-label { margin-bottom: 60px; }
}
@media print, screen and (max-width: 64.06125em) {
    .motion-ready .recommendation-label { margin-bottom: 35px; font-weight: 700; }
}
@media print, screen and (max-width: 39.99875em) {
    .motion-ready .recommendation-label { font-size: 24px; }
}
.motion-ready .recommendation h2 { font-size: 88px; color: #0b0b0b; letter-spacing: 3px; font-weight: 900; line-height: 1.05; margin-bottom: 60px; }
@media print, screen and (max-width: 99.99875em) {
    .motion-ready .recommendation h2 { margin-bottom: 20px; }
}
@media print, screen and (max-width: 64.06125em) {
    .motion-ready .recommendation h2 { font-size: 95px; text-wrap: nowrap; text-align: center; width: max-content; position: relative; left: -30%; margin-bottom: 100px; }
}
@media print, screen and (max-width: 39.99875em) {
    .motion-ready .recommendation h2 { left: -100%; margin-bottom: 70px; }
}
.motion-ready .recommendation-captions span { font-size: 36px; color: #0b0b0b; letter-spacing: -1px; font-weight: 400; }
@media print, screen and (max-width: 64.06125em) {
    .motion-ready .recommendation-captions span { font-size: 32px; font-weight: 500; }
}
@media print, screen and (max-width: 39.99875em) {
    .motion-ready .recommendation-captions span { font-size: 22px; font-weight: 400; }
}
.motion-ready .recommendation-captions span:first-child { margin-right: 650px; }
@media print, screen and (max-width: 74.99875em) {
    .motion-ready .recommendation-captions span:first-child { margin-right: 300px; }
}
@media print, screen and (max-width: 64.06125em) {
    .motion-ready .recommendation-captions span:first-child { margin-right: 0; margin-left: -80px; margin-bottom: 20px; }
}
@media print, screen and (max-width: 64.06125em) {
    .motion-ready .recommendation-captions span:last-child { margin-right: -130px; margin-left: 0; }
}
@media print, screen and (max-width: 64.06125em) {
    .motion-ready .recommendation-captions { flex-direction: column; }
}
.motion-ready .recommendation-art { position: absolute; left: 50%; top: 68%; zoom: 1.2; }
@media print, screen and (max-width: 64.06125em) {
    .motion-ready .recommendation-art { zoom: 0.55; top: 300px; width: 100vw; }
}
.motion-ready .orange-one { left: -395px !important; top: -77px !important; z-index: 4; }
.motion-ready .orange-three { left: 17px !important; top: -235px !important; z-index: 1; }
.motion-ready .orange-two { left: -95px !important; top: 11px !important; z-index: 5; }
.motion-ready .strawberry-one { left: 213px !important; top: -80px !important; transform-origin: left bottom; z-index: 3; }
.motion-ready .strawberry-three { left: 81px !important; top: -21px !important; z-index: 4; transform-origin: left top; }
.motion-ready .strawberry-two { left: -313px !important; top: 5px !important; z-index: 4; transform-origin: right top; }
.motion-ready .splash-left { max-width: 465px; left: -570px !important; top: -279px !important; z-index: 2; }
.motion-ready .splash-right { left: 28px !important; top: -254px !important; z-index: 3; }
.motion-ready .milk-tea { max-width: 287px; left: -217px !important; top: -199px !important; z-index: 2; }
.motion-ready .green-tea { max-width: 287px; left: -40px !important; top: -195px !important; z-index: 4; }
.motion-ready .splash-left > img { --burst-x: 22.5; --burst-y: 8.7; --burst-delay: 0.05; transform-origin: right center; }
.motion-ready .splash-right > img { --burst-x: -15; --burst-y: 5.7; --burst-delay: 0.05; transform-origin: left center; }
.motion-ready .orange-one > img { --burst-x: 105; --burst-y: 9; --burst-delay: 0.05; transform-origin: right center; }
.motion-ready .orange-two > img { --burst-x: 37.5; --burst-y: -12; --burst-delay: 0.15; transform-origin: left top; }
.motion-ready .orange-three > img { --burst-x: -75; --burst-y: 7.5; --burst-delay: 0.05; transform-origin: left center; }
.motion-ready .strawberry-one > img { --burst-x: -150; --burst-y: 75; --burst-delay: 0; transform-origin: center center; }
.motion-ready .strawberry-two > img { --burst-x: 21; --burst-y: -15; --burst-delay: 0.15; transform-origin: center center; }
.motion-ready .strawberry-three > img { --burst-x: -75; --burst-y: -0.45; --burst-delay: 0.05; transform-origin: center center; }
.motion-ready .milk-tea > img { --burst-x: -30; --burst-y: 2.4; --burst-delay: 0.075; transform-origin: right center; }
.motion-ready .green-tea > img { --burst-x: 30; --burst-y: 2.4; --burst-delay: 0.1; transform-origin: left center; }

.motion-ready .recommendation-captions { align-items: center; }
.motion-ready .recommendation-captions span { max-width: none; white-space: nowrap; }

.motion-ready .recommendation-label, .motion-ready .recommendation-captions { line-height: 1; }