/* ==========================================================================
   Presto - "Townhouse" theme layer for the Antra template pack
   Loaded after bootstrap.min.css and main.css.
   Style guide v1, September 2026.

   Contents
   01. Tokens & Antra / Bootstrap mapping
   02. Base & typography
   03. Buttons & links
   04. Sections & section headings
   05. Header, navigation, mobile menu & search
   06. Page headers (simple, image, hero, slider)
   07. Home: services, stats, process, work, testimonials, CTA, articles
   08. Page blocks
   09. Rich text (CKEditor content)
   10. Blog: listing, sidebar, post, pagination
   11. Portfolio: filters & project detail
   12. Contact, forms & popups
   13. Footer
   14. Misc pages (sitemap, search, 404)
   15. Motion & utilities
   16. Third-party modules (PrivacyWire, reCAPTCHA, FormBuilder lists, Brevo)
   ========================================================================== */


/* 01. Tokens & Antra / Bootstrap mapping
   ========================================================================== */
:root {
	/* Core colours */
	--presto-ink: #1C2230;
	--presto-oyster: #E9E4DA;
	--presto-oxblood: #7A2E2E;
	--presto-rose-clay: #C98178;
	--presto-paper: #F6F3EE;
	--presto-ivory: #FBF9F5;     /* warm near-white: page titles on dark headers */

	/* Supporting neutrals */
	--presto-slate: #4A4F5C;      /* secondary text on light */
	--presto-mist: #B9B4AA;       /* secondary text on dark */
	--presto-stone: #D8D1C3;      /* placeholders, hairlines */
	--presto-ink-light: #2A3244;  /* panels on ink */
	--presto-taupe: #8A8577;      /* form borders */
	--presto-oxblood-dk: #5C2121; /* link hover */

	/* Fonts */
	--presto-font-display: "Cormorant Garamond", Georgia, serif;
	--presto-font-body: "Manrope", system-ui, sans-serif;

	/* Layout */
	--presto-radius: 2px;
	--presto-radius-soft: 6px;

	/* Brush-stroke swash (block heading underline, portfolio filter) - used as a CSS mask */
	--presto-swash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 15.5C38 8.5 92 3.5 150 4.2c18 .2 33 1.3 46 3.3-2 .9-4.5 1.3-7 1.2C150 7 96 8.6 52 13.1 33 15 17 17 6 18.6 3.6 19 2 17.4 3 15.5Z'/%3E%3C/svg%3E");   /* buttons, outlined form fields, page block media */
	--presto-section-y: 110px;
	--presto-header-h: 88px;

	/* Antra variables */
	--tl-ff-body: var(--presto-font-body);
	--tl-ff-p: var(--presto-font-body);
	--tl-ff-heading: var(--presto-font-display);
	--tl-color-heading-primary: var(--presto-ink);
	--tl-color-text-body: var(--presto-slate);
	--tl-color-theme-primary: var(--presto-oxblood);
	--tl-color-bg-1: var(--presto-ink);
	--tl-color-bg-2: var(--presto-paper);
	--tl-color-border-1: var(--presto-stone);
	--tl-color-grey-1: var(--presto-slate);
	--tl-color-grey-2: var(--presto-mist);

	/* Bootstrap 5.3 mapping */
	--bs-body-bg: var(--presto-oyster);
	--bs-body-color: var(--presto-ink);
	--bs-body-font-family: var(--presto-font-body);
	--bs-primary: var(--presto-oxblood);
	--bs-primary-rgb: 122, 46, 46;
	--bs-link-color: var(--presto-oxblood);
	--bs-link-color-rgb: 122, 46, 46;
	--bs-link-hover-color: var(--presto-oxblood-dk);
	--bs-link-hover-color-rgb: 92, 33, 33;
	--bs-border-color: var(--presto-stone);
	--bs-border-radius: var(--presto-radius);
}

@media (max-width: 991px) {
	:root { --presto-section-y: 80px; --presto-header-h: 76px; }
}
@media (max-width: 575px) {
	:root { --presto-section-y: 64px; }
}


/* 02. Base & typography
   ========================================================================== */
html,
body {
	overflow-x: clip; /* Antra uses hidden, which breaks position: sticky */
}

body {
	background-color: var(--presto-oyster);
	color: var(--presto-ink);
	font-family: var(--presto-font-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

p {
	font-family: var(--presto-font-body);
	color: var(--presto-slate);
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 1.1em;
}

h1, h2, h3, h4, .display {
	font-family: var(--presto-font-display);
	font-weight: 600;
	color: var(--presto-ink);
	letter-spacing: -0.005em;
}
h1 { font-size: clamp(46px, 6.2vw, 84px); line-height: 1.0; }
h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.05; }
h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; }
h4 { font-size: 24px; line-height: 1.25; }
h5, h6 {
	font-family: var(--presto-font-body);
	font-weight: 700;
	color: var(--presto-ink);
	line-height: 1.4;
}
h5 { font-size: 18px; }
h6 { font-size: 16px; }

/* Antra hides <br> on phones; content here relies on them */
@media (max-width: 767px) {
	br { display: inline; }
}

a { color: var(--presto-oxblood); }
a:hover,
a:focus { color: var(--presto-oxblood-dk); }

img { max-width: 100%; height: auto; }

::selection { background: var(--presto-oxblood); color: var(--presto-oyster); }

/* Antra gives every <blockquote> a light beige box, which hides the light quote
   text on dark sections. Reset it; each context styles its own quotes below. */
blockquote {
	background-color: transparent;
	text-align: inherit;
	padding: 0;
	border-radius: 0;
	margin: 0 0 1.4em;
}

*::placeholder { color: var(--presto-taupe); opacity: 1; }

/* Antra removes focus outlines; restore them for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--presto-rose-clay);
	outline-offset: 3px;
}

.container {
	max-width: 1280px;
	padding-left: 24px;
	padding-right: 24px;
}
.container-fluid {
	padding-left: 24px;
	padding-right: 24px;
}
@media (max-width: 575px) {
	.container, .container-fluid { padding-left: 16px; padding-right: 16px; }
}

.eyebrow {
	display: block;
	font-family: var(--presto-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--presto-oxblood);
	margin-bottom: 18px;
}

.lead {
	font-size: 18px;
	line-height: 1.7;
	font-weight: 400;
	color: var(--presto-slate);
}
@media (min-width: 1200px) {
	.lead { font-size: 19px; }
}

.skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 1100;
	padding: 12px 20px;
	background: var(--presto-oyster);
	color: var(--presto-ink);
	font-weight: 600;
	border-radius: var(--presto-radius);
}
.skip-link:focus { top: 16px; color: var(--presto-ink); }


/* 03. Buttons & links
   ========================================================================== */
