/* ==========================================================================
   Coastal Marine — brand skin on the Motomarine framework.
   Colours and fonts come from Theme Settings (Archivo / Libre Franklin, navy, royal blue); this file adds what the
   settings don't cover: the yellow accent, slanted buttons, heavy headings, the header and the dark surfaces.
   Module styles live next to each module (modules/{slug}/style.css).
   ========================================================================== */

:root {
	--cm-navy: #0a1140;
	--cm-navy-2: #111c5e;
	--cm-navy-3: #070b2b;
	--cm-blue: #090cee;
	--cm-yellow: #ffd302;
	--cm-yellow-hover: #ffc72c;
	--cm-ice: #eef3fa;
	--cm-ice-2: #dde6f5;
	--cm-text: #5a6378;
	--cm-line: #c9d3e6;
	--cm-skew: -9deg;

	--secondary: var(--cm-navy);
	--secondary-hover: var(--cm-navy-2);
	--heading: var(--cm-navy);
	--light-bg: var(--cm-ice);
	--bg-light: #f4f7fc;
	--border: #dde6f5;
	--border-light: #eef3fa;
	--container-max: 1240px;
	--container-wide: 1240px;
}

/* --- Layout: the design's 1240px container with 32px gutters ---------------------------------------------- */
@media (min-width: 992px) {
	.cs-container,
	.cs-container--wide {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* --- Type --------------------------------------------------------------------------------------------------- */
h1, h2, h3, .h1, .h2, .h3 {
	font-weight: 900;
	letter-spacing: -0.02em;
}
h1, h2, .h1, .h2 {
	line-height: 1.02;
}
h3, .h3 {
	line-height: 1.12;
}
h4, h5, h6, .h4, .h5, .h6 {
	font-weight: 800;
	letter-spacing: -0.01em;
}
.cm-dark h1, .cm-dark h2, .cm-dark h3, .cm-dark h4 {
	color: #fff;
}

/* Small uppercase label above section headings. */
.head-label {
	font-family: var(--font-heading);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: var(--cm-navy);
}
.bg-dark .head-label,
.cm-dark .head-label {
	color: var(--cm-yellow);
}

/* Words wrapped in [brackets] in a module heading. */
.cm-hl {
	color: var(--cm-yellow);
}

/* --- Buttons: slanted. The skewed shape is a layer behind the label, so outlines keep a slanted border too --- */
.cs-btn {
	--cm-btn-bg: transparent;
	--cm-btn-bd: transparent;
	--cm-btn-fg: #fff;
	overflow: visible;
	isolation: isolate;
	height: 50px;
	min-width: 0;
	padding: 0 24px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--cm-btn-fg);
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}
.cs-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--cm-btn-bg);
	border: 2px solid var(--cm-btn-bd);
	transform: skewX(var(--cm-skew));
	transition: background-color .2s ease, border-color .2s ease;
}
.cs-btn:hover,
.cs-btn:focus {
	background: none;
	color: var(--cm-btn-fg);
}
.cs-btn:focus-visible {
	outline: 2px solid var(--cm-blue);
	outline-offset: 4px;
}
.cs-btn--sm {
	height: 42px;
	padding: 0 18px;
	font-size: 13.5px;
}

