/*
 * Site styles for carrett-pristine-motors: design concept K (Graphite).
 *
 * Rules (the lint enforces the first three):
 * - Every selector contains a .crt- class. Put the class on the element in
 *   Elementor: Advanced > CSS Classes. Site-wide rules hang off .crt-site,
 *   which the mu-plugin adds to <body>.
 * - :root may only define --crt- custom properties.
 * - Keyframes are named crt-...
 * - Colours come from Elementor's Global Colours where they exist (the
 *   var(--e-global-color-...) values below, with the design's colours as the
 *   fallback). Change a colour in Site Settings, not here.
 * - Name components BEM-style: .crt-hero, .crt-hero__title, .crt-hero--dark
 *
 * Elementor wraps every widget in its own element, so rules reach inside
 * with Elementor's class names: .crt-btn .elementor-button,
 * .crt-h2 .elementor-heading-title. One extra class beats Elementor's own
 * rules on load order; there is no !important outside the reduced-motion
 * block.
 */

/* ---------------------------------------------------------------------------
   Fonts: Urbanist (SIL Open Font License), served from this site
   --------------------------------------------------------------------------- */
@font-face {
	font-family: "Urbanist";
	src: url("../fonts/urbanist-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Urbanist";
	src: url("../fonts/urbanist-latin-wght-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* ---------------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------------- */
:root {
	--crt-bg: var(--e-global-color-crtbg, #0b0c0e);
	--crt-bg2: var(--e-global-color-crtbg2, #111316);
	--crt-panel: var(--e-global-color-crtpanel, #16191d);
	--crt-text: var(--e-global-color-crttext, #eceef0);
	--crt-soft: var(--e-global-color-crtsoft, #c5cbd1);
	--crt-muted: var(--e-global-color-crtmuted, #8f98a1);
	--crt-accent: var(--e-global-color-crtaccent, #47b4f0);
	--crt-accent-hi: var(--e-global-color-crtaccenthi, #9ad8fa);
	--crt-white: #ffffff;
	--crt-line: rgba(255, 255, 255, 0.09);
	--crt-glow: rgba(154, 216, 250, 0.28);
	--crt-font: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
	--crt-hw: 250;
	--crt-sw: 600;
	--crt-radius: 26px;
	--crt-wrap: 1240px;
	--crt-head-h: 96px;
	--crt-ease: cubic-bezier(0.22, 0.7, 0.18, 1);
	--crt-focus-ring: 2px solid var(--crt-accent-hi);
	--crt-focus-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
body.crt-site {
	/* Elementor's default container padding and widget spacing are zero
	   here; each component sets its own spacing below. */
	--container-default-padding-top: 0px;
	--container-default-padding-right: 0px;
	--container-default-padding-bottom: 0px;
	--container-default-padding-left: 0px;
	--widgets-spacing: 0px;
	--widgets-spacing-row: 0px;
	--widgets-spacing-column: 0px;
	margin: 0;
	background: var(--crt-bg);
	color: var(--crt-text);
	font-family: var(--crt-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

.crt-site :where(img) {
	max-width: 100%;
	height: auto;
}

.crt-site :where(a) {
	color: inherit;
}

.crt-site ::selection {
	background: var(--crt-accent);
	color: #001522;
}

/* Keyboard focus must always be visible (WCAG 2.4.7). */
.crt-site a:focus-visible,
.crt-site button:focus-visible,
.crt-site summary:focus-visible,
.crt-site input:focus-visible,
.crt-site select:focus-visible,
.crt-site textarea:focus-visible,
.crt-site [tabindex]:focus-visible {
	outline: var(--crt-focus-ring);
	outline-offset: var(--crt-focus-offset);
	border-radius: 6px;
}

.crt-site :is(h1, h2, h3, h4, p).elementor-heading-title,
.crt-site :is(h1, h2, h3, h4) {
	margin: 0;
	font-family: var(--crt-font);
	font-weight: var(--crt-hw);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--crt-white);
}

/* Heading widgets set as a paragraph (the hero slogans) keep the look. */
.crt-site :is(h1, h2, h3, h4) em,
.crt-site p.elementor-heading-title em {
	font-style: italic;
	color: var(--crt-accent-hi);
}

.crt-site :is(h1, h2, h3, h4) b,
.crt-site :is(h1, h2, h3, h4) strong,
.crt-site p.elementor-heading-title b,
.crt-site p.elementor-heading-title strong {
	font-weight: var(--crt-sw);
}

.crt-site .elementor-widget-text-editor {
	color: var(--crt-soft);
	font-family: var(--crt-font);
}

.crt-site .elementor-widget-text-editor p {
	margin: 0 0 1em;
}

.crt-site .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.crt-site .elementor-widget-text-editor a {
	color: var(--crt-accent-hi);
	text-underline-offset: 4px;
}

.crt-sr {
	position: absolute;
	width: 1px;
	max-width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.crt-admin-note {
	padding: 2px 6px;
	border-radius: 4px;
	background: #6b1f1f;
	color: #fff;
	font-size: 13px;
}

.crt-main:focus {
	outline: none;
}

/* ---------------------------------------------------------------------------
   Type helpers (put on Heading and Text Editor widgets)
   --------------------------------------------------------------------------- */
.crt-site .crt-kicker .elementor-heading-title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--crt-muted);
}

.crt-site .crt-h1 .elementor-heading-title {
	font-size: clamp(46px, 6.8vw, 108px);
}

.crt-site .crt-h2 .elementor-heading-title {
	font-size: clamp(38px, 4.6vw, 68px);
}

.crt-site .crt-h3 .elementor-heading-title {
	font-size: 28px;
	font-weight: 300;
	letter-spacing: -0.01em;
}

.crt-site .crt-lead {
	font-size: 19px;
	color: var(--crt-soft);
}

.crt-site .crt-muted {
	font-size: 16px;
	color: var(--crt-muted);
}

/* ---------------------------------------------------------------------------
   Buttons (Button widget with CSS classes "crt-btn crt-btn--primary")
   --------------------------------------------------------------------------- */
.crt-site .crt-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	font-family: var(--crt-font);
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.3s, box-shadow 0.6s var(--crt-ease), transform 0.6s var(--crt-ease);
}

.crt-site .crt-btn--primary .elementor-button {
	background: var(--crt-text);
	color: var(--crt-bg);
}

.crt-site .crt-btn--primary .elementor-button:hover,
.crt-site .crt-btn--primary .elementor-button:focus-visible {
	background: var(--crt-white);
	color: var(--crt-bg);
	box-shadow: 0 10px 40px var(--crt-glow);
	transform: translateY(-1px);
}

.crt-site .crt-btn--line .elementor-button {
	background: transparent;
	color: var(--crt-text);
	box-shadow: inset 0 0 0 1px rgba(236, 238, 240, 0.3);
}

.crt-site .crt-btn--line .elementor-button:hover,
.crt-site .crt-btn--line .elementor-button:focus-visible {
	background: transparent;
	color: var(--crt-white);
	box-shadow: inset 0 0 0 1px rgba(236, 238, 240, 0.75);
}

.crt-site .crt-btn--small .elementor-button {
	min-height: 44px;
	padding: 0 20px;
	font-size: 14.5px;
}

.crt-site .crt-arrowlink .elementor-button {
	padding: 0;
	min-height: 0;
	background: none;
	color: var(--crt-accent-hi);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* ---------------------------------------------------------------------------
   Layout (containers)
   --------------------------------------------------------------------------- */
.crt-site .crt-section {
	padding: 130px 0;
}

.crt-site .crt-section--tight {
	padding: 80px 0;
}

.crt-site .crt-section--alt {
	background: var(--crt-bg2);
}

.crt-site .crt-wrap {
	width: min(var(--crt-wrap), 100% - 48px);
	margin-inline: auto;
}

.crt-site .crt-stack {
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: flex-start;
}

.crt-site .crt-stack--centre {
	align-items: center;
	text-align: center;
}

/* Text in a stack takes the full width (so lines inside it can spread out),
   while buttons and chips keep their own size. */
.crt-site .crt-stack > .elementor-widget-text-editor,
.crt-site .crt-stack > .elementor-widget-shortcode {
	width: 100%;
}

.crt-site .crt-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
}

.crt-site .crt-row--centre {
	justify-content: center;
}

.crt-site .crt-row > .elementor-element {
	width: auto;
}

.crt-site .crt-head {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 60px;
	align-items: end;
	margin-bottom: 56px;
}

.crt-site .crt-head > .crt-text,
.crt-site .crt-head > .elementor-widget-text-editor {
	max-width: 460px;
	justify-self: end;
}

.crt-site .crt-split {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 80px;
	align-items: center;
}

.crt-site .crt-split--top {
	align-items: start;
}

.crt-site .crt-split--even {
	grid-template-columns: 1fr 1fr;
}

.crt-site .crt-split .elementor-widget-text-editor {
	max-width: 520px;
}

/* ---------------------------------------------------------------------------
   Header (Theme Builder header: container "crt-header" > "crt-header__inner")
   --------------------------------------------------------------------------- */
.crt-site .crt-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	padding-top: 14px;
	pointer-events: none;
}

.crt-site.admin-bar .crt-header {
	top: 32px;
}

.crt-site .crt-header__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	width: min(1180px, 100% - 28px);
	height: 68px;
	margin-inline: auto;
	padding: 0 10px 0 24px;
	border-radius: 999px;
	background: rgba(22, 25, 29, 0.72);
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	backdrop-filter: blur(18px) saturate(1.3);
	box-shadow: inset 0 0 0 1px var(--crt-line), 0 20px 50px rgba(0, 0, 0, 0.35);
	pointer-events: auto;
	transition: background-color 0.5s;
}

.crt-site .crt-header.is-scrolled .crt-header__inner {
	background: rgba(22, 25, 29, 0.92);
}

.crt-site .crt-header__inner > .elementor-element {
	width: auto;
}

.crt-site .crt-header__nav {
	margin-left: auto;
}

.crt-logo {
	display: block;
}

.crt-logo img {
	display: block;
	width: 140px;
	height: auto;
}

.crt-nav__list {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
}

.crt-nav__list > li > a,
.crt-navdrop > summary {
	color: var(--crt-soft);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.3s;
}

.crt-nav__list > li > a:hover,
.crt-nav__list > li > a[aria-current="page"],
.crt-navdrop > summary:hover,
.crt-navdrop > summary.is-current {
	color: var(--crt-white);
}

.crt-navdrop {
	position: relative;
}

.crt-navdrop > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
}

.crt-navdrop > summary::-webkit-details-marker {
	display: none;
}

.crt-navdrop > summary::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.4s var(--crt-ease);
}

.crt-navdrop[open] > summary::after {
	transform: translateY(2px) rotate(-135deg);
}

.crt-navdrop__menu {
	position: absolute;
	left: -18px;
	top: calc(100% + 22px);
	min-width: 280px;
	margin: 0;
	padding: 8px;
	list-style: none;
	border-radius: 18px;
	background: var(--crt-panel);
	box-shadow: 0 0 0 1px var(--crt-line), 0 24px 60px rgba(0, 0, 0, 0.55);
}

.crt-navdrop__menu a {
	display: block;
	padding: 10px 14px;
	border-radius: 12px;
	color: var(--crt-text);
	text-decoration: none;
	line-height: 1.4;
}

.crt-navdrop__menu a:hover,
.crt-navdrop__menu a[aria-current="page"] {
	background: rgba(255, 255, 255, 0.06);
}

.crt-navdrop__menu small {
	display: block;
	font-size: 13px;
	color: var(--crt-muted);
}

.crt-navdrop__menu .crt-navdrop__all {
	margin-top: 4px;
	border-top: 1px solid var(--crt-line);
	border-radius: 0 0 12px 12px;
	color: var(--crt-accent-hi);
}

.crt-menu {
	display: none;
}

/* ---------------------------------------------------------------------------
   Page hero (inner pages) and home hero
   --------------------------------------------------------------------------- */
.crt-site .crt-phero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: calc(var(--crt-head-h) + 90px) 0 0;
	text-align: center;
}

.crt-site .crt-phero::after,
.crt-site .crt-khero::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -260px;
	z-index: -1;
	width: 1000px;
	height: 700px;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(154, 216, 250, 0.12), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.crt-site .crt-phero .crt-h1 .elementor-heading-title {
	max-width: 13ch;
	margin-inline: auto;
}

.crt-site .crt-phero .crt-lead {
	max-width: 620px;
	margin-inline: auto;
}

.crt-site .crt-phero--short {
	padding-bottom: 20px;
}

.crt-site .crt-phero__media {
	width: min(1180px, 100% - 48px);
	height: clamp(280px, 40vw, 540px);
	margin: 70px auto 0;
	overflow: hidden;
	border-radius: 34px;
	box-shadow: 0 0 0 1px var(--crt-line), 0 40px 100px rgba(0, 0, 0, 0.5);
}

.crt-site .crt-phero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.8) brightness(0.8);
}

.crt-crumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	color: var(--crt-muted);
}

.crt-crumbs a {
	color: var(--crt-soft);
	text-underline-offset: 4px;
}

.crt-site .crt-khero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: calc(var(--crt-head-h) + 100px) 0 40px;
	text-align: center;
}

.crt-site .crt-khero__title .elementor-heading-title {
	max-width: 13ch;
	margin-inline: auto;
	font-size: clamp(52px, 8vw, 128px);
}

.crt-site .crt-khero .crt-lead {
	max-width: 640px;
	margin-inline: auto;
}

.crt-site .crt-khero__panel {
	width: min(1180px, 100% - 48px);
	margin: 70px auto 0;
}

/* Sheen across a headline: the end state is plain text colour. */
.crt-site .crt-sheen .elementor-heading-title {
	background: linear-gradient(100deg, var(--crt-text) 0%, var(--crt-text) 42%, #ffffff 48%, var(--crt-accent-hi) 50%, #ffffff 52%, var(--crt-text) 58%, var(--crt-text) 100%);
	background-size: 300% 100%;
	background-position: 0% 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* Text only shows where the background is, and the background stops at
	   the last line box (line-height 1.05), which cut off descenders such
	   as the g of "gone". Extend the box without moving the layout. */
	padding-bottom: 0.18em;
	margin-bottom: -0.18em;
}

.crt-site .crt-sheen .elementor-heading-title em {
	color: transparent;
}

.crt-chips,
.crt-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.crt-chips li {
	padding: 8px 16px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--crt-line);
	font-size: 15px;
	color: var(--crt-soft);
}

.crt-site .crt-chips-wrap {
	margin-top: 34px;
}

/* Price chip (Text Editor widget with class "crt-price"). */
.crt-site .crt-price {
	display: inline-flex;
	width: auto;
	padding: 14px 22px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.04);
	box-shadow: inset 0 0 0 1px var(--crt-line);
	text-align: left;
}

.crt-site .crt-price p {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--crt-muted);
}

