/*
 * Betty Special Coaching.
 *
 * The palette, the type pairing and the structural rhythm are all lifted off
 * Betty's own Facebook banner, which is the only brief we have and is a better
 * one than most:
 *
 *   - A deep navy (#021D37) and a soft antique gold (#B68F50), both supplied by
 *     the client. Sampled from the banner they come out at #00153A and #E9CA91
 *     respectively — the second is the light gold of the credibility bar rather
 *     than the gold of the type, so both are kept.
 *   - A warm off-white ground, sampled at #EBE5DE, which is what she stands on.
 *   - A handwritten line running into a set one. The banner does this five
 *     separate times and it is the single most recognisable thing about the
 *     brand, so .bsc-script is used the same way and never for body copy.
 *   - A gold brush-stroke underline beneath the script. Drawn as a tapered path
 *     rather than a border, because a flat 1px rule is not the same gesture.
 *   - A gold outline heart, which is the only mark the brand has.
 *
 * Sections alternate cream, warm cream and navy. Navy bands are where the
 * argument gets made; cream bands are where it gets explained. That is the whole
 * structural rhythm.
 *
 * There is no photography beyond Betty's portrait. Nothing here depends on a
 * stock library, which on a site with no verified image licences is deliberate.
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
	--bsc-navy:       #021D37;
	--bsc-navy-deep:  #01142A;
	--bsc-navy-soft:  #0B2E4E;

	--bsc-gold:       #B68F50;
	--bsc-gold-lt:    #E9CA91;
	--bsc-gold-pale:  #F5E4C4;
	--bsc-gold-deep:  #8E6C36;

	--bsc-cream:      #F4F0EA;
	--bsc-cream-deep: #EBE5DE;
	--bsc-paper:      #FFFDFA;

	--bsc-text:       #1B2A3B;
	--bsc-muted:      #5D6E80;
	--bsc-faint:      #8394A5;

	/* On navy. */
	--bsc-on-navy:       #EDE9E2;
	--bsc-on-navy-muted: #A9BACB;

	--bsc-line:      rgba(182, 143, 80, .28);
	--bsc-line-soft: rgba(2, 29, 55, .10);
	--bsc-line-navy: rgba(233, 202, 145, .18);

	--bsc-body:   'Montserrat', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
	--bsc-script: 'Kaushan Script', 'Snell Roundhand', cursive;

	--bsc-wrap:   1240px;
	--bsc-gutter: clamp(1.25rem, 4vw, 3.25rem);
	--bsc-band:   clamp(4rem, 8vw, 7rem);

	--bsc-radius: 14px;

	/* The hero slides up underneath the header by exactly its at-rest height.
	   Keeping that number in one place stops the two from drifting apart the next
	   time the masthead changes. */
	--bsc-header-h: 132px;

	/* The masthead interpolates between these two states. --bsc-shrink is a
	   0-to-1 number theme.js writes on the header element each scroll frame, so
	   the collapse is continuous with the scroll rather than a jump at a
	   threshold. It is set on the header rather than on :root so a scroll only
	   invalidates the masthead's styles, not the whole document's. */
	--bsc-bar-max:  132px;
	--bsc-bar-min:  72px;
	--bsc-logo-max: 76px;
	--bsc-logo-min: 42px;
	--bsc-shrink:   0;

	--bsc-ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 1040px) {
	:root {
		--bsc-header-h: 108px;
		--bsc-bar-max:  108px;
		--bsc-bar-min:  66px;
		--bsc-logo-max: 60px;
		--bsc-logo-min: 38px;
	}
}

/* ------------------------------------------------------------------ base -- */

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

html {
	scroll-behavior: smooth;
	/* The header is fixed, so an in-page anchor would otherwise land with its
	   heading tucked underneath it. */
	scroll-padding-top: 8rem;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bsc-cream);
	color: var(--bsc-text);
	font-family: var(--bsc-body);
	font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
	line-height: 1.72;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.bsc-locked { overflow: hidden; }

img, svg { max-width: 100%; display: block; }

a { color: var(--bsc-gold-deep); text-decoration: none; transition: color .2s var(--bsc-ease); }
a:hover { color: var(--bsc-navy); }

h1, h2, h3, h4 {
	margin: 0;
	color: var(--bsc-navy);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -.018em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.95vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1.02rem + .4vw, 1.32rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
	outline: 2px solid var(--bsc-gold);
	outline-offset: 3px;
	border-radius: 3px;
}

.bsc-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.bsc-skip {
	position: absolute;
	top: -100px; left: 1rem;
	z-index: 200;
	padding: .7rem 1.1rem;
	background: var(--bsc-navy);
	color: var(--bsc-gold-lt);
	font-size: .82rem;
	font-weight: 600;
	border-radius: 0 0 8px 8px;
	transition: top .2s var(--bsc-ease);
}
.bsc-skip:focus { top: 0; color: var(--bsc-gold-lt); }

/* ---------------------------------------------------------------- layout -- */

.bsc-wrap {
	width: 100%;
	max-width: var(--bsc-wrap);
	margin-inline: auto;
	padding-inline: var(--bsc-gutter);
}

.bsc-wrap--narrow { max-width: 860px; }

.bsc-main { display: block; }

.bsc-section {
	position: relative;
	padding-block: var(--bsc-band);
}

.bsc-section--warm { background: var(--bsc-cream-deep); }

.bsc-section--navy {
	background: var(--bsc-navy);
	color: var(--bsc-on-navy);
}

.bsc-section--navy h1,
.bsc-section--navy h2,
.bsc-section--navy h3 { color: var(--bsc-paper); }

.bsc-section--navy .bsc-lede { color: var(--bsc-on-navy-muted); }

/* A hairline between a cream band and the one after it. Navy bands supply their
   own edge by being a different colour, so they are excluded. */
.bsc-section + .bsc-section:not(.bsc-section--navy)::before {
	content: '';
	position: absolute;
	inset-inline: var(--bsc-gutter);
	top: 0;
	height: 1px;
	background: var(--bsc-line-soft);
}

/* --------------------------------------------------------- shared pieces -- */

