/* =========================================================================
   BLACKBIRD YACHTS · CHARTER DOSSIER
   A confidential portfolio for the private broker who never built a website.
   All typography, all hairlines, all precision. Zero yacht-rental clichés.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');

:root {
  /* Surfaces — deeper base than spec reads richer */
  --graphite: #14171C;
  --graphite-mid: #21252D;
  --slate: #2A2F39;
  --slate-deep: #1A1D24;
  --fog: #D4D6DC;
  --bone: #F5F5F7;
  --mist: #E8EAEE;

  /* Type on dark */
  --ink: #E8EAEE;
  --ink-muted: rgba(232, 234, 238, 0.68);
  --ink-faint: rgba(232, 234, 238, 0.40);
  --ink-ghost: rgba(232, 234, 238, 0.16);

  /* Type on light */
  --onlight: #14171C;
  --onlight-muted: rgba(20, 23, 28, 0.68);
  --onlight-faint: rgba(20, 23, 28, 0.40);

  /* Accent — steel only */
  --steel: #7B8FA8;
  --steel-bright: #A4B5CA;
  --steel-deep: #5A6E87;
  --steel-glow: rgba(164, 181, 202, 0.22);

  /* Hairlines */
  --hairline-dark: rgba(164, 181, 202, 0.14);
  --hairline-dark-strong: rgba(164, 181, 202, 0.32);
  --hairline-light: rgba(20, 23, 28, 0.12);
  --hairline-steel: rgba(123, 143, 168, 0.5);

  /* booking.css compatibility aliases */
  --gold: var(--steel);
  --gold-bright: var(--steel-bright);
  --gold-soft: var(--steel-deep);
  --paper: var(--slate);
  --warm-white: var(--slate);
  --cream-deep: var(--slate);
  --sand: var(--slate-deep);
  --navy: var(--slate-deep);
  --navy-deep: var(--graphite);
  --navy-soft: var(--slate);
  --ivory: var(--bone);

  /* Layout */
  --max-w: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(5rem, 10vw, 8rem);

  /* Motion */
  --ease-out-long: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* =========================================================================
   RESET & BASE
   ========================================================================= */

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

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

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-feature-settings: "kern";
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--graphite);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.5;
  min-height: 100vh;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}

ul {
  list-style: none;
}

::selection {
  background: var(--steel-bright);
  color: var(--graphite);
}

/* =========================================================================
   LAYOUT HELPERS
   ========================================================================= */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  position: relative;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* Grain texture for dark sections */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' stitchTiles='stitch' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.8'/%3E%3C/svg%3E");
  z-index: 1;
}

.grain > * {
  position: relative;
  z-index: 2;
}

/* Ambient gradient glow */
.glow-tl,
.glow-br {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
}

.glow-tl {
  top: -10%;
  left: -15%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, var(--steel-glow), transparent 70%);
}

.glow-br {
  bottom: -15%;
  right: -15%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(90, 110, 135, 0.18), transparent 70%);
}

/* Section intro kicker — architect's cross mark */
.section-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--steel-bright);
  margin-bottom: 32px;
}

.section-label::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--steel-bright);
}

/* =========================================================================
   NAV — confidential register bar
   ========================================================================= */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 18px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  transition: background 0.4s var(--ease-out), backdrop-filter 0.4s, border-color 0.4s, padding 0.4s;
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: rgba(20, 23, 28, 0.72);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom-color: var(--hairline-dark);
  padding-top: 14px;
  padding-bottom: 14px;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wordmark {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-status {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border: 1px solid var(--hairline-dark);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 1100px) {
  .nav-status { display: inline-flex; }
}

.nav-status-dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--steel-bright);
}

.nav-status-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--steel-bright);
  opacity: 0.5;
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

.nav-coords {
  justify-self: center;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--ink-faint);
  font-weight: 500;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  display: none;
}
@media (min-width: 900px) {
  .nav-coords { display: block; }
}

.nav-coords span {
  color: var(--steel-bright);
}

.nav-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links {
  display: none;
  gap: 32px;
}
@media (min-width: 800px) {
  .nav-links { display: flex; }
}

.nav-links a {
  position: relative;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 4px 0;
  transition: color 0.3s;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--steel-bright);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}

.nav-links a:hover {
  color: var(--ink);
}
.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  position: relative;
  padding: 10px 18px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--hairline-dark-strong);
  border-radius: 999px;
  transition: all 0.35s var(--ease-out);
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.nav-cta:hover {
  background: var(--bone);
  color: var(--graphite);
  border-color: var(--bone);
}

/* =========================================================================
   HERO — full frame, text pinned bottom-left
   ========================================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.94;
  animation: heroSlowZoom 30s var(--ease-out) forwards;
}

@keyframes heroSlowZoom {
  from { transform: scale(1.06); }
  to { transform: scale(1.0); }
}

.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(20,23,28,0.5) 0%,
      rgba(20,23,28,0.08) 25%,
      rgba(20,23,28,0.18) 55%,
      rgba(20,23,28,0.92) 100%),
    radial-gradient(ellipse at 18% 92%, rgba(20,23,28,0.6) 0%, transparent 55%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(72px + var(--gutter));
  padding-bottom: clamp(40px, 8vw, 80px);
}

/* Top-right coordinate strip */
.hero-coords {
  position: absolute;
  top: 100px;
  right: var(--gutter);
  z-index: 3;
  padding: 10px 14px;
  border: 1px solid var(--hairline-dark);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  background: rgba(20, 23, 28, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadeIn 1s var(--ease-out) 1.4s forwards;
}

@media (min-width: 900px) {
  .hero-coords { display: flex; }
}

.hero-coords-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--steel-bright);
}

.hero-coords span + span {
  color: var(--steel-bright);
}

.hero-text {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--steel-bright);
  margin-bottom: clamp(20px, 4vw, 36px);
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-out-long) 0.3s forwards;
}

.hero-kicker::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--steel-bright);
}

.hero-title {
  font-size: clamp(3rem, 10vw, 9rem);
  font-weight: 200;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
  max-width: 1100px;
}

.hero-title > span {
  display: block;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 1.3s var(--ease-out-long) forwards;
}

.hero-title > span:nth-child(1) { animation-delay: 0.5s; }
.hero-title > span:nth-child(2) {
  animation-delay: 0.72s;
  color: var(--steel-bright);
  font-weight: 300;
}

.hero-lead {
  margin-top: clamp(20px, 4vw, 36px);
  max-width: 540px;
  font-size: clamp(13.5px, 1.7vw, 15px);
  line-height: 1.65;
  color: var(--ink-muted);
  font-weight: 400;
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-out-long) 1s forwards;
}

.hero-meta-row {
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--hairline-dark);
  display: flex;
  gap: clamp(20px, 5vw, 48px);
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-out-long) 1.25s forwards;
}

.hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-meta-val {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.hero-meta-val small {
  font-size: 0.55em;
  color: var(--ink-faint);
  margin-left: 3px;
  letter-spacing: 0;
}

.hero-meta-key {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Scroll cue */
.hero-scroll {
  position: absolute;
  left: var(--gutter);
  bottom: 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  animation: fadeIn 1s var(--ease-out) 1.8s forwards;
  display: none;
}
@media (min-width: 700px) {
  .hero-scroll { display: flex; }
}

.hero-scroll-line {
  width: 48px;
  height: 1px;
  background: var(--ink-ghost);
  position: relative;
  overflow: hidden;
}

.hero-scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--steel-bright);
  transform: translateX(-100%);
  animation: scrollCue 3s ease-in-out infinite;
}

@keyframes scrollCue {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* =========================================================================
   INTRO BRIEF — two-column typographic, minimalist
   ========================================================================= */

.intro {
  padding-top: calc(var(--section-y) * 1.3);
  padding-bottom: calc(var(--section-y) * 0.9);
  position: relative;
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

@media (min-width: 900px) {
  .intro-grid {
    grid-template-columns: 4fr 7fr;
    gap: 120px;
  }
}

.intro-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--steel-bright);
  display: flex;
  align-items: center;
  gap: 16px;
}

