/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* ============================================================
   BWL — Brand font (Nobel via Adobe Fonts)
   ------------------------------------------------------------
   The whole design uses ONE font variable. Every block + the
   header/footer reference `var(--bwl-font, Arial, Helvetica,
   sans-serif)`, so changing the brand font is a one-line edit
   here (Arial stays inline as the fallback, so text never
   disappears if the kit is slow or blocked).

   Nobel is delivered by the "BWL Adobe Fonts" plugin, which
   loads our Adobe Fonts web project. Adobe exposes the family
   under the CSS name `nobel`. If your Adobe project uses a
   different family name (e.g. it added "Nobel Condensed" =>
   `nobel-condensed`), change the name below to match.
   ============================================================ */
:root {
	--bwl-font: nobel, Arial, Helvetica, sans-serif;

	/* Make Nobel the site-wide BASE font — the same result as picking it
	   in Customizer → Typography → Base Font, which isn't possible on
	   Blocksy free (that dropdown is a Pro-only feature). Blocksy applies
	   its base font through the `--theme-font-family` variable, so we just
	   repoint it at --bwl-font. Everything that inherits the base font
	   (body text + all the "Default Family" headings H1–H6) now renders in
	   Nobel. !important wins over Blocksy's inline "System Default" value
	   regardless of stylesheet order. */
	--theme-font-family: var(--bwl-font) !important;
}

/* Belt-and-braces: force the brand font on every BWL block from the MAIN
   stylesheet (which busts cache via filemtime). GoDaddy can serve a block's
   own style.css stale, so even though each block already declares
   var(--bwl-font), this guarantees Nobel renders without waiting for the
   per-block CSS to refresh. */
[class^="bwl-"],
[class*=" bwl-"] {
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif) !important;
}

/* Body copy across every BWL block = the design's 20px / 400 / 26px. Pinned
   here (cache-reliable) with !important on size + line-height so Blocksy's
   content typography can't override the blocks' paragraphs. Weight is set
   without !important so emphasised <strong> lines stay bold. */
.bwl-hero__body, .bwl-hero__body p,
.bwl-phero__body, .bwl-phero__body p,
.bwl-pathways__text,
.bwl-feature__card-text,
.bwl-feature-wide__card-text,
.bwl-values__card-text,
.bwl-support__body, .bwl-support__body p,
.bwl-video__body, .bwl-video__body p,
.bwl-story__intro,
.bwl-story__body, .bwl-story__body p,
.bwl-paths__body, .bwl-paths__body p,
.bwl-start__body {
	font-size: 20px !important;
	line-height: 26px !important;
	font-weight: 300 !important;   /* Nobel Light — client: better design match than 400 (block body copy site-wide) */
}
/* Page hero (About) — lighter body copy (Nobel Light) than the universal pin */
.bwl-phero .bwl-phero__body,
.bwl-phero .bwl-phero__body p {
	font-weight: 300 !important;
}
/* Feature Cards (full width) — smaller card body on mobile (Figma: 16px/22px),
   overriding the universal 20px body pin above. */
@media (max-width: 900px) {
	.bwl-feature-wide__card-text {
		font-size: 16px !important;
		line-height: 22px !important;
	}
}

/* ============================================================
   BWL — Navy rounded-pill header
   ------------------------------------------------------------
   Restyles the Blocksy "type-1" header into a navy band with a
   white rounded-pill container and a pill-shaped orange button.

   Brand colours come from Blocksy's palette:
     navy   = var(--theme-palette-color-1)  (#00085E)
     orange = var(--theme-palette-color-2)  (#FF4A00)
   Tweak the values marked TWEAK below to taste.
   ============================================================ */

/* 1) Navy full-width band behind the header.
      The padding creates the navy "gutter" around the white pill. */
#header.ct-header {
	background-color: var(--theme-palette-color-1); /* navy */
	padding: 14px 35.5px;                            /* TWEAK gutter — 35.5px sides => pill ≈ 1369px wide @1440 */

	/* Vertical rhythm. The pill = pad-y + top-row + middle-row + pad-y.
	   - pad-y  : white space above the utility row / below the main nav
	   - top-h  : utility-row height  (keep compact -> small gap to nav)
	   - mid-h  : main-row height     (keep compact)
	   Adjust these three; the logo/search/button centring auto-updates. */
	--bwl-pad-y: 22px;   /* TWEAK outer top/bottom padding */
	--bwl-top-h: 28px;   /* TWEAK utility-row height */
	--bwl-mid-h: 34px;   /* TWEAK main-row height */

	--bwl-logo-h: 60px;  /* TWEAK logo render height (Figma: ~60px) */
}

/* 2) The white rounded pill that wraps the whole header
      (top utility row + main logo/nav/button row). */
#header.ct-header > [data-device] {
	background-color: #ffffff;
	border-radius: 100px;                            /* Figma: 100px (fully-rounded ends) */
	box-shadow: 0 6px 20px rgba(0, 8, 94, 0.10);
	padding-block: var(--bwl-pad-y);                 /* outer top/bottom white padding */
}

/* 3) Tighten the rows so the pill is ~100px tall (30 + 70).
      Blocksy defaults: top row 50px, middle row 120px. */
#header [data-row="top"] {
	--height: var(--bwl-top-h);
}
#header [data-row="middle"] {
	--height: var(--bwl-mid-h);
}

/* Logo — Figma content box 184 × 60.1.
   object-fit:contain keeps the live (taller) logo asset undistorted,
   scaling it to ~60px tall and left-aligning it within the box.
   Also stops the container from reserving the full image height
   (which otherwise stretches the row back to ~139px). */
#header .site-logo-container img {
	width: auto;
	height: var(--bwl-logo-h);
}
#header .site-branding,
#header .site-logo-container {
	height: auto;
}
/* Centre the columns so nothing stretches the row past --height. */
#header [data-row="middle"] .ct-container {
	align-items: center;
}

/* Vertically centre the logo and the search+button over the FULL pill
   height (both rows), while the two menu texts stay stacked in the
   centre. The side columns are pulled up by the top row's height (30px)
   and given the full pill height (100px) with centred contents. */
#header [data-device="desktop"] [data-row="middle"] [data-column="start"],
#header [data-device="desktop"] [data-row="middle"] [data-column="end"] {
	align-self: start;
	margin-top: calc(-1 * var(--bwl-top-h));               /* pull up by top-row height */
	height: calc(var(--bwl-top-h) + var(--bwl-mid-h));     /* span the full pill */
	display: flex;
	align-items: center;
}
#header [data-device="desktop"] [data-row="middle"] [data-column="end"] {
	justify-content: flex-end;
}

/* Align the header content with the page content column: same 1600px
   centred container as the body, so the logo's left edge and the button's
   right edge line up exactly with the content area edges. */
#header [data-device="desktop"] [data-row="top"] .ct-container,
#header [data-device="desktop"] [data-row="middle"] .ct-container {
	max-width: var(--theme-normal-container-max-width, 1600px);
	margin-inline: auto;
}

/* 4) Clear the individual rows' own white backgrounds so the
      single pill shows through behind both rows. */
#header [data-row="top"],
#header [data-row="middle"],
#header .ct-sticky-container,
#header .ct-sticky-container > [data-sticky] {
	background-color: transparent !important;
}

/* The sticky wrapper carries its own fixed height (a JS-measured inline
   style); collapse it on BOTH devices so the row's real height governs.
   On mobile Blocksy measured 44px while the row is 72px — the overflow
   was cropping the logo off the top of the band. */
#header .ct-sticky-container,
#header .ct-sticky-container > [data-sticky] {
	min-height: 0 !important;
	height: auto !important;
}
/* …but on MOBILE the sticky script pins the row as position:fixed right on
   load, and an auto-height container then collapses to 0 — the whole page
   jumped up once JS finished. Reserve the band height as a placeholder. */
#header [data-device="mobile"] .ct-sticky-container {
	min-height: 72px !important;   /* TWEAK = mobile band height (keep in step with the 72px row) */
}

/* 5) "Become a member" → fully rounded orange pill button. */
#header .ct-header-cta .ct-button {
	border-radius: 999px;
	padding-inline: 28px;
	/* Figma: Nobel 18px / 700 / 24px, white */
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 24px !important;
	color: #ffffff !important;
}

/* 6) Header typography — Figma's "Nobel" (var --bwl-font, set at the top). */
#header .ct-menu-link {
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif);
	color: var(--theme-palette-color-1);         /* #00085E */
	text-transform: none;                        /* Figma is sentence case, not UPPERCASE */
	overflow-wrap: break-word;                   /* word-wrap: break-word */
}

/* Utility row — Figma: 14px / 400 / 20px */
#header #header-menu-1 .ct-menu-link {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

/* Main navigation — Figma: 16px / 700 / 24px */
#header #header-menu-2 .ct-menu-link {
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
}

/* 7) Utility row order to match Figma: About us · News & media · Login.
      (Visual reorder only — or drag the items in Appearance → Menus and
      delete this block.) */
#header #header-menu-1 .menu {
	display: flex;
	align-items: center;
}
#header #header-menu-1 .menu > li {
	order: 2;
}
#header #header-menu-1 .menu > li:has(a[href*="/about"]) {
	order: 1;
}
#header #header-menu-1 .menu > li:has(a[href*="/news"]) {
	order: 2;
}
#header #header-menu-1 .menu > li:has(a[href*="login"]),
#header #header-menu-1 .menu > li:has(a[href*="account"]),
#header #header-menu-1 .menu > li.bwl-login {
	order: 3;
}

/* 7b) Login hover swap — the utility-row Login item carries two sub-items
      (E-learning login · Membership login). No dropdown: on hover the single
      "Login" link is replaced IN PLACE by the two links, side by side in the
      same row (keyboard focus shows them next to "Login" instead, so the
      focused link never disappears). Each link gets the avatar icon from
      js/header-login-icon.js. Blocksy's dropdown chrome (chevron, ghost
      toggle, absolute panel) and any mega head are switched off here. */
#header #header-menu-1 .menu-item-has-children { position: relative; }
#header #header-menu-1 .ct-toggle-dropdown-desktop,
#header #header-menu-1 .ct-toggle-dropdown-desktop-ghost,
#header #header-menu-1 .bwl-mega-head,
#header #header-menu-1 .menu-item-has-children > a > .ct-icon-container { display: none !important; }
#header #header-menu-1 .menu-item-has-children > .sub-menu {
	display: flex !important;                /* always rendered — collapsed to 0 width until hover */
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	opacity: 0 !important;
	visibility: visible !important;
	pointer-events: none !important;
	transform: none !important;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0;                                  /* TWEAK gap between the two logins (link padding adds 12.5px each side) */
	transition: max-width var(--bwl-login-swap, 0.4s) ease, opacity var(--bwl-login-swap, 0.4s) ease !important;
}
/* the "Login" link slides shut while the two links slide open */
#header #header-menu-1 .menu-item-has-children { --bwl-login-swap: 0.4s; }   /* TWEAK swap speed */
#header #header-menu-1 .menu-item-has-children > .ct-menu-link {
	max-width: 100px;                        /* ≥ the link's real width; only matters while animating */
	overflow: hidden;
	white-space: nowrap;
	transition: max-width var(--bwl-login-swap) ease, opacity var(--bwl-login-swap) ease, padding var(--bwl-login-swap) ease !important;   /* !important: Blocksy sets its own transition on .ct-menu-link */
}
#header #header-menu-1 .menu-item-has-children:hover > .ct-menu-link {
	max-width: 0;
	padding-inline: 0 !important;
	opacity: 0;
	pointer-events: none;
}
#header #header-menu-1 .menu-item-has-children:hover > .sub-menu,
#header #header-menu-1 .menu-item-has-children:focus-within > .sub-menu {
	max-width: 360px;                        /* ≥ the two links' real width */
	opacity: 1 !important;
	pointer-events: auto !important;
}
/* browsers that can animate to max-content get exact timing (no overshoot) */
@supports (interpolate-size: allow-keywords) {
	#header #header-menu-1 .menu-item-has-children { interpolate-size: allow-keywords; }
	#header #header-menu-1 .menu-item-has-children > .ct-menu-link { max-width: max-content; }
	#header #header-menu-1 .menu-item-has-children:hover > .ct-menu-link { max-width: 0; }
	#header #header-menu-1 .menu-item-has-children:hover > .sub-menu,
	#header #header-menu-1 .menu-item-has-children:focus-within > .sub-menu { max-width: max-content; }
}
@media (prefers-reduced-motion: reduce) {
	#header #header-menu-1 .menu-item-has-children { --bwl-login-swap: 0s; }
}
#header #header-menu-1 .sub-menu > li { display: flex; flex: 0 0 auto; order: 0; margin: 0; }
#header #header-menu-1 .sub-menu .ct-menu-link {
	display: flex !important;
	align-items: center;
	padding: 0 12.5px !important;            /* same rhythm as the other utility links */
	color: inherit !important;
	white-space: nowrap;
}
#header #header-menu-1 .sub-menu .ct-menu-link:hover { text-decoration: underline; }
/* guard: should an older cached header-mega.js still tag this sub-menu as a
   .bwl-mega panel, neutralise that panel's geometry and chevrons here */
#header #header-menu-1 .menu-item-has-children > .sub-menu.bwl-mega { min-height: 0 !important; }
#header #header-menu-1 .menu-item-has-children > .sub-menu::before { display: none !important; }
#header #header-menu-1 .sub-menu > li { margin: 0 !important; }
#header #header-menu-1 .sub-menu .ct-menu-link {
	padding: 0 12.5px !important;
	font-size: 14px !important;              /* same as the other utility links (the <ul> is 16px) */
	font-weight: 400 !important;
	line-height: 20px !important;
}
#header #header-menu-1 .sub-menu .ct-menu-link::after { content: none !important; }

/* 8) Person-avatar icon before "Login" — now injected as a real inline SVG by
   js/header-login-icon.js (a CSS ::before data-URI proved unreliable here).
   Just size/space it in case Blocksy's menu-link flexbox needs it. */
.bwl-login-icon {
	width: 18px;
	height: 18px;
}

/* 8b) Squeeze zone — between the mobile switch (1000px) and ~1366px the
   full-size header no longer fits: the row is a 1fr/auto/1fr grid (logo ·
   centred nav · search+CTA) and once the three don't fit, the centred nav
   starts riding over the logo and the button. Compact everything so the
   desktop header fits all the way down to the 1000px switch. */
@media (min-width: 1000px) and (max-width: 1365px) {
	#header.ct-header {
		padding-inline: 20px;    /* slimmer navy gutter around the pill */
		/* logo scales fluidly with the window instead of a hard 44px jump:
		   60px at 1365px wide → 44px at 1000px. TWEAK the two bounds. */
		--bwl-logo-h: clamp(44px, calc(44px + (100vw - 1000px) * 0.044), 60px);
	}
	/* tighter gaps between the three header columns (Blocksy default 50px) */
	#header [data-device="desktop"] [data-row="top"] .ct-container,
	#header [data-device="desktop"] [data-row="middle"] .ct-container {
		--columns-gap: 20px;
	}
	/* main nav: tighter item spacing (theme: 33px) + slightly smaller labels */
	#header [data-device="desktop"] [data-id="menu"] {
		--menu-items-spacing: 16px;
	}
	#header #header-menu-2 .ct-menu-link { font-size: 15px; }
	/* compact CTA pill */
	#header .ct-header-cta .ct-button {
		padding-inline: 18px;
		font-size: 16px !important;
	}
}

