/* ==========================================================================
   Blossom Designs — layout layer
   Left sidebar (logo, numbered navigation, contact icons) beside a centred
   content column that reflows to a single column on mobile, where the
   sidebar becomes a slide-in drawer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE SHELL
   -------------------------------------------------------------------------- */
.bd-shell {
	display: grid;
	/*
	 * Two rows, and the lower one spans both columns. The footer and the
	 * call-to-action band both live there, which is what lets a full-width band
	 * exist without any negative margins or viewport units: a grid item in a
	 * spanning area is already the width of the container.
	 */
	grid-template-columns: var(--bd-sidebar-w) minmax(0, 1fr);
	/*
	 * The rows MUST be sized in `fr`, not `auto`.
	 *
	 * `auto` sized row 2 to zero, because both items in it are out of flow as far
	 * as the row is concerned — measured `grid-template-rows: 4207px 0px` on a
	 * 5047px page. The band and footer then overflowed the shell, and because the
	 * sidebar spans rows 1 to -1 its sticky area ended at 4207px, so the rail
	 * scrolled away over the last stretch of the page.
	 *
	 * `fr` distributes the shell's height between the rows, so row 2 measures the
	 * band plus the footer and the rail's area covers the whole document.
	 */
	grid-template-rows: 1fr auto;
	grid-template-areas:
		"sidebar main"
		"footer footer";
	min-height: 100vh;
	position: relative;
}

/*
 * Row 1 holds the sidebar and the page content side by side. The lower row is
 * the full-width band row, shared by the call-to-action band and the footer.
 */
.bd-shell > .bd-main { grid-row: 1; }
.bd-shell > .bd-ctaband { grid-row: 2; }
.bd-shell > .bd-footer { grid-row: 2; }

.bd-main {
	grid-area: main;
	min-width: 0;
	position: relative;
}

/* --------------------------------------------------------------------------
   2. LEFT SIDEBAR
   Logo at the top, navigation in the middle, contact icons at the foot.
   -------------------------------------------------------------------------- */
.bd-sidebar {
	grid-area: sidebar;
	/*
	 * Span every row, not just row 1.
	 *
	 * A sticky element is confined to the grid area it occupies. With only
	 * `grid-area: sidebar` that area ends where the content column ends, so as
	 * soon as the full-width band row scrolled into view the rail had no area
	 * left to stick within and travelled off with the page — measured: at
	 * scrollY 3933 the rail's top was -539 instead of 0.
	 *
	 * Spanning rows 1 to -1 gives it the height of the whole shell, so it stays
	 * put from the first pixel to the last. The band and footer paint over it,
	 * because they come later in source order and the rail is not layered above
	 * them for that region.
	 */
	grid-row: 1 / -1;
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 2rem 0 1.75rem;
	border-right: 1px solid var(--bd-line);
	background: rgba(255, 250, 252, .9);
	backdrop-filter: blur(10px);
	z-index: var(--bd-z-nav);
	/*
	 * The rail scrolls internally if its contents ever exceed the viewport. This
	 * overflow is on the sticky element itself, which is fine — sticky is broken
	 * by an overflow on an ANCESTOR, not on the element. The damage was done by
	 * `overflow-x` on `html`, which made the root the scroll container.
	 */
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
}

/* --- Brand / logo ------------------------------------------------------- */
.bd-rail__brand {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 0 1rem;
	margin-bottom: 2.25rem;
}

.bd-rail__logo-link {
	display: block;
	width: 52px;
	line-height: 0;
	text-decoration: none;
	border-radius: 14px;
	/* The logo is an image, so this only colours the alt text if the image ever
	   fails to load — but left unset it inherited the body link colour. */
	color: var(--bd-ink);
	transition: transform .3s var(--bd-ease);
}

/*
 * No box-shadow here. The uploaded logo is a transparent PNG, so a shadow on
 * the link drew a rectangle around the transparent canvas rather than around
 * the artwork — it read as a box appearing behind the mark. A gentle lift is
 * enough feedback for a hover.
 */
.bd-rail__logo-link:hover,
.bd-rail__logo-link:focus {
	transform: translateY(-2px) scale(1.04);
}

/* The uploaded custom logo and the built-in SVG mark size identically. */
.bd-rail__img,
.bd-rail__logo-link .bd-mark {
	display: block;
	width: 100%;
	height: auto;
	max-width: 52px;
	max-height: 52px;
	object-fit: contain;
}

/* --- Navigation --------------------------------------------------------- *
 * Horizontal text, numbered, one row per link. The current section is marked
 * with a gradient bar on its left edge and a soft tinted background.
 * ------------------------------------------------------------------------ */
.bd-nav {
	width: 100%;
}

.bd-nav__toggle { display: none; }

.bd-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.bd-nav__item { display: block; }

/*
 * Scoped under .bd-sidebar for the same reason as the footer rules: as a bare
 * class this is (0,1,1) against the theme's `body.bd-theme a` at (0,1,2), so the
 * declared colour never applied and the sidebar rode the generic body link
 * colour instead. That is why changing the link token appeared to change the
 * sidebar's text.
 */
.bd-sidebar .bd-nav__item a {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: .7rem;
	/* Right padding keeps the tinted block clear of the sidebar border. */
	padding: .72rem 1rem .72rem 1.15rem;
	text-decoration: none;
	color: var(--bd-ink-faint);
	transition: color .25s var(--bd-ease), background-color .25s var(--bd-ease);
}

/* Soft tinted wash behind the active / hovered row. */
.bd-nav__item a::before {
	content: "";
	position: absolute;
	inset: 0 0 0 0;
	background: var(--bd-grad-soft);
	opacity: 0;
	transform: scaleX(.5);
	transform-origin: left center;
	transition: opacity .3s var(--bd-ease), transform .4s var(--bd-ease);
	pointer-events: none;
}

.bd-nav__item a:hover::before,
.bd-nav__item a:focus::before,
.bd-nav__item.is-current a::before { opacity: 1; transform: scaleX(1); }

/* Gradient marker on the left edge of the active row. */
.bd-nav__item a::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 2px;
	height: 0;
	background: var(--bd-grad);
	transform: translateY(-50%);
	transition: height .35s var(--bd-ease-out);
}

.bd-nav__item.is-current a::after { height: 60%; }
.bd-nav__item a:hover::after { height: 40%; }

.bd-nav__num {
	position: relative;
	flex: 0 0 auto;
	min-width: 1.35em;
	font-family: var(--bd-mono);
	font-size: .68rem;
	letter-spacing: .08em;
	color: var(--bd-ink-faint);
	transition: color .25s var(--bd-ease);
}

.bd-nav__label {
	position: relative;
	white-space: nowrap;
	font-family: var(--bd-body);
	font-size: .8rem;
	font-weight: 500;
	/* No vertical writing mode — the text reads horizontally. */
	writing-mode: horizontal-tb;
	transform: none;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.bd-sidebar .bd-nav__item a:hover,
.bd-sidebar .bd-nav__item.is-current a { color: var(--bd-indigo); }

.bd-sidebar .bd-nav__item.is-current a .bd-nav__num { color: var(--bd-magenta); }
.bd-nav__item.is-current a .bd-nav__label { font-weight: 600; }

/* Optional WordPress menu, if one is assigned. */
.bd-nav__custom {
	margin-top: .9rem;
	padding: .9rem 1.15rem 0;
	border-top: 1px solid var(--bd-line);
}
.bd-nav__custom-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .5rem;
}
.bd-nav__custom-list a {
	font-size: .74rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}

/* --- Contact icons, pinned to the foot of the sidebar ------------------- */
.bd-sidebar__social {
	list-style: none;
	/* auto top margin pushes the icons to the bottom of the sidebar. */
	margin: auto 0 0;
	padding: 1.5rem 1rem 0;
	display: flex;
	justify-content: center;
	gap: .35rem;
}

.bd-sidebar .bd-sidebar__social a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: var(--bd-ink-soft);
	text-decoration: none;
	transition: color .2s var(--bd-ease), background-color .2s var(--bd-ease), transform .2s var(--bd-ease);
}

