/**
 * SPRAY Sheffield — main theme stylesheet.
 *
 * Dark industrial base with a hot-pink wordmark accent. Pure system fonts.
 * Shares CSS custom property names with the SPRAY Site Core plugin so the
 * two stylesheets stay visually in sync whether or not the plugin is active.
 *
 * Contents:
 *   1.  Tokens (custom properties)
 *   2.  Reset & base
 *   3.  Typography helpers
 *   4.  Layout (container, sections, prose)
 *   5.  Buttons
 *   6.  Media wrapper & overlays
 *   7.  Header / topbar / nav
 *   8.  Mobile nav + sticky CTA
 *   9.  Hero
 *   10. Trust strip
 *   11. Section heads
 *   12. Why-us
 *   13. Service cards / grid
 *   14. Local area
 *   15. Quote section
 *   16. Gallery
 *   17. FAQ
 *   18. Service page
 *   19. Quote / contact pages
 *   20. Blog / archive / single
 *   21. Search & 404
 *   22. Footer
 *   23. Pagination, widgets, misc
 *   24. Accessibility & motion
 */

/* ============================================================ 1. TOKENS */
:root {
	--spray-pink: #ec168f;
	--spray-pink-hover: #c81179;
	--spray-pink-accent: #ff4fb0;
	--spray-ink: #111217;
	--spray-black: #050505;
	--spray-card: #16181d;
	--spray-grey-dark: #1b1d22;
	--spray-line: #2a2d34;
	--spray-muted: #a7adb8;
	--spray-muted-2: #6b7280;
	--spray-white: #ffffff;
	--spray-off-white: #f4f4f4;
	--spray-amber: #ffb000;
	--spray-radius: 14px;
	--spray-radius-sm: 9px;
	--spray-radius-lg: 22px;
	--spray-focus: #ff4fb0;
	--spray-maxw: 1200px;
	--spray-gap: clamp(1.25rem, 3vw, 2.25rem);
	--spray-section-y: clamp(3.25rem, 7vw, 6rem);
	--spray-shadow: 0 18px 50px -20px rgba(0, 0, 0, .65);
	--spray-glow: 0 0 0 1px rgba(236, 22, 143, .35), 0 22px 60px -28px rgba(236, 22, 143, .55);
	--spray-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--spray-font-display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================ 2. RESET & BASE */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font-family: var(--spray-font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--spray-off-white);
	background: var(--spray-black);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { border-style: none; }

a { color: var(--spray-pink-accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--spray-pink); }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.1; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }

button { font-family: inherit; }

::selection { background: var(--spray-pink); color: #fff; }

hr { border: 0; border-top: 1px solid var(--spray-line); margin: 2rem 0; }

/* ============================================================ 3. TYPOGRAPHY HELPERS */
.spray-h2,
.spray-section__title {
	font-family: var(--spray-font-display);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: #fff;
}
.spray-h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: .75rem; }

.spray-eyebrow,
.spray-section__eyebrow,
.spray-hero__eyebrow {
	display: inline-block;
	font-weight: 800;
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--spray-pink-accent);
	margin: 0 0 .65rem;
}

/* ============================================================ 4. LAYOUT */
.spray-container {
	width: 100%;
	max-width: var(--spray-maxw);
	margin-inline: auto;
	padding-inline: clamp(1.1rem, 4vw, 2.25rem);
}

.spray-main { display: block; }

.spray-section { padding-block: var(--spray-section-y); }
.spray-section + .spray-section { padding-top: 0; }

