/*!
 * First Choice - main stylesheet
 * -----------------------------------------------------------------------------
 * The whole design layer lives here, independent of WordPress and ACF. Nothing in
 * this file knows about field names: PHP decides what to output, CSS decides how
 * it looks. That separation means the design can be reworked without touching a
 * single template, and content can change without touching CSS.
 *
 * CONTENTS
 *   01  Design tokens
 *   02  Reset & base
 *   03  Typography
 *   04  Layout primitives (container, section, grid)
 *   05  Buttons
 *   06  Icons
 *   07  Header & navigation
 *   08  Hero
 *   09  About / split sections
 *   10  Cards
 *   08f Client reviews (.reviews)
 *   08g Industries we serve (.industries)
 *   08h Latest blog (.blog)
 *   08i About banner (.abb)
 *   08j What you get (.offer)
 *   08k Vision & mission (.vm)
 *   08l Leadership (.lead-fc)
 *   11  Sections (services, features, stats, process, CTA)
 *   12  Page banner & breadcrumbs
 *   13a Lets connect (.connect)
 *   13c Contacts / offices (.offices)
 *   13b Stay connected (.stay)
 *   13  Contact, form & map
 *   14a Blog page (.blogx)
 *   14b FAQ page (.faq)
 *   14  Blog, sidebar, widgets, pagination, comments
 *   15  Footer
 *   16  Utilities, motion & accessibility
 *   17  Responsive
 * -----------------------------------------------------------------------------
 */

/* =========================================================================
   01  DESIGN TOKENS
   The four colour tokens and the radius can be overridden from
   WP Admin > Theme Settings > Appearance (see inc/enqueue.php).
   ====================================================================== */
