/*
Theme Name: Ironwood
Author: Theo Nga
Author URI: https://clouditate.com/
Theme URI: https://ironwoodconsulting.co.zw
Description: A full site editing theme for Ironwood Consultancy — environmental, social and geospatial consultancy. Built on the Modernist design system: Archivo throughout, a single accent red on paper, zero corner radius, visible grid and strong rules.
Tags: full-site-editing, block-patterns, one-column, wide-blocks, custom-colors, custom-logo, editor-style, sticky-post
Text Domain: ironwood
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 7.0
Version: 1.0.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ══════════════════════════════════════════════════════════════════════════
   Design-system tokens. theme.json is the source of truth — these aliases
   only give the component layer the shorter names the system documents.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
	--color-bg: var(--wp--preset--color--base, #f3f2f2);
	--color-surface: var(--wp--preset--color--surface, #eae9e9);
	--color-text: var(--wp--preset--color--contrast, #201e1d);
	--color-ink: var(--wp--preset--color--ink, #0d0c0c);
	--color-accent: var(--wp--preset--color--accent, #ec3013);
	--color-accent-600: var(--wp--preset--color--accent-600, #dd2b0f);
	--color-accent-700: var(--wp--preset--color--accent-700, #ae1800);
	--color-neutral-700: var(--wp--preset--color--neutral-700, #605d5d);
	--color-divider: color-mix(in srgb, #201e1d 40%, transparent);

	/* On ink grounds the ink ramp replaces the paper one. */
	--ink-text: #f3f2f2;
	--ink-line: rgba(243, 242, 242, 0.16);
	--ink-line-strong: rgba(243, 242, 242, 0.22);
	--ink-muted: rgba(243, 242, 242, 0.76);

	--font-heading: var(--wp--preset--font-family--archivo, "Archivo", system-ui, sans-serif);
	--font-body: var(--font-heading);

	--measure: 1360px;
	--gutter: 32px;
	--shell-col: 320px;
	--shell-gap: 72px;
}

/* Padded full-width wrappers are the whole layout here, so the system's
   border-box reset is load-bearing — without it every section overflows by
   its own gutters. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* — front-end only — */

html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════════════════════════
   Base type. Archivo is loaded on its width axis, so headings are set at a
   wider stretch than body copy — that expansion is the system's voice.
   ══════════════════════════════════════════════════════════════════════════ */

h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-post-title,
.wp-block-site-title {
	font-stretch: 115%;
	text-wrap: pretty;
}

h1,
.wp-block-post-title {
	font-stretch: 120%;
}

/* Display type set at 120% stretch produces very long single words — at phone
   widths `environmental` on its own is wider than the column. The phone tier
   sizes the headings to fit the copy we ship; this is the guard that keeps any
   future headline from pushing the page sideways instead of wrapping. */
h1,
h2,
h3,
h4,
.wp-block-post-title,
.iw-figure {
	overflow-wrap: break-word;
}

p {
	text-wrap: pretty;
}

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