.intro-label::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--steel-bright);
}

.intro-copy h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 32px;
}

.intro-copy h2 em {
  font-style: normal;
  color: var(--steel-bright);
  font-weight: 400;
}

.intro-copy p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-muted);
  max-width: 620px;
}

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

/* Registry-style key/value list */
.intro-registry {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  border-top: 1px solid var(--hairline-dark);
}

.intro-registry-item {
  padding: 24px 16px;
  border-right: 1px solid var(--hairline-dark);
  text-align: center;
}

.intro-registry-item:last-child { border-right: 0; }

.intro-registry-key {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.intro-registry-val {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* =========================================================================
   FLEET MANIFEST — the centerpiece (tabular, cinematic)
   ========================================================================= */

.manifest {
  position: relative;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.manifest-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: end;
  margin-bottom: 72px;
}

@media (min-width: 900px) {
  .manifest-head {
    grid-template-columns: 1fr auto;
    gap: 48px;
  }
}

.manifest-title {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  font-weight: 200;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}

.manifest-title span {
  display: block;
  color: var(--steel-bright);
  font-weight: 300;
  margin-top: 0.2em;
}

.manifest-count {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border: 1px solid var(--hairline-dark);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  align-self: start;
}

@media (min-width: 900px) {
  .manifest-count { align-self: end; }
}

.manifest-count strong {
  color: var(--ink);
  font-weight: 600;
}

.manifest-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* =========================================================================
   VESSEL CARD — the signature component
   Full-bleed background image + dark gradient overlay + content on top.
   ========================================================================= */

.vessel {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  border-radius: 4px;
  min-height: 160px;
  background: var(--graphite-mid);
  border: 1px solid var(--hairline-dark);
  transition: border-color 0.5s var(--ease-out), transform 0.5s var(--ease-out-long);
}

@media (min-width: 700px) {
  .vessel { min-height: 180px; }
}

.vessel.flagship {
  min-height: 200px;
}
@media (min-width: 700px) {
  .vessel.flagship { min-height: 220px; }
}

.vessel:hover {
  border-color: var(--hairline-dark-strong);
}

/* Background image */
.vessel-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.vessel-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: brightness(0.55) contrast(1.08) saturate(0.7);
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-out-long), filter 0.7s var(--ease-out);
}

.vessel:hover .vessel-bg img {
  transform: scale(1.06);
  filter: brightness(0.62) contrast(1.1) saturate(0.85);
}

/* Atmospheric gradient overlay — readable text on any photo */
.vessel-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(20, 23, 28, 0.92) 0%,
      rgba(20, 23, 28, 0.82) 30%,
      rgba(20, 23, 28, 0.55) 65%,
      rgba(20, 23, 28, 0.78) 100%),
    linear-gradient(180deg,
      rgba(20, 23, 28, 0.4) 0%,
      transparent 35%,
      transparent 65%,
      rgba(20, 23, 28, 0.4) 100%);
  z-index: 1;
}

/* Subtle steel-blue glow on hover (top-right corner) */
.vessel::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(164, 181, 202, 0.18), transparent 65%);
  filter: blur(60px);
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
  z-index: 1;
  pointer-events: none;
}

.vessel:hover::before {
  opacity: 1;
}

/* Content layout on top of background */
.vessel-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 24px 22px;
  height: 100%;
  min-height: inherit;
  align-items: stretch;
  transition: padding 0.5s var(--ease-out);
}

@media (min-width: 900px) {
  .vessel-inner {
    grid-template-columns: 60px 1fr auto auto;
    gap: 28px;
    padding: 28px 36px;
    align-items: center;
  }
}

@media (min-width: 900px) {
  .vessel:hover .vessel-inner { padding-left: 48px; }
}

.vessel-num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  transition: color 0.4s, letter-spacing 0.5s;
  align-self: start;
  padding-top: 4px;
}

.vessel:hover .vessel-num {
  color: var(--steel-bright);
  letter-spacing: 0.36em;
}

.vessel-head {
  min-width: 0;
}

.vessel-name {
  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--ink);
  transition: transform 0.6s var(--ease-out-long), letter-spacing 0.6s var(--ease-out-long);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.vessel.flagship .vessel-name {
  font-size: clamp(2.25rem, 6vw, 4.25rem);
  font-weight: 200;
}

.vessel:hover .vessel-name {
  transform: translateX(8px);
  letter-spacing: 0.05em;
}

.vessel-tag {
  display: block;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.5;
  max-width: 480px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

/* Specs — set inline glass chip on the photo backdrop */
.vessel-specs {
  display: none;
  align-items: center;
  gap: 24px;
  padding: 14px 20px;
  background: rgba(20, 23, 28, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--hairline-dark);
  border-radius: 999px;
  white-space: nowrap;
}

@media (min-width: 900px) {
  .vessel-specs { display: inline-flex; }
}

.vessel-spec {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.vessel-spec-val {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
}

.vessel-spec.price {
  padding-left: 24px;
  border-left: 1px solid var(--hairline-dark);
}

.vessel-spec.price .vessel-spec-val {
  color: var(--steel-bright);
  font-weight: 600;
}

/* Mobile: stack specs vertically below */
.vessel-specs-mobile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (min-width: 900px) { .vessel-specs-mobile { display: none; } }

.vessel-specs-mobile .price { color: var(--steel-bright); font-weight: 600; }

.vessel-arrow {
  width: 48px;
  height: 48px;
  background: rgba(20, 23, 28, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hairline-dark-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.5s var(--ease-out);
  align-self: end;
  justify-self: end;
}

@media (min-width: 900px) {
  .vessel-arrow {
    align-self: center;
    justify-self: center;
  }
}

.vessel-arrow svg {
  width: 14px;
  height: 14px;
  transition: transform 0.5s var(--ease-out);
}

.vessel:hover .vessel-arrow {
  background: var(--bone);
  color: var(--graphite);
  border-color: var(--bone);
  transform: rotate(-45deg);
}

/* Flagship marker */
.vessel-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--steel-bright);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.vessel-flag::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--steel-bright);
}

/* Manifest footer — understated CTA */
.manifest-foot {
  margin-top: 72px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 0;
}

.manifest-inquire {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 32px;
  border: 1px solid var(--hairline-dark-strong);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  transition: all 0.4s var(--ease-out);
}

.manifest-inquire:hover {
  background: var(--bone);
  color: var(--graphite);
  border-color: var(--bone);
}

/* =========================================================================
   TESTIMONIAL — huge featured quote + ledger
   ========================================================================= */

.testimonial {
  position: relative;
  padding-top: var(--section-y);
  padding-bottom: calc(var(--section-y) * 0.8);
  text-align: center;
}

.testimonial-mark {
  width: 48px;
  height: 1px;
  background: var(--steel-bright);
  margin: 0 auto 32px;
}

.testimonial-quote {
  max-width: 1100px;
  margin: 0 auto;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink);
  padding: 0 var(--gutter);
}

.testimonial-quote::before,
.testimonial-quote::after {
  display: inline-block;
  color: var(--steel-bright);
  font-weight: 400;
  opacity: 0.5;
  font-size: 0.7em;
  vertical-align: baseline;
  line-height: 0;
}

.testimonial-quote::before { content: "\201C "; margin-right: 0.05em; }
.testimonial-quote::after  { content: " \201D"; margin-left: 0.05em; }

.testimonial-attribution {
  margin-top: 48px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--steel-bright);
}

.testimonial-attribution span {
  color: var(--ink-faint);
  padding-left: 16px;
  border-left: 1px solid var(--hairline-dark);
}

/* Ledger — marquee of secondary reviews */
.ledger {
  margin-top: var(--section-y);
  padding: 48px 0;
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
  overflow: hidden;
  position: relative;
}

.ledger::before,
.ledger::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.ledger::before {
  left: 0;
  background: linear-gradient(90deg, var(--graphite), transparent);
}

.ledger::after {
  right: 0;
  background: linear-gradient(-90deg, var(--graphite), transparent);
}

.ledger-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: ledgerScroll 60s linear infinite;
}

