/*
 * Tharwat - main stylesheet
 *
 * Palette, spacing and layout are taken from the supplied landing page design
 * (assets/Tharwat Updated Landing Page.pdf, 1920pt wide canvas).
 *
 *   1. Tokens
 *   2. Reset & base
 *   3. Layout primitives
 *   4. Buttons & links
 *   5. Header & navigation
 *   6. Hero
 *   7. Home sections
 *   8. News cards & archives
 *   9. Forms (incl. the CSS styled select)
 *  10. Footer & scroll to top
 *  11. Motion
 *  12. Responsive
 */

/* ============================================================ 1. Tokens === */

:root {
	/* Sampled directly from the design file. */
	--cream: #f0ede4;
	--cream-deep: #e7e2d6;
	--navy: #050f36;
	--navy-soft: #16204a;
	--gold: #c49a52;
	--gold-2: #c5b079;
	--gold-light: #e0c58e;

	--text: #050f36;
	--text-body: #33383f;
	--text-muted: #5f6672;
	--text-invert: #ffffff;
	--text-invert-soft: rgba(255, 255, 255, 0.78);

	--line: rgba(5, 15, 54, 0.12);
	--line-invert: rgba(255, 255, 255, 0.18);

	--font-primary: 'Gadugi', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--font-secondary: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

	/*
	 * Every size on the site resolves through the Type Scale screen. The step
	 * tokens are kept as the names the rules already use, but they are now
	 * views onto that scale rather than sizes of their own. The clamp in each
	 * fallback is the value measured from the design, used only if the option
	 * has never been saved.
	 */
	--step--2: var(--ts-caption, calc(var(--ts-h7, 18px) - 4px));
	--step--1: var(--ts-small, calc(var(--ts-h7, 18px) - 2px));
	--step-0: var(--ts-h7, clamp(0.9rem, 0.86rem + 0.2vw, 1rem));
	--step-1: var(--ts-body-large, clamp(1.05rem, 0.99rem + 0.28vw, 1.2rem));
	--step-2: var(--ts-h6, clamp(1.2rem, 1.08rem + 0.55vw, 1.55rem));
	--step-3: var(--ts-h3, clamp(1.75rem, 2.7083vw, 52px));
	--step-4: var(--ts-h1, clamp(2.3rem, 1.6rem + 3.2vw, 4.4rem));


	/* The design keeps ~99pt of a 1920pt canvas either side of the content. */
	--container: 1722px;
	--container-wide: 1854px;
	--container-narrow: 860px;
	--gutter: var(--ts-page-margin, clamp(1.15rem, 5.15vw, 6.2rem));
	--section-y: clamp(3.25rem, 1.5rem + 6vw, 7rem);

	/*
	 * One corner radius across the site. Measured off the design: the gold
	 * panel's corner resolves within 4px, the same as the buttons. The larger
	 * names are kept so rules need no rewriting, but they are aliases now.
	 * Pills (999px) and circles (50%) stay as deliberate exceptions.
	 */
	--radius: 4px;
	--radius-lg: var(--radius);
	--radius-xl: var(--radius);

	/* The line motif's stroke. */
	--vector-line: #e1c683;
	--shadow: 0 24px 60px -34px rgba(5, 15, 54, 0.45);

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/*
	 * Header and hero metrics measured from the 1920pt design canvas.
	 * Each value is exact at 1920px wide and scales proportionally below,
	 * with a floor so small screens stay usable.
	 *   logo plate 210x129 at x=66,y=62   nav 18px, 33px gaps
	 *   hero card inset 34px / top 30px   h1 82px/110px   buttons 49px tall
	 */
	/*
	 * Header, redesigned. Measured from Updated Tharwat Landing Page1.pdf:
	 *   band 1920x220, a 2x2 checker of navy and gold, 960x110 per cell
	 *   cream pill inset 17px / 16px, 1886x188, fully rounded (r=94)
	 *   nav pill 1021x64 at x=449 (page-centred), gold #c4af79
	 *   enquiry button 199x64, navy, 20px white
	 */
	--nav-navy: #03005b;
	--band-gold: #c4af79;

	--band-h: clamp(96px, 11.4583vw, 220px);
	--bar-inset-x: 5px;
	--bar-inset-y: 5px;
	--bar-h: clamp(72px, 9.7917vw, 188px);
	--bar-pad-l: clamp(16px, 3.0208vw, 58px);
	--bar-pad-r: clamp(16px, 4.0104vw, 77px);
	--logo-w: clamp(140px, 12.7604vw, 245px);
	--navpill-h: clamp(44px, 3.3333vw, 64px);
	--navpill-pad: clamp(14px, 2.2396vw, 43px);

	/* Inset used by the full-bleed panels (presence, why). */
	--hero-inset-x: clamp(8px, 1.7708vw, 34px);

	--nav-size: var(--ts-h7, clamp(14px, 0.9375vw, 18px));
	/* Everything that used to offset for the header now follows the band. */
	--header-h: var(--band-h);

	--hero-pad-x: clamp(16px, 3.9063vw, 75px);
	--hero-pad-b: clamp(28px, 3.4896vw, 67px);
	--hero-title: var(--ts-h1, clamp(30px, 4.2708vw, 82px));
	--btn-h: var(--ts-button, clamp(42px, 2.6979vw, 51.8px));
	--cta-h: clamp(44px, 2.6458vw, 50.8px);
	--btn-pad-x: clamp(16px, 1.1458vw, 22px);
	--btn-size: var(--ts-h7, clamp(14px, 0.9375vw, 18px));
}

/* ==================================================== 2. Reset & base === */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--text-body);
	font-family: var(--font-secondary);
	font-size: var(--ts-body, var(--step-0));
	line-height: var(--ts-body-lh, 1.62);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

h1, h2, h3, h4, h5 {
	margin: 0 0 0.5em;
	font-family: var(--font-primary);
	font-weight: 400;
	/* A ratio, not a scale value: this applies to every heading level, and the
	   scale's leadings are absolute px meant for one style each. */
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--text);
}

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

a {
	color: var(--navy);
	text-decoration: none;
	transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}

a:hover,
a:focus-visible { color: var(--gold); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }

strong, b { font-weight: 700; }

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--navy);
	color: var(--text-invert);
	border-radius: var(--radius);
}

.skip-link:focus {
	top: 1rem;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
}

/* ============================================== 3. Layout primitives === */

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }

/* Same inset as the hero card, so a panel reads as full-bleed like the banner. */
.container--bleed {
	max-width: none;
	padding-inline: var(--hero-inset-x);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

/*
 * The design leaves 132-162px of clear space between sections (average ~148),
 * so each carries half of that. The orientation and diversified pair is the
 * exception: the design runs them together with only 71px, since their images
 * sit on opposite sides and read as one block.
 */
.section { padding-block: var(--ts-section-y, clamp(2.25rem, 3.8542vw, 74px)); }


.h2 {
	margin: 0 0 0.6em;
	font-size: var(--step-3);
	line-height: var(--ts-h3-lh, 1.15);
	font-weight: 400;
}

.h2--invert { color: var(--text-invert); }

.section-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.section-bar .h2 { margin: 0; }

/* Heading in a narrow left column, body copy on the right. */
/* 716 / 1006 of the 1722 content width puts the body copy at x=816. */
.split {
	display: grid;
	grid-template-columns: minmax(0, 680fr) minmax(0, 1006fr);
	gap: 0;
	align-items: start;
}

.split .h2 {
	margin: 0;
	padding-right: 2rem;
	line-height: var(--ts-h3-lh, 1.154);
}

.split__body {
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh, 1.2);
}

/*
 * Copy on one side, image on the other. The design splits both of these
 * sections at x=960 - the page centre - with an 860px image column, so the
 * grid is an even 50/50 of the 1720 content width and the copy carries the
 * inset instead of a shared gap.
 */
.media-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	align-items: center;
}

.media-split__body {
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh, 1.5);
}

.media-split--image-right .media-split__body { padding-right: clamp(1.25rem, 3.125vw, 60px); }
/*
 * Your values. The top padding nudges the copy down against the image: the
 * column is vertically centred, so padding here moves the heading by half its
 * amount - 14px lands it 138px below the image top, as the design has it.
 */
.media-split--image-left .media-split__body {
	padding-left: clamp(0.25rem, 3.125vw, 60px);
	padding-top: clamp(16px, 2.0833vw, 40px);
}

/* The heading is meant to sit on one line; the column is sized to hold it. */
.media-split--image-left .media-split__body .h2 { text-wrap: balance; }

.media-split__image {
	width: 100%;
	border-radius: var(--radius-lg);
	object-fit: cover;
}

/* Image proportions taken from the design. */
.media-split__image--orientation { aspect-ratio: 860 / 799; }
.media-split__image--diversified { aspect-ratio: 860 / 897; }

.panel {
	position: relative;
	padding: clamp(1.75rem, 4vw, 4.5rem);
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.panel--navy {
	background: var(--navy);
	color: var(--text-invert-soft);
}

.panel--gold {
	background: linear-gradient(100deg, var(--gold-light) 0%, var(--gold-2) 38%, var(--gold) 100%);
	color: var(--navy);
}

.rich { color: var(--text-body); }
.rich--invert { color: var(--text-invert-soft); }
.rich > * + * { margin-top: 1.1em; }

/* A list in the copy is bulleted in the house gold. */
.rich li::marker { color: var(--gold); }

/* ================================================= 4. Buttons & links === */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.6rem;
	border: 1px solid transparent;
	border-radius: 4px;
	font-family: var(--font-secondary);
	font-size: var(--btn-size);
	font-weight: 500;
	/* A ratio, not the scale's leading: the label is flex-centred in the button. */
	line-height: var(--ts-h7-lh);
	cursor: pointer;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
		border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.btn:hover,
.btn:focus-visible { transform: translateY(-2px); }

.btn--sm { padding: 0.7rem 1.35rem; }

/* Sampled from the design: a horizontal gradient, light left to gold right. */
.btn--gold {
	background: linear-gradient(to right, var(--gold-2), var(--gold));
	border-color: transparent;
	color: var(--navy);
}

.btn--gold:hover,
.btn--gold:focus-visible {
	background: linear-gradient(to right, var(--gold-light), var(--gold-2));
	border-color: transparent;
	color: var(--navy);
}

/* The contact form's button: it named a style that was never written, and showed grey. */
.btn--primary {
	background: linear-gradient(to right, var(--gold-2), var(--gold));
	border-color: transparent;
	color: var(--navy);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: linear-gradient(to right, var(--gold-light), var(--gold-2));
	border-color: transparent;
	color: var(--navy);
}

.btn--navy {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--text-invert);
}

.btn--navy:hover,
.btn--navy:focus-visible {
	background: var(--navy-soft);
	border-color: var(--navy-soft);
	color: var(--gold-light);
}

.btn--outline {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--text-invert);
}

.btn--outline:hover,
.btn--outline:focus-visible {
	background: var(--gold-2);
	border-color: var(--gold-2);
	color: var(--navy);
}

.link-underline {
	display: inline-block;
	font-weight: 600;
	font-size: var(--step--1);
	line-height: var(--ts-small-lh);
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.link-underline--gold { color: var(--gold-light); }

.link-underline:hover { color: var(--gold); }

/* ============================================ 5. Header & navigation === */

/*
 * A 220px band across the top - navy and gold in a 2x2 checker - with a cream
 * pill floating on it carrying the logo, the gold nav pill and the enquiry
 * button. All metrics measured from the updated design.
 */
.site-header {
	/*
	 * Declared here, not on :root, so it resolves against this element's own
	 * --band-h - which .is-stuck redefines. A custom property substitutes where
	 * it is declared, so on :root it would always have used the tall band and
	 * the logo would never shrink. The bar is the band less its inset top and
	 * bottom; the logo takes 90% of that, so it stands out in the bar.
	 */
	--logo-h: calc((var(--band-h) - 2 * var(--bar-inset-y)) * 0.9);

	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	height: var(--band-h);
	background:
		linear-gradient(to right, var(--navy) 50%, var(--band-gold) 50%) top / 100% 50% no-repeat,
		linear-gradient(to right, var(--band-gold) 50%, var(--navy) 50%) bottom / 100% 50% no-repeat;
	transition: height 0.35s var(--ease), transform 0.4s var(--ease);
}

.site-header__bar {
	position: absolute;
	inset: var(--bar-inset-y) var(--bar-inset-x);
	background: var(--cream);
	/*
	 * A rounded bar rather than a pill: 50px on the 208px bar of the header at
	 * rest, held at that share of the bar's height so the shallower sticky bar
	 * and a phone's bar take the same shape rather than turning back into a pill.
	 */
	border-radius: calc((var(--band-h) - 2 * var(--bar-inset-y)) * 50 / 208);
	transition: inset 0.35s var(--ease), border-radius 0.35s var(--ease);
}

.site-header__inner {
	display: flex;
	align-items: center;
	height: 100%;
	padding-left: var(--bar-pad-l);
	padding-right: var(--bar-pad-r);
	gap: 1rem;
}

/* No plate any more: the logo sits straight on the cream. */
.site-logo {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	/*
	 * Shrink to the mark rather than hold a fixed box. Collapsed, the box was
	 * wider than the image inside it, so the centred mark started 14px further
	 * in than it does at rest and the bar looked more padded than it is.
	 */
	width: auto;
	max-width: var(--logo-w);
	height: var(--logo-h);
	background: none;
	padding: 0;
	border-radius: 0;
	transition: width 0.35s var(--ease), height 0.35s var(--ease);
}

/*
 * Bounded by the same tokens the box uses, as lengths rather than percentages:
 * a percentage here does not resolve against the grid area, so the mark was
 * sized by its width alone - 127px across an 888x684 logo is 98px tall, which
 * hung below the collapsed bar. Against both lengths it fits either state.
 */
.site-logo img {
	max-width: var(--logo-w);
	max-height: var(--logo-h);
	width: auto;
	height: auto;
	object-fit: contain;
}

.site-logo__text {
	font-family: var(--font-primary);
	font-size: var(--step-1);
	line-height: var(--ts-body-large-lh);
	font-weight: 700;
	color: var(--navy);
}

/* The nav is page-centred, not centred between the logo and the button. */
.nav {
	margin-inline: auto;
}

.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.5833vw, 49.6px);
	height: var(--navpill-h);
	margin: 0;
	padding: 0 var(--navpill-pad);
	list-style: none;
	background: var(--band-gold);
	border-radius: 999px;
	transition: height 0.35s var(--ease);
}

.nav__item { position: relative; }

.nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--nav-size);
	font-weight: 400;
	line-height: 1;
	color: var(--nav-navy);
	white-space: nowrap;
	transition: color 0.25s var(--ease), font-size 0.35s var(--ease);
}

.nav__link:hover,
.nav__link:focus-visible { color: var(--navy); }

/* A parent that only opens its dropdown is a button, dressed as the links beside it. */
.nav__trigger {
	padding: 0;
	font-family: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.nav__item.is-current > .nav__link { font-weight: 600; }

/* Caret on parent items, as in the design. */
.nav__item--parent > .nav__link::after {
	content: '';
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
}

/*
 * Every panel - the dropdowns and the mega menu alike - opens on one line: the
 * foot of the header bar, one gap down. The dropdown is positioned from its
 * own item, which sits at the middle of the bar, so it travels half the bar's
 * height to reach that line; the mega menu is positioned from the bar itself.
 * The bar is the band less its inset top and bottom, and .is-stuck redefines
 * the band, so both follow the header as it shrinks.
 */
.nav {
	--menu-gap: clamp(8px, 0.7292vw, 14px);
	--menu-pad-x: clamp(1.1rem, 1.9792vw, 38px);
	--bar-height: calc(var(--band-h) - 2 * var(--bar-inset-y));
}

.nav__submenu {
	position: absolute;
	top: calc(50% + var(--bar-height) / 2 + var(--menu-gap));
	/* Set in by its own padding, so the links start under the label above. */
	left: calc(-1 * var(--menu-pad-x));
	z-index: 20;
	/* Closed, it must not catch the pointer: it lies over the top of the page. */
	pointer-events: none;
	min-width: 240px;
	margin: 0;
	padding: clamp(1rem, 1.25vw, 24px) var(--menu-pad-x);
	list-style: none;
	background: var(--cream);
	border-top: 2px solid var(--gold);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}

/*
 * .is-hovered is held on for a moment after the pointer leaves, by main.js:
 * the panel opens well below the item, and without it the menu closed while
 * the pointer was still crossing the gap between the two.
 */
.nav__item--parent:hover > .nav__submenu,
.nav__item--parent:focus-within > .nav__submenu,
.nav__item--parent.is-hovered > .nav__submenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/*
 * The dropdown hangs well below its item now, so a strip bridges the gap from
 * the foot of the pill: crossing it the pointer stays inside the item. Only on
 * the dropdown - across the mega menu's full width it would lie over the logo.
 */
.nav__submenu--drop::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: calc((var(--bar-height) - var(--navpill-h)) / 2 + var(--menu-gap));
}

/* The page you are on, in either kind of panel. */
.nav__submenu .nav__item.is-current > .nav__link { color: var(--navy); }

/*
 * Mega menu. A top-level item with grandchildren opens a full-width panel
 * instead of a dropdown: the walker adds .nav__item--mega to the item and
 * .nav__submenu--mega to its list, so the shape of the menu under
 * Appearance > Menus is the only thing that decides which behaviour applies.
 */
.nav__item--mega { position: static; }

.nav__submenu--mega {
	/* Flex, not grid: the number of columns is whatever the menu holds. */
	display: flex;
	align-items: stretch;
	/* From the bar, not the item: the same line the dropdowns open on. */
	top: calc(100% + var(--menu-gap));
	left: 50%;
	transform: translate(-50%, 10px);
	width: min(calc(100vw - 2 * var(--gutter)), var(--container));
	max-width: 100%;
	padding: clamp(1.75rem, 2.2917vw, 44px) 0 clamp(1.5rem, 2.0833vw, 40px);
}

.nav__item--mega:hover > .nav__submenu--mega,
.nav__item--mega:focus-within > .nav__submenu--mega,
.nav__item--mega.is-hovered > .nav__submenu--mega { transform: translate(-50%, 0); }

/* Columns are divided by a hairline rather than a gap, as elsewhere on the site. */
.nav__col {
	position: relative;
	padding-inline: var(--menu-pad-x);
	border-left: 1px solid rgba(5, 15, 54, 0.1);
}

.nav__col:first-child { border-left: 0; }

/*
 * One column holding a lot of groups would otherwise set the height of the
 * whole panel, so it takes twice the width and runs its links in two.
 */
.nav__col { flex: 1 1 0; min-width: 0; }

.nav__col--wide { flex: 2 1 0; }

.nav__col--wide .nav__submenu--column {
	columns: 2;
	column-gap: clamp(1.1rem, 1.9792vw, 38px);
}

.nav__col--wide .nav__submenu--column .nav__item { break-inside: avoid; }

/*
 * A column heading is a heading, not a dropdown: no chevron. And the top bar's
 * nowrap has to be lifted or the group names run over the rule.
 */
.nav__col > .nav__link::after { display: none; }

.nav__col > .nav__link,
.nav__submenu--column .nav__link { white-space: normal; }

/*
 * The heading is a button now - it opens its list in the phone drawer - so it
 * takes the full column and sits left, as the link it replaced did.
 */
.nav__col > .nav__link {
	display: block;
	width: 100%;
	padding: 0;
	text-align: left;
	margin-bottom: clamp(0.8rem, 1.0417vw, 20px);
	font-size: var(--ts-h7, clamp(15px, 0.9375vw, 18px));
	line-height: var(--ts-h7-lh);
	font-weight: 600;
	color: var(--navy);
}

/* The gold rule sits under the words, not across the column. */
.nav__col > .nav__link > span:first-child {
	display: inline-block;
	padding-bottom: 9px;
	border-bottom: 2px solid var(--gold);
}

/* On a desktop the heading opens nothing, so it does not act like a link. */
.nav__col > .nav__link { cursor: default; }
.nav__col > .nav__link:hover { background: none; }

.nav__submenu--column {
	position: static;
	display: block;
	min-width: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	/*
	 * inherit, not visible: visibility inherits, and forcing it on here left
	 * the list hit-testable while the panel above was merely transparent.
	 */
	visibility: inherit;
	pointer-events: inherit;
	transform: none;
	transition: none;
}

/* A link in a dropdown is set exactly as a link in a mega menu column. */
.nav__submenu--drop .nav__link,
.nav__submenu--column .nav__link {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.34rem 0;
	font-size: var(--ts-small);
	line-height: var(--ts-small-lh);
	color: var(--text-body);
	transition: color 0.2s var(--ease);
}

/* On hover the link only takes the navy, as the top-level links do: no dash, no nudge. */
.nav__submenu--drop .nav__link:hover,
.nav__submenu--column .nav__link:hover {
	background: none;
	color: var(--navy);
}

.nav__toggle,
.nav__mobile-extra { display: none; }

.site-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.site-header__cta {
	height: var(--navpill-h);
	padding-inline: clamp(14px, 1.1979vw, 23px);
	font-size: var(--ts-body, clamp(14px, 1.0417vw, 20px));
	font-weight: 600;
	border-radius: 999px;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
		transform 0.25s var(--ease), height 0.35s var(--ease);
	line-height: var(--ts-body-lh);
}

/* Scrolled: the band collapses and the pill tightens up. */
.site-header.is-stuck {
	--band-h: clamp(64px, 6.5vw, 118px);
	--bar-h: clamp(52px, 5.2vw, 96px);
	--logo-w: clamp(110px, 7.8125vw, 150px);
	--navpill-h: clamp(38px, 2.8vw, 54px);
	--nav-size: var(--ts-menu, clamp(13px, 1.83vw, 16px));
	/* Tighter gutters once the bar is shallow; the header at rest keeps its own. */
	--bar-pad-l: clamp(16px, 2.0208vw, 57px);
	--bar-pad-r: clamp(16px, 1.0104vw, 77px);
	/* Nearly the bar's full height, so the logo still reads once the band collapses. */
	--logo-h: calc((var(--band-h) - 2 * var(--bar-inset-y)) * 0.92);

	box-shadow: 0 12px 30px -22px rgba(5, 15, 54, 0.85);
}


/*
 * The menu button is a thin gold ring on the cream bar, with three navy rules
 * inside it: a button that reads as one without adding a second dark mass
 * beside the logo. Opening fills the ring and folds the rules into a cross.
 */
.nav-toggle {
	display: none;
	position: relative;
	width: var(--toggle-size, 44px);
	height: var(--toggle-size, 44px);
	padding: 0;
	background: transparent;
	border: 1px solid var(--gold);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
		transform 0.25s var(--ease);
}

.nav-toggle:hover,
.nav-toggle:focus-visible { background: rgba(196, 154, 82, 0.14); }

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	position: absolute;
	left: 50%;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--navy);
	transform: translateX(-50%);
	transition: transform 0.3s var(--ease), background-color 0.25s var(--ease);
}

.nav-toggle__bar { top: 50%; margin-top: -1px; }

.nav-toggle__bar::before,
.nav-toggle__bar::after { content: ''; left: 0; transform: none; }
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }

/* Open: the ring fills, and the rules cross. */
.nav-open .nav-toggle { background: var(--gold); border-color: var(--gold); }

/* Not opacity: that would take the two rules drawn on it down as well. */
.nav-open .nav-toggle__bar { background: transparent; }

.nav-open .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }

.nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: 98;
	background: rgba(5, 15, 54, 0.55);
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}

.nav-open .nav-backdrop { opacity: 1; }

/* Inner pages sit below the band rather than under it. */
body:not(.is-front) .site-main { padding-top: var(--band-h); }

/* ============================================================== 6. Hero */

/* Card inset 34px / 30px, 1852x898 at 1920 in the design. */
/* The updated design runs the hero full-bleed: no inset, no rounded card. */
.hero {
	padding: 0;
}

.hero__card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(46.77vw, 898px);
	padding: var(--header-h) var(--hero-pad-x) var(--hero-pad-b);
	border-radius: 0;
	overflow: hidden;
	color: var(--text-invert);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }

.hero__video,
.hero__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5, 15, 54, 0.55) 0%, rgba(5, 15, 54, 0.18) 40%, rgba(5, 15, 54, 0.72) 100%);
}

/* The brand line motif - see .vector below. */

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: 60rem;
}

