/*
 * BrainAbouts — brand tokens, plus the site chrome that the JFJC stylesheet
 * (style-lapraim.css) has no rules for: the "Powered by JFJC" mark, the footer
 * contact line and the social icon row. Everything else in the header and
 * footer reuses JFJC's #main-header / #main-footer contract untouched.
 *
 * This file is enqueued last (it depends on jfjc-impreza8-compat, which loads
 * at priority 100), so equal-specificity rules here beat both JFJC stylesheets.
 */

/* -----------------------------------------------------------------------------
 * Brand tokens.
 *
 * Source of truth is the legacy BrainAbouts Drupal theme's own variables file,
 * docroot/themes/custom/brainabouts/scss/_themevariables.scss — not a sample
 * taken off a rendered page. Impreza's palette keys are set from the same
 * tokens by tools/ba-install-palette.php; these exist because the two JFJC
 * stylesheets hardcode colours that Impreza's generated CSS never gets to set.
 * Anything colour-related in this file must use a token, never a literal.
 * -------------------------------------------------------------------------- */
:root {
	--ba-yellow: #ffd100;        /* $ba-btn-yellow       — primary CTA */
	--ba-yellow-hover: #e5bc00;  /* $ba-btn-yellow-hover */
	--ba-teal: #84dade;          /* $ba-btn-blue         — BA's own .btn-primary */
	--ba-teal-hover: #46bec3;    /* $ba-btn-blue-hover */
	--ba-blue: #00a9e0;          /* $ba-text-blue        — links and accents */
	--ba-blue-deep: #005f80;     /* $ba-text-secondary */
	--ba-text: #36454d;          /* $ba-text-color */
	--ba-ink: #1a1919;           /* $theme-black-color   — headings */

	/*
	 * Type. Measured off the live legacy site (www.brainabouts.org/en/about),
	 * not inferred from the SCSS: display copy is Plau-Medium 700, body and UI
	 * are Roboto, and BrainAbouts tracks everything at about -0.025em.
	 */
	--ba-font-display: "Plau-Medium", "Roboto", helvetica, arial, sans-serif;
	/*
	 * The Regular cut. BrainAbouts mixes the two: site headings are Plau-Medium,
	 * but the legacy "Did you know?" block asks for $ba-font-family, which its
	 * own @font-face binds to PlauRegular. Both are synthesised up to 900 the
	 * same way, so the difference is stroke weight and set width, not colour.
	 */
	--ba-font-display-regular: "Plau", "Roboto", helvetica, arial, sans-serif;
	--ba-font-body: "Roboto", helvetica, arial, sans-serif;
	--ba-tracking: -0.025em;

	/*
	 * The legacy type scale: a 1.2 modular ratio, named in the Drupal theme's
	 * _themevariables.scss. Kept as px because that is how BrainAbouts sizes
	 * its display copy — the ratio, not a rem rhythm, is what holds it together.
	 */
	--ba-f-13: 13.33px;
	--ba-f-16: 16px;
	--ba-f-19: 19.2px;
	--ba-f-23: 23.04px;
	--ba-f-28: 27.65px;
	--ba-f-33: 33.18px;
	--ba-f-39: 39.81px;
	--ba-f-47: 47.78px;
	--ba-f-57: 57.33px;

	/*
	 * The "Did you know?" cream. The legacy declares it as
	 * rgba(255, 230, 204, .5) over white; flattened here so the band cannot
	 * pick up whatever happens to sit behind it. It doubles as the label
	 * colour inside the percentage badges, which is why they read as holes
	 * punched out of the band rather than as white text.
	 */
	--ba-cream: #fff3e5;

	/* Surfaces. The pale blue is JFJC's tint of the same cyan, which rounds
	   identically from BrainAbouts' #00a9e0. Radius is the legacy's 8px. */
	--ba-blue-tint: #ebf7fb;
	--ba-sky: #e5f9ff;          /* legacy pale-blue bands (Book Us Now hero, takeaways) */
	--ba-orange: #ff8300;       /* legacy .orange-txt / .orange-block */
	--ba-radius: 8px;
	--ba-rule: #e8e8e8;         /* hairline dividers (JFJC team rule) */
	--ba-shadow: 0 2px 12px rgba(26, 25, 25, 0.08);
	--ba-shadow-lift: 0 28px 28px rgba(0, 0, 0, 0.1); /* legacy .contact-block card */
	--ba-field-border: #8a9699;  /* legacy webform input border */
}

/* -----------------------------------------------------------------------------
 * Fonts.
 *
 * Plau is BrainAbouts' display face, self-hosted here exactly as the legacy
 * Drupal theme self-hosted it (files copied from
 * docroot/themes/custom/brainabouts/fonts/). Roboto comes from Google Fonts,
 * the same source and weights the legacy theme requested.
 *
 * The legacy @font-face had a bug worth not copying: it pointed BOTH the
 * woff and woff2 sources at PlauRegular.woff, so the smaller .woff2 never
 * got used. Fixed here, and woff2 is listed first so browsers prefer it.
 *
 * THE WEIGHT DESCRIPTOR IS LOAD-BEARING — do not widen it to a range.
 * Plau-Medium.ttf is a single STATIC face (no fvar table, OS/2 usWeightClass
 * 500, name ID 17 "Medium"), and BrainAbouts owns no bold Plau at all: the
 * legacy theme's fonts/ directory holds exactly this file and PlauRegular.
 * So the heavy headings on www.brainabouts.org are the BROWSER synthesizing
 * bold over the Medium outlines — the legacy @font-face declares no weight,
 * defaults to normal, and every heading asks for 700.
 *
 * Declaring `font-weight: 400 900` here claimed this one file covered the
 * whole range, so 700 and 900 matched it exactly, synthesis never ran, and
 * headings rendered as plain Medium — visibly lighter than the legacy, and
 * immune to turning the weight up. Measured over the same string at 48px:
 * 5409 inked pixels without synthesis, 7078 with. Declaring the real 500
 * restores it. Note Chrome's synthetic bold is one fixed step, so 700 and
 * 900 are identical; there is no heavier setting to reach for.
 * -------------------------------------------------------------------------- */
@font-face {
	font-family: "Plau-Medium";
	src: url("fonts/Plau-Medium.ttf") format("truetype");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Plau";
	src: url("fonts/PlauRegular.woff2") format("woff2"),
		url("fonts/PlauRegular.woff") format("woff");
	font-weight: 400;
	font-display: swap;
}

/* -----------------------------------------------------------------------------
 * Type scale and section spacing — the site-wide baseline (2026-09-24).
 *
 * Extrapolated from the legacy public pages (the 1.2 modular scale above,
 * -0.025em tracking, three tiers at 767/991) and the JFJC baseline this site
 * was cloned from (readable 1.5 body line-height). Blocks should take their
 * type from here and carry layout only.
 *
 * Why here and not in Impreza's theme options: the options are stored as the
 * legacy flat keys, which ba-install-palette.php rewrites on every run, and
 * style-lapraim.css hardcodes px heading sizes (42/34/28/24/20/16) on bare
 * element selectors that beat the generated CSS on load order anyway. So this
 * file redefines Impreza's own --hN-* variables and binds the elements back to
 * them; anything else in Impreza that reads those variables follows along.
 *
 * Tiers: desktop >= 992, tablet 768-991, phone <= 767 (the legacy breakpoints).
 * -------------------------------------------------------------------------- */
:root {
	--h1-font-family: var(--ba-font-display);
	--h2-font-family: var(--ba-font-display);
	--h3-font-family: var(--ba-font-display);
	--h4-font-family: var(--ba-font-display);
	--h5-font-family: var(--ba-font-display);
	--h6-font-family: var(--ba-font-display);

	--h1-font-size: var(--ba-f-57);
	--h2-font-size: var(--ba-f-47);
	--h3-font-size: var(--ba-f-39);
	--h4-font-size: var(--ba-f-33);
	--h5-font-size: var(--ba-f-28);
	--h6-font-size: var(--ba-f-23);

	--h1-line-height: 1.12;
	--h2-line-height: 1;
	--h3-line-height: 1;
	--h4-line-height: 1.1;
	--h5-line-height: 1.1;
	--h6-line-height: 1.1;

	--h1-letter-spacing: var(--ba-tracking);
	--h2-letter-spacing: var(--ba-tracking);
	--h3-letter-spacing: var(--ba-tracking);
	--h4-letter-spacing: var(--ba-tracking);
	--h5-letter-spacing: var(--ba-tracking);
	--h6-letter-spacing: var(--ba-tracking);

	/* Content rhythm. */
	--ba-heading-gap: 16px;       /* below a heading */
	--ba-heading-gap-tight: 8px;  /* below a heading that a subtitle follows */
	--ba-subtitle-gap: 24px;
	--ba-paragraph-gap: 16px;

	/* Body copy. */
	--ba-text-lg: var(--ba-f-19);
	--ba-text-md: var(--ba-f-16);
	--ba-text-sm: var(--ba-f-13);

	/* Subtitles. */
	--ba-subtitle-size: var(--ba-f-28);
	--ba-tagline-size: var(--ba-f-28);

	/* Section padding (top and bottom) for Impreza's row heights. */
	--ba-section-sm: 32px;
	--ba-section-md: 64px;
	--ba-section-lg: 100px;
}
@media all and (max-width: 1199px) {
	:root {
		--ba-tagline-size: var(--ba-f-23);
	}
}
@media all and (max-width: 991px) {
	:root {
		--h1-font-size: var(--ba-f-47);
		--h2-font-size: var(--ba-f-39);
		--h3-font-size: var(--ba-f-33);
		--h4-font-size: var(--ba-f-28);
		--h5-font-size: var(--ba-f-23);
		--h6-font-size: var(--ba-f-19);
		--ba-section-md: 48px;
		--ba-section-lg: 64px;
	}
}
@media all and (max-width: 767px) {
	:root {
		--h1-font-size: var(--ba-f-39);
		--h2-font-size: var(--ba-f-33);
		--h3-font-size: var(--ba-f-28);
		--h4-font-size: var(--ba-f-23);
		--h5-font-size: var(--ba-f-19);
		--ba-subtitle-size: var(--ba-f-23);
		--ba-section-sm: 24px;
		--ba-section-md: 32px;
		--ba-section-lg: 48px;
	}
}

