/* ============================================================
   LUXSEA MIAMI
   Palette taken from the owner's logo: navy hull, turquoise water, amber sun,
   on pure white. Navy carries structure and ink, turquoise carries anything
   interactive, and amber stays on dark grounds — the same division of labour
   the badge itself uses.
   ============================================================ */

/* Verified to serve both families at all four weights before committing: a font
   CDN that is missing a requested weight will quietly hand back something else,
   or nothing, and the page falls to Georgia without ever erroring. 600 alone
   appears in twelve components here, so no weight is left to synthesis. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Taken from the owner's logo: navy hull and wordmark, turquoise water,
     amber sun. Navy grounds and ink, turquoise for anything interactive, amber
     reserved for dark grounds where it can be bright without losing contrast —
     which is exactly how the logo itself spends it. */

  /* Ground — pure white. The colour belongs to the brand, not the paper. */
  --bg:          oklch(1 0 0);
  --surface:     oklch(0.973 0.008 220);   /* faint navy tint, never cream */
  --line:        oklch(0.903 0.014 225);

  /* Ink — the logo's navy */
  --ink:         oklch(0.245 0.048 252);   /* 11.6:1 on white */
  --muted:       oklch(0.478 0.032 245);   /* 4.8:1 on white */
  --shell:       oklch(0.976 0.006 80);    /* text on dark grounds */
  --shell-dim:   oklch(0.852 0.016 215);

  /* Sun — the amber in the badge. Bright, so it lives on navy and turquoise. */
  --sun:         oklch(0.755 0.145 64);
  --sun-hi:      oklch(0.878 0.098 74);    /* highlight on navy grounds */

  /* Water — turquoise, and the interactive colour: fills, links, icons. Held at
     this lightness so white text on it clears 4.5:1. */
  --ember:       oklch(0.525 0.098 200);
  --ember-d:     oklch(0.450 0.088 201);   /* pressed */

  /* Hull — the anchor */
  --bay:         oklch(0.285 0.058 252);
  --bay-deep:    oklch(0.205 0.050 254);
  --bay-mid:     oklch(0.400 0.062 250);

  /* Type */
  /* No serif anywhere. Archivo Narrow is the condensed grotesque of hull and
     port lettering; it also buys real width back, which matters because the
     Spanish runs about a fifth longer than the English on every heading. Outfit
     is the geometric that echoes the wide BOAT RENTALS capitals under the
     badge. Condensed against geometric is a genuine contrast axis — two
     grotesques of the same width would just read as a mistake. */
  --font-display: 'Archivo Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.27rem, 1.19rem + 0.38vw, 1.55rem);
  --step-2:  clamp(1.60rem, 1.45rem + 0.75vw, 2.13rem);
  --step-3:  clamp(2.02rem, 1.75rem + 1.35vw, 2.92rem);
  --step-4:  clamp(2.25rem, 1.80rem + 2.35vw, 4.00rem);
  --step-5:  clamp(3.05rem, 2.20rem + 4.25vw, 5.60rem);

  /* Space */
  --sp-1: 0.375rem; --sp-2: 0.75rem;  --sp-3: 1.25rem;
  --sp-4: 2rem;     --sp-5: 3.25rem;  --sp-6: clamp(3.5rem, 7vw, 6.5rem);
  --sp-7: clamp(5rem, 11vw, 10rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 66ch;

  --radius: 3px;              /* near-square: this brand is not a soft SaaS */
  --radius-lg: 6px;

  /* Semantic z-scale */
  --z-base: 0; --z-sticky: 100; --z-dropdown: 200;
  --z-backdrop: 300; --z-modal: 400; --z-toast: 500;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out-expo */
  --ease-q: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
  /* Last resort only: a word that cannot fit its box breaks instead of
     overflowing the page. "Bachelorettes" at display size on a 375px phone
     is the case this exists for. */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.007em; }
h4 { font-size: var(--step-1); letter-spacing: -0.005em; }
p  { margin: 0; text-wrap: pretty; }

