/*
 * Hydro Shield — Coating product page (/products/coating/).
 * Copied from page-ppf.css's matured pattern (2026-09-17 pages-completion
 * command) via prefix substitution (hs-ppf → hs-coat) — see that file for
 * the full design history. Content/data below is Coating-specific.
 * Own visual identity, not a homepage-section reskin: the Hero is a
 * centered copy block over a large full-width cinematic banner image
 * (image as the visual focus, per the brief) rather than the homepage
 * Hero's asymmetric side-by-side split. Tone alternates graphite/grey-dark
 * the same way the homepage does — Hero/Overview/Process stay graphite,
 * Coverage/FAQ/the closing CTA step to grey-dark — so the closing CTA here
 * flows straight into the global Footer's own grey-dark CTA band. Cyan
 * stays a restrained accent (eyebrows, icons, FAQ markers only). Every
 * button here duplicates the established `.hs-*__cta` visual style under
 * its own `.hs-coat__cta` class — this page doesn't load hero.css/
 * contact-section.css, so it can't reach into their classes, matching how
 * every homepage section already defines its own CTA styles rather than
 * sharing one global button class.
 *
 * REWORKED 2026-09-17 to 7 sections (was 5) with real long-form copy — see
 * page-ppf.php's header comment for the reasoning (why zig-zag image
 * placement was deliberately rejected, why a "How It's Applied" + FAQ
 * section were added).
 */

/* ================= Shared buttons ================= */

.hs-coat__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	padding: 16px 30px;
	border-radius: var(--hs-radius-sm);
	transition: transform var(--hs-duration-fast) var(--hs-ease-standard), box-shadow var(--hs-duration-fast) var(--hs-ease-standard), background var(--hs-duration-fast) var(--hs-ease-standard), border-color var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-coat__cta--primary {
	background: var(--hs-color-off-white);
	color: var(--hs-color-graphite);
	border: 1px solid var(--hs-color-off-white);
}

.hs-coat__cta--primary:hover,
.hs-coat__cta--primary:focus-visible {
	background: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.55);
}

.hs-coat__cta--secondary {
	background: transparent;
	color: var(--hs-color-text);
	border: 1px solid rgba(240, 240, 232, 0.28);
}

.hs-coat__cta--secondary:hover,
.hs-coat__cta--secondary:focus-visible {
	border-color: var(--hs-color-off-white);
	background: rgba(240, 240, 232, 0.06);
	transform: translateY(-1px);
}

.hs-coat__cta:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 3px;
}

/* ================= 1. Hero ================= */
/* REBUILT 2026-09-21 to mirror page-ppf.css's finished hero pattern 1:1
   (own hs-coat-* classes throughout) — see page-ppf.php's Hero comment for
   the reasoning. Two columns side by side: a bounded/rounded gallery box
   on the LEFT, an unboxed info card on the RIGHT sitting directly on the
   Hero's own dark background — replaces the old full-bleed-photo +
   floating light-card pattern entirely (no more .hs-coat-hero__scrim). */

.hs-coat-hero {
	position: relative;
	overflow: hidden;
	background: var(--hs-color-bg);
	padding: var(--hs-space-6) 0;
}


.hs-coat-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 600px) 1fr;
	align-items: start;
	gap: var(--hs-space-5);
	max-width: 1360px;
	margin: 0 auto;
	width: 100%;
	padding: 0 var(--hs-space-4);
}

.hs-coat-hero__gallery {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	height: 420px;
	background: rgba(240, 240, 232, 0.04);
}

.hs-coat-hero__gallery:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: -2px;
}

.hs-coat-hero__counter {
	position: absolute;
	z-index: 3;
	top: var(--hs-space-4);
	right: var(--hs-space-4);
	padding: 5px 11px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--hs-color-off-white);
	background: rgba(26, 26, 29, 0.45);
	border: 1px solid rgba(240, 240, 232, 0.22);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.hs-coat-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hs-coat-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	overflow: hidden;
}

.hs-coat-hero__slide.is-active {
	opacity: 1;
}

