.hero-sticky:focus-visible{outline:2px solid #79bfff;outline-offset:-3px}.hero-sticky [hidden]{display:none!important}.hero-recipe{position:absolute;inset:calc(var(--site-header-height) + 12px) 0 auto;margin:0;z-index:3;aspect-ratio:1672/941;background:#071426}.hero-recipe>img{display:block;width:100%;height:100%;object-fit:contain}.recipe-active .hero-orbit{display:none}.hero-slide-controls{position:absolute;z-index:6;bottom:67px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:11px;border:1px solid #b4cee13d;border-radius:30px;background:#061528df;padding:5px 10px;color:#f4f1e9;backdrop-filter:blur(8px)}.hero-slide-controls button{border:0;background:none;color:inherit;min-width:34px;min-height:34px;padding:5px;font-size:20px;display:grid;place-items:center;border-radius:50%}.hero-slide-controls button:hover{background:#ffffff18}.hero-slide-controls .hero-dot{min-width:24px;min-height:34px;padding:0}.hero-dot:before{content:'';width:7px;height:7px;border:1px solid #d8b07a;border-radius:50%;display:block}.hero-dot[aria-pressed=true]:before{background:#edbd7f;box-shadow:0 0 9px #edbd7f66}.hero-slide-count{font-size:10px;white-space:nowrap;letter-spacing:.08em}.hero-slide-controls .hero-autoplay{font-size:14px}.recipe-text-button{position:absolute;right:18px;bottom:16px;background:#07182bf2;border:1px solid #ddb77e;color:#fff2dd;border-radius:3px;font:12px 'DM Sans',Arial;padding:11px 16px}.hero-recipe-dialog{position:fixed;max-width:620px;width:calc(100% - 32px);max-height:85svh;overflow:auto;padding:40px;background:#f4f1e9;color:#101e31;border:1px solid #d9b783}.hero-recipe-dialog::backdrop{background:#000c}.recipe-dialog-close{position:absolute;right:10px;top:5px;padding:5px 12px;background:none;border:0;font-size:30px}.hero-recipe-dialog h2{font-size:42px;line-height:1.1;margin:15px 0 28px}.hero-recipe-dialog h2 em{color:#a56a3c}.hero-recipe-dialog h3{font-size:14px;letter-spacing:.08em;margin-top:25px}.hero-recipe-dialog li{line-height:1.65;margin:8px 0}.hero-recipe-dialog ul,.hero-recipe-dialog ol{padding-left:22px}.hero-recipe-dialog>p:last-child{font-size:13px;margin-top:25px}
@media(max-width:760px){.hero-slide-controls{bottom:65px;gap:7px;max-width:90%;padding:3px 8px}.hero-sticky.recipe-active{min-height:0;height:auto;aspect-ratio:auto;padding:calc(var(--site-header-height) + 12px) 0 140px}.hero-sticky.recipe-active .hero-recipe{position:relative;inset:auto;width:100%;aspect-ratio:1672/941}.recipe-active .hero-bottom{bottom:25px}.hero-track:has(.recipe-active){height:auto}.recipe-text-button{right:10px;bottom:8px;font-size:11px;padding:8px 11px}.hero-recipe-dialog{padding:32px 24px}.hero-recipe-dialog h2{font-size:34px}}
/* Slide the two stories through the same hero frame. */
.hero-copy,.hero-scene{translate:0 0;transition:translate .7s cubic-bezier(.22,.65,.25,1),opacity .5s ease}
.hero-recipe{translate:100% 0;transition:translate .7s cubic-bezier(.22,.65,.25,1);touch-action:pan-y}
.hero-sticky.recipe-active .hero-copy{translate:-100vw 0;pointer-events:none}
.hero-sticky.recipe-active .hero-scene{translate:-100% 0;pointer-events:none}
.hero-sticky.recipe-active .hero-recipe{translate:0 0}
.hero-recipe[inert]{pointer-events:none}
@media(max-width:760px){.hero-sticky.recipe-active .hero-copy{display:none}.hero-sticky.recipe-active .hero-scene{visibility:hidden}}
@media(prefers-reduced-motion:reduce){.hero-copy,.hero-scene,.hero-recipe{transition:none!important}}
.motion-off .hero-copy,.motion-off .hero-scene,.motion-off .hero-recipe{transition:none!important}

/* Phones show the photographic half; recipe copy stays in the readable dialog. */
@media(max-width:760px){
 .hero-sticky.recipe-active .hero-recipe{aspect-ratio:9/10;overflow:hidden}
 .hero-recipe>img{object-fit:cover;object-position:right center}
 .recipe-text-button{left:50%;right:auto;bottom:18px;transform:translateX(-50%);min-height:44px;min-width:138px;padding:12px 22px;font-size:14px;white-space:nowrap;background:#07182bf2}
}

/* A clean phone carousel: photo, recipe action, and two swipe/navigation dots. */
@media(max-width:760px){
 .hero-bottom{display:none}
 .hero-slide-controls{bottom:28px;border:0;background:none;backdrop-filter:none;padding:0;gap:2px}
 .hero-slide-controls [data-hero-step],.hero-slide-count{display:none}
 .hero-slide-controls .hero-dot{min-width:44px;min-height:44px}
 .hero-dot:before{width:9px;height:9px}
 .hero-sticky.recipe-active{padding-bottom:90px}
 .hero-slide-controls .hero-autoplay{position:absolute;clip-path:inset(50%);width:1px;height:1px;min-width:0;min-height:0;overflow:hidden;padding:0}
 .hero-slide-controls .hero-autoplay:focus-visible{position:static;clip-path:none;width:44px;height:44px;overflow:visible}
}

/* Brand treatment uses the original mark and its ivory/blue wordmark palette. */
.recipe-text-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:8px 16px;background:linear-gradient(135deg,#07182b,#102b50);border:1px solid #5b83cf;box-shadow:0 3px 18px #0008,inset 0 0 12px #2453a52e;min-height:58px}
.recipe-text-button .recipe-button-mark{width:54px;height:42px;object-fit:contain;flex:none;filter:drop-shadow(0 0 4px #2c65d28c)}
.recipe-text-button span{font-family:Georgia,'Times New Roman',serif;font-size:20px;font-weight:700;letter-spacing:-.025em;color:#f4f1e9;text-shadow:1px 1px #2855aa,-1px -1px #2855aa,0 2px 5px #000;-webkit-text-stroke:.25px #d9e4ff}
.recipe-text-button:hover{border-color:#adc8ff;background:#15345a}
@media(max-width:760px){
 .hero-sticky:not(.recipe-active){height:calc(100svh - 78px);min-height:680px;padding-top:100px}
 .hero-sticky:not(.recipe-active) .hero-copy h1{font-size:clamp(42px,12vw,50px);line-height:1.04}
 .hero-sticky:not(.recipe-active) .hero-copy .eyebrow{margin-bottom:16px}
 .hero-sticky:not(.recipe-active) .hero-copy .actions{display:flex;flex-wrap:nowrap;gap:14px;align-items:center}
 .hero-sticky:not(.recipe-active) .hero-copy .button{font-size:10px;padding:13px 14px;gap:14px;white-space:nowrap}
 .hero-sticky:not(.recipe-active) .hero-copy .text-link{font-size:9px;gap:9px;white-space:nowrap}
 .hero-sticky:not(.recipe-active) .hero-scene{bottom:90px;top:auto;height:38svh;max-height:340px}
 .hero-track{height:auto}
 .recipe-text-button{min-width:190px;min-height:58px;padding:7px 15px;bottom:18px}
}

/* Keep carousel navigation consistent at every screen size. */
.hero-bottom{display:none}
.hero-slide-controls{border:0;background:none;backdrop-filter:none;padding:0;gap:2px}
.hero-slide-controls [data-hero-step],.hero-slide-count{display:none}
.hero-slide-controls .hero-dot{min-width:44px;min-height:44px}
.hero-dot:before{width:9px;height:9px}
.hero-slide-controls .hero-autoplay{position:absolute;clip-path:inset(50%);width:1px;height:1px;min-width:0;min-height:0;overflow:hidden;padding:0}
.hero-slide-controls .hero-autoplay:focus-visible{position:static;clip-path:none;width:44px;height:44px;overflow:visible}

.recipe-print-actions{display:flex;justify-content:flex-start;margin-top:24px}.recipe-print{display:inline-flex;align-items:center;gap:10px;border:1px solid #8094ad;border-radius:4px;background:transparent;color:#102840;padding:10px 14px;min-height:44px;font:13px 'DM Sans',Arial}.recipe-print:hover{background:#e1e7ed;border-color:#3158c6}.recipe-print:focus-visible{outline:3px solid #3158c6;outline-offset:3px}
@media print{
 @page{margin:18mm}
 html,body{background:white!important;color:black!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important}
 body>*:not(.hero-recipe-dialog){display:none!important}
 .hero-recipe-dialog[open]{display:block!important;position:static!important;inset:auto!important;width:100%!important;max-width:none!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;overflow:visible!important;background:white!important;color:black!important;box-shadow:none!important}
 .hero-recipe-dialog::backdrop{display:none!important;background:transparent!important}
 .hero-recipe-dialog .recipe-dialog-close,.recipe-print-actions{display:none!important}
 .hero-recipe-dialog h2{font-size:28pt!important;margin:10pt 0 20pt!important}
 .hero-recipe-dialog h2 em{color:#333!important}
 .hero-recipe-dialog h3{break-after:avoid;font-size:12pt!important}
 .hero-recipe-dialog li{break-inside:avoid;font-size:11pt;line-height:1.5!important}
 .hero-recipe-dialog p{font-size:10pt}
}

/* Localized atmospheric light; product photography stays untouched. */
.hero-recipe{isolation:isolate}
.hero-atmosphere{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.recipe-text-button{z-index:2}
.storm-flicker{opacity:0;animation:storm-pulse 7.8s linear infinite}
.candle-flicker{opacity:.2;animation:candle-dance 3.7s ease-in-out infinite}
@keyframes storm-pulse{0%,16%,24%,100%{opacity:0}18%{opacity:.46}19.5%{opacity:.06}21%{opacity:.29}22.5%{opacity:0}}
@keyframes candle-dance{0%,100%{opacity:.19}12%{opacity:.3}27%{opacity:.14}39%{opacity:.26}52%{opacity:.18}67%{opacity:.34}79%{opacity:.21}90%{opacity:.28}}
.hero-sticky:not(.recipe-active) .hero-atmosphere g,.hero-sticky:not(.effects-visible) .hero-atmosphere g{animation-play-state:paused}
.motion-off .hero-atmosphere{display:none}
@media(prefers-reduced-motion:reduce){.hero-atmosphere{display:none}.storm-flicker,.candle-flicker{animation:none}}
@media print{.hero-atmosphere{display:none!important}}

/* Repeat throughout the visible slide: storm light and a living candle flame. */
.storm-flicker{animation-name:storm-continuous;animation-duration:3.6s}
.candle-flicker{animation-name:candle-continuous;animation-duration:7.4s}
.candle-flame{transform-box:view-box;transform-origin:1526px 463px;animation:flame-sway 5.8s ease-in-out infinite;filter:drop-shadow(0 0 7px #ffc04a)}
@keyframes storm-continuous{0%,8%,30%,52%,70%,100%{opacity:.02}12%{opacity:.7}17%{opacity:.1}23%{opacity:.46}58%{opacity:.54}64%{opacity:.05}}
@keyframes candle-continuous{0%,100%{opacity:.42}19%{opacity:.49}43%{opacity:.37}68%{opacity:.46}86%{opacity:.4}}
@keyframes flame-sway{0%,100%{transform:rotate(-.6deg) scale(1,1);opacity:.88}28%{transform:rotate(.8deg) scale(1.01,1.03);opacity:.94}57%{transform:rotate(-1deg) scale(.99,.98);opacity:.83}81%{transform:rotate(.4deg) scale(1,1.02);opacity:.9}}
@media(prefers-reduced-motion:reduce){.candle-flame{animation:none}}


/* Re-light the actual photographic bolt and clouds instead of drawing a neon outline. */
.storm-photographic{filter:brightness(1.7) saturate(.82)}
.storm-flicker{animation-name:photographic-lightning;animation-duration:4.6s;animation-timing-function:linear}
@keyframes photographic-lightning{0%,10%,18%,52%,62%,100%{opacity:0}10.8%{opacity:.65}12.4%{opacity:.18}14%{opacity:.4}16%{opacity:.04}53%{opacity:.43}55%{opacity:.12}58%{opacity:.025}}

/* Make the main slideshow's clickable dots easy to discover. */
.hero-slide-controls{gap:0;padding:0;border:1px solid #d8b07a66;background:#061528d9;box-shadow:0 2px 10px #0003;backdrop-filter:blur(8px)}
.hero-slide-controls .hero-dot{width:44px;height:44px;min-width:44px;min-height:44px;cursor:pointer;transition:background .2s ease}
.hero-dot:before{width:11px;height:11px;border:1.5px solid #efd0a5;background:#ffffff18;transition:background .2s ease,box-shadow .2s ease}
.hero-dot[aria-pressed=true]:before{background:#f0bd78;border-color:#ffe1b8;box-shadow:0 0 0 2px #efbd7826,0 0 7px #edbd7f55}
.hero-slide-controls .hero-dot:hover{background:#d8b07a26}
.hero-slide-controls .hero-dot:focus-visible{outline:3px solid #86c7ff;outline-offset:1px}