/* 9) Sticky header (scrolled state). Blocksy appends "yes" to data-sticky
      when stuck; only the middle row sticks (the utility row scrolls away),
      giving the single-row pill from the design. */
#header [data-sticky*="yes"] [data-row="middle"] {
	background: #ffffff !important;               /* row bg is forced transparent in the normal state */
	border-radius: 100px;
	box-shadow: 0 4px 10px rgba(0, 8, 94, 0.10);  /* Figma sticky shadow */
	margin: 12px 35.5px 0;                        /* TWEAK top offset + same side gutter as the pill */
	min-height: 68px;                             /* Figma sticky pill height */
}

/* No flash at the hand-over. Blocksy animates the sticky element's
   background/shadow over 0.2s and, for a few frames, the big two-row pill
   (white, 100px corners, still in the flow) and the new slim sticky pill are
   both visible — the "corner bit" seen while scrolling from the top. So:
   (1) switch states instantly instead of transitioning, and (2) as soon as
   the header is stuck (.bwl-stuck is mirrored from data-sticky by
   js/header-search.js) blank the big pill and its utility row. */
#header .ct-sticky-container > [data-sticky],
#header [data-sticky] [data-row="middle"] {
	transition: none !important;
}
#header.ct-header > [data-device].bwl-stuck {
	background-color: transparent;
	box-shadow: none;
}
#header [data-device].bwl-stuck [data-row="top"] { visibility: hidden; }

/* compact icon logo inside the slim sticky pill */
#header [data-sticky*="yes"] .site-logo-container img {
	height: 32px;                                 /* TWEAK sticky logo size */
}

/* Reset the two-row merging math (columns are pulled up by the utility-row
   height in the normal state) — in the stuck single row they just centre. */
#header [data-sticky*="yes"] [data-row="middle"] [data-column="start"],
#header [data-sticky*="yes"] [data-row="middle"] [data-column="end"] {
	margin-top: 0;
	height: auto;
}

/* Back-to-top button (injected by js/header-top.js): hidden normally;
   appears in the sticky header alongside the search icon. */
.bwl-top-btn {
	display: none;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}
#header [data-sticky*="yes"] .bwl-top-btn { display: inline-flex; }

/* Mega dropdown: the nav lives inside the part that actually sticks, so the
   panel follows the pill correctly — just tighten the gap for the slim pill. */
#header [data-sticky*="yes"] .sub-menu.bwl-mega {
	top: calc(100% - 1px) !important;             /* TWEAK gap below the stuck pill */
}

/* Search panel: it's attached to the whole header (which stays at the page
   top when stuck — only the middle row floats down), so in the sticky state
   pin it with position:fixed directly under the floating pill instead. The
   .bwl-stuck class is mirrored onto the device by js/header-search.js, since
   Blocksy's data-sticky attribute is not an ancestor of this panel. */
#header [data-device].bwl-stuck .bwl-search-panel {
	position: fixed;
	top: 92px;                                    /* TWEAK: top tucks behind the pill; input sits below it */
	left: 50%;
	/* keep the base z-index:-1 so the pill (higher in the stack) hides the
	   panel's top and the nav stays visible (raising it covered the menu). */
}

/* 11) Header search dropdown (injected by js/header-search.js).
       Grey panel hanging from under the pill; white pill input with the
       orange Search button inside. ~6 of 12 columns wide. */
#header.ct-header {
	position: relative;
	z-index: 100;                /* above all content (incl. blocks with their own z-indexes) */
}
#header [data-device="desktop"] {
	position: relative;          /* anchor for the panel */
}
.bwl-search-panel {
	position: absolute;
	top: calc(100% - 16px);      /* top edge tucks under the pill */
	left: 50%;
	transform: translate(-50%, -8px);
	z-index: -1;                 /* behind the pill's white bg => clean tuck */
	width: min(728px, 92vw);     /* 6 of 12 columns */
	padding: 40px 48px 24px;     /* extra top = the tucked part */
	background: #ffffff;         /* same as the header pill */
	border-radius: 0 0 20px 20px;
	box-shadow: 0 10px 24px rgba(0, 8, 94, 0.08);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.bwl-search-open .bwl-search-panel {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.bwl-search-panel__form { position: relative; }
/* !important where Blocksy's global form-field styles would override
   (they force their own min-height, border and radius on inputs). */
#header .bwl-search-panel__input {
	width: 100%;
	height: 40px !important;
	min-height: 0 !important;
	padding: 8px 116px 8px 16px;
	background-color: #ffffff !important;
	background-image: none !important;
	box-shadow: none !important;          /* Blocksy/browser inset shadow = the grey tint */
	-webkit-appearance: none;
	appearance: none;
	border: 0.5px solid var(--theme-palette-color-1) !important;
	border-radius: 100px !important;   /* fully round, like the design */
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	color: var(--theme-palette-color-1);
	outline: none;
}
#header .bwl-search-panel__input::placeholder {
	color: var(--theme-palette-color-1);
	opacity: 0.65;
}
/* button spans the input's full height and sits flush on its right end */
#header .bwl-search-panel__submit {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	height: auto;
	padding: 0 24px;
	border: 0;
	border-radius: 100px;
	background: var(--theme-palette-color-2);
	color: #ffffff;
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	cursor: pointer;
}

/* the search icon becomes an X while the panel is open */
.bwl-search-x { display: none; }
.bwl-search-open .ct-header-search .ct-icon { display: none; }
.bwl-search-open .ct-header-search .bwl-search-x { display: block; }

/* 12) Header mega dropdown (markup augmented by js/header-mega.js).
       Hovering a main item underlines it and opens a white panel under the
       pill: parent title + orange Overview button left, child items right. */

/* hide Blocksy's chevron-down indicators on items with sub-menus */
#header .ct-toggle-dropdown-desktop,
#header .ct-toggle-dropdown-desktop-ghost,
#header .menu-item-has-children > a > .ct-icon-container {
	display: none !important;
}

/* main item: orange underline on hover (stays while the panel is hovered) */
.bwl-mega-nav > ul > li:hover > a,
.bwl-mega-nav > ul > li.bwl-mega-open > a {
	text-decoration: underline;
	text-decoration-color: var(--theme-palette-color-2);
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

/* panel anchored to the nav, not the individual item */
.bwl-mega-nav { position: relative; }
.bwl-mega-nav .menu-item-has-children { position: static !important; }

.sub-menu.bwl-mega {
	position: absolute !important;
	left: -30px !important;                 /* TWEAK panel x vs nav start */
	right: auto !important;
	/* flush with the pill's bottom edge (nav bottom + 22px pad-y, minus 1px
	   so no hairline gap shows). Overlapping the pill doesn't work — the
	   sticky wrapper's stacking context keeps the panel above the pill. */
	top: calc(100% + 21px) !important;
	transform: none !important;
	z-index: 1 !important;
	width: min(728px, 92vw) !important;     /* same as the search dropdown */
	min-height: 230px;
	margin: 0 !important;
	padding: 40px 48px 40px !important;     /* TWEAK top: gap below the menu titles */
	background: #f2f3f7 !important;         /* Figma panel grey */
	border-radius: 0 0 20px 20px !important;
	box-shadow: 0 14px 24px rgba(0, 8, 94, 0.08) !important;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, visibility 0.18s;
}
.bwl-mega-nav .menu-item-has-children:hover > .sub-menu.bwl-mega,
.bwl-mega-nav .menu-item-has-children:focus-within > .sub-menu.bwl-mega,
.bwl-mega-nav .menu-item-has-children.bwl-mega-open > .sub-menu.bwl-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
/* invisible bridge so the pointer can travel from the link into the panel */
.sub-menu.bwl-mega::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -34px;
	height: 34px;
}

/* left column: parent title + Overview button (injected) */
.bwl-mega-head {
	position: absolute;
	top: 40px;       /* keep in step with the panel's top padding */
	left: 48px;
	width: calc(50% - 48px - 12px);   /* left half of the content box (Figma: two equal columns) */
}
.bwl-mega-title {
	display: block;
	margin-bottom: 24px;
	font-size: 32px;
	font-weight: 900;
	line-height: 32px;
	text-transform: uppercase;
	color: var(--theme-palette-color-1);
}
.bwl-mega-overview {
	display: inline-flex;
	padding: 8px 20px;
	border-radius: 20px;
	background: var(--theme-palette-color-2) !important;
	color: #ffffff !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 24px;
	text-decoration: none !important;
}

/* right column: the child items, each with a circled chevron */
.sub-menu.bwl-mega > li:not(.bwl-mega-head) {
	margin: 0 0 16px 50%;   /* TWEAK links start at the content box's midpoint (Figma: two equal columns) */
}
.sub-menu.bwl-mega > li:not(.bwl-mega-head) > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	color: var(--theme-palette-color-1) !important;
	text-decoration: none;
}
.sub-menu.bwl-mega > li:not(.bwl-mega-head) > a:hover {
	text-decoration: underline;
}
.sub-menu.bwl-mega > li:not(.bwl-mega-head) > a::after {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 0.5C15.2467 0.5 19.5 4.7533 19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.7533 19.5 0.5 15.2467 0.5 10C0.5 4.7533 4.7533 0.5 10 0.5Z' stroke='%2300085E'/%3E%3Cpath d='M7.5 5L12.5 9.93091L7.5 15' stroke='%2300085E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 10) Smaller screens: no band-level padding — the mobile row carries its own
   spacing (see BWL-MOBILE-HEADER-v5), which survives Blocksy pinning the row
   as position:fixed. Padding here would double the inset in the static state. */
@media (max-width: 999px) {
	#header.ct-header {
		padding: 0;
	}
}

/* 13) Mobile header (Blocksy [data-device="mobile"], shown below the mobile
       breakpoint). Design: navy band (no white pill), the white-wordmark logo
       on the left, a white circular hamburger (orange lines) on the right.
       These target the mobile wrapper directly — it's only visible on mobile. */

/* drop the white pill on mobile so the logo/burger sit on the navy band.
   NO padding here: Blocksy pins the row as position:fixed on load, and a
   fixed row ignores its parents' padding — the band spacing lives on the
   row itself below (BWL-MOBILE-HEADER-v5). */
#header.ct-header > [data-device="mobile"] {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding-block: 0;
}

/* logo + trigger spread across the band. BWL-MOBILE-HEADER-v2 marker.
   The row gets a real min-height and every logo offset is neutralised —
   the logo was riding higher than the burger and cropping off the top. */
#header [data-device="mobile"] [data-row] {
	min-height: 72px;                               /* TWEAK mobile band height */
	box-sizing: border-box;
	/* band spacing ON the row so it applies whether the row is static or
	   pinned (position:fixed) by Blocksy's sticky script */
	padding: 14px 16px 8px !important;              /* TWEAK top / sides / bottom */
}
#header [data-device="mobile"] [data-row] .ct-container {
	align-items: center !important;
}
#header [data-device="mobile"] [data-column],
#header [data-device="mobile"] .site-logo-container,
#header [data-device="mobile"] .ct-logo-container {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	align-self: center !important;
	height: auto !important;
}

/* Mobile logo: Blocksy renders it natively — upload the WHITE-wordmark logo to
   the Tablet/Mobile header's Logo element and enable "Logo Inline SVG File".
   (The desktop logo stays navy for the white pill.) We only size it here.
   BWL-MOBILE-LOGO-v4: Blocksy outputs TWO logos in the container (main
   wordmark + a .sticky-logo icon for the stuck state) and hides the inactive
   one by collapsing its size. The v3 blanket `height:44px !important` on
   every svg OVERRODE that hiding, so both rendered stacked and the branding
   overflowed the 70px row (the crop). v4: hide the sticky logo outright on
   mobile (our stuck design hides the whole logo column anyway) and cap only
   the real logo. */
#header [data-device="mobile"] .sticky-logo {
	display: none !important;
}
#header [data-device="mobile"] [data-column="start"] svg:not(.sticky-logo),
#header [data-device="mobile"] [data-column="start"] img:not(.sticky-logo),
#header [data-device="mobile"] .site-logo-container svg:not(.sticky-logo),
#header [data-device="mobile"] .site-logo-container img:not(.sticky-logo) {
	height: 44px !important;                        /* TWEAK mobile logo height */
	max-height: 44px !important;
	width: auto !important;
}
/* and the wrappers themselves must not carry a fixed height */
#header [data-device="mobile"] [data-column="start"] .ct-media-container,
#header [data-device="mobile"] .site-logo-container {
	height: auto !important;
	max-height: none !important;
}

/* hamburger → white circle with orange lines (Figma button) */
#header [data-device="mobile"] .ct-header-trigger {
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
#header [data-device="mobile"] .ct-header-trigger .ct-icon,
#header [data-device="mobile"] .ct-header-trigger .ct-icon rect,
#header [data-device="mobile"] .ct-header-trigger svg rect {
	color: var(--theme-palette-color-2);           /* orange */
	fill: var(--theme-palette-color-2);
}

/* 13b) Mobile sticky header. BWL-MOBILE-STICKY-v4 — deploy marker.
        Design: no white pill, no logo — just the back-to-top circle (left) and
        the burger circle (right), sitting where the burger is in the normal
        header. When Blocksy fixes the stuck row it (a) drops the #header padding
        (so we re-create the navy band's 18px top / 16px side padding here) and
        (b) stops right-aligning the row (so we force the container to flex-end).
        Flow-based (no position:fixed) keeps the WP admin bar respected. The
        back-to-top is injected to the left of the burger by js/header-top.js. */

/* clear section 9's white pill + re-create the band padding lost when fixed */
#header [data-device="mobile"] [data-sticky*="yes"] [data-row="middle"] {
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	padding: 18px 16px 0 !important;                  /* TWEAK band padding (top / sides) */
}
/* right-align the row's content (Blocksy centres it in the stuck state) */
#header [data-device="mobile"] [data-sticky*="yes"] [data-row="middle"] .ct-container {
	justify-content: flex-end !important;
}
/* hide the logo column when stuck — keep just the buttons */
#header [data-device="mobile"] [data-sticky*="yes"] [data-column="start"] {
	display: none !important;
}
/* group the two circles together on the right */
#header [data-device="mobile"] [data-sticky*="yes"] [data-column="end"] {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;                                        /* TWEAK gap between the two circles */
}
/* back-to-top → white circle (matches the burger); navy chevron via the SVG.
   Hidden until stuck by the shared `.bwl-top-btn` rules in section 9. */
#header [data-device="mobile"] .bwl-top-btn--m {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(0, 8, 94, 0.10);      /* soft float shadow */
}
/* give the burger the same soft shadow when it's floating */
#header [data-device="mobile"] [data-sticky*="yes"] .ct-header-trigger {
	box-shadow: 0 4px 10px rgba(0, 8, 94, 0.10);
}

/* 14) Mobile menu — OPEN state (Blocksy off-canvas #offcanvas).
       Design: navy panel (rounded bottom), white logo top-left + white-circle
       orange-X close top-right, white UPPERCASE menu items separated by lines
       each with a circled "+" toggle, orange "Become a member" pill, then a
       white utility row (About us · News & media · Login · search).
       Add these elements to the Tablet/Mobile panel in Customizer → Header:
       the Mobile Menu, the Button (CTA), the secondary menu + search. */

