/* ==========================================================================
   Al Fajar — Company › About pages (template-parts/about/)
   Ported from "WHO-WE-ARE.html" (its inner-page and About sub-theme blocks).
   Changes from the mockup: gold TEXT uses --accent-text / --on-plate-accent
   (the mockup's --gold-dk fails AA as text), the fact panel reads the plate
   variables so it works on the light hero and on the dark "run" plate,
   physical left/right → logical properties, the inline style="" attributes
   moved here as classes, and the pull quote is the editor's blockquote.
   ========================================================================== */

/* ---------- inner-page hero ---------- */
.pagehero { --on-plate-accent: var(--accent-text); }
.pagehero .wrap { padding-block: clamp(2rem, 1.6rem + 1.8vw, 3.25rem); align-items: center; }
.pagehero h1 { font-size: clamp(2.3rem, 1.6rem + 3vw, 3.9rem); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; color: var(--on-plate-muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--on-plate-accent); }
.crumbs li:not(:last-child)::after { content: "/"; margin-inline-start: .5rem; opacity: .55; }
.crumbs [aria-current="page"] { color: var(--on-plate-accent); }

.about-tag {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: 1.15rem;
	padding: .32rem .75rem;
	border: 1px solid var(--accent-line);
	border-radius: var(--r-sm);
	background: rgba(206, 164, 73, .10);
	color: var(--on-plate-accent);
	font-family: var(--mono);
	font-size: .64rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.about-tag b { color: var(--on-plate); font-weight: var(--fw-semibold); letter-spacing: .12em; }
.about-tag i { font-style: normal; opacity: .5; }

/* ---------- fact panel (hero, and the escalation panel on the plate) ---------- */
.facts {
	overflow: hidden;
	border: 1px solid var(--plate-line);
	border-radius: var(--r-xl);
	background: var(--plate-2);
	box-shadow: var(--shadow-lg);
}
.facts-hd { padding: .9rem 1.25rem; border-bottom: 1px solid var(--plate-line-soft); background: var(--plate-3); color: var(--on-plate-accent); }
.facts dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .05rem 1.25rem; margin: 0; padding: .35rem .5rem; }
.facts dt {
	align-self: start;
	padding: .7rem .78rem;
	color: var(--on-plate-muted);
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
}
.facts dd { margin: 0; padding: .62rem .78rem; color: var(--on-plate); font-size: .94rem; font-weight: var(--fw-semibold); }
.facts dt:not(:first-of-type),
.facts dt:not(:first-of-type) + dd { border-top: 1px solid var(--plate-line-soft); }
.facts-ft {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--plate-line-soft);
	background: var(--plate-3);
}
.facts-ft p { color: var(--on-plate-muted); font-size: .82rem; }
.facts-after { margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }

@media (max-width: 480px) {
	.facts dl { grid-template-columns: 1fr; }
	.facts dt { padding-block-end: 0; white-space: normal; }
	.facts dt:not(:first-of-type) + dd { border-top: 0; }
}

/* ---------- placeholder chip: unconfirmed figures stay visibly marked ---------- */
.ph {
	display: inline-flex;
	align-items: center;
	margin-inline-start: .4rem;
	padding: .08rem .4rem;
	border: 1px dashed rgba(206, 164, 73, .6);
	border-radius: var(--r-sm);
	color: var(--accent-text);
	font-family: var(--mono);
	font-size: .55rem;
	font-weight: var(--fw-medium);
	letter-spacing: .12em;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}
.on-plate .ph { color: var(--on-plate-accent); border-color: rgba(206, 164, 73, .5); }

/* ---------- "On this page" jump bar ---------- */
.abjump {
	position: sticky;
	top: calc(82px + var(--wp-admin--admin-bar--height, 0px));
	z-index: 70;
	border-bottom: 1px solid var(--border);
	background: var(--surface);
}
.abjump .wrap { display: flex; gap: .35rem; overflow-x: auto; padding-block: .65rem; -webkit-overflow-scrolling: touch; }
.abjump a {
	flex: none;
	padding: .5rem .9rem;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--text-mid);
	font-size: .86rem;
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: background-color .16s, color .16s, border-color .16s;
}
.abjump a:hover { border-color: var(--accent-line); background: var(--accent-subtle); color: var(--accent-text); }

/* Jump targets clear the sticky masthead and the bar itself. */
main [id] { scroll-margin-top: calc(142px + var(--wp-admin--admin-bar--height, 0px)); }

/* Below the desktop breakpoint the masthead height changes, so the bar scrolls with the page. */
@media (max-width: 1080px) {
	.abjump { position: static; }
	main [id] { scroll-margin-top: 92px; }
}

/* ---------- note box ---------- */
.note {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .9rem;
	align-items: start;
	margin-top: 1.5rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--accent-line);
	border-radius: var(--r-lg);
	background: var(--accent-subtle);
}
.note svg { margin-top: .15rem; color: var(--accent-text); }
.note b { display: block; margin-bottom: .2rem; font-family: var(--display); font-size: 1.05rem; font-weight: var(--fw-extrabold); }
.note p { color: var(--text-mid); font-size: .92rem; line-height: var(--lh-text); }

/* ---------- the story: long-form column with a standing aside ---------- */
.story { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 1rem + 2.4vw, 3.25rem); align-items: start; }
@media (max-width: 960px) {
	.story { grid-template-columns: 1fr; }
}

.prose { max-width: 64ch; }
.prose p { color: var(--text-mid); font-size: 1.02rem; line-height: 1.78; }
.prose p + p { margin-top: 1.05rem; }
.prose strong { color: var(--text); font-weight: var(--fw-semibold); }
.prose h3 { margin-top: 2rem; margin-bottom: .7rem; font-size: 1.25rem; }
.prose blockquote,
.prose .pull { margin: 1.6rem 0; padding-block: .15rem; padding-inline: 1.35rem 0; border-inline-start: 3px solid var(--accent); }
.prose blockquote p,
.prose .pull {
	color: var(--text);
	font-family: var(--display);
	font-size: clamp(1.2rem, 1.05rem + .55vw, 1.55rem);
	font-weight: var(--fw-extrabold);
	letter-spacing: -.02em;
	line-height: 1.32;
	text-wrap: balance;
}

