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

.wb {
	/* Billi Brand Book 2026 palette */
	--wb-navy: #181d46;      /* Billi Blue — signature colour */
	--wb-lightblue: #90cdeb;
	--wb-grey: #eaeaea;      /* primary grey — borders, rules */
	--wb-band-grey: #f5f5f5;
	--wb-band-blue: #f1f5f5; /* Green Grey */
	--wb-text: #000;
	--wb-muted: #75757b;
	--wb-gutter: 20px;

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

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

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

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

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

.wb-visually-hidden {
	position: absolute;
	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;
}

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

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

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

/* framework.css removes the focus outline sitewide with no replacement. */
.wb a:focus-visible,
.wb button:focus-visible {
	outline: 2px solid var(--wb-navy);
	outline-offset: 2px;
}

/* Body-copy links: the theme sets a global `a { font-weight: 600 }`
   (desktop.css:346) and fades links on hover, which makes inline links shout
   inside a paragraph. */
.wb [class*='__text'] a,
.wb [class*='__intro'] a {
	color: var(--wb-navy);
	font-weight: 600;
	text-decoration: underline;
}

.wb [class*='__text'] a:hover,
.wb [class*='__intro'] a:hover { opacity: 1; color: #3d4a8a; }

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

/* Brand buttons: 2px corners (sharper-corner direction, Aug 2026), 16px Regular. */
.wb .wb-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. */
.wb .wb-btn:hover { opacity: 1; }

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

.wb .wb-btn--light { background: var(--wb-lightblue); color: var(--wb-navy); }
.wb .wb-btn--light:hover { background: #fff; }

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

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

/* The ring follows the ground the button sits on: navy is invisible on navy. */
.wb-hero .wb-btn:focus-visible,
.wb-cta .wb-btn:focus-visible { outline-color: #fff; }

/* ---- Shared section scaffolding -----------------------------------------
   Section headings and card titles are real h2/h3 elements so the page keeps
   a document outline. The old layout had no h1 at all and opened on an h3.

   Prefixed with .wb throughout: the theme's stylesheets carry descendant
   heading rules such as `.single-case_studies h2` at (0,1,1), which beat a
   bare class, so the reset needs the extra specificity to be safe. */

.wb :is(h2, h3) {
	margin-top: 0;
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
}

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

.wb-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. */
.wb .wb-section-heading:last-child { margin-bottom: 28px; }

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

/* ---- Hero ----------------------------------------------------------------
   The old page had no hero and no h1: it opened on a breadcrumb and then an
   h3. 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 .su-hero and .sn-hero. */

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

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

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

.wb-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%);
}

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

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

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

.wb-hero__heading {
	margin: 0;
	color: #fff;
	font-size: 34px;
	font-weight: 400;
	line-height: 1.12;
}

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

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

@media (min-width: 768px) {
	.wb-hero { min-height: 400px; }
	.wb-hero__heading { font-size: 44px; }
}

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

/* ---- Reasons -------------------------------------------------------------
   The four reasons were written as icon captions and read like it: one of the
   four was the fragment "We go beyond water and energy-saving." They carry the
   captions from attachment 37801 as headings now, and 37801 is retired — it is
   a single flat 270x250 PNG with all four glyphs and their captions baked in
   on a grey ground, so there was nothing in it to reuse as four marks.

   No icons. Icon paths have shipped broken on this site twice, and four short
   labels read better as type than as glyphs. */

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

.wb-reasons__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.wb-reason {
	padding: 24px;
	background: #fff;
	border: 1px solid var(--wb-grey);
	border-radius: 4px;
}

.wb .wb-reason__heading {
	margin: 0 0 8px;
	color: var(--wb-navy);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
}

.wb-reason__text {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wb-text);
}

@media (min-width: 768px) {
	.wb-reasons__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (min-width: 900px) {
	.wb-reasons { padding: 72px 0; }
	.wb-reasons__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
	.wb-reason { padding: 28px; }
}

/* ---- Pillars -------------------------------------------------------------
   The measure is the whole point of this section. These four blocks ran the
   full 1400px container before, at roughly 130 characters a line. */

.wb-pillars { padding: 48px 0; }

.wb-pillars__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.wb-pillar {
	padding-top: 20px;
	border-top: 2px solid var(--wb-navy);
}

.wb .wb-pillar__heading {
	margin: 0 0 10px;
	color: var(--wb-navy);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.wb-pillar__text {
	margin: 0;
	max-width: 68ch;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--wb-text);
}

@media (min-width: 768px) {
	.wb-pillars__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
}

@media (min-width: 900px) {
	.wb-pillars { padding: 72px 0; }
	.wb-pillars__grid { gap: 48px 56px; }
}

/* ---- CTA -----------------------------------------------------------------
   The old page had none. It ended on a full-bleed photograph and then an empty
   grey band containing one stray blue hairline. */

.wb-cta { padding: 48px 0; }

.wb-cta__panel {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px 24px;
	background: var(--wb-navy);
	border-radius: 4px;
	color: #fff;
}

.wb .wb-cta__heading {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
}

.wb-cta__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	max-width: 52ch;
}

.wb-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (min-width: 768px) {
	.wb-cta__panel {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 40px;
	}
	.wb-cta__actions { flex: 0 0 auto; }
}

@media (min-width: 900px) {
	.wb-cta { padding: 72px 0; }
}