/* ==========================================================================
   PHOENIX DPL — Main Stylesheet
   Single source of truth for all frontend CSS. Sectioned with comment headers.
   Brand COLOUR tokens (--navy/--red/--page/--ink) are injected inline from the
   Customizer at wp_head priority 5; this file defines everything else.
   ========================================================================== */

/* ---------- FONT FACES ---------- */
@font-face {
	font-family: "Noe Display";
	src: url("../fonts/NoeDisplay-Medium.otf") format("opentype");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Helvetica Now Display";
	src: url("../fonts/HelveticaNowDisplay-Light.ttf") format("truetype");
	font-weight: 300 400;
	font-style: normal;
	font-display: swap;
}
/* Lato — full weight range (100–900) so the paragraph block's Appearance options all
   render real Lato. @font-face is lazy: a weight only downloads when it's actually used. */
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Thin.ttf") format("truetype");       font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Light.ttf") format("truetype");      font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Regular.ttf") format("truetype");    font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Medium.ttf") format("truetype");     font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-SemiBold.ttf") format("truetype");   font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Bold.ttf") format("truetype");       font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-ExtraBold.ttf") format("truetype");  font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Black.ttf") format("truetype");      font-weight: 900; font-style: normal; font-display: swap; }

/* ---------- CUSTOM PROPERTIES ---------- */
:root {
	/* Brand colours have Customizer-injected fallbacks; repeat defaults here so the
	   stylesheet is valid standalone (e.g. in the editor before inline tokens load). */
	--navy: #0b2d44;
	--navy-mid: #0d3450;
	--red: #d60d14;
	--red-dark: #b30b11;
	--red-on-dark: #d60d14; /* footer red-on-navy accent; Customizer-editable for contrast */
	--white: #ffffff;
	--page: #eaecee;
	--ink: #1b2b3a;

	--text: var(--ink);
	--text-muted: #5a6b78;
	--line: rgba(27, 43, 58, 0.14);
	--line-on-dark: rgba(255, 255, 255, 0.18);

	/* Fonts */
	--font-display: "Noe Display", Georgia, "Times New Roman", serif;
	--font-body: "Lato", "Helvetica Now Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Type scale (fluid) */
	--fs-hero: clamp(2.75rem, 1.6rem + 5.1vw, 5.25rem);
	--fs-h1: clamp(2.5rem, 1.7rem + 3.6vw, 4rem);
	--fs-h2: clamp(1.9rem, 1.35rem + 2.4vw, 2.85rem);
	--fs-h3: clamp(1.4rem, 1.1rem + 1.3vw, 1.9rem);
	--fs-statement: clamp(1.4rem, 1.05rem + 1.55vw, 2rem);
	--fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.075rem);
	--fs-small: 0.85rem;
	--fs-nav: 0.95rem;

	/* Spacing scale */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4rem;
	--space-7: 6rem;
	--space-8: 8rem;

	/* Structure — content scales with the viewport up to this cap. The header nav has its
	   own tighter cap (.site-header__inner) so the menu isn't flung to the screen edges. */
	--container: 1900px;
	--container-narrow: 980px;
	--gutter: clamp(1.25rem, 5.2vw, 100px);
	--header-h: 170px;
	--header-h-mobile: 76px;
	--radius: 0;

	/* Motion */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 0.4s;
	--shadow-card: 0 18px 40px rgba(11, 45, 68, 0.16);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--t-body-size, var(--fs-body));
	line-height: var(--t-body-lh, 1.65);
	color: var(--text);
	background: var(--page);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ---------- ACCESSIBILITY ---------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	position: absolute;
	word-wrap: normal !important;
}
.skip-link {
	position: absolute;
	left: 50%; top: -60px;
	transform: translateX(-50%);
	z-index: 2000;
	background: var(--red);
	color: var(--white);
	padding: 0.75rem 1.25rem;
	transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.08;
	color: inherit; /* inherit so dark sections get light headings (lesson #2/#13) */
	letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 400; }
a:hover { color: var(--red); }

/* ---------- BUTTONS ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-size: 1rem;
	line-height: 1;
	padding: 1rem 1.75rem;
	background: var(--red);
	color: var(--white);
	border: 1px solid var(--red);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--red-dark); color: var(--white); transform: translateY(-2px); } /* subtle lift */
.btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
.btn--ghost:hover { background: var(--white); color: var(--navy); }

/* Animated underline-wipe on the serif text CTAs ("Read more", icon-card links). */
.icon-card__link, .post-card__btn { position: relative; }
.post-card__btn { width: fit-content; } /* it's a flex item — shrink to the text so the underline fits it */
.icon-card__link::after, .post-card__btn::after {
	content: "";
	position: absolute; left: 0; bottom: -3px;
	width: 100%; height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}
.icon-card__link:hover::after, .icon-card__link:focus-visible::after,
.post-card__btn:hover::after, .post-card__btn:focus-visible::after { transform: scaleX(1); }

/* Red-circle CTA ("Contact us" / "Enquiries") — scales up on hover */
.cta-circle { display: flex; justify-content: center; align-items: center; } /* align-items:center stops a flex parent stretching the disc oval */
.cta-circle__link {
	position: relative;
	flex: 0 0 auto; /* never stretch/shrink — keep the aspect-ratio square (fixes oblong circle) */
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(190px, 16vw, 230px);
	aspect-ratio: 1;
	padding: 1rem;
	color: var(--white);
	font-family: var(--font-display);
	font-size: var(--fs, 2rem);
	line-height: 1.1;
	text-align: center;
	isolation: isolate;
}
/* The red disc is a pseudo so it can grow on hover while the label stays the same size.
   The label sits in the positive-z layer above the disc so a scaled disc never covers it. */
.cta-circle__link::before {
	content: "";
	position: absolute; inset: 0;
	z-index: 0;
	border-radius: 50%;
	background: var(--red);
	transition: transform var(--dur) var(--ease);
}
.cta-circle__label { position: relative; z-index: 1; }
.cta-circle__link:hover::before, .cta-circle__link:focus-visible::before { transform: scale(1.08); }
/* Keep the label white on rollover — the global `a:hover { color: red }` (line ~151) would
   otherwise recolour it red-on-red and make it vanish. This is the real "goes blank" cause. */
.cta-circle__link:hover, .cta-circle__link:focus-visible { color: var(--white); }