.story-aside { display: flex; flex-direction: column; gap: 1rem; }
.story-aside .aside-card + .aside-card { margin-top: 0; }
.story-aside .slot,
.serves-photo { aspect-ratio: 4 / 3; }
@media (min-width: 1081px) {
	.story-aside { position: sticky; top: calc(150px + var(--wp-admin--admin-bar--height, 0px)); }
}

/* ---------- milestones ---------- */
.era { display: grid; gap: 0; }
.era li {
	display: grid;
	grid-template-columns: clamp(88px, 11vw, 140px) minmax(0, 1fr);
	gap: .35rem clamp(1rem, 2vw, 2.25rem);
	padding: 1.45rem 0;
	border-top: 1px solid var(--border);
}
.era li:first-child { padding-top: 0; border-top: 0; }
.era .yr { color: var(--accent-text); font-family: var(--display); font-size: clamp(1.35rem, 1.15rem + .7vw, 1.8rem); font-weight: var(--fw-black); letter-spacing: -.025em; line-height: 1.05; }
.era .yr small {
	display: block;
	margin-top: .4rem;
	color: var(--text-muted);
	font-family: var(--mono);
	font-size: .57rem;
	font-weight: var(--fw-medium);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.era h3 { margin-bottom: .4rem; font-size: 1.14rem; }
.era p:not(.yr) { max-width: 64ch; color: var(--text-muted); font-size: .93rem; line-height: 1.62; }
@media (max-width: 620px) {
	.era li { grid-template-columns: 1fr; }
}

/* ---------- what we stand for ---------- */
.vals,
.desks,
.regs,
.serves {
	display: grid;
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--border);
}

.vals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vals li { display: flex; flex-direction: column; gap: .55rem; padding: clamp(1.3rem, 1rem + 1vw, 1.75rem); background: var(--surface); }
.vals .n { color: var(--accent-text); font-family: var(--mono); font-size: .6rem; font-weight: var(--fw-semibold); letter-spacing: .16em; text-transform: uppercase; }
.vals b { font-family: var(--display); font-size: 1.14rem; font-weight: var(--fw-extrabold); letter-spacing: -.018em; line-height: 1.22; }
.vals p { color: var(--text-muted); font-size: .92rem; line-height: 1.62; }
.vals .rules { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--border); font-size: .85rem; line-height: 1.55; }
.vals .rules b {
	display: block;
	margin-bottom: .3rem;
	color: var(--text-mid);
	font-family: var(--mono);
	font-size: .57rem;
	font-weight: var(--fw-semibold);
	letter-spacing: .13em;
	text-transform: uppercase;
}

/* ---------- how the company is run: the desks (on the plate) ---------- */
.desks { grid-template-columns: repeat(3, minmax(0, 1fr)); border-color: var(--plate-line-soft); background: var(--plate-line-soft); }
.desks li { display: flex; flex-direction: column; gap: .55rem; padding: 1.35rem 1.35rem 1.5rem; background: var(--plate-3); background-image: linear-gradient(rgba(255, 255, 255, .035), rgba(255, 255, 255, .035)); }
.desks .fn { color: var(--on-plate-accent); font-family: var(--mono); font-size: .6rem; font-weight: var(--fw-semibold); letter-spacing: .14em; text-transform: uppercase; }
.desks b { color: var(--on-plate); font-family: var(--display); font-size: 1.12rem; font-weight: var(--fw-extrabold); letter-spacing: -.018em; line-height: var(--lh-snug); }
.desks p { color: var(--on-plate-mid); font-size: .89rem; line-height: 1.6; }
.desks .hrs {
	margin-top: auto;
	padding-top: .9rem;
	border-top: 1px solid var(--plate-line-soft);
	color: var(--on-plate-muted);
	font-family: var(--mono);
	font-size: .6rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

@media (max-width: 960px) {
	.vals,
	.desks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.vals,
	.desks { grid-template-columns: 1fr; }
}

/* ---------- licensing: what is held, and the registrations ---------- */
.incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem 2rem; }
.incl li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .8rem; padding: .85rem 0; border-bottom: 1px solid var(--border); }
.incl svg { grid-row: span 2; margin-top: .25rem; color: var(--accent-text); }
.incl b { font-size: .98rem; font-weight: var(--fw-semibold); }
.incl p { color: var(--text-muted); font-size: .89rem; line-height: 1.55; }
@media (max-width: 760px) {
	.incl { grid-template-columns: 1fr; }
}

.regs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.5rem 0 0; }
.regs div { padding: 1.15rem 1.3rem; background: var(--surface); }
.regs dt { color: var(--text-muted); font-family: var(--mono); font-size: .6rem; font-weight: var(--fw-semibold); letter-spacing: .13em; text-transform: uppercase; }
.regs dd { margin: .45rem 0 0; color: var(--text); font-family: var(--mono); font-size: .95rem; font-weight: var(--fw-semibold); letter-spacing: .02em; overflow-wrap: anywhere; }
.regs dd span:not(.ph) {
	display: block;
	margin-top: .3rem;
	color: var(--text-muted);
	font-family: var(--body);
	font-size: .83rem;
	font-weight: var(--fw-regular);
	letter-spacing: 0;
	line-height: 1.5;
}
@media (max-width: 860px) {
	.regs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.regs { grid-template-columns: 1fr; }
}

/* ---------- who we serve ---------- */
.serves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.serves li { display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem 1.35rem; background: var(--surface); }
.serves b { font-family: var(--display); font-size: 1.08rem; font-weight: var(--fw-extrabold); letter-spacing: -.015em; line-height: var(--lh-snug); }
.serves p { color: var(--text-muted); font-size: .89rem; line-height: 1.58; }
.serves .who { color: var(--accent-text); font-family: var(--mono); font-size: .58rem; font-weight: var(--fw-semibold); letter-spacing: .13em; text-transform: uppercase; }
@media (max-width: 700px) {
	.serves { grid-template-columns: 1fr; }
}

/* ---------- by the numbers: *unconfirmed* digits in gold ---------- */
.stats b em { color: var(--accent-text); font-style: normal; }

/* ==========================================================================
   OUR STORY — narrative additions: chapters on a year rail, turning points,
   lessons on the plate, the roads, and a captioned photo archive.
   ========================================================================== */

