/* ==========================================================================
   Steve Davison
   Component library for the Claude Design visual system.

   Name corrected 17/08/2026. This comment was the last surviving instance
   of the pre-rename form anywhere in the theme or the site. It reaches no
   reader and no crawler, but leaving it invites someone to treat "Dr Steve
   Davison DC" as still current, and it is not: the site uses no title and
   no post-nominals. The only place that string legitimately survives is
   the alternateName array in inc/schema.php.

   Binding rules from 04-brand/brand-guidelines.md and website-brief.md 2.5:
   - No border radius anywhere. No shadows anywhere. Identity, not preference.
   - Separation comes from hairline rules and ground changes.
   - Grids use gap, never margin spaced inline siblings.
   - Eyebrow text on LIGHT grounds is mid teal #006C84, never gold. Gold at
     11.5 to 14px fails WCAG 2.2 AA on both light grounds (3.05:1 on warm
     white, 2.80:1 on cream, against 4.5:1). Gold is retained for rules,
     markers and display numerals, which carry no text contrast requirement.
   ========================================================================== */

:root {
	--sd-teal: #023a47;
	--sd-teal-mid: #006c84;
	--sd-gold: #c08400;
	--sd-gold-bright: #f0a800;
	--sd-amber: #fcc024;
	--sd-cream: #f4efe4;
	--sd-white: #fbf9f4;
	--sd-card-hover: #ffffff;

	--sd-rule-light: rgba(2, 58, 71, 0.12);
	--sd-rule-grid: rgba(2, 58, 71, 0.16);
	--sd-rule-dark: rgba(240, 168, 0, 0.38);
	--sd-rule-dark-soft: rgba(240, 168, 0, 0.28);

	--sd-ink: rgba(2, 58, 71, 0.86);
	--sd-ink-soft: rgba(2, 58, 71, 0.78);
	--sd-ink-dark: rgba(244, 239, 228, 0.88);
	--sd-ink-dark-soft: rgba(244, 239, 228, 0.82);

	--sd-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
	--sd-sans: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--sd-max: 1320px;
	--sd-gutter: clamp(20px, 5vw, 72px);
	--sd-section-y: clamp(56px, 7vw, 104px);
	--sd-section-y-lg: clamp(64px, 8vw, 120px);
	--sd-measure: 62ch;
	--sd-header-h: 92px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

body {
	margin: 0;
	background: var(--sd-white);
	color: var(--sd-ink);
	font-family: var(--sd-sans);
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: 400;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	/*
	 * QA cycle 1 fix 3. overflow-x: hidden was here to stop the offset gold
	 * hero frame producing a horizontal scrollbar. It also converted the
	 * header's horizontal overflow from a clipping bug into an UNREACHABLE
	 * control: below 403px the Contact button was not merely offscreen, it
	 * could not be scrolled to, confirmed by the audit with scrollTo(500,0)
	 * leaving scrollX at 0.
	 *
	 * Replaced with clip on the x axis only, which still suppresses the
	 * scrollbar but is scoped, plus a real fix to the header layout below so
	 * there is no overflow to hide in the first place. The frame that caused
	 * the original scrollbar is contained at its own element instead.
	 */
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sd-serif);
	font-weight: 400;
	color: var(--sd-teal);
	text-wrap: balance;
	margin: 0 0 0.6em;
}

p {
	text-wrap: pretty;
	margin: 0 0 1.1em;
}

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