/* ---------- UTILITY / LAYOUT ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(2.5rem, 4.5vw, 4.5rem); }
.section--page { background: var(--page); }
.section--navy { background: var(--navy); color: var(--white); }
.text-center { text-align: center; }
.eyebrow {
	font-family: var(--font-display);
	color: var(--red);
	font-size: 1.15rem;
	margin-bottom: var(--space-2);
}
.site-main { min-height: 40vh; }

/* ---------- BLOCK SETTINGS UTILITIES ---------- */
/* Vertical spacing presets (driven by each block's Settings tab) */
.pt-none { padding-top: 0; }
.pt-sm   { padding-top: clamp(1.25rem, 2.5vw, 2rem); }
.pt-md   { padding-top: clamp(2rem, 4vw, 3.5rem); }
.pt-lg   { padding-top: clamp(3rem, 5.5vw, 5rem); }
.pb-none { padding-bottom: 0; }
.pb-sm   { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.pb-md   { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.pb-lg   { padding-bottom: clamp(3rem, 5.5vw, 5rem); }

/* Colour schemes (block background + text). Default (no class) is transparent over
   the page-grey body. Headings inherit, so they flip automatically on dark schemes. */
.pt-xl { padding-top: clamp(4.5rem, 8vw, 7.5rem); }
.pb-xl { padding-bottom: clamp(4.5rem, 8vw, 7.5rem); }

/* Margin presets */
.mt-none { margin-top: 0; }
.mt-sm   { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.mt-md   { margin-top: clamp(2rem, 4vw, 3.5rem); }
.mt-lg   { margin-top: clamp(3rem, 5.5vw, 5rem); }
.mt-xl   { margin-top: clamp(4.5rem, 8vw, 7.5rem); }
.mb-none { margin-bottom: 0; }
.mb-sm   { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.mb-md   { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.mb-lg   { margin-bottom: clamp(3rem, 5.5vw, 5rem); }
.mb-xl   { margin-bottom: clamp(4.5rem, 8vw, 7.5rem); }

/* Text alignment */
.ta-left   { text-align: left; }
.ta-center { text-align: center; }
.ta-right  { text-align: right; }

/* Colour schemes (block background + text). Default (no class) is transparent over
   the page-grey body. Headings inherit, so they flip automatically on dark schemes. */
.scheme-navy  { background: var(--navy); color: var(--white); }
.scheme-red   { background: var(--red);  color: var(--white); }
.scheme-white { background: var(--white); color: var(--ink); }
.scheme-navy .intro-statement__lede, .scheme-navy .intro-statement__heading { color: var(--white); }

/* Custom colour overrides (win over scheme — declared after) */
.has-bg { background-color: var(--bg); }
.has-fg, .has-fg .intro-statement__lede, .has-fg .intro-statement__heading { color: var(--fg); }

/* ---------- CONTAINER BLOCK ---------- */
.theme-container { position: relative; background-size: cover; background-position: center; font-size: var(--fs, inherit); min-height: var(--min-h, auto); }
.theme-container--full > .theme-container__inner--full { width: 100%; }
.theme-container__inner { position: relative; z-index: 1; }

/* ---------- SECTION HEAD (shared) ---------- */
.section-head { text-align: center; max-width: 760px; margin: 0 auto var(--space-5); }
.section-head__title { font-size: var(--fs, var(--fs-h2)); color: var(--navy); }
.scheme-navy .section-head__title { color: var(--white); }
.section-head__intro { margin-top: var(--space-2); }

/* ---------- ICON GRID ---------- */
.icon-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.icon-card { text-align: center; }
.icon-grid--bordered .icon-card { border: 1px solid var(--line); padding: var(--space-4); }
.icon-grid--filled .icon-card { background: var(--white); padding: var(--space-4); box-shadow: var(--shadow-card); }
.icon-card__icon img { width: 56px; height: 56px; object-fit: contain; margin: 0 auto var(--space-2); }
.icon-card__title { font-size: var(--fs-h3); color: var(--navy); margin-bottom: var(--space-1); }
.scheme-navy .icon-card__title { color: var(--white); }
.icon-card__link { color: var(--red); font-family: var(--font-display); display: inline-block; margin-top: var(--space-1); }

/* ---------- SPLIT SECTION ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--img-right .split__media { order: 2; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__heading { font-size: var(--fs, var(--fs-h2)); color: var(--navy); margin-bottom: var(--space-3); }
.scheme-navy .split__heading { color: var(--white); }
.split__cta { margin-top: var(--space-3); }

/* ---------- CTA BANNER ---------- */
.cta-banner { position: relative; text-align: center; background: var(--navy) center / cover no-repeat; color: var(--white); min-height: var(--min-h, auto); }
.cta-banner--image::after { content: ""; position: absolute; inset: 0; background: var(--ov-color, #0b2d44); opacity: var(--ov-opacity, 0.55); }
.cta-banner__inner { position: relative; z-index: 1; }
.cta-banner__heading { font-size: var(--fs, var(--fs-h1)); }
.cta-banner__desc { margin-top: var(--space-2); }
.cta-banner__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); }

/* ---------- STATS BAR ---------- */
.stats-bar { display: grid; gap: clamp(1.5rem, 4vw, 3rem); text-align: center; }
.stats-bar--inline { grid-auto-flow: column; grid-auto-columns: 1fr; }
.stats-bar--stacked { grid-template-columns: 1fr; }
.stat__value { display: block; font-family: var(--font-display); font-size: var(--fs, clamp(2.5rem, 5vw, 4rem)); line-height: 1; }
.stat__label { display: block; margin-top: var(--space-1); font-size: 0.95rem; opacity: 0.85; }

@media (max-width: 768px) {
	.icon-grid { grid-template-columns: 1fr; }
	.split { grid-template-columns: 1fr; }
	.split--img-right .split__media { order: 0; }
	.stats-bar--inline { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
}

/* ---------- TESTIMONIALS ---------- */
.testimonials { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.testimonial { background: var(--white); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); box-shadow: var(--shadow-card); }
.testimonial__rating { color: var(--red); letter-spacing: 2px; }
.testimonial__quote { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.4; color: var(--navy); }
.testimonial__cite { margin-top: auto; }
.testimonial__author { display: block; font-family: var(--font-display); color: var(--navy); }
.testimonial__source { display: block; font-size: 0.9rem; color: var(--text-muted); }

/* ---------- ACCORDION (native <details>) ---------- */
.accordion__heading { text-align: center; font-size: var(--fs-h2); color: var(--navy); margin-bottom: var(--space-4); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__title { cursor: pointer; padding: var(--space-3) 2.5rem var(--space-3) 0; position: relative; font-family: var(--font-display); font-size: 1.25rem; color: var(--navy); list-style: none; }
.accordion__title::-webkit-details-marker { display: none; }
.accordion__title::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--red); }
.accordion__item[open] .accordion__title::after { content: "\2013"; }
.accordion__panel { padding: 0 0 var(--space-3); color: var(--text); }
.scheme-navy .accordion__title, .scheme-navy .accordion__heading { color: var(--white); }

/* ---------- FULL-WIDTH IMAGE ---------- */
.fw-image { width: 100%; }
.fw-image__img { display: block; width: 100%; }

/* ---------- POST GRID / CARDS ---------- */
.post-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.post-card { background: var(--white); box-shadow: var(--shadow-card); overflow: hidden; transition: transform var(--dur) var(--ease); }
.post-card:hover { transform: translateY(-4px); }
.post-card__link { display: flex; flex-direction: column; height: 100%; }
.post-card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 0.5rem; }
.post-card__date { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.post-card__title { font-size: 1.35rem; color: var(--navy); }
.post-card__excerpt { color: var(--text); }
.post-card__btn { color: var(--red); font-family: var(--font-display); margin-top: auto; }

/* ---------- PAGE HEAD (blog/search/archive/single) ---------- */
.page-head { padding-top: calc(var(--header-h) + 2rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.page-head__title { color: var(--white); font-size: var(--fs-h1); }

/* ---------- BLOG LAYOUT ---------- */
.blog-layout { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.blog-layout--with-sidebar { grid-template-columns: 1fr 300px; }
.single-post__thumb { margin-bottom: var(--space-4); }
.single-post__content { line-height: 1.8; }
.single-post__content h2, .single-post__content h3 { color: var(--navy); margin: 1.5em 0 0.5em; }
.single-post__content p { margin-bottom: 1.2em; }

/* ---------- WIDGETS ---------- */
.widget { margin-bottom: var(--space-4); }
.widget__title { font-size: 1.1rem; color: var(--navy); margin-bottom: var(--space-2); }
.widget ul { display: flex; flex-direction: column; gap: 0.4rem; }
.widget a:hover { color: var(--red); }
.widget_search .search-form, .search-form { display: flex; gap: 0.5rem; }
.search-form__input { flex: 1; padding: 0.7rem 0.9rem; border: 1px solid var(--line); background: var(--white); }

/* ---------- PAGINATION ---------- */
.pagination { margin-top: var(--space-5); display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 0.6rem; background: var(--white); color: var(--navy); border: 1px solid var(--line); }
.page-numbers.current { background: var(--red); color: var(--white); border-color: var(--red); }
.page-numbers:hover { border-color: var(--red); color: var(--red); }
.page-numbers.current:hover { color: var(--white); }

/* ---------- 404 ---------- */
.section--404 { padding-block: clamp(6rem, 12vw, 10rem); }

/* ---------- FLIP CARD (shared — case-study tiles) ---------- */
.flip-card { perspective: 1600px; }
.flip-card__inner { position: relative; width: 100%; height: 100%; transition: transform 0.7s var(--ease); transform-style: preserve-3d; }
.flip-card:hover .flip-card__inner, .flip-card:focus-within .flip-card__inner, .flip-card.is-flipped .flip-card__inner { transform: rotateY(180deg); }
.flip-card__front, .flip-card__back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; overflow: hidden; }
.flip-card__front { align-items: center; justify-content: center; background: var(--navy) center / cover no-repeat; color: var(--white); }
.flip-card__front::after { content: ""; position: absolute; inset: 0; background: rgba(11, 45, 68, 0.35); }
.flip-card__back { transform: rotateY(180deg); flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; background: var(--red); color: var(--white); padding: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- SERVICE CARDS (title pinned top, content revealed on hover) ---------- */
.service-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.service-card {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-align: center;
	color: var(--white);
	padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
	background: var(--navy) center / cover no-repeat;
	isolation: isolate;
}
.service-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(11, 45, 68, 0.4); } /* legibility tint on the photo */
.service-card::after  { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--red); opacity: 0; transition: opacity var(--dur) var(--ease); } /* red wash on hover */
.service-card:hover::after, .service-card:focus-within::after, .service-card.is-active::after { opacity: 1; }
.service-card__content { position: relative; z-index: 3; transition: transform var(--dur) var(--ease); }
.service-card__title { font-family: var(--font-display); font-size: var(--sc-title, clamp(1.6rem, 2.6vw, 2.4rem)); line-height: var(--sc-title-lh, 1.1); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
.service-card__reveal { opacity: 0; margin-top: var(--space-4); transition: opacity var(--dur) var(--ease); }
.service-card:hover .service-card__reveal, .service-card:focus-within .service-card__reveal, .service-card.is-active .service-card__reveal { opacity: 1; }
/* On reveal, lift the content up so a taller card's sub-service list isn't clipped at the
   bottom (also a subtle rise). Tunable via --sc-lift. */
/* Per design feedback: the content no longer slides up on hover — the reveal text just fades in
   (see .service-card__reveal opacity above). The lift transform was removed deliberately. */
/* Touch / smaller screens: no reliable hover, and narrower cards clip long lists — so stop
   clipping, let each card grow to fit its content, and show the full (red) panel. */
@media (max-width: 1024px) {
	.service-card { aspect-ratio: auto; }
	.service-card__content { transform: none !important; }
	.service-card__reveal { opacity: 1; }
	.service-card::after, .service-grid--slide .service-card::after { opacity: 1; transform: none; }
}
.service-card__desc { font-size: var(--sc-desc, 1rem); line-height: var(--sc-desc-lh, 1.6); margin-bottom: var(--space-3); }
.service-card__list { font-family: var(--font-display); font-size: var(--sc-items, 1.3rem); line-height: var(--sc-items-lh, 1.15); display: flex; flex-direction: column; gap: var(--sc-items-gap, 0.1rem); }
.service-card__title, .service-card__desc, .service-card__list { color: var(--white); } /* keep all card text white on the red rollover */
/* Optional red duotone over the card photos (block toggle "Red image overlay"). Replaces the
   navy legibility tint with a tunable red multiply; text stays legible via its shadow. */
.service-grid--tint .service-card::before { background: var(--red); mix-blend-mode: multiply; opacity: var(--sc-tint-opacity, 0.35); }
/* Slide hover (block option): the red panel slides in from the cursor's entry edge
   (direction set by interactions.js) instead of fading; the reveal content still fades. */
.service-grid--slide .service-card::after {
	opacity: 1;
	transform: translate(var(--wash-tx, 0%), var(--wash-ty, -101%));
	transition: transform var(--wash-dur, var(--dur)) var(--ease);
}
html:not(.js) .service-grid--slide .service-card:hover::after { transform: translate(0, 0); }

/* ---------- PHOTO GRID ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: var(--gap, clamp(1rem, 2vw, 1.75rem)); }
.photo-grid__item { overflow: hidden; } /* clip the hover zoom */
.photo-grid__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform var(--dur) var(--ease); }
.photo-grid__item:hover img { transform: scale(1.05); }
/* ---------- SCROLL-REVEAL ("Animate in on scroll" block toggle) ----------
   The block's <section> gets .anim-reveal (from the settings toggle); interactions.js adds
   .is-revealed when it scrolls into view. Grid blocks stagger their cards; other blocks
   fade/rise as one. Gated behind html.js (never stuck hidden without JS) and no-preference. */
@media (prefers-reduced-motion: no-preference) {
	/* Grid blocks: stagger the direct children (cards / tiles / logos / photos). */
	.js .anim-reveal:not(.is-revealed) :is(.team-grid, .service-grid, .case-grid, .logo-wall__grid, .photo-grid) > * { opacity: 0; }
	.anim-reveal.is-revealed :is(.team-grid, .service-grid, .case-grid, .logo-wall__grid, .photo-grid) > * { animation: fadeRise 0.6s var(--ease) both; }
	.anim-reveal.is-revealed :is(.team-grid, .service-grid, .case-grid, .logo-wall__grid, .photo-grid) > :nth-child(2) { animation-delay: 0.07s; }
	.anim-reveal.is-revealed :is(.team-grid, .service-grid, .case-grid, .logo-wall__grid, .photo-grid) > :nth-child(3) { animation-delay: 0.14s; }
	.anim-reveal.is-revealed :is(.team-grid, .service-grid, .case-grid, .logo-wall__grid, .photo-grid) > :nth-child(4) { animation-delay: 0.21s; }
	.anim-reveal.is-revealed :is(.team-grid, .service-grid, .case-grid, .logo-wall__grid, .photo-grid) > :nth-child(5) { animation-delay: 0.28s; }
	.anim-reveal.is-revealed :is(.team-grid, .service-grid, .case-grid, .logo-wall__grid, .photo-grid) > :nth-child(6) { animation-delay: 0.35s; }
	.anim-reveal.is-revealed :is(.team-grid, .service-grid, .case-grid, .logo-wall__grid, .photo-grid) > :nth-child(7) { animation-delay: 0.42s; }
	.anim-reveal.is-revealed :is(.team-grid, .service-grid, .case-grid, .logo-wall__grid, .photo-grid) > :nth-child(8) { animation-delay: 0.49s; }
	.anim-reveal.is-revealed :is(.team-grid, .service-grid, .case-grid, .logo-wall__grid, .photo-grid) > :nth-child(9) { animation-delay: 0.56s; }
	/* Everything else (statement, intro, CTA, contact, etc.): fade the whole block up as one
	   (transition, so no transform lingers on the section). */
	.js .anim-reveal:not(:has(.team-grid, .service-grid, .case-grid, .logo-wall__grid, .photo-grid)) {
		opacity: 0; transform: translateY(24px);
		transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
	}
	.anim-reveal.is-revealed:not(:has(.team-grid, .service-grid, .case-grid, .logo-wall__grid, .photo-grid)) { opacity: 1; transform: none; }
}
@keyframes fadeRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- CONTACT LOCATIONS ---------- */
.contact__intro { max-width: 640px; margin: 0 auto var(--space-2); color: var(--navy); }
.contact__heading { color: var(--red); font-size: var(--fs, var(--fs-h2)); margin-bottom: var(--space-6); }
.contact-locations { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: clamp(2rem, 5vw, 5rem); max-width: 1100px; margin: 0 auto; text-align: center; }
/* Width presets (block setting) — lift the 1100px cap so the maps render larger */
.block-contact--width-wide .contact-locations,
.block-contact--width-full .contact-locations { max-width: none; }
.block-contact--width-full > .container { max-width: none; }
.contact-office__map { margin-bottom: var(--space-3); }
.contact-office__map img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* Live OpenStreetMap embed — matches the static image's ratio; link sits under the frame. */
.contact-office__map-frame { width: 100%; aspect-ratio: 3 / 2; border: 0; display: block; }
.contact-office__map-link { display: inline-block; margin-top: var(--space-1); font-size: 0.9rem; color: var(--red); }
.contact-office__map-link:hover { text-decoration: underline; }
.contact-office__label { font-family: var(--font-display); color: var(--red); font-size: 1.1rem; margin-bottom: var(--space-2); }
.contact-office__phone { display: block; font-family: var(--font-display); color: var(--navy); margin-bottom: var(--space-1); }
.contact-office__address { font-style: normal; color: var(--navy); line-height: 1.7; }
.contact-office__email { display: inline-block; margin-top: var(--space-1); color: var(--navy); }
.contact-office__email:hover { color: var(--red); }

/* ---------- TEAM ---------- */
.team-archive__heading { font-size: var(--fs-h2); color: var(--navy); }
.team-archive__intro { max-width: 780px; margin: var(--space-2) auto 0; }
.team-grid { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 250px)); justify-content: center; gap: clamp(1.5rem, 3vw, 3rem); }
.team-member { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.team-member__photo { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--white); }
.team-member__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.team-member:hover .team-member__photo img, .team-member:focus-visible .team-member__photo img { transform: scale(1.06); } /* subtle zoom, clipped to the circle */
.team-member__name { font-family: var(--font-display); color: var(--navy); font-size: var(--t-team-name-size, 1.75rem); line-height: var(--t-team-name-lh, 1.3); margin-top: 0.5rem; } /* 28px default */
.team-member__role { color: var(--text-muted); font-size: var(--t-team-role-size, 1.5625rem); line-height: var(--t-team-role-lh, 1.3); } /* 25px default */
.team-member:hover .team-member__name { color: var(--red); }

.single-team { padding-top: clamp(1.25rem, 2vw, 2rem); padding-bottom: clamp(4rem, 8vw, 7rem); } /* tight top under the solid navy header, generous bottom */
.team-profile { display: grid; grid-template-columns: 460px 1fr; gap: clamp(2.5rem, 5vw, 5.5rem); align-items: start; max-width: 1400px; margin-inline: auto; }
.team-profile__photo { aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.team-profile__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
/* Subtle zoom, clipped to the circle — matches the team listing hover. Slightly gentler (1.04 vs
   1.06) because this headshot is much larger, so the same ratio reads as more movement. */
@media (prefers-reduced-motion: no-preference) {
	.team-profile__photo:hover img { transform: scale(1.04); }
}
.team-profile__name { font-size: clamp(2.2rem, 2.6vw, 3rem); color: var(--navy); }
.team-profile__role { font-size: 0.5em; color: var(--navy); }
.team-profile__bio { margin-top: var(--space-4); font-size: var(--t-bio-size, 1.3rem); line-height: var(--t-bio-lh, 1.3); }
.team-profile__meta { display: grid; grid-template-columns: 1fr auto; gap: var(--space-5); margin-top: var(--space-5); padding-block: var(--space-5); border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.team-profile__label { font-family: var(--font-display); color: var(--red); font-size: 1.25rem; margin-bottom: var(--space-3); }
.team-profile__list { font-family: var(--font-display); color: var(--navy); font-size: var(--t-exp-size, 1.3rem); line-height: var(--t-exp-lh, 1.3); display: flex; flex-direction: column; gap: 0.2rem; }
.team-profile__touch { text-align: right; }
.team-profile__icons { display: flex; gap: 0.7rem; justify-content: flex-end; }
/* The supplied icons include their own ring + interior, so the button no longer draws a border
   or background — it just sizes them. Ring + glyph use currentColor, so hover recolours both. */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; color: var(--navy); transition: color var(--dur) var(--ease); }
.icon-btn svg { width: 100%; height: 100%; display: block; }
.icon-btn:hover { color: var(--red); }
.team-profile__back { display: inline-block; margin-top: var(--space-5); color: var(--red); font-family: var(--font-display); font-size: 1.2rem; }
/* Staff page: 120px clear space below the nav bar (solid header is position:relative, i.e. in flow). */
.single-team.section--page { padding-top: 120px; }

/* ---------- CASE STUDIES ---------- */
.case-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
/* Case-study cards — title centred vertically (per XD); the red wash + short description
   fade in below it on hover/focus/tap (no 3D flip). */
.case-card {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	color: var(--white);
	padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
	background: var(--navy) center / cover no-repeat;
	isolation: isolate;
}
.case-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(11, 45, 68, 0.4); } /* legibility tint on the photo */
.case-card::after  { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--red); opacity: 0; transition: opacity var(--dur) var(--ease); } /* red wash on hover */
.case-card:hover::after, .case-card:focus-within::after, .case-card.is-active::after { opacity: 1; }
.case-card__content { position: relative; z-index: 3; }
.case-card__title { font-family: var(--font-display); font-size: var(--cc-title, clamp(1.6rem, 2.6vw, 2.4rem)); line-height: var(--cc-title-lh, 1.1); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
/* Taken out of flow so it hangs BELOW the centred title without displacing it — the title
   stays put whether or not the card is hovered. */
.case-card__reveal { position: absolute; top: calc(100% + var(--space-3)); left: 0; right: 0; opacity: 0; transition: opacity var(--dur) var(--ease); }
.case-card:hover .case-card__reveal, .case-card:focus-within .case-card__reveal, .case-card.is-active .case-card__reveal { opacity: 1; }
.case-card__desc { font-size: var(--cc-desc, 1.5625rem); line-height: var(--cc-desc-lh, 1.3); } /* roll-over copy at 25px per design */
/* The tile is a link, so keep it white on rollover — otherwise a:hover (red) turns the
   title/description red-on-red and they vanish. */
.case-card, .case-card:hover, .case-card:focus, .case-card:focus-within { color: var(--white); }
/* Touch / mobile: no hover, so show the excerpt in normal flow (always visible) and let the
   tile grow to fit — fixes the excerpt overflowing the fixed-ratio tile. With the JS 2-click
   interceptor removed, a single tap now navigates. */
@media (max-width: 1024px) {
	.case-card { aspect-ratio: auto; min-height: clamp(230px, 42vw, 340px); }
	.case-card__reveal { position: static; opacity: 1; margin-top: var(--space-2); }
}
/* Slide hover (block option): red panel slides in from the cursor's entry edge. */
.case-grid--slide .case-card::after {
	opacity: 1;
	transform: translate(var(--wash-tx, 0%), var(--wash-ty, -101%));
	transition: transform var(--wash-dur, var(--dur)) var(--ease);
}
html:not(.js) .case-grid--slide .case-card:hover::after { transform: translate(0, 0); }
/* Touch (no hover): the tap-activated state slides the panel in from the top. */
.service-grid--slide .service-card.is-active::after, .case-grid--slide .case-card.is-active::after { transform: translate(0, 0); }
.case-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: var(--space-5); }
.case-gallery__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Single case study — full-bleed hero, then intro + details and a 2-column body */
.single-case-study .page-banner { min-height: 100vh; } /* full-viewport featured-image header */
.single-case-study .page-banner::after { opacity: 0.45; } /* deeper overlay so the white title/nav read over bright hero photos (client) */
/* Case-study header title — width + size editable in Site Settings → Typography. Defaults keep
   the current look; min(…,12vw) keeps a large author size from overflowing. */
.single-case-study .page-banner__title { max-width: var(--t-cs-title-maxw, 1160px); font-size: min(var(--t-cs-title-size, var(--fs-hero)), 12vw); }
.single-case-study .section--page { padding-top: 120px; padding-bottom: clamp(3rem, 6vw, 6rem); } /* 120px clear below the case-study hero block */
.cs-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.cs-intro { font-family: var(--font-display); font-size: var(--t-cs-intro-size, clamp(1.5rem, 1.9vw, 2.1rem)); line-height: var(--t-cs-intro-lh, 1.4); color: var(--navy); }
.cs-intro > :last-child { margin-bottom: 0; }
/* The dl itself is the grid so EVERY row shares one label/value column pair — that way all the
   navy values align on a single left edge and a wrapped value (Services) indents to the value
   column instead of running back under the label. Matches the XD. */
.cs-details { margin: 0; border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); padding-block: clamp(1.25rem, 2.5vw, 1.75rem); display: grid; grid-template-columns: max-content 1fr; column-gap: 1.25rem; row-gap: 0.35rem; align-items: baseline; }
.cs-detail { display: contents; } /* let dt/dd become items of .cs-details */
.cs-detail__label { font-family: var(--font-display); font-size: var(--t-cs-detail-size, 1.75rem); line-height: var(--t-cs-detail-lh, 1.3); color: var(--red); margin: 0; }
.cs-detail__value { font-family: var(--font-display); font-size: var(--t-cs-detail-size, 1.75rem); line-height: var(--t-cs-detail-lh, 1.3); color: var(--navy); margin: 0; }
.cs-body { columns: 2; column-gap: clamp(2rem, 5vw, 5rem); font-size: var(--t-cs-body-size, 1.5625rem); line-height: var(--t-cs-body-lh, 1.3); }
.cs-body > * { break-inside: avoid; margin: 0 0 1.2em; }
/* Closing paragraph is set in the display serif, larger — per design. */
.cs-body > :last-child { font-family: var(--font-display); font-size: var(--t-cs-last-size, 1.75rem); line-height: var(--t-cs-last-lh, 1.3); color: var(--navy); margin-bottom: 0; }
.single-case-study .team-profile__back { display: inline-block; margin-top: clamp(2rem, 4vw, 3.5rem); }

@media (max-width: 1024px) {
	.blog-layout--with-sidebar { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: repeat(3, 1fr); }
	.team-profile { grid-template-columns: 1fr; }
	.team-profile__photo { max-width: 320px; }
	.team-profile__touch { text-align: left; }
	.team-profile__icons { justify-content: flex-start; }
}
@media (max-width: 768px) {
	.testimonials, .post-grid, .service-grid, .contact-locations, .case-grid { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.team-profile__meta { grid-template-columns: 1fr; gap: var(--space-4); }
	.cs-head { grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); }
	.cs-body { columns: 1; }
	.case-gallery { grid-template-columns: repeat(2, 1fr); }
	/* Touch: flip cards toggle via .is-flipped (interactions.js); disable hover-flip */
	.flip-card:hover .flip-card__inner { transform: none; }
	.flip-card.is-flipped .flip-card__inner { transform: rotateY(180deg); }
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
.site-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 1000;
	color: var(--white);
}
.site-header__inner {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	min-height: var(--header-h);
	/* Navy padding below the nav/logo. Because the nav zones stretch to the content box,
	   this also keeps the red hover/active block top-aligned and shorter than the bar. */
	padding-bottom: clamp(2.5rem, 5vw, 4.75rem);
	max-width: 1800px; /* nav-specific cap so the menu doesn't spread to the screen edges */
}
/* Solid variant — pages without a hero banner (team single, blog, search, 404) */
.site-header--solid { position: relative; background: var(--navy); }
/* Slight dark scrim behind the transparent header so the white nav stays legible over
   full-background hero images. Team profiles use the solid navy header so are excluded
   automatically. (Case studies were excluded originally; client later asked for it there too.)
   z-index:-1 keeps it inside the header's stacking context — over the banner, under the nav. */
body.has-transparent-header .site-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: calc(var(--header-h) + 2rem);
	background: linear-gradient(to bottom, rgba(4, 16, 26, 0.55), rgba(4, 16, 26, 0));
	pointer-events: none;
	z-index: -1;
}
body.has-transparent-header { --header-offset: 0; }

/* Logo — absolutely centred to the header, independent of the two nav widths.
   Top-aligned with a gap above so the taller lockup sits below the viewport edge. */
.site-header__logo {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	transform: translateX(-50%);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 37px; /* gap from top of page to the logo (per design) */
	pointer-events: none;
}
.site-header__logo .site-logo, .site-header__logo .custom-logo-link { pointer-events: auto; }
.site-logo, .custom-logo-link { display: inline-flex; align-items: center; }
.site-logo svg, .custom-logo { width: 200px; height: auto; }

/* Nav zones — pushed to the edges, logo floats between them */
.site-header__nav { display: flex; align-items: stretch; flex: 1; min-width: 0; }
.site-header__nav--left { justify-content: flex-start; }
.site-header__nav--right { justify-content: flex-end; }
.nav-links { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }

.nav-item { position: relative; display: flex; list-style: none; }
.nav-link {
	position: relative;
	display: inline-flex;
	align-items: flex-end; /* label sits low in the band, level with the logo (per design) */
	padding: 0 1.875rem clamp(0.9rem, 1.5vw, 1.4rem); /* 30px either side; bottom gap aligns to logo */
	font-family: var(--font-display);
	font-size: var(--fs-nav);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--white);
	overflow: hidden;
}
/* The red "slide-down" block — sits behind the label, animates from the top */
.nav-link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--red);
	transform: translateY(-100%);
	transition: transform var(--dur) var(--ease);
	z-index: 0;
}
.nav-link__label { position: relative; z-index: 1; }
.nav-item:hover .nav-link::before,
.nav-link:focus-visible::before { transform: translateY(0); }
/* Persistent red block on the current page */
.nav-item--active .nav-link::before { transform: translateY(0); }
/* ...but as soon as another item is hovered, the active page's red slides back up so only
   one red block is ever visible (the hovered one). If the active item is itself hovered it
   stays. :has() enhancement — without it, the old behaviour (both visible) simply remains. */