.hero__title {
	margin: 0 0 clamp(16px, 1.6vw, 32px);
	font-size: var(--hero-title);
	font-weight: 300;
	line-height: var(--ts-h1-lh, 1.341);
	letter-spacing: -0.01em;
	color: var(--text-invert);
}

.hero__title strong { font-weight: 700; }

.hero__text {
	max-width: 52ch;
	margin-bottom: 2rem;
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--step-1);
	line-height: var(--ts-body-large-lh);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(8px, 0.599vw, 11.5px);
}

.hero__actions .btn {
	height: var(--btn-h);
	padding-inline: var(--btn-pad-x);
	font-size: var(--btn-size);
	line-height: var(--ts-h7-lh);
}

/* =================================================== 7. Home sections === */

/* Gateway */
/*
 * The gateway copy is set as the design sets it: justified on a measure wide
 * enough to take it, at 24px leading on 20px type, and a line's space between
 * the two paragraphs. Narrow screens keep it ranged left.
 */
@media (min-width: 721px) {
	.section--gateway .rich p {
		line-height: var(--ts-body-lh);
		text-align: justify;
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	.section--gateway .rich > * + * { margin-top: 1.2em; }
}

/* A size up from the shared underlined link, as the design draws this one. */
.section--gateway .link-underline { font-size: var(--ts-h7, clamp(15px, 0.9375vw, 18px));
 line-height: var(--ts-h7-lh); }

/* One row where the column allows it; they wrap inside it where it does not. */
.activity-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.25rem, 2.4vw, 46px) clamp(1rem, 2.4vw, 46px);
	margin: clamp(1.5rem, 2.7604vw, 53px) 0 clamp(1.5rem, 2.3438vw, 45px);
	padding: 0;
	list-style: none;
}

.activity {
	display: flex;
	align-items: center;
	gap: clamp(8px, 0.625vw, 12px);
}

/*
 * The supplied SVGs already draw the gold ring (circle r=49 of a 100 viewBox),
 * so the icon is the whole 100px mark - no extra CSS circle around it.
 */
.activity__icon {
	flex: 0 0 auto;
	display: block;
	width: clamp(56px, 5.2083vw, 100px);
	height: clamp(56px, 5.2083vw, 100px);
}

.activity__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.activity__label {
	/* Two lines each, set in the content, so the three read as one row. */
	min-height: 2lh;
	display: flex;
	align-items: center;
	font-weight: 500;
	font-size: var(--ts-body-large, clamp(15px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh, 1.21);
	color: var(--navy);
}

/*
 * Platform (navy card). Design: card 1720x600, text at x=154 (54px in),
 * media from x=1027 - so the columns are 927 / 793 with no gap, and the
 * collage bleeds to the card edges.
 */
.platform {
	display: grid;
	grid-template-columns: 927fr 793fr;
	gap: 0;
	align-items: stretch;
	padding: 0;
	min-height: clamp(22rem, 31.25vw, 600px);
}

.platform__body {
	align-self: center;
	padding: clamp(2rem, 5.104vw, 98px) clamp(1.5rem, 2vw, 2.5rem)
		clamp(2rem, 5.104vw, 98px) clamp(1.25rem, 2.8125vw, 54px);
	font-size: var(--ts-body-large, clamp(15px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh, 1.208);
}

/* The updated design sets this heading in gold, not white. */
.platform__body .h2 {
	margin-bottom: clamp(12px, 1vw, 20px);
	color: var(--gold-2);
}

/*
 * The map sits in the right half of the card: gold artwork 466x303 at
 * x1196..1662, y1967..2270 on the 1920 canvas.
 */
.platform__map {
	width: min(100%, 26.4063vw);   /* 507 / 1920 */
	height: auto;
	margin-inline: auto;
	border-radius: 0;
}

.platform__body .btn { margin-top: 1.75rem; }

.platform__media {
	align-self: center;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 2vw, 2.5rem);
}

/* Core business sectors */
.sectors {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.9rem, 1.6vw, 1.4rem);
	align-items: start;
}

/*
 * Each card shows its photograph at rest; the navy detail panel from the
 * design slides up over it on hover, or when anything inside it takes focus
 * so it is reachable by keyboard. A card marked "open by default" shows the
 * panel without interaction, which is how the design presents the section.
 */
.sector__card {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--navy);
}

.sector__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s var(--ease), opacity 0.4s var(--ease);
}

.sector:hover .sector__image { transform: scale(1.05); }

.sector__detail {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	/* A long list of tags scrolls inside the card rather than running out of reach under its edge. */
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
	padding: clamp(1.25rem, 2vw, 1.9rem);
	background: var(--navy);
	color: var(--text-invert-soft);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
	pointer-events: none;
}

.sector:hover .sector__detail,
.sector:focus-within .sector__detail,
.sector.is-open .sector__detail {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.sector:hover .sector__image,
.sector:focus-within .sector__image,
.sector.is-open .sector__image { opacity: 0; }

.sector.is-open .sector__image { transform: none; }

.sector__detail-title {
	margin: 0 0 0.75rem;
	font-size: var(--step-2);
	line-height: var(--ts-h6-lh);
	font-weight: 600;
	color: var(--gold-light);
}

.sector__detail-text {
	margin: 0 0 1.1rem;
	font-size: var(--step--1);
	line-height: var(--ts-small-lh);
	/* One short line in a narrow card: justified, it opened wide gaps between the words. */
	text-align: left;
	-webkit-hyphens: manual;
	hyphens: manual;
}

.tag-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tag-pills__item {
	padding: 0.32rem 0.8rem;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--line-invert);
	border-radius: 100px;
	font-size: var(--step--2);
	line-height: var(--ts-caption-lh);
	color: var(--text-invert-soft);
}

/* A tag that is a page of the Commodities menu: the same pill, a link to that page. */
.tag-pills__item--link {
	display: inline-block;
	text-decoration: none;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.tag-pills__item--link:hover,
.tag-pills__item--link:focus-visible {
	border-color: var(--gold);
	background: rgba(196, 154, 82, 0.16);
	color: var(--gold-light);
}

.tag-pills__item--link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.sector__detail-link { margin-top: auto; padding-top: 1.5rem; }

/*
 * Below a large screen the cards are too short for a long list at full
 * spacing (Foodstuff & Beverages lists ten pages): the panel, the pills and
 * the gaps between them tighten so the list and its link still fit the card.
 */
@media (max-width: 1440px) {
	.sector__detail { padding: clamp(0.9rem, 1.3vw, 1.2rem); }
	.sector__detail-title { margin-bottom: 0.4rem; }
	.sector__detail-text { margin-bottom: 0.55rem; }
	.sector .tag-pills { gap: 0.3rem; }
	.sector .tag-pills__item { padding: 0.24rem 0.62rem; }
	.sector__detail-link { padding-top: 0.3rem; }
}

.sector__label {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 1.1rem 0 0;
	font-size: var(--step-1);
	line-height: var(--ts-body-large-lh);
	font-weight: 600;
	/* A name, not copy: justified, a wrapped title spreads "Energy    &". */
	text-align: left;
}

.sector__number { color: var(--gold); }
.sector__name { color: var(--navy); }
.sector:hover .sector__name { color: var(--gold); }

/* Strategic presence (gold panel) */
/* Content sits above the motif; the motif itself stays absolutely placed. */
.presence > *:not(.vector) { position: relative; z-index: 1; }

.presence__intro {
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
	color: var(--navy);
}

.presence__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 5rem);
}

.office__title {
	margin: 0 0 0.75rem;
	font-family: var(--font-secondary);
	font-size: var(--step-1);
	line-height: var(--ts-body-large-lh);
	font-weight: 700;
	color: var(--navy);
}

.office__address {
	margin: 0 0 1.25rem;
	font-size: var(--step--1);
	line-height: var(--ts-small-lh);
	color: rgba(5, 15, 54, 0.85);
}

.office__note {
	margin: 0;
	padding-top: 1.25rem;
	border-top: 1px dashed rgba(5, 15, 54, 0.4);
	font-size: var(--step--1);
	line-height: var(--ts-small-lh);
	color: rgba(5, 15, 54, 0.85);
}

.presence__tagline {
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	font-size: var(--step-2);
	line-height: var(--ts-h6-lh);
	font-weight: 700;
	color: var(--navy);
}

/* Trading philosophy */
.philosophy__subtitle {
	margin: 0 0 0.6rem;
	font-size: var(--step-1);
	line-height: var(--ts-body-large-lh);
	font-weight: 700;
	color: var(--navy);
}

/* The copy runs the full width of the section, level with the row of cards beneath. */
.philosophy__intro {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(0.9rem, 1.6vw, 1.35rem);
}

.step {
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 2vw, 1.75rem);
	background: var(--navy);
	border-radius: var(--radius-lg);
	color: var(--text-invert-soft);
}

.step__icon {
	display: block;
	margin-bottom: 1.5rem;
}

.step__icon img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.step__title {
	margin: 0 0 0.75rem;
	font-family: var(--font-secondary);
	font-size: var(--step-1);
	line-height: var(--ts-body-large-lh);
	font-weight: 600;
	color: var(--gold-light);
}

.step__text {
	margin: 0;
	font-size: var(--step--1);
	line-height: var(--ts-small-lh);
}

/* Orientation / diversified pull quotes */
.lead-in {
	margin-top: clamp(1.25rem, 1.6146vw, 31px);
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh);
	font-weight: 700;
	color: var(--navy);
}

.quote-mark {
	width: clamp(46px, 4.2708vw, 82px);
	margin: clamp(1.25rem, 2.2396vw, 43px) 0 clamp(1rem, 1.5104vw, 29px);
}

.pull-quote {
	margin: 0 0 clamp(0.75rem, 1.4583vw, 28px);
	font-size: var(--ts-h6, clamp(18px, 1.4583vw, 28px));
	font-weight: 700;
	line-height: var(--ts-h6-lh, 1.25);
	color: var(--navy);
}

.pull-quote__text {
	max-width: 62ch;
	margin: 0;
	color: var(--navy);
}

.mini-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.mini__title {
	margin: 0 0 0.4rem;
	font-family: var(--font-secondary);
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh);
	font-weight: 700;
	color: var(--navy);
}

.mini__text {
	margin: 0;
	font-size: var(--ts-body, clamp(14px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh, 1.4);
}

/* Why Tharwat (navy panel) */
.why {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 5vw, 5rem);
	padding-block: clamp(2.5rem, 5vw, 5.5rem);
}



.why__aside { position: relative; z-index: 1; }
.why__aside .h2 { margin-bottom: 1.75rem; }

.why__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.75rem, 3.5vw, 3rem);
}

.reason__icon { display: block; margin-bottom: 1rem; }

/*
 * The icons ship as flat gold SVGs, which would vanish on the gold panel.
 * They are <img> elements, so currentColor is not available - the filter
 * chain below maps that gold to the theme navy.
 */
.reason__icon img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(6%) sepia(48%) saturate(3661%)
		hue-rotate(222deg) brightness(94%) contrast(101%);
}

.reason__title {
	margin: 0 0 0.5rem;
	font-family: var(--font-secondary);
	font-size: var(--step-1);
	line-height: var(--ts-body-large-lh);
	font-weight: 700;
	color: var(--navy);
}

.reason__text {
	margin: 0;
	font-size: var(--step--1);
	line-height: var(--ts-small-lh);
	color: rgba(5, 15, 54, 0.85);
}

/* Closing CTA (gold panel) */
/* The collage bleeds to the panel edges, so the panel itself has no padding. */
.cta {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: stretch;
	padding: 0;
	min-height: clamp(20rem, 26vw, 30rem);
}

.cta__body {
	align-self: center;
	padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(2.5rem, 5vw, 5rem) clamp(1.75rem, 4vw, 4.5rem);
}

.cta__body .h2 { margin-bottom: 1rem; }

.cta__text {
	margin-bottom: 2rem;
	color: rgba(5, 15, 54, 0.85);
}

.cta__media { align-self: stretch; overflow: hidden; }

.cta__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right top;
}

/* ================================================ 8. News & archives === */

.news-grid,
.post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.news-card__link { display: block; color: inherit; }

.news-card__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.news-card__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.55s var(--ease);
}

.news-card__link:hover .news-card__media img { transform: scale(1.04); }

.news-card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1rem 0 0.5rem;
	font-size: var(--step--2);
	line-height: var(--ts-caption-lh);
	color: var(--text-muted);
}

.news-card__label { position: relative; padding-right: 0.5rem; }

.news-card__label::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0.1em;
	bottom: 0.1em;
	width: 1px;
	background: var(--line);
}

.news-card__title {
	margin: 0;
	font-size: var(--step-2);
	font-weight: 400;
	line-height: var(--ts-h6-lh, 1.28);
	color: var(--navy);
	transition: color 0.25s var(--ease);
}

.news-card__link:hover .news-card__title { color: var(--gold); }

.page-banner {
	padding-block: clamp(7rem, 13vw, 10rem) clamp(2.5rem, 5vw, 4rem);
	background: var(--navy);
	background-size: cover;
	background-position: center;
	color: var(--text-invert);
}

.page-banner .container { position: relative; }

/* No design for this banner: H4 is the 40px it showed, now read from the scale. */
.page-banner__title {
	margin: 0;
	font-size: var(--ts-h4);
	line-height: var(--ts-h4-lh);
	color: var(--text-invert);
}

.page-banner__text,
.page-banner__meta {
	margin-top: 0.75rem;
	color: var(--text-invert-soft);
}

.page-banner__meta {
	display: flex;
	gap: 1rem;
	font-size: var(--step--1);
	line-height: var(--ts-small-lh);
}

/* An article takes the ordinary section padding, as every other page's first section does. */
.section--page,
.section--archive { padding-block: var(--section-y); }

/* ------------------------------------------------------------ newsroom */

/*
 * The Newsroom: the filter over the listing, then an article beside its
 * sidebar. Every size and leading reads Theme Settings > Typescale.
 */

/* The introduction, the filter and the closing panel share one run of space. */
.section--page-intro + .section--blog,
.section--blog + .section--blog-close { padding-top: 0; }

.blog-filter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, clamp(220px, 18vw, 340px)) auto;
	gap: clamp(0.6rem, 0.8333vw, 16px);
	align-items: stretch;
	margin-bottom: clamp(1.25rem, 2.0833vw, 40px);
	padding: clamp(0.6rem, 0.8333vw, 16px);
	background: var(--cream-deep);
	border-radius: var(--radius);
}

.blog-filter__search { position: relative; }

.blog-filter__icon {
	position: absolute;
	top: 50%;
	left: 1rem;
	color: var(--gold);
	transform: translateY(-50%);
	pointer-events: none;
}

.blog-filter .form__control,
.blog-filter .sselect__trigger {
	height: 100%;
	font-size: var(--ts-h7);
	line-height: var(--ts-h7-lh);
}

/* Room for the magnifier; named twice over, since .form__control's own padding comes later in the file. */
.blog-filter .blog-filter__input { padding-left: 2.9rem; }

.blog-filter__submit { padding-inline: clamp(1.25rem, 1.875vw, 36px); }

.blog-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1rem;
	margin: 0 0 clamp(1.25rem, 2.0833vw, 40px);
	font-size: var(--ts-h7);
	line-height: var(--ts-h7-lh);
	color: var(--text-muted);
}

.blog-summary__clear {
	font-weight: 600;
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.blog-summary__clear:hover { color: var(--gold); }

.blog-empty {
	padding: clamp(2rem, 4.1667vw, 80px) clamp(1.25rem, 3.125vw, 60px);
	text-align: center;
	background: var(--cream-deep);
	border-radius: var(--radius);
}

.blog-empty__text {
	margin: 0 0 1.25rem;
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	color: var(--text-body);
}

/* The gold panel that closes a page: the Newsroom's first page, and the contact page. */
.blog-close,
.closing-panel {
	padding: clamp(1.75rem, 3.6458vw, 70px);
	text-align: center;
}

.blog-close__title,
.closing-panel__title {
	margin: 0 0 clamp(0.5rem, 0.8333vw, 16px);
	font-size: var(--ts-h3);
	line-height: var(--ts-h3-lh);
	color: var(--navy);
}

.blog-close__text,
.closing-panel__text {
	margin: 0 auto;
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	color: var(--navy);
}

/*
 * On the contact page the closing panel also carries the note on what an
 * enquiry should include, under a hairline, with the navy button to the
 * enquiry form beneath it.
 */
.closing-panel__note {
	margin: clamp(1.25rem, 2.0833vw, 40px) auto 0;
	padding-top: clamp(1.25rem, 2.0833vw, 40px);
	border-top: 1px solid rgba(5, 15, 54, 0.18);
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	color: var(--navy);
}

.closing-panel__action { margin-top: clamp(1.25rem, 1.875vw, 36px); }

/*
 * Over an article the gold band carries its category, date and reading time,
 * and the title is set as a headline, smaller than a page's name and over more lines.
 */
.cbanner--post .cbanner__title {
	max-width: 30ch;
	font-size: var(--ts-h2);
	line-height: var(--ts-h2-lh);
	font-weight: 500;
	text-transform: none;
}

.cbanner__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.85rem;
	margin: 0 0 clamp(0.75rem, 1.25vw, 24px);
	font-size: var(--ts-h7);
	line-height: var(--ts-h7-lh);
	font-weight: 500;
	color: var(--text-invert);
}

.cbanner--gold .cbanner__meta { color: var(--navy); }

.cbanner__chip {
	display: inline-block;
	padding: 0.2rem 0.85rem;
	border-radius: 999px;
	background: var(--navy);
	color: var(--text-invert);
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.cbanner__chip:hover,
.cbanner__chip:focus-visible { background: var(--navy-soft); color: var(--gold-light); }

.cbanner__sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.55;
}

/* The article beside its sidebar, which stays in view under the header. */
.post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, clamp(280px, 21vw, 400px));
	gap: clamp(2rem, 4.1667vw, 80px);
	align-items: start;
}

.post-main__thumb { margin: 0 0 clamp(1.5rem, 2.5vw, 48px); }

.post-main__thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.post-sidebar {
	position: sticky;
	top: calc(clamp(64px, 6.5vw, 118px) + clamp(1.5rem, 2.5vw, 48px));
	display: grid;
	gap: clamp(1.25rem, 2.0833vw, 40px);
}

.post-widget {
	padding: clamp(1.25rem, 1.875vw, 36px);
	background: #fff;
	border-top: 3px solid var(--gold);
	border-radius: var(--radius);
}

.post-widget__title {
	margin: 0 0 clamp(0.75rem, 1.25vw, 24px);
	font-size: var(--ts-body-large);
	line-height: var(--ts-body-large-lh);
	font-weight: 600;
	color: var(--navy);
}

.post-widget__categories,
.post-widget__recent {
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-widget__categories li + li { border-top: 1px solid var(--line); }

.post-widget__categories a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 0;
	font-size: var(--ts-h7);
	line-height: var(--ts-h7-lh);
	color: var(--text-body);
	transition: color 0.2s var(--ease);
}

.post-widget__categories svg {
	flex: none;
	color: var(--gold);
	transition: transform 0.2s var(--ease);
}

.post-widget__categories a:hover,
.post-widget__categories .is-current a { color: var(--navy); }

.post-widget__categories .is-current a { font-weight: 600; }
.post-widget__categories a:hover svg { transform: translateX(3px); }

.post-widget__recent { display: grid; gap: clamp(0.9rem, 1.25vw, 24px); }

.recent-post {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 0.9rem;
	align-items: center;
	color: inherit;
}

.recent-post__thumb {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--cream-deep);
}

.recent-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--ease);
}

.recent-post:hover .recent-post__thumb img { transform: scale(1.06); }

.recent-post__title {
	display: block;
	font-size: var(--ts-small);
	line-height: var(--ts-small-lh);
	font-weight: 600;
	color: var(--navy);
	transition: color 0.2s var(--ease);
}

.recent-post:hover .recent-post__title { color: var(--gold); }

.recent-post__date {
	display: block;
	margin-top: 0.3rem;
	font-size: var(--ts-caption);
	line-height: var(--ts-caption-lh);
	color: var(--text-muted);
}

/* Under the article: its tags, its author, and the articles either side. */
.post-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: clamp(2rem, 3.125vw, 60px);
	padding-top: clamp(1.25rem, 1.875vw, 36px);
	border-top: 1px solid var(--line);
}

.post-tags__label {
	font-size: var(--ts-h7);
	line-height: var(--ts-h7-lh);
	font-weight: 600;
	color: var(--navy);
}

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

.tag-list a {
	display: inline-block;
	padding: 0.3rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	font-size: var(--ts-small);
	line-height: var(--ts-small-lh);
	color: var(--text-body);
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.tag-list a:hover,
.tag-list a:focus-visible { border-color: var(--gold-2); background: var(--gold-2); color: var(--navy); }

.author-box {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(1rem, 1.5625vw, 30px);
	align-items: start;
	margin-top: clamp(1.5rem, 2.5vw, 48px);
	padding: clamp(1.25rem, 2.0833vw, 40px);
	background: #fff;
	border-left: 3px solid var(--gold);
	border-radius: var(--radius);
}

.author-box__avatar {
	display: block;
	width: clamp(64px, 5vw, 96px);
	height: clamp(64px, 5vw, 96px);
	border-radius: 50%;
	object-fit: cover;
}

.author-box__label {
	margin: 0;
	font-size: var(--ts-caption);
	line-height: var(--ts-caption-lh);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold);
}

.author-box__name {
	margin: 0.2rem 0 0;
	font-size: var(--ts-h6);
	line-height: var(--ts-h6-lh);
	color: var(--navy);
}

.author-box__bio {
	margin: 0.6rem 0 0;
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	color: var(--text-body);
}

.author-box__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.9rem;
	font-size: var(--ts-h7);
	line-height: var(--ts-h7-lh);
	font-weight: 600;
	color: var(--navy);
}

.author-box__link span { text-decoration: underline; text-underline-offset: 4px; }
.author-box__link svg { color: var(--gold); transition: transform 0.25s var(--ease); }
.author-box__link:hover { color: var(--gold); }
.author-box__link:hover svg { transform: translateX(4px); }

.post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.25vw, 24px);
	margin-top: clamp(1.5rem, 2.5vw, 48px);
}

.post-nav__link {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1rem, 1.5625vw, 30px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: inherit;
	transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.post-nav__link:hover,
.post-nav__link:focus-visible { border-color: var(--gold); transform: translateY(-2px); }

.post-nav__link--next { align-items: flex-end; text-align: right; }

.post-nav__label {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--ts-caption);
	line-height: var(--ts-caption-lh);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold);
}

.post-nav__title {
	font-size: var(--ts-h7);
	line-height: var(--ts-h7-lh);
	font-weight: 600;
	color: var(--navy);
	transition: color 0.2s var(--ease);
}

.post-nav__link:hover .post-nav__title { color: var(--gold); }

/*
 * The article's own copy, as the classic editor writes it: every heading
 * level, lists and lists within lists, quotations, tables, images and their
 * captions, code, rules and definition lists.
 */
.entry-content {
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	color: var(--text-body);
}

.entry-content > * { margin-block: 0; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content > :first-child { margin-top: 0; }

.entry-content :is(h1, h2, h3, h4, h5, h6) {
	margin: 1.8em 0 0;
	font-family: var(--font-primary);
	font-weight: 600;
	color: var(--navy);
}

.entry-content > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.entry-content :is(h1, h2, h3, h4, h5, h6) + * { margin-top: 0.6em; }

.entry-content h1 { font-size: var(--ts-h3); line-height: var(--ts-h3-lh); }
.entry-content h2 { font-size: var(--ts-h4); line-height: var(--ts-h4-lh); }
.entry-content h3 { font-size: var(--ts-h5); line-height: var(--ts-h5-lh); }
.entry-content h4 { font-size: var(--ts-h6); line-height: var(--ts-h6-lh); }
.entry-content h5 { font-size: var(--ts-body-large); line-height: var(--ts-body-large-lh); }

.entry-content h6 {
	font-size: var(--ts-h7);
	line-height: var(--ts-h7-lh);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold);
}

.entry-content a {
	color: var(--navy);
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s var(--ease);
}

.entry-content a:hover { color: var(--gold); }

.entry-content :is(strong, b) { font-weight: 700; color: var(--navy); }

.entry-content mark { padding: 0 0.2em; background: var(--gold-light); color: var(--navy); }

