/*
Theme Name: BRCL 2026
Description: Boiler Repairs Central London. Built from the mock-up of 15 October 2026. Nothing from the 2015 theme survives: no Bootstrap, no animate.css, no wow.js, no jQuery, no Font Awesome, no html5shiv, no respond.js.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: brcl2026
*/

/* ==========================================================================
   Tokens. Every colour sampled from the mock-up with Pillow, never by eye.

   charcoal #242529  exact match in the image
   purple   #681BE3  image has #6B1AE3, compression noise
   gold     #E4AF49  image has #E4AE44, compression noise
   surface  #F4EFE4  warmed from the mock-up's #F6F7F9 on 10 Nov 2026. The
                     subject is old heating, so the neutral is paper, not screen
                     grey. #242529 on it is 14.2:1, #55575f on it is 7.2:1.

   CONTRAST, measured not guessed. AA needs 4.5:1, or 3:1 for large text.
     gold on charcoal    7.67  fine
     white on charcoal  15.31  fine
     white on purple     7.36  fine
     purple on white     7.36  fine
     gold on white       1.99  FAILS. Gold never sits on white.
     purple on charcoal  2.08  FAILS. Purple never sits on charcoal.
   Those last two are why there is no --gold-on-light and no --purple-on-dark.
   ========================================================================== */

:root {
	--charcoal: #242529;
	--charcoal-soft: #32333a;
	--purple: #681be3;
	--purple-dark: #560fc4;
	--gold: #e4af49;
	--white: #ffffff;
	--surface: #f4efe4;   /* warmed 10 Nov 2026: paper, not screen grey */
	--line: #e2dccf;
	--ink: #242529;
	--ink-soft: #55575f;
	--danger: #c0271c;
	--danger-bg: #fdf2f1;

	--measure: 65ch;
	--radius: 10px;
	--gap: 1rem;
	--pad-x: clamp(1rem, 4vw, 2.5rem);

	/* A type scale that holds at 390px without a horizontal scrollbar. */
	--step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
	--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
	--step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.46rem);
	--step-2: clamp(1.44rem, 1.26rem + 0.9vw, 1.95rem);
	--step-3: clamp(1.72rem, 1.4rem + 1.6vw, 2.6rem);
	--step-4: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);

	--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ==========================================================================
   Reset, kept small on purpose
   ========================================================================== */

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

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

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--step-0);
	line-height: 1.6;
	color: var(--ink);
	background: var(--white);
	/* Nothing may push the page sideways. Check 16 fails the build if it does. */
	overflow-x: hidden;
}

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

/*
 * Every icon from brcl_icon(). Sized here as well as in the markup, because an
 * inline SVG with a viewBox and no size has no intrinsic width: the rule above
 * then stretches it to fill whatever holds it and gives it a matching square
 * height. On the first preview of this theme a 24px phone icon came out about
 * 170px across and the call button ate a third of the screen.
 */
.icon {
	width: 1.25em; height: 1.25em; flex: none; display: inline-block;
	stroke: currentColor; fill: none; stroke-width: 2; vertical-align: -0.18em;
}

/* The number on the call button, so it is read as a number and not a label. */
.btn--call { flex-wrap: wrap; }
.btn__num { font-weight: 800; letter-spacing: .01em; }

/*
 * The Gas Safe Register logo. A yellow mark, so it needs no colour from us and
 * must not be tinted, stretched or cropped: it is a registered trade mark and
 * it is reproduced exactly. Width and height are on the img itself as well, so
 * nothing jumps while it loads.
 */
.gas-safe {
	width: 72px; height: 72px; flex: none;
	/*
	 * The mark is supplied on a white field and must not be tinted or cut out,
	 * so on the charcoal hero it is given that field deliberately, as a small
	 * white card, rather than being left to look like a square hole.
	 */
	background: #fff; border-radius: 6px; padding: 5px;
}
.gas-safe--footer { width: 56px; height: 56px; padding: 4px; }
.gas-safe--form { width: 60px; height: 60px; padding: 4px; }
.hero__badge { margin: 1.4rem 0 1.1rem; }
/*
 * Below 1100px the trust list is a 2x2, and a left aligned badge sat
 * stranded over it with the words 'Gas Safe registered' directly under
 * the logo. Centring it makes it read as the mark over that block.
 */