/* contain, not cover (unlike every other product page's hero slider) —
   these 4 slides are real product bottle photography (2026-09-21, see
   inc/demo-content.php's comment), tall/narrow studio shots rather than
   wide scenes, so cropping them to fill the landscape gallery box would
   cut off the cap or base. Letterboxed on the gallery box's own dark
   background instead, matching how the source photos' black background
   already reads. */
.hs-coat-hero__slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	will-change: transform;
}

.hs-coat-hero__arrows {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: var(--hs-space-4);
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
}

.hs-coat-hero__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	appearance: none;
	color: var(--hs-color-text);
	background: rgba(26, 26, 29, 0.45);
	border: 1px solid rgba(240, 240, 232, 0.3);
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--hs-duration-fast) var(--hs-ease-standard), border-color var(--hs-duration-fast) var(--hs-ease-standard), transform var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-coat-hero__arrow:hover,
.hs-coat-hero__arrow:focus-visible {
	background: rgba(26, 26, 29, 0.75);
	border-color: var(--hs-color-off-white);
}

.hs-coat-hero__arrow:active {
	transform: scale(0.94);
}

.hs-coat-hero__arrow:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 2px;
}

.hs-coat-hero__tagline {
	position: absolute;
	z-index: 2;
	top: var(--hs-space-5);
	right: var(--hs-space-4);
	margin: 0;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--hs-color-text-muted);
	opacity: 0.6;
}

@media (max-width: 1023.98px) {
	.hs-coat-hero__tagline {
		display: none;
	}
}

.hs-coat-hero__visual {
	display: flex;
	flex-direction: column;
}

.hs-coat-hero__thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.hs-coat-hero__thumb {
	flex: 1;
	max-width: 96px;
	aspect-ratio: 4 / 3;
	padding: 0;
	overflow: hidden;
	appearance: none;
	background: rgba(240, 240, 232, 0.05);
	border: 2px solid rgba(240, 240, 232, 0.14);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color var(--hs-duration-fast) var(--hs-ease-standard), opacity var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-coat-hero__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.7;
	transition: opacity var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-coat-hero__thumb:hover {
	border-color: var(--hs-color-text-muted);
}

.hs-coat-hero__thumb:hover img {
	opacity: 0.9;
}

.hs-coat-hero__thumb.is-active {
	border-color: var(--hs-color-accent);
	box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.14);
}

.hs-coat-hero__thumb.is-active img {
	opacity: 1;
}

.hs-coat-hero__thumb:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 2px;
}

.hs-coat-hero__caption {
	margin: 14px 0 0;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	color: var(--hs-color-text-muted);
	opacity: 0.65;
}

/* ==================================================================
   Hero information card — recoloured onto the shared Hydro Shield
   palette (was a bespoke light off-white/blur card, structurally
   referencing the client's own reference site — see git history). Now
   unboxed, sitting directly on the Hero's own dark background, matching
   every other product page. */
.hs-coat-hero__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 460px;
}

.hs-coat-hero__tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 14px;
	padding: 5px 12px;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hs-color-graphite);
	background: #ffffff;
	border-radius: 999px;
}

.hs-coat-hero__tag::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--hs-color-accent);
	flex-shrink: 0;
}

/* Enlarged (direct user request, "saray pages ko products kay aisay ee
   design kar dooo" — mirrors PPF's enlarged tag pill, which took over as
   the card's product-name element once the visible heading/description
   were removed). */
.hs-coat-hero__tag--lg {
	margin: 0 0 20px;
	padding: 9px 18px;
	font-size: 1rem;
	letter-spacing: 0.04em;
}

.hs-coat-hero__tag--lg::before {
	width: 7px;
	height: 7px;
}

.hs-coat-hero__heading--sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hs-coat-hero__divider {
	height: 1px;
	margin: 4px 0 16px;
	background: rgba(240, 240, 232, 0.12);
}

.hs-coat-hero__tiers-label {
	margin: 0 0 8px;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hs-color-text-muted);
}

/* 4 tiers here (not 3 like PPF), including the two-word "Graphene 10H" —
   font-size sits a notch smaller than PPF's own tier tabs so all 4 fit on
   one row without breaking layout (same reasoning this page's tier tabs
   have used since the real 4-product data was first added). */
.hs-coat-hero__tiers {
	display: flex;
	gap: 6px;
	margin: 0 0 4px;
}