.bd-sidebar .bd-sidebar__social a:hover,
.bd-sidebar .bd-sidebar__social a:focus {
	color: var(--bd-link);
	background: var(--bd-lilac);
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   3. SCROLL PROGRESS
   -------------------------------------------------------------------------- */
.bd-progress {
	position: fixed;
	left: var(--bd-sidebar-w);
	right: 0;
	top: 0;
	height: 2px;
	z-index: calc(var(--bd-z-nav) + 5);
	pointer-events: none;
	background: transparent;
}

.bd-progress__bar {
	height: 100%;
	width: 0;
	background: var(--bd-grad);
	transform-origin: left center;
	transition: width .1s linear;
}


/* --------------------------------------------------------------------------
   5. SECTION RHYTHM
   -------------------------------------------------------------------------- */
.bd-section {
	position: relative;
	padding: var(--bd-section-y) var(--bd-gutter);
	overflow: hidden;
}

.bd-section__inner {
	width: 100%;
	max-width: var(--bd-maxw);
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

.bd-section-head {
	max-width: 46rem;
	/* Space between the heading block and the grid beneath it — the gap that
	   separates "what we do" from the three cards, and the equivalent pair in
	   every other section.

	   Part of it is padding rather than margin on purpose. A lone margin here
	   collapsed away to almost nothing once the grid followed it, which is why
	   the heading and the first card sat 18px apart on a phone. Padding cannot
	   collapse, so the gap now holds at every width. */
	padding-bottom: 1.75rem;
	margin-bottom: clamp(2.25rem, 5vw, 3.75rem);
}

.bd-eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .45rem;
	margin: 0 0 .9rem;
	font-family: var(--bd-body);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--bd-accent-text);
}

/* The studio name leads the eyebrow, set apart from the descriptor that
   follows it so the brand is named before the very first line of copy. */
.bd-eyebrow__name {
	color: var(--bd-ink);
	font-weight: 600;
	letter-spacing: .2em;
}

.bd-eyebrow__sep { color: var(--bd-ink-faint); }

.bd-eyebrow__tag {
	font-weight: 400;
	color: var(--bd-accent-text);
}

.bd-section-title { margin-bottom: .7rem; }

.bd-section-sub {
	margin: 0;
	font-size: 1.06rem;
	color: var(--bd-ink-soft);
	max-width: 42rem;
}

/* --------------------------------------------------------------------------
   5b. BRAND LOGO (hero + footer)
   The file is a transparent image at 1280x512, so the height follows from the
   width via the intrinsic ratio. width/height attributes are on the tag, so the
   space is reserved before it loads.

   The <picture> wrapper exists only to offer WebP first with the PNG as a
   fallback, so it is display:contents: it generates no box at all and the img
   inside is laid out as if the wrapper were not there. That keeps every rule
   below applying to the img exactly as it did before the wrapper was added.
   -------------------------------------------------------------------------- */
.bd-brand-logo-wrap { display: contents; }

.bd-brand-logo {
	display: block;
	height: auto;
}

.bd-brand-logo--hero {
	/* Kept modest: it sits above the heading, and at full lockup size it would
	   compete with the h1 for attention. */
	width: clamp(132px, 15vw, 178px);
	margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
}

.bd-brand-logo--footer {
	width: 150px;
	/* Slightly warmed so the mark sits with the footer's off-white text rather
	   than glowing against the near-black. */
	filter: brightness(1.06);
}

/* --------------------------------------------------------------------------
   6. HERO
   Compact block of copy anchored to the bottom-left of the content area,
   with the decorative gradient orb floating to the right.
   -------------------------------------------------------------------------- */
.bd-hero {
	display: flex;
	/* Anchored to the bottom-left of the full viewport. */
	align-items: flex-end;
	justify-content: flex-start;
	/*
	 * The hero owns the whole first screen.
	 *
	 * Two declarations, on purpose: svh is the small-viewport unit, so on a
	 * phone it measures the viewport with the browser chrome *shown*. Plain vh
	 * would size the hero to a taller viewport than the visitor can actually
	 * see and push the fold off-screen. Browsers without svh keep the vh line.
	 *
	 * Note this must stay a plain length. A clamp() whose preferred value was
	 * something like 82svh silently resolves to the preferred value whenever it
	 * falls between the bounds, which capped the hero at 82% of the viewport.
	 */
	min-height: 100vh;
	min-height: 100svh;
	padding-block: var(--bd-hero-pad-t) var(--bd-hero-pad-b);
	background:
		radial-gradient(120% 90% at 8% 0%, rgba(125, 211, 252, .28) 0%, transparent 55%),
		radial-gradient(110% 90% at 92% 12%, rgba(244, 114, 182, .22) 0%, transparent 58%),
		linear-gradient(180deg, var(--bd-cream) 0%, var(--bd-blush) 100%);
}

/* The inner container is the flex item, so keep it tight against the left. */
.bd-hero > .bd-section__inner {
	max-width: min(var(--bd-maxw), 58rem);
	margin-inline: 0 auto;
	/* Explicit, so the block can never inherit centring from elsewhere. */
	text-align: left;
}

.bd-hero__title {
	/* Wide enough that the opening words share a line, but still the loudest
	   thing on the page. */
	max-width: 22ch;
	margin-bottom: .7rem;
	font-size: clamp(1.85rem, 3.5vw, 2.75rem);
	line-height: 1.04;
}

/* The opening line is a step down from the gradient line beneath it: it states
   the category, while "brands with a feminine touch" carries the pitch and
   should be the loudest thing on the page. */
.bd-hero__lead {
	display: block;
	font-size: clamp(1.5rem, 2.7vw, 2.2rem);
	line-height: 1.12;
}

.bd-hero__accent {
	display: block;
	/* Readable variant: this is text, so the gradient IS the glyph colour and
	   every stop has to clear 3:1 against the cream behind it. */
	background: var(--bd-grad-readable);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	font-style: italic;
}

.bd-hero__lede {
	max-width: 44rem;
	margin: 0 0 1.35rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--bd-ink-soft);
}

.bd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin: 0 0 .95rem;
}

.bd-hero__marks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	font-size: .8rem;
	color: var(--bd-ink-soft);
}

.bd-hero__marks li {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}
.bd-hero__marks .bd-icon { color: var(--bd-peri); flex: 0 0 auto; }

/* Decorative softened orb, floating in the upper-right of the content area. */
.bd-hero__orb {
	position: absolute;
	right: 6%;
	top: 12%;
	width: clamp(200px, 28vw, 440px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--bd-grad);
	filter: blur(72px);
	opacity: .24;
	z-index: 0;
	pointer-events: none;
	animation: bd-float 14s var(--bd-ease) infinite alternate;
}

.bd-hero__orb--about {
	left: auto;
	right: -14%;
	top: 6%;
	opacity: .16;
}

@keyframes bd-float {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(-3%, 5%, 0) scale(1.09); }
}

/* --------------------------------------------------------------------------
   7. QUAD PANEL
   -------------------------------------------------------------------------- */
.bd-quad {
	background: var(--bd-white);
	border-block: 1px solid var(--bd-line);
	/* The tiles butt against each other, separated only by a hairline, so the
	   panel needs its own margin from the neighbouring sections rather than
	   relying on the gap between tiles. */
	padding-block: calc(var(--bd-section-y) + 1.25rem);
}

.bd-quad__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

.bd-quad__item {
	position: relative;
	padding: clamp(1.85rem, 3.2vw, 2.75rem);
	border-right: 1px solid var(--bd-line);
	transition: background-color .3s var(--bd-ease);
}
.bd-quad__item:last-child { border-right: 0; }
.bd-quad__item:hover { background: var(--bd-lilac); }

.bd-quad__icon {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 1.1rem;
	border-radius: 14px;
	background: var(--bd-grad-soft);
	color: var(--bd-indigo);
}

.bd-quad__value {
	display: block;
	font-family: var(--bd-display);
	font-size: clamp(1.9rem, 3.4vw, 2.7rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	/* Readable variant, for the same reason as the hero accent above. */
	background: var(--bd-grad-readable);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	margin-bottom: .55rem;
}
.bd-quad__value span { font-size: .5em; letter-spacing: 0; }

.bd-quad__label {
	margin: 0 0 .5rem;
	font-family: var(--bd-body);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bd-accent-text);
}

.bd-quad__item p {
	margin: 0;
	font-size: .9rem;
	line-height: 1.62;
	color: var(--bd-ink-soft);
}

/* --------------------------------------------------------------------------
   8. WHAT WE DO
   -------------------------------------------------------------------------- */
.bd-what { background: var(--bd-cream); }

.bd-what__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1.35rem, 2.6vw, 2.1rem);
}