::selection {
	background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

img {
	max-width: 100%;
}

/* The label style that carries every kicker, meta line and nav item. */
.iw-mono {
	font-stretch: 72%;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

.iw-mono a {
	text-decoration: none;
}

/* Photography prints in pure black and white. */
.grayscale,
.iw-photo img,
.iw-photo .wp-block-cover__image-background,
.iw-photo .wp-block-post-featured-image img {
	filter: grayscale(1) contrast(1.08);
}

/* ══════════════════════════════════════════════════════════════════════════
   Grounds and measure
   ══════════════════════════════════════════════════════════════════════════ */

.iw-wrap {
	max-width: var(--measure);
	margin-inline: auto;
	padding-inline: var(--gutter);
	width: 100%;
}

.iw-ink {
	background: var(--color-ink);
	color: var(--ink-text);
}

/* On ink grounds links are chrome — contact details, practice areas, nav —
   so they carry the ground's own colour and pick up the rule on hover. */
.iw-ink a:not(.wp-element-button) {
	color: var(--ink-text);
	text-decoration: none;
}

.iw-ink a:not(.wp-element-button):hover {
	color: var(--color-accent);
	text-decoration: underline;
}

.iw-ink .iw-muted {
	color: var(--ink-muted);
}

.iw-muted {
	color: var(--color-neutral-700);
}

.iw-accent {
	color: var(--color-accent);
}

.iw-ink .iw-accent {
	color: var(--color-accent);
}

/* The visible modular grid — 80px columns ruled in light ink. */
.iw-grid {
	background-image: linear-gradient(90deg, rgba(243, 242, 242, 0.07) 1px, transparent 1px);
	background-size: 80px 100%;
}

.iw-surface {
	background: var(--color-surface);
}

.iw-poster-ground {
	background: var(--color-accent);
	color: #fff;
}

.iw-poster-ground a:not(.wp-element-button) {
	color: #fff;
}

/* Strong rules do the organising. */
.iw-rule-top {
	border-top: 2px solid var(--color-divider);
}

.iw-rule-bottom {
	border-bottom: 2px solid var(--color-divider);
}

.iw-ink.iw-rule-top,
.iw-ink .iw-rule-top {
	border-top-color: var(--ink-line);
	border-top-width: 1px;
}

.iw-hairline-top {
	border-top: 1px solid var(--ink-line);
}

/* Vertical rhythm of the sections themselves. Header, main and footer butt
   against each other — the root block gap belongs between content blocks,
   not between the grounds. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.iw-sec {
	margin-block: 0 !important;
}

.iw-pad {
	padding-block: 80px;
}

.iw-pad-lg {
	padding-block: 104px;
}

.iw-pad-sm {
	padding-block: 48px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Header
   ══════════════════════════════════════════════════════════════════════════ */

.iw-header {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 0 var(--gutter);
	min-height: 68px;
	border-bottom: 1px solid var(--ink-line);
}

.admin-bar .iw-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.iw-header > .wp-block-group {
	margin-block: 0;
}

/* The brand mark: the chevron that stands in for the logo, and steps aside
   once a real logo is set in the customizer. */
.iw-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 19px;
	letter-spacing: -0.01em;
	font-stretch: 112%;
	line-height: 1;
}

.iw-brand::before {
	content: "";
	width: 12px;
	height: 20px;
	flex: none;
	background: var(--color-accent);
	clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}

.iw-brand:has(.wp-block-site-logo img)::before {
	display: none;
}

.iw-brand .wp-block-site-title {
	margin: 0;
	line-height: 1;
}

.iw-brand .wp-block-site-title a {
	text-decoration: none;
	color: inherit;
}

/* CONSULTANCY, set light against the weight of IRONWOOD. */
.iw-brand-sub {
	font-weight: 300;
	opacity: 0.5;
	letter-spacing: -0.01em;
}

/* Layout of the bar itself is the navigation block's own; only the rhythm
   between items and the ink colours belong to the theme. */
.iw-nav .wp-block-navigation__container {
	gap: 30px;
}

.iw-nav a {
	color: var(--ink-text);
}

.iw-nav a:hover,
.iw-nav .current-menu-item > a,
.iw-nav a[aria-current="page"] {
	color: var(--color-accent);
}

.iw-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--color-ink);
	color: var(--ink-text);
	padding-top: 68px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Layout shells — the asymmetric 320px + rest grid the whole page runs on
   ══════════════════════════════════════════════════════════════════════════ */

.iw-shell {
	display: grid;
	grid-template-columns: var(--shell-col) minmax(0, 1fr);
	gap: var(--shell-gap);
}

.iw-shell-top {
	align-items: start;
}

.iw-cards-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.iw-cards-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.iw-shell > *,
.iw-cards-2 > *,
.iw-cards-3 > *,
.iw-stats > *,
.iw-sectors > *,
.iw-areas > *,
.iw-foot > * {
	margin-block: 0;
	min-width: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Hero
   ══════════════════════════════════════════════════════════════════════════ */

.iw-hero {
	display: grid;
	grid-template-columns: 1.2fr minmax(0, 1fr);
}

.iw-hero > * {
	margin-block: 0;
	min-width: 0;
}

.iw-hero-copy {
	padding: 104px 72px 92px 0;
}

.iw-hero-copy > * {
	margin-block: 0;
}

.iw-hero-copy h1 {
	max-width: 16ch;
	margin-bottom: 30px;
}

.iw-hero-lead {
	max-width: 46ch;
	color: rgba(243, 242, 242, 0.84);
	line-height: 1.5;
	margin-bottom: 36px !important;
}

/* The accent rule that leads the eyebrow line. */
.iw-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--color-accent);
	margin-bottom: 34px !important;
}

.iw-eyebrow::before {
	content: "";
	width: 44px;
	height: 2px;
	flex: none;
	background: var(--color-accent);
}