@keyframes ledgerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ledger-item {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  text-transform: uppercase;
}

.ledger-item-name {
  color: var(--ink);
}

.ledger-item-stars {
  color: var(--steel-bright);
  font-size: 10px;
  letter-spacing: 3px;
}

.ledger-item-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--steel);
  opacity: 0.5;
}

/* =========================================================================
   LOCATION / CONTACT
   ========================================================================= */

.location {
  position: relative;
  padding-top: var(--section-y);
  padding-bottom: calc(var(--section-y) * 0.6);
}

.location-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: stretch;
}

@media (min-width: 900px) {
  .location-grid {
    grid-template-columns: 5fr 6fr;
    gap: 80px;
  }
}

.location-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.location-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 200;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.location-title span {
  color: var(--steel-bright);
  font-weight: 300;
}

.location-address {
  padding: 24px 0;
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.location-address-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.location-address-key {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.location-address-val {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.location-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.location-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border: 1px solid var(--hairline-dark-strong);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  transition: all 0.35s var(--ease-out);
}

.location-cta:hover {
  background: var(--bone);
  color: var(--graphite);
  border-color: var(--bone);
}

.location-cta.primary {
  background: var(--ink);
  color: var(--graphite);
  border-color: var(--ink);
}

.location-cta.primary:hover {
  background: var(--steel-bright);
  border-color: var(--steel-bright);
  color: var(--graphite);
}

.location-map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--hairline-dark);
}

.location-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(40%) brightness(65%) contrast(115%) invert(0.88) hue-rotate(180deg);
  pointer-events: none;
}

.location-map-pin {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.location-map-marker {
  position: relative;
  width: 14px;
  height: 14px;
  background: var(--steel-bright);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(20,23,28,0.9), 0 0 20px rgba(164,181,202,0.8);
}

.location-map-marker::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: var(--steel-bright);
  opacity: 0.5;
  animation: pulse 2.4s ease-out infinite;
}

.location-map-info {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  padding: 18px 22px;
  background: rgba(20, 23, 28, 0.82);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--hairline-dark);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.location-map-info-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.location-map-info-kicker {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--steel-bright);
}

.location-map-info-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.location-map-info-link {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: color 0.3s;
}

.location-map-info-link:hover {
  color: var(--steel-bright);
}

/* =========================================================================
   FOOTER — minimal
   ========================================================================= */

.footer {
  border-top: 1px solid var(--hairline-dark);
  padding: 48px var(--gutter);
  background: var(--graphite);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}

@media (min-width: 700px) {
  .footer-inner {
    grid-template-columns: 1fr auto 1fr;
    gap: 32px;
  }
}

.footer-wordmark {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
}

.footer-wordmark span {
  color: var(--steel-bright);
  margin-right: 8px;
}

.footer-legal {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}

.footer-socials {
  justify-self: start;
  display: flex;
  gap: 16px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (min-width: 700px) {
  .footer-socials { justify-self: end; }
}

.footer-socials a {
  transition: color 0.3s;
}

.footer-socials a:hover {
  color: var(--ink);
}

/* =========================================================================
   VESSEL PAGE — cinematic hero + dossier body
   ========================================================================= */

.vessel-header {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 24px var(--gutter);
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
  background: rgba(20, 23, 28, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  animation: fadeIn 1s var(--ease-out) 0.8s forwards;
}

.vessel-header strong {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.3em;
}

.vessel-header-center {
  justify-self: center;
  color: var(--steel-bright);
  display: none;
}

@media (min-width: 800px) { .vessel-header-center { display: block; } }

.vessel-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: clamp(520px, 90svh, 700px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.vessel-hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.vessel-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
  animation: heroSlowZoom 30s var(--ease-out) forwards;
}

.vessel-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,23,28,0.5) 0%, rgba(20,23,28,0.1) 25%, rgba(20,23,28,0.15) 55%, rgba(20,23,28,0.95) 100%);
}

.vessel-hero-text {
  position: relative;
  z-index: 2;
  padding: var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
  padding-bottom: 96px;
}

.vessel-hero-category {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--steel-bright);
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-out-long) 0.6s forwards;
}

.vessel-hero-category::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--steel-bright);
}

.vessel-hero-name {
  font-size: clamp(3.5rem, 14vw, 11rem);
  font-weight: 200;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 28px;
  opacity: 0;
  transform: translateY(60px);
  animation: fadeUp 1.4s var(--ease-out-long) 0.8s forwards;
}

.vessel-hero-tagline {
  max-width: 620px;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink-muted);
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-out-long) 1.1s forwards;
}

/* Vessel body */
.vessel-body {
  padding: var(--section-y) 0;
}

.vessel-lead-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
  padding-bottom: var(--section-y);
  border-bottom: 1px solid var(--hairline-dark);
}

@media (min-width: 900px) {
  .vessel-lead-grid {
    grid-template-columns: 4fr 7fr;
    gap: 96px;
  }
}

.vessel-lead-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--steel-bright);
  display: flex;
  align-items: center;
  gap: 16px;
}

.vessel-lead-label::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--steel-bright);
}

.vessel-lead-copy {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.7;
  color: var(--ink);
  font-weight: 300;
}

.vessel-lead-copy p + p { margin-top: 24px; }

.vessel-signature {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-dark);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--steel-bright);
}

.vessel-signature span {
  color: var(--ink-muted);
  margin-right: 14px;
}

/* Specs table */
.vessel-specs-section {
  padding: var(--section-y) 0;
  border-bottom: 1px solid var(--hairline-dark);
}

.vessel-specs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

@media (min-width: 900px) {
  .vessel-specs-grid {
    grid-template-columns: 4fr 7fr;
    gap: 96px;
  }
}

.vessel-specs-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.vessel-specs-title span {
  color: var(--steel-bright);
  font-weight: 300;
  display: block;
}

.vessel-specs-table {
  border-top: 1px solid var(--hairline-dark);
}

.vessel-spec-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline-dark);
  gap: 24px;
  transition: background 0.4s, padding 0.4s;
}

.vessel-spec-row:hover {
  padding-left: 12px;
  padding-right: 12px;
  background: rgba(164, 181, 202, 0.03);
}

.vessel-spec-row-key {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.vessel-spec-row-val {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.vessel-spec-row-val em {
  font-style: normal;
  color: var(--ink-faint);
  font-size: 13px;
  margin-left: 8px;
}

/* Rate sheet */
.vessel-rates {
  padding: var(--section-y) 0;
  border-bottom: 1px solid var(--hairline-dark);
}

.vessel-rates-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

@media (min-width: 900px) {
  .vessel-rates-grid {
    grid-template-columns: 4fr 7fr;
    gap: 96px;
  }
}

.vessel-rates-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.vessel-rates-title span {
  color: var(--steel-bright);
  font-weight: 300;
  display: block;
}

.vessel-rates-note {
  margin-top: 24px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 380px;
}

.vessel-rates-sheet {
  border-top: 1px solid var(--hairline-dark);
}

.vessel-rate-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline-dark);
  gap: 32px;
  transition: padding 0.4s, background 0.4s;
}

.vessel-rate-row:hover {
  padding-left: 16px;
  padding-right: 16px;
  background: rgba(164, 181, 202, 0.03);
}

.vessel-rate-duration {
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.vessel-rate-divider {
  border-top: 1px dashed var(--hairline-dark);
  align-self: center;
  height: 1px;
}

.vessel-rate-price {
  font-size: 18px;
  font-weight: 400;
  color: var(--steel-bright);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Reserve block */
.vessel-reserve {
  padding: var(--section-y) 0;
  text-align: center;
}

.vessel-reserve-label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--steel-bright);
  margin-bottom: 28px;
}

.vessel-reserve-label::before,
.vessel-reserve-label::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--steel-bright);
}

.vessel-reserve-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 800px;
  margin: 0 auto 36px;
  color: var(--ink);
}

.vessel-reserve-title span {
  color: var(--steel-bright);
  font-weight: 300;
}

