/*
Theme Name: itelligent-i
Theme URI: https://www.itelligent-i.com
Template: hello-elementor
Author: itelligent-i
Description: Direction A. The whole design of itelligent-i.com lives in this one file.
Version: 1.1.0
Text Domain: hello-child
*/

/* ==========================================================================
   Direction A, measured.

   The first attempt at this file was built by eye from the drawing and came out
   loose - boxes of different heights, bands the wrong colour, the accelerators
   on white when they are on teal. So this version is taken from the geometry of
   design/direction-a-pages.html rather than from an impression of it. The
   numbers in the comments are the ones in the drawing, at its 1200px width.

   Page:       1200 wide, content inset 56 each side -> 1088 of content
   Header:     0-74,      white, 1px #DCE1E0 under
   Hero:       74-504,    white; side panel x640 w504 h344
   Trusted by: 504-578,   #F6F8F7
   What we do: 578-974,   white; 3 cards w341.3, gap 32, h208
   Accelerators: 974-1304, #003F4C; 8 cards w252 h68, gap 20, 3px #FFC827 left
   Evidence:   1304-1650, white; panels w540 and w508
   CTA:        1650-1770, #D56803
   Footer:     1770-2030, #003F4C

   Everything the site looks like is in this file. A page carries classes, never
   values. Change a token and the whole site moves; change a page and only that
   page moves. The old site had it the other way round, which is how three
   different oranges ended up live at once.

   Contrast is measured, not assumed - councils procure against WCAG 2.2 AA and
   will test it. Ratios are recorded beside the tokens so a later "small tweak"
   that breaks one is visible as it is made.
   ========================================================================== */

:root {
	--paper:      #FFFFFF;
	--sunk:       #F6F8F7;
	--line:       #DCE1E0;

	--ink:        #17262A;   /* 15.59:1 on paper */
	--mute:       #5B6C6F;   /*  5.50:1 on paper - passes AA */

	--teal:       #003F4C;
	--orange:     #D56803;
	--gold:       #FFC827;

	/* CONTRAST, restored 26 Oct 2026. Parked on 24 Sep on Tim's instruction -
	   "get the page drawn and worry about WCAG later" - with the values he had
	   already chosen: "use this #BB5C03, least change, otherwise the orange is
	   too far away from itelligent-i colours." Later has arrived.
	
	   Why it could not wait for launch: councils procure against WCAG 2.2 AA,
	   and two things were failing on every page.
	
	     white on #D56803, every button     3.61:1  -> on #BB5C03  4.52:1  AA
	     #D56803 as small text, every       3.61:1  -> #B45803     4.84:1  AA
	     eyebrow label on white                         (on #F6F8F7 4.54:1  AA)
	
	   --orange itself is unchanged and stays the brand colour for things that
	   are not text: rules, dots, the bars on cards, and the 63px "Until now."
	   in the hero, which is large text and needs only 3:1. Only the two places
	   where orange carries words were darkened, which is why they are aliases.
	   The working is in design/button-contrast.html. */
	--orange-fill: #BB5C03;
	--orange-ink:  #B45803;

	--display: "Varela Round", "Segoe UI", system-ui, sans-serif;
	--body:    "Lexend", "Segoe UI", system-ui, sans-serif;
	--mono:    "IBM Plex Mono", Consolas, monospace;

	/* The drawing is a 1200px canvas where body text is 12.5px. Copied
	   literally that ships a site nobody over forty can read, so the SCALE is
	   kept and the sizes lifted: display stays 3.6x body, section headings
	   2.2x. Everything below is the drawn value times 1.36. */
	--t-hero:  clamp(2.5rem, 1.55rem + 3.8vw, 3.9375rem);  /* 46 -> 63px */
	--t-h2:    clamp(1.625rem, 1.25rem + 1.5vw, 2.375rem); /* 28 -> 38px */
	--t-h3:    1.375rem;                                    /* 16.5 -> 22px */
	--t-body:  1.0625rem;                                   /* 12.5 -> 17px */
	--t-small: 0.9375rem;                                   /* 11 -> 15px */
	--t-label: 0.8125rem;                                   /* mono, caps */

	/* THE SCALE FACTOR.
	   
	   The drawing is a 1200px canvas whose body text is 12.5px. Reproduced at
	   1:1 that ships a site nobody can read, so the type was lifted by 1.36 -
	   and the first build lifted ONLY the type, leaving every width at 1:1.
	   The result was cards proportionally too narrow for their own headings:
	   "Analytics Accelerators" and "Children's Social Care" wrapped onto two
	   lines where the drawing has them on one.
	   
	   So the factor applies to everything. Each measurement below is the drawn
	   value times 1.36, and is commented with the drawn value it came from.
	   Change the factor and the whole design rescales in proportion; change one
	   number and it stops matching the drawing. */
	--wrap:   1480px;                                  /* drawn 1088 */
	--gutter: clamp(1.25rem, 0.5rem + 2.8vw, 4.75rem); /* drawn 56   */
	--gap-card: 2.6875rem;                             /* drawn 32   */
	--gap-tight: 1.6875rem;                            /* drawn 20   */
	--pad-card: 2rem;                                  /* drawn 24   */
	--pad-panel: 2.6875rem;                            /* drawn 32   */
	--gap-col: 3.375rem;                               /* drawn 40   */
	--radius: 10px;
	--shadow: 0 1px 2px rgba(15, 34, 36, .06), 0 10px 30px rgba(15, 34, 36, .08);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-size: var(--t-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 400;
	line-height: 1.13;
	letter-spacing: -0.005em;
	margin: 0 0 .5em;
	color: var(--teal);
	text-wrap: balance;
}
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.25; color: var(--teal); }

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

a { color: var(--orange-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal); }

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

.iii-skip { position: absolute; left: -9999px; }
.iii-skip:focus {
	left: 1rem; top: 1rem; z-index: 999;
	background: var(--teal); color: #fff;
	padding: .75rem 1.25rem; border-radius: var(--radius);
}

/* ==========================================================================
   Bands and measure

   Every band is a full-width ground with the same 1088px measure inside it, so
   the left and right margins line up down the whole page whatever the ground
   colour. Tim flagged inconsistent margins in an earlier round; this is what
   stops that recurring.
   ========================================================================== */

.iii-wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }

.iii-band { padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.5rem); }
.iii-band--sunk { background: var(--sunk); }
.iii-band--hair { border-top: 1px solid var(--line); }

