/* ==========================================================================
   BlinkShift — Depth layer
   --------------------------------------------------------------------------
   Loaded after blocks.css. Its job is to replace "flat panels separated by
   hairlines" with layered surfaces, light and elevation.

   Three moves, applied consistently:
     · surfaces are gradients, not fills
     · separation comes from tone and shadow, not from 1px boxes
     · hue appears only as light — glow, wash, focus ring. Never as type.
   ========================================================================== */

/* ==========================================================================
   1. SECTION LIGHT
   Every dark section gets a soft light source at its top edge, so the page
   reads as lit rather than as printed black.
   ========================================================================== */

.bs-section[data-scheme='dark'],
.bs-section[data-scheme='void'],
.bs-hero[data-scheme='dark'],
.bs-hero[data-scheme='void'] {
	position: relative;
	isolation: isolate;
}

.bs-section[data-scheme='dark']::before,
.bs-section[data-scheme='void']::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	block-size: min(60%, 32rem);
	background: radial-gradient(115% 100% at 50% 0%, var(--glow-a08), transparent 68%);
	pointer-events: none;
	z-index: -1;
}

/* An off-centre, larger source for heroes. */
.bs-hero--glow::before {
	content: '';
	position: absolute;
	top: -28%;
	right: -12%;
	inline-size: min(58rem, 92vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, var(--glow-a24) 0%, var(--glow-a08) 38%, transparent 66%);
	pointer-events: none;
	z-index: -1;
	filter: blur(10px);
}

.bs-hero--glow::after {
	content: '';
	position: absolute;
	bottom: -40%;
	left: -18%;
	inline-size: min(44rem, 80vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, var(--glow-a08), transparent 62%);
	pointer-events: none;
	z-index: -1;
}

/* ==========================================================================
   2. SURFACES — gradient cards, no hairline boxes
   ========================================================================== */

.bs-card,
.bs-pain--grid .bs-pain__item,
.bs-services--grid .bs-service,
.bs-proof--columns .bs-proof__item,
.bs-proof--feature .bs-proof__item,
.bs-proof--ticker .bs-proof__item,
.bs-why--grid .bs-why__point,
.bs-process--cards .bs-process__step,
.bs-stats--cards .bs-stat,
.bs-testimonials--grid .bs-testimonial,
.bs-testimonials--slider .bs-testimonial,
.bs-audience--cards .bs-audience__item,
.bs-contact__panel,
.bs-cta--boxed .bs-cta__box {
	background: var(--grad-card);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-md);
	transition: background 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);
}

/* A one-pixel sheen along the top edge reads as a lit surface. */
.bs-card::before,
.bs-pain--grid .bs-pain__item::before,
.bs-services--grid .bs-service::before,
.bs-proof--columns .bs-proof__item::before,
.bs-why--grid .bs-why__point::before,
.bs-process--cards .bs-process__step::before,
.bs-contact__panel::before {
	content: '';
	position: absolute;
	inset-inline: 12%;
	top: 0;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, var(--w-a32), transparent);
	pointer-events: none;
	opacity: 0.7;
}

[data-scheme='light'] .bs-card::before,
[data-scheme='light'] .bs-pain__item::before,
[data-scheme='light'] .bs-service::before,
[data-scheme='paper'] .bs-card::before,
[data-scheme='paper'] .bs-pain__item::before,
[data-scheme='paper'] .bs-service::before { display: none; }

.bs-pain--grid .bs-pain__item,
.bs-services--grid .bs-service,
.bs-proof--columns .bs-proof__item,
.bs-why--grid .bs-why__point,
.bs-process--cards .bs-process__step,
.bs-contact__panel {
	position: relative;
	overflow: hidden;
}

