/* Home page only. */

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; background: var(--ncd-white); } /* White, not grey (user, 2026-10-22). */
.hero__media { display: block; }
.hero__media img { width: 100%; aspect-ratio: 16 / 9; max-height: 560px; object-fit: cover; object-position: 0% 100%; }
.hero__inner { position: relative; padding-top: 28px; padding-bottom: 48px; }
.hero__content { max-width: 640px; }
/* Rating line (user, 2026-10-21): navy pill, amber stars. Animation in "hero entrance" below. */
.hero__rating { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 9px 18px 9px 14px; border-radius: 999px; background: var(--ncd-navy-dark); box-shadow: 0 8px 22px rgba(10, 29, 51, .18); color: rgba(255, 255, 255, .88); font-size: .95rem; font-weight: 600; line-height: 1.25; text-decoration: none; transition: background-color .2s ease; }
.hero__rating:hover, .hero__rating:focus-visible { background: var(--ncd-navy-light); }
.hero__rating strong { color: #fff; font-weight: 800; }
.hero__rating-src { color: rgba(255, 255, 255, .66); }
.hero__stars { display: inline-flex; gap: 2px; color: var(--ncd-amber); }
.hero__stars i { display: block; }
.hero__stars .icon { display: block; width: 18px; height: 18px; }
.hero__rating-van { position: absolute; left: 0; bottom: -9px; width: 46px; opacity: 0; pointer-events: none; }
.hero__rating-van img { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 4px rgba(10, 29, 51, .3)); }
/* Phones: one line at 360 px and up. */
@media (max-width: 520px) { .hero__rating { gap: 4px 8px; padding: 8px 13px 8px 11px; font-size: .875rem; } .hero__stars { gap: 1px; } .hero__stars .icon { width: 16px; height: 16px; } }
@media (max-width: 380px) { .hero__rating { gap: 4px 7px; padding-right: 11px; font-size: .8125rem; } .hero__stars .icon { width: 15px; height: 15px; } }
.hero__title { margin-top: 18px; color: var(--ncd-navy); font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.2rem); font-weight: 800; line-height: 1.04; letter-spacing: -.025em; }
.hero__lead { margin-top: 16px; max-width: 580px; color: var(--ncd-navy); font-size: clamp(1.05rem, 1rem + .3vw, 1.15rem); line-height: 1.5; }
.hero__features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; max-width: 620px; }
.hero__features li { display: flex; flex-direction: column; gap: 12px; color: var(--ncd-navy); font-size: .98rem; font-weight: 500; line-height: 1.25; }
.hero__features strong { display: block; font-size: 1.3rem; font-weight: 800; }
.hero__stat--text span { font-weight: 600; }
.hero__stat--text strong { display: inline; font-size: inherit; }
.hero__text { margin-top: 12px; max-width: 580px; color: var(--ncd-text); font-size: 1.05rem; line-height: 1.55; }
.hero__text strong { color: var(--ncd-navy); }
.hero__badge { display: none; }
.hero__form { margin-top: 32px; }
/* Phones/tablets: the photo sits after the title and bold line, edge to edge (user, 2026-10-20). */
@media (max-width: 1279px) {
	.hero__content { max-width: none; }
	.hero__title { max-width: 640px; }
	.hero__media { margin: 22px calc(-1 * var(--gutter)) 0; }
	.hero__media + .hero__text { margin-top: 18px; }
}

@media (max-width: 520px) {
	.hero__features .icon-disc { width: 48px; height: 48px; }
	.hero__features .icon-disc .icon { width: 22px; height: 22px; }
}

/* Desktop: photo behind everything, laid out like the mockup. The photo is
   anchored to the top so the award badge sits below the text block. */
@media (min-width: 1280px) {
	.hero { background: none; overflow: hidden; }
	/* The hero is one screen tall; the photo fills the width and is anchored bottom-left, so only empty sky is trimmed. */
	.hero__media { position: absolute; inset: 0; z-index: -2; }
	/* The photo is inside .hero__content in the markup; keep .hero as its containing block. */
	.hero__inner { position: static; }
	/* The whole photo is a link: the layout layer lets clicks through, its contents stay clickable. */
	.hero::before { pointer-events: none; }
	.hero__inner { pointer-events: none; }
	.hero__inner > * { pointer-events: auto; }
	.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; object-position: 0% 100%; }
	/* White wash behind the text only; fades out before the award badge. */
	.hero::before {
		content: ""; position: absolute; inset: 0; z-index: -1;
		background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .86) 30%, rgba(255, 255, 255, .45) 46%, rgba(255, 255, 255, 0) 60%);
		-webkit-mask-image: linear-gradient(180deg, #000 0, #000 380px, transparent 470px);
		mask-image: linear-gradient(180deg, #000 0, #000 380px, transparent 470px);
	}
	.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) 540px; grid-template-rows: auto 1fr; gap: 0 48px; align-items: start; /* One screen tall, but never so short that the award badge in the photo rides up into the text. */
		min-height: min(1200px, max(calc(100vh - 84px - var(--clients-h)), calc(25.9vw + 470px))); min-height: min(1200px, max(calc(100svh - 84px - var(--clients-h)), calc(25.9vw + 470px))); padding-top: 28px; padding-bottom: 48px; }
	.hero__title { margin-top: 14px; font-size: clamp(2.1rem, 1.2rem + 2.2vw, 3rem); }
	.hero__lead { margin-top: 12px; font-size: 1.05rem; }
	.hero__text { margin-top: 8px; font-size: .98rem; line-height: 1.5; }
	.hero__content { grid-column: 1; grid-row: 1; }
	.hero__features { grid-column: 1; grid-row: 2; margin-top: 18px; }
	.hero__features li { flex-direction: row; align-items: center; }
	.hero__features .icon-disc { width: 46px; height: 46px; flex: none; }
	.hero__form { position: relative; z-index: 1; grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
	/* Pinned to the quote card's lower-left edge, so it moves with the form at every size and zoom. */
	.hero__badge { display: flex; position: absolute; z-index: 2; right: calc(100% - 28px); bottom: 64px; align-items: center; white-space: nowrap; gap: 14px; padding: 16px 20px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
	.hero__badge-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--ncd-peach); color: var(--ncd-accent); }
	.hero__badge strong { display: block; color: var(--ncd-navy); font-size: 1.05rem; line-height: 1.25; }
	.hero__badge small { color: var(--ncd-text-muted); font-size: .85rem; }
}
/* Only wide screens have room for the floating card between the text and the form, above the van. */


/* ---------- 3. how it works: each step is an open navy courier box (user, 2026-10-22) ----------
   Photo of the box (assets/img/how-box/) in three layers: the open top (.how__lid, z -2), the step's picture rising
   out of it (.how__art, z -1), the front edge of the opening over the picture (.how__lip, z 0). The front face is
   ::before and stretches to the text. .how__top has no z-index, so the layers stack with the card's text.
   Measured on the photo: the top is 143.375% of the face width and starts 21.75% left of it.
   Base card styles are in base.css (shared with the sector pages, which keep the white cards). */
