/* ============================================================
   watersports.nz — shared stylesheet
   Order: tokens → base/reset → typography → components (A–Z)
   → sections → utilities. Media queries live at the end of
   each component/section block.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --ink: #0b1520;        /* page background */
  --ink-2: #101d2b;      /* #0e1a27 alternating section background */
  --seam-bg: #05090f;    /* darkest — panel seams, footer */
  --paper: #f6f8f9;      /* body text on dark */
  --muted: rgba(255,255,255,.72);
  --water: #4bd9ff;

  --thunder: #f3740e;    
  --hydro: #f6b02c;      
  --para: #d5363e;      
  --jetski: #1683c6;     
  --jetcar: #c1c1c1;    


  --skew: -7deg;         /* signature angle — buttons, dashes, flashes */
  --unskew: 7deg;
  --slant: 5vw;          /* diagonal panel seam offset (desktop) */
  --panel-ease: cubic-bezier(.33,.9,.25,1);
  --pad-x: clamp(24px, 6vw, 96px);  /* global horizontal gutter */
}

/* ---------- 2. Base / reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', system-ui, sans-serif;
  background: var(--ink);
  color: var(--paper);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--water);
  outline-offset: 3px;
}

/* ---------- 3. Typography ---------- */
h1, h2, h3 {
  font-weight: 700; font-style: italic;
  text-transform: uppercase; letter-spacing: -.01em;
}

.section { padding: clamp(64px, 9vh, 120px) var(--pad-x); }
.section--alt { background: var(--ink-2); }
.section__kicker {
  font-size: 12px; font-weight: 600; font-style: normal;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--water); margin-bottom: 14px;
}
.section__title { font-size: clamp(28px, 3.6vw, 52px); line-height: 1.05; text-wrap: balance; margin-bottom: 15px;}
.section__intro { margin-top: 16px; color: var(--muted); max-width: 62ch; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.7; }

/* ============================================================
   4. Components (alphabetical)
   ============================================================ */

/* ---------- .asset (downloadable media tile, trade resources) ---------- */
.assets__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 42px; }
.asset {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--ink); overflow: hidden;
  border-top: 3px solid var(--water);
  transition: transform .35s var(--panel-ease), box-shadow .35s ease;
}
.asset:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.asset__thumb {
  aspect-ratio: 4/3; background-size: cover; background-position: center;
  filter: saturate(.85) brightness(.85);
}
.asset:hover .asset__thumb { filter: saturate(1.05) brightness(.95); }
.asset__thumb--video {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(215deg, #14425e, #0b2433 55%, #0a141f); filter: none;
}
.asset__thumb--video svg { color: var(--water); }
.asset__body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.asset__name { font-size: 15px; font-weight: 600; line-height: 1.35; }
.asset__meta { margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.5); }
.asset__dl {
  margin-top: auto; padding-top: 14px; font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--water);
}
.asset:hover .asset__dl { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1020px) { .assets__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .assets__grid { grid-template-columns: 1fr; } }

/* ---------- .article (blog post prose) ---------- */
.article { max-width: 760px; }
.article h2 { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.2; margin: 48px 0 6px; }
.article h3 { font-size: 17px; font-style: normal; letter-spacing: .01em; margin: 30px 0 0; color: #fff; }
.article p { margin-top: 16px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.article a:not(.btn) { color: var(--water); }
.article .rule-list { margin-top: 8px; }
.article__img { margin: 36px 0; border-top: 3px solid var(--water); }
.article__img--card { background: #fff; padding: 28px; border-radius: 6px; border-top: none; }
.article .gallery__grid { margin-top: 36px; margin-bottom: 12px; }
.article__actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 56px; }

/* ---------- .btn ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: var(--water); text-decoration: none;
  padding: 15px 28px; transform: skewX(var(--skew)); border: none; cursor: pointer;
  font-family: inherit;
}
.btn > * { display: inline-block; transform: skewX(var(--unskew)); }
.btn:hover { filter: brightness(1.1); }
.btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.btn--ghost:hover { box-shadow: inset 0 0 0 2px #fff; filter: none; }
.btn--accent { background: var(--accent, var(--water)); }

/* ---------- .combo-card (dual-accent combo deal card) ---------- */
.combo-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--ink); padding: 30px 28px; text-decoration: none; color: inherit;
  transition: transform .35s var(--panel-ease), box-shadow .35s ease;
}
.combo-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(100deg, var(--a, var(--water)) 0 50%, var(--b, var(--hydro)) 50% 100%);
}
.combo-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
/* Optional full-bleed image header — negative margins cancel the card's padding.
   Text-only combo cards (activity-page strips) simply omit this element. */
.combo-card__img {
  aspect-ratio: 5/4; margin: -30px -28px 22px; overflow: hidden;
  background-size: cover; background-position: center;
  filter: saturate(.92) brightness(.9); transition: filter .5s ease;
}
.combo-card:hover .combo-card__img { filter: saturate(1.05) brightness(1); }
.combo-card__brands { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.combo-card__brands .b-a { color: var(--a, var(--water)); }
.combo-card__brands .b-b { color: var(--b, var(--hydro)); }
.combo-card__brands .amp { color: rgba(255,255,255,.4); margin: 0 6px; }
.combo-card__title { font-size: 22px; margin-top: 10px; line-height: 1.15; }
.combo-card__text { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.combo-card__meta {
  display: inline-block; margin: 16px 8px 0 0; font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.25);
  padding: 5px 12px; border-radius: 999px;
}
.combo-card__price { margin-top: auto; padding-top: 20px; font-size: 14px; color: var(--muted); }
.combo-card__price strong { color: #fff; font-size: 22px; font-weight: 700; font-style: italic; }
.combo-card__cta {
  margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--a, var(--water)); display: inline-flex; align-items: center; gap: 8px;
}
.combo-card:hover .combo-card__cta { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- .deal (deal card) ---------- */
.deal {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--ink); overflow: hidden;
  transition: transform .35s var(--panel-ease), box-shadow .35s ease;
  border-top: 3px solid var(--accent, var(--water));
}
.deal:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.deal__img { aspect-ratio: 4/3; background-size: cover; background-position: center; }
.deal:hover .deal__img { filter: saturate(1.1); }
.deal__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.deal__eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent, var(--water)); }
.deal__title { font-size: 20px; margin-top: 8px; line-height: 1.15; }
.deal__price { margin-top: auto; padding-top: 18px; font-size: 14px; color: var(--muted); }
.deal__price strong { color: #fff; font-size: 22px; font-weight: 700; font-style: italic; }
.deal__cta {
  margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent, var(--water)); display: inline-flex; align-items: center; gap: 8px;
}
.deal:hover .deal__cta { text-decoration: underline; text-underline-offset: 4px; }
.deal--thunder { --accent: var(--thunder); }
.deal--hydro { --accent: var(--hydro); }
.deal--para { --accent: var(--para); }
.deal--jetski { --accent: var(--jetski); }

