/* =========================================================================
   GRENADIER COMPUTING — COMPONENT LIBRARY
   The single source of truth for shared UI. Loaded after tokens.css.
   ========================================================================= */

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-body);font-weight:600;
  font-size:1rem;padding:.9rem 1.7rem;border-radius:var(--r-pill);text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background-color .3s,color .3s,border-color .3s}
.btn-lg{padding:1.05rem 2.1rem;font-size:1.05rem}
.btn-primary{background:linear-gradient(120deg,var(--aqua),#38BDF8);color:var(--ink);box-shadow:0 10px 30px -10px rgba(34,211,238,.7)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(34,211,238,.85);color:var(--ink)}
.btn-ghost-dark{color:var(--text-on-light);border-color:rgba(6,24,42,.25)}
.btn-ghost-dark:hover{border-color:var(--teal);transform:translateY(-3px)}
.btn-ghost-light{color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost-light:hover{border-color:var(--aqua-bright);transform:translateY(-3px);color:#fff}

/* --- Nav --- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(24px,4vw,48px);background:rgba(6,24,42,.38);backdrop-filter:blur(6px);
  transition:background-color .4s,backdrop-filter .4s,box-shadow .4s}
.nav.scrolled{background:rgba(6,24,42,.85);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--hairline-dark)}
.brand{display:flex;flex-direction:column;line-height:1;color:#fff;text-decoration:none}
.brand img{height:38px;width:auto;display:block}
.brand b{font-family:var(--font-display);font-weight:900;font-size:1.2rem;letter-spacing:.02em}
.brand span{font-family:var(--font-display);font-weight:300;font-size:.7rem;letter-spacing:.4em;opacity:.8;margin-top:3px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{color:rgba(255,255,255,.85);text-decoration:none;font-size:.92rem;font-weight:500}
.nav-links a:hover{color:#fff}
.nav .btn{padding:.55rem 1.2rem;font-size:.88rem}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer}
@media(max-width:900px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:100%;right:0;left:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(6,24,42,.97);backdrop-filter:blur(10px);padding:8px 0;
    max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
  .nav-links.open{max-height:60vh}
  .nav-links a{padding:14px clamp(24px,4vw,48px)}
  .nav-links .btn{margin:10px clamp(24px,4vw,48px)}
}

/* --- Section heads --- */
.sec-head{text-align:center;max-width:900px;margin:0 auto var(--space-16)}
.sec-head .eyebrow{margin-bottom:var(--space-3)}
.sec-head h2{font-size:clamp(2.1rem,4.4vw,3.3rem)}
.sec-head p{margin-top:16px;font-size:1.1rem}

/* --- Hero --- */
.hero{min-height:100svh;display:flex;align-items:center;padding-top:120px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:80%;
  background:radial-gradient(60% 50% at 25% 0%,rgba(255,255,255,.9),transparent 70%),
            radial-gradient(50% 45% at 82% 4%,rgba(94,234,212,.5),transparent 70%);
  filter:blur(10px);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero .eyebrow{color:var(--teal)}
.hero h1{font-size:clamp(3rem,7vw,6rem);line-height:1.12;margin:18px 0 0;max-width:26ch}
.hero .lead{color:var(--text-on-light-muted);max-width:48ch;margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.dive-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);color:var(--teal);
  font-size:.76rem;letter-spacing:.25em;text-transform:uppercase;display:flex;flex-direction:column;
  align-items:center;gap:8px;opacity:.85}
.dive-cue::after{content:"";width:1px;height:38px;background:linear-gradient(var(--teal),transparent);animation:sink 2.4s var(--ease) infinite}
@keyframes sink{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}
/* Photo hero (shark dive) */
.hero-photo{color:#fff;background:var(--ink)}
.hero-photo::before{display:none}
.hero-photo .hero-bg{position:absolute;inset:0;z-index:0}
.hero-photo .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-photo .hero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(3,14,24,.82) 0%,rgba(3,14,24,.5) 42%,rgba(6,24,42,.18) 100%),
  linear-gradient(180deg,rgba(6,24,42,.35) 0%,rgba(6,24,42,0) 35%,rgba(6,24,42,.6) 100%)}
.hero-photo .wrap{position:relative;z-index:2}
.hero-photo .eyebrow{color:var(--aqua-bright)}
.hero-photo h1{color:#fff}
.hero-photo .lead{color:rgba(255,255,255,.85)}
.hero-photo .dive-cue{color:var(--aqua-bright)}
.hero-photo .dive-cue::after{background:linear-gradient(var(--aqua-bright),transparent)}
@media(max-width:900px){.hero-photo .hero-bg img{object-position:65% 42%}}
.page-hero{padding:170px 0 var(--space-24);text-align:center;overflow:hidden}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.5rem)}
.page-hero p{margin:18px auto 0;max-width:60ch}
@media(prefers-reduced-motion:reduce){.dive-cue::after{animation:none}}

/* --- Stats / proof --- */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);text-align:center}
.stat .num{font-family:var(--font-display);font-weight:900;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;color:var(--ink)}
.stat .lbl{font-weight:600;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(6,24,42,.7);margin-top:10px}
.on-dark .stat .num{color:var(--aqua-bright)}
.on-dark .stat .lbl{color:var(--text-on-dark-muted)}
@media(max-width:760px){.proof-grid{grid-template-columns:1fr;gap:var(--space-12)}}

