/* ==========================================================================
   Witan Solicitors — design system
   --------------------------------------------------------------------------
   Mobile-first. Everything the design depends on is a custom property in
   :root, so a rebrand is a handful of edits at the top of this file rather
   than a search across templates.

   Contents
     1.  Fonts
     2.  Design tokens
     3.  Reset & base elements
     4.  Layout primitives      .container .section .grid-*
     5.  Buttons                .btn .btn--*
     6.  Site header & nav
     7.  Site footer
     8.  Components             .hero .logo-strip .icon-card .cta-band …
     9.  Blog & archives
     10. Forms
     11. Editor / block-markup plumbing
     12. Utilities
     13. Print
   ========================================================================== */

/* ------------------------------------------------------------------ 1. Fonts
   Self-hosted variable fonts: no third-party request, no cookie surface,
   two files per family instead of one per weight.                            */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/montserrat-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/opensans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/opensans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------- 2. Design tokens
   Change the brand here, not in the components.                              */

:root {
	/* Brand palette — four distinct purples are in use on the live site and
	   normalising them to one does not match. Measured, see design-spec/. */
	--purple-heading:   #553762;  /* H2s, enquiry-form panel */
	--purple-body:      #543561;  /* H3s, inline links, CTA box, nav */
	--purple-nav:       #543460;  /* sidebar sub-service link boxes */
	--purple-band:      #6f5579;  /* enquiry-form header band */

	--brand:            #543561;  /* alias of --purple-body */
	--brand-dark:       #3f2749;
	--brand-light:      #6d4a7d;
	--brand-tint:       #f3eff5;  /* very light purple wash */

	/* Neutrals */
	--black:            #000000;
	--ink:              #333333;  /* strong body copy / headings on light */
	--body:             #666666;  /* default paragraph colour */
	--muted:            #7a7a7a;
	--surface:          #edeee9;  /* card / panel grey */
	--surface-alt:      #f7f7f5;
	--dark:             #3a3a3a;  /* dark content bands, e.g. "Say Hello" */
	--footer-bg:        #1e1e1e;  /* the footer is darker than those bands */
	--dark-2:           #2f2f2f;
	--line:             #e0e0dc;
	--white:            #ffffff;

	/* Semantic */
	--link:             var(--brand);
	--link-hover:       var(--brand-light);
	--focus:            #ffb703;
	--error:            #b3261e;
	--success:          #1e7a3c;

	/* Typography */
	--font-heading:     'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-body:        'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	/* Inner-page type: Montserrat throughout, 16px/300 body, small purple
	   headings. These are the live values — see design-spec/service-2col. */
	--fs-body:          1rem;         /* 16px */
	--lh-body-tight:    1.4;          /* 22.4px at 16px */
	--lh-list:          1.625;        /* 26px at 16px */
	--fw-body:          300;
	--ink-body:         #1a1a1a;
	--fs-page-h2:       1.3125rem;    /* 21px */
	--fs-page-h3:       1rem;         /* 16px */

	--fs-base:          1rem;      /* 16px — up from Divi's 14px for legibility */
	--fs-sm:            0.875rem;
	--fs-xs:            0.8125rem;
	--fs-lg:            1.125rem;
	--lh-body:          1.7;
	--lh-heading:       1.15;

	/* Fluid heading scale — min at 360px, max at 1280px */
	--fs-h1:            clamp(2rem,   1.30rem + 3.1vw, 3.5rem);
	--fs-h2:            clamp(1.75rem, 1.19rem + 2.5vw, 2.875rem);
	--fs-h3:            clamp(1.375rem, 1.10rem + 1.2vw, 1.875rem);
	--fs-h4:            clamp(1.125rem, 1.00rem + 0.6vw, 1.375rem);
	--fs-h5:            1.0625rem;
	--fs-h6:            0.9375rem;
	--fs-hero:          clamp(1.875rem, 1.35rem + 2.3vw, 2.875rem); /* 30 → 46px, matching the live hero */

	/* Spacing scale */
	--space-3xs:        0.25rem;
	--space-2xs:        0.5rem;
	--space-xs:         0.75rem;
	--space-sm:         1rem;
	--space-md:         1.5rem;
	--space-lg:         2rem;
	--space-xl:         3rem;
	--space-2xl:        4rem;
	--space-3xl:        6rem;

	/* Section rhythm */
	--section-y:        clamp(2.75rem, 1.5rem + 5vw, 5.5rem);
	--section-y-tight:  clamp(1.75rem, 1rem + 3vw, 3.25rem);

	/* Layout */
	--row:              1080px;    /* the inner-page content row, measured */
	--row-main:         65.67%;    /* 709.203px of 1080 */
	--row-aside:        31.33%;    /* 338.398px of 1080 */
	--row-gap:          3%;        /* 32.398px — Divi gutter 2 */
	--container:        1280px;
	--container-narrow: 860px;
	--gutter:           clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
	--grid-gap:         clamp(1rem, 0.5rem + 1.6vw, 1.875rem);

	/* Shape & depth */
	--radius:           12px;      /* cards, panels, inputs */
	--radius-btn:       15px;      /* matches the existing site's buttons */
	--radius-sm:        8px;
	--shadow-sm:        0 1px 3px rgba(0, 0, 0, .08);
	--shadow-md:        0 6px 20px rgba(0, 0, 0, .10);
	--shadow-lg:        0 14px 40px rgba(0, 0, 0, .14);

	/* Chrome */
	--topbar-h:         44px;
	--header-h:         88px;
	--header-h-mobile:  68px;
	--z-header:         1000;
	--z-overlay:        1100;

	/* Motion */
	--ease:             cubic-bezier(.4, 0, .2, 1);
	--dur:              .25s;
}

/* ---------------------------------------------------- 3. Reset & base
   Small, deliberate reset — not a library.                                   */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--body);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: var(--lh-heading);
	color: var(--brand);
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); text-transform: uppercase; letter-spacing: .06em; }

p  { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }

a {
	color: var(--link);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color var(--dur) var(--ease);
}
a:hover { color: var(--link-hover); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: 2px;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
figure { margin: 0 0 var(--space-md); }
address { font-style: normal; }
figcaption { font-size: var(--fs-sm); color: var(--muted); padding-top: var(--space-2xs); }

ul, ol { margin: 0 0 var(--space-sm); padding-left: 1.35em; }
li  { margin-bottom: var(--space-3xs); }
li > ul, li > ol { margin-top: var(--space-3xs); }

blockquote {
	margin: var(--space-md) 0;
	padding: var(--space-sm) var(--space-md);
	border-left: 4px solid var(--brand);
	background: var(--surface-alt);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-style: italic;
	color: var(--ink);
}

hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-xl) 0; }

code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
pre { overflow-x: auto; padding: var(--space-sm); background: var(--surface); border-radius: var(--radius); }

/* Weight only — no colour. Setting a colour here silently repainted <strong>
   inside white-on-purple headings to dark grey. */
strong, b { font-weight: 700; }

/* Tables — wide ones scroll rather than pushing the page sideways */
.table-scroll { overflow-x: auto; margin-bottom: var(--space-md); }
table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-md);
	font-size: var(--fs-sm);
}
th, td { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { background: var(--brand); color: var(--white); font-family: var(--font-heading); font-weight: 600; }
tbody tr:nth-child(even) { background: var(--surface-alt); }

/* ------------------------------------------------- 4. Layout primitives */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: 1560px; }

.section {
	padding-block: var(--section-y);
	position: relative;
}
.section--tight   { padding-block: var(--section-y-tight); }
.section--flush   { padding-block: 0; }
.section--brand   { background: var(--brand); }
.section--dark    { background: var(--dark); }
.section--surface { background: var(--surface); }
.section--tint    { background: var(--brand-tint); }

/* Dark/brand bands: invert type colours once, here, so components nested
   inside don't each have to know. Cards opt back out explicitly (see .card). */
.section--brand,
.section--dark {
	color: rgba(255, 255, 255, .88);
}
.section--brand :where(h1, h2, h3, h4, h5, h6),
.section--dark  :where(h1, h2, h3, h4, h5, h6) { color: var(--white); }
.section--brand a:not(.btn),
.section--dark  a:not(.btn) { color: var(--white); }

/* Section heading block */
.section-head {
	max-width: 46rem;
	margin: 0 auto var(--space-xl);
	text-align: center;
}
.section-head > :last-child { margin-bottom: 0; }
.section-head p { font-size: var(--fs-lg); }
.section-head--start { margin-inline: 0; text-align: left; }

/* Grids.
   Explicit column counts per breakpoint rather than auto-fit: auto-fit picks
   the count from available width, which silently turned the 3-up service grid
   into 4-up on a 1280px screen. Column counts are part of the design, so they
   are stated, not derived. */
.grid { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }

@media (min-width: 40em) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62em) {
	.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Auto-fit variant for sets whose length is unknown (logo strips, offices) */
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* Two-column split: media beside copy */
.split {
	display: grid;
	gap: var(--space-xl);
	align-items: center;
}
@media (min-width: 62em) {
	.split { grid-template-columns: 1fr 1fr; }
	.split--media-first > .split__media { order: -1; }
	.split--wide-copy { grid-template-columns: 1.25fr 1fr; }
}
.split__media img { width: 100%; border-radius: var(--radius); }

.stack > * + * { margin-top: var(--space-sm); }
.stack--lg > * + * { margin-top: var(--space-lg); }

/* ------------------------------------------------------------ 5. Buttons */

.btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: .7em 1.6em;
	border: 2px solid var(--brand);
	border-radius: var(--radius-btn);
	background: var(--brand);
	color: var(--white);
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
	            border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover,
.wp-block-button__link:hover {
	background: var(--brand-dark);
	border-color: var(--brand-dark);
	color: var(--white);
	transform: translateY(-1px);
}

/* Outline on light backgrounds — the site's most-used CTA */
.btn--outline,
.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--brand);
	border-color: var(--brand);
}
.btn--outline:hover,
.is-style-outline .wp-block-button__link:hover {
	background: var(--brand);
	color: var(--white);
}

/* Outline on brand/dark bands */
.btn--ghost,
.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--white);
	border-color: var(--white);
}
.btn--ghost:hover,
.is-style-ghost .wp-block-button__link:hover {
	background: var(--white);
	color: var(--brand);
}

.btn--solid-light {
	background: var(--white);
	border-color: var(--white);
	color: var(--brand);
}
.btn--solid-light:hover { background: var(--surface); border-color: var(--surface); color: var(--brand-dark); }

.btn--sm { padding: .5em 1.1em; font-size: var(--fs-sm); }
.btn--lg { padding: .85em 2em; }
.btn--block { display: flex; width: 100%; }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
}
.btn-row--center { justify-content: center; }

/* --------------------------------------------------- 6. Site header & nav */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--z-overlay);
	padding: var(--space-2xs) var(--space-sm);
	background: var(--white);
	color: var(--brand);
	font-weight: 700;
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

.topbar {
	background: var(--black);
	color: var(--white);
	font-size: var(--fs-sm);
}
/* Geometry taken from the Divi layout export, not from eyeballing: the bar is
   a full-bleed flex row padded 5px 5vw 5px 20%, holding equal columns. */
.topbar__inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	/* columnGap is 0% in the export; the columns do the spacing. */
	gap: 0;
	min-height: var(--topbar-h);
	padding: 5px 5vw 5px 20%;
}
.topbar__inner > * { flex: 1 1 0; display: flex; justify-content: center; }
@media (max-width: 61.99em) {
	/* The 20% indent exists to clear the overhanging logo tile, which is not
	   present once the header collapses. */
	.topbar__inner {
		flex-wrap: wrap;
		justify-content: center;
		padding: 5px var(--space-md);
	}
	.topbar__inner > * { flex: 0 0 auto; }
}
.topbar a { color: var(--white); text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--white); text-decoration: underline; }
.topbar__item { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.topbar__item svg { width: 1em; height: 1em; flex: none; }
@media (max-width: 47.99em) {
	.topbar__item--email { display: none; }
}

/* The export sets the header section sticky to the top on desktop and turns
   sticky off for tablet and phone. The utility bar and the nav travel together
   as one block, so the wrapper is what sticks — pinning only the nav would let
   the black bar scroll out from under it. */
@media (min-width: 62em) {
	.site-head {
		position: sticky;
		top: 0;
		z-index: 99;
	}
	/* Stuck state, from the same export: the logo tile shrinks and stops
	   overhanging so the bar keeps a tidy height while scrolling. */
	.site-head.is-stuck .site-brand img {
		width: 100px;
		margin-top: 0;
	}
	.site-head .site-brand img {
		transition: width .25s var(--ease), margin-top .25s var(--ease);
	}
}
@media (prefers-reduced-motion: reduce) {
	.site-head .site-brand img { transition: none; }
}

.site-header {
	position: relative;
	z-index: var(--z-header);
	background: var(--brand);
	color: var(--white);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	min-height: var(--header-h-mobile);
	padding-inline: var(--space-md);
}
@media (min-width: 62em) {
	/* The export defines this row as full width, padded 10% each side, exactly
	   80px tall, with a 25% logo column and a 75% menu column. That geometry is
	   what places the menu where live places it — a centred 1280px container
	   put it 130px off. */
	.site-header__inner {
		min-height: 0;
		height: 80px;
		padding-inline: 10%;
		gap: 0;
	}
}

.site-brand { display: block; flex: none; line-height: 0; }
.site-brand img {
	width: auto;
	height: 56px;
	/* The mark is a solid tile, so live casts a box-shadow rather than a
	   drop-shadow: 0 2px 18px rgba(0,0,0,.3), per the layout export. */
	box-shadow: 0 2px 18px 0 rgba(0, 0, 0, .3);
}
@media (min-width: 62em) {
	/* The logo tile overhangs the purple bar, as on the live site. The export
	   gives the image max-width 120px and margin-top -3px; the tile's overhang
	   comes from the image being taller than the 80px row. */
	.site-brand { flex: 0 0 25%; align-self: center; display: flex; align-items: center; }
	.site-brand img {
		width: 120px;
		height: auto;
		margin-block: 0;
		margin-top: -3px;
	}
}

/* Desktop navigation */
.site-nav { display: none; }
@media (min-width: 62em) {
	/* The export puts the menu in a 75% column beside the logo's 25%, with the
	   links centred inside it. */
	.site-nav { display: block; flex: 0 0 75%; }
}

.site-nav ul {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav li { position: relative; margin: 0; padding-inline: 11px; }
.site-nav a {
	display: flex;
	align-items: center;
	/* Tall target so the pointer never leaves the <li> reaching a submenu */
	padding-block: calc((var(--header-h) - 1.4em) / 2);
	color: var(--white);
	/* Open Sans 16px/600 uppercase, per the menu module in the export, which
	   also carries a custom rule spacing the links apart. Together with the
	   11px the list item adds each side, that reproduces live's item widths
	   exactly (a six-letter item measures 102px on both). */
	font-family: var(--font-body);
	font-size: 1rem;
	/* Tighter leading and a lighter weight than live's 600, as requested. */
	line-height: 14px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: uppercase;
	margin-right: clamp(10px, 1.5vw, 40px);
	text-decoration: none;
	white-space: nowrap;
}
.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a { color: rgba(255, 255, 255, .72); }

.site-nav .menu-item-has-children > a::after {
	content: '';
	width: .42em;
	height: .42em;
	margin-left: .5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-.15em) rotate(45deg);
	transition: transform var(--dur) var(--ease);
}
.site-nav li:hover > a::after,
.site-nav li:focus-within > a::after { transform: translateY(.05em) rotate(-135deg); }

/* Mega dropdown: a full-width purple panel of columns, matching the live site.
   The panel spans the header rather than the menu item, so the top-level <li>
   must be position:static and the panel resolves against .site-header. */
.site-nav > ul > li { position: static; }

.site-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 10;
	display: block;          /* must be explicit — the parent ul is flex */
	gap: 0;
	padding: var(--space-lg) var(--gutter) var(--space-xl);
	background: var(--brand);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
	transition-delay: .3s;   /* forgive a slipped pointer */

	/* Balanced columns. The live menu is a hand-built Divi grid; multi-column
	   reproduces the shape without hardcoding which item sits in which column,
	   so adding a service in wp-admin can't break the layout. */
	columns: 4;
	column-gap: var(--space-xl);
	column-rule: 1px solid rgba(255, 255, 255, .18);
	max-width: none;
}
@media (min-width: 62em) {
	/* Keep the columns aligned to the site container, not the viewport edge */
	.site-nav .sub-menu {
		padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
	}
}
.site-nav .sub-menu::before {
	/* Transparent bridge across the visual gap. Deliberately taller than the
	   6px offset and overlapping up into the parent <li>: a bridge sized
	   exactly to the gap leaves no tolerance, and sub-pixel rounding then
	   drops :hover mid-reach — the menu vanishes as the pointer travels. */
	content: '';
	position: absolute;
	inset-inline: 0;
	top: -14px;
	height: 14px;
}
.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;    /* open instantly */
}
.site-nav .sub-menu li {
	width: 100%;
	break-inside: avoid;     /* never split an item across two columns */
	margin: 0;
}
.site-nav .sub-menu a {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	padding: .55rem 0;
	color: var(--white);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	white-space: normal;
	line-height: 1.35;
}
/* Chevron marker, as on the live mega menu */
.site-nav .sub-menu a::before {
	content: '';
	flex: none;
	width: .42em;
	height: .42em;
	margin-top: .42em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	opacity: .9;
}
.site-nav .sub-menu a:hover { color: var(--white); text-decoration: underline; }

/* Mobile toggle */
.nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 9px;
	border: 0;
	background: transparent;
	cursor: pointer;
}
@media (min-width: 62em) { .nav-toggle { display: none; } }
.nav-toggle span {
	display: block;
	height: 2px;
	background: var(--white);
	border-radius: 2px;
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu panel */
.mobile-nav {
	display: none;
	background: var(--brand-dark);
	max-height: calc(100dvh - var(--header-h-mobile));
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.mobile-nav.is-open { display: block; }
@media (min-width: 62em) { .mobile-nav { display: none !important; } }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { margin: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.mobile-nav a {
	display: block;
	padding: var(--space-xs) 0;
	color: var(--white);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-decoration: none;
	text-transform: uppercase;
}
.mobile-nav .sub-menu {
	/* Submenus render expanded on mobile — reset the desktop hover styles */
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: none;
	min-width: 0;
	padding: 0 0 var(--space-2xs) var(--space-md);
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}
.mobile-nav .sub-menu a { text-transform: none; font-weight: 400; opacity: .85; padding-block: .4rem; }
.mobile-nav .sub-menu li { border-top: 0; }

/* ---------------------------------------------------------- 7. Site footer */

.site-footer { background: var(--footer-bg); color: rgba(255, 255, 255, .82); font-size: var(--fs-sm); }
.site-footer :where(h1, h2, h3, h4, h5, h6) { color: var(--white); }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.footer-main { padding-block: var(--space-2xl) var(--space-xl); }
.footer-grid {
	display: grid;
	gap: var(--space-xl);
	align-items: start;
}
@media (min-width: 48em) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62em) { .footer-grid { grid-template-columns: 200px 1fr 1.4fr; } }

.footer-logo img { width: 135px; height: auto; }

.footer-heading {
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--white);
	margin-bottom: var(--space-sm);
}
.footer-heading a { text-decoration: none; }

.footer-contact { display: grid; gap: var(--space-xs); align-content: start; }
.footer-contact strong { color: var(--white); }

.footer-about__title { font-size: var(--fs-h4); color: var(--white); }

.footer-locations {
	padding-block: var(--space-lg);
	border-top: 1px solid rgba(255, 255, 255, .16);
	text-align: center;
}
.footer-locations .footer-heading { margin-bottom: var(--space-2xs); }
.footer-locations p { font-size: var(--fs-lg); }
.footer-locations a { text-decoration: none; }
.footer-locations a:hover { text-decoration: underline; }
.footer-locations span { opacity: .5; margin-inline: .35em; }

.footer-accreditations {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-lg);
	padding-block: var(--space-lg);
	border-top: 1px solid rgba(255, 255, 255, .16);
}
/* Full colour, as on the live site — these are certification marks and
   greyscaling or inverting them misrepresents the badges. The extra selector
   depth is needed because .logo-strip (§8) is defined after this block and
   would otherwise win on equal specificity with its grayscale filter. */