/* ---------- .faq (accordion item) ---------- */
.faq { border-bottom: 1px solid rgba(255,255,255,.12); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 22px 4px; font-weight: 600; font-size: clamp(15px, 1.2vw, 18px);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 26px; font-weight: 400; color: var(--water);
  transition: transform .3s ease; flex-shrink: 0;
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 4px 24px; color: var(--muted); font-size: 15px; line-height: 1.75; max-width: 70ch; }
.faqs__list { margin-top: 20px; max-width: 992px; }

/* ---------- .flash (skewed highlight flash) ---------- */
.flash {
  display: inline-block; align-self: flex-start;
  font-weight: 700; font-style: italic; font-size: 15px; letter-spacing: .04em;
  color: var(--ink); background: var(--hydro); padding: 8px 16px; transform: skewX(var(--skew));
}
.flash > span { display: inline-block; transform: skewX(var(--unskew)); }

/* ---------- .form (static enquiry form) ---------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 8px;
}
.form input, .form select, .form textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--paper);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  padding: 13px 14px; border-radius: 0;
}
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%), linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
/* Dropdown option list renders in a native popup - force readable dark-on-... colours */
.form select option { background: var(--ink); color: var(--paper); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--water); }
.form textarea { min-height: 140px; resize: vertical; }
@media (max-width: 640px) {
  .form__row { grid-template-columns: 1fr; }
}

/* ---------- .legal (risk disclosure / policy prose) ---------- */
.legal { max-width: 800px; }
.legal h2 {
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.2;
  margin: 52px 0 6px;
}
.legal h3 { font-size: 17px; font-style: normal; letter-spacing: .01em; margin: 30px 0 0; color: #fff; }
.legal p { margin-top: 14px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.legal .rule-list { margin-top: 20px; }
.legal__lead {
  font-weight: 600; color: var(--paper); font-size: clamp(15px, 1.3vw, 18px);
  border-left: 4px solid var(--accent, var(--water)); padding-left: 18px;
}
.legal__actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 52px; }

/* ---------- .other (supporting-services text card) ---------- */
.other {
  display: block; text-decoration: none; color: inherit;
  background: var(--ink-2); padding: 34px 30px; position: relative; overflow: hidden;
  transition: transform .35s var(--panel-ease);
}
.other::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--water); transform: skewX(var(--skew)) scaleY(0); transform-origin: bottom;
  transition: transform .4s var(--panel-ease);
}
.other:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.other__logo {
  height: auto; width: 100%; aspect-ratio: 16 / 9; object-fit: contain;
  margin-bottom: 20px; background: #fff; padding: 6px 12px; border-radius: 6px;
}
.other__title { font-size: 21px; }
.other__text { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.other__link {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--water);
}

/* ---------- .panel (diagonal activity panel) ---------- */
.panels {
  position: relative; display: flex;
  height: min(82vh, 58vw); /* width-capped so portrait/narrow screens don't get a towering row */
  min-height: min(600px, 92svh, 58vw); /* never taller than the screen on short laptops */
  background: var(--seam-bg); /* shows through the 3px gaps as seams */
}
.panel {
  position: relative; flex: 1; display: block; overflow: hidden;
  text-decoration: none; color: inherit; outline: none;
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  margin-left: calc(-1 * var(--slant) + 3px);
  transition: flex-grow .65s var(--panel-ease);
}
.panel:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); margin-left: 0; }
.panel:last-child  { clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%); }

.panels:hover .panel,
.panels:focus-within .panel { flex-grow: .84; }
.panel:hover,
.panel:focus-visible { flex-grow: 2.3 !important; }

.panel__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.03);
  transition: transform .9s var(--panel-ease), filter .6s ease;
  filter: saturate(.75) brightness(.7);
}
.panel:hover .panel__bg,
.panel:focus-visible .panel__bg { transform: scale(1.13); filter: saturate(1.05) brightness(.92); }

.panel__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,14,22,.9) 0%, rgba(8,14,22,.3) 45%, transparent 75%);
  transition: opacity .5s ease;
}
.panel:hover .panel__scrim,
.panel:focus-visible .panel__scrim { opacity: .88; }

.panel__content { position: absolute; inset: auto 0 0 0; padding: 0 clamp(24px, 3vw, 56px) 7vh; }
.panel__logo { height: clamp(50px, 5.2vw, 100px); width: auto; margin-bottom: 16px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }

@media (max-width: 820px) {
.panel__logo { height: clamp(90px, 14vw, 120px);}
}  

.panel__eyebrow {
  display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent, var(--water)); margin-bottom: 10px;
}
.panel__title { font-size: clamp(22px, 1.9vw, 40px); line-height: 1.04; color: #fff; text-wrap: balance; }
.panel__price { margin-top: 10px; font-size: clamp(14px, 1.2vw, 18px); font-weight: 500; color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.panel__price strong { color: var(--accent, var(--water)); font-weight: 600; }
.panel__reveal {
  max-height: 0; opacity: 0; overflow: hidden; transform: translateY(10px);
  transition: max-height .55s var(--panel-ease), opacity .45s ease .08s, transform .55s var(--panel-ease);
}
.panel:hover .panel__reveal,
.panel:focus-visible .panel__reveal { max-height: 240px; opacity: 1; transform: translateY(0); }
.panel__tag { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.85); margin-top: 14px; max-width: 36ch; }
.panel__meta {
  display: inline-block; margin: 12px 8px 0 0; font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.25);
  padding: 5px 12px; border-radius: 999px;
}
.panel__cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; margin-left: 5px;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: var(--accent, var(--water)); padding: 12px 22px;
  transform: skewX(var(--skew)); /* parallelogram like .btn */
}
.panel__cta > * { display: inline-block; transform: skewX(var(--unskew)); }
.panel__cta svg { transition: transform .3s ease; }
.panel:hover .panel__cta svg { transform: skewX(var(--unskew)) translateX(4px); }
.panel:focus-visible .panel__title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--accent, var(--water)); }