.hs-coat-hero__tier {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 9px 4px;
	appearance: none;
	font: inherit;
	font-size: 0.6rem;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-align: center;
	color: var(--hs-color-off-white);
	background: rgba(240, 240, 232, 0.05);
	border: 1px solid rgba(240, 240, 232, 0.3);
	border-radius: 8px;
	cursor: pointer;
	transition: background var(--hs-duration-fast) var(--hs-ease-standard), border-color var(--hs-duration-fast) var(--hs-ease-standard), color var(--hs-duration-fast) var(--hs-ease-standard), transform var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-coat-hero__tier:hover {
	border-color: var(--hs-color-text-muted);
	background: rgba(240, 240, 232, 0.1);
}

.hs-coat-hero__tier.is-active {
	background: rgba(0, 229, 255, 0.08);
	border: 2px solid var(--hs-color-accent);
	color: var(--hs-color-off-white);
	box-shadow: 0 0 18px -4px rgba(0, 229, 255, 0.55);
}

.hs-coat-hero__tier.is-active:hover {
	background: rgba(0, 229, 255, 0.13);
}

.hs-coat-hero__tier:active {
	transform: translateY(1px);
}

.hs-coat-hero__tier-check {
	display: none;
	align-items: center;
	justify-content: center;
	color: var(--hs-color-accent);
}

.hs-coat-hero__tier.is-active .hs-coat-hero__tier-check {
	display: inline-flex;
}

.hs-coat-hero__tier-badge {
	display: none;
	position: absolute;
	top: -8px;
	right: -8px;
	width: 18px;
	height: 18px;
	align-items: center;
	justify-content: center;
	color: var(--hs-color-graphite);
	background: var(--hs-color-accent);
	border-radius: 50%;
	box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.5);
}

.hs-coat-hero__tier.is-active .hs-coat-hero__tier-badge {
	display: flex;
}

.hs-coat-hero__tier:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 2px;
}

/* One horizontal bordered strip, icon-on-top-center columns — mirrors
   PPF's spec panel. Coating's own real 5 spec columns (Surface
   Protection/Self-Healing Tech/Water Spot Resistance/Finish/Origin)
   unchanged, per-tier values swapped by page-coating.js exactly as before. */
.hs-coat-hero__specs {
	list-style: none;
	margin: 0 0 4px;
	padding: 14px 6px;
	display: flex;
	background: rgba(240, 240, 232, 0.05);
	border: 1px solid rgba(240, 240, 232, 0.12);
	border-radius: 10px;
}

.hs-coat-hero__specs li {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0 4px;
	text-align: center;
	border-right: 1px solid rgba(240, 240, 232, 0.1);
}

.hs-coat-hero__specs li:last-child {
	border-right: none;
}

.hs-coat-hero__specs-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hs-color-text-muted);
	opacity: 0.9;
}

.hs-coat-hero__specs-icon svg {
	width: 17px;
	height: 17px;
	stroke-width: 1.4;
}

.hs-coat-hero__specs-label {
	font-size: 0.52rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--hs-color-text-muted);
}

.hs-coat-hero__specs-value {
	font-size: 0.74rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--hs-color-off-white);
}

/* Compact single-row supporting benefits (mirrors PPF's) — small, quiet,
   below the spec panel. */
.hs-coat-hero__benefits {
	list-style: none;
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(240, 240, 232, 0.1);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}

.hs-coat-hero__benefits li {
	display: flex;
	align-items: center;
	gap: 5px;
}

.hs-coat-hero__benefits-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hs-color-text-muted);
	opacity: 0.85;
}

.hs-coat-hero__benefits-icon svg {
	width: 12px;
	height: 12px;
	stroke-width: 1.6;
}

.hs-coat-hero__benefits-label {
	font-size: 0.62rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--hs-color-text-muted);
}

.hs-coat-hero__demo-note {
	margin: 0;
	font-size: 0.68rem;
	line-height: 1.45;
	font-style: italic;
	color: var(--hs-color-text-muted);
}

/* Price panel wrapper + cyan accent bar — mirrors PPF's. Coating's tiers
   have no RRP/badge fields, so this stays a plain label + big value, no
   invented discount data. */