.bsc-eyebrow {
	display: block;
	margin-bottom: .9rem;
	color: var(--bsc-gold-deep);
	font-size: .715rem;
	font-weight: 700;
	letter-spacing: .19em;
	text-transform: uppercase;
	line-height: 1.5;
}

.bsc-eyebrow--gold { color: var(--bsc-gold-lt); }

/*
 * The handwritten line.
 *
 * Kaushan sits high on its em box and carries long descenders, so it needs
 * asymmetric leading or it collides with whatever is set beneath it. The
 * negative bottom margin pulls the set line back up into the gap the script's
 * own line-height opens.
 */
.bsc-script {
	margin: 0 0 .1em;
	color: var(--bsc-gold);
	font-family: var(--bsc-script);
	font-weight: 400;
	line-height: 1.28;
	letter-spacing: 0;
	text-wrap: balance;
}

.bsc-script--lg { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); }

/* Capped at 3.5rem rather than 4rem so "Build the Life & Business" sits on one
   line in the hero column. At 4rem it broke before the ampersand, which is the
   one place a handwritten line must not break. */
.bsc-script--xl { font-size: clamp(2.2rem, 1.3rem + 3.1vw, 3.5rem); display: block; }

.bsc-section--navy .bsc-script,
.bsc-banner .bsc-script,
.bsc-closer .bsc-script { color: var(--bsc-gold-lt); }

/*
 * The gold brush rule.
 *
 * A tapered path rather than a border. The banner underlines nearly every script
 * line with a stroke that thins towards both ends, and a flat 1px rule is a
 * different gesture entirely — it reads as a divider instead of as a mark made
 * by hand.
 */
.bsc-rule {
	display: block;
	width: 168px;
	height: 10px;
	margin: 1.1rem 0 1.5rem;
	color: var(--bsc-gold);
}
.bsc-rule svg { width: 100%; height: 100%; display: block; }
.bsc-rule--center { margin-inline: auto; }

.bsc-section--navy .bsc-rule,
.bsc-banner .bsc-rule,
.bsc-closer .bsc-rule { color: var(--bsc-gold-lt); }

.bsc-lede {
	max-width: 62ch;
	color: var(--bsc-muted);
	font-size: clamp(1.03rem, .99rem + .22vw, 1.16rem);
	line-height: 1.7;
}

.bsc-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.bsc-head--center { margin-inline: auto; text-align: center; }
.bsc-head--center .bsc-lede { margin-inline: auto; }
.bsc-head__actions { margin-top: 2rem; }

.bsc-prose { color: var(--bsc-muted); }
.bsc-prose--center { margin-inline: auto; }
.bsc-prose p { margin-bottom: 1.15em; }

.bsc-prose--editor { color: var(--bsc-text); }
.bsc-prose--editor h2,
.bsc-prose--editor h3 { margin: 2rem 0 .8rem; }
.bsc-prose--editor ul,
.bsc-prose--editor ol { padding-left: 1.3rem; }
/* The syndicated legal documents arrive wrapped in inline style="color:#000000".
   Harmless here, but pinned anyway so a future dark treatment does not inherit
   invisible text. */
.bsc-prose--editor [style*="color"] { color: var(--bsc-text) !important; }

.bsc-pull {
	margin: 1.8rem 0 0;
	padding-left: 1.3rem;
	border-left: 2px solid var(--bsc-gold);
	color: var(--bsc-navy);
	font-size: 1.08rem;
	font-weight: 500;
	font-style: normal;
	line-height: 1.55;
}

.bsc-pull--script {
	padding-left: 0;
	border-left: 0;
	color: var(--bsc-gold-deep);
	font-family: var(--bsc-script);
	font-weight: 400;
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem);
	line-height: 1.35;
}

/* --------------------------------------------------------------- buttons -- */

.bsc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .85rem 1.6rem;
	border: 1px solid var(--bsc-navy);
	border-radius: 999px;
	background: var(--bsc-navy);
	color: var(--bsc-paper);
	font-family: inherit;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	line-height: 1.2;
	cursor: pointer;
	transition: background .22s var(--bsc-ease), color .22s var(--bsc-ease), border-color .22s var(--bsc-ease), transform .22s var(--bsc-ease);
}

.bsc-btn:hover {
	background: var(--bsc-gold);
	border-color: var(--bsc-gold);
	color: var(--bsc-navy);
	transform: translateY(-1px);
}

.bsc-btn--gold {
	background: var(--bsc-gold);
	border-color: var(--bsc-gold);
	color: var(--bsc-navy);
}
.bsc-btn--gold:hover { background: var(--bsc-gold-lt); border-color: var(--bsc-gold-lt); }

.bsc-btn--ghost {
	background: transparent;
	border-color: var(--bsc-line);
	color: var(--bsc-navy);
}
.bsc-btn--ghost:hover {
	background: transparent;
	border-color: var(--bsc-gold);
	color: var(--bsc-gold-deep);
}

.bsc-section--navy .bsc-btn--ghost,
.bsc-closer .bsc-btn--ghost {
	border-color: var(--bsc-line-navy);
	color: var(--bsc-gold-lt);
}
.bsc-section--navy .bsc-btn--ghost:hover,
.bsc-closer .bsc-btn--ghost:hover { border-color: var(--bsc-gold-lt); color: var(--bsc-gold-pale); }

.bsc-btn--sm { padding: .62rem 1.15rem; font-size: .72rem; }
.bsc-btn--lg { padding: 1rem 2rem; font-size: .85rem; }
.bsc-btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------- figures -- */

.bsc-figure { margin: 0; }
.bsc-figure img { width: 100%; height: auto; }

/*
 * Betty's portrait.
 *
 * The source is a rectangular crop off her banner, background and all. There was
 * no cut-out to work from and none could be made: her hair is platinum and
 * samples *lighter* than the backdrop behind it (#F3F4F3 against #EAEBEE), so
 * every way of keying out that background takes her hair with it.
 *
 * Fading the edges was the first attempt and it looked like a mistake — a
 * rectangle of slightly cooler grey dissolving into cream still reads as a
 * rectangle. So the panel is owned instead of hidden: rounded at the top,
 * squared at the bottom, and sat directly on the gold credibility bar so she
 * appears to rise out of it. A deliberate frame beats a failed cut-out.
 */
