/*
 * 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, tick lists included (Justin, 13 Nov 2026).
 *   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 pages (body class pg-landing): 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%;
	/* Alba, Wed 11 Nov 2026: the WHOLE photo at its own shape. The 4:3 crop cut people at the edge (site gate);
	   Justin's rules: never crop people, no blurred borders. */
	height: auto;
	aspect-ratio: auto;
	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-card__icon--img .pg-icon, .pg-step__icon .pg-icon) {
	width: 104px;
	height: 104px;
}

/* ---- 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 are the only ones in this file; they keep the submit button on brand. */
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);
}

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;
}

/* ---- 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;
}

/* 100px (was 88): the hand-drawn card icons read better a little bigger (13 Nov). */
body.pg-custom .pg-card__icon--img {
	width: 100px;
	height: 100px;
	background: none;
}

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

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: 72px;
	height: 72px;
}

@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: 1px solid rgba(15, 42, 74, 0.14);
	border-radius: var(--pg-radius-lg);
	background: var(--pg-dark);
	box-shadow: 0 10px 28px rgba(15, 42, 74, 0.22);
}

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);
}

/* 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: flex-end;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 0 26%;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}

body.pg-custom .pg-vreview__play::before {
	content: "";
	width: 64px;
	height: 64px;
	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% / 28px 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 / 44px 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%);
}

/* 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) .pg-vreview {
		width: min(290px, 100% - 104px);
	}

	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;
	}

	/* Review widgets centre on phones too (Trustindex Google reviews; Justin, Fri 13 Nov 2026: "on mobile view
	   everything should be centre aligned"). The widget's own CSS sets them left. */
	body.pg-custom .pg-embed .ti-widget .ti-review-content,
	body.pg-custom .pg-embed .ti-widget .ti-read-more,
	body.pg-custom .pg-embed .ti-widget.ti-goog .ti-reviews-container-wrapper .ti-inner > .ti-stars {
		text-align: center;
	}

	/* 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 .pg-sticky-cta__call {
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 50px;
		height: 50px;
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: var(--pg-radius-btn);
		color: #ffffff;
	}

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

	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 pages (body class pg-landing): 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: every point centred, its tick beside it (Justin, Fri 13 Nov 2026: "on mobile view everything
	   should be centre aligned"; the old centred block with left-aligned lines read as left-aligned once a point wrapped). */
	body.pg-custom .pg-list {
		justify-items: center;
		text-align: center;
	}

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

	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 .pg-hero__card {
		width: 100%;
		max-width: 560px;
		margin-inline: auto;
	}

	/* Hero form: at 900px and below it becomes the first light section under the hero
	   (the same single form, so no duplicate form or reCAPTCHA). Justin's standard, 3 Oct 2026. */
	body.pg-custom .pg-hero.pg-hero--with-form {
		padding-bottom: 0;
	}

	body.pg-custom .pg-hero--with-form .pg-hero__inner {
		gap: 40px;
	}

	body.pg-custom .pg-hero__form {
		margin-inline: calc(-1 * var(--pg-gutter));
		padding: 32px var(--pg-gutter) 40px;
		background: var(--pg-surface-alt);
	}

	body.pg-custom .pg-hero__form .pg-form-card {
		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.
   ========================================================================= */

/* Alba Removals (05-design/design.md): headings in Archivo at 112% width, the logo's
   typeface a touch narrower than the logo (125%) so long headings fit on a phone. */
body.pg-custom :is(h1, h2, h3) {
	font-stretch: 112%;
}

/* Alba Removals: a row of real job photos above the "these photos" proof sections
   (pg_logos with variant 'photos'). Since Wed 11 Nov 2026 a justified row: each item grows by its photo's own
   width/height (--r, set in pg_logos), so every photo in a row is the same height and none is cropped
   (never crop people). About 4 across, 2 across on phones. */
body.pg-custom .pg-logos--photos {
	padding-block: 24px 0;
	border-bottom: 0;
	background: transparent;
}

body.pg-custom .pg-logos--photos .pg-logos__list {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 14px;
}

body.pg-custom .pg-logos--photos .pg-logos__item {
	flex: var(--r, 1.5) 1 calc(var(--r, 1.5) * 15%);
	min-width: 0;
}

body.pg-custom .pg-logos--photos .pg-logos__item img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	border-radius: var(--pg-radius, 12px);
}

@media (max-width: 640px) {
	body.pg-custom .pg-logos--photos .pg-logos__list {
		gap: 10px;
	}

	body.pg-custom .pg-logos--photos .pg-logos__item {
		flex-basis: calc(var(--r, 1.5) * 30%);
	}
}