:root {
	--fc-primary: #0b5cd5;
	--fc-secondary: #0f2a4a;
	--fc-accent: #f59e0b;
	--fc-dark: #0f172a;

	--fc-primary-dark: color-mix(in srgb, var(--fc-primary) 82%, #000);
	--fc-primary-soft: color-mix(in srgb, var(--fc-primary) 10%, #fff);
	--fc-primary-line: color-mix(in srgb, var(--fc-primary) 24%, #fff);

	--fc-text: #4a5568;
	--fc-heading: var(--fc-dark);
	--fc-muted: #718096;
	--fc-bg: #ffffff;
	--fc-bg-soft: #f5f8fc;
	--fc-border: #e3e9f2;

	--fc-radius: 12px;
	--fc-radius-sm: 8px;
	--fc-radius-lg: 20px;
	--fc-radius-pill: 999px;

	--fc-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
	--fc-shadow: 0 4px 12px rgba(15, 23, 42, .06), 0 12px 32px rgba(15, 23, 42, .06);
	--fc-shadow-lg: 0 16px 48px rgba(15, 23, 42, .12);

	--fc-container: 1200px;
	--fc-container-wide: 2280px;
	--fc-container-narrow: 820px;
	--fc-gutter: 24px;
	--fc-section-y: clamp(64px, 8vw, 112px);

	--fc-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--fc-font-heading: var(--fc-font);

	/* Display + mono faces, used by the editorial hero and the minimal header.
	   Loaded in inc/enqueue.php; both degrade to a sane stack if that is removed. */
	--fc-font-display: "Archivo", "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--fc-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Editorial accent. Overridden per-hero by the Hero > Accent colour field,
	   and site-wide by Theme Settings > Header > Accent colour. */
	--fc-accent-mark: #ce1f28;

	--fc-ease: cubic-bezier(.4, 0, .2, 1);
	--fc-transition: 220ms var(--fc-ease);

	--fc-header-h: 84px;

	/* How tall a logo may stand. It is the logo, not the header's min-height,
	   that decides how tall the header actually is - so this is the knob that
	   matters. */
	--fc-logo-h: 56px;

	/* Footer. A near-black ground with the ink graded in three steps, now
	   running the other way: labels faintest, body text, links at full white.
	   The near-black is the same one the FAQ band uses, so the two dark areas
	   on the site match - change it to #000 for a pure black.

	   The rule and the wordmark are the two faintest values here. The wordmark
	   sits directly behind live text, so it has to stay near-invisible: on a
	   dark ground that means a very low white alpha, not a light grey. */
	--fc-footer-bg: #0d0d0f;
	--fc-footer-label: rgba(255, 255, 255, .48);
	--fc-footer-text: rgba(255, 255, 255, .68);
	--fc-footer-link: #ffffff;
	--fc-footer-rule: rgba(255, 255, 255, .12);
	--fc-footer-mark: rgba(255, 255, 255, .045);

	/* The brand blue is unreadable against the near-black, so footer hovers
	   use the amber accent instead of --fc-primary. */
	--fc-footer-hover: var(--fc-accent);
}

/* Fallback for browsers without color-mix(). */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--fc-primary-dark: #0847a6;
		--fc-primary-soft: #eef4fe;
		--fc-primary-line: #c3d8f8;
	}
}

/* =========================================================================
   02  RESET & BASE
   ====================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--fc-header-h) + 16px);
}

body {
	margin: 0;
	background: var(--fc-bg);
	color: var(--fc-text);
	font-family: var(--fc-font);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* `overflow-x: hidden` turns the body into a scroll container, which stops
   position: sticky working against the viewport - and the sticky header and the
   pinned hero both depend on it. `clip` contains the same overflow without
   creating that container. The hidden rule above stays as the fallback. */
@supports (overflow: clip) {
	body { overflow-x: clip; }
}

body.fc-nav-open { overflow: hidden; }

img,
svg,
video,
iframe { max-width: 100%; }

img,
svg,
video { height: auto; display: block; }

a {
	color: var(--fc-primary);
	text-decoration: none;
	transition: color var(--fc-transition);
}

a:hover,
a:focus-visible { color: var(--fc-primary-dark); }

:focus-visible {
	outline: 3px solid var(--fc-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

ul, ol { padding-left: 1.2em; }

figure { margin: 0; }

hr {
	border: 0;
	border-top: 1px solid var(--fc-border);
	margin: 32px 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 24px;
}

th, td {
	padding: 12px 14px;
	border: 1px solid var(--fc-border);
	text-align: left;
}

th { background: var(--fc-bg-soft); color: var(--fc-heading); }

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .92em;
}

pre {
	background: var(--fc-dark);
	color: #e2e8f0;
	padding: 20px;
	border-radius: var(--fc-radius);
	overflow-x: auto;
}

blockquote {
	margin: 0 0 24px;
	padding: 20px 24px;
	border-left: 4px solid var(--fc-primary);
	background: var(--fc-bg-soft);
	border-radius: 0 var(--fc-radius) var(--fc-radius) 0;
	color: var(--fc-heading);
	font-size: 1.06rem;
}

.site-wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main { flex: 1 0 auto; }

/* =========================================================================
   03  TYPOGRAPHY
   ====================================================================== */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	color: var(--fc-heading);
	font-family: var(--fc-font-heading);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
h4 { font-size: 1.15rem; }
h5 { font-size: 1.02rem; }
h6 { font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: 1.12rem; color: var(--fc-muted); }

/* =========================================================================
   04  LAYOUT PRIMITIVES
   ====================================================================== */
.container {
	width: 100%;
	max-width: var(--fc-container);
	margin-inline: auto;
	padding-inline: var(--fc-gutter);
}

.container--narrow { max-width: var(--fc-container-narrow); }

/* Editorial width: the hero strip sits close to full-bleed, as in the reference. */
/* Editorial width: near full-bleed, matching the reference's 76px inset at
   1920. The max-width is only a backstop for very wide monitors. */
.container--wide {
	max-width: var(--fc-container-wide);
	padding-inline: clamp(20px, 5vw, 80px);
}

.section { padding-block: var(--fc-section-y); }
.section--muted { background: var(--fc-bg-soft); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }

.section__header { margin-bottom: clamp(32px, 4vw, 56px); }

.section__header--center {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.section__header--left { text-align: left; }

.section__eyebrow {
	display: inline-block;
	margin: 0 0 12px;
	padding: 6px 14px;
	background: var(--fc-primary-soft);
	color: var(--fc-primary);
	border-radius: var(--fc-radius-pill);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.section__title { margin-bottom: .4em; }

.section__intro {
	color: var(--fc-muted);
	font-size: 1.05rem;
}

.section__intro p:last-child { margin-bottom: 0; }

.section__actions {
	margin-top: clamp(32px, 4vw, 48px);
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}

.section__actions--left { justify-content: flex-start; }

/* Grid: the column count is chosen in PHP by fc_grid_class() based on how many
   items are actually filled in, so a 2-card row never stretches across 4 slots. */
.grid {
	display: grid;
	gap: clamp(20px, 2.4vw, 30px);
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.layout-with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.layout-with-sidebar--full { grid-template-columns: minmax(0, 1fr); }

/* =========================================================================
   05  BUTTONS
   ====================================================================== */
.btn {
	--btn-bg: var(--fc-primary);
	--btn-fg: #fff;
	--btn-bd: var(--fc-primary);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 26px;
	border: 1px solid var(--btn-bd);
	border-radius: var(--fc-radius-pill);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: transform var(--fc-transition), box-shadow var(--fc-transition),
	            background-color var(--fc-transition), color var(--fc-transition),
	            border-color var(--fc-transition);
}

.btn:hover,
.btn:focus-visible {
	color: var(--btn-fg);
	transform: translateY(-2px);
	box-shadow: var(--fc-shadow);
}

.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--fc-primary); --btn-bd: var(--fc-primary); --btn-fg: #fff; }
.btn--primary:hover { --btn-bg: var(--fc-primary-dark); --btn-bd: var(--fc-primary-dark); }

.btn--ghost { --btn-bg: transparent; --btn-bd: var(--fc-border); --btn-fg: var(--fc-heading); }
.btn--ghost:hover { --btn-bd: var(--fc-primary); --btn-fg: var(--fc-primary); }

.btn--accent { --btn-bg: var(--fc-accent-mark); --btn-bd: var(--fc-accent-mark); --btn-fg: #fff; }
.btn--accent:hover { --btn-bg: #a81820; --btn-bd: #a81820; }

.btn--dark { --btn-bg: var(--fc-dark); --btn-bd: var(--fc-dark); --btn-fg: #fff; }
.btn--dark:hover { --btn-bg: var(--fc-accent-mark); --btn-bd: var(--fc-accent-mark); }

.btn--light { --btn-bg: #fff; --btn-bd: #fff; --btn-fg: var(--fc-primary); }
.btn--light:hover { --btn-fg: var(--fc-primary-dark); }

.btn--outline-light { --btn-bg: transparent; --btn-bd: rgba(255, 255, 255, .55); --btn-fg: #fff; }
.btn--outline-light:hover { --btn-bd: #fff; --btn-bg: rgba(255, 255, 255, .12); }

.btn--lg { padding: 16px 32px; font-size: 1rem; }
.btn--sm { padding: 10px 20px; font-size: .875rem; }
.btn--block { display: flex; width: 100%; }

.btn__icon {
	width: 16px;
	height: 16px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
	transition: transform var(--fc-transition);
}

.btn:hover .btn__icon { transform: translateX(4px); }

/* =========================================================================
   06  ICONS
   Single-colour masked SVGs: they inherit currentColor, so an icon always
   matches the text it sits beside, in any section, with no image files.
   ====================================================================== */
:root {
	--icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	--icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
	--icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E");
	--icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
	--icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
	--icon-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9.5 5C6.5 6.7 5 9.4 5 13v6h6v-6H8c0-2.4.8-4.1 2.5-5.2zm9 0C15.5 6.7 14 9.4 14 13v6h6v-6h-3c0-2.4.8-4.1 2.5-5.2z'/%3E%3C/svg%3E");
	--icon-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l5-5 3.5 3.5L20 8'/%3E%3Cpath d='M15 8h5v5'/%3E%3C/svg%3E");
	--icon-award: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 6H4v1a4 4 0 0 0 4 4'/%3E%3Cpath d='M17 6h3v1a4 4 0 0 1-4 4'/%3E%3Cpath d='M12 14v3'/%3E%3Cpath d='M8 20h8'/%3E%3C/svg%3E");
	--icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E");
	--icon-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14 9V7.5c0-.8.2-1.2 1.3-1.2H17V3h-2.8C10.9 3 10 4.6 10 7v2H7.5v3.5H10V21h4v-8.5h2.7l.4-3.5z'/%3E%3C/svg%3E");
	--icon-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E");
	--icon-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.1c.5-1 1.8-2 3.7-2 4 0 4.7 2.5 4.7 5.8V21H17v-5.6c0-1.3 0-3-1.9-3s-2.1 1.4-2.1 2.9V21H9z'/%3E%3C/svg%3E");
	--icon-twitter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.5 3h3.2l-7 8 8.2 10h-6.4l-5-6.1-5.7 6.1H1.6l7.5-8.5L1.2 3h6.6l4.5 5.6zm-1.1 16h1.8L7.7 4.8H5.8z'/%3E%3C/svg%3E");
	--icon-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M23 12s0-3.5-.4-5.2a2.8 2.8 0 0 0-2-2C18.9 4.4 12 4.4 12 4.4s-6.9 0-8.6.4a2.8 2.8 0 0 0-2 2C1 8.5 1 12 1 12s0 3.5.4 5.2a2.8 2.8 0 0 0 2 2c1.7.4 8.6.4 8.6.4s6.9 0 8.6-.4a2.8 2.8 0 0 0 2-2C23 15.5 23 12 23 12zM9.8 15.4V8.6l5.9 3.4z'/%3E%3C/svg%3E");
	--icon-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .1-1.7-.1a12 12 0 0 1-5.2-4.5c-.4-.6-.9-1.5-.9-2.4s.5-1.4.7-1.6a.8.8 0 0 1 .6-.3h.4c.2 0 .4 0 .6.4l.8 1.9c.1.2 0 .4-.1.5l-.3.4c-.1.2-.3.3-.1.6a8 8 0 0 0 3.5 3c.3.1.4.1.6-.1l.7-.8c.2-.2.3-.2.6-.1l1.8.9c.3.1.4.2.5.3s.1.6-.1 1.2z'/%3E%3C/svg%3E");
}

.icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--i) center / contain no-repeat;
	mask: var(--i) center / contain no-repeat;
	vertical-align: -3px;
}

.icon--arrow { --i: var(--icon-arrow); }
.icon--check { --i: var(--icon-check); }
.icon--phone { --i: var(--icon-phone); }
.icon--mail { --i: var(--icon-mail); }
.icon--clock { --i: var(--icon-clock); }
.icon--pin { --i: var(--icon-pin); }
.icon--search { --i: var(--icon-search); }
.icon--chart { --i: var(--icon-chart); }
.icon--award { --i: var(--icon-award); }
.icon--facebook { --i: var(--icon-facebook); }
.icon--instagram { --i: var(--icon-instagram); }
.icon--linkedin { --i: var(--icon-linkedin); }
.icon--twitter { --i: var(--icon-twitter); }
.icon--youtube { --i: var(--icon-youtube); }
.icon--whatsapp { --i: var(--icon-whatsapp); }

/* =========================================================================
   07  HEADER & NAVIGATION
   ====================================================================== */
.site-header {
	position: relative;
	z-index: 100;
	background: #fff;
}

.site-header--sticky {
	position: sticky;
	top: 0;
}

.site-header.is-stuck {
	box-shadow: var(--fc-shadow-sm);
	background: #fff;
}

.site-header.is-stuck .topbar { display: none; }

/* --- Top bar --- */
.topbar {
	background: var(--fc-secondary);
	color: rgba(255, 255, 255, .82);
	font-size: .85rem;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 44px;
	flex-wrap: wrap;
}

.topbar__contact {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

.topbar__contact a,
.topbar__note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
}

.topbar__contact a:hover { color: #fff; }
.topbar .icon { width: 15px; height: 15px; opacity: .75; }

/* --- Main header row --- */
.header-main { border-bottom: 1px solid var(--fc-border); }
.site-header.is-stuck .header-main { border-bottom-color: transparent; }

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

/*
 * `flex`, not `inline-flex`. As an inline-level box this sat on the line's
 * text baseline, and the strut's descender space below that baseline became
 * roughly 9px of empty height underneath the logo that nothing could see -
 * enough to leave the mark sitting visibly low once the row was centred.
 * A block-level flex container has no line box, so the link is exactly as
 * tall as the logo.
 */
.site-brand__link {
	display: flex;
	align-items: center;
	gap: 10px;
}

.site-brand__logo { width: 170px; height: auto; }
.site-brand img { height: auto; }

/*
 * Two different logos can land here: the theme's own (Theme Settings > Header,
 * carrying an inline width) and WordPress's custom logo (Appearance > Logo),
 * which is registered flex-width/flex-height and so renders at whatever size
 * it was uploaded at - 440x113 on this site. Nothing was holding that second
 * one back, so the uploaded file was setting the height of the header.
 *
 * max-height caps both. An <img> with a width and `height: auto` that hits a
 * max-height has its width reduced to match, so the aspect ratio is kept and
 * the inline width from the theme setting still works as a ceiling.
 */
.site-brand__logo,
.site-brand .custom-logo {
	max-height: var(--fc-logo-h);
	max-width: 100%;
}

.site-brand__text {
	color: var(--fc-heading);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -.03em;
}

/* --- Menu --- */
.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu--primary {
	display: flex;
	align-items: center;
	gap: 4px;
}

.menu--primary li { position: relative; }

.menu--primary > li > a {
	display: block;
	padding: 12px 16px;
	border-radius: var(--fc-radius-sm);
	color: var(--fc-heading);
	font-size: .96rem;
	font-weight: 600;
	transition: background-color var(--fc-transition), color var(--fc-transition);
}

.menu--primary > li > a:hover,
.menu--primary > li.current-menu-item > a,
.menu--primary > li.current-menu-ancestor > a,
.menu--primary > li.current_page_item > a {
	background: var(--fc-primary-soft);
	color: var(--fc-primary);
}

/* Dropdowns */
.menu--primary .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 30;
	min-width: 232px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius);
	box-shadow: var(--fc-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--fc-transition), transform var(--fc-transition), visibility var(--fc-transition);
}

.menu--primary li:hover > .sub-menu,
.menu--primary li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.menu--primary .sub-menu .sub-menu { top: -8px; left: 100%; }

.menu--primary .sub-menu a {
	display: block;
	padding: 9px 14px;
	border-radius: var(--fc-radius-sm);
	color: var(--fc-text);
	font-size: .92rem;
	font-weight: 500;
}

.menu--primary .sub-menu a:hover {
	background: var(--fc-bg-soft);
	color: var(--fc-primary);
}

.menu--primary .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.site-nav__cta { display: none; }

/* --- Mobile toggle --- */
.nav-toggle {
	display: none;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-sm);
	background: #fff;
	cursor: pointer;
}

.nav-toggle__bars {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	height: 100%;
	padding: 0 12px;
}

.nav-toggle__bars span {
	display: block;
	height: 2px;
	background: var(--fc-heading);
	border-radius: 2px;
	transition: transform var(--fc-transition), opacity var(--fc-transition);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   07b  MINIMAL HEADER
   Theme Settings > Header > Header style = "Minimal". Accent rule on top,
   logo left, a centred location label, and the menu behind the toggle at every
   width - so the navigation never competes with the hero type.
   ---------------------------------------------------------------------- */
.site-header__rule {
	height: 5px;
	background: var(--fc-accent-mark);
}

.site-header--minimal .header-main { border-bottom: 0; }

/* The header carries .container--wide in the markup, so its edges are the
   same ones the hero strip is measured against. */

.site-header--minimal .header-main__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	min-height: clamp(56px, 4.5vw, 72px);
}

/*
 * The uploaded logo has more white space baked into the file below the artwork
 * than above it, so a perfectly centred box still reads as low. This lifts the
 * mark by that difference. It is optical, not structural: set it to 0 if the
 * logo is ever replaced with a tightly cropped file.
 */
.site-header--minimal .site-brand__link {
	position: relative;
	top: -6px;
}

.site-header--minimal .site-brand { justify-self: start; }
.site-header--minimal .header-actions { justify-self: end; }

.header-tagline {
	margin: 0;
	font-family: var(--fc-font-mono);
	font-size: clamp(.7rem, .82vw, .82rem);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	color: var(--fc-dark);
	text-wrap: balance;
}

/* The toggle is the only navigation affordance here, so it is always shown and
   the inline menu and CTA step aside. */
.site-header--minimal .nav-toggle { display: block; border-color: transparent; }
.site-header--minimal .nav-toggle:hover { border-color: var(--fc-border); }
.site-header--minimal .header-actions__cta { display: none; }
.site-header--minimal .site-nav__cta { display: block; margin-top: 20px; }

.site-header--minimal .nav-toggle__bars { gap: 7px; padding: 0 8px; }
.site-header--minimal .nav-toggle__bars span { height: 3px; }
.site-header--minimal .nav-toggle__bars span:nth-child(2) { width: 68%; margin-left: auto; }

/* The inline menu belongs to the classic header on desktop and nowhere else.
   Everywhere else the toggle opens the full-screen panel instead, so the drawer
   this used to slide out is gone rather than hidden behind it. */
.site-header--minimal .site-nav { display: none; }

/* =========================================================================
   07b  FULL-SCREEN MENU  (.fsmenu)

   What the header toggle opens: a dark panel over the whole viewport, numbered
   navigation down the left, social and contact down the right.

   It is a modal. `hidden` while closed is what keeps it out of the tab order and
   away from screen readers - opacity alone would leave every link reachable by
   Tab behind a panel nobody can see. The script removes `hidden` before the
   animation and restores it after.
   ====================================================================== */

.fsmenu {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	overflow-y: auto;
	color: #fff;
}

.fsmenu[hidden] { display: none; }

/* The ground, on its own layer so it can arrive ahead of the words: the panel
   wipes down from the top edge, then the links come up through it. */
.fsmenu__veil {
	position: fixed;
	inset: 0;
	background: #0b0c0e;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 520ms cubic-bezier(.76, 0, .24, 1);
}

.fsmenu.is-open .fsmenu__veil { transform: scaleY(1); }

.fsmenu__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100%;
	padding: clamp(20px, 3vw, 40px) clamp(20px, 5vw, 80px) clamp(40px, 5vw, 72px);
	/* Clips the wordmark below, which is taller than the space left for it. */
	overflow: clip;
}

/* clip is not universal; hidden does the same job here, and the panel has no
   scrollable overflow of its own to lose by it. */
@supports not (overflow: clip) {
	.fsmenu__inner { overflow: hidden; }
}

/* -------------------------------------------------------------------------
   Wordmark

   The footer's oversized site name, repeated across the foot of the open panel
   so it is not a bare black sheet behind the links. It is deliberately larger
   than the room left for it and runs off the bottom edge - that is what the
   clip on .fsmenu__inner above is for. Layered by z-index rather than a
   negative index, which would drop it behind the veil and lose it entirely.
   ---------------------------------------------------------------------- */
.fsmenu__mark {
	position: absolute;
	left: 50%;
	bottom: -.18em;
	z-index: 0;
	transform: translateX(-50%);
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(3.5rem, 13vw, 10rem);
	font-weight: 800;
	line-height: .8;
	letter-spacing: -.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .06);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	opacity: 0;
	transition: opacity 520ms var(--fc-ease) 300ms;
}

.fsmenu.is-open .fsmenu__mark { opacity: 1; }

/* Everything else on the panel rides above the mark. */
.fsmenu__close,
.fsmenu__grid { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   Close
   ---------------------------------------------------------------------- */

.fsmenu__close {
	align-self: flex-end;
	width: 48px;
	height: 48px;
	padding: 0;
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 260ms var(--fc-ease) 260ms, transform var(--fc-transition);
}

.fsmenu.is-open .fsmenu__close { opacity: 1; }
.fsmenu__close:hover { transform: rotate(90deg); }

/* Drawn from two rules rather than a glyph, so it takes the colour around it
   and never depends on a font carrying the character. */
.fsmenu__close-mark {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.fsmenu__close-mark::before,
.fsmenu__close-mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 2px;
	background: currentColor;
}

.fsmenu__close-mark::before { transform: translate(-50%, -50%) rotate(45deg); }
.fsmenu__close-mark::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* -------------------------------------------------------------------------
   Layout
   ---------------------------------------------------------------------- */

/* The links sit on the optical centre of the panel and the aside runs along the
   same line, right-aligned - which is what keeps the two columns reading as one
   spread rather than as a menu with a footer stuck to it. */
.fsmenu__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(32px, 6vw, 96px);
	flex: 1;
}

/* -------------------------------------------------------------------------
   The numbered links
   ---------------------------------------------------------------------- */

.fsmenu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each item comes up a beat after the one above it. --fs-i carries its position,
   so the stagger needs no per-item rule and no script. */
.fsmenu__item {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 420ms var(--fc-ease), transform 420ms var(--fc-ease);
	transition-delay: calc(260ms + (var(--fs-i, 0) * 60ms));
}

.fsmenu.is-open .fsmenu__item {
	opacity: 1;
	transform: none;
}

.fsmenu__link {
	display: flex;
	align-items: baseline;
	gap: clamp(14px, 1.6vw, 26px);
	padding: clamp(4px, .6vw, 9px) 0;
	color: #fff;
	text-decoration: none;
	transition: color var(--fc-transition);
}

.fsmenu__num {
	flex: none;
	font-family: var(--fc-font-mono);
	font-size: clamp(.72rem, 1vw, .86rem);
	color: rgba(255, 255, 255, .42);
	letter-spacing: .06em;
	transition: color var(--fc-transition);
}

.fsmenu__label {
	font-family: var(--fc-font-display);
	font-size: clamp(1.9rem, 5.2vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

.fsmenu__link:hover,
.fsmenu__link:focus-visible { color: var(--cat-red, #8b1219); }

.fsmenu__link:hover .fsmenu__num,
.fsmenu__link:focus-visible .fsmenu__num { color: var(--cat-red, #8b1219); }

/* On a ground this dark the default outline barely reads. */
.fsmenu a:focus-visible,
.fsmenu button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 6px;
}

/* -------------------------------------------------------------------------
   Social and contact
   ---------------------------------------------------------------------- */

.fsmenu__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(24px, 3vw, 40px);
	text-align: right;
}

.fsmenu__social {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Starts after the links have begun, so the eye is led left to right. */
.fsmenu__social-item {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 380ms var(--fc-ease), transform 380ms var(--fc-ease);
	transition-delay: calc(420ms + (var(--fs-i, 0) * 50ms));
}

.fsmenu.is-open .fsmenu__social-item {
	opacity: 1;
	transform: none;
}

.fsmenu__social-link {
	display: inline-block;
	padding: 5px 0;
	color: rgba(255, 255, 255, .74);
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--fc-transition);
}

.fsmenu__social-link:hover,
.fsmenu__social-link:focus-visible { color: #fff; }

.fsmenu__contact {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-style: normal;
	opacity: 0;
	transition: opacity 380ms var(--fc-ease) 620ms;
}

.fsmenu.is-open .fsmenu__contact { opacity: 1; }

.fsmenu__contact-link {
	color: rgba(255, 255, 255, .62);
	font-size: .92rem;
	text-decoration: none;
	transition: color var(--fc-transition);
}

.fsmenu__contact-link:hover,
.fsmenu__contact-link:focus-visible { color: #fff; }

/* The panel covers the page, so the page behind it must not scroll under it. */
body.fc-nav-open { overflow: hidden; }

/* The toggle already turns into a cross while the panel is open - that is on
   .nav-toggle[aria-expanded="true"] up in the header block, and the script sets
   the attribute, so nothing is needed here. */

/* Stacked, the aside follows the links rather than sitting beside them - at this
   width a second column leaves the link labels no room to be large, which is the
   whole point of the panel. */
@media (max-width: 860px) {
	.fsmenu__grid {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: clamp(32px, 8vw, 56px);
		padding-block: clamp(24px, 6vw, 48px);
	}

	.fsmenu__aside {
		align-items: flex-start;
		text-align: left;
	}
}

/* The wipe and the stagger are the whole of the movement. Without them the panel
   still opens and closes - it simply arrives rather than travels. */
@media (prefers-reduced-motion: reduce) {
	.fsmenu__veil,
	.fsmenu__item,
	.fsmenu__social-item,
	.fsmenu__contact,
	.fsmenu__mark,
	.fsmenu__close {
		transition-duration: 1ms;
		transition-delay: 0ms;
	}

	.fsmenu__veil { transform: scaleY(1); }
	.fsmenu__close:hover { transform: none; }
}


/* =========================================================================
   08  HERO
   ====================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(56px, 7vw, 104px);
	background: linear-gradient(180deg, var(--fc-primary-soft) 0%, #fff 78%);
	background-size: cover;
	background-position: center;
}

.hero--has-bg { background-image: none; }
.hero--has-bg .hero__title,
.hero--has-bg .hero__text,
.hero--has-bg .hero__point { color: #fff; }
.hero--has-bg .hero__eyebrow { color: rgba(255, 255, 255, .85); }

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15, 23, 42, .86) 0%, rgba(15, 23, 42, .58) 60%, rgba(15, 23, 42, .35) 100%);
}

.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: center;
	gap: clamp(32px, 5vw, 64px);
}

.hero--center .hero__inner {
	grid-template-columns: minmax(0, 1fr);
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
}

.hero--center .hero__actions,
.hero--center .hero__points { justify-content: center; }

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 7px 16px;
	background: #fff;
	border: 1px solid var(--fc-primary-line);
	border-radius: var(--fc-radius-pill);
	color: var(--fc-primary);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	box-shadow: var(--fc-shadow-sm);
}

.hero__eyebrow {
	margin: 0 0 10px;
	color: var(--fc-primary);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hero__title {
	margin-bottom: .45em;
	font-size: clamp(2.1rem, 4.8vw, 3.5rem);
	line-height: 1.1;
}

.hero__text {
	max-width: 56ch;
	color: var(--fc-muted);
	font-size: 1.1rem;
}

.hero--center .hero__text { margin-inline: auto; }

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px;
}

.hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.hero__point {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--fc-heading);
	font-size: .93rem;
	font-weight: 600;
}

.hero__point .icon { color: var(--fc-primary); width: 16px; height: 16px; }
.hero--has-bg .hero__point .icon { color: var(--fc-accent); }

.hero__media { position: relative; }

.hero__media-frame {
	position: relative;
	border-radius: var(--fc-radius-lg);
	overflow: hidden;
	box-shadow: var(--fc-shadow-lg);
}

.hero__media-frame::after {
	content: "";
	position: absolute;
	inset: auto -40px -60px auto;
	width: 220px;
	height: 220px;
	background: var(--fc-primary);
	opacity: .08;
	border-radius: 50%;
}

.hero__image { width: 100%; object-fit: cover; }

/* -------------------------------------------------------------------------
   08b  TWO-ACT HERO  (.hero-fc)

   Act one is the image strip and the oversized brand type. Act two is the
   split positioning statement. Scrolling carries the strip from one to the
   other: the frames line up, fly right, and merge into the single image.

   Everything below the "animated state" heading is enhancement. Without it the
   two acts are simply stacked sections, which is what renders with JavaScript
   off, on a narrow screen, or under reduced motion.
   ---------------------------------------------------------------------- */
.hero-fc {
	--hero-accent: #ce1f28;
	--hero-bg: #fbe4d4;
	--hero-bg-top: #ffffff;
	--hero-ink: #3d1f13;
	--hero-muted: #815a48;
	--hero-card-from: #e0424c;
	--hero-card-to: #96131c;

	position: relative;
	background: var(--hero-bg-top);
	color: var(--hero-ink);
}

.hero-fc__stage { position: relative; }
.hero-fc__wash { display: none; }

/* --- The strip ---------------------------------------------------------- */
.hero-fc__strip-wrap { padding-top: clamp(22px, 3vw, 46px); }

.hero-fc__frames {
	display: flex;
	align-items: flex-start;
	gap: clamp(8px, 1vw, 18px);
}

.hero-fc__frame {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border-radius: 0;
	background: color-mix(in srgb, var(--hero-ink) 8%, transparent);
	aspect-ratio: 100 / 132;
}

/* Slot shapes: tall, wide, tall, medium, tall. */
.hero-fc__frame--1 { aspect-ratio: 100 / 132; }
.hero-fc__frame--2 { aspect-ratio: 100 / 76; }
.hero-fc__frame--3 { aspect-ratio: 100 / 132; }
.hero-fc__frame--4 { aspect-ratio: 100 / 96; }
.hero-fc__frame--5 { aspect-ratio: 100 / 132; }

.hero-fc__frame-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.04);
}

/* =========================== ACT ONE =================================== */
.hero-act--type { padding-block: clamp(44px, 7vw, 116px) clamp(40px, 6vw, 78px); }

.hero-ed__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(2px, .6vw, 12px);
	margin: 0;
	font-family: var(--fc-font-display);
	font-weight: 900;
	font-size: var(--hero-type-size, min(11.2vw, 19vh));
	line-height: .84;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: var(--hero-ink);
	text-wrap: nowrap;
}

.hero-ed__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 2.4vw, 46px);
}

/* The words sit together as one phrase; the row gap separates them from the
   signature. Both are in em, so the whole line scales as a unit when the script
   fits it to the container. */
.hero-ed__words {
	display: flex;
	align-items: flex-start;
	gap: .22em;
}

.hero-ed__word { display: block; }

.hero-ed__reg {
	font-size: .17em;
	line-height: 1;
	letter-spacing: 0;
	padding-top: .25em;
}

/* --- The drawn signature --- */
.hero-ed__sign {
	display: block;
	flex: 0 0 auto;
	width: 2.7em;
	color: var(--hero-accent);
	transform: translateY(.06em);
}

.hero-ed__sign-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-ed__sign-img { width: 100%; height: auto; object-fit: contain; }

/* The artwork's path length is fixed, so the dash values can be literal. The
   script re-measures anyway, in case the drawing is ever edited. */
.fc-js:not(.fc-no-js) .hero-ed__sign-path {
	stroke-dasharray: 1125;
	stroke-dashoffset: 1125;
}

.fc-js:not(.fc-no-js) .hero-ed__sign-path.is-drawn {
	animation: fc-draw 1700ms cubic-bezier(.65, 0, .35, 1) forwards;
}

@keyframes fc-draw {
	to { stroke-dashoffset: 0; }
}

/* --- The services line --- */
.hero-ed__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 18px clamp(24px, 4vw, 64px);
	margin-top: clamp(24px, 3.2vw, 48px);
	padding-top: clamp(18px, 2.2vw, 30px);
	border-top: 1px solid color-mix(in srgb, var(--hero-ink) 16%, transparent);
}

.hero-ed__services {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px clamp(20px, 3.2vw, 56px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero-ed__service {
	font-family: var(--fc-font-mono);
	font-size: clamp(.78rem, 1.05vw, .95rem);
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.hero-ed__service::after {
	content: "/";
	margin-left: .35em;
	color: var(--hero-accent);
}

/* =========================== ACT TWO =================================== */
.hero-act--split {
	background: var(--hero-bg);
	padding-block: clamp(48px, 6vw, 88px);
}

.hero-fc__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	align-items: center;
	gap: clamp(32px, 5vw, 76px);
}

.hero-fc__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
	color: var(--hero-accent);
	font-family: var(--fc-font-mono);
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.hero-fc__eyebrow::before {
	content: "";
	width: 34px;
	height: 2px;
	flex: none;
	background: currentColor;
}

.hero-fc__title {
	margin: 0 0 24px;
	max-width: 15ch;
	font-family: var(--fc-font-display);
	font-size: clamp(2.3rem, 4.4vw, 3.9rem);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -.035em;
	color: var(--hero-ink);
	text-wrap: balance;
}

.hero-fc__text {
	margin: 0;
	max-width: 46ch;
	color: var(--hero-muted);
	font-size: clamp(1rem, 1.15vw, 1.09rem);
	line-height: 1.75;
}

.hero-fc__proof {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: clamp(26px, 3vw, 40px);
	padding-block: clamp(18px, 2vw, 26px);
	border-top: 1px solid color-mix(in srgb, var(--hero-ink) 16%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--hero-ink) 16%, transparent);
}

.avatars { display: flex; margin: 0; padding: 0; list-style: none; }

.avatars__item {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--hero-bg);
	background: var(--hero-card-from);
}

.avatars__item + .avatars__item { margin-left: -14px; }
.avatars__img { width: 100%; height: 100%; object-fit: cover; }

.hero-fc__stat { margin: 0; display: flex; flex-direction: column; }

.hero-fc__stat-value {
	font-family: var(--fc-font-display);
	font-size: clamp(1.5rem, 2.1vw, 1.95rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
}

.hero-fc__stat-label {
	margin-top: 4px;
	font-family: var(--fc-font-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hero-muted);
}

.hero-fc__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 34px;
	margin-top: clamp(24px, 3vw, 36px);
}

/* Pill button with the arrow set in its own disc. */
.btn--hero {
	--btn-bg: var(--hero-ink);
	--btn-bd: var(--hero-ink);
	--btn-fg: #fff;

	gap: 16px;
	padding: 12px 12px 12px 30px;
	font-size: 1rem;
}

.btn--hero:hover { --btn-bg: #2b140b; --btn-bd: #2b140b; }

.btn--hero .btn__icon {
	position: relative;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: color-mix(in srgb, #fff 22%, transparent);
	-webkit-mask: none;
	mask: none;
}

.btn--hero .btn__icon::after {
	content: "";
	position: absolute;
	inset: 11px;
	background-color: #fff;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
	transform: rotate(-45deg);
}

.btn--hero:hover .btn__icon { transform: none; }

.hero-fc__link {
	color: var(--hero-ink);
	font-size: 1rem;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 5px;
	transition: text-decoration-color var(--fc-transition);
}

.hero-fc__link:hover { color: var(--hero-ink); text-decoration-color: currentColor; }

/* --- The card the strip lands in --- */
.hero-fc__visual { position: relative; }

.hero-fc__card {
	position: relative;
	aspect-ratio: 100 / 84;
	border-radius: 28px;
	overflow: hidden;
}

/* The gradient is its own layer so it can fade in as the strip arrives. */
/* Two layers, as in the reference: a diagonal orange ramp from a bright top
   corner down to a deep burnt edge, with a soft warm glow sitting behind where
   the subject's head falls. */
.hero-fc__card-bg {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		radial-gradient(115% 78% at 50% 16%, rgba(255, 209, 164, .38), transparent 62%),
		linear-gradient(168deg,
			var(--hero-card-from) 0%,
			color-mix(in srgb, var(--hero-card-from) 55%, var(--hero-card-to)) 42%,
			var(--hero-card-to) 82%,
			color-mix(in srgb, var(--hero-card-to) 82%, #000) 100%);
	box-shadow: 0 24px 60px color-mix(in srgb, var(--hero-card-to) 26%, transparent);
}

/* Centred and stood on the floor of the card, the way a cut-out portrait sits
   on the reference panel - not stretched across it. Upload a subject on a
   transparent background and it will drop straight in. */
.hero-fc__card-media {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: min(72%, 520px);
	height: 92%;
	transform: translateX(-50%);
}

.hero-fc__card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	/* Feathers the foot of a rectangular photograph into the gradient. A cut-out
	   PNG is barely touched by this. */
	-webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
}

/* --- Floating panels --- */
.hero-panel { position: absolute; z-index: 2; border-radius: 18px; }

.hero-panel--checks {
	top: clamp(14px, 2.4vw, 26px);
	right: clamp(14px, 2.4vw, 26px);
	max-width: 62%;
	padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.8vw, 24px);
	background: var(--hero-ink);
	color: #fff;
}

.hero-panel__list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }

.hero-panel__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: clamp(.85rem, .95vw, .96rem);
	line-height: 1.4;
}

.hero-panel__item .icon { width: 17px; height: 17px; margin-top: 2px; color: #ffd9c2; }

/* Anchored to the bottom-right corner and only as wide as the figures need,
   rather than stretched across the whole card. */
.hero-panel--metrics {
	left: auto;
	right: clamp(14px, 2.4vw, 26px);
	bottom: clamp(14px, 2.4vw, 26px);
	max-width: calc(100% - 2 * clamp(14px, 2.4vw, 26px));
	display: grid;
	grid-template-columns: repeat(2, auto);
	background: #fdece0;
	box-shadow: 0 12px 30px rgba(61, 31, 19, .18);
	overflow: hidden;
}

.hero-metric {
	display: flex;
	align-items: center;
	gap: clamp(8px, .8vw, 12px);
	padding: clamp(10px, 1.1vw, 14px) clamp(12px, 1.3vw, 17px);
}

.hero-metric__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: clamp(30px, 2.1vw, 38px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: color-mix(in srgb, var(--hero-accent) 16%, transparent);
	color: var(--hero-accent);
}

.hero-metric__icon .icon { width: 52%; height: 52%; }

.hero-metric__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.hero-metric + .hero-metric { border-left: 1px solid var(--fc-border); }

.hero-metric__value {
	font-family: var(--fc-font-display);
	font-size: clamp(1.15rem, 1.6vw, 1.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--hero-ink);
}

.hero-metric__label {
	font-size: clamp(.72rem, .82vw, .82rem);
	white-space: nowrap;
	color: var(--hero-muted);
}

/* =====================================================================
   ANIMATED STATE - added by assets/js/fc-theme.js when it can run.
   The stage is pinned, the two acts are stacked on top of each other, and
   the strip is lifted out of flow so the script can fly it across.
   ================================================================== */
.hero-fc--anim .hero-fc__scroll { height: 480vh; }

/* Pinned under the sticky header, not behind it - otherwise the strip has to be
   pushed down by the header's height and ends up colliding with the brand type.
   --fc-hh is published by the script from the header's measured height. */
.hero-fc--anim .hero-fc__stage {
	position: sticky;
	top: var(--fc-hh, 0px);
	height: calc(100vh - var(--fc-hh, 0px));
	overflow: hidden;
}

.hero-fc--anim .hero-fc__wash {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--hero-bg);
	opacity: 0;
}

.hero-fc--anim .hero-fc__strip-wrap {
	position: absolute;
	inset: 0;
	z-index: 3;
	max-width: none;
	padding: 0;
	pointer-events: none;
}

.hero-fc--anim .hero-fc__frames {
	display: block;
	height: 100%;
	contain: layout paint;
}

.hero-fc--anim .hero-fc__frame {
	position: absolute;
	aspect-ratio: auto;
	will-change: left, top, width, height, opacity;
}

.hero-fc--anim .hero-act {
	will-change: opacity, transform;
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	padding-block: 0;
	background: none;
}

.hero-fc--anim .hero-act > .container { width: 100%; }

/* Act one sits low, under the strip, and stays legible while the frames pass
   across it - so it is stacked above them. Act two centres, below them, because
   the frames have to land visibly on its card. */
.hero-fc--anim .hero-act--type {
	z-index: 4;
	align-items: flex-end;
	padding-bottom: clamp(20px, 3.5vh, 46px);
}

.hero-fc--anim .hero-act--split {
	align-items: center;
	pointer-events: none;
}

.hero-fc--anim .hero-ed__foot {
	margin-top: clamp(14px, 2vh, 26px);
	padding-top: clamp(12px, 1.6vh, 22px);
}

.hero-fc--anim .hero-act--split.is-live { pointer-events: auto; }

/* The checklist panel is solid brown rather than frosted glass, so there is no
   backdrop-filter to pay for at any point in the scroll. */
.hero-fc--anim .hero-act--type.is-past { pointer-events: none; }

/* Starting values for everything the script drives. */
.hero-fc--anim .hero-fc__content,
.hero-fc--anim .hero-fc__card-bg,
.hero-fc--anim .hero-fc__card-media,
.hero-fc--anim .hero-panel { opacity: 0; }

/* -------------------------------------------------------------------------
   08c  KEY SERVICES  (.svc)

   A list of services on the right, a pinned preview on the left. The row that
   reaches the middle of the viewport becomes active: it lifts into a solid
   card, and the preview cross-fades to that service's picture and description.

   The pictures and descriptions are all rendered and stacked in a single grid
   cell, so the container sizes itself to the tallest of them and switching is a
   cross-fade with nothing to load. Without the script the first service stays
   active and every row is still a link.
   ---------------------------------------------------------------------- */
.svc {
	--svc-ink: #3d1f13;
	--svc-muted: #815a48;
	--svc-rule: color-mix(in srgb, var(--svc-ink) 11%, transparent);

	padding-block: clamp(48px, 6vw, 92px) clamp(48px, 6vw, 92px);
	background: linear-gradient(180deg,
		var(--hero-bg, #fbe4d4) 0%,
		var(--hero-bg, #fbe4d4) 4%,
		var(--fc-bg) 26%);
	color: var(--svc-ink);
}

.svc .section__header { max-width: none; margin-bottom: clamp(18px, 2vw, 30px); }

.svc .section__title {
	font-family: var(--fc-font-display);
	letter-spacing: -.03em;
	text-wrap: nowrap;
}

/* PINNED STATE - added by the theme script when there is room for it.
   The stage holds still for one step of scroll per service, so the list stays
   whole on screen and only the active card changes. Everything below degrades
   to an ordinary stacked section when the class is absent. */
.svc--pinned { padding-block: 0; }
.svc--pinned .svc__scroll { height: calc(100vh + var(--svc-count, 6) * var(--svc-step, 42vh)); }

.svc--pinned .svc__stage {
	position: sticky;
	top: var(--fc-hh, 96px);
	height: calc(100vh - var(--fc-hh, 96px));
	height: calc(100dvh - var(--fc-hh, 96px));
	display: flex;
	align-items: center;
	overflow: hidden;
}

.svc--pinned .svc__stage > .container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding-block: clamp(16px, 3vh, 34px);
}

.svc--pinned .svc__grid { flex: 1 1 auto; min-height: 0; align-items: center; }

/* The list is taller than the space it is given; this clips it, and the script
   slides the list upward inside as the page scrolls through the section. No
   edge fade: it washed out whichever card happened to sit against the clip. */
.svc--pinned .svc__listwrap {
	height: 100%;
	overflow: hidden;
}

.svc--pinned .svc__list { will-change: transform; }

/* Compact enough that every service is on screen at once - the row rhythm is
   measured in viewport height so it holds on a short window too. */
.svc--pinned .svc__link { padding-block: clamp(26px, 4.4vh, 54px); }
.svc--pinned .svc .section__header,
.svc--pinned .section__header { margin-bottom: clamp(12px, 2vh, 28px); }
/* Bounded by the stage, so on a short window the picture shrinks to fit
   rather than overflowing the clip - the description keeps its height. */
.svc--pinned .svc__preview { max-height: 100%; }
.svc--pinned .svc__media { max-height: min(46vh, 500px); }

.svc__grid {
	display: grid;
	grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
	gap: clamp(24px, 3.4vw, 58px);
	align-items: start;
}

/* --- The pinned preview --- */
/* Capped to the viewport, so the picture and the description are on screen
   together. The picture is the flexible one: it gives up height first, which is
   what keeps the description from being pushed below the fold. */
/* The whole stage is pinned, so the preview just sits in the layout and stays
   put by virtue of nothing around it moving. */
.svc__preview {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(14px, 2vh, 24px);
}

/* The aspect sets the shape; the viewport cap sets the ceiling. Without the
   cap the picture claimed its full aspect height and pushed the description
   below the fold until the column pinned. */
.svc__media {
	position: relative;
	flex: 0 1 auto;
	min-height: 0;
	aspect-ratio: 100 / 112;
	max-height: min(46vh, 520px);
	border-radius: 18px;
	overflow: hidden;
	background: color-mix(in srgb, var(--svc-ink) 8%, transparent);
}

.svc__shot {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 700ms var(--fc-ease), transform 1100ms var(--fc-ease);
}

.svc__shot.is-active { opacity: 1; transform: none; }

.svc__img { width: 100%; height: 100%; object-fit: cover; }

/* Stacking the descriptions in one grid cell lets the block size itself to the
   longest of them, so the list below never shifts as they change. */
/* Shown in full. The descriptions are stacked in one grid cell, so the block
   sizes to the longest of them and nothing shifts as the service changes. */
.svc__copy {
	display: grid;
	flex: 0 0 auto;
}

.svc__text {
	grid-area: 1 / 1;
	margin: 0;
	color: var(--svc-ink);
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 560ms var(--fc-ease), transform 560ms var(--fc-ease);
}

.svc__text.is-active { opacity: 1; transform: none; }

/* --- The list --- */
.svc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: svc;
}

.svc__row { border-bottom: 1px solid var(--svc-rule); }
.svc__row.is-active { border-bottom-color: transparent; }

.svc__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(16px, 2.4vw, 40px);
	padding: clamp(26px, 3.2vw, 44px) clamp(20px, 2.6vw, 36px);
	border-radius: 18px;
	color: var(--svc-ink);
	text-decoration: none;
	transition: background-color 480ms var(--fc-ease), color 480ms var(--fc-ease),
	            box-shadow 480ms var(--fc-ease), transform 480ms var(--fc-ease);
}

.svc__num {
	font-family: var(--fc-font-mono);
	font-size: clamp(.9rem, 1.05vw, 1.05rem);
	font-weight: 500;
	color: var(--svc-muted);
	transition: color 420ms var(--fc-ease);
}

.svc__title {
	font-family: var(--fc-font-display);
	font-size: clamp(1.05rem, 1.7vw, 1.6rem);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
}

.svc__arrow {
	width: clamp(20px, 1.5vw, 26px);
	aspect-ratio: 1;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
	opacity: .55;
	transition: opacity 420ms var(--fc-ease), transform 420ms var(--fc-ease);
}

/* The active row lifts into a solid card. */
.svc__row.is-active .svc__link {
	background: var(--svc-ink);
	color: #fff;
	box-shadow: 0 18px 44px color-mix(in srgb, var(--svc-ink) 26%, transparent);
}

.svc__row.is-active .svc__num { color: rgba(255, 255, 255, .72); }
.svc__row.is-active .svc__arrow { opacity: 1; transform: translateX(4px); }

a.svc__link:hover { color: var(--hero-accent, #ce1f28); }
.svc__row.is-active a.svc__link:hover { color: #fff; }
a.svc__link:hover .svc__arrow { opacity: 1; transform: translateX(4px); }

.svc__actions {
	display: flex;
	justify-content: center;
	margin-top: clamp(36px, 4vw, 60px);
}

@media (prefers-reduced-motion: reduce) {
	.svc__shot,
	.svc__text,
	.svc__link,
	.svc__arrow { transition: none; }
	.svc__shot { transform: none; }
	.svc__text { transform: none; }
}

/* -------------------------------------------------------------------------
   08d  WHY FIRST CHOICE  (.why)

   Two overlapping pictures on the left, the case for the firm on the right.
   The second picture is offset down so the pair reads as a composition rather
   than as two tiles, and an accent bar under the first carries a short claim.
   ---------------------------------------------------------------------- */
.why {
	--why-ink: #3d1f13;
	--why-muted: #6f4c3c;
	--why-accent: var(--hero-accent, #ce1f28);
	--why-tick: #3ea64a;
	--why-dots: #191310;
	--why-plate-x: clamp(10px, 1.4vw, 20px);

	padding-block: clamp(72px, 9vw, 140px);
	background: var(--fc-bg);
	color: var(--why-ink);
	overflow: hidden;
}

.why__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	align-items: center;
	gap: clamp(40px, 6vw, 100px);
}

/* --- The pictures --- */
.why__media {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 3.4vw, 58px);
	align-items: start;
}

.why__col { position: relative; display: flex; flex-direction: column; }

.why__col--b { position: relative; margin-top: clamp(30px, 6vw, 86px); }

/* Offset up and to the right, so it shows along the top and down one side -
   the same device as the red plate under the first picture, mirrored. */
.why__panel {
	position: absolute;
	z-index: 0;
	left: clamp(28px, 3.4vw, 56px);
	right: clamp(-22px, -1.4vw, -12px);
	top: clamp(-34px, -3.6vw, -20px);
	bottom: 18%;
	border-radius: clamp(18px, 2vw, 28px);
	background-color: var(--why-dots);
	background-image: radial-gradient(rgba(255, 255, 255, .22) 1.4px, transparent 1.5px);
	background-size: 14px 14px;
}


/* The accent plate: offset down and to the right of the picture, with the
   deep rounded corner at the bottom left. The claim sits on the strip of it
   left showing beneath the picture. */
.why__plate {
	position: absolute;
	z-index: 0;
	left: var(--why-plate-x);
	right: clamp(-22px, -1.5vw, -12px);
	top: 42%;
	bottom: 0;
	background: var(--why-accent);
	border-radius: 0 0 0 clamp(36px, 4.4vw, 68px);
}

.why__shot {
	margin: 0;
	overflow: hidden;
	background: color-mix(in srgb, var(--why-ink) 8%, transparent);
}

.why__shot--a {
	position: relative;
	z-index: 1;
	aspect-ratio: 3 / 4;
	border-radius: 0;
}

/* The second picture is set in a dark frame and offset down, so the two read
   as one composition rather than as a pair of tiles. */
.why__shot--b {
	position: relative;
	display: grid;
	aspect-ratio: 4 / 5.4;
	padding: 0;
	background: color-mix(in srgb, var(--why-ink) 8%, transparent);
	border-radius: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px);
	box-shadow: 0 22px 50px color-mix(in srgb, var(--why-ink) 22%, transparent);
}

.why__shot--b .why__img {
	border-radius: clamp(16px, 1.8vw, 24px) clamp(34px, 4vw, 62px) clamp(16px, 1.8vw, 24px) clamp(16px, 1.8vw, 24px);
}

.why__img { width: 100%; height: 100%; object-fit: cover; }

/* The accent bar beneath the first picture. */
.why__badge {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: clamp(12px, 1.4vw, 17px) clamp(14px, 1.6vw, 20px) clamp(15px, 1.8vw, 22px);
	padding-left: calc(var(--why-plate-x) + clamp(18px, 2vw, 30px));
	color: #fff;
	font-family: var(--fc-font-mono);
	font-size: clamp(.6rem, .72vw, .7rem);
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* A quiet ring behind the pair, echoing the reference's dotted graphic. */
.why__ring {
	position: absolute;
	right: -14%;
	bottom: -18%;
	z-index: -1;
	width: 46%;
	aspect-ratio: 1;
	border: 1px dashed color-mix(in srgb, var(--why-ink) 18%, transparent);
	border-radius: 50%;
}

/* --- The case --- */
.why__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	padding: 8px 18px 8px 14px;
	background: color-mix(in srgb, var(--why-accent) 10%, transparent);
	border-radius: var(--fc-radius-pill);
	color: var(--why-accent);
	font-family: var(--fc-font-mono);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.why__eyebrow::before {
	content: "";
	width: 26px;
	height: 3px;
	flex: none;
	border-radius: 2px;
	background: currentColor;
}

.why__title {
	margin: 0 0 22px;
	font-family: var(--fc-font-display);
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.03em;
	color: var(--why-ink);
	text-wrap: balance;
}

/* Its own line, so the plain part of the heading reads first. */
.why__accent {
	display: block;
	font-style: normal;
	color: var(--why-accent);
}

.why__lead,
.why__text {
	margin: 0 0 16px;
	color: var(--why-muted);
	font-size: clamp(.98rem, 1.1vw, 1.06rem);
	line-height: 1.75;
}

.why__lead { color: var(--why-ink); }

/* --- Supporting points --- */
.why__points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 1.8vw, 26px) clamp(20px, 2.4vw, 36px);
	margin: clamp(26px, 3vw, 38px) 0 0;
	padding: 0;
	list-style: none;
}

.why__point { display: flex; align-items: flex-start; gap: 14px; }

.why__point-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: clamp(34px, 2.6vw, 44px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--why-tick);
	color: #fff;
}

.why__point-icon .icon { width: 48%; height: 48%; }
.why__point-img { width: 52%; height: 52%; object-fit: contain; }

.why__point-body { display: flex; flex-direction: column; gap: 3px; }

.why__point-title {
	font-family: var(--fc-font-display);
	font-size: clamp(1rem, 1.2vw, 1.12rem);
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--why-ink);
}

.why__point-text {
	color: var(--why-muted);
	font-size: clamp(.9rem, 1vw, .98rem);
	line-height: 1.65;
}

.why__actions { margin-top: clamp(30px, 3.4vw, 44px); }

/* The accent button, as in the reference. */
.btn--accent {
	--btn-bg: var(--hero-accent, #ce1f28);
	--btn-bd: var(--hero-accent, #ce1f28);
	--btn-fg: #fff;

	padding: 14px 30px;
	font-size: .95rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.btn--accent:hover {
	--btn-bg: #a3151d;
	--btn-bd: #a3151d;
}

/* -------------------------------------------------------------------------
   08e  ASK US  (.ask)

   Questions arrive one at a time over a deep red ground; halfway through they
   clear, the photograph slides in from the left and the invitation settles
   beside it.

   Everything below the pinned-state heading is enhancement. Without it the
   questions and the invitation are simply stacked and readable.
   ---------------------------------------------------------------------- */
.ask {
	position: relative;
	padding-block: clamp(72px, 9vw, 130px);
	color: #fff;

	background:
		radial-gradient(
			circle at 75% 45%,
			#b51b22 0%,
			#8a1016 30%,
			transparent 65%
		),
		linear-gradient(
			135deg,
			#180204 0%,
			#4a0609 45%,
			#210204 100%
		);
}

.ask__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(32px, 5vw, 76px);
}

/* --- The questions --- */
.ask__questions {
	grid-column: 1 / -1;
	display: grid;
	gap: clamp(18px, 2.4vw, 34px);
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

.ask__q {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: var(--ask-q-size, clamp(1.8rem, 4vw, 3.6rem));
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -.02em;
	color: #fff;
}

/* --- The photograph --- */
.ask__person {
	margin: 0;
	overflow: hidden;
	border-radius: clamp(18px, 2.2vw, 30px);
	background: rgba(255, 255, 255, .06);
}

.ask__person-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- The invitation --- */
.ask__title {
	margin: 0 0 20px;
	font-family: var(--fc-font-display);
	font-size: clamp(1.5rem, 2.6vw, 2.3rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.025em;
	color: #fff;
	text-wrap: balance;
}

.ask__line {
	margin: 0 0 14px;
	max-width: 52ch;
	color: rgba(255, 255, 255, .84);
	font-size: clamp(1rem, 1.15vw, 1.1rem);
	line-height: 1.75;
}

.ask__actions { margin-top: clamp(26px, 3vw, 38px); }

/* The button reads as light on this ground. */
.ask .btn--light {
	--btn-bg: #fff;
	--btn-bd: #fff;
	--btn-fg: #7a0d12;
}

.ask .btn--light:hover { --btn-bg: #ffe9e9; --btn-bd: #ffe9e9; }

/* =====================================================================
   PINNED STATE - added by the theme script when there is room for it.
   ================================================================== */
.ask--pinned .ask__scroll { height: calc(100vh + 200vh); }

.ask--pinned .ask__stage {
	position: sticky;
	top: var(--fc-hh, 96px);
	height: calc(100vh - var(--fc-hh, 96px));
	height: calc(100dvh - var(--fc-hh, 96px));
	display: flex;
	align-items: center;
	overflow: hidden;
}

.ask--pinned { padding-block: 0; }
.ask--pinned .ask__stage > .container { width: 100%; }

/* The questions sit over the middle of the stage; the pair beneath them takes
   the same space, so one can hand over to the other in place. */
.ask--pinned .ask__questions {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	width: calc(100% - 2 * clamp(20px, 5vw, 80px));
	transform: translate(-50%, -50%);
}

/* All in the same cell, so they hand over rather than stacking up. The
   container sizes to the tallest of them. */
.ask--pinned .ask__questions { gap: 0; }

.ask--pinned .ask__q {
	grid-area: 1 / 1;
	opacity: 0;
}
.ask--pinned .ask__person,
.ask--pinned .ask__note { opacity: 0; }

.ask--pinned .ask__person { aspect-ratio: 4 / 3; }

/* -------------------------------------------------------------------------
   08f  CLIENT REVIEWS  (.reviews)

   The heading and its lead sit on the left with a pill label opposite, and the
   cards run beneath in a row that reaches past both edges of the page - so the
   row reads as continuing rather than as a tidy set of three.

   The base here is a plain side-scrolling row that snaps card to card. The
   theme script adds .reviews--live and takes the row over: it then drifts on
   its own, can be dragged, and stops while the pointer is over it. Everything
   below the live heading is that enhancement, so without the script every
   review is still reachable by scrolling the row.
   ---------------------------------------------------------------------- */
.reviews {
	position: relative;
	overflow: hidden;
	padding-block: clamp(44px, 4.5vw, 80px);
	background: var(--fc-bg);
	background-size: cover;
	background-position: center;
}

.reviews > * { position: relative; z-index: 2; }

/* --- Heading, and the label opposite it --- */
.reviews__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: clamp(24px, 4vw, 60px);
	margin-bottom: clamp(24px, 2.8vw, 40px);
}

.reviews__title {
	margin: 0;
	max-width: 15ch;
	font-family: var(--fc-font-display);
	font-size: clamp(2.1rem, 4.3vw, 3.9rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -.035em;
	color: var(--fc-heading);
	text-wrap: balance;
}

.reviews__lead {
	margin: clamp(12px, 1.3vw, 18px) 0 0;
	max-width: 44ch;
	color: var(--fc-muted);
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.75;
}

.reviews__badge {
	margin: 0;
	padding: 13px 26px;
	border-radius: var(--fc-radius-pill);
	background: color-mix(in srgb, var(--fc-accent-mark) 9%, #fff);
	color: color-mix(in srgb, var(--fc-accent-mark) 80%, #2a1113);
	font-size: .95rem;
	font-weight: 500;
	white-space: nowrap;
}

/* --- The row --- */
.reviews__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.reviews__viewport::-webkit-scrollbar { display: none; }

/* The gap belongs to the track as well as to the sets inside it, so a
   duplicated set sits exactly one gap from the one before it and the loop
   cannot show a seam where it wraps. */
.reviews__track,
.reviews__set {
	display: flex;
	gap: clamp(18px, 1.9vw, 30px);
}

.reviews__set { flex: 0 0 auto; }

.reviews__track { padding-inline: clamp(20px, 5vw, 80px); }

/* --- A card --- */
.review {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	width: min(84vw, clamp(290px, 28vw, 420px));
	min-height: clamp(310px, 25vw, 448px);
	padding: clamp(26px, 2.6vw, 40px);
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: clamp(16px, 1.6vw, 22px);
	scroll-snap-align: center;
}

.review__mark { margin-bottom: clamp(22px, 2.6vw, 40px); }

.review__glyph,
.review__mark-img {
	display: block;
	width: clamp(38px, 3vw, 46px);
	height: clamp(38px, 3vw, 46px);
	object-fit: contain;
}

/* The site sets a blockquote as a pull-quote: a rule down the left, a
   tinted panel, its own padding. That belongs in an article, not here,
   where the quote is the card. */
.review__quote {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: inherit;
}

.review__quote p {
	margin: 0;
	font-size: clamp(1.15rem, 1.45vw, 1.6rem);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -.015em;
	color: var(--fc-heading);
}

.review__text {
	margin: clamp(14px, 1.6vw, 20px) 0 0;
	color: var(--fc-muted);
	font-size: clamp(.92rem, 1vw, 1rem);
	line-height: 1.7;
}

/* Pushed to the foot, so a row of cards of differing length still lines its
   client names up along the bottom. */
.review__by {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
	padding-top: clamp(24px, 2.6vw, 36px);
}

.review__avatar {
	flex: 0 0 auto;
	overflow: hidden;
	width: clamp(40px, 3vw, 46px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--fc-bg-soft);
}

.review__avatar-img { width: 100%; height: 100%; object-fit: cover; }

/* Stands in for a photograph that has not been supplied yet. */
.review__monogram {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: color-mix(in srgb, var(--mono, var(--fc-accent-mark)) 13%, #fff);
	color: var(--mono, var(--fc-accent-mark));
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .01em;
}

.review__meta { min-width: 0; }

.review__name {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--fc-heading);
}

.review__role {
	margin: 2px 0 0;
	color: var(--fc-muted);
	font-size: .95rem;
}

/* --- Small print, and the button --- */
.reviews__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(20px, 3vw, 40px);
	margin-top: clamp(34px, 4vw, 56px);
}

.reviews__note {
	margin: 0;
	max-width: 62ch;
	color: var(--fc-muted);
	font-size: .9rem;
	line-height: 1.7;
}

.reviews__controls {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
}

.reviews__arrows { display: flex; gap: 10px; }

.reviews__arrow {
	display: grid;
	place-items: center;
	width: 46px;
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid var(--fc-border);
	border-radius: 50%;
	background: #fff;
	color: var(--fc-heading);
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease;
}

.reviews__arrow:hover {
	background: var(--fc-bg-soft);
	border-color: color-mix(in srgb, var(--fc-accent-mark) 32%, var(--fc-border));
}

/* --- On a background image --- */
.reviews--has-bg { background-color: var(--fc-secondary); }

.reviews__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(15, 42, 74, .9);
}

.reviews--has-bg .reviews__title { color: #fff; }

.reviews--has-bg .reviews__lead,
.reviews--has-bg .reviews__note { color: rgba(255, 255, 255, .78); }

.reviews--has-bg .reviews__badge { background: rgba(255, 255, 255, .12); color: #fff; }

/* =====================================================================
   LIVE STATE - added by the theme script when it takes the row over.
   ================================================================== */
.reviews--live .reviews__viewport {
	overflow: hidden;
	scroll-snap-type: none;
}

/* Not part of the repeat, so it cannot survive a wrap - see above. */
.reviews--live .reviews__track { padding-inline: 0; }

.reviews--live .reviews__track {
	cursor: grab;
	will-change: transform;

	/* Horizontal gestures belong to the row, vertical ones to the page. */
	touch-action: pan-y;
}

.reviews--live.is-dragging .reviews__track { cursor: grabbing; }
.reviews--live.is-dragging .review { user-select: none; }
.reviews--live .review { scroll-snap-align: none; }

/* -------------------------------------------------------------------------
   08g  INDUSTRIES WE SERVE  (.industries)

   A six-column grid, arranged tile for tile from the reference:

       1 1 2 3 3 4        1, 3 and 7 are two columns wide
       5 6 2 7 7 8        2 and 8 are two rows tall
       9 . . . . 8

   Only the spans are declared. The browser's own grid placement then puts
   every tile exactly where the reference has it, with no gaps - so there are
   no row or column numbers to keep in step when the list changes length.
   fc_industry_layout() works the spans out, including how to end a wall whose
   count is not a whole multiple of thirteen.

   Tones cycle on seven against a block of thirteen, so no two tiles in a wall
   of this size share both a shape and a colour. A tile with no photograph
   wears its tone as a plate, which is what lets the wall go up before the
   photography has been gathered.
   ---------------------------------------------------------------------- */
.industries {
	padding-block: clamp(56px, 6vw, 104px);
	background: var(--fc-bg);
}

/* --- Heading --- */
.industries__head {
	margin: 0 auto clamp(28px, 3.4vw, 52px);
	text-align: center;
}

.industries__badge {
	display: inline-block;
	margin: 0 0 clamp(12px, 1.4vw, 18px);
	padding: 9px 22px;
	border-radius: var(--fc-radius-pill);
	background: color-mix(in srgb, var(--fc-accent-mark) 9%, #fff);
	color: color-mix(in srgb, var(--fc-accent-mark) 80%, #2a1113);
	font-size: .9rem;
	font-weight: 500;
}

.industries__title {
	margin: 0 auto;

	/* Holds the heading to two lines. */
	max-width: 44rem;
	font-family: var(--fc-font-display);
	font-size: clamp(1.9rem, 3.6vw, 3.2rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.03em;
	color: var(--fc-heading);
	text-wrap: balance;
}

.industries__lead {
	margin: clamp(12px, 1.4vw, 18px) auto 0;

	/* Sized so the paragraph settles on three lines, with room either side of
	   the boundary so it does not tip to two or four. Balance then evens them. */
	max-width: 1000px;
	text-wrap: balance;
	color: var(--fc-muted);
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.75;
}

/* --- The wall --- */
.industries__wall {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));

	/* Chosen so a single-cell tile lands on the reference's own proportion,
	   a little wider than it is tall. */
	grid-auto-rows: clamp(120px, 12.4vw, 250px);
	gap: clamp(12px, 1.3vw, 20px);
}

/* --- A tile --- */
.industry {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: clamp(12px, 1.2vw, 18px);
	background: var(--tone, var(--fc-secondary));
	text-decoration: none;
}

.industry[data-cols="2"] { grid-column: span 2; }
.industry[data-cols="3"] { grid-column: span 3; }
.industry[data-cols="4"] { grid-column: span 4; }
.industry[data-cols="5"] { grid-column: span 5; }
.industry[data-cols="6"] { grid-column: span 6; }
.industry[data-rows="2"] { grid-row: span 2; }

/* Seven tones against a block of thirteen - see the note above. */
.industry[data-tone="0"] { --tone: #7a1016; }
.industry[data-tone="1"] { --tone: #1f3d2b; }
.industry[data-tone="2"] { --tone: #16263f; }
.industry[data-tone="3"] { --tone: #3d2a16; }
.industry[data-tone="4"] { --tone: #2c1b2e; }
.industry[data-tone="5"] { --tone: #14302f; }
.industry[data-tone="6"] { --tone: #33241c; }

/* The plate under a tile with no photograph: its tone, lifted at one corner
   so it is not a flat rectangle. */
.industry::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			circle at 78% 18%,
			color-mix(in srgb, var(--tone) 45%, #fff) 0%,
			transparent 62%
		);
	opacity: .55;
}

.industry__img {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

/* Reads over a photograph as well as over a plate. */
.industry__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .74) 0%,
		rgba(0, 0, 0, .28) 46%,
		rgba(0, 0, 0, .06) 100%
	);
}

.industry__name {
	position: absolute;
	right: clamp(14px, 1.4vw, 20px);
	bottom: clamp(12px, 1.3vw, 18px);
	left: clamp(14px, 1.4vw, 20px);
	z-index: 3;
	color: #fff;
	font-family: var(--fc-font-display);
	font-size: clamp(.95rem, 1.15vw, 1.2rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	text-wrap: balance;
}

/* --- Only where a tile actually leads somewhere --- */
a.industry:hover .industry__img { transform: scale(1.06); }
a.industry:focus-visible { outline: 3px solid var(--fc-accent-mark); outline-offset: 3px; }

/* -------------------------------------------------------------------------
   08h  LATEST BLOG  (.blog)

   One lead article on the left, two rows stacked beside it. Both cards are
   built from the same partial and carry the same parts in the same order -
   only the arrangement differs here, which is why the markup does not branch.

   The lead's date sits on a bar that straddles the foot of its picture. That
   overhang is the whole reason the card cannot clip its overflow, so the
   rounding is put on the picture rather than on the card.
   ---------------------------------------------------------------------- */
/* `section.blog`, not `.blog`: WordPress puts a `blog` class on the body of the
   posts page, so a bare class selector here would paint the whole document -
   which is what put a stray band of ground above the header on that page. */
section.blog {
	padding-block: clamp(46px, 4.6vw, 82px);
	background: #f6f6f7;
}

/* On a short screen the cards cannot give any more without starving - their
   floor is what the two rows need to show their text. So everything above
   them gives way instead: the padding, the heading, and the gap under it. */
@media (max-height: 940px) {
	section.blog { padding-block: clamp(18px, 2vw, 30px); }
	.blog__head { margin-bottom: clamp(14px, 1.4vw, 20px); }
	.blog__eyebrow { margin-bottom: 10px; }
	.blog__title { font-size: clamp(1.45rem, 2vw, 1.95rem); }
}

/* --- Heading, with the button opposite --- */
.blog__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: clamp(24px, 4vw, 60px);
	margin-bottom: clamp(22px, 2.4vw, 36px);
}

.blog__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 clamp(12px, 1.4vw, 18px);
	padding: 9px 18px 9px 14px;
	border-radius: var(--fc-radius-pill);
	background: #fff;
	color: var(--fc-accent-mark);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.blog__dash {
	width: 26px;
	height: 3px;
	border-radius: 2px;
	background: var(--fc-accent-mark);
}

.blog__title {
	margin: 0;

	/* Room for the first line whole; the block above sets where it breaks. */
	max-width: 34ch;
	font-family: var(--fc-font-display);
	font-size: clamp(1.7rem, 2.7vw, 2.45rem);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -.03em;
	color: var(--fc-heading);
}

/* The highlighted phrase in the heading - <em> in the field, brand red here. */
.blog__title em {
	display: block;
	font-style: normal;
	color: var(--fc-accent-mark);
}

.blog__lead {
	margin: clamp(12px, 1.4vw, 18px) 0 0;
	max-width: 62ch;
	color: var(--fc-muted);
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.75;
}

.blog__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(18px, 2.2vw, 30px);
	min-width: clamp(200px, 24vw, 380px);
}

.blog__rule {
	width: 100%;
	height: 1px;
	background: var(--fc-border);
}

/* --- The two columns --- */
.blog__grid {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);

	/* Setting a height on the container is not enough: without this the row
	   inside it is implicit and auto-sized, so it grows to the picture's own
	   height and spills straight out of the box. Naming the row as minmax(0,
	   1fr) makes it exactly the height the container was given. */
	grid-template-rows: minmax(0, 1fr);
	gap: clamp(18px, 1.8vw, 28px);
	align-items: stretch;

	/* What is left of the screen once the sticky header and the heading above
	   have taken theirs - --fc-hh is the header height the script measures - and
	   never so tall that it sprawls on a big monitor. */
	height: min(520px, calc(100vh - var(--fc-hh, 96px) - 380px));

	/* The floor is what the two rows genuinely need to show their text. Going
	   below it does not make the section fit the screen, it just starves the
	   cards - which is what the fixed height did before. */
	min-height: 430px;
}

.blog--lead-only .blog__grid { grid-template-columns: minmax(0, 1fr); }

.blog__stack {
	display: grid;
	grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(18px, 1.8vw, 28px);
}

/* --- A card --- */
.blog-card {
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: clamp(12px, 1.2vw, 16px);
}

.blog-card__media { position: relative; }

.blog-card__img,
.blog-card__plate {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Stands in for a featured image that has not been set. */
.blog-card__plate {
	background:
		radial-gradient(circle at 74% 22%, #6d2a2e 0%, transparent 60%),
		linear-gradient(140deg, #241a1b 0%, #402024 55%, #1d1516 100%);
}

.blog-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 0 0 auto;
	margin: 0;
	font-family: var(--fc-font-display);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -.02em;
}

.blog-card__title a {
	color: var(--fc-heading);
	text-decoration: none;
}

.blog-card__title a:hover { color: var(--fc-accent-mark); }

.blog-card__text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;

	/* The one part that gives way when a card is short of room - shrink only.
	   With grow set it absorbed the spare space instead and pushed the link
	   past the bottom of a card that clips its overflow, which is exactly how
	   "Read more" vanished from the taller card. */
	flex: 0 1 auto;
	min-height: 0;
	margin: 8px 0 0;
	color: var(--fc-muted);
	font-size: .92rem;
	line-height: 1.58;
}

.blog-card__more {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	flex: 0 0 auto;
	gap: 9px;
	margin-top: clamp(10px, 1.1vw, 13px);
	color: var(--fc-heading);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}

.blog-card__more svg { transition: transform .3s ease; }
.blog-card__more:hover { color: var(--fc-accent-mark); }
.blog-card__more:hover svg { transform: translateX(4px); }

.blog-card__icon { flex: 0 0 auto; }

/* --- The lead --- */
.blog-card--lead {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: clamp(14px, 1.2vw, 18px);
}

.blog-card--lead .blog-card__media {
	/* Takes whatever height the card has left, so the section can be sized
	   to the screen rather than to the picture. */
	flex: 1 1 auto;
	min-height: 0;
}

/* The rounding belongs to the picture, not to the box around it: that box
   holds the date bar, which hangs half below the picture and would be cut
   in two by anything clipping its overflow. */
.blog-card__media > a {
	display: block;
	height: 100%;
}

.blog-card__img,
.blog-card__plate {
	border-radius: clamp(10px, 1vw, 13px);
}

/* Straddles the foot of the picture, which is why the card above does not
   clip its own overflow. */
.blog-card--lead .blog-card__bar {
	position: absolute;
	bottom: 0;
	left: clamp(12px, 1.2vw, 18px);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.2vw, 16px);
	margin: 0;
	padding: clamp(10px, 1vw, 14px) clamp(14px, 1.4vw, 20px);
	transform: translateY(50%);
	border-radius: clamp(8px, .8vw, 11px);
	background: var(--fc-accent-mark);
	color: #fff;
	font-size: .8rem;
	font-weight: 600;
	white-space: nowrap;
}

.blog-card__fact { display: inline-flex; align-items: center; gap: 7px; }

.blog-card__sep {
	width: 34px;
	height: 1px;
	background: rgba(255, 255, 255, .45);
}

.blog-card--lead .blog-card__body {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	min-height: 0;
	padding: clamp(28px, 2.6vw, 34px) clamp(10px, 1vw, 14px) clamp(6px, .8vw, 10px);
}

.blog-card--lead .blog-card__title { font-size: clamp(1.1rem, 1.35vw, 1.36rem); }

/* --- A row --- */
.blog-card--row {
	display: grid;
	grid-template-columns: clamp(130px, 20vw, 380px) minmax(0, 1fr);
	overflow: hidden;
}

.blog-card--row .blog-card__media { height: 100%; }

.blog-card--row .blog-card__body {
	display: flex;
	flex-direction: column;

	/* Content starts at the top. Centred, a card whose title runs to two lines
	   spent its spare room above the chips and then ran out underneath, which
	   is where the link sits - so the link was cut while the card still looked
	   half empty. */
	justify-content: flex-start;
	min-height: 0;
	padding: clamp(12px, 1.2vw, 16px) clamp(16px, 1.8vw, 26px);
}

.blog-card--row .blog-card__title { font-size: clamp(1rem, 1.12vw, 1.12rem); }

.blog-card__chips {
	display: flex;
	flex-wrap: wrap;
	flex: 0 0 auto;
	gap: 8px;
	margin: 0 0 clamp(6px, .8vw, 9px);
}

.blog-card__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px;
	border-radius: 8px;
	background: #f2f3f5;
	color: var(--fc-muted);
	font-size: .76rem;
	font-weight: 600;
	white-space: nowrap;
}

/* A rounded button, used by the "view all" link beside the heading. */
.btn--pill { border-radius: var(--fc-radius-pill); }

/* -------------------------------------------------------------------------
   08i  ABOUT BANNER  (.abb)

   A tinted band holds the heading and its opening line. The row of four
   photographs is pulled up by --abb-lift so its top half rests on the band and
   the rest hangs onto the white beneath - which is what makes the band read as
   a banner rather than as a coloured box with pictures under it.

   The band's bottom padding is that same --abb-lift, so the two always agree:
   change the lift and the band grows to match, with no second number to keep
   in step.
   ---------------------------------------------------------------------- */
.abb {
	--abb-lift: clamp(56px, 7vw, 118px);

	position: relative;
	padding-bottom: clamp(48px, 5.5vw, 92px);
	background: var(--fc-bg);
}

.abb__band {
	padding-top: clamp(44px, 5.5vw, 92px);

	/* Room for the half of the row that sits on the band. */
	padding-bottom: var(--abb-lift);
	background: color-mix(in srgb, var(--fc-accent-mark) 20%, #fff);
}

.abb__head {
	max-width: 56rem;
	margin: 0 auto;
	text-align: center;
}

.abb__marks {
	display: block;
	margin: 0 auto clamp(10px, 1.4vw, 18px);
	color: color-mix(in srgb, var(--fc-accent-mark) 72%, #2a1113);
}

.abb__marks svg {
	display: block;
	width: clamp(88px, 9vw, 124px);
	height: auto;
	margin: 0 auto;
}

.abb__title {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(2rem, 4.4vw, 3.9rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -.035em;
	color: var(--fc-heading);
	text-wrap: balance;
}

.abb__lead {
	margin: clamp(14px, 1.8vw, 24px) auto 0;
	max-width: 60ch;
	color: color-mix(in srgb, var(--fc-heading) 82%, transparent);
	font-size: clamp(.98rem, 1.1vw, 1.1rem);
	line-height: 1.75;
}

/* --- The row of photographs --- */
.abb__strip {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: center;
	gap: clamp(10px, 1.2vw, 20px);

	/* Pulled up onto the band by exactly the padding left for it. */
	margin-top: calc(-1 * var(--abb-lift));
}

.abb__strip[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.abb__strip[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.abb__strip[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.abb__shot {
	overflow: hidden;
	margin: 0;
	border-radius: clamp(10px, 1.1vw, 16px);
	background: var(--fc-bg-soft);
}

/* Two heights, alternating, centred on one line - the taller and shorter
   pictures are what stop the row reading as a plain strip of four tiles. */
.abb__shot[data-slot="0"] { aspect-ratio: 10 / 9; }
.abb__shot[data-slot="1"] { aspect-ratio: 10 / 7; }

.abb__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The descriptive heading, under the row. Left-aligned and smaller than the
   one in the band, so the band still reads as the opening. */
.abb__main {
	max-width: 24ch;
	margin: clamp(30px, 3.6vw, 56px) 0 0;
	font-family: var(--fc-font-display);
	font-size: clamp(1.55rem, 2.9vw, 2.5rem);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.03em;
	color: var(--fc-heading);
}

/* --- The two columns beneath --- */
.abb__text {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 68px);
	margin-top: clamp(20px, 2.4vw, 34px);
}

.abb__col p {
	margin: 0 0 1em;
	color: var(--fc-text);
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.8;
}

.abb__col p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   08j  WHAT YOU GET  (.offer)

   The standing panel is on the left, the rail of cards on the right - the
   reference has them the other way round, and this is the deliberate flip.

   The cards climb. The set is repeated until it more than covers the rail,
   the whole track is moved by transform, and the offset wraps at exactly one
   set - so the climb has no end and no seam. That is enhancement: without the
   script the rail is an ordinary column of cards that scrolls with the page.

   Each card takes its colour from its position, cycling through six, so the
   rail reads as a set. That is what replaces the reference's flat black.
   ---------------------------------------------------------------------- */
.offer {
	padding-block: clamp(52px, 6vw, 100px);
	background: var(--fc-bg-soft);
}

/* --- Heading --- */
.offer__head {
	max-width: 46rem;
	margin: 0 auto clamp(28px, 3.4vw, 50px);
	text-align: center;
}

.offer__badge {
	display: inline-block;
	margin: 0 0 clamp(10px, 1.2vw, 16px);
	padding: 9px 22px;
	border-radius: var(--fc-radius-pill);
	background: color-mix(in srgb, var(--fc-accent-mark) 10%, #fff);
	color: color-mix(in srgb, var(--fc-accent-mark) 80%, #2a1113);
	font-size: .9rem;
	font-weight: 500;
}

.offer__title {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(1.8rem, 3.4vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.03em;
	color: var(--fc-heading);
	text-wrap: balance;
}

.offer__lead {
	margin: clamp(12px, 1.4vw, 18px) auto 0;
	max-width: 62ch;
	color: var(--fc-muted);
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.75;
}

/* --- Panel on the left, rail on the right --- */
.offer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr);
	align-items: stretch;
	gap: clamp(18px, 2vw, 32px);
}

/* --- The standing panel --- */
.offer__panel {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 2.8vw, 42px);
	border-radius: clamp(16px, 1.6vw, 24px);
	color: #fff;

	background:
		radial-gradient(circle at 78% 12%, #b51b22 0%, #8a1016 34%, transparent 68%),
		linear-gradient(140deg, #1a0305 0%, #4a0609 52%, #210204 100%);
}

.offer__panel-title {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(1.4rem, 2.1vw, 2rem);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -.025em;
	color: #fff;
	text-wrap: balance;
}

.offer__panel-text {
	margin: clamp(10px, 1.2vw, 16px) 0 0;
	color: rgba(255, 255, 255, .8);
	font-size: clamp(.94rem, 1vw, 1.02rem);
	line-height: 1.7;
}

/* The picture, between the heading and the button. */
.offer__figure {
	overflow: hidden;
	margin: clamp(18px, 2vw, 28px) 0 0;
	aspect-ratio: 16 / 10;
	border-radius: clamp(12px, 1.2vw, 18px);
	background: rgba(255, 255, 255, .08);
}

.offer__figure-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- The WhatsApp button --- */
.offer__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	margin-top: clamp(18px, 2vw, 28px);
	padding: 15px 28px;
	border-radius: var(--fc-radius-pill);
	background: #25d366;
	color: #06301a;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	transition: background var(--fc-transition), transform var(--fc-transition);
}

.offer__wa:hover {
	background: #1fbe5a;
	color: #06301a;
	transform: translateY(-2px);
}

.offer__wa-mark { flex: 0 0 auto; }

.offer__note {
	margin: clamp(12px, 1.4vw, 18px) 0 0;
	color: rgba(255, 255, 255, .62);
	font-size: .86rem;
	line-height: 1.6;
}

/* --- The rail --- */
.offer__rail {
	position: relative;
	overflow-y: auto;
	min-height: 0;
	scrollbar-width: none;
}

.offer__rail::-webkit-scrollbar { display: none; }

.offer__track,
.offer__set {
	display: grid;
	gap: clamp(12px, 1.4vw, 20px);
}

.offer__set { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --- A card --- */
.offer-card {
	display: flex;
	flex-direction: column;
	padding: clamp(18px, 1.9vw, 28px);
	border-radius: clamp(12px, 1.2vw, 18px);
	background: color-mix(in srgb, var(--t, var(--fc-accent-mark)) 8%, #fff);
	border: 1px solid color-mix(in srgb, var(--t, var(--fc-accent-mark)) 20%, #fff);
	transition: transform var(--fc-transition), box-shadow var(--fc-transition);
}

.offer-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px color-mix(in srgb, var(--t) 18%, transparent);
}

/* Six tones, cycling on the card's position - what replaces the flat black. */
.offer-card[data-tone="0"] { --t: #ce1f28; }
.offer-card[data-tone="1"] { --t: #3ea64a; }
.offer-card[data-tone="2"] { --t: #1d4ed8; }
.offer-card[data-tone="3"] { --t: #d97706; }
.offer-card[data-tone="4"] { --t: #0f766e; }
.offer-card[data-tone="5"] { --t: #7c3aed; }

.offer-card__icon {
	display: grid;
	place-items: center;
	width: clamp(40px, 3.4vw, 52px);
	aspect-ratio: 1;
	margin-bottom: clamp(14px, 1.6vw, 22px);
	border-radius: clamp(10px, 1vw, 14px);
	background: color-mix(in srgb, var(--t) 16%, #fff);
	color: var(--t);
}

.offer-card__icon-img { width: 60%; height: 60%; object-fit: contain; }

.offer-card__title {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(1rem, 1.15vw, 1.15rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.015em;
	color: var(--fc-heading);
}

.offer-card__text {
	margin: 8px 0 0;
	color: var(--fc-text);
	font-size: .92rem;
	line-height: 1.62;
}

/* =====================================================================
   CLIMBING - added by the theme script when it takes the rail over.
   ================================================================== */
.offer--live .offer__rail {
	overflow: hidden;

	/* The rail is as tall as the panel beside it; without this the grid row
	   would stretch to the whole repeated track instead. */
	height: 100%;
}

.offer--live .offer__track {
	position: absolute;
	inset: 0 0 auto 0;
	will-change: transform;
}

/* -------------------------------------------------------------------------
   08k  VISION & MISSION  (.vm)

   A 2x2: the heading, the vision card, the mission card and a photograph.
   The reference sets the heading on the right; this is the mirror, with the
   heading leading on the left and everything else following from it.

   The two cards keep opposite arrangements - vision reads text then mark,
   mission mark then text - which is what stops the pair reading as the same
   card printed twice.
   ---------------------------------------------------------------------- */
.vm {
	padding-block: clamp(52px, 6vw, 100px);
	background: var(--fc-bg);
}

.vm__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: clamp(16px, 2vw, 30px);
}

/* Each column stacks its own pair. Sharing one 2x2 grid tied the
   photograph to a row boundary and left a gap under the vision card;
   independent columns let it start directly beneath. */
.vm__col {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2vw, 30px);
}

/* --- The heading, leading --- */
.vm__head {
	flex: 0 0 auto;
	padding-right: clamp(0px, 2vw, 40px);
}

.vm__title {
	margin: 0;
	max-width: 14ch;
	font-family: var(--fc-font-display);
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -.035em;
	color: var(--fc-heading);
}

.vm__lead {
	margin: clamp(14px, 1.8vw, 24px) 0 0;

	/* Takes the column it is in, rather than a narrow measure inside it. */
	max-width: none;
	color: var(--fc-muted);
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.75;
}

/* --- The two cards --- */
.vm__card {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: clamp(14px, 1.6vw, 26px);
	padding: clamp(20px, 2.1vw, 32px);
	border-radius: clamp(14px, 1.4vw, 20px);
}

/* The two colours are the reference's own, and each card carries the
   other's as its heading - that swap is what ties the pair together. */
.vm {
	--vm-lime: #c8f04e;
	--vm-blue: #4152f0;
}

.vm__card--vision {
	background: var(--vm-lime);
	color: #1b1b1b;
}

.vm__card--vision .vm__item-title,
.vm__card--vision .vm__tick { color: var(--vm-blue); }

.vm__card--vision .vm__item-text { color: rgba(20, 20, 20, .82); }
.vm__card--vision .vm__disc { color: var(--vm-blue); }

.vm__card--mission {
	background: var(--vm-blue);
	color: #fff;
}

.vm__card--mission .vm__item-title,
.vm__card--mission .vm__tick { color: var(--vm-lime); }

.vm__card--mission .vm__item-text { color: rgba(255, 255, 255, .9); }
.vm__card--mission .vm__disc { color: var(--vm-blue); }

.vm__items {
	display: grid;
	gap: clamp(14px, 1.6vw, 22px);
	flex: 1 1 auto;
	min-width: 0;
}

.vm__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 12px;
}

/* A bare check, the way the reference draws it - no disc behind it. */
.vm__tick {
	display: grid;
	place-items: center;
	width: 18px;
	aspect-ratio: 1;
	margin-top: 5px;
}

.vm__item-title {
	margin: 0;
	font-family: var(--fc-font-display);

	/* Never below 18.66px bold. The reference pairs its two colours at
	   4.34:1, which clears AA for large text but not for small - so the
	   heading stays large enough to count rather than the colours changing. */
	font-size: clamp(1.18rem, 1.3vw, 1.3rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.015em;
}

.vm__item-text {
	margin: 6px 0 0;
	font-size: .95rem;
	line-height: 1.68;
	color: color-mix(in srgb, var(--fc-heading) 74%, transparent);
}

/* The mark, in its disc. */
.vm__disc {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: clamp(66px, 6.6vw, 104px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 12px 30px rgba(15, 27, 45, .12);
}

.vm__disc-img {
	width: 56%;
	height: 56%;
	object-fit: contain;
}

/* --- The photograph in the fourth corner --- */
.vm__figure {
	overflow: hidden;
	margin: 0;

	/* Takes whatever height the column has left over, and nothing more.
	   The basis must be 0, not auto: with auto the figure starts at its
	   content size - the picture's own height - so there is never any free
	   space to grow into and the column simply gets taller. */
	flex: 1 1 0;
	min-height: clamp(150px, 13vw, 210px);
	border-radius: clamp(14px, 1.4vw, 20px);
	background: var(--fc-bg-soft);
}

.vm__figure-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;

	/* Holds the top of the frame and trims from the bottom, so faces stay
	   in shot however much height the column gives it. */
	object-position: center top;
}

/* -------------------------------------------------------------------------
   08l  LEADERSHIP  (.lead-fc)

   One card: the portrait held to a definite height on the left, and on the
   right the role, the name, a rule and the biography, with the facts standing
   in a row beneath it.

   The portrait's height comes from the card, not from the photograph - the
   picture is cropped to fit rather than the card growing to hold it, so a
   portrait of any proportion leaves the card the same shape.
   ---------------------------------------------------------------------- */
.lead-fc {
	padding-block: clamp(52px, 6vw, 100px);
	background: var(--fc-bg-soft);
}

/* --- Heading --- */
.lead-fc__head {
	max-width: 46rem;
	margin: 0 auto clamp(28px, 3.4vw, 50px);
	text-align: center;
}

.lead-fc__badge {
	margin: 0 0 clamp(10px, 1.2vw, 16px);
	color: var(--fc-accent-mark);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.lead-fc__title {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(1.8rem, 3.3vw, 2.9rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.03em;
	color: var(--fc-heading);
	text-wrap: balance;
}

.lead-fc__lead {
	margin: clamp(12px, 1.4vw, 18px) auto 0;
	max-width: 64ch;
	color: var(--fc-muted);
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.75;
}

/* --- The card --- */
.lead-fc__card {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	align-items: stretch;
	overflow: hidden;
	border-radius: clamp(16px, 1.8vw, 26px);
	background: #fff;
	border: 1px solid var(--fc-border);
}

/* --- The portrait --- */
.lead-fc__portrait {
	position: relative;
	overflow: hidden;

	/* Definite, so the picture inside is cropped to the card rather than the
	   card stretching to the picture's own height. */
	min-height: clamp(300px, 32vw, 460px);
	background: var(--fc-bg-soft);
}

/* The arc behind the top corner - the one flourish this card allows itself. */
.lead-fc__arc {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: clamp(120px, 14vw, 210px);
	aspect-ratio: 1;
	border-radius: 0 0 100% 0;
	background: var(--fc-accent-mark);
}

.lead-fc__img {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Stands in until a portrait is supplied. */
.lead-fc__plate {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	background:
		radial-gradient(circle at 72% 24%, #6d2a2e 0%, transparent 62%),
		linear-gradient(150deg, #241a1b 0%, #402024 56%, #1d1516 100%);
	color: rgba(255, 255, 255, .9);
	font-family: var(--fc-font-display);
	font-size: clamp(3rem, 6vw, 5.5rem);
	font-weight: 800;
	letter-spacing: .02em;
}

/* --- The text --- */
.lead-fc__body {
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 3.2vw, 52px);
}

.lead-fc__role {
	margin: 0 0 clamp(6px, .8vw, 10px);
	color: var(--fc-accent-mark);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.lead-fc__name {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(1.6rem, 2.6vw, 2.4rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.03em;
	color: var(--fc-heading);
}

.lead-fc__rule {
	display: block;
	width: 62px;
	height: 3px;
	margin: clamp(14px, 1.6vw, 20px) 0 clamp(16px, 1.8vw, 24px);
	border-radius: 2px;
	background: var(--fc-accent-mark);
}

.lead-fc__bio p {
	margin: 0 0 1em;
	color: var(--fc-text);
	font-size: clamp(.95rem, 1.02vw, 1.04rem);
	line-height: 1.8;
}

.lead-fc__bio p:last-child { margin-bottom: 0; }

/* --- The facts --- */
.lead-fc__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 2vw, 30px);
	margin: clamp(22px, 2.6vw, 34px) 0 0;
	padding: 0;
	list-style: none;
}

.lead-fc__fact {
	display: flex;
	align-items: center;
	gap: 11px;
	color: var(--fc-heading);
}

/* A hairline between them, never before the first. */
.lead-fc__fact + .lead-fc__fact {
	padding-left: clamp(16px, 2vw, 30px);
	border-left: 1px solid var(--fc-border);
}

.lead-fc__fact-mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	color: var(--fc-accent-mark);
}

.lead-fc__fact-text { display: grid; }

.lead-fc__fact-value {
	font-size: clamp(.98rem, 1.1vw, 1.1rem);
	font-weight: 700;
	line-height: 1.2;
}

.lead-fc__fact-label {
	color: var(--fc-muted);
	font-size: .84rem;
	line-height: 1.3;
}

.lead-fc__actions { margin-top: clamp(22px, 2.6vw, 34px); }

/* --- The rest of the team, in a row beneath --- */
.lead-fc__team {
	margin-top: clamp(38px, 4.4vw, 70px);
	text-align: center;
}

.lead-fc__team-title {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(1.4rem, 2.2vw, 2rem);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.03em;
	color: var(--fc-heading);
	text-wrap: balance;
}

.lead-fc__team-lead {
	margin: clamp(10px, 1.2vw, 16px) auto 0;
	max-width: 60ch;
	color: var(--fc-muted);
	font-size: clamp(.94rem, 1vw, 1.02rem);
	line-height: 1.7;
}

.lead-fc__members {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 40px) clamp(14px, 1.6vw, 26px);
	margin-top: clamp(24px, 2.8vw, 40px);
}

/* Fewer than four spread out rather than leaving a ragged tail. */
.lead-fc__members[data-count="1"] { grid-template-columns: minmax(0, 22rem); justify-content: center; }
.lead-fc__members[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 22rem)); justify-content: center; }
.lead-fc__members[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- A member --- */
/* No box: a round portrait with the name under it is enough, and it keeps
   a row of eight from reading as a wall of tiles. */
.member { text-align: center; }

/* Round, and a definite size - so a row lines up however the portraits
   were cropped, and no picture can set its own height. */
.member__portrait {
	position: relative;
	overflow: hidden;
	width: clamp(104px, 11vw, 160px);
	margin: 0 auto;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--fc-bg-soft);
	transition: transform var(--fc-transition);
}

.member:hover .member__portrait { transform: translateY(-4px); }

.member__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	border-radius: 50%;
}

/* Stands in for a portrait that has not been supplied. */
.member__plate {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background:
		radial-gradient(circle at 72% 24%, #6d2a2e 0%, transparent 62%),
		linear-gradient(150deg, #241a1b 0%, #402024 56%, #1d1516 100%);
	color: rgba(255, 255, 255, .9);
	font-family: var(--fc-font-display);
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	font-weight: 800;
}

.member__body { padding: clamp(12px, 1.4vw, 18px) 4px 0; }

.member__name {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(1rem, 1.15vw, 1.15rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.015em;
	color: var(--fc-heading);
}

.member__role {
	margin: 5px 0 0;
	color: var(--fc-accent-mark);
	font-size: .9rem;
	line-height: 1.4;
}

/* One less line on the card - the role already separates itself by colour. */
.member__rule { display: none; }

.member__link {
	display: grid;
	place-items: center;
	width: 34px;
	aspect-ratio: 1;
	margin: clamp(10px, 1.2vw, 14px) auto 0;
	border: 1px solid var(--fc-border);
	border-radius: 50%;
	color: var(--fc-heading);
	transition: background var(--fc-transition), border-color var(--fc-transition), color var(--fc-transition);
}

.member__link:hover {
	background: var(--fc-accent-mark);
	border-color: var(--fc-accent-mark);
	color: #fff;
}


/* =========================================================================
   09  ABOUT / SPLIT SECTIONS
   ====================================================================== */
.about__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}

.about--image-right .about__media { order: 2; }

.about__media { position: relative; }

.about__media-main {
	border-radius: var(--fc-radius-lg);
	overflow: hidden;
	box-shadow: var(--fc-shadow);
}

.about__image { width: 100%; object-fit: cover; }

.about__media-sub {
	position: absolute;
	right: -18px;
	bottom: -28px;
	width: 46%;
	border: 6px solid #fff;
	border-radius: var(--fc-radius);
	overflow: hidden;
	box-shadow: var(--fc-shadow);
}

.about__badge {
	position: absolute;
	left: -14px;
	top: 28px;
	padding: 16px 20px;
	background: var(--fc-primary);
	color: #fff;
	border-radius: var(--fc-radius);
	box-shadow: var(--fc-shadow);
	text-align: center;
}

.about__badge-value {
	display: block;
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1;
}

.about__badge-label {
	display: block;
	margin-top: 4px;
	font-size: .78rem;
	opacity: .9;
	max-width: 12ch;
}

.about__content .section__header { margin-bottom: 24px; }

.about__actions { margin-top: 28px; }

.checklist {
	display: grid;
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.checklist--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.checklist__item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	color: var(--fc-heading);
	font-weight: 500;
}

.checklist__item .icon {
	width: 20px;
	height: 20px;
	padding: 0;
	color: var(--fc-primary);
	flex: none;
	margin-top: 2px;
}

/* =========================================================================
   10  CARDS
   ====================================================================== */
.card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
	overflow: hidden;
	transition: transform var(--fc-transition), box-shadow var(--fc-transition), border-color var(--fc-transition);
}

.card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--fc-shadow);
}

.card__media {
	position: relative;
	overflow: hidden;
	background: var(--fc-bg-soft);
}

.card__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 480ms var(--fc-ease);
}

.card:hover .card__image { transform: scale(1.05); }

.card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(20px, 2.4vw, 28px);
}

.card__body--center { text-align: center; align-items: center; }

.card__title {
	margin-bottom: .5em;
	font-size: 1.2rem;
}

.card__title a { color: inherit; }
.card__title a:hover { color: var(--fc-primary); }

.card__text {
	margin-bottom: 1em;
	color: var(--fc-muted);
	font-size: .96rem;
}

.card__price {
	margin: -.2em 0 .6em;
	color: var(--fc-primary);
	font-weight: 700;
}

.card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-size: .92rem;
	font-weight: 700;
}

.card__link-icon {
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
	transition: transform var(--fc-transition);
}

.card__link:hover .card__link-icon { transform: translateX(4px); }

.card--featured {
	border-color: var(--fc-primary-line);
	box-shadow: 0 0 0 3px var(--fc-primary-soft);
}

/* Icon block inside cards */
.card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.card__icon--circle {
	width: 60px;
	height: 60px;
	flex: none;
	background: var(--fc-primary-soft);
	border-radius: var(--fc-radius);
	color: var(--fc-primary);
}

.card__icon--circle .icon { width: 26px; height: 26px; }
.card__icon-img { width: 32px; height: 32px; object-fit: contain; }

.card__icon-num {
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -.02em;
}

/* Feature card variants */
.card--feature {
	border: 0;
	background: transparent;
	text-align: center;
	align-items: center;
}

.card--feature:hover { transform: none; box-shadow: none; }

.card--feature .card__body {
	padding: 0;
	align-items: center;
}

.card--feature-block {
	padding: clamp(24px, 3vw, 34px);
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
}

.card--feature-block:hover {
	transform: translateY(-4px);
	box-shadow: var(--fc-shadow);
	border-color: transparent;
}

.card--feature-row {
	flex-direction: row;
	align-items: flex-start;
	gap: 18px;
	text-align: left;
	padding: 0;
}

.card--feature-row .card__icon { margin-bottom: 0; }
.card--feature-row .card__body { align-items: flex-start; text-align: left; }
.card--feature-row .card__title { font-size: 1.08rem; margin-bottom: .3em; }

/* Step card */
.card--step {
	position: relative;
	padding: clamp(24px, 3vw, 32px);
	background: #fff;
	border-radius: var(--fc-radius-lg);
}

.card__step {
	display: block;
	margin-bottom: 14px;
	color: var(--fc-primary);
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
	opacity: .28;
}

.card--step .card__body { padding: 0; }

/* Testimonial card */
.card--testimonial {
	padding: clamp(24px, 3vw, 34px);
	background: #fff;
}

.card--testimonial::before {
	content: "";
	display: block;
	width: 34px;
	height: 34px;
	margin-bottom: 14px;
	background-color: var(--fc-primary);
	opacity: .22;
	-webkit-mask: var(--icon-quote) center / contain no-repeat;
	mask: var(--icon-quote) center / contain no-repeat;
}

.card__quote {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fc-heading);
	font-size: 1.02rem;
	line-height: 1.75;
}

.card__author {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--fc-border);
}

.card__avatar {
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: var(--fc-bg-soft);
}

.card__avatar-img { width: 100%; height: 100%; object-fit: cover; }

.card__author-name { margin: 0; color: var(--fc-heading); font-weight: 700; }
.card__author-role { margin: 0; font-size: .88rem; color: var(--fc-muted); }

.stars { display: flex; gap: 3px; margin-bottom: 14px; }

.stars__star {
	width: 17px;
	height: 17px;
	background-color: var(--fc-border);
	-webkit-mask: var(--icon-star) center / contain no-repeat;
	mask: var(--icon-star) center / contain no-repeat;
}

.stars__star.is-filled { background-color: var(--fc-accent); }

/* Team card */
.card--team .card__media--portrait {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	background: var(--fc-primary-soft);
}

.card--team .card__image { aspect-ratio: 1 / 1; }

.card__initials {
	font-size: 3rem;
	font-weight: 800;
	color: var(--fc-primary);
	opacity: .4;
}

.card__socials {
	position: absolute;
	left: 50%;
	bottom: 14px;
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 8px 12px;
	list-style: none;
	background: rgba(255, 255, 255, .95);
	border-radius: var(--fc-radius-pill);
	box-shadow: var(--fc-shadow-sm);
	transform: translate(-50%, 12px);
	opacity: 0;
	transition: opacity var(--fc-transition), transform var(--fc-transition);
}

.card--team:hover .card__socials,
.card--team:focus-within .card__socials {
	opacity: 1;
	transform: translate(-50%, 0);
}

.card__socials a { display: grid; place-items: center; color: var(--fc-secondary); }
.card__socials .icon { width: 16px; height: 16px; }

.card__role { margin: -.3em 0 .6em; color: var(--fc-primary); font-weight: 600; font-size: .93rem; }

/* Contact card */
.card--contact {
	align-items: center;
	padding: clamp(24px, 3vw, 32px);
	text-align: center;
}

.card--contact .card__body { padding: 0; align-items: center; }
.card--contact .card__text { color: var(--fc-heading); font-weight: 600; }

/* Post card */
.card--post .post-meta { margin-bottom: 10px; }

/* =========================================================================
   11  SECTIONS
   ====================================================================== */

/* --- Features split layout --- */
.features__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}

.features__media {
	border-radius: var(--fc-radius-lg);
	overflow: hidden;
	box-shadow: var(--fc-shadow);
}

.features__image { width: 100%; object-fit: cover; }

.features__list {
	display: grid;
	gap: 26px;
	margin-top: 8px;
}

/* --- Stats --- */
.stats {
	position: relative;
	padding-block: clamp(48px, 6vw, 76px);
	background: var(--fc-secondary);
	background-size: cover;
	background-position: center;
	color: #fff;
}

.stats__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 42, 74, .92), rgba(15, 42, 74, .88));
}

.stats__inner { position: relative; z-index: 2; }

.stats__title {
	margin-bottom: 40px;
	color: #fff;
	text-align: center;
}

.stats__grid { gap: clamp(24px, 3vw, 40px); }

.stat { text-align: center; }

.stat__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 2px;
	margin: 0 0 6px;
	color: #fff;
	font-size: clamp(2.2rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
}

.stat__suffix { color: var(--fc-accent); }

.stat__label {
	margin: 0;
	color: rgba(255, 255, 255, .78);
	font-size: .95rem;
}

/* --- Process --- */
.process__grid { counter-reset: step; }

.process .card--step {
	border: 1px solid var(--fc-border);
}

/* --- CTA --- */
.cta {
	position: relative;
	overflow: hidden;
	padding-block: clamp(48px, 6vw, 80px);
	background-size: cover;
	background-position: center;
}

.cta--solid { background: var(--fc-primary); }
.cta--image { background-color: var(--fc-secondary); }
.cta--light { background: var(--fc-bg-soft); border-block: 1px solid var(--fc-border); }

.cta__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15, 42, 74, .9), rgba(15, 42, 74, .72));
}

.cta__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 48px);
	flex-wrap: wrap;
}

.cta__content { flex: 1 1 460px; }

.cta__title { margin-bottom: .35em; color: #fff; }
.cta__text { margin: 0; color: rgba(255, 255, 255, .85); font-size: 1.05rem; max-width: 62ch; }

.cta--light .cta__title { color: var(--fc-heading); }
.cta--light .cta__text { color: var(--fc-muted); }
.cta--light .btn--light { --btn-bg: var(--fc-primary); --btn-bd: var(--fc-primary); --btn-fg: #fff; }
.cta--light .btn--outline-light { --btn-bd: var(--fc-border); --btn-fg: var(--fc-heading); }

.cta__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* =========================================================================
   11B  SERVICE CATALOGUE
   ====================================================================== */

/* A deep red banner that opens the page, then one band per practice area. The
   bands alternate side and shade so eighteen dense services read as four short
   pages rather than one long wall. Everything here is scoped to .catalogue, so
   the block can be lifted onto another template without dragging anything with
   it. */

.catalogue {
	--cat-gap: clamp(32px, 5vw, 80px);

	/* The one place the red is set. Deep enough that white type clears AA at
	   body size, which a mid red at this size would not. */
	--cat-red: #8b1219;
	--cat-red-deep: #5a0a10;
}

/* -------------------------------------------------------------------------
   Banner: this section's opening, and the page's title band
   ---------------------------------------------------------------------- */

.catalogue__banner {
	position: relative;
	background: var(--cat-red-deep) center / cover no-repeat;
	color: #fff;
	text-align: center;
	overflow: hidden;
}

/* A wash rather than a flat tint: the corner the eyebrow and heading sit in
   stays darkest, so the type holds against any photograph put behind it. */
.catalogue__banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 140% at 50% 0%,
			color-mix(in srgb, var(--cat-red) 92%, #fff) 0%,
			var(--cat-red) 42%,
			var(--cat-red-deep) 100%);
}

/* Sits over the picture, under the wash, and darkens it enough for the wash to
   read as colour instead of haze. Only drawn when there is a picture. */
.catalogue__banner-wash {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(24, 4, 6, .72), rgba(24, 4, 6, .86));
}

.catalogue__banner--has-bg::before { opacity: .82; }

.catalogue__intro {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: clamp(36px, 4vw, 60px);
}

/* Sized to hold the heading on one line rather than to a fixed scale: the vw
   term keeps it shrinking with the container, and the 2.6rem ceiling is set
   below what the longest sensible heading needs at the container's full width,
   so there is room to spare rather than a wrap waiting to happen. No measure
   cap - a max-width here is what forces the second line.

   Below roughly 600px the floor takes over and it wraps, which is right: one
   line on a phone would mean type too small to read. */
.catalogue__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.5rem, 3.4vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	text-wrap: balance;
}

/* A wide measure on purpose. 68ch is the right reading width for a column of
   body copy, but this is three centred sentences under a heading, and at that
   width the band ran far taller than it needed to.

   The two long paragraphs are around 1250px of type at a readable size, so they
   cannot be pulled onto one line inside a 1152px container - balance is what
   makes the pair they do take look deliberate, splitting them into two even
   lines instead of a long line and a short orphan. */
.catalogue__text {
	margin-top: 16px;
	max-width: min(100%, 1040px);
}

.catalogue__text > p {
	margin: 0 0 8px;
	color: rgba(255, 255, 255, .82);
	font-size: .98rem;
	line-height: 1.55;
	text-wrap: balance;
}

/* The first paragraph carries the section: given a little more weight and full
   white it reads as a standfirst, which lets the two behind it stay quiet. */
.catalogue__text > p:first-child {
	color: #fff;
	font-size: 1.1rem;
	font-weight: 500;
	margin-bottom: 10px;
}

.catalogue__text > p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   The two counts
   ---------------------------------------------------------------------- */

.catalogue__count {
	display: flex;
	align-items: stretch;
	gap: clamp(24px, 4vw, 48px);
	margin: 22px 0 0;
}

/* One hairline between the pair, drawn on the second - a border on both would
   leave a rule hanging at the end of the row. */
.catalogue__count-item + .catalogue__count-item {
	padding-left: clamp(24px, 4vw, 48px);
	border-left: 1px solid rgba(255, 255, 255, .22);
}

.catalogue__count-value {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(1.7rem, 2.6vw, 2.15rem);
	line-height: 1;
	color: #fff;
}

.catalogue__count-label {
	margin: 4px 0 0;
	font-size: .76rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .68);
}


/* -------------------------------------------------------------------------
   The practice-area bands
   ---------------------------------------------------------------------- */

.catalogue__group {
	padding-block: clamp(48px, 6vw, 88px);
	/* The anchor lands under a sticky header without this. */
	scroll-margin-top: calc(var(--fc-header-h) + 24px);
}

/* Every second band takes the soft ground, which is what separates one area
   from the next without a rule across the page. Tied to the flip class rather
   than nth-child, so the shade always follows the side the picture is on and
   neither depends on what else sits inside the section. */
.catalogue__group--flip { background: var(--fc-bg-soft); }

.catalogue__layout {
	display: grid;
	grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	gap: var(--cat-gap);
	align-items: start;
}

/* Odd bands keep the picture left; even bands send it right. Ordering rather
   than reversing the tracks, so the heading still comes first in the source. */
.catalogue__group--flip .catalogue__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
.catalogue__group--flip .catalogue__aside { order: 2; }

/* The picture holds still while its services scroll past it. */
.catalogue__sticky {
	position: sticky;
	top: calc(var(--fc-header-h) + 24px);
}

.catalogue__shot {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--fc-radius-lg);
	box-shadow: var(--fc-shadow);
	background: var(--fc-bg-soft);
}

.catalogue__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

/* Stands in for a missing photograph: a tinted plate ruled like ledger paper,
   so the column still has a shape instead of collapsing to nothing. */
.catalogue__plate {
	display: block;
	aspect-ratio: 4 / 3;
	background:
		repeating-linear-gradient(
			to bottom,
			transparent 0 38px,
			color-mix(in srgb, var(--fc-primary) 12%, transparent) 38px 39px
		),
		linear-gradient(150deg,
			color-mix(in srgb, var(--fc-primary) 14%, #fff),
			color-mix(in srgb, var(--fc-secondary) 10%, #fff));
}

/* The area number, sunk into the corner of the picture. */
.catalogue__badge {
	position: absolute;
	left: 0;
	bottom: 0;
	min-width: 74px;
	padding: 12px 18px;
	background: var(--fc-primary);
	color: #fff;
	border-top-right-radius: var(--fc-radius);
	font-family: var(--fc-font-display);
	font-size: 1.5rem;
	line-height: 1;
	text-align: center;
}

.catalogue__tally {
	margin: 16px 0 0;
	font-family: var(--fc-font-mono);
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fc-muted);
}

.catalogue__group-head { margin-bottom: 28px; }

.catalogue__group-title {
	margin: 0;
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	line-height: 1.2;
	letter-spacing: -.015em;
}

.catalogue__group-text {
	margin: 12px 0 0;
	max-width: 58ch;
	color: var(--fc-muted);
	font-size: 1.02rem;
	line-height: 1.7;
}

/* -------------------------------------------------------------------------
   An area laid out as cards
   ---------------------------------------------------------------------- */

/* The heading centres over the grid, and its measure is centred with it - left
   at 58ch and centred text, the last line would sit off the middle of the row
   it introduces. */
.catalogue__group-head--center {
	margin-bottom: clamp(28px, 3.5vw, 44px);
	text-align: center;
}

.catalogue__group-head--center .catalogue__group-text {
	margin-inline: auto;
	max-width: 62ch;
}

/* Three equal cards. perspective sits on the row rather than on each card, so
   the tilt on hover is seen from one shared vanishing point - per card, each
   would tip around its own centre and the row would read as three unrelated
   movements. */
.catalogue__cards {
	align-items: stretch;
	perspective: 1400px;
}

/* -------------------------------------------------------------------------
   Service card  (.svcx)

   Name, description, a Learn more button, and the picture along the foot. The
   card is a flex column and the picture takes margin-top:auto, which is what
   holds every picture in the row on one line however uneven the descriptions
   above them are.
   ---------------------------------------------------------------------- */

.svcx {
	/* Ink, set here and overridden per tone. Two of the three cards are dark
	   enough to carry white; the green one is not, and flips to dark ink instead
	   of dimming the colour until white survives on it. */
	--svcx-fg: #fff;
	--svcx-fg-soft: rgba(255, 255, 255, .84);
	--svcx-line: rgba(255, 255, 255, .3);
	--svcx-veil: rgba(255, 255, 255, .12);

	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(20px, 2vw, 28px);
	border-radius: var(--fc-radius-lg);
	background: var(--svcx-bg, var(--fc-dark));
	color: var(--svcx-fg);
	box-shadow: var(--fc-shadow-sm);
	transition: transform 420ms var(--fc-ease), box-shadow 420ms var(--fc-ease);
}

/* Black, green, red. The red is the banner's own, so the page holds one red
   rather than two that nearly match. */
.svcx[data-tone="1"] { --svcx-bg: #0f1216; }
.svcx[data-tone="3"] { --svcx-bg: var(--cat-red, #8b1219); }

/* The green carries dark ink. It is a mid tone, so neither extreme is free:
   white on it reaches only 3.1:1, under the 4.5:1 body text needs, while this
   green-black reaches 5.3:1. The ink is tinted toward the green rather than
   neutral, so the card reads as one colour lit two ways.

   The description sits at .9 rather than the .84 the dark cards use - any
   lighter and the softened ink drops back under 4.5:1 against this green. */
.svcx[data-tone="2"] {
	--svcx-bg: #3ea64a;
	--svcx-fg: #0b2410;
	--svcx-fg-soft: rgba(11, 36, 16, .9);
	--svcx-line: rgba(11, 36, 16, .34);
	--svcx-veil: rgba(11, 36, 16, .1);
}

/* Lifted and tipped back a little, as though the top edge were coming toward
   the reader. Kept small on purpose - past a few degrees the type on the far
   edge starts to blur. */
.svcx:hover,
.svcx:focus-within {
	transform: translateY(-8px) rotateX(5deg);
	box-shadow: var(--fc-shadow-lg);
}

/* -------------------------------------------------------------------------
   The words
   ---------------------------------------------------------------------- */

.svcx__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.svcx__title {
	margin: 0 0 10px;
	color: var(--svcx-fg);
	font-size: clamp(1.06rem, 1.15vw, 1.22rem);
	line-height: 1.3;
	letter-spacing: -.01em;
}

.svcx__anchor { color: inherit; text-decoration: none; }
.svcx__anchor:hover { text-decoration: underline; }

.svcx__text {
	margin: 0;
	color: var(--svcx-fg-soft);
	font-size: .93rem;
	line-height: 1.65;
}

/* Squared off and letter-spaced, the way the reference sets it - a pill here
   would read as the same object as the banner's buttons, which it is not. */
.svcx__read {
	display: inline-flex;
	align-items: center;
	margin-top: 18px;
	padding: 10px 18px;
	background: transparent;
	border: 1px solid var(--svcx-line);
	border-radius: var(--fc-radius-sm);
	color: var(--svcx-fg);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: background-color var(--fc-transition), border-color var(--fc-transition);
}

.svcx:hover .svcx__read,
.svcx:focus-within .svcx__read {
	background: var(--svcx-veil);
	border-color: var(--svcx-fg);
}

/* -------------------------------------------------------------------------
   The picture, along the foot

   margin-top:auto is what lines the pictures up across the row. The height is
   fixed rather than an aspect ratio so that three cards of unequal description
   still finish level.
   ---------------------------------------------------------------------- */

.svcx__media {
	margin: clamp(20px, 2vw, 26px) 0 0;
	margin-top: auto;
	padding-top: clamp(20px, 2vw, 26px);
	overflow: hidden;
	border-radius: var(--fc-radius);
}

.svcx__img,
.svcx__plate {
	display: block;
	width: 100%;
	height: clamp(150px, 15vw, 190px);
	border-radius: var(--fc-radius);
}

.svcx__img { object-fit: cover; }

/* Stands in until a picture is set. Ruled in the card's own tone rather than a
   neutral grey, so an unfilled card still looks finished instead of looking
   broken - and the ruling turns with the card's position, so three of them read
   as three cards rather than one repeated three times. */
.svcx__plate {
	background:
		repeating-linear-gradient(
			calc(120deg + (var(--svcx-i, 1) * 20deg)),
			transparent 0 22px,
			var(--svcx-line) 22px 23px
		),
		var(--svcx-veil);
}

/* The tilt is the whole of the movement, so it is what goes when someone has
   asked for less of it. The lift stays: it is what says the card is live. */
@media (prefers-reduced-motion: reduce) {
	.svcx { transition-duration: 1ms; }

	.svcx:hover,
	.svcx:focus-within { transform: translateY(-4px); }
}

/* -------------------------------------------------------------------------
   Service row  (.svcrow)

   The wide list card: picture down the left, words to the right of it, two to a
   row. It suits a practice area of five or six, where three colour cards across
   would leave each description too narrow - the card runs the other way, so a
   long description gets width instead of depth.
   ---------------------------------------------------------------------- */

.catalogue__cards--rows {
	--rows-gap: clamp(16px, 1.8vw, 24px);

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rows-gap);
	align-items: stretch;

	/* The tilt belongs to the colour cards; these lift flat. */
	perspective: none;
}

/* An odd last card centres itself rather than sitting alone against the left
   edge. :last-child:nth-child(odd) is true only when the count is odd - five
   centres the fifth, six leaves all six alone - so the rule reads the count
   without anything having to pass it in. */
.catalogue__cards--rows > :last-child:nth-child(odd) {
	grid-column: 1 / -1;
	width: calc(50% - (var(--rows-gap) / 2));
	margin-inline: auto;
}

.svcrow {
	display: flex;
	overflow: hidden;
	background: var(--fc-bg);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
	box-shadow: var(--fc-shadow-sm);
	transition: transform var(--fc-transition), box-shadow var(--fc-transition),
	            border-color var(--fc-transition);
}

.svcrow:hover,
.svcrow:focus-within {
	transform: translateY(-3px);
	border-color: var(--fc-primary-line);
	box-shadow: var(--fc-shadow);
}

/* -------------------------------------------------------------------------
   The picture down the left
   ---------------------------------------------------------------------- */

/* A fixed column, not a share of the width: it has to stay a picture rather
   than a stripe as the card narrows between breakpoints. */
.svcrow__media {
	flex: 0 0 clamp(92px, 11vw, 132px);
	margin: 0;
	overflow: hidden;
	background: var(--fc-bg-soft);
}

.svcrow__img,
.svcrow__plate {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
}

.svcrow__img { object-fit: cover; }

/* Stands in until a picture is set, ruled at an angle that turns with the
   card's position so a column of them does not read as one tile repeated. */
.svcrow__plate {
	background:
		repeating-linear-gradient(
			calc(115deg + (var(--row-i, 1) * 22deg)),
			transparent 0 20px,
			color-mix(in srgb, var(--fc-primary) 11%, transparent) 20px 21px
		),
		linear-gradient(155deg,
			color-mix(in srgb, var(--fc-primary) 13%, #fff),
			color-mix(in srgb, var(--fc-secondary) 9%, #fff));
}

/* -------------------------------------------------------------------------
   The words
   ---------------------------------------------------------------------- */

/* min-width:0 is what lets this shrink: without it a flex item refuses to go
   below its longest word and the picture loses its column. */
.svcrow__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 auto;
	min-width: 0;
	padding: clamp(16px, 1.5vw, 22px);
}

.svcrow__title {
	margin: 0 0 8px;
	font-size: 1.06rem;
	line-height: 1.35;
	letter-spacing: -.01em;
}

.svcrow__anchor { color: inherit; text-decoration: none; }

.svcrow__anchor:hover,
.svcrow__anchor:focus-visible { color: var(--fc-primary); }

.svcrow__text {
	margin: 0;
	color: var(--fc-text);
	font-size: .92rem;
	line-height: 1.65;
}

/* margin-top:auto holds the foot on the floor of the card, so two cards of
   unequal description still finish level. */
.svcrow__foot {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	margin-top: auto;
	padding-top: 14px;
}

.svcrow__read {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--fc-heading);
	font-size: .88rem;
	font-weight: 600;
}

.svcrow:hover .svcrow__read,
.svcrow:focus-within .svcrow__read { color: var(--fc-primary); }

/* Drawn rather than a character, so it takes the colour around it and never
   depends on a font carrying the glyph. */
.svcrow__arrow {
	width: 15px;
	height: 15px;
	background: currentColor;
	transition: transform var(--fc-transition);
	-webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M5 13h11.2l-4.6 4.6L13 19l7-7-7-7-1.4 1.4L16.2 11H5z'/%3E%3C/svg%3E");
	        mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M5 13h11.2l-4.6 4.6L13 19l7-7-7-7-1.4 1.4L16.2 11H5z'/%3E%3C/svg%3E");
}

.svcrow:hover .svcrow__arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.svcrow,
	.svcrow__arrow { transition-duration: 1ms; }
}



/* -------------------------------------------------------------------------
   The services themselves
   ---------------------------------------------------------------------- */

.catalogue__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--fc-border);
}

.catalogue__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 4px 20px;
	padding: 24px 20px 24px 0;
	border-bottom: 1px solid var(--fc-border);
	transition: background-color var(--fc-transition), padding-left var(--fc-transition);
}

/* A rest for the eye rather than a highlight - it moves in slightly and picks
   up the ground, which is enough to tell one row from its neighbours. */
.catalogue__item:hover {
	background: color-mix(in srgb, var(--fc-primary) 4%, transparent);
	padding-left: 12px;
}

.catalogue__item-num {
	font-family: var(--fc-font-mono);
	font-size: .82rem;
	line-height: 1.9;
	color: var(--fc-primary);
	letter-spacing: .04em;
}

.catalogue__item-title {
	margin: 0 0 8px;
	font-size: 1.16rem;
	line-height: 1.4;
	letter-spacing: -.01em;
}

.catalogue__item-anchor {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}

.catalogue__item-anchor:hover,
.catalogue__item-anchor:focus-visible { color: var(--fc-primary); }

/* Drawn rather than a character, so it inherits the colour and never depends
   on a font that may not carry the glyph. */
.catalogue__item-arrow {
	width: 16px;
	height: 16px;
	flex: none;
	background: currentColor;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--fc-transition), transform var(--fc-transition);
	-webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M5 13h11.2l-4.6 4.6L13 19l7-7-7-7-1.4 1.4L16.2 11H5z'/%3E%3C/svg%3E");
	        mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M5 13h11.2l-4.6 4.6L13 19l7-7-7-7-1.4 1.4L16.2 11H5z'/%3E%3C/svg%3E");
}

.catalogue__item--link:hover .catalogue__item-arrow,
.catalogue__item-anchor:focus-visible .catalogue__item-arrow {
	opacity: 1;
	transform: translateX(0);
}

.catalogue__item-text {
	margin: 0;
	max-width: 68ch;
	line-height: 1.75;
}

.catalogue__actions {
	display: flex;
	justify-content: center;
	padding-block: clamp(48px, 6vw, 80px);
}

/* =========================================================================
   12  PAGE BANNER & BREADCRUMBS
   ====================================================================== */
.page-banner {
	position: relative;
	background: var(--fc-secondary) center / cover no-repeat;
	color: #fff;
	text-align: center;
}

.page-banner__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 42, 74, .82), rgba(15, 42, 74, .74));
}

.page-banner__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.page-banner--sm .page-banner__inner { min-height: 190px; padding-block: 44px; }
.page-banner--md .page-banner__inner { min-height: 270px; padding-block: 60px; }
.page-banner--lg .page-banner__inner { min-height: 380px; padding-block: 80px; }

.page-banner__title { margin: 0; color: #fff; }

.page-banner__subtitle {
	margin: 0;
	max-width: 62ch;
	color: rgba(255, 255, 255, .82);
	font-size: 1.05rem;
}

.breadcrumbs { font-size: .9rem; }

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: rgba(255, 255, 255, .72);
}

.breadcrumbs__list li + li::before {
	content: "/";
	margin-right: 8px;
	opacity: .5;
}

.breadcrumbs a { color: rgba(255, 255, 255, .9); }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.breadcrumbs [aria-current] { color: #fff; font-weight: 600; }

/* =========================================================================
   13  CONTACT, FORM & MAP
   ====================================================================== */
/* -------------------------------------------------------------------------
   13a  LET'S CONNECT  (.connect)

   The contact page opens as one screen split in two: a dark plate carrying the
   mark and a single line about the firm, and the enquiry form beside it on
   white. Nothing sits above it - the split is the page's title band as well as
   its form, which is why the template drops the usual band while it is shown.

   The form's own markup belongs to whichever plugin renders it, so everything
   here is written against `.connect__form form` and the elements inside it
   rather than against any plugin's class names. Contact Form 7's output and the
   built-in placeholder form are therefore styled by the same rules, and the
   design survives a change of plugin.
   ---------------------------------------------------------------------- */
.connect { position: relative; }

.connect__split {
	display: grid;

	/* The plate is a column, not a half: held to a width the photographs read
	   at, with everything left over going to the form. */
	grid-template-columns: clamp(240px, 26vw, 420px) minmax(0, 1fr);
	background: #fff;

	/* One screen under the header, never shorter than its own content needs. */
	min-height: calc(100vh - var(--fc-header-h));
	min-height: calc(100svh - var(--fc-header-h));
}

/* The opening act exists only while the script is driving the section. */
.connect__scroll,
.connect__act { display: none; }

/* =====================================================================
   ANIMATED STATE - added by the theme script when it can run.

   The section opens like the home page: the photographs in a row across a
   pinned screen with the words oversized beneath them, then the row flies
   into the column as the split screen rises to meet it.

   The frames are the plate's own pictures, not copies. The script measures
   where they already sit, lifts them to fixed position for the flight and
   hands them back at the end - so the landing is exact by construction, and
   nothing is left over to fade out.

   The split is pulled up by one screen so that the moment the pin releases
   is the moment it is in place; it paints over the spent stage rather than
   after it.
   ================================================================== */
.connect--anim .connect__scroll {
	display: block;
	height: 210vh;
}

.connect--anim .connect__stage {
	position: sticky;
	top: var(--fc-hh, 0px);
	z-index: 1;
	display: flex;
	align-items: flex-end;
	height: calc(100vh - var(--fc-hh, 0px));
	height: calc(100svh - var(--fc-hh, 0px));
	overflow: hidden;
	background: var(--fc-bg);
}

.connect--anim .connect__act {
	display: flex;
	align-items: flex-end;
	width: 100%;
	padding-bottom: clamp(28px, 7vh, 92px);
	will-change: opacity, transform;
}

.connect--anim .connect__act > .container { width: 100%; }

.connect--anim .connect__split {
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * (100vh - var(--fc-hh, 0px)));
	margin-top: calc(-1 * (100svh - var(--fc-hh, 0px)));
}

/* Starting values for everything the script drives, so the first paint has
   nothing to correct. The split cannot be reached with the keyboard until it
   has actually arrived. */
.connect--anim .connect__plate { background-color: transparent; }
.connect--anim .connect__panel { opacity: 0; }
.connect--anim .connect__veil,
.connect--anim .connect__mark { opacity: 0; }
.connect--anim .connect__split { pointer-events: none; }
.connect--anim.is-arrived .connect__split { pointer-events: auto; }

/* The frames leave the plate's clip while they are in the air. */
.connect--anim .connect__plate { overflow: visible; }
.connect--anim .connect__strip { overflow: visible; }

.connect--anim .connect__frame {
	will-change: left, top, width, height;
	contain: paint;
}

/* The words. One line, scaled by the script to whatever the container can
   hold, so a longer heading gets smaller type rather than a second line. */
.connect__brand {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: var(--connect-type-size, min(10vw, 17vh));
	font-weight: 900;
	line-height: .86;
	letter-spacing: -.045em;
	text-transform: uppercase;
	color: var(--fc-heading);
	white-space: nowrap;
}

/* --- The plate on the left --- */
.connect__plate {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding: clamp(28px, 3.4vw, 64px);
	background-color: #0e1013;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
}

/* The home page's photographs, one per line down the plate. Equal rows, so the
   column divides itself however many arrive; the hairline between them is the
   dark ground showing through. Colour is drained to match the strip they were
   taken from on the home page. */
.connect__strip {
	position: absolute;

	/* Held off all four edges, so the plate frames the column rather than the
	   pictures running into it; the same measure sits between them. */
	inset: clamp(10px, 1.1vw, 18px);
	display: grid;
	grid-auto-rows: 1fr;
	gap: clamp(10px, 1.1vw, 18px);
}

.connect__frame {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: clamp(10px, 1vw, 16px);
}

.connect__frame-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.04);
}

