/* ==========================================================================
   Folio & Petal — the inner-page system
   Loaded after style.css on every inner page and never on the homepage,
   which is approved and stays exactly as it is.

   Every inner page is set like a numbered publication — masthead, numbered
   folios, statements, ruled indexes, then a Next-step panel — and takes one
   petal of the logo as its colour and architecture. The petal is punctuation
   and structure, never a picture: the lozenge full stop on every H1, the bead
   on every ruled row, and one big saturated shape per page that enters from
   the edge that petal holds in the mark.

   Colour discipline: saturated --acc values are only ever SHAPES. Accent text
   uses --acc-text (4.5:1+ on white and on its own tint). Secondary text on
   any tint uses --body, never --muted (which fails on every tint).

   Motion: transform / opacity only. Everything is written in its FINAL state
   first; the start states live under .js-reveal [data-reveal]:not(.is-revealed),
   so with JavaScript off, before main.js arms, or under reduced motion, every
   element is simply there.

    1  Tokens            7  Folio
    2  Page colours      8  Folio body parts
    3  Utilities         9  Ruled index
    4  Masthead         10  Pull-quote spread
    5  Folio index      11  Next-step panel
    6  On this page     12  Service index
                        13  Team strip
                        14  Posts: readbar, share, previous / next
                        15  Responsive
                        16  Shared footer (inner pages)
                        17  Reduced motion
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
:root {
	--mast: clamp(2.5rem, 5vw, 6rem);              /* 96 @1920 · 40 @375 */
	--mast-post: clamp(2.125rem, 3.75vw, 4.5rem);  /* 72 · 34 */
	--numeral: clamp(4.5rem, 10vw, 12rem);         /* 192 · 72 */
	--numeral-sm: clamp(3rem, 5vw, 6rem);          /* 96 · 48 */
	--statement: clamp(1.75rem, 3.333vw, 4rem);    /* 64 · 28 — up to 25 words */
	--statement-sm: clamp(1.375rem, 2.083vw, 2.5rem); /* 40 · 22 — 26-50 words */
	--standfirst: clamp(1.125rem, 1.458vw, 1.75rem); /* 28 · 18 */
	--read: clamp(1.0625rem, 1.146vw, 1.375rem);   /* 22 · 17 — reading prose */
	--rule: 1px solid rgba(20, 22, 27, 0.14);
	--rule-strong: 1px solid rgba(20, 22, 27, 0.6);
	--seam-t: calc(var(--header-h) + 2rem);        /* sticky offset under the header */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);

	/* page colour defaults (brand green); each page class overrides */
	--acc: #66ce4b;
	--acc-b: #fbd44f;
	--acc-tint: #f1f9ed;
	--acc-pale: #d5f0cb;
	--acc-text: #2c6f22;
}
html { scroll-padding-top: var(--seam-t); }