/* Drawn 974-1304: teal, with gold eyebrows and white type. */
.iii-band--teal { background: var(--teal); color: rgba(255, 255, 255, .82); }
.iii-band--teal h1, .iii-band--teal h2, .iii-band--teal h3 { color: #fff; }
.iii-band--teal .iii-eyebrow { color: var(--gold); }
.iii-band--teal a { color: #fff; }
.iii-band--teal a:hover { color: var(--gold); }
.iii-band--teal .iii-mute { color: rgba(255, 255, 255, .72); }

/* Drawn 1650-1770: orange, 120 tall, white type and a white button. */
.iii-band--orange { background: var(--orange); color: #fff; }
.iii-band--orange h1, .iii-band--orange h2, .iii-band--orange h3 { color: #fff; }
.iii-band--orange p { color: rgba(255, 255, 255, .92); }

/* ==========================================================================
   Small parts
   ========================================================================== */

.iii-eyebrow {
	font-family: var(--mono);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--orange-ink);
	margin: 0 0 1.25rem;
}

.iii-lede { font-size: 1.0625rem; color: var(--mute); max-width: 42ch; margin-bottom: 0; }
.iii-mute { color: var(--mute); }
.iii-prose { max-width: 68ch; }

.iii-crumb {
	font-family: var(--mono);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mute);
	margin: 0 0 1.25rem;
}
.iii-crumb a { color: var(--mute); text-decoration: none; }
.iii-crumb a:hover { color: var(--teal); text-decoration: underline; }
.iii-crumb span { margin: 0 .5rem; opacity: .55; }

.iii-caret a { font-weight: 600; text-decoration: none; font-size: var(--t-small); }
.iii-caret a::after { content: " \2192"; }
.iii-caret a:hover { text-decoration: underline; }

/* ---- buttons ------------------------------------------------------------
   Drawn: header button 100x34 in ink #17262A; hero primary 150x44 in orange;
   hero secondary 150x44 white with a #DCE1E0 border.

   The orange primary carries WHITE text at 3.61:1, which fails AA. The drawing
   is a wireframe, not a contrast audit, so the fill is darkened to #BB5C03 -
   4.52:1. That is the LEAST darkening that clears the bar, chosen over a safer
   #B64703 because Tim's point stands: go further and it stops reading as
   itelligent-i orange. The brand #D56803 is still everywhere - the review band,
   the card rules, the dot in the wordmark, the chart and the headline.       */

.iii-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--body);
	font-size: var(--t-small);
	font-weight: 600;
	line-height: 1;
	padding: .875rem 1.5rem;
	border-radius: 8px;
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.iii-btn.iii-btn { color: #fff; background: var(--orange-fill); }
.iii-btn.iii-btn:hover { background: var(--teal); color: #fff; }

.iii-btn--ghost.iii-btn--ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
/* Background AND colour, together, always.
   
   This rule used to set only the colour. The base `.iii-btn:hover` was still
   painting the background teal underneath it - it applies to every button, and
   a ghost button carries both classes - so the label went teal on a teal fill
   and the button read as an empty box. Exactly the failure the doubled class
   names elsewhere in this file exist to prevent, arrived at from the other
   direction: not specificity losing, but a partial override winning.
   
   So: any rule that changes one half of a foreground/background pair on hover
   sets the other half in the same breath, even when it looks redundant. */
.iii-btn--ghost.iii-btn--ghost:hover { background: var(--sunk); border-color: var(--teal); color: var(--teal); }

.iii-btn--ink.iii-btn--ink { background: var(--ink); color: #fff; padding: .6875rem 1.25rem; }
.iii-btn--ink.iii-btn--ink:hover { background: var(--teal); color: #fff; }

/* On the orange and teal bands the button inverts to white. */
.iii-band--orange .iii-btn.iii-btn,
.iii-band--teal .iii-btn--ghost.iii-btn--ghost {
	background: var(--paper);
	color: var(--orange-ink);
	border-color: var(--paper);
}
.iii-band--orange .iii-btn.iii-btn:hover,
.iii-band--teal .iii-btn--ghost.iii-btn--ghost:hover { background: var(--sunk); color: var(--teal); }

/* Doubled class names are deliberate. Hello Elementor ships
   `.elementor-kit-15 a { color: … }` at (0,1,1); a single .iii-btn is (0,1,0)
   and loses - which once repainted every button label and made them invisible.
   Doubling wins without !important. */

.iii-btns { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2rem; }

/* ==========================================================================
   Header - drawn 0-74, white, 1px #DCE1E0 under
   ========================================================================== */

.iii-header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.iii-header__in { display: flex; align-items: center; gap: 2rem; min-height: 100px; } /* drawn 74 */

/* The real logo replaces the drawing's text wordmark and its orange dot. The
   drawing used type because a wireframe cannot show a logo; the logo carries
   its own mark - the node constellation, which is the brand's whole idea - so
   the dot would be a second, competing one. */
.iii-brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex: none;
}
.iii-brand img { height: 40px; width: auto; display: block; }
.iii-footer .iii-brand img { height: 36px; }

@media (max-width: 620px) {
	.iii-header__in { min-height: 76px; }
	.iii-brand img { height: 30px; }
}

.iii-nav { margin-inline: auto; }
.iii-nav ul { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.iii-nav a {
	font-size: var(--t-small);
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	padding-block: .5rem;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
/* Eight items since AI joined the header (27 Oct). Below this width they no
   longer fit at a 2rem gap, so the gap tightens before the burger takes over;
   nowrap stops "Data framework" folding onto two lines on the way down. */
@media (max-width: 1380px) { .iii-nav ul { gap: 1.25rem; } }
.iii-nav a:hover,
.iii-nav .current-menu-item > a,
.iii-nav .current-page-ancestor > a { color: var(--teal); font-weight: 600; border-bottom-color: var(--orange); }

.iii-header__end { display: flex; align-items: center; gap: 1.25rem; }
.iii-signin { font-size: var(--t-small); font-weight: 500; color: var(--mute); text-decoration: none; white-space: nowrap; }
.iii-header__end .iii-btn { white-space: nowrap; }
.iii-signin:hover { color: var(--teal); }

.iii-burger { display: none; }

@media (max-width: 1240px) {
	.iii-nav { display: none; }
	.iii-nav.is-open {
		display: block;
		position: absolute; inset: 74px 0 auto;
		background: var(--paper); border-bottom: 1px solid var(--line);
		padding: 1rem var(--gutter) 1.5rem;
	}
	.iii-nav.is-open ul { flex-direction: column; align-items: flex-start; gap: .25rem; }
	.iii-nav.is-open a { display: block; padding: .625rem 0; }
	.iii-burger {
		display: inline-flex; margin-left: auto;
		background: none; border: 1px solid var(--line); border-radius: 8px;
		padding: .5rem .75rem; font: 600 var(--t-small)/1 var(--body); color: var(--ink);
		-webkit-tap-highlight-color: transparent;
		transition: background-color .12s ease, color .12s ease, border-color .12s ease;
	}
	/* An explicit pressed state. Without one the browser supplies its own -
	   which on Tim's phone was a red fill, and since the button did nothing
	   else, red was the only feedback the site gave. States are ours to define,
	   not the user agent's to guess. */
	.iii-burger[aria-expanded="true"] {
		background: var(--teal); color: #fff; border-color: var(--teal);
	}
	/* Teal, like every other focus ring on the site. This one was gold, which
	   is 1.55:1 on the white header - the only control on the site whose
	   keyboard focus was effectively invisible. */
	.iii-burger:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
	.iii-signin { display: none; }
}

/* ==========================================================================
   Hero - drawn 74-504; panel x640 w504 h344, so left column 544 and gap 40
   ========================================================================== */

.iii-hero { padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.125rem); }

.iii-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 544fr) minmax(0, 504fr);
	gap: var(--gap-col);
	align-items: start;
}

/* Drawn on three short lines at 46/52. That is part of the design, not a
   wrapping accident, so the lines are authored as elements. The last line is
   the brand orange - the only place on the page orange carries display type,
   which at 63px is far past the 3:1 large-text threshold. */
.iii-hero h1 { margin-bottom: 1.25rem; line-height: 1.13; }
.iii-hero h1 span { display: block; }
.iii-hero h1 .iii-turn { color: var(--orange); }

/* ---- the side panel, drawn #F6F8F7 with a #DCE1E0 border ---- */
.iii-panel {
	background: var(--sunk);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--pad-panel);
}
.iii-panel__label {
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mute);
	margin: 0 0 1.5rem;
}
.iii-panel ul { list-style: none; margin: 0; padding: 0; }
.iii-panel li { padding: .6875rem 0; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--mute); }
.iii-panel li:first-child { border-top: 0; padding-top: 0; }