ol.how__steps--box { grid-template-columns: repeat(2, minmax(0, 280px)); justify-content: center; column-gap: 130px; row-gap: 220px; margin-top: 210px; padding: 0 24px; }
@media (max-width: 859px) { ol.how__steps--box { grid-template-columns: minmax(0, 300px); row-gap: 230px; margin-top: 220px; } } /* One column until two boxes and their flaps fit side by side. */
@media (min-width: 1240px) { ol.how__steps--box { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 40px; margin-top: 180px; } }
@media (min-width: 1240px) and (max-width: 1439px) { ol.how__steps--box { padding: 0 44px; } } /* Room for the outer flaps where the page has no side margin. */
.how__steps--box::before { display: none; }
.how__steps--box .how__step { isolation: isolate; padding: 58px 22px 34px; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.how__steps--box .how__step:hover { box-shadow: none; }
.how__steps--box .how__step::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("../../img/how-box/box-face.webp") 0 0 / 100% 100% no-repeat; background-image: image-set(url("../../img/how-box/box-face.avif") type("image/avif"), url("../../img/how-box/box-face.webp") type("image/webp")); }
.how__steps--box .how__step::after { display: none; }
.how__steps--box .how__step h3, .how__steps--box .how__step p { position: relative; z-index: 1; }
.how__steps--box .how__step h3 { color: #fff; }
.how__steps--box .how__step p { color: rgba(255, 255, 255, .82); }
.how__top { position: absolute; left: -21.75%; bottom: calc(100% - 1px); width: 143.375%; aspect-ratio: 1147 / 514; pointer-events: none; }
.how__lid, .how__lip { position: absolute; display: block; background-repeat: no-repeat; background-size: 100% 100%; }
.how__lid { inset: 0; z-index: -2; background-image: url("../../img/how-box/box-top.webp"); background-image: image-set(url("../../img/how-box/box-top.avif") type("image/avif"), url("../../img/how-box/box-top.webp") type("image/webp")); }
.how__lip { left: 14.91%; top: 80.16%; z-index: 0; width: 70.36%; height: 20.04%; background-image: url("../../img/how-box/box-lip.webp"); background-image: image-set(url("../../img/how-box/box-lip.avif") type("image/avif"), url("../../img/how-box/box-lip.webp") type("image/webp")); }
/* The step's picture, rising out of the opening */
.how__steps--box .how__art { position: absolute; left: 37.8%; bottom: 17%; z-index: -1; width: 25%; height: auto; aspect-ratio: 1; margin: 0; box-shadow: 0 0 0 6px rgba(255, 243, 234, .3), 0 10px 22px rgba(0, 0, 0, .35); transition: translate .35s cubic-bezier(.2, .7, .2, 1); }
.how__steps--box .how__step:hover .how__art { transform: none; translate: 0 -12%; }
.how__steps--box .how__art svg { width: 62%; height: 62%; }
/* Shipping label with the step number */
.how__steps--box .how__num { top: 16px; left: 16px; z-index: 2; display: block; width: auto; height: auto; padding: 4px 8px 5px; border: 0; border-radius: 3px; background: #fff; color: var(--ncd-navy); font-size: .7rem; font-weight: 800; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-4deg); box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.how__steps--box .how__num::before { content: "Step "; }
.how__steps--box .how__num::after { content: ""; display: block; height: 6px; margin-top: 3px; background: repeating-linear-gradient(90deg, var(--ncd-navy) 0 1px, transparent 1px 3px, var(--ncd-navy) 3px 5px, transparent 5px 6px); }
/* Scrolling into view: the picture pops up out of the box (browsers with scroll-driven animations only) */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.how__steps--box .how__art { animation: howPop linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
	}
}
@keyframes howPop { from { transform: translateY(60%) scale(.85); } to { transform: none; } }
/* Phones: one box per row, a little narrower than the screen */
@media (max-width: 600px) {
	ol.how__steps--box { grid-template-columns: minmax(0, 250px); row-gap: 200px; margin-top: 190px; padding: 0; }
	.how ol.how__steps--box { padding-left: 0; }
	.how__steps--box::before { display: none; }
	.how__steps--box .how__step { display: flex; flex-direction: column; align-items: center; padding: 46px 18px 26px; text-align: center; }
	.how__steps--box .how__num { top: 12px; left: 12px; font-size: .64rem; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
	.how__steps--box .how__art { grid-row: auto; }
}

/* ---------- 4. services grid ---------- */
.svc { background: radial-gradient(1200px 500px at 10% 0%, rgba(255, 159, 46, .07), transparent 60%), radial-gradient(900px 500px at 100% 100%, rgba(30, 70, 115, .05), transparent 60%), var(--ncd-grey); }
.svc .section-head { max-width: 1100px; }
.svc .pill { margin-bottom: 16px; }
.svc .section-head h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); letter-spacing: -.02em; }
.svc .section-head > p:not(.pill) { max-width: 820px; margin-left: auto; margin-right: auto; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }
.svc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } /* 10 cards: 5 rows of 2, no orphan card. */
.svc__card { position: relative; display: flex; align-items: center; gap: 18px; padding: 22px; border: 1px solid var(--ncd-line); border-radius: 18px; background: #fff; box-shadow: 0 6px 20px rgba(15, 42, 74, .05); transition: transform .25s, box-shadow .25s, border-color .25s; }
.svc__card:hover { transform: translateY(-3px); border-color: rgba(200, 80, 15, .35); box-shadow: 0 16px 34px rgba(15, 42, 74, .10); }
.svc__art { flex: none; display: grid; place-items: center; width: 140px; height: 140px; }
.svc__art img { width: 140px; height: 140px; object-fit: contain; border-radius: 50%; mix-blend-mode: multiply; }
.svc__body { min-width: 0; }
.svc__body h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; }
.svc__body h3 a { color: var(--ncd-navy); text-decoration: none; }
/* Whole card is clickable via the heading link. */
.svc__body h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.svc__body h3 a:focus-visible { outline: none; }
.svc__card:has(a:focus-visible) { outline: 3px solid var(--ncd-accent); outline-offset: 2px; }
.svc__body p { color: var(--ncd-text); font-size: .98rem; line-height: 1.5; }
.svc__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--ncd-accent); font-weight: 700; }
.svc__more .icon { width: 18px; height: 18px; transition: transform .2s; }
.svc__card:hover .svc__more .icon { transform: translateX(4px); }
.svc__help { display: flex; align-items: center; gap: 22px; margin-top: 22px; padding: 18px 24px; border: 1px solid var(--ncd-line); border-radius: 18px; background: #fff; box-shadow: 0 6px 20px rgba(15, 42, 74, .05); }
.svc__help-icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ncd-peach); color: var(--ncd-accent); }
.svc__help-icon .icon { width: 26px; height: 26px; }
.svc__help p { flex: 1; padding-left: 22px; border-left: 1px solid var(--ncd-line); color: var(--ncd-text); }
.svc__help p strong { display: block; color: var(--ncd-navy); font-size: 1.15rem; }
@media (max-width: 1199px) { .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1199px) and (min-width: 701px) { .svc__art { width: 120px; height: 120px; } .svc__art img { width: 112px; height: 112px; } }
@media (max-width: 700px) {
	.svc__grid { grid-template-columns: 1fr; gap: 12px; }
	.svc__card { gap: 14px; padding: 14px; }
	.svc__art { width: 96px; height: 96px; }
	.svc__art img { width: 90px; height: 90px; }
	.svc__body h3 { font-size: 1.08rem; margin-bottom: 4px; }
	.svc__body p { font-size: .92rem; }
	.svc__more { margin-top: 8px; font-size: .95rem; }
	.svc__help { flex-wrap: wrap; gap: 14px; padding: 16px; }
	.svc__help p { flex: 1 1 200px; padding-left: 14px; }
	.svc__help .btn { width: 100%; }
}

