/*
Theme Name: PaintX Australia
Theme URI: https://paintx.au
Description: Child theme of Twenty Twenty-Five for PaintX Australia. A light, conversion-led layout - founder in the hero, trust badges, stats band, reviews, process, FAQ - carrying the PaintX palette (oxblood, brand black, cream) and the roller-stroke headings that make it theirs.
Author: HCS Technology Solutions Pty Ltd
Author URI: https://www.hcstech.com.au
Template: twentytwentyfive
Version: 16.18.1
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paintx
*/

/* ==========================================================================
   1. TOKENS
   Brand white is the ground, cream is the second surface, oxblood is the
   paint (buttons, strokes, accents), brand black carries the stats band and
   the footer. Gold appears on review stars only.
   ========================================================================== */

:root {
	--paper:    #fafbfc;
	--primer:   #f6ebcf;
	--primer-2: #fbf5e6;
	--paint:    #660404;
	--paint-d:  #4a0303;
	--paint-l:  #8a1a14;
	--ink:      #1e2120;
	--ink-2:    #4f5251;
	--ink-3:    #5f6261; /* was #7a7d7c - failed AA on white and cream (audit 2 Oct 2026) */
	--gold:     #fec34d;
	--white:    #ffffff;

	--rule:     rgba(30, 33, 32, .12);
	--rule-2:   rgba(30, 33, 32, .2);
	--shadow:   0 18px 50px rgba(30, 33, 32, .10);
	--shadow-2: 0 30px 70px rgba(30, 33, 32, .16);

	--r:        22px;
	--r-sm:     14px;
	--maxw:     1280px;
	--gutter:   clamp(18px, 4vw, 48px);
	--band:     clamp(56px, 6.5vw, 96px);

	/* legacy names still referenced by inc/*.php and the block editor */
	--px-primary: #660404;
	--px-cream:   #f6ebcf;
	--px-gold:    #fec34d;
	--px-black:   #1e2120;
	--px-white:   #fafbfc;
	--px-body:    #4f5251;
	--px-radius:  22px;
}

/* ==========================================================================
   2. RESET AND TYPE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink-2);
	font: 400 18px/1.6 'Alegreya Sans', 'PX Fallback', 'PX Fallback DV', 'Trebuchet MS', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 900;
	letter-spacing: -.025em;
	line-height: 1;
	color: var(--ink);
	text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: 800; color: var(--ink); }

:focus-visible { outline: 3px solid var(--paint); outline-offset: 3px; }

.px-skip { position: absolute; left: -9999px; }
.px-skip:focus {
	left: 16px; top: 16px; z-index: 99;
	background: var(--paint); color: var(--primer);
	padding: 9px 16px; border-radius: 999px; font-weight: 800; text-decoration: none;
}

/* a whisper of paper grain, so the white never reads as a screen */
body::after {
	content: "";
	position: fixed; inset: 0; z-index: 60;
	pointer-events: none; opacity: .035; mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.9%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%20.6%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27220%27%20height%3D%27220%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E");
}

/* ==========================================================================
   3. LAYOUT
   WordPress's own alignment maths fought the bands, so it is neutralised once
   here: every band is full bleed and centres its own content at --maxw.
   ========================================================================== */

.wp-site-blocks > main,
.wp-site-blocks > main > .wp-block-group:not(.px-band),
.wp-block-post-content,
.wp-site-blocks .alignfull,
.wp-block-post-content.alignfull {
	margin: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}
.wp-site-blocks > main > .wp-block-group:not(.px-band) { padding-top: 0 !important; padding-bottom: 0 !important; }

/* the page's own title is carried by the hero band, never printed twice -
   but a title inside a query loop is a card heading and must stay */
.wp-block-post-title:not(.px-post__title) { display: none; }

.wp-block-post-content > *,
.wp-site-blocks > main > * {
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
}

/* One band rule: full-bleed background, content centred and gutter-safe.
   :where() keeps it at zero specificity so any component can override it. */
:where(.px-band,
       .wp-block-post-content > section, .wp-block-post-content > div:not(.px-menu),
       .wp-site-blocks > main > section) {
	display: block;
	position: relative;
	padding-block: var(--band);
	padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2));
}

/* the explicit .px-band class (query-loop pages) has to outrank the block
   editor's own group padding, which is also zero-specificity */
main .px-band { padding-block: var(--band); padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2)); }

/* the ground alternates paper and cream, band by band; rows of the same
   component share one surface so a page never stripes */
:where(.wp-block-post-content > section:nth-of-type(even):not(.px-pagehero):not(.px-quoteform)) { background: var(--primer); }
:where(.wp-block-post-content > .px-orow) { background: transparent; padding-block: clamp(28px, 4vw, 52px); }
:where(.wp-block-post-content > .px-orow + .px-orow) { padding-top: 0; }
.px-band--cream { background: var(--primer); }
.px-band--ink { background: var(--ink); color: rgba(246, 235, 207, .82); }
.px-band--ink h1, .px-band--ink h2, .px-band--ink h3, .px-band--ink b { color: var(--primer); }

.px-inner { max-width: var(--maxw); margin-inline: auto; }

/* ==========================================================================
   4. PAINT UTILITIES
   The roller stroke and the brushed photo edge are what make this PaintX's
   page and not a template.
   ========================================================================== */

/* a band of wet oxblood with bristle-rough edges, behind cream type */
.px-wet {
	position: relative;
	display: inline-block;
	padding: .06em .26em .1em;
	color: var(--primer);
	isolation: isolate;
	white-space: nowrap;
}
.px-wet::before {
	content: "";
	position: absolute; inset: -.06em -.18em -.1em;
	z-index: -1;
	background: var(--paint);
	-webkit-mask: var(--stroke-mask); mask: var(--stroke-mask);
	-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* the inverse, for anything sitting on oxblood or black */
.px-wet--cream { color: var(--paint); }
.px-wet--cream::before { background: var(--primer); }

/* generated by build_css.py - do not edit inside this block */
:root {
	--stroke-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%2014%201200%20152%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22r%22%20x%3D%22-6%25%22%20y%3D%22-30%25%22%20width%3D%22112%25%22%20height%3D%22160%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.012%200.18%22%20numOctaves%3D%223%22%20seed%3D%223%22%20result%3D%22n%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%2226%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%20result%3D%22d%22%2F%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.002%200.35%22%20numOctaves%3D%222%22%20seed%3D%2210%22%20result%3D%22t%22%2F%3E%3CfeColorMatrix%20in%3D%22t%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%20-0.9%201.38%22%20result%3D%22streak%22%2F%3E%3CfeComposite%20in%3D%22d%22%20in2%3D%22streak%22%20operator%3D%22in%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20filter%3D%22url%28%23r%29%22%20fill%3D%22%23000%22%20d%3D%22M22%2040%20C%20260%2022%2C%20900%2030%2C%201178%2036%20L%201188%20150%20C%20880%20160%2C%20300%20156%2C%2014%20146%20Z%22%2F%3E%3C%2Fsvg%3E");
	--stroke-mask-b: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%2014%201200%20152%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22r%22%20x%3D%22-6%25%22%20y%3D%22-30%25%22%20width%3D%22112%25%22%20height%3D%22160%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.012%200.18%22%20numOctaves%3D%223%22%20seed%3D%2217%22%20result%3D%22n%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%2226%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%20result%3D%22d%22%2F%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.002%200.35%22%20numOctaves%3D%222%22%20seed%3D%2224%22%20result%3D%22t%22%2F%3E%3CfeColorMatrix%20in%3D%22t%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%20-0.9%201.38%22%20result%3D%22streak%22%2F%3E%3CfeComposite%20in%3D%22d%22%20in2%3D%22streak%22%20operator%3D%22in%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20filter%3D%22url%28%23r%29%22%20fill%3D%22%23000%22%20d%3D%22M22%2040%20C%20260%2022%2C%20900%2030%2C%201178%2036%20L%201188%20150%20C%20880%20160%2C%20300%20156%2C%2014%20146%20Z%22%2F%3E%3C%2Fsvg%3E");
	--brush-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22none%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-5%25%22%20y%3D%22-5%25%22%20width%3D%22110%25%22%20height%3D%22110%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.05%200.03%22%20numOctaves%3D%223%22%20seed%3D%224%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20scale%3D%2216%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3C%2Ffilter%3E%3Crect%20x%3D%229%22%20y%3D%229%22%20width%3D%22382%22%20height%3D%22282%22%20rx%3D%226%22%20fill%3D%22%23000%22%20filter%3D%22url%28%23f%29%22%2F%3E%3C%2Fsvg%3E");
	--drip-ox: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%2090%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23660404%22%20d%3D%22M0%200H1440V22C1402%2022%201398%2058%201386%2058S1372%2022%201330%2022C1250%2022%201236%2022%201190%2022%201160%2022%201158%2082%201142%2082S1126%2022%201096%2022H880C850%2022%20848%2044%20838%2044S826%2022%20800%2022H560C530%2022%20526%2070%20512%2070S496%2022%20466%2022H300C270%2022%20268%2040%20258%2040S246%2022%20220%2022H120C92%2022%2090%2064%2076%2064S62%2022%2036%2022H0Z%22%2F%3E%3C%2Fsvg%3E");
	--drip-wall: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%2090%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%231e2120%22%20d%3D%22M0%200H1440V22C1402%2022%201398%2058%201386%2058S1372%2022%201330%2022C1250%2022%201236%2022%201190%2022%201160%2022%201158%2082%201142%2082S1126%2022%201096%2022H880C850%2022%20848%2044%20838%2044S826%2022%20800%2022H560C530%2022%20526%2070%20512%2070S496%2022%20466%2022H300C270%2022%20268%2040%20258%2040S246%2022%20220%2022H120C92%2022%2090%2064%2076%2064S62%2022%2036%2022H0Z%22%2F%3E%3C%2Fsvg%3E");
	--tear-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cfilter%20id%3D%22t%22%20x%3D%22-2%25%22%20y%3D%22-10%25%22%20width%3D%22104%25%22%20height%3D%22120%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.02%200.4%22%20numOctaves%3D%223%22%20seed%3D%226%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20scale%3D%2222%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3C%2Ffilter%3E%3Crect%20x%3D%22-20%22%20y%3D%2216%22%20width%3D%221240%22%20height%3D%22600%22%20fill%3D%22%23000%22%20filter%3D%22url%28%23t%29%22%2F%3E%3C%2Fsvg%3E");
}

/* photos sit in clean rounded frames (the torn "brushed" edge was retired 27 Sep) */
.px-brushed { border-radius: var(--r); overflow: hidden; }

.px-kicker {
	font-size: 14px; font-weight: 700; letter-spacing: .16em;
	text-transform: uppercase; color: var(--paint); margin-bottom: 14px;
}
.px-stars { display: inline-flex; gap: 1px; color: var(--gold); }
.px-stars svg { width: 16px; height: 16px; }

/* reveal on scroll: the stroke paints itself in */
.js .px-reveal { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.6, .05, .25, 1); }
.js .px-reveal.in { clip-path: inset(0 0 0 0); }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.px-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 56px; padding: 0 30px; border-radius: 999px;
	font-family: inherit; font-weight: 800; font-size: 17.5px; line-height: 1;
	text-decoration: none; border: 2px solid transparent; white-space: nowrap;
	cursor: pointer; transition: transform .15s, background .2s, color .2s, box-shadow .2s;
}
.px-btn:hover { transform: translateY(-2px); }
.px-btn--sm { height: 46px; padding: 0 22px; font-size: 16px; }
.px-btn--solid, .px-btn--quote, .px-btn--ox {
	background: var(--paint); color: var(--primer);
	box-shadow: 0 10px 24px rgba(102, 4, 4, .22);
}
.px-btn--solid:hover, .px-btn--quote:hover, .px-btn--ox:hover { background: var(--paint-d); }
.px-btn--cream { background: var(--primer); color: var(--paint); }
.px-btn--outline, .px-btn--ghost { border-color: var(--rule-2); color: var(--ink); background: transparent; }
.px-btn--outline:hover, .px-btn--ghost:hover { border-color: var(--ink); }
.px-btn svg { width: 20px; height: 20px; }
.px-cardbtns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* on black or oxblood the outline button has to read light */
.px-band--ink .px-btn--outline, .px-quoteform .px-btn--outline, .px-lcta .px-btn--outline {
	border-color: rgba(246, 235, 207, .45); color: var(--primer);
}
.px-band--ink .px-btn--outline:hover, .px-lcta .px-btn--outline:hover { background: var(--primer); color: var(--paint); border-color: var(--primer); }
.px-band--ink .px-btn--solid, .px-lcta .px-btn--solid { box-shadow: none; }

/* ==========================================================================
   6. LOCKUP
   ========================================================================== */

.px-lockup { display: inline-flex; align-items: center; gap: .14em; color: var(--paint); text-decoration: none; }
.px-lockup__mark { width: 1.25em; height: auto; color: var(--paint); }
.px-lockup__row { display: flex; flex-direction: column; line-height: .84; }
.px-lockup__word { font-weight: 900; letter-spacing: -.02em; color: var(--ink); }
.px-lockup__word sup { font-size: .46em; font-weight: 800; color: var(--paint); vertical-align: top; position: relative; top: .08em; }
.px-lockup__sub { font-weight: 400; letter-spacing: .42em; color: var(--paint); font-size: .33em; padding-left: .18em; margin-top: .22em; }
.px-lockup--hdr { font-size: 30px; }
.px-lockup--ftr { font-size: 40px; margin-bottom: 10px; }
.px-lockup--ftr, .px-lockup--ftr .px-lockup__mark { color: var(--primer); }
.px-lockup--ftr .px-lockup__word { color: var(--primer); }
.px-lockup--ftr .px-lockup__word sup, .px-lockup--ftr .px-lockup__sub { color: var(--white); }
.px-mark { width: 34px; height: auto; color: var(--paint); }

/* ==========================================================================
   7. HEADER - a trust strip, the bar, a real services menu, the drawer
   ========================================================================== */

.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }

.px-header {
	display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
	padding: 0 !important; margin: 0 !important;
	background: rgba(250, 251, 252, .94);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--rule);
	transition: box-shadow .25s;
}
.px-header > * { margin: 0 !important; }
.wp-site-blocks > header.is-stuck .px-header { box-shadow: 0 10px 34px rgba(30, 33, 32, .10); }

