/* =========================================================================
   Download our brochure: template-brochure.php (/download-our-brochure/).
   Scoped to .br, mobile first, min-width media queries only (640 / 768 /
   900 / 1200). The house recipe from the 18 Sep 2026 spec
   (docs/superpowers/specs/2026-09-18-support-and-content-pages-design.md),
   plus what this page needs. Gravity Form 43 is styled by css/product.css
   through the .pd .pd-enquiry reuse; only namespaced overrides live here.

   Bands: navy split hero, product.css's standard grey form band, then a
   white help band above the navy footer (Green Grey directly under the grey
   form band reads as a seam, not a new band).
   ========================================================================= */

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

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

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

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

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

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

.br-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;
}


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

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

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

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

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

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

.br-section-head { margin-bottom: 28px; }

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


/* ---- 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. */
.br .br-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;
}

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

.br .br-btn--light { background: var(--br-lightblue); color: var(--br-navy); }

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

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

.br .br-hero :is(a, button):focus-visible { outline-color: #fff; }


/* ---- Hero ------------------------------------------------------------------
   Navy, copy left, the brochure cover right on its own light panel. The
   cover's own navy top and bottom would disappear into the band without it.
   The title is an h1: typography.css gives it DM Serif Display at 400. Never
   set its weight or family here. */

.br-hero {
	background: var(--br-navy);
	color: #fff;
}

.br-hero__inner {
	padding-top: 48px;
	padding-bottom: 48px;
}

.br-hero--split .br-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: center;
}

.br-hero__content,
.br-hero__panel { min-width: 0; }

.br-hero__content { max-width: 640px; }

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

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

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

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

.br-hero__panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px 24px;
	border-radius: 4px;
	background: var(--br-band-tint);
}

/* 1058x1497, so it is always shown well under its own size. */
.br .br-hero__cover {
	width: auto;
	max-height: 260px;
	box-shadow: 0 14px 32px rgba(24, 29, 70, 0.28);
}

@media (min-width: 900px) {
	.br-hero__inner { padding-top: 72px; padding-bottom: 72px; }

	.br-hero--split .br-hero__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: 64px;
	}

	.br .br-hero__title { font-size: 52px; }
	.br-hero__intro { font-size: 18px; }

	.br-hero__panel { padding: 40px; }
	.br .br-hero__cover { max-height: 400px; }
}


/* ---- Form ---------------------------------------------------------------------
   .pd .pd-enquiry from product.css carries the band, the layout and the form
   styling. The points panel is white on the grey band, like product.css's
   .pd-steps panel beside the quote forms. */

.br-points {
	display: grid;
	gap: 14px;
	margin: 28px 0 0;
	padding: 24px;
	border-radius: 4px;
	background: #fff;
	list-style: none;
}

.br-point {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	color: var(--br-navy);
}

.br-point__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	background: var(--br-band-tint);
	color: var(--br-navy);
}

.br .br-point__icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* product.css rings focus in light blue, 1.7:1 on white. */
.br .br-form .pd-enquiry__aside a:focus-visible {
	outline: 2px solid var(--br-navy);
	outline-offset: 3px;
}


/* ---- More help: link cards on white, with the house hairline -------------------- */

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

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

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

.br-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
	padding: 20px;
	border: 1px solid var(--br-grey);
	border-radius: 4px;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

.br-card__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 4px;
	background: var(--br-band-tint);
	color: var(--br-navy);
}

.br .br-card__icon svg {
	width: 26px;
	height: 26px;
	display: block;
}

.br-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.br .br-card__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--br-navy);
	text-transform: none;
}

/* One stretched link per card; desktop.css sets a { font-weight: 600 } and
   fades links on hover. */
.br .br-card__link {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.br .br-card__link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 4px;
}

.br .br-card__link:hover { opacity: 1; }
.br .br-card__link:focus-visible { outline: none; }
.br .br-card__link:focus-visible::after { outline: 2px solid var(--br-navy); outline-offset: 3px; }

.br-card__text {
	margin: 4px 0 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--br-muted);
}

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

.br-card:hover .br-card__chevron { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.br-card,
	.br .br-card__chevron { transition: none; }
	.br-card:hover .br-card__chevron { transform: none; }
}