.vessel-reserve-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 36px;
  background: var(--bone);
  color: var(--graphite);
  border: 1px solid var(--bone);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition: all 0.4s var(--ease-out);
}

.vessel-reserve-btn:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-dark-strong);
}

.vessel-reserve-subtle {
  margin-top: 24px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

/* Other vessels */
.vessel-others {
  padding: var(--section-y) 0;
  border-top: 1px solid var(--hairline-dark);
}

.vessel-others-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-bottom: 48px;
  gap: 32px;
}

.vessel-others-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.vessel-others-title span {
  color: var(--steel-bright);
  font-weight: 300;
}

.vessel-others-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--steel-bright);
  transition: gap 0.3s;
}

.vessel-others-link:hover {
  gap: 16px;
}

/* Sticky reserve CTA (floating pill) */
.sticky-reserve {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px;
  background: rgba(20, 23, 28, 0.78);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--hairline-dark-strong);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s, transform 0.4s var(--ease-out), background 0.3s, color 0.3s;
  pointer-events: none;
}

.sticky-reserve.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sticky-reserve:hover {
  background: var(--bone);
  color: var(--graphite);
  border-color: var(--bone);
}

.sticky-reserve-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--steel-bright);
}

.sticky-reserve-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--steel-bright);
  opacity: 0.5;
  animation: pulse 2.4s ease-out infinite;
}

.sticky-reserve:hover .sticky-reserve-dot {
  background: var(--graphite);
}

.sticky-reserve:hover .sticky-reserve-dot::after {
  background: var(--graphite);
}

@media (max-width: 640px) {
  .sticky-reserve {
    right: 16px;
    left: 16px;
    bottom: 16px;
    justify-content: center;
  }
}

/* =========================================================================
   REVEAL ON SCROLL
   ========================================================================= */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--ease-out-long), transform 1.1s var(--ease-out-long);
  will-change: opacity, transform;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.stagger.in > *:nth-child(1) { transition-delay: 0s; }
.stagger.in > *:nth-child(2) { transition-delay: 0.12s; }
.stagger.in > *:nth-child(3) { transition-delay: 0.24s; }
.stagger.in > *:nth-child(4) { transition-delay: 0.36s; }
.stagger.in > *:nth-child(5) { transition-delay: 0.48s; }
.stagger.in > *:nth-child(6) { transition-delay: 0.60s; }

/* =========================================================================
   SCROLLBAR
   ========================================================================= */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track { background: var(--graphite); }
::-webkit-scrollbar-thumb {
  background: var(--slate);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--steel-deep); }

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-image img { animation: none; }
  .ledger-track { animation: none; }
  .nav-status-dot::after,
  .sticky-reserve-dot::after,
  .location-map-marker::after { animation: none; }
}

/* =========================================================================
   VESSEL SPECS — HOVER DROPDOWN
   ========================================================================= */

.vessel-specs-dropdown {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(42, 47, 57, 0.55), rgba(33, 37, 45, 0.42));
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(212, 214, 220, 0.10);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 30px 80px -40px rgba(0, 0, 0, 0.65);
  outline: none;
  transition: border-color 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vessel-specs-dropdown:hover,
.vessel-specs-dropdown:focus-within {
  border-color: rgba(164, 181, 202, 0.32);
  transform: translateY(-2px);
}