@media (max-width: 1099px) { .hero__badge { display: flex; justify-content: center; } }
/*
 * Two Gas Safe marks on one phone screen is one too many, and the sticky bar
 * carries one. So the hero drops its own. Both the bar and the body class are
 * put there by the same script, so with JavaScript off neither happens and the
 * hero keeps its badge: the page is never left without the mark.
 */
@media (max-width: 860px) { body.has-call-bar .hero__badge { display: none; } }
.form-foot { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; }
.form-foot__label { font-weight: 650; }
.footer-legal { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer-legal p { margin: 0; flex: 1 1 18rem; }

a { color: var(--purple); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--purple);
	outline-offset: 2px;
}
/*
 * The ring is purple, which is 7.4:1 on white and 6.4:1 on the paper surface,
 * but only 2.08:1 on charcoal. Charcoal is the header, the hero and the sticky
 * bar, which is where a keyboard user lands first. On those it turns white,
 * which is 15.3:1.
 *
 * currentColor was the obvious one-liner and it is wrong. The ring is drawn
 * OUTSIDE the element, so it sits on whatever is behind it, not on the
 * element's own colour: the form's purple submit button stands on a white
 * card, and a white ring offset beyond it would disappear.
 *
 * The skip link is the same trap and is deliberately NOT in this list. It is
 * a charcoal box, but it sits on the white page, so its ring is drawn on
 * white and stays purple. Measured live: a white ring on it was 1:1.
 */
.section--dark :focus-visible,
.site-header :focus-visible,
.hero :focus-visible,
.band :focus-visible,
.site-footer :focus-visible,
.call-bar :focus-visible {
	outline-color: var(--white);
}

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: var(--step-4); letter-spacing: -0.02em; }
h2 { font-size: var(--step-3); letter-spacing: -0.015em; }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }
p { margin: 0 0 1em; max-width: var(--measure); }

.visually-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--charcoal); color: var(--white); padding: .75rem 1rem;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--charcoal); color: var(--white); }
.section--dark h2, .section--dark h3 { color: var(--white); }

/* A rule above a heading. It carries no text, so it is not an eyebrow.
   Rule 4 bans a small label above a heading, not a divider. */
.rule-above::before {
	content: "";
	display: block;
	width: 44px;
	height: 4px;
	background: var(--gold);
	margin-bottom: 1rem;
	border-radius: 2px;
}
.rule-above--purple::before { background: var(--purple); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	/* 48px tall at the default size. Check 16 wants 44px or more. */
	min-height: 48px;
	padding: .75rem 1.4rem;
	border-radius: var(--radius);
	border: 2px solid transparent;
	font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
	text-align: center;
}
.btn--primary { background: var(--purple); color: var(--white); }
.btn--primary:hover { background: var(--purple-dark); }
/* On charcoal, an outlined button is white. Purple on charcoal is 2.08:1. */
.btn--ghost-dark { background: transparent; color: var(--white); border-color: var(--white); }
.btn--ghost-dark:hover { background: rgba(255, 255, 255, .12); }
.btn--ghost { background: transparent; color: var(--purple); border-color: var(--purple); }
.btn--block { width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header { background: var(--charcoal); color: var(--white); }
.site-header a { color: var(--white); text-decoration: none; }
.header-bar {
	display: flex; align-items: center; gap: var(--gap);
	min-height: 72px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; }
.brand__mark { width: 30px; height: 36px; flex: none; }
.brand__name { font-weight: 800; letter-spacing: .02em; line-height: 1.05; font-size: 1.05rem; }
.brand__name span { display: block; font-weight: 600; font-size: .78rem; color: var(--gold); letter-spacing: .08em; }

.nav-toggle {
	display: inline-flex; align-items: center; gap: .5rem;
	min-height: 48px; padding: .5rem .9rem;
	background: transparent; border: 2px solid rgba(255, 255, 255, .35);
	border-radius: var(--radius); color: var(--white); font: inherit; cursor: pointer;
}
.site-nav ul { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 550; }
.site-nav a:hover { color: var(--gold); }

@media (max-width: 860px) {
	.site-nav { display: none; width: 100%; }
	.site-nav.is-open { display: block; }
	.site-nav ul { flex-direction: column; gap: 0; padding-bottom: .75rem; }
	.site-nav li + li { border-top: 1px solid rgba(255, 255, 255, .14); }
	.site-nav a { min-height: 52px; width: 100%; }
}
/*
 * On a phone the header call button is the icon alone, a 48px square beside
 * the menu. The number is three lines down in the hero and on the bar at the
 * foot; in the header it was taking a third of the width to repeat them.
 * brcl_call_button() carries an aria-label, so hiding the words here does not
 * leave a link that announces as nothing.
 */
@media (max-width: 860px) {
	.header-bar .btn--call {
		width: 48px; min-width: 48px; padding: 0; gap: 0; flex: none;
	}
	.header-bar .btn--call .btn__label,
	.header-bar .btn--call .btn__num { display: none; }
}
@media (min-width: 861px) { .nav-toggle { display: none; } }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { background: var(--charcoal); color: var(--white); }
.hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }
.hero__body { padding-block: clamp(2rem, 5vw, 3.5rem); min-width: 0; }
.hero h1 { color: var(--white); }
.hero h1 em { font-style: normal; color: var(--gold); display: block; }
.hero__sub { font-size: var(--step-1); color: rgba(255, 255, 255, .88); max-width: 34ch; }
.hero__checked { font-size: var(--step--1); color: rgba(255, 255, 255, .72); margin: 0 0 1rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.75rem; }
.hero__media { position: relative; min-width: 0; }
.hero__media img { width: 100%; border-radius: var(--radius); }
.hero__caption {
	position: absolute; right: .5rem; bottom: .5rem;
	background: rgba(36, 37, 41, .78); color: var(--white);
	font-size: .72rem; padding: .2rem .45rem; border-radius: 4px;
}

