/* Sloe & Sprig, a DEMO site by Sahbis ("after"). Brand: a Kilkenny shopfront on a winter night, sloe plum,
   holly green, candle gold on a warm parchment page. Motion: CSS does the moving; JS only adds classes and a few
   CSS variables. Sections arrive as they scroll in. Reduced motion, ?static=1 and print show everything, still. */

@font-face{font-family:"Instrument Serif";src:url(instrument.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(instrument-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IS Fallback";src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Times");size-adjust:83.2%;font-style:normal}
@font-face{font-family:"IS Fallback";src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT"),local("Times Italic");size-adjust:88.4%;font-style:italic}
@font-face{font-family:"HG Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:101.9%}
@font-face{font-family:"Hanken Grotesk";src:url(hanken.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --cream:#f7f1e6;
  --paper:#fcf8f1;
  --stone:#efe6d6;
  --tint:#f1e8ee;
  --night:#231327;
  --sloe:#3d1f45;
  --sloe-2:#5a3163;
  --sloe-3:#6f4178;
  --holly:#1f4636;
  --holly-2:#2d5e49;
  --gold:#d9a54a;
  --gold-soft:#f3dca6;
  --berry:#a3303d;
  --ink:#2a1d2c;
  --ink-2:#4d3f4f;
  --line:#e2d6c5;
  --on-ink:#f3ecf2;
  --on-ink-2:#d9cadb;
  --fs-h1:clamp(50px,6.6vw,96px);
  --fs-h2:clamp(42px,5.4vw,78px);
  --fs-h3:clamp(24px,2.1vw,30px);
  --display:"Instrument Serif","IS Fallback",Georgia,serif;
  --body:"Hanken Grotesk","HG Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --spring:cubic-bezier(.2,.8,.2,1);
  --expo:cubic-bezier(.19,1,.22,1);
  --ease:cubic-bezier(.22,1,.36,1);
  --r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:132px;-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--cream);color:var(--ink);font:17px/1.62 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
.defs{position:absolute;width:0;height:0;overflow:hidden}
main,.foot{overflow-x:clip}
a{color:var(--sloe-2);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--berry)}
:focus-visible{outline:3px solid var(--berry);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;margin:0;color:var(--sloe);letter-spacing:-.012em}
h3{line-height:1.1;letter-spacing:0}
p{margin:0}
.wrap{width:min(1220px,100% - 56px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--sloe);color:#fff;padding:10px 16px;border-radius:10px;z-index:60}
.skip:focus{top:12px;color:#fff}
.flake{width:16px;height:16px;color:currentColor;flex:none}

a.ul{text-decoration:none;background:linear-gradient(var(--berry),var(--berry)) left bottom/0% 2px no-repeat,linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;padding-bottom:2px;transition:background-size .5s var(--expo),color .3s var(--ease)}
a.ul:hover{background-size:100% 2px,100% 1px;color:var(--berry)}
.section-ink a.ul,.foot a.ul{background-image:linear-gradient(var(--gold),var(--gold)),linear-gradient(currentColor,currentColor)}
.section-ink a.ul:hover,.foot a.ul:hover{color:var(--gold-soft)}

/* ---------- top bar: demo notice + nav + progress line ---------- */
.topbar{position:sticky;top:0;z-index:50;--sp:0}
.demobar{background:#1b0f1f;color:#f6eef3;font-size:14px;line-height:1.4;text-align:center;padding:8px 16px}
.demobar strong{color:var(--gold-soft);font-weight:700}
.demobar a{color:#fff;margin-left:6px;text-decoration:underline;display:inline-block;padding:2px 0}
.demobar a:hover{color:var(--gold-soft)}
.nav{background:rgba(247,241,230,.9);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid transparent;transition:border-color .4s var(--ease),box-shadow .5s var(--ease)}
.topbar.scrolled .nav{border-bottom-color:rgba(226,214,197,.8);box-shadow:0 12px 30px -24px rgba(61,31,69,.6)}
.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--berry));transform:scaleX(var(--sp));transform-origin:left center;pointer-events:none}
.nav-in{display:flex;align-items:center;gap:28px;min-height:78px}
.brand{text-decoration:none;display:flex;align-items:center;gap:12px;margin-right:auto}
.brand-mark{width:44px;height:44px;transition:transform .7s var(--spring)}
.brand:hover .brand-mark{transform:rotate(-12deg) scale(1.04)}
.brand-words{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--display);font-size:30px;color:var(--sloe);letter-spacing:-.005em}
.amp{font-style:italic;color:var(--berry);padding:0 .02em}
.brand-sub{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-top:4px;font-weight:600}
.mainnav{position:relative}
.mainnav>ul{list-style:none;display:flex;align-items:center;gap:26px;margin:0;padding:0}
.mainnav>ul>li{position:relative;display:flex;align-items:center}
.mainnav>ul>li>a{position:relative;color:var(--ink);text-decoration:none;font-weight:500;font-size:15.5px;padding:10px 0;transition:color .3s var(--ease)}
.mainnav>ul>li>a:hover,.mainnav>ul>li>a[aria-current="true"]{color:var(--sloe)}
.mainnav>ul>li>a[aria-current="true"]{font-weight:650}
.nav-ind{position:absolute;left:0;bottom:2px;height:2px;width:var(--iw,0px);border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--berry));transform:translate3d(var(--ix,0px),0,0);opacity:0;transition:transform .6s var(--spring),width .6s var(--spring),opacity .4s var(--ease);pointer-events:none}
.nav-ind.on{opacity:1}
.dd-btn{display:grid;place-items:center;width:26px;height:26px;margin-left:2px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ink-2);cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.dd-btn svg{width:12px;height:12px;transition:transform .45s var(--spring)}
.dd-btn:hover{background:var(--stone);color:var(--sloe)}
.has-dd.open .dd-btn svg{transform:rotate(180deg)}
.dd{position:absolute;top:calc(100% + 14px);left:-26px;width:370px;padding:10px;background:#fffdf9;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 60px -30px rgba(61,31,69,.45),0 2px 8px -4px rgba(61,31,69,.15);opacity:0;visibility:hidden;transform:translate3d(0,-8px,0) scale(.98);transform-origin:26px 0;transition:opacity .35s var(--ease),transform .45s var(--spring),visibility 0s linear .45s;z-index:60}
.dd::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.has-dd.open .dd{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .45s var(--spring),visibility 0s}
.dd-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.dd-list a{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:14px;text-decoration:none;color:var(--ink);transition:background-color .3s var(--ease),transform .4s var(--spring)}
.dd-list a:hover,.dd-list a:focus-visible{background:var(--stone);transform:translateX(3px)}
.dd-list a:focus-visible{outline-offset:-2px}
.dd-art{display:grid;place-items:center;width:52px;height:44px;flex:none;border-radius:12px;background:linear-gradient(180deg,var(--stone) 62%,#e6dcd9 62%)}
.dd-art svg{width:34px;height:34px}
.dd-t{display:flex;flex-direction:column;gap:1px}
.dd-h{font-family:var(--display);font-size:21px;color:var(--sloe);line-height:1.15}
.dd-p{font-size:13.5px;color:var(--ink-2);line-height:1.35}
.has-dd.open .dd-list li{animation:dd-in .45s var(--spring) both}
.has-dd.open .dd-list li:nth-child(2){animation-delay:.04s}.has-dd.open .dd-list li:nth-child(3){animation-delay:.08s}.has-dd.open .dd-list li:nth-child(4){animation-delay:.12s}
@keyframes dd-in{from{transform:translate3d(0,6px,0)}to{transform:none}}

.menu-btn{display:none;position:relative;width:48px;height:48px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);cursor:pointer;padding:0;transition:border-color .3s var(--ease)}
.menu-btn:hover{border-color:#c9b8a6}
.burger{position:absolute;left:50%;top:50%;width:20px;height:14px;transform:translate(-50%,-50%)}
.burger span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--sloe);transition:transform .45s var(--spring),opacity .25s var(--ease),top .45s var(--spring)}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:6px}.burger span:nth-child(3){top:12px}
.menu-open .burger span:nth-child(1){top:6px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0;transform:scaleX(.3)}
.menu-open .burger span:nth-child(3){top:6px;transform:rotate(-45deg)}

.side{display:none}
.side-backdrop{position:fixed;inset:0;z-index:44;background:rgba(35,19,39,.42);opacity:0;transition:opacity .4s var(--ease)}
.menu-open .side-backdrop{opacity:1}
.side-list{list-style:none;margin:0;padding:0}
.side-item{border-bottom:1px solid var(--line)}
.side-item>a{position:relative;display:flex;align-items:center;justify-content:space-between;padding:15px 4px;font-family:var(--display);font-size:27px;color:var(--sloe);text-decoration:none}
.side-item>a::after{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--line);transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.side-item>a[aria-current="true"]{color:var(--berry)}
.side-item>a[aria-current="true"]::after{background:var(--gold);border-color:var(--gold)}
.side-sub{list-style:none;margin:-4px 0 12px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.side-sub a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--stone);color:var(--ink);text-decoration:none;font-size:15px;font-weight:600}
.side-sub svg{width:26px;height:26px;flex:none}
.side-foot{display:grid;gap:18px;padding-top:22px}
.side-foot .btn{width:100%}
.side-hours{font-size:15px;color:var(--ink-2)}
@media (max-width:1180px){
  .side{display:flex;flex-direction:column;position:fixed;z-index:45;right:0;top:var(--tbh,114px);bottom:0;width:min(420px,86%);padding:18px 24px 28px;background:var(--cream);box-shadow:-30px 0 60px -40px rgba(61,31,69,.6);overflow-y:auto;overscroll-behavior:contain;transform:translate3d(104%,0,0);visibility:hidden;transition:transform .55s var(--expo),visibility 0s linear .55s}
  html.menu-open .side{transform:none;visibility:visible;transition:transform .55s var(--expo),visibility 0s}
  html.js .side-list>li,html.js .side-foot{transition:opacity .5s var(--spring),transform .5s var(--spring)}
  html.js:not(.menu-open) .side-list>li,html.js:not(.menu-open) .side-foot{opacity:0;transform:translate3d(24px,0,0)}
  html.js.menu-open .side-list>li:nth-child(1){transition-delay:.08s}html.js.menu-open .side-list>li:nth-child(2){transition-delay:.12s}
  html.js.menu-open .side-list>li:nth-child(3){transition-delay:.16s}html.js.menu-open .side-list>li:nth-child(4){transition-delay:.2s}
  html.js.menu-open .side-list>li:nth-child(5){transition-delay:.24s}html.js.menu-open .side-list>li:nth-child(6){transition-delay:.28s}
  html.js.menu-open .side-foot{transition-delay:.34s}
  .menu-btn{display:block}
  .mainnav{display:none}
  html.menu-open{overflow:hidden}
}