.panel--thunder { --accent: var(--thunder); }
.panel--hydro   { --accent: var(--hydro); }
.panel--para    { --accent: var(--para); }
.panel--jetski  { --accent: var(--jetski); }
.panel--jetcar  { --accent: var(--jetcar); }

/* Coming-soon panel: skewed badge sits where the brand logo normally would */
.panel__soon {
  display: table; margin-bottom: 16px;  /* table = own line but shrink-wrapped, like the block logo img */
  font-weight: 700; font-style: italic; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: var(--accent, var(--water));
  padding: 7px 16px; transform: skewX(var(--skew));
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
.panel__soon > span { display: inline-block; transform: skewX(var(--unskew)); }

@media (max-width: 820px) {
  /* Panels: simple stacked blocks, each sized by its own content.
     Pixel-based slant so the overlap and the clip notch always match. */
  .panels { display: block; height: auto; min-height: 0; background: var(--ink); --mslant: 26px; }
  .panel, .panel:first-child, .panel:last-child {
    display: block; width: 100%;
    clip-path: polygon(0 var(--mslant), 100% 0, 100% 100%, 0 100%);
    margin: calc(-1 * var(--mslant) + 3px) 0 0 0;
  }
  .panel:first-child { clip-path: none; margin-top: 0; }
  .panel__content {
    position: relative;              /* paints above the absolute bg/scrim */
    inset: auto; padding: clamp(84px, 16vh, 125px) 24px 70px;
  }
  .panel__reveal { max-height: none; opacity: 1; transform: none; overflow: visible; }
  .panel__bg { transform: none; }
  .panel:hover .panel__bg { transform: scale(1.06); }
}

/* ---------- .post (blog listing card) ---------- */
.posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 42px; }
.post {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--ink-2); overflow: hidden;
  border-top: 3px solid var(--water);
  transition: transform .35s var(--panel-ease), box-shadow .35s ease;
}
.post:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.post__img {
  aspect-ratio: 16/9; background-size: cover; background-position: center;
  filter: saturate(.85) brightness(.85);
}
.post:hover .post__img { filter: saturate(1.05) brightness(.95); }
.post__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.post__date {
  font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--water);
}
.post__title { font-size: 21px; margin-top: 10px; line-height: 1.2; }
.post__excerpt { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.post__more {
  margin-top: auto; padding-top: 18px; font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--water);
  display: inline-flex; align-items: center; gap: 8px;
}
.post:hover .post__more { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1020px) { .posts__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .posts__grid { grid-template-columns: 1fr; } }

/* ---------- .price-card (activity pricing option) ---------- */
.price-card {
  display: flex; flex-direction: column;
  background: var(--ink-2); padding: 30px 28px;
  border-top: 3px solid var(--accent, var(--water));
  transition: transform .35s var(--panel-ease), box-shadow .35s ease;
  max-width: 550px;
}
.price-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.price-card__name { font-size: 22px; line-height: 1.15; }
.price-card__price { margin-top: 14px; font-size: 15px; color: var(--muted); }
.price-card__price strong { color: #fff; font-size: 32px; font-weight: 700; font-style: italic; }
.price-card__per { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 2px; }
.price-card__list { list-style: none; margin-top: 18px; }
.price-card__list li {
  font-size: 14px; line-height: 1.6; color: var(--muted);
  padding: 6px 0 6px 22px; position: relative;
}
.price-card__list li::before {
  content: ""; position: absolute; left: 0; top: 14px; width: 12px; height: 3px;
  background: var(--accent, var(--water)); transform: skewX(var(--skew));
}
.price-card .btn { margin-top: auto; align-self: flex-start; margin-top: 26px; }

/* ---------- .quote (testimonial card) ---------- */
.quote { background: var(--ink); padding: 30px 28px; position: relative; }
.quote::before {
  content: "\201C"; position: absolute; top: 6px; left: 20px;
  font-size: 72px; font-weight: 700; font-style: italic; color: var(--water); opacity: .35; line-height: 1;
}
.quote__text { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.88); padding-top: 26px; }
.quote__who { margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--water); }
.quote__src { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px; }
.stars { color: var(--hydro); letter-spacing: 3px; font-size: 13px; margin-top: 16px; }