/* Extra jump-bar link to a sibling page, and buttons inside aside cards. */
.abjump .abjump-out { margin-inline-start: auto; color: var(--accent-text); }
.aside-card .aside-btn { align-self: flex-start; }

/* ---------- chapters ---------- */
.chapters { display: grid; gap: 0; }
.chapter {
	display: grid;
	grid-template-columns: clamp(110px, 13vw, 180px) minmax(0, 1fr);
	gap: .5rem clamp(1.25rem, 2.5vw, 3rem);
	padding: clamp(2rem, 1.5rem + 1.6vw, 3.25rem) 0;
	border-top: 1px solid var(--border);
}
.chapters .chapter:first-child { padding-top: 0; border-top: 0; }
.chapter-rail { display: flex; flex-direction: column; gap: .55rem; }
.chapter-no { color: var(--text-muted); font-family: var(--mono); font-size: .6rem; font-weight: var(--fw-semibold); letter-spacing: .18em; text-transform: uppercase; }
.chapter-yr { color: var(--accent-text); font-family: var(--display); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem); font-weight: var(--fw-black); letter-spacing: -.03em; line-height: .95; }
.chapter-rail .tagline { color: var(--text-muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .13em; line-height: 1.6; text-transform: uppercase; }
.chapter-body h3 { margin-bottom: .9rem; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.75rem); }
.chapter-body .prose { max-width: 66ch; }
.chapter-body .slot { max-width: 720px; margin-top: 1.6rem; aspect-ratio: 16 / 9; }
@media (min-width: 1081px) {
	.chapter-rail { position: sticky; top: calc(152px + var(--wp-admin--admin-bar--height, 0px)); align-self: start; }
}
@media (max-width: 760px) {
	.chapter { grid-template-columns: 1fr; gap: 1rem; }
	.chapter-rail { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .9rem; }
	.chapter-rail .tagline { width: 100%; }
}

/* ---------- turning points: the decision, its cost, its effect ---------- */
.turns,
.roads {
	display: grid;
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--border);
}
.turns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.turns > li { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.35rem, 1.1rem + .8vw, 1.85rem); background: var(--surface); }
.turns .when { color: var(--accent-text); font-family: var(--mono); font-size: .6rem; font-weight: var(--fw-semibold); letter-spacing: .14em; text-transform: uppercase; }
.turns h3 { font-size: 1.2rem; line-height: 1.25; }
.turns dl { display: grid; gap: .85rem; margin: .35rem 0 0; }
.turns dt { color: var(--text-muted); font-family: var(--mono); font-size: .57rem; font-weight: var(--fw-semibold); letter-spacing: .12em; text-transform: uppercase; }
.turns dd { margin: .22rem 0 0; color: var(--text-mid); font-size: .92rem; line-height: 1.6; }
.turns dd.cost { color: var(--text-muted); }
@media (max-width: 820px) {
	.turns { grid-template-columns: 1fr; }
}

/* ---------- what the years taught, on the plate ---------- */
.lessons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem); }
.lessons li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--plate-line-soft); }
.lessons .n { grid-row: span 2; padding-top: .3rem; color: var(--on-plate-accent); font-family: var(--mono); font-size: .72rem; font-weight: var(--fw-semibold); letter-spacing: .1em; }
.lessons b { color: var(--on-plate); font-family: var(--display); font-size: 1.08rem; font-weight: var(--fw-extrabold); letter-spacing: -.015em; line-height: var(--lh-snug); }
.lessons p { color: var(--on-plate-mid); font-size: .9rem; line-height: 1.6; }
@media (max-width: 820px) {
	.lessons { grid-template-columns: 1fr; }
}

/* ---------- the roads that made us ---------- */
.roads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.roads li { display: flex; flex-direction: column; gap: .45rem; padding: 1.2rem 1.3rem 1.35rem; background: var(--surface); }
.roads .leg { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: 1rem; font-weight: var(--fw-semibold); }
.roads .leg i { color: var(--accent-text); font-style: normal; }
.roads .since { color: var(--text-muted); font-family: var(--mono); font-size: .57rem; font-weight: var(--fw-semibold); letter-spacing: .12em; text-transform: uppercase; }
.roads p { color: var(--text-muted); font-size: .88rem; line-height: 1.58; }
.roads a { margin-top: auto; padding-top: .6rem; color: var(--accent-text); font-size: .86rem; font-weight: var(--fw-semibold); text-decoration: none; }
.roads a:hover { text-decoration: underline; }
@media (max-width: 900px) {
	.roads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.roads { grid-template-columns: 1fr; }
}

