/* ==========================================================================
   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%; }

/* 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; }
.brand img {
  height: 40px;
  width: auto;
  transition: height .5s var(--ease);
}
.header.is-stuck .brand img { height: 33px; }
.footer .brand img { height: 44px; }

.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;
}
.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; }
/* <picture> is inline by default; without this the img's height:100% has
   nothing to resolve against and the hero image collapses. */
.hero__media picture { display: block; width: 100%; height: 100%; }
.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; }
}

/* ------------------------------------------------- Scroll-scrub hero -- */
/*  boat.mp4 is pre-extracted to a 120-frame JPEG sequence and scrubbed on a
    <canvas>. Scroll position picks the frame, so the drone orbits the yacht
    under the reader's thumb. Canvas drawing rather than <video> currentTime
    seeking is what makes this reliable on Safari/iOS — and the source is
    HEVC, which many browsers will not decode in a <video> at all.

    --scrub-vh is the scroll distance the pin holds for, in vh. 100 = one
    full screen of scrolling before the next section arrives. Lower it for
    a quicker hand-off, raise it for a slower, more cinematic orbit.          */

.scrollhero {
  --scrub-vh: 100;
  position: relative;
  height: calc(100svh + (var(--scrub-vh) * 1svh));
  background: var(--navy-ink);
}

.scrollhero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.scrollhero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Poster keeps the frame from ever being blank while JPEGs decode. */
.scrollhero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .6s var(--ease);
}
.scrollhero.is-ready .scrollhero__poster { opacity: 0; }

.scrollhero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  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%);
}

.scrollhero__content {
  position: relative;
  z-index: 3;
  width: 100%;
}

/* Staged copy — each chapter cross-fades as the orbit advances. */
.stage {
  position: absolute;
  left: 0; right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), visibility .7s;
  pointer-events: none;
}
.stage.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.stage__lede { margin-top: 26px; }
.stage__actions {
  margin-top: 42px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Progress rail — tells the reader the pin is finite. */
.scrollhero__rail {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 46px;
  z-index: 3;
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
}
.scrollhero__rail i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--gold);
  transition: width .12s linear;
}

.scrollhero__meta {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 62px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.scrollhero__meta b {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.scrollhero__hint { transition: opacity .5s var(--ease); }
.scrollhero__hint.is-hidden { opacity: 0; }

/* No pin, no scrub: one screen, first chapter, finished frame. */
.scrollhero.is-static { height: 100svh; }
.scrollhero.is-static .scrollhero__rail,
.scrollhero.is-static .scrollhero__hint { display: none; }

/* 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);
}
.sec-head__text { max-width: 34ch; }
.sec-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sec-head--center .sec-head__text { max-width: 26ch; }

/* ---------------------------------------------------------- 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__badge {
  position: absolute;
  top: 15px; left: 15px;
  padding: 7px 13px;
  border-radius: 2px;
  background: rgba(15, 30, 56, 0.80);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}
.yacht__badge--new { background: var(--gold); color: var(--navy-ink); }

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

.yacht__builder {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 9px;
}

.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; }

/* -------------------------------------------------------------- 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; }
.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; }
.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;
}

/* A six-person crew shot cannot read in the 66px avatar circle — the square
   crop that holds everyone is mostly empty deck, so the faces end up a few
   pixels tall. A banner uses the picture's real shape and keeps every face
   legible; .inquire already clips it to the card's rounded top. */
.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;
}
/* The avatar now carries the crew group shot rather than one person's
   headshot, so the old "GM" monogram fallback would be wrong if the image
   ever failed; a plain navy disc is the honest empty state. JS still removes
   the <img> on a 404 so the card never shows a broken-image icon. */
.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) {
  /* A 3:2 landscape inside a ~0.46 phone viewport can only ever show about a
     third of its width, and the default centre lands mid-hull — cutting the
     boat at both ends so it reads as a slab. Shifting the window forward puts
     the windscreen, hull line, skyline and sunset in frame instead. The drift
     zoom is dropped here too: at this crop it only tightens things further. */
  /* The drift zoom only tightens an already-hard crop on a phone. */
  .hero__media img { transform: none; animation: none; }
  .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 { height: 32px; }
  .header.is-stuck .brand img { height: 28px; }

  .fleet-grid { grid-template-columns: 1fr; }
  .yacht__specs { grid-template-columns: repeat(2, 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; }

  /* Shorter pin on phones — a long hold is worse under a thumb. */
  .scrollhero { --scrub-vh: 70; }
  .scrollhero__meta { bottom: 54px; font-size: 9px; letter-spacing: 0.2em; }
  .scrollhero__rail { bottom: 40px; }
}

@media (max-width: 620px) {
  .stage__actions { margin-top: 32px; }
  .stage__actions .btn { width: 100%; }
  .scrollhero__meta b { font-size: 0.95rem; }
}

@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; }
  .hero__media img { transform: none; }
}

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