/* the navy panel — full page width */
#offcanvas {
	--side-panel-width: 100vw !important;          /* Blocksy panel width var */
	inset: 0 !important;                           /* full-screen regardless of "Panel Offset" */
}
#offcanvas .ct-panel-inner {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	margin: 0 !important;                          /* kill the Customizer "Panel Offset" gaps */
	background: var(--theme-palette-color-1) !important;   /* navy */
	border-radius: 0 !important;                   /* full-screen panel — square corners */
}

/* top bar: logo (left, injected) + close button (right) */
#offcanvas .ct-panel-actions {
	justify-content: space-between !important;
	padding-top: 25px !important;
}
#offcanvas .ct-panel-actions::before {
	content: "";
	flex: 0 0 auto;
	width: 148px;                                   /* TWEAK panel logo size */
	height: 49px;
	background: url("data:image/svg+xml,%3Csvg width='148' height='49' viewBox='0 0 148 49' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M52.6129 0C52.3852 0 52.1859 0.184497 52.1859 0.425763C51.9583 13.9792 40.8727 24.8788 27.2399 24.8788C13.607 24.8788 9.83593 19.798 5.53832 12.2762C5.46717 12.1484 5.32486 12.0633 5.16833 12.0633H0.429567C0.130726 12.0633 -0.0827319 12.3613 0.0311122 12.631C5.16833 26.3831 18.4596 36.1899 34.042 36.1899C53.9363 36.1899 70.1022 20.2237 70.3298 0.425763C70.3298 0.184497 70.1449 0 69.9029 0H52.6129Z' fill='%23FF4B00'/%3E%3Cpath d='M33.8282 42.3776C33.8994 42.1647 34.1982 42.1647 34.2836 42.3776L36.8024 47.8842C36.902 48.1112 37.1297 48.2531 37.3859 48.2531H49.0264C49.3679 48.2531 49.5672 47.8842 49.3822 47.6003C46.1803 42.5337 40.5166 39.1702 34.0559 39.1702C27.5953 39.1702 21.9315 42.5337 18.7296 47.6003C18.5446 47.8842 18.7581 48.2531 19.0854 48.2531H30.726C30.9821 48.2531 31.2098 48.1112 31.3094 47.8842L33.8282 42.3776Z' fill='%23FF4B00'/%3E%3Cpath d='M85.2434 14.0786H79.9639V0.212877H84.788C87.7053 0.212877 89.6264 1.6037 89.6264 3.93121C89.6264 6.25871 88.7299 6.44321 87.5345 6.89736C89.1283 7.12443 90.3521 8.54364 90.3521 10.1473C90.3521 12.631 88.3741 14.0786 85.2434 14.0786ZM84.5034 2.78165H83.0234V5.98906H84.5034C85.9122 5.98906 86.638 5.43557 86.638 4.3002C86.638 3.16483 85.8553 2.78165 84.5034 2.78165ZM85.2434 8.55783H83.0092V11.524H85.2434C86.6664 11.524 87.2072 10.9563 87.2072 9.99124C87.2072 9.02617 86.4957 8.57203 85.2434 8.57203V8.55783Z' fill='white'/%3E%3Cpath d='M99.0469 14.0786L95.1762 7.52181V14.0786H92.1309V0.212877H97.1258C100.043 0.212877 101.907 1.9585 101.907 4.35697C101.907 6.75543 100.626 7.79146 98.805 8.28818L102.505 14.0786H99.0611H99.0469ZM97.1258 2.78165H95.1904V6.13098H97.1258C98.1931 6.13098 98.8619 5.44976 98.8619 4.37116C98.8619 3.29256 98.0934 2.79584 97.1258 2.79584V2.78165Z' fill='white'/%3E%3Cpath d='M104.27 14.0786V0.212877H107.315V14.0786H104.27Z' fill='white'/%3E%3Cpath d='M114.913 2.78165V14.0786H111.868V2.78165H109.107V0.212877H117.603V2.78165H114.913Z' fill='white'/%3E%3Cpath d='M119.382 14.0786V0.212877H122.428V14.0786H119.382Z' fill='white'/%3E%3Cpath d='M128.888 14.3198C126.967 14.3198 125.558 13.6102 124.221 12.5884L125.8 10.4596C126.626 11.0982 127.807 11.6517 128.945 11.6517C130.084 11.6517 130.71 11.1834 130.71 10.346C130.71 8.95522 128.177 8.48687 127.01 7.83404C125.615 7.06766 124.52 6.20195 124.52 4.00217C124.52 1.80239 127.01 0 129.472 0C131.934 0 132.361 0.354802 133.485 1.19214L132.119 3.44868C131.507 2.99453 130.482 2.65392 129.472 2.65392C128.461 2.65392 127.565 3.44868 127.565 4.00217C127.565 5.25107 129.329 5.63426 130.952 6.34387C132.304 6.92574 133.755 7.87662 133.755 10.1615C133.755 12.4465 131.891 14.3198 128.874 14.3198H128.888Z' fill='white'/%3E%3Cpath d='M143.432 14.0786V8.52945H138.594V14.0786H135.548V0.212877H138.594V5.96068H143.432V0.212877H146.477V14.0786H143.432Z' fill='white'/%3E%3Cpath d='M91.7463 31.0523H88.8006L87.2922 23.7576C87.1783 23.2325 87.0218 21.8274 87.0075 21.6146C86.9933 21.7707 86.8226 23.2467 86.7229 23.7576L85.2145 31.0523H82.1692L78.5688 17.1866H81.728L83.5211 24.5949C83.6491 25.12 83.7488 26.0567 83.7488 26.0567C83.7488 26.0567 83.8484 25.1626 83.9622 24.5949L85.4849 17.1866H88.516L90.1525 24.5949C90.2521 25.0491 90.3659 26.0567 90.3659 26.0567C90.3659 26.0567 90.4656 25.12 90.5936 24.5949L92.3298 17.1866H95.4178L91.7605 31.0523H91.7463Z' fill='white'/%3E%3Cpath d='M96.9692 31.0523V17.1866H105.066V19.7554H100.015V23.0054H104.696V25.5742H100.015V28.4977H105.351V31.0665H96.9692V31.0523Z' fill='white'/%3E%3Cpath d='M106.917 31.0523V17.1866H109.962V31.0523H106.917Z' fill='white'/%3E%3Cpath d='M118.642 31.2794C114.515 31.2794 111.527 28.3416 111.527 24.0556C111.527 19.7696 114.729 16.9596 118.585 16.9596C122.442 16.9596 122.741 17.9104 123.95 19.2161L122.072 21.0611C121.218 20.1244 119.994 19.6135 118.585 19.6135C116.266 19.6135 114.53 21.6713 114.53 24.0556C114.53 26.4399 116.266 28.6113 118.642 28.6113C121.019 28.6113 121.531 27.9443 122.072 26.6102H118.528V24.0414H125.444C125.444 28.6113 122.442 31.2652 118.642 31.2652V31.2794Z' fill='white'/%3E%3Cpath d='M134.893 31.0523V25.5032H130.055V31.0523H127.009V17.1866H130.055V22.9344H134.893V17.1866H137.938V31.0523H134.893Z' fill='white'/%3E%3Cpath d='M145.31 19.7554V31.0523H142.265V19.7554H139.504V17.1866H148V19.7554H145.31Z' fill='white'/%3E%3Cpath d='M79.9639 48.0261V34.1604H83.0092V45.4573H87.9614V48.0261H79.9639Z' fill='white'/%3E%3Cpath d='M89.9536 48.0261V34.1604H92.9989V48.0261H89.9536Z' fill='white'/%3E%3Cpath d='M98.0361 36.715V40.0217H102.149V42.5905H98.0361V48.0261H94.9907V34.1604H102.433V36.7292H98.0361V36.715Z' fill='white'/%3E%3Cpath d='M110.232 36.715V48.0119H107.187V36.715H104.426V34.1462H112.922V36.715H110.232Z' fill='white'/%3E%3Cpath d='M114.914 48.0261V34.1604H117.959V48.0261H114.914Z' fill='white'/%3E%3Cpath d='M129.429 48.0261L123.295 39.9508C123.125 39.7095 122.968 39.4398 122.954 39.3973C122.954 39.4115 122.997 39.7521 122.997 40.0785V48.0119H119.951V34.1462H122.584L128.717 42.1363C128.902 42.3776 129.044 42.6473 129.059 42.704C129.059 42.6898 129.016 42.3492 129.016 41.9944V34.132H132.061V47.9977H129.429V48.0261Z' fill='white'/%3E%3Cpath d='M141.169 48.2531C137.043 48.2531 134.054 45.3154 134.054 41.0294C134.054 36.7434 137.256 33.9333 141.113 33.9333C144.969 33.9333 145.268 34.8842 146.477 36.1899L144.599 38.0348C143.745 37.0982 142.521 36.5872 141.113 36.5872C138.793 36.5872 137.057 38.6451 137.057 41.0294C137.057 43.4136 138.793 45.585 141.169 45.585C143.546 45.585 144.058 44.918 144.599 43.5839H141.056V41.0152H147.972C147.972 45.585 144.969 48.239 141.169 48.239V48.2531Z' fill='white'/%3E%3C/svg%3E") no-repeat left center / contain;
}

/* close button → white circle, orange X */
#offcanvas .ct-toggle-close {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
#offcanvas .ct-toggle-close .ct-icon,
#offcanvas .ct-toggle-close svg,
#offcanvas .ct-toggle-close svg * {
	color: var(--theme-palette-color-2) !important;   /* orange X */
	stroke: var(--theme-palette-color-2) !important;
	fill: var(--theme-palette-color-2) !important;
}

/* menu items: white UPPERCASE, divider lines, circled "+" toggle.
   Targets the confirmed .menu / .menu-item classes (the earlier
   ".ct-panel-content nav ul.menu" chain didn't match Blocksy's markup). */
#offcanvas .menu {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}
/* BWL-MOBILE-MENU-v9 — deploy marker (search the served style.css for this to
   confirm the new file is live). */
/* each top-level row: link left, "+" toggle right, submenu wraps below.
   Target by "ul that is NOT a sub-menu" so it works whatever class Blocksy
   puts on the top <ul> (the ".menu >" requirement was failing → no dividers). */
#offcanvas ul:not(.sub-menu) > .menu-item {
	display: flex !important;
	flex-direction: column !important;        /* stack: parent row, then sub-menu */
	flex-wrap: nowrap !important;
	align-items: stretch !important;          /* every child full width → toggle & chevron share one right edge */
	justify-content: flex-start !important;
	text-align: left !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.7);   /* TWEAK divider opacity */
}
#offcanvas ul:not(.sub-menu) > .menu-item:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.7);
}
/* the link fills the row & aligns left on LEAF items. Exclude the parent
   wrapper (.ct-sub-menu-parent) and the sub-menu, which are sized by their
   own rules — otherwise this gave the parent span a different width than the
   sub-links, so the "+"/"−" and ">" circles didn't line up. */
#offcanvas ul:not(.sub-menu) > .menu-item > *:not(button):not([class*="toggle"]):not(.ct-sub-menu-parent):not(.sub-menu) {
	flex: 1 1 auto !important;
	min-width: 0;
	justify-content: flex-start !important;
	text-align: left !important;
}
/* the "+" toggle is always pushed to the right edge */
#offcanvas ul:not(.sub-menu) > .menu-item button,
#offcanvas ul:not(.sub-menu) > .menu-item [class*="toggle"] {
	margin-left: auto !important;
}

/* PARENT items: Blocksy wraps the link + toggle in <span class="ct-sub-menu-parent">
   and centres that span. Make it a full-width flex row, left-aligned, with the
   "+" pushed to the right. (Exact structure confirmed from the live DOM.) */
#offcanvas .ct-sub-menu-parent {
	flex: 0 0 auto !important;        /* natural height in the column; width from align-items:stretch */
	width: 100% !important;
	display: flex !important;         /* inner ROW: link left, toggle right */
	align-items: center;
	justify-content: flex-start !important;
	text-align: left !important;
}
#offcanvas .ct-sub-menu-parent > .ct-menu-link {
	flex: 1 1 auto;
	text-align: left !important;
	/* match the leaf items — parent links sit inside .ct-sub-menu-parent so the
	   "direct child" uppercase rule misses them; apply the typography here. */
	text-transform: uppercase !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 24px !important;
	letter-spacing: 0.7px !important;
	color: #ffffff !important;
	padding: 13px 0 !important;
}
#offcanvas .ct-sub-menu-parent > .ct-toggle-dropdown-mobile {
	flex: 0 0 20px;
	margin: 0 0 0 auto !important;  /* push to right edge AND zero Blocksy's negative
	                                  right margin so it doesn't overshoot the chevrons */
	right: 0 !important;            /* in case Blocksy positions it */
	transform: none !important;
}
/* expanded parent: "+" becomes "−" (hide the vertical bar of the plus) */
#offcanvas [class*="toggle-dropdown"][aria-expanded="true"]::after {
	display: none !important;
}

/* --- Expanded SUB-MENU items: sentence-case white 14/400, circled ">" right --- */
#offcanvas .sub-menu {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;         /* kill Blocksy's submenu indent so sub-links are full width */
	width: 100% !important;
}
#offcanvas .sub-menu .menu-item {
	border: 0 !important;          /* no dividers between sub-items */
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}
/* High specificity (.sub-menu li a.ct-menu-link) + !important on EVERY prop so
   this beats the top-level link rules, which match sub-links too and were
   winning on justify-content (chevron) and case. */
#offcanvas .sub-menu li a.ct-menu-link {
	display: flex !important;
	width: 100% !important;        /* fill the row so the chevron sits at the right edge */
	align-items: center !important;
	justify-content: space-between !important;   /* text left, chevron right edge */
	gap: 12px !important;
	padding: 10px 0 !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 400 !important;        /* override the top-level 700 */
	line-height: 20px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;    /* override the top-level uppercase */
	text-align: left !important;
	text-decoration: none !important;
}
#offcanvas .sub-menu li a.ct-menu-link::after {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0.5C15.2467 0.5 19.5 4.7533 19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.7533 19.5 0.5 15.2467 0.5 10C0.5 4.7533 4.7533 0.5 10 0.5Z' stroke='white'/%3E%3Cpath d='M7.5 5L12.5 9.93091L7.5 15' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
#offcanvas .menu-item > a,
#offcanvas .menu-item > .ct-menu-link {
	flex: 1 1 auto;
	padding: 13px 0 !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 24px !important;
	letter-spacing: 0.7px !important;
	text-transform: uppercase !important;
	text-decoration: none;
}
/* keep every menu link LEFT-aligned — parent links are flex-centred by Blocksy,
   so force start alignment + left text (covers nested wrappers via descendant). */
#offcanvas .menu-item a,
#offcanvas .menu-item .ct-menu-link {
	justify-content: flex-start !important;
	text-align: left !important;
}
/* parent items keep their label in a nested span — force uppercase there too */
#offcanvas .menu-item > a *,
#offcanvas .menu-item > .ct-menu-link * {
	text-transform: uppercase !important;
	letter-spacing: 0.7px !important;
	font-size: 14px !important;
	color: #ffffff !important;
}
#offcanvas .menu-item > .sub-menu {
	flex: 0 0 auto;   /* full-width row below the parent (column layout, align-items:stretch) */
	width: 100% !important;
}

/* submenu expand toggle → 20px circle with a white plus.
   Broad selector: the toggle is the <button> Blocksy puts in each parent li. */
