/* Charter template — app shell, views, hero. Mobile first. */

.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico .f, .ico path.f { fill: currentColor; stroke: none; }

/* ---------- Top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: var(--safe-t);
  color: var(--on-dark);
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.4s var(--ease-out);
}
.topbar__in { height: var(--topbar-h); display: flex; align-items: center; gap: 20px; }
.brand { display: block; flex: none; }
.brand__logo { height: 28px; width: auto; }
.brand__logo--black { display: none; }
.topbar[data-tone='glass'] {
  background: var(--glass-light-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--ink);
}
.topbar[data-tone='paper'] { color: var(--ink); }
.topbar:not([data-tone='clear']) .brand__logo--white { display: none; }
.topbar:not([data-tone='clear']) .brand__logo--black { display: block; }
.desk-nav { display: none; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar__saved, .topbar__book { display: none; }
.call-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px 0 13px; border-radius: var(--r-pill);
  font-weight: 500; font-size: 14px;
  background: rgba(14, 16, 19, 0.34);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-dark-edge);
  transition: transform 0.18s var(--ease-out), background-color 0.3s;
}
.call-pill:active { transform: scale(0.96); }
.call-pill .ico { width: 18px; height: 18px; }
.topbar:not([data-tone='clear']) .call-pill { background: var(--accent); color: var(--on-dark); box-shadow: none; }

@media (min-width: 900px) {
  .brand__logo { height: 38px; }
  .desk-nav { display: flex; gap: 6px; margin-inline: auto; }
  .desk-nav a {
    height: 40px; padding: 0 16px; border-radius: var(--r-pill);
    display: inline-flex; align-items: center; font-size: 15px; font-weight: 500;
    color: inherit; opacity: 0.86; transition: opacity 0.2s, background-color 0.2s;
  }
  .desk-nav a:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
  .topbar:not([data-tone='clear']) .desk-nav a:hover { background: rgba(10, 12, 14, 0.06); }
  .desk-nav a[aria-current='page'] { opacity: 1; }
  .topbar__actions { margin-left: 0; }
  .topbar__saved { display: inline-grid; color: inherit; }
  .topbar__book { display: inline-flex; background: var(--on-dark); color: var(--ink); }
  .topbar:not([data-tone='clear']) .topbar__book { background: var(--accent); color: var(--on-dark); }
  .call-pill { background: rgba(255, 255, 255, 0.12); }
  .topbar:not([data-tone='clear']) .call-pill { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
}

/* ---------- Views ---------- */
.view[hidden] { display: none !important; }
.view-pad { height: calc(var(--tabbar-h) + 56px + var(--safe-b)); }
@media (min-width: 900px) { .view-pad { height: 120px; } }
.page-head { padding-top: calc(var(--topbar-h) + var(--safe-t) + 28px); padding-bottom: 18px; }
.page-head .eyebrow { margin: 0 0 10px; }
@media (min-width: 900px) { .page-head { padding-top: calc(var(--topbar-h) + 64px); padding-bottom: 28px; } }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: var(--hero-bg); color: #fff; isolation: isolate; }
.hero__media, .hero__cut { position: absolute; inset: -4% 0 -4% 0; will-change: transform; }
.hero__media picture, .hero__cut picture { display: contents; }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos); }
/* the intro zoom runs on the layer boxes so photo, water canvas and cutout stay pixel-aligned */
.hero__media, .hero__cut { animation: heroIn 1.8s var(--ease-out); }
.hero__cut { z-index: 2; pointer-events: none; }
.hero__water { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s var(--ease-out); }
.hero__water.is-on { opacity: 1; }
@keyframes heroIn { from { transform: scale(1.06); } to { transform: scale(1); } }

.hero__word {
  position: absolute; z-index: 1; left: 0; right: 0; top: 49%;
  transform: translate3d(0, calc(-50% + var(--py, 0px)), 0);
  padding-inline: var(--gutter);
  font-family: var(--font-display);
  font-weight: 700; font-stretch: 125%; font-variation-settings: 'wdth' 125;
  letter-spacing: -0.045em; line-height: 0.8;
  color: #fff; text-align: center; white-space: nowrap;
  pointer-events: none; will-change: transform;
}
.hero__word-line { display: block; width: max-content; margin-inline: auto; font-size: 19.5vw; }
.hero__word-line--m1, .hero__word-line--m2 { display: none; width: auto; }
.hero__word .ch { display: inline-block; animation: chIn 1.1s var(--ease-out) both; animation-delay: calc(0.25s + var(--i) * 0.05s); }
@keyframes chIn { from { opacity: 0; transform: translate3d(0, 18%, 0); } to { opacity: 1; transform: none; } }

.hero__trail { position: absolute; inset: 0; z-index: 3; pointer-events: none; width: 100%; height: 100%; }
.hero::after { /* dark scrim only behind the copy column, never a white fade */
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(120% 70% at 0% 100%, rgba(4, 18, 22, 0.42) 0%, rgba(4, 18, 22, 0) 58%);
}

.hero__ui {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: calc(var(--topbar-h) + var(--safe-t) + 36px);
  padding-bottom: 44px;
  pointer-events: none;
}
.hero__ui > * { pointer-events: auto; }
.hero__stats { align-self: flex-end; display: flex; gap: 56px; margin: 0; animation: fadeUp 1s 0.7s var(--ease-out) both; }
.hero__stats dt {
  font-family: var(--font-display); font-weight: 600; font-stretch: 112%; font-variation-settings: 'wdth' 112;
  font-size: clamp(44px, 4.2vw, 72px); line-height: 1; letter-spacing: -0.03em;
}
.hero__stats dd { margin: 8px 0 0; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, 0.8); max-width: 15ch; }
.hero__copy { max-width: 660px; animation: fadeUp 1s 0.55s var(--ease-out) both; }
.hero__eyebrow { color: rgba(255, 255, 255, 0.82); margin: 0 0 14px; }
.hero__title { color: #fff; font-size: clamp(36px, 3.7vw, 64px); max-width: 15ch; text-shadow: 0 2px 30px rgba(0, 20, 24, 0.22); }
.hero__sub { margin: 16px 0 28px; font-size: 18px; color: rgba(255, 255, 255, 0.88); }
@keyframes fadeUp { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }

/* Floating glass search */
.search { display: flex; align-items: center; border-radius: var(--r-pill); padding: 8px; gap: 0; width: max-content; max-width: 100%; }
.search__field { display: flex; flex-direction: column; gap: 4px; padding: 4px 22px; position: relative; }
.search__field + .search__field::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: rgba(255, 255, 255, 0.18); }
.search__label { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.66); }
.search__loc { padding-left: 14px; }
.search .seg button { min-height: 34px; padding: 0 14px; font-size: 14px; }
.search input[name='date'] {
  background: transparent; border: 0; color: #fff; color-scheme: dark;
  font-size: 15px; font-weight: 500; height: 34px; padding: 0; width: 132px;
}
.search input[name='date']::placeholder { color: #fff; opacity: 1; }
.search input[name='date']:focus-visible { outline: none; }
.search__go {
  flex: none; white-space: nowrap;
  margin-left: 8px; height: 56px; padding: 0 24px 0 20px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--ink); font-weight: 600; font-size: 15px;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s var(--ease-out);
}
.search__go:active { transform: scale(0.96); }
.search__go .ico { width: 20px; height: 20px; }

.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper__b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-strong); transition: transform 0.15s var(--ease-out), opacity 0.2s; position: relative; }
.stepper__b::after { content: ''; position: absolute; inset: -5px; }
.stepper__b:active { transform: scale(0.9); }
.stepper__b[disabled] { opacity: 0.3; pointer-events: none; }
.stepper__b .ico { width: 16px; height: 16px; }
.stepper__v { min-width: 30px; text-align: center; font-weight: 600; font-size: 15px; }
.stepper--dark .stepper__b { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); color: #fff; }

/* Phone portrait hero: stacked word, copy moves onto the sheet */
@media (max-width: 599px) and (orientation: portrait) {
  /* Full screen on open: the sheet's rounded edge starts exactly at the fold, so nothing peeks */
  /* Full screen on open, to the very bottom edge (iOS 26 Safari paints under its floating toolbar, so lvh, not svh).
     The sheet's rounded edge starts below the screen, so nothing peeks. */
  .hero { height: calc(100vh + 28px); height: calc(100lvh + 28px); min-height: 0; }
  /* Bottom-anchored: on shorter screens the crop comes off the top, lifting the hull clear of TIME (video and cutout share this box) */
  /* Phone frame v3: the whole yacht sits in the middle band, open water above and below */
  .hero__photo { object-position: var(--hero-pos-tall); } /* per company: where the subject sits in the phone frame */
  /* YACHT in the open water above the bow, TIME below the hull: the boat sits between them */
  .hero__word { top: 0; bottom: 0; transform: translate3d(0, var(--py, 0px), 0); padding: 0; }
  .hero__word-line--d { display: none; }
  .hero__word-line--m1, .hero__word-line--m2 { display: block; position: absolute; left: 0; right: 0; font-size: 31vw; padding-inline: 14px; }
  /* YACHT in the open water above the bow, TIME below the hull */
  .hero__word-line--m1 { top: 25%; transform: translateY(-50%); }
  /* TIME rests just above the tab bar on every screen: sheet overlap + toolbar difference + tab bar + gap */
  .hero__word-line--m2 { top: auto; bottom: calc(28px + (100lvh - 100svh) + 10px + var(--tabbar-h) + var(--safe-b) + 22px); transform: none; }
  .hero__stats, .hero__copy { display: none; }
  .hero::after { background: radial-gradient(140% 40% at 50% 100%, rgba(4, 18, 22, 0.34) 0%, rgba(4, 18, 22, 0) 70%); }
  /* One bar on the cover: the tab bar. The hero search repeated Fleet (and the fleet page location switch), so phones drop it */
  .hero__bottom { display: none; }
  .hero__copy { max-width: none; }
  .search { width: 100%; padding: 6px; }
  .search__date, .search__guests, .search__label { display: none; }
  .search__loc { padding: 0; flex: 1; }
  .search__loc .seg { width: 100%; }
  .search .seg button { min-height: 44px; font-size: 15px; }
  .search__go { height: 52px; padding: 0 18px; margin-left: 6px; }
}