.bd-what__card {
	position: relative;
	padding: clamp(1.8rem, 3vw, 2.5rem);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-lg);
	background: var(--bd-white);
	box-shadow: var(--bd-shadow-sm);
	transition: transform .35s var(--bd-ease), box-shadow .35s var(--bd-ease), border-color .35s var(--bd-ease);
	overflow: hidden;
}

.bd-what__card::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--bd-grad);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .45s var(--bd-ease);
}

.bd-what__card:hover {
	transform: translateY(-6px);
	box-shadow: var(--bd-shadow-lg);
	border-color: transparent;
}
.bd-what__card:hover::after { transform: scaleX(1); }

.bd-what__icon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 1.3rem;
	border-radius: 16px;
	background: var(--bd-grad-soft);
	color: var(--bd-indigo);
}

.bd-what__card h3 {
	margin-bottom: .65rem;
	font-size: clamp(1.25rem, 1.6vw, 1.45rem);
	letter-spacing: -.01em;
}

.bd-what__card > p {
	color: var(--bd-ink-soft);
	font-size: .93rem;
	line-height: 1.62;
	margin-bottom: 1.35rem;
	padding-bottom: 1.35rem;
	/* A hairline closes the intro, so the list below reads as a separate thing
	   rather than the paragraph carrying on. */
	border-bottom: 1px solid var(--bd-line);
}

/* --- Feature list inside a card ---------------------------------------- *
 * The marker gets its own column instead of being absolutely positioned. That
 * is what keeps a wrapped line indented under the text rather than under the
 * marker, and stops the marker drifting into the gap between lines.
 * ---------------------------------------------------------------------- */
.bd-what__card .bd-list {
	display: flex;
	flex-direction: column;
	gap: .7rem;
}

.bd-what__card .bd-list li {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding-left: 0;
	font-size: .9rem;
	line-height: 1.5;
}

.bd-what__card .bd-list li::before {
	content: "";
	position: static;
	flex: 0 0 auto;
	/* Nudged down to sit on the first line's optical centre, not its top. */
	margin-top: .46em;
	width: .42rem;
	height: .42rem;
	border-radius: 50%;
	background: var(--bd-grad);
}

/* --------------------------------------------------------------------------
   9. PROCESS
   -------------------------------------------------------------------------- */
.bd-process {
	background:
		linear-gradient(180deg, var(--bd-lilac) 0%, var(--bd-cream) 100%);
	border-block: 1px solid var(--bd-line);
}

.bd-process__steps {
	list-style: none;
	counter-reset: bd-step;
	margin: 0;
	padding: 0;
	display: grid;
	/* Three across on a desktop, so five steps read as 3 + 2 rather than
	   auto-fit leaving a single stranded card on its own row. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 2.6vw, 2.2rem);
}

@media (max-width: 1000px) {
	.bd-process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.bd-process__steps { grid-template-columns: minmax(0, 1fr); }
}

.bd-process__step {
	position: relative;
	padding-top: 2.4rem;
	border-top: 1px solid var(--bd-line-mid);
}

.bd-process__step::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--bd-grad);
	transition: width .7s var(--bd-ease-out);
}
.bd-process__step.is-visible::before { width: 68px; }

.bd-process__num {
	position: absolute;
	top: 1rem;
	right: 0;
	font-family: var(--bd-mono);
	font-size: .8rem;
	letter-spacing: .12em;
	color: var(--bd-accent-text);
}

.bd-process__step h3 {
	font-size: 1.18rem;
	margin-bottom: .45rem;
}
.bd-process__step p {
	margin: 0;
	font-size: .93rem;
	color: var(--bd-ink-soft);
}

/* --------------------------------------------------------------------------
   10. PRICING
   -------------------------------------------------------------------------- */
.bd-pricing { background: var(--bd-cream); }

.bd-pricing__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: clamp(1.1rem, 2.2vw, 1.7rem);
	align-items: start;
}

.bd-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	padding: clamp(1.8rem, 3vw, 2.4rem);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-lg);
	background: var(--bd-white);
	box-shadow: var(--bd-shadow-sm);
	transition: transform .35s var(--bd-ease), box-shadow .35s var(--bd-ease);
	height: 100%;
}
.bd-plan:hover { transform: translateY(-5px); box-shadow: var(--bd-shadow-lg); }

.bd-plan--featured {
	border-color: transparent;
	box-shadow: var(--bd-glow);
	background:
		linear-gradient(var(--bd-white), var(--bd-white)) padding-box,
		var(--bd-grad) border-box;
	border: 2px solid transparent;
}

.bd-plan__badge {
	position: absolute;
	top: -.85rem;
	left: clamp(1.8rem, 3vw, 2.4rem);
	margin: 0;
	padding: .3rem .85rem;
	border-radius: var(--bd-radius-pill);
	/* Readable variant: this is white 11px text sitting directly on the fill, so
	   every stop in the gradient has to clear 4.5:1 against white. The bright
	   gradient's cyan start gives it 2.14:1 — the badge was legible over the
	   indigo middle and not over the light end. */
	background: var(--bd-grad-readable);
	color: var(--bd-white);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.bd-plan__name { margin: 0; font-size: 1.45rem; }
.bd-plan__for {
	margin: 0;
	font-size: .9rem;
	color: var(--bd-ink-faint);
}

.bd-plan__price {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin: 0;
	padding-bottom: 1.15rem;
	border-bottom: 1px solid var(--bd-line);
}

.bd-plan__from {
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bd-ink-faint);
}

.bd-plan__amount {
	font-family: var(--bd-display);
	font-size: clamp(2rem, 3.6vw, 2.7rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--bd-ink);
}

.bd-plan .bd-list { flex: 1; }
.bd-plan .bd-btn { margin-top: auto; }

.bd-pricing__note {
	/*
	 * Scoped to the body class on purpose. A bare `.bd-pricing__note` loses the
	 * margin to `body.bd-theme p`, which sets `margin: 0 0 1.1em` at a higher
	 * specificity (0,1,2 against 0,1,0) and zeroed the top margin — the note sat
	 * flush against the package cards with no gap at all.
	 *
	 * Expressed in rem rather than vh: the section's rhythm tokens scale with the
	 * viewport height, but a note that crowds the cards on a short window is
	 * exactly what this is fixing.
	 */
	body.bd-theme &,
	body.bd-theme & p {
		margin: clamp(3rem, 4.5vw, 4.25rem) 0 0;
	}

	padding: 1.15rem 1.4rem;
	border-radius: var(--bd-radius);
	background: var(--bd-lilac);
	font-size: .93rem;
	color: var(--bd-ink-soft);
}

/* --------------------------------------------------------------------------
   11. HOSTING & MAINTENANCE
   -------------------------------------------------------------------------- */
.bd-hostmain { background: var(--bd-white); border-block: 1px solid var(--bd-line); }

.bd-maintenance__grid {
	display: grid;
	/*
	 * One row group per row of cards. The container owns the row template, and
	 * the row groups and cards subscribe to it with subgrid, so every card's
	 * strapline, first bullet and button land on the same line.
	 *
	 * The list track takes the free space (1fr), which is what pushes the
	 * buttons down onto a common baseline.
	 *
	 * The template lives here, once, rather than being repeated per row: each
	 * row group supplies exactly the tracks its own cards need, so there is
	 * never an unused track group adding height below the cards.
	 */
	grid-template-rows: auto auto auto 1fr auto;
	gap: clamp(1.1rem, 2.2vw, 1.7rem) 0;
}

.bd-maintenance__row {
	display: grid;
	/*
	 * The container is a single column, so its width - not the viewport - is
	 * what these cards divide up. These breakpoints mirror the ones the other
	 * three-across grids use, so the care plans reflow in step with them.
	 */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(1.1rem, 2.2vw, 1.7rem);
	/* Subscribe to the container's five tracks. */
	grid-template-rows: subgrid;
	grid-row: span 5;
	align-items: stretch;
}

.bd-care {
	position: relative;
	display: grid;
	/* Subscribe to the row group's five tracks, then map children onto them. */
	grid-template-rows: subgrid;
	grid-row: span 5;
	row-gap: 1.05rem;
	/*
	 * The badge is absolutely positioned above the card's top edge, so without
	 * this the name would sit flush to the top on a badged card. Applying it to
	 * all three keeps the names level whether or not a badge is showing.
	 */
	padding: clamp(2.1rem, 3.4vw, 2.6rem) clamp(1.8rem, 3vw, 2.3rem) clamp(1.8rem, 3vw, 2.3rem);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-lg);
	background: var(--bd-cream);
	height: 100%;
	transition: transform .35s var(--bd-ease), box-shadow .35s var(--bd-ease);
}