.footer-accreditations img,
.footer-accreditations .logo-strip img {
	height: 80px;
	max-height: none;
	width: auto;
	filter: none;
	opacity: 1;
}
.footer-accreditations .logo-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-lg);
	width: 100%;
}
.footer-accreditations .logo-strip__item { min-height: 0; }

.footer-payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}
.footer-payments img { height: 40px; width: auto; }

.footer-credit { margin-top: var(--space-sm); }

.footer-social { display: flex; gap: var(--space-xs); justify-content: center; margin-top: var(--space-md); }
.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 50%;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer-social a:hover { background: var(--white); border-color: var(--white); color: var(--dark); }
.footer-social svg { width: 17px; height: 17px; }

.footer-bottom {
	padding-block: var(--space-md) var(--space-xl);
	border-top: 1px solid rgba(255, 255, 255, .16);
	text-align: center;
	font-size: var(--fs-xs);
	line-height: 1.8;
}
.footer-legal-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2xs) var(--space-sm);
	margin: var(--space-2xs) 0 0;
	padding: 0;
	list-style: none;
}
.footer-legal-nav li { margin: 0; }
.footer-legal-nav li + li::before { content: '|'; margin-right: var(--space-sm); opacity: .5; }

/* --------------------------------------------------------- 8. Components */

/* --- Hero slider ------------------------------------------------------- */
.hero {
	position: relative;
	background: var(--brand);
	color: var(--white);
	overflow: hidden;
}
/* All slides share one grid cell, so the track is always as tall as the slide
   currently shown. (Stacking them with position:absolute instead collapses
   the hero to zero height the moment slide 1 is not the visible one.) */
.hero__track {
	position: relative;
	display: grid;
	grid-template-areas: 'slide';
}
.hero__slide {
	grid-area: slide;
	display: grid;
	align-items: center;
	min-height: clamp(320px, 46vw, 560px);
	padding-block: var(--section-y);
	background-color: var(--brand);
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
}
.hero__slide[hidden] { display: none; }
.hero__inner { max-width: 40rem; }
.hero__title {
	font-size: var(--fs-hero);
	font-weight: 600;
	line-height: 1.1;
	color: var(--white);
	margin-bottom: var(--space-sm);
	max-width: 15em;
}
/* "Choose Wisely / Choose Witan" is the strapline, not body copy — it needs to
   carry under a 46px headline without competing with it. Clamped so it steps
   down on a phone rather than eating the slide. */
.hero__text {
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: var(--space-lg);
}
.hero__text p { margin-bottom: 0; }

.hero .container { position: relative; z-index: 1; }

.hero__dots {
	position: absolute;
	left: 50%;
	bottom: var(--space-md);
	transform: translateX(-50%);
	display: flex;
	gap: var(--space-2xs);
	z-index: 2;
}
.hero__dot {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: background var(--dur) var(--ease);
}
.hero__dot[aria-current='true'] { background: var(--white); }

.hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	display: none;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .18);
	color: var(--white);
	cursor: pointer;
}
@media (min-width: 48em) { .hero__arrow { display: flex; } }
.hero__arrow:hover { background: rgba(0, 0, 0, .35); }
.hero__arrow--prev { left: var(--space-sm); }
.hero__arrow--next { right: var(--space-sm); }
.hero__arrow svg { width: 20px; height: 20px; }

/* --- Page hero (inner pages) -------------------------------------------
   Matches the live service pages: a photographic hero the height of a
   half-viewport, H1 over it at 38px, no scrim and no breadcrumbs. */
.page-hero {
	background: var(--white);
	color: var(--white);
	display: grid;
	align-items: center;
	/* Client asked for 70vh. Live uses a fixed 540px, so this tracks the
	   viewport instead of matching that number exactly — floored so it never
	   collapses on a short window. */
	min-height: max(420px, 70vh);
	padding-block: 54px;
}
/* The hero uses the same 1080px row as the body. The max-width has to include
   the gutter padding: capping the BOX at 1080 left its content starting one
   gutter further in than every other element on the page, which read as a gap
   down the left of the hero text. */
.page-hero > .container { max-width: calc(var(--row) + (2 * var(--gutter))); }
.page-hero h1 {
	color: var(--white);
	font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.375rem); /* 28 → 38px */
	font-weight: 600;
	line-height: 1;            /* 38px at 38px */
	letter-spacing: 2px;
	margin-bottom: 0;
	padding-bottom: 10px;
	max-width: 22em;
}
.page-hero__lede { font-size: var(--fs-lg); max-width: 48rem; margin-top: var(--space-sm); }
.page-hero--image {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
}

/* --- Service page: two-column body ------------------------------------
   Every value below is measured from https://witansolicitors.co.uk/construction/
   and recorded in design-spec/service-2col/spec.md. Do not adjust by eye. */

.page-layout {
	display: grid;
	gap: var(--space-lg);
	align-items: start;
	max-width: var(--row);          /* 1080px, NOT the 1280px site container */
	margin-inline: auto;
	padding-block: 27px;
}
@media (min-width: 62em) {
	.page-layout {
		grid-template-columns: var(--row-main) var(--row-aside);
		column-gap: var(--row-gap);
	}
}

/* Inner-page typography: Montserrat throughout, light body, small headings. */
.page-main,
.page-aside {
	font-family: var(--font-heading);
	font-size: var(--fs-body);
	font-weight: var(--fw-body);
	line-height: var(--lh-body-tight);
	color: var(--ink-body);
	/* Both columns are grid containers, and a grid track defaults to at least
	   its content's max-content width. A long sidebar link like "Commercial
	   Property Disputes" therefore pushed the aside to 446px inside its 338px
	   column and it spilled past the right gutter — which is why the gutter
	   looked different from one service page to the next depending on how long
	   its longest link happened to be. minmax(0, …) lets the track shrink. */
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
}
.page-main > *,
.page-aside > * { min-width: 0; }
.page-main p { margin-bottom: var(--space-sm); }
.page-main h2 {
	font-size: var(--fs-page-h2);
	line-height: 1;
	font-weight: 600;
	color: var(--purple-heading);
	margin: 0 0 10px;
	padding: 0;
	border: 0;
}
.page-main h3 {
	font-size: var(--fs-page-h3);
	line-height: var(--lh-body-tight);
	font-weight: 600;
	color: var(--purple-body);
	margin: 0 0 10px;
}
.page-main ul,
.page-main ol { padding-left: 1.15em; margin-bottom: var(--space-sm); }
.page-main li {
	line-height: var(--lh-list);
	font-weight: var(--fw-body);
	color: var(--ink-body);
	margin: 0;
}
/* Links are 600 throughout the content: bold enough to stand out in
   300-weight body copy, and the same weight as the headings and the contact
   panel they sit inside, so nothing looks lighter than its surroundings. */
.page-main a { color: var(--purple-body); font-weight: 600; text-decoration: none; }
.page-main a:hover { text-decoration: underline; }

/* Opening paragraph is a purple 600 lead-in. */
.page-main .lead-in { font-weight: 600; color: var(--purple-body); }
.page-main li a { line-height: var(--lh-list); }

/* Section divider: 3px solid rule with 50px clearance either side, which
   preserves the 103px block rhythm measured on live. */
/* Qualified with the tag (0,1,1) so it beats .wp-block-separator (0,1,0),
   which sits later in this file and reset these to a 1px grey line the moment
   the spacers became core separator blocks. */
hr.page-spacer,
.page-spacer {
	height: 0;
	border: 0;
	border-top: 3px solid var(--purple-body);
	margin-block: 50px;
	opacity: 1;
}

/* --- Home service cards ------------------------------------------------
   Measured from live's homepage at 1440px: the row is 1080px wide holding
   three 338px columns, so the gutter is 32.4px — 3% of the row, the same
   proportion the inner-page layout uses. Each card is a hard-edged grey
   square, never rounded.
   ---------------------------------------------------------------------- */
.card-grid {
	max-width: var(--row);
	margin-inline: auto;
	gap: 3%;
}
.icon-card {
	background: var(--surface);
	border-radius: 0;
	min-height: 342px;
	padding: 30px 16px 26px;
	text-align: center;
}
/* Qualified with the tag on purpose: the blanket .wp-block-image margin rule
   sits later in this file at the same specificity and would win, dropping the
   gap to 24px and pulling the title and button 6px above where live puts them. */
figure.icon-card__icon {
	width: 139px;
	margin: 0 auto 30px;
}
.icon-card .wp-block-buttons { margin-bottom: 0; }
.icon-card__icon img {
	width: 139px;
	height: 139px;
	object-fit: contain;
}
.icon-card__title {
	font-size: 21px;
	line-height: 21px;
	font-weight: 600;
	color: var(--purple-body);
	margin: 0 0 42px;
}
/* Live's card button is a good deal larger than the site's small button:
   21px type in a 44px pill-less box, measured on the homepage. */
.icon-card .btn {
	font-size: 21px;
	line-height: 1.7;
	padding: 2px 6px;
}
@media (max-width: 47.99em) {
	/* Below the three-up breakpoint the fixed square would leave a lot of
	   dead space under short titles. */
	.icon-card { min-height: 0; padding-block: 26px; }
	.icon-card__title { margin-bottom: 26px; }
}

/* On a phone the six squares were a 1,900px single-file stack, which read as
   six unrelated blocks rather than one set — and left the last one (Family)
   marooned directly above the dispute CTA. Two-up keeps the grid legible as a
   grid; the icon and type step down so a square still fits a 162px column. */
@media (max-width: 39.99em) {
	.card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.card-grid .icon-card { padding: 20px 10px 20px; }
	.card-grid figure.icon-card__icon { width: 84px; margin-bottom: 18px; }
	.card-grid .icon-card__icon img { width: 84px; height: 84px; }
	.card-grid .icon-card__title { font-size: 16px; line-height: 1.25; margin-bottom: 18px; }
	.card-grid .icon-card .btn { font-size: 15px; padding: 2px 10px; }
}

/* --- Flat logo strip ---------------------------------------------------
   Used by the footer accreditation row (scoped overrides live in §7). The
   base rules matter: without them the images fall back to their intrinsic
   size, which rendered a single full-width Daily Mail logo on the homepage.
   ---------------------------------------------------------------------- */
.logo-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-md) var(--space-lg);
}
.logo-strip__item { display: flex; align-items: center; justify-content: center; }
.logo-strip img { width: auto; max-width: 100%; height: auto; max-height: 52px; }

/* --- As Featured In carousel ------------------------------------------- */
.press-carousel__heading {
	font-size: var(--fs-page-h2);
	line-height: 1;
	font-weight: 600;
	color: var(--purple-heading);
	text-align: center;
	margin: 0 0 10px;
}
.press-carousel {
	position: relative;
	width: 638px;
	max-width: 100%;
	margin-bottom: 16px;
}
.press-carousel__viewport { overflow: hidden; }
.press-carousel__track { display: flex; transition: transform .4s var(--ease); }
.press-carousel__slide {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px 3%;
	min-height: 160px;
}
.press-carousel__slide img {
	width: 104px;
	height: auto;
	/* Square marks are capped so they don't tower over the wordmarks. */
	max-height: 72px;
	object-fit: contain;
}

/* The homepage runs the same carousel across the full row, where live sizes
   each logo to 203px with a 35px gutter — five of those make the 1155px slide.
   The 638px default above belongs to the narrower inner-page column. */
.press-carousel--wide { width: 1155px; }
.press-carousel--wide .press-carousel__slide {
	gap: 40px 35px;
	min-height: 120px;
}
.press-carousel--wide .press-carousel__slide img {
	width: 203px;
	max-height: 96px;
}
@media (max-width: 74.99em) {
	.press-carousel--wide { width: 100%; }
	.press-carousel--wide .press-carousel__slide img { width: 100%; max-width: 203px; }
}
.press-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 52px;
	color: rgb(102, 102, 102);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	cursor: pointer;
}
/* The prev arrow sits outside the row, in the left gutter, as on live. */
.press-carousel__arrow--prev { left: -48px; }
.press-carousel__arrow--next { right: -48px; }
.press-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: var(--space-sm);
}
.press-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(51, 51, 51);
	opacity: .3;
	cursor: pointer;
}
.press-carousel__dot[aria-current='true'] { opacity: 1; }

/* --- Purple "Contact Us" CTA box (end of main column) ------------------ */
.cta-box {
	background: var(--purple-body);
	color: var(--white);
	padding: 20px;
	margin: 40px 0;
	border-radius: 0;
}
.cta-box h2 { color: var(--white); font-size: var(--fs-page-h2); line-height: 1; margin-bottom: 10px; }
/* Live writes this copy as an h3 as often as a p, and .page-main h3 colours
   headings purple — which left purple text on the purple panel. Everything
   inside the panel is white, whatever element it lands in. */
.cta-box,
.cta-box h1,
.cta-box h2,
.cta-box h3,
.cta-box h4,
.cta-box h5,
.cta-box h6,
.cta-box p,
.cta-box li,
.cta-box strong,
.cta-box em { color: var(--white); }
.cta-box h3 { font-size: var(--fs-body); font-weight: 600; line-height: var(--lh-body-tight); margin: 0 0 10px; }
.cta-box p { font-weight: 600; }
.cta-box a { color: var(--white); text-decoration: underline; }

/* --- Related posts grid (bottom of main column) ------------------------ */
.related-posts { margin-top: var(--space-lg); }
.related-posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.related-posts .post-card__title {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.1;
	font-weight: 500;
	color: rgb(51, 51, 51);
}

/* --- Sidebar ------------------------------------------------------------ */
.page-aside {
	display: grid;
	gap: var(--space-lg);          /* space between sidebar sections */
	align-content: start;
}

/* Sub-service links: a contiguous purple stack with chevron icons. */
/* The panel closed flush against the last link, and a two-line item like
   "Commercial Property Disputes" made that read as clipped rather than tight. */
.link-stack { list-style: none; margin: 0; padding: 0 0 14px; }
.link-stack li { margin: 0; }
.link-stack a {
	display: flex;
	align-items: center;
	gap: 15px;
	min-height: 43px;
	background: var(--purple-nav);
	padding: 10px 15px 10px 0;
	color: var(--white);
	/* Montserrat, matching the inner-page headings these links sit beside —
	   Open Sans made the sidebar read as body copy rather than navigation. */
	font-family: var(--font-heading);
	font-size: 18px;
	line-height: 1;
	font-weight: 500;
	text-decoration: none;
}
.link-stack a::before {
	content: '';
	flex: none;
	width: 32px;
	height: 32px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px;
}
.link-stack a:hover { background: var(--purple-heading); color: var(--white); }

/* Fee-earner: image, beige bio panel, second image. */
/* The photo and the bio panel are one object — no white band between them.
   Qualified with the tag because the blanket .wp-block-image margin rule sits
   later in this file at equal specificity and would otherwise reintroduce the
   24px gap now that the profile is built from core blocks. */
.fee-earner { display: block; }
.fee-earner > *,
.fee-earner .wp-block-group__inner-container > * { margin-block: 0; }
figure.fee-earner__photo { margin: 0; }
/* Square corners: .wp-block-image img rounds every core image, which started
   applying to the profile the moment it became an Image block. */
.fee-earner__photo img,
figure.fee-earner__photo img { border-radius: 0; }
.fee-earner__photo { display: block; width: 100%; height: auto; }
.fee-earner__photo img { display: block; width: 100%; height: auto; }
.fee-earner__extra { display: block; width: 100%; height: auto; }
.fee-earner__bio {
	background: rgb(237, 238, 232);
	padding: 20px;
	color: var(--ink-body);
}
.fee-earner__bio h2,
.fee-earner__name {
	font-size: var(--fs-page-h2);
	line-height: 1;
	font-weight: 600;
	color: var(--purple-heading);
	margin-bottom: 10px;
}
.fee-earner__bio p { font-weight: var(--fw-body); line-height: var(--lh-body-tight); }

/* Testimonials: beige heading panel, then the slider. */
/* --- Reviews widget ----------------------------------------------------
   One continuous grey block: image, heading, review and dots. Previously the
   heading panel and the slider were separate boxes, which left a white band
   between them however their padding was tuned. The slide area is a fixed
   height so the container does not jump between short and long reviews, and
   the review is centred in it both ways.
   ---------------------------------------------------------------------- */
.testimonials {
	display: block;
	background: rgb(237, 238, 233);
	overflow: hidden;
}
.testimonials > * { margin: 0; }
.testimonials__image { display: block; width: 100%; height: auto; margin: 0; }
.testimonials__panel { background: transparent; padding: 22px 20px 0; margin: 0; }
.testimonials__heading {
	font-size: var(--fs-page-h2);
	line-height: 1;
	font-weight: 600;
	color: var(--purple-heading);
	text-align: center;
	margin: 0;
}
.testimonial-slider {
	position: relative;
	background: transparent;
	/* Generous breathing room above the quote and below the dots. */
	padding: 30px 24px 34px;
	margin: 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	/* One standard size, so the sidebar does not reflow as slides change. */
	min-height: 300px;
}
.testimonial-slider .testimonial {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;   /* vertical centring */
	margin: 0;
}
/* Must come after the display rule above, or the attribute stops working. */
.testimonial-slider .testimonial[hidden] { display: none; }

/* The site-wide blockquote style — purple left rule, lighter panel, radius,
   padding, italics — must not reach the reviews. The quote sits directly on
   the widget's own grey, with nothing drawn around it. (This reset was lost
   when the widget CSS was rewritten, which is how the panel reappeared.) */
.testimonial blockquote,
.testimonial-slider blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
	font-style: normal;
	color: inherit;
}

.testimonial-slider .press-carousel__dots {
	flex: none;
	margin-top: 22px;
}

/* Long reviews are clamped and opened by the toggle below them. */
.testimonial__quote {
	max-height: 150px;
	overflow: hidden;
	transition: max-height .25s var(--ease);
}
.testimonial__quote.is-expanded {
	max-height: 2000px;
	overflow: visible;
}
.testimonial__more {
	display: inline-block;
	width: 100%;
	margin: 12px 0 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: center;
	color: var(--purple-body);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
	.testimonial__quote { transition: none; }
}

.testimonial { margin: 0; }
.testimonial__title { font-size: 19px; font-weight: 600; color: var(--purple-body); margin-bottom: var(--space-2xs); }
.testimonial__quote { font-size: 15px; line-height: 1.587; font-weight: 400; color: rgb(102, 102, 102); }

/* --- Sidebar enquiry form (two-tone purple) ---------------------------- */
.side-form { background: var(--purple-heading); }
.side-form__band {
	background: var(--purple-band);
	padding: 20px 15px;
	color: var(--white);
	font-size: var(--fs-page-h2);
	line-height: 1.133;
	font-weight: 700;
	margin: 0;
}
.side-form__body { padding: 15px; }
.side-form .field { margin-bottom: var(--space-sm); }
.side-form label,
.side-form .field > label {
	display: block;
	color: var(--white);
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 2px;
}
.side-form input[type='text'],
.side-form input[type='email'],
.side-form input[type='tel'],
.side-form textarea {
	width: 100%;
	background: var(--white);
	border: 1px solid rgb(187, 187, 187);
	border-radius: 5px;
	padding: 16px;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 300;
	color: var(--ink-body);
	min-height: 53.5px;
}
.side-form textarea { min-height: 96px; }
.side-form__choices { display: grid; gap: var(--space-3xs); }
.side-form__choice {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	color: var(--white);
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 0;
}
.side-form__choice input { width: 13px; height: 13px; margin: 0; }
.side-form__consent label {
	font-size: 14px;
	line-height: 1.2;
	font-weight: 500;
}
.side-form .btn {
	background: transparent;
	border: 2px solid var(--white);
	border-radius: 15px;
	color: var(--white);
	font-size: 22px;
	font-weight: 500;
	padding: 13.2px 22px;
}
.side-form .btn:hover { background: var(--white); color: var(--purple-heading); }

