/* ==========================================================================
   BlinkShift — Components
   Every component reads only semantic tokens, so all of them work unchanged
   inside light, paper, dark and amber section schemes.
   ========================================================================== */

/* ==========================================================================
   1. MICRO LABEL
   The eyebrow that sits above almost every heading, with a short accent rule
   as its marker. Set in the heading family, in the case the editor typed.
   ========================================================================== */

.bs-label {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	/*
	 * Set in the heading family, in whatever case the editor typed — no forced
	 * capitals. Lowercase reads smaller than caps at the same size, so the step
	 * up to --fs-xs and to semibold keeps the eyebrow holding its own above a
	 * heading instead of shrinking away.
	 */
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	line-height: 1;
	color: var(--c-muted);
}

.bs-label::before {
	content: '';
	inline-size: 1.75rem;
	block-size: 2px;
	background: var(--c-accent);
	flex: none;
}

.bs-label--dot::before {
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 2px;
	background: var(--c-accent);
}

.bs-label--bare::before {
	display: none;
}

.bs-label--boxed {
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	padding: 0.55em 1em;
	color: var(--c-ink);
}

.bs-center .bs-label,
.bs-label--center {
	justify-content: center;
}

/* ==========================================================================
   2. SECTION HEADING BLOCK
   ========================================================================== */

.bs-heading {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.bs-heading__title {
	font-size: var(--fs-h2);
	margin: 0;
	/* Without a measure every section h2 ran the full 1240px container, which
	   is what made the page read as loose and unbalanced. */
	max-width: 22ch;
}

.bs-center .bs-heading__title,
.bs-heading--center .bs-heading__title { margin-inline: auto; }

.bs-heading__title em {
	font-style: normal;
	color: var(--c-accent-quiet);
}

/* A hand-drawn-feeling underline on an emphasised phrase. */
.bs-heading__title mark,
.bs-mark {
	background: none;
	color: inherit;
	position: relative;
	white-space: nowrap;
}

.bs-heading__title mark::after,
.bs-mark::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.06em;
	height: 0.32em;
	background: var(--ac-a32);
	z-index: -1;
	border-radius: 2px;
}

.bs-heading__intro {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--c-ink-soft);
	max-width: 62ch;
}

.bs-center .bs-heading { align-items: center; text-align: center; }
.bs-center .bs-heading__intro { margin-inline: auto; }

/* Heading + intro side by side (used on wider sections). */
.bs-heading--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(var(--sp-6), 4vw, var(--sp-16));
	align-items: end;
}

.bs-heading--split .bs-heading__intro { max-width: 52ch; }

@media (max-width: 900px) {
	.bs-heading--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* ==========================================================================
   3. BUTTONS
   Primary fills wipe upward on hover rather than simply changing colour.
   ========================================================================== */

.bs-btn {
	--btn-bg: var(--c-btn-fill);
	--btn-ink: var(--c-btn-fill-ink);
	--btn-bg-hover: var(--c-btn-fill-hover);
	--btn-ink-hover: var(--c-btn-fill-hover-ink);

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	isolation: isolate;
	overflow: hidden;
	padding: 1.05em 1.9em;
	border-radius: var(--r-pill);
	background: var(--btn-bg);
	color: var(--btn-ink);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.008em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--dur) var(--ease-out),
	            transform var(--dur) var(--ease-out),
	            box-shadow var(--dur) var(--ease-out);
}

.bs-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--btn-bg-hover);
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform var(--dur) var(--ease-out);
}

.bs-btn:hover,
.bs-btn:focus-visible {
	color: var(--btn-ink-hover);
	transform: translateY(-2px);
}

.bs-btn:hover::before,
.bs-btn:focus-visible::before {
	transform: scaleY(1);
}

.bs-btn:active {
	transform: translateY(0);
}

.bs-btn__icon {
	inline-size: 1.05em;
	block-size: 1.05em;
	flex: none;
	transition: transform var(--dur) var(--ease-out);
}