/*
 * Bind the elements back to the variables. Lapraim declares size, weight
 * (600), line-height and margin on bare h1-h6 at the same specificity as
 * Impreza's own `h2 { font-size: var(--h2-font-size) }`, and it is imported
 * after the generated us-assets CSS — so it won every tie. This file loads
 * last, so the same selectors win here. Weight stays on the theme option (700,
 * per the legacy site; Plau's bold is synthesised, see the @font-face note).
 */
h1, .ba-h1 { font-size: var(--h1-font-size); line-height: var(--h1-line-height); }
h2, .ba-h2 { font-size: var(--h2-font-size); line-height: var(--h2-line-height); }
h3, .ba-h3 { font-size: var(--h3-font-size); line-height: var(--h3-line-height); }
h4, .ba-h4 { font-size: var(--h4-font-size); line-height: var(--h4-line-height); }
h5, .ba-h5 { font-size: var(--h5-font-size); line-height: var(--h5-line-height); }
h6, .ba-h6 { font-size: var(--h6-font-size); line-height: var(--h6-line-height); }

h1 { font-weight: var(--h1-font-weight, 700); letter-spacing: var(--h1-letter-spacing); }
h2 { font-weight: var(--h2-font-weight, 700); letter-spacing: var(--h2-letter-spacing); }
h3 { font-weight: var(--h3-font-weight, 700); letter-spacing: var(--h3-letter-spacing); }
h4 { font-weight: var(--h4-font-weight, 700); letter-spacing: var(--h4-letter-spacing); }
h5 { font-weight: var(--h5-font-weight, 700); letter-spacing: var(--h5-letter-spacing); }
h6 { font-weight: var(--h6-font-weight, 700); letter-spacing: var(--h6-letter-spacing); }

h1, h2, h3, h4, h5, h6 {
	margin-bottom: var(--ba-heading-gap);
}
h1:has(+ .ba-subtitle), h2:has(+ .ba-subtitle), h3:has(+ .ba-subtitle),
h4:has(+ .ba-subtitle), h5:has(+ .ba-subtitle), h6:has(+ .ba-subtitle) {
	margin-bottom: var(--ba-heading-gap-tight);
}

/*
 * `.ba-hN` sets the LOOK of a heading level independently of its tag, so the
 * document outline and the visual scale can differ (e.g. a page's h1 set at
 * h2 size). Only size and line-height vary by level; the rest is shared.
 */
.ba-h1, .ba-h2, .ba-h3, .ba-h4, .ba-h5, .ba-h6 {
	font-family: var(--ba-font-display);
	font-weight: 700;
	letter-spacing: var(--ba-tracking);
}

/*
 * Subtitles.
 * .ba-subtitle — the legacy's line under a title ("A toolbox empowering…"):
 *   Roboto 600 at $ba-font-27, 114%. The most common subtitle on the old site.
 * .ba-tagline — the display-face variant (legacy .default-text / "Did you
 *   know?" copy): Plau Regular at $ba-font-27, dropping to 23 below 1200.
 */
.ba-subtitle {
	font-family: var(--ba-font-body);
	font-weight: 600;
	font-size: var(--ba-subtitle-size);
	line-height: 1.14;
	letter-spacing: var(--ba-tracking);
	margin-bottom: var(--ba-subtitle-gap);
}
.ba-tagline {
	font-family: var(--ba-font-display-regular);
	font-weight: 700;
	font-size: var(--ba-tagline-size);
	line-height: 1;
	letter-spacing: var(--ba-tracking);
	margin-bottom: var(--ba-subtitle-gap);
}

/*
 * Body copy. Lapraim sets `p, li { font-size: 17px; line-height: 1.5 }`
 * (15px below 900) and `p { margin-bottom: 20px }`. Sizes come from the legacy
 * scale; line-height stays at JFJC's 1.5 because the legacy's 110% is cramped
 * over more than a line or two. The size classes work on the element itself
 * or on a wrapper around it.
 */
p, li {
	font-size: var(--ba-text-md);
	line-height: 1.5;
}
p {
	margin-bottom: var(--ba-paragraph-gap);
}
.ba-text-lg, .ba-text-lg p, .ba-text-lg li {
	font-size: var(--ba-text-lg);
	line-height: 1.4;
}
.ba-text-sm, .ba-text-sm p, .ba-text-sm li {
	font-size: var(--ba-text-sm);
	line-height: 1.5;
}

/*
 * Section spacing. Impreza's row heights already sit close to the legacy's
 * three tiers (2/4/6rem), but collapse differently on small screens (medium
 * falls to 1.5rem, large to 6vmax). Re-pointing the existing classes means
 * every seeded row picks the tiers up without a seed change. `huge` is left
 * to Impreza (only the home video hero uses it, with its own padding).
 */
.l-section.height_small  { --ba-section-pad: var(--ba-section-sm); }
.l-section.height_medium { --ba-section-pad: var(--ba-section-md); }
.l-section.height_large  { --ba-section-pad: var(--ba-section-lg); }
.l-section.height_small,
.l-section.height_medium,
.l-section.height_large {
	padding-top: var(--ba-section-pad);
	padding-bottom: var(--ba-section-pad);
}

/*
 * The first section clears the fixed header, then gets its tier on top.
 * Replaces Lapraim's hardcoded `section.l-section:first-child` 160px (120px
 * below 1023), matching its specificity. Must stay ABOVE the .ba-hero rules,
 * which tie with this selector and override it for the home hero.
 */
section.l-section:first-child {
	padding-top: calc(var(--ba-header-h) + var(--ba-section-pad, 0px));
}

/*
 * Header: always white, like the legacy BrainAbouts header. JFJC's header is
 * transparent until scrolled, which hides the yellow wordmark over coloured
 * first sections (the yellow Our Model hero). The :after layer is the white
 * background JFJC fades in on scroll; keep it visible from the start.
 */
header#main-header:after {
	opacity: 1;
}
header#main-header {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
}

/* Header logo: the SVG has a 195×40 viewBox; keep it on one line with the nav. */
header#main-header a.header-logo-link img {
	width: auto;
}

/* Mobile nav toggle: Lapraim draws the three bars in JFJC's cyan. */
header#main-header span#ham-menu span {
	background-color: var(--ba-blue);
}

/*
 * Desktop nav, measured on the legacy header (www.brainabouts.org). Below
 * 1200px it is the hamburger panel (below).
 *
 * Buttons (Sign In / Sign Up, see the header walker): 40px tall, Roboto 600
 * at $ba-font-13 uppercase, 12px side padding, 25px apart; the 24px icon
 * (Sign In / Sign Up icons, below) sits 7px from the label. Lapraim sizes them
 * as JFJC's 17px, 120px-minimum Donate button.
 *
 * Dropdowns: the legacy's chevron (images/menu-down.svg) in place of
 * Lapraim's small Font Awesome angle, and a borderless-looking panel with a
 * soft shadow, 16px items.
 */
@media all and (min-width: 1200px) {
	header#main-header nav.header-page-links span a.button {
		min-width: 0;
		height: 40px;
		padding: 0 12px;
		box-shadow: none;
		font-family: var(--ba-font-body);
		font-size: var(--ba-f-13);
		font-weight: 600;
		text-transform: uppercase;
	}
	header#main-header nav.header-page-links span a.button::before {
		margin-right: 7px;
	}
	header#main-header nav.header-page-links span.button-wrapper + span.button-wrapper {
		margin-left: 25px;
	}
	header#main-header nav.header-page-links span.more > a::after {
		content: "";
		width: 24px;
		height: 24px;
		margin-left: 4px;
		background: url("images/menu-down.svg") center / contain no-repeat;
	}
	header#main-header nav.header-page-links span.more .dropdown {
		padding: 8px 0;
		border: 1px solid var(--ba-rule);
		border-radius: 0 0 5px 5px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}
	header#main-header nav.header-page-links span.more .dropdown a {
		padding: 6px 12px;
		border-radius: 0;
		font-size: var(--ba-f-16);
		color: var(--ba-ink);
	}
}

/*
 * Hamburger nav from 1199px down. BrainAbouts' logo and seven items (two of
 * them buttons) need about 1124px before they touch and 1200px for a
 * comfortable gap; JFJC's shorter nav fit down to Lapraim's 1023px switch.
 * style-lapraim.css already covers <= 1023, so this repeats its mobile header
 * rules (same selectors, same values) for 1024-1199 only.
 */
@media all and (min-width: 1024px) and (max-width: 1199px) {
	header#main-header {
		height: 60px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	}
	header#main-header a.header-logo-link img {
		height: 40px;
	}
	header#main-header span#ham-menu {
		display: inline-flex;
	}
	header#main-header nav.header-page-links {
		transform: translateX(100%);
		transition: all 0.4s cubic-bezier(0.49, 0.01, 0.22, 1);
		position: fixed;
		bottom: 0;
		right: 0;
		width: 250px;
		max-height: none;
		height: calc(100% - 60px);
		background-color: #fff;
		display: block;
		z-index: -1;
		border-top: 1px solid lightgrey;
	}
	header#main-header.mobile-reveal nav.header-page-links {
		transform: none;
	}
	header#main-header.mobile-reveal:before {
		opacity: 1;
		visibility: visible;
	}
	header#main-header nav.header-page-links > * {
		height: auto;
		display: block;
	}
	header#main-header nav.header-page-links span.more .dropdown {
		display: block;
		position: relative;
		left: unset;
		top: unset;
		border: none;
		border-bottom: 1px solid lightgrey;
		padding-left: 15px;
		border-left: 4px solid var(--ba-yellow);
	}
	header#main-header nav.header-page-links span.more .dropdown a {
		padding: 10px;
		border-radius: 5px;
	}
	header#main-header nav.header-page-links span.button-wrapper {
		padding: 10px;
		margin-top: 20px;
	}
	header#main-header nav.header-page-links span > a {
		border-bottom: 1px solid lightgrey;
	}
	header#main-header nav.header-page-links span a {
		display: block;
		margin: 0;
		padding: 10px 20px;
		width: 100%;
	}
	header#main-header nav.header-page-links span a:not(.button):hover {
		background-color: #f8f8f8;
	}
}

/* -----------------------------------------------------------------------------
 * Home hero (.ba-hero, set by tools/seed-ba-home.php).
 *
 * #main-header is position:fixed and nothing reserves space for it, so the
 * hero starts at y=0 and the nav floats over its top. Filling the screen
 * therefore means min-height:100vh with the nav's height as padding, which
 * leaves exactly 100vh-minus-nav of usable area and keeps the headline
 * centred in it rather than sitting under the logo.
 *
 * The header drops from 110px to 60px where the nav becomes the hamburger
 * (1199px, see "Hamburger nav" below), so the padding tracks the same breakpoint.
 * -------------------------------------------------------------------------- */