/* ---------- archive: image slots with captions ---------- */
.archive { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, .7rem + .6vw, 1.25rem); }
.archive figure { display: flex; flex-direction: column; gap: .7rem; margin: 0; }
.archive .slot { aspect-ratio: 4 / 3; }
.archive figcaption { color: var(--text-muted); font-size: .86rem; line-height: 1.55; }
.archive figcaption b { display: block; margin-bottom: .15rem; color: var(--text); font-family: var(--display); font-size: 1rem; font-weight: var(--fw-extrabold); letter-spacing: -.012em; }
@media (max-width: 900px) {
	.archive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.archive { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FAQ HUB (page-templates/faq.php) — search, topic filters, answer groups.
   From FAQ.html: answers that do not match are removed, not dimmed.
   ========================================================================== */

/* hero board: questions wrap rather than truncate (the title is the content) */
.about-hero .board .d-route span { overflow: visible; text-overflow: clip; white-space: normal; }
.about-hero .board .d-row { align-items: start; }

/* sticky under the masthead and the topic bar */
.faq-tools {
	position: sticky;
	top: calc(140px + var(--wp-admin--admin-bar--height, 0px));
	z-index: 60;
	margin-bottom: 1.25rem;
	padding-block: .9rem;
	border-bottom: 1px solid var(--border);
	background: var(--page);
}
.faq-tools[hidden] { display: none; }
@media (max-width: 1080px) {
	.faq-tools { position: static; }
}

.faq-search { position: relative; display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.faq-search svg { position: absolute; inset-inline-start: 1rem; color: var(--text-muted); pointer-events: none; }
.faq-search input {
	width: 100%;
	min-height: 54px;
	padding-block: .85rem;
	padding-inline: 3rem 1rem;
	border: 1px solid var(--field-border);
	border-radius: var(--r);
	background: var(--field);
	color: var(--text);
	font-family: var(--body);
	font-size: 1rem;
	transition: border-color .16s, box-shadow .16s;
}
.faq-search input:focus-visible { border-color: var(--accent); outline: 2px solid var(--focus); outline-offset: 2px; }
.faq-search button { flex: none; }

.faq-filters { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; -webkit-overflow-scrolling: touch; }
.faq-filters button {
	flex: none;
	padding: .5rem .9rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text-mid);
	font-family: var(--body);
	font-size: .85rem;
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition: background-color .16s, color .16s, border-color .16s;
	appearance: none;
}
.faq-filters button:hover { border-color: var(--accent-line); color: var(--accent-text); }
.faq-filters button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #FFFFFF; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .faq-filters button[aria-pressed="true"] { border-color: var(--gold); background: var(--gold); color: #150F02; }
}
:root[data-theme="dark"] .faq-filters button[aria-pressed="true"] { border-color: var(--gold); background: var(--gold); color: #150F02; }

.faq-count { margin-top: .75rem; color: var(--text-muted); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; }
.faq-count b { color: var(--accent-text); font-weight: var(--fw-semibold); }

/* ---------- the answer groups ---------- */
.faq-group { padding-block: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) 0; }
.faq-group[hidden],
.faqlist details[hidden] { display: none !important; }
.faq-group .ghd {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .4rem;
	padding-bottom: .9rem;
	border-bottom: 2px solid var(--accent);
}
.faq-group .ghd h3 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.9rem); }
.faq-group .ghd p { max-width: 58ch; margin-top: .35rem; color: var(--text-muted); font-size: .9rem; }
.faq-group .gcount { color: var(--text-muted); font-family: var(--mono); font-size: .6rem; font-weight: var(--fw-semibold); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }

.faqlist details { border-bottom: 1px solid var(--border); }
.faqlist summary {
	position: relative;
	padding-block: 1.05rem;
	padding-inline: 0 2.25rem;
	font-size: 1rem;
	font-weight: var(--fw-semibold);
	line-height: 1.5;
	list-style: none;
	cursor: pointer;
}
.faqlist summary::-webkit-details-marker { display: none; }
.faqlist summary:hover { color: var(--accent-text); }
.faqlist summary::after { content: "+"; position: absolute; top: .95rem; inset-inline-end: 0; color: var(--accent-text); font-family: var(--mono); font-size: 1.15rem; line-height: 1; }
.faqlist details[open] summary::after { content: "\2013"; }
.faqlist .faq-a { padding-block-end: 1.3rem; padding-inline-end: 2.25rem; }
.faqlist .faq-a p { max-width: 76ch; color: var(--text-muted); font-size: .95rem; line-height: 1.7; }
.faqlist .faq-a p + p { margin-top: .75rem; }

.faq-empty { padding: 2.5rem 0; color: var(--text-muted); text-align: center; }
.faq-empty b { display: block; margin-bottom: .5rem; color: var(--text); font-family: var(--display); font-size: 1.3rem; font-weight: var(--fw-extrabold); }
.faq-empty .faq-empty-cta { margin-top: 1rem; }

/* ==========================================================================
   CONTACT (page-templates/contact.php) — channels, desks, response times,
   offices, the "travelling now" steps and the map. From CONTACT-US.html.
   ========================================================================== */

/* ---------- reach us now: three large touch targets ---------- */
.channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, .7rem + .6vw, 1.25rem); }
.channel {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: clamp(1.35rem, 1.1rem + .9vw, 1.85rem);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--surface);
	color: inherit;
	text-decoration: none;
	transition: border-color .18s, transform .18s, box-shadow .18s;
}
.channel:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.channel .ico {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: .35rem;
	border: 1px solid var(--accent-line);
	border-radius: var(--r);
	background: var(--accent-subtle);
	color: var(--accent-text);
}
.channel-wa .ico { border-color: rgba(37, 211, 102, .34); background: rgba(37, 211, 102, .10); color: var(--success-text); }
.channel .lbl { color: var(--text-muted); font-family: var(--mono); font-size: .6rem; font-weight: var(--fw-semibold); letter-spacing: .14em; text-transform: uppercase; }
.channel b { font-family: var(--display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); font-weight: var(--fw-extrabold); letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.channel p { color: var(--text-muted); font-size: .89rem; line-height: 1.55; }
.channel .when { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--border); color: var(--text-muted); font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
	.channel:hover { transform: none; }
}
@media (max-width: 820px) {
	.channels { grid-template-columns: 1fr; }
}