.bs-btn:hover .bs-btn__icon {
	transform: translateX(3px);
}

/* --- variants ----------------------------------------------------------- */

/* Filled by default; inverts to an outline on hover. The border is present in
   both states so nothing shifts. In a monochrome system this inversion IS the
   emphasis — there is no second colour to change to. */
.bs-btn--accent {
	--btn-bg: var(--c-accent);
	--btn-ink: var(--c-accent-ink);
	--btn-bg-hover: var(--c-bg);
	--btn-ink-hover: var(--c-accent);
	border: 1px solid var(--c-accent);
	box-shadow: none;
}

.bs-btn--ghost {
	--btn-bg: transparent;
	--btn-ink: var(--c-ink);
	--btn-bg-hover: var(--c-ink);
	--btn-ink-hover: var(--c-bg);
	border: 1px solid var(--c-line-strong);
	box-shadow: none;
}

.bs-btn--outline-accent {
	--btn-bg: transparent;
	--btn-ink: var(--c-ink);
	--btn-bg-hover: var(--c-accent);
	--btn-ink-hover: var(--c-accent-ink);
	border: 1px solid var(--c-accent);
}

.bs-btn--lg {
	padding: 1.25em 2.35em;
	font-size: var(--fs-body);
}

.bs-btn--sm {
	padding: 0.85em 1.4em;
	font-size: var(--fs-xs);
}

.bs-btn--block {
	display: flex;
	width: 100%;
}

.bs-btn--square {
	border-radius: var(--r-md);
}

/* --- text link with an arrow -------------------------------------------- */

.bs-linkarrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--c-ink);
	text-decoration: none;
	padding-bottom: 2px;
	background-image: linear-gradient(var(--c-accent), var(--c-accent));
	background-repeat: no-repeat;
	background-size: 0% 1.5px;
	background-position: left bottom;
	transition: background-size var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.bs-linkarrow:hover {
	color: var(--c-ink);
	background-size: 100% 1.5px;
}

.bs-linkarrow__icon {
	inline-size: 1em;
	block-size: 1em;
	transition: transform var(--dur) var(--ease-out);
}

.bs-linkarrow:hover .bs-linkarrow__icon {
	transform: translateX(4px);
}

/* --- button rows -------------------------------------------------------- */

.bs-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-5) var(--sp-8);
}

.bs-center .bs-actions,
.bs-actions--center { justify-content: center; }

.bs-actions__note {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	color: var(--c-muted);
	letter-spacing: 0.01em;
}

/* ==========================================================================
   4. CARDS
   ========================================================================== */

.bs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding: clamp(var(--sp-6), 2.4vw, var(--sp-10));
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	transition: border-color var(--dur) var(--ease-out),
	            transform var(--dur) var(--ease-out),
	            box-shadow var(--dur) var(--ease-out),
	            background-color var(--dur) var(--ease-out);
}

.bs-card--hover:hover {
	border-color: var(--c-accent);
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.bs-card__index {
	font-family: var(--font-mono);
	font-size: var(--fs-index);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-label);
	color: var(--c-muted);
	transition: color var(--dur) var(--ease-out);
}

.bs-card--hover:hover .bs-card__index {
	color: var(--c-accent-quiet);
}

.bs-card__title {
	font-size: var(--fs-h4);
	margin: 0;
}

.bs-card__title a {
	text-decoration: none;
}

.bs-card__text {
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
}

/* Pinned to the bottom of the card, so cards of unequal text length still line
   their footers up along one edge. */
.bs-card__foot {
	margin-top: auto;
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
}