:root {
	--ba-header-h: 110px;
}
@media all and (max-width: 1199px) {
	:root {
		--ba-header-h: 60px;
	}
}

/*
 * `section` is in the selector to match the specificity of Lapraim's
 * `section.l-section:first-child { padding-top: 160px }` — JFJC's hardcoded
 * clearance for the same fixed header. This file loads later, so the tie
 * resolves here and the padding tracks the real header height instead.
 */
section.l-section.ba-hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding-top: var(--ba-header-h);
	padding-bottom: 0;
}
/* The overlay and the <video> are absolutely positioned, so they stay out of
   the flex flow; only the content wrapper becomes the flex item. */
.l-section.ba-hero > .l-section-h {
	width: 100%;
}

/* -----------------------------------------------------------------------------
 * Home sign-in band (.ba-login, tools/seed-ba-home.php; the card is
 * [ba_app_login] in functions.php).
 *
 * Legacy `section.login`, measured on www.brainabouts.org at 1653px: a teal
 * band around a 1080px container; the welcome copy (512px measure, white h1
 * then two Roboto 700 lines at $ba-font-27) beside a 428px white card,
 * centred on each other (the legacy tops them together; changed 2026-09-28), and
 * under both a white "Want access" box (radius 8, 50px padding, 64px below).
 * Stacked below 1024px, where style-lapraim.css stacks every column; the
 * legacy moves the card between the title and the copy on phones, this keeps
 * the copy together above it.
 * -------------------------------------------------------------------------- */
.l-section.ba-login {
	background-color: var(--ba-teal-hover);
}
/* The copy and the card run to the container's edges, as on the legacy; the
   5/12 column's spare width is the gap between them. `section.l-section`
   prefix outranks Impreza's `.g-cols.via_flex>div>.vc_column-inner` padding. */
section.l-section.ba-login .g-cols.via_flex > .wpb_column > .vc_column-inner {
	padding-left: 0;
	padding-right: 0;
}
.ba-login .ba-login__welcome :is(h1, p) {
	color: #fff;
}
.ba-login .ba-login__welcome .wpb_text_column {
	max-width: 512px;
}
/* Without WPBakery's 30px gap under the text block, so centring is true.
   `.l-section` prefix: matches impreza8-compat.css's specificity. */
.l-section.ba-login .ba-login__welcome .wpb_text_column {
	margin-bottom: 0;
}
.ba-login .ba-login__welcome h1 {
	margin-bottom: 32px;
}
.ba-login .ba-login__welcome .ba-subtitle {
	font-weight: 700;
	line-height: 1.2;
}
/* `.wpb_text_column` prefix: Impreza zeroes a text block's last child margin. */
.ba-login .ba-login__welcome .wpb_text_column p.ba-subtitle {
	margin-bottom: 24px;
}
.ba-login .ba-login__welcome .wpb_text_column p.ba-subtitle:last-child {
	margin-bottom: 0;
}

.ba-login-card {
	max-width: 428px;
	margin-left: auto;
	padding: 22px 32px;
	background-color: #fff;
	border: 1px solid var(--ba-rule);
	border-radius: 10px;
	text-align: center;
}
.ba-login-card .ba-login-card__title {
	margin: 2px 0 18px;
	font-size: var(--h2-font-size);
	line-height: 1;
	color: var(--ba-ink);
}
.ba-login-card .ba-login-card__hint {
	margin-bottom: 24px;
	color: var(--ba-ink);
}
.ba-login-card__form {
	display: flex;
	flex-direction: column;
	text-align: left;
}
.ba-login-card__form label {
	margin-bottom: 4px;
	font-family: var(--ba-font-display);
	font-size: var(--ba-f-19);
	font-weight: 700;
	line-height: 1.5;
	color: var(--ba-ink);
}
/* Same field as the contact form (.wpcf7 rules below). Selector ties with
   impreza8-compat.css's `form input:not(…):not(…):not(…)` 17px rule. */
.ba-login-card form.ba-login-card__form input[type="email"] {
	width: 100%;
	height: 48px;
	padding: 0 15px;
	border: 1px solid var(--ba-field-border);
	border-radius: 4px;
	background-color: #fff;
	box-shadow: none;
	font-family: var(--ba-font-body);
	font-size: var(--ba-f-16);
	color: var(--ba-text);
}
.ba-login-card__form button.button {
	align-self: flex-end;
	min-width: 0;
	height: 39px;
	margin-top: 40px;
	padding: 0 15px;
	box-shadow: none;
	font-family: var(--ba-font-body);
	font-size: var(--ba-f-16);
	font-weight: 600;
	text-transform: uppercase;
}

.ba-login .w-hwrapper.ba-login__cta {
	justify-content: center;
	gap: 32px;
	margin-top: 64px;
	padding: 50px;
	background-color: #fff;
	border-radius: var(--ba-radius);
}
/* `.l-section` prefix: impreza8-compat.css restores WPBakery's 30px gap under
   every text block, at a specificity this has to match. */
.l-section.ba-login .ba-login__cta > .wpb_text_column {
	flex: 0 1 auto;
	margin: 0;
}
.ba-login__cta h2 {
	margin: 0;
}
.ba-login__cta .w-btn {
	min-width: 0;
	height: 60px;
	padding: 0 24px;
	margin: 0;
	border-radius: var(--ba-radius);
	box-shadow: none;
	font-size: var(--ba-f-19);
	font-weight: 600;
	text-transform: uppercase;
}

@media all and (max-width: 1023px) {
	.ba-login .ba-login__welcome .wpb_text_column {
		max-width: none;
	}
	.ba-login-card {
		margin: var(--ba-section-sm) auto 0;
	}
	.ba-login .w-hwrapper.ba-login__cta {
		margin-top: var(--ba-section-md);
		padding: 40px;
	}
}
@media all and (max-width: 767px) {
	.ba-login .w-hwrapper.ba-login__cta {
		flex-direction: column;
		gap: 24px;
		padding: 32px 20px;
		text-align: center;
	}
}

/* Home testimonials: the legacy opens this section with 140px, not the
   large tier, to set it apart from the "Did you know?" band above. */
.l-section.ba-testimonials {
	padding-top: calc(var(--ba-section-lg) + 40px);
}

/* -----------------------------------------------------------------------------
 * Title band (.ba-title-band, with .ba-section-blue): a page title on a
 * full-bleed blue band, legacy `.cta-block` at the top of the Gallery page
 * (40px padding, h1 at $ba-font-47 centred).
 * -------------------------------------------------------------------------- */
.l-section.ba-title-band {
	--ba-section-pad: 40px;
	padding-bottom: var(--ba-section-pad);
}
.ba-title-band .wpb_text_column h1 {
	margin: 0;
}

/* -----------------------------------------------------------------------------
 * Buttons.
 *
 * Every button the seed scripts emit carries el_class="blue" or "yellow", and
 * style-lapraim.css paints those classes with JFJC's brand ($blue #00a7e0,
 * $yellow #fed103) — it wins over whatever Impreza generates from the theme
 * options, so ba-install-palette.php cannot reach them. impreza8-compat.css
 * then sets the matching hover backgrounds. Both are re-pointed at the
 * BrainAbouts tokens here, matching each original's selector list and
 * specificity so load order decides.
 *
 * Text colours are deliberately left alone: Lapraim already gives .blue white
 * text and .yellow black text, which is what BrainAbouts uses too.
 * -------------------------------------------------------------------------- */
/*
 * `.blue` becomes BrainAbouts' teal secondary button. Measured off the legacy
 * site, the "Sign in" button is `#84dade` with `#1a1919` text — NOT a blue
 * with white text. That also retires a real accessibility bug inherited from
 * JFJC: white on the cyan measured 2.71:1, under the 4.5 AA floor. Teal with
 * BrainAbouts' near-black is 10.91:1.
 *
 * Radius follows the legacy too: 8px on the teal button, 10px on the yellow
 * (JFJC used 5px for both).
 */
a.button.blue,
a.w-btn.blue,
button.button.blue,
span.button.blue,
input[type="submit"].button.blue {
	background-color: var(--ba-teal);
	border-radius: 8px;
}
a.button.yellow,
a.w-btn.yellow,
button.button.yellow,
span.button.yellow,
input[type="submit"].button.yellow {
	background-color: var(--ba-yellow);
	border-radius: 10px;
}

/*
 * Lapraim also ships `.blue` / `.yellow` / `.lightblue` as generic TEXT colour
 * utilities (style-lapraim.css `*.blue { color: #00a7e0 }`), which the seeds
 * use on eyebrow lines like the home page's "Welcome to the BrainAbouts Core!".
 * The button rules above only set backgrounds, so these need re-pointing too.
 * `.lightblue` maps to Impreza's secondary, which ba-install-palette.php has
 * already set to the BrainAbouts teal.
 */
*.blue {
	color: var(--ba-blue);
}
*.yellow {
	color: var(--ba-yellow);
}
*.lightblue {
	color: var(--color-content-secondary);
}
/* The legacy's darker teal heading colour (e.g. Our Model "Relationships"). */
*.teal {
	color: var(--ba-teal-hover);
}
/* …but a button is coloured by its background, so restore Lapraim's text
   colours where the class lands on one. */
/*
 * Impreza's generated button style ends with `color:#ffffff!important`, so an
 * ordinary declaration cannot set button text. `!important` is required to
 * answer it — the same reason impreza8-compat.css already uses it on the
 * yellow hover state. Without this, .blue rendered white-on-teal at 1.9:1.
 */
a.button.blue,
a.w-btn.blue,
button.button.blue,
span.button.blue,
input[type="submit"].button.blue {
	color: var(--ba-ink) !important;
}
a.button.yellow,
a.w-btn.yellow,
button.button.yellow,
span.button.yellow,
input[type="submit"].button.yellow {
	color: #000 !important;
}

