/* Beyond+ UX layer. All selectors are prefixed bpx- except the marked fixes to theme/plugin markup. */

:root {
	--bpx-brand: #E17335;
	--bpx-brand-2: #ec8e58;
	--bpx-ink: #0a0909;
	--bpx-paper: #F5F2EE;
	--bpx-muted: #aaa5a1;
	--bpx-surface: #131212;
	--bpx-surface-2: #1b1919;
	--bpx-line: #2c2725;
	--bpx-text: #F5F2EE;      /* main text: switches with the colour mode */
	--bpx-on-dark: #F5F2EE;   /* text on surfaces that stay dark in both modes (hero card) */
	--bpx-accent: #E17335;    /* orange for small text */
	--bpx-glass: rgba(10, 9, 9, .92);
	--bpx-field: #0d0c0c;
	--bpx-field-line: #3a3330;
	--bpx-placeholder: #8a837f;
	--bpx-band: linear-gradient(180deg, #0d0c0c 0%, #000 100%);
	--bpx-shadow: none;
	--bpx-radius: 14px;
	--bpx-head: 'Space Grotesk', 'Onest', system-ui, sans-serif;
	--bpx-top: 0px;
	/* Body grey: #878686 -> #aaa5a1 (5.8:1 -> 8.3:1 on black); same hue, easier reading on long pages. */
	--theme-palette-color-3: #aaa5a1;
	--wp--preset--color--palette-color-3: #aaa5a1;
	/* Theme buttons are orange: dark label instead of white (2.9:1 -> 6.3:1). */
	--theme-button-text-initial-color: var(--bpx-ink);
	--theme-button-text-hover-color: var(--bpx-ink);
}

/* ---------- Light mode ----------
   Blocksy's alternate palette is the light look; it is active when <html data-color-mode> contains "dark"
   (the theme names the modes the other way round on this site). Warm off-white, ink text, deeper orange for small text. */
html[data-color-mode*="dark"] {
	--bpx-text: #171010;
	--bpx-muted: #5E5651;      /* 6.7:1 on #FAF7F2 */
	--bpx-surface: #FFFFFF;
	--bpx-surface-2: #F4EEE7;
	--bpx-line: #E7DDD2;
	--bpx-accent: #A64A15;     /* 5.3:1 on the #F7F2EB page, 5.8:1 on white */
	--bpx-glass: rgba(250, 247, 242, .92);
	--bpx-field: #FFFFFF;
	--bpx-field-line: #D6CABD;
	--bpx-placeholder: #8C827B;
	--bpx-band: radial-gradient(90% 120% at 100% 0%, rgba(225, 115, 53, .14), transparent 60%), linear-gradient(180deg, #FFF8F1 0%, #FAF7F2 100%);
	--bpx-shadow: 0 18px 40px -26px rgba(23, 16, 16, .35);
	--theme-palette-color-3: #5E5651;
	--wp--preset--color--palette-color-3: #5E5651;
}

/* Light mode: theme parts that use a fixed light colour (palette 9 is the same in both palettes). */
html[data-color-mode*="dark"] footer svg, html[data-color-mode*="dark"] .ct-footer svg { fill: var(--bpx-accent) !important; }
html[data-color-mode*="dark"] .bpx-proof, html[data-color-mode*="dark"] .bpx-quote, html[data-color-mode*="dark"] .bpx-post-cta, html[data-color-mode*="dark"] .bpx-toc { box-shadow: var(--bpx-shadow); }
html[data-color-mode*="dark"] .bpx-card:hover, html[data-color-mode*="dark"] .vp-portfolio__item-wrap .vp-portfolio__item:hover { box-shadow: 0 28px 50px -26px rgba(225, 115, 53, .45); }
html[data-color-mode*="dark"] .bpx-bar { border-top-color: var(--bpx-line); box-shadow: 0 -10px 30px -20px rgba(23, 16, 16, .35); }

/* ---------- Shared pieces ---------- */
.bpx-ic { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
.bpx-kicker { margin: 0 0 8px; font: 600 12px/1.4 var(--bpx-head); letter-spacing: .14em; text-transform: uppercase; color: var(--bpx-accent); }
.bpx-wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.bpx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 24px; border-radius: 10px; border: 1.5px solid transparent;
	font: 600 16px/1.2 var(--bpx-head); text-decoration: none !important; white-space: nowrap;
	transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.bpx-btn--primary { background: var(--bpx-brand); color: var(--bpx-ink) !important; box-shadow: 0 10px 30px -12px rgba(225, 115, 53, .7); }
.bpx-btn--primary:hover { background: var(--bpx-brand-2); transform: translateY(-1px); }
.bpx-btn--primary .bpx-ic { transition: transform .18s ease; }
.bpx-btn--primary:hover .bpx-ic { transform: translateX(3px); }
.bpx-btn--ghost { background: transparent; border-color: var(--bpx-field-line); color: var(--bpx-text) !important; }
.bpx-hero-cta .bpx-btn--ghost { background: rgba(10, 9, 9, .35); border-color: rgba(245, 242, 238, .45); color: var(--bpx-on-dark) !important; }
.bpx-btn--ghost:hover { border-color: var(--bpx-brand); color: var(--bpx-brand) !important; }
.bpx-btn:focus-visible, .bpx-link:focus-visible, .bpx-card:focus-visible, .bpx-bar__item:focus-visible, .bpx-jump a:focus-visible { outline: 2px solid var(--bpx-brand); outline-offset: 3px; }
.bpx-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 15px/1.2 var(--bpx-head); color: var(--bpx-accent) !important; text-decoration: none !important; }
.bpx-link:hover .bpx-ic { transform: translateX(3px); }
.bpx-link .bpx-ic { transition: transform .18s ease; }
.bpx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bpx-chips li { margin: 0; padding: 7px 14px; border: 1px solid var(--bpx-line); border-radius: 999px; font: 500 13px/1.3 var(--bpx-head); color: var(--bpx-muted); }
.bpx-chips--links li { padding: 0; }
.bpx-chips--links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; color: var(--bpx-text) !important; text-decoration: none !important; }
.bpx-chips--links li:hover { border-color: var(--bpx-brand); }
@media (max-width: 689.98px) {
	.bpx-chips--links { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
	.bpx-chips--links::-webkit-scrollbar { display: none; }
	.bpx-chips--links li { flex: none; }
}

/* ---------- 1. Hero call to action ---------- */
.bpx-hero-cta { margin-top: 28px; }
.bpx-hero-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.bpx-hero-proof { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: rgba(245, 242, 238, .78); }
.bpx-hero-proof a { color: var(--bpx-on-dark) !important; text-decoration: underline; text-decoration-color: var(--bpx-brand); text-underline-offset: 3px; }
.bpx-hero-cta--center { text-align: center; }
.bpx-hero-cta--center .bpx-hero-cta__btns { justify-content: center; }

/* Transparent header over hero photos: a soft top scrim keeps the menu readable. */
#header [data-transparent-row="yes"] { background-image: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .38) 70%, rgba(0, 0, 0, 0) 100%); }
/* Once stuck, the header gets a solid backdrop (it was see-through, so page text showed behind the menu). */
#header [data-sticky*="yes"] [data-row*="middle"] { background: rgba(10, 9, 9, .92) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid #1d1a19; }
/* Stuck header height and logo size are set in the Blocksy header builder (Sticky State Row Shrink / Logo Sticky State Shrink). */
/* Mobile menu: fully opaque, so the page and the header's own close icon do not show through behind the menu. */
#offcanvas[data-behaviour="modal"] { background-color: #000 !important; }
@media (max-width: 689.98px) {
	.bpx-hero-cta__btns { flex-direction: column; }
	.bpx-hero-cta .bpx-btn { width: 100%; white-space: normal; text-align: center; }
}

/* ---------- 2a. Jump menu (service pages) ---------- */
.bpx-jump { position: sticky; top: var(--bpx-top); z-index: 40; background: var(--bpx-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-block: 1px solid var(--bpx-line); }
.bpx-jump[hidden] { display: none; }
.bpx-jump__inner { display: flex; gap: 6px; width: min(1200px, 100% - 32px); margin-inline: auto; padding: 10px 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.bpx-jump__inner::-webkit-scrollbar { display: none; }
.bpx-jump a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; scroll-snap-align: start; font: 500 14px/1 var(--bpx-head); color: var(--bpx-muted) !important; text-decoration: none !important; transition: color .15s ease, background-color .15s ease; }
.bpx-jump a:hover { color: var(--bpx-text) !important; }
.bpx-jump a.is-active { background: var(--bpx-surface-2); color: var(--bpx-text) !important; box-shadow: inset 0 -2px 0 var(--bpx-brand); }
.bpx-jump a.bpx-jump__cta { margin-left: auto; background: var(--bpx-brand); color: var(--bpx-ink) !important; font-weight: 600; }
.bpx-template main h2[id], .bpx-template main section[id] { scroll-margin-top: calc(var(--bpx-top) + 72px); }

/* ---------- 2b. Project proof band ---------- */
.bpx-proof { padding: 56px 0 64px; background: var(--bpx-band); border-bottom: 1px solid var(--bpx-line); }
.bpx-proof__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.bpx-proof__title, .bpx-related__title { margin: 0; font: 600 clamp(24px, 3vw, 34px)/1.15 var(--bpx-head); color: var(--bpx-text); }
.bpx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bpx-card {
	display: flex; flex-direction: column; overflow: hidden; border-radius: var(--bpx-radius);
	background: var(--bpx-surface); border: 1px solid var(--bpx-line); box-shadow: var(--bpx-shadow); text-decoration: none !important; color: inherit !important;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.bpx-card:hover { transform: translateY(-4px); border-color: rgba(225, 115, 53, .6); box-shadow: 0 24px 50px -28px rgba(225, 115, 53, .55); }
.bpx-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bpx-surface-2); }
.bpx-card__media--blank { background: radial-gradient(120% 90% at 100% 0%, rgba(225, 115, 53, .35), transparent 60%), linear-gradient(135deg, #171414, #0a0909); }
.bpx-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bpx-card:hover .bpx-card__img { transform: scale(1.05); }
.bpx-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.bpx-card__cat { font: 600 12px/1.3 var(--bpx-head); letter-spacing: .1em; text-transform: uppercase; color: var(--bpx-accent); }
.bpx-card__title { margin: 0; font: 600 18px/1.3 var(--bpx-head); color: var(--bpx-text); }
.bpx-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; font-size: 14px; color: var(--bpx-muted); }
.bpx-proof .bpx-chips { margin-top: 24px; }
@media (max-width: 899.98px) {
	.bpx-proof { padding: 40px 0 44px; }
	.bpx-proof__head { align-items: flex-start; flex-direction: column; gap: 4px; }
	.bpx-proof .bpx-cards { display: flex; gap: 14px; margin-inline: -24px; padding: 0 24px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.bpx-proof .bpx-cards::-webkit-scrollbar { display: none; }
	.bpx-proof .bpx-card { flex: 0 0 78%; scroll-snap-align: start; }
	.bpx-related .bpx-cards { grid-template-columns: 1fr; }
}

/* ---------- 3. Sticky mobile action bar ---------- */
.bpx-bar { display: none; }
@media (max-width: 768px) {
	.bpx-bar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 8px;
		padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--bpx-glass);
		-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--bpx-line);
		transform: translateY(0); transition: transform .25s ease;
	}
	.bpx-bar.is-hidden { transform: translateY(110%); }
	.bpx-bar__item { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 10px; background: var(--bpx-surface-2); border: 1px solid var(--bpx-line); font: 600 15px/1 var(--bpx-head); color: var(--bpx-text) !important; text-decoration: none !important; }
	.bpx-bar__item .bpx-ic { width: 20px; height: 20px; color: var(--bpx-brand); }
	.bpx-bar__item--primary { background: var(--bpx-brand); border-color: var(--bpx-brand); color: var(--bpx-ink) !important; }
	.bpx-bar__item--primary .bpx-ic { color: var(--bpx-ink); }
	/* Room for the bar sits inside the footer, so it takes the footer colour when the bar hides there (it showed as a black strip). */
	body.bpx-has-bar #footer { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
	/* The bar replaces the floating WhatsApp button on phones, so nothing covers the text. */
	body.bpx-has-bar #blt-widget { display: none !important; }
}

/* ---------- 4. Posts ---------- */
.bpx-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 0 6px; padding: 0; list-style: none; font-size: 14px; }
.bpx-crumbs li { margin: 0; color: var(--bpx-muted); }
.bpx-crumbs li + li::before { content: '/'; margin: 0 10px; color: var(--bpx-line); }
.bpx-crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--bpx-muted) !important; text-decoration: none !important; }
.bpx-crumbs a:hover { color: var(--bpx-accent) !important; }
.bpx-readtime { margin: 0 0 28px; font: 500 13px/1.4 var(--bpx-head); letter-spacing: .08em; text-transform: uppercase; color: var(--bpx-accent); }
.bpx-toc { margin: 28px 0 36px; padding: 0; border: 1px solid var(--bpx-line); border-left: 3px solid var(--bpx-brand); border-radius: 12px; background: var(--bpx-surface); }
.bpx-toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 20px; cursor: pointer; list-style: none; font: 600 16px/1.2 var(--bpx-head); color: var(--bpx-text); }
.bpx-toc summary::-webkit-details-marker { display: none; }
.bpx-toc summary::after { content: '+'; font-size: 22px; color: var(--bpx-brand); transition: transform .2s ease; }
.bpx-toc[open] summary::after { transform: rotate(45deg); }
.bpx-toc ol { margin: 0; padding: 0 20px 18px 40px; }
.bpx-toc li { margin: 0; padding: 3px 0; }
.bpx-toc a { color: var(--bpx-muted) !important; text-decoration: none !important; line-height: 1.5; }
.bpx-toc a:hover { color: var(--bpx-accent) !important; }
.single-post .entry-content h2[id] { scroll-margin-top: 100px; }
.bpx-post-cta { position: relative; overflow: hidden; margin: 48px 0 0; padding: 32px; border-radius: 16px; background: radial-gradient(120% 140% at 100% 0%, rgba(225, 115, 53, .28), transparent 55%), var(--bpx-surface); border: 1px solid rgba(225, 115, 53, .35); }
.bpx-post-cta__title { margin: 0 0 8px; font: 600 clamp(22px, 2.6vw, 28px)/1.2 var(--bpx-head); color: var(--bpx-text); }
.bpx-post-cta__text { margin: 0 0 20px; color: var(--bpx-muted); }
.bpx-post-cta__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.bpx-related { margin: 56px 0 0; }
.bpx-related .bpx-related__title { margin-bottom: 20px; }
.bpx-related .bpx-card__title { font-size: 16px; }
@media (max-width: 689.98px) {
	.bpx-post-cta { padding: 24px 20px; }
	.bpx-post-cta .bpx-btn { width: 100%; }
}
/* Previous / next: show the article titles on phones too (theme hides them). */
.post-navigation .item-title.ct-hidden-sm { display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 15px; line-height: 1.4; }