.vessel-specs-trigger {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 24px;
  padding: 22px 26px;
  cursor: pointer;
  user-select: none;
}
.vessel-specs-trigger-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vessel-specs-trigger-kicker {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.vessel-specs-trigger-title {
  font-size: 19px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.vessel-specs-trigger-summary {
  display: flex;
  gap: 18px;
  color: var(--ink-muted);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.vessel-specs-trigger-summary span small {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  margin-left: 3px;
}
.vessel-specs-trigger-chev {
  color: var(--steel-bright);
  transition: transform 0.4s ease;
}
.vessel-specs-dropdown:hover .vessel-specs-trigger-chev,
.vessel-specs-dropdown:focus-within .vessel-specs-trigger-chev {
  transform: rotate(180deg);
}

.vessel-specs-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease;
  opacity: 0;
}
.vessel-specs-dropdown:hover .vessel-specs-panel,
.vessel-specs-dropdown:focus-within .vessel-specs-panel {
  max-height: 600px;
  opacity: 1;
}
.vessel-specs-panel-inner {
  padding: 4px 26px 26px;
  border-top: 1px solid rgba(212, 214, 220, 0.08);
  margin-top: 0;
}
.vessel-specs-panel-inner .vessel-spec-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(212, 214, 220, 0.08);
}
.vessel-specs-panel-inner .vessel-spec-row:last-child { border-bottom: 0; }
.vessel-specs-panel-inner .vessel-spec-row-key {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.vessel-specs-panel-inner .vessel-spec-row-val {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
}
.vessel-specs-panel-inner .vessel-spec-row-val em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-left: 8px;
}

@media (max-width: 720px) {
  .vessel-specs-trigger {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 12px;
    padding: 18px 20px;
  }
  .vessel-specs-trigger-summary {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }
  .vessel-specs-trigger-chev { grid-row: 1; grid-column: 2; }
  /* On touch: open by tap via :focus / sustained hover fallback */
  .vessel-specs-dropdown:active .vessel-specs-panel { max-height: 600px; opacity: 1; }
  .vessel-specs-dropdown:active .vessel-specs-trigger-chev { transform: rotate(180deg); }
}

/* =========================================================================
   BOOKING MODAL — LIQUID GLASS OVERRIDE
   Layered over booking.css to deliver a frosted, opaque-glass aesthetic
   while keeping all original layout & flow.
   ========================================================================= */

.book-modal .book-backdrop {
  background: radial-gradient(120% 80% at 50% 0%, rgba(123, 143, 168, 0.18) 0%, rgba(15, 17, 22, 0.78) 55%, rgba(10, 11, 14, 0.92) 100%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
}

.book-modal .book-panel {
  background:
    linear-gradient(180deg, rgba(212, 214, 220, 0.06) 0%, rgba(212, 214, 220, 0.015) 40%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, rgba(42, 47, 57, 0.78) 0%, rgba(33, 37, 45, 0.86) 100%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(170%) !important;
  backdrop-filter: blur(40px) saturate(170%) !important;
  border: 1px solid rgba(212, 214, 220, 0.14) !important;
  border-radius: 22px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 0 0 1px rgba(123, 143, 168, 0.08) inset,
    0 60px 140px -40px rgba(0, 0, 0, 0.85),
    0 30px 80px -30px rgba(0, 0, 0, 0.6) !important;
  position: relative;
  overflow: hidden;
}
.book-modal .book-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 20% 0%, rgba(164, 181, 202, 0.10), transparent 60%),
    radial-gradient(50% 30% at 100% 100%, rgba(123, 143, 168, 0.08), transparent 60%);
  mix-blend-mode: screen;
  z-index: 0;
}
.book-modal .book-panel > * { position: relative; z-index: 1; }

.book-modal .book-summary {
  background:
    linear-gradient(180deg, rgba(26, 29, 36, 0.55), rgba(26, 29, 36, 0.30)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  border-right: 1px solid rgba(212, 214, 220, 0.08) !important;
}

.book-modal .book-form,
.book-modal .book-step,
.book-modal .book-content,
.book-modal .book-body,
.book-modal .book-footer,
.book-modal .book-header {
  background: transparent !important;
  color: var(--ink) !important;
}
.book-modal .book-form {
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  background: linear-gradient(180deg, rgba(42, 47, 57, 0.55) 0%, rgba(33, 37, 45, 0.60) 100%) !important;
}
.book-modal .book-header {
  border-bottom: 1px solid rgba(212, 214, 220, 0.08) !important;
}
.book-modal .book-footer {
  border-top: 1px solid rgba(212, 214, 220, 0.08) !important;
}

/* Step heading + supporting copy */
.book-modal .step-kicker,
.book-modal .step-label {
  color: var(--steel-bright) !important;
}
.book-modal .step-title,
.book-modal .book-title,
.book-modal .book-h {
  color: var(--ink) !important;
}
.book-modal .step-sub,
.book-modal .field-hint,
.book-modal .cal-dow span,
.book-modal .time-menu-header {
  color: var(--ink-faint) !important;
}

/* INPUTS — kill white rectangles, glass them */
.book-modal .field-input,
.book-modal input[type="text"],
.book-modal input[type="email"],
.book-modal input[type="tel"],
.book-modal input[type="number"],
.book-modal input[type="date"],
.book-modal textarea,
.book-modal select {
  background: rgba(212, 214, 220, 0.04) !important;
  border: 1px solid rgba(212, 214, 220, 0.14) !important;
  color: var(--ink) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
  border-radius: 10px !important;
  transition: border-color 0.3s ease, background 0.3s ease !important;
}
.book-modal .field-input:focus,
.book-modal input:focus,
.book-modal textarea:focus,
.book-modal select:focus {
  background: rgba(212, 214, 220, 0.07) !important;
  border-color: rgba(164, 181, 202, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(123, 143, 168, 0.14), 0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
  outline: none !important;
}
.book-modal .field-input::placeholder,
.book-modal input::placeholder,
.book-modal textarea::placeholder {
  color: rgba(212, 214, 220, 0.35) !important;
  font-style: italic !important;
}
.book-modal .field-label {
  color: var(--ink-muted) !important;
}

/* Pills / step buttons */
.book-modal .pill,
.book-modal .step-btn,
.book-modal .step-btn-sm,
.book-modal .time-trigger,
.book-modal .time-slot {
  background: rgba(212, 214, 220, 0.04) !important;
  border: 1px solid rgba(212, 214, 220, 0.12) !important;
  color: var(--ink) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}
.book-modal .pill:hover,
.book-modal .step-btn:hover,
.book-modal .step-btn-sm:hover,
.book-modal .time-trigger:hover,
.book-modal .time-slot:hover,
.book-modal .time-trigger.open {
  background: rgba(212, 214, 220, 0.08) !important;
  border-color: rgba(164, 181, 202, 0.35) !important;
  color: var(--ink) !important;
}
.book-modal .pill.selected,
.book-modal .time-slot.selected {
  background: rgba(123, 143, 168, 0.18) !important;
  border-color: rgba(164, 181, 202, 0.6) !important;
  color: var(--ink) !important;
  box-shadow: 0 0 30px -10px rgba(123, 143, 168, 0.5) !important;
}
.book-modal .pill-dur { color: var(--ink) !important; }
.book-modal .pill-price { color: var(--steel-bright) !important; }

/* Calendar */
.book-modal .cal-cell {
  background: rgba(212, 214, 220, 0.035) !important;
  border: 1px solid rgba(212, 214, 220, 0.08) !important;
  color: var(--ink) !important;
}
.book-modal .cal-cell:hover:not(.past):not(.empty) {
  background: rgba(212, 214, 220, 0.09) !important;
  border-color: rgba(164, 181, 202, 0.35) !important;
}
.book-modal .cal-cell.selected {
  background: rgba(123, 143, 168, 0.22) !important;
  border-color: rgba(164, 181, 202, 0.65) !important;
  color: var(--ink) !important;
}
.book-modal .cal-cell.past,
.book-modal .cal-cell.unavailable {
  color: rgba(212, 214, 220, 0.25) !important;
}
.book-modal .cal-nav {
  background: rgba(212, 214, 220, 0.04) !important;
  border: 1px solid rgba(212, 214, 220, 0.12) !important;
  color: var(--ink) !important;
}
.book-modal .cal-nav:hover {
  background: rgba(212, 214, 220, 0.08) !important;
  border-color: rgba(164, 181, 202, 0.4) !important;
  color: var(--steel-bright) !important;
}
.book-modal .cal-month,
.book-modal .time-trigger-value {
  color: var(--ink) !important;
}

/* Time menu */
.book-modal .time-menu {
  background: linear-gradient(180deg, rgba(42, 47, 57, 0.9), rgba(33, 37, 45, 0.95)) !important;
  border: 1px solid rgba(212, 214, 220, 0.14) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7) !important;
}

/* Close button */
.book-modal .book-close {
  background: rgba(212, 214, 220, 0.05) !important;
  border: 1px solid rgba(212, 214, 220, 0.14) !important;
  color: var(--ink) !important;
}
.book-modal .book-close:hover {
  background: rgba(212, 214, 220, 0.1) !important;
  border-color: rgba(164, 181, 202, 0.4) !important;
}

/* Progress dots */
.book-modal .book-dot { background: rgba(212, 214, 220, 0.2) !important; }
.book-modal .book-dot.active { background: var(--steel-bright) !important; }
.book-modal .book-dot.done { background: rgba(164, 181, 202, 0.5) !important; }

/* Summary panel copy */
.book-modal .sum-boat-kicker { color: var(--steel-bright) !important; }
.book-modal .sum-boat-name { color: var(--ink) !important; }
.book-modal .sum-line-key { color: var(--ink-faint) !important; }
.book-modal .sum-line-val { color: var(--ink) !important; }
.book-modal .sum-line-val.muted { color: rgba(212, 214, 220, 0.35) !important; }
.book-modal .sum-rule { background: rgba(212, 214, 220, 0.08) !important; }
.book-modal .sum-fine { color: var(--ink-faint) !important; }

/* OPTION FLIP CARDS — fix contrast both faces */
.book-modal .opt-flip {
  background: transparent !important;
}
.book-modal .opt-face {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(212, 214, 220, 0.12) !important;
  box-shadow: 0 20px 60px -25px rgba(0, 0, 0, 0.7) !important;
}
.book-modal .opt-front {
  background: linear-gradient(180deg, rgba(42, 47, 57, 0.9), rgba(26, 29, 36, 0.95)) !important;
}
.book-modal .opt-kicker { color: var(--steel-bright) !important; }
.book-modal .opt-title,
.book-modal .opt-front-title { color: var(--ink) !important; }
.book-modal .opt-front-pill {
  background: rgba(212, 214, 220, 0.1) !important;
  border: 1px solid rgba(212, 214, 220, 0.25) !important;
  color: var(--ink) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}
.book-modal .opt-flip:hover .opt-front-pill,
.book-modal .opt-flip.selected .opt-front-pill {
  background: linear-gradient(180deg, rgba(164, 181, 202, 0.95), rgba(123, 143, 168, 0.92)) !important;
  border-color: rgba(212, 214, 220, 0.5) !important;
  color: var(--graphite) !important;
}

/* Option back (glass panel on flip) */
.book-modal .opt-back {
  background: linear-gradient(160deg, rgba(42, 47, 57, 0.95) 0%, rgba(26, 29, 36, 0.95) 100%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  color: var(--ink) !important;
}
.book-modal .opt-back-kicker { color: var(--steel-bright) !important; }
.book-modal .opt-back-title { color: var(--ink) !important; }
.book-modal .opt-back-desc { color: var(--ink-muted) !important; }
.book-modal .opt-back-price { color: var(--steel-bright) !important; }
.book-modal .opt-back-price small { color: var(--ink-faint) !important; }
.book-modal .opt-add-btn {
  background: linear-gradient(180deg, rgba(164, 181, 202, 0.95), rgba(123, 143, 168, 0.92)) !important;
  color: var(--graphite) !important;
  border: 1px solid rgba(212, 214, 220, 0.4) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 8px 24px -8px rgba(123, 143, 168, 0.5) !important;
}
.book-modal .opt-add-btn:hover {
  background: linear-gradient(180deg, rgba(180, 196, 215, 1), rgba(140, 159, 184, 0.95)) !important;
}
.book-modal .opt-flip.selected .opt-add-btn {
  background: var(--graphite) !important;
  color: var(--ink) !important;
  border-color: rgba(164, 181, 202, 0.4) !important;
}
.book-modal .opt-back-flip {
  background: transparent !important;
  border: 1px solid rgba(212, 214, 220, 0.15) !important;
  color: var(--ink-muted) !important;
}
.book-modal .opt-back-flip:hover {
  border-color: rgba(164, 181, 202, 0.4) !important;
  color: var(--steel-bright) !important;
}
.book-modal .opt-flip.selected .opt-face {
  box-shadow: 0 0 0 2px rgba(164, 181, 202, 0.6), 0 20px 60px -20px rgba(123, 143, 168, 0.4) !important;
}

/* Primary CTAs */
.book-modal .bk-btn-primary,
.book-modal .book-cta,
.book-modal .btn-primary {
  background: linear-gradient(180deg, rgba(164, 181, 202, 0.95), rgba(123, 143, 168, 0.92)) !important;
  border: 1px solid rgba(212, 214, 220, 0.35) !important;
  color: var(--graphite) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 12px 30px -10px rgba(123, 143, 168, 0.6) !important;
}
.book-modal .bk-btn-primary:hover,
.book-modal .book-cta:hover,
.book-modal .btn-primary:hover {
  background: linear-gradient(180deg, rgba(180, 196, 215, 1), rgba(140, 159, 184, 0.95)) !important;
}
.book-modal .bk-btn {
  color: var(--ink) !important;
}

/* Error / helper text */
.book-modal .field-error { color: #f6a4a4 !important; }

/* =========================================================================
   VESSEL ROW — HOVER DROPDOWN (landing specs panel)
   ========================================================================= */

.vessel-wrap {
  position: relative;
  margin: 0 0 22px;
  z-index: 1;
}
.vessel-wrap:hover,
.vessel-wrap:focus-within {
  z-index: 20;
}
.vessel-wrap .vessel { margin: 0; }

.vessel-wrap .vessel-book-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(212, 214, 220, 0.14);
  border-radius: 999px;
  background: rgba(212, 214, 220, 0.05);
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
  flex-shrink: 0;
}
.vessel-wrap .vessel-book-hint svg {
  width: 14px;
  height: 14px;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vessel-wrap:hover .vessel-book-hint,
.vessel-wrap:focus-within .vessel-book-hint {
  background: linear-gradient(180deg, rgba(164, 181, 202, 0.95), rgba(123, 143, 168, 0.9));
  border-color: rgba(212, 214, 220, 0.4);
  color: var(--graphite);
}
.vessel-wrap:hover .vessel-book-hint svg,
.vessel-wrap:focus-within .vessel-book-hint svg { transform: translateX(4px); }

.vessel-drop {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    grid-template-rows 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    margin-top 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  margin-top: 0;
}
.vessel-drop > * {
  min-height: 0;
  overflow: hidden;
}
.vessel-wrap:hover .vessel-drop,
.vessel-wrap:focus-within .vessel-drop {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  margin-top: 10px;
}
.vessel-drop-inner {
  cursor: pointer;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(212, 214, 220, 0.045) 0%, rgba(212, 214, 220, 0.015) 100%),
    linear-gradient(180deg, rgba(42, 47, 57, 0.78) 0%, rgba(26, 29, 36, 0.82) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(212, 214, 220, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 30px 80px -30px rgba(0, 0, 0, 0.7);
  padding: 22px 28px 24px;
  position: relative;
  overflow: hidden;
}
.vessel-drop-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 40% at 15% 0%, rgba(164, 181, 202, 0.10), transparent 60%);
  pointer-events: none;
}
.vessel-drop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(212, 214, 220, 0.08);
}
.vessel-drop-kicker {
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.vessel-drop-title {
  font-size: 15px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.vessel-drop-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 40px;
  margin: 0;
}
.vessel-drop-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(212, 214, 220, 0.08);
}
.vessel-drop-row dt {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.vessel-drop-row dd {
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
  margin: 0;
  text-align: right;
}
.vessel-drop-note {
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

@media (max-width: 780px) {
  .vessel-drop-list { grid-template-columns: 1fr; gap: 0; }
  .vessel-drop-inner { padding: 18px 20px 20px; }
  .vessel-drop-head { flex-direction: column; gap: 4px; }
  /* Sustain visibility on tap for touch devices */
  .vessel-wrap:active .vessel-drop { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; transform: translateY(0); margin-top: 10px; }
}

/* =========================================================================
   BOOKING — EXTRA READABILITY PASS
   Front-face chips, calendar, stepper, option flip polish.
   ========================================================================= */

/* On-image chips on the option FRONT face — dark glass so they're legible */
.book-modal .opt-info-btn {
  background: rgba(26, 29, 36, 0.55) !important;
  border: 1px solid rgba(212, 214, 220, 0.4) !important;
  color: var(--ink) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}
.book-modal .opt-info-btn:hover {
  background: linear-gradient(180deg, rgba(164, 181, 202, 0.95), rgba(123, 143, 168, 0.92)) !important;
  color: var(--graphite) !important;
  border-color: rgba(212, 214, 220, 0.6) !important;
}
.book-modal .opt-front-price {
  background: rgba(26, 29, 36, 0.55) !important;
  border: 1px solid rgba(212, 214, 220, 0.4) !important;
  color: var(--ink) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}
.book-modal .opt-front-kicker { color: rgba(212, 214, 220, 0.8) !important; }
.book-modal .opt-front-name { color: #fff !important; }
.book-modal .opt-front-scrim {
  background: linear-gradient(180deg, rgba(15, 17, 22, 0.25) 0%, rgba(15, 17, 22, 0.35) 40%, rgba(15, 17, 22, 0.88) 100%) !important;
}
.book-modal .opt-pill-check { background: rgba(212, 214, 220, 0.4) !important; }
.book-modal .opt-flip.selected .opt-pill-check { background: var(--graphite) !important; }
.book-modal .opt-flip.selected .opt-pill-check::after { border-color: var(--steel-bright) !important; }
.book-modal .opt-check-badge {
  background: linear-gradient(180deg, rgba(164, 181, 202, 1), rgba(123, 143, 168, 1)) !important;
  box-shadow: 0 8px 20px -6px rgba(123, 143, 168, 0.65) !important;
}
.book-modal .opt-check-badge::after { border-color: var(--graphite) !important; }
.book-modal .opt-flip.selected .opt-face {
  box-shadow: 0 0 0 2px rgba(164, 181, 202, 0.7), 0 20px 60px -20px rgba(123, 143, 168, 0.45) !important;
}

/* Calendar surface — dark glass */
.book-modal .bk-calendar {
  background: linear-gradient(135deg, rgba(42, 47, 57, 0.55), rgba(26, 29, 36, 0.6)) !important;
  border: 1px solid rgba(212, 214, 220, 0.12) !important;
  -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
  backdrop-filter: blur(26px) saturate(160%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -1px 0 rgba(164, 181, 202, 0.14) inset,
    0 30px 80px -30px rgba(0, 0, 0, 0.55) !important;
}

/* Calendar cells — higher contrast, crisp booked state */
.book-modal .cal-cell {
  background: rgba(212, 214, 220, 0.035) !important;
  border: 1px solid rgba(212, 214, 220, 0.08) !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
}
.book-modal .cal-cell:hover:not(.past):not(.empty):not(.unavailable) {
  background: rgba(164, 181, 202, 0.14) !important;
  border-color: rgba(164, 181, 202, 0.4) !important;
  color: #fff !important;
}
.book-modal .cal-cell.today {
  border-color: rgba(164, 181, 202, 0.4) !important;
}
.book-modal .cal-cell.today::after { background: var(--steel-bright) !important; }
.book-modal .cal-cell.selected {
  background: linear-gradient(180deg, rgba(164, 181, 202, 0.95), rgba(123, 143, 168, 0.88)) !important;
  border-color: rgba(212, 214, 220, 0.6) !important;
  color: var(--graphite) !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 30px -8px rgba(123, 143, 168, 0.55) !important;
}
.book-modal .cal-cell.selected::after { background: var(--graphite) !important; }
.book-modal .cal-cell.past {
  color: rgba(212, 214, 220, 0.22) !important;
  background: transparent !important;
  border-color: rgba(212, 214, 220, 0.04) !important;
}

/* BOOKED / unavailable — make it unmistakable */
.book-modal .cal-cell.unavailable {
  color: rgba(212, 214, 220, 0.35) !important;
  background: repeating-linear-gradient(
    135deg,
    rgba(212, 214, 220, 0.025) 0 6px,
    rgba(212, 214, 220, 0.055) 6px 7px
  ) !important;
  border: 1px dashed rgba(212, 214, 220, 0.14) !important;
  cursor: not-allowed !important;
  text-decoration: line-through;
  text-decoration-color: rgba(212, 214, 220, 0.35);
  text-decoration-thickness: 1px;
  position: relative;
}
.book-modal .cal-cell.unavailable::before {
  content: 'BOOKED';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  letter-spacing: 0.18em;
  color: rgba(212, 214, 220, 0.45);
  font-weight: 500;
}
.book-modal .cal-cell.unavailable:hover {
  background: repeating-linear-gradient(
    135deg,
    rgba(212, 214, 220, 0.025) 0 6px,
    rgba(212, 214, 220, 0.055) 6px 7px
  ) !important;
  border-color: rgba(212, 214, 220, 0.14) !important;
}

/* Guests stepper */
.book-modal .step-count { color: var(--ink) !important; }
.book-modal .step-hint { color: var(--ink-faint) !important; }

/* Sum summary panel — ensure steel accents stay consistent */
.book-modal .sum-total-label { color: var(--ink-faint) !important; }
.book-modal .sum-total-amount { color: var(--ink) !important; }
.book-modal .sum-total { border-top: 1px solid rgba(164, 181, 202, 0.25) !important; }
.book-modal .sum-thumb { border: 1px solid rgba(164, 181, 202, 0.35) !important; }

/* =========================================================================
   BOOKING — FINAL POLISH
   Guests stepper styled like duration pills.
   Info-btn made prominent so flip-to-back is discoverable.
   Chef preference surfaces aligned with dark-glass theme.
   ========================================================================= */

/* Guests +/- round buttons: pill-glass, match duration pills */
.book-modal .stepper { gap: 28px !important; }
.book-modal .step-btn {
  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;
  background: rgba(212, 214, 220, 0.06) !important;
  border: 1px solid rgba(212, 214, 220, 0.16) !important;
  color: var(--ink) !important;
  font-weight: 300 !important;
  font-size: 24px !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 24px -12px rgba(0, 0, 0, 0.55) !important;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.25s ease !important;
}
.book-modal .step-btn:hover {
  background: linear-gradient(180deg, rgba(164, 181, 202, 0.22), rgba(123, 143, 168, 0.18)) !important;
  border-color: rgba(164, 181, 202, 0.55) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}
.book-modal .step-count {
  color: var(--ink) !important;
  font-weight: 200 !important;
}

/* Make the flip "i" button on option cards more discoverable */
.book-modal .opt-info-btn {
  background: linear-gradient(180deg, rgba(42, 47, 57, 0.85), rgba(26, 29, 36, 0.85)) !important;
  border: 1px solid rgba(164, 181, 202, 0.5) !important;
  color: var(--steel-bright) !important;
  font-weight: 600 !important;
  z-index: 4 !important;
  box-shadow: 0 0 0 1px rgba(212, 214, 220, 0.06), 0 6px 20px -6px rgba(0, 0, 0, 0.6) !important;
}
.book-modal .opt-info-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(164, 181, 202, 0.3), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.book-modal .opt-flip:hover .opt-info-btn::before { opacity: 1; }

/* ---------- CHEF PREFERENCES (menu cards + pills) ---------- */

.book-modal .menu-card {
  background: linear-gradient(135deg, rgba(42, 47, 57, 0.7), rgba(26, 29, 36, 0.75)) !important;
  border: 1px solid rgba(212, 214, 220, 0.1) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.55) !important;
}
.book-modal .menu-card:hover {
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(164, 181, 202, 0.25) !important;
}
.book-modal .menu-card-scrim {
  background: linear-gradient(180deg, rgba(15, 17, 22, 0.2) 0%, rgba(15, 17, 22, 0.4) 45%, rgba(15, 17, 22, 0.92) 100%) !important;
}
.book-modal .menu-card-tagline { color: rgba(212, 214, 220, 0.7) !important; }
.book-modal .menu-card-check {
  background: rgba(26, 29, 36, 0.6) !important;
  border: 1px solid rgba(212, 214, 220, 0.4) !important;
}
.book-modal .menu-card.selected .menu-card-check {
  background: linear-gradient(180deg, rgba(164, 181, 202, 1), rgba(123, 143, 168, 1)) !important;
  border-color: rgba(212, 214, 220, 0.6) !important;
  box-shadow: 0 8px 20px -6px rgba(123, 143, 168, 0.5) !important;
}
.book-modal .menu-card.selected .menu-card-check::after { border-color: var(--graphite) !important; }
.book-modal .menu-card.selected {
  box-shadow: 0 0 0 2px rgba(164, 181, 202, 0.6), 0 18px 40px -12px rgba(123, 143, 168, 0.35) !important;
}

/* Allergen + dietary pills re-use .pill (already overridden) — tune the swatch/emoji */
.book-modal .chef-pill-dot-swatch {
  box-shadow: 0 0 0 2px rgba(26, 29, 36, 0.6), 0 2px 4px rgba(0, 0, 0, 0.35) !important;
}
.book-modal .chef-pill-emoji { filter: none !important; }

/* Ghost/back button — proper dark glass */
.book-modal .bk-btn-ghost {
  background: rgba(212, 214, 220, 0.04) !important;
  border: 1px solid rgba(212, 214, 220, 0.16) !important;
  color: var(--ink-muted) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}
.book-modal .bk-btn-ghost:hover {
  background: rgba(212, 214, 220, 0.08) !important;
  border-color: rgba(164, 181, 202, 0.4) !important;
  color: var(--ink) !important;
}

/* Payment badge + misc support text */
.book-modal .pay-badge { color: var(--ink-faint) !important; }
.book-modal .pay-badge::before { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22) !important; }

/* Success page matches the dark theme */
.book-modal .success-title { color: var(--ink) !important; }
.book-modal .success-title em { color: var(--steel-bright) !important; font-style: italic !important; }
.book-modal .success-sub { color: var(--ink-muted) !important; }
.book-modal .success-ref {
  background: rgba(212, 214, 220, 0.04) !important;
  border: 1px dashed rgba(164, 181, 202, 0.4) !important;
  color: var(--steel-bright) !important;
}
.book-modal .success-ref strong { color: var(--ink) !important; }
.book-modal .success-check {
  background: linear-gradient(135deg, rgba(164, 181, 202, 1), rgba(123, 143, 168, 1)) !important;
  box-shadow: 0 20px 40px -10px rgba(123, 143, 168, 0.4) !important;
}
.book-modal .success-check::after { border-color: var(--graphite) !important; }

/* Scrollbars inside booking modal panels */
.book-modal .book-body::-webkit-scrollbar-thumb { background: rgba(164, 181, 202, 0.2) !important; }
.book-modal .book-summary::-webkit-scrollbar-thumb { background: rgba(164, 181, 202, 0.2) !important; }

/* Add-ons summary line: ensure readability of selected add-on list on dark */
.book-modal .sum-line-val[data-sum="addons"]:not(.muted) { color: var(--steel-bright) !important; }

/* =========================================================================
   BOOKING — ACTUAL CLASS NAMES (step-btn-sm, chef-pill, chef-panel)
   ========================================================================= */

/* Guests stepper — real classes are stepper-inline + step-btn-sm + step-count-sm */
.book-modal .stepper-inline {
  background: rgba(212, 214, 220, 0.04) !important;
  border: 1px solid rgba(212, 214, 220, 0.14) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
  height: 54px !important;
  border-radius: 12px !important;
}
.book-modal .step-btn-sm {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: rgba(212, 214, 220, 0.08) !important;
  border: 1px solid rgba(212, 214, 220, 0.18) !important;
  color: var(--ink) !important;
  font-weight: 300 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}
.book-modal .step-btn-sm:hover {
  background: linear-gradient(180deg, rgba(164, 181, 202, 0.35), rgba(123, 143, 168, 0.28)) !important;
  border-color: rgba(164, 181, 202, 0.6) !important;
  color: #fff !important;
  transform: none !important;
}
.book-modal .step-count-sm {
  color: var(--ink) !important;
  font-weight: 300 !important;
}

/* Chef preferences panel — dark glass container */
.book-modal .chef-panel-inner {
  background: linear-gradient(135deg, rgba(42, 47, 57, 0.55), rgba(26, 29, 36, 0.6)) !important;
  border: 1px solid rgba(212, 214, 220, 0.14) !important;
  -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
  backdrop-filter: blur(26px) saturate(160%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -1px 0 rgba(164, 181, 202, 0.14) inset,
    0 30px 80px -30px rgba(0, 0, 0, 0.55) !important;
}
.book-modal .chef-panel-kicker { color: var(--steel-bright) !important; }
.book-modal .chef-panel-kicker::before {
  background: var(--steel-bright) !important;
  box-shadow: 0 0 0 3px rgba(164, 181, 202, 0.25) !important;
}
.book-modal .chef-panel-title { color: var(--ink) !important; }
.book-modal .chef-panel-sub { color: var(--ink-muted) !important; }
.book-modal .chef-section-label { color: var(--ink-faint) !important; }
.book-modal .chef-section-hint { color: var(--ink-faint) !important; }

/* Chef hero strip (image row at top of panel) */
.book-modal .chef-hero::after {
  background: linear-gradient(180deg, rgba(15, 17, 22, 0.3) 0%, rgba(15, 17, 22, 0.9) 100%) !important;
}
.book-modal .chef-hero-caption .chef-panel-kicker { color: var(--steel-bright) !important; }
.book-modal .chef-hero-caption .chef-panel-kicker::before {
  background: var(--steel-bright) !important;
  box-shadow: 0 0 0 3px rgba(164, 181, 202, 0.3) !important;
}
.book-modal .chef-hero-caption .chef-panel-title { color: #fff !important; }
.book-modal .chef-hero-caption .chef-panel-sub { color: rgba(255, 255, 255, 0.78) !important; }

/* Chef pills (allergens + dietary) — dark glass */
.book-modal .chef-pill {
  background: rgba(212, 214, 220, 0.05) !important;
  border: 1px solid rgba(212, 214, 220, 0.14) !important;
  color: var(--ink) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}
.book-modal .chef-pill:hover {
  background: rgba(212, 214, 220, 0.1) !important;
  border-color: rgba(164, 181, 202, 0.4) !important;
}
.book-modal .chef-pill.selected {
  background: linear-gradient(180deg, rgba(164, 181, 202, 0.95), rgba(123, 143, 168, 0.92)) !important;
  border-color: rgba(212, 214, 220, 0.5) !important;
  color: var(--graphite) !important;
  box-shadow: 0 6px 20px -6px rgba(123, 143, 168, 0.55) !important;
}
.book-modal .chef-pill-dot-swatch {
  box-shadow: 0 0 0 2px rgba(26, 29, 36, 0.6), 0 2px 4px rgba(0, 0, 0, 0.35) !important;
}
.book-modal .chef-pill.selected .chef-pill-dot-swatch {
  box-shadow: 0 0 0 2px rgba(212, 214, 220, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35) !important;
}

/* Chef notes textarea */
.book-modal .chef-notes {
  background: rgba(212, 214, 220, 0.04) !important;
  border: 1px solid rgba(212, 214, 220, 0.14) !important;
  color: var(--ink) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}
.book-modal .chef-notes:focus {
  background: rgba(212, 214, 220, 0.07) !important;
  border-color: rgba(164, 181, 202, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(123, 143, 168, 0.15) !important;
}
.book-modal .chef-notes::placeholder {
  color: rgba(212, 214, 220, 0.3) !important;
}

/* =========================================================================
   BOOKING — DEPOSIT (sober, restrained)
   ========================================================================= */

.book-modal .deposit-headline {
  align-items: center !important;
  gap: 20px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(212, 214, 220, 0.08) !important;
  margin-top: 8px !important;
}
.book-modal .deposit-number { line-height: 1 !important; }
.book-modal .deposit-pct {
  font-size: clamp(1.6rem, 3vw, 2rem) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}
.book-modal .deposit-pct-sign {
  font-size: 0.7em !important;
  color: var(--steel-bright) !important;
  margin-left: 2px !important;
  font-weight: 400 !important;
}
.book-modal .deposit-hint {
  color: var(--ink-muted) !important;
  font-size: 13px !important;
  max-width: 380px !important;
}

/* =========================================================================
   BOOKING — SUGGEST CARD (step 4 "mention now")
   Dark glass card + buttons that stay readable on hover.
   ========================================================================= */

.book-modal .suggest-card {
  background: linear-gradient(135deg, rgba(42, 47, 57, 0.55), rgba(26, 29, 36, 0.6)) !important;
  border: 1px solid rgba(212, 214, 220, 0.14) !important;
  -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
  backdrop-filter: blur(26px) saturate(160%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 30px 80px -30px rgba(0, 0, 0, 0.55) !important;
}
.book-modal .suggest-image::after {
  background: linear-gradient(180deg, rgba(15, 17, 22, 0) 0%, rgba(15, 17, 22, 0) 55%, rgba(15, 17, 22, 0.55) 100%) !important;
}
.book-modal .suggest-price-float {
  background: rgba(26, 29, 36, 0.7) !important;
  border: 1px solid rgba(164, 181, 202, 0.28) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 24px -8px rgba(0, 0, 0, 0.5) !important;
}
.book-modal .suggest-price-was { color: rgba(212, 214, 220, 0.45) !important; text-decoration-color: rgba(212, 214, 220, 0.4) !important; }
.book-modal .suggest-price-now { color: var(--steel-bright) !important; }
.book-modal .suggest-price-note { color: var(--ink-faint) !important; }
.book-modal .suggest-kicker { color: var(--steel-bright) !important; }
.book-modal .suggest-name { color: var(--ink) !important; }
.book-modal .suggest-desc { color: var(--ink-muted) !important; }
.book-modal .suggest-footnote { color: var(--ink-faint) !important; }

/* Primary "Add it to my charter" — steel glass pill, legible on hover */
.book-modal .suggest-yes {
  background: linear-gradient(180deg, rgba(164, 181, 202, 0.95), rgba(123, 143, 168, 0.92)) !important;
  color: var(--graphite) !important;
  border: 1px solid rgba(212, 214, 220, 0.45) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 24px -10px rgba(123, 143, 168, 0.5) !important;
}
.book-modal .suggest-yes:hover {
  background: linear-gradient(180deg, rgba(180, 196, 215, 1), rgba(140, 159, 184, 0.96)) !important;
  color: var(--graphite) !important;
  border-color: rgba(212, 214, 220, 0.6) !important;
  transform: translateY(-1px) !important;
}
.book-modal .suggest-yes.active {
  background: linear-gradient(180deg, rgba(123, 143, 168, 0.95), rgba(95, 115, 140, 0.95)) !important;
  border-color: rgba(212, 214, 220, 0.35) !important;
  color: #fff !important;
}
.book-modal .suggest-yes.active:hover {
  background: linear-gradient(180deg, rgba(140, 159, 184, 1), rgba(110, 130, 155, 0.95)) !important;
  color: #fff !important;
}
.book-modal .suggest-btn-check {
  background: rgba(26, 29, 36, 0.25) !important;
}
.book-modal .suggest-yes.active .suggest-btn-check {
  background: rgba(255, 255, 255, 0.35) !important;
}
.book-modal .suggest-yes.active .suggest-btn-check::after {
  border-color: #fff !important;
}

/* Secondary "Maybe next time" — ghost glass */
.book-modal .suggest-no {
  background: rgba(212, 214, 220, 0.04) !important;
  color: var(--ink-muted) !important;
  border: 1px solid rgba(212, 214, 220, 0.16) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}
.book-modal .suggest-no:hover {
  background: rgba(212, 214, 220, 0.08) !important;
  color: var(--ink) !important;
  border-color: rgba(164, 181, 202, 0.4) !important;
}