.btn-presto,
.btn.btn-primary,
.btn-masco {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 56px;
	padding: 0 32px;
	border: 1px solid var(--presto-oxblood);
	border-radius: var(--presto-radius-soft);
	background: var(--presto-oxblood);
	color: var(--presto-oyster);
	font-family: var(--presto-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .2px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* Visited and clicked (mouse-focused) buttons keep their normal colours.
   Without this the global a:focus rules (here and in main.css) darken the text.
   Each variant repeats this below; hover and keyboard focus still win as they come later. */
.btn-presto:visited,
.btn-presto:focus { color: var(--presto-oyster); }

/* Hover: the background changes and a 1px border in the text colour remains
   (border-color: currentColor always matches the hover text colour) */
.btn-presto:hover,
.btn-presto:focus-visible,
.btn.btn-primary:hover,
.btn.btn-primary:focus-visible,
.btn-masco:hover {
	background: var(--presto-paper);
	color: var(--presto-oxblood);
	border-color: currentColor;
}

/* Outline on light backgrounds */
.btn-presto--outline {
	background: transparent;
	border-color: var(--presto-ink);
	color: var(--presto-ink);
}
.btn-presto--outline:visited,
.btn-presto--outline:focus { color: var(--presto-ink); }
.btn-presto--outline:hover,
.btn-presto--outline:focus-visible {
	background: var(--presto-stone);
	color: var(--presto-ink);
	border-color: currentColor;
}

/* Outline on dark (Ink) backgrounds */
.btn-presto--light {
	background: transparent;
	border-color: rgba(233, 228, 218, .55);
	color: var(--presto-oyster);
}
.btn-presto--light:visited,
.btn-presto--light:focus { color: var(--presto-oyster); }
.btn-presto--light:hover,
.btn-presto--light:focus-visible {
	background: var(--presto-ink-light);
	color: var(--presto-oyster);
	border-color: currentColor;
}

/* Solid Oyster, for the Oxblood CTA band */
.btn-presto--oyster {
	background: var(--presto-oyster);
	border-color: var(--presto-oyster);
	color: var(--presto-ink);
}
.btn-presto--oyster:visited,
.btn-presto--oyster:focus { color: var(--presto-ink); }
.btn-presto--oyster:hover,
.btn-presto--oyster:focus-visible {
	background: var(--presto-oxblood-dk);
	color: var(--presto-oyster);
	border-color: currentColor;
}

.btn-presto--sm {
	height: 44px;
	padding: 0 22px;
	font-size: 14px;
}

.btn-group-presto {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* "Learn more" style link */
.text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--presto-oxblood);
	text-decoration: none;
}
.text-link i { font-size: 12px; transition: transform .25s ease; }
.text-link:hover { color: var(--presto-oxblood-dk); }
.text-link:hover i { transform: translateX(4px); }


/* 04. Sections & section headings
   ========================================================================== */
.section {
	position: relative;
	padding-top: var(--presto-section-y);
	padding-bottom: var(--presto-section-y);
}
.section--tight {
	padding-top: calc(var(--presto-section-y) * .6);
	padding-bottom: calc(var(--presto-section-y) * .6);
}

/* Light sections alternate Oyster / Paper as the page builds up */
.odd,
.section-oyster { background-color: var(--presto-oyster); }
.even,
.section-paper { background-color: var(--presto-paper); }

.section-dark {
	background-color: var(--presto-ink);
	color: var(--presto-oyster);
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 { color: var(--presto-oyster); }
.section-dark p,
.section-dark .lead,
.section-dark li { color: var(--presto-mist); }
.section-dark .eyebrow,
.section-dark a:not(.btn-presto) { color: var(--presto-rose-clay); }
.section-dark a:not(.btn-presto):hover { color: var(--presto-oyster); }

.section-oxblood {
	background-color: var(--presto-oxblood);
	color: var(--presto-oyster);
}
.section-oxblood h2,
.section-oxblood h3,
.section-oxblood p { color: var(--presto-oyster); }

.section-head {
	margin-bottom: 56px;
}
.section-head h2 { margin-bottom: 0; }
.section-head .lead { margin: 22px 0 0; }
.section-head--center {
	text-align: center;
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}
.section-head--split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: end;
	gap: 24px 64px;
}
.section-head--split .lead,
.section-head--split p { margin: 0; }
.section-head--action {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
}
@media (max-width: 991px) {
	.section-head { margin-bottom: 40px; }
	.section-head--split { grid-template-columns: 1fr; }
}


/* 05. Header, navigation, mobile menu & search
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background-color: var(--presto-ink);
	border-bottom: 1px solid rgba(233, 228, 218, .08);
	transition: box-shadow .3s ease;
}
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(12, 15, 22, .35); }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--presto-header-h);
}

.site-brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.site-brand img {
	display: block;
	width: auto;
	height: 32px; /* header: 270 x 75 SVG shown at ~115 x 32 (footer has its own size) */
	max-width: 162px;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.header-call {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	text-decoration: none;
	padding-right: 18px;
	border-right: 1px solid rgba(233, 228, 218, .14);
}
.header-call__label {
	font-size: 12px;
	color: var(--presto-mist);
}
.header-call__num {
	font-size: 14px;
	font-weight: 600;
	color: var(--presto-oyster);
	letter-spacing: .5px;
}
.header-call:hover .header-call__num { color: var(--presto-rose-clay); }

.header-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(233, 228, 218, .2) !important;
	border-radius: var(--presto-radius-soft);
	background: transparent;
	color: var(--presto-oyster);
	font-size: 16px;
	transition: border-color .25s ease, color .25s ease;
}
.header-icon:hover,
.header-icon:focus { border-color: var(--presto-rose-clay) !important; color: var(--presto-rose-clay); }

.nav-toggle {
	flex-direction: column;
	gap: 5px;
}
.nav-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
}

/* Desktop menu */
.site-nav__list {
	display: flex;
	align-items: center;
	gap: 36px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav__item { position: relative; }
.site-nav__link {
	position: relative; /* anchors the active underline (the mega item's li isn't positioned) */
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 32px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--presto-oyster);
	text-decoration: none;
}
.site-nav__link i { font-size: 10px; color: var(--presto-mist); }
.site-nav__link:hover,
.site-nav__link:focus,
.site-nav__item.is-active > .site-nav__link { color: var(--presto-rose-clay); }
.site-nav__item.is-active > .site-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	height: 1px;
	background: var(--presto-rose-clay);
}

.site-nav__sub {
	position: absolute;
	top: 100%;
	left: -24px;
	min-width: 250px;
	list-style: none;
	margin: 0;
	padding: 6px 24px;
	background: var(--presto-ink);
	border: 1px solid rgba(233, 228, 218, .1);
	border-radius: 0 0 var(--presto-radius) var(--presto-radius);
	box-shadow: 0 24px 48px rgba(12, 15, 22, .45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.site-nav__item:hover > .site-nav__sub,
.site-nav__item:focus-within > .site-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
}
/* Dropdown items styled like the mobile menu: Ink panel, light text, fine dividers */
.site-nav__sub li + li { border-top: 1px solid rgba(233, 228, 218, .1); }
.site-nav__sub a {
	display: block;
	padding: 12px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--presto-oyster);
	text-decoration: none;
	transition: color .2s ease;
}
.site-nav__sub a:hover,
.site-nav__sub a:focus,
.site-nav__sub .is-active a {
	color: var(--presto-rose-clay);
}

/* Mega menu (Portfolio, desktop): full-width Ink panel below the header, the list in a
   .container so it lines up with the header, flowing down four columns in menu order */
.site-nav__item.has-mega { position: static; } /* panel positions against the sticky header */
.site-nav__mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 28px 0 32px;
	background: var(--presto-ink);
	border-top: 1px solid rgba(233, 228, 218, .1);
	border-bottom: 1px solid rgba(233, 228, 218, .1);
	box-shadow: 0 24px 48px rgba(12, 15, 22, .45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
/* invisible bridge so the panel stays open while moving down from the link */
.site-nav__mega::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 12px;
}
.site-nav__item.has-mega:hover > .site-nav__mega,
.site-nav__item.has-mega:focus-within > .site-nav__mega {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.site-nav__mega-list {
	columns: 4;
	column-gap: 48px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav__mega-list li {
	break-inside: avoid;
	border-bottom: 1px solid rgba(233, 228, 218, .1);
}
.site-nav__mega-list a {
	display: block;
	padding: 12px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--presto-oyster);
	text-decoration: none;
	transition: color .2s ease;
}
.site-nav__mega-list a:hover,
.site-nav__mega-list a:focus,
.site-nav__mega-list .is-active a {
	color: var(--presto-rose-clay);
}

@media (max-width: 1399px) {
	.site-nav__list { gap: 26px; }
}

/* Mobile menu (Bootstrap offcanvas) */
.mobile-nav.offcanvas {
	--bs-offcanvas-width: 360px;
	--bs-offcanvas-bg: var(--presto-ink);
	--bs-offcanvas-color: var(--presto-oyster);
	--bs-offcanvas-padding-x: 28px;
	--bs-offcanvas-padding-y: 24px;
}
.mobile-nav .offcanvas-header {
	border-bottom: 1px solid rgba(233, 228, 218, .1);
}
.mobile-nav .site-brand img { max-height: 38px; }
.mobile-nav .btn-close {
	filter: invert(1) grayscale(1) brightness(1.4);
	opacity: .8;
}
.mobile-nav__list,
.mobile-nav__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mobile-nav__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(233, 228, 218, .1);
}
.mobile-nav__link {
	flex: 1;
	padding: 16px 0;
	font-family: var(--presto-font-body);
	font-size: 18px;
	font-weight: 600;
	color: var(--presto-oyster);
	text-decoration: none;
}
.mobile-nav__link:hover,
.mobile-nav__item.is-active > .mobile-nav__link { color: var(--presto-rose-clay); }
.mobile-nav__toggle {
	width: 40px;
	height: 40px;
	color: var(--presto-mist);
	border: 1px solid rgba(233, 228, 218, .2) !important;
	border-radius: var(--presto-radius-soft);
	transition: transform .25s ease;
}
.mobile-nav__toggle[aria-expanded="true"] { transform: rotate(180deg); }
.mobile-nav__subwrap { flex-basis: 100%; }
.mobile-nav__sub { padding: 0 0 14px 2px; }
.mobile-nav__sub a {
	display: block;
	padding: 6px 0;
	font-size: 15px;
	color: var(--presto-mist);
	text-decoration: none;
}
.mobile-nav__sub a:hover { color: var(--presto-rose-clay); }
.mobile-nav__contact {
	margin-top: 32px;
	font-size: 15px;
}
/* Phone & email links only - the button keeps its own flex centring */
.mobile-nav__contact a:not(.btn-presto) {
	display: block;
	color: var(--presto-oyster);
	text-decoration: none;
	margin-bottom: 6px;
}
.mobile-nav__contact a:not(.btn-presto):hover { color: var(--presto-rose-clay); }
.mobile-nav__contact .btn-presto { display: flex; width: 100%; margin: 20px 0 28px; }

/* Search overlay (Antra #popup-search-box, re-themed) */
#popup-search-box {
	background-color: var(--presto-ink);
	height: auto;
	min-height: 220px;
	z-index: 1060;
}
#popup-search-box .box-inner-wrap {
	background-color: var(--presto-ink);
	min-height: 220px;
	padding: 40px 0;
	box-shadow: 0 30px 60px rgba(12, 15, 22, .4);
	cursor: default;
}
#popup-search-box .box-inner-wrap:hover { cursor: default; }
#popup-search-box form { max-width: 720px; }
#popup-search-box label {
	display: block;
	color: var(--presto-rose-clay);
}
#popup-search-box input {
	border: 0 !important;
	border-bottom: 1px solid rgba(233, 228, 218, .35) !important;
	padding: 14px 60px 14px 0 !important;
	background: transparent;
	color: var(--presto-oyster) !important;
	font-family: var(--presto-font-display);
	font-size: 34px !important;
}
#popup-search-box input::placeholder { color: var(--presto-mist); font-size: 34px; }
#popup-search-box .search-submit {
	position: absolute;
	right: 15px;
	bottom: 14px;
	color: var(--presto-oyster);
	font-size: 22px;
}
#popup-search-box .search-close {
	top: 24px;
	right: 24px;
	color: var(--presto-oyster);
	border-color: rgba(233, 228, 218, .2);
	border-radius: var(--presto-radius-soft);
}
#popup-search-box .search-close:hover {
	background-color: var(--presto-oxblood);
	border-color: var(--presto-oxblood);
}


