/*
 * WW Starter: global styles.
 *
 * SHARED FILE. Sections:
 *   1. Tokens and body       4. Components
 *   2. Base                  5. Responsive: the ONLY media queries (1120px, 900px, 640px, reduced motion)
 *   3. Layout                6. PAGE-SPECIFIC STYLES: the only block the build AI may edit
 *
 * Rules for anyone editing:
 * - Every selector starts with body.pg-custom and uses the pg- prefix.
 * - Change a rule where it is. Never append a later block that overrides it.
 * - No !important, except against Elementor form internals (each one commented).
 * - No keyframes, entrance or scroll animations. Hover effects only on things
 *   that are fully clickable (buttons, links), never on plain cards.
 * - At 900px and below all marketing content is centred. Left-aligned
 *   exceptions: form fields, the contact details list, FAQ answers, legal text.
 * - Brand colours and fonts come from inc/site-config.php and are printed
 *   inline after this file; the values below are fallbacks only.
 */

/* =========================================================================
   1. TOKENS AND BODY
   ========================================================================= */

body.pg-custom {
	/* Brand (fallbacks; site-config.php overrides these) */
	--pg-primary: #1f5fbf;
	--pg-primary-dark: #174a94;
	--pg-dark: #15202b;
	--pg-ink: #2b3640;
	--pg-font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--pg-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Neutrals */
	--pg-surface: #ffffff;
	--pg-surface-alt: #f4f6f8;
	--pg-line: #dde3e8;
	--pg-ink-muted: #5a6672;
	--pg-on-primary: #ffffff;
	--pg-star: #f5a524;

	/* Solid buttons (header, hero, sections, form submit). Default to the primary colour;
	   'cta', 'cta_dark' and 'on_cta' in site-config give a separate button colour. */
	--pg-cta: var(--pg-primary);
	--pg-cta-dark: var(--pg-primary-dark);
	--pg-on-cta: var(--pg-on-primary);

	/* Context colours. Dark sections swap these (see "Dark sections"). */
	--pg-heading: var(--pg-dark);
	--pg-text: var(--pg-ink);
	--pg-muted: var(--pg-ink-muted);
	--pg-link: var(--pg-primary);
	--pg-link-hover: var(--pg-primary-dark);
	--pg-eyebrow: var(--pg-primary);
	--pg-border: var(--pg-line);
	--pg-focus: var(--pg-primary);

	/* Layout */
	--pg-container: 1200px;
	--pg-gutter: 24px;
	--pg-gap: 24px;
	--pg-section-y: 88px;
	--pg-header-h: 84px;
	--pg-radius: 12px;
	--pg-radius-lg: 18px;
	--pg-radius-btn: 10px;
	--pg-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);

	/* Floating contact widget */
	--pg-float-main: var(--pg-primary);
	--pg-float-main-hover: var(--pg-primary-dark);
	--pg-float-email: var(--pg-primary);
	--pg-float-phone: #2196f3;
	--pg-float-whatsapp: #25d366;
	--pg-float-icon: #ffffff;
	--pg-float-label-bg: var(--pg-dark);
	--pg-float-label-text: #ffffff;

	/* Body */
	margin: 0;
	background: var(--pg-surface);
	color: var(--pg-text);
	font-family: var(--pg-font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Scroll lock while the mobile menu or the gallery lightbox is open (classes set by pg-site.js). */
body.pg-custom:is(.pg-menu-open, .pg-lightbox-open) {
	overflow: hidden;
}

/* Dark sections: swap the context colours so headings and text stay readable. */
body.pg-custom :is(.pg-section--dark, .pg-hero, .pg-cta-band, .pg-final-cta, .pg-footer, .pg-mobile-menu, .pg-lightbox) {
	--pg-heading: #ffffff;
	--pg-text: rgba(255, 255, 255, 0.86);
	--pg-muted: rgba(255, 255, 255, 0.72);
	--pg-link: #ffffff;
	--pg-link-hover: #ffffff;
	--pg-eyebrow: rgba(255, 255, 255, 0.82);
	--pg-border: rgba(255, 255, 255, 0.18);
	--pg-focus: #ffffff;
	color: var(--pg-text);
}

/* Light panels inside dark sections switch back. */
body.pg-custom :is(.pg-form-card, .pg-card, .pg-step, .pg-review, .pg-faq__item, .pg-nav__dropdown, .pg-project-card, .pg-facts, .pg-filter__btn, .pg-service-links__link) {
	--pg-heading: var(--pg-dark);
	--pg-text: var(--pg-ink);
	--pg-muted: var(--pg-ink-muted);
	--pg-link: var(--pg-primary);
	--pg-link-hover: var(--pg-primary-dark);
	--pg-eyebrow: var(--pg-primary);
	--pg-border: var(--pg-line);
	--pg-focus: var(--pg-primary);
	color: var(--pg-text);
}

/* =========================================================================
   2. BASE
   ========================================================================= */

body.pg-custom *,
body.pg-custom *::before,
body.pg-custom *::after {
	box-sizing: border-box;
}

body.pg-custom img {
	max-width: 100%;
	height: auto;
}

body.pg-custom :is(h1, h2, h3, h4) {
	margin: 0 0 0.5em;
	color: var(--pg-heading);
	font-family: var(--pg-font-display);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
	text-wrap: balance;
}

body.pg-custom h1 {
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}

body.pg-custom h2 {
	font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.4rem);
}

body.pg-custom h3 {
	font-size: 1.2rem;
	line-height: 1.3;
}

body.pg-custom p {
	margin: 0 0 1em;
}

/* Hello Elementor sets captions in italics; review names and quote credits stay upright. */
body.pg-custom figcaption {
	font-style: normal;
}

body.pg-custom a {
	color: var(--pg-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.pg-custom a:hover {
	color: var(--pg-link-hover);
}

/* Focus: one visible ring for keyboard users; no pink or black theme defaults. */
body.pg-custom :is(a, button, summary):focus-visible {
	outline: 3px solid var(--pg-focus);
	outline-offset: 3px;
}

body.pg-custom :is(a, button, summary):focus:not(:focus-visible),
body.pg-custom [tabindex="-1"]:focus {
	outline: none;
}

/* Anchor targets land below the fixed header (and the admin bar when logged in). */
body.pg-custom [id] {
	scroll-margin-top: calc(var(--pg-header-h) + var(--wp-admin--admin-bar--height, 0px) + 16px);
}

body.pg-custom .pg-icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
}

body.pg-custom .pg-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

body.pg-custom .pg-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 10001;
	padding: 12px 18px;
	border-radius: var(--pg-radius);
	background: var(--pg-surface);
	color: var(--pg-dark);
	font-weight: 700;
}

body.pg-custom .pg-skip-link:focus {
	top: 16px;
}

/* Long emails: wrap only at "@" or "." (pg_email_html adds <wbr>), never mid-word, never below 15px. */
body.pg-custom .pg-email {
	font-size: max(15px, 1em);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

body.pg-custom .pg-eyebrow {
	margin: 0 0 12px;
	color: var(--pg-eyebrow);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* =========================================================================
   3. LAYOUT
   ========================================================================= */

body.pg-custom .pg-container {
	width: 100%;
	max-width: calc(var(--pg-container) + 2 * var(--pg-gutter));
	margin-inline: auto;
	padding-inline: var(--pg-gutter);
}

body.pg-custom .pg-section {
	padding-block: var(--pg-section-y);
}

body.pg-custom .pg-section--alt {
	background: var(--pg-surface-alt);
}

body.pg-custom .pg-section--dark {
	background: var(--pg-dark);
}

body.pg-custom .pg-section-head {
	max-width: 760px;
	margin: 0 auto 40px;
	text-align: center;
}

body.pg-custom .pg-section-head__intro {
	color: var(--pg-muted);
	font-size: 1.1rem;
}

body.pg-custom .pg-section-head__intro p:last-child {
	margin-bottom: 0;
}

/* Card grids: flex-wrap + centred rows, so 5, 7 or 11 items still look balanced. */
body.pg-custom .pg-grid {
	--pg-cols: 3;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pg-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.pg-custom .pg-grid > * {
	flex: 0 1 calc((100% - (var(--pg-cols) - 1) * var(--pg-gap)) / var(--pg-cols));
	min-width: 0;
}

body.pg-custom .pg-grid--2 {
	--pg-cols: 2;
}

body.pg-custom .pg-grid--3 {
	--pg-cols: 3;
}

body.pg-custom .pg-grid--4 {
	--pg-cols: 4;
}

body.pg-custom .pg-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

body.pg-custom .pg-section-cta {
	justify-content: center;
	margin-top: 40px;
}

/* Closing line or small print under a section ('outro'). */
body.pg-custom .pg-section-outro {
	margin-top: 24px;
}

body.pg-custom .pg-container > .pg-section-outro {
	max-width: 760px;
	margin: 32px auto 0;
	text-align: center;
}

body.pg-custom .pg-section-outro p:last-child {
	margin-bottom: 0;
}

body.pg-custom .pg-section-outro + .pg-section-cta {
	margin-top: 24px;
}

/* Text link with an arrow: the secondary action next to (or instead of) a button. */
body.pg-custom .pg-text-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-inline: 4px;
	color: var(--pg-link);
	font-weight: 700;
	text-decoration: none;
}

body.pg-custom .pg-text-link:hover {
	color: var(--pg-link-hover);
	text-decoration: underline;
}

body.pg-custom .pg-text-link .pg-icon {
	width: 1.1em;
	height: 1.1em;
}

/* Background image + overlay shared by the hero and the final CTA. */
body.pg-custom .pg-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

body.pg-custom .pg-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.pg-custom .pg-bg-overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(12, 18, 24, 0.72);
}

/* =========================================================================
   4. COMPONENTS
   ========================================================================= */

/* ---- Buttons (also resets Hello/Elementor pink and black button states) */
body.pg-custom .pg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 24px;
	border: 2px solid var(--pg-cta);
	border-radius: var(--pg-radius-btn);
	background: var(--pg-cta);
	color: var(--pg-on-cta);
	font-family: var(--pg-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.pg-custom .pg-btn:hover {
	border-color: var(--pg-cta-dark);
	background: var(--pg-cta-dark);
	color: var(--pg-on-cta);
}

body.pg-custom .pg-btn--outline {
	border-color: currentColor;
	background: transparent;
	color: var(--pg-heading);
}

body.pg-custom .pg-btn--outline:hover {
	border-color: currentColor;
	background: rgba(127, 127, 127, 0.14);
	color: var(--pg-heading);
}

body.pg-custom .pg-btn--light {
	border-color: #ffffff;
	background: #ffffff;
	color: var(--pg-dark);
}

body.pg-custom .pg-btn--light:hover {
	border-color: #ffffff;
	background: rgba(255, 255, 255, 0.88);
	color: var(--pg-dark);
}

/* ---- Client logos row (pg_logos): one line, then the logos at one height. */
body.pg-custom .pg-logos {
	padding-block: 28px;
	border-bottom: 1px solid var(--pg-border);
	background: var(--pg-surface);
}

body.pg-custom .pg-logos__label {
	margin: 0 0 16px;
	color: var(--pg-muted);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

body.pg-custom .pg-logos__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px clamp(28px, 5vw, 64px);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.pg-custom .pg-logos__item img {
	display: block;
	width: auto;
	height: 56px;
	max-width: 180px;
	object-fit: contain;
}

/* ---- Ads landing pages (get_header/get_footer 'minimal'): no menu, one job. */
body.pg-custom .pg-header--minimal .pg-header__actions {
	margin-left: auto;
}

body.pg-custom .pg-footer--minimal {
	padding-block: 28px;
}

body.pg-custom .pg-footer--minimal .pg-footer__bottom {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* The phone "book" bar: only at 900px and below (see section 5), hidden while the form is on screen. */
body.pg-custom .pg-sticky-cta {
	display: none;
}

/* ---- Header */
body.pg-custom .pg-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 1000;
	height: var(--pg-header-h);
	border-bottom: 1px solid var(--pg-border);
	background: var(--pg-surface);
}

body.pg-custom .pg-header--scrolled {
	box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
}

body.pg-custom .pg-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.6vw, 24px);
	height: 100%;
}

body.pg-custom .pg-logo {
	display: inline-flex;
	flex: none;
	align-items: center;
	color: var(--pg-heading);
	text-decoration: none;
}

body.pg-custom .pg-logo img {
	display: block;
	width: auto;
	max-width: clamp(140px, 13vw, 220px);
	max-height: calc(var(--pg-header-h) - 24px);
}

body.pg-custom .pg-logo__text {
	font-family: var(--pg-font-display);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.1;
}

body.pg-custom .pg-nav {
	margin-left: auto;
}

body.pg-custom .pg-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.pg-custom .pg-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

body.pg-custom .pg-nav__link {
	display: block;
	padding: 10px clamp(6px, 0.8vw, 12px);
	border-radius: 8px;
	color: var(--pg-heading);
	font-size: clamp(13px, 1.1vw, 16px);
	font-weight: 600;
	white-space: nowrap; /* a nav label never wraps onto two lines */
	text-decoration: none;
}

body.pg-custom .pg-nav__link:hover,
body.pg-custom .pg-nav__link[aria-current="page"] {
	color: var(--pg-primary);
}

/* Dropdown: the label is a link; the chevron is a separate button (click, not hover). */
body.pg-custom .pg-nav__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-left: -8px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--pg-heading);
	cursor: pointer;
}