/* --- Generic card ------------------------------------------------------ */
.card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	color: var(--ink);            /* explicit, so dark parents can't whiten it */
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	height: 100%;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card__media { aspect-ratio: 16 / 10; background: var(--surface); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-md); flex: 1; }
.card__title { font-size: var(--fs-h4); margin: 0; }
.card__title a { text-decoration: none; }
.card__meta { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.card__excerpt { font-size: var(--fs-sm); margin: 0; }
.card__footer { margin-top: auto; padding-top: var(--space-sm); }

/* Purple post card, as used on the homepage news row */
.card--brand {
	background: var(--brand);
	border-color: var(--brand);
	color: rgba(255, 255, 255, .9);
	text-align: center;
}
.card--brand .card__title,
.card--brand .card__title a { color: var(--white); }
.card--brand .card__meta { color: rgba(255, 255, 255, .75); }
.card--brand .card__body { align-items: center; }

/* --- Team card --------------------------------------------------------- */
.team-card { text-align: center; }
.team-card__photo {
	aspect-ratio: 1;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
	margin-bottom: var(--space-sm);
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__name { font-size: var(--fs-h4); margin-bottom: 0; }
.team-card__role { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--space-2xs); }

/* --- Office grid ------------------------------------------------------- */
/* The live "Say Hello" band: a 1/3 form beside a 2/3 block of three offices,
   each office separated by a vertical rule. */
.say-hello {
	display: grid;
	gap: var(--space-xl);
	align-items: start;
}
@media (min-width: 62em) {
	.say-hello { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

.office-grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: 1fr;
}
@media (min-width: 48em) {
	.office-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
	.office { padding-left: var(--space-md); border-left: 1px solid rgba(255, 255, 255, .55); }
}
.office__name {
	font-size: var(--fs-base);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	margin-bottom: var(--space-3xs);
}
.office address {
	font-style: normal;
	font-size: var(--fs-base);
	line-height: 1.75;
}

/* --- CTA band ---------------------------------------------------------- */
.cta-band {
	background: var(--brand);
	color: var(--white);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: auto 100%;
	padding-block: var(--section-y-tight);
	text-align: center;
}
.cta-band h2 { color: var(--white); margin-bottom: var(--space-2xs); }
.cta-band p { margin-bottom: var(--space-md); }
.cta-band__inner { max-width: 46rem; margin-inline: auto; }

/* --- Feature list (ticked bullets) ------------------------------------- */
.feature-list { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; gap: var(--space-2xs); }
.feature-list li { position: relative; padding-left: 1.9em; margin: 0; }
.feature-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .45em;
	width: .55em;
	height: .95em;
	border-right: 2px solid var(--brand);
	border-bottom: 2px solid var(--brand);
	transform: rotate(45deg);
}
.section--brand .feature-list li::before,
.section--dark  .feature-list li::before { border-color: var(--white); }

/* --- Stat row ---------------------------------------------------------- */
.stat { text-align: center; }
.stat__value { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 700; color: var(--brand); line-height: 1; }
.section--brand .stat__value, .section--dark .stat__value { color: var(--white); }
.stat__label { font-size: var(--fs-sm); }

/* --- Accordion / FAQ (core details block) ------------------------------ */
.faq { display: grid; gap: var(--space-2xs); }
/* Live's toggles: solid #543561, white 20px/600 title, 20px padding, square. */
.faq__item,
.wp-block-details {
	background: var(--purple-body);
	border: 0;
	border-radius: 0;
	padding: 20px;
	color: var(--white);
}
.faq__item p,
.wp-block-details p { color: var(--white); font-size: 16px; }
.faq__item a,
.wp-block-details a { color: var(--white); text-decoration: underline; }
.faq__item > summary,
.wp-block-details > summary {
	cursor: pointer;
	font-family: var(--font-heading);
	font-weight: 600;
	/* Smaller than live's 20px — these questions run long and the panels
	   dominated the page at that size. */
	font-size: 17px;
	color: var(--white);
	list-style: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-sm);
}
.faq__item > summary::-webkit-details-marker,
.wp-block-details > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after,
.wp-block-details > summary::after {
	content: '';
	flex: none;
	width: .5em;
	height: .5em;
	margin-top: .35em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--dur) var(--ease);
}
.faq__item[open] > summary::after,
.wp-block-details[open] > summary::after { transform: rotate(-135deg); }
.faq__item > :not(summary),
.wp-block-details > :not(summary) { padding-top: var(--space-sm); }

/* --- Prose (long-form page/post body) ---------------------------------- */
.prose > * + * { margin-top: var(--space-sm); }
.prose > h2 { margin-top: var(--space-xl); }
.prose > h3 { margin-top: var(--space-lg); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose img { border-radius: var(--radius); }
.prose a { font-weight: 600; }

/* --- Sidebar layout ---------------------------------------------------- */
.with-sidebar {
	display: grid;
	gap: var(--space-2xl);
	align-items: start;
}
@media (min-width: 62em) {
	.with-sidebar { grid-template-columns: minmax(0, 1fr) 320px; }
}
/* Beside a sidebar the content column is ~2/3 width, so a 3-up card grid gets
   cramped: drop it to 2-up there. */
@media (min-width: 62em) {
	.with-sidebar .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sidebar { display: grid; gap: var(--space-lg); }
.widget {
	background: var(--surface-alt);
	border-radius: var(--radius);
	padding: var(--space-md);
	color: var(--ink);
	font-size: var(--fs-sm);
}
.widget__title,
/* Block widgets render a core/heading rather than using before_title, so they
   need the same size or they tower over the content. */
.widget > .wp-block-heading,
.widget > h1, .widget > h2, .widget > h3 {
	font-size: var(--fs-h5);
	margin-bottom: var(--space-2xs);
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li + li { margin-top: var(--space-3xs); border-top: 1px solid var(--line); padding-top: var(--space-3xs); }
.widget a { text-decoration: none; }

/* --------------------------------------------------- 9. Blog & archives
   These match the live site's News section 1:1 — the purple hero, the
   newsletter band, the black filter bar, the purple post cards, and the
   two-column single post with its grey meta panel. */

/* --- News hero --------------------------------------------------------- */
.news-hero {
	position: relative;
	background: var(--brand) url('../img/blog-hero.jpg') no-repeat center / cover;
	color: var(--white);
	min-height: 360px;
	display: grid;
	align-items: center;
	padding-block: var(--section-y);
}
.news-hero h1 {
	font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.375rem); /* 28 → 38px */
	font-weight: 700;
	line-height: 1.25;
	color: var(--white);
	margin: 0;
	max-width: 12em;
}

/* --- Newsletter band (Constant Contact) --------------------------------- */
.newsletter-band {
	background: var(--brand);
	color: var(--white);
	padding-block: var(--section-y-tight);
	text-align: center;
}
.newsletter-band h2 {
	color: var(--white);
	font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
	margin-bottom: var(--space-3xs);
}
.newsletter-band__note { font-size: var(--fs-sm); opacity: .85; margin-bottom: var(--space-md); }
.newsletter-band form {
	display: grid;
	gap: var(--space-sm);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 62em) {
	.newsletter-band form { grid-template-columns: repeat(4, 1fr) auto; }
}
/* Attribute selectors so these beat the generic input rules in §10, which are
   defined later in the file and would otherwise win on equal specificity. */
.newsletter-band input[type],
.newsletter-band input {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .85);
	border-radius: var(--radius-btn);
	color: var(--white);
	padding: .6em 1em;
	width: 100%;
}
.newsletter-band input::placeholder { color: rgba(255, 255, 255, .8); }
.newsletter-band input[type]:focus { border-color: var(--white); box-shadow: none; }

/* --- Filter bar -------------------------------------------------------- */
.filter-bar {
	background: var(--black);
	padding-block: var(--space-sm);
}
.filter-bar form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2xs);
}
.filter-bar form select,
.filter-bar form input[type='search'] {
	width: auto;                      /* beat the 100%-width form defaults */
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	padding: .45em .7em;
	font-size: var(--fs-sm);
	min-height: 38px;
}
.filter-bar form select { min-width: 16rem; max-width: 100%; }
.filter-bar form input[type='search'] { width: 12rem; max-width: 100%; }
.filter-bar .btn { padding: .45em 1.2em; font-size: var(--fs-sm); background: var(--white); color: var(--ink); border-color: var(--white); }
.filter-bar .btn:hover { background: var(--surface); color: var(--brand); }
.filter-bar .btn--clear { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .6); }
.filter-bar .btn--clear:hover { background: var(--white); color: var(--ink); }

/* --- Post cards (the live purple card) --------------------------------- */
.post-card {
	display: flex;
	flex-direction: column;
	background: var(--brand);
	color: var(--white);
	border-radius: 0;                 /* square, as on the live site */
	overflow: hidden;
	height: 100%;
	padding-bottom: var(--space-md);
	text-align: center;
}
.post-card__media {
	aspect-ratio: 16 / 10;
	background: var(--brand-dark);
	margin-bottom: var(--space-md);
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	padding-inline: var(--space-md);
	flex: 1;
}
.post-card__title {
	font-size: 1.3125rem;             /* 21px */
	font-weight: 700;
	line-height: 1.3;
	color: var(--white);
	margin: 0;
}
.post-card__title a { color: var(--white); text-decoration: none; }
.post-card__title a:hover { text-decoration: underline; }
.post-card__terms { font-size: var(--fs-base); color: var(--white); margin: 0; }
.post-card__terms a { color: var(--white); text-decoration: none; }
.post-card__terms a:hover { text-decoration: underline; }
.post-card__footer { margin-top: auto; padding-top: var(--space-sm); }

/* --- Single post ------------------------------------------------------- */
.post-banner {
	height: clamp(180px, 28vw, 360px);
	background: var(--surface) center / cover no-repeat;
}

.post-layout {
	display: grid;
	gap: var(--space-lg);
	align-items: start;
	/* The live article row is 1025px (321 panel + 32 gap + 672 copy), narrower
	   than the site container — it keeps the measure readable. */
	max-width: 1025px;
	margin-inline: auto;
}
@media (min-width: 62em) {
	.post-layout { grid-template-columns: 321px minmax(0, 1fr); }
}

.post-panel {
	background: var(--surface);
	padding: var(--space-lg) var(--space-md) var(--space-md);
	color: var(--ink);
}
.post-panel h1 {
	font-size: 1.75rem;               /* 28px */
	font-weight: 700;
	line-height: 1.4;
	color: var(--brand);
	margin-bottom: var(--space-md);
}
.post-panel__meta { font-size: 1.3125rem; line-height: 1.45; color: var(--brand); }
.post-panel__meta p { margin-bottom: var(--space-xs); }
.post-panel__meta a { color: inherit; text-decoration: none; }
.post-panel__meta a:hover { text-decoration: underline; }

/* Article body: purple H2s with a rule above, as on the live site */
.post-body { color: #1a1a1a; font-size: var(--fs-base); line-height: 1.49; }
.post-body > * + * { margin-top: var(--space-sm); }
.post-body h2 {
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); /* → 36px */
	color: var(--brand);
	border-top: 2px solid var(--brand);
	padding-top: var(--space-lg);
	margin-top: var(--space-lg);
}
.post-body h3 { font-size: var(--fs-h3); color: var(--brand); margin-top: var(--space-lg); }
.post-body h4 { font-size: var(--fs-h4); color: var(--brand); margin-top: var(--space-md); }
.post-body h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.post-body img { border-radius: var(--radius); }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body a { font-weight: 600; }

.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-sm);
	font-size: var(--fs-xs);
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: var(--space-md);
}
.post-meta a { color: inherit; }

.post-hero__media {
	margin-bottom: var(--space-lg);
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 21 / 9;
	background: var(--surface);
}
.post-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.post-tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-lg); }
.post-tags a {
	display: inline-block;
	padding: .3em .8em;
	background: var(--surface);
	border-radius: var(--radius-sm);
	font-size: var(--fs-xs);
	text-decoration: none;
	color: var(--ink);
}
.post-tags a:hover { background: var(--brand); color: var(--white); }

.post-nav {
	display: grid;
	gap: var(--space-md);
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--line);
}
@media (min-width: 48em) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav__link { text-decoration: none; }
.post-nav__label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.post-nav__title { font-family: var(--font-heading); font-weight: 600; color: var(--brand); }
.post-nav__item--next { text-align: right; }

.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2xs);
	margin-top: var(--space-2xl);
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: var(--space-2xs);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	color: var(--brand);
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--white);
}
.pagination .dots { border-color: transparent; }

/* Post filter bar (replaces Search & Filter Pro) */
.post-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: flex-end;
	padding: var(--space-md);
	background: var(--surface-alt);
	border-radius: var(--radius);
	margin-bottom: var(--space-xl);
}
.post-filter__field { display: grid; gap: var(--space-3xs); flex: 1 1 12rem; }
.post-filter label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--ink); }

/* ------------------------------------------------------------- 10. Forms */

.field { display: grid; gap: var(--space-3xs); margin-bottom: var(--space-sm); }
.field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.field .req { color: var(--error); }

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='number'],
input[type='search'],
input[type='date'],
select,
textarea {
	width: 100%;
	padding: .7em .9em;
	font: inherit;
	font-size: var(--fs-base);
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea { min-height: 8rem; resize: vertical; }
select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23543561' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .9em center;
	background-size: 12px;
	padding-right: 2.4em;
}
input:focus, select:focus, textarea:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(84, 53, 97, .15);
	outline: none;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

.field--consent { grid-template-columns: auto 1fr; align-items: start; gap: var(--space-2xs); }
.field--consent input { margin-top: .35em; }
.field--consent label { font-weight: 400; font-size: var(--fs-sm); }

/* Honeypot — hidden from people, visible to naive bots. Never display:none:
   some bots skip those; this is off-screen but focusable-blocked. */
.field--hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-note { font-size: var(--fs-xs); color: var(--muted); }