/* Dark theme for the services section (after the light "How it works"). */
.svc { position: relative; isolation: isolate; overflow: hidden; background: var(--ncd-navy-dark); color: rgba(255, 255, 255, .8); }
.svc::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(900px 520px at 12% 0%, rgba(30, 70, 115, .85), transparent 65%), radial-gradient(800px 520px at 95% 100%, rgba(30, 70, 115, .7), transparent 65%), radial-gradient(600px 300px at 50% 45%, rgba(255, 159, 46, .05), transparent 70%); }
.svc .section-head h2 { color: #fff; }
.svc .section-head > p:not(.pill) { color: rgba(255, 255, 255, .78); }
.svc .section-head strong { color: #fff; }
.svc .pill { background: rgba(255, 159, 46, .14); color: var(--ncd-amber); }
.svc__card { border-color: rgba(255, 255, 255, .1); background: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03)); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 14px 30px rgba(0, 0, 0, .18); }
.svc__card:hover { border-color: rgba(255, 159, 46, .55); background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04)); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 22px 44px rgba(0, 0, 0, .3); }
.svc__art img { mix-blend-mode: normal; box-shadow: 0 0 0 5px rgba(255, 255, 255, .06); }
.svc__body h3 a { color: #fff; }
.svc__body p { color: rgba(255, 255, 255, .72); }
.svc__more { color: var(--ncd-amber); }
.svc__card:has(a:focus-visible) { outline-color: var(--ncd-amber); }
.svc__help { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); box-shadow: none; }
.svc__help-icon { background: rgba(255, 159, 46, .14); color: var(--ncd-amber); }
.svc__help p { border-left-color: rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .75); }
.svc__help p strong { color: #fff; }

/* Layout (user, 2026-10-22): wide screens = five cards down each side, heading + route + help in the middle;
   smaller screens = heading, route, the cards, then help (.svc__mid unwraps and order sorts it). */
.svc__layout { display: flex; flex-direction: column; }
.svc__mid { display: contents; }
.svc__mid .section-head { order: 1; }
.svc__mid .route { order: 2; }
.svc__grid { order: 3; }
.svc__mid .svc__help { order: 4; }
@media (min-width: 1280px) {
	.svc > .svc__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: repeat(5, auto); gap: 16px 24px; max-width: calc(1680px + var(--gutter) * 2); }
	.svc__mid { grid-column: 2; grid-row: 1 / span 5; display: flex; flex-direction: column; } /* Help bar pinned to the bottom: its lower edge lines up with the last cards (user, 2026-10-22). */
	.svc__mid .section-head { margin-bottom: 8px; }
	.svc__mid .section-head h2 { font-size: clamp(2.2rem, 1.2rem + 1.6vw, 3.2rem); }
	.svc__mid .route { width: 88%; margin-bottom: 20px; } /* Narrower, so the pickup/drop-off labels clear the side cards. */
	.svc__mid .svc__help { flex-wrap: wrap; gap: 14px 18px; margin-top: auto; padding: 16px 20px; }
	.svc__mid .svc__help p { flex: 1 1 240px; padding-left: 16px; }
	.svc__grid { display: contents; }
	.svc__card { gap: 16px; padding: 16px 18px; }
	.svc__card:nth-child(odd) { grid-column: 1; }
	.svc__card:nth-child(even) { grid-column: 3; }
	.svc__card:nth-child(-n+2) { grid-row: 1; }
	.svc__card:nth-child(3), .svc__card:nth-child(4) { grid-row: 2; }
	.svc__card:nth-child(5), .svc__card:nth-child(6) { grid-row: 3; }
	.svc__card:nth-child(7), .svc__card:nth-child(8) { grid-row: 4; }
	.svc__card:nth-child(9), .svc__card:nth-child(10) { grid-row: 5; }
	.svc__art, .svc__art img { width: 100px; height: 100px; }
	.svc__body h3 { margin-bottom: 4px; font-size: 1.08rem; }
	.svc__body p { font-size: .92rem; }
	.svc__more { margin-top: 8px; }
}

/* ---------- services: direct route band ---------- */
.route { position: relative; max-width: 1100px; margin: 0 auto clamp(36px, 5vw, 56px); }
.route__stage { position: relative; container-type: inline-size; aspect-ratio: 1000 / 300; margin-bottom: 46px; }
/* Faint dotted "map" texture, fading out towards the middle and edges. */
.route__stage::before { content: ""; position: absolute; inset: -6% -4%; z-index: 0; pointer-events: none;
	background: radial-gradient(circle, rgba(255, 255, 255, .16) 1.2px, transparent 1.6px) 0 0 / 14px 14px;
	-webkit-mask-image: radial-gradient(40% 70% at 12% 75%, #000, transparent), radial-gradient(40% 70% at 88% 75%, #000, transparent);
	mask-image: radial-gradient(40% 70% at 12% 75%, #000, transparent), radial-gradient(40% 70% at 88% 75%, #000, transparent); }
.route__svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; }
.route__ring { transform-box: fill-box; transform-origin: center; animation: rtRing 2.4s ease-out infinite; }
.route__ring--2 { animation-delay: 1.2s; }
@keyframes rtRing { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.route__pin-art { transform-box: fill-box; transform-origin: center bottom; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.route.is-arrived .route__pin--drop .route__pin-art { transform: translateY(-6px) scale(1.08); }

.route__label { position: absolute; z-index: 2; top: calc(100% - 5cqw + 16px); transform: translateX(-50%); padding: 9px 18px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; background: rgba(10, 29, 51, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: .98rem; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.route__label--pick { left: 9%; }
.route__label--drop { left: 91%; }
.route__tag { position: absolute; z-index: 2; left: 50%; top: calc(100% - 17.5cqw); display: inline-flex; align-items: center; gap: 12px; transform: translate(-50%, -50%); color: var(--ncd-amber); font-size: .92rem; font-weight: 700; white-space: nowrap; }
.route__tag > span { padding: 6px 16px; border: 1px solid rgba(255, 159, 46, .45); border-radius: 999px; background: rgba(10, 29, 51, .6); }
.route__tag .icon { width: 20px; height: 20px; }
.route__caption { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; text-align: center; color: rgba(255, 255, 255, .78); font-size: 1.05rem; }
.route__caption strong { color: #fff; }

@media (max-width: 700px) {
	.route__stage { aspect-ratio: 1000 / 470; margin: 0 -8px 44px; }
	.route__pin-art { transform: scale(1.6); }
	.route.is-arrived .route__pin--drop .route__pin-art { transform: translateY(-6px) scale(1.7); }
	.route__label { top: calc(100% - 5cqw + 12px); padding: 5px 9px; border-radius: 10px; font-size: .74rem; }
	.route__label--pick { left: 3%; transform: none; }
	.route__label--drop { left: auto; right: 3%; transform: none; }
	.route__tag { gap: 4px; font-size: .74rem; }
	.route__tag > span { padding: 3px 10px; }
	.route__tag .icon { width: 14px; height: 14px; }
	.route__caption { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .route__ring { animation: none; opacity: .6; } }

/* ---------- 5. dedicated courier split: white background, redesigned layout (user, 2026-10-22; same words) ----------
   Faint dotted map behind the photo side, a tilted navy shape behind the photo (moving route line removed, user 2026-10-22), a two-tone
   heading, the four points as 2 x 2 navy luggage tags, button and "Comparing carriers?" side by side. */
.split-sec { position: relative; isolation: isolate; overflow: hidden; background: var(--ncd-white); }
.split-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(15, 42, 74, .12) 1.2px, transparent 1.6px) 0 0 / 16px 16px; -webkit-mask-image: radial-gradient(42% 75% at 22% 50%, #000, transparent); mask-image: radial-gradient(42% 75% at 22% 50%, #000, transparent); }
.split-sec .split__media { isolation: isolate; }
.split-sec .split__media::before { inset: 28px -22px -22px 28px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--ncd-navy-light), var(--ncd-navy) 55%, var(--ncd-navy-dark)); transform: rotate(3deg); box-shadow: 0 24px 50px rgba(10, 29, 51, .22); }
.split-sec .split__media::after { content: ""; position: absolute; left: -12px; top: -12px; width: 86px; height: 86px; border-top: 4px solid var(--ncd-orange-dark); border-left: 4px solid var(--ncd-orange-dark); border-radius: 24px 0 0 0; pointer-events: none; }
.split-sec .split__media img { position: relative; }
.split-sec .split__body h2 span { display: block; color: var(--ncd-orange-dark); }
.split-sec .split__body h2 + p { color: var(--ncd-navy); font-size: 1.14rem; }
/* The four points as navy luggage tags (same look as the service pages' .stag cards; no icons; user, 2026-10-22). */
.split-sec .checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0 28px; padding: 0; list-style: none; counter-reset: ncdtag; }
.split-sec .checklist li { position: relative; display: block; padding: 38px 20px 24px; background: linear-gradient(160deg, var(--ncd-navy-light) 0%, var(--ncd-navy) 45%, var(--ncd-navy-dark) 100%); color: rgba(255, 255, 255, .8); font-size: .95rem; line-height: 1.5; counter-increment: ncdtag; clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%, 0 22px); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.split-sec .checklist li::before { content: ""; position: absolute; top: 13px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ncd-white); box-shadow: 0 0 0 4px rgba(255, 255, 255, .22); }
.split-sec .checklist li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--ncd-orange), var(--ncd-amber)); }
.split-sec .checklist li > span::before { content: "Item " counter(ncdtag, decimal-leading-zero); content: "Item " counter(ncdtag, decimal-leading-zero) / ""; position: absolute; top: 14px; right: 20px; color: var(--ncd-amber); font: 700 .72rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.split-sec .checklist li:hover { transform: translateY(-6px) rotate(-1deg); }
.split-sec .checklist .icon { display: none; }
.split-sec .checklist strong { display: block; margin-bottom: 4px; color: #fff; font-size: 1.05rem; }
.split__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.split-sec .split__foot .split__aside { margin: 0; }
@media (max-width: 600px) {
	.split-sec .checklist { grid-template-columns: 1fr; }
	.split-sec .split__media::before { inset: 18px -10px -12px 18px; }
}

/* ---------- "Before you book" (parts/before-you-book.php): on the home page the three checks are navy luggage tags
   like the Dedicated section's points (user, 2026-10-22; no icons). The other pages using the part keep white cards. */
.byb .byb__item { padding: 40px 22px 28px; border: 0; border-radius: 0; background: linear-gradient(160deg, var(--ncd-navy-light) 0%, var(--ncd-navy) 45%, var(--ncd-navy-dark) 100%); box-shadow: none; clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%, 0 24px); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.byb .byb__item::before { content: ""; position: absolute; top: 14px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--ncd-white); box-shadow: 0 0 0 4px rgba(255, 255, 255, .22); }
.byb .byb__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--ncd-orange), var(--ncd-amber)); }
.byb .byb__item:hover { transform: translateY(-6px) rotate(-1deg); }
.byb .byb__num { top: 15px; right: 22px; color: var(--ncd-amber); font: 700 .74rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.byb .byb__num::before { content: "Check "; content: "Check " / ""; }
.byb .byb__icon { display: none; }
.byb .byb__item h3 { color: #fff; }
.byb .byb__item p { color: rgba(255, 255, 255, .8); }
@media (max-width: 900px) { .byb .byb__item { padding: 38px 18px 24px; } .byb .byb__num { font-size: .72rem; } }
@media (prefers-reduced-motion: reduce) { .byb .byb__item:hover { transform: none; } }

/* ---------- 6. service tabs ---------- */
.stabs { position: relative; isolation: isolate; background: var(--ncd-grey) url("../../img/london-skyline-bg-800.webp?v=2") center bottom / cover no-repeat; background-image: image-set(url("../../img/london-skyline-bg-800.avif?v=2") type("image/avif"), url("../../img/london-skyline-bg-800.webp?v=2") type("image/webp")); }
@media (min-width: 800px) { .stabs { background-image: url("../../img/london-skyline-bg-1600.webp?v=2"); background-image: image-set(url("../../img/london-skyline-bg-1600.avif?v=2") type("image/avif"), url("../../img/london-skyline-bg-1600.webp?v=2") type("image/webp")); } }
/* Soft white wash behind the heading so it stays crisp over the sky. */
.stabs::before { content: ""; position: absolute; inset: 0 0 auto; height: 360px; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0)); pointer-events: none; }
.stabs .section-head { max-width: 1300px; margin-bottom: clamp(24px, 3vw, 36px); }
.stabs .pill { margin-bottom: 16px; }
.stabs .section-head h2 { font-size: clamp(1.9rem, 1.2rem + 2.3vw, 3.1rem); letter-spacing: -.02em; }

