/* ==========================================================================
   MARITIME YACHT CHARTERS — reservemycharter.com

   Palette is taken from the Maritime logo and the live site:
     #1B345F  brand navy (logo wordmark)
     #2D84C5  brand blue (logo sub-line)
     #192A3D  deep slate
     #3A4F66  slate body text
     #D2A969  gold accent
     #FAFBFC / #F2F5F7 / #E1E8ED  light neutrals

   Sections alternate dark navy and light paper. Components read from the
   semantic tokens below, so a section only has to flip the tokens — it never
   restyles the components themselves.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --navy:        #1B345F;
  --navy-deep:   #152A4D;
  --navy-ink:    #0F1E38;
  --blue:        #2D84C5;
  --blue-lift:   #4FA0DC;
  --gold:        #D2A969;
  --gold-lift:   #E0BC85;

  --slate:       #3A4F66;
  --slate-deep:  #192A3D;

  --paper:       #FAFBFC;
  --paper-2:     #F2F5F7;
  --paper-line:  #E1E8ED;

  /* ---- Semantic (dark is the default) ---- */
  --surface:        var(--navy);
  --surface-raised: var(--navy-deep);
  --surface-sunk:   var(--navy-ink);

  --text:        #FFFFFF;
  --text-soft:   rgba(255, 255, 255, 0.76);
  --text-muted:  rgba(255, 255, 255, 0.56);
  --text-faint:  rgba(255, 255, 255, 0.38);

  --hairline:        rgba(255, 255, 255, 0.14);
  --hairline-strong: rgba(255, 255, 255, 0.30);

  /* Brand blue is too dark to sit on navy — dark grounds get the lifted tint. */
  --accent: var(--blue-lift);
  /* Editorial emphasis is gold on navy, blue on paper — gold has too little
     contrast against light grounds to carry a headline word. */
  --em: var(--gold);

  --btn-solid-bg: #FFFFFF;
  --btn-solid-fg: var(--navy);

  /* ---- Type ---- */
  --display: "Fraunces", "Canela", Georgia, "Times New Roman", serif;
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* ---- Rhythm ---- */
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1440px;
  --section-y: clamp(80px, 11vw, 168px);

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

/* Light sections flip the tokens; components inherit without knowing. */
.section--light,
.footer--light {
  --surface:        var(--paper);
  --surface-raised: #FFFFFF;
  --surface-sunk:   var(--paper-2);

  --text:        var(--slate-deep);
  --text-soft:   var(--slate);
  --text-muted:  #6B7F94;
  --text-faint:  #8FA0B2;

  --hairline:        var(--paper-line);
  --hairline-strong: #C6D3DE;

  --accent: var(--blue);
  --em: var(--blue);

  --btn-solid-bg: var(--navy);
  --btn-solid-fg: #FFFFFF;

  background: var(--surface);
  color: var(--text);
}

/* --------------------------------------------------------------- Reset -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

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

/* ------------------------------------------------------------ Utilities -- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 940px; }

.section {
  padding-block: var(--section-y);
  background: var(--surface);
  color: var(--text);
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}

.eyebrow--quiet { color: var(--text-faint); }

.display {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.display em {
  font-style: italic;
  color: var(--em);
}

.h-xl { font-size: clamp(2.9rem, 7.6vw, 6.6rem); }
.h-lg { font-size: clamp(2.1rem, 4.8vw, 3.9rem); }
.h-md { font-size: clamp(1.7rem, 3.2vw, 2.7rem); }
.h-sm { font-size: clamp(1.3rem, 2.1vw, 1.7rem); }

.lede {
  font-size: clamp(1rem, 1.28vw, 1.125rem);
  line-height: 1.74;
  color: var(--text-soft);
  max-width: 62ch;
}

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* A thin gold rule used to mark section starts — a Maritime signature. */
.rule-gold {
  width: 54px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 26px;
}
.rule-gold--center { margin-inline: auto; }

/* --------------------------------------------------------------- Button -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 40px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
  white-space: nowrap;
}

.btn--solid {
  background: var(--btn-solid-bg);
  color: var(--btn-solid-fg);
}
.btn--solid:hover { background: var(--blue); color: #fff; }

.btn--ghost {
  border-color: var(--hairline-strong);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--blue); background: var(--blue); color: #fff; }

.btn--gold { background: var(--gold); color: var(--navy-ink); }
.btn--gold:hover { background: var(--gold-lift); }

.btn--block { width: 100%; }
/* Three side-by-side contact actions need to read as one compact group rather
   than three full-size calls to action competing with "View the fleet". */