/* the strip */
.px-strip { background: var(--ink); color: rgba(246, 235, 207, .82); font-size: 13.5px; overflow: hidden; max-height: 40px; transition: max-height .3s, opacity .3s; }
.wp-site-blocks > header.is-stuck .px-strip { max-height: 0; opacity: 0; }
.px-strip__in { max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter); height: 38px; display: flex; align-items: center; gap: 26px; }
.px-strip__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none; color: inherit; }
.px-strip__item svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; }
.px-strip__item--right { margin-left: auto; }
.px-strip__mail:hover { color: var(--primer); }
.px-strip__mail { padding-block: 8px; }

/* the bar */
.px-bar { position: relative; max-width: var(--maxw); width: 100%; margin-inline: auto; padding: 0 var(--gutter); min-height: 80px; display: flex; align-items: center; gap: 28px; transition: min-height .3s; }
.wp-site-blocks > header.is-stuck .px-bar { min-height: 68px; }
.px-lockup--hdr { font-size: 32px; margin-right: 8px; }

.px-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.px-nav__item { position: relative; }
.px-nav__link {
	position: relative; display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 14px; border-radius: 999px;
	color: var(--ink); text-decoration: none; font-weight: 700; font-size: 17px;
	transition: background .2s, color .2s;
}
.px-nav__link::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px;
	background: var(--paint); border-radius: 2px;
	transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.px-nav__item:hover > .px-nav__link::after, .px-nav__item.is-open > .px-nav__link::after, .px-nav__link.is-current::after { transform: scaleX(1); }
.px-nav__item:hover > .px-nav__link, .px-nav__item.is-open > .px-nav__link { color: var(--paint); }
.px-nav__chev { width: 14px; height: 14px; transition: transform .25s; opacity: .7; }
.px-nav__item.is-open .px-nav__chev, .px-nav__item:hover .px-nav__chev { transform: rotate(180deg); }

/* the menus */
.px-mega {
	position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 8px);
	min-width: 360px; background: var(--white); border-radius: 18px;
	border: 1px solid var(--rule); box-shadow: 0 30px 70px rgba(30, 33, 32, .18);
	padding: 10px; opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1), visibility .2s;
	z-index: 5;
}
.px-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.px-nav__item--wide .px-mega { min-width: 760px; }
.px-nav__item:hover > .px-mega, .px-nav__item.is-open > .px-mega, .px-nav__item:focus-within > .px-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.px-mega__grid { display: grid; gap: 2px; grid-template-columns: 1fr; }
.px-nav__item--wide .px-mega__grid { grid-template-columns: 1fr 1fr; }
.px-mega__item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink-2); transition: background .15s; }
.px-mega__item:hover { background: var(--primer-2); }
.px-mega__i { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--primer); color: var(--paint); display: grid; place-items: center; transition: background .2s, color .2s; }
.px-mega__item:hover .px-mega__i { background: var(--paint); color: var(--primer); }
.px-mega__item b { display: block; color: var(--ink); font-size: 16.5px; letter-spacing: -.01em; line-height: 1.15; }
.px-mega__item small { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.px-mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 8px -10px -10px; padding: 14px 20px; background: var(--primer); border-radius: 0 0 18px 18px; font-size: 14.5px; color: var(--ink-2); }
.px-mega__foot span { max-width: 44ch; }

/* phone + cta */
.px-bar__cta { display: flex; align-items: center; gap: 16px; }
.px-bar__tel { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.px-bar__telicon { width: 42px; height: 42px; border-radius: 50%; background: var(--primer); color: var(--paint); display: grid; place-items: center; transition: background .2s, color .2s; }
.px-bar__telicon svg { width: 18px; height: 18px; }
.px-bar__tel:hover .px-bar__telicon { background: var(--paint); color: var(--primer); }
.px-bar__telbody { display: flex; flex-direction: column; line-height: 1.05; }
.px-bar__telbody small { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.px-bar__telbody b { font-size: 17.5px; font-weight: 900; letter-spacing: -.01em; }
.px-topnav__cta {
	display: inline-flex; align-items: center; height: 48px; padding: 0 24px;
	border-radius: 999px; background: var(--paint); color: var(--primer);
	font-weight: 800; font-size: 17px; text-decoration: none; transition: transform .15s, background .2s;
	box-shadow: 0 10px 24px rgba(102, 4, 4, .22); white-space: nowrap;
}
.px-topnav__cta:hover { transform: translateY(-2px); }

.px-burger {
	display: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--rule-2);
	background: transparent; flex-direction: column; align-items: center;
	justify-content: center; gap: 6px; cursor: pointer;
}
.px-burger span { display: block; width: 22px; height: 2px; background: var(--ink); }

/* the drawer */
.px-menu { position: fixed; inset: 0; z-index: 80; background: rgba(30, 33, 32, .5); }
.px-menu[hidden] { display: none; }
.px-menu__panel {
	position: absolute; right: 0; top: 0; bottom: 0; width: min(440px, 94vw);
	background: var(--paper); padding: 18px var(--gutter) 28px;
	display: flex; flex-direction: column; gap: 22px; overflow-y: auto;
	box-shadow: -30px 0 70px rgba(0, 0, 0, .25);
	animation: px-drawer .35s cubic-bezier(.2, .8, .2, 1);
}
@keyframes px-drawer { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.px-menu__head { display: flex; align-items: center; justify-content: space-between; }
.px-menu__head .px-lockup { font-size: 28px; }
.px-menu__close { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--rule-2); background: transparent; color: var(--ink); cursor: pointer; }
.px-menu__close svg { width: 22px; height: 22px; margin: auto; }
.px-menu__nav { display: flex; flex-direction: column; }
.px-menu__nav > a, .px-menu__group > summary {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 0; border-bottom: 1px solid var(--rule);
	color: var(--ink); text-decoration: none; font-size: 24px; font-weight: 900; letter-spacing: -.02em; cursor: pointer; list-style: none;
}
.px-menu__group > summary::-webkit-details-marker { display: none; }
.px-menu__group > summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--paint); border-bottom: 2px solid var(--paint); transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
.px-menu__group[open] > summary::after { transform: rotate(-135deg); }
.px-menu__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 10px 0 16px; border-bottom: 1px solid var(--rule); }
.px-menu__sub a { display: flex; align-items: center; gap: 8px; padding: 8px 0; color: var(--ink-2); text-decoration: none; font-size: 15.5px; font-weight: 600; }
.px-menu__sub a svg { width: 18px; height: 18px; color: var(--paint); flex-shrink: 0; }
.px-menu__sub a:hover { color: var(--paint); }
.px-menu__sub--plain { grid-template-columns: 1fr; }
.px-menu__all { grid-column: 1 / -1; color: var(--paint) !important; font-weight: 800 !important; }
.px-menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.px-menu__foot .px-btn { width: 100%; }
.px-menu__social { display: flex; gap: 12px; margin-top: 8px; }
.px-menu__social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-2); display: flex; color: var(--paint); }
.px-menu__social svg { width: 20px; height: 20px; margin: auto; }

@media (max-width: 1240px) {
	.px-strip__item--right { display: none; }
	.px-bar__telbody small { display: none; }
}
@media (max-width: 1100px) {
	.px-nav, .px-bar__tel { display: none; }
	.px-burger { display: flex; }
	.px-bar__cta { margin-left: auto; }
}
@media (max-width: 760px) {
	.px-strip__in { gap: 18px; }
	.px-strip__item:nth-child(3), .px-strip__mail { display: none; }
}
@media (max-width: 640px) {
	.px-strip { display: none; }
	.px-bar { min-height: 66px; gap: 12px; }
	.px-lockup--hdr { font-size: 26px; }
	.px-topnav__cta { height: 42px; padding: 0 16px; font-size: 15px; }
}

/* ==========================================================================
   8. PAGE HERO - cream band, title on a roller stroke
   ========================================================================== */

.px-pagehero {
	background: var(--primer) !important;
	overflow: hidden;
	padding-block: clamp(64px, 8vw, 110px) clamp(56px, 7vw, 90px) !important;
	min-height: clamp(300px, 38vw, 440px);
	display: flex; align-items: flex-end;
}
.px-hero__inner { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto; width: 100%; }
.px-pagehero__title {
	font-size: clamp(40px, 5.8vw, 84px); letter-spacing: -.035em; max-width: 16ch;
	position: relative; display: inline-block; color: var(--primer);
	padding: .06em .28em .12em; isolation: isolate;
}
.px-pagehero__title::before {
	content: ""; position: absolute; inset: -.04em -.16em -.08em; z-index: -1;
	background: var(--paint);
	-webkit-mask: var(--stroke-mask) center / 100% 100% no-repeat;
	mask: var(--stroke-mask) center / 100% 100% no-repeat;
}
.js .px-pagehero__title::before { clip-path: inset(0 100% 0 0); animation: px-paint 1s .15s cubic-bezier(.6, .05, .25, 1) forwards; }
@keyframes px-paint { to { clip-path: inset(0 0 0 0); } }
.px-pagehero__lede { margin-top: 26px; max-width: 62ch; font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); }
.px-heroglow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .35; pointer-events: none; }
.px-heroglow--a { width: 460px; height: 460px; background: #e8cfa8; top: -160px; right: 6%; }
.px-heroglow--b { width: 380px; height: 380px; background: #f0d9b5; bottom: -200px; left: 10%; }
.px-heroglow--c { display: none; }

/* ==========================================================================
   9. SECTION HEADINGS - each on a roller stroke, painted in on scroll
   ========================================================================== */

.px-sec__h, .px-faq__head, .px-bento__head .px-sec__h, .px-series__head {
	font-size: clamp(30px, 3.8vw, 54px);
	margin: 0 0 clamp(24px, 3vw, 40px);
	max-width: 22ch;
}
.px-sec__h, .px-faq__head {
	position: relative; display: inline-block;
	color: var(--primer); padding: .06em .28em .12em; isolation: isolate;
}
.px-sec__h::before, .px-faq__head::before {
	content: ""; position: absolute; inset: -.04em -.16em -.08em; z-index: -1;
	background: var(--paint);
	-webkit-mask: var(--stroke-mask) center / 100% 100% no-repeat;
	mask: var(--stroke-mask) center / 100% 100% no-repeat;
}
.js .px-sec__h::before, .js .px-faq__head::before { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.6, .05, .25, 1); }
.js .px-sec__h.in::before, .js .px-faq__head.in::before { clip-path: inset(0 0 0 0); }

/* a plain heading, no stroke, for quieter bands */
.px-h2 { font-size: clamp(30px, 3.8vw, 54px); margin: 0 0 clamp(20px, 2.6vw, 34px); color: var(--ink); }
.px-lede { max-width: 62ch; font-size: clamp(18px, 1.5vw, 20px); color: var(--ink-2); }

/* ==========================================================================
   10. OFFSET ROWS - photo one side, card the other
   ========================================================================== */

.px-orow {
	display: grid; gap: clamp(24px, 4vw, 64px); align-items: center;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.px-orow--media-left .px-orow__media { order: -1; }
.px-orow--media-right .px-orow__media { order: 2; }
.px-orow__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); }
.px-orow__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.px-orow:hover .px-orow__media img { transform: scale(1.04); }
.px-orow__card {
	background: var(--white); color: var(--ink-2); border-radius: var(--r);
	padding: clamp(26px, 3.2vw, 46px);
	box-shadow: var(--shadow); border: 1px solid var(--rule);
}
.px-orow__card p { font-size: 17.5px; }
.px-orow__head { color: var(--ink); font-size: clamp(26px, 2.8vw, 38px); margin-bottom: 16px; }
.px-orow__lead { font-size: 20px; font-weight: 500; color: var(--ink); }
.px-orow__sub { color: var(--ink-3); }

/* ==========================================================================
   11. PROSE
   ========================================================================== */

