/* Moto Supreme — shared stylesheet.
   RECOLOR POINT: the tokens in :root drive every page. */
:root{
  /* Indy Roof sky blue system. Cool-toned throughout so light and dark
     sections belong to the same palette instead of fighting each other. */
  --sky:#09B6E8;        /* primary accent, used on dark */
  --sky-deep:#0A6E92;   /* same hue, darkened for text on light backgrounds */
  --sky-ink:#04222C;    /* text that sits ON a sky-blue button */
  --navy:#003C58;       /* deep brand navy, used for surfaces not text */
  --ink:#06121A;        /* page base, blue-black not neutral black */
  --steel:#0E1F2A;      /* raised card surface on dark */
  --steel-2:#122836;    /* hover surface */
  --paper:#EDF3F6;      /* light section base, cool to match the blue */
  --paper-2:#FFFFFF;    /* cards on light */
  --bone:#E9F1F5;       /* body text on dark */
  --dust:#7E97A6;       /* muted text */
  --red:#E02436;        /* secondary accent: live states, play, warnings */
  --red-deep:#B31B2A;   /* same red, darkened for light backgrounds */
  --neon:#FF1F3D;       /* bar cabin neon, red rather than pink */
  --line:rgba(233,241,245,.14);
  --lineD:rgba(6,18,26,.13);
  --r:5px;
  --wrap:min(1200px,calc(100% - clamp(40px,8vw,110px)));
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;
  scroll-padding-top:80px;scrollbar-gutter:stable}
body{margin:0;background:var(--ink);color:var(--bone);font:400 17px/1.65 Archivo,system-ui,sans-serif;overflow-x:clip}
img,iframe,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Long words and grid children were pushing text past card edges.
   min-width:0 lets grid/flex items shrink; the wrap rules catch the rest. */
h1,h2,h3,h4,p,li,td,th,summary,strong,span{overflow-wrap:break-word}
.g2>*,.g3>*,.g4>*,.tape>*,.nextgrid>*,.bookbar>*{min-width:0}