.cs-btn-primary { --cm-btn-bg: var(--cm-blue); --cm-btn-bd: var(--cm-blue); --cm-btn-fg: #fff; }
.cs-btn-primary:hover { --cm-btn-bg: #0609b8; --cm-btn-bd: #0609b8; --cm-btn-fg: #fff; }
.cs-btn-secondary { --cm-btn-bg: var(--cm-navy); --cm-btn-bd: var(--cm-navy); --cm-btn-fg: #fff; }
.cs-btn-secondary:hover { --cm-btn-bg: var(--cm-navy-2); --cm-btn-bd: var(--cm-navy-2); }
.cs-btn-white, .cs-btn-light { --cm-btn-bg: #fff; --cm-btn-bd: #fff; --cm-btn-fg: var(--cm-navy); }
.cs-btn-white:hover, .cs-btn-light:hover { --cm-btn-bg: var(--cm-ice); --cm-btn-bd: var(--cm-ice); --cm-btn-fg: var(--cm-navy); }
.cs-btn-outline-primary,
.cs-btn-outline-secondary,
.cs-btn-outline-light { --cm-btn-bd: var(--cm-navy); --cm-btn-fg: var(--cm-navy); }
.cs-btn-outline-primary:hover,
.cs-btn-outline-secondary:hover,
.cs-btn-outline-light:hover { --cm-btn-bg: var(--cm-navy); --cm-btn-bd: var(--cm-navy); --cm-btn-fg: #fff; }
.cs-btn-outline-white { --cm-btn-bd: rgba(238, 243, 250, .6); --cm-btn-fg: #fff; }
.cs-btn-outline-white:hover { --cm-btn-bg: #fff; --cm-btn-bd: #fff; --cm-btn-fg: var(--cm-navy); }

/* Yellow: the main call to action on photos and dark surfaces. */
.cm-btn-yellow,
.bg-dark .cs-btn-primary,
.cm-dark .cs-btn-primary,
.cs-hero .cs-btn-primary,
.cs-page-header .cs-btn-primary { --cm-btn-bg: var(--cm-yellow); --cm-btn-bd: var(--cm-yellow); --cm-btn-fg: var(--cm-navy); }
.cm-btn-yellow:hover,
.bg-dark .cs-btn-primary:hover,
.cm-dark .cs-btn-primary:hover,
.cs-hero .cs-btn-primary:hover,
.cs-page-header .cs-btn-primary:hover { --cm-btn-bg: var(--cm-yellow-hover); --cm-btn-bd: var(--cm-yellow-hover); --cm-btn-fg: var(--cm-navy); }
.bg-dark .cs-btn-outline-secondary,
.bg-dark .cs-btn-outline-light,
.cm-dark .cs-btn-outline-secondary,
.cm-dark .cs-btn-outline-light { --cm-btn-bd: rgba(238, 243, 250, .6); --cm-btn-fg: #fff; }

/* Icon-only buttons (arrows, menu, close) stay square. */
.cs-btn-icon::before {
	transform: none;
}

/* --- Header: navy bar, Archivo navigation, phone as "Sales and service / number" ---------------------------- */
.cs-header--dark {
	background: var(--cm-navy);
}
.cs-header .cs-header__inner {
	min-height: 78px;
}
.cs-header .cs-nav__link {
	font-family: var(--font-heading);
	font-size: 14.4px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
.cs-header--dark .cs-nav__link {
	color: var(--cm-ice);
}
.cs-header--dark .cs-nav__link:hover,
.cs-header--dark .cs-nav__item.current-menu-item > .cs-nav__link,
.cs-header--dark .cs-nav__item.current-menu-ancestor > .cs-nav__link {
	color: var(--cm-yellow);
}
@media (min-width: 1200px) {
	.cs-header__phone.cs-btn {
		--cm-btn-bg: transparent;
		--cm-btn-bd: transparent;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		gap: 2px;
		height: auto;
		padding: 0;
		font-size: 24px;
		font-weight: 700;
		line-height: 1.15;
		color: #fff;
	}
	.cs-header__phone.cs-btn::after {
		content: "Sales and service";
		order: -1;
		font-size: 11.5px;
		font-weight: 500;
		color: #a9b3c8;
	}
	.cs-header__phone.cs-btn:hover {
		--cm-btn-bg: transparent;
		--cm-btn-bd: transparent;
		color: var(--cm-yellow);
	}
	.cs-header__phone .bi {
		display: none;
	}
}

/* --- Surfaces ---------------------------------------------------------------------------------------------- */
.bg-dark {
	background-color: var(--cm-navy);
}

/* ==========================================================================
   Parent components in the Coastal look (homepage and inner pages)
   ========================================================================== */

/* --- Hero (overlay): left aligned, label pair, heavy heading, facts row, outlined name ----------------------- */
.cs-hero.cs-hero--modern {
	min-height: 702px;
	align-items: flex-end;
	overflow: hidden;
}
.cs-hero--modern .cs-hero__bg::after {
	background: linear-gradient(90deg, #00001b 8%, rgba(0, 0, 27, .8) 24%, rgba(0, 0, 27, .34) 55%, rgba(0, 0, 27, .08) 100%), linear-gradient(180deg, rgba(10, 17, 64, .5) 0%, rgba(10, 17, 64, 0) 28%, rgba(10, 17, 64, .58) 100%);
	opacity: 1;
}
.cs-hero--modern .cs-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 951px;
	padding: 64px 0 48px;
	text-align: left;
}
.cs-hero--modern .head-label {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 21px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--cm-yellow);
}
.cs-hero--modern .head-label::before {
	display: none;
}
.cm-label-rule {
	width: 46px;
	height: 1px;
	background: rgba(255, 255, 255, .6);
}
.cs-hero--modern .h1 {
	max-width: 622px;
	margin-bottom: 21px;
	font-size: clamp(36px, 3.6vw, 51.2px);
	line-height: .96;
	letter-spacing: -0.02em;
	text-transform: none;
	color: #fff;
}
.cs-hero--modern .lead {
	max-width: 623px;
	margin-bottom: 24px;
	font-size: 16.8px;
	line-height: 1.65;
	color: #fff;
}
.cs-hero--modern .cs-hero__actions {
	gap: 16px;
	margin-bottom: 44px;
}
.cs-hero--modern .cs-hero__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding-top: 18px;
	border-top: 1px solid var(--cm-ice);
}
.cs-hero--modern .cs-hero__list li {
	padding: 0 18px;
	font-size: 14.4px;
	line-height: 1.3;
	color: var(--cm-ice);
	border-left: 1px solid rgba(238, 243, 250, .32);
}
.cs-hero--modern .cs-hero__list li:first-child {
	padding-left: 0;
	border-left: 0;
}
.cs-hero--modern .cs-hero__list li .bi {
	display: none;
}
.cm-watermark__text {
	position: absolute;
	right: 1.5%;
	top: 46%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(60px, 5.8vw, 111px);
	font-weight: 800;
	line-height: .88;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .45);
	pointer-events: none;
}
.cm-watermark__text span:last-child {
	margin-left: 1.9em;
}
.cm-hero-home {
	padding-bottom: 155px;
}
@media (max-width: 991px) {
	.cm-watermark__text {
		display: none;
	}
	.cs-hero.cs-hero--modern {
		min-height: 0;
	}
}

/* --- Promotions (tiles) pulled up over the hero ------------------------------------------------------------ */
.cm-promos-overlap {
	position: relative;
	z-index: 3;
	margin-top: -155px;
	padding-top: 0;
}
.cs-promo-tiles--modern {
	--bs-gutter-x: 24px;
	--bs-gutter-y: 24px;
	align-items: stretch !important;
}
.cs-promo-tiles--modern .cs-promo-intro {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 260px;
	padding: 48px 32px;
	text-align: center;
	background: rgba(4, 15, 32, .78);
	border: 1px solid rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.cs-promo-tiles--modern .cs-promo-intro::before,
.cs-promo-tiles--modern .cs-promo-intro::after {
	display: none;
}
.cs-promo-tiles--modern .cs-promo-intro .h2 {
	margin: 0;
	font-size: 36px;
	font-style: italic;
	line-height: 1.05;
	text-transform: uppercase;
	color: #fff;
}
.cs-promo-tiles--modern .cs-promo-intro p {
	color: #c9d3e6;
}
.cs-promo-tiles--modern .cs-promo-tile {
	height: 260px;
	border-radius: 0;
}
.cs-promo-tiles--modern .cs-promo-tile::after {
	background: linear-gradient(180deg, rgba(4, 15, 32, .05) 0%, rgba(4, 15, 32, .55) 55%, rgba(4, 15, 32, .85) 100%);
}
.cs-promo-tiles--modern .cs-promo-tile__body {
	padding: 0 32px 28px;
}
.cs-promo-tiles--modern .cs-promo-tile .h4 {
	margin-bottom: 6px;
	font-size: 20px;
	font-weight: 900;
	font-style: italic;
	letter-spacing: -0.01em;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
	color: #fff;
}
.cs-promo-tiles--modern .cs-promo-tile p {
	margin-bottom: 14px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .85);
}
.cs-promo-tiles--modern .cs-promo-tile .cs-btn::before {
	border-radius: 4px;
	transform: none;
}
.cs-promo-tiles--modern .cs-promo-tile .cs-btn .bi {
	display: none;
}

/* --- Image + Text, Year overlay: outlined blue year over the photo, open stats row ------------------------- */
.cs-yearblock--modern .cs-yearblock__year {
	top: -46px;
	left: auto;
	right: -24px;
	bottom: auto;
	z-index: 2;
	font-size: clamp(70px, 6.4vw, 110px);
	font-style: italic;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.02em;
	color: transparent;
	-webkit-text-stroke: 2px var(--cm-blue);
	writing-mode: horizontal-tb;
	transform: none;
}
.cs-yearblock--modern .cs-yearblock__media img {
	border-radius: 0;
	box-shadow: none;
}
.cs-yearblock--modern .h2 {
	font-size: clamp(30px, 2.8vw, 40px);
	line-height: 1.04;
}
.cs-yearblock__stats.cs-stat-band {
	gap: 0;
	margin-top: 40px;
	padding-top: 0;
	border-top: 1px solid var(--cm-ice-2);
}
.cs-yearblock__stats .cs-stat {
	padding: 24px 24px 18px;
	background: none;
	border: 0;
	border-left: 1px solid var(--cm-ice-2);
	border-radius: 0;
	box-shadow: none;
}
.cs-yearblock__stats .cs-stat:first-child {
	padding-left: 0;
	border-left: 0;
}
.cs-yearblock__stats .cs-stat::before {
	display: none;
}
.cs-yearblock__stats .cs-stat__num {
	font-size: 46px;
	font-weight: 900;
	font-style: italic;
	line-height: 1.1;
	color: var(--cm-blue);
}
.cs-yearblock__stats .cs-stat__num .suffix {
	color: var(--cm-blue);
}
.cs-yearblock__stats .cs-stat__label {
	font-size: 14.4px;
	line-height: 1.55;
	color: #3e4760;
}

/* --- Boat tiles: card buttons are small square labels (yellow + outline), the light section a soft gradient -- */
.cs-section.bg-lighter:has(.cs-boat-tile) {
	background: linear-gradient(180deg, #eef4f9 0%, #f9fbfd 100%); /* Design: #eef4f9 fading to 30% by the bottom, so never pure white. */
}
.cs-boat-tile__actions .cs-btn {
	height: 36px;
	padding: 0 12px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cs-boat-tile__actions .cs-btn::before {
	transform: none;
	border-width: 1px;
}
.cs-boat-tile__actions .cs-btn-primary { --cm-btn-bg: var(--cm-yellow); --cm-btn-bd: var(--cm-yellow); --cm-btn-fg: var(--cm-navy); }
.cs-boat-tile__actions .cs-btn-primary:hover { --cm-btn-bg: var(--cm-yellow-hover); --cm-btn-bd: var(--cm-yellow-hover); --cm-btn-fg: var(--cm-navy); }
.cs-boat-tile .cs-boat-tile__title {
	font-weight: 800;
	letter-spacing: -0.01em;
}
.cs-boat-tile .cs-boat-tile__now {
	font-weight: 900;
	color: var(--cm-blue);
}
.cs-boat-tile .cs-badge-featured {
	background: var(--cm-blue);
}

/* --- Cards (overlay) as "Shop boats by type": left heading, tall photos, yellow square arrow ------------------ */
.cm-types .cs-sechead {
	text-align: left;
	margin-left: 0;
}
.cm-types .cs-cards--modern {
	--bs-gutter-x: 10px;
	--bs-gutter-y: 10px;
}
.cm-types .cs-card--overlay {
	aspect-ratio: 217 / 310;
	border-radius: 0;
}
.cm-types .cs-card--overlay::after {
	background: linear-gradient(180deg, rgba(10, 17, 64, 0) 45%, rgba(10, 17, 64, .9) 100%);
}
.cm-types .cs-card__overlay {
	align-items: flex-end;
	padding: 0 16px 22px;
}
.cm-types .cs-card__overlay .h5 {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
}
.cm-types .cs-card__overlay-arrow {
	width: 26px;
	height: 26px;
	color: var(--cm-navy);
	background: var(--cm-yellow);
	border: 0;
	border-radius: 0;
}

/* --- Image + Text on navy as "Service bays": contour pattern, chips instead of a checklist --------------------- */
.cm-service-band.bg-dark {
	background: var(--cm-navy-3) url("../images/service-topo.webp") left 11px / 681px auto no-repeat;
}
.cm-service-band .h2 {
	font-size: clamp(30px, 2.6vw, 37px);
	line-height: 1.02;
}
.cm-service-band .cs-imgtext__media img {
	border-radius: 0;
	box-shadow: none;
}
.cm-chips .cs-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0 28px;
}
.cm-chips .cs-list li {
	padding: 6px 9px;
	font-size: 12px;
	line-height: 1.2;
	color: var(--cm-ice);
	border: 1px solid rgba(238, 243, 250, .45);
}
.cm-chips .cs-list li::before,
.cm-chips .cs-list li::after,
.cm-chips .cs-list li .bi {
	display: none;
}

/* --- Process (stepper) as the repower steps: six in a row on a line, slanted number boxes, last one yellow ------ */
.cm-repower-steps .cs-sechead {
	max-width: 620px;
	margin-left: 0;
	text-align: left;
}
.cm-repower-steps .cs-stepper {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0 28px;
	counter-reset: none;
}
.cm-repower-steps .cs-stepper__item {
	position: relative;
	padding: 0;
	text-align: left;
}
.cm-repower-steps .cs-stepper__item::before,
.cm-repower-steps .cs-stepper__item::after {
	display: none;
}
.cm-repower-steps .cs-stepper__item:not(:last-child) .cs-stepper__num::after {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(100% + 2px);
	width: calc((100vw - 64px) / 6);
	max-width: 160px;
	height: 2px;
	background: linear-gradient(90deg, var(--cm-blue), #3d63ff);
	transform: skewX(9deg);
}
.cm-repower-steps .cs-stepper__item:nth-last-child(2) .cs-stepper__num::after {
	background: linear-gradient(90deg, var(--cm-blue), rgba(9, 12, 238, .1));
}
.cm-repower-steps .cs-stepper__num {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 36px;
	margin: 0 0 22px;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 800;
	color: var(--cm-blue);
	background: #fff;
	border: 2px solid var(--cm-blue);
	border-radius: 0;
	box-shadow: none;
	transform: skewX(var(--cm-skew));
}
.cm-repower-steps .cs-stepper__item:last-child .cs-stepper__num {
	color: var(--cm-navy);
	background: var(--cm-yellow);
	border-color: var(--cm-yellow);
}
.cm-repower-steps .cs-stepper__card {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	text-align: left;
}
.cm-repower-steps .cs-stepper__card .h3 {
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0;
}
.cm-repower-steps .cs-stepper__card p {
	font-size: 13px;
	line-height: 1.6;
	color: #7a8797;
}
@media (max-width: 991px) {
	.cm-repower-steps .cs-stepper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 24px;
	}
	.cm-repower-steps .cs-stepper__num::after {
		display: none;
	}
}

/* --- Testimonials (masonry, dark) as the review mosaic: left heading, button top right, large blue first review -- */
.cm-reviews.bg-dark {
	background: var(--cm-navy);
}
.cm-reviews .cs-container {
	position: relative;
}
.cm-reviews .cs-sechead {
	margin-left: 0;
	padding-right: 200px;
	text-align: left;
}
.cm-reviews .cs-btn-row {
	position: absolute;
	top: 0;
	right: 32px;
	margin: 0;
}
.cm-reviews .cs-testi-masonry {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 16px;
	columns: auto;
}
.cm-reviews .cs-testi {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 28px;
	background: var(--cm-navy-2);
	border: 0;
	border-radius: 0;
	break-inside: auto;
}
.cm-reviews .cs-testi:first-child {
	grid-row: span 2;
	padding: 36px 30px 34px;
	background: var(--cm-blue);
}
.cm-reviews .cs-testi:nth-child(4) {
	grid-column: 2 / span 2;
}
.cm-reviews .cs-testi:first-child .cs-testi__quote {
	font-family: var(--font-heading);
	font-size: 21px;
	font-weight: 800;
	font-style: italic;
	line-height: 1.35;
	color: #fff;
}
.cm-reviews .cs-testi__quote {
	margin-bottom: 24px;
	font-size: 14.4px;
	line-height: 1.6;
	color: var(--cm-ice);
}
.cm-reviews .cs-testi__stars {
	order: 3;
	margin: -22px 0 0 auto;
	font-size: 12px;
	letter-spacing: 3px;
	color: var(--cm-yellow);
}
.cm-reviews .cs-testi__author {
	order: 2;
	margin-top: auto;
	padding-top: 0;
	border-top: 0;
}
.cm-reviews .cs-testi__author strong {
	font-size: 13px;
	color: #fff;
}
.cm-reviews .cs-testi__author span {
	font-size: 12px;
	color: #b5fefd;
}
.cm-reviews .cs-testi__google,
.cm-reviews .cs-testi::before {
	display: none;
}
@media (max-width: 991px) {
	.cm-reviews .cs-testi-masonry {
		grid-template-columns: 1fr;
	}
	.cm-reviews .cs-testi:first-child,
	.cm-reviews .cs-testi:nth-child(4) {
		grid-row: auto;
		grid-column: auto;
	}
	.cm-reviews .cs-sechead {
		padding-right: 0;
	}
	.cm-reviews .cs-btn-row {
		position: static;
		margin-top: 24px;
	}
}

/* --- Contact (copy with map) as the location card -------------------------------------------------------------- */
.cm-location .cs-findus--modern {
	margin: 0;
	background: linear-gradient(35deg, var(--cm-ice-2) 0%, #fff 45%);
	border: 1px solid #e3e8f1;
}
.cm-location .cs-findus--modern > [class*="col-"] {
	padding: 0;
}
.cm-location .cs-findus--modern > [class*="col-"]:first-child {
	padding: 44px 32px 32px;
}
.cm-location .h2 {
	font-size: clamp(26px, 2.2vw, 32px);
	line-height: 1.08;
}
.cm-location .cs-contact-list {
	margin: 18px 0 28px;
	border: 0;
	background: none;
	box-shadow: none;
}
.cm-location .cs-contact-list li {
	padding: 12px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid #e3e8f1;
}
.cm-location .cs-contact-list .bi {
	display: none;
}
.cm-location .cs-contact-list strong {
	color: var(--cm-blue);
}
.cm-location .cs-map {
	height: 100%;
	min-height: 400px;
	border-radius: 0;
	clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}

/* --- CTA (image band) as "Come walk the lot": tall, left aligned, navy fade ------------------------------------ */
.cm-photo-cta.cs-cta-image {
	display: flex;
	align-items: center;
	min-height: 0;
}
.cm-photo-cta.cs-cta-image::after {
	background: linear-gradient(90deg, rgba(10, 17, 64, .9) 0%, rgba(10, 17, 64, .6) 45%, rgba(10, 17, 64, .15) 100%);
}
.cm-photo-cta .cs-cta--center {
	max-width: 640px;
	margin: 0;
	text-align: left;
}
.cm-photo-cta .h2 {
	font-size: clamp(38px, 4vw, 64px);
	line-height: 1;
	color: #fff;
}
.cm-photo-cta p {
	font-size: 16.8px;
	color: #fff;
}
.cm-photo-cta .cs-btn-row--center {
	justify-content: flex-start;
}
.cm-photo-cta .cs-btn-primary { --cm-btn-bg: var(--cm-yellow); --cm-btn-bd: var(--cm-yellow); --cm-btn-fg: var(--cm-navy); }
.cm-photo-cta .cs-btn-primary:hover { --cm-btn-bg: var(--cm-yellow-hover); --cm-btn-bd: var(--cm-yellow-hover); --cm-btn-fg: var(--cm-navy); }

/* --- Footer: navy, white column titles ------------------------------------------------------------------------- */
.cs-footer--modern {
	background: linear-gradient(180deg, var(--cm-navy) 0%, var(--cm-navy-3) 100%);
}
.cs-footer--modern .cs-footer__title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}
.cs-footer--modern .cs-footer__title::after {
	display: none;
}

/* --- Fixes after the first homepage pass ------------------------------------------------------------------- */
.cm-types .cs-sechead.cs-sechead--center,
.cm-reviews .cs-sechead.cs-sechead--center,
.cm-repower-steps .cs-sechead.cs-sechead--center {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	text-align: left;
}
.cm-repower-steps .cs-sechead .h2 {
	max-width: 620px;
}
.cs-yearblock__stats.cs-stat-band {
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	box-shadow: none;
	background: none;
}
.cm-chips .cs-imgtext__body .cs-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.cm-chips .cs-imgtext__body .cs-list li {
	width: auto;
	margin: 0;
	border-top: 1px solid rgba(238, 243, 250, .45);
}
.cm-location .cs-findus--modern {
	--bs-gutter-x: 0;
	--bs-gutter-y: 0;
	align-items: stretch !important;
}
.cm-location .cs-map iframe {
	width: 100%;
	height: 100%;
	min-height: 400px;
	border: 0;
}
.cm-photo-cta .cs-cta p {
	max-width: 560px;
	margin-left: 0;
}
.cs-footer--modern .cs-footer__hours strong,
.cs-footer--modern .cs-hours__time {
	color: #fff;
}

/* ===========================================================================================================
   Inner pages
   =========================================================================================================== */

/* Italic headings where the design sets them in Archivo Black Italic. */
.cm-italic .h2,
.cm-italic h2 {
	font-style: italic;
}

/* Sections on the light grey without a Background option of their own. */
.cs-section.cm-gray {
	background: var(--bg-light);
}

/* Page header: the design's centred title and text over the navy-tinted photo. */
.cs-banner--modern.cs-banner--center .h1 {
	font-size: 48px;
	font-weight: 900;
	line-height: .96;
	letter-spacing: -0.02em;
}
.cs-banner--modern.cs-banner--center p {
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.65;
}

/* Image + Text, year: a second photo over the corner of the first. */
.cm-about-year .cs-yearblock__media {
	position: relative;
}
.cm-about-year .cs-yearblock__media .cm-year-inset {
	position: absolute;
	right: -40px;
	bottom: -40px;
	z-index: 3;
	width: 46%;
	aspect-ratio: 299 / 240;
	object-fit: cover;
	border: 8px solid #fff;
	box-shadow: 0 18px 40px rgba(10, 17, 64, .18);
}
@media (max-width: 767px) {
	.cm-about-year .cs-yearblock__media .cm-year-inset {
		right: -8px;
		bottom: -24px;
		border-width: 5px;
	}
}

/* Cards: four across, italic titles, square buttons. */
@media (min-width: 992px) {
	.cm-door-cards .cs-cards--modern > [class*="col-"] {
		flex: 0 0 25%;
		max-width: 25%;
	}
	.cm-door-cards.cm-two .cs-cards--modern {
		justify-content: center;
	}
	.cm-door-cards.cm-two .cs-cards--modern > [class*="col-"] {
		flex: 0 0 33.333%;
		max-width: 33.333%;
	}
}
.cm-door-cards .cs-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px 16px 0;
	border: 1px solid var(--cm-ice-2);
	border-radius: 0;
	box-shadow: none;
}
.cm-door-cards .cs-card__media {
	aspect-ratio: 242 / 200;
	overflow: hidden;
	border-radius: 0;
}
.cm-door-cards .cs-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cm-door-cards .cs-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 22px 0 16px;
}
.cm-door-cards .cs-card__body .h4 {
	font-size: 21px;
	font-style: italic;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.cm-door-cards .cs-card__body p {
	font-size: 14px;
	line-height: 1.75;
	color: #3e4760;
	margin-bottom: 0;
}
.cm-door-cards .cs-card__actions {
	margin-top: auto;
	padding-top: 16px;
}
.cm-door-cards .cs-btn .bi,
.cm-why .cs-btn .bi {
	display: none;
}

/* Process: the note and button under the steps. */
.cm-after {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin-top: 40px;
	text-align: center;
}
.cm-after__note {
	margin: 0;
	font-size: 16px;
	color: var(--cm-navy);
}


/* "Why … choose Coastal Marine" cards: titles as written, not capitalised. */
.cm-why .h3,
.cm-why .h4,
.cm-why h3 {
	text-transform: none;
}

/* Trade-in: the comparison table. */
.cm-trade-table .cs-table th {
	background: var(--cm-navy);
	color: #fff;
}

/* --- Footer: logo column with address and phone, three link columns, hours, over the water photo ------------ */
.cm-footer__grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr 1fr 1fr 1.15fr;
	gap: 40px;
	padding: 72px 0 56px;
}
.cm-footer__grid--no-hours {
	grid-template-columns: 1.35fr 1fr 1fr 1fr;
}
.cm-footer .cs-footer__about .custom-logo-link img,
.cm-footer .cs-footer__about img {
	max-height: 54px;
	width: auto;
}
.cm-footer__address {
	margin: 18px 0 16px;
	font-size: 14.4px;
	line-height: 1.65;
	color: #a9b3c8;
}
.cm-footer__phone {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 14.4px;
	color: #a9b3c8;
	text-decoration: none;
}
.cm-footer__phone:hover {
	color: #fff;
}
.cm-footer__phone-icon {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 211, 2, .14);
	color: var(--cm-yellow);
	font-size: 13px;
}
.cm-footer .cs-footer__links a {
	font-size: 14.4px;
	color: #a9b3c8;
}
.cm-footer .cs-footer__links a:hover {
	color: #fff;
}
.cm-footer .cm-footer__hours li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	border: 0;
	font-size: 14.4px;
}
.cm-footer .cm-footer__hours .day {
	color: #a9b3c8;
}
.cm-footer .cm-footer__hours .time {
	font-weight: 600;
	color: #fff;
}
.cm-footer .cm-footer__hours .time.closed {
	color: #fff;
}
.cm-footer .cs-footer__bottom {
	border-top: 1px solid rgba(169, 179, 200, .18);
	font-size: 12.8px;
	color: #a9b3c8;
}
.cm-footer.cs-footer--bg .cs-footer__bg::after {
	background: linear-gradient(180deg, rgba(10, 17, 64, .78) 0%, rgba(7, 11, 43, .94) 100%);
}
@media (max-width: 991px) {
	.cm-footer__grid,
	.cm-footer__grid--no-hours {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		padding: 56px 0 40px;
	}
	.cm-footer__grid > :first-child {
		grid-column: 1 / -1;
	}
}
@media (max-width: 575px) {
	.cm-footer__grid,
	.cm-footer__grid--no-hours {
		grid-template-columns: 1fr;
	}
}

/* ===========================================================================================================
   Homepage review fixes
   =========================================================================================================== */

/* Header: solid navy (the parent's dark header is a translucent slate). */
.cs-header.cs-header--modern.cs-header--dark,
.cs-header.cs-header--modern.cs-header--dark.is-scrolled {
	background: var(--cm-navy);
	backdrop-filter: none;
}

/* Hero: the design's own gradient only (no second parent overlay), content 64px under the header. */
.cs-hero.cs-hero--modern::after {
	background: linear-gradient(90deg, #00001b 8%, rgba(0, 0, 27, .8) 30%, rgba(0, 0, 27, .34) 58%, rgba(0, 0, 27, .08) 100%), linear-gradient(180deg, rgba(10, 17, 64, .5) 0%, rgba(10, 17, 64, 0) 28%, rgba(10, 17, 64, .58) 100%);
	opacity: 1;
}
.cs-hero.cs-hero--modern {
	min-height: 702px;
	padding-top: 0;
	align-items: flex-start;
}
.cs-hero--modern .cs-hero__inner {
	padding: 74px 0 48px;
}
.cs-hero--modern .cs-hero__actions {
	margin-bottom: 44px;
}
.cs-hero--modern .cs-hero__list {
	padding-top: 0;
	border-top: 0;
}
.cm-watermark__text {
	top: 360px;
	right: auto;
	left: calc(50% + 243px);
}
@media (max-width: 991px) {
	.cs-hero.cs-hero--modern {
		min-height: 0;
	}
	.cs-hero--modern .cs-hero__inner {
		padding: 48px 0 40px;
	}
}

/* Service band: the credentials as inline chips with a thin cyan border, two to a row like the design. */
.cs-section.cm-chips .cs-imgtext__body ul.cs-list {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 8px 7px;
	max-width: 400px;
	margin: 22px 0 32px;
	padding: 0;
}
.cs-section.cm-chips .cs-imgtext__body ul.cs-list > li {
	flex: 0 0 auto;
	width: max-content !important;
	max-width: 100%;
	margin: 0;
	padding: 7px 11px;
	font-size: 13.1px;
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
	background: none;
	border: 1px solid #b5fefd;
	border-radius: 0;
	transform: none;
}

/* Image + Text, year (homepage and About): photo at the design's proportions, small photo over its corner. */
.cm-about-year .cs-yearblock__media > img:not(.cm-year-inset) {
	width: 78%;
	aspect-ratio: 441 / 370;
	height: auto;
	object-fit: cover;
}
.cm-about-year .cs-yearblock__media .cm-year-inset {
	right: 0;
	bottom: -44px;
	width: 46%;
	aspect-ratio: 260 / 220;
}
.cm-about-year .cs-yearblock__year {
	right: 0;
}

/* Repower steps: titles and copy under each number with room between the steps and the motors below. */

.cm-repower-steps .cs-sechead {
	margin-bottom: 48px;
}
.cm-repower-steps .cs-stepper {
	gap: 0 32px;
}
.cm-repower-steps .cs-stepper__card p {
	margin: 0;
}

/* Maps (OpenStreetMap). */
.cm-location .cs-map iframe,
.cs-map iframe {
	filter: saturate(.85);
}
.cs-section.cm-repower-steps .cs-sechead,
.cs-section.cm-repower-steps .cs-sechead.cs-sechead--center {
	max-width: 620px;
	margin: 0 0 48px;
	text-align: left;
}
.cs-section.cm-repower-steps .cs-sechead .h2 {
	margin-left: 0;
}
.entry-content > .cm-repower-steps + .cs-section {
	padding-top: 72px !important;
}
.cm-repower-steps .cs-stepper__card p {
	color: #5a6378;
}
.cm-repower-steps .cs-stepper::before {
	display: none;
}
.cm-repower-steps .cs-stepper__item {
	align-items: flex-start;
}

.cm-text-buttons {
	margin-top: 24px;
	gap: 12px;
}
.cs-banner--modern.cs-banner--center .h1 {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

/* Grey sections from the cm-gray class: keep the full top padding where the background changes (the parent only
   knows its own bg-lighter class when it closes the gap between sections). */
.cs-section + .cs-section.cm-gray,
.cs-section.cm-gray + .cs-section:not(.cm-gray):not(.bg-lighter):not(.cs-cta-image) {
	padding-top: var(--section-y) !important;
}

/* Team: four to a row with the last row centred, roles in yellow capitals over the photo fade. */
.cm-team .cs-team--modern {
	justify-content: center;
}
.cm-team .cs-team__role {
	display: block;
	margin-top: 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--cm-yellow);
}
.cm-team--gray {
	background: var(--bg-light);
}

/* Trade-in comparison: centred heading, full-width table. */
.cm-trade-table .cs-text--legal {
	max-width: 900px;
	margin: 0 auto;
}
.cm-trade-table .cs-text--legal h2 {
	margin-bottom: 28px;
	font-size: clamp(30px, 2.8vw, 43px);
	font-weight: 900;
	text-align: center;
}
.cm-trade-table .cs-table td:first-child {
	font-weight: 700;
	color: var(--cm-navy);
}
.cm-trade-table .cs-text--legal p {
	text-align: center;
}

/* --- Mobile pass ------------------------------------------------------------------------------------------- */
.cm-local-waters {
	overflow: hidden;
}
@media (max-width: 767px) {
	.cs-hero--modern .head-label {
		flex-wrap: wrap;
		gap: 10px;
		font-size: 11px;
	}
	.cm-label-rule {
		width: 24px;
	}
	.cs-hero--modern .cs-hero__list {
		flex-direction: column;
		gap: 6px;
	}
	.cs-hero--modern .cs-hero__list li {
		padding: 0;
		border-left: 0;
	}
	.cs-hero--modern .cs-hero__actions .cs-btn {
		width: 100%;
	}
	.cm-hero-home {
		padding-bottom: 120px;
	}
	.cm-promos-overlap {
		margin-top: -120px;
	}
	.cm-footer__grid > :first-child {
		text-align: left;
	}
}

/* Boats mega menu: no rule above the columns when the logo row is off; readable promo label. */
.cs-mega-brandmain .cs-mega-cols {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.cs-mega-promo__eyebrow {
	color: var(--cm-yellow);
}

/* Promotions, Tiles: the intro tile's photo, faint under the heading as in the design. */
.cs-promo-tiles--modern .cs-promo-intro.cm-has-photo {
	position: relative;
	overflow: hidden;
}
.cm-promo-intro__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .25;
	pointer-events: none;
}
.cm-has-photo > :not(.cm-promo-intro__bg) {
	position: relative;
	z-index: 1;
}
.cs-promo-tiles--modern .cs-promo-tile img {
	object-position: center;
}

/* Promotions over the hero: a wider row, 1300px of tiles (plus the container's side padding). */
.cm-promos-overlap > .cs-container {
	max-width: calc(1300px + 40px);
}
.cs-promo-tiles--modern .cs-promo-intro.cm-has-photo img.cm-promo-intro__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
	opacity: .25;
	border-radius: 0;
}

/* --- Image + Text, year: the design's photo layout (Figma 565 x 370 group) and open stats row ---------------- */
.cs-section.cm-about-year .cs-yearblock__media {
	position: relative;
	width: 100%;
	max-width: 565px;
	margin: 0;
	padding: 0;
	padding-bottom: calc(100% * 39 / 565);
}
.cs-section.cm-about-year .cs-yearblock__media > img:not(.cm-year-inset) {
	display: block;
	width: 78.05%;
	margin: 0;
	aspect-ratio: 441 / 370;
	object-fit: cover;
}
.cs-section.cm-about-year .cs-yearblock__media .cm-year-inset {
	top: 51%;
	right: auto;
	bottom: auto;
	left: 54.9%;
	width: 46%;
	aspect-ratio: 260 / 220;
	border: 10px solid #fff;
	box-shadow: 0 6px 16px rgba(10, 17, 64, .08);
}
.cs-section.cm-about-year .cs-yearblock__year {
	top: -31px;
	right: auto;
	left: 37.3%;
	font-size: clamp(64px, 6.6vw, 118px);
	line-height: .8;
}
.cs-section.cm-about-year .cs-yearblock__stats.cs-stat-band {
	margin-top: 40px;
	border-top: 1px solid var(--cm-ice-2);
	border-bottom: 0;
}
.cs-section.cm-about-year .cs-yearblock__stats.cs-stat-band .cs-stat {
	padding: 30px 24px 26px;
	background: none;
	border: 0;
	border-left: 1px solid var(--cm-ice-2);
	box-shadow: none;
}
.cs-section.cm-about-year .cs-yearblock__stats.cs-stat-band .cs-stat:first-child {
	padding-left: 0;
	border-left: 0;
}
/* Homepage version: outline button, no arrow (the About page keeps the blue one). */
.cm-year-outline .cs-yearblock__body .cs-btn-primary {
	--cm-btn-bg: transparent;
	--cm-btn-bd: var(--cm-navy);
	--cm-btn-fg: var(--cm-navy);
}
.cm-year-outline .cs-yearblock__body .cs-btn-primary:hover {
	--cm-btn-bg: var(--cm-navy);
	--cm-btn-fg: #fff;
}
.cm-year-outline .cs-yearblock__body .cs-btn .bi {
	display: none;
}
@media (max-width: 991px) {
	.cs-section.cm-about-year .cs-yearblock__media {
		margin-bottom: 40px;
	}
	.cs-section.cm-about-year .cs-yearblock__stats.cs-stat-band .cs-stat:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
}

/* Buttons: text only, no trailing arrow (icon-only buttons keep theirs). */
.cs-btn:not(.cs-btn-icon) > .bi-arrow-right,
.cs-btn:not(.cs-btn-icon) > .bi-arrow-up-right,
.cs-btn:not(.cs-btn-icon) > .bi-chevron-right {
	display: none;
}

.cs-boat-tile--compact .cs-boat-tile__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: calc(2 * 1.25em);
	line-height: 1.25;
}

/* --- "Shop boats by type" carousel (Cards, overlay + cm-carousel) ------------------------------------------- */
.cm-carousel__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}
.cm-carousel__head .cs-sechead,
.cm-carousel__head .cs-sechead.cs-sechead--center {
	max-width: none;
	margin: 0;
	text-align: left;
}
.cm-carousel__head .cs-sechead .h2 {
	margin: 0;
	max-width: none;
}
.cm-carousel__nav {
	display: flex;
	flex: 0 0 auto;
	gap: 10px;
}
.cm-carousel__btn {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 15px;
	color: var(--cm-navy);
	background: #fff;
	border: 1px solid #c9d3e6;
	border-radius: 0;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
.cm-carousel__btn:hover:not(:disabled) {
	color: #fff;
	background: var(--cm-navy);
	border-color: var(--cm-navy);
}
.cm-carousel__btn:disabled {
	opacity: .4;
	cursor: default;
}
.cm-carousel__wrap .cs-carousel__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.cm-carousel__wrap .cs-carousel__track::-webkit-scrollbar {
	display: none;
}
.cm-carousel__wrap .cs-carousel__item {
	flex: 0 0 calc((100% - 36px) / 4);
	max-width: none;
	padding: 0;
	scroll-snap-align: start;
}
@media (max-width: 991px) {
	.cm-carousel__wrap .cs-carousel__item {
		flex-basis: calc((100% - 12px) / 2);
	}
}
@media (max-width: 575px) {
	.cm-carousel__wrap .cs-carousel__item {
		flex-basis: 78%;
	}
	.cm-carousel__head {
		align-items: center;
	}
}

/* The cards: photo with a navy fade at the bottom, title in capitals, brands under it, skewed yellow arrow. */
.cm-types .cs-card--overlay {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 241 / 345;
	border-radius: 0;
}
.cm-types .cs-card--overlay > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.cm-types .cs-card--overlay:hover > img {
	transform: scale(1.04);
}
.cm-types .cs-card--overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 17, 64, 0) 48%, rgba(10, 17, 64, .55) 72%, rgba(10, 17, 64, .95) 100%);
}
.cm-types .cs-card__overlay {
	position: absolute;
	inset: auto 0 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding: 0 18px 22px;
	background: none;
}
.cm-card-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.cm-types .cs-card__overlay .h5 {
	margin: 0;
	font-size: 15.5px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #fff;
}
.cm-card-sub {
	font-size: 12.5px;
	line-height: 1.3;
	color: #c9d3e6;
}
.cm-types .cs-card__overlay-arrow {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 34px;
	height: 32px;
	font-size: 15px;
	color: var(--cm-navy);
	background: var(--cm-yellow);
	border: 0;
	border-radius: 0;
	transform: skewX(var(--cm-skew));
}
.cm-types .cs-card__overlay-arrow .bi {
	display: inline-block !important;
	transform: skewX(9deg);
}
.cm-types .cs-card--overlay:hover .cs-card__overlay-arrow,
.cm-types .cs-card--overlay:focus-visible .cs-card__overlay-arrow {
	color: #fff;
}
.cm-types .cs-card--overlay:hover .cs-card__overlay-arrow .bi,
.cm-types .cs-card--overlay:focus-visible .cs-card__overlay-arrow .bi {
	color: #fff;
}