/* 06. Page headers (simple, image, hero, slider)
   ========================================================================== */
.page-hero {
	position: relative;
	z-index: 1;
	padding: 96px 0 88px;
	background-color: var(--presto-ink);
	color: var(--presto-oyster);
	overflow: hidden;
}
.page-hero h1 {
	color: var(--presto-ivory);
	margin: 0;
	max-width: 900px;
}
.page-hero .eyebrow { color: var(--presto-rose-clay); }

.page-hero--image {
	padding: 150px 0 110px;
	background-size: cover;
	background-position: center;
}
.page-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(28, 34, 48, .92) 0%, rgba(28, 34, 48, .72) 50%, rgba(28, 34, 48, .35) 100%);
}
.page-hero--image.page-hero--dark-text::before {
	background: linear-gradient(90deg, rgba(246, 243, 238, .94) 0%, rgba(246, 243, 238, .75) 55%, rgba(246, 243, 238, .2) 100%);
}
.page-hero--dark-text h1 { color: var(--presto-ink); }
.page-hero--dark-text .eyebrow,
.page-hero--dark-text .crumbs a { color: var(--presto-oxblood); }
.page-hero--dark-text .crumbs li { color: var(--presto-slate); }
.page-hero .text-shadow { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }

/* Breadcrumbs */
.crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 0;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.crumbs li { color: var(--presto-mist); }
.crumbs li + li::before {
	content: "\203A"; /* single right-pointing angle quote, escaped so it survives any charset */
	padding: 0 12px;
	color: var(--presto-mist);
}
.crumbs a { color: var(--presto-rose-clay); text-decoration: none; }
.crumbs a:hover { color: var(--presto-oyster); }

/* Hero header (home and any page choosing the hero header) */
.hero {
	padding: 90px 0 70px;
}
.hero h1 {
	margin: 0 0 28px;
	font-size: clamp(38px, 4.4vw, 64px);
}
.hero__body p,
.hero__body { font-size: 18px; color: var(--presto-mist); max-width: 520px; }
.hero__body p:last-child { margin-bottom: 0; }
.hero .btn-group-presto { margin-top: 36px; }
.hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 0;
	list-style: none;
	margin: 64px 0 0;
	padding: 0;
	font-size: 13px;
	color: var(--presto-mist);
}
.hero__tags li + li::before {
	content: "\00B7"; /* middle dot, escaped */
	padding: 0 12px;
}
.hero__media {
	position: relative;
	height: 100%;
	min-height: 420px;
	background: var(--presto-ink-light);
	border-radius: var(--presto-radius);
}
.hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--presto-radius);
}
.hero__badge {
	position: absolute;
	left: -40px;
	bottom: 48px;
	max-width: 230px;
	padding: 22px 26px;
	background: var(--presto-oyster);
	border-radius: var(--presto-radius);
	box-shadow: 0 18px 40px rgba(12, 15, 22, .35);
}
.hero__badge strong {
	display: block;
	font-family: var(--presto-font-display);
	font-size: 44px;
	font-weight: 600;
	line-height: 1;
	color: var(--presto-oxblood);
	margin-bottom: 8px;
}
.hero__badge span { display: block; font-size: 13px; line-height: 1.5; color: var(--presto-slate); }
@media (max-width: 991px) {
	.hero { padding: 64px 0 56px; }
	.hero__media { min-height: 320px; margin-top: 48px; }
	.hero__badge { left: 16px; bottom: 16px; }
	.hero__tags { margin-top: 40px; }
}

/* Full height slider header */
.slider-hero { position: relative; background: var(--presto-ink); }
.slider-hero__slide {
	position: relative;
	display: flex !important;
	align-items: center;
	min-height: calc(100vh - var(--presto-header-h));
	background-size: cover;
	background-position: center;
	text-align: center;
}
.slider-hero__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(28, 34, 48, .6);
}
.slider-hero__caption { position: relative; z-index: 1; width: 100%; }
.slider-hero__caption h1,
.slider-hero__caption .h1 { color: var(--presto-oyster); margin: 0 auto 20px; max-width: 16ch; }
.slider-hero__caption p { color: var(--presto-oyster); font-size: 19px; max-width: 640px; margin: 0 auto 32px; }
.slider-hero__logo { max-height: 140px; width: auto; margin: 0 auto 28px; }


/* 07. Home: services, stats, process, work, testimonials, CTA, articles
   ========================================================================== */

/* Service cards ("What we do") */
.service-card {
	height: 100%;
	padding: 36px 30px 32px;
	background: var(--presto-paper);
	border-top: 2px solid var(--presto-oxblood);
	border-radius: 0 0 var(--presto-radius) var(--presto-radius);
	transition: transform .3s ease, box-shadow .3s ease;
}
.even .service-card { background: var(--presto-oyster); }
.service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(28, 34, 48, .08);
}
.service-card__icon {
	display: block;
	font-size: 26px;
	color: var(--presto-oxblood);
	margin-bottom: 26px;
	line-height: 1;
}
.service-card h3 { margin-bottom: 14px; }
.service-card__sub {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--presto-oxblood);
	margin-bottom: 10px;
}
.service-card p { font-size: 15px; margin-bottom: 22px; }
.service-card p:last-child { margin-bottom: 0; }

/* Process steps */
.process-step {
	height: 100%;
	padding-top: 28px;
	border-top: 1px solid var(--presto-stone);
}
.process-step__num {
	display: block;
	font-family: var(--presto-font-display);
	font-size: 44px;
	font-weight: 600;
	line-height: 1;
	color: var(--presto-oxblood);
	margin-bottom: 18px;
}
.process-step__icon {
	float: right;
	font-size: 22px;
	color: var(--presto-taupe);
}
.process-step h3 {
	font-family: var(--presto-font-body);
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 6px;
}
.process-step__sub {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--presto-oxblood);
	margin-bottom: 12px;
}
.process-step p { font-size: 15px; margin: 0; }

/* Work (portfolio) cards */
.work-card {
	display: block;
	height: 100%;
	text-decoration: none;
	color: var(--presto-ink);
}
.work-card__image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--presto-ink-light);
	border-radius: var(--presto-radius-soft);
	isolation: isolate; /* keeps the rounded corners clipped while the image zooms on hover (Safari) */
	margin-bottom: 20px;
}
.work-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform .6s ease;
}
.work-card:hover .work-card__image img { transform: scale(1.04); }

/* Work card preview on a laptop (drawn in CSS, sizes are % of the card width) */
.work-card__image--device {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4%;
	background:
		radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
		linear-gradient(160deg, var(--presto-paper), var(--presto-stone));
}
.device-laptop {
	width: 100%;
	transition: transform .6s ease;
	filter: drop-shadow(0 14px 18px rgba(28, 34, 48, .22));
}
.device-laptop__lid {
	position: relative;
	width: 86%;
	margin: 0 auto;
	padding: 3.4% 3.4% 4.2%;
	background: #14181F;
	border-radius: 12px 12px 3px 3px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.device-laptop__lid::before {
	/* camera */
	content: "";
	position: absolute;
	top: 1.4%;
	left: 50%;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: #2E3542;
}
.device-laptop__screen {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--presto-ink-light);
	border-radius: 2px;
}
.work-card__image--device .device-laptop__screen img {
	display: block;
	object-position: center top;
	transition: object-position 2.4s ease;
}
.device-laptop__base {
	position: relative;
	height: 0;
	padding-bottom: 3.2%;
	background: linear-gradient(180deg, #E4DED3 0%, #C9C1B3 55%, #A79F91 100%);
	border-radius: 2px 2px 14px 14px / 2px 2px 100% 100%;
}
.device-laptop__base::before {
	/* lid opening notch */
	content: "";
	position: absolute;
	top: 0;
	left: 42%;
	width: 16%;
	height: 38%;
	background: #B1A99B;
	border-radius: 0 0 6px 6px;
}
.work-card:hover .device-laptop { transform: translateY(-4px); }
.work-card:hover .work-card__image--device img { transform: none; object-position: center bottom; }
@media (prefers-reduced-motion: reduce) {
	.device-laptop, .work-card__image--device .device-laptop__screen img { transition: none; }
}

.work-card .eyebrow { font-size: 12px; margin-bottom: 8px; }
.work-card h3 { margin: 0; transition: color .25s ease; }
.work-card:hover h3 { color: var(--presto-oxblood); }

/* Testimonial band */
.testimonial-band__quote-mark {
	display: block;
	font-family: var(--presto-font-display);
	font-size: 90px;
	line-height: .6;
	height: 40px;
	color: var(--presto-rose-clay);
}
.testimonial-band h2 { font-size: clamp(30px, 3.2vw, 44px); }
.testimonial-band blockquote { margin: 0; }
.testimonial-band blockquote p {
	font-family: var(--presto-font-display);
	font-size: clamp(19px, 1.7vw, 23px);
	font-weight: 500;
	line-height: 1.4;
	color: var(--presto-oyster) !important;
	margin-bottom: 26px;
}
.testimonial-band__name {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--presto-oyster);
}
.testimonial-band__company { display: block; font-size: 14px; color: var(--presto-mist); }
.testimonial-band__logo {
	max-width: 180px;
	max-height: 90px;
	margin-top: 32px;
	filter: brightness(0) invert(1);
	opacity: .75;
}
.testimonial-band.section-paper .testimonial-band__logo { filter: none; opacity: 1; }

