/* ============================================
   MEDITERANA YACHTING - Refined Luxury
   Awwwards-level finesse & sophistication
   ============================================ */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 350;
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

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

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

button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

/* --- Tokens --- */
:root {
  /* Muted, sophisticated palette */
  --color-ink: #1a1a1a;
  --color-ink-light: #2d2d2d;
  --color-ink-muted: #4a4a4a;
  --color-stone: #8a8a8a;
  --color-fog: #c4c4c4;
  --color-mist: #e8e8e8;
  --color-cloud: #f4f4f4;
  --color-snow: #fafafa;
  --color-white: #ffffff;

  /* Warm accent - barely there */
  --color-warm: #c9b99a;
  --color-warm-light: #d8ccb5;

  /* Semantic */
  --color-text: var(--color-ink);
  --color-text-secondary: var(--color-ink-muted);
  --color-text-tertiary: var(--color-stone);
  --color-bg: var(--color-snow);
  --color-border: var(--color-mist);
  --color-border-subtle: rgba(0, 0, 0, 0.06);

  /* Type - refined system */
  --font-display: 'EB Garamond', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  /* Fluid scale - elegant progression */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-3xl: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  --text-4xl: clamp(2.5rem, 2rem + 2vw, 4rem);
  --text-5xl: clamp(3rem, 2.5rem + 3vw, 5.5rem);
  --text-hero: clamp(3.5rem, 3rem + 4vw, 8rem);

  /* Space - consistent rhythm */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-section: clamp(5rem, 8vw, 10rem);

  /* Layout */
  --container: 1200px;
  --container-wide: 1400px;
  --gutter: clamp(1.5rem, 4vw, 3rem);

  /* Motion - refined easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.8s;

  /* Z-index */
  --z-header: 100;
  --z-modal: 200;
}

/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500&display=swap');

/* ============================================
   SUBTLE PATTERNS & EFFECTS
   ============================================ */

/* Ultra-subtle noise texture - adds depth without being visible */
.noise {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Soft gradient orb - follows sections */
.gradient-orb {
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(201, 185, 154, 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
  filter: blur(60px);
}

/* Fine dot grid - barely visible structure */
.pattern-dots {
  background-image: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.03) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
}

/* Fine diagonal lines - subtle rhythm */
.pattern-lines {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.015) 10px,
    rgba(0, 0, 0, 0.015) 11px
  );
}

/* Horizontal fine lines */
.pattern-horizontal {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 40px,
    rgba(0, 0, 0, 0.02) 40px,
    rgba(0, 0, 0, 0.02) 41px
  );
}

/* Grid pattern - very subtle */
.pattern-grid {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Radial subtle gradient from corner */
.pattern-radial {
  background-image: radial-gradient(
    ellipse at 100% 0%,
    rgba(201, 185, 154, 0.05) 0%,
    transparent 50%
  );
}

/* Cross pattern - minimal */
.pattern-cross {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.015) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center center;
}

/* Elegant border line - hairline precision */
.line {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border) 20%,
    var(--color-border) 80%,
    transparent
  );
}

.line--vertical {
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent,
    var(--color-border) 20%,
    var(--color-border) 80%,
    transparent
  );
}

/* Soft vignette for images */
.vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.15) 100%
  );
  pointer-events: none;
}

/* Glass effect - refined blur */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Subtle inner shadow on sections */
.inner-shadow {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.03);
}

/* ============================================
   TYPOGRAPHY - Refined treatments
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.text-hero {
  font-size: var(--text-hero);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.text-display {
  font-size: var(--text-5xl);
  line-height: 1;
}

.text-headline {
  font-size: var(--text-4xl);
}

.text-title {
  font-size: var(--text-3xl);
}

.text-subtitle {
  font-size: var(--text-2xl);
}

/* Refined label - elegant small caps feel */
.text-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* Elegant body copy */
.text-body {
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--color-text-secondary);
}

/* Italic accent - for quotes and emphasis */
.text-italic {
  font-family: var(--font-display);
  font-style: italic;
}

/* Split characters for animation */
.split-chars {
  display: inline-flex;
  overflow: hidden;
}

.split-chars span {
  display: inline-block;
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-out);
}

.split-chars.revealed span {
  transform: translateY(0);
}

/* Stagger delays */
.split-chars span:nth-child(1) { transition-delay: 0.02s; }
.split-chars span:nth-child(2) { transition-delay: 0.04s; }
.split-chars span:nth-child(3) { transition-delay: 0.06s; }
.split-chars span:nth-child(4) { transition-delay: 0.08s; }
.split-chars span:nth-child(5) { transition-delay: 0.1s; }
.split-chars span:nth-child(6) { transition-delay: 0.12s; }
.split-chars span:nth-child(7) { transition-delay: 0.14s; }
.split-chars span:nth-child(8) { transition-delay: 0.16s; }
.split-chars span:nth-child(9) { transition-delay: 0.18s; }
.split-chars span:nth-child(10) { transition-delay: 0.2s; }

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

.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--wide {
  max-width: var(--container-wide);
}

.section {
  position: relative;
  padding: var(--space-section) 0;
}

/* ============================================
   HEADER - Minimal, elegant
   ============================================ */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  padding: var(--space-lg) 0;
  background: transparent;
  transition:
    background var(--duration-normal) ease,
    padding var(--duration-normal) ease;
}

/* Initial state - white text over dark hero */
.header__logo,
.header__link,
.header__cta,
.header__toggle span {
  color: var(--color-white);
}

.header__link {
  color: rgba(255, 255, 255, 0.8);
}

.header__cta {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--color-white);
}

.header__toggle span {
  background-color: var(--color-white);
}

/* Over light content - dark text (auto-detected by JS) */
.header--over-light .header__logo,
.header--over-light .header__link,
.header--over-light .header__cta {
  color: var(--color-text);
}

.header--over-light .header__link {
  color: var(--color-text-secondary);
}

.header--over-light .header__cta {
  border-color: var(--color-border);
}

.header--over-light .header__toggle span {
  background-color: var(--color-text);
}

/* Scrolled state - dark text on frosted glass bg */
.header.scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  padding: var(--space-md) 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.header.scrolled .header__logo {
  color: var(--color-text);
}

.header.scrolled .header__link {
  color: var(--color-text-secondary);
}

.header.scrolled .header__link:hover {
  color: var(--color-text);
}

.header.scrolled .header__cta {
  color: var(--color-text);
  border-color: var(--color-border);
}

.header.scrolled .header__cta:hover {
  background-color: var(--color-text);
  color: var(--color-white);
  border-color: var(--color-text);
}

.header.scrolled .header__toggle span {
  background-color: var(--color-text);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0.05em;
  transition: opacity var(--duration-fast) ease, color var(--duration-normal) ease;
}

.header__logo:hover {
  opacity: 0.7;
}

.header__nav {
  display: none;
  align-items: center;
  gap: var(--space-2xl);
}

@media (min-width: 1024px) {
  .header__nav {
    display: flex;
  }
}

.header__link {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: color var(--duration-fast) ease;
}

.header__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width var(--duration-normal) var(--ease-out);
}

.header__link:hover {
  color: var(--color-white);
}

.header__link:hover::after {
  width: 100%;
}

.header__cta {
  display: none;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid;
  transition: all var(--duration-normal) var(--ease-out);
}

.header__cta:hover {
  background-color: var(--color-white);
  color: var(--color-text);
  border-color: var(--color-white);
}

@media (min-width: 1024px) {
  .header__cta {
    display: block;
  }
}

/* Mobile toggle - minimal */
.header__toggle {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (min-width: 1024px) {
  .header__toggle {
    display: none;
  }
}

.header__toggle span {
  display: block;
  height: 1px;
  transition: all var(--duration-normal) var(--ease-out);
}

.header__toggle span:nth-child(1) { width: 100%; }
.header__toggle span:nth-child(2) { width: 60%; }

.header__toggle:hover span:nth-child(2) {
  width: 100%;
}

/* Mobile nav - refined overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: linear-gradient(
    135deg,
    var(--color-ink) 0%,
    #1a1a1a 50%,
    var(--color-ink-light) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-xl);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-slow) ease,
    visibility var(--duration-slow) ease;
}

.mobile-nav.active {
  opacity: 1;
  visibility: visible;
}

/* Subtle nautical pattern overlay */
.mobile-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='rgba(255,255,255,0.02)' stroke-width='0.5'/%3E%3Cpath d='M50 10 L50 20 M50 80 L50 90 M10 50 L20 50 M80 50 L90 50' stroke='rgba(255,255,255,0.03)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  opacity: 0.5;
}

/* Wave pattern at bottom */
.mobile-nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0 10 Q25 0 50 10 T100 10' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 150px 30px;
  background-repeat: repeat-x;
  background-position: bottom;
  pointer-events: none;
}

.mobile-nav__close {
  position: absolute;
  top: var(--space-lg);
  right: var(--gutter);
  width: 40px;
  height: 40px;
  z-index: 10;
  cursor: pointer;
}

.mobile-nav__close::before,
.mobile-nav__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.8);
  transition: background-color var(--duration-fast) ease;
}

.mobile-nav__close:hover::before,
.mobile-nav__close:hover::after {
  background-color: var(--color-white);
}