.hs-coat-hero__price-panel {
	display: flex;
	gap: 14px;
	padding: 16px 18px;
	background: rgba(240, 240, 232, 0.04);
	border: 1px solid rgba(240, 240, 232, 0.1);
	border-radius: 10px;
}

.hs-coat-hero__price-bar {
	width: 3px;
	flex-shrink: 0;
	align-self: stretch;
	background: var(--hs-color-accent);
	border-radius: 2px;
}

.hs-coat-hero__price-body {
	flex: 1;
	min-width: 0;
}

.hs-coat-hero__price-label {
	margin: 0 0 2px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hs-color-text-muted);
}

.hs-coat-hero__price {
	margin: 4px 0 6px;
}

/* Price + "Add to Cart" sit side by side (direct follow-up: button moved
   next to the price instead of sitting in the actions row below the
   tiers) — wraps to its own line on very narrow cards rather than
   squeezing the price. */
.hs-coat-hero__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 4px 0 6px;
}

.hs-coat-hero__price-row .hs-coat-hero__price {
	margin: 0;
}

.hs-coat-hero__price-cta {
	flex-shrink: 0;
	white-space: nowrap;
}

/* Standalone "Get a Quote" — the old two-button actions row is gone; this
   is now the only button between the price panel and the tier tabs, so it
   takes the full card width instead of sitting side by side with anything. */
.hs-coat-hero__order-cta {
	width: 100%;
	margin: 0 0 4px;
}

.hs-coat-hero__price-value {
	font-family: var(--hs-font-display);
	font-size: 2.2rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--hs-color-off-white);
}

/* "Add to Cart" solid/primary (cyan, glowing), "Get a Quote" outline/
   secondary — mirrors PPF's final CTA treatment. "Add to Cart" is wired to
   the real WhatsApp destination (see page-coating.php's markup) — no fake
   checkout was added, this site has none anywhere. */
.hs-coat-hero__card .hs-coat__cta {
	padding: 11px 20px;
	font-size: 0.82rem;
	font-weight: 600;
	border-radius: 8px;
	transition: transform var(--hs-duration-fast) var(--hs-ease-standard), box-shadow var(--hs-duration-fast) var(--hs-ease-standard), background var(--hs-duration-fast) var(--hs-ease-standard), border-color var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-coat-hero__card .hs-coat__cta:focus-visible {
	outline-color: var(--hs-color-accent);
}

.hs-coat-hero__card .hs-coat__cta--primary {
	background: var(--hs-color-accent);
	color: var(--hs-color-graphite);
	border: 1px solid var(--hs-color-accent);
	box-shadow: 0 0 20px -4px rgba(0, 229, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.hs-coat-hero__card .hs-coat__cta--primary:hover,
.hs-coat-hero__card .hs-coat__cta--primary:focus-visible {
	background: #33eaff;
	transform: translateY(-1px);
	box-shadow: 0 0 28px -4px rgba(0, 229, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.hs-coat-hero__card .hs-coat__cta--primary:active {
	transform: translateY(0);
	box-shadow: 0 0 14px -4px rgba(0, 229, 255, 0.5);
}

.hs-coat-hero__card .hs-coat__cta--secondary {
	color: var(--hs-color-text);
	background: transparent;
	border-color: rgba(240, 240, 232, 0.28);
}

.hs-coat-hero__card .hs-coat__cta--secondary:hover,
.hs-coat-hero__card .hs-coat__cta--secondary:focus-visible {
	border-color: var(--hs-color-off-white);
	background: rgba(240, 240, 232, 0.06);
	transform: translateY(-1px);
}

.hs-coat-hero__card .hs-coat__cta--secondary:active {
	transform: translateY(0);
	background: rgba(240, 240, 232, 0.03);
}

/* ================= Renders Gallery (inside the Hero) ================= */
/* Same pattern as page-ppf.css's equivalent section (own hs-coat-*
   classes) — full-width single row of small tiles sitting below the
   two-column Hero grid, still inside .hs-coat-hero so it reads as part
   of the Hero (no seam, same background) rather than a separate section. */

.hs-coat-hero__gallery-row {
	position: relative;
	z-index: 1;
	max-width: 1360px;
	margin: 24px auto 0;
	padding: 24px var(--hs-space-4) 0;
	border-top: 1px solid rgba(240, 240, 232, 0.1);
}

.hs-coat-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--hs-space-3);
}

/* ONE row, always — same strategy as PPF's own gallery row
   (`repeat(7, 1fr)`, its own fixed image count stretched to fill the
   Hero's full width). Coating's image count keeps changing as more get
   added, so hardcoding a column count here was wrong twice already (4,
   then 6, then 9) — `--hs-coat-gallery-count` is set as an inline custom
   property in page-coating.php, computed from `count( $hs_gallery_keys )`,
   so it can never drift out of sync with the array again. Deliberately a
   custom property consumed by `var()` here rather than setting
   `grid-template-columns` directly inline — an inline property
   declaration would always beat the mobile wrap override below
   (1023.98px) regardless of viewport, since inline style outranks any
   class selector; routing it through a variable keeps the responsive
   override in normal control. */
.hs-coat-gallery__grid--full {
	grid-template-columns: repeat(var(--hs-coat-gallery-count, 6), 1fr);
}

.hs-coat-gallery__item {
	margin: 0;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
	background: var(--hs-color-graphite);
}

.hs-coat-gallery__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--hs-ease-standard);
}

.hs-coat-gallery__item:hover img,
.hs-coat-gallery__item:focus-within img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.hs-coat-gallery__item img {
		transition: none;
	}
}