/* -----------------------------------------------------------------------------
 * Sign In / Sign Up icons.
 *
 * The legacy buttons carry a 24×24 user glyph before the label
 * (usersign.png / UserReg.png, copied from the Drupal theme). Rather than
 * change the nav walker and the page seeds to emit an <img>, key off the
 * destination: only the two buttons that point at the app get an icon, so
 * "Contact Us" and "Read More" — which share the same .blue/.yellow classes —
 * are untouched. Lapraim already lays buttons out as a centred inline-flex.
 * -------------------------------------------------------------------------- */
a.button[href*="app.brainabouts.org"]::before,
a.w-btn[href*="app.brainabouts.org"]::before {
	content: "";
	/*
	 * Impreza already owns this pseudo: `.w-btn:before` in style.min.css is an
	 * absolutely-positioned inset box that paints the button border, which is
	 * why the icon pinned itself to the top-left corner instead of sitting on
	 * the flex line. Returning it to the flow is the whole fix — the button is
	 * already `inline-flex; align-items:center; justify-content:center`, so the
	 * icon and the label centre as one group, matching the legacy button.
	 * Nothing is lost: --btn-border-width is 0px, and style-lapraim.css hides
	 * this pseudo site-wide anyway.
	 */
	position: static;
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-right: 8px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	flex: 0 0 auto;
}
a.button[href*="app.brainabouts.org/login"]::before,
a.w-btn[href*="app.brainabouts.org/login"]::before {
	background-image: url("images/usersign.png");
}
a.button[href*="app.brainabouts.org/register"]::before,
a.w-btn[href*="app.brainabouts.org/register"]::before {
	background-image: url("images/UserReg.png");
}

.no-touch a.button.blue:hover,
.no-touch a.w-btn.blue:hover {
	background: var(--ba-blue);
}
.no-touch a.button.yellow:hover,
.no-touch a.w-btn.yellow:hover,
.no-touch button.button.yellow:hover,
.no-touch span.button.yellow:hover,
.no-touch input[type="submit"].button.yellow:hover {
	background: var(--ba-yellow-hover);
}

/* -----------------------------------------------------------------------------
 * "The BrainAbouts Model" pillars (.ba-model, set by tools/seed-ba-home.php).
 *
 * The legacy block is `<div class="bamodel"><img><span class="model-title">`
 * with the summary paragraph after it, so the icon shares a row with the title
 * alone and the body copy runs the full column width beneath both. Impreza's
 * iconpos="left" instead puts the icon beside the whole box, which indents the
 * summary and narrows it to whatever the icon leaves over.
 *
 * A two-column grid restores the legacy shape without changing the shortcode:
 * `display:contents` dissolves .w-iconbox-meta so the title and the text become
 * grid items in their own right and can be placed on separate rows.
 *
 * Geometry measured on www.brainabouts.org/en/about: 64px icon, 12px to the
 * title, 16px to the summary; title Plau-Medium at $ba-font-23 (23.04px, passed
 * as title_size in the seed) weight 900, line-height 1.
 * -------------------------------------------------------------------------- */
.w-iconbox.ba-model {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 12px;
}
/* iconpos_left carries three rules that assume the icon sits beside the whole
   box: a 1.1em-wide icon well, a `calc(15px + 0.2em)` right margin and a
   -0.2em pull on the title. All three fight the grid, and all three are
   answered here at matching specificity, which the load order then settles.
   Width 1em makes the icon exactly the `size` the seed asks for (4rem/64px),
   so its left edge lines up with the summary beneath it, as on the legacy. */
.w-iconbox.ba-model.iconpos_left > .w-iconbox-icon {
	grid-area: 1 / 1;
	align-self: center;
	width: 1em;
	margin: 0;
}
.ba-model .w-iconbox-meta {
	display: contents;
}
.w-iconbox.ba-model .w-iconbox-title {
	grid-area: 1 / 2;
	align-self: center;
	margin: 0;
	padding: 0;
	/* What the legacy `.model-title` declares. It renders the same as the 700
	   every other heading uses, because there is no bold Plau and the browser's
	   synthetic bold is a single step — see the @font-face note above. */
	font-weight: 900;
	line-height: 1;
}
.ba-model .w-iconbox-text {
	grid-column: 1 / -1;
	grid-row: 2;
	margin-top: 16px;
}

/* -----------------------------------------------------------------------------
 * Pre-footer CTA band (.ba-cta, emitted by $cta_band in tools/ba-seed-lib.php
 * and used on every page that ends in one).
 *
 * Legacy `div.cta-block`, measured on www.brainabouts.org/en/about: a full-bleed
 * blue band with 40px of padding, the heading ranged left and the button ranged
 * right on one line, stacking and centring below 768px. The heading is the
 * global h2 (Plau-Medium $ba-font-47 at line-height 1 on desktop).
 *
 * Deliberate colour deviation: the legacy band is $ba-secondary-bg #00a7e1,
 * two hex points from $ba-text-blue #00a9e0 (--ba-blue) and indistinguishable
 * on screen. Rather than carry a second near-identical blue, the band reuses
 * the documented brand token.
 * -------------------------------------------------------------------------- */
.l-section.ba-cta {
	background-color: var(--ba-blue);
	padding-top: 40px;
	padding-bottom: 40px;
}
.ba-cta h2 {
	margin: 0;
	color: #fff;
}
/* The heading is a text element, so it would otherwise take all the free space
   and push the button off the right edge of the container. Its bottom margin
   also has to go, or centring the two items lifts the heading off the button's
   centre line by half of it — impreza8-compat.css restores WPBakery's classic
   30px gap under every text block, at a specificity this has to match. */
.l-section.ba-cta .w-hwrapper > .wpb_text_column {
	flex: 0 1 auto;
	margin-bottom: 0;
}
.ba-cta .w-btn {
	white-space: nowrap;
}

/* The legacy band's own two breakpoints, same values. */
@media all and (min-width: 768px) and (max-width: 990px) {
	.l-section.ba-cta {
		padding: 32px 56px;
	}
}
@media all and (max-width: 767px) {
	.l-section.ba-cta {
		padding: 32px 16px;
	}
	.ba-cta .w-hwrapper {
		flex-direction: column;
		justify-content: center;
	}
	/* The inline gap Impreza sets between items is on the wrong axis once the
	   band stacks. `.l-section` prefix: must outrank the desktop
	   `.l-section.ba-cta .w-hwrapper > .wpb_text_column { margin-bottom: 0 }`. */
	.l-section.ba-cta .w-hwrapper > :not(:last-child) {
		margin-inline-end: 0;
		margin-bottom: var(--hwrapper-gap, 1.2rem);
	}
	.ba-cta h2 {
		text-align: center;
	}
}

/* -----------------------------------------------------------------------------
 * Floor line (.ba-floor): the legacy's 2px near-black line along the bottom
 * of a section's container, with an illustration standing on it. Vertical
 * padding moves from the section onto .l-section-h so the border sits on the
 * container (1080px via Lapraim's `.med`), not the full-bleed section. Each
 * block decides its own bottom padding and what happens to the line when
 * stacked.
 * -------------------------------------------------------------------------- */
.l-section.ba-floor {
	padding-bottom: 0;
}
.l-section.ba-floor > .l-section-h {
	border-bottom: 2px solid var(--ba-ink);
}

/* -----------------------------------------------------------------------------
 * Our Model hero (.ba-model-hero, tools/seed-ba-our-model.php).
 *
 * Legacy `.model-page .model-block`, measured on www.brainabouts.org/en/our-model:
 * a 1080px container with a 2px near-black "floor" line along its bottom
 * border, and the illustration pinned to its bottom-right corner, standing on
 * the line and overhanging it by 21px into the next section. When stacked the
 * two stack, the line runs full-bleed, and the illustration overhangs 17px.
 * Type is the global scale (h1.ba-h2, .ba-subtitle, .ba-text-lg); the legacy
 * #212529 body colour is not copied — it is a Bootstrap default, not a token.
 *
 * The line is .ba-floor. The 1080px width is Lapraim's existing `.med`
 * modifier: its `section.l-section:not(.full) .l-section-h { max-width:
 * 1440px }` outranks anything scoped to this block.
 * -------------------------------------------------------------------------- */
.l-section.ba-model-hero {
	z-index: 1; /* the overhang paints over the next section */
}
.l-section.ba-model-hero > .l-section-h {
	padding-bottom: var(--ba-section-lg);
}
/* The image is positioned against the container, not its column: every
   WPBakery wrapper in between is position:relative, so all of them go static.
   `section.l-section` prefix outranks Impreza's `.g-cols.via_flex>div>…`. */
section.l-section.ba-model-hero .g-cols,
section.l-section.ba-model-hero .ba-model-hero__art,
section.l-section.ba-model-hero .ba-model-hero__art .vc_column-inner,
section.l-section.ba-model-hero .ba-model-hero__art .wpb_wrapper,
section.l-section.ba-faq-hero .g-cols,
section.l-section.ba-faq-hero .ba-faq-hero__art,
section.l-section.ba-faq-hero .ba-faq-hero__art .vc_column-inner,
section.l-section.ba-faq-hero .ba-faq-hero__art .wpb_wrapper {
	position: static;
}
section.l-section.ba-model-hero .ba-model-hero__art .wpb_text_column {
	position: absolute;
	right: 0;
	bottom: -23px; /* from the padding edge: 21px past the 2px line */
	width: min(423px, 50%);
	margin: 0;
}
.ba-model-hero .ba-model-hero__art img {
	width: 100%;
	height: auto;
}

/* Stacked. The legacy stacks below 768, but style-lapraim.css stacks every
   column site-wide at 1023 and below, so the stacked layout has to start
   there too or the image is placed for a side-by-side layout that isn't. */
@media all and (max-width: 1023px) {
	.l-section.ba-model-hero {
		border-bottom: 2px solid var(--ba-ink);
	}
	.l-section.ba-model-hero > .l-section-h {
		padding-bottom: 0;
		border-bottom: 0;
	}
	section.l-section.ba-model-hero .ba-model-hero__art .wpb_text_column {
		position: relative;
		right: auto;
		bottom: -17px;
		width: min(423px, 100%);
		margin-top: var(--ba-paragraph-gap);
	}
}

/* -----------------------------------------------------------------------------
 * FAQ hero (.ba-faq-hero, tools/seed-ba-faq.php).
 *
 * Legacy `.faqs .layout-sidebar-first`, measured on www.brainabouts.org/en/faq:
 * a yellow band, 160px above and below the title at >= 992, with faq-avatar.svg
 * pinned to the container's bottom-right. At >= 1200 it is 440px tall and
 * hangs 58px below the band; below that 345px tall, flush on the band's edge;
 * below 768 it is hidden and the title centres. Uses the same static-wrapper
 * chain as .ba-model-hero above.
 *
 * Deliberate deviations: the art is capped at half the container between 768
 * and 1199 (the legacy's fixed 345px height runs it over the title there), and
 * the title keeps the global scale's smaller phone sizes.
 * -------------------------------------------------------------------------- */
