/*
Theme Name:        Squeeg's Kustoms
Theme URI:         https://squeegskustoms.com
Author:            John Fournet
Author URI:        https://johnfournet.com
Description:       Custom block theme for Squeeg's Kustoms — Arizona's longest-running kustom shop and builder of the 2026 America's Most Beautiful Roadster. Pairs with the "Squeeg's Kustoms Core" plugin.
Version:           1.7.4
Requires at least: 6.6
Tested up to:      7.1
Requires PHP:      8.0
License:           Proprietary — built for Squeeg's Kustoms LLC
Text Domain:       squeegs-kustoms
*/

/* ==========================================================================
   Design rules (the audience is hot-rod people, many 55+, mostly on phones)
   - No text under 14px. Labels are 14px, buttons 15px, body 17px.
   - Every tappable thing is at least 44px tall.
   - Nothing important is hover-only. Hover adds emphasis, never information.
   - Captions sit on solid backgrounds, never over photos.
   - Photos are cropped with object-position so the car is always in frame.
   ========================================================================== */

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	--sk-ink: var(--wp--preset--color--ink);
	--sk-ink-2: var(--wp--preset--color--ink-2);
	--sk-ink-3: var(--wp--preset--color--ink-3);
	--sk-cream: var(--wp--preset--color--cream);
	--sk-muted: var(--wp--preset--color--cream-muted);
	--sk-red: var(--wp--preset--color--red);
	--sk-red-deep: var(--wp--preset--color--red-deep);
	--sk-gold: var(--wp--preset--color--gold);
	--sk-gold-soft: var(--wp--preset--color--gold-soft);
	--sk-line: var(--wp--custom--border);
	--sk-line-strong: var(--wp--custom--border-strong);
	--sk-display: var(--wp--preset--font-family--display);
	--sk-script: var(--wp--preset--font-family--script);
	--sk-header-h: calc(var(--wp--custom--header-height) + 3px); /* + the red stripe */
	--sk-ease: cubic-bezier(.2, .7, .2, 1);
	--sk-gutter: clamp(1rem, 4vw, 2rem);
	--sk-label: .875rem;    /* 14px — the floor for any label */
	--sk-tap: 44px;
	--sk-hero-inset: clamp(1.25rem, 3.4vw, 3.5rem); /* hero + header side inset on desktop (about 48px at 1440) */
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--sk-header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--sk-red); color: var(--sk-cream); }
img { height: auto; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1; }
*, *::before, *::after { box-sizing: border-box; }

/* Film grain over everything, like the preview. */
.sk-grain::after {
	content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:focus-visible { outline: 2px solid var(--sk-gold); outline-offset: 3px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

/* ==========================================================================
   Type helpers
   ========================================================================== */
.sk-kicker {
	font-family: var(--sk-script) !important; font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important;
	color: var(--sk-red); text-transform: none; letter-spacing: 0; line-height: 1.1 !important;
	transform: rotate(-2deg); transform-origin: left center; display: inline-block; margin: 0 0 .35rem !important;
}
.sk-kicker--gold { color: var(--sk-gold-soft); }
.has-text-align-center.sk-kicker, .sk-center .sk-kicker { transform-origin: center; }

.sk-eyebrow {
	font-size: var(--sk-label) !important; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; line-height: 1.4;
	color: var(--sk-gold);
}
.sk-eyebrow--muted { color: var(--sk-muted); }
.sk-display { font-family: var(--sk-display); text-transform: uppercase; line-height: .92; font-weight: 800; }
.sk-gold { color: var(--sk-gold); }
.sk-red { color: var(--sk-red); }
.sk-lead { font-size: var(--wp--preset--font-size--lg); color: var(--sk-muted); max-width: 40rem; line-height: 1.6; }
.sk-lead strong { color: var(--sk-cream); font-weight: 600; }
.sk-muted { color: var(--sk-muted); }
.sk-rule { width: 3.5rem; height: 2px; background: var(--sk-gold); border: 0; margin-block: 1rem 1.5rem !important; opacity: 1; }
.sk-center .sk-rule, .sk-rule.aligncenter { margin-inline: auto; }
.sk-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: var(--wp--preset--spacing--50) !important; }
.sk-section-head > :last-child { max-width: 30rem; }
.sk-section-head h2 { margin: 0; }
.sk-section-head .sk-muted { font-size: 1.0625rem; margin: 0; }

/* ==========================================================================
   Buttons — 48px tall, big enough to hit with a thumb
   ========================================================================== */
.wp-block-button__link, .sk-btn {
	transition: background-color .2s, color .2s, border-color .2s;
	border: 1px solid transparent; min-height: 48px; line-height: 1.2;
}
.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; }
.is-style-outline > .wp-block-button__link, .wp-block-button__link.is-style-outline, .sk-btn--outline {
	background: transparent !important; color: var(--sk-gold-soft) !important; border: 1px solid var(--sk-gold) !important;
}
.is-style-outline > .wp-block-button__link:hover, .sk-btn--outline:hover { background: var(--sk-gold) !important; color: var(--sk-ink) !important; }
.sk-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font-size: .9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
	padding: .95rem 1.5rem; cursor: pointer; font-family: inherit; text-align: center;
}
.sk-btn--primary { background: var(--sk-red); color: var(--sk-cream); }
.sk-btn--primary:hover { background: var(--sk-red-deep); color: var(--sk-cream); }
.sk-btn--block { width: 100%; }
.wp-block-buttons { gap: .75rem; }

/* ==========================================================================
   Header — a red stripe up top, gold pinstripe below, script logo, big nav
   ========================================================================== */
.sk-header {
	position: sticky; top: 0; z-index: 50;
	background: linear-gradient(180deg, #151413 0%, #0c0c0c 100%);
	border-top: 3px solid var(--sk-red);
	box-shadow: 0 1px 0 rgba(201, 162, 39, .45), 0 2px 0 rgba(201, 162, 39, .12);
	transition: box-shadow .25s;
}
.sk-header.is-scrolled { box-shadow: 0 1px 0 rgba(201, 162, 39, .45), 0 10px 28px rgba(0, 0, 0, .5); }
.admin-bar .sk-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .sk-header { top: 0; } }
.sk-header__inner { min-height: var(--wp--custom--header-height); flex-wrap: nowrap !important; }
@media (min-width: 1024px) {
	:root { --sk-header-h: calc(4.5rem + 3px); }
	.sk-header__inner { min-height: 4.5rem; }
}
.sk-header__right { align-items: center; }