/* ================= 2. Product Overview ================= */

.hs-coat-overview {
	background: var(--hs-color-bg);
	border-top: 1px solid rgba(240, 240, 232, 0.06);
	padding-top: var(--hs-space-6);
	padding-bottom: var(--hs-space-6);
}

.hs-coat-overview__inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 var(--hs-space-4);
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--hs-space-6);
	align-items: center;
}


.hs-coat-overview__heading {
	margin: 0 0 var(--hs-space-3);
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--hs-color-text);
}

.hs-coat-overview__text {
	margin: 0 0 var(--hs-space-3);
	max-width: 52ch;
	font-size: 1.02rem;
	line-height: 1.65;
	color: var(--hs-color-text-muted);
}

.hs-coat-overview__text:last-of-type {
	margin-bottom: 0;
}

.hs-coat-overview__list-label {
	margin: var(--hs-space-4) 0 var(--hs-space-3);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hs-color-grey-mid);
}

/* Checkmark tick list (direct user request: "detail tick points clearly") —
   reused by Coverage's list further down too. */
.hs-coat-overview__ticks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--hs-space-3);
}

.hs-coat-overview__ticks li {
	position: relative;
	padding-left: 26px;
	font-size: 0.96rem;
	line-height: 1.5;
	color: var(--hs-color-text);
}

.hs-coat-overview__ticks li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: -1px;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	color: var(--hs-color-graphite);
	background: var(--hs-color-accent);
	border-radius: 50%;
}

/* Labelled two-photo comparison — see page-ppf.php's inline comment for why
   this isn't a fabricated same-car before/after. */
.hs-coat-overview__compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(240, 240, 232, 0.08);
}

.hs-coat-overview__compare-panel {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	background: var(--hs-color-graphite);
}

.hs-coat-overview__compare-panel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hs-coat-overview__compare-panel figcaption {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 1;
	padding: 5px 10px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hs-color-text);
	background: rgba(26, 26, 29, 0.72);
	border-radius: var(--hs-radius-sm);
}

.hs-coat-overview__compare-panel:last-child figcaption {
	color: var(--hs-color-graphite);
	background: var(--hs-color-accent);
}

/* Single full-width before/after image (2026-09-21, direct correction —
   the real before/after car comparison already has BEFORE/AFTER baked
   into the graphic itself, so it replaces the earlier two-separate-panel
   layout entirely rather than being split into two crops). `contain`,
   not `cover` — this is a real composite with its own checklist text on
   both sides, cropping would cut labels off. */
.hs-coat-overview__compare--single {
	grid-template-columns: 1fr;
}

.hs-coat-overview__compare-panel--full {
	aspect-ratio: 1312 / 1199;
	background: var(--hs-color-graphite);
}

.hs-coat-overview__compare-panel--full img {
	object-fit: contain;
}