/* ---------- .rule-list (usage guidelines, trade resources) ---------- */
.rule-list { list-style: none; margin-top: 32px; max-width: 760px; }
.rule-list li {
  font-size: 15px; line-height: 1.7; color: var(--muted);
  padding: 12px 0 12px 34px; position: relative;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.rule-list li:last-child { border-bottom: none; }
.rule-list li::before {
  content: ""; position: absolute; left: 0; top: 22px; width: 16px; height: 4px;
  background: var(--accent, var(--water)); transform: skewX(var(--skew));
}
.rule-list strong { color: var(--paper); font-weight: 600; }

/* ============================================================
   5. Sections
   ============================================================ */

/* ---------- Header ---------- */
header {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad-x);
  background: linear-gradient(to bottom, rgba(11,21,32,.8), transparent);
}
.wordmark { display: block; line-height: 0; }
.wordmark svg { width: 280px; height: auto; display: block; }
.wordmark .logo-main { fill: #fff; }
.wordmark .logo-tagline { fill: #4bd9ff; }
nav a {
  color: rgba(255,255,255,.85); text-decoration: none;
  font-size: 14px; font-weight: 500; margin-left: 26px; letter-spacing: .04em;
}
nav a:hover { color: #fff; }
nav .nav-btn {
  display: inline-flex; align-items: center;
  margin-left: 22px; padding: 10px 18px;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: var(--water);
  transform: skewX(var(--skew));
}
nav .nav-btn > span { display: inline-block; transform: skewX(var(--unskew)); }
nav .nav-btn:hover { color: var(--ink); filter: brightness(1.1); }
nav .nav-btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
nav .nav-btn--ghost:hover { color: #fff; box-shadow: inset 0 0 0 2px #fff; filter: none; }

/* Burger toggle — hidden on desktop */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; margin-left: 18px;
  background: none; border: none; cursor: pointer; flex-shrink: 0;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: #fff;
  transform: skewX(var(--skew)); transition: transform .3s ease, opacity .3s ease;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Slide-out drawer (from the right) + scrim */
.nav-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(5,9,15,.65);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: min(320px, 84vw); height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--ink-2); border-left: 1px solid rgba(255,255,255,.08);
  padding: 20px 28px 32px;
  transform: translateX(100%); transition: transform .45s var(--panel-ease);
  visibility: hidden;
}
body.nav-open .nav-drawer { transform: none; visibility: visible; }
body.nav-open { overflow: hidden; } /* lock page scroll while drawer is open */
.nav-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.nav-drawer__title {
  font-size: 12px; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--water);
}
.nav-drawer__close {
  width: 44px; height: 44px; margin-right: -10px;
  background: none; border: none; cursor: pointer; color: rgba(255,255,255,.75);
}
.nav-drawer__close:hover { color: #fff; }
.nav-drawer nav { display: flex; flex-direction: column; }
.nav-drawer nav a {
  margin: 0; padding: 15px 0;
  font-size: 17px; font-weight: 600; font-style: italic; text-transform: uppercase;
  letter-spacing: .04em; color: rgba(255,255,255,.88); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-drawer nav a:hover { color: var(--water); }
.nav-drawer__actions { margin-top: auto; display: flex; flex-direction: column; gap: 16px; padding-top: 32px; }
.nav-drawer__actions .btn { justify-content: center; }

/* Breakpoints: desktop = full nav · ≤1200px = buttons + burger · ≤560px = burger only */
@media (max-width: 1360px) {
  /* seven links + buttons get tight below ~1360 — compact spacing before the burger takes over */
  nav a { margin-left: 15px; font-size: 13px; }
  nav .nav-btn { margin-left: 14px; padding: 9px 14px; font-size: 11px; }
}
@media (max-width: 1200px) {
  header > nav a:not(.nav-btn) { display: none; } /* menu links live in the drawer */
  header > nav { margin-left: auto; } /* only buttons remain — keep them right, next to the burger */
  .nav-toggle { display: flex; }
}
@media (max-width: 820px) {
  nav .nav-btn { margin-left: 14px; padding: 8px 14px; font-size: 11px; }
  .wordmark svg { width: 170px; }
}
@media (max-width: 560px) {
  header > nav .nav-btn { display: none; } /* Book Now & Vouchers move into the drawer */
  .wordmark svg { width: 220px; }
}

/* ---------- Video hero (homepage) ---------- */
.video-hero {
  position: relative; height: 100vh; height: 100svh;
  display: flex; align-items: flex-end; overflow: hidden;
}
.video-hero__fallback {
  position: absolute; inset: 0;
  background: linear-gradient(215deg, #14425e, #0b2433 45%, #0a141f 80%),
              radial-gradient(120% 80% at 75% 10%, rgba(75,217,255,.35), transparent 60%);
  background-blend-mode: screen;
}
.video-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,14,22,.92) 0%, rgba(8,14,22,.35) 40%, rgba(8,14,22,.25) 100%);
}
.video-hero__content { position: relative; z-index: 2; width: 100%; padding: 0 var(--pad-x) 12vh; max-width: 1100px; }
.video-hero__kicker { font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--water); margin-bottom: 16px; }
.video-hero__title { font-size: clamp(38px, 6vw, 84px); line-height: 1.02; color: #fff; text-wrap: balance; }
.video-hero__sub { margin-top: 20px; font-size: clamp(15px, 1.4vw, 19px); color: var(--muted); max-width: 52ch; }
.video-hero__cta { margin-top: 32px; }
.video-hero__brands {
  position: absolute; right: var(--pad-x); bottom: 12vh; z-index: 2; text-align: right;
  font-weight: 600; font-style: italic; font-size: clamp(13px, 1.2vw, 16px);
  line-height: 2.1; letter-spacing: .06em; text-transform: uppercase;
}
.video-hero__brands span { display: block; color: rgba(255,255,255,.55); transition: color .3s ease; }
.video-hero__brands span::before {
  content: ""; display: inline-block; width: 22px; height: 3px; margin-right: 12px;
  vertical-align: middle; background: var(--b); transform: skewX(var(--skew));
}
.video-hero__brands span:hover { color: #fff; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; z-index: 2; transform: translateX(-50%);
  color: rgba(255,255,255,.6); animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }
@media (max-width: 820px) {
  .video-hero__brands { display: none; }
  .video-hero__content { padding: 0 24px 14vh; }
}

/* ---------- Activity hero (activity pages) ---------- */
.a-hero {
  position: relative; min-height: 68vh;
  display: flex; align-items: flex-end; overflow: hidden;
}
.a-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(.85) brightness(.75);
}
.a-hero video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.85) brightness(.75); /* match .a-hero__bg treatment */
}
.a-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,14,22,.92) 0%, rgba(8,14,22,.35) 45%, rgba(8,14,22,.2) 100%);
}
.a-hero__content { position: relative; z-index: 2; width: 100%; padding: 140px var(--pad-x) 8vh; max-width: 1100px; }
.a-hero__logo { height: clamp(90px, 10vw, 120px); width: auto; margin-bottom: 20px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.a-hero__eyebrow {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--accent, var(--water)); margin-bottom: 14px;
}
.a-hero__title { font-size: clamp(34px, 5vw, 72px); line-height: 1.02; color: #fff; text-wrap: balance; }
.a-hero__price { margin-top: 16px; font-size: clamp(15px, 1.4vw, 19px); color: var(--muted); }
.a-hero__price strong { color: #fff; font-size: 1.4em; font-weight: 700; font-style: italic; }
.a-hero__cta { margin-top: 28px; }

/* ---------- Quick facts bar (activity pages) ---------- */
.facts {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 24px var(--pad-x); background: var(--ink-2);
  border-top: 3px solid var(--accent, var(--water));
}
.facts__chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 8px 16px;
}
.facts__chip strong { font-weight: 600; color: var(--accent, var(--water)); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Experience split (activity pages) ---------- */
.exp { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.exp__img {
  aspect-ratio: 4/3; background-size: cover; background-position: center;
  border-top: 3px solid var(--accent, var(--water));
  filter: saturate(.85) brightness(.85);
  transition: filter .6s ease;
}
.exp__img:hover { filter: saturate(1.05) brightness(.95); }
/* Media variant: real <img> at natural ratio (posters/logos) - shown in full, never cropped or letterboxed */
.exp__img--media { aspect-ratio: auto; background: none; filter: none; display: flex; align-items: center; justify-content: center; }
.exp__img--media img { display: block; width: 100%; height: auto; }
.exp--flip .exp__img { order: 2; }
.exp__body p:not(.section__kicker) { color: var(--muted); font-size: clamp(14px, 1.15vw, 17px); line-height: 1.8; }
.exp__body p + p { margin-top: 18px; }
@media (max-width: 1020px) {
  .exp { grid-template-columns: 1fr; }
  .exp--flip .exp__img { order: 0; }
}

/* ---------- Safety & terms card strip (activity pages) ---------- */
.safety-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 42px; max-width: 1100px; }
.safety-grid .other { border-top: 3px solid var(--accent, var(--water)); }
.safety-grid .other::before { background: var(--accent, var(--water)); }
.safety-grid .btn { margin-top: 24px; }
@media (max-width: 820px) { .safety-grid { grid-template-columns: 1fr; } }

/* ---------- Pricing options grid (activity pages) ---------- */
.options__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 2fr)); gap: 22px; margin-top: 42px; max-width: 1200px; }