.px-prosewrap { display: grid; gap: clamp(32px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.px-prose { max-width: 68ch; }
.px-prose__h { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 14px; color: var(--ink); }
.px-prose p { font-size: 17.5px; }
.px-article, .px-article__intro { max-width: 70ch; margin-inline: auto; }
.px-article__intro { font-size: clamp(20px, 2vw, 25px); color: var(--ink); font-weight: 400; margin-bottom: 32px; }
.px-article h2 { font-size: clamp(28px, 3vw, 40px); margin: 44px 0 14px; }
.px-article h3 { font-size: clamp(22px, 2.2vw, 28px); margin: 32px 0 10px; }
.px-article ul, .px-article ol { padding-left: 1.1em; }
.px-article li { margin-bottom: .5em; }
.px-article a { color: var(--paint); }

/* ==========================================================================
   12. CREDENTIALS - the tin's data sheet
   ========================================================================== */

.px-creds__grid { background: var(--white); border-radius: var(--r); padding: clamp(22px, 3vw, 40px); box-shadow: var(--shadow); border: 1px solid var(--rule); }
.px-cred { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px 24px; padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.px-cred:last-child { border-bottom: 0; padding-bottom: 0; }
.px-cred:first-child { padding-top: 0; }
.px-cred__k { font-weight: 800; color: var(--ink); font-size: 18px; text-transform: lowercase; }
.px-cred__v { color: var(--paint); font-size: 20px; font-weight: 900; text-align: right; grid-column: 2; }
.px-cred__b { grid-column: 1 / -1; color: var(--ink-2); font-size: 16.5px; max-width: 78ch; }
.px-tbc { background: rgba(102, 4, 4, .07); border-bottom: 2px dotted rgba(102, 4, 4, .5); padding: 0 .3em; font-style: italic; font-weight: 500; color: var(--paint); }

/* ==========================================================================
   13. PROCESS - coats, each swatch a shade closer to the finish
   ========================================================================== */

.px-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.px-step { display: flex; flex-direction: column; }
.px-step__n {
	display: flex; align-items: flex-end; justify-content: space-between;
	height: 124px; padding: 14px 16px; margin-bottom: 16px;
	border-radius: 14px 14px 4px 4px; font-size: 26px; font-weight: 900; letter-spacing: -.02em;
	box-shadow: inset 0 -10px 0 rgba(30, 33, 32, .10);
	background: #ead9c4; color: var(--ink);
}
.px-step__n > span:first-child { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.px-step:nth-child(5n+2) .px-step__n { background: #d3ab98; color: var(--ink); }
.px-step:nth-child(5n+3) .px-step__n { background: #985549; color: var(--primer); }
.px-step:nth-child(5n+4) .px-step__n { background: #8c3a33; color: var(--primer); }
.px-step:nth-child(5n+5) .px-step__n { background: #660404; color: var(--primer); }
.px-step__body { display: flex; flex-direction: column; gap: 8px; }
.px-step__body b { font-size: 21px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; line-height: 1.1; }
.px-step__body span { font-size: 16.5px; color: var(--ink-2); }
.js .px-steps .px-step__n { transform: scaleY(.18); transform-origin: bottom; opacity: 0; transition: transform .7s cubic-bezier(.6, .05, .25, 1), opacity .4s; }
.js .px-steps.in .px-step__n { transform: none; opacity: 1; }
.js .px-steps.in .px-step:nth-child(2) .px-step__n { transition-delay: .1s; }
.js .px-steps.in .px-step:nth-child(3) .px-step__n { transition-delay: .2s; }
.js .px-steps.in .px-step:nth-child(4) .px-step__n { transition-delay: .3s; }
.js .px-steps.in .px-step:nth-child(5) .px-step__n { transition-delay: .4s; }
.js .px-steps.in .px-step:nth-child(n+6) .px-step__n { transition-delay: .5s; }

/* ==========================================================================
   14. INCLUDED / NOT INCLUDED
   ========================================================================== */

.px-incl__cols { display: grid; gap: clamp(22px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.px-incl__col { border-radius: var(--r); padding: clamp(22px, 2.6vw, 34px); }
.px-incl__col--yes { background: var(--white); box-shadow: var(--shadow); border: 1px solid var(--rule); }
.px-incl__col--no { border: 1.5px dashed var(--rule-2); }
.px-incl__col h3 { font-size: 24px; margin-bottom: 16px; text-transform: lowercase; }
.px-incl__col--yes h3 { color: var(--paint); }
.px-incl__note { font-size: 16px; color: var(--ink-3); margin-bottom: 14px; }
.px-ticks, .px-crosses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.px-ticks li, .px-crosses li { position: relative; padding-left: 32px; font-size: 17px; color: var(--ink-2); }
.px-ticks li::before {
	content: ""; position: absolute; left: 4px; top: .34em; width: 15px; height: 8px;
	border-left: 3px solid var(--paint); border-bottom: 3px solid var(--paint); transform: rotate(-45deg);
}
.px-crosses li::before { content: "\00d7"; position: absolute; left: 4px; top: -.06em; font-size: 22px; font-weight: 900; color: var(--ink-3); }

/* ==========================================================================
   15. PRICE TABLE
   ========================================================================== */

.px-price__lede { max-width: 64ch; margin-bottom: 26px; }
.px-price__table { background: var(--white); color: var(--ink); border-radius: var(--r); padding: clamp(18px, 2.4vw, 32px); box-shadow: var(--shadow); border: 1px solid var(--rule); }
.px-price__row { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.px-price__row:last-child { border-bottom: 0; }
.px-price__row span { font-weight: 500; }
.px-price__row b { margin-left: auto; text-align: right; color: var(--paint); display: flex; align-items: baseline; gap: 10px; flex: 1; justify-content: flex-end; }
.px-price__row b::before { content: ""; flex: 1; border-bottom: 2px dotted var(--rule-2); transform: translateY(-4px); min-width: 24px; }
.px-price__note { margin-top: 22px; max-width: 70ch; font-size: 17px; }
.px-price .px-btn { margin-top: 26px; }

/* ==========================================================================
   16. FAQ
   ========================================================================== */

.px-faq { border-top: 1px solid var(--rule-2); max-width: 900px; }
.px-faq__row { border-bottom: 1px solid var(--rule-2); }
.px-faq__row summary {
	list-style: none; cursor: pointer; display: flex; justify-content: space-between;
	align-items: center; gap: 18px; padding: 20px 0;
	font-size: clamp(18px, 1.9vw, 22px); font-weight: 800; color: var(--ink);
}
.px-faq__row summary::-webkit-details-marker { display: none; }
.px-faq__row summary::after {
	content: ""; flex: 0 0 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--rule-2);
	background: linear-gradient(var(--paint), var(--paint)) center / 13px 2px no-repeat,
	            linear-gradient(var(--paint), var(--paint)) center / 2px 13px no-repeat;
	transition: transform .25s;
}
.px-faq__row[open] summary::after { transform: rotate(45deg); }
.px-faq__a { padding: 0 0 22px; max-width: 72ch; }
.px-faq__a p { font-size: 17.5px; }

/* ==========================================================================
   17. BENTO / TILES / RAILS
   ========================================================================== */

.px-bento__head { margin-bottom: clamp(26px, 3vw, 42px); }
.px-bento__lede { max-width: 62ch; }
.px-bento { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.px-bento__tile {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
	min-height: 260px; padding: 24px; border-radius: var(--r); overflow: hidden; isolation: isolate;
	text-decoration: none; color: var(--primer); background: var(--ink);
	transition: transform .35s, box-shadow .35s;
}
.px-bento__tile--lg { grid-column: span 2; grid-row: span 2; min-height: 420px; }
.px-bento__tile--md { grid-column: span 2; }
.px-bento__tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.px-bento__media { position: absolute; inset: 0; z-index: -1; }
.px-bento__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); transition: transform .6s, filter .4s; }
.px-bento__tile:hover .px-bento__media img { transform: scale(1.05); filter: brightness(.72); }
.px-bento__iconwrap { width: 52px; height: 52px; border-radius: 50%; background: var(--primer); color: var(--paint); display: flex; align-items: center; justify-content: center; margin-bottom: auto; }
.px-bento__icon { width: 26px; height: 26px; }
.px-bento__name { font-size: clamp(23px, 2.4vw, 32px); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; color: var(--primer); }
.px-bento__blurb { font-size: 16.5px; color: rgba(246, 235, 207, .85); }
.px-bento__go { font-weight: 800; display: inline-flex; gap: 8px; align-items: center; }
.px-bento__tile:hover .px-bento__go { text-decoration: underline; text-underline-offset: 5px; }

.px-tilegrid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.px-tile { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink-2); }
.px-tile__shot { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-sm); }
.px-tile__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.px-tile:hover .px-tile__shot img { transform: scale(1.05); }
.px-tile__label { font-size: 26px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; }
.px-tile:hover .px-tile__label { color: var(--paint); }

.px-sechead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.px-sechead__actions { display: flex; gap: 12px; flex-shrink: 0; }
.px-track { display: grid; gap: 22px; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.px-track > * { scroll-snap-align: start; }
.px-oslider { overflow: hidden; }
.px-oslider__track { display: flex; gap: 22px; }

/* ==========================================================================
   18. STRIPS, SERIES, EPISODES, TRUST
   ========================================================================== */

.px-pricestrip { background: var(--ink) !important; }
.px-pricestrip__in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 26px; max-width: var(--maxw); margin-inline: auto; }
.px-pricestrip__k { font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: rgba(246, 235, 207, .7); font-weight: 700; }
.px-pricestrip__v { font-size: clamp(28px, 3.4vw, 46px); font-weight: 900; color: var(--primer); letter-spacing: -.02em; }
.px-pricestrip__sub { color: rgba(246, 235, 207, .78); font-size: 17px; }

.px-series__head { margin-bottom: 10px; }
.px-series__lede { max-width: 62ch; margin-bottom: 28px; }
.px-series__grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.px-ep { display: flex; gap: 18px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--rule-2); text-decoration: none; color: var(--ink-2); }
.px-ep__n { font-size: 15px; font-weight: 700; letter-spacing: .12em; color: var(--ink-3); }
.px-ep__t { font-size: 23px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; }
.px-ep__m { font-size: 15px; color: var(--ink-3); }
.px-ep__slot { display: flex; flex-direction: column; gap: 6px; }
.px-ep__play { width: 46px; height: 46px; border-radius: 50%; background: var(--paint); color: var(--primer); display: flex; align-items: center; justify-content: center; margin-left: auto; flex-shrink: 0; }

.px-trust { display: flex; flex-wrap: wrap; gap: 14px 34px; }
.px-trust__item { display: flex; align-items: center; gap: 10px; font-size: 16px; }

/* ==========================================================================
   19. BLOG
   ========================================================================== */

.px-postgrid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.px-post { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.px-post__shot { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-sm); }
.px-post__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.px-post:hover .px-post__shot img { transform: scale(1.05); }
.px-post__meta { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--paint); }
.px-post__title { font-size: clamp(22px, 2.2vw, 27px); font-weight: 900; line-height: 1.08; letter-spacing: -.015em; color: var(--ink); }
.px-post:hover .px-post__title { color: var(--paint); }
.px-post__text { font-size: 16.5px; color: var(--ink-2); }
.px-post__body { display: flex; flex-direction: column; gap: 8px; }

.px-blogindex .wp-block-post-template {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 34px 30px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	max-width: var(--maxw); margin-inline: auto;
}
/* the query loop is a "flow" layout, which gives every card but the first a block-gap margin - kill it so the row lines up */
.px-blogindex .wp-block-post-template > li { display: flex; flex-direction: column; gap: 10px; margin: 0 !important; }
.px-blogindex .wp-block-post-template > li > * { margin: 0; }
.px-blogindex .px-post__shot { margin: 0 0 4px; border-radius: var(--r-sm); overflow: hidden; }
.px-blogindex .px-post__shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s; }
.px-blogindex li:hover .px-post__shot img { transform: scale(1.04); }
.px-blogindex .px-post__title { margin: 0; font-size: clamp(22px, 2.2vw, 27px); line-height: 1.1; }
.px-blogindex .px-post__title a { text-decoration: none; color: var(--ink); }
.px-blogindex li:hover .px-post__title a { color: var(--paint); }
.px-blogindex .px-post__meta { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--paint); }
.px-blogindex .px-post__text { margin: 0; font-size: 16.5px; color: var(--ink-2); }
.px-blogindex .wp-block-post-excerpt__more-link { color: var(--paint); font-weight: 800; }
.px-pager { max-width: var(--maxw); margin: 48px auto 0; color: var(--ink-2); font-weight: 700; }
.px-pager a { color: var(--paint); text-decoration: none; }
.px-pager a:hover { text-decoration: underline; text-underline-offset: 5px; }

.px-posthero { position: relative; min-height: clamp(360px, 46vw, 560px); display: flex; align-items: flex-end; overflow: hidden; background: var(--ink) !important; }
.px-posthero__img { position: absolute; inset: 0; }
.px-posthero__img img { width: 100%; height: 100%; object-fit: cover; }
.px-posthero__tint { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30, 33, 32, .92) 10%, rgba(30, 33, 32, .35) 100%); }
.px-posthero__inner { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto; width: 100%; }
.px-posthero__meta { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(246, 235, 207, .8); margin-bottom: 14px; }
.px-posthero__title { font-size: clamp(34px, 5vw, 70px); letter-spacing: -.035em; max-width: 18ch; color: var(--primer); }

/* ==========================================================================
   20. LEGALS, SEARCH
   ========================================================================== */

.px-legalindex { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.px-legalindex__card { background: var(--white); color: var(--ink-2); border-radius: var(--r); padding: 28px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); border: 1px solid var(--rule); transition: transform .3s; }
.px-legalindex__card:hover { transform: translateY(-3px); }
.px-legalindex__card h3 { color: var(--paint); font-size: 26px; }
.px-legalindex__card p { font-size: 16.5px; }

.px-search { display: flex; gap: 12px; flex-wrap: wrap; }
.px-search__field { flex: 1 1 260px; height: 56px; border-radius: 999px; border: 1.5px solid var(--rule-2); background: var(--white); color: var(--ink); padding: 0 22px; font: inherit; }
.px-search__btn { height: 56px; }
.px-search__empty { color: var(--ink-3); }

/* ==========================================================================
   21. QUOTE FORM - the one oxblood band, running into the black footer
   ========================================================================== */

.px-quoteform {
	background: var(--paint) !important;
	color: rgba(246, 235, 207, .85);
	display: grid; gap: clamp(28px, 4vw, 72px);
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
	align-items: start;
	scroll-margin-top: 90px;
	grid-auto-flow: dense;
}
/* placed explicitly, so a stray <p> from autop (block templates) can never push the form under the intro */
.px-quoteform p:empty, .px-quoteform br { display: none; }
.px-quoteform__intro { grid-column: 1; grid-row: 1; }
.px-quoteform__form, .px-quoteform__done { grid-column: 2; grid-row: 1; }
.px-quoteform::after {
	content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 84px;
	background: var(--drip-ox) center / 100% 100% no-repeat;
	pointer-events: none; z-index: 3;
}
/* a ghost roller stroke lies across the band */
.px-quoteform__ghost {
	position: absolute; left: 2%; top: 10%; width: 60%; height: 38%; opacity: .07; pointer-events: none;
	background: var(--primer); transform: rotate(-8deg);
	-webkit-mask: var(--stroke-mask) center / 100% 100% no-repeat; mask: var(--stroke-mask) center / 100% 100% no-repeat;
}
.px-quoteform > :not(.px-quoteform__ghost) { position: relative; }
.px-kicker--light { color: rgba(246, 235, 207, .7); }
.px-quoteform__intro { max-width: 52ch; }
.px-quoteform__head { font-size: clamp(38px, 4.8vw, 66px); letter-spacing: -.035em; margin-bottom: 18px; color: var(--primer); line-height: .98; }
.px-quoteform__head .px-wet { white-space: normal; }
.px-quoteform__lede { color: rgba(246, 235, 207, .85); font-size: clamp(18px, 1.5vw, 20px); max-width: 44ch; }
.px-quoteform__intro a { color: var(--primer); }

/* what happens next */
.px-qsteps { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.px-qsteps li { position: relative; display: flex; gap: 16px; padding: 0 0 22px 0; }
.px-qsteps li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: -2px; width: 2px; background: rgba(246, 235, 207, .22); }
.px-qsteps__n { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--primer); color: var(--paint); font-weight: 900; font-size: 16px; display: grid; place-items: center; }
.px-qsteps li:last-child .px-qsteps__n { box-shadow: 0 0 0 5px rgba(246, 235, 207, .18); }
.px-qsteps div { display: flex; flex-direction: column; gap: 2px; padding-top: 5px; }
.px-qsteps b { color: var(--primer); font-size: 18px; letter-spacing: -.01em; }
.px-qsteps span:not(.px-qsteps__n) { font-size: 15.5px; color: rgba(246, 235, 207, .72); }