.bsc-figure--portrait {
	overflow: hidden;
	max-width: 520px;
	margin-inline: auto;
	border-radius: var(--bsc-radius) var(--bsc-radius) 0 0;
	background: #EDEFF1;
	box-shadow: 0 -20px 55px -38px rgba(2, 29, 55, .55);
}
.bsc-figure--portrait img { width: 100%; }

/* On the about page it sits in the flow rather than on the gold bar, so it is
   rounded on all four corners and lifts off the page instead. */
.bsc-figure--framed {
	border-radius: var(--bsc-radius);
	box-shadow: 0 20px 50px -28px rgba(2, 29, 55, .5);
}

/* An empty photo slot: a warm panel carrying the heart and the filename it
   wants, so the gap looks deliberate and doubles as the shot list. */
.bsc-figure--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	aspect-ratio: 3 / 4;
	border: 1px dashed var(--bsc-line);
	border-radius: var(--bsc-radius);
	background: var(--bsc-cream-deep);
	color: var(--bsc-gold);
}
.bsc-figure__note {
	color: var(--bsc-faint);
	font-size: .74rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.bsc-mark { color: var(--bsc-gold); }
.bsc-mark--sm { width: 20px; height: 19px; }

/* --------------------------------------------------------- utility strip -- */

.bsc-utility {
	position: relative;
	z-index: 60;
	background: var(--bsc-navy);
	color: var(--bsc-on-navy-muted);
	font-size: .76rem;
}

.bsc-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 40px;
	padding-block: .35rem;
}

.bsc-utility__promise {
	margin: 0;
	color: var(--bsc-gold-lt);
	font-family: var(--bsc-script);
	font-size: 1.02rem;
	line-height: 1.5;
}

.bsc-utility__list {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bsc-utility__list a {
	display: inline-flex;
	align-items: center;
	gap: .42rem;
	color: var(--bsc-on-navy-muted);
	font-weight: 500;
}
.bsc-utility__list a:hover { color: var(--bsc-gold-lt); }

@media (max-width: 860px) {
	.bsc-utility__inner { justify-content: center; }
	.bsc-utility__promise { display: none; }
	.bsc-utility__list { gap: 1.1rem; }
}

/* -------------------------------------------------------------- masthead -- */

/*
 * The outer element reserves a constant slice of the page and never changes
 * size; the bar inside it is what shrinks. Collapsing the outer element would
 * shorten the document as you scroll, dragging every section up the page beneath
 * the reader — the browser cannot even hold scroll position through it.
 */
.bsc-header {
	position: sticky;
	top: 0;
	z-index: 70;
	height: var(--bsc-header-h);
}

.bsc-header__bar {
	height: calc(var(--bsc-bar-max) + (var(--bsc-bar-min) - var(--bsc-bar-max)) * var(--bsc-shrink));
	background: var(--bsc-cream);
	/* Both the hairline and the shadow arrive with the scroll rather than being
	   there at rest, so the masthead sits flat on the hero and then lifts off it. */
	box-shadow:
		inset 0 -1px 0 rgba(182, 143, 80, calc(.34 * var(--bsc-shrink))),
		0 10px 30px -22px rgba(2, 29, 55, calc(.9 * var(--bsc-shrink)));
	transition: background .2s var(--bsc-ease);
}

.bsc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: 100%;
}

.bsc-brand { display: inline-flex; align-items: center; }

.bsc-logo { display: inline-flex; align-items: center; }
.bsc-logo__img {
	width: auto;
	height: calc(var(--bsc-logo-max) + (var(--bsc-logo-min) - var(--bsc-logo-max)) * var(--bsc-shrink));
}

.bsc-logo--set { flex-direction: column; align-items: flex-start; line-height: 1.1; }
.bsc-logo__name {
	color: var(--bsc-paper);
	font-family: var(--bsc-script);
	font-size: 1.9rem;
}
.bsc-logo__sub {
	color: var(--bsc-gold-lt);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .34em;
	text-transform: uppercase;
	padding-left: .2rem;
}

.bsc-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1.1rem, 2.2vw, 2.1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.bsc-nav__list a,
.bsc-nav__list li > a {
	color: var(--bsc-navy);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	white-space: nowrap;
}
.bsc-nav__list a:hover { color: var(--bsc-gold-deep); }

/* wp_nav_menu emits current-menu-item; the coded fallback emits is-current. */
.bsc-nav__list .is-current > a,
.bsc-nav__list .current-menu-item > a {
	color: var(--bsc-gold-deep);
	box-shadow: inset 0 -2px 0 var(--bsc-gold);
}

.bsc-header__actions { display: flex; align-items: center; gap: .8rem; }

.bsc-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	padding: 0;
	border: 1px solid var(--bsc-line);
	border-radius: 999px;
	background: transparent;
	color: var(--bsc-navy);
	cursor: pointer;
}
.bsc-burger__box { display: grid; gap: 4px; width: 18px; }
.bsc-burger__box i {
	display: block;
	height: 1.6px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .25s var(--bsc-ease), opacity .2s var(--bsc-ease);
}
.bsc-burger[aria-expanded="true"] .bsc-burger__box i:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.bsc-burger[aria-expanded="true"] .bsc-burger__box i:nth-child(2) { opacity: 0; }
.bsc-burger[aria-expanded="true"] .bsc-burger__box i:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

@media (max-width: 980px) {
	.bsc-nav { display: none; }
	.bsc-burger { display: inline-flex; }
	.bsc-header__actions .bsc-btn { display: none; }
}

/*
 * The drawer.
 *
 * z-index sits above the header, because the burger doubles as the close button
 * and has to outrank what it closes. Buried under the overlay it is present,
 * rendered and unclickable — which looks exactly like a broken button.
 */
.bsc-drawer {
	position: fixed;
	inset: 0;
	z-index: 65;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2rem;
	padding: calc(var(--bsc-header-h) + 2rem) var(--bsc-gutter) 3rem;
	background: var(--bsc-cream);
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
	transition: opacity .26s var(--bsc-ease), transform .26s var(--bsc-ease);
}
.bsc-drawer.is-open { opacity: 1; transform: none; pointer-events: auto; }
.bsc-drawer[hidden] { display: none; }