/* ---------- Gallery grid (activity pages) ---------- */
.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 42px; }
.gallery__item {
  aspect-ratio: 4/3; background-size: cover; background-position: center;
  filter: saturate(.8) brightness(.8); transition: filter .5s ease;
  border: 0; padding: 0; width: 100%; cursor: pointer; display: block;
}
.gallery__item:hover, .gallery__item:focus-visible { filter: saturate(1.05) brightness(.95); }
.gallery__item:focus-visible { outline: 3px solid var(--accent, var(--water)); outline-offset: 2px; }
@media (max-width: 1020px) { .gallery__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* ---------- Lightbox (gallery viewer) ---------- */
.lightbox{ border:0; padding:0; margin:0; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; background:transparent; overflow:hidden; }
.lightbox::backdrop{ background:rgba(5,10,16,.92); }
.lightbox__stage{ margin:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:6vh 7vw; cursor:zoom-out; }
.lightbox__img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; cursor:default; -webkit-user-drag:none; user-select:none; }
.lightbox__nav{ position:fixed; top:50%; transform:translateY(-50%); z-index:2; width:52px; height:52px; border:0; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.14); color:#fff; font-size:30px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .2s ease; }
.lightbox__nav:hover{ background:rgba(255,255,255,.28); }
.lightbox__prev{ left:16px; }
.lightbox__next{ right:16px; }
.lightbox__close{ position:fixed; top:16px; right:16px; z-index:3; width:44px; height:44px; border:0; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .2s ease; }
.lightbox__close:hover{ background:rgba(255,255,255,.28); }
.lightbox__count{ position:fixed; bottom:18px; left:0; right:0; text-align:center; color:rgba(255,255,255,.85); font-size:13px; z-index:2; }
@media (max-width:640px){ .lightbox__nav{ width:44px; height:44px; font-size:24px; } .lightbox__prev{ left:8px; } .lightbox__next{ right:8px; } }