.mobile-nav__close::before { transform: rotate(45deg); }
.mobile-nav__close::after { transform: rotate(-45deg); }

.mobile-nav__link {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3.5rem);
  color: var(--color-white);
  text-decoration: none;
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--duration-normal) ease,
    transform var(--duration-normal) var(--ease-out),
    color var(--duration-fast) ease;
  position: relative;
  z-index: 1;
}

/* Subtle underline on hover */
.mobile-nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-warm);
  transition: width var(--duration-normal) var(--ease-out);
}

.mobile-nav__link:hover::after {
  width: 100%;
}

.mobile-nav.active .mobile-nav__link {
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav.active .mobile-nav__link:nth-child(2) { transition-delay: 0.05s; }
.mobile-nav.active .mobile-nav__link:nth-child(3) { transition-delay: 0.1s; }
.mobile-nav.active .mobile-nav__link:nth-child(4) { transition-delay: 0.15s; }
.mobile-nav.active .mobile-nav__link:nth-child(5) { transition-delay: 0.2s; }
.mobile-nav.active .mobile-nav__link:nth-child(6) { transition-delay: 0.25s; }
.mobile-nav.active .mobile-nav__link:nth-child(7) { transition-delay: 0.3s; }

.mobile-nav__link:hover {
  color: var(--color-warm);
}

/* Contact info at bottom of mobile nav */
.mobile-nav__contact {
  position: absolute;
  bottom: var(--space-2xl);
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: center;
  z-index: 1;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-slow) ease 0.3s,
    transform var(--duration-slow) var(--ease-out) 0.3s;
}

.mobile-nav.active .mobile-nav__contact {
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav__contact-link {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.mobile-nav__contact-link:hover {
  color: var(--color-white);
}

/* ============================================
   HERO - Sophisticated reveal
   ============================================ */

.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-4xl);
  overflow: hidden;
  background-color: var(--color-ink);
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}

/* Refined gradient - smooth falloff */
.hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 40%,
    rgba(26, 26, 26, 0.4) 70%,
    rgba(26, 26, 26, 0.85) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  color: var(--color-white);
}

.hero__label {
  display: inline-block;
  margin-bottom: var(--space-lg);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s var(--ease-out) 0.5s forwards;
}

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

.hero__title {
  max-width: 12ch;
  margin-bottom: var(--space-xl);
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s var(--ease-out) 0.7s forwards;
}

.hero__subtitle {
  max-width: 45ch;
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.7;
  opacity: 0.8;
  margin-bottom: var(--space-2xl);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s var(--ease-out) 0.9s forwards;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-white);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 1.1s forwards;
  transition: all var(--duration-normal) var(--ease-out);
}

.hero__cta svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-normal) var(--ease-out);
}

.hero__cta:hover {
  border-color: var(--color-white);
}

.hero__cta:hover svg {
  transform: translateX(6px);
}

/* Scroll indicator - minimal */
.hero__scroll {
  position: absolute;
  bottom: var(--space-2xl);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
}

.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.5; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(0.6); }
}

/* ============================================
   INTRO - Elegant split
   ============================================ */

.intro {
  position: relative;
  padding: var(--space-section) 0;
  overflow: hidden;
}

/* Subtle dot pattern */
/* Wave pattern - gentle flowing lines */
.intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0 10 Q25 0 50 10 T100 10' fill='none' stroke='rgba(0,0,0,0.04)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 100px 20px;
  pointer-events: none;
  z-index: 0;
}

/* Ocean gradient orb */
.intro::after {
  content: '';
  position: absolute;
  top: 10%;
  right: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(64, 145, 180, 0.05) 0%,
    rgba(201, 185, 154, 0.03) 50%,
    transparent 70%
  );
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.intro__grid {
  display: grid;
  gap: var(--space-4xl);
  align-items: center;
}

@media (min-width: 1024px) {
  .intro__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.intro__content {
  max-width: 480px;
}

.intro__label {
  margin-bottom: var(--space-lg);
}

.intro__title {
  margin-bottom: var(--space-xl);
}

.intro__text {
  margin-bottom: var(--space-2xl);
}

.intro__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.intro__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-base);
}

.intro__item::before {
  content: '';
  width: 24px;
  height: 1px;
  background-color: var(--color-warm);
  flex-shrink: 0;
}

/* Image with refined treatment */
.intro__visual {
  position: relative;
}

.intro__image {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}

.intro__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.intro__image:hover img {
  transform: scale(1.03);
}

/* Subtle frame */
.intro__image::before {
  content: '';
  position: absolute;
  inset: var(--space-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 2;
  pointer-events: none;
}

/* Caption */
.intro__caption {
  position: absolute;
  bottom: var(--space-xl);
  left: var(--space-xl);
  right: var(--space-xl);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   VALUES - Refined cards
   ============================================ */

.values {
  position: relative;
  padding: var(--space-section) 0;
  background-color: var(--color-cloud);
}

/* Fine diagonal lines pattern */
/* Nautical knot pattern - diamond rope weave */
.values::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20 L20 0 L40 20 L20 40 Z' fill='none' stroke='rgba(0,0,0,0.03)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.values__header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-4xl);
}

.values__label {
  margin-bottom: var(--space-md);
}

.values__title {
  margin-bottom: var(--space-lg);
}

.values__grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .values__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.value-card {
  position: relative;
  padding: var(--space-2xl);
  background-color: var(--color-white);
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) ease;
}

/* Subtle top border accent */
.value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-2xl);
  right: var(--space-2xl);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-warm) 50%,
    transparent
  );
  opacity: 0;
  transition: opacity var(--duration-normal) ease;
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
}

.value-card:hover::before {
  opacity: 1;
}

.value-card__number {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-warm);
  margin-bottom: var(--space-xl);
}

.value-card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
}

.value-card__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* ============================================
   YACHTS - Gallery with hover reveal
   ============================================ */

.yachts {
  position: relative;
  padding: var(--space-section) 0;
}

/* Teak deck planks pattern */
.yachts::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 59px,
      rgba(139, 119, 92, 0.08) 59px,
      rgba(139, 119, 92, 0.08) 60px
    );
  background-size: 60px 100%;
  pointer-events: none;
  z-index: 0;
}

/* Ocean gradient accent */
.yachts::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background: radial-gradient(
    ellipse at 0% 100%,
    rgba(64, 145, 180, 0.04) 0%,
    rgba(201, 185, 154, 0.02) 40%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

.yachts__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-3xl);
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.yachts__header-content {
  max-width: 500px;
}

.yachts__label {
  margin-bottom: var(--space-md);
}

.yachts__grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .yachts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .yachts__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.yacht-card {
  position: relative;
  cursor: pointer;
}

.yacht-card__image {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background-color: var(--color-mist);
}

.yacht-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.yacht-card:hover .yacht-card__image img {
  transform: scale(1.05);
}

/* Hover overlay with info */
.yacht-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 26, 26, 0.9) 0%,
    rgba(26, 26, 26, 0.3) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity var(--duration-normal) ease;
}

.yacht-card:hover .yacht-card__overlay {
  opacity: 1;
}

.yacht-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-xl);
  color: var(--color-white);
  transform: translateY(10px);
  opacity: 0;
  transition:
    transform var(--duration-normal) var(--ease-out),
    opacity var(--duration-normal) ease;
}

.yacht-card:hover .yacht-card__content {
  transform: translateY(0);
  opacity: 1;
}

.yacht-card__category {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-warm-light);
  margin-bottom: var(--space-xs);
}

.yacht-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}

.yacht-card__specs {
  display: flex;
  gap: var(--space-lg);
  font-size: var(--text-sm);
  opacity: 0.7;
}

/* Simple card info for non-hover */
.yacht-card__info {
  padding: var(--space-lg) 0;
}

.yacht-card__info-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-xs);
}

.yacht-card__info-meta {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* Yacht Showcase - HERO-LEVEL display - This is the product! */
.yachts__showcase {
  display: grid;
  gap: 4px;
}

@media (min-width: 768px) {
  .yachts__showcase {
    grid-template-columns: repeat(2, 1fr);
  }
}

.yacht-showcase {
  position: relative;
  min-height: 50vh;
  overflow: hidden;
  background-color: var(--color-ink);
}

@media (min-width: 768px) {
  .yacht-showcase {
    min-height: 60vh;
  }
}

.yacht-showcase--featured {
  grid-column: 1 / -1;
  min-height: 70vh;
}

@media (min-width: 768px) {
  .yacht-showcase--featured {
    min-height: 80vh;
  }
}

.yacht-showcase__link {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.yacht-showcase__image {
  position: absolute;
  inset: 0;
}

.yacht-showcase__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.yacht-showcase:hover .yacht-showcase__image img {
  transform: scale(1.03);
}

.yacht-showcase__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 26, 26, 0.85) 0%,
    rgba(26, 26, 26, 0.2) 40%,
    transparent 100%
  );
}

.yacht-showcase__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-2xl);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .yacht-showcase__content {
    padding: var(--space-3xl);
  }
}

@media (min-width: 1024px) {
  .yacht-showcase__content {
    padding: var(--space-4xl);
  }
}