/* ================= 3. How It's Applied ================= */
/* Mirrors Coverage's two-column grid (media left, copy right) rather than
   flipping sides — see page-ppf.php's header comment: this page keeps every
   image on the same side deliberately, since the shared demo images are
   decorative and NN/g's research found alternating sides hurts scanning
   for decorative (non-informational) imagery. Only the background tone
   alternates (graphite here, grey-dark on Coverage) for visual rhythm. */

.hs-coat-process {
	background: var(--hs-color-bg);
	border-top: 1px solid rgba(240, 240, 232, 0.06);
	padding-top: var(--hs-space-6);
	padding-bottom: var(--hs-space-6);
}

.hs-coat-process__inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 var(--hs-space-4);
	display: grid;
	grid-template-columns: 0.72fr 1.28fr;
	gap: var(--hs-space-6);
	align-items: center;
}

.hs-coat-process__media {
	position: relative;
	aspect-ratio: 2 / 3;
	max-width: 380px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--hs-color-graphite);
	box-shadow: inset 0 0 0 1px rgba(240, 240, 232, 0.08);
}

.hs-coat-process__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.hs-coat-process__heading {
	margin: 0 0 var(--hs-space-3);
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--hs-color-text);
}

.hs-coat-process__text {
	margin: 0 0 var(--hs-space-4);
	max-width: 56ch;
	font-size: 1.02rem;
	line-height: 1.65;
	color: var(--hs-color-text-muted);
}

.hs-coat-process__steps {
	list-style: none;
	margin: 0;
	padding: var(--hs-space-4) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--hs-space-3);
	border-top: 1px solid rgba(240, 240, 232, 0.1);
}

.hs-coat-process__steps li {
	display: flex;
	align-items: baseline;
	gap: var(--hs-space-3);
}

.hs-coat-process__step-number {
	flex-shrink: 0;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--hs-color-grey-mid);
	font-variant-numeric: tabular-nums;
}

.hs-coat-process__step-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hs-coat-process__step-label {
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--hs-color-text);
}

.hs-coat-process__step-text {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--hs-color-text-muted);
}

/* ================= 4. Where PPF Fits ================= */

.hs-coat-coverage {
	background: var(--hs-color-surface);
	padding-top: var(--hs-space-6);
	padding-bottom: var(--hs-space-6);
}

.hs-coat-coverage__inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 var(--hs-space-4);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hs-space-6);
	align-items: center;
}

.hs-coat-coverage__media {
	position: relative;
	aspect-ratio: 5 / 4;
	border-radius: 10px;
	overflow: hidden;
	background: var(--hs-color-graphite);
	box-shadow: inset 0 0 0 1px rgba(240, 240, 232, 0.08);
}

.hs-coat-coverage__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hs-coat-coverage__heading {
	margin: 0 0 var(--hs-space-3);
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--hs-color-text);
}

.hs-coat-coverage__intro {
	margin: 0 0 var(--hs-space-4);
	max-width: 52ch;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--hs-color-text-muted);
}

.hs-coat-coverage__list {
	list-style: none;
	margin: 0 0 var(--hs-space-4);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--hs-space-3);
	border-top: 1px solid rgba(240, 240, 232, 0.1);
	padding-top: var(--hs-space-4);
}

.hs-coat-coverage__list li {
	position: relative;
	padding-left: 26px;
	font-size: 1rem;
	color: var(--hs-color-text);
}

/* Checkmark ticks — same device as .hs-coat-overview__ticks above (direct
   user request: "detail tick points clearly"). */
.hs-coat-coverage__list li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 2px;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	color: var(--hs-color-graphite);
	background: var(--hs-color-accent);
	border-radius: 50%;
}

.hs-coat-coverage__note {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--hs-color-text-muted);
}

/* ================= 5. Why Customers Consider PPF ================= */

.hs-coat-why {
	background: var(--hs-color-bg);
	padding-top: var(--hs-space-6);
	padding-bottom: var(--hs-space-6);
}

.hs-coat-why__inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 var(--hs-space-4);
}

.hs-coat-why__heading {
	margin: 0 0 var(--hs-space-5);
	max-width: 46ch;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--hs-color-text);
}

