/*
Theme Name: Z-1 Clearview
Theme URI: https://z1glass.com/
Author: Dependent Media
Author URI: https://dependentmedia.com/
Description: Block theme for Z-1 Glass, Reno, Nevada: family-owned auto glass since 1992. The site is a windshield: a dusk drive toward the Sierra, the black "frit" dot band every windshield wears, a rock chip you can throw, a quarter-and-dollar-bill repair checker, an odometer of cars repaired. Core blocks only; the interactive pieces are small HTML blocks wired by assets/site.js.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: z1-clearview
*/

/* =====================================================================================================================
   TOKENS
   ===================================================================================================================== */
:root {
	--z-night: var(--wp--preset--color--night);
	--z-night-2: var(--wp--preset--color--night-2);
	--z-night-3: var(--wp--preset--color--night-3);
	--z-cyan: var(--wp--preset--color--cyan);
	--z-cyan-ink: var(--wp--preset--color--cyan-ink);
	--z-amber: var(--wp--preset--color--amber);
	--z-amber-deep: var(--wp--preset--color--amber-deep);
	--z-alpen: var(--wp--preset--color--alpenglow);
	--z-frost: var(--wp--preset--color--frost);
	--z-mist: var(--wp--preset--color--mist);
	--z-ink: var(--wp--preset--color--ink);
	--z-ink-soft: var(--wp--preset--color--ink-soft);
	--z-white: #fff;
	--z-on-dark: #e8f1f6;
	--z-on-dark-soft: #a9bccb;
	--z-rule: rgba(13, 27, 39, .12);
	--z-rule-dark: rgba(232, 241, 246, .14);
	--z-radius: 18px;
	--z-ease: cubic-bezier(.2, .7, .2, 1);
	--z-shadow: 0 1px 2px rgba(8, 19, 30, .06), 0 14px 34px -18px rgba(8, 19, 30, .35);
	--z-shadow-lg: 0 2px 4px rgba(8, 19, 30, .06), 0 30px 60px -30px rgba(8, 19, 30, .55);
	--z-header-h: 78px;
	--z-display: var(--wp--preset--font-family--display);
	--z-mono: var(--wp--preset--font-family--mono);
	/* the windshield "frit": black ceramic dots fading into clear glass */
	--z-frit: radial-gradient(circle, #0b1520 0 46%, transparent 50%);
}

html { scroll-padding-top: calc(var(--z-header-h) + 1rem); -webkit-text-size-adjust: 100%; }
/* every theme component sizes border-box (block themes leave content-box, so height:100% + padding overflowed) */
[class*="z-"], [class*="z-"]::before, [class*="z-"]::after, .z-checker *, .z-pays *, .z-map *, .z-lineup *, .z-stickers * { box-sizing: border-box; }
body { font-stretch: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--z-cyan); color: var(--z-night); }
img { height: auto; }
:where(h1, h2, h3, h4) { font-stretch: 118%; text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--z-cyan-ink); }
.z-dark h1 em, .z-dark h2 em, .z-dark h3 em, .z-hero h1 em, .z-pagehead h1 em { color: var(--z-cyan); }
:focus-visible { outline: 3px solid var(--z-amber); outline-offset: 3px; border-radius: 4px; }
.screen-reader-text, .z-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.z-skip { position: absolute; left: 1rem; top: -100px; z-index: 1000; background: var(--z-amber); color: var(--z-night); padding: .7rem 1.1rem; border-radius: 999px; font-weight: 700; text-decoration: none; }
.z-skip:focus { top: .75rem; }

/* small type roles */
.z-eyebrow { font-family: var(--z-mono); font-size: .78rem !important; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--z-cyan-ink); margin-bottom: .2rem !important; display: flex; align-items: flex-start; gap: .6rem; line-height: 1.5; }
.z-eyebrow::before { content: ""; width: 1.6rem; height: 6px; margin-top: .48em; flex: none; background: radial-gradient(circle, currentColor 0 1.6px, transparent 2px) 0 50% / 6px 6px repeat-x; opacity: .8; }
.z-eyebrow--center { justify-content: center; }
.z-dark .z-eyebrow, .z-hero .z-eyebrow, .z-pagehead .z-eyebrow { color: var(--z-cyan); }
.z-lead { font-size: var(--wp--preset--font-size--md) !important; line-height: 1.55; color: var(--z-ink-soft); max-width: 40rem; }
.z-dark .z-lead, .z-hero .z-lead, .z-pagehead .z-lead { color: var(--z-on-dark); }
.z-fine { font-size: .86rem !important; color: var(--z-ink-soft); line-height: 1.55; }
.z-dark .z-fine { color: var(--z-on-dark-soft); }
.z-center { text-align: center; }
.z-center .z-lead { margin-inline: auto; }
.z-mono { font-family: var(--z-mono); }

/* =====================================================================================================================
   BUTTONS
   ===================================================================================================================== */
.wp-element-button, .wp-block-button__link { transition: background-color .2s, color .2s, transform .2s var(--z-ease), box-shadow .2s; box-shadow: 0 10px 22px -12px rgba(232, 146, 28, .75); }
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button__link:active { transform: translateY(1px); }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--z-ink); border: 2px solid currentColor; box-shadow: none; padding: calc(.95rem - 2px) calc(1.6rem - 2px); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--z-ink); color: #fff; border-color: var(--z-ink); }
.wp-block-button.is-style-glass > .wp-block-button__link { background: rgba(232, 241, 246, .1); color: #fff; border: 1.5px solid rgba(232, 241, 246, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: calc(.95rem - 1.5px) calc(1.6rem - 1.5px); }
.wp-block-button.is-style-glass > .wp-block-button__link:hover { background: rgba(232, 241, 246, .22); border-color: #fff; color: #fff; }
.wp-block-button.is-style-link > .wp-block-button__link { background: none; color: var(--z-cyan-ink); padding: .2rem 0; box-shadow: none; border-radius: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.wp-block-button.is-style-link > .wp-block-button__link::after { content: " →"; }
.wp-block-button.is-style-link > .wp-block-button__link:hover { color: var(--z-ink); transform: none; }
.z-dark .wp-block-button.is-style-link > .wp-block-button__link { color: var(--z-cyan); }
.z-dark .wp-block-button.is-style-link > .wp-block-button__link:hover { color: #fff; }
.z-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--z-amber); color: var(--z-night); font-weight: 700; text-decoration: none; padding: .85rem 1.4rem; border-radius: 999px; box-shadow: 0 10px 22px -12px rgba(232, 146, 28, .75); transition: background .2s, transform .2s var(--z-ease); }
.z-btn:hover { background: var(--z-amber-deep); color: var(--z-night); transform: translateY(-1px); }
.z-btn--ghost { background: transparent; color: inherit; border: 2px solid currentColor; box-shadow: none; padding: calc(.85rem - 2px) calc(1.4rem - 2px); }
.z-btn--ghost:hover { background: var(--z-ink); color: #fff; border-color: var(--z-ink); }

/* =====================================================================================================================
   HEADER: utility bar (scrolls away) + frosted header (sticks)
   ===================================================================================================================== */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: calc(var(--z-util-h, 36px) * -1); z-index: 60; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: calc(32px - var(--z-util-h, 36px)); }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: calc(46px - var(--z-util-h, 36px)); } }

.z-util { background: var(--z-night); color: var(--z-on-dark); font-size: .84rem; padding-block: .45rem; }
.z-util__row { display: flex; align-items: center; justify-content: space-between; gap: .4rem 1.5rem; flex-wrap: wrap; margin-inline: auto; }
.z-util p { margin: 0; }
.z-util a { color: var(--z-on-dark); text-decoration: none; }
.z-util a:hover { color: #fff; text-decoration: underline; }
.z-util__ins { display: flex; align-items: center; gap: .45rem; color: var(--z-on-dark); }
.z-util__ins svg { width: 16px; height: 16px; fill: none; stroke: var(--z-cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.z-open { display: inline-flex; align-items: center; gap: .55rem; }
.z-open__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--z-on-dark-soft); flex: none; }
.z-open.is-open .z-open__dot { background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: z-pulse 2.2s infinite; }
.z-open.is-closed .z-open__dot { background: var(--z-amber); }
@keyframes z-pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .55); } 70% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
@media (max-width: 760px) { .z-util__addr, .z-util__ins { display: none !important; } .z-util__row { justify-content: center; } }