/* 2. Page colours — each takes its petal from where it sits in the mark --- */
.t-complaints { --acc: #fbd44f; --acc-b: #f52a1d; --acc-tint: #fefbec; --acc-pale: #f7e6a1; --acc-text: #7a5c00; }
.t-compliance { --acc: #f52a1d; --acc-b: #6acf4c; --acc-tint: #fdf1f1; --acc-pale: #f9cdc9; --acc-text: #c41e12; }
.t-barristers { --acc: #6acf4c; --acc-b: #0c3e9e; --acc-tint: #f1f9ed; --acc-pale: #cfeec4; --acc-text: #2c6f22; }
.t-training   { --acc: #0c3e9e; --acc-b: #f52a1d; --acc-tint: #f4f6fd; --acc-pale: #d3dcf3; --acc-text: #0c3e9e; }
.t-iso        { --acc: #1e9af8; --acc-b: #fbd44f; --acc-tint: #fbf9f6; --acc-pale: #d2e8fd; --acc-text: #0a6fd0; }
.t-about      { --acc: #fbd44f; --acc-b: #f52a1d; --acc-tint: #fefbec; --acc-pale: #f7e6a1; --acc-text: #7a5c00; }
.t-contact,
.t-work       { --acc: #66ce4b; --acc-b: #fbd44f; --acc-tint: #f1f9ed; --acc-pale: #d5f0cb; --acc-text: #2c6f22; }
.t-insights   { --acc: #1e9af8; --acc-b: #6acf4c; --acc-tint: #f0f3fe; --acc-pale: #dce6fb; --acc-text: #0a6fd0; }

/* post categories — for chips, floods and post pages */
.c-blog          { --cat: #6acf4c; --cat-tint: #f1f9ed; --cat-pale: #cfeec4; --cat-text: #2c6f22; }
.c-newsletter    { --cat: #fbd44f; --cat-tint: #fefbec; --cat-pale: #f7e6a1; --cat-text: #7a5c00; }
.c-uncategorized { --cat: #0c3e9e; --cat-tint: #f4f6fd; --cat-pale: #d3dcf3; --cat-text: #0c3e9e; }
/* a post page is coloured by its category */
main.c-blog, main.c-newsletter, main.c-uncategorized {
	--acc: var(--cat); --acc-tint: var(--cat-tint); --acc-pale: var(--cat-pale); --acc-text: var(--cat-text);
}

/* 3. Utilities ------------------------------------------------------------- */
.label {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--tiny);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.nobr { white-space: nowrap; }
/* the lozenge: the #i-diamonds petal as punctuation */
.lz {
	display: inline-block;
	flex: none;
	width: 12px;
	aspect-ratio: 1;
	border-radius: 22%;
	rotate: 45deg;
	background: var(--c, var(--acc));
}
.band { background: var(--acc-tint); padding-block: var(--section-y); }

@keyframes rule-draw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes mast-rise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: none; } }
@keyframes pop       { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }
/* no 'to': it settles on the element's own base values (petal B's 0.92) */
@keyframes settle-in { from { opacity: 0; scale: 0.92; } }

/* 4. Masthead ------------------------------------------------------------- */
.mast {
	position: relative;
	isolation: isolate;
	overflow: clip;
	min-height: clamp(480px, 40vw, 768px);
	padding-top: calc(var(--header-h) + clamp(1.5rem, 3.1vw, 3.75rem));
	padding-bottom: clamp(2.5rem, 5vw, 6rem);
	background: var(--white);
}
.mast--compact { min-height: clamp(380px, 28vw, 540px); }
.mast__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
	align-content: start;
}
.mast__inner > * { grid-column: 1 / -1; }

.mast__run {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	padding-bottom: 1rem;
}
.mast__run::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	border-top: var(--rule-strong);
	transform-origin: left;
}
.mast .breadcrumb { margin: 0; }
.mast .breadcrumb li { color: var(--body); }
.mast__right { display: flex; align-items: center; gap: 1rem; }

.mast__h1 {
	grid-column: 1 / 10;
	margin-top: clamp(2rem, 5vw, 6rem);
	font-size: var(--mast);
	line-height: 0.98;
	letter-spacing: -0.03em;
	text-wrap: balance;
	overflow-wrap: anywhere;
	hyphens: manual;
}
.mast__stop {
	display: inline-block;
	width: 0.2em;
	height: 0.2em;
	margin-left: 0.08em;
	vertical-align: 0.02em;
	border-radius: 22%;
	background: var(--acc);
	rotate: 45deg;
}
.mast__stand {
	grid-column: 1 / 8;
	margin-top: 1.75rem;
	font-size: var(--standfirst);
	line-height: 1.5;
	color: var(--body);
}
.mast__pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	margin-top: 2.5rem;
}
.mast__tel {
	font-family: var(--font-head);
	font-weight: 500;
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.mast__tel:hover { text-decoration-thickness: 2px; }

/* the petals: shapes on their own layer, bleeding off the edge the page's
   petal holds in the logo, drifting under the glass header */
.mast__petals { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mast__petal {
	position: absolute;
	display: block;
	aspect-ratio: 1;
	border-radius: 30%;
	rotate: var(--tilt, 0deg);
	animation: petal-drift var(--dur, 22s) ease-in-out 0.9s infinite alternate;
}
.mast__petal--a {
	width: min(34vw, 650px);
	background: var(--acc);
	--tilt: -12deg; --dx: 18px; --dy: -22px; --dur: 22s;
}
.mast__petal--b {
	width: min(12vw, 230px);
	background: var(--acc-b);
	opacity: 0.92;
	--tilt: 14deg; --dx: -14px; --dy: 16px; --dur: 17s;
}
/* Entrance: the rule draws, the H1 rises, its full stop pops and the petals
   settle, from first paint, so only where the head script has run (html.js).
   With script off there is nothing to wait for: every part is painted in its
   final state, exactly as the base rules draw it. The ambient drift is not an
   entrance and runs either way. */
.js .mast__run::after { animation: rule-draw 0.9s var(--ease-out) both; }
.js .mast__h1 { animation: mast-rise 0.7s var(--ease-out) both; }
.js .mast__stop { animation: pop 0.45s var(--ease-out) 0.45s both; }
.js .mast__petal {
	animation:
		settle-in 0.9s var(--ease-out) both,
		petal-drift var(--dur, 22s) ease-in-out 0.9s infinite alternate;
}
/* top — Complaints: hangs from behind the glass header */
.mast--top .mast__petal--a { right: 7vw; top: calc(min(34vw, 650px) * -0.46); }
.mast--top .mast__petal--b { right: 28vw; top: calc(var(--header-h) + 14vw); }
/* left — Compliance: enters from the left, so the copy moves to cols 5-12 */
.mast--left .mast__petal--a { left: calc(min(34vw, 650px) * -0.42); top: calc(var(--header-h) + 2vw); }
.mast--left .mast__petal--b { left: 20vw; top: calc(var(--header-h) + 4vw); }
.mast--left .mast__run,
.mast--left .mast__h1,
.mast--left .mast__pills,
.mast--left .strip { grid-column: 5 / -1; }
.mast--left .mast__stand { grid-column: 5 / 12; }
/* right — Barristers: bleeds off the right */
.mast--right .mast__petal--a { right: calc(min(12vw, 230px) * -1); top: calc(var(--header-h) + 3vw); }
.mast--right .mast__petal--b { right: 30vw; top: calc(var(--header-h) + 16vw); }

/* 5. Folio index — five lozenges, one per service ------------------------- */
.fidx { display: flex; align-items: center; gap: 0.9rem; }
.fidx__cells { display: flex; gap: 2px; }
.fidx__cell { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; }
.fidx__cell .lz {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--ink);
	transition: rotate 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
/* The index is a UI label on its own ground. Petal A reaches up under the
   running head (Complaints' hangs from behind the header; at <=1024 every A
   collapses into this corner), and no text under 24px may sit on a saturated
   petal. The pill is the masthead's own ground, so it only shows where a
   petal passes behind it; the negative margins keep the run's metrics. */
.mast .fidx {
	background: var(--white);
	border-radius: 999px;
	padding: 4px 12px 4px 6px;
	margin: -4px -12px -4px -6px;
}
.t-iso .mast .fidx { background: var(--acc-tint); }
/* the current cell is marked by more than its fill (yellow on white is a
   near neighbour): it is filled, keeps the ink ring, and is larger */
.fidx__cell.is-current .lz { scale: 1.3; }
.fidx__cell.is-current .lz,
a.fidx__cell:hover .lz,
a.fidx__cell:focus-visible .lz { background: var(--c); }
a.fidx__cell:hover .lz,
a.fidx__cell:focus-visible .lz { rotate: 90deg; }
.fidx__count { color: var(--ink); }

/* 6. On this page -------------------------------------------------------- */
.strip { margin-top: clamp(3rem, 5vw, 6rem); border-top: var(--rule); }
.strip ol {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.strip a {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.1rem 0 0.2rem;
	color: var(--ink);
}
.strip__n { color: var(--acc-text); }
.strip__t {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--small);
	line-height: 1.3;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	transition: text-decoration-color 0.2s ease;
}
.strip a:hover .strip__t,
.strip a:focus-visible .strip__t { text-decoration-color: var(--ink); }

/* 7. Folio — a numbered section ------------------------------------------ */
.folio { padding-block: var(--section-y); }
.folio--has-band { padding-bottom: 0; }
.folio--has-band > .band { margin-top: var(--section-y); }
.folio__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
}
/* the folio's top rule, drawn as a grid row of its own */
.folio__grid::before {
	content: '';
	grid-column: 1 / -1;
	grid-row: 1;
	border-top: var(--rule-strong);
	margin-bottom: clamp(2rem, 3.4vw, 4rem);
	transform-origin: left;
	transition: transform 0.8s var(--ease-out);
}
.folio__num {
	grid-column: 1 / 4;
	grid-row: 2;
	align-self: start;
	display: flex;
	align-items: flex-end;
	gap: 0.12em;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--numeral);
	line-height: 0.8;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
	color: var(--acc-pale);
	transition: opacity 0.7s var(--ease-out) 0.1s, translate 0.7s var(--ease-out) 0.1s;
}
.folio__num .lz { width: 0.16em; margin-bottom: 0.02em; transition: scale 0.45s var(--ease-out) 0.3s; }
.folio__body {
	grid-column: 4 / -1;
	grid-row: 2;
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	column-gap: var(--card-gap);
	align-content: start;
}
.folio__body > * { grid-column: 1 / -1; margin: 0 0 1.5rem; }
.folio__body > :last-child { margin-bottom: 0; }
.folio__h { font-size: var(--h2); line-height: 1.08; max-width: 16em; margin-bottom: 0.9em !important; text-wrap: balance; }

/* sticky numeral — only where there is room for it to hold */
@media (min-width: 1024px) and (min-height: 760px) {
	.folio__num { position: sticky; top: var(--seam-t); }
}

.js-reveal .folio[data-reveal]:not(.is-revealed) .folio__grid::before { transform: scaleX(0); }
.js-reveal .folio[data-reveal]:not(.is-revealed) .folio__num { opacity: 0; translate: 0 16px; }
.js-reveal .folio[data-reveal]:not(.is-revealed) .folio__num .lz { scale: 0; }

/* 8. Folio body parts ------------------------------------------------------ */
.w9 { grid-column: 1 / -1 !important; }
.w8 { grid-column: 1 / 9 !important; }
.w6 { grid-column: 1 / 7 !important; }

/* pretty: no lone last word ('… (rQ130.2) / as') on a narrow measure */
.folio__body .body { font-size: var(--read); line-height: 1.65; color: var(--body); text-wrap: pretty; }
.folio__body .lead { font-size: var(--lead); line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.folio__body .leadin {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--h4);
	line-height: 1.3;
	color: var(--ink);
}
.folio__body .leadin strong { font-weight: 500; }

/* statement: a sentence lifted to display size, read once */
.statement {
	position: relative;
	margin: 0.4em 0 0.9em !important;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--statement);
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-wrap: balance;
	max-width: 22em;
}
.statement--sm { font-size: var(--statement-sm); line-height: 1.22; max-width: 26em; }
/* the hanging lozenge, in the gutter */
.statement::before {
	content: '';
	position: absolute;
	left: -0.95em;
	top: 0.38em;
	width: 0.5em;
	aspect-ratio: 1;
	border-radius: 22%;
	background: var(--acc);
	rotate: 45deg;
	transition: rotate 0.6s var(--ease-out) 0.12s;
}
.statement--sm::before { width: 0.45em; top: 0.4em; left: -0.9em; }
/* The statement is its own [data-reveal] target, so style.css's generic
   rise (opacity + translate, compositor-only) brings it in; the hanging
   lozenge turns into place as it lands. (A clip-path wipe was tried first:
   not compositor-only, and it intermittently never finished.) */
.js-reveal .statement[data-reveal]:not(.is-revealed)::before { rotate: 0deg; }

.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); }
.twocol .body { margin: 0; }

.pair {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	column-gap: var(--card-gap);
	align-items: start;
}
.pair__main { grid-column: 1 / 7; }
.pair__main > * { margin-top: 0; }
.pair > .note { grid-column: 7 / -1; }

.callout {
	border-left: 4px solid var(--acc);
	padding-left: 2rem;
	font-size: var(--lead);
	line-height: 1.55;
	color: var(--ink);
}

/* margin note */
.note {
	border-top: 3px solid var(--acc);
	padding-top: 1.1rem;
	font-size: var(--small);
	line-height: 1.6;
	color: var(--ink);
}
.note p { margin: 0; }
.note__pill { margin-top: 1.1rem !important; }
.note--figure { display: flex; flex-direction: column; gap: 0.6rem; }
.note__fig {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--numeral-sm);
	line-height: 0.9;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}
.note__unit { font-size: 0.5em; color: var(--acc-text); vertical-align: 0.6em; }
/* balanced, and the date inside it never splits (folio.note_figure) */
.note__cap { color: var(--body); line-height: 1.5; text-wrap: balance; }

/* 9. Ruled index — lists typeset as indexes ------------------------------ */
.index { list-style: none; margin: 1rem 0 2rem !important; padding: 0; }
.index > li {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	column-gap: 1rem;
	align-items: baseline;
	padding: clamp(1rem, 1.9vw, 2.25rem) 0;
	border-top: var(--rule);
	transition: opacity 0.5s var(--ease-out), translate 0.5s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 70ms);
}
.index > li:first-child { border-top: var(--rule-strong); }
.index > li:last-child { border-bottom: var(--rule); }
.index__mark { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--acc-text); }
.index__lz { position: relative; display: grid; place-items: center; width: 14px; height: 14px; }
.index__lz .lz { width: 11px; }
.index__text {
	font-family: var(--font-head);
	font-weight: 500;
	line-height: 1.25;
	color: var(--ink);
}
.index--lg .index__text { font-weight: 600; font-size: var(--h2); line-height: 1.1; }
.index--md .index__text { font-size: var(--h3); }
.index--sm .index__text { font-size: var(--h4); }
.js-reveal [data-reveal]:not(.is-revealed) .index > li { opacity: 0; translate: 0 12px; }