/* the person behind the promise */
.px-qperson { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; padding: 14px 16px; border: 1px solid rgba(246, 235, 207, .18); border-radius: 16px; }
.px-qperson img { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--primer); }
.px-qperson > div:first-of-type { display: flex; flex-direction: column; }
.px-qperson b { color: var(--primer); font-size: 17px; }
.px-qperson > div:first-of-type span { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(246, 235, 207, .65); font-weight: 700; }
.px-qtrust { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--primer); font-size: 16px; }
.px-qtrust .px-stars { color: var(--gold); }
.px-qtrust > span:last-child { font-weight: 400; color: rgba(246, 235, 207, .65); font-size: 14px; }

/* the other ways in */
.px-qalt { margin-top: 26px; display: flex; flex-direction: column; gap: 4px; }
.px-qalt > span { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 235, 207, .6); font-weight: 700; margin-bottom: 4px; }
.px-qalt__tel { font-size: clamp(28px, 3vw, 38px); font-weight: 900; letter-spacing: -.02em; color: var(--primer); text-decoration: none; line-height: 1; }
.px-qalt__tel:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 3px; }
.px-qalt__mail { color: rgba(246, 235, 207, .8); text-decoration: none; font-size: 17px; }
.px-qalt__mail:hover { color: var(--primer); text-decoration: underline; }

/* the card */
.px-quoteform__form {
	background: var(--primer); color: var(--ink); border-radius: var(--r);
	padding: clamp(22px, 3vw, 36px); display: grid; gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	box-shadow: 0 40px 90px rgba(0, 0, 0, .35);
}
.px-quoteform__top { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 2px solid rgba(30, 33, 32, .12); }
.px-quoteform__top b { font-size: 24px; font-weight: 900; letter-spacing: -.02em; color: var(--paint); }
.px-quoteform__top span { font-size: 13.5px; color: var(--ink-3); }

/* fields: white boxes with labels that float once you type */
.px-field { position: relative; display: flex; flex-direction: column; grid-column: 1 / -1; }
.px-field--half { grid-column: auto; }
.px-field input, .px-field select, .px-field textarea {
	font: inherit; font-size: 17px; color: var(--ink);
	background: var(--white); border: 1.5px solid rgba(30, 33, 32, .16); border-radius: 12px;
	padding: 24px 16px 10px; min-height: 60px; width: 100%;
	transition: border-color .2s, box-shadow .2s;
}
.px-field textarea { min-height: 128px; resize: vertical; padding-top: 28px; }
.px-field select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23660404' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; }
.px-field label {
	position: absolute; left: 17px; top: 19px; font-size: 16px; color: var(--ink-3); pointer-events: none;
	transition: top .18s, font-size .18s, color .18s; line-height: 1.2; max-width: calc(100% - 34px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.px-field label span { color: var(--paint); }
.px-field:focus-within label,
.px-field:not(:has(:placeholder-shown)) label,
.px-field--select label { top: 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--paint); }
.px-field input:focus, .px-field select:focus, .px-field textarea:focus { outline: none; border-color: var(--paint); box-shadow: 0 0 0 4px rgba(102, 4, 4, .12); }
.px-field input:user-invalid, .px-field textarea:user-invalid { border-color: #b3261e; }
.px-hp { position: absolute; left: -9999px; }

.px-quoteform__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.px-quoteform__submit { height: 60px; padding: 0 30px; font-size: 18px; box-shadow: 0 14px 30px rgba(102, 4, 4, .3); }
.px-quoteform__submit svg { width: 20px; height: 20px; transition: transform .25s; }
.px-quoteform__submit:hover svg { transform: translateX(4px); }
.px-quoteform__privacy { flex: 1 1 240px; font-size: 14px; color: var(--ink-2); margin: 0; }
.px-quoteform__privacy a { color: var(--paint); }

/* the picker nudges the service field */
.px-quoteform.is-picked .px-field--select select { animation: px-nudge .8s ease; border-color: var(--paint); box-shadow: 0 0 0 4px rgba(102, 4, 4, .12); }

.px-quoteform__done { background: var(--primer); color: var(--ink); border-radius: var(--r); padding: clamp(28px, 4vw, 48px); font-size: 19px; box-shadow: 0 40px 90px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 12px; }
.px-quoteform__tick { width: 64px; height: 64px; border-radius: 50%; background: var(--paint); color: var(--primer); display: grid; place-items: center; }
.px-quoteform__tick svg { width: 32px; height: 32px; }
.px-quoteform__done strong { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.03em; color: var(--ink); }
.px-quoteform__done a { color: var(--paint); }

/* ==========================================================================
   22. REVIEWS
   ========================================================================== */

.px-reviews { background: var(--white); border-radius: var(--r); padding: clamp(16px, 2vw, 28px); min-height: 120px; border: 1px solid var(--rule); box-shadow: var(--shadow); }
.px-reviews--empty { background: transparent; box-shadow: none; border: 1.5px dashed var(--rule-2); color: var(--ink-3); font-size: 16px; }
.px-reviews__fallback { color: var(--ink-2); }

/* ==========================================================================
   23. FOOTER - brand black
   ========================================================================== */

.px-footer { background: var(--ink); color: rgba(246, 235, 207, .7); padding: clamp(64px, 8vw, 110px) var(--gutter) 120px !important; position: relative; }
.px-footer > * { max-width: var(--maxw); margin-inline: auto !important; }
.px-endcard { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; padding-bottom: clamp(36px, 5vw, 64px); }
.px-endcard__head { font-size: clamp(32px, 4.4vw, 62px); letter-spacing: -.035em; max-width: 16ch; color: var(--primer); }
.px-endcard__side { display: flex; flex-direction: column; gap: 22px; }
.px-social { display: flex; gap: 12px; }
.px-social a { width: 48px; height: 48px; border-radius: 50%; background: var(--primer); color: var(--paint); display: flex; }
.px-social a svg { width: 22px; height: 22px; margin: auto; }
.px-social a:hover { opacity: .82; }
.px-endcard__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.px-endcard .px-btn--solid { background: var(--primer); color: var(--paint); box-shadow: none; }
.px-endcard .px-btn--outline { border-color: rgba(246, 235, 207, .45); color: var(--primer); }
.px-phoneicon { width: 20px; height: 20px; }

.px-areas { margin-top: clamp(28px, 4vw, 52px); font-size: 15.5px; }
.px-areas__k { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(246, 235, 207, .55); display: block; margin-bottom: 10px; }
.px-areas__list { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.px-areas__list a { color: rgba(246, 235, 207, .82); text-decoration: none; border: 1px solid rgba(246, 235, 207, .18); border-radius: 999px; padding: 5px 14px; }
.px-areas__list a:hover { border-color: var(--primer); color: var(--primer); }

.px-ftrgrid { display: grid; gap: 36px; grid-template-columns: 1.4fr 1fr 1fr 1fr; margin-top: clamp(36px, 5vw, 64px); }
.px-ftrgrid > div { display: flex; flex-direction: column; gap: 9px; }
.px-ftrgrid a { color: rgba(246, 235, 207, .82); text-decoration: none; }
.px-ftrgrid a:hover { color: var(--primer); }
.px-ftrgrid__h { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(246, 235, 207, .55); margin: 0 0 6px; }

.px-footline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(246, 235, 207, .14); font-size: 15px; color: rgba(246, 235, 207, .55); }
.px-footline__links { display: flex; gap: 20px; }
.px-footline a { color: rgba(246, 235, 207, .82); text-decoration: none; }
.px-footline a:hover { color: var(--primer); }

.px-callbar { display: none; }

/* ==========================================================================
   24. RESPONSIVE
   ========================================================================== */

@media (max-width: 1240px) {
	.px-ftrgrid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1100px) {
	.px-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.px-bento__tile--lg, .px-bento__tile--md { grid-column: span 2; grid-row: auto; min-height: 300px; }
}

@media (max-width: 900px) {
	.px-orow, .px-quoteform, .px-endcard { grid-template-columns: minmax(0, 1fr); }
	.px-quoteform__intro, .px-quoteform__form, .px-quoteform__done { grid-column: 1; grid-row: auto; }
	.px-orow--media-left .px-orow__media, .px-orow--media-right .px-orow__media { order: -1; }
	.px-creds__grid { padding: 22px; }
	.px-cred { grid-template-columns: minmax(0, 1fr); }
	.px-cred__v { text-align: left; grid-column: 1; }
	.px-footline { flex-direction: column; }
}

@media (max-width: 640px) {
	body { font-size: 17px; }
	:root { --band: clamp(44px, 11vw, 64px); }
	.px-bento { grid-template-columns: minmax(0, 1fr); }
	.px-quoteform__form { grid-template-columns: minmax(0, 1fr); }
	.px-field--half { grid-column: 1 / -1; }
	.px-price__row { flex-wrap: wrap; }
	.px-price__row b { justify-content: flex-start; margin-left: 0; flex-basis: 100%; }
	.px-price__row b::before { display: none; }
	.px-footer { padding-bottom: 130px !important; }
	.px-ftrgrid { grid-template-columns: minmax(0, 1fr); }

	.px-callbar {
		display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
		position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		z-index: 55; background: var(--ink); border: 1px solid rgba(246, 235, 207, .2);
		border-radius: 999px; padding: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
	}
	.px-callbar a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 999px; color: var(--primer); font-weight: 800; text-decoration: none; font-size: 16px; }
	.px-callbar svg { width: 18px; height: 18px; }
	.px-callbar__quote { background: var(--paint); color: var(--primer); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	.js .px-reveal, .js .px-sec__h::before, .js .px-faq__head::before, .js .px-pagehero__title::before { clip-path: none; }
	.js .px-steps .px-step__n { transform: none; opacity: 1; }
}

/* ==========================================================================
   25. HOME - founder-led, conversion-first
   ========================================================================== */

/* --- hero: the person behind the business, with the proof around her ------ */
.px-lhero {
	background: var(--paper) !important;
	display: grid; gap: clamp(28px, 4vw, 64px); align-items: center;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	padding-block: clamp(48px, 6vw, 88px) clamp(56px, 7vw, 100px) !important;
	overflow: hidden;
}
.px-lhero__h { font-size: clamp(42px, 5.4vw, 80px); letter-spacing: -.035em; line-height: .98; max-width: 11ch; color: var(--ink); }
.px-lhero__h .px-wet { animation: px-paint 1s .3s cubic-bezier(.6, .05, .25, 1) both; }
.px-lhero__lede { margin-top: 22px; max-width: 54ch; font-size: clamp(18px, 1.5vw, 21px); }
.px-lhero__points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.px-lhero__points li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; color: var(--ink); }
.px-lhero__points svg { flex: 0 0 24px; width: 24px; height: 24px; color: var(--paint); margin-top: 1px; }
.px-lhero__points a { color: var(--paint); }
.px-lhero__btns { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 30px; }
.px-lhero__btns > span { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); }

.px-lhero__visual { position: relative; min-height: 520px; display: grid; place-items: center; }
.px-lhero__blob {
	position: absolute; width: min(100%, 520px); aspect-ratio: 1; border-radius: 50%;
	background: var(--primer); right: -4%; top: 50%; transform: translateY(-50%);
}
.px-lhero__stroke {
	position: absolute; width: 120%; height: 34%; left: -10%; top: 33%;
	background: var(--paint); transform: rotate(-10deg);
	-webkit-mask: var(--stroke-mask) center / 100% 100% no-repeat;
	mask: var(--stroke-mask) center / 100% 100% no-repeat;
}
.js .px-lhero__stroke { clip-path: inset(0 100% 0 0); animation: px-paint 1.2s .1s cubic-bezier(.6, .05, .25, 1) forwards; }
.px-lhero__portrait {
	position: relative; z-index: 2;
	width: clamp(230px, 27vw, 340px); aspect-ratio: 1; border-radius: 50%;
	overflow: hidden; border: 8px solid var(--primer);
	box-shadow: 0 30px 70px rgba(30, 33, 32, .28);
	background: var(--primer);
}
.px-lhero__portrait img { width: 100%; height: 100%; object-fit: cover; }
.px-lhero__name {
	position: absolute; z-index: 3; left: 50%; bottom: 8%; transform: translateX(-50%);
	background: var(--white); border-radius: 14px; padding: 12px 18px;
	box-shadow: var(--shadow); border: 1px solid var(--rule);
	display: flex; flex-direction: column; align-items: center; white-space: nowrap;
}
.px-lhero__name b { font-size: 18px; color: var(--ink); letter-spacing: -.01em; }
.px-lhero__name span { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--paint); font-weight: 700; }

.px-badge {
	position: absolute; z-index: 3;
	display: flex; align-items: center; gap: 12px;
	background: var(--white); border-radius: 14px; padding: 12px 16px 12px 12px;
	box-shadow: var(--shadow); border: 1px solid var(--rule);
	white-space: nowrap;
	animation: px-float 6s ease-in-out infinite;
}
.px-badge svg { width: 22px; height: 22px; color: var(--paint); }
.px-badge__i { width: 42px; height: 42px; border-radius: 50%; background: var(--primer); display: grid; place-items: center; flex-shrink: 0; }
.px-badge__t { display: flex; flex-direction: column; line-height: 1.1; }
.px-badge__t b { font-size: 17px; color: var(--ink); }
.px-badge__t span { font-size: 13px; color: var(--ink-3); }
.px-badge .px-stars svg { width: 12px; height: 12px; }
.px-badge--1 { left: 0; top: 14%; animation-delay: 0s; }
.px-badge--2 { right: -2%; top: 38%; animation-delay: -2s; }
.px-badge--3 { left: 4%; bottom: 22%; animation-delay: -4s; }
@keyframes px-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* --- services grid ------------------------------------------------------- */
.px-lservices { background: var(--primer) !important; }
.px-lgrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); max-width: var(--maxw); margin-inline: auto; }
.px-lcard {
	display: flex; flex-direction: column; gap: 10px;
	background: var(--white); border-radius: var(--r-sm); padding: 24px;
	border: 1px solid var(--rule); box-shadow: 0 6px 18px rgba(30, 33, 32, .05);
	text-decoration: none; color: var(--ink-2);
	transition: transform .3s, box-shadow .3s, border-color .3s;
}
.px-lcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(102, 4, 4, .3); }
.px-lcard__i { width: 50px; height: 50px; border-radius: 50%; background: var(--primer); color: var(--paint); display: grid; place-items: center; margin-bottom: 6px; }
.px-lcard__i svg { width: 26px; height: 26px; }
.px-lcard__t { font-size: 21px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); line-height: 1.05; }
.px-lcard__p { font-size: 15.5px; }
.px-lcard__go { margin-top: auto; padding-top: 6px; font-weight: 800; color: var(--paint); display: inline-flex; gap: 6px; align-items: center; font-size: 15.5px; }
.px-lcard__go svg { width: 16px; height: 16px; transition: transform .25s; }
.px-lcard:hover .px-lcard__go svg { transform: translateX(4px); }