/*
 * Card chip — the icon mark every card leads with.
 *
 * Previously a dark gradient plate. On a dark card that is a dark box next to a
 * bright heading: the plate has almost nothing to contrast against, so the whole
 * chip sinks and the icon inside it goes with it. Making the box darker or the
 * hairline brighter only ever moved that problem around.
 *
 * So the chip stops being a box and becomes a light source, which is what the
 * palette asks for anyway — hue in this system exists only as light, never as a
 * flat fill. A bloom sits behind the glyph, an aperture ring catches that light
 * at the edge, and the glyph itself is pure white and heavy enough to hold its
 * own. It now reads as lit rather than filled, and the icon is the brightest
 * thing in it instead of the dimmest.
 */
.bs-card__chip {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	flex: none;
	border-radius: var(--r-lg);
	color: var(--chip-ink);
	background: var(--chip-plate);
	box-shadow: var(--chip-ring);
	transition: color var(--dur) var(--ease-out),
	            background var(--dur) var(--ease-out),
	            box-shadow var(--dur) var(--ease-out),
	            transform var(--dur) var(--ease-out);
}

/* The bloom. Kept on its own layer so hover can bring it up without touching
   the plate, and clipped to the chip so it never washes the heading beside it. */
.bs-card__chip::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--chip-bloom);
	opacity: 0.85;
	transition: opacity var(--dur) var(--ease-out);
	pointer-events: none;
}

/* Outer halo, hover only — the chip lifts off the card rather than just
   changing colour. Separate from the border box so nothing shifts. */
.bs-card__chip::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 1px var(--glow-a40), 0 14px 34px -12px var(--glow-a40);
	opacity: 0;
	transition: opacity var(--dur) var(--ease-out);
	pointer-events: none;
}

/*
 * The glyph sits above the bloom and is the brightest element in the chip.
 * CSS stroke-width beats the SVG presentation attribute, so the heavier line
 * applies to chips only and leaves inline icons in buttons and links alone.
 */
.bs-card__chip svg {
	position: relative;
	z-index: 1;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	stroke-width: 2;
}

/* Amber corner tick that appears on hover — a small "selected" signal. */
.bs-card--tick::after {
	content: '';
	position: absolute;
	top: var(--sp-5);
	right: var(--sp-5);
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 2px;
	background: var(--c-accent);
	opacity: 0;
	transform: scale(0.4);
	transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.bs-card--tick:hover::after {
	opacity: 1;
	transform: scale(1);
}

.bs-card--flat {
	background: transparent;
	border-color: transparent;
	padding-inline: 0;
}

.bs-card--outline {
	background: transparent;
}

/* ==========================================================================
   5. TICK LIST  ("Who this is for")
   ========================================================================== */

.bs-ticklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--sp-4);
}

.bs-ticklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 720px) {
	.bs-ticklist--2 { grid-template-columns: minmax(0, 1fr); }
}

.bs-ticklist li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
	margin: 0;
	padding-block: var(--sp-3);
	border-bottom: 1px solid var(--c-line);
	color: var(--c-ink-soft);
	line-height: 1.5;
}

.bs-ticklist li::marker { content: none; }

.bs-ticklist__tick {
	flex: none;
	inline-size: 1.35rem;
	block-size: 1.35rem;
	margin-top: 0.12rem;
	display: grid;
	place-items: center;
	border-radius: var(--r-xs);
	background: var(--ac-a16);
	color: var(--c-accent-quiet);
}

.bs-ticklist__tick svg {
	inline-size: 0.8rem;
	block-size: 0.8rem;
}

/* ==========================================================================
   6. ACCORDION  (FAQ)
   ========================================================================== */

.bs-accordion {
	border-top: 1px solid var(--c-line);
}

.bs-accordion__item {
	border-bottom: 1px solid var(--c-line);
}

.bs-accordion__trigger {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-6);
	width: 100%;
	padding: var(--sp-6) 0;
	text-align: left;
	font-family: var(--font-display);
	font-size: var(--fs-h5);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.018em;
	line-height: 1.35;
	color: var(--c-ink);
	transition: color var(--dur-fast) var(--ease-out);
}

.bs-accordion__trigger:hover {
	color: var(--c-accent-quiet);
}