.crt-site .crt-price strong,
.crt-site .crt-price b {
	font-size: 30px;
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--crt-white);
}

.crt-site .crt-price em {
	flex-basis: 100%;
	font-style: normal;
	color: var(--crt-accent-hi);
}

/* ---------------------------------------------------------------------------
   Service tiles (container "crt-bento" > containers "crt-tile")
   --------------------------------------------------------------------------- */
.crt-site .crt-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 260px;
	gap: 16px;
	perspective: 1200px;
}

.crt-site .crt-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 28px;
	overflow: hidden;
	border-radius: 26px;
	background-color: var(--crt-panel);
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1px var(--crt-line);
	color: var(--crt-text);
	text-decoration: none;
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 0.6s var(--crt-ease), box-shadow 0.5s;
}

.crt-site .crt-tile.is-tilting {
	transition: transform 0.12s linear, box-shadow 0.5s;
}

.crt-site .crt-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(circle 240px at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 70%);
	opacity: 0;
	transition: opacity 0.5s;
	pointer-events: none;
}

.crt-site .crt-tile:hover::after,
.crt-site .crt-tile:focus-visible::after {
	opacity: 1;
}

.crt-site .crt-tile:hover {
	box-shadow: inset 0 0 0 1px rgba(154, 216, 250, 0.4);
}

