:root{
  --ink:#071824;--ink2:#0c2233;--ink3:#123048;--pearl:#f5f1e8;--muted:#9fb3c0;--sea:#5fe0c0;--sea2:#2bb8a8;--sky:#8fd3ff;--gold:#f3c969;--coral:#ff7a5c;--line:rgba(245,241,232,.12);
  --display:Fraunces,Georgia,'Times New Roman',serif;--body:Manrope,system-ui,sans-serif;
  --gutter:clamp(16px,4vw,56px);--ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--pearl);font:16px/1.65 var(--body);overflow-x:clip}
/* never lock scrolling during the intro: a scroll finishes the intro instead (site.js intro) */
img{max-width:100%;display:block}
a{color:inherit}
.hidden{display:none!important}
.center{text-align:center}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.center-row{justify-content:center}
button{font:inherit;color:inherit}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;padding:0;font-size:inherit}
:focus-visible{outline:2px solid var(--sea);outline-offset:3px}

/* ---------- cinematic overlays ---------- */
.grain{position:fixed;inset:-50%;z-index:80;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-5%,3%)}40%{transform:translate(3%,-6%)}60%{transform:translate(-7%,2%)}80%{transform:translate(4%,5%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;z-index:79;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,8,14,.6) 100%)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 24px;border-radius:999px;border:0;font-weight:800;letter-spacing:.04em;font-size:14.5px;cursor:pointer;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s,background .25s;overflow:hidden;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.xl{padding:18px 34px;font-size:15.5px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-sea{background:linear-gradient(135deg,var(--sea),var(--sky));color:#04202a;box-shadow:0 10px 30px -8px rgba(95,224,192,.55)}
.btn-sea:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(143,211,255,.7)}
.btn-sea::after,.btn-coral::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn-sea:hover::after,.btn-coral:hover::after{transform:translateX(120%)}
.btn-coral{background:linear-gradient(135deg,var(--coral),#ffb35c);color:#2a0d05;box-shadow:0 10px 30px -8px rgba(255,122,92,.6)}
.btn-coral:hover{transform:translateY(-2px)}
.btn-ghost{background:rgba(245,241,232,.06);color:var(--pearl);border:1px solid rgba(245,241,232,.25);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(245,241,232,.14)}

/* ---------- announcement + nav ---------- */
.announce{position:relative;z-index:60;background:linear-gradient(90deg,var(--sea2),#2a8fc7);color:#fff;text-align:center;padding:9px 44px;font-weight:700;font-size:14px}
.announce button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;color:#fff;font-size:16px}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:24px;padding:12px var(--gutter);transform:translateY(-110%);transition:transform .6s var(--ease),background .4s}
.nav.show{transform:none;background:rgba(7,24,36,.8);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:22px;font-weight:600}
.nav-logo em{font-style:italic;color:var(--sea);font-weight:400}
.mono{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:15px;letter-spacing:.04em;background:radial-gradient(circle at 30% 25%,#fff,#d8f7ee 45%,#7fd9c4);color:var(--ink);font-weight:700;box-shadow:0 6px 20px rgba(95,224,192,.35)}
.nav-links{display:flex;gap:26px;margin:0 auto}
.nav-links a{text-decoration:none;font-weight:700;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.82;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--sea);transform:scaleX(0);transition:transform .3s var(--ease);transform-origin:left}
.nav-links a:hover{opacity:1}.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:16px;margin-left:auto}
.nav-phone{font-weight:800;text-decoration:none;font-size:14px;white-space:nowrap}
.open-badge{font-size:12.5px;font-weight:700;letter-spacing:.03em;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.open-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.open-badge.open::before{background:var(--sea);box-shadow:0 0 0 0 rgba(95,224,192,.7);animation:pulse 1.8s infinite}
.open-badge.closed::before{background:var(--coral)}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(95,224,192,0)}100%{box-shadow:0 0 0 0 rgba(95,224,192,0)}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate;text-align:center;padding:14vh var(--gutter) 12vh}
.hero-bg{position:absolute;inset:-6%;z-index:-3;opacity:0;transform:scale(1.15);background:radial-gradient(ellipse at 50% 110%,#0f3a4f 0%,var(--ink) 60%);background-size:cover;background-position:center}
.hero-bg.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,24,36,.75),rgba(7,24,36,.55) 45%,rgba(7,24,36,.96))}
.aurora{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:screen}
.a1{width:55vw;height:55vw;left:-10vw;top:-15vw;background:radial-gradient(circle,#1f8f86,transparent 65%);animation:drift1 18s ease-in-out infinite alternate}
.a2{width:50vw;height:50vw;right:-12vw;top:5vh;background:radial-gradient(circle,#2a6fb0,transparent 65%);animation:drift2 22s ease-in-out infinite alternate}
.a3{width:40vw;height:40vw;left:30vw;bottom:-20vw;background:radial-gradient(circle,#5fe0c0,transparent 65%);opacity:.3;animation:drift1 26s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(12vw,8vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-10vw,10vh) scale(.9)}}
.hero-mark{position:absolute;z-index:-2;width:min(70vh,80vw);left:50%;top:50%;transform:translate(-50%,-50%);opacity:.16;pointer-events:none}
.hero-mark path{fill:none;stroke:var(--sea);stroke-width:1.2;stroke-dasharray:900;stroke-dashoffset:900}
.sparkles{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero-inner{max-width:1300px;width:100%}
.eyebrow{font-family:var(--body);font-weight:800;color:var(--sea);font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;margin:0 0 14px}
.hero-eyebrow{opacity:0;margin:0 0 22px}
.title{font-family:var(--display);font-weight:600;line-height:.9;margin:0;position:relative;display:inline-block;letter-spacing:-.01em}
.title-line{display:block;font-size:clamp(30px,5.4vw,78px);white-space:nowrap;font-weight:400;font-style:italic;color:#d9ece8}
.title-line.big{position:relative;font-size:clamp(76px,18vw,280px);font-weight:700;font-style:normal;--title-fill:linear-gradient(180deg,#ffffff 0%,#eafaf5 50%,#a8eedd 100%);color:transparent;filter:drop-shadow(0 10px 50px rgba(95,224,192,.3));overflow:visible;padding:0 .04em}
.title-line .ch{display:inline-block;will-change:transform;opacity:0}
.title-line .ch.sp{width:.26em}
/* each letter paints its own gradient (+ an off-screen light band the glint slides across). Never put the gradient on the
   whole line too: that copy stays put while letters move and leaves a stuck fragment behind after the bounce. */
.title-line.big .ch{color:transparent;background-image:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%),var(--title-fill);background-size:300% 100%,100% 100%;background-position:var(--glint,150%) 0,0 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text}
.stamp{position:absolute;right:-.2em;top:.15em;font-family:var(--body);font-weight:800;font-size:clamp(16px,2.4vw,34px);letter-spacing:.12em;width:3.4em;height:3.4em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff,#c6f4e7 50%,#5fe0c0);color:var(--ink);display:grid;place-items:center;transform:scale(0) rotate(-30deg);box-shadow:0 12px 40px rgba(95,224,192,.45),inset 0 -5px 0 rgba(0,0,0,.12);line-height:1}
.tagline{font-family:var(--display);font-style:italic;font-size:clamp(22px,3vw,40px);margin:26px 0 10px;color:var(--pearl);opacity:0;font-weight:400}
.hero-sub{max-width:640px;margin:0 auto;color:var(--muted);font-size:clamp(15px,1.3vw,18px);opacity:0}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px;opacity:0}
.hero-meta{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:28px;font-size:13.5px;color:var(--muted);opacity:0}
.hero-meta b{color:var(--gold)}
.hero-meta .ok{color:var(--sea)}
.scroll-cue{position:absolute;bottom:4vh;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);display:grid;justify-items:center;gap:8px;opacity:0}
.scroll-cue span{width:1px;height:46px;background:linear-gradient(var(--pearl),transparent);animation:cue 2s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;background:linear-gradient(90deg,var(--sea),var(--sky));color:var(--ink);transform:rotate(-2deg) scale(1.05);margin:-30px 0 40px;position:relative;z-index:3;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.marquee-track{display:flex;white-space:nowrap;padding:14px 0;font-family:var(--display);font-style:italic;font-size:clamp(22px,3vw,40px);width:max-content;will-change:transform}
.mq-set{display:flex;gap:40px;padding-right:40px;flex:none}
.marquee-track span::after{content:"✦";margin-left:40px;font-style:normal}

/* ---------- sections ---------- */
section{position:relative}
.section-head{text-align:center;max-width:820px;margin:0 auto 48px;padding:0 var(--gutter)}
.h-xl{font-family:var(--display);font-weight:500;font-size:clamp(40px,6.4vw,100px);line-height:.98;margin:0 0 18px;letter-spacing:-.02em}
.lead{color:var(--muted);font-size:clamp(15px,1.3vw,18px)}
.split-reveal .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.split-reveal .w>i{display:inline-block;font-style:normal;will-change:transform}

/* offer */
.offer{padding:clamp(40px,7vw,100px) var(--gutter);perspective:1400px}
.offer-card{position:relative;max-width:1100px;margin:0 auto;border-radius:32px;padding:clamp(28px,5vw,64px);background:linear-gradient(135deg,rgba(95,224,192,.14),rgba(143,211,255,.06));border:1px solid rgba(95,224,192,.3);overflow:hidden}
.offer-card p{max-width:640px;color:#cfe0e6;font-size:17px}
.offer-glow{position:absolute;width:420px;height:420px;right:-120px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(95,224,192,.45),transparent 65%);filter:blur(10px)}
.next-open{font-size:14px;color:var(--sea);font-weight:700}
.next-open b{color:var(--pearl)}

/* pillars */
.pillars{padding:clamp(50px,8vw,120px) 0}
.pillar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:1300px;margin:0 auto;padding:0 var(--gutter);perspective:1200px}
.pillar{background:linear-gradient(180deg,var(--ink2),#0a1d2b);border:1px solid var(--line);border-radius:24px;padding:28px 24px;transform-origin:center top}
.pillar i{font-style:normal;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:rgba(95,224,192,.12);color:var(--sea);font-size:24px;margin-bottom:18px}
.pillar h3{font-family:var(--display);font-weight:500;font-size:24px;line-height:1.15;margin:0 0 8px}
.pillar p{margin:0;color:var(--muted);font-size:15px}

/* reel */
.reel{padding:clamp(60px,8vw,120px) 0;overflow:hidden}
.reel-head{padding:0 var(--gutter);max-width:1400px;margin:0 auto 36px}
.reel-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;padding:10px 0 30px;margin:-10px 0 -30px}
.reel-viewport::-webkit-scrollbar{display:none}
.reel-track{display:flex;gap:28px;padding:0 var(--gutter);width:max-content;perspective:1400px}
/* the slider under the cards: drag it, click anywhere on it, or use the arrow keys */
.reel-bar{position:relative;height:6px;border-radius:6px;background:rgba(245,241,232,.12);margin:34px auto 0;width:min(560px,calc(100% - 2 * var(--gutter)));cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.reel-bar::before{content:"";position:absolute;inset:-16px 0}
.reel-bar.hidden-bar{visibility:hidden}
.reel-thumb{position:absolute;top:-5px;left:0;height:16px;min-width:48px;border-radius:16px;background:linear-gradient(90deg,var(--sea),var(--sky));box-shadow:0 0 0 4px rgba(95,224,192,.12),0 0 22px rgba(95,224,192,.45);cursor:grab;transition:box-shadow .2s,transform .2s}
.reel-bar:hover .reel-thumb,.reel-bar:focus-visible .reel-thumb{box-shadow:0 0 0 6px rgba(95,224,192,.2),0 0 28px rgba(95,224,192,.6)}
.reel-bar.dragging .reel-thumb{cursor:grabbing;transform:scaleY(1.15)}
.reel-bar:focus-visible{outline:none}
/* pinned (desktop): the whole scene, bar included, fits one screen so no card is cut off */
.reel.pinned{height:100vh;min-height:480px;padding:calc(64px + 3vh) 0 3vh;display:flex;flex-direction:column;justify-content:center}
.reel.pinned .reel-head{flex:none}
.reel.pinned .reel-viewport{overflow:visible;padding:0;margin:0;flex:1 1 auto;min-height:0;max-height:600px;display:flex}
.reel.pinned .reel-track{height:100%;align-items:stretch}
.reel.pinned .reel-card{height:100%}
.reel.pinned .reel-card .meta{flex:none}
.reel.pinned .reel-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.reel.pinned .reel-head{margin-bottom:min(28px,3vh)}
.reel.pinned .h-xl{font-size:clamp(34px,min(6.4vw,9vh),100px);margin-bottom:0}
.reel.pinned .reel-card .ph{aspect-ratio:auto;flex:1 1 0;min-height:56px}
.reel.pinned .reel-card .ph .glyph{font-size:clamp(48px,9vh,96px)}
.reel.pinned .reel-card .num{font-size:clamp(34px,6vh,54px)}
.reel.pinned .reel-card .meta{padding:clamp(12px,2.2vh,22px) 24px clamp(14px,2.6vh,26px);gap:clamp(4px,1vh,8px)}
.reel.pinned .reel-card h3{font-size:clamp(21px,3.4vh,28px)}
.reel.pinned .reel-bar{margin-top:min(30px,3.5vh);flex:none}
.reel-card{width:clamp(280px,30vw,420px);flex:none;border-radius:28px;overflow:hidden;background:linear-gradient(160deg,var(--ink3),var(--ink2));border:1px solid var(--line);transform-style:preserve-3d;transition:box-shadow .4s,border-color .4s;display:flex;flex-direction:column;text-align:left;cursor:pointer;padding:0}
.reel-card:hover{box-shadow:0 30px 80px -20px rgba(95,224,192,.35);border-color:rgba(95,224,192,.4)}
.reel-card .ph{aspect-ratio:16/11;position:relative;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,rgba(95,224,192,.35),transparent 55%),radial-gradient(circle at 80% 90%,rgba(143,211,255,.3),transparent 50%),#0d2a3d}
.reel-card .ph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.reel-card .ph .glyph{font-size:96px;color:#e8fbf6;text-shadow:0 10px 40px rgba(95,224,192,.6);font-family:var(--display)}
.reel-card .num{position:absolute;top:14px;left:20px;font-family:var(--display);font-style:italic;font-size:54px;color:rgba(255,255,255,.85);line-height:1}
.reel-card .meta{padding:22px 24px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1;width:100%}
.reel-card .go{width:100%}
.reel-card .chips{display:flex;gap:6px;min-height:22px;align-items:center}
.reel-card h3{font-family:var(--display);font-weight:500;font-size:28px;line-height:1.1;margin:0}
.reel-card p{margin:0;color:var(--muted);font-size:14.5px}
.reel-card .go{margin-top:auto;padding-top:10px;color:var(--sea);font-weight:800;font-size:14px;display:flex;justify-content:space-between}
.chip{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:rgba(95,224,192,.14);color:var(--sea);margin-right:6px}
.chip.hot{background:rgba(255,122,92,.16);color:var(--coral)}

/* services */
.services{padding:clamp(40px,6vw,100px) 0}
.svc-wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter);display:grid;gap:44px}
.svc-cat h3{font-family:var(--display);font-weight:500;font-size:clamp(26px,3vw,38px);margin:0 0 4px;display:flex;gap:14px;align-items:baseline}
.svc-cat h3 small{font-family:var(--body);font-size:13px;color:var(--muted);font-weight:600}
.svc-cat>p{color:var(--muted);margin:0 0 16px}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;perspective:1200px}
.svc{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:20px;border-radius:20px;background:rgba(245,241,232,.035);border:1px solid var(--line);transition:border-color .3s,background .3s;transform-origin:center top}
.svc:hover{border-color:rgba(95,224,192,.4);background:rgba(95,224,192,.05)}
.svc .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:rgba(95,224,192,.1);color:var(--sea);font-size:22px}
.svc h4{margin:0 0 4px;font-size:17px}
.svc p{margin:0 0 12px;color:var(--muted);font-size:14.5px}
.svc .bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.svc .dur{font-size:13px;color:var(--muted);font-weight:600}
.svc .act{background:none;border:1px solid rgba(95,224,192,.45);color:var(--sea);padding:7px 14px;border-radius:99px;font-weight:800;font-size:13px;cursor:pointer;text-decoration:none;transition:background .2s}
.svc .act:hover{background:rgba(95,224,192,.12)}
.svc .act.call{border-color:var(--line);color:var(--pearl)}

/* story */
.story{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(60px,10vw,140px) var(--gutter);max-width:1400px;margin:0 auto}
.story-media{clip-path:inset(12% 18% 12% 18% round 200px);border-radius:30px;overflow:hidden;aspect-ratio:4/5}
.story-img{width:100%;height:116%;background-size:cover;background-position:center;position:relative}
.portrait-ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;background:radial-gradient(circle at 40% 30%,#1d5a6a,#0a2131 70%)}
.portrait-ph span{font-family:var(--display);font-size:clamp(90px,14vw,190px);font-weight:300;font-style:italic;color:#e9fbf5;letter-spacing:-.04em;line-height:1;text-shadow:0 20px 60px rgba(95,224,192,.4)}
.portrait-ph small{letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:var(--sea);font-weight:800}
.story-img.has-photo .portrait-ph{display:none}
.scrub-text{font-size:clamp(17px,1.5vw,21px);line-height:1.7;color:var(--pearl)}
.scrub-text .sw{opacity:.18;transition:opacity .2s}
.sig{font-family:var(--display);font-style:italic;font-size:26px;color:var(--sea);margin:6px 0 0}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:1300px;margin:0 auto;padding:clamp(40px,6vw,90px) var(--gutter);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{text-align:center}
.stat b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(46px,6vw,92px);line-height:1;background:linear-gradient(180deg,#fff,#a8eedd);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:14px;font-weight:600}

/* steps */
.steps{padding:clamp(60px,9vw,130px) 0}
.steps-wrap{position:relative;max-width:820px;margin:0 auto 40px;padding:0 var(--gutter)}
.steps-line{position:absolute;left:calc(var(--gutter) + 27px);top:10px;bottom:10px;width:4px;height:calc(100% - 20px);overflow:visible}
.steps-line line{stroke:var(--sea);stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100;vector-effect:non-scaling-stroke}
.step-list{list-style:none;margin:0;padding:0;display:grid;gap:34px}
.step-list li{display:grid;grid-template-columns:58px 1fr;gap:22px;align-items:start}
.step-list .n{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--ink);border:2px solid var(--sea);font-family:var(--display);font-size:24px;font-style:italic;color:var(--sea);position:relative;z-index:1}
.step-list h4{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.4vw,30px);margin:8px 0 4px}
.step-list p{margin:0;color:var(--muted)}

/* reviews */
.reviews{padding:clamp(50px,8vw,120px) 0}
.review-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;max-width:1300px;margin:0 auto 32px;padding:0 var(--gutter)}
.review{margin:0;padding:28px;border-radius:24px;background:linear-gradient(160deg,rgba(245,241,232,.07),rgba(245,241,232,.02));border:1px solid var(--line);position:relative}
.review::before{content:"“";position:absolute;top:-6px;right:18px;font-family:var(--display);font-size:110px;color:rgba(95,224,192,.25);line-height:1}
.review .stars{color:var(--gold);letter-spacing:3px}
.review p{font-family:var(--display);font-size:22px;font-style:italic;line-height:1.35;margin:12px 0 14px}
.review cite{color:var(--muted);font-style:normal;font-size:13.5px;font-weight:700}

/* gallery */
.gallery{overflow:hidden;padding:20px 0 60px}
.gallery-track{display:flex;gap:18px;width:max-content}
.gallery-track img{height:clamp(200px,28vw,360px);width:auto;border-radius:20px;object-fit:cover}

/* forms */
.glass-form{background:rgba(245,241,232,.05);border:1px solid var(--line);border-radius:28px;padding:clamp(22px,3vw,36px);backdrop-filter:blur(10px)}
.glass-form h3{font-family:var(--display);font-weight:500;font-size:28px;margin:0 0 6px}
.form-hint{color:var(--muted);margin:0 0 16px;font-size:14.5px}
label{display:block;font-size:13px;font-weight:700;letter-spacing:.02em;color:#cfdde3;margin:0 0 14px}
input,select,textarea{display:block;width:100%;margin-top:6px;padding:13px 14px;border-radius:14px;border:1px solid rgba(245,241,232,.18);background:rgba(7,24,36,.6);color:var(--pearl);font:16px var(--body);outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--sea);box-shadow:0 0 0 4px rgba(95,224,192,.15)}
textarea{resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:14px;color:var(--pearl)}
.check input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--sea)}
.form-msg{min-height:1.4em;margin:12px 0 0;font-weight:700;color:var(--sea)}
.form-msg.err{color:var(--coral)}

/* insurance (only when the site asks for it) */
.insurance{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,72px);align-items:start;max-width:1300px;margin:0 auto;padding:clamp(60px,9vw,130px) var(--gutter)}
.ins-copy p{color:#cfe0e6;font-size:17px}
.ins-search{margin:22px 0}
.ins-search input{margin:0}
.ins-out{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;min-height:30px}
.ins-out .plan{padding:7px 14px;border-radius:99px;background:rgba(95,224,192,.12);border:1px solid rgba(95,224,192,.35);font-weight:700;font-size:14px}
.ins-out .miss{color:var(--muted);font-size:14.5px}
.pcs{padding:18px 20px;border-radius:18px;background:rgba(143,211,255,.08);border:1px dashed rgba(143,211,255,.4);color:#d7ebf7;font-size:15px}
.pcs:empty{display:none}

/* emergency */
.emergency{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;margin:0 var(--gutter);padding:clamp(36px,6vw,80px);border-radius:36px;background:linear-gradient(135deg,#2a1210,#3a1b14 50%,#1c0f12);border:1px solid rgba(255,122,92,.25);overflow:hidden;isolation:isolate;max-width:1300px}
@media (min-width:1412px){.emergency{margin:0 auto}}
.em-pulse{position:absolute;width:520px;height:520px;left:-160px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,92,.45),transparent 65%);z-index:-1;animation:empulse 3s ease-in-out infinite}
@keyframes empulse{50%{transform:scale(1.15);opacity:.6}}
.emergency .eyebrow{color:var(--coral)}
.em-copy p{color:#f2d9d1;font-size:17px}
.emergency input,.emergency textarea{background:rgba(30,10,8,.6)}
.emergency input:focus,.emergency textarea:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(255,122,92,.15)}
.emergency .form-msg{color:#ffc2b1}

/* visit */
.visit{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,5vw,72px);align-items:center;max-width:1400px;margin:0 auto;padding:clamp(60px,9vw,130px) var(--gutter)}
.addr{font-family:var(--display);font-size:clamp(22px,2.4vw,32px);margin:0 0 20px}
.hours{width:100%;border-collapse:collapse;margin:26px 0 14px;font-size:15px}
.hours td{padding:9px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;color:var(--muted)}
.hours tr.today td{color:var(--sea);font-weight:800}
.hours tr.today td:last-child{color:var(--sea)}
.access{list-style:none;padding:0;margin:0;color:var(--muted);font-size:14.5px;display:grid;gap:6px}
.map-wrap{border-radius:28px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--ink2)}
.map-wrap iframe{width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05) hue-rotate(-10deg)}

/* faq */
.faq{padding:clamp(50px,7vw,110px) 0}
.faq-list{max-width:860px;margin:0 auto;padding:0 var(--gutter)}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-size:clamp(19px,2vw,24px);padding:16px 40px 16px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-family:var(--body);color:var(--sea);font-size:26px;transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{margin:0 0 18px;color:var(--muted)}
.final-cta{text-align:center;padding:clamp(60px,9vw,140px) var(--gutter) clamp(80px,10vw,160px)}

/* footer */
.footer{border-top:1px solid var(--line);padding:30px var(--gutter) 110px;overflow:hidden}
.footer-name{font-family:var(--display);font-weight:600;font-size:clamp(70px,16vw,260px);line-height:.9;white-space:nowrap;letter-spacing:-.03em;background:linear-gradient(180deg,rgba(245,241,232,.18),rgba(245,241,232,.02));-webkit-background-clip:text;background-clip:text;color:transparent}
.footer-row{display:flex;gap:18px 30px;flex-wrap:wrap;justify-content:space-between;color:var(--muted);font-size:13.5px;margin-top:10px}

/* mobile bar */
.mobile-bar{display:none}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140px);z-index:120;background:var(--pearl);color:var(--ink);padding:12px 20px;border-radius:99px;font-weight:800;box-shadow:0 20px 50px rgba(0,0,0,.4);transition:transform .45s var(--ease);max-width:92vw;text-align:center}
.toast.show{transform:translate(-50%,0)}

/* ---------- booking sheet ---------- */
.sheet{position:fixed;inset:0;z-index:100;background:rgba(2,10,16,.72);backdrop-filter:blur(8px);display:grid;place-items:center;padding:16px;perspective:1400px}
.sheet-card{width:100%;max-width:760px;max-height:min(92vh,900px);overflow:auto;border-radius:30px;background:linear-gradient(180deg,#0e2638,#081b28);border:1px solid rgba(95,224,192,.22);box-shadow:0 40px 120px rgba(0,0,0,.6);overscroll-behavior:contain}
.sheet-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:14px;padding:20px 24px 14px;background:linear-gradient(180deg,#0e2638 75%,rgba(14,38,56,0))}
.sheet-head h3{font-family:var(--display);font-weight:500;font-size:26px;margin:0;flex:1}
.x{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(245,241,232,.06);cursor:pointer;font-size:16px;flex:none}
.back{background:none;border:0;color:var(--sea);font-weight:800;cursor:pointer;padding:0;font-size:14px}
.progress{display:flex;gap:6px;padding:0 24px}
.progress i{flex:1;height:4px;border-radius:4px;background:rgba(245,241,232,.1);overflow:hidden;position:relative}
.progress i.on::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--sea),var(--sky))}
.sheet-body{padding:18px 24px 28px}
.pick{display:grid;gap:10px}
.pick button{display:grid;grid-template-columns:46px 1fr auto;gap:14px;align-items:center;text-align:left;padding:16px;border-radius:18px;border:1px solid var(--line);background:rgba(245,241,232,.04);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.pick button:hover,.pick button.on{border-color:var(--sea);background:rgba(95,224,192,.08)}
.pick button:active{transform:scale(.99)}
.pick .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(95,224,192,.12);color:var(--sea);font-size:20px}
.pick b{display:block;font-size:16px}
.pick small{color:var(--muted);font-size:13.5px}
.pick em{font-style:normal;color:var(--muted);font-size:13px;font-weight:700;white-space:nowrap}
.days{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.days button{flex:none;scroll-snap-align:start;width:74px;padding:10px 0;border-radius:16px;border:1px solid var(--line);background:rgba(245,241,232,.04);cursor:pointer;text-align:center;line-height:1.2}
.days button b{display:block;font-family:var(--display);font-size:26px;font-weight:500}
.days button small{display:block;font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.days button.on{border-color:var(--sea);background:rgba(95,224,192,.14)}
.days button:disabled{opacity:.3;cursor:not-allowed}
.days button .dot{display:block;width:6px;height:6px;border-radius:50%;background:var(--sea);margin:5px auto 0}
.days button:disabled .dot{background:transparent}
.slot-group h5{margin:14px 0 8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px}
.slots button{padding:12px 0;border-radius:12px;border:1px solid rgba(95,224,192,.35);background:rgba(95,224,192,.05);color:var(--pearl);font-weight:800;cursor:pointer;transition:background .2s,transform .2s}
.slots button:hover{background:rgba(95,224,192,.16)}
.slots button.on{background:linear-gradient(135deg,var(--sea),var(--sky));color:var(--ink);border-color:transparent}
.empty-day{color:var(--muted);padding:20px 0}
.summary{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;background:rgba(95,224,192,.08);border:1px solid rgba(95,224,192,.25);margin-bottom:18px}
.summary .ic{font-size:22px}
.summary b{display:block}
.summary small{color:var(--muted)}
.seg{display:flex;gap:6px;padding:4px;border-radius:99px;background:rgba(245,241,232,.06);margin:6px 0 16px}
.seg button{flex:1;border:0;background:none;padding:10px;border-radius:99px;font-weight:800;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--pearl);color:var(--ink)}
.privacy{font-size:12.5px;color:var(--muted);margin:-4px 0 14px}
.confirm{text-align:center;padding:20px 0 6px}
.confirm .tick{width:96px;height:96px;margin:0 auto 10px}
.confirm .tick circle{fill:none;stroke:var(--sea);stroke-width:3;stroke-dasharray:300;stroke-dashoffset:300}
.confirm .tick path{fill:none;stroke:var(--pearl);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:80}
.confirm h4{font-family:var(--display);font-weight:500;font-size:32px;margin:0 0 6px}
.confirm .when{font-size:19px;font-weight:800;color:var(--sea);margin:10px 0}
.confirm p{color:var(--muted);margin:6px auto;max-width:460px}
.confirm .row{justify-content:center;margin-top:18px}
.paused{padding:14px 16px;border-radius:14px;background:rgba(255,122,92,.12);border:1px solid rgba(255,122,92,.35);color:#ffd1c4;margin-bottom:14px}
.loading{color:var(--muted);padding:30px 0;text-align:center}
.loading::before{content:"";display:block;width:28px;height:28px;margin:0 auto 10px;border-radius:50%;border:3px solid rgba(95,224,192,.2);border-top-color:var(--sea);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stars-in{display:flex;gap:4px;margin:6px 0 14px}
.stars-in button{background:none;border:0;font-size:32px;cursor:pointer;color:var(--gold);padding:0 2px}

/* ---------- responsive ---------- */
@media (max-width:1100px){.pillar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nav-links{display:none}}
@media (max-width:900px){
  .story,.insurance,.emergency,.visit{grid-template-columns:minmax(0,1fr)}
  .story-media{max-width:460px;width:100%;margin:0 auto}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .nav-phone,.open-badge{display:none}
}
@media (max-width:640px){
  .pillar-grid{grid-template-columns:minmax(0,1fr)}
  .two{grid-template-columns:minmax(0,1fr)}
  .svc-grid{grid-template-columns:minmax(0,1fr)}
  .svc{grid-template-columns:44px 1fr;padding:16px}
  .svc .ic{width:44px;height:44px}
  .nav .btn-sea{padding:10px 16px;font-size:13px}
  .nav-logo .nl-text{font-size:19px}
  .emergency{margin:0 12px;padding:28px 20px;border-radius:28px}
  .mobile-bar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(7,24,36,.9);backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .5s var(--ease)}
  .mobile-bar.show{transform:none}
  .mobile-bar .btn{flex:1;padding:14px 10px}
  .mobile-bar .btn-ghost{flex:0 0 32%}
  .sheet{padding:0;place-items:end stretch}
  .sheet-card{max-height:94vh;border-radius:26px 26px 0 0}
  .hero-ctas .btn{width:100%}
  .toast{bottom:90px}
  .title-line.big{font-size:clamp(70px,22vw,140px)}
  .stamp{right:-.4em;top:-.2em;font-size:13px}
  /* phones: compact cards, about one and a half on screen so the next one peeks in; swipes snap card to card */
  .reel-viewport{scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter)}
  .reel-viewport.nosnap{scroll-snap-type:none}
  .reel-track{gap:14px}
  .reel-card{width:min(60vw,250px);border-radius:20px;scroll-snap-align:start}
  .reel-card .ph{aspect-ratio:16/10}
  .reel-card .ph .glyph{font-size:52px}
  .reel-card .num{font-size:32px;top:10px;left:14px}
  .reel-card .meta{padding:14px 14px 16px;gap:6px}
  .reel-card h3{font-size:19px}
  .reel-card p{font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .reel-card .go{font-size:12.5px;padding-top:6px}
  .reel-card .chip{font-size:10px;padding:2px 7px}
  .reel-bar{margin-top:26px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* section switched off by the owner (Website content → Website sections) */
.section-off{display:none!important}

/* announcement bar on phones: tighter so a normal message fits on two lines (Oct 2026 fix round) */
@media (max-width:480px){.announce{padding:7px 36px 7px 12px;font-size:12.5px;line-height:1.4}.announce button{right:4px}.announce span{-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:2px 8px}}

/* ===== address + phone bar, bottom of the first screen (requirement 47). Re-theme per site, never remove. */
.hero{padding-bottom:calc(12vh + 64px)}
.scroll-cue{bottom:calc(4vh + 58px)}
.hero-contact{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:4;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 14px;width:max-content;max-width:calc(100% - 2*var(--gutter));padding:10px 20px;border-radius:99px;background:rgba(7,24,36,.68);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:14px;font-weight:600;color:var(--pearl)}
.hero-contact:empty{display:none}
.hc-item{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;min-height:32px}
.hc-item:hover span:last-child,.hc-item:focus-visible span:last-child{color:var(--sea);text-decoration:underline;text-underline-offset:3px}
.hc-ic{font-size:15px}
.hc-dot{width:4px;height:4px;border-radius:50%;background:var(--sea);opacity:.7}
@media (max-width:640px){.hero-contact{border-radius:16px;flex-direction:column;gap:2px;padding:8px 16px;font-size:13.5px;text-align:center}.hc-dot{display:none}}

/* ===== Events section (requirement 48): swipe/drag rail with a visible scroll bar, never auto-scrolls. Re-theme per site. */
.events{padding:clamp(60px,8vw,110px) 0 clamp(40px,6vw,80px);overflow:hidden}
.events-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:0 var(--gutter);max-width:1400px;margin:0 auto 30px}
.events-rail{display:flex;gap:24px;overflow-x:auto;padding:6px var(--gutter) 18px;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
.events-rail::-webkit-scrollbar{display:none}
.event-card{flex:none;width:clamp(260px,28vw,380px);scroll-snap-align:start;border-radius:22px;overflow:hidden;background:var(--ink2);border:1px solid var(--line);display:flex;flex-direction:column}
.ev-ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink3)}
.ev-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.event-card:hover .ev-ph img{transform:scale(1.06)}
.ev-ph-fallback{display:grid;place-items:center;height:100%;font-size:64px;color:var(--sea);opacity:.5}
.ev-date{position:absolute;top:14px;left:14px;background:var(--pearl);color:var(--ink);border-radius:14px;padding:6px 12px;text-align:center;line-height:1;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.ev-date b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sea2)}
.ev-date span{font-family:var(--display);font-size:30px}
.ev-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.ev-body h3{font-family:var(--display);font-weight:500;font-size:25px;line-height:1.1;margin:0;letter-spacing:-.01em}
.ev-when{margin:0;color:var(--sea);font-weight:700;font-size:14px}
.ev-desc{margin:4px 0 0;color:var(--muted);font-size:14.5px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ev-desc.open{display:block}
.ev-more{align-self:flex-start;background:none;border:0;color:var(--pearl);text-decoration:underline;cursor:pointer;padding:0;font:inherit;font-size:13px}
.ev-buy{margin-top:auto;align-self:flex-start;background:linear-gradient(135deg,var(--sea),var(--sky));color:#04202a}
.ev-buy:first-of-type{margin-top:12px}
.ev-left,.ev-soldout{margin:4px 0 0;font-size:12.5px;font-weight:700;color:var(--coral)}
.events .reel-bar{max-width:1400px;margin:6px auto 0;width:calc(100% - 2*var(--gutter))}
/* ticket checkout + ticket screen */
.ev-dialog{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);padding:16px;overflow-y:auto}
.ev-card{position:relative;width:min(460px,100%);background:var(--ink2);border:1px solid var(--line);border-radius:22px;padding:28px 24px 22px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.ev-card .x{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--pearl);cursor:pointer;font-size:16px}
.ev-card h3{font-family:var(--display);font-size:clamp(28px,6vw,38px);line-height:1.05;font-weight:500;margin:2px 40px 6px 0;color:var(--sea);letter-spacing:-.01em}
.ev-kicker{margin:0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ev-form{display:grid;gap:12px;margin-top:16px}
.ev-form label{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
.ev-form small{font-weight:400}
.ev-form input,.ev-form select{background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--pearl);font:inherit;font-size:16px}
.ev-total{display:flex;justify-content:space-between;margin:4px 0 0;font-weight:700}.ev-total b{color:var(--sea);font-size:20px}
.ev-err{margin:0;color:#ff7a5c;font-size:14px;min-height:0}.ev-err:empty{display:none}
.ev-pay{width:100%;justify-content:center;background:linear-gradient(135deg,var(--sea),var(--sky));color:#04202a;margin-top:6px}
.ev-fine{margin:10px 0 0;font-size:12.5px;color:var(--muted);text-align:center}
.ev-ticket{margin:18px 0 6px;border:2px dashed var(--sea);border-radius:16px;padding:18px;text-align:center;display:grid;gap:4px}
.ev-ticket small{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:11px}
.ev-ticket b{font-family:'Courier New',monospace;font-size:34px;letter-spacing:.12em;color:var(--pearl)}
.ev-ticket span{font-size:13px;color:var(--muted)}
@media (max-width:640px){.events-head .reel-arrows{display:none}.event-card{width:82vw}}
@media (max-width:640px){.scroll-cue{display:none}} /* the address + phone bar takes the bottom of a phone screen */
/* this template's reels use .reel-thumb; the shared events rail (site-extras.js) needs arrows + an <i> thumb */
.reel-arrows{display:flex;gap:10px;flex:none;padding-bottom:22px}
.reel-arrow{width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:rgba(245,241,232,.06);color:var(--pearl);font-size:28px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .25s,border-color .25s,opacity .25s}
.reel-arrow:hover:not(:disabled){background:var(--sea2);border-color:var(--sea2);color:#04202a}
.reel-arrow:disabled{opacity:.3;cursor:default}
.events .reel-bar{height:6px}
.events .reel-bar i{position:absolute;top:-5px;left:0;height:16px;min-width:48px;border-radius:16px;background:linear-gradient(90deg,var(--sea),var(--sky));box-shadow:0 0 0 4px rgba(95,224,192,.12),0 0 22px rgba(95,224,192,.45);cursor:grab;transition:box-shadow .2s}
.events .reel-bar.drag i{cursor:grabbing}
/* phones: this hero (eyebrow, name, tagline, intro, two big buttons, 3-line status) is taller than the others, so it's
   tightened here to keep the address + phone bar on the first screen at 375×812 (requirement 47) */
@media (max-width:640px){
  .hero{padding-top:calc(6vh + 22px);padding-bottom:calc(112px + env(safe-area-inset-bottom))}
  .hero-ctas{gap:10px;margin-top:22px}.hero-ctas .btn.xl{padding:15px 26px}
  .hero-meta{margin-top:14px;row-gap:2px;line-height:1.45;font-size:13.5px}
}
/* laptops (short screens): same reason; the "Scroll" cue would sit on the status line, so it gives way to the bar */
@media (min-width:641px) and (max-height:940px){
  .hero{padding-top:calc(7vh + 30px);padding-bottom:calc(92px + 2vh)}
  .hero-ctas{margin-top:24px}.hero-meta{margin-top:18px}
  .scroll-cue{display:none}
}

/* hero-contact-flow (Trenton, Nov 1 2026): on phones the address + phone box sits in the page flow right under the hero content.
   Pinned to the bottom of the first screen, it overlapped the buttons and landed somewhere different on each load
   (phone screen height and the announcement bar are measured differently from load to load). */
@media (max-width:640px){
  .hero{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto!important;min-height:auto!important;padding-bottom:28px!important}
  .hero-contact{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;margin:22px auto 0!important;width:auto!important;max-width:100%!important}
}

/* mouse / trackpad: no card snapping on horizontal strips. Snap fought trackpad swipes, shift+wheel and the drag bars and made
   strips jump; phones keep it for swipes. The page itself never snaps or pins. */
@media (pointer:fine){.review-rail,.events-rail,.reel-scroller,.reel-viewport,.gallery-rail,.rail,.up-track,.days{scroll-snap-type:none}}