.l-section.ba-faq-hero {
	z-index: 1; /* the overhang paints over the next section */
	background-color: var(--ba-yellow);
}
@media (min-width: 992px) {
	.l-section.ba-faq-hero {
		--ba-section-pad: 160px;
	}
}
section.l-section.ba-faq-hero .ba-faq-hero__art .wpb_text_column {
	position: absolute;
	right: 0;
	bottom: calc(-1 * var(--ba-section-pad));
	width: min(50%, 587px);
	margin: 0;
}
.ba-faq-hero .ba-faq-hero__art img {
	display: block;
	width: 100%;
	height: auto;
}
@media (min-width: 1200px) {
	section.l-section.ba-faq-hero .ba-faq-hero__art .wpb_text_column {
		bottom: calc(-1 * var(--ba-section-pad) - 58px);
		width: 748px;
	}
}
/* style-lapraim.css stacks the columns at <= 1023, so the text column would
   run full width under the art; keep it to the left half until the art hides. */
@media (min-width: 768px) and (max-width: 1023px) {
	.ba-faq-hero .wpb_column:not(.ba-faq-hero__art) {
		max-width: 50%;
	}
}
@media (max-width: 767px) {
	.ba-faq-hero .ba-faq-hero__art {
		display: none;
	}
	.ba-faq-hero h1,
	.ba-faq-hero .ba-subtitle {
		text-align: center;
	}
}

/* -----------------------------------------------------------------------------
 * Contact hero (.ba-contact-hero, tools/seed-ba-contact.php).
 *
 * Legacy `.help` / `.help-block`, measured on www.brainabouts.org/en/contact:
 * a teal band with white type, the text in a 7/12 column (480px measure), and
 * Thinking 1_0.png (353px) in the 5/12 column, its foot on the top edge of the
 * card below. So the band has no bottom padding: the art column sits on the
 * row's floor and the teal carries on under the card (.ba-contact-card).
 * The legacy lines are Roboto 500 at $ba-font-27; .ba-subtitle is the same
 * size at 600, kept for consistency with every other subtitle.
 * -------------------------------------------------------------------------- */
.l-section.ba-contact-hero {
	background-color: var(--ba-teal-hover);
	padding-bottom: 0;
}
.ba-contact-hero :is(h1, p, a) {
	color: #fff;
}
.ba-contact-hero a {
	text-decoration: none;
}
.ba-contact-hero h1 {
	margin-bottom: var(--ba-section-sm);
}
.ba-contact-hero .ba-subtitle {
	max-width: 480px;
	margin-bottom: var(--ba-section-sm);
}
/* The text column keeps a gap to the card when it is the taller of the two. */
.ba-contact-hero .wpb_column:not(.ba-contact-hero__art) {
	padding-bottom: var(--ba-section-md);
}
.ba-contact-hero .ba-contact-hero__art {
	align-self: flex-end;
}
.ba-contact-hero .ba-contact-hero__art img {
	display: block;
	width: 353px;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: 40px; /* legacy: 64px in from the container edge */
}
@media all and (max-width: 1023px) {
	.ba-contact-hero .wpb_column:not(.ba-contact-hero__art) {
		padding-bottom: 0;
	}
	.ba-contact-hero .ba-contact-hero__art img {
		width: min(353px, 70%);
		margin-right: auto;
	}
}

/* -----------------------------------------------------------------------------
 * Contact card (.ba-contact-card, tools/seed-ba-contact.php).
 *
 * Legacy `.contact-block`: a 1080px card, radius 8, a long soft shadow,
 * pulled up 287px over the teal band. Two panels: the form on white (65%,
 * padded 70/100/40) and a pale-blue side (padded 40/38) ending in the crisis
 * line in Plau at $ba-font-39, its second half in blue. The overlap is drawn as a
 * teal stripe across the top of this section rather than a negative margin,
 * so nothing depends on the hero's height.
 *
 * Deliberate deviations: the pale-blue side opens with the "Get in touch"
 * details (not on the legacy page), and their links use --ba-blue-deep —
 * --ba-blue on --ba-sky is under 3:1.
 * -------------------------------------------------------------------------- */
.l-section.ba-contact-card {
	--ba-contact-overlap: 287px;
	padding-top: 0;
	background: linear-gradient(to bottom, var(--ba-teal-hover) var(--ba-contact-overlap), transparent var(--ba-contact-overlap));
}
section.l-section.ba-contact-card .g-cols.via_flex {
	margin: 0;
	background-color: var(--ba-sky);
	border-radius: var(--ba-radius);
	box-shadow: var(--ba-shadow-lift);
	overflow: hidden;
}
section.l-section.ba-contact-card .g-cols.via_flex > .wpb_column {
	padding: 0;
}
section.l-section.ba-contact-card .g-cols.via_flex > .ba-contact-card__form > .vc_column-inner {
	height: 100%;
	padding: 70px 100px 40px;
	background-color: #fff;
}
section.l-section.ba-contact-card .g-cols.via_flex > .ba-contact-card__aside > .vc_column-inner {
	padding: 40px 38px;
}
/* `.wpb_text_column` prefix: the heading is its block's last child, and
   Impreza zeroes a text block's last-child margin. */
.ba-contact-card .wpb_text_column h2 {
	margin-bottom: 48px;
}
.ba-contact-card .wpb_text_column p.ba-contact-card__quote {
	font-family: var(--ba-font-display-regular);
	font-size: var(--h3-font-size);
	line-height: 1.12;
	letter-spacing: var(--ba-tracking);
	color: var(--ba-ink);
}
.ba-contact-card__details {
	margin-bottom: var(--ba-subtitle-gap);
	padding-bottom: var(--ba-paragraph-gap);
	border-bottom: 2px solid var(--ba-teal-hover);
}
.ba-contact-card__details a {
	color: var(--ba-blue-deep);
}
@media all and (max-width: 1023px) {
	.l-section.ba-contact-card {
		--ba-contact-overlap: 120px;
	}
	section.l-section.ba-contact-card .g-cols.via_flex > .ba-contact-card__form > .vc_column-inner,
	section.l-section.ba-contact-card .g-cols.via_flex > .ba-contact-card__aside > .vc_column-inner {
		padding: 48px 40px;
	}
	.ba-contact-card .wpb_text_column h2 {
		margin-bottom: var(--ba-section-sm);
	}
}
@media all and (max-width: 767px) {
	section.l-section.ba-contact-card .g-cols.via_flex > .ba-contact-card__form > .vc_column-inner,
	section.l-section.ba-contact-card .g-cols.via_flex > .ba-contact-card__aside > .vc_column-inner {
		padding: 32px 20px;
	}
}

/* -----------------------------------------------------------------------------
 * Contact Form 7 forms — the legacy Drupal webform look, site-wide.
 *
 * Measured on www.brainabouts.org/en/contact: labels in Plau-Medium at
 * $ba-font-19 with a raised asterisk (.ba-req, emitted by the seed); 48px
 * white fields with a 1px grey border and 4px radius; 24px between fields,
 * 32px between paired ones; the yellow button (class:yellow) uppercase and
 * ranged right. Selectors are prefixed with `.wpcf7` to outrank Lapraim's
 * `form …` rules and the Impreza 8 resets in impreza8-compat.css.
 * -------------------------------------------------------------------------- */
.wpcf7 form .field-wrapper {
	margin-bottom: 24px;
}
.wpcf7 form .field-wrapper:not(:last-child) {
	margin-right: 32px;
}
.wpcf7 form .field-wrapper > p {
	margin: 0;
}
/* Paired fields stack on phones; side by side they are too narrow to read. */
@media all and (max-width: 767px) {
	.wpcf7 form .field-row {
		flex-direction: column;
	}
	.wpcf7 form .field-wrapper:not(:last-child) {
		margin-right: 0;
	}
}
/* wpautop puts a <br> between the label and its field. */
.wpcf7 form .field-wrapper br {
	display: none;
}
.wpcf7 form .field-wrapper label {
	display: block;
	margin-bottom: 4px;
	font-family: var(--ba-font-display);
	font-size: var(--ba-f-19);
	font-weight: 700;
	line-height: 1.5;
	color: var(--ba-ink);
}
.wpcf7 .ba-req {
	margin-left: 0.3em;
	vertical-align: super;
	line-height: 0;
}
.wpcf7 form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 form select,
.wpcf7 form textarea {
	width: 100%;
	height: 48px;
	padding: 0 15px;
	border: 1px solid var(--ba-field-border);
	border-radius: 4px;
	background-color: #fff;
	box-shadow: none;
	font-family: var(--ba-font-body);
	font-size: var(--ba-f-16);
	line-height: normal;
	color: var(--ba-text);
}
/* Chrome's native arrow sits against the right border whatever the padding,
   so draw our own chevron inset to match the 15px text padding. Stroke is
   --ba-text (#36454d); a data URI can't read the custom property. */
.wpcf7 form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2336454d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 12px 8px;
}
.wpcf7 form textarea {
	height: 138px;
	padding-top: 12px;
	padding-bottom: 12px;
}
/* The spinner follows the button in the markup; reversing the row keeps the
   button on the right edge with the spinner beside it. */
