.cascade-section{position:relative;color:#30291f;--accent:#87372c;--cw:380px;--ch:440px}
.cascade-sticky{position:sticky;top:0;height:100svh;min-height:650px;overflow:hidden;background:#f4eddd;color:#30291f;isolation:isolate}
.cascade-art{position:absolute;inset:0;z-index:-1;background:#f4eddd url('img/hero/background.webp?v=peaceful31') center/100% 100% no-repeat}
.cascade-art::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(250,245,233,.88),rgba(250,245,233,.55) 42%,rgba(250,245,233,.08) 75%)}
.cascade-stage{position:absolute;inset:0;perspective:var(--persp,1500px);perspective-origin:var(--vanishX,66%) 38%;pointer-events:none}
.cascade-deck{position:absolute;left:var(--deckX,70%);top:var(--deckY,51%);width:0;height:0;transform-style:preserve-3d}
.cascade-card{position:absolute;width:var(--cw);height:var(--ch);left:calc(var(--cw)/-2);top:calc(var(--ch)/-2);transform-style:preserve-3d;backface-visibility:hidden;will-change:transform;opacity:0}
.cascade-card:first-child{opacity:1}.cascade-face{position:absolute;inset:0;border-radius:24px;overflow:hidden;background:#fffaf0;border:1px solid #cbb994;box-shadow:0 18px 35px -22px #55402266;backface-visibility:hidden}
.cascade-face img{position:absolute;top:12%;left:4%;width:92%;height:66%;object-fit:contain;filter:none;opacity:1}
.cascade-card-top{position:absolute;top:18px;left:20px;right:20px;display:flex;justify-content:space-between;font:11px/1.4 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#6b5843}
.cascade-card-foot{position:absolute;bottom:22px;left:22px;right:22px}.cascade-card-foot p{font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 7px;color:#6b5843}.cascade-card-foot .cascade-dish{display:block;font:400 clamp(23px,2vw,32px)/1.1 'Fraunces',Georgia,serif;letter-spacing:-0.02em;font-variation-settings:"opsz" 144, "SOFT" 30, "WONK" 0;text-transform:none;color:#30291f;margin:0}
.cascade-copy{position:absolute;left:6%;top:51%;transform:translateY(-50%);width:40%;z-index:5}.cascade-eyebrow{font:11px/1.5 ui-monospace,monospace;letter-spacing:.15em;text-transform:uppercase;color:#675540;margin:0 0 22px}.cascade-copy h1{font:400 clamp(38px,4.6vw,70px)/1.06 'Fraunces',Georgia,serif;letter-spacing:-.04em;color:#30291f;margin:0}.cascade-sub{max-width:33ch;font-size:16px;line-height:1.6;color:#625440;margin:24px 0 0}.cascade-actions{display:flex;align-items:center;gap:22px;margin-top:26px;flex-wrap:wrap}.cascade-actions a{color:#30291f;font-size:14px;text-underline-offset:5px}.cascade-actions .cascade-order{display:inline-flex;align-items:center;min-height:48px;padding:13px 22px;background:#87372c;color:#fffaf0;border-radius:14px;text-decoration:none;font-weight:600}.cascade-next{border:0;background:none;padding:12px 0;margin-top:14px;color:#625440;cursor:pointer;font:12px/1.5 inherit;text-decoration:underline;text-underline-offset:4px}
.cascade-rail{position:absolute;right:2.3%;top:52%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:20px;z-index:6}.cascade-count{font:12px ui-monospace,monospace;color:#625440}.cascade-count span{font-size:24px;color:#30291f}.cascade-track{position:relative;width:44px;height:300px;touch-action:none}.cascade-track::before,.cascade-fill{content:'';position:absolute;left:21px;top:0;width:2px;height:100%;background:#b8a888}.cascade-fill{height:0;background:#87372c}.cascade-thumb{position:absolute;left:17px;top:0;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#87372c}.cascade-tick{position:absolute;left:0;width:44px;height:44px;transform:translateY(-50%);border:0;background:transparent;cursor:pointer}.cascade-tick::before{content:'';position:absolute;left:19px;top:19px;width:6px;height:6px;background:#958265;border-radius:50%}.cascade-tick[aria-current=true]::before{background:#87372c}.cascade-label{writing-mode:vertical-rl;font-size:11px;color:#625440;max-height:160px;margin:0}.cascade-section :focus-visible{outline:2px solid #87372c;outline-offset:4px}
@media(max-width:880px){.cascade-sticky{min-height:680px}.cascade-copy{top:85px;left:6%;width:88%;transform:none;text-align:center}.cascade-eyebrow{font-size:9px;margin-bottom:12px}.cascade-copy h1{font-size:clamp(29px,7.8vw,48px);max-width:600px;margin:auto}.cascade-sub{display:none}.cascade-actions{justify-content:center;margin-top:18px;gap:18px}.cascade-actions a{font-size:12px}.cascade-order{min-height:44px!important;padding:10px 18px!important}.cascade-next{margin-top:6px;font-size:11px}.cascade-rail{right:6px;top:72%;gap:16px}.cascade-track{height:210px}.cascade-count{font-size:10px}.cascade-count span{font-size:19px}.cascade-label{display:none}.cascade-art::after{background:linear-gradient(180deg,rgba(250,245,233,.85),rgba(250,245,233,.55) 38%,rgba(250,245,233,.05))}.cascade-card-top{font-size:9px;top:14px;left:16px;right:16px}.cascade-card-foot{bottom:18px;left:18px;right:18px}.cascade-card-foot .cascade-dish{font-size:23px}}
@media(prefers-reduced-motion:reduce){.cascade-card{will-change:auto}}

/* Centered cutout showcase; original food and tableware remain transparent. */
.cascade-copy{left:50%;top:75px;transform:translateX(-50%);width:min(88%,950px);text-align:center}
.cascade-copy h1{font-size:clamp(38px,4.1vw,62px)}
.cascade-eyebrow{margin-bottom:16px}
.cascade-sub{max-width:none;margin:16px auto 0}
.cascade-actions{justify-content:center;margin-top:20px}
.cascade-next{margin-top:4px}
.cascade-stage{clip-path:inset(42% 0 0)}
.cascade-face{background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible}
.cascade-face img{top:0;left:0;width:100%;height:82%;object-fit:contain}
.cascade-card-top,.cascade-card-foot p{display:none}
.cascade-card-foot{bottom:0;left:0;right:0;text-align:center}
.cascade-card-foot .cascade-dish{font-size:clamp(21px,2vw,28px)}
.cascade-rail{top:68%;right:4%;gap:12px}
.cascade-label{display:none}
.cascade-art{background-size:cover}
.cascade-art::after{background:linear-gradient(180deg,rgba(250,245,233,.55),rgba(250,245,233,.3) 40%,transparent)}
@media(max-width:880px){
 .cascade-copy{top:70px;width:88%}
 .cascade-copy h1{font-size:clamp(29px,7.8vw,48px)}
 .cascade-eyebrow{margin-bottom:12px}
 .cascade-stage{clip-path:inset(43% 0 0)}
 .cascade-art{background-image:url('img/hero/background-mobile.webp?v=peaceful31');background-size:cover;background-position:center}
 .cascade-art::after{background:linear-gradient(180deg,rgba(250,245,233,.12),transparent)}
 .cascade-rail{right:0;top:69%}
 .cascade-track{height:190px}
 .cascade-card-foot .cascade-dish{font-size:22px}
}
@media(min-width:881px) and (max-height:850px){.cascade-copy{top:45px}.cascade-copy h1{font-size:42px}.cascade-sub{display:none}.cascade-eyebrow{margin-bottom:10px}}

/* Keep the copy inside the quiet center of the painting. */
@media(min-width:881px){
 .cascade-art{background-size:100% 100%}
 .cascade-copy{width:min(46%,620px);top:70px;left:46%}
 .cascade-copy h1{font-size:clamp(38px,3.5vw,52px)}
 .cascade-sub{max-width:42ch}
}
@media(max-width:880px){
 .cascade-copy{top:22%;width:84%}
 .cascade-copy h1{font-size:clamp(27px,7.1vw,42px)}
 .cascade-next{display:none}
 .cascade-actions{margin-top:16px}
}

.cascade-sticky{top:100px;height:calc(100svh - 100px);min-height:620px}
.cascade-stage{clip-path:none}
.hero-in-view #floatingOrder{display:none!important}
@media(max-width:880px){
 .cascade-sticky{top:64px;height:calc(100svh - 64px);min-height:560px}
 .cascade-copy{top:22%}
 .cascade-card-foot .cascade-dish{font-size:21px}
 .cascade-rail{top:73%}
}

/* A soft parchment wash ties the real dishes to the ink landscape. */
.cascade-face::before{content:'';position:absolute;inset:-6% -8% 12%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,249,233,.92) 0%,rgba(250,240,214,.78) 48%,rgba(246,235,207,.3) 65%,transparent 76%);pointer-events:none}
.cascade-face img{filter:sepia(.16) saturate(.96) brightness(.98) drop-shadow(0 9px 10px rgba(86,64,36,.14))}
@media(max-width:880px){.cascade-copy{top:27%}}
@media(max-width:880px) and (max-height:720px){.cascade-copy{top:25%}.cascade-copy h1{font-size:25px}.cascade-eyebrow{font-size:8px;margin-bottom:8px}.cascade-actions{margin-top:12px}}

/* Translucent parchment card lets the landscape remain visible. */
.cascade-face{background:rgba(225,213,186,.40);border:1px solid rgba(171,147,106,.2);border-radius:28px;box-shadow:0 8px 28px rgba(92,70,37,.06);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.cascade-face::before{inset:0;border-radius:inherit;background:radial-gradient(ellipse at 50% 38%,rgba(236,225,199,.16),transparent 72%)}
.cascade-face img{top:2%;height:78%}
.cascade-card-foot{bottom:12px;left:12px;right:12px}
@media(max-width:880px){.cascade-face{border-radius:24px}.cascade-card-foot .cascade-dish{font-size:19px}}

/* Bring the dish showcase directly beneath the message. */
@media(min-width:881px){.cascade-copy{top:36px}.cascade-eyebrow{margin-bottom:10px}.cascade-copy h1{font-size:clamp(34px,3.1vw,46px)}.cascade-sub{margin-top:10px}.cascade-actions{margin-top:14px}.cascade-next{display:none}}
@media(max-width:880px){.cascade-copy h1{font-size:clamp(25px,6.5vw,38px)}.cascade-eyebrow{margin-bottom:8px}.cascade-actions{margin-top:12px}.cascade-rail{top:62%}}
@media(max-width:380px){.cascade-copy{top:24%}.cascade-actions{gap:10px}.cascade-actions .cascade-order{padding:10px 12px!important}.cascade-actions a{font-size:11px}}

/* Desktop composition scales with the available canvas. */
@media(min-width:881px){
 .cascade-copy{left:50%;top:clamp(28px,4vh,60px);width:min(66%,1060px)}
 .cascade-copy h1{font-size:clamp(42px,3.1vw,74px);line-height:1.05}
 .cascade-eyebrow{font-size:clamp(11px,.7vw,15px);letter-spacing:.16em;margin-bottom:16px}
 .cascade-sub{display:block;font-size:clamp(15px,1vw,20px);max-width:52ch;margin-top:16px}
 .cascade-actions{margin-top:20px;gap:28px}
 .cascade-actions a{font-size:clamp(14px,.85vw,18px)}
 .cascade-actions .cascade-order{min-height:50px;padding:14px 26px}
 .cascade-card-foot{bottom:20px}
 .cascade-card-foot .cascade-dish{font-size:clamp(26px,1.7vw,38px)}
 .cascade-rail{left:var(--railX);right:auto;top:var(--railY);gap:18px}
 .cascade-track{height:clamp(160px,23vh,280px)}
}
@media(min-width:881px) and (max-height:800px){
 .cascade-copy{top:24px}.cascade-copy h1{font-size:38px}.cascade-sub{margin-top:10px;font-size:14px}.cascade-eyebrow{margin-bottom:10px}.cascade-actions{margin-top:12px}
}

/* Lift the mobile and tablet headline group slightly. */
@media(max-width:880px){.cascade-copy{top:calc(27% - 28px)}}
@media(max-width:880px) and (max-height:720px){.cascade-copy{top:calc(25% - 20px)}}
@media(max-width:380px){.cascade-copy{top:calc(24% - 20px)}}

/* Raise the message and actions as requested. */
@media(min-width:881px){.cascade-copy{top:12px}}
@media(max-width:880px){.cascade-copy{top:calc(27% - 56px)}}
@media(max-width:880px) and (max-height:720px){.cascade-copy{top:calc(25% - 40px)}}
@media(max-width:380px){.cascade-copy{top:calc(24% - 40px)}}

/* A distant ink flock crosses the sky slowly. */
.hero-birds{position:absolute;top:9%;left:15%;width:105px;height:40px;pointer-events:none;z-index:0;opacity:0;animation:ink-birds-glide 30s linear infinite;animation-play-state:paused}
.hero-in-view .hero-birds{animation-play-state:running}
.hero-birds svg{width:100%;height:100%;overflow:visible}
.bird-wings{stroke:#655742;stroke-width:1.6;stroke-linecap:round;transform-origin:center;animation:ink-wingbeat 1.9s ease-in-out infinite}
@keyframes ink-birds-glide{0%{transform:translate(0,22px) scale(.75);opacity:0}10%{opacity:.45}45%{transform:translate(25vw,-9px) scale(.9);opacity:.45}85%{opacity:.32}100%{transform:translate(64vw,-34px) scale(.65);opacity:0}}
@keyframes ink-wingbeat{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}
@media(max-width:880px){.hero-birds{top:13%;left:5%;width:76px;height:30px}}
@media(prefers-reduced-motion:reduce){.hero-birds{display:none}.bird-wings{animation:none}}


/* Animated ink marks, like a living landscape scroll. */
.cascade-art::before{display:none}
.ink-flock{width:120px;height:50px;animation-duration:38s;top:10%;mix-blend-mode:multiply}
.ink-flock .sketch-bird{fill:#66563e;stroke:#66563e;stroke-width:.25;stroke-linejoin:round}
.ink-wing{transform-box:fill-box;animation:brush-wingbeat 2.8s ease-in-out infinite;animation-play-state:paused}
.left-wing{transform-origin:right bottom}.right-wing{transform-origin:left bottom;animation-delay:-.12s}
.bird-two .ink-wing{animation-delay:-.8s}.bird-three .ink-wing{animation-delay:-1.6s}
.hero-in-view .ink-wing{animation-play-state:running}
@keyframes brush-wingbeat{0%,100%{transform:scaleY(1) rotate(0deg)}45%{transform:scaleY(.25) rotate(5deg)}65%{transform:scaleY(.45) rotate(-3deg)}}
@media(max-width:880px){.ink-flock{top:12%;width:92px;height:40px}}
@media(prefers-reduced-motion:reduce){.ink-flock{display:none}.ink-wing{animation:none}}


/* A quiet breeze through the ink landscape, with no motion over the river. */

.flock-distant{top:17%;left:2%;width:76px;height:32px;animation-duration:46s;animation-delay:-18s}
.flock-high{top:5%;left:9%;width:64px;height:28px;animation-duration:53s;animation-delay:-32s}
.sketch-wind{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;fill:none}
.sketch-wind path{stroke:#887555;stroke-width:.8;stroke-linecap:round;stroke-dasharray:24 300;opacity:0;animation:sketch-breeze 13s linear infinite;animation-play-state:paused}
.sketch-wind path:nth-child(2){animation-delay:-.8s}.sketch-wind path:nth-child(3){animation-delay:-6s}.sketch-wind path:nth-child(4){animation-delay:-7s}
.hero-in-view .sketch-wind path{animation-play-state:running}
@keyframes sketch-breeze{0%{stroke-dashoffset:40;opacity:0}15%{opacity:.23}60%{opacity:.18}85%,100%{stroke-dashoffset:-310;opacity:0}}
@media(max-width:880px){.flock-distant{top:17%;width:64px;height:27px}.flock-high{top:6%;width:48px;height:22px}.sketch-wind path{stroke-width:1.15}}
@media(prefers-reduced-motion:reduce){.sketch-wind,.flock-distant,.flock-high{display:none}}

/* One complete painted branch pivots from its attachment at the top right. */
.painted-branch{position:absolute;right:-1%;top:-1%;width:39%;height:44%;object-fit:contain;object-position:top right;pointer-events:none;z-index:0;transform-origin:99% 1%;animation:whole-branch-sway 8s ease-in-out infinite;animation-play-state:paused;will-change:transform}
.hero-in-view .painted-branch{animation-play-state:running}
@keyframes whole-branch-sway{0%,100%{transform:rotate(-1.4deg)}35%{transform:rotate(1.7deg)}65%{transform:rotate(-.5deg)}82%{transform:rotate(.7deg)}}
@media(max-width:880px){.painted-branch{width:52%;height:31%;right:-2%;top:-1%}}
@media(prefers-reduced-motion:reduce){.painted-branch{animation:none;transform:none;will-change:auto}}

/* Two distant buffalo travel quietly through the painted river. */
.river-buffalo{position:absolute;left:57%;bottom:6%;width:clamp(110px,9vw,180px);pointer-events:none;z-index:0;mix-blend-mode:multiply;animation:buffalo-swim 34s linear infinite;animation-play-state:paused}
.river-buffalo img{display:block;width:100%;height:auto;animation:buffalo-bob 5.5s ease-in-out infinite;animation-play-state:paused}
.hero-in-view .river-buffalo,.hero-in-view .river-buffalo img{animation-play-state:running}
@keyframes buffalo-swim{0%{transform:translateX(20px);opacity:0}12%{opacity:.72}85%{opacity:.72}100%{transform:translateX(-28px);opacity:0}}
@keyframes buffalo-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(1.5px)}}
@media(max-width:880px){.river-buffalo{left:54%;bottom:5.5%;width:90px}}
@media(prefers-reduced-motion:reduce){.river-buffalo{animation:none;opacity:.72}.river-buffalo img{animation:none}}

/* Independent swimming rhythm and a soft trailing wake. */
.river-buffalo{width:clamp(145px,10vw,200px);aspect-ratio:3/1;animation:buffalo-forward 24s linear infinite;animation-play-state:paused}
.buffalo-animal{position:absolute;top:0;height:100%;overflow:hidden;animation:buffalo-paddle 3.2s ease-in-out infinite;animation-play-state:paused;transform-origin:50% 65%}
.buffalo-lead{left:0;width:56%}.buffalo-follow{left:56%;width:44%;animation-delay:-1.4s;animation-duration:3.7s}
.river-buffalo .buffalo-animal img{position:absolute;top:0;height:100%;max-width:none;animation:none}
.buffalo-lead img{left:0;width:178.572%}.buffalo-follow img{left:-127.273%;width:227.273%}
.buffalo-wake{position:absolute;top:63%;width:40%;height:11%;border-bottom:1px solid rgba(111,94,62,.45);border-radius:50%;opacity:0;animation:buffalo-ripple 3s ease-out infinite;animation-play-state:paused;transform-origin:left center}
.wake-one{left:30%}.wake-two{left:75%;width:30%;animation-delay:-1.5s}
.hero-in-view .river-buffalo,.hero-in-view .buffalo-animal,.hero-in-view .buffalo-wake{animation-play-state:running}
@keyframes buffalo-forward{0%{transform:translateX(28px);opacity:0}8%{opacity:.82}90%{opacity:.82}100%{transform:translateX(-65px);opacity:0}}
@keyframes buffalo-paddle{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(2.5px) rotate(.6deg)}}
@keyframes buffalo-ripple{0%{transform:translateX(0) scaleX(.5);opacity:0}20%{opacity:.48}100%{transform:translateX(15px) scaleX(1.3);opacity:0}}
@media(max-width:880px){.river-buffalo{left:55%;width:112px}}
@media(prefers-reduced-motion:reduce){.river-buffalo{animation:none;transform:none;opacity:.72}.buffalo-animal,.buffalo-wake{animation:none}.buffalo-wake{display:none}}

/* Sepia illustrations sit in a translucent wash of the landscape paper. */
.cascade-face{background:rgba(225,213,186,.12);border-color:rgba(137,114,76,.08);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.cascade-face::before{background:radial-gradient(ellipse at 50% 42%,rgba(239,225,193,.22),transparent 74%)}
.cascade-face img{filter:saturate(.98);mix-blend-mode:normal}