.form-message {
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius);
	margin-bottom: var(--space-md);
	font-size: var(--fs-sm);
}
.form-message--success { background: #e8f4ec; border: 1px solid var(--success); color: #14532d; }
.form-message--error   { background: #fdeceb; border: 1px solid var(--error);   color: #7f1d1d; }

.field-error { font-size: var(--fs-xs); color: var(--error); font-weight: 600; }
.has-error input, .has-error textarea, .has-error select { border-color: var(--error); }

/* The enquiry form sits on dark bands — keep its own labels readable */
.enquiry-form { max-width: 34rem; }

/* Compact variant for the homepage "Say Hello" band, where the form sits
   above the offices rather than beside them. */
.enquiry-form--compact { max-width: 30rem; }

/* The homepage form: placeholder-only fields, 5px radius, tall inputs and a
   ghost "Send Enquiry" button — matching the live band. */
.enquiry-form--home .field { margin-bottom: var(--space-sm); }
.enquiry-form--home input[type='text'],
.enquiry-form--home input[type='email'],
.enquiry-form--home textarea {
	border-radius: 5px;
	border: 0;
	min-height: 54px;
	padding: .8em 1em;
}
.enquiry-form--home textarea { min-height: 96px; }
.enquiry-form--home .field--consent label { font-size: var(--fs-sm); line-height: 1.45; }
.enquiry-form--home .field--consent em { opacity: .85; }
.enquiry-form--home .btn {
	background: transparent;
	border-color: var(--white);
	color: var(--white);
	font-size: 1.375rem;
	padding: .5em 1.4em;
	margin-top: var(--space-2xs);
}
.enquiry-form--home .btn:hover { background: var(--white); color: var(--brand); }
.enquiry-form--home .footer-heading {
	font-size: var(--fs-h4);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
}
.enquiry-form--compact .field { margin-bottom: var(--space-2xs); }
.enquiry-form--compact input[type='text'],
.enquiry-form--compact input[type='email'],
.enquiry-form--compact input[type='tel'],
.enquiry-form--compact textarea {
	padding: .45em .7em;
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
}
.enquiry-form--compact textarea { min-height: 5rem; }
.enquiry-form--compact > label,
.enquiry-form--compact .field > label { font-size: var(--fs-xs); }
.enquiry-form--compact .field--consent label { font-size: var(--fs-xs); line-height: 1.4; }
.enquiry-form--compact .btn { font-size: var(--fs-sm); padding: .5em 1.4em; }
.section--dark .enquiry-form > label,
.section--dark .enquiry-form .field > label { color: var(--white); }
.section--dark .form-note { color: rgba(255, 255, 255, .7); }

.search-form { display: flex; gap: var(--space-2xs); }
.search-form input { flex: 1; }

/* ------------------------------------- 11. Editor / block-markup plumbing */

/* Classic themes wrap every core/group's children in this div, which breaks
   any grid or flex parent. One rule fixes it everywhere. */
.wp-block-group__inner-container { display: contents; }

/* Core block defaults aligned to the design system */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.wp-block-buttons.is-content-justification-center { justify-content: center; }
.wp-block-button { margin: 0; }
.wp-block-image { margin: 0 0 var(--space-md); }
.wp-block-image img { border-radius: var(--radius); }
.wp-block-columns { display: grid; gap: var(--grid-gap); }
@media (min-width: 62em) { .wp-block-columns { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.wp-block-column { min-width: 0; }
.wp-block-separator { border: 0; border-top: 1px solid var(--line); margin-block: var(--space-xl); }
/* Section dividers in body copy are the brand rule, not a hairline. */
.page-main hr,
.page-main .wp-block-separator,
.entry-content hr.page-spacer {
	border: 0;
	border-top: 3px solid var(--purple-body);
	opacity: 1;
}
.wp-block-table { overflow-x: auto; }
.aligncenter { margin-inline: auto; text-align: center; }
.alignwide  { max-width: 1100px; margin-inline: auto; }
.alignfull  { width: 100%; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------- 12. Utilities */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.mx-auto     { margin-inline: auto; }
.mb-0        { margin-bottom: 0 !important; }
.mt-lg       { margin-top: var(--space-lg); }
.measure     { max-width: 42rem; }
.measure--center { max-width: 42rem; margin-inline: auto; }
.is-hidden   { display: none !important; }
.lead        { font-size: var(--fs-lg); }
.small       { font-size: var(--fs-sm); }
.text-brand  { color: var(--brand); }
.text-white  { color: var(--white); }
.bg-surface  { background: var(--surface); }
.rounded     { border-radius: var(--radius); }

/* Reveal-on-scroll: opt-in, and a no-JS/reduced-motion page shows everything */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .reveal.is-visible { 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;
	}
	.js .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- 13. Print */

@media print {
	.topbar, .site-header, .site-footer, .nav-toggle, .mobile-nav,
	.cta-band, .hero__dots, .hero__arrow, .post-nav, .pagination { display: none !important; }
	body { color: #000; font-size: 12pt; }
	a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 10pt; }
	.container { max-width: none; padding: 0; }
}

/* --- Live-matched details, measured on witansolicitors.co.uk ------------ */

/* The nav bar slims on scroll: live drops the purple row from 80px to 60px
   while the black utility bar stays 44px. The logo shrink is handled above. */
@media (min-width: 62em) {
	.site-head.is-stuck .site-header__inner { height: 60px; }
	.site-head .site-header__inner { transition: height .25s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
	.site-head .site-header__inner { transition: none; }
}

/* Hero call to action — black fill, white text, 10px corners, per live. */
.hero-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 18px;
	padding: 6px 20px;
	min-height: 50px;
	background: var(--black);
	border: 2px solid var(--black);
	border-radius: 10px;
	color: var(--white);
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.7;
	text-decoration: none;
}
.hero-cta:hover,
.hero-cta:focus {
	background: transparent;
	color: var(--white);
	border-color: var(--white);
}

/* Blog cards: white outlined pill on the purple card, uppercase 21px/600. */
/* Qualified with .post-card: a link rule later in the file colours anchors in
   the main column purple and would otherwise win on source order. */
.post-card .btn,
.related-posts .btn,
.post-card .post-card__more,
.post-card__more {
	display: inline-block;
	background: transparent;
	border: 2px solid var(--white);
	border-radius: 15px;
	color: var(--white);
	padding: 6px 14px;
	/* Smaller than live's 21px: these cards are narrow, and at 21px the label
	   wrapped onto two lines. */
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.post-card .btn:hover,
.related-posts .btn:hover,
.post-card .post-card__more:hover,
.post-card__more:hover {
	background: var(--white);
	color: var(--purple-body);
}

/* The reviews widget is one object: the image, its title and the slide sit
   flush. Live measures a 0px gap between them; ours was showing white bands
   between the three parts. */
.testimonial-slider,
.testimonials {
	margin-top: 0;
}
.testimonial-slider > * + *,
.testimonials > * + * {
	margin-top: 0;
}
.testimonial-slider img,
.testimonials img {
	display: block;
	margin-bottom: 0;
}
.testimonial-slider__title,
.testimonials__title {
	margin: 0;
	padding: 14px 20px 0;
}

/* Award badges and similar standalone marks: live shows these small (~119px),
   but the size lives in Divi's module settings rather than anywhere the markup
   exposes, so they are capped rather than left to fill the column at their
   natural 1406px. Revisit with the page layout export for exact widths. */
.page-main figure.wp-block-image:not(.is-resized) img[src*="Badge"],
.page-main figure.wp-block-image:not(.is-resized) img[src*="badge"],
.page-main figure.wp-block-image:not(.is-resized) img[src*="Winners"] {
	width: 150px;
	height: auto;
}

/* An empty review title (live has several) collapses to zero height, but its
   8px margin still escapes up through blockquote -> figure -> slider, which is
   where the stubborn gap above the quote on 25 pages came from. */
.testimonial__title:empty { display: none; margin: 0; }
.testimonial blockquote > :first-child { margin-top: 0; }

/* "Older Entries" under a related-posts row. */
.posts-row__more { margin-top: var(--space-md); }
.posts-row__more a {
	color: var(--purple-body);
	font-family: var(--font-heading);
	font-size: var(--fs-body);
	font-weight: 500;
	text-decoration: none;
}
.posts-row__more a:hover { text-decoration: underline; }

/* Sidebar explainer video — full width of the column, 16:9, no gap below. */
.page-aside .sidebar-video { margin: 0 0 var(--space-md); }
.page-aside .sidebar-video .wp-block-embed__wrapper { position: relative; }
.page-aside .sidebar-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* --- Sidebar blog widget ------------------------------------------------
   Live shows one post in a dark card: image, white title, category line and
   an excerpt, with no button. 147 pages carry it.
   ---------------------------------------------------------------------- */
.post-card--dark {
	background: #1e1e1e;
	color: var(--white);
	display: flex;
	flex-direction: column;
}
.post-card--dark .post-card__media { display: block; margin: 0; }
.post-card--dark .post-card__media img { width: 100%; height: auto; border-radius: 0; display: block; }
.post-card--dark .post-card__body { padding: 22px 20px 26px; }
.post-card--dark .post-card__title {
	font-size: 21px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--white);
	margin: 0 0 10px;
}
.post-card--dark .post-card__title a { color: var(--white); text-decoration: none; }
.post-card--dark .post-card__title a:hover { text-decoration: underline; }
.post-card--dark .post-card__terms {
	font-size: 17px;
	font-weight: 600;
	color: var(--white);
	margin: 0 0 12px;
}
.post-card--dark .post-card__terms a { color: var(--white); text-decoration: none; }
.post-card--dark .post-card__excerpt {
	font-size: 17px;
	line-height: 1.5;
	font-weight: 300;
	color: var(--white);
	margin: 0;
}
.sidebar-posts { margin-bottom: var(--space-md); }

/* The sidebar blog card reads left-aligned, like live. */
.post-card--dark,
.post-card--dark .post-card__title,
.post-card--dark .post-card__terms,
.post-card--dark .post-card__excerpt { text-align: left; }

/* A contact panel supplies its own edge — no rules immediately around it.
   Note which element each selector hides: `.page-spacer + .cta-box` hides the
   PANEL, not the rule before it, which took the contact section off 77 pages.
   The preceding rule has to be selected with :has() instead. */
.cta-box + .page-spacer { display: none; }
.page-spacer:has(+ .cta-box) { display: none; }

/* Short index-style lists run two across, as live does. Long descriptive
   bullets stay full width — the extractor decides which is which by content. */
.list--2col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--space-lg);
}
@media (min-width: 34em) {
	.list--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.list--2col li { break-inside: avoid; }

/* Panel links sit at the same 600 as the panel's own copy. */
.cta-box a { font-weight: 600; }

/* Belt and braces: an empty paragraph in the sidebar would otherwise take a
   full grid row and two gaps. */
.page-aside > p:empty { display: none; }

/* Pages live builds without a sidebar — the case-study write-ups among them —
   run the full content row rather than sitting in the 709px column. */
@media (min-width: 62em) {
	.page-layout--full { grid-template-columns: minmax(0, 1fr); }
}

/* "The Legal Rationale" is set apart from the narrative on case-study pages. */
.rationale-box {
	border: 2px solid var(--purple-body);
	padding: 24px 26px;
	margin-block: var(--space-lg);
}
.rationale-box > :first-child { margin-top: 0; }
.rationale-box > :last-child { margin-bottom: 0; }
.rationale-box h2,
.rationale-box h3 { color: var(--purple-body); margin-top: 0; }

/* --- Core Button block inside page content -----------------------------
   .page-main a and .page-aside a set every link purple, and they sit later in
   this file than the button rules — so a Button block added in the editor came
   out with purple text on a purple fill and looked empty. Restate each button
   variant's own colour here, after those link rules, so buttons keep their
   intended appearance wherever they are placed.
   ---------------------------------------------------------------------- */
.page-main .wp-block-button__link,
.page-aside .wp-block-button__link {
	color: var(--white);
}
.page-main .is-style-outline .wp-block-button__link,
.page-aside .is-style-outline .wp-block-button__link {
	color: var(--brand);
}
.page-main .is-style-outline .wp-block-button__link:hover,
.page-aside .is-style-outline .wp-block-button__link:hover,
.page-main .is-style-ghost .wp-block-button__link,
.page-aside .is-style-ghost .wp-block-button__link {
	color: var(--white);
}

/* ==========================================================================
   Location pages
   The Birmingham pages use a layout of their own: the enquiry form sits in
   the hero beside the copy, and the body below is a stack of full-width and
   split sections rather than content-plus-sidebar.
   ========================================================================== */

.location-hero {
	position: relative;
	background: var(--brand);
	background-size: cover;
	background-position: center;
	padding-block: 72px;
	color: var(--white);
}
/* The photography runs light in places, so the copy needs a floor to sit on. */
.location-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(63, 39, 73, .92) 0%, rgba(63, 39, 73, .72) 60%, rgba(63, 39, 73, .55) 100%);
}
.location-hero > .container { position: relative; }

.location-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 48px;
	align-items: start;
}
.location-hero__copy h1 {
	color: var(--white);
	margin: 0 0 18px;
}
.location-hero__copy :where(p, li) { color: var(--white); }
.location-hero__copy a { color: var(--white); text-decoration: underline; }

/* Ticked credentials list — live marks these with an icon, not a bullet. */
.tick-list { list-style: none; margin: 18px 0 0; padding: 0; }
.tick-list li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 8px;
}
.tick-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .1em;
	width: 18px;
	height: 18px;
	background: no-repeat center/contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' d='M7.6 14.2 3.4 10l1.4-1.4 2.8 2.8 7-7L16 5.8z'/%3E%3C/svg%3E");
}
.location-body .tick-list li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23543561' d='M7.6 14.2 3.4 10l1.4-1.4 2.8 2.8 7-7L16 5.8z'/%3E%3C/svg%3E");
}

/* The hero form is the panel used elsewhere, dropped onto a dark ground. */
.location-hero__form .side-form { margin: 0; }

.press-strip--split {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 18fr);
	gap: 32px;
	align-items: center;
}
.press-strip--split .press-carousel__heading {
	text-align: left;
	margin: 0;
}

.location-body { max-width: var(--row); margin-inline: auto; }
.location-body > * { margin-block: 0 28px; }
.location-body > :last-child { margin-bottom: 0; }
.location-body h2 { margin-top: 48px; }
.location-body > :first-child { margin-top: 0; }

.location-body .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
	gap: 40px;
	align-items: start;
}
.location-body .wp-block-columns:has(> .wp-block-column:nth-child(3)) { --cols: 3; }
.location-body .wp-block-column > :first-child { margin-top: 0; }

.office-map { margin: 0; }
.office-map iframe {
	display: block;
	width: 100%;
	min-height: 320px;
	border: 0;
	border-radius: 12px;
}

.location-body .blurb { margin-bottom: 24px; }
.location-body .blurb h3, .location-body .blurb h4 { margin: 0 0 8px; }

@media (max-width: 980px) {
	.location-hero__grid,
	.press-strip--split { grid-template-columns: minmax(0, 1fr); }
	.location-body .wp-block-columns { grid-template-columns: minmax(0, 1fr); }
}

/* --- Location pages: corrections measured against live ------------------- */

/* Live sets the hero heading at 38px, the same as every other page. */
.location-hero h1 {
	font-size: 38px;
	line-height: 45.6px;
	font-weight: 700;
}

/* The press strip sits on the beige band, laid out as it is site-wide. */
.section--press { background: var(--surface); }
.section--press .press-carousel__heading { text-align: center; }

/* Ticks read as a white disc with the mark punched out in purple. */
.location-hero .tick-list li::before,
.location-body .tick-list li::before {
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23ffffff'/%3E%3Cpath fill='%23543561' d='M8.6 14.1 4.9 10.4l1.4-1.4 2.3 2.3 5-5 1.4 1.4z'/%3E%3C/svg%3E");
}

/* The hero form needs its own ground: purple labels on the purple hero were
   invisible. Live puts the panel on a pale lilac. */
.location-hero__form .enquiry-form,
.location-hero__form form {
	background: #eeebef;
	padding: 24px;
	border-radius: 12px;
}
.location-hero__form :where(label, .enquiry-form__label, legend) {
	color: var(--purple-body);
	font-size: 13px;
	font-weight: 600;
	display: block;
	margin-bottom: 6px;
}
.location-hero__form :where(input, textarea, select) {
	background: var(--white);
	border: 1px solid #d8d2db;
	border-radius: 5px;
	width: 100%;
	padding: 10px 12px;
}
.location-hero__form h2,
.location-hero__form .side-form__band {
	color: var(--purple-body);
	font-size: 18px;
	margin: 0 0 14px;
}

/* Accreditation badges: three across, beside the copy rather than below it. */
.accred-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: center;
}
.accred-row figure { margin: 0; }
.accred-row img {
	width: 100%;
	max-width: 151px;
	height: auto;
	margin-inline: auto;
	display: block;
}

/* Service accordions are beige with purple titles; only the FAQ is purple. */
.location-body .wp-block-details {
	background: var(--surface);
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 12px;
}
.location-body .wp-block-details summary {
	color: var(--purple-body);
	font-size: 18px;
	font-weight: 600;
}
.location-body .wp-block-details p { color: var(--ink); }

.location-body .faq .wp-block-details {
	background: var(--purple-body);
	border-radius: 8px;
}
.location-body .faq .wp-block-details summary { color: var(--white); font-size: 20px; }
.location-body .faq .wp-block-details :where(p, li, a) { color: var(--white); }

@media (max-width: 720px) {
	.accred-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The form's own label rule is more specific than the panel's, so restate it. */
.location-hero__form .enquiry-form label,
.location-hero__form form label,
.location-hero__form .enquiry-form__label {
	color: var(--purple-body);
}
/* Nothing in the body should print at its intrinsic size. */
.location-body img { max-width: 100%; height: auto; }
.location-body .wp-block-image img { max-width: 260px; }
.location-body .accred-row img { max-width: 151px; }

/* --- Location pages: gutters, rhythm and section treatments -------------- */

/* Live runs these pages on a wider row than the service pages (1297 vs 1080). */
.location-hero > .container,
.section--press > .container,
.location-body { max-width: 1297px; }

/* Live sets 54px on the section and 27px on the row: ~80px between bands. */
.location-body > * { margin-bottom: 40px; }
.location-body > h2,
.location-body > .wp-block-group > h2:first-child { margin-top: 80px; }
.location-body > :first-child { margin-top: 0; }
.location-body > .wp-block-columns,
.location-body > .wp-block-group { margin-block: 54px; }
.section--press { padding-block: 40px; }

/* Pair the shorter fields so the hero form sits clear of the review tab. */
.location-hero__form form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
}
.location-hero__form .field,
.location-hero__form .field--consent,
.location-hero__form button,
.location-hero__form .side-form__band { grid-column: 1 / -1; }
.location-hero__form .field:has(input[type="email"]),
.location-hero__form .field:has(input[type="tel"]) { grid-column: span 1; }

/* "Who this is for": heading centred, copy justified, as live sets it. */
.section-centred > h2,
.section-centred .wp-block-column > h2 { text-align: center; }
.section-centred p { text-align: justify; }

/* The review band sits on a pink wash rather than the usual grey. */
.location-body .testimonials,
.location-body .testimonial-slider { background: var(--brand-tint); }

/* The container caps at 1200 site-wide; these pages run wider, so the
   template's own wrapper has to lift the ceiling rather than fight it. */
.location .section > .container { max-width: 1297px; }

/* The review band runs full-bleed on its pink wash, as live sets it. */
.location-body .reviews-band {
	background: var(--brand-tint);
	padding: 54px clamp(20px, 4vw, 60px);
	border-radius: 12px;
}
.location-body .reviews-band > :first-child { margin-top: 0; }

/* --- Location pages: type scale, rhythm and controls, measured on live --- */

/* Live sets section headings at 26px; only the hero runs at 38px. */
.location-body h2 { font-size: 26px; line-height: 1.15; margin-bottom: 14px; }
.location-body h3 { font-size: 20px; line-height: 1.2; margin-bottom: 10px; }

/* Divi spaces these by module, so the copy itself carries no margins. Mine
   needs a little, but nothing like the 40px it had. */
.location-body p { margin: 0 0 14px; }
.location-body > * { margin-bottom: 20px; }
.location-body > h2 { margin-top: 54px; }
.location-body > .wp-block-columns,
.location-body > .wp-block-group { margin-block: 54px; }
.location-body ul { margin: 0 0 14px; }
.location-body .wp-block-column > :last-child { margin-bottom: 0; }

/* The press heading sits to the left of the logos here. */
.section--press > .press-strip--split { align-items: center; }
.section--press .press-strip--split .press-carousel__heading { text-align: left; }

/* Buttons: black with white text, as live sets them. */
.location-body .wp-block-button__link,
.location-hero__form button[type="submit"] {
	background: var(--black);
	color: var(--white);
	border: 0;
	border-radius: 10px;
	padding: 10px 24px;
	font-weight: 600;
}
.location-hero__form button[type="submit"] { border-radius: 15px; justify-self: end; }

/* The hero form carries no title on these pages and sits tighter. */
.location-hero__form .side-form__band,
.location-hero__form form > h2,
.location-hero__form form > h3 { display: none; }
.location-hero__form form { padding: 18px; gap: 8px 14px; }
.location-hero__form .field { margin: 0; }
.location-hero__form label { font-size: 12px; margin-bottom: 3px; }
.location-hero__form :where(input, textarea, select) { padding: 8px 10px; }
.location-hero__form textarea { min-height: 96px; }