.crt-site .crt-tile > .elementor-element {
	position: relative;
	z-index: 2;
}

.crt-site .crt-tile--big {
	grid-column: span 2;
	grid-row: span 2;
}

.crt-site .crt-tile--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(11, 12, 14, 0.35) 20%, rgba(11, 12, 14, 0.9) 100%);
}

.crt-site .crt-tile__price p {
	margin: 0;
	font-size: 30px;
	font-weight: 300;
	line-height: 1.2;
	color: var(--crt-white);
}

.crt-site .crt-tile__price small {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	color: var(--crt-soft);
}

.crt-site .crt-tile--big .crt-tile__price p {
	font-size: 44px;
}

.crt-site .crt-tile .crt-h3 .elementor-heading-title {
	font-size: 28px;
	font-weight: var(--crt-hw);
	letter-spacing: -0.03em;
}

.crt-site .crt-tile--big .crt-h3 .elementor-heading-title {
	font-size: 48px;
}

.crt-site .crt-tile .elementor-widget-text-editor {
	margin-top: 6px;
	font-size: 16px;
	color: var(--crt-soft);
}

.crt-site .crt-vs {
	margin-top: 8px;
}

.crt-vs-list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.crt-vs-list li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--crt-line);
	color: var(--crt-white);
}

.crt-vs-list span {
	color: var(--crt-accent-hi);
}

/* ---------------------------------------------------------------------------
   Cards, steps, packages, extras, FAQ, CTA
   --------------------------------------------------------------------------- */
.crt-site .crt-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.crt-site .crt-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.crt-site .crt-card,
.crt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 28px;
	border-radius: var(--crt-radius);
	background: var(--crt-panel);
	box-shadow: inset 0 0 0 1px var(--crt-line);
	color: var(--crt-text);
	text-decoration: none;
	list-style: none;
	transition: box-shadow 0.4s, transform 0.6s var(--crt-ease);
}

.crt-site a.crt-card:hover,
.crt-site a.crt-card:focus-visible {
	box-shadow: inset 0 0 0 1px rgba(143, 211, 250, 0.45);
	transform: translateY(-3px);
}

.crt-site .crt-card .crt-h3 .elementor-heading-title {
	font-size: 24px;
	font-weight: 400;
}

.crt-site .crt-card .elementor-widget-text-editor {
	font-size: 15.5px;
	color: var(--crt-muted);
}

.crt-site .crt-card__more {
	margin-top: 8px;
	font-size: 15px;
	color: var(--crt-accent-hi);
}

.crt-site .crt-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.crt-site .crt-steps--3 {
	grid-template-columns: repeat(3, 1fr);
}

.crt-site .crt-steps--5 {
	grid-template-columns: repeat(5, 1fr);
}

.crt-site .crt-step__num .elementor-heading-title {
	margin-bottom: 14px;
	font-size: 44px;
	font-weight: 100;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px var(--crt-accent-hi);
}

.crt-site .crt-pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 40px;
	border-radius: 30px;
	background: var(--crt-panel);
	box-shadow: inset 0 0 0 1px var(--crt-line);
}

.crt-site .crt-pcard--feature {
	background: radial-gradient(120% 90% at 100% 0%, rgba(71, 180, 240, 0.16), rgba(0, 0, 0, 0) 60%), var(--crt-panel);
	box-shadow: inset 0 0 0 1px rgba(143, 211, 250, 0.35);
}

.crt-site .crt-pcard--wide {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 20px 56px;
	align-items: start;
}

.crt-site .crt-pcard--wide > .crt-stack {
	gap: 16px;
}

.crt-site .crt-pcard .crt-stack > .crt-row {
	margin-top: 0;
}

.crt-site .crt-pcard__tag {
	width: auto;
	align-self: flex-start;
}

.crt-site .crt-pcard__tag .elementor-heading-title {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(143, 211, 250, 0.14);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--crt-accent-hi);
}

.crt-site .crt-pcard .crt-h3 .elementor-heading-title {
	font-size: 34px;
	font-weight: var(--crt-hw);
}

.crt-site .crt-pcard__price p {
	margin: 0;
	font-size: 52px;
	font-weight: 200;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--crt-white);
}

.crt-site .crt-pcard__price small {
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--crt-muted);
}

.crt-site .crt-pcard .crt-row {
	margin-top: auto;
	padding-top: 10px;
}

.crt-ticks,
.crt-site .crt-ticks ul {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.crt-ticks li,
.crt-site .crt-ticks ul li {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 12px;
	align-items: start;
	color: var(--crt-text);
}

.crt-ticks li::before,
.crt-site .crt-ticks ul li::before {
	content: "";
	width: 20px;
	height: 20px;
	margin-top: 4px;
	border-radius: 50%;
	background: rgba(58, 174, 240, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ad8fa' stroke-width='3'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.crt-extras {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.crt-extra h3 {
	font-size: 24px;
	font-weight: 400;
}

.crt-extra p {
	margin: 0;
	font-size: 15.5px;
	color: var(--crt-muted);
}

.crt-extra .crt-extra__price {
	margin: 2px 0 6px;
	font-size: 36px;
	font-weight: 300;
	line-height: 1.1;
	color: var(--crt-white);
}

.crt-site .crt-rates p {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--crt-line);
	color: var(--crt-soft);
}

.crt-site .crt-rates strong {
	font-size: 30px;
	font-weight: 300;
	color: var(--crt-white);
}

/* FAQ (Toggle widget with class "crt-faq"). */
.crt-site .crt-faq .elementor-toggle-item {
	border-bottom: 1px solid var(--crt-line);
}

.crt-site .crt-faq .elementor-toggle {
	border-top: 1px solid var(--crt-line);
}

.crt-site .crt-faq .elementor-tab-title {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 24px 0;
	border: 0;
	font-family: var(--crt-font);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--crt-white);
}