.wrap{width:var(--wrap);margin-inline:auto}
.sec{padding:clamp(60px,8vw,116px) 0;position:relative}
.sec-t{border-top:1px solid var(--line)}
/* Skip layout+paint for offscreen sections. Large scroll-performance win. */
.sec:not(:first-of-type){content-visibility:auto;contain-intrinsic-size:auto 700px}
.lite{background:var(--paper);color:#0B1A22}
.lite .lbl{color:#587184}
.lite .lead{color:#33454F}
.lite .acc{color:var(--sky-deep)}
.lite a.inline{color:var(--sky-deep)}
a.inline{color:var(--sky);font-weight:700;text-decoration:none;border-bottom:1px solid currentColor}
a.inline:hover{color:var(--bone)}
.lite a.inline:hover{color:#0B1A22}

.d1{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.015em;line-height:.9;font-size:clamp(40px,7.4vw,96px)}
.d2{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.01em;line-height:.94;font-size:clamp(30px,4.9vw,60px)}
.h3{font:800 clamp(18px,1.9vw,24px)/1.22 Archivo,sans-serif;letter-spacing:-.015em}
.lbl{font:700 11px/1.4 "JetBrains Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--dust)}
.lead{font-size:clamp(16.5px,1.55vw,19.5px);color:#AFC2CD;max-width:min(64ch,100%)}
.acc{color:var(--sky)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 26px;border-radius:var(--r);
  font:800 14px/1 Archivo,sans-serif;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;
  border:2px solid transparent;white-space:nowrap;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .18s var(--ease),background .18s,color .18s,border-color .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* Sky blue is too light for white text. Dark text on it clears AA and looks sharper. */
.btn-p{background:var(--sky);color:var(--sky-ink);box-shadow:0 0 0 0 rgba(9,182,232,.5)}
.btn-p:hover{background:#3DC8F0;box-shadow:0 8px 26px -8px rgba(9,182,232,.7)}
.btn-o{border-color:currentColor;background:transparent}
.btn-o:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.lite .btn-o{color:#0B1A22}
.lite .btn-o:hover{background:#0B1A22;color:var(--paper);border-color:#0B1A22}
/* Sheen sweep on hover. GPU transform only. */
.btn::after{content:"";position:absolute;inset:0 auto 0 -70%;width:55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg);transition:left .55s var(--ease)}
.btn:hover::after{left:130%}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- header ---------- */
.strip{background:var(--navy);color:var(--bone);font:700 11.5px/1.5 "JetBrains Mono",monospace;
  letter-spacing:.1em;text-transform:uppercase;padding:9px 0;position:relative}
.strip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--sky) 0 38%,var(--red) 38% 62%,var(--sky) 62%)}
.strip .wrap{display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.strip b{color:var(--sky);font-weight:700}
nav{position:sticky;top:0;z-index:60;background:rgba(6,18,26,.9);border-bottom:1px solid var(--line);
  transition:background .3s,box-shadow .3s}
nav.stuck{background:rgba(6,18,26,.98);box-shadow:0 10px 34px -18px #000}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:78px}
.brand-legacy{display:inline-block;font-family:Anton,sans-serif;text-transform:uppercase;font-size:22px;
  letter-spacing:.01em;text-decoration:none;line-height:1}
.brand small{display:block;font:700 8.5px/1 "JetBrains Mono",monospace;letter-spacing:.24em;color:var(--sky);margin-top:4px}
.nlinks{display:flex;gap:20px;align-items:center}
.nlinks a{font:600 14px/1 Archivo,sans-serif;text-decoration:none;color:#B4C6D1;position:relative;padding:6px 0;transition:color .18s}
.nlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--sky);transition:right .28s var(--ease)}
.nlinks a:hover::after,.nlinks a[aria-current=page]::after{right:0}
.nlinks a:hover,.nlinks a[aria-current=page]{color:var(--sky)}
.navcta{display:flex;gap:10px;align-items:center}
.nav-scrim{display:none}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);width:44px;height:44px;padding:0;align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:19px;height:2px;background:var(--bone);position:relative;transition:.25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--bone);transition:.25s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
/* scroll progress */
.prog{position:fixed;top:0;left:0;height:3px;z-index:80;width:0;
  background:linear-gradient(90deg,var(--sky),var(--red));
  box-shadow:0 0 12px rgba(9,182,232,.7);transition:width .1s linear}
@media(max-width:1080px){
  nav{backdrop-filter:none}
  .nlinks{position:fixed;inset:0 0 0 auto;width:min(330px,88vw);background:var(--steel);
    border-left:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:92px 26px 26px;
    transform:translateX(100%);visibility:hidden;transition:transform .34s var(--ease),visibility 0s .34s;z-index:65;overflow-y:auto}
  .nlinks.open{transform:none;visibility:visible;transition:transform .34s var(--ease),visibility 0s}
  .nav-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(4,10,15,.6);
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
  body.nav-open .nav-scrim{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
  .nlinks a{display:block;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nlinks a::after{display:none}
  .burger{display:inline-flex;position:relative;z-index:66}
  /* While the drawer is open the burger becomes the close button, so lock it to
     the viewport instead of leaving it in the nav bar's flow. Otherwise it rides
     away the moment anything scrolls. */
  body.nav-open .burger{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);
    right:max(16px,calc((100vw - min(1200px,calc(100% - clamp(40px,8vw,110px)))) / 2));
    background:var(--steel);box-shadow:0 6px 20px -6px rgba(0,0,0,.8)}
  .navcta .btn{padding:12px 14px;font-size:12px;letter-spacing:.02em}
}

/* ---------- video hero ---------- */
.vhero{position:relative;min-height:clamp(540px,88vh,900px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);content-visibility:visible}
.vhero-frame,.vhero-lqip{position:absolute;inset:0}
/* LQIP paints on the very first frame with zero network requests. */
.vhero-lqip{background-size:cover;background-position:center;filter:blur(14px);
  transform:scale(1.08);animation:heroDrift 22s ease-out forwards}
@keyframes heroDrift{from{transform:scale(1.08)}to{transform:scale(1.18)}}
.vhero-frame{overflow:hidden;opacity:0;transition:opacity .45s ease;z-index:1;background:#000}
.vhero.playing .vhero-frame{opacity:1;transition:opacity .45s ease}

.vhero-frame iframe{position:absolute;top:50%;left:50%;
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;
  /* Overscale slightly. If the source is not exactly 16:9 YouTube bakes bars
     into the player and no outer CSS can crop them, so push them past the edge. */
  transform:translate(-50%,-50%) scale(1.09);
  border:0;pointer-events:none}
@media(max-width:760px){.vhero-frame iframe{transform:translate(-50%,-50%) scale(1.18)}}
.vhero::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 78% 88% at 50% 45%,transparent 42%,rgba(4,10,15,.5) 100%);
  mix-blend-mode:multiply}
.vhero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(96deg,rgba(4,10,15,.9) 0%,rgba(4,10,15,.72) 34%,rgba(4,10,15,.3) 66%,rgba(4,10,15,.42) 100%),linear-gradient(0deg,rgba(4,10,15,.88) 0%,rgba(4,10,15,.34) 34%,transparent 62%),rgba(4,10,15,.22)}
.vhero .wrap{position:relative;z-index:2;padding:clamp(48px,7vw,88px) 0 clamp(74px,7vw,98px)}
.vhero h1{max-width:min(15ch,100%);margin-bottom:20px}
.vhero h1 em{font-style:normal;color:var(--sky);text-shadow:0 0 40px rgba(9,182,232,.45)}
.vpause{position:absolute;right:4vw;bottom:18px;z-index:3;background:rgba(6,18,26,.72);border:1px solid var(--line);
  color:var(--bone);border-radius:var(--r);padding:9px 14px;font:700 10px/1 "JetBrains Mono",monospace;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.2s}
.vpause:hover{border-color:var(--sky);color:var(--sky)}
.vcredit{position:absolute;left:4vw;bottom:18px;z-index:3;font:400 10px/1.5 "JetBrains Mono",monospace;color:rgba(233,241,245,.42);max-width:min(46ch,100%)}
.vcredit a{color:rgba(233,241,245,.66)}
/* headline letters rise in on load */
.rise{display:inline-block;opacity:0;transform:translateY(.5em) rotate(1.5deg);animation:rise .8s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}


/* ---------- hero text legibility over moving footage ----------
   Layered text-shadow rather than one blur: a tight dark edge to define each
   letterform, then progressively softer passes to lift the whole line off
   whatever the video is doing behind it. Footage brightness swings between
   dark woods and blown-out sky, so a single scrim is not enough. */
.vhero h1,
.vhero .lead,
.vhero .eyebrow .lbl,
.vhero .vcredit,
.vhero .vpause{
  text-shadow:
    0 1px 1px rgba(0,0,0,.62),
    0 2px 9px rgba(0,0,0,.5),
    0 6px 30px rgba(0,0,0,.42);
}
/* The accent word keeps its blue glow, with the dark passes underneath so it
   stays readable when the footage brightens. */
.vhero h1 em{
  text-shadow:
    0 1px 1px rgba(0,0,0,.6),
    0 2px 10px rgba(0,0,0,.5),
    0 0 26px rgba(9,182,232,.55),
    0 0 64px rgba(9,182,232,.3);
}
/* Slight local darkening behind the copy block only. Cheap, and it means the
   shadows can stay subtle instead of heavy-handed. */
.vhero .wrap::before{
  content:"";position:absolute;inset:-6% -12% -10% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 62% 74% at 26% 58%,rgba(4,10,15,.62),transparent 72%);
}
.vhero .eyebrow{backdrop-filter:blur(5px);background:rgba(6,18,26,.42)}
@media(max-width:560px){
  .vhero .wrap::before{inset:-4% -14% -8% -14%;
    background:radial-gradient(ellipse 86% 66% at 50% 60%,rgba(4,10,15,.66),transparent 76%)}
}

/* ---------- page hero ---------- */
.phero{position:relative;padding:clamp(54px,7vw,96px) 0 clamp(40px,5vw,66px);overflow:hidden;border-bottom:1px solid var(--line);content-visibility:visible}
.topo{position:absolute;inset:-40% -10% auto -10%;height:190%;pointer-events:none;opacity:.5;
 background:repeating-radial-gradient(ellipse 62% 40% at 74% 34%,transparent 0 22px,rgba(9,182,232,.3) 22px 23px),
            repeating-radial-gradient(ellipse 48% 62% at 18% 72%,transparent 0 26px,rgba(233,241,245,.07) 26px 27px);
 mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 20%,transparent 78%);
 animation:drift 44s linear infinite}
@keyframes drift{to{transform:translate3d(-2%,1.5%,0) rotate(2deg)}}
.phero .wrap{position:relative;z-index:1}
.phero h1{max-width:min(18ch,100%);margin:12px 0 20px}
.crumb{font:400 12px/1.5 "JetBrains Mono",monospace;color:var(--dust);margin-bottom:18px}
.crumb a{color:var(--dust);text-decoration:none}
.crumb a:hover{color:var(--sky)}

.eyebrow{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:100px;padding:8px 16px;margin-bottom:22px;background:rgba(6,18,26,.4)}
.eyebrow .lbl{color:var(--bone)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,36,54,.75)}50%{box-shadow:0 0 0 7px rgba(224,36,54,0)}}