.bsc-drawer .bsc-nav__list {
	flex-direction: column;
	align-items: flex-start;
	gap: 1.4rem;
}
.bsc-drawer .bsc-nav__list a { font-size: 1.35rem; letter-spacing: .08em; }

.bsc-drawer__foot { display: grid; gap: 1rem; }
.bsc-drawer__call {
	color: var(--bsc-navy);
	font-size: 1.1rem;
	font-weight: 600;
	text-align: center;
}
.bsc-drawer__tagline {
	margin: 0;
	color: var(--bsc-gold);
	font-family: var(--bsc-script);
	font-size: 1.5rem;
	text-align: center;
}

/* ------------------------------------------------------------------ hero -- */

.bsc-hero {
	position: relative;
	/* Slides up under the masthead so the two read as one field of cream. */
	margin-top: calc(var(--bsc-header-h) * -1);
	padding-top: calc(var(--bsc-header-h) + clamp(2rem, 4vw, 3.5rem));
	padding-bottom: 0;
	overflow: hidden;
	background: var(--bsc-cream);
}

/*
 * The sunrise.
 *
 * Betty's banner puts a warm gold dawn behind her right shoulder. Rather than
 * hunt for a stock photograph of a mountain sunrise — and inherit a licence
 * nobody can evidence — the same warmth is drawn: one soft gold radial where the
 * sun would be, and a cooler wash on the left where her portrait sits, which is
 * also what makes the portrait's own background disappear into the band.
 */
.bsc-hero__glow {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(70% 60% at 88% 6%, rgba(233, 202, 145, .58) 0%, rgba(233, 202, 145, .16) 45%, transparent 72%),
		radial-gradient(50% 45% at 62% 88%, rgba(182, 143, 80, .16) 0%, transparent 70%),
		linear-gradient(105deg, #EFF1F2 0%, #F1EEE9 38%, var(--bsc-cream) 100%);
	pointer-events: none;
}

.bsc-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
	align-items: end;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.bsc-hero__body { padding-bottom: clamp(3rem, 7vw, 6rem); }

.bsc-hero__title { margin: 0; }
.bsc-hero__set { display: block; color: var(--bsc-navy); }

.bsc-hero__lede { margin-top: 0; }

.bsc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: 2rem;
}

.bsc-hero__media { align-self: end; }
.bsc-hero__media .bsc-figure--portrait { margin-inline: auto 0; }

@media (max-width: 900px) {
	.bsc-hero__inner {
		grid-template-columns: 1fr;
		align-items: start;
	}
	.bsc-hero__body { padding-bottom: 2.5rem; }
	.bsc-hero__media { max-width: 420px; margin-inline: auto; }
	.bsc-hero__media .bsc-figure--portrait { margin-inline: auto; }
}

/* ------------------------------------------------------------ proof strip -- */

/*
 * The credibility bar off the foot of the banner, kept in the same place and the
 * same gold.
 */
.bsc-proof {
	position: relative;
	z-index: 2;
	background: linear-gradient(180deg, var(--bsc-gold-lt) 0%, #DFBE84 100%);
	color: var(--bsc-navy);
}

.bsc-proof__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	padding-block: clamp(1.2rem, 2.5vw, 1.8rem);
	text-align: center;
}

.bsc-proof__item + .bsc-proof__item { border-left: 1px solid rgba(2, 29, 55, .18); }

.bsc-proof__figure {
	display: block;
	font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.3;
}
.bsc-proof__label {
	display: block;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .8;
}

@media (max-width: 640px) {
	.bsc-proof__inner { grid-template-columns: 1fr; }
	.bsc-proof__item + .bsc-proof__item {
		border-left: 0;
		border-top: 1px solid rgba(2, 29, 55, .18);
		padding-top: .8rem;
	}
}

/* ----------------------------------------------------------------- spine -- */

.bsc-spine {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.bsc-spine__item {
	position: relative;
	padding-top: 1.6rem;
	border-top: 1px solid var(--bsc-line-navy);
}

.bsc-spine__num {
	display: block;
	margin-bottom: .7rem;
	color: var(--bsc-gold-lt);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .2em;
}

.bsc-spine__word {
	margin-bottom: .5rem;
	font-family: var(--bsc-script);
	font-weight: 400;
	font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.2rem);
	color: var(--bsc-gold-lt);
	letter-spacing: 0;
}

.bsc-spine__lead {
	margin-bottom: .6em;
	color: var(--bsc-paper);
	font-weight: 500;
}

.bsc-spine__body { color: var(--bsc-on-navy-muted); font-size: .95rem; }

/* --------------------------------------------------------------- pillars -- */

/*
 * There are five pillars, and five is the awkward number.
 *
 * An auto-fit grid puts three on the first row and leaves the last two jammed
 * against the left margin with a hole beside them, which reads as a layout that
 * ran out rather than one that was designed. Flex with justify-content: center
 * centres the short row instead. max-width stops those two stretching to half
 * the page each once they have a whole row to themselves.
 */
.bsc-pillars {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bsc-pillar {
	flex: 1 1 260px;
	max-width: 360px;
	padding: 2rem 1.6rem;
	border: 1px solid var(--bsc-line-soft);
	border-radius: var(--bsc-radius);
	background: var(--bsc-paper);
	text-align: center;
	transition: border-color .25s var(--bsc-ease), transform .25s var(--bsc-ease), box-shadow .25s var(--bsc-ease);
}
.bsc-pillar:hover {
	border-color: var(--bsc-line);
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -30px rgba(2, 29, 55, .55);
}

.bsc-pillar__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px; height: 76px;
	margin: 0 auto 1.2rem;
	border-radius: 999px;
	background: var(--bsc-navy);
	color: var(--bsc-gold-lt);
}
.bsc-pillar__icon { width: 40px; height: 40px; }

.bsc-pillar__title { margin-bottom: .5rem; }
.bsc-pillar__lead { color: var(--bsc-muted); font-size: .95rem; margin: 0; }