body.pg-custom .pg-nav__chevron:hover {
	background: var(--pg-surface-alt);
	color: var(--pg-primary);
}

body.pg-custom :is(.pg-nav__chevron, .pg-mobile-nav__link)[aria-expanded="true"] .pg-icon,
body.pg-custom .pg-faq__item[open] .pg-faq__question .pg-icon {
	transform: rotate(180deg);
}

body.pg-custom .pg-nav__dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 10;
	min-width: 260px;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	background: var(--pg-surface);
	box-shadow: var(--pg-shadow);
	list-style: none;
}

body.pg-custom .pg-nav__dropdown a {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	color: var(--pg-heading);
	font-weight: 500;
	text-decoration: none;
}

body.pg-custom .pg-nav__dropdown a:hover {
	background: var(--pg-surface-alt);
	color: var(--pg-primary);
}

body.pg-custom .pg-header__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: clamp(8px, 1.1vw, 16px);
}

body.pg-custom .pg-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--pg-heading);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

body.pg-custom .pg-header__phone:hover {
	color: var(--pg-primary);
}

body.pg-custom .pg-header__quote {
	min-height: 44px;
	padding: 10px 18px;
}

body.pg-custom .pg-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius-btn);
	background: var(--pg-surface);
	color: var(--pg-heading);
	cursor: pointer;
}

body.pg-custom .pg-menu-toggle .pg-icon {
	width: 26px;
	height: 26px;
}

/* ---- Mobile menu: full-screen overlay that scrolls if it is taller than the screen */
body.pg-custom .pg-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 10000;
	max-height: 100dvh;
	padding: 12px var(--pg-gutter) 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--pg-dark);
	text-align: center;
}

body.pg-custom .pg-mobile-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: calc(var(--pg-header-h) - 12px);
	margin-bottom: 16px;
}

body.pg-custom .pg-mobile-menu__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--pg-radius-btn);
	background: transparent;
	color: #ffffff;
	cursor: pointer;
}

body.pg-custom .pg-mobile-menu__close .pg-icon {
	width: 30px;
	height: 30px;
}

body.pg-custom .pg-mobile-nav {
	max-width: 440px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

body.pg-custom .pg-mobile-nav__item {
	border-bottom: 1px solid var(--pg-border);
}

body.pg-custom .pg-mobile-nav__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 56px;
	padding: 10px 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #ffffff;
	font-family: var(--pg-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
}

body.pg-custom .pg-mobile-nav__sub {
	margin: 0;
	padding: 0 0 12px;
	list-style: none;
}

body.pg-custom .pg-mobile-nav__sub a {
	display: block;
	padding: 10px 16px;
	color: var(--pg-text);
	font-size: 1.05rem;
	text-decoration: none;
}

body.pg-custom .pg-mobile-menu__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 440px;
	margin: 28px auto 0;
}

/* ---- Hero (desktop: one primary CTA; 900px and below: a call button instead) */
body.pg-custom .pg-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 600px;
	padding-block: 72px;
	overflow: hidden;
	background: var(--pg-dark);
}

body.pg-custom .pg-hero--compact {
	min-height: 0;
	padding-block: 64px 56px;
}

body.pg-custom .pg-hero .pg-bg-overlay {
	background: linear-gradient(90deg, rgba(12, 18, 24, 0.86) 0%, rgba(12, 18, 24, 0.6) 55%, rgba(12, 18, 24, 0.35) 100%);
}

body.pg-custom .pg-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 48px;
}

body.pg-custom :is(.pg-hero__inner--with-form, .pg-hero__inner--with-card) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
}

body.pg-custom .pg-hero__copy {
	max-width: 720px;
}

body.pg-custom .pg-hero__text {
	font-size: 1.15rem;
}

body.pg-custom .pg-hero__call {
	display: none;
}

body.pg-custom .pg-hero__note {
	margin: 14px 0 0;
	color: var(--pg-muted);
	font-size: 0.95rem;
}

/* Ads landing page: the hero's one proof line reads as a fact, not small print. */
body.pg-custom.pg-landing .pg-hero__note {
	margin-top: 18px;
	color: #ffffff;
	font-size: 1.05rem;
	font-weight: 600;
}

/* Results card beside the hero copy (pg_stat_card): real numbers on a dark glass panel. */
body.pg-custom .pg-stat-card {
	position: relative;
	padding: 32px 32px 28px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--pg-radius-lg);
	background: linear-gradient(160deg, color-mix(in srgb, var(--pg-primary) 34%, var(--pg-dark)) 0%, var(--pg-dark) 100%);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--pg-primary) 30%, transparent), 0 24px 60px rgba(0, 0, 0, 0.35);
	color: #ffffff;
}

body.pg-custom .pg-stat-card p {
	margin: 0;
}

body.pg-custom .pg-stat-card__eyebrow {
	margin-bottom: 18px;
	color: color-mix(in srgb, var(--pg-primary) 45%, #ffffff);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

body.pg-custom .pg-stat-card__value {
	color: #ffffff;
	font-family: var(--pg-font-display);
	font-size: clamp(4rem, 3rem + 3.5vw, 6rem);
	font-weight: 900;
	line-height: 1;
}

body.pg-custom .pg-stat-card__label {
	margin-top: 6px;
	color: #ffffff;
	font-size: 1.25rem;
	font-weight: 700;
}

body.pg-custom .pg-stat-card__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

body.pg-custom .pg-stat-card__stat {
	display: flex;
	flex-direction: column-reverse;
	gap: 2px;
}

body.pg-custom .pg-stat-card__stat dd {
	margin: 0;
	color: #ffffff;
	font-family: var(--pg-font-display);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.15;
}

body.pg-custom .pg-stat-card__stat dt {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.9rem;
}

body.pg-custom .pg-stat-card .pg-stat-card__alert {
	position: absolute;
	bottom: -46px;
	left: -28px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--pg-radius);
	background: color-mix(in srgb, var(--pg-dark) 82%, #000000);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	font-size: 0.9rem;
	line-height: 1.35;
	text-align: left;
}

body.pg-custom .pg-stat-card__alert strong {
	display: block;
	color: #ffffff;
}

body.pg-custom .pg-stat-card__alert-text {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.8rem;
}

/* Hero icon row (pg_icon_row): glowing image icons joined by one line; a single icon shows large. */
body.pg-custom .pg-icon-row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 24px;
	padding: 24px 0;
}

body.pg-custom .pg-icon-row::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 12%;
	left: 12%;
	height: 2px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pg-primary) 70%, #ffffff), transparent);
	box-shadow: 0 0 12px color-mix(in srgb, var(--pg-primary) 80%, transparent);
}

body.pg-custom .pg-icon-row:has(> :only-child)::before {
	display: none;
}

body.pg-custom .pg-icon-row__item {
	position: relative;
	display: block;
}

body.pg-custom .pg-icon-row__item .pg-icon {
	width: 120px;
	height: 120px;
}

body.pg-custom .pg-icon-row__item:only-child .pg-icon {
	width: 220px;
	height: 220px;
}

body.pg-custom .pg-stat-card__dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--pg-primary) 55%, #ffffff);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--pg-primary) 35%, transparent), 0 0 14px color-mix(in srgb, var(--pg-primary) 80%, #ffffff);
}

/* ---- Trust strip */
body.pg-custom .pg-trust {
	padding-block: 20px;
	border-bottom: 1px solid var(--pg-border);
	background: var(--pg-surface-alt);
}

body.pg-custom .pg-trust__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.pg-custom .pg-trust__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--pg-heading);
	font-weight: 600;
}

body.pg-custom :is(.pg-trust__item, .pg-list__item, .pg-chips__item) .pg-icon {
	color: var(--pg-primary);
}

/* ---- Tick list */
body.pg-custom .pg-list {
	display: grid;
	gap: 10px;
	margin: 0 0 1.5em;
	padding: 0;
	list-style: none;
}

body.pg-custom .pg-list__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

body.pg-custom .pg-list__item .pg-icon {
	margin-top: 0.2em;
}

body.pg-custom .pg-hero .pg-list__item .pg-icon {
	color: #ffffff;
}

/* ---- Split: text beside an image */
body.pg-custom .pg-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: 56px;
}

body.pg-custom .pg-split--text-only {
	grid-template-columns: minmax(0, 1fr);
	max-width: 820px;
	margin-inline: auto;
}

body.pg-custom .pg-split--reverse .pg-split__media {
	order: -1;
}

body.pg-custom :is(.pg-split, .pg-project-overview) .pg-section-head {
	max-width: none;
	margin: 0 0 16px;
	text-align: left;
}

body.pg-custom .pg-split__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--pg-radius-lg);
}

body.pg-custom .pg-split .pg-section-cta {
	justify-content: flex-start;
	margin-top: 24px;
}

/* ---- Cards (not clickable as a whole: no hover lift or shadow; only the link reacts) */
body.pg-custom .pg-card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius-lg);
	background: var(--pg-surface);
}

body.pg-custom .pg-card__media {
	align-self: stretch;
	margin: -28px -28px 20px;
}

body.pg-custom .pg-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--pg-radius-lg) var(--pg-radius-lg) 0 0;
}

body.pg-custom :is(.pg-card__icon, .pg-contact-list__icon) {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--pg-radius);
	background: var(--pg-surface-alt);
	background: color-mix(in srgb, var(--pg-primary) 12%, #ffffff);
	color: var(--pg-primary);
}

body.pg-custom .pg-card__icon {
	margin-bottom: 18px;
}

body.pg-custom .pg-card__icon .pg-icon {
	width: 26px;
	height: 26px;
}

body.pg-custom .pg-card__title {
	margin-bottom: 8px;
}

body.pg-custom :is(.pg-card__text, .pg-step) p:last-child {
	margin-bottom: 0;
}

body.pg-custom .pg-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 16px;
	font-weight: 700;
	text-decoration: none;
}

body.pg-custom .pg-card__link:hover {
	text-decoration: underline;
}

body.pg-custom .pg-card__text strong {
	color: var(--pg-heading);
}

/* Dark cards and steps ('card_style' => 'dark'), e.g. for glowing image icons drawn for a dark background. */
body.pg-custom .pg-grid--dark > :is(.pg-card, .pg-step) {
	--pg-heading: #ffffff;
	--pg-text: rgba(255, 255, 255, 0.86);
	--pg-muted: rgba(255, 255, 255, 0.72);
	--pg-link: #ffffff;
	--pg-link-hover: #ffffff;
	--pg-border: rgba(255, 255, 255, 0.1);
	--pg-focus: #ffffff;
	background: var(--pg-dark);
	color: var(--pg-text);
}