/*
 * TWO OR FOUR, NEVER THREE. auto-fit picked three columns in the middle of the
 * range and left the fourth item alone on a line. Four items, fixed counts, so
 * it is 2x2 on anything narrow and 1x4 once there is room, and never ragged.
 */
.trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.25rem; margin: 0; padding: 0 0 2rem; list-style: none; align-items: start; }
@media (min-width: 1100px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust li { text-align: center; font-size: var(--step--1); color: rgba(255, 255, 255, .9); }
.trust svg { display: block; width: 26px; height: 26px; margin: 0 auto .4rem; stroke: var(--gold); fill: none; stroke-width: 1.7; }

/* ==========================================================================
   Make strip
   ========================================================================== */

/*
 * The makes are tiles, not a line of words.
 *
 * As a wrapping row of text links they read as a sentence rather than six
 * things to press, and six in a flex row fits five on a phone and drops the
 * sixth onto a line of its own. A tile has an edge, a mark and a tap target,
 * and 6 divides into 3 columns and into 6.
 */
.makes { border-bottom: 1px solid var(--line); background: var(--surface); }
.makes__grid {
	list-style: none; margin: 0; padding: 1rem 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
}
@media (min-width: 720px) { .makes__grid { grid-template-columns: repeat(6, 1fr); } }
.makes__grid a {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: .4rem; min-height: 76px; padding: .7rem .4rem; text-align: center;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
	color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.2;
}
.makes__grid .icon {
	display: block; width: 26px; height: 26px;
	stroke: var(--gold); stroke-width: 1.7; fill: none;
}
.makes__grid a:hover { border-color: var(--purple); color: var(--purple); }
.makes__grid a:hover .icon { stroke: var(--purple); }
.makes__all a { border-color: var(--purple); color: var(--purple); }
.makes__all .icon { stroke: var(--purple); }

/* ==========================================================================
   The fault table. It is the main content on the site and must read at 390px.
   ========================================================================== */

.tool__head { display: grid; gap: 1rem; align-items: end; margin-bottom: 1.25rem; }
@media (min-width: 900px) { .tool__head { grid-template-columns: 1fr auto auto; } }

.field { display: grid; gap: .35rem; }
.field label { font-size: var(--step--1); font-weight: 650; }
.field input, .field select, .field textarea {
	font: inherit; min-height: 48px; padding: .6rem .75rem;
	border: 2px solid var(--line); border-radius: var(--radius);
	background: var(--white); color: var(--ink); width: 100%;
}
.field textarea { min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--purple); }