/* the title row above a grid: heading left, lede and/or link right */
.px-lhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(26px, 3.4vw, 46px); max-width: var(--maxw); margin-inline: auto; }
.px-lhead__p { margin-top: 12px; max-width: 58ch; }
.px-lmore { display: inline-flex; align-items: center; gap: 8px; color: var(--paint); font-weight: 800; text-decoration: none; white-space: nowrap; padding-bottom: 8px; }
.px-lmore:hover { text-decoration: underline; text-underline-offset: 5px; }
.px-lmore svg { width: 18px; height: 18px; }

/* --- stats band ---------------------------------------------------------- */
.px-lstats { background: var(--ink) !important; padding-block: clamp(40px, 5vw, 64px) !important; }
.px-lstats__in { display: grid; gap: 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--maxw); margin-inline: auto; }
.px-lstat { display: flex; flex-direction: column; gap: 6px; padding-left: 20px; border-left: 3px solid var(--paint); }
.px-lstat b { font-size: clamp(38px, 4.4vw, 60px); font-weight: 900; letter-spacing: -.03em; color: var(--primer); line-height: 1; }
.px-lstat span { font-size: 16px; color: rgba(246, 235, 207, .72); }
.px-lstat .px-stars { margin-top: 4px; }

/* --- the team ------------------------------------------------------------ */
.px-lteam { display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; max-width: var(--maxw); margin-inline: auto; }
.px-lfilm { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; background: var(--ink); box-shadow: var(--shadow-2); }
.px-lfilm video { width: 100%; height: 100%; object-fit: cover; }
.px-lteam__copy p { font-size: 18px; }
.px-lquote { margin: 26px 0 0; padding: 22px 26px; border-left: 4px solid var(--paint); background: var(--primer-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 18px; color: var(--ink); }
.px-lquote footer { margin-top: 10px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--paint); font-weight: 700; display: flex; align-items: center; gap: 10px; }
.px-lquote footer img { width: 34px; height: 34px; border-radius: 50%; }

/* --- why choose ---------------------------------------------------------- */
.px-lwhy { background: var(--primer) !important; }
.px-lwhy .px-lgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.px-lwhy .px-lcard { cursor: default; }
.px-lwhy .px-lcard:hover { transform: none; box-shadow: 0 6px 18px rgba(30, 33, 32, .05); border-color: var(--rule); }

/* --- reviews ------------------------------------------------------------- */
.px-lrev__sum {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px;
	background: var(--white); border: 1px solid var(--rule); border-radius: 999px;
	padding: 16px 28px; margin: 0 auto 26px; width: fit-content; box-shadow: var(--shadow);
}
.px-lrev__sum b { font-size: 26px; color: var(--ink); }
.px-lrev__sum .px-stars svg { width: 20px; height: 20px; }
.px-lrev__sum span { color: var(--ink-2); }
.px-lrev__foot { display: flex; justify-content: center; margin-top: 28px; }
.px-lrev .px-lhead { justify-content: center; text-align: center; }
.px-lrev .px-lhead > div { display: flex; flex-direction: column; align-items: center; }

/* --- areas --------------------------------------------------------------- */
.px-lareas { background: var(--primer) !important; }
.px-lareas__list { display: flex; flex-wrap: wrap; gap: 10px; max-width: var(--maxw); margin-inline: auto; }
.px-lareas__list a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); background: var(--white); border: 1px solid var(--rule); border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 16px; transition: border-color .2s, color .2s; }
.px-lareas__list a:hover { border-color: var(--paint); color: var(--paint); }
.px-lareas__list svg { width: 16px; height: 16px; color: var(--paint); }

/* --- faq on the home page ------------------------------------------------ */
.px-lfaq { display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); max-width: var(--maxw); margin-inline: auto; }
.px-lfaq__side .px-lhead__p a { color: var(--paint); font-weight: 800; }

/* --- closing call -------------------------------------------------------- */
.px-lcta { background: var(--ink) !important; color: rgba(246, 235, 207, .8); }
.px-lcta__in { display: grid; gap: 28px; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; max-width: var(--maxw); margin-inline: auto; }
.px-lcta h2 { font-size: clamp(32px, 4.2vw, 58px); color: var(--primer); letter-spacing: -.03em; }
.px-lcta h2 em { font-style: normal; color: #d8a5a0; }
.px-lcta p { max-width: 50ch; font-size: 18px; margin-top: 16px; }
.px-lcta__btns { display: flex; flex-wrap: wrap; gap: 14px 22px; justify-self: end; }
.px-lcta__btns > span { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(246, 235, 207, .6); }

/* --- process on the home page keeps the swatches ------------------------- */
.px-lprocess .px-steps { max-width: var(--maxw); margin-inline: auto; }

/* the home page sets its own rhythm of surfaces, band by band */
.px-lteamwrap, .px-lrev, .px-lareas { background: var(--paper) !important; }
.px-lservices, .px-lwhy, .px-lprocess, .px-lfaqwrap { background: var(--primer) !important; }

@media (max-width: 1100px) {
	.px-lstats__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.px-lwhy .px-lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.px-lhero { grid-template-columns: minmax(0, 1fr); }
	.px-lhero__visual { min-height: 440px; order: -1; }
	.px-lhero__h { max-width: none; }
	.px-lteam, .px-lfaq, .px-lcta__in { grid-template-columns: minmax(0, 1fr); }
	.px-lcta__btns { justify-self: start; }
	.px-lhead { flex-direction: column; align-items: flex-start; }
	.px-badge--1 { left: -2%; top: 6%; }
	.px-badge--2 { right: -4%; top: 30%; }
	.px-badge--3 { left: 0; bottom: 30%; }
	.px-lhero__name { bottom: 2%; }
	.px-lhero__visual { min-height: 480px; }
}

@media (max-width: 640px) {
	.px-lhero__visual { min-height: 400px; }
	.px-lwhy .px-lgrid { grid-template-columns: minmax(0, 1fr); }
	.px-badge { padding: 9px 12px 9px 9px; }
	.px-badge__i { width: 34px; height: 34px; }
	.px-badge__t b { font-size: 15px; }
	.px-lstats__in { grid-template-columns: minmax(0, 1fr); }
	.px-lhero__btns > span { width: 100%; }
	.px-lhero__btns .px-btn { width: 100%; }
}

/* ==========================================================================
   26. THE FINISH - choreography, texture and detail
   ========================================================================== */

/* entrance: copy rises line by line, the portrait lands, the badges pop */
@keyframes px-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes px-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes px-land { from { opacity: 0; transform: scale(.86) translateY(16px); } to { opacity: 1; transform: none; } }
.js .px-lhero__copy > * { animation: px-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.js .px-lhero__copy > :nth-child(1) { animation-delay: .05s; }
.js .px-lhero__copy > :nth-child(2) { animation-delay: .15s; }
.js .px-lhero__copy > :nth-child(3) { animation-delay: .3s; }
.js .px-lhero__copy > :nth-child(4) { animation-delay: .42s; }
.js .px-lhero__copy > :nth-child(5) { animation-delay: .54s; }
.js .px-lhero__blob { animation: px-pop 1.1s .1s cubic-bezier(.2, .8, .2, 1) both; }
.js .px-lhero__portrait { animation: px-land 1s .5s cubic-bezier(.2, .8, .2, 1) both; }
.js .px-lhero__name { animation: px-rise .8s 1s cubic-bezier(.2, .8, .2, 1) both; }
.px-badgewrap { position: absolute; z-index: 3; }
.js .px-badgewrap { animation: px-pop .7s cubic-bezier(.2, .8, .2, 1) both; }
.px-badgewrap--1 { left: 0; top: 14%; animation-delay: 1.15s !important; }
.px-badgewrap--2 { right: -2%; top: 38%; animation-delay: 1.3s !important; }
.px-badgewrap--3 { left: 4%; bottom: 22%; animation-delay: 1.45s !important; }
.px-badgewrap .px-badge { position: static; }
.px-badgewrap--2 .px-badge { animation-delay: -2s; }
.px-badgewrap--3 .px-badge { animation-delay: -4s; }
.px-lhero__portrait img { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.px-lhero__visual:hover .px-lhero__portrait img { transform: scale(1.05); }

/* the hero ground: paper warming to cream as it meets the strip below */
.px-lhero { background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 70%, var(--primer-2) 100%) !important; }

/* a strip of what we do, rolling past under the hero */
.px-marquee {
	background: var(--paint) !important; color: var(--primer);
	padding: 16px 0 !important; overflow: hidden; white-space: nowrap;
	-webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.px-marquee__track { display: inline-flex; gap: 0; animation: px-marquee 48s linear infinite; will-change: transform; }
.px-marquee:hover .px-marquee__track { animation-play-state: paused; }
.px-marquee__track > span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-size: 17px; font-weight: 800; letter-spacing: .02em; text-transform: lowercase; }
.px-marquee__track svg { width: 18px; height: 18px; color: var(--primer); opacity: .7; }
@keyframes px-marquee { to { transform: translateX(-50%); } }

/* services: numbered, and the icon disc fills with paint on hover */
.px-lcard { position: relative; }
.px-lcard__n { position: absolute; top: 18px; right: 20px; font-size: 13px; font-weight: 800; letter-spacing: .14em; color: var(--paint); opacity: .55; }
.px-lcard__i { transition: background .3s, color .3s, transform .3s; }
.px-lcard:hover .px-lcard__i { background: var(--paint); color: var(--primer); transform: rotate(-8deg); }

/* cards arrive with a beat between them */
.js .px-lgrid > *, .js .px-tilegrid > *, .js .px-postgrid > * { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s; }
.js .in > * { opacity: 1; transform: none; }
.js .in > :nth-child(2) { transition-delay: .06s; } .js .in > :nth-child(3) { transition-delay: .12s; }
.js .in > :nth-child(4) { transition-delay: .18s; } .js .in > :nth-child(5) { transition-delay: .24s; }
.js .in > :nth-child(6) { transition-delay: .3s; }  .js .in > :nth-child(7) { transition-delay: .36s; }
.js .in > :nth-child(8) { transition-delay: .42s; } .js .in > :nth-child(9) { transition-delay: .48s; }
.js .in > :nth-child(10) { transition-delay: .54s; }
.js .px-lgrid.in .px-lcard:hover { transform: translateY(-4px); }

/* the stats band tears in along a brushed edge, and the numbers count up */
.px-lstats { -webkit-mask: var(--tear-mask) top / 100% 100% no-repeat; mask: var(--tear-mask) top / 100% 100% no-repeat; padding-top: clamp(64px, 7vw, 92px) !important; }
.px-lstat b { font-variant-numeric: tabular-nums; }

/* the team: a caption sits on the film */
.px-lfilm { position: relative; }
.px-lfilm__cap {
	position: absolute; left: 18px; bottom: 18px; z-index: 2;
	background: var(--primer); color: var(--ink); border-radius: 12px; padding: 10px 14px;
	font-size: 14px; font-weight: 700; letter-spacing: .04em; box-shadow: var(--shadow);
	pointer-events: none;
}
.px-lquote { font-size: 20px; line-height: 1.45; position: relative; padding-left: 34px; }
.px-lquote::before { content: "\201C"; position: absolute; left: 10px; top: 6px; font-size: 64px; line-height: 1; font-weight: 900; color: var(--paint); opacity: .35; }

/* primary buttons: a sweep of darker paint on hover */
.px-btn--solid, .px-btn--quote, .px-btn--ox, .px-topnav__cta {
	background-image: linear-gradient(110deg, var(--paint-d) 0 50%, var(--paint) 50%);
	background-size: 220% 100%; background-position: right;
	transition: transform .15s, background-position .45s cubic-bezier(.2, .8, .2, 1), box-shadow .2s;
}
.px-btn--solid:hover, .px-btn--quote:hover, .px-btn--ox:hover, .px-topnav__cta:hover { background-position: left; }

/* the header settles as you scroll */
.px-header { transition: min-height .3s, box-shadow .25s; }
.wp-site-blocks > header.is-stuck .px-header { min-height: 64px; }

/* the footer carries the wordmark like a watermark */
.px-footer { overflow: hidden; }
.px-footer::before {
	content: "paintX"; position: absolute; right: -2vw; bottom: -6vw; z-index: 0;
	font-size: 26vw; font-weight: 900; line-height: .8; letter-spacing: -.06em;
	color: transparent; -webkit-text-stroke: 2px rgba(246, 235, 207, .08);
	pointer-events: none; user-select: none;
}
.px-footer > * { position: relative; z-index: 1; }

/* lower bands render when they are needed */
.px-lprocess, .px-lareas, .px-lfaqwrap { content-visibility: auto; contain-intrinsic-size: 1px 700px; }

@media (max-width: 900px) {
	.px-badgewrap--1 { left: -2%; top: 6%; }
	.px-badgewrap--2 { right: -4%; top: 30%; }
	.px-badgewrap--3 { left: 0; bottom: 30%; }
	.px-badge--1, .px-badge--2, .px-badge--3 { position: static; }
}
@media (prefers-reduced-motion: reduce) {
	.js .px-lgrid > *, .js .px-tilegrid > *, .js .px-postgrid > * { opacity: 1; transform: none; }
	.px-marquee__track { animation: none; }
}

/* the team band uses a still in a clean rounded frame */
.px-lfilm--still { border-radius: var(--r); box-shadow: var(--shadow-2); aspect-ratio: 4 / 3; overflow: hidden; background: var(--primer); }
.px-lfilm--still img { width: 100%; height: 100%; object-fit: cover; }
.px-lfilm--still .px-lfilm__cap { left: 24px; bottom: 24px; }

/* ==========================================================================
   27. PHOTOGRAPHY AND THE PICKER
   ========================================================================== */

/* service cards open on a photograph; the icon disc sits on its edge */
.px-lcard--photo { padding: 0 0 22px; overflow: hidden; }
.px-lcard__shot { display: block; aspect-ratio: 16 / 11; margin-bottom: 34px; position: relative; }
.px-lcard__img { position: absolute; inset: 0; display: block; overflow: hidden; }
.px-lcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.px-lcard--photo:hover .px-lcard__img img { transform: scale(1.06); }
.px-lcard--photo .px-lcard__i { position: absolute; left: 20px; bottom: -25px; margin: 0; border: 4px solid var(--white); box-shadow: var(--shadow); }
.px-lcard--photo .px-lcard__n { top: 14px; right: 16px; background: rgba(250, 251, 252, .9); border-radius: 999px; padding: 4px 10px; opacity: 1; }
.px-lcard--photo .px-lcard__t, .px-lcard--photo .px-lcard__p, .px-lcard--photo .px-lcard__go { padding-inline: 22px; }
.px-lcard--photo .px-lcard__t { margin-top: 4px; }
.px-lservices .px-lgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* who we help */
.px-lgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.px-lwho { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink-2); }
.px-lwho__img { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 6px; border-radius: var(--r); }
.px-lwho__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.px-lwho:hover .px-lwho__img img { transform: scale(1.06); }
.px-lwho__t { font-size: 28px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.px-lwho:hover .px-lwho__t { color: var(--paint); }
.px-lwho__p { font-size: 16.5px; }
.px-lwhowrap { background: var(--primer) !important; }
.px-lwhy { background: var(--paper) !important; }
.px-lrev { background: var(--primer) !important; }
.px-lprocess { background: var(--paper) !important; }
.px-lareas { background: var(--primer) !important; }
.px-ljournal { background: var(--paper) !important; }
.px-lfaqwrap { background: var(--primer) !important; }
.px-lpick { background: var(--paper) !important; }

/* the picker: tap a job, the form fills itself */
.px-pick__grid { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: var(--maxw); margin-inline: auto; }
.px-pick {
	display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
	min-height: 112px; padding: 16px; border-radius: var(--r-sm);
	background: var(--white); border: 2px solid var(--rule); color: var(--ink);
	font: inherit; font-weight: 800; font-size: 17px; text-align: left; cursor: pointer;
	transition: border-color .2s, transform .2s, box-shadow .2s, background .2s, color .2s;
}
.px-pick svg { width: 26px; height: 26px; color: var(--paint); transition: color .2s; }
.px-pick span { margin-top: auto; }
.px-pick:hover { border-color: var(--paint); transform: translateY(-3px); box-shadow: var(--shadow); }
.px-pick.is-on { background: var(--paint); border-color: var(--paint); color: var(--primer); }
.px-pick.is-on svg { color: var(--primer); }
.px-pick:focus-visible { outline-offset: 2px; }

/* the form acknowledges the pick */
.px-quoteform.is-picked .px-field--service { animation: px-nudge .8s ease; }
@keyframes px-nudge { 0%, 100% { transform: none; } 30% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }

@media (max-width: 1240px) { .px-lservices .px-lgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
	.px-lservices .px-lgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.px-pick__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.px-lservices .px-lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.px-lgrid--3 { grid-template-columns: minmax(0, 1fr); }
	.px-pick__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.px-lservices .px-lgrid { grid-template-columns: minmax(0, 1fr); }
	.px-pick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.px-pick { min-height: 96px; font-size: 16px; }
}
.px-lareas__all { display: inline-flex; align-items: center; padding: 10px 6px; font-size: 16px; color: var(--ink-3); font-style: italic; }

/* ==========================================================================
   28. QUESTIONS - numbered cards, one open at a time, and a way to ask
   ========================================================================== */
.px-lfaq { align-items: start; }
.px-lfaq__side { position: sticky; top: 110px; }
.px-lfaq__side .px-lhead { display: block; margin-bottom: 26px; }
.px-lfaq__side .px-lhead__p { max-width: 38ch; }

.px-ask { display: flex; gap: 14px; align-items: flex-start; background: var(--white); border: 1px solid var(--rule); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); }
.px-ask img { width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--primer); flex-shrink: 0; }
.px-ask__body { display: flex; flex-direction: column; gap: 6px; }
.px-ask__body b { font-size: 19px; color: var(--ink); letter-spacing: -.01em; }
.px-ask__body > span { font-size: 15px; color: var(--ink-2); }
.px-ask__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.px-ask__acts .px-btn--sm { height: 42px; padding: 0 16px; font-size: 15px; }