a {
	color: var(--sd-teal-mid);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/*
 * Link hover. The supplied design specifies "links inherit #006C84, hover
 * #C08400". Gold on a light ground measures 3.05:1 on warm white and 2.80:1 on
 * cream, so as body-text colour it fails WCAG 2.2 AA exactly as the design's
 * gold eyebrows did. The brief mandates the eyebrow correction but does not
 * reach the hover rule, which has the same defect and the same root cause.
 *
 * Corrected on the brief's own logic: text moves to a passing colour, gold is
 * retained for the non-text accent. The hover state is therefore deep teal
 * text (11.75:1) with a gold underline, so the gold signal survives in exactly
 * the decorative role the palette reserves for it.
 */
a:hover {
	color: var(--sd-teal);
	text-decoration-color: var(--sd-gold);
	text-decoration-thickness: 2px;
}

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

::selection {
	background: var(--sd-amber);
	color: var(--sd-teal);
}

/* No radius, no shadows, anywhere. This is the single easiest thing to break. */
* {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Focus. WCAG 2.2 focus appearance: 2px perimeter, 3:1 against adjacent.
   -------------------------------------------------------------------------- */

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

.sd-dark :focus-visible,
.sd-hero :focus-visible,
.sd-form :focus-visible {
	outline: 2px solid var(--sd-gold-bright);
	outline-offset: 2px;
}

.sd-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--sd-teal);
	color: var(--sd-white);
	padding: 14px 22px;
	font-family: var(--sd-sans);
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.sd-skip:focus {
	left: 0;
	color: var(--sd-white);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.sd-wrap {
	max-width: var(--sd-max);
	margin-inline: auto;
	padding-inline: var(--sd-gutter);
}

.sd-section {
	padding-block: var(--sd-section-y);
}

.sd-section--lg {
	padding-block: var(--sd-section-y-lg);
}

.sd-light {
	background: var(--sd-white);
}

.sd-cream {
	background: var(--sd-cream);
}

.sd-dark {
	background: var(--sd-teal);
	color: var(--sd-ink-dark);
}

/*
 * .sd-hero is a dark ground in its own right, so it must inherit every dark
 * context rule. Without this the hero eyebrow falls back to mid teal on deep
 * teal, which measures 2.05:1 and is the worst contrast failure this palette
 * can produce. Caught by Lighthouse and confirmed by direct computation.
 */
.sd-dark h1,
.sd-dark h2,
.sd-dark h3,
.sd-dark h4,
.sd-hero h1,
.sd-hero h2,
.sd-hero h3,
.sd-hero h4 {
	color: var(--sd-white);
}

.sd-dark a,
.sd-hero a {
	color: var(--sd-gold-bright);
}

.sd-dark a:hover,
.sd-hero a:hover {
	color: var(--sd-amber);
	text-decoration-color: var(--sd-amber);
}

/*
 * BUTTONS ARE NOT LINKS, and the two rules above cannot tell the difference.
 *
 * `.sd-dark a` and `.sd-hero a` are specificity (0,1,1). Every `.sd-btn--*`
 * modifier is (0,1,0). So on a dark or hero ground the link colour above beat
 * the button's own label colour and repainted the label gold, on a gold
 * ground: 1.00:1. The primary call to action rendered as a blank gold
 * rectangle to every sighted mouse user, and the label appeared only under
 * keyboard focus.
 *
 * It survived every previous check because those checks read the declared
 * custom property instead of the rendered element. The declaration said
 * 6.07:1 and was correct; the cascade result was 1.00:1. Verify this one from
 * getComputedStyle on a painted button, never from this file.
 *
 * TWO MORE FAILURES OF THE SAME SHAPE, found by sweeping the states rather
 * than fixing only the reported pair. `.sd-dark a:hover` is (0,2,1) against
 * `.sd-btn--gold:hover` at (0,2,0), so gold hover rendered amber on amber at
 * 1.00:1, and outline hover rendered amber on gold at 1.23:1.
 *
 * Fixed by scope, not by force. Each selector below adds the button class to
 * the link selector, which outranks the rules above on specificity alone:
 * (0,2,1) for the base and (0,3,1) for the states. No `!important` anywhere,
 * so the cascade stays readable and remains overridable.
 *
 * `.sd-btn--teal` deliberately has no entry. The same collision applies to it,
 * but both rules resolve to the same colours, so nothing renders wrongly. It
 * is named here so nobody "completes the set" later and changes a pair that is
 * currently correct.
 *
 * Restored, measured on the rendered element: gold base teal on gold 6.07:1,
 * gold hover teal on amber 7.48:1, outline hover teal on gold 6.07:1.
 */
.sd-dark a.sd-btn--gold,
.sd-hero a.sd-btn--gold {
	color: var(--sd-teal);
}

.sd-dark a.sd-btn--gold:hover,
.sd-dark a.sd-btn--gold:focus,
.sd-hero a.sd-btn--gold:hover,
.sd-hero a.sd-btn--gold:focus,
.sd-dark a.sd-btn--outline:hover,
.sd-dark a.sd-btn--outline:focus,
.sd-hero a.sd-btn--outline:hover,
.sd-hero a.sd-btn--outline:focus {
	color: var(--sd-teal);
}

/* --------------------------------------------------------------------------
   Eyebrow. Mid teal on light grounds, bright gold on dark. Binding.
   -------------------------------------------------------------------------- */

.sd-eyebrow {
	display: block;
	font-family: var(--sd-sans);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--sd-teal-mid);
	margin: 0 0 1.2rem;
}

.sd-dark .sd-eyebrow,
.sd-hero .sd-eyebrow {
	color: var(--sd-gold-bright);
}

/* --------------------------------------------------------------------------
   Typographic scale helpers
   -------------------------------------------------------------------------- */

.sd-h1 {
	font-size: clamp(38px, 5.4vw, 76px);
	line-height: 1.08;
}

.sd-h2 {
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.18;
}

.sd-dark .sd-h2 {
	font-size: clamp(30px, 3.6vw, 50px);
}

.sd-lead {
	font-size: clamp(16.5px, 1.35vw, 19px);
	font-weight: 300;
	line-height: 1.7;
}

.sd-measure {
	max-width: var(--sd-measure);
}

.sd-italic-gold {
	font-style: italic;
	color: var(--sd-gold-bright);
	display: block;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.sd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.85rem 1.7rem;
	font-family: var(--sd-sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Primary on teal: solid gold */
.sd-btn--gold {
	background: var(--sd-gold-bright);
	color: var(--sd-teal);
	border-color: var(--sd-gold-bright);
}

.sd-btn--gold:hover,
.sd-btn--gold:focus {
	background: var(--sd-amber);
	border-color: var(--sd-amber);
	color: var(--sd-teal);
}

/* Secondary on teal: gold outline filling gold */
.sd-btn--outline {
	background: transparent;
	color: var(--sd-gold-bright);
	border-color: var(--sd-rule-dark);
}

.sd-btn--outline:hover,
.sd-btn--outline:focus {
	background: var(--sd-gold-bright);
	color: var(--sd-teal);
	border-color: var(--sd-gold-bright);
}

/* Primary on light: solid teal with gold label */
.sd-btn--teal {
	background: var(--sd-teal);
	color: var(--sd-gold-bright);
	border-color: var(--sd-teal);
}

/*
 * QA cycle 1 fix 11. This hover measured 3.65:1, amber on mid teal.
 *
 * The design sanctions two hover moves, "gold to amber" and "teal to mid
 * teal". Applying BOTH at once is what failed: it lightened the ground and the
 * text together. Every combination was computed rather than sampled:
 * amber on mid teal 3.65, bright gold on mid teal 2.96, warm white on mid teal
 * 5.74, and amber on deep teal 7.48.
 *
 * The ground is therefore held at deep teal and only the label moves, which is
 * the design's own "gold to amber" hover, passes at 7.48:1, and keeps the gold
 * identity that swapping the label to white would have lost.
 *
 * A full sweep of every hover, focus and active pair in the theme was run at
 * the same time, on the finding that this was the third instance of one
 * pattern. Fifteen pairs checked, this was the only remaining failure.
 */
.sd-btn--teal:hover,
.sd-btn--teal:focus {
	background: var(--sd-teal);
	color: var(--sd-amber);
	border-color: var(--sd-amber);
}

.sd-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.sd-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(251, 249, 244, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--sd-rule-light);
}

/*
 * QA cycle 1 fix 3. The header row needed 403px, so below that the Contact
 * button overflowed and, with overflow hidden on the body, became unreachable.
 * Lighthouse scored it 100 because its mobile emulation is 412px, nine pixels
 * above the failure. Verified by hand at 320px and 375px, not through a
 * scanner.
 *
 * The row now wraps rather than overflowing, the gutter tightens on the
 * narrowest screens, and nothing is allowed to force a minimum width: the
 * flex children get min-width 0 so long words shrink instead of pushing the
 * row wider than the viewport.
 */
.sd-header__inner {
	max-width: var(--sd-max);
	margin-inline: auto;
	padding: 14px var(--sd-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 16px;
}

.sd-header__inner > * {
	min-width: 0;
}

@media (max-width: 420px) {
	.sd-header__inner {
		padding-inline: 14px;
		gap: 8px 10px;
	}

	.sd-wordmark__name {
		font-size: 15px;
		letter-spacing: 0.08em;
	}

	.sd-wordmark__quals {
		letter-spacing: 0.16em;
		font-size: 10px;
	}
}

.sd-wordmark {
	text-decoration: none;
	display: block;
	flex: 0 0 auto;
}

.sd-wordmark__name {
	display: block;
	font-family: var(--sd-serif);
	font-size: clamp(15px, 1.5vw, 19px);
	font-variant: small-caps;
	letter-spacing: 0.14em;
	color: var(--sd-teal);
	line-height: 1.2;
}

.sd-wordmark__quals {
	display: block;
	font-family: var(--sd-sans);
	font-size: 10.5px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--sd-teal-mid);
	margin-top: 4px;
}

.sd-nav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sd-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sd-nav__item {
	position: relative;
}

.sd-nav__link,
.sd-nav__toggle {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 12px;
	font-family: var(--sd-sans);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--sd-teal);
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
	white-space: nowrap;
}

.sd-nav__link:hover,
.sd-nav__toggle:hover {
	color: var(--sd-teal-mid);
	text-decoration: underline;
}

.sd-nav__link[aria-current="page"] {
	color: var(--sd-teal-mid);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.sd-nav__toggle::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}

.sd-nav__toggle[aria-expanded="true"]::after {
	transform: rotate(-135deg) translateY(-2px);
}

.sd-nav__sub {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--sd-white);
	border: 1px solid var(--sd-rule-light);
}