body.pg-custom .pg-section--dark .pg-grid--dark > :is(.pg-card, .pg-step) {
	background: color-mix(in srgb, var(--pg-dark) 72%, #000000);
}

body.pg-custom .pg-grid--dark :is(.pg-card__icon--img, .pg-step__icon) {
	width: 112px; /* 1.9.26: a white paper tile round the hand-drawn icon */
	height: 112px;
	padding: 8px;
	border-radius: 14px;
	background: #ffffff;
}

/* ---- Process steps */
body.pg-custom .pg-step {
	padding: 28px;
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius-lg);
	background: var(--pg-surface);
}

body.pg-custom .pg-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--pg-primary);
	color: var(--pg-on-primary);
	font-weight: 800;
}

body.pg-custom .pg-step__title {
	margin-bottom: 8px;
}

/* ---- Reviews */
body.pg-custom .pg-review {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 28px;
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius-lg);
	background: var(--pg-surface);
}

body.pg-custom .pg-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--pg-star);
}

body.pg-custom .pg-stars .pg-icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

body.pg-custom .pg-review__quote {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--pg-text);
	font-style: normal;
}

body.pg-custom .pg-review__name {
	margin-top: auto;
	color: var(--pg-heading);
	font-weight: 700;
}

body.pg-custom .pg-review__meta {
	display: block;
	color: var(--pg-muted);
	font-size: 0.9rem;
	font-weight: 400;
}

body.pg-custom .pg-embed {
	max-width: 100%;
}

/* ---- Areas */
body.pg-custom .pg-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.pg-custom .pg-chips__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--pg-border);
	border-radius: 999px;
	background: var(--pg-surface);
	color: var(--pg-heading);
	font-weight: 600;
}

/* ---- FAQ (native <details>; questions always wrap) */
body.pg-custom .pg-faq {
	display: grid;
	gap: 12px;
	max-width: 860px;
	margin: 0 auto;
}

body.pg-custom .pg-faq__item {
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	background: var(--pg-surface);
}

body.pg-custom .pg-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-width: 0;
	padding: 18px 22px;
	color: var(--pg-heading);
	font-size: 1.05rem;
	font-weight: 700;
	white-space: normal;
	list-style: none;
	cursor: pointer;
}

body.pg-custom .pg-faq__question::-webkit-details-marker {
	display: none;
}

body.pg-custom .pg-faq__question .pg-icon {
	color: var(--pg-primary);
}

body.pg-custom .pg-faq__q {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	overflow-wrap: break-word;
}

body.pg-custom .pg-faq__answer {
	padding: 0 22px 20px;
}

body.pg-custom .pg-faq__answer p:last-child {
	margin-bottom: 0;
}

/* ---- Contact block (form first) */
body.pg-custom .pg-contact {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: start;
	gap: 40px;
}

body.pg-custom .pg-contact--no-form {
	grid-template-columns: minmax(0, 1fr);
}

body.pg-custom .pg-contact__details {
	display: grid;
	gap: 32px;
}

body.pg-custom .pg-contact__title {
	margin-bottom: 16px;
	font-size: 1.5rem;
}

body.pg-custom .pg-contact--no-form .pg-contact__details {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	align-items: start;
}

body.pg-custom .pg-contact-list {
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

body.pg-custom .pg-contact-list__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

body.pg-custom .pg-contact-list__icon {
	width: 44px;
	height: 44px;
}

body.pg-custom .pg-contact-list__label {
	display: block;
	color: var(--pg-muted);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.pg-custom .pg-contact-list__value {
	color: var(--pg-heading);
	font-weight: 700;
	text-decoration: none;
}

body.pg-custom .pg-contact-list__hours {
	display: block;
	color: var(--pg-heading);
}

body.pg-custom .pg-map iframe {
	display: block;
	width: 100%;
	height: 360px;
	border: 0;
	border-radius: var(--pg-radius-lg);
}

/* ---- Form card around the Elementor form */
body.pg-custom .pg-form-card {
	padding: 32px;
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius-lg);
	background: var(--pg-surface);
	box-shadow: var(--pg-shadow);
	text-align: left;
}

body.pg-custom .pg-form-wrap {
	max-width: 680px;
	margin-inline: auto;
}

body.pg-custom .pg-form-card__title {
	margin-bottom: 6px;
	font-size: 1.5rem;
}

body.pg-custom :is(.pg-form-card__text, .pg-form-card__fallback) {
	color: var(--pg-muted);
}

body.pg-custom .pg-form-card__form :is(.elementor, .elementor-section, .elementor-container, .elementor-column, .elementor-widget-wrap, .elementor-widget, .elementor-widget-container, .e-con, .e-con-inner) {
	min-width: 0;
	max-width: 100%;
}

/* Elementor prints per-widget button colours with higher specificity
   (.elementor-N .elementor-element-X .elementor-button). These three
   !important keep the submit button on brand (the form fields below use them too). */
body.pg-custom .pg-form-card__form .elementor-button {
	width: 100%;
	min-height: 48px;
	border-radius: var(--pg-radius-btn);
	background-color: var(--pg-cta) !important;
	color: var(--pg-on-cta) !important;
	font-family: var(--pg-font-body);
	font-weight: 700;
}

body.pg-custom .pg-form-card__form .elementor-button:hover {
	background-color: var(--pg-cta-dark) !important;
}

/* 16px inputs stop iPhones zooming in on focus. */
body.pg-custom .pg-form-card__form .elementor-field-textual {
	font-size: max(16px, 1rem);
}

/* v1.9.19: the whole form is styled here, so it looks the same on the page whatever the
   Elementor editor's own form colours say. Elementor prints those per widget
   (.elementor-N .elementor-element-X ...). Instead of !important, :is(#pg-form-boost, *)
   matches every element but carries an ID's weight, so these rules always win. */
body.pg-custom .pg-form-card__form:is(#pg-form-boost, *) .elementor-form :is(.elementor-field-label, .elementor-field-group > label) {
	margin-bottom: 6px;
	padding: 0;
	color: var(--pg-text);
	font-family: var(--pg-font-body);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
}

body.pg-custom .pg-form-card__form:is(#pg-form-boost, *) .elementor-form :is(.elementor-field-textual, select.elementor-field, textarea.elementor-field) {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius-btn);
	background-color: var(--pg-surface-alt);
	color: var(--pg-text);
	font-family: var(--pg-font-body);
	font-size: max(16px, 1rem);
	line-height: 1.4;
	box-shadow: none;
}

body.pg-custom .pg-form-card__form:is(#pg-form-boost, *) .elementor-form textarea.elementor-field {
	min-height: 120px;
}

body.pg-custom .pg-form-card__form:is(#pg-form-boost, *) .elementor-form .elementor-field::placeholder {
	color: var(--pg-muted);
	opacity: 1;
}

body.pg-custom .pg-form-card__form:is(#pg-form-boost, *) .elementor-form .elementor-field:focus {
	border-color: var(--pg-focus);
	outline: 2px solid var(--pg-focus);
	outline-offset: 1px;
	background-color: var(--pg-surface);
}

body.pg-custom .pg-form-card__form:is(#pg-form-boost, *) .elementor-form .elementor-select-wrapper::before {
	color: var(--pg-muted);
}

body.pg-custom .pg-form-card__form:is(#pg-form-boost, *) .elementor-form .elementor-mark-required .elementor-field-label::after {
	color: var(--pg-cta);
}

/* Tick boxes and radio buttons (consent, "how did you hear about us"). */
body.pg-custom .pg-form-card__form:is(#pg-form-boost, *) .elementor-form :is(.elementor-field-subgroup label, .elementor-field-type-acceptance label) {
	color: var(--pg-muted);
	font-family: var(--pg-font-body);
	font-size: 0.875rem;
	font-weight: 400;
}

body.pg-custom .pg-form-card__form:is(#pg-form-boost, *) .elementor-form input:is([type="checkbox"], [type="radio"]) {
	accent-color: var(--pg-cta);
}

/* Elementor's "sent" and error messages. */
body.pg-custom .pg-form-card__form:is(#pg-form-boost, *) .elementor-message {
	font-family: var(--pg-font-body);
	font-size: 0.9rem;
}

body.pg-custom .pg-form-card__form:is(#pg-form-boost, *) .elementor-message.elementor-message-success {
	color: #2e7d4f;
}

body.pg-custom .pg-form-card__form:is(#pg-form-boost, *) :is(.elementor-message.elementor-message-danger, .elementor-error .elementor-message) {
	color: #b3261e;
}

body.pg-custom .pg-recaptcha-note {
	margin: 14px 0 0;
	color: var(--pg-muted);
	font-size: 0.8rem;
	line-height: 1.5;
}

/* The badge is hidden ONLY when the required notice with Google's links is on the page. */
body.pg-custom:has(.pg-recaptcha-note) .grecaptcha-badge {
	visibility: hidden;
}

/* ---- CTA band */
body.pg-custom .pg-cta-band {
	padding-block: 56px;
	background: var(--pg-primary-dark);
}

body.pg-custom .pg-cta-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
}

body.pg-custom .pg-cta-band__copy p:last-child {
	margin-bottom: 0;
}

body.pg-custom .pg-cta-band__title {
	margin-bottom: 6px;
}

/* ---- Final CTA */
body.pg-custom .pg-final-cta {
	position: relative;
	isolation: isolate;
	padding-block: 96px;
	overflow: hidden;
	background: var(--pg-dark);
	text-align: center;
}

body.pg-custom .pg-final-cta__inner {
	max-width: 800px;
}

body.pg-custom .pg-final-cta .pg-actions {
	justify-content: center;
	margin-top: 8px;
}

/* ---- Yellow call-to-action bands (1.9.33, Justin 24 Oct: "make the full width call to action the yellow colour
   to grab attention"): amber across the page, navy words, a navy button that jumps up to the form. */
body.pg-custom :is(.pg-cta-band--yellow, .pg-final-cta--yellow) {
	--pg-heading: var(--pg-on-cta);
	--pg-text: var(--pg-on-cta);
	--pg-muted: var(--pg-on-cta);
	--pg-focus: var(--pg-dark);
	background: var(--pg-cta);
	color: var(--pg-on-cta);
	text-align: center;
}

body.pg-custom :is(.pg-cta-band--yellow, .pg-final-cta--yellow) :is(h2, p) {
	color: var(--pg-on-cta);
}

body.pg-custom .pg-cta-band--yellow {
	padding-block: 64px;
}

body.pg-custom .pg-cta-band--yellow .pg-cta-band__inner {
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	max-width: 760px;
}

body.pg-custom .pg-cta-band--yellow .pg-cta-band__title {
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
}

body.pg-custom :is(.pg-cta-band--yellow, .pg-final-cta--yellow) .pg-btn {
	min-width: 260px;
	min-height: 56px;
	border-color: var(--pg-dark);
	background: var(--pg-dark);
	color: #ffffff;
	font-size: 1.1rem;
}

body.pg-custom :is(.pg-cta-band--yellow, .pg-final-cta--yellow) .pg-btn:hover {
	border-color: var(--pg-primary-dark);
	background: var(--pg-primary-dark);
	color: #ffffff;
}

body.pg-custom .pg-final-cta--yellow .pg-bg-overlay {
	display: none;
}

/* ---- Portfolio: pill buttons and links (type filter, "Services on this project") */
body.pg-custom .pg-filter {
	margin: -8px 0 32px;
}

body.pg-custom :is(.pg-filter__buttons, .pg-service-links) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.pg-custom :is(.pg-filter__btn, .pg-service-links__link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--pg-border);
	border-radius: 999px;
	background: var(--pg-surface);
	color: var(--pg-heading);
	font-family: var(--pg-font-body);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
}