.entry-content :is(ul, ol) { margin-bottom: 0; padding-left: 1.5em; }
.entry-content li + li,
.entry-content li > :is(ul, ol) { margin-top: 0.5em; }
.entry-content li::marker { color: var(--gold); }
.entry-content ol > li::marker { font-weight: 700; }
.entry-content ul ul { list-style-type: circle; }
.entry-content ol ol { list-style-type: lower-alpha; }

.entry-content blockquote {
	margin-inline: 0;
	padding: clamp(1rem, 1.875vw, 36px) clamp(1.25rem, 2.5vw, 48px);
	background: #fff;
	border-left: 4px solid var(--gold);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: var(--ts-body-large);
	line-height: var(--ts-body-large-lh);
	font-style: italic;
	color: var(--navy);
}

.entry-content blockquote p { margin: 0; }
.entry-content blockquote p + p { margin-top: 0.75em; }

.entry-content blockquote :is(cite, footer) {
	display: block;
	margin-top: 0.75em;
	font-size: var(--ts-small);
	line-height: var(--ts-small-lh);
	font-style: normal;
	font-weight: 600;
	color: var(--gold);
}

/* A table sits in a box of its own (inc/blog.php) and scrolls inside it when wide. */
.entry-table {
	overflow-x: auto;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.entry-content table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: var(--ts-small);
	line-height: var(--ts-small-lh);
}

.entry-content :is(th, td) {
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}

.entry-content th {
	font-weight: 600;
	background: var(--navy);
	color: var(--text-invert);
}

.entry-content tbody tr:nth-child(even) { background: rgba(196, 154, 82, 0.07); }
.entry-content tbody tr:last-child :is(th, td) { border-bottom: 0; }

.entry-content caption {
	caption-side: bottom;
	padding: 0.6rem 1rem;
	text-align: left;
	font-size: var(--ts-caption);
	line-height: var(--ts-caption-lh);
	color: var(--text-muted);
}

.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.entry-content :is(figure, .wp-caption) { max-width: 100%; margin-inline: 0; }

.entry-content :is(figcaption, .wp-caption-text) {
	margin-top: 0.6rem;
	text-align: center;
	font-size: var(--ts-caption);
	line-height: var(--ts-caption-lh);
	color: var(--text-muted);
}

.entry-content .alignleft { float: left; max-width: 50%; margin: 0.3em 1.5em 1em 0; }
.entry-content .alignright { float: right; max-width: 50%; margin: 0.3em 0 1em 1.5em; }
.entry-content .aligncenter { display: block; margin-inline: auto; }
.entry-content::after { content: ''; display: table; clear: both; }

.entry-content hr {
	width: 64px;
	height: 3px;
	margin-block: 2em;
	border: 0;
	background: var(--gold);
}

.entry-content :is(code, kbd) {
	padding: 0.1em 0.4em;
	border-radius: 4px;
	background: var(--cream-deep);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--ts-small);
	line-height: var(--ts-small-lh);
}

.entry-content pre {
	overflow-x: auto;
	padding: 1rem 1.25rem;
	border-radius: var(--radius);
	background: var(--navy);
	color: var(--text-invert);
	font-size: var(--ts-small);
	line-height: var(--ts-small-lh);
}

.entry-content pre code { padding: 0; background: none; color: inherit; }

.entry-content dt { font-weight: 600; color: var(--navy); }
.entry-content dd { margin: 0.25em 0 0 1.25em; }

.page-links {
	font-size: var(--ts-small);
	line-height: var(--ts-small-lh);
}

@media (max-width: 1024px) {
	.post-layout { grid-template-columns: minmax(0, 1fr); }

	/* Under the article, the two widgets side by side. */
	.post-sidebar {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

@media (max-width: 720px) {
	.blog-filter { grid-template-columns: minmax(0, 1fr); }
	.post-sidebar { grid-template-columns: minmax(0, 1fr); }
	.author-box { grid-template-columns: minmax(0, 1fr); }
	.post-nav { grid-template-columns: minmax(0, 1fr); }
	.post-nav__link--next { align-items: flex-start; text-align: left; }

	.entry-content :is(.alignleft, .alignright) {
		float: none;
		max-width: 100%;
		margin: 0 0 1em;
	}
}

.pagination {
	display: flex;
	justify-content: center;
	margin-top: 3rem;
}

.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.5rem;
	margin-inline: 0.2rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--navy);
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background: var(--gold-2);
	border-color: var(--gold-2);
	color: var(--navy);
}

.error-404 { text-align: center; padding-block: clamp(4rem, 10vw, 8rem); }

.error-404__code {
	margin: 0;
	font-family: var(--font-primary);
	font-size: var(--ts-h1);
	font-weight: 800;
	line-height: var(--ts-h1-lh);
	color: rgba(196, 154, 82, 0.35);
}

/* The 404 title reads the scale: H4, the 40px it showed. */
.error-404__title {
	font-size: var(--ts-h4);
	line-height: var(--ts-h4-lh);
}

.search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 480px;
	margin-top: 1.5rem;
}

.search-form__input {
	flex: 1;
	padding: 0.8rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-family: inherit;
}

.search-form__submit {
	padding: 0.8rem 1.5rem;
	background: var(--gold-2);
	border: none;
	border-radius: var(--radius);
	color: var(--navy);
	font-weight: 600;
	cursor: pointer;
}

.no-results,
.nav__empty { margin: 0; }

/* =========================================================== 9. Forms === */

/*
 * The contact section: the introduction, the enquiry note and the offices on
 * the left, the form on the right. It takes the ordinary section padding, as
 * every page's first section does under its banner.
 */
.contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: stretch;
}

.contact__text {
	margin: 0;
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	color: var(--text-body);
}

/* The heading and introduction run the full width over the addresses and the form. */
.contact__head { margin-bottom: clamp(1.5rem, 3.125vw, 60px); }

/*
 * The addresses open the left column, level with the top of the form, and
 * spread down it so the last rule lands where the form ends: the column
 * takes the form's height and the entries share out the room between them.
 */
.contact__intro { display: flex; flex-direction: column; }

.contact__intro > .contact-details:first-child { margin-top: 0; }

.contact__intro > .contact-details {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
}

.contact__note {
	margin-top: clamp(1.25rem, 1.875vw, 36px);
	padding: clamp(1rem, 1.5625vw, 30px);
	background: #fff;
	border-left: 3px solid var(--gold);
	border-radius: var(--radius);
}

.contact__note p {
	margin: 0 0 1rem;
	font-size: var(--ts-small);
	line-height: var(--ts-small-lh);
	color: var(--text-body);
}

.contact-details { margin: clamp(1.5rem, 2.5vw, 48px) 0 0; padding: 0; list-style: none; }

.contact-details__item {
	display: flex;
	gap: 1rem;
	padding-block: clamp(0.9rem, 1.25vw, 24px);
	border-bottom: 1px solid var(--line);
}

.contact-details__item:first-child { padding-top: 0; }

/* The rules divide the entries; the last one closes on its own words. */
.contact-details__item:last-child { padding-bottom: 0; border-bottom: 0; }

.contact-details__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--gold);
	color: var(--navy);
}

.contact-details__icon img { width: 22px; height: 22px; object-fit: contain; }
.contact-details__icon svg { width: 20px; height: 20px; }

.contact-details__body { display: grid; gap: 0.15rem; min-width: 0; }

.contact-details__label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--ts-body-large);
	line-height: var(--ts-body-large-lh);
	font-weight: 600;
	color: var(--navy);
}

.contact-details__value {
	display: block;
	font-size: var(--ts-h7);
	line-height: var(--ts-h7-lh);
	font-weight: 600;
	color: var(--navy);
	overflow-wrap: anywhere;
}

/* An address reads as copy; a number or an email as something to press. */
.contact-details__item--place .contact-details__value { font-weight: 400; color: var(--text-body); }

a.contact-details__value { transition: color 0.2s var(--ease); }
a.contact-details__value:hover,
a.contact-details__value:focus-visible { color: var(--gold); }

.form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.15rem;
}

.form__row--full,
.form__row--captcha { grid-column: 1 / -1; }

.form__label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--step--1);
	line-height: var(--ts-small-lh);
	font-weight: 600;
	color: var(--navy);
}

.form__req { color: var(--gold); }

.form__control {
	width: 100%;
	padding: 0.85rem 1.05rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: var(--step-0);
	line-height: var(--ts-h7-lh);
	color: var(--text);
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.form__control:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(196, 154, 82, 0.18);
}

textarea.form__control { resize: vertical; min-height: 140px; }

.form__row.has-error .form__control,
.form__row.has-error .sselect__trigger { border-color: #c0392b; }

.form__error {
	display: block;
	margin-top: 0.3rem;
	min-height: 1em;
	font-size: var(--step--2);
	line-height: var(--ts-caption-lh);
	color: #c0392b;
}

.form__honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form__actions { margin-top: 1.5rem; }

.form__spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(5, 15, 54, 0.25);
	border-top-color: var(--navy);
	border-radius: 50%;
	animation: tharwat-spin 0.8s linear infinite;
}

.form.is-sending .form__spinner { display: block; }

@keyframes tharwat-spin { to { transform: rotate(360deg); } }

.form__message { margin-top: 1.15rem; }

.form__message.is-success,
.form__message.is-error {
	padding: 0.85rem 1.05rem;
	border-radius: var(--radius);
}

.form__message.is-success {
	background: rgba(39, 174, 96, 0.1);
	border-left: 3px solid #27ae60;
	color: #1e7a44;
}

.form__message.is-error {
	background: rgba(192, 57, 43, 0.08);
	border-left: 3px solid #c0392b;
	color: #a4291c;
}

/*
 * The contact form sits on a navy panel: white labels, gold marks on the
 * required ones, the fields white, and the gold Send Enquiry button. Errors
 * and the result message lighten to read on navy. The panel sets no text
 * colour of its own: the phone field's dial code and the dropdown lists
 * inherit it, and would turn white on their white ground. The enquiry
 * modal's form keeps its light ground.
 */
.section--contact .form {
	padding: clamp(1.5rem, 2.6042vw, 50px);
	background: var(--navy);
	border-radius: var(--radius);
}

.section--contact .form__label { color: var(--text-invert); }

.section--contact .form__req { color: var(--gold-light); }

.section--contact .form__control { border-color: transparent; }

.section--contact .form__error { color: #ffab9f; }

.section--contact .form__row.has-error .form__control,
.section--contact .form__row.has-error .sselect__trigger { border-color: #ff8a7a; }

.section--contact .form a { color: var(--gold-light); }

.section--contact .form__message.is-success { background: rgba(39, 174, 96, 0.18); color: #a8e6c1; }

.section--contact .form__message.is-error { background: rgba(192, 57, 43, 0.22); color: #ffc0b8; }

/* --- CSS styled select (never a bare native dropdown) --- */

.sselect { position: relative; }

/*
 * The native select stays in the DOM so the form still submits and still
 * works without JavaScript; it is visually replaced by the styled listbox.
 */
.sselect__native {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.sselect__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 0.85rem 1.05rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: var(--step-0);
	line-height: var(--ts-h7-lh);
	color: var(--text-muted);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.sselect.has-value .sselect__trigger { color: var(--text); }

.sselect__trigger:focus-visible,
.sselect.is-open .sselect__trigger {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(196, 154, 82, 0.18);
}

.sselect__arrow {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--gold);
	border-bottom: 2px solid var(--gold);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.25s var(--ease);
}

.sselect.is-open .sselect__arrow { transform: rotate(-135deg) translate(-2px, -2px); }

.sselect__list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 30;
	max-height: 260px;
	margin: 0;
	padding: 0.35rem;
	list-style: none;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

/*
 * Opening, visibility turns on at once rather than fading with the rest: a
 * list still hidden at that instant cannot give its search box the focus.
 */
.sselect.is-open .sselect__list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s;
}

.sselect__option {
	padding: 0.6rem 0.8rem;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.sselect__option.is-active,
.sselect__option:hover {
	background: rgba(196, 154, 82, 0.14);
	color: var(--navy);
}

.sselect__option.is-selected { font-weight: 600; color: var(--gold); }
.sselect__option--placeholder { color: var(--text-muted); }
.sselect__option.is-disabled { opacity: 0.45; cursor: not-allowed; }

.iti { width: 100%; }
.iti input.form__control { width: 100%; }

/* --- Styled select: group headings, and a search box for long lists --- */

.sselect__group {
	padding: 0.75rem 0.8rem 0.3rem;
	font-size: var(--ts-caption);
	line-height: var(--ts-caption-lh);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold);
	cursor: default;
}

/* The box stays at the top of the list while it scrolls. */
.sselect__search-row {
	position: sticky;
	top: -0.35rem;
	z-index: 1;
	margin: -0.35rem -0.35rem 0;
	padding: 0.35rem 0.35rem 0.5rem;
	background: #fff;
}

.sselect__search {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: var(--ts-small);
	line-height: var(--ts-small-lh);
	color: var(--text);
}

.sselect__search:focus { outline: none; border-color: var(--gold); }

.sselect__empty {
	padding: 0.6rem 0.8rem;
	font-size: var(--ts-small);
	line-height: var(--ts-small-lh);
	color: var(--text-muted);
}

.sselect--search .sselect__list { max-height: 340px; }

/* --- Toggle: a checkbox drawn as a switch --- */

.toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	cursor: pointer;
	font-size: var(--ts-small);
	line-height: var(--ts-small-lh);
	font-weight: 600;
	color: var(--navy);
}

.toggle__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.toggle__track {
	position: relative;
	flex: none;
	width: 46px;
	height: 26px;
	border-radius: 999px;
	background: var(--line);
	transition: background-color 0.2s var(--ease);
}

.toggle__track::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(5, 15, 54, 0.25);
	transition: transform 0.2s var(--ease);
}

.toggle__input:checked + .toggle__track { background: var(--gold); }
.toggle__input:checked + .toggle__track::after { transform: translateX(20px); }
.toggle__input:focus-visible + .toggle__track { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --- The product enquiry modal --- */

html.has-modal { overflow: hidden; }

.enquiry-modal {
	width: min(100% - 2rem, 880px);
	max-width: none;
	max-height: calc(100dvh - 2rem);
	margin: auto;
	padding: 0;
	overflow: auto;
	overscroll-behavior: contain;
	border: 0;
	border-top: 3px solid var(--gold);
	border-radius: var(--radius);
	background: var(--cream);
	color: var(--text);
	box-shadow: var(--shadow);
}

.enquiry-modal::backdrop {
	background: rgba(5, 15, 54, 0.72);
	backdrop-filter: blur(2px);
}

.enquiry-modal[open] { animation: enquiry-in 0.28s var(--ease); }

@keyframes enquiry-in {
	from { opacity: 0; transform: translateY(12px); }
}

.enquiry-modal__inner {
	position: relative;
	padding: clamp(1.5rem, 2.5vw, 48px);
}

.enquiry-modal__close {
	position: absolute;
	top: clamp(0.75rem, 1.25vw, 24px);
	right: clamp(0.75rem, 1.25vw, 24px);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: #fff;
	color: var(--navy);
	cursor: pointer;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.enquiry-modal__close:hover,
.enquiry-modal__close:focus-visible {
	outline: none;
	border-color: var(--gold);
	color: var(--gold);
}

.enquiry-modal__title {
	margin: 0 3rem 0 0;
	font-size: var(--ts-h4);
	line-height: var(--ts-h4-lh);
	color: var(--navy);
}

.enquiry-modal__intro {
	margin: clamp(0.5rem, 0.8333vw, 16px) 0 clamp(1.25rem, 1.875vw, 36px);
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	color: var(--text-body);
}

/*
 * The modal and its product list scroll on a scrollbar of the site's own, not
 * the browser's grey one: a slim gold pill on no track, clear of the modal's
 * gold top rule and its rounded corners. Chrome, Edge and Safari draw it from
 * the ::-webkit-scrollbar rules; Firefox takes only a width and colours.
 */
.enquiry-modal::-webkit-scrollbar,
.sselect__list::-webkit-scrollbar { width: 12px; }

.enquiry-modal::-webkit-scrollbar-track,
.sselect__list::-webkit-scrollbar-track { background: transparent; }

.enquiry-modal::-webkit-scrollbar-track { margin-block: 10px; }
.sselect__list::-webkit-scrollbar-track { margin-block: 6px; }

.enquiry-modal::-webkit-scrollbar-thumb,
.sselect__list::-webkit-scrollbar-thumb {
	border: 4px solid transparent;
	border-radius: 999px;
	background: rgba(196, 154, 82, 0.55) padding-box;
}

.enquiry-modal::-webkit-scrollbar-thumb:hover,
.sselect__list::-webkit-scrollbar-thumb:hover { background-color: var(--gold); }

@supports (-moz-appearance: none) {
	.enquiry-modal,
	.sselect__list {
		scrollbar-width: thin;
		scrollbar-color: rgba(196, 154, 82, 0.7) transparent;
	}
}

/* On a phone the modal is the whole screen, and the fields run one to a row. */
@media (max-width: 640px) {
	.enquiry-modal {
		width: 100%;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}

	.enquiry-modal .form__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.enquiry-modal[open] { animation: none; }
}

/* ============================================ 10. Footer & scroll top === */

/*
 * Footer metrics from the design (1920 canvas): full-bleed navy 823px tall,
 * content on the 1722 container, columns starting at x=100 / 987 / 1277.
 */
.site-footer {
	position: relative;
	margin-top: var(--section-y);
	padding-top: clamp(2.5rem, 5.1563vw, 99px);
	background: var(--navy);
	color: var(--text-invert-soft);
	overflow: hidden;
}



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

/*
 * Two columns: brand on the left, everything else stacked on the right. The
 * design runs the address alongside the action links rather than below the
 * whole top row, which is what keeps the footer to 823px.
 */
.site-footer__grid {
	display: grid;
	grid-template-columns: 887fr 835fr;
	gap: 0;
}

/* 290 / 545 puts the two headings at x=987 and x=1277. */
.site-footer__navs {
	display: grid;
	grid-template-columns: 290fr 545fr;
	gap: 0;
}

/* The stacked mark, 292px tall on the 1920 canvas. */
.site-footer__logo img {
	max-height: clamp(140px, 15.2083vw, 292px);
	width: auto;
	margin-bottom: clamp(1.5rem, 4.6875vw, 90px);
}

/* Each footer heading sits in a gold pill, 48px tall in the design. */
.site-footer__heading {
	display: inline-block;
	margin-bottom: clamp(0.75rem, 1.1979vw, 23px);
	padding: clamp(0.5rem, 0.625vw, 12px) clamp(1rem, 1.4583vw, 28px);
	border-radius: 999px;
	background: var(--gold-light);
	font-family: var(--font-secondary);
	font-size: var(--ts-body-large, clamp(17px, 1.25vw, 24px));
	font-weight: 400;
	line-height: 1;
	color: var(--navy);
}

.footer-menu,
.footer-utility-menu,
.action-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 52px between item baselines in the design: the H7 leading plus 28px. */
.footer-menu li {
	margin-bottom: clamp(0.7rem, 1.4583vw, 28px);
	line-height: var(--ts-h7-lh, 1.3);
}

.footer-menu a { font-size: var(--ts-h7, clamp(15px, 0.9375vw, 18px));
 line-height: var(--ts-h7-lh); }

.footer-menu a,
.action-links__link { color: var(--text-invert-soft); }

.footer-menu a:hover,
.action-links__link:hover { color: var(--gold-light); }

.action-links { max-width: clamp(17rem, 24vw, 460px); }

.action-links__item { border-bottom: 1px solid transparent; }

.action-links__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-block: clamp(0.5rem, 0.8333vw, 16px);
	font-size: var(--ts-body-large, clamp(16px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh);
}

.action-links__arrow { transition: transform 0.25s var(--ease); }
.action-links__link:hover .action-links__arrow { transform: translateX(5px); }

.social-list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(10px, 0.8854vw, 17px);
	margin: clamp(1.25rem, 2.5vw, 48px) 0 0;
	padding: 0;
	list-style: none;
}

/* The supplied SVGs already include their rounded-square frame, so the
   link is a bare 43px box - no extra border. */
.social-list__link {
	position: relative;
	display: block;
	width: clamp(34px, 1.9792vw, 38px);
	height: clamp(34px, 1.9792vw, 38px);
	transition: transform 0.25s var(--ease);
}

.social-list__link:hover { transform: translateY(-3px); }

.social-list__icon {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.2s var(--ease);
}

.social-list__icon--hover { position: absolute; inset: 0; opacity: 0; }
.social-list__link:hover .social-list__icon--hover { opacity: 1; }
.social-list__link:hover .social-list__icon:not(.social-list__icon--hover) { opacity: 0; }

/* Address and copyright line up with the link columns, as in the design. */
.site-footer__contact { margin-top: clamp(1.5rem, 2.8646vw, 55px); }

.site-footer__address-title {
	margin: 0 0 clamp(0.6rem, 1.4583vw, 28px);
	font-size: var(--ts-body-large, clamp(17px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh);
	color: var(--text-invert);
}

.site-footer__address {
	margin: 0;
	/* 554px in the design, which keeps the street line to one row. */
	max-width: clamp(20rem, 28.8542vw, 554px);
	font-size: var(--ts-h7, clamp(15px, 0.9375vw, 18px));
	line-height: var(--ts-h7-lh, 1.28);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	margin-top: clamp(1.5rem, 3.5938vw, 69px);
	padding-bottom: clamp(2rem, 4.1667vw, 80px);
	font-size: var(--step--1);
	line-height: var(--ts-small-lh);
}

.site-footer__copyright {
	margin: 0 0 clamp(0.5rem, 1.1979vw, 23px);
	width: 100%;
	font-size: var(--ts-body, clamp(16px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh);
	color: var(--text-invert);
}

.footer-utility-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.05rem;
	font-size: var(--step--2);
	line-height: var(--ts-caption-lh);
}

.footer-utility-menu li { position: relative; padding-right: 1.25rem; }

.footer-utility-menu li:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0.2em;
	bottom: 0.2em;
	width: 1px;
	background: var(--line-invert);
}

.footer-utility-menu a { color: var(--text-invert-soft); }

.scroll-top {
	position: fixed;
	right: clamp(1rem, 2.5vw, 2.25rem);
	bottom: clamp(1rem, 2.5vw, 2.25rem);
	z-index: 90;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: var(--gold-2);
	border: none;
	border-radius: var(--radius);
	color: var(--navy);
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	box-shadow: var(--shadow);
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
		background-color 0.25s var(--ease);
}

.scroll-top.is-visible { opacity: 1; transform: translateY(0); }
.scroll-top:hover { background: var(--gold-light); }
.scroll-top img { width: 20px; height: 20px; }

/*
 * The reCAPTCHA v3 badge sat over the scroll-to-top button in the same corner.
 * It is hidden - visibility, not display, which would stop v3 working. The
 * client chose not to carry Google's text notice on the forms either.
 */
.grecaptcha-badge { visibility: hidden; }

/* ========================================================== 11. Motion === */

/*
 * Section reveal. The travel is deliberately long and the curve a strong
 * ease-out, so the movement reads as motion rather than a flicker: most of the
 * distance is covered early and it settles slowly.
 */
:root { --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1); }

.will-reveal {
	opacity: 0;
	transform: translateY(56px);
	transition: opacity 0.95s var(--reveal-ease), transform 0.95s var(--reveal-ease);
	will-change: opacity, transform;
}

.is-revealed {
	opacity: 1;
	transform: none;
}

/*
 * Items inside a section that is itself fading move but do not fade, so the
 * two opacities never multiply into a muddy double transition.
 */
.section.will-reveal .will-reveal { opacity: 1; }

/* Children arrive in sequence rather than all at once. */
.step.will-reveal,
.sector.will-reveal,
.news-card.will-reveal,
.reason.will-reveal,
.activity.will-reveal,
.office.will-reveal,
.mini.will-reveal { transition-delay: 0.08s; }

.step:nth-child(2).will-reveal,
.sector:nth-child(2).will-reveal,
.news-card:nth-child(2).will-reveal,
.reason:nth-child(2).will-reveal,
.activity:nth-child(2).will-reveal,
.office:nth-child(2).will-reveal,
.mini:nth-child(2).will-reveal { transition-delay: 0.2s; }

.step:nth-child(3).will-reveal,
.sector:nth-child(3).will-reveal,
.news-card:nth-child(3).will-reveal,
.reason:nth-child(3).will-reveal,
.activity:nth-child(3).will-reveal,
.mini:nth-child(3).will-reveal { transition-delay: 0.32s; }

.step:nth-child(4).will-reveal,
.sector:nth-child(4).will-reveal,
.reason:nth-child(4).will-reveal,
.mini:nth-child(4).will-reveal { transition-delay: 0.44s; }

.step:nth-child(5).will-reveal,
.reason:nth-child(5).will-reveal { transition-delay: 0.56s; }

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.will-reveal { opacity: 1; transform: none; }
}

