/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* html is the single scroll container: overflow-y:scroll keeps the
     scrollbar always visible (no auto-hide), overflow-x:hidden blocks
     horizontal scroll. body must stay overflow:visible so it does NOT
     become a second scroll container (which breaks position:sticky). */
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #FF40C6 #000;
}

body {
  background-color: #000;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
}

/* ===== CUSTOM SCROLLBAR — exact copy of Framer site ===== */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #000;
  padding: 4px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #FF40C6;
  border: transparent;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #1C1C1C;
}

::-webkit-scrollbar-thumb:active {
  background-color: #000;
}

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

ul {
  list-style: none;
}

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

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== FONTS ===== */
.font-serif {
  font-family: 'Instrument Serif', serif;
}

.font-sans {
  font-family: 'Montserrat', sans-serif;
}

.accent {
  color: #FF40C6;
}

.accent-italic {
  color: #FF40C6;
  font-style: italic;
  font-family: 'Instrument Serif', serif;
}

/* ===== NAVBAR ===== */
.navbar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 20px;
}

.navbar {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  border: 1px solid #FF40C6;
  border-radius: 44px;
  padding: 20px 40px;
  box-shadow: 0 0 20px rgba(255, 64, 198, 1);
}

.navbar-logo img {
  height: 42px;
  width: auto;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  margin-right: 24px;
}

.navbar-links a {
  font-family: 'Instrument Serif', serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #fff;
  transition: color 0.3s ease;
  position: relative;
}

.navbar-links a:hover,
.navbar-links a.active {
  color: #FF40C6;
}

.navbar-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  background: #FF40C6;
  border: none;
  border-radius: 28px;
  padding: 0 22px;
  font-family: 'Instrument Serif', serif;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.navbar-phone:hover {
  background: #e838b3;
  box-shadow: 0 4px 15px rgba(255, 64, 198, 0.4);
}

.navbar-phone svg {
  width: 14px;
  height: 14px;
  fill: #fff;
}

/* Phone button cloned into the mobile dropdown — hidden on desktop */
.navbar-phone--menu {
  display: none;
}

/* Mobile menu toggle */
.navbar-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 5px;
}

.navbar-toggle span {
  width: 25px;
  height: 2px;
  background: #fff;
  transition: all 0.3s ease;
}

