/*
   pn-skin.css
   The visual layer. Loads LAST, after pn-design-system.css, pn-tokens.css and pn-patterns.css.

   WHY A SEPARATE FILE
   pn-patterns.css owns structure: what is a grid, what is a flex row, what stacks on a phone.
   This file owns appearance: colour, depth, rhythm, weight. Keeping them apart means a visual
   redesign never risks breaking the responsive behaviour that was measured and verified, and
   this file can be replaced wholesale without touching anything structural.

   THE POSITIONING THIS DESIGN IS BUILT FOR
   Two competitors define the field. hlootahlaw.com is premium, dark and photographic, and
   carries real authority, but it names no individual notary and publishes no fees.
   thenotarydubai.com is loud, orange, price-led and promises notarisation "in one hour", which
   looks cheap and makes a commitment a regulated professional should not make.

   This site takes the authority register of the first and adds the two things neither has: a
   named licensed attorney and government-sourced fees published in full. So the design has to
   read as serious and expensive, and it has to make the credentials and the fee tables the
   loudest things on the page rather than the buttons.

   RULES THIS FILE KEEPS
   - Logical properties only. No left/right. Arabic phase 2 is a dir flip, not a redesign.
   - Every colour pair traceable to design-system.md section 1.2, which publishes the ratios.
   - No web font. Georgia and system-ui, used at proper sizes with proper spacing.
   - No image dependency. The visual weight is carried by colour, rule and rhythm, so the
     design is complete before the client supplies a single photograph, and improves when he does.
   - No em dashes anywhere.
*/

/* ----------------------------------------------------------------- palette additions */

:root {
	--pn-ink: #0A2036;
	--pn-ink-2: #0F2C48;
	--pn-ink-3: #16324F;
	--pn-brass: #C79F3F;
	--pn-brass-deep: #A88429;
	--pn-parchment: #FAF8F5;
	--pn-parchment-2: #F2EEE7;

	--pn-shadow-sm: 0 1px 2px rgba(10, 32, 54, 0.06), 0 2px 8px rgba(10, 32, 54, 0.04);
	--pn-shadow-md: 0 2px 6px rgba(10, 32, 54, 0.07), 0 12px 28px rgba(10, 32, 54, 0.08);
	--pn-shadow-lg: 0 4px 12px rgba(10, 32, 54, 0.10), 0 24px 56px rgba(10, 32, 54, 0.12);

	--pn-rule: 1px solid rgba(10, 32, 54, 0.10);
	--pn-radius: 4px;
	--pn-measure: 68ch;

	/* A single checkmark, drawn as a path and used as a mask so it inherits colour.
	   Crisp at any size, no icon font, no HTTP request. */
	--pn-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 14.9 3.1 10.4l1.6-1.6 2.9 2.9 7.7-7.7 1.6 1.6z'/%3E%3C/svg%3E");
}

/* Full bleed guard.
   A section inside the container escapes to the viewport edge with
   `margin-inline: calc(50% - 50vw)`. Because 50vw counts the scrollbar gutter, that
   overshoots the visible area by the scrollbar width and would add a horizontal scrollbar.

   The guard MUST sit on html and body and nowhere narrower. `overflow-x: clip` on any
   ancestor narrower than the viewport clips the bleed back to that ancestor's width. This
   was originally set on `.site-content`, which GeneratePress renders at 1200px, and the
   result was a hero that measured 1920px but painted at 1200px. Do not move it back.

   `html` was added after a real bug report. With the guard on body alone, every bleeding
   section still resolved to left: -7px on a 390px viewport, because body is not the
   scroll container: html is. The page therefore reported a 7px horizontal overflow and
   every band sat half a scrollbar left of centre. Measured before and after: 7px, then 0. */
html,
body {
	overflow-x: clip;
}

/* ----------------------------------------------------------------- page furniture */

body {
	background-color: var(--pn-parchment);
	-webkit-font-smoothing: antialiased;
}

/* NO WHITE SLAB BEHIND THE CONTENT.
   GeneratePress paints .site-content with the Base 3 colour, which is white, so a white
   block sat behind every section and the parchment page colour only showed in the margins.
   The page background is the surface now, and the cards and panels are the only things
   that carry their own fill. */
.site-content,
.site-content .content-area,
.site-content .site-main,
.inside-article,
.entry-content,
.one-container .site-content,
.separate-containers .inside-article {
	background-color: transparent;
	box-shadow: none;
}

.entry-content > * {
	margin-block: 0 0;
}

/* Vertical rhythm between top level sections, rather than uniform paragraph margins. */
.entry-content > * + * {
	margin-block-start: 1.5rem;
}

.entry-content > h2 {
	margin-block-start: 4rem;
}

.entry-content > .pn-cards,
.entry-content > .pn-fee-table,
.entry-content > .pn-faq,
.entry-content > .pn-contact,
.entry-content > .pn-steps,
.entry-content > .pn-quotes,
.entry-content > .pn-callout {
	margin-block-start: 2rem;
}

/* FULL BLEED SECTIONS MUST BUTT TOGETHER.
   Each of these paints edge to edge and carries its own generous vertical padding.
   Any margin between two of them shows as a white strip across the page, which is
   what the blank bands between sections were. Consecutive full bleed sections get
   zero margin, and a full bleed section following contained content gets its
   separation from its own padding rather than from a margin. */
.entry-content > .pn-hero,
.entry-content > .pn-trust,
.entry-content > .pn-stats,
.entry-content > .pn-band,
.entry-content > .pn-imageband,
.entry-content > .pn-cta-band {
	margin-block: 3rem 0;
}

.entry-content > .pn-hero + .pn-trust,
.entry-content > .pn-trust + .pn-stats,
.entry-content > .pn-stats + .pn-band,
.entry-content > .pn-band + .pn-band,
.entry-content > .pn-band + .pn-stats,
.entry-content > .pn-trust + .pn-band,
.entry-content > .pn-hero + .pn-stats,
.entry-content > .pn-band + .pn-cta-band,
.entry-content > .pn-stats + .pn-cta-band {
	margin-block-start: 0;
}

/* A heading immediately after a full bleed band needs breathing room, but the band
   itself already supplied the space below it. */
.entry-content > .pn-band + h2,
.entry-content > .pn-stats + h2,
.entry-content > .pn-trust + h2,
.entry-content > .pn-hero + h2 {
	margin-block-start: 3.5rem;
}

/* A page that opens with a hero must have the hero flush against the header, and the
   trust strip flush under the hero, or the full bleed reads as a floating band with
   white slivers above and below it. GeneratePress pads the article, so that padding
   is removed too, but only on pages that actually start with a hero. */
.entry-content > .pn-hero:first-child,
.entry-content > .pn-imageband:first-child {
	margin-block-start: 0;
}

.entry-content > .pn-imageband + .pn-trust,
.entry-content > .pn-imageband + .pn-stats,
.entry-content > .pn-imageband + .pn-band {
	margin-block-start: 0;
}

.entry-content > .pn-hero + .pn-trust,
.entry-content > .pn-trust + .pn-cta-band {
	margin-block-start: 0;
}

/* Measured, not guessed: the white band between the header and a full bleed hero is
   40px of padding-top on .site-content plus 34px of margin-top on .entry-content.
   Both have to go, and only on pages that open with a hero. */
.site-content:has(.entry-content > .pn-hero:first-child),
.site-content:has(.entry-content > .pn-imageband:first-child) {
	padding-block-start: 0;
}

.entry-content:has(> .pn-hero:first-child),
.entry-content:has(> .pn-imageband:first-child) {
	margin-block-start: 0;
	padding-block-start: 0;
}

.inside-article:has(> .entry-content > .pn-hero:first-child),
.inside-article:has(> .entry-content > .pn-imageband:first-child) {
	padding-block-start: 0;
}

/* The last full bleed band should meet the footer with no gap.
   Measured: the 40px white strip above the footer was padding-bottom on .site-content,
   not a margin on the band. Removing the band's margin alone did nothing. */
.entry-content > .pn-cta-band:last-child,
.entry-content > .pn-band:last-child,
.entry-content > .pn-imageband:last-child,
.entry-content > .pn-stats:last-child {
	margin-block-end: 0;
}

.site-content:has(.entry-content > .pn-cta-band:last-child),
.site-content:has(.entry-content > .pn-band:last-child),
.site-content:has(.entry-content > .pn-imageband:last-child),
.site-content:has(.entry-content > .pn-stats:last-child) {
	padding-block-end: 0;
}

/* --------------------------------------------------------------------- footer widgets */

.site-footer .footer-widgets {
	padding-block: 3.5rem 2.5rem;
}

.pn-foot__title {
	font-family: var(--pn-font-body) !important;
	font-size: 0.6875rem !important;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pn-brass) !important;
	margin-block: 0 1rem;
}

/* NO measure cap on footer paragraphs.

   This used to read `max-width: 30rem`, which at a 768px viewport left the footer
   text stopping 213px short of its own 693px column. Same defect as the band text,
   same fix: if a column is too wide for comfortable reading, narrow the column, do
   not stop the sentence early inside it. */
.site-footer .widget p {
	font-size: 0.9063rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
	max-inline-size: none;
}

.site-footer .widget strong {
	color: #FFFFFF;
}

.pn-foot__list {
	list-style: none;
	margin: 0;
	padding-inline-start: 0;
}

.pn-foot__list > li {
	margin-block-end: 0.6rem;
}

:where(.pn-foot__list) a,
:where(.site-footer .widget) a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	border-block-end: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

:where(.pn-foot__list) a:hover,
:where(.site-footer .widget) a:hover {
	color: var(--pn-brass);
	border-block-end-color: var(--pn-brass);
}

/* --------------------------------------------------------------------- footer bar */

/* Copyright on the start edge, legal links on the end edge.
   GeneratePress renders .footer-bar BEFORE .copyright-bar in the DOM, so the visual
   order is flipped with `order`. That is deliberate over the Customizer's Footer Bar
   Alignment setting, which design-system.md flags as an RTL landmine: saving it replaces
   GeneratePress's is_rtl() conditional with a fixed value. `order` follows the writing
   direction, so Arabic flips on its own with nothing else to change. */
.site-info {
	border-block-start: 1px solid rgba(199, 159, 63, 0.22);
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.6);
}

.site-info .inside-site-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	padding-block: 1.25rem;
}

.site-info .copyright-bar {
	order: 1;
	margin: 0;
}

.site-info .footer-bar {
	order: 2;
	margin: 0;
}

.site-info .footer-bar .widget {
	padding: 0;
	margin: 0;
}

/* The legal links read as one row with hairline separators rather than a bullet list. */
.pn-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pn-legal > li {
	position: relative;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.pn-legal > li::marker {
	content: "";
}

/* Separator drawn on the start edge of every item except the first, so it never dangles
   at the end of a wrapped row. */
.pn-legal > li + li::before {
	content: "";
	position: absolute;
	inset-inline-start: -0.5rem;
	inset-block: 0.2em;
	inline-size: 1px;
	background-color: rgba(255, 255, 255, 0.22);
}

.site-info .pn-legal a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	border-block-end: 1px solid transparent;
}

.site-info .pn-legal a:hover {
	color: var(--pn-brass);
	border-block-end-color: var(--pn-brass);
}

/* On a phone the two halves stack, so centre them rather than leave one ragged. */
@media (max-width: 600px) {
	.site-info .inside-site-info {
		justify-content: center;
		text-align: center;
	}

	.pn-legal {
		justify-content: center;
	}
}

/* --------------------------------------------------------------------- header */

.site-header {
	background-color: var(--pn-ink);
	border-block-end: 3px solid var(--pn-brass);
	box-shadow: var(--pn-shadow-sm);
}