.crt-site .crt-faq .elementor-tab-title a {
	color: inherit;
	text-decoration: none;
}

.crt-site .crt-faq .elementor-toggle-icon {
	color: var(--crt-soft);
}

.crt-site .crt-faq .elementor-tab-content {
	padding: 0 0 24px;
	border: 0;
	max-width: 680px;
	color: var(--crt-soft);
}

/* Quote panel and call-to-action. */
.crt-site .crt-cta {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
	padding: 70px;
	overflow: hidden;
	border-radius: 34px;
	background: var(--crt-panel);
	box-shadow: inset 0 0 0 1px var(--crt-line);
}

.crt-site .crt-cta::after {
	content: "";
	position: absolute;
	left: -10%;
	bottom: -70%;
	width: 70%;
	height: 150%;
	background: radial-gradient(closest-side, var(--crt-glow), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.crt-site .crt-cta > .elementor-element {
	position: relative;
	z-index: 1;
}

.crt-site .crt-cta .crt-h2 .elementor-heading-title {
	font-size: clamp(36px, 4.4vw, 64px);
}

.crt-site .crt-cta__acts {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}

.crt-site .crt-cta__acts .elementor-widget-text-editor {
	font-size: 15px;
	text-align: right;
}

.crt-site .crt-cta__acts .elementor-widget-text-editor a {
	color: var(--crt-white);
}

.crt-quote-block {
	margin: 0;
	text-align: center;
}

.crt-quote-block blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.crt-quote-block blockquote p {
	max-width: 22ch;
	margin: 0 auto;
	font-size: clamp(30px, 3.6vw, 52px);
	font-weight: var(--crt-hw);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--crt-white);
}

.crt-quote-block figcaption {
	margin-top: 22px;
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--crt-muted);
}

.crt-site .crt-sign {
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--crt-accent-hi);
}

/* How it works (Text Editor holding <ol class="crt-tl">). */
.crt-tl {
	position: relative;
	margin: 0;
	padding: 0 0 0 58px;
	list-style: none;
	--p: 1;
}

.crt-tl::before,
.crt-tl::after {
	content: "";
	position: absolute;
	left: 15px;
	top: 10px;
	bottom: 30px;
	width: 1.5px;
	background: var(--crt-line);
}

.crt-tl::after {
	background: var(--crt-accent);
	box-shadow: 0 0 10px rgba(71, 180, 240, 0.7);
	transform-origin: top;
	transform: scaleY(var(--p));
}

.crt-tl li {
	position: relative;
	padding-bottom: 44px;
}

.crt-tl li::before {
	content: "";
	position: absolute;
	left: -50px;
	top: 8px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--crt-bg);
	box-shadow: inset 0 0 0 2px var(--crt-accent);
}

.crt-tl h3 {
	margin-bottom: 6px;
	font-size: 30px;
}

.crt-tl p {
	margin: 0;
	color: var(--crt-muted);
}

/* ---------------------------------------------------------------------------
   Contact
   --------------------------------------------------------------------------- */
.crt-site .crt-contact {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 70px;
	align-items: start;
}

.crt-next {
	display: grid;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: crt-n;
}

.crt-next li {
	position: relative;
	padding-left: 54px;
}

.crt-next li::before {
	counter-increment: crt-n;
	content: counter(crt-n);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--crt-accent-hi);
	font-size: 15px;
	color: var(--crt-accent-hi);
}

.crt-next strong {
	display: block;
	font-size: 20px;
	font-weight: 400;
	color: var(--crt-white);
}

.crt-site .crt-contact-details p {
	margin: 0;
	padding: 14px 0;
	border-top: 1px solid var(--crt-line);
}

.crt-site .crt-contact-details small {
	display: block;
	font-size: 12.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--crt-muted);
}

/* WP Forms inside [crt_quote_form].
   WP Forms Pro prints "modern" markup styled through --wpforms-* custom
   properties set on :root (black labels, white fields), with selectors
   that outrank ours. Setting the same properties on the wrapper restyles
   the form by inheritance, with no specificity fight. */
.crt-quote {
	--wpforms-label-color: var(--crt-soft);
	--wpforms-label-sublabel-color: var(--crt-muted);
	/* WP Forms' own red is about 3.6:1 on the panel; this is over 7:1. */
	--wpforms-label-error-color: #ff9a94;
	--wpforms-label-size-font-size: 14.5px;
	--wpforms-label-size-line-height: 1.4;
	--wpforms-field-background-color: var(--crt-bg);
	--wpforms-field-text-color: var(--crt-text);
	--wpforms-field-menu-color: var(--crt-panel);
	--wpforms-field-border-color: rgba(255, 255, 255, 0.14);
	--wpforms-field-border-color-spare: rgba(255, 255, 255, 0.14);
	--wpforms-field-border-radius: 16px;
	--wpforms-field-size-input-height: 54px;
	--wpforms-field-size-padding-h: 18px;
	--wpforms-field-size-font-size: 16px;
	--wpforms-field-size-line-height: 1.4;
	--wpforms-icon-choices-color: var(--crt-accent);
	--wpforms-button-background-color: var(--crt-text);
	--wpforms-button-background-color-alt: var(--crt-white);
	--wpforms-button-border-color: var(--crt-text);
	--wpforms-button-text-color: var(--crt-bg);
	--wpforms-button-text-color-alt: var(--crt-bg);
	--wpforms-button-border-radius: 999px;
	--wpforms-button-size-height: 52px;
	--wpforms-button-size-padding-h: 26px;
	--wpforms-button-size-font-size: 16px;
	--wpforms-background-color: var(--crt-panel);
	--wpforms-container-padding: 40px;
	--wpforms-container-border-radius: 30px;
	--wpforms-container-shadow-size-box-shadow: inset 0 0 0 1px var(--crt-line);
}

.crt-site .crt-quote .wpforms-container.wpforms-container-full {
	margin: 0;
}

.crt-site .crt-quote .wpforms-field-label,
.crt-site .crt-quote legend {
	font-weight: 500;
}

.crt-site .crt-quote ::placeholder {
	color: var(--crt-muted);
	opacity: 1;
}

.crt-site .crt-quote button[type="submit"] {
	font-family: inherit;
	font-weight: 500;
	cursor: pointer;
}

.crt-quote .wpforms-confirmation-container-full {
	border-radius: 16px;
	background: rgba(71, 180, 240, 0.12);
	color: var(--crt-text);
}

/* ---------------------------------------------------------------------------
   Footer (Theme Builder footer: container "crt-footer")
   --------------------------------------------------------------------------- */
.crt-site .crt-footer {
	padding: 70px 0 36px;
	border-top: 1px solid var(--crt-line);
	font-size: 15px;
	color: var(--crt-muted);
}

.crt-site .crt-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: 40px;
}

.crt-site .crt-footer .crt-logo img {
	width: 200px;
	margin-bottom: 14px;
}

.crt-site .crt-footer .crt-footer__title .elementor-heading-title {
	margin-bottom: 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--crt-text);
}

.crt-site .crt-footer .elementor-widget-text-editor {
	font-size: 15px;
	color: var(--crt-muted);
}

.crt-site .crt-footer ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.crt-site .crt-footer .elementor-widget-text-editor a {
	color: var(--crt-muted);
	text-decoration: none;
}