.bs-accordion__marker {
	position: relative;
	flex: none;
	inline-size: 2rem;
	block-size: 2rem;
	margin-top: 0.1rem;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	transition: background-color var(--dur) var(--ease-out),
	            border-color var(--dur) var(--ease-out),
	            transform var(--dur) var(--ease-out);
}

.bs-accordion__marker::before,
.bs-accordion__marker::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.bs-accordion__marker::before {
	inline-size: 0.75rem;
	block-size: 1.5px;
}

.bs-accordion__marker::after {
	inline-size: 1.5px;
	block-size: 0.75rem;
}

.bs-accordion__trigger[aria-expanded='true'] .bs-accordion__marker {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-accent-ink);
	transform: rotate(180deg);
}

.bs-accordion__trigger[aria-expanded='true'] .bs-accordion__marker::after {
	opacity: 0;
	transform: translate(-50%, -50%) scaleY(0);
}

.bs-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.bs-accordion__panel[data-open='true'] {
	grid-template-rows: 1fr;
}

.bs-accordion__panel > div {
	overflow: hidden;
}

.bs-accordion__body {
	padding-bottom: var(--sp-7);
	padding-right: var(--sp-12);
	color: var(--c-ink-soft);
	max-width: 68ch;
}

@media (max-width: 720px) {
	.bs-accordion__body { padding-right: 0; }
}

/* ==========================================================================
   7. STATS
   ========================================================================== */

.bs-stat {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.bs-stat__value {
	font-family: var(--font-display);
	font-size: var(--fs-stat);
	font-weight: var(--fw-bold);
	line-height: 0.95;
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	display: flex;
	align-items: baseline;
	gap: 0.04em;
}

.bs-stat__suffix {
	color: var(--c-accent-quiet);
}

.bs-stat__label {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-muted);
	line-height: 1.5;
}

/* ==========================================================================
   8. MARQUEE  (pure CSS, duplicated track)
   ========================================================================== */

/*
 * The strip slides each copy of the track left by exactly its own width. Two
 * details keep the loop seamless:
 *
 * - The trailing gap lives *inside* the track as padding rather than as a flex
 *   gap on the container, so `translateX(-100%)` — which resolves against the
 *   track's own border box — is precisely one repeat unit. When the gap sat on
 *   the container the keyframe had to subtract it back by hand, and the two
 *   values drifting apart is what put a seam in the loop.
 *
 * - PHP emits the track several times instead of the track being stretched with
 *   `min-width: 100%`. Stretching padded the final copy out with empty space,
 *   so on any display wider than the text itself a blank stretch scrolled past.
 */
.bs-marquee {
	display: flex;
	overflow: hidden;
	user-select: none;
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.bs-marquee__track {
	flex: none;
	display: flex;
	align-items: center;
	gap: var(--marquee-gap, 3rem);
	padding-inline-end: var(--marquee-gap, 3rem);
	animation: bs-marquee-scroll var(--marquee-duration, 38s) linear infinite;
}

.bs-marquee[data-direction='right'] .bs-marquee__track {
	animation-direction: reverse;
}

.bs-marquee:hover .bs-marquee__track {
	animation-play-state: paused;
}

@keyframes bs-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

.bs-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-6);
	font-family: var(--font-display);
	/* Kept below h2 so the strip reads as texture, not as a section heading. */
	font-size: clamp(1.375rem, 2.8vw, 2.5rem);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-heading);
	white-space: nowrap;
	color: var(--c-ink);
}

.bs-marquee__sep {
	color: var(--c-accent);
	font-size: 0.6em;
}

.bs-marquee--outline .bs-marquee__item {
	color: transparent;
	-webkit-text-stroke: 1px var(--c-line-strong);
}

/* ==========================================================================
   9. FORMS
   ========================================================================== */

.bs-form {
	display: grid;
	gap: var(--sp-5);
}