/* Repower steps: title straight above its text. */
.cm-repower-steps .cs-stepper__card .h3 {
	min-height: 0;
	margin-bottom: 6px;
}
/* Repower steps to motor cards: one tighter gap. */
.entry-content > .cs-section.cm-repower-steps {
	padding-bottom: 0;
}
.entry-content > .cm-repower-steps + .cs-section {
	padding-top: 40px !important;
}

/* Reviews: heading flush with the left edge of the review grid. */
.cm-reviews .cs-sechead .h2,
.cm-reviews .cs-sechead h2 {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* --- "Come walk the lot" band, from the design: 120px padding at 1920 (no fixed height), navy fade over the photo -------------------------------------------------------------------------- */
.cm-photo-cta .cs-cta-image__bg {
	object-fit: cover;
	object-position: center 62%;
}
.cm-photo-cta.cs-cta-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 1;
	background:
		linear-gradient(90deg, rgba(10, 17, 64, .94) 0%, rgba(10, 17, 64, .82) 38%, rgba(10, 17, 64, .30) 72%, rgba(10, 17, 64, .15) 100%),
		linear-gradient(180deg, rgba(10, 17, 64, .20) 0%, rgba(10, 17, 64, 0) 40%, rgba(10, 17, 64, .35) 100%);
}
.cm-photo-cta .cs-container {
	position: relative;
	z-index: 2;
}
.cm-photo-cta .cs-cta--center {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20.8px;
	max-width: none;
}
.cm-photo-cta .cs-cta--center > :not(.h2) {
	max-width: 782px;
}
.cm-photo-cta .h2 {
	margin: 0;
	font-size: 3.27vw;
	line-height: .9;
	letter-spacing: -0.015em;
}
.cm-photo-cta .cs-cta p,
.cm-photo-cta p {
	max-width: 561px;
	margin: 0;
	font-size: 17.3px;
	line-height: 1.65;
	color: #e3e9ff;
}
.cm-photo-cta .cs-btn-row {
	margin-top: 0;
}