/* ===========================================================================
   MANAGEMENT LAYER
   Components specific to Maritime Yacht Management. Everything above this
   line is shared with the charter site — keep edits additive so the two
   stylesheets can still be diffed. All components read semantic tokens only
   (--surface, --text, --accent, --em), so they flip with .section--light.
   =========================================================================== */

/* ------------------------------------------------------------- Services -- */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 14px;
}
.svc {
  display: flex;
  flex-direction: column;
  padding: 32px 28px 30px;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--surface-raised);
  text-decoration: none;
  color: inherit;
  transition: transform .5s var(--ease), border-color .5s var(--ease),
              box-shadow .5s var(--ease);
}
a.svc:hover,
a.svc:focus-visible {
  transform: translateY(-5px);
  border-color: var(--hairline-strong);
  box-shadow: 0 22px 50px rgba(15, 30, 56, 0.14);
}
.svc__icon {
  width: 34px;
  height: 34px;
  margin-bottom: 20px;
  stroke: var(--accent);
  stroke-width: 1.25;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.svc__name {
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 12px;
}
.svc__copy {
  font-size: 0.93rem;
  line-height: 1.66;
  color: var(--text-soft);
  margin-bottom: 20px;
}
.svc__more {
  margin-top: auto;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* -------------------------------------------------------------- Pillars -- */
/* Tabbed "how we work" block. Buttons drive [data-pillar-panel] via main.js;
   with JS off every panel stays visible, so the content is never trapped. */

.pillars { display: grid; grid-template-columns: 300px 1fr; gap: 0; align-items: stretch; }
.pillars__tabs {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--hairline);
}
.pillars__tab {
  position: relative;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 26px 26px 26px 30px;
  text-align: left;
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--text-muted);
  transition: color .4s var(--ease), background .4s var(--ease);
}
.pillars__tab:first-child { border-top: 1px solid var(--hairline); }
.pillars__tab::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 2px;
  background: var(--em);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s var(--ease);
}
.pillars__tab:hover { color: var(--text-soft); }
.pillars__tab[aria-selected="true"] {
  color: var(--text);
  background: var(--surface-raised);
}
.pillars__tab[aria-selected="true"]::before { transform: scaleY(1); }

.pillars__panels { padding: 8px 0 8px 54px; }
.pillars__panel[hidden] { display: none; }
.pillars__panel h3 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.16;
  margin-bottom: 20px;
}
.pillars__panel p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 54ch;
}
.pillars__panel p + p { margin-top: 16px; }

@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; }
  .pillars__tabs { flex-direction: row; overflow-x: auto; border-right: 0; scrollbar-width: none; }
  .pillars__tabs::-webkit-scrollbar { display: none; }
  .pillars__tab {
    flex: 0 0 auto;
    padding: 16px 22px;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--hairline);
    border-top: 0;
  }
  .pillars__tab:first-child { border-top: 0; }
  .pillars__tab::before { left: 0; right: 0; top: auto; bottom: -1px; width: auto; height: 2px; transform: scaleX(0); transform-origin: left; }
  .pillars__tab[aria-selected="true"]::before { transform: scaleX(1); }
  .pillars__panels { padding: 34px 0 0; }
}