/* Logo (the shop's own artwork, from the old site) */
.sk-logo { display: flex; align-items: center; gap: .55rem; text-decoration: none !important; color: var(--sk-cream) !important; white-space: nowrap; min-height: var(--sk-tap); }
.sk-logo__img { display: block; height: 62px; width: auto; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); transition: transform .25s var(--sk-ease); }
.sk-logo:hover .sk-logo__img { transform: scale(1.03); }
.sk-footer .sk-logo__img { height: 84px; }
.sk-logo__script {
	font-family: var(--sk-script); color: var(--sk-red); font-size: 2rem; line-height: 1; display: inline-block; transform: rotate(-4deg) translateY(.05em);
	text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 0 18px rgba(179, 32, 44, .35);
	transition: color .2s;
}
.sk-logo__word { font-family: var(--sk-display); font-weight: 800; font-size: 1.55rem; text-transform: uppercase; letter-spacing: .05em; line-height: 1; }
.sk-logo:hover .sk-logo__script { color: #d9313f; }

/* Nav */
.sk-header .wp-block-navigation { font-size: .9375rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sk-header .wp-block-navigation .wp-block-navigation__container { gap: 1.4rem; flex-wrap: nowrap; }
.sk-header .wp-block-navigation a {
	position: relative; text-decoration: none; color: var(--sk-cream); opacity: .88; padding: .7rem 0; white-space: nowrap;
	transition: opacity .2s, color .2s;
}
.sk-header .wp-block-navigation a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: .25rem; height: 2px; background: var(--sk-gold);
	transform: scaleX(0); transform-origin: left; transition: transform .25s var(--sk-ease);
}
.sk-header .wp-block-navigation a:hover,
.sk-header .wp-block-navigation .current-menu-item > a,
.sk-header .wp-block-navigation [aria-current="page"] { opacity: 1; color: var(--sk-gold-soft); }
.sk-header .wp-block-navigation a:hover::after,
.sk-header .wp-block-navigation .current-menu-item > a::after,
.sk-header .wp-block-navigation [aria-current="page"]::after { transform: scaleX(1); }

/* Phone number (wide screens) */
.sk-header__phone { display: none; align-items: center; gap: .5rem; text-decoration: none; color: var(--sk-cream); white-space: nowrap; min-height: var(--sk-tap); }
.sk-header__phone-icon { color: var(--sk-gold); flex: none; }
.sk-header__phone-num { font-family: var(--sk-display); font-weight: 800; font-size: 1.45rem; letter-spacing: .02em; line-height: 1; }
.sk-header__phone:hover .sk-header__phone-num { color: var(--sk-gold-soft); }
@media (min-width: 1320px) { .sk-header__phone { display: inline-flex; } }

/* Consult button */
.sk-header .wp-block-buttons .wp-block-button__link {
	padding: .75rem 1.2rem; font-size: .8125rem; letter-spacing: .08em; white-space: nowrap; min-height: 44px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 0 var(--sk-red-deep);
}
.sk-header .wp-block-buttons .wp-block-button__link:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 var(--sk-red-deep); transform: translateY(2px); }

/* Menu button (phones and narrow laptops): icon plus the word, so nobody has to guess. */
.sk-header .wp-block-navigation__responsive-container-open,
.sk-header .wp-block-navigation__responsive-container-close {
	min-width: var(--sk-tap); min-height: var(--sk-tap); align-items: center; gap: .35rem;
	color: var(--sk-cream); font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 0 .25rem;
}
.sk-header .wp-block-navigation__responsive-container-close { display: inline-flex; }
.sk-header .wp-block-navigation__responsive-container-open:not(.always-shown)::after { content: "Menu"; }
.sk-header .wp-block-navigation__responsive-container-close::after { content: "Close"; }
.sk-header .wp-block-navigation__responsive-container-open svg,
.sk-header .wp-block-navigation__responsive-container-close svg { fill: currentColor; width: 28px; height: 28px; }
.sk-header .wp-block-navigation__responsive-container-close { position: absolute; top: 1rem; right: var(--sk-gutter); font-size: 1rem; }
.sk-header .wp-block-navigation__responsive-container-close svg { width: 32px; height: 32px; }
/* "Book a Consult" lives in the menu only on phones/tablets (the header button covers desktop). */
.sk-header .wp-block-navigation-item.sk-nav-consult { display: none; }
.sk-header .is-menu-open .wp-block-navigation-item.sk-nav-consult { display: block; margin-top: 1rem; }
.sk-header .is-menu-open .wp-block-navigation-item.sk-nav-consult a {
	display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .8rem 1.6rem !important; background: var(--sk-red); color: var(--sk-cream) !important;
	font-family: var(--wp--preset--font-family--body); font-size: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.sk-header .is-menu-open .wp-block-navigation-item.sk-nav-consult a:hover { background: var(--sk-red-deep); }

/* Open menu overlay */
.sk-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--sk-ink) !important; color: var(--sk-cream) !important; padding: 5.5rem var(--sk-gutter) 2rem;
	background-image: linear-gradient(180deg, var(--sk-red) 0, var(--sk-red) 3px, transparent 3px) !important;
}
.sk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-family: var(--sk-display); font-size: 2.25rem; font-weight: 800; letter-spacing: .02em;
}
.sk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a { padding: .35rem 0; }
.sk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a::after { display: none; }
.sk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { gap: 1rem; align-items: flex-start !important; }
.sk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; }
/* backdrop-filter/transform would make the header a containing block for position:fixed — keep the overlay full-screen. */
.sk-header:has(.is-menu-open) { background: var(--sk-ink); }

/* Phones: the button becomes "Call" — the action this audience actually takes. */
.sk-header__call { display: none; }
@media (max-width: 640px) {
	.sk-header__cta { display: none !important; }
	.sk-header__call {
		display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 1rem; background: var(--sk-red); color: var(--sk-cream);
		text-decoration: none; font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 0 var(--sk-red-deep);
	}
	.sk-header__right { gap: .5rem !important; }
	.sk-logo__img { height: 46px; }
	.sk-header__call { padding: 0 .85rem; }
}
@media (min-width: 641px) and (max-width: 1099px) {
	.sk-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-flex; }
	.sk-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
/* The header can run a little wider than the page content. */
.sk-header .sk-header__inner { max-width: none !important; } /* full width, so the logo lines up with the hero text on wide screens */
@media (min-width: 1101px) { .sk-header > .has-global-padding { padding-inline: var(--sk-hero-inset) !important; } }
/* Laptops: the full menu, a touch tighter. */
@media (min-width: 1100px) and (max-width: 1399px) {
	.sk-header .wp-block-navigation { font-size: .875rem; letter-spacing: .05em; }
	.sk-header .wp-block-navigation .wp-block-navigation__container { gap: 1.1rem; }
	.sk-header__right { gap: 1.1rem !important; }
}

/* ==========================================================================
   Sections & dividers
   ========================================================================== */
.sk-section { padding-block: var(--wp--preset--spacing--70) !important; position: relative; }
.sk-section--tight { padding-block: var(--wp--preset--spacing--60) !important; }
.sk-section--raised { background: var(--sk-ink-2); }
.sk-section + .sk-section:not(.sk-wave) { border-top: 1px solid var(--sk-line); }

/* Scalloped top edge — a nod to Blue Ribbon's scallops. */
.sk-wave { border-top: 0 !important; }
.sk-wave::before {
	content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 12px; pointer-events: none;
	--wave: var(--sk-gold);
	background: radial-gradient(circle at 12px -6px, transparent 11px, var(--wave) 11.5px, var(--wave) 12.5px, transparent 13px) 0 0 / 24px 12px repeat-x;
	opacity: .45;
}
.sk-wave--red::before { --wave: var(--sk-red); }