/* ============================================== 18. Commodity group === */

/*
 * Banner: the group name in white over a full-bleed photograph, with the two
 * brand ribbons in the corner as on the home page.
 */
.cbanner {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(240px, 22.9167vw, 440px);
	/*
	 * No margin under it: the section that follows carries its own top padding
	 * (Theme Settings > Typescale), and a margin here doubled the gap - 186px
	 * between the band and the first line of copy on a desktop.
	 */
	margin-bottom: 0;
	overflow: hidden;
	background: var(--navy);
	isolation: isolate;
}

.cbanner__inner { padding-block: clamp(2rem, 4.1667vw, 80px); }

/*
 * Every banner is the brand gold with the name in navy, as in the supplied
 * artwork - no photograph. The motif sits in the right-hand corner.
 */
.cbanner--gold {
	background: linear-gradient(100deg, var(--gold-light) 0%, var(--gold-2) 38%, var(--gold) 100%);
}

.cbanner--gold .cbanner__title { color: var(--navy); }

/*
 * The pair fills the band: each ribbon is half its height, stacked at 0 and
 * 50%, with the lower one set back by 0.934 of its own width so the two meet
 * at a corner - the hero's proportion, measured off it. The band is 22.9167vw
 * tall, so half of it is 11.4583vw. They draw themselves on with the hero's
 * animation rather than sitting there already finished.
 */

.cbanner .ribbon--top {
	top: 0;
	right: 0;
	left: auto;
	width: 11.4583vw;
	height: 11.4583vw;
	animation: tharwat-ribbon-top 9s cubic-bezier(0.37, 0, 0.63, 1) 0.5s infinite both;
}

.cbanner .ribbon--bottom {
	top: 50%;
	right: 10.702vw;
	left: auto;
	width: 11.4583vw;
	height: 11.4583vw;
	animation: tharwat-ribbon-bottom 9s cubic-bezier(0.37, 0, 0.63, 1) 0.5s infinite both;
}

/* Below the clamp the band stops shrinking, so the pair is pinned to it. */
@media (max-width: 1047px) {
	.cbanner .ribbon--top,
	.cbanner .ribbon--bottom { width: 120px; height: 120px; }

	.cbanner .ribbon--bottom { right: 112px; }
}

/*
 * On a phone the pair at that size crossed the title. Smaller, and stacked
 * off each other in the corner - the same staircase the hero keeps.
 */
@media (max-width: 560px) {
	.cbanner .ribbon--top,
	.cbanner .ribbon--bottom { width: 88px; height: 88px; }

	.cbanner .ribbon--top { top: 0; right: 0; }

	.cbanner .ribbon--bottom { top: 88px; right: 82px; }
}

/*
 * The overview's motif belongs under the heading in the left column, as in the
 * design. It is absolutely positioned, so without offsets it would stay where
 * it falls in the grid - across the heading.
 */
.section--overview .split { position: relative; }

/* The panel sits under the copy inside the same section. */
/*
 * The closing statement. It was a gold panel of fixed proportions, which left
 * half of it empty on every page that has no image. Carried on a gold rule it
 * takes only the room its words need.
 */
.statement {
	margin-top: clamp(2rem, 5.2083vw, 100px);
	padding-left: clamp(1rem, 1.8229vw, 35px);
	border-left: 3px solid var(--gold);
}

/*
 * The filled house mark stands beside the copy, and the copy alone sets the
 * row's height: the mark has no height of its own (it is drawn into the box
 * the row gives it), so a short statement makes a short row, with no floor
 * and no photograph standing taller than the words.
 */
.statement--with-mark {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 30%);
	gap: clamp(1.5rem, 3.125vw, 60px);
	align-items: stretch;
}

.statement--with-mark .statement__body { align-self: center; }

.statement__mark { position: relative; }

.statement__mark .mark-fill {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.statement__title {
	margin: 0 0 clamp(0.6rem, 1.0417vw, 20px);
	font-size: var(--ts-h4, clamp(1.4rem, 2.0833vw, 40px));
	line-height: var(--ts-h4-lh, 1.2);
	color: var(--navy);
}

.statement__body .rich { max-width: 68ch; }

.vector--intro {
	left: -7%;
	top: 42%;
	width: min(44%, 640px);
	height: auto;
	aspect-ratio: 579 / 604;
	opacity: 0.55;
}

@media (max-width: 1024px) {
	.vector--intro { top: auto; bottom: -6%; left: -12%; width: 62%; opacity: 0.4; }
}

/* The page's name as written - "Our Business", "Trade Process" - not set in capitals. */
.cbanner__title {
	margin: 0;
	font-size: var(--ts-h1, clamp(2.3rem, 4.2708vw, 82px));
	line-height: var(--ts-h1-lh, 1.1);
	font-weight: 700;
	color: var(--text-invert);
}

/* --------------------------------------------------------- highlight */

/* ---------------------------------------------------------- products */

.products { padding: clamp(1.75rem, 3.6458vw, 70px) clamp(1.25rem, 3.6458vw, 70px); }

.products__title { margin: 0 0 clamp(1.5rem, 2.8646vw, 55px); color: var(--text-invert); }

.products__list {
	display: grid;
	gap: clamp(2rem, 4.1667vw, 80px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.product {
	display: grid;
	grid-template-columns: minmax(0, 34.5%) minmax(0, 1fr);
	gap: clamp(1.25rem, 2.2917vw, 44px);
	align-items: center;
}

/* The image changes sides row to row; the copy follows it. */
.product--image-right { grid-template-columns: minmax(0, 1fr) minmax(0, 34.5%); }
.product--image-right .product__media { order: 2; }

.product__media {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.06);
	cursor: zoom-in;
	line-height: 0;
	/* One frame for every product, the 4:3 most of the photographs are shot at. */
	aspect-ratio: 4 / 3;
}

/*
 * Every image shown whole inside the frame, never cropped: the client's images
 * are specification sheets as often as photographs, and cropping one cuts
 * information out of it. One that is wider or taller than 4:3 sits centred
 * with the frame's tint either side. Full size is a click away in the lightbox.
 */
.product__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.45s var(--ease);
}

.product__media:hover .product__image { transform: scale(1.04); }

.product__media:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* The zoom cue only appears on hover, so it never sits over the photograph. */
.product__zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(5, 15, 54, 0.78);
	color: var(--gold-light);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.product__media:hover .product__zoom,
.product__media:focus-visible .product__zoom { opacity: 1; transform: none; }

.product__name {
	margin: 0 0 clamp(0.75rem, 1.1458vw, 22px);
	font-size: var(--ts-h4, clamp(1.4rem, 2.0833vw, 40px));
	line-height: var(--ts-h4-lh, 1.2);
	color: var(--gold-light);
}

.product__points { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(0.6rem, 0.8333vw, 16px); }

.product__points li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(0.6rem, 0.7292vw, 14px);
	align-items: start;
	font-size: var(--ts-h7, clamp(14px, 0.9375vw, 18px));
	line-height: var(--ts-h7-lh, 1.45);
	color: var(--text-invert-soft);
}

.product__tick { flex: none; width: 22px; height: 22px; color: var(--gold); transform: translateY(1px); }

.product__text {
	margin: 0;
	font-size: var(--ts-h7, clamp(14px, 0.9375vw, 18px));
	line-height: var(--ts-h7-lh, 1.5);
	color: var(--text-invert-soft);
}

/*
 * The enquiry link closes each product's copy: a gold text link with the
 * footer's arrow, not a button. The words are underlined; the arrow moves.
 */
.product__enquire {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: clamp(1rem, 1.5625vw, 30px);
	font-size: var(--ts-h7);
	line-height: var(--ts-h7-lh);
	font-weight: 600;
	color: var(--gold-light);
	transition: color 0.25s var(--ease);
}

.product__enquire span {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.product__enquire svg { flex: none; transition: transform 0.25s var(--ease); }

.product__enquire:hover,
.product__enquire:focus-visible { color: var(--gold); }

.product__enquire:hover svg,
.product__enquire:focus-visible svg { transform: translateX(5px); }

.product__enquire:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }

/* --------------------------------------------------------- lightbox */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 3vw, 3rem);
	background: rgba(5, 15, 54, 0.88);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s var(--ease), visibility 0.28s;
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__figure {
	margin: 0;
	max-width: min(1100px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	transform: scale(0.97);
	transition: transform 0.28s var(--ease);
}

.lightbox.is-open .lightbox__figure { transform: none; }

.lightbox__image {
	display: block;
	max-width: 100%;
	max-height: 78vh;
	margin-inline: auto;
	object-fit: contain;
	border-radius: var(--radius);
	background: var(--navy-soft);
}

.lightbox__caption {
	text-align: center;
	font-size: var(--ts-h7, 16px);
	line-height: var(--ts-h7-lh);
	color: var(--text-invert);
}

.lightbox__close {
	position: absolute;
	top: clamp(0.75rem, 2vw, 1.75rem);
	right: clamp(0.75rem, 2vw, 1.75rem);
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	background: transparent;
	color: var(--text-invert);
	cursor: pointer;
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.lightbox__close:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--gold); }
.lightbox__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ================================================== 19. About page === */

.about__title { margin: 0 0 clamp(0.75rem, 1.1458vw, 22px); color: var(--navy); }

/*
 * A bold paragraph, not a second heading: the design sets this line at body
 * size and leans on the weight alone.
 */
.about__lead {
	margin: 0 0 clamp(0.75rem, 1.0417vw, 20px);
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh, 1.5);
	font-weight: 700;
	color: var(--navy);
}

.about__body { max-width: 68ch; }

/*
 * Copy inside a coloured box runs the full width of the box, as the client asks.
 * The one measure kept is where a photograph stands beside the copy - there
 * the copy's column already stops at the picture.
 */
.panel .about__body { max-width: none; }

/* The short title lines the document runs between its paragraphs. */
.about-split__text .rich strong,
.about__body strong { color: var(--navy); }

.panel--navy .about__body strong { color: var(--gold-light); }

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

/* Heading left, copy right: 716 and 1006 of the 1722 content width. */
.about-split {
	display: grid;
	grid-template-columns: minmax(0, 716fr) minmax(0, 1006fr);
	gap: 0;
	align-items: start;
}

.about-split__head { padding-right: clamp(1rem, 2.0833vw, 40px); }

.about-split__text { max-width: 68ch; }

/* The design sets this copy justified. */
.about-split__text .rich p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }

/* With a photograph the copy stacks in one column and the picture takes the other. */
.about-split--image-right,
.about-split--image-left {
	grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
	grid-template-areas: "head media" "text media";
	gap: clamp(1rem, 1.5625vw, 30px) clamp(1.5rem, 3.125vw, 60px);
	align-items: center;
}

.about-split--image-right .about-split__head,
.about-split--image-left .about-split__head { grid-area: head; padding-right: 0; }

.about-split--image-right .about-split__text,
.about-split--image-left .about-split__text { grid-area: text; }

.about-split--image-right .about-split__media,
.about-split--image-left .about-split__media { grid-area: media; }

.about-split--image-left { grid-template-areas: "media head" "media text"; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }

.about-split__image { width: 100%; height: auto; display: block; border-radius: var(--radius); }

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

.about-panel { display: block; }

/* A second group under the same panel is divided by a rule, not by a gap. */
.about-group--divided {
	margin-top: clamp(1.75rem, 3.6458vw, 70px);
	padding-top: clamp(1.75rem, 3.6458vw, 70px);
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.panel--gold .about-group--divided { border-top-color: rgba(5, 15, 54, 0.18); }

/* On Our Business a panel's second group sits closer under its rule. */
.page-template-our-business .about-group--divided {
	margin-top: clamp(1.25rem, 1.5625vw, 30px);
	padding-top: clamp(1.25rem, 1.5625vw, 30px);
}

/*
 * The filled house mark in a panel's media column (Image motion: the house
 * mark, filled) - no photograph, the mark itself. In gold on navy or on the
 * page; on a gold panel the gold would be lost, so there it is navy. Stacked
 * on a phone there is no side for it, so it goes.
 */
.about-panel__media--filled {
	justify-self: center;
	width: 100%;
	max-width: 420px;
}

.about-panel__media--filled .mark-fill {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 579 / 604;
}

.panel--gold .about-panel__media--filled .mark-fill path { fill: var(--navy); }

@media (max-width: 900px) {
	.about-panel__media--filled { display: none; }
}

.about-panel--with-image {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
	gap: clamp(1.5rem, 3.125vw, 60px);
	align-items: center;
}

/*
 * Full bleed (Commercial Documentation): the photograph fills the panel's right
 * side to its edges - no padding above, below or beside it - and runs the
 * height of the copy, cropped to fit. The copy keeps the panel's padding.
 */
.about-panel--bleed {
	align-items: stretch;
	padding-block: 0;
	padding-right: 0;
}

.about-panel--bleed .about-panel__copy { padding-block: clamp(1.75rem, 4vw, 4.5rem); }

.about-panel__media--bleed { position: relative; min-height: 100%; }

.about-panel__media--bleed .about-panel__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}

@media (max-width: 900px) {
	/* Stacked, the photograph runs under the copy, edge to edge along the panel's foot. */
	.about-panel--bleed { padding: 0; row-gap: 0; }

	.about-panel--bleed .about-panel__copy { padding: clamp(1.75rem, 4vw, 4.5rem); }

	.about-panel__media--bleed { min-height: 0; aspect-ratio: 16 / 9; }
}

/* The photograph on the left: the columns swap and it leads. Stacked, it falls back under the copy. */
.about-panel--image-left { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }

.about-panel--image-left .about-panel__media { order: -1; }

.panel--navy { --panel-ink: var(--navy); }
.panel--gold { --panel-ink: var(--navy); }

/*
 * No background: the panel's content straight on the ground, its edges lined
 * up with the sections around it. It breaks up panels that would otherwise
 * run one after another. Its type keeps the page's own colours; the divider
 * and the closing note take the gold the rest of the page uses.
 */
.panel--plain {
	padding: 0;
	border-radius: 0;
	overflow: visible;
	background: none;
	--panel-ink: var(--navy);
}

.panel--plain .about-group--divided { border-top-color: rgba(196, 154, 82, 0.45); }

/*
 * White: the panel's ground white on the cream page, its type the page's own
 * colours, and - as with no panel - the divider and closing note in gold.
 */
.panel--white {
	background: #fff;
	--panel-ink: var(--navy);
}

.panel--white .about-group--divided { border-top-color: rgba(196, 154, 82, 0.45); }

.panel--navy .about__title { color: var(--text-invert); }

/* Gold on gold does not read; inside the panel the standfirst goes navy. */
.panel--gold .about__lead { color: var(--navy); }
.panel--navy .about__lead { color: var(--gold-light); }
/* List items too: left to .rich they took its body grey, which is lost on navy. */
.panel--navy .rich p,
.panel--navy .rich li { color: var(--text-invert-soft); }

.about-panel__pill {
	display: inline-block;
	margin: clamp(1rem, 1.5625vw, 30px) 0 clamp(0.9rem, 1.25vw, 24px);
	padding: clamp(0.4rem, 0.5208vw, 10px) clamp(0.8rem, 1.0417vw, 20px);
	border-radius: var(--radius);
	background: var(--gold-light);
	font-size: var(--ts-h7, clamp(14px, 0.9375vw, 18px));
	line-height: var(--ts-h7-lh);
	font-weight: 600;
	color: var(--navy);
}

.panel--gold .about-panel__pill { background: var(--navy); color: var(--text-invert); }

/* With no pill between them, the points keep the pill's distance from the copy. */
.about-group .about__body + .tick-list { margin-top: clamp(1rem, 1.5625vw, 30px); }

/* On gold the design closes a panel with a bold line, not a boxed note. */
.about-panel__note {
	margin: clamp(1.25rem, 2.0833vw, 40px) 0 0;
	font-size: var(--ts-h5, clamp(20px, 1.6667vw, 32px));
	line-height: var(--ts-h5-lh, 1.2);
	font-weight: 700;
}

/* On navy, and with no panel at all, it is a gold panel of its own, the width of the columns above it. */
.panel--navy .about-panel__note,
.panel--plain .about-panel__note,
.panel--white .about-panel__note {
	margin-top: clamp(1.5rem, 2.1875vw, 42px);
	padding: clamp(1rem, 2.1875vw, 42px);
	border-radius: var(--radius);
	background: var(--gold-2);
	color: var(--navy);
	font-size: var(--ts-body-large, clamp(16px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh);
	font-weight: 400;
}

.about-panel__image { width: 100%; height: auto; display: block; border-radius: var(--radius); }

/*
 * The map is a silhouette, not a photograph: no corner radius, and a wider
 * gutter between the copy and it - 105px against 1720 in the design.
 */
.about-panel--map { grid-template-columns: minmax(0, 1fr) minmax(0, 43%); gap: clamp(1.5rem, 5.4688vw, 105px); }

.about-panel--map .about-panel__image { border-radius: 0; }

/*
 * A light travels round the ring: a conic highlight, masked to the band the
 * segments occupy so it never touches the hub or the corners, turning slowly
 * over the diagram. The nine segments are the commercial elements the copy
 * lists, so the movement is the point rather than decoration.
 */
.about-panel__media--ring { position: relative; }

.about-panel__media--ring::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		rgba(255, 246, 224, 0) 0deg,
		rgba(255, 246, 224, 0) 250deg,
		rgba(255, 246, 224, 0.9) 325deg,
		rgba(255, 246, 224, 0) 360deg
	);
	/* The band the segments actually occupy: a hole at 27%, the rim at 51%. */
	-webkit-mask: radial-gradient(circle at 50% 50%, transparent 27%, #000 33%, #000 47%, transparent 51%);
	mask: radial-gradient(circle at 50% 50%, transparent 27%, #000 33%, #000 47%, transparent 51%);
	mix-blend-mode: screen;
	animation: tharwat-ring-sweep 6s linear infinite;
}

/* The wheel breathes as the light goes round, so the movement reads at rest. */
.about-panel__media--ring .about-panel__image {
	animation: tharwat-ring-breathe 9s ease-in-out infinite;
	will-change: transform;
}

@keyframes tharwat-ring-breathe {
	0%,
	100% { transform: scale(1); }

	50% { transform: scale(1.022); }
}

@keyframes tharwat-ring-sweep {
	to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
	.about-panel__media--ring::after,
	.about-panel__media--ring .about-panel__image { animation: none; }
}

/*
 * The four trading sectors. The design gives this panel its own bed - wider
 * than the container, with the columns held to 319px and left-aligned, so the
 * row stops short of the right edge rather than stretching to it.
 */
@media (min-width: 1200px) {
	.about-panel--aapproach { margin-inline: max(-66px, -3.4375vw); }
}

/* The copy and the four sectors run the full width of the panel, level with its heading. */
.about-panel--aapproach .about__body { max-width: none; }

.about-panel--aapproach .about-grid--inset {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: clamp(1rem, 3.8021vw, 73px);
	row-gap: clamp(1.5rem, 2.6042vw, 50px);
	justify-content: start;
	margin-top: clamp(1.5rem, 2.6563vw, 51px);
}

.about-panel--aapproach .about-panel__note { max-width: none; }

.about-panel--aapproach .about-grid__icon {
	width: clamp(48px, 3.75vw, 72px);
	margin-bottom: clamp(1rem, 2.6563vw, 51px);
}

/* Named twice over: the panel's own colours are set further down the file. */
.about-panel--aapproach .about-grid--inset .about-grid__title {
	margin-bottom: clamp(0.9rem, 1.7708vw, 34px);
	font-size: var(--ts-body-large, clamp(16px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh);
	color: var(--gold-2);
}

.about-panel--aapproach .about-grid--inset .about-grid__text {
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh, 1.4);
	color: var(--text-invert);
}

/* Here the copy is all one white, standfirst included, as the design has it. */
.about-panel--aapproach .about__body { color: var(--text-invert); }

/* The standfirst is plain white copy, two lines, not a gold line. */
.panel--navy .about-panel--aapproach .about__lead,
.about-panel--aapproach .about-group .about__lead {
	margin-bottom: clamp(0.9rem, 1.25vw, 24px);
	line-height: var(--ts-body-lh, 1.4);
	font-weight: 400;
	color: var(--text-invert);
}

@media (max-width: 900px) {
	.about-panel--aapproach .about-grid--inset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.about-panel--aapproach .about-grid--inset { grid-template-columns: minmax(0, 1fr); }

}

/*
 * Responsible trading: the copy on the left, the five commitments in two
 * columns on the right, and the house mark drawn large and thin in the corner
 * behind them - clipped by the panel, as the design has it.
 */
.about-panel--acompliance { position: relative; overflow: hidden; }

.about-panel--acompliance::after {
	content: '';
	position: absolute;
	left: -0.5vw;
	bottom: -11.6vw;
	width: 37.5vw;
	aspect-ratio: 106 / 110;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 106 110'%3E%3Cpath d='M105.339 55.0544H52.6898L50.5 0H54.6467C66.481 35.755 73.2835 50.4393 93.2248 50.4393H105.339V55.0544Z' fill='none' stroke='%23050f36' stroke-width='0.15'/%3E%3Cpath d='M0 55.0547H52.6489L54.8387 110.001H50.692C38.8577 74.316 32.0553 59.6607 12.1139 59.6607H0V55.0547Z' fill='none' stroke='%23050f36' stroke-width='0.15'/%3E%3C/svg%3E") no-repeat center / contain;
	opacity: 0.5;
	pointer-events: none;
}

.about-panel--acompliance .about-panel__copy { position: relative; z-index: 1; }

.about-panel--acompliance .about-group {
	display: grid;
	grid-template-columns: minmax(0, 650fr) minmax(0, 854fr);
	/* The last row takes up the slack the taller right-hand column leaves. */
	grid-template-rows: auto 1fr;
	column-gap: clamp(1.5rem, 3.4896vw, 67px);
}

.about-panel--acompliance .about-group > * { grid-column: 1; align-self: start; }

.about-panel--acompliance .about__body { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }

.about-panel--acompliance .about-grid--inset {
	grid-column: 2;
	grid-row: 1 / -1;
	margin-top: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(1rem, 6.9271vw, 133px);
	row-gap: clamp(1.5rem, 2.7604vw, 53px);
}

/* An odd one out runs the width of both columns rather than sitting alone. */
.about-panel--acompliance .about-grid__item:last-child:nth-child(odd) { grid-column: 1 / -1; }

.about-panel--acompliance .about-grid__icon {
	width: clamp(44px, 3.2292vw, 62px);
	margin-bottom: clamp(0.6rem, 0.9896vw, 19px);
}

.about-panel--acompliance .about-grid--inset .about-grid__title {
	margin-bottom: clamp(0.6rem, 1.25vw, 24px);
	font-size: var(--ts-body-large, clamp(16px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh, 1.21);
	font-weight: 700;
	color: var(--navy);
}

.about-panel--acompliance .about-grid--inset .about-grid__text {
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh);
	color: var(--navy);
}

@media (max-width: 900px) {
	.about-panel--acompliance .about-group { grid-template-columns: minmax(0, 1fr); }

	.about-panel--acompliance .about-grid--inset {
		grid-column: 1;
		grid-row: auto;
		margin-top: clamp(1.5rem, 4vw, 2.5rem);
	}

	.about-panel--acompliance::after { display: none; }
}

@media (max-width: 560px) {
	/* Two columns of 137px is not a column: one commitment at a time. */
	.about-panel--acompliance .about-grid--inset { grid-template-columns: minmax(0, 1fr); }


	.about-panel--acompliance .about-grid--inset .about-grid__title { max-width: none; }
}

/*
 * Our Commitment: the photograph runs to the panel's own edges rather than
 * sitting inside its padding, so the copy is held clear of it instead.
 */
.about-panel--acommitment {
	display: block;
	position: relative;
	overflow: hidden;
}

.about-panel--acommitment .about-panel__media {
	position: absolute;
	inset: 0 0 0 auto;
	width: 36.34%;
}

.about-panel--acommitment .about-panel__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.about-panel--acommitment .about-panel__copy { max-width: clamp(0px, 53.125vw, 1020px); }

/* Vision and Mission: the copy runs the full width of the navy panel. */
.about-panel--avision .about__body { max-width: none; }

/* The five ambitions read at the panel's own sizes: a larger icon, a bold name, body-size copy. */
.about-panel--avision .about-grid__icon {
	width: clamp(48px, 3.3333vw, 64px);
	margin-bottom: clamp(0.75rem, 1.0417vw, 20px);
}

.about-panel--avision .about-grid__title {
	font-size: var(--ts-body-large);
	line-height: var(--ts-body-large-lh);
	font-weight: 700;
}

.about-panel--avision .about-grid__text {
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
}

/* Here the standfirst is a plain line of copy, not a bold one. */
.about-panel--acommitment .about__lead { font-weight: 400; }

.about-panel--acommitment .about-panel__pill {
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh);
	font-weight: 400;
	padding: clamp(0.4rem, 0.6771vw, 13px) clamp(0.6rem, 0.8854vw, 17px);
}