.px-faq--cards { border-top: 0; max-width: none; display: flex; flex-direction: column; gap: 10px; }
.px-faq--cards .px-faq__row {
	border: 1px solid var(--rule); border-radius: 16px; background: rgba(255, 255, 255, .55);
	transition: background .25s, box-shadow .25s, border-color .25s, transform .25s;
}
.px-faq--cards .px-faq__row:hover { background: var(--white); border-color: rgba(102, 4, 4, .25); }
.px-faq--cards .px-faq__row[open] { background: var(--white); box-shadow: var(--shadow); border-color: transparent; }
.px-faq--cards summary { padding: 18px 20px; gap: 14px; align-items: center; font-size: clamp(17px, 1.7vw, 20px); }
.px-faq--cards .px-faq__n { flex: 0 0 auto; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--paint); opacity: .8; min-width: 26px; }
.px-faq--cards .px-faq__q { flex: 1 1 auto; }
.px-faq--cards summary::after { flex-basis: 36px; height: 36px; background-color: var(--primer); border-color: transparent; }
.px-faq--cards .px-faq__row[open] summary::after { background-color: var(--paint); background-image: linear-gradient(var(--primer), var(--primer)), linear-gradient(var(--primer), var(--primer)); }
.px-faq--cards .px-faq__a { padding: 0 20px 20px 60px; max-width: none; }
.px-faq--cards .px-faq__a p { font-size: 17px; color: var(--ink-2); max-width: 64ch; }

/* the answer unfolds where the browser can animate height; elsewhere it simply appears */
.px-faq--cards .px-faq__a { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.px-faq--cards .px-faq__a > div { overflow: hidden; }
.px-faq--cards .px-faq__row[open] .px-faq__a { grid-template-rows: 1fr; opacity: 1; }
.px-faq--cards .px-faq__row[open] summary .px-faq__q { color: var(--paint); }

@media (max-width: 900px) {
	.px-lfaq__side { position: static; }
	.px-faq--cards .px-faq__a { padding-left: 20px; }
}

/* ==========================================================================
   29. JOURNAL - one lead article, two beside it, clean frames
   ========================================================================== */
.px-jgrid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); max-width: var(--maxw); margin-inline: auto; align-items: stretch; }
.px-jgrid a { text-decoration: none; color: inherit; }

.px-jtag {
	display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px;
	background: var(--paint); color: var(--primer); font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.px-jtag--plain { height: auto; padding: 0; background: none; color: var(--paint); }
.px-jtitle { display: block; font-weight: 900; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); transition: color .2s; }
.px-jsf { display: block; color: var(--ink-2); line-height: 1.5; }
.px-jmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14.5px; color: var(--ink-3); }
.px-jmeta b { color: var(--ink); font-weight: 800; }
.px-jmeta img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--primer); }
.px-jgo { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 800; color: var(--paint); }
.px-jgo svg { width: 18px; height: 18px; transition: transform .25s; }

/* the lead */
.px-jfeat { display: flex; flex-direction: column; gap: 22px; }
.px-jfeat__shot { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--primer); box-shadow: var(--shadow); }
.px-jfeat__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.px-jfeat__shot .px-jtag { position: absolute; left: 18px; top: 18px; box-shadow: 0 6px 18px rgba(30, 33, 32, .25); }
.px-jfeat__body { display: flex; flex-direction: column; gap: 14px; }
.px-jfeat .px-jtitle { font-size: clamp(26px, 2.5vw, 36px); max-width: 26ch; }
.px-jfeat .px-jsf { font-size: 17.5px; max-width: 58ch; }
.px-jfeat .px-jmeta { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--rule); }
.px-jfeat:hover .px-jfeat__shot img, .px-jfeat:focus-visible .px-jfeat__shot img { transform: scale(1.04); }
.px-jfeat:hover .px-jtitle { color: var(--paint); }
.px-jfeat:hover .px-jgo svg { transform: translateX(4px); }

/* the two beside it */
.px-jside { display: flex; flex-direction: column; min-height: 100%; }
.px-jcard {
	display: grid; grid-template-columns: 164px minmax(0, 1fr); gap: 22px; align-items: start; align-content: start;
	flex: 1 1 0; padding: 22px 0; border-top: 1px solid var(--rule);
	transition: transform .25s;
}
.px-jcard:first-child { border-top: 0; padding-top: 0; }

.px-jcard__shot { display: block; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--primer); }
.px-jcard__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.px-jcard__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.px-jcard .px-jtitle { font-size: clamp(19px, 1.5vw, 22px); }
.px-jcard .px-jsf { font-size: 15.5px; }
.px-jcard .px-jmeta { margin-top: 4px; font-size: 13.5px; }
.px-jcard .px-jgo { font-size: 14px; }
.px-jcard .px-jgo svg { width: 15px; height: 15px; }
.px-jcard:hover .px-jcard__shot img { transform: scale(1.06); }
.px-jcard:hover .px-jtitle { color: var(--paint); }
.px-jcard:hover .px-jgo svg { transform: translateX(3px); }

/* the way to the rest */
.px-jall {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 0;
	padding: 20px 22px; border-radius: var(--r-sm); background: var(--primer); color: var(--ink);
	transition: background .25s, transform .25s;
}
.px-jall > span { display: flex; flex-direction: column; gap: 3px; }
.px-jall b { font-size: 19px; font-weight: 900; letter-spacing: -.01em; }
.px-jall > span > span { font-size: 14.5px; color: var(--ink-2); }
.px-jall svg { width: 22px; height: 22px; color: var(--paint); flex-shrink: 0; transition: transform .25s; }
.px-jall:hover { background: var(--primer-2); }
.px-jall:hover svg { transform: translateX(4px); }


/* arrive in sequence, like the other grids */
.js .px-jgrid .px-jfeat, .js .px-jgrid .px-jcard, .js .px-jgrid .px-jall { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); }
.js .px-jgrid.in .px-jfeat { opacity: 1; transform: none; }
.js .px-jgrid.in .px-jcard { opacity: 1; transform: none; }
.js .px-jgrid.in .px-jcard:nth-child(1) { transition-delay: .12s; }
.js .px-jgrid.in .px-jcard:nth-child(2) { transition-delay: .24s; }
.js .px-jgrid.in .px-jall { opacity: 1; transform: none; transition-delay: .36s; }