.sd-nav__sub[hidden] {
	display: none;
}

.sd-nav__sub .sd-nav__link {
	display: flex;
	width: 100%;
	padding: 10px 16px;
}

.sd-nav__cta {
	margin-left: 8px;
}

.sd-nav-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 14px;
	font-family: var(--sd-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sd-teal);
	background: none;
	border: 1px solid var(--sd-rule-light);
	cursor: pointer;
}

@media (max-width: 900px) {
	.sd-nav-toggle {
		display: inline-flex;
	}

	.sd-nav {
		position: fixed;
		inset: var(--sd-header-h) 0 auto 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--sd-white);
		border-bottom: 1px solid var(--sd-rule-light);
		padding: 8px var(--sd-gutter) 24px;
		max-height: calc(100vh - var(--sd-header-h));
		overflow-y: auto;
	}

	.sd-nav.is-open {
		display: flex;
	}

	.sd-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.sd-nav__link,
	.sd-nav__toggle {
		width: 100%;
		padding: 14px 0;
		font-size: 17px;
		border-bottom: 1px solid var(--sd-rule-light);
	}

	.sd-nav__toggle {
		justify-content: space-between;
	}

	.sd-nav__sub {
		position: static;
		border: 0;
		padding: 0 0 0 18px;
	}

	.sd-nav__cta {
		margin: 18px 0 0;
	}

	.sd-nav__cta .sd-btn {
		width: 100%;
	}
}