#offcanvas .menu-item > button,
#offcanvas .menu-item-has-children > button,
#offcanvas .menu-item > .ct-toggle-dropdown-mobile,
#offcanvas .menu-item [class*="toggle-dropdown"] {
	position: relative;
	width: 20px !important;
	height: 20px !important;
	flex: 0 0 20px;
	padding: 0 !important;
	box-sizing: border-box !important;
	border: 1px solid #ffffff !important;
	border-radius: 50% !important;                 /* circle (Blocksy default is square) */
	background: transparent !important;
}
#offcanvas .menu-item > button svg,
#offcanvas .menu-item [class*="toggle-dropdown"] svg { display: none; }   /* hide default chevron */
#offcanvas .menu-item > button::before,
#offcanvas .menu-item > button::after,
#offcanvas .menu-item [class*="toggle-dropdown"]::before,
#offcanvas .menu-item [class*="toggle-dropdown"]::after {
	content: "";
	position: absolute;
	background: #ffffff;
	left: 50%;
	top: 50%;
}
#offcanvas .menu-item > button::before,
#offcanvas .menu-item [class*="toggle-dropdown"]::before { width: 8px; height: 1.5px; transform: translate(-50%, -50%); }
#offcanvas .menu-item > button::after,
#offcanvas .menu-item [class*="toggle-dropdown"]::after  { width: 1.5px; height: 8px; transform: translate(-50%, -50%); }

/* "Become a member" → orange pill, centred.
   Centre the wrapper that holds the button (:has) AND give the button auto
   side-margins — inline-flex alone won't centre, hence it sat left before. */
#offcanvas .ct-panel-content-inner > *:has(.ct-button) {
	align-self: stretch;          /* full width despite the panel's flex-start */
	width: 100%;
	display: flex;
	justify-content: center;      /* now actually centres the button */
}
#offcanvas .ct-panel-content .ct-button,
#offcanvas .ct-panel-content .menu-item.ct-cta a {
	display: flex;
	width: max-content;
	max-width: 100%;
	margin: 28px auto 0;
	padding: 8px 22px;
	border-radius: 999px;
	background: var(--theme-palette-color-2);
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
}

/* utility row at the bottom — injected by js/header-offcanvas.js
   (Blocksy free can't add a 2nd menu to the panel). White 14/400. */
#offcanvas .bwl-oc-utility {
	align-self: stretch;                          /* full width (panel uses align-items:flex-start) */
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;                   /* links sit left with a fixed gap… */
	gap: 12px 40px;                                /* TWEAK gap between About us and News & media */
	margin-top: 32px;                              /* TWEAK gap above the utility row */
}
#offcanvas .bwl-oc-utility .bwl-oc-search { margin-left: auto; }   /* …only the search icon hugs the right edge */
#offcanvas .bwl-oc-utility a {
	color: #ffffff;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-decoration: none;
}
#offcanvas .bwl-oc-utility a:hover { text-decoration: underline; }
#offcanvas .bwl-oc-login {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
#offcanvas .bwl-oc-login::before {                /* avatar icon, like the design */
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.75 6C9.75 7.24264 8.74264 8.25 7.5 8.25C6.25736 8.25 5.25 7.24264 5.25 6C5.25 4.75736 6.25736 3.75 7.5 3.75C8.74264 3.75 9.75 4.75736 9.75 6ZM9 6C9 6.82843 8.32843 7.5 7.5 7.5C6.67157 7.5 6 6.82843 6 6C6 5.17157 6.67157 4.5 7.5 4.5C8.32843 4.5 9 5.17157 9 6Z' fill='white'/%3E%3Cpath d='M7.5 9.375C5.0721 9.375 3.00347 10.8107 2.21548 12.822C2.40744 13.0126 2.60966 13.1929 2.82123 13.362C3.40801 11.5154 5.24876 10.125 7.5 10.125C9.75123 10.125 11.592 11.5154 12.1788 13.362C12.3903 13.1929 12.5925 13.0126 12.7845 12.822C11.9965 10.8107 9.92789 9.375 7.5 9.375Z' fill='white'/%3E%3C/svg%3E") center / 15px no-repeat;
}
/* two login rows under the CTA (E-learning login · Membership login) —
   injected by js/header-offcanvas.js when the Login item has sub-items */
#offcanvas .bwl-oc-logins {
	align-self: stretch;
	width: 100%;
	margin-top: 28px;                              /* TWEAK gap below the CTA */
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}
#offcanvas .bwl-oc-logins a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 0;                               /* TWEAK row height */
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
#offcanvas .bwl-oc-logins a:hover { text-decoration: underline; }
#offcanvas .bwl-oc-logins a::before { width: 20px; height: 20px; background-size: 18px; }
#offcanvas .bwl-oc-logins + .bwl-oc-utility { margin-top: 24px; }   /* TWEAK gap logins → utility row */

#offcanvas .bwl-oc-search { line-height: 0; }
#offcanvas .bwl-oc-search svg path { fill: #ffffff; }


/* ============================================================
   FOOTER  (Blocksy "type-1" footer)
   ------------------------------------------------------------
   Middle row columns (DOM order, left -> right):
     widget-area-4 = brand  (STAY STRONG banner + newsletter + socials)
     widget-area-3 = Getting started
     widget-area-2 = Courses
     widget-area-1 = Policies
   Bottom row: copyright (left) + widget-area-5 login menu (right)
   ============================================================ */

#footer.ct-footer {
	--bwl-footer-pad: 74px;                          /* TWEAK top/bottom padding */
	--bwl-footer-navy: #000648;                      /* Figma footer bg */
	--bwl-banner-w: 1040px;                          /* TWEAK banner SIZE (viewBox is now 855 wide) */
	--bwl-banner-text-y: 57px;                       /* text vertical position (stays fixed as the size changes) */
	--bwl-banner-nudge: 0px;                         /* fine-tune banner horizontal alignment */
	/* derived: keep the text pinned and "For news" clearing the band as size changes (banner viewBox: -280 0 855 210) */
	--bwl-banner-top: calc(var(--bwl-banner-text-y) - var(--bwl-banner-w) * 114.4 / 855);
	--bwl-banner-clear: calc(13px + var(--bwl-banner-w) * 80.2 / 855);
	position: relative;
	overflow: hidden;
	background-color: var(--bwl-footer-navy);
	color: #ffffff;
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif);
	padding: var(--bwl-footer-pad) 0 56px;           /* top 74, bottom 56 */
	border-radius: 20px 20px 0 0;                    /* Figma: 20px top corners */
}

/* --- "STAY STRONG" banner: anchored to the footer's top-LEFT corner.
   White band bleeds off the left edge, orange reaches the top edge.
   (Footer has overflow:hidden, so the bleed is clipped cleanly.) --- */
#footer.ct-footer::before {
	content: "";
	position: absolute;
	/* Align the "STAY STRONG" text with the content column's left edge:
	   container left  -  the text's inset within the banner SVG (72/575). */
	left: calc(
		max(0px, (100% - var(--theme-normal-container-max-width, 1600px)) / 2)
		- (var(--bwl-banner-w) * 352.4 / 855)
		+ var(--bwl-banner-nudge, 0px)
	);
	top: var(--bwl-banner-top, -50px);               /* negative => orange tip clipped by overflow */
	width: var(--bwl-banner-w, 540px);               /* TWEAK banner size */
	aspect-ratio: 855 / 210;
	background: url("img/footer-banner.svg?v=2") no-repeat left top / contain;   /* ?v bumped: the SVG viewBox changed, force browsers/CDN to re-fetch */
	pointer-events: none;
	z-index: 1;
}
/* Screens narrower than the 1600px container: (100% - 1600)/2 hits 0, which
   parked the STAY STRONG text ON the viewport edge and cropped the words.
   Blocksy's container is `min(1600px, 90vw)` centred (the edge-spacing var
   IS the 90vw width) — replicate that exactly so the banner text lines up
   with the boxed content at EVERY width, like on big screens. ≤600 mobile
   keeps its own tuned alignment. */
@media (min-width: 601px) {
	#footer.ct-footer::before {
		left: calc(
			(100% - min(var(--theme-normal-container-max-width, 1600px), var(--theme-container-edge-spacing, 90vw))) / 2
			- (var(--bwl-banner-w) * 352.4 / 855)
			+ var(--bwl-banner-nudge, 0px)
		);
	}
}

/* --- Decorative BWL mark (full icon = both pieces in one SVG), anchored to
   the footer's top-right corner. Anchoring the group top-right places the
   big curve at the top and the small piece ~27px below the columns,
   matching the Figma group geometry. --- */
#footer.ct-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.10;                                   /* Figma group opacity */
	background: url("img/footer-swoosh-group.svg") no-repeat right top;
	background-size: auto 100%;                      /* full footer height; bottom touches the footer bottom */
}

/* keep content above the decorations */
#footer .ct-container { position: relative; z-index: 2; }

/* strip Blocksy's per-row vertical padding; control spacing ourselves */
#footer [data-row] > .ct-container { padding-block: 0; }
#footer [data-row="bottom"] { margin-top: 40px; }

/* --- Middle row: 4-column grid (brand wide + 3 link columns).
   Link columns + gaps are FLUID: on narrower screens they shrink with the
   viewport instead of staying fixed, which was starving the newsletter
   column (it's the only flexible one, so it absorbed all the shrinkage). --- */
#footer [data-row="middle"] > .ct-container {
	--grid-template-columns: minmax(300px, 1fr) repeat(3, clamp(160px, 16.5vw, 250px));
	column-gap: clamp(16px, 2.8vw, 42px);
	align-items: start;
}

/* --- Column headings (Getting started / Courses / Policies) --- */
#footer .widget-title {
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	margin: 0 0 16px;
}

/* --- Footer menu links --- */
#footer .widget-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
#footer .widget-menu li { margin-bottom: 8px; }
#footer .widget-menu a {
	color: #ffffff;
	text-decoration: none;
	font-size: 14px;
	line-height: 20px;
}
#footer .widget-menu a:hover { text-decoration: underline; }

/* --- Brand column --- (compact vertical spacing).
   padding-top pushes "For news" below the banner, which is now anchored to
   the footer's top-left corner (see #footer::before). Keep it ~= banner
   height so the content clears it. */
#footer [data-column="widget-area-4"] {
	padding-right: 30px;
	padding-top: var(--bwl-banner-clear, 165px);     /* TWEAK to match banner height */
}
#footer [data-column="widget-area-4"] > .ct-widget { margin: 0 0 18px; }
#footer [data-column="widget-area-4"] > .ct-widget:last-child { margin-bottom: 0; }

/* "For news, info and special offers" --- Figma: white 18px / 400 / lh24.
   Targets the text widget directly (not by position). */
#footer [data-column="widget-area-4"] .widget_text p {
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	color: #ffffff;
	margin: 0;
}

/* --- Newsletter form (MC4WP: [mc4wp_form] with the .bwl-news markup) ---
   Figma: a cyan-20% pill with the email input filling it and the white
   Subscribe button inside the right end. The .bwl-news div IS the pill. --- */
#footer .mc4wp-form {
	max-width: 432px;
	margin: 0;
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif);
	color: #ffffff;
}

/* the pill: input + button are flex siblings at the SAME height, so they
   can't differ; 5px padding gives the white button its inset all round. */
#footer .bwl-news {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	padding: 5px;                                   /* TWEAK inset around the white button */
	background: rgba(0, 204, 255, 0.20);            /* Figma cyan 20% over navy */
	border-radius: 100px;
}

/* the email input fills the pill (transparent; pill provides the bg) */
#footer .bwl-news input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px !important;                        /* TWEAK control height; matches the button */
	min-height: 0 !important;                       /* beat theme/host input min-heights */
	box-sizing: border-box;
	margin: 0;
	padding: 0 22px;
	background: transparent;
	border: 0;
	border-radius: 100px;
	color: #ffffff;
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	outline: none;
	box-shadow: none;
}
#footer .bwl-news input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.75); opacity: 1; }

/* Subscribe button — white pill, same height as the input */
#footer .bwl-news input[type="submit"] {
	flex: 0 0 auto;
	height: 46px !important;                        /* equal to the input */
	min-height: 0 !important;
	margin: 0;
	padding: 0 32px;
	background: #ffffff;
	border: 0;
	border-radius: 100px;
	color: #00085e;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity 0.15s ease;
}
#footer .bwl-news input[type="submit"]:hover { opacity: 0.9; }

/* consent line + MC4WP success / error messages below the pill */
#footer .bwl-news-consent {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 18px;
	color: #ffffff;
}
#footer .mc4wp-response { margin: 10px 0 0; font-size: 13px; line-height: 18px; color: #ffffff; }
#footer .bwl-news-consent a,
#footer .mc4wp-response a { color: #ffffff; text-decoration: underline; }

/* --- Socials (Blocksy social box) --- */
#footer .ct-block-wrapper > .widget-title { display: none; }   /* hide "Socials" heading */
#footer .ct-socials-block { margin-top: 8px; }
#footer .ct-social-box { display: flex; gap: 10px; }
#footer .ct-social-box a {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ffffff;
	border-radius: 50%;
}
#footer .ct-social-box a svg { width: 18px; height: 18px; fill: #ffffff; }
#footer .ct-social-box a:hover { background: #ffffff; }
#footer .ct-social-box a:hover svg { fill: var(--bwl-footer-navy); }

/* --- Bottom row: copyright (left) + login links (right) --- */
#footer [data-row="bottom"] > .ct-container {
	--grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 30px;
}
#footer .ct-footer-copyright p {
	margin: 0;
	font-size: 12px;
	line-height: 16px;
}
#footer [data-column="widget-area-5"] .widget-menu {
	display: flex;
	justify-content: flex-end;
	gap: 22px;
}
#footer [data-column="widget-area-5"] .widget-menu li { margin: 0; }
#footer [data-column="widget-area-5"] .widget-menu a { font-size: 12px; line-height: 16px; }