/* two columns for long lists: fill down each column */
.index--2col {
	display: grid;
	grid-template-rows: repeat(var(--rows, 5), auto);
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	column-gap: calc(var(--card-gap) * 2);
	border-bottom: var(--rule);
}
.index--2col > li:last-child { border-bottom: 0; }
.index--2col > li:nth-child(n) { border-top: var(--rule); }
.index--2col > li:first-child { border-top: var(--rule-strong); }
/* the head of column two opens on the strong rule too (folio.index() marks
   it); below 1280 the list is one column and it is an ordinary row */
@media (min-width: 1280px) {
	.index--2col > li.index__colhead { border-top: var(--rule-strong); }
}

/* 10. Pull-quote spread --------------------------------------------------- */
.pq { padding-block: var(--section-y); }
.pq__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
	row-gap: clamp(1.5rem, 2.5vw, 3rem);
	border-top: var(--rule-strong);
	padding-top: clamp(2rem, 3.4vw, 4rem);
}
.pq__mark { grid-column: 1 / 3; position: relative; height: 96px; }
.pq__mark i {
	position: absolute;
	display: block;
	aspect-ratio: 1;
	border-radius: 22%;
	rotate: 45deg;
	animation: petal-drift 16s ease-in-out infinite alternate;
}
.pq__mark i:first-child { width: 72px; left: 8px; top: 8px; background: var(--acc); --dx: 4px; --dy: -4px; }
.pq__mark i:last-child { width: 48px; left: 64px; top: 40px; background: var(--acc-pale); --dx: -4px; --dy: 4px; animation-duration: 19s; }
.pq__lede {
	grid-column: 3 / 12;
	margin: 0;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.6vw, 3.125rem);
	line-height: 1.22;
	letter-spacing: -0.015em;
	color: var(--ink);
	text-wrap: balance;
	transition: opacity 0.7s var(--ease-out) 0.15s, translate 0.7s var(--ease-out) 0.15s;
}
.js-reveal .pq[data-reveal]:not(.is-revealed) .pq__lede { opacity: 0; translate: 0 20px; }
.pq__quote { grid-column: 3 / 8; margin: 0; font-size: var(--small); line-height: 1.72; color: var(--body); }
.pq__quote p { margin: 0; }
.pq__quote p::before { content: '“'; }
.pq__quote p::after { content: '”'; }
.pq__cite { grid-column: 8 / 12; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.pq__cite b { font-family: var(--font-head); font-weight: 600; font-size: var(--base); color: var(--ink); }
.pq__meta { color: var(--body); line-height: 1.5; }
.pq__meta + .pq__meta::before { content: none; }
/* The secondaries are the homepage .rail (style.css) at <=860: one row that
   scrolls and snaps, the next card peeking out of the gutter. Above that they
   are a plain grid, so the rail's scrolling, bleed and snap are switched off. */
.pq__cards { grid-column: 1 / -1; margin-top: clamp(1.5rem, 3.3vw, 4rem); }
@media (min-width: 861px) {
	.pq__cards {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--card-gap);
		overflow: visible;
		scroll-snap-type: none;
		margin-right: 0;
		padding: 0;
	}
}