/* Six promises in two columns, ticked navy on the gold. */
.about-panel--acommitment .tick-list {
	grid-template-columns: repeat(2, minmax(0, clamp(200px, 26.5625vw, 510px)));
	/* Read down the first column, then the second, as the design lists them. */
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
	justify-content: start;
	gap: clamp(0.75rem, 1.4063vw, 27px) 0;
	margin-top: clamp(0.75rem, 1.4063vw, 27px);
}

.about-panel--acommitment .tick-list li {
	font-size: var(--ts-body-large, clamp(16px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh, 1.21);
	font-weight: 600;
	color: var(--navy);
}

.about-panel--acommitment .tick-list__mark {
	width: clamp(20px, 1.4583vw, 28px);
	height: clamp(20px, 1.4583vw, 28px);
	color: var(--navy);
	--panel-ink: #ffffff;
}

/* The closing thought is a paragraph here, not a statement in bold. */
.about-panel--acommitment .about-panel__note {
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh, 1.5);
	font-weight: 400;
}

@media (max-width: 900px) {
	.about-panel--acommitment .about-panel__media {
		position: static;
		width: auto;
		margin-top: clamp(1.5rem, 4vw, 2.5rem);
	}

	.about-panel--acommitment .about-panel__copy { max-width: none; }

	.about-panel--acommitment .tick-list {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-flow: row;
	}
}

/* ------------------------------------------------ ticked points */

.tick-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.7rem, 1.0417vw, 20px) clamp(1.25rem, 2.0833vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tick-list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(0.6rem, 0.7292vw, 14px);
	align-items: start;
	font-size: var(--ts-h7, clamp(14px, 0.9375vw, 18px));
	line-height: var(--ts-h7-lh, 1.45);
}

.tick-list__mark { flex: none; width: 22px; height: 22px; color: var(--gold); transform: translateY(1px); }

.panel--navy .tick-list li { color: var(--text-invert-soft); }

/*
 * On Our Business every listed point reads semibold - the ticked lists and
 * the bulleted lists in the copy alike - as the copy splits' ticks already
 * did, so the lists read the same down the page.
 */
.page-template-our-business .tick-list li,
.page-template-our-business .rich ul li { font-weight: 600; }

/* The site's type is navy or near-black: the ticked points read navy, and light on a navy panel. */
.page-template-our-business .tick-list li { color: var(--navy); }

.page-template-our-business .panel--navy .tick-list li { color: var(--text-invert-soft); }

/*
 * Under the trading ring the ticks run larger and in navy - 28px marks and
 * 24px labels - and their two columns keep the design's 375px pitch rather
 * than spreading over the whole column.
 */
.tick-list--wide {
	grid-template-columns: repeat(2, minmax(0, clamp(180px, 19.5313vw, 375px)));
	/* Read down the first column, then the second, as the design lists them. */
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
	justify-content: start;
	gap: clamp(0.75rem, 1.25vw, 24px) 0;
	margin-top: clamp(1.5rem, 2.6042vw, 50px);
}

.tick-list--wide li {
	font-size: var(--ts-body-large, clamp(16px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh, 1.3);
	color: var(--navy);
	font-weight: 500;
}

.tick-list--wide .tick-list__mark {
	width: clamp(20px, 1.4583vw, 28px);
	height: clamp(20px, 1.4583vw, 28px);
	color: var(--navy);
	--panel-ink: #ffffff;
}

/* ------------------------------------------------------- grid */

.about-grid {
	display: grid;
	/* 200, not 230: the five ambitions under Our Vision sit on one row. */
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: clamp(1.25rem, 2.0833vw, 40px);
	margin: clamp(1.5rem, 2.6042vw, 50px) 0 0;
	padding: 0;
	list-style: none;
}

.about-grid__icon { display: block; width: clamp(38px, 2.6042vw, 50px); margin-bottom: clamp(0.6rem, 0.8333vw, 16px); }
.about-grid__icon img { width: 100%; height: auto; }

.about-grid__title {
	margin: 0 0 clamp(0.5rem, 0.7292vw, 14px);
	font-size: var(--ts-h7, clamp(15px, 0.9375vw, 18px));
	line-height: var(--ts-h7-lh, 1.3);
	color: var(--navy);
}

.about-grid__text {
	margin: 0;
	font-size: var(--ts-small);
	line-height: var(--ts-small-lh);
	color: var(--text-muted);
}

.panel--navy .about-grid__title { color: var(--gold-light); }
.panel--navy .about-grid__text { color: var(--text-invert-soft); }

/*
 * A grid section set in a navy panel (Integrated Business Approach): the
 * heading and copy in the panel's light colours, and each item's gold icon
 * over a bold name, so the names stand out over their copy.
 */
.about-grid-panel .about-grid__title { font-weight: 700; }

/* The section's grid sets its copy in the body grey further down the sheet; on the navy it reads light. */
.section--about-grid .about-grid-panel .about-grid__text { color: var(--text-invert-soft); }

/* In the panel the icons sit smaller and the item closer under them. */
.section--about-grid .about-grid-panel .about-grid { row-gap: clamp(1.5rem, 2.6042vw, 50px); }

.section--about-grid .about-grid-panel .about-grid__icon {
	width: clamp(40px, 2.9167vw, 56px);
	margin-bottom: clamp(0.75rem, 1.25vw, 24px);
}

.section--about-grid .about-grid-panel .about-grid__title { margin-bottom: clamp(0.4rem, 0.625vw, 12px); }

/*
 * On Our Business - Supplier & Buyer Coordination, UAE Commercial Advantage -
 * a column's heading stands out over its copy, bold and a size up, and its
 * copy reads as the panel's body copy does, at the same size and colour,
 * rather than as a smaller, greyer caption.
 */
.about-panel--bcoordination .about-grid__title,
.about-panel--badvantage .about-grid__title {
	font-size: var(--ts-body-large);
	line-height: var(--ts-body-large-lh);
	font-weight: 700;
	color: var(--navy);
}

.about-panel--bcoordination .about-grid__text,
.about-panel--badvantage .about-grid__text {
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	color: var(--text-body);
}

/*
 * A column's copy written as a run of items is drawn as a ticked list under
 * its lead-in - the panels' own tick list, so its items read at the same size
 * as theirs; a chain "A → B → C" the same, its steps one under another. In a
 * column this narrow the list runs down in one column.
 */
.about-grid__ticks {
	grid-template-columns: minmax(0, 1fr);
	margin-top: clamp(0.6rem, 0.9375vw, 18px);
}
/*
 * Stacked one under another on a phone or tablet, an icon item reads as copy:
 * its text takes the body size the paragraphs around it have - the small size
 * made it the smallest type in the panel - and its title the size above that.
 * Beside four others on a desktop they keep the smaller, measured sizes.
 */
@media (max-width: 900px) {
	.about-grid__title {
		font-size: var(--ts-body-large);
		line-height: var(--ts-body-large-lh);
	}

	.about-grid__text {
		font-size: var(--ts-body);
		line-height: var(--ts-body-lh);
	}
}

/*
 * Core Values stands on its own: a fixed four-column bed so the seven values
 * break 4 + 3 as the design has them, with justified copy under each icon.
 * The inset grid inside a panel keeps its own auto-fit behaviour.
 */
.section--about-grid .about-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 2.7083vw, 52px);
	row-gap: clamp(2rem, 3.6458vw, 70px);
}

.section--about-grid .about-grid__icon {
	width: clamp(48px, 3.75vw, 72px);
	margin-bottom: clamp(1.25rem, 2.9688vw, 57px);
}

.section--about-grid .about-grid__title {
	margin-bottom: clamp(0.75rem, 1.5625vw, 30px);
	font-size: var(--ts-h6, clamp(18px, 1.3542vw, 26px));
	line-height: var(--ts-h6-lh, 1.2);
}

.section--about-grid .about-grid__text {
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh, 1.25);
	color: var(--text-body);
	text-wrap: pretty;
}

@media (max-width: 1200px) {
	.section--about-grid .about-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	.section--about-grid .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * Seven values stacked run to a screen and a half of scrolling, so on a phone
 * they ride a rail that walks itself - the same one the transaction stages
 * use, and the same attribute names it.
 */
@media (max-width: 720px) {
	.section--about-grid .about-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(78vw, 300px);
		column-gap: clamp(1rem, 4vw, 1.5rem);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.section--about-grid .about-grid::-webkit-scrollbar { display: none; }

	.section--about-grid .about-grid__item { scroll-snap-align: start; }
}

@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
	.section--about-grid .about-grid { scroll-behavior: smooth; }
}

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

/*
 * Global Markets and Compliance & Governance. The heading holds the left
 * column with the house mark drawn large and thin beneath it; the copy runs
 * down the right. The columns are the design's
 * 716 / 1006 - the same measure the About page opens on.
 */
.copy-split {
	display: grid;
	grid-template-columns: minmax(0, 560fr) minmax(0, 1006fr);
	gap: 0;
	align-items: start;
}

.copy-split__head { position: relative; padding-right: clamp(1rem, 2.0833vw, 40px); }

/* Drawn under the heading, and it takes no room of its own. */
.copy-split--marked .copy-split__head::after {
	content: '';
	position: absolute;
	left: -1.5vw;
	top: calc(100% + clamp(1rem, 2.0833vw, 40px));
	width: 32.2917vw;
	aspect-ratio: 106 / 110;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 106 110'%3E%3Cpath d='M105.339 55.0544H52.6898L50.5 0H54.6467C66.481 35.755 73.2835 50.4393 93.2248 50.4393H105.339V55.0544Z' fill='none' stroke='%23c49a52' stroke-width='0.15'/%3E%3Cpath d='M0 55.0547H52.6489L54.8387 110.001H50.692C38.8577 74.316 32.0553 59.6607 12.1139 59.6607H0V55.0547Z' fill='none' stroke='%23c49a52' stroke-width='0.15'/%3E%3C/svg%3E") no-repeat center / contain;
	pointer-events: none;
}

.copy-split__title { margin: 0; }

/*
 * The filled house mark under the heading, in place of the thin one: it fills
 * the empty foot of the heading column beside a long run of copy. Stacked on a
 * phone there is no such space, so it goes.
 */
.copy-split__fill {
	width: min(100%, clamp(160px, 13.5417vw, 260px));
	margin-top: clamp(1.5rem, 2.6042vw, 50px);
}

.copy-split__fill .mark-fill {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 579 / 604;
}

@media (max-width: 900px) {
	.copy-split__fill { display: none; }
}

.copy-split__opening p {
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh, 1.4);
	color: var(--text-body);
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* The closing paragraph stands alone; the opening ones keep the gap between them. */
.copy-split__close-text {
	margin: 0;
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh, 1.4);
	color: var(--text-body);
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.copy-split__copy { margin-top: clamp(1.25rem, 2.9167vw, 56px); }

.copy-split__copy p {
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh, 1.4);
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* The licensed scope and the closing line carry the accent, a size up. */
.copy-split__scope,
.copy-split__close-title {
	font-size: var(--ts-body-large, clamp(16px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh, 1.5);
	font-weight: 700;
	color: var(--navy);
}

.copy-split__scope { margin: clamp(1.5rem, 3.125vw, 60px) 0 0; }

.copy-split__close-title { margin: clamp(1.5rem, 3.125vw, 60px) 0 clamp(1rem, 2.0833vw, 40px); }

/*
 * Ticked points: two columns reading down the first - as many rows as half
 * the points, which the template sets - with gold marks and a white check,
 * the points at Body size in the accent colour.
 *
 * The columns share the row. Capped at the design's 418px and packed to the
 * left they left a sixth of the row empty, and at laptop widths broke the
 * longer points onto a second line beside that empty space.
 */
.copy-split__ticks {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(var(--tick-rows, 4), auto);
	grid-auto-flow: column;
	gap: clamp(0.75rem, 1.1458vw, 22px) clamp(1rem, 2.0833vw, 40px);
	margin: clamp(1.25rem, 2.6042vw, 50px) 0 0;
}

.copy-split__ticks li {
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	font-weight: 600;
	color: var(--navy);
}

.copy-split__ticks .tick-list__mark { color: var(--gold); --panel-ink: #ffffff; }

.copy-split__ticks + .copy-split__copy { margin-top: clamp(1.25rem, 1.875vw, 36px); }

/*
 * Set in a panel, the copy split stands out from plain sections either side of
 * it laid out the same way. The panel gives its own padding and rounding; its
 * type takes the panel's colours.
 */
.copy-split--panel.panel--navy .copy-split__title { color: var(--text-invert); }

.copy-split--panel.panel--navy .copy-split__scope,
.copy-split--panel.panel--navy .copy-split__close-title { color: var(--gold-light); }

.copy-split--panel.panel--navy .copy-split__close-text { color: var(--text-invert-soft); }

.copy-split--panel.panel--navy .copy-split__ticks li { color: var(--text-invert); }

.copy-split--panel.panel--navy .copy-split__ticks .tick-list__mark { --panel-ink: var(--navy); }

.copy-split--panel.panel--gold .copy-split__scope,
.copy-split--panel.panel--gold .copy-split__close-title,
.copy-split--panel.panel--gold .copy-split__close-text,
.copy-split--panel.panel--gold .rich p,
.copy-split--panel.panel--gold .rich li,
.copy-split--panel.panel--gold .copy-split__ticks li { color: var(--navy); }

.copy-split--panel.panel--gold .copy-split__ticks .tick-list__mark { color: var(--navy); --panel-ink: var(--gold-light); }

/*
 * The line motif in a copy split's panel: the house mark in fine gold lines,
 * low in the heading's column behind the copy, drawing itself as the section
 * comes into view (main.js, initReplay). The copy stands in front of it.
 */
.copy-split--motif > .copy-split__head,
.copy-split--motif > .copy-split__body {
	position: relative;
	z-index: 1;
}

.vector--split {
	left: -4%;
	bottom: -14%;
	width: min(34%, 520px);
	height: auto;
	aspect-ratio: 579 / 604;
	opacity: 0.55;
}

@media (max-width: 900px) {
	.vector--split { left: auto; right: -18%; bottom: -8%; width: 70%; opacity: 0.35; }
}

@media (max-width: 900px) {
	.copy-split { grid-template-columns: minmax(0, 1fr); row-gap: clamp(1rem, 4vw, 1.75rem); }

	/* One column narrow, in reading order. */
	.copy-split__ticks { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }

	.copy-split__head { padding-right: 0; }

	/*
	 * Under the heading there is nothing to draw into on a narrow screen: the
	 * mark goes behind the copy instead, where it has the room.
	 */
	.copy-split--marked .copy-split__head::after {
		left: 50%;
		top: 100%;
		width: 86vw;
		transform: translateX(-50%);
		opacity: 0.55;
	}

	.copy-split__body { position: relative; }
}

/* --------------------------------------------- trade process */

/* Body copy here takes its size and leading from the type scale, as elsewhere. */

/*
 * The introduction holds the left column; the stages run down the right as
 * cards, two to a row, 467px wide and 68px apart, with a 1px gold rule
 * between the rows - the design's measurements, on the same 716 / 1006 split
 * the other pages open on.
 */
.tsteps {
	display: grid;
	grid-template-columns: minmax(0, 716fr) minmax(0, 1006fr);
	align-items: start;
}

/*
 * The introduction holds its place while the stages scroll past beside it, so
 * the left column is never an empty stretch under eight cards. It stops just
 * under the collapsed header - the stuck band's own height, since --band-h on
 * the root is the tall one.
 */
.tsteps__intro {
	position: sticky;
	top: calc(clamp(64px, 6.5vw, 118px) + clamp(1.5rem, 2.5vw, 48px));
	padding-right: clamp(1rem, 2.0833vw, 40px);
}

.tsteps__title { margin: 0 0 clamp(1rem, 1.875vw, 36px); }

.tsteps__copy p {
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh, 1.5);
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.tsteps__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 3.5417vw, 68px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tstep { padding-bottom: clamp(1.25rem, 1.9792vw, 38px); }

/* Every row after the first opens on the rule. */
.tstep:nth-child(n + 3) {
	padding-top: clamp(1.25rem, 1.7188vw, 33px);
	border-top: 1px solid var(--gold);
}

.tstep__icon {
	display: block;
	width: clamp(40px, 2.7083vw, 52px);
	height: clamp(40px, 2.7083vw, 52px);
	margin-bottom: clamp(0.75rem, 1.6146vw, 31px);
}

.tstep__icon img { width: 100%; height: 100%; object-fit: contain; }

/* Bold, so each stage's name stands out from the justified copy under it. */
.tstep__title {
	margin: 0 0 clamp(0.6rem, 0.8333vw, 16px);
	font-size: var(--ts-body-large, clamp(16px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh, 1.21);
	font-weight: 700;
	color: var(--navy);
}

.tstep__text {
	margin: 0;
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh, 1.5);
	color: var(--text-body);
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/*
 * The Trade Flow panel: copy on the left, the wheel on the right at the
 * design's 480 of the panel's 1720, the pair centred on each other.
 */
.tflow {
	padding-block: clamp(1.5rem, 2.8646vw, 55px);
}

.tflow--with-wheel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 30.5%);
	gap: clamp(1.5rem, 2.8646vw, 55px);
	align-items: center;
}

.tflow__title { margin: 0; }

.tflow__lead {
	margin: clamp(1rem, 1.9271vw, 37px) 0 clamp(0.75rem, 1.3021vw, 25px);
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh);
	font-weight: 700;
	color: var(--navy);
}

.tflow__body p {
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh, 1.5);
	color: var(--navy);
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.tflow__media { margin: 0; }

.tflow__image { display: block; width: 100%; height: auto; }

@media (max-width: 1100px) {
	.tsteps { grid-template-columns: minmax(0, 1fr); row-gap: clamp(1.5rem, 4vw, 2.5rem); }

	/* Stacked, there is nothing beside it to scroll past. */
	.tsteps__intro { position: static; padding-right: 0; }
}

@media (max-width: 900px) {
	.tflow--with-wheel { grid-template-columns: minmax(0, 1fr); }

	.tflow__media { max-width: 420px; margin-inline: auto; }
}

@media (max-width: 640px) {
	.tsteps__list { grid-template-columns: minmax(0, 1fr); }

	/* One to a row: every card after the first opens on the rule. */
	.tstep:nth-child(n + 2) {
		padding-top: clamp(1.25rem, 5vw, 1.75rem);
		border-top: 1px solid var(--gold);
	}

}

/* ---------------------------------------------- why choose us */

/*
 * The introduction runs the full width of the page. The key strengths sit in
 * a 985 column beside a 642 photograph, 92 apart - the design's measures - and
 * the photograph is the left column's full height, from the first row of
 * numbers to the foot of the callout. The numbered reasons are the About
 * page's Why Partner component. Type reads Theme Settings > Typescale.
 */
.page-intro__title { margin: 0 0 clamp(0.75rem, 1.5625vw, 30px); }

.page-intro__copy p {
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* ------------------------------------------------ section groups */

/*
 * A heading with sections under it - Our Core Business Activities over its six
 * activities - drawn as one navy panel of vertical tabs: the group's heading
 * across the top; down the left, the tabs alone, held in view while a long
 * member scrolls past; on the right, one member at a time, in the panel's
 * light colours. The tabs are only drawn once the script has made them
 * work (.is-ready); without it the members stand one under another, numbered.
 * On a tablet or phone the tabs become a row that scrolls sideways.
 *
 * The panel clips rather than hides its overflow, so the tab column can still
 * hold its place beside a long activity.
 */
.group-tabs.panel { overflow: clip; }

.group-tabs__side,
.group-tabs__panels {
	position: relative;
	z-index: 1;
	min-width: 0;
}

/* The group's heading runs the full width of the panel, over the tabs and the panels. */
.group-tabs__head {
	position: relative;
	z-index: 1;
	margin-bottom: clamp(1.5rem, 3.125vw, 60px);
}

.group-tabs__title { margin: 0; color: var(--text-invert); }

.group-tabs__intro { margin-top: clamp(0.75rem, 1.0417vw, 20px); }

.group-tabs__list { display: none; }

/* The tab column is wide enough for the longest name to stand on one line. */
.group-tabs.is-ready {
	display: grid;
	grid-template-columns: minmax(0, 500fr) minmax(0, 1090fr);
	column-gap: clamp(1.5rem, 4.1667vw, 80px);
	align-items: start;
}

.group-tabs.is-ready .group-tabs__head { grid-column: 1 / -1; }

.group-tabs.is-ready .group-tabs__side {
	position: sticky;
	top: calc(var(--header-h) + 1.5rem);
}

.group-tabs.is-ready .group-tabs__list {
	display: flex;
	flex-direction: column;
	gap: clamp(0.25rem, 0.5208vw, 10px);
}

.group-tabs__tab {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 0.8333vw, 16px);
	width: 100%;
	padding: clamp(0.55rem, 0.7292vw, 14px) 0;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	font-family: inherit;
	text-align: left;
	color: var(--text-invert);
	cursor: pointer;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.group-tabs__num {
	flex: none;
	min-width: 2ch;
	font-size: var(--ts-body-large);
	line-height: var(--ts-body-large-lh);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.35);
	transition: color 0.2s var(--ease);
}

.group-tabs__name {
	flex: 1;
	font-size: var(--ts-body-large);
	line-height: var(--ts-body-large-lh);
	font-weight: 600;
}

.group-tabs__arrow {
	flex: none;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.group-tabs__tab:hover { color: var(--gold-light); }

.group-tabs__tab[aria-selected="true"] {
	border-bottom-color: var(--gold);
	color: var(--gold-light);
}

.group-tabs__tab[aria-selected="true"] .group-tabs__num { color: var(--gold-light); }

.group-tabs__tab[aria-selected="true"] .group-tabs__arrow { opacity: 1; transform: none; }

.group-tabs__tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.group-tabs__panel:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

/*
 * A panel holds its section as drawn, less the section's own spacing and
 * width. On the navy, a member's own panel drops its ground, so everything
 * reads on the one navy; the tab carries the number and the group's name, so
 * the member's number line goes, and in the narrower column a copy split
 * stacks, its type in the panel's light colours.
 */
.group-tabs__panel .panel {
	padding: 0;
	border-radius: 0;
	background: none;
}

/* In a tab the words stand alone: a member's photograph goes, and its copy runs the panel's width from the top. */
.group-tabs__panel .about-panel__media { display: none; }

.group-tabs__panel .about-panel--with-image { display: block; }

.group-tabs.is-ready .group-tabs__panel > .section { padding-block: 0; }

.group-tabs.is-ready .group-tabs__panel .container { max-width: none; padding-inline: 0; }

.group-tabs.is-ready .group-eyebrow { display: none; }

.group-tabs.is-ready .copy-split { grid-template-columns: minmax(0, 1fr); row-gap: clamp(1rem, 1.5625vw, 30px); }

.group-tabs.is-ready .copy-split__head { padding-right: 0; }

.group-tabs .copy-split__title { color: var(--text-invert); }

.group-tabs .copy-split__scope,
.group-tabs .copy-split__close-title { color: var(--gold-light); }

.group-tabs .copy-split__close-text { color: var(--text-invert-soft); }

.group-tabs .copy-split__ticks li { color: var(--text-invert); }

.group-tabs .copy-split__ticks .tick-list__mark { --panel-ink: var(--navy); }

.group-eyebrow {
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 0.8333vw, 16px);
	margin: 0 0 clamp(0.6rem, 0.8333vw, 16px);
	font-size: var(--ts-caption);
	line-height: var(--ts-caption-lh);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold);
}