/* ==========================================================================
   1. Hero — headline on the left, the lead build big, the other two beside it
   ========================================================================== */
.wp-block-squeegs-build-showcase { margin: 0 !important; }
.sk-showcase {
	background: var(--sk-ink) radial-gradient(75% 85% at 0% 0%, rgba(179,32,44,.16), transparent 62%);
	position: relative; width: 100%; padding: clamp(2rem, 4vw, 3rem) var(--sk-gutter) var(--wp--preset--spacing--60); /* full-bleed: the glow starts at the screen edge, the content lines up with the header */
	display: grid; gap: 2rem;
}
.sk-showcase__intro { display: grid; align-content: center; justify-items: start; }
.sk-showcase__intro .sk-kicker { margin-bottom: .5rem !important; }
.sk-showcase__title {
	font-family: var(--sk-display); font-weight: 800; text-transform: uppercase; line-height: .88; letter-spacing: .005em;
	font-size: clamp(3.25rem, 6.4vw, 6.5rem); margin: 0;
}
.sk-showcase__title .sk-gold { display: block; }
.sk-showcase__what { margin: 1rem 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--sk-cream); font-weight: 500; }
.sk-showcase__what > span { display: block; white-space: nowrap; }
.sk-showcase__what-sep { color: var(--sk-gold); }
.sk-showcase__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.sk-showcase__actions .sk-btn { padding-inline: 1.2rem; }

/* The three cars: lead spans two rows, the other two stack beside it. */
.sk-showcase__panels { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: .75rem; }
.sk-panel { display: flex; flex-direction: column; min-height: 0; color: var(--sk-cream); text-decoration: none; background: var(--sk-ink-2); border: 1px solid var(--sk-line); }
.sk-panel--lead { grid-row: 1 / 3; }
.sk-panel__media { position: relative; display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--sk-ink-3); }
.sk-panel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 55%); transition: transform .9s var(--sk-ease); }
.sk-panel__media::after { /* gold rule that draws in on hover */
	content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--sk-gold); transition: width .5s var(--sk-ease);
}
.sk-panel__body { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .9rem; }
.sk-panel__text { display: grid; gap: .2rem; min-width: 0; }
.sk-panel__eyebrow { font-size: var(--sk-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sk-gold-soft); line-height: 1.4; }
.sk-panel__title { font-family: var(--sk-display); font-weight: 800; text-transform: uppercase; line-height: .95; font-size: 1.35rem; text-wrap: balance; }
.sk-panel--lead .sk-panel__title { font-size: clamp(1.6rem, 1.8vw, 2rem); }
.sk-panel--lead .sk-panel__body { padding: .9rem 1.1rem; }
.sk-panel__cta { flex: none; display: inline-flex; align-items: center; gap: .35rem; font-size: var(--sk-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sk-gold); transition: color .3s, transform .3s; }
.sk-panel__arrow { font-size: 1.35rem; line-height: 1; }
@media (hover: hover) {
	.sk-panel:hover .sk-panel__img { transform: scale(1.05); }
	.sk-panel:hover .sk-panel__media::after { width: 100%; }
	.sk-panel:hover .sk-panel__title { color: var(--sk-gold-soft); }
	.sk-panel:hover .sk-panel__cta { transform: translateX(3px); }
	.sk-panel:hover { border-color: rgba(201,162,39,.5); }
}
.sk-panel:focus-visible { outline: 2px solid var(--sk-gold); outline-offset: 2px; }

/* Gentle load-in. */
@media (prefers-reduced-motion: no-preference) {
	.sk-panel { animation: sk-rise .8s var(--sk-ease) both; }
	.sk-panel:nth-child(2) { animation-delay: .1s; }
	.sk-panel:nth-child(3) { animation-delay: .2s; }
	@keyframes sk-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}
.editor-styles-wrapper .sk-panel { animation: none; }

/* Up to laptops: headline on top, cars below with fixed photo shapes. */
@media (max-width: 1100px) {
	.sk-showcase__what > span { display: inline; }
	.sk-showcase__what > span + span::before { content: "· "; color: var(--sk-gold); }
	.sk-panel__media { aspect-ratio: 4 / 3; flex: none; }
	.sk-panel:not(.sk-panel--lead) .sk-panel__media { aspect-ratio: 1 / 1; }
	.sk-panel--lead .sk-panel__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
}
/* Phones: the lead car full width, the other two side by side under it. */
@media (max-width: 640px) {
	.sk-showcase { padding-top: 2rem; padding-inline: .625rem; gap: 1.5rem; }
	.sk-showcase__title { font-size: clamp(3rem, 11vw, 4.75rem); }
	.sk-showcase__what > span { display: block; white-space: normal; }
	.sk-showcase__what > span + span::before { content: none; }
	.sk-showcase__actions { width: 100%; }
	.sk-showcase__actions .sk-btn { flex: 1 1 100%; }
	.sk-showcase__panels { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: .6rem; }
	.sk-panel--lead { grid-row: auto; grid-column: 1 / 3; }
	.sk-panel--lead .sk-panel__media { aspect-ratio: 4 / 3.4; flex: none; }
	.sk-panel__title { font-size: 1.15rem; }
	.sk-panel__body { padding: .6rem .7rem; }
	.sk-panel:not(.sk-panel--lead) .sk-panel__cta { display: none; }
	.sk-panel--lead .sk-panel__body { flex-wrap: wrap; padding: .8rem .9rem; }
}
@media (min-width: 641px) and (max-width: 1100px) {
	.sk-showcase__title { font-size: clamp(3.5rem, 8vw, 5rem); }
}