/* --- Footer responsive --- */
@media (max-width: 999px) {
	#footer [data-row="middle"] > .ct-container {
		--grid-template-columns: 1fr 1fr;
		row-gap: 36px;
	}
	/* newsletter: maximum pill width on mobile. The 432px cap was never the
	   limit on phones (the column is narrower) — the space eaters were the
	   brand column's 30px right padding and the button's 32px side padding. */
	#footer .mc4wp-form {
		max-width: none;
		width: 100%;
	}
	#footer [data-column="widget-area-4"] {
		padding-right: 0;
	}
	#footer .bwl-news input[type="submit"] {
		padding: 0 22px;      /* TWEAK Subscribe padding (desktop: 32px) */
	}
	#footer .bwl-news input[type="email"] {
		padding: 0 16px;      /* TWEAK email field padding (desktop: 22px) */
	}
	#footer [data-row="bottom"] > .ct-container {
		--grid-template-columns: 1fr;
		row-gap: 14px;
	}
	/* login links → left-aligned on mobile. The desktop right-aligns the whole
	   login column (the parent flex pushes the <ul> to the right), so override
	   the column wrapper AND the menu. */
	#footer [data-column="widget-area-5"],
	#footer [data-column="widget-area-5"] .ct-widget,
	#footer [data-column="widget-area-5"] nav {
		align-items: flex-start !important;   /* column flex → left */
		justify-content: flex-start !important;
		text-align: left !important;
	}
	#footer [data-column="widget-area-5"] .widget-menu {
		justify-content: flex-start !important;
		margin-right: auto !important;        /* push the ul to the left edge */
		text-align: left !important;
	}
	#footer [data-column="widget-area-5"] .widget-menu li,
	#footer [data-column="widget-area-5"] .widget-menu a {
		text-align: left !important;
	}
}
@media (max-width: 600px) {
	#footer [data-row="middle"] > .ct-container {
		--grid-template-columns: 1fr;
		row-gap: 28px;
	}

	/* --- Mobile footer: the 3 link columns become collapsible accordions
	   (Getting started / Courses / Policies), matching the design. JS toggles
	   the .bwl-foot-open class; collapsed by default. --- */
	#footer [data-column="widget-area-1"],
	#footer [data-column="widget-area-2"],
	#footer [data-column="widget-area-3"] {
		border-top: 1px solid rgba(255, 255, 255, 0.6);
	}
	/* stack the three accordions flush (kill the grid row-gap between them) */
	#footer [data-column="widget-area-2"],
	#footer [data-column="widget-area-1"] {
		margin-top: -28px;     /* cancel the row-gap so dividers touch */
	}
	#footer [data-column="widget-area-1"] {
		border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	}

	/* title row = the tappable header with a circled "+" */
	#footer [data-column="widget-area-1"] .widget-title,
	#footer [data-column="widget-area-2"] .widget-title,
	#footer [data-column="widget-area-3"] .widget-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 !important;
		padding: 16px 0;
		cursor: pointer;
		font-size: 14px;
		font-weight: 700;
		line-height: 24px;
		letter-spacing: 0.7px;
		text-transform: uppercase;
		color: #ffffff;
	}
	#footer [data-column="widget-area-1"] .widget-title::after,
	#footer [data-column="widget-area-2"] .widget-title::after,
	#footer [data-column="widget-area-3"] .widget-title::after {
		content: "";
		flex: 0 0 20px;
		width: 20px;
		height: 20px;
		background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0.5C15.2467 0.5 19.5 4.7533 19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.7533 19.5 0.5 15.2467 0.5 10C0.5 4.7533 4.7533 0.5 10 0.5Z' stroke='white'/%3E%3Cpath d='M10 5.5L10 14.5' stroke='white' stroke-linecap='round'/%3E%3Cpath d='M5.5 10L14.5 10' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	/* collapsed by default; expanded when JS adds .bwl-foot-open */
	#footer [data-column="widget-area-1"] .widget-menu,
	#footer [data-column="widget-area-2"] .widget-menu,
	#footer [data-column="widget-area-3"] .widget-menu {
		display: none;
	}
	#footer [data-column="widget-area-1"].bwl-foot-open .widget-menu,
	#footer [data-column="widget-area-2"].bwl-foot-open .widget-menu,
	#footer [data-column="widget-area-3"].bwl-foot-open .widget-menu {
		display: block;
		padding-bottom: 16px;
	}
	/* "+" → "−" when open */
	#footer [data-column="widget-area-1"].bwl-foot-open .widget-title::after,
	#footer [data-column="widget-area-2"].bwl-foot-open .widget-title::after,
	#footer [data-column="widget-area-3"].bwl-foot-open .widget-title::after {
		background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0.5C15.2467 0.5 19.5 4.7533 19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.7533 19.5 0.5 15.2467 0.5 10C0.5 4.7533 4.7533 0.5 10 0.5Z' stroke='white'/%3E%3Cpath d='M5.5 10L14.5 10' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E");
	}

	/* expanded sub-links = same as the header submenu: white 14/400, full-width,
	   with a circled ">" chevron pinned to the right edge. */
	#footer [data-column="widget-area-1"] .widget-menu li,
	#footer [data-column="widget-area-2"] .widget-menu li,
	#footer [data-column="widget-area-3"] .widget-menu li {
		margin: 0 !important;
	}
	#footer [data-column="widget-area-1"] .widget-menu a,
	#footer [data-column="widget-area-2"] .widget-menu a,
	#footer [data-column="widget-area-3"] .widget-menu a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		padding: 8px 0;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		letter-spacing: 0;
		text-transform: none;
		color: #ffffff;
		text-decoration: none;
	}
	#footer [data-column="widget-area-1"] .widget-menu a::after,
	#footer [data-column="widget-area-2"] .widget-menu a::after,
	#footer [data-column="widget-area-3"] .widget-menu a::after {
		content: "";
		flex: 0 0 20px;
		width: 20px;
		height: 20px;
		background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0.5C15.2467 0.5 19.5 4.7533 19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.7533 19.5 0.5 15.2467 0.5 10C0.5 4.7533 4.7533 0.5 10 0.5Z' stroke='white'/%3E%3Cpath d='M7.5 5L12.5 9.93091L7.5 15' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	}
}

/* Mobile: "STAY STRONG" banner 20% smaller (everything is derived from
   --bwl-banner-w, so scaling it keeps the banner aligned). 1040 → 832.
   --bwl-banner-nudge shifts it horizontally (positive = right); fine-tune in
   px to line "STAY" up with "For news". */
@media (max-width: 782px) {
	#footer.ct-footer {
		--bwl-banner-w: 832px;        /* TWEAK mobile banner size */
		--bwl-banner-nudge: 24px;     /* TWEAK horizontal: +right / -left */
	}
	/* background swoosh: full-height looks huge on the tall mobile footer.
	   Use a FIXED px height (not %), so it stays the same size whether the
	   accordion columns are collapsed or expanded. Anchor to the bottom. */
	#footer.ct-footer::after {
		background-size: auto 340px;         /* TWEAK swoosh size (fixed px) */
		background-position: center bottom;
	}
}


/* ============================================================
   Block overrides kept in the main stylesheet.
   This host caches the per-block stylesheets aggressively, but the main
   style.css busts via filemtime — so layout values that need to update
   reliably live here, with slightly higher specificity to win.
   ============================================================ */

/* Resources — filtered-out pills must actually hide: the pill's display:flex
   beats the browser's [hidden] rule, so restore display:none here (mirrored
   from the block CSS, which this host caches aggressively). */
.bwl-res .bwl-res__pill[hidden],
.bwl-res .bwl-res__empty[hidden],
.bwl-res button.bwl-res__more[hidden] {
	display: none;
}

/* Partner hero — taller navy panel + the benefit-card lead on its own row
   (mirrored from the block CSS, which this host caches aggressively) */
.bwl-parthero .bwl-parthero__panel {
	min-height: 460px;
}
.bwl-parthero .bwl-parthero__photo {
	height: 115%;
	width: auto;
	max-width: 63%;
	object-fit: contain;
}
@media (max-width: 900px) {
	.bwl-parthero.bwl-parthero--photo-hide-m .bwl-parthero__below-photo { display: none; }
	/* taller navy panel + the pricing card rides up onto it */
	.bwl-parthero .bwl-parthero__panel { padding-bottom: 100px; }
	.bwl-parthero .bwl-parthero__cards { margin-top: -60px; padding-top: 0; }
	/* Benefits of partner: wider mobile column, no section title —
	   unless the block has an intro (then the head shows) */
	.bwl-pben .bwl-pben__inner { max-width: none; padding-inline: 20px; }
	/* peach cards as wide as the navy benefit cards (20px edges) (mirror) */
	.bwl-parthero .bwl-parthero__below { padding-inline: 20px; }
	/* halved gap between the partner hero and the benefit cards (mirror) */
	.bwl-parthero { padding-bottom: 20px; }
	.bwl-pben { padding-top: 20px; padding-bottom: 24px; }
	.bwl-pben .bwl-pben__title { display: none; }
	.bwl-pben.bwl-pben--intro .bwl-pben__title {
		display: block;
		font-size: 34px;
		line-height: 34px;
		margin-bottom: 16px;
	}
	.bwl-pben .bwl-pben__intro { font-size: 16px; line-height: 22px; margin-bottom: 40px; }
	/* Governance downloads: wider mobile column */
	.bwl-gdl .bwl-gdl__inner { max-width: none; padding-inline: 20px; }
}
/* Governance hero with intro but no cards: drop the shadow-room bottom padding
   (72px desktop / 40px mobile) so the gap to the next block isn't doubled (mirror) */
.bwl-ghero.bwl-ghero--nocards { padding-bottom: 0; }
@media (min-width: 901px) {
	.entry-content > .bwl-ghero.bwl-ghero--nocards { margin-bottom: 0; }   /* desktop: no block gap either */
}
.bwl-parthero .bwl-parthero__card-lead {
	display: block;
	margin-bottom: 3px;
}
@media (max-width: 900px) {
	.bwl-parthero .bwl-parthero__panel { min-height: 0; }
}

/* Sign up steps — the section sits in a narrower centred column
   (mirrored from the block CSS, which this host caches aggressively) */
.bwl-signup .bwl-signup__col {
	max-width: 856px;
	margin-inline: auto;
}

/* Calendar hero (mobile) — category-card pill hugs its label so the copy
   stays on one line (mirrored from the block CSS, which this host caches
   aggressively) */
@media (max-width: 900px) {
	.bwl-calhero .bwl-calhero__card-btn { width: auto; max-width: 100%; }
}

/* Competition calendar (mobile) — bigger month labels + Date top-aligns with
   Event when the name wraps (mirrored from the block CSS, which this host
   caches aggressively) */
@media (max-width: 900px) {
	.bwl-ccal .bwl-ccal__month-label { font-size: 26px; line-height: 34px; margin-bottom: 14px; }   /* TWEAK */
	.bwl-ccal .bwl-ccal__row { align-items: start; }
}

/* Competition calendar — filter + header alignment (mirrored from the block
   CSS, which this host caches aggressively). Fixed actions track keeps the
   head labels over the row columns; [hidden] must beat display:grid so the
   tier/month filter can hide rows. */
@media (min-width: 901px) {
	.bwl-ccal .bwl-ccal__head,
	.bwl-ccal .bwl-ccal__row {
		grid-template-columns: 86px minmax(0, 1.35fr) 110px minmax(0, 1.4fr) 170px;   /* TWEAK actions width (one button) */
	}
}
.bwl-ccal .bwl-ccal__row[hidden],
.bwl-ccal .bwl-ccal__month[hidden] { display: none; }

/* News list — read time right-aligned against the category pill (mirrored
   from the block CSS, which this host caches aggressively) */
.bwl-narch .bwl-narch__meta { justify-content: space-between; gap: 12px; }

/* Resources — search field centres vertically against the category pills,
   also when they wrap to two rows (mirrored from the block CSS, which this
   host caches aggressively; desktop only — mobile stacks them left-aligned) */
@media (min-width: 901px) {
	.bwl-res .bwl-res__controls { align-items: center; }
}

/* Athlete support — download-button arrow drops into the tray on hover, as
   on Athlete awards (mirrored from the block CSS, which this host caches
   aggressively) */
.bwl-support .bwl-support__btn-arrow { transition: transform 0.2s ease; }
.bwl-support .bwl-support__btn:hover .bwl-support__btn-arrow { transform: translateY(2px); }

/* Training squad — plus -> minus fades like the FAQ block (mirrored from the
   block CSS, which this host caches aggressively) */
.bwl-squad .bwl-squad__acc-v { transition: opacity 0.15s ease; }
.bwl-squad .bwl-squad__item.is-open .bwl-squad__acc-v { display: block; opacity: 0; }

/* Current vacancies — fixed button track so the Job role / Location /
   Closing date titles sit over their columns (mirrored from the block CSS,
   which this host caches aggressively; desktop only) */
@media (min-width: 901px) {
	.bwl-vac .bwl-vac__hrow,
	.bwl-vac .bwl-vac__row {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.1fr) 180px;   /* TWEAK button track */
	}
}

/* Why work with us — BENEFITS title -> cards gap matches THE BWL WAY (53px)
   (mirrored from the block CSS, which this host caches aggressively) */
@media (min-width: 901px) {
	.bwl-wwu .bwl-wwu__cards { margin-top: 53px; }   /* TWEAK */
}

/* Athlete support — "Tighter bottom spacing" toggle (mirrored from the block
   CSS, which this host caches aggressively) */
@media (min-width: 901px) {
	.bwl-support.bwl-support--stickers.bwl-support--tight { padding-bottom: 60px; }   /* TWEAK */
}

/* Board hero + Our board (mobile) — Figma subtitle spec (white 20/26/400,
   ~3-line wrap) and the board block matching the quick-links bubble width
   (mirrored from the block CSS, which this host caches aggressively) */
@media (max-width: 900px) {
	.bwl-bhero .bwl-bhero__subtitle {
		max-width: 320px;            /* TWEAK subtitle wrap width */
		font-size: 20px;
		font-weight: 400;
		line-height: 26px;
	}
	.bwl-board .bwl-board__inner,
	.bwl-team .bwl-team__inner,
	.bwl-anyq .bwl-anyq__inner,
	.bwl-pros .bwl-pros__inner {
		max-width: none;
		margin-inline: calc(50% - 50vw);   /* full-bleed out of the content column */
		padding-inline: 20px;
	}
}

/* Our team — cards 3->2-up before the emails wrap; email gets the full card
   width (only name/role clear the photo). Mirrored from the block CSS, which
   this host caches aggressively. */
