/* =========================================================================
Purple Pup Plumbing — Theme CSS
Tokens and component styles map 1:1 to design_spec.md §3, §4, §5, §6, §10.
========================================================================= */
:root {
/* Color — light surfaces */
--pup-white: #FFFFFF;
--pup-mist: #F5F1FA;
--pup-sky: #E5F4FB;
--pup-cloud: #C6EAF6;
/* Color — dark surfaces */
--pup-purple: #5B2A8C;
--pup-purple-deep: #3B1E66;
--pup-navy: #1F1147;
--pup-ink: #0F0A1E;
/* Color — brand & accents */
--pup-violet: #6E3FA6;
--pup-lavender: #B17DD6;
--pup-cyan: #2EC4E8;
--pup-cyan-accessible: #0B7395;
--pup-blush: #E9B7D4;
/* Color — feedback */
--pup-danger: #D7263D;
--pup-success: #15703E;
--pup-warning: #8A5500;
/* Type */
--font-display: "Moderniz", Impact, "Arial Narrow Bold", "Helvetica Inserat", sans-serif;
--font-heading: "Poppins", "Fredoka", "Quicksand", "Segoe UI", system-ui, sans-serif;
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--fs-h1: clamp(2rem, 5vw, 3.815rem);
--fs-h2: clamp(1.75rem, 4vw, 3.052rem);
--fs-h3: 1.953rem;
--fs-h4: 1.563rem;
--fs-h5: 1.25rem;
--fs-body-lg: 1.125rem;
--fs-body: 1rem;
--fs-small: 0.889rem;
--fs-micro: 0.778rem;
--lh-tight: 1.15;
--lh-snug: 1.25;
--lh-body: 1.6;
/* Space (8pt) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
/* Layout */
--container-max: 1200px;
--container-wide: 1440px;
--gutter-mobile: 24px;
--gutter-desktop: 48px;
--section-y: clamp(48px, 8vw, 96px);
/* Radii */
--r-sm: 8px;
--r-md: 16px;
--r-lg: 24px;
--r-pill: 999px;
/* Shadows */
--shadow-card: 0 4px 16px rgba(31, 17, 71, 0.12);
--shadow-lift: 0 12px 32px rgba(31, 17, 71, 0.18);
--shadow-focus: 0 0 0 3px var(--pup-cyan-accessible), 0 0 0 5px var(--pup-white);
/* Motion */
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--dur-micro: 150ms;
--dur-ui: 250ms;
--dur-reveal: 600ms;
}
html { font-size: 18px; }
/* JS-driven inertia scroll lives in main.js; keep native smoothing off so
the two don't compound. Reduced-motion users get scroll-behavior:auto
from animations.css and the JS module bails entirely. */
html { scroll-behavior: auto; }
html, body { overscroll-behavior-y: none; }
/* Clip any single oversized stage element (page-hero sunburst rays,
mascot peek SVG, etc.) so it can bleed visually past the viewport
without widening the document and triggering horizontal page scroll
on mobile. `clip` is preferred over `hidden` because it does NOT
establish a scroll container, so `position: sticky` still works on
descendants like .pup-header. */
html, body {
overflow-x: clip;
max-width: 100%;
}
/* Belt-and-braces: the .pup-container itself is hard-capped to viewport
width on mobile, so even if a deeply-nested grid child has an
unbreakable min-content larger than the viewport, the container
never grows past the screen and the page can never scroll
horizontally. */
.pup-container { max-width: min(var(--container-max), 100vw); }
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--pup-navy);
background: var(--pup-white);
margin: 0;
}
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5 { margin: 0 0 var(--space-4); }
h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: 0.02em; color: var(--pup-navy); }
h2 { font-family: var(--font-heading); font-size: var(--fs-h2); line-height: var(--lh-tight); color: var(--pup-purple-deep); font-weight: 800; }
h3 { font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--pup-purple-deep); font-weight: 800; }
h4 { font-family: var(--font-heading); font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--pup-purple-deep); font-weight: 700; }
h5 { font-family: var(--font-heading); font-size: var(--fs-h5); font-weight: 700; }
p { margin: 0 0 var(--space-4); max-width: 65ch; }
a { color: var(--pup-cyan-accessible); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--pup-violet); }
.pup-btn:hover,
.pup-btn:focus-visible { color: inherit; }
img, svg { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--pup-cyan-accessible); outline-offset: 2px; border-radius: var(--r-sm); }
/* Skip-link */
.pup-skip-link {
position: absolute;
left: -9999px;
top: auto;
background: var(--pup-navy);
color: var(--pup-white);
padding: 8px 16px;
text-decoration: none;
z-index: 9999;
}
.pup-skip-link:focus-visible { left: 16px; top: 16px; }
/* =========================================================================
Layout primitives
========================================================================= */
.pup-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter-mobile); }
@media (min-width: 768px) { .pup-container { padding-inline: var(--gutter-desktop); } }
/* Reset WP post-content + template-part wrappers so the hero (or any
block) sits flush against the top of the viewport, with the
transparent header floating over it. */
.wp-site-blocks > * { margin-block: 0; }
.wp-block-post-content,
.entry-content { margin-block: 0; padding-block: 0; }
.wp-block-post-content > *:first-child,
.entry-content > *:first-child { margin-top: 0; }
header.wp-block-template-part { display: block; }
header.wp-block-template-part::before,
header.wp-block-template-part::after { content: none; }
.pup-section { padding-block: var(--section-y); position: relative; }
.pup-section--tight { padding-block: clamp(32px, 5vw, 64px); }
.pup-section--dark { background: var(--pup-purple-deep); color: var(--pup-white); }
.pup-section--dark h2, .pup-section--dark h3, .pup-section--dark h4, .pup-section--dark h5 { color: var(--pup-white); }
.pup-section--mist { background: var(--pup-mist); }
.pup-section--sky { background: var(--pup-sky); }
.pup-section-title { font-family: var(--font-heading); font-size: var(--fs-h2); text-align: center; margin-bottom: var(--space-3); }
.pup-section-subtitle { text-align: center; font-size: var(--fs-body-lg); color: var(--pup-navy); opacity: 0.85; max-width: 60ch; margin: 0 auto var(--space-7); }
.pup-section--dark .pup-section-subtitle { color: var(--pup-cloud); opacity: 0.95; }
.pup-eyebrow {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: var(--fs-small);
color: var(--pup-cyan-accessible);
margin-bottom: var(--space-3);
display: inline-flex;
gap: var(--space-3);
}
.pup-section--dark .pup-eyebrow { color: var(--pup-cyan); }
.pup-eyebrow .pup-dot-item + .pup-dot-item::before {
content: "";
display: inline-block;
width: 4px; height: 4px;
border-radius: 50%;
background: currentColor;
margin: 0 var(--space-3) 2px 0;
vertical-align: middle;
}
/* =========================================================================
Buttons
========================================================================= */
/* Branded "sticker" CTA pill.
Built to echo the wordmark lockup's three-layer construction:
1. Thick navy outer stroke (border)
2. White inner halo (inset white box-shadow)
3. Glossy vertical bevel fill (linear-gradient: lighter top → deeper bottom)
Plus a hard navy offset shadow underneath for the "stuck-on" sticker depth.
Filled variants (primary, secondary, dark, danger) all carry the full
sticker treatment; outline + ghost stay quiet. */
.pup-btn {
--pup-btn-stroke: var(--pup-navy);
--pup-btn-halo: var(--pup-white);
--pup-btn-halo-width: 2px;
--pup-btn-shadow-offset: 5px;
--pup-btn-shadow-color: var(--pup-navy);
--pup-btn-fill: var(--pup-purple);
--pup-btn-fill-top: color-mix(in srgb, var(--pup-btn-fill) 82%, white);
--pup-btn-fill-bottom: color-mix(in srgb, var(--pup-btn-fill) 88%, black);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 50px;
padding: 12px 28px;
border-radius: var(--r-pill);
font-family: var(--font-display);
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.04em;
text-decoration: none;
transition:
transform var(--dur-micro) var(--ease-out),
box-shadow var(--dur-micro) var(--ease-out),
filter var(--dur-micro) var(--ease-out);
border: 3px solid transparent;
cursor: pointer;
line-height: 1;
font-weight: 400;
white-space: nowrap;
position: relative;
}
.pup-btn svg {
flex: 0 0 auto;
transition: transform var(--dur-micro) var(--ease-out);
}
/* Filled variants — share the full three-layer sticker signature. */
.pup-btn--primary,
.pup-btn--secondary,
.pup-btn--dark,
.pup-btn--danger {
border-color: var(--pup-btn-stroke);
background: linear-gradient(
180deg,
var(--pup-btn-fill-top) 0%,
var(--pup-btn-fill) 55%,
var(--pup-btn-fill-bottom) 100%
);
box-shadow:
inset 0 0 0 var(--pup-btn-halo-width) var(--pup-btn-halo),
inset 0 2px 0 0 rgba(255, 255, 255, 0.18),
0 var(--pup-btn-shadow-offset) 0 0 var(--pup-btn-shadow-color);
}
.pup-btn--primary:hover,
.pup-btn--secondary:hover,
.pup-btn--dark:hover,
.pup-btn--danger:hover {
transform: translateY(-2px);
filter: brightness(1.04);
box-shadow:
inset 0 0 0 var(--pup-btn-halo-width) var(--pup-btn-halo),
inset 0 2px 0 0 rgba(255, 255, 255, 0.22),
0 calc(var(--pup-btn-shadow-offset) + 2px) 0 0 var(--pup-btn-shadow-color);
}
.pup-btn--primary:hover,
.pup-btn--primary:focus-visible { color: #fff; }
.pup-btn--primary:active,
.pup-btn--secondary:active,
.pup-btn--dark:active,
.pup-btn--danger:active {
transform: translateY(3px);
filter: brightness(0.97);
box-shadow:
inset 0 0 0 var(--pup-btn-halo-width) var(--pup-btn-halo),
inset 0 2px 0 0 rgba(255, 255, 255, 0.12),
0 0 0 0 var(--pup-btn-shadow-color);
}
.pup-btn--primary:hover svg,
.pup-btn--secondary:hover svg,
.pup-btn--dark:hover svg,
.pup-btn--danger:hover svg { transform: translateX(2px); }
.pup-btn--lg {
min-height: 60px;
padding: 16px 36px;
font-size: 1.125rem;
--pup-btn-shadow-offset: 6px;
--pup-btn-halo-width: 2px;
}
.pup-btn--primary { color: var(--pup-white); --pup-btn-fill: var(--pup-purple); }
.pup-btn--secondary { color: var(--pup-navy); --pup-btn-fill: var(--pup-cyan); }
.pup-btn--dark { color: var(--pup-white); --pup-btn-fill: var(--pup-navy); --pup-btn-shadow-color: var(--pup-purple-deep); }
.pup-btn--danger { color: var(--pup-white); --pup-btn-fill: var(--pup-danger); }
/* Quiet variants — no halo, no bevel, no shadow. */
.pup-btn--outline {
background: transparent;
color: var(--pup-violet);
border-color: var(--pup-purple);
box-shadow: none;
}
.pup-btn--outline:hover { background: var(--pup-mist); color: var(--pup-purple-deep); transform: none; box-shadow: none; }
.pup-section--dark .pup-btn--outline { color: var(--pup-white); border-color: var(--pup-white); }
.pup-section--dark .pup-btn--outline:hover { background: rgba(255,255,255,0.08); }
.pup-btn--ghost {
background: transparent;
color: var(--pup-cyan-accessible);
border-color: transparent;
box-shadow: none;
}
.pup-btn--ghost:hover { color: var(--pup-violet); transform: none; box-shadow: none; }
.pup-btn[disabled], .pup-btn[aria-disabled="true"] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
transform: none;
filter: none;
}
@media (prefers-reduced-motion: reduce) {
.pup-btn,
.pup-btn:hover,
.pup-btn:active { transform: none; filter: none; }
.pup-btn svg,
.pup-btn:hover svg { transform: none; }
}
/* === Mobile sticker-button proportions =====================================
The XL/LG sizes were tuned for desktop and overflow narrow phones once
you add a long label like "CALL (910) 555-0182" or "TALK TO A REAL
PLUMBER". Below 720px we pull the size down a notch, allow long labels
to wrap, tighten the call ring, and force the in-section CTAs to fill
their column so they're bounded by layout instead of the viewport. */
@media (max-width: 720px) {
.pup-btn {
letter-spacing: 0.02em;
}
.pup-btn--xl {
font-size: 1.0625rem;
padding: 14px 22px;
min-height: 56px;
gap: var(--space-2);
--pup-btn-shadow-offset: 5px;
--pup-btn-halo-width: 2px;
white-space: normal;
}
.pup-btn--lg {
min-height: 52px;
padding: 13px 22px;
font-size: 1rem;
--pup-btn-shadow-offset: 5px;
white-space: normal;
}
/* Trim the cyan "ringing" outer mass so the call sticker still
reads as a phone-action chip but no longer crowds the viewport. */
.pup-btn--primary.pup-btn--call,
.pup-btn--secondary.pup-btn--call,
.pup-btn--dark.pup-btn--call {
box-shadow:
inset 0 0 0 var(--pup-btn-halo-width) var(--pup-btn-halo),
inset 0 2px 0 0 rgba(255, 255, 255, 0.20),
0 0 0 2px rgba(46, 196, 232, 0.55),
0 0 18px rgba(46, 196, 232, 0.35),
0 var(--pup-btn-shadow-offset) 0 0 var(--pup-btn-shadow-color);
}
@keyframes pup-btn-call-ring {
0%, 100% {
box-shadow:
inset 0 0 0 var(--pup-btn-halo-width) var(--pup-btn-halo),
inset 0 2px 0 0 rgba(255, 255, 255, 0.20),
0 0 0 2px rgba(46, 196, 232, 0.55),
0 0 18px rgba(46, 196, 232, 0.35),
0 var(--pup-btn-shadow-offset) 0 0 var(--pup-btn-shadow-color);
}
50% {
box-shadow:
inset 0 0 0 var(--pup-btn-halo-width) var(--pup-btn-halo),
inset 0 2px 0 0 rgba(255, 255, 255, 0.24),
0 0 0 4px rgba(46, 196, 232, 0.30),
0 0 26px rgba(46, 196, 232, 0.5),
0 var(--pup-btn-shadow-offset) 0 0 var(--pup-btn-shadow-color);
}
}
/* Hero / final-cta / service-areas CTAs become full-column on mobile
so the sticker mass is bounded by layout, not the viewport edge. */
.pup-hero__cta { margin-bottom: var(--space-4); }
.pup-hero__cta .pup-btn,
.pup-final-cta__ctas .pup-btn,
.pup-service-areas__cta {
display: flex;
width: 100%;
max-width: 360px;
margin-inline: auto;
}
.pup-final-cta__ctas {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 360px;
margin-inline: auto;
}
.pup-service-areas__cta { align-self: center; }
}
@media (max-width: 420px) {
.pup-btn--xl {
font-size: 1rem;
padding: 13px 18px;
min-height: 54px;
letter-spacing: 0.01em;
}
.pup-btn--xl svg { width: 18px; height: 18px; }
}
/* =========================================================================
Header (pup/header)
Mobile-first, on-brand. Transparent over hero; translucent navy when
sticky. Phone CTA stays visible at every viewport (primary action),
hamburger reveals a slide-down brand drawer on smaller screens.
========================================================================= */
.pup-header {
position: absolute;
inset: 0 0 auto 0;
z-index: 100;
background: transparent;
transition: background var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), padding var(--dur-ui) var(--ease-out);
}
/* Premium hairline stroke - subtle gradient line that fades in from
transparent at the edges to lavender/cyan in the center. Always
visible (low opacity over hero), brightens when sticky. */
.pup-header::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
pointer-events: none;
background: linear-gradient(
90deg,
transparent 0%,
rgba(177, 125, 214, 0.55) 18%,
rgba(46, 196, 232, 0.85) 50%,
rgba(177, 125, 214, 0.55) 82%,
transparent 100%
);
opacity: 0.5;
transition: opacity var(--dur-ui) var(--ease-out), height var(--dur-ui) var(--ease-out);
}
.pup-header.is-sticky::after {
opacity: 1;
height: 2px;
box-shadow: 0 1px 12px rgba(46, 196, 232, 0.35);
}
.pup-header.is-sticky {
position: fixed;
background: rgba(31, 17, 71, 0.92);
backdrop-filter: saturate(160%) blur(6px);
-webkit-backdrop-filter: saturate(160%) blur(6px);
box-shadow: 0 2px 20px rgba(31,17,71,0.18);
}
/* When the mobile drawer is open and we haven't started scrolling, give
the header an opaque navy backdrop so the menu doesn't sit on top of
raw hero artwork. */
.pup-header.is-menu-open:not(.is-sticky) {
background: rgba(31, 17, 71, 0.95);
backdrop-filter: saturate(160%) blur(6px);
-webkit-backdrop-filter: saturate(160%) blur(6px);
}
.pup-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding-block: var(--space-3);
min-height: 64px;
}
@media (min-width: 768px) {
.pup-header__inner { gap: var(--space-5); padding-block: var(--space-4); }
}
.pup-header.is-sticky .pup-header__inner { padding-block: var(--space-2); }
.pup-header__logo {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
min-width: 0;
}
.pup-header__logo img {
max-height: 44px;
width: auto;
transition: max-height var(--dur-ui) var(--ease-out);
}
@media (min-width: 768px) {
.pup-header__logo img { max-height: 56px; }
}
.pup-header.is-sticky .pup-header__logo img { max-height: 40px; }
@media (min-width: 768px) {
.pup-header.is-sticky .pup-header__logo img { max-height: 44px; }
}
.pup-header__brand-text {
font-family: var(--font-display);
color: var(--pup-white);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 1.1rem;
}
.pup-header__nav {
display: none;
gap: var(--space-5);
flex: 1 1 auto;
justify-content: center;
}
@media (min-width: 1024px) {
.pup-header__nav { display: flex; align-items: center; }
}
.pup-header__nav a {
color: var(--pup-white);
text-decoration: none;
font-weight: 600;
white-space: nowrap;
padding: var(--space-2) var(--space-1);
position: relative;
transition: color var(--dur-micro) var(--ease-out);
}
.pup-header__nav a::after {
content: "";
position: absolute;
left: var(--space-1);
right: var(--space-1);
bottom: 2px;
height: 2px;
background: var(--pup-cyan);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--dur-ui) var(--ease-out);
}
.pup-header__nav a:hover,
.pup-header__nav a:focus-visible { color: var(--pup-cyan); }
.pup-header__nav a:hover::after,
.pup-header__nav a:focus-visible::after,
.pup-header__nav a[aria-current="page"]::after { transform: scaleX(1); }
/* Right-side action cluster: phone CTA + hamburger. Order matters on
small screens so the phone sits to the LEFT of the hamburger. */
.pup-header__actions {
display: inline-flex;
align-items: center;
gap: var(--space-2);
flex: 0 0 auto;
}
@media (min-width: 768px) {
.pup-header__actions { gap: var(--space-3); }
}
/* Header phone CTA — same three-layer sticker construction as
`.pup-btn--secondary`: navy outer stroke, white inner halo,
glossy cyan bevel fill, hard navy offset shadow. Cyan + navy text
verified 8.28:1 (AAA). Two-line stack ("Tap to call" eyebrow above
the number) so it reads as an action, not a floating string of digits. */
.pup-header__phone {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: 6px 18px 6px 12px;
min-height: 54px;
border-radius: var(--r-pill);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--pup-cyan) 82%, white) 0%,
var(--pup-cyan) 55%,
color-mix(in srgb, var(--pup-cyan) 88%, black) 100%
);
border: 3px solid var(--pup-navy);
box-shadow:
inset 0 0 0 2px var(--pup-white),
inset 0 2px 0 0 rgba(255, 255, 255, 0.35),
0 5px 0 0 var(--pup-navy);
color: var(--pup-navy);
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.04em;
text-decoration: none;
white-space: nowrap;
transition:
transform var(--dur-micro) var(--ease-out),
box-shadow var(--dur-micro) var(--ease-out),
filter var(--dur-micro) var(--ease-out);
}
.pup-header__phone:hover,
.pup-header__phone:focus-visible {
color: var(--pup-navy);
transform: translateY(-2px);
filter: brightness(1.05);
box-shadow:
inset 0 0 0 2px var(--pup-white),
inset 0 2px 0 0 rgba(255, 255, 255, 0.4),
0 7px 0 0 var(--pup-navy);
}
.pup-header__phone:active {
transform: translateY(3px);
filter: brightness(0.97);
box-shadow:
inset 0 0 0 2px var(--pup-white),
inset 0 2px 0 0 rgba(255, 255, 255, 0.25),
0 0 0 0 var(--pup-navy);
}
.pup-header__phone-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--pup-white);
border: 2px solid var(--pup-navy);
color: var(--pup-navy);
flex: 0 0 auto;
box-shadow: inset 0 2px 0 0 rgba(46, 196, 232, 0.18);
}
.pup-header__phone-text {
display: none;
flex-direction: column;
align-items: flex-start;
gap: 2px;
line-height: 1;
text-align: left;
}
.pup-header__phone-eyebrow {
font-size: 0.65rem;
letter-spacing: 0.12em;
opacity: 0.78;
}
.pup-header__phone-number {
font-size: 1rem;
letter-spacing: 0.03em;
}
@media (min-width: 480px) {
.pup-header__phone-text { display: inline-flex; }
}
/* Hide the header phone CTA below the desktop-nav breakpoint. The
hamburger menu owns the right-side action cluster on tablet/mobile,
and the sticky mobile call bar handles the tap-to-call need without
eating header real estate. */
@media (max-width: 1023px) {
.pup-header__phone { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.pup-header__phone,
.pup-header__phone:hover,
.pup-header__phone:active { transform: none; }
}
.pup-header__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--r-sm);
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
color: var(--pup-white);
cursor: pointer;
padding: 0;
transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.pup-header__toggle:hover,
.pup-header__toggle:focus-visible {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.5);
}
@media (min-width: 1024px) { .pup-header__toggle { display: none; } }
.pup-header__toggle-icon { display: inline-flex; }
.pup-header__toggle-icon--close { display: none; }
.pup-header__toggle[aria-expanded="true"] .pup-header__toggle-icon--open { display: none; }
.pup-header__toggle[aria-expanded="true"] .pup-header__toggle-icon--close { display: inline-flex; }
/* Mobile drawer — slides down from the header, brand-styled. */
.pup-header__mobile {
position: absolute;
inset: 100% 0 auto 0;
background: var(--pup-navy);
padding: var(--space-5) var(--gutter-mobile) var(--space-6);
border-top: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 16px 32px rgba(15, 10, 30, 0.35);
transform: translateY(-8px);
opacity: 0;
transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out);
}
.pup-header__mobile[hidden] { display: none; }
.pup-header__mobile.is-open {
transform: translateY(0);
opacity: 1;
}
.pup-header__mobile-nav { display: flex; flex-direction: column; }
.pup-header__mobile-nav a {
display: block;
color: var(--pup-white);
text-decoration: none;
padding: var(--space-4) var(--space-1);
font-family: var(--font-heading);
font-weight: 600;
font-size: 1.125rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
transition: color var(--dur-micro) var(--ease-out), padding-left var(--dur-micro) var(--ease-out);
}
.pup-header__mobile-nav a:hover,
.pup-header__mobile-nav a:focus-visible {
color: var(--pup-cyan);
padding-left: var(--space-3);
}
/* Mobile-menu call CTA — inherits the full .pup-btn.pup-btn--primary
sticker treatment (border, halo, gradient, shadow, hover/active).
Only the drawer-specific layout (full-width, top margin) lives here. */
.pup-header__mobile-cta {
width: 100%;
margin-top: var(--space-5);
}
@media (min-width: 1024px) {
.pup-header__mobile,
.pup-header__scrim { display: none !important; }
}
/* Optional translucent scrim behind the open drawer to focus the eye. */
.pup-header__scrim {
position: fixed;
inset: 64px 0 0 0;
background: rgba(15, 10, 30, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-ui) var(--ease-out);
z-index: -1;
}
.pup-header__scrim[hidden] { display: none; }
.pup-header.is-menu-open .pup-header__scrim {
opacity: 1;
pointer-events: auto;
}
/* Lock background scroll when the drawer is open. */
body.pup-no-scroll { overflow: hidden; }
/* =========================================================================
Hero (pup/hero) - rays + halftone variant
========================================================================= */
.pup-vh {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* Wrapper holds the hero + the peeking leadbar as siblings. The leadbar
sits OUTSIDE the hero so it can overflow into the next section without
the hero's overflow:hidden (needed for the rays mask) clipping it. */
.pup-hero-wrap {
position: relative;
margin-top: 0;
/* Break out of any WP layout contentSize constraint so the hero is always
full-viewport-width — halftone and swoosh stay consistent at every zoom level. */
width: 100% !important;
max-width: none !important;
}
.pup-hero {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
flex-direction: column;
color: var(--pup-white);
text-align: center;
/* Viewport-relative height - svh prevents mobile chrome from clipping. */
min-height: 100vh;
min-height: 100svh;
padding-top: clamp(5rem, 9vw, 7.5rem);
padding-bottom: clamp(3.5rem, 6vw, 5rem);
background:
radial-gradient(ellipse 110% 80% at 50% 100%,
var(--pup-purple) 0%,
var(--pup-purple-deep) 55%,
var(--pup-navy) 100%);
}
/* Cyan brand "slice" on the left wall - mirrors the diagonal cyan
wedge on the Purple Pup van wrap. The SVG anchors cyan to the
upper-left of the hero, then ONE smooth cubic Bezier sweeps
diagonally down to the bottom-left corner like a single knife
slice. A thin white inner stroke traces that curve as the
"sticker" outline cue from the lockup. Sits at z-index 0 (above
rays/halftone, below the vehicle and content), with
`mix-blend-mode: screen` so the cyan reads as a brand-tinted
wash of light over the purple gradient. */
.pup-hero::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
/* Percentage width — scales 1:1 with the (now full-bleed) hero so the
swoosh stays proportionally identical at every screen size and zoom
level, exactly like .pup-hero__rays / .pup-hero__halftone. The
min-width keeps it from going invisible on tiny phones. */
width: 42%;
min-width: 260px;
z-index: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: left center;
mix-blend-mode: screen;
opacity: 0.92;
}
@media (max-width: 720px) {
.pup-hero::before { opacity: 0.6; width: 55%; min-width: 180px; }
}
/* === Sunburst rays === */
.pup-hero__rays {
position: absolute; inset: 0; z-index: -2;
background: repeating-conic-gradient(
from -90deg at 50% 105%,
rgba(177, 125, 214, 0.45) 0deg 7deg,
transparent 7deg 15deg
);
-webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 105%, #000 0%, #000 45%, transparent 78%);
mask-image: radial-gradient(ellipse 95% 95% at 50% 105%, #000 0%, #000 45%, transparent 78%);
mix-blend-mode: screen;
opacity: 0.85;
transform-origin: 50% 105%;
}
/* Density variants (driven by data-rays) */
.pup-hero[data-rays="12"] .pup-hero__rays {
background: repeating-conic-gradient(from -90deg at 50% 105%,
rgba(177, 125, 214, 0.45) 0deg 10deg,
transparent 10deg 20deg);
}
.pup-hero[data-rays="24"] .pup-hero__rays {
background: repeating-conic-gradient(from -90deg at 50% 105%,
rgba(177, 125, 214, 0.45) 0deg 5deg,
transparent 5deg 10deg);
}
/* Origin: center (starburst) */
.pup-hero[data-origin="center"] .pup-hero__rays {
background: repeating-conic-gradient(from 0deg at 50% 50%,
rgba(177, 125, 214, 0.45) 0deg 7deg,
transparent 7deg 15deg);
-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, #000 35%, transparent 75%);
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, #000 35%, transparent 75%);
transform-origin: 50% 50%;
}
.pup-hero[data-origin="center"][data-rays="12"] .pup-hero__rays {
background: repeating-conic-gradient(from 0deg at 50% 50%,
rgba(177, 125, 214, 0.45) 0deg 10deg,
transparent 10deg 20deg);
}
.pup-hero[data-origin="center"][data-rays="24"] .pup-hero__rays {
background: repeating-conic-gradient(from 0deg at 50% 50%,
rgba(177, 125, 214, 0.45) 0deg 5deg,
transparent 5deg 10deg);
}
/* === Halftone dot overlay === */
.pup-hero__halftone {
position: absolute; inset: 0; z-index: -1;
background-image: radial-gradient(circle, rgba(46, 196, 232, 0.55) 1.2px, transparent 1.6px);
background-size: 9px 9px;
background-position: 0 0;
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 100%,
#000 0%, rgba(0,0,0,0.55) 35%, transparent 75%);
mask-image: radial-gradient(ellipse 90% 80% at 50% 100%,
#000 0%, rgba(0,0,0,0.55) 35%, transparent 75%);
opacity: 0.7;
}
.pup-hero[data-origin="center"] .pup-hero__halftone {
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%,
#000 0%, rgba(0,0,0,0.55) 35%, transparent 75%);
mask-image: radial-gradient(ellipse 80% 70% at 50% 50%,
#000 0%, rgba(0,0,0,0.55) 35%, transparent 75%);
}
.pup-hero[data-halftone="off"] .pup-hero__halftone { display: none; }
.pup-hero[data-halftone="subtle"] .pup-hero__halftone { opacity: 0.35; background-size: 11px 11px; }
.pup-hero[data-halftone="bold"] .pup-hero__halftone { opacity: 0.95; background-size: 7px 7px; }
/* Slow ambient drift on the rays - reduced-motion safe */
@media (prefers-reduced-motion: no-preference) {
.pup-hero__rays { animation: pup-ray-drift 60s linear infinite; }
@keyframes pup-ray-drift {
from { transform: rotate(-1deg); }
to { transform: rotate( 1deg); }
}
}
/* === Inner content stack ===
Note: do NOT use `ch` units for the column width here. `ch` is computed
against the body font (~9px wide), which collapses the column to ~580px
and forces the huge display headline to wrap one word per line. Use a
px/vw based clamp instead so the column is actually wide. */
.pup-hero__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: min(92vw, 1100px);
margin: 0 auto;
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
.pup-hero__inner > * { width: 100%; }
.pup-hero__eyebrow {
font-family: var(--font-display);
font-size: var(--fs-small);
letter-spacing: 0.18em;
color: var(--pup-cyan);
text-transform: uppercase;
margin: 0 0 var(--space-3);
max-width: none;
}
.pup-hero__headline {
font-family: var(--font-display);
/* Floor lowered + slope steepened so the longest single uppercase
token in this headline ("WILMINGTON'S" in the chunky display
face) fits inside the 92vw column on ~360-400px phones without
spilling past the right edge. The 4.5rem cap keeps the desktop
sizing untouched. */
font-size: clamp(1.75rem, 7.2vw, 4.5rem);
line-height: 0.98;
letter-spacing: 0.01em;
text-transform: uppercase;
color: var(--pup-white);
text-shadow: 0 2px 24px rgba(15, 10, 30, 0.55);
margin: 0 auto var(--space-4);
max-width: 22ch; /* keeps a balanced 2-3 line shape on wide screens */
text-wrap: balance;
overflow-wrap: break-word;
}
/* === Headline tightening for small Android-class phones (≤480px) ===
The `max-width: 22ch` above is measured against the chunky display
font, where ch ≈ 25-30px, so 22ch can resolve to ~600px and blow
past a 360px viewport. Cap to the actual column width and lower the
font floor so the longest uppercase token (e.g. "WILMINGTON'S")
never forces horizontal overflow. */
@media (max-width: 480px) {
.pup-hero__headline {
font-size: clamp(1.375rem, 7.5vw, 2rem);
max-width: 100%;
letter-spacing: 0;
hyphens: auto;
}
}
.pup-hero__sub {
font-size: var(--fs-body-lg);
color: var(--pup-cloud);
max-width: 60ch;
margin: 0 auto var(--space-5);
}
.pup-hero__cta { margin: var(--space-3) 0 var(--space-5); }
/* === Ratings badges — sticker treatment (mirrors .pup-btn filled variants) =
Each badge gets the full brand sticker signature: navy 3px stroke,
white inset halo, hard 5px navy bottom shadow, and a white-to-lavender
gradient fill. Same DNA as the CTA buttons so they read as a cohesive
design system rather than tacked-on footnotes. */
.pup-hero__ratings {
display: flex;
/* Wrap by default so the three rating badges drop to a second row
on narrow phones (≤~360px) instead of overflowing the viewport
on a single forced line. */
flex-wrap: wrap;
gap: 6px;
justify-content: center;
align-items: center;
margin-top: var(--space-3);
width: 100%;
}
@media (min-width: 721px) {
.pup-hero__ratings { gap: var(--space-2); }
}
@media (max-width: 720px) {
.pup-hero__rating {
gap: 4px;
padding: 4px 6px 4px 5px;
border-radius: 6px;
border-width: 1.5px;
}
.pup-hero__rating-logo { width: 14px; height: 14px; }
.pup-hero__rating-body { gap: 1px; }
.pup-hero__rating-top { gap: 3px; }
.pup-hero__rating-score { font-size: 0.65rem; }
.pup-hero__rating-stars { font-size: 0.38rem; letter-spacing: 0.5px; }
.pup-hero__rating-platform { font-size: 0.48rem; }
.pup-hero__rating-label { font-size: 0.4rem; }
}
.pup-hero__rating {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 6px;
background: linear-gradient(180deg, #ffffff 0%, #ece6f8 100%);
border-radius: 8px;
border: 2px solid var(--pup-navy);
padding: 5px 9px 5px 6px;
box-shadow:
inset 0 0 0 1.5px rgba(255, 255, 255, 0.85),
inset 0 1px 0 0 rgba(255, 255, 255, 0.95),
0 0 0 2px rgba(46, 196, 232, 0.5),
0 0 14px rgba(46, 196, 232, 0.3),
0 3px 0 0 var(--pup-navy);
line-height: 1;
animation: pup-rating-ring 2.6s var(--ease-out) infinite;
}
.pup-hero__rating:nth-child(2) { animation-delay: 0.6s; }
.pup-hero__rating:nth-child(3) { animation-delay: 1.2s; }
a.pup-hero__rating--link {
text-decoration: none;
color: inherit;
cursor: pointer;
}
a.pup-hero__rating--link:hover,
a.pup-hero__rating--link:focus-visible {
outline: 2px solid var(--pup-teal, #2ec4e8);
outline-offset: 2px;
}
@keyframes pup-rating-ring {
0%, 100% {
box-shadow:
inset 0 0 0 1.5px rgba(255, 255, 255, 0.85),
inset 0 1px 0 0 rgba(255, 255, 255, 0.95),
0 0 0 2px rgba(46, 196, 232, 0.5),
0 0 14px rgba(46, 196, 232, 0.3),
0 3px 0 0 var(--pup-navy);
}
50% {
box-shadow:
inset 0 0 0 1.5px rgba(255, 255, 255, 0.85),
inset 0 1px 0 0 rgba(255, 255, 255, 0.95),
0 0 0 4px rgba(46, 196, 232, 0.25),
0 0 22px rgba(46, 196, 232, 0.45),
0 3px 0 0 var(--pup-navy);
}
}
@media (prefers-reduced-motion: reduce) {
.pup-hero__rating { animation: none; }
}
.pup-hero__rating-logo {
width: 20px;
height: 20px;
object-fit: contain;
flex: 0 0 auto;
display: block;
}
.pup-hero__rating-body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
}
.pup-hero__rating-top {
display: flex;
align-items: center;
gap: 4px;
}
.pup-hero__rating-score {
font-family: var(--font-display);
font-size: 0.78rem;
color: var(--pup-navy);
line-height: 1;
letter-spacing: 0.01em;
}
.pup-hero__rating-stars {
color: #E8A000;
font-size: 0.48rem;
letter-spacing: 1px;
line-height: 1;
}
.pup-hero__rating-platform {
font-family: var(--font-display);
font-size: 0.58rem;
color: var(--pup-navy);
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.1;
}
.pup-hero__rating-label {
font-size: 0.48rem;
color: var(--pup-navy);
opacity: 0.5;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
}
@media (min-width: 721px) {
.pup-hero__ratings {
gap: var(--space-3);
margin-top: var(--space-4);
}
.pup-hero__rating {
padding: 6px 11px 6px 8px;
gap: 8px;
}
.pup-hero__rating-logo {
width: 22px;
height: 22px;
}
.pup-hero__rating-score {
font-size: 0.85rem;
}
.pup-hero__rating-platform {
font-size: 0.62rem;
}
.pup-hero__rating-label {
font-size: 0.5rem;
}
}
.pup-hero__certs {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
justify-content: center;
align-items: center;
margin-top: var(--space-4);
}
.pup-hero__cert {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(46, 196, 232, 0.08);
border: 1.5px solid rgba(46, 196, 232, 0.28);
padding: 4px 11px;
border-radius: var(--r-pill);
font-family: var(--font-display);
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pup-white);
line-height: 1;
}
.pup-hero__cert::before {
content: '✓';
font-family: sans-serif;
font-size: 0.65rem;
font-weight: 700;
color: var(--pup-cyan);
line-height: 1;
letter-spacing: 0;
}
/* === Vehicle (Purple Pup van) ===
The van body PNG has transparent wheel wells. We position two wheel
PNGs absolutely over the wells so each wheel can rotate independently.
The container is sized with clamp() so it scales proportionally with
the viewport, and the wheel positions are expressed as percentages of
the container so they track the van as it scales. */
/* ============================================================
TUNING KNOBS - change these to nudge the van without hunting:
--van-content-max : width of the centered content column the
van should track. Mirrors .pup-hero__inner
max-width so the van follows the CTA at any
viewport / zoom level. Rarely changed.
--van-anchor : how far PAST the content column's right edge
the van's right edge sits. Negative = peeks
further right (off the column). Positive =
pulled inward over the column. Main horizontal
positioner. e.g. -200px, -120px, 0, 40px.
--van-top : vertical anchor as % of hero height. 50% =
hero center. 75% aims roughly at the CTA.
--van-lift : fine-tune vertical nudge on top of --van-top.
Negative = up, positive = down. e.g. -20px.
--van-body-lift : lift JUST the van body up off the wheels.
Wheels stay glued to the container bottom.
--van-bob : bob amplitude - body floats up/down by this
much while the wheels spin. 0 = no bob.
--van-drive-x : horizontal drive offset. Toggled by JS via the
.is-offstage-right / .is-driving-out classes
to drive the van in on first load and away on
scroll. Don't set by hand.
--van-drive-ms : duration of the drive-in / drive-out animation.
============================================================ */
.pup-hero__vehicle {
--van-content-max: 1100px;
--van-anchor: -560px;
--van-top: 75%;
--van-lift: 0px;
--van-body-lift: 22px;
--van-bob: 2px;
--van-drive-x: 0px; /* horizontal "drive" offset; toggled by JS */
--van-drive-ms: 1100ms; /* drive-in / drive-out duration */
position: absolute;
right: calc(
max(0px, (100% - var(--van-content-max)) / 2)
+ var(--van-anchor)
);
top: var(--van-top);
transform: translate(var(--van-drive-x), calc(-50% + var(--van-lift)));
transition: transform var(--van-drive-ms) cubic-bezier(.2, .75, .25, 1);
z-index: 0; /* above rays/halftone (-2/-1), below text (1) */
width: clamp(420px, 50vw, 820px); /* xl default */
aspect-ratio: 2619 / 975; /* exact aspect of vehicle base PNG */
pointer-events: none;
display: none; /* shown only at >=900px (see media query) */
filter: drop-shadow(0 30px 40px rgba(15, 10, 30, 0.35));
}
.pup-hero__vehicle[data-size="lg"] { width: clamp(360px, 38vw, 620px); }
.pup-hero__vehicle[data-size="xl"] { width: clamp(420px, 50vw, 820px); }
.pup-hero__vehicle[data-size="2xl"] { width: clamp(480px, 60vw, 980px); }
/* Entrance helper class - used only on first load.
JS adds it to snap the van off the RIGHT edge, then removes it
on the next frame so the CSS transition slides the van in. After
the entrance, scroll progress writes --van-drive-x directly via
inline style and the van moves left as the hero scrolls away. */
.pup-hero__vehicle.is-offstage-right {
--van-drive-x: 140%;
transition: none; /* instant snap; entrance plays when class is removed */
}
@media (prefers-reduced-motion: reduce) {
.pup-hero__vehicle,
.pup-hero__vehicle.is-offstage-right {
--van-drive-x: 0px;
transition: none;
}
}
.pup-hero__van {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
transform: translateY(calc(-1 * var(--van-body-lift)));
}
/* Wheel positions measured directly from the source PNG (2619x975).
Front well center = 13.5% from left; rear well center = 78.7%.
Both wells share the same chassis bottom. Wheel size is set slightly
larger than the visible well opening - the van body (z-index 1)
automatically masks any overflow outside the well cutout. */
.pup-hero__wheel {
position: absolute;
z-index: 0; /* under van body so the body design covers wheel edges */
width: 12.5%;
aspect-ratio: 1 / 1;
height: auto;
transform-origin: 50% 50%;
will-change: transform;
}
.pup-hero__wheel--front { left: 7.25%; bottom: 0; }
.pup-hero__wheel--rear { left: 72.45%; bottom: 0; }
/* Van faces LEFT in the artwork (cab on the left), so "driving forward"
means the wheels rotate counter-clockwise from the viewer's angle. */
@keyframes pup-wheel-spin {
to { transform: rotate(-360deg); }
}
.pup-hero__vehicle[data-spin="on"] .pup-hero__wheel {
animation: pup-wheel-spin 1.4s linear infinite;
}
/* Subtle body bob - the van body floats up + down on its suspension while
the wheels spin. Amplitude is tunable via --van-bob, baseline lift is
--van-body-lift so the two knobs compose cleanly. */
@keyframes pup-van-bob {
0%, 100% { transform: translateY(calc(-1 * var(--van-body-lift))); }
50% { transform: translateY(calc(-1 * var(--van-body-lift) - var(--van-bob, 5px))); }
}
.pup-hero__vehicle[data-spin="on"] .pup-hero__van {
animation: pup-van-bob 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.pup-hero__wheel,
.pup-hero__van { animation: none !important; }
}
/* === Reveal the van as a background-blending decoration ===
The van is purely decorative here - it sits behind the centered
text (z-index 0 vs. inner z-index 1), faded + masked so it blends
into the rays/halftone background rather than competing with the
headline. Hidden on mobile where the small viewport leaves no room. */
@media (min-width: 900px) {
.pup-hero--has-vehicle .pup-hero__vehicle { display: block; }
}
/* === Friendly plumber peek (bottom-left)
Mirrors the van's anchor pattern on the right: tracks the centered
content column so he sits just outside the column edge at any
viewport / zoom level. Sits at z-index 0 (above rays/halftone,
below the headline) so the headline always wins, but his head and
thumbs-up read clearly above the cyan slice on the left wall.
Hidden on mobile (preserves the centered text-first composition).
Uses the same tuning-knob pattern as .pup-hero__vehicle so he can
be nudged without hunting through positional math.
============================================================ */
.pup-hero__plumber {
--plumber-content-max: 1100px;
--plumber-anchor: -120px; /* px past the column's left edge */
--plumber-bottom: -8px; /* peek slightly below the hero floor */
--plumber-rise-ms: 900ms;
position: absolute;
/* Mirror the van's right-anchored math, but on the left edge.
With negative --plumber-anchor he peeks slightly off the
content column on big viewports; clamped to keep him fully
on-screen at narrower desktops. */
left: max(
8px,
calc(
max(0px, (100% - var(--plumber-content-max)) / 2)
+ var(--plumber-anchor)
)
);
bottom: var(--plumber-bottom);
margin: 0;
padding: 0;
z-index: 0;
width: clamp(280px, 32vw, 460px);
pointer-events: none;
display: none; /* shown only at >=900px (see media query below) */
filter: drop-shadow(0 30px 40px rgba(15, 10, 30, 0.45));
opacity: 0;
transform: translateY(40px);
transition:
opacity var(--plumber-rise-ms) cubic-bezier(.2, .75, .25, 1),
transform var(--plumber-rise-ms) cubic-bezier(.2, .75, .25, 1);
}
.pup-hero__plumber[data-size="sm"] { width: clamp(220px, 24vw, 340px); }
.pup-hero__plumber[data-size="md"] { width: clamp(280px, 32vw, 460px); }
.pup-hero__plumber[data-size="lg"] { width: clamp(340px, 40vw, 560px); }
.pup-hero__plumber-img {
display: block;
width: 100%;
height: auto;
}
@media (min-width: 900px) {
.pup-hero--has-plumber .pup-hero__plumber {
display: block;
opacity: 1;
transform: translateY(0);
}
}
/* On smaller desktops he eats too much real estate next to the van —
shrink him down and pull him fully on-screen so both decorations
still breathe. */
@media (min-width: 900px) and (max-width: 1199px) {
.pup-hero__plumber {
width: clamp(220px, 26vw, 320px);
--plumber-anchor: -40px;
}
}
@media (prefers-reduced-motion: reduce) {
.pup-hero__plumber {
transition: none;
opacity: 1;
transform: none;
}
}
/* === Big CTA modifier === */
/* XL size — bumps the sticker shadow offset so the proportions still
feel right at the larger size, and grows the size variables. We do
NOT redeclare box-shadow here (that would clobber the three-layer
sticker treatment from .pup-btn--primary etc); we only nudge the
offset variable that the sticker shadow is built from. */
.pup-btn--xl {
font-size: 1.25rem;
padding: 18px 36px;
min-height: 64px;
gap: var(--space-3);
--pup-btn-shadow-offset: 7px;
--pup-btn-halo-width: 2.5px;
}
/* Call CTA — phone icon + number, with a cyan "ringing" ring + glow
layered ON TOP of the sticker construction so the variant still
reads as "tap to call" without breaking the brand button family.
Composes the standard sticker shadows (white halo + top gloss + hard
navy offset) with two extra outer layers: a 3px cyan ring just
outside the navy stroke, and a soft cyan ambient glow. */
.pup-btn--call {
gap: var(--space-3);
}
.pup-btn--primary.pup-btn--call,
.pup-btn--secondary.pup-btn--call,
.pup-btn--dark.pup-btn--call {
box-shadow:
inset 0 0 0 var(--pup-btn-halo-width) var(--pup-btn-halo),
inset 0 2px 0 0 rgba(255, 255, 255, 0.20),
0 0 0 3px rgba(46, 196, 232, 0.55),
0 0 28px rgba(46, 196, 232, 0.35),
0 var(--pup-btn-shadow-offset) 0 0 var(--pup-btn-shadow-color);
}
.pup-btn--primary.pup-btn--call:hover,
.pup-btn--secondary.pup-btn--call:hover,
.pup-btn--dark.pup-btn--call:hover {
box-shadow:
inset 0 0 0 var(--pup-btn-halo-width) var(--pup-btn-halo),
inset 0 2px 0 0 rgba(255, 255, 255, 0.24),
0 0 0 3px var(--pup-cyan),
0 0 36px rgba(46, 196, 232, 0.5),
0 calc(var(--pup-btn-shadow-offset) + 2px) 0 0 var(--pup-btn-shadow-color);
}
.pup-btn--primary.pup-btn--call:active,
.pup-btn--secondary.pup-btn--call:active,
.pup-btn--dark.pup-btn--call:active {
box-shadow:
inset 0 0 0 var(--pup-btn-halo-width) var(--pup-btn-halo),
inset 0 2px 0 0 rgba(255, 255, 255, 0.14),
0 0 0 3px rgba(46, 196, 232, 0.45),
0 0 16px rgba(46, 196, 232, 0.25),
0 0 0 0 var(--pup-btn-shadow-color);
}
/* Phone glyph stays cyan against the purple fill — adds a tiny
"this is a call" cue even when not hovered. */
.pup-btn--call svg {
color: var(--pup-cyan);
flex: 0 0 auto;
}
/* Soft "ringing" pulse on idle to draw the eye to the primary hero
action. Suppressed under reduced motion. */
@keyframes pup-btn-call-ring {
0%, 100% {
box-shadow:
inset 0 0 0 var(--pup-btn-halo-width) var(--pup-btn-halo),
inset 0 2px 0 0 rgba(255, 255, 255, 0.20),
0 0 0 3px rgba(46, 196, 232, 0.55),
0 0 28px rgba(46, 196, 232, 0.35),
0 var(--pup-btn-shadow-offset) 0 0 var(--pup-btn-shadow-color);
}
50% {
box-shadow:
inset 0 0 0 var(--pup-btn-halo-width) var(--pup-btn-halo),
inset 0 2px 0 0 rgba(255, 255, 255, 0.24),
0 0 0 6px rgba(46, 196, 232, 0.30),
0 0 40px rgba(46, 196, 232, 0.5),
0 var(--pup-btn-shadow-offset) 0 0 var(--pup-btn-shadow-color);
}
}
.pup-btn--primary.pup-btn--call,
.pup-btn--secondary.pup-btn--call,
.pup-btn--dark.pup-btn--call {
animation: pup-btn-call-ring 2.6s var(--ease-out) infinite;
}
.pup-btn--call:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.pup-btn--primary.pup-btn--call,
.pup-btn--secondary.pup-btn--call,
.pup-btn--dark.pup-btn--call { animation: none; }
}
/* === Lead-form bar (lives outside the hero, overlaps it from below) ===
The shell is a sibling of .pup-hero, so the bar can freely peek both
UP into the hero AND DOWN into the next section without anything
clipping it. */
.pup-hero__leadbar-shell {
position: relative;
z-index: 5;
margin-top: calc(-1 * clamp(3rem, 6vw, 5rem));
margin-bottom: calc(-1 * clamp(2rem, 4vw, 3rem));
pointer-events: none; /* let the leadbar capture; shell is invisible */
}
/* Saturated brand "sticker billboard" panel — same three-layer
construction as the buttons (navy stroke + white inner halo + hard
navy offset shadow), scaled up to panel proportions and filled with
the purple-deep gradient that signals "this is THE quick-quote
feature". White-on-purple-deep title is verified 13.43:1 (AAA). */
.pup-hero__leadbar {
position: relative;
z-index: 5;
pointer-events: auto;
background: linear-gradient(180deg, var(--pup-purple) 0%, var(--pup-purple-deep) 100%);
color: var(--pup-white);
border: 3px solid var(--pup-navy);
border-radius: var(--r-lg);
box-shadow:
inset 0 0 0 2px var(--pup-white),
inset 0 2px 0 0 rgba(255, 255, 255, 0.18),
0 8px 0 0 var(--pup-navy);
padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
}
/* Title row — display family, uppercase, white. Mirrors the type voice
used on every branded CTA elsewhere on the page so the panel reads
as a peer of the lockup. */
.pup-hero__leadbar-title {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: 1.0625rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pup-white);
margin: 0 0 var(--space-3);
}
.pup-hero__leadbar-label { line-height: 1.25; }
/* Cyan "FAST QUOTE" — same as .pup-hero__eyebrow (var(--pup-cyan)) */
.pup-hero__leadbar-accent { color: var(--pup-cyan); }
/* Cyan icon chip — same construction as the header phone icon chip.
Cyan fill + navy glyph = 8.28:1 (AAA), navy stroke + inset white
highlight reuse the brand "chip" pattern. */
.pup-hero__leadbar-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--pup-cyan);
border: 2px solid var(--pup-navy);
color: var(--pup-navy);
flex: 0 0 auto;
box-shadow: inset 0 2px 0 0 rgba(255, 255, 255, 0.35);
animation: pup-leadbar-icon-float 3s var(--ease-out) infinite;
}
@keyframes pup-leadbar-icon-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
.pup-hero__leadbar-icon { animation: none; }
}
.pup-hero__leadbar-form {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1.5fr auto;
gap: var(--space-3);
align-items: stretch;
}
/* Inputs — white pill stickers nested inside the dark panel. 2px navy
stroke + inset gloss highlight makes them feel like cousins of the
branded buttons. Cyan focus ring (3px outer + inset halo) reads
against both the white input fill and the surrounding purple panel,
and pairs the color shift with a stroke-width change so focus is
never indicated by color alone. */
.pup-hero__leadbar-form input {
width: 100%;
min-height: 50px;
font-size: 1rem;
padding: 12px 18px;
border: 2px solid var(--pup-navy);
border-radius: var(--r-pill);
font-family: inherit;
background: var(--pup-white);
color: var(--pup-ink);
box-shadow: inset 0 2px 0 0 rgba(31, 17, 71, 0.08);
transition: box-shadow var(--dur-micro) var(--ease-out), outline-color var(--dur-micro) var(--ease-out);
}
.pup-hero__leadbar-form input::placeholder {
color: rgba(31, 17, 71, 0.55);
}
.pup-hero__leadbar-form input:focus,
.pup-hero__leadbar-form input:focus-visible {
outline: 3px solid var(--pup-cyan);
outline-offset: 2px;
box-shadow:
inset 0 0 0 2px var(--pup-cyan),
inset 0 2px 0 0 rgba(31, 17, 71, 0.08);
}
.pup-hero__leadbar-form button { white-space: nowrap; }
.pup-hero__leadbar-status {
grid-column: 1 / -1;
margin: 0;
font-size: var(--fs-small);
}
.pup-hero__leadbar-status:not(:empty) {
margin-top: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--r-sm);
background: rgba( 255, 255, 255, 0.2 );
border: 1px solid var(--pup-navy);
color: var(--pup-white);
line-height: 1.4;
}
/* SEND IT — already a primary sticker pill from .pup-btn--primary. The
default sticker offset shadow is navy, which has only 1.94:1 contrast
on purple-deep (forbidden pair), so we swap it for ink which casts
visibly against the panel gradient. */
.pup-hero__leadbar .pup-btn { --pup-btn-shadow-color: var(--pup-ink); }
@media (max-width: 720px) {
.pup-hero__leadbar-form { grid-template-columns: 1fr; }
/* Keep the label; hide only the cyan icon chip to save width. */
.pup-hero__leadbar-icon { display: none; }
.pup-hero__leadbar-title { gap: 0; }
}
/* =========================================================================
Page hero (pup/page-hero)
========================================================================= */
.pup-page-hero {
background: var(--pup-mist);
padding-top: clamp(112px, 12vw, 160px);
padding-bottom: clamp(40px, 5vw, 64px);
text-align: center;
}
.pup-page-hero--left { text-align: left; }
.pup-page-hero__eyebrow {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: var(--fs-small);
color: var(--pup-cyan-accessible);
margin: 0 0 var(--space-3);
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
}
.pup-page-hero__eyebrow-item + .pup-page-hero__eyebrow-item::before {
content: "";
display: inline-block;
width: 4px; height: 4px;
border-radius: 50%;
background: currentColor;
margin: 0 var(--space-3) 2px 0;
vertical-align: middle;
}
.pup-page-hero__headline {
margin-bottom: var(--space-4);
overflow-wrap: break-word; /* let "PLUMBING," wrap mid-word at <400px */
hyphens: auto;
}
.pup-page-hero__supporting { margin-left: auto; margin-right: auto; font-size: var(--fs-body-lg); opacity: 0.9; }
.pup-page-hero__cta { margin-top: var(--space-5); }
/* Mobile eyebrow: one line — nowrap + vw-scaled type so it fits ~320–400px. */
@media (max-width: 599px) {
.pup-page-hero__eyebrow {
flex-wrap: nowrap;
white-space: nowrap;
justify-content: center;
gap: var(--space-1);
letter-spacing: 0.03em;
/* Fit the full eyebrow string in one row inside gutters (e.g. 360×800). */
font-size: min(0.68rem, max(0.5rem, calc((100vw - 64px) / 32)));
}
.pup-page-hero__eyebrow-item { white-space: inherit; }
.pup-page-hero__eyebrow-item + .pup-page-hero__eyebrow-item::before {
margin: 0 var(--space-1) 2px 0;
}
}
/* Tame the display font on phones so the hero headline doesn't push the
page horizontally. The Moderniz extended caps are ~17px wide each at
2rem, which means a 14-letter token like "PLUMBING, DONE" overflows
the 342px content column on iPhone-class viewports. Clamp top to
~28px (1.75rem) and let the headline wrap on word boundaries. */
@media (max-width: 599px) {
.pup-page-hero__headline {
font-size: clamp(1.5rem, 7.5vw, 1.875rem);
line-height: 1.05;
letter-spacing: 0.005em;
}
.pup-page-hero__supporting { font-size: 1rem; }
}
/* Decorated variant — used on the contact page. Adds the "cloud wash"
from design_spec §7 behind the headline plus a lavender bevel rule
along the bottom that mirrors the wordmark badge stroke. */
.pup-page-hero--decorated {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--pup-mist);
border-bottom: 4px solid var(--pup-lavender);
}
.pup-page-hero--decorated::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
background:
radial-gradient(60% 55% at 50% 110%, rgba(198, 234, 246, 0.85) 0%, transparent 70%),
radial-gradient(40% 35% at 12% 0%, rgba(177, 125, 214, 0.18) 0%, transparent 70%),
radial-gradient(40% 35% at 88% 0%, rgba(46, 196, 232, 0.12) 0%, transparent 70%);
}
.pup-page-hero--decorated::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 12px;
z-index: -1;
pointer-events: none;
background: linear-gradient(180deg, transparent 0%, rgba(31,17,71,0.06) 100%);
}
.pup-page-hero--with-mascot .pup-container { position: relative; }
.pup-page-hero__mascot {
position: absolute;
right: var(--gutter-mobile);
bottom: calc(-1 * clamp(48px, 8vw, 80px));
width: clamp(72px, 12vw, 120px);
height: auto;
pointer-events: none;
user-select: none;
z-index: 1;
transform: rotate(-4deg);
filter: drop-shadow(0 8px 14px rgba(31,17,71,0.18));
}
@media (min-width: 768px) {
.pup-page-hero__mascot { right: var(--gutter-desktop); }
}
@media (prefers-reduced-motion: no-preference) {
.pup-page-hero--with-mascot .pup-page-hero__mascot {
animation: pup-page-hero-wag 5s ease-in-out infinite;
transform-origin: 50% 90%;
}
@keyframes pup-page-hero-wag {
0%, 100% { transform: rotate(-4deg); }
50% { transform: rotate(2deg); }
}
}
/* Friendly plumber — sits as a quiet background figure inside the
hero rather than peeking out below it. Anchored bottom-left, scaled
to feel present without competing with the centered headline, and
z-indexed BEHIND .pup-container so the text always reads cleanly on
top. Hidden on mobile to preserve the centered text-first composition.
Because he's now fully contained inside the section we no longer
need the bottom-padding boost that previously reserved space for
his peek-out, which is what was creating the empty band below the
headline. */
.pup-page-hero--with-plumber {
position: relative;
overflow: hidden;
isolation: isolate;
}
.pup-page-hero__plumber {
display: none;
margin: 0;
padding: 0;
pointer-events: none;
user-select: none;
}
.pup-page-hero__plumber img {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 18px 24px rgba(31, 17, 71, 0.22));
}
@media (min-width: 900px) {
.pup-page-hero__plumber {
display: block;
position: absolute;
/* ─── PLUMBER HORIZONTAL POSITION ────────────────────────────────
Change `left` to move the figure left/right.
0px = flush against the left edge
40px = current setting (nudged slightly inward)
-40px = lets the figure bleed off the left edge
You can also use % values (e.g. 5%) for viewport-relative nudges.
──────────────────────────────────────────────────────────────── */
left: 160px;
bottom: 0;
width: clamp(220px, 24vw, 340px);
z-index: 0;
opacity: 0;
transform: translateY(16px);
transition:
opacity 700ms cubic-bezier(.2,.75,.25,1),
transform 700ms cubic-bezier(.2,.75,.25,1);
}
.pup-page-hero--with-plumber .pup-page-hero__plumber {
opacity: 0.92;
transform: translateY(0);
}
}
@media (min-width: 1200px) {
.pup-page-hero__plumber {
width: clamp(260px, 26vw, 400px);
}
}
@media (prefers-reduced-motion: reduce) {
.pup-page-hero__plumber {
transition: none;
opacity: 0.92;
transform: none;
}
}
/* Dark / "starburst" variant — mirrors the home hero's brand surface
so secondary pages can lean on the same purple-gradient stage with
the cyan brand slice on the left wall and the cyan halftone dot
wash sweeping up from the bottom. Text flips to white, the eyebrow
to bright cyan, and the plumber's drop shadow is softened to a
navy bloom that reads against the deep purple instead of fighting
the dark surface. */
.pup-page-hero--dark {
position: relative;
overflow: hidden;
isolation: isolate;
color: var(--pup-white);
background:
radial-gradient(ellipse 110% 80% at 50% 100%,
var(--pup-purple) 0%,
var(--pup-purple-deep) 55%,
var(--pup-navy) 100%);
}
.pup-page-hero--dark .pup-page-hero__headline { color: var(--pup-white); }
.pup-page-hero--dark .pup-page-hero__supporting {
color: var(--pup-white);
opacity: 0.92;
}
.pup-page-hero--dark .pup-page-hero__eyebrow { color: var(--pup-cyan); }
.pup-page-hero--dark .pup-page-hero__eyebrow-item + .pup-page-hero__eyebrow-item::before {
background: var(--pup-cyan);
}
/* Cyan brand slice on the left wall (same SVG geometry as
.pup-hero::before, scaled for the slimmer page hero so it reads as
a quiet wash rather than a full wedge of light). */
.pup-page-hero--dark::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: clamp(180px, 32vw, 460px);
z-index: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: left center;
mix-blend-mode: screen;
opacity: 0.85;
}
@media (max-width: 720px) {
.pup-page-hero--dark::before { opacity: 0.55; width: clamp(140px, 50vw, 300px); }
}
/* Cyan halftone dot wash, masked into a soft ellipse rising from the
bottom-center — matches .pup-hero__halftone but emitted as a
pseudo-element so we don't have to add markup. */
.pup-page-hero--dark::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: radial-gradient(circle, rgba(46, 196, 232, 0.55) 1.2px, transparent 1.6px);
background-size: 9px 9px;
background-position: 0 0;
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 100%,
#000 0%, rgba(0,0,0,0.55) 35%, transparent 75%);
mask-image: radial-gradient(ellipse 90% 80% at 50% 100%,
#000 0%, rgba(0,0,0,0.55) 35%, transparent 75%);
opacity: 0.55;
}
/* Sunburst rays — lavender repeating-conic-gradient anchored at the
bottom-center, masked into a soft ellipse so the rays read as a
gentle "sunrise" behind the headline rather than a hard pinwheel.
Sits on z-index -1 so the cyan slice and halftone dots paint over
it (and isolation:isolate on the dark variant clamps the negative
z-index to this section, never bleeding under the page). */
.pup-page-hero__rays {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: repeating-conic-gradient(
from -90deg at 50% 105%,
rgba(177, 125, 214, 0.45) 0deg 7deg,
transparent 7deg 15deg
);
-webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 105%,
#000 0%, #000 45%, transparent 78%);
mask-image: radial-gradient(ellipse 95% 95% at 50% 105%,
#000 0%, #000 45%, transparent 78%);
mix-blend-mode: screen;
opacity: 0.85;
transform-origin: 50% 105%;
}
@media (prefers-reduced-motion: no-preference) {
.pup-page-hero--dark .pup-page-hero__rays {
animation: pup-page-hero-ray-drift 60s linear infinite;
}
@keyframes pup-page-hero-ray-drift {
from { transform: rotate(-1deg); }
to { transform: rotate( 1deg); }
}
}
/* Lift the actual hero content above the brand slice + dot wash. */
.pup-page-hero--dark .pup-container {
position: relative;
z-index: 1;
}
/* The plumber now sits as a true background figure (z-index 0) BELOW
the lifted .pup-container (z-index 1), so the centered text always
reads cleanly on top. The drop shadow gets a richer falloff against
the navy gradient and a soft cyan back-bloom so he feels keyed into
the dark stage instead of pasted on. The slightly reduced opacity
blends him into the radial gradient. */
.pup-page-hero--dark .pup-page-hero__plumber {
mix-blend-mode: normal;
}
.pup-page-hero--dark .pup-page-hero__plumber img {
filter:
drop-shadow(0 24px 32px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 32px rgba(46, 196, 232, 0.22));
}
/* =========================================================================
Sections — about / services / service-areas / social-proof / process
========================================================================= */
/* about-overview */
.pup-about { background: var(--pup-white); }
.pup-about__grid { display: grid; gap: var(--space-7); align-items: center; }
.pup-about__grid > * { min-width: 0; }
.pup-about__copy { min-width: 0; }
@media (max-width: 599px) {
.pup-about__copy .pup-btn {
white-space: normal;
max-width: 100%;
text-align: center;
line-height: 1.2;
}
}
@media (min-width: 900px) { .pup-about__grid { grid-template-columns: 1fr 1.2fr; } }
.pup-about__photo img { border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.pup-about__diffs { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: grid; gap: var(--space-4); }
.pup-about__diff { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-3); align-items: start; }
.pup-about__diff-check {
width: 44px;
height: 44px;
display: block;
object-fit: contain;
/* Nudge down a hair so the pin's tip aligns with the title baseline. */
margin-top: 2px;
}
.pup-about__diff-title { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h5); color: var(--pup-purple-deep); margin-bottom: var(--space-1); }
/* services */
/* --- services as a tablist + active panel --- */
.pup-services__tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
margin: var(--space-6) 0 var(--space-6);
}
/* Sticker-pill tab: heavy navy stroke + beveled drop = brand signature.
Inactive = white sticker; active = cyan sticker that visibly pops. */
.pup-services__tab {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
min-height: 48px;
background: var(--pup-white);
color: var(--pup-navy);
border: 2px solid var(--pup-navy);
border-radius: var(--r-pill);
font-family: var(--font-heading);
font-weight: 700;
font-size: var(--fs-small);
letter-spacing: 0.01em;
line-height: 1.1;
cursor: pointer;
box-shadow: 0 3px 0 0 var(--pup-navy);
transition:
background var(--dur-ui) var(--ease-out),
color var(--dur-ui) var(--ease-out),
transform var(--dur-ui) var(--ease-out),
box-shadow var(--dur-ui) var(--ease-out);
}
.pup-services__tab:hover {
background: var(--pup-cloud);
color: var(--pup-navy);
transform: translateY(-2px);
box-shadow: 0 5px 0 0 var(--pup-navy);
}
.pup-services__tab:focus-visible {
outline: 3px solid var(--pup-cyan-accessible);
outline-offset: 3px;
}
.pup-services__tab:active {
transform: translateY(1px);
box-shadow: 0 1px 0 0 var(--pup-navy);
}
/* Active = cyan sticker, navy text & stroke, taller bevel. The little pip
below points to the panel like a real tab. */
.pup-services__tab.is-active {
background: var(--pup-cyan);
color: var(--pup-navy);
border-color: var(--pup-navy);
transform: translateY(-2px);
box-shadow:
0 5px 0 0 var(--pup-navy),
0 14px 24px rgba(46, 196, 232, 0.35);
}
.pup-services__tab.is-active::after {
content: "";
position: absolute;
left: 50%;
bottom: -10px;
width: 12px;
height: 12px;
background: var(--pup-cyan);
border-right: 2px solid var(--pup-navy);
border-bottom: 2px solid var(--pup-navy);
transform: translateX(-50%) rotate(45deg);
border-bottom-right-radius: 3px;
}
.pup-services__tab-icon {
display: inline-flex;
color: var(--pup-purple);
transition: color var(--dur-ui) var(--ease-out);
}
.pup-services__tab-icon svg { display: block; }
.pup-services__tab.is-active .pup-services__tab-icon { color: var(--pup-purple-deep); }
.pup-services__panels {
background: var(--pup-mist);
border: 1px solid rgba(31, 17, 71, 0.08);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.pup-services__panel {
display: grid;
grid-template-columns: 1fr;
gap: 0;
animation: pup-services-fade var(--dur-ui) var(--ease-out);
}
.pup-services__panel[hidden] { display: none; }
@media (min-width: 760px) {
.pup-services__panel { grid-template-columns: 5fr 7fr; }
}
.pup-services__panel:focus-visible {
outline: 2px solid var(--pup-cyan-accessible);
outline-offset: -2px;
}
.pup-services__panel-media {
background: var(--pup-cloud);
aspect-ratio: 4 / 3;
overflow: hidden;
display: grid;
place-items: center;
}
@media (min-width: 760px) {
.pup-services__panel-media { aspect-ratio: auto; min-height: 320px; }
}
.pup-services__panel-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pup-services__panel-placeholder {
display: grid;
place-items: center;
width: 100%;
height: 100%;
color: var(--pup-violet);
background:
radial-gradient(120% 80% at 30% 20%, rgba(108, 71, 255, 0.18), transparent 60%),
radial-gradient(120% 80% at 80% 90%, rgba(45, 212, 255, 0.18), transparent 60%),
var(--pup-cloud);
opacity: 0.95;
}
.pup-services__panel-placeholder svg { display: block; }
.pup-services__panel-body {
padding: var(--space-6);
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-3);
}
.pup-services__panel-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: var(--fs-h3);
color: var(--pup-purple-deep);
margin: 0;
}
.pup-services__panel-desc { margin: 0; color: var(--pup-ink-muted, var(--pup-purple-deep)); }
.pup-services__panel-cta { align-self: flex-start; margin-top: var(--space-2); }
@media (max-width: 599px) {
.pup-services__panel-cta { width: 100%; align-self: stretch; text-align: center; }
}
@keyframes pup-services-fade {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.pup-services__panel { animation: none; }
.pup-services__tab { transition: none; }
}
/* =========================================================================
Services on-dark variant - sunray + halftone backdrop, white text,
on-dark pill tabs, white panel card with image on the right.
Scoped under .pup-services--rays so the existing default styling stays
untouched for any other usage of the block.
========================================================================= */
.pup-services--rays {
position: relative;
overflow: hidden;
background: var(--pup-purple-deep);
color: var(--pup-white);
isolation: isolate; /* keep ray/halftone z-index local to this section */
}
.pup-services--rays > .pup-container { position: relative; z-index: 1; }
/* Sunburst rays - mirrors .pup-hero__rays recipe but anchored from the top
so the rays fan downward over the section. */
.pup-services__rays {
position: absolute; inset: 0; z-index: 0;
background: repeating-conic-gradient(
from -90deg at 50% -5%,
rgba(177, 125, 214, 0.32) 0deg 7deg,
transparent 7deg 15deg
);
-webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% -5%, #000 0%, #000 45%, transparent 78%);
mask-image: radial-gradient(ellipse 95% 95% at 50% -5%, #000 0%, #000 45%, transparent 78%);
mix-blend-mode: screen;
opacity: 0.85;
transform-origin: 50% -5%;
pointer-events: none;
}
/* Halftone dot overlay - same recipe as .pup-hero__halftone, lighter so
it reads as texture without competing with the white panel card. */
.pup-services__halftone {
position: absolute; inset: 0; z-index: 0;
background-image: radial-gradient(circle, rgba(46, 196, 232, 0.45) 1.2px, transparent 1.6px);
background-size: 10px 10px;
background-position: 0 0;
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%,
#000 0%, rgba(0,0,0,0.55) 35%, transparent 78%);
mask-image: radial-gradient(ellipse 90% 80% at 50% 0%,
#000 0%, rgba(0,0,0,0.55) 35%, transparent 78%);
opacity: 0.55;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.pup-services__rays { animation: pup-services-ray-drift 80s linear infinite; }
@keyframes pup-services-ray-drift {
from { transform: rotate(-1deg); }
to { transform: rotate( 1deg); }
}
}
/* Headings + eyebrow on dark */
.pup-services--rays .pup-eyebrow {
color: var(--pup-cyan);
}
.pup-services--rays .pup-section-title {
color: var(--pup-white);
}
.pup-services--rays .pup-section-subtitle {
color: rgba(255, 255, 255, 0.85);
opacity: 1;
}
/* Pill tabs on dark - sticker pills with heavy navy stroke + bevel.
Inactive tabs read as white sticker chips against the deep-purple
ray field; active tab swaps to brand cyan so selection is unmistakable. */
.pup-services--rays .pup-services__tab {
background: var(--pup-white);
color: var(--pup-navy);
border-color: var(--pup-navy);
box-shadow:
0 3px 0 0 var(--pup-navy),
0 0 0 4px rgba(177, 125, 214, 0.18);
}
.pup-services--rays .pup-services__tab:hover {
background: var(--pup-cloud);
color: var(--pup-navy);
border-color: var(--pup-navy);
box-shadow:
0 5px 0 0 var(--pup-navy),
0 0 0 4px rgba(46, 196, 232, 0.28);
}
.pup-services--rays .pup-services__tab:focus-visible {
outline: 3px solid var(--pup-cyan);
outline-offset: 3px;
}
.pup-services--rays .pup-services__tab.is-active {
background: var(--pup-cyan);
color: var(--pup-navy);
border-color: var(--pup-navy);
box-shadow:
0 5px 0 0 var(--pup-navy),
0 0 0 4px rgba(255, 255, 255, 0.18),
0 18px 28px rgba(46, 196, 232, 0.45);
}
.pup-services--rays .pup-services__tab.is-active::after {
background: var(--pup-cyan);
}
.pup-services--rays .pup-services__tab-icon { color: var(--pup-purple); }
.pup-services--rays .pup-services__tab.is-active .pup-services__tab-icon { color: var(--pup-purple-deep); }
/* White panel card pops off the dark backdrop */
.pup-services--rays .pup-services__panels {
background: var(--pup-white);
border: none;
border-radius: var(--r-lg);
box-shadow: 0 30px 60px rgba(15, 10, 30, 0.35);
max-width: 1100px;
margin-inline: auto;
}
/* Flip the panel so image is on the right (>=760px). Use grid order so
the source order keeps the heading first for screen readers. */
@media (min-width: 760px) {
.pup-services--rays .pup-services__panel {
grid-template-columns: 7fr 5fr;
}
.pup-services--rays .pup-services__panel-body { order: 1; }
.pup-services--rays .pup-services__panel-media { order: 2; }
}
/* Legacy grid styles kept for back-compat with older block markup. */
.pup-services__grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pup-services__card {
background: var(--pup-mist);
border: 1px solid rgba(31,17,71,0.08);
border-radius: var(--r-md);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
.pup-services__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.pup-services__img { aspect-ratio: 4 / 3; background: var(--pup-cloud); }
.pup-services__img img { width: 100%; height: 100%; object-fit: cover; }
.pup-services__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; }
.pup-services__icon { color: var(--pup-cyan-accessible); margin-bottom: var(--space-3); }
.pup-services__title { font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 600; color: var(--pup-purple-deep); margin-bottom: var(--space-2); }
.pup-services__desc { flex: 1; }
.pup-services__link { margin-top: var(--space-3); align-self: flex-start; color: var(--pup-violet); font-weight: 600; text-decoration: none; border-bottom: 2px solid currentColor; }
/* service-areas */
/* Two-column layout: map on the left, headline + city list + CTA on the right.
Stacks on narrow screens. */
.pup-service-areas__grid {
display: grid;
gap: var(--space-7);
align-items: stretch;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.pup-service-areas__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
.pup-service-areas__map-col { display: flex; min-width: 0; }
.pup-service-areas__map {
border-radius: var(--r-lg);
overflow: hidden;
/* Leaflet panes paint into their own stacking contexts and can
visually leak past `overflow:hidden` rounded corners on some
browsers — especially on narrow viewports. clip-path enforces
the rounded mask on every child layer so the corners no longer
look "chipped". */
clip-path: inset(0 round var(--r-lg));
background: var(--pup-cloud);
box-shadow: var(--shadow-card);
width: 100%;
max-width: 100%;
min-height: 320px;
aspect-ratio: 4 / 3;
/* Leaflet's internal panes/controls reach z-index 700-1000.
Confine them to a new stacking context so they can't render
on top of the sticky header (z-index: 100). */
position: relative;
z-index: 0;
isolation: isolate;
}
@media (min-width: 900px) {
/* Let the map stretch to match the right column's height; keep a sensible floor. */
.pup-service-areas__map { aspect-ratio: auto; min-height: 480px; }
}
.pup-service-areas__map .pup-map-canvas {
width: 100%;
height: 100%;
border-radius: inherit;
}
/* Branded pin marker - drop-shadow gives it lift over the OSM tiles. */
.pup-map-pin { filter: drop-shadow(0 4px 6px rgba(15, 10, 30, 0.35)); }
.pup-service-areas__content {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.pup-service-areas__title {
font-family: var(--font-heading);
font-size: var(--fs-h2);
color: var(--pup-purple-deep);
margin: 0;
}
.pup-service-areas__subtitle {
color: var(--pup-navy);
opacity: 0.85;
margin: 0;
}
/* 3-column city grid; collapses to 2 then 1 on smaller widths. */
.pup-service-areas__cities {
list-style: none;
padding: 0;
margin: var(--space-4) 0 var(--space-2);
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2) var(--space-4);
}
@media (min-width: 480px) { .pup-service-areas__cities { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .pup-service-areas__cities { grid-template-columns: 1fr 1fr 1fr; } }
.pup-service-areas__city {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--pup-purple-deep);
font-weight: 600;
font-size: var(--fs-body);
line-height: 1.3;
background: none;
padding: 0;
}
.pup-service-areas__pin {
flex: none;
width: 24px;
height: 24px;
display: block;
object-fit: contain;
}
.pup-service-areas__cta {
align-self: flex-start;
margin-top: var(--space-4);
}
/* social-proof
Reviews section: branded rating badges + testimonial cards on a soft
purple wash with a decorative blob, on-brand per design_spec.md §3-§6. */
.pup-social-proof {
background: linear-gradient(180deg, var(--pup-mist) 0%, #FBF7FF 100%);
overflow: hidden;
isolation: isolate;
}
.pup-social-proof__bg {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(60% 50% at 85% 0%, rgba(177, 125, 214, 0.18) 0%, transparent 60%),
radial-gradient(45% 40% at 10% 100%, rgba(46, 196, 232, 0.14) 0%, transparent 60%);
}
.pup-social-proof__head { text-align: center; margin-bottom: var(--space-7); }
.pup-social-proof__eyebrow { justify-content: center; }
/* Ratings — three branded "trust badges" */
.pup-social-proof__ratings {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
margin-bottom: var(--space-8);
max-width: 920px;
margin-inline: auto;
}
@media (min-width: 600px) { .pup-social-proof__ratings { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.pup-social-proof__rating {
background: var(--pup-white);
border: 1px solid rgba(91, 42, 140, 0.12);
border-radius: var(--r-lg, 20px);
padding: var(--space-6) var(--space-5) var(--space-5);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
text-align: center;
box-shadow: 0 6px 18px rgba(31, 17, 71, 0.08);
transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
position: relative;
overflow: hidden;
}
.pup-social-proof__rating::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 6px;
background: linear-gradient(90deg, var(--pup-purple) 0%, var(--pup-cyan) 100%);
}
.pup-social-proof__rating::after {
content: "";
position: absolute;
width: 140px;
height: 140px;
right: -50px;
bottom: -60px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(46, 196, 232, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.pup-social-proof__rating:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.pup-social-proof__stars {
display: inline-flex;
gap: 2px;
color: var(--pup-cyan);
line-height: 0;
filter: drop-shadow(0 1px 0 rgba(91, 42, 140, 0.15));
}
.pup-social-proof__score {
font-family: var(--font-display);
font-size: 2.75rem;
line-height: 1;
background: linear-gradient(135deg, var(--pup-purple) 0%, var(--pup-purple-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--pup-purple-deep);
letter-spacing: 0.01em;
margin-block: var(--space-1);
}
.pup-social-proof__score span {
font-size: 1rem;
color: var(--pup-navy);
-webkit-text-fill-color: var(--pup-navy);
opacity: 0.55;
font-family: var(--font-heading);
font-weight: 600;
margin-left: 2px;
}
.pup-social-proof__chip {
display: inline-flex;
align-items: center;
font-family: var(--font-heading);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: var(--fs-micro);
padding: 6px 12px;
border-radius: var(--r-pill);
background: var(--pup-mist);
color: var(--pup-purple-deep);
border: 1px solid rgba(91, 42, 140, 0.15);
}
.pup-social-proof__chip--google,
.pup-social-proof__chip--facebook,
.pup-social-proof__chip--yelp {
background: linear-gradient(135deg, rgba(91, 42, 140, 0.10) 0%, rgba(46, 196, 232, 0.10) 100%);
color: var(--pup-purple-deep);
border-color: rgba(91, 42, 140, 0.18);
}
.pup-social-proof__count {
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--fs-small);
color: var(--pup-navy);
opacity: 0.7;
}
/* Testimonial cards */
.pup-social-proof__testimonials {
display: grid;
gap: var(--space-5);
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pup-social-proof__quote {
position: relative;
margin: 0;
background: var(--pup-white);
border-radius: var(--r-md);
padding: var(--space-6);
padding-top: var(--space-7);
border: 1px solid rgba(31, 17, 71, 0.08);
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
.pup-social-proof__quote:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.pup-social-proof__quote-mark {
position: absolute;
top: -16px;
left: var(--space-5);
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--pup-purple);
color: var(--pup-white);
border-radius: 50%;
box-shadow: 0 6px 16px rgba(91, 42, 140, 0.35);
}
.pup-social-proof__quote-stars {
display: inline-flex;
gap: 2px;
color: var(--pup-cyan);
line-height: 0;
}
.pup-social-proof__quote blockquote { margin: 0; }
.pup-social-proof__quote blockquote p {
margin: 0;
font-family: var(--font-heading);
font-size: var(--fs-body-lg);
line-height: 1.5;
color: var(--pup-navy);
font-style: normal;
}
.pup-social-proof__author {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: auto;
padding-top: var(--space-3);
border-top: 1px dashed rgba(31, 17, 71, 0.12);
}
.pup-social-proof__avatar {
flex: 0 0 auto;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--pup-purple) 0%, var(--pup-violet) 100%);
color: var(--pup-white);
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.02em;
}
.pup-social-proof__author-meta { display: flex; flex-direction: column; line-height: 1.25; }
.pup-social-proof__author-name {
font-family: var(--font-heading);
font-weight: 700;
color: var(--pup-purple-deep);
font-size: 1rem;
}
.pup-social-proof__author-city {
font-family: var(--font-body);
font-size: var(--fs-small);
color: var(--pup-navy);
opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
.pup-social-proof__rating,
.pup-social-proof__quote { transition: none; }
.pup-social-proof__rating:hover,
.pup-social-proof__quote:hover { transform: none; }
}
/* process */
.pup-process { background: var(--pup-mist); }
.pup-process__eyebrow { justify-content: center; display: flex; }
.pup-process__heading {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--pup-purple-deep);
margin-bottom: var(--space-3);
}
.pup-process__steps {
display: grid;
gap: var(--space-6) var(--space-5);
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
list-style: none;
padding: 0;
margin: 0;
}
.pup-process__step {
display: flex;
flex-direction: column;
position: relative;
padding-top: 12px;
}
.pup-process__header {
position: relative;
height: 56px;
margin-left: 28px;
margin-right: 4px;
margin-bottom: -8px;
z-index: 2;
display: flex;
align-items: stretch;
}
.pup-process__chevron {
flex: 1;
background: var(--pup-purple);
color: var(--pup-white);
display: flex;
align-items: center;
padding: 0 32px 0 60px;
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 1.125rem;
line-height: 1;
clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
}
.pup-process__step-label { white-space: nowrap; }
.pup-process__badge {
position: absolute;
left: -28px;
top: 50%;
transform: translateY(-50%);
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--pup-cyan);
color: var(--pup-navy);
border: 3px solid var(--pup-white);
box-shadow: var(--shadow-card);
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 3;
}
.pup-process__badge svg { display: block; }
.pup-process__card {
background: var(--pup-white);
border: 1px solid rgba(31, 17, 71, 0.08);
border-radius: var(--r-md);
padding: calc(var(--space-6) + 8px) var(--space-5) var(--space-5);
box-shadow: var(--shadow-card);
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
.pup-process__step:hover .pup-process__card {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.pup-process__title {
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--fs-h4);
color: var(--pup-purple-deep);
margin: 0 0 var(--space-3);
}
.pup-process__body {
color: var(--pup-navy);
margin: 0 auto var(--space-5);
max-width: 36ch;
flex: 1;
}
.pup-process__cta { align-self: center; }
@media (prefers-reduced-motion: reduce) {
.pup-process__step:hover .pup-process__card { transform: none; }
}
/* local-faq */
.pup-local-faq { background: var(--pup-sky); }
.pup-local-faq__list { max-width: 800px; margin: 0 auto; }
.pup-local-faq__item {
background: var(--pup-white);
border: 1px solid rgba(31,17,71,0.08);
border-radius: var(--r-md);
margin-bottom: var(--space-3);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.pup-local-faq__q {
list-style: none;
padding: var(--space-4) var(--space-5);
font-family: var(--font-heading);
font-weight: 600;
color: var(--pup-purple-deep);
cursor: pointer;
font-size: var(--fs-h5);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
}
.pup-local-faq__q::-webkit-details-marker { display: none; }
.pup-local-faq__q::after { content: "+"; font-family: var(--font-display); font-size: 1.5rem; color: var(--pup-cyan-accessible); transition: transform var(--dur-ui) var(--ease-out); }
.pup-local-faq__item[open] .pup-local-faq__q::after { transform: rotate(45deg); }
.pup-local-faq__a { padding: 0 var(--space-5) var(--space-5); }
/* final-cta
Sits just above the navy footer. A vertical linear gradient guarantees
the entire bottom edge resolves to --pup-navy (matching .pup-footer's
solid navy) so the two sections blend with no horizontal seam.
Sunburst rays fan UP from the bottom edge but are masked away from the
final ~18% so they don't pile up a bright spot right on the seam. */
.pup-final-cta {
position: relative;
overflow: hidden;
isolation: isolate;
color: var(--pup-white);
text-align: center;
padding-block: var(--section-y) calc(var(--section-y) + var(--space-6));
margin-bottom: 0;
background: linear-gradient(
180deg,
var(--pup-purple) 0%,
var(--pup-purple-deep) 55%,
var(--pup-navy) 100%
);
}
.pup-final-cta__rays {
position: absolute; inset: 0; z-index: -2;
pointer-events: none;
background: repeating-conic-gradient(
from -90deg at 50% 110%,
rgba(177, 125, 214, 0.42) 0deg 7deg,
transparent 7deg 15deg
);
-webkit-mask-image:
radial-gradient(ellipse 95% 95% at 50% 110%, #000 0%, #000 38%, transparent 72%),
linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
radial-gradient(ellipse 95% 95% at 50% 110%, #000 0%, #000 38%, transparent 72%),
linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
mask-composite: intersect;
mix-blend-mode: screen;
opacity: 0.8;
transform-origin: 50% 110%;
}
.pup-final-cta__halftone {
position: absolute; inset: 0; z-index: -1;
pointer-events: none;
background-image: radial-gradient(circle, rgba(46, 196, 232, 0.40) 1.2px, transparent 1.6px);
background-size: 10px 10px;
-webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 70%, #000 0%, rgba(0,0,0,0.55) 35%, transparent 80%);
mask-image: radial-gradient(ellipse 90% 70% at 50% 70%, #000 0%, rgba(0,0,0,0.55) 35%, transparent 80%);
opacity: 0.55;
}
.pup-final-cta__inner { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
.pup-final-cta__rays { animation: pup-final-cta-ray-drift 70s linear infinite; }
@keyframes pup-final-cta-ray-drift {
from { transform: rotate(-1deg); }
to { transform: rotate( 1deg); }
}
}
.pup-final-cta__eyebrow { justify-content: center; color: var(--pup-cyan); }
.pup-final-cta__headline {
color: var(--pup-white);
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: clamp(2rem, 4.5vw, 3.052rem);
margin-bottom: var(--space-4);
}
.pup-final-cta__body {
color: var(--pup-cloud);
max-width: 56ch;
margin: 0 auto var(--space-6);
font-size: var(--fs-body-lg);
}
.pup-final-cta__ctas { display: inline-flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.pup-final-cta__ctas .pup-btn svg { transition: transform var(--dur-micro) var(--ease-out); }
.pup-final-cta__ctas .pup-btn:hover svg { transform: translateX(3px); }
/* Make sure the footer sits flush with the CTA - same navy, no border, no gap. */
.pup-final-cta + .pup-footer,
.pup-final-cta + * .pup-footer,
.wp-block-template-part:has(> .pup-footer) { margin-top: 0; }
.pup-final-cta + footer.wp-block-template-part { margin-top: 0; }
/* =========================================================================
Contact
========================================================================= */
/* Promise strip — three sticker cards above the form/info grid. The
navy outline + drop-shadow echoes the .pup-btn bevel/halo recipe so
the cards read as part of the brand "sticker" family. */
.pup-contact__promises {
list-style: none;
margin: 0 0 var(--space-7);
padding: 0;
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.pup-contact__promises { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}
.pup-contact__promise {
display: flex;
align-items: flex-start;
gap: var(--space-4);
background: var(--pup-white);
border: 2px solid var(--pup-navy);
border-radius: var(--r-md);
padding: var(--space-5);
box-shadow: 0 4px 0 0 var(--pup-navy);
}
.pup-contact__promise-icon {
flex: 0 0 48px;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-sm);
background: var(--pup-cyan);
color: var(--pup-navy);
border: 2px solid var(--pup-navy);
}
.pup-contact__promise-icon svg { display: block; }
.pup-contact__promise-title {
font-family: var(--font-heading);
font-size: 1.125rem;
color: var(--pup-purple-deep);
margin: 0 0 var(--space-1);
line-height: var(--lh-snug);
}
.pup-contact__promise-body {
margin: 0;
font-size: var(--fs-small);
color: var(--pup-navy);
line-height: 1.5;
opacity: 0.9;
}
/* Form + info grid */
.pup-contact__grid { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 900px) {
.pup-contact__grid { grid-template-columns: 1.1fr 1fr; }
/* Row height follows the form when it is taller; stretch the right
column to match, without stretching the form card. */
.pup-contact__form { align-self: start; }
.pup-contact__sidebar { align-self: stretch; }
/* Van on top, contact card below. Hidden on small screens — see
max-width rule. */
.pup-contact__vehicle { order: -1; }
}
/* Right column: info card + van; single grid cell, not a third row. */
.pup-contact__sidebar {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-5);
min-width: 0;
height: 100%;
}
.pup-contact__vehicle {
--van-bob: 2px;
--van-body-lift: 12px;
position: relative;
width: 100%;
max-width: 430px;
aspect-ratio: 2619 / 975;
margin: 0;
align-self: center;
pointer-events: none;
filter: drop-shadow(0 16px 24px rgba(15, 10, 30, 0.4));
}
.pup-contact__van {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
transform: translateY(calc(-1 * var(--van-body-lift)));
}
.pup-contact__wheel {
position: absolute;
z-index: 0;
width: 12.5%;
aspect-ratio: 1 / 1;
height: auto;
transform-origin: 50% 50%;
will-change: transform;
}
.pup-contact__wheel--front { left: 7.25%; bottom: 0; }
.pup-contact__wheel--rear { left: 72.45%; bottom: 0; }
.pup-contact__vehicle[data-spin="on"] .pup-contact__wheel {
animation: pup-wheel-spin 1.4s linear infinite;
}
.pup-contact__vehicle[data-spin="on"] .pup-contact__van {
animation: pup-van-bob 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.pup-contact__wheel,
.pup-contact__van { animation: none !important; }
}
@media (max-width: 899.98px) {
.pup-contact__vehicle { display: none; }
}
/* Form card — beveled white surface, navy halo, accessible focus. */
.pup-contact__form {
background: var(--pup-white);
border-radius: var(--r-lg);
padding: var(--space-6);
box-shadow: var(--shadow-card), 0 4px 0 0 rgba(31,17,71,0.12);
border: 2px solid var(--pup-navy);
}
.pup-contact__form-heading {
font-family: var(--font-heading);
color: var(--pup-purple-deep);
margin: 0 0 var(--space-2);
font-size: var(--fs-h4);
}
.pup-contact__required-key {
margin: 0 0 var(--space-5);
font-size: var(--fs-small);
color: var(--pup-navy);
opacity: 0.75;
}
.pup-contact__required {
color: var(--pup-cyan-accessible);
font-weight: 700;
margin-left: 2px;
}
.pup-contact__field { margin-bottom: var(--space-4); }
.pup-contact__field label {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: 600;
font-size: var(--fs-small);
color: var(--pup-navy);
margin-bottom: var(--space-2);
}
.pup-contact__field-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
border-radius: 999px;
background: var(--pup-mist);
color: var(--pup-purple);
}
.pup-contact__field-icon svg { display: block; }
.pup-contact__form input,
.pup-contact__form textarea {
width: 100%; min-height: 48px; font-size: 1rem;
padding: var(--space-3) var(--space-4);
border: 1px solid rgba(31,17,71,0.22);
border-radius: var(--r-sm);
font-family: inherit;
background: var(--pup-white);
color: var(--pup-navy);
transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.pup-contact__form textarea { min-height: 128px; resize: vertical; }
.pup-contact__form input:hover,
.pup-contact__form textarea:hover { border-color: rgba(31,17,71,0.45); }
.pup-contact__form input:focus-visible,
.pup-contact__form textarea:focus-visible {
outline: none;
border-color: var(--pup-cyan-accessible);
box-shadow: var(--shadow-focus);
}
.pup-contact__field-help {
display: block;
margin-top: var(--space-1);
font-size: var(--fs-small);
color: var(--pup-navy);
opacity: 0.7;
line-height: 1.4;
}
.pup-contact__form-actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-5);
}
.pup-contact__form-actions .pup-btn {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
gap: var(--space-2);
}
.pup-contact__form-footnote {
margin: var(--space-4) 0 0;
font-size: var(--fs-small);
color: var(--pup-navy);
opacity: 0.75;
line-height: 1.5;
}
.pup-contact__status {
margin-top: var(--space-4);
}
.pup-contact__status:not(:empty) {
padding: var(--space-3) var(--space-4);
border-radius: var(--r-sm);
background: var(--pup-mist);
border: 1px solid var(--pup-navy);
color: var(--pup-navy);
font-size: var(--fs-small);
}
/* Info aside — call-first, mascot-anchored deep purple panel. */
.pup-contact__info {
position: relative;
isolation: isolate;
overflow: hidden;
background: radial-gradient(120% 90% at 0% 0%, var(--pup-purple) 0%, var(--pup-purple-deep) 70%);
color: var(--pup-white);
border-radius: var(--r-lg);
padding: var(--space-6);
border: 2px solid var(--pup-navy);
box-shadow: var(--shadow-card), 0 4px 0 0 rgba(31,17,71,0.18);
}
.pup-contact__info::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: repeating-conic-gradient(
from -90deg at 50% 105%,
rgba(177, 125, 214, 0.46) 0deg 7deg,
transparent 7deg 15deg
);
-webkit-mask-image: radial-gradient(ellipse 96% 94% at 50% 105%,
#000 0%, #000 42%, transparent 78%);
mask-image: radial-gradient(ellipse 96% 94% at 50% 105%,
#000 0%, #000 42%, transparent 78%);
mix-blend-mode: screen;
opacity: 0.85;
transform-origin: 50% 105%;
}
.pup-contact__info::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image: radial-gradient(circle, rgba(46, 196, 232, 0.52) 1.15px, transparent 1.55px);
background-size: 9px 9px;
background-position: 0 0;
-webkit-mask-image: radial-gradient(ellipse 92% 84% at 50% 100%,
#000 0%, rgba(0,0,0,0.58) 35%, transparent 74%);
mask-image: radial-gradient(ellipse 92% 84% at 50% 100%,
#000 0%, rgba(0,0,0,0.58) 35%, transparent 74%);
opacity: 0.56;
}
@media (prefers-reduced-motion: no-preference) {
.pup-contact__info::before {
animation: pup-contact-info-ray-drift 70s linear infinite;
}
@keyframes pup-contact-info-ray-drift {
from { transform: rotate(-1deg); }
to { transform: rotate( 1deg); }
}
}
.pup-contact__info > * { position: relative; z-index: 2; }
.pup-contact__info h3,
.pup-contact__info h4 { color: var(--pup-white); }
.pup-contact__info a:not(.pup-btn) { color: var(--pup-cyan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pup-contact__info a:not(.pup-btn):hover { color: var(--pup-white); }
/* Defensive overrides — keep filled buttons brand-correct even when nested
inside the info aside (which globally recolors links cyan). */
.pup-contact__info .pup-btn--secondary,
.pup-contact__info .pup-btn--secondary:hover { color: var(--pup-navy); }
.pup-contact__info .pup-btn--primary,
.pup-contact__info .pup-btn--primary:hover,
.pup-contact__info .pup-btn--dark,
.pup-contact__info .pup-btn--dark:hover { color: var(--pup-white); }
.pup-contact__mascot {
position: absolute;
top: var(--space-3);
right: var(--space-3);
width: clamp(96px, 16vw, 132px);
height: auto;
z-index: 3;
pointer-events: none;
user-select: none;
transform: rotate(8deg);
filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
}
@media (prefers-reduced-motion: no-preference) {
.pup-contact__mascot {
animation: pup-contact-mascot-wag 4s ease-in-out infinite;
transform-origin: 50% 90%;
}
@keyframes pup-contact-mascot-wag {
0%, 100% { transform: rotate(8deg); }
50% { transform: rotate(-2deg); }
}
}
.pup-contact__emergency-pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-4);
padding: 6px 14px;
background: var(--pup-cyan);
color: var(--pup-navy);
border: 2px solid var(--pup-navy);
border-radius: var(--r-pill);
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: var(--fs-small);
box-shadow: 0 3px 0 0 var(--pup-navy);
}
.pup-contact__emergency-pill svg {
display: block;
flex: 0 0 18px;
width: 18px;
height: 18px;
}
.pup-contact__info-heading {
font-family: var(--font-heading);
font-size: var(--fs-h4);
margin: var(--space-2) 0 var(--space-4);
max-width: calc(100% - 140px); /* clear the mascot peek */
}
.pup-contact__quick-call {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: 100%;
box-sizing: border-box;
margin-bottom: var(--space-5);
text-align: center;
color: var(--pup-navy);
white-space: normal;
overflow-wrap: anywhere;
}
.pup-contact__quick-call svg { display: block; color: var(--pup-navy); }
.pup-contact__info-list {
list-style: none;
margin: 0 0 var(--space-5);
padding: 0;
display: grid;
gap: var(--space-3);
}
.pup-contact__info-list li {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--fs-body);
line-height: 1.4;
}
.pup-contact__info-icon {
flex: 0 0 32px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(255,255,255,0.10);
color: var(--pup-cyan);
}
.pup-contact__info-icon svg { display: block; }
.pup-contact__hours {
margin: 0 0 var(--space-5);
padding: var(--space-4) var(--space-4) var(--space-3);
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--r-md);
}
.pup-contact__hours-heading {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-2);
font-family: var(--font-heading);
font-size: 1.125rem;
}
.pup-contact__hours-heading .pup-contact__info-icon { background: var(--pup-cyan); color: var(--pup-navy); }
.pup-contact__hours-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-1);
font-size: var(--fs-small);
color: var(--pup-cloud);
}
.pup-contact__info-note {
margin: var(--space-5) 0 0;
padding-top: var(--space-4);
border-top: 1px solid rgba(255,255,255,0.12);
color: var(--pup-cloud);
font-size: var(--fs-small);
line-height: 1.5;
}
/* Contact info card — small screens: centered badge + heading, no clipped rows */
@media (max-width: 899.98px) {
.pup-contact__emergency-pill {
display: flex;
width: 100%;
box-sizing: border-box;
justify-content: center;
text-align: center;
}
.pup-contact__info-heading {
text-align: center;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.pup-contact__info-list li {
align-items: flex-start;
}
.pup-contact__info-list li > a,
.pup-contact__info-list li > span:not(.pup-contact__info-icon) {
min-width: 0;
flex: 1 1 auto;
overflow-wrap: anywhere;
word-break: break-word;
}
}
/* Extra-narrow (e.g. 360×800) — a bit more horizontal room, tighter type */
@media (max-width: 400px) {
.pup-contact__info {
padding: var(--space-5) var(--space-4);
}
.pup-contact__emergency-pill {
font-size: 0.75rem;
padding: 6px 10px;
letter-spacing: 0.04em;
}
.pup-contact__info-list {
gap: var(--space-2);
}
.pup-contact__info-list li {
gap: var(--space-2);
font-size: 0.9375rem;
line-height: 1.45;
}
.pup-contact__info-icon {
flex: 0 0 28px;
width: 28px;
height: 28px;
}
.pup-contact__info-list .pup-contact__info-icon svg {
width: 18px;
height: 18px;
}
}
/* =========================================================================
Footer
========================================================================= */
/* Footer
Solid navy base that matches the bottom of .pup-final-cta. A halftone
dot pattern continues the CTA's texture (fades from top), and a soft
purple/cyan glow near the top picks up where the sunburst rays leave
off so the seam between the two sections reads as a designed transition
rather than an edge. The container content always sits above (z:1). */
.pup-footer {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--pup-navy);
color: var(--pup-white);
padding-block: var(--space-8) var(--space-6);
margin-top: 0;
}
.pup-footer::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(60% 40% at 50% 0%, rgba(110, 63, 166, 0.55) 0%, transparent 70%),
radial-gradient(40% 30% at 15% 100%, rgba(46, 196, 232, 0.10) 0%, transparent 70%),
radial-gradient(40% 30% at 85% 100%, rgba(110, 63, 166, 0.18) 0%, transparent 70%);
}
.pup-footer::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.4px);
background-size: 12px 12px;
-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 60%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 60%, transparent 100%);
opacity: 0.7;
}
.pup-footer > * { position: relative; z-index: 1; }
.pup-footer a { color: var(--pup-cloud); text-decoration: none; }
.pup-footer a:hover { color: var(--pup-cyan); }
.pup-footer__grid {
display: grid;
gap: var(--space-7);
grid-template-columns: 1.4fr repeat(3, 1fr);
align-items: start;
margin-bottom: var(--space-7);
}
@media (max-width: 960px) {
.pup-footer__grid { grid-template-columns: 1fr 1fr; }
.pup-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
.pup-footer__grid { grid-template-columns: 1fr; }
.pup-footer__brand { align-items: center; max-width: 100%; }
.pup-footer__logo img { margin-inline: auto; }
.pup-footer__tagline { text-align: center; }
}
.pup-footer__brand { display: flex; flex-direction: column; gap: var(--space-4); max-width: 320px; }
.pup-footer__logo img { max-width: 220px; margin: 0; display: block; }
.pup-footer__tagline { color: var(--pup-cloud); margin: 0; line-height: var(--lh-snug, 1.35); }
.pup-footer__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.pup-footer__contact li {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--pup-cloud);
font-size: var(--fs-small);
line-height: 1.2;
}
.pup-footer__contact a { color: var(--pup-cloud); }
.pup-footer__contact a:hover { color: var(--pup-cyan); }
.pup-footer__contact-icon {
flex: 0 0 32px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: var(--pup-cyan);
}
.pup-footer__contact-icon .pup-icon { display: block; }
.pup-footer__col h5 { color: var(--pup-white); margin: 0 0 var(--space-3); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em; }
.pup-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.pup-footer__col li { font-size: var(--fs-small); }
.pup-footer__legal { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-small); color: var(--pup-cloud); }
.pup-footer__legal p { margin: 0; }
/* =========================================================================
404 / not-found
========================================================================= */
/* =========================================================================
404 — full-screen brand stage with sunrays, halftone, logo, and giant
404 number. Mirrors the hero's dark purple treatment so the error page
feels like a deliberate design moment rather than a dead end.
========================================================================= */
.pup-not-found {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
background: var(--pup-navy);
color: var(--pup-white);
}
/* Sunburst rays — conic gradient from the bottom-centre, identical
recipe to .pup-hero__rays so the brand stage reads as siblings. */
.pup-not-found__rays {
position: absolute; inset: 0; z-index: 0;
background: repeating-conic-gradient(
from 0deg at 50% 50%,
rgba(177, 125, 214, 0.45) 0deg 7deg,
transparent 7deg 15deg
);
-webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 0%, #000 35%, transparent 78%);
mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 0%, #000 35%, transparent 78%);
mix-blend-mode: screen;
opacity: 0.85;
transform-origin: 50% 50%;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.pup-not-found__rays { animation: pup-ray-drift 60s linear infinite; }
}
/* Cyan halftone dot wash — identical to .pup-hero__halftone. */
.pup-not-found__halftone {
position: absolute; inset: 0; z-index: 0;
background-image: radial-gradient(circle, rgba(46, 196, 232, 0.55) 1.2px, transparent 1.6px);
background-size: 9px 9px;
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%,
#000 0%, rgba(0,0,0,0.55) 35%, transparent 75%);
mask-image: radial-gradient(ellipse 80% 70% at 50% 50%,
#000 0%, rgba(0,0,0,0.55) 35%, transparent 75%);
opacity: 0.6;
pointer-events: none;
}
/* Content stack */
.pup-not-found__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-4);
padding: clamp(60px, 10vw, 120px) var(--gutter-mobile);
max-width: 640px;
width: 100%;
}
/* Logo */
.pup-not-found__logo { display: inline-block; }
.pup-not-found__logo img {
max-width: 180px;
width: 100%;
height: auto;
filter: drop-shadow(0 2px 16px rgba(0,0,0,0.4));
}
/* Giant "404" — display font in cyan, behind the headline */
.pup-not-found__code {
font-family: var(--font-display);
font-size: clamp(7rem, 22vw, 16rem);
line-height: 0.85;
color: var(--pup-cyan);
text-shadow:
0 0 60px rgba(46, 196, 232, 0.4),
0 4px 0 var(--pup-navy);
letter-spacing: -0.02em;
margin: 0;
pointer-events: none;
user-select: none;
}
/* Headline */
.pup-not-found__headline {
font-family: var(--font-display);
font-size: clamp(1.25rem, 3.5vw, 2rem);
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--pup-white);
line-height: 1.1;
margin: 0;
}
/* Body */
.pup-not-found__body {
font-size: var(--fs-body-lg);
color: rgba(255,255,255,0.8);
max-width: 48ch;
margin: 0;
line-height: 1.6;
}
/* =========================================================================
Service detail list (pup/service-detail-list)
In-depth, alternating image/copy rundown used on the Services page.
Reuses brand tokens — no new color values introduced. The navy 2px
stroke on the media reproduces the lockup's "outline rule" so the
rows sit visually beside the mascot/header without feeling foreign.
========================================================================= */
.pup-service-list-section { background: var(--pup-white); }
/* Sticker-pill jump nav. Mirrors .pup-services__tab so the visual
language is shared, but smaller and never "active". */
.pup-service-list__nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2);
margin: var(--space-6) auto var(--space-8);
max-width: 960px;
}
.pup-service-list__nav-pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 10px 18px;
min-height: 40px;
background: var(--pup-white);
color: var(--pup-navy);
border: 2px solid var(--pup-navy);
border-radius: var(--r-pill);
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--fs-small);
line-height: 1.1;
text-decoration: none;
box-shadow: 0 3px 0 0 var(--pup-navy);
transition:
transform var(--dur-micro) var(--ease-out),
box-shadow var(--dur-micro) var(--ease-out),
background-color var(--dur-micro) var(--ease-out),
color var(--dur-micro) var(--ease-out);
}
.pup-service-list__nav-pill:hover {
background: var(--pup-cyan);
color: var(--pup-navy);
transform: translateY(-1px);
box-shadow: 0 4px 0 0 var(--pup-navy);
}
.pup-service-list__nav-pill:active {
transform: translateY(1px);
box-shadow: 0 1px 0 0 var(--pup-navy);
}
.pup-service-list__nav-pill:focus-visible {
outline: 3px solid var(--pup-cyan-accessible);
outline-offset: 3px;
}
.pup-service-list__nav-icon { display: inline-flex; color: currentColor; }
.pup-service-list__nav-icon svg { display: block; }
/* The stack of service rows itself.
`min-width: 0` is set on EVERY grid/flex layer in this component so an
unbreakable child (e.g. a long uppercase button label like
"BOOK A LEAK INSPECTION") cannot push its grid track wider than the
viewport. Without this guard, grid/flex items default to
`min-width: auto` = the item's intrinsic min-content, which on
single-column mobile layouts cascades all the way up to the
`.pup-container` and forces horizontal page overflow. */
.pup-service-list {
list-style: none;
margin: var(--space-6) 0 0;
padding: 0;
display: grid;
gap: clamp(48px, 8vw, 96px);
counter-reset: pup-service-list;
min-width: 0;
}
.pup-service-list__row {
display: grid;
gap: var(--space-6);
align-items: center;
scroll-margin-top: 96px; /* clear sticky header on anchor jumps */
counter-increment: pup-service-list;
min-width: 0;
}
/* Every direct child of a row/body/cta container also needs to be
shrinkable so its `min-width: auto` content doesn't widen the track. */
.pup-service-list__media,
.pup-service-list__bullets,
.pup-service-list__bullet,
.pup-service-list__ctas,
.pup-service-list__cta,
.pup-service-list__desc { min-width: 0; }
@media (min-width: 900px) {
.pup-service-list__row { grid-template-columns: 1fr 1.1fr; gap: var(--space-8); }
.pup-service-list__row--alt .pup-service-list__media { order: 2; }
.pup-service-list__row--alt .pup-service-list__body { order: 1; }
}
.pup-service-list__media {
position: relative;
border-radius: var(--r-lg);
overflow: visible;
}
.pup-service-list__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--r-lg);
border: 2px solid var(--pup-navy);
box-shadow: var(--shadow-card);
}
.pup-service-list__media-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 4 / 3;
background: var(--pup-sky);
color: var(--pup-purple-deep);
border-radius: var(--r-lg);
border: 2px solid var(--pup-navy);
box-shadow: var(--shadow-card);
}
.pup-service-list__media-placeholder svg { display: block; }
/* Cyan numbered "step" sticker tucked over the image corner — echoes
the process step badge and gives each row a quick visual index. */
.pup-service-list__step {
position: absolute;
top: -18px;
left: -14px;
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--pup-cyan);
color: var(--pup-navy);
border: 2px solid var(--pup-navy);
border-radius: 999px;
box-shadow: 0 3px 0 0 var(--pup-navy);
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: 0.02em;
line-height: 1;
z-index: 1;
}
@media (min-width: 900px) {
.pup-service-list__row--alt .pup-service-list__step { left: auto; right: -14px; }
}
.pup-service-list__body {
display: grid;
gap: var(--space-4);
min-width: 0; /* allow grid track to shrink so long titles wrap */
}
.pup-service-list__head {
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0; /* allow flex parent to shrink in narrow grid track */
}
.pup-service-list__icon {
flex: 0 0 56px;
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--pup-cyan);
color: var(--pup-navy);
border: 2px solid var(--pup-navy);
border-radius: var(--r-md);
box-shadow: 0 3px 0 0 var(--pup-navy);
}
.pup-service-list__icon svg { display: block; }
.pup-service-list__title {
margin: 0;
min-width: 0; /* lets the flex/grid parent constrain width so text wraps */
overflow-wrap: anywhere; /* break very long words instead of overflowing */
}
.pup-service-list__desc {
margin: 0;
color: var(--pup-navy);
max-width: 60ch;
min-width: 0;
overflow-wrap: anywhere;
}
/* Bullet "what's included" list. Cyan-accessible check icons keep the
bullets readable on light surfaces (5.38:1 on white). */
.pup-service-list__bullets {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--space-2);
}
.pup-service-list__bullet {
display: grid;
grid-template-columns: 28px 1fr;
gap: var(--space-3);
align-items: start;
color: var(--pup-navy);
line-height: 1.5;
}
.pup-service-list__bullet-icon {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--pup-mist);
color: var(--pup-cyan-accessible);
border-radius: 999px;
margin-top: 2px;
flex-shrink: 0;
}
.pup-service-list__bullet-icon svg { display: block; }
.pup-service-list__bullet-icon--pin {
background: none;
border-radius: 0;
}
.pup-service-list__bullet-icon--pin img {
width: 28px;
height: 28px;
object-fit: contain;
display: block;
}
.pup-service-list__ctas {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-2);
}
/* Subtle alternating wash on the mobile stacked view so consecutive
rows don't run together. Skipped on desktop where the alternating
layout already does the work. */
@media (max-width: 899px) {
.pup-service-list__row + .pup-service-list__row {
border-top: 1px solid rgba(31, 17, 71, 0.08);
padding-top: var(--space-7);
}
.pup-service-list__step { top: -16px; left: -10px; width: 48px; height: 48px; font-size: 1.25rem; }
/* Tighten body and bullet spacing on tablets */
.pup-service-list__body { gap: var(--space-3); }
.pup-service-list__bullets { gap: var(--space-2); }
}
/* ─── Small-screen mobile (≤ 599 px / iPhone SE → iPhone 14 Pro) ───────────
At 375 px the 6 jump-nav pills in wrapped layout stack to ~300 px alone,
and each service row is ~700 px when the 4/3 image + long copy are
stacked. These rules reclaim that vertical space without hiding content. */
@media (max-width: 599px) {
/* 1. Jump nav → vertical stack on mobile.
Each pill takes the full row width so labels never truncate and the
tap targets are easier to thumb-hit. */
.pup-service-list__nav {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
gap: var(--space-2);
margin-block: var(--space-5) var(--space-6);
}
.pup-service-list__nav-pill {
width: 100%;
justify-content: center;
text-align: center;
}
/* 2. Tighter between-row gap and border separator */
.pup-service-list { gap: clamp(24px, 8vw, 40px); }
.pup-service-list__row + .pup-service-list__row { padding-top: var(--space-5); }
/* 3. Tighter body copy stack */
.pup-service-list__body { gap: var(--space-3); }
.pup-service-list__bullets { gap: var(--space-1); }
/* 4. Image: 5/2 banner ratio (130 px at 327 px wide vs 245 px at 4/3)
— saves ~115 px per row × 6 rows = ~690 px total */
.pup-service-list__media img,
.pup-service-list__media-placeholder { aspect-ratio: 5 / 2; }
/* 5. Step sticker: shrink and pull in so it never clips the viewport edge */
.pup-service-list__step {
top: -12px;
left: -8px;
width: 40px;
height: 40px;
font-size: 1.05rem;
}
/* 6. Icon badge: 40 px still meets WCAG 2.5.5 touch-target guidance */
.pup-service-list__icon {
flex: 0 0 40px;
width: 40px;
height: 40px;
}
/* 7. Title: clamp the font so longer titles like
"Fixture install & replace" wrap into 2 lines instead of
overflowing the column at the default 31 px Moderniz size. */
.pup-service-list__title {
font-size: clamp(1.25rem, 5.5vw, 1.5rem);
line-height: 1.15;
}
/* 8. CTAs: stacked full-width for easy tap.
Override the global `.pup-btn { white-space: nowrap }` so long
uppercase labels like "BOOK A LEAK INSPECTION" are allowed to
wrap onto two lines on narrow phones instead of forcing the
button (and its grid ancestors) to ~432 px and overflowing the
390 px viewport horizontally. */
.pup-service-list__ctas { flex-direction: column; min-width: 0; }
.pup-service-list__ctas .pup-btn {
width: 100%;
min-width: 0;
justify-content: center;
white-space: normal;
text-align: center;
line-height: 1.15;
padding-inline: var(--space-4);
}
}
@media (prefers-reduced-motion: reduce) {
.pup-service-list__nav-pill { transition: none; }
}
/* =========================================================================
Sticky mobile CALL smartbar
=========================================================================
Reveals after the user scrolls past the hero on mobile (≤720px). Markup
lives at the end of the header block, so it ships site-wide without
per-template wiring. Uses the same brand sticker chrome as the leadbar
(purple-deep panel + 2px navy top border + inset white halo) so it
reads as part of the same family. The CTA inside is a cyan secondary
sticker pill with a phone icon — cyan + navy = 8.28:1 (AAA).
Hidden by default on desktop (display:none) and only enabled at
≤720px. JS adds .is-visible to slide it in / removes it to slide out;
while present, body.pup-has-smartbar reserves bottom padding so the
footer's last line is never trapped behind the bar. iOS safe-area
inset is honored so the bar doesn't sit on the home indicator. */
.pup-smartbar {
display: none;
}
@media (max-width: 720px) {
:root { --pup-smartbar-h: 76px; }
.pup-smartbar {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
padding: var(--space-3) var(--space-4);
padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
background: linear-gradient(
180deg,
var(--pup-purple) 0%,
var(--pup-purple-deep) 100%
);
border-top: 2px solid var(--pup-navy);
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
0 -8px 24px rgba(15, 10, 30, 0.35);
transform: translateY(100%);
opacity: 0;
transition:
transform 240ms var(--ease-out),
opacity 240ms var(--ease-out);
pointer-events: none;
}
.pup-smartbar.is-visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
/* Slide the bar out of the way while the mobile drawer + scrim are
active so it doesn't peek through the translucent scrim and so
the drawer experience reads as a clean focused mode. The
.pup-no-scroll class is set by main.js whenever the drawer is open. */
body.pup-no-scroll .pup-smartbar.is-visible {
transform: translateY(100%);
opacity: 0;
pointer-events: none;
}
/* Cyan sticker pill — same construction as .pup-btn--secondary +
.pup-btn--call, but recomposed locally so we don't pull in the
ringing animation (would be too busy on a fixed bottom bar) and
so the proportions stay flat-bar-friendly. */
.pup-smartbar__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: 100%;
min-height: 56px;
padding: 12px 18px;
border-radius: var(--r-pill);
border: 3px solid var(--pup-navy);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--pup-cyan) 82%, white) 0%,
var(--pup-cyan) 55%,
color-mix(in srgb, var(--pup-cyan) 88%, black) 100%
);
box-shadow:
inset 0 0 0 2px var(--pup-white),
inset 0 2px 0 0 rgba(255, 255, 255, 0.32),
0 4px 0 0 var(--pup-ink);
color: var(--pup-navy);
font-family: var(--font-display);
font-size: 1.0625rem;
text-transform: uppercase;
letter-spacing: 0.03em;
text-decoration: none;
white-space: nowrap;
line-height: 1;
transition:
transform var(--dur-micro) var(--ease-out),
box-shadow var(--dur-micro) var(--ease-out),
filter var(--dur-micro) var(--ease-out);
}
.pup-smartbar__btn:hover,
.pup-smartbar__btn:focus-visible {
filter: brightness(1.04);
transform: translateY(-1px);
box-shadow:
inset 0 0 0 2px var(--pup-white),
inset 0 2px 0 0 rgba(255, 255, 255, 0.4),
0 6px 0 0 var(--pup-ink);
}
.pup-smartbar__btn:active {
transform: translateY(2px);
filter: brightness(0.97);
box-shadow:
inset 0 0 0 2px var(--pup-white),
inset 0 2px 0 0 rgba(255, 255, 255, 0.22),
0 0 0 0 var(--pup-ink);
}
.pup-smartbar__btn svg {
flex: 0 0 auto;
color: var(--pup-navy);
}
/* Narrow handsets (e.g. ~360px Android): text-only CTA, more room
for “CALL ( … )” without the pill feeling cramped. */
@media (max-width: 480px) {
.pup-smartbar__btn svg {
display: none;
}
.pup-smartbar__btn {
gap: 0;
}
}
/* When the bar is mounted (via JS) we reserve room at the bottom of
the page so the footer's last line / inertia coast can't be
trapped behind the fixed bar. The variable lives at :root so the
exact value can be overridden later if the bar ever grows. */
body.pup-has-smartbar {
padding-bottom: calc(var(--pup-smartbar-h) + env(safe-area-inset-bottom, 0px));
}
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
.pup-smartbar {
transform: none;
transition: opacity 200ms linear;
}
.pup-smartbar__btn,
.pup-smartbar__btn:hover,
.pup-smartbar__btn:active {
transform: none;
}
}
/* ------------------------------------------------------------------
Stats strip — flat horizontal trust ribbon that sits directly
below the hero/page-hero as a tight continuation band. Dark
purple-to-navy gradient (same family as the hero chrome) with
a 2px cyan top "seal" that visually staples it to the hero
edge, white display-font labels, cyan icons, and cyan pipe
dividers. A faint inset white highlight under the cyan edge
gives the band a subtle bevel without becoming a card.
When the block sits directly under a .pup-page-hero (the
common case on landing/services pages), the page-hero's bottom
padding collapses so the strip reads as one continuous chrome.
------------------------------------------------------------------ */
.pup-page-hero:has(+ .pup-stats-strip) {
padding-bottom: 0;
margin-bottom: 0;
}
/* Defeat WP block-layout flow's automatic block-gap so the strip
sits flush against the hero instead of inheriting the default
editor spacing between sibling blocks. */
.pup-stats-strip {
margin-top: 0 !important;
margin-block-start: 0 !important;
}
.pup-page-hero + .pup-stats-strip,
.pup-page-hero + * > .pup-stats-strip {
margin-top: 0 !important;
margin-block-start: 0 !important;
}
/* Contact page seam: keep sky contact section flush with page hero.
Mirrors the stats-strip seam override so WP block-gap never inserts
an unwanted gap between adjacent blocks. */
.pup-page-hero:has(+ .pup-contact) {
padding-bottom: 0;
margin-bottom: 0;
}
.pup-page-hero + .pup-contact,
.pup-page-hero + * > .pup-contact {
margin-top: 0 !important;
margin-block-start: 0 !important;
}
.pup-stats-strip {
position: relative;
display: block;
background:
radial-gradient(120% 200% at 50% -50%, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
linear-gradient(180deg, var(--pup-purple-deep) 0%, var(--pup-navy) 100%);
border-top: 2px solid var(--pup-cyan);
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
inset 0 -1px 0 0 rgba(0, 0, 0, 0.25);
color: var(--pup-white);
}
.pup-stats-strip__inner {
padding-block: clamp(0.625rem, 1.2vw, 0.875rem);
}
.pup-stats-strip__items {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.pup-stats-strip__item {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-width: 0;
padding: 0.25rem clamp(0.5rem, 1vw, 0.875rem);
font-family: var(--font-display);
font-size: clamp(0.625rem, 0.8vw, 0.8125rem);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--pup-white);
line-height: 1.15;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.pup-stats-strip__label {
display: inline-block;
min-width: 0;
}
.pup-stats-strip__item + .pup-stats-strip__item {
border-left: 1px solid color-mix(in srgb, var(--pup-cyan) 55%, transparent);
}
.pup-stats-strip__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: color-mix(in srgb, var(--pup-cyan) 22%, transparent);
color: var(--pup-cyan);
flex: 0 0 auto;
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--pup-cyan) 70%, transparent),
inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
}
.pup-stats-strip__icon svg {
width: 16px;
height: 16px;
}
.pup-stats-strip__label {
display: inline-block;
}
/* Mobile (≤720px): stack the four highlights vertically so each one
sits on its own line at full container width. The horizontal scroll
strip we used previously meant items like "60-MIN EMERGENCY DISPATCH"
(~379 px) overflowed iPhone-class viewports (367 px) and required a
side-swipe to discover — a vertical stack reads cleanly without any
scrolling and lets each label wrap naturally if it ever needs to. */
@media (max-width: 720px) {
.pup-stats-strip__inner {
padding-block: 0.625rem;
overflow-x: visible;
-webkit-overflow-scrolling: auto;
}
.pup-stats-strip__items {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
grid-auto-flow: row;
gap: 0;
min-width: 0;
padding-inline: 0;
}
.pup-stats-strip__item {
display: flex;
width: 100%;
min-width: 0;
padding: 0.5rem 0.25rem;
font-size: 0.8125rem;
white-space: normal;
text-align: left;
justify-content: flex-start;
}
/* Replace the vertical column dividers with thin horizontal
separators between stacked rows. */
.pup-stats-strip__item + .pup-stats-strip__item {
border-left: none;
border-top: 1px solid color-mix(in srgb, var(--pup-cyan) 35%, transparent);
}
.pup-stats-strip__label {
min-width: 0;
overflow-wrap: anywhere;
}
}
/* ------------------------------------------------------------------
Guarantee band — mid-page conversion strip with a money-back
promise on the left and the Purple Pup service van on the right.
Mirrors the dark purple-deep → navy chrome from the hero/stats
strip so the band reads as part of the brand stage rather than a
generic section. Cyan accents (eyebrow seal, headline highlight,
CTA shimmer) tie it back to the brand palette.
------------------------------------------------------------------ */
.pup-guarantee {
position: relative;
overflow: hidden;
isolation: isolate;
background: linear-gradient(180deg, var(--pup-purple-deep) 0%, var(--pup-navy) 100%);
color: var(--pup-white);
border-block: 2px solid var(--pup-cyan);
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
inset 0 -1px 0 0 rgba(0, 0, 0, 0.25);
}
.pup-guarantee__bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
/* Sunray fan — same lavender repeating-conic recipe as the hero,
anchored at the bottom-center so the rays fan upward through
the band. Masked into a soft ellipse so the rays bloom around
the headline rather than reaching the edges. */
.pup-guarantee__rays {
position: absolute;
inset: 0;
background: repeating-conic-gradient(
from -90deg at 50% 110%,
rgba(177, 125, 214, 0.45) 0deg 7deg,
transparent 7deg 15deg
);
-webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 110%, #000 0%, #000 45%, transparent 78%);
mask-image: radial-gradient(ellipse 95% 95% at 50% 110%, #000 0%, #000 45%, transparent 78%);
mix-blend-mode: screen;
opacity: 0.75;
transform-origin: 50% 110%;
}
/* Cyan halftone dot wash — same recipe as the hero halftone but
slightly tighter so the dot pattern reads in the slimmer band
without overpowering the headline. */
.pup-guarantee__halftone {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(46, 196, 232, 0.55) 1.2px, transparent 1.6px);
background-size: 9px 9px;
background-position: 0 0;
-webkit-mask-image: radial-gradient(ellipse 95% 90% at 50% 100%,
#000 0%, rgba(0,0,0,0.55) 35%, transparent 78%);
mask-image: radial-gradient(ellipse 95% 90% at 50% 100%,
#000 0%, rgba(0,0,0,0.55) 35%, transparent 78%);
opacity: 0.55;
}
@media (prefers-reduced-motion: no-preference) {
.pup-guarantee__rays { animation: pup-guarantee-ray-drift 80s linear infinite; }
@keyframes pup-guarantee-ray-drift {
from { transform: rotate(-1deg); }
to { transform: rotate( 1deg); }
}
}
.pup-guarantee__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
align-items: center;
gap: clamp(1.5rem, 4vw, 3rem);
padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.pup-guarantee__copy {
max-width: 36rem;
}
.pup-guarantee__eyebrow {
margin: 0 0 0.4rem;
font-family: var(--font-body);
font-size: clamp(0.875rem, 1.05vw, 1rem);
font-weight: 500;
letter-spacing: 0.01em;
color: color-mix(in srgb, var(--pup-white) 85%, transparent);
line-height: 1.3;
}
.pup-guarantee__headline {
margin: 0 0 1rem;
font-family: var(--font-display);
font-size: clamp(1.375rem, 2.4vw, 1.875rem);
line-height: 1.15;
letter-spacing: -0.005em;
color: var(--pup-white);
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.pup-guarantee__cta {
display: flex;
align-items: center;
}
/* Vehicle composition — mirrors the hero van pattern (base PNG +
two wheel PNGs at the measured wheel-well percentages) so the
service van reads identically across the site. */
.pup-guarantee__vehicle {
--van-bob: 2px;
--van-body-lift: 12px;
position: relative;
width: 100%;
max-width: 480px;
aspect-ratio: 2619 / 975;
margin-inline-start: auto;
pointer-events: none;
filter: drop-shadow(0 18px 28px rgba(15, 10, 30, 0.45));
}
.pup-guarantee__van {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
transform: translateY(calc(-1 * var(--van-body-lift)));
}
.pup-guarantee__wheel {
position: absolute;
z-index: 0;
width: 12.5%;
aspect-ratio: 1 / 1;
height: auto;
transform-origin: 50% 50%;
will-change: transform;
}
.pup-guarantee__wheel--front { left: 7.25%; bottom: 0; }
.pup-guarantee__wheel--rear { left: 72.45%; bottom: 0; }
.pup-guarantee__vehicle[data-spin="on"] .pup-guarantee__wheel {
animation: pup-wheel-spin 1.4s linear infinite;
}
.pup-guarantee__vehicle[data-spin="on"] .pup-guarantee__van {
animation: pup-van-bob 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.pup-guarantee__wheel,
.pup-guarantee__van { animation: none !important; }
}
@media (max-width: 900px) {
.pup-guarantee__inner {
grid-template-columns: 1fr;
gap: 1.25rem;
padding-block: clamp(1.5rem, 6vw, 2.25rem);
text-align: center;
}
.pup-guarantee__copy {
max-width: none;
margin-inline: auto;
}
.pup-guarantee__cta {
justify-content: center;
}
.pup-guarantee__vehicle {
max-width: 360px;
margin-inline: auto;
}
}