.faults { width: 100%; border-collapse: collapse; }
.faults th, .faults td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.faults thead th { background: var(--surface); font-size: var(--step--1); }
.faults code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .95em; }
.faults a { font-weight: 600; }

/* At 390px a four column table cannot be read, so each row becomes a card
   with its column name beside the value. No sideways scroll either way. */
@media (max-width: 760px) {
	.faults thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.faults tr { display: block; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .75rem; padding: .25rem .25rem .5rem; }
	.faults td { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; border: 0; padding: .45rem .6rem; }
	.faults td::before { content: attr(data-label); font-weight: 700; font-size: var(--step--1); color: var(--ink-soft); }
}

.table-notes { display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-size: var(--step--1); color: var(--ink-soft); margin-top: .75rem; }
.table-notes p { margin: 0; }

/* ==========================================================================
   Gas emergency box. On every template.
   ========================================================================== */

.gas-emergency {
	display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
	border: 2px solid var(--danger); background: var(--danger-bg);
	border-radius: var(--radius); padding: .85rem 1rem; margin: 1.5rem 0;
	color: #7a1a12;
}
.gas-emergency strong { color: var(--danger); }
.gas-emergency svg { width: 22px; height: 22px; flex: none; stroke: var(--danger); fill: none; stroke-width: 2; }
.gas-emergency a { color: #7a1a12; font-weight: 800; }

/* ==========================================================================
   Bands and cards
   ========================================================================== */

.band { background: var(--charcoal); color: var(--white); }
.band__inner { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.band h2 { font-size: var(--step-2); margin: 0 0 .25rem; }
.band p { margin: 0; color: rgba(255, 255, 255, .85); }

.cards { display: grid; gap: 1.1rem; }
.cards--2 { grid-template-columns: 1fr; }
.cards--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
	.cards--2 { grid-template-columns: repeat(2, 1fr); }
	.cards--3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
	background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden; display: flex; min-width: 0;
}
.card--row { flex-direction: row; }
.card--stack { flex-direction: column; }
.card__media { flex: none; width: 38%; background: var(--surface); }
/*
 * A stacked card's figure is a band across the full width at a fixed 8:5, which
 * is the ratio the illustrations are drawn at, so nothing is cropped and every
 * card in a row starts its text on the same line. The old side strip came out
 * around 120px wide on a desktop, and no drawing survives that.
 */
.card--stack .card__media { width: 100%; aspect-ratio: 8 / 5; border-bottom: 1px solid var(--line); }
.card--stack .card__body { flex: 1 1 auto; display: flex; flex-direction: column; }
.card--stack .card__body p { flex: 1 1 auto; }
.card__media img, .card__media svg { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1rem 1.1rem; min-width: 0; }
.card h3 { margin-bottom: .35rem; }
.card p { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: .6rem; }
.card a { font-weight: 650; text-decoration: none; }
.card a::after { content: " \2192"; }
/*
 * The card's link is the tap target on a phone, and inline text is 26px
 * tall. Check 16 wants 44px, so it gets padding rather than a bigger
 * font. The p above gives up its bottom margin: this padding is the gap.
 */
.card__body > a { display: inline-block; padding-block: .6rem; }
.card--stack .card__body > p { margin-bottom: 0; }

/* ==========================================================================
   The column index. Used for the 241 areas, the 14 makes and Nearby.

   A column list is the one layout that cannot leave an orphan: the browser
   divides the items into whatever number of columns fits and balances them.
   That is why both listings use it rather than a card grid with a fixed
   column count that only divides evenly for some totals.
   ========================================================================== */

.az { list-style: none; margin: 0 0 2rem; padding: 0; columns: 16rem; column-gap: 2rem; }
.az--tight { columns: 11rem; margin-bottom: 1.25rem; }
.az li { break-inside: avoid; border-bottom: 1px solid var(--line); }
.az a {
	display: block; padding-block: .7rem; line-height: 1.4;
	text-decoration: none; color: var(--ink); font-weight: 550;
}
.az a:hover { color: var(--purple); }

.az-letter {
	font-size: var(--step-1); margin: 2rem 0 .75rem; padding-bottom: .4rem;
	letter-spacing: .1em; border-bottom: 3px solid var(--gold);
}

/* ==========================================================================
   Steps and the form
   ========================================================================== */

.next { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 960px) { .next { grid-template-columns: 1fr 1fr; } }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding-block: .9rem; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; }
.steps b { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--charcoal); color: var(--white); font-size: var(--step--1); }
.steps p { margin: .2rem 0 0; font-size: var(--step--1); color: var(--ink-soft); }

