/* ============================================================
   Pedal Boat Pub, Lake Orion. "Golden Hour" design.
   One evening on the lake: the sky behind every page goes from
   sunset to night as you scroll and the string lights come on.
   Type: Tanker (display, capitals only, a boat-club poster face) / Satoshi (body), self-hosted.
   Palette from the logo: wheel blue #2F4DA0, red #E32A2C, gold #FBA919.
   ============================================================ */
/* Tanker is a single-weight, capitals-only poster face. Declaring the full weight range maps every requested weight to the one real file, so the browser never fakes a bold. */
@font-face{font-family:"Tanker";font-weight:100 900;src:url("/assets/fonts/Tanker-400.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Satoshi";font-weight:400;src:url("/assets/fonts/Satoshi-400.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Satoshi";font-weight:400;font-style:italic;src:url("/assets/fonts/Satoshi-400i.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Satoshi";font-weight:500;src:url("/assets/fonts/Satoshi-500.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Satoshi";font-weight:700;src:url("/assets/fonts/Satoshi-700.woff2") format("woff2");font-display:swap}
:root{
  --night:#0A1330;--night-2:#101C42;--ink:#FFF4E4;--dim:rgba(255,244,228,.72);--faint:rgba(255,244,228,.46);--line:rgba(255,244,228,.14);
  --gold:#FBA919;--gold-2:#FFD27A;--red:#E32A2C;--blue:#2F4DA0;
  --display:"Tanker","Impact","Arial Narrow Bold",sans-serif;--body:"Satoshi","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);--gutter:clamp(1.25rem,4vw,4rem);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent;scroll-padding-top:110px}
html,body{overflow-x:clip}
body{background:var(--night);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a,button,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold);color:var(--night)}
p a,.faq-a a{color:var(--gold-2);text-decoration:underline;text-decoration-color:rgba(251,169,25,.4);text-underline-offset:3px}
p a:hover,.faq-a a:hover{text-decoration-color:currentColor}
.wrap{width:min(1240px,100% - 2*var(--gutter));margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--night);padding:.6rem 1rem;border-radius:8px;z-index:100}.skip:focus{left:8px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1;letter-spacing:.005em;text-wrap:balance}
.h2{font-size:clamp(2.4rem,5.6vw,4.8rem);line-height:.98;max-width:18ch}
.h2 em,h1 em{font-style:normal;color:var(--gold)}
h3{font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.1}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--dim);max-width:52ch;margin-top:1.25rem;text-wrap:pretty}
p{text-wrap:pretty}
.sec{padding-block:clamp(4rem,9vw,7rem)}
.sec-tight{padding-block:clamp(3rem,6vw,4.5rem)}
.rv{opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1s var(--ease)}

/* sky and string lights, fixed behind and above everything */
.sky{position:fixed;inset:0;z-index:-2;background:var(--night);pointer-events:none}
.sky-day{position:absolute;inset:0;will-change:opacity;opacity:1;background:radial-gradient(120% 60% at 50% 0%,rgba(251,169,25,.55) 0%,rgba(242,106,58,.35) 30%,rgba(90,40,90,.25) 55%,transparent 75%),linear-gradient(180deg,#2A1B4E 0%,#141A46 45%,var(--night) 100%)}
.sky-night{position:absolute;inset:0;will-change:opacity;opacity:0;background:linear-gradient(180deg,#07101F 0%,var(--night) 40%,#060C1E 100%)}
.stars{position:absolute;inset:0;opacity:0;will-change:opacity;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 30% 8%,#fff 60%,transparent 62%),radial-gradient(1.4px 1.4px at 48% 22%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 67% 12%,#fff 60%,transparent 62%),radial-gradient(1.2px 1.2px at 82% 26%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 92% 6%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 20% 40%,#fff 60%,transparent 62%),radial-gradient(1.3px 1.3px at 58% 38%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 75% 44%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 8% 60%,#fff 60%,transparent 62%),radial-gradient(1.1px 1.1px at 40% 55%,#fff 60%,transparent 62%),radial-gradient(1px 1px at 88% 58%,#fff 60%,transparent 62%)}
.lights{position:fixed;left:0;right:0;top:0;height:64px;z-index:40;pointer-events:none}
.lights svg{width:100%;height:64px;overflow:visible}
.lights .wire{fill:none;stroke:rgba(255,244,228,.35);stroke-width:1.2}
.lights .bulb{fill:#E8C98A;opacity:.55}
.lights .glows{opacity:0;will-change:opacity}.lights .glow{fill:url(#glowGrad)}
.lights .hots{opacity:.25;will-change:opacity}.lights .hot{fill:#FFF1C9}

/* floating nav */
/* left+right with an auto-margin keeps the pill centred while letting it measure against the full viewport; a fixed element with only left:50% measures against half the screen and squeezes its contents */
.nav{position:fixed;top:16px;left:1rem;right:1rem;width:max-content;margin-inline:auto;z-index:50;display:flex;align-items:center;gap:.25rem;padding:.35rem .5rem .35rem .45rem;border-radius:999px;background:rgba(10,19,48,.6);border:1px solid rgba(255,244,228,.16);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 10px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);max-width:calc(100% - 2rem)}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-weight:400;font-size:1.05rem;letter-spacing:.01em;white-space:nowrap}
.brand img{flex:none;width:48px;max-width:none;height:auto;filter:drop-shadow(0 1px 4px rgba(0,0,0,.35))}
.brand em{font-style:normal;color:var(--gold)}
.nav .brand{flex:none;margin-right:1.6rem;padding:.35rem .6rem .35rem .2rem;position:relative}
.nav .brand::after{content:"";position:absolute;right:-.85rem;top:22%;height:56%;width:1px;background:rgba(255,244,228,.18)}
.nav .links{display:flex;gap:.1rem}
.nav .links a{white-space:nowrap;padding:.55rem .85rem;border-radius:999px;font-size:.92rem;font-weight:500;color:var(--dim);transition:background .25s var(--ease),color .25s}
.nav .links a:hover,.nav .links a[aria-current="page"]{background:rgba(255,244,228,.1);color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:.6rem;border-radius:999px;font-weight:700;line-height:1;white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.98)}
.btn-red{background:var(--red);color:#fff;padding:.85rem 1.2rem .85rem 1.4rem;box-shadow:0 10px 30px rgba(227,42,44,.35)}
.btn-navy{background:var(--night);color:#fff;padding:.85rem 1.2rem .85rem 1.4rem;border:1px solid var(--line)}
.btn .arrow{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translate(2px,-2px)}
.btn .arrow svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn-lg{padding:1.1rem 1.4rem 1.1rem 1.75rem;font-size:1.05rem}.btn-lg .arrow{width:36px;height:36px}
.pill{display:inline-flex;align-items:center;padding:.75rem 1.1rem;border-radius:999px;border:1px solid rgba(255,244,228,.28);font-weight:500;font-size:.95rem;transition:background .25s,border-color .25s}
.pill:hover{background:rgba(255,244,228,.1);border-color:rgba(255,244,228,.55)}
.pills{display:flex;flex-wrap:wrap;gap:.7rem}
.nav-toggle{display:none;width:42px;height:42px;border-radius:50%;place-items:center}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;margin:2.5px 0;transition:transform .3s var(--ease),opacity .2s}
.menu{position:fixed;inset:0;z-index:45;background:rgba(7,16,31,.94);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);display:flex;flex-direction:column;justify-content:center;padding:5rem var(--gutter) 2rem;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);overflow-y:auto}
.menu.open{opacity:1;pointer-events:auto}
.menu>a:not(.btn){font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,7.5vw,3.2rem);line-height:1.1;padding:.3rem 0;transform:translateY(24px);opacity:0;transition:transform .6s var(--ease),opacity .5s}
.menu.open>a{transform:none;opacity:1}
.menu>a:nth-child(2){transition-delay:.05s}.menu>a:nth-child(3){transition-delay:.1s}.menu>a:nth-child(4){transition-delay:.15s}.menu>a:nth-child(5){transition-delay:.2s}.menu>a:nth-child(6){transition-delay:.25s}.menu>a:nth-child(7){transition-delay:.3s}
.menu .btn{margin-top:1.5rem;align-self:flex-start}
.menu-tel{margin-top:1rem;font-weight:700;color:var(--gold)}
@media(max-width:1180px){.nav .links,.nav>.btn{display:none}.nav-toggle{display:grid}.nav{width:auto;justify-content:space-between}}
body.menu-open{overflow:hidden}
body.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}body.menu-open .nav-toggle span:nth-child(2){opacity:0}body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* homepage hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%}
.hero-media video{opacity:0;transition:opacity 1s ease}
.hero.is-playing .hero-media video{opacity:1}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,19,48,.35) 0%,rgba(10,19,48,0) 30%,rgba(10,19,48,.25) 60%,rgba(10,19,48,.96) 100%)}
.hero-in{position:relative;padding:7rem 0 clamp(2rem,5vw,4.5rem)}
.hero h1{font-size:clamp(3.4rem,10.5vw,10rem);line-height:.9;letter-spacing:.005em;max-width:13ch}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .line>span{display:block;transform:translateY(110%)}
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem;margin-top:2rem}
.hero-row p{max-width:34ch;color:var(--dim);font-size:1.1rem}
.hero-cta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.play{display:inline-flex;align-items:center;gap:.8rem;font-weight:700;text-align:left}
.play .ring{width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(255,244,228,.6);display:grid;place-items:center;backdrop-filter:blur(8px);background:rgba(255,244,228,.08);transition:transform .35s var(--ease),background .25s}
.play:hover .ring{transform:scale(1.06);background:rgba(255,244,228,.18)}
.play svg{width:16px;height:16px;fill:var(--ink);margin-left:3px}
.play small{display:block;font-weight:500;color:var(--faint);font-size:.82rem}
@media(max-height:760px) and (min-width:701px){.hero h1{font-size:clamp(2.6rem,7.5vw,6rem)}.hero-row{margin-top:1.25rem}.hero-row p{font-size:1rem}}
@media(max-width:700px){.hero{min-height:0;display:block}.hero-media{position:relative;inset:auto;aspect-ratio:4/5}.hero-media::after{background:linear-gradient(180deg,rgba(10,19,48,.2) 0%,rgba(10,19,48,0) 45%,var(--night) 100%)}.hero-in{margin-top:-6rem;padding-top:0;padding-bottom:2rem}.hero h1{font-size:clamp(3rem,15vw,4.4rem)}.hero-cta{width:100%}.hero-cta .btn{width:100%;justify-content:space-between}}