body.pg-custom :is(.pg-filter__btn, .pg-service-links__link):hover {
	border-color: var(--pg-primary);
	background: var(--pg-surface);
	color: var(--pg-primary);
}

/* The pressed filter stays filled, also on hover. */
body.pg-custom .pg-filter__btn[aria-pressed="true"] {
	border-color: var(--pg-primary);
	background: var(--pg-primary);
	color: var(--pg-on-primary);
}

body.pg-custom .pg-service-links__link .pg-icon {
	color: var(--pg-primary);
}

/* ---- Project cards: the whole card is one link, so it may change colour on hover (no movement) */
body.pg-custom .pg-project-grid__item {
	display: flex;
}

/* Set by the portfolio filter in pg-site.js. */
body.pg-custom .pg-project-grid > [data-pg-hidden] {
	display: none;
}

body.pg-custom .pg-project-card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius-lg);
	background: var(--pg-surface);
	color: var(--pg-text);
	text-decoration: none;
}

body.pg-custom a.pg-project-card:hover {
	border-color: var(--pg-primary);
	color: var(--pg-text);
}

body.pg-custom a.pg-project-card:hover .pg-project-card__title {
	color: var(--pg-primary);
}

body.pg-custom a.pg-project-card:hover .pg-project-card__link {
	text-decoration: underline;
}

body.pg-custom .pg-project-card__media {
	background: var(--pg-surface-alt);
}

body.pg-custom .pg-project-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* No photo yet: a plain tile the same shape as a photo. */
body.pg-custom .pg-project-card__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	color: var(--pg-muted);
}

body.pg-custom .pg-project-card__media--empty .pg-icon {
	width: 48px;
	height: 48px;
}

body.pg-custom .pg-project-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px 24px 26px;
}

body.pg-custom .pg-project-card__type {
	margin-bottom: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--pg-surface-alt);
	background: color-mix(in srgb, var(--pg-primary) 12%, #ffffff);
	color: var(--pg-primary-dark);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.pg-custom .pg-project-card__title {
	margin-bottom: 6px;
}

body.pg-custom .pg-project-card__town {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	color: var(--pg-muted);
	font-size: 0.95rem;
	font-weight: 600;
}

body.pg-custom .pg-project-card__town .pg-icon {
	color: var(--pg-primary);
}

body.pg-custom .pg-project-card__summary {
	margin: 0;
}

body.pg-custom .pg-project-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 16px;
	color: var(--pg-link);
	font-weight: 700;
}

/* ---- Project page: at-a-glance facts beside the brief */
body.pg-custom .pg-project-overview {
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	align-items: start;
	gap: 56px;
}

body.pg-custom .pg-project-overview--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 820px;
	margin-inline: auto;
}

body.pg-custom .pg-facts {
	padding: 28px;
	border: 1px solid var(--pg-border);
	border-top: 4px solid var(--pg-primary);
	border-radius: var(--pg-radius-lg);
	background: var(--pg-surface);
}

body.pg-custom .pg-facts__title {
	margin-bottom: 12px;
	font-size: 1.2rem;
}

body.pg-custom .pg-facts__list {
	margin: 0;
}

body.pg-custom .pg-facts__row {
	display: grid;
	gap: 2px;
	padding-block: 12px;
	border-top: 1px solid var(--pg-border);
}

body.pg-custom .pg-facts__row:first-child {
	padding-top: 0;
	border-top: 0;
}

body.pg-custom .pg-facts__row:last-child {
	padding-bottom: 0;
}

body.pg-custom .pg-facts__label {
	color: var(--pg-muted);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.pg-custom .pg-facts__value {
	margin: 0;
	color: var(--pg-heading);
	font-weight: 600;
}

body.pg-custom .pg-facts__value--list ul {
	display: grid;
	gap: 6px;
	margin: 4px 0 0;
	padding-left: 1.1em;
	font-weight: 500;
	list-style: square;
}

/* ---- Project gallery: grouped by stage, centred rows like the card grids */
body.pg-custom .pg-gallery {
	display: grid;
	gap: 40px;
}

body.pg-custom .pg-gallery__stage {
	margin: 0 0 14px;
	color: var(--pg-eyebrow);
	font-family: var(--pg-font-body);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

body.pg-custom .pg-gallery__grid {
	--pg-cols: 3;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pg-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.pg-custom .pg-gallery__item {
	flex: 0 1 calc((100% - (var(--pg-cols) - 1) * var(--pg-gap)) / var(--pg-cols));
	min-width: 0;
}

body.pg-custom .pg-gallery__link {
	display: block;
	overflow: hidden;
	border-radius: var(--pg-radius);
	background: var(--pg-surface-alt);
}

body.pg-custom .pg-gallery__link img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

body.pg-custom .pg-gallery__link:hover img {
	opacity: 0.88;
}

/* ---- Lightbox for the project gallery (opened by pg-site.js; without JS the photos open as files) */
body.pg-custom .pg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10002;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 72px 88px;
	overscroll-behavior: contain;
	background: rgba(8, 12, 16, 0.94);
}

body.pg-custom :is(.pg-lightbox, .pg-lightbox__btn)[hidden] {
	display: none;
}

body.pg-custom .pg-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}

body.pg-custom .pg-lightbox__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - 200px);
	max-height: calc(100dvh - 200px);
	border-radius: var(--pg-radius);
}

body.pg-custom .pg-lightbox__caption {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 16px;
	max-width: 720px;
	color: var(--pg-text);
	font-size: 0.95rem;
	text-align: center;
}

body.pg-custom .pg-lightbox__count {
	color: var(--pg-muted);
	white-space: nowrap;
}

body.pg-custom .pg-lightbox__btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--pg-radius-btn);
	background: rgba(12, 18, 24, 0.6);
	color: #ffffff;
	cursor: pointer;
}

body.pg-custom .pg-lightbox__btn:hover {
	border-color: #ffffff;
	background: rgba(255, 255, 255, 0.16);
	color: #ffffff;
}

body.pg-custom .pg-lightbox__btn .pg-icon {
	width: 28px;
	height: 28px;
}

/* Below the admin bar when an editor is logged in. */
body.pg-custom .pg-lightbox__close {
	top: calc(16px + var(--wp-admin--admin-bar--height, 0px));
	right: 16px;
}

body.pg-custom .pg-lightbox__nav {
	top: 50%;
	margin-top: -26px;
}

body.pg-custom .pg-lightbox__prev {
	left: 16px;
}

body.pg-custom .pg-lightbox__next {
	right: 16px;
}

/* One arrow icon, mirrored for "previous". */
body.pg-custom .pg-lightbox__prev .pg-icon {
	transform: scaleX(-1);
}

/* ---- Image icons ('img:<name>' in pg_icon(), e.g. hand-drawn brand icons from assets/img/icons) */
body.pg-custom .pg-icon--img {
	display: block;
	object-fit: contain;
}

body.pg-custom .pg-card__icon--img {
	width: 112px; /* 1.9.26: the hand-drawn icons read bigger */
	height: 112px;
	background: none;
}

body.pg-custom .pg-card__icon--img .pg-icon {
	width: 112px;
	height: 112px;
}

body.pg-custom .pg-trust__item .pg-icon--img {
	width: 44px;
	height: 44px;
}

body.pg-custom .pg-step__icon {
	display: block;
	margin-bottom: 12px;
}

body.pg-custom .pg-step__icon .pg-icon {
	width: 120px; /* 1.9.26 */
	height: 120px;
}

@media (max-width: 640px) {
	body.pg-custom .pg-step__icon .pg-icon {
		margin-inline: auto;
	}
}

/* ---- Trust badges under the hero buttons (e.g. the Google reviews badge image) */
body.pg-custom .pg-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.pg-custom .pg-badges__item {
	margin: 0;
}

body.pg-custom .pg-badges__link {
	display: block;
}

body.pg-custom .pg-badges__img {
	display: block;
	width: auto;
	height: 44px;
}

body.pg-custom .pg-hero__badges {
	margin-top: 24px;
}

@media (max-width: 900px) {
	body.pg-custom .pg-hero__badges {
		justify-content: center;
	}
}

@media (max-width: 640px) {
	body.pg-custom .pg-badges__img {
		height: 38px;
	}
}

/* ---- Video testimonials: tall poster cards in a sideways row. Posters are
   plain images, so they show at once; YouTube loads only when a card is
   clicked, in the pop-up player below (pg-site.js). */
body.pg-custom .pg-vreviews {
	position: relative;
}

body.pg-custom .pg-vreviews__track {
	display: flex;
	gap: var(--pg-gap);
	margin: 0;
	padding: 4px 2px 12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

body.pg-custom .pg-vreviews__track::-webkit-scrollbar {
	display: none;
}

body.pg-custom .pg-vreviews__item {
	position: relative;
	flex: 0 0 calc((100% - 3 * var(--pg-gap)) / 4);
	min-width: 0;
	scroll-snap-align: start;
}

body.pg-custom .pg-vreview {
	position: relative;
	overflow: hidden;
	aspect-ratio: 9 / 16;
	border-radius: var(--pg-radius-lg);
	background: var(--pg-dark);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

body.pg-custom .pg-vreview__name {
	margin: 12px 0 0;
	color: var(--pg-heading);
	font-weight: 600;
	text-align: center;
}

body.pg-custom .pg-vreview__detail {
	display: block;
	color: var(--pg-muted);
	font-size: 0.9rem;
	font-weight: 400;
}

body.pg-custom .pg-vreviews__arrow {
	position: absolute;
	top: calc(50% - 44px);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--pg-border);
	border-radius: 50%;
	background: var(--pg-surface);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	color: var(--pg-primary);
	cursor: pointer;
}

body.pg-custom .pg-vreviews__arrow[hidden] {
	display: none;
}

body.pg-custom .pg-vreviews__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

body.pg-custom .pg-vreviews__arrow .pg-icon {
	width: 22px;
	height: 22px;
}

body.pg-custom .pg-vreviews__prev {
	left: -20px;
}

body.pg-custom .pg-vreviews__next {
	right: -20px;
}

body.pg-custom .pg-vreviews__prev .pg-icon {
	transform: scaleX(-1);
}

/* Results cards (pg_results): one big number per client, client + platform logos, a small sharp proof crop. */
body.pg-custom .pg-results {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pg-gap);
}

body.pg-custom .pg-result {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius-lg);
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(20, 37, 59, 0.08);
	text-align: left;
}

body.pg-custom .pg-result__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	min-height: 64px;
	margin-bottom: 20px;
}

body.pg-custom .pg-result__logo img {
	display: block;
	width: auto;
	max-width: 170px;
	height: 64px;
	object-fit: contain;
	object-position: left center;
}

body.pg-custom .pg-result__name {
	color: var(--pg-heading);
	font-family: var(--pg-font-display);
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.15;
}

body.pg-custom .pg-result__platform {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px 7px 10px;
	border-radius: 999px;
	background: var(--pg-surface-alt);
	color: var(--pg-heading);
	font-size: 0.95rem;
	font-weight: 700;
}

body.pg-custom .pg-result__platform img {
	display: block;
	width: 24px;
	height: 24px;
}

body.pg-custom .pg-result__big {
	margin: 0;
	color: var(--pg-heading);
	font-family: var(--pg-font-display);
	font-size: clamp(2.6rem, 5vw, 3.9rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.02em;
}

body.pg-custom .pg-result__label {
	margin: 10px 0 0;
	color: var(--pg-heading);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
}

body.pg-custom .pg-result__sub {
	margin: 8px 0 0;
	color: var(--pg-muted);
}

body.pg-custom .pg-result__proof {
	margin-top: 20px;
	overflow: hidden;
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	background: #ffffff;
}

body.pg-custom .pg-result__proof img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 900px) {
	body.pg-custom .pg-results {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The site's own video in a card (pg_vreview_card): fills the 9:16 card. */
body.pg-custom .pg-vreview__video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	background: var(--pg-dark);
}

/* The whole card is the play button: a steel-blue disc that turns into a spinner while the video
   starts, and goes once it plays (the phone's own controls take over). The spinner is a
   self-animating SVG, so the theme still has no CSS keyframes. */
body.pg-custom .pg-vreview__play {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}

body.pg-custom .pg-vreview__play::before {
	content: "";
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--pg-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.2v13.6L19 12z'/%3E%3C/svg%3E") 58% 50% / 34px no-repeat;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s ease;
}

body.pg-custom .pg-vreview__play:is(:hover, :focus-visible)::before {
	transform: scale(1.08);
}

body.pg-custom .pg-vreview__play:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: -6px;
}