.site-header:has(.nav-item:hover) .nav-item--active:not(:hover) .nav-link::before { transform: translateY(-100%); }
.nav-link:hover { color: var(--white); }

/* Mobile menu overlay — hidden on desktop, shown via media query */
.mobile-menu { display: none; }

/* Hamburger (mobile) */
.nav-hamburger {
	display: none;
	position: relative;
	width: 46px; height: 46px;
	align-self: center;
	margin-left: auto;
	z-index: 950;
}
.nav-hamburger span {
	position: absolute;
	left: 9px; right: 9px;
	height: 2px;
	background: var(--white);
	transition: transform var(--dur) var(--ease), opacity 0.2s var(--ease), top var(--dur) var(--ease);
}
.nav-hamburger span:nth-child(1) { top: 16px; }
.nav-hamburger span:nth-child(2) { top: 23px; }
.nav-hamburger span:nth-child(3) { top: 30px; }
body.nav-open .nav-hamburger span:nth-child(1) { top: 23px; transform: rotate(45deg); }
body.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-hamburger span:nth-child(3) { top: 23px; transform: rotate(-45deg); }

/* ==========================================================================
   HERO (home)
   ========================================================================== */
.hero {
	position: relative;
	min-height: var(--min-h, clamp(560px, 78vh, 820px));
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--white);
	background: var(--navy) center / cover no-repeat;
}
/* Full-viewport height option (overrides --min-h) */
.hero--full { min-height: 100vh; min-height: 100svh; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--ov-color, #0b2d44); opacity: var(--ov-opacity, 0.22); }
.hero__inner { position: relative; z-index: 2; padding-top: var(--header-h); }
/* Cap against the viewport so a large author-set --fs (e.g. 8rem) still shrinks on
   narrow screens instead of overflowing/overlapping. Desktop keeps the full --fs. */
.hero__title { font-size: min(var(--fs, var(--fs-hero)), 12vw); line-height: 1.04; text-shadow: 0 2px 24px rgba(0,0,0,0.28); }
/* Each heading line is its own block so the two statements can be spaced apart (was a <br>). */
.hero__title-line { display: block; }
.hero__title-line + .hero__title-line { margin-top: var(--hero-line-gap, 0.22em); }

/* Hero carousel */
.hero__carousel { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__track { display: flex; height: 100%; will-change: transform; }
.hero__slide { flex: 0 0 100%; height: 100%; background: var(--navy) center / cover no-repeat; }
.hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 48px; height: 48px; border-radius: 50%; background: rgba(11,45,68,0.4); color: var(--white); display: flex; align-items: center; justify-content: center; transition: background var(--dur) var(--ease); }
.hero__arrow:hover { background: var(--red); }
.hero__arrow--prev { left: 1.25rem; }
.hero__arrow--next { right: 1.25rem; }
.hero__arrow span::before { content: ""; display: block; width: 10px; height: 10px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; }
.hero__arrow--prev span::before { transform: rotate(-45deg); margin-left: 3px; }
.hero__arrow--next span::before { transform: rotate(135deg); margin-right: 3px; }
.hero__dots { position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 0.55rem; }
.hero__dot { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: background var(--dur) var(--ease); }
.hero__dot.is-active { background: var(--white); }
/* Accessible pause control — visually hidden until focused */
.hero__pause { position: absolute; left: 1rem; bottom: 1rem; z-index: 4; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; background: rgba(11,45,68,0.6); color: var(--white); font-family: var(--font-body); border-radius: 4px; cursor: pointer; }
.hero__pause:focus { width: auto; height: auto; clip: auto; padding: 0.5rem 0.9rem; }

/* ==========================================================================
   INTRO STATEMENT (home / about)
   ========================================================================== */
.intro-statement { text-align: center; }
.intro-statement__lede { max-width: 720px; margin-inline: auto; color: var(--navy); }
.intro-statement__lede p + p { margin-top: 1.1em; }
.intro-statement__heading { font-size: var(--fs, var(--fs-h2)); color: var(--navy); } /* spacing handled by the block's padding settings */
.intro-statement__list {
	margin-top: var(--space-4);
	display: flex; flex-direction: column; gap: 0.1rem; /* tight — the lines read as one grouped statement */
	font-family: var(--font-display);
	color: var(--red);
	font-size: 1.1rem;
	line-height: 1.2;
}
.intro-statement__statement {
	max-width: 900px;
	margin: var(--space-5) auto 0;
	font-family: var(--font-display);
	font-size: var(--fs-statement);
	line-height: 1.32;
	color: var(--navy);
}

/* ---------- STATEMENT BLOCK ---------- */
.block-statement { text-align: center; }
.statement { font-family: var(--font-display); font-size: var(--fs, var(--fs-statement)); line-height: 1.3; color: var(--navy); max-width: 980px; margin-inline: auto; }
.scheme-navy .statement { color: var(--white); }

/* ---------- CORE BLOCK SUPPORT (wp-block-library is dequeued) ---------- */
.has-text-align-left { text-align: left; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
/* Default spacing below the core Heading block (scales with the heading size) */
.wp-block-heading { margin-bottom: 0.6em; }
.wp-block-list { padding-left: 1.25em; }
.wp-block-list li { margin-bottom: 0.35em; }
.wp-block-list li:last-child { margin-bottom: 0; }
/* "Phoenix Red List" block style — the About service list */
.wp-block-list.is-style-red-list { list-style: none; padding-left: 0; margin: 0; font-family: var(--font-display); color: var(--red); text-align: center; }
.wp-block-list.is-style-red-list li { margin: 0 0 0.35em; }
.wp-block-list.is-style-red-list li:last-child { margin-bottom: 0; }

/* ==========================================================================
   NAV-CARD GRID (home) — 2×2 photo tiles, red-wash on hover
   ========================================================================== */
.nav-card-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.nav-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--min-h, clamp(220px, 26vw, 340px));
	overflow: hidden;
	color: var(--white);
	background: var(--navy) center / cover no-repeat;
	isolation: isolate;
}
.nav-card::before {
	content: "";
	position: absolute; inset: 0;
	background: var(--ov-color, #0b2d44);
	opacity: var(--ov-opacity, 0.26);
	z-index: 1;
	transition: opacity var(--dur) var(--ease);
}
/* Red duotone wash — slides in from whichever edge the cursor enters (direction set by
   JS; see interactions.js). Multiply duotone where supported, flat red otherwise; opacity
   is author-set via --nc-wash-opacity. It rests off-screen (clipped by overflow:hidden)
   and slides to cover on hover. */
.nav-card::after {
	content: "";
	position: absolute; inset: 0;
	background: var(--red);
	opacity: var(--nc-wash-opacity, 0.58);
	z-index: 2;
	transform: translate(var(--wash-tx, 0%), var(--wash-ty, -101%));
	transition: transform var(--wash-dur, var(--dur)) var(--ease);
}
.wash-noanim { --wash-dur: 0s; } /* JS zeroes the duration to snap the wash to the entry edge before sliding */
html:not(.js) .nav-card:hover::after { transform: translate(0, 0); } /* no-JS fallback: plain slide-in on hover */
/* True multiply duotone: at FULL opacity the red multiplies with the photo — highlights go
   pure red, shadows go near-black. Any opacity below 1 composites the result back toward the
   untouched photo, which is what made the wash read as washed-out pink rather than "more red". */
@supports (mix-blend-mode: multiply) {
	.nav-card::after { mix-blend-mode: multiply; opacity: var(--nc-wash-opacity, 1); }
}
.nav-card__label {
	position: relative;
	z-index: 3;
	color: var(--white);
	font-family: var(--font-display);
	font-size: var(--nc-label, var(--fs, clamp(2.2rem, 3.6vw, 3.4rem)));
	line-height: var(--nc-label-lh, 1.1);
	text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
/* No hover scale on the label: scaling the text reflowed the longer headings (Team / Case
   Studies) and caused a slight jump on rollover. The red multiply wash is the hover cue instead. */
/* Title "bounce in up" load effect when the grid scrolls into view (interactions.js adds
   .is-revealed). Gated behind html.js so labels are never stuck hidden without JS, and
   behind no-preference so reduced-motion users just see them appear. */
@media (prefers-reduced-motion: no-preference) {
	.js .nav-card-grid[data-reveal] .nav-card__label { opacity: 0; }
	.nav-card-grid[data-reveal].is-revealed .nav-card__label { animation: navLabelIn 0.7s var(--ease) both; }
	.nav-card-grid.is-revealed .nav-card:nth-child(2) .nav-card__label { animation-delay: 0.09s; }
	.nav-card-grid.is-revealed .nav-card:nth-child(3) .nav-card__label { animation-delay: 0.18s; }
	.nav-card-grid.is-revealed .nav-card:nth-child(4) .nav-card__label { animation-delay: 0.27s; }
}
@keyframes navLabelIn {
	0%   { opacity: 0; transform: translateY(30px); }
	55%  { opacity: 1; transform: translateY(-8px); }
	78%  { transform: translateY(4px); }
	100% { opacity: 1; transform: translateY(0); }
}
/* Red wash reveal for touch/mobile — plays once as each nav card scrolls into view, then clears. */
@keyframes navWashReveal { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }
/* Label stays white when the red wash fades in (matches the design) */
.nav-card:hover .nav-card__label, .nav-card:focus-visible .nav-card__label { color: var(--white); }

/* ==========================================================================
   LOGO WALL (home) — "Who we work with"
   ========================================================================== */
.logo-wall { text-align: center; }
.logo-wall__heading { color: var(--red); font-size: 1.5rem; margin-bottom: var(--space-2); }
.logo-wall__intro { max-width: 640px; margin: 0 auto var(--space-6); color: var(--text); }
.logo-wall__grid {
	/* --cols comes inline from the block setting; --cols-now is the *effective* count so the
	   media queries below can override it (an inline custom property would always win). */
	--cols-now: var(--cols, 3);
	--lw-gap: clamp(1rem, 2.5vw, 2.25rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* centres a partial last row (e.g. 2 logos under a row of 8) */
	align-items: center;
	gap: var(--lw-gap);
	max-width: 940px;
	margin-inline: auto;
}
/* Width presets (block setting): lift the 940px cap so the row can fill the page */
.logo-wall--width-wide .logo-wall__grid,
.logo-wall--width-full .logo-wall__grid { max-width: none; }
.logo-wall--width-full > .container { max-width: none; }
.logo-wall__item { display: flex; align-items: center; justify-content: center; flex: 0 0 calc((100% - (var(--cols-now) - 1) * var(--lw-gap)) / var(--cols-now)); }
.logo-wall__item img {
	max-height: 92px;
	width: auto;
	object-fit: contain;
	/* Blend the sliced tiles' light background into the section so no grey box shows */
	mix-blend-mode: multiply;
	transition: transform var(--dur) var(--ease);
}
.logo-wall__item--link:hover img { transform: scale(1.05); }

/* ==========================================================================
   PAGE BANNER (interior pages)
   ========================================================================== */
.page-banner {
	position: relative;
	min-height: var(--min-h, clamp(300px, 30vw, 440px));
	padding-top: var(--header-h);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--white);
	background: var(--navy) center / cover no-repeat;
}
.page-banner::after { content: ""; position: absolute; inset: 0; background: var(--ov-color, #0b2d44); opacity: var(--ov-opacity, 0.30); }
.page-banner__title { position: relative; z-index: 2; font-size: min(var(--fs, var(--fs-hero)), 12vw); text-shadow: 0 2px 20px rgba(0,0,0,0.28); } /* min() caps a large author --fs on mobile so it can't force horizontal overflow */

/* Slow "Ken Burns" background zoom (block toggle). A pseudo carries a copy of the section's
   background image (via inherit) and scales it slowly; overflow clips the growth, and it
   sits below the overlay (::after) and title. */
.page-banner--zoom { overflow: hidden; isolation: isolate; }
.page-banner--zoom::before {
	content: "";
	position: absolute; inset: 0;
	z-index: 0;
	background-image: inherit;
	background-position: center;
	background-size: cover;
	transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
	.page-banner--zoom::before { animation: bannerZoom 14s ease-out both; }
}
@keyframes bannerZoom { from { transform: scale(1); } to { transform: scale(1.12); } }

/* Heading rise-and-settle load effect (block toggle). */
@media (prefers-reduced-motion: no-preference) {
	/* Case-study titles reuse .page-banner__title, so they're covered by the first selector.
	   Team profile names aren't in a banner, hence the second. Both toggled in Site Settings → Animation. */
	.page-banner--anim .page-banner__title,
	.team-profile__name--anim { animation: bannerTitleIn 0.6s var(--ease) 0.1s both; }
}
/* Entry (rise + fade) kept; the settle was a clunky double-bounce (-10px then +5px), so it's now
   a single small overshoot that resolves quickly. */
@keyframes bannerTitleIn {
	0%   { opacity: 0; transform: translateY(42px); }
	70%  { opacity: 1; transform: translateY(-4px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.86); padding-block: clamp(3rem, 6vw, 5rem); font-family: "Lato", var(--font-body); font-weight: 500; }
.site-footer__logo { display: flex; justify-content: center; margin-bottom: var(--space-5); }
.site-footer__logo svg { height: 100px; width: auto; }
.site-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
	text-align: center;
	align-items: start;
}
.footer-office__label { font-family: "Lato", var(--font-body); } /* Office label in Lato (footer body font), not the display serif */
.footer-office__label { color: var(--red-on-dark, var(--red)); font-size: var(--f-label-size, 1.2rem); line-height: var(--f-label-lh, normal); margin-bottom: var(--space-2); }
.footer-office__phone { display: block; font-size: var(--f-phone-size, 1.15rem); line-height: var(--f-phone-lh, normal); margin-bottom: var(--space-2); }
.footer-office__address { font-size: var(--f-addr-size, 1rem); line-height: var(--f-addr-lh, 1.8); color: rgba(255,255,255,0.72); font-style: normal; }
.footer-centre { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.footer-centre__email, .footer-centre__link { font-size: var(--f-links-size, 1.15rem); line-height: var(--f-links-lh, normal); }
.footer-centre__email { color: var(--white); }
.footer-centre__meta { font-size: var(--f-meta-size, 0.95rem); line-height: var(--f-meta-lh, normal); color: rgba(255,255,255,0.72); }
.footer-office__phone:hover, .footer-centre__link:hover, .footer-centre__email:hover { color: var(--red-on-dark, var(--red)); }
.footer-credit { margin-top: var(--space-5); text-align: center; }

/* ---------- FOOTER CREDITS (Designed by / Powered by) ---------- */
/* Sits below the office columns, aligned to the outer two (Designed by under Bath, Powered by under Cardiff). */
.footer-credits { margin-top: var(--space-6); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: center; }
.footer-credits__item { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 1rem; justify-self: center; }
.footer-credits__item:last-child { grid-column: 3; } /* skip the centre column */
.footer-credits__link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--white); transition: color var(--dur) var(--ease); }
.footer-credits__link:hover { color: var(--red-on-dark, var(--red)); }
.footer-credits__logo { display: inline-flex; }
.footer-credits__logo svg { display: block; width: auto; }
.footer-credits__logo--ignition svg { height: 18px; }
.footer-credits__logo--zonkey svg { height: 22px; }
.footer-credits__wordmark { font-weight: 700; }

/* Powered-by-Zonkey widget */
.zonkey-powered-by-widget p { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
.zonkey-powered-by-widget a { display: inline-flex; align-items: center; gap: 0.34rem; transition: color var(--dur) var(--ease); }
.zonkey-powered-by-widget strong { font-weight: 400; color: inherit; }
.zonkey-powered-by-widget--light p { color: rgba(255,255,255,0.5); }
.zonkey-powered-by-widget--light a { color: rgba(255,255,255,0.78); }
.zonkey-powered-by-widget--light a:hover { color: var(--white); }
.zonkey-powered-by-widget--dark p { color: var(--text-muted); }
.zonkey-powered-by-widget--dark a { color: var(--ink); }

/* ==========================================================================
   SERVICES / TEAM / CASE STUDIES / CONTACT / BLOG / SEARCH / 404
   (built in later phases — section markers kept so styles land in order)
   ========================================================================== */
/* ---------- SERVICES CARDS ---------- */
/* ---------- TEAM ---------- */
/* ---------- CASE STUDIES ---------- */
/* ---------- CONTACT ---------- */
/* ---------- BLOG / ARCHIVE ---------- */
/* ---------- SINGLE POST ---------- */
/* ---------- SEARCH ---------- */
/* ---------- 404 ---------- */

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
	:root { --header-h: 104px; }
	.nav-link { padding: 0 0.8rem clamp(0.7rem, 1.3vw, 1.1rem); letter-spacing: 0.1em; }
}

@media (max-width: 768px) {
	:root { --header-h: var(--header-h-mobile); }

	/* Header collapses to centred logo + hamburger; split navs hide, mobile overlay shows */
	.site-header__inner { min-height: var(--header-h-mobile); padding-bottom: 0; }
	.site-header__nav--left, .site-header__nav--right { display: none; }
	.nav-hamburger { display: block; }
	/* Mobile: logo moves from centred to top-left. It's absolutely positioned, so `left` is
	   measured from the padding box — using --gutter keeps it aligned with the container text
	   rather than flush against the screen edge. */
	.site-header__logo { left: var(--gutter); transform: none; justify-content: flex-start; align-items: center; padding-top: 0; }
	.site-logo svg, .custom-logo { width: 110px; height: auto; }

	.mobile-menu {
		display: flex;
		position: fixed;
		inset: 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: var(--navy);
		transform: translateX(100%);
		transition: transform var(--dur) var(--ease);
		z-index: 900;
	}
	body.nav-open .mobile-menu { transform: translateX(0); }
	.mobile-menu .nav-links { flex-direction: column; align-items: center; gap: 0.25rem; }
	.mobile-menu .nav-link { height: 56px; font-size: 1.1rem; color: var(--white); align-items: center; padding-block: 0; }
	.mobile-menu .nav-link::before { display: none; }
	.mobile-menu .nav-item--active .nav-link, .mobile-menu .nav-item:hover .nav-link { color: var(--red); }

	.nav-card-grid { grid-template-columns: 1fr; }
	/* Homepage hero: separate the two statement lines a touch on mobile. */
	.hero__title { line-height: 1.2; }
	/* Nav cards: touch has no hover, so play the red wash once as each card scrolls into view. */
	.nav-card-grid[data-reveal].is-revealed .nav-card::after { transform: none; animation: navWashReveal 1.5s var(--ease) both; }
	.nav-card-grid.is-revealed .nav-card:nth-child(2)::after { animation-delay: 0.12s; }
	.nav-card-grid.is-revealed .nav-card:nth-child(3)::after { animation-delay: 0.24s; }
	.nav-card-grid.is-revealed .nav-card:nth-child(4)::after { animation-delay: 0.36s; }
	/* Case study: shrink Client/Role details so long service lists run on with commas rather than
	   one word per line, and cut the big gap between the hero and the intro copy. */
	.cs-detail__label, .cs-detail__value { font-size: 1.2rem; line-height: 1.3; }
	/* Case-study tiles: optional mobile-only title/excerpt sizes (block settings), so the 25px
	   desktop roll-over text can be shrunk on phones where it would otherwise overflow the tile. */
	.case-card__title { font-size: var(--cc-title-m, var(--cc-title, clamp(1.6rem, 2.6vw, 2.4rem))); }
	.case-card__desc { font-size: var(--cc-desc-m, var(--cc-desc, 1.5625rem)); }
	.single-case-study .section--page { padding-top: clamp(2.5rem, 10vw, 5rem); }
	.logo-wall__grid { --cols-now: var(--cols-tab, 4); gap: 1.5rem; }
	.site-footer__cols { grid-template-columns: 1fr; gap: var(--space-5); }
	/* Mobile stack order: left office (1), right office (3), then centre column last (2) */
	.footer-centre { order: 1; }
		.footer-credits { grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-5); }
		.footer-credits__item:last-child { grid-column: 1; }
}

@media (max-width: 480px) {
	.logo-wall__grid { --cols-now: var(--cols-mob, 4); gap: 1rem; }
	/* These used to hardcode a height, which threw away the block's own Min height setting —
	   a banner authored at 100vh was being squashed to 260px here. Now the author value wins
	   and only the fallback changes (deeper per design feedback). `:not(.hero--full)` lets a
	   full-height hero keep its 100svh. */
	.hero:not(.hero--full) { min-height: var(--min-h, 100svh); }
	.page-banner { min-height: var(--min-h, 390px); }
	/* Bigger banner titles so they don't float/get lost (Case Studies wraps to two lines). */
	.page-banner__title { font-size: min(var(--fs, 3.6rem), 15vw); }
	.single-case-study .page-banner__title { font-size: min(var(--t-cs-title-size, 3.6rem), 15vw); } /* respect the setting but keep it phone-safe */
	/* About photo grid: full-width, larger images on phones. */
	.photo-grid { grid-template-columns: 1fr; }
	.cta-circle__link { width: clamp(160px, 52vw, 200px); font-size: 1.6rem; }
	.team-profile__meta { grid-template-columns: 1fr; }
	.icon-btn { width: 48px; height: 48px; } /* ≥44px touch target */
	.btn { width: 100%; } /* full-width buttons are easier to tap */
	.cta-banner__actions .btn { width: auto; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}