/* ==========================================================================
   Core Marine Redesign — global stylesheet (Build 11)
   Self-contained. No dependency on the old coremarine theme / bootstrap.
   Homepage sections use the `cmr-` prefix; chrome uses .site-header/.site-footer.
   ========================================================================== */

:root {
	--navy:       #183577;
	--navy-deep:  #223D7C;
	--blue:       #1A5099;
	--blue-light: #4E8ECB;
	--sky:        #DBE8F6;
	--ink:        #212121;
	--grey:       #69727D;
	--footer-bg:  #122452;
	--grad:       linear-gradient(120deg, #172f63, #1A5099);
	--maxw:       1280px;
	--gutter:     40px;
	--inner-hero-pad:        84px 0 92px; /* shared inner-page hero (Build 33) */
	--inner-hero-pad-mobile: 60px 0 70px;
}

/* --- base / reset (global, intentional) --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	overflow-x: clip;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', 'Inter', sans-serif;
	color: var(--navy);
	line-height: 1.15;
}
a { color: var(--blue); }
img { max-width: 100%; height: auto; }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	overflow: hidden;
	padding: 0; border: 0;
}
.cmr-skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 1000;
	width: auto; height: auto; clip: auto;
	background: #fff; color: var(--blue); padding: 10px 16px; border-radius: 8px;
}

/* --- layout helpers --- */
.cmr-container {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gutter);
	width: 100%;
}
.cmr-section-head { text-align: center; margin-bottom: 50px; }