/* ---------- Explore sheet ---------- */
.explore-sheet { position: relative; z-index: 5; background: var(--paper); }
.m-intro { padding-top: 34px; padding-bottom: 8px; }
.m-intro .eyebrow { margin: 0 0 12px; }
.m-intro .lede { margin-top: 14px; }
@media (max-width: 599px) and (orientation: portrait) {
  .explore-sheet { margin-top: -28px; border-radius: 28px 28px 0 0; box-shadow: var(--shadow-sheet); }
}
@media (min-width: 600px), (orientation: landscape) { .m-intro { display: none; } }

/* Builders strip */
.builders { padding-block: 28px 8px; }
.builders__in { display: flex; align-items: center; gap: 28px; }
.builders__in .eyebrow { flex: none; }
.builders__list {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.builders__list::-webkit-scrollbar { display: none; }
.builders__list li {
  flex: none; font-family: var(--font-display); font-weight: 500; font-stretch: 118%; font-variation-settings: 'wdth' 118;
  font-size: 19px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(10, 12, 14, 0.42);
}
@media (min-width: 900px) {
  .builders { padding-block: 44px; border-bottom: 1px solid var(--line); }
  .builders__list { -webkit-mask-image: none; mask-image: none; justify-content: space-between; flex: 1; }
  .builders__list li { font-size: 21px; }
}
@media (max-width: 899px) { .builders__in { flex-direction: column; align-items: flex-start; gap: 12px; } .builders__list { width: 100%; } }

/* Section heads */
.sec-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 28px; }
.sec-head .eyebrow { margin: 0 0 12px; }
.sec-head__side { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
@media (min-width: 900px) { .sec-head { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: 44px; } .sec-head .lede { max-width: 40ch; } }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 15px; white-space: nowrap; }
.link-arrow .ico { width: 18px; height: 18px; transition: transform 0.2s var(--ease-out); }
.link-arrow:hover .ico { transform: translateX(3px); }

/* Rail */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 340px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  padding-bottom: 24px; margin-bottom: -24px;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 900px) {
  .rail { grid-auto-columns: clamp(300px, 27vw, 420px); gap: 24px; padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
}

/* Yacht card: the photo is the object; name, model and price sit on the page under it */
.ycard { display: block; position: relative; -webkit-tap-highlight-color: transparent; transition: transform 0.3s var(--ease-out); }
.ycard:active { transform: scale(0.98); }
.ycard__media {
  position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--paper-2);
  box-shadow: var(--shadow-card); transform: translateZ(0);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.ycard__media::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(10, 12, 14, 0.06); pointer-events: none; }
.ycard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
@media (hover: hover) { .ycard:hover .ycard__media { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .ycard:hover .ycard__media img { transform: scale(1.035); } }
.save-btn {
  position: absolute; top: 8px; right: 8px; color: #fff;
  background: rgba(14, 16, 19, 0.32); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-dark-edge);
}
.save-btn .s { display: none; }
.save-btn[aria-pressed='true'] .o { display: none; }
.save-btn[aria-pressed='true'] .s { display: block; color: #fff; }
.save-btn.pop { animation: pop 0.45s var(--ease-spring); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
.ycard__body { padding: 14px 2px 0; }
.ycard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ycard__name { font-family: var(--font-display); font-size: 19px; line-height: 1.15; margin: 0; white-space: nowrap; }
.ycard__meta { margin: 3px 0 0; color: var(--muted); font-size: 14px; }
.ycard__price { margin: 8px 0 0; font-size: 14px; color: var(--muted); white-space: nowrap; }
.ycard__price strong { color: var(--ink); font-size: 16px; font-weight: 500; margin-right: 3px; }
.ycard__guests { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 14px; }
.ycard__guests .ico { width: 16px; height: 16px; }

.grid { display: grid; grid-template-columns: 1fr; gap: 28px 16px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 44px 28px; } }
.fleet-group__title { margin: 0 0 16px; }
.fleet-group + .fleet-group { margin-top: 48px; }
@media (min-width: 900px) { .fleet-group__title { margin-bottom: 24px; } .fleet-group + .fleet-group { margin-top: 72px; } }
@media (min-width: 1700px) { .grid { grid-template-columns: repeat(4, 1fr); } }

/* Places */
.places__grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .places__grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.place {
  position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink-3);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
@media (min-width: 760px) { .place { aspect-ratio: 5 / 6; } }
.place img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
@media (hover: hover) { .place:hover img { transform: scale(1.04); } }
.place__label { position: absolute; left: 14px; right: 14px; bottom: 14px; border-radius: 20px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.place__label h3 { font-size: clamp(28px, 2.6vw, 40px); }
.place__label p { margin: 6px 0 0; font-size: 14px; color: var(--on-dark-muted); }
.place__go { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; flex: none; }
.place__go .ico { width: 20px; height: 20px; }

/* Included */
.included__in { display: grid; gap: 40px; }
@media (min-width: 1000px) { .included__in { grid-template-columns: 1.05fr 1fr; gap: 96px; align-items: start; } }
.included__copy .eyebrow { margin: 0 0 12px; }
.included__copy .lede { margin-top: 18px; }
.chips { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.how { display: grid; gap: 12px; }
.how__card { padding: 22px 22px 24px; }
.how__ico { width: 46px; height: 46px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; }
.how__card .h3 { margin: 16px 0 6px; font-size: 20px; }
.how__card p { margin: 0; color: var(--muted); }

/* Concierge band */
.concierge-band { position: relative; min-height: 640px; display: flex; align-items: center; overflow: hidden; background: var(--band-bg); }
@media (min-width: 900px) { .concierge-band { min-height: 86vh; } }
.concierge-band__media { position: absolute; inset: 0; }
.concierge-band__media img { width: 100%; height: 100%; object-fit: cover; }
.concierge-band__media::after { content: ''; position: absolute; inset: 0; background: rgba(4, 14, 22, 0.22); }
.concierge-band__in { position: relative; z-index: 1; padding-block: 64px; }
.concierge-band__card { border-radius: var(--r-xl); padding: 30px 26px; max-width: 580px; }
@media (min-width: 900px) { .concierge-band__card { padding: 44px 44px 40px; } }
.concierge-band__card .eyebrow { color: var(--on-dark-muted); margin: 0 0 14px; }
.concierge-band__p { color: var(--on-dark-muted); margin: 16px 0 28px; font-size: 17px; }
.concierge-band__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--glass { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); }
.btn--glass:hover { background: rgba(255, 255, 255, 0.18); }

/* Footer */
.footer { padding: 72px 0 calc(32px + var(--tabbar-h) + var(--safe-b)); }
@media (min-width: 900px) { .footer { padding-bottom: 40px; } }
.footer__in { display: grid; gap: 36px; }
@media (min-width: 900px) { .footer__in { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } }
.footer__brand img { height: 34px; width: auto; }
.footer__brand p { color: var(--on-dark-muted); margin: 14px 0 0; }
.footer__col { display: flex; flex-direction: column; gap: 8px; color: var(--on-dark-muted); font-size: 15px; }
.footer__col p { margin: 0; }
.footer__col .eyebrow { color: var(--on-dark); margin-bottom: 6px; }
.footer__col a:hover { color: var(--on-dark); }
.footer__base { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line-dark); font-size: 13px; color: var(--on-dark-muted); }

/* ---------- Charters view ---------- */
.filters {
  position: sticky; top: calc(var(--topbar-h) + var(--safe-t)); z-index: 20; margin-bottom: 18px;
  transition: background-color 0.3s;
}
.filters.is-stuck { background: var(--glass-light-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.filters__in { display: flex; gap: 12px; align-items: center; padding-block: 10px; overflow-x: auto; scrollbar-width: none; }
.filters__in::-webkit-scrollbar { display: none; }
.filters .seg { flex: none; }
.sorts { display: flex; gap: 8px; flex: none; }
.sorts .chip { height: 40px; padding: 0 14px; font-size: 14px; transition: background-color 0.2s, color 0.2s; }
.sorts .chip[aria-pressed='true'] { background: var(--accent); color: var(--on-dark); box-shadow: none; }
@media (min-width: 900px) { .filters__in { justify-content: space-between; } }

/* ---------- Empty states (centred moments) ---------- */
.empty { text-align: center; padding: 56px 20px; max-width: 420px; margin: 0 auto; grid-column: 1 / -1; }
.empty__ico { width: 64px; height: 64px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); display: grid; place-items: center; margin: 0 auto 20px; }
.empty__ico .ico { width: 26px; height: 26px; }
.empty h2 { font-size: 24px; }
.empty p { color: var(--muted); margin: 10px 0 24px; }

/* ---------- Yacht detail ---------- */
.yd__media { position: relative; height: 58svh; min-height: 360px; background: var(--paper-2); overflow: hidden; }
.yd__media img { width: 100%; height: 100%; object-fit: cover; }
.yd__ctrl { position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 12px); display: flex; justify-content: space-between; padding-inline: 14px; z-index: 2; }
.yd__ctrl-r { display: flex; gap: 8px; }
.yd__ctrl .icon-btn { color: #fff; background: rgba(14, 16, 19, 0.34); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-dark-edge); }
.yd__ctrl .save-btn { position: static; }
.yd__sheet { position: relative; z-index: 3; background: var(--paper); margin-top: -28px; border-radius: 28px 28px 0 0; box-shadow: var(--shadow-sheet); padding-top: 28px; }
.yd__grid { display: grid; gap: 32px; }
.yd__main .eyebrow { margin: 0 0 10px; }
.yd__title { font-family: var(--font-display); font-weight: 600; font-stretch: 110%; font-variation-settings: 'wdth' 110; letter-spacing: -0.03em; line-height: 1; font-size: clamp(40px, 5vw, 76px); margin: 0; white-space: nowrap; }
.yd__meta { color: var(--muted); margin: 10px 0 0; font-size: 16px; }
.yd__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
.fact { padding: 14px 14px 16px; }
.fact .ico { width: 22px; height: 22px; }
.fact strong { display: block; margin-top: 10px; font-size: 15px; font-weight: 600; }
.fact small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.yd__sec { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.yd__sec .h3 { margin-bottom: 16px; }
.rates { display: grid; gap: 8px; }
.rate { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; }
.rate span { color: var(--muted); }
.rate strong { font-size: 18px; font-weight: 600; }
.rate small { display: block; text-align: right; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 2px; }
.notes { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; color: var(--muted); }
.notes li { display: flex; gap: 12px; }
.notes .ico { width: 20px; height: 20px; color: var(--ink); margin-top: 2px; }
.notes a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.yd__reserve { display: none; }
.yd__similar { padding-top: 48px; }
.yd__similar .wrap { margin-bottom: 18px; }

.yd__bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); z-index: 40;
  border-radius: 24px; padding: 10px 10px 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  animation: barIn 0.5s 0.15s var(--ease-spring) both;
}
@keyframes barIn { from { transform: translateY(130%); } to { transform: none; } }
.yd__bar strong { display: block; font-size: 20px; font-weight: 600; line-height: 1.1; }
.yd__bar small { color: var(--muted); font-size: 13px; }
html.sheet-open .yd__bar { transform: translateY(140%); transition: transform 0.3s var(--ease-out); }

@media (max-width: 899px) {
  body[data-route='yacht'] .topbar { transform: translateY(-110%); }
}
@media (min-width: 900px) {
  .yd { padding-top: calc(var(--topbar-h) + 24px); }
  .yd__media { height: 66vh; max-height: 760px; border-radius: var(--r-lg); width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--maxw) - 2 * var(--gutter)); margin-inline: auto; }
  .yd__ctrl { top: 16px; padding-inline: 16px; }
  .yd__sheet { margin-top: 0; border-radius: 0; box-shadow: none; padding-top: 44px; }
  .yd__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 72px; align-items: start; }
  .yd__reserve { display: block; position: sticky; top: calc(var(--topbar-h) + 24px); padding: 24px; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lift); }
  .yd__bar { display: none; }
  .yd__facts { max-width: 640px; }
}
.reserve__price { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 4px; }
.reserve__price strong { font-family: var(--font-display); font-size: 36px; font-weight: 600; letter-spacing: -0.02em; }
.reserve__price span { color: var(--muted); }
.reserve__mxn { color: var(--muted); font-size: 14px; margin: 0 0 18px; min-height: 1.2em; }
.reserve__row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-top: 1px solid var(--line); margin-bottom: 18px; }
.reserve__row small { display: block; color: var(--muted); font-size: 13px; }
.reserve__note { text-align: center; color: var(--muted); font-size: 13px; margin: 12px 0 0; }
.reserve .seg, .yd__reserve .seg { display: grid; width: 100%; }
.yd__reserve .seg button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; line-height: 1.2; }
.yd__reserve .seg button small { font-size: 12px; font-weight: 400; opacity: 0.8; }