/* ---------- stat row ---------- */
.receipts{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:30px}
.receipts div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 16px;transition:background .25s}
.receipts div:hover{background:rgba(9,182,232,.07)}
.receipts b{display:block;font-family:Anton,sans-serif;font-size:clamp(23px,2.7vw,33px);line-height:1;margin-bottom:6px;color:var(--bone)}
.receipts span{font:700 10px/1.35 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
.lite .receipts{border-color:var(--lineD)}
.lite .receipts div{border-color:var(--lineD)}
.lite .receipts b{color:#0B1A22}

/* ---------- blocks ---------- */
.head{margin-bottom:clamp(32px,4vw,54px);max-width:min(72ch,100%)}
.head .lbl{display:block;margin-bottom:14px}
.head p{margin-top:18px}
.g2{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g3{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,278px),1fr))}
.g4{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,212px),1fr))}
.card{background:var(--steel);border:1px solid var(--line);border-radius:var(--r);padding:28px;position:relative;
  transition:transform .3s var(--ease),border-color .3s,background .3s;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--sky);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:rgba(9,182,232,.4);background:var(--steel-2)}
.card:hover::before{transform:scaleX(1)}
.card .h3{margin-bottom:11px}
.card p{color:#A5BAC6;font-size:16px}
.card .lbl{display:block;margin-bottom:11px}
.lite .card{background:var(--paper-2);border-color:var(--lineD)}
.lite .card p{color:#3B4E59}
.lite .card:hover{border-color:rgba(10,110,146,.45);background:#fff}

.ticks li{position:relative;padding-left:26px;margin-bottom:11px;font-size:16px}
.ticks li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:2px;background:var(--sky)}
.lite .ticks li::before{background:var(--sky-deep)}
.prose p{font-size:18px;line-height:1.72}
.lite .prose p{color:#2A3B45}

/* ---------- photo gallery ---------- */
.gal{display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}
.gal button{padding:0;border:1px solid var(--line);background:var(--steel);border-radius:var(--r);overflow:hidden;cursor:pointer;position:relative;aspect-ratio:1/1}
.gal button:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gal button:hover img{transform:scale(1.05)}
.gal .cap2{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 14px;
  background:linear-gradient(transparent,rgba(6,18,26,.92));
  font:600 11.5px/1.45 "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--bone);
  text-align:left;transform:translateY(8px);opacity:0;transition:opacity .25s,transform .25s var(--ease);
  pointer-events:none}
.gal button:hover .cap2,.gal button:focus-visible .cap2{transform:none;opacity:1}
.gal .cap-s{display:none}
/* On touch there is no hover, and the full descriptive caption runs three lines
   deep over the photo. Show the short category instead; the long version stays
   in alt text where search engines read it. */
@media(hover:none){
  .gal .cap2{display:none}
  .gal .cap-s{display:block;position:absolute;left:0;right:0;bottom:0;
    padding:22px 12px 11px;text-align:left;pointer-events:none;
    background:linear-gradient(transparent,rgba(6,18,26,.88));
    font:700 10px/1.3 "JetBrains Mono",monospace;letter-spacing:.12em;
    text-transform:uppercase;color:var(--bone)}
  .gal button::after{display:none}
}
/* subtle affordance so tiles read as clickable without shouting */
.gal button::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--sky);transition:box-shadow .25s}
.gal button:hover::after{box-shadow:inset 0 0 0 2px var(--sky)}
@media(max-width:860px){.gal{grid-template-columns:repeat(2,1fr)}.gal button:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}}
/* lightbox */
.lb{position:fixed;inset:0;z-index:9999;background:rgba(4,12,18,.965);display:none;
  place-items:center;padding:4vw;contain:none;isolation:isolate;
  backdrop-filter:blur(3px)}