/* ---------- Contact form: honeypot, notes, field errors ---------- */
.form__hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.form__note { padding:14px 16px; border-radius:8px; margin-bottom:20px; font-size:15px; line-height:1.5; }
.form__note--ok { background:rgba(75,217,255,.12); border:1px solid rgba(75,217,255,.45); color:var(--paper); }
.form__note--error { background:rgba(213,54,62,.14); border:1px solid rgba(213,54,62,.55); color:var(--paper); }
.form__err { display:block; margin-top:6px; color:#ff9aa0; font-size:13px; font-weight:600; }

/* ---------- Promo popup (native <dialog>) ---------- */
.promo{
  --accent: var(--water); /* homepage has no brand accent; give the CTA a colour */
  position:fixed; inset:0; margin:auto;            /* centre both axes */
  height:fit-content; max-height:90vh;
  border:0; padding:0; width:min(92vw,460px); max-width:460px; border-radius:16px;
  overflow:auto; background:var(--ink-2); color:var(--paper);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.promo::backdrop{ background:rgba(5,12,20,.62); backdrop-filter:blur(3px); }
.promo[open]{ animation:promoIn .35s ease both; }
@keyframes promoIn{ from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none} }
.promo__close-form{ position:absolute; top:8px; right:8px; margin:0; z-index:2; }
.promo__close{
  width:36px; height:36px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(0,0,0,.45); color:#fff; font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.promo__close:hover{ background:rgba(0,0,0,.7); }
.promo__media{ aspect-ratio:16/10; background-size:cover; background-position:center; }
.promo__body{ padding:26px 26px 30px; text-align:center; }
.promo__heading{ font-size:clamp(20px,3.5vw,28px); line-height:1.1; margin:0 0 10px; text-wrap:balance; }
.promo__text{ color:var(--muted); font-size:15px; line-height:1.6; margin-bottom:18px; }
.promo__text p+p{ margin-top:10px; }
.promo__cta{ margin-top:2px; }
@media (prefers-reduced-motion: reduce){ .promo[open]{ animation:none; } }

/* ---------- YouTube facade (activity pages) ---------- */
/* Lightweight click-to-play: shows the thumbnail + play button, loads the real
   iframe only on interaction (perf + privacy, no third-party JS until clicked). */
/* Video split: video left, text right (mirrors .exp). Collapses to one column on tablet. */
.video-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.video-feature__body p:not(.section__kicker) { color: var(--muted); font-size: clamp(14px, 1.15vw, 17px); line-height: 1.8; }
.video-feature__body p:not(.section__kicker) strong { color: var(--paper); font-weight: 600; }
.video-feature__body p + p { margin-top: 18px; }
@media (max-width: 1020px) { .video-feature { grid-template-columns: 1fr; } }

.yt-facade {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; overflow: hidden; cursor: pointer;
}
.yt-facade__thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(.85); transition: filter .4s ease;
}
.yt-facade:hover .yt-facade__thumb,
.yt-facade:focus-visible .yt-facade__thumb { filter: brightness(1); }
.yt-facade:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.yt-facade__play {
  position: absolute; inset: 0; margin: auto; width: 68px; height: 48px;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.yt-facade__play svg { width: 68px; height: 48px; }
.yt-facade__play-bg { fill: #212121; opacity: .8; transition: fill .3s ease, opacity .3s ease; }
.yt-facade:hover .yt-facade__play-bg,
.yt-facade:focus-visible .yt-facade__play-bg { fill: #f00; opacity: 1; }
.yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* YouTube Shorts: landscape poster at rest; once clicked, the player switches to
   a portrait 9:16 frame so the Short plays full-height without side bars. */
.yt-facade.is-portrait { aspect-ratio: 9 / 16; max-width: 340px; margin-inline: auto; }

/* ---------- Combo strip (activity pages) & combos grid (combos page) ---------- */
.combo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 42px; }
@media (max-width: 1020px) { .combo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .combo-grid { grid-template-columns: 1fr; } }
/* ---------- Deals ---------- */
.deals { background: var(--ink-2); }
.deals__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 42px; }
@media (max-width: 1020px) { .deals__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .deals__grid { grid-template-columns: 1fr; } }

/* ---------- Combos split (homepage) ---------- */
.combos { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 66vh; }
.combos__img {
  background-size: cover; background-position: center;
  clip-path: polygon(0 0, 100% 0, calc(100% - 4vw) 100%, 0 100%);
}
.combos__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 8vh, 96px) var(--pad-x) clamp(48px, 8vh, 96px) clamp(32px, 4vw, 64px); }
.combos__body .btn { align-self: flex-start; margin-top: 32px; }
.combos__body .flash { margin-top: 22px; }
@media (max-width: 1020px) {
  .combos { grid-template-columns: 1fr; }
  .combos__img { min-height: 42vh; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%); }
}

/* ---------- Testimonials ---------- */
.testimonials { background: var(--ink-2); }
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 42px; }
@media (max-width: 1020px) { .testimonials__grid { grid-template-columns: 1fr; } }

/* ---------- Lake Wakatipu text split ---------- */
.lake { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.lake p:not(.section__kicker) { color: var(--muted); font-size: clamp(14px, 1.15vw, 17px); line-height: 1.8; }
.lake p + p { margin-top: 18px; }
@media (max-width: 1020px) { .lake { grid-template-columns: 1fr; } }

/* ---------- Other activities ---------- */
.others { background: var(--ink-2); }
.others .other { background: var(--ink); }
.others__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 42px; }
@media (max-width: 1020px) { .others__grid { grid-template-columns: 1fr; } }

/* ---------- Timeline (our story) ---------- */
.timeline { position: relative; max-width: 800px; margin-top: 48px; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px;
  background: rgba(255,255,255,.15);
}
.tl-item { position: relative; padding: 0 0 44px 48px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 5px;
  background: var(--accent, var(--water)); transform: skewX(var(--skew));
}
.tl-item__year {
  font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent, var(--water)); margin-bottom: 8px;
}
.tl-item__title { font-size: clamp(20px, 2vw, 26px); line-height: 1.15; }
.tl-item__text { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.75; max-width: 62ch; }

/* ---------- Values (our story) ---------- */
.values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 42px; }
.value { background: var(--ink); padding: 34px 30px; border-top: 3px solid var(--water); }
.value__title { font-size: 21px; }
.value__text { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--muted); }
@media (max-width: 1020px) { .values__grid { grid-template-columns: 1fr; } }

/* ---------- Brand family strip (our story) ---------- */
.brand-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(32px, 6vw, 80px); padding: clamp(40px, 6vh, 64px) var(--pad-x);
  background: var(--seam-bg);
}
.brand-strip img { height: clamp(50px, 5vw, 100px); width: auto; filter: grayscale(.2); opacity: .85; transition: opacity .3s ease, filter .3s ease; }
.brand-strip a:hover img { opacity: 1; filter: none; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); margin-top: 42px; align-items: start; }
/* Full-width Leaflet map (contact page) */
.map-full { width: 100%; }
.map-full .js-map { position: relative; width: 100%; height: clamp(340px, 48vh, 560px); background: var(--ink); z-index: 0; }
.map-tiles { filter: brightness(.92); }
/* Recolour the darkmatter basemap toward the site navy (--ink). The overlay sits above the
   tiles but below markers/controls (leaflet marker pane z-index 600), so only the map tints. */
.map-full .js-map::after {
  content: ""; position: absolute; inset: 0; z-index: 450; pointer-events: none;
  background: var(--ink); mix-blend-mode: color;
}
.leaflet-marker-pane img { filter: none !important; }
.leaflet-container { background: var(--ink); font-family: inherit; }
.c-block { margin-bottom: 30px; }
.c-block__h { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--water); margin-bottom: 12px; }
.c-block a { display: block; color: rgba(255,255,255,.85); text-decoration: none; font-size: 15px; line-height: 1.9; }
.c-block a:hover { color: var(--water); }
.c-block p { color: var(--muted); font-size: 14px; line-height: 1.75; max-width: 52ch; }
@media (max-width: 1020px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Anchor nav (FAQs page group links) ---------- */
.anchor-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.anchor-nav a {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.75); text-decoration: none;
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 8px 18px;
  transition: color .3s ease, border-color .3s ease;
}
.anchor-nav a:hover { color: var(--water); border-color: var(--water); }
.faq-group { margin-top: 56px; scroll-margin-top: 100px; }
#faqs { scroll-margin-top: 90px; } /* activity-page FAQ anchor lands clear of the fixed header */
.faq-group__title { font-size: clamp(20px, 2.2vw, 28px); }
.faq-group .faqs__list { margin-top: 20px; }

