:root{--maroon:#8a1f4a;--orange:#f08a24;--navy:#0b2a6f;--blue:#1f4fc4;--sky:#e9f0ff;--gold:#e0ac1c;--gold2:#f3d27a;--ink:#14213d;--muted:#55607a;--paper:#fffdf7;--r:16px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper);-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.15;margin:0}
a{color:var(--blue)}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:9}.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.top{display:flex;align-items:center;gap:12px;padding:8px 18px;background:#fff;border-bottom:4px solid var(--orange)}
.brand{display:block;line-height:0}.brand img{height:72px;width:auto}
.org{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.bh{margin-left:auto;align-self:flex-start;color:var(--maroon);font-size:14px;font-weight:600}
.hero{position:relative;overflow:hidden;text-align:center;padding:24px 20px 40px;color:#fff;background:radial-gradient(120% 80% at 50% 0%,#2a5bd7 0%,#0b2a6f 55%,#071a47 100%)}
.stars{position:absolute;inset:0;background-image:radial-gradient(2px 2px at 12% 18%,#fff8 50%,transparent 51%),radial-gradient(1.5px 1.5px at 78% 12%,#fff9 50%,transparent 51%),radial-gradient(2px 2px at 88% 40%,#ffe9a8aa 50%,transparent 51%),radial-gradient(1.5px 1.5px at 30% 46%,#fff7 50%,transparent 51%),radial-gradient(1.5px 1.5px at 60% 30%,#fff8 50%,transparent 51%),radial-gradient(2px 2px at 6% 60%,#ffe9a899 50%,transparent 51%);pointer-events:none}
.menorah{position:relative;width:min(78%,340px);height:auto;display:block;margin:6px auto 8px;filter:drop-shadow(0 0 18px #ffc23355)}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flick 1.6s ease-in-out infinite alternate}
@keyframes flick{0%{transform:scale(1,1) rotate(-2deg)}50%{transform:scale(.92,1.08) rotate(2deg)}100%{transform:scale(1.04,.95) rotate(-1deg)}}
@media (prefers-reduced-motion:reduce){.flame{animation:none}html{scroll-behavior:auto}}
.kicker{position:relative;margin:0 0 6px;color:var(--gold2);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px}
.hero h1{position:relative;font-size:clamp(30px,8.4vw,52px);max-width:720px;margin:0 auto;text-wrap:balance}
.lede{position:relative;max-width:560px;margin:14px auto 22px;color:#dfe7ff;font-size:17px}
.cta{display:inline-block;border:0;cursor:pointer;background:linear-gradient(180deg,#ffd768,#e0ac1c);color:#1b1500;font-weight:800;font-size:18px;padding:15px 28px;border-radius:999px;text-decoration:none;box-shadow:0 6px 18px #0004,inset 0 -2px 0 #0002;font-family:inherit}
.cta:active{transform:translateY(1px)}.cta[disabled]{opacity:.6;cursor:wait}
.how{padding:34px 20px 10px;max-width:760px;margin:0 auto}
.how h2,.book h2{font-size:28px;text-align:center;color:var(--navy)}
.steps{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.steps li{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid #e8e2cc;border-radius:var(--r);padding:14px 16px;box-shadow:0 2px 8px #0b2a6f0d}
.ico{font-size:30px;width:52px;height:52px;flex:none;display:grid;place-items:center;background:var(--sky);border-radius:50%}
.steps b{display:block;color:var(--navy)}.steps span span,.steps div span{color:var(--muted);font-size:15px}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}.steps li{flex-direction:column;text-align:center}}
.book{position:relative;max-width:640px;margin:26px auto 0;padding:30px 18px 40px}
.dreidel{display:block;width:44px;height:auto;margin:0 auto 8px;transform:rotate(-12deg)}
.sub{text-align:center;color:var(--muted);margin:8px 0 20px}
.step{background:#fff;border:1px solid #e8e2cc;border-radius:20px;padding:18px 16px;box-shadow:0 4px 16px #0b2a6f12}
.step h3{font-size:21px;color:var(--navy);display:flex;align-items:center;gap:10px;margin-bottom:12px}
.num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--maroon);color:#fff;font:700 16px system-ui,sans-serif}
.day{margin:14px 0 4px}.day:first-child{margin-top:0}
.day h4{margin:0;font-size:17px;color:var(--ink)}.day .night{font-size:13px;color:var(--maroon);font-weight:600}.day .note{font-size:13px;color:var(--muted)}
.times{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:8px}
.slot{font:600 16px system-ui,sans-serif;padding:13px 10px;border-radius:12px;border:2px solid #c9d6f5;background:var(--sky);color:var(--navy);cursor:pointer;min-height:48px}
.slot:hover{border-color:var(--blue)}.slot[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.loading,.empty{color:var(--muted);text-align:center;margin:8px 0}
.chosen{background:#fff7dc;border:1px solid #f0d78a;border-radius:12px;padding:10px 12px;margin:0 0 14px;font-weight:600}
form label{display:block;font-weight:600;margin:0 0 14px;font-size:16px}
.req{color:#b3261e}.opt{color:var(--muted);font-weight:400;font-size:14px}
input:not([type=radio]),textarea{display:block;width:100%;margin-top:6px;font:16px system-ui,sans-serif;padding:12px 12px;border:1.5px solid #c9cfdc;border-radius:12px;background:#fff;color:var(--ink)}
input:focus,textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px #1f4fc433}
fieldset{border:0;padding:0;margin:0 0 14px}legend{font-weight:600;margin-bottom:6px;font-size:16px}
.choice{display:flex!important;gap:12px;align-items:center;border:2px solid #e3e7f0;border-radius:14px;padding:12px;margin:0 0 8px!important;cursor:pointer;font-weight:400!important}
.choice input{width:22px;height:22px;accent-color:var(--navy);flex:none}
.choice b{display:block}.choice small{color:var(--muted);font-size:14px}
.choice:has(input:checked){border-color:var(--orange);background:#fff5ea}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important}
.error{background:#fdecea;color:#8a1c14;border:1px solid #f3b8b2;border-radius:12px;padding:10px 12px}
.row{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.row .cta{flex:1 1 200px}
.ghost{background:none;border:0;color:var(--blue);font:600 16px system-ui,sans-serif;padding:12px 4px;cursor:pointer;text-decoration:underline}
.done{text-align:center;padding:28px 18px}.done h3{justify-content:center;font-size:28px}
.check{width:64px;height:64px;margin:0 auto 10px;border-radius:50%;background:linear-gradient(180deg,#ffd768,#e0ac1c);display:grid;place-items:center;font-size:34px;font-weight:800;color:#1b1500}
.when{font-size:20px;font-weight:700;color:var(--navy);margin:6px 0}.small{color:var(--muted);font-size:14px}
footer{text-align:center;padding:24px 16px 36px;color:var(--muted);font-size:14px;border-top:1px solid #eee5c8}
[hidden]{display:none!important}

.tagline{position:relative;margin:8px auto 0;color:#f3d27a;font-size:clamp(18px,4.6vw,24px);font-weight:600}

body{font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.hero h1{font-weight:800;letter-spacing:-.02em}
.mnr{width:1.4em;height:1.4em;vertical-align:middle;color:currentColor}

/* --- motion + tall modern type (Nov 9) --- */
h1,h2,.kicker,.cta,.steps b,.num{font-family:"Oswald","DM Sans",system-ui,sans-serif}
.hero h1{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1;font-size:clamp(44px,13vw,92px)}
h2{font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.kicker{text-transform:uppercase;letter-spacing:.18em}
.hero .kicker{animation:rise .7s .05s both}
.hero h1{animation:rise .8s .15s both}
.hero .tagline{animation:rise .8s .3s both}
.hero .lede{animation:rise .8s .45s both}
.hero .cta{animation:rise .8s .6s both, pulse 2.4s 1.6s ease-in-out infinite}
.hero .menorah{animation:dropin 1s cubic-bezier(.2,.9,.3,1.2) both;will-change:transform}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes dropin{from{opacity:0;transform:translateY(-30px) scale(.92)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #ffc23366}50%{box-shadow:0 0 0 12px #ffc23300}}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flick 1.4s ease-in-out infinite alternate}
@keyframes flick{0%{transform:scale(1,1) rotate(-2deg);opacity:.9}50%{transform:scale(.92,1.08) rotate(2deg);opacity:1}100%{transform:scale(1.04,.95) rotate(-1deg);opacity:.95}}
.stars{animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}
.js .rv{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
.steps li{transition:transform .25s ease,box-shadow .25s ease}
.steps li:hover{transform:translateY(-4px) !important;box-shadow:0 10px 24px #0b2a6f22}
.steps .ico{display:grid;place-items:center;line-height:1;text-align:center;animation:bob 3s ease-in-out infinite}
.steps li:nth-child(2) .ico{animation-delay:.4s}.steps li:nth-child(3) .ico{animation-delay:.8s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.cta{position:relative;overflow:hidden;transition:transform .2s ease}
.cta:hover{transform:translateY(-2px) scale(1.03)}
.cta:active{transform:scale(.97)}
.slot{animation:pop .45s cubic-bezier(.2,.9,.3,1.3) both;transition:transform .15s ease}
.slot:hover{transform:translateY(-2px) scale(1.04)}
.times .slot:nth-child(2){animation-delay:.05s}.times .slot:nth-child(3){animation-delay:.1s}.times .slot:nth-child(4){animation-delay:.15s}.times .slot:nth-child(5){animation-delay:.2s}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.day{animation:rise .6s both}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}.js .rv{opacity:1;transform:none}}


@keyframes drivein{0%{opacity:0;transform:translateX(-110%)}70%{opacity:1;transform:translateX(3%)}100%{transform:none}}
@keyframes idle{0%,100%{translate:0 0}50%{translate:0 -2px}}

/* --- truck drives in from the right, wheels turning (Nov 10) --- */
.truckwrap{position:relative;width:min(94%,620px);margin:4px auto 6px;overflow:visible}
.truckbody{position:relative;animation:drivein 4.2s cubic-bezier(.25,.6,.3,1) both, rumble .35s linear 12 both;will-change:transform}
.truckbody .truck{display:block;width:100%;height:auto;filter:drop-shadow(0 0 22px #ffc23340)}
.truckbody .wheel{position:absolute;height:auto;animation:spin 4.2s cubic-bezier(.25,.6,.3,1) both;transform-origin:50% 50%}
@keyframes drivein{0%{transform:translateX(115vw)}100%{transform:translateX(0)}}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(-1800deg)}}
@keyframes rumble{0%,100%{translate:0 0}50%{translate:0 -1.5px}}
.hero{overflow:hidden}

.presents{position:relative;margin:6px auto 4px;font-family:"DM Sans",system-ui,sans-serif;font-size:clamp(13px,3.6vw,17px);letter-spacing:.2em;text-transform:uppercase;color:#f3d27a;opacity:.95;animation:rise .8s .05s both}

.tico{width:52px;height:auto;display:block;filter:drop-shadow(0 0 6px #ffc23366)}

.dreidel{width:64px !important;filter:drop-shadow(0 6px 8px #0003);animation:wobble 3s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(8deg)}}

.ages{margin:-2px 0 12px}.agesl{display:block;font-weight:600;margin-bottom:6px}.agebox{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}.agebox input{width:100%;text-align:center;animation:pop .3s both}


.hero .stars{opacity:.5}
.hero::after{content:"";position:absolute;left:50%;top:6%;width:70%;height:40%;transform:translateX(-50%);background:radial-gradient(closest-side,#ffc23333,transparent);animation:glowpulse 3.2s ease-in-out infinite;pointer-events:none}
@keyframes glowpulse{0%,100%{opacity:.5}50%{opacity:1}}
.hero h1,.hero .tagline,.hero .lede,.hero .presents{text-shadow:0 2px 14px #000a}

.steps .ico .tico{width:40px;height:auto;margin:0}
.steps .ico .mnr{display:block;margin:0}

.hero{background:linear-gradient(180deg,#05103000 0%,#05103000 22%,#051030aa 38%,#051030e6 52%,#051030 70%),url(hero-bg.jpg) center top/100% auto no-repeat,#051030 !important}
.hero .stars{opacity:.35}
.hero .presents,.hero h1,.hero .tagline,.hero .lede{position:relative;z-index:2}
.hero .lede{background:#05103099;border-radius:14px;padding:10px 14px;backdrop-filter:blur(2px)}

/* truck readability over bright bg (Nov 10 7:28) */
.truckwrap::before{content:"";position:absolute;left:-6%;right:-6%;top:8%;bottom:-6%;background:radial-gradient(ellipse at 50% 60%,#051030f2 0%,#051030cc 45%,#05103000 72%);z-index:0;pointer-events:none}
.truckbody{z-index:1}
.truckbody .truck,.truckbody .wheel{filter:drop-shadow(0 0 1.5px #fff8) drop-shadow(0 0 6px #ffe6a088) !important}

.hero{background:linear-gradient(180deg,#051030 0%,#051030 30%,#05103000 42%,#05103000 58%,#051030cc 70%,#051030 82%),url(hero-bg.jpg) center 34%/100% auto no-repeat,#051030 !important}
.truckwrap::before{display:none}

/* street scene behind truck (Nov 10 9:00) */
.truckwrap{width:min(96%,680px);aspect-ratio:1088/608;margin:8px auto 14px;border-radius:18px;overflow:hidden;background:url(street.jpg?v=c1) center/cover no-repeat;box-shadow:0 10px 30px #0008, 0 0 0 1px #ffffff22}
.truckwrap::before{display:none !important}
.truckbody{position:absolute !important;width:80%;left:10%;top:15%}
.truckbody .truck,.truckbody .wheel{filter:drop-shadow(0 3px 4px #0007) !important}

.truckbody .truck,.truckbody .wheel{filter:drop-shadow(0 4px 6px #0009) !important}

/* full-bleed street background, no box (Nov 10 9:22) */
.hero{--h:clamp(250px,66vw,520px)}
.truckwrap{width:auto !important;aspect-ratio:auto !important;height:var(--h);margin:-24px -20px 6px !important;border-radius:0 !important;box-shadow:none !important;overflow:hidden;
background:linear-gradient(180deg,#051030 0%,#05103000 16%,#05103000 90%,#051030 100%),linear-gradient(90deg,#051030 0%,#05103000 12%,#05103000 88%,#051030 100%),url(street.jpg?v=hd1) center bottom/auto 100% no-repeat,#051030 !important}
@media (max-width:800px){.truckwrap{background:linear-gradient(180deg,#051030 0%,#05103000 16%,#05103000 90%,#051030 100%),url(street.jpg?v=hd1) center bottom/auto 100% no-repeat,#051030 !important}}
.truckbody{position:absolute !important;top:auto !important;width:min(88%,calc(var(--h)*1.3)) !important;left:50% !important;margin-left:calc(min(88%,calc(var(--h)*1.3)) / -2);bottom:4%}

.hero{background:#051030 !important}
.hero::after{display:none}
@media (min-width:801px){
 .hero{--h:min(56vw,600px)}
 .truckwrap{background:linear-gradient(180deg,#051030 0%,#05103000 14%,#05103000 90%,#051030 100%),url(street.jpg?v=hd1) center bottom/100% auto no-repeat,#051030 !important}
 .truckbody{bottom:calc(5.9vw - 0.039 * min(88vw,780px)) !important}
}

/* sizes per Zalmy 9:27 */
.hero .presents{font-size:clamp(10px,2.7vw,13px) !important;letter-spacing:.18em}
.hero h1{font-size:clamp(54px,16vw,112px) !important}

/* Zalmy 9:38: sharp boxes, slimmer top bar */
.steps li{border-radius:0 !important}
.steps li .ico{border-radius:0 !important}
.top{padding:4px 16px !important;border-bottom-width:3px !important}
.brand img{height:50px !important}

/* Zalmy 9:43: no off-white page background */
:root{--paper:#dfe8f7}
body{background:#dfe8f7 !important}

/* Zalmy 10:05: all corners sharp */
:root{--r:0px}
*,*::before,*::after{border-radius:0 !important}

.in-frame .top{display:none !important}

/* desktop layout (Nov 11 10:55) */
@media (min-width:1024px){
 .hero{position:relative;display:flex !important;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left !important;min-height:min(92vh,56vw,820px);padding:120px 0 80px calc(max(5vw,(100vw - 1240px)/2)) !important;overflow:hidden}
 .hero .truckwrap{position:absolute !important;inset:0;height:auto !important;margin:0 !important;z-index:0;background:linear-gradient(90deg,#051030f2 0%,#051030cc 28%,#05103000 52%),linear-gradient(180deg,#051030 0%,#05103000 14%,#05103000 88%,#051030 100%),url(street.jpg?v=hd1) center bottom/cover no-repeat,#051030 !important}
 .hero .truckbody{width:min(54vw,860px) !important;left:auto !important;right:max(3vw,(100vw - 1300px)/2) !important;margin-left:0 !important;bottom:6% !important}
 .hero>*:not(.truckwrap):not(.stars){position:relative;z-index:1;max-width:min(40vw,500px);margin-left:0 !important;margin-right:0 !important;text-align:left !important}
 .hero .lede,.hero .tagline,.hero .presents{padding-left:0 !important;padding-right:0 !important}
 .hero h1{font-size:clamp(56px,5.6vw,92px) !important;line-height:.95 !important}
 .hero .lede{font-size:18px !important}
 .how .steps{max-width:1100px !important}
 .book{max-width:none !important}
 #booking-app{max-width:900px !important;margin-left:auto !important;margin-right:auto !important}
 .slots{grid-template-columns:repeat(auto-fill,minmax(250px,1fr)) !important}
}

@media (min-width:1024px){
 .hero>*:not(.truckwrap):not(.stars){max-width:min(34vw,460px) !important}
 .hero .lede{background:none !important;box-shadow:none !important;backdrop-filter:none !important;padding:0 !important}
 .hero .truckbody{width:min(52vw,calc(100vw - min(34vw,460px) - max(5vw,(100vw - 1240px)/2) - 6vw),900px) !important;right:max(2vw,(100vw - 1320px)/2) !important}
 .hero .truckwrap{background:linear-gradient(90deg,#051030e6 0%,#051030b3 22%,#05103000 40%),linear-gradient(180deg,#051030 0%,#05103000 14%,#05103000 88%,#051030 100%),url(street.jpg?v=hd1) center bottom/cover no-repeat,#051030 !important}
}

@media (min-width:1024px){.hero .truck,.hero .wheel{filter:drop-shadow(0 3px 3px rgba(0,0,0,.45)) !important}}

@media (min-width:1024px){
 .hero .truckbody{width:min(920px,calc(100vw - max(5vw,(100vw - 1240px)/2) - min(34vw,460px) - max(2vw,(100vw - 1320px)/2) - 2vw)) !important;right:max(2vw,(100vw - 1320px)/2) !important;left:auto !important;margin-left:0 !important}
}