/* Required markers are red on live, not purple. */
.location-hero__form .required,
.location-hero__form label .req,
.location-hero__form abbr[title="required"] { color: #d40000; }

/* The centred band: every heading inside it, however deeply nested. */
.section-centred h2 { text-align: center; }

/* --- Location hero form: ported from live's .new-form rules --------------- */

/* On live the form wrapper is transparent; the pale panel and its very tight
   padding come from the module around it. Reproducing that here rather than
   padding the form itself is what removes the bulk. */
.location-hero__form .enquiry-form,
.location-hero__form form {
	background: #eeebef;
	padding: 5px 10px;
	border-radius: 5px;
	max-width: 520px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 10px;
	row-gap: 12px;
}

.location-hero__form .field { grid-column: 1 / -1; margin: 0; }
.location-hero__form .field:has(input[type="email"]),
.location-hero__form .field:has(input[type="tel"]) { grid-column: span 1; }

.location-hero__form label {
	color: var(--purple-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.25;
	margin-bottom: 4px;
	display: block;
}

.location-hero__form :where(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	width: 100%;
	background: var(--white);
	border: 1px solid #c9c3d0;
	border-radius: 3px;
	color: #1a1a1a;
	font-size: 14px;
	padding: 12px;
	box-sizing: border-box;
}
.location-hero__form :where(input, textarea)::placeholder { color: #8a7a96; opacity: 1; }
.location-hero__form :where(input, select, textarea):focus {
	border-color: var(--purple-body);
	box-shadow: 0 0 0 2px rgba(84, 53, 97, .16);
	outline: none;
}
.location-hero__form textarea { min-height: 88px; resize: vertical; line-height: 1.45; }

/* The two markers are different reds on live, and "optional" is italic. */
.location-hero__form .required,
.location-hero__form .req { color: #d40000; }
.location-hero__form .optional {
	color: #c0392b;
	font-style: italic;
	font-size: 13px;
	font-weight: 400;
	margin-left: 4px;
}

/* Contact preference and consent sit on one line each. */
.location-hero__form .side-form__choices,
.location-hero__form .field--consent > * {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.location-hero__form :where(input[type="radio"], input[type="checkbox"]) {
	accent-color: var(--purple-body);
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}
.location-hero__form .side-form__choice,
.location-hero__form .field--consent label {
	color: #1f1128;
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 7px;
}
/* The question above the radios is capped so it does not run the full width. */
.location-hero__form .field:has(input[type="radio"]) > label { max-width: 220px; font-weight: 700; font-size: 0.7rem; }

.location-hero__form button[type="submit"] {
	justify-self: end;
	grid-column: 1 / -1;
	background: var(--black);
	color: var(--white);
	border: 0;
	border-radius: 10px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	padding: 10px 20px;
	width: auto;
	margin-top: 6px;
}
.location-hero__form button[type="submit"]:hover { background: var(--purple-body); }

@media (max-width: 600px) {
	.location-hero__form form { grid-template-columns: 1fr; }
	.location-hero__form .field:has(input[type="email"]),
	.location-hero__form .field:has(input[type="tel"]) { grid-column: 1 / -1; }
	.location-hero__form button[type="submit"] { width: 100%; }
}

/* The panel is the wrapper; the form inside it is the grid. Styling both made
   the form a column of its own grid and squeezed it to half width. */
.location-hero__form .enquiry-form {
	display: block;
	background: #eeebef;
	padding: 5px 10px;
	border-radius: 5px;
	max-width: 520px;
}
.location-hero__form .enquiry-form form {
	background: transparent;
	padding: 0;
	border-radius: 0;
	max-width: none;
}

/* Restated at matching specificity: the site-wide 12px radius wins otherwise. */
.location-hero__form .enquiry-form :where(input[type="text"], input[type="email"], input[type="tel"], select, textarea),
.location-hero__form form :where(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	border: 1px solid #c9c3d0;
	border-radius: 3px;
	padding: 12px;
	font-size: 14px;
	color: #1a1a1a;
}

/* :where() contributes no specificity, so those input rules lost to the
   site-wide 12px radius. Listed plainly here so they actually apply. */
.location-hero__form input[type="text"],
.location-hero__form input[type="email"],
.location-hero__form input[type="tel"],
.location-hero__form select,
.location-hero__form textarea {
	border: 1px solid #c9c3d0;
	border-radius: 3px;
	padding: 12px;
	font-size: 14px;
	color: #1a1a1a;
	width: 100%;
}
/* The form is a grid but was not filling the panel around it. */
.location-hero__form .enquiry-form form,
.location-hero__form form { width: 100%; }

/* --- Location pages: press logos, review band, fee-earner card ------------ */

/* The split strip gives the carousel less room than the full-width one, so the
   logos have to come down or they run into each other. */
.press-strip--split .press-carousel { width: 100%; }
.press-strip--split .press-carousel img {
	max-width: 130px;
	width: auto;
	height: auto;
	max-height: 46px;
	object-fit: contain;
}
.press-strip--split .press-carousel__track { gap: 32px; }

/* The review band runs edge to edge; its contents stay on the gutter.
   The negative margin pulls it out to the viewport, the matching padding
   puts the copy back where it was. */
.location-body .reviews-band {
	background: #eeebef;
	border-radius: 0;
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	padding-block: 54px;
}

/* Fee-earner card: photo flush to the top of a beige panel, name and role
   centred over the bio. */
.location-body .fee-earner {
	background: var(--surface);
	border-radius: 12px;
	overflow: hidden;
	padding: 0;
}
.location-body .fee-earner figure,
.location-body .fee-earner .wp-block-image { margin: 0; }
.location-body .fee-earner img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}
.location-body .fee-earner h3 {
	text-align: center;
	color: var(--purple-body);
	font-size: 24px;
	margin: 24px 20px 4px;
}
.location-body .fee-earner .fee-earner__role {
	text-align: center;
	color: var(--ink);
	margin: 0 20px 18px;
}
.location-body .fee-earner p:not(.fee-earner__role) {
	margin: 0 20px 18px;
}
.location-body .fee-earner > :last-child { margin-bottom: 24px; }

/* --- Location pages: office row and body type ---------------------------- */

/* Photo, address, map — equal thirds on the gutter, corners rounded, and the
   panel colour carried behind all three so the row reads as one card. */
.location-body .office-row {
	background: #eeebef;
	border-radius: 12px;
	overflow: hidden;
	padding: 0;
}
.location-body .office-row .wp-block-columns {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	align-items: stretch;
	margin: 0;
}
.location-body .office-row .wp-block-column { display: flex; flex-direction: column; }
.location-body .office-row .wp-block-column:nth-child(2) {
	justify-content: center;
	text-align: center;
	padding: 40px 32px;
}
.location-body .office-row figure { margin: 0; height: 100%; }
.location-body .office-row img {
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	display: block;
}
.location-body .office-row .office-map,
.location-body .office-row .office-map iframe {
	height: 100%;
	min-height: 100%;
	border-radius: 0;
}
.location-body .office-row h2 { margin-top: 0; }
.location-body .office-row .wp-block-buttons { justify-content: center; }

@media (max-width: 980px) {
	.location-body .office-row .wp-block-columns { grid-template-columns: minmax(0, 1fr); }
	.location-body .office-row .office-map iframe { min-height: 320px; }
}

/* Body type, as measured on live: Montserrat 16/22.4, weight 300, #191414. */
.location-hero,
.location-body {
	font-family: Montserrat, Helvetica, Arial, Lucida, sans-serif;
	font-size: 16px;
	line-height: 22.4px;
	font-weight: 300;
	color: #191414;
}
.location-body :where(p, li, td, th) {
	font-size: 16px;
	line-height: 22.4px;
	font-weight: 300;
	color: #191414;
}
.location-hero :where(p, li) { color: var(--white); font-weight: 300; }

/* --- Location pages: centred band, body ticks, accordion markers ---------- */

/* Both columns sit on the vertical centre, and the heading and button are
   centred within the left one. */
.location-body .section-centred > .wp-block-columns { align-items: center; }
.location-body .section-centred .wp-block-column:first-child { text-align: center; }
.location-body .section-centred .wp-block-buttons { justify-content: center; }
.location-body .section-centred h2 { text-align: center; }

/* Body ticks invert the hero's: purple disc, white mark. */
.location-body .tick-list li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23543561'/%3E%3Cpath fill='%23ffffff' d='M8.6 14.1 4.9 10.4l1.4-1.4 2.3 2.3 5-5 1.4 1.4z'/%3E%3C/svg%3E");
}

/* Service accordions open from a white square set beside the title. The FAQ
   accordions keep their own marker, so they are excluded below. */
.location-body .wp-block-details > summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
}
.location-body .wp-block-details > summary::-webkit-details-marker { display: none; }
.location-body .wp-block-details > summary::before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	background: var(--white);
	border-radius: 4px;
}
.location-body .faq .wp-block-details > summary::before { content: none; }
.location-body .faq .wp-block-details > summary { display: block; }

/* The columns block is not a direct child of the group, and the generic
   location rule sets align-items: start — restated to win on both counts. */
.location-body .section-centred .wp-block-columns { align-items: center; }

/* Centre the copy against the taller list beside it. Done on the column
   itself: the columns wrapper stretches its children by default and the
   align-items override was not reaching it. */
.location-body .section-centred .wp-block-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Live's row is 1297px flush. The shared container adds 40px each side, so the
   padding is dropped once there is room for it — below that the gutter stays,
   otherwise the copy would run to the screen edge. */
@media (min-width: 1380px) {
	.location .section > .container,
	.location .location-hero > .container { padding-inline: 0; }
}

/* Alignment live applies to particular bands rather than site-wide. */
.location-body .copy-centred :where(p, h2, h3) { text-align: center; }
.location-body .copy-centred .wp-block-buttons { justify-content: center; }
.location-body .copy-justified p { text-align: justify; }

/* --- Location pages: batch of layout corrections ------------------------- */

/* Hero form: consent sits beside the contact preference; the panel gains
   breathing room top and bottom while the fields themselves tighten. */
.location-hero__form .enquiry-form { padding: 22px 16px; }
.location-hero__form .field:has(input[type="radio"]),
.location-hero__form .field--consent { grid-column: span 1; }
.location-hero__form input[type="text"],
.location-hero__form input[type="email"],
.location-hero__form input[type="tel"],
.location-hero__form select { padding: 7px 12px; }
.location-hero__form textarea { padding: 8px 12px; min-height: 74px; }
.location-hero__form form { row-gap: 8px; }

/* Accordions: tighter containers, purple links, and no toggle arrow. */
.location-body .faq .wp-block-details { padding: 10px 20px; }
.location-body .faq .wp-block-details[open] { padding-bottom: 16px; }
.location-body .wp-block-details a { color: var(--purple-body); }
.location-body .faq .wp-block-details a { color: var(--white); }
.location-body .wp-block-details > summary::after,
.location-body .wp-block-details > summary::marker { content: none; display: none; }

/* Narrower bands where live sets the copy in from the page edge. */
.location-body .section-centred,
.location-body .copy-centred { max-width: 1080px; margin-inline: auto; }

/* The approach band: grey panel, rounded, photo alongside. */
.location-body .copy-justified {
	background: var(--surface);
	border-radius: 12px;
	padding: 40px;
	max-width: 1080px;
	margin-inline: auto;
}
.location-body .copy-justified .wp-block-columns { align-items: center; gap: 40px; }
.location-body .copy-justified img { max-width: 100%; width: 100%; border-radius: 12px; }

/* Reviews: tighter band, images matched to the text width beneath them. */
.location-body .reviews-band { padding-block: 36px; }
.location-body .reviews-band .wp-block-column img { width: 100%; max-width: 100%; }
.location-body .reviews-band .wp-block-column p { margin-top: 22px; }

/* Two-column bands centred on each other, set in from the page edge. */
.location-body .copy-centred .wp-block-columns { align-items: center; }
.location-body .copy-centred .wp-block-column { display: flex; flex-direction: column; justify-content: center; }

/* Fee-earner card: smaller, and level with the copy beside it. */
.location-body .fee-earner { max-width: 320px; align-self: center; }
.location-body .fee-earner h3 { font-size: 20px; margin-top: 18px; }

/* The office photo runs to the panel edge on its left only. */
.location-body .office-row .wp-block-column:first-child img { border-radius: 12px 0 0 12px; }

/* Closing call to action: centred, rounded, lighter weight. */
.location-body .cta-box {
	border-radius: 12px;
	text-align: center;
	font-weight: 300;
	padding: 44px 40px;
}
.location-body .cta-box :where(p, h2, h3) { text-align: center; font-weight: 300; }
.location-body .cta-box h2 { font-weight: 600; }
.location-body .cta-box .wp-block-buttons { justify-content: center; }
.location-body .cta-row .wp-block-columns { align-items: stretch; gap: 0; }
.location-body .cta-row img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px 0 0 12px; }

/* --- Location pages: cards, approach row, mid-page form, team ------------ */

/* Blog cards: rounded, tighter around the title, smaller type. */
.location-body .post-card { border-radius: 12px; overflow: hidden; }
.location-body .post-card__title { font-size: 19px; line-height: 1.25; margin: 14px 0 8px; }
.location-body .post-card__body { padding: 18px 20px 22px; }
.location-body .post-card__terms { font-size: 13px; margin: 0 0 14px; }
.location-body .post-card__more { font-size: 13px; }

/* The approach row matches the others in width; the photo fills its column
   edge to edge and the split is three-quarters copy to one-quarter image. */
.location-body .copy-justified { max-width: none; padding: 0; overflow: hidden; }
.location-body .copy-justified .wp-block-columns {
	grid-template-columns: 3fr 1fr;
	gap: 0;
	align-items: stretch;
}
.location-body .copy-justified .wp-block-column:first-child { padding: 40px; }
.location-body .copy-justified .wp-block-column:last-child { padding: 0; }
.location-body .copy-justified figure { margin: 0; height: 100%; }
.location-body .copy-justified img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

/* Mid-page purple form: shorter fields, consent beside the preference. */
.location-body .side-form form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 12px;
	row-gap: 8px;
}
.location-body .side-form .field { grid-column: 1 / -1; margin: 0; }
.location-body .side-form .field:has(input[type="radio"]),
.location-body .side-form .field--consent { grid-column: span 1; }
.location-body .side-form :where(input[type="text"], input[type="email"], input[type="tel"], select) { padding: 7px 12px; }
.location-body .side-form textarea { padding: 8px 12px; min-height: 74px; }
.location-body .side-form button[type="submit"] { grid-column: 1 / -1; justify-self: end; }

/* Team row: centred, a third to the profile, and the headshot square at the
   bottom where it meets the caption panel. */
.location-body .copy-centred .wp-block-columns { grid-template-columns: 1fr 2fr; }
.location-body .fee-earner img { border-radius: 12px 12px 0 0; }
.location-body .fee-earner { margin-inline: auto; }

/* Closing CTA: photo beside the panel, both on one rounded card. */
.location-body .cta-row { border-radius: 12px; overflow: hidden; }
.location-body .cta-row .wp-block-columns { grid-template-columns: 1fr 1fr; }
.location-body .cta-row figure { margin: 0; height: 100%; }
.location-body .cta-row img { border-radius: 0; }
.location-body .cta-row .cta-box { border-radius: 0; height: 100%; }
.location-body .cta-box .wp-block-button__link { background: var(--black); color: var(--white); }

/* --- Location pages: final spacing and column ratios --------------------- */

/* The photo fills its column with nothing left underneath it. */
.location-body .copy-justified .wp-block-column:last-child { display: flex; }
.location-body .copy-justified figure { flex: 1; display: flex; }
.location-body .copy-justified img { height: 100%; min-height: 100%; }

/* Two bands share the copy-centred class but split the opposite way: the copy
   leads where a form sits beside it, the profile leads on the team row. */
.location-body .copy-centred .wp-block-columns:has(form) { grid-template-columns: 2fr 1fr; }
.location-body .copy-centred .wp-block-columns:has(.fee-earner) { grid-template-columns: 1fr 2fr; }
.location-body .copy-centred .wp-block-columns { align-items: center; }

/* Closing CTA: two-thirds photograph, one-third panel. */
.location-body .cta-row .wp-block-columns { grid-template-columns: 2fr 1fr; }

/* Blog cards tighten again. */
.location-body .post-card__body { padding: 14px 16px 18px; }
.location-body .post-card__title { margin: 8px 0 6px; }
.location-body .post-card__terms { margin: 0 0 10px; }

/* FAQ accordions sit on 15px top and bottom. */
.location-body .faq .wp-block-details { padding: 15px 20px; }
.location-body .faq .wp-block-details[open] { padding-bottom: 15px; }

/* --- Location pages: hero wash, form marker, CTA card -------------------- */

/* A flat tint rather than a gradient across the hero. */
.location-hero--image::before { background: rgba(63, 39, 73, .78); }

/* The required marker is italic and light, matching the optional one. */
.location-hero__form .required,
.location-body .side-form .required {
	font-style: italic;
	font-weight: 400;
}

/* No stray space under the approach photo. */
.location-body .copy-justified .wp-block-column:last-child,
.location-body .copy-justified figure { display: flex; align-items: stretch; }
.location-body .copy-justified img { height: 100%; object-fit: cover; align-self: stretch; }

/* More air between the review images and the quote beneath them. */
.location-body .reviews-band .wp-block-column p { margin-top: 34px; }

/* The form band splits evenly. */
.location-body .copy-centred .wp-block-columns:has(form) { grid-template-columns: 1fr 1fr; }

/* Closing CTA: two rounded cards side by side, levelled on their centres, with
   the photograph shown whole rather than cropped to the panel's height. */
.location-body .cta-row { border-radius: 0; overflow: visible; }
.location-body .cta-row .wp-block-columns { gap: 40px; align-items: center; }
.location-body .cta-row figure { height: auto; }
.location-body .cta-row img {
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 12px;
}
.location-body .cta-row .cta-box { border-radius: 12px; height: auto; }

/* The 260px cap set for inline body images must not reach the CTA photo. */
.location-body .cta-row img,
.location-body .cta-row .wp-block-image img { max-width: 100%; width: 100%; }

/* --- Location pages: review spacing, CTA padding, hero overlay ----------- */

/* The gap belongs above the images, between them and the intro line — not
   under them where it was pushing the quotes down. */
.location-body .reviews-band .wp-block-columns { margin-top: 34px; }
.location-body .reviews-band .wp-block-column p { margin-top: 16px; }

/* The purple panel sits tighter top and bottom. */
.location-body .cta-box { padding-block: 26px; }

/* No overlay on the hero photograph. */
.location-hero--image::before { content: none; }

/* --- Location pages: approach image fill, CTA panel height --------------- */

/* The image column must stretch to the panel's full height, and every box
   between the column and the <img> has to pass that height down — a gap was
   left because the figure was sizing to the image rather than the column. */
.location-body .copy-justified .wp-block-columns { align-items: stretch; }
.location-body .copy-justified .wp-block-column:last-child {
	align-self: stretch;
	display: block;
	height: auto;
}
.location-body .copy-justified .wp-block-column:last-child figure,
.location-body .copy-justified .wp-block-column:last-child .wp-block-image {
	display: block;
	height: 100%;
	margin: 0;
	line-height: 0;
}
.location-body .copy-justified .wp-block-column:last-child img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* CTA: the two cards run to the same height, with the panel tighter at the
   top and its content centred in whatever height the row settles on. */
.location-body .cta-row .wp-block-columns { align-items: stretch; }
.location-body .cta-row .wp-block-column { display: flex; }
.location-body .cta-row figure { height: 100%; width: 100%; margin: 0; line-height: 0; }
.location-body .cta-row img { height: 100%; object-fit: cover; }
.location-body .cta-row .cta-box {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: 20px;
}

/* The columns block carried a bottom margin inside the panel, leaving grey
   under the photograph even though the image itself filled its column. */
.location-body .copy-justified > .wp-block-columns,
.location-body .copy-justified .wp-block-columns { margin: 0; }
.location-body .copy-justified .wp-block-column > :last-child { margin-bottom: 0; }

/* White copy sits on purple and on the hero photograph, where 300 reads thin.
   400 holds up against both without changing the ranged-left body text. */
.location-body .cta-box,
.location-body .cta-box :where(p, h3, li, a) { font-weight: 400; }
.location-hero :where(p, li) { font-weight: 400; }
.location-body .faq .wp-block-details :where(p, li, a) { font-weight: 400; }
.location-body .side-form :where(label, p, li) { font-weight: 400; }

/* --- Location pages: even 50px band on the white sections ---------------- */

/* The sections that sit straight on white get their own vertical rhythm.
   Those with a panel of their own — the grey approach band, the pink review
   band and the office card — already carry their padding and are left alone.
   The margin that used to separate them is dropped so the two do not stack. */
.location-body > .section-centred,
.location-body > .copy-centred,
.location-body > .faq,
.location-body > .cta-row {
	padding-block: 50px;
	margin-block: 0;
}

/* The two bands that carry no panel now sit in the same 50px rhythm, which
   also gives the 100px they need between them. */
.location-body > .section-band {
	padding-block: 50px;
	margin-block: 0;
}
.location-body > .section-band > :first-child { margin-top: 0; }
.location-body > .section-band > :last-child { margin-bottom: 0; }

/* A clear 100px between the grey approach band and the pink review band —
   set on one side only so the two margins cannot stack. */
.location-body > .copy-justified { margin-bottom: 0; }
.location-body > .reviews-band { margin-top: 100px; }

/* FAQ accordions sit on 20px top and bottom, matching the service ones. */
.location-body .faq .wp-block-details,
.location-body .faq .wp-block-details[open] { padding-block: 20px; }

/* --- Blog templates: match the site's gutter ----------------------------- */

/* The article row was pinned to live's 1025px measurement. Widened to the
   site container so the blog lines up with every other template. */
.post-layout { max-width: var(--container); }

/* --- Meet the Team: profile cards, three across -------------------------- */

.team-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 32px;
	align-items: start;
	margin-top: 40px;
}

/* The same card as the location pages: photo flush to the top of a beige
   panel, name and role centred over the biography. */
.team-grid .fee-earner {
	background: var(--surface);
	border-radius: 12px;
	overflow: hidden;
	padding: 0;
	max-width: none;
	margin: 0;
}
.team-grid .fee-earner figure,
.team-grid .fee-earner .wp-block-image { margin: 0; line-height: 0; }
.team-grid .fee-earner img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	border-radius: 12px 12px 0 0;
}
.team-grid .fee-earner :where(h3, h4) {
	text-align: center;
	color: var(--purple-body);
	font-size: 20px;
	margin: 22px 20px 4px;
}
.team-grid .fee-earner .lead-in {
	text-align: center;
	color: var(--ink);
	margin: 0 20px 16px;
}
.team-grid .fee-earner p { margin: 0 20px 16px; }
.team-grid .fee-earner > :last-child { margin-bottom: 24px; }

@media (max-width: 980px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .team-grid { grid-template-columns: minmax(0, 1fr); } }

/* Profile cards run to a common height, with the photographs cropped to one
   depth so the names line up across each row and the buttons sit on the floor
   of every card rather than wherever the biography happens to end. */
.team-grid { align-items: stretch; }
.team-grid .fee-earner {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.team-grid .fee-earner img {
	height: 300px;
	object-fit: cover;
	object-position: top center;
}
.team-grid .fee-earner .wp-block-buttons {
	margin-top: auto;
	padding: 8px 20px 24px;
	justify-content: center;
}
.team-grid .fee-earner .wp-block-button__link {
	background: var(--black);
	color: var(--white);
	border-radius: 10px;
	padding: 10px 24px;
	font-size: 14px;
	font-weight: 600;
}
.team-grid .fee-earner > :last-child { margin-bottom: 0; }

/* A deeper crop window, still anchored to the top of the frame, so more of
   each person shows below the head and shoulders. */
.team-grid .fee-earner img {
	height: 360px;
	object-position: center top;
}

/* The role sits centred under the name. */
.team-grid .fee-earner p.lead-in,
.team-grid .fee-earner .lead-in { text-align: center; }

/* Only one profile carries the lead-in class; on the rest the role is just the
   paragraph following the name, so target that position instead of the class. */
.team-grid .fee-earner :where(h3, h4) + p { text-align: center; }

/* A strapline under the hero heading. */
.page-hero__sub {
	color: var(--white);
	font-size: 26px;
	line-height: 1.2;
	font-weight: 400;
	margin: 10px 0 0;
}

/* ==========================================================================
   Fee-earner profiles
   Photograph and the short personal note in a panel on the left; the name,
   role and introduction read as one block on the right, with the biography
   sections below. Type measured against live.
   ========================================================================== */

.profile-layout {
	display: grid;
	grid-template-columns: 338px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	max-width: var(--row);
	margin-inline: auto;
}
.profile-layout--full { grid-template-columns: minmax(0, 1fr); }

/* The side panel: photograph flush to the top of the beige, note beneath. */
.profile-side {
	background: var(--surface);
	border-radius: 12px;
	overflow: hidden;
	padding: 0;
}
.profile-side figure,
.profile-side .wp-block-image { margin: 0; line-height: 0; }
.profile-side img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}
.profile-side h2 {
	text-align: center;
	font-size: 21px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--purple-body);
	margin: 24px 24px 10px;
	border: 0;
	padding: 0;
}
.profile-side p {
	margin: 0 24px 16px;
	font-size: 16px;
	line-height: 22.4px;
	font-weight: 300;
	color: #1a1a1a;
}
.profile-side > :last-child { margin-bottom: 24px; }