.group-eyebrow__num {
	display: inline-grid;
	place-items: center;
	min-width: 2.75em;
	height: 2.75em;
	padding: 0 0.6em;
	border-radius: 999px;
	background: var(--navy);
	color: var(--gold-light);
	letter-spacing: 0;
}

.panel--navy .group-eyebrow { color: var(--gold-light); }
.panel--navy .group-eyebrow__num { background: var(--gold); color: var(--navy); }
.panel--gold .group-eyebrow { color: var(--navy); }

/* A member's heading sits a step under the group's. */
.is-grouped.h2 {
	font-size: var(--ts-h4);
	line-height: var(--ts-h4-lh);
}

/* A panel opened from a link elsewhere clears the header. */
.group-tabs__panel { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

@media (max-width: 1024px) {
	.group-tabs.is-ready { grid-template-columns: minmax(0, 1fr); row-gap: clamp(1.25rem, 3vw, 2rem); }

	.group-tabs.is-ready .group-tabs__side { position: static; }

	.group-tabs.is-ready .group-tabs__list {
		flex-direction: row;
		gap: clamp(1rem, 3vw, 1.5rem);
		overflow-x: auto;
		border-bottom: 1px solid rgba(224, 197, 142, 0.3);
		scrollbar-width: none;
	}

	.group-tabs.is-ready .group-tabs__list::-webkit-scrollbar { display: none; }

	.group-tabs__tab {
		flex: none;
		width: auto;
		margin-bottom: -1px;
		border-bottom-width: 2px;
		white-space: nowrap;
	}

	.group-tabs__arrow { display: none; }
}

.choose__lead {
	margin: 0 0 clamp(1rem, 1.8229vw, 35px);
	font-size: var(--ts-body-large);
	line-height: var(--ts-body-large-lh);
	font-weight: 600;
	color: var(--navy);
}

.choose--with-art {
	display: grid;
	grid-template-columns: minmax(0, 985fr) minmax(0, 642fr);
	column-gap: clamp(1.5rem, 4.7917vw, 92px);
	align-items: stretch;
}

.choose__list { margin: 0; }

/* The note sits under a gold rule, a line's space below the last reasons. */
.choose__note {
	margin: clamp(1.5rem, 1.9792vw, 38px) 0 0;
	padding-top: clamp(0.75rem, 0.9896vw, 19px);
	border-top: 1px solid var(--gold);
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	font-weight: 600;
	color: var(--navy);
}

.choose__callout {
	margin-top: clamp(1.5rem, 2.2396vw, 43px);
	padding: clamp(1rem, 1.3021vw, 25px) clamp(1rem, 1.7188vw, 33px);
	border-radius: var(--radius);
	background: var(--gold-2);
}

.choose__callout-title {
	margin: 0 0 clamp(0.4rem, 0.625vw, 12px);
	font-size: var(--ts-body-large);
	line-height: var(--ts-body-large-lh);
	font-weight: 600;
	color: var(--navy);
}

.choose__callout-text {
	margin: 0;
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	color: var(--navy);
}

.choose__media { display: flex; margin: 0; }

/* The frame is the left column's height; the picture fills it. */
.choose__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-lg, 8px);
}

@media (max-width: 1100px) {
	.choose--with-art { grid-template-columns: minmax(0, 1fr); row-gap: clamp(1.5rem, 4vw, 2.5rem); }

	/* Stacked, a landscape crop - a full portrait would be a screen of picture. */
	.choose__image { height: auto; aspect-ratio: 4 / 3; }
}

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

/*
 * A heading over a row of cards - icon, name, a line of copy - as many to a
 * row as there are cards, up to five: Partnerships' network is five, 347px
 * apart in the design. Type from the scale; the note and gold callout under
 * the row are Why Choose Us's own classes.
 */
.icon-cards__title { margin: 0; }

/* An optional standfirst and copy under the heading, set as the About copy is. */
.icon-cards__lead {
	margin: clamp(0.75rem, 1.25vw, 24px) 0 0;
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	font-weight: 700;
	color: var(--navy);
}

.icon-cards__copy { margin-top: clamp(0.75rem, 1.25vw, 24px); }

.icon-cards__copy p {
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
}

.icon-cards__list {
	display: grid;
	grid-template-columns: repeat(var(--cards, 5), minmax(0, 1fr));
	gap: clamp(1.75rem, 3.125vw, 60px) clamp(1.25rem, 3.4896vw, 67px);
	margin: clamp(1.5rem, 3.125vw, 60px) 0 0;
	padding: 0;
	list-style: none;
}

.icon-card__icon {
	display: block;
	width: clamp(48px, 3.75vw, 72px);
	height: clamp(48px, 3.75vw, 72px);
	margin-bottom: clamp(1rem, 2.4479vw, 47px);
}

.icon-card__icon img { width: 100%; height: 100%; object-fit: contain; }

.icon-card__title {
	margin: 0 0 clamp(0.75rem, 1.9271vw, 37px);
	font-size: var(--ts-body-large);
	line-height: var(--ts-body-large-lh);
	font-weight: 500;
	color: var(--navy);
}

/* A column this narrow opens rivers if justified, so it reads ranged left. */
.icon-card__text {
	margin: 0;
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	color: var(--text-body);
}

@media (max-width: 1280px) {
	.icon-cards__list { grid-template-columns: repeat(min(var(--cards, 5), 3), minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.icon-cards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.icon-cards__list { grid-template-columns: minmax(0, 1fr); }
}

/*
 * On Our Business the card names are bold, so each type stands out from the
 * copy under it - as the panel's names and the Trade Process stages do. The
 * Partnerships row keeps the design's weight.
 */
.icon-cards--bspecification .icon-card__title,
.icon-cards--bdivisions .icon-card__title { font-weight: 700; }

/*
 * Icon cards in a navy panel: the heading and copy in light type, the cards as
 * columns between hairline gold rules, each gold icon over a bold name, and
 * the note closing the panel in gold. For a short set of types - Wholesale's
 * four supply formats - that the plain row would leave as bare text. One row
 * of up to five; two to a row on a tablet, one on a phone, the rules turning
 * to lie between the rows.
 */
.icon-cards--panel .icon-cards__title { color: var(--text-invert); }

.icon-cards--panel .icon-cards__lead { color: var(--gold-light); }

.icon-cards--panel .icon-cards__list {
	grid-template-columns: repeat(var(--cards, 5), minmax(0, 1fr));
	gap: clamp(1.5rem, 2.6042vw, 50px) 0;
}

.icon-cards--panel .icon-card {
	padding-inline: clamp(1rem, 2.0833vw, 40px);
	border-left: 1px solid rgba(224, 197, 142, 0.35);
}

.icon-cards--panel .icon-card:first-child { padding-left: 0; border-left: 0; }

.icon-cards--panel .icon-card:last-child { padding-right: 0; }

.icon-cards--panel .icon-card__icon { margin-bottom: clamp(0.9rem, 1.5625vw, 30px); }

.icon-cards--panel .icon-card__title {
	margin-bottom: clamp(0.5rem, 0.8333vw, 16px);
	font-weight: 700;
	color: var(--text-invert);
}

.icon-cards--panel .icon-card__text { color: var(--text-invert-soft); }

.icon-cards--panel .choose__note {
	border-top-color: rgba(224, 197, 142, 0.35);
	color: var(--gold-light);
}

@media (max-width: 900px) {
	.icon-cards--panel .icon-cards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.icon-cards--panel .icon-card:nth-child(2n + 1) { padding-left: 0; border-left: 0; }

	.icon-cards--panel .icon-card:nth-child(2n) { padding-right: 0; }
}

@media (max-width: 560px) {
	.icon-cards--panel .icon-cards__list { grid-template-columns: minmax(0, 1fr); }

	.icon-cards--panel .icon-card { padding: 0; border-left: 0; }

	.icon-cards--panel .icon-card + .icon-card {
		padding-top: clamp(1.25rem, 5vw, 1.75rem);
		border-top: 1px solid rgba(224, 197, 142, 0.35);
	}
}

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

/*
 * The row of buttons a copy split can close on: gold, the Typescale's button
 * height, a white square carrying the download mark, and the label in navy.
 */
.copy-split__actions {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.75rem, 1.0417vw, 20px);
	margin-top: clamp(1.5rem, 2.8646vw, 55px);
}

.dl-btn {
	display: inline-flex;
	align-items: center;
	gap: clamp(0.6rem, 0.5729vw, 11px);
	height: var(--ts-button);
	padding: 0 clamp(0.9rem, 0.9896vw, 19px) 0 clamp(0.4rem, 0.4167vw, 8px);
	border-radius: var(--radius);
	background: var(--gold-2);
	color: var(--navy);
	font-size: var(--ts-h7);
	line-height: var(--ts-h7-lh);
	font-weight: 700;
	transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.dl-btn:hover,
.dl-btn:focus-visible { background: var(--gold); color: var(--navy); }

.dl-btn__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: clamp(30px, 1.875vw, 36px);
	height: clamp(30px, 1.875vw, 36px);
	border-radius: 3px;
	background: #ffffff;
	color: var(--navy);
}

/* ----------------------------------------------------- person */

/*
 * A portrait beside the copy. The frame keeps the design's proportions with
 * or without a photograph, so nothing shifts when one is added.
 */
/* The design leaves the heading well clear of the portrait: 56px at 1920. */
.section--about-person .about__title { margin-bottom: clamp(1.5rem, 2.9167vw, 56px); }

.about-person {
	display: grid;
	grid-template-columns: minmax(0, 471fr) minmax(0, 1202fr);
	column-gap: clamp(1.5rem, 2.7083vw, 52px);
	align-items: start;
}

.about-person__media {
	aspect-ratio: 471 / 403;
	border-radius: var(--radius);
	overflow: hidden;
}

.about-person__media--empty { background: var(--cream-deep); }

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

.about-person__name {
	margin: 0;
	font-size: var(--ts-h6, clamp(20px, 1.4583vw, 28px));
	line-height: var(--ts-h6-lh, 1.2);
	font-weight: 700;
	color: var(--navy);
}

.about-person__role {
	margin: clamp(0.25rem, 0.4167vw, 8px) 0 0;
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh, 1.4);
	font-weight: 600;
	color: var(--navy);
}

.about-person__body {
	margin-top: clamp(1.5rem, 2.5vw, 48px);
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/*
 * A paragraph that is nothing but its own bold line is a sub-heading, and the
 * design sets those a size up from the copy around them.
 */
.about-person__body p > strong:only-child {
	display: inline-block;
	margin-top: clamp(0.5rem, 0.8333vw, 16px);
	font-size: var(--ts-body-large, clamp(16px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh, 1.21);
}

@media (max-width: 900px) {
	.about-person { grid-template-columns: minmax(0, 1fr); row-gap: clamp(1.25rem, 4vw, 2rem); }

	.about-person__media { max-width: 471px; }
}

/* --------------------------------------------------- timeline */

/*
 * The transaction stages on one dotted rule. Eight of them do not fit a
 * screen, so the row scrolls and snaps: a swipe or a trackpad drives it, the
 * two arrows drive it for everyone else. The rule is drawn on each stage and
 * runs into the gap after it, so it travels with the row instead of sitting
 * under it, and each disc covers the piece behind it.
 */
.timeline__intro { min-width: 0; }

/* Here the standfirst is plain copy at body weight, as the design sets it. */
.timeline__intro .about__lead {
	margin-bottom: 0;
	font-weight: 400;
	color: var(--text-body);
}

.timeline {
	--dot: clamp(48px, 3.75vw, 72px);
	--step-w: clamp(215px, 14.0625vw, 270px);
	--step-gap: clamp(1rem, 2.7083vw, 52px);
	margin-top: clamp(1.5rem, 2.9167vw, 56px);
}

.timeline__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--step-w);
	column-gap: var(--step-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

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

.timeline__step { position: relative; scroll-snap-align: start; }

/* The dotted rule, running on into the gap after each stage. */
.timeline__step::before {
	content: '';
	position: absolute;
	left: 0;
	right: calc(-1 * var(--step-gap));
	top: calc(var(--dot) / 2 - 1px);
	border-top: 2px dotted var(--gold);
}

.timeline__dot {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--dot);
	height: var(--dot);
	border-radius: 50%;
	background: var(--gold);
	font-size: var(--ts-body-large, clamp(16px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh);
	color: var(--navy);
}

.timeline__title {
	margin: clamp(0.75rem, 1.4583vw, 28px) 0 0;
	font-size: var(--ts-body-large, clamp(16px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh, 1.21);
	font-weight: 700;
	color: var(--navy);
	/* Every stage name is two words, and the design breaks all of them. */
	max-width: 74%;
}

.timeline__text {
	margin: clamp(0.6rem, 0.9375vw, 18px) 0 0;
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh);
	color: var(--text-body);
}

@media (prefers-reduced-motion: no-preference) {
	.timeline__track { scroll-behavior: smooth; }
}

/*
 * The stage grid: the same stages, every one on screen at once. Each is a card
 * under a gold rule with its number large, and an arrow in the gap carries the
 * eye to the next one - along the row, and down the column once they stack.
 * A row's last card has no arrow; the next row starts again at the left.
 */
.stage-grid {
	--stage-gap: clamp(1.5rem, 2.6042vw, 50px);
	--stage-arrow: clamp(26px, 1.6667vw, 32px);
	display: grid;
	grid-template-columns: repeat(var(--stage-cols, 4), minmax(0, 1fr));
	gap: var(--stage-gap);
	margin: clamp(1.5rem, 2.9167vw, 56px) 0 0;
	padding: 0;
	list-style: none;
}

.stage-grid__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 1.0417vw, 20px);
	padding: clamp(1.25rem, 1.6667vw, 32px);
	background: var(--surface, #fffdf7);
	border-top: 3px solid var(--gold);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.stage-grid__num {
	font-family: var(--font-primary, inherit);
	font-size: var(--ts-h4, clamp(1.4rem, 2.0833vw, 40px));
	line-height: var(--ts-h4-lh, 1.2);
	color: var(--gold);
}

.stage-grid__title {
	margin: 0;
	font-size: var(--ts-body-large, clamp(16px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh, 1.21);
	font-weight: 700;
	color: var(--navy);
	text-wrap: balance;
}

.stage-grid__text {
	margin: 0;
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh);
	color: var(--text-body);
}

/* The arrow, centred in the gap after the card. */
.stage-grid__step::after {
	content: '';
	position: absolute;
	z-index: 1;
	top: 50%;
	right: calc(-0.5 * (var(--stage-gap) + var(--stage-arrow)));
	width: var(--stage-arrow);
	height: var(--stage-arrow);
	border-radius: 50%;
	background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23050f36' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 62%;
	transform: translateY(-50%);
}

.stage-grid__step:last-child::after { display: none; }

@media (min-width: 1025px) {
	.stage-grid--cols-3 .stage-grid__step:nth-child(3n)::after,
	.stage-grid--cols-4 .stage-grid__step:nth-child(4n)::after,
	.stage-grid--cols-5 .stage-grid__step:nth-child(5n)::after { display: none; }
}

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

	.stage-grid__step:nth-child(2n)::after { display: none; }
}

@media (max-width: 560px) {
	.stage-grid { grid-template-columns: minmax(0, 1fr); }

	/* Stacked, the arrow points down into the gap under each card. */
	.stage-grid__step::after,
	.stage-grid__step:nth-child(2n)::after {
		display: block;
		top: auto;
		right: auto;
		left: 50%;
		bottom: calc(-0.5 * (var(--stage-gap) + var(--stage-arrow)));
		transform: translateX(-50%) rotate(90deg);
	}

	.stage-grid__step:last-child::after { display: none; }
}

/* ---------------------------------------------------- diagram */

/*
 * Copy on the left, the trading ring on the right. The ring is drawn: four
 * quarters of one path turned about the middle, a star at the hub, and the
 * labels laid over it as text so they wrap and can be translated.
 */
.about-diagram {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
	gap: clamp(1.5rem, 3.6458vw, 70px);
	align-items: center;
}

.about-diagram__note {
	margin: clamp(1.25rem, 2.0833vw, 40px) 0 0;
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh, 1.5);
	color: var(--text-muted);
}

/*
 * The ring carries its own size as a token, because the labels are set from
 * it: at the design's 465px they are 20px, and holding that ratio is what
 * keeps them inside their quarters when the ring is a phone's width.
 */
.about-ring {
	--ring-size: clamp(260px, 24.2188vw, 465px);

	position: relative;
	width: var(--ring-size);
	aspect-ratio: 1;
	margin-inline: auto;
}

.about-ring__wheel { display: block; width: 100%; height: 100%; overflow: visible; }

/*
 * A quarter lights gold and lifts a little away from the hub - under the
 * pointer, and in turn on its own while the ring is on screen. The lift is a
 * CSS transform on the path while the turn stays an attribute on the group
 * around it, so the two never overwrite one another.
 */
.about-ring__quarter {
	fill: var(--navy);
	transform-box: view-box;
	transform-origin: 232.5px 232.5px;
	transition: fill 0.4s ease, transform 0.4s ease;
}

.about-ring__quarter--gold { fill: var(--gold); }
.about-ring__star { fill: var(--gold); }

.about-ring__quarter.is-lit { fill: var(--gold); transform: scale(1.035); }
.about-ring__quarter--gold.is-lit { fill: var(--gold-light); }

/* White on gold is too faint to read: the label turns with its quarter. */
.about-ring__label { transition: color 0.4s ease; }
.about-ring__label.is-lit { color: var(--navy); }

@media (prefers-reduced-motion: reduce) {
	.about-ring__quarter { transition: none; }
	.about-ring__quarter.is-lit { transform: none; }
}

.about-ring__label {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 29%;
	text-align: center;
	font-size: var(--ts-h7);
	line-height: var(--ts-h7-lh);
	color: var(--text-invert, #fff);
}

.about-ring__label--dark { color: var(--navy); }

@media (max-width: 900px) {
	.about-diagram { grid-template-columns: 1fr; }

	/* Stacked it has the column to itself, so it takes more of the width. */
	.about-ring { --ring-size: min(88vw, 420px); margin-top: clamp(1.5rem, 4vw, 2.5rem); }

	/* One column narrow: two would leave the longer names badly broken. */
	.tick-list--wide {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-flow: row;
	}
}

/* ---------------------------------------------------- feature */

/*
 * A photograph with a card of copy laid over its right-hand side. The card
 * carries its own ground, so it stays readable whatever the picture does.
 */
.feature { position: relative; }

.feature__image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius);
}

.feature__card {
	background: var(--surface, #fffdf7);
	border-radius: var(--radius);
	padding: clamp(1.25rem, 2.6042vw, 50px);
	box-shadow: var(--shadow);
}

@media (min-width: 901px) {
	.feature {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 53%);
		align-items: center;
	}

	.feature__media { grid-area: 1 / 1 / 2 / 3; }

	.feature__card { grid-area: 1 / 2 / 2 / 3; margin-right: clamp(1rem, 2.0833vw, 40px); }
}

@media (max-width: 900px) {
	.feature__card { margin: -2rem clamp(0.5rem, 2vw, 1.5rem) 0; position: relative; }
}

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

.feature__card .about__lead { color: var(--navy); }

/* The ticks are a list apart from the copy above them, not a run-on of it. */
.feature__card .tick-list { margin-top: clamp(1rem, 1.5625vw, 30px); }

/* -------------------------------------------------------- why */

/*
 * Six numbered reasons in three columns, and the house mark beside them cut
 * out of a photograph - a window on the trade rather than a badge over it.
 */
.about-why { margin-top: clamp(1.5rem, 3.2292vw, 62px); }

.about-why--with-art {
	display: grid;
	grid-template-columns: minmax(0, 985fr) minmax(0, 593fr);
	column-gap: clamp(1.5rem, 5.4167vw, 104px);
	align-items: center;
}

.about-why__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(1rem, 1.8229vw, 35px);
	row-gap: clamp(1.5rem, 3.2292vw, 62px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-why__number {
	display: block;
	margin-bottom: clamp(0.75rem, 1.8229vw, 35px);
	font-size: var(--ts-h5, clamp(22px, 1.6667vw, 32px));
	line-height: var(--ts-h5-lh);
	font-variant-numeric: tabular-nums;
	color: var(--gold);
}

.about-why__title {
	margin: 0 0 clamp(0.5rem, 1.0417vw, 20px);
	font-size: var(--ts-body-large, clamp(16px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh, 1.21);
	font-weight: 600;
	color: var(--navy);
	/* The design breaks these over two lines, as it does the stage names. */
	max-width: 80%;
}

.about-why__text {
	margin: 0;
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh);
	color: var(--text-body);
}

.about-why__art { aspect-ratio: 593 / 620; }

/*
 * A timeline set as numbered stages beside a photograph (Style: numbered
 * columns): the photograph on the left and, beside it, the stages as a list in
 * two columns, read down the first and then the second - each stage one line,
 * its gold number beside its title, a thin gold rule under every row. The
 * photograph goes over them once stacked, and on a phone the list is one
 * column, 01 to the last in order.
 */
.about-why--art-left.about-why--with-art {
	/* A quarter for the photograph, so each stage's title has the room to stay on one line. */
	grid-template-columns: minmax(0, 420fr) minmax(0, 1260fr);
	align-items: stretch;
}

/* The template gives the row count (half the stages, rounded up) so the first column fills first. */
.about-why--art-left .about-why__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(var(--why-rows, 5), auto);
	grid-auto-flow: column;
	column-gap: clamp(1.5rem, 3.125vw, 60px);
	row-gap: 0;
	align-content: start;
}

.about-why--art-left .about-why__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: clamp(0.75rem, 1.25vw, 24px);
	align-items: baseline;
	padding-block: clamp(0.85rem, 1.25vw, 24px);
	border-bottom: 1px solid rgba(196, 154, 82, 0.45);
}

.about-why--art-left .about-why__number {
	min-width: 2ch;
	margin: 0;
	font-size: var(--ts-h6);
	line-height: var(--ts-h6-lh);
}

.about-why--art-left .about-why__title {
	max-width: none;
	margin: 0;
	font-weight: 700;
}

/*
 * Every title on one line. The large size only fits the longest ("Documentation
 * & Payment Arrangement") on a large screen; below that the titles take the
 * body size, which fits wherever the list sits beside the photograph.
 */
@media (max-width: 1799px) {
	.about-why--art-left .about-why__title {
		font-size: var(--ts-body);
		line-height: var(--ts-body-lh);
	}
}

/* A stage with a line of its own keeps it under the title, not under the number. */
.about-why--art-left .about-why__text {
	grid-column: 2;
	margin-top: clamp(0.25rem, 0.4167vw, 8px);
}

/* Beside the photograph, the section's copy sits over the numbered stages. */
.about-why__main { min-width: 0; }

.about-why__main .about__lead {
	font-weight: 400;
	color: var(--text-body);
}

.about-why__main .about__body { max-width: none; }

.about-why__main > :not(.about-why__list):last-of-type,
.about-why__main > .about__lead:has(+ .about-why__list) {
	margin-bottom: clamp(1.5rem, 2.6042vw, 50px);
}

/*
 * Here the photograph is a plain rectangle, not cut to the house mark: it runs
 * the height of the numbered stages beside it, cropped to fill, and takes a
 * landscape frame of its own once it stacks over them.
 */
.about-why--art-left .about-why__art {
	aspect-ratio: auto;
	min-height: 320px;
}

.about-why--art-left .about-why__image {
	-webkit-mask-image: none;
	mask-image: none;
	border-radius: var(--radius);
}