a { color: inherit; }
:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Layout ---------- */
.wrap { width: min(100% - var(--gutter) * 2, 1240px); margin-inline: auto; }
.wrap--narrow { width: min(100% - var(--gutter) * 2, 860px); margin-inline: auto; }
.band { padding-block: var(--sp-7); }
.band--tight { padding-block: var(--sp-6); }
.band--surface { background: var(--surface); }
.band--bay { background: var(--bay); color: var(--shell); }
.band--bay h2, .band--bay h3 { color: var(--shell); }
.band--drench { background: var(--ember); color: #fff; }
.band--drench h2, .band--drench h3 { color: #fff; }
.band--bay p, .band--drench p { line-height: 1.7; }  /* light-on-dark breathing room */

.lede { font-size: var(--step-1); line-height: 1.5; max-width: min(34ch, 100%); color: var(--muted); }
.band--bay .lede { color: var(--shell-dim); }
/* Turquoise is lighter than the coral this replaced; dimmed body text drops
   under 4.5:1 on it, so the drench band carries full white. */
.band--drench .lede { color: #fff; }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--sp-3); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-toast);
  background: var(--ink); color: #fff; padding: var(--sp-2) var(--sp-3);
}
.skip:focus { left: var(--sp-3); top: var(--sp-3); }

/* ---------- Section head ---------- */
/* min-width:0 on every grid child. Without it a grid item refuses to shrink
   below its min-content width and quietly pushes the whole page sideways
   on phones — which is exactly what it did here. */
.head > *, .split > *, .row > *, .boat > *, .rows > *,
.stack-4 > *, .stack-3 > *, .cta-final > *, .dodont > *,
.specimen > *, .form-light > *, .foot-grid > * { min-width: 0; }

.head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
@media (min-width: 900px) {
  .head--split {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: end; gap: var(--sp-5);
  }
}

/* The one deliberate brand device: a Spanish phrase set in the brand turquoise,
   inline with the heading. Not an eyebrow system — it appears where the Spanish
   IS the voice, and it is never a tiny tracked-out all-caps label. */
.said {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  font-size: var(--step-1);
  letter-spacing: -0.005em;
  color: var(--ember);
  display: block;
  margin-bottom: 0.15em;
}
.band--bay .said { color: var(--sun-hi); }
/* Amber sits happily on navy but only reaches 3.9:1 on the turquoise band, and
   an eyebrow is small text. White clears it. */
.band--drench .said { color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  /* The wide-tracked capitals from the badge, used where they read: a short
     label. Applied to a full headline they cost width and legibility. */
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase;
  font-size: var(--step--1); letter-spacing: 0.055em;
  padding: 0.95em 1.6em; min-height: 48px;
  border: 2px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ember); color: #fff; }
.btn--primary:hover { background: var(--ember-d); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
/* A ghost button draws itself in ink, which on a dark band is the band. It was
   invisible on the navy and turquoise sections until this. */
.band--bay .btn--ghost, .band--drench .btn--ghost {
  color: #fff; border-color: rgb(255 255 255 / 0.55);
}
.band--bay .btn--ghost:hover, .band--drench .btn--ghost:hover {
  background: #fff; color: var(--bay-deep); border-color: #fff;
}
.btn--light { background: #fff; color: var(--ember); }
.btn--light:hover { background: var(--sun-hi); color: var(--bay-deep); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.55); }
.btn--outline-light:hover { background: #fff; color: var(--bay-deep); border-color: #fff; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---------- Header ---------- */
.site-head {
  --head-row: 74px;   /* the logo/CTA row; the drawer hangs below it */
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgb(255 255 255 / 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.4) blur(10px);
}
.site-head__in {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 74px;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__type {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.28rem; letter-spacing: -0.012em; color: var(--ink);
  line-height: 1;
}
.brand__type em { font-style: normal; color: var(--ember); }

.nav { display: none; gap: clamp(1rem, 2vw, 1.9rem); }
.nav a {
  text-decoration: none; font-weight: 500; font-size: var(--step--1);
  color: var(--ink); padding-block: 0.6rem; position: relative;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 2px;
  background: var(--ember); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (min-width: 1000px) { .nav { display: flex; } }

/* ---------- Nav dropdowns ---------- */
/* Twelve pages used to sit behind two hubs. The panel opens on hover, on
   keyboard focus, and on a tap of the chevron — the parent link still goes to
   the hub, so the menu never blocks the obvious action. */
.nav__item { position: relative; display: flex; align-items: center; gap: 0.15rem; }
.nav__more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 0; background: none;
  color: var(--muted); cursor: pointer; border-radius: 2px;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.nav__more svg { width: 10px; height: 7px; }
.nav__item:hover .nav__more, .nav__item:focus-within .nav__more { color: var(--ember); }
.nav__more[aria-expanded="true"] { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + 0.55rem); left: -0.85rem;
  min-width: max-content; display: grid; gap: 0.05rem;
  padding: 0.4rem; z-index: var(--z-dropdown);
  background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 40px -22px oklch(0.22 0.035 210 / 0.55);
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity .28s var(--ease), transform .28s var(--ease),
              visibility .28s var(--ease);
}
/* visibility:hidden also takes the links out of the tab order, so focus lands
   on the parent first, opens the panel, and then walks into it. */
.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu,
.nav__item.is-open .nav__menu {
  opacity: 1; visibility: visible; transform: none;
}
/* A hover bridge across the gap, so the panel does not close mid-travel. */
.nav__item::after {
  content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 0.6rem;
}
.nav__menu a {
  padding: 0.5rem 0.75rem; border-radius: 2px; white-space: nowrap;
  color: var(--ink); font-weight: 500;
}
.nav__menu a::after { content: none; }   /* no underline sweep in here */
.nav__menu a:hover, .nav__menu a:focus-visible { background: var(--surface); color: var(--ember); }

/* Mobile drawer: the children are simply listed, indented. No nested
   accordion to fight with on a phone. */
.mobile-nav__sub {
  display: grid; gap: 0.1rem;
  margin: 0.1rem 0 0.5rem; padding-left: var(--sp-3);
  border-left: 1px solid var(--line);
}
.mobile-nav__sub a {
  font-size: var(--step--1) !important; font-weight: 500;
  color: var(--muted); padding-block: 0.45rem;
}
.mobile-nav__sub a:hover { color: var(--ember); }

.head-tools { display: flex; align-items: center; gap: var(--sp-2); }
.lang {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  background: none; border: 1.5px solid var(--line); border-radius: var(--radius);
  color: var(--muted); cursor: pointer; padding: 0.5rem 0.7rem; min-height: 40px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.lang:hover { border-color: var(--ember); color: var(--ember); }
.lang b { color: var(--ink); font-weight: 700; }
.head-tools .btn { padding: 0.7em 1.15em; min-height: 44px; font-size: var(--step--1); }
.head-tools .btn--ghost { display: none; }
@media (min-width: 640px) { .head-tools .btn--ghost { display: inline-flex; } }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1.5px solid var(--line); background: none;
  border-radius: var(--radius); cursor: pointer; color: var(--ink);
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger span { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.mobile-nav {
  display: none; border-top: 1px solid var(--line);
  background: var(--bg); padding: var(--sp-3) 0 var(--sp-4);
}
/* The header is sticky, so a drawer taller than the screen would simply run off
   the bottom with no way to reach it — the page scrolls instead. Cap it to what
   is left below the header row and let the drawer itself scroll. */
.mobile-nav.is-open {
  display: block;
  max-height: calc(100vh - var(--head-row));
  max-height: calc(100dvh - var(--head-row));
  overflow-y: auto;
  overscroll-behavior: contain;   /* do not hand the scroll back to the page */
}
@media (min-width: 1000px) { .mobile-nav.is-open { display: none; } }
.mobile-nav a {
  display: block; text-decoration: none; font-family: var(--font-display);
  font-weight: 600; font-size: var(--step-1); padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

/* Phones: the brand + language toggle + CTA + burger do not fit at 375px at
   full size. Compact the row rather than dropping the booking CTA — it is the
   whole point of the header. */
@media (max-width: 560px) {
  .site-head { --head-row: 64px; }
  .site-head__in { gap: 0.5rem; min-height: 64px; }
  /* Mark-only lockup. The wordmark is the widest thing in the row, and losing it
     is cheaper than losing either the language toggle or the booking CTA —
     both of which have to stay visible for this audience. */
  .brand__type { display: none; }
  .brand__mark { width: 32px; height: 32px; }
  .head-tools { gap: 0.4rem; }
  .lang { padding: 0.45rem 0.55rem; min-height: 38px; font-size: 0.8rem; }
  .head-tools .btn { padding: 0.6em 0.85em; min-height: 38px; font-size: 0.82rem; }
  .burger { width: 38px; height: 38px; flex: none; }
  .mobile-nav a { font-size: var(--step-0); }
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; background: var(--bay-deep); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img,
.hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(185deg, oklch(0.165 0.035 208 / 0.62) 0%, oklch(0.165 0.035 208 / 0.18) 42%, oklch(0.165 0.035 208 / 0.88) 100%),
    radial-gradient(72% 58% at 76% 30%, oklch(0.70 0.19 45 / 0.42) 0%, transparent 68%);
}
/* slow sun drift — atmosphere, not decoration */
.hero__glow {
  position: absolute; z-index: -1; inset: auto -10% 22% auto;
  width: min(52vw, 620px); aspect-ratio: 1;
  background: radial-gradient(circle, oklch(0.815 0.14 62 / 0.36) 0%, transparent 62%);
  filter: blur(18px);
  animation: drift 26s var(--ease-q) infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-5%, -7%, 0) scale(1.14); }
}
.hero__in {
  position: relative;
  padding-block: clamp(6rem, 17vh, 11rem) clamp(3.5rem, 9vh, 6rem);
  color: #fff;
  display: grid; gap: var(--sp-4);
}
.hero h1 { color: #fff; max-width: 15ch; letter-spacing: -0.013em; }
.hero h1 .sun { color: var(--sun-hi); }
.hero__sub { font-size: var(--step-1); line-height: 1.5; max-width: 40ch; color: oklch(0.94 0.01 60); }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: var(--step--1); color: oklch(0.90 0.012 60);
  border-top: 1px solid rgb(255 255 255 / 0.25); padding-top: var(--sp-3);
  margin-top: var(--sp-2);
}
.hero__meta strong { font-family: var(--font-display); font-weight: 600; color: #fff; }

/* ---------- Booking strip ---------- */
.strip { background: var(--bay-deep); border-top: 1px solid oklch(0.345 0.052 203 / 0.5); }
.strip .wrap { padding-block: var(--sp-5); }
.strip__head { max-width: 52ch; margin-bottom: var(--sp-4); }
.strip__head h2 { font-size: var(--step-2); color: var(--shell); margin-bottom: 0.6rem; }
.strip__head p { color: var(--shell-dim); font-size: var(--step-0); }
.strip form { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .strip form { grid-template-columns: repeat(3, 1fr) auto; align-items: end; }
}

/* Shared by the dark strip and the light booking form on /contact. */
/* min-width:0 — a grid item defaults to min-width:auto, so a control with a wide
   intrinsic size (iOS date inputs have one) pushes straight out of its track. */
.field { display: grid; gap: 0.4rem; min-width: 0; }
.field label {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  color: var(--shell-dim); letter-spacing: -0.002em;
}
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--step-0);
  /* One line-height for all three, or a text input, a select and a date each
     compute a different box and the row stops lining up. */
  line-height: 1.2;
  padding: 0.8rem 0.9rem; min-height: 48px; width: 100%;
  border: 1.5px solid oklch(0.345 0.052 203); border-radius: var(--radius);
  background: oklch(0.20 0.04 206); color: var(--shell);
  transition: border-color .3s var(--ease);
}
/* Single-line controls get one fixed box. min-height alone still leaves each
   browser's own inner box to break the tie, and the row reads as ragged. */
.field input, .field select { height: 48px; }
.field input:hover, .field select:hover { border-color: var(--sun); }
.field ::placeholder { color: oklch(0.70 0.02 205); opacity: 1; }
/* Sits under the whole row, not in the fourth column beside the button. */
.strip__fine {
  grid-column: 1 / -1; margin: 0;
  color: var(--shell-dim); font-size: var(--step--1);
}
.strip .btn { width: 100%; justify-content: center; gap: 0.55em; }
@media (min-width: 860px) { .strip .btn { width: auto; } }
.btn__ico { width: 1.15em; height: 1.15em; flex: none; }

/* iOS Safari gives date inputs a native box that ignores width, sizes itself
   from its own shadow text and sits on a text baseline — so on a phone it came
   out wider than its column and taller than the fields beside it. Resetting the
   appearance and pinning the box makes it match the select and the number. */
.field input[type="date"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-width: 0;
}

/* The native picker glyph renders near-black, which is invisible on the bay
   ground. Inverting it is the only hook the control exposes. */
.strip input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); opacity: 0.65; cursor: pointer;
}
.strip input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* ---------- Booking form on a light ground ---------- */
.form-light { display: grid; gap: var(--sp-3); }
@media (min-width: 700px) {
  .form-light { grid-template-columns: 1fr 1fr; }
  .form-light .field--full, .form-light .form-foot { grid-column: 1 / -1; }
}
.form-light .field label { color: var(--ink); }
.form-light .field input,
.form-light .field select,
.form-light .field textarea {
  background: var(--bg); color: var(--ink); border-color: var(--line);
}
.form-light .field input:hover, .form-light .field select:hover,
.form-light .field textarea:hover { border-color: var(--ember); }
.form-light .field ::placeholder { color: var(--muted); }
.form-light textarea { min-height: 7.5rem; resize: vertical; line-height: 1.55; }
.form-foot { display: grid; gap: var(--sp-2); justify-items: start; }
.form-note { font-size: var(--step--1); color: var(--muted); max-width: 52ch; }
[data-status]:not(.vh) { font-size: var(--step--1); color: var(--ember); font-weight: 500; }

/* ---------- Contact rail ---------- */
.rail { display: grid; gap: var(--sp-4); align-content: start; }
.rail__item { display: grid; gap: 0.25rem; padding-block: var(--sp-3); border-top: 1px solid var(--line); }
.rail__item:first-child { border-top: 0; padding-top: 0; }
.rail__label { font-size: var(--step--1); color: var(--muted); }
.rail__value {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1);
  letter-spacing: -0.007em; text-decoration: none;
}
a.rail__value:hover { color: var(--ember); }

/* ---------- Fleet rows (deliberately not a card grid) ---------- */
.boat { display: grid; gap: var(--sp-4); align-items: center; }
.boat + .boat { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .boat { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-6); }
  .boat--flip > .boat__media { order: 2; }
}
/* display:block because the photo is a link now, and an anchor is inline by
   default — which would break the 1:1 crop and the badge sitting on it. */
.boat__media { display: block; position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
a.boat__media img { transition: transform 1.1s var(--ease); }
a.boat__media:hover img, a.boat__media:focus-visible img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) { a.boat__media img { transition: none; }
  a.boat__media:hover img, a.boat__media:focus-visible img { transform: none; } }
/* Square: the source material is phone-shot, mixed portrait and landscape.
   A 1:1 crop treats both fairly. */
.boat__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (min-width: 900px) { .boat__media img { aspect-ratio: 4 / 3.4; } }
.boat__tag {
  position: absolute; left: 0; bottom: 0;
  background: var(--ember); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  padding: 0.5rem 0.9rem;
}
.boat__body { display: grid; gap: var(--sp-3); }
.boat__name { font-size: var(--step-3); }
.spec { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0; padding: 0; }
.spec > div { display: grid; gap: 0.1rem; }
.spec dt { font-size: var(--step--1); color: var(--muted); }
.spec dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); letter-spacing: -0.007em; }
.band--bay .spec dt { color: var(--shell-dim); }
/* The full spec list on a boat page. Wrapping flex left six items ragged
   (four, then two); a grid keeps the columns true at 2 and 3 across. */