.spray-section__head { max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.spray-section__head--left { margin-left: 0; margin-right: 0; text-align: left; }
.spray-section__lede { color: var(--spray-muted); font-size: 1.075rem; margin: 0; }
.spray-section__foot { margin-top: clamp(1.75rem, 3vw, 2.5rem); text-align: center; }

.spray-prose { max-width: 760px; }
.spray-prose > :last-child { margin-bottom: 0; }
.spray-prose h2 { font-family: var(--spray-font-display); text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 1.9rem); color: #fff; margin-top: 2rem; }
.spray-prose h3 { font-size: 1.2rem; color: #fff; margin-top: 1.5rem; }
.spray-prose a { text-decoration: underline; text-underline-offset: 3px; }
.spray-prose ul { padding-left: 1.2rem; }
.spray-prose li { margin-bottom: .4rem; }
.spray-prose img { border-radius: var(--spray-radius); margin: 1.5rem 0; }
.spray-prose blockquote {
	margin: 1.5rem 0; padding: 1rem 1.25rem;
	border-left: 3px solid var(--spray-pink);
	background: var(--spray-card); border-radius: 0 var(--spray-radius-sm) var(--spray-radius-sm) 0;
	color: var(--spray-off-white);
}

/* ============================================================ 5. BUTTONS */
.spray-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font-weight: 800; font-size: .95rem; line-height: 1; letter-spacing: .01em;
	padding: .85rem 1.4rem; border: 2px solid transparent; border-radius: var(--spray-radius-sm);
	cursor: pointer; text-align: center; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
	white-space: nowrap;
}
.spray-btn svg { flex: none; }
.spray-btn:active { transform: translateY(1px); }

.spray-btn--primary { background: var(--spray-pink); color: #fff; border-color: var(--spray-pink); }
.spray-btn--primary:hover, .spray-btn--primary:focus { background: var(--spray-pink-hover); border-color: var(--spray-pink-hover); color: #fff; }

.spray-btn--secondary { background: transparent; color: #fff; border-color: var(--spray-line); }
.spray-btn--secondary:hover, .spray-btn--secondary:focus { background: var(--spray-grey-dark); border-color: var(--spray-grey-dark); color: #fff; }

.spray-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.spray-btn--ghost:hover, .spray-btn--ghost:focus { background: var(--spray-pink); border-color: var(--spray-pink); color: #fff; }

.spray-btn--sm { padding: .6rem 1rem; font-size: .85rem; }
.spray-btn--lg { padding: 1.02rem 1.7rem; font-size: 1.02rem; }
.spray-btn--block { width: 100%; }

.spray-btn:focus-visible { outline: 3px solid var(--spray-focus); outline-offset: 2px; }

/* ============================================================ 6. MEDIA WRAPPER & OVERLAYS */
.spray-media { position: relative; display: block; overflow: hidden; }
.spray-media img { width: 100%; height: 100%; object-fit: cover; }
.spray-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.spray-media.media-overlay-dark::after { background: linear-gradient(180deg, rgba(5,5,5,.35) 0%, rgba(5,5,5,.78) 100%); }
.spray-media.media-overlay-pink::after { background: linear-gradient(140deg, rgba(236,22,143,.30) 0%, rgba(5,5,5,.55) 75%); }
.spray-media.is-placeholder { background: var(--spray-grey-dark); }
.spray-media.is-placeholder img { object-fit: contain; opacity: .85; }

/* ============================================================ 7. HEADER / TOPBAR / NAV */
.spray-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--spray-pink); color: #fff; padding: .75rem 1rem; border-radius: 0 0 var(--spray-radius-sm) 0; font-weight: 700;
}
.spray-skip-link:focus { left: 0; color: #fff; }

.spray-site-header { position: sticky; top: 0; z-index: 100; background: rgba(5,5,5,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--spray-line); transition: box-shadow .2s ease, background .2s ease; }
.spray-site-header.is-scrolled { background: rgba(5,5,5,.98); box-shadow: 0 10px 30px -16px rgba(0,0,0,.8); }

.spray-topbar { background: var(--spray-black); border-bottom: 1px solid var(--spray-line); font-size: .82rem; }
.spray-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }
.spray-topbar__hours { display: inline-flex; align-items: center; gap: .45rem; margin: 0; color: var(--spray-muted); }
.spray-topbar__hours svg { color: var(--spray-pink-accent); }
.spray-topbar__right { display: inline-flex; align-items: center; gap: 1rem; }
.spray-topbar__social { display: inline-flex; align-items: center; gap: .65rem; }
.spray-topbar__social a { color: var(--spray-muted); display: inline-flex; }
.spray-topbar__social a:hover { color: var(--spray-pink-accent); }
.spray-topbar__phone { display: inline-flex; align-items: center; gap: .4rem; color: #fff; font-weight: 700; }
.spray-topbar__phone svg { color: var(--spray-pink-accent); }
.spray-topbar__phone:hover { color: var(--spray-pink-accent); }

.spray-navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }

/* Logo wordmark */
.spray-logo { display: inline-flex; align-items: center; }
.spray-logo__text {
	font-family: var(--spray-font-display); font-weight: 900; text-transform: uppercase;
	letter-spacing: -.02em; font-size: 1.55rem; line-height: 1;
	background: var(--spray-pink); color: #fff; padding: .34em .5em .3em; border-radius: 7px;
}
.spray-logo:hover .spray-logo__text { background: var(--spray-pink-hover); }
.spray-logo--footer .spray-logo__text { font-size: 1.4rem; }
/* Custom logo image, if used */
.custom-logo-link { display: inline-flex; }
.custom-logo { max-height: 46px; width: auto; }

.spray-primary-nav { display: flex; align-items: center; gap: 1.75rem; }
.spray-menu { display: flex; align-items: center; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.spray-menu a { color: var(--spray-off-white); font-weight: 600; font-size: .96rem; padding: .35rem 0; position: relative; }
.spray-menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--spray-pink); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.spray-menu a:hover { color: #fff; }
.spray-menu a:hover::after,
.spray-menu .current-menu-item > a::after { transform: scaleX(1); }
.spray-menu .current-menu-item > a { color: #fff; }
.spray-menu .sub-menu { display: none; }
.spray-primary-nav__cta { display: flex; align-items: center; gap: .6rem; }

/* Nav toggle (mobile) */
.spray-nav-toggle { display: none; background: transparent; border: 1px solid var(--spray-line); border-radius: var(--spray-radius-sm); width: 46px; height: 42px; align-items: center; justify-content: center; cursor: pointer; }
.spray-nav-toggle__bars { display: inline-block; width: 20px; height: 14px; position: relative; }
.spray-nav-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease, top .2s ease; }
.spray-nav-toggle__bars span:nth-child(1) { top: 0; }
.spray-nav-toggle__bars span:nth-child(2) { top: 6px; }
.spray-nav-toggle__bars span:nth-child(3) { top: 12px; }
.spray-nav-toggle[aria-expanded="true"] .spray-nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.spray-nav-toggle[aria-expanded="true"] .spray-nav-toggle__bars span:nth-child(2) { opacity: 0; }
.spray-nav-toggle[aria-expanded="true"] .spray-nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ============================================================ 8. MOBILE NAV + STICKY CTA */
@media (max-width: 900px) {
	.spray-nav-toggle { display: inline-flex; }
	.spray-primary-nav {
		position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px);
		flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
		background: var(--spray-ink); border-left: 1px solid var(--spray-line);
		padding: 5rem 1.5rem 2rem; transform: translateX(100%); transition: transform .25s ease;
		overflow-y: auto; z-index: 99;
	}
	.spray-primary-nav.is-open { transform: translateX(0); }
	.spray-menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.spray-menu li { border-bottom: 1px solid var(--spray-line); }
	.spray-menu a { display: block; padding: .9rem 0; font-size: 1.05rem; }
	.spray-menu a::after { display: none; }
	.spray-primary-nav__cta { flex-direction: column; align-items: stretch; gap: .65rem; margin-top: 1.5rem; width: 100%; }
	.spray-primary-nav__cta .spray-btn { width: 100%; }
	body.spray-nav-open { overflow: hidden; }
	.spray-nav-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 98; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
	.spray-nav-scrim.is-visible { opacity: 1; pointer-events: auto; }
}

/* Mobile sticky CTA bar */
.spray-mobile-cta { display: none; }
@media (max-width: 760px) {
	.spray-mobile-cta {
		display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
		background: rgba(5,5,5,.96); backdrop-filter: blur(8px);
		border-top: 1px solid var(--spray-line); padding: .4rem;
		padding-bottom: calc(.4rem + env(safe-area-inset-bottom, 0px)); gap: .35rem;
	}
	.spray-mobile-cta__btn {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
		padding: .5rem .25rem; border-radius: var(--spray-radius-sm); font-size: .72rem; font-weight: 700;
		color: #fff; text-align: center; line-height: 1.1;
	}
	.spray-mobile-cta__btn svg { color: var(--spray-pink-accent); }
	.spray-mobile-cta__quote { background: var(--spray-pink); }
	.spray-mobile-cta__quote svg { color: #fff; }
	.spray-mobile-cta__wa svg { color: #25d366; }
	/* Keep content clear of the bar */
	body { padding-bottom: 0; }
	.spray-site-footer { margin-bottom: 64px; }
}

/* ============================================================ 9. HERO */
.spray-hero { position: relative; isolation: isolate; min-height: clamp(440px, 72vh, 660px); display: flex; align-items: center; overflow: hidden; }
.spray-hero__media { position: absolute; inset: 0; z-index: -2; }
.spray-hero__media .spray-media,
.spray-hero__media img { width: 100%; height: 100%; }
.spray-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 12% 80%, rgba(236,22,143,.28), transparent 55%); }
.spray-hero__inner { width: 100%; padding-block: clamp(3rem, 8vw, 5rem); }
.spray-hero__content { max-width: 640px; }
.spray-hero__title {
	font-family: var(--spray-font-display); font-weight: 900; text-transform: uppercase;
	letter-spacing: -.02em; font-size: clamp(2.3rem, 6.5vw, 4rem); color: #fff; margin: 0 0 1rem;
	text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.spray-hero__sub { font-size: clamp(1.05rem, 2.2vw, 1.22rem); color: #e7e9ee; max-width: 36ch; margin: 0 0 1.75rem; }
.spray-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.75rem; }
.spray-hero__points { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.spray-hero__points li { position: relative; padding-left: 1.5rem; color: #d6d9e0; font-size: .92rem; font-weight: 600; }
.spray-hero__points li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--spray-pink); box-shadow: 0 0 0 4px rgba(236,22,143,.22); }
.spray-hero__drip { position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; z-index: 1; background:
	radial-gradient(10px 18px at 8% 0, var(--spray-black) 60%, transparent 62%),
	radial-gradient(12px 26px at 22% 0, var(--spray-black) 60%, transparent 62%),
	radial-gradient(9px 15px at 38% 0, var(--spray-black) 60%, transparent 62%),
	radial-gradient(14px 30px at 55% 0, var(--spray-black) 60%, transparent 62%),
	radial-gradient(10px 20px at 72% 0, var(--spray-black) 60%, transparent 62%),
	radial-gradient(12px 24px at 88% 0, var(--spray-black) 60%, transparent 62%),
	linear-gradient(var(--spray-black), var(--spray-black));
	background-repeat: no-repeat; background-size: 100% 8px; background-position: bottom; pointer-events: none;
}

/* ============================================================ 10. TRUST STRIP */
.spray-strip { background: var(--spray-ink); border-block: 1px solid var(--spray-line); }
.spray-strip__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--spray-line); }
.spray-strip__item { background: var(--spray-ink); display: flex; align-items: center; gap: .85rem; padding: 1.4rem clamp(1rem, 2vw, 1.5rem); }
.spray-strip__icon { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--spray-pink-accent); }
.spray-strip__icon svg { width: 32px; height: 32px; }
.spray-strip__label { font-weight: 700; font-size: .96rem; color: #fff; }
@media (max-width: 860px) { .spray-strip__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .spray-strip__inner { grid-template-columns: 1fr; } }

/* ============================================================ 12. WHY-US */
.spray-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spray-gap); }
.spray-why__card { background: var(--spray-card); border: 1px solid var(--spray-line); border-radius: var(--spray-radius); padding: clamp(1.5rem, 2.5vw, 2rem); position: relative; overflow: hidden; }
.spray-why__card::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--spray-pink); opacity: .7; }
.spray-why__num { font-family: var(--spray-font-display); font-weight: 900; font-size: 2rem; color: rgba(236,22,143,.35); display: block; margin-bottom: .35rem; }
.spray-why__h { font-size: 1.18rem; color: #fff; }
.spray-why__card p { color: var(--spray-muted); margin: 0; }
@media (max-width: 860px) { .spray-why__grid { grid-template-columns: 1fr; } }

/* ============================================================ 13. SERVICE CARDS / GRID */
.spray-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spray-gap); }
.spray-card-grid--lg { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1040px) { .spray-card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .spray-card-grid, .spray-card-grid--lg { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .spray-card-grid, .spray-card-grid--lg { grid-template-columns: 1fr; } }

.spray-card {
	display: flex; flex-direction: column; gap: .55rem; padding: 1.6rem 1.5rem 1.5rem;
	background: var(--spray-card); border: 1px solid var(--spray-line); border-radius: var(--spray-radius);
	color: var(--spray-off-white); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
	position: relative; overflow: hidden;
}
.spray-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 120%, rgba(236,22,143,.18), transparent 70%); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.spray-card:hover { transform: translateY(-4px); border-color: rgba(236,22,143,.55); box-shadow: var(--spray-glow); color: #fff; }
.spray-card:hover::after { opacity: 1; }
.spray-card__icon { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; color: var(--spray-pink-accent); background: rgba(236,22,143,.12); border-radius: 11px; margin-bottom: .35rem; }
.spray-card__icon svg { width: 26px; height: 26px; }
.spray-card__title { font-weight: 800; font-size: 1.12rem; color: #fff; }
.spray-card__text { color: var(--spray-muted); font-size: .92rem; flex: 1; }
.spray-card__more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; font-size: .85rem; color: var(--spray-pink-accent); margin-top: .35rem; }
.spray-card:hover .spray-card__more svg { transform: translateX(3px); }
.spray-card__more svg { transition: transform .18s ease; }

/* ============================================================ 14. LOCAL AREA */
.spray-local { background: var(--spray-ink); border-block: 1px solid var(--spray-line); }
.spray-local__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.spray-local__text p { color: var(--spray-muted); }
.spray-local__areas { display: flex; flex-wrap: wrap; gap: .5rem .9rem; list-style: none; margin: 1.25rem 0 0; padding: 0; }
.spray-local__areas li { display: inline-flex; align-items: center; gap: .4rem; background: var(--spray-grey-dark); border: 1px solid var(--spray-line); border-radius: 999px; padding: .35rem .85rem; font-size: .85rem; font-weight: 600; color: #e7e9ee; }
.spray-local__areas svg { color: var(--spray-pink-accent); }
.spray-local__media { border-radius: var(--spray-radius); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--spray-shadow); }
.spray-local__media .spray-media { height: 100%; }
@media (max-width: 860px) { .spray-local__inner { grid-template-columns: 1fr; } .spray-local__media { order: -1; } }

/* ============================================================ 15. QUOTE SECTION */
.spray-quote-section { background: linear-gradient(180deg, var(--spray-black), var(--spray-ink)); }
.spray-quote-section__inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.spray-quote-section__intro p { color: var(--spray-muted); }
.spray-quote-section__list { list-style: none; margin: 1.25rem 0 1.75rem; padding: 0; }
.spray-quote-section__list li { position: relative; padding-left: 1.7rem; margin-bottom: .6rem; color: #e7e9ee; }
.spray-quote-section__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--spray-pink); box-shadow: 0 0 0 4px rgba(236,22,143,.2); }
.spray-quote-section__form { background: var(--spray-card); border: 1px solid var(--spray-line); border-radius: var(--spray-radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--spray-shadow); }
@media (max-width: 860px) { .spray-quote-section__inner { grid-template-columns: 1fr; } }