.crt-site .crt-footer .elementor-widget-text-editor a:hover,
.crt-site .crt-footer .elementor-widget-text-editor a:focus-visible {
	color: var(--crt-text);
	text-decoration: underline;
}

.crt-site .crt-footer__base {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 30px;
	margin-top: 60px;
	padding-top: 24px;
	border-top: 1px solid var(--crt-line);
	font-size: 13px;
}

.crt-site .crt-footer__base > .elementor-element {
	width: auto;
}

/* Footer business details: [crt_business_details]. */
.crt-business-details {
	font-size: 13px;
	line-height: 1.5;
}

.crt-business-details p {
	margin: 0 0 0.5em;
}

/* ---------------------------------------------------------------------------
   Diagram frame and segmented control
   --------------------------------------------------------------------------- */
.crt-fig {
	margin: 0;
	padding: 24px;
	border-radius: 28px;
	background: linear-gradient(180deg, var(--crt-panel), var(--crt-bg));
	box-shadow: inset 0 0 0 1px var(--crt-line);
}

.crt-fig svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.crt-fig text {
	font-family: var(--crt-font);
	font-size: 15px;
	font-weight: 500;
	fill: var(--crt-muted);
}

.crt-fig .crt-fig__on-paint {
	fill: #e3f1fb;
}

.crt-fig__note {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--crt-muted);
}

.crt-seg {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 22px;
	padding: 5px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 0 0 1px var(--crt-line);
}

.crt-seg--wrap {
	border-radius: 22px;
}

/* The legend names the picker for screen readers; its text is in a
   .crt-sr span because browsers ignore width limits on a legend itself. */
.crt-seg__legend {
	padding: 0;
}

.crt-seg input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.crt-seg label {
	padding: 9px 18px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--crt-muted);
	cursor: pointer;
	transition: background-color 0.4s, color 0.4s;
}

.crt-seg input:checked + label {
	background: var(--crt-text);
	color: var(--crt-bg);
}

.crt-seg input:focus-visible + label {
	outline: var(--crt-focus-ring);
	outline-offset: 2px;
}

/* Compare slider */
.crt-compare {
	margin: 0;
}

.crt-compare__view {
	position: relative;
	--crt-pos: 50%;
	overflow: hidden;
	aspect-ratio: 660 / 420;
	border-radius: 26px;
	background: #02050a;
	box-shadow: 0 0 0 1px var(--crt-line), 0 40px 120px rgba(0, 0, 0, 0.5);
}

.crt-compare--hero .crt-compare__view {
	aspect-ratio: 16 / 7.4;
	border-radius: 34px;
}

.crt-compare__view svg,
.crt-compare__view img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.crt-compare__view img {
	max-width: none;
	object-fit: cover;
}

.crt-compare__before {
	clip-path: inset(0 calc(100% - var(--crt-pos)) 0 0);
}

.crt-compare__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle 260px at var(--gx, 50%) var(--gy, 50%), rgba(154, 216, 250, 0.16), rgba(0, 0, 0, 0) 70%);
	opacity: 0;
	transition: opacity 0.6s;
	pointer-events: none;
}

.crt-compare__view:hover .crt-compare__glow {
	opacity: 1;
}

.crt-compare__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--crt-pos);
	width: 1px;
	background: rgba(255, 255, 255, 0.75);
	box-shadow: 0 0 18px rgba(143, 211, 250, 0.8);
	pointer-events: none;
}

.crt-compare__line::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	background: rgba(5, 8, 13, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 20px no-repeat;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.crt-compare__tag {
	position: absolute;
	top: 18px;
	z-index: 1;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(5, 8, 13, 0.6);
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--crt-soft);
}

.crt-compare__tag--l {
	left: 18px;
}

.crt-compare__tag--r {
	right: 18px;
}

.crt-compare input {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}

.crt-compare input:focus-visible + .crt-compare__line {
	background: var(--crt-accent-hi);
	box-shadow: 0 0 0 2px var(--crt-accent-hi), 0 0 18px rgba(143, 211, 250, 0.8);
}

/* Ray and stages diagrams: radio buttons switch the state, no script needed. */
.crt-ray .r-ray,
.crt-stages .r-ray {
	fill: none;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.1s var(--crt-ease), opacity 0.6s;
}

.crt-ray .r-in,
.crt-stages .r-in {
	stroke: #f2f5f8;
	stroke-width: 2.5;
	stroke-dashoffset: 0;
}

.crt-ray .r-scatter,
.crt-stages .r-scatter {
	stroke: #8f98a1;
	stroke-width: 2;
}

.crt-ray .r-clean,
.crt-stages .r-clean {
	stroke: var(--crt-accent-hi);
	stroke-width: 3;
	filter: drop-shadow(0 0 6px rgba(154, 216, 250, 0.8));
}

.crt-stages .r-clean--soft {
	opacity: 0.45;
}

.crt-ray :is(.r-rough, .r-flat, .r-eye),
.crt-stages :is(.r-eye, .s-rough, .s-soft, .s-flat) {
	transition: opacity 0.8s var(--crt-ease);
}

.crt-ray:has(input[value="swirled"]:checked) .r-scatter {
	stroke-dashoffset: 0;
}

.crt-ray:has(input[value="swirled"]:checked) :is(.r-flat, .r-clean) {
	opacity: 0;
}

.crt-ray:has(input[value="swirled"]:checked) .r-eye {
	opacity: 0.35;
}

.crt-ray:has(input[value="clean"]:checked) .r-clean {
	stroke-dashoffset: 0;
	transition-delay: 0.2s;
}

.crt-ray:has(input[value="clean"]:checked) :is(.r-rough, .r-scatter) {
	opacity: 0;
}

.crt-ray__cap,
.crt-stages__cap {
	display: none;
	margin: 16px 0 0;
	font-size: 16px;
	color: var(--crt-soft);
}

.crt-ray:has(input[value="swirled"]:checked) .crt-ray__cap[data-s="swirled"],
.crt-ray:has(input[value="clean"]:checked) .crt-ray__cap[data-s="clean"] {
	display: block;
}

.crt-stages :is(.s-soft, .s-flat) {
	opacity: 0;
}

.crt-stages:has(input[value="before"]:checked) .s-a .r-ray {
	stroke-dashoffset: 0;
}

.crt-stages:has(input[value="before"]:checked) .r-eye {
	opacity: 0.35;
}

.crt-stages:has(input[value="one"]:checked) .s-rough {
	opacity: 0;
}

.crt-stages:has(input[value="one"]:checked) .s-soft {
	opacity: 1;
}

.crt-stages:has(input[value="one"]:checked) .s-b .r-ray {
	stroke-dashoffset: 0;
}

.crt-stages:has(input[value="two"]:checked) :is(.s-rough, .s-soft) {
	opacity: 0;
}

.crt-stages:has(input[value="two"]:checked) .s-flat {
	opacity: 1;
}

.crt-stages:has(input[value="two"]:checked) .s-c .r-ray {
	stroke-dashoffset: 0;
	transition-delay: 0.2s;
}

.crt-stages:has(input[value="before"]:checked) .crt-stages__cap[data-s="before"],
.crt-stages:has(input[value="one"]:checked) .crt-stages__cap[data-s="one"],
.crt-stages:has(input[value="two"]:checked) .crt-stages__cap[data-s="two"] {
	display: block;
}