.btn--compact { padding-inline: 22px; }

/* Text link with animated rule */
.link-rule {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  padding-bottom: 7px;
  position: relative;
}
.link-rule::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.link-rule:hover::after { transform: scaleX(0); }

/* --------------------------------------------------------------- Header -- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 22px;
  transition: background .5s var(--ease), padding .5s var(--ease),
              border-color .5s var(--ease), backdrop-filter .5s var(--ease);
  border-bottom: 1px solid transparent;
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15, 30, 56, 0.66), transparent);
  pointer-events: none;
  transition: opacity .5s var(--ease);
}

.header.is-stuck {
  padding-block: 13px;
  background: rgba(27, 52, 95, 0.94);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.header.is-stuck::before { opacity: 0; }

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Brand lockup — the real Maritime wordmark. */
.brand { display: block; flex: none; }
/* The MARITIME wordmark (13 Oct review) is 1385x162 — 8.55:1. Sizing it by
   height the way the old stacked lockup was would make it ~460px wide, so it
   is driven by width and the height follows the image's own ratio.
   The size is deliberately constant when the header sticks: shrinking a raster
   wordmark on scroll softens it, and a fixed height here would fight the
   width and stretch it. Matches the management site so the two read alike. */
.brand img {
  width: 188px;
  height: auto;
}
.header.is-stuck .brand img { width: 188px; height: auto; }
.footer .brand img { width: 206px; height: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
}

.nav a {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  padding-block: 6px;
  position: relative;
  transition: color .35s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: #fff; }

.nav__cta {
  padding: 12px 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 2px;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--blue); border-color: var(--blue); }

/* Mobile toggle */
.nav-toggle {
  display: none;
  width: 30px;
  height: 20px;
  position: relative;
  flex: none;
  background: none;
  border: 0;
  cursor: pointer;
}
/* The bars stay 30x20, but 30x20 is well under the 44x44 minimum tap target
   and was easy to miss on a phone. Extend the hit area with a pseudo-element
   so the button's own box — which the absolutely positioned bars resolve
   against — is left alone. */
.nav-toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
}
.nav-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 2px; }
.nav-toggle span:nth-child(2) { top: 9px; }
.nav-toggle span:nth-child(3) { top: 16px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--navy-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
body.nav-open .drawer { opacity: 1; visibility: visible; }

.drawer a {
  font-family: var(--display);
  font-size: clamp(1.9rem, 7vw, 2.9rem);
  line-height: 1.4;
  color: #fff;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s var(--ease);
}
.drawer a:hover { color: var(--gold); }
body.nav-open .drawer a { opacity: 1; transform: none; }
body.nav-open .drawer a:nth-child(1) { transition-delay: .10s; }
body.nav-open .drawer a:nth-child(2) { transition-delay: .16s; }
body.nav-open .drawer a:nth-child(3) { transition-delay: .22s; }
body.nav-open .drawer a:nth-child(4) { transition-delay: .28s; }

.drawer__foot {
  margin-top: 40px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  line-height: 2;
}

/* ----------------------------------------------------------------- Hero -- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-ink);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  animation: heroDrift 16s var(--ease-out) forwards;
}
@keyframes heroDrift { to { transform: scale(1); } }

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(15, 30, 56, 0.93) 0%, rgba(21, 42, 77, 0.70) 44%, rgba(27, 52, 95, 0.20) 100%),
    linear-gradient(to bottom, rgba(15, 30, 56, 0.60) 0%, transparent 36%, rgba(15, 30, 56, 0.68) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 150px 118px;
}

.hero__title { max-width: 15ch; }
.hero__lede { margin-top: 28px; }
.hero__actions {
  margin-top: 46px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Hero trust strip */
.hero__facts {
  margin-top: 58px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 46px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 760px;
}
.hero__fact {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.hero__fact b {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--gold);
}
.hero__fact span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: 34px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.hero__scroll i {
  display: block;
  width: 62px;
  height: 1px;
  background: var(--gold);
  animation: scrollPulse 2.6s var(--ease) infinite;
  transform-origin: left;
}
@keyframes scrollPulse {
  0%   { transform: scaleX(0); opacity: 0; }
  40%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; transform-origin: right; }
}