@media (max-width: 980px) {
	.px-jgrid { grid-template-columns: minmax(0, 1fr); }
	.px-jfeat .px-jtitle { max-width: none; }
	.px-jcard:first-child { border-top: 1px solid var(--rule); padding-top: 22px; }
}
@media (max-width: 520px) {
	.px-jcard { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
	.px-jcard .px-jsf { display: none; }
	.px-jfeat__shot { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
	.js .px-jgrid .px-jfeat, .js .px-jgrid .px-jcard, .js .px-jgrid .px-jall { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   30. AUDIT FIXES (2 Oct 2026) - tap targets and the quote form's feedback
   ========================================================================== */
.px-lareas__list a { min-height: 44px; }
.px-qalt__tel, .px-qalt__mail { display: inline-flex; align-items: center; min-height: 44px; }
.px-quoteform__privacy a { display: inline-block; padding-block: 5px; }

.px-field__err { margin: 6px 4px 0; font-size: 14.5px; font-weight: 700; color: var(--paint); display: flex; gap: 6px; align-items: flex-start; }
.px-field__err::before { content: "!"; flex: 0 0 18px; height: 18px; border-radius: 50%; background: var(--paint); color: var(--primer); font-size: 12px; font-weight: 900; display: grid; place-items: center; margin-top: 1px; }
.px-field.is-invalid input, .px-field.is-invalid select, .px-field.is-invalid textarea { border-color: var(--paint); box-shadow: 0 0 0 3px rgba(102, 4, 4, .14); }
.px-quoteform__submit[aria-busy="true"] { opacity: .75; cursor: progress; pointer-events: none; }
.px-quoteform__submit[aria-busy="true"] svg { animation: px-send 1s linear infinite; }
@keyframes px-send { 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .px-quoteform__submit[aria-busy="true"] svg { animation: none; } }


/* ==========================================================================
   29. 8 OCT 2026 REVIEW PASS
   - the roller stroke is a signature, so it is rationed: a heading only gets
     it with .px-sec__h--wet (home: services and process). Page heroes keep theirs.
   - reviews on the home page are a compact dark band that sends people to the
     live feed, instead of a second, off-brand copy of it.
   - questions sit as a plain ruled list, not another stack of cards.
   - nothing that carries meaning is set below 13px.
   ========================================================================== */
.px-sec__h:not(.px-sec__h--wet) { display: block; padding: 0; color: var(--ink); isolation: auto; }
.px-sec__h:not(.px-sec__h--wet)::before { content: none; display: none; }
.px-lstats .px-sec__h:not(.px-sec__h--wet) { color: var(--primer); }

.px-lrev--band { background: var(--ink) !important; padding-block: clamp(56px, 7vw, 96px) !important; }
.px-lrev--band .px-kicker { color: var(--gold); }
.px-lrev--band .px-sec__h:not(.px-sec__h--wet) { color: var(--primer); margin-inline: auto; text-align: center; }
.px-lrev--band .px-lrev__sum { background: transparent; border-color: rgba(246, 235, 207, .22); box-shadow: none; }
.px-lrev--band .px-lrev__sum b { color: var(--primer); }
.px-lrev--band .px-lrev__sum span { color: rgba(246, 235, 207, .82); }
.px-lrev--band .px-lrev__foot { gap: 14px; flex-wrap: wrap; }
.px-lrev--band .px-btn--outline { color: var(--primer); border-color: rgba(246, 235, 207, .5); background: transparent; }
.px-lrev--band .px-btn--outline:hover, .px-lrev--band .px-btn--outline:focus-visible { background: var(--primer); color: var(--ink); }

.px-lfaq .px-faq--cards { gap: 0 !important; }
.px-lfaq .px-faq--cards > * { background: transparent !important; box-shadow: none !important; border: 0 !important; border-bottom: 1px solid var(--rule-2) !important; border-radius: 0 !important; }
.px-lfaq .px-faq--cards > *:first-child { border-top: 1px solid var(--rule-2) !important; }

.px-jtag, .px-qperson > div:first-of-type span, .px-faq--cards .px-faq__n, .px-bar__telbody small, .px-field__err::before { font-size: 13px !important; }
.px-field:focus-within label, .px-field:not(:has(:placeholder-shown)) label, .px-field--select label { font-size: 13px; }

/* service pages: breadcrumb and call/quote pair in the hero, and a related band before the questions */
.px-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink-2); margin-bottom: 18px; }
.px-crumbs a { color: var(--ink-2); text-decoration: none; padding-block: 6px; }
.px-crumbs a:hover, .px-crumbs a:focus-visible { color: var(--paint); text-decoration: underline; }
.px-crumbs [aria-current] { color: var(--paint); }
.px-pagehero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.px-related { max-width: var(--maxw); margin-inline: auto; padding: clamp(48px, 6vw, 80px) var(--gutter); box-sizing: content-box; }
.px-related__grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; }
.px-related__card { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--white); color: var(--ink); text-decoration: none; min-height: 132px; transition: border-color .2s ease, transform .2s ease; }
.px-related__card b { font-size: 19px; line-height: 1.25; }
.px-related__card svg { margin-top: auto; color: var(--paint); }
.px-related__k { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--paint); }
.px-related__card:hover, .px-related__card:focus-visible { border-color: var(--paint); transform: translateY(-2px); }
@media (max-width: 980px) { .px-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .px-related__grid { grid-template-columns: minmax(0, 1fr); } .px-related__card { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .px-related__card { transition: none; } .px-related__card:hover { transform: none; } }

/* a row whose photo lives elsewhere on the site: the card takes the full width */
.px-orow.px-orow--text { grid-template-columns: minmax(0, 1fr) !important; }
.px-orow.px-orow--text .px-orow__card { max-width: 860px; }
/* question headings drop the stroke too; page titles keep it */
.px-faq__head { display: block; padding: 0; color: var(--ink); isolation: auto; }
.px-faq__head::before { content: none; display: none; }

/* region pages (/areas/) */
.px-areapage__subs, .px-areapage__near { max-width: var(--maxw); margin-inline: auto; padding: clamp(40px, 5vw, 64px) var(--gutter) 0; box-sizing: content-box; }
.px-areapage__near { padding-bottom: clamp(48px, 6vw, 80px); }
.px-areapage__near .px-lareas__list { margin: 20px 0 0; }
.px-sublist { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.px-sublist li { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--ink); }
.px-sublist svg { color: var(--paint); flex: none; }
.px-sublist__more { color: var(--ink-3) !important; font-style: italic; }
@media (max-width: 980px) { .px-sublist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.px-lareas__list a.px-lareas__all { background: none; border: 0; padding-inline: 6px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.px-areaindex .px-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .px-areaindex .px-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .px-areaindex .px-related__grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   31. HERO v2 (8 Oct 2026)
   - the buttons sit inside the first screen on a laptop and a phone
   - call is the primary button on phones, the quote form on desktop
   - the rating sits under the buttons; the guarantee is said once
   - a tall photo of Affy in a clean rounded frame, the stroke behind it
   - one motion: the stroke paints in behind "pain" and behind the photo
   ========================================================================== */
.px-lhero--v2 { align-items: center; padding-block: clamp(36px, 4.5vw, 64px) clamp(48px, 5vw, 76px) !important; }
.px-lhero--v2 .px-lhero__h { max-width: 12ch; }
.px-lhero__pre { display: block; font-size: max(.27em, 17px); letter-spacing: 0; line-height: 1.2; font-weight: 800; color: var(--paint); margin-bottom: .45em; }
.px-lhero--v2 .px-lhero__lede { margin-top: 20px; max-width: 46ch; }
.px-lhero--v2 .px-lhero__btns { margin-top: 26px; gap: 12px; }
.px-lhero--v2 .px-lhero__btns--desk { display: none; }
.px-lhero__reply { margin: 12px 0 0; font-size: 15px; color: var(--ink-3); }
.px-lhero__proof { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); max-width: 52ch; }
.px-lhero__rating { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; color: var(--ink-2); }
.px-lhero__rating b { color: var(--ink); font-size: 18px; margin-right: 2px; }
.px-lhero__rating .px-stars svg { width: 18px; height: 18px; }
.px-lhero__creds { margin: 8px 0 0; font-size: 15px; color: var(--ink-3); }

.px-lhero--v2 .px-lhero__visual { min-height: 0; display: block; position: relative; justify-self: end; width: clamp(300px, 31vw, 450px); }
.px-lhero--v2 .px-lhero__portrait { width: 100%; aspect-ratio: 4 / 5; border-radius: 22px; border: 0; box-shadow: 0 30px 70px rgba(30, 33, 32, .22); }
.px-lhero--v2 .px-lhero__portrait img { object-position: 50% 30%; transition: none; }
.px-lhero--v2 .px-lhero__visual:hover .px-lhero__portrait img { transform: none; }
.px-lhero--v2 .px-lhero__stroke { width: 150%; height: 30%; left: -32%; top: 40%; transform: rotate(-9deg); z-index: 1; }
.px-lhero--v2 .px-lhero__name { left: -28px; right: auto; bottom: 28px; transform: none; text-align: left; align-items: flex-start; max-width: 270px; }
.px-lhero--v2 .px-lhero__name span { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ink-3); font-size: 14px; line-height: 1.3; }

/* one motion only */
.js .px-lhero--v2 .px-lhero__copy > *, .js .px-lhero--v2 .px-lhero__portrait, .js .px-lhero--v2 .px-lhero__name { animation: none !important; }

@media (min-width: 981px) {
  .px-lhero--v2 .px-lhero__btns--touch { display: none; }
  .px-lhero--v2 .px-lhero__btns--desk { display: flex; }
}
@media (max-width: 980px) {
  .px-lhero--v2 { padding-top: 24px !important; }
  .px-lhero--v2 .px-lhero__visual { order: 0; justify-self: stretch; width: auto; display: flex; align-items: center; gap: 14px; }
  .px-lhero--v2 .px-lhero__stroke { display: none; }
  .px-lhero--v2 .px-lhero__portrait { flex: 0 0 76px; width: 76px; aspect-ratio: 1; border-radius: 50%; box-shadow: none; border: 3px solid var(--primer); }
  .px-lhero--v2 .px-lhero__name { position: static; transform: none; box-shadow: none; border: 0; background: none; padding: 0; max-width: none; }
  .px-lhero--v2 .px-lhero__btns .px-btn { flex: 1 1 100%; justify-content: center; }
}

/* mobile header: the phone as an icon button beside get a quote */
@media (max-width: 1100px) {
  .px-bar__tel { display: inline-flex; }
  .px-bar__telbody { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .px-bar__telicon { width: 44px; height: 44px; }
}
@media (max-width: 420px) { .px-bar__cta { gap: 8px; } }

.px-lhero--v2 .px-lhero__h { max-width: 11ch; }
.px-lhero--v2 .px-lhero__visual { width: clamp(280px, 27vw, 400px); }
.px-lhero--v2 .px-lhero__stroke { width: 135%; left: -22%; top: 46%; height: 26%; }

.px-lhero--v2 .px-lhero__name, .px-lhero--v2 .px-lhero__name span { white-space: normal; }
.px-lhero--v2 .px-lhero__name { width: 250px; }
@media (max-width: 980px) { .px-lhero--v2 .px-lhero__name { width: auto; } }

/* bigger roller pass behind Affy (8 Oct, 18:15) */
.px-lhero--v2 .px-lhero__stroke { width: 185%; height: 58%; left: -55%; top: 24%; transform: rotate(-7deg); }

/* the painted wall behind Affy, with a rolled edge, and one drip from the stroke (8 Oct, 18:25) */
.px-lhero--v2 { position: relative; overflow: hidden; }
.px-lhero--v2 > * { position: relative; z-index: 1; }
.px-lhero--v2::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; right: 0; width: 44%; background: var(--primer); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M100%200V100H6.0L6.0%20100L8.0%2097.5L11.1%2095L8.3%2092.5L11.3%2090L10.8%2087.5L11.7%2085L8.6%2082.5L6.2%2080L9.3%2077.5L7.6%2075L12.5%2072.5L10.5%2070L12.4%2067.5L8.6%2065L11.9%2062.5L7.1%2060L9.0%2057.5L12.6%2055L11.1%2052.5L6.4%2050L9.9%2047.5L9.0%2045L8.9%2042.5L8.4%2040L12.5%2037.5L7.2%2035L8.0%2032.5L9.0%2030L9.7%2027.5L7.6%2025L9.2%2022.5L10.4%2020L9.6%2017.5L10.8%2015L8.8%2012.5L7.8%2010L8.5%207.5L8.7%205L6.9%202.5L6.5%200Z%22%2F%3E%3C%2Fsvg%3E") left / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M100%200V100H6.0L6.0%20100L8.0%2097.5L11.1%2095L8.3%2092.5L11.3%2090L10.8%2087.5L11.7%2085L8.6%2082.5L6.2%2080L9.3%2077.5L7.6%2075L12.5%2072.5L10.5%2070L12.4%2067.5L8.6%2065L11.9%2062.5L7.1%2060L9.0%2057.5L12.6%2055L11.1%2052.5L6.4%2050L9.9%2047.5L9.0%2045L8.9%2042.5L8.4%2040L12.5%2037.5L7.2%2035L8.0%2032.5L9.0%2030L9.7%2027.5L7.6%2025L9.2%2022.5L10.4%2020L9.6%2017.5L10.8%2015L8.8%2012.5L7.8%2010L8.5%207.5L8.7%205L6.9%202.5L6.5%200Z%22%2F%3E%3C%2Fsvg%3E") left / 100% 100% no-repeat; pointer-events: none; }
.px-lhero--v2 .px-lhero__visual::after { content: ""; position: absolute; z-index: 1; width: 22px; height: 70px; left: -24%; top: 78%; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%20120%22%3E%3Cpath%20fill%3D%22%23660404%22%20d%3D%22M2%200h36c-6%206-9%2014-10%2026-1%2014-1%2030-2%2050-1%2014-2%2026%200%2032%203%209-3%2012-6%2012s-9-3-6-12c2-6%201-18%200-32-1-20-1-36-2-50C11%2014%208%206%202%200z%22%2F%3E%3C%2Fsvg%3E") top / 100% 100% no-repeat; pointer-events: none; }
.px-lhero--v2 .px-lhero__portrait { z-index: 2; }
@media (max-width: 980px) { .px-lhero--v2::before, .px-lhero--v2 .px-lhero__visual::after { display: none; } }

/* softer rolled edge: a roller leaves a fuzzy straight edge, not a torn one */
.px-lhero--v2::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M100%200V100H8.00L8.00%20100L5.96%2098.75L8.90%2097.5L9.03%2096.25L8.62%2095L9.57%2093.75L8.84%2092.5L9.82%2091.25L8.19%2090L9.62%2088.75L9.22%2087.5L8.52%2086.25L8.37%2085L9.27%2083.75L8.03%2082.5L9.95%2081.25L8.21%2080L10.11%2078.75L7.55%2077.5L9.78%2076.25L8.63%2075L9.76%2073.75L9.61%2072.5L9.76%2071.25L8.56%2070L8.05%2068.75L9.83%2067.5L7.59%2066.25L10.09%2065L9.49%2063.75L9.88%2062.5L10.04%2061.25L8.94%2060L9.12%2058.75L5.45%2057.5L8.24%2056.25L9.21%2055L9.04%2053.75L8.83%2052.5L9.26%2051.25L10.03%2050L10.15%2048.75L9.70%2047.5L8.81%2046.25L9.42%2045L8.67%2043.75L8.56%2042.5L9.25%2041.25L8.32%2040L10.12%2038.75L8.63%2037.5L8.80%2036.25L9.06%2035L8.51%2033.75L9.76%2032.5L8.58%2031.25L8.75%2030L7.92%2028.75L8.07%2027.5L8.65%2026.25L8.70%2025L10.18%2023.75L9.67%2022.5L9.44%2021.25L8.54%2020L9.09%2018.75L9.01%2017.5L9.08%2016.25L8.26%2015L9.80%2013.75L9.23%2012.5L9.70%2011.25L8.23%2010L8.85%208.75L9.13%207.5L8.87%206.25L9.84%205L9.60%203.75L8.62%202.5L8.69%201.25L9.52%200Z%22%2F%3E%3C%2Fsvg%3E") left / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M100%200V100H8.00L8.00%20100L5.96%2098.75L8.90%2097.5L9.03%2096.25L8.62%2095L9.57%2093.75L8.84%2092.5L9.82%2091.25L8.19%2090L9.62%2088.75L9.22%2087.5L8.52%2086.25L8.37%2085L9.27%2083.75L8.03%2082.5L9.95%2081.25L8.21%2080L10.11%2078.75L7.55%2077.5L9.78%2076.25L8.63%2075L9.76%2073.75L9.61%2072.5L9.76%2071.25L8.56%2070L8.05%2068.75L9.83%2067.5L7.59%2066.25L10.09%2065L9.49%2063.75L9.88%2062.5L10.04%2061.25L8.94%2060L9.12%2058.75L5.45%2057.5L8.24%2056.25L9.21%2055L9.04%2053.75L8.83%2052.5L9.26%2051.25L10.03%2050L10.15%2048.75L9.70%2047.5L8.81%2046.25L9.42%2045L8.67%2043.75L8.56%2042.5L9.25%2041.25L8.32%2040L10.12%2038.75L8.63%2037.5L8.80%2036.25L9.06%2035L8.51%2033.75L9.76%2032.5L8.58%2031.25L8.75%2030L7.92%2028.75L8.07%2027.5L8.65%2026.25L8.70%2025L10.18%2023.75L9.67%2022.5L9.44%2021.25L8.54%2020L9.09%2018.75L9.01%2017.5L9.08%2016.25L8.26%2015L9.80%2013.75L9.23%2012.5L9.70%2011.25L8.23%2010L8.85%208.75L9.13%207.5L8.87%206.25L9.84%205L9.60%203.75L8.62%202.5L8.69%201.25L9.52%200Z%22%2F%3E%3C%2Fsvg%3E") left / 100% 100% no-repeat; }