/* --- Footer, from the design: #070b2b with the water photo at 18%, 190px logo, four 188px columns ---------- */
.cm-footer.cs-footer--modern,
.cm-footer.cs-footer--modern.cs-footer--bg {
	background: #070b2b;
}
.cm-footer.cs-footer--bg .cs-footer__bg {
	overflow: hidden;
}
/* The water photo as in the design: placed 374px above the footer (at 1920), fading into the navy by 72% of its
   height, the whole layer at 18%. */
.cm-footer.cs-footer--bg .cs-footer__bg img {
	position: absolute;
	top: -19.48vw;
	left: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 1920 / 1072;
	max-width: none;
	object-fit: cover;
	opacity: .18;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 72%);
	mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 72%);
}
.cm-footer.cs-footer--modern::before {
	display: none;
}
.cm-footer.cs-footer--modern.cs-footer--bg .cs-footer__bg::after {
	display: none !important;
}
.cm-footer.cs-footer--modern {
	padding-top: 0;
}
.cm-footer .cm-footer__grid {
	grid-template-columns: 263px repeat(4, 188px);
	justify-content: space-between;
	gap: 40px;
	padding: 64px 0 0;
}
.cm-footer .cs-footer__about .custom-logo-link img,
.cm-footer .cs-footer__about img,
.cm-footer .cs-footer__about .cs-logo__img {
	width: 190px;
	max-width: 100%;
	height: auto;
	max-height: 78px;
	object-fit: contain;
	object-position: left center;
}
.cm-footer .cm-footer__address {
	margin: 15px 0 15px;
	font-size: 14.4px;
	line-height: 1.65;
}
.cm-footer .cs-footer__title {
	margin: 0 0 11px;
	font-size: 15.2px;
	line-height: 25px;
}
.cm-footer .cs-footer__links {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
}
.cm-footer .cs-footer__links li {
	margin: 0;
	padding: 0;
	line-height: 25px;
}
.cm-footer .cs-footer__links a {
	padding-left: 0;
	margin-left: 0;
}
.cm-footer .cs-footer__links a::before {
	display: none;
}
.cm-footer .cs-footer__links a {
	font-size: 14.4px;
	line-height: 25px;
}
.cm-footer .cm-footer__hours {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.cm-footer .cm-footer__hours li {
	padding: 0;
	line-height: 24px;
}
.cm-footer .cs-footer__bottom {
	margin-top: 32px;
	padding: 22px 0 28px;
}
@media (max-width: 1199px) {
	.cm-footer .cm-footer__grid {
		grid-template-columns: 1.3fr repeat(4, 1fr);
		gap: 28px;
	}
}
@media (max-width: 991px) {
	.cm-footer .cm-footer__grid {
		grid-template-columns: 1fr 1fr;
		padding-top: 56px;
	}
}
@media (max-width: 575px) {
	.cm-footer .cm-footer__grid {
		grid-template-columns: 1fr;
	}
}

.cm-footer .cm-footer__hours li {
	gap: 10px;
	white-space: nowrap;
}
.cm-footer .cm-footer__hours li::before,
.cm-footer .cm-footer__hours li::after {
	display: none;
}

/* The band: only the design's overlay on the photo (not the parent's dark radial one). */
.cm-photo-cta.cs-cta-image::before {
	display: none;
}

/* Footer height as the design: 64px top, 272px of columns, then the bottom bar. */
@media (min-width: 992px) {
	.cm-footer .cm-footer__grid {
		box-sizing: border-box;
		min-height: 336px;
		align-items: start;
	}
}

/* Boat tiles (compact): more room under each row, the white body hangs below the photo. */
.row:has(> [class*="col-"] > .cs-boat-tile--compact) {
	--bs-gutter-y: 40px;
}
.row:has(> [class*="col-"] > .cs-boat-tile--compact) + .cs-btn-row,
.row:has(> [class*="col-"] > .cs-boat-tile--compact) ~ .cs-btn-row {
	margin-top: 40px;
}

/* Steps → motor cards spacing, the same on the site and in the editor (where each block has its own wrapper):
   no bottom padding under the steps, 40px above the motor rows. */
.cs-section.cm-repower-steps {
	padding-bottom: 0 !important;
}
.cs-section.cm-engines {
	padding-top: 40px !important;
}

/* Block editor: blocks sit edge to edge like on the site (no editor gaps between full-width sections). */
.editor-styles-wrapper .is-root-container > .wp-block {
	margin-top: 0;
	margin-bottom: 0;
}

/* Page header spacing: 25px top, breadcrumb, 50px, title, 13px, text, 64px bottom. */
.cs-banner.cs-banner--modern.cs-banner--center {
	padding-top: 25px;
	padding-bottom: 64px;
}
.cs-banner--modern.cs-banner--center .cs-breadcrumb,
.cs-banner--modern.cs-banner--image.cs-banner--center .cs-breadcrumb {
	margin-top: 0;
	margin-bottom: 50px !important;
}
.cs-banner--modern.cs-banner--center .h1 {
	margin-bottom: 13px;
}
@media (max-width: 767px) {
	.cs-banner.cs-banner--modern.cs-banner--center {
		padding-top: 40px;
		padding-bottom: 48px;
	}
	.cs-banner--modern.cs-banner--center .cs-breadcrumb,
	.cs-banner--modern.cs-banner--image.cs-banner--center .cs-breadcrumb {
		margin-bottom: 24px;
	}
}

/* Image + Text, year: solid backgrounds as in the design (light grey #f8fafd on About, white on the homepage),
   not the parent's gradient. */
.cs-section.cm-about-year.cs-section--gradient-up {
	background: #f8fafd;
}

@media (max-width: 767px) {
	.cs-banner--modern.cs-banner--center .h1 {
		font-size: 34px;
	}
}

/* Brands, Photos style: the intro text under the heading. */
.cs-section.bg-dark:has(.cs-brand-photos) .cs-sechead p {
	max-width: 760px;
	margin: 14px auto 0;
	color: #fff;
}

/* --- Boat listing pages (filter feed), as the Motomarine listing: 1320px wide container, bold (not black) card
   titles, spec values written out in full -------------------------------------------------------------------- */
body.tax-product_cat,
body.post-type-archive-product {
	--container-wide: 1320px;
}
.cs-feed-row__title,
.cs-feed-row .h3.cs-feed-row__title {
	font-weight: 700;
	letter-spacing: 0;
}
.cs-feed-row__specs .v,
.cs-feed-row__specs .k,
.cs-feed-list--modern .cs-feed-row__specs .v,
.cs-feed-list--modern .cs-feed-row__specs .k {
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
	overflow-wrap: anywhere;
}
.cs-feed-list--modern .cs-feed-row__specs .v {
	font-size: 13px;
}
@media (min-width: 768px) {
	.cs-feed-row,
	.cs-feed-list--modern .cs-feed-row {
		grid-template-columns: 46% minmax(0, 1fr);
	}
}

/* "Your … dealer" sections: the Copy with map component, map on the left as in the design. */
@media (min-width: 992px) {
	.cm-map-left .cs-findus--modern {
		flex-direction: row-reverse;
	}
}
.cm-dealer .cs-findus--modern p + p {
	margin-top: 12px;
}
.cm-dealer__actions {
	gap: 12px;
	margin-top: 24px;
}

@media (max-width: 991px) {
	.cm-photo-cta .h2 {
		font-size: 36px;
	}
}

/* Photo band: the same space above and below the copy (the block's "No space" setting only removes the gap to
   the next section, not the band's own padding). */
.cs-section.cm-photo-cta.cs-cta-image {
	min-height: 0;
	padding-top: clamp(64px, 6.25vw, 120px) !important;
	padding-bottom: clamp(64px, 6.25vw, 120px) !important;
}

/* Process, Cards style (e.g. "How financing works"): white cards with a soft shadow, the outlined number in the
   top right corner. */
.cm-steps .cs-stepcards {
	--bs-gutter-x: 24px;
}
.cm-steps .cs-step-card {
	position: relative;
	height: 100%;
	padding: 36px 34px 40px;
	background: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: 0 10px 30px rgba(10, 17, 64, .06);
}
.cm-steps .cs-step-card__num {
	position: absolute;
	top: 18px;
	right: 24px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	font-family: var(--font-heading);
	font-size: 72px;
	font-weight: 400;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px #c9d3ec;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.cm-steps .cs-step-card p {
	max-width: none;
	margin: 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--cm-text);
}
.cm-after__note {
	margin-top: 8px;
	font-size: 16.8px;
}
.cm-after {
	gap: 24px;
}
.cm-steps .cs-step-card__num {
	top: 14px;
	right: 22px;
	font-size: 84px;
	-webkit-text-stroke: 1.5px #c3cdea;
	font-family: Archivo, sans-serif;
	font-weight: 700;
}