/* --------------------------------------------------------- Video hero -- */
/*  Silent autoplay loop of the F1 crane lift. Replaced the scroll-scrub
    version — see archive/scroll-scrub-hero/ for that implementation.        */

.vhero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-ink);
}

.vhero__media { position: absolute; inset: 0; z-index: 0; }

.vhero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vhero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* The navy overlay the revision notes asked to keep, so the headline stays
     readable over the footage. */
  background:
    linear-gradient(to right, rgba(15,30,56,.90) 0%, rgba(21,42,77,.62) 46%, rgba(27,52,95,.14) 100%),
    linear-gradient(to bottom, rgba(15,30,56,.60) 0%, transparent 34%, rgba(15,30,56,.72) 100%);
}

.vhero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 150px 118px;
}

.vhero__lede { margin-top: 28px; }
.vhero__actions {
  margin-top: 46px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* Forces the contact button onto its own line under the first two. A zero-
   height item with flex-basis:100% fills the row so the next item wraps, which
   keeps the button at its natural width — stretching it with flex-basis
   directly would make it span the whole column. */
.vhero__actions-break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
}

.vhero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: 34px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.vhero__scroll i {
  display: block;
  width: 62px;
  height: 1px;
  background: var(--gold);
  animation: scrollPulse 2.6s var(--ease) infinite;
  transform-origin: left;
}

@media (max-width: 620px) {
  .vhero__inner { padding-block: 126px 104px; }
  .vhero__actions .btn { width: 100%; }
  /* The buttons already stack full-width here, so the line-break item only
     adds a second row gap and spaces Contact us further out than the rest. */
  .vhero__actions-break { display: none; }
}

/* Compact page hero (interior pages) */
/* Compact page hero (interior pages) */
.pagehero {
  position: relative;
  min-height: 60svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy-ink);
}
.pagehero__media { position: absolute; inset: 0; }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,30,56,.96) 3%, rgba(21,42,77,.62) 48%, rgba(15,30,56,.46) 100%);
}
.pagehero__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: 148px 66px;
}

/* Don't double the breathing room the hero already provides. */
.pagehero + .section,
.pagehero + .wrap + .section,
.pagehero + .section--light + .section { padding-top: clamp(44px, 5.5vw, 80px); }

/* --------------------------------------------------------- Section head -- */

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: clamp(38px, 4.6vw, 64px);
}
/* Section titles run on one line. The `ch` caps that used to sit here broke
   short headlines across two or three lines regardless of the room available,
   which read as dead space rather than as emphasis. Headings get their natural
   width and `title-1line` below keeps them from wrapping on desktop; they wrap
   normally again under 900px, where one line is not achievable. */
.sec-head__text { max-width: none; }
.sec-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sec-head--center .sec-head__text { max-width: none; }

/* Where a colour change already marks the boundary between two sections, a
   full section's padding on both sides of the join is dead space. These trim
   the facing edges without touching the section's own internal rhythm. */
.section--flush-top { padding-top: clamp(34px, 4vw, 60px); }
.section--flush-bottom { padding-bottom: clamp(34px, 4vw, 60px); }

/* ---------------------------------------------------------- Fleet cards -- */

.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: clamp(26px, 3vw, 44px) clamp(20px, 2.2vw, 32px);
}

.yacht {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color .5s var(--ease), transform .6s var(--ease),
              box-shadow .6s var(--ease);
}
.yacht:hover {
  border-color: var(--blue);
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(15, 30, 56, 0.16);
}

.yacht__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-sunk);
}
.yacht__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.yacht:hover .yacht__media img { transform: scale(1.06); }