/* 11. Next-step panel ----------------------------------------------------- */
/* The watermark crosses the seam into the section above, so that section
   must paint OVER it: it shows through a transparent ground, behind the
   words, never on top of them. The panel drops to layer 0; everything that
   can sit above it (.section is already layer 1) joins layer 1. */
main .nextstep { overflow: visible; z-index: 0; }
.folio, .pq { position: relative; z-index: 1; }
/* the ghost watermark crosses the seam UP into the section above: the
   homepage's Why-band move, reversed */
.nextstep .why__decor {
	left: auto;
	right: 6%;
	top: calc(clamp(220px, 25vw, 480px) * -0.5);
	transform: none;
}
.nextstep__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
	align-items: start;
}
.nextstep__copy { grid-column: 1 / 6; }
.nextstep__copy h2 { font-size: var(--h2); max-width: 12em; text-wrap: balance; margin: 1.5rem 0 0.8rem; }
.nextstep__lead { font-size: var(--base); line-height: 1.6; color: var(--body); max-width: 30em; }
.nextstep__form { grid-column: 7 / -1; }
.nextstep .form { background: var(--white); }
/* each field's edge is the only cue to where it sits: 3.47:1 on the white
   panel (style.css's --field-line is 1.3:1). Focus keeps style.css's blue. */