.spec--icons {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-4);
}
@media (min-width: 700px) { .spec--icons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spec--icons dt { display: flex; align-items: center; gap: 0.42rem; }
.spec__ico { width: 17px; height: 17px; flex: none; color: var(--ember); }
.band--bay .spec__ico { color: var(--sun-hi); }
.price { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--ember); letter-spacing: -0.01em; }
.price small { font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); color: var(--muted); letter-spacing: 0; }
.band--bay .price { color: var(--sun-hi); }
.band--bay .price small { color: var(--shell-dim); }

/* ---------- Experience tiles ---------- */
.tiles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 900px) {
  .tiles { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 15rem; }
  .tile--wide { grid-column: span 3; grid-row: span 2; }
  .tile { grid-column: span 3; }
  .tiles--six .tile { grid-column: span 2; }
  .tiles--six .tile--wide { grid-column: span 4; grid-row: span 2; }
  /* Closes the grid. Nine tiles fill four rows exactly, so a tenth two-column
     tile would leave a row four columns short; a full-width band does not. */
  .tiles--six .tile--full { grid-column: 1 / -1; min-height: 0; }
}

.tile {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-lg); min-height: 14rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-3); color: #fff; text-decoration: none;
  background: var(--bay);
}
.tile img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.tile::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, oklch(0.165 0.035 208 / 0.90) 8%, oklch(0.165 0.035 208 / 0.30) 55%, oklch(0.165 0.035 208 / 0.10) 100%);
}
.tile:hover img { transform: scale(1.06); }
.tile h3 { font-size: var(--step-2); color: #fff; }
.tile__es { color: var(--sun-hi); font-family: var(--font-display); font-weight: 500; font-size: var(--step-0); }
.tile p { color: oklch(0.92 0.01 60); font-size: var(--step--1); margin-top: 0.35rem; max-width: 40ch; }
.tile--wide h3 { font-size: var(--step-3); }

/* ---------- What's aboard ----------
   Six short inclusions. Hairline separators rather than boxed cards: the site
   already sets its rhythm with rules (.row, .rail__item), and a grid of
   bordered icon cards is the one layout every competitor charter site uses. */
.kit { display: grid; grid-template-columns: 1fr; column-gap: var(--sp-5); }
@media (min-width: 560px) { .kit { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .kit { grid-template-columns: repeat(3, 1fr); } }
.kit__item {
  display: grid; gap: 0.45rem; align-content: start;
  padding-block: var(--sp-4); border-top: 1px solid var(--line);
}
.kit__ico { width: 26px; height: 26px; color: var(--ember); margin-bottom: 0.15rem; }
.kit__item h3 { font-size: var(--step-0); margin: 0; letter-spacing: -0.004em; }
.kit__item p { margin: 0; color: var(--muted); font-size: var(--step--1); max-width: 34ch; }
/* Single column only. Once the items sit side by side they read as a grid and
   the left edge is doing the aligning; stacked full-width, it just looks adrift. */
@media (max-width: 559px) {
  .kit__item { justify-items: center; text-align: center; }
  .kit__item p { margin-inline: auto; }
}

/* ---------- Marks / value rows ---------- */
.rows { display: grid; gap: 0; }
.row {
  display: grid; gap: var(--sp-2); padding-block: var(--sp-4);
  border-top: 1px solid var(--line);
}
.band--drench .row, .band--bay .row { border-color: rgb(255 255 255 / 0.28); }
.rows .row:last-child { border-bottom: 1px solid var(--line); }
.band--drench .rows .row:last-child, .band--bay .rows .row:last-child { border-color: rgb(255 255 255 / 0.28); }
@media (min-width: 800px) {
  .row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--sp-5); align-items: baseline; }
}
.row h3 { font-size: var(--step-2); }
.row p { color: var(--muted); }
.band--drench .row p { color: #fff; }
.band--bay .row p { color: var(--shell-dim); }

/* ---------- Departure points ---------- */
.ports { display: grid; gap: var(--sp-4); }
@media (min-width: 780px) { .ports { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } }
.port { display: grid; gap: var(--sp-2); }
.port__name { font-size: var(--step-2); }
.port address { font-style: normal; color: var(--muted); }
.band--bay .port address { color: var(--shell-dim); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--sp-3) 0;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1);
  letter-spacing: -0.006em; display: flex; gap: var(--sp-3);
  align-items: baseline; justify-content: space-between;
  transition: color .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ember); }