/* Post covers carry the title, so the single-post hero keeps its plain background instead of using the cover. */
.single-post .hero-section[data-type="type-2"] > figure { display: none !important; }
/* Show the whole cover (1200 x 630) on archive and related cards instead of a 4:3 crop that cut the title. */
.entries .entry-card .ct-media-container img { aspect-ratio: 1200 / 630 !important; object-fit: cover; }
.bpx-related .bpx-card__media { aspect-ratio: 1200 / 630; }

/* Topical cluster box (posts) and guides section (service pages). */
.bpx-cluster { margin: 48px 0 0; padding: 26px 28px; border-radius: 16px; background: var(--bpx-surface); border: 1px solid var(--bpx-line); box-shadow: var(--bpx-shadow); }
.bpx-cluster__title { margin: 0 0 14px; font: 600 22px/1.25 var(--bpx-head); color: var(--bpx-text); }
.bpx-cluster__list { margin: 0 0 14px; padding: 0 0 0 22px; }
.bpx-cluster__list li { margin: 0; padding: 5px 0; color: var(--bpx-muted); line-height: 1.45; }
.bpx-cluster__list li::marker { color: var(--bpx-accent); font-weight: 600; }
.bpx-cluster__list a { color: var(--bpx-text) !important; text-decoration: underline; text-decoration-color: var(--bpx-line); text-underline-offset: 3px; }
.bpx-cluster__list a:hover { text-decoration-color: var(--bpx-brand); }
.bpx-cluster__list li.is-current span { color: var(--bpx-muted); font-weight: 600; }
.bpx-cluster__list em { margin-left: 6px; font: 600 11px/1 var(--bpx-head); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--bpx-accent); }
.bpx-guides { padding: 56px 0 64px; background: var(--bpx-band); border-top: 1px solid var(--bpx-line); }
.bpx-guides__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 22px; }
.bpx-guides__col { padding: 22px 24px; border-radius: 14px; background: var(--bpx-surface); border: 1px solid var(--bpx-line); box-shadow: var(--bpx-shadow); }
.bpx-guides__name { margin: 0 0 10px; font: 600 17px/1.3 var(--bpx-head); color: var(--bpx-text); }
.bpx-guides .bpx-cluster__list { margin: 0; }