body.pg-custom .pg-vreview[data-state="loading"] .pg-vreview__play::before {
	background: rgba(14, 23, 34, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%23ffffff' stroke-opacity='.3' stroke-width='5'/%3E%3Cpath d='M25 5a20 20 0 0 1 20 20' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / 52px no-repeat;
}

body.pg-custom :is(.pg-vreview__play[hidden], .pg-vreview[data-state="playing"] .pg-vreview__play) {
	display: none;
}

/* One video on its own (e.g. the ads landing page): centred, phone-sized. */
body.pg-custom .pg-vreviews--single .pg-vreviews__track {
	justify-content: center;
}

body.pg-custom .pg-vreviews--single .pg-vreviews__item {
	flex: 0 0 min(360px, 100%);
}

/* Two videos (pg_video_reviews 'pair', ads landing pages 18 Oct): side by side and centred; one under the other on phones (below). */
body.pg-custom .pg-vreviews--pair .pg-vreviews__track {
	justify-content: center;
}

body.pg-custom .pg-vreviews--pair .pg-vreviews__item {
	flex: 0 0 min(340px, calc((100% - var(--pg-gap)) / 2));
}

/* The card's YouTube player (the iframe fills the 9:16 card). */
body.pg-custom .pg-vreview__player {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Desktop: 4 in a row (Justin 16 Oct). Tablets: 2 at a time. Phones: a one-card slider (swipe or the arrows). */
@media (max-width: 900px) {
	body.pg-custom .pg-vreviews__item {
		flex-basis: calc((100% - var(--pg-gap)) / 2);
	}

	body.pg-custom .pg-vreviews__prev {
		left: -8px;
	}

	body.pg-custom .pg-vreviews__next {
		right: -8px;
	}
}

@media (max-width: 640px) {
	body.pg-custom .pg-vreviews__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-basis: 100%;
		scroll-snap-align: center;
	}

	body.pg-custom .pg-vreviews:not(.pg-vreviews--single):not(.pg-vreviews--pair) .pg-vreview {
		width: min(290px, 100% - 104px);
	}

	body.pg-custom .pg-vreviews--pair .pg-vreviews__track {
		flex-direction: column;
		align-items: center;
		overflow: visible;
		scroll-snap-type: none;
	}

	body.pg-custom .pg-vreviews--pair .pg-vreviews__item {
		flex: 0 0 auto;
		width: min(320px, 100%);
	}

	body.pg-custom .pg-vreviews__prev {
		left: 0;
	}

	body.pg-custom .pg-vreviews__next {
		right: 0;
	}
}

/* ---- Video: YouTube (no-cookie) or native mp4 in a 16:9 box */
body.pg-custom .pg-video {
	position: relative;
	max-width: 960px;
	margin-inline: auto;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--pg-radius-lg);
	background: #000000;
}

body.pg-custom .pg-video :is(iframe, video) {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
}

/* ---- Project quote */
body.pg-custom .pg-quote {
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
}

body.pg-custom .pg-quote__icon {
	display: inline-flex;
	color: var(--pg-primary);
}

body.pg-custom .pg-quote__icon .pg-icon {
	width: 44px;
	height: 44px;
}

body.pg-custom .pg-quote__text {
	margin: 12px 0 20px;
	padding: 0;
	border: 0;
	color: var(--pg-heading);
	font-family: var(--pg-font-display);
	font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
	font-style: normal;
	font-weight: 600;
	line-height: 1.45;
}

body.pg-custom .pg-quote__text p:last-child {
	margin-bottom: 0;
}

body.pg-custom .pg-quote__name {
	display: block;
	color: var(--pg-heading);
	font-weight: 700;
}

body.pg-custom .pg-quote__detail {
	display: block;
	color: var(--pg-muted);
	font-size: 0.9rem;
}

/* A quote inside a split's text column (pg_inline_quote). */
body.pg-custom .pg-quote--inline {
	max-width: none;
	margin: 24px 0 0;
	padding-left: 20px;
	border-left: 3px solid var(--pg-primary);
	text-align: left;
}

body.pg-custom .pg-quote--inline .pg-quote__text {
	margin: 0 0 10px;
	font-size: 1.2rem;
}

/* ---- Editor-only note (e.g. a project page whose slug matches no project) */
body.pg-custom .pg-notice {
	max-width: 820px;
	margin-inline: auto;
	padding: 20px 24px;
	border: 2px dashed var(--pg-primary);
	border-radius: var(--pg-radius);
	background: var(--pg-surface-alt);
	text-align: left;
}

body.pg-custom .pg-notice p:last-child {
	margin-bottom: 0;
}

/* ---- Legal and general text pages */
body.pg-custom .pg-prose {
	max-width: 820px;
	margin-inline: auto;
	text-align: left;
}

body.pg-custom .pg-prose :is(h2, h3) {
	margin-top: 1.6em;
}

body.pg-custom .pg-prose h2 {
	font-size: 1.6rem;
}

body.pg-custom .pg-prose :is(ul, ol) {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

body.pg-custom .pg-post {
	padding-block: 24px;
	border-bottom: 1px solid var(--pg-border);
}

/* ---- Footer */
body.pg-custom .pg-footer {
	padding-top: 64px;
	background: var(--pg-dark);
	font-size: 0.95rem;
}

body.pg-custom .pg-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
	gap: 40px;
}

body.pg-custom .pg-footer__brand {
	max-width: 360px;
}

body.pg-custom .pg-footer__blurb {
	margin-top: 16px;
	color: var(--pg-muted);
}

body.pg-custom .pg-footer__title {
	margin: 0 0 14px;
	color: var(--pg-heading);
	font-family: var(--pg-font-display);
	font-size: 1.05rem;
	font-weight: 700;
}

body.pg-custom :is(.pg-footer__links, .pg-footer__contact) {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.pg-custom :is(.pg-footer__links, .pg-footer__contact, .pg-footer__socials, .pg-footer__legal) a {
	color: var(--pg-text);
	text-decoration: none;
}

body.pg-custom :is(.pg-footer__links, .pg-footer__contact, .pg-footer__socials, .pg-footer__legal) a:hover {
	color: #ffffff;
	text-decoration: underline;
}

body.pg-custom .pg-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

body.pg-custom .pg-footer__contact .pg-icon {
	margin-top: 0.15em;
	color: var(--pg-muted);
}

body.pg-custom :is(.pg-footer__socials, .pg-footer__legal) {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.pg-custom .pg-footer__socials {
	margin-top: 18px;
}

body.pg-custom .pg-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 48px;
	padding-block: 20px;
	border-top: 1px solid var(--pg-border);
	color: var(--pg-muted);
	font-size: 0.88rem;
}

body.pg-custom .pg-footer__copyright {
	margin: 0;
}

/* Web Wizard credit: centred on every screen size. */
body.pg-custom .pg-credit {
	margin: 0;
	padding: 16px 0 24px;
	border-top: 1px solid var(--pg-border);
	font-size: 0.88rem;
	text-align: center;
}

body.pg-custom .pg-credit a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--pg-muted);
	text-decoration: none;
}

body.pg-custom .pg-credit a:hover {
	color: #ffffff;
}

body.pg-custom .pg-credit img {
	width: auto;
	height: 22px;
}

/* ---- Floating contact widget
   Same structure, sizes and behaviour as the approved agency widget.
   Colours come only from the --pg-float-* tokens. */
body.pg-custom .pg-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

body.pg-custom .pg-float__channels {
	display: flex;
	flex-direction: column;
	gap: 12px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

body.pg-custom .pg-float.pg-open .pg-float__channels {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

body.pg-custom .pg-float__channel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	color: var(--pg-float-icon);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease;
}

body.pg-custom .pg-float__channel:hover,
body.pg-custom .pg-float__channel:focus-visible {
	color: var(--pg-float-icon);
	transform: scale(1.1);
}

body.pg-custom .pg-float__channel--email {
	background: var(--pg-float-email);
}

body.pg-custom .pg-float__channel--phone {
	background: var(--pg-float-phone);
}

body.pg-custom .pg-float__channel--whatsapp {
	background: var(--pg-float-whatsapp);
}

body.pg-custom .pg-float__label {
	position: absolute;
	right: 60px;
	padding: 6px 12px;
	border-radius: 6px;
	background: var(--pg-float-label-bg);
	color: var(--pg-float-label-text);
	font-family: var(--pg-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}

body.pg-custom .pg-float__channel:hover .pg-float__label,
body.pg-custom .pg-float__channel:focus-visible .pg-float__label {
	opacity: 1;
}

body.pg-custom .pg-float__main {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--pg-float-main);
	color: var(--pg-float-icon);
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--pg-float-main) 40%, transparent);
	transition: transform 0.3s ease, background 0.3s ease;
}

body.pg-custom .pg-float__main:hover {
	background: var(--pg-float-main-hover);
	color: var(--pg-float-icon);
}

/* Chat icon and X share the centre; opening turns the button into an X. */
body.pg-custom .pg-float__main svg {
	position: absolute;
	transition: transform 0.3s ease;
}

body.pg-custom .pg-float__main-icon-close {
	opacity: 0;
	transform: rotate(-90deg);
}

body.pg-custom .pg-float.pg-open .pg-float__main svg {
	transform: rotate(90deg);
}

body.pg-custom .pg-float.pg-open .pg-float__main-icon-chat {
	opacity: 0;
}

body.pg-custom .pg-float.pg-open .pg-float__main-icon-close {
	opacity: 1;
}

/* =========================================================================
   5. RESPONSIVE: the only media queries in the shared stylesheet
   ========================================================================= */