.rail{display:none}
@media (min-width:1181px){
  html.js .rail{display:block;position:fixed;right:20px;top:50%;z-index:30;transform:translate3d(0,-50%,0);opacity:0;transition:opacity .5s var(--ease)}
  html.js .rail.show{opacity:1}
  .rail ul{list-style:none;margin:0;padding:8px 0;display:grid;gap:4px}
  .rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;width:28px;height:28px;text-decoration:none}
  .rail a::before{content:"";width:8px;height:8px;margin-right:9px;border-radius:50%;background:rgba(247,241,230,.9);border:1.5px solid var(--sloe-2);box-shadow:0 0 0 3px rgba(247,241,230,.35);transition:transform .4s var(--spring),background-color .3s var(--ease),border-color .3s var(--ease)}
  .rail a[aria-current="true"]::before{background:var(--gold);border-color:var(--gold);transform:scale(1.35)}
  .rail a:hover::before,.rail a:focus-visible::before{transform:scale(1.35)}
  .rail-l{position:absolute;right:34px;top:50%;white-space:nowrap;font-size:13px;font-weight:600;color:#fff;background:var(--sloe);padding:6px 10px;border-radius:8px;opacity:0;transform:translate3d(6px,-50%,0);pointer-events:none;transition:opacity .3s var(--ease),transform .4s var(--spring)}
  .rail a:hover .rail-l,.rail a:focus-visible .rail-l{opacity:1;transform:translate3d(0,-50%,0)}
}