/* --- Founder story --- */
.story-body{margin-top:var(--space-8)}
.story-body p{margin-bottom:1.1rem;color:#2c3e50;font-size:1.05rem}
.portrait{width:280px;height:280px;border-radius:50%;object-fit:cover;object-position:center top;
  float:right;margin:0 0 1rem 2rem;box-shadow:var(--shadow-soft)}
@media(max-width:600px){.portrait{float:none;display:block;margin:0 auto 1.5rem;width:200px;height:200px}}
/* Editorial long-form story */
.story-feature{margin:var(--space-12) auto;max-width:920px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft);position:relative}
.story-feature img{display:block;width:100%;height:auto}
.story-feature figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 24px 18px;color:#fff;font-size:1rem;font-weight:500;
  background:linear-gradient(transparent,rgba(3,14,24,.85))}
.story-feature figcaption b{font-family:var(--font-display);font-weight:900}
.standfirst{font-size:1.3rem;line-height:1.6;color:var(--ink);font-weight:500;margin-bottom:1.4rem}
.story-sub{font-family:var(--font-display);font-weight:900;font-size:1.3rem;line-height:1.3;color:var(--ink);
  letter-spacing:-.01em;margin:2.4rem 0 1rem}
.pullquote{font-family:var(--font-display);font-weight:900;font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.2;
  color:var(--teal-deep);letter-spacing:-.02em;text-align:center;max-width:20ch;margin:var(--space-16) auto;
  padding-top:var(--space-8);border-top:2px solid var(--aqua)}
.byline{display:flex;align-items:center;gap:14px;margin-top:var(--space-12)}
.byline img{width:60px;height:60px;border-radius:50%;object-fit:cover;border:2px solid var(--aqua);background:var(--ink)}
.byline b{font-family:var(--font-display);font-weight:900;display:block;color:#fff}
.byline span{font-size:.9rem;color:var(--text-on-dark-muted)}

/* --- Layer marker + connector (the spine) --- */
.layer-mark{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:var(--space-8)}
.layer-mark .n{font-family:var(--font-display);font-weight:900;font-size:clamp(3rem,7vw,5rem);line-height:1;
  background:linear-gradient(135deg,var(--aqua-bright),var(--aqua));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.layer-mark h3{font-size:clamp(1.5rem,3vw,2rem);color:#fff}
.connector{width:2px;height:64px;margin:0 auto;background:linear-gradient(var(--aqua),rgba(34,211,238,.1))}
.lead-prose{max-width:880px;margin:0 auto var(--space-12);text-align:center}
.lead-prose p{color:var(--text-on-dark-muted);margin-bottom:1rem}
.tie{max-width:880px;margin:var(--space-16) auto 0;text-align:center;color:var(--text-on-dark-muted)}

/* --- Glass card (the one card to rule them all) --- */
.gcard{background:var(--glass);border:1px solid var(--hairline-dark);border-radius:var(--r-lg);
  backdrop-filter:blur(6px);transition:transform var(--dur) var(--ease),border-color .3s,background-color .3s}
.gcard:hover{transform:translateY(-6px);border-color:rgba(94,234,212,.5);background:var(--glass-hover)}
/* light-surface variant for cards sitting on light zones */
.lcard{background:#fff;border:1px solid var(--hairline-light);border-radius:var(--r-lg);box-shadow:0 8px 30px -16px rgba(3,14,24,.25);
  transition:transform var(--dur) var(--ease),box-shadow .3s}
.lcard:hover{transform:translateY(-6px);box-shadow:0 18px 50px -20px rgba(3,14,24,.35)}

/* --- Flip cards --- */
.stack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.flip{height:240px;perspective:1200px;cursor:pointer}
.flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.flip.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r-lg);
  padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:var(--glass);border:1px solid var(--hairline-dark);backdrop-filter:blur(6px)}
.flip:hover .flip-face{border-color:rgba(94,234,212,.45)}
.flip-back{transform:rotateY(180deg);justify-content:center}
.flip .ico{font-size:2.4rem;color:var(--aqua);margin-bottom:14px}
.flip h4{font-size:1.05rem;color:#fff}
.flip .hint{margin-top:12px;font-size:.78rem;color:var(--text-on-dark-muted);display:flex;align-items:center;gap:5px}
.flip-back p{font-size:.86rem;color:var(--text-on-dark-muted);line-height:1.55}
@media(prefers-reduced-motion:reduce){.flip-inner{transition:none}}

/* --- Included checklist (foundation) --- */
.included{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;align-items:stretch}
@media(min-width:640px){.included{grid-auto-rows:1fr}}
.inc-group{background:var(--glass);border:1px solid var(--hairline-dark);border-radius:var(--r-lg);
  backdrop-filter:blur(6px);padding:24px 26px}
.included .inc-group .inc-head{font-family:var(--font-body);font-weight:600;font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--aqua-bright);margin-bottom:8px}
.inc-intro{color:var(--text-on-dark-muted);font-size:.86rem;line-height:1.45;margin-bottom:18px}
.inc-list{list-style:none;display:flex;flex-direction:column;gap:13px}
.inc-list li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;line-height:1.5;
  color:var(--text-on-dark-muted)}