.yacht__body {
  padding: 25px 25px 27px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* The builder line is the card's title now — the display-type name below it
   was removed — so it carries the heading's bottom spacing as well as a size
   20% above the old eyebrow. .yacht__name itself stays: about.html still uses
   it for the four step cards. */
.yacht__builder {
  font-size: 11.4px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

.yacht__name {
  font-family: var(--display);
  font-size: 1.52rem;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
}

.yacht__specs {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 4px;
  padding-block: 18px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 20px;
}
.yacht__spec { text-align: center; }
.yacht__spec b {
  display: block;
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 5px;
}
.yacht__spec span {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.yacht__foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.yacht__price small {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.yacht__price b {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.yacht__price i {
  font-style: normal;
  font-size: 11px;
  color: var(--text-muted);
}
.yacht__cta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline-strong);
  transition: color .4s var(--ease), border-color .4s var(--ease);
  white-space: nowrap;
}
.yacht:hover .yacht__cta { color: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------------ Filter bar -- */

.filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  margin-bottom: 42px;
  border-bottom: 1px solid var(--hairline);
}
.filters__group { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 11px 21px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: all .35s var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--hairline-strong); }
.chip.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.section--light .chip.is-active { background: var(--navy); color: #fff; }
.filters__count {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ------------------------------------------------------------- Split row -- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 92px);
  align-items: center;
}
.split--reverse .split__media { order: 2; }

.split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.split__body p + p { margin-top: 20px; }
.split__actions { margin-top: 36px; }

/* Stat strip */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 46px;
}
.stat {
  background: var(--surface);
  padding: 30px 24px;
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--accent);
}
.stat span {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------- Destinations -- */

.dest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.dest {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 3px;
  display: flex;
  align-items: flex-end;
  padding: 28px;
}
.dest img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.dest::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,30,56,.94) 4%, rgba(27,52,95,.30) 54%, rgba(27,52,95,.34) 100%);
  transition: opacity .6s var(--ease);
}
.dest:hover img { transform: scale(1.07); }
.dest:hover::after { opacity: .86; }

.dest__body { position: relative; z-index: 2; width: 100%; color: #fff; }
.dest__name {
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.dest__meta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.dest__note {
  margin-top: 13px;
  font-size: 13.5px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.84);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .6s var(--ease), opacity .5s var(--ease);
}
.dest:hover .dest__note { max-height: 130px; opacity: 1; }

/* --------------------------------------------- Destination cards -- */
/*  Each destination carries its own short inquiry form, so a reader can act
    from the card rather than being sent to the general contact page.        */

.destcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
}

/* Six destinations on the home page: auto-fit gives four across and leaves a
   ragged two-card row. Three across lands them as two even rows instead. */
@media (min-width: 1080px) {
  .destcard-grid--three { grid-template-columns: repeat(3, 1fr); }
}

.destcard {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
}

.destcard__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-sunk); }
.destcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.destcard:hover .destcard__media img { transform: scale(1.05); }

.destcard__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }

.destcard__name {
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.destcard__meta {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.destcard__note {
  font-size: 13.5px;
  line-height: 1.66;
  color: var(--text-soft);
  margin-bottom: 22px;
}

.destform {
  margin-top: auto;
  display: grid;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.destform .field label { font-size: 9px; }
.destform .field input { padding: 11px 13px; font-size: 13.5px; }
.destform .btn { padding: 14px 20px; font-size: 10.5px; }

/* In the split sections the form has a full text column to sit in rather than
   a card, so cap it to roughly the card width instead of letting the inputs
   run the whole measure. */
.destform--split {
  margin-top: 30px;
  max-width: 420px;
}

/* -------------------------------------------------------------- Marquee -- */

.marquee {
  overflow: hidden;
  background: var(--surface);
  border-block: 1px solid var(--hairline);
  padding-block: 24px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: slide 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  letter-spacing: -0.01em;
  color: var(--text-faint);
  white-space: nowrap;
  transition: color .4s var(--ease);
}
.marquee__item:hover { color: var(--accent); }

/* Length overall, set in the ticker's own voice. */
.marquee__item i {
  font-style: normal;
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold);
  opacity: .78;
}

/* Hull silhouettes: one profile per boat type, width scaled to LOA so the
   ticker reads as a size ladder rather than a list of names. */
.boat-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.boat {
  flex: none;
  height: auto;
  /* Explicit fill, not currentColor — the item's text sits at 38% alpha and
     a silhouette that faint disappears at 30px wide. */
  fill: rgba(255, 255, 255, 0.58);
  transition: fill .4s var(--ease);
}
.marquee__item:hover .boat { fill: var(--gold); }

/* ---------------------------------------------------------- Testimonial -- */

.quotes { position: relative; }
.quote {
  display: none;
  text-align: center;
  max-width: 30ch;
  margin-inline: auto;
}
.quote.is-active { display: block; animation: fadeUp .8s var(--ease) both; }
.quote__text {
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.9vw, 2.35rem);
  line-height: 1.36;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.quote__by {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.quotes__dots {
  display: flex;
  justify-content: center;
  gap: 11px;
  margin-top: 44px;
}
.quotes__dots button {
  width: 34px; height: 2px;
  background: var(--hairline-strong);
  transition: background .4s var(--ease);
}
.quotes__dots button.is-active { background: var(--gold); }

/* ------------------------------------------------------------ Amenities -- */
/*  A hotel-style amenities board: a sticky plate of photography on the left,
    a grid of amenity tiles on the right. Hovering or focusing a tile swaps
    the plate and expands that tile's detail line.                           */

.amen {
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  gap: clamp(24px, 3vw, 46px);
  align-items: start;
}

.amen__plate {
  position: sticky;
  top: 104px;
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface-sunk);
}
.amen__plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s var(--ease), transform 1.4s var(--ease);
  transform: scale(1.04);
}
.amen__plate img.is-shown { opacity: 1; transform: none; }

.amen__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,30,56,.86) 1%, rgba(15,30,56,.10) 42%, transparent 70%);
  pointer-events: none;
}