@media (max-width: 1120px) {
	body.pg-custom {
		--pg-section-y: 72px;
	}

	body.pg-custom .pg-header__inner {
		gap: 16px;
	}

	body.pg-custom .pg-nav__link {
		padding-inline: 9px;
	}

	/* Sites with a long nav ('menu_collapse' => 1120 in site-config) switch to the menu button here. */
	body.pg-custom.pg-nav-1120 :is(.pg-nav, .pg-header__quote) {
		display: none;
	}

	body.pg-custom.pg-nav-1120 .pg-header__actions {
		margin-left: auto;
	}

	body.pg-custom.pg-nav-1120 .pg-menu-toggle {
		display: inline-flex;
	}

	/* Ads landing pages have no menu, so their header keeps the quote button until 900px. */
	body.pg-custom.pg-nav-1120 .pg-header--minimal .pg-header__quote {
		display: inline-flex;
	}

	/* Phone collapses to a round icon button; the number stays in its aria-label. */
	body.pg-custom .pg-header__phone {
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 1px solid var(--pg-border);
		border-radius: 50%;
	}

	body.pg-custom .pg-header__phone-text {
		display: none;
	}

	body.pg-custom :is(.pg-hero__inner--with-form, .pg-hero__inner--with-card) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
		gap: 32px;
	}

	body.pg-custom .pg-grid--4 {
		--pg-cols: 2;
	}

	body.pg-custom .pg-project-overview {
		grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
		gap: 40px;
	}

	body.pg-custom .pg-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	body.pg-custom {
		--pg-header-h: 68px;
		--pg-section-y: 56px;
	}

	/* Header: logo, phone icon, menu button. Nav and quote move into the overlay. */
	body.pg-custom :is(.pg-nav, .pg-header__quote) {
		display: none;
	}

	body.pg-custom .pg-header__actions {
		gap: 10px;
		margin-left: auto;
	}

	body.pg-custom .pg-menu-toggle {
		display: inline-flex;
	}

	body.pg-custom .pg-logo img {
		max-width: 170px;
	}

	body.pg-custom.pg-nav-1120 .pg-header--minimal .pg-header__quote {
		display: none;
	}

	/* Ads landing pages: the "book" bar stuck to the bottom of the screen. */
	body.pg-custom .pg-sticky-cta {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9990;
		display: flex;
		gap: 10px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		background: var(--pg-dark);
		box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.18);
		transition: transform 0.25s ease;
	}

	body.pg-custom .pg-sticky-cta[data-hidden] {
		transform: translateY(110%);
	}

	body.pg-custom .pg-sticky-cta__btn {
		flex: 1;
		min-height: 50px;
	}

	body.pg-custom:has(.pg-sticky-cta) .pg-footer {
		padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
	}

	body.pg-custom .pg-logos__list {
		gap: 14px 22px;
	}

	body.pg-custom .pg-logos__item img {
		height: 36px;
		max-width: 110px;
	}

	/* Ads landing page: the form sits right under the hero copy, so no button above it. */
	body.pg-custom.pg-landing .pg-hero .pg-actions {
		display: none;
	}

	/* Centre all marketing content by default. */
	body.pg-custom :is(.pg-section, .pg-hero, .pg-trust, .pg-cta-band, .pg-final-cta, .pg-footer, .pg-form-card) {
		text-align: center;
	}

	body.pg-custom :is(.pg-actions, .pg-cta-band__inner, .pg-footer__bottom, .pg-footer__socials, .pg-footer__legal, .pg-footer__contact li) {
		justify-content: center;
	}

	/* Tick lists: the block is centred, its lines start under each other, so a point that wraps keeps its tick beside it. */
	body.pg-custom .pg-list {
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
		text-align: left;
	}

	body.pg-custom :is(.pg-card, .pg-review, .pg-project-card__body) {
		align-items: center;
	}

	body.pg-custom .pg-footer__brand {
		margin-inline: auto;
	}

	body.pg-custom :is(.pg-hero__copy, .pg-split .pg-section-head, .pg-project-overview .pg-section-head) {
		margin-inline: auto;
		text-align: center;
	}

	/* Left-aligned exceptions: form fields, contact details, FAQ answers, legal text. */
	body.pg-custom :is(.pg-form-card__form, .pg-faq__answer, .pg-prose) {
		text-align: left;
	}

	body.pg-custom .pg-contact-list {
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
	}

	/* Hero: one column, even overlay, call button instead of the desktop CTA. */
	body.pg-custom .pg-hero {
		min-height: 0;
		padding-block: 56px;
	}

	body.pg-custom .pg-hero .pg-bg-overlay {
		background: rgba(12, 18, 24, 0.74);
	}

	body.pg-custom :is(.pg-hero__inner--with-form, .pg-hero__inner--with-card) {
		grid-template-columns: minmax(0, 1fr);
	}

	body.pg-custom :is(.pg-hero__form, .pg-hero__card) {
		width: 100%;
		max-width: 560px;
		margin-inline: auto;
	}

	body.pg-custom .pg-stat-card .pg-stat-card__alert {
		position: static;
		width: fit-content;
		margin: 22px auto 0;
	}

	body.pg-custom .pg-split .pg-section-cta {
		justify-content: center;
	}

	body.pg-custom .pg-quote--inline {
		padding: 16px 0 0;
		border-top: 3px solid var(--pg-primary);
		border-left: 0;
		text-align: center;
	}

	body.pg-custom .pg-hero__cta {
		display: none;
	}

	body.pg-custom .pg-hero__call {
		display: inline-flex;
	}

	body.pg-custom .pg-grid--3 {
		--pg-cols: 2;
	}

	body.pg-custom :is(.pg-split, .pg-contact, .pg-contact--no-form .pg-contact__details, .pg-project-overview) {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	body.pg-custom .pg-split--reverse .pg-split__media {
		order: 0;
	}

	body.pg-custom .pg-facts {
		width: 100%;
		max-width: 560px;
		margin-inline: auto;
	}

	body.pg-custom .pg-facts__value--list ul {
		text-align: left;
	}

	body.pg-custom .pg-cta-band__inner {
		flex-direction: column;
	}

	body.pg-custom .pg-footer__grid {
		gap: 32px;
	}

	body.pg-custom .pg-float {
		right: 16px;
		bottom: 16px;
	}
}

@media (max-width: 640px) {
	body.pg-custom {
		--pg-gutter: 16px;
		--pg-gap: 16px;
		--pg-section-y: 48px;
	}

	/* The admin bar scrolls away on phones, so the header sticks to the very top. */
	body.pg-custom .pg-header {
		top: 0;
	}

	body.pg-custom :is(.pg-grid, .pg-grid--2, .pg-grid--3, .pg-grid--4) {
		--pg-cols: 1;
	}

	body.pg-custom .pg-actions .pg-btn {
		flex: 1 1 100%;
	}

	body.pg-custom :is(.pg-card, .pg-step, .pg-review, .pg-form-card, .pg-facts, .pg-project-card__body) {
		padding: 22px;
	}

	body.pg-custom .pg-card__media {
		margin: -22px -22px 18px;
	}

	body.pg-custom .pg-stat-card {
		padding: 24px 22px 22px;
	}

	body.pg-custom .pg-icon-row__item .pg-icon {
		width: 84px;
		height: 84px;
	}

	body.pg-custom .pg-icon-row__item:only-child .pg-icon {
		width: 150px;
		height: 150px;
	}

	body.pg-custom .pg-gallery__grid {
		--pg-cols: 2;
	}

	/* Lightbox: previous / next move under the photo, clear of it. */
	body.pg-custom .pg-lightbox {
		padding: 72px 16px 96px;
	}

	body.pg-custom .pg-lightbox__img {
		max-height: calc(100vh - 230px);
		max-height: calc(100dvh - 230px);
	}

	body.pg-custom .pg-lightbox__nav {
		top: auto;
		bottom: 22px;
		margin-top: 0;
	}

	body.pg-custom .pg-hero--compact {
		padding-block: 44px 40px;
	}

	body.pg-custom .pg-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	body.pg-custom .pg-map iframe {
		height: 300px;
	}

	/* Room under the credit so the floating button never covers it. */
	body.pg-custom .pg-credit {
		padding-bottom: 88px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.pg-custom :is(.pg-btn, .pg-float__channels, .pg-float__channel, .pg-float__label, .pg-float__main, .pg-float__main svg) {
		transition: none;
	}

	body.pg-custom .pg-float__channel:hover {
		transform: none;
	}
}

/* =========================================================================
   6. PAGE-SPECIFIC STYLES
   The ONLY block the build AI may edit. Styles for one client's own page
   sections go here: scoped under body.pg-custom, prefixed pg-, using the
   tokens above and only the 1120px / 900px / 640px breakpoints. Never
   restyle the shared header, menu, widget, footer, cards or forms from here.
   ========================================================================= */

/* ---- Web Wizard (Site Foreman): blueprint grid on navy panels (1px white lines, 40px cells, no image) */
body.pg-custom :is(.pg-hero, .pg-section--dark) {
	background-color: var(--pg-dark);
	background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 40px 40px;
}

/* Home: Luke's job photo is portrait, so show it taller than the default 4:3. */
body.pg-custom #case-study .pg-split__media img {
	aspect-ratio: 4 / 5;
}

/* Ads landing pages: Luke's posts on a tablet (pg_landing_social, 18 Oct) are 4:5 too, shown whole. */
body.pg-custom #social-media .pg-split__media img {
	aspect-ratio: 4 / 5;
}

/* Home: small print under "Ask our clients". */
body.pg-custom #ask-our-clients .pg-section-outro {
	color: var(--pg-muted);
	font-size: 0.9rem;
}

/* Home: Justin's quote sits under the "Why" cards as one navy block, his photo beside it. */
body.pg-custom #why-web-wizard + #founder {
	padding-top: 0;
}

body.pg-custom #founder .pg-split {
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	max-width: 960px;
	margin-inline: auto;
}

body.pg-custom #what-we-do .pg-card__title {
	font-size: clamp(1.3rem, 2vw, 1.55rem);
}

body.pg-custom #founder .pg-split__media img {
	aspect-ratio: 1 / 1;
}

body.pg-custom #founder .pg-quote__text {
	font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
}

@media (max-width: 900px) {
	body.pg-custom #founder .pg-split {
		grid-template-columns: minmax(0, 1fr);
	}

	body.pg-custom #founder .pg-split__media {
		width: 100%;
		max-width: 280px;
		margin-inline: auto;
	}
}

/* Inner pages: a long tick list (5+ points) in a text-only section runs in two columns on desktop. */
body.pg-custom .pg-split--text-only .pg-list:has(> :nth-child(5)) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 32px;
}

