/* =========================================================================
   Features and benefits (template-features.php).
   Scoped to .fe, mobile first, min-width queries at 640 / 768 / 900 / 1200.
   House recipe from docs/superpowers/specs/2026-09-18-support-and-content-
   pages-design.md; the cards follow .sn-why__card on the sector pages, the
   jump chips follow .pr-chip on the product range page.
   ========================================================================= */

.fe {
	--fe-navy: #181d46;      /* Billi Blue */
	--fe-lightblue: #90cdeb; /* primary button on dark, accents */
	--fe-grey: #eaeaea;      /* borders, rules */
	--fe-band-grey: #f5f5f5;
	--fe-band-tint: #f1f5f5; /* Green Grey */
	--fe-text: #000;
	--fe-muted: #75757b;
	--fe-gutter: 20px;
	/* Clears the fixed header on in-page jumps and deep links. */
	--fe-jump: calc(var(--header-chrome-h, 74px) + var(--trust-bar-h, 46px) + 16px);

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

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

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

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

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

.fe :is(ul, ol) { list-style: none; margin: 0; padding: 0; }


/* ---- Sections: white, grey or tint bands; navy only mid-page ------------- */

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

.fe-section--grey { background: var(--fe-band-grey); }
.fe-section--tint { background: var(--fe-band-tint); }
.fe-section--navy { background: var(--fe-navy); color: #fff; }

.fe-theme,
.fe-omni { scroll-margin-top: var(--fe-jump); }

.fe .fe-section-heading {
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.18;
	color: var(--fe-navy);
	text-transform: none;
	letter-spacing: normal;
}

.fe-section--navy .fe-section-heading { color: #fff; }

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

.fe-section--navy .fe-section-intro { color: rgba(255, 255, 255, .82); }

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

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

/* WYSIWYG-style output from the card and note fields. Base rules sit inside
   :where() so band overrides win. */
:where(.fe) .fe-card__text > :first-child,
:where(.fe) .fe-note > :first-child { margin-top: 0; }
:where(.fe) .fe-card__text > :last-child,
:where(.fe) .fe-note > :last-child { margin-bottom: 0; }
:where(.fe) .fe-card__text p { margin: 0 0 .75em; }
:where(.fe) .fe-card__text a,
:where(.fe) .fe-note a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.fe .fe-card__text a:hover,
.fe .fe-note a:hover { opacity: 1; }
.fe-section--navy .fe-card__text a { color: var(--fe-lightblue); }


/* ---- Buttons. desktop.css fades every link to .7 on hover: each 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. */
.fe .fe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 28px;
	border: 0;
	border-radius: 2px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

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

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

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

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

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

/* framework.css removes focus outlines sitewide. Navy on light grounds,
   white on navy. */
.fe :is(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--fe-navy);
	outline-offset: 3px;
}

.fe :is(.fe-hero, .fe-section--navy) :is(a, button, summary):focus-visible { outline-color: #fff; }


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

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

.fe-hero--plain { min-height: 0; }

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

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

/* A wide band crops a 3:2 photograph hard; keep its upper part, where the
   seeded photo's tap and glass are, rather than the centre. */
.fe .fe-hero__media img { object-position: 50% 30%; }

.fe-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(24, 29, 70, .35) 0%, rgba(24, 29, 70, .85) 100%),
		linear-gradient(90deg, rgba(24, 29, 70, .9) 0%, rgba(24, 29, 70, .55) 55%, rgba(24, 29, 70, .3) 100%);
}

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

.fe-hero__content { max-width: 720px; }

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

/* The title is an <h1>: typography.css gives it DM Serif Display at 400.
   Never set its weight or family here. */
.fe .fe-hero__title { margin: 0; color: #fff; font-size: 34px; line-height: 1.12; }

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

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

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


/* ---- Jump links: a chip row under the hero. Not sticky: position:sticky
   cannot work in this theme (#wrapper's overflow). ------------------------- */

.fe-jump {
	padding: 20px 0;
	background: #fff;
	border-bottom: 1px solid var(--fe-grey);
}

.fe-jump__list { display: flex; flex-wrap: wrap; gap: 8px; }

.fe .fe-chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 16px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--fe-navy);
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--fe-navy);
	border-radius: 2px;
	transition: background-color .2s ease, border-color .2s ease;
}