/* Name, role and introduction as one block. */
.profile-main > h1 {
	font-size: 36px;
	line-height: 36px;
	font-weight: 700;
	color: var(--purple-body);
	margin: 0 0 8px;
}
.profile-main .profile-role {
	font-size: 16px;
	line-height: 22.4px;
	font-weight: 400;
	color: var(--muted);
	margin: 0 0 16px;
}
.profile-main .profile-intro {
	font-size: 21px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--purple-body);
	margin: 0 0 34px;
}

/* A rule above each section, per the site-wide divider style. */
.profile-main h2 {
	font-size: 21px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--purple-body);
	border-top: 3px solid var(--purple-body);
	padding-top: 34px;
	margin: 34px 0 12px;
}
.profile-main h3 {
	font-size: 18px;
	font-weight: 600;
	color: var(--purple-body);
	margin: 26px 0 8px;
}
.profile-main h4 {
	font-size: 16px;
	font-weight: 600;
	color: var(--purple-body);
	margin: 18px 0 4px;
}
.profile-main p {
	font-size: 16px;
	line-height: 22.4px;
	font-weight: 300;
	color: #1a1a1a;
	margin: 0 0 14px;
}
.profile-main > :last-child { margin-bottom: 0; }

@media (max-width: 860px) {
	.profile-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.profile-side { max-width: 338px; margin-inline: auto; }
}

/* Live sets Montserrat across these pages, not the Open Sans body default. */
.profile-layout,
.profile-side,
.profile-main,
.profile-main :where(p, li, h1, h2, h3, h4),
.profile-side :where(p, h2) {
	font-family: var(--font-heading);
}

/* --- Header: mega menu and utility bar, measured against live ------------- */

/* Live runs the panel as four 25% columns with the link text inset by 5%,
   which is what reads as gutters. The multi-column approach here keeps that
   look while still tolerating a service being added in wp-admin — but the
   rule between columns is mine, not live's, so it goes. */
.site-nav .sub-menu {
	column-gap: 44px;
	column-rule: none;
	padding-block: 30px 30px;
}
.site-nav .sub-menu a {
	font-size: 14px;
	line-height: 26px;
	font-weight: 500;
	padding: 10px 5%;
}
/* The chevron sits on the cap height of a 26px line, not a 1.35 one. */
.site-nav .sub-menu a::before { margin-top: .78em; }

/* The utility bar runs larger on live — 17px — with heavier icons. */
.topbar { font-size: 17px; }
.topbar a { font-weight: 500; }
.topbar__item--phone a,
.topbar__item a[href^="tel:"] { font-weight: 700; }
.topbar .icon,
.topbar__item svg {
	width: 19px;
	height: 19px;
	stroke-width: 2.4;
}

/* --- Mega menu: separate column blocks with transparent gutters ----------- */

/* Live's columns are individual blocks — they end at different heights and the
   page shows through between them. A background on the panel fills those gaps,
   so it moves to the items: consecutive links in a column stack flush into one
   block, and the column gap stays transparent. */
.site-nav .sub-menu {
	background: transparent;
	box-shadow: none;
	padding-block: 0;
	column-gap: 24px;
	column-rule: none;
}
.site-nav .sub-menu li {
	background: var(--brand);
}
.site-nav .sub-menu a {
	font-size: 18px;
	line-height: 26px;
	font-weight: 500;
	padding: 12px 22px;
}
.site-nav .sub-menu a::before { margin-top: .58em; }

/* The gutters are transparent, which let hero text read through them. Live
   dims the area behind the panel so the page shows only as a wash. */
.site-nav .sub-menu {
	background: rgba(50, 30, 58, .55);
	backdrop-filter: blur(2px);
}

/* --- Mega menu: equal-height columns, full-screen wash, shadow ------------ */

/* The columns have to share one height, which per-item backgrounds cannot do —
   each block ends where its own list does. So the purple goes back on the
   panel and the gutters are cut out of the background instead: four stripes
   the width of a column, separated by transparent bands the width of the gap.
   Every stripe is then the full height of the panel. */
.site-nav .sub-menu {
	--mm-gap: 18px;
	--mm-col: calc((100% - 3 * var(--mm-gap)) / 4);
	column-gap: var(--mm-gap);
	background-color: transparent;
	background-image: repeating-linear-gradient(
		to right,
		var(--brand) 0,
		var(--brand) var(--mm-col),
		transparent var(--mm-col),
		transparent calc(var(--mm-col) + var(--mm-gap))
	);
	background-origin: content-box;
	background-clip: content-box;
	background-repeat: no-repeat;
	backdrop-filter: none;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
/* The stripes carry the colour now; items must not paint over the gutters. */
.site-nav .sub-menu li { background: transparent; }

/* The wash reaches the full screen rather than stopping at the panel. Sized
   from the panel's own top edge so the header above it stays undimmed. */
.site-nav .sub-menu::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 100vh;
	background: rgba(50, 30, 58, .55);
	z-index: -1;
	pointer-events: none;
}

/* --- Cato Solicitors: the two founders side by side ----------------------- */

.cato-pair {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: start;
	margin-top: 40px;
}
.cato-pair figure,
.cato-pair .wp-block-image { margin: 0 0 16px; }
.cato-pair img {
	width: 100%;
	max-width: none;
	height: auto;
	border-radius: 12px;
	display: block;
}
.cato-pair h2 {
	margin: 0;
	font-size: 22px;
	color: var(--purple-body);
}
@media (max-width: 720px) {
	.cato-pair { grid-template-columns: minmax(0, 1fr); }
}

/* --- Mega menu: shadow follows the columns, not the panel ----------------- */

/* A box-shadow on the panel draws one rectangle, so it ran the full width and
   put a hard edge under the transparent gutters. drop-shadow works off the
   alpha channel instead, so each purple stripe casts its own — which is the
   only thing that should lift off the page. */
.site-nav .sub-menu {
	box-shadow: none;
	filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .38));
}

/* The wash has to move off the panel: filter applies to a subtree, so a
   full-viewport child would merge into one silhouette and the per-column
   shadows would be lost. .site-header is already the panel's containing
   block, so top:100% lands exactly where the panel starts. */
.site-nav .sub-menu::after { content: none; }

.site-header:has(.site-nav li:hover > .sub-menu)::after,
.site-header:has(.site-nav li:focus-within > .sub-menu)::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 100vh;
	background: rgba(50, 30, 58, .55);
	z-index: 9;
	pointer-events: none;
}

/* --- Accordions: separate the items ------------------------------------- */

/* The items sat flush against each other, reading as one block. A gap makes
   each question its own target. Applies wherever accordions appear, not just
   on the location pages.  */
.wp-block-details + .wp-block-details,
.faq .wp-block-details + .wp-block-details { margin-top: 12px; }
.page-main .wp-block-details { margin-bottom: 12px; }
.page-main .wp-block-details:last-child { margin-bottom: 0; }

/* --- Location pages: numbered process cards ------------------------------ */

/* Live builds "How We Resolve Disputes" and "What to Expect When You Instruct
   Us" as grey cards, each headed by a purple disc carrying its step number.
   The number is a CSS counter rather than content, so reordering the steps in
   the editor renumbers them. Resetting on each h2 restarts the count per
   section — a counter's scope covers the element's following siblings, which
   is exactly where the cards sit. */
.location-body > h2,
.location-body > .wp-block-group > h2 { counter-reset: blurb-step 0; }

.location-body .blurb {
	counter-increment: blurb-step;
	background: var(--surface);
	border-radius: 16px;
	padding: 40px;
	height: 100%;
}
.location-body .wp-block-columns:has(.blurb) { align-items: stretch; }
.location-body .wp-block-columns:has(.blurb) > .wp-block-column { display: flex; }

.location-body .blurb :where(h3, h4) {
	display: flex;
	align-items: center;
	gap: 14px;
	color: #9a3bd3;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	margin: 0 0 16px;
	text-align: left;
}
.location-body .blurb :where(h3, h4)::before {
	content: counter(blurb-step);
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--purple-body);
	color: var(--white);
	font-size: 18px;
	line-height: 1;
	font-weight: 700;
}
.location-body .blurb p { margin: 0 0 12px; }
.location-body .blurb > :last-child { margin-bottom: 0; }

/* The closing panel carries a phone number in a blurb — not a step. */
.location-body .cta-box .blurb {
	counter-increment: none;
	background: none;
	padding: 0;
	border-radius: 0;
	height: auto;
}
.location-body .cta-box .blurb :where(h3, h4) {
	display: block;
	color: var(--white);
	font-size: 21px;
}
.location-body .cta-box .blurb :where(h3, h4)::before { content: none; }

/* --- Location pages: heading alignment and section rhythm ---------------- */

/* Live centres every section heading at 26px; only the FAQ heading is ranged
   left, and the approach band keeps its copy left too. */
.location-body h2 { text-align: center; }
.location-body .faq h2,
.location-body .copy-justified h2 { text-align: left; }

/* 50px above and below each section on the white ground. */
.location-body > h2 { margin-top: 50px; }
.location-body > .wp-block-columns:has(.blurb) { margin-bottom: 50px; }

/* --- Location pages: card rows, card alignment, counters, section rhythm -- */

/* A row of numbered cards is always equal halves. The 1fr 2fr split belongs to
   the team band, which shares the copy-centred class. */
.location-body .copy-centred .wp-block-columns:has(.blurb),
.location-body .wp-block-columns:has(.blurb) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Card copy stays ranged left even inside a band whose heading is centred. */
.location-body .blurb,
.location-body .blurb p,
.location-body .blurb :where(h3, h4) { text-align: left; }

/* Restart the count at every heading, however deeply the group nests it —
   scoping the reset to direct children missed the headings that sit inside a
   group's inner container, so the second section carried on from the first. */
.location-body h2 { counter-reset: blurb-step 0; }

/* Sections sit 100px apart, matching the padded bands on /family/birmingham/:
   there, one band's 50px bottom padding meets the next band's 50px top. Loose
   sections have no padding of their own, so the gap goes on the heading and
   the block above it gives up its margin. */
.location-body > h2 { margin-top: 100px; }
.location-body > *:has(+ h2) { margin-bottom: 0; }
.location-body > :where(.section-band, .section-centred, .copy-centred, .copy-justified,
                        .reviews-band, .office-row, .cta-row, .faq) + h2 { margin-top: 50px; }
.location-body > :first-child { margin-top: 0; }

/* The generic group margin (2 classes) outranked the `:has(+ h2)` reset, so a
   band before a heading kept its own 54px and the gap came out uneven. */
.location-body > .wp-block-group:has(+ h2),
.location-body > .wp-block-columns:has(+ h2) { margin-bottom: 0; }

/* --- Location pages: numbered-card bands ---------------------------------- */

/* The 1080px cap was added to narrow the form row on /family/birmingham/. A
   band of numbered cards runs the full row instead — live sets each card at
   636px inside a 1297px row. */
.location-body .copy-centred:has(.blurb),
.location-body .section-centred:has(.blurb) { max-width: none; }

/* Reset the counter on the section WRAPPER, not only on its heading. A reset
   on an h2 scopes to that element, its descendants and its following siblings
   — which does not reach cards the block editor nests in a group's inner
   container, so the second section carried on from the first (5, 6, 7, 8).
   Resetting on the wrapper covers all its descendants. */
.location-body .copy-centred,
.location-body .section-centred,
.location-body .section-band,
.location-body .copy-justified,
.location-body .reviews-band { counter-reset: blurb-step 0; }

/* ==========================================================================
   Blog article — type measured on live's /august-newsletter-2026/
   ========================================================================== */

.post-body,
.post-body :where(p, li, td, th, blockquote) {
	font-family: var(--font-heading);   /* Montserrat, as live */
	font-size: 16px;
	line-height: 23.8px;
	font-weight: 300;
	color: #1a1a1a;
}

/* Live sets no underline on body links. */
.post-body a,
.post-body a:hover,
.post-panel__meta a {
	text-decoration: none;
}
.post-body a:hover { text-decoration: underline; }

/* The panel's author, date and topic carry more weight than body copy. */
.post-panel__meta,
.post-panel__meta p,
.post-panel__meta a {
	font-weight: 600;
}

/* --- Location pages: closing CTA row ------------------------------------- */

/* Three-quarters photograph, one-quarter panel. */
.location-body .cta-row .wp-block-columns { grid-template-columns: 3fr 1fr; }

/* The panel's phone and opening hours sit centred. They were picking up the
   left alignment added for the numbered cards, which share the blurb class. */
.location-body .cta-box .blurb,
.location-body .cta-box .blurb p,
.location-body .cta-box .blurb :where(h3, h4) { text-align: center; }

/* --- Location pages: one rhythm for every section ------------------------ */

/* Sections were landing anywhere between 54px and 136px apart, because each
   band carried its own padding and margin. Content-to-content spacing is
   padBottom + margin + padTop, so normalising every band to 50px padding and
   no margin makes band-to-band exactly 100px. Margins collapse in this flow,
   so a band after ordinary copy takes 50px of margin and reaches 100px too. */
.location-body > :where(.section-band, .section-centred, .copy-centred, .copy-justified,
                        .reviews-band, .office-row, .cta-row, .faq) {
	padding-block: 50px;
	margin-block: 0;
}
.location-body > *:not(.section-band, .section-centred, .copy-centred, .copy-justified,
                       .reviews-band, .office-row, .cta-row, .faq)
+ :where(.section-band, .section-centred, .copy-centred, .copy-justified,
         .reviews-band, .office-row, .cta-row, .faq) {
	margin-top: 50px;
}

/* Two bands keep a look of their own; the shortfall goes on the margin so the
   100px still holds. The review band stays on its tighter 36px inset, and the
   office card runs edge to edge with no inset at all. */
.location-body > .reviews-band { padding-block: 36px; margin-block: 14px; }
.location-body > .office-row { padding-block: 0; margin-block: 50px; }

/* --- Location pages: a single, predictable section rhythm ----------------- */

/* Replaces the earlier attempt to normalise content-to-content spacing. Each
   band carries different internal padding — the office card none, the review
   band 36px, the approach band none because its photograph fills the panel —
   so equalising content gaps pulled the boxes to wildly different distances
   (54px to 136px). Measuring the empty space between section BOXES instead
   gives one number that holds whatever a band does inside itself. Margins
   collapse in this flow, so top-only margins never double up. */
.location-body > :where(.section-band, .section-centred, .copy-centred, .copy-justified,
                        .reviews-band, .office-row, .cta-row, .faq) {
	margin-top: 100px;
	margin-bottom: 0;
	padding-block: revert-layer;
}
/* Restore each band's own inset, which the rule above deliberately leaves be. */
.location-body > .section-band,
.location-body > .section-centred,
.location-body > .copy-centred,
.location-body > .cta-row,
.location-body > .faq { padding-block: 50px; }
.location-body > .reviews-band { padding-block: 36px; }
.location-body > .office-row,
.location-body > .copy-justified { padding-block: 0; }

/* A heading that follows a band gets the same 100px, not a half measure. */
.location-body > :where(.section-band, .section-centred, .copy-centred, .copy-justified,
                        .reviews-band, .office-row, .cta-row, .faq) + h2 { margin-top: 100px; }
.location-body > :first-child { margin-top: 0; }

/* --- Location pages: section rhythm, stated at real specificity ----------- */

/* The previous attempt used :where(), which contributes no specificity, so the
   per-band rules above it kept their own margins and the gaps stayed at 0-54px.
   Listed plainly here so they actually win. 100px of empty space between every
   section box; each band keeps whatever inset it needs inside that. */
.location-body > .section-band,
.location-body > .section-centred,
.location-body > .copy-centred,
.location-body > .copy-justified,
.location-body > .reviews-band,
.location-body > .office-row,
.location-body > .cta-row,
.location-body > .faq {
	margin-top: 100px;
	margin-bottom: 0;
}
.location-body > .section-band + h2,
.location-body > .section-centred + h2,
.location-body > .copy-centred + h2,
.location-body > .copy-justified + h2,
.location-body > .reviews-band + h2,
.location-body > .office-row + h2,
.location-body > .cta-row + h2,
.location-body > .faq + h2 { margin-top: 100px; }
.location-body > *:first-child { margin-top: 0; }

/* A button that closes a section sits centred, with room beneath it. */
.location-body > .wp-block-buttons {
	justify-content: center;
	margin-bottom: 50px;
}

/* --- Location pages: review band with a slider --------------------------- */

/* Where the band wraps the testimonial slider, two pinks stacked: the band's
   own and the slider's panel. The band keeps a background — grey, not pink —
   and the slider inside it goes transparent so only one tone shows. 7 of the
   20 pages are like this. The two family pages hold image cards with no inner
   panel, and keep the pink they were given. */
.location-body .reviews-band:has(.testimonials) { background: var(--surface); }
.location-body .reviews-band:has(.testimonials) .testimonials,
.location-body .reviews-band:has(.testimonials) .testimonial-slider { background: none; }

/* --- Location pages: team bands with more than one profile ---------------- */

/* The 1fr 2fr split belongs to /family/birmingham/, where the band holds one
   profile beside its copy. Several pages instead show three fee-earners side
   by side; with only two tracks defined the third fell back to auto and the
   row came out 250px / 500px / 250px. Equal tracks whenever the row holds
   more than one profile. */
.location-body .copy-centred .wp-block-columns:has(> .wp-block-column:nth-child(3)),
.location-body .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(.fee-earner) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
}
/* Two profiles side by side share the row equally. The test is a profile in
   the SECOND column — on /family/birmingham/ the band is one profile beside
   its copy, which keeps the 1fr 2fr split, and a plain "two columns" test
   flattened that to equal halves. */
.location-body .copy-centred .wp-block-columns:has(> .wp-block-column:nth-child(2) .fee-earner):not(:has(> .wp-block-column:nth-child(3))) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Cards in a multi-profile row fill their column and match each other. */
.location-body .wp-block-columns:has(> .wp-block-column:nth-child(2) .fee-earner) .wp-block-column { display: flex; }
.location-body .wp-block-columns:has(> .wp-block-column:nth-child(2) .fee-earner) .fee-earner {
	max-width: none;
	width: 100%;
	height: 100%;
}
/* One depth for every headshot, cropped rather than squashed. */
.location-body .wp-block-columns:has(> .wp-block-column:nth-child(2) .fee-earner) .fee-earner img {
	height: 300px;
	object-fit: cover;
	object-position: top center;
}

/* --- Location pages: three kinds of blurb card --------------------------- */

/* Only a genuine sequence is numbered. The grey card and purple disc move from
   every .blurb onto .steps .blurb — "Why Our Clients Choose Witan" and
   "Sectors We Advise" are lists of reasons and sectors, and were being
   numbered 1..n as though they were stages of a process. */
.location-body .blurb {
	counter-increment: none;
	background: none;
	border-radius: 0;
	padding: 0;
	height: auto;
}
.location-body .blurb :where(h3, h4) {
	display: block;
	color: var(--purple-body);
	font-size: 20px;
	line-height: 1.2;
	font-weight: 600;
	margin: 0 0 10px;
}
.location-body .blurb :where(h3, h4)::before { content: none; }

/* Steps keep the numbered grey card, measured on live. */
.location-body .steps .blurb {
	counter-increment: blurb-step;
	background: var(--surface);
	border-radius: 16px;
	padding: 40px;
	height: 100%;
}
.location-body .steps .blurb :where(h3, h4) {
	display: flex;
	align-items: center;
	gap: 14px;
	color: #9a3bd3;
	font-size: 24px;
	margin: 0 0 16px;
}
.location-body .steps .blurb :where(h3, h4)::before {
	content: counter(blurb-step);
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--purple-body);
	color: var(--white);
	font-size: 18px;
	line-height: 1;
	font-weight: 700;
}
.location-body .steps { counter-reset: blurb-step 0; }

/* Things the firm advises on: lilac card, smaller dark title, no number. */
.location-body .service-cards .blurb {
	background: #eeebef;
	border-radius: 15px;
	padding: 28px;
	height: 100%;
}
.location-body .service-cards .blurb :where(h3, h4) {
	color: var(--ink);
	font-size: 18px;
	font-weight: 600;
}

/* --- Sidebar review slider: quote only ----------------------------------- */