.nextstep .field :is(input, textarea):not(:focus) { border-color: #858a93; }

.seal { width: clamp(120px, 12vw, 230px); height: auto; overflow: visible; }
.seal__p { transition: transform 0.9s var(--ease-out), opacity 0.9s var(--ease-out); }
.seal__p--red { transition-delay: 0.12s; }
.seal__p--green { transition-delay: 0.24s; }
.seal__p--navy { transition-delay: 0.36s; }
/* the page's own petal is already home; the other three arrive from their
   logo directions, then stay still */
.js-reveal .nextstep[data-reveal]:not(.is-revealed) .seal__p:not(.is-home) { opacity: 0; }
.js-reveal .nextstep[data-reveal]:not(.is-revealed) .seal__p--yellow:not(.is-home) { transform: translate(0, -8px); }
.js-reveal .nextstep[data-reveal]:not(.is-revealed) .seal__p--red:not(.is-home) { transform: translate(-8px, 0); }
.js-reveal .nextstep[data-reveal]:not(.is-revealed) .seal__p--green:not(.is-home) { transform: translate(8px, 0); }
.js-reveal .nextstep[data-reveal]:not(.is-revealed) .seal__p--navy:not(.is-home) { transform: translate(0, 8px); }

.lines { display: grid; gap: 1.1rem; margin: 2rem 0 0; }
.lines div { display: grid; gap: 0.2rem; }
.lines dt { color: var(--body); }
.lines dd { margin: 0; }
.lines a {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--h3);
	letter-spacing: -0.02em;
	color: var(--ink);
	overflow-wrap: anywhere;
}
.lines a:hover { text-decoration: underline; text-underline-offset: 5px; }