.client-logos {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
	margin-top: 80px;
	padding-top: 56px;
	border-top: 1px solid rgba(233, 228, 218, .12);
}
.client-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 96px;
	padding: 18px 22px;
	border: 1px solid rgba(233, 228, 218, .12);
	border-radius: var(--presto-radius);
	transition: border-color .25s ease;
}
.client-logos__item:hover { border-color: rgba(233, 228, 218, .35); }
.client-logos__item img {
	max-height: 52px;
	max-width: 100%;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: .7;
	transition: opacity .25s ease;
}
.client-logos__item:hover img { opacity: 1; }
@media (max-width: 1199px) { .client-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .client-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 56px; } }

/* CTA band */
.cta-band { padding: 72px 0; }
.cta-band__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 28px 48px;
}
.cta-band h2 {
	font-size: clamp(32px, 3.4vw, 46px);
	line-height: 1.1;
	max-width: 720px;
	margin: 0;
}

/* Article cards */
.article-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--presto-paper);
	border-radius: var(--presto-radius);
	overflow: hidden;
}
.even .article-card { background: var(--presto-oyster); }
.article-card__image {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--presto-stone);
}
.article-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}
.article-card:hover .article-card__image img { transform: scale(1.04); }
.article-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 26px 28px 30px;
}
.article-meta {
	font-size: 13px;
	color: var(--presto-slate);
	margin-bottom: 10px;
}
.article-meta a { color: var(--presto-oxblood); text-decoration: none; }
.article-meta a:hover { text-decoration: underline; }
.article-meta .sep { padding: 0 6px; }
.article-card h3 { font-size: 26px; margin-bottom: 14px; }
.article-card h3 a { color: var(--presto-ink); text-decoration: none; }
.article-card h3 a:hover { color: var(--presto-oxblood); }
.article-card p { font-size: 15px; }
.article-card .text-link { margin-top: auto; }


/* 08. Page blocks
   ========================================================================== */
.pb-section { position: relative; }

/* Calligraphy paper texture - every section that isn't dark blue:
   Oyster / Paper sections (.odd / .even) and the Oxblood CTA band.
   Multiplied over the section colour. Each noise layer is brightened first
   (it runs from ~84% to 100% white), so it adds tooth without muddying
   the palette. Layers:
   1. fine grain (small noise tile)    2. soft mottling (large noise tile)
   3. fine horizontal laid lines        4. widely spaced vertical chain lines
   --paper-strength sets the overall strength (0 = off, 1 = full).
   Add .no-texture to a section to switch it off. */
:root { --paper-strength: .9; }

.texture-paper,
.odd,
.even,
.section-oyster,
.section-paper,
.section-oxblood {
	position: relative;
	isolation: isolate;
}
.texture-paper::before,
.odd::before,
.even::before,
.section-oyster::before,
.section-paper::before,
.section-oxblood::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.42 .42 .42 0 .37 .42 .42 .42 0 .355 .42 .42 .42 0 .32 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.5 .5 .5 0 .27 .5 .5 .5 0 .26 .5 .5 .5 0 .23 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
		repeating-linear-gradient(0deg, rgba(110, 85, 55, .07) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, transparent 0 95px, rgba(110, 85, 55, .09) 95px 96px);
	background-size: 200px 200px, 800px 800px, auto, 96px 100%;
	mix-blend-mode: multiply;
	opacity: var(--paper-strength);
}

/* Dark version - dark blue (Ink) sections: .section-dark (home hero, testimonial band,
   dark page blocks) and the simple inner page header. Not the site header or footer,
   and not image page headers (their ::before is the dark gradient over the photo).
   The same paper layers as faint warm light, screened over Ink so they can only
   lighten. --paper-dark-strength sets the strength. */
:root { --paper-dark-strength: .55; }
.texture-dark,
.section-dark,
.page-hero:not(.page-hero--image) {
	position: relative;
	isolation: isolate;
}
.texture-dark::before,
.section-dark::before,
.page-hero:not(.page-hero--image)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.1 .1 .1 0 -.1 .1 .1 .1 0 -.103 .1 .1 .1 0 -.108 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='m' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.06 .06 .06 0 -.06 .06 .06 .06 0 -.061 .06 .06 .06 0 -.064 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
		repeating-linear-gradient(0deg, rgba(233, 228, 218, .03) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, transparent 0 95px, rgba(233, 228, 218, .04) 95px 96px);
	background-size: 200px 200px, 800px 800px, auto, 96px 100%;
	mix-blend-mode: screen;
	opacity: var(--paper-dark-strength);
}

/* No texture: sections with a background image, nested page blocks in blog posts, opt-outs */
.imageBackgroundRow::before,
.post-body .pb-section::before,
.no-texture::before,
.texture-dark.no-texture::before,
.page-hero.no-texture::before { display: none; }

@media print {
	.texture-paper::before, .odd::before, .even::before,
	.section-oyster::before, .section-paper::before, .section-oxblood::before,
	.texture-dark::before, .section-dark::before,
	.page-hero:not(.page-hero--image)::before { display: none; }
}
.pb-section.noPadSec { padding-top: 0; padding-bottom: 0; }
.pb-section.padBot0 { padding-bottom: 0; }
.pb-section.fullWidthSection > .container-fluid { padding-left: 0; padding-right: 0; }
.pb-section.fullWidthSection > .container-fluid > .row { margin-left: 0; margin-right: 0; }
.pb-section.fullWidthSection .pageBlockText { padding: 48px clamp(24px, 6vw, 96px); }

/* Image + text rows in sections with top / bottom padding removed: keep an even
   space round the image so it doesn't sit hard against the section edges */
.pb-section.noPadSec:not(.imageBackgroundRow) {
	--pb-inset-y: clamp(32px, 5vw, 64px);
	--pb-inset-x: clamp(24px, 6vw, 96px);
}
.pb-section.noPadSec:not(.imageBackgroundRow) .row:has(.pageBlockText) {
	--bs-gutter-y: 0;
	padding-top: var(--pb-inset-y);
	padding-bottom: var(--pb-inset-y);
}
.pb-section.noPadSec.fullWidthSection:not(.imageBackgroundRow) .row:has(.pageBlockText) .pageBlockText { padding-top: 0; padding-bottom: 0; }

/* Side by side on full width blocks: the image's outer side gets the same inset as
   the text, so the margins either side of the row match */
@media (min-width: 768px) {
	.pb-section.noPadSec.fullWidthSection:not(.imageBackgroundRow) .row:has(.pageBlockText) > .leftPageBlock:not(:has(.pageBlockText)) {
		padding-left: calc(var(--bs-gutter-x) * .5 + var(--pb-inset-x));
	}
	.pb-section.noPadSec.fullWidthSection:not(.imageBackgroundRow) .row:has(.pageBlockText) > .rightPageBlock:not(:has(.pageBlockText)) {
		padding-right: calc(var(--bs-gutter-x) * .5 + var(--pb-inset-x));
	}
}

/* Stacked on mobile: same gap between the columns as above and below them, and
   on full width blocks the image gets the same side margins as the text */
@media (max-width: 767.98px) {
	.pb-section.noPadSec:not(.imageBackgroundRow) .row:has(.pageBlockText) > * + * { margin-top: var(--pb-inset-y); }
	.pb-section.noPadSec.fullWidthSection:not(.imageBackgroundRow) .row:has(.pageBlockText) > .pageBlock {
		padding-left: var(--pb-inset-x);
		padding-right: var(--pb-inset-x);
	}
	.pb-section.noPadSec.fullWidthSection:not(.imageBackgroundRow) .row:has(.pageBlockText) .pageBlockText { padding-left: 0; padding-right: 0; }
}

.pb-heading { margin-bottom: 48px; }
.pb-heading h2 { margin-bottom: 0; }
.pb-heading.centered { text-align: center; max-width: 860px; margin-left: auto; margin-right: auto; }

/* Script-style brush underline beneath block headings */
.pb-heading h2::after {
	content: "";
	display: block;
	width: 140px;
	height: 14px;
	margin-top: 14px;
	background-color: var(--pb-underline-color, var(--presto-oxblood));
	-webkit-mask: var(--presto-swash) no-repeat center / 100% 100%;
	mask: var(--presto-swash) no-repeat center / 100% 100%;
}
.pb-heading.centered h2::after { margin-left: auto; margin-right: auto; }

/* Underline colour per background (shared by the block heading and column heading underlines) */
.section-dark,
.whiteText { --pb-underline-color: var(--presto-rose-clay); }
.section-oxblood { --pb-underline-color: var(--presto-oyster); }

/* Hand-drawn wave beneath headings in the text column of multi-column blocks */
.pb-section .row:has(> .rightPageBlock) .pageBlockText :is(h2, h3)::after {
	content: "";
	display: block;
	width: 64px;
	height: 12px;
	margin-top: .45em;
	background-color: var(--pb-underline-color, var(--presto-oxblood));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 12'%3E%3Cpath d='M2 7.5c3.5-4.2 7-4.6 10.5-1.2s7 3.8 10.5-.2 7-4.2 10.5-.4 7 4 10.5 0 7-4.3 10.5-.6 4 3.2 6.5 2.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center / 100% 100%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 12'%3E%3Cpath d='M2 7.5c3.5-4.2 7-4.6 10.5-1.2s7 3.8 10.5-.2 7-4.2 10.5-.4 7 4 10.5 0 7-4.3 10.5-.6 4 3.2 6.5 2.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center / 100% 100%;
}
/* Follow centred / right aligned headings set in the editor */
.pb-section .pageBlockText :is(h2, h3):is([style*="center"], .text-center)::after { margin-left: auto; margin-right: auto; }
.pb-section .pageBlockText :is(h2, h3):is([style*="right"], .text-end)::after { margin-left: auto; }