.wpcf7 form p:has(> .wpcf7-submit) {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	margin: 0;
}
.wpcf7 form input.wpcf7-submit {
	width: auto;
	min-width: 0; /* Lapraim's 180px button floor; the legacy button fits its label */
	height: 48px;
	padding: 0 15px;
	font-family: var(--ba-font-body);
	font-size: var(--ba-f-16);
	font-weight: 600;
	text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
 * Our Model technology block (.ba-tech, a .ba-floor section).
 *
 * Legacy `.technology-block`: the dashboard illustration standing on the
 * floor line, and a blue box 48px below its top on the right (radius 8,
 * padding 54, 419px wide). Stacked: box under the illustration, no line.
 * White on --ba-blue is the legacy's combination (2.71:1, under AA) — the
 * same open contrast decision as the CTA band.
 * -------------------------------------------------------------------------- */
.ba-tech .ba-tech__box {
	max-width: 419px;
	margin: 48px 0 0 auto;
	padding: 54px;
	border-radius: var(--ba-radius);
	background-color: var(--ba-blue);
}
.ba-tech .ba-tech__box h3,
.ba-tech .ba-tech__box p {
	color: #fff;
}
.ba-tech img {
	width: 100%;
	height: auto;
}

/* -----------------------------------------------------------------------------
 * Our Model presentations + educators (.ba-presentations, one section).
 *
 * Legacy `.presentation-block`, 5/12 | 7/12. Left: the orange heading, and
 * face.svg — the head, cable and plug are one 1080x860 drawing laid over the
 * whole block from 145px down, so the plug lands at the orange box and the
 * cable loops down into the educators row. Right: a two-up portrait slider,
 * then the orange copy box. Educators: a lead line with an orange accent,
 * then photo | orange box with the computer illustration flush to its
 * bottom, then the CTA. Stacked (<=1023): the overlay is hidden and
 * everything stacks — the legacy never restacked and broke on phones.
 * -------------------------------------------------------------------------- */
.ba-presentations h2 {
	color: var(--ba-orange);
}
.ba-presentations .ba-presentations__face {
	position: absolute;
	top: 145px;
	left: 0;
	z-index: 0;
	width: 1080px;
	margin: 0;
	pointer-events: none;
}
.ba-presentations .ba-presentations__face img {
	width: 100%;
	height: auto;
}
/* Content paints above the overlay. */
.ba-presentations__slider,
.ba-presentations .ba-presentations__box,
.ba-educators,
.ba-educators__media,
.ba-educators__cta {
	position: relative;
	z-index: 1;
}
/* Legacy dots: 15px, white with an orange ring, the active one solid orange.
   Impreza's circle style forces the active dot transparent with !important. */
.ba-presentations__slider .owl-dot span {
	width: 15px;
	height: 15px;
	opacity: 1;
	background-color: #fff;
	box-shadow: inset 0 0 0 1px var(--ba-orange);
}
.ba-presentations__slider .owl-dot.active span {
	background: var(--ba-orange) !important;
	box-shadow: none;
}
.ba-presentations .ba-presentations__box {
	max-width: 525px;
	margin: 24px 0 0;
	padding: 36px 44px;
	border-radius: var(--ba-radius);
	background-color: var(--ba-orange);
}
.ba-presentations__box .ba-subtitle {
	margin: 0;
	color: #fff;
}
/* face.svg's cable hangs below the intro row: its lowest ink is 674px down the
   860px drawing, which starts 145px down, so the row is held to 819px and the
   educators row starts a medium gap below the loop. Impreza's
   `.g-cols.via_flex.type_default { margin: 0 -1.5rem }` would zero a
   lower-specificity margin-top. */
.g-cols.via_flex.ba-presentations__intro {
	min-height: calc(145px + 674px);
}
.g-cols.via_flex.ba-educators {
	margin-top: var(--ba-section-md);
}
.ba-educators__accent {
	color: var(--ba-orange);
}
/* The photo fills its column so it matches the orange box's height: the
   row is valign_top (no stretch) and each column wraps its content in a
   .wpb_wrapper, so every link in the chain has to flex. */
.g-cols.via_flex.ba-educators__media {
	align-items: stretch;
}
.ba-educators__media .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.ba-educators__media .w-image {
	flex-grow: 1;
}
.ba-educators__media .w-image-h {
	height: 100%;
}
.ba-educators__media .w-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ba-educators__media .vc_column-inner {
	display: flex;
	flex-direction: column;
}
.ba-educators__media .ba-educators__box {
	flex-grow: 1;
	margin: 0;
	padding: 38px 65px 0;
	border-radius: var(--ba-radius);
	background-color: var(--ba-orange);
	text-align: center;
}
.ba-educators__box h3 {
	color: #fff;
}
.ba-educators__box img {
	width: 100%;
	height: auto;
}
.l-body .ba-educators__cta {
	margin-top: var(--ba-section-sm);
}

@media all and (max-width: 1023px) {
	.l-section.ba-tech {
		padding-bottom: var(--ba-section-pad);
	}
	.l-section.ba-tech > .l-section-h {
		border-bottom: 0;
	}
	.ba-tech .ba-tech__box {
		max-width: none;
		margin: var(--ba-section-md) 0 0;
	}
	.ba-presentations .ba-presentations__face {
		display: none;
	}
	.g-cols.via_flex.ba-presentations__intro {
		min-height: 0;
	}
	.ba-presentations .g-cols > .wpb_column {
		width: 100%;
	}
	.ba-presentations .ba-presentations__box {
		max-width: none;
	}
	.ba-educators__media .ba-educators__box {
		margin-top: var(--ba-paragraph-gap);
	}
}
@media all and (max-width: 767px) {
	.ba-tech .ba-tech__box,
	.ba-presentations .ba-presentations__box {
		padding: 32px 24px;
	}
	.ba-educators__media .ba-educators__box {
		padding: 32px 24px 0;
	}
}

/* -----------------------------------------------------------------------------
 * Sub-section heading: a heading that opens a new group inside a section
 * (e.g. "Handouts" under the Our Model content copy). Gives it the medium
 * section gap above, so the section's parts read as separate groups.
 * -------------------------------------------------------------------------- */
.ba-section-heading {
	margin-top: var(--ba-section-md);
}
/* Opening a section, the section's own padding is the gap. */
.wpb_wrapper > .ba-section-heading:first-child {
	margin-top: 0;
}

/* -----------------------------------------------------------------------------
 * Dotted section (.ba-dotted on a vc_row): teal dotted rules above and below
 * the content well, with the large tier inside them and the row's own height
 * tier outside. Legacy `.model-page .relationship-block` (4px dotted #46bec3,
 * 100px inside, 48px at <=990).
 * -------------------------------------------------------------------------- */
.l-section.ba-dotted > .l-section-h {
	border-top: 4px dotted var(--ba-teal-hover);
	border-bottom: 4px dotted var(--ba-teal-hover);
	padding-top: var(--ba-section-lg);
	padding-bottom: var(--ba-section-lg);
}

/* -----------------------------------------------------------------------------
 * Blue section (.ba-section-blue on a vc_row): full-bleed --ba-blue with white
 * type, the section-wide version of .ba-tech__box. Cards keep their own dark
 * text on white. White on --ba-blue is the same open contrast decision as the
 * CTA band.
 * -------------------------------------------------------------------------- */
.l-section.ba-section-blue {
	background-color: var(--ba-blue);
	color: #fff;
}
.ba-section-blue :is(h1, h2, h3, h4, h5, h6, p, li) {
	color: #fff;
}
.ba-section-blue .ba-card :is(h1, h2, h3, h4, h5, h6, p, li) {
	color: var(--ba-ink);
}
.ba-section-blue .owl-nav button,
.ba-section-blue .owl-nav div {
	color: #fff;
}
/* Same shape as the presentations dots, inverted for blue: 15px hollow white
   rings, the active one solid white. Impreza's circle style forces the active
   fill transparent with !important. */
.ba-section-blue .owl-dot span {
	width: 15px;
	height: 15px;
	opacity: 1;
	background-color: transparent;
	box-shadow: inset 0 0 0 2px #fff;
}
.ba-section-blue .owl-dot.active span {
	background: #fff !important;
	box-shadow: none;
}

/* -----------------------------------------------------------------------------
 * Card (.ba-card on a us_vwrapper): media strip, body, action pinned to the
 * bottom. Put cards in a `vc_row_inner el_class="ba-cards"` for a row of
 * equal-height cards. The media strip is fixed-height with the image
 * contained, so mixed icon/illustration sizes still line up.
 * -------------------------------------------------------------------------- */
.ba-cards .vc_column-inner {
	display: flex;
	flex-direction: column;
}
.w-vwrapper.ba-card {
	flex-grow: 1;
	gap: 0;
	background-color: #fff;
	border-radius: var(--ba-radius);
	box-shadow: var(--ba-shadow);
	overflow: hidden;
}
.ba-card .ba-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 160px;
	padding: 24px;
	margin: 0;
	background-color: var(--ba-blue-tint);
}
/* The child theme stretches every .w-image img to 100% wide. */
.ba-card .ba-card__media img {
	width: auto;
	max-width: 100%;
	max-height: 112px;
	object-fit: contain;
}
.ba-card .ba-card__body {
	flex-grow: 1;
	padding: 24px 24px 0;
	margin: 0;
}
.ba-card .ba-card__action {
	align-self: flex-start;
	margin: 16px 24px 24px;
}

/* -----------------------------------------------------------------------------
 * Team list (.ba-team on a vc_row, one `vc_row_inner el_class="ba-team__member"`
 * per person: .ba-team__photo | .ba-team__text). The JFJC Our Team pattern,
 * made reusable: rows alternate sides, rounded square photos, name and role
 * over a hairline, the intro shown and the rest of the bio behind a native
 * <details> "Read More / Read Less" (no script).
 * -------------------------------------------------------------------------- */
.ba-team .ba-team__member:not(:last-child) {
	margin-bottom: var(--ba-section-lg);
}
@media (min-width: 601px) {
	.ba-team .g-cols.via_flex.ba-team__member:nth-child(even) {
		flex-direction: row-reverse;
	}
}
.ba-team .ba-team__photo img {
	border-radius: var(--ba-radius);
}
.ba-team .ba-team__head {
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ba-rule);
}
.ba-team .ba-team__head h2 {
	margin-bottom: 4px;
}
.ba-team .ba-team__role {
	margin-bottom: 0;
	font-weight: 600;
	color: var(--ba-text);
}
.ba-team__more > summary {
	display: inline-block;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--ba-blue);
}
.ba-team__more > summary::-webkit-details-marker {
	display: none;
}
.ba-team__more > summary::before {
	content: "+ ";
}
.ba-team__more[open] > summary::before {
	content: "– ";
}
.ba-team__more[open] .is-closed,
.ba-team__more:not([open]) .is-open {
	display: none;
}
.ba-team__more[open] > summary {
	margin-bottom: var(--ba-paragraph-gap);
}
/* The bio fades and drops in on opening; closing stays instant. */
.ba-team__more[open] > :not(summary) {
	animation: ba-reveal 0.35s ease-out;
}
@keyframes ba-reveal {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.ba-team__more[open] > :not(summary) {
		animation: none;
	}
}