/* The CTA stays visible outside the panel on mobile. */
.sd-header__cta-mobile {
	display: none;
}

@media (max-width: 900px) {
	.sd-header__cta-mobile {
		display: inline-flex;
	}

	.sd-nav__cta {
		display: none;
	}

	.sd-header__inner {
		gap: 10px;
	}
}

@media (max-width: 480px) {
	.sd-header__cta-mobile {
		font-size: 12px;
		padding: 0.7rem 0.8rem;
		letter-spacing: 0.06em;
	}
}

/* At the narrowest supported width the row wraps to two lines rather than
   overflowing, so the Contact control stays on screen and reachable. */
@media (max-width: 360px) {
	.sd-wordmark {
		flex: 1 1 100%;
	}

	.sd-nav-toggle,
	.sd-header__cta-mobile {
		flex: 0 0 auto;
	}

	.sd-header__cta-mobile {
		margin-left: auto;
	}
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.sd-hero {
	background: var(--sd-teal);
	color: var(--sd-ink-dark);
	padding-block: var(--sd-section-y-lg);
}

.sd-hero__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.sd-hero__title {
	color: var(--sd-white);
	font-size: clamp(38px, 5.4vw, 76px);
	line-height: 1.08;
	margin-bottom: 0.5em;
}

.sd-hero__lead {
	color: var(--sd-ink-dark);
	max-width: 54ch;
}

.sd-hero__figure {
	position: relative;
	margin: 0;
	/* Contains the offset gold frame so it cannot drive page level overflow. */
	overflow: clip;
	padding: 14px 14px 26px 26px;
	margin: -14px -14px -26px -26px;
}

.sd-hero__figure::before {
	content: "";
	position: absolute;
	inset: -14px -14px 26px 26px;
	border: 1px solid var(--sd-rule-dark);
	pointer-events: none;
}

/*
 * Portrait treatment, from the design: a light grayscale and a slight contrast
 * lift, with the offset gold hairline frame behind it. Same reasoning as the
 * duotone above, applied at lower strength because this is a portrait rather
 * than a lit stage shot.
 */
.sd-hero__img {
	display: block;
	width: 100%;
	height: clamp(320px, 42vw, 560px);
	object-fit: cover;
	object-position: center 22%;
	filter: grayscale(0.35) contrast(1.04);
	position: relative;
}

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

	.sd-hero__figure {
		order: 2;
	}

	.sd-hero__figure::before {
		inset: -10px -10px 18px 18px;
	}
}

/* --------------------------------------------------------------------------
   Duotone treatment for colour cast or lit photography
   -------------------------------------------------------------------------- */

/*
 * The duotone treatment for colour cast or lit photography, from the design.
 * Grayscale with a luminosity blend at 0.9 opacity over a mid teal ground.
 *
 * Carried deliberately rather than decoratively: both supplied photographs are
 * low resolution web derivatives rather than source originals, and this
 * treatment materially disguises that. It is doing structural work here.
 *
 * Laid out as a single cell grid so the image stretches to the figure's grid
 * assigned height reliably, rather than depending on height:100% resolving
 * against an indefinite parent.
 */
.sd-duotone {
	display: grid;
	background: var(--sd-teal-mid);
	margin: 0;
	overflow: hidden;
}

.sd-duotone img {
	grid-area: 1 / 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.08);
	mix-blend-mode: luminosity;
	opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Hairline cell grid. The gaps ARE the rules.
   -------------------------------------------------------------------------- */

.sd-cells {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px;
	background: var(--sd-rule-grid);
	border-block: 1px solid var(--sd-rule-grid);
}