/* Hover: lift, brighten, and pick up a rim of light. */
.bs-card--hover:hover,
.bs-pain--grid .bs-pain__item:hover,
.bs-services--grid .bs-service:hover,
.bs-proof--columns .bs-proof__item:hover,
.bs-why--grid .bs-why__point:hover,
.bs-process--cards .bs-process__step:hover {
	background: var(--grad-card-hover);
	border-color: var(--c-line-strong);
	transform: translateY(-5px);
	box-shadow: var(--shadow-lg), 0 0 0 1px var(--glow-a14), var(--shadow-glow);
}

/*
 * The chip lights up as the card lifts, so the two read as one object moving
 * rather than two separate effects firing at once.
 *
 * One :is() list instead of three hand-maintained ones. The alternating
 * services layout was missing from the old lists, which is why the cards in
 * that section — the ones on the homepage — had no chip hover at all.
 */
:is(
	.bs-card--hover,
	.bs-pain--grid .bs-pain__item,
	.bs-services--grid .bs-service,
	.bs-services--alternating .bs-service,
	.bs-why--grid .bs-why__point,
	.bs-process--cards .bs-process__step,
	.bs-audience--cards .bs-audience__item
):hover .bs-card__chip {
	color: var(--chip-hover-ink);
	background: var(--chip-hover-plate);
	transform: translateY(-2px);
}

/* Bloom up, halo in. */
:is(
	.bs-card--hover,
	.bs-pain--grid .bs-pain__item,
	.bs-services--grid .bs-service,
	.bs-services--alternating .bs-service,
	.bs-why--grid .bs-why__point,
	.bs-process--cards .bs-process__step,
	.bs-audience--cards .bs-audience__item
):hover .bs-card__chip::before {
	opacity: 1;
}

:is(
	.bs-card--hover,
	.bs-pain--grid .bs-pain__item,
	.bs-services--grid .bs-service,
	.bs-services--alternating .bs-service,
	.bs-why--grid .bs-why__point,
	.bs-process--cards .bs-process__step,
	.bs-audience--cards .bs-audience__item
):hover .bs-card__chip::after {
	opacity: 1;
}

/* The light-section override that used to live here matched nothing: a section
   carries `.bs-services--grid` and `data-scheme` on the same element, and a
   descendant combinator cannot match its own subject. It is now handled by
   --chip-hover-ink / --chip-hover-plate in tokens.css, which inherit. */

/* ==========================================================================
   3. GLASS
   ========================================================================== */

.bs-glass {
	background: var(--w-a06);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
	border: 1px solid var(--w-a10);
	border-radius: var(--r-xl);
}

[data-scheme='light'] .bs-glass,
[data-scheme='paper'] .bs-glass {
	background: var(--k-a04);
	border-color: var(--k-a10);
}

/* ==========================================================================
   4. PILL LABELS
   Replaces the rule-and-caps eyebrow with a capsule carrying a lit marker.
   ========================================================================== */

.bs-label {
	gap: var(--sp-2);
	padding: 0.5em 0.95em 0.5em 0.75em;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	background: var(--ac-a06);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--c-ink);
	letter-spacing: 0.12em;
}

.bs-label::before {
	inline-size: 0.4rem;
	block-size: 0.4rem;
	border-radius: 50%;
	background: var(--glow);
	box-shadow: 0 0 0 3px var(--glow-a14), 0 0 12px var(--glow-a40);
	flex: none;
}

/* .bs-heading is a flex column, so a capsule label stretched to the full
   container width. Pin it to its content instead of touching the container,
   which would break the split heading's grid alignment. */
.bs-heading .bs-label,
.bs-stack > .bs-label,
.bs-spot__left .bs-label {
	align-self: flex-start;
}

.bs-center .bs-heading .bs-label,
.bs-heading--center .bs-label {
	align-self: center;
}

.bs-label--bare {
	border: 0;
	background: none;
	padding: 0;
	backdrop-filter: none;
	color: var(--c-muted);
}

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

/* ==========================================================================
   5. BADGE + AVATAR STACK
   ========================================================================== */

.bs-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 0.35rem 1rem 0.35rem 0.35rem;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	background: var(--ac-a06);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: var(--fs-xs);
	color: var(--c-ink-soft);
	line-height: 1;
}