.yacht-showcase__type {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-warm-light);
  margin-bottom: var(--space-sm);
}

.yacht-showcase__name {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

@media (min-width: 768px) {
  .yacht-showcase__name {
    font-size: var(--text-5xl);
  }
}

.yacht-showcase--featured .yacht-showcase__name {
  font-size: var(--text-5xl);
  font-weight: 500;
}

@media (min-width: 768px) {
  .yacht-showcase--featured .yacht-showcase__name {
    font-size: clamp(3rem, 6vw, 4.5rem);
  }
}

.yacht-showcase__specs {
  display: flex;
  gap: var(--space-xl);
  font-size: var(--text-base);
  opacity: 0.9;
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .yacht-showcase__specs {
    font-size: var(--text-lg);
  }
}

.yacht-showcase__desc {
  display: none;
  font-size: var(--text-base);
  opacity: 0.8;
  max-width: 500px;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .yacht-showcase--featured .yacht-showcase__desc {
    display: block;
  }
}

/* View details link */
.yacht-showcase__cta {
  display: inline-block;
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-warm-light);
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--duration-normal) var(--ease-out);
}

.yacht-showcase:hover .yacht-showcase__cta {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   DESTINATIONS - Minimal grid
   ============================================ */

.destinations {
  padding: var(--space-section) 0;
  background-color: var(--color-ink);
  color: var(--color-white);
}

.destinations__header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-4xl);
}

.destinations__label {
  margin-bottom: var(--space-md);
  color: var(--color-warm-light);
}

.destinations__subtitle {
  color: rgba(255, 255, 255, 0.6);
}

.destinations__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background-color: rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
  .destinations__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.dest-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background-color: var(--color-ink);
}

.dest-card__image {
  position: absolute;
  inset: 0;
}

.dest-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform var(--duration-slow) var(--ease-out);
}

.dest-card:hover .dest-card__image img {
  transform: scale(1.08);
}

.dest-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-xl);
  color: var(--color-white);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 100%
  );
}

.dest-card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-xs);
}

.dest-card__meta {
  font-size: var(--text-sm);
  opacity: 0.7;
  color: var(--color-fog);
}

/* Reveal line on hover */
.dest-card__line {
  width: 0;
  height: 1px;
  background-color: var(--color-warm-light);
  margin-top: var(--space-md);
  transition: width var(--duration-normal) var(--ease-out);
}

.dest-card:hover .dest-card__line {
  width: 40px;
}

/* ============================================
   PROCESS - Clean steps
   ============================================ */

.process {
  position: relative;
  padding: var(--space-section) 0;
  background-color: var(--color-snow);
}

/* Compass rose / nautical star pattern */
.process::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='15' fill='none' stroke='rgba(0,0,0,0.025)' stroke-width='0.5'/%3E%3Cpath d='M30 10 L30 50 M10 30 L50 30' stroke='rgba(0,0,0,0.02)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.process__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-4xl);
}

@media (min-width: 1024px) {
  .process__inner {
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-4xl);
  }
}

.process__header {
  max-width: 400px;
}

@media (min-width: 1024px) {
  .process__header {
    position: sticky;
    top: 120px;
  }
}

.process__label {
  margin-bottom: var(--space-md);
}

.process__title {
  margin-bottom: var(--space-lg);
}

.process__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.step {
  display: grid;
  gap: var(--space-lg);
  padding-bottom: var(--space-3xl);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 640px) {
  .step {
    grid-template-columns: 80px 1fr;
  }
}

.step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.step__number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--color-fog);
  line-height: 1;
}

.step__content {
  max-width: 450px;
}

.step__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
}

.step__text {
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* ============================================
   CTA - Full bleed image
   ============================================ */

.cta {
  position: relative;
  padding: var(--space-section) 0;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  overflow: hidden;
}

.cta__bg {
  position: absolute;
  inset: 0;
}

.cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta__gradient {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.5);
}

.cta__content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  padding: 0 var(--gutter);
}

.cta__title {
  margin-bottom: var(--space-lg);
}

.cta__text {
  font-size: var(--text-lg);
  line-height: 1.7;
  opacity: 0.8;
  margin-bottom: var(--space-2xl);
}

/* ============================================
   CONTACT - Refined form
   ============================================ */

.contact {
  position: relative;
  padding: var(--space-section) 0;
  overflow: hidden;
}

/* Dot pattern */
/* Water ripple circles */
.contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='35' fill='none' stroke='rgba(0,0,0,0.02)' stroke-width='0.5'/%3E%3Ccircle cx='40' cy='40' r='25' fill='none' stroke='rgba(0,0,0,0.025)' stroke-width='0.5'/%3E%3Ccircle cx='40' cy='40' r='15' fill='none' stroke='rgba(0,0,0,0.03)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

/* Ocean accent orb */
.contact::after {
  content: '';
  position: absolute;
  top: 20%;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(64, 145, 180, 0.04) 0%,
    rgba(201, 185, 154, 0.02) 50%,
    transparent 70%
  );
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

.contact__grid {
  position: relative;
  display: grid;
  gap: var(--space-4xl);
}

@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact__info {
  max-width: 400px;
}

.contact__label {
  margin-bottom: var(--space-md);
}

.contact__title {
  margin-bottom: var(--space-lg);
}

.contact__text {
  margin-bottom: var(--space-2xl);
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact__detail {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.contact__detail-label {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  min-width: 60px;
}

.contact__detail-value {
  font-size: var(--text-base);
}

/* Form */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form__row {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form__label {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.form__input,
.form__textarea {
  padding: var(--space-md) 0;
  font-size: var(--text-base);
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  transition: border-color var(--duration-fast) ease;
}

.form__input:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--color-text);
}

.form__textarea {
  min-height: 120px;
  resize: vertical;
}

/* ============================================
   BUTTONS - Minimal, elegant
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  border: 1px solid;
  transition: all var(--duration-normal) var(--ease-out);
}

.btn svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-normal) var(--ease-out);
}

.btn:hover svg {
  transform: translateX(4px);
}

.btn--primary {
  color: var(--color-white);
  background-color: var(--color-text);
  border-color: var(--color-text);
}

.btn--primary:hover {
  background-color: var(--color-ink-light);
}

.btn--outline {
  color: var(--color-text);
  background-color: transparent;
  border-color: var(--color-border);
}

.btn--outline:hover {
  border-color: var(--color-text);
}

.btn--light {
  color: var(--color-white);
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.3);
}

.btn--light:hover {
  background-color: var(--color-white);
  color: var(--color-text);
  border-color: var(--color-white);
}

/* ============================================
   FOOTER - Clean, minimal
   ============================================ */

.footer {
  position: relative;
  padding: var(--space-4xl) 0 var(--space-2xl);
  background-color: var(--color-cloud);
}

/* Fine cross pattern */
/* Porthole circles pattern */
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Ccircle cx='25' cy='25' r='8' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
}

.footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-2xl);
  margin-bottom: var(--space-4xl);
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.footer__brand {
  max-width: 280px;
}

.footer__logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
}

.footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.footer__heading {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-lg);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__link {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) ease;
}

.footer__link:hover {
  color: var(--color-text);
}

/* Newsletter */
.footer__newsletter-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.footer__newsletter-form {
  display: flex;
}

.footer__newsletter-input {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-right: none;
  background: var(--color-white);
}

.footer__newsletter-input:focus {
  outline: none;
  border-color: var(--color-text);
}

.footer__newsletter-btn {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-white);
  background-color: var(--color-text);
  border: 1px solid var(--color-text);
  transition: background-color var(--duration-fast) ease;
}

.footer__newsletter-btn:hover {
  background-color: var(--color-ink-light);
}

/* Bottom */
.footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer__copyright {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.footer__legal {
  display: flex;
  gap: var(--space-lg);
}

.footer__legal a {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  transition: color var(--duration-fast) ease;
}

.footer__legal a:hover {
  color: var(--color-text);
}

/* ============================================
   WHATSAPP - Subtle
   ============================================ */

.whatsapp {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: #25D366;
  border-radius: 50%;
  opacity: 0.9;
  transition:
    transform var(--duration-normal) var(--ease-out),
    opacity var(--duration-fast) ease;
}

.whatsapp:hover {
  transform: scale(1.1);
  opacity: 1;
}

.whatsapp svg {
  width: 24px;
  height: 24px;
  fill: white;
}

/* ============================================
   REVEAL ANIMATIONS
   ============================================ */

/* Reveal animations - visible by default, GSAP handles animation */
.reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children - visible by default */
.reveal-stagger > * {
  opacity: 1;
  transform: translateY(0);
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   INNER PAGES - Page Hero
   ============================================ */

.page-hero {
  position: relative;
  padding: calc(var(--space-section) * 0.5) 0 var(--space-3xl);
  padding-top: calc(80px + var(--space-3xl));
  background-color: var(--color-snow);
}

/* Wave pattern for page hero */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0 10 Q25 0 50 10 T100 10' fill='none' stroke='rgba(0,0,0,0.03)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 100px 20px;
  pointer-events: none;
  z-index: 0;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero .text-display {
  margin-top: var(--space-md);
}

/* Header dark variant for inner pages */
.header--dark .header__logo,
.header--dark .header__link,
.header--dark .header__cta {
  color: var(--color-text);
}

.header--dark .header__link:hover {
  color: var(--color-ink);
}

.header--dark .header__cta {
  border-color: var(--color-ink);
}

.header--dark .header__cta:hover {
  background-color: var(--color-ink);
  color: var(--color-white);
}

.header--dark .header__toggle span {
  background-color: var(--color-ink);
}

/* ============================================
   ABOUT PAGE
   ============================================ */

.story {
  position: relative;
  background-color: var(--color-white);
}

.story__grid {
  display: grid;
  gap: var(--space-3xl);
  align-items: center;
}

@media (min-width: 768px) {
  .story__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.story__content .text-body {
  margin-bottom: var(--space-lg);
}

.story__image {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}

.story__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* About Values */
.about-values {
  position: relative;
  background-color: var(--color-cloud);
}

/* Nautical knot pattern */
.about-values::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20 L20 0 L40 20 L20 40 Z' fill='none' stroke='rgba(0,0,0,0.025)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.about-values .container {
  position: relative;
  z-index: 1;
}

.about-values__header {
  text-align: center;
  margin-bottom: var(--space-4xl);
}

.about-values__grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .about-values__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .about-values__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.about-value-card {
  padding: var(--space-2xl);
  background-color: var(--color-white);
  text-align: center;
}

.about-value-card__number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-warm);
  margin-bottom: var(--space-lg);
}

.about-value-card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
}