/* ---------- Concierge view ---------- */
.concierge { max-width: 760px; padding-top: calc(var(--topbar-h) + var(--safe-t) + 48px); }
.concierge__head { text-align: center; }
.concierge__head .lede { margin: 16px auto 0; }
.concierge__mark { width: 68px; height: 68px; border-radius: 50%; background: var(--ink); color: var(--on-dark); display: grid; place-items: center; margin: 0 auto 22px; box-shadow: var(--shadow-lift); }
.concierge__mark .ico { width: 28px; height: 28px; }
.concierge__grid { display: grid; gap: 10px; margin-top: 36px; }
@media (min-width: 700px) { .concierge__grid { grid-template-columns: 1fr 1fr; gap: 14px; } }
.c-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; min-height: 76px; }
.c-card__ico { width: 46px; height: 46px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; flex: none; }
.c-card strong { display: block; font-weight: 600; }
.c-card small { display: block; color: var(--muted); font-size: 13px; word-break: break-word; }
.c-card__go { margin-left: auto; color: var(--muted); width: 18px; height: 18px; }
.concierge__places { display: grid; gap: 10px; margin-top: 14px; }
@media (min-width: 700px) { .concierge__places { grid-template-columns: 1fr 1fr; gap: 14px; } }
.c-place { padding: 18px 20px; }
.c-place .eyebrow { margin: 0 0 6px; }
.c-place p:last-child { margin: 0; }

/* ---------- Tab bar (Instagram-style liquid glass) ---------- */
.tabbar {
  position: fixed; left: 50%; bottom: calc(10px + var(--safe-b)); z-index: 60;
  display: flex; gap: 2px; padding: 6px; border-radius: var(--r-pill);
  transform: translate3d(-50%, 0, 0);
  transform-origin: 50% 100%;
  transition: transform 0.5s var(--ease-spring), opacity 0.3s;
}
.tabbar a { position: relative; width: 62px; height: 52px; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--ink); transition: background-color 0.25s, transform 0.18s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.tabbar a:active { transform: scale(0.9); }
.tabbar .ico { width: 26px; height: 26px; grid-area: 1 / 1; }
.tabbar .s { display: none; }
.tabbar a[aria-current='page'] { background: rgba(10, 12, 14, 0.055); }
.tabbar a[aria-current='page'] .o { display: none; }
.tabbar a[aria-current='page'] .s { display: block; }
.tabbar.is-compact { transform: translate3d(-50%, 6px, 0) scale(0.84); }
html.sheet-open .tabbar, body[data-route='yacht'] .tabbar { transform: translate3d(-50%, 150%, 0); }
@media (min-width: 900px) { .tabbar { display: none; } }

/* ---------- Route transitions ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; animation-timing-function: var(--ease-out); }

/* card link overlay (keeps the save button a sibling, not nested in the link) */
.ycard__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ycard .save-btn { z-index: 2; }
.hero__word { visibility: hidden; }
.hero.is-ready .hero__word { visibility: visible; }
.toast { position: fixed; left: 50%; top: calc(var(--safe-t) + 14px); z-index: 90; transform: translate(-50%, -140%); padding: 12px 18px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; transition: transform 0.45s var(--ease-spring); }
.toast.is-on { transform: translate(-50%, 0); }
.rate-note { color: var(--muted); font-size: 14px; margin: 12px 0 0; }

/* Desktop hero composition: copy + search in the open water top-right, stats bottom-left, wordmark behind the hull */
@media (min-width: 600px), (orientation: landscape) {
  .hero__word { top: 57%; }
  .hero__copy { align-self: flex-end; width: min(560px, 40vw); }
  .hero__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
  .hero__stats { align-self: flex-start; }
  .hero__title { max-width: 14ch; font-size: clamp(34px, 3.3vw, 60px); }
  .hero__sub { margin: 14px 0 22px; }
  .search { width: max-content; }
  .search__field { padding: 4px 18px; }
  .search__loc { padding-left: 10px; }
  .hero::after { background: radial-gradient(90% 70% at 100% 0%, rgba(4, 18, 22, 0.38) 0%, rgba(4, 18, 22, 0) 60%), radial-gradient(60% 40% at 0% 100%, rgba(4, 18, 22, 0.3) 0%, rgba(4, 18, 22, 0) 70%); }
}

.concierge-band__card.glass { background: rgba(10, 12, 14, 0.52); }

.yd__media picture, .ycard__media picture, .concierge-band__media picture { display: contents; }
.fact strong { font-size: 14px; }

.topbar[data-tone='clear'] .brand__logo--white { filter: drop-shadow(0 1px 10px rgba(0, 20, 26, 0.35)); }

/* Charters filters: destination row, then a scrolling sort row on phones */
@media (max-width: 899px) {
  .filters__in { flex-wrap: wrap; overflow: visible; row-gap: 10px; }
  .filters .seg { width: 100%; }
  .sorts { width: 100%; flex-wrap: wrap; }
  .yd__facts { gap: 8px; }
  .fact { padding: 12px 12px 14px; }
}

/* ---------- Phone cards: objects, not full-screen slabs ---------- */
@media (max-width: 639px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .grid .ycard__media { aspect-ratio: 1 / 1; border-radius: 18px; }
  .grid .ycard__body { padding: 10px 2px 0; }
  .grid .ycard__top { gap: 8px; }
  .grid .ycard__name { font-size: min(15px, 4.1vw); letter-spacing: -0.015em; }
  .grid .ycard__meta { font-size: 13px; line-height: 1.35; margin-top: 2px; }
  .grid .ycard__price { font-size: 13px; margin-top: 5px; }
  .grid .ycard__price strong { font-size: 15px; margin-right: 2px; }
  .grid .ycard__guests { font-size: 13px; gap: 4px; }
  .grid .ycard__guests .ico { width: 14px; height: 14px; }
  /* Phone rails become the same 2-up grid as Fleet: four whole cards, never a card clipped at the edge */
  .rail { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 24px 12px; overflow: visible; scroll-snap-type: none; padding-bottom: 0; margin-bottom: 0; }
  .rail > :nth-child(n+5) { display: none; }
  .rail .ycard__media { aspect-ratio: 1 / 1; border-radius: 18px; }
  .rail .ycard__body { padding: 10px 2px 0; }
  .rail .ycard__top { gap: 8px; }
  .rail .ycard__name { font-size: min(15px, 4.1vw); letter-spacing: -0.015em; }
  .rail .ycard__meta { font-size: 13px; line-height: 1.35; margin-top: 2px; }
  .rail .ycard__price { font-size: 13px; margin-top: 5px; }
  .rail .ycard__price strong { font-size: 15px; margin-right: 2px; }
  .rail .ycard__guests { font-size: 13px; gap: 4px; }
  .rail .ycard__guests .ico { width: 14px; height: 14px; }
  .places__grid {
    grid-auto-flow: column; grid-auto-columns: 78vw; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .places__grid::-webkit-scrollbar { display: none; }
  .place { scroll-snap-align: start; }
}

/* Dark glass header over ink sections */
.topbar[data-tone='dark'] { background: rgba(10, 12, 14, 0.62); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: var(--on-dark); }
.topbar[data-tone='dark'] .brand__logo--white { display: block; }
.topbar[data-tone='dark'] .brand__logo--black { display: none; }
.topbar[data-tone='dark'] .call-pill { background: rgba(255, 255, 255, 0.12); color: var(--on-dark); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22); }
@media (min-width: 900px) { .topbar[data-tone='dark'] .topbar__book { background: var(--on-dark); color: var(--ink); } }