/* Process cards with four steps: four across. */
@media (min-width: 992px) {
	.cm-steps .cs-stepcards:has(> :nth-child(4)) > [class*="col-"] {
		flex: 0 0 25%;
		max-width: 25%;
	}
}
/* Several buttons under a text section. */
.cm-link-row {
	gap: 12px;
	margin-top: 20px;
}

/* Stat labels: sentence case, 14px. */
.cs-stat-band--modern .cs-stat__label,
.cs-stat-band--line .cs-stat__label,
.cs-stat-tiles .cs-stat__label {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

/* Doc-built sections: space between paragraphs. */
.cm-checklist p + p,
.cm-doc-text .cs-imgtext__body p + p {
	margin-top: 14px;
}

/* Steppers on the doc-built pages: as many columns as steps, full section spacing. */
.cs-section.cm-repower-steps.cm-doc-steps {
	padding-bottom: var(--section-y) !important;
}
@media (min-width: 992px) {
	.cm-doc-steps .cs-stepper {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	}
	.cm-doc-steps .cs-stepper {
		--n: 4;
		container-type: inline-size;
	}
	.cm-doc-steps .cs-stepper:not(:has(> :nth-child(4))) { --n: 3; }
	.cm-doc-steps .cs-stepper:has(> :nth-child(5)) { --n: 5; }
	.cm-doc-steps .cs-stepper:has(> :nth-child(6)) { --n: 6; }
	/* From the right edge of one number to the next: one column plus the gap, less the number box. */
	.cm-doc-steps .cs-stepper__item:not(:last-child) .cs-stepper__num::after {
		width: calc((100cqw - (var(--n) - 1) * 32px) / var(--n) + 32px - 46px);
		max-width: none;
	}
}
/* Short points as cards: the statement is the card. */
.cm-points .cs-teaser .h3,
.cm-points h3 {
	margin-bottom: 0;
}

/* Image + Text lists on the doc-built pages: one column, light rules between items. */
.cm-doc-list .cs-imgtext__body ul.cs-list,
.cm-doc-list .cs-imgtext__body ul.cs-list.cs-list--cols {
	display: block;
	columns: auto;
	margin: 20px 0 0;
	padding: 0;
}
.cm-doc-list .cs-imgtext__body ul.cs-list > li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: auto;
	margin: 0;
	padding: 10px 0;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--cm-navy);
	border-bottom: 1px solid #e3e8f1;
}
.cm-doc-list .cs-imgtext__body ul.cs-list > li:last-child {
	border-bottom: 0;
}
.cm-doc-list .cs-imgtext__body ul.cs-list > li .bi {
	flex: 0 0 auto;
	margin-top: 1px;
}
.cm-doc-list.bg-dark .cs-imgtext__body ul.cs-list > li {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, .15);
}
.cm-after-list {
	margin-top: 18px;
}