/* Row assignment. The order of the bullets themselves is untouched — they stay
   in the order they are written, spaced by row-gap, never by space-between. */
.bd-care__name { grid-row: 1; }
.bd-care__price { grid-row: 2; }
.bd-care__for { grid-row: 3; }
.bd-care .bd-list { grid-row: 4; align-content: start; }
.bd-care .bd-btn { grid-row: 5; align-self: end; }

/* Cards with no badge keep the element for alignment but show nothing. */
.bd-plan__badge--placeholder { visibility: hidden; }
.bd-care:hover { transform: translateY(-5px); box-shadow: var(--bd-shadow); }

.bd-care--featured {
	background: var(--bd-white);
	border: 2px solid transparent;
	background:
		linear-gradient(var(--bd-white), var(--bd-white)) padding-box,
		var(--bd-grad) border-box;
	box-shadow: var(--bd-glow);
}

.bd-care__name { margin: 0; font-size: 1.32rem; }

.bd-care__price {
	margin: 0;
	font-family: var(--bd-display);
	font-size: clamp(2.1rem, 3.8vw, 2.9rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--bd-ink);
}
.bd-care__price span { font-size: .55em; vertical-align: super; color: var(--bd-accent-text); }
.bd-care__price small {
	font-family: var(--bd-body);
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--bd-ink-faint);
	margin-left: .2rem;
}

.bd-care__for {
	margin: 0;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--bd-line);
	font-size: .9rem;
	color: var(--bd-ink-soft);
}

/* The list and button are placed on grid rows now, so they no longer need
   flex-grow or an auto margin to reach the bottom of the card. */

/* --------------------------------------------------------------------------
   11b. CARE CARDS WITHOUT SUBGRID SUPPORT
   `grid-template-rows: subgrid` is the whole point of the layout above, so an
   engine without it would collapse the cards. Fall back to the original
   independent flex column, which is correct — just not row-aligned.
   -------------------------------------------------------------------------- */
@supports not (grid-template-rows: subgrid) {
	.bd-maintenance__grid { grid-template-rows: auto; }
	.bd-maintenance__row { grid-template-rows: auto; grid-row: auto; }

	.bd-care {
		display: flex;
		flex-direction: column;
		gap: 1.05rem;
	}

	.bd-care .bd-list { flex: 1; }
	.bd-care .bd-btn { margin-top: auto; }
	.bd-care__name,
	.bd-care__price,
	.bd-care__for { grid-row: auto; }
}

/* --------------------------------------------------------------------------
   11c. FREQUENTLY ASKED QUESTIONS

   Native <details> elements, so there is no JavaScript involved: the browser
   supplies the open/closed state, the keyboard behaviour and the expanded
   announcement to assistive tech. The only thing styled here is the marker.

   The default disclosure triangle is replaced with a plus that rotates to a
   minus, drawn from a pseudo-element rather than an SVG so it inherits the
   text colour on the dark and light surfaces alike.
   -------------------------------------------------------------------------- */
.bd-faq__list {
	display: grid;
	gap: .75rem;
	max-width: 62rem;
}

.bd-faq__item {
	background: var(--bd-white);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius);
	overflow: hidden;
	transition: border-color .2s var(--bd-ease), box-shadow .2s var(--bd-ease);
}

.bd-faq__item[open] {
	border-color: var(--bd-line-mid);
	box-shadow: var(--bd-shadow-sm);
}

.bd-faq__q {
	/* The whole row is the hit target, not just the text. */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.1rem 1.4rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--bd-body);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--bd-ink);
	transition: background-color .2s var(--bd-ease);
}

.bd-faq__q::-webkit-details-marker { display: none; }
.bd-faq__q:hover { background: var(--bd-cream); }

.bd-faq__q:focus-visible {
	outline: 2px solid var(--bd-link);
	outline-offset: -2px;
}

/* Plus / minus. Two bars, the second rotated out when open. */
.bd-faq__q::after {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background:
		linear-gradient(var(--bd-link), var(--bd-link)) center / 100% 1.5px no-repeat,
		linear-gradient(var(--bd-link), var(--bd-link)) center / 1.5px 100% no-repeat;
	transition: transform .22s var(--bd-ease);
}

.bd-faq__item[open] .bd-faq__q::after {
	transform: rotate(90deg);
}

.bd-faq__a {
	padding: 0 1.4rem 1.2rem;
	color: var(--bd-ink-soft);
}

.bd-faq__a p {
	margin: 0;
	max-width: 68ch;
}

.bd-faq__a p + p { margin-top: .8rem; }

@media (max-width: 600px) {
	.bd-faq__q { padding: 1rem 1.1rem; font-size: 1rem; }
	.bd-faq__a { padding: 0 1.1rem 1.1rem; }
}

/* --------------------------------------------------------------------------
   12. CONTACT CTA SECTION
   -------------------------------------------------------------------------- */
.bd-contactcta {
	background:
		radial-gradient(100% 80% at 0% 0%, rgba(125, 211, 252, .2) 0%, transparent 55%),
		radial-gradient(100% 80% at 100% 100%, rgba(244, 114, 182, .2) 0%, transparent 55%),
		var(--bd-blush);
}