.iw-hero-media {
	border-left: 1px solid var(--ink-line);
	position: relative;
	min-height: 640px;
	display: flex;
	align-items: stretch;
}

/* The slot owns the hero's height and the cover fills it. The cover block
   prints its own min-height inline, which outranks anything a media query can
   say about the slot — so the inheritance has to be stated !important, or the
   hero keeps its full desktop height all the way down to a phone. */
.iw-hero-media .wp-block-cover,
.iw-hero-media .wp-block-image,
.iw-hero-media figure {
	width: 100%;
	margin: 0;
	min-height: inherit !important;
}

.iw-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Office plate, dropped into the bottom-left corner of the hero photograph.
   The cover block does the placing — the plate only states its own width, so
   it does not shrink-wrap inside the cover's auto-width inner container. */
.iw-plate {
	position: relative;
	width: min(310px, 100%);
	background: var(--color-accent);
	color: #fff;
	padding: 22px 26px;
	z-index: 2;
}

.iw-plate > * {
	margin-block: 0;
}

.iw-plate .iw-mono {
	opacity: 0.85;
	margin-bottom: 8px !important;
}

.iw-plate-line {
	font-family: var(--font-heading);
	font-weight: 800;
	font-stretch: 110%;
	line-height: 1.22;
}

/* Standards strip under the hero buttons. */
.iw-standards {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	color: rgba(243, 242, 242, 0.74);
	border-top: 1px solid var(--ink-line);
	padding-top: 14px;
	margin-top: 44px !important;
}

.iw-standards > * {
	margin-block: 0;
	padding: 0 20px;
	border-left: 1px solid var(--ink-line);
}

.iw-standards > :first-child {
	padding-left: 0;
	border-left: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Credentials row
   ══════════════════════════════════════════════════════════════════════════ */

.iw-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.iw-stat {
	padding: 44px 40px;
	border-right: 1px solid var(--ink-line);
}

.iw-stats > .iw-stat:first-child {
	padding-left: 0;
}

.iw-stats > .iw-stat:last-child {
	padding-right: 0;
	border-right: 0;
}

.iw-stat > * {
	margin-block: 0;
}

.iw-figure {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 50px;
	line-height: 1;
	letter-spacing: -0.04em;
	font-stretch: 115%;
	font-variant-numeric: tabular-nums;
}

.iw-figure sub,
.iw-figure sup,
.iw-figure small {
	font-size: 24px;
	vertical-align: baseline;
	bottom: 0;
	top: 0;
}

.iw-stat .iw-mono {
	color: rgba(243, 242, 242, 0.74);
	margin-top: 10px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Service cards — they invert to ink on hover, and shift two pixels up-left
   ══════════════════════════════════════════════════════════════════════════ */

.iw-svc {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 26px 28px;
	border: 1px solid var(--color-divider);
	background: var(--color-bg);
	transition: background 120ms linear, border-color 120ms linear, transform 120ms linear, color 120ms linear;
}

.iw-svc > * {
	margin-block: 0 !important;
}

.iw-svc p {
	line-height: 1.5;
	opacity: 0.82;
}

.iw-svc:hover {
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--ink-text);
	transform: translate(-2px, -2px);
}

.iw-svc:hover .iw-num,
.iw-svc:hover .iw-meta {
	color: var(--color-accent);
	opacity: 1;
}

.iw-svc:hover p {
	opacity: 0.88;
}

.iw-num {
	opacity: 0.55;
}

.iw-meta {
	opacity: 0.62;
	margin-top: auto !important;
}

/* On an ink ground the card is outlined instead of filled, and turns red. */
.iw-dsvc {
	border-color: rgba(243, 242, 242, 0.18);
	background: transparent;
	color: var(--ink-text);
}

.iw-dsvc:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
	transform: translate(-2px, -2px);
}

