/* ==========================================================================
   Coastline Charters of Miami — stylesheet

   Direction: white page, but graphic and loud. Flat cards with crisp edges and
   almost no shadow, punctuated by full-width blocks of saturated colour.
   Miami Vice palette: flamingo pink, aqua, sunset orange, violet.

   Section rhythm down the page:
     hero photo → gradient marquee → white → GRADIENT BLOCK → white
     → tint → white → INK BLOCK → white → tint → INK FOOTER
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — sampled straight out of the logo artwork.
     Logo uses exactly two colours: #fe298a and #019dc5. */
  --flamingo:      #fe298a;
  --flamingo-soft: #ffe5f1;
  --aqua:          #019dc5;
  --aqua-soft:     #e1f3f8;
  --sunset:        #ff8a4c;   /* supporting only — not in the logo */
  --violet:        #8b3dff;   /* gradient bridge — not in the logo */

  /* Brand — darkened so they clear 4.5:1 on white for text and icons.
     Change these whenever you change the two above. */
  --flamingo-ink:  #de2479;
  --aqua-ink:      #0181a2;
  --violet-ink:    #6d21e0;

  /* Neutrals */
  --ink-900: #0d0e22;
  --ink-800: #16173180;          /* unused alpha guard */
  --ink-700: #3b3d58;
  --ink-500: #6e7089;
  --ink-300: #9ea0b6;

  --paper:   #ffffff;
  --paper-2: #f4f7fb;
  --paper-3: #fdf5f0;

  /* Semantic — light context (the default) */
  --bg:         var(--paper);
  --bg-alt:     var(--paper-2);
  --surface:    #ffffff;
  --surface-2:  #f3f6fa;
  --border:     rgba(13, 14, 34, .14);
  --border-hi:  rgba(13, 14, 34, .30);
  --text:       var(--ink-900);
  --text-muted: var(--ink-700);
  --text-faint: var(--ink-500);
  --accent:     var(--flamingo);
  --accent-2:   var(--aqua);
  --rule:       var(--ink-900);   /* colour of decorative hairlines */

  --grad-brand:  linear-gradient(100deg, var(--flamingo) 0%, var(--violet) 48%, var(--aqua) 100%);
  --grad-sunset: linear-gradient(135deg, var(--sunset) 0%, var(--flamingo) 55%, var(--violet) 100%);
  /* wide gradient that can be animated by shifting background-position */
  --grad-wide:   linear-gradient(100deg, #ff2e93, #ff5fae, #8b3dff, #2aa8ff, #12c4b5, #8b3dff, #ff2e93);

  /* Flat design: shadows are rare and shallow. */
  --shadow-sm: 0 1px 2px rgba(13, 14, 34, .04);
  --shadow-md: 0 6px 18px -10px rgba(13, 14, 34, .22);
  --shadow-lg: 0 20px 44px -24px rgba(13, 14, 34, .32);

  /* Type */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* floor raised from 0.80rem: at phone widths this drives ~50 labels, chips
     and footer links, and 12.8px was below comfortable reading size */
  --step--1: clamp(0.84rem, 0.80rem + 0.14vw, 0.88rem);
  --step-0:  clamp(0.95rem, 0.91rem + 0.20vw, 1.06rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.45vw, 1.40rem);
  --step-2:  clamp(1.45rem, 1.25rem + 0.95vw, 2.05rem);
  --step-3:  clamp(1.90rem, 1.50rem + 1.90vw, 3.10rem);
  --step-4:  clamp(2.45rem, 1.70rem + 3.40vw, 4.60rem);
  --step-5:  clamp(3.00rem, 1.70rem + 5.80vw, 6.80rem);

  /* Space & shape — tighter radii than before: crisper, more graphic */
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --wrap: 1240px;
  --wrap-narrow: 820px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  --section-y: clamp(3.5rem, 6.5vw, 6.25rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--text);
}
p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--violet-ink);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--flamingo); color: #fff; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--flamingo), var(--violet), var(--aqua));
  border: 3px solid var(--paper-2);
  border-radius: 99px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--flamingo); color: #fff; padding: .75rem 1.25rem;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Layout helpers + colour-block contexts
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.75rem, 5vw, 4.25rem); }
.section--alt { background: var(--bg-alt); }

/* ░░ Saturated gradient block ░░ — flips every token to the dark context */
.section--bold {
  background: var(--grad-wide);
  background-size: 320% 100%;
  animation: drift 26s linear infinite alternate;
  color: #fff;
}
@keyframes drift { to { background-position: 100% 0; } }