@media (max-width: 900px) {
	body.pg-custom .pg-split--text-only .pg-list:has(> :nth-child(5)) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Ads landing pages (/trades/, /landscapers/, /builders/, inc/landing.php), 17 Oct 2026 */

/* The line under the form heading is the qualifier ("…whose jobs are worth £3,000+"): a fact, not small print. */
body.pg-custom.pg-landing .pg-form-card__text {
	color: var(--pg-heading);
	font-weight: 600;
}

/* The credit line under a quote H1 (pg_hero 'cite', /builders/ 18 Oct): smaller than the H1, bolder than the
   text, a short light steel-blue rule before it (brand: amber is for buttons only). Centred at 900px and below. */
body.pg-custom .pg-hero__cite {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: -4px 0 20px;
	color: var(--pg-heading);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

body.pg-custom .pg-hero__cite::before {
	content: "";
	flex: none;
	width: 32px;
	height: 3px;
	border-radius: 2px;
	background: var(--pg-primary);
	background: color-mix(in srgb, var(--pg-primary) 65%, #ffffff);
}

/* Ad-matched hero (pg_hero 'variants', 18 Oct): the words stay hidden for a moment while pg-site.js swaps in the
   ad's version. The head script adds html.pg-hero-swap only when this page has a version for the visitor's ad,
   and takes it off after 1.5 s whatever happens. */
html.pg-hero-swap body.pg-custom .pg-hero__copy {
	visibility: hidden;
}

/* "What working with us looks like" (pg_photos, 18 Oct): real 4:5 photos in one row, a short caption under each.
   The files are 4:5, so nothing is cropped. Two per row at 900px and below. */
body.pg-custom .pg-photos {
	display: grid;
	grid-template-columns: repeat(var(--pg-photo-cols, 4), minmax(0, 1fr));
	gap: var(--pg-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.pg-custom .pg-photos__item {
	min-width: 0;
}

body.pg-custom .pg-photos__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--pg-radius-lg);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

body.pg-custom .pg-photos__caption {
	margin: 12px 0 0;
	color: var(--pg-heading);
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
}

body.pg-custom .pg-photos__text {
	display: block;
	margin-top: 2px;
	color: var(--pg-muted);
	font-size: 0.9rem;
	font-weight: 400;
}

@media (max-width: 900px) {
	body.pg-custom .pg-hero__cite {
		justify-content: center;
	}

	body.pg-custom .pg-photos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	body.pg-custom .pg-hero__cite {
		font-size: 1.05rem;
	}

	body.pg-custom .pg-photos__caption {
		font-size: 0.92rem;
	}

	body.pg-custom .pg-photos__text {
		font-size: 0.82rem;
	}
}

/* Reviews: the client's own words first, one step bigger than the Google reviews under them. */
body.pg-custom .pg-reviews-lead {
	margin-bottom: var(--pg-gap);
}

body.pg-custom .pg-reviews-lead .pg-review__quote {
	color: var(--pg-heading);
	font-size: 1.1rem;
	font-weight: 600;
}

/* "Businesses like yours" (pg_proof_strip): the video row's 9:16 tiles, a caption under each. */
body.pg-custom .pg-proof-strip__caption {
	margin-top: 12px;
	text-align: center;
}

body.pg-custom .pg-proof-strip .pg-vreview__name {
	margin-top: 0;
}

body.pg-custom .pg-proof-strip__result {
	margin: 8px 0 0;
	color: var(--pg-heading);
	font-weight: 700;
	line-height: 1.35;
}

body.pg-custom .pg-proof-strip__sub {
	margin: 4px 0 0;
	color: var(--pg-muted);
	font-size: 0.9rem;
}

/* A results tile: navy blueprint like the hero, big number, and the proof plate's chart at the bottom. */
body.pg-custom .pg-proof-tile--stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 28px 16px 16px;
	background-color: var(--pg-dark);
	background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 40px 40px;
	text-align: center;
}

body.pg-custom .pg-proof-tile__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 72px;
	border-radius: 8px;
}

body.pg-custom .pg-proof-tile__title {
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.pg-custom .pg-proof-tile__big {
	margin: 12px 0 0;
	color: #ffffff;
	font-family: var(--pg-font-display);
	font-size: clamp(3rem, 5vw, 4.2rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.02em;
}

body.pg-custom .pg-proof-tile__label {
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
	font-weight: 600;
	line-height: 1.35;
}

body.pg-custom .pg-proof-tile__proof {
	width: 100%;
	margin-top: 14px;
	overflow: hidden;
	aspect-ratio: 2 / 1;
	border-radius: var(--pg-radius);
	background: #ffffff;
}

body.pg-custom .pg-proof-tile__proof img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

/* A website on its devices in a results tile (pg_proof_strip stat 'mockup', /business/ 18 Oct): shown whole. */
body.pg-custom .pg-proof-tile__mockup {
	width: 100%;
	margin-top: 14px;
}

body.pg-custom .pg-proof-tile__mockup img {
	display: block;
	width: 100%;
	height: auto;
}

/* Five tiles (businesses like yours on /business/): one row on wide screens, the usual slider below 1120px. */
@media (min-width: 1120px) {
	body.pg-custom .pg-proof-strip--five .pg-vreviews__item {
		flex-basis: calc((100% - 4 * var(--pg-gap)) / 5);
	}
}

/* A still in a tile (no play button). */
body.pg-custom .pg-proof-tile .pg-proof-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* "Talk to our clients" (pg_talk, switched off until Justin decides): names as tiles, centred. */
body.pg-custom .pg-talk__people {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

body.pg-custom .pg-talk__person {
	display: flex;
	flex-direction: column;
	min-width: 150px;
	padding: 14px 20px;
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	background: rgba(255, 255, 255, 0.06);
	text-align: center;
}

body.pg-custom .pg-talk__name {
	color: var(--pg-heading);
	font-size: 1.1rem;
	font-weight: 800;
}

body.pg-custom .pg-talk__trade {
	color: var(--pg-muted);
	font-size: 0.9rem;
}

body.pg-custom .pg-talk .pg-section-outro {
	color: var(--pg-muted);
	font-size: 0.9rem;
}

@media (max-width: 640px) {
	body.pg-custom .pg-proof-strip__caption {
		max-width: 290px;
	}

	body.pg-custom .pg-talk__person {
		min-width: calc(50% - 6px);
		padding: 12px;
	}
}

/* ---- Thank-you page (pg_vsl, Justin 17 Oct 2026): his 4-minute video big and first, then what happens next.
   Desktop: the video on the left (as tall as the screen allows), the words beside it, centred on it.
   Phones: heading, video, steps, button. */
body.pg-custom .pg-vsl {
	padding-block: 56px 72px;
}

body.pg-custom .pg-vsl__inner {
	display: grid;
	grid-template-columns: minmax(0, 400px) minmax(0, 520px);
	grid-template-rows: 1fr auto auto 1fr;
	grid-template-areas: "video ." "video head" "video next" "video .";
	justify-content: center;
	column-gap: 72px;
	text-align: left;
}

body.pg-custom .pg-vsl__inner--text-only {
	grid-template-columns: minmax(0, 640px);
	grid-template-rows: auto auto;
	grid-template-areas: "head" "next";
	text-align: center;
}

body.pg-custom .pg-vsl__head {
	grid-area: head;
}

body.pg-custom .pg-vsl__head h1 {
	margin-bottom: 16px;
	font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem);
}

body.pg-custom .pg-vsl__text {
	font-size: 1.15rem;
}

body.pg-custom .pg-vsl__text p:last-child {
	margin-bottom: 0;
}

body.pg-custom .pg-vsl__video {
	grid-area: video;
	min-width: 0;
}

body.pg-custom .pg-vsl__video .pg-vreview {
	width: min(100%, calc((100vh - 160px) * 9 / 16));
	width: min(100%, calc((100svh - 160px) * 9 / 16));
	min-width: min(100%, 300px);
	margin-inline: auto;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 18px 48px rgba(0, 0, 0, 0.45);
}

body.pg-custom .pg-vsl__next {
	grid-area: next;
	margin-top: 36px;
}

body.pg-custom .pg-vsl__steps-heading {
	margin-bottom: 16px;
	font-size: 1.3rem;
}

body.pg-custom .pg-vsl__steps {
	display: grid;
	gap: 12px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

body.pg-custom .pg-vsl__step {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--pg-heading);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
}

body.pg-custom .pg-vsl__num {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--pg-primary);
	color: #ffffff;
	font-family: var(--pg-font-display);
	font-weight: 800;
}

body.pg-custom .pg-vsl__actions {
	justify-content: flex-start;
}

body.pg-custom .pg-vsl__cta {
	min-height: 54px;
	padding-inline: 28px;
	font-size: 1.05rem;
}

body.pg-custom .pg-vsl__cta .pg-icon {
	width: 22px;
	height: 22px;
}

body.pg-custom .pg-vsl__note {
	margin: 12px 0 0;
	color: var(--pg-muted);
	font-size: 0.9rem;
}

@media (max-width: 900px) {
	body.pg-custom .pg-vsl {
		padding-block: 28px 48px;
	}

	body.pg-custom .pg-vsl__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas: "head" "video" "next";
		text-align: center;
	}

	body.pg-custom .pg-vsl__head {
		max-width: 560px;
		margin-inline: auto;
	}

	body.pg-custom .pg-vsl__head h1 {
		margin-bottom: 12px;
		font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.4rem);
	}

	body.pg-custom .pg-vsl__text {
		font-size: 1.05rem;
	}

	body.pg-custom .pg-vsl__video {
		margin-top: 22px;
	}

	body.pg-custom .pg-vsl__video .pg-vreview {
		width: min(100%, 420px);
		min-width: 0;
	}

	body.pg-custom .pg-vsl__next {
		width: fit-content;
		max-width: 100%;
		margin: 32px auto 0;
	}

	body.pg-custom .pg-vsl__actions {
		justify-content: center;
	}
}

/* ---- 1.9.26 (23 Oct 2026): hand-drawn icons (style B: navy marker sketch, steel fills, one amber touch, on white).
   Bigger than the old neon icons so the drawing reads; on navy cards they sit on a white paper tile. */
body.pg-custom .pg-grid--dark :is(.pg-card__icon--img .pg-icon, .pg-step__icon .pg-icon) {
	width: 96px;
	height: 96px;
}

/* ---- Who it's for, and who it isn't (pg_fit) */
body.pg-custom .pg-fit__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	max-width: 980px;
	margin-inline: auto;
}

body.pg-custom .pg-fit__col {
	padding: 28px;
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius-lg);
	background: var(--pg-surface);
}

body.pg-custom .pg-fit__col--for {
	border-top: 4px solid #1E6FA8;
}

body.pg-custom .pg-fit__col--not {
	border-top: 4px solid #9A9588;
}

body.pg-custom .pg-fit__heading {
	margin: 0 0 16px;
	font-size: 1.25rem;
}

body.pg-custom .pg-fit__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.pg-custom .pg-fit__item {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

body.pg-custom .pg-fit__item .pg-icon {
	width: 22px;
	height: 22px;
	margin-top: 2px;
}

body.pg-custom .pg-fit__col--for .pg-fit__item .pg-icon {
	color: #1E6FA8;
}

body.pg-custom .pg-fit__col--not .pg-fit__item .pg-icon {
	color: #9A9588;
}

body.pg-custom .pg-fit .pg-section-outro {
	max-width: 760px;
	margin: 24px auto 0;
	text-align: center;
}

@media (max-width: 900px) {
	body.pg-custom .pg-fit__cols {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Landing pages: the founder prints, the report cards and the "why free" picture are made 4:3 with room
   round them (06-build/tools/v1926_landing_images.py), so they show whole and without a box. */
body.pg-custom :is(#meet-justin, [id^="reports"], #why-free, #cf-brickwork-grid) .pg-split__media img { /* 1.9.32: reports, reports-ads… (two on one page) */
	object-fit: contain;
	border-radius: 0;
}

/* ---- Thank-you page (1.9.26): one block per offer, picked before first paint (page-thank-you.php). */
body.pg-custom .pg-ty--website,
body.pg-custom .pg-ty--social,
html:is(.pg-ty-website, .pg-ty-social) body.pg-custom .pg-ty--default {
	display: none;
}

html.pg-ty-website body.pg-custom .pg-ty--website,
html.pg-ty-social body.pg-custom .pg-ty--social {
	display: block;
}

/* ---- Ads landing pages on phones (1.9.26, Justin's rule: the form above the fold): the headline and the
   ticks say the offer, so the paragraph waits for desktop and the headline is a size smaller. */
@media (max-width: 640px) {
	body.pg-custom #ad-hero {
		min-height: 0;
		padding-block: 20px 28px;
	}

	body.pg-custom #ad-hero .pg-hero__text {
		display: none;
	}

	body.pg-custom #ad-hero .pg-eyebrow {
		margin-bottom: 8px;
		font-size: 0.75rem;
	}

	body.pg-custom #ad-hero h1 {
		margin-bottom: 14px;
		font-size: 1.75rem;
		line-height: 1.12;
	}

	body.pg-custom #ad-hero .pg-list {
		gap: 6px;
		margin-bottom: 16px;
		font-size: 0.95rem;
	}

	body.pg-custom #ad-hero .pg-hero__inner--with-form {
		gap: 16px;
	}
}

/* ---- Websites we've built (pg_showcase, 1.9.28): device mockups in the testimonials' slider, nothing else.
   4 across on desktop, 2 on tablets, 1 on phones (the slider's own breakpoints). */
body.pg-custom .pg-showcase__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

body.pg-custom .pg-showcase .pg-vreviews__track {
	align-items: center;
}

body.pg-custom .pg-vreviews--showcase .pg-vreviews__item {
	scroll-snap-align: start;
}

/* ---- A client's Instagram on a phone (pg_insta, 1.9.28): words left, phone right; phones: words, then the phone. */
body.pg-custom .pg-insta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	gap: 56px;
	align-items: center;
}

body.pg-custom .pg-insta__copy .pg-section-head {
	max-width: none;
	margin: 0 0 16px;
	text-align: left;
}

body.pg-custom .pg-insta__text {
	margin-bottom: 16px;
}

body.pg-custom .pg-insta__copy .pg-section-cta {
	justify-content: flex-start;
}

body.pg-custom .pg-insta__phone {
	position: relative;
	width: min(380px, 100%);
	margin-inline: auto;
	padding: 12px;
	border-radius: 48px;
	background: #12151a;
	box-shadow: 0 0 0 2px #3c4046, 0 24px 60px rgba(20, 37, 59, 0.25);
}

body.pg-custom .pg-insta__screen {
	position: relative;
	height: 720px;
	overflow: hidden; /* 1.9.31: the screen stays put; the grid and the feed scroll inside it, so nothing pokes past the rounded corners */
	border-radius: 38px;
	background: #ffffff;
	color: #111111;
	font-size: 0.82rem;
	line-height: 1.4;
}