/* inner page opening */
.page-open{padding:clamp(8rem,16vw,11rem) 0 clamp(2.5rem,5vw,4rem)}
.page-open h1{font-size:clamp(3rem,7.5vw,7rem);line-height:.92;letter-spacing:.005em;max-width:15ch}
.page-open .lead{max-width:56ch}
.page-open.with-photo .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:end}
.page-photo{aspect-ratio:4/3;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.page-photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.page-open.with-photo .wrap{grid-template-columns:1fr}.page-open{padding-top:7rem}}

/* scores */
.scores{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.score{padding:1.6rem 1.5rem;display:flex;gap:1rem;align-items:baseline;border-left:1px solid var(--line)}
.score:first-child{border-left:0;padding-left:0}
.score b{font-family:var(--display);font-weight:400;font-size:2.6rem;line-height:1;color:var(--gold)}
.score span{color:var(--dim);font-size:.95rem;line-height:1.3}
.st{color:var(--gold);letter-spacing:.08em;font-size:.8rem;display:block}
@media(max-width:760px){.scores{grid-template-columns:1fr}.score{border-left:0;border-top:1px solid var(--line);padding:1rem 0}.score:first-child{border-top:0}.score b{font-size:2rem}}

/* already booked strip */
.booked{display:grid;grid-template-columns:auto 1fr auto;gap:1.25rem 2rem;align-items:center;margin-top:1.25rem;padding:1.1rem 1.5rem;border-radius:999px;border:1px solid rgba(251,169,25,.45);background:rgba(251,169,25,.08);transition:background .25s,border-color .25s,transform .35s var(--ease)}
.booked:hover{background:rgba(251,169,25,.14);border-color:var(--gold);transform:translateY(-2px)}
.booked-q{font-family:var(--display);font-size:1.35rem;color:var(--gold);white-space:nowrap}
.booked-t{color:var(--dim)}
.booked-go{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;white-space:nowrap}
.booked-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.booked{grid-template-columns:1fr;gap:.4rem;border-radius:22px;padding:1.1rem 1.25rem}.booked-go{margin-top:.5rem}}