/* Two of the 23 reviews carry a headline ("Extremely happy", "Thank you"),
   which appeared above the quote as the slider advanced and read as a second
   heading under "What our customers say". The sidebar shows the image, the
   heading and the quote — nothing else. The empty <p> the other 21 slides
   carry went with it, so it no longer reserves a blank line either. */
.page-aside .testimonial__title { display: none; }

/* --- Location pages: section gap, as one number -------------------------- */

/* Change this to change every gap between sections on these pages. */
.location-body { --section-gap: 100px; }

/* .steps and .service-cards were added after the rhythm rule was written and
   never joined the list, so a step band sat 54px below its neighbour while
   every other section sat at 100px. Listed in full here — and stated as plain
   class selectors, because :where() carries no specificity and loses to the
   per-band rules above. */
.location-body > .section-band,
.location-body > .section-centred,
.location-body > .copy-centred,
.location-body > .copy-justified,
.location-body > .reviews-band,
.location-body > .office-row,
.location-body > .cta-row,
.location-body > .faq,
.location-body > .steps,
.location-body > .service-cards,
.location-body > .case-cards,
.location-body > h2 {
	margin-top: var(--section-gap);
	margin-bottom: 0;
}
.location-body > .section-band + h2,
.location-body > .section-centred + h2,
.location-body > .copy-centred + h2,
.location-body > .copy-justified + h2,
.location-body > .reviews-band + h2,
.location-body > .office-row + h2,
.location-body > .cta-row + h2,
.location-body > .faq + h2,
.location-body > .steps + h2,
.location-body > .service-cards + h2,
.location-body > .case-cards + h2 { margin-top: var(--section-gap); }
.location-body > *:first-child { margin-top: 0; }

/* --- Map height, as one number ------------------------------------------- */

/* Change this to change every embedded map. On the location pages the map is
   one of three columns in the office card, so it stretches to whatever the
   photograph and address need — this value is its floor, and the height it
   takes anywhere the row is not driving it. */
:root { --map-height: 360px; }

.office-map iframe { min-height: var(--map-height); }
.location-body .office-row .office-map,
.location-body .office-row .office-map iframe {
	height: 100%;
	min-height: var(--map-height);
}
@media (max-width: 980px) {
	.location-body .office-row .office-map iframe { height: var(--map-height); }
}

/* --- Location pages: "why choose us" blurbs ------------------------------- */

/* Live heads each of these with a rosette — FontAwesome's award glyph at 50px
   in the brand purple. Drawn as an inline SVG here: the theme carries no icon
   font, and pulling one in for six decorative marks is not worth the request.
   Centred, matching live. */
.location-body .blurb:not(.steps .blurb):not(.service-cards .blurb):not(.cta-box .blurb) {
	text-align: center;
}
.location-body .blurb:not(.steps .blurb):not(.service-cards .blurb):not(.cta-box .blurb) p,
.location-body .blurb:not(.steps .blurb):not(.service-cards .blurb):not(.cta-box .blurb) :where(h3, h4) {
	text-align: center;
}
.location-body .blurb:not(.steps .blurb):not(.service-cards .blurb):not(.cta-box .blurb)::before {
	content: "";
	display: block;
	width: 50px;
	height: 50px;
	margin: 0 auto 16px;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23543561'%3E%3Cpath d='M12 1.5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm0 2.2 1.5 3 3.3.5-2.4 2.3.6 3.3-3-1.6-3 1.6.6-3.3L7.2 7.2l3.3-.5z'/%3E%3Cpath d='M8.6 16.1 5.9 22.5l3.2-1.4 1.7 1.4 1.1-4.7a8.7 8.7 0 0 1-3.3-1.7zM15.4 16.1a8.7 8.7 0 0 1-3.3 1.7l1.1 4.7 1.7-1.4 3.2 1.4z'/%3E%3C/svg%3E");
}

/* --- Location pages: two-profile team rows ------------------------------- */

/* A pair of profiles was sharing the row 50/50, so each card came out 520px
   against 333px on a three-profile page and the headshots read quite
   differently. The pair now takes the width a third would, and centres. */
.location-body .wp-block-columns:has(> .wp-block-column:nth-child(2) .fee-earner):not(:has(> .wp-block-column:nth-child(3))) {
	grid-template-columns: repeat(2, calc((100% - 80px) / 3));
	justify-content: center;
}

/* The two-profile rule above lost to the earlier `.copy-centred` variant,
   which carries one more class. Same selector, stated with that class so it
   actually wins. */
.location-body .copy-centred .wp-block-columns:has(> .wp-block-column:nth-child(2) .fee-earner):not(:has(> .wp-block-column:nth-child(3))),
.location-body .wp-block-columns:has(> .wp-block-column:nth-child(2) .fee-earner):not(:has(> .wp-block-column:nth-child(3))) {
	grid-template-columns: repeat(2, calc((100% - 80px) / 3));
	justify-content: center;
}

/* --- Two-column pages: team rows and award rows -------------------------- */

/* Divi stacks a team section one profile under the next, so a 728px headshot
   filled the whole content column. The profiles now sit in a row inside that
   column, on the same card as the location pages: photograph flush to the top
   of a grey panel, name and role centred over the biography.
   Three to a row at 709px; a fourth profile wraps rather than shrinking the
   headshots below the point where a face still reads. */
/* Three fixed tracks rather than auto-fill: a section with a single profile
   would otherwise stretch that one card across the whole 709px column, and
   /regulatory/ has exactly one. Fixed tracks give every card a third whether
   the page shows one, three or six. */
.page-main .team-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}
.page-main .team-row .fee-earner {
	background: var(--surface);
	border-radius: var(--radius);
	overflow: hidden;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.page-main .team-row .fee-earner figure,
.page-main .team-row .fee-earner .wp-block-image { margin: 0; line-height: 0; }
.page-main .team-row .fee-earner img {
	display: block;
	width: 100%;
	max-width: none;
	/* Square, cropped: the headshots arrive at four different aspect ratios,
	   and a row of them set to `height: auto` steps up and down. */
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	border-radius: 0;
}
.page-main .team-row .fee-earner__name,
.page-main .team-row .fee-earner h3,
.page-main .team-row .fee-earner h4 {
	text-align: center;
	color: var(--purple-body);
	font-size: 18px;
	line-height: 1.2;
	margin: 18px 14px 4px;
}
.page-main .team-row .fee-earner__role {
	text-align: center;
	color: var(--ink);
	font-size: 14px;
	margin: 0 14px 14px;
}
.page-main .team-row .fee-earner p:not(.fee-earner__role) {
	font-size: 14px;
	line-height: 1.5;
	margin: 0 14px 14px;
}
.page-main .team-row .fee-earner > :last-child { margin-bottom: 18px; }

@media (max-width: 61.99em) {
	.page-main .team-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 32em) {
	.page-main .team-row { grid-template-columns: minmax(0, 1fr); }
}

/* The award badges arrive stacked too — four full-width images one under the
   other. Live sets them as one row of equal columns, vertically centred, with
   each badge scaled to fit rather than cropped: the four are square, portrait
   and landscape, and only `contain` keeps them all legible. */
.page-main .awards-row,
.location-body .awards-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 20px;
	align-items: center;
	justify-items: center;
}
.page-main .awards-row figure,
.location-body .awards-row figure { margin: 0; width: 100%; }
.page-main .awards-row img,
.location-body .awards-row img {
	display: block;
	width: 100%;
	max-height: 120px;
	object-fit: contain;
	border-radius: 0;
	margin-inline: auto;
}

/* --- Location pages: the review band, wherever it is wrapped ------------- */

/* The slider carries its own pink wash, and where the section around it is a
   plain `.section-band` — no background of its own — the result read as an
   inset pink panel floating on a white page. Anything wrapping the slider now
   behaves like the review band: grey, and edge to edge with the copy still on
   the gutter. `.reviews-band` is listed alongside so the two cannot drift. */
.location-body > .section-band:has(.testimonials),
.location-body > .reviews-band:has(.testimonials) {
	background: var(--surface);
	border-radius: 0;
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	padding-block: 50px;
}
.location-body .section-band:has(.testimonials) .testimonials,
.location-body .section-band:has(.testimonials) .testimonial-slider,
.location-body .reviews-band:has(.testimonials) .testimonials,
.location-body .reviews-band:has(.testimonials) .testimonial-slider { background: none; }

/* --- Section background utilities ---------------------------------------- */

/* Two classes to type into the block editor's "Additional CSS class(es)" box
   on any group, so a section can be given a background without a code change:
   `section-pink` for the light purple wash, `section-grey` for the panel grey.
   Add `section-full` alongside either to take it edge to edge. */
.section-pink,
.section-grey {
	border-radius: var(--radius);
	padding: 50px clamp(20px, 4vw, 60px);
}
.section-pink { background: var(--brand-tint); }
.section-grey { background: var(--surface); }
.section-pink > :first-child,
.section-grey > :first-child { margin-top: 0; }
.section-pink > :last-child,
.section-grey > :last-child { margin-bottom: 0; }

/* Edge to edge, with the contents still on the gutter. */
.section-full {
	border-radius: 0;
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}

/* --- Sidebar review: attribution ----------------------------------------- */

/* Live signs its reviews off with the reviewer's name and where the review was
   left, set as a heading under the quote. Eight pages carry one. */
.testimonial__cite {
	display: block;
	margin: 14px 0 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--purple-body);
	text-align: center;
}

/* --- Contact page --------------------------------------------------------- */

/* Offices on the left, the enquiry form on the right, as live sets it. The
   form sticks so it stays in view down the five office addresses. */
.contact-columns { gap: var(--space-lg); align-items: start; }
@media (min-width: 62em) {
	.contact-columns { grid-template-columns: 1fr 1fr; }
	.contact-columns > .wp-block-column:last-child { position: sticky; top: 120px; }
}
.contact-columns .side-form { border-radius: var(--radius); overflow: hidden; }

/* --- Video size, as one number ------------------------------------------- */

/* The videos are raw <iframe> embeds in a Custom HTML block. Their own
   width/height attributes do nothing, because `iframe { max-width: 100% }`
   overrides them, so the size lives here instead.

   Change --video-width to change every embedded video. To size one video on
   its own, put the variable on that figure in the editor:

       <figure class="page-video" style="--video-width:600px">

   The height follows from 16:9, so there is only ever one number to set. */
:root { --video-width: 100%; }

.page-video {
	margin: 0 auto;
	max-width: var(--video-width);
}
.page-video iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--radius);
}

/* --- Location pages: case-study band ------------------------------------- */

/* Case studies arrive as a flat run — photograph, title, two paragraphs, per
   case — which read as one very long column. Set in a row on the same pink wash
   live gives its successes band, edge to edge with the copy on the gutter.
   Equal-height columns so the photographs line up whatever the copy runs to. */
.location-body > .case-cards {
	background: var(--brand-tint);
	border-radius: 0;
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	padding-block: 50px;
}
.location-body .case-cards > h2 { text-align: center; }
.location-body .case-cards .wp-block-columns { align-items: stretch; margin-top: 28px; }
.location-body .case-cards .wp-block-column { display: flex; flex-direction: column; }
.location-body .case-cards figure { margin: 0 0 18px; }
.location-body .case-cards img {
	display: block;
	width: 100%;
	/* .location-body .wp-block-image img caps inline body images at 260px and
	   carries the same specificity as this rule, so `width: 100%` alone was
	   still being clamped to 260. The cap has to be lifted explicitly, as the
	   fee-earner card does. */
	max-width: none;
	/* The three photographs are three different shapes; cropping them to one
	   ratio is the only way the titles below them line up. */
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius);
}
.location-body .case-cards :where(h3, h4) {
	color: var(--purple-body);
	font-size: 20px;
	line-height: 1.2;
	margin: 0 0 10px;
}
.location-body .case-cards p { margin: 0 0 12px; }
.location-body .case-cards .wp-block-column > :last-child { margin-bottom: 0; }

@media (max-width: 47.99em) {
	.location-body .case-cards .wp-block-columns { gap: 28px; }
}

/* --- Accreditations: logo beside each entry ------------------------------ */

/* Live sets each accreditation as a row — the copy two-thirds, the badge
   one-third beside it, vertically centred. The badges are five different
   shapes, so they are contained rather than cropped and capped on height. */
/* Every selector here carries .page-main as well, and the column widths are
   given in both flex and grid terms. WordPress prints its block-library CSS
   inline, AFTER the theme's stylesheet link, so on a page with no other rules
   in play core's `.wp-block-columns { display: flex }` beats the theme's
   `display: grid`, and core's `.wp-block-image img { max-width: 100% }` beats a
   one-class cap. Both columns came out equal and the logos filled them. */
.page-main .accred-item + .accred-item { margin-top: 44px; }
.page-main .accred-item .wp-block-columns { align-items: center; }
@media (min-width: 48em) {
	.page-main .accred-item .wp-block-columns { grid-template-columns: 2fr 1fr; }
	.page-main .accred-item .wp-block-column:first-child { flex: 2 1 0; }
	.page-main .accred-item .wp-block-column:last-child { flex: 1 1 0; }
}
.page-main .accred-item figure { margin: 0; }
.page-main .accred-item img {
	display: block;
	width: 100%;
	max-width: 220px;
	max-height: 140px;
	object-fit: contain;
	margin-inline: auto;
	border-radius: 0;
}

/* --- Password-protected pages -------------------------------------------- */

/* WordPress renders this form itself in place of the content. Left alone it
   arrives as an unstyled label, input and button on one line — which is what
   made /referral-90/ look like it had no way in. */
.post-password-form {
	max-width: 520px;
	margin: 0 0 var(--space-lg);
}
.post-password-form p { margin: 0 0 14px; }
.post-password-form label {
	display: block;
	font-weight: 500;
	color: var(--purple-body);
	margin-bottom: 6px;
}
.post-password-form input[type="password"] {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--fs-body);
}
.post-password-form input[type="submit"] {
	display: inline-block;
	margin-top: 12px;
	padding: 12px 26px;
	border: 0;
	border-radius: var(--radius-btn);
	background: var(--brand);
	color: var(--white);
	font-family: var(--font-heading);
	font-size: var(--fs-body);
	font-weight: 600;
	cursor: pointer;
}
.post-password-form input[type="submit"]:hover { background: var(--brand-dark); }

/* --- Column layouts on plain pages --------------------------------------- */

/* Every rule here is scoped to .page-main and gives its column widths in flex
   as well as grid terms. WordPress prints its block-library CSS inline, after
   the theme's stylesheet, so on a page with nothing else in play core's
   `.wp-block-columns { display: flex }` wins and grid templates go inert. */

/* Subscription plans: three cards, equal height, the shared copy above and
   below them left full width. */
.page-main .plan-cards .wp-block-columns { align-items: stretch; gap: 24px; }
.page-main .plan-cards .wp-block-column {
	background: var(--surface);
	border-radius: var(--radius);
	padding: 32px 28px;
	flex: 1 1 0;
}
@media (min-width: 48em) {
	.page-main .plan-cards .wp-block-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.page-main .plan-cards h2 {
	font-size: 22px;
	line-height: 1.2;
	color: var(--purple-body);
	margin: 0 0 12px;
}
/* "Who is it for?" repeats in each card and is a sub-heading, not a plan name. */
.page-main .plan-cards h2 + p + ul + h2,
.page-main .plan-cards ul + h2 {
	font-size: 16px;
	margin-top: 22px;
}
.page-main .plan-cards > .wp-block-columns > .wp-block-column > :last-child { margin-bottom: 0; }

/* Useful links: two to a row, each on its own card. */
.page-main .link-cards .wp-block-columns { align-items: stretch; gap: 24px; }
.page-main .link-cards .wp-block-columns + .wp-block-columns { margin-top: 24px; }
.page-main .link-cards .wp-block-column {
	background: var(--surface);
	border-radius: var(--radius);
	padding: 26px 24px;
	flex: 1 1 0;
}
@media (min-width: 48em) {
	.page-main .link-cards .wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.page-main .link-cards :where(h3, h4) { margin: 0 0 10px; color: var(--purple-body); }
.page-main .link-cards p { margin: 0 0 10px; }
.page-main .link-cards .wp-block-column > :last-child { margin-bottom: 0; }
/* The last row can hold one card; it keeps a column's width rather than
   stretching across the page. */
@media (min-width: 48em) {
	.page-main .link-cards .wp-block-columns:has(> .wp-block-column:only-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: start;
	}
	.page-main .link-cards .wp-block-column:only-child { flex: 0 1 calc(50% - 12px); }
}

/* Videos: three to a row, each 16:9 with its title underneath. */
.page-main .video-grid .wp-block-columns { align-items: start; gap: 24px; }
.page-main .video-grid .wp-block-columns + .wp-block-columns { margin-top: 24px; }
.page-main .video-grid .wp-block-column { flex: 1 1 0; }
@media (min-width: 48em) {
	.page-main .video-grid .wp-block-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.page-main .video-grid figure { margin: 0; }
.page-main .video-grid .wp-block-embed__wrapper { position: relative; }
.page-main .video-grid iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--radius);
}
.page-main .video-grid figcaption {
	margin: 12px 0 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--purple-body);
	text-align: left;
}
/* The last row can hold one or two videos rather than three. Left alone they
   stretch to half and full width and the grid stops reading as a grid, so a
   short row keeps thirds and ranges left. */
@media (min-width: 48em) {
	.page-main .video-grid .wp-block-columns:not(:has(> .wp-block-column:nth-child(3))) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		justify-content: start;
	}
	.page-main .video-grid .wp-block-columns:not(:has(> .wp-block-column:nth-child(3)))
	> .wp-block-column { flex: 0 1 calc(33.333% - 16px); }
}

/* --- Location pages: card headings, band spacing, card buttons ------------ */

/* The profile cards' name is an <h4> where the earlier rule only named <h3>,
   so on every page built from a grouped team run the name lost its centring and
   its 20px side padding and sat hard against the left edge of the panel. */
.location-body .fee-earner :where(h2, h3, h4),
.location-body .fee-earner .fee-earner__name {
	text-align: center;
	color: var(--purple-body);
	font-size: 20px;
	line-height: 1.2;
	margin: 18px 20px 4px;
}

/* Group blocks wrap their children in .wp-block-group__inner-container, so
   `> :first-child` matched that wrapper and the heading inside it kept its
   48px top margin — on top of the band's own 50px padding and the 100px
   section gap. Reaching through the wrapper is what closes the gap. */
.location-body > :where(.section-band, .section-centred, .copy-centred, .copy-justified,
                        .reviews-band, .faq, .steps, .service-cards, .case-cards)
> .wp-block-group__inner-container > :first-child,
.location-body > :where(.section-band, .section-centred, .copy-centred, .copy-justified,
                        .reviews-band, .faq, .steps, .service-cards, .case-cards)
> :first-child { margin-top: 0; }
.location-body > :where(.section-band, .section-centred, .copy-centred, .copy-justified,
                        .reviews-band, .faq, .steps, .service-cards, .case-cards)
> .wp-block-group__inner-container > :last-child,
.location-body > :where(.section-band, .section-centred, .copy-centred, .copy-justified,
                        .reviews-band, .faq, .steps, .service-cards, .case-cards)
> :last-child { margin-bottom: 0; }

/* Live gives two of these bands a heading and nothing under it. At the normal
   rhythm that is a lone line of text with 50px of padding inside 100px of gap
   either side — around 200px of empty page. The band keeps its heading and
   loses the padding. */
.location-body > .section-band:not(:has(p, ul, ol, figure, .wp-block-columns, .wp-block-details, form)) {
	padding-block: 0;
	margin-top: 54px;
}

/* A sub-heading introducing a list needs air above it; 10px below and nothing
   above ran it into the paragraph before. */
.location-body .section-band h3 { margin-top: 34px; margin-bottom: 18px; }
.location-body .section-band h3:first-child { margin-top: 0; }

/* Service cards: the Read More button sits on the bottom edge of the card
   whatever the copy runs to, so a row of them lines up. */
.location-body .service-cards .blurb {
	display: flex;
	flex-direction: column;
}
.location-body .service-cards .blurb .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.location-body .service-cards .blurb .wp-block-buttons {
	margin-top: auto;
	/* The button's own bottom margin sat under it, so the card's 28px padding
	   read as 44px and the button was not quite on the bottom edge. */
	margin-bottom: 0;
	padding-top: 18px;
}

