:root {
    --color-primary: #1b4f9b;
    --color-secondary: #35b0ed;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-body-text: #4d5156;
    --color-warning: #D97706;
    --color-error: #DC2626;
    --color-success: #16A34A;
    --color-info: #0EA5E9;
    --color-text-muted: #6B7280;

	--body-text-size: 1.25rem;
}

.body-text-sm {
	--body-text-size: 1.125rem;
    font-size: var(--body-text-size);
}

.body-text-lg {
	--body-text-size: 1.25rem;
	font-size: var(--body-text-size);
}

/* =========================================================
   HEADING WAVE
   For H2 section headings only, never in the hero.
   Always left-aligned.
   Add "heading-wave" to the H2 (or to the Impreza text
   element wrapping it) to show the wave underneath.
========================================================= */

.heading-wave::after {
	content: "";
	display: block;
	width: 56px;
	height: 9px;
	margin: 0.65rem 0 1.15rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12'%3E%3Cpath d='M0,6 Q8,2 16,7 Q24,1 32,6 Q40,2 48,7 Q56,1 64,6 Q72,2 80,6' stroke='%2335B0ED' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center;
	background-size: contain;
	filter: drop-shadow(0 0 3px rgba(53, 176, 237, 0.25));
}

.logo-wrapper {
    height: 80px;
    line-height: 0;
}

.logo {
    display: block;
    height: 80px;
    transition: opacity 0.2s ease;
}

.logo:hover,
.logo:focus-visible {
    opacity: 0.8;
}

.logo svg {
    display: block;
    width: auto;
    height: 80px;
}

@media (max-width: 1024px) {
    .logo-wrapper,
    .logo,
    .logo svg {
        height: 50px;
    }
}

/* Top bar socials: round, white icon, light white circle on hover */
.top-bar-socials .w-socials-item-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	line-height: 1;
	border-radius: 50%;
	color: var(--color-white);
	background-color: transparent;
	transition: background-color 0.3s ease;
}

.no-touch .l-subheader.at_top .top-bar-socials .w-socials-item-link:hover {
	color: var(--color-white);
	background-color: rgb(255 255 255 / 0.2);
}

/* Impreza's brand-colour hover layer off, also if Hover is set to Fade */
.no-touch .w-socials.top-bar-socials .w-socials-item-link .w-socials-item-link-hover {
	display: none;
}

/* =========================================================
   HEADER MENU – HOVER LINE
   As on the current website (.nav-link::before): a 2px
   gradient line under the menu text grows from left to
   right on hover, 5px below the text.
   Also shown on the current page's menu item.
   Desktop menu only, not the mobile menu.
========================================================= */

.l-header .w-nav:not(.type_mobile) .w-nav-list.level_1 > .menu-item > .w-nav-anchor .w-nav-title {
	position: relative;
}

.l-header .w-nav:not(.type_mobile) .w-nav-list.level_1 > .menu-item > .w-nav-anchor .w-nav-title::before {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, #2cb8f6, #5bc9f8);
	transition: width 0.3s ease;
}

.l-header .w-nav:not(.type_mobile) .w-nav-list.level_1 > .menu-item > .w-nav-anchor:hover .w-nav-title::before,
.l-header .w-nav:not(.type_mobile) .w-nav-list.level_1 > .menu-item.current-menu-item > .w-nav-anchor .w-nav-title::before {
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.l-header .w-nav:not(.type_mobile) .w-nav-list.level_1 > .menu-item > .w-nav-anchor .w-nav-title::before {
		transition: none;
	}
}

/* Mobile navigation */
.mobile-navigation-section {
    height: auto;
    background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
    color: var(--color-primary, #1b4f9b);
    padding-top: 2.6rem;
	padding-bottom: 1.2rem;
	margin-bottom: 0rem;
}

.w-nav.type_mobile.m_layout_fullscreen .w-nav-list.level_1 {
    top: 75px !important;
    height: fit-content !important;
    max-height: calc(100% - 75px);
    justify-content: flex-start !important;
    align-items: stretch;
}

.w-nav.type_mobile.m_layout_fullscreen .w-nav-list.level_1 > li:first-child {
    margin-top: 0 !important;
}

.w-nav.type_mobile.m_layout_fullscreen .w-nav-list.level_1 > li:nth-last-child(2) {
    margin-bottom: 0 !important;
}

.w-nav.type_mobile.m_layout_fullscreen .w-nav-list.level_1 > li.w-nav-close {
    flex: 0 0 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
}

.mobile-navigation-section a {
    display: inline-block;
    font-size: var(--h4-font-size);
	font-family: var(--h2-font-family);
    font-weight: var(--fw-bold, 700);
    color: var(--color-primary, #1b4f9b);
    line-height: 1;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.mobile-navigation-section .menu-item {
    text-align: center;
    padding-block: 1.1rem;
    position: relative;
}

.mobile-navigation-section .menu-item:first-child {
    padding-top: 0;
}

.mobile-navigation-section li.menu-item {
   line-height: 1;
}

.mobile-navigation-section .menu-item::after {
    content: "";
    display: block;
    width: 45%;
    margin: 0 auto;
    border-bottom: 1px solid var(--color-primary, #1b4f9b);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.5;
}

.mobile-navigation-section nav {
	margin-bottom: 1.2rem;
}

.mobile-navigation-section a span.w-btn-label {
    font-size: 16px;
    font-family: var(--font-family);
}

/* =========================================================
   HOME HERO
   CSS-ONLY BACKGROUND SLIDER
   Mobile First
========================================================= */

.home-hero-section {
	position: relative;
	min-height: 540px;
	overflow: hidden;
	display: flex;
	align-items: flex-end; /* CHANGED: was center, text now sits at the bottom like the page hero */
	padding-top: 0 !important; /* CHANGED: same as page hero */
	padding-bottom: 0 !important; /* CHANGED: same as page hero */
	--hero-position: center center;
}


/* =========================================================
   HIDE ORIGINAL IMPREZA / ROYALSLIDER
========================================================= */

.home-hero-section > .l-section-slider {
	display: none !important;
}


/* =========================================================
   CSS SLIDER BACKGROUND LAYERS
========================================================= */

.home-hero-section::before,
.home-hero-section::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: var(--hero-position);
	background-size: cover;
	pointer-events: none;
	will-change: opacity, transform;
}


/* =========================================================
   IMAGE 1
========================================================= */

.home-hero-section::before {
	z-index: 0;
	background-image:
		linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.58) 0%,
			rgba(0, 0, 0, 0.42) 40%,
			rgba(0, 0, 0, 0.18) 70%,
			rgba(0, 0, 0, 0.08) 100%
		),
		var(--hero-image-1);
	animation:
		hero-image-1 14s infinite ease-in-out,
		hero-zoom 14s infinite ease-in-out;
}


/* =========================================================
   IMAGE 2
========================================================= */

.home-hero-section::after {
	z-index: 1;

	background-image:
		linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.58) 0%,
			rgba(0, 0, 0, 0.42) 40%,
			rgba(0, 0, 0, 0.18) 70%,
			rgba(0, 0, 0, 0.08) 100%
		),
		var(--hero-image-2);

	opacity: 0;

	animation:
		hero-image-2 14s infinite ease-in-out,
		hero-zoom 14s infinite ease-in-out;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.home-hero-section > .l-section-h {
	position: relative !important;
	width: 100%;
	z-index: 10 !important;
	padding-top: 0; /* CHANGED: same as page hero */
	padding-bottom: 2.5rem; /* CHANGED: same as page hero */
}


/* Content / text width */

.home-hero-section .w-vwrapper {
	position: relative;
	max-width: 720px;
	z-index: 11;
	margin-inline: auto;
}


/* =========================================================
   HERO TITLE
========================================================= */

.home-hero-section .hero-title {
	margin: 0;
	font-size: clamp(2rem, 1.2533rem + 2.8444vw, 3.6rem);
	line-height: 1.05;
	font-weight: 600;
	color: #fff !important;
	opacity: 1 !important;
}


.home-hero-section .hero-title .w-text-h,
.home-hero-section .hero-title .w-text-value {
	color: #fff !important;
	opacity: 1 !important;
}


/* =========================================================
   HERO SUB TITLE
========================================================= */

.home-hero-section .hero-sub-title {
	margin: 0;
	font-size: clamp(1.15rem, 0.87rem + 1.0667vw, 1.75rem);
	line-height: 1.25;
	font-weight: 400;
	color: #fff !important;
	opacity: 1 !important;
}


.home-hero-section .hero-sub-title .w-text-h,
.home-hero-section .hero-sub-title .w-text-value {
	color: #fff !important;
	opacity: 1 !important;
}


/* =========================================================
   INTRO
========================================================= */

.home-hero-section .hero-intro {
	max-width: 650px;
	margin-top: 0.5rem;
	font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.95) !important;
	opacity: 1 !important;
}