/* ---- Desktop "fold": one screen = headline + cars (~75%), the stats ribbon, then a bouncing chevron in the last ~5% ---- */
.sk-scroll-cue { display: none; }
@media (min-width: 901px) {
	.sk-fold {
		display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(2.5rem, 5svh); row-gap: .5rem;
		height: calc(100svh - var(--sk-header-h));
	}
	.sk-fold > * { margin-block: 0 !important; } /* the group's default block gap would push the chevron out of the fold */
	.sk-fold > .wp-block-squeegs-build-showcase { min-height: 0; display: flex; }
	.sk-showcase { flex: 1; min-height: 0; width: 100%; padding-top: clamp(1.5rem, 5vh, 3.25rem); padding-bottom: clamp(1.5rem, 5vh, 3.25rem); }
	.sk-fold .sk-stats > .wp-block-column { padding: clamp(.9rem, 1.6vh, 1.4rem) 1rem; }
	.sk-fold .sk-stats .sk-stat__label { max-width: none; margin-top: .4rem; }
	.sk-scroll-cue {
		display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
		color: var(--sk-gold); text-decoration: none; cursor: pointer;
	}
	.sk-scroll-cue svg { display: block; width: 30px; height: 30px; }
	.sk-scroll-cue:hover { color: var(--sk-cream); }
	@media (prefers-reduced-motion: no-preference) {
		.sk-scroll-cue svg { animation: sk-bounce 2.2s ease-in-out infinite; }
		@keyframes sk-bounce { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }
	}
}
/* Side by side from 1101px: text left, cars right, everything inside the first screen. */
@media (min-width: 1101px) {
	.sk-showcase { grid-template-columns: min(38%, 560px) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; padding-inline: var(--sk-hero-inset); }
	.sk-showcase__title { font-size: clamp(3.5rem, 5.6vw, 5.5rem); }
	.sk-showcase__what { font-size: 1.125rem; margin-top: 1.1rem; }
	/* Two buttons side by side, ending exactly where the headline ends. */
	.sk-showcase__actions { display: grid; grid-template-columns: auto minmax(0, 1fr); width: 100%; margin-top: 1.75rem; gap: .65rem; }
	.sk-showcase__actions .sk-btn { font-size: clamp(.875rem, 1.05vw, 1rem); padding: 1rem .9rem; white-space: nowrap; }
	.sk-btn--call svg { flex: none; }
	@media (max-width: 1300px) { .sk-showcase__actions .sk-btn { padding-inline: .7rem; letter-spacing: .08em; } }
	.sk-showcase__panels { height: 100%; max-height: 640px; min-height: 0; }
	.sk-showcase__intro { padding-block: .5rem; justify-self: center; max-width: 100%; } /* the text block sits centered between the screen edge and the photos */
}
/* Very short screens and narrow desktops: don't force the fold. */
@media (min-width: 901px) and (max-height: 700px), (min-width: 901px) and (max-width: 1100px) {
	.sk-fold { height: auto; }
	.sk-scroll-cue { display: none; }
	.sk-showcase__panels { max-height: 640px; }
}
@media (min-width: 901px) and (max-height: 700px) and (min-width: 1101px) {
	.sk-showcase__panels { height: 520px; }
}

/* ==========================================================================
   2. Stats band
   ========================================================================== */
.sk-stats { border-block: 1px solid var(--sk-line); background: var(--sk-ink-2); gap: 0 !important; margin: 0 !important; }
.sk-stats > .wp-block-column { text-align: center; padding: 1.25rem 1rem; border-left: 1px solid var(--sk-line); }
.sk-stats > .wp-block-column:first-child { border-left: 0; }
.sk-stats .sk-stat__num { font-family: var(--sk-display); font-weight: 800; font-size: clamp(2.25rem, 3.4vw, 2.75rem); line-height: 1; margin: 0; }
.sk-stat__plus { color: var(--sk-gold); font-size: .7em; vertical-align: .15em; }
.sk-stats .sk-stat__label { font-size: var(--sk-label); letter-spacing: .1em; text-transform: uppercase; color: var(--sk-muted); margin: .55rem auto 0; line-height: 1.4; max-width: 16rem; text-wrap: balance; }
@media (max-width: 781px) {
	.sk-stats { display: grid !important; grid-template-columns: 1fr 1fr; }
	.sk-stats > .wp-block-column { border-left: 0; border-top: 1px solid var(--sk-line); padding: 1.5rem .75rem; }
	.sk-stats > .wp-block-column:nth-child(-n+2) { border-top: 0; }
	.sk-stats > .wp-block-column:nth-child(even) { border-left: 1px solid var(--sk-line); }
}

/* ==========================================================================
   3. Blue Ribbon (AMBR) — framed photo + story + spec bar
   ========================================================================== */
.sk-frame { position: relative; padding: 6px; border: 1px solid rgba(201,162,39,.45); background: var(--sk-ink); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.sk-frame img { display: block; width: 100%; }
.sk-frame figcaption { margin: .75rem 0 0; text-align: center; font-size: var(--sk-label); letter-spacing: .1em; }
.sk-frame--tall img { aspect-ratio: 4 / 5; object-fit: cover; }

.sk-specbar { border: 1px solid var(--sk-line); gap: 0 !important; }
.sk-specbar > * { flex: 1; text-align: center; padding: .9rem .5rem; border-left: 1px solid var(--sk-line); margin: 0 !important; }
.sk-specbar > :first-child { border-left: 0; }
.sk-specbar .sk-spec__label { font-size: var(--sk-label); letter-spacing: .12em; text-transform: uppercase; color: var(--sk-muted); margin: 0; }
.sk-specbar .sk-spec__val { font-family: var(--sk-display); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; margin: .25rem 0 0; }

.sk-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border: 1px solid var(--sk-line); margin: 0; }
.sk-specs__item { padding: .9rem 1rem; border-left: 1px solid var(--sk-line); border-top: 1px solid var(--sk-line); margin: -1px 0 0 -1px; }
.sk-specs dt { font-size: var(--sk-label); letter-spacing: .12em; text-transform: uppercase; color: var(--sk-muted); }
.sk-specs dd { margin: .25rem 0 0; font-family: var(--sk-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; line-height: 1.1; }

/* Phone: photo first, then the story. */
@media (max-width: 781px) {
	.sk-ambr-cols { display: flex !important; flex-direction: column-reverse; gap: 1.75rem !important; }
	.sk-ambr-cols > .wp-block-column { flex-basis: auto !important; }
}

/* ==========================================================================
   4. Build cards (query loops)
   ========================================================================== */
.sk-build-grid .wp-block-post-template { gap: 1.25rem !important; }
.sk-build-card { position: relative; overflow: hidden; background: var(--sk-ink-3); height: 100%; border: 1px solid var(--sk-line); }
.sk-build-card .wp-block-post-featured-image { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sk-ink-3); }
.sk-build-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--sk-ease); }
@media (hover: hover) { .sk-build-card:hover .wp-block-post-featured-image img { transform: scale(1.04); } }
.sk-build-card__body { padding: 1.1rem 1.25rem 1.3rem !important; }
.sk-build-card .wp-block-post-title { font-size: 1.55rem; line-height: .95; margin: 0; text-wrap: balance; }
.sk-build-card .wp-block-post-title a { text-decoration: none; color: var(--sk-cream); }
.sk-build-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
@media (hover: hover) { .sk-build-card:hover .wp-block-post-title a { color: var(--sk-gold-soft); } }
.sk-build-card .wp-block-post-terms { font-size: var(--sk-label); letter-spacing: .1em; text-transform: uppercase; color: var(--sk-gold); margin-top: .6rem; }
.sk-build-card .wp-block-post-terms a { color: inherit; text-decoration: none; pointer-events: none; } /* the card is the link; no 12px targets */
.sk-build-card .wp-block-post-excerpt { font-size: .9375rem; color: var(--sk-muted); margin-top: .5rem; }
.sk-build-card .wp-block-post-excerpt__more-text { display: none; }

/* No photo yet → a short card with a small tag, not a big grey box. */
.sk-build-card:not(:has(img)) { background: var(--sk-ink-2); }
.sk-build-card:not(:has(img))::before {
	content: "Photos coming"; display: block; padding: .55rem 1.25rem 0; 
	font-size: var(--sk-label); text-transform: uppercase; letter-spacing: .1em; color: var(--sk-muted);
	background: repeating-linear-gradient(135deg, rgba(245,239,228,.035) 0 10px, transparent 10px 20px);
}
.sk-build-card:not(:has(img)) .sk-build-card__body { padding-top: .5rem !important; }
.sk-build-card:not(:has(img)) .wp-block-post-title { font-size: 1.3rem; }