/* ---------- buttons: a fill sweeps in from the left ---------- */
.btn,.nav-cta{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:999px;background:var(--sloe);color:#fff;font:650 16px/1 var(--body);text-decoration:none;border:2px solid var(--sloe);cursor:pointer;transition:transform .5s var(--spring),color .35s var(--ease),border-color .35s var(--ease),box-shadow .5s var(--spring)}
.btn::before,.nav-cta::before{content:"";position:absolute;inset:-2px;z-index:-1;background:var(--sloe-2);border-radius:inherit;transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--expo)}
.btn:hover::before,.nav-cta:hover::before{transform:scaleX(1)}
.btn:hover,.nav-cta:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 28px -18px rgba(61,31,69,.8)}
.nav-cta{min-height:46px;padding:0 20px;font-size:15px;gap:8px}
.i-phone,.i-bag{width:18px;height:18px;flex:none}
.btn:hover .i-bag,.nav-cta:hover .i-bag{animation:hop .6s var(--spring) 1}
.btn-ring:hover .i-phone{animation:wiggle .6s var(--ease) 1}
@keyframes hop{0%,100%{transform:none}40%{transform:translateY(-4px) rotate(-8deg)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}}
.btn-line{background:transparent;color:var(--sloe)}
.btn-line::before{background:var(--sloe)}
.btn-line:hover{color:#fff}
.btn-light{background:var(--paper);border-color:var(--paper);color:var(--sloe)}
.btn-light::before{background:#fff}
.btn-light:hover{color:var(--sloe)}
.btn-ghost{background:transparent;border-color:rgba(243,236,242,.55);color:#fff}
.btn-ghost::before{background:rgba(255,255,255,.12)}
.btn-ghost:hover{border-color:#fff}

/* ---------- hero ---------- */
.hero{padding:68px 0 92px;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:center}
.eyebrow,.kicker{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.17em;text-transform:uppercase;font-weight:700;color:var(--berry);margin-bottom:22px}
.hero-h1{font-size:var(--fs-h1);line-height:.98;letter-spacing:-.02em}
.hero-h1 .em{font-style:italic;color:var(--sloe-2)}
.lead{font-size:20px;color:var(--ink-2);margin-top:28px;max-width:31em;line-height:1.56}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.status{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:15px;color:var(--ink-2);background:var(--stone);padding:8px 16px;border-radius:999px}
.status:not(.ready){visibility:hidden}
.dot{width:9px;height:9px;border-radius:50%;background:#8b8385;flex:none}
.status.open .dot{background:#2f8a5b;animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,138,91,.45)}70%{box-shadow:0 0 0 9px rgba(47,138,91,0)}100%{box-shadow:0 0 0 0 rgba(47,138,91,0)}}

.m{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .06em .14em 0;margin-bottom:-.14em}
.m>i{display:inline-block;font-style:normal}
.m>i.em{font-style:italic}
.hero-h1 .ln{display:block;white-space:nowrap}
.hero-h1 .m>i{animation:word 1.05s var(--expo) both}
.hero-h1 .ln:nth-child(1) .m:nth-child(2)>i{animation-delay:.06s}.hero-h1 .ln:nth-child(2) .m:nth-child(1)>i{animation-delay:.12s}
.hero-h1 .ln:nth-child(2) .m:nth-child(2)>i{animation-delay:.18s}.hero-h1 .ln:nth-child(2) .m:nth-child(3)>i{animation-delay:.24s}
.hero-h1 .ln:nth-child(3) .m:nth-child(1)>i{animation-delay:.30s}.hero-h1 .ln:nth-child(3) .m:nth-child(2)>i{animation-delay:.36s}
@keyframes word{from{transform:translate3d(0,112%,0) rotate(2deg)}to{transform:none}}
.hero-rise{animation:rise .8s var(--spring) both}
.hero-rise.hr-2{animation-delay:.45s}.hero-rise.hr-3{animation-delay:.55s}.hero-rise.hr-4{animation-delay:.65s}
@keyframes rise{from{transform:translate3d(0,16px,0)}to{transform:none}}

/* the living scene: a shopfront on a winter night */
.hero-art{position:relative;margin:0;animation:art-in 1.2s .3s var(--expo) both}
@keyframes art-in{from{transform:translate3d(0,34px,0) scale(.97)}to{transform:none}}
.scene{width:100%;height:auto;border-radius:30px;box-shadow:0 44px 90px -44px rgba(35,19,39,.75)}
.px{transform:translate3d(calc(var(--lx,0) * var(--kx,0px)),calc(var(--p,0) * var(--k,0px) + var(--ly,0) * var(--ky,0px)),0);transition:transform .9s var(--ease);will-change:transform}
.px-moon{--k:40px;--kx:16px;--ky:8px}.px-far{--k:22px;--kx:8px;--ky:4px}.px-mid{--k:12px;--kx:4px;--ky:2px}
.px-near{--k:4px;--kx:1.5px;--ky:1px}.px-front{--k:0px}
.px>*{transform-box:fill-box}
.px-far>.layer,.px-mid>.layer,.px-near>.layer,.px-front>.layer{animation:layer 1.3s var(--expo) both}
.px-far>.layer{animation-delay:.4s}.px-mid>.layer{animation-delay:.5s}.px-near>.layer{animation-delay:.6s}.px-front>.layer{animation-delay:.7s}
@keyframes layer{from{transform:translate3d(0,46px,0)}to{transform:none}}
.stars circle{animation:twinkle 4s ease-in-out infinite}
.stars circle:nth-child(2n){animation-delay:1.3s;animation-duration:5.2s}.stars circle:nth-child(3n){animation-delay:2.1s;animation-duration:3.6s}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}}
.moon-glow{transform-origin:center;transform-box:fill-box;animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.08);opacity:1}}
.fascia{font-family:var(--display);font-size:24px;letter-spacing:.14em;fill:#f3dca6}
.bulbs circle{fill:#ffe0a0;animation:bulb 2.6s ease-in-out infinite;opacity:0}
.bulbs circle:nth-child(3n+1){fill:#ffcf6b}.bulbs circle:nth-child(3n+2){fill:#f59aa0}.bulbs circle:nth-child(3n){fill:#fff3d6}
.bulbs circle:nth-child(1){animation-delay:1.2s}.bulbs circle:nth-child(2){animation-delay:1.3s}.bulbs circle:nth-child(3){animation-delay:1.4s}.bulbs circle:nth-child(4){animation-delay:1.5s}
.bulbs circle:nth-child(5){animation-delay:1.6s}.bulbs circle:nth-child(6){animation-delay:1.7s}.bulbs circle:nth-child(7){animation-delay:1.8s}.bulbs circle:nth-child(8){animation-delay:1.9s}
.bulbs circle:nth-child(9){animation-delay:2s}.bulbs circle:nth-child(10){animation-delay:2.1s}.bulbs circle:nth-child(11){animation-delay:2.2s}.bulbs circle:nth-child(12){animation-delay:2.3s}
@keyframes bulb{0%{opacity:.35}50%{opacity:1}100%{opacity:.35}}
.sw,.uw{animation:glow 5s ease-in-out infinite alternate}
.sw2{animation-delay:1.7s}.uw1{animation-delay:.8s;animation-duration:6.4s}.uw2{animation-delay:2.4s;animation-duration:7s}
@keyframes glow{from{opacity:.86}to{opacity:1}}
.win-mid rect:nth-child(2){animation:glow 4s ease-in-out infinite alternate}
.flames path{transform-box:fill-box;transform-origin:center bottom;animation:flick 1.6s ease-in-out infinite alternate}
.flames path:nth-child(2){animation-delay:.5s}
@keyframes flick{from{transform:scale(1,1)}to{transform:scale(.8,1.15) translateX(.4px)}}
.lantern-halo,.post-halo{transform-origin:center;transform-box:fill-box;animation:breathe 5.5s ease-in-out infinite}
.spill{animation:glow 5s ease-in-out infinite alternate}
.smoke circle{transform-box:fill-box;transform-origin:center;animation:smoke 7s ease-out infinite;opacity:0}
.smoke circle:nth-child(2){animation-delay:2.3s}.smoke circle:nth-child(3){animation-delay:4.6s}
@keyframes smoke{0%{opacity:0;transform:translate(0,14px) scale(.6)}20%{opacity:.45}100%{opacity:0;transform:translate(16px,-30px) scale(1.5)}}
.wreath{transform-box:fill-box;transform-origin:50% 0;animation:sway 6s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}

/* the scene rests while it's off screen */
.scene.paused *{animation-play-state:paused!important}

/* snow: each layer is one tile repeated above itself, so a single transform loops it forever */
.snow{animation:drift 9s ease-in-out infinite alternate}
.snow .fall{animation:fall 26s linear infinite}
.snow.s-mid{animation-duration:7s}.snow.s-mid .fall{animation-duration:17s}
.snow.s-near{animation-duration:5.5s}.snow.s-near .fall{animation-duration:11s}
.scene .fall{--fall:560px}
.snowfield .fall{--fall:520px}
@keyframes fall{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,var(--fall,560px),0)}}
@keyframes drift{from{transform:translate3d(-8px,0,0)}to{transform:translate3d(10px,0,0)}}
.snowfield{position:absolute;inset:0;pointer-events:none;z-index:0}
.snowfield svg{width:100%;height:100%}

.hero-card{position:absolute;left:-34px;top:44px;display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.97);border-radius:18px;padding:16px 22px 16px 16px;box-shadow:0 24px 48px -22px rgba(35,19,39,.55);animation:rise .9s 1.1s var(--spring) both}
.hc-mark{width:42px;height:42px;flex:none}
.hero-card>span{display:flex;flex-direction:column;gap:1px}
.hc-k{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--berry);font-weight:700}
.hc-v{font-family:var(--display);font-size:23px;color:var(--sloe);line-height:1.15}
.hc-s{font-size:14px;color:var(--ink-2)}

/* ---------- reveal on arrival ---------- */
.rv{transition:opacity .75s var(--spring),transform .75s var(--spring)}
html.js .rv:not(.in){opacity:0;transform:translate3d(0,26px,0)}
.sec-head.rv,.hs-in.rv,.form.rv,.band.rv,.foot-mark.rv,.v-copy.rv,.visit-copy.rv,.contact-copy.rv{opacity:1!important;transform:none!important}
.kicker{transition:opacity .6s var(--spring),transform .6s var(--spring)}
.kicker .flake{transition:transform 1s var(--expo)}
.sec-head h2,.hs-copy h2,.v-copy h2,.visit-copy h2,.contact-copy h2{transition:clip-path 1s var(--expo) .12s,transform 1s var(--expo) .12s;clip-path:inset(-10% -5% -20% 0)}
.sec-sub,.hs-note,.chips,.next-chip,.v-copy .amounts,.v-list,.visit-copy address,.visit-note,.visit-ctas,.contact-sub,.contact-list{transition:opacity .7s var(--spring) .3s,transform .7s var(--spring) .3s}
html.js .rv:not(.in) .kicker .flake{transform:rotate(-120deg) scale(.4)}
html.js .rv:not(.in)>.kicker,html.js .rv:not(.in) .hs-copy .kicker{opacity:0;transform:translate3d(-12px,0,0)}
html.js .rv:not(.in) h2{clip-path:inset(0 0 100% 0);transform:translate3d(0,36px,0)}
html.js .rv:not(.in) .sec-sub,html.js .rv:not(.in) .hs-note,html.js .rv:not(.in) .chips,html.js .rv:not(.in) .next-chip,
html.js .rv:not(.in) .amounts,html.js .rv:not(.in) .v-list,html.js .rv:not(.in) address,html.js .rv:not(.in) .visit-note,
html.js .rv:not(.in) .visit-ctas,html.js .rv:not(.in) .contact-sub,html.js .rv:not(.in) .contact-list{opacity:0;transform:translate3d(0,12px,0)}

/* ---------- Christmas hours ---------- */
.hours-strip{background:var(--paper);border-block:1px solid var(--line);scroll-margin-top:110px}
.hs-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center;padding:64px 0}
.hs-in h2{font-size:clamp(34px,3.4vw,50px);line-height:1.02}
.hs-note{margin-top:12px;color:var(--ink-2);font-size:16px;max-width:30em}
.hs-reg{font-size:15px}
.timeline{--th:74px;position:relative}
.tabs{display:inline-flex;gap:4px;padding:4px;background:var(--stone);border-radius:999px;margin-bottom:18px;flex-wrap:wrap}
.tabs button{font:600 14.5px/1 var(--body);color:var(--ink-2);background:transparent;border:0;border-radius:999px;padding:11px 16px;min-height:40px;cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.tabs button:hover{color:var(--sloe)}
.tabs button[aria-selected="true"]{background:#fff;color:var(--sloe);box-shadow:0 6px 16px -10px rgba(61,31,69,.55)}

.tl-panel{animation:panel-in .55s var(--spring) both}
@keyframes panel-in{from{opacity:.001;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
.tl{width:100%;border-collapse:collapse}
.tl th{width:var(--th);text-align:left;font-weight:650;font-size:14px;color:var(--ink-2);padding:6px 0;white-space:nowrap}
.tl td{padding:6px 0;display:flex;align-items:center;gap:14px}
.bar{display:block;position:relative;height:12px;border-radius:999px;background:var(--stone);flex:1 1 auto;min-width:80px}
.bar>span{position:absolute;top:0;bottom:0;left:calc(var(--s,0) * 100%);width:calc(var(--w,0) * 100%);border-radius:999px;background:linear-gradient(90deg,var(--sloe-2),var(--sloe));transform-origin:left center;transition:transform .85s var(--spring)}
.late .bar>span{background:linear-gradient(90deg,var(--sloe-2),var(--sloe) 70%,var(--berry))}
html.js .timeline:not(.fill) .bar>span{transform:scaleX(0)}
.tl tr:nth-child(2) .bar>span{transition-delay:.06s}.tl tr:nth-child(3) .bar>span{transition-delay:.12s}.tl tr:nth-child(4) .bar>span{transition-delay:.18s}
.tl tr:nth-child(5) .bar>span{transition-delay:.24s}.tl tr:nth-child(6) .bar>span{transition-delay:.3s}.tl tr:nth-child(7) .bar>span{transition-delay:.36s}
.tt{flex:0 0 auto;width:12.5em;font-size:14.5px;color:var(--ink)}
.closed .tt{color:#5e5460;width:auto;flex:1}
.tl tr.today th{color:var(--berry)}
.tl tr.today .bar{box-shadow:0 0 0 2px var(--gold-soft)}
.tl tr.today .tt{font-weight:650}
.tl-scale{position:relative;height:20px;margin-left:var(--th);margin-right:calc(12.5em + 14px);font-size:12px;color:#5e5460}
.tl-scale span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.t9{left:0}.t14{left:45.4545%}.t20{left:100%}
.now{position:absolute;bottom:0;width:2px;background:var(--berry);border-radius:2px;top:var(--nt,80px);height:var(--nh,20px);left:calc(var(--th) + (100% - var(--th) - 12.5em - 14px) * var(--now,0));transition:opacity .6s var(--spring) .9s;animation:now-pulse 2.8s ease-in-out infinite}
html.js .timeline:not(.fill) .now{opacity:0}
@keyframes now-pulse{0%,100%{box-shadow:0 0 0 0 rgba(163,48,61,.35)}50%{box-shadow:0 0 0 5px rgba(163,48,61,0)}}
.now-t{position:absolute;top:-20px;left:50%;transform:translateX(-50%);background:var(--berry);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:6px}

/* ---------- sections ---------- */
.section{position:relative;padding:150px 0}
.sec-head{margin-bottom:64px}
.section h2{font-size:var(--fs-h2);max-width:14em}
.sec-sub{margin-top:22px;color:var(--ink-2);font-size:18.5px;max-width:30em}
.section-tint{background:var(--tint)}
.section-ink{background:var(--sloe);color:var(--on-ink)}
.section-ink h2,.section-ink h3{color:#fff}
.section-ink .kicker{color:var(--gold-soft)}
.ridge{position:absolute;left:0;right:0;height:80px;pointer-events:none;overflow:hidden}
.ridge svg{width:106%;max-width:none;height:100%;margin-left:-3%;transform:translate3d(var(--rx,0px),0,0);transition:transform .9s var(--ease)}
.ridge-top{top:-77px}
.ridge path{fill:var(--sloe)}

/* ---------- gift ideas: sticky heading beside illustrated cards ---------- */
.gifts{display:grid;grid-template-columns:.74fr 1.26fr;gap:64px;align-items:start}
.gifts-head{position:sticky;top:170px;margin-bottom:0}
.gifts-head h2{max-width:7em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.chip{font:600 15px/1 var(--body);color:var(--sloe);background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:0 17px;min-height:44px;cursor:pointer;transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .45s var(--spring)}
.chip:hover{border-color:#c7b3a4;transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--sloe);border-color:var(--sloe);color:#fff}
.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{--mx:50%;--my:50%;position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);transition:opacity .75s var(--spring),transform .75s var(--spring),background-color .5s var(--ease),border-color .5s var(--ease),box-shadow .6s var(--spring)}
.card:nth-child(even){transition-delay:.09s,.09s,0s,0s,0s}
.card.arrived{transition-delay:0s!important}
html.js .card:not(.in){opacity:0;transform:translate3d(0,30px,0) scale(.98)}
.card.out{opacity:0!important;transform:scale(.96)!important;transition-duration:.25s!important;transition-delay:0s!important}
.card[hidden]{display:none}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(243,220,166,.26),transparent 45%);opacity:0;transition:opacity .5s var(--ease)}
.card-art{aspect-ratio:12/7;overflow:hidden;border-bottom:1px solid var(--line);transition:border-color .5s var(--ease)}
.card-art svg{width:100%;height:100%}
.va-bg{fill:var(--stone);transition:fill .6s var(--ease)}
.va-hill{fill:#fff;opacity:.7;transition:fill .6s var(--ease),opacity .6s var(--ease)}
.va-obj{transition:transform .8s var(--expo);transform-box:fill-box;transform-origin:center bottom}
.va-pop,.va-bow,.va-lid,.va-fold,.va-b,.va-robin,.va-book,.va-cray,.va-steam,.va-flame,.va-glow{transition:transform .8s var(--expo),opacity .6s var(--ease);transform-box:fill-box;transform-origin:center bottom}
.va-b{transform-origin:50% 0}
.va-tag{font:700 7px/1 var(--body);letter-spacing:.16em;fill:#f3dca6}
.va-label{font:700 7px/1 var(--body);letter-spacing:.2em;fill:#f3dca6}
.va-flame{animation:flick 1.8s ease-in-out infinite alternate}
.card-body{position:relative;padding:26px 28px 30px}
.price{position:absolute;top:24px;right:24px;font-family:var(--display);font-size:24px;color:var(--berry);transition:opacity .6s var(--spring) .45s,transform .6s var(--spring) .45s,color .5s var(--ease)}
html.js .card:not(.in) .price{opacity:0;transform:translate3d(0,8px,0)}
.card h3{font-size:var(--fs-h3);margin-bottom:10px;padding-right:74px;transition:color .5s var(--ease)}
.card p{color:var(--ink-2);font-size:16px;transition:color .5s var(--ease)}
.card-line{display:block;height:2px;margin-top:22px;background:linear-gradient(90deg,var(--gold),var(--berry));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--expo)}
html.js .card:not(.in) .va-obj{transform:translate3d(0,14px,0)}
.card:hover{background:var(--sloe);border-color:var(--sloe);box-shadow:0 34px 60px -34px rgba(61,31,69,.85);transform:translateY(-6px)}
.card:hover::after{opacity:1}
.card:hover .card-art{border-color:rgba(255,255,255,.1)}
.card:hover .va-bg{fill:#efe3ec}
.card:hover .va-hill{fill:#fff;opacity:1}
.card:hover .va-obj{transform:translate3d(0,-4px,0)}
.card:hover .va-pop{transform:translate3d(0,-7px,0)}
.card:hover .va-bow{transform:rotate(-8deg) scale(1.1)}
.card:hover .va-lid{transform:translate3d(0,-8px,0) rotate(-4deg)}
.card:hover .va-fold{transform:translate3d(6px,-4px,0) rotate(2deg)}
.card:hover .va-b1{transform:rotate(6deg)}.card:hover .va-b2{transform:rotate(-4deg)}.card:hover .va-b3{transform:rotate(5deg)}
.card:hover .va-robin{transform:translate3d(0,-6px,0) rotate(-4deg)}
.card:hover .va-book{transform:rotate(4deg)}
.card:hover .va-cray{transform:translate3d(0,-4px,0)}
.card:hover .va-steam{transform:translate3d(0,-6px,0);opacity:.6}
.card:hover .va-glow{transform:scale(1.25);opacity:.6}
.card:hover h3{color:#fff}
.card:hover p{color:var(--on-ink-2)}
.card:hover .price{color:var(--gold-soft)}
.card:hover .card-line{transform:scaleX(1)}

/* ---------- the full-bleed band: rooftops, snow, one big sentence ---------- */
.band{position:relative;background:var(--night);color:#fff;overflow:hidden;padding:170px 0 240px}
.band-in{position:relative;z-index:1}
.band-mark{width:58px;height:58px;margin-bottom:34px;transition:opacity .8s var(--spring),transform 1s var(--spring)}
html.js .band:not(.in) .band-mark{opacity:0;transform:translate3d(0,16px,0) rotate(-40deg)}
.band-t{font-family:var(--display);font-weight:400;font-size:clamp(44px,6.8vw,104px);line-height:1;letter-spacing:-.02em;max-width:13em;color:#fff}
.band-t .em{font-style:italic;color:var(--gold-soft)}
.band-t .m>i{transition:transform 1.1s var(--expo)}
html.js .band:not(.in) .band-t .m>i{transform:translate3d(0,112%,0) rotate(2deg)}
.band-t .m:nth-child(2)>i{transition-delay:.06s}.band-t .m:nth-child(3)>i{transition-delay:.12s}.band-t .m:nth-child(4)>i{transition-delay:.18s}
.band-t .m:nth-child(5)>i{transition-delay:.24s}.band-t .m:nth-child(6)>i{transition-delay:.30s}.band-t .m:nth-child(7)>i{transition-delay:.36s}
.band-t .m:nth-child(8)>i{transition-delay:.42s}.band-t .m:nth-child(9)>i{transition-delay:.48s}.band-t .m:nth-child(10)>i{transition-delay:.54s}
.band-roofs{position:absolute;left:0;right:0;bottom:0;height:360px;pointer-events:none;z-index:0}
.band-roofs svg{width:100%;height:100%}
.br{transform:translate3d(0,var(--bry,0px),0);transition:transform .9s var(--ease)}
.br1{fill:#2e1934;--bry:calc(var(--bp,0) * 40px)}
.br2{fill:#3a2142;--bry:calc(var(--bp,0) * 22px)}
.br3{fill:var(--cream)}
.br-lights rect{fill:#f2c26a;animation:glow 3.4s ease-in-out infinite alternate}
.br-lights rect:nth-child(2){animation-delay:1s}.br-lights rect:nth-child(3){animation-delay:2s}

/* ---------- order-by dates ---------- */
.next-chip{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:15px;font-weight:600;color:var(--sloe);background:#fff;border:1px solid var(--line);padding:9px 16px;border-radius:999px}
.next-chip .dot{background:var(--berry);animation:pulse-b 2.4s infinite}
@keyframes pulse-b{0%{box-shadow:0 0 0 0 rgba(163,48,61,.4)}70%{box-shadow:0 0 0 9px rgba(163,48,61,0)}100%{box-shadow:0 0 0 0 rgba(163,48,61,0)}}
.steps{--line:0;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.steps::before{content:"";position:absolute;left:36px;right:36px;top:35px;height:2px;background:repeating-linear-gradient(90deg,var(--sloe-2) 0 10px,transparent 10px 18px);transform:scaleX(var(--line));transform-origin:left center}
.step{position:relative;padding:0 26px 0 0;transition:opacity .6s var(--spring),transform .6s var(--spring)}
.step-n{position:relative;display:grid;place-items:center;align-content:center;width:72px;height:72px;border-radius:50%;background:var(--sloe);color:#fff;margin-bottom:24px;box-shadow:0 0 0 8px var(--cream);transition:transform .55s var(--spring),background-color .4s var(--ease)}
.sn-d{font-family:var(--display);font-size:30px;line-height:.9}
.sn-m{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}
.step h3{font-size:var(--fs-h3);margin-bottom:8px}
.step p{color:var(--ink-2);font-size:16px;max-width:17em}
.step-left{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:650;color:var(--holly-2)}
.step-left:empty{display:none}
.step.passed .step-n{background:#8d8190}
.step.passed .step-left{color:#6a5f6c}
.step.next .step-n{background:var(--berry);animation:pulse-b 2.4s infinite}
.step.rv,html.js .step.rv:not(.in){opacity:1;transform:none}
html.js .steps .step:not(.on){opacity:.001;transform:translate3d(0,16px,0)}
html.js .steps .step:not(.on) .step-n{transform:scale(.4)}
.order-note{margin-top:56px;font-size:16px;color:var(--ink-2);display:inline-flex;align-items:center;gap:10px;background:var(--paper);border:1px dashed #d4b6a0;padding:10px 18px;border-radius:999px}

/* ---------- gift vouchers ---------- */
.vouchers{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.amounts{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.v-list{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px;max-width:30em}
.v-list li{position:relative;padding-left:26px;color:var(--ink-2)}
.v-list li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50%;background:var(--sloe-2);box-shadow:inset -3px -3px 0 rgba(0,0,0,.18)}
.v-stage{perspective:1100px;transition:opacity .9s var(--spring),transform .9s var(--spring)}
html.js .v-stage:not(.in){opacity:0;transform:translate3d(0,40px,0)}
.voucher{--rx:0deg;--ry:0deg;--gx:30%;--gy:20%;position:relative;overflow:hidden;aspect-ratio:1.62;max-width:520px;margin-inline:auto;border-radius:24px;padding:34px 36px;color:#fff;background:radial-gradient(120% 120% at 100% 0%,#6f4178 0%,var(--sloe) 55%,#26142c 100%);box-shadow:0 50px 80px -40px rgba(35,19,39,.8),inset 0 0 0 1px rgba(243,220,166,.25);transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--ease);display:flex;flex-direction:column}
.voucher::before{content:"";position:absolute;inset:12px;border:1.5px solid rgba(217,165,74,.55);border-radius:16px;pointer-events:none}
.v-shine{position:absolute;inset:0;background:radial-gradient(360px circle at var(--gx) var(--gy),rgba(255,236,190,.28),transparent 55%);pointer-events:none}
.v-top{position:relative;display:flex;align-items:center;gap:12px}
.v-mark{width:46px;height:46px}
.v-k{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);font-weight:700}
.v-amt{position:relative;font-family:var(--display);font-size:clamp(64px,7vw,96px);line-height:1;margin-top:auto;color:#fff}
.v-amt.flip [data-amount-out]{display:inline-block;animation:flip .55s var(--spring)}
@keyframes flip{from{transform:translate3d(0,40%,0) rotateX(60deg);opacity:0}to{transform:none;opacity:1}}
.v-to{position:relative;font-family:var(--display);font-style:italic;font-size:21px;color:var(--on-ink-2);margin-top:8px}
.v-foot{position:relative;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:13px;letter-spacing:.06em;color:var(--on-ink-2)}

/* ---------- visit ---------- */
.visit{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
address{font-style:normal;font-family:var(--display);font-size:30px;line-height:1.3;margin-top:30px;color:#fff}
.visit-note{margin-top:18px;color:var(--on-ink-2);max-width:30em}
.visit-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.map{margin:0;transition:opacity .9s var(--spring),transform .9s var(--spring)}
html.js .map:not(.in){opacity:0;transform:translate3d(0,44px,0)}
.map-frame{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 40px 70px -36px rgba(0,0,0,.7);background:#e8e4dc;aspect-ratio:5/3}
.map-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.map.in .map-frame img{transform:scale(1.02)}
.map:hover .map-frame img{transform:scale(1.05)}
.pin{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-26px 0 0 -13px;background:var(--berry);border:3px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 6px 14px rgba(0,0,0,.35);transition:translate .75s cubic-bezier(.34,1.56,.64,1) .5s,opacity .3s ease .5s}
html.js .map:not(.in) .pin{translate:0 -50px;opacity:0}
.pin::after{content:"";position:absolute;inset:-13px;border-radius:50%;border:2px solid rgba(163,48,61,.55);opacity:0}
.map.in .pin::after{animation:ring 1.4s var(--ease) 1.2s 2}
@keyframes ring{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}
.pin-label{position:absolute;left:calc(50% + 18px);top:calc(50% - 52px);background:var(--sloe);color:#fff;font:650 13px/1 var(--body);padding:8px 11px;border-radius:9px;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(0,0,0,.5);transition:opacity .5s var(--spring) 1s,transform .5s var(--spring) 1s}
html.js .map:not(.in) .pin-label{opacity:0;transform:translate3d(-6px,0,0)}
.map figcaption{font-size:13px;color:var(--on-ink-2);margin-top:12px}
.map figcaption a{color:#fff;display:inline-block;padding-top:4px}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.contact-sub{margin-top:20px;color:var(--ink-2);font-size:18px;max-width:28em}
.contact-list{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:16px}
.contact-list li{font-size:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.contact-list a{display:inline-block;margin-top:4px;min-height:24px}
.demo-note{font-size:14px;color:#5e5460}
.ck{display:block;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--berry);font-weight:700;margin-bottom:2px}
.form{background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:38px;display:grid;gap:18px;box-shadow:0 30px 60px -46px rgba(61,31,69,.55)}
.form>*{transition:opacity .6s var(--spring),transform .6s var(--spring)}
html.js .form:not(.in)>*{opacity:0;transform:translate3d(0,14px,0)}
.form>*:nth-child(2){transition-delay:.08s}.form>*:nth-child(3){transition-delay:.16s}.form>*:nth-child(4){transition-delay:.24s}
.form>*:nth-child(5){transition-delay:.32s}.form>*:nth-child(6){transition-delay:.4s}.form>*:nth-child(7){transition-delay:.48s}
.form-k{font-family:var(--display);font-size:32px;color:var(--sloe)}
.field{display:grid;gap:6px}
label{font-weight:650;font-size:15px}
input,textarea,select{font:inherit;color:var(--ink);background:var(--cream);border:1.5px solid #cdbba8;border-radius:12px;padding:13px 15px;width:100%;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease)}
input:hover,textarea:hover,select:hover{border-color:#b39c86}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--sloe-2);background:#fff;box-shadow:0 0 0 4px rgba(90,49,99,.16)}
.form .btn{justify-self:start}
.form-note{font-size:14px;color:var(--ink-2)}
.form-done{background:#efe6ee;border-radius:12px;padding:12px 14px;color:var(--sloe);font-weight:600}

/* ---------- footer ---------- */
.foot{position:relative;background:var(--night);color:#e4d8e3;padding:130px 0 56px;font-size:15px;margin-top:40px;overflow:hidden}
.foot-roofs{position:absolute;left:0;right:0;top:0;height:420px;pointer-events:none;opacity:.95;z-index:0}
.foot-roofs svg{width:100%;height:100%}
.fr{transform:translate3d(0,calc(var(--fp,0) * var(--fk,0px)),0);transition:transform .9s var(--ease)}
.fr1{fill:#2c1733;--fk:-36px}.fr2{fill:#33203b;--fk:-20px}.fr3{fill:var(--night)}
.snowfield-foot{z-index:0}
.foot-in{position:relative;z-index:1;display:grid;gap:22px}
.foot-mark{font-family:var(--display);font-size:clamp(76px,16vw,236px);line-height:.88;letter-spacing:-.03em;color:#f6eef3;margin:0 0 36px;white-space:nowrap}
.foot-mark .amp{color:var(--gold)}
.foot-mark>span{display:inline-block;transition:transform 1.1s var(--expo),opacity 1.1s var(--expo)}
.foot-mark>span:nth-child(2){transition-delay:.08s}.foot-mark>span:nth-child(3){transition-delay:.16s}
html.js .foot-mark:not(.in)>span{transform:translate3d(0,40%,0);opacity:0}
.foot a{color:#fff}
.foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid rgba(255,255,255,.14);padding-top:26px}
.foot-brand{display:flex;gap:16px;align-items:center}
.foot-mk{width:48px;height:48px;flex:none}
.foot-name{font-family:var(--display);font-size:25px;color:#fff;margin-bottom:2px}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{display:inline-block;padding:8px 0 4px}
.foot p>a.ul{display:inline-block;padding-top:6px}
.legal,.made{color:#cdbfcc}
.made{font-size:14px}

/* legal pages */
.legalpage{padding-top:84px}
.narrow{max-width:760px}
.legalpage h1{font-size:clamp(44px,5vw,64px);margin-bottom:8px}
.legalpage h2{font-size:28px;margin:34px 0 8px;max-width:none}
.legalpage p,.legalpage li{color:var(--ink-2);margin-top:10px;font-size:17.5px}
.legalpage a{display:inline-block;padding:6px 0 0}
.back{margin-top:36px!important}

/* static / print / settled */
html.rv-settle *,html.rv-settle *::before,html.rv-settle *::after{transition:none!important}
html.rv-settle .steps{--line:1}
@media print{
  .steps{--line:1}.steps .step{opacity:1!important;transform:none!important}
  .topbar{position:static}
  .snow{display:none}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .gifts{grid-template-columns:1fr;gap:40px}
  .gifts-head{position:static}
  .gifts-head h2{max-width:none}
  .steps::before{left:35px;right:auto;top:36px;bottom:36px;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--sloe-2) 0 10px,transparent 10px 18px);transform:scaleY(var(--line));transform-origin:top center}
  .steps{grid-template-columns:1fr;gap:36px}
  .step{padding:0 0 0 100px;min-height:72px}
  .step p{max-width:34em}
  .step-n{position:absolute;left:0;top:0;margin:0}
}
@media (max-width:900px){
  .hero{padding:44px 0 64px}
  .hero-in,.visit,.contact,.hs-in,.vouchers{grid-template-columns:1fr;gap:44px}
  .hero-card{position:relative;left:auto;top:auto;bottom:auto;margin:-46px 18px 0;max-width:420px}
  .section{padding:104px 0}
  .band{padding:120px 0 210px}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .wrap{width:calc(100% - 32px)}
  .demobar{font-size:13px;padding:7px 12px}
  .nav-in{min-height:64px;gap:10px}
  .brand-mark{width:36px;height:36px}
  .brand-name{font-size:25px}
  .brand-sub{font-size:10px;letter-spacing:.12em}
  .bs-town{display:none}
  .nav-cta{padding:0;width:46px}
  .nav-cta span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-cta .i-bag{width:20px;height:20px}
  .menu-btn{width:46px;height:46px}
  .side-item>a{font-size:25px;padding:12px 2px}
  .side-sub a{font-size:14px;padding:7px 8px;gap:6px}
  .side-sub svg{width:22px;height:22px}
  .eyebrow,.kicker{letter-spacing:.13em;font-size:12px}
  .lead{font-size:18px}
  .ctas .btn{flex:1 1 100%}
  .cards{grid-template-columns:1fr}
  .hs-in{padding:52px 0}
  .timeline{--th:62px}
  .tt{width:auto;flex:0 1 auto;font-size:14px}
  .tl td{flex-wrap:wrap;gap:4px 12px}
  .bar{flex-basis:100%;order:2}
  .tl-scale{margin-right:0}
  .now{display:none}
  .tabs button{padding:10px 12px;font-size:14px}
  .form{padding:24px}
  .form .btn{justify-self:stretch}
  .hc-v{font-size:19px}
  .hero-card{padding:12px 16px 12px 12px}
  .voucher{padding:26px 26px 24px}
  .v-to{font-size:18px}
  address{font-size:26px}
  .ridge{height:40px}
  .ridge-top{top:-37px}
  .section{padding:88px 0}
  .band{padding:96px 0 180px}
  .band-roofs{height:220px}
  .foot{padding-top:100px}
  .foot-roofs{height:260px}
  .order-note{border-radius:16px}
}

/* ---------- reduced motion: everything still, everything visible ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .bulbs circle{opacity:1}
  .smoke circle{opacity:.3}
  html.js .rv:not(.in),html.js .card:not(.in),html.js .map:not(.in),html.js .v-stage:not(.in),
  html.js .form:not(.in)>*,html.js .steps .step:not(.on),
  html.js .rv:not(.in)>.kicker,html.js .rv:not(.in) .hs-copy .kicker,
  html.js .rv:not(.in) .sec-sub,html.js .rv:not(.in) .hs-note,html.js .rv:not(.in) .chips,html.js .rv:not(.in) .next-chip,
  html.js .rv:not(.in) .amounts,html.js .rv:not(.in) .v-list,html.js .rv:not(.in) address,html.js .rv:not(.in) .visit-note,
  html.js .rv:not(.in) .visit-ctas,html.js .rv:not(.in) .contact-sub,html.js .rv:not(.in) .contact-list,
  html.js .card:not(.in) .price,html.js .map:not(.in) .pin-label,html.js .band:not(.in) .band-mark,
  html.js .foot-mark:not(.in)>span{opacity:1;transform:none}
  html.js .rv:not(.in) h2{clip-path:none;transform:none}
  html.js .band:not(.in) .band-t .m>i,html.js .card:not(.in) .va-obj{transform:none}
  html.js .map:not(.in) .pin{translate:none;opacity:1}
  html.js .steps .step:not(.on) .step-n{transform:none}
  html.js .timeline:not(.fill) .bar>span{transform:none}
  html.js .timeline:not(.fill) .now{opacity:1}
  html.js .rv:not(.in) .kicker .flake{transform:none}
  .steps{--line:1}
  .px,.ridge svg,.br,.fr,.voucher{transform:none}
  .card:hover,.btn:hover,.chip:hover{transform:none}
}

[tabindex="-1"]:focus{outline:none}
/* Without scripting (the (scripting: none) media query, not a class set by JS, so nothing moves when JS arrives) */
@media (scripting:none){
  .menu-btn{display:none!important}
  .has-dd:hover .dd,.has-dd:focus-within .dd{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .45s ease,visibility 0s}
  .status,.tabs,.bar,.tl-scale{display:none}
  .tl-panel{margin-bottom:22px}
}
@media (scripting:none) and (max-width:1100px){
  .side{position:static!important;display:block!important;transform:none!important;visibility:visible!important;width:auto!important;padding:18px 24px 26px!important;background:var(--paper)!important;box-shadow:none!important;border-bottom:1px solid var(--line)}
}

/* legal pages: a plain header and a short footer */
.nav-cta-plain{background:transparent;color:var(--sloe)}
.nav-cta-plain::before{background:var(--sloe)}
.nav-cta-plain:hover{color:#fff}
.foot-plain{padding:56px 0 48px}
.legalpage ul{padding-left:22px}
@media (max-width:560px){.nav-cta-plain{width:auto;padding:0 16px}.nav-cta-plain span{position:static;width:auto;height:auto;overflow:visible;clip:auto}}

/* Demo label: fixed, 28px, bottom-right on every page of the demo site (no inline style: strict CSP). */
.demo-label{position:fixed;right:8px;bottom:8px;z-index:9999;display:inline-flex;align-items:center;height:28px;box-sizing:border-box;padding:0 11px;border-radius:999px;background:rgba(10,11,13,.86);color:#fff;border:1px solid rgba(255,255,255,.2);font:500 12px/1 system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.demo-label:hover{background:#000}