/* =========================================================================
   Jetski-Safari brand layer.

   Loaded after main.css. main.css still carries the restored page structures;
   this file carries the premium presentation: palette, typography, chrome and
   the home page sections.

   Palette is deliberately narrow: deep ocean navy, tropical turquoise, white,
   warm sand, and a coral accent used sparingly.
   ========================================================================= */

@font-face{
  font-family:"Outfit";
  src:url("../fonts/outfit-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"InterVar";
  src:url("../fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --navy:#062a3e;
  --navy-deep:#04202f;
  --navy-soft:#0d3b54;
  --turq:#12a2a8;
  --turq-bright:#19c2c9;
  --sand:#f3ece1;
  --sand-deep:#e6dac6;
  --coral:#f0673c;
  --ink:#12262f;
  --ink-soft:#4a5f6a;
  --line:#dfe6e9;
  --white:#fff;

  --display:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --text:"InterVar",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --shell:1200px;
  --r:14px;
  --r-sm:8px;
}

/* ---------------------------------------------------------------- basics */
body.js-body{
  font-family:var(--text);
  font-size:17px;line-height:1.7;color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
.js-body h1,.js-body h2,.js-body h3,.js-body .js-display{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.08;
  color:var(--navy);
}
.js-body a{color:var(--turq);}
.js-body a:hover,.js-body a:focus-visible{color:var(--coral);}

.js-shell{max-width:var(--shell);margin:0 auto;padding:0 24px;}
.js-section{padding:clamp(56px,7vw,104px) 0;background:var(--white);}
.js-section--sand{background:var(--sand);}
.js-section--navy{background:var(--navy);color:#dfeaf0;}
.js-section--navy h2,.js-section--navy h3{color:#fff;}

.js-eyebrow{
  font-family:var(--display);font-weight:600;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--turq);margin:0 0 14px;
}
.js-section--navy .js-eyebrow{color:var(--turq-bright);}
.js-h2{font-size:clamp(30px,4.2vw,50px);margin:0 0 20px;}
.js-lede{font-size:clamp(17px,1.6vw,20px);line-height:1.65;color:var(--ink-soft);max-width:62ch;}
.js-section--navy .js-lede{color:#b9cdd8;}

/* --------------------------------------------------------------- buttons */
.js-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:16px;
  padding:15px 30px;border-radius:100px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease,background-color .18s ease,color .18s ease;
}
.js-cta:hover,.js-cta:focus-visible{transform:translateY(-2px);text-decoration:none;}

/* Written as .js-body a.js-cta--* on purpose. The generic link colour rule
   above is .js-body a, which outranks a bare .js-cta--primary and was turning
   the button label turquoise on its coral ground. */
.js-body a.js-cta--primary{background:var(--coral);color:#fff;}
.js-body a.js-cta--primary:hover,.js-body a.js-cta--primary:focus-visible{background:#d9542b;color:#fff;}
.js-body a.js-cta--ghost{border-color:rgba(255,255,255,.65);color:#fff;background:transparent;}
.js-body a.js-cta--ghost:hover,.js-body a.js-cta--ghost:focus-visible{background:#fff;color:var(--navy);border-color:#fff;}
.js-body a.js-cta--dark{background:var(--navy);color:#fff;}
.js-body a.js-cta--dark:hover,.js-body a.js-cta--dark:focus-visible{background:var(--navy-soft);color:#fff;}
.js-body a.js-cta--line{border-color:var(--navy);color:var(--navy);}
.js-body a.js-cta--line:hover,.js-body a.js-cta--line:focus-visible{background:var(--navy);color:#fff;}
/* Same trap for the restored inner-page buttons. */
.js-body a.js-btn,.js-body a.js-btn-alt{color:#fff;}
.js-body a.js-btn:hover,.js-body a.js-btn:focus-visible,
.js-body a.js-btn-alt:hover,.js-body a.js-btn-alt:focus-visible{color:#fff;}

/* ---------------------------------------------------------- header + nav */
.js-wrap{max-width:none;margin:0;padding:0;box-shadow:none;background:transparent;border-radius:0;}

/* The banner is black wordmark plus an orange sun on a white ground. Any
   filter that lifts it onto a dark bar either flattens it to a white block or
   turns the sun blue, so the logo keeps its own white band and the navigation
   carries the navy. */
.js-header{background:var(--navy);border:0;padding:0;}
.js-siteheader{
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  padding:16px 24px;
}
.js-banner{max-width:340px;height:auto;}
.js-header .js-nav{
  max-width:var(--shell);margin:0 auto;padding:0 24px;
  background:transparent;border:0;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
}
.js-menu > li > a,.js-submenu-toggle{color:#cfe0e8;}
.js-menu > li > a{
  font-family:var(--display);font-weight:600;
  font-size:13px;letter-spacing:.09em;padding:16px 14px;
}
.js-menu > li + li::before{border-left-color:rgba(255,255,255,.16);}
.js-menu > li > a:hover,.js-menu > li > a:focus,
.js-menu > li.js-open > a,.js-menu > li.current-menu-item > a,
.js-menu > li.current-menu-ancestor > a{background:transparent;color:var(--turq-bright);}
.js-menu > li.js-open > a,.js-menu > li:hover > .js-submenu-toggle,
.js-submenu-toggle:hover,.js-submenu-toggle:focus-visible,
.js-menu > li.js-open > .js-submenu-toggle{background:transparent;color:var(--turq-bright);}
.js-menu .sub-menu{
  background:var(--navy-soft);border-color:rgba(255,255,255,.14);
  border-radius:var(--r-sm);box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.js-menu .sub-menu a{color:#cfe0e8;border-radius:6px;}
.js-menu .sub-menu a:hover,.js-menu .sub-menu a:focus{background:rgba(255,255,255,.09);color:#fff;}
.js-nav-toggle{color:#cfe0e8;font-family:var(--display);}
.js-navcta{margin-left:auto;}
.js-navcta .js-cta{padding:11px 22px;font-size:14px;}

@media(max-width:860px){
  .js-header .js-nav{flex-direction:column;align-items:stretch;padding:0;}
  .js-menu{background:var(--navy-deep);}
  .js-menu > li{border-top-color:rgba(255,255,255,.1);}
  .js-navcta{margin:0;padding:12px 24px 16px;background:var(--navy-deep);}
  .js-navcta .js-cta{width:100%;justify-content:center;}
  .js-siteheader{padding:12px 24px 0;}
}

/* ------------------------------------------------------------------ hero */
.js-hero-full{
  position:relative;min-height:min(88vh,860px);
  display:flex;align-items:center;
  background:var(--navy-deep);overflow:hidden;
}
.js-hero-full > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border:0;padding:0;margin:0;border-radius:0;
}
.js-hero-full::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,32,47,.55) 0%,rgba(4,32,47,.35) 42%,rgba(4,32,47,.92) 100%);
}
.js-hero-inner{position:relative;z-index:2;max-width:var(--shell);margin:0 auto;padding:110px 24px 76px;width:100%;}
.js-hero-loc{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#bfe4e6;
  border:1px solid rgba(255,255,255,.32);border-radius:100px;padding:8px 18px;margin:0 0 26px;
}
/* .js-body h1 sets the navy heading colour and outranks a bare class, which
   put a dark headline on the dark hero. Qualified so white wins. */
.js-body h1.js-hero-title{
  font-size:clamp(38px,6.6vw,80px);color:#fff;margin:0 0 22px;max-width:15ch;
  text-shadow:0 2px 30px rgba(0,0,0,.3);
}
.js-hero-sub{font-size:clamp(17px,1.9vw,22px);line-height:1.6;color:#dbe9ef;max-width:56ch;margin:0 0 34px;}
.js-hero-actions{display:flex;flex-wrap:wrap;gap:14px;}
.js-hero-credit{
  position:absolute;right:14px;bottom:12px;z-index:3;margin:0;
  font-size:11px;color:rgba(255,255,255,.6);
}
.js-hero-credit a{color:rgba(255,255,255,.8);text-decoration:underline;}

/* ---------------------------------------------------------- status notice */
.js-status{background:var(--sand-deep);border-bottom:1px solid #d8c9ae;}
.js-status-inner{
  max-width:var(--shell);margin:0 auto;padding:18px 24px;
  display:flex;gap:16px;align-items:flex-start;
}
.js-status-mark{
  flex:0 0 auto;font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;
  background:var(--navy);color:#fff;border-radius:100px;padding:6px 14px;margin-top:2px;
}
.js-status p{margin:0;font-size:15.5px;line-height:1.6;color:#4a3f2c;}
.js-status a{color:var(--navy);font-weight:600;}

/* ------------------------------------------------------------ split intro */
.js-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;}
.js-split--flip .js-split-media{order:2;}
.js-split-media img{
  width:100%;border-radius:var(--r);border:0;padding:0;margin:0;
  aspect-ratio:4/3;object-fit:cover;box-shadow:0 24px 60px rgba(6,42,62,.16);
}
.js-highlights{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:16px;}
.js-highlights li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;}
.js-highlights .js-tick{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--turq);color:#fff;display:grid;place-items:center;
  font-size:14px;font-weight:700;margin-top:2px;
}

/* -------------------------------------------------------------- timeline */
.js-steps{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(3,1fr);}
.js-step{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
}
.js-step img{width:100%;aspect-ratio:16/10;object-fit:cover;border:0;padding:0;margin:0;border-radius:0;}
.js-step-body{padding:22px 24px 26px;}
.js-step-num{
  font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.14em;
  color:var(--turq);margin:0 0 8px;
}
.js-step h3{font-size:21px;margin:0 0 8px;}
.js-step p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-soft);}

/* ---------------------------------------------------------- island band */
.js-island{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;overflow:hidden;background:var(--navy-deep);}
.js-island > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;padding:0;margin:0;border-radius:0;}
.js-island::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,32,47,.25) 0%,rgba(4,32,47,.86) 78%);}
.js-island-inner{position:relative;z-index:2;max-width:var(--shell);margin:0 auto;padding:90px 24px 64px;width:100%;}
.js-island h2{color:#fff;font-size:clamp(30px,4.6vw,56px);margin:0 0 18px;}
.js-island p{color:#cfe2ea;max-width:58ch;font-size:17.5px;}
.js-route{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 6px;margin:30px 0 0;padding:0;}
.js-route li{
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.05em;
  color:#fff;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);
  border-radius:100px;padding:9px 18px;backdrop-filter:blur(3px);
}
.js-route .js-route-arrow{background:none;border:0;color:var(--turq-bright);padding:0 2px;font-size:16px;}

/* ------------------------------------------------------------- fact grid */
.js-facts{list-style:none;margin:0;padding:0;display:grid;gap:20px;grid-template-columns:repeat(4,1fr);}
.js-fact{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;}
.js-fact dt{
  font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--turq);margin:0 0 10px;
}
.js-fact dd{margin:0;font-size:16px;line-height:1.6;color:var(--ink);}
.js-fact dd strong{display:block;font-family:var(--display);font-size:26px;color:var(--navy);line-height:1.2;margin-bottom:4px;}

/* --------------------------------------------------------------- gallery */
.js-mason{columns:4;column-gap:16px;margin:0;padding:0;list-style:none;}
.js-mason li{break-inside:avoid;margin:0 0 16px;}
.js-mason a{display:block;border-radius:var(--r-sm);overflow:hidden;position:relative;}
.js-mason img{width:100%;height:auto;display:block;border:0;padding:0;margin:0;border-radius:var(--r-sm);transition:transform .5s ease;}
.js-mason a:hover img,.js-mason a:focus-visible img{transform:scale(1.05);}
.js-mason figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;
  font-size:13px;color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));
  opacity:0;transition:opacity .3s ease;
}
.js-mason a:hover figcaption,.js-mason a:focus-visible figcaption{opacity:1;}

/* ----------------------------------------------------------- why us cards */
.js-cards{list-style:none;margin:0;padding:0;display:grid;gap:20px;grid-template-columns:repeat(4,1fr);}
.js-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:30px 26px;display:flex;flex-direction:column;
}
.js-section--navy .js-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);}
.js-card h3{font-size:21px;margin:0 0 10px;}
.js-card p{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink-soft);}
.js-section--navy .js-card p{color:#b9cdd8;}
.js-card-mark{
  width:44px;height:44px;border-radius:12px;background:var(--sand);
  display:grid;place-items:center;margin:0 0 18px;
  font-family:var(--display);font-weight:800;color:var(--navy);font-size:18px;
}
.js-section--navy .js-card-mark{background:var(--turq);color:#fff;}

.js-motto{
  text-align:center;font-family:var(--display);font-weight:800;
  font-size:clamp(24px,3.4vw,42px);line-height:1.25;color:#fff;
  max-width:20ch;margin:0 auto;
}
.js-motto span{color:var(--turq-bright);}

/* ---------------------------------------------------------- destination */
.js-places{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(3,1fr);}
.js-place{
  border:1px solid var(--line);border-radius:var(--r);padding:24px;background:#fff;
  display:flex;flex-direction:column;gap:8px;
}
.js-place h3{font-size:19px;margin:0;}
.js-place p{margin:0;font-size:15px;color:var(--ink-soft);line-height:1.6;}
.js-place a{font-family:var(--display);font-weight:600;font-size:14.5px;margin-top:auto;padding-top:10px;}

/* --------------------------------------------------------------- closing */
.js-closing{position:relative;min-height:min(62vh,560px);display:flex;align-items:center;text-align:center;overflow:hidden;background:var(--navy-deep);}
.js-closing > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;padding:0;margin:0;border-radius:0;}
.js-closing::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,32,47,.62),rgba(4,32,47,.82));}
.js-closing-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:80px 24px;}
.js-closing h2{color:#fff;font-size:clamp(30px,4.6vw,54px);margin:0 0 18px;}
.js-closing p{color:#cfe2ea;font-size:18px;margin:0 0 32px;}
.js-closing .js-hero-actions{justify-content:center;}

/* ---------------------------------------------------------------- footer */
.js-footer{background:var(--navy);border-top:0;border-bottom:0;color:#a8c2ce;padding:0;}
.js-footer-inner{max-width:var(--shell);margin:0 auto;padding:46px 24px;}
.js-footer a{color:#cfe0e8;}
.js-footer a:hover,.js-footer a:focus-visible{color:var(--turq-bright);}
.js-footer-nav ul{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;margin:0 0 16px;padding:0;font-family:var(--display);font-weight:600;font-size:14.5px;}
.js-footer p{font-size:14px;color:#8fa9b6;}

/* -------------------------------------------------- inner page polish ---- */
.js-page{max-width:var(--shell);margin:0 auto;padding:40px 24px 60px;gap:48px;}

/* The home page runs full bleed: its sections carry their own backgrounds and
   set their own gutters through .js-shell, so the page wrapper must not box
   them in. */
.home .js-page{max-width:none;margin:0;padding:0;gap:0;display:block;}
.home .js-main{flex:none;width:100%;}
.js-crumbs{font-size:13.5px;color:var(--ink-soft);}
.js-content .js-heading{font-size:clamp(28px,3.6vw,42px);margin:0 0 18px;}
.js-widget-title{
  font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--navy);
  background:var(--sand);border:0;border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.js-widget{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-bottom:20px;}
.js-btn{
  background:var(--navy);border-radius:100px;font-family:var(--display);
  font-weight:600;padding:12px 24px;border:0;
}
.js-btn:hover,.js-btn:focus-visible{background:var(--navy-soft);}
.js-btn-alt{background:var(--coral);}
.js-btn-alt:hover,.js-btn-alt:focus-visible{background:#d9542b;}

/* ------------------------------------------------------------ responsive */
@media(max-width:1024px){
  .js-steps{grid-template-columns:repeat(2,1fr);}
  .js-facts,.js-cards{grid-template-columns:repeat(2,1fr);}
  .js-mason{columns:3;}
  .js-places{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:760px){
  .js-split{grid-template-columns:1fr;}
  .js-split--flip .js-split-media{order:0;}
  .js-steps{grid-template-columns:1fr;}
  .js-facts,.js-cards{grid-template-columns:1fr;}
  .js-mason{columns:2;}
  .js-places{grid-template-columns:1fr;}
  .js-hero-full{min-height:auto;}
  .js-hero-inner{padding:86px 24px 56px;}
  .js-hero-actions .js-cta{width:100%;justify-content:center;}
  .js-status-inner{flex-direction:column;gap:10px;}
  .js-mason figcaption{opacity:1;}
}
@media(max-width:420px){
  .js-mason{columns:1;}
}
@media(prefers-reduced-motion:reduce){
  .js-cta,.js-mason img,.js-mason figcaption{transition:none;}
  .js-cta:hover,.js-cta:focus-visible{transform:none;}
  .js-mason a:hover img,.js-mason a:focus-visible img{transform:none;}
}