/* The figures under the chart, drawn at y376 with a rule above them at y330. */
/* Four across on one row, Tim's call on 26 Oct having seen both. It only works
   with short labels: the numbers carry the meaning, the labels just name them.
   Drops to two columns on a tablet and one on a phone, where a single row would
   squeeze each figure to nothing. */
.iii-panel__figures {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.15rem 1rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}
@media (max-width: 1100px) { .iii-panel__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .iii-panel__figures { grid-template-columns: 1fr; } }

/* The chart is illustrative - deliberately, so the real analytics are not
   handed to anyone to copy. Sitting above four hard numbers it could make
   those look illustrative too, which four words prevent. */
.iii-panel__cap {
	margin: .5rem 0 0;
	font: 600 0.75rem/1.3 var(--mono);
	letter-spacing: .08em; text-transform: uppercase; color: var(--mute);
}
/* The columns were equal thirds but the labels were not, so a long one ran
   past its column and the three groups sat unevenly - Tim, 23 Oct: "the 3 tags
   are not aligned". min-width:0 lets a grid item be narrower than its content
   (grid items default to min-content, which is what let it overflow), and
   text-wrap:balance splits a two-line label evenly instead of leaving one word
   stranded. */
.iii-panel__figures > * { min-width: 0; }
.iii-panel__figures .iii-stat__l { text-wrap: balance; }

@media (max-width: 900px) {
	.iii-hero__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Stats
   ========================================================================== */

.iii-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.iii-stat__n { font-family: var(--display); font-size: 1.75rem; line-height: 1; color: var(--teal); margin: 0 0 .35rem; }
.iii-band--teal .iii-stat__n { color: var(--gold); }
.iii-stat__l { font-size: var(--t-small); color: var(--mute); margin: 0; }
/* In the hero panel the four labels sit side by side and one of them wraps to
   two lines. Giving them all the height of two makes the row read as
   deliberate rather than as one label having overflowed - and it keeps "and
   counting", which is the wording Tim asked for, instead of cutting the label
   to fit the layout. */
.iii-panel__figures .iii-stat__l { min-height: calc(var(--t-small) * 1.35 * 2); }

/* ==========================================================================
   Trusted by - drawn 504-578, #F6F8F7, 74 tall
   ========================================================================== */

.iii-logos { background: var(--sunk); padding-block: 1.5rem; }
.iii-logos__in { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 3.5rem; }
.iii-logos .iii-eyebrow { color: var(--mute); margin: 0; flex: none; }
.iii-logos ul { display: flex; flex-wrap: wrap; gap: 1rem 3.5rem; list-style: none; margin: 0; padding: 0; }
.iii-logos li { font-weight: 600; font-size: var(--t-small); color: var(--ink); }
/* The partners group. Separated from the customers by a hairline rather than
   by a band, so the two read as one strip with two labels - which is the point:
   same weight, different claim. The rule disappears when the row wraps onto
   two lines, where it would be pointing at nothing. */
.iii-logos__second { padding-left: 3.5rem; border-left: 1px solid var(--line); }
@media (max-width: 1100px) { .iii-logos__second { padding-left: 0; border-left: 0; } }

/* ==========================================================================
   Cards - drawn w341.3 h208, gap 32, 24 padding, 32x4 orange rule at the top

   Equal heights come from the grid, not from luck. The first build let the
   cards size themselves and they came out ragged, which is the first thing Tim
   saw.
   ========================================================================== */

.iii-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-card); margin: 0; padding: 0; list-style: none; }
.iii-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-tight); }
/* Cards under a heading or a paragraph sat almost against it - Tim, 27 Oct,
   on a teal band, but it was true on white too. The same 2.5rem the steps
   and the timeline already have. */
.iii-band .iii-wrap > .iii-cards:not(:first-child) { margin-top: 2.5rem; }

.iii-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--pad-card);
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
/* the 32x4 orange rule drawn at the top of each card */
.iii-card::before { content: ""; display: block; width: 32px; height: 4px; background: var(--orange); border-radius: 2px; }
.iii-card h3 { margin: 0; }
/* A heading that is also a link must stay a heading. Without this the global
   link colour wins and every card title on the accelerators hub turned orange,
   which read as eight warnings rather than eight destinations. */
.iii-card h3 a { color: inherit; text-decoration: none; }
.iii-card--link:hover h3 a { color: var(--teal); }
.iii-card p { margin: 0; color: var(--mute); font-size: var(--t-small); }
.iii-card .iii-caret { margin-top: auto; padding-top: 1rem; }

.iii-card--link { position: relative; transition: border-color .15s ease, box-shadow .15s ease; }
.iii-card--link:hover { border-color: var(--teal); box-shadow: var(--shadow); }
.iii-card--link a::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }

/* ---- the eight accelerators, on teal -----------------------------------
   Drawn w252 h68, gap 20, a 3px #FFC827 left edge and a translucent white
   face. No orange top rule on these - that belongs to the white cards.     */

.iii-band--teal .iii-cards { gap: var(--gap-tight); }
.iii-band--teal .iii-card {
	background: rgba(255, 255, 255, .06);
	border: 0;
	border-left: 3px solid var(--gold);
	border-radius: 0 6px 6px 0;
	padding: 1rem 1.25rem;
	gap: .25rem;
}
.iii-band--teal .iii-card::before { display: none; }
.iii-band--teal .iii-card h3 { font-size: var(--t-body); color: #fff; }
.iii-band--teal .iii-card p { color: rgba(255, 255, 255, .72); }
.iii-band--teal .iii-card a { color: #fff; text-decoration: none; }
.iii-band--teal .iii-card--link:hover { background: rgba(255, 255, 255, .12); box-shadow: none; }
.iii-band--teal .iii-card .iii-caret { display: none; }

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

/* ==========================================================================
   Evidence - drawn 1304-1650; quote panel w540 on #F6F8F7, insight w508 bordered
   ========================================================================== */

.iii-split { display: grid; grid-template-columns: minmax(0, 540fr) minmax(0, 508fr); gap: var(--gap-col); align-items: stretch; }
@media (max-width: 860px) { .iii-split { grid-template-columns: 1fr; } }

.iii-quote { margin: 0; background: var(--sunk); border-radius: var(--radius); padding: 2rem; height: 100%; }
.iii-quote p { font-family: var(--display); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.3; color: var(--teal); }
.iii-quote cite { display: block; font-style: normal; font-size: var(--t-small); font-weight: 500; color: var(--mute); margin-top: 1rem; }

.iii-panel--list { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; height: 100%; }

.iii-list { list-style: none; margin: 0; padding: 0; }
.iii-list li { border-top: 1px solid var(--line); padding: 1rem 0; }
.iii-list li:first-child { border-top: 0; padding-top: 0; }
.iii-list a { font-weight: 600; color: var(--ink); text-decoration: none; }
.iii-list a:hover { color: var(--teal); text-decoration: underline; }
.iii-list .iii-meta { display: block; font-size: var(--t-small); color: var(--mute); margin-top: .2rem; }

/* ==========================================================================
   Call to action - drawn 1650-1770, orange, 120 tall, white button on the right
   ========================================================================== */

.iii-cta__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.iii-cta h2 { margin-bottom: .35rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.iii-cta p { margin: 0; font-size: var(--t-small); }
.iii-cta .iii-btns { margin-top: 0; }

/* ==========================================================================
   Module register

   Direction A draws the modules as small cards, three across - not as a
   numbered list. That is the better answer to a problem already known: a
   numbered hairline register reads to a local government buyer as the complete
   offer and they stop looking. The note underneath is part of the component and
   is always printed by inc/sections.php.
   ========================================================================== */

.iii-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-tight); }
@media (max-width: 860px) { .iii-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .iii-modules { grid-template-columns: 1fr; } }

.iii-module { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.125rem 1.25rem; }
.iii-module__n { font-family: var(--mono); font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; color: var(--orange-ink); margin: 0 0 .35rem; }
.iii-module__c { font-family: var(--body); font-size: var(--t-body); font-weight: 600; line-height: 1.3; margin: 0; color: var(--ink); }
.iii-module__d { font-size: var(--t-small); color: var(--mute); margin: .4rem 0 0; }

/* Every service area pairs a departmental view with a strategic one - ASCM1
   against the rest, FM1 against FM2, HRM1 against HRM2. That pairing is the
   argument for the product, so the strategic module is marked. */
.iii-module--strategic { border-color: var(--teal); background: var(--sunk); }
.iii-module--strategic .iii-module__n::after { content: " \00B7 strategic"; color: var(--mute); letter-spacing: .06em; }

/* ==========================================================================
   Questions, steps, promo, documents
   ========================================================================== */

.iii-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; list-style: none; margin: 0; padding: 0; }
@media (max-width: 760px) { .iii-qa { grid-template-columns: 1fr; } }
.iii-qa li { display: grid; grid-template-columns: 1rem 1fr; gap: .75rem; align-items: start; padding: 1rem 0; border-top: 1px solid var(--line); font-weight: 500; }
.iii-qa li::before { content: ""; width: 9px; height: 9px; margin-top: .45rem; border-radius: 50%; background: var(--orange); }

/* The margin is not cosmetic. Each step is topped by a 2px orange rule, and
   with the grid flush against the heading above it those three rules ran
   straight through the descenders of "Three steps, and none of them is a
   discovery phase". */
.iii-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-card); list-style: none; margin: 2.5rem 0 0; padding: 0; }
@media (max-width: 860px) { .iii-steps { grid-template-columns: 1fr; } }
.iii-step { border-top: 2px solid var(--orange); padding-top: 1.25rem; }
.iii-step__n { font-family: var(--display); font-size: 1.875rem; line-height: 1; color: var(--mute); margin: 0 0 .5rem; }
.iii-step h3 { margin: 0 0 .5rem; }
.iii-step p { margin: 0; color: var(--mute); font-size: var(--t-small); }