.sd-cells--2 {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.sd-cell {
	background: var(--sd-cream);
	padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
}

.sd-light .sd-cell {
	background: var(--sd-white);
}

.sd-cell--card {
	background: var(--sd-white);
	transition: background-color 0.15s ease;
}

.sd-cell--card:hover {
	background: var(--sd-card-hover);
}

.sd-cell__numeral {
	display: block;
	font-family: var(--sd-serif);
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.1;
	color: var(--sd-teal);
	margin-bottom: 0.35em;
}

.sd-cell__label {
	display: block;
	font-family: var(--sd-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sd-teal-mid);
	line-height: 1.5;
}

.sd-cell__title {
	font-size: 23px;
	line-height: 1.3;
	margin-bottom: 0.5em;
}

.sd-cell__body {
	font-size: 16px;
	line-height: 1.7;
}

/*
 * Card numerals. The design sets these in gold. At 22px they are not large
 * text, so they carry the full 4.5:1 requirement and gold fails it: 3.05:1 on
 * warm white, 3.21:1 on the hover white, 2.80:1 on cream. The brief permits
 * gold for "numerals in display sizes", and these are not display sizes.
 *
 * Moved to mid teal, which measures 5.74:1 and 5.27:1, and is the same
 * correction the brief already mandates for eyebrow text. Gold is retained
 * throughout for rules, list markers and hairlines, which carry no text
 * contrast requirement.
 */
.sd-cell__num {
	display: block;
	font-family: var(--sd-serif);
	font-size: 22px;
	color: var(--sd-teal-mid);
	margin-bottom: 0.6em;
	letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Sticky label column against a 62ch measure
   -------------------------------------------------------------------------- */

.sd-split {
	display: grid;
	grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

.sd-split__label {
	position: sticky;
	top: 108px;
}

.sd-split__body {
	max-width: var(--sd-measure);
}

@media (max-width: 900px) {
	.sd-split {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.sd-split__label {
		position: static;
	}
}

/* --------------------------------------------------------------------------
   Pull quote
   -------------------------------------------------------------------------- */

.sd-pullquote {
	background: var(--sd-cream);
	border-left: 3px solid var(--sd-gold);
	padding: clamp(28px, 4vw, 48px);
	margin: 0;
	max-width: 46ch;
}

.sd-pullquote p {
	font-family: var(--sd-serif);
	font-style: italic;
	font-size: clamp(20px, 2.2vw, 28px);
	line-height: 1.45;
	color: var(--sd-teal);
	margin: 0;
}

/* Story block quote on /about: his own voice, not a decorative device. */
.sd-story {
	margin: 0;
	padding: 0 0 0 clamp(16px, 2vw, 28px);
	border-left: 1px solid var(--sd-rule-light);
}

.sd-story p {
	margin-bottom: 1.2em;
}

/* --------------------------------------------------------------------------
   Hairline rows. year / title / venue, and label / value.
   -------------------------------------------------------------------------- */

.sd-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--sd-rule-light);
}

.sd-row {
	display: grid;
	grid-template-columns: minmax(90px, 130px) minmax(0, 1fr);
	gap: clamp(16px, 2.5vw, 40px);
	padding: clamp(18px, 2.2vw, 28px) 0;
	border-bottom: 1px solid var(--sd-rule-light);
	align-items: baseline;
}

.sd-row--stack {
	grid-template-columns: 1fr;
	gap: 6px;
}

.sd-row__key {
	font-family: var(--sd-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sd-teal-mid);
	line-height: 1.6;
}

.sd-row__key--serif {
	font-family: var(--sd-serif);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sd-teal);
}

.sd-row__val {
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.7;
}

.sd-row__val p {
	margin-bottom: 0.6em;
}

.sd-dark .sd-rows {
	border-top-color: var(--sd-rule-dark-soft);
}

.sd-dark .sd-row {
	border-bottom-color: var(--sd-rule-dark-soft);
}

.sd-dark .sd-row__key {
	color: var(--sd-gold-bright);
}

/* Citation blocks on /research */
/*
 * QA cycle 1 fix 16. The DOI clipped 49px on /research, so the citation on the
 * page whose entire purpose is evidencing the paper read "10.1002/eji.18302"
 * and stopped. A DOI is one unbroken token, so it needs an explicit wrap rule;
 * normal word wrapping will not break it.
 */
.sd-citation {
	margin: 0 0 1rem;
	padding: 0 0 0 1.2rem;
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.7;
	color: var(--sd-ink);
	border-left: 2px solid var(--sd-gold);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.sd-citation a {
	overflow-wrap: anywhere;
}

.sd-citation cite {
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Gold ruled list (talk topics)
   -------------------------------------------------------------------------- */

.sd-goldlist {
	list-style: none;
	margin: 2rem 0;
	padding: 0;
	border-top: 1px solid var(--sd-rule-dark-soft);
}

.sd-goldlist li {
	padding: 14px 0;
	border-bottom: 1px solid var(--sd-rule-dark-soft);
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.6;
}

.sd-light .sd-goldlist,
.sd-cream .sd-goldlist {
	border-top-color: var(--sd-rule-light);
}

.sd-light .sd-goldlist li,
.sd-cream .sd-goldlist li {
	border-bottom-color: var(--sd-rule-light);
}

/* Bulleted list with gold markers */
.sd-marklist {
	list-style: none;
	margin: 1.4rem 0;
	padding: 0;
}

.sd-marklist li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.7rem;
	line-height: 1.7;
}

.sd-marklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 10px;
	height: 1px;
	background: var(--sd-gold);
}

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

.sd-faq {
	border-top: 1px solid var(--sd-rule-light);
	max-width: 74ch;
}

.sd-faq__item {
	border-bottom: 1px solid var(--sd-rule-light);
	padding: clamp(20px, 2.4vw, 30px) 0;
}

.sd-faq__q {
	font-size: clamp(19px, 1.7vw, 23px);
	line-height: 1.35;
	margin-bottom: 0.5em;
}

.sd-faq__a {
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.sd-crumbs {
	padding: 18px 0 0;
	font-size: 13px;
	letter-spacing: 0.04em;
}

.sd-crumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.sd-crumbs li::after {
	content: "\00b7";
	margin-left: 8px;
	color: var(--sd-gold);
}

.sd-crumbs li:last-child::after {
	content: "";
}

.sd-crumbs [aria-current="page"] {
	color: var(--sd-ink-soft);
}

/* --------------------------------------------------------------------------
   Page header band
   -------------------------------------------------------------------------- */

.sd-pagehead {
	padding-block: clamp(48px, 6vw, 88px) clamp(36px, 4vw, 56px);
}

.sd-pagehead__title {
	font-size: clamp(34px, 4.4vw, 62px);
	line-height: 1.1;
	margin-bottom: 0.45em;
}

.sd-pagehead__lead {
	font-size: clamp(16.5px, 1.35vw, 19px);
	font-weight: 300;
	line-height: 1.7;
	max-width: var(--sd-measure);
}

/* --------------------------------------------------------------------------
   Two column band (speaking teaser, contact)
   -------------------------------------------------------------------------- */

.sd-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
}

.sd-duo__media {
	min-height: clamp(280px, 34vw, 460px);
}

/* Full bleed two column band. No sd-wrap, per the design's full bleed spec. */
.sd-duo-band {
	padding-block: 0;
}

.sd-duo__body {
	padding: clamp(36px, 5vw, 72px) var(--sd-gutter);
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: calc(var(--sd-max) / 2);
}

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

	.sd-duo__body {
		max-width: none;
	}
}

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