/* ░░ Deep ink block ░░ */
.section--ink { background: var(--ink-900); color: #fff; }

/* Shared inversions for both dark contexts */
.section--bold, .section--ink {
  --surface:    rgba(255, 255, 255, .10);
  --surface-2:  rgba(255, 255, 255, .06);
  --border:     rgba(255, 255, 255, .28);
  --border-hi:  rgba(255, 255, 255, .60);
  --text:       #ffffff;
  --text-muted: rgba(255, 255, 255, .86);
  --text-faint: rgba(255, 255, 255, .68);
  --rule:       #ffffff;
}
.section--bold h1, .section--bold h2, .section--bold h3, .section--bold h4,
.section--ink  h1, .section--ink  h2, .section--ink  h3, .section--ink  h4 { color: #fff; }
.section--bold .eyebrow, .section--ink .eyebrow { color: #fff; }
.section--bold .eyebrow::before, .section--bold .eyebrow::after,
.section--ink  .eyebrow::before, .section--ink  .eyebrow::after { background: #fff; }
.section--bold .sec-head p, .section--ink .sec-head p { color: rgba(255, 255, 255, .88); }

.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sec-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sec-head.center { margin-inline: auto; }
.sec-head h2 { font-size: var(--step-3); margin-top: .7rem; }
.sec-head p { color: var(--text-muted); font-size: var(--step-1); margin-top: 1rem; line-height: 1.55; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body);
  font-size: var(--step--1); font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--aqua-ink);
}
.eyebrow::before {
  content: ""; width: 28px; height: 3px;
  background: var(--grad-brand);
}
.sec-head.center .eyebrow::after {
  content: ""; width: 28px; height: 3px; background: var(--grad-brand);
}

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.italic-accent { font-style: italic; font-family: var(--font-body); font-weight: 300; }

/* --------------------------------------------------------------------------
   4. Buttons & chips
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--grad-brand);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.7rem;
  min-height: 50px;
  border-radius: var(--r-pill);
  font-weight: 700; font-size: var(--step-0); letter-spacing: -0.01em;
  background: var(--btn-bg);
  color: #fff;
  position: relative; isolation: isolate; overflow: hidden;
  transition: transform .3s var(--ease), filter .3s var(--ease);
  white-space: nowrap;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-sunset); opacity: 0; transition: opacity .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 2px solid var(--ink-900);
}
.btn--ghost::after { background: var(--ink-900); }
.btn--ghost:hover { color: #fff; }
/* inside a colour block the ghost button inverts */
.section--bold .btn--ghost, .section--ink .btn--ghost { border-color: #fff; color: #fff; }
.section--bold .btn--ghost::after, .section--ink .btn--ghost::after { background: #fff; }
.section--bold .btn--ghost:hover, .section--ink .btn--ghost:hover { color: var(--ink-900); }

.btn--solid { background: #fff; color: var(--ink-900); }
.btn--solid::after { background: var(--ink-900); }
.btn--solid:hover { color: #fff; }

.btn--aqua { --btn-bg: linear-gradient(100deg, var(--aqua), #2aa8ff); }
.btn--aqua::after { background: linear-gradient(100deg, #0fd8c7, var(--aqua)); }

.btn--sm { padding: .62rem 1.15rem; min-height: 40px; font-size: var(--step--1); }
.btn--lg { padding: 1.1rem 2.1rem; min-height: 58px; font-size: var(--step-1); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }
/* long hero CTA ("Follow us on Instagram…") must wrap on phones, not overflow */
.hero .btn-row .btn { white-space: normal; text-align: center; max-width: 100%; }

.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .85rem;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1.5px solid var(--border);
  font-size: var(--step--1); font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.chip svg { width: 15px; height: 15px; flex: none; color: var(--aqua-ink); }
.chip strong { color: var(--text); font-weight: 800; }

.badge {
  display: inline-block; padding: .34rem .75rem;
  border-radius: var(--r-sm);
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: var(--grad-brand); color: #fff;
}
.badge--aqua { background: linear-gradient(100deg, var(--aqua), #2aa8ff); }

/* --------------------------------------------------------------------------
   5. Header / nav
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease),
              border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom: 2px solid transparent;
  padding-block: .85rem;
}
.site-header:not(.is-stuck) .brand__name,
.site-header:not(.is-stuck) .nav__contact { color: #fff; }
.site-header:not(.is-stuck) .nav__links > a:not(.btn) { color: rgba(255, 255, 255, .9); }
.site-header:not(.is-stuck) .nav__contact svg { color: #fff; }
.site-header:not(.is-stuck) .brand__sub { color: #8fdcef; }

.site-header.is-stuck {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--ink-900);
  padding-block: .5rem;
}
/* backdrop-filter turns the header into the containing block for its fixed
   children, which squashed the mobile drawer into the header bar once the page
   was scrolled. Drop it (instantly, no transition) while the menu is open so
   the drawer stays pinned to the full screen. */
body.is-locked .site-header {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: none;
}
body.is-locked .site-header.is-stuck { background: #fff; }
.nav { display: flex; align-items: center; gap: 1.25rem; }

.brand { display: flex; align-items: center; gap: .7rem; flex: none; min-height: 44px; }
.brand__mark {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--grad-brand);
}
.brand__mark svg { width: 24px; height: 24px; color: #fff; }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

/* Logo lockups.
   The image is sized directly rather than with height:100% — the tile is a
   grid whose row sizes to its content, so a percentage height there is
   cyclic and silently falls back to the image's intrinsic size. */

/* Mark on its own, no tile behind it — page headers, beside the wordmark */
.brand--logo-file .brand__mark {
  display: block; background: none; border-radius: 0;
  width: auto; height: auto;
}
.brand--logo-file .brand__mark img { width: auto; height: 44px; }

/* Full stacked lockup, type and all — the footer, where there is room */
.brand--full { gap: 0; }
.brand--full .brand__mark {
  display: block; background: none; border-radius: 0;
  width: auto; height: auto;
}
.brand--full .brand__mark img { width: auto; height: 104px; }
.brand--full .brand__text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 560px) {
  .brand--logo-file .brand__mark img { height: 36px; }
  .brand--full .brand__mark img { height: 84px; }
}

.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: -0.02em; color: var(--ink-900);
}
.brand__sub {
  font-size: .58rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--aqua-ink); margin-top: .3rem; font-weight: 800;
}

.nav__links { display: flex; align-items: center; gap: .1rem; margin-inline: auto; }
.nav__links > a:not(.btn) {
  padding: .5rem .8rem; position: relative;
  font-size: var(--step--1); font-weight: 650; color: var(--ink-700);
  transition: color .25s var(--ease);
}
/* animated underline instead of a pill — flatter, more graphic */
.nav__links > a:not(.btn)::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .15rem;
  height: 2px; background: var(--grad-brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__links > a:not(.btn):hover::after,
.nav__links > a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
.nav__links > a:not(.btn):hover { color: var(--ink-900); }
.site-header:not(.is-stuck) .nav__links > a:not(.btn):hover { color: #fff; }
.site-header:not(.is-stuck) .nav__links > a:not(.btn)::after { background: #fff; }
.nav__links .btn { display: none; }

.nav__cta { display: flex; align-items: center; gap: .6rem; flex: none; }
.nav__contact {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 800; font-size: var(--step--1); color: var(--ink-900);
  padding: .5rem;
  min-height: 44px; min-width: 44px;   /* icon-only on phones — keep it tappable */
}
.nav__contact svg { width: 17px; height: 17px; color: var(--aqua-ink); }
.nav__contact:hover { color: var(--flamingo-ink); }

/* Menu button.
   The bars are absolutely positioned from the centre rather than stacked with
   margins: a button carries the browser's own 1px 6px padding, which was
   squashing them off-centre, and rotating about a shared centre point is the
   only way the X closes cleanly. */
.nav__toggle {
  display: none;
  position: relative;
  width: 46px; height: 46px; flex: none;
  padding: 0;
  border-radius: 14px;
  border: 2px solid var(--ink-900);
  background: #fff;
  -webkit-tap-highlight-color: transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease),
              transform .15s var(--ease), box-shadow .3s var(--ease);
}
.nav__toggle span {
  position: absolute; left: 50%; top: 50%;
  width: 20px; height: 2px; margin: -1px 0 0 -10px;
  border-radius: 2px;
  background: var(--ink-900);
  transition: transform .4s var(--ease), opacity .2s var(--ease), background .3s var(--ease);
}
.nav__toggle span:nth-child(1) { transform: translateY(-6px); }
.nav__toggle span:nth-child(3) { transform: translateY(6px); }

/* presses should feel like something happened */
.nav__toggle:active { transform: scale(.92); }
@media (hover: hover) {
  .nav__toggle:hover { box-shadow: 0 0 0 4px rgba(13, 14, 34, .08); }
}

/* open: becomes a brand-gradient tile with a clean white X */
.nav__toggle[aria-expanded="true"] {
  background: var(--grad-brand);
  border-color: transparent;
}
.nav__toggle[aria-expanded="true"] span { background: #fff; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* dimmed backdrop behind the open drawer, which is also somewhere to tap to
   dismiss. Sits inside the header's stacking context so it covers the page
   but stays behind the drawer and the button itself. */
.site-header:has(.nav__links.is-open)::after {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background: rgba(13, 14, 34, .5);
  backdrop-filter: blur(3px);
  animation: scrim .3s var(--ease);
}
@keyframes scrim { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1100px) {
  .nav__links {
    /* 80vw rather than 86vw: leaves a usable strip of backdrop to tap on */
    position: fixed; inset: 0 0 0 auto; width: min(80vw, 340px);
    flex-direction: column; align-items: stretch; justify-content: center;
    gap: .2rem; padding: 5rem 1.6rem 2rem;
    background: #fff;
    border-left: 3px solid var(--ink-900);
    transform: translateX(100%);
    transition: transform .45s var(--ease);
    overflow-y: auto;
  }
  .nav__links.is-open { transform: translateX(0); }
  .site-header:not(.is-stuck) .nav__links > a:not(.btn) { color: var(--ink-700); }
  .site-header:not(.is-stuck) .nav__links > a:not(.btn):hover { color: var(--ink-900); }
  .site-header:not(.is-stuck) .nav__links > a:not(.btn)::after { background: var(--grad-brand); }
  .nav__links > a:not(.btn) { padding: .9rem 0; font-size: var(--step-1); font-family: var(--font-display); }
  .nav__links > a:not(.btn)::after { left: 0; right: 0; bottom: .45rem; }
  .nav__links .btn { display: inline-flex; margin-top: 1.25rem; }
  .nav__toggle { display: block; order: 3; }
  .nav__cta { margin-left: auto; }
  .nav__cta .btn { display: none; }
}
/* Below 1100px the "Check availability" button is hidden, so WhatsApp becomes
   the one action in the header. Give it the same tile footprint as the menu
   button so the two read as a pair, and fill it with the brand gradient so it
   is clearly the thing to press. Above 1100px it stays a quiet text link —
   two gradient pills side by side would just fight each other. */
@media (max-width: 1100px) {
  .nav__contact {
    width: 46px; height: 46px; padding: 0;
    border-radius: 14px;
    background: var(--grad-brand);
    color: #fff;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s var(--ease), box-shadow .3s var(--ease);
  }
  .nav__contact span { display: none; }
  .nav__contact svg,
  .site-header:not(.is-stuck) .nav__contact svg { width: 24px; height: 24px; color: #fff; }
  .nav__contact:active { transform: scale(.92); }
}
@media (max-width: 1100px) and (hover: hover) {
  .nav__contact:hover { box-shadow: 0 0 0 4px rgba(254, 41, 138, .22); }
}
/* Below ~470px the brand wordmark, the WhatsApp link and the menu button no
   longer fit on one row and the menu button was being pushed off-screen.
   The logo mark alone carries the brand at this size. */
@media (max-width: 470px) {
  .nav { gap: .5rem; }
  .site-header .brand__text { display: none; }
}

/* --------------------------------------------------------------------------
   6. Hero  (unchanged in structure — photo, big type, stat strip)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: grid; align-items: end;
  padding-top: 7rem;
  padding-bottom: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
/* Top-down hero shot: the boat sits around 42% across and 55% down, so the
   crop is anchored there. On wide screens only the vertical is cropped; on
   phones the image is cropped hard horizontally, hence the different x. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
@media (max-width: 900px) { .hero__media img { object-position: 34% 55%; } }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(8, 10, 28, .62) 0%,
      rgba(8, 10, 28, .22) 26%,
      rgba(8, 10, 28, .40) 58%,
      rgba(8, 10, 28, .26) 76%,
      rgba(255, 255, 255, .30) 90%,
      rgba(255, 255, 255, .88) 97%,
      #ffffff 100%),
    linear-gradient(95deg, rgba(8, 10, 28, .42) 0%, transparent 58%);
}

.hero__ghost {
  position: absolute; z-index: -1;
  top: 15%; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(9rem, 30vw, 27rem);
  line-height: .78; letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .20);
  pointer-events: none; user-select: none;
  white-space: nowrap;
}

.hero__inner { position: relative; display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.hero .eyebrow, .vhero .eyebrow {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
.hero .eyebrow::before, .hero .eyebrow::after,
.vhero .eyebrow::before, .vhero .eyebrow::after {
  background: linear-gradient(90deg, #ff76bd, #5ef3e6);
}
.hero__title {
  font-size: var(--step-5);
  letter-spacing: -0.04em;
  max-width: 17ch;
  color: #fff;
  text-shadow: 0 10px 50px rgba(0, 0, 0, .45);
}
.hero__title .grad-text {
  background: linear-gradient(100deg, #ff76bd 0%, #c79bff 45%, #5ef3e6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__title .italic-accent { font-size: .92em; }
.hero__lede {
  max-width: 48ch; color: rgba(255, 255, 255, .93);
  font-size: var(--step-1); margin-top: 1.4rem; line-height: 1.55;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.hero__actions { margin-top: 2rem; }
.hero .btn--ghost { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.hero .btn--ghost::after { background: #fff; }
.hero .btn--ghost:hover { color: var(--ink-900); }

.hero__bottom {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr auto;
  align-items: end;
}
@media (max-width: 900px) { .hero__bottom { grid-template-columns: 1fr; } }

.hero__stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 2px solid var(--ink-900);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}
.hero__stats div { padding: 1.1rem 1.25rem; border-left: 2px solid var(--ink-900); }
.hero__stats div:first-child { border-left: 0; }
.hero__stats dt { font-size: var(--step--1); color: var(--ink-500); letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.hero__stats dd { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; margin-top: .3rem; color: var(--ink-900); }
@media (max-width: 720px) {
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .hero__stats div:nth-child(3) { border-left: 0; }
  .hero__stats div:nth-child(n+3) { border-top: 2px solid var(--ink-900); }
}
/* On a phone the hero was 942px against an 844px viewport, so the stat strip
   was cut off at the fold and sat under the sticky bar. Trim it to fit. */
@media (max-width: 820px) {
  .hero {
    min-height: 0;
    padding-top: 5.5rem;
    padding-bottom: 5.25rem;   /* clears the sticky bar */
  }
  .hero__inner { gap: 1.5rem; }
  .hero__title { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .hero__lede { font-size: var(--step-0); margin-top: 1rem; }
  .hero__actions { margin-top: 1.4rem; }
  .hero__stats dd { font-size: var(--step-1); }
  .hero__stats div { padding: .8rem .9rem; }
  .hero__stats dt { font-size: .68rem; }
}

.scroll-cue {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-500); font-weight: 800;
  writing-mode: vertical-rl;
  padding: .5rem 0;
}
.scroll-cue::after {
  content: ""; width: 3px; height: 56px;
  background: linear-gradient(var(--flamingo), var(--aqua), transparent);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0%, 100% { opacity: .3; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
@media (max-width: 900px) { .scroll-cue { display: none; } }

/* --------------------------------------------------------------------------
   7. Marquee — now a solid gradient band
   -------------------------------------------------------------------------- */
.marquee {
  background: var(--grad-wide);
  background-size: 320% 100%;
  animation: drift 26s linear infinite alternate;
  overflow: hidden; padding-block: 1rem;
}
.marquee__track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; }
.marquee__group span {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--step--1); font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
}
.marquee__group span svg { width: 16px; height: 16px; color: #fff; flex: none; }
.marquee__group i { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .7; flex: none; }
@keyframes slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   8. Fleet cards — flat, bordered, no float
   -------------------------------------------------------------------------- */
.fleet { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.vcard {
  position: relative;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 2px solid var(--ink-900);
  padding: .6rem .6rem 1.4rem;
  transition: transform .35s var(--ease), background .35s var(--ease);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.vcard:hover { transform: translateY(-5px); }
.vcard:hover .vcard__img img { transform: scale(1.06); }
/* colour wash on hover instead of a shadow bloom */
.vcard::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: var(--grad-brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.vcard:hover::after { transform: scaleX(1); }

.vcard__media {
  position: relative; border-radius: calc(var(--r-xl) - 6px); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--surface-2);
}
.vcard__img { position: absolute; inset: 0; }
.vcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.vcard__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,10,28,.26) 0%, transparent 38%, rgba(8,10,28,.70) 100%);
}
.vcard__tag { position: absolute; top: .8rem; left: .8rem; z-index: 2; }
.vcard__price {
  position: absolute; right: .9rem; bottom: .8rem; z-index: 2;
  text-align: right; line-height: 1.1; color: #fff;
}
.vcard__price small { display: block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85); font-weight: 800; }
.vcard__price b { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; }

.vcard__body { padding: 1.35rem .9rem 0; display: flex; flex-direction: column; flex: 1; }
.vcard__head { display: flex; align-items: flex-start; gap: .75rem; justify-content: space-between; }
.vcard__name { font-size: var(--step-2); letter-spacing: -0.03em; }
.vcard__make { color: var(--ink-500); font-size: var(--step--1); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-top: .45rem; }
.vcard__loc { display: inline-flex; align-items: center; gap: .4rem; color: var(--aqua-ink); font-size: var(--step--1); font-weight: 800; margin-top: .75rem; }
.vcard__loc svg { width: 15px; height: 15px; }
.vcard__desc { color: var(--text-muted); margin-top: 1rem; font-size: var(--step-0); }
.vcard__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.vcard__foot { margin-top: auto; padding-top: 1.5rem; display: flex; gap: .7rem; }
.vcard__foot .btn { flex: 1; }

/* --------------------------------------------------------------------------
   9. Experience tiles — flat, hairline grid
   -------------------------------------------------------------------------- */
.exp-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
@media (min-width: 980px) { .exp-grid { grid-template-columns: repeat(4, 1fr); } }
.exp {
  position: relative; padding: 1.7rem 1.5rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 2px solid var(--ink-900);
  overflow: hidden;
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.exp::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: var(--grad-brand); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.exp:hover { transform: translateY(-5px); }
.exp:hover::after { transform: scaleX(1); }
.exp__icon {
  width: 48px; height: 48px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--flamingo); color: #fff; margin-bottom: 1.1rem;
}
.exp__icon svg { width: 23px; height: 23px; }
.exp:nth-child(2) .exp__icon { background: var(--aqua); }
.exp:nth-child(3) .exp__icon { background: var(--violet); }
.exp:nth-child(4) .exp__icon { background: var(--sunset); }
.exp:nth-child(5) .exp__icon { background: #2aa8ff; }
.exp h3 { font-size: var(--step-1); }
.exp p { color: var(--text-muted); font-size: var(--step-0); margin-top: .6rem; }

/* Inside a colour block the near-black border reads as a hole punched in the
   gradient, and the solid brand icon tiles vanish against their own colour.
   Flip the card to translucent white and the icon tiles to white-on-ink. */
.section--bold .exp,
.section--ink .exp {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .5);
}
.section--bold .exp:hover,
.section--ink .exp:hover { border-color: #fff; }
.section--bold .exp::after,
.section--ink .exp::after { background: #fff; }
.section--bold .exp .exp__icon,
.section--ink .exp .exp__icon {
  background: #fff;
  color: var(--ink-900);
}

/* --------------------------------------------------------------------------
   10. Pricing
   -------------------------------------------------------------------------- */
.price-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: stretch; }
.price-card {
  position: relative; border-radius: var(--r-lg);
  border: 2px solid var(--ink-900);
  background: var(--surface);
  padding: 1.9rem 1.7rem;
  display: flex; flex-direction: column; gap: 1.2rem;
  transition: transform .35s var(--ease);
}
.price-card:hover { transform: translateY(-5px); }
/* the headline plan is a solid gradient block */
.price-card--feature {
  border-color: transparent;
  background: var(--grad-wide);
  background-size: 320% 100%;
  animation: drift 26s linear infinite alternate;
  color: #fff;
}
.price-card--feature h3,
.price-card--feature .price-card__amt b { color: #fff; }
.price-card--feature .price-card__sub { color: rgba(255,255,255,.82); }
.price-card--feature .price-card__amt span { color: rgba(255,255,255,.82); }
.price-card--feature .price-list li { color: rgba(255,255,255,.94); }
.price-card--feature .price-list svg { color: #fff; }
.price-card--feature .badge { background: #fff; color: var(--ink-900); }
.price-card--feature .btn { background: #fff; color: var(--ink-900); }
.price-card--feature .btn::after { background: var(--ink-900); }
.price-card--feature .btn:hover { color: #fff; }

.price-card__flag { position: absolute; top: -11px; left: 1.7rem; }
.price-card h3 { font-size: var(--step-1); }
.price-card__sub { color: var(--ink-500); font-size: var(--step--1); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-top: .4rem; }
/* Two boats, two prices per package. Split the figure in half rather than
   duplicating the whole section per boat. */
.price-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 2px solid var(--ink-900); border-radius: var(--r-md);
  overflow: hidden;
}
.price-pair div { padding: .8rem .9rem; }
.price-pair div + div { border-left: 2px solid var(--ink-900); }
.price-pair small {
  display: block; font-size: var(--step--1); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500);
  white-space: nowrap;
}
.price-pair b {
  display: block; margin-top: .2rem;
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 600;
  letter-spacing: -0.03em; color: var(--ink-900);
}
/* inside the gradient card the dark rules and ink text have to flip */
.price-card--feature .price-pair { border-color: rgba(255, 255, 255, .55); }
.price-card--feature .price-pair div + div { border-left-color: rgba(255, 255, 255, .55); }
.price-card--feature .price-pair small { color: rgba(255, 255, 255, .8); }
.price-card--feature .price-pair b { color: #fff; }
@media (max-width: 380px) {
  .price-pair div { padding: .7rem .6rem; }
  .price-pair b { font-size: var(--step-1); }
}

.price-card__amt { display: flex; align-items: baseline; gap: .4rem; }
.price-card__amt b { font-family: var(--font-display); font-size: var(--step-4); font-weight: 600; letter-spacing: -0.04em; color: var(--ink-900); }
.price-card__amt span { color: var(--ink-500); font-size: var(--step-0); white-space: nowrap; }
.price-list { list-style: none; padding: 0; display: grid; gap: .7rem; }
/* `grid` not `flex`: a flex container turns stray text nodes and inline tags
   into separate items, which shreds any bullet containing <em>/<strong>. */
.price-list li {
  display: grid; grid-template-columns: 18px 1fr; gap: .65rem;
  align-items: start; font-size: var(--step-0); color: var(--text-muted);
}
.price-list svg { width: 18px; height: 18px; flex: none; color: var(--aqua-ink); margin-top: 3px; }
.price-card .btn { margin-top: auto; }

/* add-ons: one hairline grid rather than six floating boxes */
.addons {
  display: grid; gap: 0; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border: 2px solid var(--ink-900); border-radius: var(--r-lg); overflow: hidden;
}
@media (min-width: 880px) { .addons { grid-template-columns: repeat(3, 1fr); } }
.addon {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.2rem;
  border-right: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border);
  font-size: var(--step-0); color: var(--text-muted);
  transition: background .25s var(--ease);
}
.addon:hover { background: var(--surface-2); }
.addon b { font-family: var(--font-display); font-weight: 600; color: var(--flamingo-ink); white-space: nowrap; }

/* single highlighted add-on */
/* Instagram free-hour offer: gradient-bordered card on the dark section */
.free-hour {
  position: relative; max-width: 40rem; margin: 1.75rem auto 0;
  padding: 2rem 1.75rem 1.6rem; border-radius: var(--r-lg); text-align: center;
  background:
    linear-gradient(var(--ink-900), var(--ink-900)) padding-box,
    var(--grad-brand) border-box;
  border: 3px solid transparent;
  box-shadow: 0 0 40px rgba(254, 41, 138, .35), 0 0 80px rgba(1, 157, 197, .2);
}
.free-hour__badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -55%);
  padding: .45rem 1.1rem; border-radius: 999px; background: var(--grad-brand);
  color: #fff; font-weight: 800; font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .12em; white-space: nowrap;
}
.section--ink .sec-head .free-hour__title {
  margin: 0; color: #fff; font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.02em;
}
.section--ink .sec-head .free-hour__text { margin-top: .75rem; color: rgba(255, 255, 255, .92); }
.free-hour__fine {
  display: block; margin-top: .6rem; color: #fff; font-weight: 800;
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .12em;
}
.free-hour__text a { color: #fff; font-weight: 800; text-decoration: underline; text-decoration-color: var(--flamingo); text-underline-offset: 3px; overflow-wrap: anywhere; }

.deal {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  margin-top: 2rem; padding: 1.4rem 1.6rem;
  border: 2px solid var(--ink-900); border-radius: var(--r-lg);
  background: var(--surface);
}
.deal__icon {
  width: 52px; height: 52px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--grad-brand); color: #fff;
}
.deal__icon svg { width: 26px; height: 26px; }
.deal__text { flex: 1 1 14rem; }
.deal__text h3 { font-size: var(--step-1); }
.deal__text p { color: var(--text-muted); font-size: var(--step-0); margin-top: .25rem; }
.deal__price { flex: none; text-align: right; line-height: 1.15; }
.deal__price s { color: var(--ink-300); font-size: var(--step-0); margin-right: .45rem; }
.deal__price b {
  font-family: var(--font-display); font-size: var(--step-3); font-weight: 600;
  letter-spacing: -0.04em; color: var(--flamingo-ink);
}
.deal__price small {
  display: block; color: var(--ink-500); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .12em; font-weight: 800;
}
@media (max-width: 560px) {
  .deal { gap: 1rem; }
  .deal__price { text-align: left; width: 100%; }
}

/* "neither boat is right" catch-all, below the rates.
   Gradient-bordered so it reads as an offer, not another rate card. */
.helper {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  margin-top: 2rem; padding: 1.75rem 1.85rem;
  border-radius: var(--r-lg);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad-brand) border-box;
  border: 2px solid transparent;
}
.helper__icon {
  width: 54px; height: 54px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--grad-brand); color: #fff;
}
.helper__icon svg { width: 26px; height: 26px; }
.helper__text { flex: 1 1 18rem; min-width: 0; }
.helper__text h3 { font-size: var(--step-1); }
.helper__text p { color: var(--text-muted); font-size: var(--step-0); margin-top: .45rem; max-width: 62ch; }
.helper .btn { flex: none; }
@media (max-width: 760px) {
  .helper { gap: 1.1rem; padding: 1.4rem 1.25rem; }
  .helper .btn { width: 100%; }
}

.note {
  margin-top: 1.6rem; padding: 1rem 1.25rem;
  border-left: 5px solid var(--aqua);
  background: var(--aqua-soft);
  color: var(--ink-700); font-size: var(--step--1);
}
.note a { color: var(--aqua-ink); font-weight: 700; text-decoration: underline; }
/* a cost the guest pays someone else — flagged warm so it is not missed */
.note--warn { border-left-color: var(--sunset); background: #fff1e8; margin-top: .8rem; }
.section--bold .note, .section--ink .note {
  background: rgba(255,255,255,.12); border-left-color: #fff; color: rgba(255,255,255,.9);
}
.section--bold .note a, .section--ink .note a { color: #fff; }

/* --------------------------------------------------------------------------
   11. Steps
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: s; }
.step {
  position: relative; padding: 1.7rem 1.5rem; border-radius: var(--r-lg);
  background: var(--surface); border: 2px solid var(--ink-900);
}
.step::before {
  counter-increment: s; content: "0" counter(s);
  font-family: var(--font-display); font-size: var(--step-3); font-weight: 700;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin-bottom: .6rem; line-height: 1;
}
.step h3 { font-size: var(--step-1); }
.step p { color: var(--text-muted); margin-top: .5rem; }

/* --------------------------------------------------------------------------
   12. About / split
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split--reverse .split__media { order: 2; }
@media (max-width: 900px) { .split--reverse .split__media { order: 0; } }

.split__media { position: relative; }
.split__media img {
  width: 100%; border-radius: var(--r-xl);
  aspect-ratio: 4 / 3; object-fit: cover;
  border: 2px solid var(--ink-900);
}
/* hard offset colour block behind the photo, instead of a soft glow */
.split__media::before {
  content: ""; position: absolute; inset: 26px -26px -26px 26px; z-index: -1;
  border-radius: var(--r-xl); background: var(--grad-brand);
}
.float-card {
  position: absolute; right: -16px; top: -20px;
  background: #fff;
  border: 2px solid var(--ink-900); border-radius: var(--r-lg);
  padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: .9rem; max-width: 80%;
}
.float-card b { font-family: var(--font-display); font-size: var(--step-2); display: block; line-height: 1; color: var(--ink-900); }
.float-card small { color: var(--ink-500); font-size: var(--step--1); }
.float-card__icon { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--grad-brand); color: #fff; flex: none; }
.float-card__icon svg { width: 20px; height: 20px; }

.tick-list { list-style: none; padding: 0; display: grid; gap: .85rem; margin-top: 1.75rem; }
.tick-list li { display: flex; gap: .75rem; align-items: flex-start; color: var(--text-muted); }
.tick-list svg { width: 20px; height: 20px; flex: none; color: var(--aqua-ink); margin-top: 3px; }
.tick-list strong { color: var(--text); font-weight: 800; }

/* --------------------------------------------------------------------------
   13b. Instagram grid
   -------------------------------------------------------------------------- */
/* Container for the live Behold feed. Behold exposes its own CSS custom
   properties for theming — see their docs — so only layout is set here. */
.ig-live { width: 100%; }
.ig-live:empty { min-height: 0; }

.ig-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(4, 1fr);
}
.ig-grid[hidden], .ig-live[hidden] { display: none; }
@media (max-width: 760px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }

.ig-tile {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  border: 2px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .06);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.ig-tile:hover { transform: translateY(-5px); border-color: #fff; }
.ig-tile:hover img { transform: scale(1.07); }

.ig-tile__hover {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(254, 41, 138, .72), rgba(139, 61, 255, .62));
  color: #fff; opacity: 0;
  transition: opacity .35s var(--ease);
}
.ig-tile:hover .ig-tile__hover,
.ig-tile:focus-visible .ig-tile__hover { opacity: 1; }
.ig-tile__hover svg { width: 34px; height: 34px; }

/* --------------------------------------------------------------------------
   14. Reviews  (section removed from the page; styles kept so the markup can
       be dropped back in once there are real testimonials)
   -------------------------------------------------------------------------- */
.reviews { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.review {
  padding: 1.7rem 1.6rem; border-radius: var(--r-lg);
  background: var(--surface); border: 2px solid var(--border-hi);
  display: flex; flex-direction: column; gap: 1.1rem;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.review:hover { transform: translateY(-5px); border-color: #fff; }
.stars { display: flex; gap: .2rem; color: var(--sunset); }
.stars svg { width: 18px; height: 18px; }
.review blockquote { font-size: var(--step-1); line-height: 1.5; letter-spacing: -0.015em; color: var(--text); }
.review footer { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem;
  background: var(--grad-brand); color: #fff;
}
.review footer b { display: block; font-size: var(--step-0); color: var(--text); }
.review footer small { color: var(--text-faint); font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 0; border-top: 2px solid var(--ink-900); }
.faq details {
  border-bottom: 2px solid var(--ink-900);
  background: transparent;
  transition: background .3s var(--ease);
}
.faq details[open] { background: var(--surface-2); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.25rem 3.25rem 1.25rem 1rem;
  font-family: var(--font-display); font-weight: 500; font-size: var(--step-1);
  letter-spacing: -0.02em; position: relative; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.1rem; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2.5px solid var(--flamingo-ink); border-bottom: 2.5px solid var(--flamingo-ink);
  transform: rotate(45deg); transition: transform .35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq summary:hover { color: var(--flamingo-ink); }
.faq__body { padding: 0 1rem 1.4rem; color: var(--text-muted); max-width: 72ch; }

/* --------------------------------------------------------------------------
   16. Contact list
   -------------------------------------------------------------------------- */
.contact-list { display: grid; gap: 0; margin-top: 2rem; border-top: 2px solid var(--ink-900); }
.contact-row {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem .25rem;
  border-bottom: 2px solid var(--ink-900);
  transition: padding-left .3s var(--ease), background .3s var(--ease);
}
a.contact-row:hover { padding-left: 1rem; background: var(--surface-2); }
.contact-row__icon {
  width: 44px; height: 44px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; background: var(--grad-brand); color: #fff;
}
.contact-row:nth-child(2) .contact-row__icon { background: var(--aqua); }
.contact-row:nth-child(3) .contact-row__icon { background: var(--violet); }
.contact-row:nth-child(4) .contact-row__icon { background: var(--sunset); }
.contact-row__icon svg { width: 21px; height: 21px; }
.contact-row small { display: block; color: var(--ink-500); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.contact-row b {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1);
  letter-spacing: -0.02em; color: var(--ink-900);
  /* long email and street addresses must wrap rather than run off a phone */
  overflow-wrap: anywhere; word-break: break-word;
}
.contact-row > span:last-child { min-width: 0; }
@media (max-width: 560px) {
  .contact-row b { font-size: var(--step-0); }
  .contact-row { gap: .8rem; padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   17. Footer (ink block) + sticky mobile bar
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-900);
  color: #fff;
  padding-block: clamp(3rem, 6vw, 5rem) 7rem;
  position: relative;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 8px;
  background: var(--grad-wide); background-size: 320% 100%;
  animation: drift 26s linear infinite alternate;
}
@media (min-width: 821px) { .site-footer { padding-bottom: clamp(2rem, 4vw, 3rem); } }
.site-footer .brand { padding-block: .4rem; min-height: 44px; }
.site-footer .brand__name { color: #fff; }
.site-footer .brand__sub { color: #8fdcef; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* Single-column footer ran to almost two phone screens. Keep the link lists
   side by side and let the about block span the full width above them. */
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 360px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { font-size: var(--step-0); letter-spacing: .14em; text-transform: uppercase; color: #8fdcef; font-family: var(--font-body); font-weight: 800; margin-bottom: 1rem; }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.footer-grid a {
  color: rgba(255,255,255,.78); font-size: var(--step-0);
  transition: color .25s var(--ease);
  overflow-wrap: anywhere;
}
/* Footer links were 19px tall — too small to tap reliably. Pad them out. */
@media (max-width: 820px) {
  .footer-grid ul { gap: 0; }
  .footer-grid li a { display: block; padding-block: .62rem; }
  .footer-grid { gap: 1.75rem; }
}
.footer-grid a:hover { color: #ff76bd; }
.footer-about p { color: rgba(255,255,255,.78); margin-top: 1.1rem; max-width: 40ch; font-size: var(--step-0); }
.socials { display: flex; gap: .6rem; margin-top: 1.4rem; }
.socials a {
  width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: transparent; border: 2px solid rgba(255,255,255,.3); color: #fff;
  transition: all .3s var(--ease);
}
.socials a:hover { background: var(--grad-brand); border-color: transparent; transform: translateY(-3px); }
.socials svg { width: 19px; height: 19px; }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.75rem; border-top: 2px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  color: rgba(255,255,255,.55); font-size: var(--step--1);
}

.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: .6rem; padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 3px solid var(--ink-900);
}
.mobile-bar .btn { flex: 1; }
.mobile-bar__alt { flex: 0 0 auto !important; padding-inline: 1.25rem; }
.mobile-bar__main { flex: 1 1 auto !important; }
@media (max-width: 820px) { .mobile-bar { display: flex; } }
@media (max-width: 360px) {
  .mobile-bar__main { font-size: var(--step--1); padding-inline: 1rem; }
}

/* --------------------------------------------------------------------------
   18. Vessel detail page
   -------------------------------------------------------------------------- */
.vhero {
  position: relative; min-height: min(84svh, 800px);
  display: grid; align-items: end; padding-top: 8rem; padding-bottom: clamp(2rem, 5vw, 3.5rem);
  overflow: hidden; isolation: isolate;
}
.vhero__media { position: absolute; inset: 0; z-index: -2; }
.vhero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.vhero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(8,10,28,.64) 0%, rgba(8,10,28,.20) 26%, rgba(8,10,28,.44) 62%,
    rgba(8,10,28,.28) 80%, rgba(255,255,255,.32) 92%,
    rgba(255,255,255,.90) 98%, #ffffff 100%);
}
.vhero h1 { font-size: var(--step-4); margin-top: .8rem; color: #fff; text-shadow: 0 10px 50px rgba(0,0,0,.45); }
.vhero__sub {
  color: rgba(255,255,255,.93); font-size: var(--step-1);
  margin-top: .9rem; max-width: 52ch; text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.vhero__row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.vhero .chip { background: rgba(255,255,255,.95); border-color: #fff; color: var(--ink-700); }
.vhero .btn--ghost { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.vhero .btn--ghost::after { background: #fff; }
.vhero .btn--ghost:hover { color: var(--ink-900); }

.breadcrumb { display: flex; align-items: center; gap: .4rem; font-size: var(--step--1); color: rgba(255,255,255,.78); font-weight: 600; flex-wrap: wrap; }
.breadcrumb a { padding: .7rem .5rem; margin-inline: -.5rem; }  /* 22px tall was too small to tap */
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb span { opacity: .55; }

.spec-grid {
  display: grid; gap: 0;
  border: 2px solid var(--ink-900); border-radius: var(--r-lg); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.spec {
  background: var(--surface); padding: 1.4rem 1.3rem;
  border-right: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border);
}
.spec dt { font-size: var(--step--1); color: var(--ink-500); letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.spec dd { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; margin-top: .4rem; letter-spacing: -0.03em; color: var(--ink-900); }

.amenities {
  display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border: 2px solid var(--ink-900); border-radius: var(--r-lg); overflow: hidden;
}
.amenity {
  display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem;
  border-right: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border);
  font-size: var(--step-0); color: var(--text-muted);
  transition: background .25s var(--ease);
}
.amenity:hover { background: var(--surface-2); }
.amenity svg { width: 18px; height: 18px; color: var(--aqua-ink); flex: none; }

/* Gallery */
.gallery { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: 200px; }
.gallery button {
  position: relative; overflow: hidden; border-radius: var(--r-md); padding: 0;
  border: 2px solid var(--ink-900); background: var(--surface-2);
  transition: transform .35s var(--ease);
}
.gallery button img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.gallery button::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(255,46,147,.35), transparent 60%);
  opacity: 0; transition: opacity .3s var(--ease);
}
.gallery button:hover { transform: scale(1.02); z-index: 2; }
.gallery button:hover img { transform: scale(1.07); }
.gallery button:hover::after { opacity: 1; }
.gallery button.is-wide { grid-column: span 2; }
.gallery button.is-tall { grid-row: span 2; }
@media (max-width: 640px) {
  .gallery { grid-auto-rows: 150px; grid-template-columns: repeat(2, 1fr); }
  .gallery button.is-wide { grid-column: span 2; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(253, 253, 255, .97); backdrop-filter: blur(12px);
  padding: clamp(1rem, 4vw, 3rem);
  place-items: center;
}
.lightbox.is-open { display: grid; }
.lightbox img {
  max-width: 100%; max-height: calc(100svh - 7rem);
  border-radius: var(--r-md); border: 2px solid var(--ink-900);
  object-fit: contain;
}
.lightbox__count {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  font-size: var(--step--1); color: var(--ink-500); letter-spacing: .14em; font-weight: 800;
}
.lb-btn {
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-900);
  background: #fff; border: 2px solid var(--ink-900);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.lb-btn:hover { background: var(--grad-brand); border-color: transparent; color: #fff; }
.lb-btn svg { width: 22px; height: 22px; }
.lb-close { top: 1.2rem; right: 1.2rem; }
.lb-prev { left: clamp(.6rem, 2vw, 2rem); top: 50%; margin-top: -26px; }
.lb-next { right: clamp(.6rem, 2vw, 2rem); top: 50%; margin-top: -26px; }

/* CTA band — full colour block */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl); padding: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center; color: #fff;
  background: var(--grad-wide); background-size: 320% 100%;
  animation: drift 26s linear infinite alternate;
}
.cta-band h2 { font-size: var(--step-3); color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); font-size: var(--step-1); margin-top: 1rem; max-width: 52ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 2rem; }
.cta-band .btn { background: #fff; color: var(--ink-900); }
.cta-band .btn::after { background: var(--ink-900); }
.cta-band .btn:hover { color: #fff; }
.cta-band .btn--ghost { background: transparent; border: 2px solid #fff; color: #fff; }
.cta-band .btn--ghost::after { background: #fff; }
.cta-band .btn--ghost:hover { color: var(--ink-900); }

/* --------------------------------------------------------------------------
   18b. Phone density
   The page runs to roughly sixteen phone screens, so every section carries a
   little less air and the cards a little less padding on small viewports.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .section { padding-block: 3rem; }
  .section--tight { padding-block: 2.25rem; }

  .sec-head { margin-bottom: 1.75rem; }
  .sec-head p { font-size: var(--step-0); margin-top: .7rem; }

  /* shorter card images free up most of the saving */
  .vcard { padding: .5rem .5rem 1.1rem; }
  .vcard__media { aspect-ratio: 3 / 2; }
  .vcard__body { padding: 1.1rem .7rem 0; }
  .vcard__desc { margin-top: .75rem; }
  .vcard__chips { margin-top: .9rem; }
  .vcard__foot { padding-top: 1.1rem; }

  .price-card { padding: 1.5rem 1.35rem; gap: 1rem; }
  .exp { padding: 1.4rem 1.25rem; }
  .step { padding: 1.4rem 1.25rem; }
  .review { padding: 1.4rem 1.25rem; }
  .split { gap: 2.5rem; }
  .faq summary { padding: 1.05rem 2.75rem 1.05rem .9rem; }
  .faq__body { padding: 0 .9rem 1.1rem; }
  .cta-band { padding: 2rem 1.4rem; }
}

/* --------------------------------------------------------------------------
   19. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .mobile-bar, .hero__media, .marquee, .lightbox { display: none !important; }
  .section--bold, .section--ink, .site-footer, .cta-band,
  .price-card--feature { background: #fff !important; color: #000 !important; animation: none !important; }
  .btn { border: 1px solid #000; color: #000; background: none; }
}