.iw-dsvc:hover .iw-num,
.iw-dsvc:hover .iw-meta {
	color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   Sectors
   ══════════════════════════════════════════════════════════════════════════ */

.iw-sectors {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 32px;
}

.iw-sector > * {
	margin-block: 0;
}

.iw-sector {
	border-top: 3px solid var(--color-accent);
	padding-top: 14px;
}

.iw-sector .iw-mono {
	margin-bottom: 8px !important;
}

.iw-sector p {
	color: var(--color-neutral-700);
}

/* The practice-area row — the same ruled cells as the sectors, four across,
   with the area title as the link through to its own page. */
.iw-areas {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

/* Three cells rather than four — an area page linking to its siblings. */
.iw-areas-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.iw-areas .iw-sector a {
	text-decoration: none;
	color: var(--color-text);
}

.iw-areas .iw-sector a:hover {
	color: var(--color-accent);
}

/* ══════════════════════════════════════════════════════════════════════════
   Poster — the one place the accent runs as a field
   ══════════════════════════════════════════════════════════════════════════ */

.iw-poster {
	display: grid;
	grid-template-columns: 1.4fr minmax(0, 1fr);
	gap: 64px;
	align-items: end;
}

.iw-poster > * {
	margin-block: 0;
	min-width: 0;
}

.iw-poster h2 {
	font-size: 68px;
	line-height: 0.92;
	letter-spacing: -0.04em;
	max-width: 20ch;
}

.iw-poster p {
	line-height: 1.5;
	opacity: 0.92;
}

/* Ink button on the red field, and its outlined companion. */
.iw-poster-ground .wp-block-button.iw-btn-ink .wp-element-button {
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: #fff;
}

.iw-poster-ground .wp-block-button.iw-btn-ink .wp-element-button:hover {
	background: #000;
	border-color: #000;
}

.iw-poster-ground .wp-block-button.iw-btn-line .wp-element-button {
	background: transparent;
	border-color: #fff;
	color: #fff;
}

.iw-poster-ground .wp-block-button.iw-btn-line .wp-element-button:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
}

/* Outlined button on an ink ground. */
.iw-btn-line .wp-element-button {
	background: transparent;
	border: 1px solid rgba(243, 242, 242, 0.35);
	color: var(--ink-text);
}

.iw-btn-line .wp-element-button:hover {
	background: rgba(243, 242, 242, 0.08);
	border-color: var(--ink-text);
	color: var(--ink-text);
}

/* Button labels are flush left when the button is wider than its label. */
.wp-block-buttons.iw-btns {
	gap: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Enquiry forms
   ══════════════════════════════════════════════════════════════════════════ */

.iw-forms {
	border: 1px solid var(--ink-line-strong);
}

.iw-tabs {
	display: flex;
	border-bottom: 1px solid var(--ink-line-strong);
}

.iw-tab {
	flex: 1;
	text-align: left;
	background: transparent;
	border: 0;
	border-right: 1px solid var(--ink-line-strong);
	padding: 20px 22px 18px;
	cursor: pointer;
	font-family: var(--font-heading);
	font-size: 11px;
	color: inherit;
	position: relative;
}

.iw-tab:last-child {
	border-right: 0;
}

.iw-tab:hover {
	background: rgba(243, 242, 242, 0.06);
}

.iw-tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	background: var(--color-accent);
}

.iw-panels {
	padding: 40px;
}

.iw-panel[hidden] {
	display: none;
}

.iw-form-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
}

.iw-form-grid .field-wide {
	grid-column: 1 / -1;
}

.iw-form-foot {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	border-top: 1px solid var(--ink-line-strong);
	padding-top: 22px;
}

/* — form controls, from the design system — */