.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.25rem;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: var(--acc-tint);
	font-size: var(--small);
	color: var(--body);
}
.chip .lz { width: 8px; }

/* 12. Service index ('What we do') ----------------------------------------- */
.svx__h { font-size: var(--h2-sm); margin-bottom: clamp(1.25rem, 2.2vw, 2.5rem); }
.svx__list { list-style: none; margin: 0; padding: 0; border-bottom: var(--rule-strong); }
.svx__row {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
	align-items: center;
	min-height: clamp(96px, 7.5vw, 144px);
	padding-block: 1rem;
	border-top: var(--rule-strong);
	color: var(--ink);
}
.svx__row::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--sweep);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s var(--ease-out);
}
.svx__n { grid-column: 1; color: var(--body); }
.svx__t {
	grid-column: 2 / 7;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--h2);
	line-height: 1.05;
	letter-spacing: -0.02em;
	transition: translate 0.45s var(--ease-out);
}
.svx__b { grid-column: 7 / 12; font-size: var(--small); line-height: 1.5; color: var(--body); max-width: 22em; }
.svx__arrow,
.svx__here { grid-column: 12; justify-self: end; }
.svx__arrow {
	display: grid;
	place-items: center;
	width: clamp(44px, 2.9vw, 56px);
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid var(--green);
	/* its own ground: the resting petal sits behind it (navy; green on green) */
	background: var(--white);
	transition: background-color 0.25s ease;
}
.svx__arrow svg { width: 42%; height: auto; }
.svx__petal {
	position: absolute;
	right: 0;
	top: 50%;
	z-index: -1;
	width: 120px;
	aspect-ratio: 1;
	border-radius: 30%;
	background: var(--petal);
	rotate: -10deg;
	translate: 60% -50%;
	transition: translate 0.45s var(--ease-out);
}
.svx__here { color: var(--body); white-space: nowrap; }
.svx__row.is-current .svx__t { color: var(--body); }
a.svx__row:hover::before,
a.svx__row:focus-visible::before { transform: none; }
a.svx__row:hover .svx__t,
a.svx__row:focus-visible .svx__t { translate: 16px 0; }
a.svx__row:hover .svx__arrow,
a.svx__row:focus-visible .svx__arrow { background: var(--green); }
a.svx__row:hover .svx__petal,
a.svx__row:focus-visible .svx__petal { translate: 20% -50%; }
.svx__row--complaints { --sweep: var(--card-cream); --petal: var(--logo-yellow); }
.svx__row--compliance { --sweep: var(--card-pink);  --petal: var(--logo-red); }
.svx__row--training   { --sweep: var(--card-blue);  --petal: var(--logo-navy); }
.svx__row--barristers { --sweep: var(--card-green); --petal: var(--logo-green); }
.svx__row--iso        { --sweep: var(--card-blush); --petal: var(--blue); }

/* 13. Team strip ---------------------------------------------------------- */
.tstrip__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--card-gap);
}
.tstrip__m a { display: flex; flex-direction: column; gap: 0.3rem; color: var(--ink); }
.tstrip__photo { position: relative; isolation: isolate; display: block; width: 160px; margin-bottom: 0.9rem; }
.tstrip__photo img {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 12% 12% 34% 28% / 8% 8% 24% 34%;
}
.tstrip__petal {
	position: absolute;
	z-index: 0;
	left: -14%;
	bottom: -8%;
	width: 40%;
	aspect-ratio: 1;
	border-radius: 30%;
	background: var(--c);
	rotate: 12deg;
	transition: translate 0.4s var(--ease-out);
}
.tstrip__m a:hover .tstrip__petal,
.tstrip__m a:focus-visible .tstrip__petal { translate: -8px 4px; }
/* an h3: it keeps the metrics it had as a span, not the h1-h6 base's */
.tstrip__name { font-family: var(--font-head); font-weight: 600; font-size: var(--h5); line-height: inherit; letter-spacing: inherit; }
.tstrip__role { font-size: var(--small); color: var(--body); }