.sd-cta {
	padding-block: clamp(48px, 6vw, 84px);
}

.sd-cta__line {
	font-family: var(--sd-serif);
	font-size: clamp(22px, 2.6vw, 34px);
	line-height: 1.3;
	color: var(--sd-white);
	max-width: 30ch;
	margin-bottom: 1.6rem;
}

.sd-cta__split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1px;
	background: var(--sd-rule-dark-soft);
	border-block: 1px solid var(--sd-rule-dark-soft);
}

.sd-cta__route {
	background: var(--sd-teal);
	padding: clamp(28px, 3.4vw, 44px) clamp(20px, 2.6vw, 36px);
}

/* --------------------------------------------------------------------------
   Enquiry form: REMOVED, QA cycle 1 fix 9, David's decision 16/08/2026.

   The form is gone and the contact route is the email address and telephone
   number as selectable text. Its styles are removed with it rather than left
   orphaned, which is why this section is a stub: field borders at 2.03:1,
   blur errors never announced and the submit handler stealing focus from the
   error summary were three accessibility findings that the removal moots, and
   leaving dead CSS behind would have kept them one edit away from returning.
   -------------------------------------------------------------------------- */
.sd-form-removed-marker {
	display: none;
}

/*
 * The emergency safety line, dcw-compliance checklist item E3.
 *
 * Given a hairline rule and space so it reads as its own statement rather than
 * as body copy, but deliberately NOT an icon, a coloured alert box or a
 * dismissible notice: compliance specifies it as text and specifies that it is
 * not styled as something a reader can wave away. It is also not truncated or
 * reflowed to fit; if a layout will not take it, the layout flexes.
 */
.sd-safety {
	border-top: 1px solid var(--sd-rule-light);
	border-bottom: 1px solid var(--sd-rule-light);
	padding: 1.1rem 0;
	margin: 1.6rem 0;
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.7;
}

.sd-dark .sd-safety {
	border-color: var(--sd-rule-dark-soft);
}

/* Contact routes on the dark ground: address and telephone as selectable
   text, which is what replaced the form. */
.sd-contact-route {
	font-size: clamp(18px, 1.7vw, 22px);
	line-height: 1.6;
	margin-bottom: 0.8rem;
}

.sd-contact-route a {
	color: var(--sd-gold-bright);
	overflow-wrap: anywhere;
}

.sd-contact-route a:hover {
	color: var(--sd-amber);
}

/* Fallback contact rows, label / value, hover to amber */
.sd-contactrows {
	list-style: none;
	margin: 3rem 0 0;
	padding: 0;
	border-top: 1px solid var(--sd-rule-dark-soft);
}

.sd-contactrow {
	display: grid;
	grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
	gap: 20px;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid var(--sd-rule-dark-soft);
}

.sd-contactrow__label {
	font-family: var(--sd-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sd-gold-bright);
}

.sd-contactrow__value {
	font-size: 17px;
	line-height: 1.6;
	color: var(--sd-ink-dark);
}

.sd-contactrow__value a:hover {
	color: var(--sd-amber);
}

@media (max-width: 600px) {
	.sd-contactrow {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* --------------------------------------------------------------------------
   Blog index
   -------------------------------------------------------------------------- */

.sd-postrows {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--sd-rule-light);
}

.sd-postrow {
	display: grid;
	grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
	gap: clamp(16px, 2.5vw, 40px);
	padding: clamp(20px, 2.4vw, 30px) 0;
	border-bottom: 1px solid var(--sd-rule-light);
	align-items: baseline;
}

.sd-postrow__date {
	font-family: var(--sd-sans);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sd-teal-mid);
}