/* Coating length picker */
.crt-coat {
	padding: 30px;
	border-radius: 28px;
	background: linear-gradient(180deg, var(--crt-panel), var(--crt-bg));
	box-shadow: inset 0 0 0 1px var(--crt-line);
}

.crt-coat__track {
	position: relative;
	height: 10px;
	margin: 18px 10px 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
}

.crt-coat__fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 14.29%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--crt-accent), var(--crt-accent-hi));
	box-shadow: 0 0 18px rgba(58, 174, 240, 0.6);
	transition: width 0.9s var(--crt-ease);
}

.crt-coat__tick {
	position: absolute;
	top: 20px;
	left: var(--at);
	transform: translateX(-50%);
	font-size: 13px;
	color: var(--crt-muted);
}

.crt-coat__scale {
	margin: 34px 0 22px;
	font-size: 12.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--crt-muted);
}

.crt-coat:has(input[value="2"]:checked) .crt-coat__fill {
	width: 28.57%;
}

.crt-coat:has(input[value="3"]:checked) .crt-coat__fill {
	width: 42.86%;
}

.crt-coat:has(input[value="5"]:checked) .crt-coat__fill {
	width: 71.43%;
}

.crt-coat:has(input[value="7"]:checked) .crt-coat__fill {
	width: 100%;
}

.crt-coat__out {
	display: grid;
	margin: 0;
}

.crt-coat__out > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 6px 16px;
	padding: 14px 0;
	border-top: 1px solid var(--crt-line);
}

.crt-coat__out dt {
	color: var(--crt-soft);
}

.crt-coat__out dd {
	margin: 0;
	text-align: right;
	font-size: 24px;
	font-weight: 300;
	color: var(--crt-white);
}

.crt-coat [data-y] {
	display: none;
}

.crt-coat:has(input[value="1"]:checked) [data-y="1"],
.crt-coat:has(input[value="2"]:checked) [data-y="2"],
.crt-coat:has(input[value="3"]:checked) [data-y="3"],
.crt-coat:has(input[value="5"]:checked) [data-y="5"],
.crt-coat:has(input[value="7"]:checked) [data-y="7"] {
	display: inline;
}

.crt-table {
	width: 100%;
	margin-top: 28px;
	border-collapse: collapse;
	font-size: 16px;
}

.crt-table caption {
	padding-bottom: 12px;
	text-align: left;
	font-size: 14px;
	color: var(--crt-muted);
}

.crt-table th,
.crt-table td {
	padding: 12px 10px;
	border: 0;
	border-bottom: 1px solid var(--crt-line);
	background: none;
	text-align: left;
}

.crt-table thead th {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--crt-muted);
}

.crt-table tbody th {
	font-weight: 400;
	color: var(--crt-white);
}

/* Water beads */
.crt-beads {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.crt-beads h3 {
	margin: 18px 0 6px;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0;
}

.crt-beads p {
	margin: 0;
	font-size: 16px;
	color: var(--crt-muted);
}

.crt-beads > .crt-fig__note {
	grid-column: 1 / -1;
}

.crt-drop {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

/* Car zones (deep clean list) */
.crt-zones__grid {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 50px;
	align-items: center;
}

.crt-zones__car svg {
	width: min(280px, 100%);
	margin: 0 auto;
}

.crt-zones svg * {
	transition: fill 0.7s var(--crt-ease), stroke 0.7s var(--crt-ease), filter 0.7s var(--crt-ease);
}

.crt-zones .z-paint {
	fill: #15283a;
	stroke: #2d4861;
	stroke-width: 2;
}

.crt-zones .z-glass {
	fill: #1d3346;
}

.crt-zones .z-wheel {
	fill: #2a3138;
}

.crt-zones .z-interior {
	fill: #13202d;
}

.crt-zones .z-seat {
	fill: #1b2c3d;
}

.crt-zones:has(input[value="outside"]:checked) .z-paint {
	fill: #12466a;
	stroke: var(--crt-accent-hi);
}

.crt-zones:has(input[value="outside"]:checked) .z-glass,
.crt-zones:has(input[value="inside"]:checked) .z-glass {
	fill: #2f79a8;
}

.crt-zones:has(input[value="outside"]:checked) .z-wheel,
.crt-zones:has(input[value="inside"]:checked) .z-seat {
	fill: var(--crt-accent);
	filter: drop-shadow(0 0 8px rgba(58, 174, 240, 0.7));
}

.crt-zones:has(input[value="inside"]:checked) .z-interior {
	fill: #12466a;
}

.crt-zones__list {
	display: none;
}

.crt-zones:has(input[value="outside"]:checked) .crt-zones__list[data-z="outside"],
.crt-zones:has(input[value="inside"]:checked) .crt-zones__list[data-z="inside"] {
	display: grid;
}

/* Visit rhythm */
.crt-rhythm {
	padding: 30px;
	border-radius: 28px;
	background: linear-gradient(180deg, var(--crt-panel), var(--crt-bg));
	box-shadow: inset 0 0 0 1px var(--crt-line);
}

.crt-weeks {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.crt-weeks li {
	position: relative;
	display: grid;
	place-items: end center;
	height: 104px;
	padding-bottom: 8px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.05);
	font-size: 12px;
	color: var(--crt-muted);
	transition: background-color 0.6s var(--crt-ease), color 0.6s;
}

.crt-weeks li::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 16px;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	border-radius: 50%;
	background: var(--crt-accent);
	box-shadow: 0 0 14px rgba(58, 174, 240, 0.8);
	transform: scale(0);
	transition: transform 0.6s var(--crt-ease);
}

.crt-rhythm:has(input[value="2"]:checked) :is(.crt-w1, .crt-w3, .crt-w5, .crt-w7, .crt-w9, .crt-w11),
.crt-rhythm:has(input[value="4"]:checked) :is(.crt-w1, .crt-w5, .crt-w9) {
	background: rgba(58, 174, 240, 0.16);
	color: var(--crt-white);
}

.crt-rhythm:has(input[value="2"]:checked) :is(.crt-w1, .crt-w3, .crt-w5, .crt-w7, .crt-w9, .crt-w11)::before,
.crt-rhythm:has(input[value="4"]:checked) :is(.crt-w1, .crt-w5, .crt-w9)::before {
	transform: scale(1);
}

.crt-rhythm__price {
	margin: 22px 0 0;
	font-size: 17px;
	color: var(--crt-soft);
}

.crt-rhythm__price b {
	font-size: 30px;
	font-weight: 400;
	color: var(--crt-white);
}

.crt-rhythm__price [data-r] {
	display: none;
}

.crt-rhythm:has(input[value="2"]:checked) [data-r="2"],
.crt-rhythm:has(input[value="4"]:checked) [data-r="4"] {
	display: inline;
}

/* ---------------------------------------------------------------------------
   Motion: only when JavaScript runs and the visitor has not asked for less.
   The .crt-js class comes off after 2.5 seconds if the script never ran.
   --------------------------------------------------------------------------- */
@keyframes crt-sheen {
	from {
		background-position: 100% 0;
	}

	to {
		background-position: 0% 0;
	}
}

/* Long-form text: the privacy and cookie policies */
.crt-site .crt-prose {
	max-width: 760px;
	margin: 0 auto;
	color: var(--crt-soft);
	font-size: 17px;
	line-height: 1.7;
}

.crt-site .crt-prose h2 {
	margin: 48px 0 14px;
	color: var(--crt-text);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.25;
}

.crt-site .crt-prose p,
.crt-site .crt-prose ul {
	margin: 0 0 16px;
}

.crt-site .crt-prose ul {
	padding-left: 22px;
}

.crt-site .crt-prose li {
	margin-bottom: 8px;
}

.crt-site .crt-prose a {
	color: var(--crt-accent-hi);
	text-underline-offset: 4px;
}

.crt-site .crt-prose strong {
	color: var(--crt-text);
	font-weight: 600;
}

/* Recent work gallery: Elementor image widgets in a .crt-gallery container */
.crt-site .crt-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-flow: dense;
	gap: 16px;
}