/* 14. Posts: reading hairline, share, previous / next --------------------- */
.readbar {
	position: fixed;
	top: var(--header-h);
	left: 0;
	right: 0;
	z-index: 99;
	height: 3px;
	pointer-events: none;
}
.readbar span {
	display: block;
	height: 100%;
	background: var(--acc);
	transform: scaleX(var(--p, 0));
	transform-origin: left;
}
html:not(.reveal-armed) .readbar { display: none; }

.pnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--card-gap);
	margin-top: clamp(2.5rem, 4vw, 4.5rem);
}
.pnav__cell {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem 1rem 1.75rem 0;
	border-top: var(--rule-strong);
	color: var(--ink);
}
.pnav__cell:last-child { text-align: right; padding: 1.5rem 0 1.75rem 1rem; align-items: flex-end; }
.pnav__cell .label { color: var(--body); }
/* the newest / oldest post has no neighbour on one side: keep the slot, not its rule */
.pnav__cell--empty { border-top-color: transparent; }
.pnav__t { font-family: var(--font-head); font-weight: 600; font-size: var(--h3); line-height: 1.2; text-wrap: balance; }
a.pnav__cell::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--cat-tint, var(--acc-tint));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--ease-out);
}
a.pnav__cell:hover::before,
a.pnav__cell:focus-visible::before { transform: none; }

/* 15. Responsive ---------------------------------------------------------- */
@media (max-width: 1279px) {
	.index--2col { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: minmax(0, 1fr); }
	.index--2col > li:last-child { border-bottom: 0; }
}