/* --------------------------------------------------------------- Tiers -- */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  align-items: start;
}
.tier {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 28px 32px;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--surface-raised);
}
.tier--feature {
  border-color: var(--em);
  box-shadow: 0 22px 60px rgba(15, 30, 56, 0.16);
}
.tier__flag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 16px;
  padding: 5px 11px;
  border-radius: 2px;
  background: var(--em);
  color: var(--navy-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.tier__name {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 10px;
}
.tier__for {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-muted);
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--hairline);
  min-height: 4.4em;
}
.tier__list { list-style: none; display: grid; gap: 12px; margin-bottom: 28px; }
.tier__list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.tier__list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.52em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.tier__list li.is-off { color: var(--text-faint); }
.tier__list li.is-off::before {
  border: 0;
  top: 0.66em;
  width: 9px; height: 1.5px;
  background: var(--text-faint);
  transform: none;
}
.tier__foot { margin-top: auto; }
.tier__price {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* --------------------------------------------------------------- Steps -- */

.steps { counter-reset: step; display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 3px; overflow: hidden; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px;
  background: var(--surface);
  padding: 30px 32px;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--em);
  line-height: 1;
}
.step h3 { font-family: var(--display); font-size: 1.28rem; font-weight: 400; margin-bottom: 9px; }
.step p { font-size: 0.94rem; line-height: 1.68; color: var(--text-soft); max-width: 62ch; }
@media (max-width: 620px) {
  .step { grid-template-columns: 1fr; gap: 14px; padding: 26px 22px; }
}

/* ------------------------------------------------------ Coverage / facts -- */

.factrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}
.factrow > div { background: var(--surface); padding: 26px 24px; }
.factrow dt {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.factrow dd { font-family: var(--display); font-size: 1.28rem; line-height: 1.3; }

/* ----------------------------------------------------------- Brand lockup -- */
/* Per the 13 Oct review: the MARITIME wordmark alone, no yacht icon and no
   descriptor line, so the management and charter sites stay visually
   consistent. assets/brand/maritime-wordmark-white.png is 1385x162 (8.55:1),
   cropped from the supplied logo with a transparent background; the navy
   variant is for light grounds and the favicon.
   Width is driven by --brand-w and height follows the image's own ratio —
   see the is-stuck note below, which is why that is restated at higher
   specificity than the inherited rules. */

.brand .lockup { display: block; width: var(--brand-w, 188px); }
.brand .lockup img {
  display: block;
  width: 100%;
  height: auto;
  transition: width .5s var(--ease);
}
.brand .lockup__sub {
  display: block;
  margin-top: 0.36em;
  font-family: var(--ui);
  /* "YACHT MANAGEMENT" is two characters longer than the "YACHT CHARTERS" set
     in the supplied artwork, so size and tracking are pulled in until the
     descriptor measures the same as the wordmark above it (~142px at default).
     Changing either value without re-measuring will overhang the wordmark. */
  font-size: calc(var(--brand-w, 136px) * 0.073);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.145em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--accent);
  /* Trailing letter-space would otherwise push the line left of centre. */
  text-indent: 0.145em;
}
/* The lockup holds ONE size whether or not the header is stuck.
   Two things were wrong before:
   1. --brand-w dropped 142px -> 117px on scroll, which also drove the live
      descriptor text down to ~8.5px; at that size 0.145em tracking renders
      unevenly and the wordmark PNG resamples badly.
   2. The inherited `.header.is-stuck .brand img { height: 33px }` (0,3,1) and
      its 28px mobile twin outrank `.brand .lockup img { height: auto }` (0,2,1).
      So the image was pinned to a fixed height while its width still scaled —
      a stretched, non-native aspect ratio. That was the visible distortion.
   Height must follow the image's own ratio, so it is restated here at a
   specificity that beats both inherited rules. */
.header.is-stuck .brand .lockup img,
.header .brand .lockup img { height: auto; }
.footer .brand .lockup { --brand-w: 206px; }
@media (max-width: 560px) { .brand .lockup { --brand-w: 152px; } }

/* ===========================================================================
   LAYOUT REVISION — headings, rhythm, CTA
   =========================================================================== */

/* ---------------------------------------------------- One-line headings -- */
/* The inherited caps on .sec-head__text (34ch, and 26ch when centred) were
   breaking section headings across 3–4 lines. Released on desktop and held to
   a single line; below 900px they wrap normally, which is the only sane
   behaviour on a phone. */

@media (min-width: 900px) {
  .sec-head__text,
  .sec-head--center .sec-head__text { max-width: none; }
  .sec-head .display { white-space: nowrap; }
  /* With the text column now full-width, keep the trailing link on the
     same baseline rather than letting it wrap beneath. Must exclude the
     centred variant: that one is a COLUMN flex, so align-items governs the
     horizontal axis and flex-end shunts the heading off to the right. */
  /* No flex-wrap:nowrap here. Forcing the heading and its trailing link onto
     one row overflowed between ~900-1100px, where the heading alone fits but
     heading + gap + link does not (876px of content in an 810px column).
     Letting the link drop to its own line keeps the heading single-line
     without pushing the page sideways. */
  .sec-head:not(.sec-head--center) { align-items: flex-end; }
  .sec-head .link-rule { flex: none; }
  .sec-head--center .sec-head__text { text-align: center; }
}