.bs-badge strong { color: var(--c-ink); font-weight: var(--fw-semibold); }

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

.bs-avatars img,
.bs-avatars span {
	inline-size: 1.6rem;
	block-size: 1.6rem;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--c-bg);
	margin-left: -0.55rem;
	background: var(--c-surface-3);
	display: grid;
	place-items: center;
	font-family: var(--font-mono);
	font-size: 0.5625rem;
	color: var(--c-ink-soft);
}

.bs-avatars > :first-child { margin-left: 0; }

.bs-hero__badge { margin-bottom: var(--sp-6); }
.bs-hero--stacked .bs-hero__badge { align-self: center; }

/* ==========================================================================
   6. FLOATING GEOMETRY
   Small shapes at different depths. Purely decorative and never focusable.
   ========================================================================== */

.bs-shapes {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.bs-shape {
	position: absolute;
	border-radius: var(--r-xs);
	will-change: transform;
}

.bs-shape--outline {
	border: 1px solid var(--w-a16);
	background: var(--w-a04);
}

.bs-shape--solid { background: var(--w-a10); }

.bs-shape--lit {
	background: var(--glow-a24);
	box-shadow: 0 0 24px var(--glow-a40);
	border-radius: var(--r-sm);
}

.bs-shape--ring {
	border: 1px solid var(--glow-a24);
	border-radius: 50%;
	background: none;
}

/* Placement — asymmetric, but kept clear of the left copy column so shapes
   never sit behind the headline, badge or buttons. */
.bs-shape:nth-child(1) { inline-size: 3.5rem;  block-size: 3.5rem;  top: 11%;    right: 3%; }
.bs-shape:nth-child(2) { inline-size: 1.25rem; block-size: 1.25rem; top: 30%;    right: 44%; }
.bs-shape:nth-child(3) { inline-size: 6rem;    block-size: 6rem;    bottom: 6%;  right: 33%; }
.bs-shape:nth-child(4) { inline-size: 0.75rem; block-size: 0.75rem; top: 72%;    right: 7%; }
.bs-shape:nth-child(5) { inline-size: 2.25rem; block-size: 2.25rem; top: 5%;     right: 24%; }

@media (max-width: 900px) {
	.bs-shape:nth-child(3),
	.bs-shape:nth-child(5) { display: none; }
}

/* ==========================================================================
   7. SCROLL-FILL HEADINGS
   Words start dim and fill to full contrast as the section scrolls through.
   The dim state is applied by JavaScript, never by CSS, so a script failure
   leaves the heading perfectly readable.
   ========================================================================== */

[data-fill] { color: var(--c-ink); }
.bs-fillword { will-change: color; }

/* ==========================================================================
   8. MEDIA
   ========================================================================== */

.bs-hero__visual,
.bs-service__media,
.bs-postcard__thumb,
.bs-ratio {
	border-radius: var(--r-2xl);
	box-shadow: var(--shadow-lg);
}

/* Media on dark gets a rim of light so it doesn't dissolve into the page. */
[data-scheme='dark'] .bs-hero__visual,
[data-scheme='void'] .bs-hero__visual,
[data-scheme='dark'] .bs-service__media,
[data-scheme='void'] .bs-service__media {
	box-shadow: var(--shadow-lg), 0 0 0 1px var(--w-a10);
}

/*
 * No scrim at rest. The hero image carries no text, so a permanent black
 * gradient bought nothing and only made the photograph muddy. The overlay now
 * earns its place by doing something: a diagonal sheen sweeps across the image
 * on hover, and it is invisible otherwise.
 */
.bs-hero__visual::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 0;
	border-radius: inherit;
	background: linear-gradient(115deg, transparent 34%, var(--w-a16) 50%, transparent 66%);
	background-size: 260% 100%;
	background-position: 130% 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur) var(--ease-out),
	            background-position 1100ms var(--ease-out);
}