.hs-coat-why__points {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--hs-space-5);
	padding-top: var(--hs-space-5);
	border-top: 1px solid rgba(240, 240, 232, 0.1);
}

.hs-coat-why__point-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--hs-space-3);
	border-radius: 50%;
	border: 1px solid rgba(240, 240, 232, 0.14);
	color: var(--hs-color-accent);
}

.hs-coat-why__point-label {
	margin: 0 0 8px;
	font-size: 1.1rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--hs-color-text);
}

.hs-coat-why__point-text {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--hs-color-text-muted);
	max-width: 32ch;
}

/* ================= 6. FAQ ================= */
/* Single narrow column (not full-width) — an FAQ reads as a list of short
   answers, not a layout worth splitting into two columns; matches the
   "keep the actual reading column narrow" guidance the rest of this page's
   copy already follows (52-56ch max-widths above). Native <details>/
   <summary> in the markup — no JS needed for expand/collapse, and it's
   keyboard/screen-reader operable for free. */

.hs-coat-faq {
	background: var(--hs-color-surface);
	border-top: 1px solid rgba(240, 240, 232, 0.06);
	padding-top: var(--hs-space-6);
	padding-bottom: var(--hs-space-6);
}

.hs-coat-faq__inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 var(--hs-space-4);
}

.hs-coat-faq__intro {
	margin: 0 0 var(--hs-space-5);
}


.hs-coat-faq__heading {
	margin: 0;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--hs-color-text);
}

.hs-coat-faq__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hs-coat-faq__item {
	background: var(--hs-color-graphite);
	border: 1px solid rgba(240, 240, 232, 0.08);
}

.hs-coat-faq__item + .hs-coat-faq__item {
	border-top: none;
}

.hs-coat-faq__question {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: var(--hs-space-4) 44px var(--hs-space-4) var(--hs-space-4);
	font-size: 1rem;
	font-weight: 600;
	color: var(--hs-color-text);
	transition: color var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-coat-faq__question::-webkit-details-marker {
	display: none;
}

.hs-coat-faq__question::after {
	content: '+';
	position: absolute;
	right: var(--hs-space-4);
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.3rem;
	font-weight: 400;
	color: var(--hs-color-accent);
	transition: transform var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-coat-faq__item[open] > .hs-coat-faq__question::after {
	transform: translateY(-50%) rotate(45deg);
}

.hs-coat-faq__question:hover,
.hs-coat-faq__question:focus-visible {
	color: var(--hs-color-accent);
}

.hs-coat-faq__question:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: -2px;
}

.hs-coat-faq__answer {
	margin: 0;
	padding: 0 var(--hs-space-4) var(--hs-space-4);
	max-width: 68ch;
	font-size: 0.96rem;
	line-height: 1.65;
	color: var(--hs-color-text-muted);
}

/* ================= 7. Final Enquiry CTA ================= */

.hs-coat-cta {
	background: var(--hs-color-surface);
	border-top: 1px solid rgba(240, 240, 232, 0.06);
	padding-top: var(--hs-space-6);
	padding-bottom: var(--hs-space-6);
}

.hs-coat-cta__inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 var(--hs-space-4);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hs-space-5);
}

.hs-coat-cta__copy {
	max-width: 52ch;
}

.hs-coat-cta__heading {
	margin: 0 0 var(--hs-space-3);
	font-size: clamp(1.8rem, 3.2vw, 2.4rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--hs-color-text);
}

.hs-coat-cta__text {
	margin: 0 0 var(--hs-space-4);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--hs-color-text-muted);
}

.hs-coat-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hs-space-3);
}

.hs-coat-cta__contact {
	flex-shrink: 0;
	padding: var(--hs-space-4);
	border: 1px solid rgba(240, 240, 232, 0.1);
	border-radius: 10px;
	background: var(--hs-color-graphite);
}

.hs-coat-cta__contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hs-coat-cta__contact-list li {
	font-size: 0.94rem;
	color: var(--hs-color-text-muted);
}