.crt-site .crt-gallery__item {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: 24px;
	background: var(--crt-bg);
	box-shadow: 0 0 0 1px var(--crt-line);
}

.crt-site .crt-gallery__item--wide {
	grid-column: span 2;
	aspect-ratio: auto;
}

.crt-site .crt-gallery__item > .elementor-widget-container {
	height: 100%;
}

.crt-site .crt-gallery__item img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
	.crt-site .crt-gallery__item img {
		transition: transform 0.9s var(--crt-ease);
	}

	.crt-site .crt-gallery__item:hover img {
		transform: scale(1.04);
	}

	.crt-js .crt-reveal,
	.crt-js .crt-beads .crt-fig {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 1.2s var(--crt-ease), transform 1.2s var(--crt-ease);
		transition-delay: var(--crt-d, 0s);
	}

	.crt-js .crt-reveal.is-in,
	.crt-js .crt-beads .crt-fig.is-in {
		opacity: 1;
		transform: none;
	}

	.crt-js .crt-kicker.crt-reveal .elementor-heading-title {
		letter-spacing: 0.6em;
		transition: letter-spacing 1.8s var(--crt-ease);
	}

	.crt-js .crt-kicker.crt-reveal.is-in .elementor-heading-title {
		letter-spacing: 0.28em;
	}

	.crt-js .crt-sheen .elementor-heading-title {
		animation: crt-sheen 2.6s var(--crt-ease) 0.5s both;
	}

	.crt-js .crt-drop {
		opacity: 0;
		transform: translateY(-70px);
		transition: transform 1.2s var(--crt-ease) 0.3s, opacity 0.6s var(--crt-ease) 0.3s;
	}

	.crt-js .crt-drop--flat {
		transform: translateY(-70px) scale(0.4, 2.2);
		transition: transform 1.6s var(--crt-ease) 0.3s, opacity 0.6s var(--crt-ease) 0.3s;
	}

	.crt-js .is-in .crt-drop {
		opacity: 1;
		transform: none;
	}

	.crt-js .crt-phero__media.crt-reveal {
		transform: translateY(40px) scale(0.97);
	}

	.crt-js .crt-phero__media.crt-reveal.is-in {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.crt-site .crt-header__nav .crt-nav,
	.crt-site .crt-header__cta {
		display: none;
	}

	.crt-site .crt-header__inner {
		padding-left: 18px;
	}

	.crt-menu {
		display: block;
		position: relative;
	}

	.crt-menu summary {
		padding: 10px 18px;
		border-radius: 999px;
		box-shadow: inset 0 0 0 1px rgba(233, 236, 239, 0.3);
		list-style: none;
		cursor: pointer;
		font-size: 14px;
		font-weight: 500;
		color: var(--crt-text);
	}

	.crt-menu summary::-webkit-details-marker {
		display: none;
	}

	.crt-menu ul {
		position: absolute;
		right: 0;
		top: 54px;
		min-width: 250px;
		max-height: calc(100vh - 130px);
		overflow-y: auto;
		margin: 0;
		padding: 8px;
		list-style: none;
		border-radius: 20px;
		background: var(--crt-panel);
		box-shadow: 0 0 0 1px var(--crt-line), 0 20px 50px rgba(0, 0, 0, 0.55);
	}

	.crt-menu a {
		display: block;
		padding: 11px 16px;
		border-radius: 12px;
		color: var(--crt-text);
		text-decoration: none;
		line-height: 1.4;
	}

	.crt-menu a[aria-current="page"] {
		background: rgba(255, 255, 255, 0.07);
	}

	.crt-menu small {
		display: none;
	}

	.crt-menu .crt-menu__sub a {
		padding: 8px 16px 8px 30px;
		font-size: 14.5px;
		color: var(--crt-soft);
	}

	.crt-menu .crt-menu__head {
		padding: 11px 16px 4px;
		font-size: 13px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--crt-muted);
	}

	.crt-site .crt-head,
	.crt-site .crt-split,
	.crt-site .crt-split--even,
	.crt-site .crt-contact,
	.crt-zones__grid {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.crt-site .crt-head > .crt-text,
	.crt-site .crt-head > .elementor-widget-text-editor {
		justify-self: start;
	}

	.crt-site .crt-steps {
		grid-template-columns: 1fr 1fr;
	}

	.crt-site .crt-grid-3,
	.crt-site .crt-grid-2,
	.crt-site .crt-pcard--wide,
	.crt-extras {
		grid-template-columns: 1fr;
	}

	.crt-site .crt-bento {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 220px;
	}

	.crt-compare--hero .crt-compare__view {
		aspect-ratio: 660 / 420;
	}

	.crt-site .crt-cta {
		grid-template-columns: 1fr;
		padding: 50px 36px;
	}

	.crt-site .crt-cta__acts {
		align-items: flex-start;
	}

	.crt-site .crt-cta__acts .elementor-widget-text-editor {
		text-align: left;
	}

	.crt-site .crt-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 760px) {
	.crt-site .crt-wrap {
		width: min(var(--crt-wrap), 100% - 36px);
	}

	.crt-site .crt-gallery {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.crt-site .crt-gallery__item {
		border-radius: 18px;
	}

	.crt-site .crt-gallery__item--wide {
		aspect-ratio: 8 / 5;
	}

	.crt-site .crt-header__inner {
		width: calc(100% - 20px);
		height: 60px;
	}

	.crt-logo img {
		width: 116px;
	}

	.crt-site .crt-section {
		padding: 84px 0;
	}

	.crt-site .crt-section--tight {
		padding: 56px 0;
	}

	.crt-site .crt-khero {
		padding: calc(var(--crt-head-h) + 50px) 0 30px;
	}

	.crt-site .crt-khero__panel {
		width: calc(100% - 28px);
		margin-top: 48px;
	}

	.crt-site .crt-phero {
		padding-top: calc(var(--crt-head-h) + 50px);
	}

	.crt-site .crt-phero__media {
		width: calc(100% - 28px);
		margin-top: 48px;
		border-radius: 24px;
	}

	.crt-compare--hero .crt-compare__view {
		border-radius: 24px;
	}

	.crt-site .crt-bento {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}

	.crt-site .crt-tile {
		min-height: 190px;
	}

	.crt-site .crt-tile--big {
		grid-column: auto;
		grid-row: auto;
		min-height: 340px;
	}

	.crt-site .crt-tile--big .crt-h3 .elementor-heading-title {
		font-size: 38px;
	}

	.crt-site .crt-steps,
	.crt-beads {
		grid-template-columns: 1fr;
	}

	.crt-fig,
	.crt-coat,
	.crt-rhythm {
		padding: 16px;
		border-radius: 22px;
	}

	.crt-fig text {
		font-size: 22px;
	}

	.crt-weeks {
		gap: 4px;
	}

	.crt-weeks li {
		height: 76px;
		border-radius: 10px;
		font-size: 10.5px;
	}

	.crt-weeks li::before {
		width: 12px;
		height: 12px;
		margin-left: -6px;
	}

	.crt-site .crt-pcard {
		padding: 28px 22px;
	}

	.crt-site .crt-pcard__price p {
		font-size: 44px;
	}

	.crt-site .crt-cta {
		padding: 38px 22px;
		border-radius: 26px;
	}

	.crt-table {
		font-size: 14px;
	}

	.crt-table th,
	.crt-table td {
		padding: 10px 5px;
	}

	.crt-table thead th {
		font-size: 11px;
		letter-spacing: 0.03em;
	}

	.crt-quote {
		--wpforms-container-padding: 24px;
		--wpforms-container-border-radius: 24px;
	}

	.crt-site .crt-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Google rating link [crt_google_rating] and quoted reviews [crt_reviews]
   --------------------------------------------------------------------------- */
:root {
	--crt-star: #f6b73c;
}

.crt-site .crt-grating {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 10px;
	padding: 6px 2px;
	color: var(--crt-soft);
	font-size: 15px;
	line-height: 1.4;
	text-decoration: none;
}

.crt-site .crt-grating strong {
	color: var(--crt-white);
	font-weight: var(--crt-sw);
}

.crt-site .crt-grating:hover > span:not(.crt-stars),
.crt-site .crt-grating:focus-visible > span:not(.crt-stars) {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.crt-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--crt-star);
}

.crt-stars svg {
	display: block;
	fill: currentColor;
}

.crt-site .crt-grating-wrap {
	margin-top: 18px;
	text-align: center;
}

.crt-site .crt-footer .crt-grating {
	justify-content: flex-start;
	padding-inline: 0;
	font-size: inherit;
}

.crt-reviews {
	margin-top: 72px;
}

.crt-site .crt-reviews .crt-reviews__title {
	margin-bottom: 28px;
	font-size: clamp(30px, 3.4vw, 46px);
}

.crt-reviews__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.crt-review figure {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	margin: 0;
	padding: 26px;
	border-radius: var(--crt-radius);
	background: var(--crt-panel);
	box-shadow: inset 0 0 0 1px var(--crt-line);
}

.crt-review blockquote {
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
}

.crt-review blockquote p {
	margin: 0;
	color: var(--crt-text);
	font-size: 17px;
	line-height: 1.6;
}

.crt-review figcaption {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--crt-muted);
	font-size: 14px;
}