@media (max-width: 781px) { .sk-home-builds .wp-block-post-template > li:nth-child(n+5) { display: none; } }
/* Desktop: never leave one card alone on a row — four cards go 2×2, a fifth is held back until there are six. */
@media (min-width: 782px) {
	.sk-home-builds .wp-block-post-template:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr) !important; }
	.sk-home-builds .wp-block-post-template:has(> li:nth-child(5):last-child) > li:nth-child(5) { display: none; }
}

/* Chips (archive filters) */
.sk-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.sk-chip {
	display: inline-flex; align-items: center; min-height: var(--sk-tap);
	font-size: var(--sk-label); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
	color: var(--sk-cream); border: 1px solid var(--sk-line-strong); padding: .5rem 1rem; transition: all .2s;
}
.sk-chip:hover { border-color: var(--sk-gold); color: var(--sk-gold-soft); }
.sk-chip.is-active { background: var(--sk-cream); color: var(--sk-ink); border-color: var(--sk-cream); }

/* Pagination */
.wp-block-query-pagination { margin-top: 3rem; font-size: .9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; gap: .6rem; align-items: center; flex-wrap: wrap; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers.current {
	display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: .6rem 1rem;
	border: 1px solid var(--sk-line-strong); text-decoration: none; color: var(--sk-cream);
}
.wp-block-query-pagination a:hover { border-color: var(--sk-gold); color: var(--sk-gold-soft); }
.wp-block-query-pagination .page-numbers.current { background: var(--sk-gold); border-color: var(--sk-gold); color: var(--sk-ink); }
.wp-block-query-pagination .wp-block-query-pagination-numbers { display: flex; gap: .6rem; }
.wp-block-query-pagination .wp-block-query-pagination-next, .wp-block-query-pagination .wp-block-query-pagination-previous { border-color: var(--sk-gold); color: var(--sk-gold-soft); }

/* ==========================================================================
   5. Awards
   ========================================================================== */
.sk-awards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; list-style: none; padding: 0 !important; margin: 0; }
.sk-awards li { background: var(--sk-ink); padding: 1.25rem 1.25rem 1.4rem; display: grid; gap: .3rem; align-content: start; margin: 0; outline: 1px solid var(--sk-line); outline-offset: -0.5px; }
.sk-awards__year { font-family: var(--sk-display); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--sk-gold); }
.sk-awards__name { font-family: var(--sk-display); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; line-height: 1.05; text-wrap: balance; }
.sk-awards__car { font-size: .9375rem; color: var(--sk-muted); line-height: 1.45; }
.sk-awards__car a { color: var(--sk-cream); text-decoration-color: var(--sk-gold); text-underline-offset: .2em; padding: .15rem 0; }
.sk-awards--shop li { background: linear-gradient(180deg, rgba(201,162,39,.08), transparent 70%), var(--sk-ink); }
@media (max-width: 1000px) { .sk-awards { grid-template-columns: repeat(2, 1fr); } }
/* Phone: a compact list — year on the left, award and car on the right. */
@media (max-width: 600px) {
	.sk-awards { grid-template-columns: 1fr; }
	.sk-awards li { grid-template-columns: 4.25rem 1fr; grid-template-rows: auto auto; column-gap: .9rem; row-gap: .15rem; padding: .9rem 1rem; align-items: start; }
	.sk-awards__year { grid-row: 1 / span 2; font-size: 1.5rem; padding-top: .1rem; }
	.sk-awards__name { font-size: 1.15rem; }
}