body.pg-custom :is(.pg-insta__home, .pg-insta__posts) {
	scrollbar-width: none; /* like the app: scrolling works, no scroll bar */
	overscroll-behavior: auto; /* 1.9.33: at the end of the feed, a swipe carries on down the page (was contain) */
}

body.pg-custom :is(.pg-insta__home, .pg-insta__posts)::-webkit-scrollbar {
	display: none;
}

body.pg-custom .pg-insta__home {
	height: 100%;
	overflow-y: auto;
}

body.pg-custom .pg-insta__reel {
	position: relative;
}

body.pg-custom .pg-insta__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	color: #ffffff;
	cursor: pointer;
}

body.pg-custom .pg-insta__play .pg-icon {
	width: 30px;
	height: 30px;
	margin-left: 4px;
}

body.pg-custom .pg-insta__reel.is-playing .pg-insta__play {
	display: none;
}

body.pg-custom .pg-insta__profile {
	padding: 40px 18px 14px;
	text-align: left;
}

body.pg-custom .pg-insta__avatar {
	display: block;
	width: 72px;
	height: 72px;
	margin-bottom: 10px;
	padding: 13px;
	border: 2px solid #dbdbdb;
	border-radius: 50%;
	object-fit: contain;
	background: #ffffff;
}

body.pg-custom .pg-insta__handle {
	margin: 0;
	font-weight: 700;
	font-size: 1rem;
}

body.pg-custom .pg-insta__name {
	margin: 2px 0 6px;
	font-weight: 600;
}

body.pg-custom .pg-insta__bio {
	margin: 0;
	color: #262626;
}

body.pg-custom .pg-insta__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px;
	margin: 0;
	padding: 0;
	border-top: 1px solid #efefef;
	list-style: none;
}

body.pg-custom .pg-insta__tile {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #f2f2f2;
	cursor: pointer;
	aspect-ratio: 3 / 4;
}

body.pg-custom .pg-insta__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.pg-custom .pg-insta__tile:focus-visible {
	outline: 3px solid #1E6FA8;
	outline-offset: -3px;
}

body.pg-custom .pg-insta__badge {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 18px;
	height: 18px;
	color: #ffffff;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

body.pg-custom .pg-insta__badge .pg-icon {
	width: 18px;
	height: 18px;
}

body.pg-custom .pg-insta__badge--multi {
	border: 2px solid #ffffff;
	border-radius: 3px;
	box-shadow: 3px -3px 0 -1px rgba(255, 255, 255, 0.85);
	width: 14px;
	height: 14px;
}

body.pg-custom .pg-insta__feed {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: #ffffff;
}

body.pg-custom .pg-insta__feed[hidden] {
	display: none;
}

body.pg-custom .pg-insta__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 34px 14px 10px;
	border-bottom: 1px solid #efefef;
	font-weight: 700;
}

body.pg-custom .pg-insta__back {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f2f2f2;
	color: #111111;
	cursor: pointer;
}

body.pg-custom .pg-insta__back .pg-icon {
	width: 16px;
	height: 16px;
	transform: scaleX(-1);
}

body.pg-custom .pg-insta__posts {
	position: relative;
	flex: 1;
	overflow-y: auto;
}

body.pg-custom .pg-insta__post {
	padding-bottom: 14px;
	border-bottom: 1px solid #efefef;
}

body.pg-custom .pg-insta__post-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 12px;
	font-weight: 700;
}

body.pg-custom .pg-insta__mini {
	width: 28px;
	height: 28px;
	padding: 2px;
	border: 1px solid #dbdbdb;
	border-radius: 50%;
	object-fit: contain;
}

body.pg-custom .pg-insta__slides {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

body.pg-custom .pg-insta__slides img {
	flex: 0 0 100%;
	width: 100%;
	height: auto;
	scroll-snap-align: center;
}

body.pg-custom .pg-insta__video {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	background: #000000;
}

body.pg-custom .pg-insta__count {
	margin: 6px 12px 0;
	color: #737373;
	font-size: 0.75rem;
	text-align: right;
}

body.pg-custom .pg-insta__caption {
	margin: 8px 12px 0;
	color: #111111;
}

body.pg-custom .pg-insta__date {
	margin: 6px 12px 0;
	color: #737373;
	font-size: 0.72rem;
}

@media (max-width: 900px) {
	body.pg-custom .pg-insta__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	body.pg-custom .pg-insta__screen {
		height: 640px;
	}
}

body.pg-custom .pg-insta__bar-title {
	font-size: 0.95rem;
}

/* 1.9.31: photo arrows inside a post (Instagram's desktop arrows): white discs at mid height */
body.pg-custom .pg-insta__gallery {
	position: relative;
}

body.pg-custom .pg-insta__arrow {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #111111;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	transform: translateY(-50%);
}

body.pg-custom .pg-insta__arrow[hidden] {
	display: none;
}

body.pg-custom .pg-insta__arrow .pg-icon {
	width: 14px;
	height: 14px;
}

body.pg-custom .pg-insta__arrow--prev {
	left: 8px;
}

body.pg-custom .pg-insta__arrow--prev .pg-icon {
	transform: scaleX(-1);
}

body.pg-custom .pg-insta__arrow--next {
	right: 8px;
}

/* ---- A client report as real text (pg_report_card, 1.9.33): the numbers stay readable on a phone. */
body.pg-custom .pg-report {
	--pg-text: var(--pg-ink); /* a white card: readable inside dark sections too */
	--pg-muted: var(--pg-ink-muted);
	padding: 28px;
	border: 1px solid var(--pg-line);
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 18px 40px rgba(20, 37, 59, 0.12);
	color: var(--pg-text);
	text-align: left;
}

body.pg-custom .pg-report__eyebrow {
	margin: 0 0 6px;
	color: var(--pg-primary);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.pg-custom .pg-report__title {
	margin: 0 0 6px;
	color: var(--pg-dark);
	font-family: var(--pg-font-display);
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	font-weight: 800;
	line-height: 1.15;
}

body.pg-custom .pg-report__sub {
	margin: 0 0 20px;
	color: var(--pg-muted);
	font-size: 0.95rem;
}

body.pg-custom .pg-report__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.pg-custom .pg-report__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	border-radius: 12px;
	background: var(--pg-surface-alt);
}

body.pg-custom .pg-report__value {
	align-self: flex-start;
	color: var(--pg-dark);
	font-family: var(--pg-font-display);
	font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem);
	font-weight: 800;
	line-height: 1.05;
}

/* The figure that matters, ringed in amber like a marker pen. */
body.pg-custom .pg-report__value--ring {
	position: relative;
	color: var(--pg-primary);
}

body.pg-custom .pg-report__value--ring::after {
	position: absolute;
	inset: -8px -12px;
	border: 3px solid var(--pg-cta);
	border-radius: 50%;
	content: "";
	transform: rotate(-4deg);
	pointer-events: none;
}

body.pg-custom .pg-report__label {
	color: var(--pg-text);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
}

body.pg-custom .pg-report__list-title {
	margin: 22px 0 8px;
	padding-top: 18px;
	border-top: 2px dashed var(--pg-line);
	color: var(--pg-dark);
	font-weight: 700;
}

body.pg-custom .pg-report__list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.pg-custom .pg-report__list li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 1rem;
}

body.pg-custom .pg-report__list strong {
	flex: none;
	color: var(--pg-dark);
}

body.pg-custom .pg-report__foot {
	margin: 18px 0 0;
	color: var(--pg-muted);
	font-size: 0.85rem;
}

@media (max-width: 640px) {
	body.pg-custom .pg-report {
		padding: 20px;
	}

	body.pg-custom .pg-report__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	body.pg-custom .pg-report__stat {
		padding: 14px;
	}

	body.pg-custom .pg-report__label {
		font-size: 0.9rem;
	}
}

/* CF Brickwork's Instagram phone (1.9.33): trimmed to the phone and its shadow, shown whole at its own shape. */
body.pg-custom #cf-brickwork-grid .pg-split__media img {
	aspect-ratio: auto;
	max-height: 620px;
	margin-inline: auto;
}

/* ---- The questions after an enquiry (1.9.34, /thank-you/ #before-your-call, form 434; Justin 24 Oct: "not styled
   very nicely… boring"): each answer is a big tap button that fills blue when picked, a slim progress bar, the
   site's buttons. Elementor's own markup, so the selectors follow its class names. */
body.pg-custom #before-your-call .pg-form-wrap {
	max-width: 760px;
	margin-inline: auto;
}

body.pg-custom #before-your-call .pg-form-card__form:is(#pg-form-boost, *) .elementor-form :is(.elementor-field-type-radio, .elementor-field-type-checkbox) > .elementor-field-label {
	margin-bottom: 12px;
	color: var(--pg-dark);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

body.pg-custom #before-your-call .elementor-form :is(.elementor-field-type-radio, .elementor-field-type-checkbox) {
	margin-bottom: 22px;
}

body.pg-custom #before-your-call .elementor-form .elementor-field-subgroup {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
}

body.pg-custom #before-your-call .elementor-form .elementor-field-option {
	position: relative;
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
}

body.pg-custom #before-your-call .elementor-form .elementor-field-option input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

body.pg-custom #before-your-call .elementor-form .elementor-field-option label {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	margin: 0;
	padding: 12px 16px;
	border: 2px solid var(--pg-line);
	border-radius: 10px;
	background: #ffffff;
	color: var(--pg-dark);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}

body.pg-custom #before-your-call .elementor-form .elementor-field-option label::before {
	flex: none;
	width: 20px;
	height: 20px;
	border: 2px solid #9aa7b3;
	border-radius: 50%;
	background: #ffffff;
	content: "";
}

body.pg-custom #before-your-call .elementor-form .elementor-field-type-checkbox .elementor-field-option label::before {
	border-radius: 5px;
}

body.pg-custom #before-your-call .elementor-form .elementor-field-option label:hover {
	border-color: var(--pg-primary);
}

body.pg-custom #before-your-call .elementor-form .elementor-field-option input:checked + label {
	border-color: var(--pg-primary);
	background: var(--pg-surface-alt);
}

body.pg-custom #before-your-call .elementor-form .elementor-field-option input:checked + label::before {
	border-color: var(--pg-primary);
	background: var(--pg-primary);
	box-shadow: inset 0 0 0 3px #ffffff;
}

body.pg-custom #before-your-call .elementor-form .elementor-field-option input:focus-visible + label {
	outline: 3px solid var(--pg-primary);
	outline-offset: 2px;
}

/* Progress: a slim bar in the site's blue, no percentage text. */
body.pg-custom #before-your-call .elementor-form .e-form__indicators {
	margin-bottom: 24px;
	padding: 0;
}

body.pg-custom #before-your-call .elementor-form .e-form__indicators__indicator__progress {
	height: 10px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--pg-line);
}

body.pg-custom #before-your-call .elementor-form .e-form__indicators__indicator__progress__meter {
	height: 100%;
	padding: 0;
	border-radius: 999px;
	background: var(--pg-primary);
	color: transparent;
	font-size: 0;
}

body.pg-custom #before-your-call .elementor-form .e-form__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	margin-top: 8px;
}

body.pg-custom #before-your-call .elementor-form .e-form__buttons__wrapper {
	flex: 1 1 140px;
	width: auto;
	margin: 0;
	padding: 0;
}

/* Back is a plain outline button; !important only because every form button's colour is forced (see above). */
body.pg-custom #before-your-call .pg-form-card__form .elementor-form .e-form__buttons__wrapper__button-previous {
	border: 2px solid var(--pg-line);
	background-color: #ffffff !important;
	color: var(--pg-dark) !important;
}

@media (max-width: 640px) {
	body.pg-custom #before-your-call .elementor-form .elementor-field-subgroup {
		grid-template-columns: minmax(0, 1fr);
	}
}