.about-value-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* Team Section */
.team {
  position: relative;
  background-color: var(--color-snow);
}

.team__header {
  text-align: center;
  margin-bottom: var(--space-4xl);
}

.team__grid {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 768px) {
  .team__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.team-card {
  text-align: center;
}

.team-card__image {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto var(--space-xl);
  border-radius: 50%;
  overflow: hidden;
}

.team-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__name {
  font-size: var(--text-xl);
  margin-bottom: var(--space-xs);
}

.team-card__role {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-warm);
  margin-bottom: var(--space-md);
}

.team-card__bio {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* Stats Section */
.stats {
  position: relative;
  padding: var(--space-4xl) 0;
  background-color: var(--color-ink);
  color: var(--color-white);
}

.stats__grid {
  display: grid;
  gap: var(--space-xl);
  text-align: center;
}

@media (min-width: 768px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-card__number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--color-warm);
  margin-bottom: var(--space-xs);
}

.stat-card__label {
  font-size: var(--text-sm);
  opacity: 0.7;
}

/* ============================================
   FLEET PAGE
   ============================================ */

.fleet-filter {
  padding: var(--space-xl) 0;
  background-color: var(--color-cloud);
}

.fleet-filter__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xl);
}

.fleet-filter__group {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.fleet-filter__label {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.fleet-filter__pills {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.filter-pill {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.filter-pill:hover,
.filter-pill--active {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white);
}

.fleet-grid {
  background-color: var(--color-snow);
}

.fleet__grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .fleet__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .fleet__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fleet-card {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background-color: var(--color-mist);
}

/* All cards same size - no large variant needed for consistency */
.fleet-card--featured {
  grid-column: span 1;
}

@media (min-width: 768px) {
  .fleet-card--featured {
    grid-column: span 1;
  }
}

.fleet-card__link {
  display: block;
  width: 100%;
  height: 100%;
}

.fleet-card__image {
  position: absolute;
  inset: 0;
}

.fleet-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.fleet-card:hover .fleet-card__image img {
  transform: scale(1.05);
}

.fleet-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 26, 26, 0.9) 0%,
    rgba(26, 26, 26, 0.4) 50%,
    transparent 100%
  );
}

.fleet-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-xl);
  color: var(--color-white);
}

.fleet-card__type {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-warm-light);
  margin-bottom: var(--space-xs);
}

.fleet-card__name {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}

.fleet-card__specs {
  display: flex;
  gap: var(--space-lg);
  font-size: var(--text-sm);
  opacity: 0.8;
}

.fleet-card__desc {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  opacity: 0.7;
  max-width: 400px;
}

.fleet-cta {
  background-color: var(--color-cloud);
}

.fleet-cta__content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.fleet-cta__content .text-body {
  margin: var(--space-md) 0 var(--space-xl);
}

/* ============================================
   DESTINATIONS PAGE
   ============================================ */

.destinations-page {
  background-color: var(--color-ink);
  padding: 0;
}

.destinations-page__grid {
  display: grid;
}

@media (min-width: 768px) {
  .destinations-page__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.destination-large {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

@media (min-width: 768px) {
  .destination-large {
    aspect-ratio: 16/10;
  }
}

.destination-large__link {
  display: block;
  width: 100%;
  height: 100%;
}

.destination-large__image {
  position: absolute;
  inset: 0;
}

.destination-large__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.destination-large:hover .destination-large__image img {
  transform: scale(1.05);
}

.destination-large__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 26, 26, 0.85) 0%,
    rgba(26, 26, 26, 0.3) 60%,
    transparent 100%
  );
}

.destination-large__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-2xl);
  color: var(--color-white);
}

.destination-large__region {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-warm-light);
  margin-bottom: var(--space-xs);
}

.destination-large__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-sm);
}

.destination-large__desc {
  font-size: var(--text-sm);
  opacity: 0.7;
  max-width: 400px;
  margin-bottom: var(--space-lg);
}

.destination-large__cta {
  display: inline-block;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-warm-light);
  transition: border-color var(--duration-fast) ease;
}

.destination-large:hover .destination-large__cta {
  border-color: var(--color-white);
}

/* Why Mediterranean */
.why-med {
  position: relative;
  background-color: var(--color-snow);
}

/* Compass pattern */
.why-med::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='15' fill='none' stroke='rgba(0,0,0,0.02)' stroke-width='0.5'/%3E%3Cpath d='M30 10 L30 50 M10 30 L50 30' stroke='rgba(0,0,0,0.015)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.why-med .container {
  position: relative;
  z-index: 1;
}

.why-med__header {
  text-align: center;
  margin-bottom: var(--space-4xl);
}

.why-med__grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .why-med__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .why-med__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.why-med__card {
  text-align: center;
  padding: var(--space-xl);
}

.why-med__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-lg);
  color: var(--color-warm);
}

.why-med__icon svg {
  width: 32px;
  height: 32px;
}

.why-med__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
}

.why-med__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* ============================================
   CONTACT PAGE
   ============================================ */

.contact-options {
  background-color: var(--color-white);
}

.contact-options__grid {
  display: grid;
  gap: var(--space-xl);
  text-align: center;
}

@media (min-width: 768px) {
  .contact-options__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-option {
  padding: var(--space-2xl);
  background-color: var(--color-snow);
}

.contact-option__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-lg);
  color: var(--color-warm);
}

.contact-option__icon svg {
  width: 28px;
  height: 28px;
}

.contact-option__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
}

.contact-option__value {
  display: block;
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.contact-option__note {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* Contact Form Section */
.contact-form-section {
  position: relative;
  background-color: var(--color-cloud);
}

/* Mediterranean nautical chart pattern - coastlines and depth contours */
.contact-form-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3C!-- Coastline contours --%3E%3Cpath d='M0 80 Q50 60 100 75 T200 65 T300 80 T400 70' fill='none' stroke='rgba(0,0,0,0.025)' stroke-width='1'/%3E%3Cpath d='M0 90 Q60 75 120 85 T220 78 T320 92 T400 82' fill='none' stroke='rgba(0,0,0,0.02)' stroke-width='0.5'/%3E%3Cpath d='M0 100 Q70 88 140 95 T240 90 T340 102 T400 94' fill='none' stroke='rgba(0,0,0,0.015)' stroke-width='0.5'/%3E%3C!-- Depth markers --%3E%3Ctext x='50' y='120' font-size='6' fill='rgba(0,0,0,0.03)' font-family='serif'%3E50m%3C/text%3E%3Ctext x='180' y='130' font-size='6' fill='rgba(0,0,0,0.03)' font-family='serif'%3E100m%3C/text%3E%3Ctext x='320' y='115' font-size='6' fill='rgba(0,0,0,0.03)' font-family='serif'%3E75m%3C/text%3E%3C!-- Island shapes --%3E%3Cellipse cx='280' cy='180' rx='25' ry='15' fill='none' stroke='rgba(0,0,0,0.02)' stroke-width='0.5'/%3E%3Cellipse cx='120' cy='200' rx='18' ry='10' fill='none' stroke='rgba(0,0,0,0.02)' stroke-width='0.5'/%3E%3Cellipse cx='350' cy='220' rx='20' ry='12' fill='none' stroke='rgba(0,0,0,0.02)' stroke-width='0.5'/%3E%3C!-- Compass rose hint --%3E%3Ccircle cx='60' cy='240' r='20' fill='none' stroke='rgba(0,0,0,0.02)' stroke-width='0.5'/%3E%3Cpath d='M60 220 L60 230 M60 250 L60 260 M40 240 L50 240 M70 240 L80 240' stroke='rgba(0,0,0,0.025)' stroke-width='0.5'/%3E%3C!-- Navigation lines --%3E%3Cpath d='M10 150 L390 250' fill='none' stroke='rgba(0,0,0,0.01)' stroke-width='0.5' stroke-dasharray='4 8'/%3E%3Cpath d='M50 280 L350 180' fill='none' stroke='rgba(0,0,0,0.01)' stroke-width='0.5' stroke-dasharray='4 8'/%3E%3C/svg%3E");
  background-size: 600px 450px;
  background-position: center;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

/* Additional map grid overlay */
.contact-form-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.008) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.008) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
}