.wp-block-post-terms.sk-award-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.wp-block-post-terms.sk-award-badges a {
	display: inline-flex; align-items: center; min-height: 40px; font-size: var(--sk-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
	color: var(--sk-ink); background: var(--sk-gold); padding: .4rem .8rem;
}
.wp-block-post-terms.sk-award-badges .wp-block-post-terms__separator { display: none; }

/* ==========================================================================
   6. Paint & Coatings — color chart + product cards
   ========================================================================== */
.sk-swatches { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.sk-swatches__head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; font-size: var(--sk-label); letter-spacing: .1em; text-transform: uppercase; color: var(--sk-muted); margin-bottom: .9rem; }
.sk-swatches__head span:first-child { color: var(--sk-cream); font-weight: 600; }
.sk-swatches__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.sk-swatch { aspect-ratio: 1; min-height: var(--sk-tap); background: var(--sw); border: 1px solid rgba(245,239,228,.12); cursor: pointer; padding: 0; transition: transform .15s, box-shadow .15s; }
.sk-swatch:hover, .sk-swatch:focus-visible { transform: translateY(-2px); }
.sk-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--sk-ink), 0 0 0 4px var(--sk-cream); }
.sk-swatch--clear { background: repeating-linear-gradient(135deg, #2a2724 0 4px, #151311 4px 8px); }
.sk-swatches__note { font-size: .9375rem; color: var(--sk-muted); margin-top: 1rem; line-height: 1.5; }
.sk-swatches__panel { margin: 0; padding: 6px; border: 1px solid rgba(201,162,39,.35); position: sticky; top: calc(var(--sk-header-h) + 1rem); }
.sk-swatches__sprayout {
	aspect-ratio: 1; background: var(--sw); transition: background-color .35s;
	background-image: radial-gradient(120% 80% at 70% 10%, rgba(255,255,255,.16), transparent 55%), radial-gradient(90% 60% at 20% 100%, rgba(0,0,0,.3), transparent 60%);
}
.sk-swatches__panel.is-clear .sk-swatches__sprayout { background-color: #8a857a; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 6px, transparent 6px 12px); }
.sk-swatches__label { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; background: rgba(10,10,10,.85); padding: .8rem 1rem; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .1rem .75rem; }
.sk-swatches__meta { grid-column: 1 / -1; font-size: var(--sk-label); letter-spacing: .12em; text-transform: uppercase; color: var(--sk-muted); }
.sk-swatches__label strong { font-family: var(--sk-display); font-size: 1.6rem; text-transform: uppercase; line-height: 1; }
.sk-swatches__label [data-sk-code] { font-size: var(--sk-label); letter-spacing: .1em; color: var(--sk-muted); }
@media (max-width: 781px) {
	.sk-swatches { grid-template-columns: 1fr; }
	.sk-swatches__panel { order: -1; position: relative; top: auto; }
	.sk-swatches__sprayout { aspect-ratio: 16 / 9; }
	.sk-swatches__grid { grid-template-columns: repeat(5, 1fr); }
}

.sk-card { border: 1px solid var(--sk-line); padding: clamp(1.25rem, 3vw, 1.75rem) !important; background: var(--sk-ink); }
.sk-card h3 { font-size: 1.6rem; margin: .35rem 0 .5rem; }
.sk-card h3 a { color: var(--sk-cream); text-decoration: none; display: inline-block; padding: .2rem 0; }
.sk-card h3 a:hover { color: var(--sk-gold-soft); }
.sk-card h3 a::after { content: " →"; color: var(--sk-gold); }
.sk-card .sk-eyebrow { color: var(--sk-red); }
.sk-card p:last-child { margin-bottom: 0; }
.sk-card-row { gap: 1rem !important; }
@media (max-width: 781px) { .sk-card-row { display: grid !important; grid-template-columns: 1fr; } }

/* ==========================================================================
   7. Heritage timeline
   ========================================================================== */
.sk-timeline { gap: 1.5rem !important; overflow-x: clip; }
.sk-timeline > .wp-block-column { position: relative; padding-top: 1.75rem; display: flex; flex-direction: column; }
.sk-timeline > .wp-block-column::before { content: ""; position: absolute; top: .3rem; left: 0; right: -1.5rem; height: 1px; background: var(--sk-line-strong); }
.sk-timeline > .wp-block-column:last-child::before { right: 0; }
.sk-timeline > .wp-block-column::after { content: ""; position: absolute; top: 0; left: 0; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--sk-red); background: var(--sk-ink); }
.sk-timeline > .wp-block-column:last-child::after { border-color: var(--sk-gold); background: var(--sk-gold); }
.sk-timeline h3 { font-size: 2rem; margin: 0; }
.sk-timeline > .wp-block-column:last-child h3 { color: var(--sk-gold); }
.sk-timeline .sk-eyebrow { color: var(--sk-cream); margin: .35rem 0 .6rem; }
.sk-timeline p:not(.sk-eyebrow) { font-size: 1rem; line-height: 1.55; color: var(--sk-muted); margin: 0; }
.sk-timeline .wp-block-image { margin-top: auto; padding-top: 1.25rem; } /* photos line up along the bottom, whatever the text length */
.sk-timeline .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(.2); }
/* Five columns: a touch tighter than four. */
@media (min-width: 1101px) { .sk-timeline { gap: 1.25rem !important; } .sk-timeline > .wp-block-column::before { right: -1.25rem; } .sk-timeline > .wp-block-column:last-child::before { right: 0; } }
@media (min-width: 782px) and (max-width: 1100px) {
	.sk-timeline { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.25rem !important; }
	.sk-timeline > .wp-block-column::before { right: 0; }
}
@media (max-width: 781px) {
	.sk-timeline { display: grid !important; grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem !important; }
	.sk-timeline > .wp-block-column::before { right: 0; }
	.sk-timeline h3 { font-size: 1.75rem; }
}
@media (max-width: 520px) { .sk-timeline { grid-template-columns: 1fr; } }
.sk-timeline > .wp-block-column { min-width: 0; }
@media (min-width: 1101px) { .sk-timeline > .wp-block-column { flex: 1 1 0 !important; } }

/* ==========================================================================
   8. Parts & Apparel — category tiles and product cards
   ========================================================================== */
.sk-tile { position: relative; display: block; background: var(--sk-ink-2); border: 1px solid var(--sk-line); text-decoration: none; color: var(--sk-cream); }
.sk-tile__media { display: block; aspect-ratio: 1; overflow: hidden; }
.sk-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sk-ease); }
@media (hover: hover) { .sk-tile:hover img { transform: scale(1.04); } .sk-tile:hover .sk-tile__title { color: var(--sk-gold-soft); } }
.sk-tile__body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; min-height: 64px; }
.sk-tile__title { font-family: var(--sk-display); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; line-height: 1; transition: color .3s; }
.sk-tile__cta { font-size: var(--sk-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sk-gold); white-space: nowrap; }
.sk-tile-row { gap: 1.25rem !important; }
@media (max-width: 781px) { .sk-tile-row { display: grid !important; grid-template-columns: 1fr; } .sk-tile__media { aspect-ratio: 4 / 3; } }

.sk-product-card { position: relative; background: var(--sk-ink-2); border: 1px solid var(--sk-line); }
.sk-product-card .wp-block-post-featured-image { aspect-ratio: 1; margin: 0; background: var(--sk-ink-3); overflow: hidden; }
.sk-product-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sk-ease); }
@media (hover: hover) { .sk-product-card:hover img { transform: scale(1.04); } }
.sk-product-card:not(:has(img))::before { content: ""; display: block; aspect-ratio: 1; background: repeating-linear-gradient(135deg, rgba(245,239,228,.035) 0 10px, transparent 10px 20px), var(--sk-ink-3); }
.sk-product-card .wp-block-post-terms { font-size: var(--sk-label); letter-spacing: .1em; text-transform: uppercase; color: var(--sk-muted); padding: .9rem 1rem 0; }
.sk-product-card .wp-block-post-terms a { color: inherit; text-decoration: none; pointer-events: none; }
.sk-product-card .wp-block-post-title { font-size: 1.25rem; margin: .3rem 0 0; padding: 0 1rem 1rem; line-height: 1.05; }
.sk-product-card .wp-block-post-title a { color: var(--sk-cream); text-decoration: none; }
.sk-product-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }

.sk-order { border: 1px solid var(--sk-line); padding: 1.5rem; display: grid; gap: .85rem; background: var(--sk-ink-2); }
.sk-order p { margin: 0; }
.sk-order__price { font-family: var(--sk-display); font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--sk-gold); }
.sk-order__sku, .sk-order__hours, .sk-order__intl { font-size: .9375rem; color: var(--sk-muted); }
.sk-order__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.sk-order__p65 { font-size: .875rem; color: var(--sk-muted); border-top: 1px solid var(--sk-line); padding-top: .85rem !important; line-height: 1.5; }
.sk-order__p65 strong { color: var(--sk-gold-soft); }

.sk-callout { border: 1px solid rgba(201,162,39,.4); background: linear-gradient(90deg, rgba(201,162,39,.1), transparent); padding: 1.1rem 1.4rem !important; }
.sk-callout p { margin: 0; }

/* ==========================================================================
   9. Book a consult — contact details + form
   ========================================================================== */