/* Tab bar: three icons only (Home, Concierge, Fleet), two with a single yacht (Home, Concierge). Smaller pill. */
.tabbar { gap: 0; padding: 5px; }
.tabbar a { width: 56px; height: 46px; }
.tabbar .ico { width: 24px; height: 24px; }
.tabbar.is-compact { transform: translate3d(-50%, 4px, 0) scale(0.88); }
:root { --tabbar-h: 56px; }


/* ---------- Google reviews band ---------- */
.stars {
  --r: 5; --size: 22px;
  display: inline-block; width: calc(var(--size) * 5); height: var(--size); flex: none;
  background:
    linear-gradient(90deg, #ffffff calc(var(--r) / 5 * 100%), rgba(245, 244, 240, 0.22) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.75 5.9 6.45.75-4.8 4.4 1.3 6.35L12 17l-5.7 3.2 1.3-6.35-4.8-4.4 6.45-.75z'/%3E%3C/svg%3E") 0 0 / var(--size) var(--size) repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.75 5.9 6.45.75-4.8 4.4 1.3 6.35L12 17l-5.7 3.2 1.3-6.35-4.8-4.4 6.45-.75z'/%3E%3C/svg%3E") 0 0 / var(--size) var(--size) repeat-x;
}
.stars--sm { --size: 15px; }
.reviews__in { display: grid; gap: 36px; margin-bottom: 40px; }
@media (min-width: 1000px) { .reviews__in { grid-template-columns: 1fr 1.25fr; gap: 96px; align-items: end; margin-bottom: 56px; } }
.reviews__score .eyebrow { margin: 0 0 18px; }
.reviews__big { display: flex; align-items: center; gap: 18px; }
.reviews__big .num {
  font-family: var(--font-display); font-weight: 600; font-stretch: 112%; font-variation-settings: 'wdth' 112;
  font-size: clamp(72px, 8vw, 128px); line-height: 0.9; letter-spacing: -0.04em;
}
.reviews__big .stars { --size: clamp(22px, 2vw, 30px); }
.reviews__count { color: var(--on-dark-muted); margin: 16px 0 26px; font-size: 17px; }
.reviews__score .btn .ico { width: 18px; height: 18px; }
.reviews__quote { margin: 0; }
.reviews__quote blockquote { margin: 0; }
.reviews__quote p {
  font-family: var(--font-display); font-weight: 500; font-stretch: 106%; font-variation-settings: 'wdth' 106;
  font-size: clamp(28px, 3vw, 46px); line-height: 1.12; letter-spacing: -0.025em; margin: 0; text-wrap: balance;
}
.reviews__quote figcaption { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; color: var(--on-dark-muted); font-size: 14px; }
.reviews__rail { grid-auto-columns: min(78vw, 320px); }
@media (min-width: 900px) { .reviews__rail { grid-auto-columns: clamp(280px, 22vw, 340px); } }
.rv-card {
  display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 18px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line-dark);
}
.rv-card__top { display: flex; align-items: center; gap: 12px; }
.rv-card__av { width: 40px; height: 40px; border-radius: 50%; background: var(--ink-3); display: grid; place-items: center; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; flex: none; }
.rv-card__top strong { display: block; font-size: 15px; font-weight: 600; }
.rv-card__top small { display: block; color: var(--on-dark-muted); font-size: 12px; }
.rv-card p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--on-dark); }
.rv-card__src { margin-top: auto; font-size: 12px; color: var(--on-dark-muted); letter-spacing: 0.04em; }
.hero__star { font-size: 0.5em; vertical-align: 0.55em; margin-left: 4px; color: #ffffff; }
.m-rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.m-rating strong { color: var(--ink); font-weight: 600; }
.m-rating .stars { --size: 15px; background: linear-gradient(90deg, var(--ink) calc(var(--r) / 5 * 100%), rgba(10, 12, 14, 0.14) 0); }

/* ---------- AI concierge ---------- */
.cg { position: relative; }
.cg__stage {
  position: relative; min-height: 86svh; display: flex; align-items: center; overflow: hidden;
  background: var(--stage-bg); color: var(--on-dark);
  padding: calc(var(--topbar-h) + var(--safe-t) + 28px) 0 76px;
  transition: min-height 0.7s var(--ease-out);
}
@media (min-width: 900px) { .cg__stage { min-height: 92vh; padding-bottom: 120px; } }
.cg.has-query .cg__stage { min-height: 0; }
.cg__bg { position: absolute; inset: 0; }
.cg__bg picture { display: contents; }
.cg__bg img, .cg__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos); }
@media (max-width: 599px) and (orientation: portrait) { .cg__bg img, .cg__video { object-position: 50% 50%; } }
.cg__video { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.cg__video.is-on { opacity: 1; }
.cg__bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(110% 80% at 50% 42%, rgba(3, 14, 18, 0.42) 0%, rgba(3, 14, 18, 0.74) 100%);
}
.cg__stage-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 900px; }
.cg__intro { display: grid; grid-template-rows: 1fr; width: 100%; transition: grid-template-rows 0.6s var(--ease-out), opacity 0.35s var(--ease-out); }
.cg__intro > div { overflow: hidden; }
.cg.has-query .cg__intro { grid-template-rows: 0fr; opacity: 0; }
.cg__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-muted); }
.cg__title {
  font-family: var(--font-display); font-weight: 600; font-stretch: 120%; font-variation-settings: 'wdth' 120;
  font-size: clamp(52px, 9.4vw, 136px); line-height: 0.9; letter-spacing: -0.05em; margin: 0;
  text-shadow: 0 2px 40px rgba(0, 20, 26, 0.25);
}
.cg__lede { margin: 22px auto 38px; max-width: 34ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: rgba(245, 244, 240, 0.84); text-wrap: balance; }
.cg__ask { position: relative; width: 100%; max-width: 780px; display: flex; align-items: flex-end; gap: 10px; padding: 9px 9px 9px 26px; border-radius: 34px; text-align: left; transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.cg__ask:focus-within { box-shadow: var(--glass-dark-edge), 0 0 0 1px rgba(255, 255, 255, 0.28), 0 28px 70px -24px rgba(0, 0, 0, 0.7); }
.cg__ask textarea {
  flex: 1; resize: none; border: 0; outline: 0; background: transparent; color: var(--on-dark);
  font: 500 clamp(17px, 1.5vw, 20px) / 1.45 var(--font-body); letter-spacing: -0.005em;
  padding: 14px 0; min-height: 56px; max-height: 168px; caret-color: var(--on-dark);
}
.cg__ph {
  position: absolute; left: 26px; right: 84px; top: 23px; pointer-events: none; overflow: hidden; white-space: nowrap;
  font: 500 clamp(17px, 1.5vw, 20px) / 1.45 var(--font-body); color: rgba(245, 244, 240, 0.52);
}
@keyframes caret { 50% { opacity: 0; } }
.cg__send { width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--on-dark); color: var(--ink); box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.6); transition: transform 0.2s var(--ease-out); }
.cg__send:active { transform: scale(0.9); }
.cg__send .ico { width: 22px; height: 22px; stroke-width: 2; }
.cg__ai { display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 14px; color: var(--on-dark-muted); }
.cg__ai[hidden] { display: none; }
.cg__pulse { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(rgba(245, 244, 240, 0.95), rgba(245, 244, 240, 0.08)); -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cg__try { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 780px; transition: opacity 0.3s; }
.cg__try li { animation: fadeUp 0.6s var(--ease-out) both; }
.cg__try li:nth-child(2) { animation-delay: 0.06s; } .cg__try li:nth-child(3) { animation-delay: 0.12s; } .cg__try li:nth-child(4) { animation-delay: 0.18s; }
.cg__chip {
  height: 42px; padding: 0 17px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--on-dark);
  background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.26); transition: background-color 0.2s, transform 0.18s var(--ease-out);
}
.cg__chip:hover { background: rgba(255, 255, 255, 0.18); }
.cg__chip:active { transform: scale(0.96); }
.cg.has-query .cg__try { display: none; }
@media (max-width: 899px) {
  .cg__try { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .cg__try::-webkit-scrollbar { display: none; }
  .cg__ask { padding-left: 20px; border-radius: 30px; }
  .cg__ph { left: 20px; right: 76px; }
}
.cg__sheet { position: relative; z-index: 2; margin-top: -28px; padding-top: 30px; min-height: 30vh; background: var(--paper); border-radius: 28px 28px 0 0; box-shadow: var(--shadow-sheet); }
.cg:not(.has-query) .cg__answer, .cg:not(.has-query) .cg__results { display: none; }
@keyframes chipIn { from { opacity: 0; transform: translateY(6px) scale(0.88); } to { opacity: 1; transform: none; } }
.cg__say { font-family: var(--font-display); font-weight: 600; font-stretch: 108%; font-variation-settings: 'wdth' 108; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.12; letter-spacing: -0.025em; margin: 18px 0 26px; max-width: 32ch; text-wrap: balance; }
.cg__results { display: grid; gap: 12px; }
@media (min-width: 760px) { .cg__results { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1200px) { .cg__results { grid-template-columns: repeat(3, 1fr); } }
.cg-card {
  display: flex; gap: 14px; padding: 10px; border-radius: 22px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card);
  animation: cardIn 0.6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
@media (hover: hover) { .cg-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lift); } .cg-card:hover .cg-card__media img { transform: scale(1.04); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.cg-card__media { width: 116px; flex: none; aspect-ratio: 1; border-radius: 15px; overflow: hidden; background: var(--paper-2); }
.cg-card__media picture { display: contents; }
.cg-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.cg-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 4px 4px 2px 0; }
.cg-card__name { font-family: var(--font-display); font-weight: 600; font-stretch: 108%; font-variation-settings: 'wdth' 108; font-size: 19px; line-height: 1.1; letter-spacing: -0.02em; }
.cg-card__meta { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.cg-card__why { margin: 6px 0 0; font-size: 13px; font-weight: 500; }
.cg-card__row { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cg-card__price { font-size: 13px; color: var(--muted); }
.cg-card__price strong { font-size: 16px; font-weight: 600; color: var(--ink); }
.cg__human { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; padding: 24px; border-radius: 24px; background: var(--paper-2); }
@media (min-width: 900px) { .cg__human { flex-direction: row; align-items: center; justify-content: space-between; padding: 28px 32px; } }
.cg__human .eyebrow { margin: 0 0 6px; }
.cg__human-p { margin: 0; font-size: 17px; }
.cg__human-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cg .concierge__places { margin-top: 14px; }
.hero__ask { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 14px; font-weight: 500; color: rgba(245, 244, 240, 0.9); }
.hero__ask .ico { width: 16px; height: 16px; }
.hero__ask:hover { text-decoration: underline; text-underline-offset: 4px; }
.m-ask { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 15px 16px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); font-weight: 500; font-size: 15px; }
.m-ask .ico { width: 20px; height: 20px; }
.m-ask .ico:last-child { margin-left: auto; color: var(--muted); }
@media (max-width: 599px) and (orientation: portrait) { .hero__ask { display: none; } }
::selection { background: var(--selection); color: #f5f4f0; }

.cg-card__price { display: flex; flex-direction: column; line-height: 1.15; }
.cg-card__price small { font-size: 12px; color: var(--muted); }

.cg__more { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 500; animation: fadeUp .6s .3s var(--ease-out) both; }
.cg__more .ico { width: 18px; height: 18px; transition: transform .2s var(--ease-out); }
.cg__more:hover .ico { transform: translateX(3px); }

.hero.no-stats .hero__stats { display: none; }
.hero.compact-stats .hero__bottom { gap: 16px; }
.hero.compact-stats .hero__stats { gap: 22px; }
.hero.compact-stats .hero__stats > div { display: flex; align-items: baseline; gap: 8px; }
.hero.compact-stats .hero__stats dt { font-size: 24px; letter-spacing: -0.02em; }
.hero.compact-stats .hero__stats dd { margin: 0; max-width: none; font-size: 13px; }

/* ---------- Proof band (stats moved out of the hero) ---------- */
.proof { padding-block: 28px 0; }
.proof__in { display: grid; grid-template-columns: 1fr 1fr; }
.proof__item { display: flex; flex-direction: column; gap: 6px; padding: 18px 4px 20px; border-top: 1px solid var(--line); }
.proof__item:nth-child(odd) { padding-right: 16px; }
.proof__item:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.proof__n {
  font-family: var(--font-display); font-weight: 600; font-stretch: 112%; font-variation-settings: 'wdth' 112;
  font-size: clamp(40px, 5vw, 76px); line-height: 0.95; letter-spacing: -0.035em;
}
.proof__star { font-size: 0.45em; vertical-align: 0.7em; margin-left: 4px; }
.proof__l { font-size: 14px; color: var(--muted); line-height: 1.35; }
.proof__item--link { transition: opacity 0.2s; }
.proof__item--link:hover .proof__l { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .proof { padding-block: 72px 8px; }
  .proof__in { grid-template-columns: repeat(4, 1fr); }
  .proof__item { padding: 6px 28px 8px; border-top: 0; border-left: 1px solid var(--line); }
  .proof__item:first-child { padding-left: 0; border-left: 0; }
  .proof__item:nth-child(odd), .proof__item:nth-child(even) { padding-right: 28px; }
  .proof__item:nth-child(3) { padding-left: 28px; border-left: 1px solid var(--line); }
  .proof__l { font-size: 15px; }
}

/* ---------- Clean type pass (Oct 10): one family, Geist. Lighter weights, tight tracking, no wide or heavy display. ---------- */
.display, h1, h2, h3, .h1, .h2, .h3,
.hero__word, .hero__title, .proof__n, .reviews__big .num, .reviews__quote p, .cg__title, .cg__say,
.cg-card__name, .ycard__name, .yd__title, .reserve__price strong, .place__label h3, .builders__list li, .hero__stats dt {
  font-stretch: 100%; font-variation-settings: normal;
}
.display, h1, h2, h3, .h1, .h2, .h3, .hero__title, .cg__say, .yd__title, .place__label h3 { font-weight: 500; letter-spacing: -0.035em; }
.h3, .ycard__name, .cg-card__name { font-weight: 500; letter-spacing: -0.02em; }
.hero__word { font-weight: 500; letter-spacing: -0.06em; }
.cg__title { font-weight: 500; letter-spacing: -0.055em; }
.proof__n, .reviews__big .num, .reserve__price strong { font-weight: 400; letter-spacing: -0.045em; }
.reviews__quote p { font-weight: 400; letter-spacing: -0.03em; }
.builders__list li { font-weight: 500; letter-spacing: 0.08em; }
/* Refined display scale (Oct 10): smaller, calmer, letters never touch */
.cg__title { font-size: clamp(40px, 5.4vw, 84px); line-height: 1; letter-spacing: -0.035em; font-weight: 500; }
.cg__lede { margin-top: 18px; }
.hero__word { letter-spacing: -0.035em; }
.hero__title { letter-spacing: -0.03em; }
.display, h1, h2, h3, .h1, .h2, .h3, .cg__say, .yd__title, .place__label h3 { letter-spacing: -0.03em; }
.proof__n, .reviews__big .num, .reserve__price strong { letter-spacing: -0.035em; }
/* Concierge legibility (Oct 10): the photo is atmosphere, not detail. Even dark scrim, soft focus, text always on dark. */
.cg__bg img, .cg__video { filter: blur(6px) saturate(1.05); transform: scale(1.06); }
.cg__bg::after { background: linear-gradient(180deg, rgba(3, 14, 18, 0.62) 0%, rgba(3, 14, 18, 0.7) 55%, rgba(3, 14, 18, 0.78) 100%); }
.cg__title, .cg__lede { text-shadow: 0 1px 24px rgba(0, 10, 14, 0.45); }
.cg__lede { color: rgba(245, 244, 240, 0.94); }
.reviews__quote figcaption { gap: 0; }

/* ---------- Line discipline ---------- */
.ln { display: block; text-wrap: balance; }
/* Hero and phone intro: each sentence is exactly one line, sized to fit */
.hero__copy { width: auto; max-width: none; }
.hero__title { max-width: none; font-size: clamp(30px, 3.1vw, 58px); }
.hero__title .ln, .m-title .ln { white-space: nowrap; }
.m-title { font-size: min(7.4vw, 34px); }
.hero__sub .ln, .lede .ln, .cg__lede .ln, .reviews__count .ln { text-wrap: balance; }

.m-ask span { white-space: nowrap; }
/* Concierge chips: wrap and center on phones, never run off the edge */
@media (max-width: 899px) {
  .cg__try { flex-wrap: wrap; justify-content: center; overflow: visible; width: auto; margin-inline: 0; padding-inline: 0; }
}
.cg__ph { text-overflow: clip; }

/* Empty concierge: nothing peeks out under the tab bar */

/* ================= QA batch (Oct 10) ================= */
/* Hero layering: photo < scrim < wordmark < yacht < trail < UI, so the scrim never greys the letters */
.hero::after { z-index: 1; }
.hero__word { z-index: 2; }
.hero__cut { z-index: 3; }
.hero__trail { z-index: 4; }
.hero__ui { z-index: 5; }
/* Header legibility on the photo: a soft dark band behind the nav, logo and Call */
.hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 200px; z-index: 4; pointer-events: none; background: linear-gradient(180deg, rgba(4, 18, 22, 0.5) 0%, rgba(4, 18, 22, 0) 100%); }
.topbar[data-tone='clear'] .desk-nav a { text-shadow: 0 1px 12px rgba(0, 20, 26, 0.45); opacity: 1; }
.topbar[data-tone='clear'] .call-pill { background: rgba(10, 12, 14, 0.4); }
.brand__logo { height: calc(22px * var(--logo-k)); }
@media (min-width: 900px) { .brand__logo { height: calc(26px * var(--logo-k)); } }
.footer__brand img { height: calc(24px * var(--logo-k)); }
/* Desktop copy: always on dark */
@media (min-width: 600px), (orientation: landscape) {
  .hero::after { background: radial-gradient(48% 46% at 80% 22%, rgba(4, 18, 22, 0.55) 0%, rgba(4, 18, 22, 0) 74%), radial-gradient(60% 40% at 0% 100%, rgba(4, 18, 22, 0.34) 0%, rgba(4, 18, 22, 0) 70%); }
  .hero__title { text-shadow: 0 2px 28px rgba(0, 20, 26, 0.42); }
  .hero__sub { color: #f7f6f2; font-weight: 500; text-shadow: 0 1px 18px rgba(0, 20, 26, 0.55); }
}
/* Phone hero: TIME sits left, slightly smaller, clear of the stern */
@media (max-width: 599px) and (orientation: portrait) {
  .hero__word-line--m2 { text-align: left; padding-inline: 18px; }
}
/* Header tones */
.topbar { transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.4s var(--ease-out); }
.topbar[data-tone='dark'] { background: rgba(10, 12, 14, 0.5); }
.topbar[data-tone='glass'] { background: rgba(247, 246, 242, 0.86); -webkit-backdrop-filter: blur(24px) saturate(130%); backdrop-filter: blur(24px) saturate(130%); }
/* Tab bar goes dark over dark content, never a milky slab */
.tabbar[data-tone='dark'] { background: rgba(14, 16, 19, 0.62); box-shadow: var(--glass-dark-edge), var(--shadow-float); }
.tabbar[data-tone='dark'] a { color: var(--on-dark); }
.tabbar[data-tone='dark'] a[aria-current='page'] { background: rgba(255, 255, 255, 0.06); }
.tabbar[data-tone='dark']::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 45%); }
/* Eyebrows on dark */
.section--ink .eyebrow, .on-dark .eyebrow { color: rgba(245, 244, 240, 0.62); }
/* Tap targets */
.call-pill, .seg button, .sorts .chip, .cg__chip, .cg-card .btn--sm { min-height: 44px; }
.link-arrow, .cg__more { min-height: 44px; display: inline-flex; align-items: center; }
.footer__col a, .footer__base a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__col { gap: 0; }
.ycard__meta, .cg-card__meta { text-wrap: balance; }
/* Detail controls always on dark */
.yd__ctrl .icon-btn { background: rgba(8, 10, 12, 0.56); }
.yd__media::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 150px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0)); }
@media (min-width: 900px) { .yd__media::before { border-radius: inherit; } }
/* Low-resolution source photos never get stretched past ~1.3x on desktop */
@media (min-width: 900px) { .yd--lowres .yd__media { height: auto; aspect-ratio: 16 / 10; max-width: min(var(--lowres-w, 960px), calc(100% - 2 * var(--gutter))); } }
/* Closing band: solid dark glass, no blotches */
.concierge-band__card.glass { background: rgba(8, 14, 20, 0.72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.concierge-band__media::after { background: rgba(4, 14, 22, 0.36); }
@media (max-width: 599px) { .concierge-band__cta .btn { flex: 1 1 100%; } }
/* Reviews band without cards: tighter */
.reviews__in { margin-bottom: 0; }
/* Concierge results: grid follows the count */
.cg__results[data-n='1'] { grid-template-columns: minmax(0, 560px); }
@media (min-width: 760px) { .cg__results[data-n='2'], .cg__results[data-n='4'] { grid-template-columns: repeat(2, 1fr); } }
.cg-card__why { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.cg-card__why span { white-space: nowrap; }
.cg-card__name { display: inline-block; padding-block: 2px; }
.cg__note { color: var(--muted); font-size: 16px; margin: -12px 0 24px; max-width: 46ch; }
/* Concierge empty state on phones: the stage owns the first screen */
/* Empty concierge: one full-screen moment like the cover; the results sheet only exists once there are results */
@media (max-width: 899px) { .cg:not(.has-query) .cg__stage { min-height: 100vh; min-height: 100lvh; } .cg:not(.has-query) .cg__sheet, .cg:not(.has-query) + .view-pad { display: none; } }
/* Tablet: the phone layout should not just stretch */
@media (min-width: 700px) and (max-width: 999px) {
  .how { grid-template-columns: repeat(3, 1fr); }
  .footer__in { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
}
/* Very large screens: the chrome grows with the hero */
@media (min-width: 2200px) {
  .topbar__in, .hero__copy, .hero__bottom, .yd, .cg__stage-in { zoom: 1.25; }
}
/* Header shade sits under the wordmark, never tinting the letters */
.hero::before { z-index: 1; }
/* Tablet portrait: wordmark on one line in the open water above the yacht; headline lives on the sheet */
@media (min-width: 600px) and (max-width: 899px) and (orientation: portrait) {
  .hero__copy, .hero__ask { display: none; }
  .m-intro { display: block; }
  .hero__word { top: 21%; }
  .hero__ui { justify-content: flex-end; padding-bottom: 96px; }
}

p, li, figcaption, small, dd { text-wrap: pretty; }

/* Small phones (320 to 359): the four sort chips stay on one row */
@media (max-width: 359px) { .sorts .chip { padding: 0 11px; font-size: 13px; } }

/* Phones under 390 (SE, most Androids): the hero search button becomes a round icon so the location switch and search share one row */
@media (max-width: 389px) {
  .search__go { width: 52px; padding: 0; justify-content: center; }
  .search__go span { display: none; }
}

/* ---------- Phone: lighter reviews band, builders as a thin separator strip (Oct 11) ---------- */
@media (max-width: 599px) {
  /* Reviews: a light card carried by the paper sheet */
  .m-intro { padding-bottom: 24px; }
  .reviews { margin-inline: var(--gutter); border-radius: var(--r-lg); padding-block: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); }
  .reviews > .wrap { padding-inline: 22px; }
  .reviews__in { gap: 24px; }
  .reviews__big { gap: 14px; }
  .reviews__big .num { font-size: 58px; font-weight: 300; }
  .reviews__big .stars { --size: 16px; }
  .reviews__count { margin: 10px 0 0; font-size: 15px; }
  .reviews__score .btn { background: none; box-shadow: none; color: var(--ink); padding: 0; height: auto; min-height: 44px; margin-top: 2px; font-weight: 500; font-size: 15px; gap: 6px; }
  .reviews__score .btn .ico { width: 16px; height: 16px; }
  .reviews__quote p { font-size: 21px; line-height: 1.32; font-weight: 400; letter-spacing: -0.015em; }
  .reviews__quote figcaption { margin-top: 12px; font-size: 13px; }

  .fleet-preview { padding-top: 40px; }
}

/* ---------- Mobile pass (Oct 11): weights, quieter chrome, one grouped "how it works" card ---------- */
.rate strong, .yd__bar strong, .cg-card__price strong, .stepper__v { font-weight: 500; }
.notes li > span, .how__card p, .bk-extra-d { text-wrap: balance; }
.cg__human .h3 { margin: 0 0 6px; }
@media (max-width: 899px) {
  .footer__col a[href^='tel:'] { display: none; } /* the header Call pill is on every screen */
  body:not([data-route='explore']) .footer { display: none; } /* app routes end at their content, not a website footer */
}
@media (max-width: 599px) {
  .how { gap: 0; background: var(--card); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); }
  .how .how__card { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 18px; background: none; box-shadow: none; border-radius: 0; }
  .how .how__card + .how__card { box-shadow: inset 0 1px 0 var(--line); }
  .how__ico { width: 40px; height: 40px; grid-row: span 2; }
  .how__card .h3 { margin: 0 0 2px; font-size: 17px; }
  .how__card p { font-size: 15px; }
}

/* ---------- Yacht page (Oct 11): rates are the duration control, a checklist instead of inert chips, an opaque reserve bar ---------- */
.rate { width: 100%; text-align: left; font: inherit; color: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.18s var(--ease-out), box-shadow 0.2s; }
.rate:active { transform: scale(0.98); }
.rate[aria-pressed='true'] { box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow-card); }
.rate[aria-pressed='true'] span { color: var(--accent); }
.rate[disabled] { opacity: 0.45; cursor: default; }
.incl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; font-size: 15px; }
.incl li { display: flex; align-items: center; gap: 10px; }
.incl .ico { width: 18px; height: 18px; flex: none; }
.incl .is-wide { grid-column: 1 / -1; }
.notes--plain li { display: block; }
@media (max-width: 899px) {
  .yd__bar { left: 0; right: 0; bottom: 0; border-radius: 0; padding: 12px 20px calc(12px + var(--safe-b)); background: var(--paper); box-shadow: 0 -1px 0 var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .yd__bar .btn { min-height: 52px; min-width: 148px; }
  .yd__ctrl { position: fixed; top: calc(var(--safe-t) + 12px); left: 0; right: 0; z-index: 45; pointer-events: none; }
  .yd__ctrl .icon-btn { pointer-events: auto; }
}

/* ---------- Sheets and fleet chrome (Oct 11) ---------- */
@media (max-width: 899px) {
  html.sheet-open .topbar, html.sheet-open .yd__ctrl { opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease-out); }
  .filters { position: relative; top: auto; } /* only the header stays pinned over the photo grid */
}