.contact-form-section .container {
  position: relative;
  z-index: 1;
}

.contact-form-section__grid {
  display: grid;
  gap: var(--space-3xl);
}

@media (min-width: 768px) {
  .contact-form-section__grid {
    grid-template-columns: 1fr 2fr;
    align-items: start;
  }
}

.contact-form-section__intro .text-title {
  margin-bottom: var(--space-lg);
}

.contact-form-section__intro .text-body {
  margin-bottom: var(--space-md);
}

.contact-form-section__intro a {
  color: var(--color-warm);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-2xl);
  background-color: var(--color-white);
}

.contact-form__row {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.contact-form__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  padding: var(--space-md);
  font-size: var(--text-base);
  font-family: var(--font-body);
  border: 1px solid var(--color-border);
  background-color: var(--color-snow);
  transition: border-color var(--duration-fast) ease;
}

.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--color-warm);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form__submit {
  align-self: flex-start;
}

/* Office Hours */
.office-hours {
  background-color: var(--color-snow);
}

.office-hours__content {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.office-hours__content .text-title {
  margin-bottom: var(--space-2xl);
}

.office-hours__grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .office-hours__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.office-hours__item {
  padding: var(--space-lg);
  background-color: var(--color-white);
}

.office-hours__days {
  display: block;
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.office-hours__time {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* ============================================
   DESTINATION DETAIL PAGE
   ============================================ */

/* Destination Hero */
.dest-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--space-3xl);
  overflow: hidden;
}

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

.dest-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dest-hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 0.1) 100%
  );
  z-index: 1;
}

.dest-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  max-width: 800px;
  padding: 0 var(--space-lg);
}

.dest-hero__content .text-label {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--space-sm);
}

.dest-hero__content .text-display-large {
  margin-bottom: var(--space-md);
}

.dest-hero__subtitle {
  font-size: var(--text-xl);
  opacity: 0.9;
  font-style: italic;
}

.dest-hero__scroll {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-white);
  opacity: 0.6;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dest-hero__scroll svg {
  width: 20px;
  height: 20px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Destination Overview */
.dest-overview {
  position: relative;
}

/* Wave pattern for destination overview */
.dest-overview::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0 10 Q25 0 50 10 T100 10' fill='none' stroke='rgba(0,0,0,0.03)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 200px 40px;
  pointer-events: none;
  z-index: 0;
}

.dest-overview .container {
  position: relative;
  z-index: 1;
}

.dest-overview__grid {
  display: grid;
  gap: var(--space-3xl);
}

@media (min-width: 1024px) {
  .dest-overview__grid {
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
  }
}

.dest-overview__content .text-title {
  margin-bottom: var(--space-xl);
}

.dest-overview__content .text-body {
  margin-bottom: var(--space-lg);
}

.dest-overview__content .text-body--large {
  font-size: var(--text-lg);
  line-height: 1.7;
}

.dest-overview__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.dest-detail-card {
  padding: var(--space-lg);
  background-color: var(--color-snow);
  text-align: center;
}

.dest-detail-card__label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-xs);
}

.dest-detail-card__value {
  display: block;
  font-size: var(--text-lg);
  font-weight: 500;
}

/* Destination Gallery */
.dest-gallery {
  background-color: var(--color-snow);
  position: relative;
}

/* Compass pattern for gallery */
.dest-gallery::before {
  content: '';
  position: absolute;
  top: var(--space-3xl);
  right: var(--space-3xl);
  width: 200px;
  height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='rgba(0,0,0,0.04)' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='35' fill='none' stroke='rgba(0,0,0,0.03)' stroke-width='0.5'/%3E%3Cpath d='M50 5 L50 15 M50 85 L50 95 M5 50 L15 50 M85 50 L95 50' stroke='rgba(0,0,0,0.04)' stroke-width='0.5'/%3E%3Cpath d='M50 20 L55 50 L50 55 L45 50 Z' fill='rgba(0,0,0,0.03)'/%3E%3C/svg%3E");
  background-size: contain;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.dest-gallery .container {
  position: relative;
  z-index: 1;
}

.dest-gallery__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.dest-gallery__header .text-label {
  margin-bottom: var(--space-sm);
}

.dest-gallery__grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .dest-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .dest-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dest-gallery__item {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.dest-gallery__item--large {
  aspect-ratio: 16/9;
}

@media (min-width: 768px) {
  .dest-gallery__item--large {
    grid-column: span 2;
  }
}

.dest-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.dest-gallery__item:hover img {
  transform: scale(1.05);
}

.dest-gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-lg);
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: var(--color-white);
}

.dest-gallery__caption h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-xs);
}

.dest-gallery__caption p {
  font-size: var(--text-sm);
  opacity: 0.8;
}

/* Destination Itinerary */
.dest-itinerary {
  position: relative;
}

/* Nautical knot pattern for itinerary */
.dest-itinerary::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 10 C40 10 50 20 50 30 C50 40 40 50 30 50 C20 50 10 40 10 30 C10 20 20 10 30 10 M20 30 C20 25 25 20 30 20 M40 30 C40 35 35 40 30 40' fill='none' stroke='rgba(0,0,0,0.02)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  pointer-events: none;
  z-index: 0;
}

.dest-itinerary .container {
  position: relative;
  z-index: 1;
}

.dest-itinerary__header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-3xl);
}

.dest-itinerary__header .text-label {
  margin-bottom: var(--space-sm);
}

.dest-itinerary__header .text-title {
  margin-bottom: var(--space-lg);
}

.dest-itinerary__timeline {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
}

/* Vertical line */
.dest-itinerary__timeline::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
}

@media (min-width: 768px) {
  .dest-itinerary__timeline::before {
    left: 40px;
  }
}

.itinerary-day {
  display: flex;
  gap: var(--space-lg);
  padding-bottom: var(--space-2xl);
  position: relative;
}

.itinerary-day:last-child {
  padding-bottom: 0;
}

.itinerary-day__number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-snow);
  border: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .itinerary-day__number {
    width: 80px;
    height: 80px;
    font-size: var(--text-lg);
  }
}

.itinerary-day__content {
  flex: 1;
  padding-top: var(--space-sm);
}

@media (min-width: 768px) {
  .itinerary-day__content {
    padding-top: var(--space-lg);
  }
}

.itinerary-day__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
}

.itinerary-day__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.itinerary-day__distance {
  font-size: var(--text-sm);
  color: var(--color-warm);
  font-style: italic;
}

/* Destination Yachts */
.dest-yachts {
  background-color: var(--color-snow);
}

.dest-yachts__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.dest-yachts__header .text-label {
  margin-bottom: var(--space-sm);
}

.dest-yachts__grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .dest-yachts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .dest-yachts__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dest-yachts__cta {
  text-align: center;
  margin-top: var(--space-3xl);
}

/* Destination More */
.dest-more__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.dest-more__header .text-label {
  margin-bottom: var(--space-sm);
}

.dest-more__grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .dest-more__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dest-card--small {
  aspect-ratio: 3/4;
}

.dest-card--small .dest-card__image {
  height: 100%;
}

/* ============================================
   BLOG PAGE
   ============================================ */

/* Blog Featured */
.blog-featured {
  position: relative;
}

/* Water ripple pattern for blog */
.blog-featured::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='10' fill='none' stroke='rgba(0,0,0,0.02)' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='20' fill='none' stroke='rgba(0,0,0,0.015)' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='rgba(0,0,0,0.01)' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='rgba(0,0,0,0.008)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 0;
}

.blog-featured .container {
  position: relative;
  z-index: 1;
}

.blog-featured__card {
  display: block;
  text-decoration: none;
  color: inherit;
}

@media (min-width: 1024px) {
  .blog-featured__card {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
  }
}

.blog-featured__image {
  aspect-ratio: 16/10;
  overflow: hidden;
  margin-bottom: var(--space-xl);
}

@media (min-width: 1024px) {
  .blog-featured__image {
    aspect-ratio: 4/3;
    margin-bottom: 0;
  }
}

.blog-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.blog-featured__card:hover .blog-featured__image img {
  transform: scale(1.03);
}

.blog-featured__content {
  max-width: 500px;
}

.blog-featured__category {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-warm);
  margin-bottom: var(--space-md);
}

.blog-featured__title {
  font-size: var(--text-3xl);
  line-height: 1.2;
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .blog-featured__title {
    font-size: var(--text-4xl);
  }
}

.blog-featured__excerpt {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.blog-featured__meta {
  display: flex;
  gap: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* Blog Filter */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-3xl);
  justify-content: center;
}

/* Blog Grid */
.blog-grid {
  background-color: var(--color-snow);
  position: relative;
}