/* ============================================================ 16. GALLERY */
.spray-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.85rem, 2vw, 1.25rem); }
@media (max-width: 820px) { .spray-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .spray-gallery-grid { grid-template-columns: 1fr; } }
.spray-gallery-grid__item { margin: 0; }
.spray-gallery-grid__link { position: relative; display: block; border-radius: var(--spray-radius); overflow: hidden; aspect-ratio: 1 / 1; background: var(--spray-grey-dark); border: 1px solid var(--spray-line); }
.spray-gallery-grid__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.spray-gallery-grid__img--empty { display: flex; align-items: center; justify-content: center; color: var(--spray-muted-2); }
.spray-gallery-grid__link:hover .spray-gallery-grid__img { transform: scale(1.05); }
.spray-gallery-grid__cap { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1.4rem .9rem .8rem; background: linear-gradient(transparent, rgba(5,5,5,.88)); }
.spray-gallery-grid__title { font-weight: 700; font-size: .92rem; color: #fff; }
.spray-gallery-grid__view { font-weight: 800; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--spray-pink-accent); opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
.spray-gallery-grid__link:hover .spray-gallery-grid__view { opacity: 1; transform: translateY(0); }
.spray-gallery-grid__placeholder, .spray-reviews__note { background: var(--spray-card); border: 1px dashed var(--spray-line); border-radius: var(--spray-radius); padding: 1.5rem; color: var(--spray-muted); text-align: center; }

.spray-gallery-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.spray-gallery-filter__btn { display: inline-flex; align-items: center; padding: .5rem 1rem; border-radius: 999px; background: var(--spray-grey-dark); border: 1px solid var(--spray-line); color: #e7e9ee; font-weight: 700; font-size: .85rem; cursor: pointer; }
.spray-gallery-filter__btn:hover { color: #fff; border-color: rgba(236,22,143,.5); }
.spray-gallery-filter__btn.is-active { background: var(--spray-pink); border-color: var(--spray-pink); color: #fff; }

/* ============================================================ 17. FAQ */
.spray-faq-section__inner { max-width: 820px; margin-inline: auto; }
.spray-faq { display: flex; flex-direction: column; gap: .75rem; }
.spray-faq__title { font-family: var(--spray-font-display); text-transform: uppercase; color: #fff; font-size: 1.3rem; margin-bottom: 1rem; }
.spray-faq__item { background: var(--spray-card); border: 1px solid var(--spray-line); border-radius: var(--spray-radius-sm); overflow: hidden; }
.spray-faq__q { margin: 0; }
.spray-faq__btn { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; background: transparent; border: 0; padding: 1.1rem 1.25rem; cursor: pointer; color: #fff; font-weight: 700; font-size: 1.02rem; font-family: inherit; }
.spray-faq__btn:hover { color: var(--spray-pink-accent); }
.spray-faq__chev { flex: none; color: var(--spray-pink-accent); transition: transform .2s ease; }
.spray-faq__btn[aria-expanded="true"] .spray-faq__chev { transform: rotate(180deg); }
.spray-faq__a { padding: 0 1.25rem 1.2rem; color: var(--spray-muted); }
.spray-faq__a p { margin: 0; }
.spray-faq__a[hidden] { display: none; }

/* ============================================================ 11. PAGE HERO (generic) */
.spray-page-hero { padding-block: clamp(2.5rem, 5vw, 3.75rem); background: linear-gradient(180deg, var(--spray-ink), var(--spray-black)); border-bottom: 1px solid var(--spray-line); }
.spray-page-hero__title { font-family: var(--spray-font-display); text-transform: uppercase; font-size: clamp(1.9rem, 5vw, 3rem); color: #fff; letter-spacing: -.01em; margin: .5rem 0 0; }
.spray-page-hero__title span { color: var(--spray-pink-accent); }
.spray-page-hero__desc { color: var(--spray-muted); max-width: 60ch; margin: .85rem 0 0; }
.spray-page-hero__meta { color: var(--spray-muted-2); margin-top: .5rem; }
.spray-page-hero__search { margin-top: 1.25rem; max-width: 420px; }

/* Breadcrumbs */
.spray-breadcrumbs { font-size: .82rem; color: var(--spray-muted-2); }
.spray-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.spray-breadcrumbs li { display: inline-flex; align-items: center; gap: .4rem; }
.spray-breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--spray-line); }
.spray-breadcrumbs a { color: var(--spray-muted); }
.spray-breadcrumbs a:hover { color: var(--spray-pink-accent); }
.spray-breadcrumbs [aria-current="page"] { color: #fff; }

/* ============================================================ 18. SERVICE PAGE */
.spray-service-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 7vw, 5rem); display: flex; align-items: center; min-height: 360px; }
.spray-service-hero__media { position: absolute; inset: 0; z-index: -1; }
.spray-service-hero__media .spray-media, .spray-service-hero__media img { width: 100%; height: 100%; }
.spray-service-hero__inner { width: 100%; }
.spray-service-hero__icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--spray-pink); border-radius: 13px; margin: 1rem 0 .85rem; box-shadow: var(--spray-glow); }
.spray-service-hero__icon svg { width: 30px; height: 30px; }
.spray-service-hero__title { font-family: var(--spray-font-display); text-transform: uppercase; font-size: clamp(2rem, 5.5vw, 3.25rem); color: #fff; margin: 0 0 .75rem; letter-spacing: -.01em; }
.spray-service-hero__lede { color: #e7e9ee; max-width: 56ch; font-size: 1.08rem; margin: 0 0 1.5rem; }
.spray-service-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

.spray-service-body__grid { display: grid; grid-template-columns: 1fr 340px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 920px) { .spray-service-body__grid { grid-template-columns: 1fr; } }

.spray-includes { margin-top: 2.25rem; }
.spray-includes__list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .65rem; }
.spray-includes__list li { display: flex; align-items: flex-start; gap: .65rem; color: #e7e9ee; }
.spray-includes__list svg { flex: none; color: var(--spray-pink-accent); margin-top: 2px; }
.spray-includes__note { color: var(--spray-muted); font-size: .92rem; margin-top: .75rem; }
.spray-whofor { margin-top: 2.25rem; }
.spray-whofor p { color: var(--spray-muted); }
.spray-service-faq { margin-top: 2.5rem; }

/* Sticky aside CTA card */
.spray-service-body__aside { position: sticky; top: 96px; }
@media (max-width: 920px) { .spray-service-body__aside { position: static; } }
.spray-service-cta-card { background: var(--spray-card); border: 1px solid var(--spray-line); border-radius: var(--spray-radius-lg); padding: 1.5rem; box-shadow: var(--spray-shadow); }
.spray-service-cta-card__title { font-size: 1.2rem; color: #fff; }
.spray-service-cta-card p { color: var(--spray-muted); font-size: .95rem; }
.spray-service-cta-card .spray-btn { margin-top: .6rem; }
.spray-service-cta-card__hours { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--spray-line); font-size: .85rem; color: var(--spray-muted); }

.spray-related { background: var(--spray-ink); border-top: 1px solid var(--spray-line); }

/* ============================================================ 19. QUOTE / CONTACT PAGES */
.spray-quote-page__grid, .spray-contact-page__grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 920px) { .spray-quote-page__grid, .spray-contact-page__grid { grid-template-columns: 1fr; } }
.spray-quote-page__intro { margin-bottom: 1.5rem; }
.spray-info-card { background: var(--spray-card); border: 1px solid var(--spray-line); border-radius: var(--spray-radius); padding: 1.4rem 1.5rem; margin-bottom: 1.25rem; }
.spray-info-card__title { font-size: 1.1rem; color: #fff; }
.spray-info-card p { color: var(--spray-muted); font-size: .95rem; }
.spray-info-card .spray-btn { margin-top: .5rem; }
.spray-info-card--tip { background: rgba(236,22,143,.06); border-color: rgba(236,22,143,.3); }
.spray-tip-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.spray-tip-list li { position: relative; padding-left: 1.4rem; margin-bottom: .45rem; color: #e7e9ee; font-size: .92rem; }
.spray-tip-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--spray-pink); }
.spray-contact-page__aside, .spray-contact-page__form .spray-h2 { margin-top: 0; }
.spray-contact-page__form .spray-h2 { margin-bottom: 1rem; }

/* ============================================================ 20. BLOG / ARCHIVE / SINGLE */
.spray-post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spray-gap); }
@media (max-width: 920px) { .spray-post-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .spray-post-list { grid-template-columns: 1fr; } }
.spray-post-card { background: var(--spray-card); border: 1px solid var(--spray-line); border-radius: var(--spray-radius); overflow: hidden; display: flex; flex-direction: column; }
.spray-post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.spray-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.spray-post-card__media:hover img { transform: scale(1.04); }
.spray-post-card__body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.spray-post-card__title { font-size: 1.15rem; }
.spray-post-card__title a { color: #fff; }
.spray-post-card__title a:hover { color: var(--spray-pink-accent); }
.spray-post-card__excerpt { color: var(--spray-muted); font-size: .92rem; flex: 1; }
.spray-post-card__excerpt p { margin: 0; }
.spray-post-card__more { font-weight: 800; font-size: .85rem; color: var(--spray-pink-accent); }
.spray-post-meta { color: var(--spray-muted-2); font-size: .82rem; }

.spray-single__media { margin-top: -1px; }
.spray-single__media img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--spray-radius); margin-top: 2rem; }
.spray-single__tags { margin-top: 1.5rem; font-size: .85rem; color: var(--spray-muted); }
.spray-single__nav { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--spray-line); margin-top: 2rem; }
.spray-single__nav a { font-weight: 700; }