.iii-promo {
	background: var(--sunk); border: 1px solid var(--line); border-radius: var(--radius);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.iii-promo h2 { font-size: 1.5rem; margin-bottom: .35rem; }
.iii-promo p { margin: 0; color: var(--mute); font-size: var(--t-small); }
.iii-promo .iii-btns { margin-top: 0; }

/* The gated pack has to look like a door rather than a dead end: a customer who
   cannot see the way in assumes there isn't one. */
.iii-docs { background: var(--sunk); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; }
.iii-docs p { font-size: var(--t-small); }
.iii-docs .iii-btns { margin-top: 1.25rem; }

/* ==========================================================================
   Footer - drawn 1770-2030, teal, 260 tall, rule at 1956
   ========================================================================== */

.iii-footer { background: var(--teal); color: rgba(255, 255, 255, .8); padding-block: 3.5rem 2rem; }
/* --mute is a grey chosen against white paper. On the teal footer it reads as
   a smudge, so the footer supplies its own. */
.iii-footer .iii-mute, .iii-footer p { color: rgba(255, 255, 255, .72); }
.iii-footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 760px) { .iii-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.iii-footer h2 {
	font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
	margin: 0 0 1.25rem;
}
.iii-footer ul { list-style: none; margin: 0; padding: 0; }
.iii-footer li { margin-bottom: .625rem; }
.iii-footer a { font-size: var(--t-small); color: rgba(255, 255, 255, .85); text-decoration: none; }
.iii-footer a:hover { color: #fff; text-decoration: underline; }

/* UK companies must show the registered name, number and place of
   registration. The old footer showed none of the three. */
.iii-footer__legal {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
	margin-top: 3rem; padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: var(--t-small); color: rgba(255, 255, 255, .65);
}
.iii-footer__legal p { margin: 0; }

/* ==========================================================================
   Chart

   The drawn hero chart is two polylines, teal 2.5 and orange 2, over a 1088x120
   field. It is illustrative and labelled as such - inventing plausible council
   spending figures and presenting them as real would be the wrong kind of
   convincing.
   ========================================================================== */

.iii-chart { width: 100%; height: auto; }
.iii-chart__grid { stroke: var(--line); stroke-width: 1; }
.iii-chart__a { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.iii-chart__b { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Editor safety

   Every colour or size a person can pick in the editor is a value stored in the
   page, where it outlives any later change to the design. The editor offers the
   palette below and nothing else; custom colours, gradients and font sizes are
   off. Registered in functions.php - these rules make the classes real.
   ========================================================================== */

.has-ink-color { color: var(--ink); }
.has-mute-color { color: var(--mute); }
.has-teal-color { color: var(--teal); }
.has-orange-ink-color { color: var(--orange-ink); }
.has-paper-background-color { background-color: var(--paper); }
.has-sunk-background-color { background-color: var(--sunk); }
.has-teal-background-color { background-color: var(--teal); }
.has-gold-background-color { background-color: var(--gold); }

.page .entry-title:not(.iii-keep) { display: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Undo the block editor's own measure

   A wp:group with layout "constrained" makes WordPress apply its global
   content-size as a max-width to the group's children - inside our own
   .iii-wrap, which already sets the measure. The two fought, WordPress won,
   and every band below the hero rendered about 120px narrower than the hero
   and the header. On the page it read as the whole middle of the site being
   indented for no reason.

   Our bands own their measure. Anything inside one is full width of it.
   ========================================================================== */

.iii-band > .wp-block-group__inner-container,
.iii-band .iii-wrap,
.iii-wrap > .wp-block-group__inner-container {
	max-width: none;
	margin-inline: auto;
}
/* ...but not at the cost of the one measure that IS deliberate: running prose
   stays at 68 characters, because a line of text 1480px wide is unreadable
   however well it is aligned. */
/* Scoped to bands. Applied to every .iii-wrap it also flattened the header's
   `margin-inline: auto`, which is what spreads the navigation across the bar -
   so the brand, the nav and the buttons all packed against the left edge with
   600px of nothing after them. */
.iii-band .iii-wrap > *:not(.iii-prose):not(.iii-lede) { max-width: none; margin-inline: 0; }

/* WordPress's constrained layout is no longer emitted (see the builders in
   scripts/build-pages.php), but a page edited in the block editor can acquire
   it again the moment someone inserts a group. Belt and braces. */
.iii-card > *, .iii-cta > *, .iii-promo > * { max-width: none; margin-inline: 0; }
.iii-card { text-align: left; }

/* Block spacing puts a top margin on every sibling after the first, which is
   what left the three cards sitting at different heights. The grid decides
   spacing here. */
.iii-cards > *, .iii-modules > *, .iii-stats > *, .iii-steps > * { margin-block: 0; }

/* ==========================================================================
   Components for the remaining Direction A page types
   ========================================================================== */

/* ---- at-a-glance, in the hero panel ------------------------------------
   Drawn on the consulting page: Duration / Format / Output / Price as label
   and value pairs. It answers the four questions a buyer asks before reading
   anything else, which is why it sits beside the headline rather than below. */

.iii-glance { list-style: none; margin: 0; padding: 0; }
.iii-glance li {
	display: flex; justify-content: space-between; gap: 1.5rem;
	padding: .75rem 0; border-top: 1px solid var(--line);
	font-size: var(--t-small);
}
.iii-glance li:first-child { border-top: 0; padding-top: 0; }
.iii-glance dt, .iii-glance .k { color: var(--mute); }
.iii-glance .v { font-weight: 600; color: var(--ink); text-align: right; }

/* ---- pricing tiers -----------------------------------------------------
   Three cards, drawn w340 with the middle one emphasised. Prices are left as
   "From £—" on purpose: Tim sets them, and inventing a number on a page a
   council may procure against would be worse than an obvious blank.          */

.iii-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-card); }
@media (max-width: 900px) { .iii-tiers { grid-template-columns: 1fr; } }

.iii-tier {
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	padding: var(--pad-card); display: flex; flex-direction: column;
}
.iii-tier--lead { border-color: var(--teal); box-shadow: var(--shadow); }
.iii-tier h3 { font-size: 1.5rem; margin: 0 0 .25rem; }
.iii-tier__who { font-size: var(--t-small); color: var(--mute); margin: 0 0 1.25rem; }
.iii-tier__price {
	font-family: var(--display); font-size: 2rem; line-height: 1;
	color: var(--teal); margin: 0 0 1.5rem;
}
.iii-tier ul { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.iii-tier li {
	padding: .5rem 0 .5rem 1.625rem; position: relative;
	font-size: var(--t-small); border-top: 1px solid var(--line);
}
.iii-tier li:first-child { border-top: 0; }
.iii-tier li::before {
	content: ""; position: absolute; left: 0; top: 1.05rem;
	width: 9px; height: 9px; border-radius: 50%; background: var(--orange);
}
.iii-tier .iii-btns { margin-top: auto; }

/* ---- delivery timeline -------------------------------------------------
   Week 1 / Weeks 2-4 / Weeks 4-6 / Then, four across, each under a rule. The
   rule is the point: it reads as a run of time rather than four boxes.       */

.iii-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-tight); list-style: none; margin: 2.5rem 0 0; padding: 0; }
@media (max-width: 900px) { .iii-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .iii-timeline { grid-template-columns: 1fr; } }
.iii-when { border-top: 2px solid var(--orange); padding-top: 1rem; }
.iii-when h3 { font-size: var(--t-body); margin: 0 0 .35rem; }
.iii-when p { margin: 0; font-size: var(--t-small); color: var(--mute); }
/* On teal the grey above is dark-on-dark. Same tint as a card on teal. */
.iii-band--teal .iii-when p { color: rgba(255, 255, 255, .72); }

/* ---- questions and answers --------------------------------------------
   Drawn as a two-column list with a "+" affordance. Built on <details> so it
   works with no JavaScript at all and is keyboard-operable for nothing.      */

.iii-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-card); }
@media (max-width: 760px) { .iii-faq { grid-template-columns: 1fr; } }
.iii-faq details { border-top: 1px solid var(--line); padding: 1.125rem 0; }
.iii-faq summary {
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	font-weight: 600; cursor: pointer; list-style: none; color: var(--ink);
}
.iii-faq summary::-webkit-details-marker { display: none; }
.iii-faq summary::after { content: "+"; font-family: var(--mono); font-size: 1.25rem; color: var(--orange); line-height: 1; }
.iii-faq details[open] summary::after { content: "‘2"; }
.iii-faq details p { margin: .875rem 0 0; font-size: var(--t-small); color: var(--mute); max-width: 60ch; }

