/*
 * Brightway Consultancy — services.css
 * Services page sections. Inherits the visual language locked by the
 * homepage gabarit (commit 17a90c2): scroll reveals, gold ambient glows,
 * trim-marks, dot matrix, editorial hairline, eyebrow→h2 tight coupling.
 *
 * Scope:
 *   1. .bwc-services-hero            — page hero (no video, glow + matrix)
 *   2. .bwc-services-overview        — 4 anchor mini-cards
 *      + .bwc-services-anchor-card
 *   3. .bwc-services-practice        — practice deep-dive (4 instances)
 *      + .bwc-services-practice--glow-top
 *      + .bwc-services-practice--glow-bottom
 *      + .bwc-services-practice--matrix
 *      + .bwc-services-chip          — framework pill
 *   4. .bwc-services-method          — "mandates not tickets" 2×2 grid
 *   5. .bwc-services-finale          — closing CTA
 *
 * Universal contract:
 *   - Hover gated @media (hover: hover) and (pointer: fine).
 *   - Exact transition properties only — no transition: all.
 *   - Logical properties everywhere.
 *   - Tokens only. Sand alpha follows the documented rgba convention.
 *   - prefers-reduced-motion handled globally (utilities.css §4).
 */

/* ===========================================================================
 * 1. HERO — page-specific opener.
 *    Reuses the .bwc-section base padding (no 100dvh override — page hero
 *    is a typographic chapter opening, not a full-bleed billboard like the
 *    homepage's video hero). Ample top padding so the hero owns its own
 *    arrival before the page header pill stops covering content.
 *    Ambient: a generous gold glow (top-right, larger than the homepage
 *    Statement glow) + the editorial dot matrix on the left flank — the
 *    page opens at the same density of "matter" the homepage closes with.
 * ========================================================================= */

.bwc-services-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block-start: clamp(8rem, 6rem + 8vw, 14rem);
	padding-block-end: clamp(4rem, 3rem + 5vw, 7rem);
}

.bwc-services-hero::before {
	/* Generous gold glow, top-right, same shape language as the homepage
	 * Statement glow but pushed in scale and intensity so the page opens
	 * with confidence. */
	content: '';
	position: absolute;
	inset-block-start: -10rem;
	inset-inline-end: -12rem;
	inline-size: 56rem;
	block-size: 56rem;
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--bwc-accent-gold) 16%, transparent) 0%,
		color-mix(in srgb, var(--bwc-accent-gold) 5%, transparent) 35%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

.bwc-services-hero::after {
	/* Dot matrix anchored to the left flank — 14 cols × 22 rows on a
	 * 1.5rem grid, sand 14% base, 6 gold accents at fixed positions.
	 * Hidden below md (overlaps the stacked content otherwise). */
	content: '';
	position: absolute;
	inset-block-start: clamp(4rem, 4vw + 2rem, 7rem);
	inset-inline-start: clamp(1rem, 4vw, 4rem);
	inline-size: 21rem;
	block-size: 33rem;
	pointer-events: none;
	z-index: 0;

	background-image:
		radial-gradient(circle at 3.75rem 5.25rem,  var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 9.75rem 12.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 15.75rem 8.25rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 6.75rem 20.25rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 17.25rem 24.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 11.25rem 30.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at center, rgba(245, 241, 232, 0.14) 2px, transparent 3px);
	background-size:
		100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
		1.5rem 1.5rem;
	background-repeat:
		no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
		repeat;
}

@media (max-width: 767px) {
	.bwc-services-hero::after {
		display: none;
	}
}

.bwc-services-hero > .bwc-container {
	position: relative;
	z-index: 1;
}

.bwc-services-hero__inner {
	max-inline-size: 64ch;
	margin-inline-start: auto; /* push right on desktop so the matrix on the left flank reads */
}

@media (min-width: 1024px) {
	.bwc-services-hero__inner {
		margin-inline-start: 38%; /* clear room for the left-flank matrix */
	}
}

.bwc-services-hero__inner > * + * {
	margin-block-start: var(--bwc-space-3);
}

.bwc-services-hero h1 {
	margin-block-start: var(--bwc-space-1); /* eyebrow→h1 tight coupling (manual since the global rule targets h2) */
}

.bwc-services-hero__lede {
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-lg);
	line-height: 1.5;
}

.bwc-services-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bwc-space-2);
	margin-block-start: var(--bwc-space-5);
}

/* ===========================================================================
 * 2. OVERVIEW — four anchor mini-cards (Double-Bezel, jump-link).
 *    On desktop, 4 cards in a row (col-span-3 each). Mobile collapses to
 *    single column (layout.css universal collapse).
 * ========================================================================= */

.bwc-services-overview__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: var(--bwc-space-3);
}

.bwc-services-overview__item {
	display: flex;
}

.bwc-services-anchor-card {
	display: block;
	inline-size: 100%;
	color: var(--bwc-text);
	text-decoration: none;
	transition: transform var(--bwc-dur-dropdown) var(--bwc-ease-out);
}