/* Teak deck pattern for blog grid */
.blog-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 100'%3E%3Crect x='2' y='0' width='36' height='100' fill='none' stroke='rgba(0,0,0,0.02)' stroke-width='0.5'/%3E%3Cline x1='2' y1='25' x2='38' y2='25' stroke='rgba(0,0,0,0.01)' stroke-width='0.5'/%3E%3Cline x1='2' y1='50' x2='38' y2='50' stroke='rgba(0,0,0,0.01)' stroke-width='0.5'/%3E%3Cline x1='2' y1='75' x2='38' y2='75' stroke='rgba(0,0,0,0.01)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 40px 100px;
  pointer-events: none;
  z-index: 0;
}

.blog-grid .container {
  position: relative;
  z-index: 1;
}

.blog-grid__articles {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 640px) {
  .blog-grid__articles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .blog-grid__articles {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-grid__more {
  text-align: center;
  margin-top: var(--space-3xl);
}

/* Blog Card */
.blog-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: var(--color-white);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

.blog-card__image {
  aspect-ratio: 16/10;
  overflow: hidden;
}

.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.blog-card:hover .blog-card__image img {
  transform: scale(1.05);
}

.blog-card__content {
  padding: var(--space-lg);
}

.blog-card__category {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-warm);
  margin-bottom: var(--space-sm);
}

.blog-card__title {
  font-size: var(--text-lg);
  line-height: 1.3;
  margin-bottom: var(--space-sm);
}

.blog-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.blog-card__meta {
  display: flex;
  gap: var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

/* Blog Newsletter */
.blog-newsletter {
  position: relative;
}

/* Porthole pattern for newsletter */
.blog-newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='rgba(0,0,0,0.03)' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='35' fill='none' stroke='rgba(0,0,0,0.02)' stroke-width='1'/%3E%3Cline x1='50' y1='10' x2='50' y2='20' stroke='rgba(0,0,0,0.02)' stroke-width='1'/%3E%3Cline x1='50' y1='80' x2='50' y2='90' stroke='rgba(0,0,0,0.02)' stroke-width='1'/%3E%3Cline x1='10' y1='50' x2='20' y2='50' stroke='rgba(0,0,0,0.02)' stroke-width='1'/%3E%3Cline x1='80' y1='50' x2='90' y2='50' stroke='rgba(0,0,0,0.02)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  pointer-events: none;
  z-index: 0;
}

.blog-newsletter .container {
  position: relative;
  z-index: 1;
}

.blog-newsletter__card {
  background-color: var(--color-snow);
  padding: var(--space-3xl);
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 1024px) {
  .blog-newsletter__card {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: var(--space-4xl);
  }
}

.blog-newsletter__content .text-label {
  margin-bottom: var(--space-sm);
}

.blog-newsletter__content .text-title {
  margin-bottom: var(--space-lg);
}

.blog-newsletter__content .text-body {
  margin-bottom: var(--space-xl);
}

.blog-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .blog-newsletter__form {
    flex-direction: row;
  }
}

.blog-newsletter__input {
  flex: 1;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-base);
  font-family: var(--font-body);
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
}

.blog-newsletter__input:focus {
  outline: none;
  border-color: var(--color-warm);
}

.blog-newsletter__image {
  aspect-ratio: 4/3;
  overflow: hidden;
  display: none;
}

@media (min-width: 1024px) {
  .blog-newsletter__image {
    display: block;
  }
}

.blog-newsletter__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Button Outline Variant */
.btn--outline {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn--outline:hover {
  background-color: var(--color-text);
  color: var(--color-white);
  border-color: var(--color-text);
}

/* Large display text */
.text-display-large {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ============================================
   YACHT DETAIL PAGE
   ============================================ */

/* Yacht Hero */
.yacht-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

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

.yacht-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yacht-hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0.1) 100%
  );
  z-index: 1;
}

.yacht-hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-4xl);
  width: 100%;
  color: var(--color-white);
}

.yacht-hero__type {
  display: block;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.7;
  margin-bottom: var(--space-sm);
}

.yacht-hero__name {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: var(--space-xl);
}

.yacht-hero__specs {
  display: flex;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}

.yacht-hero__spec {
  text-align: center;
  min-width: 80px;
}

.yacht-hero__spec-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
}

.yacht-hero__spec-label {
  display: block;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

.yacht-hero__scroll {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-white);
  opacity: 0.6;
  font-size: var(--text-sm);
}

.yacht-hero__scroll svg {
  width: 20px;
  height: 20px;
  animation: bounce 2s infinite;
}

/* Yacht Overview */
.yacht-overview {
  position: relative;
}

/* Wave pattern */
.yacht-overview::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0 10 Q25 0 50 10 T100 10' fill='none' stroke='rgba(0,0,0,0.03)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 200px 40px;
  pointer-events: none;
  z-index: 0;
}

.yacht-overview .container {
  position: relative;
  z-index: 1;
}

.yacht-overview__grid {
  display: grid;
  gap: var(--space-3xl);
}

@media (min-width: 1024px) {
  .yacht-overview__grid {
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
  }
}

.yacht-overview__content .text-label {
  margin-bottom: var(--space-sm);
}

.yacht-overview__content .text-title {
  margin-bottom: var(--space-xl);
}

.yacht-overview__content .text-body {
  margin-bottom: var(--space-lg);
}

.yacht-detail-card {
  background-color: var(--color-snow);
  padding: var(--space-xl);
}

.yacht-detail-card__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.yacht-detail-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.yacht-detail-card__row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.yacht-detail-card__row dt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.yacht-detail-card__row dd {
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Yacht Gallery */
.yacht-gallery {
  background-color: var(--color-snow);
  padding: var(--space-lg) 0;
}

.yacht-gallery__grid {
  display: grid;
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  .yacht-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.yacht-gallery__item {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.yacht-gallery__item--large {
  aspect-ratio: 16/9;
}

@media (min-width: 768px) {
  .yacht-gallery__item--large {
    grid-column: span 2;
  }
}

.yacht-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.yacht-gallery__item:hover img {
  transform: scale(1.05);
}

/* Yacht Amenities */
.yacht-amenities {
  position: relative;
}

/* Compass pattern */
.yacht-amenities::before {
  content: '';
  position: absolute;
  top: var(--space-3xl);
  right: var(--space-3xl);
  width: 250px;
  height: 250px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='rgba(0,0,0,0.03)' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='35' fill='none' stroke='rgba(0,0,0,0.02)' stroke-width='0.5'/%3E%3Cpath d='M50 5 L50 15 M50 85 L50 95 M5 50 L15 50 M85 50 L95 50' stroke='rgba(0,0,0,0.03)' stroke-width='0.5'/%3E%3Cpath d='M50 20 L55 50 L50 55 L45 50 Z' fill='rgba(0,0,0,0.02)'/%3E%3C/svg%3E");
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

.yacht-amenities .container {
  position: relative;
  z-index: 1;
}

.yacht-amenities__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.yacht-amenities__header .text-label {
  margin-bottom: var(--space-sm);
}

.yacht-amenities__grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .yacht-amenities__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .yacht-amenities__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.amenity-card {
  padding: var(--space-lg);
  background-color: var(--color-snow);
}

.amenity-card__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.amenity-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.amenity-card__list li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding-left: var(--space-md);
  position: relative;
}

.amenity-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-warm);
}

/* Yacht Crew */
.yacht-crew {
  background-color: var(--color-snow);
  position: relative;
}

/* Nautical rope pattern */
.yacht-crew::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 10 C40 10 50 20 50 30 C50 40 40 50 30 50 C20 50 10 40 10 30 C10 20 20 10 30 10 M20 30 C20 25 25 20 30 20 M40 30 C40 35 35 40 30 40' fill='none' stroke='rgba(0,0,0,0.015)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  pointer-events: none;
  z-index: 0;
}

.yacht-crew .container {
  position: relative;
  z-index: 1;
}

.yacht-crew__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.yacht-crew__header .text-label {
  margin-bottom: var(--space-sm);
}

.yacht-crew__grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 640px) {
  .yacht-crew__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .yacht-crew__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.crew-card {
  text-align: center;
}

.crew-card__image {
  aspect-ratio: 1;
  overflow: hidden;
  margin-bottom: var(--space-lg);
  background-color: var(--color-white);
}

.crew-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%);
  transition: filter var(--duration-normal) ease;
}

.crew-card:hover .crew-card__image img {
  filter: grayscale(0);
}

.crew-card__name {
  font-size: var(--text-lg);
  margin-bottom: var(--space-xs);
}