.bs-form__row {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
	.bs-form__row { grid-template-columns: minmax(0, 1fr); }
}

.bs-field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.bs-field__label {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-muted);
}

.bs-field__label .required { color: var(--c-accent-quiet); }

.bs-field input,
.bs-field textarea,
.bs-field select {
	width: 100%;
	padding: 0.95em 1.1em;
	background: var(--c-surface);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-md);
	color: var(--c-ink);
	font-size: var(--fs-sm);
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.bs-field input::placeholder,
.bs-field textarea::placeholder {
	color: var(--c-muted);
}

.bs-field input:focus,
.bs-field textarea:focus,
.bs-field select:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px var(--ac-a16);
}

.bs-form__status {
	font-size: var(--fs-sm);
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--r-md);
	border: 1px solid var(--c-line);
}

.bs-form__status[data-state='success'] {
	border-color: var(--c-accent);
	background: var(--ac-a10);
}

.bs-form__status[data-state='error'] {
	border-color: #d94a3d;
	background: rgb(217 74 61 / 0.08);
}

/* Honeypot */
.bs-form__trap {
	position: absolute !important;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   10. HEADER
   ========================================================================== */

.bs-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: var(--z-header);
	background: transparent;
	transition: background-color var(--dur) var(--ease-out),
	            border-color var(--dur) var(--ease-out),
	            transform var(--dur) var(--ease-out),
	            box-shadow var(--dur) var(--ease-out);
	border-bottom: 1px solid transparent;
}

.admin-bar .bs-header { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .bs-header { top: 46px; }
}

.bs-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-8);
	min-block-size: var(--header-h);
}

.bs-header[data-stuck='true'] {
	background: color-mix(in srgb, var(--c-bg) 88%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom-color: var(--c-line);
	box-shadow: 0 1px 0 0 var(--c-line);
}

.bs-header[data-hidden='true'] {
	transform: translateY(-110%);
}

/* Header sitting over a dark hero inverts its own tokens.
   This must be a COMPLETE inversion, not just ink and lines. The accent is
   defined as "maximum contrast against the current surface", and several
   rules pair it with --c-bg / --c-surface — inverting ink alone left the nav
   underline, the current-page indicator and the focus ring painting
   near-black on a black hero, and broke the CTA's hover state. */
.bs-header[data-over='dark']:not([data-stuck='true']) {
	--c-bg: var(--n-999);
	--c-bg-alt: var(--n-950);
	--c-surface: var(--d-3);
	--c-surface-2: var(--d-2);
	--c-surface-3: var(--d-4);
	--c-ink: var(--n-0);
	--c-ink-soft: var(--n-300);
	--c-muted: var(--n-400);
	--c-line: var(--w-a16);
	--c-line-strong: var(--w-a16);
	--c-accent: var(--n-0);
	--c-accent-hover: var(--n-100);
	--c-accent-ink: var(--n-999);
	--c-accent-quiet: var(--n-0);
	--ac-a06: var(--w-a06);
	--ac-a10: var(--w-a10);
	--ac-a16: var(--w-a16);
	--ac-a32: var(--w-a32);
	--c-focus: var(--n-0);
	--c-btn-fill: var(--n-0);
	--c-btn-fill-ink: var(--n-999);
	--c-btn-fill-hover: transparent;
	--c-btn-fill-hover-ink: var(--n-0);
	color: var(--n-0);
}

/* --- brand -------------------------------------------------------------- */

.bs-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	text-decoration: none;
	flex: none;
}

/* Sized by height, width auto, so the mark keeps its own proportions whatever
   artwork is uploaded. The ceiling stays clear of --header-h (74px) with room
   for the bar's padding, so a taller logo never forces the header open. */
.bs-brand__logo {
	block-size: clamp(2.125rem, 2.6vw, 2.625rem);
	inline-size: auto;
	transition: filter var(--dur) var(--ease-out);
}