/* Category hubs */
.bpx-hub { margin: 0 0 40px; }
.bpx-hub .bpx-guides__grid { margin-top: 0; }
.bpx-hub .bpx-guides__name a { color: var(--bpx-text) !important; text-decoration: none !important; }
.bpx-hub .bpx-guides__name a:hover { color: var(--bpx-accent) !important; }
.bpx-hub__sub { margin: -4px 0 12px; font-size: 14px; color: var(--bpx-muted); }
.bpx-hub .bpx-cluster__list li.is-current { display: none; }
.category .page-description.ct-hidden-sm { display: block !important; }

/* ---------- 5. Archive headings ---------- */
.bpx-archive-head { margin: 8px 0 40px; }
.bpx-archive-head__title { margin: 0 0 12px; font: 600 clamp(32px, 5vw, 52px)/1.1 var(--bpx-head); color: var(--bpx-text); }
.bpx-archive-head__text { max-width: 640px; margin: 0 0 20px; font-size: 17px; line-height: 1.6; color: var(--bpx-muted); }
.bpx-archive-head--portfolio { width: min(1200px, 100%); margin: 0 auto 32px; text-align: center; }
.bpx-archive-head--portfolio .bpx-archive-head__text { margin-inline: auto; }

/* ---------- 6. Portfolio grid (Visual Portfolio): visible titles, brand colours ---------- */
.vp-portfolio { --vp-color-brand: var(--bpx-brand); --vp-color-brand-darken-10: #c95f24; }
.vp-portfolio__item-wrap .vp-portfolio__item { overflow: hidden; border-radius: 16px; background: var(--bpx-surface); border: 1px solid var(--bpx-line); box-shadow: var(--bpx-shadow); transition: border-color .25s ease, transform .25s ease; }
.vp-portfolio__item-wrap .vp-portfolio__item:hover { border-color: rgba(225, 115, 53, .6); transform: translateY(-3px); }
.vp-portfolio__item-wrap .vp-portfolio__item-img-wrap, .vp-portfolio__item-wrap .vp-portfolio__item-img, .vp-portfolio__item-wrap .vp-portfolio__item-img img { border-radius: 0 !important; }
.vp-portfolio__item-wrap .vp-portfolio__item-caption {
	position: relative !important; inset: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important;
	max-height: none !important; padding: 16px 18px 18px !important; background: transparent !important; text-align: left !important;
}
.vp-portfolio__item-wrap .vp-portfolio__item-caption { clip-path: none !important; min-height: 0 !important; height: auto !important; justify-content: flex-start !important; align-items: flex-start !important; }
.vp-portfolio__item-wrap .vp-portfolio__item-meta-wrap, .vp-portfolio__item-wrap .vp-portfolio__item-meta { padding: 0 !important; margin: 0 !important; }
.vp-portfolio__item-wrap .vp-portfolio__item-meta > * { opacity: 1 !important; transform: none !important; }
.vp-portfolio__item-wrap .vp-portfolio__item-meta-wrap { overflow: visible !important; max-height: none !important; }
.vp-portfolio__item-wrap .vp-portfolio__item-meta { display: flex; flex-direction: column-reverse; gap: 6px; align-items: flex-start; text-align: left; }
.vp-portfolio__item-wrap .vp-portfolio__item-meta-title { margin: 0 !important; font: 600 18px/1.3 var(--bpx-head) !important; color: var(--bpx-text) !important; }
.vp-portfolio__item-wrap .vp-portfolio__item-meta-title a { color: inherit !important; }
.vp-portfolio__item-wrap .vp-portfolio__item-meta-category, .vp-portfolio__item-wrap .vp-portfolio__item-meta-category a { font: 600 12px/1.3 var(--bpx-head) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--bpx-accent) !important; }
.vp-filter__item a { display: inline-flex; align-items: center; min-height: 40px; }
.vp-filter__item-active a, .vp-filter__item-active > a, .vp-filter__item a:hover { color: var(--bpx-accent) !important; }
.vp-filter__item-active a::after, .vp-filter__item-active::after { background-color: var(--bpx-brand) !important; }
.vp-pagination__item-active, .vp-pagination__item-active a, .vp-pagination .vp-pagination__item-active > * { background-color: var(--bpx-brand) !important; border-color: var(--bpx-brand) !important; color: var(--bpx-ink) !important; }