/* Darkens the picture from the foot upwards, so the mark and its line hold
   their contrast whatever photograph is dropped behind them. */
.connect__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 9, 11, .94) 0%, rgba(8, 9, 11, .68) 20%, rgba(8, 9, 11, .24) 48%, rgba(8, 9, 11, .1) 100%);
}

.connect__mark {
	position: relative;
	z-index: 1;
	max-width: 34rem;
}

.connect__logo {
	width: clamp(120px, 13vw, 190px);
	height: auto;
}

/* Stands in for a logo that has not been set. */
.connect__wordmark {
	display: block;
	font-family: var(--fc-font-display);
	font-size: clamp(1.5rem, 2.4vw, 2.2rem);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -.03em;
}

.connect__blurb {
	margin: clamp(14px, 1.6vw, 22px) 0 0;
	max-width: 30ch;
	color: rgba(255, 255, 255, .78);
	font-size: clamp(.95rem, 1.05vw, 1.08rem);
	line-height: 1.7;
}

/* --- The panel on the right --- */
.connect__panel {
	display: grid;
	align-content: center;

	/* Less room above than below: the form is taller than the screen, so the
	   centring never comes into play and the top padding alone decides how far
	   down the heading starts. It should start high. */
	padding: clamp(24px, 2.4vw, 44px) clamp(24px, 4.6vw, 88px) clamp(40px, 5vw, 96px);
}