.fe .fe-chip:hover { opacity: 1; background: var(--fe-lightblue); border-color: var(--fe-lightblue); color: var(--fe-navy); }


/* ---- Feature cards ------------------------------------------------------------ */

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

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

@media (min-width: 900px) {
	.fe-grid { gap: 20px; }
	.fe-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

/* Tint cards on white bands, white cards on grey ones: #f1f5f5 on #f5f5f5
   would disappear. */
.fe-card {
	position: relative;
	min-width: 0;
	padding: 24px 22px;
	background: var(--fe-band-tint);
	border-radius: 4px;
	scroll-margin-top: var(--fe-jump);
	transition: box-shadow .3s ease;
}

.fe-section--grey .fe-card { background: #fff; }

/* The icon well follows .sn-why__icon on the sector pages. On a phone it sits
   beside the title rather than above it: 25 stacked cards, each a well's
   height shorter. */
.fe-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 2px;
	background: var(--fe-lightblue);
	color: var(--fe-navy);
}

.fe .fe-card__icon svg { display: block; width: 24px; height: 24px; }

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

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

.fe-card:has(> .fe-card__icon) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 14px;
	align-items: center;
}

.fe-card:has(> .fe-card__icon) > :not(.fe-card__icon):not(.fe-card__title) { grid-column: 1 / -1; }

@media (min-width: 640px) {
	.fe-card:has(> .fe-card__icon) { display: block; }
	.fe-card__icon { width: 48px; height: 48px; margin-bottom: 16px; }
	.fe .fe-card__icon svg { width: 26px; height: 26px; }
	.fe .fe-card__title { margin-bottom: 8px; }
	.fe-card__text { margin-top: 0; }
}

@media (min-width: 900px) {
	.fe-card { padding: 28px 26px; }
}

/* A link to one feature (a case study's #heat-exchange-technology) rings the
   card it lands on. Merged features land through an empty anchor span. */
.fe-anchor { position: absolute; top: 0; left: 0; width: 0; height: 0; scroll-margin-top: var(--fe-jump); }

.fe-card:target,
.fe-card:has(> .fe-anchor:target) { box-shadow: 0 0 0 2px var(--fe-navy); }

/* OmniOne: translucent cards on the navy band, no icons. */
.fe-section--navy .fe-card {
	background: rgba(255, 255, 255, .06);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.fe-section--navy .fe-card__title { color: #fff; }
.fe-section--navy .fe-card__text { color: rgba(255, 255, 255, .85); }

.fe-section--navy .fe-card:target,
.fe-section--navy .fe-card:has(> .fe-anchor:target) { box-shadow: 0 0 0 2px var(--fe-lightblue); }

.fe-omni__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 28px;
}

.fe-omni__head .fe-section-head { margin-bottom: 0; }

@media (min-width: 900px) {
	.fe-omni__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 40px;
		margin-bottom: 40px;
	}
	.fe-omni__head .fe-btn { flex: 0 0 auto; }
}

/* Small print: the footnotes the starred claims point to. */
.fe-note {
	margin-top: 24px;
	max-width: 80ch;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--fe-muted);
}

.fe-note p { margin: 0 0 .4em; }

.fe-section--navy .fe-note { color: rgba(255, 255, 255, .75); }


/* ---- Help band: Green Grey, never navy above the navy footer -------------- */

.fe-help__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fe .fe-help .fe-section-heading { margin-bottom: 8px; }

.fe-help__text { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.5; }

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

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


/* ---- Motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.fe *,
	.fe *::before,
	.fe *::after { transition: none !important; }
}