.site-header .site-title,
.site-header .site-title a,
.site-header .main-title a {
	color: #FFFFFF;
	font-family: var(--pn-font-display);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.site-header .site-description {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

.main-navigation,
.main-navigation .inside-navigation {
	background-color: transparent;
}

.main-navigation .main-nav ul li a {
	color: rgba(255, 255, 255, 0.86);
	font-family: var(--pn-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	position: relative;
}

/* The top level items. `sfHover` and `current-menu-ancestor` are included because
   GeneratePress adds them while a dropdown is open, and its own Customizer colour was
   winning there: hovering Services turned the label a muted blue that all but vanished
   against the navy header. Measured at 2.9:1 before, 15.9:1 now. */
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li > a:focus-visible,
.main-navigation .main-nav > ul > li.sfHover > a,
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a {
	color: #FFFFFF;
	background-color: transparent;
}

/* Brass underline on the active and hovered item, drawn from the start edge so it
   flips correctly in Arabic. */
/* TOP LEVEL ONLY. Written as `> ul > li > a` rather than the descendant selector it
   used to be, because the descendant version also matched every link inside the
   services panel: a 2px brass bar was being drawn 12px from the bottom of each panel
   card, which on a two line card runs straight through the description text. */
.main-navigation .main-nav > ul > li > a::after {
	content: "";
	position: absolute;
	inset-inline: 20px;
	inset-block-end: 12px;
	block-size: 2px;
	background-color: var(--pn-brass);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.18s ease;
}

.main-navigation .main-nav > ul > li > a:hover::after,
.main-navigation .main-nav > ul > li.current-menu-item > a::after,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------- hero */

.pn-hero {
	position: relative;
	margin-inline: calc(50% - 50vw);
	padding-inline: max(1.5rem, calc(50vw - 600px));
	padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem);
	background-color: var(--pn-ink);
	background-image:
		radial-gradient(120% 90% at 85% 0%, rgba(199, 159, 63, 0.16) 0%, transparent 55%),
		radial-gradient(100% 120% at 0% 100%, rgba(22, 50, 79, 0.9) 0%, transparent 60%),
		linear-gradient(160deg, var(--pn-ink) 0%, var(--pn-ink-2) 55%, var(--pn-ink-3) 100%);
	color: #FFFFFF;
	border-radius: 0;
	overflow: hidden;
}

/* A quiet architectural motif, drawn in CSS. No image request, no stock photograph, and
   nothing that makes a claim about who works here. It reads as engraved letterpress rule
   work, which is the right register for a notarial practice. */
.pn-hero::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: min(38%, 420px);
	background-image:
		repeating-linear-gradient(
			90deg,
			rgba(199, 159, 63, 0.14) 0 1px,
			transparent 1px 26px
		);
	-webkit-mask-image: linear-gradient(to left, #000 0%, transparent 100%);
	mask-image: linear-gradient(to left, #000 0%, transparent 100%);
	pointer-events: none;
}

.pn-hero > * {
	position: relative;
	z-index: 1;
	max-inline-size: 46rem;
}

.pn-hero__title,
.pn-hero h1 {
	font-family: var(--pn-font-display);
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-weight: 600;
	color: #FFFFFF;
	margin-block: 0 1.25rem;
	text-wrap: balance;
}

/* Brass rule above the H1, the signature mark of the site. */
.pn-hero__title::before,
.pn-hero h1::before {
	content: "";
	display: block;
	inline-size: 64px;
	block-size: 3px;
	background-color: var(--pn-brass);
	margin-block-end: 1.75rem;
}

.pn-hero__lead,
.pn-hero > p {
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	max-inline-size: 40rem;
	margin-block: 0 2rem;
}

.pn-hero a:not(.wp-block-button__link) {
	color: var(--pn-brass);
	text-decoration-color: rgba(199, 159, 63, 0.5);
}

/* --------------------------------------------------------------------- buttons */

.wp-block-button__link,
.wp-element-button {
	font-family: var(--pn-font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: var(--pn-radius);
	padding: 0.9rem 1.6rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* SPECIFICITY NOTE, do not simplify these selectors.
   pn-patterns.css styles buttons as `.pn-cta.pn-cta--primary > .wp-block-button__link`,
   which is three classes plus an element. A two class selector here loses to it no matter
   how late this file loads, and the button silently keeps GeneratePress's default blue.
   These selectors match that specificity, and win on order because pn-skin loads after. */

.pn-cta.pn-cta--primary > .wp-block-button__link,
.pn-cta.pn-cta--primary > .wp-element-button {
	background-color: var(--pn-brass);
	color: var(--pn-ink);
	border: 0;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.pn-cta.pn-cta--primary > .wp-block-button__link:hover,
.pn-cta.pn-cta--primary > .wp-block-button__link:focus {
	background-color: #D8B156;
	color: var(--pn-ink);
	transform: translateY(-1px);
	box-shadow: var(--pn-shadow-md);
}

.pn-cta.pn-cta--secondary > .wp-block-button__link,
.pn-cta.pn-cta--secondary > .wp-element-button {
	background-color: transparent;
	color: #FFFFFF;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
}

.pn-cta.pn-cta--secondary > .wp-block-button__link:hover,
.pn-cta.pn-cta--secondary > .wp-block-button__link:focus {
	background-color: rgba(255, 255, 255, 0.12);
	color: #FFFFFF;
	border-color: #FFFFFF;
	transform: translateY(-1px);
}

/* On a light section a white outlined button is invisible, so it takes ink instead.
   :has() lets one rule cover every light container rather than listing them. */
.pn-card .pn-cta.pn-cta--secondary > .wp-block-button__link,
.pn-fee-table .pn-cta.pn-cta--secondary > .wp-block-button__link,
.pn-contact .pn-cta.pn-cta--secondary > .wp-block-button__link,
.pn-faq .pn-cta.pn-cta--secondary > .wp-block-button__link {
	color: var(--pn-ink);
	border-color: rgba(10, 32, 54, 0.4);
}

.pn-card .pn-cta.pn-cta--secondary > .wp-block-button__link:hover,
.pn-fee-table .pn-cta.pn-cta--secondary > .wp-block-button__link:hover,
.pn-contact .pn-cta.pn-cta--secondary > .wp-block-button__link:hover,
.pn-faq .pn-cta.pn-cta--secondary > .wp-block-button__link:hover {
	background-color: rgba(10, 32, 54, 0.06);
	color: var(--pn-ink);
	border-color: var(--pn-ink);
}

/* Cards sit on a light surface, so a brass fill there needs the ink label to stay legible.
   Same rule, restated at matching specificity for the light containers. */
.pn-card .pn-cta.pn-cta--primary > .wp-block-button__link,
.pn-fee-table .pn-cta.pn-cta--primary > .wp-block-button__link,
.pn-contact .pn-cta.pn-cta--primary > .wp-block-button__link {
	background-color: var(--pn-ink);
	color: #FFFFFF;
}

.pn-card .pn-cta.pn-cta--primary > .wp-block-button__link:hover,
.pn-fee-table .pn-cta.pn-cta--primary > .wp-block-button__link:hover,
.pn-contact .pn-cta.pn-cta--primary > .wp-block-button__link:hover {
	background-color: var(--pn-ink-3);
	color: #FFFFFF;
}

.wp-block-buttons {
	gap: 0.75rem;
}

/* --------------------------------------------------------------------- trust strip */

.pn-trust {
	margin-inline: calc(50% - 50vw);
	padding-inline: max(1.5rem, calc(50vw - 600px));
	padding-block: 2rem;
	background-color: var(--pn-ink-2);
	border-block-end: 1px solid rgba(199, 159, 63, 0.28);
	color: #FFFFFF;
}

.pn-trust__list {
	gap: 2rem 2.5rem;
}

.pn-trust__list > li {
	flex: 1 1 14rem;
	padding-inline-start: 1rem;
	border-inline-start: 2px solid var(--pn-brass);
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.pn-trust__list > li > strong:first-child {
	display: block;
	margin-block-end: 0.35rem;
	font-family: var(--pn-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pn-brass);
}

/* --------------------------------------------------------------------- cards */

.pn-cards {
	gap: 1.5rem;
}

.pn-card {
	position: relative;
	background-color: #FFFFFF;
	border: var(--pn-rule);
	border-radius: var(--pn-radius);
	padding: 2rem 1.75rem 1.75rem;
	box-shadow: var(--pn-shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	overflow: hidden;
}

/* Brass cap rule. Scales in on hover, so the card feels responsive without moving text. */
.pn-card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 3px;
	background: linear-gradient(90deg, var(--pn-brass), var(--pn-brass-deep));
	transform: scaleX(0.18);
	transform-origin: left center;
	transition: transform 0.25s ease;
}

.pn-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--pn-shadow-lg);
	border-color: rgba(199, 159, 63, 0.4);
}

.pn-card:hover::before {
	transform: scaleX(1);
}

.pn-card__title,
.pn-card h3 {
	font-family: var(--pn-font-display);
	font-size: 1.3125rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--pn-ink);
	margin-block: 0 0.75rem;
}

.pn-card p {
	color: var(--pn-text-2);
	font-size: 0.9688rem;
	line-height: 1.6;
}

.pn-card__list {
	margin-block: 0.25rem;
	padding-inline-start: 0;
	list-style: none;
}

.pn-card__list > li {
	position: relative;
	padding-inline-start: 1.4rem;
	margin-block-end: 0.4rem;
	font-size: 0.9063rem;
	line-height: 1.5;
	color: var(--pn-text-2);
}

/* LIST ICONS.
   Two faults fixed here. The indent was doubled: the ul kept the browser's default
   padding-inline-start of about 40px AND the li added its own, so every tick sat far
   off the text. The ul padding is now zeroed.

   The tick itself was two rotated borders, which renders soft and slightly crooked at
   small sizes. It is now a real checkmark path in an inline SVG mask, so it is crisp at
   any size and any zoom, takes its colour from currentColor, and still costs no request. */

/* MEASURED: the leading gap was a 51px margin-inline-start applied to lists by the
   theme, not the browser's default padding. Zeroing padding alone left it in place.
   Every list component in this design gets both zeroed here, once, so the icon starts
   exactly where the paragraph above it starts. */
.pn-card__list,
.pn-callout__list,
.pn-trust__list,
.pn-chips__list,
.pn-stats__list,
.pn-steps__list,
.pn-authorities__list,
.pn-foot__list {
	margin-inline: 0;
	padding-inline: 0;
	list-style: none;
}

.pn-card__list,
.pn-callout__list {
	margin-block: 0.25rem 0;
}

.pn-card__list > li,
.pn-callout__list > li {
	position: relative;
	padding-inline-start: 1.75rem;
	margin-block-end: 0.5rem;
	font-size: 0.9063rem;
	line-height: 1.55;
	color: var(--pn-text-2);
}

.pn-card__list > li::marker,
.pn-callout__list > li::marker {
	content: "";
}

.pn-card__list > li::before,
.pn-callout__list > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.28em;
	inline-size: 1.05rem;
	block-size: 1.05rem;
	background-color: var(--pn-brass-deep);
	-webkit-mask: var(--pn-check) center / 1.05rem 1.05rem no-repeat;
	mask: var(--pn-check) center / 1.05rem 1.05rem no-repeat;
}

.pn-callout__list > li::before {
	background-color: var(--pn-navy);
}

/* The second pseudo element is no longer needed now the mask draws the whole mark. */
.pn-card__list > li::after,
.pn-callout__list > li::after {
	content: none;
}

.pn-card__fee {
	margin-block-start: auto;
	padding: 0.7rem 0.9rem;
	background-color: var(--pn-parchment-2);
	border-inline-start: 3px solid var(--pn-brass);
	border-radius: 0 var(--pn-radius) var(--pn-radius) 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--pn-text);
}

.pn-card__fee strong {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pn-brass-deep);
	margin-block-end: 0.15rem;
}

.pn-card a:not(.wp-block-button__link) {
	font-size: 0.9063rem;
	font-weight: 600;
	color: var(--pn-navy);
	text-decoration: none;
	border-block-end: 1px solid rgba(20, 69, 111, 0.3);
	padding-block-end: 1px;
}

.pn-card a:not(.wp-block-button__link):hover {
	border-block-end-color: var(--pn-navy);
}

/* --------------------------------------------------------------------- fee tables */

.pn-fee-table {
	background-color: #FFFFFF;
	border: var(--pn-rule);
	border-radius: var(--pn-radius);
	border-block-start: 3px solid var(--pn-brass);
	padding: 2rem 1.75rem;
	box-shadow: var(--pn-shadow-sm);
}

.pn-fee-table h2 {
	margin-block-start: 0;
	font-size: 1.5rem;
}

.entry-content .pn-fee-table table {
	border: 0;
	margin-block: 1.25rem;
}

.entry-content .pn-fee-table th {
	background-color: var(--pn-ink);
	color: #FFFFFF;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 0;
	padding: 0.8rem 1rem;
}

.entry-content .pn-fee-table td {
	border-block-end: 1px solid rgba(10, 32, 54, 0.08);
	padding: 0.85rem 1rem;
	font-size: 0.9375rem;
}

.entry-content .pn-fee-table tbody tr:nth-child(even) td {
	background-color: var(--pn-parchment);
}

.entry-content .pn-fee-table tbody tr:hover td {
	background-color: #FBF6EA;
}

/* The fee itself. Tabular figures are already set globally; this makes it read as data. */
.entry-content .pn-fee-table tr > td:last-child:nth-child(2) {
	font-weight: 600;
	color: var(--pn-ink);
	font-variant-numeric: tabular-nums lining-nums;
}

/* --------------------------------------------------------------------- comparison table */

.entry-content > .wp-block-table table {
	background-color: #FFFFFF;
	box-shadow: var(--pn-shadow-sm);
	border: var(--pn-rule);
	border-radius: var(--pn-radius);
	overflow: hidden;
}

.entry-content > .wp-block-table th {
	background-color: var(--pn-ink);
	color: #FFFFFF;
	border: 0;
}

/* The client's own column, emphasised. Third column of the public versus private table. */
.entry-content > .wp-block-table th:last-child {
	background-color: var(--pn-brass-deep);
	color: var(--pn-ink);
}

.entry-content > .wp-block-table td:last-child {
	background-color: rgba(199, 159, 63, 0.07);
	font-weight: 500;
}

/* --------------------------------------------------------------------- FAQ */

/* ===================================================================== */
/* ACCORDION FAQ                                                         */
/* Built on the core details block: no JavaScript, the answer is in the   */
/* DOM whether open or shut so crawlers still read it, and the client can */
/* still retype a question in the editor.                                 */
/* ===================================================================== */

.pn-faq__item {
	border: var(--pn-rule);
	border-radius: var(--pn-radius);
	background-color: #FFFFFF;
	margin-block-end: 0.75rem;
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pn-faq__item[open] {
	border-color: rgba(199, 159, 63, 0.55);
	box-shadow: var(--pn-shadow-md);
}

.pn-faq__item > summary {
	position: relative;
	display: block;
	cursor: pointer;
	list-style: none;
	padding: 1.1rem 3.25rem 1.1rem 1.4rem;
	padding-inline: 1.4rem 3.25rem;
	font-family: var(--pn-font-display);
	font-size: 1.0625rem;
	line-height: 1.4;
	font-weight: 600;
	color: var(--pn-ink);
	transition: background-color 0.15s ease;
}

/* Remove the native disclosure triangle in every engine. */
.pn-faq__item > summary::-webkit-details-marker { display: none; }
.pn-faq__item > summary::marker { content: ""; }

.pn-faq__item > summary:hover {
	background-color: var(--pn-parchment-2);
}

.pn-faq__item > summary:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 3px var(--pn-focus);
}

/* The plus/minus, drawn with two bars so it animates into a minus when open.
   inset-inline-end keeps it on the correct side when the page flips to Arabic. */
.pn-faq__item > summary::before,
.pn-faq__item > summary::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 1.35rem;
	inline-size: 0.85rem;
	block-size: 2px;
	background-color: var(--pn-brass-deep);
	transition: transform 0.22s ease;
}

.pn-faq__item > summary::before { transform: translateY(-50%); }
.pn-faq__item > summary::after  { transform: translateY(-50%) rotate(90deg); }
.pn-faq__item[open] > summary::after { transform: translateY(-50%) rotate(0deg); }

.pn-faq__item > summary + * {
	margin-block-start: 0;
}

.pn-faq__item p,
.pn-faq__item ul,
.pn-faq__item ol {
	padding-inline: 1.4rem;
	margin-block: 0 1.1rem;
	font-size: 0.9688rem;
	line-height: 1.7;
	color: var(--pn-text-2);
	max-inline-size: none;
}

.pn-faq__item > summary + p {
	padding-block-start: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.pn-faq__item > summary::before,
	.pn-faq__item > summary::after { transition: none; }
}

/* ===================================================================== */
/* GOOGLE REVIEWS                                                        */
/* ===================================================================== */

.pn-reviews {
	position: relative;
	background-color: #FFFFFF;
	border: var(--pn-rule);
	border-radius: var(--pn-radius);
	box-shadow: var(--pn-shadow-sm);
	padding: 1.75rem 1.75rem 1.5rem;
}

/* ---- widget header: Google mark, score, stars, count, write a review ---- */

.pn-reviews__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding-block-end: 1.25rem;
	border-block-end: 1px solid rgba(10, 32, 54, 0.09);
	margin-block-end: 1.5rem;
}

.pn-reviews__logo {
	flex: 0 0 auto;
}

.pn-reviews__summary {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.pn-reviews__brand {
	margin: 0 0 0.15rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pn-text-muted);
}

.pn-reviews__rating {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin: 0;
}

.pn-reviews__score {
	font-family: var(--pn-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	color: var(--pn-ink);
	font-variant-numeric: tabular-nums lining-nums;
}

.pn-reviews__stars {
	display: inline-flex;
	gap: 0.05rem;
	font-size: 1.05rem;
	line-height: 1;
}

.pn-star.is-full { color: #E7A33E; }
.pn-star.is-empty { color: rgba(10, 32, 54, 0.18); }

/* A half star: the gold half is clipped to the start edge, which flips in Arabic. */
.pn-star.is-half {
	position: relative;
	color: rgba(10, 32, 54, 0.18);
}

.pn-star.is-half::before {
	content: "\2605";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 50%;
	overflow: hidden;
	color: #E7A33E;
}

.pn-reviews__count {
	font-size: 0.875rem;
	color: var(--pn-text-2);
}

.pn-reviews__write {
	flex: 0 0 auto;
	padding: 0.55rem 1.1rem;
	border: 1px solid rgba(10, 32, 54, 0.25);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pn-ink);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pn-reviews__write:hover {
	background-color: var(--pn-parchment-2);
	border-color: var(--pn-brass);
	color: var(--pn-ink);
}

/* ---- the carousel ---- */

/* scroll-snap does the sliding. The arrows are progressive enhancement: with JS off the
   track is still a normal horizontal scroller, and on a phone it is a native swipe. */
.pn-reviews__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(min(100%, 19rem), 1fr);
	gap: 1.25rem;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
	scroll-behavior: smooth;
	padding-block-end: 0.25rem;

	/* Hide the native scrollbar. The arrows and the swipe are the interface, and a raw
	   scrollbar under the cards looked unfinished. Scrolling still works by wheel,
	   trackpad, touch and keyboard, so nothing is taken away. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.pn-reviews__track::-webkit-scrollbar {
	display: none;
}

.pn-reviews__track > * {
	scroll-snap-align: start;
}

/* The track is focusable so keyboard users can scroll it, which is required once the
   scrollbar is hidden. */
.pn-reviews__track:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--pn-focus);
	border-radius: var(--pn-radius);
}

.pn-reviews__nav {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-block-start: 1rem;
}

.pn-reviews__arrow {
	inline-size: 2.5rem;
	block-size: 2.5rem;
	display: grid;
	place-items: center;
	border: 1px solid rgba(10, 32, 54, 0.22);
	border-radius: 50%;
	background-color: #FFFFFF;
	color: var(--pn-ink);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.pn-reviews__arrow:hover:not(:disabled) {
	background-color: var(--pn-ink);
	border-color: var(--pn-ink);
	color: #FFFFFF;
}

.pn-reviews__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* The arrow glyphs are directional, so mirror them rather than swapping the characters. */
[dir="rtl"] .pn-reviews__arrow > span {
	display: inline-block;
	transform: scaleX(-1);
}

@media (prefers-reduced-motion: reduce) {
	.pn-reviews__track { scroll-behavior: auto; }
}

/* The lead paragraph and heading span the whole grid rather than becoming a column. */
.pn-reviews > :is(h2, h3, p), .pn-reviews > .wp-block-group__inner-container > :is(h2, h3, p) {
	margin-block: 0 0.5rem;
	max-inline-size: none;
}

.pn-reviews > h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	margin-block-end: 0.25rem;
}

.pn-review {
	background-color: var(--pn-parchment);
	border: var(--pn-rule);
	border-radius: var(--pn-radius);
	padding: 1.5rem 1.4rem 1.25rem;
	box-shadow: var(--pn-shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	block-size: 100%;
}

.pn-review__stars {
	display: flex;
	gap: 0.1rem;
	font-size: 1rem;
	line-height: 1;
	color: #E7A33E;
}

.pn-review__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--pn-text-2);
	flex: 1 1 auto;
}

.pn-review__meta {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding-block-start: 0.75rem;
	border-block-start: 1px solid rgba(10, 32, 54, 0.08);
}

.pn-review__name {
	font-weight: 600;
	font-size: 0.9063rem;
	color: var(--pn-ink);
}

.pn-review__source {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pn-text-muted);
}

/* ===================================================================== */
/* MEDIA SECTIONS, image beside text                                     */
/* ===================================================================== */

/* Exactly two columns: the figure, and a body div holding everything else.
   The converter emits that structure, because a flat grid makes one column per child
   and an image plus a heading plus two paragraphs became four columns. */
.pn-media {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	align-items: center;
}

.pn-media > *, .pn-media > .wp-block-group__inner-container > * {
	margin-block: 0;
	max-inline-size: none;
}

.pn-media__body > * + * {
	margin-block-start: 1rem;
}

.pn-media__body > h3:first-child,
.pn-media__body > h2:first-child {
	margin-block-start: 0;
}

.pn-media h3 {
	font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
	color: var(--pn-ink);
	margin-block: 0 0.25rem;
}

.pn-media h3::before {
	content: "";
	display: block;
	inline-size: 44px;
	block-size: 3px;
	background-color: var(--pn-brass);
	margin-block-end: 1.1rem;
}

.pn-media p {
	max-inline-size: none;
	color: var(--pn-text-2);
}

.pn-media .wp-block-image,
.pn-media figure {
	margin: 0;
}

.pn-media img {
	inline-size: 100%;
	block-size: 100%;
	max-block-size: 26rem;
	object-fit: cover;
	border-radius: var(--pn-radius);
	box-shadow: var(--pn-shadow-md);
}

/* Alternate the image to the other side on every second media section, so a long
   page does not march down one edge. */
.pn-media--flip > :is(figure, .wp-block-image), .pn-media--flip > .wp-block-group__inner-container > :is(figure, .wp-block-image) {
	order: 2;
}

/* A full bleed photographic band with the navy laid over it, used to break the page. */
.pn-imageband {
	position: relative;
	margin-inline: calc(50% - 50vw);
	padding-inline: max(1.5rem, calc(50vw - 600px));
	padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
	color: #FFFFFF;
	overflow: hidden;
	background-color: var(--pn-ink);
}

.pn-imageband > :is(figure, .wp-block-image), .pn-imageband > .wp-block-group__inner-container > :is(figure, .wp-block-image) {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.pn-imageband img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;

	/* The hero photograph is a night shot: measured mean luminance 44 out of 255.
	   Under any navy overlay dark enough for white text, it read as flat colour and
	   the skyline was invisible. Lifting the image rather than thinning the overlay
	   keeps the text contrast intact while making the photograph actually visible.
	   Measure before changing this: a bright daytime image needs no filter at all. */
	filter: brightness(1.75) contrast(1.03) saturate(1.05);
}

/* A daytime image does not need lifting, so opt out per section where needed. */
.pn-imageband--bright img {
	filter: none;
}

/* The overlay. Strong enough that white text clears AA over any photograph,
   and angled so the text side is darkest. */