.inc-tick{color:var(--aqua);font-size:1.05rem;flex:0 0 auto;margin-top:1px}
.inc-list strong{color:#fff;font-weight:600}

/* --- Feature blocks --- */
.f3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:760px){.f3{grid-template-columns:1fr}}
.story-photo{margin:var(--space-12) 0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hairline-dark)}
.story-photo img{display:block;width:100%;height:auto}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.f2{grid-template-columns:1fr}}
.feat{padding:var(--space-8);text-align:center}
.feat .ico{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;
  font-size:2rem;color:var(--aqua);background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(34,211,238,.04))}
.feat h4,.feat h3{font-size:1.15rem;color:#fff;margin-bottom:8px}
.feat p{color:var(--text-on-dark-muted);font-size:.95rem}
.feat.align-left{text-align:left}
.feat.align-left .ico{margin:0 0 16px}

/* --- Split (text + media) --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:var(--space-8)}}
.split h3{font-size:1.6rem;color:#fff;margin-bottom:14px}
.split p{color:var(--text-on-dark-muted);margin-bottom:1rem}
.frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hairline-dark);box-shadow:var(--shadow-soft)}
.frame img{display:block;width:100%}

/* --- "Is this for you" pills --- */
.foryou-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:var(--space-8)}
@media(max-width:880px){.foryou-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foryou-grid{grid-template-columns:1fr}}
.fy{padding:24px}
.fy .ico{font-size:1.6rem;color:var(--aqua-bright);margin-bottom:12px;display:block}
.fy span{font-size:.98rem;color:var(--text-on-dark)}

/* --- Pricing --- */
.price-panel{max-width:760px;margin:0 auto;text-align:center;padding:var(--space-16);border-radius:var(--r-lg);
  background:radial-gradient(120% 120% at 50% 0%,rgba(34,211,238,.12),transparent 60%),var(--glass);border:1px solid var(--hairline-dark)}
.price-panel h2{font-size:clamp(2rem,4vw,3rem);color:#fff}
.price-panel p{color:var(--text-on-dark-muted);margin-top:14px}
.price-figure{font-family:var(--font-display);font-weight:900;color:var(--aqua-bright);font-size:1.1rem;letter-spacing:.04em;margin-top:18px}

/* --- Reviews --- */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:880px){.reviews-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.reviews-grid{grid-template-columns:1fr}}
.review{padding:28px;display:flex;flex-direction:column}
.review .stars{color:#FFC857;letter-spacing:2px;margin-bottom:12px}
.review p{color:var(--text-on-dark);font-style:italic;line-height:1.6;flex-grow:1}
.review .who{margin-top:16px;font-weight:600;color:#fff;font-style:normal;display:flex;align-items:center;gap:8px}
.review .who i{color:var(--aqua)}

/* --- Carousel (vanilla, scroll-snap) --- */
.carousel{position:relative}
.carousel-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  gap:0;scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-slide{scroll-snap-align:center;padding:4px}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--hairline-dark);background:rgba(6,24,42,.6);color:#fff;font-size:1.3rem;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(6px);transition:background-color .3s,border-color .3s}
.carousel-btn:hover{background:var(--teal);border-color:var(--aqua)}
.carousel-prev{left:-8px} .carousel-next{right:-8px}
.carousel-dots{display:flex;justify-content:center;gap:10px;margin-top:24px}
.carousel-dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.25);cursor:pointer;transition:background-color .3s}
.carousel-dots button.active{background:var(--aqua)}
@media(max-width:600px){.carousel-btn{display:none}}