.sk-contact-list { display: grid; gap: .8rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.sk-contact-list li { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; align-items: baseline; margin: 0; font-size: 1.0625rem; }
.sk-contact-list .sk-eyebrow { color: var(--sk-muted); }
.sk-contact-list a { color: var(--sk-cream); text-decoration: none; display: inline-block; padding: .2rem 0; }
.sk-contact-list a:hover { color: var(--sk-gold-soft); }
.sk-contact-list .sk-contact-list__phone a { font-family: var(--sk-display); font-size: 1.5rem; font-weight: 700; letter-spacing: .02em; }
/* Phones: a big call button before the form. Most of this audience would rather call. */
.sk-call-row { display: none; }
@media (max-width: 781px) {
	.sk-call-row { display: grid; gap: .6rem; margin: 1.5rem 0 .5rem; }
	.sk-call-row .sk-btn { width: 100%; font-size: .9375rem; padding: 1.1rem 1rem; }
	.sk-call-row__or { text-align: center; font-size: var(--sk-label); letter-spacing: .12em; text-transform: uppercase; color: var(--sk-muted); margin: .5rem 0 0; }
}

.sk-form { border: 1px solid var(--sk-line); padding: clamp(1.25rem, 3vw, 2rem); background: var(--sk-ink); display: grid; gap: 1.1rem; }
.sk-form__eyebrow { font-size: var(--sk-label); letter-spacing: .12em; text-transform: uppercase; color: var(--sk-muted); margin: 0; }
.sk-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .sk-form__grid { grid-template-columns: 1fr; } }
.sk-form__row { display: grid; gap: .45rem; }
.sk-form label { font-size: .9375rem; font-weight: 600; color: var(--sk-cream); }
.sk-form label span { font-weight: 400; color: var(--sk-muted); }
.sk-form input, .sk-form textarea, .sk-form select {
	width: 100%; background: #0f0e0d; color: var(--sk-cream); border: 1px solid var(--sk-line-strong); border-radius: 0;
	padding: .85rem 1rem; font: inherit; font-size: 1.0625rem; min-height: 50px; transition: border-color .2s;
}
.sk-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sk-muted) 50%), linear-gradient(135deg, var(--sk-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.sk-form input::placeholder, .sk-form textarea::placeholder { color: rgba(245,239,228,.4); }
.sk-form input:focus, .sk-form textarea:focus, .sk-form select:focus { outline: none; border-color: var(--sk-gold); box-shadow: 0 0 0 1px var(--sk-gold); }
.sk-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sk-form__notice { padding: 1rem 1.1rem; font-size: 1rem; border: 1px solid; line-height: 1.5; }
.sk-form__notice.is-success { border-color: rgba(201,162,39,.6); background: rgba(201,162,39,.1); }
.sk-form__notice.is-error { border-color: var(--sk-red); background: rgba(179,32,44,.12); }
.sk-form .sk-btn { font-size: .9375rem; padding: 1.1rem 1.5rem; }

.sk-map iframe { width: 100%; aspect-ratio: 16 / 10; border: 0; display: block; background: #e8e6e1; } /* normal light map: easier to read than an inverted one */

/* ==========================================================================
   Interior pages
   ========================================================================== */
/* Page heads: one compact row (title, then the lead beside it on desktop) so the real content starts in the first screen. */
.sk-page-head { padding-block: clamp(1.5rem, 3.5vh, 2.5rem) clamp(1.25rem, 3vh, 2rem) !important; border-bottom: 1px solid var(--sk-line); background: radial-gradient(80% 140% at 0% 0%, rgba(179,32,44,.14), transparent 60%), var(--sk-ink); }
.sk-page-head .sk-kicker { display: none; }
.sk-page-head h1 { margin: 0; font-size: clamp(2.5rem, 4.2vw, 3.75rem); }
.sk-page-head--build h1 { font-size: clamp(2.75rem, 5vw, 4.5rem); margin-top: .25rem; }
.sk-page-head--build .sk-lead { margin-top: .75rem; }
.sk-page-head .sk-lead { margin-top: .75rem; font-size: 1.125rem; max-width: 40rem; }
@media (min-width: 901px) {
	.sk-page-head:not(.sk-page-head--build) > .alignwide { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem clamp(2rem, 4vw, 4rem); align-items: end; }
	.sk-page-head:not(.sk-page-head--build) .sk-lead { margin: 0 0 .35rem; }
}
/* Contact: the page head already says it, so the consult section skips its own title and goes straight to the details + form. */
.page-contact #book .sk-kicker, .page-contact #book h2.has-title-lg-font-size, .page-contact #book .sk-lead { display: none; }
.page-contact #book { padding-top: clamp(1.5rem, 3vh, 2.5rem) !important; }
.page-contact #book::before { display: none; } /* no wave divider right under the page head */
/* On the Road: cards carry a one-line summary */
.sk-trip-grid .wp-block-post-excerpt { font-size: 1rem; color: var(--sk-muted); margin-top: .5rem; }
.sk-trip-grid .wp-block-post-excerpt__more-text { display: none; }
.sk-page-head--build .sk-eyebrow a { color: inherit; text-decoration: none; }
/* In the Shop: build cards with a line of status, then dated updates */
.sk-shop-grid .wp-block-post-excerpt { font-size: 1rem; color: var(--sk-muted); margin-top: .5rem; }
.sk-shop-grid .wp-block-post-excerpt__more-text { display: none; }
.sk-updates__list { display: grid; gap: 1rem; }
.sk-update { gap: 1.25rem !important; padding: 1.1rem; background: var(--sk-ink-2); border: 1px solid var(--sk-line); }
.sk-update__photo { flex: 0 0 220px; margin: 0; }
.sk-update__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.sk-update__body { min-width: 0; }
.sk-update__body h3 { font-size: 1.5rem; margin: .25rem 0 .5rem; }
.sk-update__body h3 a { text-decoration: none; color: var(--sk-cream); }
.sk-update__body h3 a:hover { color: var(--sk-gold-soft); }
.sk-update__body .wp-block-post-excerpt { font-size: 1rem; color: var(--sk-muted); }
.sk-update__body .wp-block-post-excerpt__more-link { color: var(--sk-gold-soft); font-weight: 600; }
@media (max-width: 640px) { .sk-update { flex-wrap: wrap !important; } .sk-update__photo { flex-basis: 100%; } }
.sk-updates:has(.wp-block-query-no-results) .sk-section-head .sk-muted { display: none; }
/* About: archive gallery + the shop today */
.sk-archive__gallery.has-nested-images { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 781px) { .sk-archive__gallery.has-nested-images { grid-template-columns: repeat(2, 1fr) !important; } }
.sk-archive__gallery.has-nested-images figure.wp-block-image img { aspect-ratio: 4 / 3; }
.sk-archive__gallery figure.wp-block-image img { filter: sepia(.08); }
.sk-shop-today .wp-block-columns { gap: clamp(1.5rem, 4vw, 4rem); }
.sk-shop-today .wp-block-buttons { margin-top: 1.25rem; }
/* About: the heritage section is the page opener. */
.sk-about-hero { padding-top: clamp(2rem, 4.5vh, 3.25rem) !important; }
.sk-about-hero .sk-lead { max-width: 44rem; margin: 1.25rem auto 0; }
.sk-about-hero .sk-timeline { margin-top: clamp(2rem, 4vh, 3rem) !important; }

.sk-prose { font-size: 1.0625rem; }
.sk-prose h2 { font-size: var(--wp--preset--font-size--title-sm); margin-top: 2.5rem; }
.sk-prose h3 { font-size: 1.4rem; margin-top: 2rem; }
.sk-prose a { color: var(--sk-gold-soft); }
.sk-prose .sk-lead { max-width: none; }
.wp-block-squeegs-build-specs { margin-top: 1.75rem; }
/* Build story extras: a pull quote in the owner's words, and a row of renderings/drawings. */
.sk-prose .wp-block-quote.sk-pull { margin: 2rem 0; padding: .25rem 0 .25rem 1.5rem; font-size: 1.35rem; }
.sk-prose .wp-block-quote.sk-pull p { margin: 0 0 .5rem; }
.sk-prose .wp-block-quote.sk-pull cite { display: block; font-style: normal; font-size: var(--sk-label); letter-spacing: .12em; text-transform: uppercase; color: var(--sk-gold-soft); }
.sk-prose .wp-block-columns.sk-renderings { gap: 1.25rem; margin-bottom: 2.5rem; }
.sk-prose .sk-renderings .wp-block-image { margin: 0; }
.sk-prose .sk-renderings .wp-block-image img { width: 100%; border: 1px solid var(--sk-line); background: #fff; cursor: zoom-in; }
.sk-prose .sk-renderings figcaption { margin: .6rem 0 0; text-align: left; font-size: .9375rem; line-height: 1.45; color: var(--sk-muted); text-transform: none; letter-spacing: 0; }
.sk-prose .wp-block-image.sk-story-photo { max-width: 32rem; margin: 2rem 0 2.5rem; }
.sk-prose .sk-story-photo img { width: 100%; border: 1px solid var(--sk-line); cursor: zoom-in; }
.sk-prose .sk-story-photo figcaption { margin: .6rem 0 0; text-align: left; font-size: .9375rem; line-height: 1.45; color: var(--sk-muted); text-transform: none; letter-spacing: 0; }

/* Build / product galleries: even grid, no ragged rows, big enough to see. Click opens the lightbox. */
.wp-block-gallery.has-nested-images { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .6rem !important; }
.wp-block-gallery.has-nested-images figure.wp-block-image img { cursor: zoom-in; }
/* Tell people the photos open bigger — nothing about a thumbnail grid says so. */
.single-sk_build .wp-block-post-content > .wp-block-gallery::before,
.single-sk_trip .wp-block-post-content > .wp-block-gallery::before {
	content: "Photos — tap or click any photo to see it full size"; grid-column: 1 / -1;
	font-size: var(--sk-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sk-gold-soft); padding-bottom: .2rem;
}
.wp-block-gallery.has-nested-images figure.wp-block-image img:hover { outline: 3px solid var(--sk-gold); outline-offset: -3px; }
.sk-build-intro { margin-top: 1rem; font-size: 1.125rem; color: var(--sk-cream); }
.sk-build-intro:empty { display: none; }
.sk-page-head .sk-build-intro { max-width: 46rem; }
/* Core lightbox: big, obvious X and arrows for this audience (WP 7.1 markup). */
.wp-lightbox-overlay .wp-lightbox-close-button,
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
	min-width: 64px !important; min-height: 64px !important; border-radius: 50%;
	background: rgba(10,10,10,.72) !important; color: #fff !important; border: 2px solid rgba(255,255,255,.55) !important;
}
.wp-lightbox-overlay .wp-lightbox-close-button:hover,
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev:hover,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next:hover { background: var(--sk-red) !important; border-color: var(--sk-red) !important; }
.wp-lightbox-overlay .wp-lightbox-close-button svg,
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev svg,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next svg { width: 34px !important; height: 34px !important; }
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev { left: 12px; }
.wp-lightbox-overlay .wp-lightbox-navigation-button-next { right: 12px; }
.wp-block-gallery.has-nested-images figure.wp-block-image { width: auto !important; margin: 0 !important; }
.wp-block-gallery.has-nested-images figure.wp-block-image img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.single-sk_build .wp-block-post-content > .wp-block-gallery,
.single-sk_trip .wp-block-post-content > .wp-block-gallery { max-width: var(--wp--style--global--wide-size) !important; }
@media (max-width: 600px) { .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, 1fr); } }

.wp-block-file { border: 1px solid var(--sk-line); padding: .9rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; background: var(--sk-ink-2); }
.wp-block-file a:not(.wp-block-file__button) { color: var(--sk-cream); text-decoration: none; font-weight: 600; padding: .4rem 0; }
.wp-block-file .wp-block-file__button { background: transparent; border: 1px solid var(--sk-gold); color: var(--sk-gold-soft); border-radius: 0; font-size: var(--sk-label); text-transform: uppercase; letter-spacing: .1em; padding: .6rem 1rem; min-height: 42px; white-space: nowrap; }

.sk-build-hero { margin: 0 !important; }
.sk-build-hero img { width: 100%; max-height: 78vh; object-fit: cover; }

/* Build + trip page head: title first, the cover photo beside it at its own shape (never stretched to the
   screen width — most shop photos are 1–2000px and go soft when blown up). Phone: title, photo, then details. */
.sk-build-head__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "media" "meta"; gap: 1.25rem; }
.sk-build-head__text { grid-area: text; }
.sk-build-head__media { grid-area: media; margin: 0 !important; justify-self: center; max-width: 100%; }
.sk-build-head__meta { grid-area: meta; display: grid; gap: 1.25rem; align-content: start; }
.sk-build-head__meta:empty { display: none; }
.sk-build-head__media img { display: block; width: auto !important; height: auto !important; max-width: 100%; max-height: 62vh; object-fit: contain; border: 1px solid rgba(201,162,39,.35); box-shadow: 0 30px 60px -30px rgba(0,0,0,.85); }
.sk-page-head--build.sk-build-head h1 { font-size: clamp(2.25rem, 3.4vw, 3.4rem); line-height: .98; text-wrap: balance; }
.sk-build-head .sk-build-intro { font-size: 1.0625rem; }
.sk-build-head .sk-specs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (min-width: 900px) {
	.sk-build-head__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "text media" "meta media"; grid-template-rows: auto 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); row-gap: 1.5rem; align-items: start; }
	.sk-build-head__media { justify-self: end; align-self: center; }
	.sk-build-head__media img { max-height: calc(100svh - var(--sk-header-h) - 5rem); }
	.sk-build-head__text { align-self: end; }
	/* no cover photo yet: one column */
	.sk-build-head__grid:not(:has(.sk-build-head__media)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "meta"; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.sk-footer { border-top: 1px solid var(--sk-line); background: var(--sk-ink); font-size: .9375rem; }
.sk-footer a { color: var(--sk-cream); text-decoration: none; opacity: .85; display: inline-block; padding: .25rem 0; }
.sk-footer a:hover { opacity: 1; color: var(--sk-gold-soft); }
.sk-footer h2 { font-family: var(--wp--preset--font-family--body); font-size: var(--sk-label) !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sk-muted); margin-bottom: .75rem; }
.sk-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.sk-footer__bottom { border-top: 1px solid var(--sk-line); font-size: .875rem; color: var(--sk-muted); }
.sk-footer__bottom a { opacity: .75; }
.sk-footer__bottom p { margin: 0; }
@media (max-width: 781px) { .sk-footer .wp-block-columns { gap: 1.75rem !important; } }

/* ==========================================================================
   Motion
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.js .sk-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--sk-ease), transform .7s var(--sk-ease); }
	.js .sk-reveal.is-visible { opacity: 1; transform: none; }
}
.editor-styles-wrapper .sk-reveal { opacity: 1 !important; transform: none !important; }

/* Coatings page: the products grid hides itself until coatings products are published (the card above already says "call to order"). */
.sk-coatings-products:has(.wp-block-query-no-results) { display: none; }