/* Too narrow for the two columns beside it: the photograph goes above and the list takes the full width. */
@media (max-width: 1240px) {
	.about-why--art-left .about-why__art {
		width: 100%;
		max-width: 593px;
		min-height: 0;
		margin-inline: auto;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 1240px) {
	.about-why--art-left.about-why--with-art {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(1.5rem, 4vw, 2.5rem);
	}
}

@media (max-width: 720px) {
	.about-why--art-left .about-why__list {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-flow: row;
	}
}

/*
 * A panel's photograph cut to the house mark (Image motion: the house mark):
 * the same shape the numbered reasons carry, so the two read as one motif.
 * Stacked on a phone it keeps a sensible size, centred under the copy.
 */
.about-panel__media--mark {
	justify-self: center;
	width: 100%;
	max-width: 560px;
	aspect-ratio: 593 / 620;
}

.about-why__image,
.about-panel__media--mark .about-panel__image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 106 110'%3E%3Cpath d='M105.339 55.0544H52.6898L50.5 0H54.6467C66.481 35.755 73.2835 50.4393 93.2248 50.4393H105.339V55.0544Z'/%3E%3Cpath d='M0 55.0547H52.6489L54.8387 110.001H50.692C38.8577 74.316 32.0553 59.6607 12.1139 59.6607H0V55.0547Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 106 110'%3E%3Cpath d='M105.339 55.0544H52.6898L50.5 0H54.6467C66.481 35.755 73.2835 50.4393 93.2248 50.4393H105.339V55.0544Z'/%3E%3Cpath d='M0 55.0547H52.6489L54.8387 110.001H50.692C38.8577 74.316 32.0553 59.6607 12.1139 59.6607H0V55.0547Z'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

@media (max-width: 1024px) {
	.about-why--with-art { grid-template-columns: minmax(0, 1fr); row-gap: clamp(1.5rem, 4vw, 2.5rem); }

	.about-why__art { max-width: 593px; margin-inline: auto; }
}

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

@media (max-width: 480px) {
	.about-why__list { grid-template-columns: minmax(0, 1fr); }


	.about-why__title { max-width: none; }
}

/* ---------------------------------------------- vertical process */

/*
 * Steps taken one after another: the heading and copy hold the left column,
 * staying in view while the steps run down the right on a dotted gold line,
 * each on a navy disc with its number in gold. Unlike the numbered columns,
 * the stage grid's cards and the activities index, it reads as one path.
 */
.about-process {
	--disc: clamp(44px, 2.9167vw, 56px);
	display: grid;
	grid-template-columns: minmax(0, 640fr) minmax(0, 1000fr);
	column-gap: clamp(1.5rem, 5.4167vw, 104px);
	align-items: start;
}

.about-process__intro {
	position: sticky;
	top: calc(var(--header-h) + 2rem);
}

.about-process__intro .about__body { max-width: none; }

.about-process__media { margin-top: clamp(1.25rem, 2.0833vw, 40px); }

.about-process__image { width: 100%; height: auto; display: block; border-radius: var(--radius); }

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

.about-process__step {
	position: relative;
	display: grid;
	grid-template-columns: var(--disc) minmax(0, 1fr);
	column-gap: clamp(1rem, 1.5625vw, 30px);
	padding-bottom: clamp(1.5rem, 2.6042vw, 50px);
}

.about-process__step:last-child { padding-bottom: 0; }

/* The line runs from under each disc to the next one. */
.about-process__step:not(:last-child)::before {
	content: '';
	position: absolute;
	left: calc(var(--disc) / 2 - 1px);
	top: var(--disc);
	bottom: 0;
	border-left: 2px dotted var(--gold);
}

.about-process__num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--disc);
	height: var(--disc);
	border-radius: 50%;
	background: var(--gold);
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	font-weight: 700;
	color: var(--navy);
}

/* The title's first line sits level with the middle of its disc. */
.about-process__body { padding-top: clamp(8px, 0.7292vw, 14px); }

.about-process__title {
	margin: 0;
	font-size: var(--ts-body-large, clamp(16px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh, 1.21);
	font-weight: 700;
	color: var(--navy);
}

.about-process__text {
	margin: clamp(0.35rem, 0.5208vw, 10px) 0 0;
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh);
	color: var(--text-body);
}

/*
 * Mirrored: the steps on the left, the heading and copy holding the right, so
 * a second process on the page does not repeat the first. The markup keeps
 * the heading first; only the columns swap.
 */
.about-process--reverse { grid-template-columns: minmax(0, 1000fr) minmax(0, 640fr); }

.about-process--reverse .about-process__intro { order: 2; }

/*
 * In a gold panel: the navy discs and type read on the gold as they are, and
 * the dotted line turns navy, as gold on gold would be lost. The panel clips
 * rather than hides, so the heading can still hold its place.
 */
.about-process--gold.panel { overflow: clip; }

.about-process--gold .about-process__step:not(:last-child)::before { border-left-color: rgba(5, 15, 54, 0.45); }

.about-process--gold .about-process__text { color: var(--navy); }

/* Gold discs would be lost on the gold panel: there they stay navy, numbered in gold. */
.about-process--gold .about-process__num { background: var(--navy); color: var(--gold-light); }

@media (max-width: 900px) {
	.about-process { grid-template-columns: minmax(0, 1fr); row-gap: clamp(1.5rem, 5vw, 2.25rem); }

	.about-process__intro { position: static; }

	/* Stacked, the heading comes first again. */
	.about-process--reverse .about-process__intro { order: 0; }
}

/* -------------------------------------------------- statement */

.about-promises {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: clamp(1.25rem, 2.0833vw, 40px);
	margin: clamp(1.5rem, 2.6042vw, 50px) 0 0;
	padding: 0;
	list-style: none;
}

.about-promise__title {
	margin: 0 0 clamp(0.3rem, 0.4167vw, 8px);
	font-size: var(--ts-h7, clamp(15px, 0.9375vw, 18px));
	line-height: var(--ts-h7-lh);
	color: var(--gold);
}

.about-promise__text { margin: 0; font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px)); color: var(--navy); }

/*
 * The closing statement as a gold panel (Style: gold panel) - the page closes
 * as the contact page does: heading, copy and strapline centred in navy on the
 * gold, and the promises beneath as a row of navy pills, each with its gold
 * tick, wrapping and staying centred on a narrow screen.
 */
.closing-statement { text-align: center; }

.closing-statement .about__title { margin-inline: auto; }

.closing-statement .about__body { margin-inline: auto; }

.closing-statement .about__body p { color: var(--navy); }

/* The strapline: its own line, spaced out, a little apart from the copy. */
.closing-statement .about__body p:last-child strong {
	display: inline-block;
	margin-top: clamp(0.25rem, 0.5208vw, 10px);
	letter-spacing: 0.12em;
}

.closing-statement__promises {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(0.75rem, 1.0417vw, 20px);
	margin: clamp(1.5rem, 2.6042vw, 50px) 0 0;
	padding: 0;
	list-style: none;
}

.closing-statement__promise {
	display: inline-flex;
	align-items: center;
	gap: clamp(0.5rem, 0.625vw, 12px);
	padding: clamp(0.6rem, 0.7292vw, 14px) clamp(1rem, 1.25vw, 24px);
	border-radius: 999px;
	background: var(--navy);
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	font-weight: 600;
	color: var(--text-invert);
}

.closing-statement__promise .tick-list__mark { flex: none; color: var(--gold); }

/* Promises with a line of their own: three navy cards, the label in gold over the line. */
.closing-statement__promises--cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	text-align: left;
}

.closing-statement__promises--cards .closing-statement__promise {
	align-items: flex-start;
	padding: clamp(1rem, 1.5625vw, 30px);
	border-radius: var(--radius);
}

.closing-statement__promises--cards .tick-list__mark {
	width: clamp(20px, 1.4583vw, 28px);
	height: clamp(20px, 1.4583vw, 28px);
}

.closing-statement__pair {
	display: flex;
	flex-direction: column;
	gap: clamp(0.25rem, 0.4167vw, 8px);
}

.closing-statement__label {
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	font-weight: 600;
	color: var(--gold-light);
}

.closing-statement__line {
	font-size: var(--ts-body-large);
	line-height: var(--ts-body-large-lh);
	font-weight: 600;
	color: var(--text-invert);
}

@media (max-width: 900px) {
	.closing-statement__promises--cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
	/*
	 * One column. Only the areas and the order were being reset here, so the
	 * 716/1006 split stayed and the heading came down a word at a time in a
	 * column of its own beside the copy.
	 */
	.about-split,
	.about-split--image-right,
	.about-split--image-left {
		grid-template-areas: none;
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(0.75rem, 3vw, 1.25rem);
	}

	.about-split__head { padding-right: 0; }

	.about-split,
	.about-split--image-right,
	.about-split--image-left,
	.about-panel--with-image,
	.about-split--image-left .about-split__media,
	.about-panel--image-left .about-panel__media { order: 0; }

	.tick-list { grid-template-columns: 1fr; }

	/*
	 * A panel with a picture stacks. This went missing when the old numbered
	 * sequence was rewritten - the rule named both in one declaration - and
	 * left the copy in a 175px gutter beside the picture.
	 */
	.about-panel--with-image {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1rem, 3vw, 1.75rem);
	}

	/* The map, though, goes behind the words as it does on the home page. */
	.about-panel--map { display: block; position: relative; overflow: hidden; }

	.about-panel--map .about-panel__media {
		position: absolute;
		inset: 0;
		z-index: 0;
		display: grid;
		place-items: center;
		pointer-events: none;
	}

	.about-panel--map .about-panel__image {
		width: 100%;
		height: 100%;
		object-fit: contain;
		opacity: 0.18;
	}

	.about-panel--map .about-panel__copy { position: relative; z-index: 1; }
}

/* ===================================================== 12. Responsive === */

/*
 * The gateway keeps its heading on the left and everything else on the right
 * down to 1024, where every split stacks. Where the right column is too narrow
 * for the three activities on one row they wrap within it - two, then one -
 * rather than the whole section stacking to make room for them.
 */

@media (max-width: 1400px) {
	.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/*
	 * The nav keeps its full spacing down to the mobile breakpoint, and
	 * between there and 1400 the row no longer fits: at 1280 it wanted
	 * 1234px of a 1167px bar and pushed the enquiry button out through the
	 * side of it. Tightened through that band only.
	 */
	:root { --navpill-pad: clamp(12px, 1.4vw, 24px); }

	.nav__list { gap: clamp(10px, 1.9vw, 28px); }
}

@media (max-width: 1180px) {
	:root { --band-h: clamp(72px, 9vw, 110px); }

	/*
	 * Stacked, the map was a tall block of empty panel under the copy. It goes
	 * behind the words instead, as a watermark, and the panel closes up.
	 */
	.platform { position: relative; overflow: hidden; }

	/* Named twice: the motif rule further down puts it back into the flow. */
	.platform .platform__media {
		position: absolute;
		inset: 0;
		z-index: 0;
		min-height: 0;
		padding: 0;
		place-items: center;
		pointer-events: none;
	}

	/* It fills the panel and the words sit on it, rather than centring in
	   whatever room the copy leaves and reading as a picture underneath. */
	.platform .platform__map {
		width: 100%;
		height: 100%;
		object-fit: contain;
		opacity: 0.16;
	}

	.platform .platform__body { position: relative; z-index: 1; }

	.sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.platform { grid-template-columns: 1fr; min-height: 0; }
	.cta { grid-template-columns: 1fr; min-height: 0; }

	/*
	 * Same as the map above: stacked under the copy the collage was a block of
	 * picture with nothing to do. It goes behind the words instead. Named
	 * through .cta, or the motif rule further down puts it back in the flow.
	 */
	.cta { position: relative; overflow: hidden; }

	.cta .cta__media {
		position: absolute;
		inset: 0;
		z-index: 0;
		max-height: none;
		opacity: 0.28;
	}

	.cta .cta__body { position: relative; z-index: 1; }
	/* The picture no longer sits under the copy, so the panel closes properly. */
	.cta__body { padding: clamp(1.75rem, 4vw, 4.5rem); }
	.cta__media { max-height: 22rem; }
	.platform__image,
	.cta__image { border-radius: var(--radius-lg); }
	.why { grid-template-columns: 1fr; }
	.site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 1024px) {
	.split,
	.media-split,
	.contact__grid { grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); }

	.split .h2 { padding-right: 0; }

	/*
	 * The two rows alternate on the desktop - copy, picture / picture, copy -
	 * so stacked they put the two pictures back to back with the copy at the
	 * far ends. Each row leads with its copy here, and the page alternates.
	 */
	.media-split--image-left .media-split__body { order: 0; }
	.media-split--image-left .media-split__media { order: 1; }

	.presence__grid { max-width: none; }
	.news-grid,
	.post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/*
	 * Mobile navigation. The drawer leaves the flow, so the bar has only the
	 * logo and the button in it: the button is held to the right rather than
	 * left sitting against the logo. The band deepens a little too - the
	 * lockup carries two lines of type and needs the room to be read.
	 */
	/* Same slope as the wider band above, with a floor: no jump at 1024. */
	:root { --band-h: clamp(84px, 9vw, 110px); }

	.site-header { --logo-h: calc((var(--band-h) - 2 * var(--bar-inset-y)) * 0.9); }

	/*
	 * The drawer is a child of the header and carries a z-index of its own, so
	 * the button needs one too or the panel slides over the way out of it.
	 */
	.site-header__actions {
		margin-left: auto;
		position: relative;
		z-index: 100;
	}

	/*
	 * Whole pixels, not a fluid size: on a fractional box the three rules land
	 * on half pixels and the browser paints them at different weights, which
	 * reads as three rules of different lengths. And a size for the collapsed
	 * bar as well, or a 44px button sits in a 48px bar with nothing either side.
	 */
	.nav-toggle {
		display: grid;
		place-items: center;
		--toggle-size: 44px;
		transition: width 0.35s var(--ease), height 0.35s var(--ease),
			background-color 0.25s var(--ease), border-color 0.25s var(--ease);
	}

	.site-header.is-stuck .nav-toggle { --toggle-size: 34px; }

	/*
	 * The drawer takes the whole screen below the header band, so the bar, the
	 * logo and the way out of it all stay in view above it.
	 */
	.nav {
		position: fixed;
		inset: var(--band-h) 0 0;
		z-index: 99;
		width: auto;
		padding: 1.5rem clamp(1.25rem, 6vw, 2rem) 2rem;
		background: var(--navy);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.35s var(--ease);
	}

	.nav-open .nav { transform: translateX(0); }
	.nav-open { overflow: hidden; }

	/*
	 * The list is the gold pill on desktop and carries its fixed height. In
	 * the drawer it is a stack, so that height has to go or every item after
	 * the first spills out of it.
	 */
	.nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		height: auto;
		padding: 0;
		background: none;
		border-radius: 0;
	}

	/*
	 * A rule under each top-level item only. Applied to every item at every
	 * depth it drew a line under every child as well, and the drawer read as a
	 * page of rules rather than a menu.
	 */
	.nav__item--depth-0 { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }

	.nav__item--depth-0:last-child { border-bottom: 0; }

	.nav__item--parent { display: grid; grid-template-columns: 1fr auto; }

	.nav__item--parent > .nav__link::after { display: none; }

	.nav__link { padding: 0.95rem 0; font-size: var(--step-0); }

	/* In the drawer the trigger takes the row, as the links do. */
	.nav__trigger { width: 100%; justify-content: flex-start; text-align: left; }

	/* Without the gold pill behind them the top-level links have to invert. */
	.nav__link--depth-0 { color: var(--text-invert); }
	.nav__link--depth-0:hover,
	.is-current > .nav__link--depth-0 { color: var(--gold-light); }

	.nav__toggle {
		display: block;
		width: 44px;
		background: transparent;
		border: none;
		cursor: pointer;
	}

	.nav__toggle span {
		display: block;
		width: 9px;
		height: 9px;
		margin-inline: auto;
		border-right: 2px solid var(--gold);
		border-bottom: 2px solid var(--gold);
		transform: rotate(45deg);
		transition: transform 0.25s var(--ease);
	}

	.nav__item.is-open > .nav__toggle span { transform: rotate(-135deg); }

	.nav__submenu {
		grid-column: 1 / -1;
		position: static;
		display: none;
		min-width: 0;
		padding: 0 0 0.5rem 1rem;
		background: transparent;
		border: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* In the accordion nothing hangs below the bar, so there is no gap to bridge. */
	.nav__submenu--drop::before { content: none; }

	/* No panel on a narrow screen: the columns stack into the accordion. */
	.nav__submenu--mega {
		grid-template-columns: 1fr;
		gap: 0;
		left: auto;
		width: auto;
		transform: none;
		padding: 0;
	}

	.nav__item--mega:hover > .nav__submenu--mega,
	.nav__item--mega:focus-within > .nav__submenu--mega { transform: none; }

	/*
	 * Each column is an accordion of its own: its list stays closed until its
	 * heading or chevron is tapped, and main.js closes the others as one opens.
	 */
	.nav__submenu--column { padding-left: 0.75rem; }

	/* One list, not two: there is no width to split on a phone. */
	.nav__col--wide .nav__submenu--column { columns: 1; }

	/* A heading row to tap: room around it, and no gold rule under the words. */
	.nav__col > .nav__link { padding: 0.8rem 0; cursor: pointer; }
	.nav__col > .nav__link > span:first-child { padding-bottom: 0; border-bottom: 0; }

	/* The chevron sits level with the heading, a 44px square, not the height of the row. */
	.nav__col > .nav__toggle { align-self: start; height: 44px; }

	.nav__col { padding-inline: 0; border-left: 0; }

	/*
	 * The drawer is navy, so the panel's own dark type has to invert here.
	 */
	.nav__col > .nav__link { color: var(--text-invert); }

	/*
	 * Every link in the drawer, not only the ones in the mega panel: a plain
	 * submenu kept the dark type it wears on the light panel and disappeared
	 * into the navy.
	 */
	.nav__submenu .nav__link { color: var(--text-invert-soft); }
	.nav__submenu .nav__link:hover,
	.nav__submenu .nav__link:focus-visible { color: var(--gold-light); }

	/*
	 * The page you are on: gold here. The navy it takes on the light desktop
	 * panel vanished into the drawer, and left a gap where its link should be.
	 */
	.nav__submenu .nav__item.is-current > .nav__link { color: var(--gold-light); }

	/* The expander is a mark, not a box: its focus ring follows its shape. */
	.nav__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 50%; }

	/*
	 * The chevron beside a heading or trigger is out of the tab order - the
	 * heading beside it takes the focus and says whether it is open - so it
	 * draws no ring. Tapped, it drew one the height of the whole row.
	 */
	.nav__toggle[aria-hidden="true"]:focus,
	.nav__toggle[aria-hidden="true"]:focus-visible { outline: none; }

	.nav__col > .nav__link { margin-bottom: 0; border-bottom: 0; }

	.nav__item.is-open > .nav__submenu { display: block; }

	.nav__mobile-extra {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
		margin-top: 2rem;
	}

	/* A navy button on the navy drawer is a line of text: it goes gold here. */
	.nav__mobile-extra .btn--navy {
		background: var(--gold);
		border-color: var(--gold);
		color: var(--navy);
	}

	.nav__contact { color: var(--text-invert-soft); font-size: var(--step--1); }

	.site-header__cta { display: none; }
}

@media (max-width: 720px) {
	/*
	 * The typescale holds the page margin at 40px from 430px up, which is a
	 * tenth of a phone screen on each side. On these widths the gutter is the
	 * theme's own, well under it.
	 */
	:root { --gutter: clamp(14px, 4.5vw, 24px); }

	/*
	 * The breaks in the headings and labels are set for the desktop measure -
	 * on a phone they only push short words onto a line of their own. The
	 * addresses keep theirs: those breaks are the address.
	 */
	h1 br,
	h2 br,
	h3 br,
	.h1 br,
	.h2 br,
	.h3 br,
	.activity__label br,
	.flow__label br { display: none; }

	.hero { padding: 8px 8px 0; }
	.hero__card { min-height: 84svh; }
	.hero__pattern { right: -20%; opacity: 0.3; }

	/*
	 * The pair is a staircase: in the design the lower ribbon starts where the
	 * upper one ends and stands one width to its left. Held as percentages of
	 * a banner this narrow and this tall, that reading breaks - the two land
	 * apart in the middle of the picture. Sized off the width instead, and
	 * placed off each other, the mark keeps the shape it has on the desktop.
	 */
	.hero .ribbon--top,
	.hero .ribbon--bottom {
		width: 38vw;
		height: 38vw;
		left: auto;
	}

	.hero .ribbon--top { top: 5.14%; right: 0; }

	/* Down by its own height, and left by the design's 429 of its 458. */
	.hero .ribbon--bottom {
		top: calc(5.14% + 38vw);
		right: 35.6vw;
	}

	.steps,
	.news-grid,
	.post-grid,
	.presence__grid,
	.mini-grid,
	.why__grid,
	.form__grid { grid-template-columns: 1fr; }

	/*
	 * Two to a row, as the design has it. On a phone-sized card a tapped
	 * sector's list of pages can run longer than the card, so the panel is
	 * packed tighter here and scrolls inside the card (.sector__detail) rather
	 * than being cut off.
	 */
	.sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 3vw, 1.25rem); }
	.sector__detail { padding: 0.75rem; }
	.sector__detail-title { margin-bottom: 0.35rem; }
	.sector__detail-text { margin-bottom: 0.5rem; }
	.sector .tag-pills { gap: 0.25rem; }
	.sector .tag-pills__item { padding: 0.2rem 0.5rem; }

	.section-bar { flex-direction: column; align-items: flex-start; }

	.activity-list { flex-wrap: wrap; }
	.activity { width: 100%; }

	.site-footer__grid { grid-template-columns: 1fr; gap: 2.5rem; }

	/*
	 * The action links are held to a column width taken from the desktop
	 * footer, which left their arrows stranded mid-panel. Here they run the
	 * width of the column, so every edge in the footer lines up.
	 */
	.action-links { max-width: none; }

	/* The address and copyright stop hanging off the second column. */
	/* The two menus sit side by side: stacked they ran to a screen of links. */
	.site-footer__navs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }


	.footer-utility-menu li { padding-right: 0; }
	.footer-utility-menu li:not(:last-child)::after { display: none; }

	.post-nav { flex-direction: column; }
}

/* ===================================== 13. Brand line motif (animated) === */

/*
 * assets/images/base-vector.svg is the shape the design repeats across
 * sections. It is inlined by tharwat_vector() so the two gold strokes can be
 * drawn on when the section scrolls into view (main.js adds .is-revealed).
 *
 * The paths carry pathLength="1", so one dash rule drives both regardless of
 * their real lengths.
 */

.vector {
	position: absolute;
	z-index: 0;
	display: block;
	pointer-events: none;
	user-select: none;
}

.vector__svg,
.vector--static {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/*
 * The draw uses a keyframe animation rather than a transition: a transition
 * cannot run on the first style computation, so the hero - which is on screen
 * at load and never gets a class change - would otherwise appear already drawn.
 */
.vector__line {
	stroke: var(--vector-line);
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

/*
 * The flash: a short bright dash on a duplicate of each stroke, travelling
 * along the path while the line draws.
 */
.vector__spark {
	stroke: var(--gold-light);
	stroke-width: 5;
	stroke-opacity: 1;
	stroke-linecap: round;
	stroke-dasharray: 0.05 0.95;
	stroke-dashoffset: 1;
	opacity: 0;
	filter: drop-shadow(0 0 7px rgba(224, 197, 142, 0.95));
}

@keyframes tharwat-vector-spark {
	0%   { stroke-dashoffset: 1; opacity: 0; }
	4%   { opacity: 1; }
	26%  { opacity: 1; }
	30%  { stroke-dashoffset: -0.05; opacity: 0; }
	100% { stroke-dashoffset: -0.05; opacity: 0; }
}

/*
 * One continuous cycle: draw on, hold, then sweep off in the same direction
 * (dashoffset carries past 0 to -1) so the line never snaps back to empty.
 */
@keyframes tharwat-vector-draw {
	0%   { stroke-dashoffset: 1; }
	30%  { stroke-dashoffset: 0; }
	62%  { stroke-dashoffset: 0; }
	92%  { stroke-dashoffset: -1; }
	100% { stroke-dashoffset: -1; }
}

/*
 * Hero: draws on page load. Other sections: when scrolled into view.
 * --ease is a fast ease-out, which finishes the sweep almost immediately and
 * reads as a flash, so the draw gets its own even in-out curve.
 */
/*
 * Keyed off the vector itself rather than a revealed ancestor: main.js adds
 * .is-drawing whenever one scrolls into view. The footer is not a .section, so
 * gating on .is-revealed left its motif permanently undrawn.
 */
.vector.is-drawing .vector__line {
	animation: tharwat-vector-draw 9s cubic-bezier(0.37, 0, 0.63, 1) infinite both;
}

.vector.is-drawing .vector__spark {
	animation: tharwat-vector-spark 9s cubic-bezier(0.37, 0, 0.63, 1) infinite both;
}

/* The two strokes trail each other rather than moving in lockstep. */
.vector.is-drawing .vector__line:nth-of-type(1),
.vector.is-drawing .vector__spark:nth-of-type(3) { animation-delay: 0.4s; }

.vector.is-drawing .vector__line:nth-of-type(2),
.vector.is-drawing .vector__spark:nth-of-type(4) { animation-delay: 1.1s; }

/* Slow drift, so the motif keeps a little life after it has drawn. */
.vector__svg {
	animation: tharwat-vector-drift 18s ease-in-out infinite alternate;
}

@keyframes tharwat-vector-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(0, -1.6%, 0); }
}

