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

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

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

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

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

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

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

.ab-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. */
.ab [class*='__heading'] :is(h1, h2, h3, h4, h5, h6, p),
.ab [class*='__title'] :is(h1, h2, h3, h4, h5, h6, p),
.ab .ab-section-heading :is(h1, h2, h3, h4, h5, h6, p),
.ab .ab-section-intro :is(h1, h2, h3, h4, h5, h6, p) {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

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

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

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

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

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

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

.ab .ab-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). */
.ab .ab-btn:hover { opacity: 1; }

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

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

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

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

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

/* ---- Shared section scaffolding -----------------------------------------
   Prefixed with .ab throughout: the theme's stylesheets carry descendant
   heading rules such as `.single-case_studies h2` at (0,1,1), which beat a
   bare class. */

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

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

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

.ab .ab-section-heading:last-child { margin-bottom: 28px; }

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

/* ---- Hero ----------------------------------------------------------------
   Type-only. The old page opened on an <h2> in a #dde6eb slab, in a ~340px
   column, with the right half of the slab dead below the video. Neither this
   page nor Why choose Billi has a featured image, so there is nothing to fall
   back on and the band is plain navy unless one is set. */

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

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

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

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

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

.ab-hero__content { max-width: 760px; color: #fff; }

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

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

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

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

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

/* ---- Introduction ------------------------------------------------------- */

.ab-intro { padding: 48px 0; }

.ab-intro__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: start;
}

.ab-intro__text {
	font-size: 16px;
	line-height: 1.6;
	max-width: 68ch;
}

@media (min-width: 900px) {
	.ab-intro { padding: 72px 0; }
	.ab-intro__grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
	.ab-intro__text { font-size: 17px; }
}

/* ---- Video facade --------------------------------------------------------
   A button until it is clicked. Nothing is requested from YouTube on load. */

.ab-video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--ab-navy);
	border-radius: 4px;
	overflow: hidden;
}

/* Browsers without aspect-ratio support still need a box with height. */
@supports not (aspect-ratio: 16 / 9) {
	.ab-video { height: 0; padding-bottom: 56.25%; }
}

.ab-video__button {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 24px;
	background: none;
	border: 0;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.ab .ab-video__button:hover { opacity: 1; }

/* `.ab img` above sets `height: auto` at (0,1,1), which beats a bare class.
   Both of the sized images on this page need the extra .ab to win. */
.ab .ab-video__poster {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Darkened so the play mark and label hold up over any still. */
.ab-video__poster + .ab-video__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(24, 29, 70, 0.45);
}

.ab-video__play,
.ab-video__label { position: relative; z-index: 2; }

.ab-video__play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: var(--ab-lightblue);
	border-radius: 50%;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.ab-video__play svg { width: 22px; height: 22px; fill: var(--ab-navy); }

.ab-video__button:hover .ab-video__play { background: #fff; transform: scale(1.06); }

.ab-video__label { max-width: 34ch; line-height: 1.4; }

.ab-video__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ab-video__play { transition: none; }
	.ab-video__button:hover .ab-video__play { transform: none; }
}

/* ---- History -------------------------------------------------------------
   Was a flat 1400x509 PNG (attachment 160000). Nine milestones drawn as text
   inside artwork: illegible on a phone, nothing to a screen reader, nothing to
   search, and drawn in the pre-2026 blue-gradient brand.

   An <ol> against a spine. Mobile runs the spine down the left; from 900px the
   spine centres and entries alternate either side. The alternation is done with
   width and margin rather than explicit grid rows, so any number of milestones
   works without the CSS knowing the count. */

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

.ab-timeline {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ab-milestone;
}

/* The spine. Stops short at both ends so it does not run past the first and
   last markers. */
.ab-timeline::before {
	content: '';
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 7px;
	width: 2px;
	background: var(--ab-lightblue);
}

.ab-timeline__item {
	position: relative;
	padding: 0 0 32px 36px;
}

.ab-timeline__item:last-child { padding-bottom: 0; }

/* The marker. Decorative: the <ol> already carries the sequence. */
.ab-timeline__item::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 0;
	width: 16px;
	height: 16px;
	background: #fff;
	border: 3px solid var(--ab-navy);
	border-radius: 50%;
}

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

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

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

	.ab-timeline::before { left: 50%; transform: translateX(-1px); }

	.ab-timeline__item {
		width: 50%;
		padding: 0 48px 24px 0;
		text-align: right;
	}

	.ab-timeline__item::before {
		top: 6px;
		left: auto;
		right: -8px;
	}

	/* Even entries cross to the right of the spine. */
	.ab-timeline__item:nth-child(even) {
		margin-left: 50%;
		padding: 0 0 24px 48px;
		text-align: left;
	}

	.ab-timeline__item:nth-child(even)::before {
		right: auto;
		left: -8px;
	}

	/* The last entry still needs its share of the spine's bottom inset, so the
	   padding is kept and only the visual gap below the list is removed. */
	.ab-timeline__item:last-child { padding-bottom: 0; }

	.ab-timeline__text { display: inline-block; text-align: left; }
}