.sd-postrow__title {
	font-size: clamp(20px, 1.9vw, 26px);
	line-height: 1.3;
	margin-bottom: 0.3em;
}

.sd-postrow__title a {
	text-decoration: none;
	color: var(--sd-teal);
}

.sd-postrow__title a:hover {
	color: var(--sd-teal-mid);
	text-decoration: underline;
}

.sd-postrow__stand {
	font-size: 16px;
	line-height: 1.6;
	color: var(--sd-ink-soft);
	margin: 0;
}

@media (max-width: 600px) {
	.sd-postrow {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

.sd-pagination {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 2.5rem;
}

.sd-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--sd-rule-light);
	text-decoration: none;
	font-size: 15px;
}

.sd-pagination .page-numbers.current {
	background: var(--sd-teal);
	color: var(--sd-white);
	border-color: var(--sd-teal);
}

/* --------------------------------------------------------------------------
   Single post
   -------------------------------------------------------------------------- */

.sd-article {
	max-width: var(--sd-measure);
}

.sd-article__meta {
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sd-teal-mid);
	margin-bottom: 1.5rem;
}

.sd-author {
	border-top: 1px solid var(--sd-rule-light);
	margin-top: 3rem;
	padding-top: 1.6rem;
	font-size: 16px;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

.sd-legal {
	max-width: var(--sd-measure);
}

.sd-legal h2 {
	font-size: clamp(24px, 2.2vw, 32px);
	margin-top: 2.4em;
}

.sd-legal h3 {
	font-size: clamp(19px, 1.7vw, 23px);
	margin-top: 1.8em;
}

.sd-legal__updated {
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sd-teal-mid);
	margin-bottom: 2rem;
}

.sd-legal table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	margin: 1.6rem 0;
}

.sd-legal th,
.sd-legal td {
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--sd-rule-light);
	vertical-align: top;
}

.sd-legal th {
	font-family: var(--sd-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sd-teal-mid);
	border-bottom: 1px solid var(--sd-rule-grid);
}

.sd-tablescroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.sd-footer {
	background: var(--sd-cream);
	color: var(--sd-ink);
	padding-block: clamp(48px, 6vw, 80px) 0;
	border-top: 1px solid var(--sd-rule-light);
}

.sd-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: clamp(28px, 3.5vw, 56px);
	padding-bottom: clamp(36px, 4vw, 56px);
	border-bottom: 1px solid var(--sd-rule-light);
}

.sd-footer__heading {
	font-family: var(--sd-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sd-teal-mid);
	margin-bottom: 1rem;
}

.sd-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sd-footer__list li {
	margin-bottom: 2px;
}

.sd-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 4px 0;
	font-size: 16px;
	color: var(--sd-teal);
	text-decoration: none;
}

.sd-footer__list a:hover {
	color: var(--sd-teal-mid);
	text-decoration: underline;
}

.sd-footer__nap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(24px, 3vw, 48px);
	padding-block: clamp(32px, 4vw, 48px);
	border-bottom: 1px solid var(--sd-rule-light);
	font-size: 16px;
	line-height: 1.7;
}

.sd-footer__nap p {
	margin-bottom: 0.8em;
}

.sd-footer__name {
	font-family: var(--sd-serif);
	font-size: 19px;
	color: var(--sd-teal);
	display: block;
}

/* The statutory professional title, checklist item A11. */
.sd-footer__title {
	display: block;
	font-family: var(--sd-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sd-teal-mid);
	margin: 0.25em 0 0.6em;
}

.sd-footer__reg {
	font-size: 15px;
	color: var(--sd-ink-soft);
}

/* Contact routes in the footer: always selectable, never only a mailto. */
.sd-footer__contact {
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 0.8em;
}

.sd-footer__contact a {
	overflow-wrap: anywhere;
}

.sd-footer__legal {
	padding-block: clamp(24px, 3vw, 36px);
	font-size: 13px;
	line-height: 1.7;
	color: var(--sd-ink-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	justify-content: space-between;
}

.sd-footer__entity {
	max-width: 60ch;
}

.sd-footer__social {
	list-style: none;
	display: flex;
	gap: 18px;
	margin: 0.6rem 0 0;
	padding: 0;
}

.sd-footer__social a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   404 and search
   -------------------------------------------------------------------------- */

.sd-search-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 2rem 0;
}