/* The first band on the page sits directly under the full-bleed press strip,
   and its own 50px top padding lands on top of the section wrapper's 88px —
   138px of white before the first heading. The wrapper's padding is enough. */
.location-body > :where(.section-band, .section-centred, .copy-centred, .copy-justified,
                        .reviews-band, .faq, .steps, .service-cards, .case-cards):first-child {
	padding-top: 0;
}

/* --- Mobile header: shorter utility bar, bigger logo, sticky nav ---------- */

@media (max-width: 61.99em) {
	/* The black bar carried four items on a screen with room for one. Pay an
	   invoice and the number move out — the number becomes an icon in the
	   purple bar below, where a thumb already is — leaving the bar as a thin
	   rule rather than a two-line block. */
	.topbar__item--pay,
	.topbar__item--phone,
	.topbar__item--email { display: none; }
	/* Everything the bar carried has moved: the number is an icon in the
	   purple bar below, the invoice link is in the menu, and the address is in
	   the footer. The bar itself stays — the logo tile overhangs the purple
	   nav and lands on this black strip, and that overlap is the design. With
	   no text to hold it just gets shorter. */
	.topbar__inner {
		min-height: 24px;
		padding-block: 0;
		flex-wrap: nowrap;
	}
	.topbar { font-size: 12px; line-height: 1.5; }

	/* The logo tile overhangs the purple bar on desktop; it now does the same
	   on mobile, which is what makes the brand read at this size. The header
	   keeps its height and the tile hangs below it. */
	.site-header { overflow: visible; }
	.site-header__inner {
		position: relative;
		min-height: 62px;
		align-items: center;
	}
	/* Taller than the bar it sits in, so the tile overhangs — 92px of logo in
	   a 62px bar, which is 15px proud at the top and 15px at the bottom.

	   Centred rather than positioned: with align-self:center the equal
	   overhang falls out of the geometry, so changing the logo height or the
	   bar height keeps it symmetrical instead of needing both margins retuned.
	   The margins are negative and equal so the tile's 92px never enters the
	   flow — the bar stays 62px and nothing below it moves. */
	.site-brand {
		align-self: center;
		display: flex;
	}
	.site-brand img {
		height: 92px;
		position: relative;
		z-index: 2;
		margin-block: calc((62px - 92px) / 2);
	}

	/* Phone icon in the nav bar. Sits next to the burger, tappable at 44px. */
	.nav-phone {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-left: auto;
		color: var(--white);
		border-radius: 50%;
		flex: none;
	}
	.nav-phone svg { width: 22px; height: 22px; }
	.nav-phone + .nav-toggle { margin-left: 4px; }

	/* Smart sticky: the header travels with the page, hides on the way down so
	   it is not covering the copy being read, and slides back the moment the
	   reader scrolls up looking for the menu. */
	.site-head {
		position: sticky;
		top: 0;
		z-index: 99;
		/* Unhurried on purpose. At .25s the bar snapped in and out with every
		   change of scroll direction, which reads as a glitch rather than a
		   header following you. */
		transition: transform .45s var(--ease);
	}
	.site-head.is-tucked { transform: translateY(-100%); }
	.mobile-nav { max-height: calc(100dvh - 120px); }
	/* The logo tile hangs 15px below the purple bar and was sitting on top of
	   the first menu item. The panel starts below the overhang. */
	.mobile-nav .container { padding-top: 46px; padding-bottom: var(--space-md); }
	/* The first item's rule would otherwise draw across that new gap. */
	.mobile-nav .mobile-nav__list > li:first-child { border-top: 0; }
}

/* The phone icon is a mobile affordance only — the number is in the black bar
   on desktop. */
@media (min-width: 62em) {
	.nav-phone { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.site-head { transition: none; }
}

/* --- Mobile menu: collapsible sections ----------------------------------- */

/* Every section was expanded at once, so the panel opened several screens
   long. Sections start closed and open on the caret; the link itself still
   goes to the section page. */
@media (max-width: 61.99em) {
	.mobile-nav .menu-item-has-children > a { padding-right: 48px; }
	.mobile-nav .menu-item-has-children { position: relative; }
	.mobile-nav .sub-toggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 48px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		color: var(--white);
		cursor: pointer;
	}
	.mobile-nav .sub-toggle::before {
		content: "";
		width: 9px;
		height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform .2s var(--ease);
	}
	.mobile-nav .sub-toggle[aria-expanded="true"]::before {
		transform: rotate(-135deg) translate(-2px, -2px);
	}
	.mobile-nav .menu-item-has-children > .sub-menu { display: none; }
	.mobile-nav .menu-item-has-children.is-open > .sub-menu { display: block; }
}

/* --- Press strip on phones ----------------------------------------------- */

@media (max-width: 47.99em) {
	/* Five 203px logos in a 335px row wrapped into a stack. On a phone they go
	   in one line at a size that still reads, with the row scrolling if it has
	   to rather than piling up. */
	/* main.js re-chunks the strip to three logos a slide at this width, so
	   each mark gets roughly 80px instead of 56px and every slide holds the
	   same number — no short last row that reads as a broken slide. */
	.press-carousel__slide {
		flex-wrap: nowrap;
		gap: 10px;
		min-height: 0;
		/* evenly, not space-between: the marks have very different natural
		   widths, and space-between pushed all the slack into one gap. */
		justify-content: space-evenly;
		padding-inline: 0;
	}
	.press-carousel--wide .press-carousel__slide { gap: 10px; min-height: 0; }
	.press-carousel__slide img,
	.press-carousel--wide .press-carousel__slide img {
		width: auto;
		max-width: 74px;
		max-height: 34px;
		min-width: 0;
		object-fit: contain;
	}
	/* The dots sat straight against the copy below. */
	.press-carousel { margin-bottom: var(--space-lg); }
	.press-carousel__dots { padding-top: 10px; }

	/* The arrows sat 48px outside the carousel, which on a 375px screen is off
	   the edge of the page and was pushing the document wider than the
	   viewport. They move inside and go translucent so they do not sit on top
	   of a logo. */
	/* The arrows drop out of the logo row and onto the dots line. Sitting
	   over the row they had to be padded around, which cost 68px of the 335
	   available — the reason the marks were down at 56px. */
	.press-carousel { overflow: hidden; position: relative; }
	.press-carousel__arrow {
		width: 34px;
		height: 34px;
		top: auto;
		bottom: 0;
		transform: none;
	}
	.press-carousel__arrow--prev { left: 12px; }
	.press-carousel__arrow--next { right: 12px; }
	.press-carousel__arrow svg { width: 18px; height: 18px; }
}

/* --- Sidebar CRO modules moved into the copy ---------------------------
   The service pages run a 5,000px copy column beside a 2,000px sidebar, so
   the fee-earner card and the reviews are lifted out of the sidebar and
   dropped into the copy at its section breaks (see inc/two-column-cro.php).
   In the sidebar those modules are tall and narrow; across a 709px column
   they would be absurd at the same proportions, so here they are laid out
   the other way — image beside text — which also makes them read as a
   deliberate break in the argument rather than a stray widget.
   ---------------------------------------------------------------------- */
.cro-inline {
	margin-block: var(--space-lg);
}
.cro-inline > * { margin: 0; }
/* The enquiry form is moved here by main.js on phones only — see
   initMobileSideForm. Above 62em the two columns exist and it stays put. */
@media (min-width: 62em) {
	.cro-inline--form { display: none; }
}

@media (min-width: 48em) {
	/* display:contents lifts the block-editor wrapper out of the way so the
	   photo and the bio become items of the same grid. */
	.cro-inline--person .fee-earner {
		display: grid;
		grid-template-columns: 220px minmax(0, 1fr);
		/* The bio is only three lines on most pages, and without a floor the
		   photo gets cropped to a 130px letterbox. */
		min-height: 210px;
	}
	.cro-inline--person .fee-earner > .wp-block-group__inner-container {
		display: contents;
	}
	.cro-inline--person .fee-earner__photo,
	.cro-inline--person figure.fee-earner__photo { height: 100%; }
	.cro-inline--person .fee-earner__photo img {
		height: 100%;
		object-fit: cover;
		object-position: top center;
	}
	.cro-inline--person .fee-earner__bio { padding: 24px 26px; }

	.cro-inline--reviews .testimonials {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		grid-template-areas:
			'image panel'
			'image slider';
		align-content: start;
	}
	.cro-inline--reviews .testimonials__image {
		grid-area: image;
		height: 100%;
		object-fit: cover;
	}
	.cro-inline--reviews .testimonials__panel {
		grid-area: panel;
		padding: 24px 26px 0;
	}
	.cro-inline--reviews .testimonial-slider {
		grid-area: slider;
		padding-inline: 6px;
	}
}

/* --- Location pages on a phone: stack the two-column bands ----------------
   Three bands set their own grid-template-columns (3fr 1fr on the approach
   row, 1fr 2fr on the team row, 2fr 1fr on the closing CTA) and none of them
   was ever reset below the breakpoint. At 375px that left a 84px image column
   and a 74px CTA panel with words breaking mid-syllable — "Solicito r",
   "prenu ptial".

   Stated at full specificity on purpose. The obvious shorthand,
   `.location-body :where(.copy-justified, .copy-centred, .cta-row) .wp-block-columns`,
   loses: :where() contributes nothing, so it scores two classes against the
   three-class rules it is meant to override.
   ---------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	.location-body .copy-justified .wp-block-columns,
	.location-body .copy-centred .wp-block-columns,
	.location-body .copy-centred .wp-block-columns:has(form),
	.location-body .copy-centred .wp-block-columns:has(.fee-earner),
	.location-body .cta-row .wp-block-columns {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		align-items: start;
	}

	/* Reading order once stacked: the words first, then the face, the picture
	   or the reviews. A photograph at the top of a stack is decoration the
	   reader has to scroll past before they learn what the section is about. */
	.location-body .copy-centred .wp-block-columns:has(.fee-earner) > .wp-block-column:first-child,
	.location-body .cta-row .wp-block-columns > .wp-block-column:first-child { order: 2; }
	.location-body .copy-centred .wp-block-columns:has(.fee-earner) > .wp-block-column:last-child,
	.location-body .cta-row .wp-block-columns > .wp-block-column:last-child { order: 1; }

	/* Anything carrying the reviews goes last whichever column it landed in. */
	.location-body .wp-block-columns > .wp-block-column:has(.testimonials),
	.location-body .wp-block-columns > .wp-block-column:has(.testimonial-slider),
	.location-body .wp-block-columns > .wp-block-column:has(.rs-widget) { order: 3; }

	/* The photographs were sized to fill a column as tall as the copy beside
	   them. Stacked, that column is the full width of the screen, so
	   height:100% turned a headshot into a 900px slab — the bald-head crop.
	   They get a real aspect instead. */
	.location-body .copy-justified img,
	.location-body .cta-row img {
		height: auto;
		min-height: 0;
		max-height: 220px;
		aspect-ratio: 16 / 9;
		object-fit: cover;
		object-position: center 28%;
	}
	.location-body .copy-justified figure,
	.location-body .cta-row figure { height: auto; flex: none; }
	.location-body .copy-justified .wp-block-column:last-child { display: block; }

	/* Stacked, these stop being two halves of one card and become two cards
	   with a gap between them, so each is rounded on all four corners at the
	   site's usual 12px rather than sharing a straight join. */
	.location-body .cta-row img,
	.location-body .cta-row .cta-box,
	.location-body .copy-justified img,
	.location-body .copy-justified figure,
	/* Stated at this depth because a three-class rule further up squares this
	   image off, and the two-class version below it silently loses. */
	.location-body .copy-justified .wp-block-column:last-child img,
	.location-body .copy-justified .wp-block-column:last-child figure { border-radius: 12px; }
	.location-body .cta-row .cta-box { height: auto; }
	/* The wrapper clipped its children to one rounded rectangle; with the two
	   cards separated it would crop the corners back off. */
	.location-body .cta-row,
	.location-body .copy-justified { overflow: visible; }

	.location-body .copy-justified .wp-block-column:first-child { padding: 26px 20px; }

	/* The mid-page form is a single column of fields at this width. */
	.location-body .side-form form { grid-template-columns: minmax(0, 1fr); }
	.location-body .side-form .field:has(input[type="radio"]),
	.location-body .side-form .field--consent { grid-column: 1 / -1; }
}

/* --- The reviews band stands alone ----------------------------------------
   "Your Confidence, Our Commitment" is a third-party panel, not part of the
   argument on either side of it, so it needs more air than a copy band to
   read as its own section rather than a widget dropped into the previous one. */
.location-body > .section-band:has(.rs-widget) {
	margin-top: 130px;
	padding-block: 72px;
}
.location-body > .section-band:has(.rs-widget) + * { margin-top: 130px; }
.location-body > .section-band:has(.rs-widget) > .wp-block-group__inner-container > h2 {
	margin-bottom: 36px;
}

@media (max-width: 47.99em) {
	.location-body > .section-band:has(.rs-widget) {
		margin-top: 80px;
		padding-block: 48px;
	}
	.location-body > .section-band:has(.rs-widget) + * { margin-top: 80px; }
}

/* A band that should read as a clear page, not a tinted one. */
.section-white { background: var(--white); }
.location-body > .section-white { padding-block: 60px; }

/* A centred band's paragraphs are justified by default, which looks wrong
   under a centred heading in a narrow measure. */
.section-centred--tight { max-width: 820px; margin-inline: auto; }
.section-centred--tight p { text-align: center; }
.section-centred--tight .tick-list { max-width: 640px; margin-inline: auto; }
.location-body .section-centred--tight p { text-align: center; }

/* --- Location pages on a phone: the remaining multi-column bands -----------
   Four more rules set their own tracks and none was reset below the
   breakpoint: the numbered/service cards go two-up, a pair of fee-earners
   takes a third of the row each, three fee-earners take a third each, and the
   closing CTA is stated again at 3fr 1fr further down the file. At 375px that
   produced 148px cards and 85px profile photographs.

   Each is restated with the SAME selector rather than a shorter one, because
   these carry `:has()` and `:not()` arguments worth several classes and a
   tidier selector simply loses to them.
   ---------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	.location-body .copy-centred .wp-block-columns:has(.blurb),
	.location-body .wp-block-columns:has(.blurb),
	.location-body .copy-centred .wp-block-columns:has(> .wp-block-column:nth-child(3)),
	.location-body .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(.fee-earner),
	.location-body .copy-centred .wp-block-columns:has(> .wp-block-column:nth-child(2) .fee-earner):not(:has(> .wp-block-column:nth-child(3))),
	.location-body .wp-block-columns:has(> .wp-block-column:nth-child(2) .fee-earner):not(:has(> .wp-block-column:nth-child(3))),
	.location-body .cta-row .wp-block-columns {
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch;
		gap: 24px;
	}

	/* A profile card is its own width at this size, not a full-bleed panel. */
	.location-body .wp-block-columns:has(> .wp-block-column:nth-child(2) .fee-earner) .fee-earner {
		max-width: 320px;
		width: 100%;
		height: auto;
		margin-inline: auto;
	}
	.location-body .wp-block-columns:has(> .wp-block-column:nth-child(2) .fee-earner) .fee-earner img {
		height: 260px;
	}

	/* Cards stop stretching to a shared height once they are in a stack. */
	.location-body .wp-block-columns:has(.blurb) > .wp-block-column { display: block; }
}

/* Stated with .location-body because the plain class loses to
   `.location-body .section-centred`, which caps at 1080px — a poor measure
   for centred prose. */
.location-body .section-centred--tight { max-width: 820px; }

/* --- Lists in a centred band are still ranged left ------------------------
   `.location-body .section-centred .wp-block-column:first-child` centres
   everything in the left column, which is right for a heading and a lead
   paragraph and wrong for a bulleted list: centred bullets leave the markers
   out of line with each other and the text ragged on both sides. On
   /insolvency/birmingham/ that put the left column's ticks centred and the
   right column's ranged left, side by side.

   Four classes so it outranks the column rule, which scores the same and sits
   earlier in the file. */
.location-body .section-centred .wp-block-column ul,
.location-body .section-centred .wp-block-column ol,
.location-body .section-centred .wp-block-column li,
.location-body .copy-centred .wp-block-column ul,
.location-body .copy-centred .wp-block-column ol,
.location-body .copy-centred .wp-block-column li,
.location-body .section-centred > .wp-block-group__inner-container ul,
.location-body .section-centred > .wp-block-group__inner-container ol,
.location-body .section-centred > .wp-block-group__inner-container li {
	text-align: left;
}

/* --- /pay-now/ -------------------------------------------------------------
   The Autify Cardnet plugin lays the form out for a template this site does
   not use: the fields sit in one half of a flex row and an image column takes
   the other, and that image column is empty here — so the form ran at half
   width with dead space beside it, and its two sections ran one under the
   other down a single 518px column.
   ---------------------------------------------------------------------- */

/* The card logos sit in a 200px column to the LEFT of the payment form, on
   the same row, rather than stacked underneath it.

   Grid rather than flex because the two are not adjacent in the source: the
   form is printed first and the logos after it, and grid can place them side
   by side without moving either. That source order is deliberate — it is also
   the order they stack in on a phone, where the form should come first. */
.page-id-705 .page-main {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	column-gap: 48px;
	align-items: start;
}
/* Everything else on the page runs the full width, under the row. */
.page-id-705 .page-main > * { grid-column: 1 / -1; }

.page-id-705 .page-main > .pay-logos { grid-column: 1; grid-row: 1; }
.page-id-705 .page-main > .payup    { grid-column: 2; grid-row: 1; }

.page-id-705 .pay-logos {
	display: grid;
	gap: 18px;
	justify-items: start;
}
.page-id-705 .pay-logos .wp-block-image { margin: 0; width: 100%; max-width: 200px; }
.page-id-705 .pay-logos img { width: 100%; height: auto; }

/* One column below the form on a phone: 200px of logos beside a payment form
   leaves neither enough room. */
@media (max-width: 47.99em) {
	.page-id-705 .page-main { display: block; }
	.page-id-705 .pay-logos {
		grid-template-columns: repeat(auto-fit, minmax(96px, 120px));
		justify-content: start;
	}
}

/* Drop the empty image column and let the fields have the whole row. */
.page-id-705 .pay-now__right-image:empty { display: none; }
.page-id-705 .fields-set { flex: 1 1 auto; width: 100%; }

@media (min-width: 48em) {
	/* Invoice details on the left, billing on the right.

	   The split is keyed off the two section headings the plugin already
	   prints, not off counting fields — enabling company name or shipping in
	   the plugin settings adds fields, and a count-based rule would silently
	   put them in the wrong column.

	   `dense` is doing real work: without it the billing column would be
	   placed below the invoice column rather than beside it, because
	   auto-placement only ever moves the cursor forward. */
	.page-id-705 .fields-set {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 40px;
		align-items: start;
		grid-auto-flow: row dense;
	}
	.page-id-705 .fields-set > * { grid-column: 1; }
	.page-id-705 .fields-set > .details-title:not(.your-details),
	.page-id-705 .fields-set > .details-title:not(.your-details) ~ * { grid-column: 2; }

	/* The plugin prints a container for every field it knows about, including
	   the ones switched off in its settings — company name is off here, so an
	   empty div sat between Customer Name and Address Line 1 and took a whole
	   grid row with it. That is the gap that pushed the billing column a field
	   out of step with the invoice column.

	   `:not(:has(*))` rather than `:empty`, because the div holds whitespace
	   and `:empty` will not match it. Nothing is lost by hiding it: it has no
	   input inside, so there is nothing for the form to submit. */
	.page-id-705 .fields-set > .field:not(:has(*)) { display: none; }

	/* The consent line and the pay buttons belong to the form, not a column.

	   Written through `.details-title ~` deliberately: the rule that puts
	   everything after the billing heading in column 2 scores four classes,
	   and a plain `.fields-set > .payment-buttons` scores three — so the tidy
	   version lost, and the Pay button sat under the billing column instead
	   of under the whole form. */
	.page-id-705 .fields-set > .details-title ~ .field.information,
	.page-id-705 .fields-set > .details-title ~ .payment-buttons { grid-column: 1 / -1; }
}