/* --------------------------------------------------------------- Rhythm -- */
/* Inherited --section-y topped out at 168px, which read as unfinished gaps
   between sections rather than as breathing room. */
:root { --section-y: clamp(58px, 6.4vw, 96px); }

.sec-head { margin-bottom: clamp(30px, 3.2vw, 46px); }

/* The fact row now closes the "why us" section instead of standing alone. */
/* ------------------------------------------------------------------ CTA -- */
/* .cta was authored without .section, so it inherited no padding-block at all
   and the closing panel collapsed onto its own text. */
.cta { padding-block: clamp(88px, 9.5vw, 140px); }

.cta__inner {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
/* Page-hero headings run to the wrap; the inline ch caps that used to sit here
   were forcing three lines out of copy that fits in one or two. */
.pagehero__inner .display { max-width: none; }
/* text-align alone left the blocks hanging at the left edge, because the
   inline max-widths on the heading and lede have no auto margins of their own. */
.cta__inner > * { margin-inline: auto; }
.cta__inner .display { margin-bottom: 22px; }
.cta__inner .lede { margin-bottom: 6px; }
.cta__inner .hero__actions { justify-content: center; margin-top: 38px; }

/* ------------------------------------------------------------ Hero veil -- */
/* The inherited veil was built for a flat, overcast shot of the Mangusta: a
   0.60 top wash plus a heavy left-to-right navy. Over the sunset hero that
   wash sits exactly on the warm band above the horizon and greys it out.
   Lift the top and the far right; hold the left dark, because that is where
   the headline and lede sit and they are white. */
.hero__media::after {
  background:
    linear-gradient(to right,
      rgba(15, 30, 56, 0.92) 0%,
      rgba(21, 42, 77, 0.64) 46%,
      rgba(27, 52, 95, 0.10) 100%),
    linear-gradient(to bottom,
      rgba(15, 30, 56, 0.34) 0%,
      transparent 40%,
      rgba(15, 30, 56, 0.62) 100%);
}

/* Phones now load a portrait frame (see the <picture> in index.html), which
   needs no repositioning — about 77% of its width survives the crop against
   31% for the landscape original, so the default centre is correct. The old
   36% nudge existed only to rescue that landscape crop. */

/* ------------------------------------------------------- Crew gallery -- */
/* The crew shoot is portrait 9:16. The inherited 4:3 tile would crop each
   frame to a horizontal sliver through the middle of the subject, so this
   row gets a portrait tile instead. */
.gallery--portrait .gallery__item { aspect-ratio: 3 / 4; }
@media (max-width: 900px) { .gallery--portrait { --cols: 2 !important; } }
@media (max-width: 480px) { .gallery--portrait { --cols: 1 !important; } }

/* --------------------------------------------------------- Crew filmstrip -- */
/* Full-bleed continuous rail of crew-at-work frames. The track carries the set
   twice and translates exactly -50% (minus half a gap), so the hand-off is
   seamless rather than snapping back. */

.filmstrip {
  position: relative;
  overflow: hidden;
  margin-top: clamp(44px, 5vw, 72px);
}
.filmstrip__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: filmstrip 56s linear infinite;
}
@keyframes filmstrip { to { transform: translateX(calc(-50% - 7px)); } }

/* Let someone stop the rail to look at a frame. */
.filmstrip:hover .filmstrip__track,
.filmstrip:focus-within .filmstrip__track { animation-play-state: paused; }

.filmstrip__item {
  flex: 0 0 auto;
  width: clamp(178px, 16vw, 252px);
  aspect-ratio: 3 / 4;          /* the shoot is portrait; do not crop to 4:3 */
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface-raised);
}
.filmstrip__item img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Fade the rail into the section ground at both edges so it reads as
   continuing past the viewport rather than being cut off. */
.filmstrip::before,
.filmstrip::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 7vw, 120px);
  z-index: 2;
  pointer-events: none;
}
.filmstrip::before { left: 0;  background: linear-gradient(to right, var(--surface), transparent); }
.filmstrip::after  { right: 0; background: linear-gradient(to left,  var(--surface), transparent); }

@media (prefers-reduced-motion: reduce) {
  .filmstrip__track { animation: none; }
  .filmstrip { overflow-x: auto; scrollbar-width: none; }
  .filmstrip::-webkit-scrollbar { display: none; }
}