.stabs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.stabs__tab { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--ncd-line); border-radius: 18px; background: #fff; color: var(--ncd-navy); text-align: left; box-shadow: 0 6px 20px rgba(15, 42, 74, .05); transition: background-color .25s, border-color .25s, box-shadow .25s, transform .25s; }
.stabs__tab:hover { transform: translateY(-2px); border-color: rgba(200, 80, 15, .35); }
.stabs__tab-icon { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--ncd-peach); color: var(--ncd-accent); transition: background-color .25s, color .25s; }
.stabs__tab-icon .icon { width: 28px; height: 28px; }
.stabs__tab-text strong { display: block; font-size: 1.08rem; line-height: 1.25; }
.stabs__tab-text span { display: block; margin-top: 4px; color: var(--ncd-text-muted); font-size: .9rem; line-height: 1.35; }
.stabs__tab[aria-selected="true"] { border-color: transparent; background: linear-gradient(135deg, var(--ncd-navy), var(--ncd-navy-light)); color: #fff; box-shadow: 0 16px 34px rgba(15, 42, 74, .25); }
.stabs__tab[aria-selected="true"] .stabs__tab-icon { background: rgba(255, 255, 255, .12); color: #fff; }
.stabs__tab[aria-selected="true"] .stabs__tab-text span { color: rgba(255, 255, 255, .78); }
.stabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 32%; right: 32%; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--ncd-amber); }

.stabs__panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 300px; gap: 28px; align-items: center; padding: clamp(24px, 3.4vw, 44px); border: 1px solid var(--ncd-line); border-radius: 22px; background: #fff; box-shadow: 0 10px 30px rgba(15, 42, 74, .06); }
.js .stabs__panel:not(.is-active) { visibility: hidden; opacity: 0; pointer-events: none; }
/* All panels share one grid cell, so the section keeps the tallest panel's height
   and its cover background never rescales (i.e. "moves") when switching tabs. */
.stabs__wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
.stabs__list { grid-row: 1; }
.stabs__panel { grid-row: 2; grid-column: 1; transition: opacity .25s ease, visibility .25s; }
.stabs__more { grid-row: 3; }
.no-js .stabs__panel + .stabs__panel { margin-top: 16px; }
.stabs__eyebrow { margin-bottom: 12px; color: var(--ncd-accent); font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.stabs__text h3 { font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; }
.stabs__text p:not(.stabs__eyebrow) { margin-top: 16px; font-size: 1.05rem; line-height: 1.65; }
.stabs__text .btn { margin-top: 26px; }
.stabs__media img { width: 100%; height: auto; mix-blend-mode: multiply; }
.stabs__points { display: grid; gap: 14px; }
.stabs__points li { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--ncd-line); border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(15, 42, 74, .05); font-size: .92rem; line-height: 1.4; }
.stabs__point-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ncd-peach); color: var(--ncd-accent); }
.stabs__point-icon .icon { width: 24px; height: 24px; }
.stabs__points strong { display: block; margin-bottom: 2px; color: var(--ncd-navy); font-size: 1.05rem; }