/* Concierge results (Oct 11) */
.cg__answer { scroll-margin-top: calc(var(--topbar-h) + var(--safe-t) + 16px); }
.cg__group { grid-column: 1 / -1; margin: 16px 0 2px; }
.cg__group:first-child, .cg__two + .cg__group { margin-top: 0; }
.cg__two { grid-column: 1 / -1; justify-self: start; margin-bottom: 8px; }
.cg.is-nofit .cg__human { display: none; }

/* Yacht page nav bar (phones): clear over the photo, glass with the name once scrolled */
.yd__ctrl-t { display: none; }
@media (max-width: 899px) {
  .yd__ctrl { align-items: center; transition: background-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), padding 0.25s var(--ease-out); }
  .yd__ctrl-t { display: block; flex: 1; min-width: 0; text-align: center; font-weight: 500; font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; opacity: 0; transition: opacity 0.2s var(--ease-out); }
  .yd__ctrl.is-solid { top: 0; padding-top: calc(var(--safe-t) + 6px); padding-bottom: 6px; background: rgba(247, 246, 242, 0.88); -webkit-backdrop-filter: blur(24px) saturate(130%); backdrop-filter: blur(24px) saturate(130%); box-shadow: 0 1px 0 var(--line); pointer-events: auto; }
  .yd__ctrl.is-solid .yd__ctrl-t { opacity: 1; }
  .yd__ctrl.is-solid .icon-btn { background: transparent; color: var(--ink); box-shadow: none; }
}
/* Desktop: the Rates list is the duration control, so the reserve card doesn't repeat it as a second switch */
@media (min-width: 900px) { .yd__reserve [data-durs] { display: none; } }