/* ==========================================================================
   Alba hero (pg_hero_split; Justin, Fri 13 Nov 2026). Desktop: copy on navy at the left, the photo WHOLE at the
   right (never under text, never cropped). Phones/tablets: white, stacked: headline, line, rating cards, quote
   button, call button, photo. Then the rating cards (the same ones as the ad pages).
   ========================================================================== */
body.pg-custom .pg-hero-split {
	--pg-heading: #ffffff;
	--pg-text: rgba(255, 255, 255, 0.88);
	--pg-muted: rgba(255, 255, 255, 0.76);
	--pg-eyebrow: rgba(255, 255, 255, 0.86);
	--pg-focus: #ffffff;
	padding-block: 56px 64px;
	background: var(--pg-dark);
	color: var(--pg-text);
}

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

body.pg-custom .pg-hero-split__copy {
	min-width: 0;
	max-width: 640px;
}

body.pg-custom .pg-hero-split--no-photo .pg-hero-split__inner {
	grid-template-columns: minmax(0, 1fr);
}

body.pg-custom .pg-hero-split h1 {
	margin-bottom: 16px;
}

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

body.pg-custom .pg-hero-split__text p {
	margin: 0;
}

body.pg-custom .pg-rates.pg-hero-split__rates {
	margin: 24px 0 0;
}

body.pg-custom .pg-hero-split__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

body.pg-custom .pg-hero-split__guide,
body.pg-custom .pg-hero-split__guide:hover {
	border-color: rgba(255, 255, 255, 0.75);
	color: #ffffff;
}

body.pg-custom .pg-hero-split__call {
	margin: 14px 0 0;
	font-weight: 700;
}

body.pg-custom .pg-hero-split__call a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #ffffff;
	text-decoration: none;
}

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

body.pg-custom .pg-nav__label {
	border: 0;
	background: none;
	font-family: inherit;
	line-height: inherit;
	cursor: pointer;
}

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

body.pg-custom .pg-hero-split__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pg-radius-lg);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

body.pg-custom .pg-rates {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 200px));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.pg-custom :is(.pg-rates__tile, .pg-rates__link) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	color: #2b3640;
	text-decoration: none;
}

body.pg-custom .pg-rates__tile {
	padding: 10px 14px;
	border: 1px solid #dde3e8;
	border-radius: var(--pg-radius);
	background: #ffffff;
	box-shadow: 0 2px 10px rgba(15, 42, 74, 0.08);
}

body.pg-custom .pg-rates__site {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 20px;
}

body.pg-custom .pg-rates__site img {
	display: block;
	width: auto;
	height: 20px;
}

body.pg-custom .pg-rates__name {
	color: #5f6368;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

body.pg-custom .pg-rates__img {
	display: block;
	width: auto;
	height: 18px;
}

body.pg-custom .pg-rates__stars {
	color: #f4b400;
	font-size: 17px;
	letter-spacing: 1px;
	line-height: 18px;
}

body.pg-custom .pg-rates__score {
	color: #2b3640;
	font-size: 15px;
	line-height: 1.2;
}

body.pg-custom .pg-rates__score strong {
	color: #0f2a4a;
	font-size: 17px;
}

@media (max-width: 900px) {
	body.pg-custom .pg-hero-split {
		--pg-heading: var(--pg-dark);
		--pg-text: var(--pg-ink);
		--pg-muted: var(--pg-ink-muted);
		--pg-eyebrow: var(--pg-primary);
		--pg-focus: var(--pg-primary);
		padding-block: 32px 40px;
		background: #ffffff;
		text-align: center;
	}

	body.pg-custom .pg-hero-split__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	body.pg-custom .pg-rates.pg-hero-split__rates {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 420px;
		margin: 22px auto 0;
	}

	body.pg-custom :is(.pg-hero-split__rates .pg-rates__tile, .pg-hero-split__rates .pg-rates__link) {
		align-items: center;
	}

	body.pg-custom .pg-hero-split__actions {
		flex-direction: column;
		align-items: stretch;
		max-width: 420px;
		margin-inline: auto;
	}

	body.pg-custom .pg-hero-split__actions .pg-btn {
		justify-content: center;
		width: 100%;
	}

	body.pg-custom .pg-hero-split__guide,
	body.pg-custom .pg-hero-split__guide:hover {
		border-color: var(--pg-primary);
		color: var(--pg-primary);
	}

	body.pg-custom .pg-hero-split__call a {
		color: var(--pg-primary);
	}

	body.pg-custom .pg-hero-split__photo img {
		box-shadow: 0 10px 28px rgba(15, 42, 74, 0.18);
	}

	body.pg-custom .pg-hero-split--no-mobile-photo .pg-hero-split__photo {
		display: none;
	}
}

/* ==========================================================================
   Alba video testimonials (Justin, Fri 13 Nov 2026): white section, both side by side on desktop, one at a time
   on phones; a "Play 2:50" button UNDER each video (the old disc sat on their faces); a border + shadow so the
   navy thumbnail stands out; on phones the card stays left of the round contact button's corner.
   ========================================================================== */
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(300px, calc((100% - var(--pg-gap)) / 2));
}