.connect__inner {
	width: 100%;
	max-width: 44rem;
}

.connect__badge {
	margin: 0 0 clamp(10px, 1.2vw, 16px);
	color: var(--fc-accent-mark);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.connect__title {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(2.4rem, 5.2vw, 4.6rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.045em;
	color: var(--fc-heading);
	text-wrap: balance;
}

.connect__lead {
	margin: clamp(14px, 1.6vw, 22px) 0 0;
	max-width: 46ch;
	color: var(--fc-muted);
	font-size: clamp(.98rem, 1.1vw, 1.1rem);
	line-height: 1.7;
}

/* --- The form, whoever renders it --- */
.connect__form { margin-top: clamp(28px, 3.4vw, 52px); }

.connect__form form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 28px) clamp(18px, 2.2vw, 32px);
	margin: 0;
}

.connect__form form > p { margin: 0; }

/* The first four fields pair off; everything from the service select down runs
   the full width. Counting is what keeps this independent of the plugin - the
   fields arrive as a flat run of paragraphs with no wrapper to hook onto. */
.connect__form form > p:nth-of-type(n+5),
.connect__form form > div,
.connect__form form > fieldset { grid-column: 1 / -1; }

/* The plugin keeps its bookkeeping inputs in the form. They are hidden by its
   own stylesheet, and hidden here too in case a site has turned that off -
   visible, they would take the first cell and shift every field along by one. */