/* ------------------------------------------------------- Feature section -- */
/* WHY US runs copy left, the "Another One" frame right. That frame is 16:9,
   so this media slot overrides .split__media's default 4:5 portrait — forcing
   it portrait cropped off both tenders and the vessel name. The media column
   is given slightly more width so a landscape frame does not read as small
   beside a three-paragraph column. */

.split--feature { grid-template-columns: 1fr 1.28fr; }
/* This slot is a <figure>; the UA default margin (1em 40px) would otherwise
   shrink it ~80px inside its grid column. */
.split__media--wide { aspect-ratio: 16 / 9; margin: 0; }

@media (max-width: 900px) {
  /* .split--feature is a two-class selector, so it outranks the component's
     own `.split { grid-template-columns: 1fr }` collapse and the photo stayed
     stuck beside the copy. Restate the collapse at matching specificity so the
     photo stacks UNDER the text on phones and tablets. */
  .split--feature { grid-template-columns: 1fr; }
  /* Override the component's 16/11 mobile ratio to keep this frame native. */
  .split__media--wide { aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  /* A 16:9 band is a thin letterbox on a phone — open it up and bias the
     framing so the subject stays readable. */
  .split__media--wide { aspect-ratio: 4 / 3; }
  .split__media--wide img { object-position: 54% 50%; }
}


/* ------------------------------------------------- Revision Oct 2026 -- */

/* Signature is a bespoke inquiry rather than a fixed checklist, so it carries a
   short note where the other cards carry a <ul>. Match the list's rhythm so the
   four cards still read as one row. */
.tier__note {
  font-size: 0.92rem;
  line-height: 1.68;
  color: var(--text-soft);
  margin-bottom: 28px;
}

/* Only name, contact and a short note are required; the vessel detail is
   genuinely optional and should look it. */
.field__opt {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-faint);
}

/* The original hero line now survives as a quiet aside at the end of the
   process, not as the page's opening claim. */
.step__aside {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-style: italic;
  color: var(--text-muted);
  max-width: 62ch;
}

/* ------------------------------------------------- Programme card buttons -- */
/* .btn is white-space:nowrap with overflow:visible, and its 40px side padding
   leaves only 176px of a 256px card column. "Discuss Charter Management" needs
   331px, so the label rendered outside the button border rather than wrapping.
   Let these particular buttons wrap and tighten the side padding; the grid
   keeps all four cards the same height. */
.tier .btn--block {
  padding-inline: 20px;
  white-space: normal;
  line-height: 1.35;
  text-align: center;
  min-height: 57px;
}

/* ------------------------------------------------------------- Video frame -- */
/* The Why Us slot holds an 8-second clip, so it behaves like a photo that moves:
   Vimeo background mode (autoplay, loop, muted, no controls, dnt=1) layered over
   a poster. The poster covers the gap while the player loads and is what shows
   when the viewer prefers reduced motion. */

.vidframe { position: relative; }
.vidframe__poster,
.vidframe__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vidframe__poster { object-fit: cover; z-index: 0; }
.vidframe__player {
  border: 0;
  display: block;
  z-index: 1;
  pointer-events: none;   /* background clip, not a player — don't eat touch scroll */
}

@media (prefers-reduced-motion: reduce) {
  /* Autoplaying loops are exactly what this preference asks us not to do. */
  .vidframe__player { display: none; }
}

/* ------------------------------------------- Full-bleed background video -- */
/* The page hero and the closing CTA are both full-bleed bands with no fixed
   aspect, so a 16:9 iframe cannot object-fit:cover the way their <img> does.
   Size the player to whichever of width/height is binding and centre it, so the
   clip always covers and crops instead of letterboxing. One rule for both —
   these magic numbers should not live in two places. */

.pagehero__media--video,
.cta__media--video { overflow: hidden; }
.pagehero__media--video img,
.cta__media--video img { z-index: 0; }

.pagehero__player,
.cta__player {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;        /* 16:9 of the viewport width */
  min-height: 100%;
  min-width: 177.78vh;    /* 16:9 relative to the band height */
  border: 0;
  z-index: 1;
  pointer-events: none;   /* a background clip, not a player */
}

/* Keep each band's legibility veil above the clip, not just above the poster. */
.pagehero__media--video::after,
.cta__media--video::after { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .pagehero__player,
  .cta__player { display: none; }
}