.crew-card__role {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Yacht Pricing */
.yacht-pricing {
  position: relative;
}

.yacht-pricing .container {
  position: relative;
  z-index: 1;
}

.yacht-pricing__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.yacht-pricing__header .text-label {
  margin-bottom: var(--space-sm);
}

.yacht-pricing__grid {
  display: grid;
  gap: var(--space-xl);
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .yacht-pricing__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pricing-card {
  padding: var(--space-xl);
  background-color: var(--color-snow);
  text-align: center;
}

.pricing-card__season {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

.pricing-card__period {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-lg);
}

.pricing-card__price {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-xs);
}

.pricing-card__note {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.yacht-pricing__note {
  text-align: center;
  margin-top: var(--space-xl);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.yacht-pricing__cta {
  text-align: center;
  margin-top: var(--space-2xl);
}

/* Yacht Similar */
.yacht-similar {
  background-color: var(--color-snow);
}

.yacht-similar__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.yacht-similar__header .text-label {
  margin-bottom: var(--space-sm);
}

.yacht-similar__grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .yacht-similar__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .yacht-similar__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.yacht-similar__cta {
  text-align: center;
  margin-top: var(--space-3xl);
}

/* Yacht Hero Back Link */
.yacht-hero__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-bottom: var(--space-xl);
  transition: color var(--duration-fast) ease;
}

.yacht-hero__back:hover {
  color: var(--color-white);
}

.yacht-hero__back svg {
  width: 16px;
  height: 16px;
}

/* Yacht Highlights Bar */
.yacht-highlights {
  background-color: var(--color-ink);
  padding: var(--space-lg) 0;
}

.yacht-highlights__grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .yacht-highlights__grid {
    gap: var(--space-3xl);
  }
}

.yacht-highlight {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-white);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.yacht-highlight svg {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

/* Yacht Overview Enhancements */
.yacht-overview__price {
  background-color: var(--color-snow);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
}

.yacht-overview__price-label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-xs);
}

.yacht-overview__price-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.yacht-overview__price-note {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.yacht-overview__specs {
  background-color: var(--color-snow);
  padding: var(--space-xl);
}

.yacht-overview__specs-title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.yacht-overview__specs-list {
  display: flex;
  flex-direction: column;
}

.yacht-overview__specs-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.yacht-overview__specs-row:last-child {
  border-bottom: none;
}

.yacht-overview__specs-row dt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.yacht-overview__specs-row dd {
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Yacht Gallery Enhancements */
.yacht-gallery__item--hero {
  grid-column: span 1;
  aspect-ratio: 16/10;
}

@media (min-width: 768px) {
  .yacht-gallery__item--hero {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }
}

.yacht-gallery__item--wide {
  grid-column: span 1;
}

@media (min-width: 768px) {
  .yacht-gallery__item--wide {
    grid-column: 1 / -1;
    aspect-ratio: 21/9;
  }
}

.yacht-gallery__caption {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-white);
  background-color: rgba(0, 0, 0, 0.5);
  padding: var(--space-xs) var(--space-sm);
  backdrop-filter: blur(4px);
}

/* Yacht Accommodation */
.yacht-accommodation {
  position: relative;
}

.yacht-accommodation::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0 10 Q25 0 50 10 T100 10' fill='none' stroke='rgba(0,0,0,0.02)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 200px 40px;
  pointer-events: none;
  z-index: 0;
}

.yacht-accommodation .container {
  position: relative;
  z-index: 1;
}

.yacht-accommodation__header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-3xl);
}

.yacht-accommodation__header .text-label {
  margin-bottom: var(--space-sm);
}

.yacht-accommodation__header .text-title {
  margin-bottom: var(--space-lg);
}

.yacht-accommodation__grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .yacht-accommodation__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .yacht-accommodation__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cabin-card {
  background-color: var(--color-snow);
  padding: var(--space-xl);
  text-align: center;
}

.cabin-card--master {
  background-color: var(--color-ink);
  color: var(--color-white);
}

.cabin-card--master .cabin-card__desc {
  color: rgba(255, 255, 255, 0.7);
}

.cabin-card--master .cabin-card__deck {
  color: var(--color-warm-light);
}

.cabin-card__icon {
  margin-bottom: var(--space-md);
}

.cabin-card__icon svg {
  width: 32px;
  height: 32px;
  opacity: 0.5;
}

.cabin-card__name {
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
}

.cabin-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.cabin-card__deck {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-warm);
}

/* Crew Card Bio */
.crew-card__bio {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-sm);
  line-height: 1.5;
}

/* Yacht CTA Section */
.yacht-cta {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4xl) var(--gutter);
}

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

.yacht-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yacht-cta__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(26, 26, 26, 0.95) 0%,
    rgba(26, 26, 26, 0.7) 50%,
    rgba(26, 26, 26, 0.5) 100%
  );
  z-index: 1;
}

.yacht-cta__content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  color: var(--color-white);
}

.yacht-cta__content .text-label {
  color: var(--color-warm-light);
  margin-bottom: var(--space-sm);
}

.yacht-cta__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: var(--space-xl);
}

.yacht-cta__pricing {
  display: flex;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.yacht-cta__rate {
  flex: 1;
  padding: var(--space-lg);
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}

.yacht-cta__rate--highlight {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.yacht-cta__rate-label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
  margin-bottom: var(--space-xs);
}

.yacht-cta__rate-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
}

.yacht-cta__rate-period {
  font-size: var(--text-sm);
  opacity: 0.7;
}

.yacht-cta__note {
  font-size: var(--text-sm);
  opacity: 0.6;
  margin-bottom: var(--space-xl);
}

.yacht-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* Light Outline Button */
.btn--outline-light {
  background-color: transparent;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn--outline-light:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Yacht Showcase Price */
.yacht-showcase__price {
  font-size: var(--text-sm);
  opacity: 0.8;
  margin-top: var(--space-sm);
}

/* ============================================
   FLEET PAGE - Bold Luxury Presentation
   ============================================ */

/* Fleet hero modifier */
.page-hero--fleet {
  padding-bottom: var(--space-4xl);
}

.page-hero--fleet .text-display {
  margin-bottom: var(--space-lg);
}

.page-hero--fleet .text-body {
  margin-bottom: var(--space-2xl);
}

/* Fleet Stats in Hero */
.fleet-stats {
  display: flex;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

.fleet-stat {
  text-align: center;
}

.fleet-stat__number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.fleet-stat__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-tertiary);
}

/* Filter Bar */
.fleet-filter-bar {
  padding: var(--space-lg) 0;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 60px;
  z-index: 50;
}

.fleet-filter__pills {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.filter-pill {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-secondary);
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: 0;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.filter-pill:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

.filter-pill--active {
  background-color: var(--color-text);
  color: var(--color-white);
  border-color: var(--color-text);
}

/* Featured Yacht - HERO SIZE */
.fleet-featured {
  position: relative;
  background-color: var(--color-ink);
}

.fleet-featured__card {
  display: block;
  position: relative;
  height: 85vh;
  min-height: 600px;
  max-height: 900px;
  overflow: hidden;
}

.fleet-featured__image {
  position: absolute;
  inset: 0;
}

.fleet-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.fleet-featured__card:hover .fleet-featured__image img {
  transform: scale(1.03);
}

.fleet-featured__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 26, 26, 0.95) 0%,
    rgba(26, 26, 26, 0.5) 40%,
    rgba(26, 26, 26, 0.2) 100%
  );
  z-index: 1;
}

.fleet-featured__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: var(--space-4xl) var(--gutter);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .fleet-featured__content {
    max-width: 800px;
    padding: var(--space-4xl);
  }
}

.fleet-featured__badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-color: var(--color-warm);
  color: var(--color-ink);
  margin-bottom: var(--space-lg);
}

.fleet-featured__type {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.7;
  margin-bottom: var(--space-sm);
}

.fleet-featured__name {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}

.fleet-featured__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  font-size: var(--text-sm);
  opacity: 0.8;
}

.fleet-featured__specs span {
  position: relative;
  padding-right: var(--space-lg);
}

.fleet-featured__specs span:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background-color: var(--color-warm);
  border-radius: 50%;
}

.fleet-featured__desc {
  font-size: var(--text-lg);
  line-height: 1.7;
  opacity: 0.9;
  margin-bottom: var(--space-xl);
  max-width: 600px;
}

.fleet-featured__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.fleet-featured__price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
}

.fleet-featured__cta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.8;
  transition: opacity var(--duration-fast) ease;
}

.fleet-featured__card:hover .fleet-featured__cta {
  opacity: 1;
}

.fleet-featured__cta svg {
  width: 18px;
  height: 18px;
  transition: transform var(--duration-normal) var(--ease-out);
}

.fleet-featured__card:hover .fleet-featured__cta svg {
  transform: translateX(6px);
}

/* Fleet Showcase Grid */
.fleet-showcase {
  background-color: var(--color-snow);
}

.fleet-showcase__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .fleet-showcase__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .fleet-showcase__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Showcase Card */
.fleet-showcase__card {
  position: relative;
  overflow: hidden;
  background-color: var(--color-ink);
}

.fleet-showcase__link {
  display: block;
  position: relative;
  aspect-ratio: 4/5;
}

.fleet-showcase__image {
  position: absolute;
  inset: 0;
}

.fleet-showcase__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.fleet-showcase__card:hover .fleet-showcase__image img {
  transform: scale(1.05);
}

.fleet-showcase__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 26, 26, 0.9) 0%,
    rgba(26, 26, 26, 0.3) 50%,
    transparent 100%
  );
  z-index: 1;
}

.fleet-showcase__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: var(--space-xl);
  color: var(--color-white);
}

.fleet-showcase__type {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.7;
  margin-bottom: var(--space-xs);
}

.fleet-showcase__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}

.fleet-showcase__specs {
  display: flex;
  gap: var(--space-md);
  font-size: var(--text-sm);
  opacity: 0.8;
  margin-bottom: var(--space-sm);
}