/* ===== HERO SECTION ===== */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 0 60px;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.22) 38%,
    rgba(0, 0, 0, 0) 68%
  );
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero-title {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: #fff;
  margin-bottom: 24px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.hero-title .italic-accent {
  font-style: italic;
  color: #FF40C6;
}

.hero-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  max-width: 1000px;
  line-height: 1.2;
  letter-spacing: -0.32px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.hero-scroll {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.hero-scroll img {
  width: 100px;
  height: 40px;
  object-fit: cover;
  display: block;
  transform: rotate(-90deg);
}

/* ===== ABOUT SCROLL STACK ===== */
.about-scroll-stack {
  position: relative;
  padding-top: 120px;
}

/* One continuous gradient over the whole about area — pink at the far left edge,
   blue at the far right edge, fully transparent in the middle so it only tints the
   margins (never darkens the content) and shows seamlessly across all panels. */
.about-scroll-stack::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(90deg, #FF40C6 0%, transparent 6%, transparent 94%, #1F51FF 100%);
  opacity: 0.86;
  filter: blur(5px);
  pointer-events: none;
}

.about-scroll-stack-item {
  position: sticky;
  top: 150px;
  background: #000;
}

.about-scroll-stack-item:nth-child(1) { z-index: 1; }
.about-scroll-stack-item:nth-child(2) { z-index: 2; }
.about-scroll-stack-item:nth-child(3) { z-index: 3; }

.about,
.talents,
.promises {
  height: 60vh;
  display: flex;
  align-items: center;
}

/* ===== ABOUT SECTION ===== */
.about {
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* Keep the about content above the stack gradient.
   1000px wide so each 1fr frame is 500px — matches Framer exactly. */
.about .container,
.talents .container,
.promises .container {
  position: relative;
  z-index: 1;
  width: min(1000px, calc(100% - 40px));
  max-width: none;
  padding: 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
}

/* 30px gap between the image and the text content (Framer keeps the
   frames flush and indents the text instead of using a grid gap) */
.about-text {
  padding-left: 30px;
}

.about-image {
  position: relative;
}

.about-image img,
.talents-images img,
.promises-image img {
  width: 100%;
  height: 60vh;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #222;
}

.about-text h2 {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 400;
  margin-bottom: 24px;
  line-height: 1.2;
}

.about-text h2 .accent-italic {
  color: #FF40C6;
  font-style: italic;
}

.about-text p {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.32px;
  color: #fff;
}

.about-text p .highlight {
  color: #FF40C6;
  font-weight: 600;
}

/* ===== TALENTS SECTION ===== */
.talents {
  padding: 0;
}

.talents-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
}

/* Talents text is on the left, image on the right → indent on the right */
.talents-text {
  padding-right: 30px;
}

.talents-text h2 {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 400;
  margin-bottom: 24px;
  line-height: 1.2;
}

.talents-text p {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.32px;
  color: #fff;
}

.talents-text p .highlight {
  color: #FF40C6;
  font-weight: 600;
}

/* ===== PROMISES SECTION ===== */
.promises {
  padding: 0;
}

.promises-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
}

/* Promises text is on the right, image on the left → indent on the left */
.promises-text {
  padding-left: 30px;
}

.promises-text h2 {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 400;
  margin-bottom: 24px;
  line-height: 1.2;
}

.promises-text p {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.32px;
  color: #fff;
}

.promises-text p .highlight {
  color: #FF40C6;
  font-weight: 600;
}

/* ===== CTA BANNER ===== */
.cta-banner {
  padding: 80px 0;
}

/* 1000px-wide box to match Framer */
.cta-banner .container {
  width: min(1000px, calc(100% - 48px));
  max-width: none;
  padding: 0;
}

.cta-banner-inner {
  border: 1px solid #383838;
  border-radius: 32px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  background: transparent;
}

.cta-banner-inner h3 {
  font-family: 'Instrument Serif', serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  max-width: 445px;
}

.btn-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  background: #1F51FF;
  color: #fff;
  font-family: 'Instrument Serif', serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 60px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
  text-align: center;
  min-width: 280px;
  animation: btn-blue-blink 1.4s ease-in-out infinite;
}

/* CTA banner blue button — match Framer (445px, slim pill, 37px radius) */
.cta-banner .btn-blue {
  width: 445px;
  max-width: 100%;
  min-width: 0;
  padding: 10px 28px;
  border-radius: 37px;
}

@keyframes btn-blue-blink {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

.btn-blue:hover {
  animation-play-state: paused;
  box-shadow: 0 8px 25px rgba(31, 81, 255, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .btn-blue {
    animation: none;
  }
}

.btn-pink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  background: linear-gradient(135deg, #FF40C6, #ff6ad5);
  color: #fff;
  font-family: 'Instrument Serif', serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 60px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.btn-pink:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 64, 198, 0.4);
}

/* ===== SERVICES SECTION ===== */
.services {
  position: relative;
  width: min(1000px, calc(100% - 48px));
  aspect-ratio: 3 / 2;
  min-height: 480px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
  background: #000;
  scroll-margin-top: 150px;
}

.services-showcase-bg,
.services-showcase-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.services-showcase-bg {
  object-fit: cover;
  object-position: 50% 22%;
  transition: opacity 0.25s ease;
}
/* Per-image focus overrides */
.services-showcase-bg[src$="car-show.webp"] { object-position: 50% 25%; }
.services-showcase-bg[src$="red-carpet.webp"] { object-position: 50% 20%; }
.services-showcase-bg[src$="promo-models.webp"] { object-position: 50% 20%; }

.services-showcase-shade {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.54) 52%, rgba(0, 0, 0, 0.78));
}

