/* October 2026 cream campaign: matched to the supplied Kleyopatra app posters. */
@font-face{font-family:"DM Serif";src:url('/assets/fonts/dm-serif.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--ink:#79521b;--paper:#f3e5c8;--gold:#a67b35;--muted:#8b7049;--line:#a67b3540;--terracotta:#b65329;--serif:"DM Serif",Georgia,serif}
html,body{background:var(--paper);color:var(--ink)}
.ambient{background:radial-gradient(ellipse at 45% 40%,#f9ecd2,#f3e5c8)}
.ambient:before{content:"";position:absolute;inset:0;background:url('/assets/cream-food-border.png') center/cover no-repeat;--food-mask:linear-gradient(90deg,#000,transparent 6%,transparent 88%,#000 99%),linear-gradient(180deg,#000,transparent 14%);mask-image:var(--food-mask);-webkit-mask-image:var(--food-mask)}
.halo{width:30vw;height:30vw;left:-24vw;top:22vh;border-color:#9b701b80}
.halo:before,.halo:after{display:none}
.corner-ring{position:absolute;bottom:-15vw;right:26vw;border:1px solid #9b701b80;width:20vw;height:20vw;border-radius:50%}
.masthead{height:14%;border-bottom:0;left:6.5%;right:23%}
.wordmark{flex-direction:row;gap:1vw;text-align:left}
.wordmark img{width:4.5vw;height:4.5vw;filter:none;border-radius:.55vw;box-shadow:0 .4vw 1vw #744c1c18}
.wordmark div{display:flex;flex-direction:column;gap:.4vh}
.wordmark strong{font:400 2vw/1.2 var(--serif);color:var(--ink)}
.wordmark span{font-size:.6vw;letter-spacing:.27em;color:var(--ink)}
.header-right{font-size:.65vw;color:var(--ink)}
#clock{color:var(--ink)}
#stage{inset:14% 0 8%}
.footer{height:8%;left:14%;right:20%;border-color:#a67b3533}
.footer-story{color:var(--ink)}
.credit img{filter:brightness(0);width:9vw}
.credit span{display:none}
.chapters{gap:.38vw}
.chapters button{width:1vw}
.display h1,.display h2{font-family:var(--serif);font-style:normal;font-weight:400;letter-spacing:-.035em;line-height:1.02;color:var(--ink)}
.display h1 em,.display h2 em{font-style:normal;color:var(--ink)}
.eyebrow{color:var(--ink);letter-spacing:.17em;font-weight:500}
.description{color:#765c35;line-height:1.55}
.display .description{color:#765c35}
.photo-label strong,.dish-card h3,.scan-panel h3,.chat-header strong,.contact-card h3{font-family:var(--serif);font-style:normal;font-weight:400}
.food-copy{padding-top:3vh;padding-bottom:3vh}
.food-copy h2{font-size:5.7vw}
.scene-shawarma .food-copy h2{font-size:5.1vw}
.photo-stage{margin:4vh 8vw 3.5vh 1.5vw}
.arch{border-radius:45% 45% 1vw 1vw;box-shadow:0 1.5vw 3vw #76521d26}
.arch-frame{border-color:#9b701b80}
.photo-label{color:#fff1d9}
.photo-label strong{font-size:2.1vw}
.pizza .photo-label{bottom:9vh;left:12%;right:12%;justify-content:center;text-align:center;text-shadow:0 2px 12px #241505}
.pizza .photo-label strong{font-size:1.8vw}
.pizza .photo-label span{display:none}
.round-seal{background:#f7ebd4;color:var(--ink);border-color:#ae823b;box-shadow:0 .6vw 2vw #6c431b22}
.editorial{padding-right:8vw}
.editorial h2{font-size:4.4vw}
.dish-card{border-radius:.6vw;box-shadow:0 1vw 2vw #79521b1a;color:#fff1d9}
.dish-card h3{font-size:2.3vw}
.dish-card small{color:#f6dcaf}
.celestial,.celestial:before,.celestial:after{border-color:#a67b3526}
.celestial:after{border-style:solid}
.heritage-side{color:#9e7a45}
.center-scene h2{font-size:7.2vw}
.qr-callout{display:flex;align-items:center;gap:1.3vw;margin-top:3vh}
.qr-callout .qr-inline{margin:0;gap:1vw}
.qr-callout .qr-inline img,.promo-copy .qr-inline img{width:6.8vw;height:6.8vw;border:1px solid #dbc291;box-shadow:0 .5vw 1vw #8a591516}
.qr-callout .qr-inline strong{font-size:1vw;color:var(--terracotta)}
.qr-callout .qr-inline span{font-size:.77vw;color:var(--ink)}
.qr-callout .store-badges{flex-direction:column;gap:.45vw;margin:0}
.store-badges img{width:8.8vw;height:2.7vw;object-fit:contain}
.promo-copy .qr-inline{margin-top:0}
.scene-shawarma .qr-inline{margin-top:0}
.download-layout{grid-template-columns:43% 57%;padding:3vh 7vw 3vh 6.5vw;background:none}
.download-copy{padding-bottom:2vh;z-index:3}
.download-copy h2{font-size:6.2vw;line-height:1.01;margin:2.2vh 0 2.5vh}
.download-copy .eyebrow{font-size:.64vw;white-space:nowrap;letter-spacing:.12em}
.download-copy .eyebrow:before{width:1.2vw}
.download-tagline{font-size:1.25vw;letter-spacing:.2em;line-height:1.5;margin:0;color:var(--ink)}
.download-divider{display:flex;gap:1vw;align-items:center;width:18vw;margin:2.5vh 0;color:var(--gold);font-size:1vw}
.download-divider i{width:8vw;height:1px;background:#b18a4b60}
.download-copy .description{font-size:1.12vw}
.download-benefits{color:var(--ink);font-size:.82vw}
.download-destination{display:flex;justify-content:flex-end;align-items:center}
.hero-phone-wrap{position:absolute;left:-.6vw;top:12%;width:16vw;z-index:1}
.phone{width:16vw;border:3px solid #846532;outline:2px solid #2b2013;background:#1c160d;padding:.35vw;border-radius:2.4vw;box-shadow:1vw 2vw 3vw #583a2040;transform:rotate(-7deg)}
.phone img{border-radius:1.9vw}
.hero-phone-wrap .phone{animation:phoneSway 14s ease-in-out infinite}
.phone:after{background:#17130d;top:.65vw}
.scan-panel{width:24.5vw;padding:2vh 1.3vw 2.5vh;border:1px solid #a47d333b;background:#fff7e6ec;border-radius:1vw;box-shadow:0 1.5vw 3.5vw #6d461924;z-index:2}
.scan-panel .app-icon{width:3.2vw;height:3.2vw;border-radius:.4vw;margin-bottom:.5vh}
.scan-panel>p{font:400 1.5vw var(--serif);letter-spacing:-.02em;margin:0 0 1.3vh;color:var(--ink)}
.download-cta{background:var(--terracotta);color:#fff5e5;font-size:.72vw;letter-spacing:.16em;padding:1.15vh 1.2vw;width:100%;border-radius:100px;display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5vh}
.download-cta span{font-size:1.5vw;line-height:1}
.download-qr{width:17.8vw;height:17.8vw;background:white}
.scan-panel h3{font-size:1.45vw;letter-spacing:0;margin:1.6vh 0 .5vh}
.scan-panel>span{color:#79603b;font-size:.7vw}
.scan-panel .store-badges{gap:.65vw;margin-top:1.4vh}
.scan-panel .store-badges img{width:9.1vw;height:2.8vw}
.promo-layout{padding:3vh 8vw 3vh 6.5vw}
.promo-copy h2{font-size:5.55vw}
.promo-copy .eyebrow{font-size:.72vw}
.promo-copy .description{font-size:1.2vw}
.offer-note{color:#856638;font-size:.82vw}
.tracking-map{width:36vw;background:#f4ebd5;border-color:#ad8b4f55;box-shadow:0 2vw 4vw #77521e25}
.map-grid{background:linear-gradient(135deg,#e8e7c9,#ece0bf)}
.map-street{stroke:#fdf8e9;stroke-width:30}
.route-shadow{stroke:#d1ba8c}
.route-line,.destination-ring{stroke:var(--terracotta)}
.map-caption{color:var(--ink)}
.map-origin,.map-home{background:#a77b34;color:#fff6e5;box-shadow:0 .3vw 1vw #76521d33}
.map-origin span,.map-home span{color:var(--ink)}
.driver-marker{background:#bb602f;border-color:#fff5dc;color:#fff5dc}
.tracking-status{background:#fff9ebeb;border-color:#b28b4960}
.tracking-status strong{color:var(--ink)}
.live-dot{background:#a27932}
.illustration-label{color:#7c6238}
.delivery-number{color:#b4853c;text-shadow:none}
.delivery-ribbon{background:var(--terracotta);color:#fff3db;box-shadow:0 1vw 2vw #74471920}
.delivery-scooter{color:#a07834}
.delivery-star{color:#ba8b3c}
.podium-place strong,.podium-place.gold strong{color:var(--ink)}
.podium-base{background:linear-gradient(125deg,#e4d0aa,#c7ae7c);color:#755521;border-color:#a9803d60;box-shadow:0 .5vw 1vw #76521d10}
.gold .podium-base{background:linear-gradient(125deg,#d4b169,#ad7e32);color:#fff4da;border-color:#ae7e2c}
.bronze .podium-base{background:linear-gradient(125deg,#d8a780,#bd805b);color:#633d23}
.crown{color:#b98324}
.referral-people>span{background:#f8eed7}
.credit-coin{box-shadow:inset 0 0 0 .65vw #b79051,inset 0 0 0 .72vw #f8e0a0,0 1vw 3vw #76521d22}
.referral-receipt{background:#fff7e5;border-color:#b8996050;box-shadow:0 .5vw 2vw #76521d10}
.referral-receipt strong{color:var(--ink)}
.kleyo-avatar{background:radial-gradient(ellipse at 30% 20%,#f0ddb5,#b98d43);color:#79521b;border-color:#b98d43}
.chat-card{background:#fff7e5;border-color:#b89a6255;box-shadow:0 1vw 3vw #79521b20}
.chat-header strong{font-size:1.7vw}
.chat-message.guest{background:#efdfbf;color:#694920}
.chat-message.answer{background:#bc6033;color:#fff7e8}
.chat-suggestion{color:#8a672f}
.app-layout{grid-template-columns:48% 52%;padding-right:10vw}
.app-copy h2{font-size:5.8vw}
.app-copy .qr-inline img{width:8.7vw;height:8.7vw}
.app-stage .phone{width:18vw;transform:rotate(8deg)}
.app-orbit{background:none;border-color:#aa803a50}
.app-orbit:after{border-color:#aa803a25}
.floating-dish{border-color:#b38a4150;box-shadow:0 1vw 3vw #744c2025}
.floating-dish.hummus{width:14vw;left:-1.5vw;bottom:2vh}
.floating-dish.shawarma{width:12vw;right:-2.5vw;top:3vh}
.app-note{color:var(--ink);right:0;bottom:0}
.controls{background:#fff4dfef;border-color:#a37a3650;box-shadow:0 .5vw 2vw #76521d22}
.controls button{color:var(--ink)}
dialog{background:#f9efd9;color:var(--ink);border-color:#ab884c55}
.program-top h2{font:400 38px var(--serif)}
.program-top button,.scene-list button{color:var(--ink)}
.scene-list button{background:#fff6e6}
.program-bottom button{color:#fff5e5;background:var(--terracotta)}
#notice{background:#fff3ddec;color:var(--ink)}
#scene-transition{inset:14% 0 8%;background:linear-gradient(110deg,transparent 35%,#fff5d955 49%,transparent 63%)}
.no-js{background:var(--paper)}
.tribute-scene{position:fixed;inset:0;z-index:6!important}
body.tribute-on .masthead,body.tribute-on .footer{visibility:hidden}
body.tribute-on #scene-transition{display:none}
body.tribute-on .playback-progress i{background:#f07820}
@keyframes phoneSway{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-.8vh) rotate(-5deg)}}
@media(max-aspect-ratio:1/1){
 .ambient:before{background-size:auto 100%;background-position:100% center;--food-mask:linear-gradient(90deg,#000,transparent 7%,transparent 85%,#000 100%)}
 .masthead{height:11%;left:8%;right:8%}.wordmark{gap:2.5vw}.wordmark img{width:10vw;height:10vw;border-radius:1.2vw}.wordmark strong{font-size:4.5vw}.wordmark span{font-size:1.2vw}.header-right{display:none}
 #stage{inset:11% 0 8%}.footer{left:8%;right:8%}.credit img{width:23vw}.chapters{gap:1vw}.chapters button{width:3vw}.footer-story{font-size:1.2vw}
 .display .food-copy h2,.scene-shawarma .food-copy h2{font-size:9.8vw}.food-copy{padding:2vh 8vw 1vh}.food-copy:has(.qr-callout){flex-basis:48%}
 .photo-stage{margin:2vh 8vw 2.4vh}.photo-label strong{font-size:4.5vw}
 .editorial{padding:3.7vh 8vw 2vh}.editorial h2{font-size:9vw}.dish-card h3{font-size:4.7vw}.center-scene h2{font-size:13vw}
 .qr-callout{gap:3vw;margin-top:2vh}.qr-callout .qr-inline{gap:2.5vw}.qr-callout .qr-inline img,.promo-copy .qr-inline img{width:13vw;height:13vw}
 .qr-callout .qr-inline strong{font-size:2.4vw}.qr-callout .qr-inline span{font-size:1.8vw}
 .qr-callout .store-badges{gap:1vw}.store-badges img{width:19vw;height:5.8vw}
 .download-layout{display:flex;padding:2vh 8vw 2vh;justify-content:flex-start}.download-copy{padding:0}.download-copy .eyebrow{font-size:1.45vw;white-space:normal}.download-copy h2{font-size:10.5vw;line-height:1.02;margin:1.5vh 0}.download-copy h2 br:nth-of-type(2){display:initial}
 .download-tagline{font-size:2.7vw;letter-spacing:.13em}.download-tagline br{display:initial}.download-divider{margin:1.5vh 0;width:30vw;gap:2vw;font-size:2vw}.download-divider i{width:14vw}
 .download-copy .description{font-size:2.5vw;max-width:70vw}.download-benefits{font-size:1.8vw;margin-top:1vh}
 .download-destination{margin-top:2vh;flex:1;min-height:0;justify-content:flex-end}.hero-phone-wrap{width:29vw;left:0;top:14%}.hero-phone-wrap .phone{width:29vw;border-radius:4.6vw;padding:.6vw}.hero-phone-wrap .phone img{border-radius:3.8vw}
 .phone:after{top:1.4vw;height:1.2vw}.scan-panel{width:49vw;padding:1.7vh 2.5vw 2vh;border-radius:2vw}.scan-panel .app-icon{display:none}.scan-panel>p{font-size:3vw;margin:0 0 1vh}.download-cta{font-size:1.45vw;padding:.8vh 2vw;margin-bottom:1.1vh}.download-cta span{font-size:3vw}
 .download-qr{width:35vw;height:35vw}.scan-panel h3{font-size:2.9vw;margin:1vh 0 .4vh}.scan-panel>span{font-size:1.5vw}.scan-panel .store-badges{gap:1.3vw;margin-top:1.2vh}.scan-panel .store-badges img{width:20vw;height:6vw}
 .promo-layout{padding:2.5vh 8vw 2vh}.promo-copy h2{font-size:10vw}.promo-copy .eyebrow{font-size:1.65vw}.promo-copy .description{font-size:2.7vw}.offer-note{font-size:1.8vw}
 .tracking-map{width:min(66vw,34vh)}.delivery .promo-copy h2{font-size:10vw}.chat-header strong{font-size:3.6vw}
 .app-layout{padding:2.5vh 8vw 2vh}.app-copy h2{font-size:10.8vw}.app-copy .qr-inline img{width:16vw;height:16vw}.app-stage .phone{width:29vw;border-radius:4vw}.app-stage .phone img{border-radius:3.2vw}.floating-dish.hummus{width:27vw;left:1vw;bottom:1vh}.floating-dish.shawarma{width:24vw;right:1vw;top:2vh}.app-note{bottom:0}
 .pizza .photo-label{bottom:6vh;left:10%;right:10%}.pizza .photo-label strong{font-size:4vw}
 #scene-transition{inset:11% 0 8%}
}
@media(prefers-reduced-motion:reduce){.hero-phone-wrap .phone{animation:none}}