/* ---------- 6b. Enquiry form section (Contact page, #quote) ---------- */
.bpx-quote { scroll-margin-top: 110px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; width: min(1200px, 100% - 48px); margin: 72px auto; padding: 48px; border-radius: 20px; background: radial-gradient(120% 120% at 0% 0%, rgba(225, 115, 53, .18), transparent 55%), var(--bpx-surface); border: 1px solid var(--bpx-line); }
.bpx-quote__title { margin: 0 0 14px; font: 600 clamp(28px, 3.4vw, 40px)/1.12 var(--bpx-head); color: var(--bpx-text); }
.bpx-quote__text { margin: 0 0 24px; color: var(--bpx-muted); line-height: 1.65; }
.bpx-quote__alt { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.bpx-quote__alt li { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--bpx-muted); }
.bpx-quote__alt .bpx-ic { color: var(--bpx-brand); width: 20px; height: 20px; }
.bpx-quote__alt a { color: var(--bpx-text) !important; text-decoration: underline; text-decoration-color: var(--bpx-brand); text-underline-offset: 3px; }
.bpx-quote .ff-el-input--label label, .bpx-quote .ff-el-input--label { color: var(--bpx-text) !important; font: 500 15px/1.4 'Onest', sans-serif; }
.bpx-quote .ff-el-form-control {
	min-height: 50px; padding: 12px 14px !important; border-radius: 10px !important; border: 1px solid var(--bpx-field-line) !important;
	background: var(--bpx-field) !important; color: var(--bpx-text) !important; font-size: 16px !important; transition: border-color .15s ease, box-shadow .15s ease;
}
.bpx-quote textarea.ff-el-form-control { min-height: 120px; }
.bpx-quote .ff-el-form-control::placeholder { color: var(--bpx-placeholder); }
.bpx-quote .ff-el-form-control:focus { border-color: var(--bpx-brand) !important; box-shadow: 0 0 0 3px rgba(225, 115, 53, .25) !important; outline: none; }
.bpx-quote select.ff-el-form-control option { background: var(--bpx-surface); color: var(--bpx-text); }
.bpx-quote .ff-el-help-message { color: var(--bpx-muted) !important; font-size: 13px; }
.bpx-quote .ff-el-is-error .ff-el-form-control { border-color: #ff8a65 !important; }
.bpx-quote .error, .bpx-quote .text-danger { color: #ffab91 !important; }
.bpx-quote .ff-btn-submit { min-height: 52px; padding: 0 28px !important; font: 600 16px/1 var(--bpx-head) !important; border-radius: 10px !important; background: var(--bpx-brand) !important; border-color: var(--bpx-brand) !important; color: var(--bpx-ink) !important; }
.bpx-quote .ff-btn-submit:hover { background: var(--bpx-brand-2) !important; }
.bpx-quote .ff-message-success { border: 1px solid rgba(225, 115, 53, .5) !important; border-radius: 12px; background: var(--bpx-field) !important; color: var(--bpx-text) !important; padding: 20px !important; }
.bpx-quote .ff-message-success a { color: var(--bpx-accent) !important; }
@media (max-width: 899.98px) {
	.bpx-quote { grid-template-columns: 1fr; gap: 28px; width: calc(100% - 32px); margin: 40px auto; padding: 28px 20px; }
	.bpx-quote .ff-t-container { display: block; }
	.bpx-quote .ff-t-cell { width: 100% !important; padding: 0 !important; }
	.bpx-quote .ff-btn-submit { width: 100%; }
}

/* Lead-in lines that introduce a list: retagged from H2 to <p> (15 Oct 2026); styled as a strong label, not a section heading. */
p#gspb_heading-id-gsbp-1fe4204, p#gspb_heading-id-gsbp-95b9411, p#gspb_heading-id-gsbp-b804a0e,
p#gspb_heading-id-gsbp-80f80d1, p#gspb_heading-id-gsbp-51d3dd6, p#gspb_heading-id-gsbp-353aebc {
	margin-top: 0; font-family: var(--bpx-head); font-weight: 600; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; color: var(--bpx-text);
}

/* Copy blocks added on 16 Oct 2026 (ids gsbp-bpx-*): readable measure under centred section headings. */
[id^="gspb_text-id-gsbp-bpx-"] { margin: 0 0 24px; font-size: 17px; line-height: 1.7; color: var(--bpx-muted); }
#gspb_text-id-gsbp-bpx-1258-gw, #gspb_text-id-gsbp-bpx-1220-gaps, #gspb_text-id-gsbp-bpx-1220-areas,
[id^="gspb_text-id-gsbp-bpx-"][id$="-c"] { max-width: 820px; margin: 0 auto 32px; padding: 0 24px; text-align: center; }

/* ---------- 7. Text on brand orange: near-black ink (2.7:1 -> 6.3:1) ---------- */
.gs-accordion-item__title, .gs-accordion-item__title * { color: var(--bpx-ink) !important; }
.gs-accordion-item__title svg { fill: var(--bpx-ink) !important; }
#gspb_row-id-gsbp-d5d0fb04-fb68 .gspb_heading, #gspb_row-id-gsbp-d5d0fb04-fb68 .gspb_text,
#gspb_row-id-gsbp-78c66b5 .gspb_text, #gspb_row-id-gsbp-c602890 .gspb_text, #gspb_row-id-gsbp-9c2d1a6 .gspb_text { color: var(--bpx-ink) !important; }
#gspb_row-id-gsbp-78c66b5 .gspb_text a, #gspb_row-id-gsbp-c602890 .gspb_text a, #gspb_row-id-gsbp-9c2d1a6 .gspb_text a { color: var(--bpx-ink) !important; text-decoration: underline; }
/* The guard measures the real background, so it must beat the fixed row-ID rules above
   (GreenShift reuses row IDs across pages, and a row that is orange on one page can be black on another).
   :is(#id, *) adds ID weight without narrowing the match. */
.bpx-ink:is(#bpx-w1, *):is(#bpx-w2, *) { color: var(--bpx-ink) !important; }
.bpx-paper:is(#bpx-w1, *):is(#bpx-w2, *) { color: var(--bpx-paper) !important; }

/* ---------- 8. Interactive 3D demo: collapsed behind a button on phones ---------- */
.bpx-3d-toggle { display: none; }
@media (max-width: 768px) {
	.bp3d.bpx-3d-collapsed { display: none !important; }
	.bpx-3d-toggle {
		display: flex; align-items: center; gap: 14px; width: calc(100% - 48px); margin: 24px auto; padding: 18px 20px; border-radius: 14px;
		background: radial-gradient(120% 140% at 100% 0%, rgba(225, 115, 53, .3), transparent 60%), var(--bpx-surface);
		border: 1px solid rgba(225, 115, 53, .4); color: var(--bpx-text); font: 600 16px/1.3 var(--bpx-head); text-align: left; cursor: pointer;
	}
	.bpx-3d-toggle small { display: block; margin-top: 3px; font: 400 13px/1.4 'Onest', sans-serif; color: var(--bpx-muted); }
	.bpx-3d-toggle .bpx-3d-badge { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bpx-brand); color: var(--bpx-ink); font: 700 14px/1 var(--bpx-head); }
}

/* Team page: the theme's page title is off (it duplicated the H1 and overlapped the logo), so the hero starts below the transparent header. */
body.page-id-3296 #main { padding-top: 120px; }
@media (max-width: 999.98px) { body.page-id-3296 #main { padding-top: 100px; } }

/* ---------- 9. Touch targets ---------- */
@media (pointer: coarse) {
	footer li a, .ct-footer li a, .entry-meta a, .post-navigation a { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ---------- 10. Footer (content block 155): dark in both colour modes, four groups ----------
   Structure lives in the block editor (Blocksy content block "Footer"); this only styles it.
   The footer keeps the dark palette in light mode too, so the page is framed by the dark header and footer. */
#footer {
	--theme-palette-color-3: #aaa5a1; --theme-palette-color-4: #F0EEE9; --theme-palette-color-5: #232121;
	--theme-palette-color-6: #131212; --theme-palette-color-7: #000000; --theme-palette-color-8: #000000; --theme-palette-color-10: #252525;
	--bpx-foot-bg: #131212; --bpx-foot-text: #F0EEE9; --bpx-foot-muted: #aaa5a1; --bpx-foot-line: #2a2624;
	background: var(--bpx-foot-bg); color: var(--bpx-foot-text);
}
#footer #gspb_row-id-gsbp-c29ea812-5e65 { background-color: var(--bpx-foot-bg) !important; }
.bpx-foot { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; margin: 72px 0 56px; text-align: left; }
.bpx-foot > .wp-block-group { margin: 0; min-width: 0; }
.bpx-foot .bpx-foot__h, .bpx-foot__col--contact h3.wp-block-heading { font-size: 13px !important; line-height: 1.3; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bpx-foot-muted) !important; margin: 0 0 16px !important; }
.bpx-foot__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bpx-foot__links li { margin: 0; padding: 0; }
.bpx-foot__links a, .bpx-foot__legal a { color: var(--bpx-foot-text); text-decoration: none; font-size: 15px; line-height: 1.4; opacity: .88; transition: color .15s ease, opacity .15s ease; }
.bpx-foot__links a:hover, .bpx-foot__links a:focus-visible, .bpx-foot__legal a:hover, .bpx-foot__legal a:focus-visible { color: var(--theme-palette-color-1, #ec8e58); opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.bpx-foot__links li:last-child a { font-weight: 600; opacity: 1; }
/* Brand */
.bpx-foot__brand .gspb_container { justify-content: flex-start !important; margin: 0 0 14px !important; }
.bpx-foot__brand .gspb_container h3 { font-size: 18px; color: var(--bpx-foot-text); }
.bpx-foot__brand .gspb_text { text-align: left !important; color: var(--bpx-foot-muted); font-size: 15px; line-height: 1.6; margin: 0 0 10px !important; max-width: 34ch; }
.bpx-foot__uen { font-size: 13px; color: var(--bpx-foot-muted); margin: 0 0 18px; letter-spacing: .02em; }
.bpx-foot__brand .ct-social-box { justify-content: flex-start; gap: 12px; }
.bpx-foot__brand .ct-social-box a { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bpx-foot-line); --theme-icon-color: var(--bpx-foot-text); }
.bpx-foot__brand .ct-social-box a:hover { border-color: var(--theme-palette-color-2, #E17335); --theme-icon-color: var(--theme-palette-color-2, #E17335); }
/* Social icons with no account URL saved (link is "#") are hidden site-wide (menu and footer); they appear once a URL is added in the theme settings. */
.ct-social-box a[href="#"] { display: none !important; }
/* Contact */
.bpx-foot__col--contact p:empty { display: none; }
.bpx-foot__col--contact .ct-contact-info-block { --theme-icon-color: var(--theme-palette-color-2, #E17335) !important; }
.bpx-foot__col--contact .ct-contact-info-block ul { flex-direction: column; align-items: flex-start; gap: 14px; }
.bpx-foot__col--contact .contact-info { font-size: 15px; line-height: 1.5; color: var(--bpx-foot-text); }
.bpx-foot__col--contact .contact-info a { color: var(--bpx-foot-text); text-decoration: none; }
.bpx-foot__col--contact .contact-info a:hover { color: var(--theme-palette-color-1, #ec8e58); text-decoration: underline; }
/* Bottom row */
/* The CTA button is black: keep its label white (the sitewide on-orange ink rule made it dark). */
#footer #gspb_button-id-gsbp-4e32ca8b-19ea .gspb-buttonbox, #footer #gspb_button-id-gsbp-4e32ca8b-19ea .gspb-buttonbox * { color: #fff !important; }
#footer #gspb_row-id-gsbp-803d91de-2617 { border-top: 1px solid var(--bpx-foot-line); }
.bpx-foot__legal { margin: 0 0 8px; font-size: 14px; color: var(--bpx-foot-muted); text-align: left; }
.bpx-foot__legal a { font-size: 14px; }
#footer #gspb_text-id-gsbp-2945b17d-284e { color: var(--bpx-foot-muted); font-size: 13px; text-align: left !important; }
@media (max-width: 999.98px) {
	.bpx-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; margin: 56px 0 40px; }
}
@media (max-width: 689.98px) {
	/* Phones: brand, then services and guides side by side, then contact. One alignment (left) throughout. */
	.bpx-foot { gap: 32px 20px; margin: 44px 0 32px; }
	.bpx-foot__brand, .bpx-foot__col--contact { grid-column: 1 / -1; }
	.bpx-foot__col--contact { padding-top: 28px; border-top: 1px solid var(--bpx-foot-line); }
	.bpx-foot__links { gap: 12px; }
	.bpx-foot__links a { font-size: 14px; }
	#footer #gspb_row-id-gsbp-c29ea812-5e65 { padding-top: 28px !important; }
	/* Call-to-action card: left aligned and tighter on phones */
	#footer #gspb_row-id-gsbp-d5d0fb04-fb68 { padding: 28px 22px !important; margin-bottom: 0 !important; }
	#footer #gspb_row-id-gsbp-d5d0fb04-fb68 h2, #footer #gspb_row-id-gsbp-d5d0fb04-fb68 h3, #footer #gspb_row-id-gsbp-d5d0fb04-fb68 .gspb_heading { text-align: left !important; font-size: 24px !important; line-height: 1.25 !important; }
	#footer #gspb_text-id-gsbp-d7cf53fa-8ace { text-align: left !important; font-size: 16px !important; line-height: 1.55 !important; }
	#footer #gspb_row-id-gsbp-803d91de-2617 .gspb_row__content { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.bpx-btn, .bpx-card, .bpx-card__img, .bpx-bar, .bpx-link .bpx-ic, .bpx-toc summary::after { transition: none !important; }
	.bpx-card:hover, .bpx-card:hover .bpx-card__img, .bpx-btn--primary:hover { transform: none; }
}

/* ---------- 11. Team page: centre an incomplete last row in the delivery team grid ----------
   The grid is 3 columns (block setting). With 5 or 4 cards the last row sat left with empty slots,
   so the grid runs on 6 tracks and the trailing cards are offset to centre. Works for any card count. */
@media (min-width: 576px) {
	.gsbp-091019774e3328 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
	.gsbp-091019774e3328 > * { grid-column: span 2; }
	.gsbp-091019774e3328 > :nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
	.gsbp-091019774e3328 > :last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
}

/* Leadership grid (3 cards since 16 Oct 2026): on tablets, two per row with the third card centred below. */
@media (min-width: 576px) and (max-width: 991.98px) {
	.gsbp-e51c719bf8c62 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	.gsbp-e51c719bf8c62 > * { grid-column: span 2; }
	.gsbp-e51c719bf8c62 > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
}

/* ---------- 12. Menus (16 Oct 2026) ----------
   Services mega menu (content block 684): four groups built from core blocks, editable in the block editor.
   The dropdown panel is white in both modes, so text uses the dark ink and the deep accent (5.2:1). */
.bpx-mega-group { margin: 0 0 16px; }
.bpx-mega-h { font-size: 11px !important; line-height: 1.3; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #A64A15 !important; margin: 0 0 6px !important; padding: 0 12px; }
.bpx-mega-list { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 2px; }
.bpx-mega-list li { margin: 0; padding: 0; list-style: none; }
.bpx-mega-list a { display: block; padding: 7px 12px; border-radius: 10px; text-decoration: none; transition: background-color .15s ease; }
.bpx-mega-list a strong { display: block; font-size: 15px; line-height: 1.3; font-weight: 600; color: #171010; }
.bpx-mega-list a span { display: block; font-size: 13px; line-height: 1.4; color: #5E5651; }
.bpx-mega-list a:hover, .bpx-mega-list a:focus-visible { background: #F7F2EB; }
.bpx-mega-list a:hover strong, .bpx-mega-list a:focus-visible strong { color: #A64A15; }
.bpx-mega-all { margin: 4px 0 0 !important; padding: 0 12px; }
.bpx-mega-all a { font-size: 14px; font-weight: 600; color: #A64A15; text-decoration: none; }
.bpx-mega-all a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Phone menu (own menu "Mobile Menu" in the menu_mobile location): left aligned, smaller type, quick actions at the bottom. */
@media (max-width: 999.98px) {
	#offcanvas [data-id="mobile-menu"] > ul > li > a, #offcanvas [data-id="mobile-menu"] > ul > li > .ct-sub-menu-parent > a { font-size: 20px !important; }
	#offcanvas [data-id="mobile-menu"] .sub-menu a { font-size: 15px !important; font-weight: 500; opacity: .9; }
	#offcanvas [data-id="mobile-menu"] .sub-menu { padding-left: 2px; }
	#offcanvas .ct-header-text[data-id="text"] { width: 100%; }
	.bpx-oc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin: 8px 0 4px; }
	.bpx-oc-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px; border: 1px solid #2a2624; color: #F0EEE9 !important; font-weight: 600; font-size: 15px; text-decoration: none !important; }
	.bpx-oc-btn--primary { grid-column: 1 / -1; background: #E17335; border-color: #E17335; color: #171010 !important; }
}


/* ---------- 13. Phone menu styling (16 Oct 2026): "blueprint" panel ---------- */
@media (max-width: 999.98px) {
	#offcanvas[data-behaviour="modal"] {
		background-color: #0b0a09 !important;
		background-image:
			radial-gradient(120% 60% at 100% 0%, rgba(225, 115, 53, .16) 0%, rgba(225, 115, 53, 0) 60%),
			linear-gradient(rgba(225, 115, 53, .045) 1px, transparent 1px),
			linear-gradient(90deg, rgba(225, 115, 53, .045) 1px, transparent 1px) !important;
		background-size: 100% 100%, 32px 32px, 32px 32px !important;
	}
	#offcanvas .ct-panel-content[data-device="mobile"] .ct-panel-content-inner { padding: 0 24px 32px !important; gap: 0; }
	/* Logo on the same row as the close button */
	#offcanvas .ct-panel-inner { position: relative; }
	/* The close row floats over the list; rows scroll under its fade, the logo stays above it */
	#offcanvas .ct-panel-actions { position: absolute !important; top: 0; left: 0; right: 0; z-index: 4; pointer-events: none; display: flex; justify-content: flex-end; background: linear-gradient(180deg, rgba(11, 10, 9, .92) 0%, rgba(11, 10, 9, .8) 45%, rgba(11, 10, 9, 0) 100%) !important; }
	#offcanvas .ct-panel-actions .ct-toggle-close { pointer-events: auto; background: #0b0a09 !important; }
	#offcanvas [data-id="offcanvas-logo"] { margin: 6px 0 18px !important; align-self: flex-start; position: relative; z-index: 5; }
	#offcanvas .ct-toggle-close { border-radius: 50% !important; width: 40px; height: 40px; border: 1px solid rgba(240, 238, 233, .16) !important; display: inline-flex; align-items: center; justify-content: center; }
	/* Menu label */
	#offcanvas [data-id="mobile-menu"] { width: 100%; counter-reset: bpxm; }
	#offcanvas [data-id="mobile-menu"]::before { content: "Menu"; display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(240, 238, 233, .5); margin: 0 0 6px; }
	#offcanvas [data-id="mobile-menu"] > ul { width: 100%; }
	#offcanvas [data-id="mobile-menu"] > ul > li { counter-increment: bpxm; border-bottom: 1px solid rgba(240, 238, 233, .08); position: relative; }
	#offcanvas [data-id="mobile-menu"] > ul > li > a,
	#offcanvas [data-id="mobile-menu"] > ul > li > .ct-sub-menu-parent { min-height: 56px; display: flex; align-items: center; }
	#offcanvas [data-id="mobile-menu"] > ul > li > a::before,
	#offcanvas [data-id="mobile-menu"] > ul > li > .ct-sub-menu-parent > a::before {
		content: counter(bpxm, decimal-leading-zero); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: #E17335; width: 30px; flex: 0 0 30px; font-variant-numeric: tabular-nums;
	}
	#offcanvas [data-id="mobile-menu"] > ul > li > a, #offcanvas [data-id="mobile-menu"] > ul > li > .ct-sub-menu-parent > a { font-size: 19px !important; font-weight: 600; letter-spacing: -.005em; color: #F5F2EE !important; display: flex; align-items: center; flex: 1; padding: 0 !important; }
	#offcanvas [data-id="mobile-menu"] > ul > li > .ct-sub-menu-parent { justify-content: space-between; }
	/* Full-width rows so the toggle sits at the right edge */
	#offcanvas [data-id="mobile-menu"] > ul, #offcanvas [data-id="mobile-menu"] > ul > li, #offcanvas [data-id="mobile-menu"] > ul > li > .ct-sub-menu-parent { width: 100% !important; }
	#offcanvas [data-id="mobile-menu"] > ul > li > .ct-sub-menu-parent > a { flex: 1 1 auto !important; }
	/* Round toggle */
	#offcanvas [data-id="mobile-menu"] .ct-sub-menu-parent > button.ct-toggle-dropdown-mobile {
		width: 36px !important; height: 36px !important; min-width: 36px !important; flex: 0 0 36px !important; border-radius: 50% !important;
		border: 1px solid rgba(240, 238, 233, .18) !important; background: transparent !important; margin: 0 !important; padding: 0 !important;
		transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
	}
	#offcanvas [data-id="mobile-menu"] .ct-sub-menu-parent > button.ct-toggle-dropdown-mobile svg { fill: #F5F2EE !important; width: 10px !important; height: 10px !important; }
	#offcanvas [data-id="mobile-menu"] li.dropdown-active > .ct-sub-menu-parent > button.ct-toggle-dropdown-mobile { background: #E17335 !important; border-color: #E17335 !important; }
	#offcanvas [data-id="mobile-menu"] li.dropdown-active > .ct-sub-menu-parent > button.ct-toggle-dropdown-mobile svg { fill: #171010 !important; }
	#offcanvas [data-id="mobile-menu"] > ul > li.dropdown-active > .ct-sub-menu-parent > a { color: #E17335 !important; }
	/* Sub-lists */
	#offcanvas [data-id="mobile-menu"] .sub-menu { margin: 0 0 14px 30px !important; padding: 2px 0 2px 14px !important; border-left: 1px solid rgba(225, 115, 53, .45); }
	#offcanvas [data-id="mobile-menu"] .sub-menu li a { font-size: 15px !important; font-weight: 500; color: rgba(240, 238, 233, .72) !important; padding: 7px 0 !important; min-height: 0; opacity: 1; }
	#offcanvas [data-id="mobile-menu"] .sub-menu li a:hover, #offcanvas [data-id="mobile-menu"] .sub-menu li a:focus-visible { color: #F5F2EE !important; }
	#offcanvas [data-id="mobile-menu"] .sub-menu .current-menu-item > a { color: #E17335 !important; }
	#offcanvas [data-id="mobile-menu"] .sub-menu .current-menu-item > a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #E17335; display: inline-block; margin: 0 8px 2px -4px; }
	#offcanvas [data-id="mobile-menu"] > ul > li.current-menu-item > a { color: #E17335 !important; }
	/* Quick actions */
	#offcanvas .ct-header-text[data-id="text"] { margin-top: 26px; }
	.bpx-oc-label { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(240, 238, 233, .5); margin: 0 0 2px; }
	.bpx-oc-btn { gap: 8px; background: rgba(240, 238, 233, .04); border-color: rgba(240, 238, 233, .14) !important; min-height: 52px !important; }
	.bpx-oc-btn svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: #E17335; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
	.bpx-oc-btn--primary { background: #E17335 !important; border-color: #E17335 !important; color: #171010 !important; box-shadow: 0 10px 30px -12px rgba(225, 115, 53, .7); }
	.bpx-oc-btn--primary svg { stroke: #171010; }
	.bpx-oc-info { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.55; color: rgba(240, 238, 233, .55); margin: 6px 0 0; }
	#offcanvas [data-id="socials"] { margin-top: 18px; }
	/* Entrance: items rise in one after another when the panel opens */
	#offcanvas.active [data-id="mobile-menu"] > ul > li, #offcanvas.active .ct-header-text[data-id="text"] { animation: bpxRise .42s cubic-bezier(.2, .7, .2, 1) both; }
	#offcanvas.active [data-id="mobile-menu"] > ul > li:nth-child(2) { animation-delay: .04s; }
	#offcanvas.active [data-id="mobile-menu"] > ul > li:nth-child(3) { animation-delay: .08s; }
	#offcanvas.active [data-id="mobile-menu"] > ul > li:nth-child(4) { animation-delay: .12s; }
	#offcanvas.active [data-id="mobile-menu"] > ul > li:nth-child(5) { animation-delay: .16s; }
	#offcanvas.active [data-id="mobile-menu"] > ul > li:nth-child(6) { animation-delay: .2s; }
	#offcanvas.active [data-id="mobile-menu"] > ul > li:nth-child(7) { animation-delay: .24s; }
	#offcanvas.active .ct-header-text[data-id="text"] { animation-delay: .3s; }
}
@keyframes bpxRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #offcanvas.active [data-id="mobile-menu"] > ul > li, #offcanvas.active .ct-header-text[data-id="text"] { animation: none !important; } }

/* ---------- 14. Motion (16 Oct 2026): scroll reveal + lazy embeds ---------- */
/* ux.js adds .bpx-rv only to blocks below the first screen, and never for "reduce motion". */
.bpx-rv { opacity: 0; transform: translate3d(0, 22px, 0); }
.bpx-rv.bpx-in {
	opacity: 1; transform: none;
	transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
	transition-delay: var(--bpx-d, 0ms);
}
@media (prefers-reduced-motion: reduce) { .bpx-rv { opacity: 1 !important; transform: none !important; } }
@media print { .bpx-rv { opacity: 1 !important; transform: none !important; } }
/* Reviews carousel: its height (358 px at every width) is held so nothing below jumps when it draws */
.bpx-lazy-embed { height: 358px; overflow: hidden; }
.bpx-lazy-embed.is-failed { height: 0; }