.pageBlock img {
	display: block;
	width: 100%;
	border-radius: var(--presto-radius-soft);
}
.pageBlock a img { transition: opacity .25s ease; }
.pageBlock a:hover img { opacity: .9; }
/* Edge-to-edge full width images stay square; images beside text keep the rounded corners */
.fullWidthSection .row:not(:has(.pageBlockText)) .pageBlock img { border-radius: 0; }

/* Ken Burns image movement */
.kenBurns {
	overflow: hidden;
	border-radius: var(--presto-radius-soft);
}
.kenBurns img { animation: presto-kenburns 22s ease-in-out infinite alternate; }
@keyframes presto-kenburns {
	from { transform: scale(1) translate(0, 0); }
	to { transform: scale(1.12) translate(-2%, -2%); }
}

/* Photo style: offset frame - a fine rose-clay outline set behind the photo,
   pushed down and out towards the page edge (pb_photo_style = "frame") */
.pb-photo { position: relative; isolation: isolate; }
.pb-photo--frame {
	--pb-frame-offset: 18px;
	margin-bottom: var(--pb-frame-offset);
}
.pb-photo--frame::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 2px solid var(--presto-rose-clay);
	border-radius: var(--presto-radius-soft);
	transform: translate(var(--pb-frame-offset), var(--pb-frame-offset));
	transition: transform .4s ease;
	pointer-events: none;
}
.leftPageBlock .pb-photo--frame::before { transform: translate(calc(var(--pb-frame-offset) * -1), var(--pb-frame-offset)); }
.leftPageBlock .pb-photo--frame { margin-left: var(--pb-frame-offset); }
.rightPageBlock .pb-photo--frame { margin-right: var(--pb-frame-offset); }
/* Linked photos: frame tucks in a little on hover */
.pb-photo--frame:has(a:hover)::before { transform: translate(calc(var(--pb-frame-offset) * .5), calc(var(--pb-frame-offset) * .5)); }
.leftPageBlock .pb-photo--frame:has(a:hover)::before { transform: translate(calc(var(--pb-frame-offset) * -.5), calc(var(--pb-frame-offset) * .5)); }
@media (max-width: 767.98px) {
	.pb-photo--frame { --pb-frame-offset: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.pb-photo--frame::before { transition: none; }
}

/* Photo style: colour block - a solid panel behind the lower, outer corner of the
   photo (pb_photo_style = "block"). Ink on light sections, oxblood on dark ones */
.pb-photo--block {
	--pb-block-offset: 28px;
	--pb-block-colour: var(--presto-ink);
	margin-bottom: var(--pb-block-offset);
}
.section-dark .pb-photo--block { --pb-block-colour: var(--presto-oxblood); }
.pb-photo--block::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 28%;
	bottom: calc(var(--pb-block-offset) * -1);
	left: 22%;
	right: calc(var(--pb-block-offset) * -1);
	background: var(--pb-block-colour);
	border-radius: var(--presto-radius-soft);
	pointer-events: none;
}
.rightPageBlock .pb-photo--block { margin-right: var(--pb-block-offset); }
.leftPageBlock .pb-photo--block { margin-left: var(--pb-block-offset); }
.leftPageBlock .pb-photo--block::before { left: calc(var(--pb-block-offset) * -1); right: 22%; }
@media (max-width: 767.98px) {
	.pb-photo--block { --pb-block-offset: 16px; }
}

/* Photo style: inset line - a fine paper-coloured line just inside the photo's
   edges, like a gallery mount (pb_photo_style = "inset") */
.pb-photo--inset::after {
	content: "";
	position: absolute;
	inset: clamp(10px, 1.6vw, 18px);
	z-index: 1;
	border: 1px solid rgba(246, 243, 238, .85);
	border-radius: 2px;
	pointer-events: none;
	transition: inset .4s ease;
}
.pb-photo--inset:has(a:hover)::after { inset: clamp(14px, 2.2vw, 24px); }
@media (prefers-reduced-motion: reduce) {
	.pb-photo--inset::after { transition: none; }
}

/* Photo style: arched top - photo cropped to 4:5 with a semicircular top, like a
   townhouse window (pb_photo_style = "arch"). The 40% vertical radius on a 4:5 box
   equals half the width, which gives a true semicircle */
.pb-photo--arch {
	overflow: hidden;
	border-radius: 50% 50% var(--presto-radius-soft) var(--presto-radius-soft) / 40% 40% var(--presto-radius-soft) var(--presto-radius-soft);
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}
.pb-photo--arch img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0;
}
.pb-photo--arch .kenBurns { border-radius: 0; }
@media (max-width: 767.98px) {
	.pb-photo--arch { max-width: 420px; }
}

/* Photo style: print mount - a light paper border with a soft lifted shadow, like
   a mounted print (pb_photo_style = "mount") */
.pb-photo--mount {
	padding: clamp(8px, 1.2vw, 14px);
	background: var(--presto-ivory);
	border-radius: var(--presto-radius-soft);
	box-shadow:
		0 1px 2px rgba(28, 34, 48, .06),
		0 18px 40px -14px rgba(28, 34, 48, .32);
	transition: transform .4s ease, box-shadow .4s ease;
}
.pb-photo--mount img,
.pb-photo--mount .kenBurns { border-radius: 2px; }
.pb-photo--mount:has(a:hover) {
	transform: translateY(-4px);
	box-shadow:
		0 1px 2px rgba(28, 34, 48, .06),
		0 26px 48px -14px rgba(28, 34, 48, .36);
}
.pb-photo--mount a:hover img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.pb-photo--mount { transition: none; }
	.pb-photo--mount:has(a:hover) { transform: none; }
}