.connect__form .hidden-fields-container { display: none; }

.connect__form label {
	display: block;
	color: var(--fc-heading);
	font-size: .84rem;
	font-weight: 600;
	line-height: 1.4;
}

/* The line break a form plugin writes between a label and its control. The
   spacing below does that job, and does it to a rhythm. */
.connect__form label > br { display: none; }

.connect__form label > input,
.connect__form label > select,
.connect__form label > textarea,
.connect__form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	margin-top: 10px;
}

.connect__form input[type="text"],
.connect__form input[type="email"],
.connect__form input[type="tel"],
.connect__form input[type="url"],
.connect__form input[type="number"],
.connect__form select,
.connect__form textarea {
	padding: 14px 18px;
	border: 1px solid var(--fc-border);
	border-radius: 10px;
	background-color: #fff;
	color: var(--fc-heading);
	font-size: .96rem;
}

/* The plugin asks for ten rows, which is half a screen. A set height keeps the
   field in proportion with the ones above it; it can still be dragged taller. */
.connect__form textarea { height: clamp(128px, 13vw, 156px); min-height: 0; }

.connect__form input::placeholder,
.connect__form textarea::placeholder { color: #9aa5b4; }

/* Replaces the chevron the browser would otherwise draw in its own style. */
.connect__form select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 46px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 18px 18px;
}