.amen__caption {
  position: absolute;
  left: 24px; right: 24px; bottom: 22px;
  z-index: 2;
  color: #fff;
}
.amen__caption b {
  display: block;
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  margin-bottom: 5px;
}
.amen__caption span {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.amen__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.amen__item {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 20px 20px 18px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--surface-raised);
  transition: background .4s var(--ease), border-color .4s var(--ease),
              transform .4s var(--ease);
}
.amen__item:hover { transform: translateY(-3px); }
.amen__item.is-active {
  background: var(--navy);
  border-color: var(--navy);
}

.amen__icon {
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(210, 169, 105, 0.16);
  color: var(--gold);
  transition: background .4s var(--ease);
}
.amen__icon svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.amen__item.is-active .amen__icon { background: rgba(210, 169, 105, 0.26); }

.amen__label {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  transition: color .4s var(--ease);
}
.amen__item.is-active .amen__label { color: #fff; }

.amen__note {
  display: block;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s var(--ease),
              margin-top .5s var(--ease);
}
.amen__item.is-active .amen__note {
  max-height: 90px;
  opacity: 1;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.74);
}

/* A dense terms bar rather than a floating paragraph. */
.amen__terms {
  display: grid;
  /* Fixed 2x2 — auto-fit lands on 3 columns here and orphans the fourth
     cell, leaving a bare patch of grid background. */
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 14px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
}
.amen__term {
  background: var(--surface-raised);
  padding: 16px 18px;
}
.amen__term b {
  display: block;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--accent);
  margin-bottom: 2px;
}
.amen__term span {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .amen { grid-template-columns: 1fr; }
  .amen__plate { position: relative; top: 0; aspect-ratio: 16 / 10; }
  /* Every tile already shows its own note on touch — repeating it in the
     caption just crowds the shorter plate. */
  .amen__caption span { display: none; }
  .amen__caption b { margin-bottom: 0; }
}

@media (max-width: 560px) {
  .amen__grid { grid-template-columns: 1fr; }
  .amen__terms { grid-template-columns: 1fr; }
  /* No hover on touch — show every detail line up front. */
  .amen__note { max-height: 90px; opacity: 1; margin-top: 8px; }
}

/* ------------------------------------------------- Corporate & events -- */

/* Marks any slot still waiting on client media, so a placeholder never reads
   as a broken or finished image. */