/* Background image rows */
.imageBackgroundRow {
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.imageBackgroundRow.parallax { background-attachment: fixed; }
@media (hover: none) { .imageBackgroundRow.parallax { background-attachment: scroll; } }
.imageBackgroundRow > .container,
.imageBackgroundRow > .container-fluid { position: relative; z-index: 1; }
.imageBackgroundRow .pageBlockText { padding-top: 40px; padding-bottom: 40px; }
.fadeFromLeft,
.fadeFromRight {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.fadeFromLeft { background: linear-gradient(90deg, var(--presto-paper) 0%, rgba(246, 243, 238, .92) 45%, rgba(246, 243, 238, 0) 80%); }
.fadeFromRight { background: linear-gradient(270deg, var(--presto-paper) 0%, rgba(246, 243, 238, .92) 45%, rgba(246, 243, 238, 0) 80%); }
.whiteText .fadeFromLeft { background: linear-gradient(90deg, var(--presto-ink) 0%, rgba(28, 34, 48, .88) 45%, rgba(28, 34, 48, 0) 80%); }
.whiteText .fadeFromRight { background: linear-gradient(270deg, var(--presto-ink) 0%, rgba(28, 34, 48, .88) 45%, rgba(28, 34, 48, 0) 80%); }
.whiteText h1, .whiteText h2, .whiteText h3, .whiteText h4, .whiteText h5, .whiteText h6 { color: var(--presto-oyster); }
.whiteText p, .whiteText li { color: var(--presto-oyster); }
.whiteText a:not(.btn-presto) { color: var(--presto-rose-clay); }
.whiteText .eyebrow { color: var(--presto-rose-clay); }

/* Video */
.pageBlock .ratio { border-radius: var(--presto-radius-soft); overflow: hidden; background: var(--presto-ink); }
.pageBlock video { display: block; width: 100%; border-radius: var(--presto-radius-soft); }

/* Link buttons block */
.buttonLinks {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.buttonLinks.centered { justify-content: center; }

/* Tabs */
.pb-tabs .nav-tabs {
	--bs-nav-tabs-border-color: var(--presto-stone);
	--bs-nav-tabs-border-width: 1px;
	--bs-nav-tabs-border-radius: 0;
	gap: 8px 32px;
	margin-bottom: 40px;
}
.pb-tabs .nav-link {
	padding: 0 0 16px;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	background: transparent !important;
	font-size: 16px;
	font-weight: 600;
	color: var(--presto-slate);
}
.pb-tabs .nav-link:hover { color: var(--presto-ink); }
.pb-tabs .nav-link.active {
	color: var(--presto-oxblood);
	border-bottom-color: var(--presto-oxblood) !important;
}

/* Accordion (Bootstrap 5) */
.pb-accordion.accordion {
	--bs-accordion-bg: transparent;
	--bs-accordion-color: var(--presto-ink);
	--bs-accordion-border-color: var(--presto-stone);
	--bs-accordion-border-radius: 0;
	--bs-accordion-inner-border-radius: 0;
	--bs-accordion-btn-padding-x: 0;
	--bs-accordion-btn-padding-y: 24px;
	--bs-accordion-btn-color: var(--presto-ink);
	--bs-accordion-btn-bg: transparent;
	--bs-accordion-active-color: var(--presto-oxblood);
	--bs-accordion-active-bg: transparent;
	--bs-accordion-btn-focus-box-shadow: none;
	--bs-accordion-body-padding-x: 0;
	--bs-accordion-body-padding-y: 0;
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237A2E2E' stroke-width='1.5'%3e%3cpath d='M8 2v12M2 8h12'/%3e%3c/svg%3e");
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237A2E2E' stroke-width='1.5'%3e%3cpath d='M2 8h12'/%3e%3c/svg%3e");
	--bs-accordion-btn-icon-width: 16px;
	--bs-accordion-btn-icon-transform: none;
}
.pb-accordion .accordion-item {
	border-left: 0;
	border-right: 0;
	border-top: 0;
}
.pb-accordion .accordion-item:first-of-type { border-top: 1px solid var(--presto-stone); }
.pb-accordion .accordion-header { margin: 0; }
.pb-accordion .accordion-button {
	font-family: var(--presto-font-display);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	gap: 16px;
}
.pb-accordion .accordion-button:focus-visible { outline: 2px solid var(--presto-rose-clay); outline-offset: 2px; }
.pb-accordion .accordion-body { padding-bottom: 24px; }
.pb-accordion .accordion-body > :last-child { margin-bottom: 0; }

/* Action blocks */
.actionBlocks .blockContent {
	height: 100%;
	padding: 32px;
	background: var(--presto-paper);
	border-radius: var(--presto-radius);
}
.actionBlocks .blockContent.whiteBackBlock { background: #fff; }
.actionBlocks .blockImage { margin: 20px 0; }

/* Brand list */
.brandList a { display: block; padding: 16px; }

/* Legacy in-block CTA */
.ctaSection { padding: 56px 0; }
.ctaSection h3 { margin: 0; text-align: center; }
.ctaSection h3 a { margin-left: 12px; }

/* Slick sliders */
.pb_slider { position: relative; border-radius: var(--presto-radius-soft); overflow: hidden; }
.pb_slider .slides { list-style: none; margin: 0; padding: 0; }
.pb_slider .slides img { display: block; width: 100%; }
.slick-dotted.slick-slider { margin-bottom: 0; }
.pb_slider .slick-dots,
.slider-hero .slick-dots { bottom: 18px; }
.slick-dots li button:before { font-size: 10px; color: var(--presto-oyster); opacity: .5; }
.slick-dots li.slick-active button:before { color: var(--presto-oyster); opacity: 1; }
.slick-prev,
.slick-next {
	z-index: 2;
	width: 48px;
	height: 48px;
	background: rgba(28, 34, 48, .55) !important;
	border-radius: var(--presto-radius-soft);
}
.slick-prev { left: 16px; }
.slick-next { right: 16px; }
.slick-prev:before,
.slick-next:before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 300;
	font-size: 20px;
	color: var(--presto-oyster);
	opacity: 1;
}
.slick-prev:before { content: "\f060"; }
.slick-next:before { content: "\f061"; }


/* 09. Rich text (CKEditor content)
   ========================================================================== */
.rich-text > :last-child { margin-bottom: 0; }
.rich-text h1,
.rich-text h2 { font-size: clamp(32px, 3.4vw, 46px); margin: 1.2em 0 .5em; }
.rich-text h3 { margin: 1.3em 0 .5em; }
.rich-text h4 { margin: 1.3em 0 .5em; }
.rich-text > :first-child { margin-top: 0; }
.rich-text p { font-size: 17px; }
.rich-text ul,
.rich-text ol {
	margin: 0 0 1.4em;
	padding-left: 1.3em;
	color: var(--presto-slate);
}
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text li { margin-bottom: .45em; padding-left: .2em; }
.rich-text li::marker { color: var(--presto-oxblood); }
.rich-text a:not(.btn-presto):not(.btn) {
	color: var(--presto-oxblood);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.rich-text a:not(.btn-presto):not(.btn):hover { color: var(--presto-oxblood-dk); }
.rich-text blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 28px;
	border-left: 2px solid var(--presto-oxblood);
}
.rich-text blockquote p {
	font-family: var(--presto-font-display);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--presto-ink);
}
.section-dark .rich-text blockquote,
.whiteText .rich-text blockquote { border-left-color: var(--presto-rose-clay); }
.section-dark .rich-text blockquote p,
.whiteText .rich-text blockquote p { color: var(--presto-oyster); }
.rich-text img { border-radius: var(--presto-radius); }
.rich-text img.align_left { float: left; margin: 6px 32px 20px 0; max-width: 50%; }
.rich-text img.align_right { float: right; margin: 6px 0 20px 32px; max-width: 50%; }
.rich-text img.align_center { display: block; margin: 0 auto 24px; }
.rich-text table {
	width: 100%;
	margin-bottom: 1.6em;
	border-collapse: collapse;
	font-size: 15px;
}
.rich-text th,
.rich-text td { padding: 12px 14px; border-bottom: 1px solid var(--presto-stone); text-align: left; }
.rich-text th { font-weight: 700; color: var(--presto-ink); }
.rich-text hr { margin: 2.4em 0; border-color: var(--presto-stone); opacity: 1; }
.rich-text iframe { max-width: 100%; }

/* Tick lists inside page block text (e.g. "Welcome" checklist) */
.pageBlockText ul {
	list-style: none;
	padding-left: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 28px;
	margin-bottom: 1.6em;
}
.pageBlockText ul li {
	position: relative;
	padding-left: 28px;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--presto-ink);
}
.pageBlockText ul li::before {
	content: "\f00c";
	position: absolute;
	left: 0;
	top: 1px;
	font-family: "Font Awesome 6 Pro";
	font-weight: 400;
	font-size: 14px;
	color: var(--presto-oxblood);
}
.whiteText .pageBlockText ul li { color: var(--presto-oyster); }
.whiteText .pageBlockText ul li::before { color: var(--presto-rose-clay); }
@media (max-width: 575px) { .pageBlockText ul { grid-template-columns: 1fr; } }

.pb-section .col-md-4 .pageBlockText ul,
.pb-section .col-md-6 .pageBlockText ul { grid-template-columns: 1fr; }
.pb-section .col-md-6 .pageBlockText ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1199px) { .pb-section .col-md-6 .pageBlockText ul { grid-template-columns: 1fr; } }


/* 10. Blog: listing, sidebar, post, pagination
   ========================================================================== */
.post-list { display: grid; gap: 32px; }
.post-list .article-card { flex-direction: row; }
.post-list .article-card__image { flex: 0 0 42%; aspect-ratio: auto; min-height: 260px; }
.post-list .article-card__body { padding: 32px 36px; }
@media (max-width: 767px) {
	.post-list .article-card { flex-direction: column; }
	.post-list .article-card__image { flex-basis: auto; aspect-ratio: 16 / 10; min-height: 0; }
	.post-list .article-card__body { padding: 24px; }
}

/* Sidebar */
.blog-sidebar { display: grid; gap: 28px; }
@media (min-width: 1200px) {
	.blog-sidebar { position: sticky; top: calc(var(--presto-header-h) + 24px); }
}
.side-widget {
	padding: 30px;
	background: var(--presto-paper);
	border-radius: var(--presto-radius);
}
.even .side-widget { background: var(--presto-oyster); }
.side-widget__title {
	font-size: 26px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--presto-stone);
}
.side-search { position: relative; }
.side-search input {
	width: 100%;
	height: 56px;
	padding: 0 56px 0 18px;
	border: 1px solid var(--presto-taupe);
	border-radius: var(--presto-radius-soft);
	background: var(--presto-paper);
	font-size: 15px;
	color: var(--presto-ink);
}
.side-search input:focus { border-color: var(--presto-oxblood); }
.side-search button {
	position: absolute;
	right: 0;
	top: 0;
	width: 56px;
	height: 56px;
	color: var(--presto-oxblood);
}
.side-cats { list-style: none; margin: 0; padding: 0; }
.side-cats li + li { border-top: 1px solid var(--presto-stone); }
.side-cats a {
	display: flex;
	justify-content: space-between;
	padding: 11px 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--presto-ink);
	text-decoration: none;
}
.side-cats a:hover,
.side-cats .is-active a { color: var(--presto-oxblood); }
.side-cats .count { color: var(--presto-taupe); font-size: 13px; }
.side-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.side-post { display: flex; gap: 16px; align-items: center; }
.side-post__image { flex: 0 0 84px; }
.side-post__image img { width: 84px; height: 64px; object-fit: cover; border-radius: var(--presto-radius); }
.side-post__date { display: block; font-size: 12px; color: var(--presto-slate); margin-bottom: 4px; }
.side-post__title { font-family: var(--presto-font-display); font-size: 19px; font-weight: 600; line-height: 1.2; margin: 0; }
.side-post__title a { color: var(--presto-ink); text-decoration: none; }
.side-post__title a:hover { color: var(--presto-oxblood); }
.side-widget--dark { background: var(--presto-ink) !important; }
.side-widget--dark .side-widget__title { color: var(--presto-oyster); border-color: rgba(233, 228, 218, .12); }
.side-widget--dark p { color: var(--presto-mist); }
.side-widget--dark .btn-presto { width: 100%; }