/* --- The consent line --- */
.connect__form .wpcf7-list-item { margin: 0; }

.connect__form .wpcf7-list-item label,
.connect__form .connect__consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--fc-muted);
	font-size: .88rem;
	font-weight: 500;
	line-height: 1.6;
}

.connect__form input[type="checkbox"] {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 3px 0 0;
	accent-color: var(--fc-accent-mark);
}

/* The outer label the shortcode wraps the checkbox in carries no text of its
   own, so it drops the field-label treatment. */
.connect__form label:has(.wpcf7-acceptance) { font-size: inherit; font-weight: 500; }
.connect__form label:has(.wpcf7-acceptance) .wpcf7-form-control-wrap { margin-top: 0; }

/* --- Send --- */
.connect__form input[type="submit"],
.connect__form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 34px;
	border: 1px solid var(--fc-dark);
	border-radius: var(--fc-radius-pill);
	background-color: var(--fc-dark);
	color: #fff;
	font: inherit;
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: transform var(--fc-transition), box-shadow var(--fc-transition),
	            background-color var(--fc-transition), border-color var(--fc-transition);
}

.connect__form input[type="submit"]:hover,
.connect__form button[type="submit"]:hover {
	background-color: var(--fc-accent-mark);
	border-color: var(--fc-accent-mark);
	transform: translateY(-2px);
	box-shadow: var(--fc-shadow);
}

.connect__form input[type="submit"]:active,
.connect__form button[type="submit"]:active { transform: translateY(0); }

/* The button closes the form, held to the right as in the reference. It is the
   last paragraph in every form the section renders, which is a surer hold than
   the plugin's own class names. */
.connect__form form > p:last-of-type { text-align: right; }

/* The arrow is painted into the control rather than added beside it: a submit
   input holds no markup of its own, so a background is the only place to put
   it. `background-color` above, never the shorthand, or this would be wiped. */
.connect__form input[type="submit"],
.connect__form button[type="submit"] {
	padding-right: 62px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 28px center;
	background-size: 16px 16px;
}

/* Contact Form 7 keeps a spinner, a response line and its validation tips
   inside the form; each is given the same manners as the rest.

   The spinner is only hidden by the plugin, not removed, so it holds a gap open
   between the button and the edge it is supposed to sit against. Taking it out
   of the flow until the form is actually submitting closes that gap. */
.connect__form .wpcf7-spinner { display: none; margin: 0 0 0 14px; }
.connect__form form.submitting .wpcf7-spinner { display: inline-block; }

/* Specific enough to win against the plugin's own margins on this line. */
.connect .wpcf7 form .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 0;
	padding: 14px 18px;
	border: 1px solid var(--fc-border);
	border-radius: 10px;
	color: var(--fc-heading);
	font-size: .92rem;
}

.connect__form .wpcf7-not-valid-tip {
	margin-top: 7px;
	color: var(--fc-accent-mark);
	font-size: .82rem;
	font-weight: 500;
}

.connect__form input.wpcf7-not-valid,
.connect__form select.wpcf7-not-valid,
.connect__form textarea.wpcf7-not-valid { border-color: var(--fc-accent-mark); }

.connect__note,
.connect__hint {
	margin: clamp(16px, 1.8vw, 22px) 0 0;
	color: var(--fc-muted);
	font-size: .86rem;
}


/* -------------------------------------------------------------------------
   13c  CONTACTS / OFFICES  (.offices)

   The heading, then the offices side by side. Each column carries the country
   with a pin against it, the address, the link that opens it in Google Maps and
   that office's numbers as buttons that dial.

   The hairline between columns is drawn as a left border on every column but
   the first in its row, which is what keeps it from hanging off the end when
   the row wraps or the count changes.
   ---------------------------------------------------------------------- */
.offices { padding-block: clamp(56px, 7vw, 110px); }

.offices__badge {
	margin: 0 0 clamp(10px, 1.2vw, 16px);
	color: var(--fc-accent-mark);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.offices__title {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(2rem, 4vw, 3.4rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.035em;
	color: var(--fc-heading);
}

.offices__lead {
	margin: clamp(12px, 1.4vw, 20px) 0 0;
	max-width: 62ch;
	color: var(--fc-muted);
	font-size: clamp(.98rem, 1.1vw, 1.1rem);
	line-height: 1.7;
}

.offices__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
	margin-top: clamp(32px, 4vw, 64px);
}

/* Two offices sit better as halves than as two thirds of a row. */
.offices__grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.offices__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offices__grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.office + .office {
	padding-left: clamp(24px, 3vw, 48px);
	border-left: 1px solid var(--fc-border);
}

.office__name {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(1.15rem, 1.5vw, 1.45rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--fc-heading);
}

.office__pin {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--fc-accent-mark);
}

.office__address {
	margin: clamp(12px, 1.4vw, 18px) 0 0;
	color: var(--fc-text);
	font-size: clamp(.95rem, 1.05vw, 1.02rem);
	line-height: 1.75;
}

.office__map {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: clamp(12px, 1.4vw, 18px);
	color: var(--fc-heading);
	font-size: .92rem;
	font-weight: 600;
	border-bottom: 1px solid var(--fc-border);
	padding-bottom: 3px;
	transition: color var(--fc-transition), border-color var(--fc-transition);
}

.office__map:hover {
	color: var(--fc-accent-mark);
	border-color: var(--fc-accent-mark);
}

/* The same arrow as the rest of the page, turned to point out of it. */
.office__map-go {
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
	transform: rotate(-45deg);
	transition: transform var(--fc-transition);
}

.office__map:hover .office__map-go { transform: rotate(-45deg) translateX(3px); }

.office__phones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: clamp(16px, 1.8vw, 24px) 0 0;
	padding: 0;
	list-style: none;
}

/* One button per number, sized to the number rather than to the column, so a
   short mobile and a long landline sit side by side without stretching. */
.office__phone {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 16px;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-pill);
	background: #fff;
	color: var(--fc-heading);
	font-size: .92rem;
	font-weight: 500;
	white-space: nowrap;
	transition: border-color var(--fc-transition), background var(--fc-transition), color var(--fc-transition);
}

.office__phone .icon {
	width: 15px;
	height: 15px;
	color: var(--fc-accent-mark);
	transition: color var(--fc-transition);
}

.office__phone:hover {
	border-color: var(--fc-heading);
	background: var(--fc-bg-soft);
	color: var(--fc-heading);
}

/* --- The map, and the switch that chooses it ---------------------------

   A radio group with its buttons drawn as labels. The radios come first in
   the markup so the checked one can reach both its own tab and its own map
   through the sibling combinator; that is the whole mechanism, and it means
   the map is never blank while a script loads, or after one fails.

   Four sets of rules, one per slot, because the count is fixed at four. */
.offices__locator { margin-top: clamp(36px, 4.4vw, 72px); }

/* Off-screen but still focusable: the tabs are reachable by keyboard, and the
   arrow keys move between them as they do in any radio group. */
.offices__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.offices__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	width: fit-content;
	margin: 0 auto clamp(20px, 2.4vw, 32px);
	padding: 6px;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-pill);
	background: var(--fc-bg-soft);
}

.offices__tab {
	padding: 11px 30px;
	border-radius: var(--fc-radius-pill);
	color: var(--fc-heading);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	transition: background var(--fc-transition), color var(--fc-transition);
}

.offices__tab:hover { background: rgba(15, 23, 42, .06); }

.offices__maps {
	overflow: hidden;
	border-radius: clamp(14px, 1.4vw, 22px);
	border: 1px solid var(--fc-border);
	background: var(--fc-bg-soft);
}

.offices__map { display: none; }

.offices__map iframe {
	display: block;
	width: 100%;
	height: clamp(320px, 44vw, 560px);
	border: 0;
}

/* The chosen tab, and the map that goes with it. */
.offices__radio:nth-of-type(1):checked ~ .offices__tabs .offices__tab:nth-child(1),
.offices__radio:nth-of-type(2):checked ~ .offices__tabs .offices__tab:nth-child(2),
.offices__radio:nth-of-type(3):checked ~ .offices__tabs .offices__tab:nth-child(3),
.offices__radio:nth-of-type(4):checked ~ .offices__tabs .offices__tab:nth-child(4) {
	background: var(--fc-accent-mark);
	color: #fff;
}

.offices__radio:nth-of-type(1):checked ~ .offices__maps .offices__map:nth-child(1),
.offices__radio:nth-of-type(2):checked ~ .offices__maps .offices__map:nth-child(2),
.offices__radio:nth-of-type(3):checked ~ .offices__maps .offices__map:nth-child(3),
.offices__radio:nth-of-type(4):checked ~ .offices__maps .offices__map:nth-child(4) { display: block; }

/* Keyboard focus has to be drawn on the label, since the radio itself is not
   where the eye is. */
.offices__radio:nth-of-type(1):focus-visible ~ .offices__tabs .offices__tab:nth-child(1),
.offices__radio:nth-of-type(2):focus-visible ~ .offices__tabs .offices__tab:nth-child(2),
.offices__radio:nth-of-type(3):focus-visible ~ .offices__tabs .offices__tab:nth-child(3),
.offices__radio:nth-of-type(4):focus-visible ~ .offices__tabs .offices__tab:nth-child(4) {
	outline: 3px solid var(--fc-primary);
	outline-offset: 2px;
}

/* One office needs no switch. */
.offices__locator[data-count="1"] .offices__tabs { display: none; }


/* -------------------------------------------------------------------------
   13b  STAY CONNECTED  (.stay)

   A dark band carrying the heading, and under it one row per network the full
   width of the page. At rest the rows are the same dark ground divided by
   hairlines; hovering one fills it with that network's own colour, brings its
   logo in beside the name and sends the arrow up and out.

   The logos are the masked glyphs the header and footer already use, shown
   here the way each network shows its own: white on the brand's ground. That
   is why the row takes the colour and the mark stays white, rather than a
   coloured logo being dropped onto a neutral row.
   ---------------------------------------------------------------------- */
.stay {
	--stay-ground: #0b0d10;

	background: var(--stay-ground);
	color: #fff;
}

/* --- The heading --- */
.stay__head {
	padding-block: clamp(56px, 7vw, 118px);
	text-align: center;
}

.stay__badge {
	margin: 0 0 clamp(10px, 1.2vw, 16px);
	color: var(--fc-accent-mark);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* The heading and its line follow the type scale supplied with the design:
   medium weight, 32px/44px from 1024 up and 36px/46px from 1536, over a 20px
   body line. Fixed sizes rather than the theme's usual clamp, because the
   scale names its steps and the steps are what was asked for. */
.stay__title {
	margin: 0;
	color: #fff;
	font-family: var(--fc-font-display);
	font-size: 26px;
	font-weight: 700;
	line-height: 36px;
	letter-spacing: -.02em;
	text-wrap: balance;
}

@media (min-width: 1024px) {
	.stay__title { font-size: 32px; line-height: 44px; }
}

@media (min-width: 1536px) {
	.stay__title { font-size: 36px; line-height: 46px; }
}

/* Wide enough for "...stay informed of our latest" to finish the first line,
   so the sentence breaks where the reference breaks it. */
.stay__lead {
	margin: clamp(14px, 1.8vw, 24px) auto 0;
	max-width: 57ch;
	color: rgba(255, 255, 255, .66);
	font-size: 20px;
	line-height: 30px;
}

/* --- A row --- */
.stay__rows { border-top: 1px solid rgba(255, 255, 255, .12); }

.stay__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.8vw, 28px);
	padding: clamp(26px, 3.2vw, 58px) clamp(20px, 4.4vw, 84px);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	color: #fff;
	text-decoration: none;

	/* Both are swapped in per network below; these are the fallbacks for a
	   network the theme does not know a colour for. */
	--stay-brand: var(--fc-accent-mark);
	--stay-ink: #fff;

	transition: background var(--fc-transition), color var(--fc-transition);
}

.stay__row:hover,
.stay__row:focus-visible {
	background: var(--stay-brand);
	color: var(--stay-ink);
}

/* Sized off the reference: about 48px on a wide screen, not the theme's
   usual poster type - the row is a list entry, not a headline. */
