/* =========================================================================
   Specify Billi — page-specify-billi.php.
   Scoped to .sp — mobile-first, min-width media queries only.
   Tokens mirror sector-page.css / home.css (Billi Brand Book 2026):
   32px Demi large headings, 28px Demi section headings, 16px Regular body,
   2px buttons, 4px cards (sharper-corner direction, Aug 2026).
   ========================================================================= */

.sp {
	/* Billi Brand Book 2026 palette */
	--sp-navy: #181d46;      /* Billi Blue — signature colour */
	--sp-lightblue: #90cdeb; /* button hover state */
	--sp-cta-blue: #90cdeb;  /* button on dark media, as on the homepage cards */
	--sp-cta-blue-dk: #ffffff;
	--sp-grey: #eaeaea;      /* primary grey — borders, rules */
	--sp-band-grey: #f5f5f5;
	--sp-band-blue: #f1f5f5; /* Green Grey */
	--sp-text: #000;
	--sp-muted: #75757b;
	--sp-gutter: 20px;

	font-family: 'FFDINStd', sans-serif;
	color: var(--sp-text);
	line-height: 1.5;
}

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

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

.sp img { max-width: 100%; height: auto; display: block; }

.sp-container {
	width: 100%;
	max-width: 1436px; /* 1356px content + 2 × 40px */
	margin: 0 auto;
	padding-left: var(--sp-gutter);
	padding-right: var(--sp-gutter);
}

/* WYSIWYG output: neutralise whatever tags the admin used so headings /
   paragraphs inherit the wrapper's type styles. */
.sp [class*='__heading'] :is(h1, h2, h3, h4, p),
.sp [class*='__title'] :is(h1, h2, h3, h4, p),
.sp .sp-section-heading :is(h1, h2, h3, h4, p),
.sp .sp-section-intro :is(h1, h2, h3, h4, p) {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.sp [class*='__text'] p,
.sp [class*='__intro'] p { margin: 0 0 0.6em; }

.sp [class*='__text'] p:last-child,
.sp [class*='__intro'] p:last-child { margin-bottom: 0; }

.sp a:focus-visible,
.sp summary:focus-visible {
	outline: 2px solid var(--sp-navy);
	outline-offset: 2px;
}

/* The theme sets a global `a { font-weight: 600 }` and fades links on hover.
   Card-sized links here wrap whole blocks of body copy, so both have to be
   neutralised — the elements inside set their own weight, and the cards have
   their own hover treatment. */
.sp a.sp-tool,
.sp .sp-case__link,
.sp a.sp-resource { font-weight: 400; }

.sp a.sp-tool:hover,
.sp .sp-case__link:hover,
.sp a.sp-resource:hover,
.sp .sp-hero__eyebrow a:hover { opacity: 1; }

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

/* Brand buttons: 2px corners (sharper-corner direction, Aug 2026), 16px Regular. */
.sp .sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Opt out of the theme's global `a:hover { opacity: 0.7 }` (desktop.css),
   which otherwise fades the whole button on hover. */
.sp .sp-btn:hover { opacity: 1; }

.sp .sp-btn--blue { background: var(--sp-navy); color: #fff; }
.sp .sp-btn--blue:hover { background: #fff; color: var(--sp-navy); box-shadow: inset 0 0 0 1px var(--sp-navy); }

.sp .sp-btn--ghost {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.sp .sp-btn--ghost:hover {
	background: #fff;
	color: var(--sp-navy);
	box-shadow: inset 0 0 0 1px #fff;
}

/* ---- Shared section scaffolding ----------------------------------------- */

.sp-section-heading {
	color: var(--sp-navy);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 16px;
}

.sp-section-intro {
	font-size: 16px;
	line-height: 1.5;
	max-width: 720px;
	margin-bottom: 28px;
}

/* When no intro follows, the heading owns the gap to the grid below. */
.sp-section-heading:last-child { margin-bottom: 28px; }

@media (min-width: 900px) {
	.sp-section-heading { font-size: 32px; margin-bottom: 18px; }
	.sp-section-heading:last-child { margin-bottom: 40px; }
	.sp-section-intro { font-size: 17px; margin-bottom: 40px; }
}

/* ---- Icons ---------------------------------------------------------------
   Sized by the well rather than by the icon's own class. billi_sp_the_icon()
   falls back to the sector page's set for shared slugs, which emits
   class="sn-icon" — a class this stylesheet does not ship. Targeting any svg
   inside the wells means a fallback icon can never render at the SVG default
   300x150 and blow the card apart. */

.sp-icon { width: 24px; height: 24px; display: block; }

.sp .sp-tool__icon svg,
.sp .sp-set__icon svg,
.sp .sp-resource__icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

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

/* Content is centred in the band, with the copy inside left-aligned: the
   overlay is solid at the left edge, so indenting the text would drop it
   onto the exposed image. Mirrors .sn-hero on the sector pages. */
.sp-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 420px;
	background: var(--sp-navy);
	overflow: hidden;
}

.sp-hero__media,
.sp-hero__media img,
.sp-hero__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-hero__media { z-index: -2; }

.sp-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(24, 29, 70, 0.35) 0%, rgba(24, 29, 70, 0.85) 100%),
		linear-gradient(90deg, rgba(24, 29, 70, 0.9) 0%, rgba(24, 29, 70, 0.55) 55%, rgba(24, 29, 70, 0.3) 100%);
}

.sp-hero__inner {
	width: 100%;
	padding-top: 48px;
	padding-bottom: 48px;
}

.sp-hero__content { max-width: 720px; color: #fff; }

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

/* The title is an h1, so typography.css sets it in DM Serif Display at 400.
   No font-weight here: the serif has no bold cut, and the 700 this rule
   carried from the DIN era made browsers synthesise one. */
.sp-hero__heading {
	margin: 0;
	color: #fff;
	font-size: 34px;
	line-height: 1.1;
}

.sp-hero__intro {
	margin-top: 16px;
	font-size: 17px;
	line-height: 1.5;
}

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

/* On the hero the navy pill would sink into the overlay — use the brighter
   CTA blue, as the homepage solution cards and sector heroes do. */
.sp-hero .sp-btn--blue { background: var(--sp-cta-blue); color: var(--sp-navy); }
.sp-hero .sp-btn--blue:hover { background: var(--sp-cta-blue-dk); color: var(--sp-navy); box-shadow: none; }

/* Anchor chips — this is a long page, so the hero offers a way down it. */
.sp-hero__jump {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
}

.sp .sp-jump-chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 7px 16px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.sp .sp-jump-chip:hover {
	background: #fff;
	color: var(--sp-navy);
	box-shadow: inset 0 0 0 1px #fff;
	opacity: 1;
}

@media (min-width: 768px) {
	.sp-hero { min-height: 480px; }
	.sp-hero__inner { padding-top: 64px; padding-bottom: 64px; }
	.sp-hero__heading { font-size: 46px; }
}

@media (min-width: 1100px) {
	.sp-hero { min-height: 540px; }
	.sp-hero__heading { font-size: 56px; }
	.sp-hero__intro { font-size: 18px; max-width: 620px; }
}

/* ---- Specification toolkit ------------------------------------------------ */

.sp-tools { padding: 48px 0; }

.sp-tools__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.sp .sp-tool {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--sp-grey);
	border-radius: 4px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sp a.sp-tool:hover {
	border-color: var(--sp-navy);
	box-shadow: 0 6px 20px rgba(24, 29, 70, 0.1);
}

.sp-tool__media {
	aspect-ratio: 16 / 9;
	background: var(--sp-band-blue);
	overflow: hidden;
}

/* Double class: the `.sp img { height:auto }` reset above beats a single
   class selector, so the fitted sizing needs the extra specificity. */
.sp .sp-tool__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.sp a.sp-tool:hover .sp-tool__img { transform: scale(1.03); }

.sp-tool__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px;
}

.sp-tool__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	border-radius: 2px;
	background: var(--sp-band-blue);
	color: var(--sp-navy);
}

