/* =========================================================================
   Certifications and compliance: template-certifications.php.
   Scoped to .ce, mobile first, min-width queries at 640 / 768 / 900 / 1200.
   The house recipe from the 18 Sep 2026 spec, renamed, plus the credential
   cards (marks on white chips), the detail rows, the EPD credits table and
   figures, and the help band.
   ========================================================================= */

.ce {
	--ce-navy: #181d46;      /* Billi Blue */
	--ce-lightblue: #90cdeb; /* primary button on dark, accents */
	--ce-grey: #eaeaea;      /* borders, rules */
	--ce-band-grey: #f5f5f5;
	--ce-band-tint: #f1f5f5; /* Green Grey */
	--ce-text: #000;
	--ce-muted: #75757b;
	--ce-gutter: 20px;

	font-family: var(--font-din);
	color: var(--ce-text);
	line-height: 1.5;
}

@media (min-width: 900px) {
	.ce { --ce-gutter: 40px; }
}

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

/* framework.css sets a global img { width: 100% }: width must be reset, not
   just max-width. */
.ce img { max-width: 100%; width: auto; height: auto; display: block; }

.ce-container {
	width: 100%;
	max-width: 1436px;
	margin: 0 auto;
	padding-left: var(--ce-gutter);
	padding-right: var(--ce-gutter);
}

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

/* ---- Sections ------------------------------------------------------------ */

.ce-section { padding: 48px 0; }

@media (min-width: 900px) {
	.ce-section { padding: 80px 0; }
}

.ce-section--grey { background: var(--ce-band-grey); }
.ce-section--tint { background: var(--ce-band-tint); }

/* Headings are real h2/h3 elements printed from plain-text fields. */
.ce .ce-section-heading {
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.18;
	color: var(--ce-navy);
	text-transform: none;
	letter-spacing: normal;
}

.ce-section-intro {
	margin: 0;
	max-width: 66ch;
	font-size: 17px;
	line-height: 1.55;
	color: var(--ce-muted);
}

.ce-section-head { margin-bottom: 28px; }
.ce .ce-section-head > :last-child { margin-bottom: 0; }

@media (min-width: 900px) {
	.ce .ce-section-heading { font-size: 34px; }
	.ce-section-head { margin-bottom: 40px; }
}

/* WYSIWYG output. Base rules sit inside :where() so that band overrides win. */
:where(.ce) .ce-text > :first-child { margin-top: 0; }
:where(.ce) .ce-text > :last-child { margin-bottom: 0; }
:where(.ce) .ce-text p { margin: 0 0 0.85em; }
:where(.ce) .ce-text :is(h2, h3, h4) {
	margin: 1.4em 0 0.5em;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ce-navy);
}
:where(.ce) .ce-text :is(ul, ol) { margin: 0 0 0.9em; padding-left: 1.15em; }
:where(.ce) .ce-text li { margin: 0 0 0.45em; }
:where(.ce) .ce-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Buttons ---------------------------------------------------------------
   desktop.css has a global a:hover { opacity: .7 }: every button opts out. */

/* 16px on a 1.5 line with 12px padding: 48px tall, the size the homepage,
   Why Billi, Specify Billi and the sector pages use. */
.ce .ce-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 28px;
	border: 0;
	border-radius: 2px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ce .ce-btn:hover,
.ce .ce-btn:focus-visible { opacity: 1; }