.form-card { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.75rem); }
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 620px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: var(--step--1); color: var(--ink-soft); }
.hp { position: absolute; left: -9999px; }

.brcl-ok, .brcl-err { border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem; }
.brcl-ok { background: #eef8f0; border: 2px solid #2e7d4f; color: #1d5133; }
.brcl-err { background: var(--danger-bg); border: 2px solid var(--danger); color: #7a1a12; }

/* ==========================================================================
   FAQs. details, so the answer is in the raw HTML for check 8.
   ========================================================================== */

.faqs { display: grid; gap: .75rem; }
@media (min-width: 820px) { .faqs { grid-template-columns: 1fr 1fr; align-items: start; } }
.faq { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.faq summary {
	cursor: pointer; list-style: none; padding: .9rem 1rem; font-weight: 650;
	display: flex; justify-content: space-between; gap: 1rem; align-items: center;
	min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "\25be"; color: var(--ink-soft); }
.faq[open] summary::after { content: "\25b4"; }
.faq__a { padding: 0 1rem 1rem; }
.faq__a p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Breadcrumbs, footer, sticky call bar
   ========================================================================== */

.crumbs { font-size: var(--step--1); padding-block: .9rem; color: var(--ink-soft); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: .35rem; color: var(--line); }

.site-footer { background: var(--charcoal); color: rgba(255, 255, 255, .82); padding-block: 2rem; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-bar { display: flex; gap: 1.25rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.footer-nav { display: flex; gap: 1.1rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.footer-nav a { display: inline-flex; min-height: 44px; align-items: center; }
.footer-legal { font-size: var(--step--1); margin-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 1rem; }

/*
 * The sticky call bar. Phones only, and only once a number exists.
 *
 * Two routes, not one. It used to be a single strip saying "Call about your
 * boiler", which served the person ready to ring and nobody else. On a phone
 * this is the only thing always on the screen, so it carries both.
 *
 * The Gas Safe mark sits above the bar, not in it, so the bar stays two full
 * tap targets and the mark is still on the strip that never scrolls away.
 */
.call-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	background: var(--charcoal); color: var(--white);
	border-top: 1px solid rgba(255, 255, 255, .16);
	padding: .55rem 0;
	padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
	display: none;
}
.call-bar__row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.call-bar__btn {
	min-height: 50px; padding: .55rem .5rem; gap: .4rem;
	font-size: var(--step--1); font-weight: 700;
}
.call-bar__btn strong { font-weight: 800; letter-spacing: .01em; }
.call-bar__badge {
	position: absolute; bottom: calc(100% + .55rem); right: var(--pad-x);
	border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}
@media (max-width: 860px) { .call-bar.is-on { display: block; } body.has-call-bar { padding-bottom: 86px; } }

/* ==========================================================================
   Consent. Decline is the same size and weight as accept.
   ========================================================================== */

.consent {
	position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60;
	background: var(--white); color: var(--ink);
	border: 2px solid var(--charcoal); border-radius: var(--radius);
	padding: 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
	max-width: 640px; margin-inline: auto;
}
.consent p { font-size: var(--step--1); margin-bottom: .75rem; }
.consent__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.consent__actions .btn { flex: 1 1 auto; min-width: 9rem; }

/* ==========================================================================
   Prose, for ordinary pages
   ========================================================================== */

.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { max-width: var(--measure); padding-left: 1.2rem; }
.prose li { margin-bottom: .4em; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; }
.prose th, .prose td { border: 1px solid var(--line); padding: .6rem .7rem; text-align: left; }

@media print {
	.call-bar, .consent, .site-nav, .nav-toggle { display: none !important; }
}