.bwc-services-anchor-card .bwc-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--bwc-space-1);
	block-size: 100%;
	padding-block: var(--bwc-space-3);
	padding-inline: var(--bwc-space-3);
	box-shadow: inset 0 1px 1px rgba(245, 241, 232, 0.06);
	transition: box-shadow var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

/* Trim-mark — same editorial L-shape as homepage service cards. */
.bwc-services-anchor-card .bwc-card__inner::before {
	content: '';
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-end: 0.75rem;
	inline-size: 0.875rem;
	block-size: 0.875rem;
	border-block-start: 1px solid var(--bwc-accent-gold-40);
	border-inline-end: 1px solid var(--bwc-accent-gold-40);
	pointer-events: none;
	transition: border-color var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

.bwc-services-anchor-card__num {
	font-family: var(--bwc-font-mono);
	font-size: var(--bwc-fs-xs);
	color: var(--bwc-accent-gold);
	letter-spacing: 0.12em;
}

.bwc-services-anchor-card__title {
	font-size: var(--bwc-fs-lg);
	line-height: 1.25;
	margin: 0;
}

.bwc-services-anchor-card__tagline {
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-sm);
	line-height: 1.45;
	margin: 0;
}

.bwc-services-anchor-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-block-start: auto;
	padding-block-start: var(--bwc-space-2);
	color: var(--bwc-accent-gold);
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	transition: gap var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.bwc-services-anchor-card:hover {
		transform: translateY(-2px);
	}
	.bwc-services-anchor-card:hover .bwc-card__inner {
		box-shadow: inset 0 1px 2px rgba(245, 241, 232, 0.12);
	}
	.bwc-services-anchor-card:hover .bwc-card__inner::before {
		border-color: var(--bwc-accent-gold);
	}
	.bwc-services-anchor-card:hover .bwc-services-anchor-card__cta {
		gap: 0.65em;
	}
}

.bwc-services-anchor-card:focus-visible {
	outline: 2px solid var(--bwc-accent-gold);
	outline-offset: 4px;
	border-radius: var(--bwc-radius-outer);
}

/* ===========================================================================
 * 3. PRACTICE DEEP-DIVE — one section per practice (4 instances).
 *    Layout: header band (eyebrow + h2 + tagline + lede) full-width,
 *    then a 6/6 split body: "What we deliver" list on the left,
 *    framework chips + audience + CTA on the right.
 *
 *    Each instance carries one of three decor modifiers (glow-top,
 *    glow-bottom, matrix) so the four sections don't read as identical
 *    plates stacked. The base layout is unchanged across modifiers —
 *    only the ambient ::before / ::after pseudos vary.
 *
 *    Hairline gold separator at the section start anchors the scroll
 *    moment and ties the practices into a typographic sequence (01,
 *    02, 03, 04) the way an editorial would set a long-form catalog.
 * ========================================================================= */

.bwc-services-practice {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bwc-services-practice + .bwc-services-practice {
	border-block-start: 1px solid var(--bwc-accent-gold-hairline);
}

.bwc-services-practice > .bwc-container {
	position: relative;
	z-index: 1;
}

/* --- 3a. Decor modifiers ----------------------------------------------- */

.bwc-services-practice--glow-top::before {
	content: '';
	position: absolute;
	inset-block-start: -10rem;
	inset-inline-end: -10rem;
	inline-size: 48rem;
	block-size: 48rem;
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--bwc-accent-gold) 12%, transparent) 0%,
		color-mix(in srgb, var(--bwc-accent-gold) 4%, transparent) 35%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

.bwc-services-practice--glow-bottom::before {
	content: '';
	position: absolute;
	inset-block-end: -12rem;
	inset-inline-start: -10rem;
	inline-size: 50rem;
	block-size: 50rem;
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--bwc-accent-gold) 10%, transparent) 0%,
		color-mix(in srgb, var(--bwc-accent-gold) 3%, transparent) 35%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

.bwc-services-practice--matrix::before {
	/* Dot matrix variant — anchored bottom-right, 12 cols × 20 rows on
	 * 1.5rem grid. Smaller than the Services-home matrix on purpose; the
	 * practice content is already dense, the matrix is supporting
	 * texture, not the protagonist. */
	content: '';
	position: absolute;
	inset-block-end: -6rem;
	inset-inline-end: clamp(1rem, 4vw, 4rem);
	inline-size: 18rem;
	block-size: 30rem;
	pointer-events: none;
	z-index: 0;

	background-image:
		radial-gradient(circle at 3.75rem 5.25rem,  var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 12.75rem 8.25rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 6.75rem 18.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 14.25rem 24.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 9.75rem 27.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at center, rgba(245, 241, 232, 0.14) 2px, transparent 3px);
	background-size:
		100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
		1.5rem 1.5rem;
	background-repeat:
		no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
		repeat;
}

@media (max-width: 767px) {
	.bwc-services-practice--matrix::before {
		display: none;
	}
}

/* --- 3b. Practice header + body ---------------------------------------- */

.bwc-services-practice__header {
	max-inline-size: 72ch;
	margin-block-end: var(--bwc-space-6);
}

.bwc-services-practice__num {
	font-family: var(--bwc-font-mono);
	font-size: var(--bwc-fs-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bwc-accent-gold);
}