.bd-contactcta__grid {
	display: grid;
	/* The form column is the wider of the two so its fields can pair up. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.bd-contactcta__intro h2 { margin-bottom: 1rem; }
.bd-contactcta__intro p { color: var(--bd-ink-soft); }

.bd-contactcta__details {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	display: grid;
	gap: .75rem;
}

.bd-contactcta__details li {
	display: flex;
	align-items: center;
	gap: .8rem;
	font-size: .95rem;
	color: var(--bd-ink-soft);
}
.bd-contactcta__details .bd-icon { color: var(--bd-peri); }
.bd-contactcta__details a { text-decoration: none; }
.bd-contactcta__details a:hover { text-decoration: underline; }

.bd-contactcta__form {
	padding: clamp(1.4rem, 2.4vw, 2rem);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-lg);
	background: var(--bd-white);
	box-shadow: var(--bd-shadow);
}

/* Keep the form as short as the copy beside it. */
.bd-contactcta .bd-form__actions .bd-btn { width: 100%; }

/* --------------------------------------------------------------------------
   13. ABOUT PAGE
   -------------------------------------------------------------------------- */
.bd-aboutintro,
.bd-contactintro,
.bd-page__head {
	position: relative;
	/*
	 * Same treatment as the home hero: own the first screen, content anchored
	 * bottom-left. See .bd-hero for why the height is written twice and why it
	 * must not become a clamp().
	 */
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	min-height: 100vh;
	min-height: 100svh;
	padding-block: clamp(2.25rem, 5vh, 3.5rem) clamp(2rem, 6vh, 4rem);
	background:
		radial-gradient(110% 80% at 5% 0%, rgba(125, 211, 252, .26) 0%, transparent 55%),
		radial-gradient(110% 80% at 95% 10%, rgba(244, 114, 182, .2) 0%, transparent 58%),
		linear-gradient(180deg, var(--bd-cream), var(--bd-blush));
	border-bottom: 1px solid var(--bd-line);
}

.bd-page__title {
	max-width: 24ch;
	margin-bottom: 1.2rem;
}

.bd-page__lede {
	max-width: 46rem;
	font-size: 1.08rem;
	color: var(--bd-ink-soft);
}

/* Story blocks */
.bd-story { background: var(--bd-white); }

/*
 * Editorial blocks, not cards.
 *
 * Each block is a numbered aside beside a measured column of prose. No
 * background, no border, no radius: the separation comes from a thin gradient
 * rule and from the space between blocks. The prose is allowed to use the full
 * measure available to it, which is what stopped every block looking
 * half-empty on the right.
 */
.bd-story__blocks {
	display: grid;
	gap: clamp(3rem, 6vw, 4.75rem);
}

.bd-story__block {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

/*
 * The rule opens the group, level with the number rather than cutting across
 * it, so the number, the heading and the prose read as one unit.
 */
.bd-story__num::before {
	content: "";
	position: absolute;
	left: 0;
	top: -.95rem;
	width: 56px;
	height: 2px;
	background: var(--bd-grad);
}

/*
 * Both columns begin at the same distance below the rule and the number.
 *
 * The number now lives above the block on its own line, so it no longer pushes
 * the heading down inside the aside. That is what lets a single shared offset
 * place the heading and the first line of prose on the same optical level: with
 * the number inside the aside, the heading sat one line lower than the prose
 * however the two columns were padded.
 */
.bd-story__aside,
.bd-story__prose {
	padding-top: 1.6rem;
}

.bd-story__num {
	display: block;
	position: relative;
	z-index: 1;
	/* Sits between the rule and the block, so its bottom margin is the space the
	   two columns then pad away from. */
	margin: 0 0 .85rem;
	line-height: 1;
	font-family: var(--bd-mono);
	font-size: .76rem;
	letter-spacing: .2em;
	color: var(--bd-accent-text);
}

.bd-story__block h3 {
	margin: 0;
	max-width: 18ch;
	font-size: clamp(1.45rem, 2.3vw, 1.95rem);
	line-height: 1.14;
	text-wrap: balance;
}


/* Styled explicitly rather than inheriting the global rich-text defaults, so
   this rhythm stays put if those ever change. */
.bd-story__block .bd-rich {
	max-width: 68ch;
	color: var(--bd-ink-soft);
	font-size: 1.02rem;
	line-height: 1.75;
}

.bd-story__block .bd-rich > * + * { margin-top: 1.15em; }
.bd-story__block .bd-rich p:last-child { margin-bottom: 0; }
.bd-story__block .bd-rich strong { color: var(--bd-ink); }

/*
 * The client list in block 2 is a 1:1 mapping — a business type and what it
 * needs — so it reads as a definition list rather than a bullet list. The label
 * gets its own column, the description sits beside it at a readable measure,
 * and a hairline separates the entries. Bullets added nothing here: every item
 * was already a two-line entry, and the marker plus the em dash was doing the
 * same job twice.
 */
.bd-deflist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

/*
 * A definition list, not a bullet list.
 *
 * The client list is a 1:1 mapping — a business type and what it needs — so
 * every item was already two lines and the bullet plus the em dash were doing
 * the same job twice.
 *
 * The label column is a FIXED width, not max-content. max-content made it hug
 * each row's own label, so the descriptions started at five different x
 * positions in one list (781, 849, 858, 861 and 904px). A fixed column puts
 * every description on one left edge, which is the whole point of aligning them
 * in two columns.
 *
 * The width is set per breakpoint to the longest label at that size, so that no
 * label wraps: 14rem above 1300px, 12.5rem down to 900px. Below 900px the
 * labels get the full line and the description sits under them.
 */
.bd-deflist__item {
	display: grid;
	grid-template-columns: 14rem minmax(0, 1fr);
	gap: .35rem 2rem;
	align-items: baseline;
	padding-block: 1.05rem;
	border-bottom: 1px solid var(--bd-line);
}

.bd-deflist__item:first-child { padding-top: 0; }
.bd-deflist__item:last-child { padding-bottom: 0; border-bottom: 0; }

.bd-deflist__label {
	font-weight: 600;
	font-size: .95rem;
	color: var(--bd-ink);
}

.bd-deflist__text {
	color: var(--bd-ink-soft);
	font-size: .95rem;
	line-height: 1.62;
}

/* Tighter label column between 1101px and 1300px. 12.5rem still fits the
   longest label on one line, which is what keeps every row the same shape. */
@media (max-width: 1300px) and (min-width: 1101px) {
	.bd-deflist__item {
		grid-template-columns: 12.5rem minmax(0, 1fr);
		gap: .35rem 1.5rem;
	}
}

/*
 * Stacked below 1101px.
 *
 * The fixed sidebar is still taking 186px at these widths, which leaves the
 * content column too narrow to hold both a 14rem label and a readable measure
 * of description. Measured at 901px the descriptions wrapped to fifteen lines;
 * stacked at 900px they are two. The label sits above its own description
 * instead, which is the honest arrangement when there is only one column's
 * worth of room.
 */
@media (max-width: 1100px) {
	.bd-deflist__item {
		grid-template-columns: minmax(0, 1fr);
		gap: .2rem;
	}

	/* The story block also collapses to one column here, so the shared offset
	   between the aside and the prose is no longer needed. */
	.bd-story__aside,
	.bd-story__prose { padding-top: 0; }
	.bd-story__block h3 { max-width: 26ch; }
}

/* Values grid */
.bd-values { background: var(--bd-lilac); border-block: 1px solid var(--bd-line); }

.bd-values__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(1.1rem, 2.2vw, 1.7rem);
}

.bd-value {
	padding: 1.7rem;
	border-radius: var(--bd-radius);
	background: var(--bd-white);
	box-shadow: var(--bd-shadow-sm);
	transition: transform .3s var(--bd-ease), box-shadow .3s var(--bd-ease);
}
.bd-value:hover { transform: translateY(-4px); box-shadow: var(--bd-shadow); }

.bd-value__icon {
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 1rem;
	border-radius: 13px;
	background: var(--bd-grad-soft);
	color: var(--bd-indigo);
}

.bd-value h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.bd-value p { margin: 0; font-size: .92rem; color: var(--bd-ink-soft); }

/* --------------------------------------------------------------------------
   14. CTA BAND
   -------------------------------------------------------------------------- */
/*
 * The call-to-action band is a direct child of .bd-shell and occupies the same
 * spanning grid row as the footer, so its ink reaches both window edges with no
 * negative margins, no `100vw` and nothing to clip. The content inside stays on
 * the page's own measure by reusing --bd-gutter as before.
 */
.bd-ctaband {
	background: var(--bd-ink);
	color: var(--bd-white);
	padding-block: clamp(3rem, 6vw, 5rem);
}


/*
 * NOTE: do not put `overflow-x` on `html` or `body` here.
 *
 * It was added to absorb the few pixels `100vw` overshoots by when a scrollbar
 * is present, but any overflow value other than `visible` turns that element
 * into the scroll container for the whole document — and with `html` as the
 * scroll container, a `position: sticky` descendant resolves against a scrolling
 * box that no longer scrolls, so the sidebar simply scrolls off the page. It was
 * verified drifting: at scrollY 1461 the sidebar's top was -1461 instead of 0.
 *
 * The band's width is handled where it belongs, on the band itself.
 */

/*
 * The inner container is a flex item inside the band, and `.bd-section__inner`
 * gives it `width: 100%` — but as a flex item it also shrinks to its content, so
 * it sat flush left at 238px while its own children centred inside it. The
 * heading and paragraph looked centred because each carries `margin-inline:
 * auto`; the button row carried no such thing, so it hugged the left edge of
 * that left-aligned box.
 *
 * `display: block` and an explicit auto inline margin put the box back on the
 * measured grid of every other section, and centring the children then works for
 * every element rather than only the ones with an auto margin of their own.
 */
.bd-ctaband__inner {
	display: block;
	margin-inline: auto;
	text-align: center;
}

.bd-ctaband h2 {
	color: var(--bd-white);
	max-width: 24ch;
	margin-inline: auto;
	margin-bottom: .9rem;
}

/*
 * Excludes the actions row.
 *
 * The actions row is a <p> as well, so a plain `.bd-ctaband p` capped it at
 * 42rem — 672px. The buttons were centring correctly, but inside a 672px column
 * rather than across the band, which left them sitting 344px left of centre.
 * The measure belongs to the supporting sentence, not to the button row.
 */
.bd-ctaband p:not(.bd-ctaband__actions) {
	color: rgba(255, 255, 255, .78);
	max-width: 42rem;
	margin-inline: auto;
}

.bd-ctaband__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	justify-content: center;
	margin: 1.8rem 0 0 !important;
}


/*
 * Three classes deep on purpose. Two classes ties with the light-surface ink
 * rule in blossom.css, and that file loads first — so the white label here was
 * being overpainted and the button rendered as an empty pill on the dark band.
 */