.lb.on{display:grid;animation:fadein .28s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.lb img{max-width:min(1400px,94vw);max-height:86vh;width:auto;height:auto;
  object-fit:contain;border-radius:var(--r);animation:pop .3s var(--ease);
  grid-area:1/1;place-self:center}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.lb-x,.lb-p,.lb-n{position:absolute;background:rgba(233,241,245,.1);border:1px solid var(--line);color:var(--bone);
  width:52px;height:52px;border-radius:50%;cursor:pointer;font:400 24px/1 Archivo,sans-serif;display:grid;place-items:center;transition:.2s}
.lb-x:hover,.lb-p:hover,.lb-n:hover{background:var(--sky);color:var(--sky-ink);border-color:var(--sky)}
.lb-x{top:3vh;right:4vw}.lb-p{left:3vw;top:50%;margin-top:-26px}.lb-n{right:3vw;top:50%;margin-top:-26px}
.lb-cap{position:absolute;bottom:3vh;left:0;right:0;text-align:center;font:700 12px/1.5 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}

/* ---------- amenities by category ---------- */
.amgrid{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(min(100%,258px),1fr));background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.amcol{background:var(--ink);padding:26px 24px}
.lite .amgrid{background:var(--lineD);border-color:var(--lineD)}
.lite .amcol{background:var(--paper-2)}
.amcol h3{font:800 15px/1.2 Archivo,sans-serif;margin-bottom:16px;display:flex;align-items:center;gap:9px}
.amcol h3 i{width:8px;height:8px;background:var(--sky);border-radius:2px;flex:none;transform:rotate(45deg)}
.amcol li{font-size:15px;padding:7px 0 7px 20px;position:relative;color:#A5BAC6}
.lite .amcol li{color:#3B4E59}
.amcol li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:2px;background:var(--sky)}
.lite .amcol li::before{background:var(--sky-deep)}

/* ---------- bar / neon ---------- */
.bar{background:#04090D;border-block:1px solid rgba(255,31,61,.3);position:relative;overflow:hidden}
.bar::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 76% 42%,rgba(255,31,61,.16),transparent 68%);pointer-events:none}
.bar .wrap{position:relative}
.neon{font-family:Anton,sans-serif;text-transform:uppercase;color:var(--neon);font-size:clamp(34px,5.4vw,68px);line-height:.94;
  text-shadow:0 0 7px rgba(255,31,61,.9),0 0 26px rgba(255,31,61,.55),0 0 58px rgba(255,31,61,.3);
  animation:flicker 7s infinite}
@keyframes flicker{0%,96%,100%{opacity:1}97%{opacity:.55}98%{opacity:1}98.5%{opacity:.7}}
.bar .lbl{color:var(--neon)}
.bar .ticks li::before{background:var(--neon)}

/* ---------- table ---------- */
.tblwrap{overflow-x:auto;background:var(--paper-2);border:1px solid var(--lineD);border-radius:var(--r)}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;color:#2A3B45}
.tbl th,.tbl td{text-align:left;padding:15px 14px;border-bottom:1px solid var(--lineD)}
.tbl th{font:700 11px/1.4 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#587184}
.tbl tbody tr{transition:background .2s}
.tbl tbody tr:hover{background:rgba(9,182,232,.07)}
.tbl tr:last-child td{border-bottom:0;font-weight:800;background:rgba(9,182,232,.12)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--lineD)}
.faq details{border-bottom:1px solid var(--lineD)}
.faq summary{cursor:pointer;list-style:none;padding:22px 46px 22px 0;font:800 17px/1.42 Archivo,sans-serif;position:relative;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--sky-deep)}
.faq summary::after{content:"";position:absolute;right:12px;top:29px;width:13px;height:2px;background:var(--sky-deep);transition:transform .3s var(--ease)}
.faq summary::before{content:"";position:absolute;right:12px;top:29px;width:13px;height:2px;background:var(--sky-deep);transform:rotate(90deg);transition:transform .3s var(--ease)}
.faq details[open] summary::before{transform:rotate(0)}
.faq .ans{padding:0 8% 26px 0;color:#3B4E59;font-size:16.5px;animation:slidedown .3s var(--ease)}
@keyframes slidedown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sec:not(.lite) .faq{border-top-color:var(--line)}
.sec:not(.lite) .faq details{border-bottom-color:var(--line)}
.sec:not(.lite) .faq .ans{color:#A5BAC6}
.sec:not(.lite) .faq summary::after,.sec:not(.lite) .faq summary::before{background:var(--sky)}
.sec:not(.lite) .faq summary:hover{color:var(--sky)}

/* ---------- reviews ---------- */
.rev{background:var(--paper-2);border:1px solid var(--lineD);border-radius:var(--r);padding:26px;transition:transform .3s var(--ease),box-shadow .3s}
.rev:hover{transform:translateY(-3px);box-shadow:0 14px 34px -18px rgba(6,18,26,.4)}
.stars{color:var(--sky-deep);font-size:15px;letter-spacing:2px;margin-bottom:12px}
.rev p{font-size:16px;color:#2A3B45;margin-bottom:16px}
.rev cite{font:700 12px/1.5 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:#587184;font-style:normal}

/* ---------- next cards ---------- */
.nextgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.next{display:block;text-decoration:none;background:var(--steel);border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:border-color .22s,transform .22s var(--ease),background .22s}
.next:hover{border-color:var(--sky);transform:translateY(-3px);background:var(--steel-2)}
.next .lbl{display:block;margin-bottom:10px}
.next strong{display:block;font:800 19px/1.24 Archivo,sans-serif;margin-bottom:8px}
.next span.t{display:block;font-size:15px;color:#A5BAC6}
.next::after{content:"\2192";display:inline-block;margin-top:12px;color:var(--sky);font-size:19px;transition:transform .25s var(--ease)}
.next:hover::after{transform:translateX(6px)}
.lite .next{background:var(--paper-2);border-color:var(--lineD)}
.lite .next span.t{color:#3B4E59}
.lite .next::after{color:var(--sky-deep)}

/* ---------- booking bar ---------- */
.bookbar{background:var(--steel);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:14px;grid-template-columns:1fr 1fr 96px auto;align-items:end;position:relative;overflow:hidden}
.bookbar::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(180deg,var(--sky) 0 55%,var(--red) 55%)}
.lite .bookbar{background:var(--paper-2);border-color:var(--lineD)}
.bookbar label{display:block;font:700 10px/1.4 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
.bookbar input{width:100%;margin-top:9px;padding:13px 12px;background:var(--ink);border:1px solid var(--line);border-radius:var(--r);color:var(--bone);font:500 15px/1 Archivo,sans-serif;color-scheme:dark;transition:border-color .2s}
.bookbar input:focus{border-color:var(--sky);outline:none}
.lite .bookbar input{background:#F4F8FA;border-color:var(--lineD);color:#0B1A22;color-scheme:light}
.bookbar .btn{width:auto;justify-content:center;padding:14px 22px;white-space:nowrap}
@media(max-width:820px){.bookbar{grid-template-columns:1fr 1fr}.bookbar .btn{grid-column:1/-1;width:100%}}
@media(max-width:420px){.bookbar{grid-template-columns:1fr}}
.bookbar .note{grid-column:1/-1;font:400 12.5px/1.6 "JetBrains Mono",monospace;color:var(--dust);margin:0}
.band .bookbar{background:rgba(0,0,0,.24);border-color:rgba(233,241,245,.24)}
.band .bookbar label,.band .bookbar .note{color:rgba(233,241,245,.82)}
.band .bookbar input{background:rgba(0,0,0,.3);border-color:rgba(233,241,245,.24);color:var(--bone);color-scheme:dark}

/* ---------- pills ---------- */
.pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.pills a{text-decoration:none;font:700 11.5px/1.4 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:11px 16px;color:#B4C6D1;transition:.2s var(--ease)}
.pills a:hover{border-color:var(--sky);color:var(--sky);transform:translateY(-2px)}
.lite .pills a{border-color:var(--lineD);color:#3B4E59}
.lite .pills a:hover{border-color:var(--sky-deep);color:var(--sky-deep)}

/* ---------- video cards ---------- */
.tape{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr))}
.vid{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#000;cursor:pointer;padding:0;margin:0;width:100%;text-align:left;font:inherit;color:inherit;display:block;transition:border-color .25s,transform .25s var(--ease)}
.vid:hover{border-color:var(--sky);transform:translateY(-3px)}
.vid .thumb{position:relative;display:block;overflow:hidden}
.vid img{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.6;transition:opacity .25s,transform .5s var(--ease)}
.vid:hover img{opacity:1;transform:scale(1.05)}
.vid .yr{position:absolute;top:0;left:0;background:var(--red);color:#fff;font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.12em;padding:8px 12px;z-index:2}
.vid .play{position:absolute;top:calc(50% - 26px);left:calc(50% - 26px);width:52px;height:52px;border-radius:50%;background:rgba(224,36,54,.95);box-shadow:0 6px 24px -6px rgba(224,36,54,.8);display:grid;place-items:center;transition:transform .25s var(--ease);z-index:2}
.vid:hover .play{transform:scale(1.14)}
.vid .play::after{content:"";border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.vid .cap{display:block;padding:15px 16px 17px;background:var(--steel)}
.vid .cap strong{display:block;font:600 14.5px/1.38 Archivo,sans-serif;margin-bottom:5px}
.vid .cap span{display:block;font:400 12.5px/1.5 "JetBrains Mono",monospace;color:var(--dust)}
.vid iframe{width:100%;aspect-ratio:16/9;border:0}

/* ---------- map ---------- */
.mapwrap{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;aspect-ratio:21/9;background:var(--steel);min-height:300px}
.mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapface{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;cursor:pointer;border:0;width:100%;
  background:
   radial-gradient(circle at 50% 50%,rgba(9,182,232,.15),transparent 55%),
   repeating-linear-gradient(0deg,transparent 0 38px,rgba(233,241,245,.05) 38px 39px),
   repeating-linear-gradient(90deg,transparent 0 38px,rgba(233,241,245,.05) 38px 39px),
   var(--steel)}
.mapface .pin{width:22px;height:22px;border-radius:50%;background:var(--red);margin:0 auto 18px;position:relative;box-shadow:0 0 0 8px rgba(224,36,54,.2)}
.mapface .pin::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px solid var(--red);opacity:.6;animation:ripple 2.6s ease-out infinite}
@keyframes ripple{0%{transform:scale(.6);opacity:.75}100%{transform:scale(1.9);opacity:0}}
.mapface strong{display:block;font-family:Anton,sans-serif;text-transform:uppercase;font-size:clamp(20px,2.6vw,30px);color:var(--bone);margin-bottom:8px}
.mapface span{display:block;font:400 13px/1.6 "JetBrains Mono",monospace;color:var(--dust);max-width:min(44ch,100%)}
.mapface em{display:inline-block;margin-top:16px;font-style:normal;font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);opacity:.75}

/* ---------- marquee ---------- */
.marq{overflow:hidden;border-block:1px solid var(--line);padding:16px 0;background:var(--navy);white-space:nowrap;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marq div{display:inline-block;animation:scroll 34s linear infinite;will-change:transform}
.marq:hover div{animation-play-state:paused}
.marq span{font:700 13px/1 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);padding:0 26px}
.marq span::after{content:"\25C6";color:var(--sky);margin-left:26px}
.marq span:nth-child(even)::after{color:var(--red)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- cta band ---------- */
.band{background:linear-gradient(135deg,var(--navy),#00293D);color:#fff;text-align:center;
  border-top:2px solid var(--red);border-bottom:1px solid rgba(9,182,232,.32)}
.band .d2{margin-bottom:18px}
.band .d2 em{font-style:normal;color:var(--sky)}
.band>.wrap>p{max-width:min(58ch,100%);margin-inline:auto;margin-bottom:30px;font-size:18px;color:rgba(233,241,245,.88)}
.band .cta-row{justify-content:center}
.band .btn-o:hover{background:var(--sky);color:var(--sky-ink);border-color:var(--sky)}

/* ---------- footer ---------- */
footer{background:#040C12;border-top:1px solid var(--line);padding:64px 0 100px;font-size:15px}
footer .g4{gap:34px}
footer h4{font:700 11px/1.4 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);margin-bottom:16px}
footer li{margin-bottom:9px}
footer a{color:#8FA6B4;text-decoration:none;transition:color .18s}
footer a:hover{color:var(--sky)}
.fine{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);color:#63798A;font-size:13px}

/* ---------- sticky cta ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(6,18,26,.97);border-top:2px solid var(--red);padding:11px 4vw;display:none;gap:12px;align-items:center;justify-content:space-between}
.sticky span{font:700 11px/1.4 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dust)}
@media(max-width:760px){.sticky{display:flex}footer{padding-bottom:120px}}

/* ---------- reveal ----------
   Scroll-driven CSS where supported: runs on the compositor, no JS per frame. */
.rv{opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none;transition:opacity .65s var(--ease),transform .65s var(--ease)}
@supports (animation-timeline:view()){
  .rv{animation:reveal linear both;animation-timeline:view();animation-range:entry 8% cover 26%}
  .rv.in{transition:none}
}
@keyframes reveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1!important;transform:none!important}
}

/* ---------- cross-document page transitions ---------- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtOut .22s var(--ease) both}
  ::view-transition-new(root){animation:vtIn .34s var(--ease) both}
}
@keyframes vtOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}

/* ---------- small screens ---------- */
@media(max-width:560px){
  nav .wrap{height:auto;padding-block:13px}
  .brand{font-size:17px;white-space:nowrap}
  .brand small{font-size:7.5px;letter-spacing:.2em;margin-top:3px}
  .navcta .btn{padding:11px 12px;font-size:11.5px;letter-spacing:.01em}
  .strip{font-size:9.5px;letter-spacing:.06em}
  .receipts{grid-template-columns:1fr 1fr}
  .cta-row .btn{width:100%;justify-content:center}
  .sec{padding:54px 0}
  .vhero{min-height:76vh}
  .vhero .wrap{padding-bottom:104px}
  .vpause{top:16px;bottom:auto}
  .vcredit{max-width:none;right:4vw;font-size:9.5px}
  .card{padding:22px}
  .lb-p,.lb-n{width:44px;height:44px}
  .lb-p{left:2vw}.lb-n{right:2vw}
}

/* ---------- gallery filters + show-all ---------- */
.galfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
@media(max-width:760px){
  .galfilter{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;
    margin-inline:-4vw;padding-inline:4vw;
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .galfilter::-webkit-scrollbar{display:none}
  .galfilter button{flex:0 0 auto;scroll-snap-align:start;padding:12px 16px}
}
.galfilter button{font:700 11px/1.4 "JetBrains Mono",monospace;letter-spacing:.09em;text-transform:uppercase;
  background:transparent;border:1px solid var(--line);color:#B4C6D1;border-radius:100px;padding:10px 15px;cursor:pointer;transition:.2s var(--ease)}
.galfilter button:hover{border-color:var(--sky);color:var(--sky)}
.galfilter button.on{background:var(--sky);border-color:var(--sky);color:var(--sky-ink)}
.lite .galfilter button{border-color:var(--lineD);color:#3B4E59}
.lite .galfilter button.on{background:var(--sky-deep);border-color:var(--sky-deep);color:#fff}
.gal button[hidden]{display:none}

/* ---------- self-hosted hero video ----------
   Fades up from its own poster the moment the first frame decodes, so there is
   never a black flash or a visible swap. */
.vhero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  opacity:0;transition:opacity .7s var(--ease);pointer-events:none;z-index:0}
.vhero-vid.on{opacity:1}
@media (prefers-reduced-motion:reduce){.vhero-vid{opacity:.5}}


/* ---------- quick answer ----------
   A plain-language summary of the page, first thing after the hero. Written for
   AI Overviews, ChatGPT and voice assistants, which lift a clean paragraph far
   more reliably than they parse a page of marketing copy. Readers get the gist
   without scrolling, so it earns its place either way. */
.qa{background:linear-gradient(180deg,rgba(9,182,232,.07),rgba(9,182,232,.02));
  border-block:1px solid rgba(9,182,232,.2);border-left:3px solid var(--sky)}
.qa-l{display:block;width:var(--wrap);margin:0 auto;padding:22px 0 0;
  font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sky)}
.qa-t{width:var(--wrap);margin:9px auto 0;padding-bottom:24px;
  font-size:clamp(16px,1.7vw,18.5px);line-height:1.62;color:var(--bone);max-width:min(88ch,92vw)}
@media(max-width:700px){
  .qa-l{padding-top:18px}
  .qa-t{font-size:16px;padding-bottom:20px}
}


/* ---------- host section ---------- */
#host .prose p + p{margin-top:16px}
#host a[target="_blank"]{color:var(--sky);text-decoration:none;
  border-bottom:1px solid rgba(9,182,232,.4);transition:border-color .2s}
#host a[target="_blank"]:hover{border-bottom-color:var(--sky)}
#host .host-cta{margin-top:26px}
#host .host-cta a{border-bottom:0}
#host .host-cta a:hover{border-bottom:0;background:var(--sky);color:var(--sky-ink);border-color:var(--sky)}


/* ---------- brand logo ---------- */
.brand{display:inline-flex;align-items:center;line-height:0;text-decoration:none;flex:none}
.brand img{height:62px;width:auto;display:block}
@media(max-width:1080px){.brand img{height:38px}}
@media(max-width:560px){.brand img{height:34px}}
.foot-logo{margin-bottom:22px}
.foot-logo img{height:86px;width:auto;display:block}
@media(max-width:700px){.foot-logo img{height:66px}}


/* ---------- logo ---------- */
.brand{display:inline-flex;align-items:center;line-height:0;text-decoration:none}
.brand img{height:62px;width:auto;display:block}
@media(max-width:1080px){.brand img{height:54px}}
@media(max-width:560px){.brand img{height:50px}}
.footlogo{margin-bottom:30px;padding-top:8px}
.footlogo img{height:124px;width:auto;opacity:1}
@media(max-width:900px){.footlogo img{height:104px}}
@media(max-width:640px){.footlogo img{height:88px;max-width:100%}}
@media(max-width:420px){.footlogo img{height:auto;width:min(100%,300px)}}


/* Long words and URLs can still push a narrow column wider than its parent.
   Break them rather than let the line run off the edge. */
.prose, .prose p, .lead, .section-sub, .card-body p, .qa-t{
  overflow-wrap:anywhere;
  word-break:normal;
}