/* Single post */
.post-header-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin-bottom: 28px;
	font-size: 14px;
	color: var(--presto-slate);
}
.post-header-meta i { color: var(--presto-oxblood); margin-right: 6px; }
.post-header-meta .tag {
	padding: 4px 12px;
	border: 1px solid var(--presto-stone);
	border-radius: var(--presto-radius-soft);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--presto-oxblood);
	text-decoration: none;
}
.post-header-meta .tag:hover { border-color: var(--presto-oxblood); }
.post-lead-image { width: 100%; border-radius: var(--presto-radius); margin-bottom: 40px; }
.post-body .pb-section { padding-top: 48px; padding-bottom: 0; background: transparent !important; }
.post-body .pb-section > .container,
.post-body .pb-section > .container-fluid { padding: 0; max-width: none; }
.post-cta {
	margin-top: 56px;
	padding: 40px;
	background: var(--presto-paper);
	border-left: 2px solid var(--presto-oxblood);
	border-radius: var(--presto-radius);
}
.post-cta h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 20px; }
.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--presto-stone);
}

/* Pagination (ProcessWire pager) */
.pager {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 48px 0 0;
	padding: 0;
}
.pager a,
.pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 12px;
	border: 1px solid var(--presto-stone);
	border-radius: var(--presto-radius-soft);
	font-size: 15px;
	font-weight: 600;
	color: var(--presto-ink);
	text-decoration: none;
}
.pager a:hover { border-color: var(--presto-oxblood); color: var(--presto-oxblood); }
.pager .is-current a,
.pager .is-current span {
	background: var(--presto-oxblood);
	border-color: var(--presto-oxblood);
	color: var(--presto-oyster);
}
.pager .is-separator span { border-color: transparent; }


/* 11. Portfolio: filters & project detail
   ========================================================================== */
/* Portfolio page: bring the filter closer to the page header */
.section.section--portfolio-filter { padding-top: 40px; }

/* Editorial index style filter: serif sector names with project counts, the brush
   swash sweeping in under the active sector, and a live result count */
.portfolio-filter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 14px 32px;
	margin: 0 0 56px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--presto-stone);
}
.portfolio-filter__label { margin: 0; white-space: nowrap; }
.portfolio-filter__result {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-size: 14px;
	color: var(--presto-slate);
	white-space: nowrap;
}
/* Number styled to match the "Filter by sector" eyebrow label */
.portfolio-filter__result strong {
	font-family: var(--presto-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--presto-oxblood);
	margin: 0 0 0 4px; /* letter-spacing already adds space after */
}
.filter-list {
	position: relative;
	grid-column: 1 / -1;
	grid-row: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.filter-list button {
	position: relative;
	display: inline-flex;
	align-items: flex-start;
	gap: 3px;
	padding: 6px 0 14px;
	border: 0 !important;
	background: none !important;
	font-family: var(--presto-font-display);
	font-size: clamp(22px, 1.9vw, 27px);
	font-weight: 500;
	line-height: 1.1;
	color: var(--presto-slate);
	white-space: nowrap;
	transition: color .3s ease;
}
.filter-list .filter-count {
	top: 0;
	font-family: var(--presto-font-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	color: var(--presto-taupe);
	transition: color .3s ease;
}
.filter-list button::after {
	content: "";
	position: absolute;
	left: -2px;
	right: 8px;
	bottom: 2px;
	height: 9px;
	background-color: var(--presto-rose-clay);
	-webkit-mask: var(--presto-swash) no-repeat center / 100% 100%;
	mask: var(--presto-swash) no-repeat center / 100% 100%;
	transform: scaleX(0);
	transform-origin: left center;
	opacity: .6;
	transition: transform .45s cubic-bezier(.6, 0, .2, 1), opacity .3s ease, background-color .3s ease;
}
.filter-list button:hover { color: var(--presto-ink); }
.filter-list button:hover::after { transform: scaleX(1); }
.filter-list button:focus-visible { outline: 2px solid var(--presto-rose-clay); outline-offset: 4px; border-radius: 2px; }
.filter-list .active button { color: var(--presto-oxblood); }
.filter-list .active .filter-count { color: var(--presto-oxblood); }
.filter-list .active button::after {
	transform: scaleX(1);
	opacity: 1;
	background-color: var(--presto-oxblood);
}

/* Mobile: one swipeable row that fades out at the edge */
@media (max-width: 767.98px) {
	.portfolio-filter { margin-bottom: 40px; padding-bottom: 6px; }
	.filter-list {
		flex-wrap: nowrap;
		gap: 0 24px;
		padding-right: 40px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
	}
	.filter-list::-webkit-scrollbar { display: none; }
	.filter-list li { scroll-snap-align: start; }
	.filter-list button { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.filter-list button,
	.filter-list button::after { transition: none; }
}
.work-grid .grid-item { margin-bottom: 48px; }

.project-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--presto-stone);
	border-bottom: 1px solid var(--presto-stone);
}
.project-fact { padding: 28px 24px 28px 0; }
.project-fact + .project-fact { padding-left: 24px; border-left: 1px solid var(--presto-stone); }
.project-fact .eyebrow { margin-bottom: 8px; font-size: 12px; }
.project-fact p { margin: 0; font-size: 16px; font-weight: 600; color: var(--presto-ink); }
.project-fact p a { color: var(--presto-oxblood); text-decoration: none; word-break: break-word; }
@media (max-width: 991px) {
	.project-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.project-fact:nth-child(3) { padding-left: 0; border-left: 0; }
	.project-fact:nth-child(n+3) { border-top: 1px solid var(--presto-stone); }
}
@media (max-width: 575px) {
	.project-facts { grid-template-columns: 1fr; }
	.project-fact + .project-fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--presto-stone); }
}

.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li {
	position: relative;
	padding: 10px 0 10px 30px;
	border-bottom: 1px solid var(--presto-stone);
	font-size: 15px;
	font-weight: 600;
	color: var(--presto-ink);
}
.feature-list li::before {
	content: "\f00c";
	position: absolute;
	left: 0;
	top: 11px;
	font-family: "Font Awesome 6 Pro";
	font-weight: 400;
	color: var(--presto-oxblood);
}
.project-mobile-view img {
	max-height: 560px;
	width: auto;
	border-radius: 14.9% / 7.05%; /* matches the phone's corners in the 478x1011 JPG previews */
	box-shadow: 0 30px 60px rgba(28, 34, 48, .18);
}
.project-gallery img { width: 100%; border-radius: var(--presto-radius); }


/* 12. Contact, forms & popups
   ========================================================================== */
.contact-card {
	height: 100%;
	padding: 34px 30px;
	background: var(--presto-paper);
	border-top: 2px solid var(--presto-oxblood);
	border-radius: 0 0 var(--presto-radius) var(--presto-radius);
}
.contact-card i { font-size: 26px; color: var(--presto-oxblood); margin-bottom: 22px; display: block; }
.contact-card h3 { margin-bottom: 10px; }
.contact-card p { margin: 0; font-size: 15px; }
.contact-card a { font-weight: 600; }
.contact-card__body > * + * { margin-top: .7em; } /* spacing when the editor adds several paragraphs */

.quote-card {
	margin-top: 40px;
	padding: 34px;
	background: var(--presto-ink);
	border-radius: var(--presto-radius);
}
.quote-card p {
	font-family: var(--presto-font-display);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--presto-oyster);
}
.quote-card .stars { color: var(--presto-rose-clay); font-size: 13px; letter-spacing: 3px; margin-bottom: 16px; }
.quote-card cite { font-style: normal; font-size: 14px; font-weight: 700; color: var(--presto-oyster); }
.quote-card cite span { font-weight: 400; color: var(--presto-mist); }

.form-panel {
	padding: clamp(28px, 4vw, 48px);
	background: var(--presto-paper);
	border-radius: var(--presto-radius);
}
.even .form-panel { background: var(--presto-oyster); }