/* --- placements, following the design --- */

.vector--hero {
	top: 0;
	right: 3%;
	width: min(52%, 950px);
	height: 100%;
	opacity: 0.55;
}

.vector--platform {
	right: -6%;
	bottom: -18%;
	width: min(38%, 520px);
	height: auto;
	aspect-ratio: 579 / 604;
	opacity: 0.4;
}

.vector--presence {
	top: 0;
	right: 3%;
	width: min(46%, 860px);
	height: 100%;
	opacity: 0.8;
}

.vector--why {
	left: -2%;
	bottom: -6%;
	width: min(40%, 560px);
	height: auto;
	aspect-ratio: 579 / 604;
	opacity: 0.6;
}

.vector--cta {
	left: -8%;
	top: -16%;
	width: min(30%, 420px);
	height: auto;
	aspect-ratio: 579 / 604;
	opacity: 0.4;
}

/*
 * In the design the motif is clear of the text: the upright runs down the
 * far right of the footer and the rest of the shape carries on past the
 * edge, so it is sized to the footer's height and hung off to the right.
 */
.vector--footer {
	right: -21%;
	bottom: 0;
	width: auto;
	height: 106%;
	aspect-ratio: 579 / 604;
	opacity: 0.6;
}

/*
 * The motif sits behind the content of whatever it decorates. .vector is
 * excluded explicitly: it is absolutely positioned, and putting it back into
 * normal flow adds its full height to the panel.
 */
.hero__inner,
.platform__body,
.platform__media,
.presence > *:not(.vector),
.cta__body,
.cta__media,
.why__aside,
.why__grid {
	position: relative;
	z-index: 1;
}

@media (max-width: 720px) {
	.vector--platform,
	.vector--cta { display: none; }

	.vector--presence { right: -12%; width: 70%; opacity: 0.55; }

	.vector--hero { right: -18%; width: 90%; opacity: 0.35; }
	.vector--why { width: 70%; opacity: 0.4; }

	/* Narrow screens make the footer tall, so size it across rather than down. */
	.vector--footer {
		right: -10%;
		width: 80%;
		height: auto;
		opacity: 0.4;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Show the finished shape rather than an un-drawn one. */
	/* No drawing: the finished shape, whether or not .is-drawing is set. */
	.vector__line,
	.vector.is-drawing .vector__line {
		animation: none;
		stroke-dashoffset: 0;
	}

	.vector__spark { display: none; }
	.vector__svg { animation: none; }
}

/* ============================================ 14. Pinwheel image collage === */

/*
 * One photo revealed through the design's pinwheel shape. Both leaves hold the
 * same picture at the same size and position, so it reads as one continuous
 * image; the clip paths are traced from the design file.
 *
 * Each leaf then paints outward from the centre of the pinwheel - the top-right
 * leaf up and to the right, the bottom-left leaf down and to the left - so the
 * reveal follows the shape the way the hero strokes draw on. main.js adds
 * .is-painted on every entry, so it replays scrolling either way.
 */
.collage {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: inherit;
}

.collage__leaf {
	position: absolute;
	inset: 0;
}

.collage__leaf--tr { clip-path: url(#tharwat-quad-tr); }
.collage__leaf--bl { clip-path: url(#tharwat-quad-bl); }

.collage__wipe {
	position: absolute;
	inset: 0;
	transition: clip-path 1.5s cubic-bezier(0.37, 0, 0.63, 1);
}

/* Closed towards the centre of the pinwheel, then opened outwards. */
.collage__wipe--tr { clip-path: inset(100% 100% 0 0); }
.collage__wipe--bl { clip-path: inset(0 0 100% 100%); }

.collage.is-painted .collage__wipe { clip-path: inset(0 0 0 0); }

.collage.is-painted .collage__wipe--tr { transition-delay: 0.15s; }
.collage.is-painted .collage__wipe--bl { transition-delay: 0.55s; }

.collage__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (prefers-reduced-motion: reduce) {
	.collage__wipe {
		clip-path: inset(0 0 0 0);
		transition: none;
	}
}

/* ================================================= 15. Hero gold ribbons === */

/*
 * Two filled, gradient ribbons in the banner, positioned from the design
 * (1920x1080 canvas, hero y220..1115):
 *   top     x1472..1920  y266..724   458x458
 *   bottom  x1052..1510  y723..1182  458x459
 *
 * They are fills, not strokes, so they cannot be drawn the way the line motif
 * is. Each is revealed instead by a wipe running along its gradient - out of
 * the dense end towards the faded one - on the same 9s loop as the motif.
 */
.ribbon {
	position: absolute;
	z-index: 1;
	display: block;
	pointer-events: none;
}

.ribbon svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.ribbon--top {
	top: 5.14%;                /* (266-220) / 895 */
	right: 0;                  /* runs to the page edge */
	width: 23.3333vw;          /* 448 / 1920 - the design squeezes this one */
	height: 23.8542vw;         /* 458 / 1920 */
}

.ribbon--bottom {
	top: 56.2%;                /* (723-220) / 895 */
	left: 54.3%;               /* nudged in from the design's 1052 / 1920 */
	width: 23.8542vw;          /* 458 / 1920 */
	height: 23.9063vw;         /* 459 / 1920 */
}

/*
 * Both ribbons grow out of the point where they meet - the top one from its
 * bottom-left corner, the bottom one from its top-right - and retract back to
 * it. Revealing from the far corner instead leaves the two visibly detached
 * for most of the cycle, since the join is the last thing to appear.
 *
 * They share a delay for the same reason: the join only holds if both edges
 * arrive together.
 */
@keyframes tharwat-ribbon-top {
	0%   { clip-path: inset(100% 100% 0 0); }
	32%  { clip-path: inset(0 0 0 0); }
	64%  { clip-path: inset(0 0 0 0); }
	94%  { clip-path: inset(100% 100% 0 0); }
	100% { clip-path: inset(100% 100% 0 0); }
}

@keyframes tharwat-ribbon-bottom {
	0%   { clip-path: inset(0 0 100% 100%); }
	32%  { clip-path: inset(0 0 0 0); }
	64%  { clip-path: inset(0 0 0 0); }
	94%  { clip-path: inset(0 0 100% 100%); }
	100% { clip-path: inset(0 0 100% 100%); }
}

.ribbon--top    { clip-path: inset(100% 100% 0 0); }
.ribbon--bottom { clip-path: inset(0 0 100% 100%); }

.hero .ribbon--top {
	animation: tharwat-ribbon-top 9s cubic-bezier(0.37, 0, 0.63, 1) 0.5s infinite both;
}

.hero .ribbon--bottom {
	animation: tharwat-ribbon-bottom 9s cubic-bezier(0.37, 0, 0.63, 1) 0.5s infinite both;
}

@media (prefers-reduced-motion: reduce) {
	.ribbon--top,
	.ribbon--bottom,
	.hero .ribbon--top,
	.hero .ribbon--bottom {
		clip-path: none;
		animation: none;
	}
}

@media (max-width: 720px) {
	.ribbon { width: 46vw; height: 46vw; }
	.ribbon--bottom { left: 42%; }
}

/* ============================================ 16. Supply chain flow === */

/*
 * Design geometry on the 1920 canvas: five discs 250px across, centres 331px
 * apart on a 1655-wide band, alternating rows 198px apart. The band is the
 * content width inset by ~32px each side, so it centres on the page.
 */
.section--flow .h2 { margin-bottom: clamp(10px, 0.8333vw, 16px); }

.flow__intro {
	max-width: 81.05vw;        /* 1556 / 1920 */
	margin: 0 0 clamp(2rem, 6.5vw, 125px);
	font-size: var(--ts-body, clamp(15px, 1.0417vw, 20px));
	line-height: var(--ts-body-lh, 1.15);
	color: var(--text-body);
}

.flow {
	position: relative;
	width: min(100%, 86.198vw);   /* 1655 / 1920 */
	margin-inline: auto;
	aspect-ratio: 1655 / 448;
}

/* The zig-zag sits behind the discs and stretches with the band. */
.flow__line {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--gold);
	opacity: 0.85;
}

.flow__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--flow-steps, 5), 1fr);
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.flow__step {
	display: flex;
	justify-content: center;
}

.flow__step.is-high { align-items: flex-start; }
.flow__step.is-low  { align-items: flex-end; }

/*
 * The disc gradient is the supplied Ellipse: gold at the top-right fading to
 * 20% towards the bottom-left, on a 45 degree axis.
 */
.flow__disc {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 0.9375vw, 18px);
	width: 13.0208vw;             /* 250 / 1920 */
	height: 13.0208vw;
	padding: clamp(10px, 1.5vw, 28px);
	border-radius: 50%;
	background: var(--gold);
	text-align: center;
}

.flow__icon {
	width: clamp(28px, 3.75vw, 72px);
	height: auto;
	object-fit: contain;
}

.flow__label {
	font-size: var(--ts-body-large, clamp(14px, 1.25vw, 24px));
	line-height: var(--ts-body-large-lh, 1.22);
	color: var(--navy);
}

@media (max-width: 1024px) {
	/* Three across, then the line no longer describes the layout. */
	.flow { width: 100%; aspect-ratio: auto; }
	.flow__line { display: none; }

	.flow__steps {
		grid-template-columns: repeat(3, 1fr);
		gap: clamp(1rem, 3vw, 2rem);
		height: auto;
	}

	.flow__step.is-high,
	.flow__step.is-low { align-items: center; }

	.flow__disc { width: min(100%, 220px); height: auto; aspect-ratio: 1 / 1; }
	.flow__icon { width: 44px; }
	.flow__label { font-size: var(--ts-body-large);
 line-height: var(--ts-body-large-lh); }
}

@media (max-width: 720px) {
	/*
	 * On a phone the chain runs down the page: a disc and its name on one
	 * line, a dotted rule carrying the eye to the next. Two by two lost the
	 * order the section is about, and a rail kept it but showed one link at a
	 * time. The line is drawn on each step and reaches into the gap after it.
	 */
	.flow__steps {
		--flow-dot: clamp(56px, 16vw, 68px);

		grid-template-columns: minmax(0, 1fr);
		grid-auto-flow: row;
		gap: clamp(1rem, 4.5vw, 1.5rem);
		height: auto;
	}

	.flow__step { position: relative; justify-content: flex-start; }

	.flow__step:not(:last-child)::before {
		content: '';
		position: absolute;
		left: calc(var(--flow-dot) / 2 - 1px);
		top: var(--flow-dot);
		bottom: calc(-1 * clamp(1rem, 4.5vw, 1.5rem));
		border-left: 2px dotted var(--gold);
	}

	/* The gold moves off the whole tile and onto the mark at its head. */
	.flow__disc {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: clamp(0.75rem, 4vw, 1.25rem);
		width: 100%;
		height: auto;
		/* The square disc above is gone: without this the row stays 355px tall. */
		aspect-ratio: auto;
		max-width: none;
		padding: 0;
		border-radius: 0;
		background: transparent;
		text-align: left;
	}

	.flow__icon {
		flex: none;
		box-sizing: border-box;
		width: var(--flow-dot);
		height: var(--flow-dot);
		padding: clamp(12px, 3.6vw, 16px);
		border-radius: 50%;
		background: var(--gold);
	}

	.flow__label { font-size: var(--ts-body-large, clamp(15px, 4.4vw, 20px));
 line-height: var(--ts-body-large-lh); }
}

/*
 * The chain builds itself: discs rise in sequence and each connector draws
 * between them. main.js toggles .is-shown as the section enters and leaves,
 * so it replays scrolling either way, like the other motifs.
 */
.flow__step {
	opacity: 0;
	transform: translateY(18px) scale(0.94);
	transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

.flow.is-shown .flow__step {
	opacity: 1;
	transform: none;
}

.flow__line line {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.55s var(--ease);
}

.flow.is-shown .flow__line line { stroke-dashoffset: 0; }

/* Each disc, then the connector leaving it, then the next disc. */
.flow.is-shown .flow__step:nth-child(1) { transition-delay: 0s; }
.flow.is-shown .flow__step:nth-child(2) { transition-delay: 0.36s; }
.flow.is-shown .flow__step:nth-child(3) { transition-delay: 0.72s; }
.flow.is-shown .flow__step:nth-child(4) { transition-delay: 1.08s; }
.flow.is-shown .flow__step:nth-child(5) { transition-delay: 1.44s; }

.flow.is-shown .flow__line line:nth-of-type(1) { transition-delay: 0.18s; }
.flow.is-shown .flow__line line:nth-of-type(2) { transition-delay: 0.54s; }
.flow.is-shown .flow__line line:nth-of-type(3) { transition-delay: 0.9s; }
.flow.is-shown .flow__line line:nth-of-type(4) { transition-delay: 1.26s; }

@media (prefers-reduced-motion: reduce) {
	.flow__step { opacity: 1; transform: none; transition: none; }
	.flow__line line { stroke-dashoffset: 0; transition: none; }
}

/*
 * The same flow drawn for a timeline's stages (Our Business, Commercial Flow):
 * the discs and crossing lines, without icons - each disc its number over its
 * name - every stage in one zig-zag line that scrolls sideways under a thin
 * gold bar. The band is as wide as its discs need; the discs keep the home
 * page's size and never shrink below a size their names fit. From a tablet up
 * the line stays a zig-zag; on a phone the flow's own list takes over.
 */
.flow-scroll {
	--flow-disc: clamp(180px, 13.0208vw, 250px);
	margin-top: clamp(1.5rem, 2.9167vw, 56px);
	padding-bottom: clamp(1rem, 1.5625vw, 30px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--gold) rgba(196, 154, 82, 0.18);
}

.flow-scroll::-webkit-scrollbar { height: 6px; }
.flow-scroll::-webkit-scrollbar-track { background: rgba(196, 154, 82, 0.18); border-radius: 3px; }
.flow-scroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

.flow-scroll:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/*
 * Pinned (assets/js/main.js, initHScroll): the heading and the line hold their
 * place under the header while the page's scroll carries the line sideways,
 * and the frame drops its scrollbar - the section is made as much taller as
 * the line is wider. From a tablet up; on a phone the stages run down the page.
 */
/* flow-root keeps the heading's margin inside the pin, so the script measures its full height. */
.hscroll.is-pinned .hscroll__pin {
	position: sticky;
	top: calc(var(--header-h) + 1rem);
	display: flow-root;
}

.hscroll.is-pinned .flow-scroll {
	overflow: hidden;
	padding-bottom: 0;
}

.hscroll.is-pinned .flow--stages { will-change: transform; }

.flow--stages {
	width: calc(var(--flow-disc) * 331 / 250 * var(--flow-steps, 5));
	max-width: none;
	margin-inline: 0;
	aspect-ratio: calc(331 * var(--flow-steps, 5)) / 448;
}

.flow--stages .flow__steps { grid-template-columns: repeat(var(--flow-steps, 5), 1fr); }

.flow--stages .flow__disc { width: var(--flow-disc); height: var(--flow-disc); }

.flow__num {
	font-size: var(--ts-body);
	line-height: var(--ts-body-lh);
	font-weight: 700;
	color: var(--navy);
}

.flow--stages .flow__label { text-align: center; }

/* The build runs on past the home page's five: each disc, then the line leaving it. */
.flow--stages.is-shown .flow__step:nth-child(6) { transition-delay: 1.8s; }
.flow--stages.is-shown .flow__step:nth-child(7) { transition-delay: 2.16s; }
.flow--stages.is-shown .flow__step:nth-child(8) { transition-delay: 2.52s; }
.flow--stages.is-shown .flow__step:nth-child(9) { transition-delay: 2.88s; }
.flow--stages.is-shown .flow__step:nth-child(10) { transition-delay: 3.24s; }

.flow--stages.is-shown .flow__line line:nth-of-type(5) { transition-delay: 1.62s; }
.flow--stages.is-shown .flow__line line:nth-of-type(6) { transition-delay: 1.98s; }
.flow--stages.is-shown .flow__line line:nth-of-type(7) { transition-delay: 2.34s; }
.flow--stages.is-shown .flow__line line:nth-of-type(8) { transition-delay: 2.7s; }
.flow--stages.is-shown .flow__line line:nth-of-type(9) { transition-delay: 3.06s; }

/* On a tablet the home flow turns into a grid; the stages keep their line. */
@media (min-width: 721px) and (max-width: 1024px) {
	.flow--stages {
		width: calc(var(--flow-disc) * 331 / 250 * var(--flow-steps, 5));
		aspect-ratio: calc(331 * var(--flow-steps, 5)) / 448;
	}

	.flow--stages .flow__line { display: block; }

	.flow--stages .flow__steps {
		grid-template-columns: repeat(var(--flow-steps, 5), 1fr);
		gap: 0;
		height: 100%;
	}

	.flow--stages .flow__step.is-high { align-items: flex-start; }
	.flow--stages .flow__step.is-low { align-items: flex-end; }

	.flow--stages .flow__disc { width: var(--flow-disc); height: var(--flow-disc); aspect-ratio: auto; }
}

@media (max-width: 720px) {
	.flow-scroll { overflow: visible; padding-bottom: 0; }

	.flow--stages { width: 100%; aspect-ratio: auto; }

	/* The number takes the gold mark's place at the head of each line. */
	.flow--stages .flow__num {
		flex: none;
		display: grid;
		place-items: center;
		width: var(--flow-dot);
		height: var(--flow-dot);
		border-radius: 50%;
		background: var(--gold);
	}

	.flow--stages .flow__steps { grid-template-columns: minmax(0, 1fr); }

	.flow--stages .flow__disc { width: 100%; height: auto; }

	.flow--stages .flow__label { text-align: left; }
}

/* ======================================= 17. Trading philosophy compliance === */

.compliance {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
	padding: 0;
}

.compliance__body {
	align-self: center;
	padding: clamp(2rem, 4.5vw, 86px) clamp(1.5rem, 2.5vw, 48px)
		clamp(2rem, 4.5vw, 86px) clamp(1.25rem, 2.8125vw, 54px);
}

.h2--gold { color: var(--gold-2); }

.compliance__intro {
	margin: 0 0 clamp(1rem, 1.8vw, 34px);
	font-size: var(--ts-body, 20px);
	line-height: var(--ts-body-lh, 1.4);
	color: var(--text-invert-soft);
}

.compliance__lead {
	margin: 0 0 clamp(0.9rem, 1.5vw, 28px);
	font-size: var(--ts-body, 20px);
	line-height: var(--ts-body-lh);
	font-weight: 500;
	color: var(--gold-2);
}

/* Two columns of ticks, wrapping to one on narrow screens. */
.tick-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.6rem, 1.1vw, 20px) clamp(1rem, 2vw, 38px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tick-grid__item {
	display: flex;
	align-items: center;
	gap: clamp(8px, 0.6vw, 12px);
	font-size: var(--ts-body, 20px);
	line-height: var(--ts-body-lh);
	font-weight: 600;
	color: var(--text-invert);
}

.tick-grid__mark {
	flex: 0 0 auto;
	width: clamp(16px, 1.15vw, 22px);
	height: auto;
	color: var(--gold-2);
}

.compliance__media { position: relative; }

.compliance__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

@media (max-width: 1024px) {
	.compliance { grid-template-columns: 1fr; }
	.compliance__media { min-height: 22rem; }
	.compliance__image { position: static; height: 22rem; }
}

@media (max-width: 560px) {
	.tick-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	/* Stacked, the copy no longer has a side to lend the mark: it goes. */
	.statement--with-mark { display: block; }

	.statement__mark { display: none; }

	.product,
	.product--image-right { grid-template-columns: 1fr; gap: 1.5rem; }

	.product--image-right .product__media { order: 0; }

	/*
	 * Stacked, each product is a long run of photograph and points, and they
	 * ran into one another. More air at every step, and a hairline halfway
	 * between one product and the next, so each reads as its own item.
	 */
	.products { padding-inline: clamp(1.5rem, 3.6458vw, 70px); }
	.products__list { gap: 0; }

	.product + .product {
		margin-top: 2rem;
		padding-top: 2rem;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}

	.product__name { margin-bottom: 1rem; }
	.product__points { gap: 0.75rem; }
	.product__enquire { margin-top: 1.5rem; }
}

/* ---------------------------------------------------- commodities catalogue */

/*
 * The Commodities page: every commodity group page as a photo card, in the
 * groups the primary menu sets out - a gold-ruled group name over a row of
 * four cards, each the page's first product photograph over its name and how
 * many products it lists.
 */
.catalogue__title { margin: 0 0 clamp(1.5rem, 2.6042vw, 50px); }

.catalogue__group + .catalogue__group { margin-top: clamp(2rem, 3.6458vw, 70px); }

.catalogue__group-title {
	margin: 0 0 clamp(1rem, 1.5625vw, 30px);
	padding-bottom: clamp(0.6rem, 0.8333vw, 16px);
	border-bottom: 1px solid var(--gold);
	font-size: var(--ts-h6);
	line-height: var(--ts-h6-lh);
	font-weight: 700;
	color: var(--navy);
}

.catalogue__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 1.5625vw, 30px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.catalogue__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius);
	background: #ffffff;
	color: var(--navy);
	text-decoration: none;
	transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.catalogue__card:hover,
.catalogue__card:focus-visible {
	box-shadow: 0 14px 34px rgba(5, 15, 54, 0.12);
	transform: translateY(-3px);
}

.catalogue__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--navy);
}

.catalogue__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.catalogue__card:hover .catalogue__image,
.catalogue__card:focus-visible .catalogue__image { transform: scale(1.04); }

.catalogue__body {
	display: flex;
	flex-direction: column;
	gap: clamp(0.2rem, 0.3125vw, 6px);
	padding: clamp(0.9rem, 1.25vw, 24px);
}

.catalogue__name {
	font-size: var(--ts-body-large);
	line-height: var(--ts-body-large-lh);
	font-weight: 700;
	color: var(--navy);
}

.catalogue__count {
	font-size: var(--ts-small);
	line-height: var(--ts-small-lh);
	font-weight: 600;
	color: var(--gold-2);
}

@media (max-width: 1024px) {
	.catalogue__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

@media (max-width: 420px) {
	.catalogue__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------ justified copy */

/*
 * The site's copy is justified, at every width, as the client asks: every
 * paragraph, and every list item that is a line of copy - a product's points,
 * a ticked list - hyphenated so the spacing stays even on a narrow column. A
 * list item that holds its own heading or blocks is a card or a stage, not a
 * line of copy: justified, its title spread its words across the column
 * ("Product        &"), so it is left to its own alignment and only its
 * paragraphs are justified. :where() keeps all of this at the lowest weight,
 * so a component that sets its own alignment still has it; copy inside a
 * centred block (the closing panels, an empty listing, the 404) keeps the
 * centre.
 */
:where(.site-main) :where(p, li:not(:has(h1, h2, h3, h4, h5, h6, p, div))) {
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

:where(.site-main) :where(.closing-statement, .closing-panel, .blog-empty, .error-404) :where(p, li:not(:has(h1, h2, h3, h4, h5, h6, p, div))) {
	text-align: inherit;
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* --------------------------------------------------------- text selection */

/*
 * Selected text takes the theme's colours rather than the browser's blue:
 * navy on the brand gold. On a gold ground - the gold panels, the gold banner,
 * the closing call to action - gold on gold would vanish, so there it is white
 * on navy instead.
 */
::selection {
	background: var(--gold);
	color: var(--navy);
}

:is(.panel--gold, .cbanner--gold, .cta) ::selection,
:is(.panel--gold, .cbanner--gold, .cta)::selection {
	background: var(--navy);
	color: var(--text-invert);
}