.hs-coat-cta__contact-list a {
	color: var(--hs-color-text);
	text-decoration: none;
	border-bottom: 1px solid rgba(240, 240, 232, 0.25);
	padding-bottom: 1px;
	transition: color var(--hs-duration-fast) var(--hs-ease-standard), border-color var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-coat-cta__contact-list a:hover,
.hs-coat-cta__contact-list a:focus-visible {
	color: var(--hs-color-accent);
	border-color: var(--hs-color-accent);
}

.hs-coat-cta__contact-list a:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 3px;
	border-radius: var(--hs-radius-sm);
}

/* ================= Responsive ================= */

@media (max-width: 1023.98px) {
	.hs-coat-overview__inner {
		grid-template-columns: 1fr;
		gap: var(--hs-space-5);
	}

	.hs-coat-process__inner {
		grid-template-columns: 1fr;
		gap: var(--hs-space-5);
	}

	.hs-coat-process__media {
		max-width: 280px;
	}

	.hs-coat-coverage__inner {
		grid-template-columns: 1fr;
		gap: var(--hs-space-5);
	}

	.hs-coat-why__points {
		grid-template-columns: 1fr 1fr;
	}

	.hs-coat-why__points > :nth-child(3) {
		grid-column: 1 / -1;
	}

	/* 4 equal columns get too narrow once the Hero itself is no longer
	   wide (tablet/mobile) — fall back to a wrapping grid instead of
	   shrinking all 4 into a cramped row. */
	.hs-coat-gallery__grid--full {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}

	.hs-coat-hero__inner {
		grid-template-columns: 1fr;
	}

	.hs-coat-hero__gallery {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.hs-coat-hero__card {
		max-width: none;
	}
}

@media (max-width: 899.98px) {
	.hs-coat-cta__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.hs-coat-cta__contact {
		align-self: stretch;
	}
}

@media (max-width: 639.98px) {
	.hs-coat-overview,
	.hs-coat-process,
	.hs-coat-coverage,
	.hs-coat-why,
	.hs-coat-faq,
	.hs-coat-cta {
		padding-top: var(--hs-space-5);
		padding-bottom: var(--hs-space-5);
	}

	.hs-coat-hero {
		padding-top: var(--hs-space-5);
		padding-bottom: var(--hs-space-5);
	}

	.hs-coat-process__media {
		max-width: 220px;
	}

	.hs-coat-hero__card {
		max-width: none;
	}

	/* The card goes full-width right above these at this breakpoint (below),
	   which would leave the arrows sitting on top of/behind it — a manual
	   slider control isn't essential on a touch/scroll-first mobile layout,
	   so they're hidden here rather than repositioned. */
	.hs-coat-hero__arrows {
		display: none;
	}

	.hs-coat-hero__price-row {
		flex-direction: column;
		align-items: stretch;
	}

	.hs-coat-hero__price-cta {
		width: 100%;
	}

	.hs-coat-overview__compare {
		grid-template-columns: 1fr;
	}

	.hs-coat-overview__compare-panel {
		aspect-ratio: 16 / 10;
	}

	.hs-coat-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hs-coat__cta {
		width: 100%;
		text-align: center;
	}

	.hs-coat-why__points {
		grid-template-columns: 1fr;
	}

	.hs-coat-why__points > :nth-child(3) {
		grid-column: auto;
	}

	/* ============ MOBILE REFINEMENT (2026-09-25) ============
	   Same fix as page-ppf.css: 5-column specs strip + 3-across tier row
	   both rendered cramped/compressed at phone widths. Desktop/tablet
	   untouched. */
	.hs-coat-hero__specs {
		flex-wrap: wrap;
		padding: 10px;
	}

	.hs-coat-hero__specs li {
		flex: 1 1 calc(50% - 5px);
		border-right: none;
		border-bottom: 1px solid rgba(240, 240, 232, 0.1);
		padding: 10px 4px;
	}

	.hs-coat-hero__specs li:last-child {
		flex-basis: 100%;
		border-bottom: none;
	}

	.hs-coat-hero__specs-label {
		font-size: 0.64rem;
	}

	.hs-coat-hero__specs-value {
		font-size: 0.85rem;
	}

	.hs-coat-hero__tiers {
		gap: 6px;
	}

	.hs-coat-hero__tier {
		padding: 13px 4px;
		font-size: 0.72rem;
	}

	.hs-coat-hero__card .hs-coat__cta {
		padding: 14px 20px;
		font-size: 0.86rem;
	}
}