.media-pending {
  position: absolute;
  left: 16px; bottom: 16px;
  z-index: 2;
  padding: 7px 13px;
  border-radius: 2px;
  background: rgba(15, 30, 56, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.evt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}
.evt-tags li {
  padding: 9px 16px;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* Case-study bar — proof of capability, not a gallery tile. */
.casebar {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  flex-wrap: wrap;
  margin-top: clamp(38px, 5vw, 66px);
  padding: 26px 30px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  background: var(--surface-raised);
  transition: background .4s var(--ease), border-color .4s var(--ease),
              transform .4s var(--ease);
}
.casebar:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  border-left-color: var(--gold);
}
.casebar__tag {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.casebar__title {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  letter-spacing: -0.02em;
  color: var(--text);
}
.casebar__meta {
  font-size: 12.5px;
  color: var(--text-muted);
}
.casebar__go {
  margin-left: auto;
  font-size: 1.3rem;
  color: var(--gold);
  transition: transform .4s var(--ease);
}
.casebar:hover .casebar__go { transform: translateX(5px); }

@media (max-width: 620px) {
  .casebar { padding: 20px 22px; }
  .casebar__go { display: none; }
}

/* ---------------------------------------------------------- Events page -- */

.evt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.evt-card {
  padding: 30px 28px 32px;
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
  border-radius: 3px;
  background: var(--surface-raised);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.evt-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(15, 30, 56, 0.14);
}
.evt-card__num {
  display: block;
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--gold);
  margin-bottom: 16px;
}
.evt-card__title {
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.evt-card__copy {
  font-size: 14px;
  line-height: 1.68;
  color: var(--text-soft);
}

/* Case study: media beside a numbered breakdown of the operation. */
.case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4.5vw, 70px);
  align-items: start;
}
.case__media {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--surface-sunk);
  position: sticky;
  top: 104px;
}
.case__media img { width: 100%; height: 100%; object-fit: cover; }

.case__steps {
  counter-reset: step;
  list-style: none;
  display: grid;
  gap: 2px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  overflow: hidden;
}
.case__steps li {
  counter-increment: step;
  position: relative;
  background: var(--surface);
  padding: 18px 22px 18px 62px;
}
.case__steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 22px; top: 18px;
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--gold);
}
.case__steps b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 3px;
}
.case__steps span {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.case__partners { margin-top: 34px; }
.case__logo {
  width: auto;
  max-width: 190px;
  height: auto;
  /* Partner marks sit on navy here; most are supplied light-on-transparent. */
  filter: none;
}
.case__logo-pending {
  display: inline-block;
  padding: 16px 22px;
  border: 1px dashed var(--hairline-strong);
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.partner-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.partner-list li {
  padding: 11px 20px;
  border: 1px solid var(--hairline-strong);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

@media (max-width: 900px) {
  .case { grid-template-columns: 1fr; }
  .case__media { position: relative; top: 0; aspect-ratio: 16 / 11; }
}

/* ------------------------------------------------------- Guest stories -- */
/*  A horizontal rail of tall portrait cards, in the shape of a streaming
    service's "popular now" row: title overlaid low on the artwork, meta
    underneath, arrows that disable at the ends.                            */

.rail-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}
.rail-head__title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
}
.rail-head__link {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color .35s var(--ease);
}
.rail-head__link:hover { color: var(--accent); }

.rail-head__nav {
  margin-left: auto;
  display: flex;
  gap: 10px;
}
.rail-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  color: var(--text);
  display: grid;
  place-items: center;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              color .35s var(--ease), opacity .35s var(--ease);
}
.rail-btn svg { width: 15px; height: 15px; }
.rail-btn:hover:not(:disabled) {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}
.rail-btn:disabled { opacity: .28; cursor: default; }

/* The track bleeds to the viewport edge so cards run off-screen. */
.rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  /* proximity, not mandatory — mandatory fights the arrow paging and won't
     let the rail rest at a true 0, leaving the first card clipped. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  /* Without this, snap targets ignore the edge padding and the rail can never
     settle back at a true scrollLeft of 0. */
  scroll-padding-inline: var(--gutter);
}
.rail::-webkit-scrollbar { display: none; }

.story {
  flex: 0 0 clamp(240px, 24vw, 320px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.story__card {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-sunk);
}
.story__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.story:hover .story__card img { transform: scale(1.05); }

.story__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,30,56,.94) 2%, rgba(15,30,56,.34) 46%, rgba(15,30,56,.10) 100%);
}

.story__tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  padding: 6px 13px;
  border-radius: 100px;
  background: #fff;
  color: var(--navy-ink);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.story__quote {
  position: absolute;
  left: 20px; right: 20px; bottom: 22px;
  z-index: 2;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: #fff;
}