.home-hero-section .hero-intro,
.home-hero-section .hero-intro .wpb_wrapper,
.home-hero-section .hero-intro p {
	color: rgba(255, 255, 255, 0.95) !important;
	opacity: 1 !important;
}


.home-hero-section .hero-intro p {
	margin: 0;
}


/* =========================================================
   SUBTLE TEXT SHADOW
========================================================= */

.home-hero-section .hero-title,
.home-hero-section .hero-sub-title,
.home-hero-section .hero-intro {
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.20),
		0 4px 16px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   SLIDER ANIMATION
========================================================= */

@keyframes hero-image-1 {

	0%,
	42% {
		opacity: 1;
	}

	50%,
	92% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}

}


@keyframes hero-image-2 {

	0%,
	42% {
		opacity: 0;
	}

	50%,
	92% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}

}


/* =========================================================
   SUBTLE IMAGE MOVEMENT
========================================================= */

@keyframes hero-zoom {

	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.035);
	}

	100% {
		transform: scale(1);
	}

}


/* =========================================================
   MOBILE
   0 – 600px
========================================================= */

.home-hero-section {
	min-height: 540px;
}


/* CHANGED: small phones, same bottom padding as page hero */

@media (max-width: 480px) {

	.home-hero-section > .l-section-h {
		padding-bottom: 1.75rem;
	}

}


/* =========================================================
   TABLET
   601px – 1024px
========================================================= */

@media (min-width: 601px) {

	.home-hero-section {
		min-height: 60vh;
	}

}


/* =========================================================
   LAPTOP
   1025px – 1380px
========================================================= */

@media (min-width: 1025px) {

	.home-hero-section {
		min-height: 75vh;
	}

	/* CHANGED: same bottom padding as page hero */
	.home-hero-section > .l-section-h {
		padding-bottom: 4rem;
	}

}


/* =========================================================
   DESKTOP
   1381px+
========================================================= */

@media (min-width: 1381px) {

	.home-hero-section {
		min-height: 85vh;
	}

}


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

@media (prefers-reduced-motion: reduce) {

	.home-hero-section::before {
		animation: none;
		transform: none;
		opacity: 1;
	}

	.home-hero-section::after {
		display: none;
	}

}

/* yacht-charter-in-phuket-section css */

.yacht-charter-in-phuket-section {
	padding-block: 4rem;
	background: var(--color-white);
}

.day-charter-in-phuket-section {
	padding-block: 4rem;
	background: var(--color-white);
}

.yacht-charter-in-phuket-title h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
    position: relative;
    letter-spacing: -0.01em;
	/*text-align: center;*/
	color: var(--color-primary);
}

.home-charters-section {
	padding-block: 4rem;
	background: var(--color-white, #ffffff);
}

@media (max-width: 1025px) {
  /* Ensure the row stays a flex container when stacked vertically */
  .home-charters-section-inner {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Target the 2nd column (the intro text & contact details) and move it to top */
  .home-charters-section-inner > .wpb_column:nth-child(2) {
    order: -1 !important;
  }

  /* Optional: set explicit orders for the other two cards */
  .home-charters-section-inner > .wpb_column:nth-child(1) {
    order: 1 !important;
  }

  .home-charters-section-inner > .wpb_column:nth-child(3) {
    order: 2 !important;
  }
}

/* Day Charter button: subtle movement so visitors see it's clickable */
.home-day-charter-cta {
	animation: bm-cta-pulse 2.4s ease-in-out infinite;
}

.home-day-charter-cta i,
.home-day-charter-cta svg {
	animation: bm-cta-arrow 2.4s ease-in-out infinite;
}

.home-day-charter-cta:hover,
.home-day-charter-cta:hover i,
.home-day-charter-cta:hover svg {
	animation-play-state: paused;
}

@keyframes bm-cta-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgb(44 184 246 / 0.45);
	}
	50% {
		box-shadow: 0 0 0 0.5rem rgb(44 184 246 / 0);
	}
}