.sp-tool__title {
	color: var(--sp-navy);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 8px;
}

.sp-tool__text {
	font-size: 16px;
	line-height: 1.5;
}

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

.sp-tool__cta svg { width: 16px; height: 16px; flex: 0 0 auto; }

.sp a.sp-tool:hover .sp-tool__cta { text-decoration: underline; }

@media (min-width: 640px) {
	.sp-tools__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
	.sp-tools { padding: 80px 0; }
	.sp-tools__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* ---- Space, Energy and Time ----------------------------------------------- */

.sp-set {
	background: var(--sp-band-grey);
	padding: 48px 0;
}

.sp-set__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.sp-set__card {
	background: #fff;
	border-radius: 4px;
	padding: 24px 22px;
}

.sp-set__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	border-radius: 2px;
	background: var(--sp-lightblue);
	color: var(--sp-navy);
}

.sp-set__title {
	color: var(--sp-navy);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 8px;
}

.sp-set__text {
	font-size: 16px;
	line-height: 1.5;
}

@media (min-width: 700px) {
	.sp-set__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1000px) {
	.sp-set { padding: 80px 0; }
	.sp-set__grid { gap: 20px; }
	.sp-set__card { padding: 28px 26px; }
}

/* ---- Shared split band (CPD, Design) ---------------------------------------
   Image one side, copy the other. `--sp-split-order` flips which side the
   media sits on at desktop without duplicating the grid rules. */

.sp-split { padding: 48px 0; }

.sp-split__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
}

.sp-split__media { border-radius: 4px; overflow: hidden; }

.sp .sp-split__img { width: 100%; height: auto; }

/* The colour wheel is a cut-out on white, not a photograph — contain it in a
   padded panel so the artwork is never cropped by the rounded corners. */