.faq summary::after {
  content: '+'; font-weight: 500; color: var(--ember); flex: none;
  transition: transform .4s var(--ease); font-size: 1.3em; line-height: 1;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: var(--sp-4); max-width: var(--measure); color: var(--muted); }
/* Every FAQ on the site sits on the navy band, where --muted lands at
   2.2:1. It reads as grey-on-grey. This predates the palette change. */
.band--bay .faq details > div { color: var(--shell-dim); }

/* ---------- Split feature ---------- */
.split { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .split--flip > .split__media { order: 2; }
}
.split__media { border-radius: var(--radius-lg); overflow: hidden; }
.split__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (min-width: 900px) { .split__media img { aspect-ratio: 4 / 4.4; } }

/* ---------- CTA band ---------- */
.cta-final { text-align: center; display: grid; gap: var(--sp-4); justify-items: center; }
.cta-final h2 { max-width: 16ch; }
.cta-final p { max-width: 46ch; color: #fff; }

/* ---------- Footer ---------- */
.site-foot { background: var(--bay-deep); color: var(--shell-dim); padding-block: var(--sp-6) var(--sp-4); }
.foot-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 800px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
/* Nine services in a single column left the footer lopsided. Above 1040px the
   Occasions column takes the extra width and splits its list in two; below
   that there is not room for two readable columns, so it stays as one. */
@media (min-width: 1040px) {
  .foot-grid { grid-template-columns: 1.35fr 1fr 1.9fr 1fr; }
  /* Column flow, not the row-major default: a reader going down the first
     column should get the first five services, not every other one. */
  .foot-col--wide ul {
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    grid-auto-columns: minmax(0, 1fr);
    column-gap: var(--sp-4);
  }
}
.site-foot h4 { color: var(--shell); font-size: var(--step-0); margin-bottom: var(--sp-2); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-foot a { color: var(--shell-dim); text-decoration: none; font-size: var(--step--1); }
.site-foot a:hover { color: var(--sun-hi); }
.site-foot .brand__type { color: var(--shell); }
.foot-note {
  margin-top: var(--sp-5); padding-top: var(--sp-3);
  border-top: 1px solid oklch(0.345 0.052 203 / 0.6);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  justify-content: space-between; font-size: var(--step--1);
}

/* ---------- Boat gallery ---------- */
.gallery{display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
@media (min-width:900px){
  .gallery{grid-template-columns:repeat(4,1fr)}
  .gallery figure:nth-child(1){grid-column:span 2;grid-row:span 2}
}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--surface)}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;display:block;transition:transform 1s var(--ease)}
.gallery figure:nth-child(1) img{aspect-ratio:1}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{
  position:absolute;inset:auto 0 0 0;padding:.85rem;color:#fff;font-size:var(--step--1);
  background:linear-gradient(to top,oklch(0.165 0.035 208/.86),transparent);
  opacity:0;transition:opacity .35s var(--ease)
}
.gallery figure:hover figcaption,.gallery figure:focus-within figcaption{opacity:1}
@media (prefers-reduced-motion:reduce){
  .gallery img{transition:none}
  .gallery figcaption{opacity:1}
}