:where(#bd-content) .bd-ctaband .bd-btn--ghost,
:where(#bd-content) .bd-ctaband .bd-btn--outline {
	border-color: rgba(255, 255, 255, .3);
	color: var(--bd-white);
	background: transparent;
}
.bd-ctaband .bd-btn--ghost:hover,
.bd-ctaband .bd-btn--ghost:focus {
	background: rgba(255, 255, 255, .1);
	color: var(--bd-white);
	border-color: rgba(255, 255, 255, .55);
}

/* The solid variant is gradient-filled, so its label is white on both
   surfaces. Stated explicitly rather than relying on the base layer. */
:where(#bd-content) .bd-ctaband .bd-btn--solid,
:where(#bd-content) .bd-ctaband .bd-btn--solid:hover,
:where(#bd-content) .bd-ctaband .bd-btn--solid:focus-visible { color: var(--bd-white); }

/* --------------------------------------------------------------------------
   15. LEGAL / TERMS
   -------------------------------------------------------------------------- */
.bd-legal { background: var(--bd-cream); }

.bd-legal__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1.2rem, 2.4vw, 1.9rem);
}

.bd-legal__block {
	padding: 1.8rem;
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius);
	background: var(--bd-white);
}
.bd-legal__block h3 { font-size: 1.12rem; }
.bd-legal__block p { color: var(--bd-ink-soft); font-size: .93rem; }

.bd-legal__dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .5rem 1rem;
	font-size: .92rem;
}
.bd-legal__dl dt {
	font-weight: 600;
	color: var(--bd-ink);
}
.bd-legal__dl dd {
	margin: 0;
	color: var(--bd-ink-soft);
}
.bd-legal__dl a { text-decoration: none; }
.bd-legal__dl a:hover { text-decoration: underline; }

.bd-legal__note,
.bd-terms__updated {
	margin-top: 2.2rem;
	padding: 1.1rem 1.4rem;
	border-radius: var(--bd-radius);
	background: var(--bd-lilac);
	font-size: .9rem;
	color: var(--bd-ink-soft);
}

/* Terms body */
.bd-terms { background: var(--bd-white); }

.bd-terms__body {
	max-width: 74ch;
}
.bd-terms__body h3 {
	margin-top: 2rem;
	font-size: 1.16rem;
	font-family: var(--bd-body);
	font-weight: 600;
	letter-spacing: 0;
}
.bd-terms__body h3:first-child { margin-top: 0; }
.bd-terms__body p { color: var(--bd-ink-soft); font-size: .95rem; }
.bd-terms__updated { margin-top: 2rem; }

.bd-privacy { background: var(--bd-lilac); border-top: 1px solid var(--bd-line); }
.bd-privacy__body { max-width: 70ch; }
.bd-privacy__body p { color: var(--bd-ink-soft); }

/* --------------------------------------------------------------------------
   16. CONTACT PAGE — MAP, DETAILS, SOCIAL
   -------------------------------------------------------------------------- */
.bd-map { background: var(--bd-white); }

.bd-map__frame {
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-lg);
	overflow: hidden;
	box-shadow: var(--bd-shadow);
	line-height: 0;
}

.bd-map__frame iframe {
	width: 100%;
	height: clamp(280px, 42vw, 440px);
	border: 0;
	display: block;
	filter: saturate(.92) contrast(1.02);
}

.bd-map__actions {
	margin: 1.4rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
}

.bd-contactblock { background: var(--bd-cream); }

.bd-contactblock__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(2rem, 4.5vw, 4rem);
	align-items: start;
}

.bd-contactblock__heading {
	font-family: var(--bd-body);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--bd-accent-text);
	margin-bottom: 1.4rem;
}

.bd-details {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.1rem;
}

.bd-details__item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.bd-details__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: var(--bd-white);
	border: 1px solid var(--bd-line);
	color: var(--bd-indigo);
}

.bd-details__body {
	display: grid;
	gap: .1rem;
	font-size: .95rem;
	color: var(--bd-ink-soft);
}

.bd-details__label {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bd-ink-faint);
}

.bd-details__body a { text-decoration: none; }
.bd-details__body a:hover { text-decoration: underline; }

.bd-social { margin-top: 2rem; }

.bd-social__title {
	font-family: var(--bd-body);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--bd-peri);
	margin-bottom: .9rem;
}

.bd-social__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: .6rem;
}

.bd-social__list a {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--bd-white);
	border: 1px solid var(--bd-line);
	color: var(--bd-ink-soft);
	text-decoration: none;
	transition: transform .25s var(--bd-ease), color .25s var(--bd-ease),
	            border-color .25s var(--bd-ease), box-shadow .25s var(--bd-ease);
}

.bd-social__list a:hover,
.bd-social__list a:focus {
	color: var(--bd-white);
	background: var(--bd-grad);
	border-color: transparent;
	transform: translateY(-3px);
	box-shadow: var(--bd-shadow);
}

.bd-contactblock__note {
	margin-top: 1.8rem;
	font-size: .9rem;
	color: var(--bd-ink-faint);
}

/* --------------------------------------------------------------------------
   17. ARCHIVE / POSTS
   -------------------------------------------------------------------------- */
.bd-posts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(1.3rem, 2.6vw, 2.2rem);
}

.bd-post {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-lg);
	background: var(--bd-white);
	overflow: hidden;
	transition: transform .3s var(--bd-ease), box-shadow .3s var(--bd-ease);
}
.bd-post:hover { transform: translateY(-5px); box-shadow: var(--bd-shadow); }

.bd-post__thumb img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform .5s var(--bd-ease);
}
.bd-post:hover .bd-post__thumb img { transform: scale(1.04); }

.bd-post__body { padding: 1.7rem; display: grid; gap: .7rem; }
.bd-post__meta {
	margin: 0;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bd-ink-faint);
}
.bd-post__title { margin: 0; font-size: 1.3rem; }
.bd-post__title a { text-decoration: none; color: var(--bd-ink); }
.bd-post__title a:hover { color: var(--bd-link); }

.bd-page__links { margin-top: 1.5rem; font-size: .9rem; }

/* Pagination */
.bd-archive .pagination,
.bd-archive .navigation.pagination {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
	gap: .4rem;
}
.bd-archive .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 .6rem;
	border-radius: var(--bd-radius-pill);
	border: 1px solid var(--bd-line);
	text-decoration: none;
	font-size: .9rem;
}
.bd-archive .page-numbers.current {
	background: var(--bd-grad);
	color: var(--bd-white);
	border-color: transparent;
}

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.bd-footer {
	/* Full width, on its own grid row below the sidebar and main column. */
	grid-area: footer;
	background: var(--bd-ink);
	color: var(--bd-on-dark);
	/* Breathing room below the last section, and a left inset that clears the
	   fixed sidebar so the brand column lines up with the page content. */
	padding: var(--bd-section-y) var(--bd-gutter) 1.35rem;
	padding-left: calc(var(--bd-sidebar-w) + var(--bd-gutter));
}

.bd-footer__inner {
	width: 100%;
	max-width: var(--bd-maxw);
	margin-inline: auto;
	display: grid;
	/* One wider brand column, then the three link columns. */
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 2.75rem);
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* On the dark footer, the standard primary button would lose its edges —
   the page background is gone, so only the fill separates it. Give it a
   bright ring instead. */
.bd-footer .bd-btn--solid {
	background-image: linear-gradient(135deg, #4fa9e8 0%, #5b5ede 52%, #c62a72 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3),
	            0 0 0 1px rgba(255, 255, 255, .16),
	            0 14px 30px -14px rgba(0, 0, 0, .6);
}

.bd-footer .bd-btn--solid:hover,
.bd-footer .bd-btn--solid:focus-visible {
	background-image: linear-gradient(135deg, #6fbbee 0%, #7477e8 52%, #d8457f 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4),
	            0 0 0 1px rgba(255, 255, 255, .28),
	            0 18px 36px -14px rgba(0, 0, 0, .62);
}

/* Glass treatment for the secondary button on the dark background. */
/* Three classes deep, for the same reason as the CTA band above. */
:where(#bd-content) .bd-footer .bd-btn--outline,
:where(#bd-content) .bd-footer .bd-btn--ghost {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .28);
	color: var(--bd-white);
	box-shadow: none;
}

.bd-footer .bd-btn--outline:hover,
.bd-footer .bd-btn--outline:focus-visible,
.bd-footer .bd-btn--ghost:hover,
.bd-footer .bd-btn--ghost:focus-visible {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .55);
	color: var(--bd-white);
}



.bd-footer .bd-btn:focus-visible {
	outline-color: var(--bd-on-dark-accent);
}

.bd-footer__brand .bd-icon { color: var(--bd-sky); }

/* The horizontal logo carries the wordmark, so it stands in for the name line
   and takes the spacing that line used to have. */
.bd-footer .bd-brand-logo--footer {
	margin: 0 0 .85rem;
}

.bd-footer__tagline {
	margin: 0;
	max-width: 34ch;
	font-size: .91rem;
	line-height: 1.65;
}

/*
 * Scoped under .bd-footer on purpose. As a bare class this had specificity
 * (0,1,0) against the theme's `body.bd-theme h2` at (0,1,2), so the colour here
 * never applied and the headings rendered in the body ink — the same value as
 * the footer background, making them invisible.
 */
.bd-footer .bd-footer__heading {
	margin: 0 0 .9rem;
	font-family: var(--bd-body);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bd-on-dark-faint);
}

.bd-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .62rem;
}