.cmr-eyebrow {
	font: 600 13px/1 'Inter', sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--blue);
	margin: 0 0 14px;
}
.cmr-eyebrow--light { color: #9fc4e8; }

.cmr-h2 {
	font: 700 clamp(30px, 4vw, 42px)/1.1 'Montserrat', sans-serif;
	color: var(--navy);
	letter-spacing: -.01em;
	margin: 0;
}
.cmr-h2--light { color: #fff; }

/* --- buttons --- */
.cmr-btn {
	display: inline-block;
	font: 600 15px/1 'Inter', sans-serif;
	padding: 15px 32px;
	border-radius: 30px;
	border: 0;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cmr-btn--primary {
	background: var(--blue);
	color: #fff;
	box-shadow: 0 8px 20px rgba(26,80,153,.28);
}
.cmr-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26,80,153,.36); color: #fff; }
.cmr-btn--outline {
	background: transparent;
	color: var(--blue);
	box-shadow: inset 0 0 0 1.5px var(--blue);
}
.cmr-btn--outline:hover { background: var(--blue); color: #fff; }
.cmr-btn--lg { font-size: 16px; padding: 17px 38px; }

.cmr-link {
	font: 600 14px/1 'Inter', sans-serif;
	color: var(--blue);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}
.cmr-link:hover { gap: 10px; }

.cmr-wave { position: absolute; left: 0; width: 100%; height: 70px; display: block; z-index: 2; pointer-events: none; }
.cmr-wave--bottom { bottom: -1px; }
.cmr-wave--top    { top: -1px; }

/* ==========================================================================
   INNER PAGE HERO (shared)  — Build 33
   One reusable navy band behind template-parts/page-hero.php. Replaces the 9
   copy-pasted .cmr-X__hero blocks. The --store modifier carries the web-store's
   brighter gradient, brighter eyebrow + subtext, and tighter mobile padding.
   Does NOT affect .cmr-hero (homepage) or .cmr-page-hero (grey fallback).
   ========================================================================== */
.cmr-inner-hero { position: relative; overflow: hidden; background: var(--grad); padding: var(--inner-hero-pad); text-align: center; }
.cmr-inner-hero .cmr-container { position: relative; z-index: 1; }
.cmr-inner-hero__cta { margin: 26px 0 0; }
/* Default navy hero subtitle — light on the always-navy gradient (Build 45.2).
   Base rule was missing a colour, so the sub inherited dark --ink; the --store
   variant below keeps its own higher-specificity colour. */
.cmr-inner-hero__sub {
	max-width: 640px;
	margin: 20px auto 0;
	font: 400 clamp(17px, 2vw, 20px)/1.5 'Inter', sans-serif;
	color: var(--sky);
}

/* web-store variant — distinct brighter look */
.cmr-inner-hero--store { background: linear-gradient(120deg, var(--blue) 0%, var(--blue-light) 100%); }
.cmr-inner-hero--store .cmr-eyebrow--light { color: var(--sky); }
.cmr-inner-hero--store .cmr-inner-hero__sub {
	max-width: 640px;
	margin: 20px auto 0;
	font: 400 clamp(17px, 2vw, 20px)/1.5 'Inter', sans-serif;
	color: #eaf2fc;
}
@media (max-width: 768px) {
	.cmr-inner-hero { padding: var(--inner-hero-pad-mobile); }
	.cmr-inner-hero--store { padding: 56px 0 64px; }
}

/* ==========================================================================
   SITE HEADER + NAV
   ========================================================================== */
.cmr-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid #eef1f5;
	transition: box-shadow .2s ease;
}
.cmr-header.is-scrolled {
	background: rgba(255,255,255,.82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 6px 24px rgba(24,53,119,.08);
}
.cmr-header__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gutter);
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.cmr-header__brand { display: flex; align-items: center; flex: none; }
.cmr-header__brand img, .cmr-header__brand .custom-logo { max-height: 67px; width: auto; display: block; }

.cmr-wordmark { display: block; line-height: 1; text-decoration: none; }
.cmr-wordmark__name { display: block; font: 700 19px/1 'Montserrat', sans-serif; letter-spacing: .15em; color: var(--navy); }
.cmr-wordmark__tag  { display: block; font: 600 8px/1 'Montserrat', sans-serif; letter-spacing: .34em; color: var(--grey); margin-top: 4px; }

.cmr-nav { display: flex; align-items: center; gap: 28px; }
.cmr-menu {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	align-items: center;
	gap: 26px;
}
.cmr-menu li { position: relative; }
.cmr-menu a {
	font: 500 14px/1 'Inter', sans-serif;
	color: #33414f;
	text-decoration: none;
	display: inline-block;
	padding: 6px 0;
}
.cmr-menu a:hover, .cmr-menu .current-menu-item > a { color: var(--blue); }
.cmr-menu .menu-item-has-children > a::after { content: " \25BE"; font-size: .8em; color: var(--grey); }

/* submenus */
.cmr-menu ul.sub-menu {
	list-style: none;
	margin: 0; padding: 8px 0;
	position: absolute;
	top: 100%; left: 0;
	min-width: 220px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 14px 40px rgba(24,53,119,.16);
	opacity: 0; visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 50;
}
.cmr-menu li:hover > ul.sub-menu,
.cmr-menu li:focus-within > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cmr-menu ul.sub-menu a { display: block; padding: 9px 18px; }

.cmr-nav__cta { flex: none; }

/* mobile toggle */
.cmr-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: transparent;
	border: 0;
	padding: 8px;
	cursor: pointer;
}
.cmr-nav-toggle__bar { width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }

/* ==========================================================================
   HERO (Option B)
   ========================================================================== */
.cmr-home { display: block; }
.cmr-hero {
	position: relative;
	min-height: 620px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	padding: 120px 0 150px;
	overflow: hidden;
	color: #fff;
}
.cmr-hero__media { position: absolute; inset: 0; z-index: 0; }
.cmr-hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Left -> right scrim: darkens the headline side, leaves the yacht visible at right. */
.cmr-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,20,40,.82) 0%, rgba(13,20,40,.55) 38%, rgba(13,20,40,.05) 70%); }
.cmr-hero__inner { position: relative; z-index: 1; text-align: left; margin: 0; max-width: 540px; padding: 0; }
.cmr-hero__inner .cmr-btn { align-self: flex-start; }
.cmr-hero__title { font: 800 clamp(34px, 6vw, 60px)/1.05 'Montserrat', sans-serif; letter-spacing: -.01em; margin: 0; color: #fff; text-wrap: balance; hyphens: none; overflow-wrap: normal; }
.cmr-hero__sub { font: 400 clamp(17px, 2.4vw, 22px)/1.5 'Inter', sans-serif; color: var(--sky); margin: 22px 0 34px; }

/* ==========================================================================
   OUR STORY
   ========================================================================== */
.cmr-story { background: #fff; padding: 92px 0; }
.cmr-story__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 64px; align-items: center; }
.cmr-story__media { border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px rgba(24,53,119,.16); aspect-ratio: 4 / 3; }
.cmr-story__media img { width: 100%; height: 100%; object-fit: cover; }
.cmr-story__copy .cmr-h2 { margin-bottom: 24px; }
.cmr-story__paras { display: flex; flex-direction: column; gap: 16px; }
.cmr-story__paras p { font: 400 17px/1.65 'Inter', sans-serif; color: #3a4450; margin: 0; }
.cmr-story__copy .cmr-btn { margin-top: 30px; }

/* ==========================================================================
   WHAT WE DO — Style-2 cards
   ========================================================================== */
.cmr-services { position: relative; background: #f6f8fb; padding: 110px 0 100px; }
.cmr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.cmr-card {
	position: relative;
	display: block;
	height: 340px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 14px 40px rgba(24,53,119,.12);
	color: #fff;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}
.cmr-card:hover { transform: translateY(-4px); box-shadow: 0 22px 54px rgba(24,53,119,.22); }
.cmr-card__img { position: absolute; inset: 0; background-image: var(--cmr-card-img); background-size: cover; background-position: center; transition: transform .4s ease; }
.cmr-card:hover .cmr-card__img { transform: scale(1.06); }
.cmr-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,30,66,0) 28%, rgba(16,30,66,.88) 100%); }
.cmr-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 26px; display: block; }
.cmr-card__title { display: block; font: 700 21px/1.2 'Montserrat', sans-serif; color: #fff; }
.cmr-card__blurb { display: block; font: 400 13px/1.5 'Inter', sans-serif; color: var(--sky); margin: 8px 0 14px; }
.cmr-card__cta { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 'Inter', sans-serif; color: #fff; }
.cmr-card:hover .cmr-card__cta { gap: 12px; }

/* ==========================================================================
   PRODUCT SHOWCASE
   ========================================================================== */
.cmr-partners { background: #fff; padding: 100px 0; }
.cmr-partner-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.cmr-partner { background: #fff; border-radius: 18px; box-shadow: 0 10px 30px rgba(24,53,119,.1); overflow: hidden; display: flex; flex-direction: column; }
.cmr-partner__plate { height: 96px; background: var(--grad); display: flex; align-items: center; justify-content: center; }
.cmr-partner__plate span { font: 700 17px/1 'Montserrat', sans-serif; letter-spacing: .04em; color: #fff; }
.cmr-partner__body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.cmr-partner__name { font: 700 16px/1.2 'Montserrat', sans-serif; color: var(--navy); margin: 0; }
.cmr-partner__blurb { font: 400 13px/1.5 'Inter', sans-serif; color: var(--grey); margin: 8px 0 14px; flex: 1; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.cmr-testi { position: relative; background: linear-gradient(160deg, #172f63, #1A5099); padding: 110px 0 100px; color: #fff; }
.cmr-carousel { position: relative; max-width: 920px; margin: 0 auto; text-align: center; }
.cmr-carousel__viewport { position: relative; }
.cmr-quote { animation: cmrFade .5s ease; }
.cmr-quote[hidden] { display: none; }
.cmr-quote__text { font: 500 clamp(19px, 2.6vw, 26px)/1.5 'Montserrat', sans-serif; color: #fff; letter-spacing: -.005em; margin: 0 0 26px; }
.cmr-quote__name { display: block; font: 700 17px/1.3 'Montserrat', sans-serif; color: #fff; }
.cmr-quote__role { display: block; font: 400 14px/1.4 'Inter', sans-serif; color: #9fc4e8; margin-top: 4px; }
.cmr-carousel__arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 46px; height: 46px; border-radius: 50%;
	background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4);
	color: #fff; font: 400 24px/1 'Inter', sans-serif;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: background .2s ease;
}
.cmr-carousel__arrow:hover { background: rgba(255,255,255,.14); }
.cmr-carousel__arrow--prev { left: -10px; }
.cmr-carousel__arrow--next { right: -10px; }
.cmr-carousel__dots { display: flex; gap: 9px; justify-content: center; margin-top: 36px; }
.cmr-dot { width: 9px; height: 9px; border-radius: 9px; border: 0; background: #cdd7e6; padding: 0; cursor: pointer; transition: all .3s ease; }
.cmr-dot.is-active { width: 26px; background: #fff; }

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

/* ==========================================================================
   GENERIC PAGE / POST (Gutenberg & classic; Elementor pages render edge-to-edge)
   ========================================================================== */
.cmr-elementor-page { /* Elementor owns layout — no theme constraints */ }
.cmr-page-hero { background: #f6f8fb; padding: 56px 0; margin-bottom: 40px; }
.cmr-page-hero__title { font: 700 clamp(28px, 4vw, 40px)/1.1 'Montserrat', sans-serif; color: var(--navy); margin: 0; }
.cmr-entry { max-width: 820px; margin: 0 auto; padding-bottom: 80px; font-size: 17px; }
.cmr-entry h2 { font-size: 1.8rem; margin: 1.6em 0 .5em; }
.cmr-entry h3 { font-size: 1.35rem; margin: 1.4em 0 .4em; }
.cmr-entry p, .cmr-entry ul, .cmr-entry ol { margin: 0 0 1.1em; }
.cmr-entry img { border-radius: 12px; }
.cmr-list { padding-top: 60px; padding-bottom: 80px; }
.cmr-card-post { padding: 24px 0; border-bottom: 1px solid #eef1f5; }
.cmr-card-post__title { font-size: 1.5rem; margin: 0 0 .4em; }
.cmr-card-post__title a { color: var(--navy); text-decoration: none; }
.cmr-404 { padding: 80px 0; text-align: center; }
.cmr-404 .cmr-btn { margin: 6px; }

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */
.cmr-footer { position: relative; background: var(--footer-bg); color: #9fb0d0; padding: 96px 0 30px; margin-top: 0; }
.cmr-footer__wave { position: absolute; top: -1px; left: 0; width: 100%; height: 70px; display: block; }
.cmr-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }
.cmr-footer__cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.12); }
.cmr-footer__heading { font: 700 13px/1 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin: 0 0 18px; }
.cmr-footer__brand .cmr-wordmark__name { color: #fff; }
.cmr-footer__brand .cmr-wordmark__tag { color: #9fc4e8; }
.cmr-footer__brand img, .cmr-footer__brand .custom-logo { filter: brightness(0) invert(1); max-height: 62px; width: auto; display: block; }
.cmr-footer__blurb { font: 400 14px/1.6 'Inter', sans-serif; color: #9fb0d0; max-width: 300px; margin: 18px 0 20px; }
.cmr-footer__menu, .cmr-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cmr-footer__menu a, .cmr-footer__contact a { font: 400 14px/1.4 'Inter', sans-serif; color: #9fb0d0; text-decoration: none; }
.cmr-footer__menu a:hover, .cmr-footer__contact a:hover { color: #fff; }
.cmr-footer__contact li { font: 400 14px/1.5 'Inter', sans-serif; color: #9fb0d0; }
.cmr-footer__social { display: flex; gap: 10px; }
.cmr-social { width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; font: 500 11px/1 'Inter', sans-serif; color: #9fc4e8; text-decoration: none; transition: background .2s ease, color .2s ease; }
.cmr-social__icon { display: block; width: 20px; height: 20px; }
.cmr-social:hover { background: rgba(255,255,255,.1); color: #fff; }
.cmr-footer__bottom { font: 400 13px/1.5 'Inter', sans-serif; color: #7589ad; text-align: center; padding-top: 26px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
	.cmr-cards { grid-template-columns: repeat(2, 1fr); }
	.cmr-partner-grid { grid-template-columns: repeat(3, 1fr); }
	.cmr-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 1100px) {
	/* mobile nav — breakpoint raised from 992px in Build 47 so the desktop bar
	   (links + Book + Contact CTAs + account pill) never wraps before the
	   hamburger drawer takes over. */
	.cmr-nav-toggle { display: flex; }
	.cmr-nav {
		position: fixed;
		top: 74px; right: 0;
		width: min(320px, 86vw);
		height: calc(100vh - 74px);
		background: #fff;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 18px 22px;
		box-shadow: -10px 0 40px rgba(24,53,119,.16);
		transform: translateX(100%);
		transition: transform .25s ease;
		overflow-y: auto;
	}
	body.cmr-nav-open .cmr-nav { transform: translateX(0); }
	.cmr-menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.cmr-menu > li { border-bottom: 1px solid #eef1f5; }
	.cmr-menu a { padding: 14px 0; }
	.cmr-menu ul.sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; min-width: 0; padding: 0 0 8px 14px;
	}
	.cmr-nav__cta { margin-top: 18px; text-align: center; }
	body.cmr-nav-open { overflow: hidden; }
}

@media (max-width: 768px) {
	body { font-size: 16px; }
	:root { --gutter: 22px; }

	.cmr-hero { min-height: 480px; padding: 90px 0 110px; }
	/* Narrow screens: stronger top->bottom fade keeps left-aligned text legible. */
	.cmr-hero__scrim { background: linear-gradient(180deg, rgba(13,20,40,.30), rgba(13,20,40,.78)); }
	.cmr-hero__inner { max-width: none; padding: 0; }

	.cmr-story { padding: 56px 0; }
	.cmr-story__grid { grid-template-columns: 1fr; gap: 28px; }
	.cmr-story__media { order: -1; }
	.cmr-story__paras p { font-size: 15px; }

	.cmr-services { padding: 64px 0 56px; }
	.cmr-section-head { margin-bottom: 32px; }
	.cmr-cards { grid-template-columns: 1fr 1fr; gap: 14px; }
	.cmr-card { height: 240px; }
	.cmr-card__blurb { display: none; }

	.cmr-partners { padding: 56px 0; }
	.cmr-partner-grid { grid-template-columns: 1fr 1fr; }

	.cmr-testi { padding: 64px 0 56px; }
	.cmr-carousel__arrow--prev { left: -4px; }
	.cmr-carousel__arrow--next { right: -4px; }

	.cmr-footer { padding: 70px 0 30px; }
	.cmr-footer__cols { grid-template-columns: 1fr; gap: 28px; text-align: left; }
}

@media (max-width: 480px) {
	.cmr-cards { grid-template-columns: 1fr; }
	.cmr-partner-grid { grid-template-columns: 1fr; }
	.cmr-card { height: 220px; }
	.cmr-card__blurb { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.cmr-quote { animation: none; }
	.cmr-card, .cmr-card__img, .cmr-btn, .cmr-link, .cmr-nav { transition: none; }
}

/* ==========================================================================
   ABOUT PAGE  (page-about-us.php)
   Slim navy hero band over the design-system gradient; the story section below
   reuses .cmr-story (already two-column + mobile-stacking). White wave bridges
   the hero into the white .cmr-story background.
   ========================================================================== */
/* Hero now rendered by template-parts/page-hero.php (.cmr-inner-hero). */

/* ==========================================================================
   SERVICE PAGES  (templates/service.php — all six service pages)
   Navy hero band (mirrors About) -> white body with a centred prose column,
   aligned image treatment (single feature OR a 3-up grid for Marine
   Engineering), a Contact CTA, then an "Other services" cross-link row.
   Reuses existing tokens; adds no new rules to homepage/About selectors.
   ========================================================================== */
.cmr-service__body { background: #fff; padding: 84px 0 92px; }

/* Centred, readable prose column — keeps text-heavy pages (Engine Diagnostics) legible. */
.cmr-service__prose { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.cmr-service__prose p { font: 400 17px/1.7 'Inter', sans-serif; color: #3a4450; margin: 0; }

/* Single feature image — mirrors .cmr-story__media framing, centred under the prose. */
.cmr-service__media {
	max-width: 880px;
	margin: 48px auto 0;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(24,53,119,.16);
	aspect-ratio: 16 / 9;
}
.cmr-service__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Aligned multi-image grid (Marine Engineering) — 3-up desktop, equal heights. */
.cmr-service__grid {
	margin: 48px auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.cmr-service__grid-item {
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(24,53,119,.14);
	aspect-ratio: 4 / 3;
}
.cmr-service__grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cmr-service__cta { text-align: center; margin-top: 48px; }

/* Other-services cross-link row. */
.cmr-service__more { background: #f6f8fb; padding: 80px 0 88px; }
.cmr-service__more-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.cmr-service__more-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: #fff;
	border-radius: 14px;
	padding: 20px 24px;
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(24,53,119,.08);
	transition: transform .15s ease, box-shadow .15s ease;
}
.cmr-service__more-link span:first-child { font: 600 16px/1.3 'Montserrat', sans-serif; color: var(--navy); }
.cmr-service__more-arrow { color: var(--blue); font-size: 18px; transition: transform .15s ease; }
.cmr-service__more-link:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(24,53,119,.16); }
.cmr-service__more-link:hover .cmr-service__more-arrow { transform: translateX(4px); }

@media (max-width: 900px) {
	.cmr-service__grid { grid-template-columns: 1fr; }
	.cmr-service__more-list { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.cmr-service__body { padding: 60px 0 68px; }
}

/* ==========================================================================
   SERVICE PROJECTS  (Build 39 — templates/service.php "Selected Projects" band)
   Full-width white case-study band between .cmr-service__body and
   .cmr-service__more. Each project pairs an Issue/Scope/Outcome write-up with a
   before/after drag-slider (.cml-ba). Layout alternates per project; stacks to
   one column <=900px. Reuses --navy/--blue/--sky. Featured image = "after",
   _cml_before_image = "before"; missing images render hatched placeholder panels
   (no broken <img>). With JS off (.cml-ba not .is-ready) both images stack
   visibly — nothing is hidden.
   ========================================================================== */
.cmr-service__projects { background: #fff; }
.cmr-service__projects-inner { max-width: 1180px; margin: 0 auto; padding: 84px 50px 92px; }

.cmr-service__projects-head { text-align: center; margin-bottom: 60px; }
.cmr-service__projects-head .cmr-eyebrow { color: var(--blue); margin-bottom: 14px; }
.cmr-service__projects-sub { font: 400 17px/1.6 'Inter', sans-serif; color: #69727D; margin: 16px auto 0; max-width: 560px; }

/* Project row — text + media, ratio favours the media side. Alternates via --rev. */
.cmr-project { display: grid; grid-template-columns: 1fr 1.05fr; gap: 52px; align-items: center; }
.cmr-project + .cmr-project { margin-top: 64px; }
.cmr-project__text { order: 1; }
.cmr-project__media { order: 2; }
.cmr-project--rev { grid-template-columns: 1.05fr 1fr; }
.cmr-project--rev .cmr-project__media { order: 1; }
.cmr-project--rev .cmr-project__text { order: 2; }

.cmr-project__num { font: 700 12px/1 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #9aacc6; margin: 0 0 14px; }
.cmr-project__title { font: 700 27px/1.18 'Montserrat', sans-serif; color: var(--navy); margin: 0; }
.cmr-project__vessel { font: 500 15px/1.4 'Inter', sans-serif; color: var(--blue); margin: 7px 0 0; }
.cmr-project__facts { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.cmr-project__fact { font: 400 15px/1.65 'Inter', sans-serif; color: #46586f; margin: 0; }

/* Issue/Scope/Outcome pills. Solid (navy) variant flags the Outcome. */
.cmr-pill {
	display: inline-block;
	font: 700 10px/1 'Inter', sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--blue);
	background: var(--sky);
	padding: 4px 9px;
	border-radius: 20px;
	margin-right: 9px;
	vertical-align: 2px;
}
.cmr-pill--solid { color: #fff; background: var(--blue); }

/* ---- Before/after slider ---- */
.cml-ba {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 18px;
	overflow: hidden;
	cursor: ew-resize;
	user-select: none;
	touch-action: none;
	box-shadow: 0 18px 44px rgba(24, 53, 119, .16);
	--cml-pos: 50%;
}
.cml-ba__after,
.cml-ba__before { position: absolute; inset: 0; aspect-ratio: 4 / 3; }
.cml-ba__after img,
.cml-ba__before img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Corner BEFORE/AFTER labels (shown on real images and placeholders alike). */
.cml-ba__after::after,
.cml-ba__before::after {
	content: attr(data-label);
	position: absolute;
	top: 14px;
	font: 700 10px/1 'Montserrat', sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
	padding: 7px 12px;
	border-radius: 20px;
	z-index: 2;
}
.cml-ba__after::after  { right: 14px; background: var(--blue); }
.cml-ba__before::after { left: 14px;  background: #5b6470; }

/* Hatched placeholder panels — drawn when an image is missing (never a broken img). */
.cml-ba__after.is-placeholder  { background: repeating-linear-gradient(45deg, #e3ecf6, #e3ecf6 13px, #d6e3f1 13px, #d6e3f1 26px); }
.cml-ba__before.is-placeholder { background: repeating-linear-gradient(45deg, #cfcfca, #cfcfca 13px, #c3c3bd 13px, #c3c3bd 26px); }

/* Wipe + handle: only once JS marks the slider ready. */
.cml-ba.is-ready .cml-ba__before { clip-path: inset(0 calc(100% - var(--cml-pos)) 0 0); }
.cml-ba__handle { display: none; }
.cml-ba.is-ready .cml-ba__handle {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--cml-pos);
	width: 3px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(24, 53, 119, .18);
	transform: translateX(-1.5px);
	z-index: 3;
}
.cml-ba__grip {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 5px 14px rgba(24, 53, 119, .32);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 15px/1 'Inter', sans-serif;
	color: var(--blue);
}

/* No-JS fallback: stack BEFORE above AFTER, both fully visible, nothing hidden. */
.cml-ba:not(.is-ready) {
	aspect-ratio: auto;
	cursor: default;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: none;
}
.cml-ba:not(.is-ready) .cml-ba__after,
.cml-ba:not(.is-ready) .cml-ba__before {
	position: relative;
	inset: auto;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(24, 53, 119, .16);
}

@media (max-width: 900px) {
	.cmr-service__projects-inner { padding: 56px 26px 64px; }
	.cmr-service__projects-head { margin-bottom: 40px; }
	.cmr-project,
	.cmr-project--rev { grid-template-columns: 1fr; gap: 22px; }
	/* Media first, then text, regardless of alternation. */
	.cmr-project__media,
	.cmr-project--rev .cmr-project__media { order: 1; }
	.cmr-project__text,
	.cmr-project--rev .cmr-project__text { order: 2; }
	.cmr-project + .cmr-project { margin-top: 44px; }
}
@media (max-width: 480px) {
	.cmr-service__projects-inner { padding: 44px 20px 52px; }
	.cmr-project__title { font-size: 22px; }
}

/* ==========================================================================
   CONTACT PAGE  (page-contact.php — Build 14)
   Navy hero band (mirrors About/Services) -> white body with a two-column
   form (left) / map (right) row, then a 3-up contact-details row. Reuses
   existing tokens; WPForms' own CSS renders the fields (only light container
   spacing is set here). Adds no rules to homepage/About/Service selectors.
   ========================================================================== */
/* Form + map row — equal columns, stretched so the map matches the form height. */
.cmr-contact__main { background: #fff; padding: 84px 0 92px; }
.cmr-contact__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: stretch;
}
.cmr-contact__form {
	background: #fff;
	border-radius: 24px;
	padding: 36px 36px 40px;
	box-shadow: 0 24px 60px rgba(24,53,119,.12);
}
.cmr-contact__form .wpforms-container { margin: 0; }
.cmr-contact__map {
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(24,53,119,.16);
	min-height: 470px;
}
.cmr-contact__map iframe { display: block; width: 100%; height: 100%; min-height: 470px; border: 0; }

/* Contact-details row — 3-up cards, sky-tinted band. */
.cmr-contact__details { background: #f6f8fb; padding: 80px 0 88px; }
.cmr-contact__details-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.cmr-contact__detail {
	background: #fff;
	border-radius: 18px;
	padding: 34px 28px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(24,53,119,.08);
}
.cmr-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px; height: 58px;
	margin: 0 0 16px;
	border-radius: 50%;
	background: var(--sky);
	color: var(--navy-deep);
}
.cmr-contact__detail-title { font: 700 18px/1.2 'Montserrat', sans-serif; color: var(--navy); margin: 0 0 10px; }
.cmr-contact__detail-text { font: 400 16px/1.6 'Inter', sans-serif; color: #3a4450; margin: 0; }
.cmr-contact__detail-text a { color: var(--blue); text-decoration: none; }
.cmr-contact__detail-text a:hover { text-decoration: underline; }

@media (max-width: 900px) {
	.cmr-contact__row { grid-template-columns: 1fr; gap: 32px; }
	.cmr-contact__map { min-height: 300px; }
	.cmr-contact__map iframe { min-height: 300px; height: 300px; }
	.cmr-contact__details-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.cmr-contact__main { padding: 56px 0 64px; }
	.cmr-contact__form { padding: 26px 22px 30px; }
	.cmr-contact__details { padding: 56px 0 64px; }
}

/* ==========================================================================
   LEGAL PAGES  (Terms & Conditions, Privacy Policy, Customer Services,
   Disclaimer) — shared navy hero + long-form .cmr-legal prose treatment.
   ========================================================================== */

/* hero — matches About / Service / Contact */
/* prose band */
.cmr-legal { padding: 72px 0 88px; background: #fff; }
.cmr-legal__prose { max-width: 820px; margin: 0 auto; color: #34404e; font-size: 16.5px; line-height: 1.75; }

.cmr-legal__prose p { margin: 0 0 18px; }
.cmr-legal__prose strong { color: var(--ink); }
.cmr-legal__prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.cmr-legal__prose a:hover { color: var(--navy); }

.cmr-legal__prose h2 {
	font: 700 clamp(21px, 2.4vw, 26px)/1.25 'Montserrat', sans-serif;
	color: var(--navy);
	margin: 44px 0 16px;
	padding-top: 8px;
	scroll-margin-top: 100px;
}
.cmr-legal__prose h3 {
	font: 700 18px/1.3 'Montserrat', sans-serif;
	color: var(--navy-deep);
	margin: 28px 0 12px;
	scroll-margin-top: 100px;
}
.cmr-legal__prose > h2:first-of-type { margin-top: 28px; }

.cmr-legal__prose ul,
.cmr-legal__prose ol { margin: 0 0 18px; padding-left: 24px; }
.cmr-legal__prose li { margin: 0 0 10px; }
.cmr-legal__list--roman { list-style: lower-roman; }

/* meta + kicker */
.cmr-legal__kicker {
	font: 600 13px/1 'Inter', sans-serif;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--blue); margin: 0 0 8px !important;
}
.cmr-legal__meta { font: 600 14px/1.5 'Inter', sans-serif; color: var(--grey); margin: 0 0 28px !important; }
.cmr-legal__address { font-style: normal; }

/* "In Short" lead-ins on Privacy sections */
.cmr-legal__inshort {
	background: var(--sky);
	border-left: 4px solid var(--blue);
	border-radius: 0 8px 8px 0;
	padding: 12px 18px;
	margin: 0 0 18px !important;
	font-size: 15.5px;
}
.cmr-legal__inshort strong { color: var(--navy); }

/* table of contents (Privacy) */
.cmr-legal__toc {
	background: #f5f8fc;
	border: 1px solid #e1eaf5;
	border-radius: 12px;
	padding: 22px 28px 22px 46px;
	margin: 0 0 12px;
}
.cmr-legal__toc li { margin: 0 0 8px; }
.cmr-legal__toc a { color: var(--blue); text-decoration: none; }
.cmr-legal__toc a:hover { color: var(--navy); text-decoration: underline; }

/* placeholder card (Customer Services, Disclaimer) */
.cmr-legal__placeholder {
	max-width: 640px; margin: 0 auto; text-align: center;
	background: #f5f8fc;
	border: 1px solid #e1eaf5;
	border-radius: 16px;
	padding: 54px 36px 48px;
}
.cmr-legal__placeholder-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; margin: 0 0 20px;
	border-radius: 50%; background: var(--sky); color: var(--navy-deep);
}
.cmr-legal__placeholder-lead { font: 700 20px/1.35 'Montserrat', sans-serif; color: var(--navy); margin: 0 0 12px; }
.cmr-legal__placeholder-note { font-size: 16px; color: var(--grey); margin: 0; }
.cmr-legal__placeholder-note a { color: var(--blue); }

@media (max-width: 768px) {
	.cmr-legal { padding: 52px 0 64px; }
	.cmr-legal__prose { font-size: 16px; }
	.cmr-legal__toc { padding: 18px 20px 18px 38px; }
	.cmr-legal__placeholder { padding: 40px 24px 36px; }
}

/* ==========================================================================
   GALLERY PAGE  (page-gallery.php — Build 16)
   Navy hero band (mirrors About) -> white body with a service filter bar and a
   3-up tile grid (mirrors .cmr-service__grid metrics: gap 24, radius 18,
   aspect 4/3, object-fit cover, 1-col at <=900px). Click-to-zoom image lightbox
   (no library, no video). Replaces the EA filterable-gallery widget; reuses the
   existing tokens — only the filter bar, tile caption and lightbox are new.
   ========================================================================== */
.cmr-gallery__subhead { margin: 16px 0 0; color: #cfe0f3; font: 400 17px/1.5 'Inter', sans-serif; }

.cmr-gallery__body { background: #fff; padding: 72px 0 92px; }

/* Filter bar — pill buttons in the design-system blues. */
.cmr-gallery__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 44px;
}
.cmr-gallery__filter {
	font: 600 14px/1 'Inter', sans-serif;
	color: var(--blue);
	background: #fff;
	border: 0;
	box-shadow: inset 0 0 0 1.5px var(--blue);
	border-radius: 30px;
	padding: 11px 22px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cmr-gallery__filter:hover { background: var(--sky); }
.cmr-gallery__filter.is-active {
	background: var(--blue);
	color: #fff;
	box-shadow: 0 8px 20px rgba(26,80,153,.28);
}
.cmr-gallery__filter:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Tile grid — same metrics as .cmr-service__grid. */
.cmr-gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.cmr-gallery__cell { margin: 0; }
.cmr-gallery__cell[hidden] { display: none; }

.cmr-gallery__tile {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	margin: 0;
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	cursor: zoom-in;
	box-shadow: 0 18px 44px rgba(24,53,119,.14);
	transition: transform .15s ease, box-shadow .15s ease;
	text-align: left;
}
.cmr-gallery__tile:hover { transform: translateY(-3px); box-shadow: 0 24px 56px rgba(24,53,119,.2); }
.cmr-gallery__tile:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.cmr-gallery__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.cmr-gallery__caption {
	display: block;
	font: 600 15px/1.4 'Inter', sans-serif;
	color: var(--navy);
	padding: 14px 16px 16px;
}

/* Lightbox — image only. */
.cmr-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: rgba(12,24,52,.88);
}
.cmr-lightbox[hidden] { display: none; }
.cmr-lightbox__figure {
	margin: 0;
	max-width: min(1100px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.cmr-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 80vh;
	width: auto;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.cmr-lightbox__caption {
	margin-top: 16px;
	color: #fff;
	font: 600 16px/1.4 'Inter', sans-serif;
	text-align: center;
}
.cmr-lightbox__close {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.12);
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}
.cmr-lightbox__close:hover { background: rgba(255,255,255,.26); }
.cmr-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Lock background scroll while the lightbox is open. */
body.cmr-lightbox-open { overflow: hidden; }

@media (max-width: 900px) {
	.cmr-gallery__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
	.cmr-gallery__body { padding: 52px 0 68px; }
	.cmr-gallery__filters { gap: 8px; margin-bottom: 32px; }
	.cmr-gallery__filter { padding: 9px 16px; font-size: 13px; }
}
@media (max-width: 560px) {
	.cmr-gallery__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TESTIMONIALS PAGE  (page-testimonials.php — migrated off Elementor)
   Light-background responsive card grid (3 -> 2 -> 1 cols), shared visual
   language with the Gallery tiles / About cards. Distinct from the DARK
   homepage carousel (.cmr-testi / .cmr-quote__*), which is left untouched.
   Data: cmr_get_testimonials(). No images, no JS.
   ========================================================================== */
.cmr-testimonials__body { background: #fff; padding: 72px 0 92px; }

.cmr-testimonials__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.cmr-testimonial-card { margin: 0; display: flex; }
.cmr-testimonial-card__inner {
	position: relative;
	margin: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	border-radius: 18px;
	padding: 30px 28px 28px;
	box-shadow: 0 18px 44px rgba(24,53,119,.14);
	transition: transform .15s ease, box-shadow .15s ease;
}
.cmr-testimonial-card:hover .cmr-testimonial-card__inner {
	transform: translateY(-3px);
	box-shadow: 0 24px 56px rgba(24,53,119,.2);
}

.cmr-testimonial-card__mark {
	display: block;
	font: 800 64px/0.6 'Montserrat', sans-serif;
	color: var(--blue-light);
	margin: 0 0 8px;
}
.cmr-testimonial-card__quote {
	margin: 0 0 22px;
	font: 500 17px/1.6 'Inter', sans-serif;
	color: var(--navy);
	flex: 1 1 auto;
}
.cmr-testimonial-card__cite {
	border-top: 1.5px solid var(--sky);
	padding-top: 16px;
}
.cmr-testimonial-card__name {
	display: block;
	font: 700 17px/1.3 'Montserrat', sans-serif;
	color: var(--navy);
}
.cmr-testimonial-card__role {
	display: block;
	margin-top: 4px;
	font: 400 14px/1.4 'Inter', sans-serif;
	color: var(--blue);
}

/* Placeholder cards — visibly not-real until Simon supplies copy. */
.cmr-testimonial-card.is-placeholder .cmr-testimonial-card__inner {
	background: #f6f9fd;
	box-shadow: none;
	border: 1.5px dashed #b9cbe4;
}
.cmr-testimonial-card.is-placeholder .cmr-testimonial-card__quote,
.cmr-testimonial-card.is-placeholder .cmr-testimonial-card__name,
.cmr-testimonial-card.is-placeholder .cmr-testimonial-card__role {
	color: #8aa0bf;
}
.cmr-testimonial-card.is-placeholder .cmr-testimonial-card__mark { color: #c4d4e8; }
.cmr-testimonial-card.is-placeholder:hover .cmr-testimonial-card__inner { transform: none; box-shadow: none; }
.cmr-testimonial-card__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	font: 600 11px/1 'Inter', sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: #b9cbe4;
	border-radius: 20px;
	padding: 5px 10px;
}

@media (max-width: 900px) {
	.cmr-testimonials__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
	.cmr-testimonials__body { padding: 52px 0 68px; }
}
@media (max-width: 560px) {
	.cmr-testimonials__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   WEB STORE / BRANDS  (page-web-store.php index + templates/brand.php — Build 21)
   Navy hero band (mirrors About/Service/Gallery/Testimonials) -> white body
   with a brand-card grid (index) or a product-card grid (brand page). Cards
   mirror the .cmr-service__grid / testimonial-card metrics (gap 24, radius 18,
   3-up -> 2-up @900 -> 1-up @560). Garmin / FNM fall back to a navy name-plate
   (same treatment as the homepage partner plates). Placeholder copy is flagged
   with a reusable "Simon to replace" pill; product cards (all placeholder) get
   the dashed treatment used on placeholder testimonials.
   ========================================================================== */

.cmr-brands__body,
.cmr-brand__body { background: #fff; padding: 72px 0 92px; }

/* Reusable placeholder pill ("Simon to replace"). */
.cmr-ph-pill {
	display: inline-block;
	font: 600 11px/1 'Inter', sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: #b9cbe4;
	border-radius: 20px;
	padding: 5px 10px;
	vertical-align: middle;
}

/* --- Index: intro + brand-card grid --- */
.cmr-brands__intro {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
	font: 400 18px/1.7 'Inter', sans-serif;
	color: #3a4450;
}
.cmr-brands__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.cmr-brand-card { margin: 0; display: flex; }
.cmr-brand-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(24,53,119,.14);
	transition: transform .15s ease, box-shadow .15s ease;
}
.cmr-brand-card:hover .cmr-brand-card__inner {
	transform: translateY(-3px);
	box-shadow: 0 24px 56px rgba(24,53,119,.2);
}
.cmr-brand-card__media,
.cmr-brand-card__plate { display: block; aspect-ratio: 16 / 10; }
.cmr-brand-card__media { overflow: hidden; background: #eef2f8; }
.cmr-brand-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmr-brand-card__plate { background: var(--grad); display: flex; align-items: center; justify-content: center; }
.cmr-brand-card__plate span { font: 700 24px/1 'Montserrat', sans-serif; letter-spacing: .04em; color: #fff; text-align: center; padding: 0 16px; }
.cmr-brand-card__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.cmr-brand-card__name { font: 700 21px/1.2 'Montserrat', sans-serif; color: var(--navy); margin: 0 0 8px; }
.cmr-brand-card__blurb { font: 400 14px/1.6 'Inter', sans-serif; color: var(--grey); margin: 0 0 18px; flex: 1; }
.cmr-brand-card__cta { align-self: flex-start; }

/* --- Brand page: intro + product-card grid --- */
.cmr-brand__intro { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.cmr-brand__intro-h { font: 700 26px/1.2 'Montserrat', sans-serif; color: var(--navy); margin: 0 0 14px; }
.cmr-brand__intro-p { font: 400 17px/1.7 'Inter', sans-serif; color: #3a4450; margin: 0; }
.cmr-brand__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.cmr-product-card { margin: 0; display: flex; }
.cmr-product-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #f6f9fd;
	border: 1.5px dashed #b9cbe4;
	border-radius: 18px;
	overflow: hidden;
}
.cmr-product-card__media,
.cmr-product-card__plate { display: block; aspect-ratio: 4 / 3; }
.cmr-product-card__media { overflow: hidden; background: #eef2f8; }
.cmr-product-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmr-product-card__plate { background: var(--grad); display: flex; align-items: center; justify-content: center; }
.cmr-product-card__plate span { font: 700 20px/1 'Montserrat', sans-serif; letter-spacing: .04em; color: #fff; text-align: center; padding: 0 16px; }
.cmr-product-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.cmr-product-card__title { font: 700 18px/1.3 'Montserrat', sans-serif; color: var(--navy); margin: 0 0 8px; }
.cmr-product-card__blurb { font: 400 14px/1.6 'Inter', sans-serif; color: #6b7a90; margin: 0 0 18px; flex: 1; }
.cmr-product-card__cta { align-self: flex-start; }

/* Pill placement: anchored on cards, inline within intro copy. */
.cmr-brand-card__inner > .cmr-ph-pill,
.cmr-product-card__inner > .cmr-ph-pill { position: absolute; top: 14px; right: 14px; z-index: 2; }

@media (max-width: 900px) {
	.cmr-brands__grid,
	.cmr-brand__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.cmr-brands__body,
	.cmr-brand__body { padding: 52px 0 68px; }
}
@media (max-width: 560px) {
	.cmr-brands__grid,
	.cmr-brand__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   WATERMAKERS / PRODUCTS  (page-watermakers.php index + templates/product.php — Build 22)
   Reuses the Build 21 brand/product classes (.cmr-brands__hero/__body,
   .cmr-brand__hero/__body/__intro, .cmr-product-card*, .cmr-ph-pill) plus the
   homepage .cmr-story__grid two-column layout for the Watermakers intro. The
   only genuinely-new rule below is the wide aspect-ratio on the Watermakers
   banner image — video-banner.png is ~2.11:1, so the shared .cmr-story__media
   4/3 box would crop it hard. Grids inherit the 3->2->1 @900/560 behaviour from
   the WEB STORE / BRANDS block above.
   ========================================================================== */
.cmr-watermakers__media { aspect-ratio: 1140 / 539; }

@media (max-width: 900px) {
	.cmr-watermakers__media { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   SERVICE PORTAL (Owner) — Build 27
   Scoped under .cml-portal (front-end at /portal/) + a light brand pass on the
   stock WooCommerce My Account page (body.woocommerce-account). Reuses the
   Design-01 :root tokens. Reversible: delete this whole block.
   ========================================================================== */

/* Suppress the theme page-hero on the portal page (the portal renders its own band). */
body.cml-portal-page .cmr-page-hero { display: none; }
body.cml-portal-page .cmr-entry { padding-top: 0; }

.cml-portal { --p-bg: #f6f8fb; max-width: 1180px; margin: 0 auto; color: #33414f; font-size: 15px; line-height: 1.55; }
.cml-portal * { box-sizing: border-box; }

/* greeting band — de-chromed in Build 27.9: plain light greeting (no navy, no
   logo, no wave; brand/label/wave removed from markup in cml-service-portal.php).
   The normal site header now provides the logo + nav. */
.cml-portal-band { position: relative; background: transparent; padding: 4px 0 0; border-radius: 0; }
.cml-portal-band__row { display: flex; align-items: center; justify-content: flex-end; gap: 1em; flex-wrap: wrap; }
.cml-portal-band__right { display: inline-flex; align-items: center; gap: 16px; }
.cml-portal-signout { font: 500 13px/1 'Inter', sans-serif; color: var(--blue) !important; text-decoration: none; }
.cml-portal-signout:hover { color: var(--navy) !important; text-decoration: underline; }
.cml-portal-greeting { font: 700 26px/1.1 'Montserrat', sans-serif; color: var(--navy); margin: 8px 0 0; }
.cml-portal-sub { font: 400 14px/1.5 'Inter', sans-serif; color: var(--grey); margin: 4px 0 0; }

/* vessel selector (in the greeting band) — light pill on white */
.cml-portal-vesselsel { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; background: #fff; box-shadow: inset 0 0 0 1px var(--sky); padding: 8px 12px; border-radius: 30px; }
.cml-portal-vesselsel__lbl { font: 600 12px/1 'Inter', sans-serif; color: var(--grey); letter-spacing: .04em; }
.cml-portal-vesselsel select { font: 500 13px/1 'Inter', sans-serif; border: 0; border-radius: 20px; padding: 8px 12px; background: var(--p-bg); color: var(--navy); cursor: pointer; }

/* shell + nav + main — full rounded card now the band above it is light */
.cml-portal-shell { display: flex; gap: 26px; background: var(--p-bg); padding: 28px 36px 40px; border-radius: 14px; margin-top: 18px; }
.cml-portal-nav { flex: none; width: 210px; display: flex; flex-direction: column; gap: 4px; background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(24,53,119,.08); padding: 8px; height: max-content; }
.cml-portal-navitem { display: block; padding: 12px 14px; border-radius: 10px; font: 500 14px/1.2 'Inter', sans-serif; color: #33414f; text-decoration: none; }
.cml-portal-navitem:hover { background: #f1f5fb; }
.cml-portal-navitem.is-active { background: var(--blue); color: #fff; font-weight: 600; }
.cml-portal-main { flex: 1; min-width: 0; }
/* Build 27.1: panel = one tab's content; give every module uniform rhythm. */
.cml-portal-panel { margin: 0; }
.cml-portal-panel + .cml-portal-panel { margin-top: 26px; }
.cml-portal-h3 { font: 700 18px/1.1 'Montserrat', sans-serif; color: var(--navy); margin: 0 0 16px; }

/* generic cards */
.cml-portal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cml-portal-card { background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(24,53,119,.08); padding: 22px; }
.cml-portal-card__eyebrow { font: 600 11px/1 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin: 0 0 8px; }
.cml-portal-card__title { font: 700 18px/1.25 'Montserrat', sans-serif; color: var(--navy); margin: 0 0 6px; }
.cml-portal-card__meta { font: 400 13px/1.5 'Inter', sans-serif; color: var(--grey); margin: 0; }
.cml-portal-card__next { font: 500 13px/1.4 'Inter', sans-serif; color: #33414f; margin: 16px 0 0; }
.cml-portal-card__nextlbl { display: block; font: 600 11px/1 'Inter', sans-serif; letter-spacing: .04em; color: var(--grey); text-transform: uppercase; margin-bottom: 4px; }

/* progress steps */
.cml-portal-steps { display: flex; list-style: none; margin: 18px 0 0; padding: 0; }
.cml-portal-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.cml-portal-step::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: var(--sky); z-index: 0; }
.cml-portal-step:first-child::before { display: none; }
.cml-portal-step__dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: var(--sky); display: flex; align-items: center; justify-content: center; font: 700 12px/1 'Montserrat', sans-serif; color: var(--blue); }
.cml-portal-step__lbl { font: 600 11px/1.3 'Inter', sans-serif; color: #33414f; margin-top: 7px; max-width: 78px; }
.cml-portal-step.is-done .cml-portal-step__dot { background: var(--blue); color: #fff; }
.cml-portal-step.is-done::before { background: var(--blue); }
.cml-portal-step.is-current .cml-portal-step__dot { background: var(--blue); color: #fff; box-shadow: 0 0 0 4px rgba(26,80,153,.18); }

/* vessels grid */
.cml-portal-vessels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.cml-portal-vessel { background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(24,53,119,.08); overflow: hidden; display: flex; flex-direction: column; }
.cml-portal-vessel__media { aspect-ratio: 16 / 10; background: var(--p-bg); }
.cml-portal-vessel__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cml-portal-vessel__noimg { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg,#eef2f6,#eef2f6 10px,#e4ebf3 10px,#e4ebf3 20px); }
.cml-portal-vessel__body { padding: 18px 20px 22px; }
.cml-portal-vessel__name { font: 700 17px/1.2 'Montserrat', sans-serif; color: var(--navy); margin: 0 0 12px; }

/* spec list */
.cml-portal-spec { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; }
.cml-portal-spec dt { font: 600 12px/1.4 'Inter', sans-serif; color: var(--grey); }
.cml-portal-spec dd { margin: 0; font: 500 13px/1.4 'Inter', sans-serif; color: #33414f; }
.cml-portal-spec--report { margin-top: 14px; }

/* tables (history / invoices) */
.cml-portal-tablewrap { overflow-x: auto; background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(24,53,119,.08); }
.cml-portal-table { width: 100%; border-collapse: collapse; font: 400 14px/1.4 'Inter', sans-serif; }
.cml-portal-table th { text-align: left; font: 600 12px/1 'Inter', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); padding: 16px 18px; border-bottom: 1px solid #eef1f5; }
.cml-portal-table td { padding: 15px 18px; border-bottom: 1px solid #f1f4f8; color: #33414f; }
.cml-portal-table tr:last-child td { border-bottom: 0; }
.cml-portal-link { font: 600 13px/1 'Inter', sans-serif; color: var(--blue); text-decoration: none; }
.cml-portal-link:hover { text-decoration: underline; }

/* reports (expandable) */
.cml-portal-reports { display: flex; flex-direction: column; gap: 12px; }
.cml-portal-report { background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(24,53,119,.08); overflow: hidden; }
.cml-portal-report__head { cursor: pointer; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; list-style: none; }
.cml-portal-report__head::-webkit-details-marker { display: none; }
.cml-portal-report__head::after { content: "▾"; position: absolute; right: 22px; color: var(--grey); }
.cml-portal-report { position: relative; }
.cml-portal-report[open] .cml-portal-report__head::after { transform: rotate(180deg); }
.cml-portal-report__title { font: 700 16px/1.25 'Montserrat', sans-serif; color: var(--navy); }
.cml-portal-report__meta { font: 400 12px/1.4 'Inter', sans-serif; color: var(--grey); }
.cml-portal-report__body { padding: 0 20px 22px; }
.cml-portal-report__findings { font: 400 14px/1.6 'Inter', sans-serif; color: #33414f; }
.cml-portal-report__findings p { margin: 0 0 10px; }
.cml-portal-report__photos { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.cml-portal-report__thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; display: block; }

/* chips */
.cml-portal-chip { display: inline-block; font: 600 12px/1 'Inter', sans-serif; padding: 6px 12px; border-radius: 30px; white-space: nowrap; }
.cml-portal-chip--booked { background: var(--sky); color: var(--blue); }
.cml-portal-chip--onsite { background: #FBEACF; color: #8A5A12; }
.cml-portal-chip--progress { background: #E3ECFB; color: var(--navy-deep); }
.cml-portal-chip--done { background: #DCF0E4; color: #1C6B3F; }
.cml-portal-chip--neutral { background: #eceff1; color: #5a6b77; }

/* pills */
.cml-portal-pill { display: inline-block; background: var(--blue); color: #fff !important; font: 600 13px/1 'Inter', sans-serif; padding: 11px 18px; border-radius: 30px; text-decoration: none; border: 0; cursor: pointer; margin-top: 14px; }
.cml-portal-pill:hover { background: var(--navy); color: #fff !important; }
.cml-portal-pill--sm { padding: 8px 14px; margin: 0; }

/* empty states */
.cml-portal-empty { background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(24,53,119,.08); padding: 30px 26px; text-align: center; }
.cml-portal-empty__h { font: 700 16px/1.3 'Montserrat', sans-serif; color: var(--navy); margin: 0 0 6px; }
.cml-portal-empty__p { font: 400 13px/1.6 'Inter', sans-serif; color: var(--grey); margin: 0 auto; max-width: 460px; }
.cml-portal-fineprint { font: 400 12px/1.5 'Inter', sans-serif; color: var(--grey); margin: 16px 0 0; }
.cml-portal-flag { color: #8A5A12; }

/* gate / no-access card */
.cml-portal-gate { display: flex; justify-content: center; padding: 20px 0 40px; }
.cml-portal-gatecard { background: #fff; border-radius: 18px; box-shadow: 0 8px 30px rgba(24,53,119,.12); padding: 40px; max-width: 460px; text-align: center; }
.cml-portal-gate__h { font: 700 22px/1.25 'Montserrat', sans-serif; color: var(--navy); margin: 0 0 8px; }
.cml-portal-gate__p { font: 400 14px/1.55 'Inter', sans-serif; color: var(--grey); margin: 0 0 8px; }

/* My Account dashboard card (mirrors the buyer-portal store-account card) */
.cml-sp-acct { margin: 0 0 1.5em; }
.cml-sp-acct__card { background: var(--grad); border-radius: 14px; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.cml-sp-acct__h { font: 700 17px/1.2 'Montserrat', sans-serif; color: #fff; margin: 0; }
.cml-sp-acct__p { font: 400 13px/1.5 'Inter', sans-serif; color: #cfe0f2; margin: 5px 0 0; }
.cml-sp-acct__pill { flex: none; display: inline-block; background: #fff; color: var(--navy) !important; font: 600 13px/1 'Inter', sans-serif; padding: 11px 18px; border-radius: 30px; text-decoration: none; }
.cml-sp-acct__pill:hover { background: var(--sky); color: var(--navy) !important; }

/* responsive: sidebar -> top row, tables -> stacked */
@media (max-width: 782px) {
	.cml-portal-band, .cml-portal-shell { padding-left: 18px; padding-right: 18px; }
	.cml-portal-shell { flex-direction: column; gap: 18px; }
	.cml-portal-nav { width: auto; flex-direction: row; overflow-x: auto; gap: 8px; }
	.cml-portal-navitem { flex: none; white-space: nowrap; border-radius: 30px; background: #fff; box-shadow: inset 0 0 0 1px #eef1f5; }
	.cml-portal-navitem.is-active { box-shadow: none; }
	.cml-portal-table thead { display: none; }
	.cml-portal-table tr { display: block; border-bottom: 1px solid #eef1f5; padding: 8px 0; }
	.cml-portal-table td { display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 7px 18px; }
	.cml-portal-table td::before { content: attr(data-label); font: 600 12px/1.4 'Inter', sans-serif; color: var(--grey); }
	.cml-portal-spec { grid-template-columns: 1fr; gap: 2px 0; }
	.cml-portal-spec dt { margin-top: 8px; }
}

/* --------------------------------------------------------------------------
   Light brand pass on the stock WooCommerce My Account page. Additive only —
   recolours links/buttons/active nav to navy (kills the default orange) and
   tidies tables. Does not change Woo layout/markup. Reversible with this block.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   BUILD 27.1 FIX — Woo My Account branded menu.
   Bug fixed: the original broad link recolor used three :not() clauses
   ( a:not(.button):not(.cml-sp-acct__pill):not(.cml-bp-pill) ) which inflate
   specificity to (0,4,2) — that OUTRANKED the active-item rule (0,3,3), so the
   active link text stayed blue on a blue background (invisible "navy-on-navy").
   Resolution: drop the pill :not() clauses (the pills already protect their own
   colour with !important), keeping the broad rule at (0,2,2) so the nav-scoped
   rules below win. Active item is now an explicit white-on-navy pill.
   -------------------------------------------------------------------------- */
/* Broad link recolour — kill the Woo orange. Buttons excluded; pills self-protect. */
body.woocommerce-account a:not(.button) { color: var(--blue); transition: color .15s ease; }
body.woocommerce-account a:not(.button):hover { color: var(--navy); }

/* Account nav as a clean branded card, flush-left to the content column gutter. */
body.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 1.5em; }
body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(24,53,119,.08); }
body.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0 0 2px; border: 0; padding: 0; }
body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { margin-bottom: 0; }
body.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; border-radius: 10px; color: var(--navy); font: 600 14px/1.3 'Inter', sans-serif; text-decoration: none; transition: background .15s ease, color .15s ease; }
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--sky); color: var(--navy); }
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--navy); color: #fff; }

/* Content column rhythm + brand the headings/links. */
body.woocommerce-account .woocommerce-MyAccount-content { padding-left: 4px; }
body.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3 { color: var(--navy); margin: 0 0 .6em; }
body.woocommerce-account .woocommerce-Address { margin-top: 1em; }

/* Buttons -> brand pill. */
body.woocommerce-account .woocommerce-Button,
body.woocommerce-account a.button,
body.woocommerce-account button.button { background: var(--blue); color: #fff; border-radius: 30px; transition: background .15s ease; }
body.woocommerce-account a.button:hover, body.woocommerce-account button.button:hover { background: var(--navy); color: #fff; }

/* Tables. */
body.woocommerce-account table.woocommerce-orders-table th,
body.woocommerce-account table.shop_table th { color: var(--navy); }

/* Two-column rhythm: keep WC's columns but give the gap some air on desktop. */
@media (min-width: 769px) {
	body.woocommerce-account .woocommerce-MyAccount-navigation { width: 24%; }
	body.woocommerce-account .woocommerce-MyAccount-content { width: 72%; }
}

/* ==========================================================================
   HEADER ACCOUNT — Build 27.2 control, restyled to a pill in Build 27.4
   Outlined icon+label pill, a direct child of .cmr-header__inner (sibling of
   brand/nav, so it survives the mobile off-canvas nav collapse). On desktop it
   sits far-right AFTER the nav (past Contact Us) via order:3 + the brand's
   margin-right:auto pushing the nav+pill into a right-hand cluster. The outline
   reads as secondary to the filled Contact Us CTA. Label hides ≤ nav breakpoint
   (icon-only). Reuses Design-01 :root tokens. Reversible: restore .bak-b27.4.
   ========================================================================== */
.cmr-header__brand { margin-right: auto; } /* push nav + account pill into a right cluster */

.cmr-account {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: none;
	order: 3;                   /* far right, after .cmr-nav (past Contact Us) */
	min-height: 40px;
	padding: 8px 16px;
	border-radius: 30px;
	color: var(--blue);
	background: transparent;
	border: 1.5px solid var(--blue);   /* outline → secondary to the filled CTA */
	font: 600 14px/1 'Inter', sans-serif;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cmr-account__icon { display: block; width: 20px; height: 20px; flex: none; }
.cmr-account__label { display: inline-block; white-space: nowrap; }
.cmr-account:hover { background: var(--blue); color: #fff; }
.cmr-account:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
	background: var(--blue);
	color: #fff;
}

/* Mobile: keep the pill visible but icon-only; hamburger sits last. */
@media (max-width: 992px) {
	.cmr-account { order: 2; padding: 9px 11px; }
	.cmr-account__label { display: none; }
	.cmr-nav-toggle { order: 3; }
}

/* ==========================================================================
   LOGIN PAGE  (Build 27.3 — /login/ : login / register / lost password)
   Centred auth card in full chrome, reusing the navy hero + brand tokens.
   Reversible: delete this whole block.
   ========================================================================== */
.cmr-login__main { background: #fff; padding: 84px 0 96px; }
.cmr-login__card {
	max-width: 460px;
	margin: 0 auto;
	background: #fff;
	border-radius: 24px;
	padding: 40px 40px 44px;
	box-shadow: 0 24px 60px rgba(24,53,119,.12);
}

/* State switch tabs */
.cmr-login__tabs {
	display: flex;
	gap: 6px;
	background: #f1f5fb;
	border-radius: 30px;
	padding: 5px;
	margin: 0 0 28px;
}
.cmr-login__tab {
	flex: 1;
	text-align: center;
	font: 600 14px/1 'Inter', sans-serif;
	color: var(--grey);
	text-decoration: none;
	padding: 12px 10px;
	border-radius: 26px;
	transition: background .15s ease, color .15s ease;
}
.cmr-login__tab:hover { color: var(--blue); }
.cmr-login__tab.is-active {
	background: #fff;
	color: var(--navy);
	box-shadow: 0 4px 12px rgba(24,53,119,.12);
}

/* Honeypot (Build 27.4) — off-screen, out of tab order; bots fill it, humans don't. */
.cmr-login__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Inline notices */
.cmr-login__notice {
	font: 500 15px/1.5 'Inter', sans-serif;
	border-radius: 12px;
	padding: 14px 16px;
	margin: 0 0 22px;
}
.cmr-login__notice--error {
	background: #fdecec;
	color: #9b1c1c;
	border: 1px solid #f5c2c2;
}
.cmr-login__notice--success {
	background: #e9f6ee;
	color: #186a3b;
	border: 1px solid #bfe3cd;
}

/* Form fields */
.cmr-login__form { margin: 0; }
.cmr-login__field { margin: 0 0 18px; }
.cmr-login__field label {
	display: block;
	font: 600 14px/1 'Inter', sans-serif;
	color: var(--navy);
	margin: 0 0 8px;
}
.cmr-login__form input[type="text"],
.cmr-login__form input[type="email"],
.cmr-login__form input[type="password"] {
	width: 100%;
	font: 400 16px/1.4 'Inter', sans-serif;
	color: var(--ink);
	padding: 14px 16px;
	min-height: 48px;
	border: 1px solid #d4dde8;
	border-radius: 12px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cmr-login__form input[type="text"]:focus,
.cmr-login__form input[type="email"]:focus,
.cmr-login__form input[type="password"]:focus {
	outline: 0;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(26,80,153,.16);
}

.cmr-login__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 22px;
}
.cmr-login__remember {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 400 14px/1.2 'Inter', sans-serif;
	color: var(--grey);
	cursor: pointer;
}
.cmr-login__remember input { width: 17px; height: 17px; min-height: 0; accent-color: var(--blue); }
.cmr-login__minor { font: 600 14px/1.2 'Inter', sans-serif; color: var(--blue); text-decoration: none; }
.cmr-login__minor:hover { text-decoration: underline; }

.cmr-login__hint {
	font: 400 15px/1.5 'Inter', sans-serif;
	color: var(--grey);
	margin: 0 0 20px;
}

.cmr-login__submit { width: 100%; text-align: center; }

.cmr-login__switch {
	text-align: center;
	font: 400 15px/1.5 'Inter', sans-serif;
	color: var(--grey);
	margin: 22px 0 0;
}
.cmr-login__switch a { font-weight: 600; color: var(--blue); text-decoration: none; }
.cmr-login__switch a:hover { text-decoration: underline; }

/* Password show/hide toggle (Build 27.6). The button ships `hidden`; login.js
   reveals it + adds .is-active (which pads the field so text never sits under it). */
.cml-login__pwwrap { position: relative; display: block; }
.cml-login__pwwrap.is-active input { padding-right: 48px; }
.cml-login__reveal {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--grey);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.cml-login__reveal[hidden] { display: none; }
.cml-login__reveal:hover { color: var(--blue); background: var(--sky); }
.cml-login__reveal:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
	color: var(--blue);
}
.cml-login__reveal-icon { display: block; }

@media (max-width: 768px) {
	.cmr-login__main { padding: 52px 0 64px; }
	.cmr-login__card { padding: 30px 22px 34px; border-radius: 20px; }
	.cmr-login__row { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ==========================================================================
   ACCOUNT PAGE WIDTH (Build 27.5)
   Logged-in account pages (Service Portal, Buyer Portal, WooCommerce My Account)
   felt cramped in the 820px reading column. On those three body classes only,
   let the content fill the site container (.cmr-container ≈1200px, aligned with
   header/footer). The global .cmr-entry reading width (820px) is untouched, so
   text pages (legal/About/service) stay narrow. Mobile gutters are preserved by
   .cmr-container's own padding. Reversible: restore .bak-b27.5.
   ========================================================================== */
body.cml-portal-page .cmr-entry,
body.cml-bp-page .cmr-entry,
body.woocommerce-account .cmr-entry { max-width: none; }

/* Inner wrappers: let them fill .cmr-entry so they line up with the site edges
   instead of re-centring at a slightly narrower width. (Buyer Portal's .cml-bp
   cap is raised in cml-buyer-portal.php's inline styles.) */
body.cml-portal-page .cml-portal { max-width: none; }

/* ==========================================================================
   ACCOUNT CHROME — REVERT TO NORMAL SITE HEADER + PLAIN GREETING (Build 27.9)
   Reverses the Builds 27.7 + 27.8 "standalone full-width" direction: the normal
   marketing header + footer render again on all three account areas (single
   logo = the header's), and the greeting bands are de-chromed to a plain light
   greeting (de-navy rules live on the .cml-portal-* selectors below and in
   cml-buyer-portal.php's inline CSS; the My Account band mu-plugin is deleted).
   Content stays at the normal site width via the Build 27.5 widen rules above.
   Only the page-title hero stays suppressed on the buyer portal + My Account so
   the greeting / WC "Hello {name}" is the page intro (no duplicate H1) — the
   /portal/ hero suppression already lives in the Build 27 block above (~l.1094).
   Reversible: restore .bak-b27.9.
   ========================================================================== */
body.cml-bp-page .cmr-page-hero,
body.woocommerce-account .cmr-page-hero { display: none; }
body.cml-bp-page .cmr-entry,
body.woocommerce-account .cmr-entry { padding-top: 0; }

/* ==========================================================================
   SERVICE PORTAL (Engineer) — Build 28
   iPad-first engineer view at /portal/ (role-dispatched). Scoped under .cml-eng
   and body.cml-eng-page. Reuses the owner view's chip/step/empty classes
   (.cml-portal-chip--*, .cml-portal-step*, .cml-portal-empty*) for consistency,
   so only the .cml-eng* layout lives here. Large touch targets throughout.
   Reversible: delete this whole block, restore theme.css.bak-b28.
   ========================================================================== */

/* Suppress the theme page-hero on the engineer page (band renders its own greeting). */
body.cml-eng-page .cmr-page-hero { display: none; }
body.cml-eng-page .cmr-entry { padding-top: 0; }

.cml-eng { --eng-bg: #f6f8fb; --eng-card: #fff; max-width: 1000px; margin: 0 auto; color: #33414f; font-size: 16px; line-height: 1.55; }
.cml-eng * { box-sizing: border-box; }

/* greeting band */
.cml-eng-band { padding: 4px 0 0; }
.cml-eng-band__row { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; }
.cml-eng-band__label { font: 600 12px/1 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.cml-eng-signout { font: 600 14px/1 'Inter', sans-serif; color: var(--blue) !important; text-decoration: none; padding: 10px 4px; min-height: 44px; display: inline-flex; align-items: center; }
.cml-eng-signout:hover { color: var(--navy) !important; text-decoration: underline; }
.cml-eng-greeting { font: 700 28px/1.1 'Montserrat', sans-serif; color: var(--navy); margin: 10px 0 0; }
.cml-eng-sub { font: 400 15px/1.5 'Inter', sans-serif; color: var(--grey); margin: 4px 0 0; }

/* shell */
.cml-eng-shell { background: var(--eng-bg); padding: 22px 22px 32px; border-radius: 16px; margin-top: 18px; }

/* notices */
.cml-eng-notice { border-radius: 12px; padding: 16px 18px; font: 500 15px/1.45 'Inter', sans-serif; margin: 0 0 18px; }
.cml-eng-notice--ok { background: #DCF0E4; color: #1C6B3F; }
.cml-eng-notice--err { background: #FBE3E3; color: #9A2A2A; }

/* panels */
.cml-eng-panel { background: transparent; margin: 0; }
.cml-eng-panel + .cml-eng-panel { margin-top: 22px; }
.cml-eng-h3 { font: 700 19px/1.15 'Montserrat', sans-serif; color: var(--navy); margin: 0 0 14px; }
.cml-eng-h2 { font: 700 23px/1.18 'Montserrat', sans-serif; color: var(--navy); margin: 4px 0 10px; }

/* job cards (large touch) */
.cml-eng-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.cml-eng-job { background: var(--eng-card); border-radius: 16px; box-shadow: 0 1px 3px rgba(24,53,119,.10); padding: 22px; display: flex; flex-direction: column; }
.cml-eng-job__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.cml-eng-job__vessel { font: 600 12px/1 'Inter', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); margin: 0; }
.cml-eng-job__title { font: 700 19px/1.25 'Montserrat', sans-serif; color: var(--navy); margin: 0 0 8px; }
.cml-eng-job__meta { font: 400 14px/1.5 'Inter', sans-serif; color: var(--grey); margin: 0 0 16px; }
.cml-eng-jobs--done { margin-top: 14px; }
.cml-eng-jobs--done .cml-eng-job { opacity: .82; }

/* completed (de-emphasised, collapsible) */
.cml-eng-done { margin-top: 22px; background: var(--eng-card); border-radius: 14px; box-shadow: 0 1px 3px rgba(24,53,119,.08); overflow: hidden; }
.cml-eng-done__sum { cursor: pointer; padding: 16px 20px; font: 600 15px/1 'Inter', sans-serif; color: var(--navy); min-height: 52px; display: flex; align-items: center; list-style: none; }
.cml-eng-done__sum::-webkit-details-marker { display: none; }
.cml-eng-done[open] .cml-eng-done__sum { border-bottom: 1px solid #eef1f5; }
.cml-eng-done .cml-eng-jobs { padding: 18px 20px 22px; }

/* back link */
.cml-eng-back { margin: 0 0 14px; }
.cml-eng-back a { font: 600 15px/1 'Inter', sans-serif; color: var(--blue) !important; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.cml-eng-back a:hover { color: var(--navy) !important; text-decoration: underline; }

/* detail panel surface */
.cml-eng-panel { }
.cml-eng-job__top + .cml-eng-h2 { margin-top: 2px; }
.cml-eng .cml-eng-panel > .cml-portal-steps { margin-top: 20px; }

/* status control — big buttons */
.cml-eng-statusctl { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.cml-eng-statusctl__f { margin: 0; }
.cml-eng-statusctl__done { font: 600 15px/1.4 'Inter', sans-serif; color: #1C6B3F; margin: 18px 0 0; }

/* buttons (min 48px tap target) */
.cml-eng-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 22px; border-radius: 30px; font: 600 15px/1 'Inter', sans-serif; text-decoration: none; border: 0; cursor: pointer; transition: background .15s ease, color .15s ease; }
.cml-eng-btn--primary { background: var(--blue); color: #fff !important; }
.cml-eng-btn--primary:hover { background: var(--navy); color: #fff !important; }
.cml-eng-btn--ghost { background: #fff; color: var(--blue) !important; box-shadow: inset 0 0 0 1.5px var(--sky); margin-top: auto; }
.cml-eng-btn--ghost:hover { background: #f1f5fb; color: var(--navy) !important; }
.cml-eng-btn--undo { background: #fff; color: var(--grey) !important; box-shadow: inset 0 0 0 1.5px #e4e9ef; }
.cml-eng-btn--undo:hover { background: #f4f6f9; color: var(--navy) !important; }
.cml-eng-btn--lg { min-height: 54px; padding: 16px 26px; font-size: 16px; }
.cml-eng-btn--block { width: 100%; }
.cml-eng-btn.is-sending, .cml-eng-btn:disabled { opacity: .6; cursor: default; }

/* filed reports list (read-only) */
.cml-eng-replist { display: flex; flex-direction: column; gap: 12px; }
.cml-eng-rep { background: var(--eng-card); border-radius: 14px; box-shadow: 0 1px 3px rgba(24,53,119,.08); padding: 18px 20px; }
.cml-eng-rep__h { font: 700 16px/1.25 'Montserrat', sans-serif; color: var(--navy); margin: 0; }
.cml-eng-rep__d { font: 400 13px/1.4 'Inter', sans-serif; color: var(--grey); margin: 4px 0 0; }
.cml-eng-rep__ph { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.cml-eng-rep__thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; display: block; }

/* report form */
.cml-eng-form { background: var(--eng-card); border-radius: 16px; box-shadow: 0 1px 3px rgba(24,53,119,.10); padding: 24px; display: flex; flex-direction: column; gap: 0; }
.cml-eng-field { display: flex; flex-direction: column; gap: 7px; margin: 0 0 18px; }
.cml-eng-field label { font: 600 14px/1.2 'Inter', sans-serif; color: var(--navy); }
.cml-eng-field__hint { font: 400 13px/1.4 'Inter', sans-serif; color: var(--grey); }
.cml-eng-field input[type="text"],
.cml-eng-field input[type="date"],
.cml-eng-field select,
.cml-eng-field textarea { width: 100%; font: 400 16px/1.4 'Inter', sans-serif; color: var(--ink); background: #fff; border: 1.5px solid #dbe3ec; border-radius: 12px; padding: 14px 14px; min-height: 50px; }
.cml-eng-field textarea { min-height: 110px; resize: vertical; }
.cml-eng-field input:focus,
.cml-eng-field select:focus,
.cml-eng-field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,80,153,.14); }
.cml-eng-field input[type="file"] { font: 400 14px/1.4 'Inter', sans-serif; padding: 12px; background: var(--eng-bg); border: 1.5px dashed #c6d2e0; }

/* photo preview tiles (JS) */
.cml-eng-preview { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.cml-eng-preview__img { width: 88px; height: 88px; object-fit: cover; border-radius: 10px; display: block; box-shadow: 0 1px 3px rgba(24,53,119,.12); }

/* phone */
@media (max-width: 600px) {
	.cml-eng { font-size: 16px; }
	.cml-eng-shell { padding: 18px 14px 26px; }
	.cml-eng-jobs { grid-template-columns: 1fr; }
	.cml-eng-greeting { font-size: 25px; }
	.cml-eng-statusctl { flex-direction: column; }
	.cml-eng-statusctl .cml-eng-btn { width: 100%; }
	.cml-eng-form { padding: 18px; }
}

/* ==========================================================================
   WEB STORE CHOOSER  (page-web-store.php — Build 29)
   Board B: a bright-coastal landing that toggles between two stores —
   Davy Jones Locker (pre-loved → /store/) and Harbour Supply (new goods,
   "coming soon"). The segmented toggle is progressive enhancement: it is
   hidden by default and BOTH panels render stacked; webstore.js adds
   `.cmr-ws--js`, which reveals the toggle and collapses panels to one at a
   time. Palette: navy #183577 / blue #1A5099 / light #4E8ECB / sky #DBE8F6.
   Reversible: delete this block, restore theme.css.bak-b29.
   ========================================================================== */

/* hero now rendered by template-parts/page-hero.php — see .cmr-inner-hero--store */

/* --- body --- */
.cmr-ws__body { background: #fff; padding: 38px 0 80px; }

/* --- segmented toggle: hidden (no-JS), revealed by the .cmr-ws--js flag --- */
.cmr-ws__toggle { display: none; }
.cmr-ws--js .cmr-ws__toggle {
	display: flex;
	width: fit-content;
	margin: 0 auto 26px;
	background: #eef2f8;
	border-radius: 34px;
	padding: 5px;
}
.cmr-ws__seg {
	font: 700 14px/1 'Inter', sans-serif;
	padding: 14px 28px;
	border: 0;
	background: transparent;
	color: #33414f;
	border-radius: 30px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.cmr-ws__seg.is-active {
	background: var(--navy);
	color: #fff;
	box-shadow: 0 6px 16px rgba(24,53,119,.28);
}
.cmr-ws__seg:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.cmr-ws__seg-pill {
	font: 600 9px/1 'Inter', sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 20px;
	background: var(--sky);
	color: var(--blue);
}
.cmr-ws__seg.is-active .cmr-ws__seg-pill { background: rgba(255,255,255,.2); color: #fff; }

/* --- panels --- */
.cmr-ws-panel {
	position: relative;
	margin: 26px 0 0;
	border-radius: 28px;
	overflow: hidden;
	padding: 50px 54px;
}
.cmr-ws-panel + .cmr-ws-panel { margin-top: 22px; } /* no-JS: both stacked + separated */
.cmr-ws-panel--davy {
	background: linear-gradient(150deg, #ffffff, var(--sky));
	box-shadow: inset 0 0 0 1px rgba(78,142,203,.25);
}
.cmr-ws-panel--harbour {
	background: linear-gradient(150deg, #ffffff, #f3f8fe);
	box-shadow: inset 0 0 0 1px #e3ecf7;
}
/* JS mode: only the active panel shows */
.cmr-ws--js .cmr-ws-panel { display: none; }
.cmr-ws--js .cmr-ws-panel.is-active { display: block; }

.cmr-ws-panel__grid {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 48px;
	align-items: center;
}
.cmr-ws-panel--harbour .cmr-ws-panel__grid { align-items: flex-start; }
.cmr-ws-panel__main { flex: 1; min-width: 0; }

/* chips */
.cmr-ws-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 700 10px/1 'Montserrat', sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	border-radius: 9px;
	padding: 9px 16px;
	margin-bottom: 22px;
}
.cmr-ws-chip--salvage { background: var(--navy); color: var(--sky); }
.cmr-ws-chip--soon {
	background: var(--sky);
	color: var(--blue);
	border-radius: 30px;
	letter-spacing: .04em;
	font-family: 'Inter', sans-serif;
}
.cmr-ws-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-light); }

.cmr-ws-panel__title { font: 700 clamp(28px, 3.6vw, 38px)/1.08 'Montserrat', sans-serif; color: var(--navy); margin: 0; }
.cmr-ws-panel__desc { font: 400 17px/1.6 'Inter', sans-serif; color: #46586f; margin: 16px 0 26px; max-width: 560px; }

/* category chips (Davy) */
.cmr-ws-cats { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 32px; }
.cmr-ws-cat {
	font: 600 13px/1 'Inter', sans-serif;
	color: var(--blue);
	background: rgba(78,142,203,.14);
	box-shadow: inset 0 0 0 1px rgba(78,142,203,.4);
	padding: 9px 16px;
	border-radius: 30px;
}

/* live product teaser (Davy) */
.cmr-ws-teaser {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: none;
	width: 380px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.cmr-ws-teaser__item { margin: 0; }
.cmr-ws-teaser__link {
	display: block;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(24,53,119,.1);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.cmr-ws-teaser__link:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(24,53,119,.18); }
.cmr-ws-teaser__media { display: block; aspect-ratio: 4 / 3; background: #eaf1fb; overflow: hidden; }
.cmr-ws-teaser__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmr-ws-teaser__body { display: block; padding: 11px 13px 13px; }
.cmr-ws-teaser__name { display: block; font: 700 12px/1.25 'Montserrat', sans-serif; color: var(--navy); }
.cmr-ws-teaser__price { display: block; font: 600 11px/1 'Inter', sans-serif; color: var(--blue-light); margin-top: 6px; }

/* Harbour actions + disabled "Browse new goods" */
.cmr-ws-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cmr-ws-btn--disabled {
	background: #fff;
	color: #9aa3ad;
	box-shadow: inset 0 0 0 1.5px #cdd7e6;
	cursor: not-allowed;
}
.cmr-ws-btn--disabled:hover { transform: none; box-shadow: inset 0 0 0 1.5px #cdd7e6; }
.cmr-ws-panel__note { font: 400 13px/1.5 'Inter', sans-serif; color: var(--grey); margin: 16px 0 0; }
.cmr-ws-panel__note a { color: var(--blue); font-weight: 600; }

/* Harbour brand list (placeholder name-plates) */
.cmr-ws-brands {
	flex: none;
	width: 300px;
	background: #fff;
	border-radius: 22px;
	box-shadow: 0 14px 40px rgba(24,53,119,.1);
	padding: 24px 26px;
}
.cmr-ws-brands__head {
	font: 700 12px/1 'Inter', sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--blue);
	margin: 0 0 16px;
}
.cmr-ws-brands__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cmr-ws-brands__item {
	height: 48px;
	border-radius: 13px;
	box-shadow: inset 0 0 0 1px #e3ecf7;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 16px/1 'Montserrat', sans-serif;
	letter-spacing: .03em;
	color: #9aacc6;
}

/* responsive */
@media (max-width: 900px) {
	.cmr-ws-panel__grid { flex-direction: column; align-items: stretch; }
	.cmr-ws-teaser,
	.cmr-ws-brands { width: 100%; }
}
@media (max-width: 768px) {
	.cmr-ws__body { padding: 28px 0 60px; }
	.cmr-ws-panel { padding: 30px 24px; border-radius: 22px; }
	.cmr-ws--js .cmr-ws__toggle { width: 100%; } /* full-width pills */
	.cmr-ws__seg { flex: 1; justify-content: center; padding: 14px 12px; }
}
@media (max-width: 560px) {
	.cmr-ws-teaser { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOOTER REDESIGN (Build 30) — Option B: wave + floating CTA
   Scoped, later-cascade overrides on top of the original .cmr-footer* block
   (lines ~322-342). Reversible: delete this whole block + restore .bak-b30.
   --------------------------------------------------------------------------
   Layout note: the wave is filled with the footer body colour and positioned
   ABOVE the footer (bottom:100%) with transparent space above the curve, so it
   reads as a wavy navy top edge against WHATEVER section precedes it (robust —
   does not assume a white page behind it like the mock's #fff fill did).
   ========================================================================== */

/* --- Pre-footer floating CTA card (gated off /contact/ in footer.php) ----- */
.cmr-prefooter {
	position: relative;
	z-index: 3;                 /* lift the card above the footer wave below it */
	padding: 56px var(--gutter) 0;
	margin-bottom: -56px;       /* pull the footer up so the card's lower half floats over the wave */
}
.cmr-prefooter__card {
	max-width: 900px;
	margin: 0 auto;
	background: linear-gradient(120deg, #223D7C, #1A5099);
	border-radius: 20px;
	box-shadow: 0 30px 60px rgba(8, 18, 45, .5);
	padding: 34px 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
}
.cmr-prefooter__text { min-width: 0; }
.cmr-prefooter__title { font: 700 27px/1.2 'Montserrat', sans-serif; color: #fff; margin: 0; }
.cmr-prefooter__sub { font: 400 16px/1.5 'Inter', sans-serif; color: #DBE8F6; margin: 8px 0 0; }
.cmr-prefooter__btn {
	flex: none;
	background: #fff;
	color: #1A5099;
	font: 600 16px/1 'Inter', sans-serif;
	padding: 17px 36px;
	border-radius: 30px;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
	transition: background .2s ease, color .2s ease;
}
.cmr-prefooter__btn:hover,
.cmr-prefooter__btn:focus-visible { background: #DBE8F6; color: #1A5099; }

/* --- Footer body: two-tone + restyled wave -------------------------------- */
.cmr-footer { background: #1d3a73; padding: 96px 0 0; }   /* lighter link tone; bottom bar sits flush */
.cmr-footer__wave {
	top: auto;
	bottom: 100%;               /* sit ABOVE the footer's flat top edge */
	height: 96px;
}
.cmr-footer__cols {
	grid-template-columns: 1.7fr 1fr 1.2fr 1fr;
	gap: 48px;
	padding-bottom: 52px;
	border-bottom: none;        /* two-tone bar replaces the old divider line */
}

/* Headings: Montserrat + blue-light underline bar */
.cmr-footer__heading {
	font-family: 'Montserrat', sans-serif;
	letter-spacing: .14em;
	margin: 0;
}
.cmr-footer__heading::after {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: var(--blue-light);
	margin: 12px 0 20px;
}

/* Lift link / text contrast on the lighter navy */
.cmr-footer__blurb,
.cmr-footer__menu a,
.cmr-footer__contact a,
.cmr-footer__contact li { color: #C2D2EC; }
.cmr-footer__menu a:hover,
.cmr-footer__contact a:hover { color: #fff; }

/* Contact column icons (mail / phone / pin) */
.cmr-footer__contact li { display: flex; gap: 11px; align-items: flex-start; }
.cmr-footer__ci { flex: none; margin-top: 1px; color: var(--blue-light); line-height: 0; }
.cmr-footer__ci svg { display: block; }

/* Full-width darker bottom bar */
.cmr-footer__bottom {
	background: #0f2147;
	padding: 22px var(--gutter);
	text-align: center;
}
.cmr-footer__bottom-inner {
	max-width: var(--maxw);
	margin: 0 auto;
	font: 400 13px/1.5 'Inter', sans-serif;
	color: #8fa1c2;
}

/* --- Responsive (re-declared after the base overrides above so they win) --- */
@media (max-width: 1024px) {
	.cmr-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
	.cmr-footer { padding-bottom: 0; }
	.cmr-footer__cols { grid-template-columns: 1fr; }
	.cmr-footer__wave { height: 56px; }

	.cmr-prefooter { padding-top: 40px; margin-bottom: -44px; }
	.cmr-prefooter__card {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		gap: 18px;
		padding: 26px 24px;
		border-radius: 18px;
	}
	.cmr-prefooter__title { font-size: 21px; }
	.cmr-prefooter__sub { font-size: 14px; }
	.cmr-prefooter__btn { align-self: center; padding: 15px 34px; font-size: 15px; }

	/* keep the contact pin row left-aligned even though the CTA centres */
	.cmr-footer__contact li { text-align: left; }
}

/* ==========================================================================
   Build 45 — Coverage page (/coverage/)
   Interactive UK + Europe map. Ported from CML_Coverage_Page_Mockup.html and
   scoped under .cmr-coverage so nothing leaks site-wide. Reuses the root
   brand tokens (theme.css:7-21). Hero comes from template-parts/page-hero.php;
   section heads / buttons reuse the existing .cmr-* design-system classes.
   ========================================================================== */
.cmr-coverage__main { padding: 72px 0; }
.cmr-coverage__lead { color: var(--grey); max-width: 640px; margin: 12px auto 0; }

/* Two-column layout: map on the left, region cards + detail on the right. */
.cmr-coverage .cov-grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 32px;
	align-items: start;
}
.cmr-coverage .map-card {
	background: #fff;
	border: 1px solid #e4e9f1;
	border-radius: 14px;
	padding: 18px;
	box-shadow: 0 8px 30px rgba(24, 53, 119, .06);
}
.cmr-coverage .map-card svg { width: 100%; height: auto; display: block; }

/* Map shapes — keep the non-scaling stroke + thin outline from the mockup. */
.cmr-coverage .cov-land {
	fill: var(--navy);
	stroke: #fff;
	stroke-width: .7;
	cursor: pointer;
	transition: fill .2s;
}
.cmr-coverage .cov-land.hover  { fill: var(--blue); }
.cmr-coverage .cov-land.active { fill: var(--blue-light); }
.cmr-coverage .cov-pin { cursor: pointer; }
.cmr-coverage .cov-pin circle {
	fill: var(--navy);
	stroke: #fff;
	stroke-width: 2;
	transition: fill .2s;
}
.cmr-coverage .cov-pin.hover circle,
.cmr-coverage .cov-pin.active circle { fill: var(--blue-light); }
.cmr-coverage .cov-pin text { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; }
.cmr-coverage .map-lbl { text-anchor: middle; font-weight: 700; pointer-events: none; }

/* Side panel — region cards (rendered as <button>s) + detail box. */
.cmr-coverage .cov-side { display: flex; flex-direction: column; gap: 12px; }
.cmr-coverage .cov-side .hint {
	font-size: 13px;
	color: var(--grey);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
}
.cmr-coverage .cov-card {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid #e4e9f1;
	border-radius: 10px;
	padding: 14px 16px;
	cursor: pointer;
	background: #fff;
	transition: .15s;
	text-align: left;
	width: 100%;
	font: inherit;
	color: var(--ink);
}
.cmr-coverage .cov-card:hover { border-color: var(--blue-light); }
.cmr-coverage .cov-card.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.cmr-coverage .cov-card .dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--blue-light);
	flex: none;
}
.cmr-coverage .cov-card__text { display: flex; flex-direction: column; }
.cmr-coverage .cov-card .nm { font-weight: 600; font-size: 16px; }
.cmr-coverage .cov-card .mini { font-size: 13px; color: var(--grey); }
.cmr-coverage .cov-card.active .mini { color: #c4d4ee; }

.cmr-coverage .cov-detail {
	margin-top: 8px;
	background: var(--sky);
	border-radius: 12px;
	padding: 20px;
}
.cmr-coverage .cov-detail h3 { color: var(--navy); font-size: 20px; margin-bottom: 8px; }
.cmr-coverage .cov-detail p { color: #3a4763; font-size: 15px; }

/* Placeholder flag — visible reminder that the copy is awaiting Simon. */
.cmr-coverage__note,
.cmr-coverage .placeholder {
	display: inline-block;
	margin-top: 12px;
	background: #FAEEDA;
	color: #854F0B;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 6px;
}

/* Closing CTA band. */
.cmr-coverage__cta { background: var(--navy-deep); color: #fff; text-align: center; padding: 54px 0; }
.cmr-coverage__cta h2 { font-size: 26px; margin-bottom: 10px; color: #fff; }
.cmr-coverage__cta p { color: var(--sky); margin-bottom: 22px; }

/* Stack to a single column on small screens; the SVG scales to width. */
@media (max-width: 860px) {
	.cmr-coverage .cov-grid { grid-template-columns: 1fr; }
	.cmr-coverage .map-card svg { max-width: 100%; height: auto; }
}

/* --------------------------------------------------------------------------
   Build 45.1 — Coverage map world zoom-out ("International")
   When `intl` is selected, coverage.js adds `.worldview` to the map <svg> and
   tweens its viewBox from data-europe out to data-world. These rules recolour
   the world layer, fade the Europe-only markers and reveal the worldwide
   label. Appended after the Build-45 coverage block; nothing above changes.
   -------------------------------------------------------------------------- */

/* World layer: 215 greyed country fills sitting behind the Europe detail. */
.cmr-coverage .world-land {
	fill: #cdd8ea;
	stroke: #fff;
	stroke-width: .5;
	vector-effect: non-scaling-stroke;
	transition: fill .6s ease;
}
/* Broaden the Build-45 .cov-land transition so the recolour matches the zoom. */
.cmr-coverage .cov-land { transition: fill .6s ease; }

/* Europe-only markers (pins + small labels) and the world-only label both
   cross-fade with the zoom. */
.cmr-coverage .europe-only { transition: opacity .5s ease; }
.cmr-coverage .world-only  { opacity: 0; transition: opacity .5s ease; }

/* --- world view (svg.worldview) --- */
.cmr-coverage .map-card svg.worldview .world-land,
.cmr-coverage .map-card svg.worldview .cov-land { fill: var(--blue-light); }
.cmr-coverage .map-card svg.worldview .europe-only { opacity: 0; pointer-events: none; }
.cmr-coverage .map-card svg.worldview .world-only { opacity: 1; }

/* ==========================================================================
   BOOKING (Build 46)
   Three booking pages matched to the approved design (Booking/Core Marine
   Online Booking.dc.html): /book/ chooser, Option A enquiry (/book-a-service/),
   Option B live-availability demo (/book-online/). Reuses the Design-01 :root
   tokens + shared .cmr-inner-hero / .cmr-btn. Reversible: delete this whole
   block + restore assets/css/theme.css.bak-b46.
   ========================================================================== */

/* ---- shared booking surface tokens ---- */
.cmr-book, .cmr-book-req, .cmr-bk-page { --bk-line: #e9eef5; --bk-soft: #f5f9ff; --bk-label: #46586f; --bk-muted: #69727D; --bk-note: #8A5A12; }

/* --- chooser (/book/) --- */
.cmr-book__chooser { padding: 72px 0 88px; }
.cmr-book__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.cmr-book-card {
	background: #fff; border: 1px solid var(--bk-line); border-radius: 20px;
	box-shadow: 0 16px 44px rgba(24,53,119,.1); padding: 40px 40px 36px;
	display: flex; flex-direction: column;
}
.cmr-book-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.cmr-book-card__icon {
	width: 54px; height: 54px; border-radius: 15px; background: var(--sky);
	color: var(--blue); display: flex; align-items: center; justify-content: center; flex: none;
}
.cmr-book-card__label {
	font: 600 11px/1 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase;
	color: var(--bk-muted); background: #f2f5fa; padding: 7px 12px; border-radius: 20px;
}
.cmr-book-card__label--live { color: var(--blue); background: #e4eefb; }
.cmr-book-card__title { font: 700 27px/1.15 'Montserrat', sans-serif; color: var(--navy); margin: 0 0 12px; }
.cmr-book-card__desc { font: 400 16px/1.6 'Inter', sans-serif; color: var(--bk-muted); margin: 0 0 28px; flex: 1; }
.cmr-book-card__cta { margin: 0; }
.cmr-book__reassure { text-align: center; margin: 34px 0 0; font: 400 15px/1.6 'Inter', sans-serif; color: var(--bk-muted); }
.cmr-book__reassure a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* --- Option A (/book-a-service/) --- */
.cmr-book-req__main { padding: 64px 0 80px; }
.cmr-book-req__card {
	max-width: 660px; margin: 0 auto; background: #fff; border: 1px solid var(--bk-line);
	border-radius: 20px; box-shadow: 0 16px 44px rgba(24,53,119,.1); padding: 40px 44px 44px;
}
.cmr-book-req__badge { margin-bottom: 26px; }
.cmr-book-req__badge span {
	display: inline-block; font: 600 11px/1 'Inter', sans-serif; letter-spacing: .1em;
	text-transform: uppercase; color: var(--bk-muted); background: #f2f5fa; padding: 8px 14px; border-radius: 20px;
}
/* light touch over the embedded WPForms 2139 so it sits inside the card cleanly */
.cmr-book-req__card .wpforms-field-label { font: 600 13px/1 'Inter', sans-serif; color: var(--bk-label); }
.cmr-book-req__card .wpforms-field input,
.cmr-book-req__card .wpforms-field textarea,
.cmr-book-req__card .wpforms-field select {
	border: 1px solid #d4dce6 !important; border-radius: 11px !important; padding: 14px 15px !important;
}
.cmr-book-req__card .wpforms-submit {
	background: var(--blue) !important; color: #fff !important; border: 0 !important;
	border-radius: 30px !important; padding: 16px 38px !important; font: 600 16px/1 'Inter', sans-serif !important;
	box-shadow: 0 12px 28px rgba(26,80,153,.26); cursor: pointer;
}
.cmr-book-req__card .wpforms-confirmation-container-full {
	background: var(--sky); border: 0; border-radius: 14px; color: var(--navy);
	font: 500 16px/1.6 'Inter', sans-serif; padding: 26px 28px;
}

/* --- Option B widget (/book-online/) --- */
.cmr-bk__section { padding: 60px 0 80px; }
.cmr-bk__demo-note {
	max-width: 980px; margin: 0 auto 22px; text-align: center; padding: 12px 18px;
	background: #fff7e8; border: 1px solid #f0dcae; border-radius: 12px;
	font: 400 14px/1.5 'Inter', sans-serif; color: var(--bk-note);
}
.cmr-bk {
	max-width: 980px; margin: 0 auto; background: #fff; border: 1px solid var(--bk-line);
	border-radius: 22px; box-shadow: 0 20px 56px rgba(24,53,119,.12); overflow: hidden;
}
.cmr-bk__noscript { padding: 40px; text-align: center; font: 400 16px/1.6 'Inter', sans-serif; color: var(--bk-muted); }
.cmr-bk__noscript a { color: var(--blue); font-weight: 600; }

/* stepper */
.cmr-bk__stepper {
	padding: 26px 40px; border-bottom: 1px solid #eef1f5; display: flex;
	align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.cmr-bk-step { display: flex; align-items: center; gap: 11px; }
.cmr-bk-step__mark {
	width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font: 700 14px/1 'Inter', sans-serif; background: #eef2f7; color: #9aacc6;
}
.cmr-bk-step__label { font: 600 14px/1 'Inter', sans-serif; color: #9aacc6; }
.cmr-bk-step.is-done .cmr-bk-step__mark,
.cmr-bk-step.is-current .cmr-bk-step__mark { background: var(--blue); color: #fff; }
.cmr-bk-step.is-current .cmr-bk-step__mark { box-shadow: 0 0 0 4px rgba(26,80,153,.15); }
.cmr-bk-step.is-done .cmr-bk-step__label,
.cmr-bk-step.is-current .cmr-bk-step__label { color: var(--navy); }

.cmr-bk__body { padding: 36px 40px 40px; }
.cmr-bk__step-h { font: 700 12px/1 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #9aacc6; margin: 0 0 14px; }
.cmr-bk__group { margin-bottom: 34px; }
.cmr-bk-note { font: 600 11px/1.4 'Inter', sans-serif; color: var(--bk-note); margin: 14px 0 0; }
.cmr-bk-note--center { text-align: center; }

/* service row */
.cmr-bk-service {
	display: flex; align-items: center; gap: 16px; padding: 18px 22px;
	border: 2px solid var(--blue); border-radius: 14px; background: var(--bk-soft);
}
.cmr-bk-service__radio {
	width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--blue); flex: none;
	display: flex; align-items: center; justify-content: center;
}
.cmr-bk-service__radio span { width: 11px; height: 11px; border-radius: 50%; background: var(--blue); }
.cmr-bk-service__body { flex: 1; }
.cmr-bk-service__name { display: block; font: 700 17px/1.2 'Inter', sans-serif; color: var(--navy); }
.cmr-bk-service__meta { display: block; font: 400 13px/1.4 'Inter', sans-serif; color: var(--bk-muted); margin-top: 4px; }
.cmr-bk-service .cmr-bk-note { margin: 0; text-align: right; max-width: 150px; }

/* two-col date + time */
.cmr-bk__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 34px; align-items: start; }

/* calendar */
.cmr-bk-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cmr-bk-cal__month { font: 700 17px/1 'Montserrat', sans-serif; color: var(--navy); }
.cmr-bk-cal__nav {
	width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px #dce6f3;
	display: flex; align-items: center; justify-content: center; font: 400 17px/1 'Inter', sans-serif; color: #9aacc6;
}
.cmr-bk-cal__grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.cmr-bk-cal__wd { font: 700 11px/1 'Inter', sans-serif; text-transform: uppercase; color: #9aacc6; text-align: center; padding: 2px 0 8px; }
.cmr-bk-cal__cell {
	aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
	border: 0; background: transparent; border-radius: 11px; font: 600 14px/1 'Inter', sans-serif; padding: 0;
}
.cmr-bk-cal__cell--empty { box-shadow: none; }
.cmr-bk-cal__cell.is-available { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px #dce6f3; cursor: pointer; }
.cmr-bk-cal__cell.is-available:hover { box-shadow: inset 0 0 0 1.5px var(--blue); }
.cmr-bk-cal__cell.is-today { box-shadow: inset 0 0 0 1.5px var(--blue); }
.cmr-bk-cal__cell.is-selected { background: var(--blue); color: #fff; box-shadow: 0 8px 18px rgba(26,80,153,.3); cursor: pointer; }
.cmr-bk-cal__cell.is-off { color: #c2c8d0; cursor: not-allowed; }
.cmr-bk-legend { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.cmr-bk-legend__item { display: flex; align-items: center; gap: 7px; font: 400 12px/1 'Inter', sans-serif; color: var(--bk-muted); }
.cmr-bk-legend__sw { width: 13px; height: 13px; border-radius: 4px; }
.cmr-bk-legend__sw--free { background: #fff; box-shadow: inset 0 0 0 1px #dce6f3; }
.cmr-bk-legend__sw--sel { background: var(--blue); }
.cmr-bk-legend__sw--off { background: transparent; box-shadow: inset 0 0 0 1px #e4e7ec; }

/* time slots */
.cmr-bk-slots__for { font: 400 13px/1.4 'Inter', sans-serif; color: var(--bk-muted); margin: 0 0 16px; }
.cmr-bk-slots__for strong { color: var(--navy); }
.cmr-bk-slots { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.cmr-bk-slot {
	padding: 14px 0; text-align: center; border: 0; background: #fff; border-radius: 12px;
	font: 600 15px/1 'Inter', sans-serif; color: var(--blue); box-shadow: inset 0 0 0 1px #dce6f3; cursor: pointer;
}
.cmr-bk-slot:hover { box-shadow: inset 0 0 0 1.5px var(--blue); }
.cmr-bk-slot.is-selected { background: var(--blue); color: #fff; box-shadow: 0 8px 18px rgba(26,80,153,.3); }
.cmr-bk-slot.is-taken { background: #f0f1f3; color: #aeb4bd; box-shadow: none; cursor: not-allowed; text-decoration: line-through; }

/* details */
.cmr-bk__group--details { margin-top: 38px; padding-top: 34px; border-top: 1px solid #eef1f5; margin-bottom: 0; }
.cmr-bk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cmr-bk-field--wide { grid-column: 1 / -1; }
.cmr-bk-field label { display: block; font: 600 13px/1 'Inter', sans-serif; color: var(--bk-label); margin-bottom: 8px; }
.cmr-bk-field label span { color: var(--blue); }
.cmr-bk-field input {
	width: 100%; padding: 14px 15px; border: 1px solid #d4dce6; border-radius: 11px;
	font: 400 15px/1.3 'Inter', sans-serif; color: var(--ink); background: #fff;
}

/* confirm bar */
.cmr-bk-confirm {
	margin-top: 32px; padding: 22px 26px; background: var(--bk-soft); border-radius: 16px;
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.cmr-bk-confirm__summary { font: 400 15px/1.4 'Inter', sans-serif; color: var(--bk-label); }
.cmr-bk-confirm__summary strong { color: var(--navy); }

/* booked! confirmation */
.cmr-bk-done { padding: 24px 4px; text-align: center; animation: cmrBkFade .45s ease; }
@keyframes cmrBkFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.cmr-bk-done__tick {
	width: 78px; height: 78px; border-radius: 50%; background: var(--sky);
	display: flex; align-items: center; justify-content: center; margin: 0 auto 24px;
}
.cmr-bk-done__title { font: 700 30px/1.2 'Montserrat', sans-serif; color: var(--navy); margin: 0 0 14px; }
.cmr-bk-done__msg { font: 400 18px/1.6 'Inter', sans-serif; color: var(--bk-label); max-width: 520px; margin: 0 auto; }
.cmr-bk-done__msg strong { color: var(--navy); }
.cmr-bk-done__again {
	margin-top: 30px; border: 0; background: none; cursor: pointer;
	font: 600 14px/1 'Inter', sans-serif; color: var(--blue); text-decoration: underline; text-underline-offset: 3px;
}

/* --- booking mobile reflow (single column, per the design) --- */
@media (max-width: 768px) {
	.cmr-book__chooser { padding: 44px 0 56px; }
	.cmr-book__cards { grid-template-columns: 1fr; gap: 18px; }
	.cmr-book-card { padding: 26px 24px; }
	.cmr-book-req__main { padding: 40px 0 56px; }
	.cmr-book-req__card { padding: 28px 22px; }
	.cmr-bk__section { padding: 40px 0 56px; }
	.cmr-bk__stepper { padding: 18px 20px; gap: 10px; }
	.cmr-bk-step__label { display: none; }
	.cmr-bk__body { padding: 26px 22px 32px; }
	.cmr-bk__grid { grid-template-columns: 1fr; gap: 28px; }
	.cmr-bk-service .cmr-bk-note { display: none; }
	.cmr-bk-slots { grid-template-columns: repeat(3,1fr); }
	.cmr-bk-fields { grid-template-columns: 1fr; }
	.cmr-bk-confirm { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ==========================================================================
   NAVBAR (Build 47)
   Two header CTAs now live in the nav slot — Book a Service (primary, filled)
   + Contact Us (outline). Tighten desktop spacing + give the CTAs slightly
   slimmer padding so menu links + both CTAs + the account pill fit on one
   line at the 1280 container without wrapping. The drawer breakpoint was
   raised to 1100px (see media block above). Logo + account pill untouched.
   ========================================================================== */
.cmr-nav { gap: 20px; }
.cmr-menu { gap: 20px; }
.cmr-nav__cta { padding: 12px 22px; }

@media (max-width: 1100px) {
	/* In the drawer both CTAs stack full-width with comfortable spacing;
	   reset the slimmer desktop padding back to the standard button size. */
	.cmr-nav__cta { padding: 15px 32px; margin-top: 14px; }
	.cmr-nav__cta + .cmr-nav__cta { margin-top: 10px; }
}

/* ==========================================================================
   MAINTENANCE PLANS (Build 49)
   /maintenance-plans/ — page-maintenance-plans.php. Three tier cards (Plus
   highlighted) + an interactive comparison matrix (plans.js) + final CTA.
   Tier-card patterns are cloned from .cmr-book-card (NOT shared) into the
   .cmr-plans / .cmr-plan-* namespace. Colours reuse the design's palette,
   which maps onto the existing :root tokens (--navy/--blue/--sky/etc).
   ========================================================================== */

.cmr-plans { --pl-line: #e6ecf4; --pl-soft: #f6f8fb; --pl-muted: #69727D; --pl-ink: #3a4450; }

@keyframes cmRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- tier cards ---- */
.cmr-plans__tiers { padding: 70px 0 30px; }
.cmr-plans__cards {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
	align-items: stretch; padding-top: 18px;
}
.cmr-plan-card {
	position: relative; background: #fff; border: 1px solid var(--pl-line);
	border-radius: 20px; box-shadow: 0 14px 40px rgba(24,53,119,.08);
	padding: 36px 34px 34px; display: flex; flex-direction: column;
}
.cmr-plan-card--popular {
	border: 2px solid var(--blue); box-shadow: 0 26px 60px rgba(24,53,119,.20);
	transform: translateY(-18px);
}
.cmr-plan-card__accent {
	position: absolute; top: 0; left: 24px; right: 24px; height: 5px;
	background: linear-gradient(90deg, var(--blue), var(--blue-light));
	border-radius: 0 0 6px 6px;
}
.cmr-plan-card__ribbon {
	position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
	background: var(--blue); color: #fff; font: 700 11px/1 'Inter', sans-serif;
	letter-spacing: .14em; text-transform: uppercase; padding: 9px 18px;
	border-radius: 30px; box-shadow: 0 10px 22px rgba(26,80,153,.32); white-space: nowrap;
}
.cmr-plan-card--popular .cmr-plan-card__name { margin-top: 8px; }
.cmr-plan-card__name { font: 700 24px/1.1 'Montserrat', sans-serif; color: var(--navy); margin: 0 0 6px; }
.cmr-plan-card__lead { font: 400 14px/1.5 'Inter', sans-serif; color: var(--pl-muted); margin: 0 0 24px; min-height: 42px; }
.cmr-plan-card__price { display: flex; align-items: flex-end; gap: 8px; margin: 0; }
.cmr-plan-card__from { font: 400 16px/1 'Inter', sans-serif; color: var(--pl-muted); padding-bottom: 7px; }
.cmr-plan-card__amount { font: 700 46px/1 'Montserrat', sans-serif; color: var(--navy); }
.cmr-plan-card--popular .cmr-plan-card__amount { color: var(--blue); }
.cmr-plan-card__unit { font: 500 16px/1 'Inter', sans-serif; color: var(--pl-muted); padding-bottom: 7px; }
.cmr-plan-card__vat { font: 500 13px/1 'Inter', sans-serif; color: #9aacc6; margin: 9px 0 0; }
.cmr-plan-card__rule { display: block; height: 1px; background: #eef1f5; margin: 26px 0; }
.cmr-plan-card--popular .cmr-plan-card__rule { background: #e4eefb; }
.cmr-plan-card__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.cmr-plan-card__feature { display: flex; gap: 11px; align-items: flex-start; font: 400 15px/1.45 'Inter', sans-serif; color: var(--pl-ink); }
.cmr-plan-card--popular .cmr-plan-card__feature { color: #2a3543; }
.cmr-plan-card__tick { flex: none; margin-top: 1px; }
.cmr-plan-card__cta { margin: 30px 0 0; }
.cmr-plan-card__cta .cmr-btn { display: block; width: 100%; text-align: center; }
.cmr-plans__note { text-align: center; font: 400 13px/1.5 'Inter', sans-serif; color: #9aacc6; margin: 26px 0 0; }

/* ---- comparison matrix ---- */
.cmr-plans__compare { position: relative; background: var(--pl-soft); padding: 74px 0 84px; margin-top: 40px; }
.cmr-plans__compare-wave { position: absolute; top: -1px; left: 0; width: 100%; height: 60px; display: block; }
.cmr-plans__compare-inner { position: relative; max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); }
.cmr-plans__compare-head { text-align: center; margin-bottom: 38px; }
.cmr-plans__compare-head .cmr-eyebrow { color: var(--blue); }

.cmr-plans__matrix { display: flex; gap: 8px; align-items: flex-start; padding-top: 22px; }

/* feature rail (left) */
.cmr-plans__rail { flex: 1.7 1 0; min-width: 0; }
.cmr-plans__rail-head {
	height: 84px; background: var(--navy); border-radius: 14px 14px 0 0;
	display: flex; flex-direction: column; justify-content: center; padding: 0 22px;
}
.cmr-plans__rail-title { font: 700 13px/1 'Inter', sans-serif; color: #fff; letter-spacing: .04em; }
.cmr-plans__rail-hint { font: 400 11px/1.3 'Inter', sans-serif; color: #9fc4e8; margin-top: 6px; }
.cmr-plans__rail-row {
	position: relative; height: 58px; display: flex; align-items: center; gap: 9px;
	padding: 0 18px; border-top: 1px solid #eef1f5; background: #fff;
	animation: cmRise .5s ease both;
}
.cmr-plans__rail-name { font: 400 14px/1.3 'Inter', sans-serif; color: var(--pl-ink); }
.cmr-plans__info {
	width: 18px; height: 18px; border-radius: 50%; border: 0; flex: none;
	box-shadow: inset 0 0 0 1.4px #c3d0e2; color: #7d93b2; background: transparent;
	font: 700 11px/1 'Inter', sans-serif; display: flex; align-items: center; justify-content: center;
	cursor: help; padding: 0;
}
.cmr-plans__info:hover, .cmr-plans__info:focus-visible { box-shadow: inset 0 0 0 1.6px var(--blue); color: var(--blue); outline: none; }
.cmr-plans__tip {
	position: absolute; left: 18px; bottom: 48px; z-index: 30; width: 252px;
	background: #fff; border-radius: 12px; box-shadow: 0 18px 44px rgba(24,53,119,.24);
	border: 1px solid var(--pl-line); padding: 13px 15px;
	font: 400 13px/1.5 'Inter', sans-serif; color: var(--pl-ink);
	opacity: 0; visibility: hidden; transform: translateY(4px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.cmr-plans__rail-row.is-open .cmr-plans__tip { opacity: 1; visibility: visible; transform: none; }
.cmr-plans__tip-arrow {
	position: absolute; left: 24px; bottom: -7px; width: 13px; height: 13px; background: #fff;
	border-right: 1px solid var(--pl-line); border-bottom: 1px solid var(--pl-line); transform: rotate(45deg);
}

/* tier columns (right) */
.cmr-plans__col {
	position: relative; flex: 1 1 0; min-width: 0; border-radius: 14px; background: #fff;
	border: 1px solid var(--pl-line); box-shadow: 0 8px 22px rgba(24,53,119,.06);
	opacity: .55; cursor: pointer; transition: box-shadow .35s ease, opacity .3s ease;
}
.cmr-plans__col--plus { border: 2px solid var(--blue); box-shadow: 0 14px 36px rgba(26,80,153,.12); }
.cmr-plans__col:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cmr-plans__col.is-focused { opacity: 1; box-shadow: 0 22px 50px rgba(24,53,119,.26); }
.cmr-plans__col.is-dim { opacity: .55; }
.cmr-plans__col-ribbon {
	position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 4;
	background: var(--blue); color: #fff; font: 700 10px/1 'Inter', sans-serif;
	letter-spacing: .13em; text-transform: uppercase; padding: 8px 16px; border-radius: 30px;
	box-shadow: 0 10px 22px rgba(26,80,153,.32); white-space: nowrap;
}
.cmr-plans__col-head {
	height: 84px; border-radius: 13px 13px 0 0; display: flex; align-items: center; justify-content: center;
	font: 700 16px/1 'Montserrat', sans-serif; color: var(--navy); background: #fff;
}
.cmr-plans__col--plus .cmr-plans__col-head { background: var(--blue); color: #fff; }
.cmr-plans__col.is-focused .cmr-plans__col-head { background: var(--navy); color: #fff; }
.cmr-plans__col--plus.is-focused .cmr-plans__col-head { background: var(--blue); }
.cmr-plans__cell {
	height: 58px; display: flex; align-items: center; justify-content: center;
	border-top: 1px solid #eef1f5; animation: cmRise .5s ease both;
}
.cmr-plans__chip {
	width: 26px; height: 26px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
}
.cmr-plans__chip--tick { background: #EAF0F7; color: var(--blue); }
.cmr-plans__col.is-focused .cmr-plans__chip--tick { background: var(--blue); color: #fff; }
.cmr-plans__chip--tick.is-static { background: var(--blue); color: #fff; }
.cmr-plans__chip--dash { background: #eef2f7; }
.cmr-plans__dash { width: 10px; height: 2px; border-radius: 2px; background: #aab3bf; }
.cmr-plans__pill {
	padding: 6px 13px; border-radius: 20px; background: #EAF0F7; color: var(--blue);
	font: 700 13px/1 'Inter', sans-serif;
}
.cmr-plans__col.is-focused .cmr-plans__pill { background: var(--blue); color: #fff; }

/* legend */
.cmr-plans__legend { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.cmr-plans__legend-item { display: flex; align-items: center; gap: 8px; font: 400 13px/1 'Inter', sans-serif; color: var(--pl-muted); }

/* ---- final CTA band ---- */
.cmr-plans__cta-band { position: relative; background: linear-gradient(160deg, #172f63, var(--blue)); padding: 78px 0 84px; text-align: center; }
.cmr-plans__cta-wave { position: absolute; top: -1px; left: 0; width: 100%; height: 60px; display: block; }
.cmr-plans__cta-inner { position: relative; max-width: 760px; }
.cmr-plans__cta-title { font: 700 34px/1.2 'Montserrat', sans-serif; color: #fff; margin: 0 0 16px; letter-spacing: -.01em; }
.cmr-plans__cta-sub { font: 400 19px/1.6 'Inter', sans-serif; color: var(--sky); margin: 0 0 34px; }
.cmr-plans__cta-action { margin: 0; }
.cmr-plans__cta-btn { background: #fff; color: var(--blue); box-shadow: 0 14px 32px rgba(0,0,0,.22); }
.cmr-plans__cta-btn:hover { background: #fff; color: var(--navy); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.cmr-plans__cta-fine { font: 400 13px/1.6 'Inter', sans-serif; color: #7e9bc4; max-width: 560px; margin: 34px auto 0; }

/* ---- responsive ---- */
@media (max-width: 900px) {
	.cmr-plans__tiers { padding: 48px 0 20px; }
	.cmr-plans__cards { grid-template-columns: 1fr; gap: 34px; padding-top: 22px; }
	.cmr-plan-card--popular { transform: none; } /* drop the lift when stacked */
	.cmr-plan-card__lead { min-height: 0; }

	.cmr-plans__compare { padding: 56px 0 64px; }
	/* matrix scrolls horizontally on narrow screens so columns stay usable */
	.cmr-plans__matrix { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
	.cmr-plans__rail { flex: 0 0 220px; }
	.cmr-plans__col { flex: 0 0 130px; }
	.cmr-plans__tip { width: 220px; }

	.cmr-plans__cta-title { font-size: 26px; }
	.cmr-plans__cta-sub { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	/* never leave staggered content invisible if motion is suppressed */
	.cmr-plans__rail-row, .cmr-plans__cell { animation: none; }
}