@media (min-width: 901px) and (max-width: 1240px) {   /* TWEAK 3->2 switch point */
	.bwl-team .bwl-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bwl-team .bwl-team__text { padding-right: 0; }
.bwl-team .bwl-team__name,
.bwl-team .bwl-team__role { padding-right: 110px; }
@media (max-width: 900px) {
	.bwl-team .bwl-team__name,
	.bwl-team .bwl-team__role { padding-right: 88px; }
}

/* News list — pagination "…" gap between page windows (mirrored from the block CSS) */
.bwl-narch .bwl-narch__page-gap { color: var(--bwl-navy, #00085e); font-size: 26px; line-height: 32px; opacity: 0.5; }
@media (max-width: 900px) {
	.bwl-narch .bwl-narch__page-gap { font-size: 20px; }
}

/* Blog article — no downloads: same 7/12 copy column as with downloads (the
   block CSS once stretched it to full width) — mirror of the block CSS */
.bwl-blog .bwl-blog__body-row--nodl { grid-template-columns: calc(var(--ba-col) * 7 / 12) calc(var(--ba-col) * 4 / 12); }
@media (max-width: 900px) {
	.bwl-blog .bwl-blog__body-row--nodl { grid-template-columns: minmax(0, 1fr); }
}

/* Blog article — call-to-action links inside the copy (class="button", from the
   old CMS) look like the block's own button (mirrored from the block CSS) */
.bwl-blog .bwl-blog__content a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 8px 0 0;
	padding: 8px 20px;
	background: #ff4a00;
	border-radius: 20px;             /* same as a.bwl-blog__btn (40px tall → full pill) */
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
	transition: background 0.15s ease;
}
.bwl-blog .bwl-blog__content a.button:hover { background: #d63c00; color: #ffffff; opacity: 1; }

/* Course options — highlight pill with content (opens in place; mirrored from the block CSS) */
.bwl-copts button.bwl-copts__highlight--toggle { width: 100%; font: inherit; text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none; }
.bwl-copts .bwl-copts__plus { transition: transform 0.2s ease; }
.bwl-copts .bwl-copts__highlight--toggle[aria-expanded="true"] { border-radius: 20px 20px 0 0; }
.bwl-copts .bwl-copts__highlight--toggle[aria-expanded="true"] .bwl-copts__plus { transform: rotate(45deg); }
.bwl-copts .bwl-copts__highlight-panel { padding: 24px 26px 28px; background: var(--bwl-tint); border: 1px solid var(--bwl-cyan); border-top: 0; border-radius: 0 0 20px 20px; color: var(--bwl-navy); font-size: 18px; line-height: 26px; }
.bwl-copts .bwl-copts__highlight-panel[hidden] { display: none; }
.bwl-copts .bwl-copts__highlight-panel > *:first-child { margin-top: 0; }
.bwl-copts .bwl-copts__highlight-panel > *:last-child { margin-bottom: 0; }
.bwl-copts .bwl-copts__highlight-panel ul, .bwl-copts .bwl-copts__highlight-panel ol { padding-left: 22px; }

/* Membership cards — optional intro spacing (mirrored from the block CSS +
   raised specificity: Blocksy's entry-content heading spacing overlapped the
   negative-margin version, so the title hands over its gap instead) */
.bwl-mcard .bwl-mcard__intro { margin-top: 0; }
.bwl-mcard .bwl-mcard__title:has(+ .bwl-mcard__intro) { margin-bottom: 20px; }   /* TWEAK title → intro gap */
/* Membership cards — a trailing bracket in the card name ("(148)") drops to
   its own line on desktop (br.bwl-mcard__br from render.php); on mobile the
   name is left-aligned and stays on one line. Mirrored from the block CSS. */
@media (max-width: 900px) {
	.bwl-mcard .bwl-mcard__br { display: none; }
}

/* Current vacancies (mobile) — icon aligned with the title row, description
   full width below (mirrored from the block CSS, which this host caches
   aggressively) */
@media (max-width: 900px) {
	.bwl-vac .bwl-vac__roundel { grid-row: 1; }
	.bwl-vac .bwl-vac__col-text { grid-column: 1 / -1; }
}

/* Why work with us — press-back hover on the benefit cards (mirrored from
   the block CSS, which this host caches aggressively) */
.bwl-wwu .bwl-wwu__card {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bwl-wwu .bwl-wwu__card:hover {
	transform: translate(8px, 8px);
	box-shadow: 4px 4px 0 var(--ww-accent, #ff4b00);
}
@media (max-width: 900px) {
	.bwl-wwu .bwl-wwu__card:hover {
		transform: translate(4px, 4px);
		box-shadow: 2px 2px 0 var(--ww-accent, #ff4b00);
	}
}

/* Athlete support (image-left layout) — the mirrored sticker sits further
   right past the image edge (was 55% overhang) */
.bwl-support.bwl-support--img-left .bwl-support__sticker--left {
	right: calc(var(--bwl-sticker) * -0.8);
}

/* Any questions? — the panel fills the 10/12 column (was capped at 1076px) */
.bwl-anyq .bwl-anyq__panel {
	max-width: none;
}

/* Partner Cards — gap below the heading */
.bwl-partners .bwl-partners__title {
	margin-bottom: 77px;
}

/* Feature Cards — gap below the heading */
.bwl-feature .bwl-feature__title {
	margin-bottom: 77px;
}

/* Athlete Information — blue card + horizontal tab row.
   An external (theme) layout was collapsing the card into a row, squeezing the
   panel into a narrow right column. Force the stacked block skeleton from the
   reliably-busting main stylesheet; the block CSS still supplies the cosmetics.
   `display` is forced with !important to beat the external rule; the 2-column
   grids are left WITHOUT !important so the block's mobile rules still win. */
.bwl-ai .bwl-ai__card {
	display: block !important;
	background: #d4f3fd;
}
.bwl-ai .bwl-ai__title { display: block; width: 100%; }
.bwl-ai .bwl-ai__panels { display: block !important; width: 100%; }
.bwl-ai .bwl-ai__panel { width: 100%; }
.bwl-ai .bwl-ai__top { display: grid; }
.bwl-ai .bwl-ai__cards { display: grid; }
.bwl-ai .bwl-ai__dl { background: #f2f3f7; }   /* Key downloads cards (grey) */
/* Tab-bar / panel visibility is DESKTOP-only: on mobile the block CSS turns
   the tabs into an accordion (tabs hidden, every panel visible as a card). */
@media (min-width: 1000px) {
	.bwl-ai .bwl-ai__tabs {
		display: flex !important;
		flex-wrap: nowrap;
	}
	.bwl-ai .bwl-ai__panel { display: block; }
	.bwl-ai .bwl-ai__panel[hidden] { display: none !important; }
}
@media (max-width: 999px) {
	/* Mobile: centred section title (mirrored here for cache reliability).
	   width:100% comes from the desktop armour above — kill the side margins
	   too, or the box overflows right and the centred text sits off-centre. */
	.bwl-ai .bwl-ai__title {
		text-align: center;
		margin-left: 0;
		margin-right: 0;
	}
}

/* Event Hero — content anchored to the panel top + halved gaps.
   Mirrored here (main style.css busts cache reliably): the panel was
   flex-centering its content, so padding changes were invisible. */
.bwl-ehero {
	/* The block CSS referenced these without defining them — an invalid
	   var() voids the WHOLE padding shorthand on __inner, which left the
	   copy flush against the screen edge below 1600px. Defined here (and
	   in the block) so the inset can never disappear again. */
	--bwl-content: 1600px;
	--bwl-gutter: 24px;
}
.bwl-ehero .bwl-ehero__panel {
	align-items: flex-start;
}
@media (min-width: 901px) {
	.bwl-ehero .bwl-ehero__inner {
		padding-top: 24px;      /* gap before the breadcrumb (halved from 48) */
		padding-bottom: 60px;   /* gap after the buttons (halved from 120) */
		padding-inline: var(--eh-pad-x, 24px);   /* side inset, cache-proof */
	}
	/* Panel height: Figma's 659 included the header band → real panel ≈ 523.
	   Trims the excess navy below the buttons. */
	.bwl-ehero .bwl-ehero__panel {
		min-height: clamp(420px, 36vw, 523px);
	}
	/* Boxed like the sections below: content in the centred 1600px container
	   with the standard 24px gutter; the hanging cards use the same math so
	   they stay glued to the content edges on wide screens. */
	.bwl-ehero .bwl-ehero__inner {
		max-width: var(--bwl-content, 1600px);
		margin-inline: auto;
	}
	.bwl-ehero .bwl-ehero__cd {
		left: calc(max(0px, (100% - var(--bwl-content, 1600px)) / 2) + var(--eh-pad-x, 24px));
	}
	/* Quick-links bubble: top-aligned with the countdown card (both tops peek
	   64px above the panel bottom), however many links it holds. */
	.bwl-ehero .bwl-ehero__nav {
		top: calc(100% - var(--eh-gap, 160px) - var(--eh-card-peek, 64px));
		bottom: auto;
		right: calc(max(0px, (100% - var(--bwl-content, 1600px)) / 2) + var(--eh-pad-x, 24px));
	}
}
@media (max-width: 900px) {
	/* Mobile speckle: the size slider goes above 100% of the panel width —
	   lift the theme's global img { max-width: 100% } cap or it clamps. */
	.bwl-ehero .bwl-ehero__speckle {
		max-width: none;
	}
	/* Athlete image 20% larger than the panel (bottom-right anchored). */
	.bwl-ehero .bwl-ehero__img {
		height: 120%;
		max-width: 66%;
	}
}

/* Testimonials (We do it right) — WHITE band behind the chalk speckle
   (the Figma grey was a placeholder), ~20% taller than the Figma so more
   of the speckle shows. Mirrored here for cache reliability. */
.bwl-quotes .bwl-quotes__band {
	background: #ffffff;
}
@media (min-width: 901px) {
	.bwl-quotes .bwl-quotes__band {
		padding: 170px 0 210px;   /* TWEAK band height (desktop only) */
	}
}

/* Course hero — the chalk speckle rises BEHIND the site header:
   on course-hero pages the header's navy band goes transparent and the
   hero's clip box (navy + speckle) extends up beneath it. The white pill
   keeps its own background and stays on top (header z-index above hero).
   Desktop only; the mobile header keeps its solid navy band. */
@media (min-width: 1000px) {
	.bwl-has-course-hero #header.ct-header {
		background-color: transparent;
		position: relative;
		z-index: 10;
	}
	/* flow-root stops the clip's negative margin collapsing up to the section
	   (which was replacing the flush-top margin and leaving a white strip);
	   unlike overflow:hidden it does NOT clip the hanging bubble. */
	.bwl-has-course-hero .bwl-chero__stage,
	.bwl-has-course-hero .bwl-ohero__stage,
	.bwl-has-course-hero .bwl-shero__stage,
	.bwl-has-course-hero .bwl-contact__stage,
	.bwl-has-course-hero .bwl-whero__stage,
	.bwl-has-course-hero .bwl-cohero__stage,
	.bwl-has-course-hero .bwl-calhero__stage,
	.bwl-has-course-hero .bwl-bhero__stage,
	.bwl-has-course-hero .bwl-ghero__stage,
	.bwl-has-course-hero .bwl-parthero__stage,
	.bwl-has-course-hero .bwl-clubs__stage {
		display: flow-root;
	}
	.bwl-has-course-hero .bwl-chero__clip,
	.bwl-has-course-hero .bwl-ohero__clip,
	.bwl-has-course-hero .bwl-shero__clip,
	.bwl-has-course-hero .bwl-contact__clip,
	.bwl-has-course-hero .bwl-whero__clip,
	.bwl-has-course-hero .bwl-cohero__clip,
	.bwl-has-course-hero .bwl-calhero__clip,
	.bwl-has-course-hero .bwl-bhero__clip,
	.bwl-has-course-hero .bwl-ghero__clip,
	.bwl-has-course-hero .bwl-parthero__clip,
	.bwl-has-course-hero .bwl-clubs__clip {
		--ch-header-h: 134px;   /* TWEAK: match the live desktop header height
		                           (band padding 14×2 + pill ≈ 106) */
		margin-top: calc(-1 * var(--ch-header-h));
		padding-top: var(--ch-header-h);
	}

	/* Blog articles: same trick on the white page — the navy band goes
	   transparent and the article's chalk-speckle panel is pulled up to the
	   page top so the spray sits behind the white pill (design: speckle
	   spraying from the page's top-right corner). Desktop only — the mobile
	   header keeps its navy band (white logo needs it). */
	.bwl-has-blog-hero #header.ct-header {
		background-color: transparent;
		position: relative;
		z-index: 10;
	}
	.bwl-has-blog-hero .bwl-blog__panel {
		--ba-header-h: 200px;   /* TWEAK: header total + content top gap the
		                           panel must climb to reach the page top */
		top: calc(-1 * var(--ba-header-h));
	}
}

/* Blog articles — MOBILE: white header band like the desktop version. The
   mobile assets are drawn for the navy band, so they adapt: the white
   wordmark logo (inline SVG) recolours to navy, and the white hamburger
   circle gets a navy outline so it reads on white. */
@media (max-width: 999px) {
	.bwl-has-blog-hero #header.ct-header {
		background-color: #ffffff;
	}
	/* swap the white wordmark for the coloured two-tone logo (a single-colour
	   SVG can't be split into orange + navy by CSS) */
	.bwl-has-blog-hero #header [data-device="mobile"] .site-logo-container svg,
	.bwl-has-blog-hero #header [data-device="mobile"] .site-logo-container img {
		display: none !important;
	}
	.bwl-has-blog-hero #header [data-device="mobile"] .site-logo-container {
		width: 134px;                                  /* 44px tall at the logo's 1722×564 ratio */
		height: 44px !important;                       /* TWEAK = the mobile logo height */
		background: url('img/bwl-logo-colour.png?v=1') no-repeat left center / contain;
	}
	.bwl-has-blog-hero #header [data-device="mobile"] .ct-header-trigger {
		box-shadow: inset 0 0 0 1px #00085e !important;
	}
}

/* Feature Cards (full width) — gap below the heading. Client review: closed
   up to match the standard Feature Cards block (77px) for consistency. */
.bwl-feature-wide .bwl-feature-wide__title {
	margin-bottom: 77px;
}

/* Logo Row — gap below the heading */
.bwl-logorow .bwl-logorow__heading {
	margin-bottom: 100px;
}

/* Value Cards — gap below the headline */
.bwl-values .bwl-values__heading {
	margin-bottom: 53px;
}

/* Pathways — gap below the heading (desktop only; mobile keeps the block's 26px) */
@media (min-width: 901px) {
	.bwl-pathways .bwl-pathways__title {
		margin-bottom: 32px;
	}
	/* Close the space between each column's title and its copy. The column is a
	   flex stack with a uniform 16px gap, so the title→copy space isn't a margin
	   — pull the copy up by the gap to zero it (icon→title gap stays). */
	.bwl-pathways .bwl-pathways__text {
		margin-top: -16px;
	}
}

/* Hero — event-card link chevron: same hover animation as the page-hero nav
   bubble links (slide right + thicker stroke). Mirrored here for cache
   reliability; source in blocks/hero/style.css. */
.bwl-hero .bwl-hero__events-link svg { transition: transform 0.12s ease; }
.bwl-hero .bwl-hero__events-link svg path { transition: stroke-width 0.12s ease; }
.bwl-hero .bwl-hero__events-link:hover svg { transform: translateX(3px); }
.bwl-hero .bwl-hero__events-link:hover svg path { stroke-width: 3; }

/* Page hero — title per Figma: 64px / 900 / 64px, white (was a 48–96 clamp).
   Desktop only; mobile keeps the block's 34/38. Mirrored here for cache
   reliability; source in blocks/page-hero/style.css. */
@media (min-width: 901px) {
	.bwl-phero .bwl-phero__title {
		font-size: 64px;
		line-height: 64px;
		overflow-wrap: break-word;
	}
	/* Compact panel per design: content anchored to the top (no big navy gap).
	   Horizontally the content keeps the original centred 1600px column.
	   Mirrored from blocks/page-hero/style.css for cache reliability. */
	.bwl-phero .bwl-phero__panel {
		align-items: flex-start;
		min-height: clamp(420px, 39vw, 560px);   /* TWEAK panel height */
	}
	.bwl-phero .bwl-phero__inner {
		max-width: 1600px;
		margin-inline: auto;
		padding: 196px 24px 48px;   /* TWEAK top padding; 24px sides = the shared content gutter (aligns with Our Story) */
	}
}

/* Page hero — narrow-desktop tier (901–1400): the 440px nav bubble gets too
   dominant and rises into the hero copy, so shrink it and keep the hero text
   clear of its left edge. Above 1400 the desktop layout has room as designed. */
@media (min-width: 901px) and (max-width: 1400px) {
	/* compact bubble */
	.bwl-phero .bwl-phero__nav {
		width: min(360px, calc(100vw - 32px));   /* TWEAK bubble width on narrow desktops */
		padding: 16px 20px 18px;
		border-radius: 16px;
		box-shadow: 8px 8px 0 var(--bwl-cyan, #00ccff);
	}
	.bwl-phero .bwl-phero__nav-label { font-size: 11px; margin-bottom: 6px; }
	.bwl-phero .bwl-phero__nav-list a {
		padding: 7px 0;
		font-size: 16px;
		line-height: 22px;
	}
	/* hero copy stops before the bubble's left edge:
	   100vw − 24 content-left − 5vw bubble-right − 360 bubble − 24 gap */
	.bwl-phero .bwl-phero__content {
		max-width: min(700px, calc(95vw - 408px));
	}
}

/* Our Story — tighter gap after the page hero: pull the section up WITHOUT
   moving the hero (its padding reserves room for the hanging bubble; slight
   overlap into that reserve is fine — the bubble is right, the heading left).
   The pull-up scales down on narrower desktops so the heading never runs
   under the bubble. */
@media (min-width: 1401px) {
	.bwl-phero + .bwl-story {
		margin-top: -170px;   /* TWEAK: more negative = tighter (aims the OUR STORY eyebrow at the bubble's "Cleansport" row) */
	}
}
@media (min-width: 1200px) and (max-width: 1400px) {
	.bwl-phero + .bwl-story {
		margin-top: -60px;   /* TWEAK: milder pull on narrow desktops */
	}
}
/* 901–1199: no pull-up — the bubble needs the full reserve. */
@media (min-width: 901px) {
	/* The hero's bottom padding (the bubble reserve) can overlay the story's
	   heading — let clicks/selection pass through the empty area, but keep the
	   panel and the nav bubble interactive. */
	.bwl-phero { pointer-events: none; }
	.bwl-phero .bwl-phero__panel,
	.bwl-phero .bwl-phero__nav { pointer-events: auto; }
}

/* Pathways — mobile: the title highlight's 12px side padding was indenting
   the highlighted word; pull the box left so the copy aligns with the other
   lines and the highlight bleeds out to the left. Mirrored from
   blocks/pathways/style.css. */
@media (max-width: 900px) {
	.bwl-pathways .bwl-pathways__hl { margin-left: -12px; }
}

/* Our Story — mobile fixes */
@media (max-width: 900px) {
	/* the page-hero chalk speckle (z-index 3) was painting OVER the story's
	   eyebrow/heading — lift the story above it */
	.bwl-story {
		position: relative;
		z-index: 4;
	}
	/* the heading's manual line breaks (set for the desktop layout) force bad
	   wraps on narrow screens ("HAS" alone) — ignore them and wrap naturally */
	.bwl-story .bwl-story__heading br { display: none; }
	/* the intro's editor line breaks render as plain <br> with no spacing —
	   turn each into a paragraph-ish gap */
	.bwl-story .bwl-story__intro br {
		display: block;
		content: "";
		margin-top: 12px;   /* TWEAK gap between the intro sentences */
	}
}

/* Video (Our Purpose) — mobile button: text-width like the page's other
   buttons, not full-width. Mirrored from blocks/video-embed/style.css. */
@media (max-width: 900px) {
	.bwl-video .bwl-video__btn {
		align-self: flex-start;
		width: auto;
	}
}

/* Events Timeline — 4 columns fill the content width on desktop (the block's
   326px Figma value showed ~6 dots on wide screens). Mirrored from
   blocks/events-timeline/style.css. */
@media (min-width: 901px) {
	.bwl-etl .bwl-etl__item {
		flex-basis: calc((min(100vw, 1600px) - 48px) / 4);   /* TWEAK: /4 = columns per view */
	}
}

/* Our Story — the EST badge is centred over the foot while the body copy
   column reaches ~661px from the left (24 gutter + 637 text). The badge's left
   edge (centre − 100px) meets the text at a 1522px viewport, so below that the
   badge overlays the copy. Hide it below 1560 (1522 + scrollbar margin); above
   the 1600 container cap the clearance is a constant ~39px, so wide screens
   are always safe. The block CSS already hides it ≤900 for mobile. */
@media (max-width: 1560px) {
	.bwl-story .bwl-story__badge {
		display: none;
	}
}

/* Video (Our Purpose) — match the player box to the video's true 16:9 so Vimeo
   fills it edge-to-edge (the 1077/600 box was slightly wider → thin pillarbox
   gaps left/right once the iframe loaded). Now ALL widths: the mobile
   319/290 poster box left gaps above/below the playing video (client note),
   so the placeholder matches the video ratio everywhere. */
.bwl-video .bwl-video__player {
	aspect-ratio: 16 / 9;
}

@media (max-width: 900px) {
	.bwl-feature-wide .bwl-feature-wide__title,
	.bwl-logorow .bwl-logorow__heading,
	.bwl-values .bwl-values__heading {
		margin-bottom: 48px;
	}
}

/* Hero — sit flush under the navy header band (cancel Blocksy's
   content-area top padding when the hero is the first block). */
.entry-content > .bwl-hero.alignfull:first-child,
.entry-content > .bwl-phero.alignfull:first-child,
.entry-content > .bwl-ehero.alignfull:first-child,
.entry-content > .bwl-chero.alignfull:first-child,
.entry-content > .bwl-dhero.alignfull:first-child,
.entry-content > .bwl-ohero.alignfull:first-child,
.entry-content > .bwl-shero.alignfull:first-child,
.entry-content > .bwl-contact.alignfull:first-child,
.entry-content > .bwl-whero.alignfull:first-child,
.entry-content > .bwl-cohero.alignfull:first-child,
.entry-content > .bwl-calhero.alignfull:first-child,
.entry-content > .bwl-bhero.alignfull:first-child,
.entry-content > .bwl-ghero.alignfull:first-child,
.entry-content > .bwl-parthero.alignfull:first-child,
.entry-content > .bwl-clubs.alignfull:first-child {
	margin-top: calc(-1 * var(--theme-content-vertical-spacing, 60px));
}

/* Page Hero — hide the theme's page-title hero on pages that use the block
   (the hero block replaces it). The WordPress title stays for admin/SEO. */
.bwl-has-page-hero .hero-section,
.bwl-has-page-hero .entry-header {
	display: none;
}

/* Hide the theme's default page title on ALL Pages for a consistent look
   (home + hero pages already hide it via .bwl-has-page-hero; this covers the
   rest, e.g. Competitions). The WordPress title stays intact for admin/SEO/tab.
   `.page` is WordPress's body class on every static Page. */
.page .hero-section,
.page .entry-header,
.page .page-title {
	display: none;
}

/* (Hero sizing/image rules now live in blocks/hero/style.css — the panel
   restructure for the speckle + event card baked them into the base.) */

/* Buttons — fully rounded ends on every CTA pill, site-wide (client note:
   "button edges should be rounded, no flat bits"). 999px guarantees semicircle
   ends at any button height, unlike the fixed 20px radius. The circular
   carousel nav buttons are untouched. */
.bwl-hero__btn,
.bwl-cta__btn,
.bwl-support__btn,
.bwl-pben a.bwl-pben__btn,
.bwl-signup a.bwl-signup__btn,
.bwl-paths__btn,
.bwl-news__viewall,
.bwl-story__btn,
.bwl-video__btn,
.bwl-ai__btn,
.bwl-ae__btn,
.bwl-ehero__btn,
.bwl-macc__btn {
	border-radius: 999px;
}

/* Where To Start — intro + card body at weight 300 (client note: lighter is a
   better match to the design). Only this section, per the follow-up. */
.bwl-start__intro,
.bwl-start__body {
	font-weight: 300;
}

/* Feature Cards + Feature Cards Wide — press-back hover, in the MAIN stylesheet
   for two reasons: (1) GoDaddy sometimes serves stale block CSS (this file
   busts reliably), (2) the block rules only targeted <a> cards; the client
   wants the hover on every card. Higher specificity wins over the block CSS.
   BWL-CARD-HOVER-v1 deploy marker. */
.bwl-feature .bwl-feature__card,
.bwl-feature-wide .bwl-feature-wide__card {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bwl-feature .bwl-feature__card:hover,
.bwl-feature-wide .bwl-feature-wide__card:hover {
	transform: translate(8px, 8px);            /* TWEAK press distance */
	box-shadow: 4px 4px 0 var(--bwl-purple);   /* TWEAK residual shadow (resting 12px) */
}

/* Orange CTAs (competition page) — hover was a subtle opacity fade (client:
   too subtle). Per the follow-up: keep them orange, just shift the shade
   clearly darker on hover (no colour flip). */
.bwl-ae .bwl-ae__btn,
.bwl-macc .bwl-macc__btn,
.bwl-ehero .bwl-ehero__btn--orange {
	transition: background-color 0.15s ease;
}
.bwl-ae .bwl-ae__btn:hover,
.bwl-macc .bwl-macc__btn:hover,
.bwl-ehero .bwl-ehero__btn--orange:hover {
	background: #d63c00;   /* TWEAK hover shade (base orange #ff4a00) */
	color: #ffffff;
	opacity: 1;
}

/* Athlete Information — Key downloads hover: the arrow drops into the tray.
   Mirrored here (main style.css busts cache reliably); needs the split
   tray/arrow SVG from the block's render.php. */
.bwl-ai .bwl-ai__dl-arrow {
	transition: transform 0.25s ease;
}
.bwl-ai .bwl-ai__dl:hover .bwl-ai__dl-arrow {
	transform: translateY(5px);   /* TWEAK drop distance */
}

/* Pathways ("Strong is for everyone") — the green highlight hugs the word
   tighter (was 12px each side). Mirrored here for cache reliability. */
.bwl-pathways .bwl-pathways__hl {
	padding: 0 5px;      /* TWEAK highlight side padding */
	margin-left: -5px;   /* keep the word flush with the line above */
}

/* Membership CTA — client notes: (1) the panel now spans the same width as
   the 12/12 sections (1600 container minus the 24px gutters; it was the
   narrower 1333/10-of-12, leaving extra space each side); (2) the green
   highlight hugs the word tighter. Mirrored here for cache reliability. */
@media (min-width: 901px) {
	.bwl-cta .bwl-cta__card {
		width: calc(100% - 2 * 24px);
		max-width: calc(1333px - 2 * 24px);   /* 10/12 column (client review round 2) */
	}
}
.bwl-cta .bwl-cta__hl {
	padding: 0 5px;      /* TWEAK highlight side padding (was 8px) */
	margin-left: -5px;   /* all widths — zeroing it on mobile indented the
	                        highlighted text vs line 1 (client note) */
}

/* Membership CTA button — hover matches every other navy CTA panel: the
   button lightens (0.85 opacity). (An earlier note had it turn orange; the
   client now wants consistency across the CTA panels.) */
.bwl-cta .bwl-cta__btn {
	transition: opacity 0.15s ease;
}
.bwl-cta .bwl-cta__btn:hover {
	background: #00085e;
	opacity: 0.85;         /* TWEAK hover lightness */
	color: #ffffff;
}

/* Event Dates — filter pills, hardened. Blocksy's form styling (borders /
   underline / height / its own select arrow) bleeds into the dropdowns on
   top of the block CSS, so the full pill recipe lives HERE with !important
   resets: this file cache-busts reliably and out-specifies the theme. */
.bwl-edates .bwl-edates__filter select {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	padding: 11px 44px 12px 16px !important;
	background-color: #ffffff !important;
	background-image: url("data:image/svg+xml,%3Csvg width='21' height='11' viewBox='0 0 21 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 0.5L10.6382 10.5L0.5 0.499999' stroke='%2300085E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	background-size: 21px 11px !important;
	border: 0 !important;
	border-radius: 100px !important;
	box-shadow: none !important;
	outline: none;
	color: #00085e !important;
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif) !important;
	font-size: 16px !important;
	font-weight: 300 !important;
	line-height: 24px !important;
	text-decoration: none !important;
	cursor: pointer;
}
.bwl-edates .bwl-edates__filter select:focus,
.bwl-edates .bwl-edates__filter select:hover {
	border: 0 !important;
	box-shadow: none !important;
	background-color: #ffffff !important;
	text-decoration: none !important;
}
.bwl-edates .bwl-edates__filter select:focus-visible {
	outline: 2px solid #00085e;
	outline-offset: 2px;
}

/* Testimonials — the quote is a <blockquote>, and Blocksy's default
   blockquote styling paints a border bar on its left edge (visible on
   mobile next to the orange quote mark). Kill it here so the fix wins
   over theme CSS and busts the GoDaddy cache reliably. */
.bwl-quotes .bwl-quotes__quote {
	border: 0 !important;
	padding: 0 !important;
	margin-left: 0 !important;
	font-style: normal !important;
	background: none !important;
}

/* Club finder — search fields + button, hardened. Blocksy's form/button
   styling (square corners, teal focus border, forced field height that
   crops the text, button radius reset) bleeds over the block CSS, so the
   full recipe lives HERE with !important: this file cache-busts reliably
   and out-specifies the theme. */
.bwl-clubs .bwl-clubs__input,
.bwl-clubs .bwl-clubs__select {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	padding: 11px 16px 12px !important;
	background-color: #f2f3f7 !important;
	border: 0.5px solid #00085e !important;
	border-radius: 100px !important;
	box-shadow: none !important;
	color: #00085e !important;
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif) !important;
	font-size: 16px !important;
	font-weight: 300 !important;
	line-height: 24px !important;
}
.bwl-clubs .bwl-clubs__select {
	background-image: url("data:image/svg+xml,%3Csvg width='21' height='11' viewBox='0 0 21 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 0.5L10.6382 10.5L0.5 0.499999' stroke='%2300085E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 18px center !important;
	background-size: 18px 9px !important;
	cursor: pointer;
}
.bwl-clubs .bwl-clubs__input:focus,
.bwl-clubs .bwl-clubs__input:hover,
.bwl-clubs .bwl-clubs__select:focus,
.bwl-clubs .bwl-clubs__select:hover {
	border-color: #00085e !important;
	background-color: #f2f3f7 !important;
	box-shadow: none !important;
}
.bwl-clubs .bwl-clubs__input:focus-visible,
.bwl-clubs .bwl-clubs__select:focus-visible {
	outline: 2px solid #00085e;
	outline-offset: 2px;
}
.bwl-clubs .bwl-clubs__btn {
	padding: 8px 20px !important;
	background: #ff4a00 !important;
	border: 0 !important;
	border-radius: 20px !important;
	color: #ffffff !important;
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 24px !important;
	min-height: 0 !important;
}
.bwl-clubs .bwl-clubs__btn:hover { background: #ff4a00 !important; color: #ffffff !important; opacity: 0.9; }

/* Sport80 events ([events_form] shortcode) — filter pills + results table,
   styled to the BWL system (the ported file came unstyled from the old
   theme). Lives here so the look survives GoDaddy's block-CSS caching. */
.bwl-s80 { font-family: var(--bwl-font, Arial, Helvetica, sans-serif); }
.bwl-s80__group { margin-bottom: 24px; }
.bwl-s80__label {
	margin: 0 0 12px;
	color: #00085e;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}
.bwl-s80__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.bwl-s80__pill {
	display: inline-flex;
	align-items: center;
	padding: 7px 18px;
	background: #ffffff;
	border: 1px solid #00085e;
	border-radius: 100px;
	color: #00085e;
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.bwl-s80__pill input { position: absolute; opacity: 0; pointer-events: none; }
.bwl-s80__pill.is-active { background: #00085e; color: #ffffff; }
.bwl-s80__pill:hover:not(.is-active) { background: #e0fbff; }

.bwl-s80-result.is-loading { opacity: 0.6; }
.bwl-s80-msg { color: #00085e; font-size: 18px; }

.bwl-s80-scroll { overflow-x: auto; }
.events-table {
	width: 100%;
	border-collapse: collapse;
	color: #00085e;
	font-size: 16px;
	line-height: 22px;
}
.events-table__day h2 {
	margin: 28px 0 8px;
	color: #00085e;
	font-size: 26px;
	font-weight: 900;
	line-height: 30px;
	text-transform: uppercase;
}
.events-table__day th { text-align: left; padding: 0; border: 0; }
.events-table td {
	padding: 12px 16px 12px 0;
	border-bottom: 1px solid #00ccff;
	vertical-align: middle;
}
.events-table__name { font-weight: 700; }
.events-table__tier { min-width: 60px; }
.events-table__reg { min-width: 260px; }
.bwl-s80-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 18px;
	border-radius: 20px;
	box-shadow: inset 0 0 0 1px #00085e;
	color: #00085e;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.15s ease;
}
.bwl-s80-btn:hover { color: #00085e; opacity: 0.7; }
.bwl-s80-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 24px;
	padding: 8px 20px;
	background: #00085e;
	border: 0;
	border-radius: 20px;
	color: #ffffff;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.bwl-s80-more:hover { opacity: 0.9; }

@media (max-width: 700px) {
	.bwl-s80__pill { font-size: 14px; padding: 6px 14px; }
	.events-table { font-size: 14px; line-height: 20px; }
	.events-table__day h2 { font-size: 20px; line-height: 24px; }
}

/* Text-selection highlight — TRANSLUCENT brand cyan, no colour override.
   A solid highlight went unreadable in form fields (textareas/inputs):
   browsers apply only the selection BACKGROUND there and ignore the text
   colour, and Blocksy's late dynamic CSS forced its navy palette colour —
   navy bar over navy text. A see-through tint keeps the original text
   visible everywhere (navy on white, white on navy, form fields incl.);
   !important beats the theme's dynamic selection rule. */
::selection { background: rgba(0, 204, 255, 0.35) !important; color: inherit !important; }
::-moz-selection { background: rgba(0, 204, 255, 0.35) !important; color: inherit !important; }

/* Logo rows — sizing convention (client's standard workflow): every logo is
   scaled to the SAME canvas height, so upload all logo files on an equal-
   height canvas and size the artwork proportionally within it (padding in
   the file = smaller mark). No width cap: it would letterbox wide canvases
   and break that proportional control. Applies to the Logo Showcase and the
   Logo Row ("Our partners") blocks. */
.bwl-logos .bwl-logorow__item img,
.bwl-logos .bwl-logos__item img,
.bwl-logorow .bwl-logorow__item img {
	max-width: none;
}

/* Newsletter signup — the "For news, info and special offers:" label and the
   email pill share ONE line on desktop (stacked on mobile). Mirrored here for
   cache reliability (GoDaddy can serve stale block CSS). */
.bwl-newscta .bwl-newscta__signup {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 20px;                 /* TWEAK label ↔ pill gap */
	align-self: stretch;       /* definite width so the pill's min(540px, 100%)
	                              resolves (verified live: 540px) */
}
.bwl-newscta .bwl-newscta__label { flex: 0 0 auto; }
.bwl-newscta .bwl-newscta__form { flex: 0 1 auto; width: min(540px, 100%); }   /* TWEAK pill width (was 390 — longer emails need room) */
/* bundled Figma chalk (no upload): flush to the card's top-right corner at
   full card height. The exported PNG is already in its final orientation
   (dense corner top-right) — no rotation. The extra class out-specifies the
   slider-var rules, including the mobile one below. */
.bwl-newscta .bwl-newscta__chalk.bwl-newscta__chalk--default {
	left: auto;
	right: 0;
	top: 0;
	width: auto;
	height: 100%;
	transform: none;
}
/* the consent line made the form taller than the pill and broke the
   label ↔ pill centring — hidden in this block (footer keeps its own);
   same for the EMPTY response div, whose top margin had the same effect */
.bwl-newscta .bwl-news-consent { display: none; }
.bwl-newscta .mc4wp-response:empty { display: none; }
@media (max-width: 900px) {
	/* 34px type on 38px lines — set solid, the highlight bar overlapped the
	   line above (mirror of the block CSS) */
	.bwl-newscta .bwl-newscta__title { line-height: 38px; }   /* TWEAK mobile leading */

	.bwl-newscta .bwl-newscta__signup {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	.bwl-newscta .bwl-newscta__form { width: 100%; }
	/* mobile chalk: slider-driven (mirror of the block CSS) */
	.bwl-newscta .bwl-newscta__chalk {
		left: var(--nw-spk-x-m, 50%);
		top: var(--nw-spk-y-m, 50%);
		width: var(--nw-spk-w-m, 160%);
		transform: translate(-50%, -50%) rotate(var(--nw-spk-rot-m, 180deg));
	}
}

/* Course hero + Course pathway colour variants — the variant definitions are
   new and GoDaddy can serve the stale block CSS without them; mirrored here
   for cache reliability (the var consumers already exist in the old CSS). */
.bwl-chero.bwl-chero--green  { --ch-accent: #00e8a8; }
.bwl-chero.bwl-chero--purple { --ch-accent: #8f63ff; }
.bwl-cpath.bwl-cpath--mint   { --bwl-blue: #ccfaee; --cp-accent: #00e8a8; }
.bwl-cpath.bwl-cpath--purple { --bwl-blue: #e6e0fc; --cp-accent: #8f63ff; }
.bwl-cpath.bwl-cpath--peach  { --bwl-blue: #fbede6; --cp-accent: #ff4a00; }

/* Course overview — new course-hero pieces, mirrored for cache reliability
   (higher specificity so they also beat a stale block CSS root). */
.bwl-chero .bwl-chero__panel-intro {
	margin: 30px 0 0;
	max-width: 647px;
	color: #ffffff;
	font-size: 26px;
	font-weight: 300;
	line-height: 32px;
}
.bwl-chero .bwl-chero__photo {
	position: absolute;
	/* anchored to the CONTENT column's right edge (the Figma look), not the
	   viewport edge — nudge with --ch-photo-x (positive = further right) */
	right: calc(max(0px, (100% - var(--bwl-content)) / 2) + var(--ch-photo-x, 0px));
	bottom: 0;
	height: var(--ch-photo-h, 95%);
	max-width: 62%;
	width: auto;
	object-fit: contain;
	object-position: right bottom;
	z-index: 1;
	pointer-events: none;
}
.bwl-chero .bwl-chero__nav-label--2 { margin-top: 24px; }
.bwl-chero.bwl-chero--cards-light .bwl-chero__card {
	background: #ffffff;
	border-color: var(--bwl-navy, #00085e);
	box-shadow: 12px 12px 0 var(--bwl-navy, #00085e);
}
.bwl-chero.bwl-chero--cards-light .bwl-chero__card-text { color: var(--bwl-navy, #00085e); }
.bwl-chero.bwl-chero--cards-light .bwl-chero__card-icon path[fill*="ch-accent"] { fill: var(--bwl-navy, #00085e); }
@media (max-width: 900px) {
	.bwl-chero .bwl-chero__panel-intro { font-size: 20px; line-height: 26px; margin-top: 20px; }
	.bwl-chero .bwl-chero__photo { display: none; }
	.bwl-chero.bwl-chero--cards-light .bwl-chero__card { box-shadow: 6px 6px 0 var(--bwl-navy, #00085e); }
}

/* Prospectus download — image height cap (client-iterated value; the right
   bleed otherwise inflates the picture on wide screens). Mirrored for cache
   reliability. */
.bwl-pros .bwl-pros__media img {
	max-height: 500px;   /* TWEAK (Figma: 500) */
	object-fit: cover;
	object-position: 50% 25%;   /* TWEAK crop focus (keep the faces in frame) */
}

/* Course overview: the two-group quick-links bubble hangs deeper — the cards
   row clears it (mirrored for cache reliability). */
@media (min-width: 901px) {
	.bwl-chero.bwl-chero--nav2 .bwl-chero__cards { margin-top: 120px; }   /* TWEAK */
}

/* Course overview: taller panel (Figma: 666px @1440) — the bubble's top rows
   sit on the navy and the panel edge cuts in at the second link row */
@media (min-width: 901px) {
	.bwl-chero.bwl-chero--overview { --ch-nav-peek: 100px; }   /* TWEAK: bubble above the edge */
	.bwl-chero.bwl-chero--overview .bwl-chero__panel {
		/* Figma: 666px INCLUDING the header zone; the clip already adds
		   ~134px above the panel for the transparent header */
		min-height: clamp(360px, 37vw, 532px);       /* TWEAK panel height */
	}
	/* 6/12 columns: title + text left, picture right */
	.bwl-chero.bwl-chero--overview .bwl-chero__content {
		max-width: calc(var(--bwl-content) * 6 / 12 - var(--ch-pad-x, 24px));
	}
	.bwl-chero.bwl-chero--overview .bwl-chero__photo {
		max-width: calc(var(--bwl-content) * 6 / 12);
	}
}

/* Club finder results — head/icon alignment (client-iterated; mirrored for
   cache reliability with higher specificity). */
.bwl-clubs .bwl-clubs__result { padding: 24px 24px 28px 25px; }
.bwl-clubs .bwl-clubs__result-head {
	display: grid;
	grid-template-columns: 35px minmax(0, 1fr);
	gap: 0 16px;
	align-items: center;
	margin-bottom: 26px;
}
.bwl-clubs .bwl-clubs__result-num { position: relative; display: inline-block; width: 35px; height: 41px; margin: 0; }
.bwl-clubs .bwl-clubs__result-headtext { padding-top: 6px; }   /* centre the title on the DISC (ribbon is 6px) */
.bwl-clubs .bwl-clubs__result-name { margin: 0; }
.bwl-clubs .bwl-clubs__result-rows li {
	display: grid;
	grid-template-columns: 35px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}
.bwl-clubs .bwl-clubs__result-rows svg { justify-self: center; }

/* Contact form fields (BWL — Contact hero + form) — mirrored here so they
   reliably beat Blocksy's global input styling (white bg, cyan border,
   fixed height) AND survive GoDaddy's stale block-CSS cache. */
.bwl-contact input.bwl-contact__input,
.bwl-contact textarea.bwl-contact__input {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
	padding: 12px 16px 10px;
	background: #f2f3f7;
	border: 0.5px solid #00085e;
	border-radius: 100px;
	color: #00085e;
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}
.bwl-contact .bwl-contact__input::placeholder { color: #00085e; opacity: 0.7; }
.bwl-contact input.bwl-contact__input:focus,
.bwl-contact textarea.bwl-contact__input:focus {
	outline: none;
	border-color: #00ccff;
	box-shadow: 0 0 0 1px #00ccff;
}
.bwl-contact textarea.bwl-contact__input--area {
	min-height: 129px;
	border-radius: 20px;
	resize: vertical;
}
/* 0.5px hairlines can vanish on some mobile pixel densities — 1px there */
@media (max-width: 900px) {
	.bwl-contact input.bwl-contact__input,
	.bwl-contact textarea.bwl-contact__input {
		border-width: 1px;
	}
}

/* Contact form submit (BWL — Contact hero + form) — mirrored, beats
   Blocksy's global button styling (square corners, theme padding). */
.bwl-contact button.bwl-contact__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 22px;
	padding: 8px 20px;
	height: auto;
	min-height: 0;
	background: #ff4a00;
	border: 0;
	border-radius: 20px;
	color: #ffffff;
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background 0.15s ease, opacity 0.15s ease;
}
.bwl-contact button.bwl-contact__submit:hover { background: #d63c00; color: #ffffff; }
.bwl-contact button.bwl-contact__submit:disabled { opacity: 0.6; cursor: default; }

/* Athlete Information timeline — dots in FRONT of the connector line
   (mirrored for cache reliability; the line is an absolute ::before that
   otherwise paints over the in-flow dots). */
.bwl-ai .bwl-ai__tl-dot {
	position: relative;
	z-index: 1;
}

/* Calendar hero head (BWL — Competition calendar hero) — iterated values
   mirrored here so GoDaddy's stale block-CSS cache can't undo them. */
.bwl-calhero .bwl-calhero__content {
	max-width: calc(var(--bwl-content, 1600px) * 8 / 12 - var(--cal-pad-x, 24px));
}
.bwl-calhero .bwl-calhero__title {
	margin: 0 0 88px;   /* TWEAK title → intro gap (Figma: 88) */
}
@media (max-width: 900px) {
	.bwl-calhero .bwl-calhero__content { max-width: none; }
	.bwl-calhero .bwl-calhero__title { margin-bottom: 30px; }
}

/* Benefits of partner — CTA sized like the Athlete support buttons (mirrored
   from the block CSS, which this host caches aggressively) */
.bwl-pben a.bwl-pben__btn { padding: 12px 26px; }

/* Sign up steps — button sized like the Athlete support buttons on desktop and
   mobile (mirrored from the block CSS, which this host caches aggressively) */
.bwl-signup a.bwl-signup__btn { min-width: 0; padding: 12px 26px; }
@media (max-width: 900px) {
	.bwl-signup a.bwl-signup__btn { width: auto; max-width: 100%; }
}

/* Linked image cards — site-wide hover pattern (client note): subtle image
   zoom + the circle-chevron inverts (navy fill, white chevron). Applies to
   Weightlifting programs, Latest news and News list cards. Mirrored from the
   block CSS, which this host caches aggressively. */
.bwl-programs .bwl-programs__media,
.bwl-narch .bwl-narch__media { display: block; overflow: hidden; }
.bwl-programs .bwl-programs__img,
.bwl-narch .bwl-narch__img { transition: transform 0.5s ease; }
.bwl-programs a.bwl-programs__card:hover .bwl-programs__img,
.bwl-narch .bwl-narch__card:hover .bwl-narch__img,
.bwl-news .bwl-news__card:hover .bwl-news__media img { transform: scale(1.05); }   /* TWEAK zoom strength */
.bwl-programs .bwl-programs__arrow-ring, .bwl-programs .bwl-programs__arrow-chev,
.bwl-news .bwl-news__arrow-ring, .bwl-news .bwl-news__arrow-chev,
.bwl-narch .bwl-narch__chev-ring, .bwl-narch .bwl-narch__chev-chev { transition: stroke 0.15s ease, fill 0.15s ease; }
.bwl-programs a.bwl-programs__card:hover .bwl-programs__arrow-ring,
.bwl-news .bwl-news__card:hover .bwl-news__arrow-ring,
.bwl-narch .bwl-narch__card:hover .bwl-narch__chev-ring { fill: #00085e; }
.bwl-programs a.bwl-programs__card:hover .bwl-programs__arrow-chev,
.bwl-news .bwl-news__card:hover .bwl-news__arrow-chev,
.bwl-narch .bwl-narch__card:hover .bwl-narch__chev-chev { stroke: #ffffff; }
@media (prefers-reduced-motion: reduce) {
	.bwl-programs .bwl-programs__img, .bwl-narch .bwl-narch__img, .bwl-news .bwl-news__media img { transition: none; transform: none !important; }
}

/* Coaching paths — per-pathway highlight colour (mirrored from the block CSS,
   which this host caches aggressively) */
.bwl-paths .bwl-paths__item.is-active .bwl-paths__item-text {
	background: var(--cp-hl, #ff4a00);
	color: var(--cp-hl-text, #ffffff);
}
.bwl-paths .bwl-paths__item--orange { --cp-hl: #ff4a00; --cp-hl-text: #ffffff; }
.bwl-paths .bwl-paths__item--blue   { --cp-hl: #00ccff; --cp-hl-text: #00085e; }
.bwl-paths .bwl-paths__item--green  { --cp-hl: #00e8a8; --cp-hl-text: #00085e; }
.bwl-paths .bwl-paths__item--purple { --cp-hl: #8f63ff; --cp-hl-text: #ffffff; }

/* Event dates — course name above the time on Arlo cards (mirrored from the
   block CSS, which this host caches aggressively) */
.bwl-edates .bwl-edates__name {
	margin-top: 20px;
	text-align: center;
	color: var(--bwl-navy, #00085e);
	font-size: 20px;
	font-weight: 300;
	line-height: 26px;
}
.bwl-edates .bwl-edates__name + .bwl-edates__time { margin-top: 4px; }