.bsc-pillars__more {
	margin-top: 2.2rem;
	text-align: center;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
}
.bsc-pillars__more a { box-shadow: inset 0 -1px 0 var(--bsc-line); }

/* ----------------------------------------------------------------- split -- */

.bsc-split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	align-items: start;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.bsc-split--portrait { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }

.bsc-split__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

@media (max-width: 900px) {
	.bsc-split,
	.bsc-split--portrait { grid-template-columns: 1fr; }
	.bsc-split--portrait .bsc-split__media { max-width: 420px; }
}

/* ----------------------------------------------------------------- steps -- */

.bsc-steps {
	display: grid;
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bsc-steps--row { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1.5rem, 3vw, 2.4rem); }

/* In the "Back to the Basics" split the steps are the whole right-hand column
   against two long paragraphs on the left. At the default gap they finished
   two-thirds of the way up and left a hole beside the prose. */
.bsc-split__aside .bsc-steps { gap: 2rem; }

.bsc-step { display: flex; gap: 1rem; align-items: flex-start; }
.bsc-steps--row .bsc-step { flex-direction: column; gap: .9rem; }

.bsc-step__num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border: 1px solid var(--bsc-line);
	border-radius: 999px;
	color: var(--bsc-gold-deep);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
}
.bsc-section--navy .bsc-step__num { border-color: var(--bsc-line-navy); color: var(--bsc-gold-lt); }

.bsc-step__title { margin-bottom: .25rem; }
.bsc-step__lead { margin-bottom: .4em; color: var(--bsc-muted); font-size: .95rem; }
.bsc-step__body { margin: 0; color: var(--bsc-muted); font-size: .9rem; }
.bsc-section--navy .bsc-step__lead { color: var(--bsc-paper); font-weight: 500; }
.bsc-section--navy .bsc-step__body { color: var(--bsc-on-navy-muted); }

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

/*
 * Two columns, not three.
 *
 * Both places this is used hold exactly four cards, and a 280px minimum gives
 * three across at full width — which leaves the fourth stranded on its own row
 * with two card-widths of nothing beside it. A 380px minimum forces a clean 2×2
 * on the desktop and still gets two across on a tablet.
 *
 * min() guards the track floor: a bare minmax(380px, 1fr) overflows any viewport
 * narrower than 380px instead of collapsing to one column.
 */
.bsc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: clamp(1.2rem, 2.5vw, 2rem);
}

.bsc-card {
	display: block;
	padding: 2rem 1.8rem;
	border: 1px solid var(--bsc-line-soft);
	border-radius: var(--bsc-radius);
	background: var(--bsc-paper);
	transition: border-color .25s var(--bsc-ease), transform .25s var(--bsc-ease);
}
.bsc-card--link:hover { border-color: var(--bsc-gold); transform: translateY(-3px); }

.bsc-card__mark { display: block; margin-bottom: 1rem; }
.bsc-card__title { margin-bottom: .5rem; }
.bsc-card__text { margin: 0; color: var(--bsc-muted); font-size: .95rem; }

.bsc-card__link-text {
	display: inline-block;
	margin-top: 1rem;
	color: var(--bsc-gold-deep);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.bsc-section--warm .bsc-card,
.bsc-section--warm .bsc-pillar { background: var(--bsc-paper); }

/* -------------------------------------------------- coaching pillar list -- */

.bsc-detail { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }

.bsc-detail__item {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: clamp(1.2rem, 3vw, 2.4rem);
	align-items: start;
	padding-top: clamp(1.6rem, 3vw, 2.6rem);
	border-top: 1px solid var(--bsc-line-soft);
	/* The header is fixed and these carry ids the footer links to. */
	scroll-margin-top: 9rem;
}
.bsc-detail__item:first-child { border-top: 0; padding-top: 0; }

.bsc-detail__mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	color: var(--bsc-gold);
}
/* Larger than in the homepage row: here the icon has a 92px column to itself and
   at 40px it read as an afterthought sitting in white space. */
.bsc-detail__mark .bsc-pillar__icon { width: 54px; height: 54px; }
.bsc-detail__num {
	color: var(--bsc-faint);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
}

.bsc-detail__body h3 { margin-bottom: .5rem; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); }
.bsc-detail__lead {
	margin-bottom: .6em;
	color: var(--bsc-navy);
	font-weight: 500;
	font-size: 1.02rem;
}
.bsc-detail__text { margin: 0; color: var(--bsc-muted); }

@media (max-width: 640px) {
	.bsc-detail__item { grid-template-columns: 1fr; gap: 1rem; }
	.bsc-detail__mark { flex-direction: row; justify-content: flex-start; }
}

/* ------------------------------------------------------------------ faqs -- */

.bsc-faqs { display: grid; gap: .8rem; }

.bsc-faq {
	border: 1px solid var(--bsc-line-soft);
	border-radius: var(--bsc-radius);
	background: var(--bsc-paper);
	overflow: hidden;
}
.bsc-faq[open] { border-color: var(--bsc-line); }

.bsc-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.4rem;
	color: var(--bsc-navy);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.bsc-faq summary::-webkit-details-marker { display: none; }
.bsc-faq summary::after {
	content: '+';
	flex: none;
	color: var(--bsc-gold);
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1;
	transition: transform .2s var(--bsc-ease);
}
.bsc-faq[open] summary::after { transform: rotate(45deg); }

.bsc-faq p {
	margin: 0;
	padding: 0 1.4rem 1.3rem;
	color: var(--bsc-muted);
	font-size: .96rem;
}

/* ---------------------------------------------------------------- quotes -- */

.bsc-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1.2rem, 2.5vw, 2rem);
}

.bsc-quote {
	margin: 0;
	padding: 2rem 1.8rem;
	border: 1px solid var(--bsc-line-soft);
	border-radius: var(--bsc-radius);
	background: var(--bsc-paper);
}
.bsc-quote__mark { display: block; margin-bottom: 1rem; }
.bsc-quote blockquote { margin: 0 0 1.2rem; color: var(--bsc-text); font-size: 1.02rem; line-height: 1.65; }
.bsc-quote figcaption { display: grid; gap: .1rem; }
.bsc-quote__name { color: var(--bsc-navy); font-weight: 600; font-size: .92rem; }
.bsc-quote__role { color: var(--bsc-faint); font-size: .8rem; }

