/*
Theme Name: Castle Niche
Theme URI: https://www.castlemotors.com
Author: CodeCasa Studios
Description: Shared theme for Castle Motors' niche SEO sites (Jimny, Defender, Porsche). Copy and behaviour come from config/<niche>.php, selected by the CASTLE_NICHE constant.
Version: 3.3.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: castle-niche
*/

/* Brand tokens lifted from castlemotors.com's computed styles so the niche site
   reads as part of the same business. Do not drift from these. */
:root {
	--yellow: #FECD00;
	--ink: #2F2F2F;
	--ink-soft: #555;
	--muted: #999;
	--green: #4FBA6F;
	--surface: #FFFFFF;
	--surface-alt: #F5F5F5;
	--line: #E4E4E4;
	--radius: 6px;
	--wrap: 1180px;
	--font: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--surface);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: #0057c8; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; font-weight: 700; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding: 3.5rem 0; }
.muted { color: var(--ink-soft); }
.small { font-size: .82rem; }

.skip-link {
	position: absolute; left: -9999px;
	background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Visible focus everywhere — keyboard users must be able to see where they are. */
a:focus-visible, button:focus-visible {
	outline: 3px solid var(--yellow);
	outline-offset: 2px;
}

/* ---------- buttons ---------- */
.btn {
	display: inline-block; padding: .8rem 1.4rem; border-radius: var(--radius);
	font-weight: 800; text-decoration: none; font-size: .95rem;
	transition: transform .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--yellow); color: var(--ink); }