/* Feature box with the doc's text above and below the boxes. */
.cm-feature-intro {
	max-width: 680px;
	margin: 14px auto 0;
	text-align: center;
}
.cm-feature-intro p,
.cm-feature-after p {
	margin: 0;
	color: var(--cm-text);
}
.cm-feature-intro p + p,
.cm-feature-after p + p {
	margin-top: 12px;
}
.cm-feature-after {
	max-width: 760px;
	margin: 36px auto 0;
	text-align: center;
}
.cm-doc-features .cs-text-feature .h4 {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.4;
}
.cm-doc-features .cs-text-feature {
	align-items: center;
}

/* Split card lists on the doc-built pages: one column. */
.cm-doc-split .cs-imgtext-card__body ul.cs-list,
.cm-doc-split .cs-imgtext-card__body ul.cs-list.cs-list--cols {
	display: block;
	columns: auto;
}
.cm-doc-split .cs-imgtext-card__body ul.cs-list > li {
	width: auto;
}
.cm-doc-split .cs-imgtext-card__body p + p {
	margin-top: 12px;
}

/* "Why … come to this shop" points: the statements as written (no title case), yellow icons on navy. */
.cm-points h3,
.cm-points .h4 {
	font-size: 18px;
	line-height: 1.4;
	text-transform: none;
}
.cm-points.bg-dark .cs-teaser__icon .bi,
.cm-points.bg-dark .cs-teaser__icon {
	color: var(--cm-yellow);
}