/* the 90 minutes: pinned horizontal pan on desktop, swipe on phones */
.pan{position:relative}
.pan.pinned{height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding-top:6.5rem;padding-bottom:1.5rem}
.pan-head{padding:0 0 2rem;flex:none}
.pan .h2{font-size:clamp(2rem,4.4vw,3.8rem)}
.pan .lead{margin-top:.75rem}
.pan-wrap{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pan-wrap::-webkit-scrollbar{display:none}
.pan-wrap.pinned{overflow:hidden}
.pan.pinned .pan-wrap{flex:1 1 auto;min-height:0;display:flex;align-items:center}
.track{display:flex;gap:clamp(1rem,2.5vw,2.5rem);padding:0 var(--gutter);width:max-content}
.pan.pinned .track{height:100%;max-height:640px;align-items:stretch}
.stop{position:relative;flex:none;width:min(58vw,820px);aspect-ratio:3/2;border-radius:28px;overflow:hidden;background:var(--night-2);box-shadow:0 30px 80px rgba(0,0,0,.45);scroll-snap-align:start}
.pan.pinned .stop{height:100%;width:auto;max-width:78vw}
.stop img{width:100%;height:100%;object-fit:cover}
.stop figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.2rem,3vw,2.2rem);background:linear-gradient(180deg,transparent,rgba(7,16,31,.85));display:flex;flex-direction:column;gap:.3rem}
.stop figcaption small{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:var(--gold-2)}
.stop figcaption b{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1.05}
.stop figcaption p{color:var(--dim);max-width:44ch;font-size:.98rem}
.stop.end{display:grid;place-items:center;aspect-ratio:auto;width:min(48vw,520px);background:linear-gradient(135deg,#FBA919,#F26A3A 50%,#E32A2C);text-align:center;padding:2rem}
.pan.pinned .stop.end{width:auto;aspect-ratio:1.1/1}
.stop.end b{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1;display:block;margin-bottom:1.25rem}
.stop.end .btn{background:var(--night);color:#fff}
@media(max-height:760px){.pan.pinned{padding-top:6.75rem;padding-bottom:1rem}.pan-head{padding-bottom:1rem}.pan .lead{display:none}.pan .h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}}
@media(max-width:820px){.track{gap:.9rem}.stop{width:82vw}.stop.end{width:82vw;aspect-ratio:3/2}}

/* the boat plan */
.boat{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.plan{width:100%;height:auto}
.plan .lbl{font:600 15px var(--body);fill:rgba(255,244,228,.8);letter-spacing:.02em}
.plan .lbl .gold{fill:var(--gold-2)}
.plan [data-k]{transition:opacity .25s}
.plan.focus [data-k]{opacity:.3}
.plan.focus [data-k].hi{opacity:1}
.plan .draw{stroke-dasharray:var(--len,1);stroke-dashoffset:var(--len,0)}
.legend{list-style:none;display:grid;gap:.1rem}
.legend li{padding:.9rem 0;border-bottom:1px solid var(--line);cursor:default;transition:color .25s,padding-left .35s var(--ease)}
.legend li:hover,.legend li.hi{color:var(--gold-2);padding-left:.4rem}
.legend b{display:block;font-family:var(--display);font-weight:400;font-size:1.2rem}
.legend small{color:var(--dim);font-size:.95rem;display:block;margin-top:.15rem}
.boat-source{margin-top:1.25rem;display:flex;gap:1rem;align-items:center;font-size:.85rem;color:var(--faint)}
.boat-source img{width:96px;border-radius:8px}
@media(max-width:900px){.boat{grid-template-columns:1fr}}

/* pricing */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;border-top:1px solid rgba(255,244,228,.16);padding-top:2rem}
.price b{font-family:var(--display);font-weight:400;font-size:clamp(3.8rem,8.5vw,8rem);line-height:.95;letter-spacing:.01em;display:block}
.price b small{font-size:.42em;vertical-align:top;margin-right:.05em;color:var(--gold)}
.price strong{display:block;font-weight:700;margin-top:.75rem}
.price span{display:block;color:var(--dim);font-size:.95rem;max-width:26ch}
.price-note{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;color:var(--dim)}
@media(max-width:760px){.prices{grid-template-columns:1fr;gap:1.5rem}.price{display:grid;grid-template-columns:auto 1fr;gap:0 1.25rem;align-items:center;border-bottom:1px solid rgba(255,244,228,.1);padding-bottom:1.5rem}.price b{font-size:3.4rem;grid-row:span 2}.price strong{margin-top:0}}
.ticks{list-style:none;display:grid;gap:.9rem}
.ticks li{display:flex;gap:.9rem;align-items:flex-start;font-size:1.05rem}
.ticks li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1330' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;margin-top:.15rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
@media(max-width:860px){.two{grid-template-columns:1fr}}
.photo{border-radius:24px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);aspect-ratio:4/3;background:var(--night-2)}
.photo img{width:100%;height:100%;object-fit:cover}
.deflist{display:grid;gap:0;border-top:1px solid var(--line)}
.deflist>div{display:grid;grid-template-columns:220px 1fr;gap:1rem 2rem;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.deflist b{font-family:var(--display);font-weight:400;font-size:1.25rem;color:var(--gold-2)}
.deflist p{color:var(--dim);max-width:64ch}
@media(max-width:700px){.deflist>div{grid-template-columns:1fr;gap:.3rem}}

/* reviews */
.rev-head{display:grid;grid-template-columns:auto 1fr;gap:2rem 4rem;align-items:end}
.big5{font-family:var(--display);font-weight:400;font-size:clamp(6rem,18vw,15rem);line-height:.85;letter-spacing:0;color:var(--gold)}
.big5 small{display:block;font-family:var(--body);font-weight:500;font-size:1rem;letter-spacing:0;color:var(--dim);margin-top:.75rem}
.tape-wrap{margin-top:3.5rem;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tape{display:flex;width:max-content;animation:tape 70s linear infinite}
.tape:hover{animation-play-state:paused}
.half{display:flex;gap:1.25rem;padding-right:1.25rem}
.rc{width:380px;flex:none;padding:1.6rem;border-radius:22px;background:rgba(255,244,228,.06);border:1px solid rgba(255,244,228,.12);display:flex;flex-direction:column;gap:.8rem}
.rc .st{font-size:.85rem;letter-spacing:.1em}
.rc q{quotes:"\201C" "\201D";font-size:1rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rc footer{margin-top:auto;font-size:.88rem;color:var(--faint)}.rc footer b{color:var(--ink);display:block}
@keyframes tape{to{transform:translateX(-50%)}}
@media(max-width:760px){.rev-head{grid-template-columns:1fr}.rc{width:300px}}

/* occasions (home list + chapters page) */
.occ{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.occ-list{list-style:none;margin-top:2rem;border-top:1px solid var(--line)}
.occ-list li{border-bottom:1px solid var(--line);padding:1rem 0;font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.2vw,1.85rem);display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:color .25s,transform .35s var(--ease)}
.occ-list li:hover{color:var(--gold);transform:translateX(.5rem)}
.occ-list li small{font-family:var(--body);font-weight:500;font-size:.9rem;color:var(--faint);text-align:right;flex:none;max-width:11rem}
.occ-list a{display:contents}
.cascade{position:relative;aspect-ratio:4/4.6}
.cascade img{position:absolute;width:64%;aspect-ratio:3/2;object-fit:cover;border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.5);border:6px solid #FFF4E4}
.cascade img:nth-child(1){left:0;top:4%;transform:rotate(-5deg)}.cascade img:nth-child(2){right:0;top:30%;transform:rotate(4deg)}.cascade img:nth-child(3){left:8%;bottom:0;transform:rotate(-2deg)}
@media(max-width:860px){.occ{grid-template-columns:1fr}.cascade{aspect-ratio:4/3;margin-top:1rem}}
.chapter{padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.chapter:first-of-type{border-top:0}
.chapter-band{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/7;box-shadow:0 30px 80px rgba(0,0,0,.45);background:var(--night-2)}
.chapter-band img{width:100%;height:100%;object-fit:cover}
.chapter-band h2{position:absolute;left:clamp(1.2rem,3vw,2.5rem);bottom:clamp(1.2rem,3vw,2.2rem);right:clamp(1.2rem,3vw,2.5rem);font-size:clamp(1.8rem,4.2vw,3.6rem);line-height:.98;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.chapter-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,16,31,.85))}
.chapter-band h2{z-index:1}
.chapter-body{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.5rem,4vw,4rem);margin-top:1.75rem;align-items:start}
.dots{list-style:none;display:grid;gap:.5rem}
.dots li{display:flex;gap:.6rem;align-items:flex-start}
.dots li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:.55rem}
.placeholder{margin-top:1rem;border:2px dashed rgba(251,169,25,.55);border-radius:12px;padding:.8rem 1rem;font-size:.9rem;color:var(--gold-2)}
.placeholder b{text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;display:block;margin-bottom:.2rem}
@media(max-width:820px){.chapter-band{aspect-ratio:4/3}.chapter-body{grid-template-columns:1fr}}

/* party bus, where, final, glass */
.glass{padding:clamp(2rem,4vw,3.5rem);border-radius:32px;background:rgba(255,244,228,.05);border:1px solid rgba(255,244,228,.12)}
.bus{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.bus img{border-radius:20px;width:100%}
.from{font-family:var(--display);font-weight:400;font-size:1.6rem;color:var(--gold);margin-top:.5rem}
.from small{display:block;font-family:var(--body);font-weight:500;font-size:.95rem;color:var(--dim)}
@media(max-width:860px){.bus{grid-template-columns:1fr}}
.where{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.map{border-radius:28px;overflow:hidden;aspect-ratio:4/3;background:var(--night-2);border:1px solid rgba(255,244,228,.12)}
.map iframe{width:100%;height:100%;border:0;filter:saturate(.85)}
.addr{margin-top:1.5rem;display:grid;gap:1rem}
.addr div{padding-left:1rem;border-left:2px solid var(--gold)}
.addr b{display:block}.addr span{color:var(--dim)}
@media(max-width:860px){.where{grid-template-columns:1fr}}
.final{text-align:center;padding-block:clamp(5rem,12vw,10rem)}
.final .h2{margin-inline:auto;max-width:14ch}
.final .btn{margin-top:2.25rem}
.final p{margin-top:1.5rem;color:var(--dim)}

/* icons: Tabler outline, inlined; gold tinted disc wherever they lead an item */
.ic{width:1em;height:1em;display:block}
.ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(251,169,25,.12);border:1px solid rgba(251,169,25,.35);color:var(--gold-2);font-size:22px}
.step .ico{margin-bottom:1rem}
/* the number sits right before the subtitle, inline, in gold */
.step h3{display:flex;align-items:baseline;gap:.6rem}
.step h3::before{counter-increment:s;content:counter(s);color:var(--gold);font-size:1.5em;line-height:1}
.pack li{display:flex;gap:1rem;align-items:flex-start}
.pack .ico{margin-top:.15rem}
.parking li{display:flex;gap:.9rem;align-items:flex-start}
.parking .ico{width:34px;height:34px;font-size:17px;margin-top:.05rem}
.callout.with-ico{display:flex;gap:1rem;align-items:flex-start}
.ilist{list-style:none;display:grid;gap:.9rem}
.ilist li{display:flex;gap:.9rem;align-items:center;font-size:1.05rem}
.deflist b{display:flex;align-items:center;gap:.7rem}
.deflist .ico{width:36px;height:36px;font-size:18px}
.faq-side a{display:flex;align-items:center;gap:.6rem}
.faq-side .ico{width:30px;height:30px;font-size:15px;background:transparent;border-color:rgba(255,244,228,.2);color:var(--dim)}
.faq-side a:hover .ico{color:var(--gold-2);border-color:rgba(251,169,25,.5)}
.faq-group h2{display:flex;align-items:center;gap:.7rem}
.faq-group .ico{width:38px;height:38px;font-size:19px}
.legend li{display:flex;gap:1rem;align-items:flex-start}
.legend .ico{margin-top:.1rem;width:40px;height:40px;font-size:20px}
.legend li.hi .ico,.legend li:hover .ico{background:var(--gold);color:var(--night);border-color:var(--gold)}
.block .ico{margin-bottom:.5rem}
.from{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.from .ico{width:38px;height:38px;font-size:19px}
.from small{width:100%}

/* steps (a real sequence) and packing list */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.step{position:relative;padding-top:1rem;border-top:1px solid var(--line)}

.step h3{font-size:1.35rem;margin-bottom:.5rem}
.step p{color:var(--dim);font-size:.98rem}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.pack{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 3rem}
.pack li{padding:1.2rem 0;border-top:1px solid var(--line)}
.pack b{display:block;font-family:var(--display);font-weight:400;font-size:1.25rem;margin-bottom:.25rem}
.pack p{color:var(--dim);font-size:.97rem}
@media(max-width:900px){.pack{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pack{grid-template-columns:1fr}}
.parking{list-style:none;display:grid;gap:.6rem;margin-top:1rem}
.parking li{padding:.9rem 1rem;border-radius:12px;background:rgba(255,244,228,.05);border:1px solid var(--line);color:var(--dim);font-size:.98rem}
.callout{border-left:3px solid var(--gold);background:rgba(251,169,25,.1);border-radius:0 16px 16px 0;padding:1.1rem 1.3rem}
.callout b{color:var(--gold-2)}

/* FAQ */
.faq-layout{display:grid;grid-template-columns:240px 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.faq-side{position:sticky;top:110px;display:grid;gap:.3rem}
.faq-side a{padding:.55rem .9rem;border-radius:10px;font-weight:500;color:var(--dim)}
.faq-side a:hover{background:rgba(255,244,228,.08);color:var(--ink)}
.faq-group{margin-bottom:2.5rem}
.faq-group h2{font-size:1.7rem;margin-bottom:.75rem}
.faq{border-top:1px solid var(--line)}.faq:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0;font-weight:700;font-size:1.06rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,244,228,.35);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF4E4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .3s var(--ease),background-color .2s}
.faq[open] summary::after{transform:rotate(45deg);background-color:var(--gold);border-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1330' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E")}
.faq-a{padding:0 0 1.25rem;color:var(--dim);max-width:70ch}
@media(max-width:860px){.faq-layout{grid-template-columns:1fr}.faq-side{position:static;display:flex;flex-wrap:wrap;gap:.5rem}.faq-side a{border:1px solid var(--line)}}

/* about */
.story blockquote{font-family:var(--body);font-weight:500;font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.4;max-width:40ch}
.story blockquote::before{content:"\201C";display:block;font-size:4rem;line-height:.6;color:var(--gold);margin-bottom:.75rem}
.story cite{display:block;margin-top:1.25rem;font-style:normal;font-weight:700;color:var(--gold-2)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem;border-top:1px solid var(--line)}
.fact{padding-top:1.25rem}
.fact b{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,4vw,3.6rem);line-height:1;color:var(--gold);display:block}
.fact span{color:var(--dim);display:block;margin-top:.4rem;font-size:.95rem}
@media(max-width:860px){.facts{grid-template-columns:repeat(2,1fr)}}

/* contact */
.blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.block{display:flex;flex-direction:column;gap:.5rem;padding:2rem 1.75rem;border-radius:28px;background:rgba(255,244,228,.06);border:1px solid rgba(255,244,228,.14);transition:transform .35s var(--ease),background .25s,border-color .25s}
.block:hover{transform:translateY(-4px);background:rgba(255,244,228,.1);border-color:rgba(255,244,228,.3)}
.block small{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;color:var(--gold-2)}
.block b{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.1;overflow-wrap:anywhere}
.block.email b{font-size:clamp(1.15rem,1.55vw,1.45rem)}
.block p{color:var(--dim);font-size:.97rem}
.block .go{margin-top:auto;padding-top:.75rem;font-weight:700;color:var(--gold)}
@media(max-width:900px){.blocks{grid-template-columns:1fr}}

/* footer */
.ft{border-top:1px solid var(--line);padding:clamp(3rem,6vw,4.5rem) 0 2.5rem;color:var(--dim);font-size:.95rem;position:relative;background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1fr;gap:2.5rem}
.ft-brand p{margin-top:1rem;max-width:40ch}
.ft-col{display:flex;flex-direction:column;gap:.5rem}
.ft-col b{color:var(--faint);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.35rem}
.ft-col a:hover{color:var(--gold-2)}
.ft-col span{color:var(--faint);line-height:1.5}
.ft-base{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 1.5rem;font-size:.86rem;color:var(--faint)}
.ft-note{width:100%;font-size:.78rem;color:rgba(255,244,228,.38)}
.gps-credit{display:inline-flex;align-items:center;gap:.45rem;padding-block:.5rem;transition:color .2s}
.gps-credit:hover{color:#D2A756}.gps-tile{fill:rgba(255,255,255,.09)}.gps-px{fill:#D2A756}.gps-credit:hover .gps-tile{fill:rgba(210,167,86,.25)}
@media(max-width:960px){.ft-top{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ft-top{grid-template-columns:1fr;gap:2rem}}

/* dialogs */
dialog{margin:auto;border:0;padding:0;background:transparent;max-width:none}
dialog[open]{position:fixed;inset:0;margin:auto}
dialog::backdrop{background:rgba(4,8,20,.92)}
.vmodal{width:min(96vw,1100px)}
.vf{aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden}.vf iframe{width:100%;height:100%;border:0;display:block}
.vclose{position:absolute;top:-2.8rem;right:0;color:#fff;font-size:2rem;width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.vcredit{margin-top:.7rem;color:var(--faint);font-size:.85rem;text-align:right}
.lightbox{width:min(96vw,1100px);max-height:92vh}
.lightbox img{max-height:84vh;width:auto;max-width:100%;border-radius:12px;margin-inline:auto}
.lb-bar{display:flex;justify-content:center;gap:.6rem;margin-top:.8rem}
.lb-bar button{color:#fff;background:rgba(255,255,255,.12);border-radius:999px;padding:.6rem 1.1rem;font-weight:700}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.gallery a{display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--night-2)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery a:hover img{transform:scale(1.04)}
.gallery a:nth-child(1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
@media(max-width:800px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery a:nth-child(1){grid-column:span 2;grid-row:auto;aspect-ratio:16/10}}
.nf{min-height:70svh;display:grid;place-items:center;text-align:center;padding:8rem 0 4rem}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .rv{opacity:1;transform:none}
  .hero h1 .line>span{transform:none}
  .hero-media video{opacity:0!important}   /* the poster image underneath is the designed still */
  .tape{animation:none;flex-wrap:wrap;width:auto}.half{flex-wrap:wrap}
  /* the second copy of the reviews only exists to make the moving tape loop seamlessly; with the tape stopped, one copy IS the finished state */
  .half+.half{display:none}
  .lights .glows{opacity:.7}.lights .hots{opacity:1}
  .sky-day{opacity:.35}.sky-night{opacity:1}.stars{opacity:.8}
  .plan .draw{stroke-dashoffset:0}
}