.services-showcase-layout {
  position: relative;
  z-index: 1;
  min-height: 558px;
  width: min(520px, calc(100% - 64px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: 56px 0;
}

.services-showcase-heading {
  align-self: flex-start;
}

.services-showcase-heading p {
  margin-bottom: 0;
  color: #fff;
  font-family: 'Instrument Serif', serif;
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1.2px;
  text-transform: none;
}

.services-showcase-heading h2 {
  max-width: 620px;
  color: #fff;
  font-family: 'Instrument Serif', serif;
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1.2px;
}

.services-showcase-heading h2 span {
  color: #FF40C6;
  font-style: italic;
}

.services-showcase {
  cursor: none;
}

.services-showcase-layout {
  cursor: auto;
}

.services-cursor {
  position: fixed;
  z-index: 9999;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #FF40C6;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.services-cursor.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.services-menu-shell {
  position: relative;
  width: min(500px, 100%);
}

.services-menu {
  width: 100%;
  max-height: 236px;
  overflow-y: auto;
  padding-right: 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Native scrollbar hidden — replaced by the custom always-visible indicator below */
.services-menu::-webkit-scrollbar {
  display: none;
}

/* Custom scroll indicator: thin 2px black track line */
.services-scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(#000, #000) center / 2px 100% no-repeat;
  border-radius: 2px;
  pointer-events: auto;
  cursor: pointer;
}

/* Wider rounded pink thumb that overlaps the track line */
.services-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  border-radius: 6px;
  background: #FF40C6;
  will-change: transform;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.services-scrollbar-thumb::before {
  content: '';
  position: absolute;
  inset: -8px -11px;
}

.services-scrollbar-thumb.dragging {
  cursor: grabbing;
}

.services-menu-item {
  display: block;
  padding: 17px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.84);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: color 0.25s ease, background-color 0.25s ease, padding-left 0.25s ease;
}

.services-menu-item:hover {
  padding-left: 16px;
  color: #FF40C6;
}

/* Clicked / selected item: solid pink bar with white text */
.services-menu-item.active {
  background: #FF40C6;
  color: #fff;
  padding-left: 20px;
  border-bottom-color: transparent;
}

/* ===== YACHT / ELEVATE SECTION ===== */
.elevate {
  height: 100vh;
  margin-top: 100px;
}

.elevate .container {
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 0;
}

.elevate-wrapper {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  height: 100%;
  background: linear-gradient(135deg, #382126 0%, #171016 58%, #050505 100%);
}

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

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

.elevate-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.08) 38%,
    rgba(0, 0, 0, 0.42) 66%,
    rgba(0, 0, 0, 0.94) 100%
  );
}