/* ---------------------------------------------------------- inner banner -- */

.bsc-banner {
	position: relative;
	margin-top: calc(var(--bsc-header-h) * -1);
	padding-top: calc(var(--bsc-header-h) + clamp(2.5rem, 5vw, 4.5rem));
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
	overflow: hidden;
	background: var(--bsc-navy);
	color: var(--bsc-on-navy);
	text-align: center;
}

/* The header sits on cream everywhere else. Over a navy banner it needs the same
   cream behind it, or the lockup — navy type on transparent — disappears. That
   is handled by the header being opaque; this glow only lights the band below. */
.bsc-banner__glow {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 90% at 82% 12%, rgba(233, 202, 145, .18) 0%, transparent 68%),
		radial-gradient(50% 80% at 12% 96%, rgba(182, 143, 80, .14) 0%, transparent 70%);
	pointer-events: none;
}

.bsc-banner__inner { position: relative; z-index: 1; }
.bsc-banner__title { color: var(--bsc-paper); }
.bsc-banner__lede { margin-inline: auto; color: var(--bsc-on-navy-muted); }

/* --------------------------------------------------------------- contact -- */

.bsc-contact {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

@media (max-width: 900px) {
	.bsc-contact { grid-template-columns: 1fr; }
}

.bsc-contact__block + .bsc-contact__block { margin-top: 2rem; }

.bsc-contact__heading {
	margin-bottom: .5rem;
	color: var(--bsc-gold-deep);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.bsc-contact__big { color: var(--bsc-navy); font-size: 1.2rem; font-weight: 600; }
.bsc-contact__big:hover { color: var(--bsc-gold-deep); }
.bsc-contact__note { margin: .3rem 0 0; color: var(--bsc-faint); font-size: .86rem; }

.bsc-contact__next {
	margin: 0;
	padding-left: 1.15rem;
	color: var(--bsc-muted);
	font-size: .94rem;
}
.bsc-contact__next li { margin-bottom: .5rem; }
.bsc-contact__next li::marker { color: var(--bsc-gold); font-weight: 700; }

.bsc-contact__social { display: flex; flex-wrap: wrap; gap: 1rem; font-weight: 600; font-size: .9rem; }

.bsc-contact__seal {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bsc-line-soft);
}
.bsc-contact__seal p {
	margin: 0;
	color: var(--bsc-gold-deep);
	font-family: var(--bsc-script);
	font-size: 1.3rem;
}

/* ------------------------------------------------------------------ form -- */

.bsc-form { display: grid; gap: 1rem; margin-top: 1.6rem; }

.bsc-form--inline {
	padding: clamp(1.5rem, 3vw, 2.2rem);
	border: 1px solid var(--bsc-line-soft);
	border-radius: var(--bsc-radius);
	background: var(--bsc-paper);
}

.bsc-field { display: grid; gap: .4rem; }
.bsc-field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

@media (max-width: 520px) {
	.bsc-field__row { grid-template-columns: 1fr; }
}

.bsc-field label {
	color: var(--bsc-navy);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.bsc-field label span { color: var(--bsc-gold); }

.bsc-field input,
.bsc-field select,
.bsc-field textarea {
	width: 100%;
	padding: .8rem .95rem;
	border: 1px solid var(--bsc-line-soft);
	border-radius: 9px;
	background: var(--bsc-cream);
	color: var(--bsc-text);
	font-family: inherit;
	font-size: .98rem;
	line-height: 1.5;
	transition: border-color .2s var(--bsc-ease), background .2s var(--bsc-ease);
}
.bsc-form--inline .bsc-field input,
.bsc-form--inline .bsc-field select,
.bsc-form--inline .bsc-field textarea { background: var(--bsc-cream); }

.bsc-field input:focus,
.bsc-field select:focus,
.bsc-field textarea:focus {
	border-color: var(--bsc-gold);
	background: var(--bsc-paper);
	outline: none;
}
.bsc-field textarea { resize: vertical; min-height: 120px; }
.bsc-field ::placeholder { color: var(--bsc-faint); }

/* The honeypot. Hidden from people, left in the document for robots. */
.bsc-trap {
	position: absolute;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.bsc-form__note { margin: 0; font-size: .88rem; min-height: 1.2em; }
.bsc-form__note.is-ok { color: #2C6E49; font-weight: 600; }
.bsc-form__note.is-bad { color: #A33B2A; font-weight: 600; }
.bsc-form.is-sending button[type="submit"] { opacity: .6; pointer-events: none; }

.bsc-alert {
	padding: .9rem 1.1rem;
	border-radius: 9px;
	font-size: .92rem;
	font-weight: 600;
}
.bsc-alert--ok { background: rgba(44, 110, 73, .12); color: #2C6E49; }
.bsc-alert--bad { background: rgba(163, 59, 42, .12); color: #A33B2A; }

/* ----------------------------------------------------------------- modal -- */

.bsc-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	opacity: 0;
	transition: opacity .24s var(--bsc-ease);
}
.bsc-modal.is-open { opacity: 1; }
.bsc-modal[hidden] { display: none; }

.bsc-modal__veil { position: absolute; inset: 0; background: rgba(2, 29, 55, .62); backdrop-filter: blur(3px); }

.bsc-modal__panel {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 2.5rem);
	overflow-y: auto;
	padding: clamp(1.6rem, 4vw, 2.5rem);
	border-radius: var(--bsc-radius);
	background: var(--bsc-cream);
	box-shadow: 0 40px 90px -40px rgba(2, 29, 55, .8);
	transform: translateY(10px) scale(.985);
	transition: transform .28s var(--bsc-ease);
}
.bsc-modal.is-open .bsc-modal__panel { transform: none; }

.bsc-modal__close {
	position: absolute;
	top: .8rem; right: .8rem;
	width: 38px; height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--bsc-line-soft);
	border-radius: 999px;
	background: transparent;
	color: var(--bsc-navy);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}
.bsc-modal__close:hover { border-color: var(--bsc-gold); color: var(--bsc-gold-deep); }

.bsc-modal__head { padding-right: 2.5rem; }
.bsc-modal__lede { margin: 0; color: var(--bsc-muted); font-size: .95rem; }

/* ---------------------------------------------------------------- closer -- */

.bsc-closer {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 7vw, 6rem);
	background: var(--bsc-navy);
	color: var(--bsc-on-navy);
	text-align: center;
}
.bsc-closer::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 80% at 50% 0%, rgba(233, 202, 145, .16) 0%, transparent 70%);
	pointer-events: none;
}
.bsc-closer__inner { position: relative; z-index: 1; }
.bsc-closer__title { color: var(--bsc-paper); }
.bsc-closer .bsc-lede { margin-inline: auto; color: var(--bsc-on-navy-muted); }
.bsc-closer__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .8rem;
	margin-top: 2rem;
}