@keyframes bm-cta-arrow {
	0%, 100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(0.25rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-day-charter-cta,
	.home-day-charter-cta i,
	.home-day-charter-cta svg {
		animation: none;
	}
}

/* Homepage: centred headlines with the wave in the Day/Overnight + yachts section */
.home-charters-section h2.heading-wave,
.home-video-section h2.heading-wave,
.home-destinations-section h2.heading-wave,
.home-activities-section h2.heading-wave,
.our-reviews-footer-section h3.heading-wave,
.about-intro-section h2.heading-wave,
.about-team-section h2.heading-wave,
.about-values-section h3.heading-wave,
.about-offer-section h3.heading-wave,
.explore-the-andaman-sea-section h1.heading-wave,
.about-founder-section h1.heading-wave,
.yacht-charter-in-phuket-section h1.heading-wave,
.our-yachts-charters-section h2.heading-wave,
.yachts-for-this-trip-section h2.heading-wave,
.spots-in-this-area h2.heading-wave,
.single-yacht-main-section h1.heading-wave,
.single-yacht-main-section .w-html.heading-wave,
.yacht-pricing-section h2.heading-wave,
.yacht-request-section h2.heading-wave,
.yacht-overnight-section h2.heading-wave,
.overnight-main-section h1.heading-wave,
.yachts-ready-for-overnight-charters-section h2.heading-wave,
.day-charter-in-phuket-section h2.heading-wave,
.all-day-trips-section h2.heading-wave,
.main-contact-us-section h2.heading-wave,
.location-contact-us-section h2.heading-wave {
	text-align: center;
}

.home-charters-section h2.heading-wave::after,
.home-video-section h2.heading-wave::after,
.home-destinations-section h2.heading-wave::after,
.home-activities-section h2.heading-wave::after,
.our-reviews-footer-section h3.heading-wave::after,
.about-intro-section h2.heading-wave::after,
.about-team-section h2.heading-wave::after,
.about-values-section h3.heading-wave::after,
.about-offer-section h3.heading-wave::after,
.explore-the-andaman-sea-section h1.heading-wave::after,
.about-founder-section h1.heading-wave::after,
.yacht-charter-in-phuket-section h1.heading-wave::after,
.our-yachts-charters-section h2.heading-wave::after,
.yachts-for-this-trip-section h2.heading-wave::after,
.spots-in-this-area h2.heading-wave::after,
.single-yacht-main-section h1.heading-wave::after,
.single-yacht-main-section .w-html.heading-wave::after,
.yacht-pricing-section h2.heading-wave::after,
.yacht-request-section h2.heading-wave::after,
.yacht-overnight-section h2.heading-wave::after,
.overnight-main-section h1.heading-wave::after,
.yachts-ready-for-overnight-charters-section h2.heading-wave::after,
.day-charter-in-phuket-section h2.heading-wave::after,
.all-day-trips-section h2.heading-wave::after,
.main-contact-us-section h2.heading-wave::after,
.location-contact-us-section h2.heading-wave::after {
	margin-left: auto;
	margin-right: auto;
}

.home-destinations-section {
	padding-block: 4rem;
}

.home-bespoke-section {
	padding-block: 4rem;
	background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
}

.home-video-section {
	padding-block: 4rem;
	background: var(--color-white, #ffffff);
}

.home-video-section-content,
.home-video-section-content h3 {

}

.home-video-section-content {
	width: 100%;
	margin-inline: auto;
}

@media (min-width: 1025px) {
	.home-video-section-content {
		width: 70%;
		margin-inline: auto;
	}
}

.home-activities-section {
	padding-block: 4rem;
	/*background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);*/
	background: var(--color-white, #ffffff);
}

.home-private-tour-section {
	padding-block: 4rem;
}

.home-cta-section {
	padding-block: 4rem;
}

/* Home CTA Section */

.home-cta-section .l-section-overlay {
    background: linear-gradient(
        90deg,
        rgba(0, 20, 35, 0.48) 0%,
        rgba(0, 20, 35, 0.38) 50%,
        rgba(0, 20, 35, 0.22) 100%
    ) !important;
}


/* Title */

.home-cta-section-title h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-align: center;
    color: var(--color-white);
    margin-bottom: 16px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}


/* Content */

.home-cta-section-content {
    width: 100%;
    margin-inline: auto;
    text-align: center;
    font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
    line-height: 1.55;
    color: var(--color-white) !important;
    opacity: 1 !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}


/* Laptop and Desktop */

@media (min-width: 1025px) {

    .home-cta-section-content {
        width: 60%;
    }

}

.yacht-section-subtitle {
    font-size: var(--body-text-size);
	line-height: 1.6;
	max-width: 70%;
    font-weight: 400;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
	/*text-align: center;*/
	margin-bottom: 32px!important;
	color: var(--color-body-text);
}

/* Yach Card CSS */
.yacht-specs-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.yacht-card-modern {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(229, 231, 235, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    height: fit-content;
    min-width: 0;
}

.spec-item-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 8px;
    background: #F8FAFC;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    transition: all 0.2s ease;
}

.spec-icon-modern {
    width: 24px;
    height: 24px;
    background: var(--color-secondary, #35b0ed);
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-bottom: 4px;
}

.spec-value-modern {
    font-size: 14px;
    font-weight: 600;
    color: #1F2937;
    line-height: 1.2;
}

.spec-label-modern {
    font-size: 11px;
    color: #6B7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.yacht-content-modern {
    padding: 20px;
}

.yacht-title-modern {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.0625rem, 2vw, 1.375rem);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
    line-height: 1.1;
    text-align: center;
    letter-spacing: 0.01em;
    font-feature-settings: "kern" 1, "liga" 1;
}

.yacht-card-listing-note {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    color: #4d5156;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    letter-spacing: 0.01em;
	text-align: center;
    margin-bottom: 14px;
    line-height: 1.2;
}

.yacht-image-modern {
    position: relative;
    height: auto;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
}

.yacht-card-modern:hover {
    /*transform: translateY(-8px);*/
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

/* Yacht Detail Page CSS */
.yacht-detail-section {
	padding-block: 4rem;
}

.yacht-detail-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem!important;
}

@media (min-width: 1025px) {
	.yacht-detail-wrapper {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 1.5rem!important;
}
}

.yacht-main-image {
	
}

.single-yacht-main-section {
	padding-block: 4rem;
}

.single-yacht-main-section h1.bm-yacht-title {
	font-size: clamp(2.85rem, 6.5vw, 4.75rem);
}

.single-yacht-main-section-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 1025px) {
.single-yacht-main-section-wrapper {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 1.25rem;
	align-items: stretch;
}
}

.single-yacht-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    box-shadow: 0 4px 6px -1px rgba(14, 116, 144, 0.12), 0 12px 24px -4px rgba(8, 145, 178, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

.single-yacht-contact-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 1.25rem;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 10px 24px -4px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    text-align: center;
}

.single-yacht-contact-card .contact-line {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.5;
	color: #334155;
}

.single-yacht-contact-card .contact-line a {
	color: inherit;
	text-decoration: none;
}

.no-touch .single-yacht-contact-card .contact-line a:hover {
	color: var(--color-secondary, #2cb8f6);
}

.yacht-gallery-section {
	padding-block: 4rem;
}

.yacht-gallery-section-intro {
	width: 100%;
}

@media (min-width: 1025px) {
	.yacht-gallery-section-intro {
		width: 100%;
	}
}

.yacht-pricing-section {
	padding-block: 4rem;
	background: var(--color-white, #FFFFFF);
}

.yacht-details-section {
	padding-block: 4rem;
}

.main-footer-section {
	padding-block: 2rem;
	background: var(--color-white);
	border-top: 1px solid var(--color-border);
}

.main-footer-section .vc_column-inner > .wpb_wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.main-footer-section .vc_column-inner > .wpb_wrapper > .w-vwrapper {
	padding-left: 0.3rem;
	padding-right: 0.3rem;
	box-sizing: border-box;
	min-width: 0;
}

@media (min-width: 1025px) {
	.main-footer-section .vc_column-inner > .wpb_wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 2.5rem;
	}
}

h4.footer-headings {
	color: var(--color-black);
	margin-bottom: 1.2rem;
	font-size: 1.25rem;
    line-height: 1.75rem;
}

h4.footer-headings .w-text-h svg {
	color: var(--color-secondary, #2cb8f6);
}

.main-footer-section .footer-brand-text {
	color: var(--color-tertiary);
}

.main-footer-section .footer-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.bottom-footer-section {
	padding-block: 0.6rem;
	background: var(--color-white);
	border-top: 1px solid var(--color-border);
}

/* Footer menus: icon light blue, slides right on hover */
.main-footer-section .w-menu .menu-item > a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: color 0.3s ease, transform 0.3s ease;
}

.main-footer-section .w-menu .menu-item > a:hover {
	transform: translateX(0.25rem);
}

.main-footer-section .w-menu .menu-item > a i,
.main-footer-section .w-menu .menu-item > a svg {
	width: 1.25em;
	color: var(--color-secondary);
	transition: color 0.3s ease;
}

.main-footer-section .w-menu .menu-item > a:hover i,
.main-footer-section .w-menu .menu-item > a:hover svg {
	color: color-mix(in srgb, var(--color-secondary) 80%, #000000);
}

.yacht-overnight-section {
	padding-block: 4rem;
	background: var(--color-white, #FFFFFF);
}

/* About us css */

.text-with-background-gradient {
	background: linear-gradient(135deg, #1a3a5c 0%, #38bdf8 100%);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-hero-section .hero-title {
	margin: 0;
	font-size: clamp(2rem, 1.2533rem + 2.8444vw, 3.6rem);
	line-height: 1.05;
	font-weight: 600;
	color: #fff !important;
	opacity: 1 !important;
}


.about-hero-section .hero-title .w-text-h,
.about-hero-section .hero-title .w-text-value {
	color: #fff !important;
	opacity: 1 !important;
}

.about-hero-section .hero-intro {
	max-width: 650px;
	margin-top: 0.5rem;
	font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.95) !important;
	opacity: 1 !important;
}


.about-hero-section .hero-intro,
.about-hero-section .hero-intro .wpb_wrapper,
.about-hero-section .hero-intro p {
	color: rgba(255, 255, 255, 0.95) !important;
	opacity: 1 !important;
}


.about-hero-section .hero-intro p {
	margin: 0;
}

.about-hero-section .hero-title,
.about-hero-section .hero-sub-title,
.about-hero-section .hero-intro {
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.20),
		0 4px 16px rgba(0, 0, 0, 0.25);
}

.about-founder-section {
	padding-block: 4rem;
	background: var(--color-white, #ffffff);
}

.about-founder-section .about-founder-title {
    font-family: var(--h3-font-family, inherit);
    font-weight: var(--h3-font-weight, inherit);
    font-stretch: var(--h3-font-stretch, normal);
    font-size: var(--h3-font-size, inherit);
    font-style: var(--h3-font-style, inherit);
    line-height: var(--h3-line-height, 1.4);
    letter-spacing: var(--h3-letter-spacing, inherit);
    text-transform: var(--h3-text-transform, inherit);
    margin-bottom: var(--h3-margin-bottom, 1.5rem);
}

.about-founder-section blockquote {
	padding: 0;
	font-family: var(--h3-font-family, inherit);
	font-weight: var(--h3-font-weight, inherit);
	color: var(--color-content-heading);
	font-style: italic;
}

.about-founder-section blockquote::before,
.about-founder-section blockquote::after {
	content: none;
}

.about-founder-section blockquote p::before {
	content: "« ";
}

.about-founder-section blockquote p::after {
	content: " »";
}

.about-intro-section {
	padding-block: 4rem;
	background: var(--color-white, #ffffff);
}
.about-team-section {
	padding-block: 4rem;
	background: var(--color-white, #ffffff);
}

.about-team-section-title {

}

.about-team-section-intro {
	
}

.about-values-section {
	padding-block: 4rem;
	background: var(--color-white, #ffffff);
}

.about-values-section-title {
   font-size: clamp(2rem, 4vw, 3rem);
}

.about-values-section-intro {

}

.about-offer-section {
	padding-block: 4rem;
	background: var(--color-white, #ffffff);
}

.about-offer-section-title {

}

.about-offer-section-intro {
	
}

.about-fleet-section {
	padding-block: 4rem;
	background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
}

.about-fleet-section-title {

}

.about-fleet-section-intro {
	
}

.description-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 1025px) {
	.description-wrapper {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 32px;
	}
}

.ready-to-set-sail-wrapper {

}

.ready-to-set-sail-wrapper h2 {
	margin-bottom: 0;
}


.our-yachts-charters-section {
    padding-block: 4rem;
    background: var(--color-white, #FFFFFF);
}

.our-yachts-middle-section {
	padding-block: 4rem;
}

/* Water Toys CSS */
.water-toys-gallery-section  {
    padding-block: 4rem;
    background: var(--color-white, #FFFFFF);
}
/* Water toys gallery – rounded thumbnails */
.water-toys-gallery .w-gallery-item {
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate; /* keeps corners clipped during hover zoom/transitions (Safari) */
}

.water-toys-gallery .w-gallery-item-img,
.water-toys-gallery .w-gallery-item-img img,
.water-toys-gallery .w-gallery-item-link {
    border-radius: inherit;
}

/* overnight section */
.over-night-intro-section {
	padding-block: 4rem;
}

.over-night-facts-section {
	padding-block: 2rem;
	background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
}

.over-night-prices-and-availability-section {
	padding-block: 2rem;
	background: var(--color-white);
}

/* ==========================================================
   Overnight Charter page components
   Bohemian Marine
   ========================================================== */

/* ---------- Facts bar ---------- */

.bm-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 24px 0;
  border: 1px solid #e1e6ec;
  border-radius: 16px;
  background: #ffffff;
}

.bm-facts__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 24px;
}

.bm-facts__item + .bm-facts__item {
  border-left: 1px solid #e1e6ec;
}

.bm-facts__label,
.bm-facts__value {
  margin: 0;
  padding: 0;
}

.bm-facts__label {
  color: var(--color-body-text);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bm-facts__value {
  color: var(--color-primary);
  font-weight: 600;
}

/* Tablet and mobile: 2 columns, last item full width */
@media (max-width: 1024px) {
  .bm-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }

  .bm-facts__item {
    padding: 16px;
  }

  .bm-facts__item + .bm-facts__item {
    border-left: 0;
  }

  .bm-facts__item:nth-child(even) {
    border-left: 1px solid #e1e6ec;
  }

  .bm-facts__item:nth-child(n + 3) {
    border-top: 1px solid #e1e6ec;
  }

  .bm-facts__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}


.bm-price-box-wrapper {
	justify-content: space-between;
    padding: 32px;
    border-radius: 16px;
    background: #f4f6f9;
}

@media (max-width: 1024px) {
	.bm-price-box-wrapper {
	  	padding: 32px;
    	border-radius: 16px;
		flex-direction: column;
    	background: #f4f6f9;
		align-items: start;
		gap: 2rem;
}
}

.overnight-main-section {
	padding-block: 4rem;
	background: var(--color-white, #FFFFFF);
}

.day-charter-info-section {
	padding-block: 4rem;
	background: var(--color-white, #FFFFFF);
}

.yachts-ready-for-overnight-charters-section {
	padding-block: 4rem;
	background: var(--color-white, #FFFFFF);
}

/* =========================================================
   OVERNIGHT PAGE – YACHT GRID
   Grid element class : overnight-page-grid (Columns: 2)

   Desktop (1025px and up): the grid is two thirds of the
   content width (2 cards + 1 gap), so each card has the
   size of a 3-column grid. Centred.
   Tablets and phones: full width.
========================================================= */

@media (min-width: 1025px) {
	.overnight-page-grid {
		max-width: calc((100% - 2 * 16px) / 3 * 2 + 16px);
		margin-left: auto;
		margin-right: auto;
	}
}

.overnight-cancellation-section {
	padding-block: 4rem;
	background: var(--color-white, #FFFFFF);
}

.day-charter-cancellation-section {
	padding-block: 4rem;
	background: var(--color-white, #FFFFFF);
}

/* ---------- Cancellation table ----------
   WPBakery: Vertical Wrapper .bm-terms (inner gap 0),
   with one Horizontal Wrapper .bm-terms__row per line,
   each holding Text .bm-terms__when and Text .bm-terms__fee.
   ---------------------------------------- */
 
.bm-terms {
  border-top: 1px solid #1B4F9B;
}
 
.bm-terms__row {
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #1B4F9B;
  justify-content: space-between;
}
 
.bm-terms__when {
  color: var(--color-body-text);
}
 
.bm-terms__fee {
  flex-shrink: 0;
  font-weight: 700;
  text-align: right;
}

.half-day-full-day-section {
	padding-block: 4rem;
	background: var(--color-white);
}

.half-day-full-day-boxes {
	padding: 32px;
    border-radius: 16px;
    background: #f4f6f9;
}

/* Equal height boxes
   Inner row stretches its columns, each box fills its column. */

.half-day-full-day-section .wpb_wrapper > .g-cols {
	align-items: stretch;
}

.half-day-full-day-section .wpb_wrapper > .g-cols > .wpb_column > .vc_column-inner,
.half-day-full-day-section .wpb_wrapper > .g-cols > .wpb_column > .vc_column-inner > .wpb_wrapper {
	height: 100%;
}

.half-day-full-day-section .half-day-full-day-boxes {
	box-sizing: border-box;
	height: 100%;
}

.all-day-trips-section {
	padding-top: 3rem;
	padding-bottom: 0rem;
	background: #FFFFFF;
}

.main-contact-us-section {
	padding-block: 4rem;
	background: var(--color-white);
}

.location-contact-us-section {
	padding-block: 4rem;
	background: #FFFFFF;
}

/* =========================================================
   Footer Logo – white on the blue footer, 120px wide
   Element class in the footer: footer-logo
   ========================================================= */

.footer-logo img,
.footer-logo svg {
    display: block;
    width: 145px;
    max-width: 100%;
    height: auto;
	margin-bottom: 1.2rem;
    filter: brightness(0) invert(1);
}

/* Area CSS */
.about-the-area-section {
	padding-block: 4rem;
	background: var(--color-white);
}

.spots-in-this-area {
	padding-block: 4rem;
	background: #FFFFFF;
}

.yachts-for-this-trip-section {
	padding-block: 4rem;
	background: var(--color-white);
}

.explore-the-andaman-sea-section {
	padding-block: 4rem;
	background: #FFFFFF;
}

.bm-text-columns-section {
	padding-block: 4rem;
	background: var(--color-white);
}

/* =========================================
   CTA buttons
   Wrapper: .cta-button-wrapper
   All devices: space above the buttons
   Tablet and below: buttons stacked and centered
   ========================================= */
.w-hwrapper.cta-button-wrapper {
	margin-top: 24px;
}

@media (max-width: 1024px) {
	.w-hwrapper.cta-button-wrapper {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1.2rem;
	}

	.w-hwrapper.cta-button-wrapper > .w-btn-wrapper {
		margin: 0;
	}
}

.main-faq-section {
    padding-block: 4rem;
    background: var(--color-white, #ffffff);
}

/* FAQ width: 70% on desktop, full width on tablet and below */
.bohemian-faq .eg-accordion-css-wrap {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 1024px) {

	.bohemian-faq .eg-accordion-css-wrap {
		width: 100%;
	}
}

/* =========================================================
   ABOUT – FOUNDER CARDS

   Section class : about-founder-section
   Inner row     : two 1/2 columns
                   1st column  image card (photo of Markus)
                   2nd column  text card  (Our Founder's Journey)

   Based on the current website (about.php):
     Image card : white, 1px border, deep shadow, photo with
                  rounded corners inside, lift on hover
     Text card  : white, 1px border, soft shadow

   Both cards use the same 32px corners (the old site uses
   16px on the text card, which looks inconsistent).

   Both cards have the same height side by side. The photo
   fills its card (cover), so there is no empty space above
   it as on the old site. Stacked on phones, the photo keeps
   its own 4:5 ratio.

   The cards sit on the .wpb_wrapper, because Impreza puts the
   column gap as padding on .vc_column-inner.
========================================================= */

.about-founder-section {
	--founder-radius: 32px;
	--founder-ease: cubic-bezier(0.4, 0, 0.2, 1);
}


/* =========================================================
   EQUAL HEIGHTS
========================================================= */

.about-founder-section .wpb_row {
	align-items: stretch;
}

.about-founder-section .wpb_row > .wpb_column {
	display: flex;
}

.about-founder-section .wpb_row > .wpb_column > .vc_column-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}

.about-founder-section .wpb_row > .wpb_column > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	box-sizing: border-box;
	background: var(--color-white, #ffffff);
	border-radius: var(--founder-radius);
}


/* =========================================================
   IMAGE CARD (1st column)
========================================================= */

.about-founder-section .wpb_row > .wpb_column:first-child > .vc_column-inner > .wpb_wrapper {
	padding: 24px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
	transition: transform 0.4s var(--founder-ease), box-shadow 0.4s var(--founder-ease);
}

.about-founder-section .wpb_row > .wpb_column:first-child > .vc_column-inner > .wpb_wrapper:hover {
	transform: translateY(-8px);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.about-founder-section .wpb_row > .wpb_column:first-child .w-image {
	display: flex;
	flex: 1 1 auto;
	width: 100%;
	margin: 0;
}

.about-founder-section .wpb_row > .wpb_column:first-child .w-image-h {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	overflow: hidden;
	border-radius: var(--founder-radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.about-founder-section .wpb_row > .wpb_column:first-child .w-image-h img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	border-radius: 0;
	transition: transform 0.6s ease;
}

.about-founder-section .wpb_row > .wpb_column:first-child > .vc_column-inner > .wpb_wrapper:hover .w-image-h img {
	transform: scale(1.05);
}

/* Side by side: the photo fills the card's full height */
@media (min-width: 601px) {
	.about-founder-section .wpb_row > .wpb_column:first-child .w-image-h img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}
}


/* =========================================================
   TEXT CARD (2nd column)
========================================================= */

.about-founder-section .wpb_row > .wpb_column:last-child > .vc_column-inner > .wpb_wrapper {
	padding: 32px;
	border: 1px solid #f3f4f6;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.about-founder-section .wpb_row > .wpb_column:last-child .wpb_text_column p:last-child {
	margin-bottom: 0;
}


/* =========================================================
   PHONES
========================================================= */

@media (max-width: 480px) {
	.about-founder-section .wpb_row > .wpb_column > .vc_column-inner > .wpb_wrapper {
		padding: 24px;
	}
}


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

@media (prefers-reduced-motion: reduce) {
	.about-founder-section .wpb_row > .wpb_column > .vc_column-inner > .wpb_wrapper,
	.about-founder-section .wpb_row > .wpb_column:first-child .w-image-h img {
		transition: none;
	}

	.about-founder-section .wpb_row > .wpb_column:first-child > .vc_column-inner > .wpb_wrapper:hover,
	.about-founder-section .wpb_row > .wpb_column:first-child > .vc_column-inner > .wpb_wrapper:hover .w-image-h img {
		transform: none;
	}
}

.our-day-yacht-tiles {
	width: min(60rem, calc(100% - 0.5rem));
	margin-inline: auto;
}

/* =========================================================
   YACHT HERO – WHATSAPP BUTTON
   Output by [bm_yacht_wa_button] in the yacht template.
   Values from the current website (yacht-details.php),
   rem converted to px (old base 16px), so the size is the
   same on this site.

   The hover selectors include "a" and ".no-touch", so they
   win over Impreza's ".no-touch a:hover" link colour.
========================================================= */

a.yacht-hero-whatsapp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: 9999px;
	background: #25d366;
	color: #ffffff;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
	transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

a.yacht-hero-whatsapp-btn i,
a.yacht-hero-whatsapp-btn svg {
	flex-shrink: 0;
}

a.yacht-hero-whatsapp-btn:hover,
.no-touch a.yacht-hero-whatsapp-btn:hover,
a.yacht-hero-whatsapp-btn:focus-visible {
	background: #20bd5a;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}

a.yacht-hero-whatsapp-btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	a.yacht-hero-whatsapp-btn {
		transition: none;
	}

	a.yacht-hero-whatsapp-btn:hover,
	.no-touch a.yacht-hero-whatsapp-btn:hover,
	a.yacht-hero-whatsapp-btn:focus-visible {
		transform: none;
	}
}

/* =========================================================
   YACHT PAGE – LOWER PART
   Overnight title, details tabs (current website design),
   Itinerary tab hidden.

   Sections (yacht template):
     yacht-details-section    [yacht_tabs] Inclusive / Water toys /
                              Itinerary / Specification
     yacht-overnight-section  [charter_overnight] "Overnight Price"

   The tabs markup and base styles come from the bm-charter
   plugin (yacht-tabs.css), which the Day Charter trips also
   use. Everything here is scoped to yacht-details-section,
   so the Day Charter page is not affected.

   Values from the current website (yacht-details.php),
   rem converted to px (old base 16px).
========================================================= */


/* =========================================================
   1. OVERNIGHT TITLE
   Centred, with the same wave as .heading-wave.
========================================================= */

.yacht-overnight-section .bm-overnight__title {
	font-size: clamp(2.15rem, 4.2vw, 3.05rem);
	text-align: center;
}

.yacht-overnight-section .bm-overnight__title::after {
	content: "";
	display: block;
	width: 56px;
	height: 9px;
	margin: 0.65rem auto 1.15rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12'%3E%3Cpath d='M0,6 Q8,2 16,7 Q24,1 32,6 Q40,2 48,7 Q56,1 64,6 Q72,2 80,6' stroke='%2335B0ED' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	filter: drop-shadow(rgba(53, 176, 237, 0.25) 0 0 3px);
}


/* =========================================================
   2. ITINERARY TAB – HIDDEN
   The itineraries are shown above on the page. Tab and
   panel stay in the markup and can be shown again by
   removing this block.
========================================================= */

.yacht-details-section .yacht-tabs__tab[id$="-tab-itinerary"],
.yacht-details-section .yacht-tabs__panel[id$="-panel-itinerary"] {
	display: none !important;
}


/* =========================================================
   3. TABS – CARD
   White card with a light border and soft shadow.
========================================================= */

.yacht-details-section .yacht-tabs {
	overflow: hidden;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 20px rgba(15, 23, 42, 0.06);
}


/* =========================================================
   4. TABS – NAVIGATION BAND
   Light grey band, equal-width buttons in one row.
========================================================= */

.yacht-details-section .yacht-tabs__nav {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 8px;
	overflow: visible;
	margin: 0;
	padding: 12px 12px 14px;
	background: linear-gradient(180deg, #f4f7f9 0%, #eef2f6 100%);
	border: 0;
	border-bottom: 1px solid #e8ecf0;
}

.yacht-details-section .yacht-tabs__tab {
	position: relative;
	display: inline-flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 14.4px 10.4px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: none;
	color: #316c8f;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.yacht-details-section .yacht-tabs__tab i,
.yacht-details-section .yacht-tabs__tab svg {
	flex-shrink: 0;
	width: 1em;
	font-size: 14px;
	transition: transform 0.2s, opacity 0.2s;
}

.yacht-details-section .yacht-tabs__tab:hover {
	color: #264e66;
	background: #eef4f8;
	border-color: #cbd5e1;
}

.yacht-details-section .yacht-tabs__tab:hover i,
.yacht-details-section .yacht-tabs__tab:hover svg {
	transform: scale(1.05);
}

/* Active tab: dark blue gradient with a soft top light */
.yacht-details-section .yacht-tabs__tab[aria-selected="true"] {
	z-index: 1;
	color: #ffffff;
	background: linear-gradient(180deg, #2b6080 0%, #316c8f 100%);
	border-color: #2b6080;
	box-shadow: 0 2px 8px rgba(49, 108, 143, 0.22);
}

.yacht-details-section .yacht-tabs__tab[aria-selected="true"]::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
	pointer-events: none;
}

.yacht-details-section .yacht-tabs__tab[aria-selected="true"] i,
.yacht-details-section .yacht-tabs__tab[aria-selected="true"] svg {
	transform: none;
	color: #ffffff;
}

.yacht-details-section .yacht-tabs__tab:focus-visible {
	outline: 2px solid #316c8f;
	outline-offset: 2px;
}


/* =========================================================
   5. TABS – PANELS
   Content inside the card, heading and intro as on the
   current website.
========================================================= */

.yacht-details-section .yacht-tabs__panel {
	padding: 24px;
}

.yacht-details-section .yacht-tabs__heading {
	margin: 0 0 6px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 21.6px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.02em;
	color: #316c8f;
}

.yacht-details-section .yacht-tabs__intro {
	margin: 0 0 24px;
	font-size: 15px;
	color: #5a7d95;
}


/* =========================================================
   6. SMALL SCREENS
   Smaller tabs, no icons (as on the current website).
========================================================= */

@media (max-width: 768px) {
	.yacht-details-section .yacht-tabs__nav {
		gap: 5.6px;
	}

	.yacht-details-section .yacht-tabs__tab {
		padding: 10.4px 5.6px;
		font-size: 11.2px;
		border-radius: 8px;
	}

	.yacht-details-section .yacht-tabs__tab i,
	.yacht-details-section .yacht-tabs__tab svg {
		display: none;
	}
}

@media (max-width: 640px) {
	.yacht-details-section .yacht-tabs__nav {
		padding: 10px 8px 12px;
	}

	.yacht-details-section .yacht-tabs__panel {
		padding: 16px;
	}
}


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

@media (prefers-reduced-motion: reduce) {
	.yacht-details-section .yacht-tabs__tab,
	.yacht-details-section .yacht-tabs__tab i,
	.yacht-details-section .yacht-tabs__tab svg {
		transition: none;
	}
}

/* =========================================================
   YACHT HIGHLIGHTS – CENTRED
   Only centres the [yacht_highlights] block and its title.
   Everything else stays as the plugin styles it.
   "section." makes it win over the plugin's stylesheet,
   which loads after this one.
========================================================= */

section.yacht-highlights {
	margin-left: auto;
	margin-right: auto;
	max-width: 720px;
}

.yacht-highlights .yacht-highlights__title {
	text-align: center;
}

/* =========================================================
   YACHT PAGE – LOWER PART
   Overnight title, width and season buttons, details tabs
   (tab bar and panel content), Itinerary tab hidden.

   Sections (yacht template):
     yacht-details-section    [yacht_tabs] Inclusive / Water toys /
                              Itinerary / Specification
     yacht-overnight-section  [charter_overnight] "Overnight Price"

   Colours: tertiary #086788 and topbar #304E67 instead of the
   current website's #316c8f and #2b6080.
     Buttons  : active tertiary + white, inactive white +
                tertiary, hover light blue + topbar text
     Icons    : gradient topbar → tertiary, white icon

   The tabs markup and base styles come from the bm-charter
   plugin (yacht-tabs.css), which the Day Charter trips also
   use. Everything here is scoped to yacht-details-section,
   so the Day Charter page is not affected.

   The plugin stylesheets load after this one, so some
   selectors are one step more specific to win.

   Values from the current website (yacht-details.php),
   rem converted to px where they come from there.
========================================================= */


/* =========================================================
   1. OVERNIGHT TITLE
   Centred, with the same wave as .heading-wave.
========================================================= */

.yacht-overnight-section .bm-overnight__title {
	font-size: clamp(2.15rem, 4.2vw, 3.05rem);
	text-align: center;
}

.yacht-overnight-section .bm-overnight__title::after {
	content: "";
	display: block;
	width: 56px;
	height: 9px;
	margin: 0.65rem auto 1.15rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12'%3E%3Cpath d='M0,6 Q8,2 16,7 Q24,1 32,6 Q40,2 48,7 Q56,1 64,6 Q72,2 80,6' stroke='%2335B0ED' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	filter: drop-shadow(rgba(53, 176, 237, 0.25) 0 0 3px);
}


/* =========================================================
   2. OVERNIGHT – WIDTH
   Narrower and centred on desktops (1025px and up),
   full width on tablets and phones.
========================================================= */

@media (min-width: 1025px) {
	.yacht-overnight-section section.bm-overnight {
		max-width: 900px;
		margin-left: auto;
		margin-right: auto;
	}
}


/* =========================================================
   3. OVERNIGHT – SEASON BUTTONS
   High / Peak / Low, same colours as the tabs.
========================================================= */

.yacht-overnight-section .bm-overnight .bm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.yacht-overnight-section .bm-overnight .bm-chip {
	appearance: none;
	min-height: 0;
	padding: 8px 24px;
	background: var(--color-white, #ffffff);
	border: 1px solid #dfe7ee;
	border-radius: 8px;
	color: var(--color-tertiary, #086788);
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.yacht-overnight-section .bm-overnight .bm-chip:hover {
	background: var(--color-light-blue, #f0f9ff);
	border-color: var(--color-tertiary, #086788);
	color: var(--color-topbar, #304e67);
}

.yacht-overnight-section .bm-overnight .bm-chip[aria-pressed="true"] {
	background: var(--color-tertiary, #086788);
	border-color: var(--color-tertiary, #086788);
	color: var(--color-white, #ffffff);
}

.yacht-overnight-section .bm-overnight .bm-chip:focus-visible {
	outline: 2px solid var(--color-secondary, #2cb8f6);
	outline-offset: 2px;
}


/* =========================================================
   4. ITINERARY TAB – HIDDEN
   The itineraries are shown above on the page. Tab and
   panel stay in the markup and can be shown again by
   removing this block.
========================================================= */

.yacht-details-section .yacht-tabs__tab[id$="-tab-itinerary"],
.yacht-details-section .yacht-tabs__panel[id$="-panel-itinerary"] {
	display: none !important;
}


/* =========================================================
   5. TABS – CARD
   White card with a light border and soft shadow.
========================================================= */

.yacht-details-section .yacht-tabs {
	overflow: hidden;
	background: var(--color-white, #ffffff);
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 20px rgba(15, 23, 42, 0.06);
}


/* =========================================================
   6. TABS – NAVIGATION BAND
   Light grey band, equal-width buttons in one row.
========================================================= */

.yacht-details-section .yacht-tabs__nav {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 8px;
	overflow: visible;
	margin: 0;
	padding: 12px 12px 14px;
	background: linear-gradient(180deg, #f4f7f9 0%, #eef2f6 100%);
	border: 0;
	border-bottom: 1px solid #e8ecf0;
}

.yacht-details-section .yacht-tabs__tab {
	position: relative;
	display: inline-flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 14.4px 10.4px;
	background: var(--color-white, #ffffff);
	border: 1px solid #dfe7ee;
	border-radius: 8px;
	box-shadow: none;
	color: var(--color-tertiary, #086788);
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.yacht-details-section .yacht-tabs__tab i,
.yacht-details-section .yacht-tabs__tab svg {
	flex-shrink: 0;
	width: 1em;
	font-size: 14px;
	transition: transform 0.2s, opacity 0.2s;
}

.yacht-details-section .yacht-tabs__tab:hover {
	color: var(--color-topbar, #304e67);
	background: var(--color-light-blue, #f0f9ff);
	border-color: var(--color-tertiary, #086788);
}

.yacht-details-section .yacht-tabs__tab:hover i,
.yacht-details-section .yacht-tabs__tab:hover svg {
	transform: scale(1.05);
}

/* Active tab: tertiary with white text */
.yacht-details-section .yacht-tabs__tab[aria-selected="true"] {
	z-index: 1;
	color: var(--color-white, #ffffff);
	background: var(--color-tertiary, #086788);
	border-color: var(--color-tertiary, #086788);
	box-shadow: 0 2px 8px rgba(8, 103, 136, 0.22);
}

.yacht-details-section .yacht-tabs__tab[aria-selected="true"] i,
.yacht-details-section .yacht-tabs__tab[aria-selected="true"] svg {
	transform: none;
	color: var(--color-white, #ffffff);
}

.yacht-details-section .yacht-tabs__tab:focus-visible {
	outline: 2px solid var(--color-secondary, #2cb8f6);
	outline-offset: 2px;
}


/* =========================================================
   7. PANELS – HEADER
   Centred title and intro, small wave below the intro, then
   a thin divider line, as on the current website.
========================================================= */

.yacht-details-section .yacht-tabs__panel {
	padding: 24px;
}

.yacht-details-section .yacht-tabs__heading {
	margin: 0 0 6px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(1.35rem, 2.5vw, 1.85rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.02em;
	color: var(--color-tertiary, #086788);
	text-align: center;
}

.yacht-details-section .yacht-tabs__intro {
	margin: 0 0 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e8ecf0;
	font-size: 15px;
	color: var(--color-text-muted, #6b7280);
	text-align: center;
}

.yacht-details-section .yacht-tabs__intro::after {
	content: "";
	display: block;
	width: 72px;
	height: 14px;
	margin: 6.4px auto 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12'%3E%3Cpath d='M0,6 Q8,2 16,7 Q24,1 32,6 Q40,2 48,7 Q56,1 64,6 Q72,2 80,6' stroke='%23086788' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* =========================================================
   8. PANELS – INCLUSIVE
   Cards keep the plugin's look. Only the lists run in two
   columns (one column on phones, see section 10).
========================================================= */

.yacht-details-section .yacht-tabs__list {
	column-count: 2;
	column-gap: 32px;
}

.yacht-details-section .yacht-tabs__list li {
	break-inside: avoid;
}


/* =========================================================
   9. PANELS – WATER TOYS AND SPECIFICATION TILES
   White cards with a filled icon tile. On hover the card
   lifts and a coloured line appears at the top.
   Water toys : title = name, note = price
   Specs      : note = label (shown first, bold),
                title = value (small)
========================================================= */

.yacht-details-section .yacht-tabs__grid--toys,
.yacht-details-section .yacht-tabs__grid--specs {
	gap: 24px;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.yacht-details-section .yacht-tabs__grid--toys,
	.yacht-details-section .yacht-tabs__grid--specs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.yacht-details-section .yacht-tabs__grid--toys,
	.yacht-details-section .yacht-tabs__grid--specs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.yacht-details-section .yacht-tabs__grid > li {
	height: 100%;
}

.yacht-details-section .yacht-tabs__tile {
	position: relative;
	gap: 16px;
	box-sizing: border-box;
	height: 100%;
	min-height: 88px;
	padding: 16px;
	overflow: hidden;
	background: var(--color-white, #ffffff);
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	color: inherit;
	text-decoration: none;
	transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

/* Coloured line at the top, shown on hover */
.yacht-details-section .yacht-tabs__tile::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--color-tertiary, #086788) 0%, var(--color-secondary, #2cb8f6) 100%);
	transform: scaleX(0);
	transition: transform 0.3s;
}

.yacht-details-section .yacht-tabs__tile:hover {
	transform: translateY(-4px);
	border-color: #d1d5db;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.yacht-details-section .yacht-tabs__tile:hover::before {
	transform: scaleX(1);
}

/* Water toy tiles are links: no link colour or underline */
.yacht-details-section a.yacht-tabs__tile,
.no-touch .yacht-details-section a.yacht-tabs__tile:hover {
	color: inherit;
	text-decoration: none;
}

/* Icon tile: gradient, white icon.
   --yt-sea is set to white here because the plugin colours
   the icon with var(--yt-sea) !important. */
.yacht-details-section .yacht-tabs__tile-icon {
	--yt-sea: #ffffff;

	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--color-topbar, #304e67) 0%, var(--color-tertiary, #086788) 100%);
	color: #ffffff;
	font-size: 18px;
	box-shadow: 0 4px 12px rgba(8, 103, 136, 0.35);
	transition: transform 0.4s, box-shadow 0.4s;
}

.yacht-details-section .yacht-tabs__tile:hover .yacht-tabs__tile-icon {
	transform: scale(1.15) rotate(8deg);
	box-shadow: 0 15px 35px rgba(8, 103, 136, 0.35);
}

/* Texts: the bold line in tertiary, the small line muted */
.yacht-details-section .yacht-tabs__tile-title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.025em;
	color: var(--color-tertiary, #086788);
}

.yacht-details-section .yacht-tabs__tile-note {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-muted, #6b7280);
}

/* Specs: label (note) first and bold, value (title) small */
.yacht-details-section .yacht-tabs__grid--specs .yacht-tabs__tile-note {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.025em;
	color: var(--color-tertiary, #086788);
}

.yacht-details-section .yacht-tabs__grid--specs .yacht-tabs__tile-title {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: normal;
	color: var(--color-text-muted, #6b7280);
}


/* =========================================================
   10. SMALL SCREENS
   Smaller tabs, no icons in the tab bar, one-column lists.
========================================================= */

@media (max-width: 768px) {
	.yacht-details-section .yacht-tabs__nav {
		gap: 5.6px;
	}

	.yacht-details-section .yacht-tabs__tab {
		padding: 10.4px 5.6px;
		font-size: 11.2px;
	}

	.yacht-details-section .yacht-tabs__tab i,
	.yacht-details-section .yacht-tabs__tab svg {
		display: none;
	}

	.yacht-details-section .yacht-tabs__tile {
		padding: 20px;
	}
}

@media (max-width: 640px) {
	.yacht-details-section .yacht-tabs__nav {
		padding: 10px 8px 12px;
	}

	.yacht-details-section .yacht-tabs__panel {
		padding: 16px;
	}

	.yacht-details-section .yacht-tabs__list {
		column-count: 1;
	}
}


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

@media (prefers-reduced-motion: reduce) {
	.yacht-overnight-section .bm-overnight .bm-chip,
	.yacht-details-section .yacht-tabs__tab,
	.yacht-details-section .yacht-tabs__tab i,
	.yacht-details-section .yacht-tabs__tab svg,
	.yacht-details-section .yacht-tabs__tile,
	.yacht-details-section .yacht-tabs__tile::before,
	.yacht-details-section .yacht-tabs__tile-icon {
		transition: none;
	}

	.yacht-details-section .yacht-tabs__tile:hover,
	.yacht-details-section .yacht-tabs__tile:hover .yacht-tabs__tile-icon {
		transform: none;
	}
}

/* =========================================================
   YACHT PAGE – ONE ACCENT COLOUR

   The trip planner (Choose your trip) and the request form
   (Request your quote) take their accent colour from
   --bm-tp-primary, defined in the plugin's
   bm-trip-planner.css. Setting it to tertiary here changes
   all of them at once:

     - trip names on the cards        .bm-tp-card-title
     - prices on the cards            .bm-tp-card-price strong
     - badges on the cards            .bm-tp-badge
     - "Itinerary (PDF)" links        .bm-tp-pdf
     - "Day trips / Overnight"        .bm-tp-tab.is-active
     - area filter chips              .bm-tp-chip
     - "Your trip" summary title      .bm-tr-summary-title
     - form steps, labels and
       selected options               .bm-charter-form_wrapper

   --bm-tp-secondary is set to the new secondary colour
   (the plugin still falls back to the old #35b0ed).

   "body" makes these win over the plugin's stylesheet,
   which loads after this one.

   Not covered here:
     - "Request this trip" is an Impreza button
       (us-btn-style_1), set in Impreza's button styles.
========================================================= */

body .bm-tp,
body .bm-tr,
body .bm-charter-form_wrapper {
	--bm-tp-primary: var(--color-tertiary, #086788);
	--bm-tp-secondary: var(--color-secondary, #2cb8f6);
}


/* =========================================================
   INCLUSIVE TAB – "Included" / "Not included"
   No colour of its own in the plugin, so it picks up the
   theme's primary blue. Set to tertiary here.
========================================================= */

.yacht-details-section .yacht-tabs__card-title {
	color: var(--color-tertiary, #086788);
}

/* =========================================================
   REQUEST FORM – BUTTONS, CHOICES, TRIP TYPE ICONS
   (Gravity Forms)
   Next, Previous and Submit in the site's button colours:
     Next / Submit : tertiary, white text, topbar on hover
     Previous      : white, tertiary border and text
   Choice boxes (trip type, route, water toys, services):
     tertiary border on hover, focus ring only for keyboard.
   Trip type icons (am, pm, full, night): tertiary instead of
     the old #35b0ed.
   Scoped to the request form on the yacht page.
   Gravity Forms' theme framework styles .gform-theme-button
   itself, so the main button colours use !important to win.
========================================================= */


/* =========================================================
   BUTTONS
========================================================= */

.yacht-request-section .gform_wrapper .gform_page_footer,
.yacht-request-section .gform_wrapper .gform_footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.yacht-request-section .gform_wrapper .gform_next_button,
.yacht-request-section .gform_wrapper .gform_previous_button,
.yacht-request-section .gform_wrapper .gform_button {
	width: auto;
	min-height: 0;
	padding: 12px 24px;
	border-radius: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

/* Next and Submit: tertiary */
.yacht-request-section .gform_wrapper .gform_next_button,
.yacht-request-section .gform_wrapper .gform_button {
	background: var(--color-tertiary, #086788) !important;
	border: 1px solid var(--color-tertiary, #086788) !important;
	color: var(--color-white, #ffffff) !important;
}

.yacht-request-section .gform_wrapper .gform_next_button:hover,
.yacht-request-section .gform_wrapper .gform_button:hover {
	background: var(--color-topbar, #304e67) !important;
	border-color: var(--color-topbar, #304e67) !important;
	color: var(--color-white, #ffffff) !important;
	box-shadow: 0 2px 8px rgba(8, 103, 136, 0.22);
}

/* Previous: white with tertiary border and text */
.yacht-request-section .gform_wrapper .gform_previous_button {
	background: var(--color-white, #ffffff) !important;
	border: 1px solid var(--color-tertiary, #086788) !important;
	color: var(--color-tertiary, #086788) !important;
}

.yacht-request-section .gform_wrapper .gform_previous_button:hover {
	background: var(--color-light-blue, #f0f9ff) !important;
	border-color: var(--color-tertiary, #086788) !important;
	color: var(--color-topbar, #304e67) !important;
}

.yacht-request-section .gform_wrapper .gform_next_button:focus-visible,
.yacht-request-section .gform_wrapper .gform_previous_button:focus-visible,
.yacht-request-section .gform_wrapper .gform_button:focus-visible {
	outline: 2px solid var(--color-secondary, #2cb8f6);
	outline-offset: 2px;
}


/* =========================================================
   CHOICE BOXES – HOVER
   Trip type, route, water toys and services.
========================================================= */

.yacht-request-section .bm-charter-form_wrapper.gform_wrapper .gf-trip-type .gchoice:hover,
.yacht-request-section .bm-charter-form_wrapper.gform_wrapper .gf-route .gchoice:hover,
.yacht-request-section .bm-charter-form_wrapper.gform_wrapper .gf-water-toys .gchoice:hover,
.yacht-request-section .bm-charter-form_wrapper.gform_wrapper .gf-services .gchoice:hover {
	border-color: var(--color-tertiary, #086788);
}


/* =========================================================
   CHOICE BOXES – FOCUS RING
   The plugin shows an outer ring on every click
   (:focus-within). Hidden on click, kept for keyboard
   navigation (:focus-visible), where it is needed.
========================================================= */

.yacht-request-section .bm-charter-form_wrapper.gform_wrapper .gchoice:focus-within {
	outline: none;
}

.yacht-request-section .bm-charter-form_wrapper.gform_wrapper .gchoice:has(input:focus-visible) {
	outline: 2px solid var(--color-secondary, #2cb8f6);
	outline-offset: 2px;
}


/* =========================================================
   TRIP TYPE ICONS
   The colour is inside each SVG (stroke), so it is written
   as a hex value: %23086788 = #086788 (tertiary).
========================================================= */

/* Half day, morning: sunrise */
.yacht-request-section .bm-charter-form_wrapper.gform_wrapper .gf-trip-type input[value="am"] + label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23086788' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M17 18a5 5 0 0 0-10 0'/%3E%3Cpath d='M12 2v7M4.2 10.2l1.4 1.4M1 18h2M21 18h2M18.4 11.6l1.4-1.4M23 22H1M8 6l4-4 4 4'/%3E%3C/svg%3E");
}

/* Half day, afternoon: sunset */
.yacht-request-section .bm-charter-form_wrapper.gform_wrapper .gf-trip-type input[value="pm"] + label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23086788' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M17 18a5 5 0 0 0-10 0'/%3E%3Cpath d='M12 9V2M4.2 10.2l1.4 1.4M1 18h2M21 18h2M18.4 11.6l1.4-1.4M23 22H1M16 5l-4 4-4-4'/%3E%3C/svg%3E");
}

/* Full day: sun */
.yacht-request-section .bm-charter-form_wrapper.gform_wrapper .gf-trip-type input[value="full"] + label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23086788' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4'/%3E%3C/svg%3E");
}

/* Overnight: moon */
.yacht-request-section .bm-charter-form_wrapper.gform_wrapper .gf-trip-type input[value="night"] + label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23086788' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
}


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

@media (prefers-reduced-motion: reduce) {
	.yacht-request-section .gform_wrapper .gform_next_button,
	.yacht-request-section .gform_wrapper .gform_previous_button,
	.yacht-request-section .gform_wrapper .gform_button {
		transition: none;
	}
}

/* =========================================================
   INCLUDED / NOT INCLUDED CARDS – [bm_inclusive]
   Same cards as the Inclusive tab on the yacht pages; the
   base styles come from the plugin's yacht-tabs.css.
   Here only: lists in two columns (one on phones) and the
   card titles in tertiary, as on the yacht page.
========================================================= */

.bm-inclusive .yacht-tabs__card-title {
	color: var(--color-tertiary, #086788);
}

.bm-inclusive .yacht-tabs__list {
	column-count: 2;
	column-gap: 32px;
}

.bm-inclusive .yacht-tabs__list li {
	break-inside: avoid;
}

@media (max-width: 640px) {
	.bm-inclusive .yacht-tabs__list {
		column-count: 1;
	}
}

/* =========================================================
   AREA TILE – CLASSIC (Grid Layout 1141)
   Grid element Extra class : area-grid-classic
   Layout classes           : area-card__media (image)
                              area-card__title (title)

   Destination cards as on the current website's Day Charter
   page, in the style of the Yacht Card – Classic:
   white card, 24px corners, light border and shadow,
   landscape image, title in Playfair caps, centred.
========================================================= */

.area-grid-classic .w-grid-item-h {
	overflow: hidden;
	height: 100%;
	background: var(--color-white, #ffffff);
	border: 1px solid rgba(15, 45, 70, 0.08);
	border-radius: 24px;
	box-shadow: 0 6px 24px rgba(15, 45, 70, 0.08);
}

/* Image: landscape, zoom on hover */
.area-grid-classic .area-card__media,
.area-grid-classic .area-card__media a {
	display: block;
	overflow: hidden;
	margin: 0;
	border-radius: 0;
}

.area-grid-classic .area-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.3s ease;
}

.area-grid-classic .w-grid-item-h:hover .area-card__media img {
	transform: scale(1.05);
}

/* Title: centred, Playfair caps, tertiary */
.area-grid-classic .area-card__title {
	margin: 0;
	padding: 20px 20px 22px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(1.0625rem, 2vw, 1.375rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
}

.area-grid-classic .area-card__title a {
	color: var(--color-tertiary, #086788);
	text-decoration: none;
	transition: color 0.2s ease;
}

.no-touch .area-grid-classic .area-card__title a:hover {
	color: var(--color-secondary, #2cb8f6);
}

@media (prefers-reduced-motion: reduce) {
	.area-grid-classic .area-card__media img {
		transition: none;
	}

	.area-grid-classic .w-grid-item-h:hover .area-card__media img {
		transform: none;
	}
}

/* =========================================
   Contact page
   Intro (centred):  .bm-contact-intro
   Card:             .bm-contact-card (inner row)
     Form column:    .bm-contact-card__form
     Blue column:    .bm-contact-card__info  -> .bm-contact-panel
   Addresses:        .bm-contact-addresses   -> .bm-addresses / .bm-address
   Map:              .location-contact-us-section .bm-map
   ========================================= */

/* -----------------------------------------
   Centred intro (Talk to us / Where to find us)
   ----------------------------------------- */
.bm-contact-intro {
	max-width: 680px;
	margin: 0 auto 40px;
	text-align: center;
}

.bm-contact-intro p:last-child {
	margin-bottom: 0;
}

/* -----------------------------------------
   Card: form left, blue panel right
   ----------------------------------------- */
.l-section .bm-contact-card.g-cols {
	--columns-gap: 0px;
	margin-left: 0;
	margin-right: 0;
	background-color: #ffffff;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 24px;
	box-shadow: 0 20px 50px rgba(8, 103, 136, 0.12);
	overflow: hidden;
}

.l-section .bm-contact-card.g-cols > .wpb_column {
	margin: 0;
}

.l-section .bm-contact-card.g-cols > .wpb_column > .vc_column-inner {
	height: 100%;
	padding: 3rem;
}

/* Card headings (Send us a message / Contact information) */
.bm-contact-card__title,
.bm-contact-panel__title {
	font-size: clamp(1.75rem, 3.5vw, 2.25rem);
}

/* Form column */
.bm-contact-card__title {
	margin: 0 0 16px;
	color: var(--color-tertiary, #086788);
}

/* Blue column */
.l-section .bm-contact-card.g-cols > .bm-contact-card__info > .vc_column-inner {
	background-color: #5bc9f8;
	background-image: none;
	color: #ffffff;
}

/* -----------------------------------------
   Blue panel content
   ----------------------------------------- */
.bm-contact-panel__title {
	margin: 0 0 12px;
	color: #ffffff;
}

.bm-contact-panel__text {
	margin: 0 0 24px;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}

.bm-contact-panel__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bm-contact-panel__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	padding: 14px 16px;
	background-color: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 14px;
}

.bm-contact-panel__icon {
	display: flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

.bm-contact-panel__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-size: 14px;
	line-height: 1.5;
}

.bm-contact-panel__body strong {
	margin-bottom: 2px;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
}

.bm-contact-panel__body a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.no-touch .bm-contact-panel__body a:hover,
.bm-contact-panel__body a:focus-visible {
	color: #ffffff;
	text-decoration: underline;
}

/* -----------------------------------------
   Addresses (two cards)
   ----------------------------------------- */
.bm-addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin: 0 0 32px;
}

.bm-address {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
	background-color: #ffffff;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(8, 103, 136, 0.08);
}

.bm-address__icon {
	display: flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background-color: var(--color-light-blue, #f0f9ff);
	color: var(--color-tertiary, #086788);
}

.bm-address__title {
	margin: 0 0 6px;
	font-size: 20px;
	color: var(--color-tertiary, #086788);
}

.bm-address__body p {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-body-text, #4d5156);
}

.bm-address__link {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-tertiary, #086788);
}

.no-touch .bm-address__link:hover {
	color: var(--color-topbar, #304e67);
}

/* -----------------------------------------
   Map: page width, only the map
   (no extra height, frame or shadow)
   ----------------------------------------- */
.location-contact-us-section {
	--bm-map-height: 520px;
}

.location-contact-us-section .bm-map {
	aspect-ratio: auto !important;
	margin: 0;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 24px;
	box-shadow: none !important;
	overflow: hidden;
	line-height: 0;
}

.location-contact-us-section .bm-map iframe {
	display: block;
	width: 100% !important;
	margin: 0;
	border: 0;
}

/* -----------------------------------------
   Tablet and phones
   ----------------------------------------- */
@media (max-width: 1024px) {
	.location-contact-us-section {
		--bm-map-height: 440px;
	}

	.l-section .bm-contact-card.g-cols {
		flex-wrap: wrap;
	}

	.l-section .bm-contact-card.g-cols > .wpb_column {
		width: 100% !important;
	}

	.l-section .bm-contact-card.g-cols > .wpb_column > .vc_column-inner {
		padding: 32px;
	}
}

@media (max-width: 767px) {
	.bm-contact-intro {
		margin-bottom: 32px;
	}

	.l-section .bm-contact-card.g-cols {
		border-radius: 16px;
	}

	.l-section .bm-contact-card.g-cols > .wpb_column > .vc_column-inner {
		padding: 24px 20px;
	}

	.bm-addresses {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.bm-address {
		padding: 20px;
	}

	.location-contact-us-section .bm-map {
		border-radius: 16px;
	}

	.location-contact-us-section {
		--bm-map-height: 360px;
	}
}

/* =========================================
   Form: calendar icon inside the date field
   (Gravity Forms date picker)
   ========================================= */
.gform_wrapper .ginput_container_date {
	position: relative;
	display: block !important;
}

.gform_wrapper .ginput_container_date input.datepicker {
	width: 100% !important;
	padding-right: 44px !important;
}

.gform_wrapper .ginput_container_date .gform-datepicker-toggle {
	position: absolute !important;
	top: 50%;
	right: 12px;
	left: auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--color-tertiary, #086788);
	transform: translateY(-50%);
	cursor: pointer;
}

.gform_wrapper .ginput_container_date .gform-datepicker-toggle .gform-calendar-icon {
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 1;
	color: inherit;
}

.no-touch .gform_wrapper .ginput_container_date .gform-datepicker-toggle:hover {
	color: var(--color-topbar, #304e67);
}