/* ---- a plain list of named things, four across -------------------------
   Partners on the consulting page, parts of the framework elsewhere.        */

/* ---- what all three include ---------------------------------------------
   A strip under a row of cards, for the benefits every one of them shares.
   Separated by a hairline above rather than by a band change, because it
   belongs to the cards above it - a new ground would read as a new subject. */
.iii-included { margin-top: var(--gap-card); padding-top: var(--gap-tight); border-top: 1px solid var(--line); }
.iii-included__label {
	font: 600 var(--t-label)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
	color: var(--mute); margin: 0 0 1.25rem;
}
.iii-included ul {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gap-tight); list-style: none; margin: 0; padding: 0;
}
.iii-included li {
	position: relative; padding-left: 1.1rem;
	font-size: var(--t-small); line-height: 1.5; color: var(--ink);
}
.iii-included li::before {
	content: ""; position: absolute; left: 0; top: .5rem;
	width: 6px; height: 6px; border-radius: 50%; background: var(--orange-fill);
}
.iii-included__foot { margin: 1.5rem 0 0; font-size: var(--t-small); color: var(--mute); }
.iii-included__foot strong { color: var(--teal); font-weight: 600; }
@media (max-width: 900px) { .iii-included ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .iii-included ul { grid-template-columns: 1fr; } }

/* auto-fit, not a fixed four. The sector list grew from four to six when
   private sector work was added, and a hard four-column grid left two
   items stranded on a second row. */
.iii-names { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--gap-tight); list-style: none; margin: 2rem 0 0; padding: 0; }
@media (max-width: 900px) { .iii-names { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.iii-names li {
	border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1rem 1.25rem; font-weight: 600; font-size: var(--t-small);
}

/* ---- a contact form that looks like the rest of the site ---------------- */

/* The honeypot. Taken out of the layout entirely rather than hidden with
   display:none, because some bots skip anything display:none and fill
   everything else. A person never sees it; a script that fills every input
   completes it and is silently bounced. */
.iii-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The result of a submission, shown in place of the form on success. */
.iii-formresult { border-radius: var(--radius); padding: var(--pad-card); margin-bottom: var(--gap-tight); }
.iii-formresult h3 { font: 600 var(--t-h3)/1.25 var(--body); margin: 0 0 .5rem; }
.iii-formresult p { margin: 0; font-size: var(--t-small); }
.iii-formresult--ok { background: var(--sunk); border: 1px solid var(--line); border-left: 3px solid var(--teal); }
.iii-formresult--ok h3 { color: var(--teal); }
.iii-formresult--ok p { color: var(--mute); }
/* Not colour alone: the heading says what happened, so the message still works
   for anyone who cannot see the red. */
.iii-formresult--bad { background: #FDF3F2; border: 1px solid #E8C9C6; border-left: 3px solid #A3271F; }
.iii-formresult--bad h3 { color: #A3271F; }
.iii-formresult--bad p { color: var(--ink); }

.iii-form { display: grid; gap: 1.25rem; scroll-margin-top: 7.5rem; } /* clears the header when a link lands on #enquire */
.iii-field { display: grid; gap: .375rem; }
.iii-field label { font-size: var(--t-small); font-weight: 600; }
.iii-field input, .iii-field select, .iii-field textarea {
	font: inherit; font-size: var(--t-small);
	padding: .75rem .875rem;
	border: 1px solid var(--line); border-radius: 8px;
	background: var(--paper); color: var(--ink);
}
.iii-field input:focus, .iii-field select:focus, .iii-field textarea:focus {
	outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal);
}
.iii-field .iii-hint { font-size: var(--t-small); color: var(--mute); }
.iii-optional { font-weight: 400; color: var(--mute); }
/* The contact-permission boxes: a fieldset so the legend is read with each box. */
.iii-checks { border: 0; margin: 0; padding: 0; min-width: 0; }
.iii-checks legend { font-size: var(--t-small); font-weight: 600; padding: 0; margin-bottom: .375rem; }
.iii-checks .iii-check { display: inline-flex; align-items: center; gap: .5rem; margin-right: 1.5rem; font-size: var(--t-small); font-weight: 400; cursor: pointer; }
.iii-check input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--teal); }
.iii-check input:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* ==========================================================================
   Evidence, insight and the figures that replace photographs

   Direction A draws the evidence cards w344 h306 with a 120-tall panel at the
   top - and that panel holds the NUMBER, not a photograph. That is the answer
   to the dated stock imagery on the old posts: a council is persuaded by
   "-34% overdue reviews", not by a picture of a town hall. Posts with no
   headline figure get a generated abstract instead (inc/figures.php), built
   from the brand's own node constellation and seeded from the post so it is
   stable and can never date.
   ========================================================================== */

.iii-figure {
	background: var(--sunk);
	border-bottom: 1px solid var(--line);
	aspect-ratio: 344 / 120;
	display: flex; flex-direction: column; justify-content: center;
	padding: 1.5rem var(--pad-card);
	overflow: hidden;
}
.iii-figure--art { padding: 0; }
.iii-figure--art svg { width: 100%; height: 100%; display: block; }
.iii-figure__n {
	font-family: var(--display);
	font-size: clamp(2rem, 1.4rem + 2vw, 2.875rem);
	line-height: 1; color: var(--teal); margin: 0 0 .35rem;
}
.iii-figure__l { font-size: var(--t-small); font-weight: 500; color: var(--mute); margin: 0; }

/* ---- the evidence grid ------------------------------------------------- */

.iii-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-card); }
@media (max-width: 980px) { .iii-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .iii-posts { grid-template-columns: 1fr; } }