/* ---------------------------------------------------------------- footer -- */

.bsc-footer {
	background: var(--bsc-navy-deep);
	color: var(--bsc-on-navy-muted);
	font-size: .9rem;
}

.bsc-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
	gap: clamp(1.8rem, 4vw, 3rem);
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

@media (max-width: 900px) {
	.bsc-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.bsc-footer__inner { grid-template-columns: 1fr; }
}

.bsc-footer__tagline {
	margin: 1rem 0 .3rem;
	color: var(--bsc-gold-lt);
	font-family: var(--bsc-script);
	font-size: 1.5rem;
}
.bsc-footer__where { margin: 0; color: var(--bsc-faint); font-size: .82rem; }

.bsc-footer__heading {
	margin-bottom: .9rem;
	color: var(--bsc-gold-lt);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.bsc-footer__nav ul,
.bsc-footer__contact ul {
	display: grid;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bsc-footer a { color: var(--bsc-on-navy-muted); }
.bsc-footer a:hover { color: var(--bsc-gold-lt); }

.bsc-footer__social { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.2rem; }
.bsc-footer__social a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .85rem; }

.bsc-footer__legal { padding-bottom: 1.2rem; }
.bsc-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin: 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bsc-line-navy);
	list-style: none;
	font-size: .8rem;
}

.bsc-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem;
	padding-block: 1.5rem;
	border-top: 1px solid var(--bsc-line-navy);
	color: var(--bsc-faint);
	font-size: .78rem;
}
.bsc-footer__base p { margin: 0; }

/* ------------------------------------------------------------ posts, misc -- */

.bsc-posts { display: grid; gap: 2.5rem; }
.bsc-post__date { margin-bottom: .3rem; color: var(--bsc-faint); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.bsc-post__title { margin-bottom: .5rem; }
.bsc-post__excerpt { margin: 0; color: var(--bsc-muted); }
.bsc-pagination { margin-top: 3rem; }
.bsc-pagination .nav-links { display: flex; gap: .8rem; }

/* ---------------------------------------------------------------- reveal -- */

/*
 * Only ever hides things when the script has actually run — the .js class is set
 * inline in <head> before any CSS applies. Without that guard, a failed script
 * leaves the whole page invisible.
 */
.js [data-bsc-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .7s var(--bsc-ease), transform .7s var(--bsc-ease);
}
.js [data-bsc-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}

	.js [data-bsc-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------- consent banner (bb-consent) -- */

/*
 * The cookie banner, made quiet.
 *
 * bb-consent ships a generic grey card sized for a full-width bar. Adam asked
 * for white, sleeker and less intrusive, so this narrows it, puts it on paper
 * white with a gold hairline, and demotes Decline to a plain text button so the
 * card reads as one small object rather than two competing buttons.
 *
 * The plugin paints its buttons with `background: var(--bb-consent-primary)
 * !important`, so there is no point fighting it with a colour — the winning
 * move is to redefine the custom properties it reads. Declared on the element
 * rather than :root because the plugin injects its own :root block inline and
 * would otherwise be a coin toss on source order.
 */
.bb-consent-modal,
.bb-consent-prefs {
	--bb-consent-primary:      #021D37;
	--bb-consent-on-primary:   #FFFDFA;
	--bb-consent-secondary:    #B68F50;
	--bb-consent-on-secondary: #021D37;

	font-family: var(--bsc-body);
}

.bb-consent-modal--card {
	width: 355px;
	padding: 15px 17px 14px;
	background: var(--bsc-paper);
	border: 1px solid var(--bsc-line);
	border-radius: 12px;
	/* Softer and further-spread than the plugin's default, so it lifts off the
	   cream without the hard drop shadow reading as a system dialog. */
	box-shadow: 0 14px 38px -18px rgba(2, 29, 55, .38);
}

.bb-consent-modal--bottom-left { left: 20px; bottom: 20px; }

.bb-consent-modal__body {
	color: var(--bsc-muted);
	font-size: 12.5px;
	line-height: 1.55;
}

.bb-consent-modal__privacy {
	color: var(--bsc-gold-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.bb-consent-modal__privacy:hover { color: var(--bsc-navy); }

/* Buttons sit right, at their natural width. The plugin stretches each to
   flex:1 for the full-width bar, which in a 355px card makes two slabs. */
.bb-consent-modal--card .bb-consent-modal__actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
}
.bb-consent-modal--card .bb-consent-btn { flex: 0 0 auto; }

.bb-consent-modal .bb-consent-btn {
	border-radius: 999px;
	padding: 7px 16px;
	font-family: var(--bsc-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Decline is a real choice and must stay clearly clickable, but it does not
   need to look like a second primary action. */
.bb-consent-modal .bb-consent-btn--decline,
.bb-consent-modal .bb-consent-btn--decline:link,
.bb-consent-modal .bb-consent-btn--decline:visited {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--bsc-muted) !important;
	padding-inline: 10px;
}
.bb-consent-modal .bb-consent-btn--decline:hover {
	color: var(--bsc-navy) !important;
	background: rgba(2, 29, 55, .05) !important;
}

/* The "Cookies" pill that remains after a choice — small enough to ignore. */
.bb-consent-prefs {
	background: var(--bsc-paper);
	color: var(--bsc-muted);
	border: 1px solid var(--bsc-line-soft);
	border-radius: 999px;
	padding: 5px 11px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: 0 6px 18px -12px rgba(2, 29, 55, .4);
	opacity: .72;
	transition: opacity .2s var(--bsc-ease), color .2s var(--bsc-ease);
}
.bb-consent-prefs:hover { opacity: 1; color: var(--bsc-navy); }
.bb-consent-prefs--bottom-left { left: 20px; bottom: 20px; }

@media (max-width: 520px) {
	.bb-consent-modal--card {
		width: auto;
		left: 12px;
		right: 12px;
		bottom: 12px;
		max-width: none;
	}
}

/* ------------------------------------------------------ programs + pricing -- */

/* The intro split: prose left, the qualifying list in a panel on the right. */
.bsc-split--intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }

.bsc-who {
	padding: clamp(1.6rem, 3vw, 2.2rem);
	border: 1px solid var(--bsc-line);
	border-radius: var(--bsc-radius);
	background: var(--bsc-paper);
}
.bsc-who__title { margin-bottom: .4rem; font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem); }
.bsc-who__lede { margin-bottom: 1.1rem; color: var(--bsc-muted); font-size: .95rem; }
.bsc-who__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.bsc-who__list li {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: .55rem;
	align-items: start;
	color: var(--bsc-text);
	font-size: .95rem;
	line-height: 1.5;
}
.bsc-who__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	margin-top: -1px;
	border-radius: 999px;
	background: var(--bsc-navy);
	color: var(--bsc-gold-lt);
}

/*
 * The three tiers.
 *
 * Deliberately NOT auto-fit: three tiers must stay three columns on the desktop
 * and stack in price order on a phone. An auto-fit grid would drop to 2 + 1 at
 * an awkward width, which reads as a broken layout on a price list — the one
 * place a visitor is already looking for a catch.
 */
.bsc-tiers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: clamp(1.2rem, 2.4vw, 1.9rem);
}