/* ---------- Reviews in light; builders as a slow dark band (Oct 11) ---------- */
.reviews { color: var(--ink); }
.reviews__count, .reviews__quote figcaption { color: var(--muted); }
.reviews .stars { background: linear-gradient(90deg, var(--ink) calc(var(--r) / 5 * 100%), rgba(10, 12, 14, 0.14) 0); }
.reviews__big .num { font-weight: 300; }

.brands { background: var(--ink); color: rgba(245, 244, 240, 0.74); overflow: hidden; padding-block: 26px; pointer-events: none; user-select: none; }
.brands__view { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.brands__track { display: flex; width: max-content; animation: brands 46s linear infinite; }
.brands__set { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
.brands__item { flex: none; display: inline-flex; align-items: center; height: 36px; }
.brands__item img { height: var(--h, 22px); width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.72; }
@keyframes brands { to { transform: translate3d(-50%, 0, 0); } }
@media (min-width: 900px) { .brands { padding-block: 38px; } .brands__set { gap: 96px; padding-right: 96px; } .brands__item { height: 42px; } .brands__item img { height: calc(var(--h, 22px) * 1.18); } }
@media (max-width: 599px) { .brands { margin-top: 32px; padding-block: 22px; } .brands__set { gap: 52px; padding-right: 52px; } .brands__item img { height: calc(var(--h, 22px) * 0.86); } .fleet-preview { padding-top: 48px; } }
@media (prefers-reduced-motion: reduce) {
  .brands__track { animation: none; width: auto; justify-content: center; }
  .brands__set { flex-wrap: wrap; justify-content: center; row-gap: 20px; padding-right: 0; }
  .brands__set[aria-hidden] { display: none; }
}

/* ---------- Reduced motion: text fitting measures synchronously ---------- */
/* system.css turns every style change into a 0.01ms transition under reduced motion, so the hero word and yacht titles
   would be measured at their old size and fit to a third of it. Fitted text never transitions. */
@media (prefers-reduced-motion: reduce) { .hero__word, .hero__word-line, [data-title] { transition: none !important; } }

/* ---------- No cutout (hero--flat): the wordmark sits above the subject, never behind it ---------- */
/* Desktop and landscape: the word takes the open band under the header (fitHero sizes it); headline and search sit together at the bottom left */
@media (min-width: 600px), (orientation: landscape) {
  .hero--flat .hero__ui { justify-content: flex-end; }
  .hero--flat .hero__copy { align-self: flex-start; margin-bottom: 30px; }
  .hero--flat::after { background: radial-gradient(70% 70% at 0% 100%, rgba(4, 18, 22, 0.6) 0%, rgba(4, 18, 22, 0) 72%), linear-gradient(0deg, rgba(4, 18, 22, 0.34) 0%, rgba(4, 18, 22, 0) 48%); }
}
/* Tablet portrait already sets the word above the subject; phones keep the open water above and below it */

/* ---------- One yacht: Home's "Choose your yacht" is the yacht itself ---------- */
.solo__in { display: grid; gap: 22px; }
.solo__media {
  display: block; position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--paper-2);
  box-shadow: var(--shadow-card); transform: translateZ(0); -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.solo__media::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(10, 12, 14, 0.06); pointer-events: none; }
.solo__media picture { display: contents; }
.solo__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.solo__media:active { transform: scale(0.985); }
@media (hover: hover) { .solo__media:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .solo__media:hover img { transform: scale(1.03); } }
.solo__body .lede { margin-top: 12px; }
.solo__rates { margin: 26px 0 0; }
.solo__rates div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.solo__rates div:last-child { border-bottom: 1px solid var(--line); }
.solo__rates dt { color: var(--muted); }
.solo__rates dd { margin: 0; font-size: 17px; font-weight: 500; }
.solo__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 26px; }
@media (min-width: 900px) {
  .solo__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 72px; align-items: center; }
  .solo__media { aspect-ratio: 16 / 10; border-radius: var(--r-lg); }
}
@media (max-width: 599px) { .solo { padding-top: 48px; } .solo__cta .btn { flex: 1 1 100%; } }