.stabs__more { display: flex; align-items: center; gap: 20px; margin-top: 16px; padding: 18px 22px; border: 1px solid var(--ncd-line); border-radius: 18px; background: #fff; box-shadow: 0 6px 20px rgba(15, 42, 74, .05); }
.stabs__more-item { flex: 1; display: flex; align-items: center; gap: 16px; padding: 4px 20px 4px 0; border: 0; border-right: 1px solid var(--ncd-line); background: none; color: var(--ncd-text); text-align: left; font-size: .92rem; line-height: 1.45; }
.stabs__more-item[hidden] { display: none; }
.stabs__more-item strong { display: block; margin-bottom: 4px; color: var(--ncd-navy); font-size: 1.05rem; }
.stabs__more-item:hover strong { color: var(--ncd-accent); }
.stabs__more-icon { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--ncd-peach); color: var(--ncd-accent); }
.stabs__more-icon .icon { width: 26px; height: 26px; }
.stabs__more-cta { flex: none; }

@media (max-width: 1199px) {
	.stabs__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.stabs__points { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.stabs__more { flex-wrap: wrap; }
	.stabs__more-item { flex: 1 1 320px; }
	.stabs__more-cta { flex: 1 1 100%; }
}
@media (max-width: 899px) {
	.stabs__list { grid-template-columns: 1fr; gap: 10px; }
	.stabs__tab { padding: 14px 16px; }
	.stabs__tab-icon { width: 48px; height: 48px; }
	.stabs__tab-icon .icon { width: 22px; height: 22px; }
	.stabs__tab[aria-selected="true"]::after { left: 0; right: auto; top: 18%; bottom: 18%; width: 4px; height: auto; border-radius: 0 4px 4px 0; }
	.stabs__panel { grid-template-columns: 1fr; gap: 20px; }
	.stabs__media { order: -1; max-width: 520px; margin: 0 auto; }
	.stabs__points { grid-template-columns: 1fr; gap: 10px; }
	.stabs__more { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 14px; padding: 16px; }
	.stabs__more-cta { flex: none; }
	.stabs__more-item { flex: none; padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--ncd-line); }
	.stabs__more-cta { width: 100%; }
}
@media (max-width: 480px) {
	.stabs__text .btn { width: 100%; }
	.stabs__points li { padding: 12px; }
	.stabs__point-icon, .stabs__more-icon { width: 44px; height: 44px; }
}

/* Service tab points: navy luggage tags like the Dedicated and "Before you book" cards (user, 2026-10-23; no icons). */
.stabs .stabs__points { counter-reset: ncdpt; }
.stabs .stabs__points li { position: relative; display: block; padding: 38px 20px 24px; border: 0; border-radius: 0; background: linear-gradient(160deg, var(--ncd-navy-light) 0%, var(--ncd-navy) 45%, var(--ncd-navy-dark) 100%); box-shadow: none; color: rgba(255, 255, 255, .8); font-size: .92rem; line-height: 1.45; counter-increment: ncdpt; clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%, 0 22px); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.stabs .stabs__points li::before { content: ""; position: absolute; top: 13px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ncd-white); box-shadow: 0 0 0 4px rgba(255, 255, 255, .22); }
.stabs .stabs__points li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--ncd-orange), var(--ncd-amber)); }
.stabs .stabs__points li > span:last-child::before { content: "Item " counter(ncdpt, decimal-leading-zero); content: "Item " counter(ncdpt, decimal-leading-zero) / ""; position: absolute; top: 14px; right: 20px; color: var(--ncd-amber); font: 700 .72rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.stabs .stabs__points li:hover { transform: translateY(-6px) rotate(-1deg); }
.stabs .stabs__point-icon { display: none; }
.stabs .stabs__points strong { margin-bottom: 4px; color: #fff; }
@media (prefers-reduced-motion: reduce) { .stabs .stabs__points li:hover { transform: none; } }

/* ---------- 7. fleet ---------- */
.fleet { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 0; background: var(--ncd-white); } /* White, not grey (user, 2026-10-22). */
.fleet::before { content: ""; position: absolute; inset: 0 0 auto; height: 900px; z-index: -1; pointer-events: none;
	background: radial-gradient(520px 520px at 6% 4%, rgba(255, 159, 46, .10), transparent 70%), radial-gradient(620px 620px at 96% 0%, rgba(30, 70, 115, .06), transparent 70%); }
.fleet .section-head { max-width: 900px; margin-bottom: 26px; }
.fleet .pill { margin-bottom: 14px; }
.fleet .section-head h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); letter-spacing: -.02em; }
.fleet .section-head > p:not(.pill) { margin-top: 12px; font-size: 1.08rem; line-height: 1.55; }

/* Large items: full-width peach band, photo bleeding off the right edge. */
.fleet__more { position: relative; isolation: isolate; margin-top: 22px; padding: clamp(36px, 4vw, 56px) 0; background: linear-gradient(90deg, #FFF3EA 0%, #FFF7F1 45%, #FDF6F1 100%); }
.fleet__more-media { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 48%; display: block; }
.fleet__more-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%); mask-image: linear-gradient(90deg, transparent 0, #000 32%); }
.fleet__more-text { max-width: 64%; }
.fleet__more h3 { color: var(--ncd-navy); font-size: clamp(1.6rem, 1.1rem + 1.3vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.fleet__more p { margin-top: 10px; color: var(--ncd-text); font-size: 1.05rem; line-height: 1.5; }
.fleet__more .btn { margin-top: 18px; }

@media (max-width: 1000px) {
	.fleet__more { padding-top: 0; }
	.fleet__more-media { position: relative; width: 100%; aspect-ratio: 16 / 7; z-index: 0; }
	.fleet__more-media img { -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent); mask-image: linear-gradient(180deg, #000 65%, transparent); }
	.fleet__more-text { max-width: none; margin-top: 4px; }
}
@media (max-width: 600px) {
	.fleet__more .btn { width: 100%; height: auto; padding: 10px 14px; }
}

/* ---------- 8. why choose: vertical heading + 8 gradient columns ---------- */
.why { background: #fff; }
.why__layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: stretch; }
.why__wide { max-width: none; padding-left: clamp(20px, 4vw, 72px); padding-right: clamp(20px, 4vw, 72px); }
.why__title { align-self: center; width: max-content; margin: 0; color: var(--ncd-navy); font-size: clamp(2rem, 1.2rem + 1.4vw, 2.9rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.why__title span { display: block; white-space: nowrap; }
.why__title-accent { color: var(--ncd-orange); }
.why__cols { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
.why__col { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 400px; padding: 28px 20px 24px; border-radius: 18px; color: rgba(255, 255, 255, .78);
	background: linear-gradient(180deg, var(--ncd-navy-light) 0%, var(--ncd-navy) 55%, var(--ncd-navy-dark) 100%); box-shadow: 0 12px 28px rgba(15, 42, 74, .16); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.why__col::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--ncd-orange), var(--ncd-amber)); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.why__col::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 159, 46, .18), transparent 70%); pointer-events: none; }
.why__col:hover { transform: translateY(-8px); box-shadow: 0 22px 44px rgba(15, 42, 74, .26); }
.why__col:hover::before { transform: scaleX(1); }
.why__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 22px; border-radius: 14px; background: rgba(255, 159, 46, .14); color: var(--ncd-amber); box-shadow: inset 0 0 0 1px rgba(255, 159, 46, .3); }
.why__icon .icon { width: 26px; height: 26px; }
.why__col h3 { margin: 0 0 10px; color: #fff; font-size: 1.08rem; font-weight: 700; line-height: 1.25; }
.why__col p { font-size: .9rem; line-height: 1.5; }
.why__col p a { color: var(--ncd-amber); }

/* Smaller screens: heading on top (horizontal), columns become a swipeable row. */
@media (max-width: 1199px) {
	.why__layout { grid-template-columns: 1fr; }
	.why__title { width: auto; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); }
	.why__title span { display: inline; }
	.why__cols { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 210px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 14px; scrollbar-width: none; }
	.why__cols::-webkit-scrollbar { display: none; }
	.why__col { min-height: 300px; scroll-snap-align: start; }
}
@media (max-width: 600px) {
	.why__cols { grid-auto-columns: 72%; margin-right: calc(var(--gutter) * -1); }
}

/* ---------- 8. why choose + price match ---------- */

/* ---------- 9. stats band ---------- */
.statsband { padding: 48px 0; background: var(--ncd-navy-dark); color: rgba(255, 255, 255, .8); }
.statsband__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
.statsband__list li { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; border-left: 3px solid var(--ncd-amber); line-height: 1.3; }
.statsband__list .icon { width: 26px; height: 26px; margin-bottom: 6px; color: var(--ncd-amber); }
.statsband__list strong { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); font-weight: 800; line-height: 1.1; }

/* ---------- 10. industries: photo cards; desktop = expanding accordion ---------- */
.ind { position: relative; isolation: isolate; overflow: hidden; background: var(--ncd-white); } /* White, not grey (user, 2026-10-22). */
.ind::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(640px 420px at 0% 0%, rgba(255, 159, 46, .10), transparent 70%), radial-gradient(700px 460px at 100% 100%, rgba(30, 70, 115, .08), transparent 70%); }
.ind .pill { margin-bottom: 16px; }
.ind .section-head h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); letter-spacing: -.02em; }