/* The footer has no fixed height to respect, and the mark is the anchor of the
   whole column there, so it runs larger than the header's. */
.bs-footer__brand .bs-brand__logo {
	block-size: clamp(2.5rem, 3.4vw, 3.25rem);
}

/* The wordmark is pure black artwork — invert it on dark backgrounds. */
[data-scheme='dark'] .bs-brand__logo,
.bs-header[data-over='dark']:not([data-stuck='true']) .bs-brand__logo {
	filter: invert(1);
}

.bs-brand__text {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: var(--fw-black);
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: var(--c-ink);
}

.bs-brand__text span {
	font-weight: var(--fw-regular);
}

/* --- primary nav -------------------------------------------------------- */

.bs-nav {
	display: flex;
	align-items: center;
}

.bs-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(var(--sp-4), 1.8vw, var(--sp-8));
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-nav__list li { margin: 0; position: relative; }

.bs-nav__list a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding-block: var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--c-ink);
	text-decoration: none;
	background-image: linear-gradient(var(--c-accent), var(--c-accent));
	background-repeat: no-repeat;
	background-size: 0% 2px;
	background-position: left calc(100% - 2px);
	transition: background-size var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.bs-nav__list a:hover,
.bs-nav__list .current-menu-item > a,
.bs-nav__list .current_page_item > a,
.bs-nav__list .current-menu-ancestor > a {
	background-size: 100% 2px;
}

/* Dropdowns */
.bs-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + var(--sp-4));
	left: 0;
	min-inline-size: 16rem;
	padding: var(--sp-3);
	margin: 0;
	list-style: none;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--dur) var(--ease-out),
	            transform var(--dur) var(--ease-out),
	            visibility var(--dur);
}

.bs-nav__list li:hover > .sub-menu,
.bs-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.bs-nav__list .sub-menu a {
	display: block;
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-sm);
	background-image: none;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.bs-nav__list .sub-menu a:hover {
	background: var(--c-surface-2);
	color: var(--c-accent-quiet);
}

.bs-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	flex: none;
}

@media (max-width: 1024px) {
	.bs-nav,
	.bs-header__actions .bs-btn { display: none; }
}

/* --- mobile toggle + drawer --------------------------------------------- */

.bs-burger {
	display: none;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	color: var(--c-ink);
}

@media (max-width: 1024px) {
	.bs-burger { display: grid; }
}

.bs-burger__box {
	position: relative;
	inline-size: 1.1rem;
	block-size: 0.7rem;
}

.bs-burger__box span {
	position: absolute;
	left: 0;
	inline-size: 100%;
	block-size: 1.5px;
	background: currentColor;
	transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.bs-burger__box span:nth-child(1) { top: 0; }
.bs-burger__box span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.bs-burger__box span:nth-child(3) { bottom: 0; }

.bs-burger[aria-expanded='true'] .bs-burger__box span:nth-child(1) {
	transform: translateY(0.34rem) rotate(45deg);
}
.bs-burger[aria-expanded='true'] .bs-burger__box span:nth-child(2) { opacity: 0; }
.bs-burger[aria-expanded='true'] .bs-burger__box span:nth-child(3) {
	transform: translateY(-0.34rem) rotate(-45deg);
}

.bs-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	display: grid;
	grid-template-rows: auto 1fr;
	background: var(--n-950);
	color: var(--n-0);
	padding: var(--sp-6) var(--gutter) var(--sp-10);
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
	overflow-y: auto;
}

.bs-drawer[data-open='true'] {
	transform: translateY(0);
	visibility: visible;
}

.bs-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-block-size: var(--header-h);
}

.bs-drawer__close {
	inline-size: 2.75rem;
	block-size: 2.75rem;
	display: grid;
	place-items: center;
	border: 1px solid var(--w-a16);
	border-radius: var(--r-pill);
	color: var(--n-0);
}