.elevate-content {
  position: relative;
  z-index: 2;
  height: 100%;
  width: min(1000px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0 0 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.elevate-content h2 {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 400;
  margin-bottom: 26px;
  line-height: 1.2;
}

.yacht-details {
  background: transparent;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid #222;
  border-radius: 30px;
  padding: 30px;
}

.yacht-booking-row {
  display: flex;
  align-items: center;
  gap: 28px;
}

.yacht-details h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 18px;
}

.yacht-features {
  display: flex;
  gap: 10px;
}

.yacht-feature {
  border: 1px solid #383838;
  border-radius: 10px;
  min-width: 145px;
  min-height: 58px;
  padding: 10px 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Yacht "SCHEDULE NOW" + Ride "BOOK NOW" buttons — copy Framer exactly:
   solid pink, fixed 455px, slim pill */
.yacht-details .btn-pink,
.ride-content .btn-pink {
  flex: none;
  width: 455px;
  max-width: 100%;
  min-width: 0;
  padding: 10px 28px;
  background: #FF40C6;
  border-radius: 37px;
  text-align: center;
}

/* ===== RIDE SECTION ===== */
.ride {
  padding: 80px 0;
}

.ride .container {
  width: min(1000px, calc(100% - 48px));
  max-width: none;
  padding: 0;
}

.ride-wrapper {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  min-height: 193px;
}

.ride-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.ride-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}

.ride-content {
  position: relative;
  z-index: 1;
  padding: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.ride-text h2 {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 400;
  margin-bottom: 12px;
  line-height: 1.2;
}

.ride-text p {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 450px;
}

/* ===== REFERRAL SECTION ===== */
.referral {
  padding: 120px 0;
}

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

.referral-title h2 {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 400;
  line-height: 1.2;
}

.referral-text p {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.32px;
  color: #fff;
  margin-bottom: 16px;
}

.referral-text .btn-pink {
  margin-top: 20px;
  width: 100%;
  text-align: center;
}

/* ===== TESTIMONIALS ===== */
.testimonials {
  padding: 100px 0 80px;
  overflow: hidden;
}

.testimonials > .container {
  max-width: none;
  padding: 0;
}

.testimonials-header {
  display: block;
  text-align: left;
  padding: 0;
  max-width: min(900px, calc(100vw - 40px));
  margin: 0 auto 20px;
}

.testimonials-header h2 {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 400;
  margin-bottom: 42px;
}

.testimonials-carousel {
  position: relative;
  width: min(1240px, calc(100vw - 40px));
  margin: 0 auto;
  overflow: hidden;
}

.testimonials-carousel::before,
.testimonials-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 38px;
  z-index: 2;
  width: clamp(34px, 7vw, 118px);
  pointer-events: none;
}

.testimonials-carousel::before {
  left: 0;
  background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 100%);
}

.testimonials-carousel::after {
  right: 0;
  background: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0) 100%);
}

.testimonials-track {
  display: flex;
  transition: transform 0.55s ease;
}

.testimonial-card {
  flex: 0 0 100%;
  padding: 0;
}

.testimonial-card-inner {
  background: #000;
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid #FF40C6;
  border-radius: 30px;
  min-height: 500px;
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.testimonial-logo {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

.testimonial-logo img {
  width: 95px;
  height: 60px;
  object-fit: contain;
}

.testimonial-quote-icon {
  color: #FF40C6;
  font-family: 'Instrument Serif', serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 0.48;
  margin-bottom: 20px;
}

.testimonial-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 20px;
}

.testimonial-author {
  font-family: 'Montserrat', sans-serif;
  max-width: 720px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #FF40C6;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
}

.carousel-btn {
  position: absolute;
  top: calc(50% - 28px);
  z-index: 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: rgba(147, 28, 106, 0.9);
  color: rgba(255, 255, 255, 0.42);
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.carousel-prev {
  left: clamp(20px, 5vw, 84px);
}

.carousel-next {
  right: clamp(20px, 5vw, 84px);
}

.carousel-btn:hover {
  background: #FF40C6;
  color: #fff;
}

.carousel-dots {
  display: flex;
  gap: 12px;
}

.carousel-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 64, 198, 0.48);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.carousel-dot.active {
  background: #FF40C6;
}

/* Mobile-only "Load More" button (hidden on desktop; shown via .is-visible) */
.testimonials-load-more {
  display: none;
  height: 44px;
  line-height: 44px;
  margin: 28px auto 0;
  padding: 0 52px;
  background: #FF40C6;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-family: 'Instrument Serif', serif;
  font-size: 17px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.testimonials-load-more.is-visible {
  display: block;
}

.testimonials-load-more:hover {
  opacity: 0.88;
}

/* ===== BOOKING / FOOTER ===== */
.booking {
  padding: 120px 0 60px;
}

/* Inquiry form: honeypot (hidden) + submit status message */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.form-status {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.45;
  min-height: 1px;
}
.form-status--ok { color: #46d39a; }
.form-status--error { color: #ff6b9d; }

.booking-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
}

.booking-info h2 {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 400;
  font-style: italic;
  margin-bottom: 30px;
}

.contact-info h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.contact-item svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  flex-shrink: 0;
}

.social-links {
  margin-top: 30px;
}

.social-links h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}

.social-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.25s ease;
}