/* ---------- Final CTA ---------- */
.final-cta {
  position: relative; padding: clamp(80px, 14vh, 160px) var(--pad-x); text-align: center; overflow: hidden;
  background: linear-gradient(215deg, #14425e, #0b2433 55%, #0a141f);
}
.final-cta::before {
  content: ""; position: absolute; inset: 0;
  background: rgb(3 3 3 / 60%);
}
.final-cta__title { position: relative; font-size: clamp(30px, 4.6vw, 64px); text-wrap: balance; }
.final-cta__sub { position: relative; margin: 18px auto 0; max-width: 46ch; font-size: clamp(14px, 1.2vw, 17px); }
.final-cta .btn { position: relative; margin-top: 34px; }

/* ---------- Footer ---------- */
footer { background: var(--seam-bg); padding: clamp(48px, 8vh, 88px) var(--pad-x) 32px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer__about { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.55); margin-top: 18px; max-width: 34ch; }
.footer__qualmark { height: 120px; width: auto; margin-top: 22px; } /* webp asset is the light-on-dark Qualmark variant */
.footer__social { display: flex; gap: 14px; margin-top: 22px; }
.footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: rgba(255,255,255,.6); transition: color .25s ease, border-color .25s ease; }
.footer__social a:hover { color: var(--water); border-color: var(--water); }
.footer__social svg { width: 34px; height: 34px; }
.footer__h { font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 18px; }
.footer__grid .footer__h:not(:first-child) { margin-top: 28px; } /* second heading within a column (e.g. Agents & Groups) */
.footer__grid a { display: block; color: rgba(255,255,255,.8); text-decoration: none; font-size: 14px; margin-bottom: 12px; }
.footer__grid a:hover { color: var(--water); }
.footer__bar {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: rgba(255,255,255,.4);
}
footer .wordmark svg { width: 200px; }
@media (max-width: 1020px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr; } }

/* ============================================================
   6. Utilities
   ============================================================ */