.fleet-showcase__price {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  opacity: 0.9;
}

/* Large Card Variant */
.fleet-showcase__card--large {
  grid-column: span 1;
}

@media (min-width: 640px) {
  .fleet-showcase__card--large {
    grid-column: span 2;
  }

  .fleet-showcase__card--large .fleet-showcase__link {
    aspect-ratio: 16/9;
  }

  .fleet-showcase__card--large .fleet-showcase__name {
    font-size: var(--text-3xl);
  }

  .fleet-showcase__card--large .fleet-showcase__content {
    padding: var(--space-2xl);
  }
}

@media (min-width: 1024px) {
  .fleet-showcase__card--large .fleet-showcase__link {
    aspect-ratio: 2/1;
  }
}

/* Fleet CTA Section */
.fleet-cta {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  padding: var(--space-4xl) var(--gutter);
  overflow: hidden;
}

.fleet-cta__bg {
  position: absolute;
  inset: 0;
}

.fleet-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fleet-cta__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(26, 26, 26, 0.95) 0%,
    rgba(26, 26, 26, 0.7) 50%,
    rgba(26, 26, 26, 0.4) 100%
  );
  z-index: 1;
}

.fleet-cta__content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  color: var(--color-white);
}

.fleet-cta__content .text-label {
  color: var(--color-warm-light);
  margin-bottom: var(--space-sm);
}

.fleet-cta__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: var(--space-lg);
}

.fleet-cta__text {
  font-size: var(--text-lg);
  line-height: 1.7;
  opacity: 0.9;
  margin-bottom: var(--space-2xl);
}

/* ============================================
   FLEET PAGE V2 - Usable Luxury
   ============================================ */

/* Fleet Hero - Compact but visual */
.fleet-hero {
  position: relative;
  height: 50vh;
  min-height: 400px;
  max-height: 600px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-ink);
}

.fleet-hero__media {
  position: absolute;
  inset: 0;
}

.fleet-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.fleet-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 26, 26, 0.9) 0%,
    rgba(26, 26, 26, 0.4) 50%,
    rgba(26, 26, 26, 0.2) 100%
  );
}

.fleet-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: var(--space-3xl);
  color: var(--color-white);
}

.text-label--light {
  color: rgba(255, 255, 255, 0.7);
}

.fleet-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin: var(--space-md) 0 var(--space-lg);
}

.fleet-hero__subtitle {
  font-size: var(--text-lg);
  line-height: 1.7;
  opacity: 0.8;
  max-width: 600px;
}

/* Fleet Toolbar - Search & Filter */
.fleet-toolbar {
  position: sticky;
  top: 60px;
  z-index: 50;
  padding: var(--space-lg) 0;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.fleet-toolbar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
}

.fleet-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.fleet-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fleet-filter__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
}

.fleet-filter__select {
  padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  border: 1px solid var(--color-border);
  background-color: transparent;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  min-width: 140px;
  transition: border-color var(--duration-fast) ease;
}

.fleet-filter__select:hover,
.fleet-filter__select:focus {
  border-color: var(--color-text);
  outline: none;
}

.fleet-toolbar__results {
  display: flex;
  align-items: center;
}

.fleet-toolbar__count {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* Fleet List */
.fleet-list {
  padding: var(--space-2xl) 0 var(--space-section);
  background-color: var(--color-snow);
}

/* Yacht Card - Horizontal Layout */
.yacht-card {
  margin-bottom: var(--space-lg);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--duration-normal) ease, border-color var(--duration-normal) ease;
}

.yacht-card:hover {
  border-color: var(--color-text);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.yacht-card__link {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .yacht-card__link {
    grid-template-columns: 400px 1fr;
  }
}

@media (min-width: 1024px) {
  .yacht-card__link {
    grid-template-columns: 480px 1fr;
  }
}

.yacht-card__image {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}

@media (min-width: 768px) {
  .yacht-card__image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 280px;
  }
}

.yacht-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.yacht-card:hover .yacht-card__image img {
  transform: scale(1.03);
}

.yacht-card__badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: var(--color-warm);
  color: var(--color-ink);
}

.yacht-card__body {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .yacht-card__body {
    padding: var(--space-2xl);
  }
}

.yacht-card__header {
  margin-bottom: var(--space-lg);
}

.yacht-card__type {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-xs);
}

.yacht-card__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .yacht-card__name {
    font-size: var(--text-3xl);
  }
}

.yacht-card__specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
}

.yacht-card__spec {
  text-align: center;
}

.yacht-card__spec-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  margin-bottom: 2px;
}

.yacht-card__spec-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
}

.yacht-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.yacht-card__builder {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.yacht-card__highlights {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.yacht-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-lg);
}

.yacht-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.yacht-card__price-label {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.yacht-card__price-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
}

.yacht-card__price-period {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.yacht-card__cta {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: color var(--duration-fast) ease;
}

.yacht-card:hover .yacht-card__cta {
  color: var(--color-warm);
}

/* Fleet Private CTA */
.fleet-private {
  background-color: var(--color-cloud);
}

.fleet-private__inner {
  display: grid;
  gap: var(--space-3xl);
  align-items: center;
}

@media (min-width: 768px) {
  .fleet-private__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.fleet-private__content .text-label {
  margin-bottom: var(--space-md);
}

.fleet-private__content .text-title {
  margin-bottom: var(--space-lg);
}

.fleet-private__content .text-body {
  margin-bottom: var(--space-xl);
}

.fleet-private__visual {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.fleet-private__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   FLEET PAGE - Big Photo Cards
   ============================================ */

/* Fleet Page Grid - Match destinations style */
.fleet-page {
  position: relative;
  background-color: var(--color-ink);
  padding: 0;
}

.fleet-page__grid {
  display: grid;
}

@media (min-width: 768px) {
  .fleet-page__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Yacht Large Card */
.yacht-large {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background-color: var(--color-ink);
}

@media (min-width: 768px) {
  .yacht-large {
    aspect-ratio: 16/10;
  }
}

.yacht-large--featured {
  grid-column: 1 / -1;
  aspect-ratio: 16/9;
}

@media (min-width: 768px) {
  .yacht-large--featured {
    aspect-ratio: 21/9;
  }
}

.yacht-large__link {
  display: block;
  width: 100%;
  height: 100%;
}

.yacht-large__image {
  position: absolute;
  inset: 0;
}

.yacht-large__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.yacht-large:hover .yacht-large__image img {
  transform: scale(1.05);
}

.yacht-large__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 26, 26, 0.9) 0%,
    rgba(26, 26, 26, 0.4) 50%,
    rgba(26, 26, 26, 0.1) 100%
  );
}

.yacht-large__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-xl);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .yacht-large__content {
    padding: var(--space-2xl);
  }
}

@media (min-width: 1024px) {
  .yacht-large--featured .yacht-large__content {
    padding: var(--space-3xl);
    max-width: 700px;
  }
}

.yacht-large__type {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-warm-light);
  margin-bottom: var(--space-xs);
}

.yacht-large__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

@media (min-width: 768px) {
  .yacht-large__name {
    font-size: var(--text-3xl);
  }
}

.yacht-large--featured .yacht-large__name {
  font-size: var(--text-3xl);
}

@media (min-width: 768px) {
  .yacht-large--featured .yacht-large__name {
    font-size: var(--text-4xl);
  }
}

.yacht-large__specs {
  display: flex;
  gap: var(--space-lg);
  font-size: var(--text-sm);
  opacity: 0.8;
  margin-bottom: var(--space-md);
}

.yacht-large__specs span {
  position: relative;
}

.yacht-large__specs span:not(:last-child)::after {
  content: '·';
  position: absolute;
  right: calc(var(--space-lg) / -2);
  transform: translateX(50%);
  opacity: 0.5;
}

.yacht-large__desc {
  font-size: var(--text-base);
  line-height: 1.6;
  opacity: 0.8;
  max-width: 500px;
  margin-bottom: var(--space-lg);
  display: none;
}

@media (min-width: 768px) {
  .yacht-large--featured .yacht-large__desc {
    display: block;
  }
}

.yacht-large__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.yacht-large__price {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
}

@media (min-width: 768px) {
  .yacht-large--featured .yacht-large__price {
    font-size: var(--text-xl);
  }
}

.yacht-large__cta {
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-warm-light);
  transition: border-color var(--duration-fast) ease;
}

.yacht-large:hover .yacht-large__cta {
  border-color: var(--color-white);
}

/* Private Fleet Section */
.private-fleet {
  position: relative;
  background-color: var(--color-cloud);
}

/* Nautical knot pattern */
.private-fleet::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20 L20 0 L40 20 L20 40 Z' fill='none' stroke='rgba(0,0,0,0.025)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.private-fleet__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-3xl);
  align-items: center;
}

@media (min-width: 768px) {
  .private-fleet__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.private-fleet__content .text-label {
  margin-bottom: var(--space-md);
}

.private-fleet__content .text-title {
  margin-bottom: var(--space-lg);
}

.private-fleet__content .text-body {
  margin-bottom: var(--space-xl);
}

.private-fleet__image {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.private-fleet__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}