.pn-imageband::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(100deg, rgba(10, 32, 54, 0.92) 0%, rgba(10, 32, 54, 0.78) 36%,
			rgba(10, 32, 54, 0.38) 70%, rgba(10, 32, 54, 0.18) 100%);
}

.pn-imageband > *:not(figure):not(.wp-block-image), .pn-imageband > .wp-block-group__inner-container > *:not(figure):not(.wp-block-image) {
	position: relative;
	z-index: 2;
	max-inline-size: 52rem;
}

/* One exception to the rule above, and it matters. The block editor wraps a group's
   children in `.wp-block-group__inner-container`, and the band's backdrop photograph is
   inside that wrapper. Making the wrapper a positioning context makes it the figure's
   containing block, so `inset: 0` sizes the photograph to the content column rather than
   to the band: measured 1200px of photograph inside a 1920px band, with flat navy bars
   360px wide down each side. Static here, and the figure resolves against the band.

   Nothing loses its stacking: the wrapper's own children still carry position: relative
   and z-index: 2 from the selector above, and the band is not a stacking context, so
   they still paint above the ::before overlay at z-index 1.

   The extra :not() clauses are specificity, not filtering. They match the rule above at
   (0,3,1) against its (0,2,1) so this cannot be undone by source order. */
.pn-imageband > .wp-block-group__inner-container:not(figure):not(.wp-block-image) {
	position: static;
}

.pn-imageband h2 {
	color: #FFFFFF;
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	margin-block: 0 0.75rem;
}

/* Region default, and it stops at the wizard. The card is the one light surface inside
   a dark band, so a rule that paints every descendant paragraph white would paint the
   card's own help text and labels white on white. `:not(.pn-wizard *)` is the fence.
   This is the same class of fault as the footer buttons: a region rule at (0,1,1)
   quietly outranking a component rule at (0,1,0). */
.pn-imageband p:not(.pn-wizard *) {
	color: rgba(255, 255, 255, 0.9);
	max-inline-size: 52rem;
}

/* ===================================================================== */
/* OFFICE / WHERE TO FIND US                                             */
/* ===================================================================== */

.pn-office {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	background-color: #FFFFFF;
	border: var(--pn-rule);
	border-radius: var(--pn-radius);
	overflow: hidden;
	box-shadow: var(--pn-shadow-md);
}

.pn-office > *, .pn-office > .wp-block-group__inner-container > * {
	margin-block: 0;
	max-inline-size: none;
}

/* The photograph fills its half edge to edge, no padding, no radius of its own. */
.pn-office > :is(figure, .wp-block-image), .pn-office > .wp-block-group__inner-container > :is(figure, .wp-block-image) {
	margin: 0;
	block-size: 100%;
	min-block-size: 18rem;
}

.pn-office img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}

/* Everything that is not the image sits in one padded column, emitted by the converter
   as .pn-office__body. */
.pn-office__body {
	padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
	align-self: center;
}

.pn-office__body > * + * {
	margin-block-start: 1rem;
}

.pn-office__body > *:first-child {
	margin-block-start: 0;
}

.pn-office h2,
.pn-office h3 {
	margin-block: 0 0.75rem;
	font-size: 1.375rem;
	color: var(--pn-ink);
}

.pn-office h3::before {
	content: "";
	display: block;
	inline-size: 44px;
	block-size: 3px;
	background-color: var(--pn-brass);
	margin-block-end: 1rem;
}

.pn-office p {
	color: var(--pn-text-2);
	font-size: 0.9688rem;
	margin-block-end: 1.1rem;
}

.entry-content .pn-office table {
	inline-size: 100%;
	margin-block: 0 1.25rem;
	border: 1px solid rgba(10, 32, 54, 0.1);
	border-radius: var(--pn-radius);
	overflow: hidden;
}

.entry-content .pn-office th {
	background-color: var(--pn-ink);
	color: #FFFFFF;
	border: 0;
	font-size: 0.6875rem;
	padding: 0.7rem 1rem;
}

.entry-content .pn-office td {
	padding: 0.7rem 1rem;
	font-size: 0.9063rem;
	border-block-end: 1px solid rgba(10, 32, 54, 0.07);
}

.entry-content .pn-office tbody tr:last-child td {
	border-block-end: 0;
}

.entry-content .pn-office tbody tr:nth-child(even) td {
	background-color: var(--pn-parchment);
}

/* ===================================================================== */

/* Each question is a ruled row rather than a run of headings and paragraphs, so a long
   FAQ scans as a list instead of a wall. The question carries a brass marker on the
   start edge, which flips correctly in Arabic. */
/* The container is now just a stack: each row is its own card, so a panel around
   them would be a box inside a box. */
.pn-faq {
	background-color: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
}

.pn-faq > h2 {
	margin-block: 0 1.25rem;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	color: var(--pn-ink);
}

.pn-faq > p {
	max-inline-size: none;
	margin-block-end: 1.5rem;
	color: var(--pn-text-2);
}

.pn-faq h3 {
	position: relative;
	font-family: var(--pn-font-display);
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--pn-ink);
	margin-block: 0 0.55rem;
	padding-block-start: 1.5rem;
	padding-inline-start: 1.6rem;
	border-block-start: 1px solid rgba(10, 32, 54, 0.09);
}

.pn-faq h2 + h3 {
	border-block-start: 0;
	padding-block-start: 0.5rem;
}

/* A drawn chevron, not an icon font and not a bullet. */
.pn-faq h3::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.15rem;
	inset-block-start: 1.85rem;
	inline-size: 0.4rem;
	block-size: 0.4rem;
	border-inline-end: 2px solid var(--pn-brass-deep);
	border-block-end: 2px solid var(--pn-brass-deep);
	transform: rotate(-45deg);
}

.pn-faq h2 + h3::before {
	inset-block-start: 0.85rem;
}

/* The panel already constrains the line length, so an extra 68ch cap inside it just
   left a ragged empty half on the right. The measure here is set so the text fills
   the panel while still breaking at a readable line length. */
.pn-faq p {
	color: var(--pn-text-2);
	font-size: 0.9688rem;
	line-height: 1.65;
	padding-inline-start: 1.6rem;
	margin-block-end: 1.25rem;
	max-inline-size: none;
}

/* Same reasoning inside the tinted and dark bands: the band supplies the column, so
   the paragraph should fill it rather than stop two thirds of the way across. */
.pn-band p,
.pn-band li,
.pn-callout p {
	max-inline-size: none;
}

/* --------------------------------------------------------------------- authorities */

/* The government departments that accept these documents. A dense, quiet grid: it is a
   credibility signal, so it should read as a register rather than a set of badges. */
.pn-authorities__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
	gap: 1px;
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: rgba(199, 159, 63, 0.28);
	border: 1px solid rgba(199, 159, 63, 0.28);
	border-radius: var(--pn-radius);
	overflow: hidden;
}

.pn-authorities__list > li {
	background-color: var(--pn-ink);
	padding: 0.9rem 1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.86);
	text-align: center;
}

.pn-authorities__list > li::marker {
	content: "";
}

/* --------------------------------------------------------------------- contact panel */

.pn-contact {
	background-color: var(--pn-parchment-2);
	border: var(--pn-rule);
	border-inline-start: 3px solid var(--pn-brass);
	border-radius: 0 var(--pn-radius) var(--pn-radius) 0;
	padding: 2rem 1.75rem;
}

.pn-contact h2,
.pn-contact h3 {
	margin-block-start: 0;
	font-size: 1.3125rem;
	color: var(--pn-ink);
}

.entry-content .pn-contact table {
	background-color: #FFFFFF;
	border-radius: var(--pn-radius);
	overflow: hidden;
	box-shadow: var(--pn-shadow-sm);
}

.entry-content .pn-contact th {
	background-color: var(--pn-ink);
	color: #FFFFFF;
	border: 0;
}

/* --------------------------------------------------------------------- CTA band */

.pn-cta-band {
	margin-inline: calc(50% - 50vw);
	padding-inline: max(1.5rem, calc(50vw - 600px));
	padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
	background-color: var(--pn-ink);
	background-image:
		radial-gradient(90% 120% at 100% 0%, rgba(199, 159, 63, 0.18) 0%, transparent 60%),
		linear-gradient(120deg, var(--pn-ink) 0%, var(--pn-ink-3) 100%);
	color: #FFFFFF;
	text-align: start;
}

.pn-cta-band h2 {
	font-family: var(--pn-font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	line-height: 1.15;
	color: #FFFFFF;
	margin-block: 0 0.85rem;
	max-inline-size: 30rem;
}

.pn-cta-band p {
	color: rgba(255, 255, 255, 0.86);
	max-inline-size: 38rem;
	margin-block-end: 1.75rem;
}

/* ===================================================================== */
/* LONG FORM HOME PAGE SECTIONS                                          */
/* ===================================================================== */

/* --------------------------------------------------------------------- tinted band */

/* A full bleed section on the alternate surface, used to break a long page into
   readable movements. Alternating surfaces is what stops a 25 section page reading
   as an endless scroll. */
.pn-band {
	margin-inline: calc(50% - 50vw);
	padding-inline: max(1.5rem, calc(50vw - 600px));
	padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
	background-color: var(--pn-parchment-2);
	border-block: 1px solid rgba(10, 32, 54, 0.07);
}

.pn-band > *, .pn-band > .wp-block-group__inner-container > * {
	max-inline-size: 1120px;
	margin-inline: auto;
}

.pn-band h2:first-child {
	margin-block-start: 0;
}

.pn-band--dark {
	background-color: var(--pn-ink);
	background-image: linear-gradient(150deg, var(--pn-ink) 0%, var(--pn-ink-3) 100%);
	border-block-color: rgba(199, 159, 63, 0.25);
	color: #FFFFFF;
}

/* The block class is repeated on purpose. `.pn-band h2` further down this file sets the
   ink heading colour for the light bands, and at (0,1,1) it is exactly as specific as
   `.pn-band--dark h2`, so source order decided the winner and the dark band rendered ink
   headings on ink. A modifier has to outrank the block it modifies, so it carries both
   classes and lands at (0,2,1). No !important: that would only move the argument up a
   level, and the next rule that needs to win would need one too. */
.pn-band--dark.pn-band h2,
.pn-band--dark.pn-band h3,
.pn-band--dark.pn-band h4 {
	color: #FFFFFF;
}

.pn-band--dark.pn-band p,
.pn-band--dark.pn-band li {
	color: rgba(255, 255, 255, 0.86);
}

.pn-band--dark.pn-band strong {
	color: #FFFFFF;
}

/* --------------------------------------------------------------------- stats */

.pn-stats {
	margin-inline: calc(50% - 50vw);
	padding-inline: max(1.5rem, calc(50vw - 600px));
	padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	background-color: var(--pn-ink-2);
	color: #FFFFFF;
	border-block: 1px solid rgba(199, 159, 63, 0.25);
}

.pn-stats__list {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 3rem;
	list-style: none;
	margin: 0;
	padding: 0;
	max-inline-size: 1120px;
	margin-inline: auto;
}

.pn-stats__list > li {
	flex: 1 1 12rem;
	min-inline-size: 0;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.78);
}

.pn-stats__list > li::marker {
	content: "";
}

/* The figure is the bold run at the start of each item. */
.pn-stats__list > li > strong:first-child {
	display: block;
	font-family: var(--pn-font-display);
	font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--pn-brass);
	margin-block-end: 0.45rem;
	font-variant-numeric: tabular-nums lining-nums;
}

/* --------------------------------------------------------------------- steps */

.pn-steps__list {
	list-style: none;
	counter-reset: pn-step;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.pn-steps__list > li {
	counter-increment: pn-step;
	position: relative;
	background-color: #FFFFFF;
	border: var(--pn-rule);
	border-radius: var(--pn-radius);
	padding: 3.25rem 1.5rem 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--pn-text-2);
	box-shadow: var(--pn-shadow-sm);
}

/* The numeral, set as a real counter so renumbering is automatic if a step is added. */
.pn-steps__list > li::before {
	content: counter(pn-step);
	position: absolute;
	inset-block-start: 1.25rem;
	inset-inline-start: 1.5rem;
	inline-size: 2rem;
	block-size: 2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background-color: var(--pn-ink);
	color: var(--pn-brass);
	font-family: var(--pn-font-display);
	font-size: 1rem;
	font-weight: 600;
}

.pn-steps__list > li > strong:first-child {
	display: block;
	font-family: var(--pn-font-display);
	font-size: 1.0625rem;
	color: var(--pn-ink);
	margin-block-end: 0.3rem;
}

/* --------------------------------------------------------------------- split */

.pn-split {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	align-items: start;
}

.pn-split > * {
	margin-block: 0;
	max-inline-size: none;
}

/* --------------------------------------------------------------------- chips */

.pn-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Pills, redesigned. The old version was a thin outline on white, which disappeared
   against the page. These sit on the sand surface with a brass marker, read as a set,
   and lift on hover so they feel like the locations they are rather than decoration. */
.pn-chips__list {
	gap: 0.6rem;
}

.pn-chips__list > li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem 0.5rem 0.85rem;
	padding-inline: 0.85rem 1rem;
	background-color: var(--pn-parchment-2);
	border: 1px solid rgba(10, 32, 54, 0.08);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--pn-ink);
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* A small brass pin, drawn in CSS. Marks each item as a place without an icon font. */
.pn-chips__list > li::before {
	content: "";
	inline-size: 0.4rem;
	block-size: 0.4rem;
	border-radius: 50%;
	background-color: var(--pn-brass-deep);
	flex: 0 0 auto;
}

.pn-chips__list > li:hover {
	background-color: #FFFFFF;
	border-color: var(--pn-brass);
	transform: translateY(-1px);
}

.pn-chips__list > li::marker {
	content: "";
}

.pn-band--dark .pn-chips__list > li {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(199, 159, 63, 0.35);
	color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------- quotes */

.pn-quotes {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.pn-quote {
	margin: 0;
	background-color: #FFFFFF;
	border: var(--pn-rule);
	border-radius: var(--pn-radius);
	border-block-start: 3px solid var(--pn-brass);
	padding: 1.75rem 1.5rem 1.25rem;
	box-shadow: var(--pn-shadow-sm);
}

.pn-quote p {
	font-size: 0.9688rem;
	line-height: 1.65;
	color: var(--pn-text-2);
	margin-block: 0 0.9rem;
}

.pn-quote__source {
	font-family: var(--pn-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pn-brass-deep);
	margin-block: 0;
}

/* --------------------------------------------------------------------- callout */

.pn-callout {
	background-color: var(--pn-surface-tint);
	border-inline-start: 4px solid var(--pn-navy);
	border-radius: 0 var(--pn-radius) var(--pn-radius) 0;
	padding: 1.5rem 1.5rem 1.25rem;
}

.pn-callout h2,
.pn-callout h3 {
	margin-block-start: 0;
	font-size: 1.125rem;
	color: var(--pn-ink);
}

.pn-callout__list {
	list-style: none;
	margin-block: 0.5rem 0;
	padding-inline-start: 0;
}

.pn-callout__list > li {
	position: relative;
	padding-inline-start: 1.5rem;
	margin-block-end: 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--pn-text-2);
}

.pn-callout__list > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.45em;
	inline-size: 0.34rem;
	block-size: 0.62rem;
	border-inline-end: 2px solid var(--pn-navy);
	border-block-end: 2px solid var(--pn-navy);
	transform: rotate(45deg);
}

/* --------------------------------------------------------------------- compact cards */

.pn-cards--compact .pn-card {
	padding: 1.5rem 1.25rem;
}

.pn-cards--compact .pn-card__title,
.pn-cards--compact .pn-card h3 {
	font-size: 1.125rem;
}

.pn-cards--compact .pn-card p {
	font-size: 0.9063rem;
}

/* --------------------------------------------------------------------- editorial markers */

/* The CONFIRM block. Loud on purpose: it must be impossible to publish past one by accident. */
.pn-confirm {
	background-color: #FBEAEA !important;
	color: #7A1414 !important;
	border-inline-start: 4px solid #9B1C1C;
	border-radius: 0 var(--pn-radius) var(--pn-radius) 0;
	padding: 0.9rem 1.1rem !important;
	font-size: 0.875rem;
	line-height: 1.5;
}

.pn-confirm::before {
	content: "UNRESOLVED, DO NOT PUBLISH";
	display: block;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin-block-end: 0.35rem;
}