.bs-drawer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-drawer__nav > ul > li {
	border-bottom: 1px solid var(--w-a10);
	margin: 0;
}

.bs-drawer__nav a {
	display: block;
	padding: var(--sp-5) 0;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 6vw, 2.25rem);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-heading);
	color: var(--n-0);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur) var(--ease-out);
}

.bs-drawer__nav a:hover {
	color: var(--c-accent);
	padding-left: var(--sp-3);
}

.bs-drawer__nav .sub-menu a {
	font-size: var(--fs-body);
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	color: var(--n-300);
	padding-block: var(--sp-2);
}

.bs-drawer__foot {
	margin-top: var(--sp-10);
	display: grid;
	gap: var(--sp-5);
}

.bs-drawer__meta {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	color: var(--n-400);
	letter-spacing: 0.02em;
	line-height: 1.8;
}

body[data-scroll-locked='true'] {
	overflow: hidden;
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.bs-footer {
	background: var(--n-950);
	color: var(--n-0);
	padding-block: var(--section-y) var(--sp-8);
}

.bs-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: clamp(var(--sp-8), 4vw, var(--sp-16));
	padding-bottom: var(--sp-14);
	border-bottom: 1px solid var(--w-a10);
}

@media (max-width: 1024px) {
	.bs-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.bs-footer__top { grid-template-columns: minmax(0, 1fr); }
}

.bs-footer__tagline {
	color: var(--n-400);
	font-size: var(--fs-sm);
	line-height: 1.7;
	max-width: 34ch;
	margin-top: var(--sp-5);
}

.bs-footer__col h2,
.bs-footer__heading {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-eyebrow);
	color: var(--n-400);
	margin-bottom: var(--sp-5);
}

.bs-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-3);
}

.bs-footer__col li { margin: 0; }

.bs-footer__col a {
	color: var(--n-100);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur) var(--ease-out);
}

.bs-footer__col a:hover {
	color: var(--c-accent);
	padding-left: 4px;
}

.bs-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-top: var(--sp-8);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	color: var(--n-500);
	letter-spacing: 0.02em;
}

.bs-footer__bottom a { color: var(--n-400); text-decoration: none; }
.bs-footer__bottom a:hover { color: var(--c-accent); }

.bs-social {
	display: flex;
	gap: var(--sp-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-social a {
	display: grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border: 1px solid var(--w-a16);
	border-radius: var(--r-pill);
	color: var(--n-100);
	transition: background-color var(--dur) var(--ease-out),
	            color var(--dur) var(--ease-out),
	            border-color var(--dur) var(--ease-out);
}

.bs-social a:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--n-950);
}

.bs-social svg { inline-size: 1.05rem; block-size: 1.05rem; }

/* ==========================================================================
   12. PAGE LOADER
   --------------------------------------------------------------------------
   Opt-in by JavaScript, never by CSS: the overlay is display:none until an
   inline script in <head> adds .bs-loading, and that same script registers a
   hard timeout that removes it. If the script never runs, the loader simply
   never appears — the page is readable either way.
   ========================================================================== */

.bs-loader {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: none;
	place-items: center;
	background: var(--n-999);
	color: var(--n-0);
	will-change: transform, border-radius;
}

.bs-loading .bs-loader { display: grid; }
.bs-loading, .bs-loading body { overflow: hidden; }

.bs-loader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(var(--sp-6), 3vw, var(--sp-10));
	padding-inline: var(--gutter);
	transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
}

/* --- wordmark ------------------------------------------------------------ */

.bs-loader__mark {
	display: flex;
	overflow: hidden;
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 8vw, 5rem);
	font-weight: var(--fw-black);
	letter-spacing: -0.045em;
	line-height: 1;
	text-transform: uppercase;
	padding-block: 0.08em;
}

.bs-loader__char {
	display: inline-block;
	transform: translateY(110%);
	animation: bs-loader-char 780ms var(--ease-out) forwards;
	animation-delay: calc(var(--i, 0) * 42ms);
}