/* hero "coats": two faded roller passes build up from the left to the full stroke behind Affy,
   like a wall taking its first and second coat. Same device as the quote band's ghost stroke. */
.px-lhero--v2::after { content: ""; position: absolute; z-index: 0; left: -6%; top: 14%; width: 78%; height: 50%; background: var(--paint); opacity: .055; transform: rotate(-6deg); -webkit-mask: var(--stroke-mask) center / 100% 100% no-repeat; mask: var(--stroke-mask) center / 100% 100% no-repeat; pointer-events: none; }
.px-lhero--v2 .px-lhero__copy::before { content: ""; position: absolute; z-index: -1; left: 18%; top: 38%; width: 120%; height: 34%; background: var(--paint); opacity: .09; transform: rotate(-4deg); -webkit-mask: var(--stroke-mask-b, var(--stroke-mask)) center / 100% 100% no-repeat; mask: var(--stroke-mask-b, var(--stroke-mask)) center / 100% 100% no-repeat; pointer-events: none; }
@media (max-width: 980px) {
  .px-lhero--v2::after { top: 6%; height: 30%; width: 140%; left: -20%; opacity: .05; }
  .px-lhero--v2 .px-lhero__copy::before { display: none; }
}

/* 8 Oct audit fixes: prose columns could not shrink below 340px, clipping text on 320px phones */
.px-prosewrap { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.px-prose { min-width: 0; }
/* the guarantee in the hero links to its terms */
.px-lhero__creds a { color: var(--paint); text-decoration: underline; text-underline-offset: 3px; }

/* auto-fit grids with a fixed minimum column could not shrink on the narrowest phones */
@media (max-width: 400px) {
  .px-steps { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
  .px-incl__cols { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
  .px-tilegrid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
  .px-series__grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
  .px-postgrid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
  .px-blogindex .wp-block-post-template { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
  .px-legalindex { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
  .px-lgrid { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
}

@media (max-width: 350px) { .px-bar__cta { gap: 6px; } .px-topnav__cta { padding-inline: 12px; } }

/* reserve the hero headline's three lines so the web-font swap cannot push the page down (PSI mobile CLS was 0.205) */
.px-lhero--v2 .px-lhero__h { min-height: calc(3.1em + 1.62 * max(.27em, 17px)); }

/* service pages: who it suits, and what decides price and timing (no prices, by Affy's rule) */
.px-factors__suits { max-width: 70ch; font-size: 18px; color: var(--ink-2); margin: 0 0 22px; }
.px-factors__suits b { color: var(--ink); margin-right: 4px; }
.px-factors__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.px-factors__list li { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.px-factors__list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--paint); transform: rotate(45deg); }
.px-factors__note { margin: 22px 0 0; font-size: 16px; color: var(--ink-2); }
.px-factors__note a { color: var(--paint); font-weight: 700; }

/* page heroes on service and area pages: a trust card fills the empty right side, over a faded brush pass */
.px-pagehero:has(.px-herotrust) .px-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); column-gap: clamp(32px, 5vw, 80px); align-items: center; }
.px-pagehero:has(.px-herotrust) .px-hero__inner > :not(.px-herotrust) { grid-column: 1; }
.px-herotrust { grid-column: 2; grid-row: 1 / span 5; position: relative; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); padding: 24px 24px 20px; }
.px-herotrust::before { content: ""; position: absolute; z-index: -1; inset: -18% -30% -18% -40%; background: var(--paint); opacity: .07; transform: rotate(-6deg); -webkit-mask: var(--stroke-mask) center / 100% 100% no-repeat; mask: var(--stroke-mask) center / 100% 100% no-repeat; pointer-events: none; }
.px-herotrust__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 16px; color: var(--ink-2); }
.px-herotrust__rating b { color: var(--ink); font-size: 18px; }
.px-herotrust__rating .px-stars svg { width: 17px; height: 17px; }
.px-herotrust__list { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 10px; }
.px-herotrust__list li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.px-herotrust__list li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 9px; height: 5px; border-left: 2px solid var(--paint); border-bottom: 2px solid var(--paint); transform: rotate(-45deg); }
.px-herotrust__list a { color: var(--paint); }
.px-herotrust__who { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 14.5px; color: var(--ink-2); }
.px-herotrust__who img { width: 40px; height: 40px; border-radius: 50%; flex: none; }
@media (max-width: 980px) {
  .px-pagehero:has(.px-herotrust) .px-hero__inner { display: block; }
  .px-herotrust { margin-top: 28px; max-width: 460px; }
  .px-herotrust::before { display: none; }
}

/* about: Affy in the page hero */
.px-pagehero:has(.px-herophoto) .px-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); column-gap: clamp(32px, 5vw, 80px); align-items: center; }
.px-pagehero:has(.px-herophoto) .px-hero__inner > :not(.px-herophoto) { grid-column: 1; }
.px-herophoto { grid-column: 2; grid-row: 1 / span 4; margin: 0; position: relative; }
.px-herophoto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 60px rgba(30, 33, 32, .2); }
.px-herophoto::before { content: ""; position: absolute; z-index: -1; inset: 20% -18% 10% -24%; background: var(--paint); opacity: .09; transform: rotate(-6deg); -webkit-mask: var(--stroke-mask) center / 100% 100% no-repeat; mask: var(--stroke-mask) center / 100% 100% no-repeat; }
.px-herophoto figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 980px) { .px-pagehero:has(.px-herophoto) .px-hero__inner { display: block; } .px-herophoto { margin-top: 28px; max-width: 480px; } }

/* ==========================================================================
   32. PAGE PHOTO BAND - licensed stock photo under the hero on service and
   area pages (Oct 2026). Pulls up into the hero so it reads as one composition.
   ========================================================================== */
.wp-block-post-content > .px-svcphoto,
.px-svcphoto {
	position: relative;
	z-index: 2;
	margin: clamp(-64px, -5vw, -28px) 0 0 !important;
	padding: 0 max(20px, calc((100% - 1280px) / 2));
}
.px-svcphoto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: 20px;
	background: #efe4cf;
	box-shadow: 0 28px 56px -30px rgba(70, 20, 10, .45);
}
@media (max-width: 700px) {
	.px-svcphoto img { aspect-ratio: 3 / 2; border-radius: 14px; }
}
.px-svcphoto + .px-prosewrap,
.px-svcphoto + section,
.px-svcphoto + div { padding-top: clamp(48px, 6vw, 72px); }

.px-svcphoto__credit {
	margin: 8px 4px 0;
	font-size: 13px;
	line-height: 1.4;
	color: #6b625a;
	text-align: right;
}
.px-svcphoto__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   34. PRE-LAUNCH QA (9 Oct 2026) - reviews fallback
   ========================================================================== */
.px-reviews__more { margin: 14px 0 0; text-align: center; font-size: 15px; }
.px-reviews__more a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.px-reviews__failmsg { margin: 0; padding: 18px 8px; text-align: center; color: var(--ink-2); font-size: 16px; }
.px-reviews__failmsg a { color: inherit; font-weight: 700; text-decoration: underline; }
.px-reviews--failed [class*="elfsight-app-"] { display: none; }
/* Anchor jumps to the quote form ("get my quote", /#quote) stop below the sticky header */
#quote { scroll-margin-top: 84px; }
@media (max-width: 700px) { #quote { scroll-margin-top: 72px; } }
/* Hold space for the review feed while it loads, so the sections below it do not jump (CLS 0.17 on /reviews/ before) */
.px-reviews[data-elfsight-src]:not(.px-reviews--failed) { min-height: 600px; }

/* =====================================================================
   35. QUOTE BAND ORDER (9 Oct 2026)
   The intro is split in the markup (inc/enquiries.php): heading and promise
   (__intro), then the form, then the steps, Affy's card and the call option
   (__more). Phones get the form straight after the heading, so "get my quote"
   lands on the fields, and the DOM order matches what is on screen at every
   width. Desktop keeps two columns: intro and more on the left, the form
   spanning both rows on the right.
   ===================================================================== */
.px-quoteform__more { max-width: 52ch; }
.px-quoteform__more a { color: var(--primer); }
@media (min-width: 901px) {
	.px-quoteform { row-gap: 0; grid-template-rows: auto 1fr; }
	.px-quoteform__intro > :last-child { margin-bottom: 0; }
	.px-quoteform__more { grid-column: 1; grid-row: 2; }
	.px-quoteform__form, .px-quoteform__done { grid-row: 1 / span 2; }
}
@media (max-width: 900px) {
	.px-quoteform { row-gap: 0; }
	.px-quoteform__intro > .px-quoteform__lede { margin-bottom: 26px; } /* beats p:last-child */
	.px-quoteform__more { grid-column: 1; grid-row: auto; margin-top: 40px; }
	.px-quoteform__more > .px-qsteps:first-child { margin-top: 0; }
}

/* =====================================================================
   36. REVIEWS GATE (9 Oct 2026)
   Shown in the reserved widget space until the visitor scrolls, taps or asks
   for the reviews (assets/reviews.js). Hidden once the feed has drawn.
   ===================================================================== */
.px-reviews { position: relative; }
.px-reviews__gate {
	max-width: 46ch; margin: 0 auto; padding: 40px 24px; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.px-reviews__gate[hidden] { display: none; }
.px-reviews__gatetext { margin: 0; font-size: 17px; line-height: 1.55; color: #4a403a; }
.px-reviews__gatebtns { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.px-reviews--loading .px-reviews__show { opacity: .6; pointer-events: none; }
.px-reviews__status {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.px-reviews:focus { outline: none; }

/* ==========================================================================
   37. QUOTE FORM SPAM CHECK (9 Oct 2026)
   Turnstile box (invisible unless Cloudflare needs the visitor to click) and
   its status line. Both only exist once Turnstile keys are set.
   ========================================================================== */
.px-quoteform__ts { margin: 0 0 4px; }
.px-quoteform__ts iframe { max-width: 100%; }
.px-quoteform__tsnote { margin: 0; font-size: 15px; line-height: 1.4; color: #7a1f1f; }
.px-quoteform__tsnote:not(:empty) { margin: 0 0 12px; }

/* ==========================================================================
   36. MOBILE CALL BAR PIN (10 Oct 2026)
   ".px-footer > *" (position: relative) came later than the mobile
   ".px-callbar" rule at equal specificity, so the bar sat at the end of the
   footer instead of pinning to the screen. Higher specificity restores it,
   and the footer gets room so its last line is never hidden behind the bar.
   ========================================================================== */
@media (max-width: 640px) {
  .px-footer > .px-callbar { position: fixed; top: auto; }
  .px-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ==========================================================================
   37. CALL BAR STEPS ASIDE FOR THE QUOTE FORM (10 Oct 2026)
   wetedge.js adds .px-form-active to <html> while a quote form is on screen
   or has focus, so the fixed mobile bar never covers the form or sits on
   top of the keyboard.
   ========================================================================== */
@media (max-width: 640px) {
  .px-footer > .px-callbar { transition: transform .25s ease, opacity .25s ease, visibility .25s; }
  .px-form-active .px-footer > .px-callbar { transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .px-footer > .px-callbar { transition: none; }
}

/* ==========================================================================
   38. REAL JOB PHOTO BAND (10 Oct 2026) - a PaintX job photo under the hero,
   shown at its own shape (portrait or landscape) with a short caption card.
   Markup: figure.px-svcphoto.px-svcphoto--job > figure.px-jobband > img + figcaption.px-jobcap
   ========================================================================== */
.px-svcphoto--job .px-jobband {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	margin: 0;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 28px 56px -30px rgba(70, 20, 10, .45);
}
.px-svcphoto.px-svcphoto--job img {
	width: auto;
	max-width: min(60vw, 760px);
	height: clamp(340px, 38vw, 540px);
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}
.px-jobcap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: clamp(26px, 3.4vw, 52px);
	border-left: 6px solid var(--paint, #660404);
}
.px-jobcap__eyebrow {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--paint, #660404);
}
.px-jobcap__text {
	font-size: clamp(21px, 2.1vw, 30px);
	font-weight: 800;
	line-height: 1.18;
	color: var(--ink, #1e2120);
	max-width: 22ch;
}
.px-jobcap__link {
	align-self: flex-start;
	margin-top: 6px;
	color: var(--paint, #660404);
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.px-jobcap__link:hover, .px-jobcap__link:focus-visible { color: #4a0303; }
@media (max-width: 700px) {
	.px-svcphoto--job .px-jobband { grid-template-columns: 1fr; border-radius: 14px; }
	.px-svcphoto.px-svcphoto--job img {
		width: 100%;
		max-width: none;
		height: auto;
		max-height: 72vh;
		border-radius: 0;
	}
	.px-jobcap { border-left: 0; border-top: 6px solid var(--paint, #660404); padding: 22px 20px 24px; }
}

/* ==========================================================================
   39. RECENT WORK GALLERY on the home page (10 Oct 2026) - real PaintX job
   photos in a packed grid with clean rounded frames. Each photo appears once.
   ========================================================================== */
.px-lwork { background: var(--primer) !important; }
.px-work {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--maxw);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(150px, 17vw, 230px);
	grid-auto-flow: dense;
	gap: clamp(10px, 1.2vw, 16px);
}
.px-work__item { margin: 0; min-width: 0; }
.px-work__item--wide { grid-column: span 2; }
.px-work__item--tall { grid-row: span 2; }
.px-work figure {
	position: relative;
	margin: 0;
	width: 100%;
	height: 100%;
	border-radius: 18px;
	overflow: hidden;
	background: #efe4cf;
	box-shadow: 0 18px 40px -26px rgba(70, 20, 10, .45);
}
.px-work img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.px-work figure:hover img { transform: scale(1.03); }
.px-work figcaption {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(30, 33, 32, .78);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	width: fit-content;
	max-width: calc(100% - 20px);
}
.px-lwork__foot { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: clamp(26px, 3vw, 40px); }
@media (max-width: 700px) {
	.px-work { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; }
	.px-work figcaption { font-size: 12px; left: 8px; bottom: 8px; padding: 5px 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.px-work img { transition: none; }
	.px-work figure:hover img { transform: none; }
}

/* caption sits at the top where the photo carries its own label at the bottom */
.px-work__item--captop figcaption { top: 10px; bottom: auto; }