.ce .ce-btn--navy { background: var(--ce-navy); color: #fff; }
.ce .ce-btn--navy:hover,
.ce .ce-btn--navy:focus-visible { background: #fff; color: var(--ce-navy); box-shadow: inset 0 0 0 1px var(--ce-navy); }

.ce .ce-btn--light { background: var(--ce-lightblue); color: var(--ce-navy); }
.ce .ce-btn--light:hover,
.ce .ce-btn--light:focus-visible { background: #fff; color: var(--ce-navy); }

.ce .ce-btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.ce .ce-btn--ghost:hover,
.ce .ce-btn--ghost:focus-visible { background: #fff; color: var(--ce-navy); box-shadow: none; }

.ce .ce-btn--outline { background: transparent; color: var(--ce-navy); box-shadow: inset 0 0 0 1px var(--ce-navy); }
.ce .ce-btn--outline:hover,
.ce .ce-btn--outline:focus-visible { background: var(--ce-navy); color: #fff; }

.ce .ce-btn__icon { display: block; flex: 0 0 auto; width: 16px; height: 16px; }

/* framework.css removes focus outlines sitewide. Navy on light
   (#90cdeb on white is 1.7:1), white on the hero. */
.ce :is(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--ce-navy); outline-offset: 3px; }
.ce .ce-hero :is(a, button, summary):focus-visible { outline-color: #fff; }

/* ---- Hero ------------------------------------------------------------------
   The title is an <h1>: typography.css gives it DM Serif Display at 400.
   Never set its font-weight or font-family. No photograph: the legacy banner
   baked in Billi's own "Quality excellence" roundel, which read like a
   certification mark on the page that lists the real ones. */

.ce-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 340px;
	background: var(--ce-navy);
	color: #fff;
	overflow: hidden;
}

.ce-hero__inner { width: 100%; padding-top: 48px; padding-bottom: 48px; }
.ce-hero__content { max-width: 720px; }

.ce-hero__eyebrow {
	margin: 0 0 12px;
	color: var(--ce-lightblue);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ce .ce-hero__title { margin: 0; color: #fff; font-size: 34px; line-height: 1.12; }

.ce-hero__intro {
	margin: 16px 0 0;
	max-width: 62ch;
	color: rgba(255, 255, 255, 0.9);
	font-size: 17px;
	line-height: 1.5;
}

.ce-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

@media (min-width: 900px) {
	.ce-hero__inner { padding-top: 72px; padding-bottom: 72px; }
	.ce .ce-hero__title { font-size: 52px; }
	.ce-hero__intro { font-size: 18px; }
}

/* ---- Credential cards ---------------------------------------------------------
   Whole card clickable through one stretched link, which jumps to the
   credential's row. Marks sit in their own colours on the card's white chip
   and are only ever scaled, never recoloured or cropped. */

.ce-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

@media (min-width: 640px) {
	.ce-grid--2,
	.ce-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
	.ce-grid { gap: 28px; }
	.ce-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ce-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--ce-grey);
	border-radius: 4px;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ce-card--link:hover { border-color: var(--ce-navy); box-shadow: 0 6px 24px rgba(24, 29, 70, 0.08); }

.ce-card__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 164px;
	padding: 20px;
	border-bottom: 1px solid var(--ce-grey);
	border-radius: 4px 4px 0 0;
	background: #fff;
}

/* Prefixed: the namespace img reset above would otherwise win. */
.ce .ce-card__mark {
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.ce-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 20px 22px 22px;
}

.ce .ce-card__title {
	margin: 0;
	color: var(--ce-navy);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: normal;
}

/* desktop.css sets a { font-weight: 600 } and fades links on hover. */
.ce .ce-card__link { color: inherit; font-weight: inherit; text-decoration: none; }
.ce .ce-card__link::after { content: ''; position: absolute; inset: 0; border-radius: 4px; }
.ce .ce-card__link:hover { opacity: 1; }

/* The focus ring goes round the whole card, which is what the link covers. */
.ce .ce-card__link:focus-visible { outline: none; }
.ce .ce-card__link:focus-visible::after { outline: 2px solid var(--ce-navy); outline-offset: 3px; }

.ce-card__text {
	margin: 8px 0 0;
	color: var(--ce-muted);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
}

.ce-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 16px;
	color: var(--ce-navy);
	font-size: 15px;
	font-weight: 600;
}

.ce-card__more span { padding-bottom: 2px; border-bottom: 1px solid currentColor; }
.ce-card__more svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform 0.2s ease; }
.ce-card--link:hover .ce-card__more svg { transform: translateX(3px); }

/* ---- Detail rows -----------------------------------------------------------------
   Heading (and photograph) on the left, the detail on the right, so a text
   row uses the width without running to 180 characters a line. */

.ce-row { scroll-margin-top: calc(var(--header-chrome-h, 74px) + var(--trust-bar-h, 0px) + 16px); }

.ce-row__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.ce-row__grid > * { min-width: 0; }

.ce .ce-row__heading { margin: 0; }

.ce-row__media { margin-top: 24px; }

.ce .ce-row__img { width: 100%; border-radius: 4px; }

.ce-row__body .ce-text { max-width: 70ch; font-size: 16px; line-height: 1.6; }

.ce-row__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

@media (min-width: 900px) {
	.ce-row__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
	.ce-row__body .ce-text { font-size: 17px; }
}

/* ---- Figures ---------------------------------------------------------------------- */

.ce-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.ce-stats__item {
	min-width: 0;
	margin: 0;
	padding: 16px 16px 18px;
	border: 1px solid var(--ce-grey);
	border-radius: 4px;
	background: #fff;
}

/* 22px on a phone: at 26px "countries" was wider than a half-width tile. */
.ce-stats__figure {
	display: block;
	color: var(--ce-navy);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.1;
}

@media (min-width: 640px) {
	.ce-stats__item { padding: 20px 22px; }
	.ce-stats__figure { font-size: 26px; }
}

.ce-stats__label {
	display: block;
	margin-top: 6px;
	color: var(--ce-muted);
	font-size: 15px;
	line-height: 1.4;
}

@media (min-width: 900px) {
	.ce-stats__figure { font-size: 32px; }
}

/* ---- Credits table ------------------------------------------------------------------
   desktop.css styles every table (33% cells, 1.7rem uppercase headers, white
   3px borders) and responsive.css forces min-width: 600px under 640px. All of
   it is undone here: two columns wrap comfortably at 375px. */

.ce-table-wrap {
	margin-top: 28px;
	overflow-x: auto;
	border: 1px solid var(--ce-grey);
	border-radius: 4px;
	background: #fff;
}

.ce .ce-table {
	width: 100%;
	min-width: 0;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

.ce .ce-table :is(th, td) {
	width: auto;
	min-width: 0;
	padding: 14px 16px;
	border: 0;
	border-top: 1px solid var(--ce-grey);
	color: var(--ce-text);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	text-transform: none;
	vertical-align: top;
}

.ce .ce-table thead th {
	border-top: 0;
	background: var(--ce-navy);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.ce .ce-table tbody th {
	width: 38%;
	color: var(--ce-navy);
	font-weight: 600;
}

/* ---- Help band ---------------------------------------------------------------------
   The closing band: white when the band above it is grey (Green Grey under
   grey reads as a seam), Green Grey otherwise. The template picks the class. */

.ce-help__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.ce .ce-help__heading { margin-bottom: 8px; }

.ce-help__text {
	margin: 0;
	max-width: 60ch;
	color: var(--ce-muted);
	font-size: 17px;
	line-height: 1.55;
}

.ce-help__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (min-width: 900px) {
	.ce-help__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
	.ce-help__actions { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.ce .ce-btn,
	.ce-card,
	.ce-card__more svg { transition: none; }
	.ce-card--link:hover .ce-card__more svg { transform: none; }
}