.bwc-services-practice__title {
	margin-block-start: var(--bwc-space-1);
	font-size: var(--bwc-fs-3xl);
	line-height: 1.1;
}

.bwc-services-practice__tagline {
	margin-block-start: var(--bwc-space-2);
	color: var(--bwc-text);
	font-family: var(--bwc-font-display);
	font-size: var(--bwc-fs-lg);
	font-weight: 460;
	line-height: 1.4;
	font-style: italic;
}

.bwc-services-practice__lede {
	margin-block-start: var(--bwc-space-3);
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-base);
	line-height: 1.6;
}

.bwc-services-practice__body {
	row-gap: var(--bwc-space-5);
	align-items: start;
}

.bwc-services-practice__subhead {
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bwc-text);
	margin: 0 0 var(--bwc-space-3);
}

.bwc-services-practice__deliverables ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bwc-space-2);
}

.bwc-services-practice__deliverables li {
	display: flex;
	align-items: baseline;
	gap: var(--bwc-space-2);
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-base);
	line-height: 1.5;
	color: var(--bwc-text);
}

.bwc-services-practice__bullet {
	flex: 0 0 auto;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	background-color: var(--bwc-accent-gold);
	border-radius: 999px;
	transform: translateY(-0.1em);
}

.bwc-services-practice__meta {
	display: flex;
	flex-direction: column;
	gap: var(--bwc-space-4);
}

.bwc-services-practice__meta-block {
	display: block;
}

.bwc-services-practice__frameworks-note {
	margin: 0 0 var(--bwc-space-2);
	color: var(--bwc-text-muted);
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-sm);
	line-height: 1.5;
}

.bwc-services-practice__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bwc-space-1);
}

.bwc-services-chip {
	display: inline-block;
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--bwc-text);
	background-color: rgba(245, 241, 232, 0.04);
	border: 1px solid rgba(245, 241, 232, 0.10);
	padding-block: 0.375rem;
	padding-inline: 0.75rem;
	border-radius: 4px; /* inline per components.css convention for institutional small-chip */
}

.bwc-services-practice__audience {
	color: var(--bwc-text-muted);
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-base);
	line-height: 1.5;
	margin: 0;
}

.bwc-services-practice__cta {
	align-self: flex-start;
	margin-block-start: var(--bwc-space-2);
	padding-block: 0.875rem;
	padding-inline: 1.5rem;
	font-size: var(--bwc-fs-base);
}

/* ===========================================================================
 * 4. METHOD — "Mandates, not tickets" 2×2 grid.
 *    Numbered principles (01–04), large Fraunces number + heading + body.
 *    Each item gets a hairline top border so the 4 items read as
 *    catalog entries, not floating tiles.
 * ========================================================================= */

.bwc-services-method {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bwc-services-method::before {
	content: '';
	position: absolute;
	inset-block-start: -10rem;
	inset-inline-end: -10rem;
	inline-size: 52rem;
	block-size: 52rem;
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--bwc-accent-gold) 12%, transparent) 0%,
		color-mix(in srgb, var(--bwc-accent-gold) 4%, transparent) 35%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

.bwc-services-method > .bwc-container {
	position: relative;
	z-index: 1;
}

.bwc-services-method__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: var(--bwc-space-5);
}

.bwc-services-method__item {
	padding-block-start: var(--bwc-space-3);
	border-block-start: 1px solid var(--bwc-accent-gold-hairline);
}

.bwc-services-method__num {
	display: block;
	font-family: var(--bwc-font-mono);
	font-size: var(--bwc-fs-xs);
	letter-spacing: 0.18em;
	color: var(--bwc-accent-gold);
}

.bwc-services-method__heading {
	margin-block-start: var(--bwc-space-2);
	font-family: var(--bwc-font-display);
	font-size: var(--bwc-fs-xl);
	font-weight: 480;
	line-height: 1.2;
	color: var(--bwc-text);
}

.bwc-services-method__body {
	margin-block-start: var(--bwc-space-2);
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-base);
	line-height: 1.55;
}

/* ===========================================================================
 * 5. FINALE — centered closing CTA. Same pattern as home Finale, scoped
 *    with its own class so future tuning doesn't bleed across pages.
 * ========================================================================= */

.bwc-services-finale {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bwc-services-finale::before {
	content: '';
	position: absolute;
	inset-block-start: -8rem;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: 56rem;
	block-size: 44rem;
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--bwc-accent-gold) 12%, transparent) 0%,
		color-mix(in srgb, var(--bwc-accent-gold) 3%, transparent) 40%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

.bwc-services-finale > .bwc-container {
	position: relative;
	z-index: 1;
}

.bwc-services-finale__inner {
	max-inline-size: 56ch;
	margin-inline: auto;
	text-align: center;
}

.bwc-services-finale__inner > * + * {
	margin-block-start: var(--bwc-space-3);
}

.bwc-services-finale__lede {
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-lg);
	line-height: 1.5;
}

.bwc-services-finale__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bwc-space-2);
	margin-block-start: var(--bwc-space-5);
}