/* -----------------------------------------------------------------------------
 * Video carousel (.ba-video-carousel, an Impreza us_content_carousel of
 * .ba-video-slide wrappers: title over a 16:9 embed).
 * -------------------------------------------------------------------------- */
.ba-video-slide h4 {
	margin-bottom: 8px;
}

/* -----------------------------------------------------------------------------
 * Outline box (.ba-outline-box): the legacy's 3px near-black rounded frame
 * around a block of copy (Book Us Now "What's in Store?").
 * -------------------------------------------------------------------------- */
.ba-outline-box {
	margin: 0;
	padding: 64px;
	border: 3px solid var(--ba-ink);
	border-radius: 12px;
}
@media (max-width: 991px) {
	.ba-outline-box {
		padding: 40px;
	}
}
@media (max-width: 767px) {
	.ba-outline-box {
		padding: 24px;
	}
}

/* -----------------------------------------------------------------------------
 * Book Us Now (tools/seed-ba-book-us-now.php). Measured on
 * www.brainabouts.org/en/book-us-now; see qa/ba-book-us-now-2026-09-24/.
 * -------------------------------------------------------------------------- */
.l-section.ba-bun-hero,
.l-section.ba-bun-takeaways {
	background-color: var(--ba-sky);
}
.ba-bun-hero .ba-h4 {
	margin-bottom: 0;
}

/*
 * Grade-level tabs (.ba-level-tabs, Impreza tabs). The legacy page used a
 * Views exposed filter: pills that reloaded the page, a "Level N :" caption
 * over each, and a coloured bar naming the chosen level. Each level's colours
 * sit on its section class, which Impreza puts on both the tab and the panel.
 * The legacy bar colour deliberately differs from its own pill.
 */
.ba-level--1 {
	--ba-level-pill: var(--ba-orange);
	--ba-level-bar: var(--ba-yellow);
}
.ba-level--2 {
	--ba-level-pill: var(--ba-teal);
	--ba-level-bar: var(--ba-orange);
}
.ba-level--3 {
	--ba-level-pill: var(--ba-blue);
	--ba-level-bar: var(--ba-teal);
}
/* Selectors lead with `.w-tabs.ba-level-tabs > .w-tabs-list` to outrank
   Impreza's `.w-tabs.style_default > .w-tabs-list …` (grey list, white active). */
.w-tabs.ba-level-tabs > .w-tabs-list {
	max-width: 868px;
	margin: 0 auto 32px;
	background: none;
	border: 0;
	box-shadow: none;
}
.w-tabs.ba-level-tabs > .w-tabs-list .w-tabs-list-h {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding-top: 64px; /* room for the "Level N :" captions */
	counter-reset: ba-level;
}
.w-tabs.ba-level-tabs > .w-tabs-list .w-tabs-item {
	position: relative;
	flex: 0 0 auto;
	min-width: 200px;
	margin: 0;
	padding: 20px;
	border: 0;
	border-radius: 50px;
	counter-increment: ba-level;
	background: color-mix(in srgb, var(--ba-level-pill) 50%, #fff);
	color: rgba(26, 25, 25, 0.5);
	font-family: var(--ba-font-body);
	font-size: var(--ba-text-md);
	font-weight: 600;
	line-height: 1.5;
	transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;
}
/* Impreza draws its own active/hover bars on the item's pseudo-elements. */
.w-tabs.ba-level-tabs > .w-tabs-list .w-tabs-item::before,
.w-tabs.ba-level-tabs > .w-tabs-list .w-tabs-item::after {
	display: none;
}
.no-touch .w-tabs.ba-level-tabs > .w-tabs-list .w-tabs-item:not(.active):hover,
.w-tabs.ba-level-tabs > .w-tabs-list .w-tabs-item:not(.active):focus {
	background: color-mix(in srgb, var(--ba-level-pill) 50%, #fff);
}
.w-tabs.ba-level-tabs > .w-tabs-list .w-tabs-item:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.w-tabs.ba-level-tabs > .w-tabs-list .w-tabs-item.active {
	background: var(--ba-level-pill);
	color: var(--ba-ink);
}
.ba-level-tabs .w-tabs-item-title::before {
	content: "Level " counter(ba-level) " :";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + 32px);
	text-align: center;
	font-size: var(--ba-f-19);
	font-weight: 600;
	color: var(--ba-ink);
}
/* The list's 32px bottom margin is the whole gap to the bar, as on the legacy;
   Impreza adds 3rem above every panel. */
.w-tabs.ba-level-tabs .w-tabs-section-content {
	padding-top: 0;
}
/* Selector outranks Impreza's `.wpb_text_column p:last-child { margin-bottom: 0 }`. */
.ba-level-tabs .wpb_text_column p.ba-level-bar {
	max-width: 868px;
	margin: 0 auto var(--ba-section-md);
	padding: 11px 24px;
	border-radius: 50px;
	background-color: var(--ba-level-bar);
	text-align: center;
	font-family: var(--ba-font-display);
	font-size: var(--ba-f-23);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--ba-tracking);
	color: var(--ba-ink);
}
@media (max-width: 991px) {
	.w-tabs.ba-level-tabs > .w-tabs-list .w-tabs-list-h {
		flex-direction: column;
		align-items: stretch;
		gap: 64px;
	}
	.w-tabs.ba-level-tabs > .w-tabs-list {
		padding-bottom: 40px;
		border-bottom: 1px solid var(--ba-ink);
	}
	.ba-level-tabs .wpb_text_column p.ba-level-bar {
		margin-top: 40px;
		padding: 15px;
	}
}

/* Level detail: intro and photo | tall photo, then "What's in Store?".
   `.g-cols.via_flex` prefix: Impreza's `margin: 0 -1.5rem` shorthand on inner
   rows would otherwise zero these vertical margins. */
.g-cols.via_flex.ba-level-detail {
	margin-bottom: var(--ba-section-md);
}
.g-cols.via_flex.ba-level-store {
	margin-top: var(--ba-heading-gap);
}
.ba-level-detail .ba-text-lg + img {
	margin-top: var(--ba-subtitle-gap);
}
.ba-level-detail img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}
.ba-level-store img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
.ba-level-store.g-cols {
	align-items: center;
}
/* The legacy stacks these at <= 991 (Bootstrap lg); WPBakery inner rows would
   hold two columns down to 600. */
@media (max-width: 991px) {
	.g-cols.ba-level-detail > .wpb_column,
	.g-cols.ba-level-store > .wpb_column {
		width: 100%;
	}
	.g-cols.ba-level-detail > .wpb_column:not(:last-child),
	.g-cols.ba-level-store > .wpb_column:not(:last-child) {
		margin-bottom: var(--ba-section-sm);
	}
}

/* Key takeaways: 2×2 cards, art flush bottom-left, colours by position. */
.ba-takeaways {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 32px;
	margin-top: var(--ba-section-sm);
}
.ba-takeaway {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 160px;
	padding: 8px 32px 0 0;
	border-radius: var(--ba-radius);
	overflow: hidden;
	background-color: var(--ba-blue);
}
.ba-takeaway:nth-child(2) { background-color: var(--ba-orange); }
.ba-takeaway:nth-child(3) { background-color: var(--ba-teal); }
.ba-takeaway:nth-child(4) { background-color: var(--ba-yellow); }
.ba-takeaway img {
	flex: 0 0 156px;
	align-self: flex-end;
	width: 156px;
	height: 152px;
	object-fit: contain;
	object-position: left bottom;
}
.ba-takeaway p {
	margin: 0;
	font-family: var(--ba-font-body);
	font-size: var(--ba-subtitle-size);
	font-weight: 600;
	line-height: 1.13;
	color: var(--ba-ink);
}
@media (max-width: 991px) {
	.ba-takeaways {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 767px) {
	.ba-takeaway {
		gap: 16px;
		padding-right: 16px;
	}
	.ba-takeaway img {
		flex-basis: 110px;
		width: 110px;
		height: 120px;
	}
}

/* Why choose: the illustration sits behind the block (legacy: 1170x440 at the
   container's left edge, 34px into the teal band below), cord running out to
   the plug beside the callout; the copy paints over it. It is placed against
   the container, so every WPBakery wrapper in between goes static (see
   .ba-model-hero). z-index -1 inside the section's own stacking context puts
   it under the text but over the section background. Hidden below 992 as on
   the legacy page. */
.l-section.ba-why {
	z-index: 1;
	overflow-x: clip;
}
section.l-section.ba-why .l-section-h > .g-cols,
section.l-section.ba-why .l-section-h > .g-cols > .wpb_column,
section.l-section.ba-why .l-section-h > .g-cols > .wpb_column > .vc_column-inner,
section.l-section.ba-why .l-section-h > .g-cols > .wpb_column > .vc_column-inner > .wpb_wrapper {
	position: static;
}
section.l-section.ba-why .ba-why__art {
	position: absolute;
	left: -2px;
	bottom: calc(-1 * var(--ba-section-pad) - 34px);
	z-index: -1;
	width: calc(100% + 90px);
	margin: 0;
	pointer-events: none;
}
.ba-why .ba-why__art img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}
.g-cols.via_flex.ba-why__row {
	margin-top: 32px;
}
.ba-why .ba-why__callout {
	margin-bottom: 32px;
	padding: 16px;
	border: 2px solid var(--ba-ink);
	border-radius: 6px;
	background-color: var(--ba-yellow);
	font-size: var(--ba-subtitle-size);
	line-height: 1.14;
	color: var(--ba-ink);
}
.ba-why .ba-why__callout ~ p {
	padding: 0 16px;
}
@media (max-width: 991px) {
	.ba-why .ba-why__art {
		display: none;
	}
}

/* Book your assembly today: teal band, copy | happy brain. */
.l-section.ba-bun-book {
	background-color: var(--ba-teal);
}
.ba-bun-book img {
	display: block;
	width: 100%;
	max-width: 308px;
	height: auto;
	margin: 0 auto;
}

/* Footer top: BrainAbouts logo, then the JFJC "Powered by" mark beside it. */
footer#main-footer .footer-top {
	gap: 40px;
	flex-wrap: wrap;
}
footer#main-footer .footer-top a.footer-logo img {
	height: 60px;
	width: auto;
}
footer#main-footer .footer-top a.footer-powered-by {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--ba-text);
	font-size: 13px;
	text-decoration: none;
}
footer#main-footer .footer-top a.footer-powered-by img {
	height: 36px;
	width: auto;
}