body.pg-custom :is(.pg-vreview__video, .pg-vreview__player) {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	cursor: pointer;
}

body.pg-custom .pg-vreview__play-label {
	display: none;
}

@media (max-width: 640px) {
	body.pg-custom .pg-vreviews--pair .pg-vreviews__track {
		justify-content: flex-start;
	}

	body.pg-custom .pg-vreviews--pair .pg-vreviews__item {
		flex-basis: 100%;
	}

	body.pg-custom .pg-vreviews.pg-vreviews--pair .pg-vreview {
		width: min(240px, 100% - 140px);
	}
}

/* ==========================================================================
   Timeline steps (pg_steps_timeline; Justin, Fri 13 Nov 2026). Desktop: a line down the middle, each step's icon on
   the line and its card alternating left and right. Phones/tablets: one centred column joined by a short line.
   ========================================================================== */
body.pg-custom .pg-timeline {
	position: relative;
	max-width: 1040px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

body.pg-custom .pg-timeline::before {
	content: "";
	position: absolute;
	top: 56px;
	bottom: 56px;
	left: calc(50% - 2px);
	width: 4px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--pg-primary) 28%, #ffffff);
}

body.pg-custom .pg-timeline__step {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr);
	align-items: center;
}

body.pg-custom .pg-timeline__step + .pg-timeline__step {
	margin-top: 8px;
}

body.pg-custom .pg-timeline__marker {
	position: relative;
	z-index: 1;
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	width: 112px;
	height: 112px;
	border: 4px solid color-mix(in srgb, var(--pg-primary) 28%, #ffffff);
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 6px 18px rgba(15, 42, 74, 0.1);
}

body.pg-custom .pg-timeline__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

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

body.pg-custom .pg-timeline__num {
	position: absolute;
	top: -6px;
	right: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--pg-primary);
	color: #ffffff;
	font-weight: 700;
	line-height: 1;
}

body.pg-custom .pg-timeline__card {
	grid-row: 1;
	padding: 22px 26px;
	border: 1px solid var(--pg-line);
	border-radius: var(--pg-radius-lg);
	background: #ffffff;
	box-shadow: 0 4px 16px rgba(15, 42, 74, 0.06);
}

body.pg-custom .pg-timeline__step:nth-child(odd) .pg-timeline__card {
	grid-column: 1;
	text-align: right;
}

body.pg-custom .pg-timeline__step:nth-child(even) .pg-timeline__card {
	grid-column: 3;
}

body.pg-custom .pg-timeline__title {
	margin-bottom: 6px;
	font-size: 1.25rem;
}

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

@media (max-width: 900px) {
	body.pg-custom .pg-timeline {
		max-width: 520px;
	}

	body.pg-custom .pg-timeline::before {
		display: none;
	}

	body.pg-custom .pg-timeline__step {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: 14px;
		text-align: center;
	}

	body.pg-custom .pg-timeline__step + .pg-timeline__step {
		margin-top: 0;
		padding-top: 44px;
	}

	body.pg-custom .pg-timeline__step + .pg-timeline__step::before {
		content: "";
		position: absolute;
		top: 6px;
		left: calc(50% - 2px);
		width: 4px;
		height: 32px;
		border-radius: 2px;
		background: color-mix(in srgb, var(--pg-primary) 28%, #ffffff);
	}

	body.pg-custom .pg-timeline__marker {
		grid-column: 1;
		width: 96px;
		height: 96px;
	}

	body.pg-custom .pg-timeline__icon .pg-icon {
		width: 72px;
		height: 72px;
	}

	body.pg-custom :is(.pg-timeline__step:nth-child(odd), .pg-timeline__step:nth-child(even)) .pg-timeline__card {
		grid-column: 1;
		grid-row: 2;
		width: 100%;
		text-align: center;
	}
}

/* The Google reviews widget fills in after load: keep its space so jumps further down the page land right. */
body.pg-custom .pg-embed:has(.ti-widget, [data-src*="trustindex"], script[src*="trustindex"]) {
	min-height: 280px;
}