.crt-review figcaption strong {
	color: var(--crt-white);
	font-weight: var(--crt-sw);
}

/* ---------------------------------------------------------------------------
   Menu motion. The menus are native <details>, so they open and close with
   no script; site.js only holds them open briefly to play the closing
   animation. All movement is opacity and transform, and only runs when the
   visitor hasn't asked for reduced motion.
   --------------------------------------------------------------------------- */

/* Underline that draws in under the hovered, focused or current link. */
.crt-nav__list > li > a,
.crt-navdrop > summary {
	position: relative;
}

.crt-nav__list > li > a::before,
.crt-navdrop > summary::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -7px;
	height: 1.5px;
	border-radius: 2px;
	background: var(--crt-accent-hi);
	transform: scaleX(0);
	transform-origin: center;
}

.crt-nav__list > li > a:hover::before,
.crt-nav__list > li > a:focus-visible::before,
.crt-nav__list > li > a[aria-current="page"]::before,
.crt-navdrop > summary:hover::before,
.crt-navdrop > summary:focus-visible::before,
.crt-navdrop > summary.is-current::before,
.crt-navdrop[open] > summary::before {
	transform: scaleX(1);
}

/* Mobile "Menu" button: two lines that turn into a cross when open. */
.crt-menu summary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.crt-menu__icon {
	position: relative;
	display: inline-block;
	width: 16px;
	height: 10px;
}

.crt-menu__icon::before,
.crt-menu__icon::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
}

.crt-menu__icon::before {
	top: 0;
}

.crt-menu__icon::after {
	bottom: 0;
}

.crt-menu[open] .crt-menu__icon::before {
	transform: translateY(4.25px) rotate(45deg);
}

.crt-menu[open] .crt-menu__icon::after {
	transform: translateY(-4.25px) rotate(-45deg);
}

@media (prefers-reduced-motion: no-preference) {
	.crt-nav__list > li > a::before,
	.crt-navdrop > summary::before {
		transition: transform 0.45s var(--crt-ease);
	}

	.crt-menu__icon::before,
	.crt-menu__icon::after {
		transition: transform 0.4s var(--crt-ease);
	}

	/* Panels open from the button they belong to. */
	.crt-navdrop[open] > .crt-navdrop__menu {
		transform-origin: 30px 0;
		animation: crt-menu-in 0.42s var(--crt-ease) both;
	}

	.crt-menu[open] > nav > ul {
		transform-origin: calc(100% - 40px) 0;
		animation: crt-menu-in 0.42s var(--crt-ease) both;
	}

	.crt-navdrop.is-closing > .crt-navdrop__menu,
	.crt-menu.is-closing > nav > ul {
		animation: crt-menu-out 0.18s ease-in both;
	}

	/* Items follow one after another. */
	.crt-navdrop[open] .crt-navdrop__menu > li,
	.crt-menu[open] nav li {
		animation: crt-menu-item 0.5s var(--crt-ease) both;
	}

	.crt-navdrop[open] .crt-navdrop__menu > li:nth-child(2),
	.crt-menu[open] nav li:nth-child(2) {
		animation-delay: 0.04s;
	}

	.crt-navdrop[open] .crt-navdrop__menu > li:nth-child(3),
	.crt-menu[open] nav li:nth-child(3) {
		animation-delay: 0.08s;
	}

	.crt-navdrop[open] .crt-navdrop__menu > li:nth-child(4),
	.crt-menu[open] nav li:nth-child(4) {
		animation-delay: 0.12s;
	}

	.crt-navdrop[open] .crt-navdrop__menu > li:nth-child(5),
	.crt-menu[open] nav li:nth-child(5) {
		animation-delay: 0.16s;
	}

	.crt-navdrop[open] .crt-navdrop__menu > li:nth-child(6),
	.crt-menu[open] nav li:nth-child(6) {
		animation-delay: 0.2s;
	}

	.crt-navdrop[open] .crt-navdrop__menu > li:nth-child(7),
	.crt-menu[open] nav li:nth-child(7) {
		animation-delay: 0.24s;
	}

	.crt-navdrop[open] .crt-navdrop__menu > li:nth-child(n+8),
	.crt-menu[open] nav li:nth-child(n+8) {
		animation-delay: 0.28s;
	}

	.crt-navdrop.is-closing .crt-navdrop__menu > li,
	.crt-menu.is-closing nav li {
		animation: none;
	}
}

@keyframes crt-menu-in {
	from {
		opacity: 0;
		transform: translateY(-10px) scale(0.96);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes crt-menu-out {
	from {
		opacity: 1;
		transform: none;
	}

	to {
		opacity: 0;
		transform: translateY(-6px) scale(0.98);
	}
}

@keyframes crt-menu-item {
	from {
		opacity: 0;
		transform: translateX(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Respect the visitor's reduced-motion setting. */
@media (prefers-reduced-motion: reduce) {
	.crt-site *,
	.crt-site *::before,
	.crt-site *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}