/* Footer links row: tighten the gap JFJC left for its six links. */
footer#main-footer .footer-main {
	margin-bottom: 30px;
}

/* Contact line: phone · emails · address. */
footer#main-footer .footer-contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 24px;
	margin-bottom: 24px;
	font-size: 14px;
}
footer#main-footer .footer-contact a {
	color: var(--ba-text);
}
footer#main-footer .footer-contact a:hover {
	color: var(--ba-blue);
}

/* Social icons. */
footer#main-footer .footer-social {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-bottom: 40px;
}
footer#main-footer .footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ba-blue-deep);
	color: #fff;
	font-size: 18px;
}
footer#main-footer .footer-social a:hover {
	background: var(--ba-blue);
	color: #fff;
}

/* Copyright row: centred, legal links inherit the text colour. */
footer#main-footer .footer-bottom {
	position: relative;
	justify-content: center;
}
footer#main-footer .footer-bottom p a {
	color: var(--ba-text);
	text-decoration: underline;
}
footer#main-footer .footer-bottom p a:hover {
	color: var(--ba-blue);
}

/* ==========================================================================
   Home — the "Did you know?" composition
   ==========================================================================
   The legacy block (Drupal `didyouknow.html.twig` + `_didyouknow.scss`) is not
   a grid of cells; it is one canvas with a text column on the left, two
   percentage badges floated over the right, and a two-layer illustration
   anchored across the bottom. The first migration pulled the two SVGs into
   WPBakery columns, which is why the donut and the figure ended up side by
   side in separate cells instead of overlapping, and why the numbers rendered
   as Impreza counters instead of badges.
   
   Every number below is MEASURED off www.brainabouts.org/user/login at
   >= 1200px, not read out of the SCSS — that file is hand-edited generated
   output and has misled this migration twice already. Geometry, relative to
   the legacy's own 1080px container:
   
       title     0,0     360x64      lead      0,112   360x126
       tagline   0,309   284x193     15%     660,112   352x90
       85%     795,374   285x90      donut   356,178   430x429
       figure   16,340   768x346     canvas height 509
   
   The illustration is deliberately allowed to hang 83px past the bottom edge
   of the band and onto the white section below. That is the legacy look, not
   an overflow bug — see `.did-you-know { overflow: visible }` at >= 1200.
   -------------------------------------------------------------------------- */

.l-section.ba-dyk {
	background-color: var(--ba-cream);
	padding-top: 82px;
	padding-bottom: 94px;
	overflow: visible;
}

/*
 * Stacked layout, which is also the base. The DOM order below IS the legacy's
 * small-screen order — title, lead, 15%, artwork, 85%, tagline — so no `order`
 * shuffling is needed here, and the wide layout lifts three of those children
 * out of the flow rather than re-sequencing them.
 */
.ba-dyk__canvas {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
}
.ba-dyk__title,
.ba-dyk__tagline {
	font-family: var(--ba-font-display-regular);
	/* Plau has no bold cut, so 900 is the browser's synthetic step over the
	   Medium face — the same mechanism the legacy headings rely on. See the
	   @font-face note at the top of this file. */
	font-weight: 900;
	/* The legacy sets these solid below its 767px breakpoint and only opens them
	   to 112% above it. Measured: title 47.78/47.78 at 390, 57.33/64.21 at 768. */
	line-height: 1;
	letter-spacing: var(--ba-tracking);
}
.ba-dyk__title {
	margin: 0 0 24px;
	/* The legacy inherits Bootstrap's #212529 here; BrainAbouts' own near-black
	   heading token is used instead, a difference of three hex points. */
	color: var(--ba-ink);
	font-size: var(--ba-f-47);
}
.ba-dyk__lead {
	max-width: 350px;
	margin: 0 0 30px;
	color: var(--ba-ink);
	font-family: var(--ba-font-body);
	font-size: var(--ba-f-28);
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: var(--ba-tracking);
}
.ba-dyk__tagline {
	max-width: 343px;
	margin: 24px 0 0;
	color: var(--ba-teal-hover);
	font-size: var(--ba-f-47);
}

/* --- the two percentage badges ------------------------------------------ */
/*
 * The legacy caps these two rows at 352px and 324px at EVERY width, which is
 * what makes the sentences wrap into a tidy block beside the badge instead of
 * running the full width of the column. Both caps also hold at desktop, where
 * the rows measure 352 and 285.
 */
.ba-dyk__stat {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 352px;
	text-align: left;
}
.ba-dyk__stat--high {
	max-width: 324px;
}
.ba-dyk__badge {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	color: var(--ba-cream);
	font-family: var(--ba-font-display-regular);
	font-size: var(--ba-f-33);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.83px;
	filter: drop-shadow(0 22.5px 22.5px rgba(0, 0, 0, 0.1));
}
.ba-dyk__statText {
	margin: 0;
	font-family: var(--ba-font-display-regular);
	font-size: var(--ba-f-23);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.691px;
}
.ba-dyk__stat--low {
	color: var(--ba-blue-deep);
}
.ba-dyk__stat--low .ba-dyk__badge {
	background-color: var(--ba-blue-deep);
}
.ba-dyk__stat--high {
	color: var(--ba-teal-hover);
}
.ba-dyk__stat--high .ba-dyk__badge {
	background-color: var(--ba-teal-hover);
}

/* --- the two-layer illustration ----------------------------------------- */
/*
 * Defined once, as percentages of its own box, so the same stack serves every
 * breakpoint and only the box has to be placed. The box is the union of the
 * two layers at desktop — 770x508 starting at the figure's top-left corner —
 * which is where these percentages come from:
 *   donut   left 340/770, top 0,       width 430/770
 *   figure  left 0,       top 162/508, width 768/770
 */
.ba-dyk__art {
	position: relative;
	width: 100%;
	max-width: 680px;
	margin: 16px 0;
	aspect-ratio: 770 / 508;
	/* The figure sits over the tagline's last line at desktop, exactly as on
	   the legacy; keep it from swallowing text selection. */
	pointer-events: none;
}
/*
 * `.ba-dyk__ring` is the <picture>, and it is sized and placed as the VISIBLE
 * ring rather than as the image file's box — the two are not the same, because
 * the small-screen file pads the ring with a baked-in drop shadow. The image
 * inside is then fitted to it, per file, further down.
 */
.ba-dyk__ring,
.ba-dyk__figure {
	position: absolute;
	display: block;
	height: auto;
}
.ba-dyk__ring {
	left: 44.16%;
	top: 0;
	width: 55.84%;
	aspect-ratio: 1;
}
.ba-dyk__donut {
	/* Out of flow, so that oversizing the image below 768px cannot stretch the
	   wrapper past the square the ring actually is. */
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	/* The theme's global `img { max-width: 100% }` would clamp that oversizing
	   and silently leave the ring a third too small. The width here is fully
	   determined, so the cap is never wanted. */
	max-width: none;
	height: auto;
}
.ba-dyk__figure {
	left: 0;
	top: 31.89%;
	z-index: 2;
	width: 99.74%;
}

/*
 * Everything the stacked composition changes, on ONE breakpoint — the same one
 * the layout itself switches at. The two belong together: the ring's dark 15%
 * wedge points at wherever the 15% badge is. In the wide composition the badge
 * sits off to the top right and the wedge points top right at it; the moment
 * the block stacks, the badge moves to above-left of the ring and the rotated
 * file points top left to match. Swapping the artwork on its own breakpoint
 * (the legacy uses 768px) leaves a band of widths that are stacked but still
 * pointing the wide layout's direction, away from the badge.
 *
 * 1. The ring centres over the figure instead of sitting off to its right.
 *    52.6% rather than 50% is where the character actually is — his shirt
 *    centres at 52.7% of the illustration, measured by sampling the file's
 *    pixels, and the figure spans 99.74% of the art box. So this lands the
 *    ring's hole on him.
 *
 * 2. The <picture> serves Progress-mobile.svg, the same donut turned about 74
 *    degrees anticlockwise. That file bakes its drop shadow into the artwork,
 *    so its ring fills only 233 of its 348px box where Progress-tablet.svg
 *    fills its box edge to edge. Swapping at the same CSS size would quietly
 *    shrink the ring by a third, so the image is blown up by 348/233 and
 *    pulled back by the padding — leaving `.ba-dyk__ring` meaning the visible
 *    ring in both cases. Percentage margins resolve against the containing
 *    block's WIDTH on both axes, which is what makes the vertical pull right.
 */
@media (max-width: 1199px) {
	.ba-dyk__ring {
		left: 52.6%;
		transform: translateX(-50%);
	}
	.ba-dyk__donut {
		width: 149.36%;
		margin-left: -24.46%;
		margin-top: -24.03%;
	}
}

@media (min-width: 768px) {
	.ba-dyk__title,
	.ba-dyk__tagline {
		max-width: none;
		font-size: var(--ba-f-57);
		line-height: 1.12;
	}
	.ba-dyk__lead {
		max-width: 692px;
	}
	.ba-dyk__statText {
		font-size: var(--ba-f-28);
	}
}

/* --- the legacy desktop composition -------------------------------------- */
/*
 * 1200px is the legacy's own breakpoint for this block, and it is also the
 * narrowest viewport at which Impreza's container still clears the 1080px
 * these offsets assume.
 */
@media (min-width: 1200px) {
	.ba-dyk__canvas {
		display: block;
		height: 509px;
		text-align: left;
	}
	.ba-dyk__title {
		width: 360px;
		margin: 0 0 48px;
	}
	.ba-dyk__lead {
		width: 360px;
		max-width: none;
		margin: 0 0 71px;
	}
	.ba-dyk__tagline {
		width: 284px;
		margin: 0;
	}
	/* Explicit widths because the wrap is part of the composition: three lines
	   each, sitting clear of the donut. */
	.ba-dyk__stat {
		position: absolute;
	}
	.ba-dyk__stat--low {
		left: 660px;
		top: 112px;
	}
	.ba-dyk__stat--low .ba-dyk__statText {
		width: 242px;
	}
	.ba-dyk__stat--high {
		left: 795px;
		top: 374px;
	}
	.ba-dyk__stat--high .ba-dyk__statText {
		width: 175px;
	}
	.ba-dyk__art {
		position: absolute;
		left: 16px;
		top: 178px;
		width: 770px;
		max-width: none;
		margin: 0;
	}
}