.sp-split--contain .sp-split__media {
	background: var(--sp-band-blue);
	padding: 24px;
}

.sp-split__list {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.sp-split__list li {
	position: relative;
	padding-left: 28px;
	font-size: 16px;
	line-height: 1.5;
}

.sp-split__list li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0.45em;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--sp-navy);
	border-bottom: 2px solid var(--sp-navy);
	transform: rotate(-45deg);
}

.sp-split__meta {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--sp-grey);
	color: var(--sp-muted);
	font-size: 15px;
	line-height: 1.5;
}

.sp-split__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
}

.sp .sp-split__link {
	color: var(--sp-navy);
	font-size: 16px;
	font-weight: 600;
	text-decoration: underline;
}

@media (min-width: 900px) {
	.sp-split { padding: 80px 0; }
	.sp-split__row { grid-template-columns: 1fr 1fr; gap: 48px; }
	.sp-split__media { order: var(--sp-split-order, 0); }
}

@media (min-width: 1200px) {
	.sp-split__row { gap: 64px; }
}

/* ---- Sustainability proof --------------------------------------------------- */

.sp-proof {
	background: var(--sp-band-blue);
	padding: 48px 0;
}

.sp-proof__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 24px;
}

.sp-proof__stat {
	background: #fff;
	border-radius: 4px;
	padding: 24px 22px;
}

.sp-proof__figure {
	display: block;
	color: var(--sp-navy);
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
}

.sp-proof__label {
	display: block;
	margin-top: 10px;
	font-size: 16px;
	line-height: 1.4;
}

/* Attribution for the figures above — they are Bloomberg's published BREEAM
   results, not Billi's own, so the source stays attached to them. */
.sp-proof__source {
	color: var(--sp-muted);
	font-size: 15px;
	line-height: 1.5;
	max-width: 860px;
}

.sp-proof__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

@media (min-width: 700px) {
	.sp-proof__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1000px) {
	.sp-proof { padding: 80px 0; }
	.sp-proof__grid { gap: 20px; margin-bottom: 28px; }
	.sp-proof__stat { padding: 28px 26px; }
	.sp-proof__figure { font-size: 48px; }
}

/* ---- Case studies ------------------------------------------------------------ */

.sp-cases {
	background: var(--sp-band-grey);
	padding: 48px 0;
}

.sp-cases__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.sp-case {
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
}

.sp-case__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.sp-case__media {
	aspect-ratio: 16 / 10;
	background: var(--sp-band-blue);
	overflow: hidden;
}

.sp .sp-case__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.sp-case__link:hover .sp-case__img { transform: scale(1.03); }

.sp-case__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px;
}

.sp-case__client {
	margin: 0;
	color: var(--sp-navy);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.sp-case__text {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.5;
}

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

.sp-case__cta svg { width: 16px; height: 16px; flex: 0 0 auto; }

.sp-case__link:hover .sp-case__cta { text-decoration: underline; }

@media (min-width: 700px) {
	.sp-cases__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.sp-cases { padding: 80px 0; }
	.sp-cases__grid { grid-template-columns: repeat(3, 1fr); }
	.sp-case__body { padding: 26px; }
}

/* ---- Resources ---------------------------------------------------------------
   The four /specify-billi/ child pages plus the document library. The top nav
   carries Specify Billi as a single item with no dropdown, so this row is how
   the children stay reachable. */

.sp-resources { padding: 48px 0; }

.sp-resources__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.sp-resource {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--sp-grey);
	border-radius: 4px;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sp a.sp-resource:hover {
	border-color: var(--sp-navy);
	background: var(--sp-band-blue);
}

.sp-resource__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 2px;
	background: var(--sp-band-blue);
	color: var(--sp-navy);
}

.sp a.sp-resource:hover .sp-resource__icon { background: #fff; }

.sp-resource__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.sp-resource__title {
	color: var(--sp-navy);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
}

.sp-resource__text {
	color: var(--sp-muted);
	font-size: 15px;
	line-height: 1.4;
}

.sp-resource__chevron {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--sp-navy);
	transition: transform 0.2s ease;
}

.sp a.sp-resource:hover .sp-resource__chevron { transform: translateX(3px); }

@media (min-width: 700px) {
	.sp-resources__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.sp-resources { padding: 80px 0; }
	.sp-resources__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* ---- Reduced motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sp .sp-tool__img,
	.sp .sp-case__img,
	.sp .sp-resource__chevron { transition: none; }

	.sp a.sp-tool:hover .sp-tool__img,
	.sp .sp-case__link:hover .sp-case__img { transform: none; }
}

/* ---- Enquiry --------------------------------------------------------------------

   The closing section is the product pages' .pd-enquiry, reused wholesale
   rather than restyled here. See template-parts/specify/enquiry.php for why;
   its styles come from css/product.css, enqueued alongside this file. */