/* ---------- the right desk: register cards with a status chip ---------- */
.register {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--border);
}
.register > li { display: flex; flex-direction: column; gap: .6rem; padding: 1.3rem 1.35rem 1.45rem; background: var(--surface); }
.register .rh { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.register h3 { font-size: 1.08rem; line-height: 1.25; }
.register p { color: var(--text-muted); font-size: .89rem; line-height: 1.58; }
.register dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .9rem; margin: auto 0 0; padding-top: .9rem; border-top: 1px solid var(--border); }
.register dt { padding-top: .12rem; color: var(--text-muted); font-family: var(--mono); font-size: .57rem; font-weight: var(--fw-semibold); letter-spacing: .12em; text-transform: uppercase; }
.register dd { margin: 0; color: var(--text-mid); font-size: .86rem; line-height: 1.45; }
@media (max-width: 1000px) {
	.register { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.register { grid-template-columns: 1fr; }
}

/* status chip: green only where the desk is open now (status), gold for office hours */
.status {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: .38rem;
	padding: .24rem .55rem;
	border: 1px solid rgba(46, 125, 91, .32);
	border-radius: 999px;
	background: var(--success-subtle);
	color: var(--success-text);
	font-family: var(--mono);
	font-size: .56rem;
	font-weight: var(--fw-semibold);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.status::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-req { border-color: var(--accent-line); background: var(--accent-subtle); color: var(--accent-text); }

/* ---------- response times table ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tbl caption { padding-bottom: .85rem; color: var(--text-muted); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .14em; text-align: start; text-transform: uppercase; }
.tbl th,
.tbl td { padding: .78rem .7rem; border-bottom: 1px solid var(--border); text-align: start; }
.tbl thead th { color: var(--accent-text); font-family: var(--mono); font-size: .68rem; font-weight: var(--fw-semibold); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.tbl tbody th { color: var(--text); font-family: var(--body); font-size: inherit; font-weight: var(--fw-semibold); letter-spacing: 0; text-transform: none; }
.tbl td { color: var(--text-mid); }
.tbl .num { font-family: var(--mono); font-size: .85rem; white-space: nowrap; }
.tscroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- offices ---------- */
.offices {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--border);
}
.offices li { display: flex; flex-direction: column; gap: .35rem; padding: 1.15rem 1.25rem 1.3rem; background: var(--surface); }
.offices li.head { background: var(--accent-subtle); }
.offices .role { color: var(--text-muted); font-family: var(--mono); font-size: .56rem; font-weight: var(--fw-semibold); letter-spacing: .13em; text-transform: uppercase; }
.offices li.head .role { color: var(--accent-text); }
.offices b { font-family: var(--display); font-size: 1.12rem; font-weight: var(--fw-extrabold); letter-spacing: -.018em; }
.offices .ar { color: var(--text-muted); font-family: var(--display); font-size: .95rem; line-height: var(--lh-arabic); }
.offices p { color: var(--text-muted); font-size: .85rem; line-height: 1.55; }
@media (max-width: 980px) {
	.offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.offices { grid-template-columns: 1fr; }
}

/* ---------- travelling now: steps on a timeline ---------- */
.journey { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.journey::before {
	content: "";
	position: absolute;
	top: 11px;
	inset-inline: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(206, 164, 73, .15), rgba(206, 164, 73, .7) 12%, rgba(206, 164, 73, .7) 88%, rgba(206, 164, 73, .15));
}
.journey li { position: relative; padding-inline-end: 1rem; }
.journey li::before {
	content: "";
	position: relative;
	top: 6px;
	display: block;
	width: 11px;
	height: 11px;
	margin-bottom: 1.1rem;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 4px var(--page);
}
.journey .mono { display: block; margin-bottom: .45rem; color: var(--accent-text); }
.journey h3 { margin-bottom: .35rem; font-size: 1rem; }
.journey p { color: var(--text-muted); font-size: .86rem; line-height: 1.55; }
.on-plate .journey li::before { box-shadow: 0 0 0 4px var(--plate-3); }
.on-plate .journey .mono { color: var(--on-plate-accent); }
.on-plate .journey h3 { color: var(--on-plate); }
.on-plate .journey p { color: var(--on-plate-mid); }
@media (max-width: 900px) {
	.journey { grid-template-columns: 1fr; }
	.journey::before { top: 0; bottom: 0; inset-inline: 5px auto; width: 1px; height: auto; background: linear-gradient(180deg, rgba(206, 164, 73, .7), rgba(206, 164, 73, .15)); }
	.journey li { padding-block-end: 1.4rem; padding-inline: 1.75rem 0; }
	.journey li::before { position: absolute; top: 4px; inset-inline-start: 0; margin: 0; }
}

/* ---------- map ---------- */
.mapslot { aspect-ratio: 21 / 9; }
.slot-map { padding: 0; }
.slot-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.aside-card .addr { color: var(--text-mid); }
@media (max-width: 700px) {
	.mapslot { aspect-ratio: 4 / 3; }
}

/* ---------- checked-on-a-schedule list, on the dark plate (licensing: insurance) ---------- */
.schedule {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--plate-line-soft);
	border-radius: var(--r-lg);
	background: var(--plate-line-soft);
}
.schedule li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .3rem 1rem; padding: 1.15rem 1.3rem; background: rgba(255, 255, 255, .035); }
.schedule b { color: var(--on-plate); font-size: 1rem; font-weight: var(--fw-semibold); }
.schedule .every { color: var(--on-plate-accent); font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.schedule p { grid-column: 1 / -1; color: var(--on-plate-muted); font-size: .87rem; line-height: 1.55; }
@media (max-width: 760px) {
	.schedule { grid-template-columns: 1fr; }
}

/* ---------- the documentation pack, as a tick list (licensing) ---------- */
.pack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 2rem; }
.pack li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: .2rem .8rem; padding: .8rem 0; border-bottom: 1px solid var(--plate-line-soft); }
.pack svg { grid-row: span 2; margin-top: .25rem; color: var(--accent); }
.pack b { color: var(--on-plate); font-size: .96rem; font-weight: var(--fw-semibold); }
.pack p { color: var(--on-plate-muted); font-size: .86rem; line-height: 1.5; }
@media (max-width: 760px) {
	.pack { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Legal pages (template-parts/about/legal.php): a contents rail beside the
   document; every clause opens with a plain-language summary that is
   explicitly not part of the text. Clause bodies are editor HTML, so lists,
   tables and term lists are styled without classes.
   ========================================================================== */
.legal { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
@media (max-width: 960px) {
	.legal { grid-template-columns: minmax(0, 1fr); }
}

/* contents rail */
.toc { font-size: .9rem; }
.toc h2 { margin-bottom: .9rem; color: var(--accent-text); font-family: var(--mono); font-size: .62rem; font-weight: var(--fw-semibold); letter-spacing: .16em; text-transform: uppercase; }
.toc ol { display: flex; flex-direction: column; gap: .1rem; counter-reset: toc; }
.toc a {
	display: grid;
	grid-template-columns: 1.9rem minmax(0, 1fr);
	gap: .4rem;
	margin-inline: -.55rem;
	padding: .42rem .55rem;
	border-radius: var(--r-sm);
	color: var(--text-mid);
	font-size: .88rem;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .16s, color .16s;
}
.toc a::before { content: counter(toc, decimal-leading-zero); counter-increment: toc; padding-top: .18rem; color: var(--text-muted); font-family: var(--mono); font-size: .66rem; }
.toc a:hover { background: var(--accent-subtle); color: var(--accent-text); }
.toc a:hover::before { color: var(--accent-text); }
@media (min-width: 961px) {
	.toc { position: sticky; top: 120px; max-height: calc(100vh - 160px); overflow-y: auto; }
}

/* document column */
.doc { min-width: 0; max-width: 78ch; }
.clause { padding-block: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); border-top: 1px solid var(--border); scroll-margin-top: 110px; }
.clause:first-of-type { padding-top: 0; border-top: 0; }
.clause > h2 { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: .75rem; margin-bottom: .9rem; font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem); }
.clause > h2 .no { color: var(--accent-text); font-family: var(--mono); font-size: .72rem; font-weight: var(--fw-semibold); letter-spacing: .1em; }
.clause h3 { margin-top: 1.35rem; margin-bottom: .45rem; font-size: 1.02rem; }
.clause p { color: var(--text-mid); font-size: .97rem; line-height: 1.75; }
.clause p + p { margin-top: .85rem; }
.clause ul,
.clause ol { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.clause ul + p,
.clause ol + p,
.clause .tscroll + p,
.clause dl + p { margin-top: 1rem; }
.clause ul li,
.clause ol li { position: relative; padding-inline-start: 1.5rem; color: var(--text-mid); font-size: .95rem; line-height: 1.7; }
.clause ul li::before { content: ""; position: absolute; top: .72em; inset-inline-start: .3rem; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.clause ol { counter-reset: cl; }
.clause ol li::before { content: counter(cl) "."; counter-increment: cl; position: absolute; top: .15em; inset-inline-start: 0; color: var(--accent-text); font-family: var(--mono); font-size: .78rem; }
.clause dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem 1.25rem; margin: .9rem 0 0; }
.clause dl dt { color: var(--text); font-size: .94rem; font-weight: var(--fw-semibold); }
.clause dl dd { margin: 0; color: var(--text-mid); font-size: .94rem; line-height: 1.65; }
.clause .tscroll { margin-top: 1rem; }
.clause .tbl tbody th,
.clause .tbl td { font-size: .9rem; }
@media (max-width: 560px) {
	.clause dl { grid-template-columns: 1fr; gap: .2rem; }
	.clause dl dd { margin-bottom: .7rem; }
}

/* plain-language summary */
.plain {
	display: grid;
	gap: .5rem .8rem;
	margin-bottom: 1.1rem;
	padding: .85rem 1.05rem;
	border: 1px solid var(--border);
	border-inline-start: 3px solid var(--accent);
	border-radius: var(--r);
	background: var(--surface-2);
}
.sec-alt .plain { background: var(--surface); }
.plain .tag-plain { color: var(--accent-text); font-family: var(--mono); font-size: .55rem; font-weight: var(--fw-semibold); letter-spacing: .14em; text-transform: uppercase; }
.plain p { margin: 0; color: var(--text-mid); font-size: .9rem; line-height: 1.6; }

/* document meta bar */
.docmeta {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--border);
}
.docmeta div { padding: 1rem 1.15rem; background: var(--surface); }
.docmeta dt { color: var(--text-muted); font-family: var(--mono); font-size: .56rem; font-weight: var(--fw-semibold); letter-spacing: .13em; text-transform: uppercase; }
.docmeta dd { margin: .4rem 0 0; color: var(--text); font-size: .92rem; font-weight: var(--fw-semibold); line-height: 1.4; }
@media (max-width: 860px) {
	.docmeta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.docmeta { grid-template-columns: 1fr; }
}

/* ---------- anonymised case notes (client references) ---------- */
.cases {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--border);
}
.cases > li { display: flex; flex-direction: column; gap: .65rem; padding: 1.3rem 1.35rem 1.45rem; background: var(--surface); }
.cases .sector { color: var(--accent-text); font-family: var(--mono); font-size: .58rem; font-weight: var(--fw-semibold); letter-spacing: .14em; text-transform: uppercase; }
.cases h3 { font-size: 1.06rem; line-height: 1.28; }
.cases dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem .9rem; margin: 0; }
.cases dt { padding-top: .15rem; color: var(--text-muted); font-family: var(--mono); font-size: .56rem; font-weight: var(--fw-semibold); letter-spacing: .12em; text-transform: uppercase; }
.cases dd { margin: 0; color: var(--text-mid); font-size: .87rem; line-height: 1.5; }
.cases .verify { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .84rem; line-height: 1.5; }
.cases .verify b { display: block; margin-bottom: .28rem; color: var(--text-mid); font-family: var(--mono); font-size: .56rem; font-weight: var(--fw-semibold); letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 1000px) {
	.cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.cases { grid-template-columns: 1fr; }
}