.btn--primary:hover { background: #ffd83a; }
.btn--ghost { border: 2px solid currentColor; color: inherit; }

/* ---------- header ---------- */
.site-header { background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 50; }
.header-inner {
	display: flex; align-items: center; gap: 1.1rem;
	min-height: 74px; flex-wrap: nowrap;
	width: min(100% - 2.5rem, 1380px);
}
.brand { display: flex; align-items: center; text-decoration: none; color: #fff; margin-right: auto; }
.brand__logo { width: 225px; height: auto; }
.brand__mark {
	width: 34px; height: 34px; border-radius: 4px; flex: 0 0 auto;
	background: var(--yellow);
	/* Simple castle silhouette — avoids hotlinking Castle Motors' logo file. */
	clip-path: polygon(0 100%,0 38%,14% 38%,14% 20%,28% 20%,28% 38%,42% 38%,42% 12%,58% 12%,58% 38%,72% 38%,72% 20%,86% 20%,86% 38%,100% 38%,100% 100%);
}
.brand__text strong { display: block; font-size: 1.05rem; letter-spacing: -.01em; }
.brand__text small { display: block; color: var(--yellow); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }

/* Gap and size are tuned so the longest menu (Defender: 7 items plus a two-word
   brand) still fits one row at 1280px. Loosen these and the phone/CTA wrap. */
.site-nav ul { display: flex; gap: 1.05rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: #fff; text-decoration: none; font-weight: 600; font-size: .88rem; white-space: nowrap; }
.site-nav a:hover { color: var(--yellow); }

.header-cta { display: flex; align-items: center; gap: .8rem; }
.header-cta .tel { display: none; color: var(--yellow); font-weight: 800; text-decoration: none; font-size: 1rem; white-space: nowrap; }

/* ---------- hero ---------- */
.hero { background: var(--ink); color: #fff; padding: 3.5rem 0 4rem; }
.hero h1 { color: #fff; }
.hero__lead { font-size: 1.15rem; max-width: 62ch; color: #E8E8E8; }
.hero__lead strong { color: var(--yellow); }
.hero__stat { font-size: 1.05rem; color: #E8E8E8; }
.hero__stat strong { color: var(--yellow); font-size: 1.35rem; }
.hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero__actions .btn--ghost { color: #fff; }

/* ---------- stock grid ---------- */
.stock-heading { margin-bottom: 1.5rem; }
.stock-grid {
	display: grid; gap: 1.4rem;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.stock-empty {
	background: var(--surface-alt); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 1.5rem;
}

.vcard {
	border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
	background: var(--surface); transition: box-shadow .15s ease, transform .15s ease;
}
.vcard:hover { box-shadow: 0 8px 24px rgba(0,0,0,.11); transform: translateY(-2px); }
.vcard__link { text-decoration: none; color: inherit; display: block; height: 100%; }
.vcard__media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-alt); }
.vcard__media img { width: 100%; height: 100%; object-fit: cover; }
.vcard__count {
	position: absolute; right: .6rem; bottom: .6rem;
	background: rgba(47,47,47,.86); color: #fff;
	font-size: .72rem; font-weight: 700; padding: .2rem .5rem; border-radius: 3px;
}
.vcard__body { padding: 1rem 1.1rem 1.2rem; }
.vcard__title { margin: 0 0 .15rem; font-size: 1.05rem; }
.vcard__deriv { margin: 0 0 .7rem; font-size: .84rem; color: var(--ink-soft); line-height: 1.35; }
.vcard__spec {
	list-style: none; display: flex; flex-wrap: wrap; gap: .35rem;
	margin: 0 0 .9rem; padding: 0;
}
.vcard__spec li {
	background: var(--surface-alt); border-radius: 3px;
	padding: .16rem .5rem; font-size: .76rem; color: var(--ink-soft);
}
.vcard__foot { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.vcard__price { font-size: 1.45rem; font-weight: 800; }
.vcard__finance { font-size: .78rem; color: var(--ink-soft); }
.vcard__cta { display: inline-block; margin-top: .8rem; font-weight: 800; font-size: .86rem; color: #0057c8; }

/* ---------- generic layout bits ---------- */
.cols { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cards { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
	display: block; text-decoration: none; color: inherit;
	border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem;
	background: var(--surface); transition: border-color .15s ease;
}
.card:hover { border-color: var(--yellow); }
.card h2, .card h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: .9rem; }

/* ---------- prose ---------- */
.prose { max-width: 74ch; }
.prose p, .prose li { font-size: 1.05rem; }
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.6rem; }
.prose .meta { color: var(--muted); font-size: .85rem; margin-top: -.4rem; }
.prose blockquote {
	margin: 1.6rem 0; padding: .4rem 0 .4rem 1.2rem;
	border-left: 4px solid var(--yellow); color: var(--ink-soft);
}
/* Stock grids inside articles break out of the prose measure. */
.prose .stock-grid { max-width: none; }

/* County coverage belongs on one useful national page rather than dozens of
   thin doorway pages. The wider directory makes the long geographic list easy
   to scan while keeping the article itself at a comfortable reading measure. */
.prose .county-directory {
	width: min(980px, calc(100vw - 2.5rem)); margin: 3rem 0 3rem 50%;
	padding: clamp(1.4rem, 4vw, 2.5rem); transform: translateX(-50%);
	border: 1px solid var(--line); border-radius: 12px; background: var(--surface-alt);
}
.county-directory > h2 { margin-top: 0; }
.county-directory__intro { max-width: 72ch; color: var(--ink-soft); }
.county-directory details { border-top: 1px solid #d9d9d9; }
.county-directory details:last-of-type { border-bottom: 1px solid #d9d9d9; }
.county-directory summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1rem .1rem; color: var(--ink); cursor: pointer; list-style: none;
}
.county-directory summary::-webkit-details-marker { display: none; }
.county-directory summary::after { content: "+"; color: #745d00; font-size: 1.45rem; font-weight: 800; line-height: 1; }
.county-directory details[open] summary::after { content: "−"; }
.county-directory summary span { font-size: 1.08rem; font-weight: 800; }
.county-directory summary small { margin-left: auto; color: var(--ink-soft); font-size: .76rem; }
.county-list { display: flex; flex-wrap: wrap; gap: .48rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.prose .county-list li {
	padding: .28rem .67rem; border: 1px solid #dedede; border-radius: 999px;
	background: #fff; color: var(--ink-soft); font-size: .78rem; line-height: 1.45;
}
.prose .county-directory__note { margin: -.25rem 0 1.25rem; color: var(--ink-soft); font-size: .85rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #D8D8D8; margin-top: 3rem; padding: 3rem 0 1.5rem; }
.site-footer h3 { color: #fff; font-size: 1rem; }
.site-footer a { color: var(--yellow); }
.site-footer address { font-style: normal; }
/* --ink-soft (#555) is a light-background token; on the dark footer it lands at
   ~1.5:1 against #2F2F2F, far below WCAG AA. Override with a light grey. */
.site-footer .muted { color: #B9B9B9; }
.site-footer .muted.small { color: #A0A0A0; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .4rem; }
.footer-base {
	border-top: 1px solid rgba(255,255,255,.14);
	margin-top: 2rem; padding-top: 1.2rem;
	font-size: .82rem; color: var(--muted);
}

/* ---------- mobile navigation ---------- */
/* The toggle is hidden on desktop and the nav shows inline. Below 900px the nav
   collapses into a panel — seven menu items will not wrap sanely on a phone. */
.nav-toggle {
	display: none; align-items: center; gap: .5rem;
	background: none; border: 0; color: #fff; cursor: pointer;
	font-family: inherit; font-size: .95rem; font-weight: 700;
	padding: .5rem .2rem;
	/* Comfortable thumb target rather than a 20px icon. */
	min-height: 44px;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block; width: 22px; height: 2px;
	background: var(--yellow); border-radius: 2px;
	transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }
body.nav-open .nav-toggle__bars { background: transparent; }
body.nav-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

.site-nav__cta { display: none; }

/* 1024, not 900: the desktop header needs ~1200px to fit brand + 7 nav items +
   phone + CTA on one row. Between 900 and 1024 the CTA wrapped to a second row
   and the header doubled in height, so tablets get the panel too. */
@media (max-width: 1280px) {
	/* One compact row: brand · phone · toggle, with the panel wrapping beneath.
	   flex-wrap MUST stay `wrap` — the nav is width:100% and relies on wrapping to
	   its own line. With nowrap it stays on the header row and renders off-screen
	   to the right. */
	.header-inner {
		min-height: 0; padding: .6rem 0; gap: .55rem; flex-wrap: wrap;
	}
	/* Keep the three header items on one line by stopping them growing. */
	.brand, .header-cta, .nav-toggle { flex: 0 0 auto; }
	.brand { margin-right: auto; }
	.brand__logo { width: 168px; }

	.header-cta { order: 0; gap: .5rem; }
	.header-cta .tel { display: block; }
	.header-cta .btn { display: none; }
	.header-cta .tel { font-size: .95rem; }

	.nav-toggle { display: inline-flex; order: 1; padding-left: .35rem; }

	/* display:none when closed, so the panel reserves no layout space and its
	   links leave the tab order. An fr/max-height animation looked tidier but
	   left a collapsed strip under the header once the panel had two children. */
	.site-nav { order: 4; width: 100%; display: none; }
	body.nav-open .site-nav {
		display: block;
		animation: navIn .18s ease-out;
	}
	@keyframes navIn {
		from { opacity: 0; transform: translateY(-6px); }
		to   { opacity: 1; transform: none; }
	}

	.site-nav ul {
		flex-direction: column; gap: 0;
		border-top: 1px solid rgba(255,255,255,.14);
		margin-top: .55rem;
	}
	.site-nav li { border-bottom: 1px solid rgba(255,255,255,.10); }
	.site-nav a { display: block; padding: .95rem .2rem; font-size: 1rem; }

	.site-nav__cta { display: grid; gap: .6rem; padding: 1rem .2rem 1.1rem; }
	.site-nav__cta .btn { text-align: center; }
	.site-nav__cta .btn--ghost { color: #fff; }

	.section { padding: 2.4rem 0; }
	.hero { padding: 2.4rem 0 2.8rem; }
}

@media (max-width: 560px) {
	/* Brand + phone + toggle need ~369px of the 350px available at 390px wide,
	   so the toggle wrapped to a second row and doubled the header height.
	   Dropping the visible "Menu" label reclaims ~50px; the button keeps its
	   aria-label, so it is still announced correctly. */
	.nav-toggle__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.nav-toggle { padding-left: .5rem; padding-right: .2rem; min-width: 44px; justify-content: flex-end; }
}

@media (max-width: 380px) {
	.brand__logo { width: 150px; }
	.header-cta .tel { font-size: .88rem; }
}

/* Respect reduced-motion: the panel still opens, it just does not animate. */
@media (prefers-reduced-motion: reduce) {
	body.nav-open .site-nav { animation: none; }
	.nav-toggle__bars,
	.nav-toggle__bars::before,
	.nav-toggle__bars::after { transition: none; }
}

/* A vehicle whose price element holds a status ("DEPOSIT TAKEN") rather than a
   figure. Rendered smaller and muted so it does not read as a price. */
.vcard__price--status {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink-soft);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Trust line under the hero stat — family-owned since 1972. */
.hero__trust {
	font-size: .88rem;
	color: #B9B9B9;
	margin: .5rem 0 0;
	letter-spacing: .01em;
}

/* ---------- click-to-load video facade ---------- */
/* A real YouTube iframe costs ~1 MB of third-party JS. This shows YouTube's own
   poster and only loads the player on click, so idle pages pay for one image. */
.ytfacade { margin: 0 0 1.2rem; }
.ytfacade__btn {
	display: block; position: relative; width: 100%; padding: 0; border: 0;
	background: var(--ink); border-radius: var(--radius); overflow: hidden;
	cursor: pointer; aspect-ratio: 16 / 9;
}
.ytfacade__btn img {
	width: 100%; height: 100%; object-fit: cover;
	transition: opacity .15s ease, transform .2s ease;
}
.ytfacade__btn:hover img { opacity: .85; transform: scale(1.02); }
.ytfacade__play {
	position: absolute; inset: 0; margin: auto;
	width: 68px; height: 48px; border-radius: 10px;
	background: var(--yellow);
	/* right-pointing triangle punched out of the yellow rounded rect */
	clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
}
.ytfacade__play::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 0; height: 0;
	border-left: 18px solid var(--ink);
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	transform: translateX(2px);
}
.ytfacade iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }
.ytfacade figcaption { font-size: .82rem; color: var(--ink-soft); margin-top: .5rem; line-height: 1.45; }
.videos { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }


/* The pinned brand film — wider than the walkaround strip, and it leads. */
.section--hero-video { padding-top: 2.2rem; padding-bottom: 0; }
.section--hero-video .ytfacade { max-width: 860px; margin-inline: auto; }

/* ---------- Jimny 3.0 content-led home page ---------- */
.section--alt { background: var(--surface-alt); }
.section-lead { max-width: 760px; color: var(--ink-soft); font-size: 1.08rem; margin: 0 0 2rem; }
.eyebrow {
	margin: 0 0 .65rem; color: var(--yellow); font-size: .72rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: .14em;
}
.eyebrow--dark { color: #7a6100; }
.text-link { font-weight: 800; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

.hero--video {
	position: relative; isolation: isolate; overflow: hidden;
	min-height: min(720px, calc(100svh - 74px)); display: grid; align-items: center;
	padding: 5rem 0;
}
.hero__video { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
.hero__shade {
	position: absolute; inset: 0; z-index: -2;
	background: linear-gradient(90deg, rgba(18,18,18,.94) 0%, rgba(18,18,18,.78) 47%, rgba(18,18,18,.22) 100%),
		linear-gradient(0deg, rgba(18,18,18,.38), transparent 45%);
}
.hero__content { margin-inline: max(calc((100% - var(--wrap)) / 2), 1.25rem); width: min(720px, calc(100% - 2.5rem)); }
.hero--video h1 { max-width: 680px; font-size: clamp(2.8rem, 6.4vw, 5.5rem); line-height: .98; letter-spacing: -.04em; }
.hero--video .hero__lead { max-width: 650px; font-size: clamp(1.05rem, 2vw, 1.28rem); }
.video-open {
	margin-top: 1.2rem; padding: .25rem 0; border: 0; background: transparent; color: #fff;
	font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.video-open span { color: var(--yellow); margin-right: .35rem; }
.video-open:hover { text-decoration: underline; text-underline-offset: 3px; }

.film-modal {
	width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0;
	border: 0; background: rgba(12,12,12,.97); color: #fff;
}
.film-modal::backdrop { background: rgba(0,0,0,.92); }
.film-modal[open] { display: grid; place-items: center; }
.film-modal__panel { width: min(94vw, 1500px); }
.film-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.film-modal__header h2 { margin: 0; color: #fff; font-size: clamp(1rem, 2vw, 1.45rem); }
.film-modal__close {
	min-height: 44px; padding: .45rem .8rem; border: 1px solid rgba(255,255,255,.45); border-radius: var(--radius);
	background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.film-modal__close span { color: var(--yellow); font-size: 1.25rem; margin-left: .25rem; }
.film-modal__video { display: block; width: 100%; max-height: calc(100vh - 90px); background: #000; border-radius: var(--radius); }
body:has(.film-modal[open]) { overflow: hidden; }

.trust-strip { background: var(--yellow); color: var(--ink); }
.trust-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-strip p { margin: 0; padding: 1.25rem 1.6rem; border-right: 1px solid rgba(47,47,47,.2); }
.trust-strip p:first-child { border-left: 1px solid rgba(47,47,47,.2); }
.trust-strip strong, .trust-strip span { display: block; }
.trust-strip strong { font-size: 1.15rem; }
.trust-strip span { font-size: .77rem; font-weight: 600; }

.section-intro { padding-top: 5rem; }
.model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.model-grid--two { grid-template-columns: repeat(2, 1fr); }
.model-card {
	position: relative; display: flex; flex-direction: column; min-height: 280px;
	padding: 1.6rem; overflow: hidden; border: 1px solid var(--line); border-radius: 10px;
	color: inherit; text-decoration: none; background: #fff;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.model-card::after {
	content: ""; position: absolute; right: -35px; bottom: -60px; width: 145px; height: 145px;
	border-radius: 50%; background: var(--yellow); opacity: .14; transition: transform .2s ease;
}
.model-card:hover { transform: translateY(-4px); box-shadow: 0 16px 35px rgba(0,0,0,.09); border-color: #d3b22e; }
.model-card:hover::after { transform: scale(1.25); }
.model-card h3 { margin-top: 2.5rem; font-size: 1.45rem; }
.model-card p { color: var(--ink-soft); font-size: .94rem; }
.model-card strong { margin-top: auto; color: #0057c8; font-size: .87rem; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.8rem; }
.section-heading h2, .section-heading p { margin-bottom: 0; }
.section-heading .eyebrow { margin-bottom: .65rem; }

.compare-wrap { overflow-x: auto; margin-top: 1.7rem; border: 1px solid var(--line); border-radius: 10px; }
.compare-table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; }
.compare-table th, .compare-table td { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); }
.compare-table thead th { background: var(--ink); color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table tbody th { color: #6f5900; }
.compare-help { margin: 1rem 0 0; color: var(--ink-soft); font-size: .9rem; }

.expertise { background: var(--ink); color: #fff; }
.expertise__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 8vw, 7rem); align-items: center; }
.expertise h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
.expertise__grid > div > p:not(.eyebrow) { color: #d0d0d0; }
.process-list { list-style: none; margin: 0; padding: 0; }
.process-list li { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.process-list li > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--yellow); border-radius: 50%; color: var(--yellow); font-weight: 800; }
.process-list p { margin: .15rem 0 0; color: #bdbdbd; font-size: .88rem; }

.rating-stack { display: flex; flex-direction: column; align-items: end; gap: .35rem; }
.rating-stack a { text-decoration: none; color: var(--ink); font-size: .85rem; }
.rating-stack strong { color: #6f5900; }
.review-carousel { position: relative; }
.review-carousel__viewport { overflow-x: auto; padding: .15rem .05rem .45rem; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; }
.review-carousel__viewport::-webkit-scrollbar { display: none; }
.review-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2.4rem) / 3); gap: 1.2rem; }
.review-card { display: flex; flex-direction: column; min-height: 270px; padding: 1.5rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; scroll-snap-align: start; }
.review-card__top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1.15rem; }
.review-card__top a { padding: .27rem .6rem; border-radius: 999px; background: var(--surface-alt); color: var(--ink); font-size: .7rem; font-weight: 800; text-decoration: none; }
.review-card__top a:hover { background: var(--yellow); }
.review-card__top span { color: #806700; font-size: .72rem; letter-spacing: .08em; white-space: nowrap; }
.review-card > p { margin: 0 0 1.5rem; font-size: 1.06rem; font-weight: 700; line-height: 1.55; }
.review-card footer { display: flex; flex-direction: column; gap: .15rem; margin-top: auto; color: var(--ink-soft); font-size: .76rem; }
.review-card footer strong { color: var(--ink); font-size: .82rem; }
.review-carousel__controls { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; margin-top: 1rem; }
.review-carousel__button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ink); border-radius: 50%; background: var(--ink); color: #fff; cursor: pointer; font: inherit; font-size: 1.15rem; transition: background .15s ease, color .15s ease; }
.review-carousel__button:hover:not(:disabled) { background: var(--yellow); color: var(--ink); }
.review-carousel__button:disabled { opacity: .3; cursor: default; }
.review-carousel__status { min-width: 5.5rem; margin: 0; color: var(--ink-soft); font-size: .78rem; font-weight: 800; text-align: center; }
.card__kicker { color: #806700; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; }

.delivery-callout { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; }
.delivery-callout > div { max-width: 820px; }
.region-list { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.25rem; }
.region-list span { padding: .32rem .7rem; border-radius: 999px; background: var(--surface-alt); color: var(--ink-soft); font-size: .76rem; font-weight: 700; }

.guides-section { border-top: 1px solid var(--line); }
.cards--guides { grid-template-columns: repeat(3, 1fr); }
.cards--guides .card { display: flex; flex-direction: column; min-height: 230px; padding: 1.4rem; border-radius: 10px; }
.cards--guides .card h3 { margin-top: .65rem; font-size: 1.14rem; }
.cards--guides .card p { margin-bottom: 1rem; }
.cards--guides .card strong { margin-top: auto; color: #0057c8; font-size: .82rem; }

.final-cta { padding: 4rem 0; background: var(--yellow); color: var(--ink); }
.final-cta .eyebrow { color: #645000; }
.final-cta__inner { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; }
.final-cta__inner > div:first-child { max-width: 780px; }
.final-cta__inner p { margin-bottom: 0; }
.final-cta__actions { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: flex-end; }
.final-cta .btn--primary { background: var(--ink); color: #fff; }

.breadcrumbs { display: flex; gap: .5rem; margin-bottom: 1.2rem; color: var(--muted); font-size: .78rem; }
.breadcrumbs a { color: var(--ink-soft); }

@media (max-width: 900px) {
	.hero--video { min-height: 650px; padding: 4rem 0; }
	.hero__shade { background: rgba(18,18,18,.76); }
	.trust-strip__grid { grid-template-columns: repeat(2, 1fr); }
	.trust-strip p:nth-child(3) { border-left: 1px solid rgba(47,47,47,.2); border-top: 1px solid rgba(47,47,47,.2); }
	.trust-strip p:nth-child(4) { border-top: 1px solid rgba(47,47,47,.2); }
	.model-grid, .cards--guides { grid-template-columns: 1fr 1fr; }
	.model-card:last-child { grid-column: 1 / -1; }
	.review-carousel__track { grid-auto-columns: calc((100% - 1.2rem) / 2); }
	.expertise__grid { grid-template-columns: 1fr; gap: 2rem; }
	.delivery-callout, .final-cta__inner { grid-template-columns: 1fr; gap: 1.5rem; }
	.final-cta__actions { justify-content: flex-start; }
}

@media (max-width: 620px) {
	.hero--video { min-height: 620px; }
	.hero--video h1 { font-size: clamp(2.55rem, 14vw, 4.2rem); }
	.trust-strip p { padding: 1rem .8rem; }
	.model-grid, .cards--guides { grid-template-columns: 1fr; }
	.model-card:last-child { grid-column: auto; }
	.section-heading { align-items: start; flex-direction: column; gap: .8rem; }
	.rating-stack { align-items: start; }
	.review-carousel__track { grid-auto-columns: 88%; gap: .85rem; }
	.review-card { min-height: 250px; }
	.review-carousel__controls { justify-content: space-between; }
	.delivery-callout .btn { width: 100%; text-align: center; }
	.final-cta__actions { display: grid; }
	.final-cta__actions .btn { text-align: center; }
	.county-directory summary { align-items: flex-start; }
	.county-directory summary small { max-width: 9rem; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__video { display: none; }
	.hero--video { background: #202020; }
	.model-card, .review-carousel__button { transition: none; }
	.review-carousel__viewport { scroll-behavior: auto; }
}