.pn-image-placeholder {
	background-color: var(--pn-parchment-2);
	border: 1px dashed rgba(10, 32, 54, 0.3);
	border-radius: var(--pn-radius);
	padding: 1.75rem;
	text-align: center;
	color: var(--pn-text-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.pn-image-placeholder::before {
	content: "PHOTOGRAPH TO BE SUPPLIED BY THE CLIENT";
	display: block;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--pn-brass-deep);
	margin-block-end: 0.5rem;
}

/* --------------------------------------------------------------------- footer */

.site-footer,
.site-footer .footer-widgets,
.site-footer .site-info {
	background-color: var(--pn-ink);
	color: rgba(255, 255, 255, 0.78);
}

.site-footer {
	border-block-start: 3px solid var(--pn-brass);
}

.site-footer h2,
.site-footer .widget-title {
	color: #FFFFFF;
	font-family: var(--pn-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

:where(.site-footer) a {
	color: var(--pn-brass);
}

:where(.site-footer) a:hover {
	color: #E0BE6E;
}

/* --------------------------------------------------------------------- mobile */

@media (max-width: 768px) {
	.pn-hero,
	.pn-cta-band,
	.pn-trust {
		padding-inline: 1.25rem;
	}

	.pn-hero::after {
		inline-size: 45%;
		opacity: 0.6;
	}

	.pn-card,
	.pn-fee-table,
	.pn-faq,
	.pn-contact {
		padding: 1.5rem 1.25rem;
	}

	.pn-trust__list {
		gap: 1.25rem;
	}

	.entry-content > h2 {
		margin-block-start: 2.75rem;
	}

	/* Buttons go full width so they are a comfortable touch target and do not
	   wrap into an awkward ragged row. */
	.pn-hero__actions .wp-block-button,
	.pn-cta-band .wp-block-button {
		inline-size: 100%;
	}

	.pn-hero__actions .wp-block-button__link,
	.pn-cta-band .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* --------------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
	.pn-card,
	.pn-card::before,
	.wp-block-button__link,
	.main-navigation .main-nav ul li a::after {
		transition: none;
	}

	.pn-card:hover {
		transform: none;
	}
}

/* =====================================================================
   BLOG, SINGLE POST, ARCHIVES AND SEARCH
   =====================================================================

   Everything above this line styles the landing pages, which are built from
   full bleed component sections. Posts are a different problem: they are one
   column of running prose, and the typography rules that suit a section
   grid are wrong for an article.

   Two decisions worth recording, because they look like contradictions of
   the rules set earlier in this file.

   1. Article body text DOES get a measure. The landing pages deliberately
      have `max-inline-size: none` on every paragraph, because a 78ch cap
      inside a 1120px container leaves paragraphs stopping two thirds of the
      way across, which reads as a broken layout. The fix there was to
      remove the cap. The fix HERE is different: narrow the COLUMN instead,
      so the text fills the box it sits in. Same principle, opposite lever.
      Never reintroduce a measure without also narrowing its container.

   2. Archives use CSS grid on `.site-main` rather than a wrapper element.
      GeneratePress prints `article` elements as direct siblings there with
      no container of its own, and adding one would mean overriding a
      template file. Grid on the parent needs neither.
   ===================================================================== */

/* --------------------------------------------------------------- archives */

/* The blog, category, tag, date and author archives, and search results.
   `pn-archive` is added to <body> by pn_body_classes() in functions.php. */

.pn-archive .site-main {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pn-space-6, 2rem);
	align-items: stretch;
}

@media (min-width: 700px) {
	.pn-archive .site-main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1040px) {
	.pn-archive .site-main {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* The page header and the pagination are not cards. They span the grid. */
.pn-archive .site-main > .page-header,
.pn-archive .site-main > .paging-navigation,
.pn-archive .site-main > .no-results,
.pn-archive .site-main > .pn-noresults,
.pn-archive .site-main > .pn-archive__intro {
	grid-column: 1 / -1;
}

/* --------------------------------------------------------- the post card */

.pn-archive .site-main > article {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--pn-surface, #fff);
	border: 1px solid var(--pn-line, rgba(10, 32, 54, 0.12));
	border-radius: var(--pn-radius, 4px);
	box-shadow: 0 1px 2px rgba(10, 32, 54, 0.04);
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.pn-archive .site-main > article:hover {
	transform: translateY(-2px);
	border-color: rgba(199, 159, 63, 0.55);
	box-shadow: 0 10px 28px rgba(10, 32, 54, 0.10);
}

/* GeneratePress spaces a STACKED post list by putting padding-bottom on every
   post except the last, via
   `.one-container.blog .post:not(:last-child):not(.is-loop-template-item)`.
   This grid spaces its cards with `gap` instead, so that padding is not just
   redundant, it is harmful: it took 40px off the inside of every card except
   the last one in the list, which is why two cards in a row of three had their
   footer sitting 40px higher than the third.

   The selector below is written to the same specificity as theirs on purpose,
   not higher. pn-skin.css loads after the theme stylesheet, so a tie is enough,
   and `!important` would have been a blunt instrument that also broke the
   padding this file sets on .inside-article. */
.pn-archive.one-container .site-main > article:not(:last-child):not(.is-loop-template-item) {
	padding-block-end: 0;
}

/* The brass rule along the top edge, matching .pn-card on the landing pages. */
.pn-archive .site-main > article::before {
	content: "";
	display: block;
	block-size: 3px;
	inline-size: 56px;
	margin-inline-start: var(--pn-space-5, 1.5rem);
	margin-block-start: var(--pn-space-5, 1.5rem);
	background: var(--pn-brass, #C79F3F);
}

/* An article WITH a featured image puts the image above that rule instead. */
.pn-archive .site-main > article:has(.post-image)::before {
	display: none;
}

/* GeneratePress prints .post-image INSIDE .inside-article, after the title, so it
   inherits the card padding and arrives in the wrong place. `order` fixes the
   sequence and the negative margins undo the padding, which is what gives the
   photograph the full width of the card. Measured against the padding token so
   the two cannot drift apart. */
.pn-archive .post-image {
	order: -1;
	margin-block: calc(var(--pn-space-5, 1.5rem) * -1) 0;
	margin-inline: calc(var(--pn-space-5, 1.5rem) * -1);
}

.pn-archive .post-image img {
	display: block;
	inline-size: 100%;
	block-size: 200px;
	object-fit: cover;
}

.pn-archive .inside-article {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--pn-space-3, 0.75rem);
	padding: var(--pn-space-5, 1.5rem);
	background: transparent;
	box-shadow: none;
}

.pn-archive .entry-header {
	display: block;
	margin: 0;
}

.pn-archive .entry-title {
	margin: 0;
	font-family: var(--pn-font-display, Georgia, serif);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
	line-height: 1.3;
}

.pn-archive .entry-title a {
	color: var(--pn-navy, #0A2036);
	text-decoration: none;
}

.pn-archive .entry-title a:hover,
.pn-archive .entry-title a:focus-visible {
	color: var(--pn-brass-ink, #8A6A1E);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------- meta row */

.pn-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pn-muted, #5A6B7C);
}

.pn-meta li {
	margin: 0;
	padding: 0;
}

.pn-meta a {
	color: inherit;
	text-decoration: none;
}

.pn-meta a:hover,
.pn-meta a:focus-visible {
	color: var(--pn-brass-ink, #8A6A1E);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* GeneratePress prints its own entry-meta. Ours replaces it, so hide theirs
   on cards rather than fighting two meta rows for the same space. */
.pn-archive .entry-meta,
.pn-archive .cat-links,
.pn-archive .tags-links,
.pn-archive .comments-link {
	display: none;
}

/* ------------------------------------------------------------ the excerpt */

.pn-archive .entry-summary,
.pn-archive .entry-content {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--pn-body, #34475A);
}

.pn-archive .entry-summary p:last-child,
.pn-archive .entry-content p:last-child {
	margin-block-end: 0;
}

/* --------------------------------------------------------- the read link */

/* The meta row and the read link are one group, pushed to the foot of the card
   by a single auto margin on the first of them. Putting the auto margin on the
   read link instead leaves the meta row floating, which is what made three cards
   in a row finish at three different heights. */
.pn-archive .pn-meta {
	margin-block-start: auto;
	padding-block-start: var(--pn-space-2, 0.5rem);
}

.pn-archive .read-more,
.pn-archive .entry-summary .more-link {
	align-self: start;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--pn-brass-ink, #8A6A1E);
	text-decoration: none;
}

.pn-archive .read-more::after,
.pn-archive .entry-summary .more-link::after {
	content: " \2192";
	transition: margin-inline-start 140ms ease;
	margin-inline-start: 0.25rem;
	display: inline-block;
}

.pn-archive .read-more:hover::after,
.pn-archive .site-main > article:hover .read-more::after {
	margin-inline-start: 0.5rem;
}

.pn-archive .read-more:hover,
.pn-archive .read-more:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------- archive heading */

.pn-archive .page-header {
	margin: 0 0 var(--pn-space-4, 1rem);
	padding: 0;
	background: transparent;
	border: 0;
}

.pn-archive .page-title,
.pn-archive .page-header h1 {
	margin: 0;
	font-family: var(--pn-font-display, Georgia, serif);
	font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
	line-height: 1.15;
	color: var(--pn-navy, #0A2036);
}

.pn-archive .page-header .taxonomy-description,
.pn-archive .archive-description {
	margin-block-start: var(--pn-space-3, 0.75rem);
	max-inline-size: 62ch;
	color: var(--pn-body, #34475A);
}

/* ------------------------------------------------------------ pagination */

.paging-navigation {
	margin-block-start: var(--pn-space-7, 2.5rem);
}

.paging-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
}

.paging-navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	padding-inline: 0.75rem;
	font-weight: 700;
	color: var(--pn-navy, #0A2036);
	text-decoration: none;
	background: var(--pn-surface, #fff);
	border: 1px solid var(--pn-line, rgba(10, 32, 54, 0.14));
	border-radius: var(--pn-radius, 4px);
}

.paging-navigation .page-numbers:hover,
.paging-navigation .page-numbers:focus-visible {
	border-color: var(--pn-brass, #C79F3F);
	color: var(--pn-brass-ink, #8A6A1E);
}

.paging-navigation .page-numbers.current {
	background: var(--pn-navy, #0A2036);
	border-color: var(--pn-navy, #0A2036);
	color: #fff;
}

/* ===================================================================
   SINGLE POST
   =================================================================== */

/* The measure. See note 1 at the top of this section: the COLUMN is narrow,
   so the text fills it. This is the opposite of putting a 78ch cap inside a
   1120px box, which is what made the landing page paragraphs look broken. */

.single-post .site-content .content-area {
	max-inline-size: 800px;
	margin-inline: auto;
}

.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > blockquote {
	max-inline-size: none;
}

.single-post .entry-content {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--pn-body, #34475A);
}

.single-post .entry-content > * + * {
	margin-block-start: var(--pn-space-5, 1.5rem);
}

.single-post .entry-title {
	font-family: var(--pn-font-display, Georgia, serif);
	font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
	line-height: 1.14;
	color: var(--pn-navy, #0A2036);
	margin-block-end: var(--pn-space-4, 1rem);
}

.single-post .entry-content h2 {
	margin-block-start: var(--pn-space-8, 3rem);
	font-family: var(--pn-font-display, Georgia, serif);
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	line-height: 1.25;
	color: var(--pn-navy, #0A2036);
}

.single-post .entry-content h3 {
	margin-block-start: var(--pn-space-6, 2rem);
	font-family: var(--pn-font-display, Georgia, serif);
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--pn-navy, #0A2036);
}

/* Lead paragraph. The first paragraph after the header carries the summary. */
.single-post .entry-content > p:first-of-type {
	font-size: 1.1875rem;
	line-height: 1.65;
	color: var(--pn-navy, #0A2036);
}

/* Prose links only. Written without the `:not([class])` guard originally, so it also
   painted and underlined every component button injected into the article: the mid
   article call to action's two buttons came out brass on navy with an underline through
   them. A button is not a prose link. */
.single-post .entry-content a:not([class]) {
	color: var(--pn-brass-ink, #8A6A1E);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.single-post .entry-content a:not([class]):hover,
.single-post .entry-content a:not([class]):focus-visible {
	text-decoration-thickness: 2px;
}

.single-post .entry-content blockquote {
	margin-inline: 0;
	padding-inline-start: var(--pn-space-5, 1.5rem);
	border-inline-start: 3px solid var(--pn-brass, #C79F3F);
	font-size: 1.125rem;
	color: var(--pn-navy, #0A2036);
}

.single-post .entry-content > ul,
.single-post .entry-content > ol {
	padding-inline-start: 1.25rem;
}

.single-post .entry-content li + li {
	margin-block-start: 0.5rem;
}

.single-post .entry-content img,
.single-post .entry-content figure {
	border-radius: var(--pn-radius, 4px);
}

.single-post .entry-content figcaption {
	margin-block-start: 0.5rem;
	font-size: 0.8125rem;
	color: var(--pn-muted, #5A6B7C);
}

/* Tables inside an article scroll rather than pushing the page sideways. */
.single-post .entry-content .wp-block-table,
.single-post .entry-content figure.wp-block-table {
	overflow-x: auto;
}

/* -------------------------------------------------- article header block */

.pn-post-head {
	margin-block-end: var(--pn-space-6, 2rem);
	padding-block-end: var(--pn-space-5, 1.5rem);
	border-block-end: 1px solid var(--pn-line, rgba(10, 32, 54, 0.12));
}

.pn-post-head .pn-meta {
	margin-block-start: var(--pn-space-4, 1rem);
}

/* ------------------------------------------------------- end of article */

.pn-post-foot {
	margin-block-start: var(--pn-space-8, 3rem);
	padding: var(--pn-space-6, 2rem);
	background: var(--pn-navy, #0A2036);
	border-radius: var(--pn-radius, 4px);
	color: #fff;
}

.pn-post-foot h2 {
	margin: 0 0 var(--pn-space-3, 0.75rem);
	font-family: var(--pn-font-display, Georgia, serif);
	font-size: 1.375rem;
	line-height: 1.25;
	color: #fff;
}

.pn-post-foot p {
	margin: 0 0 var(--pn-space-5, 1.5rem);
	color: rgba(255, 255, 255, 0.86);
}

.pn-post-foot__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* The buttons themselves are styled by .pn-btn and .pn-btn--brass / --ghost, further
   down this file. The positional rules that used to live here (a:first-child, a + a)
   have been removed: they were duplicates, they were more specific than the class
   rules so they kept winning, and one of them painted var(--pn-navy) onto the brass
   button. --pn-navy resolves to GeneratePress's Customizer accent, #14456F, which
   measures 4.07:1 against brass and failed AA on the primary action of every article. */

/* -------------------------------------------------------- post navigation */

.post-navigation {
	margin-block-start: var(--pn-space-7, 2.5rem);
	padding-block-start: var(--pn-space-5, 1.5rem);
	border-block-start: 1px solid var(--pn-line, rgba(10, 32, 54, 0.12));
}

.post-navigation .nav-links {
	display: grid;
	gap: var(--pn-space-4, 1rem);
}

@media (min-width: 640px) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.post-navigation .nav-next {
		text-align: end;
	}
}

.post-navigation a {
	color: var(--pn-navy, #0A2036);
	font-weight: 600;
	text-decoration: none;
}

.post-navigation a:hover,
.post-navigation a:focus-visible {
	color: var(--pn-brass-ink, #8A6A1E);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ===================================================================
   SEARCH
   =================================================================== */

.pn-searchbar {
	margin-block-end: var(--pn-space-6, 2rem);
}

.pn-searchbar form,
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	max-inline-size: 34rem;
}

.pn-searchbar input[type="search"],
.search-form input[type="search"] {
	flex: 1 1 14rem;
	min-block-size: 2.75rem;
	padding-inline: 0.875rem;
	font-size: 1rem;
	color: var(--pn-navy, #0A2036);
	background: var(--pn-surface, #fff);
	border: 1px solid var(--pn-line, rgba(10, 32, 54, 0.2));
	border-radius: var(--pn-radius, 4px);
}

.pn-searchbar input[type="search"]:focus-visible,
.search-form input[type="search"]:focus-visible {
	outline: 2px solid var(--pn-brass, #C79F3F);
	outline-offset: 1px;
	border-color: var(--pn-brass, #C79F3F);
}

.pn-searchbar button,
.search-form button {
	min-block-size: 2.75rem;
	padding-inline: 1.25rem;
	font-weight: 700;
	color: #fff;
	background: var(--pn-navy, #0A2036);
	border: 1px solid var(--pn-navy, #0A2036);
	border-radius: var(--pn-radius, 4px);
	cursor: pointer;
}

.pn-searchbar button:hover,
.search-form button:hover {
	background: var(--pn-brass, #C79F3F);
	border-color: var(--pn-brass, #C79F3F);
	color: var(--pn-navy, #0A2036);
}

/* The empty state. An empty search page that says only "nothing found" is a
   dead end; this one offers the pages a searcher was most likely after. */
.pn-noresults {
	/* Spans the grid, but reads badly at 1200px wide: the eye has to travel the
	   whole viewport to get from the apology to the links. Capped to a comfortable
	   reading width and left aligned with the rest of the page. */
	max-inline-size: 46rem;
	padding: var(--pn-space-6, 2rem);
	background: var(--pn-surface, #fff);
	border: 1px solid var(--pn-line, rgba(10, 32, 54, 0.12));
	border-radius: var(--pn-radius, 4px);
}

.pn-noresults h2 {
	margin: 0 0 var(--pn-space-3, 0.75rem);
	font-family: var(--pn-font-display, Georgia, serif);
	font-size: 1.375rem;
	color: var(--pn-navy, #0A2036);
}

.pn-noresults ul {
	margin: var(--pn-space-4, 1rem) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pn-noresults li {
	margin: 0;
}

.pn-noresults li a {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.5rem;
	padding-inline: 0.875rem;
	font-weight: 600;
	color: var(--pn-navy, #0A2036);
	text-decoration: none;
	background: var(--pn-sand, #F2EEE7);
	border: 1px solid var(--pn-line, rgba(10, 32, 54, 0.12));
	border-radius: 999px;
}

.pn-noresults li a:hover,
.pn-noresults li a:focus-visible {
	border-color: var(--pn-brass, #C79F3F);
	color: var(--pn-brass-ink, #8A6A1E);
}

/* Search results highlight which content type each hit is. */
.pn-kind {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pn-brass-ink, #8A6A1E);
	background: rgba(199, 159, 63, 0.14);
	border-radius: 999px;
}

/* ------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
	.pn-archive .site-main > article,
	.pn-archive .read-more::after {
		transition: none;
	}

	.pn-archive .site-main > article:hover {
		transform: none;
	}
}

/* ------------------------------------------------- single post featured image */

/* GeneratePress prints the featured image at its natural aspect ratio, which for
   a 1600x1067 photograph is 533px of picture before the reader reaches the
   headline. Capping it keeps the title above the fold on a laptop without
   cropping the subject out of frame. */

.single-post .featured-image {
	margin-block-end: var(--pn-space-6, 2rem);
}

.single-post .featured-image img {
	display: block;
	inline-size: 100%;
	block-size: clamp(220px, 32vw, 360px);
	object-fit: cover;
	border-radius: var(--pn-radius, 4px);
}

/* GeneratePress prints its own date and author line under the content. Ours sits
   under the title and carries the reading time and category as well, so theirs is
   a duplicate date in the wrong place. Hidden rather than filtered out because
   `generate_post_meta_items` is the theme's, and a future GeneratePress release
   changing that filter should not be able to take the byline row with it. */
.single-post .entry-meta {
	display: none;
}

/* =====================================================================
   FIXES AND ADDITIONS, ROUND 2
   ===================================================================== */

/* ------------------------------------------- headings on inverted bands */

/* Reported bug: "The practice in numbers" was rendering navy on navy.
   MEASURED: #111c2b on #0f2c48, a contrast ratio of 1.13:1. Effectively invisible.

   The cause is that the inverted sections set `color` on themselves and rely on
   inheritance, but the base stylesheet colours every h2/h3 explicitly, and an
   explicit declaration beats an inherited one no matter how specific the ancestor.
   Inheritance was never going to reach them.

   Listed rather than done with a wildcard because these are exactly the surfaces
   that are dark, and a section added later should have to opt in deliberately
   rather than inherit white text onto a light background by accident. */

/* WHICH SECTIONS ARE ACTUALLY DARK. Checked against the declared background of each,
   not assumed from the name:

     .pn-stats      background-color: var(--pn-ink-2)        DARK
     .pn-cta-band   background-color: var(--pn-ink)          DARK
     .pn-hero       background-color: var(--pn-ink)          DARK
     .pn-imageband  background-color: var(--pn-ink)          DARK
     .pn-posthero   background-color: var(--pn-ink)          DARK
     .pn-bloghero   background-color: var(--pn-ink)          DARK
     .pn-post-foot  background-color: var(--pn-ink)          DARK

     .pn-band       background-color: var(--pn-parchment-2)  LIGHT
     .pn-authorities  no background declared                 LIGHT
     .pn-callout    background-color: var(--pn-surface-tint) LIGHT

   The first version of this rule included .pn-band and .pn-authorities on the
   assumption that a "band" was a dark band. It is not: .pn-band is parchment, and
   .pn-authorities has no background at all. The result was white headings on a near
   white ground on every page that used them. Do not add a class here without opening
   the file and reading its background-color first. */

.pn-stats h2,
.pn-stats h3,
.pn-stats h4,
.pn-cta-band h2,
.pn-cta-band h3,
.pn-hero h2:not(.pn-wizard *),
.pn-hero h3:not(.pn-wizard *),
.pn-imageband h2:not(.pn-wizard *),
.pn-imageband h3:not(.pn-wizard *),
.pn-post-foot h2 {
	color: #FFFFFF;
}

/* The light bands keep the ink heading colour. Stated explicitly rather than left to
   inherit, so a future change to the base heading colour cannot quietly drop one of
   these back to an unreadable pairing. */
.pn-band h2,
.pn-band h3,
.pn-band h4,
.pn-authorities h2,
.pn-authorities h3,
.pn-callout h2,
.pn-callout h3 {
	color: var(--pn-ink);
}

/* The brass eyebrow rule above a heading, on the dark bands only. */
.pn-stats h2::before,
.pn-cta-band h2::before {
	background-color: var(--pn-brass);
}

/* ------------------------------------------------- fee tables on mobile */

/* Reported bug: on a 390px screen the fee tables squeezed their first column to
   about 12px, so "VALUE OF THE INSTRUMENT" rendered one letter per line.

   The wrapper already had `overflow-x: auto`, but that does nothing on its own:
   a table with no minimum width shrinks to fit its container rather than
   overflowing it, so there was never anything to scroll.

   Two different fixes, because two different tables:

   A two column table is Item + Fee, and both are self describing. Those stack
   into a card per row, which reads far better on a phone than sideways scrolling.
   No `data-label` attributes are needed precisely because the columns are self
   describing, which is why this treatment is scoped to two column tables only.

   Anything with three or more columns (the fee source table is Fact + Source +
   Status) loses its meaning when stacked, so those get a real minimum width and
   scroll horizontally inside their own box. */

@media (max-width: 700px) {

	/* --- three or more columns: scroll, do not squeeze --- */
	.entry-content .wp-block-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.entry-content .wp-block-table table:has(tr > *:nth-child(3)) {
		min-inline-size: 34rem;
	}

	/* --- exactly two columns: stack each row into a card --- */
	.entry-content .wp-block-table table:not(:has(tr > *:nth-child(3))) {
		min-inline-size: 0;

		/* The table's own vertical margin separates it from the paragraph above on a
		   wide screen. Once the rows are a card inside a bordered figure that margin is
		   inside the border, where it reads as a dead band across the top and bottom of
		   the box rather than as spacing. The card's padding does that job here. */
		margin-block: 0;
	}

	.entry-content .wp-block-table table:not(:has(tr > *:nth-child(3))) thead {
		/* Visually hidden, not display:none, so the header is still announced. */
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* The row is the card now, so the row carries the padding. Measured before this:
	   the text sat 1px from the figure's border, because the cell padding was zeroed to
	   close the vertical gap between a label and its figure and nothing replaced the
	   horizontal padding it took with it. */
	.entry-content .wp-block-table table:not(:has(tr > *:nth-child(3))) tr {
		display: block;
		padding: 0.85rem 1rem;
		border-block-end: 1px solid var(--pn-line, rgba(10, 32, 54, 0.12));
	}

	.entry-content .wp-block-table table:not(:has(tr > *:nth-child(3))) tr:last-child {
		border-block-end: 0;
	}

	/* Striping moves from the cell to the row. The cells no longer reach the edges of
	   the card, so a background painted on them would stop short of the row's padding
	   and leave an unpainted margin down both sides of every other row. */
	.entry-content .pn-fee-table tbody tr:nth-child(even) td,
	.entry-content .wp-block-table table:not(:has(tr > *:nth-child(3))) tbody tr:nth-child(even) td {
		background-color: transparent;
	}

	.entry-content .wp-block-table table:not(:has(tr > *:nth-child(3))) tbody tr:nth-child(even) {
		background-color: var(--pn-parchment, #FAF8F5);
	}

	.entry-content .wp-block-table table:not(:has(tr > *:nth-child(3))) td {
		display: block;
		inline-size: auto;
		padding: 0;
		border: 0;
		text-align: start;
	}

	/* First cell is the label, second is the figure. */
	.entry-content .wp-block-table table:not(:has(tr > *:nth-child(3))) td:first-child {
		font-weight: 600;
		color: var(--pn-ink, #0A2036);
		margin-block-end: 0.2rem;
	}

	.entry-content .wp-block-table table:not(:has(tr > *:nth-child(3))) td:last-child {
		font-variant-numeric: tabular-nums lining-nums;
		color: var(--pn-brass-ink, #8A6A1E);
		font-weight: 600;
	}
}

/* ---------------------------------------------------------------- the logo */

.pn-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: inherit;
}

.pn-logo__mark {
	flex: none;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	color: var(--pn-brass);
}

/* The mark is drawn with two colours on light ground and one on dark. Inside the
   navy header everything is set to currentColor so the ring, the monogram and the
   rule all pick up the header's text colour, with the dashed ring left brass so
   the mark keeps its accent. */
.main-navigation .pn-logo__mark .pn-logo__ring,
.site-header .pn-logo__mark .pn-logo__ring {
	stroke: currentColor;
}

.pn-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.pn-logo__name {
	font-family: var(--pn-font-display);
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.375rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #FFFFFF;
}

.pn-logo__sub {
	margin-block-start: 0.2rem;
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pn-brass);
}

@media (max-width: 500px) {
	.pn-logo__sub {
		letter-spacing: 0.14em;
	}
}

/* ------------------------------------------------------ reviews, rebuilt */

.pn-review {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

/* The reviewer identity block: initials disc, name, source. */
.pn-review__person {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
}

.pn-review__avatar {
	flex: none;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-family: var(--pn-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #FFFFFF;
	/* Colour is set inline per review, picked from a fixed palette by hashing the
	   name, so the same person always gets the same disc and the set never turns
	   into a rainbow. Trustindex serves default_avatar.jpg for every one of these
	   reviewers, so there is no real photograph to use. */
	background-color: var(--pn-ink-2);
}

.pn-review__who {
	min-inline-size: 0;
}

.pn-review__name {
	display: block;
	font-weight: 600;
	color: var(--pn-ink);
	line-height: 1.3;
}

.pn-review__source {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pn-muted, #5A6B7C);
}

.pn-review__source svg {
	inline-size: 0.85rem;
	block-size: 0.85rem;
	flex: none;
}

.pn-review__text {
	margin: 0;
	color: var(--pn-body);
}

/* --------------------------------------------------- carousel arrows */

/* The previous arrows were 2.5rem discs holding a single guillemet character,
   which rendered as a hairline at any size and sat off centre because the glyph
   has its own side bearings. These are proper chevrons drawn as SVG, on a larger
   target that clears the 44px minimum. */

.pn-reviews__nav {
	display: flex;
	justify-content: flex-end;
	gap: 0.6rem;
	margin-block-start: 1.25rem;
}

.pn-reviews__arrow {
	inline-size: 2.875rem;
	block-size: 2.875rem;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(10, 32, 54, 0.18);
	border-radius: 50%;
	background-color: #FFFFFF;
	color: var(--pn-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease,
		color 0.15s ease, opacity 0.15s ease;
}

.pn-reviews__arrow svg {
	inline-size: 1.125rem;
	block-size: 1.125rem;
}

.pn-reviews__arrow:hover:not(:disabled),
.pn-reviews__arrow:focus-visible {
	background-color: var(--pn-ink);
	border-color: var(--pn-ink);
	color: #FFFFFF;
}

.pn-reviews__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

[dir="rtl"] .pn-reviews__arrow svg {
	transform: scaleX(-1);
}

/* =====================================================================
   SERVICES DROPDOWN PANEL
   ===================================================================== */

/* GeneratePress's submenu is a 200px column of plain links. This turns the one
   under Services into a two column panel of icon cards, centred under the nav
   rather than left aligned to its parent item, which is what stops an eight item
   panel running off the right edge of the header. */

.main-navigation .pn-nav-panel > .pn-navpanel {
	inline-size: min(46rem, calc(100vw - 3rem));
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.25rem;
	padding: 0.75rem;
	background-color: #FFFFFF;
	border: 1px solid rgba(10, 32, 54, 0.1);
	border-radius: var(--pn-radius);
	box-shadow: 0 18px 44px rgba(10, 32, 54, 0.18);
}

/* Pull the panel back so its centre lines up with the parent item rather than its
   left edge. `left: 50%` on the panel plus a translate is the only way to do this
   without knowing the parent's width. */
@media (min-width: 769px) {
	.main-navigation .pn-nav-panel {
		position: relative;
	}

	.main-navigation .pn-nav-panel > .pn-navpanel {
		inset-inline-start: 50%;
		transform: translateX(-50%);
	}

	[dir="rtl"] .main-navigation .pn-nav-panel > .pn-navpanel {
		transform: translateX(50%);
	}
}

.main-navigation .pn-navpanel > li {
	inline-size: auto;
}

.main-navigation .pn-navpanel > li > a {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	inline-size: auto;
	padding: 0.75rem;
	line-height: 1.35;
	border-radius: var(--pn-radius);
	background-color: transparent;
	color: var(--pn-ink);
	transition: background-color 0.14s ease;
}

.main-navigation .pn-navpanel > li > a:hover,
.main-navigation .pn-navpanel > li > a:focus-visible {
	background-color: var(--pn-sand, #F2EEE7);
	color: var(--pn-ink);
}

.pn-navcard__icon {
	flex: none;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	display: grid;
	place-items: center;
	border-radius: var(--pn-radius);
	background-color: rgba(199, 159, 63, 0.14);
	color: var(--pn-brass-ink, #8A6A1E);
}

.pn-navcard__icon svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

.main-navigation .pn-navpanel > li > a:hover .pn-navcard__icon {
	background-color: var(--pn-brass);
	color: #FFFFFF;
}

.pn-navcard__text {
	display: block;
	min-inline-size: 0;
}

.pn-navcard__title {
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--pn-ink);
}

.pn-navcard__desc {
	display: block;
	margin-block-start: 0.15rem;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--pn-muted, #5A6B7C);
}

/* On the mobile drawer the panel is just a list again: a two column grid of icon
   cards inside a 320px drawer would give each card about 120px. */
@media (max-width: 768px) {
	.main-navigation .pn-nav-panel > .pn-navpanel {
		inline-size: auto;
		display: block;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background-color: transparent;
	}

	.pn-navcard__desc {
		display: none;
	}

	.pn-navcard__icon {
		inline-size: 1.75rem;
		block-size: 1.75rem;
	}

	.pn-navcard__icon svg {
		inline-size: 1rem;
		block-size: 1rem;
	}
}

/* =====================================================================
   MOBILE DRAWER
   =====================================================================

   Two measured faults, both the same mistake: a colour inherited from a surface that is
   not there any more.

   The menu icon was GeneratePress's `--contrast`, `rgb(17, 28, 43)`, sitting on our navy
   header at `rgb(10, 32, 54)`. Measured 1.05:1, which is to say invisible.

   The dropdown titles were `rgb(10, 32, 54)` on `rgb(10, 32, 54)`. Exactly the same
   colour, 1.00:1. On a wide screen the nav panel is a light card and ink titles are
   correct; the mobile rule above drops that card's background and the titles were never
   re-stated, so they kept an ink colour with nothing light left underneath.

   Both are fixed by giving the drawer its own surface and stating every colour on it. */

@media (max-width: 768px) {

	/* ------------------------------------------------------ the toggle button */

	/* GeneratePress prints `.main-navigation .menu-toggle { color: var(--contrast) }`
	   inline in the head at (0,2,0), so this has to be at least as specific and later.
	   Colour and background on every state, per the convention at the top of this file. */
	.main-navigation .menu-toggle,
	.main-navigation .menu-toggle:hover,
	.main-navigation .menu-toggle:focus,
	.main-navigation .menu-toggle:focus-visible,
	.main-navigation.toggled .menu-toggle {
		color: #FFFFFF;
		background-color: transparent;
	}

	.main-navigation .menu-toggle:hover,
	.main-navigation .menu-toggle:focus-visible {
		color: var(--pn-brass);
	}

	.main-navigation .menu-toggle:focus-visible {
		outline: 2px solid var(--pn-brass);
		outline-offset: -4px;
	}

	/* The icon is an inline SVG with no fill of its own, so it follows the button. */
	.main-navigation .menu-toggle .gp-icon svg {
		fill: currentColor;
	}

	.main-navigation .menu-toggle .mobile-menu {
		color: inherit;
		font-weight: 600;
		letter-spacing: 0.04em;
	}

	/* -------------------------------------------------------- the drawer itself */

	.main-navigation.toggled .main-nav > ul {
		background-color: var(--pn-ink-2);
		border-block-start: 1px solid rgba(199, 159, 63, 0.3);
		padding-block: 0.5rem;
	}

	.main-navigation.toggled .main-nav > ul > li > a {
		color: #FFFFFF;
		font-weight: 600;
	}

	.main-navigation.toggled .main-nav > ul > li > a:hover,
	.main-navigation.toggled .main-nav > ul > li > a:focus-visible {
		color: var(--pn-ink);
		background-color: var(--pn-brass);
	}

	/* --------------------------------------------- dropdowns, open on arrival */

	/* The submenus are part of the drawer rather than a second thing to find. A visitor
	   who has opened the menu has already said what they want, and making them hunt for
	   a chevron to see the eight services is a tap that earns nothing. */
	.main-navigation.toggled .main-nav ul ul.sub-menu {
		display: block;
		position: static;
		inline-size: auto;
		block-size: auto;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		box-shadow: none;
		background-color: rgba(0, 0, 0, 0.18);
		border-inline-start: 2px solid rgba(199, 159, 63, 0.45);
		margin-inline-start: 1rem;
	}

	/* With every submenu already open the chevron has nothing left to do, and leaving it
	   there invites a tap that would close what the visitor came to read. */
	.main-navigation.toggled .dropdown-menu-toggle {
		display: none;
	}

	/* The card inside a submenu link. Stated in full, because the light panel these
	   colours were written for does not exist at this width. */
	.main-navigation.toggled .pn-navpanel > li > a {
		background-color: transparent;
		padding-block: 0.6rem;
	}

	.main-navigation.toggled .pn-navpanel .pn-navcard__title {
		color: #FFFFFF;
		font-weight: 600;
	}

	.main-navigation.toggled .pn-navpanel .pn-navcard__icon {
		color: var(--pn-brass);
		background-color: rgba(199, 159, 63, 0.16);
	}

	.main-navigation.toggled .pn-navpanel > li > a:hover,
	.main-navigation.toggled .pn-navpanel > li > a:focus-visible {
		background-color: rgba(199, 159, 63, 0.16);
	}

	.main-navigation.toggled .pn-navpanel > li > a:hover .pn-navcard__title,
	.main-navigation.toggled .pn-navpanel > li > a:focus-visible .pn-navcard__title {
		color: var(--pn-brass);
	}

	.main-navigation.toggled .pn-navpanel > li > a:hover .pn-navcard__icon,
	.main-navigation.toggled .pn-navpanel > li > a:focus-visible .pn-navcard__icon {
		color: var(--pn-ink);
		background-color: var(--pn-brass);
	}

	/* The current page, so the drawer says where you are. */
	.main-navigation.toggled .main-nav .current-menu-item > a,
	.main-navigation.toggled .main-nav .current_page_item > a {
		color: var(--pn-brass);
	}

	.main-navigation.toggled .main-nav .pn-navpanel .current-menu-item > a .pn-navcard__title,
	.main-navigation.toggled .main-nav .pn-navpanel .current_page_item > a .pn-navcard__title {
		color: var(--pn-brass);
	}
}

/* =====================================================================
   SINGLE POST HERO
   ===================================================================== */

.pn-posthero {
	position: relative;
	margin-inline: calc(50% - 50vw);
	margin-block-end: clamp(2rem, 1.5rem + 2vw, 3rem);
	min-block-size: clamp(20rem, 16rem + 18vw, 30rem);
	display: grid;
	align-items: end;
	isolation: isolate;
	background-color: var(--pn-ink);
	overflow: hidden;
}

.pn-posthero__img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	z-index: -2;
	/* Same correction as the page heroes: the stock photography here measures a mean
	   luminance around 44/255, which disappears entirely under the scrim. */
	filter: brightness(1.4) contrast(1.02);
}

/* The scrim. A gradient rather than a flat wash so the top of the photograph stays
   readable while the text end gets enough density to hold white type. Measured:
   white on the darkest stop is 13.6:1, and on the lightest point where text actually
   sits it is 7.2:1. */
.pn-posthero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgba(6, 20, 34, 0.92) 0%,
		rgba(6, 20, 34, 0.78) 38%,
		rgba(6, 20, 34, 0.42) 72%,
		rgba(6, 20, 34, 0.3) 100%
	);
}

.pn-posthero__inner {
	inline-size: min(1120px, calc(100% - 3rem));
	margin-inline: auto;
	padding-block: clamp(2rem, 1.5rem + 3vw, 3.5rem);
	max-inline-size: 52rem;
}

.pn-posthero__title {
	margin: 0;
	font-family: var(--pn-font-display);
	font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: #FFFFFF;
	text-wrap: balance;
}

.pn-posthero .pn-meta {
	margin-block-start: 1rem;
	color: rgba(255, 255, 255, 0.82);
}

.pn-posthero .pn-meta a {
	color: var(--pn-brass);
}

/* With the hero carrying the title, the article body starts straight in. */
.single-post .pn-posthero + .entry-content,
.single-post .entry-content {
	margin-block-start: 0;
}

/* =====================================================================
   MID ARTICLE CTA
   ===================================================================== */

.pn-inlinecta {
	margin-block: clamp(2rem, 1.5rem + 2vw, 3rem);
	padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
	background-color: var(--pn-sand, #F2EEE7);
	border: 1px solid rgba(199, 159, 63, 0.35);
	border-inline-start: 3px solid var(--pn-brass);
	border-radius: var(--pn-radius);
}

.pn-inlinecta__kicker {
	margin: 0 0 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pn-brass-ink, #8A6A1E);
}

.single-post .entry-content .pn-inlinecta__title {
	margin: 0 0 0.6rem;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	line-height: 1.25;
	color: var(--pn-ink);
}

.pn-inlinecta p {
	margin: 0;
	color: var(--pn-body);
}

.pn-inlinecta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-block-start: 1.25rem;
}

.pn-inlinecta__actions a {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	padding-inline: 1.25rem;
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	border-radius: var(--pn-radius);
}

.pn-inlinecta__primary {
	background-color: var(--pn-ink);
	color: #FFFFFF;
}

.pn-inlinecta__secondary {
	border: 1px solid rgba(10, 32, 54, 0.25);
	color: var(--pn-ink);
}

.pn-inlinecta__actions a:hover,
.pn-inlinecta__actions a:focus-visible {
	background-color: var(--pn-brass);
	border-color: var(--pn-brass);
	color: var(--pn-ink);
}

/* =====================================================================
   RELATED POSTS
   ===================================================================== */

.pn-related {
	margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem);
	padding-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
	border-block-start: 1px solid var(--pn-line, rgba(10, 32, 54, 0.12));
}

.pn-related__head {
	margin: 0 0 var(--pn-space-5, 1.5rem);
	font-family: var(--pn-font-display);
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	color: var(--pn-ink);
}

.pn-related__grid {
	display: grid;
	gap: var(--pn-space-5, 1.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.pn-related__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pn-related__card {
	background-color: var(--pn-surface, #fff);
	border: 1px solid var(--pn-line, rgba(10, 32, 54, 0.12));
	border-radius: var(--pn-radius);
	overflow: hidden;
	transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.pn-related__card:hover {
	transform: translateY(-2px);
	border-color: rgba(199, 159, 63, 0.5);
	box-shadow: 0 10px 26px rgba(10, 32, 54, 0.1);
}

.pn-related__link {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	text-decoration: none;
	color: inherit;
}

.pn-related__img {
	inline-size: 100%;
	block-size: 9rem;
	object-fit: cover;
	display: block;
}

.pn-related__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--pn-space-4, 1rem);
}

.pn-related__title {
	font-family: var(--pn-font-display);
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--pn-ink);
}

.pn-related__card:hover .pn-related__title {
	color: var(--pn-brass-ink, #8A6A1E);
}

.pn-related__meta {
	margin-block-start: auto;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pn-muted, #5A6B7C);
}

/* =====================================================================
   COMMENTS
   ===================================================================== */

.comments-area {
	margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem);
	padding-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
	border-block-start: 1px solid var(--pn-line, rgba(10, 32, 54, 0.12));
}

.comments-area .comments-title,
.comments-area .comment-reply-title {
	font-family: var(--pn-font-display);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
	color: var(--pn-ink);
	margin-block-end: var(--pn-space-4, 1rem);
}

.pn-comments__note {
	padding: var(--pn-space-4, 1rem);
	margin-block-end: var(--pn-space-5, 1.5rem);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--pn-body);
	background-color: var(--pn-sand, #F2EEE7);
	border-inline-start: 3px solid var(--pn-brass);
	border-radius: var(--pn-radius);
}

.comments-area .comment-list {
	list-style: none;
	margin: 0 0 var(--pn-space-6, 2rem);
	padding: 0;
}

.comments-area .comment-list li {
	margin-block-end: var(--pn-space-4, 1rem);
	padding: var(--pn-space-4, 1rem);
	background-color: var(--pn-surface, #fff);
	border: 1px solid var(--pn-line, rgba(10, 32, 54, 0.12));
	border-radius: var(--pn-radius);
}

.comments-area .comment-author,
.comments-area .comment-metadata {
	font-size: 0.8125rem;
	color: var(--pn-muted, #5A6B7C);
}

.comments-area .comment-author .fn {
	font-weight: 700;
	font-style: normal;
	color: var(--pn-ink);
}

.comment-form label {
	display: block;
	margin-block-end: 0.35rem;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--pn-ink);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	inline-size: 100%;
	padding: 0.7rem 0.85rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--pn-ink);
	background-color: var(--pn-surface, #fff);
	border: 1px solid rgba(10, 32, 54, 0.2);
	border-radius: var(--pn-radius);
}

.comment-form input:focus-visible,
.comment-form textarea:focus-visible {
	outline: 2px solid var(--pn-brass);
	outline-offset: 1px;
	border-color: var(--pn-brass);
}

.comment-form p {
	margin-block-end: var(--pn-space-4, 1rem);
}

.comment-form .submit {
	min-block-size: 2.75rem;
	padding-inline: 1.5rem;
	font-weight: 700;
	color: #FFFFFF;
	background-color: var(--pn-ink);
	border: 1px solid var(--pn-ink);
	border-radius: var(--pn-radius);
	cursor: pointer;
}

.comment-form .submit:hover {
	background-color: var(--pn-brass);
	border-color: var(--pn-brass);
	color: var(--pn-ink);
}

/* =====================================================================
   BLOG HERO AND LIVE SEARCH
   ===================================================================== */

.pn-bloghero {
	margin-inline: calc(50% - 50vw);
	margin-block-end: clamp(2rem, 1.5rem + 2vw, 3rem);
	padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
	background-color: var(--pn-ink);
	border-block-end: 1px solid rgba(199, 159, 63, 0.3);
}

.pn-bloghero__inner {
	inline-size: min(1120px, calc(100% - 3rem));
	margin-inline: auto;
	max-inline-size: 46rem;
}

.pn-bloghero__title {
	margin: 0;
	font-family: var(--pn-font-display);
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: #FFFFFF;
	text-wrap: balance;
}

.pn-bloghero__desc {
	margin: var(--pn-space-4, 1rem) 0 0;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.82);
}

/* ---------------------------------------------------------- the field */

.pn-livesearch {
	position: relative;
	display: flex;
	gap: 0.5rem;
	margin-block-start: var(--pn-space-5, 1.5rem);
	max-inline-size: 34rem;
}

.pn-livesearch__input {
	flex: 1;
	min-inline-size: 0;
	min-block-size: 3rem;
	padding-inline: 1rem;
	font-size: 1rem;
	color: var(--pn-ink);
	background-color: #FFFFFF;
	border: 1px solid transparent;
	border-radius: var(--pn-radius);
}

.pn-livesearch__input:focus-visible {
	outline: 2px solid var(--pn-brass);
	outline-offset: 2px;
}

.pn-livesearch__submit {
	flex: none;
	inline-size: 3rem;
	min-block-size: 3rem;
	display: grid;
	place-items: center;
	color: var(--pn-ink);
	background-color: var(--pn-brass);
	border: 0;
	border-radius: var(--pn-radius);
	cursor: pointer;
}

.pn-livesearch__submit svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

/* MEASURED: GeneratePress ships `button:hover { color: #FFF; background: #3F4047 }`.
   The rule above it set only a background, so on hover the icon inherited white from
   that rule and disappeared against the white background. Both properties are stated
   here, and hover now goes to navy rather than white, which is a clearer state change
   and keeps the icon at 15.9:1 instead of relying on a near white pairing. */
.pn-livesearch__submit:hover,
.pn-livesearch__submit:focus-visible {
	background-color: var(--pn-ink);
	color: #FFFFFF;
}

/* ------------------------------------------------------- the dropdown */

.pn-livesearch__panel {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% + 0.5rem);
	z-index: 60;
	max-block-size: min(28rem, 60vh);
	overflow-y: auto;
	padding: 0.4rem;
	background-color: #FFFFFF;
	border: 1px solid rgba(10, 32, 54, 0.12);
	border-radius: var(--pn-radius);
	box-shadow: 0 20px 44px rgba(6, 20, 34, 0.28);
}

.pn-livesearch__panel[hidden] {
	display: none;
}

.pn-livesearch__item {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.6rem;
	text-decoration: none;
	color: inherit;
	border-radius: var(--pn-radius);
}

.pn-livesearch__item:hover,
.pn-livesearch__item.is-active {
	background-color: var(--pn-sand, #F2EEE7);
}

.pn-livesearch__thumb {
	flex: none;
	inline-size: 3.25rem;
	block-size: 2.5rem;
	object-fit: cover;
	border-radius: 3px;
	background-color: var(--pn-sand, #F2EEE7);
}

.pn-livesearch__thumb--none {
	display: block;
	border: 1px dashed rgba(10, 32, 54, 0.18);
	background-color: transparent;
}

.pn-livesearch__body {
	min-inline-size: 0;
}

.pn-livesearch__title {
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--pn-ink);
}

.pn-livesearch__kind {
	display: inline-block;
	margin-inline-start: 0.4rem;
	padding: 0.05rem 0.4rem;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	vertical-align: 0.1em;
	color: var(--pn-brass-ink, #8A6A1E);
	background-color: rgba(199, 159, 63, 0.16);
	border-radius: 999px;
}

.pn-livesearch__line {
	display: block;
	margin-block-start: 0.15rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--pn-muted, #5A6B7C);
	/* One line only. The dropdown is a shortlist, not a results page. */
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pn-livesearch__all {
	display: block;
	margin-block-start: 0.25rem;
	padding: 0.7rem 0.6rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--pn-brass-ink, #8A6A1E);
	text-decoration: none;
	border-block-start: 1px solid var(--pn-line, rgba(10, 32, 54, 0.1));
	border-radius: var(--pn-radius);
}

.pn-livesearch__all:hover,
.pn-livesearch__all.is-active {
	background-color: var(--pn-sand, #F2EEE7);
}

.pn-livesearch__none {
	margin: 0;
	padding: 1rem 0.6rem;
	font-size: 0.9375rem;
	color: var(--pn-muted, #5A6B7C);
}

/* The archive grid must not start above the hero. */
.pn-archive .site-main > .pn-bloghero,
.pn-archive .site-main > .pn-posthero {
	grid-column: 1 / -1;
}

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

	.pn-related__card:hover {
		transform: none;
	}
}

/* =====================================================================
   CONTACT FORM AND MAP
   ===================================================================== */

.pn-form {
	padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem);
	background-color: var(--pn-surface, #fff);
	border: 1px solid var(--pn-line, rgba(10, 32, 54, 0.12));
	border-block-start: 3px solid var(--pn-brass);
	border-radius: var(--pn-radius);
	box-shadow: 0 1px 2px rgba(10, 32, 54, 0.04);
}

.pn-form__row {
	display: grid;
	gap: 0 var(--pn-space-4, 1rem);
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.pn-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.pn-form__field {
	margin: 0 0 var(--pn-space-4, 1rem);
}

.pn-form label {
	display: block;
	margin-block-end: 0.35rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--pn-ink);
}

.pn-form__req {
	color: var(--pn-brass-ink, #8A6A1E);
}

.pn-form input[type="text"],
.pn-form input[type="tel"],
.pn-form input[type="email"],
.pn-form select,
.pn-form textarea {
	inline-size: 100%;
	min-block-size: 2.875rem;
	padding: 0.7rem 0.85rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--pn-ink);
	background-color: #FFFFFF;
	border: 1px solid rgba(10, 32, 54, 0.22);
	border-radius: var(--pn-radius);
}

.pn-form textarea {
	min-block-size: 8rem;
	resize: vertical;
	line-height: 1.6;
}

.pn-form input:focus-visible,
.pn-form select:focus-visible,
.pn-form textarea:focus-visible {
	outline: 2px solid var(--pn-brass);
	outline-offset: 1px;
	border-color: var(--pn-brass);
}

/* The invalid state, but only after the visitor has actually interacted with the field.

   The first attempt used `:not(:placeholder-shown):invalid`, which was wrong: the name
   and email inputs carry no placeholder attribute, so `:placeholder-shown` never
   matched, the negation was always true, and an empty required field was painted red
   the moment the page loaded. Greeting someone with two red boxes before they have
   typed anything is the opposite of what validation styling is for.

   `:user-invalid` is the property designed for exactly this: it matches only after the
   user has edited the field or tried to submit. Where it is unsupported nothing is
   styled, which is the correct fallback. */
.pn-form input:user-invalid,
.pn-form textarea:user-invalid {
	border-color: #B3261E;
}

/* Honeypot. Moved off screen rather than display:none, because some bots skip fields
   that are hidden outright and fill the ones that are merely positioned away. */
.pn-form__trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pn-form__note {
	margin: 0 0 var(--pn-space-5, 1.5rem);
	padding: var(--pn-space-4, 1rem);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--pn-body);
	background-color: var(--pn-sand, #F2EEE7);
	border-inline-start: 3px solid var(--pn-brass);
	border-radius: var(--pn-radius);
}

.pn-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.pn-form__submit {
	min-block-size: 3rem;
	padding-inline: 1.75rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	color: #FFFFFF;
	background-color: var(--pn-ink);
	border: 1px solid var(--pn-ink);
	border-radius: var(--pn-radius);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pn-form__submit:hover:not(:disabled),
.pn-form__submit:focus-visible {
	background-color: var(--pn-brass);
	border-color: var(--pn-brass);
	color: var(--pn-ink);
}

.pn-form__submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

.pn-form__whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 3rem;
	padding-inline: 1.25rem;
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	color: #FFFFFF;
	/* WhatsApp brand green, darkened to #1D7A44 so white text clears 4.5:1.
	   The published #25D366 measures 1.8:1 against white and is unusable for a button. */
	background-color: #1D7A44;
	border: 1px solid #1D7A44;
	border-radius: var(--pn-radius);
}

.pn-form__whatsapp svg {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	flex: none;
}

.pn-form__whatsapp:hover,
.pn-form__whatsapp:focus-visible {
	background-color: #166135;
	border-color: #166135;
	color: #FFFFFF;
}

.pn-form__status {
	margin: var(--pn-space-4, 1rem) 0 0;
	font-weight: 600;
}

.pn-form__status:empty {
	display: none;
}

.pn-form__status.is-ok {
	padding: var(--pn-space-4, 1rem);
	color: #14532D;
	background-color: #E7F4EC;
	border-inline-start: 3px solid #1D7A44;
	border-radius: var(--pn-radius);
}

.pn-form__status.is-error {
	padding: var(--pn-space-4, 1rem);
	color: #7A1C16;
	background-color: #FBEAE8;
	border-inline-start: 3px solid #B3261E;
	border-radius: var(--pn-radius);
}

/* ------------------------------------------------------------------ map */

.pn-map {
	position: relative;
	min-block-size: clamp(18rem, 15rem + 10vw, 24rem);
	display: grid;
	place-items: center;
	overflow: hidden;
	background-color: var(--pn-sand, #F2EEE7);
	border: 1px solid var(--pn-line, rgba(10, 32, 54, 0.12));
	border-radius: var(--pn-radius);
}

.pn-map__prompt {
	max-inline-size: 30rem;
	padding: var(--pn-space-6, 2rem);
	text-align: center;
	color: var(--pn-body);
}

.pn-map__prompt svg {
	inline-size: 2.25rem;
	block-size: 2.25rem;
	color: var(--pn-brass-ink, #8A6A1E);
}

.pn-map__title {
	margin: 0.75rem 0 0.25rem;
	font-family: var(--pn-font-display);
	font-size: 1.25rem;
	color: var(--pn-ink);
}

.pn-map__addr {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.pn-map__note {
	margin: var(--pn-space-4, 1rem) 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--pn-muted, #5A6B7C);
}

.pn-map__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	justify-content: center;
	margin-block-start: var(--pn-space-5, 1.5rem);
}

.pn-map__load,
.pn-map__dir {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	padding-inline: 1.25rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--pn-radius);
	cursor: pointer;
}

.pn-map__load {
	color: #FFFFFF;
	background-color: var(--pn-ink);
	border: 1px solid var(--pn-ink);
}

.pn-map__dir {
	color: var(--pn-ink);
	background-color: transparent;
	border: 1px solid rgba(10, 32, 54, 0.25);
}

.pn-map__load:hover,
.pn-map__dir:hover,
.pn-map__load:focus-visible,
.pn-map__dir:focus-visible {
	background-color: var(--pn-brass);
	border-color: var(--pn-brass);
	color: var(--pn-ink);
}

.pn-map.is-loaded {
	display: block;
	min-block-size: 0;
}

.pn-map__frame {
	display: block;
	inline-size: 100%;
	block-size: clamp(18rem, 15rem + 10vw, 24rem);
	border: 0;
}

/* =====================================================================
   ROUND 3
   ===================================================================== */

/* --------------------------------------------- the gap under the header */

/* MEASURED: header bottom 135px, hero top 175px. The 40px between them was
   `padding-top` on GeneratePress's `.site-content`, which is correct for a page
   that opens with prose and wrong for one that opens with a full bleed band.

   `pn-flush-top` is added to <body> by pn_flush_top_class() for exactly those
   pages, so the padding is removed only where a band is about to butt against
   the header, and every other template keeps its breathing room. */

body.pn-flush-top .site-content {
	padding-block-start: 0;
}

body.pn-flush-top .site-content .content-area,
body.pn-flush-top .site-main {
	margin-block-start: 0;
}

/* ------------------------------------------------- hero text alignment */

/* The inner block used `inline-size: min(1120px, ...)` with `margin-inline: auto`
   AND `max-inline-size: 52rem` on the same element. The narrower cap won, so the
   text block was 832px centred in the viewport rather than 1120px aligned to the
   container edge, and it read as floating in the middle of the band.

   Fixed by separating the two jobs: the wrapper is the 1120px centred container,
   and the measure cap moves onto the children. */

.pn-posthero__inner,
.pn-bloghero__inner {
	inline-size: min(1120px, calc(100% - 3rem));
	margin-inline: auto;
	max-inline-size: none;
	text-align: start;
}

/* NO MEASURE CAP on band text. See the note beside the landing page rules: a cap
   inside a 1120px container leaves the sentence stopping two thirds of the way across
   and reads as a broken line break. The search field keeps a width because it is a
   control, not a sentence. */
.pn-posthero__title,
.pn-posthero__summary,
.pn-posthero .pn-meta,
.pn-bloghero__title,
.pn-bloghero__desc {
	max-inline-size: none;
	margin-inline-start: 0;
}

.pn-bloghero .pn-livesearch {
	max-inline-size: 34rem;
	margin-inline-start: 0;
}

/* --------------------------------------------------- post hero, smaller */

/* Was clamp(20rem, 16rem + 18vw, 30rem), which on a laptop pushed the first
   paragraph of the article below the fold for the sake of a photograph the reader
   has already seen on the card they clicked. */
.pn-posthero {
	min-block-size: clamp(15rem, 12rem + 11vw, 21rem);
}

.pn-posthero__title {
	font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
}

.pn-posthero__inner {
	padding-block: clamp(1.75rem, 1.4rem + 2vw, 2.75rem);
}

/* ------------------------------------------------ blog hero photograph */

.pn-bloghero {
	position: relative;

	/* `isolation: isolate` is what lets the photograph sit at z-index -2 behind the
	   scrim without falling behind the page background. It also traps everything
	   inside: the live search dropdown was set to z-index 60 and still painted UNDER
	   the article cards, because 60 only ranks it within this element's own stacking
	   context, and that context had z-index auto so it sat in plain document order
	   ahead of the cards that follow it.

	   Giving the hero its own z-index lifts the whole context, dropdown included,
	   above later content. 20 rather than something enormous so the header, which
	   sits higher still, keeps winning. */
	isolation: isolate;
	z-index: 20;

	/* NOT `overflow: hidden` any more. That clipped the dropdown to the band. The
	   photograph is a background layer covering the box exactly, so there is nothing
	   left that needs clipping. */
}

.pn-bloghero__img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	z-index: -2;
	filter: brightness(1.35) contrast(1.02);
}

/* Scrim. Denser at the start edge where the text sits, so the headline holds while
   the far side of the photograph stays legible as a photograph. Measured: white on
   the lightest point under text is 8.1:1. */
.pn-bloghero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to right,
		rgba(6, 20, 34, 0.90) 0%,
		rgba(6, 20, 34, 0.84) 58%,
		rgba(6, 20, 34, 0.40) 100%
	);
}

@media (max-width: 700px) {
	.pn-bloghero::after {
		background: linear-gradient(
			to top,
			rgba(6, 20, 34, 0.94) 0%,
			rgba(6, 20, 34, 0.86) 55%,
			rgba(6, 20, 34, 0.7) 100%
		);
	}
}

/* ------------------------------------------- the services panel, hover */

/* The brass underline is gone from here entirely: it belongs to the top level bar
   and was leaking down through a descendant selector. What is left is a background
   change on the card plus a colour change on the title, which is what a panel of
   cards should do. */

.main-navigation .pn-navpanel > li > a,
.main-navigation .pn-navpanel > li > a:hover,
.main-navigation .pn-navpanel > li > a:focus-visible {
	text-decoration: none;
}

.main-navigation .pn-navpanel > li > a::after,
.main-navigation .pn-navpanel > li > a::before {
	content: none;
}

.main-navigation .pn-navpanel > li > a:hover .pn-navcard__title,
.main-navigation .pn-navpanel > li > a:focus-visible .pn-navcard__title {
	color: var(--pn-brass-ink, #8A6A1E);
}

.main-navigation .pn-navpanel > li > a:hover .pn-navcard__desc,
.main-navigation .pn-navpanel > li > a:focus-visible .pn-navcard__desc {
	color: var(--pn-body);
}

.main-navigation .pn-navpanel > li > a:focus-visible {
	outline: 2px solid var(--pn-brass);
	outline-offset: -2px;
}

/* ------------------------------------------------------- link colours */

/* Links inside prose. Stated per surface rather than once globally, because the
   same link sits on parchment in one section and on navy in the next, and a single
   colour cannot clear 4.5:1 on both. */

/* `:not([class])` was meant to mean "a link in running prose", but the table of
   contents is injected into the_content and its items are plain anchors too, so every
   one of them picked up the prose underline. Excluding the contents by ancestor is
   more honest than adding a class to dodge the selector. */
.entry-content a:not([class]):not(.pn-toc a) {
	color: var(--pn-brass-ink, #8A6A1E);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.entry-content a:not([class]):not(.pn-toc a):hover,
.entry-content a:not([class]):not(.pn-toc a):focus-visible {
	color: var(--pn-ink);
	text-decoration-thickness: 2px;
}

/* On the dark bands the brass ink is far too dark to read, so links there take the
   lighter brass and lift to white on hover. */
.pn-hero a:not([class]),
.pn-imageband a:not([class]),
.pn-cta-band a:not([class]),
.pn-stats a:not([class]),
.pn-posthero a:not([class]),
.pn-bloghero a:not([class]),
.pn-post-foot a:not([class]) {
	color: var(--pn-brass);
}

.pn-hero a:not([class]):hover,
.pn-imageband a:not([class]):hover,
.pn-cta-band a:not([class]):hover,
.pn-stats a:not([class]):hover,
.pn-posthero a:not([class]):hover,
.pn-bloghero a:not([class]):hover,
.pn-post-foot a:not([class]):hover {
	color: #FFFFFF;
}

/* =====================================================================
   TABLE OF CONTENTS
   ===================================================================== */

.pn-toc {
	margin-block-end: var(--pn-space-6, 2rem);
	padding: var(--pn-space-5, 1.5rem);
	background-color: var(--pn-surface, #fff);
	border: 1px solid var(--pn-line, rgba(10, 32, 54, 0.12));
	border-inline-start: 3px solid var(--pn-brass);
	border-radius: var(--pn-radius);
}

.pn-toc__head {
	margin: 0 0 var(--pn-space-3, 0.75rem);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pn-muted, #5A6B7C);
}

.pn-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: pn-toc;
}

.pn-toc__list li {
	margin: 0;
	counter-increment: pn-toc;
}

.pn-toc__list a {
	display: block;
	padding: 0.4rem 0 0.4rem 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--pn-body);
	text-decoration: none;
	border-inline-start: 2px solid transparent;
	padding-inline-start: 0.75rem;
	margin-inline-start: -0.75rem;
	transition: color 0.14s ease, border-color 0.14s ease;
}

.pn-toc__list a::before {
	content: counter(pn-toc) ". ";
	color: var(--pn-muted, #5A6B7C);
	font-variant-numeric: tabular-nums;
}

.pn-toc__list a:hover,
.pn-toc__list a:focus-visible {
	color: var(--pn-brass-ink, #8A6A1E);
}

/* The scroll spy state. Set by pn-toc.js from an IntersectionObserver. */
.pn-toc__list a.is-current {
	color: var(--pn-ink);
	font-weight: 600;
	border-inline-start-color: var(--pn-brass);
}

.pn-toc__list a.is-current::before {
	color: var(--pn-brass-ink, #8A6A1E);
}

/* ---------------------------------------------------- as a real sidebar */

/* Below 1100px the article is already the full column, so the contents sits inline
   above the text as a collapsible summary. Above it, the layout becomes two columns
   and the contents sticks alongside.

   1100px rather than a round 1024 because the article measure is 800px: below about
   1100 there is not enough room for an 800px column plus a readable rail without
   squeezing one of them. */

@media (min-width: 1100px) {
	.single-post .site-content .content-area {
		max-inline-size: 1140px;
	}

	.single-post .pn-article {
		display: grid;
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: clamp(2rem, 1rem + 3vw, 3.5rem);
		align-items: start;
	}

	.pn-toc {
		position: sticky;
		/* Clears the admin bar and leaves the heading visible above the list. */
		inset-block-start: 2rem;
		max-block-size: calc(100vh - 4rem);
		overflow-y: auto;
		margin-block-end: 0;
	}
}

@media (max-width: 1099px) {
	/* Collapsed by default on a phone: a sixteen item list between the headline and
	   the first paragraph is an obstacle, not a convenience. */
	.pn-toc__list {
		display: none;
	}

	.pn-toc.is-open .pn-toc__list {
		display: block;
	}

	.pn-toc__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		inline-size: 100%;
		padding: 0;
		font-family: inherit;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--pn-muted, #5A6B7C);
		background: none;
		border: 0;
		cursor: pointer;
	}

	.pn-toc__toggle svg {
		inline-size: 1.1rem;
		block-size: 1.1rem;
		transition: transform 0.16s ease;
	}

	.pn-toc.is-open .pn-toc__toggle svg {
		transform: rotate(180deg);
	}

	.pn-toc__head {
		display: none;
	}
}

@media (min-width: 1100px) {
	.pn-toc__toggle {
		display: none;
	}
}

/* Anchor targets must clear the sticky header when jumped to. */
.single-post .entry-content h2[id] {
	scroll-margin-block-start: 5rem;
}

/* =====================================================================
   THE SITE WIDE CALL TO ACTION ABOVE THE FOOTER
   ===================================================================== */

.pn-sitecta {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 2.25rem + 3.5vw, 5rem);
	border-block-start: 1px solid rgba(199, 159, 63, 0.35);

	/* Two background layers, painted front to back: the scrim, then the photograph.
	   `--pn-cta-img` is set inline by pn_site_cta() so the image stays a content
	   decision in PHP rather than a hard coded path in the stylesheet, and the flat
	   navy underneath guarantees a readable band if the custom property is ever unset.

	   Stops chosen against a measurement rather than by eye. The text block ends
	   around 55 percent of the band, so the scrim holds its density to there and then
	   falls away. At that 55 percent stop the cropped strip of this photograph
	   measures 191 of 255, linear luminance 0.52, so the composite is
	   0.78 * 0.0075 + 0.22 * 0.52 = 0.120 and white against it is 6.2:1. */
	background-color: var(--pn-ink);
	background-image:
		linear-gradient(
			to right,
			rgba(6, 20, 34, 0.86) 0%,
			rgba(6, 20, 34, 0.78) 55%,
			rgba(10, 32, 54, 0.12) 100%
		),
		var(--pn-cta-img, none);
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	background-position: center, center;
}

@media (max-width: 760px) {
	/* The text spans the full width on a phone, so the fall-off has to run vertically
	   instead: dense where the words are, clearing towards the top of the band. */
	.pn-sitecta {
		background-image:
			linear-gradient(
				to top,
				rgba(6, 20, 34, 0.90) 0%,
				rgba(6, 20, 34, 0.82) 58%,
				rgba(10, 32, 54, 0.40) 100%
			),
			var(--pn-cta-img, none);
	}
}

.pn-sitecta__inner {
	inline-size: min(1120px, calc(100% - 3rem));
	margin-inline: auto;
}

.pn-sitecta__kicker {
	margin: 0 0 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pn-brass);
}

.pn-sitecta__title {
	margin: 0;
	max-inline-size: none;
	font-family: var(--pn-font-display);
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
	line-height: 1.14;
	letter-spacing: -0.015em;
	color: #FFFFFF;
	text-wrap: balance;
}

.pn-sitecta__text {
	margin: var(--pn-space-4, 1rem) 0 0;
	max-inline-size: none;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.88);
}

.pn-sitecta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: var(--pn-space-6, 2rem);
}

.pn-sitecta__actions a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 3rem;
	padding-inline: 1.5rem;
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	border-radius: var(--pn-radius);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pn-sitecta__actions a:nth-child(1) {
	background-color: var(--pn-brass);
	color: var(--pn-ink);
	border: 1px solid var(--pn-brass);
}

.pn-sitecta__actions a:nth-child(2) {
	/* WhatsApp green darkened to clear 4.5:1 against white text. */
	background-color: #1D7A44;
	color: #FFFFFF;
	border: 1px solid #1D7A44;
}

.pn-sitecta__actions a:nth-child(3) {
	background-color: transparent;
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.pn-sitecta__actions a svg {
	inline-size: 1.05rem;
	block-size: 1.05rem;
	flex: none;
}

.pn-sitecta__actions a:hover,
.pn-sitecta__actions a:focus-visible {
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--pn-ink);
}



@media (prefers-reduced-motion: reduce) {
	.pn-toc__list a,
	.pn-toc__toggle svg,
	.pn-sitecta__actions a {
		transition: none;
	}
}

/* ------------------------------------------------ the article body column */

.pn-article__body {
	min-inline-size: 0;
}

/* The full frame of the featured image, under the hero that crops it. */
.pn-article__figure {
	margin: 0 0 var(--pn-space-6, 2rem);
}

.pn-article__figure img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--pn-radius);
}

/* Without the grid the contents still stacks above the article, so nothing here
   depends on the sidebar layout having applied. */
@media (max-width: 1099px) {
	.pn-article {
		display: block;
	}
}

/* The contents links keep their own treatment: no underline, the active item marked
   by weight and a brass rule rather than by decoration. */
.pn-toc__list a,
.pn-toc__list a:hover,
.pn-toc__list a:focus-visible {
	text-decoration: none;
}

.pn-toc__list a:focus-visible {
	outline: 2px solid var(--pn-brass);
	outline-offset: 2px;
}

/* ------------------------------- beating GeneratePress's nav hover colour */

/* MEASURED. GeneratePress prints this in its inline <style>:
     .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a
     { color: var(--accent) }
   which is specificity (0,4,3) and resolves to the Customizer accent, a muted blue.
   Against the navy header that measures 2.9:1, so hovering "Services" all but erased
   the label.

   The earlier attempt used `> ul > li > a:hover`, which is (0,3,3) and lost. Two
   things were wrong with it: the specificity, and the fact that GeneratePress hangs
   the hover on the LI rather than the A. With the panel open the pointer is inside
   the LI, so the parent link stayed in the hover state the whole time the dropdown
   was being used.

   These selectors name a class on the li, which takes them to (0,4,3) and (0,5,3),
   and they hang off :hover of the li to match how the theme does it. :focus-within is
   included so the panel opened from the keyboard behaves the same as one opened with
   a pointer. */

.main-navigation .main-nav > ul > li.menu-item:hover > a,
.main-navigation .main-nav > ul > li.menu-item:focus-within > a,
.main-navigation .main-nav > ul > li.menu-item.sfHover > a,
.main-navigation .main-nav > ul > li.menu-item.menu-item-has-children:hover > a,
.main-navigation .main-nav > ul > li.menu-item.current-menu-item > a,
.main-navigation .main-nav > ul > li.menu-item.current-menu-ancestor > a {
	color: #FFFFFF;
	background-color: transparent;
}

/* The panel links, for the same reason: GeneratePress's li:hover rule reaches them
   too. The card's title and description carry their own colours, so this is belt and
   braces rather than a visible fix, but leaving the anchor itself set to an unreadable
   colour is the kind of thing that surfaces later on a link that has no inner span. */
.main-navigation .main-nav .pn-navpanel > li.menu-item > a,
.main-navigation .main-nav .pn-navpanel > li.menu-item:hover > a,
.main-navigation .main-nav .pn-navpanel > li.menu-item > a:hover,
.main-navigation .main-nav .pn-navpanel > li.menu-item > a:focus-visible {
	color: var(--pn-ink);
}

/* =====================================================================
   ROUND 4
   ===================================================================== */

/* ------------------------------------------------- shared button classes */

/* The post footer buttons used to be bare anchors, which is why a prose link rule
   reached them and painted brass text onto a brass button. These carry classes now,
   and the classes are generic so the next component that needs a button on a dark
   band reuses them rather than inventing a third set. */

.pn-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 2.75rem;
	padding-inline: 1.25rem;
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.2;
	text-decoration: none;
	border-radius: var(--pn-radius);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pn-btn--brass,
.pn-post-foot .pn-btn--brass {
	background-color: var(--pn-brass);
	border: 1px solid var(--pn-brass);
	color: var(--pn-ink);
}

.pn-btn--ghost,
.pn-post-foot .pn-btn--ghost {
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: #FFFFFF;
}

.pn-btn:hover,
.pn-btn:focus-visible,
.pn-post-foot .pn-btn:hover,
.pn-post-foot .pn-btn:focus-visible {
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--pn-ink);
	text-decoration: none;
}

/* The mid article call to action's own buttons, restated at a specificity that clears
   the article prose link rule even if that rule is ever loosened again. */
.single-post .entry-content .pn-inlinecta__primary {
	background-color: var(--pn-ink);
	border: 1px solid var(--pn-ink);
	color: #FFFFFF;
	text-decoration: none;
}

.single-post .entry-content .pn-inlinecta__secondary {
	background-color: transparent;
	border: 1px solid rgba(10, 32, 54, 0.25);
	color: var(--pn-ink);
	text-decoration: none;
}

.single-post .entry-content .pn-inlinecta__primary:hover,
.single-post .entry-content .pn-inlinecta__primary:focus-visible,
.single-post .entry-content .pn-inlinecta__secondary:hover,
.single-post .entry-content .pn-inlinecta__secondary:focus-visible {
	background-color: var(--pn-brass);
	border-color: var(--pn-brass);
	color: var(--pn-ink);
	text-decoration: none;
}

/* ---------------------------------------------- single post hero summary */

.pn-posthero__summary {
	margin: var(--pn-space-4, 1rem) 0 0;
	font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------- a stronger hero scrim */

/* The post hero is the shortest band on the site, so its text sits directly over the
   busiest part of the photograph with the least room to fall away. Measured against the
   darkest frame in the library (legal-desk, 113 of 255 across the cropped strip): the
   composite under the summary line is 0.86 * 0.0075 + 0.14 * 0.16 = 0.029, and white
   against that is 12.4:1. */
.pn-posthero::after {
	background: linear-gradient(
		to top,
		rgba(6, 20, 34, 0.94) 0%,
		rgba(6, 20, 34, 0.86) 45%,
		rgba(6, 20, 34, 0.62) 78%,
		rgba(10, 32, 54, 0.5) 100%
	);
}

/* =====================================================================
   FOOTER: THE MARK AND THE CONTACT BUTTONS
   ===================================================================== */

.pn-foot__mark {
	display: block;
	inline-size: var(--pn-mark-size, 3rem);
	margin-block-end: var(--pn-space-4, 1rem);
	/* The footer is navy, so the mark takes the footer's own text colour and its
	   dashed ring keeps the brass accent from the file itself. */
	color: #FFFFFF;
}

.pn-foot__mark-svg {
	inline-size: 100%;
	block-size: auto;
	display: block;
}

/* ------------------------------------------------------ contact buttons */

/* Three tappable rows rather than a paragraph of <br> separated links. On a phone
   these are the primary conversion path off every page, and a 15px link in a run of
   text is a 15px target. Each is a full width row with a 44px minimum height. */

.pn-foot__contact {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0 0 var(--pn-space-5, 1.5rem);
	padding: 0;
	list-style: none;
}

.pn-foot__contact li {
	margin: 0;
	padding: 0;
}

.pn-foot__contact a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-block-size: 2.75rem;
	padding-inline: 0.85rem;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	color: #FFFFFF;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--pn-radius);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pn-foot__contact a:hover,
.pn-foot__contact a:focus-visible {
	background-color: var(--pn-brass);
	border-color: var(--pn-brass);
	color: var(--pn-ink);
}

.pn-foot__contact svg {
	inline-size: 1.05rem;
	block-size: 1.05rem;
	flex: none;
}

/* The WhatsApp row keeps its own colour so it is recognisable at a glance. Green
   darkened to #1D7A44 so the white label clears 4.5:1; the published brand green
   measures 1.8:1 against white and is unusable for this. */
.pn-foot__contact .pn-foot__wa {
	background-color: #1D7A44;
	border-color: #1D7A44;
}

.pn-foot__contact .pn-foot__wa:hover,
.pn-foot__contact .pn-foot__wa:focus-visible {
	background-color: #166135;
	border-color: #166135;
	color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
	.pn-foot__contact a {
		transition: none;
	}
}

/* =====================================================================
   REGION DEFAULTS VERSUS COMPONENTS

   The footer link rules above are wrapped in :where(), which contributes zero
   specificity. `:where(.site-footer .widget) a:hover` therefore scores as plain
   `a:hover`, and every component class rule outranks it automatically.

   This is the fix for a bug that recurred four times in this build. Each time the
   shape was identical: a broad region rule styling a bare element beat a narrower
   component rule written later, and a button's label ended up the same colour as its
   own background. Measured examples:

     .site-footer .widget a:hover         (0,3,1)  beat  .pn-foot__contact a:hover  (0,2,1)
     .single-post .entry-content a        (0,2,1)  beat  .pn-inlinecta__primary     (0,1,0)
     .pn-post-foot__actions a:first-child (0,2,1)  beat  .pn-btn--brass             (0,1,0)

   THE CONVENTION, for anything added later:

     A rule that styles a bare element inside a region is a DEFAULT. Wrap the region
     part in :where() so it cannot outrank a component.

     A rule that styles a named component is a COMPONENT. Plain classes, no :where(),
     and always state `color` and `background-color` together on every state. A hover
     rule that changes only the background inherits its text colour from whatever won
     the cascade, which is how the search button turned white on white.
   ===================================================================== */

/* Belt and braces for the footer contact buttons specifically, since they are the
   component that broke: colour stated on every state, at component specificity. */
.pn-foot__contact a,
.site-footer .pn-foot__contact a {
	color: #FFFFFF;
}

.pn-foot__contact a:hover,
.pn-foot__contact a:focus-visible,
.site-footer .pn-foot__contact a:hover,
.site-footer .pn-foot__contact a:focus-visible {
	color: var(--pn-ink);
	background-color: var(--pn-brass);
	border-color: var(--pn-brass);
}

.pn-foot__contact .pn-foot__wa,
.site-footer .pn-foot__contact .pn-foot__wa {
	color: #FFFFFF;
}

.pn-foot__contact .pn-foot__wa:hover,
.pn-foot__contact .pn-foot__wa:focus-visible,
.site-footer .pn-foot__contact .pn-foot__wa:hover,
.site-footer .pn-foot__contact .pn-foot__wa:focus-visible {
	color: #FFFFFF;
	background-color: #166135;
	border-color: #166135;
}

/* =====================================================================
   HERO ENQUIRY WIZARD
   ===================================================================== */

/* The hero becomes two columns when it contains a wizard. Written with :has() so the
   hero markup needs no modifier class: a band containing a form lays out as a band
   containing a form. */

/* The band caps its own children at 52rem so body copy keeps a readable measure. A hero
   carrying the wizard has to give that cap up, because the measure now belongs to the
   text column rather than to the band. Measured before this rule: the container sat at
   832px inside a 1120px content column, which left the two columns 320px and 368px. */
.pn-imageband:has(.pn-wizard) > .wp-block-group__inner-container,
.pn-hero:has(.pn-wizard) > .wp-block-group__inner-container {
	max-inline-size: none;
}

@media (min-width: 1000px) {
	.pn-imageband:has(.pn-wizard) > .wp-block-group__inner-container,
	.pn-hero:has(.pn-wizard) > .wp-block-group__inner-container {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem);
		gap: clamp(2rem, 1rem + 3vw, 4rem);
		align-items: center;
	}
}

/* The text side of a wizard hero. One box, so the grid has exactly two children. */
.pn-hero__text {
	min-inline-size: 0;
}

/* No cap inside the column: the column is the cap. Leaving 34rem here would centre a
   narrow card in a wider cell and reintroduce the ragged line breaks. */
.pn-imageband .pn-wizard,
.pn-hero .pn-wizard {
	max-inline-size: none;
}

.pn-wizard {
	position: relative;
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	background-color: #FFFFFF;
	border: 1px solid rgba(10, 32, 54, 0.1);
	border-radius: var(--pn-radius);
	box-shadow: 0 20px 50px rgba(6, 20, 34, 0.32);
	/* The hero text is white over a photograph. This card is the one light surface in
	   the band, so its type reverts to ink rather than inheriting white. */
	color: var(--pn-ink);
	text-align: start;
	max-inline-size: 34rem;
	margin-inline-start: 0;
}

/* ------------------------------------------------------------- progress */

.pn-wizard__head {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0.35rem 0.75rem;
	margin-block-end: var(--pn-space-5, 1.5rem);
}

.pn-wizard__bar {
	grid-column: 1 / -1;
	display: flex;
	gap: 0.35rem;
}

.pn-wizard__seg {
	flex: 1;
	block-size: 4px;
	border-radius: 2px;
	background-color: rgba(10, 32, 54, 0.12);
	transition: background-color 0.25s ease;
}

.pn-wizard__seg.is-done {
	background-color: var(--pn-brass);
}

.pn-wizard__count {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--pn-muted, #5A6B7C);
	font-variant-numeric: tabular-nums;
}

.pn-wizard__label {
	margin: 0;
	justify-self: end;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pn-brass-ink, #8A6A1E);
}

/* --------------------------------------------------------------- steps */

.pn-wizard__step {
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

/* Without the script every step is visible and the card is one long form. The script
   adds .is-enhanced and takes over the hiding, so this only separates them. */
.pn-wizard:not(.is-enhanced) .pn-wizard__step + .pn-wizard__step {
	margin-block-start: var(--pn-space-6, 2rem);
	padding-block-start: var(--pn-space-5, 1.5rem);
	border-block-start: 1px solid var(--pn-line, rgba(10, 32, 54, 0.1));
}

.pn-wizard__q {
	display: block;
	padding: 0;
	margin: 0 0 0.4rem;
	font-family: var(--pn-font-display);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	line-height: 1.25;
	color: var(--pn-ink);
}

.pn-wizard__q:focus-visible {
	outline: 2px solid var(--pn-brass);
	outline-offset: 3px;
}

.pn-wizard__help {
	margin: 0 0 var(--pn-space-4, 1rem);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--pn-muted, #5A6B7C);
}

/* ------------------------------------------------------------ options */

.pn-wizard__options {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.pn-wizard__opt {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-block-size: 3.25rem;
	padding-inline: 0.85rem;
	cursor: pointer;
	border: 1px solid rgba(10, 32, 54, 0.14);
	border-radius: var(--pn-radius);
	background-color: #FFFFFF;
	transition: border-color 0.14s ease, background-color 0.14s ease;
}

/* The radio is hidden from sight but not from assistive technology or the keyboard: it
   still receives focus, and the label carries the focus ring. */
.pn-wizard__opt input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.pn-wizard__optIcon {
	flex: none;
	inline-size: 2.1rem;
	block-size: 2.1rem;
	display: grid;
	place-items: center;
	border-radius: var(--pn-radius);
	background-color: rgba(199, 159, 63, 0.14);
	color: var(--pn-brass-ink, #8A6A1E);
}

.pn-wizard__optIcon svg {
	inline-size: 1.15rem;
	block-size: 1.15rem;
}

.pn-wizard__optText {
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--pn-ink);
}

.pn-wizard__opt:hover {
	border-color: rgba(199, 159, 63, 0.6);
	background-color: var(--pn-sand, #F2EEE7);
}

.pn-wizard__opt:has(input:focus-visible) {
	outline: 2px solid var(--pn-brass);
	outline-offset: 2px;
}

.pn-wizard__opt:has(input:checked) {
	border-color: var(--pn-brass);
	background-color: rgba(199, 159, 63, 0.12);
}

.pn-wizard__opt:has(input:checked) .pn-wizard__optIcon {
	background-color: var(--pn-brass);
	color: var(--pn-ink);
}

/* ------------------------------------------------------------- fields */

.pn-wizard__field {
	margin: 0 0 0.85rem;
}

.pn-wizard__field label {
	display: block;
	margin-block-end: 0.3rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pn-ink);
}

.pn-wizard__field input,
.pn-wizard__field textarea {
	inline-size: 100%;
	min-block-size: 2.75rem;
	padding: 0.65rem 0.8rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--pn-ink);
	background-color: #FFFFFF;
	border: 1px solid rgba(10, 32, 54, 0.2);
	border-radius: var(--pn-radius);
}

.pn-wizard__field textarea {
	min-block-size: 4.5rem;
	resize: vertical;
	line-height: 1.55;
}

.pn-wizard__field input:focus-visible,
.pn-wizard__field textarea:focus-visible {
	outline: 2px solid var(--pn-brass);
	outline-offset: 1px;
	border-color: var(--pn-brass);
}

.pn-wizard__field input:user-invalid,
.pn-wizard__field textarea:user-invalid {
	border-color: #B3261E;
}

/* ----------------------------------------------------------------- nav */

/* Colour AND background stated on every state of every button. A hover rule that sets
   only a background inherits its text colour from whatever won the cascade, which is
   how a label ends up the same colour as its own button. */

.pn-wizard__nav {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	margin-block-start: var(--pn-space-5, 1.5rem);
}

.pn-wizard__next,
.pn-wizard__submit {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-block-size: 3rem;
	padding-inline: 1.25rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--pn-ink);
	background-color: var(--pn-brass);
	border: 1px solid var(--pn-brass);
	border-radius: var(--pn-radius);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pn-wizard__next svg {
	inline-size: 1.05rem;
	block-size: 1.05rem;
}

.pn-wizard__next:hover:not(:disabled),
.pn-wizard__next:focus-visible:not(:disabled),
.pn-wizard__submit:hover:not(:disabled),
.pn-wizard__submit:focus-visible:not(:disabled) {
	color: #FFFFFF;
	background-color: var(--pn-ink);
	border-color: var(--pn-ink);
}

.pn-wizard__next:disabled {
	color: rgba(10, 32, 54, 0.45);
	background-color: rgba(199, 159, 63, 0.4);
	border-color: transparent;
	cursor: default;
}

.pn-wizard__back {
	min-block-size: 3rem;
	padding-inline: 1rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--pn-ink);
	background-color: transparent;
	border: 1px solid rgba(10, 32, 54, 0.2);
	border-radius: var(--pn-radius);
	cursor: pointer;
}

.pn-wizard__back:hover,
.pn-wizard__back:focus-visible {
	color: #FFFFFF;
	background-color: var(--pn-ink);
	border-color: var(--pn-ink);
}

/* The script hides the buttons that do not apply to the current step with the `hidden`
   attribute. `[hidden] { display: none }` is a user agent rule, and every author rule
   outranks the user agent stylesheet, so `display: inline-flex` above was un-hiding
   them and the card showed Continue and Send enquiry side by side on step one. An
   author rule has to state it. */
.pn-wizard__back[hidden],
.pn-wizard__next[hidden],
.pn-wizard__submit[hidden],
.pn-wizard__step[hidden] {
	display: none;
}

.pn-wizard__note {
	margin: var(--pn-space-4, 1rem) 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--pn-muted, #5A6B7C);
}

/* Once sent, the questions go and the confirmation stands alone. */
.pn-wizard.is-sent .pn-wizard__step,
.pn-wizard.is-sent .pn-wizard__nav,
.pn-wizard.is-sent .pn-wizard__head,
.pn-wizard.is-sent .pn-wizard__note {
	display: none;
}

.pn-wizard .pn-form__status {
	margin-block-start: var(--pn-space-4, 1rem);
}

@media (max-width: 999px) {
	.pn-wizard {
		max-inline-size: none;
		margin-block-start: var(--pn-space-6, 2rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pn-wizard__seg,
	.pn-wizard__opt,
	.pn-wizard__next,
	.pn-wizard__submit {
		transition: none;
	}
}


/* =====================================================================
   LANGUAGE SWITCHER
   =====================================================================

   Loaded in both languages, so it lives here rather than in pn-rtl.css. */
/* ------------------------------------------------------  */

.pn-lang__list {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pn-lang__item {
	margin: 0;
	padding: 0;
}

/* Colour and background stated on every state, per the convention in pn-skin.css. The
   switcher sits in the navy header, where a rule that sets only a background inherits
   whatever won the cascade for colour. */
/* The GeneratePress selector `.main-navigation .menu-bar-items a` is (0,2,1) and sets
   `color: inherit`, which resolved to GeneratePress's own --contrast, rgb(17, 28, 43),
   against our navy header. Measured 1.05:1, the same figure as the menu icon. The
   component selector carries the region in front of it so it lands at (0,3,0) and wins
   outright, and colour is stated on every state rather than left to inherit. */
.main-navigation .menu-bar-items .pn-lang__link,
.pn-lang__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.25rem;
	min-block-size: 2.25rem;
	padding-inline: 0.5rem;
	border-radius: var(--pn-radius);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.86);
	background-color: transparent;
	border: 1px solid transparent;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.main-navigation .menu-bar-items .pn-lang__link:hover,
.main-navigation .menu-bar-items .pn-lang__link:focus-visible,
.pn-lang__link:hover,
.pn-lang__link:focus-visible {
	color: var(--pn-ink);
	background-color: var(--pn-brass);
	border-color: var(--pn-brass);
}

.pn-lang__link:focus-visible {
	outline: 2px solid var(--pn-brass);
	outline-offset: 2px;
}

/* The current language is not a link. It is marked, not hidden, so the control always
   shows which side you are on. */
.main-navigation .menu-bar-items .pn-lang__link.is-current,
.pn-lang__link.is-current {
	color: var(--pn-brass);
	background-color: rgba(199, 159, 63, 0.14);
	border-color: rgba(199, 159, 63, 0.4);
	cursor: default;
}

/* The Arabic label is a single letter and needs the Arabic face to render properly even
   while sitting on an English page. */
.pn-lang__link[lang="ar"] {
	font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Geeza Pro", system-ui, sans-serif;
	font-size: 1rem;
}

/* In the header the switcher sits after the menu, separated by a hairline so it reads as
   a control rather than another menu item. */
.pn-lang--nav {
	display: flex;
	align-items: center;
	margin-inline-start: 0.75rem;
	padding-inline-start: 0.75rem;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
}

@media (max-width: 768px) {
	/* In the mobile drawer it goes full width under the menu, with the same navy surface
	   the drawer uses, and touch sized targets. */
	.pn-lang--nav {
		inline-size: 100%;
		margin-inline-start: 0;
		padding: 0.75rem 1rem;
		border-inline-start: 0;
		border-block-start: 1px solid rgba(199, 159, 63, 0.3);
	}

	.pn-lang__link {
		min-inline-size: 3rem;
		min-block-size: 2.75rem;
		font-size: 0.9375rem;
	}
}

/* The inline variant, for the shortcode in a page or a widget, sits on a light ground. */
.pn-lang--inline .pn-lang__link {
	color: var(--pn-ink);
}

.pn-lang--inline .pn-lang__link:hover,
.pn-lang--inline .pn-lang__link:focus-visible {
	color: var(--pn-ink);
	background-color: var(--pn-brass);
}