.field > label {
	display: block;
	font-size: 12px;
	margin-bottom: 5px;
	color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.input {
	width: 100%;
	min-height: 36px;
	padding: 6px 10px;
	font: inherit;
	font-size: 14px;
	color: var(--color-text);
	caret-color: var(--color-accent);
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: 0;
}

.input:hover {
	border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.input:focus-visible {
	border-color: var(--color-accent);
	outline-offset: 0;
}

textarea.input {
	min-height: 90px;
	resize: vertical;
}

select.input {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 32px;
}

.radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 13px;
}

.radio input,
.seg-opt input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.radio .dot {
	width: 16px;
	height: 16px;
	flex: none;
	border-radius: 50%;
	border: 1.5px solid var(--color-divider);
}

.radio:hover .dot {
	border-color: var(--color-accent);
}

.radio input:checked + .dot {
	border-color: var(--color-accent);
	background: var(--color-accent);
	box-shadow: inset 0 0 0 4px var(--color-bg);
}

.radio input:focus-visible + .dot {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.seg {
	display: inline-flex;
	flex-wrap: wrap;
	border: 1px solid var(--color-divider);
}

.seg-opt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	font-size: 13px;
	cursor: pointer;
}

.seg-opt + .seg-opt {
	border-left: 1px solid var(--color-divider);
}

.seg-opt:has(input:checked) {
	background: var(--color-accent);
	color: #fff;
}

.seg-opt:not(:has(input:checked)):hover {
	background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.seg-opt:has(input:focus-visible) {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}

/* — the same controls on an ink ground — */

.iw-ink .input {
	background: #171615;
	border-color: rgba(243, 242, 242, 0.22);
	color: var(--ink-text);
}

.iw-ink .field > label {
	color: rgba(243, 242, 242, 0.6);
}

.iw-ink .seg {
	border-color: rgba(243, 242, 242, 0.22);
}

.iw-ink .seg-opt + .seg-opt {
	border-left-color: rgba(243, 242, 242, 0.22);
}

.iw-ink .radio {
	color: rgba(243, 242, 242, 0.84);
}

.iw-ink .radio .dot {
	border-color: rgba(243, 242, 242, 0.45);
}

.iw-ink .radio:hover .dot {
	border-color: var(--color-accent);
}

.iw-ink .radio input:checked + .dot {
	border-color: var(--color-accent);
	background: var(--color-accent);
	box-shadow: inset 0 0 0 4px var(--color-ink);
}

/* Form buttons are the theme's buttons — the block editor's are declarative,
   these are hand-written markup, so they need the styles stated. */
.iw-submit {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-stretch: 72%;
	padding: 15px 24px;
	background: var(--color-accent);
	border: 1px solid var(--color-accent);
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

.iw-submit:hover {
	background: var(--color-accent-600);
	border-color: var(--color-accent-600);
	color: #fff;
}

.iw-submit:active {
	background: var(--color-accent-700);
	border-color: var(--color-accent-700);
}

.iw-submit-line {
	background: transparent;
	border-color: rgba(243, 242, 242, 0.4);
	color: var(--ink-text);
	padding: 13px 20px;
	font-size: 11px;
}

.iw-submit-line:hover {
	background: rgba(243, 242, 242, 0.1);
	border-color: var(--ink-text);
	color: var(--ink-text);
}

/* What the block editor shows in place of the server-rendered forms. */
.iw-forms-placeholder {
	border: 1px dashed var(--color-accent);
	padding: 26px;
	color: var(--color-text);
	background: var(--color-surface);
}

.iw-forms-placeholder .iw-mono {
	display: block;
	font-size: 11px;
	color: var(--color-accent);
	margin-bottom: 10px;
}

.iw-forms-placeholder p {
	margin: 0;
	font-size: 13px;
	color: var(--color-neutral-700);
}

/* Honeypot — off-screen, never focusable by mouse or keyboard tab order. */
.iw-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Submitted / error notice */
.iw-notice {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding: 26px 0;
}

.iw-notice h3 {
	margin: 0;
	font-size: 28px;
	letter-spacing: -0.03em;
	font-weight: 900;
}

.iw-notice p {
	max-width: 52ch;
	color: rgba(243, 242, 242, 0.82);
	margin: 0;
}

.iw-tag {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	padding: 3px 10px;
	background: var(--wp--custom--accent-ramp--100, #fff2ef);
	color: var(--wp--custom--accent-ramp--800, #7c1405);
}

.iw-tag-warn {
	background: var(--color-accent);
	color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════════════════════════════════ */

.iw-footer {
	border-top: 1px solid var(--ink-line);
	padding: 72px var(--gutter) 40px;
}

.iw-foot {
	display: grid;
	grid-template-columns: 1.3fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	border-bottom: 1px solid rgba(243, 242, 242, 0.2);
	padding-bottom: 48px;
}

.iw-foot > * > * {
	margin-block: 0;
}

.iw-foot-col .iw-mono {
	color: var(--color-accent);
	margin-bottom: 14px !important;
}

/* A column can carry a second label further down (Administration, Telephone).
   It heads the lines below it, so it needs clear air above — the contact line
   in between means these labels are never adjacent siblings. */
.iw-foot-col > .iw-mono:not(:first-child) {
	margin-top: 22px !important;
}

.iw-foot-links {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.iw-foot-links a {
	text-decoration: none;
}

.iw-legal {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding-top: 22px;
	color: rgba(243, 242, 242, 0.62);
}

.iw-legal > * {
	margin-block: 0;
}

.iw-tabnums {
	font-variant-numeric: tabular-nums;
}

.iw-phone {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 20px;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════════
   Editorial pages — posts, archives, search, 404
   ══════════════════════════════════════════════════════════════════════════ */

/* The reading measure hugs the left gutter rather than centring, so an
   article's body lines up with the title in the band above it. Core's
   constrained-layout base style centres children with `margin: auto
   !important`, so this has to answer in kind; `.aligncenter` is left out of
   the guard so an explicitly centred block still centres. */
.iw-measure.is-layout-constrained
	> :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.aligncenter)) {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* The first and last post have no neighbour on one side, and core prints
   nothing at all for that link — so collapse the row when it would only
   reserve blank space. */
.iw-postnav:not(:has(.wp-block-post-navigation-link)) {
	display: none;
}

.iw-entry + .iw-entry {
	border-top: 1px solid var(--color-divider);
	padding-top: 48px;
	margin-top: 48px;
}

.iw-entry .wp-block-post-title {
	margin-bottom: 12px;
}

.iw-entry .wp-block-post-title a {
	text-decoration: none;
	color: var(--color-text);
}

.iw-entry .wp-block-post-title a:hover {
	color: var(--color-accent);
}

.wp-block-post-meta,
.iw-postmeta {
	color: var(--color-neutral-700);
}

.iw-postmeta a {
	color: var(--color-neutral-700);
}

.wp-block-query-pagination {
	border-top: 2px solid var(--color-divider);
	padding-top: 20px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-stretch: 72%;
}

.wp-block-query-pagination a {
	text-decoration: none;
}

.wp-block-search__button,
.wp-block-search .wp-block-search__input {
	border-radius: 0;
}

.wp-block-search .wp-block-search__input {
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	min-height: 44px;
	padding: 6px 12px;
}

/* In the search and 404 bands the form is a top-level block, so it would run
   the full width of the page. Hold it to a sane target, flush left. */
.iw-ink .wp-block-search {
	max-width: 520px;
}

.wp-block-comments .wp-block-comment-template li + li {
	border-top: 1px solid var(--color-divider);
	padding-top: 24px;
	margin-top: 24px;
}

.comment-form input:not([type="submit"]),
.comment-form textarea {
	width: 100%;
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: 0;
	padding: 8px 10px;
	font: inherit;
	font-size: 14px;
}

/* Core sizes `.wp-block-button__link` with `height: 100%` so that buttons
   sharing a flex row come out level. WordPress puts the same class on the
   comment form's submit input, where there is no such row — the percentage
   resolves against the page instead and prints a full-viewport-tall button. */
.comment-form input[type="submit"].wp-block-button__link {
	height: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive — the comp's two breakpoints
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {

	:root {
		--shell-gap: 36px;
	}

	.iw-shell {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.iw-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.iw-hero-media {
		border-left: 0;
		min-height: 420px;
	}

	.iw-hero-copy {
		padding: 72px 0 56px;
	}

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

	.iw-stats > .iw-stat:nth-child(2) {
		padding-right: 0;
		border-right: 0;
	}

	.iw-stats > .iw-stat:nth-child(3) {
		padding-left: 0;
	}

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

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

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

	.iw-poster {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
		align-items: start;
	}

	.iw-poster h2 {
		font-size: 52px;
	}
}

/* Six nav items will not share a 68px bar with the brand, the cart and the
   button, and core's overlay toggle does not take over until 600px. Between
   those widths the menu becomes its own ruled row, flush left, rather than
   letting the button and cart reflow into whatever space is left. */
@media (max-width: 1180px) and (min-width: 601px) {

	.iw-header {
		flex-wrap: wrap;
		padding-bottom: 0;
	}

	.iw-header > .wp-block-navigation {
		order: 3;
		flex-basis: 100%;
		border-top: 1px solid var(--ink-line);
		padding-block: 15px;
	}

	/* The block is set to justify right, which is correct in the one-row bar
	   but not on a full-width row of its own — the system keeps everything
	   flush left. The class core justifies with sits on the container list,
	   so the override has to as well. */
	.iw-header > .wp-block-navigation,
	.iw-header > .wp-block-navigation .wp-block-navigation__container {
		justify-content: flex-start;
	}
}

@media (max-width: 760px) {

	:root {
		--gutter: 20px;
	}

	.iw-cards-2,
	.iw-cards-3,
	.iw-sectors,
	.iw-areas,
	.iw-stats,
	.iw-foot,
	.iw-form-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.iw-stat {
		padding: 28px 0;
		border-right: 0;
		border-bottom: 1px solid var(--ink-line);
	}

	.iw-stats > .iw-stat:last-child {
		border-bottom: 0;
	}

	/* Keep the bar one row: brand, menu toggle and the consultation button. */
	.iw-header .iw-btns .wp-element-button {
		padding: 9px 12px !important;
		font-size: 10px !important;
		letter-spacing: 0.12em;
	}

	.iw-tabs {
		flex-direction: column;
	}

	.iw-tab {
		border-right: 0;
		border-bottom: 1px solid var(--ink-line-strong);
	}

	.iw-tab:last-child {
		border-bottom: 0;
	}

	.iw-panels {
		padding: 24px 20px;
	}

	.iw-form-foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.iw-pad,
	.iw-pad-lg {
		padding-block: 56px;
	}

	.iw-poster h2 {
		font-size: 40px;
	}

	.iw-standards {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 0;
	}

	.iw-standards > * {
		padding-inline: 14px;
	}

	.iw-standards > :nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.iw-legal {
		flex-direction: column;
		gap: 8px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Phones. The two tiers above are the comp's; they carry a 760px floor, which
   leaves a 390px phone reading tablet sizing. Everything below is the phone
   reading of the same system — the rules, the ink grounds and the flush-left
   measure are unchanged, only the display type, the section rhythm and the
   size of the things a thumb has to hit.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {

	:root {
		--gutter: 18px;
		--shell-gap: 28px;
	}

	/* — display type — */

	/* Archivo at 120% stretch sets `environmental` 378px wide at the desktop
	   minimum of 42px, inside a 354px column. The curve in theme.json is
	   matched to the comp and stays as it is; the phone states its own sizes. */
	h1,
	.wp-block-post-title {
		font-size: 36px;
		line-height: 0.98;
	}

	h2 {
		font-size: 30px;
	}

	h3 {
		font-size: 21px;
	}

	.iw-figure {
		font-size: 40px;
	}

	.iw-figure sub,
	.iw-figure sup,
	.iw-figure small {
		font-size: 20px;
	}

	.iw-poster h2 {
		font-size: 34px;
	}

	.iw-notice h3 {
		font-size: 23px;
	}

	/* Fluid typography is on, so a size written in px in a pattern reaches the
	   page as a clamp() and settles on its own minimum here — the 28px entry
	   title arrives at 17.9px and the 19px area heading at 14px, both under
	   the body copy they are meant to head. Core writes those clamps inline,
	   so the phone reading of them has to be stated !important. */
	.iw-entry .wp-block-post-title {
		font-size: 24px !important;
	}

	.iw-areas .iw-sector h3 {
		font-size: 17px !important;
	}

	/* — section rhythm — */

	.iw-pad,
	.iw-pad-lg {
		padding-block: 44px;
	}

	.iw-pad-sm {
		padding-block: 32px;
	}

	.iw-sectors,
	.iw-areas {
		gap: 24px;
	}

	.iw-entry + .iw-entry {
		padding-top: 32px;
		margin-top: 32px;
	}

	/* — header: brand, menu and cart on one 68px row — */

	/* Six nav items are behind core's overlay by now, but the brand, the cart
	   and a 150px button still cannot share the bar, so it wraps to a second
	   row — 93px of sticky chrome on a 844px screen. The button steps out
	   here; the hero, the poster, the footer and the Enquiries nav item all
	   still carry the same call to action. */
	.iw-header > .wp-block-buttons {
		display: none;
	}

	.iw-header {
		gap: 14px;
	}

	.iw-brand {
		font-size: 17px;
	}

	/* — hero — */

	.iw-hero-copy {
		padding: 44px 0 40px;
	}

	.iw-hero-copy h1 {
		max-width: none;
	}

	/* The photograph is the operator's to set; until it is, this slot is an
	   empty ink field, and a phone should not scroll through 640px of it. */
	.iw-hero-media {
		min-height: 320px;
	}

	.iw-plate {
		padding: 18px 20px;
	}

	.iw-standards > * {
		padding-inline: 12px;
	}

	/* — cards, credentials, poster — */

	.iw-svc {
		padding: 20px 20px 22px;
	}

	.iw-stat {
		padding: 22px 0;
	}

	.iw-poster {
		gap: 28px;
	}

	/* — enquiry forms — */

	/* Mobile Safari zooms the page in whenever a focused field is set under
	   16px, and it does not zoom back out — the enquiry form is the whole
	   point of the site, so every control that takes typing goes to 16px and
	   to a 44px box with it. */
	.input,
	.comment-form input:not([type="submit"]),
	.comment-form textarea,
	.wp-block-search .wp-block-search__input {
		font-size: 16px;
		min-height: 44px;
	}

	textarea.input,
	.comment-form textarea {
		min-height: 110px;
	}

	/* The consent radio and the segmented options are the smallest controls in
	   the form — a 16px dot and one line of label. Their box grows rather than
	   their type; the label wrapping to two lines was the only thing making
	   them big enough to hit. */
	.radio,
	.seg-opt {
		min-height: 44px;
	}

	.iw-tab {
		padding: 15px 16px 14px;
	}

	.iw-panels {
		padding: 20px 16px;
	}

	.iw-form-grid {
		gap: 18px;
	}

	/* — footer — */

	.iw-footer {
		padding: 48px var(--gutter) 32px;
	}

	.iw-foot {
		gap: 32px;
		padding-bottom: 36px;
	}

	/* ── tap targets ──
	   Everything a thumb is meant to hit reaches 44px. Only standalone
	   controls and lists of destinations are raised — links running inside a
	   sentence stay in the line of prose where they belong. */

	/* Core draws the overlay toggle as a bare 24px icon. */
	.iw-nav .wp-block-navigation__responsive-container-open,
	.iw-nav .wp-block-navigation__responsive-container-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	/* WooCommerce injects the mini cart into any block-theme header, at 28px.
	   It is the last item in the bar, so the padding it gains is pulled back
	   on the right to keep the icon on the gutter. */
	.iw-header .wc-block-mini-cart__button {
		min-width: 44px;
		min-height: 44px;
		padding: 8px;
		margin-right: -8px;
	}

	/* The toggle sits against the cart rather than the gutter, so only its
	   own overshoot comes back. */
	.iw-nav .wp-block-navigation__responsive-container-open {
		margin-right: -10px;
	}

	/* The brand is the link home, in the sticky bar and again in the footer.
	   Set on one line at 19px it is 21px of target; the lockup around it is
	   centred, so the row it grows into costs nothing. */
	.iw-brand .wp-block-site-title a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	/* Footer contact details, the practice-area column, the telephone numbers
	   beside the enquiry form, the area-nav headings and the contact page's
	   ruled cells are all lists of destinations, one per line — each becomes
	   its own row. The site title is excluded: in the footer it is half of the
	   brand lockup, and it has the rule above. */
	.iw-foot-col p:not(.wp-block-site-title) > a,
	.iw-foot-links p > a,
	.iw-phone > a,
	.iw-areas .iw-sector h3 > a,
	.iw-areas .iw-sector p > a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	/* Those lines arrive as one paragraph split by breaks; block rows make the
	   break redundant and it would otherwise print an empty line. Matching on
	   the break that follows a link leaves the one inside the postal address —
	   plain text, still two lines — alone. */
	.iw-foot-col a + br,
	.iw-areas .iw-sector a + br,
	.iw-phone a + br {
		display: none;
	}

	/* The entry title is the way into the post; at 24px it is comfortable to
	   hit, but only across the width of its own words unless it is told to
	   fill the line. */
	.iw-entry .wp-block-post-title a {
		display: block;
	}

	.wp-block-post-excerpt__more-link,
	.wp-block-query-pagination a,
	.wp-block-comment-reply-link a {
		display: inline-block;
		padding-block: 11px;
	}

	/* Pagination is a row of numbers with its own rule above it; the padding
	   the links gain would double the gap under that rule. */
	.wp-block-query-pagination {
		padding-top: 9px;
	}
}

/* Small phones — 320 to 400px. The headline is the only thing that genuinely
   does not fit at the tier above; the gutter comes in with it so the column
   does not end up narrower than the words it holds. */
@media (max-width: 400px) {

	:root {
		--gutter: 16px;
	}

	h1,
	.wp-block-post-title {
		font-size: 31px;
	}

	h2 {
		font-size: 27px;
	}

	.iw-figure {
		font-size: 34px;
	}

	.iw-poster h2 {
		font-size: 29px;
	}

	/* The lead is set large on purpose, but a 288px column at 19px is a
	   fifteen-character line — too short to read as a paragraph. It carries a
	   preset size class, and core prints those !important. */
	.iw-hero-lead {
		font-size: 17px !important;
	}
}