.stay__name {
	font-family: var(--fc-font-display);
	font-size: clamp(1.7rem, 2.6vw, 3rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.04em;
}

/* The logo, held at nothing wide until the row is hovered, so the name never
   shifts sideways to make room for it - the mark grows into the gap instead. */
.stay__mark {
	display: grid;
	place-items: center;
	overflow: hidden;
	width: 0;
	opacity: 0;
	transition: width var(--fc-transition), opacity var(--fc-transition);
}

.stay__row:hover .stay__mark,
.stay__row:focus-visible .stay__mark {
	width: clamp(30px, 3.4vw, 52px);
	opacity: 1;
}

.stay__glyph {
	display: block;
	width: clamp(28px, 3.2vw, 48px);
	aspect-ratio: 1;
	background-color: currentColor;
	-webkit-mask: var(--i) center / contain no-repeat;
	mask: var(--i) center / contain no-repeat;
}

/* The arrow sits opposite the name and leaves in the direction it points. */
.stay__go {
	width: clamp(22px, 2.4vw, 34px);
	aspect-ratio: 1;
	margin-left: auto;
	background-color: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
	transform: rotate(-45deg);
	transition: transform var(--fc-transition);
}

.stay__row:hover .stay__go,
.stay__row:focus-visible .stay__go { transform: rotate(-45deg) translateX(6px); }

/* A network whose address has not been entered yet. It keeps its place and
   still lights up on hover, so the set reads as one, but it does not pretend
   to lead anywhere: no pointer, and the arrow steps back. */
.stay__row--soon { cursor: default; }
.stay__row--soon .stay__go { opacity: .35; }

/* Each network's own colour, and the ink that network sets its logo in. */
.stay__row--instagram {
	--stay-brand: radial-gradient(circle at 28% 108%, #fdf497 0%, #fd5949 42%, #d6249f 68%, #285aeb 100%);
	--stay-ink: #fff;
}

.stay__row--facebook { --stay-brand: #1877f2; --stay-ink: #fff; }
.stay__row--linkedin { --stay-brand: #0a66c2; --stay-ink: #fff; }
.stay__row--twitter  { --stay-brand: #1d1f23; --stay-ink: #fff; }
.stay__row--youtube  { --stay-brand: #ff0000; --stay-ink: #fff; }
.stay__row--whatsapp { --stay-brand: #25d366; --stay-ink: #06301f; }


.contact-form__inner {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

.contact-form--left .contact-form__panel { order: -1; }

.contact-form__media {
	margin-top: 24px;
	border-radius: var(--fc-radius-lg);
	overflow: hidden;
}

.contact-form__details {
	display: grid;
	gap: 14px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.contact-form__details li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--fc-heading);
}

.contact-form__details .icon { color: var(--fc-primary); margin-top: 4px; }

.contact-form__panel {
	padding: clamp(24px, 3.4vw, 40px);
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
	box-shadow: var(--fc-shadow-sm);
}

.contact-form__note,
.fc-form__hint {
	margin: 16px 0 0;
	color: var(--fc-muted);
	font-size: .86rem;
	text-align: center;
}

/* Forms (also styles most form plugins, which output plain inputs) */
.fc-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.fc-form__field { margin-bottom: 18px; }

.fc-form label,
.comment-form label {
	display: block;
	margin-bottom: 7px;
	color: var(--fc-heading);
	font-size: .9rem;
	font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-sm);
	background: #fff;
	color: var(--fc-heading);
	font: inherit;
	font-size: .96rem;
	transition: border-color var(--fc-transition), box-shadow var(--fc-transition);
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--fc-primary);
	box-shadow: 0 0 0 4px var(--fc-primary-soft);
}

textarea { resize: vertical; min-height: 130px; }

input::placeholder,
textarea::placeholder { color: #a0aec0; }

/* Map */
.map { position: relative; }
.map__title { text-align: center; margin-bottom: 24px; }
.map__embed { line-height: 0; }
.map__embed iframe { width: 100%; border: 0; display: block; }

.map--sm .map__embed iframe { height: 320px; }
.map--md .map__embed iframe { height: 440px; }
.map--lg .map__embed iframe { height: 600px; }

/* =========================================================================
   14  BLOG, SIDEBAR, WIDGETS, PAGINATION, COMMENTS
   ====================================================================== */
/* -------------------------------------------------------------------------
   14a  BLOG PAGE  (.blogx)

   The articles down the left, the search box and categories in a rail at the
   right that stays put as the list scrolls past it.

   Two card shapes: wide, with the picture beside the article, for the lead and
   for every row of the full list; and upright, for the pair beneath the lead.
   Both are one link - the arrow tile on the wide card is decoration that makes
   that visible, not a second target.
   ---------------------------------------------------------------------- */
.blogx {
	position: relative;
	padding-block: clamp(48px, 6vw, 96px);
}

/* --- The washes at the top corners ---------------------------------------

   Two large, very soft circles bleeding in from the left and right edges, the
   way the reference tints the head of its page. They are drawn as radial
   gradients rather than blurred shapes, so there is no filter to pay for on a
   box this size, and they sit in their own clipped box: an overflow set on the
   section itself would become the rail's scrollport and stop it sticking.
   ---------------------------------------------------------------------- */
.blogx__glows {
	position: absolute;
	inset: 0 0 auto;
	height: clamp(340px, 44vw, 660px);
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.blogx__glow {
	position: absolute;
	top: clamp(-280px, -20vw, -110px);
	width: clamp(380px, 48vw, 820px);
	aspect-ratio: 1;
	border-radius: 50%;
}

/* Flat rgba first, for browsers without color-mix(); the brand versions follow
   so the washes track the accent set in Theme Settings. */
.blogx__glow--a {
	left: clamp(-260px, -14vw, -70px);
	background: radial-gradient(circle at 50% 50%, rgba(206, 31, 40, .18) 0%, rgba(206, 31, 40, .07) 42%, transparent 70%);
	background: radial-gradient(circle at 50% 50%,
		color-mix(in srgb, var(--fc-accent-mark) 18%, transparent) 0%,
		color-mix(in srgb, var(--fc-accent-mark) 7%, transparent) 42%,
		transparent 70%);
}

.blogx__glow--b {
	right: clamp(-260px, -14vw, -70px);
	background: radial-gradient(circle at 50% 50%, rgba(11, 92, 213, .16) 0%, rgba(11, 92, 213, .06) 42%, transparent 70%);
	background: radial-gradient(circle at 50% 50%,
		color-mix(in srgb, var(--fc-primary) 16%, transparent) 0%,
		color-mix(in srgb, var(--fc-primary) 6%, transparent) 42%,
		transparent 70%);
}

/* The washes start at the very top of the page, behind the header, the way the
   reference does it. Two things make that work:

     - the box reaches up by the header's measured height, so the strongest part
       of each circle sits level with the masthead rather than under it;
     - the header is transparent while the page is at rest on the blog, and the
       script's own `is-stuck` rule paints it solid the moment you scroll, so
       nothing is ever read against a moving wash.

   Scoped to the blog: `.blog` is the posts page, the other is the template. */
body.blog .site-header:not(.is-stuck),
body.page-template-template-blog .site-header:not(.is-stuck) {
	background: transparent;
}

body.blog .site-header:not(.is-stuck) .header-main,
body.page-template-template-blog .site-header:not(.is-stuck) .header-main {
	border-bottom-color: transparent;
}

.blogx__glows {
	top: calc(-1 * var(--fc-hh, 0px));
	height: calc(clamp(340px, 44vw, 660px) + var(--fc-hh, 0px));
}

/* The articles and the rail sit over the washes. */
.blogx__layout {
	position: relative;
	z-index: 1;
}

/* The columns stretch to the taller of the two, which is what gives the rail
   room to stay put: a sticky element can only travel inside its own box, and a
   start-aligned column is only as tall as its contents. */
.blogx__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 380px);
	gap: clamp(28px, 3.6vw, 64px);
	align-items: stretch;
}

.blogx__layout--full { grid-template-columns: minmax(0, 1fr); }

.blogx__block + .blogx__block { margin-top: clamp(48px, 6vw, 92px); }

/* --- A block's heading --- */
.blogx__head { margin-bottom: clamp(24px, 3vw, 44px); }

.blogx__title {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(2rem, 4vw, 3.4rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.035em;
	color: var(--fc-heading);
}

/* The highlighted half of the heading, as in "Recent Blogs". */
.blogx__title em {
	font-style: normal;
	color: var(--fc-accent-mark);
}

.blogx__lead {
	margin: clamp(12px, 1.4vw, 18px) 0 0;
	max-width: 52ch;
	color: var(--fc-muted);
	font-size: clamp(1rem, 1.1vw, 1.1rem);
	line-height: 1.7;
}

.blogx__none {
	margin: 0;
	color: var(--fc-muted);
}

/* --- The wide card --- */
.bwide {
	position: relative;
	display: grid;
	grid-template-columns: clamp(200px, 28%, 340px) minmax(0, 1fr);
	align-items: stretch;
	overflow: hidden;
	border: 1px solid var(--fc-border);
	border-radius: clamp(14px, 1.4vw, 22px);
	background: #fff;
	transition: border-color var(--fc-transition), box-shadow var(--fc-transition), transform var(--fc-transition);
}

.bwide:hover {
	border-color: color-mix(in srgb, var(--fc-accent-mark) 40%, var(--fc-border));
	box-shadow: var(--fc-shadow);
	transform: translateY(-2px);
}

.blogx__list { display: grid; gap: clamp(18px, 2vw, 28px); }

.blogx__list .bwide,
.blogx__block > .bwide { margin-bottom: 0; }

.blogx__block > .bwide { margin-bottom: clamp(18px, 2vw, 28px); }

.bwide__media {
	position: relative;
	overflow: hidden;
	background: var(--fc-bg-soft);

	/* Definite, so a portrait and a landscape photograph give the same card. */
	min-height: clamp(190px, 20vw, 260px);
}

.bwide__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--fc-ease);
}

.bwide:hover .bwide__img { transform: scale(1.04); }

.bwide__plate {
	position: absolute;
	inset: 0;
	background: linear-gradient(150deg, #1b2029 0%, #2f3947 100%);
}

.bwide__body {
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 2.4vw, 36px) clamp(60px, 5vw, 88px) clamp(20px, 2.4vw, 36px) clamp(20px, 2.4vw, 36px);
}

.bwide__title {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(1.15rem, 1.6vw, 1.55rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.02em;
	color: var(--fc-heading);
}

.bwide__link { color: inherit; }

/* One link, stretched over the whole card - the title is its name, and the
   arrow tile only shows where it goes. */
.bwide__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bwide:hover .bwide__title { color: var(--fc-accent-mark); }

.bwide__text {
	margin: clamp(10px, 1.2vw, 16px) 0 0;
	color: var(--fc-muted);
	font-size: clamp(.94rem, 1vw, 1rem);
	line-height: 1.7;
}

.bwide__date {
	margin: clamp(14px, 1.8vw, 22px) 0 0;
	padding-top: clamp(12px, 1.4vw, 18px);
	border-top: 1px solid var(--fc-border);
	color: var(--fc-muted);
	font-size: .88rem;
}

/* The tile in the corner, flush with the card's edge. */
.bwide__go {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	width: clamp(44px, 4vw, 62px);
	aspect-ratio: 1;
	border-bottom-left-radius: clamp(12px, 1.2vw, 18px);

	/* Matches the card, so the tile sits into the corner rather than over it. */
	border-top-right-radius: clamp(14px, 1.4vw, 22px);
	background: var(--fc-accent-mark);
	color: #fff;
	pointer-events: none;
	transition: background var(--fc-transition);
}

.bwide:hover .bwide__go { background: var(--fc-dark); }

/* --- The upright pair --- */
.blogx__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 28px);
}

.btile {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--fc-border);
	border-radius: clamp(14px, 1.4vw, 22px);
	background: #fff;
	transition: border-color var(--fc-transition), box-shadow var(--fc-transition), transform var(--fc-transition);
}

.btile:hover {
	border-color: color-mix(in srgb, var(--fc-accent-mark) 40%, var(--fc-border));
	box-shadow: var(--fc-shadow);
	transform: translateY(-2px);
}

.btile__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--fc-bg-soft);
}

.btile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--fc-ease);
}

.btile:hover .btile__img { transform: scale(1.04); }

.btile__plate {
	position: absolute;
	inset: 0;
	background: linear-gradient(150deg, #1b2029 0%, #2f3947 100%);
}

.btile__body { padding: clamp(16px, 1.8vw, 26px); }

.btile__date {
	margin: 0 0 clamp(8px, 1vw, 12px);
	color: var(--fc-muted);
	font-size: .86rem;
}

.btile__title {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(1.02rem, 1.25vw, 1.2rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--fc-heading);
}

.btile__link { color: inherit; }

.btile__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.btile:hover .btile__title { color: var(--fc-accent-mark); }

.btile__text {
	margin: clamp(8px, 1vw, 12px) 0 0;
	color: var(--fc-muted);
	font-size: .93rem;
	line-height: 1.65;
}

/* --- Pagination under the list --- */
.blogx__pages {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: clamp(24px, 3vw, 40px);
}

.blogx__pages .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	padding: 10px 14px;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-pill);
	color: var(--fc-heading);
	font-size: .92rem;
	font-weight: 600;
	transition: background var(--fc-transition), border-color var(--fc-transition), color var(--fc-transition);
}

.blogx__pages .page-numbers:hover { border-color: var(--fc-heading); }

.blogx__pages .page-numbers.current {
	background: var(--fc-accent-mark);
	border-color: var(--fc-accent-mark);
	color: #fff;
}

/* --- The rail --- */
.blogx__rail {
	position: sticky;
	top: calc(var(--fc-hh, 0px) + 24px);
	display: grid;
	gap: clamp(30px, 3.4vw, 52px);
}

.bsearch {
	position: relative;
	display: flex;
	align-items: center;
}

.bsearch__input {
	width: 100%;
	padding: clamp(16px, 1.8vw, 21px) 62px clamp(16px, 1.8vw, 21px) clamp(20px, 2vw, 28px);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-pill);
	background: #fff;
	color: var(--fc-heading);
	font: inherit;
	font-size: 1rem;
}

.bsearch__go {
	position: absolute;
	right: 10px;
	display: grid;
	place-items: center;
	width: 44px;
	aspect-ratio: 1;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--fc-muted);
	cursor: pointer;
	transition: background var(--fc-transition), color var(--fc-transition);
}

.bsearch__go:hover {
	background: var(--fc-accent-mark);
	color: #fff;
}

.bcats__title {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(1.5rem, 2.1vw, 2rem);
	font-weight: 700;
	letter-spacing: -.025em;
	color: var(--fc-heading);
}

.bcats__rule {
	display: block;
	height: 1px;
	margin: clamp(16px, 1.8vw, 24px) 0 clamp(22px, 2.6vw, 34px);
	background: var(--fc-border);
}

.bcats__list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(12px, 1.4vw, 18px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bcats__pill {
	display: inline-flex;
	align-items: center;
	padding: clamp(13px, 1.5vw, 17px) clamp(20px, 2.2vw, 28px);
	border: 1px solid var(--fc-accent-mark);
	border-radius: var(--fc-radius-pill);
	color: var(--fc-heading);
	font-size: clamp(.95rem, 1vw, 1.02rem);
	font-weight: 500;
	line-height: 1.2;
	transition: background var(--fc-transition), border-color var(--fc-transition), color var(--fc-transition);
}

/* Hover tints the ground rather than filling it, so the outline stays the
   thing that identifies the pill. The flat colour is the fallback for browsers
   without color-mix(), which is why it is declared first. */
.bcats__pill:hover {
	background: #fdeef0;
	background: color-mix(in srgb, var(--fc-accent-mark) 9%, #fff);
	color: var(--fc-accent-mark);
}

/* The category being read is filled, so it is not mistaken for a hover. */
.bcats__pill.is-current {
	background: var(--fc-accent-mark);
	color: #fff;
}

.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	color: var(--fc-muted);
	font-size: .85rem;
}

.post-meta__item { display: inline-flex; align-items: center; gap: 6px; }
.post-meta__item + .post-meta__item::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
.post-meta a { color: inherit; }
.post-meta a:hover { color: var(--fc-primary); }

.entry-media {
	margin-bottom: 30px;
	border-radius: var(--fc-radius-lg);
	overflow: hidden;
}

.entry-media__image { width: 100%; object-fit: cover; }

.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { margin-top: 1.6em; }
.entry-content h3 { margin-top: 1.4em; }
.entry-content img { border-radius: var(--fc-radius); }
.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: .4em; }
.entry-content .alignleft { float: left; margin: 0 24px 16px 0; }
.entry-content .alignright { float: right; margin: 0 0 16px 24px; }
.entry-content .aligncenter { margin-inline: auto; }
.entry-content .alignwide { width: min(100%, 1100px); margin-inline: auto; }

.entry-footer {
	margin-top: 32px;
	padding-top: 22px;
	border-top: 1px solid var(--fc-border);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	align-items: center;
	font-size: .9rem;
}

.entry-tags__label { font-weight: 700; color: var(--fc-heading); margin-right: 6px; }

.entry-tags a {
	display: inline-block;
	margin: 2px 4px 2px 0;
	padding: 4px 12px;
	background: var(--fc-bg-soft);
	border-radius: var(--fc-radius-pill);
	color: var(--fc-muted);
	font-size: .82rem;
}

.entry-tags a:hover { background: var(--fc-primary-soft); color: var(--fc-primary); }

/* Service detail extras */
.service-benefits {
	margin-top: 36px;
	padding: clamp(24px, 3vw, 34px);
	background: var(--fc-bg-soft);
	border-radius: var(--fc-radius-lg);
}

.service-benefits__title { font-size: 1.3rem; margin-bottom: .8em; }

.service-list { margin: 0; padding: 0; list-style: none; }

.service-list__item + .service-list__item { border-top: 1px solid var(--fc-border); }

.service-list__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 0;
	color: var(--fc-heading);
	font-weight: 600;
	font-size: .95rem;
}

.service-list__item a:hover { color: var(--fc-primary); }

.service-list__icon {
	width: 15px;
	height: 15px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
	transition: transform var(--fc-transition);
}

.service-list__item a:hover .service-list__icon { transform: translateX(4px); }

/* Sidebar / widgets */
.layout-with-sidebar__aside {
	display: grid;
	gap: 24px;
	position: sticky;
	top: calc(var(--fc-header-h) + 20px);
}

.widget {
	padding: 24px;
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
}

.widget__title {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--fc-border);
	font-size: 1.08rem;
}

.widget ul { margin: 0; padding: 0; list-style: none; }
.widget li + li { margin-top: 10px; }
.widget a { color: var(--fc-text); }
.widget a:hover { color: var(--fc-primary); }

.widget--cta {
	background: var(--fc-primary);
	border-color: var(--fc-primary);
	color: rgba(255, 255, 255, .9);
}

.widget--cta .widget__title { color: #fff; border-color: rgba(255, 255, 255, .25); }
.widget--cta .btn { margin-top: 14px; }

/* Search */
.search-form__row { display: flex; gap: 10px; }
.search-form__input { flex: 1; }
.search-form__submit { padding-inline: 20px; }
.search-again { margin-bottom: 36px; }

.search-results { display: grid; gap: 22px; }

.search-result {
	padding: 24px;
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius);
}

.search-result__title { font-size: 1.2rem; margin-bottom: .3em; }
.search-result__meta { margin: 0 0 .5em; color: var(--fc-primary); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.search-result__text { margin: 0; color: var(--fc-muted); font-size: .95rem; }

.no-results {
	padding: clamp(32px, 5vw, 60px);
	background: var(--fc-bg-soft);
	border-radius: var(--fc-radius-lg);
	text-align: center;
}

.no-results__text { color: var(--fc-muted); margin-bottom: 22px; }

/* Pagination */
.pagination { margin-top: 44px; }

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-sm);
	color: var(--fc-heading);
	font-weight: 600;
	font-size: .94rem;
	transition: all var(--fc-transition);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	background: var(--fc-primary);
	border-color: var(--fc-primary);
	color: #fff;
}

.pagination .page-numbers.dots { border-color: transparent; }

/* Post navigation */
.post-nav { margin-top: 40px; }

.post-nav .nav-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.post-nav .nav-next { text-align: right; }

.post-nav a {
	display: block;
	padding: 20px 22px;
	background: var(--fc-bg-soft);
	border-radius: var(--fc-radius);
	color: var(--fc-heading);
}

.post-nav a:hover { background: var(--fc-primary-soft); }

.post-nav__label {
	display: block;
	margin-bottom: 4px;
	color: var(--fc-primary);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.post-nav__title { font-weight: 600; }

/* Comments */
.comments { margin-top: 52px; }
.comments__title { font-size: 1.4rem; margin-bottom: 24px; }
.comments__list { margin: 0 0 40px; padding: 0; list-style: none; }
.comments__list .children { list-style: none; padding-left: clamp(16px, 4vw, 48px); }

.comments__list .comment-body {
	padding: 22px;
	margin-bottom: 18px;
	background: var(--fc-bg-soft);
	border-radius: var(--fc-radius);
}

.comments__list .comment-author { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.comments__list .comment-author img { border-radius: 50%; }
.comments__list .comment-author .fn { font-style: normal; font-weight: 700; color: var(--fc-heading); }
.comments__list .comment-meta { margin-bottom: 10px; font-size: .84rem; color: var(--fc-muted); }
.comments__list .reply { margin-top: 10px; font-size: .88rem; font-weight: 600; }

.comment-form { display: grid; gap: 6px; }
.comment-form .form-submit { margin-top: 8px; }

/* -------------------------------------------------------------------------
   14b  FAQ PAGE  (.faq)

   A soft panel opens the page, then one rounded block per subject, each in its
   own colour, holding its questions as rows that open where they stand.

   The rows are <details>/<summary>: the browser opens and closes them, so they
   work from the keyboard, are found by the browser's own search, and print
   open. Nothing here needs a script.

   Colours cycle over four tones by position, so nine subjects never run two of
   the same in a row and the page keeps its rhythm however many are shown.
   ---------------------------------------------------------------------- */
/* No padding at the top: the opening band is full-bleed and dark, so it meets
   the header directly. The 76px that used to sit here left a white strip above
   it that read as a gap rather than as breathing room. The foot of the section
   keeps its space, since the last row of subjects does need clearing. */
.faq {
	padding-top: 0;
	padding-bottom: clamp(40px, 5vw, 76px);
}

/* --- The opening panel ---
   A near-black band with everything on one centred axis: eyebrow, heading and
   copy stacked down the middle of a tall, quiet field, the band carrying all
   the contrast so the type can stay light.

   The band runs the full width of the screen, edge to edge. That is why the
   markup puts it outside .container - the section sets its edges, not a centred
   measure - and why there is no radius: corners rounding away at the viewport
   edge would read as an unfinished box rather than a band.

   The two type sizes are measured off the reference and set below in rem:
   the heading at 56px, the small copy at 16px. Both are the top of a clamp, so
   they hit those numbers exactly from roughly 1120px up and only step down
   below that, where a fixed 56px heading would run out of the band. */
.faq__intro {
	/* One ground and two inks, so the whole band recolours from three values. */
	--faq-intro-ground: #0d0d0f;
	--faq-intro-ink: rgba(255, 255, 255, .72);
	--faq-intro-ink-strong: #fff;

	/* Measured off the reference: the stack sits in roughly 100px of air top
	   and bottom, not the cavern the earlier 160px opened up. The inline
	   padding is only a guard for narrow phones - on a wide screen the
	   children's own measures do the centring long before it matters. */
	padding-block: clamp(48px, 6.5vw, 100px);
	padding-inline: clamp(28px, 4vw, 72px);
	background: var(--faq-intro-ground);
	color: var(--faq-intro-ink);
	text-align: center;
}

/* The eyebrow and the body copy both took their grey from the light-panel
   tokens, which vanish against black; they take the panel's own ink instead.
   Scoped to the panel so the classes stay safe to reuse elsewhere. */
.faq__intro .faq__badge,
.faq__intro .faq__lead { color: var(--faq-intro-ink); }

.faq__intro .faq__title { color: var(--faq-intro-ink-strong); }

.faq__badge {
	margin: 0 0 clamp(12px, 1.4vw, 20px);
	color: var(--fc-muted);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* The heading, matched to the reference: 56px (3.5rem), set LIGHT and in caps.
   The weight is the whole character of it - at 800 the same 56px read as a
   heavy slab, which is why the first pass looked nothing like the reference
   despite the size being right. 300 needs Archivo Light, added to the Google
   Fonts request in inc/enqueue.php.

   Caps at a light weight need air between the letters or they crowd, so the
   negative tracking that suited the heavy display face is replaced by a small
   positive one. The measure is wide enough for the heading to hold one line
   where it can; `balance` evens it out where it cannot. The auto margins are
   what actually centre it - `text-align` alone would leave the box at the
   left edge. */
.faq__title {
	margin: 0 auto;
	max-width: 34ch;
	font-family: var(--fc-font-display);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--fc-heading);
	text-wrap: balance;
}

/* One centred column instead of two side-by-side, so the copy stays on the same
   axis as the heading. The gap to the heading is the reference's ~40px. */
.faq__cols {
	display: grid;
	justify-items: center;
	gap: clamp(14px, 1.6vw, 22px);
	max-width: 72ch;
	margin-top: clamp(22px, 2.6vw, 40px);
	margin-inline: auto;
}

/* 1rem = the reference's 16px. The reference sets this copy as one short
   centred line, so the measure is opened up and the leading pulled in from 1.7
   to 1.5 - at the old 46ch it broke into a tall three-line block that pushed
   the composition out of shape. `balance` keeps whatever lines remain even. */
.faq__lead {
	margin: 0;
	max-width: 68ch;
	color: var(--fc-text);
	font-size: 1rem;
	line-height: 1.5;
	text-wrap: balance;
}

/* --- The subjects, two to a row --- */
/* Four tracks rather than two columns, so a row can be split other than down
   the middle: a subject takes two of them, the one beside the WhatsApp block
   takes three, and the block itself takes the fourth. */
.faq__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2.2vw, 32px);
	margin-top: clamp(20px, 2.6vw, 40px);
}

.faqbox { grid-column: span 2; }
.faqbox--wide { grid-column: span 3; }
.faqcta { grid-column: span 1; }

/* With no WhatsApp block to close the row, an odd one out takes the full width
   rather than sitting half-empty. */
.faqbox:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* --- A subject --- */
.faqbox {
	/* The ground is set by position below; this is what it falls back on if the
	   panel above it is ever removed and the counting shifts. */
	--faq-ground: var(--fc-dark);
	--faq-ink: #fff;

	padding: clamp(24px, 2.8vw, 48px);
	border-radius: clamp(18px, 2vw, 30px);
	background: var(--faq-ground);
	color: var(--faq-ink);
}

/* Four bright grounds in rotation, where the reference alternates two: the
   brand blue, a violet to carry the same energy, the brand red lifted a shade
   so it sits with them rather than under them, and the green that was asked for.
   Four colours against two columns means none ever repeats beside or below
   itself. The dark navies are left
   out on purpose - they were what made the page read as sober rather than the
   reference's bright. The flat red is the fallback where color-mix() is not
   understood. */