.social-item:hover,
.social-item:focus-visible {
  color: #FF40C6;
}

.social-item svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  flex-shrink: 0;
  transition: fill 0.25s ease;
}

.social-item:hover svg,
.social-item:focus-visible svg {
  fill: #FF40C6;
}

/* Contact Form */
.booking-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #fff;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 14px 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #fff;
  outline: none;
  transition: border-color 0.3s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(255, 64, 198, 0.5);
}

.form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 40px;
}

.form-group select option {
  background: #111;
  color: #fff;
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.btn-submit {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FF40C6, #ff6ad5);
  color: #fff;
  font-family: 'Instrument Serif', serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 16px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-submit:hover {
  box-shadow: 0 8px 25px rgba(255, 64, 198, 0.4);
}

/* ===== UNIFIED BUTTON STYLE — 16px, ALL CAPS, solid colour, Framer hover ===== */
.btn-pink,
.btn-blue,
.btn-submit,
.navbar-phone,
.testimonials-load-more {
  font-size: 16px;
  text-transform: uppercase;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Solid colours (no gradient) */
.btn-pink,
.btn-submit {
  background: #FF40C6;
}

.btn-blue {
  background: #1F51FF;
  animation: none;
}

/* Hover: subtle scale-up like Framer */
.btn-pink:hover,
.btn-blue:hover,
.btn-submit:hover,
.navbar-phone:hover,
.testimonials-load-more:hover {
  transform: scale(1.05);
  animation: none;
}

/* ===== FOOTER ===== */
.footer {
  padding: 80px 0 60px;
  background: linear-gradient(180deg, #000 0%, #1a0a1a 30%, #5c1a4e 70%, #8b2a6b 100%);
  border: none;
}

.footer-content {
  text-align: center;
}

.footer-logo {
  margin-bottom: 30px;
}

.footer-logo img {
  height: 100px;
  width: auto;
  margin: 0 auto;
}

.footer-content p {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.8;
}

/* ===== SCROLL ANIMATIONS ===== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  /* Disable the sticky stack on tablet/mobile — flow sections normally */
  .about-scroll-stack-item {
    position: static;
  }

  .about,
  .talents,
  .promises {
    height: auto;
    padding: 50px 0;
  }

  /* 1-column stack — drop the desktop text indent */
  .about-text,
  .talents-text,
  .promises-text {
    padding: 0;
  }

  .about-image img,
  .talents-images img,
  .promises-image img {
    height: 320px;
  }

  .about-grid,
  .talents-grid,
  .promises-grid,
  .referral-grid,
  .booking-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Keep all About sections image-top / text-bottom on mobile
     (the Talents section has text first in the DOM, so move its image up) */
  .talents-grid .talents-images {
    order: -1;
  }

  .promises-grid {
    direction: ltr;
  }

  .yacht-details {
    padding: 24px;
  }

  .yacht-booking-row {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .yacht-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .ride-content {
    flex-direction: column;
    text-align: center;
  }

  .cta-banner-inner {
    flex-direction: column;
    text-align: center;
  }

  .testimonial-card-inner {
    min-height: 520px;
    padding: 48px 52px;
  }
}

@media (max-width: 768px) {
  /* ===== TESTIMONIALS: single column + Load More (no carousel) ===== */
  .testimonials-track {
    flex-direction: column;
    gap: 20px;
    transform: none !important;
    transition: none;
  }

  .testimonial-card {
    flex: 0 0 auto;
    width: 100%;
  }

  .testimonial-card.testimonial-card--hidden {
    display: none;
  }

  /* Hide carousel chrome on mobile (arrows, dots, edge fades) */
  .carousel-controls,
  .testimonials-carousel::before,
  .testimonials-carousel::after {
    display: none;
  }

  /* Full-width bar fixed flush to the top (no side gutters / rounded pill) */
  .navbar-wrapper {
    z-index: 1600;
    padding: 0;
  }

  .navbar {
    max-width: none;
    margin: 0;
    padding: 14px 24px;
    border: none;
    border-bottom: 1px solid #FF40C6;
    border-radius: 0;
    box-shadow: 0 0 20px #FF40C6;
    background: rgba(10, 10, 12, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .navbar-toggle {
    display: flex;
  }

  /* Keep logo + close button above the overlay */
  .navbar-logo,
  .navbar-toggle {
    position: relative;
    z-index: 1501;
  }

  /* Hamburger: two lines (hide the middle one) */
  .navbar-toggle span:nth-child(2) {
    display: none;
  }

  /* ===== FULL-SCREEN OVERLAY MENU ===== */
  .navbar-links {
    display: none;
  }

  .navbar-links.open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1500;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    padding: 90px 24px 40px;
    border: none;
    border-radius: 0;
    background: rgba(8, 8, 12, 0.5);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }

  .navbar-links.open a {
    font-family: 'Instrument Serif', serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
  }

  .navbar-links.open a.active,
  .navbar-links.open a:hover {
    color: #FF40C6;
  }

  /* Hide the phone button in the bar; show it inside the overlay */
  .navbar > .navbar-phone {
    display: none;
  }

  .navbar-links .navbar-phone--menu {
    display: inline-flex;
    width: auto;
    justify-content: center;
    margin-top: 12px;
    padding: 14px 30px;
    font-size: 15px;
  }

  /* When the menu is open: transparent bar + lock background scroll */
  body.nav-open {
    overflow: hidden;
  }

  body.nav-open .navbar {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Hamburger morphs into an X when open */
  body.nav-open .navbar-toggle span:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
  }

  body.nav-open .navbar-toggle span:nth-child(3) {
    transform: translateY(-3px) rotate(-45deg);
  }

  .hero-title {
    font-size: 32px;
  }

  .hero-subtitle {
    font-size: 14px;
  }

  /* Mobile: image stacked on top, scroll menu (~3 items) below */
  .services-showcase {
    display: flex;
    flex-direction: column;
    min-height: auto;
    cursor: auto;
  }

  .services-showcase-bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: 300px;
    object-fit: cover;
  }

  .services-showcase-shade {
    display: none;
  }

  .services-showcase-layout {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: auto;
    padding: 26px 24px 32px;
    background: #0c0c10;
  }

  .services-menu {
    width: 100%;
    max-height: 168px;
    margin-top: 4px;
  }

  .services-menu-item {
    padding: 14px 4px;
    font-size: 14px;
  }

  .testimonial-card-inner {
    min-height: 560px;
    padding: 36px 24px;
    border-radius: 30px;
  }

  .testimonial-logo {
    margin-bottom: 22px;
  }

  .testimonial-logo img {
    width: 132px;
    height: 84px;
  }

  .testimonial-quote-icon {
    font-size: 88px;
    margin-bottom: 20px;
  }

  .testimonial-text {
    font-size: 13px;
    line-height: 1.55;
  }

  .testimonial-author {
    font-size: 16px;
  }

  .carousel-btn {
    top: calc(50% - 23px);
    width: 46px;
    height: 46px;
    font-size: 21px;
  }

  .carousel-prev {
    left: 22px;
  }

  .carousel-next {
    right: 22px;
  }

  .carousel-dots {
    gap: 8px;
  }

  .carousel-dot {
    width: 9px;
    height: 9px;
  }

  .elevate-content {
    padding: 0 20px 20px;
  }

  .elevate-content h2 {
    font-size: 43px;
    margin-bottom: 20px;
  }

  .yacht-details {
    border-radius: 22px;
    padding: 20px;
  }

  .yacht-details h4 {
    margin-bottom: 14px;
  }

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

  .yacht-feature {
    min-width: 0;
    min-height: 52px;
  }

  .yacht-details .btn-pink {
    min-width: 0;
  }

  .ride-content {
    padding: 30px;
  }

  .talents-images {
    grid-template-columns: 1fr;
  }
}