/* Split card on the doc-built pages: a compact card, the photo filling its half. */
.cm-doc-split .cs-imgtext-card__body {
	padding: 48px 52px 48px 40px;
}
.cm-doc-split .cs-imgtext-card__body .h2 {
	font-size: clamp(28px, 2.3vw, 36px);
}
.cm-doc-split .cs-imgtext-card__body ul.cs-list {
	margin: 18px 0 0;
}
.cm-doc-split .cs-imgtext-card__body ul.cs-list > li {
	padding: 6px 0;
	font-size: 15px;
	line-height: 1.5;
	border-bottom: 0;
}
.cm-doc-split .cm-after-list {
	margin-top: 16px;
}
.cm-doc-split .cs-imgtext-card__media,
.cm-doc-split .cs-imgtext-card__media img {
	height: 100%;
}
.cm-doc-split .cs-imgtext-card__media img {
	object-fit: cover;
}
.cm-doc-split .cs-btn-row,
.cm-doc-split .cs-imgtext__actions {
	margin-top: 22px;
}
.cm-points.bg-dark .cs-teaser__icon {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 48px;
	background: var(--cm-yellow) !important;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transform: skewX(var(--cm-skew));
}
.cm-points.bg-dark .cs-teaser__icon::before,
.cm-points.bg-dark .cs-teaser__icon::after {
	display: none;
}
.cm-points.bg-dark .cs-teaser__icon .bi {
	font-size: 22px;
	color: var(--cm-navy);
	transform: skewX(9deg);
}