.z-header { position: relative; isolation: isolate; border-bottom: 1px solid rgba(13, 27, 39, .08); transition: box-shadow .3s var(--z-ease); }
/* the frost lives on a pseudo-element: backdrop-filter on the header itself would trap the fixed mobile menu inside it */
.z-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(246, 250, 252, .84); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
.z-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 6px; pointer-events: none; background: radial-gradient(circle, rgba(11, 21, 32, .5) 0 1.1px, transparent 1.5px) 0 0 / 7px 6px repeat-x; opacity: 0; transition: opacity .3s; }
.z-header.is-scrolled { box-shadow: 0 14px 30px -26px rgba(8, 19, 30, .7); }
.z-header.is-scrolled::after { opacity: .55; }
.z-header__row { min-height: var(--z-header-h); gap: 1rem !important; margin-inline: auto; }
.z-brand { display: block; flex: none; line-height: 0; border-radius: 6px; }
.z-brand img { width: auto; height: 52px; display: block; transition: transform .3s var(--z-ease); }
.z-brand:hover img { transform: translateY(-1px) rotate(-1deg); }
.z-nav { flex: 1; }
.z-nav .wp-block-navigation__container { gap: .15rem 1.35rem; }
.z-nav .wp-block-navigation-item__content { color: var(--z-ink); text-decoration: none; padding: .35rem 0; position: relative; }
.z-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: radial-gradient(circle, var(--z-cyan-ink) 0 1.4px, transparent 1.8px) 0 50% / 6px 4px repeat-x; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--z-ease); }
.z-nav .wp-block-navigation-item__content:hover::after, .z-nav .current-menu-item > .wp-block-navigation-item__content::after, .z-nav [aria-current="page"]::after { transform: scaleX(1); }
.z-nav .wp-block-navigation-item__content:hover { color: var(--z-cyan-ink); }
.z-header__ctas { display: flex; align-items: center; gap: .6rem; flex: none; }
.z-call { display: inline-flex; align-items: center; gap: .55rem; color: var(--z-ink); text-decoration: none; font-weight: 700; padding: .5rem .7rem; border-radius: 999px; white-space: nowrap; }
.z-call:hover { background: var(--z-mist); color: var(--z-ink); }
.z-call__icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--z-night); color: var(--z-cyan); flex: none; }
.z-call__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.z-call__text { display: flex; flex-direction: column; line-height: 1.1; }
.z-call__text small { font-family: var(--z-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--z-ink-soft); font-weight: 500; }
.z-book { display: inline-flex; align-items: center; gap: .45rem; background: var(--z-amber); color: var(--z-night); font-weight: 800; text-decoration: none; padding: .72rem 1.15rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 10px 20px -12px rgba(232, 146, 28, .9); transition: background .2s, transform .2s var(--z-ease); }
.z-book:hover { background: var(--z-amber-deep); color: var(--z-night); transform: translateY(-1px); }
.z-book svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* nav: hamburger below 1180px (core only switches at 600px) */
@media (max-width: 1179px) {
	.z-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.z-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.z-nav { flex: 0 0 auto; order: 3; }
	.z-header__ctas { margin-left: auto; }
}
.z-nav .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; border-radius: 50%; background: var(--z-night); color: #fff; align-items: center; justify-content: center; }
.z-nav .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; }
.z-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--z-night) !important; color: #fff !important; padding: 1.25rem clamp(1rem, 5vw, 2.5rem) 2rem; }
.z-nav .wp-block-navigation__responsive-container.is-menu-open::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(assets/img/dusk-drive.svg) 70% 100% / cover no-repeat; opacity: .35; pointer-events: none; }
.z-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4.5rem !important; align-items: flex-start !important; }
.z-nav .is-menu-open .wp-block-navigation__container { gap: .2rem !important; align-items: flex-start !important; }
.z-nav .is-menu-open .wp-block-navigation-item__content { color: #fff !important; font-family: var(--z-display); font-stretch: 118%; font-weight: 800; font-size: clamp(1.7rem, 7vw, 2.4rem); padding: .3rem 0 !important; }
.z-nav .is-menu-open .wp-block-navigation-item__content::after { background-image: radial-gradient(circle, var(--z-cyan) 0 1.6px, transparent 2px); }
/* Book + Call live in the header on desktop; inside the open phone menu they become two buttons */
.z-nav .z-nav-cta { display: none !important; }
.z-nav .is-menu-open .z-nav-cta { display: block !important; }
.z-nav .is-menu-open .z-nav-cta--book { margin-top: 1.4rem !important; }
.z-nav .is-menu-open .z-nav-cta .wp-block-navigation-item__content { display: inline-flex !important; font-family: var(--wp--preset--font-family--body) !important; font-stretch: 100% !important; font-size: 1.05rem !important; font-weight: 800 !important; padding: .85rem 1.4rem !important; border-radius: 999px; }
.z-nav .is-menu-open .z-nav-cta--book .wp-block-navigation-item__content { background: var(--z-amber); color: var(--z-night) !important; }
.z-nav .is-menu-open .z-nav-cta--call .wp-block-navigation-item__content { border: 1.5px solid rgba(232, 241, 246, .5); margin-top: .5rem; }
.z-nav .is-menu-open .z-nav-cta .wp-block-navigation-item__content::after { display: none; }
.z-nav .wp-block-navigation__responsive-container-close { width: 44px; height: 44px; top: 1rem !important; right: 1rem !important; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; }
.z-nav .wp-block-navigation__responsive-container-close svg { fill: currentColor; }
@media (max-width: 720px) {
	.z-call__text { display: none; }
	.z-call { padding: .2rem; }
	.z-brand img { height: 42px; }
	:root { --z-header-h: 66px; }
	.z-book { padding: .65rem .95rem; font-size: .95rem; }
}
@media (max-width: 380px) { .z-book span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .z-book { padding: .7rem; } }

/* =====================================================================================================================
   LAYOUT: sections
   ===================================================================================================================== */
.z-main { margin-top: 0 !important; }
.z-main > .wp-block-post-content > *:first-child { margin-top: 0; }
.z-section { padding-block: var(--wp--preset--spacing--60); margin-block: 0 !important; position: relative; }
.z-section + .z-section { margin-top: 0 !important; }
.z-section--mist { background: var(--z-mist); }
.z-section--white { background: #fff; }
.z-section--tight { padding-block: var(--wp--preset--spacing--50); }
.z-dark { background: var(--z-night); color: var(--z-on-dark); }
.z-dark :where(h1, h2, h3, h4) { color: #fff; }
.z-dark a:where(:not(.wp-element-button):not(.z-btn)) { color: var(--z-cyan); }
.z-dark a:where(:not(.wp-element-button):not(.z-btn)):hover { color: #fff; }
.z-section__head { margin-bottom: clamp(1.75rem, 1rem + 2vw, 3rem) !important; }
.z-section__head > * { max-width: 46rem; }
.z-section__head.z-center > * { margin-inline: auto; }
.z-section__head h2 { margin-top: .4rem; }
.z-section__head .z-lead { margin-top: 1rem; }
/* frit band divider: a strip of black dots that fade into clear glass, the edge of every windshield */
.z-frit-top::before, .z-frit-bottom::after { content: ""; position: absolute; left: 0; right: 0; height: 28px; pointer-events: none; z-index: 1;
	background:
		radial-gradient(circle, #0b1520 0 2.6px, transparent 3px) 0 0 / 10px 10px repeat-x,
		radial-gradient(circle, #0b1520 0 1.9px, transparent 2.3px) 5px 9px / 10px 10px repeat-x,
		radial-gradient(circle, #0b1520 0 1.2px, transparent 1.6px) 0 18px / 10px 10px repeat-x; }
.z-frit-top::before { top: 0; }
.z-frit-bottom::after { bottom: 0; transform: scaleY(-1); }
.z-frit-top { padding-top: calc(var(--wp--preset--spacing--60) + 12px); }

/* reveal on scroll (site.js adds .is-in); never hides anything when JS or motion is off */
.js .z-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--z-ease), transform .7s var(--z-ease); transition-delay: var(--d, 0s); }
.js .z-reveal.is-in, .z-noreveal .z-reveal { opacity: 1; transform: none; }
.z-noreveal .z-anatomy .z-callout { opacity: 1; }

/* =====================================================================================================================
   HOME HERO: the windshield
   ===================================================================================================================== */
.z-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; margin-top: 0 !important;
	background: #040a13 url(assets/img/dusk-drive.svg) 50% 100% / cover no-repeat;
	min-height: clamp(600px, calc(100svh - var(--z-header-h) - var(--z-util-h, 36px)), 900px);
	padding-top: clamp(5.75rem, 4rem + 4vh, 7.25rem); padding-bottom: calc(var(--z-dash-h, 104px) + clamp(4rem, 13vh, 9rem));
	display: flex; flex-direction: column; justify-content: flex-start; }
.z-hero > .z-hero__fx { position: absolute; inset: 0; z-index: 0; max-width: none !important; margin: 0 !important; pointer-events: none; perspective: 620px; perspective-origin: 54% var(--z-horizon, 72%); }
.z-hero__copy { position: static; width: 100%; }
.z-hero__copy > * { position: relative; z-index: 3; }
.z-hero::after { content: ""; position: absolute; z-index: 1; left: -10%; top: 4%; width: min(78rem, 110%); height: 82%; background: radial-gradient(closest-side, rgba(4, 10, 19, .5), rgba(4, 10, 19, 0)); pointer-events: none; }
.z-hero__copy > * { max-width: 44rem; }
.z-hero__copy > h1 { max-width: 60rem; }
.z-hero h1 { color: #fff; font-size: clamp(2.3rem, 1.15rem + 3.4vw, 4.3rem); font-stretch: 112%; line-height: 1; letter-spacing: -.026em; margin: .6rem 0 0; text-shadow: 0 2px 28px rgba(4, 10, 19, .6); }
.z-hero h1 em { display: block; background: linear-gradient(100deg, #7fe0f5 0%, var(--z-cyan) 40%, #bdf1ff 52%, var(--z-cyan) 64%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: z-shine 7s ease-in-out 1.2s infinite; text-shadow: none; filter: drop-shadow(0 2px 18px rgba(4, 10, 19, .55)); }
@keyframes z-shine { 0%, 62% { background-position: 100% 0; } 82%, 100% { background-position: 0 0; } }
.z-hero .z-lead { margin-top: 1.2rem; color: #e3edf3; text-shadow: 0 1px 14px rgba(4, 10, 19, .8); font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem) !important; max-width: 40rem; }
.z-hero .wp-block-buttons { margin-top: 1.7rem; gap: .8rem; }
.z-hint { margin-top: 1.4rem !important; }
@media (min-width: 761px) { .z-hero__copy > .z-hint { position: absolute; z-index: 4; right: clamp(2.5rem, 7vw, 7rem); bottom: calc(var(--z-dash-h, 104px) + 1.4rem); margin: 0 !important; } }
.z-hint button { font: 500 .78rem/1 var(--z-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--z-on-dark); background: rgba(232, 241, 246, .08); border: 1px dashed rgba(232, 241, 246, .4); border-radius: 999px; padding: .6rem .95rem; cursor: pointer; display: inline-flex; align-items: center; gap: .55rem; pointer-events: auto; }
.z-hint button:hover { background: rgba(232, 241, 246, .16); color: #fff; border-style: solid; }
.z-hint svg { width: 15px; height: 15px; fill: none; stroke: var(--z-amber); stroke-width: 2; stroke-linecap: round; }
.no-js .z-hint { display: none; }

/* road: a CSS 3D ground plane; its vanishing point is the perspective-origin, which site.js puts on the scene's horizon */
.z-road { position: absolute; left: 50%; bottom: 0; width: min(150vw, 1500px); height: 2400px; transform-origin: 50% 100%; transform: translateX(-50%) rotateX(90deg); overflow: hidden;
	-webkit-mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 94%); mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 94%); }
.z-road::before { content: ""; position: absolute; inset: 0;
	background:
		radial-gradient(ellipse 55% 9% at 50% 100%, rgba(255, 233, 180, .26), transparent 70%),
		linear-gradient(to right, transparent 0 9%, rgba(230, 238, 246, .5) 9% 9.7%, transparent 9.7% 90.3%, rgba(230, 238, 246, .5) 90.3% 91%, transparent 91%),
		linear-gradient(to right, transparent 0 7.5%, #0e1520 7.5% 92.5%, transparent 92.5%); }
.z-road__dash { position: absolute; left: calc(50% - 7px); width: 14px; top: -260px; bottom: 0; background: repeating-linear-gradient(to bottom, rgba(255, 207, 120, .95) 0 110px, transparent 110px 260px); animation: z-road 1.1s linear infinite; will-change: transform; }
@keyframes z-road { to { transform: translateY(260px); } }

/* frame (car interior + frit + wipers + mirror) and chips are SVGs that site.js sizes to the hero */
.z-frame, .z-chips { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.z-frame { z-index: 2; }
.z-chips { z-index: 2; }
.z-frame .z-wiper { transition: none; }
.z-frame.is-wiping .z-wiper { animation: z-wipe 1.15s cubic-bezier(.45, 0, .3, 1) 1; }
.z-frame.is-wiping .z-wiper--b { animation-delay: .06s; }
@keyframes z-wipe { 0% { transform: rotate(0deg); } 48% { transform: rotate(var(--sweep, -104deg)); } 100% { transform: rotate(0deg); } }
.z-chip { pointer-events: none; }
.z-chip__body { transform-box: fill-box; transform-origin: center; animation: z-chip-in .28s var(--z-ease) both; }
@keyframes z-chip-in { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.z-chip.is-healing .z-chip__body { animation: z-heal 1.2s ease-in .25s forwards; }
@keyframes z-heal { 0% { opacity: 1; filter: none; } 40% { opacity: .9; filter: drop-shadow(0 0 6px #7fe0f5) brightness(1.6); } 100% { opacity: 0; filter: drop-shadow(0 0 0 #7fe0f5); } }
.z-crack { fill: none; stroke: rgba(226, 243, 252, .92); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.z-crack--run { stroke-width: 1.3; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .6)); }
.z-bubble { position: absolute; z-index: 5; max-width: 17rem; padding: .7rem .9rem; border-radius: 14px 14px 14px 4px; background: rgba(8, 19, 30, .9); border: 1px solid rgba(127, 224, 245, .45); color: #fff; font-size: .9rem; line-height: 1.4; box-shadow: 0 16px 34px -18px #000; pointer-events: none; animation: z-bubble .35s var(--z-ease) both; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.z-bubble b { color: var(--z-amber); font-weight: 700; }
.z-bubble.is-out { animation: z-bubble-out .3s ease-in forwards; }
.z-bubble a { color: var(--z-cyan); pointer-events: auto; font-weight: 700; }
@keyframes z-bubble { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes z-bubble-out { to { opacity: 0; transform: translateY(-6px); } }

/* dashboard: four trust lamps sitting on the dash */
.z-dash { position: absolute !important; left: 0; right: 0; bottom: 0; z-index: 4; margin: 0 !important; max-width: none !important; list-style: none; display: flex; justify-content: center; gap: .5rem clamp(.75rem, 2.5vw, 2.5rem); flex-wrap: wrap; padding: 1.3rem clamp(1rem, 4vw, 2.5rem) 1.15rem; }
.z-dash li { display: flex; align-items: center; gap: .6rem; color: var(--z-on-dark); font-size: .92rem; font-weight: 600; letter-spacing: .01em; }
.z-dash svg { width: 30px; height: 30px; flex: none; padding: 6px; border-radius: 50%; background: rgba(57, 194, 227, .1); box-shadow: 0 0 0 1px rgba(57, 194, 227, .4), 0 0 18px rgba(57, 194, 227, .35); stroke: var(--z-cyan); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.no-js .z-hero { background-color: #040a13; box-shadow: inset 0 0 0 14px #070d16, inset 0 0 0 16px rgba(255, 255, 255, .06); }
@media (max-width: 1120px) {
	.z-dash { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: .7rem 2rem; }
}
@media (max-width: 760px) {
	.z-hero { padding-top: 3.4rem; padding-bottom: calc(var(--z-dash-h, 150px) + 32vh); background-position: 70% 100%; }
	.z-hero__copy::before { left: -20%; width: 140%; }
	.z-dash { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; padding: 1rem 1.25rem 1.1rem; }
	.z-dash li { font-size: .82rem; gap: .5rem; align-items: center; line-height: 1.25; }
	.z-dash svg { width: 26px; height: 26px; padding: 5px; }
	.z-hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.z-hero .wp-block-button { width: 100%; }
	.z-hero .wp-block-button__link { width: 100%; text-align: center; }
	.z-hero > .z-hero__fx { perspective-origin: 50% var(--z-horizon, 72%); }
}

/* =====================================================================================================================
   PAGE HEAD (inner pages): night glass with a frit edge and a slow sheen
   ===================================================================================================================== */
.z-pagehead { position: relative; isolation: isolate; overflow: hidden; color: #fff; margin-top: 0 !important;
	background: linear-gradient(180deg, rgba(4, 10, 19, .72), rgba(4, 10, 19, .4) 60%, rgba(4, 10, 19, .78)), #040a13 url(assets/img/dusk-drive.svg) 72% 100% / cover no-repeat;
	padding-top: clamp(3.5rem, 2.5rem + 5vw, 7rem); padding-bottom: clamp(4.5rem, 3rem + 6vw, 8rem); }
.z-pagehead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; z-index: 1; pointer-events: none;
	background:
		linear-gradient(#0b1520, #0b1520) 0 100% / 100% 8px no-repeat,
		radial-gradient(circle, #0b1520 0 3px, transparent 3.4px) 0 18px / 11px 11px repeat-x,
		radial-gradient(circle, #0b1520 0 2.1px, transparent 2.5px) 5.5px 9px / 11px 11px repeat-x,
		radial-gradient(circle, #0b1520 0 1.2px, transparent 1.6px) 0 0 / 11px 11px repeat-x; }
.z-pagehead::before { content: ""; position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .07) 44%, rgba(255, 255, 255, .02) 47%, transparent 52%); animation: z-sheen 9s ease-in-out infinite; }
@keyframes z-sheen { 0%, 100% { transform: translateX(-30%); } 50% { transform: translateX(30%); } }
.z-pagehead h1 { color: #fff; margin-top: .5rem; text-shadow: 0 2px 24px rgba(4, 10, 19, .5); max-width: 58rem; }
.z-pagehead__inner > * { max-width: 46rem; }
.z-pagehead__inner > h1, .z-pagehead__inner > .wp-block-post-title { max-width: 58rem; }
.z-pagehead .z-lead { margin-top: 1rem; }
.z-crumbs { font-family: var(--z-mono); font-size: .76rem !important; letter-spacing: .1em; text-transform: uppercase; color: var(--z-on-dark-soft); margin-bottom: 1.5rem !important; }
.z-crumbs a { color: var(--z-on-dark); text-decoration: none; }
.z-crumbs a:hover { color: #fff; text-decoration: underline; }
.z-pagehead .wp-block-buttons { margin-top: 1.75rem; }
.z-pagehead--post { padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.z-pagehead--post h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); max-width: 54rem; }
.z-postmeta { font-family: var(--z-mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--z-on-dark-soft); display: flex; gap: .5rem 1.2rem; flex-wrap: wrap; margin-top: 1.2rem !important; }
.z-postmeta > * { margin: 0 !important; }
.z-postmeta a { color: var(--z-cyan) !important; text-decoration: none; }

/* =====================================================================================================================
   QUARTER TEST: repair-or-replace checker
   ===================================================================================================================== */
.z-checker { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); background: #fff; border-radius: calc(var(--z-radius) + 8px); box-shadow: var(--z-shadow-lg); overflow: hidden; border: 1px solid var(--z-rule); }
.z-checker__in { padding: clamp(1.3rem, 1rem + 1.6vw, 2.4rem); display: grid; gap: 1.35rem; align-content: start; }
.z-checker fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.z-checker legend, .z-checker .z-q { font-weight: 800; font-size: .98rem; margin-bottom: .6rem; padding: 0; display: flex; gap: .55rem; align-items: baseline; }
.z-checker legend span, .z-checker .z-q span { font-family: var(--z-mono); font-weight: 500; font-size: .74rem; color: var(--z-cyan-ink); letter-spacing: .08em; }
.z-pills { display: flex; flex-wrap: wrap; gap: .45rem; }
.z-pill { position: relative; }
.z-pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.z-pill span { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: 999px; border: 1.5px solid var(--z-rule); background: var(--z-frost); font-size: .92rem; font-weight: 600; color: var(--z-ink); transition: background .2s, border-color .2s, color .2s; }
.z-pill input:hover + span { border-color: var(--z-cyan-ink); }
.z-pill input:checked + span { background: var(--z-night); border-color: var(--z-night); color: #fff; }
.z-pill input:checked + span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--z-cyan); }
.z-pill input:focus-visible + span { outline: 3px solid var(--z-amber); outline-offset: 2px; }
.z-size label { display: flex; justify-content: space-between; gap: 1rem; font-weight: 800; font-size: .98rem; }
.z-size output { font-family: var(--z-mono); font-weight: 600; color: var(--z-cyan-ink); }
.z-range { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; background: transparent; margin: .2rem 0 0; cursor: pointer; }
.z-range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--z-cyan-ink) var(--p, 30%), #d6e3ea var(--p, 30%)); }
.z-range::-moz-range-track { height: 8px; border-radius: 99px; background: #d6e3ea; }
.z-range::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--z-cyan-ink); }
.z-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--z-night); box-shadow: 0 4px 10px -3px rgba(8, 19, 30, .5); }
.z-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--z-night); }
.z-range:focus-visible { outline: none; }
.z-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--z-amber); }
.z-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--z-amber); }
.z-size small { display: block; color: var(--z-ink-soft); font-size: .84rem; }
.z-checker__out { background: var(--z-night); color: var(--z-on-dark); padding: clamp(1.3rem, 1rem + 1.6vw, 2.4rem); display: grid; gap: 1rem; align-content: start; position: relative; isolation: isolate; }
.z-checker__out::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 60% at 100% 0%, rgba(57, 194, 227, .16), transparent 60%), radial-gradient(90% 50% at 0% 100%, rgba(255, 178, 62, .1), transparent 60%); }
.z-scale { background: linear-gradient(180deg, #0f2232, #0b1824); border-radius: 16px; border: 1px solid var(--z-rule-dark); aspect-ratio: 16 / 8; position: relative; overflow: hidden; }
.z-scale svg { width: 100%; height: 100%; display: block; }
.z-scale__cap { position: absolute; left: .8rem; bottom: .55rem; font-family: var(--z-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--z-on-dark-soft); margin: 0; }
.z-verdict { border-radius: 16px; padding: 1.1rem 1.2rem; background: rgba(232, 241, 246, .06); border: 1px solid var(--z-rule-dark); }
.z-verdict__tag { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--z-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; padding: .35rem .7rem; border-radius: 999px; background: rgba(61, 220, 132, .14); color: #7ff0b0; }
.z-verdict[data-v="look"] .z-verdict__tag { background: rgba(255, 178, 62, .16); color: var(--z-amber); }
.z-verdict[data-v="replace"] .z-verdict__tag { background: rgba(255, 138, 101, .16); color: #ffb4a0; }
.z-verdict h3 { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); margin: .7rem 0 .4rem; }
.z-verdict p { margin: 0; color: var(--z-on-dark); font-size: .98rem; }
.z-verdict__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.z-verdict__actions .z-btn--ghost { color: #fff; }
.z-verdict__actions .z-btn--ghost:hover { background: #fff; color: var(--z-night); border-color: #fff; }
.z-checker__fine { font-size: .8rem; color: var(--z-on-dark-soft); margin: 0; }
@media (max-width: 900px) { .z-checker { grid-template-columns: 1fr; } }
/* the checker and the calculator stack whenever their column is narrow, whatever the window size */
.wp-block-column:has(> .z-checker), .wp-block-column:has(> .z-pays) { container-type: inline-size; }
@container (max-width: 740px) {
	.z-checker, .z-pays { grid-template-columns: 1fr; }
	.z-checker__out { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
	.z-checker__fine { grid-column: 1 / -1; }
}
@container (max-width: 520px) { .z-checker__out { grid-template-columns: 1fr; } }
.z-size label { flex-wrap: wrap; align-items: baseline; }
.z-size .z-q { margin: 0; }
.z-size .z-q span, .z-checker legend span { white-space: nowrap; }

/* =====================================================================================================================
   LINEUP: "if it has glass, we fix it" (glass panes light up)
   ===================================================================================================================== */
.z-lineup { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }
.z-lineup li { margin: 0; }
.z-rig { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1.2rem 1.2rem 1.25rem; border-radius: var(--z-radius); background: #fff; border: 1px solid var(--z-rule); text-decoration: none; color: var(--z-ink); box-shadow: var(--z-shadow); transition: transform .35s var(--z-ease), box-shadow .35s var(--z-ease), border-color .3s; position: relative; overflow: hidden; }
.z-rig:hover, .z-rig:focus-visible { transform: translateY(-4px); box-shadow: var(--z-shadow-lg); border-color: rgba(10, 106, 136, .35); color: var(--z-ink); }
.z-rig svg { width: 100%; height: auto; aspect-ratio: 120 / 64; overflow: visible; margin-bottom: .4rem; }
.z-rig .body { fill: none; stroke: var(--z-ink); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.z-rig .fillbody { fill: #eef4f7; stroke: var(--z-ink); stroke-width: 2.1; stroke-linejoin: round; }
.z-rig .wheel { fill: var(--z-night); }
.z-rig .hub { fill: #c9d6de; }
.z-rig .glass { fill: rgba(57, 194, 227, .16); stroke: var(--z-ink); stroke-width: 1.6; stroke-linejoin: round; transition: fill .35s; }
.z-rig .shine { fill: url(#z-shine); transform: translateX(-140px); }
.z-rig:hover .glass, .z-rig:focus-visible .glass { fill: rgba(57, 194, 227, .62); }
.z-rig:hover .shine, .z-rig:focus-visible .shine { transition: transform .9s var(--z-ease); transform: translateX(150px); }
.z-rig .ground { stroke: #c4d2da; stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.z-rig strong { font-family: var(--z-display); font-stretch: 112%; font-weight: 800; font-size: 1.12rem; line-height: 1.15; }
.z-rig span { font-size: .9rem; color: var(--z-ink-soft); line-height: 1.45; }
.z-rig::after { content: "→"; position: absolute; right: 1.1rem; top: 1rem; font-weight: 800; color: var(--z-cyan-ink); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s var(--z-ease); }
.z-rig:hover::after, .z-rig:focus-visible::after { opacity: 1; transform: none; }
@media (max-width: 1000px) { .z-lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .z-rig { padding: .9rem .9rem 1rem; } .z-rig strong { font-size: 1rem; } .z-rig span { font-size: .84rem; } }

/* =====================================================================================================================
   ODOMETER band
   ===================================================================================================================== */
.z-odo-band { overflow: hidden; }
.z-odo-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 80% at 15% 20%, rgba(57, 194, 227, .14), transparent 60%), radial-gradient(50% 70% at 90% 90%, rgba(255, 178, 62, .1), transparent 60%); }
.z-gauges { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 1px; background: var(--z-rule-dark); border-radius: calc(var(--z-radius) + 4px); overflow: hidden; border: 1px solid var(--z-rule-dark); position: relative; }
.z-gauge { background: var(--z-night); padding: clamp(1.4rem, 1rem + 1.5vw, 2.3rem) clamp(1.1rem, .8rem + 1.2vw, 2rem); display: flex; flex-direction: column; gap: .7rem; justify-content: space-between; }
.z-gauge__label { font-family: var(--z-mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--z-on-dark-soft); margin: 0; }
.z-gauge__big { font-family: var(--z-display); font-stretch: 125%; font-weight: 800; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.8rem); line-height: 1; color: #fff; margin: 0; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.z-gauge__big small { font-size: .42em; font-stretch: 100%; letter-spacing: 0; color: var(--z-cyan); margin-left: .25rem; }
.z-gauge__note { margin: 0; color: var(--z-on-dark); font-size: .92rem; }
.z-odo { display: inline-flex; gap: 4px; padding: 8px; border-radius: 12px; background: linear-gradient(180deg, #02060b, #0b1520); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 5px #10202e, 0 0 0 6px rgba(255, 255, 255, .06); width: max-content; max-width: 100%; }
.z-odo__w { width: clamp(30px, 1.2rem + 1.8vw, 48px); height: clamp(46px, 1.8rem + 2.6vw, 72px); overflow: hidden; border-radius: 5px; position: relative; background: linear-gradient(180deg, #0a0f15 0%, #1d2a36 22%, #2a3a48 50%, #1d2a36 78%, #0a0f15 100%); }
.z-odo__w::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .65), transparent 30%, transparent 70%, rgba(0, 0, 0, .65)); pointer-events: none; }
.z-odo__w--last { background: linear-gradient(180deg, #0a1a22 0%, #0e7f9d 22%, #39c2e3 50%, #0e7f9d 78%, #0a1a22 100%); }
.z-odo__w--last .z-odo__s span { color: #04131c; }
.z-odo__s { display: flex; flex-direction: column; transform: translateY(calc(var(--n, 0) * -5%)); transition: transform 2.4s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--dl, 0s); }
.z-odo__s span { height: clamp(46px, 1.8rem + 2.6vw, 72px); display: grid; place-items: center; font-family: var(--z-mono); font-weight: 600; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); color: #f4f8fa; }
.z-odo-unit { font-family: var(--z-mono); font-size: .8rem; color: var(--z-cyan); letter-spacing: .12em; text-transform: uppercase; margin: 0; }
@media (max-width: 960px) { .z-gauges { grid-template-columns: repeat(3, minmax(0, 1fr)); } .z-gauge--odo { grid-column: 1 / -1; } }
@media (max-width: 560px) { .z-gauges { grid-template-columns: 1fr; } }

/* =====================================================================================================================
   PHOTOS, CARDS, LISTS
   ===================================================================================================================== */
.z-photo { margin: 0; border-radius: var(--z-radius); overflow: hidden; position: relative; box-shadow: var(--z-shadow-lg); }
.z-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.z-photo figcaption, .z-photo .wp-element-caption { position: absolute; left: .8rem; bottom: .8rem; right: .8rem; margin: 0; font-family: var(--z-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.z-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .16) 46%, transparent 52%) -120% 0 / 220% 100% no-repeat, linear-gradient(transparent 55%, rgba(4, 10, 19, .55)); transition: background-position 1.1s var(--z-ease); }
.z-photo:hover::after { background-position: 120% 0, 0 0; }
.z-work { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 1rem; }
.z-work > .z-photo { margin: 0 !important; }
.z-work > .z-photo:first-child { grid-row: span 2; }
.z-work .z-photo { aspect-ratio: 4 / 3; }
.z-work > .z-photo:first-child { aspect-ratio: auto; min-height: 100%; }
@media (max-width: 860px) { .z-work { grid-template-columns: 1fr 1fr; } .z-work > .z-photo:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; } }

.z-cards { gap: 1rem !important; }
.z-card { background: #fff; border: 1px solid var(--z-rule); border-radius: var(--z-radius); padding: clamp(1.3rem, 1rem + 1vw, 1.9rem) !important; box-shadow: var(--z-shadow); position: relative; overflow: hidden; height: 100%; }
.z-card h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); font-stretch: 106%; margin: .9rem 0 .5rem; overflow-wrap: break-word; hyphens: auto; }
.z-card p { margin: 0; color: var(--z-ink-soft); }
.z-card p + p, .z-card p + ul { margin-top: .6rem; }
.z-card ul { padding-left: 1.1rem; margin: .5rem 0 0; color: var(--z-ink-soft); }
.z-card .wp-block-buttons { margin-top: 1rem; }
.z-icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--z-night); color: var(--z-cyan); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); position: relative; }
.z-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.z-card--glass { background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(232, 241, 246, .9)); }
.z-card--glass::before { content: ""; position: absolute; top: 0; right: 0; width: 120px; height: 120px; background: radial-gradient(circle, rgba(11, 21, 32, .14) 0 2px, transparent 2.4px) 0 0 / 10px 10px; -webkit-mask-image: radial-gradient(circle at 100% 0, #000, transparent 70%); mask-image: radial-gradient(circle at 100% 0, #000, transparent 70%); }
.z-dark .z-card { background: var(--z-night-2); border-color: var(--z-rule-dark); box-shadow: none; }
.z-dark .z-card p, .z-dark .z-card ul { color: var(--z-on-dark); }
.z-ticks { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: .55rem; }
.z-ticks li { position: relative; padding-left: 1.9rem; }
.z-ticks li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--z-cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%2308131E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.z-brands { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 1.2rem 0 0; }
.z-brands li { font-family: var(--z-mono); font-weight: 600; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; padding: .55rem .9rem; border-radius: 8px; border: 1.5px solid var(--z-rule); background: linear-gradient(180deg, #fff, var(--z-mist)); color: var(--z-ink); }

.z-h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem) !important; margin-top: 0 !important; }
.z-right { justify-content: flex-end; }
@media (max-width: 781px) { .z-right { justify-content: flex-start; } }
.no-js .z-scale { display: none; }
.z-card.z-dark { background: var(--z-night); color: var(--z-on-dark); border-color: var(--z-night); }
.z-card.z-dark h2, .z-card.z-dark h3 { color: #fff; }
.z-card.z-dark p { color: var(--z-on-dark); }
.z-card .z-week { margin-top: 1rem; }
.z-card .z-contact-list { margin-top: 1rem; }

/* split blocks */
.z-split--stretch { align-items: stretch !important; }
.z-split--stretch .z-map { height: 100%; min-height: 420px; }
.z-split { gap: clamp(1.5rem, 1rem + 3vw, 4.5rem) !important; align-items: center !important; }
.z-split--top { align-items: flex-start !important; }
@media (max-width: 781px) { .z-split.wp-block-columns { gap: 1.75rem !important; } }

/* =====================================================================================================================
   REVIEWS: windshield stickers
   ===================================================================================================================== */
.z-stickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.4rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 700px) { .z-stickers:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.z-sticker { position: relative; margin: 0; padding: 1.6rem 1.5rem 1.4rem; border-radius: 22px; background: #fff; border: 1px solid var(--z-rule); box-shadow: var(--z-shadow); transform: rotate(var(--r, -1deg)); transition: transform .45s var(--z-ease), box-shadow .45s var(--z-ease); overflow: hidden; display: flex; flex-direction: column; gap: .8rem; }
.z-sticker:nth-child(2n) { --r: 1.2deg; }
.z-sticker:nth-child(3n) { --r: -.4deg; }
.z-sticker:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--z-shadow-lg); }
.z-sticker::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 30%, rgba(57, 194, 227, .18) 42%, rgba(255, 178, 62, .14) 50%, rgba(255, 138, 101, .12) 56%, transparent 66%) -150% 0 / 250% 100% no-repeat; transition: background-position 1.2s var(--z-ease); }
.z-sticker:hover::before { background-position: 150% 0; }
.z-sticker__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.z-stars { color: var(--z-amber-deep); letter-spacing: .12em; font-size: 1.05rem; line-height: 1; }
.z-sticker__top { flex-wrap: wrap; row-gap: .5rem; }
.z-sticker__tag { font-family: var(--z-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--z-ink-soft); border: 1px dashed var(--z-rule); padding: .3rem .5rem; border-radius: 6px; }
.z-sticker blockquote { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--z-ink); }
.z-sticker__by { margin: auto 0 0 !important; display: flex; align-items: center; gap: .7rem; font-weight: 700; }
.z-sticker__by span.z-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--z-night); color: var(--z-cyan); font-family: var(--z-display); font-stretch: 125%; font-weight: 800; font-size: .95rem; flex: none; }
.z-sticker__by small { display: block; font-weight: 500; color: var(--z-ink-soft); font-size: .8rem; }
.z-sticker blockquote p { margin: 0; }
.z-sticker--hero { grid-column: 1 / -1; background: var(--z-night); color: var(--z-on-dark); border-color: var(--z-rule-dark); padding: clamp(1.6rem, 1rem + 2vw, 2.8rem); --r: -.6deg; }
.z-sticker--hero blockquote { color: #fff; font-family: var(--z-display); font-stretch: 112%; font-weight: 700; font-size: clamp(1.35rem, 1rem + 1.5vw, 2.1rem); line-height: 1.25; letter-spacing: -.01em; }
.z-sticker--hero blockquote em { font-style: normal; color: var(--z-cyan); }
.z-sticker--hero .z-sticker__by small, .z-sticker--hero .z-sticker__tag { color: var(--z-on-dark-soft); border-color: var(--z-rule-dark); }
.z-sticker--hero .z-sticker__by span.z-av { background: var(--z-cyan); color: var(--z-night); }
.z-sticker--hero .z-stars { color: var(--z-amber); }
.z-bear { position: absolute; right: clamp(1rem, 3vw, 2.6rem); bottom: clamp(1rem, 3vw, 2rem); width: clamp(70px, 9vw, 120px); opacity: .9; }
@media (max-width: 640px) { .z-bear { display: none; } }

/* =====================================================================================================================
   INSURANCE: claim road + who-pays-what
   ===================================================================================================================== */
.z-claimroad { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; position: relative; }
.z-claimroad::before { content: ""; position: absolute; left: 3%; right: 3%; top: 27px; height: 6px; border-radius: 4px; background: #24384b; }
.z-claimroad::after { content: ""; position: absolute; left: 3%; right: 3%; top: 29.5px; height: 1px; background: repeating-linear-gradient(90deg, var(--z-amber) 0 14px, transparent 14px 26px); }
.z-claimroad li { position: relative; z-index: 1; counter-increment: step; }
.z-claimroad li::before { content: counter(step); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--z-night); color: var(--z-cyan); border: 2px solid var(--z-cyan); font-family: var(--z-display); font-stretch: 125%; font-weight: 800; font-size: 1.4rem; margin-bottom: 1rem; box-shadow: 0 0 0 6px var(--z-mist); }
.z-dark .z-claimroad li::before { box-shadow: 0 0 0 6px var(--z-night); }
.z-claimroad h3 { font-size: 1.08rem !important; margin: 0 0 .35rem; }
.z-claimroad p { margin: 0; font-size: .92rem; color: var(--z-ink-soft); }
.z-dark .z-claimroad p { color: var(--z-on-dark); }
.z-claimroad--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.z-claimroad li.is-ours::before { background: var(--z-amber); color: var(--z-night); border-color: var(--z-amber); }
@media (max-width: 960px) {
	.z-claimroad { grid-template-columns: 1fr; gap: 1.2rem; }
	.z-claimroad::before { left: 27px; right: auto; top: 0; bottom: 0; width: 6px; height: auto; }
	.z-claimroad::after { left: 29.5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: repeating-linear-gradient(180deg, var(--z-amber) 0 14px, transparent 14px 26px); }
	.z-claimroad li { display: grid; grid-template-columns: 60px 1fr; column-gap: 1rem; }
	.z-claimroad li::before { grid-row: span 2; margin: 0; }
}
.z-pays { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; background: #fff; border-radius: calc(var(--z-radius) + 6px); box-shadow: var(--z-shadow-lg); border: 1px solid var(--z-rule); overflow: hidden; }
.z-pays__in { padding: clamp(1.3rem, 1rem + 1.5vw, 2.2rem); display: grid; gap: 1.2rem; align-content: start; }
.z-pays__out { padding: clamp(1.3rem, 1rem + 1.5vw, 2.2rem); background: var(--z-night); color: var(--z-on-dark); display: grid; gap: 1.1rem; align-content: start; }
.z-pays__out h3 { color: #fff; font-size: 1.15rem; margin: 0; }
.z-bar { display: flex; height: 64px; border-radius: 14px; overflow: hidden; background: #1a2e40; }
.z-bar span { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem; white-space: nowrap; overflow: hidden; transition: flex-basis .5s var(--z-ease); min-width: 0; }
.z-bar .you { background: var(--z-amber); color: var(--z-night); }
.z-bar .ins { background: var(--z-cyan); color: var(--z-night); }
.z-pays dl { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 0; }
.z-pays dl div { background: rgba(232, 241, 246, .06); border: 1px solid var(--z-rule-dark); border-radius: 12px; padding: .8rem .9rem; }
.z-pays dt { font-family: var(--z-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--z-on-dark-soft); }
.z-pays dd { margin: .2rem 0 0; font-family: var(--z-display); font-stretch: 118%; font-weight: 800; font-size: 1.7rem; color: #fff; font-variant-numeric: tabular-nums; }
.z-pays dd.you { color: var(--z-amber); }
.z-pays dd.ins { color: var(--z-cyan); }
.z-pays__note { margin: 0; font-size: .9rem; color: var(--z-on-dark); }
.z-pays__fine { margin: 0; font-size: .78rem; color: var(--z-on-dark-soft); }
.z-money { display: grid; gap: .3rem; }
.z-money label { font-weight: 800; font-size: .98rem; display: flex; justify-content: space-between; }
.z-money output { font-family: var(--z-mono); font-weight: 600; color: var(--z-cyan-ink); white-space: nowrap; }
.z-money label { gap: 1rem; align-items: baseline; }
.z-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; cursor: pointer; }
.z-check input { width: 20px; height: 20px; margin: .15rem 0 0; accent-color: var(--z-night); flex: none; }
@media (max-width: 860px) { .z-pays { grid-template-columns: 1fr; } }

/* FAQ */
.z-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; align-items: start; }
.z-faq > * { margin: 0 !important; }
@media (max-width: 860px) { .z-faq { grid-template-columns: 1fr; } }
.wp-block-group.alignwide > .z-note { max-width: 56rem; margin-top: 1.5rem; }
.z-faq details { background: #fff; border: 1px solid var(--z-rule); border-radius: 14px; padding: 0; box-shadow: 0 1px 2px rgba(8, 19, 30, .04); }
.z-faq summary { list-style: none; cursor: pointer; padding: 1.05rem 3.2rem 1.05rem 1.2rem; font-weight: 800; position: relative; }
.z-faq summary::-webkit-details-marker { display: none; }
.z-faq summary::after { content: ""; position: absolute; right: 1.15rem; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--z-mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' stroke='%230D1B27' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .3s var(--z-ease); }
.z-faq details[open] summary::after { transform: rotate(45deg); }
.z-faq details > :not(summary) { padding: 0 1.2rem 1.1rem; margin: 0; color: var(--z-ink-soft); }

/* =====================================================================================================================
   WINDSHIELD ANATOMY + laminated vs tempered
   ===================================================================================================================== */
.z-anatomy { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.z-anatomy__fig { position: relative; aspect-ratio: 5 / 4; }
.z-anatomy__fig svg { width: 100%; height: 100%; overflow: visible; }
.z-layer { transition: transform 1.1s var(--z-ease); }
.z-anatomy.is-in .z-layer--out { transform: translate(-46px, -38px); }
.z-anatomy.is-in .z-layer--in { transform: translate(46px, 38px); }
.z-anatomy .z-callout { opacity: 0; transition: opacity .6s .7s; }
.z-anatomy.is-in .z-callout { opacity: 1; }
.no-js .z-anatomy .z-callout { opacity: 1; }
.z-anatomy__keys { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.z-anatomy__keys li { display: grid; grid-template-columns: 34px 1fr; gap: .8rem; align-items: start; }
.z-anatomy__keys b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--z-night); color: var(--z-cyan); font-family: var(--z-mono); font-size: .85rem; }
.z-anatomy__keys strong { display: block; font-size: 1.02rem; }
.z-anatomy__keys span { color: var(--z-ink-soft); font-size: .95rem; }
@media (max-width: 900px) { .z-anatomy { grid-template-columns: 1fr; } }

.z-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.z-vs figure { margin: 0; background: #fff; border: 1px solid var(--z-rule); border-radius: var(--z-radius); padding: 1.2rem; box-shadow: var(--z-shadow); }
.z-vs svg { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 12px; display: block; background: linear-gradient(160deg, #10273a, #0b1824); }
.z-vs figcaption { margin-top: .9rem; }
.z-vs figcaption strong { display: block; font-family: var(--z-display); font-stretch: 112%; font-size: 1.15rem; }
.z-vs figcaption span { color: var(--z-ink-soft); font-size: .95rem; }
@media (max-width: 700px) { .z-vs { grid-template-columns: 1fr; } }

/* service list with anchors */
.z-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
@media (min-width: 1180px) { .z-services { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.z-service { scroll-margin-top: calc(var(--z-header-h) + 2rem); }
.z-service .z-icon { background: linear-gradient(145deg, var(--z-night-3), var(--z-night)); }

/* =====================================================================================================================
   ADVICE (blog)
   ===================================================================================================================== */
.z-posts .wp-block-post-template { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.4rem; list-style: none; padding: 0; margin: 0; }
.z-posts .wp-block-post { margin: 0 !important; }
.z-post { height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--z-rule); border-radius: var(--z-radius); overflow: hidden; box-shadow: var(--z-shadow); transition: transform .35s var(--z-ease), box-shadow .35s var(--z-ease); position: relative; }
.z-post:hover { transform: translateY(-4px); box-shadow: var(--z-shadow-lg); }
.z-post .wp-block-post-featured-image { margin: 0 !important; aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.z-post .wp-block-post-featured-image img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .8s var(--z-ease); }
.z-post:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.z-post .wp-block-post-featured-image::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: radial-gradient(circle, #fff 0 2.2px, transparent 2.6px) 0 100% / 9px 9px repeat-x, radial-gradient(circle, #fff 0 1.3px, transparent 1.7px) 4.5px 0 / 9px 9px repeat-x; pointer-events: none; }
.z-post__body { padding: 1.15rem 1.3rem 1.4rem !important; display: flex; flex-direction: column; gap: .55rem !important; flex: 1; }
.z-post .wp-block-post-date { font-family: var(--z-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--z-cyan-ink); }
.z-post .wp-block-post-title { font-size: 1.28rem !important; line-height: 1.18; margin: 0; }
.z-post .wp-block-post-title a { color: var(--z-ink); text-decoration: none; }
.z-post .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.z-post .wp-block-post-title a:hover { color: var(--z-cyan-ink); }
.z-post .wp-block-post-excerpt { color: var(--z-ink-soft); font-size: .95rem; margin: 0; }
.z-post .wp-block-post-excerpt__excerpt { margin: 0; }
.z-posts--feature .wp-block-post-template { grid-template-columns: 1fr; }
.z-posts--feature .z-post { display: grid; grid-template-columns: 1.2fr 1fr; }
.z-posts--feature .z-post .wp-block-post-featured-image { aspect-ratio: auto; height: 100%; min-height: 320px; }
.z-posts--feature .z-post .wp-block-post-featured-image::after { display: none; }
.z-posts--feature .z-post__body { padding: clamp(1.4rem, 1rem + 2vw, 2.6rem) !important; justify-content: center; }
.z-posts--feature .wp-block-post-title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem) !important; }
@media (max-width: 760px) { .z-posts--feature .z-post { grid-template-columns: 1fr; } .z-posts--feature .z-post .wp-block-post-featured-image { min-height: 0; aspect-ratio: 16 / 10; } }
.wp-block-query-pagination { margin-top: 2rem; gap: .6rem; font-weight: 700; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { padding: .4rem .75rem; border-radius: 10px; background: #fff; border: 1px solid var(--z-rule); text-decoration: none; color: var(--z-ink); }
.wp-block-query-pagination .current { background: var(--z-night); color: #fff; }

/* single post */
.z-progress { position: fixed; left: 0; top: 0; height: 4px; width: 100%; z-index: 100; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--z-cyan), var(--z-amber)); pointer-events: none; }
.z-hero-img { margin: calc(var(--wp--preset--spacing--50) * -1) auto 0 !important; position: relative; z-index: 2; }
.z-hero-img img { width: 100%; border-radius: var(--z-radius); box-shadow: var(--z-shadow-lg); aspect-ratio: 16 / 8; object-fit: cover; }
.z-prose { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
.z-prose > *:first-child { margin-top: 0; }
.z-prose > * + * { margin-block-start: 1.15rem; }
.z-prose p, .z-prose li { font-size: 1.1rem; line-height: 1.75; }
.z-prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin-top: 2.6rem !important; margin-bottom: .8rem; }
.z-prose h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); margin-top: 2rem !important; }
.z-prose ul, .z-prose ol { padding-left: 1.3rem; }
.z-prose li + li { margin-top: .45rem; }
.z-prose li::marker { color: var(--z-cyan-ink); }
.z-prose strong { color: var(--z-ink); }
.z-prose a { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.z-prose blockquote { border-left: 4px solid var(--z-cyan); margin-left: 0; padding-left: 1.2rem; }
.z-note { background: var(--z-mist); border: 1px solid var(--z-rule); border-radius: 14px; padding: 1rem 1.2rem !important; font-size: .98rem !important; }
.z-note strong { color: var(--z-cyan-ink); }
.z-endcta { margin-top: 3rem !important; background: var(--z-night); color: var(--z-on-dark); border-radius: calc(var(--z-radius) + 6px); padding: clamp(1.4rem, 1rem + 2vw, 2.4rem) !important; position: relative; overflow: hidden; isolation: isolate; }
.z-endcta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(assets/img/dusk-drive.svg) 75% 100% / cover no-repeat; opacity: .45; }
.z-endcta h2, .z-endcta h3 { color: #fff; margin-top: 0 !important; }
.z-endcta p { color: var(--z-on-dark); }
.z-postnav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2rem !important; font-weight: 700; }
.z-postnav a { text-decoration: none; }

/* =====================================================================================================================
   VISIT: hours, map facade, contact list
   ===================================================================================================================== */
.z-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; margin: 0; }
.z-day { border-radius: 12px; padding: .65rem .3rem; text-align: center; background: #fff; border: 1px solid var(--z-rule); }
.z-day b { display: block; font-family: var(--z-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--z-ink-soft); }
.z-day b abbr { text-decoration: none; }
.z-day span { display: block; font-weight: 800; font-size: .9rem; margin-top: .15rem; white-space: nowrap; }
.z-day--closed span { color: var(--z-ink-soft); font-weight: 600; font-size: .76rem; letter-spacing: -.01em; }
.z-day.is-today { background: var(--z-night); border-color: var(--z-night); color: #fff; box-shadow: 0 10px 20px -12px rgba(8, 19, 30, .8); }
.z-day.is-today b { color: var(--z-cyan); }
.z-day.is-today span { color: #fff; }
.z-dark .z-day { background: var(--z-night-2); border-color: var(--z-rule-dark); }
.z-dark .z-day b { color: var(--z-on-dark-soft); }
.z-dark .z-day.is-today { background: var(--z-cyan); border-color: var(--z-cyan); }
.z-dark .z-day.is-today b, .z-dark .z-day.is-today span { color: var(--z-night); }
.z-hours-status { margin-top: .9rem !important; font-weight: 700; }
@media (max-width: 520px) { .z-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.z-contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.z-contact-list li { display: flex; align-items: center; gap: .8rem; }
.z-contact-list svg { width: 40px; height: 40px; padding: 10px; border-radius: 50%; flex: none; background: var(--z-mist); stroke: var(--z-cyan-ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.z-dark .z-contact-list svg { background: rgba(57, 194, 227, .12); stroke: var(--z-cyan); }
.z-contact-list a { font-weight: 700; }
.z-addr { font-style: normal; font-size: 1.2rem; line-height: 1.45; font-weight: 700; margin: 1.1rem 0 0; }
.z-map { position: relative; border-radius: calc(var(--z-radius) + 4px); overflow: hidden; min-height: 380px; background: #0b1824; box-shadow: var(--z-shadow-lg); isolation: isolate; height: 100%; }
.z-map__art { position: absolute; inset: 0; z-index: -1; }
.z-map__art svg { width: 100%; height: 100%; display: block; }
.z-map__card { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.1rem; border-radius: 16px; background: rgba(8, 19, 30, .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; border: 1px solid var(--z-rule-dark); }
.z-map__card p { margin: 0; font-size: .95rem; }
.z-map__card strong { display: block; font-size: 1.05rem; }
.z-map__btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.z-map__btns button { font: inherit; font-weight: 700; cursor: pointer; border: 1.5px solid rgba(232, 241, 246, .5); background: transparent; color: #fff; padding: .6rem 1rem; border-radius: 999px; }
.z-map__btns button:hover { background: #fff; color: var(--z-night); }
.z-map__btns .z-btn { padding: .6rem 1rem; }
.z-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.z-pin { transform-box: fill-box; transform-origin: 50% 100%; animation: z-pin 2.6s var(--z-ease) infinite; }
@keyframes z-pin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* =====================================================================================================================
   FORMS (Ninja Forms, styled here; NF's own styles are off)
   ===================================================================================================================== */
.z-formcard { background: #fff; border-radius: calc(var(--z-radius) + 6px); border: 1px solid var(--z-rule); box-shadow: var(--z-shadow-lg); padding: clamp(1.3rem, 1rem + 1.6vw, 2.4rem) !important; position: relative; overflow: hidden; }
.z-formcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg, var(--z-cyan), var(--z-amber)); }
.nf-form-cont { --nf-gap: 1rem; }
.nf-form-cont *, .nf-form-cont *::before, .nf-form-cont *::after { box-sizing: border-box; }
.nf-form-title { display: none; }
.nf-form-fields-required { font-size: .85rem; color: var(--z-ink-soft); margin-bottom: 1rem; }
.nf-form-content { padding: 0 !important; max-width: none !important; }
.nf-form-content nf-fields-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.nf-form-content nf-field { grid-column: 1 / -1; }
.nf-form-content nf-field:has(.z-half) { grid-column: auto; }
@media (max-width: 600px) { .nf-form-content nf-field:has(.z-half) { grid-column: 1 / -1; } }
.nf-field-container { margin-bottom: 1.1rem !important; }
.nf-field-label { margin-bottom: .4rem !important; }
.nf-field-label label, .nf-field-label .nf-label-span { font-weight: 800 !important; font-size: .95rem !important; color: var(--z-ink); }
.nf-field-label .ninja-forms-req-symbol { color: #b4361b; }
.nf-form-content input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]), .nf-form-content textarea, .nf-form-content select, .nf-form-content .list-select-wrap > div select {
	width: 100% !important; max-width: 100%; font: inherit; font-size: 1rem; color: var(--z-ink); background: var(--z-frost) !important; border: 1.5px solid #c5d4de !important; border-radius: 12px !important; padding: .8rem .95rem !important; height: auto !important; transition: border-color .2s, box-shadow .2s, background .2s; }
.nf-form-content textarea { min-height: 140px; resize: vertical; }
.nf-form-content input:focus, .nf-form-content textarea:focus, .nf-form-content select:focus { outline: none; border-color: var(--z-cyan-ink) !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(57, 194, 227, .25); }
.nf-form-content .list-select-wrap .nf-field-element > div { border: 0 !important; background: none !important; }
.nf-form-content .list-select-wrap div::after { color: var(--z-ink) !important; }
.nf-field-description, .nf-form-content .nf-field-description p { font-size: .85rem; color: var(--z-ink-soft); margin-top: .35rem; }
.nf-form-content .list-radio-wrap ul, .nf-form-content .list-checkbox-wrap ul { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 !important; padding: 0 !important; list-style: none; }
.nf-form-content .list-radio-wrap li, .nf-form-content .list-checkbox-wrap li { margin: 0 !important; padding: 0 !important; position: relative; }
.nf-form-content .list-radio-wrap li input, .nf-form-content .list-checkbox-wrap li input { position: absolute; opacity: 0; inset: 0; margin: 0 !important; cursor: pointer; width: 100%; height: 100%; z-index: 1; }
.nf-form-content .list-radio-wrap li label, .nf-form-content .list-checkbox-wrap li label { margin: 0 !important; display: inline-flex !important; align-items: center; gap: .45rem; padding: .55rem .95rem !important; border-radius: 999px; border: 1.5px solid #c5d4de; background: var(--z-frost); font-weight: 600 !important; font-size: .92rem; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.nf-form-content .list-radio-wrap li label::before, .nf-form-content .list-radio-wrap li label::after, .nf-form-content .list-checkbox-wrap li label::before, .nf-form-content .list-checkbox-wrap li label::after { display: none !important; }
.nf-form-content .list-radio-wrap li input:checked + label, .nf-form-content .list-checkbox-wrap li input:checked + label { background: var(--z-night); color: #fff; border-color: var(--z-night); }
.nf-form-content .list-radio-wrap li input:focus-visible + label, .nf-form-content .list-checkbox-wrap li input:focus-visible + label { outline: 3px solid var(--z-amber); outline-offset: 2px; }
.nf-form-content .list-radio-wrap li input:hover + label { border-color: var(--z-cyan-ink); }
.nf-form-content input[type=submit], .nf-form-content input[type=button] { font: inherit !important; font-weight: 800 !important; font-size: 1.05rem !important; background: var(--z-amber) !important; color: var(--z-night) !important; border: 0 !important; border-radius: 999px !important; padding: 1rem 1.8rem !important; height: auto !important; cursor: pointer; box-shadow: 0 12px 24px -12px rgba(232, 146, 28, .9); transition: background .2s, transform .2s; width: auto !important; }
.nf-form-content input[type=submit]:hover { background: var(--z-amber-deep) !important; transform: translateY(-1px); }
.nf-form-content input[type=submit]:disabled { opacity: .6; }
.nf-error .ninja-forms-field { border-color: #b4361b !important; }
.nf-error-msg, .nf-error-required-error { color: #a1301a !important; font-size: .86rem; font-weight: 600; margin-top: .3rem; }
.nf-form-errors .nf-error-msg { margin-top: 0; }
.nf-pass .ninja-forms-field { border-color: #2e9e64 !important; }
.nf-form-content .nf-field-element input.pikaday__display { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6A88' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right .9rem center !important; background-size: 20px !important; }
.pika-single { font-family: inherit !important; border-radius: 14px; border: 1px solid var(--z-rule) !important; box-shadow: var(--z-shadow-lg) !important; overflow: hidden; }
.pika-button { border-radius: 8px !important; text-align: center !important; }
.is-selected .pika-button { background: var(--z-night) !important; box-shadow: none !important; }
.is-today .pika-button { color: var(--z-cyan-ink) !important; }
.pika-button:hover { background: var(--z-cyan) !important; color: var(--z-night) !important; }
.nf-response-msg { font-size: 1.05rem; }

/* happy sent screen */
.z-success { text-align: center; padding: clamp(1rem, .5rem + 2vw, 2rem) .5rem; outline: none; }
.z-success__badge { width: 120px; height: 120px; margin: 0 auto 1rem; position: relative; }
.z-success__badge svg { width: 100%; height: 100%; overflow: visible; }
.z-success__ring { fill: var(--z-night); stroke: var(--z-cyan); stroke-width: 5; stroke-dasharray: 330; stroke-dashoffset: 330; animation: z-ring .7s var(--z-ease) forwards; }
.z-success__tick { fill: none; stroke: var(--z-amber); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: z-tick .45s .55s var(--z-ease) forwards; }
.z-success__chip { fill: none; stroke: rgba(127, 224, 245, .7); stroke-width: 1.4; stroke-linecap: round; animation: z-heal-chip 1.2s 1s forwards; }
@keyframes z-ring { to { stroke-dashoffset: 0; } }
@keyframes z-tick { to { stroke-dashoffset: 0; } }
@keyframes z-heal-chip { to { opacity: 0; } }
.z-success__eyebrow { font-family: var(--z-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--z-cyan-ink); margin: 0; }
.z-success__title { font-family: var(--z-display); font-stretch: 118%; font-weight: 800; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); line-height: 1.05; margin: .5rem 0 .8rem; letter-spacing: -.02em; }
.z-success__title span { color: var(--z-cyan-ink); display: block; }
.z-success__lead { font-size: 1.1rem; max-width: 32rem; margin: 0 auto .6rem; color: var(--z-ink); }
.z-success__note { color: var(--z-ink-soft); max-width: 32rem; margin: 0 auto; }
.z-success__links { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.z-success__links .z-btn--ghost { color: var(--z-ink); }
.z-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }

/* side panels next to forms */
.z-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 1rem; }
.z-steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: .9rem; align-items: start; }
.z-steps li::before { content: counter(s); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--z-cyan); color: var(--z-night); font-family: var(--z-display); font-stretch: 125%; font-weight: 800; }
.z-steps strong { display: block; color: #fff; }
.z-steps span { color: var(--z-on-dark); font-size: .95rem; }

/* gallery (core gallery block) */
.z-gallery.wp-block-gallery { gap: 1rem !important; }
.z-gallery.wp-block-gallery .wp-block-image { border-radius: var(--z-radius); overflow: hidden; box-shadow: var(--z-shadow); }
.z-gallery.wp-block-gallery .wp-block-image img { transition: transform .8s var(--z-ease); }
.z-gallery.wp-block-gallery .wp-block-image:hover img { transform: scale(1.04); }
.z-gallery.wp-block-gallery figcaption { font-family: var(--z-mono); font-size: .72rem !important; letter-spacing: .08em; text-transform: uppercase; padding: 2.4rem .9rem .8rem !important; }

/* CTA band */
.z-cta { overflow: hidden; isolation: isolate; padding-bottom: calc(var(--wp--preset--spacing--60) + clamp(56px, 6.5vw, 120px)) !important; }
.z-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(assets/img/dusk-drive.svg) 70% 100% / cover no-repeat; opacity: .55; }
.z-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 19, 30, .92), rgba(8, 19, 30, .55) 60%, rgba(8, 19, 30, .2)); }
.z-cta h2 { max-width: 34rem; }
.z-cta__btns { justify-content: flex-end; }
@media (max-width: 781px) { .z-cta__btns { justify-content: flex-start; } }

/* =====================================================================================================================
   FOOTER: night drive
   ===================================================================================================================== */
.z-footer { position: relative; background: #050b14; color: var(--z-on-dark); padding-top: 0; overflow: hidden; isolation: isolate; margin-top: 0 !important; margin-block-start: 0 !important; }
.z-footer a { color: var(--z-on-dark); text-decoration: none; }
.z-footer a:hover { color: #fff; text-decoration: underline; }
.wp-site-blocks > footer.wp-block-template-part, .wp-site-blocks > main, .wp-site-blocks > .z-main { margin-block-start: 0 !important; }
.wp-site-blocks > footer.wp-block-template-part { position: relative; }
/* the ridge rises over the bottom of the last section (pages end with the dark CTA band, which leaves room for it) */
.z-footer__ridge { position: relative; z-index: 2; height: clamp(80px, 9vw, 150px); margin: calc(clamp(80px, 9vw, 150px) * -1) 0 -1px !important; line-height: 0; pointer-events: none; }
.z-footer__ridge svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.z-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem clamp(1.5rem, 3vw, 3rem); padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(2rem, 1.5rem + 2vw, 3rem); }
.z-footer h2 { font-family: var(--z-mono); font-size: .76rem !important; letter-spacing: .16em; text-transform: uppercase; color: var(--z-cyan); font-weight: 500; margin: 0 0 1rem; font-stretch: 100%; }
.z-footer p { margin: 0 0 .5rem; font-size: .96rem; }
.z-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: .96rem; }
.z-footer__brand img { width: 160px; height: auto; display: block; margin-bottom: 1rem; filter: drop-shadow(0 6px 24px rgba(57, 194, 227, .25)); }
.z-footer__brand p { color: var(--z-on-dark-soft); max-width: 22rem; }
.z-footer__tag { font-family: var(--z-display); font-stretch: 118%; font-weight: 800; font-size: 1.35rem !important; color: #fff; letter-spacing: -.01em; }
.z-footer__tag em { font-style: normal; color: var(--z-cyan); }
.z-social { display: flex !important; gap: .5rem !important; margin-top: 1rem !important; }
.z-social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(232, 241, 246, .08); border: 1px solid var(--z-rule-dark); }
.z-social a:hover { background: var(--z-cyan); }
.z-social a:hover svg { stroke: var(--z-night); }
.z-social svg { width: 19px; height: 19px; fill: none; stroke: var(--z-on-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.z-footer__hours li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--z-rule-dark); padding-bottom: .4rem; }
.z-footer__hours li.is-today { color: var(--z-cyan); font-weight: 700; }
.z-footer__base { border-top: 1px solid var(--z-rule-dark); padding-block: 1.2rem 1.6rem; display: flex; justify-content: space-between; gap: .6rem 2rem; flex-wrap: wrap; font-size: .86rem; color: var(--z-on-dark-soft); }
.z-footer__base p { margin: 0; font-size: .86rem; }
.z-footer .z-open { font-weight: 700; margin-top: .8rem !important; }
@media (max-width: 960px) { .z-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .z-footer__grid { grid-template-columns: 1fr; } }

/* 404 */
.z-404 { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; }
.z-404 h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); }
.z-404__crack { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .75; }
.z-404__crack svg { width: 100%; height: 100%; }
.z-404 > *:not(.z-404__crack) { position: relative; z-index: 1; }

/* =====================================================================================================================
   MOTION PREFERENCES
   ===================================================================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.z-road__dash { animation: none !important; }
	.z-hero h1 em { animation: none !important; background-position: 100% 0; }
	.js .z-reveal { opacity: 1; transform: none; }
	.z-odo__s { transition: none !important; }
}