.accent--thunder { --accent: var(--thunder); }
.accent--hydro   { --accent: var(--hydro); }
.accent--para    { --accent: var(--para); }
.accent--jetski  { --accent: var(--jetski); }
.accent--jetcar  { --accent: var(--jetcar); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Why Choose carousel (activity pages) ---------- */
.feature-slider { overflow-x: auto; overflow-y: hidden; margin-top: 42px; cursor: grab; user-select: none; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.feature-slider::-webkit-scrollbar { display: none; }
.feature-slider.is-dragging { cursor: grabbing; }
.feature-slider__track { display: flex; width: max-content; padding: 0 var(--pad-x); }
.feature { flex: 0 0 clamp(260px, 80vw, 340px); margin-right: 22px; background: var(--ink); border-top: 3px solid var(--accent, var(--water)); overflow: hidden; display: flex; flex-direction: column; }
.feature__img { aspect-ratio: 4/3; background-size: cover; background-position: center; filter: saturate(.9) brightness(.88); pointer-events: none; }
.feature__body { padding: 22px 24px 26px; }
.feature__title { font-size: 20px; line-height: 1.15; }
.feature__text { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.feature-slider__track .quote { flex: 0 0 clamp(280px, 80vw, 380px); margin-right: 22px; display: flex; flex-direction: column; } /* testimonials reuse the carousel */
.feature-carousel { position: relative; }
.feature-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: rgba(11,21,32,.65); border: none; color: #fff; cursor: pointer; backdrop-filter: blur(4px); transition: background .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease, visibility .25s ease; }
.feature-nav:hover { background: var(--accent, var(--water)); border-color: var(--accent, var(--water)); color: var(--ink); }
.feature-nav.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* JS: at scroll end, or all cards fit */
.feature-nav svg { width: 22px; height: 22px; }
.feature-nav--prev { left: clamp(8px, 2vw, 24px); }
.feature-nav--next { right: clamp(8px, 2vw, 24px); }
.feature-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.feature-hint svg { width: 20px; height: 20px; color: var(--accent, var(--water)); animation: swipe-nudge 1.8s ease-in-out infinite; }
.feature-hint.is-hidden { display: none; } /* JS: all cards fit, nothing to swipe */
@keyframes swipe-nudge { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .feature-hint svg { animation: none; } }

/* ---------- Compare CTA (button that opens the dialog) ---------- */
.compare-cta { text-align: center; background: #070f18; position: relative; overflow: hidden; }
.compare-cta::before {
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  pointer-events: none;
  background: url("../images/watersports-wordmark.svg") repeat;
  background-size: 290px auto;
  transform: rotate(-18deg);
  transform-origin: center;
  opacity: .04;
}
.compare-cta__inner { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.compare-cta .section__intro { margin-inline: auto; }
.compare-cta .btn { margin-top: 28px; }

/* ---------- Compare / finder dialog (modal) — matches the promo dialog ---------- */
.compare-dialog {
  --accent: var(--water);
  position: fixed; inset: 0; margin: auto;
  height: fit-content; max-height: 90vh;
  border: 0; padding: 0; width: min(92vw, 1020px); max-width: 1020px; border-radius: 16px;
  overflow: auto; background: var(--ink-2); color: var(--paper);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.compare-dialog::backdrop { background: rgba(5,12,20,.62); backdrop-filter: blur(3px); }
.compare-dialog[open] { animation: promoIn .35s ease both; }
.compare-dialog .compare { padding: clamp(22px, 3.5vw, 40px); }
.compare-dialog .compare__wrap { margin-top: 14px; }
.compare-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.compare-dialog__head .section__kicker { margin-bottom: 8px; }
.compare-dialog__head .section__title { margin: 0; }
.compare-dialog__close { flex: none; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease; }
.compare-dialog__close:hover, .compare-dialog__close:focus-visible { background: rgba(0,0,0,.7); }
@media (prefers-reduced-motion: reduce) { .compare-dialog[open] { animation: none; } }

/* ---------- Activity comparison table (dark, matches the dialog) ---------- */
.compare .section__kicker { color: var(--water); }
.compare .section__title { color: var(--paper); }
.compare__wrap { margin-top: 42px; overflow-x: auto; }
.compare__table { width: 100%; border-collapse: collapse; min-width: 720px; text-align: left; }
.compare__table th, .compare__table td { padding: 18px 20px; vertical-align: top; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; line-height: 1.5; color: var(--muted); }
.compare__table thead th { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); border-bottom: 2px solid rgba(255,255,255,.18); white-space: nowrap; }
.compare__table tbody tr:last-child th, .compare__table tbody tr:last-child td { border-bottom: none; }
.compare__name { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: #fff; text-decoration: none; }
.compare__name:hover, .compare__name:focus-visible { color: var(--accent, var(--water)); }
.compare__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent, var(--water)); flex: none; }
.compare__soon { display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 3px 9px; }
.compare__prices { list-style: none; margin: 0; padding: 0; }
.compare__prices li { display: flex; justify-content: space-between; gap: 18px; padding: 3px 0; }
.compare__prices strong { color: #fff; font-weight: 600; white-space: nowrap; }
.compare__season { display: block; }
.compare__departs { display: block; margin-top: 4px; font-size: 12.5px; color: rgba(255,255,255,.55); }
.compare__na { color: rgba(255,255,255,.3); }

@media (max-width: 760px) {
  .compare__wrap { overflow: visible; }
  .compare__table { min-width: 0; }
  .compare__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare__table, .compare__table tbody, .compare__table tr, .compare__table th, .compare__table td { display: block; }
  .compare__table tr { border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 6px 6px 4px; margin-bottom: 18px; background: rgba(255,255,255,.04); }
  .compare__table th, .compare__table td { border-bottom: 1px solid rgba(255,255,255,.08); padding: 12px 16px; }
  .compare__table tr td:last-child { border-bottom: none; }
  .compare__table td[data-label]::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 5px; }
}

/* ---------- Activity finder (quiz inside the dialog, dark) ---------- */
.finder__form { margin-top: 20px; }
.finder__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.finder__q { margin-bottom: 22px; border: 0; padding: 0; margin-inline: 0; }
.finder__label { display: block; font-size: 13px; font-weight: 600; color: var(--paper); margin-bottom: 10px; padding: 0; }
.finder__num { width: 100%; font-family: inherit; font-size: 16px; color: var(--paper); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 12px 14px; }
.finder__num:focus-visible { outline: 2px solid var(--water); outline-offset: 1px; }
.finder__seg { display: flex; flex-wrap: wrap; gap: 8px; }
.finder__seg label { position: relative; display: inline-flex; }
.finder__seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.finder__seg span { display: inline-block; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: var(--paper); font-size: 13px; font-weight: 500; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.finder__seg label:hover span { border-color: var(--water); }
.finder__seg input:checked + span { background: var(--water); border-color: var(--water); color: var(--ink); }
.finder__seg input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }

.finder__results { display: grid; gap: 14px; margin-top: 20px; }
.finder-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 16px 18px; position: relative; }
.finder-card--top { border-color: var(--accent, var(--water)); box-shadow: 0 6px 22px rgba(0,0,0,.35); }
.finder-card--out { opacity: .5; }
.finder-card__badge { position: absolute; top: -10px; left: 18px; background: var(--accent, var(--water)); color: var(--ink); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.finder-card__main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.finder-card__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent, var(--water)); margin-top: 5px; flex: none; }
.finder-card__name { font-size: 17px; font-weight: 600; color: #fff; margin: 0 0 3px; }
.finder-card__why { font-size: 13px; color: rgba(255,255,255,.7); margin: 0; line-height: 1.45; }
.finder-card__note { font-size: 12px; color: rgba(255,255,255,.55); margin: 5px 0 0; }
.finder-card__note--out { color: #ff8a8a; }
.finder-card__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; text-align: right; }
.finder-card__price { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; }
.finder__resultbar { margin-top: 16px; }

.finder__table { margin-top: 24px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; }
.finder__table > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--water); list-style: none; }
.finder__table > summary::-webkit-details-marker { display: none; }
.finder__table > summary::before { content: '＋ '; }
.finder__table[open] > summary::before { content: '－ '; }
.finder__table .compare__wrap { margin-top: 18px; }

/* small button variant for finder result cards */
.btn--sm { padding: 10px 18px; font-size: 11px; }

@media (max-width: 560px) {
  .finder__grid { grid-template-columns: 1fr; }
  .finder-card { flex-direction: column; align-items: flex-start; }
  .finder-card__side { align-items: flex-start; text-align: left; flex-direction: row; gap: 14px; align-items: center; }
}

/* Centre-align the finder dialog contents */
.finder { position: relative; text-align: center; }
.finder .compare-dialog__head { flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.finder .compare-dialog__close { position: absolute; top: 16px; right: 16px; }
.finder .finder__label { text-align: center; }
.finder .finder__grid { max-width: 460px; margin-inline: auto; }
.finder .finder__num { max-width: 220px; margin-inline: auto; text-align: center; }
.finder .finder__seg { justify-content: center; }
.finder .finder__results { justify-items: center; }
.finder .finder-card { flex-direction: column; align-items: center; text-align: center; width: 100%; }
.finder .finder-card__main { flex-direction: column; align-items: center; text-align: center; }
.finder .finder-card__badge { left: 50%; transform: translateX(-50%); }
.finder .finder-card__side { flex-direction: row; align-items: center; justify-content: center; text-align: center; }
.finder .finder__table > summary { text-align: center; }
.finder .finder__table .compare__table { text-align: left; }