.bs-hero__visual:hover::after {
	opacity: 1;
	background-position: -40% 0;
}

/* The sweep is decoration; hold it still when motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
	.bs-hero__visual::after,
	.bs-hero__visual:hover::after {
		transition: none;
		background-position: 130% 0;
		opacity: 0;
	}
}

/* ==========================================================================
   9. BUTTONS
   ========================================================================== */

.bs-btn--accent {
	box-shadow: 0 10px 30px -12px var(--k-a60);
}

[data-scheme='dark'] .bs-btn--accent:hover,
[data-scheme='void'] .bs-btn--accent:hover {
	box-shadow: 0 0 0 1px var(--c-accent), var(--shadow-glow);
}

.bs-btn--ghost {
	background: var(--ac-a06);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Slider and arrow controls pick up the same treatment. */
.bs-slider__btn,
.bs-service__arrow,
.bs-accordion__marker,
.bs-social a {
	background: var(--ac-a06);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

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

.bs-header[data-stuck='true'] {
	background: color-mix(in srgb, var(--d-0) 72%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	border-bottom-color: var(--w-a06);
	box-shadow: 0 1px 0 0 var(--w-a06), 0 18px 40px -30px #000;
}

/* Header over a LIGHT section. Dark is the house default, so this is the case
   that actually fires most often — without it the white CTA button sits
   invisibly on a white band. A complete inversion, for the same reason the
   dark-over rule is complete: accent is defined against the surface. */
.bs-header[data-over='light']:not([data-stuck='true']) {
	--c-bg: var(--l-0);
	--c-bg-alt: var(--l-1);
	--c-surface: var(--l-0);
	--c-surface-2: var(--l-1);
	--c-surface-3: var(--l-2);
	--c-ink: var(--n-950);
	--c-ink-soft: var(--n-600);
	--c-muted: var(--n-500);
	--c-line: var(--k-a06);
	--c-line-strong: var(--k-a16);
	--c-accent: var(--n-950);
	--c-accent-hover: var(--n-900);
	--c-accent-ink: var(--n-0);
	--c-accent-quiet: var(--n-950);
	--ac-a06: var(--k-a04);
	--ac-a10: var(--k-a06);
	--ac-a16: var(--k-a10);
	--ac-a32: var(--k-a32);
	--c-btn-fill: var(--n-950);
	--c-btn-fill-ink: var(--n-0);
	--c-btn-fill-hover: transparent;
	--c-btn-fill-hover-ink: var(--n-950);
	color: var(--n-950);
}

/* The wordmark is black artwork. Dark is now the default surface — including
   the stuck header — so it inverts by default and un-inverts only on light.
   Previously it only inverted while :not(stuck), which meant the "SHIFT" half
   vanished the moment the header became sticky. */
.bs-brand__logo { filter: invert(1); }

[data-scheme='light'] .bs-brand__logo,
[data-scheme='paper'] .bs-brand__logo,
.bs-header[data-over='light']:not([data-stuck='true']) .bs-brand__logo {
	filter: none;
}

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

.bs-footer {
	background: var(--d-0);
	position: relative;
	isolation: isolate;
}

.bs-footer::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	block-size: 24rem;
	background: radial-gradient(100% 100% at 50% 0%, var(--glow-a08), transparent 70%);
	pointer-events: none;
	z-index: -1;
}

/* ==========================================================================
   12. LOADER
   ========================================================================== */

.bs-loader {
	background: var(--d-0);
	background-image: radial-gradient(80% 60% at 50% 40%, var(--glow-a14), transparent 70%);
}

.bs-loader__fill { background: var(--n-0); box-shadow: 0 0 12px var(--glow-a40); }

/* ==========================================================================
   13. MARQUEE
   ========================================================================== */

.bs-marqueeblock {
	border-block: 1px solid var(--c-line);
	background: var(--c-bg-alt);
}

.bs-marquee__sep { color: var(--glow); }