/* Scoped for the same reason as the heading above; unscoped this lost to
   `body.bd-theme a` and the links came out in the light-theme link colour at
   2.22:1 on the dark background. */
.bd-footer .bd-footer__col a,
.bd-footer .bd-footer__col span {
	color: var(--bd-on-dark);
	text-decoration: none;
	font-size: .92rem;
	line-height: 1.5;
	transition: color .2s var(--bd-ease);
}

.bd-footer .bd-footer__col a:hover,
.bd-footer .bd-footer__col a:focus {
	color: var(--bd-on-dark-accent);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.bd-footer__base {
	width: 100%;
	max-width: var(--bd-maxw);
	margin-inline: auto;
	padding-top: 1.4rem;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.5rem;
	justify-content: space-between;
	font-size: .84rem;
}
.bd-footer__base p { margin: 0; }
.bd-footer .bd-footer__credit { color: var(--bd-on-dark-faint); }

/* Back to top */
.bd-totop {
	position: fixed;
	right: 1.5rem;
	bottom: 1.4rem;
	z-index: var(--bd-z-nav);
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 1px solid var(--bd-line);
	border-radius: 50%;
	background: var(--bd-white);
	color: var(--bd-ink);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .3s var(--bd-ease), transform .3s var(--bd-ease),
	            visibility .3s var(--bd-ease), background-color .3s var(--bd-ease);
	box-shadow: var(--bd-shadow);
}
.bd-totop .bd-icon { transform: rotate(-90deg); }
.bd-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.bd-totop:hover { background: var(--bd-lilac); color: var(--bd-link); }

/* --------------------------------------------------------------------------
   18b. LEGAL PAGE
   A compact strip of in-page links, then the policies themselves. The links are
   script-driven like the main navigation, so they need the pointer affordance
   that a real href would otherwise supply.
   -------------------------------------------------------------------------- */
.bd-legalnav {
	background: var(--bd-white);
	border-bottom: 1px solid var(--bd-line);
	padding-block: 1.25rem;
}

.bd-legalnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.9rem;
}

.bd-legalnav__list a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bd-ink-soft);
	text-decoration: none;
	cursor: pointer;
	transition: color .2s var(--bd-ease);
}

.bd-legalnav__list a::before {
	content: "";
	width: .4rem;
	height: .42rem;
	border-radius: 50%;
	background: var(--bd-grad);
}

.bd-legalnav__list a:hover,
.bd-legalnav__list a:focus { color: var(--bd-link); }

/* The legal body copy sits in a readable measure, and the policy sections get
   a little more air than the default rhythm. */
.bd-privacy__body,
.bd-terms__body {
	max-width: 72ch;
}

.bd-privacy__body h3,
.bd-terms__body h3 {
	margin-top: 2.2rem;
	margin-bottom: .6rem;
	font-size: 1.12rem;
}

.bd-privacy__body h3:first-child,
.bd-terms__body h3:first-child { margin-top: 0; }

.bd-privacy__body p,
.bd-terms__body p {
	color: var(--bd-ink-soft);
	font-size: .96rem;
	line-height: 1.72;
}

/* --------------------------------------------------------------------------
   19. PROSE PAGE (default page template)
   -------------------------------------------------------------------------- */
.bd-page__body { background: var(--bd-white); }
.bd-page__body .bd-rich { max-width: 74ch; }

/* --------------------------------------------------------------------------
   20. RESPONSIVE — TABLET
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
	:root { --bd-sidebar-w: 164px; }

	.bd-nav__label { font-size: .75rem; letter-spacing: .08em; }
	.bd-quad__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bd-quad__item:nth-child(2n) { border-right: 0; }
	.bd-quad__item:nth-child(-n + 2) { border-bottom: 1px solid var(--bd-line); }
}

/* --------------------------------------------------------------------------
   21. RESPONSIVE — MOBILE
   The two-column shell collapses to one, and the sidebar becomes a
   slide-in drawer opening from the left.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	:root {
		--bd-sidebar-w: 0px;
		--bd-section-y: clamp(3rem, 9vw, 4.5rem);
	}

	.bd-shell {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		grid-template-areas:
			"main"
			"footer";
	}

	/* --- Sidebar becomes a left-hand drawer --- */
	.bd-sidebar {
		position: fixed;
		inset: 0 auto 0 0;
		height: 100%;
		width: min(300px, 84vw);
		border-right: 0;
		box-shadow: 20px 0 60px rgba(27, 23, 37, .18);
		transform: translateX(-105%);
		transition: transform .4s var(--bd-ease-out);
		background: var(--bd-white);
		z-index: var(--bd-z-menu);
		padding: 5rem 0 1.5rem;
	}

	.bd-sidebar.is-open { transform: none; }

	/* The contact icons live in the footer on small screens. */
	.bd-sidebar__social { display: none; }

	/* Leave room for the fixed opener, which hovers over the drawer's top. */
	.bd-sidebar { padding: 4.75rem 0 1.5rem; }

	.bd-rail__brand { margin-bottom: 1.5rem; width: auto; }

	.bd-progress { left: 0; right: 0; }

	/* The opener sits in .bd-shell, not inside the translated drawer, so
	   position:fixed here is measured against the viewport as intended. */
	.bd-nav__toggle {
		display: flex;
		align-items: center;
		gap: .55rem;
		position: fixed;
		top: .85rem;
		left: .9rem;
		z-index: calc(var(--bd-z-menu) + 3);
		padding: .55rem .9rem;
		border: 1px solid var(--bd-line);
		border-radius: var(--bd-radius-pill);
		background: rgba(255, 255, 255, .94);
		backdrop-filter: blur(10px);
		color: var(--bd-ink);
		font-family: var(--bd-body);
		font-size: .72rem;
		font-weight: 600;
		letter-spacing: .14em;
		text-transform: uppercase;
		cursor: pointer;
		box-shadow: var(--bd-shadow-sm);
		transition: color .2s var(--bd-ease), background-color .2s var(--bd-ease);
	}

	.bd-nav__toggle[aria-expanded="true"] {
		background: var(--bd-white);
		color: var(--bd-accent-text);
	}

	.bd-nav__toggle-bars,
	.bd-nav__toggle-bars::before,
	.bd-nav__toggle-bars::after {
		display: block;
		width: 18px;
		height: 1.5px;
		background: currentColor;
		transition: transform .3s var(--bd-ease), opacity .2s var(--bd-ease);
	}
	.bd-nav__toggle-bars { position: relative; }
	.bd-nav__toggle-bars::before,
	.bd-nav__toggle-bars::after {
		content: "";
		position: absolute;
		left: 0;
	}
	.bd-nav__toggle-bars::before { top: -5px; }
	.bd-nav__toggle-bars::after  { top: 5px; }

	.bd-sidebar.is-open .bd-nav__toggle-bars { background: transparent; }
	.bd-sidebar.is-open .bd-nav__toggle-bars::before { transform: translateY(5px) rotate(45deg); }
	.bd-sidebar.is-open .bd-nav__toggle-bars::after  { transform: translateY(-5px) rotate(-45deg); }

	/* Roomier touch targets inside the drawer. */
	.bd-nav__item a {
		gap: 1rem;
		padding: 1.05rem 1.5rem;
	}
	.bd-nav__label { font-size: .88rem; }
	.bd-nav__num { font-size: .75rem; }

	/* Dim overlay behind the drawer */
	.bd-nav__scrim {
		position: fixed;
		inset: 0;
		z-index: calc(var(--bd-z-menu) - 1);
		background: rgba(27, 23, 37, .4);
		opacity: 0;
		visibility: hidden;
		transition: opacity .35s var(--bd-ease), visibility .35s var(--bd-ease);
		border: 0;
		padding: 0;
		cursor: pointer;
	}
	.bd-nav__scrim.is-visible { opacity: 1; visibility: visible; }

	.bd-totop { right: 1rem; bottom: 1rem; }

	/* The compact hero needs no forced height on small screens — let it hug
	   its content so it does not open with a large empty band. */
	.bd-hero {
		/* Still the full first screen, measured against the viewport with
		   mobile browser chrome visible, so the fold lands where it should.
		   The copy stays bottom-anchored here too; the generous top padding
		   keeps it clear of the fixed drawer opener. */
		min-height: 100vh;
		min-height: 100svh;
		/* Clears the fixed drawer opener. */
		padding-block: 4.5rem 2.25rem;
	}

	.bd-footer {
		padding-left: var(--bd-gutter);
	}

	/*
	 * The About and Contact heroes stay full height on a phone, measured with
	 * the browser chrome visible so the fold lands where it should. The top
	 * padding clears the fixed drawer opener.
	 */
	.bd-aboutintro,
	.bd-contactintro,
	.bd-page__head {
		min-height: 100vh;
		min-height: 100svh;
		padding-block: 4.5rem 2.25rem;
	}

	/* The intro copy can also breathe to the full width of a phone. */
	.bd-aboutintro .bd-section__inner,
	.bd-contactintro .bd-section__inner,
	.bd-page__head .bd-section__inner {
		max-width: 100%;
	}
	.bd-hero > .bd-section__inner { max-width: 100%; margin-inline: 0; }
	.bd-hero__title { max-width: 22ch; }
	.bd-hero__lede { max-width: 100%; }
	.bd-hero__orb { opacity: .18; right: -18%; top: 6%; }

	.bd-contactcta__grid,
	.bd-contactblock__grid { grid-template-columns: minmax(0, 1fr); }

	.bd-footer__inner { grid-template-columns: 1fr 1fr; }

	.bd-hero__title { max-width: none; }
	.bd-hero__orb { opacity: .14; right: -20%; }
}