.faq {
	--faq-blue: var(--fc-primary);
	--faq-violet: #6a1bf0;
	--faq-red: #de242e;
	--faq-red: color-mix(in srgb, var(--fc-accent-mark) 84%, #ff5a4a);
	--faq-green: #03a146;
}

.faqbox:nth-child(4n + 1) { --faq-ground: var(--faq-blue); }
.faqbox:nth-child(4n + 2) { --faq-ground: var(--faq-violet); }
.faqbox:nth-child(4n + 3) { --faq-ground: var(--faq-red); }
.faqbox:nth-child(4n + 4) { --faq-ground: var(--faq-green); }

/* The green is the lightest of the four, so its answers are set at full
   strength rather than the 82% the darker grounds can carry. */
.faqbox:nth-child(4n + 4) .faqi__a { color: #fff; }

.faqbox__title {
	margin: 0 0 clamp(18px, 2.2vw, 32px);
	font-family: var(--fc-font-display);
	font-size: clamp(1.6rem, 2.4vw, 2.4rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.035em;
	color: inherit;
}

/* The questions hold to a column rather than the block's full width, so a long
   one wraps at a readable measure instead of running the page. */
.faqbox__list { max-width: 52ch; }

/* --- One question --- */
.faqi { border-bottom: 1px solid rgba(255, 255, 255, .28); }

.faqi__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(16px, 2vw, 32px);
	padding: clamp(14px, 1.6vw, 20px) 0;
	cursor: pointer;
	list-style: none;
	font-size: clamp(.98rem, 1.15vw, 1.08rem);
	font-weight: 700;
	line-height: 1.45;
	transition: opacity var(--fc-transition);
}

/* Both spellings of "no marker", since the two engines disagree. */
.faqi__q::-webkit-details-marker { display: none; }
.faqi__q::marker { content: ""; }

.faqi__q:hover { opacity: .82; }

.faqi__q:focus-visible {
	outline: 3px solid rgba(255, 255, 255, .8);
	outline-offset: 3px;
	border-radius: 4px;
}

.faqi__mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	margin-top: 2px;
	transition: transform var(--fc-transition);
}

.faqi[open] .faqi__mark { transform: rotate(180deg); }

.faqi__a {
	padding: 0 0 clamp(16px, 2vw, 24px);
	max-width: 58ch;
	color: rgba(255, 255, 255, .82);
	font-size: clamp(.94rem, 1.05vw, 1rem);
	font-weight: 400;
	line-height: 1.75;
}

.faqi__a p { margin: 0 0 .9em; }
.faqi__a p:last-child { margin-bottom: 0; }

/* --- The block that closes the row of subjects ------------------------- */
/* A query container, so the title below can size itself against this block
   rather than the viewport. The block is one of four tracks on a wide screen
   but the full width below 991px, and no viewport-based clamp can tell those
   two apart. */
.faqcta {
	container-type: inline-size;

	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(22px, 2.2vw, 36px);
	border-radius: clamp(18px, 2vw, 30px);
	background: #0b0d10;
	color: #fff;
}

/* Held to one line. `nowrap` states the intent; the size is what makes it
   possible - 8.2cqi is about the largest the default title can be and still
   clear the narrow track, and min() hands back the full 1.8rem wherever the
   block is wide enough for it, which below 991px it is.

   The first font-size is a plain fallback for anything without container
   query support; browsers that understand cqi take the second and ignore it.

   Worth knowing: nowrap trusts the size to do the fitting, and cqi measures
   the block, not the string. A much longer title typed into the Ask lead
   field would run past the block rather than wrap - drop the cqi value if
   that happens. */
.faqcta__title {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(1.35rem, 1.7vw, 1.8rem);
	font-size: min(1.8rem, 8.2cqi);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.035em;
	color: inherit;
	white-space: nowrap;
}

.faqcta__text {
	margin: clamp(12px, 1.4vw, 18px) 0 0;
	max-width: 34ch;
	color: rgba(255, 255, 255, .72);
	font-size: clamp(.95rem, 1.05vw, 1.02rem);
	line-height: 1.7;
}

/* WhatsApp's own green, with dark ink on it - white on that green is far too
   faint to read at this size. */
.faqcta__btn {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 12px;
	margin-top: clamp(20px, 2.4vw, 32px);
	padding: 15px 28px;
	border-radius: var(--fc-radius-pill);
	background: #25d366;
	color: #06301f;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	transition: background var(--fc-transition), transform var(--fc-transition), box-shadow var(--fc-transition);
}

.faqcta__btn .icon { width: 20px; height: 20px; }

/* A quarter-width block cannot hold a long label on one line. */
.faqcta__btn { text-align: left; }

.faqcta__btn:hover {
	background: #1fbe5a;
	color: #06301f;
	transform: translateY(-2px);
	box-shadow: var(--fc-shadow);
}

/* The address under the button, for anyone who would rather write. */
.faqcta__mail {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	margin-top: clamp(14px, 1.6vw, 20px);
	color: rgba(255, 255, 255, .82);
	font-size: .92rem;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
	word-break: break-all;
}

.faqcta__mail:hover {
	color: #fff;
	border-bottom-color: #fff;
}

.faqcta__go {
	width: .7em;
	height: .7em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
	transition: transform var(--fc-transition);
}

.faqcta__mail:hover .faqcta__go { transform: translateX(3px); }



/* =========================================================================
   15  FOOTER
   ====================================================================== */
/* The footer follows the reference: a light ground, the brand block on the
   left, the link columns ranged beside it, an oversized wordmark washed across
   the bottom, and a hairline rule closing over the copyright row. */
.site-footer {
	position: relative;
	margin-top: auto;
	padding-top: clamp(40px, 4vw, 60px);
	background: var(--fc-footer-bg);
	color: var(--fc-footer-text);
	font-size: .9rem;
	/* Clips the wordmark, which is deliberately taller than the space left
	   for it and runs off the bottom edge. */
	overflow: clip;
}

@supports not (overflow: clip) {
	.site-footer { overflow: hidden; }
}

/* The wordmark and the content are layered by z-index rather than by a
   negative index, which would drop the mark behind the footer's own
   background and make it disappear entirely. */
.site-footer__mark {
	position: absolute;
	left: 50%;
	bottom: -.22em;
	z-index: 0;
	transform: translateX(-50%);
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: clamp(3.5rem, 12vw, 9rem);
	font-weight: 800;
	line-height: .8;
	letter-spacing: -.04em;
	color: var(--fc-footer-mark);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

.site-footer__inner {
	position: relative;
	z-index: 1;
}

/*
 * Flex rather than a fixed set of grid tracks. How many columns exist is not
 * knowable here: the widgets column only appears when the footer sidebar has
 * something in it, and the services column is dropped at some widths - so a
 * `repeat(3, ...)` would leave a stray column stranded on its own row the
 * moment the count changed. Flex lets the link columns share whatever is left
 * beside the brand, however many of them there turn out to be.
 */
.site-footer__top {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(22px, 2.6vw, 40px);
	padding-bottom: clamp(30px, 3.4vw, 48px);
}

.footer-col { flex: 1 1 150px; min-width: 0; }

/* The brand block leads, on roughly a third, and never stretches past a
   comfortable measure for its paragraph. */
.footer-col--brand { flex: 1 1 280px; max-width: 420px; }

.footer-brand { margin-bottom: 12px; }
/*
 * The logo sits on a white plate. The file is a JPEG with a white background
 * baked in, which on the near-black footer would otherwise show as a hard
 * white rectangle cropped tight to the artwork. Giving it padding, a matching
 * white ground and a radius turns that unavoidable white into a deliberate
 * chip - and it keeps the mark's real colours, which recolouring the image
 * would not.
 *
 * A transparent PNG or SVG in Theme Settings > Header > "Logo (light)" would
 * not need the plate; drop the background, padding and radius here if one is
 * ever uploaded.
 */
.footer-brand {
	display: inline-block;
	padding: clamp(8px, 1vw, 12px) clamp(12px, 1.4vw, 18px);
	border-radius: var(--fc-radius);
	background: #fff;
	line-height: 0;
}

/* The plate is only wanted around an image - the white-text fallback needs no
   ground behind it. */
.footer-brand:not(:has(.footer-brand__logo)) {
	padding: 0;
	border-radius: 0;
	background: none;
	line-height: inherit;
}

.footer-brand__logo {
	width: auto;
	height: auto;
	max-height: clamp(52px, 5.6vw, 72px);
	max-width: 100%;
}

/* With no light logo file set, the brand is the site name in white. It stands
   in for the logo, so it is set at display size rather than as body copy. */
.footer-brand__text {
	color: var(--fc-footer-link);
	font-family: var(--fc-font-display);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 800;
	letter-spacing: -.03em;
}


/* Uppercase, tracked and set small - the reference uses the column headings as
   labels above the links, not as headings competing with them. */
.footer-col__title {
	margin-bottom: clamp(12px, 1.3vw, 16px);
	color: var(--fc-footer-label);
	font-family: var(--fc-font);
	font-size: .74rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.footer-col__text {
	margin-bottom: 18px;
	max-width: 40ch;
	line-height: 1.6;
}

.menu--footer li + li { margin-top: 9px; }

/* No bullet. The old dot marker belonged to the dark footer; here the links
   are a plain ranged list, as in the reference. */
.menu--footer a {
	display: inline-block;
	color: var(--fc-footer-link);
	transition: color var(--fc-transition);
}

.menu--footer a:hover { color: var(--fc-footer-hover); }

.footer-contact { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.footer-contact li { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact .icon { color: var(--fc-footer-label); margin-top: 3px; flex: none; }
.footer-contact a { color: var(--fc-footer-link); }
.footer-contact a:hover { color: var(--fc-footer-hover); }

.site-footer .widget {
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
}

/*
 * Block widgets bring their own <h2 class="wp-block-heading">, which nothing
 * here was catching - so "Archives" and "Categories" rendered at full heading
 * size and towered over the tracked labels in every other column. Both the
 * classic .widget__title and whatever heading a block emits are pulled onto
 * the same label style.
 */
.site-footer .widget__title,
.site-footer .widget :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 clamp(12px, 1.3vw, 16px);
	padding: 0;
	border: 0;
	color: var(--fc-footer-label);
	font-family: var(--fc-font);
	font-size: .74rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* And their lists match the link columns rather than keeping browser defaults. */
.site-footer .widget ul { margin: 0; padding: 0; list-style: none; }
.site-footer .widget li + li { margin-top: 9px; }

.site-footer .widget a { color: var(--fc-footer-link); }
.site-footer .widget a:hover { color: var(--fc-footer-hover); }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 28px;
	padding-block: clamp(14px, 1.6vw, 20px);
	border-top: 1px solid var(--fc-footer-rule);
	font-size: .82rem;
}

.site-footer__copy { margin: 0; }

/* The legal links and the back-to-top link travel together at the right end. */
.site-footer__end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 28px;
}

.menu--legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.menu--legal a { color: var(--fc-footer-text); }
.menu--legal a:hover { color: var(--fc-footer-link); }

.site-footer__top-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--fc-footer-text);
}

.site-footer__top-link:hover { color: var(--fc-footer-link); }

/* Drawn rather than loaded: a chevron and a stem, so the arrow needs no icon
   font and inherits the link's colour. */
.site-footer__top-arrow {
	position: relative;
	width: 11px;
	height: 11px;
	flex: none;
}

.site-footer__top-arrow::before,
.site-footer__top-arrow::after {
	content: "";
	position: absolute;
	background: currentColor;
}

.site-footer__top-arrow::before {
	left: 50%;
	top: 0;
	width: 1.5px;
	height: 100%;
	transform: translateX(-50%);
}

.site-footer__top-arrow::after {
	left: 50%;
	top: 1px;
	width: 7px;
	height: 7px;
	border-left: 1.5px solid currentColor;
	border-top: 1.5px solid currentColor;
	background: none;
	transform: translateX(-50%) rotate(45deg);
	transform-origin: center;
}

/* Social lists */
.social {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social__link {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	transition: background-color var(--fc-transition), color var(--fc-transition), transform var(--fc-transition);
}

.social__link .icon { width: 16px; height: 16px; }

.social--topbar .social__link { width: 30px; height: 30px; color: rgba(255, 255, 255, .75); }
.social--topbar .social__link:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* Bare glyphs on the light ground - the filled circles were carrying the old
   dark footer and read as heavy buttons here. */
.social--footer .social__link {
	width: 30px;
	height: 30px;
	margin-left: -6px;
	border-radius: var(--fc-radius-sm);
	background: none;
	color: var(--fc-footer-text);
}

.social--footer .social__item:first-child .social__link { margin-left: 0; }

.social--footer .social__link:hover {
	background: rgba(255, 255, 255, .1);
	color: var(--fc-footer-link);
	transform: none;
}

/* Back to top */
.to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 80;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--fc-primary);
	color: #fff;
	cursor: pointer;
	box-shadow: var(--fc-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--fc-transition), transform var(--fc-transition), visibility var(--fc-transition);
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--fc-primary-dark); }

.to-top span {
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
	transform: rotate(-90deg);
}

/* =========================================================================
   16  UTILITIES, MOTION & ACCESSIBILITY
   ====================================================================== */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--fc-primary);
	color: #fff;
	border-radius: 0 0 var(--fc-radius-sm) var(--fc-radius-sm);
	transition: top var(--fc-transition);
}

.skip-link:focus {
	top: 0;
	clip: auto;
	width: auto;
	height: auto;
	color: #fff;
}

.page-links { margin-top: 20px; font-weight: 600; }
.page-links a { padding: 2px 8px; }

/* Scroll reveal.
   The `fc-js` class is put on <html> before first paint (inc/enqueue.php), so
   these elements only start hidden when JavaScript is present to reveal them.
   Without JS - or with JS blocked - the page renders fully visible.
   The same selector list is mirrored in assets/js/main.js (REVEAL_SELECTOR). */
.fc-js:not(.fc-no-js) :is(
	.section__header,
	.card,
	.stat,
	.hero__content,
	.hero__media,
	.about__media,
	.about__content,
	.features__media,
	.features__content,
	.cta__inner,
	.contact-form__inner > *
) {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 620ms var(--fc-ease), transform 620ms var(--fc-ease);
}

.fc-js:not(.fc-no-js) .is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.fc-js:not(.fc-no-js) :is(
		.section__header,
		.card,
		.stat,
		.hero__content,
		.hero__media,
		.about__media,
		.about__content,
		.features__media,
		.features__content,
		.cta__inner,
		.contact-form__inner > *
	) {
		opacity: 1;
		transform: none;
	}
}

/* WordPress core alignment / caption classes. */
.alignnone { max-width: 100%; height: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption {
	margin-top: 8px;
	color: var(--fc-muted);
	font-size: .86rem;
	text-align: center;
}

.sticky .card__title::before {
	content: "\2605";
	margin-right: 8px;
	color: var(--fc-accent);
}

/* =========================================================================
   17  RESPONSIVE
   ====================================================================== */
@media (max-width: 1100px) {
	/* The services list repeats the main menu closely enough to drop first. */
	.footer-col--services { display: none; }
	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.layout-with-sidebar { grid-template-columns: minmax(0, 1fr) 290px; }
}

@media (max-width: 991px) {

	/* Three cards across stop leaving each description a readable measure. */
	.catalogue__cards.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* List cards keep their two columns here, but their picture narrows so the
	   words keep the width the layout was chosen for. */
	.svcrow__media { flex-basis: clamp(84px, 10vw, 110px); }

	/* The area bands give up their two columns. The picture stops being a column
	   beside the services and becomes a band above them, the same way round in
	   every area - alternating sides means nothing once they are stacked, and
	   sticky has nothing left to hold against. */
	.catalogue__layout,
	.catalogue__group--flip .catalogue__layout { grid-template-columns: minmax(0, 1fr); }
	.catalogue__group--flip .catalogue__aside { order: 0; }
	.catalogue__sticky { position: static; }
	.catalogue__shot { max-height: 320px; }

	/* Two subjects side by side stop leaving the questions a readable measure.
	   The spans go with them: left in place they would invent extra tracks. */
	.faq__grid { grid-template-columns: minmax(0, 1fr); }
	.faqbox,
	.faqbox--wide,
	.faqcta { grid-column: auto; }

	/* The rail stops fitting beside the articles and follows them instead. */
	.blogx__layout { grid-template-columns: minmax(0, 1fr); }
	.blogx__rail { position: static; }
	.bcats__list { gap: 8px; }

	/* Three offices in a row stop fitting; two, and the hairline follows. */
	.offices__grid,
	.offices__grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.office:nth-child(odd) { padding-left: 0; border-left: 0; }

	/* The plate stops being a column beside the form and becomes a band above
	   it, deep enough for the mark to still read as a plate rather than a rule. */
	.connect__split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.connect__plate { min-height: clamp(240px, 38vw, 340px); }
	.connect__blurb { max-width: 46ch; }

	/* A band is wide and shallow, so the photographs turn with it and run
	   across rather than down - the same arrangement the home page opens with. */
	.connect__strip { grid-auto-flow: column; grid-auto-columns: 1fr; grid-auto-rows: auto; }

	/* Four across leaves too little of each face. */
	.lead-fc__members { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Side by side stops working; stacked, the rail stops climbing and
	   becomes an ordinary grid of cards. */
	.offer__grid { grid-template-columns: minmax(0, 1fr); }
	.offer--live .offer__rail { overflow: visible; height: auto; }
	.offer--live .offer__track { position: static; transform: none !important; }
	.offer--live .offer__track > [aria-hidden="true"] { display: none; }

	/* The lead and the stack stop fitting beside each other. */
	.blog__grid,
	.blog__head { grid-template-columns: minmax(0, 1fr); }
	.blog__aside { align-items: flex-start; }

	.industries__wall {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: 18vw;
	}

	:root { --fc-header-h: 72px; }

	/* Below this width the classic header hands over to the full-screen menu too,
	   so its inline menu goes rather than becoming a drawer. */
	.nav-toggle { display: block; }
	.header-actions__cta { display: none; }
	.site-nav { display: none; }

	/* --- Stacked layouts --- */
	.hero__inner,
	.about__inner,
	.features__inner,
	.contact-form__inner { grid-template-columns: minmax(0, 1fr); }

	.hero__media { order: -1; max-width: 560px; margin-inline: auto; }
	.about--image-right .about__media { order: 0; }
	.about__media { max-width: 560px; margin-inline: auto; }
	.contact-form--left .contact-form__panel { order: 0; }

	.layout-with-sidebar { grid-template-columns: minmax(0, 1fr); }
	.layout-with-sidebar__aside { position: static; }

	.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Two up: the brand gives up its wider basis and joins the others. */
	.footer-col { flex-basis: 40%; }
	.footer-col--brand { flex-basis: 100%; max-width: none; }
	.footer-col--services { display: block; }

	.cta__inner { flex-direction: column; align-items: flex-start; text-align: left; }

	/* Ask us: questions, then photograph, then invitation - simply stacked. */
	.ask__inner { grid-template-columns: minmax(0, 1fr); }
	.ask__person { max-width: 520px; }

	/* Why: the case reads first, the pictures follow. */
	.why__inner { grid-template-columns: minmax(0, 1fr); }
	.why__content { order: -1; }
	.why__media { max-width: 560px; }
	.why__points { grid-template-columns: minmax(0, 1fr); }

	/* Key services: preview above the list, and it stops being pinned - the
	   list is what scrolls, so there is nothing left to pin against. */
	.svc__grid { grid-template-columns: minmax(0, 1fr); }
	.svc__preview { position: static; height: auto; max-width: 520px; padding-block: 0; }
	.svc__list { padding-bottom: 0; }
	.svc__title { text-align: left; }

	/* Converging hero: stack it, image first. The travel animation is off at
	   this width, so the finished layout is all there is. */
	/* The flight is off below 992px, so the strip is a plain row again -
	   three frames is the most that stays legible at this width. */
	.hero-fc__frame:nth-child(n+4) { display: none; }
	.hero-fc__inner { grid-template-columns: minmax(0, 1fr); }
	.hero-fc__visual { order: -1; width: 100%; max-width: 620px; margin-inline: auto; }
	.hero-fc__title { max-width: none; }
}

@media (max-width: 767px) {

	/* The panel is one centred column at every width now, so only the heading's
	   measure needs lifting here - 18ch is narrower than a phone's text column
	   and would break the heading far too early. */
	.faq__title { max-width: none; }

	/* A 64px number column costs a phone a fifth of its measure. The number moves
	   above its service instead, where it still marks the row without paying for
	   a track, and the description lines up under the title. */
	.catalogue__item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.catalogue__item-num { line-height: 1.4; }

	/* One card at a time - two across a phone leaves neither a usable picture
	   nor a readable description. */
	.catalogue__cards.grid--2,
	.catalogue__cards.grid--3,
	.catalogue__cards--rows { grid-template-columns: minmax(0, 1fr); }

	/* One column, so there is no odd one left to centre. */
	.catalogue__cards--rows > :last-child:nth-child(odd) {
		grid-column: auto;
		width: auto;
	}

	/* The picture stops being a column and becomes a band across the top: at a
	   phone's width the two side by side leave the description about twenty
	   characters a line. */
	.svcrow { flex-direction: column; }
	.svcrow__media { flex: 0 0 auto; height: clamp(140px, 34vw, 200px); }

	/* The counts stack: side by side they leave each number about ten characters
	   of label, which breaks "practice areas" across three lines. */
	.catalogue__count { flex-direction: column; gap: 20px; }
	.catalogue__count-item + .catalogue__count-item {
		padding: 20px 0 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .22);
	}

	/* The wide card stacks: picture over article, and the pair below it too. */
	.bwide { grid-template-columns: minmax(0, 1fr); }
	.bwide__media { min-height: clamp(180px, 52vw, 260px); }
	.bwide__body { padding-right: clamp(20px, 5vw, 36px); }
	.blogx__tiles { grid-template-columns: minmax(0, 1fr); }

	/* One office at a time, and the hairline becomes the rule above it. */
	.offices__grid,
	.offices__grid[data-count="2"],
	.offices__grid[data-count="4"] { grid-template-columns: minmax(0, 1fr); }

	.office + .office {
		padding: clamp(20px, 5vw, 28px) 0 0;
		border-left: 0;
		border-top: 1px solid var(--fc-border);
	}

	/* Paired fields stop fitting side by side. */
	.connect__form form { grid-template-columns: minmax(0, 1fr); }
	.connect__form form > p { grid-column: 1 / -1; }

	/* One column: the portrait sits above the text rather than beside it. */
	.lead-fc__card { grid-template-columns: minmax(0, 1fr); }
	.lead-fc__portrait { min-height: clamp(260px, 62vw, 380px); }

	/* The hairline between the facts belongs to a single row. */
	.lead-fc__fact + .lead-fc__fact { padding-left: 0; border-left: 0; }

	/* One column, and the mark drops below the text rather than beside it. */
	.vm__grid { grid-template-columns: minmax(0, 1fr); }
	.vm__card { flex-direction: column; align-items: flex-start; }
	.vm__card--mission { flex-direction: column-reverse; }

	/* Four across is too little of each; the row keeps its stagger at two. */
	.abb__strip,
	.abb__strip[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.abb__text { grid-template-columns: minmax(0, 1fr); }

	/* A picture beside the text leaves too little of either. */
	.blog-card--row { grid-template-columns: minmax(0, 1fr); }
	.blog-card--row .blog-card__media { aspect-ratio: 16 / 9; }

	.industries__wall {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 38vw;
	}

	/* Nothing may span wider than the wall now has columns. */
	.industry[data-cols] { grid-column: span 2; }
	.industry[data-cols="1"] { grid-column: span 1; }


	/* The label has nowhere to sit beside the heading at this width, so it
	   leads instead - which is also the reading order it should have had. */
	.reviews__head {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.reviews__badge { order: -1; justify-self: start; }
	.reviews__controls { margin-left: 0; }

	.topbar__inner { justify-content: center; }
	.topbar__note { display: none; }

	.grid--2,
	.grid--3,
	.grid--4 { grid-template-columns: minmax(0, 1fr); }

	.checklist--grid { grid-template-columns: minmax(0, 1fr); }
	.fc-form__row { grid-template-columns: minmax(0, 1fr); }
	.post-nav .nav-links { grid-template-columns: minmax(0, 1fr); }
	.post-nav .nav-next { text-align: left; }

	.about__media-sub { position: static; width: 100%; margin-top: 16px; border-width: 0; }
	.about__badge { left: 12px; top: 12px; padding: 12px 16px; }

	.footer-col { flex-basis: 100%; }
	.site-footer__bottom { flex-direction: column; text-align: center; }
	/* The legal links and back-to-top stack onto the same centred axis as the
	   copyright rather than staying ranged right against nothing. */
	.site-footer__end { justify-content: center; }

	.hero__actions .btn,
	.cta__actions .btn { flex: 1 1 100%; }

	.svc .section__title { text-wrap: balance; }
	.svc__link { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
	.svc__arrow { grid-column: 2; justify-self: end; }

	/* Panels drop out of the card and into normal flow. */
	/* One frame, and the brand type wraps rather than shrinking away. */
	.hero-fc__frame:nth-child(n+2) { display: none; }
	.hero-fc__frame:first-child { aspect-ratio: 100 / 68; }
	.hero-ed__row { flex-wrap: wrap; gap: 4px 16px; }
	.hero-ed__sign { width: 2.4em; }
	.hero-ed__foot { flex-direction: column; align-items: center; }

	.hero-fc__visual { position: static; }
	.hero-panel { position: static; max-width: none; inset: auto; }
	.hero-panel--checks { margin-top: 14px; }
	.hero-panel--metrics { margin-top: 12px; }
	.hero-fc__card { aspect-ratio: 100 / 78; }
	.hero-fc__actions .btn { flex: 1 1 100%; }
	.hero-fc__proof { gap: 14px; }

	.site-header--minimal .header-main__inner {
		grid-template-columns: auto 1fr auto;
		gap: 12px;
	}

	.header-tagline { font-size: .66rem; letter-spacing: .08em; }
}

@media (max-width: 480px) {
	:root { --fc-gutter: 18px; }

	/* Full width, so the button is as easy to hit as the fields above it. */
	.connect__form input[type="submit"],
	.connect__form button[type="submit"] { width: 100%; }

	.topbar__contact { gap: 6px 16px; font-size: .8rem; }
	.card__body { padding: 20px; }
	.to-top { right: 14px; bottom: 14px; }
}

/* Print */
@media print {
	.site-header,
	.site-footer,
	.to-top,
	.cta,
	.fsmenu { display: none !important; }

	body { color: #000; }
	.section { padding-block: 0; }
}