/* --- Team --- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:880px){.team-grid{grid-template-columns:1fr}}
.tcard{padding:34px 28px;text-align:center}
.tphoto{width:140px;height:140px;border-radius:50%;object-fit:cover;border:3px solid var(--aqua);
  box-shadow:0 0 32px rgba(34,211,238,.35);margin-bottom:18px}
.tcard h3{font-size:1.25rem;color:#fff}
.trole{color:var(--aqua-bright);font-weight:600;font-size:.92rem;margin:4px 0 12px}
.tbio{color:var(--text-on-dark-muted);font-size:.95rem}

/* --- Checklist --- */
.checklist{list-style:none;display:grid;gap:12px}
.checklist li{display:flex;gap:12px;align-items:baseline;color:var(--text-on-dark)}
.checklist li::before{content:"\F26E";font-family:"bootstrap-icons";color:var(--aqua-bright);font-size:.9em}

/* --- FAQ (details/summary) --- */
.faq{max-width:820px;margin:0 auto;display:grid;gap:14px}
.faq details{background:var(--glass);border:1px solid var(--hairline-dark);border-radius:var(--r-md);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:600;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"\F4FE";font-family:"bootstrap-icons";color:var(--aqua);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-body{padding:0 24px 20px;color:var(--text-on-dark-muted)}

/* --- Map --- */
.map-panel{max-width:1000px;margin:0 auto;border-radius:var(--r-lg);
  background:radial-gradient(60% 60% at 50% 40%,rgba(34,211,238,.1),transparent 70%),var(--glass);
  border:1px solid var(--hairline-dark);padding:24px;overflow:hidden}
.map-wrapper{position:relative;width:100%;margin-left:-12%}
.map-img{width:100%;height:auto;display:block;filter:brightness(0) invert(1) opacity(.55)}
.map-pin{position:absolute;width:11px;height:11px;background:#fff;border:2px solid var(--ink);border-radius:50%;
  transform:translate(-50%,-50%);box-shadow:0 0 8px rgba(255,255,255,.6)}
.map-pin-hq{width:18px;height:18px;background:var(--aqua);border:2px solid #fff;box-shadow:0 0 16px var(--aqua)}
.legend{display:flex;justify-content:center;gap:28px;margin-bottom:22px;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text-on-dark-muted)}
.legend i{width:12px;height:12px;border-radius:50%;display:inline-block}

/* --- Contact --- */
.contact-card{background:#fff;border-radius:var(--r-lg);padding:14px;box-shadow:var(--shadow-soft);max-width:1000px;margin:0 auto}
.urgency{color:var(--aqua-bright);font-weight:600}

/* --- Lightbox --- */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(3,14,24,.9);display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:95vw;max-height:92vh;border-radius:var(--r-md);box-shadow:var(--shadow-soft)}
.zoomable{cursor:zoom-in}

/* --- Sticky book button --- */
.sticky-book{position:fixed;bottom:1.5rem;right:1.5rem;z-index:60;display:flex;align-items:center;gap:.5rem;
  background:linear-gradient(120deg,var(--aqua),#38BDF8);color:var(--ink);font-weight:600;text-decoration:none;
  border-radius:var(--r-pill);padding:.85rem 1.6rem;box-shadow:0 10px 30px -8px rgba(34,211,238,.7);
  opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .4s,transform .4s}
.sticky-book.visible{opacity:1;transform:none;pointer-events:auto}
.sticky-book:hover{color:var(--ink);transform:translateY(-3px)}
@media(max-width:575px){.sticky-book{bottom:1rem;right:1rem;padding:.7rem 1.2rem;font-size:.9rem}}

/* --- Holiday parks accent --- */
.parks-ico{font-size:2.6rem;color:var(--aqua);margin-bottom:14px}

/* --- Footer --- */
.site-footer{background:var(--abyss);color:var(--text-on-dark-muted);padding:var(--space-16) 0 var(--space-8)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-12)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:14px}
.site-footer a{color:var(--text-on-dark-muted);text-decoration:none}
.site-footer a:hover{color:var(--aqua-bright)}
.foot-row{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start}
.foot-row i{color:var(--aqua)}
.foot-social{display:flex;gap:16px;font-size:1.3rem;margin-top:16px}
.foot-bottom{border-top:1px solid var(--hairline-dark);margin-top:var(--space-12);padding-top:var(--space-8);text-align:center;font-size:.82rem}
.foot-bottom a{margin:0 8px}

/* --- Steps (painpoints) --- */
.steps{max-width:820px;margin:0 auto;display:grid;gap:24px}
.step{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start}
.step .n{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);
  font-weight:900;font-size:1.4rem;color:var(--ink);background:linear-gradient(135deg,var(--aqua-bright),var(--aqua))}
.step h4{color:#fff;font-size:1.2rem;margin-bottom:6px}
.step p{color:var(--text-on-dark-muted)}
@media(max-width:600px){.step{grid-template-columns:48px 1fr;gap:14px}.step .n{width:48px;height:48px;font-size:1.1rem}}