/* Doc-built Image + Text on navy: the parent's dark style already puts the photo on the right; here it follows
   "Swap image and text" the same way as the light sections (off = photo left, on = photo right). */
@media (min-width: 768px) {
	.cm-doc-text:not(.mm-imgtext-flip) .cs-imgtext--flip.row {
		flex-direction: row;
	}
	.cm-doc-text.mm-imgtext-flip .cs-imgtext--flip.row {
		flex-direction: row-reverse;
	}
}

/* Light list style inside a Split card (the card's own CSS makes list icons solid). */
.cm-list-light .cs-imgtext-card--angle .cs-list-light li i {
	color: var(--primary);
	background: var(--primary-tint-10);
	box-shadow: none;
}

/* Icon cards on navy (doc-built pages): yellow skewed icon tiles like the site's buttons, quieter cards. */
.cm-why.bg-dark .cs-teaser__icon {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 48px;
	background: var(--cm-yellow) !important;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transform: skewX(var(--cm-skew));
}
.cm-why.bg-dark .cs-teaser__icon::before,
.cm-why.bg-dark .cs-teaser__icon::after {
	display: none;
}
.cm-why.bg-dark .cs-teaser__icon .bi {
	font-size: 22px;
	color: var(--cm-navy);
	transform: skewX(9deg);
}
.cm-why.bg-dark .cs-teaser {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .12);
}
.cm-why.bg-dark .cs-teaser p {
	color: #c9d3e6;
}

/* Team: five to a row on desktop, so a group of five stays on one line. */
@media (min-width: 992px) {
	.cm-team .cs-team--modern > [class*="col-"] {
		flex: 0 0 20%;
		max-width: 20%;
	}
}

/* "Call for Price" in the price colour (blue), like the prices. */
.cs-feed-row__price.mm-boats-call,
.cs-feed-row__price-line .mm-boats-call,
.cs-feed-card__price.mm-boats-call,
.cs-boat-tile__call,
.mm-boats-call {
	color: var(--cm-blue);
}
.cs-feed-row .cs-feed-row__price.mm-boats-call,
.cs-feed-card .cs-feed-card__price.mm-boats-call {
	color: var(--cm-blue);
}

/* Comparison tables in the doc-built pages. */
.cm-doc-table .cs-table-wrap {
	margin: 20px 0;
}
.cm-compare th,
.cm-compare td {
	padding: 12px 16px;
	font-size: 15px;
	line-height: 1.5;
	vertical-align: top;
}
.cm-compare thead th {
	color: #fff;
	background: var(--cm-navy);
}
.cm-compare tbody th {
	font-weight: 700;
	color: var(--cm-navy);
}
.cm-doc-table .cs-table-wrap {
	overflow-x: auto;
}
.cm-doc-table table.cm-compare {
	width: 100%;
	min-width: 0;
	table-layout: fixed;
}
.cm-doc-table table.cm-compare tbody th {
	background: var(--bg-light);
	color: var(--cm-navy);
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
}
.cm-doc-table table.cm-compare thead th {
	font-size: 13px;
}
.cm-doc-table table.cm-compare thead th:first-child {
	background: var(--cm-navy);
}
.cm-doc-table table.cm-compare tbody th,
.cm-doc-table table.cm-compare td {
	border-bottom: 1px solid #dde6f5;
}

/* Comparison table sections: centred, heading above, table across the middle. */
.cm-doc-table .cs-container > .row > [class*="col-"] {
	flex: 0 0 100%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.cm-doc-table .cs-sechead {
	margin-bottom: 8px !important;
	text-align: center;
}
.cm-doc-table .cs-text > p {
	text-align: center;
}
.cm-doc-table .cs-text > p:last-child {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.cm-doc-table .cs-container > .row {
	justify-content: center;
}
.cm-doc-table .cs-container > .row > [class*="col-"] {
	width: 100%;
}
.cm-doc-table .cs-text {
	max-width: 900px;
	margin: 0 auto;
}

/* Comparison table section: even spacing (heading, intro, table, closing text). */
.cm-doc-table .cs-container > .row {
	--bs-gutter-y: 0;
	row-gap: 0;
}
.cm-doc-table .cs-sechead {
	margin-bottom: 16px !important;
}
.cm-doc-table .cs-text > p {
	margin: 0;
}
.cm-doc-table .cs-text .cs-table-wrap {
	margin: 28px 0;
}

/* Type cards from the doc-built pages: centred heading and text, three across. */
.cm-doc-types .cs-sechead.cs-sechead--center {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.cm-doc-types .cs-cards--modern {
	justify-content: center;
}
@media (min-width: 992px) {
	.cm-doc-types .cs-cards--modern > [class*="col-"] {
		flex: 0 0 33.333%;
		max-width: 33.333%;
	}
}
.cm-doc-types .cs-card--overlay {
	aspect-ratio: 4 / 3;
}

/* Legal pages (Privacy, Policies): plain document style, modest headings. */
.cs-text--legal {
	max-width: 900px;
	margin: 0 auto;
}
.cs-text--legal h2,
.cs-text--legal .h2,
.cs-text--legal .h3 {
	margin: 40px 0 12px;
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.cs-text--legal h3,
.cs-text--legal .h4 {
	margin: 24px 0 8px;
	font-size: 17px;
	line-height: 1.4;
}
.cs-text--legal p,
.cs-text--legal li {
	font-size: 16px;
	line-height: 1.7;
}
.cs-text--legal > :first-child {
	margin-top: 0;
}
.cs-text--legal h3,
.cs-text--legal .h4 {
	font-weight: 700;
	letter-spacing: 0;
}
.cs-text--legal h3,
.cs-text--legal h3.h3 {
	margin: 24px 0 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

/* Form checkboxes and radios: space between the box and its label (Gravity Forms' grid zeroes the parent's gap). */
.mm-gf .gform_wrapper .gfield .gchoice {
	column-gap: 10px;
}

/* Heading 2 on desktop: 2.35rem (Theme Settings › Typography takes whole pixels only, 38px = 2.375rem). Tablet and
   mobile keep their sizes from the settings. */
@media (min-width: 992px) {
	html:root {
		--h2: 2.35rem;
	}
}

/* Compact boat tiles: a 16:9 photo box (the feed's photos are 16:9, so nothing is cropped), the card overlapping it a little. */
.cs-boat-tile--compact .cs-boat-tile__media {
	aspect-ratio: inherit;
	height: 215px;
}
.cs-boat-tile--compact .cs-boat-tile__body {
	position: relative;
	z-index: 2;
	margin: -40px 16px 0;
	padding: 20px 20px 16px;
	background: var(--white);
}

/* Boat listing rows (List feed): tighter actions without the top rule, body and photo spacing. */
.cs-feed-list--modern .cs-feed-row__actions {
	gap: 10px 12px;
	border: none;
	padding: 0 0 17px;
}
@media (min-width: 768px) {
	.cs-feed-list--modern .cs-feed-row__body {
		padding: 17px 24px 16px;
	}
	.cs-feed-list--modern .cs-feed-row__media {
		min-height: 245px;
	}
}