/* ---- What Billi stands for ---------------------------------------------- */

.ab-stands { padding: 48px 0; }

.ab-stands__text {
	max-width: 68ch;
	font-size: 16px;
	line-height: 1.6;
}

.ab-stands__link { margin-top: 24px; }

@media (min-width: 900px) {
	.ab-stands { padding: 72px 0; }
	.ab-stands__text { font-size: 17px; }

	/* Two short paragraphs left in one narrow column read as an accident next
	   to the full-width timeline above and the four-up card row below: the
	   right two thirds of the band are simply empty. There is no photograph
	   for this section and inventing one would be filler, so the copy uses the
	   width instead. Multi-column rather than a grid because the copy is a
	   single wysiwyg field, so the columns cannot be authored separately.

	   The cap keeps each column near 65 characters. Without it the columns
	   would run the full 1356px container and measure ~90. */
	.ab-stands__text {
		max-width: 1040px;
		columns: 2;
		column-gap: 56px;
	}

	/* A paragraph broken across the column boundary is worse than an uneven
	   pair of columns. With two paragraphs this lands one in each. */
	.ab-stands__text p { break-inside: avoid; }

	/* First paragraph already sits at the top of its column. */
	.ab-stands__text p:first-child { margin-top: 0; }
}

/* ---- Explore more --------------------------------------------------------
   Was four tiles captioned "Select >" inside one bordered box, each carrying a
   150px thumbnail of 2021 artwork. Those four PNGs came in four different
   weights and carried baked-in grey artefacts, so the row never read as a set.
   Icons are drawn by the theme now, one geometry for all four. */

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

.ab-tiles__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-tile {
	background: #fff;
	border: 1px solid var(--ab-grey);
	border-radius: 4px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ab-tile:hover {
	border-color: var(--ab-navy);
	box-shadow: 0 6px 20px rgba(24, 29, 70, 0.10);
	transform: translateY(-2px);
}

.ab-tile__link {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
	padding: 18px 20px;
	color: var(--ab-navy);
	text-decoration: none;
}

.ab .ab-tile__link:hover { opacity: 1; }

/* The tinted square behind the icon. Gives the four glyphs a common footprint
   whatever shape they are, which is what makes the row read as a set. */
.ab-tile__badge {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--ab-band-blue);
	border-radius: 4px;
	color: var(--ab-navy);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ab-tile__link:hover .ab-tile__badge {
	background: var(--ab-navy);
	color: #fff;
}

/* `.ab img` sets `height: auto` at (0,1,1); an inline <svg> is not an <img>,
   but the icon is sized here explicitly anyway so the badge never depends on
   the SVG's own intrinsic box. */
.ab .ab-tile__icon {
	width: 22px;
	height: 22px;
	display: block;
}

.ab-tile__foot {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
}

/* desktop.css:346 sets `a { font-weight: 600 }`, so body copy inside a
   card-wide link renders Demi unless it is told otherwise. The title wants
   Demi, so this one is deliberate rather than inherited. */
.ab .ab-tile__title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ab-navy);
}

.ab-tile__arrow {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	fill: var(--ab-navy);
	transition: transform 0.2s ease;
}

.ab-tile__link:hover .ab-tile__arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.ab-tile,
	.ab-tile__badge,
	.ab-tile__arrow { transition: none; }
	.ab-tile:hover { transform: none; }
	.ab-tile__link:hover .ab-tile__arrow { transform: none; }
}

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

@media (min-width: 900px) {
	.ab-tiles { padding: 72px 0; }
	.ab-tiles__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }

	.ab-tile__link {
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
		padding: 24px;
	}

	.ab-tile__foot { flex: 0 0 auto; width: 100%; }
}

/* ---- CTA ---------------------------------------------------------------- */

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

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

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

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

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

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

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