.iii-post {
	position: relative;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.iii-post:hover { border-color: var(--teal); box-shadow: var(--shadow); }
.iii-post__body { padding: var(--pad-card); display: flex; flex-direction: column; gap: .625rem; flex: 1; }
.iii-post__kicker {
	font-family: var(--mono); font-size: .6875rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 0;
}
.iii-post h3 { margin: 0; font-size: 1.25rem; }
.iii-post h3 a { color: inherit; text-decoration: none; }
/* the whole card is the click target, not three words inside it */
.iii-post h3 a::before { content: ""; position: absolute; inset: 0; }
.iii-post__more { margin-top: auto; padding-top: 1rem; }

/* ---- filters ----------------------------------------------------------- */

.iii-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.iii-filters a {
	display: inline-block; font-size: var(--t-small); font-weight: 600;
	padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px;
	color: var(--ink); text-decoration: none;
}
.iii-filters a:hover { border-color: var(--teal); color: var(--teal); }
.iii-filters .is-on a { background: var(--teal); border-color: var(--teal); color: #fff; }

/* ==========================================================================
   A single article

   Drawn as a 700 measure with a 340 sidebar. The measure is the point: running
   text at the full 1480 is unreadable however well it is aligned.
   ========================================================================== */

.iii-article { display: grid; grid-template-columns: minmax(0, 700fr) minmax(0, 340fr); gap: var(--gap-col); align-items: start; }
@media (max-width: 900px) { .iii-article { grid-template-columns: 1fr; } }

.iii-article__body { max-width: 68ch; }
.iii-article__body h2 { font-size: 1.625rem; margin: 2.5rem 0 .75rem; }
.iii-article__body h3 { font-size: 1.25rem; margin: 2rem 0 .5rem; }
.iii-article__body > :first-child { margin-top: 0; }
.iii-article__body ul, .iii-article__body ol { padding-left: 1.25rem; margin: 0 0 1.1em; } /* the paragraph after a list sat against it */
.iii-article__body li { margin-bottom: .5rem; }
.iii-article__body blockquote {
	margin: 2rem 0; padding: 1.75rem 2rem;
	background: var(--sunk); border-radius: var(--radius);
	font-family: var(--display); font-size: 1.375rem; line-height: 1.3; color: var(--teal);
}
.iii-article__body img { border-radius: var(--radius); margin: 2rem 0; }

.iii-byline { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; margin: 0 0 2rem; }
.iii-byline strong { font-size: var(--t-body); }
.iii-byline span { font-size: var(--t-small); color: var(--mute); }

.iii-aside { display: grid; gap: var(--gap-tight); position: sticky; top: 124px; }
@media (max-width: 900px) { .iii-aside { position: static; } }
.iii-aside__box { background: var(--sunk); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; }
.iii-aside__box p:last-child { margin-bottom: 0; }

/* a numbered caption under a figure inside an article */
.iii-caption {
	font-family: var(--mono); font-size: .6875rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--mute);
	margin: .75rem 0 0;
}

/* ---- the case study's fact row ----------------------------------------- */

.iii-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-tight); margin: 2.5rem 0 0; }
@media (max-width: 760px) { .iii-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.iii-fact__k {
	font-family: var(--mono); font-size: .6875rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 0 0 .35rem;
}
.iii-fact__v { font-weight: 600; margin: 0; }

/* The Evidence index puts its filters immediately under the hero, so the hero's
   own bottom padding plus the band's top padding left a hole the width of the
   page. The index hero carries less.
   Only where the band shares the hero's white ground. On a coloured band the
   edge is visible, and zero padding put the heading flush against it - Tim,
   27 Oct, on the private sector page's grey "How it works" band. */
.iii-page .iii-hero + .iii-band:not(.iii-band--sunk):not(.iii-band--teal):not(.iii-band--orange) { padding-top: 0; }

/* A post's lede is a summary, not a hero strapline, so it gets the article
   measure rather than the hero's 42 characters - which turned it into a tall
   narrow column beside an empty half page. */
.single .iii-hero .iii-lede { max-width: 68ch; margin-bottom: 1.5rem; }

/* ==========================================================================
   Old post content

   Fifty-six posts were written in the previous site and carry its typography
   inline: orange headings, a serif pull quote, Elementor widget classes. None
   of that survives a theme change gracefully, and rewriting 56 posts by hand is
   not the answer.

   So the article body imposes the new design on whatever it is given. The
   !important is deliberate and is confined to this one context: the styles it
   overrides are inline attributes on the posts themselves, which nothing else
   can outrank. It is the narrowest tool that works, and the alternative is
   editing every post.
   ========================================================================== */

.iii-article__body h1, .iii-article__body h2,
.iii-article__body h3, .iii-article__body h4 {
	font-family: var(--display) !important;
	color: var(--teal) !important;
	font-weight: 400 !important;
}
.iii-article__body p, .iii-article__body li, .iii-article__body td {
	font-family: var(--body) !important;
	color: var(--ink) !important;
	font-size: var(--t-body) !important;
}
.iii-article__body blockquote,
.iii-article__body blockquote p {
	font-family: var(--display) !important;
	font-style: normal !important;
	color: var(--teal) !important;
}
.iii-article__body blockquote p { font-size: 1.25rem !important; }
.iii-article__body blockquote strong,
.iii-article__body blockquote cite {
	display: block;
	font-family: var(--body) !important;
	font-size: var(--t-small) !important;
	font-weight: 500;
	font-style: normal;
	color: var(--mute) !important;
	margin-top: .75rem;
}
/* Old inline widths and floats break the measure on a phone. */
.iii-article__body img, .iii-article__body figure, .iii-article__body iframe {
	max-width: 100% !important; height: auto !important; float: none !important;
	margin-inline: 0 !important;
}
/* Empty paragraphs left by the old editor, which showed as stray dashes. */
.iii-article__body p:empty { display: none; }


/* ==========================================================================
   Pricing cards

   The format Direction A draws for pricing - name, who it suits, price, a
   hairline, the contents, then a full-width button. Measured from the drawing:
   three across, cards 288 wide inside the 1088 measure, the rule under the
   price at y560 and the button 42 tall at y746.

   What goes in them is the departmental structure from the live price list,
   not the three tiers the wireframe invented.
   ========================================================================== */

.iii-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-card); margin-top: 2.5rem; }
@media (max-width: 980px) { .iii-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .iii-prices { grid-template-columns: 1fr; } }