/* Still hero photo: a slow cinematic drift (prospect demos whose cover is their own photo) */
.hero--drift .hero__photo { animation: none; } /* Oct 13: never a slow zoom on a still (Michael: 'ancient in design terms'); covers move with real video or not at all */
@keyframes heroDrift { from { transform: scale(1.03); } to { transform: scale(1.12) translate3d(-1.2%, -0.8%, 0); } }
@media (prefers-reduced-motion: reduce) { .hero--drift .hero__photo { animation: none; } }
/* Still hero photo: a scrim so the wordmark and header read on bright skies and busy docks */
.hero--drift .hero__media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4, 18, 22, 0.46) 0%, rgba(4, 18, 22, 0.16) 38%, rgba(4, 18, 22, 0.2) 66%, rgba(4, 18, 22, 0.52) 100%); }
.hero--drift .hero__word { text-shadow: 0 2px 28px rgba(0, 12, 16, 0.28); }
/* Header: a wide logo never pushes the Call button off the screen */
.brand { flex: 0 1 auto; min-width: 0; }
.brand__logo { max-width: min(46vw, 240px); object-fit: contain; object-position: left center; }
/* Long boat names wrap to a second line inside their card (never widen the grid, never truncate) */
.ycard__name { white-space: normal; text-wrap: balance; min-width: 0; }
.ycard__top { align-items: flex-start; }
@media (max-width: 639px) { .grid, .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.yd__main, .yd__grid > * { min-width: 0; } /* a long yacht title shrinks to its column, never widens it */
/* Reviews without a quote: the score centred on its own, no empty half */
.reviews__in:not(:has(.reviews__quote)) { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.reviews__in:not(:has(.reviews__quote)) .reviews__big { justify-content: center; }
.rate-note--solo { font-size: 16px; color: var(--ink); margin-top: 4px; }

/* ================= Looks (Oct 13): every prospect gets its own combination, no two alike in a city ================= */
.hero__mono { display: none; }
/* Water grade: only the water layer is tinted; their boat cutout keeps its true colours */
html[data-water='navy'] .hero__media, html[data-water='navy'] .cg__bg { filter: hue-rotate(16deg) saturate(0.92) brightness(0.6) contrast(1.08); }
html[data-water='lagoon'] .hero__media, html[data-water='lagoon'] .cg__bg { filter: hue-rotate(6deg) saturate(1.12) brightness(0.74) contrast(1.1); }
html[data-water='sapphire'] .hero__media, html[data-water='sapphire'] .cg__bg { filter: hue-rotate(28deg) saturate(1.05) brightness(0.68) contrast(1.08); }

/* Cover: masthead (a big headline, no giant wordmark; the logo leads in the header) */
html[data-cover='masthead'] .hero__word, html[data-cover='monogram'] .hero__word { display: none; }
html[data-cover='masthead'] .hero__title { font-size: clamp(44px, 5.2vw, 88px); line-height: 1.02; }
@media (min-width: 900px) {
  html[data-cover='masthead'] .hero__ui { justify-content: flex-end; }
  html[data-cover='masthead'] .hero__copy { align-self: flex-start; width: min(720px, 52vw); margin-bottom: 34px; }
}
/* Cover: monogram (their mark, large and centred; the headline under it) */
html[data-cover='monogram'] .hero__mono { display: block; position: absolute; z-index: 5; left: 50%; top: 34%; transform: translate(-50%, -50%); height: clamp(96px, 13vw, 190px); width: auto; max-width: min(64vw, 620px); object-fit: contain; filter: drop-shadow(0 6px 34px rgba(0, 16, 22, 0.32)); pointer-events: none; animation: monoIn 1.1s 0.3s var(--ease-out) both; }
@keyframes monoIn { from { opacity: 0; } to { opacity: 1; } } /* opacity only: a transform here would undo the centring */
html[data-cover='monogram'] .topbar[data-tone='clear'] .brand { opacity: 0; pointer-events: none; } /* the mark is already on the cover */
@media (min-width: 900px) {
  html[data-cover='monogram'] .hero__ui { align-items: center; text-align: center; justify-content: flex-end; }
  html[data-cover='monogram'] .hero__copy { align-self: center; width: min(720px, 60vw); margin-bottom: 26px; }
  html[data-cover='monogram'] .hero__bottom { align-items: center; }
  html[data-cover='monogram'] .hero__title { font-size: clamp(36px, 3.6vw, 60px); }
}
/* Phones: masthead and monogram carry the headline on the cover, so the sheet doesn't repeat it */
@media (max-width: 599px) and (orientation: portrait) {
  html[data-cover='masthead'] .hero__copy, html[data-cover='monogram'] .hero__copy { display: block; }
  html[data-cover='masthead'] .hero__ui, html[data-cover='monogram'] .hero__ui { justify-content: flex-end; padding-bottom: calc(28px + (100lvh - 100svh) + 10px + var(--tabbar-h) + var(--safe-b) + 30px); }
  html[data-cover='masthead'] .hero__title { font-size: min(11.4vw, 46px); }
  html[data-cover='monogram'] .hero__copy { text-align: center; }
  html[data-cover='monogram'] .hero__title { font-size: min(8.6vw, 34px); }
  html[data-cover='monogram'] .hero__mono { top: 26%; height: auto; width: min(66vw, 300px); max-height: 22vh; }
  html[data-cover='masthead'] .m-intro, html[data-cover='monogram'] .m-intro { display: none; }
  html[data-cover='masthead'] .explore-sheet, html[data-cover='monogram'] .explore-sheet { padding-top: 12px; }
}

/* Page tone */
html[data-page='sand'] { --paper: #f4efe6; --paper-2: #ebe3d4; --glass-light-bg: rgba(244, 239, 230, 0.78); }
html[data-page='mist'] { --paper: #eef2f2; --paper-2: #e1e8e9; --glass-light-bg: rgba(238, 242, 242, 0.78); }
html[data-page='sand'] body, html[data-page='mist'] body { background: var(--paper); }

/* Section order: the fleet before the reviews */
html[data-order='fleet-first'] .explore-sheet { display: flex; flex-direction: column; }
html[data-order='fleet-first'] .explore-sheet > .m-intro { order: 0; }
html[data-order='fleet-first'] .explore-sheet > .solo, html[data-order='fleet-first'] .explore-sheet > .fleet-preview { order: 1; }
html[data-order='fleet-first'] .explore-sheet > .reviews { order: 2; margin-top: 8px; }
html[data-order='fleet-first'] .explore-sheet > .brands { order: 3; margin-top: 40px; }
html[data-order='fleet-first'] .explore-sheet > .included { order: 4; }
html[data-order='fleet-first'] .explore-sheet > .concierge-band { order: 5; }

/* Cards: name and price over the photo (dark scrim at the foot, never a white fade) */
html[data-cards='overlay'] .ycard { overflow: hidden; border-radius: 20px; }
html[data-cards='overlay'] .ycard__media::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(180deg, rgba(4, 12, 16, 0) 42%, rgba(4, 12, 16, 0.72) 100%); pointer-events: none; }
html[data-cards='overlay'] .ycard__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 16px 15px; color: #fff; pointer-events: none; }
html[data-cards='overlay'] .ycard__meta, html[data-cards='overlay'] .ycard__price, html[data-cards='overlay'] .ycard__guests { color: rgba(255, 255, 255, 0.82); }
html[data-cards='overlay'] .ycard__price strong { color: #fff; }
html[data-cards='overlay'] .grid .ycard__media, html[data-cards='overlay'] .rail .ycard__media { aspect-ratio: 4 / 5; }
@media (min-width: 640px) { html[data-cards='overlay'] .grid .ycard__media, html[data-cards='overlay'] .rail .ycard__media { aspect-ratio: 4 / 3.4; } }
.seg button { white-space: nowrap; } /* a long city name never wraps inside its switch */
/* Desktop: a fleet of one or two fills the row with large cards (no small cards hugging the left) */
@media (min-width: 900px) {
  .rail:not(:has(> :nth-child(3))) { grid-auto-columns: calc((min(100vw, var(--maxw)) - 2 * var(--gutter) - 24px) / 2); }
  .rail:not(:has(> :nth-child(3))) .ycard__media { aspect-ratio: 16 / 10; }
}

/* Masthead cover: their logo leads the cover (top-left, large), so the name is never only the small header mark */
html[data-cover='masthead'] .hero__mono { display: block; position: absolute; z-index: 5; pointer-events: none;
  left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); top: calc(var(--topbar-h) + var(--safe-t) + 28px);
  height: clamp(56px, 6.4vw, 120px); width: auto; max-width: min(46vw, 560px); object-fit: contain; object-position: left center;
  filter: drop-shadow(0 4px 26px rgba(0, 16, 22, 0.3)); animation: monoIn 1.1s 0.3s var(--ease-out) both; }
html[data-cover='masthead'] .topbar[data-tone='clear'] .brand { opacity: 0; pointer-events: none; }
@media (max-width: 599px) and (orientation: portrait) {
  html[data-cover='masthead'] .hero__mono { top: calc(var(--safe-t) + 14px); height: auto; width: auto; max-height: 64px; max-width: 62vw; }
}
/* Monogram on short laptops: the mark never reaches the headline */
@media (min-width: 900px) { html[data-cover='monogram'] .hero__mono { top: 30%; height: min(clamp(96px, 13vw, 190px), 20vh); } }
@media (max-width: 599px) and (orientation: portrait) { html[data-cover='monogram'] .hero__mono { top: 20%; max-height: 16vh; } }
/* Guard: nothing at load can widen the phone's layout viewport (a 4-11px zoom-out showed on two demos) */
html { overflow-x: clip; }

/* ================= Company sections (Oct 13): each company's own story, from its own photos and words ================= */
html[data-custom] .explore-sheet { display: flex; flex-direction: column; }
html[data-custom] .explore-sheet > .m-intro { order: 0; }
html[data-custom] .explore-sheet > .reviews,
html[data-custom] .explore-sheet > .brands,
html[data-custom] .explore-sheet > .included,
html[data-custom] .explore-sheet > .concierge-band { display: none; }
.cs { padding-block: clamp(64px, 9vw, 140px); }
.cs .eyebrow { margin: 0 0 14px; }
.cs .h2 { margin: 0; font-size: clamp(32px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -0.035em; }
.cs .lede { margin: 18px 0 0; max-width: 46ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--muted); }
.cs-head { margin-bottom: clamp(28px, 4vw, 56px); }
.cs picture, .cs picture img { display: block; width: 100%; height: 100%; }
.cs picture img { object-fit: cover; }

/* feature: their photo as an object, copy beside it */
.cs-feature__in { display: grid; gap: 28px; align-items: center; }
.cs-feature__media { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-lift); }
.cs-feature__media img { transition: transform 1.2s var(--ease-out); }
@media (hover: hover) { .cs-feature__media:hover img { transform: scale(1.03); } }
.cs-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.cs-points li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; }
.cs-points .ico { width: 18px; height: 18px; flex: none; color: var(--accent); transform: translateY(3px); }
@media (min-width: 900px) {
  .cs-feature__in { grid-template-columns: 1.05fr 0.95fr; gap: clamp(48px, 7vw, 120px); }
  .cs-feature--left .cs-feature__media { order: 2; }
  .cs-feature__media { aspect-ratio: 4 / 4.6; }
}
@media (max-width: 899px) { .cs-feature__media { border-radius: 24px; } }

/* mosaic: one lead photo and a row of places */
.cs-mosaic__grid { display: grid; gap: 14px; padding-inline: var(--gutter); }
.cs-tile { margin: 0; position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-card); isolation: isolate; }
.cs-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 12, 16, 0) 52%, rgba(4, 12, 16, 0.66) 100%); pointer-events: none; }
.cs-tile figcaption { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #fff; display: grid; gap: 2px; }
.cs-tile figcaption strong { font-weight: 500; font-size: 19px; letter-spacing: -0.02em; }
.cs-tile figcaption span { font-size: 14px; color: rgba(255, 255, 255, 0.82); }
@media (min-width: 900px) {
  .cs-mosaic__grid { max-width: var(--maxw); margin-inline: auto; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; height: min(76vh, 760px); }
  .cs-tile { aspect-ratio: auto; }
  .cs-tile--lead { grid-row: span 2; }
  .cs-tile:nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 899px) {
  .cs-mosaic__grid { grid-auto-flow: column; grid-auto-columns: 74vw; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
  .cs-mosaic__grid::-webkit-scrollbar { display: none; }
  .cs-tile { scroll-snap-align: start; }
}

/* voices: the score and real, named reviews */
.cs-voices__in { display: grid; gap: 34px; }
.cs-voices__score { display: grid; gap: 10px; align-content: start; }
.cs-voices__score .num { font-size: clamp(76px, 9vw, 132px); font-weight: 300; line-height: 0.9; letter-spacing: -0.05em; }
.cs-voices__score .stars { --size: 20px; background: linear-gradient(90deg, var(--ink) calc(var(--r) / 5 * 100%), rgba(10, 12, 14, 0.14) 0); }
.cs-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 500; }
.cs-link .ico { width: 16px; height: 16px; transition: transform 0.2s var(--ease-out); }
.cs-link:hover .ico { transform: translateX(3px); }
.cs-voices__quotes { display: grid; gap: 16px; }
.cs-quote { margin: 0; padding: clamp(24px, 2.6vw, 36px); border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); }
.cs-quote blockquote { margin: 0; }
.cs-quote p { margin: 0; font-size: clamp(20px, 1.8vw, 27px); line-height: 1.32; letter-spacing: -0.02em; text-wrap: balance; }
.cs-quote figcaption { margin-top: 16px; font-size: 14px; font-weight: 500; }
.cs-quote figcaption span { font-weight: 400; color: var(--muted); }
@media (min-width: 900px) { .cs-voices__in { grid-template-columns: 0.7fr 1.3fr; gap: clamp(48px, 7vw, 120px); align-items: center; } .cs-voices__quotes { grid-template-columns: 1fr 1fr; } }