.ind__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* An odd number of cards: the last one spans two columns so the 2-column grid ends without a gap (11 also fills 3 columns). */
.ind__card:last-child:nth-child(odd) { grid-column: span 2; }
@media (min-width: 700px) { .ind__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.ind__card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; border-radius: 18px; background: var(--ncd-navy); box-shadow: 0 12px 28px rgba(15, 42, 74, .14); }
.ind__img { position: absolute; inset: 0; z-index: -2; }
.ind__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.ind__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 29, 51, .05) 0%, rgba(10, 29, 51, .3) 35%, rgba(10, 29, 51, .9) 70%, var(--ncd-navy-dark) 100%); }
.ind__card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--ncd-orange), var(--ncd-amber)); transform: scaleX(0); transform-origin: left; transition: transform .45s; }
.ind__num { position: absolute; top: 14px; left: 14px; padding: 4px 10px; border: 1px solid rgba(255, 159, 46, .5); border-radius: 999px; background: rgba(10, 29, 51, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--ncd-amber); font-size: .78rem; font-weight: 700; letter-spacing: .08em; }
.ind__vt { display: none; }
.ind__body { padding: 16px; color: rgba(255, 255, 255, .82); }
.ind__body h3 { margin: 0 0 6px; color: #fff; font-size: 1.15rem; font-weight: 800; }
.ind__body p { font-size: .88rem; line-height: 1.45; }
.ind__body p + p { margin-top: 0; }
.ind__links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 10px !important; font-weight: 700; }
.ind__links a { color: var(--ncd-amber); text-decoration: none; }
.ind__links a:hover { color: #fff; text-decoration: underline; }
.ind__links a:first-of-type::before { content: ""; position: absolute; inset: 0; z-index: 1; }   /* whole card clickable */
.ind__links a + a { position: relative; z-index: 2; }
.ind__links .icon { width: 16px; height: 16px; color: var(--ncd-amber); transition: transform .2s; }

/* Desktop with a mouse: horizontal accordion. Hover/focus a strip to open it; the first is open by default. */
@media (min-width: 1100px) and (hover: hover) {
	.ind__grid { display: flex; height: 540px; gap: 10px; }
	.ind__card { flex: 1 1 0; min-width: 0; min-height: 0; border-radius: 20px; transition: flex-grow .6s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
	.ind__card.is-open, .ind__card:hover, .ind__card:focus-within { flex-grow: 5.2; box-shadow: 0 24px 50px rgba(15, 42, 74, .28); }
	.ind__grid:hover .ind__card.is-open:not(:hover):not(:focus-within), .ind__grid:focus-within .ind__card.is-open:not(:focus-within):not(:hover) { flex-grow: 1; box-shadow: 0 12px 28px rgba(15, 42, 74, .14); }
	.ind__card::before { background: linear-gradient(180deg, rgba(10, 29, 51, .35) 0%, rgba(10, 29, 51, .55) 45%, rgba(10, 29, 51, .95) 100%); transition: background .5s; }
	.ind__vt { display: block; position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; color: #fff; font-size: 1.1rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; transition: opacity .3s; }
	.ind__num { left: 50%; transform: translateX(-50%); transition: left .5s, transform .5s; }
	.ind__body { position: absolute; left: 0; right: 0; bottom: 0; width: 400px; max-width: 100%; padding: 26px 28px 30px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .4s; }
	.ind__body h3 { font-size: 1.6rem; }
	.ind__body p { font-size: 1rem; }
	.ind__links { font-size: 1rem; }

	/* Open state */
	.ind__card.is-open::before, .ind__card:hover::before, .ind__card:focus-within::before { background: linear-gradient(180deg, rgba(10, 29, 51, 0) 0%, rgba(10, 29, 51, .15) 40%, rgba(10, 29, 51, .9) 78%, var(--ncd-navy-dark) 100%); }
	.ind__card.is-open::after, .ind__card:hover::after, .ind__card:focus-within::after { transform: scaleX(1); }
	.ind__card.is-open .ind__img img, .ind__card:hover .ind__img img, .ind__card:focus-within .ind__img img { transform: scale(1.04); }
	.ind__card.is-open .ind__vt, .ind__card:hover .ind__vt, .ind__card:focus-within .ind__vt { opacity: 0; }
	.ind__card.is-open .ind__num, .ind__card:hover .ind__num, .ind__card:focus-within .ind__num { left: 22px; transform: none; }
	.ind__card.is-open .ind__body, .ind__card:hover .ind__body, .ind__card:focus-within .ind__body { opacity: 1; transform: none; pointer-events: auto; transition-delay: .18s; }
	.ind__card:hover .ind__links .icon { transform: translateX(4px); }

	/* Undo the default-open card while another is being explored. */
	.ind__grid:hover .ind__card.is-open:not(:hover)::before { background: linear-gradient(180deg, rgba(10, 29, 51, .35) 0%, rgba(10, 29, 51, .55) 45%, rgba(10, 29, 51, .95) 100%); }
	.ind__grid:hover .ind__card.is-open:not(:hover)::after { transform: scaleX(0); }
	.ind__grid:hover .ind__card.is-open:not(:hover) .ind__vt { opacity: 1; }
	.ind__grid:hover .ind__card.is-open:not(:hover) .ind__num { left: 50%; transform: translateX(-50%); }
	.ind__grid:hover .ind__card.is-open:not(:hover) .ind__body { opacity: 0; transform: translateY(16px); pointer-events: none; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) { .ind__card, .ind__body, .ind__img img { transition: none !important; } }
@media (max-width: 420px) {
	.ind__card { min-height: 250px; }
	.ind__body { padding: 12px; }
	.ind__body h3 { font-size: 1rem; }
	.ind__body p { font-size: .78rem; }
	.ind__links { font-size: .78rem; }
	.ind__num { top: 10px; left: 10px; font-size: .7rem; }
}

/* ---------- 11. coverage: dark live map ---------- */
.cov { position: relative; isolation: isolate; overflow: hidden; background: var(--ncd-navy-dark); color: rgba(255, 255, 255, .78); }
.cov::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(700px 600px at 22% 45%, rgba(30, 70, 115, .75), transparent 70%),
		radial-gradient(500px 400px at 95% 0%, rgba(255, 159, 46, .07), transparent 70%),
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 48px 48px; }
.cov a { color: #fff; }
.cov a:hover { color: var(--ncd-amber); }
.cov__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }

/* Map */
.cov-map { position: relative; }
.cov-map__svg { display: block; width: 100%; max-height: 900px; height: auto; overflow: visible; }
.cov-route { fill: none; stroke: var(--ncd-amber); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .85; transition: stroke-width .25s, opacity .25s; }
.cov.is-live .cov-route { animation: covDraw 1.4s cubic-bezier(.4, 0, .2, 1) var(--d) forwards; }
@keyframes covDraw { to { stroke-dashoffset: 0; } }
.cov-city__dot { fill: #8FB9E0; stroke: var(--ncd-navy-dark); stroke-width: 1; transition: fill .25s, r .25s; }
.cov-city text { fill: rgba(255, 255, 255, .9); font: 600 8px/1 var(--font); paint-order: stroke; stroke: var(--ncd-navy-dark); stroke-width: 2.6px; stroke-linejoin: round; opacity: 0; transition: opacity .25s; pointer-events: none; }
.cov-city--label text { opacity: 1; }
.cov-city--hq .cov-city__dot { fill: var(--ncd-orange); stroke: #fff; stroke-width: 1.4; }
.cov-city--hq text { fill: var(--ncd-amber); font-size: 9.5px; font-weight: 800; }
.cov-city__pulse { fill: none; stroke: var(--ncd-orange); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: covPulse 2.4s ease-out infinite; }
.cov-city__pulse--2 { animation-delay: 1.2s; }
@keyframes covPulse { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(4); opacity: 0; } }
/* Highlight: region / city / route chosen in the lists */
.cov-map[data-region] .cov-city:not(.cov-city--hq) .cov-city__dot { fill: rgba(143, 185, 224, .35); }
.cov-map[data-region] .cov-city:not(.cov-city--hq) text { opacity: 0; }
.cov-map[data-region="london"] .cov-city[data-region="london"] .cov-city__dot, .cov-map[data-region="midlands"] .cov-city[data-region="midlands"] .cov-city__dot, .cov-map[data-region="northwest"] .cov-city[data-region="northwest"] .cov-city__dot, .cov-map[data-region="yorkshire"] .cov-city[data-region="yorkshire"] .cov-city__dot, .cov-map[data-region="scotland"] .cov-city[data-region="scotland"] .cov-city__dot, .cov-map[data-region="wales"] .cov-city[data-region="wales"] .cov-city__dot, .cov-map[data-region="south"] .cov-city[data-region="south"] .cov-city__dot { fill: var(--ncd-amber); r: 3.6; }
.cov-map[data-region="london"] .cov-city[data-region="london"] text, .cov-map[data-region="midlands"] .cov-city[data-region="midlands"] text, .cov-map[data-region="northwest"] .cov-city[data-region="northwest"] text, .cov-map[data-region="yorkshire"] .cov-city[data-region="yorkshire"] text, .cov-map[data-region="scotland"] .cov-city[data-region="scotland"] text, .cov-map[data-region="wales"] .cov-city[data-region="wales"] text, .cov-map[data-region="south"] .cov-city[data-region="south"] text { opacity: 1; fill: #fff; }
.cov-city.is-hot .cov-city__dot { fill: var(--ncd-orange); r: 4.4; }
.cov-city.is-hot text { opacity: 1 !important; fill: var(--ncd-amber); }
.cov-map[data-route] .cov-route { opacity: .2; }
.cov-map[data-route="man"] .cov-route[data-route="man"], .cov-map[data-route="bhm"] .cov-route[data-route="bhm"], .cov-map[data-route="bri"] .cov-route[data-route="bri"], .cov-map[data-route="gla"] .cov-route[data-route="gla"], .cov-map[data-route="not"] .cov-route[data-route="not"], .cov-map[data-route="lei"] .cov-route[data-route="lei"] { opacity: 1; stroke-width: 3; stroke: var(--ncd-orange); }
.cov-map__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 8px; font-size: .85rem; color: rgba(255, 255, 255, .6); }
.cov-map__legend span { display: inline-flex; align-items: center; gap: 8px; }
.cov-key { display: inline-block; }
.cov-key--hq { width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--ncd-orange); }
.cov-key--city { width: 8px; height: 8px; border-radius: 50%; background: #8FB9E0; }
.cov-key--route { width: 22px; height: 2px; background: var(--ncd-amber); }

/* Text column */
.cov__text .pill { margin-bottom: 16px; }
.cov h2 { color: #fff; font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); letter-spacing: -.02em; }
.cov__lead { margin-top: 14px; font-size: 1.05rem; }
.cov-regions { margin: 24px 0 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.cov-region { display: grid; grid-template-columns: 190px 1fr; gap: 6px 16px; align-items: baseline; padding: 12px 10px; border-bottom: 1px solid rgba(255, 255, 255, .1); transition: background-color .25s; }
.cov-region:hover, .cov-region:focus-within { background: linear-gradient(90deg, rgba(255, 159, 46, .1), transparent); }
.cov-region dt { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; }
.cov-region__count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: rgba(255, 159, 46, .14); color: var(--ncd-amber); font-size: .78rem; font-weight: 800; }
.cov-region dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .95rem; }
.cov-region dd a { color: rgba(255, 255, 255, .78); text-decoration: none; border-bottom: 1px dashed rgba(255, 255, 255, .25); }
.cov-region dd a:hover, .cov-region dd a:focus-visible { color: var(--ncd-amber); border-bottom-color: var(--ncd-amber); }
.cov__more { margin-top: 14px; font-size: .95rem; }
.cov__h3 { margin: 30px 0 6px; color: #fff; font-size: 1.35rem; }
.cov-routes { margin: 14px 0 0; padding: 0; list-style: none; }
.cov-routes li { display: grid; grid-template-columns: 96px 1fr 96px 80px; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: default; transition: background-color .25s; }
.cov-routes li:hover, .cov-routes li:focus-visible { outline: none; background: rgba(255, 255, 255, .06); }
.cov-routes__from, .cov-routes__to { color: #fff; font-weight: 600; font-size: .95rem; }
.cov-routes__to { text-align: right; }
.cov-routes__line { position: relative; height: 2px; background: rgba(255, 255, 255, .12); border-radius: 2px; }
.cov-routes__line i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--ncd-amber), var(--ncd-orange)); transition: width 1.2s cubic-bezier(.4, 0, .2, 1); }
.cov-routes__line i::after { content: ""; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ncd-orange); box-shadow: 0 0 0 3px rgba(242, 106, 27, .25); }
.cov.is-live .cov-routes__line i { width: var(--w); }
.cov-routes__miles { color: var(--ncd-amber); font-size: .9rem; font-weight: 700; text-align: right; white-space: nowrap; }
.cov__note { margin-top: 12px; font-size: .95rem; }

/* Head office band */
.cov-hq { position: relative; display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: clamp(44px, 5vw, 70px); padding-top: 34px; border-top: 1px solid rgba(255, 255, 255, .12); }
.cov-hq::before { content: ""; position: absolute; top: -1px; left: 0; width: 160px; height: 2px; background: linear-gradient(90deg, var(--ncd-orange), transparent); }
.cov-hq__beacon { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: rgba(242, 106, 27, .14); color: var(--ncd-orange); }
.cov-hq__beacon .icon { width: 32px; height: 32px; }
.cov-hq__beacon span { position: absolute; inset: 0; border: 1px solid rgba(242, 106, 27, .6); border-radius: 50%; animation: covBeacon 2.4s ease-out infinite; }
@keyframes covBeacon { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.cov-hq h3 { color: #fff; font-size: 1.3rem; }
.cov-hq p { margin-top: 8px; font-size: .95rem; }
.cov-hq__details { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.cov-hq__details li { display: flex; gap: 10px; line-height: 1.4; }
.cov-hq__details .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--ncd-amber); }
.cov-hq__details strong { display: block; color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.cov-route { stroke-dashoffset: 0; animation: none !important; }
	.cov-routes__line i { width: var(--w); transition: none; }
	.cov-city__pulse, .cov-hq__beacon span { animation: none; opacity: .4; }
}
@media (max-width: 999px) {
	.cov__grid { grid-template-columns: 1fr; }
	.cov-map { max-width: 460px; margin: 0 auto; }
	.cov-hq { grid-template-columns: auto 1fr; }
	.cov-hq__details { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.cov-region { grid-template-columns: 1fr; padding: 12px 4px; }
	.cov-routes li { grid-template-columns: 1fr auto 1fr; gap: 4px 10px; }
	.cov-routes__line { grid-column: 1 / -1; grid-row: 2; }
	.cov-routes__miles { grid-column: 3; grid-row: 1; }
	.cov-routes__to { grid-column: 2; grid-row: 1; }
	.cov-hq { grid-template-columns: 1fr; gap: 18px; }
	.cov-hq__details { grid-template-columns: 1fr; }
}

/* ---------- 13. quote CTA (light) ---------- */
.qcta { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(135deg, var(--ncd-peach) 0%, #fff 55%, var(--ncd-grey) 100%); }
.qcta::before { content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; top: 58%; height: 2px; background: repeating-linear-gradient(90deg, rgba(242, 106, 27, .35) 0 14px, transparent 14px 26px); transform: rotate(-6deg); }
.qcta::after { content: ""; position: absolute; z-index: -1; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 159, 46, .18), transparent 70%); }
.qcta__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.qcta .pill { margin-bottom: 16px; }
.qcta h2 { font-size: clamp(2rem, 1.3rem + 2.3vw, 3.2rem); letter-spacing: -.02em; }
.qcta h2 span { display: block; color: var(--ncd-orange); }
.qcta__lead { margin-top: 16px; max-width: 520px; font-size: 1.1rem; }
.qcta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.qcta__trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--ncd-text-muted); font-size: .95rem; }
.qcta__trust li { display: flex; align-items: center; gap: 8px; }
.qcta__trust .icon { width: 18px; height: 18px; color: var(--ncd-orange-dark); }

/* The docket: a tilted quote slip with a torn bottom edge */
.docket { position: relative; padding: 26px 28px 30px; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 30px 60px rgba(15, 42, 74, .16), 0 2px 0 var(--ncd-line); transform: rotate(1.2deg); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.docket:hover { transform: rotate(0); }
.docket::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: radial-gradient(circle at 10px 0, #fff 10px, transparent 10.5px) 0 0 / 20px 12px repeat-x; filter: drop-shadow(0 4px 3px rgba(15, 42, 74, .08)); }
.docket__head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 2px dashed var(--ncd-line); }
.docket__logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--ncd-navy); color: #fff; }
.docket__logo .icon { width: 24px; height: 24px; }
.docket__title { color: var(--ncd-navy); font-size: 1.15rem; font-weight: 800; }
.docket__ref { color: var(--ncd-text-muted); font-size: .85rem; }
.docket__badge { margin-left: auto; padding: 5px 12px; border-radius: 999px; background: var(--ncd-peach); color: var(--ncd-orange-dark); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.docket__rows { margin: 0; padding: 0; list-style: none; counter-reset: dk; }
.docket__rows li { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--ncd-line); font-size: .97rem; line-height: 1.45; }
.docket__rows strong { color: var(--ncd-navy); }
.docket__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ncd-peach); color: var(--ncd-orange-dark); }
.docket__icon .icon { width: 19px; height: 19px; }
.docket__total { position: relative; display: flex; align-items: baseline; gap: 12px; margin-top: 16px; padding: 16px 18px; border-radius: 12px; background: var(--ncd-navy); color: rgba(255, 255, 255, .7); font-size: .9rem; }
.docket__total strong { color: #fff; font-size: 1.15rem; }
.docket__stamp { position: absolute; right: 14px; top: 50%; padding: 6px 10px; border: 2px solid var(--ncd-amber); border-radius: 8px; color: var(--ncd-amber); font-size: .68rem; font-weight: 800; line-height: 1.1; letter-spacing: .08em; text-align: center; text-transform: uppercase; transform: translateY(-50%) rotate(-8deg); }
.docket__small { margin-top: 14px; color: var(--ncd-text-muted); font-size: .85rem; line-height: 1.5; }
.docket__small a { color: var(--ncd-orange-dark); }

@media (max-width: 999px) { .qcta__grid { grid-template-columns: 1fr; } .docket { transform: none; } }
@media (max-width: 520px) {
	.qcta__actions .btn { width: 100%; }
	.docket { padding: 20px 18px 24px; }
	.docket__badge { display: none; }
	.docket__total { flex-direction: column; gap: 2px; padding-right: 110px; }
}

/* ---------- hero entrance (CSS only; the photo is never animated, it is the LCP element) ---------- */
@keyframes ncdUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ncdFromRight { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes ncdPop { from { opacity: 0; transform: scale(.9) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ncdRatingVan { 0% { opacity: 0; transform: translateX(-36px); } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(230px); } }
@keyframes ncdStarOn { from { color: rgba(255, 255, 255, .22); transform: scale(.6); } 60% { color: var(--ncd-amber); transform: scale(1.25); } to { color: var(--ncd-amber); transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.hero__content > :not(.hero__media), .hero__features > li { animation: ncdUp .6s cubic-bezier(.2, .7, .2, 1) both; }
	.hero__content > .hero__rating { animation-delay: .05s; }
	/* The van drives along the rating line (transform only, no layout shift); each star lights as it passes. */
	.hero__rating-van { animation: ncdRatingVan 1.5s linear .45s both; }
	.hero__stars i { animation: ncdStarOn .45s cubic-bezier(.3, 1.5, .5, 1) both; }
	.hero__stars i:nth-child(1) { animation-delay: .55s; }
	.hero__stars i:nth-child(2) { animation-delay: .67s; }
	.hero__stars i:nth-child(3) { animation-delay: .79s; }
	.hero__stars i:nth-child(4) { animation-delay: .91s; }
	.hero__stars i:nth-child(5) { animation-delay: 1.03s; }
	html.ncd-intro .hero__rating-van, html.ncd-intro .hero__stars i { animation-play-state: paused; }
	.hero__content > .hero__title { animation-delay: .12s; }
	.hero__content > .hero__lead { animation-delay: .22s; }
	.hero__content > .hero__text { animation-delay: .3s; }
	.hero__form .quote-card { animation: ncdFromRight .7s cubic-bezier(.2, .7, .2, 1) .18s both; }
	.hero__features > li:nth-child(1) { animation-delay: .42s; }
	.hero__features > li:nth-child(2) { animation-delay: .52s; }
	.hero__features > li:nth-child(3) { animation-delay: .62s; }
	.hero__badge { animation: ncdPop .5s cubic-bezier(.3, 1.4, .5, 1) .75s both; }
	/* Hold everything until the map intro has finished (first visit only). */
	html.ncd-intro .hero__content > :not(.hero__media), html.ncd-intro .hero__features > li, html.ncd-intro .hero__form .quote-card, html.ncd-intro .hero__badge { animation-play-state: paused; }
}

/* Wide screens: hero spans the full width, so the quote form sits towards the right edge. */
@media (min-width: 1280px) {
	.hero__inner.container { max-width: none; padding-left: clamp(40px, 6vw, 120px); padding-right: clamp(40px, 6vw, 120px); grid-template-columns: minmax(0, 720px) 540px; justify-content: space-between; }
}

/* ---------- hero drive-off (desktop only): truck + badge layers over the background plate ---------- */
.hero__layers { display: none; }
@media (min-width: 1280px) {
	.hero__layers { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
	.hero__truck, .hero__badge-art { position: absolute; left: 0; top: 0; display: block; will-change: transform; }
	.hero__truck img, .hero__badge-art img { display: block; width: 100%; height: auto; }
	.hero__truck { transform-origin: 0 100%; }
	.hero__badge-art { transform-origin: 50% 100%; }
	.hero__badge-art img { filter: drop-shadow(0 10px 18px rgba(10, 29, 51, .35)); }
}