.iii-pcard {
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	padding: var(--pad-card); display: flex; flex-direction: column;
}
.iii-pcard__t { font-family: var(--body); font-size: 1.25rem; font-weight: 600; margin: 0 0 .2rem; }
.iii-pcard__w { font-size: var(--t-small); color: var(--mute); margin: 0 0 1.25rem; }
.iii-pcard__p { font-family: var(--display); font-size: 2.25rem; line-height: 1; color: var(--teal); margin: 0; }
.iii-pcard__per { font-size: var(--t-small); color: var(--mute); margin: .35rem 0 0; }
.iii-pcard__rule { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

.iii-pcard__l { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.iii-pcard__l li { font-size: var(--t-small); padding: .4rem 0 .4rem 1.5rem; position: relative; }
.iii-pcard__l li::before {
	content: ""; position: absolute; left: 0; top: .95rem;
	width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
}
/* "and six more" is a count, not a module. It should not take a bullet. */
.iii-pcard__l li.more { color: var(--mute); }
.iii-pcard__l li.more::before { display: none; }

/* Pushed to the bottom so the buttons line up across cards of different
   heights - nine service areas do not have the same number of modules. */
.iii-pcard__go {
	margin-top: auto; display: block; text-align: center;
	font: 600 var(--t-small)/1 var(--body);
	padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 8px;
	color: var(--ink); text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.iii-pcard__go:hover { border-color: var(--teal); color: var(--teal); background: var(--sunk); }

/* ---- the platform ------------------------------------------------------
   Not one more thing to choose between: it is required alongside whatever is
   chosen, so it reads as a row rather than a tenth card.                   */

.iii-platform {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 2rem; margin-top: var(--gap-card);
	background: var(--sunk); border: 1px solid var(--teal); border-radius: var(--radius);
	padding: 2.5rem;
}
.iii-platform h3 { font-size: 1.5rem; margin: 0 0 .35rem; }
.iii-platform p { margin: 0; color: var(--mute); font-size: var(--t-small); max-width: 52ch; }
.iii-platform__p { text-align: right; }
@media (max-width: 620px) { .iii-platform__p { text-align: left; } }

/* ---- the worked sums, on teal ---- */
/* The pricing rule, stated once above the worked examples: the platform is a
   single cost whatever else is taken. Set in gold rather than white so it reads
   as the rule and the two sums below read as illustrations of it. */
.iii-sum__rule { font-family: var(--display); font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.125rem); line-height: 1.25; color: var(--gold); margin: 2rem 0 0; }
.iii-sums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-card); margin-top: 1.75rem; }
@media (max-width: 860px) { .iii-sums { grid-template-columns: 1fr; } }
.iii-sum { background: rgba(255, 255, 255, .07); border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0; padding: 1.5rem 1.75rem; }
.iii-sum p { margin: 0; font-size: var(--t-small); color: rgba(255, 255, 255, .75); }
/* Qualified with p, deliberately. `.iii-sum p` is a descendant selector and so
   outranks a bare class - leaving this as `.iii-sum__eq` let the caption rule
   win, and the sums rendered at caption size and caption brightness. */
.iii-sum p.iii-sum__eq { font-family: var(--display); font-size: 1.75rem; line-height: 1.2; color: #fff; margin: 0 0 .5rem; }

/* ==========================================================================
   Legal documents - privacy policy, cookie policy

   Read with a question in mind rather than front to back, so the contents
   list earns its place. The measure is deliberately the narrowest on the
   site: this is the hardest reading here and it was getting the widest line.
   ========================================================================== */

.iii-legalhead { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0; }
.iii-legalhead h1 {
	/* Not the marketing hero size. A policy should read as clear, not loud. */
	font: 400 clamp(2rem, 1.5rem + 2.2vw, 2.875rem)/1.1 var(--display);
	color: var(--teal); margin: .5rem 0 0; text-wrap: balance; max-width: 20ch;
}
.iii-legalhead__lede { font-size: var(--t-body); color: var(--mute); margin: 1rem 0 0; max-width: 58ch; }
.iii-legalhead__date {
	margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line);
	font: 600 var(--t-label)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute);
}

.iii-legal { padding-block: 2.5rem clamp(3rem, 2rem + 3vw, 5rem); }
.iii-legal__grid { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--gap-col); align-items: start; }

.iii-legal__toc { position: sticky; top: 2rem; }
.iii-legal__toc .iii-eyebrow { margin: 0 0 .9rem; }
.iii-legal__toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.iii-legal__toc a {
	display: block; padding: .4rem .7rem; border-left: 2px solid var(--line);
	font-size: var(--t-small); line-height: 1.35; color: var(--mute); text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.iii-legal__toc a:hover, .iii-legal__toc a:focus-visible {
	border-left-color: var(--orange-fill); color: var(--ink); background: var(--sunk);
}

/* ~68 characters. Wider than this and the eye loses the line on text nobody
   is enjoying. */
.iii-legal__body { max-width: 68ch; }
.iii-legal__body > h2 {
	font: 400 1.5rem/1.25 var(--display); color: var(--teal);
	margin: 2.75rem 0 .9rem; padding-top: 1.75rem; border-top: 1px solid var(--line);
	text-wrap: balance; scroll-margin-top: 2rem;
}
.iii-legal__body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.iii-legal__body > h3 { font: 600 var(--t-h3)/1.3 var(--body); color: var(--teal); margin: 2rem 0 .6rem; }
.iii-legal__body p { margin: 0 0 1.1rem; }
.iii-legal__body p:last-child { margin-bottom: 0; }
.iii-legal__body ul, .iii-legal__body ol { margin: 0 0 1.1rem; padding-left: 1.3rem; display: grid; gap: .45rem; }
.iii-legal__body strong { color: var(--teal); }
.iii-legal__body .iii-mute { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--mute); }

@media (max-width: 900px) {
	.iii-legal__grid { grid-template-columns: 1fr; gap: 2rem; }
	.iii-legal__toc { position: static; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; background: var(--sunk); }
	.iii-legal__body { max-width: none; }
}

/* ==========================================================================
   Cookie consent

   A bar, not a modal: it does not block the page, because nothing has been
   set yet and there is nothing to protect anyone from until they choose.
   Both buttons are the same size in the same place - a banner where accepting
   is one click and refusing is three is not offering a choice.
   ========================================================================== */

.iii-consent {
	position: fixed; inset: auto 0 0; z-index: 90;
	background: var(--paper); border-top: 1px solid var(--line);
	box-shadow: 0 -6px 24px rgba(15, 34, 36, .09);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.iii-consent__in {
	max-width: var(--wrap); margin: 0 auto;
	padding: 1.1rem var(--gutter);
	display: flex; align-items: center; gap: 1.25rem 2rem; flex-wrap: wrap;
}
.iii-consent__text { flex: 1 1 22rem; min-width: 0; }
.iii-consent__h {
	font: 600 var(--t-label)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
	color: var(--mute); margin: 0 0 .4rem;
}
.iii-consent__text p { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--ink); }
.iii-consent__btns { display: flex; gap: .75rem; flex: none; }
.iii-consent__btns .iii-btn { padding: .7rem 1.25rem; }

@media (max-width: 560px) {
	.iii-consent__in { padding-block: 1rem; }
	.iii-consent__btns { width: 100%; }
	.iii-consent__btns .iii-btn { flex: 1; }
}