/* footnote under a section table (al_fajar_table) */
.table-foot { max-width: 78ch; margin-top: 1rem; color: var(--text-muted); font-size: .9rem; line-height: 1.6; }

/* ---------- service pages: package cards ---------- */
.pkg-grid { display: flex; flex-wrap: wrap; gap: clamp(.9rem, .6rem + .8vw, 1.25rem); }
.pkg {
	display: flex;
	flex: 1 1 280px;
	flex-direction: column;
	gap: .8rem;
	padding: clamp(1.3rem, 1rem + .9vw, 1.7rem);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--surface);
	transition: border-color .18s, transform .18s, box-shadow .18s;
}
.pkg:hover { border-color: rgba(206, 164, 73, .55); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pkg h3 { font-size: var(--fs-h3); }
.pkg p { color: var(--text-muted); font-size: .93rem; line-height: 1.6; }
.pkg-from { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--border); }
.pkg-from b { color: var(--accent-text); font-family: var(--mono); font-size: 1.05rem; font-weight: var(--fw-semibold); letter-spacing: .01em; }
.pkg-from span { color: var(--text-muted); font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.pkg .svc-link { margin-top: auto; }
.pkg-grid + .note { margin-top: clamp(1.25rem, 1rem + .8vw, 1.75rem); }
@media (prefers-reduced-motion: reduce) {
	.pkg:hover { transform: none; }
}

/* ==========================================================================
   Sector pages (For Business › By sector): the working day, the options
   compared, headcount bands and the responsibility split.
   ========================================================================== */

/* the working day, read left to right */
.daymap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.daymap li { position: relative; padding: 1.7rem clamp(.9rem, .7rem + .6vw, 1.35rem) 1.45rem; border-top: 3px solid var(--border); }
.daymap li::before { content: ""; position: absolute; top: -8px; inset-inline-start: clamp(.9rem, .7rem + .6vw, 1.35rem); width: 13px; height: 13px; border-radius: 50%; background: var(--border); box-shadow: 0 0 0 4px var(--page); }
.daymap li[data-peak="true"] { border-top-color: var(--accent); }
.daymap li[data-peak="true"]::before { background: var(--accent); }
.sec-alt .daymap li::before { box-shadow: 0 0 0 4px var(--surface-2); }
.daymap .t { display: block; color: var(--accent-text); font-family: var(--mono); font-size: .95rem; letter-spacing: .06em; }
.daymap b { display: block; margin-top: .55rem; font-family: var(--display); font-size: 1.05rem; font-weight: var(--fw-extrabold); letter-spacing: -.015em; }
.daymap p { margin-top: .32rem; color: var(--text-muted); font-size: .88rem; line-height: 1.58; }
.daymap .peak { display: inline-block; margin-top: .6rem; padding: .14rem .4rem; border: 1px solid rgba(206, 164, 73, .4); border-radius: var(--r-sm); color: var(--accent-text); font-family: var(--mono); font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; }
.daymap + .note { margin-top: clamp(1.25rem, 1rem + .8vw, 1.75rem); }
@media (max-width: 860px) {
	.daymap { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
}
@media (max-width: 520px) {
	.daymap { grid-template-columns: 1fr; }
}

/* the options, compared */
.compare {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--border);
}
.compare > div { display: flex; flex-direction: column; padding: 1.35rem clamp(1rem, .85rem + .5vw, 1.3rem) 1.5rem; background: var(--surface); }
.compare > div.pick { background: var(--accent-subtle); }
.compare h3 { font-family: var(--display); font-size: 1.05rem; font-weight: var(--fw-extrabold); letter-spacing: -.015em; line-height: 1.2; }
.compare .kicker { display: block; margin-top: .4rem; color: var(--text-muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; }
.compare > div.pick .kicker { color: var(--accent-text); }
.compare dl { display: grid; gap: .85rem; margin-top: 1.1rem; }
.compare dt { color: var(--text-muted); font-family: var(--mono); font-size: .57rem; letter-spacing: .12em; text-transform: uppercase; }
.compare dd { margin: .2rem 0 0; color: var(--text-mid); font-size: .87rem; line-height: 1.52; }
.compare .verdict { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .85rem; line-height: 1.5; }
.compare > div.pick .verdict { border-top-color: rgba(206, 164, 73, .35); color: var(--accent-text); font-weight: var(--fw-semibold); }
.compare dl + .verdict { margin-top: auto; }
.compare + .note { margin-top: clamp(1.25rem, 1rem + .8vw, 1.75rem); }
@media (max-width: 960px) {
	.compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.compare { grid-template-columns: 1fr; }
}

/* headcount bands, on the dark plate */
.sizer {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--plate-line-soft);
	border-radius: var(--r-lg);
	background: var(--plate-line-soft);
}
.sizer li { padding: 1.25rem 1.2rem 1.4rem; background: rgba(255, 255, 255, .035); }
.sizer .hc { display: block; color: var(--on-plate); font-family: var(--display); font-size: clamp(1.5rem, 1.3rem + .6vw, 1.85rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.05; }
.sizer .hc small { display: block; margin-top: .3rem; color: var(--on-plate-muted); font-family: var(--mono); font-size: .58rem; font-weight: var(--fw-medium); letter-spacing: .14em; text-transform: uppercase; }
.sizer dl { display: grid; gap: .6rem; margin-top: 1.05rem; }
.sizer dt { color: var(--on-plate-muted); font-family: var(--mono); font-size: .57rem; letter-spacing: .12em; text-transform: uppercase; }
.sizer dd { margin: .15rem 0 0; color: var(--on-plate-accent); font-size: .94rem; font-weight: var(--fw-semibold); line-height: 1.35; }
.sizer dd.small { color: var(--on-plate-mid); font-size: .86rem; font-weight: 400; }
.sizer-after { max-width: 66ch; margin-top: 1.5rem; }
@media (max-width: 900px) {
	.sizer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.sizer { grid-template-columns: 1fr; }
}

/* the responsibility split */
.owns th[scope="col"]:not(:first-child) { width: 34%; }
.owns tbody th { width: 32%; }
.owns .us { color: var(--accent-text); font-weight: var(--fw-semibold); }
.owns .you { color: var(--text-mid); }

/* ---------- How We Contract pages ---------- */
/* numbered clauses */
.clauses {
	display: grid;
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--border);
}
.clauses li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 clamp(.9rem, .7rem + .5vw, 1.25rem);
	padding: 1.3rem clamp(1.1rem, .9rem + .6vw, 1.45rem);
	background: var(--surface);
}
.clauses .no { padding-top: .22rem; color: var(--accent-text); font-size: .72rem; letter-spacing: .1em; white-space: nowrap; }
.clauses b { display: block; font-family: var(--display); font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; }
.clauses p { margin-top: .35rem; color: var(--text-muted); font-size: .91rem; line-height: 1.62; }
.clauses .meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; }
.clauses .meta span {
	padding: .14rem .42rem;
	border: 1px solid rgba(206, 164, 73, .4);
	border-radius: var(--r-sm);
	color: var(--accent-text);
	font-family: var(--mono);
	font-size: .6rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.clauses + .note { margin-top: 1.5rem; }
@media (max-width: 520px) {
	.clauses li { grid-template-columns: 1fr; gap: .5rem; }
}

/* the escalation ladder */
.ladder { display: grid; gap: .6rem; }
.ladder li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .35rem 1.25rem;
	align-items: baseline;
	padding: 1.05rem clamp(1.05rem, .9rem + .5vw, 1.3rem);
	border: 1px solid var(--border);
	border-inline-start: 4px solid var(--gold);
	border-radius: var(--r);
	background: var(--surface);
}
.ladder li:nth-child(1) { border-inline-start-color: rgba(206, 164, 73, .28); }
.ladder li:nth-child(2) { border-inline-start-color: rgba(206, 164, 73, .52); }
.ladder li:nth-child(3) { border-inline-start-color: rgba(206, 164, 73, .78); }
.ladder li:nth-child(n+4) { border-inline-start-color: var(--gold-dk); }
.ladder .trig { display: block; margin-bottom: .3rem; color: var(--text-muted); font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; }
.ladder b { font-family: var(--display); font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.ladder .rem { color: var(--accent-text); font-size: .76rem; font-weight: var(--fw-semibold); letter-spacing: .06em; text-align: end; white-space: nowrap; }
.ladder p { grid-column: 1 / -1; margin-top: .35rem; color: var(--text-muted); font-size: .88rem; line-height: 1.58; }
.ladder + .note { margin-top: 1.5rem; }
@media (max-width: 620px) {
	.ladder li { grid-template-columns: 1fr; }
	.ladder .rem { text-align: start; }
}

/* three-column grids on the dark plate: exclusions, things that never apply */
.pairs,
.nevers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--plate-line-soft);
	border-radius: var(--r-lg);
	background: var(--plate-line-soft);
}
.pairs li { padding: 1.05rem 1.2rem; background: rgba(255, 255, 255, .035); }
.pairs b { display: block; font-size: .98rem; font-weight: var(--fw-semibold); }
.pairs span { display: block; margin-top: .38rem; color: var(--on-plate-accent); font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; }
.pairs em { display: block; margin-top: .35rem; color: var(--on-plate-muted); font-size: .85rem; font-style: normal; line-height: 1.5; }
.nevers li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; padding: 1.1rem 1.2rem; background: rgba(255, 255, 255, .035); }
/* --danger as the dark theme sets it: the plate is dark in both themes. */
.nevers svg { margin-top: .2rem; color: #E07A6E; }
.nevers b { display: block; color: var(--on-plate); font-size: .97rem; font-weight: var(--fw-semibold); line-height: 1.3; }
.nevers span { display: block; margin-top: .32rem; color: var(--on-plate-muted); font-size: .86rem; line-height: 1.52; }
.list-after { max-width: 66ch; margin-top: 1.5rem; }
@media (max-width: 860px) {
	.pairs,
	.nevers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.pairs,
	.nevers { grid-template-columns: 1fr; }
}

/* ---------- Reach pages ---------- */
/* bands: a distance or time, a bar, what happens */
.bands { display: grid; }
.bands li {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 0 1.35rem;
	align-items: start;
	padding: 1.15rem 0;
	border-top: 1px solid var(--border);
}
.bands li:last-child { border-bottom: 1px solid var(--border); }
.bands .km { padding-top: .1rem; color: var(--accent-text); font-size: .72rem; letter-spacing: .09em; text-align: end; white-space: nowrap; }
.bands .bar { position: relative; display: block; height: 7px; margin-bottom: .85rem; overflow: hidden; border-radius: 999px; background: var(--border); }
.bands .bar i { position: absolute; inset-block: 0; inset-inline-start: 0; display: block; border-radius: 999px; background: linear-gradient(90deg, var(--gold-dk), var(--gold-lt)); }
.bands .bar i.fade { background: linear-gradient(90deg, var(--gold-dk), rgba(206, 164, 73, .25)); }
[dir="rtl"] .bands .bar i { background: linear-gradient(-90deg, var(--gold-dk), var(--gold-lt)); }
[dir="rtl"] .bands .bar i.fade { background: linear-gradient(-90deg, var(--gold-dk), rgba(206, 164, 73, .25)); }
.bands b { display: block; font-family: var(--display); font-size: 1.08rem; font-weight: 800; letter-spacing: -.015em; }
.bands p { margin-top: .32rem; color: var(--text-muted); font-size: .91rem; line-height: 1.62; }
.bands .note-sm,
.plan .when {
	display: inline-block;
	margin-top: .6rem;
	padding: .16rem .45rem;
	border: 1px solid rgba(206, 164, 73, .4);
	border-radius: var(--r-sm);
	color: var(--accent-text);
	font-family: var(--mono);
	font-size: .62rem;
	letter-spacing: .13em;
	text-transform: uppercase;
}
.bands + .note { margin-top: 1.5rem; }
@media (max-width: 600px) {
	.bands li { grid-template-columns: 1fr; gap: .45rem; }
	.bands .km { text-align: start; }
}

/* plan: numbered stages with outlined numerals */
.plan {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--border);
}
.plan li { position: relative; overflow: hidden; padding: 1.5rem 1.5rem 1.65rem; background: var(--surface); }
.plan .n {
	position: absolute;
	top: -.35rem;
	inset-inline-end: .75rem;
	color: transparent;
	font-family: var(--display);
	font-size: 4.75rem;
	font-weight: 900;
	line-height: 1;
	pointer-events: none;
	user-select: none;
	-webkit-text-stroke: 1.5px rgba(206, 164, 73, .22);
}
.plan b { position: relative; display: block; font-family: var(--display); font-size: 1.1rem; font-weight: 800; letter-spacing: -.015em; }
.plan p { position: relative; margin-top: .4rem; color: var(--text-muted); font-size: .91rem; line-height: 1.62; }
.plan .when { position: relative; margin-top: .75rem; }
@media (max-width: 780px) {
	.plan { grid-template-columns: 1fr; }
}

/* scope: what is included, what is not */
.scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, .8rem + .8vw, 1.5rem); }
.scope > div {
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 1rem + .7vw, 1.6rem);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--surface);
}
.scope > div.no { background: var(--surface-2); }
.scope h3 { display: flex; align-items: center; gap: .55rem; font-family: var(--display); font-size: 1.15rem; font-weight: 800; letter-spacing: -.015em; }
.scope .yes h3,
.scope .yes ul svg { color: var(--success-text); }
.scope .no h3,
.scope .no ul svg { color: var(--danger-text); }
.scope ul { display: grid; gap: .65rem; margin-top: 1.1rem; }
.scope ul li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; color: var(--text-mid); font-size: .91rem; line-height: 1.55; }
.scope ul svg { margin-top: .22rem; }
.scope .scope-ft { margin-top: auto; padding-top: 1.15rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .88rem; line-height: 1.6; }
/* keeps the closing line clear of the list in the taller column */
.scope ul:has(+ .scope-ft) { margin-bottom: 1.15rem; }
@media (max-width: 780px) {
	.scope { grid-template-columns: 1fr; }
}