:root { --paper: #081e17; --yellow: #ffd05a; --red: #ffce56; --line: #ffffff18; --brand-green: #216344; }
body.experience-3d { background: #081e17; color: #f6f7ec; }
.experience-3d h1, .experience-3d h2, .experience-3d h3 { font-weight: 800; letter-spacing: -.005em; }
.experience-3d .container { width: min(1480px, calc(100% - clamp(44px, 9vw, 160px))); }
.site-header { background: #071c15e8; backdrop-filter: blur(18px); color: #f6f7ec; border-bottom: 1px solid #d4f3cb12; box-shadow: 0 8px 30px #0001; }
.header-inner { min-height: 104px; }
.brand-logo { width: 124px; height: 85px; filter: drop-shadow(0 6px 10px #0005); }
.desktop-nav a { font-size: 14px; color: #e5efe3; }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: var(--yellow); }
.selection-toggle { color: #eef5e8; border-color: #ffffff30; background: #ffffff05; }
.mobile-menu-toggle { border-color: #ffffff30; }
.mobile-menu-toggle span { background: #eff4e7; }
.mobile-nav { background: #0b261c; border-color: #ffffff1c; }
.mobile-nav a { color: #f3f8ec; }
.button { box-shadow: 0 5px 0 #0003, 0 12px 26px #0002; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-3px); box-shadow: 0 8px 0 #0002, 0 18px 32px #0003; }
.button:active { transform: translateY(2px); box-shadow: 0 2px 0 #0003; }
.button-yellow { color: #112a1d; background: linear-gradient(135deg,#ffda75,#efb82e); border-top: 1px solid #ffebaa; }
.button-dark { color: #f4f7ec; background: linear-gradient(140deg,#297447,#154c31); border: 1px solid #ffffff16; }
.button-dark:hover { background: #2a774d; }
.button-outline { color: #eef5e7; border-color: #b7d3be45; }
.hero-3d { background: radial-gradient(ellipse at 82% 34%,#256344 0,#102e21 36%,#061b14 76%); position: relative; overflow: hidden; }
.hero-3d::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .16; background-image: radial-gradient(#c4dbac 1px,transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(90deg,transparent,#000); }
.hero-3d .hero-inner { position: relative; min-height: min(820px,calc(100svh - 104px)); grid-template-columns: 44% 56%; }
.hero-3d .hero-copy { padding: 62px 18px 70px clamp(36px,5.5vw,110px); }
.hero-3d .eyebrow { color: #f2d993; font-size: 12px; letter-spacing: .13em; gap: 13px; margin-bottom: 28px; }
.hero-rule { width: 30px; height: 1px; background: var(--yellow); }
.hero-3d h1 { font-size: clamp(4.4rem,6.7vw,8rem); line-height: .92; color: #fffcef; text-shadow: 1px 1px #b7c3a4,2px 2px #859b77,3px 3px #3c5a3c,4px 4px #214329,5px 5px #183420,10px 14px 23px #0005; }
.hero-3d h1 span { color: #ffd05a; text-shadow: 1px 1px #bb892a,2px 2px #9d7425,3px 3px #6b501d,4px 4px #403a1b,5px 5px #2c331b,9px 14px 22px #0005; }
.hero-3d .hero-description { max-width: 470px; font-size: 17px; line-height: 1.75; color: #c6d6c6; margin-top: 28px; }
.hero-3d .hero-description br { display: block; }
.hero-3d .hero-buttons { gap: 24px; }
.hero-mobile-copy { display: none; }
.hero-arrow { display: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-3d .hero-meta { font-size: 11px; color: #afc5b4; margin-top: 38px; }
.stage-3d { position: relative; min-width: 0; isolation: isolate; perspective: 1200px; --pointer-x: 0; --pointer-y: 0; }
.stage-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.stage-visual { position: absolute; inset: 15% 1% 14%; z-index: 2; display: grid; place-items: center; transform-style: preserve-3d; transform: translate3d(calc(var(--pointer-x)*17px),calc(var(--pointer-y)*-12px),65px) rotateX(calc(var(--pointer-y)*-5deg)) rotateY(calc(var(--pointer-x)*7deg)); }
.stage-food { width: 100%; height: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 26px 20px #0008); animation: food-float 7s ease-in-out infinite; }
.stage-ground { position: absolute; z-index: -1; left: 13%; right: 13%; bottom: 11%; height: 18%; border-radius: 50%; background: radial-gradient(ellipse,#37683e 0,#123c29 49%,#071a12 70%); transform: rotateX(50deg); border: 1px solid #e9bd4660; box-shadow: 0 20px 0 #092719,0 35px 45px #0005; }
.stage-orbit { position: absolute; z-index: -1; width: 75%; aspect-ratio: 1; left: 13%; top: 5%; border: 1px solid #e6c35760; border-radius: 50%; transform: rotateY(35deg) rotateZ(-15deg); }
.webgl-ready .stage-orbit, .webgl-ready .stage-ground { opacity: 0; }
.stage-caption { position: absolute; z-index: 3; transform-style: preserve-3d; backdrop-filter: blur(16px); border: 1px solid #e0f0ca28; background: linear-gradient(120deg,#b5d39915,#092e25ba); border-radius: 12px; padding: 18px 21px; color: #f9f9eb; box-shadow: 0 20px 35px #0003; }
.stage-caption-top { top: 9%; right: 7%; transform: rotate(4deg) translate3d(calc(var(--pointer-x)*-20px),calc(var(--pointer-y)*-12px),100px); }
.stage-caption > span { display: block; color: var(--yellow); font-size: 10px; letter-spacing: .14em; font-weight: 700; }
.stage-caption strong { display: block; font-family: var(--display); font-size: 31px; line-height: 1; font-weight: 800; margin: 8px 0; }
.stage-caption small { font-size: 11px; color: #c0d2bc; }
.stage-price { position: absolute; z-index: 4; left: 4%; bottom: 12%; background: linear-gradient(130deg,#ffe79c,#e6b435); color: #10271a; padding: 17px 23px; border-radius: 12px; border-top: 1px solid #fff5c2; box-shadow: 0 7px 0 #886d29,0 22px 35px #0006; transform: rotate(-6deg) translate3d(calc(var(--pointer-x)*-14px),calc(var(--pointer-y)*14px),120px); }
.stage-price > span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .07em; }
.stage-price strong { display: block; font-family: var(--display); font-size: 52px; font-weight: 800; line-height: 1.2; }
.stage-price strong small { font-family: var(--body); font-size: 10px; font-weight: 700; }
.stage-price > span:last-child { font-weight: 500; font-size: 11px; letter-spacing: 0; }
.motion-control { position: absolute; right: 8%; bottom: 5%; z-index: 4; border: 1px solid #cee5bf30; background: #0424195c; color: #cbdbbf; border-radius: 30px; padding: 8px 14px; display: flex; align-items: center; gap: 9px; font-size: 11px; }
.motion-control:hover { background: #205b36; color: #fff; }
.ticker { background: #123e29; color: #c5ddb2; border-top: 1px solid #5d794147; border-bottom: 1px solid #5d794147; padding: 17px 0; }
.ticker span { color: #dce9c9; font-size: 20px; letter-spacing: .05em; }
.ticker b { color: #e7c465; }
.menu-section,.range-section { padding-top: 78px; padding-bottom: 85px; }
.section-top .eyebrow,.story-copy .eyebrow,.selection-section .eyebrow,.location-copy .eyebrow,.faq-section .eyebrow { color: #b5d093; }
.section-top h2 { color: #f3f5e5; font-size: clamp(3.8rem,5vw,5.2rem); }
.section-top h2 span,.story-copy h2 span,.selection-section h2 span,.location-copy h2 span { color: var(--yellow); }
.section-top > p,.section-end > span { color: #bcd0bd; }
.menu-grid { perspective: 1300px; gap: 26px; }
.product-card { position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(150deg,#153b2a,#0d2a20); border: 1px solid #afcfa22a; box-shadow: 0 8px 0 #04130daa,0 24px 38px #0003; transition: transform .28s,box-shadow .28s,border-color .28s; transform-style: preserve-3d; }
.product-card:hover { border-color: #cfb5587d; box-shadow: 0 11px 0 #04130db8,0 32px 45px #0005; }
.product-content { padding: 25px; }
.product-photo { aspect-ratio: 1.5; }
.product-category { color: #ccdfb2; font-size: 11px; }
.product-title h3 { color: #f3f6e8; font-weight: 800; }
.product-title > strong { color: var(--yellow); }
.product-content > p,.catalogue .product-content > p { color: #b7cbbb; font-size: 14px; }
.product-choose,.catalogue .product-choose { color: #f0f4de; border-color: #cadac226; }
.product-choose > span { color: #102c1c; background: #eaca62; box-shadow: 0 3px 0 #987f32; }
.product-tag { color: #192d1a; background: linear-gradient(140deg,#ffe8a0,#e8bd42); box-shadow: 0 3px 0 #8c7828,0 5px 15px #0003; }
.concept-section { background: radial-gradient(ellipse at 75% 25%,#275c39,#102e20 65%); border-block: 1px solid #d0e0a31c; }
.concept-grid h2 { color: #ffce5b; font-size: clamp(3.3rem,5vw,5rem); }
.concept-image,.story-image,.selection-section > img { border: 1px solid #ebddb12a; box-shadow: 0 9px 0 #061f14,0 26px 35px #0005; border-radius: 17px; }
.concept-image { transform: perspective(1300px) rotateY(-6deg) rotateZ(2deg); }
.concept-grid > div > p:not(.eyebrow) { color: #cbdcc7; }
.range-card { border-radius: 16px; color: #f4f5e9; background: #103224; border-color: #ffffff1c; box-shadow: 0 8px 0 #04150e,0 20px 25px #0004; transition: transform .3s; }
.range-card:hover { transform: perspective(900px) translateY(-8px) rotateX(3deg); }
.range-card p,.range-card div > span { color: #bdcfb9; }
.formula-section { background: radial-gradient(ellipse at 15% 60%,#3a653b,#173f27 70%); border-color: #9fbd7627; }
.formula-number { color: #ffce58; text-shadow: 1px 1px #9b7621,2px 2px #665226,4px 4px #15361d,9px 12px 24px #0005; }
.formula-inner .eyebrow { color: #c9de9b; }
.formula-inner h2 { color: #f4f6e7; }
.formula-inner p:not(.eyebrow) { color: #c4d7c2; }
.address-poster { background: linear-gradient(130deg,#24583a,#133524); border: 1px solid #cae2af40; box-shadow: 0 10px 0 #042213,0 30px 35px #0004; transform: perspective(1200px) rotateY(-5deg) rotateZ(1deg); }
.location-copy > p:not(.eyebrow),.location-details span { color: #b9cdbd; }
.location-details { border-color: #ffffff1c; }
.location-details strong { color: #f2f6e7; }
.faq-list details { border-color: #d1e4bc22; }
.faq-list summary { color: #f2f7e7; }
.faq-list details p { color: #bccfbc; }
.page-intro { background: radial-gradient(ellipse at 90% 10%,#2d6541,#102e1f 65%); color: #f3f6e6; border-color: #e6d6a123; position: relative; }
.page-intro h1 { color: #f5f8e8; text-shadow: 1px 1px #b2c99c,2px 2px #718367,3px 3px #345436,7px 9px 15px #0004; }
.page-intro h1 span { color: #ffce57; }
.page-intro .eyebrow { color: #d5dba4; }
.page-intro .intro-copy { color: #c1d3bb; font-size: 17px; }
.page-intro::after { color: #ffd96b12; text-shadow: 8px 14px 30px #0002; transform: perspective(800px) rotateY(-25deg); }
.intro-pills > span { background: #223f2c; border-color: #d3dfac2b; color: #f1efca; box-shadow: 0 4px 0 #051a10; }
.category-sidebar > .eyebrow { color: #cfdbad; }
.category-filter { color: #c8d5c0; font-size: 14px; }
.category-filter span { background: #ffffff12; color: #d2e0c7; }
.category-filter.active { color: #182e1e; background: linear-gradient(135deg,#ffe5a2,#e3bd52); box-shadow: 0 4px 0 #9d8130; }
.category-filter.active span { color: #173120; background: #0000000f; }
.category-filter.active:hover { background: #f4d77e; }
.category-filter:hover { background: #214631; }
.results-heading h2 { color: #f2f7e4; }
.results-heading > span,.menu-note { color: #b2c7b4; }
.search-field { background: #f6f7ec; border-color: #cedbb74d; box-shadow: 0 5px 0 #011f15; color: #173b26; }
.search-field input { color: #163d26; }
.sort-field { color: #cad8c2; }
.sort-field select { color: #183f2a; background: #f4f5e8; }
.catalogue .product-title h3 { color: #f4f6e9; font-size: 27px; }
.catalogue .product-category { color: #b8d396; }
.empty-state { background: #173e2a; border-color: #cedab42a; color: #f5f6e8; }
.empty-state p { color: #c0d5bb; }
.steps-grid article { border-color: #cde3ab33; }
.steps-grid article > span { color: #efc65f; }
.steps-grid article p,.story-copy p:not(.eyebrow),.selection-section p:not(.eyebrow) { color: #bcd1bf; }
.values-section { background: #153a26; }
.order-option { color: #f4f7e8; background: linear-gradient(140deg,#1c4b32,#113021); border-color: #ccdfa02d; box-shadow: 0 10px 0 #04180e,0 25px 32px #0005; }
.order-option p { color: #c7dbc4; }
.yellow-option { background: linear-gradient(135deg,#ffe8a3,#e5c564); color: #143523; border-color: #ffefa8; }
.yellow-option p { color: #34513c; }
.order-badge { background: #092a19; color: #e0eec8; }
.prose p { color: #c3d3c0; }
.prose a { color: #f7dc89; }
.site-footer { background: #061a11; color: #bcd0bb; border-top: 1px solid #d0e2ab1c; }
.footer-grid h3 { color: #f6f7e9; }
.footer-bottom { border-color: #cedaa51e; }
.preview-mark { position: fixed; z-index: 28; left: 18px; bottom: 16px; background: #081f16e8; color: #e6d798; border: 1px solid #cfbb7559; border-radius: 30px; padding: 9px 15px; font-size: 10px; font-weight: 650; letter-spacing: .08em; box-shadow: 0 4px 16px #0004; backdrop-filter: blur(12px); pointer-events: none; }
dialog { color: #f1f7e3; background: #113021; }
.dialog-description { color: #c1d2bb; }
.product-form > .eyebrow { color: #cedba8; }
.dialog-base-price { color: #f0cd72; }
.product-form legend small,.allergen-note,.selection-disclaimer,.basket-note { color: #bfd0bd; }
.choice-row,.topping-options label { background: #1c422e; color: #edf3e5; border-color: #bfd6ae3b; }
.choice-row:has(input:checked),.topping-options label:has(input:checked) { background: #335936; border-color: #e7c66b; }
.product-form select { color: #173d29; }
.option-note { background: #21452e; color: #d0debf; }
.quantity-control { background: #0e281c; border-color: #b8cf9b54; }
.quantity-control button { color: #ebf3db; }
.basket-line { border-color: #ffffff20; }
.basket-line h3 { color: #f5f6e9; }
.basket-line p { color: #c1d4bc; }
.basket-line > strong,.basket-total strong { color: #efd07a; }
.basket-line-controls .remove-line,.clear-basket { color: #d7d9ae; }
.empty-basket p { color: #c1d1b8; }
.toast { color: #f4f6df; background: #123c23; border-color: #ccdea43b; }
.has-reveals .reveal-section { transition: opacity .6s,transform .6s; }
.has-reveals .reveal-section:not(.is-visible) { opacity: 0; transform: translateY(28px); }
.motion-paused *, .motion-paused *::before,.motion-paused *::after { animation-play-state: paused!important; }
@keyframes food-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-15px) rotate(1deg); } }
@media(min-width:2200px) {
 .hero-3d .hero-inner { min-height: 920px; grid-template-columns: 43% 57%; }
 .hero-3d .hero-copy { padding-left: 6vw; }
 .hero-3d h1 { font-size: 160px; }
 .hero-3d .hero-description { font-size: 20px; max-width: 540px; }
 .stage-visual { inset: 14% 9% 12%; }
 .stage-caption { padding: 24px 28px; }
 .stage-caption strong { font-size: 40px; }
 .stage-caption small { font-size: 14px; }
 .stage-price { padding: 23px 32px; left: 8%; }
 .stage-price strong { font-size: 68px; }
}
@media(max-width:1100px) {
 .hero-3d .hero-inner { grid-template-columns: 47% 53%; min-height: 690px; }
 .hero-3d .hero-copy { padding: 42px 18px 56px 32px; }
 .hero-3d h1 { font-size: 80px; }
 .hero-3d .hero-description { font-size: 16px; }
 .hero-3d .hero-buttons { gap: 23px; }
 .stage-visual { inset: 18% -5% 16%; }
 .stage-caption-top { right: 4%; top: 13%; }
 .stage-price { left: 4%; bottom: 13%; }
 .stage-caption strong { font-size: 28px; }
 .stage-caption { padding: 15px 17px; }
}
@media(max-width:760px) {
 .hero-desktop-copy { display: none; }
 .hero-mobile-copy { display: inline; }
 .hero-arrow { display: block; }
 .experience-3d .container,.header-inner { width: calc(100% - 40px); }
 .header-inner { min-height: 88px; }
 .brand-logo { width: 100px; height: 69px; }
 .hero-3d { min-height: 0; background: radial-gradient(ellipse at 50% 45%,#245f41 0,#102e21 45%,#061b14 85%); }
 .hero-3d::before { opacity: .08; mask-image: linear-gradient(transparent,#000,transparent); }
 .hero-3d .hero-inner { grid-template-columns: minmax(0,1fr); grid-template-areas: 'eyebrow' 'heading' 'description' 'bowl' 'buttons' 'meta'; min-height: 0; padding: 26px 20px 25px; text-align: center; }
 .hero-3d .hero-copy { display: contents; }
 .hero-3d .eyebrow { grid-area: eyebrow; justify-content: center; font-size: 9px; letter-spacing: .12em; margin: 0 0 15px; }
 .hero-rule { width: 18px; }
 .hero-3d h1 { grid-area: heading; width: 100%; font-size: clamp(38px,11.5vw,65px); line-height: .98; margin: 0; letter-spacing: -.015em; text-shadow: 1px 1px #859b77,2px 3px #214329,4px 7px 15px #0004; }
 .hero-3d h1 span { text-shadow: 1px 1px #a47927,2px 3px #403a1b,4px 7px 15px #0004; }
 .hero-desktop-break { display: none; }
 .hero-3d .hero-description { grid-area: description; font-size: 13px; line-height: 1.55; max-width: none; margin: 13px 0 0; }
 .hero-3d .hero-buttons { grid-area: buttons; flex-direction: column; width: 100%; gap: 16px; margin: 17px 0 0; }
 .hero-3d .hero-buttons .button { width: 100%; min-height: 54px; justify-content: space-between; padding: 15px 20px; font-size: 15px; border-radius: 10px; }
 .hero-3d .hero-buttons .text-link { font-size: 12px; color: #d0deca; }
 .hero-3d .hero-meta { grid-area: meta; justify-content: center; flex-direction: row; margin: 17px 0 0; font-size: 9px; letter-spacing: .08em; gap: 0; }
 .hero-3d .hero-meta > span:first-child { display: none; }
 .hero-3d .hero-meta > span:last-child { border: 0; padding: 0; }
 .hero-3d .stage-3d { grid-area: bowl; height: clamp(280px,81vw,370px); margin: 2px -20px 0; }
 .hero-3d .stage-visual { inset: -3% -1% 6%; }
 .hero-3d .stage-food { animation: mobile-food-float 7s ease-in-out infinite; }
 .hero-3d .stage-caption-top { top: auto; bottom: 0; left: 20px; right: auto; transform: none; text-align: left; }
 .hero-3d .stage-caption { padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
 .hero-3d .stage-caption strong { margin: 0; font-family: var(--body); font-size: 13px; line-height: 1.5; letter-spacing: 0; }
 .hero-3d .stage-caption strong br { display: none; }
 .hero-3d .stage-caption > span,.hero-3d .stage-caption small { display: none; }
 .hero-3d .stage-price { bottom: 0; left: auto; right: 20px; padding: 6px 12px; border-radius: 30px; box-shadow: 0 3px 0 #886d2940,0 8px 18px #0003; transform: none; }
 .hero-3d .stage-price strong { font-family: var(--body); font-size: 17px; line-height: 1.35; }
 .hero-3d .stage-price strong small { font-size: 10px; text-transform: lowercase; font-weight: 500; }
 .hero-3d .stage-price > span { display: none; }
 .hero-3d .motion-control { top: 14px; bottom: auto; right: 16px; width: 44px; height: 44px; justify-content: center; padding: 0; background: #0b2b20b3; }
 .hero-3d .motion-control > span:last-child { display: none; }
 .experience-3d .ticker { display: none; }
 .menu-section,.range-section { padding-top: 50px; padding-bottom: 58px; }
 .section-top h2 { font-size: 57px; }
 .concept-image,.address-poster { transform: none; }
 .product-content { padding: 22px; }
 .concept-grid h2 { font-size: 57px; }
 .page-intro .intro-copy { font-size: 16px; }
 .range-card p { font-size: 14px; }
 .preview-mark { font-size: 9px; padding: 8px 12px; bottom: 10px; left: 10px; }
 .category-filter { font-size: 13px; }
}
@keyframes mobile-food-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
@media(prefers-reduced-motion:reduce) {
 .stage-food,.hero-3d .stage-food { animation: none; }
 .stage-visual,.stage-caption,.stage-price { transform: none; }
 .has-reveals .reveal-section:not(.is-visible) { opacity: 1; transform: none; }
 .product-card,.range-card { transition: none; }
}