/* The short gold rule under the artwork, echoing the reference layout. */
.story__rule {
  width: 26px;
  height: 2px;
  background: var(--gold);
  margin: 18px auto 14px;
}

.story__by {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
.story__meta {
  text-align: center;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.story__stars {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 10px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* --------------------------------------------------------------- CTA band -- */

.cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--navy-ink);
  color: #fff;
}
.cta__media { position: absolute; inset: 0; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(15,30,56,.90), rgba(27,52,95,.86));
}
.cta__inner { position: relative; z-index: 2; }

/* The closing title sits on one line. The block is widened to the normal wrap
   and the 940px measure is moved onto the paragraph, which is what actually
   needed it — capping the heading instead is what broke it across two lines.
   Widening the container rather than oversizing the heading also keeps the
   centring honest: `margin: auto` cannot centre a child wider than its parent,
   so an over-wide heading would push off the right edge. */
.cta__inner { max-width: var(--maxw); }
.cta__inner > .display {
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.cta__inner > .lede { max-width: 940px; }
.cta .lede { color: rgba(255, 255, 255, 0.80); }

/* ------------------------------------------------------- Yacht detail pg -- */

.spec-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}
.spec-bar > div {
  background: var(--surface);
  padding: 26px 18px;
  text-align: center;
}
.spec-bar b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.5vw, 2.05rem);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 9px;
  color: var(--accent);
}
.spec-bar span {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.detail-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(38px, 5vw, 74px);
  align-items: start;
}

.prose p + p { margin-top: 20px; }

.included {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 13px 30px;
}
.included li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-soft);
}
.included li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 13px; height: 2px;
  background: var(--gold);
}

/* Crew is stated as a standard, not a per-yacht number. */
.spec-crew {
  text-align: center;
  padding: 14px 18px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.yacht__crew {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

/* The sidebar stack — rate card, then the inquire card — pins as one unit. */
.detail-aside {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 16px;
}

/* Rate card */
.ratecard {
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--gold);
  border-radius: 3px;
  padding: 32px 30px 34px;
}
.ratecard__label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 20px;
}
.rate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--hairline);
}
.rate:first-of-type { border-top: 1px solid var(--hairline); }
.rate__dur {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.rate__amt {
  font-family: var(--display);
  font-size: 1.45rem;
  color: var(--accent);
}
.ratecard__note {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.64;
  color: var(--text-muted);
}
.ratecard__actions { margin-top: 24px; display: grid; gap: 11px; }

/* ---------------------------------------------------------- Inquire card -- */

.inquire {
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  overflow: hidden;
}

/* Matches the management site's contact card: a six-person crew shot cannot
   read in the 66px avatar circle, so it runs as a banner across the card top
   and the circular headshot is dropped. .inquire already clips the corners. */
.inquire__banner img { width: 100%; height: auto; display: block; }

.inquire__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 26px;
  border-bottom: 1px solid var(--hairline);
}
.inquire__head svg { width: 26px; height: auto; fill: var(--gold); flex: none; }
.inquire__head h3 {
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.inquire__body { padding: 24px 26px 26px; }

.inquire__lede {
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--text-soft);
  margin-bottom: 22px;
}

.advisor {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.advisor__photo {
  position: relative;
  width: 66px;
  height: 66px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy);
  display: grid;
  place-items: center;
}
.advisor__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Monogram shows through until a real headshot is dropped in; JS hides the
   <img> if it 404s so the card never renders a broken-image icon. */
.advisor__photo::before {
  content: "GM";
  position: absolute;
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.advisor__photo img { position: relative; z-index: 1; }

.advisor__name {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
}
.advisor__role {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 4px 0 6px;
}
.advisor__tel {
  font-family: var(--display);
  font-size: 1.18rem;
  color: var(--text);
  transition: color .35s var(--ease);
}
.advisor__tel:hover { color: var(--accent); }

.inquire__actions { display: grid; gap: 10px; }

.inquire__mail {
  display: block;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
  transition: color .35s var(--ease);
}
.inquire__mail:hover { color: var(--accent); }

/* Gallery — a fixed rectangle, never an auto-fit row with an orphan tile.
   The column count comes from the generator via --cols so a 4-photo yacht
   sits 2x2 while a 6-photo yacht sits 2x3. */
.gallery {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 12px;
}
.gallery__item.is-hidden { display: none; }

.gallery__more {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.gallery__item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface-raised);
  cursor: zoom-in;
}
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.gallery__item:hover img { transform: scale(1.05); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 30, 56, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 88svh;
  object-fit: contain;
  border-radius: 3px;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--blue); border-color: var(--blue); }