@media (max-width: 900px) {
	.bsc-tiers { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}

.bsc-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 2rem 1.7rem 1.7rem;
	border: 1px solid var(--bsc-line-soft);
	border-radius: var(--bsc-radius);
	background: var(--bsc-paper);
	transition: border-color .25s var(--bsc-ease), transform .25s var(--bsc-ease), box-shadow .25s var(--bsc-ease);
}
.bsc-tier:hover {
	border-color: var(--bsc-line);
	transform: translateY(-3px);
	box-shadow: 0 20px 44px -32px rgba(2, 29, 55, .5);
}

/*
 * Momentum, at Betty's request.
 *
 * Lifted rather than recoloured: it keeps the same paper ground as its
 * neighbours and wins on a gold border, a shadow and a few px of height. Filling
 * it navy would have made the other two look withdrawn, which is the opposite of
 * what a "most popular" marker is for — it should raise one, not bury two.
 */
.bsc-tier--featured {
	border-color: var(--bsc-gold);
	border-width: 2px;
	padding-top: 2.4rem;
	box-shadow: 0 22px 50px -30px rgba(182, 143, 80, .6);
}

@media (min-width: 901px) {
	.bsc-tier--featured { margin-top: -14px; padding-bottom: calc(1.7rem + 14px); }
}

.bsc-tier__badge {
	position: absolute;
	top: 0; left: 50%;
	transform: translate(-50%, -50%);
	padding: .38rem 1rem;
	border-radius: 999px;
	background: var(--bsc-gold);
	color: var(--bsc-navy);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 6px 16px -8px rgba(182, 143, 80, .9);
}

.bsc-tier__name { margin-bottom: .6rem; font-size: clamp(1.15rem, 1.05rem + .45vw, 1.38rem); }

.bsc-tier__price { margin: 0 0 .5rem; display: flex; align-items: baseline; gap: .35rem; }
.bsc-tier__amount {
	color: var(--bsc-navy);
	font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
}
.bsc-tier__term { color: var(--bsc-faint); font-size: .86rem; font-weight: 600; }

.bsc-tier__summary { margin: 0; color: var(--bsc-muted); font-size: .93rem; }

.bsc-rule--tier { width: 96px; margin-block: 1.1rem; }

.bsc-tier__features { margin: 0 0 1.6rem; padding: 0; list-style: none; display: grid; gap: .62rem; }
.bsc-tier__features li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: .5rem;
	align-items: start;
	color: var(--bsc-text);
	font-size: .9rem;
	line-height: 1.45;
}
.bsc-tier__check { color: var(--bsc-gold-deep); margin-top: 2px; }
.bsc-tier--featured .bsc-tier__check { color: var(--bsc-gold); }

/* Pins every button to the bottom edge, so three tiers with different feature
   counts still line their calls to action up. */
.bsc-tier__foot { margin-top: auto; }

/* --------------------------------------------------- home programs teaser -- */

.bsc-teaser {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.5rem, 5vw, 3.6rem);
	background: linear-gradient(180deg, var(--bsc-gold-lt) 0%, #DFBE84 100%);
	color: var(--bsc-navy);
}

.bsc-teaser__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2rem;
}

.bsc-teaser .bsc-script { color: var(--bsc-navy); opacity: .9; margin-bottom: .2rem; }
.bsc-teaser__title { margin-bottom: .3rem; font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); }
.bsc-teaser__lede { margin: 0; color: rgba(2, 29, 55, .78); font-weight: 600; font-size: 1.02rem; }

/* On the gold band the gold button would vanish, so it inverts to navy. */
.bsc-teaser .bsc-btn--gold {
	background: var(--bsc-navy);
	border-color: var(--bsc-navy);
	color: var(--bsc-paper);
}
.bsc-teaser .bsc-btn--gold:hover { background: var(--bsc-navy-deep); border-color: var(--bsc-navy-deep); }

@media (max-width: 640px) {
	.bsc-teaser__inner { flex-direction: column; align-items: flex-start; }
	.bsc-teaser__action { width: 100%; }
	.bsc-teaser .bsc-btn { width: 100%; }
}