@media (max-width: 1024px) {
	/* every masthead edge collapses to the same top-right corner */
	.mast__petal--a { width: 42vw; left: auto !important; right: -14vw !important; top: calc(var(--header-h) - 8vw) !important; }
	/* B sits in the clear band the H1's top padding makes, left of A: never
	   on the headline's line, whatever its length or the drift */
	.mast__petal--b { width: 12vw; left: auto !important; right: 31vw !important; top: calc(var(--header-h) + 3.1vw + 3.5rem) !important; }
	.mast__h1 { grid-column: 1 / -1 !important; padding-top: 18vw; margin-top: 1rem; }
	/* cols 1-9: at full width a long standfirst runs under A's lower rim */
	.mast__stand { grid-column: 1 / 10 !important; }
	.mast--left .mast__run,
	.mast--left .mast__pills,
	.mast--left .strip { grid-column: 1 / -1; }
	.strip ol { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.folio__num { grid-column: 1 / 3; font-size: var(--numeral-sm); }
	.folio__body { grid-column: 3 / -1; }
	.pair { display: block; }
	.pair > .note { margin-top: 1.5rem; }
	.note { border-top: 0; border-left: 3px solid var(--acc); padding: 0 0 0 1rem; }
	.note__fig { font-size: 3rem; }

	.pq__lede { grid-column: 3 / -1; }
	.pq__quote { grid-column: 3 / 9; }
	.pq__cite { grid-column: 9 / -1; }
	.pq__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.nextstep__copy,
	.nextstep__form { grid-column: 1 / -1; }
	.nextstep__form { margin-top: 2.5rem; }

	.svx__t { grid-column: 2 / 8; font-size: var(--h3); }
	.svx__b { grid-column: 8 / 12; }
	.tstrip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the current row's label needs two columns, or it spills over a long blurb:
   the tablet band only. At <=860 the row is a 3-track grid, and these (more
   specific) placements would push the blurb and the label into implicit
   columns on top of each other. */
@media (min-width: 861px) and (max-width: 1024px) {
	.svx__row.is-current .svx__b { grid-column: 8 / 11; }
	.svx__row.is-current .svx__here { grid-column: 11 / -1; }
}

@media (max-width: 860px) {
	.folio__grid { display: block; }
	.folio__grid::before { display: block; }
	.folio__num { font-size: 4.5rem; margin-bottom: 1rem; }
	.folio__body { display: block; }
	.folio__body > * { margin-bottom: 1.25rem; }
	.statement { margin-left: 0; }
	.statement::before { position: static; display: inline-block; width: 0.4em; margin-right: 0.3em; vertical-align: 0.1em; }
	.twocol { grid-template-columns: 1fr; }
	.index > li { grid-template-columns: 44px minmax(0, 1fr); padding: 1rem 0; }
	.index__mark .label { display: none; }

	.pq__grid { display: block; }
	.pq__mark { height: 56px; margin-bottom: 1rem; }
	.pq__mark i:first-child { width: 44px; }
	.pq__mark i:last-child { width: 30px; left: 40px; top: 24px; }
	.pq__quote { margin-top: 1.5rem; }
	.pq__cite { margin-top: 1.25rem; }
	/* a lone secondary (Compliance) takes the whole rail */
	.pq__cards > :only-child { flex-basis: 100%; }

	.svx__row { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 0.25rem; }
	.svx__n { grid-column: 1; grid-row: 1; }
	.svx__t { grid-column: 2; grid-row: 1; font-size: 1.5rem; }
	.svx__b { grid-column: 2; grid-row: 2; font-size: var(--tiny); }
	.svx__arrow,
	.svx__here { grid-column: 3; grid-row: 1 / 3; width: 40px; }
	.svx__here { width: auto; }
	.svx__petal { display: none; }

	.pnav { grid-template-columns: 1fr; }
	.pnav__cell:last-child { text-align: left; align-items: flex-start; padding-left: 0; }
	.pnav__cell--empty { display: none; }
}

@media (max-width: 640px) {
	.mast__petal--a { width: 56vw; right: -22vw !important; top: calc(var(--header-h) - 10vw) !important; }
	.mast__petal--b { display: none; }
	.mast__h1 { padding-top: 26vw; }
	.mast__stand { grid-column: 1 / -1 !important; }
	.mast__pills { flex-direction: column; align-items: stretch; gap: 10px; }
	.mast__pills .btn { width: 100%; }
	.mast__pills .mast__tel { align-self: flex-start; }
	.mast__run { flex-direction: column; align-items: flex-start; }
	/* petal A holds the top-right corner at the running head's height: a long
	   current-page crumb ('… Presidents Dinner') wraps short of it rather
	   than running onto the saturated shape */
	.mast .breadcrumb { max-width: 58vw; }
	.strip { display: none; }
	.seal { width: 96px; }
	.lines a { font-size: 1.375rem; }
	.tstrip__photo { width: 120px; }
}

/* 16. The shared footer, on inner pages --------------------------------------
   Its markup is shared with the approved homepage and must stay identical
   (check.py), so only its CSS is tuned here; index.html never loads this
   file. The email is one unbreakable string: it never breaks mid-word
   ('enquiries@crcslegal.co / m'); it gets the room it needs instead. */
.footer-contact a { word-break: normal; overflow-wrap: normal; }
.footer-contact .email { white-space: nowrap; }
/* five columns: the 1.3fr contact track is only 205-238px here, so the email
   and the phone step down together (18px from 1366 up, 15px at 1181) */
@media (min-width: 1181px) and (max-width: 1365px) {
	.footer-contact .email,
	.footer-contact .phone { font-size: clamp(0.9375rem, 1.25vw, 1.125rem); }
}
/* three columns: contact shares row 2 with Address, so it takes both of the
   remaining tracks */
@media (min-width: 641px) and (max-width: 1180px) {
	.site-footer__grid > .footer-contact { grid-column: span 2; }
}
/* two columns, where half a row is narrower than the email: a full row */
@media (max-width: 600px) {
	.site-footer__grid > .footer-contact { grid-column: 1 / -1; }
}

/* 17. Reduced motion ----------------------------------------------------------
   Every element is simply there. style.css cuts durations but not delays, and
   with fill 'both' a delayed entrance holds its start frame for the whole
   delay (the H1's full stop, About's formation, staggered index rows). */
@media (prefers-reduced-motion: reduce) {
	.mast__run::after, .mast__h1, .mast__stop, .mast__petal { animation: none !important; }
	*, *::before, *::after { animation-delay: 0s !important; transition-delay: 0s !important; }
}

/* 18. Print --------------------------------------------------------------------
   style.css's print block un-hides [data-reveal] sections themselves, but not
   the start states of their children: a folio never scrolled past would print
   with its numeral, its rule, its rows or its statement lozenge missing. */
@media print {
	.folio__grid::before,
	.folio__num, .folio__num .lz,
	.statement::before,
	.index > li,
	.pq__lede,
	.seal__p { transition: none !important; }
	.folio__grid::before { transform: none !important; }
	.folio__num, .index > li, .pq__lede { opacity: 1 !important; translate: none !important; }
	.folio__num .lz { scale: none !important; }
	.statement::before { rotate: 45deg !important; }
	.seal__p { opacity: 1 !important; transform: none !important; }
	.readbar { display: none !important; }
}