.lightbox__close { top: 26px; right: 26px; }
.lightbox__nav--prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 26px; top: 50%; transform: translateY(-50%); }
.lightbox__count {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
}

/* Prev / next yacht */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}
.pager a {
  background: var(--surface);
  padding: 40px 32px;
  transition: background .5s var(--ease);
}
.pager a:hover { background: var(--surface-raised); }
.pager a:last-child { text-align: right; }
.pager small {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.pager b {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* ----------------------------------------------------------------- Form -- */

.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.field { display: grid; gap: 9px; }
.field label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  color: var(--text);
  font-family: var(--ui);
  font-size: 14.5px;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(45, 132, 197, 0.16);
}
.field textarea { resize: vertical; min-height: 128px; }
.field select { appearance: none; cursor: pointer; }
.field--select { position: relative; }
.field--select::after {
  content: "";
  position: absolute;
  right: 18px; bottom: 21px;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}
.form__note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}
.form__status {
  font-size: 13px;
  line-height: 1.6;
  padding: 15px 17px;
  border-left: 3px solid var(--gold);
  background: rgba(210, 169, 105, 0.12);
  border-radius: 2px;
  display: none;
}
.form__status.is-shown { display: block; }

/* --------------------------------------------------------------- Footer -- */

.footer {
  background: var(--navy-ink);
  color: #fff;
  padding-block: clamp(56px, 7vw, 88px) 32px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(30px, 4vw, 58px);
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer__blurb {
  margin-top: 20px;
  font-size: 13.5px;
  line-height: 1.74;
  color: rgba(255, 255, 255, 0.58);
  max-width: 34ch;
}
.footer__title {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.footer__list { display: grid; gap: 12px; }
.footer__list a,
.footer__list span {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.72);
  transition: color .35s var(--ease);
}
.footer__list a:hover { color: #fff; }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding-top: 28px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.40);
}
.footer__bottom nav { display: flex; gap: 26px; flex-wrap: wrap; }
.footer__bottom a:hover { color: rgba(255, 255, 255, 0.75); }

/* ----------------------------------------------------------- Reveal FX -- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ Responsive -- */

@media (max-width: 1080px) {
  .footer__top { grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-aside { position: static; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .detail-aside { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: block; }

  .split { grid-template-columns: 1fr; gap: 34px; }
  .split--reverse .split__media { order: 0; }
  .split__media { aspect-ratio: 16 / 11; }

  .form__row { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .hero__inner { padding-block: 126px 104px; }
  .hero__title { max-width: 12ch; }
  .hero__actions .btn { width: 100%; }
  .hero__facts { gap: 12px 28px; margin-top: 44px; }
  .brand img { width: 152px; height: auto; }
  .header.is-stuck .brand img { width: 152px; height: auto; }

  .fleet-grid { grid-template-columns: 1fr; }
  /* `auto-fit` collapses the tracks nothing lands in, so a card with one spec
     fills the row and a card with three sits three across. The old fixed
     `repeat(2, 1fr)` overrode the --cols the card sets and left a third spec
     orphaned on its own row, or a lone spec with half the row empty. */
  .yacht__specs {
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 16px 4px;
  }
  .footer__top { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager a:last-child { text-align: left; }
  .quotes__dots button { width: 24px; }
  .filters { justify-content: center; }
}

@media (max-width: 900px) {
  /* Two across on tablet and phone. Shown counts are 4 or 6, so the block
     stays a complete rectangle at every breakpoint. */
  .gallery { grid-template-columns: repeat(2, 1fr) !important; }

}

@media (max-width: 620px) {
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; }
  .vhero__video { display: none; }
}

@media print {
  .header, .drawer, .vhero__scroll, .footer__bottom { display: none; }
  body { background: #fff; color: #000; }
}

/* Inclusions are confirmed per vessel rather than guaranteed across the whole
   fleet (13 Oct review) — this note carries that qualification. */
.included__note {
  margin-top: 18px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-soft, rgba(255,255,255,.62));
}