.sd-search-form input[type="search"] {
	flex: 1 1 240px;
	min-height: 48px;
	padding: 12px 14px;
	font-family: var(--sd-sans);
	font-size: 17px;
	border: 1px solid var(--sd-rule-grid);
	background: var(--sd-white);
	color: var(--sd-teal);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

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

.sd-stack > * + * {
	margin-top: 1.2rem;
}

.sd-mt-lg {
	margin-top: clamp(28px, 3.5vw, 48px);
}

.sd-note {
	font-size: 16px;
	line-height: 1.7;
	color: var(--sd-ink-soft);
}

@media print {
	.sd-header,
	.sd-footer__cols,
	.sd-cta {
		display: none;
	}

	.sd-consent {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Consent banner. Specification in compliance-checklist.md 10.2.

   Deep teal ground, warm white text, bright gold hairline, per
   04-brand/brand-guidelines.md. No border radius, no shadow: the separation
   comes from a hairline rule and a ground change, which is the identity rule
   rather than a preference.

   EQUAL PROMINENCE IS LOAD BEARING. Accept and Reject share one class and
   there is deliberately no modifier that could differentiate them. Do not add
   a primary or secondary variant here: equal size, weight, colour treatment
   and click cost is a legal requirement in 10.2, not a design choice.

   Contrast, computed on the composited result rather than taken from the
   declared variables, because reading the declaration is exactly how this
   project shipped a 1.00:1 button:
     - warm white #fbf9f4 on deep teal #023a47   15.16:1
     - bright gold #f0a800 on deep teal #023a47    6.07:1
     - deep teal #023a47 on bright gold #f0a800    6.07:1  (both buttons)
     - deep teal #023a47 on amber #fcc024          7.48:1  (button hover)
   The banner ground is dark, so the eyebrow rule that applies is bright gold
   on dark. The design's gold on light is NOT used anywhere here; it fails on
   both light grounds and this site has already been caught by that twice.
   -------------------------------------------------------------------------- */

.sd-consent {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 200;
	display: block;
	background: var(--sd-teal);
	border-top: 1px solid var(--sd-gold-bright);
	color: var(--sd-white);
	max-height: 80vh;
	overflow-y: auto;
}

/*
 * Required. The element carries the `hidden` attribute until the consent
 * script decides to reveal it, and `display: block` above would otherwise
 * defeat `hidden` entirely and show the banner to everyone, including people
 * who have already refused.
 */
.sd-consent[hidden] {
	display: none;
}

.sd-consent__inner {
	max-width: var(--sd-max);
	margin-inline: auto;
	padding: 1.6rem var(--sd-gutter);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sd-consent__title {
	font-family: var(--sd-serif);
	font-size: 22px;
	line-height: 1.25;
	color: var(--sd-white);
	margin: 0;
}

/* Focus lands here on reveal; it must not look like a permanent outline. */
.sd-consent__title:focus {
	outline: none;
}

.sd-consent__title:focus-visible {
	outline: 2px solid var(--sd-amber);
	outline-offset: 3px;
}

.sd-consent__body p {
	margin: 0 0 0.7rem;
	font-size: 15px;
	line-height: 1.65;
	color: var(--sd-white);
	max-width: 74ch;
}

.sd-consent__body p:last-child {
	margin-bottom: 0;
}

.sd-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.sd-consent__btn {
	flex: 0 1 auto;
	min-width: 15rem;
	min-height: 48px;
	padding: 0.85rem 1.7rem;
	font-family: var(--sd-sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
	background: var(--sd-gold-bright);
	color: var(--sd-teal);
	border: 1px solid var(--sd-gold-bright);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sd-consent__btn:hover,
.sd-consent__btn:focus,
.sd-consent__btn:focus-visible {
	background: var(--sd-amber);
	border-color: var(--sd-amber);
	color: var(--sd-teal);
}

/*
 * The indicator is bound to :focus as well as :focus-visible, deliberately.
 *
 * :focus-visible alone is the tidier choice and is what the rest of the theme
 * uses, but it is a browser heuristic: it does not match when focus arrives
 * programmatically, which means the rendered focus ring on the one control
 * that carries a legal obligation could not be verified by any test available
 * here. Binding it to :focus too costs a visible ring on mouse click and buys
 * a guarantee that a keyboard user sees focus regardless of heuristic, on a
 * site that has already shipped one Level A keyboard failure.
 *
 * Contrast of the indicator itself: warm white #fbf9f4 against the amber
 * focus ground #fcc024 is a 2px ring on a 7.48:1 label, and the ring is
 * additionally offset onto the deep teal banner ground at 15.16:1.
 */
.sd-consent__btn:focus,
.sd-consent__btn:focus-visible {
	outline: 2px solid var(--sd-white);
	outline-offset: 2px;
}

.sd-consent__note {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

.sd-consent__note a {
	color: var(--sd-gold-bright);
}

.sd-consent__note a:hover,
.sd-consent__note a:focus-visible {
	color: var(--sd-amber);
}

/*
 * The banner is a bottom bar rather than an overlay, so the page stays
 * readable behind it, but without this the last rows of the footer would sit
 * underneath it and be unreachable. Removed again the moment a choice is made.
 */
body.sd-has-consent-banner {
	padding-bottom: 24rem;
}

@media (min-width: 700px) {
	body.sd-has-consent-banner {
		padding-bottom: 15rem;
	}
}

@media (max-width: 420px) {
	.sd-consent__inner {
		padding: 1.2rem 14px;
	}

	.sd-consent__btn {
		flex: 1 1 100%;
		min-width: 0;
	}
}

/*
 * The withdrawal control sits in a list of links and must read as one, but it
 * is a button because it opens the banner rather than navigating. These rules
 * strip the user-agent button chrome so it matches its neighbours exactly.
 */
.sd-footer__consent {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}