/* ---------- Sticky WhatsApp bar ----------
   Phones and tablets only: the desktop header already keeps Call and Book a
   day on screen, and a second fixed bar there would just eat the viewport. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  padding: 0.65rem var(--sp-3);
  padding-bottom: calc(0.65rem + env(safe-area-inset-bottom));  /* clears the iPhone home bar */
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-top: 1px solid var(--line);
  animation: cta-rise .34s var(--ease) both;
}
.sticky-cta .btn { width: 100%; justify-content: center; gap: 0.55em; }
@keyframes cta-rise { from { transform: translateY(100%); } to { transform: none; } }
/* Keep the last of the page clear of the bar rather than under it. */
body.has-sticky-cta { padding-bottom: 4.75rem; }
/* While the drawer is open the visitor is navigating, not booking — and a tall
   drawer runs under the bar at the bottom of the screen. */
body.nav-open .sticky-cta { display: none; }
@media (min-width: 900px) {
  .sticky-cta { display: none; }
  body.has-sticky-cta { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { animation: none; } }

/* ---------- Availability ---------- */
/* The layout components set display, which beats the hidden attribute's own
   UA rule, so hidden has to be spelled out or it does nothing. */
[hidden] { display: none !important; }
.avail { display: grid; gap: var(--sp-3); }
.avail__months { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.avail__m { display: grid; gap: 0.5rem; }
.avail__mh {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
  letter-spacing: -0.005em;
}
.avail__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.avail__dow {
  font-size: 0.68rem; text-align: center; color: var(--muted);
  padding-bottom: 0.15rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.avail__d {
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: 0.78rem; font-variant-numeric: tabular-nums;
  border-radius: 2px; background: var(--surface); color: var(--ink);
}
.avail__d--pad { background: none; }
.avail__d--past { opacity: 0.32; }
.avail__d--busy { background: var(--ember); color: #fff; font-weight: 600; }
.band--bay .avail__d { background: oklch(0.30 0.05 204); color: var(--shell); }
.band--bay .avail__dow, .band--bay .avail__note { color: var(--shell-dim); }
.band--bay .avail__d--pad { background: none; }
.avail__key { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--step--1); color: var(--muted); }
.avail__key span { display: inline-flex; align-items: center; gap: 0.45rem; }
.avail__key i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.avail__note { font-size: var(--step--1); color: var(--muted); max-width: 54ch; }

/* ---------- Brand guide ---------- */
.swatches { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.sw { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.sw__chip { height: 8.5rem; display: flex; align-items: flex-end; padding: var(--sp-2); }
.sw__on { font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); }
.sw__meta { padding: var(--sp-2); display: grid; gap: 0.15rem; background: var(--bg); }
.sw__name { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.005em; }
.sw__val { font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sw__role { font-size: var(--step--1); color: var(--muted); }

.specimen { display: grid; gap: var(--sp-3); }
.specimen__row { display: grid; gap: var(--sp-1); padding-block: var(--sp-3); border-top: 1px solid var(--line); }
.specimen__tag { font-size: var(--step--1); color: var(--muted); }
.band--bay .specimen__tag { color: var(--shell-dim); }
.specimen__demo { line-height: 1.05; }

.dodont { display: grid; gap: var(--sp-4); }
@media (min-width: 780px) { .dodont { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } }
.dodont ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.dodont li { padding-left: 1.6em; position: relative; }
.dodont li::before {
  position: absolute; left: 0; top: 0;
  font-family: var(--font-display); font-weight: 700;
}
.do li::before { content: '✓'; color: var(--ember); }
.dont li::before { content: '✕'; color: var(--muted); }
.band--bay .do li::before { color: var(--sun-hi); }
.band--bay .dont li::before { color: var(--shell-dim); }

.logo-board { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.logo-cell {
  display: grid; place-items: center; padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius); min-height: 11rem;
}
.logo-cell--dark { background: var(--bay-deep); border-color: var(--bay-mid); }
.logo-cell--sun { background: var(--ember); border-color: var(--ember); }
.logo-cell figcaption {
  font-size: var(--step--1); color: var(--muted); margin-top: var(--sp-2); text-align: center;
}
.logo-cell--dark figcaption, .logo-cell--sun figcaption { color: oklch(0.86 0.02 60); }

/* ---------- Motion: enhance what is already visible ---------- */
.rise { transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .rise { opacity: 0; transform: translate3d(0, 22px, 0); }
.js .rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1 !important; transform: none !important; transition: none; }
  .hero__glow { animation: none; }
  .tile img, .btn, .nav a::after { transition: none; }
}

/* ---------- Utility ---------- */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stack-4 { display: grid; gap: var(--sp-4); }
.stack-3 { display: grid; gap: var(--sp-3); }
.credit { font-size: 0.75rem; color: var(--muted); margin-top: var(--sp-2); }
.band--bay .credit, .site-foot .credit { color: oklch(0.62 0.02 205); }