/* story: their words over their photo (dark scrim, never a white fade) */
.cs-story { position: relative; padding: 0; min-height: min(92vh, 860px); display: grid; align-items: end; color: #fff; overflow: hidden; }
.cs-story__media { position: absolute; inset: 0; }
.cs-story__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 14, 18, 0.05) 30%, rgba(4, 14, 18, 0.72) 100%); }
.cs-story__in { position: relative; z-index: 1; padding-block: clamp(56px, 8vw, 120px); }
.cs-story .eyebrow { color: rgba(255, 255, 255, 0.78); }
.cs-story__quote { margin: 0; max-width: 680px; }
.cs-story__quote p { margin: 0; font-size: clamp(28px, 3.1vw, 48px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 400; text-wrap: balance; }
.cs-story__by { margin: 22px 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.82); }
@media (max-width: 599px) { .cs-story { min-height: 88svh; } .cs-story__media img { object-position: var(--story-pos, 50% 50%); } }

/* meet: the real places to start */
.cs-meet__grid { display: grid; gap: 14px; }
.cs-place { display: grid; grid-template-columns: 52px 1fr 24px; gap: 16px; align-items: center; padding: 22px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); transition: transform 0.25s var(--ease-out), box-shadow 0.25s; }
.cs-place:active { transform: scale(0.985); }
@media (hover: hover) { .cs-place:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lift); } }
.cs-place__pin { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); }
.cs-place__pin .ico { width: 22px; height: 22px; }
.cs-place__t { display: grid; gap: 3px; }
.cs-place__t strong { font-weight: 500; font-size: 18px; letter-spacing: -0.015em; }
.cs-place__t span { color: var(--muted); font-size: 15px; }
.cs-place__t em { font-style: normal; font-size: 14px; color: var(--ink); }
.cs-place__go { width: 20px; height: 20px; color: var(--muted); }
@media (min-width: 900px) { .cs-meet__grid { grid-template-columns: 1fr 1fr; gap: 18px; } .cs-place { padding: 28px; } }

/* close: their sunset, the one action */
.cs-close { position: relative; padding: 0; min-height: min(86vh, 820px); display: grid; align-items: center; color: #fff; overflow: hidden; text-align: center; }
.cs-close__media { position: absolute; inset: 0; }
.cs-close__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 12, 16, 0.5) 0%, rgba(4, 12, 16, 0.08) 38%, rgba(4, 12, 16, 0.08) 62%, rgba(4, 12, 16, 0.5) 100%); } /* light in the middle: a bright sun stays a sun, never a grey disc */
.cs-close .h1, .cs-close .lede { text-shadow: 0 2px 30px rgba(0, 10, 14, 0.55); }
.cs-close__in { position: relative; z-index: 1; padding-block: 96px; display: grid; justify-items: center; }
.cs-close .h1 { margin: 0; font-size: clamp(40px, 6vw, 92px); line-height: 1.02; letter-spacing: -0.04em; }
.cs-close .lede { color: rgba(255, 255, 255, 0.86); margin: 18px auto 0; }
.cs-close__cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 30px; }
html[data-custom] .footer { margin-top: 0; }
.cs-story--long .cs-story__quote { max-width: 760px; }
.cs-story--long .cs-story__quote p { font-size: clamp(22px, 2.3vw, 36px); line-height: 1.22; }