/* ============================================================ 21. SEARCH & 404 */
.spray-searchform { display: flex; gap: .5rem; }
.spray-searchform__input { flex: 1; background: var(--spray-card); border: 1px solid var(--spray-line); border-radius: var(--spray-radius-sm); color: #fff; padding: .7rem .9rem; font-size: .95rem; }
.spray-searchform__input::placeholder { color: var(--spray-muted-2); }
.spray-searchform__input:focus { outline: none; border-color: var(--spray-pink); box-shadow: 0 0 0 3px rgba(236,22,143,.2); }
.spray-searchform__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; background: var(--spray-pink); border: 0; border-radius: var(--spray-radius-sm); color: #fff; cursor: pointer; }
.spray-searchform__btn:hover { background: var(--spray-pink-hover); }
.spray-search-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

.spray-404 { text-align: center; }
.spray-404__inner { max-width: 640px; margin-inline: auto; }
.spray-404__code { font-family: var(--spray-font-display); font-weight: 900; font-size: clamp(4rem, 16vw, 8rem); line-height: 1; color: var(--spray-pink); margin: 0; text-shadow: 0 0 60px rgba(236,22,143,.4); }
.spray-404__title { font-family: var(--spray-font-display); text-transform: uppercase; color: #fff; font-size: clamp(1.4rem, 4vw, 2rem); }
.spray-404__text { color: var(--spray-muted); }
.spray-404__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 1.5rem 0; }
.spray-404__search { max-width: 420px; margin: 0 auto 2.5rem; }
.spray-404__links { text-align: left; background: var(--spray-card); border: 1px solid var(--spray-line); border-radius: var(--spray-radius); padding: 1.5rem; }
.spray-404__sub { font-size: 1rem; color: #fff; text-transform: uppercase; letter-spacing: .05em; }
.spray-404__links ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.spray-404__links a { font-weight: 600; }
@media (max-width: 520px) { .spray-404__links ul { grid-template-columns: 1fr; } }

/* ============================================================ 22. FOOTER */
.spray-site-footer { background: var(--spray-black); border-top: 1px solid var(--spray-line); }
.spray-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); padding-block: clamp(3rem, 6vw, 4.5rem); }
@media (max-width: 860px) { .spray-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .spray-footer__grid { grid-template-columns: 1fr; } }
.spray-footer__logo { margin-bottom: 1rem; }
.spray-footer__about { color: var(--spray-muted); font-size: .92rem; max-width: 40ch; }
.spray-footer__social { display: flex; gap: .65rem; margin-top: 1.25rem; }
.spray-footer__social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--spray-line); border-radius: 9px; color: var(--spray-muted); }
.spray-footer__social a:hover { color: #fff; border-color: var(--spray-pink); background: var(--spray-pink); }
.spray-footer__heading { font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: #fff; font-weight: 800; margin: 0 0 1rem; }
.spray-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.spray-footer__links a { color: var(--spray-muted); font-size: .92rem; }
.spray-footer__links a:hover { color: var(--spray-pink-accent); }
.spray-footer__contact { font-style: normal; }
.spray-footer__addr { color: var(--spray-muted); font-size: .92rem; }
.spray-footer__phone { display: inline-flex; align-items: center; gap: .45rem; color: #fff; font-weight: 700; }
.spray-footer__phone svg { color: var(--spray-pink-accent); }
.spray-footer__hours { margin-top: 1.5rem; }
.spray-footer__hours p { color: var(--spray-muted); font-size: .9rem; margin: 0; }
.spray-footer__widgets { padding-bottom: 2rem; }

.spray-footer__bar { border-top: 1px solid var(--spray-line); }
.spray-footer__bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; }
.spray-footer__legal { color: var(--spray-muted-2); font-size: .82rem; margin: 0; }
.spray-footer__legal-name { color: var(--spray-muted); }
.spray-footer__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.spray-footer__menu { list-style: none; display: inline-flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; }
.spray-footer__menu a { color: var(--spray-muted); font-size: .82rem; }
.spray-footer__menu a:hover { color: var(--spray-pink-accent); }
.spray-credit { font-size: .8rem; color: var(--spray-muted-2); }
.spray-credit a { color: var(--spray-muted); }
.spray-credit a:hover { color: var(--spray-pink-accent); }

/* ============================================================ 23. PAGINATION, WIDGETS, MISC */
.pagination { margin-top: clamp(2rem, 4vw, 3rem); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 .6rem; border-radius: var(--spray-radius-sm); background: var(--spray-card); border: 1px solid var(--spray-line); color: #fff; font-weight: 700; }
.pagination .page-numbers:hover { border-color: var(--spray-pink); color: var(--spray-pink-accent); }
.pagination .page-numbers.current { background: var(--spray-pink); border-color: var(--spray-pink); color: #fff; }
.pagination .page-numbers.dots { background: transparent; border-color: transparent; }

.widget { margin-bottom: 1.5rem; }
.widget-title { font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; color: #fff; }
.widget a { color: var(--spray-muted); }
.widget a:hover { color: var(--spray-pink-accent); }

.spray-page-links { margin: 1.5rem 0; font-weight: 700; }
.spray-page-links a { display: inline-block; padding: .25rem .6rem; margin: 0 .25rem; background: var(--spray-card); border: 1px solid var(--spray-line); border-radius: 6px; }

.spray-quote-fallback { background: var(--spray-card); border: 1px solid var(--spray-line); border-radius: var(--spray-radius); padding: 1.5rem; }
.spray-quote-fallback__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.spray-quote-fallback__note { font-size: .82rem; color: var(--spray-muted-2); margin: 0; }

/* ============================================================ 24. ACCESSIBILITY & MOTION */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; padding: .75rem 1rem; background: var(--spray-pink); color: #fff; border-radius: var(--spray-radius-sm); z-index: 1000; clip: auto; }

:focus-visible { outline: 3px solid var(--spray-focus); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.spray-card:hover { transform: none; }
}

/* JS-state helpers */
.spray-js [data-spray-faq-pending] { } /* reserved */

/* Print */
@media print {
	.spray-site-header, .spray-mobile-cta, .spray-cta, .spray-site-footer, .spray-hero__drip { display: none !important; }
	body { background: #fff; color: #000; }
	a { color: #000; text-decoration: underline; }
}