/* "SHIFT" is the lighter half of the wordmark, as in the logo. */
.bs-loader__char--thin { font-weight: var(--fw-regular); }

@keyframes bs-loader-char {
	to { transform: translateY(0); }
}

/* --- progress ------------------------------------------------------------ */

.bs-loader__meter {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	inline-size: min(22rem, 70vw);
}

.bs-loader__bar {
	position: relative;
	flex: 1 1 auto;
	block-size: 1px;
	background: var(--w-a16);
	overflow: hidden;
}

.bs-loader__fill {
	position: absolute;
	inset: 0 auto 0 0;
	inline-size: 0%;
	background: var(--n-0);
}

.bs-loader__pct {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-label);
	color: var(--n-400);
	font-variant-numeric: tabular-nums;
	min-inline-size: 3.5ch;
	text-align: right;
}

/* --- exit ---------------------------------------------------------------- */

/* The panel peels upward behind a soft curve, echoing the reference's
   morphing edge without needing an SVG path plugin. */
.bs-loader[data-state='out'] {
	transform: translateY(-101%);
	border-bottom-left-radius: 50% 14%;
	border-bottom-right-radius: 50% 14%;
	transition: transform 900ms cubic-bezier(0.76, 0, 0.24, 1),
	            border-radius 900ms cubic-bezier(0.76, 0, 0.24, 1);
}

.bs-loader[data-state='out'] .bs-loader__inner {
	opacity: 0;
	transform: translateY(-24px);
}

@media (prefers-reduced-motion: reduce) {
	.bs-loader__char { animation: none; transform: none; }

	.bs-loader[data-state='out'] {
		transition: opacity 200ms linear;
		transform: none;
		opacity: 0;
	}
}

/* ==========================================================================
   13. MISC
   ========================================================================== */

.bs-scrolltop {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: var(--z-sticky);
	display: grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: var(--r-pill);
	background: var(--n-950);
	color: var(--n-0);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--dur) var(--ease-out),
	            transform var(--dur) var(--ease-out),
	            visibility var(--dur),
	            background-color var(--dur) var(--ease-out);
}

.bs-scrolltop[data-visible='true'] {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.bs-scrolltop:hover {
	background: var(--n-0);
	color: var(--n-950);
	box-shadow: 0 0 0 1px var(--n-950);
}

.bs-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 0.5em 0.95em;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	letter-spacing: 0.04em;
	color: var(--c-ink-soft);
	text-decoration: none;
}

.bs-pill--accent {
	background: var(--ac-a16);
	border-color: transparent;
	color: var(--c-accent-quiet);
}

.bs-divider {
	block-size: 1px;
	background: var(--c-line);
	border: 0;
	margin: 0;
}

.bs-eyebrow-rule {
	display: block;
	block-size: 1px;
	background: var(--c-line);
	margin-block: var(--sp-8);
}

/* Ratio box for embeds and video thumbs. */
.bs-ratio {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--c-surface-2);
	aspect-ratio: var(--ratio, 16 / 9);
}

.bs-ratio > * {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.bs-ratio--portrait { --ratio: 3 / 4; }
.bs-ratio--square { --ratio: 1 / 1; }

/* Play button overlay for video testimonials. */
.bs-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgb(10 10 10 / 0.28);
	color: var(--n-0);
	border: 0;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease-out);
}

.bs-play:hover { background: rgb(10 10 10 / 0.42); }

.bs-play__disc {
	display: grid;
	place-items: center;
	inline-size: 4.25rem;
	block-size: 4.25rem;
	border-radius: var(--r-pill);
	background: var(--c-accent);
	color: var(--n-950);
	transition: transform var(--dur) var(--ease-out);
}

.bs-play:hover .bs-play__disc { transform: scale(1.08); }
.bs-play__disc svg { inline-size: 1.25rem; block-size: 1.25rem; margin-left: 2px; }