/* --------------------------------------------------------------------------
   22. RESPONSIVE — SMALL PHONES
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
	.bd-quad__grid { grid-template-columns: minmax(0, 1fr); }
	.bd-quad__item {
		border-right: 0;
		border-bottom: 1px solid var(--bd-line);
		padding-block: 1.85rem;
	}
	.bd-quad__item:last-child { border-bottom: 0; }

	.bd-eyebrow { gap: .35rem; letter-spacing: .16em; }
	.bd-eyebrow__name { letter-spacing: .14em; }

	/* The heading block and the first card were landing 18px apart here, which
	   read as one crowded lump on a phone. */
	.bd-section-head { margin-bottom: 2.75rem; }

	.bd-hero__marks { flex-direction: column; gap: .6rem; }

	/*
	 * Short phones. The hero is a full viewport tall, so on a 640px-tall screen
	 * there is roughly 610px of usable height once browser chrome is discounted.
	 * The copy, the stacked buttons and the three trust marks come to more than
	 * that at the default rhythm, which pushed the marks off the fold. These
	 * tighten the spacing and the type a step so the whole hero — brand name
	 * through to the marks — lands within the fold on a small phone, while
	 * leaving tablets and larger phones untouched.
	 */
	@media (max-height: 700px) {
		.bd-hero { padding-block: 3.7rem 1.5rem; }

		.bd-eyebrow { margin-bottom: .5rem; }
		.bd-hero__title { margin-bottom: .55rem; }
		.bd-hero__lede { margin-bottom: .7rem; }
		.bd-hero__actions { margin-bottom: .7rem; gap: .45rem; }

		.bd-hero__lede { font-size: .9rem; line-height: 1.45; }
		.bd-hero__title { font-size: clamp(1.55rem, 7.2vw, 2.05rem); }
		.bd-hero__actions .bd-btn { padding: .62rem 1.15rem; }
		.bd-hero__marks { font-size: .74rem; gap: .4rem; }
	}

	/* The tightest phones: the one-line lede is the least load-bearing part of
	   the hero, so it steps aside rather than pushing the marks off the fold.
	   The same sentence still appears in the section that follows. */
	@media (max-height: 620px) {
		.bd-hero { padding-block: 3.5rem 1.25rem; }
		.bd-hero__lede { display: none; }
		.bd-hero__actions { margin-bottom: .6rem; }
	}
	.bd-hero__actions { flex-direction: column; align-items: stretch; }
	.bd-hero__actions .bd-btn { width: 100%; }

	.bd-process__steps { grid-template-columns: minmax(0, 1fr); }
	.bd-pricing__grid,
	.bd-maintenance__grid,
	.bd-what__grid,
	.bd-values__grid,
	.bd-legal__grid { grid-template-columns: minmax(0, 1fr); }

	.bd-maintenance__row { grid-template-columns: minmax(0, 1fr); }

	.bd-footer__inner { grid-template-columns: minmax(0, 1fr); }
	.bd-footer__base { flex-direction: column; }

	.bd-legal__dl { grid-template-columns: minmax(0, 1fr); gap: .15rem 0; }
	.bd-legal__dl dd { margin-bottom: .7rem; }

	.bd-ctaband__actions { flex-direction: column; }
	.bd-ctaband__actions .bd-btn { width: 100%; }

	.bd-btn { white-space: normal; text-align: center; }
}

/* --------------------------------------------------------------------------
   23. PRINT
   -------------------------------------------------------------------------- */
@media print {
	.bd-sidebar, .bd-nav__toggle, .bd-totop, .bd-progress { display: none !important; }
	.bd-shell { display: block; }
	body.bd-theme { background: #fff; color: #000; }
	.bd-section { padding: 1.2rem 0; break-inside: avoid; }
	.bd-btn { border: 1px solid #000; color: #000; background: none; }
}

/*
 * Below three-across the row alignment is dropped deliberately.
 *
 * The cards are nested three-deep in one row group, so at two columns the third
 * card wraps onto a second line inside that same group. The wrap needs a second
 * set of five tracks, and the four tracks it actually gets are sized by the
 * row pattern rather than the content - leaving the odd card's bullets 315px out
 * of line with the two above it. Rather than ship an alignment that is visibly
 * wrong, the cards return to independent flex columns on a narrower window:
 * correct and even, just not row-aligned. Row alignment is kept wherever all
 * three cards share a line, which is the case it exists for.
 */
@media (max-width: 1100px) {
	.bd-maintenance__row {
		display: block;
	}

	/* Specificity, not just order: a later mobile rule collapses this grid to a
	   single column, and an equal-specificity selector here would lose to it. */
	.bd-section .bd-maintenance__grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

	.bd-care {
		display: flex;
		flex-direction: column;
		gap: 1.05rem;
		margin-bottom: clamp(1.1rem, 2.2vw, 1.7rem);
		/*
		 * height: 100% only makes sense inside a stretch grid. Here the cards are
		 * block-level siblings, so a percentage height resolves against a
		 * container whose height is itself driven by these cards - and each one
		 * stretched to the full column height, measured at 1684px for a card
		 * holding three bullets. auto lets each card size to its own content.
		 */
		height: auto;
	}

	.bd-care .bd-list { flex: 1; }
	.bd-care .bd-btn { margin-top: auto; }
	.bd-care__name,
	.bd-care__price,
	.bd-care__for { grid-row: auto; }
}

/* -------------------------------------------------------------------------
   Currency switcher and the pricing disclaimer.
   The server always renders USD (so the page stays cacheable); the browser
   swaps figures in place. The switcher stays visible because geo-detection is
   a guess: VPNs, travellers and caches can all land someone in the wrong
   country, and a foreign price with no way to correct it is worse than none.
   ---------------------------------------------------------------------- */
.bd-pricing__currency {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	justify-content: center;
	margin-top: 1.5rem;
	font-size: 0.875rem;
}

.bd-pricing__terms {
	max-width: 62ch;
	margin: 1.5rem auto 0;
	text-align: center;
	font-size: 0.9375rem;
}

.bd-currency {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.bd-currency__label {
	opacity: 0.75;
}

.bd-currency__list {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bd-currency__option {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	border: 1px solid rgba(99, 102, 241, 0.25);
	text-decoration: none;
	line-height: 1.5;
}

.bd-currency__option:hover,
.bd-currency__option:focus-visible {
	border-color: rgba(99, 102, 241, 0.6);
}

.bd-currency__option.is-current {
	background: rgba(99, 102, 241, 0.1);
	border-color: rgba(99, 102, 241, 0.5);
	font-weight: 600;
}

.bd-pricing__disclaimer {
	opacity: 0.75;
}