/* Generic & FormBuilder fields */
.form-control,
.form-select,
.InputfieldForm input[type="text"],
.InputfieldForm input[type="email"],
.InputfieldForm input[type="tel"],
.InputfieldForm input[type="url"],
.InputfieldForm input[type="number"],
.InputfieldForm select,
.InputfieldForm textarea,
.form-box-style input[type="text"],
.form-box-style input[type="email"],
.form-box-style input[type="tel"],
.form-box-style select,
.form-box-style textarea {
	display: block;
	width: 100%;
	min-height: 54px;
	padding: 14px 16px;
	background-color: #fff !important;
	border: 1px solid var(--presto-taupe) !important;
	border-radius: var(--presto-radius-soft) !important;
	box-shadow: none !important;
	font-family: var(--presto-font-body);
	font-size: 16px;
	color: var(--presto-ink);
	transition: border-color .2s ease;
}
.InputfieldForm textarea,
.form-box-style textarea { min-height: 150px; resize: vertical; }
.form-control:focus,
.InputfieldForm input:focus,
.InputfieldForm select:focus,
.InputfieldForm textarea:focus,
.form-box-style input:focus,
.form-box-style select:focus,
.form-box-style textarea:focus {
	border-color: var(--presto-oxblood) !important;
	outline: none;
}
.form-box-style__form-input,
.InputfieldForm .Inputfield { margin-bottom: 20px; }
.form-box-style-title,
.InputfieldForm .InputfieldHeader,
.InputfieldForm label.InputfieldHeader {
	display: block;
	font-family: var(--presto-font-body) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: var(--presto-ink) !important;
	margin-bottom: 8px !important;
	padding: 0 !important;
	background: none !important;
}
.InputfieldForm .InputfieldContent { padding: 0 !important; }
.InputfieldForm .notes,
.InputfieldForm .description { font-size: 13px; color: var(--presto-slate); }
.InputfieldForm input[type="checkbox"],
.InputfieldForm input[type="radio"],
.form-box-style input[type="checkbox"] { accent-color: var(--presto-oxblood); width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
.InputfieldForm button[type="submit"],
.InputfieldForm .InputfieldSubmit button,
.form-box-style button[type="submit"],
.form-box-style input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 32px;
	border: 1px solid var(--presto-oxblood) !important;
	border-radius: var(--presto-radius-soft);
	background: var(--presto-oxblood) !important;
	color: var(--presto-oyster) !important;
	font-family: var(--presto-font-body);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .2px;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.InputfieldForm button[type="submit"]:hover,
.InputfieldForm .InputfieldSubmit button:hover,
.form-box-style button[type="submit"]:hover,
.form-box-style input[type="submit"]:hover {
	background: var(--presto-paper) !important;
	color: var(--presto-oxblood) !important;
	border-color: var(--presto-oxblood) !important;
}
.InputfieldForm .InputfieldStateError input,
.InputfieldForm .InputfieldStateError textarea,
input.error,
textarea.error,
select.error { border-color: var(--presto-oxblood) !important; background-color: #FBF3F2 !important; }
.InputfieldForm .InputfieldError,
label.error,
p.error,
.form-box-style .error {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--presto-oxblood);
	background: none;
}
.form-box-style__form-wrapper { background: transparent !important; }

/* Magnific popup contact form */
.form-popup {
	position: relative;
	max-width: 640px;
	margin: 40px auto;
	padding: clamp(28px, 5vw, 48px);
	background: var(--presto-paper);
	border-radius: var(--presto-radius);
}
.form-popup .popUpTitle h3 { font-size: 36px; margin-bottom: 8px; }
.form-popup .popUpTitle { margin-bottom: 28px; }
.mfp-bg { background: var(--presto-ink); opacity: .88; }
.mfp-close-btn-in .mfp-close { color: var(--presto-ink); font-size: 34px; }

/* Brevo newsletter form */
.sib-form { padding: 0 !important; background: transparent !important; }
#sib-container { background: var(--presto-paper) !important; border: 0 !important; border-radius: var(--presto-radius) !important; }
.sib-form .input { border: 1px solid var(--presto-taupe) !important; border-radius: var(--presto-radius-soft) !important; min-height: 54px; }


/* 13. Footer
   ========================================================================== */
.site-footer {
	padding: 90px 0 0;
	background: var(--presto-ink);
	color: var(--presto-mist);
	font-size: 15px;
}
.site-footer p { color: var(--presto-mist); font-size: 15px; }
.site-footer .site-brand img { height: 37px; margin-bottom: 26px; }
.site-footer__about { max-width: 360px; }
.site-footer__title {
	font-family: var(--presto-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--presto-rose-clay);
	margin-bottom: 22px;
}
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin-bottom: 10px; }
.site-footer a { color: var(--presto-oyster); text-decoration: none; }
.site-footer a:hover { color: var(--presto-rose-clay); }
.site-footer address { font-style: normal; line-height: 1.8; margin-bottom: 20px; }
.site-footer__contact a { display: block; margin-bottom: 6px; font-weight: 600; }
.site-footer__bottom {
	margin-top: 70px;
	padding: 26px 0;
	border-top: 1px solid rgba(233, 228, 218, .1);
	font-size: 13px;
}
.site-footer__bottom p { margin: 0; font-size: 13px; }
.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; }
.site-footer__legal a { color: var(--presto-mist); }

.social-links { display: flex; gap: 10px; list-style: none; margin: 24px 0 0; padding: 0; }
.social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(233, 228, 218, .2);
	border-radius: var(--presto-radius-soft);
	font-size: 15px;
	color: var(--presto-oyster);
}
.social-links a:hover { border-color: var(--presto-rose-clay); color: var(--presto-rose-clay); }
.social-links .social-svg { display: block; width: 1em; height: 1em; }


/* 14. Misc pages (sitemap, search, 404)
   ========================================================================== */
.sitemap,
.sitemap ul { list-style: none; padding-left: 0; margin: 0; }
.sitemap ul { padding-left: 24px; margin: 6px 0 10px; border-left: 1px solid var(--presto-stone); }
.sitemap li { padding: 5px 0; }
.sitemap a { color: var(--presto-ink); text-decoration: none; font-weight: 500; }
.sitemap > li > a { font-family: var(--presto-font-display); font-size: 22px; font-weight: 600; }
.sitemap a:hover { color: var(--presto-oxblood); }

.search-results-list { list-style: none; margin: 32px 0 0; padding: 0; }
.search-results-list li { border-bottom: 1px solid var(--presto-stone); }
.search-results-list a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 18px 0;
	text-decoration: none;
	color: var(--presto-ink);
}
.search-results-list .title { font-family: var(--presto-font-display); font-size: 24px; font-weight: 600; }
.search-results-list .type { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--presto-oxblood); white-space: nowrap; }
.search-results-list a:hover .title { color: var(--presto-oxblood); }

.error-code {
	display: block;
	font-family: var(--presto-font-display);
	font-size: clamp(120px, 18vw, 240px);
	font-weight: 600;
	line-height: .9;
	color: var(--presto-stone);
}


/* 15. Motion & utilities
   ========================================================================== */
.js .reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s ease, transform .8s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-delay-1 { transition-delay: .1s; }
.js .reveal-delay-2 { transition-delay: .2s; }
.js .reveal-delay-3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
	.js .reveal { opacity: 1; transform: none; transition: none; }
	.kenBurns img { animation: none; }
	.work-card__image img,
	.article-card__image img,
	.service-card { transition: none; }
}

/* Legacy classes still found in CMS content */
.centered { text-align: center; }
.hidden { display: none !important; }
.img-responsive { max-width: 100%; height: auto; }
.notBold { font-weight: 400; }
.mobileBlock { display: inline; }
@media (max-width: 767px) { .mobileBlock { display: block; margin-top: 12px; } }
.slash-divider { padding: 0 6px; color: var(--presto-taupe); }
.clearfix::after { content: ""; display: table; clear: both; }
.img100 { width: 100% !important; }
.noFloat { float: none !important; }
.col-centered { float: none; margin: 0 auto; }

/* Spacing helpers that may still appear in CMS content */
.marTop0 { margin-top: 0 !important; }   .marBot0 { margin-bottom: 0 !important; }
.marTop10 { margin-top: 10px !important; } .marBot10 { margin-bottom: 10px !important; }
.marTop20 { margin-top: 20px !important; } .marBot20 { margin-bottom: 20px !important; }
.marTop30 { margin-top: 30px !important; } .marBot30 { margin-bottom: 30px !important; }
.marTop40 { margin-top: 40px !important; } .marBot40 { margin-bottom: 40px !important; }
.marTop50 { margin-top: 50px !important; } .marBot50 { margin-bottom: 50px !important; }
.marTop60 { margin-top: 60px !important; } .marBot60 { margin-bottom: 60px !important; }
.padTop0 { padding-top: 0 !important; }   .padBot0 { padding-bottom: 0 !important; }


/* 16. Third-party modules (PrivacyWire, reCAPTCHA, FormBuilder lists, Brevo)
   ========================================================================== */
.privacywire {
	padding: 24px !important;
	background: var(--presto-ink) !important;
	color: var(--presto-oyster);
	text-align: center;
	font-size: 14px;
	box-shadow: 0 -10px 40px rgba(12, 15, 22, .3);
}
.privacywire-header,
.privacywire-body { max-width: 1280px; margin: 0 auto; }
.privacywire-header {
	font-family: var(--presto-font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--presto-oyster);
}
.privacywire-text,
.privacywire p { color: var(--presto-mist); }
.privacywire-buttons { margin-top: 14px; }
.privacywire button {
	margin: 0 8px 8px 0;
	padding: 10px 20px;
	border: 1px solid rgba(233, 228, 218, .45) !important;
	border-radius: var(--presto-radius-soft);
	background: transparent;
	font-size: 14px;
	font-weight: 600;
	color: var(--presto-oyster);
	transition: all .25s ease;
}
.privacywire button:hover { background: var(--presto-oyster); color: var(--presto-ink); }
.privacywire button.allow-all {
	background: var(--presto-oxblood);
	border-color: var(--presto-oxblood) !important;
	color: var(--presto-oyster);
}
.privacywire button.allow-all:hover { background: var(--presto-oxblood-dk); border-color: var(--presto-oxblood-dk) !important; }
.privacywire button:last-of-type { margin-right: 0; }
.privacywire-page-links a { font-size: 12px; color: var(--presto-rose-clay); text-decoration: underline; }
.privacywire-page-links a:hover { color: var(--presto-oyster); }
.privacywire-text ul { display: inline-block; width: auto; margin: 10px auto 5px; padding: 0; list-style: none; text-align: left; }
.privacywire-text ul li input { display: inline-block; margin-right: 10px; accent-color: var(--presto-oxblood); }

.privacyTable { width: 100%; margin-bottom: 1.6em; border-collapse: collapse; font-size: 15px; }
.privacyTable td,
.privacyTable th { padding: 12px 14px; border: 1px solid var(--presto-stone); text-align: left; vertical-align: top; }
.privacyTable th { background: var(--presto-paper); color: var(--presto-ink); }

#Inputfield_recapture,
.form-control.g-recaptcha {
	min-height: 0;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.Inputfields,
.Inputfields li { list-style: none; margin: 0; padding: 0; }
.Inputfields li p { margin: 0; }
.Inputfields .InputfieldSubmit label { display: none; }
.ui-state-error-text { color: var(--presto-oxblood); }

.entry__choice label p { margin-left: 20px; }