/*
 * BlinkWorx — School Digital Marketing landing page.
 * Scoped under .bw-page (the bw-blocks template wrapper). Loads only on that template.
 * Brand tokens mirror the sitewide Customizer values: #F37068 / #1778F2 / Jost.
 */

.bw-page {
	--bw-pink: #F37068;
	--bw-pink-dk: #E2544B;
	--bw-blue: #1778F2;
	--bw-blue-dk: #0B57C4;
	--bw-ink: #16181D;
	--bw-body: #4A4F5A;
	--bw-line: #E6E8EE;
	--bw-surface: #F6F8FB;
	--bw-surface-2: #EEF3FB;
	--bw-navy: #101725;
	/* Highlight block takes the brand pink the buttons used to carry. Its text is
	   ink rather than white: white on #F37068 is 2.9:1 and fails, ink on #F37068
	   is 6.3:1 and passes comfortably - and reads as a true highlighter besides. */
	--bw-pill: #F37068;
	--bw-radius: 14px;
	--bw-radius-lg: 22px;
	--bw-shadow: 0 1px 2px rgba(16, 23, 37, .04), 0 12px 32px rgba(16, 23, 37, .07);
	--bw-shadow-lg: 0 2px 4px rgba(16, 23, 37, .05), 0 24px 60px rgba(16, 23, 37, .12);
	--bw-max: 1180px;

	font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--bw-body);
	font-size: 17px;
	line-height: 1.65;
	overflow-x: hidden;
}

.bw-page *, .bw-page *::before, .bw-page *::after { box-sizing: border-box; }
.bw-page img { max-width: 100%; height: auto; display: block; }

/*
 * Smooth scroll for the in-page audit links. Scoped with :has() so it applies only
 * on this template and never changes scrolling anywhere else on the site.
 * scroll-margin-top keeps the form clear of the sticky Divi header on arrival.
 */
html:has(body.page-template-bw-blocks) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html:has(body.page-template-bw-blocks) { scroll-behavior: auto; }
}
.bw-page #school-audit, #school-audit { scroll-margin-top: 96px; }

/* ---------- layout ---------- */
.bw-page > * { max-width: var(--bw-max); margin-left: auto; margin-right: auto; }
.bw-page > .alignwide { max-width: 1320px; }
.bw-page > .alignfull { max-width: none; width: 100%; margin-left: 0; margin-right: 0; }

.bw-sec { padding: 72px 20px; }
.bw-sec > * { max-width: var(--bw-max); margin-left: auto; margin-right: auto; }
.bw-sec--tight { padding-top: 48px; padding-bottom: 48px; }
.bw-sec--surface { background: var(--bw-surface); }
.bw-sec--tinted { background: linear-gradient(180deg, #FFF 0%, var(--bw-surface-2) 100%); }
.bw-sec--navy { background: var(--bw-navy); color: #C8D0E0; }

/*
 * Lit variant: two ambient washes behind a darker ground. Pseudo-elements rather
 * than an image, so it costs nothing to load. Content is lifted above them.
 */
.bw-sec--lit { background: #0C1220; position: relative; overflow: hidden; }
.bw-sec--lit::before, .bw-sec--lit::after { content: ''; position: absolute; pointer-events: none; }
.bw-sec--lit::before {
	top: -35%; left: -8%; width: 62%; height: 130%;
	background: radial-gradient(circle, rgba(243, 112, 104, .20), transparent 62%);
}
.bw-sec--lit::after {
	top: -28%; right: -12%; width: 62%; height: 130%;
	background: radial-gradient(circle, rgba(23, 120, 242, .20), transparent 62%);
}
.bw-sec--lit > * { position: relative; z-index: 1; }

/* ---------- type ---------- */
.bw-page h1, .bw-page h2, .bw-page h3, .bw-page h4 {
	color: var(--bw-ink); font-weight: 600; line-height: 1.18; letter-spacing: -.02em; margin: 0 0 .5em;
	/* even line lengths instead of a long first line and one orphaned word */
	text-wrap: balance;
}
.bw-sec--navy h2, .bw-sec--navy h3, .bw-sec--navy h4 { color: #fff; }

/*
 * Heading phrase emphasis - solid pill.
 * box-decoration-break: clone is load-bearing, not cosmetic: without it a phrase
 * that wraps gets the fill on its first line and nothing on the second. Headings
 * carrying a pill also get extra leading so stacked pills do not touch.
 */
.bw-page .bw-em {
	background: var(--bw-pill);
	/* White on #F37068 measures 2.9:1 and does not meet WCAG AA. Set on request -
	   darkening the fill to about #C0453C would keep this look and reach 4.95:1. */
	color: #fff;
	padding: .06em .32em .14em;
	/* a block, not a pill - squared enough to read as a highlight */
	border-radius: 6px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.bw-sec--navy .bw-em, .bw-audit .bw-em { color: #fff; }
.bw-page h1:has(.bw-em), .bw-page h2:has(.bw-em) { line-height: 1.34; }

.bw-h1 { font-size: clamp(2rem, 5.2vw, 3.35rem); font-weight: 700; letter-spacing: -.033em; }
.bw-h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.bw-h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); }

.bw-eyebrow {
	display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .13em;
	text-transform: uppercase; color: var(--bw-pink); margin: 0 0 14px;
}
.bw-sec--navy .bw-eyebrow { color: #FF9A8F; }

/*
 * Divi dequeues WordPress's core block stylesheet (et_dequeue_block_css, and the
 * divi_defer_block_css option is on), so block-library/style.min.css never loads
 * and the editor's own alignment classes do nothing. Anything relying on
 * has-text-align-* silently falls back to left. Define them here so the block
 * editor's alignment control actually works on this template.
 */
.bw-page .has-text-align-center { text-align: center; }
.bw-page .has-text-align-left { text-align: left; }
.bw-page .has-text-align-right { text-align: right; }

.bw-lede { font-size: clamp(1.02rem, 1.6vw, 1.17rem); max-width: 70ch; margin: 0 0 8px; text-wrap: pretty; }
.bw-center { text-align: center; }
.bw-center .bw-lede { margin-left: auto; margin-right: auto; }

/* Section heads take the full container width. Headings and body copy want
   different measures: a heading reads fine at 1180px and several on this page sit
   just over 1000px at their cap, so a narrower box tipped them onto a second line
   for no reason. The lede is constrained separately - body copy set to 1180px
   would run past 110 characters a line and get harder to read, not easier. */
.bw-head { max-width: var(--bw-max); margin: 0 auto 50px; }
.bw-head .bw-h2, .bw-head .bw-h1 { max-width: none; }
.bw-head .bw-lede { max-width: 80ch; margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.bw-page .bw-btns { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 0; }
.bw-center .bw-btns { justify-content: center; }

.bw-page .bw-btn > a,
.bw-page a.bw-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	/* 1.12rem at 700 clears 18.66px bold, which is WCAG's "large text" threshold.
	   That drops the required contrast from 4.5:1 to 3:1 and lets the button carry
	   the exact logo blue (4.23:1) rather than a darkened stand-in. */
	padding: 17px 34px; border-radius: 999px; font-weight: 700; font-size: 1.12rem;
	text-decoration: none; line-height: 1.2; border: 2px solid transparent;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
	min-height: 56px; text-align: center;
}
/*
 * Primary buttons carry the logo blue. Sampled from BlinkWorx-Logo.webp, the mark's
 * dominant colour is #1878F0 across 2,366 px - effectively the --bw-blue token
 * already in this palette. Hover darkens to --bw-blue-dk.
 */
.bw-page .bw-btn--primary > a, .bw-page a.bw-btn--primary {
	background: var(--bw-blue); color: #fff; box-shadow: 0 8px 22px rgba(23, 120, 242, .30);
}
.bw-page .bw-btn--primary > a:hover, .bw-page a.bw-btn--primary:hover {
	background: var(--bw-blue-dk); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(23, 120, 242, .40);
}
.bw-page .bw-btn--wa > a, .bw-page a.bw-btn--wa {
	background: #fff; color: #0F7C47; border-color: #CDE9DA;
}
.bw-page .bw-btn--wa > a:hover, .bw-page a.bw-btn--wa:hover { background: #F1FAF5; border-color: #25D366; transform: translateY(-2px); }
.bw-page .bw-btn--ghost > a, .bw-page a.bw-btn--ghost {
	background: transparent; color: var(--bw-blue); border-color: #C7DCFB;
}
.bw-page .bw-btn--ghost > a:hover, .bw-page a.bw-btn--ghost:hover { background: #F2F7FF; border-color: var(--bw-blue); }
.bw-sec--navy .bw-btn--ghost > a { color: #fff; border-color: rgba(255,255,255,.28); }
.bw-sec--navy .bw-btn--ghost > a:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* ---------- hero ---------- */
.bw-hero { padding: 64px 20px 76px; background: linear-gradient(168deg, #FFF 0%, #FDF3F2 42%, #EEF4FE 100%); }
.bw-hero__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.bw-hero .bw-lede { font-size: clamp(1.05rem, 1.8vw, 1.2rem); }
.bw-hero__note { font-size: .93rem; color: #6B7280; margin: 20px 0 0; }

/* Hero image is the LCP element: never lazy-loaded, and the 4:3 box is reserved
   by width/height on the tag so nothing shifts while it decodes. */
.bw-hero__img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	border-radius: 20px;
	display: block;
}

/*
 * Trust row: tinted chips, each with a colour-matched dot. Tints are the palest
 * step of each hue so ink text stays well above AA on all three.
 */
.bw-trust { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.bw-trust li {
	display: flex; align-items: center; gap: 9px;
	background: #FDECEA; border: 0; border-radius: 9px;
	padding: 9px 16px; font-size: .88rem; font-weight: 600; color: var(--bw-ink);
}
.bw-trust li::before {
	content: ''; width: 7px; height: 7px; border-radius: 50%;
	background: var(--bw-pink); flex: none;
}
.bw-trust li:nth-child(2) { background: #E8F1FE; }
.bw-trust li:nth-child(2)::before { background: var(--bw-blue); }
.bw-trust li:nth-child(3) { background: #EAF6EF; }
.bw-trust li:nth-child(3)::before { background: #17A35C; }

/*
 * Why BlinkWorx - anchored statement.
 * The claim and CTA hold a fixed left column; the six points read as a ruled list.
 * Card chrome is gone, so the section is shorter and the rules carry the rhythm.
 */
.bw-why { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.bw-why__lead .bw-h2 { text-align: left; }
.bw-why__lead .bw-lede { max-width: 34ch; margin: 0; }
.bw-why__lead .bw-btns { margin-top: 28px; }

.bw-why__row {
	display: grid; grid-template-columns: 1fr; gap: 6px;
	padding: 22px 0; border-top: 1px solid var(--bw-line);
}
.bw-why__row:last-child { border-bottom: 1px solid var(--bw-line); }
.bw-why__row h3 { margin: 0; font-size: 1.08rem; line-height: 1.35; }
.bw-why__row p { margin: 0; font-size: .97rem; line-height: 1.6; }
.bw-why__row a { color: var(--bw-blue); text-decoration: underline; text-underline-offset: 2px; }
.bw-why__row a:hover { color: var(--bw-blue-dk); }

/* ---------- grids & cards ---------- */
.bw-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
.bw-grid--2 { grid-template-columns: 1fr; }
.bw-grid--3 { grid-template-columns: 1fr; }
.bw-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }

.bw-card {
	background: #fff; border: 1px solid var(--bw-line); border-radius: var(--bw-radius);
	padding: 28px 26px; box-shadow: var(--bw-shadow); height: 100%;
}
.bw-card h3 { margin-bottom: .35em; }
.bw-card p:last-child { margin-bottom: 0; }
.bw-card__ico {
	width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center;
	justify-content: center; font-size: 1.35rem; margin-bottom: 16px;
	background: #FDEEEC; color: var(--bw-pink);
}
.bw-card--blue .bw-card__ico { background: #E8F1FE; color: var(--bw-blue); }
/*
 * Outcomes: editorial numerals, no card chrome. The numeral is decorative and
 * aria-hidden in the markup - it is a list marker, not information, so it must not
 * be announced as part of the heading.
 */
.bw-out { display: grid; grid-template-columns: 1fr; gap: 34px 30px; }
.bw-out__i { position: relative; padding-top: 14px; }
.bw-out__n {
	position: absolute; left: -3px; top: -16px;
	font-size: 3.5rem; font-weight: 700; line-height: 1; letter-spacing: -.045em;
	color: rgba(255, 255, 255, .075);
}
.bw-out__i h3 { position: relative; margin-bottom: .42em; }
.bw-out__i p { position: relative; margin: 0; font-size: .97rem; color: #B8C3D6; }
.bw-out__i::after {
	content: ''; position: absolute; left: 0; bottom: -15px;
	width: 34px; height: 2px;
	background: linear-gradient(90deg, var(--bw-pink), transparent);
}

/*
 * Channel strip (section 2).
 * Each card carries a miniature of that channel's own interface, drawn in CSS so
 * it costs no requests, plus that platform's colour as an accent. The fragments
 * are decorative and aria-hidden; the visible label is the real content.
 * --ch is set per card in the markup.
 */
/* margin-inline must stay auto: .bw-sec > * centres each child, and a
   `margin: 34px 0 0` shorthand here would silently knock the strip left. */
.bw-chan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 36px auto 0; }

/* Tinted band so the section reads as its own beat between the hero and the portfolio. */
.bw-sec--channels {
	background:
		radial-gradient(circle at 12% 0%, rgba(243, 112, 104, .10), transparent 46%),
		radial-gradient(circle at 88% 8%, rgba(23, 120, 242, .10), transparent 44%),
		linear-gradient(180deg, #FCFDFF 0%, #EDF3FC 100%);
}

.bw-ch {
	background: #fff; border: 1px solid var(--bw-line); border-radius: 14px;
	overflow: hidden; box-shadow: var(--bw-shadow);
	border-top: 3px solid var(--ch, var(--bw-pink));
	transition: transform .18s ease, box-shadow .18s ease;
}
.bw-ch:hover { transform: translateY(-3px); box-shadow: var(--bw-shadow-lg); }

.bw-ch__ui {
	height: 86px; margin: 12px 12px 0; padding: 9px;
	background: #FAFBFD; border: 1px solid #EDF0F5; border-radius: 8px;
	display: flex; flex-direction: column; overflow: hidden;
}
/* each fragment washed in its own platform colour; plain values above are the fallback */
.bw-ch__ui {
	background: color-mix(in srgb, var(--ch) 7%, #FFFFFF);
	border-color: color-mix(in srgb, var(--ch) 20%, #FFFFFF);
}
.bw-ch__ui.is-map { align-items: center; }

.bw-ch__ui .u-ln { display: block; height: 4px; border-radius: 2px; background: #E3E8F0; margin-bottom: 5px; }
.bw-ch__ui.is-map .u-ln { background: #CFDECD; }

.u-bar {
	display: block; height: 13px; border-radius: 7px; margin-bottom: 8px;
	background: #fff; border: 1px solid #DCE3EC;
	box-shadow: inset -13px 0 0 -8px var(--ch);
}
.u-img { display: block; height: 30px; border-radius: 5px; background: #DEE6F1; margin-bottom: 7px; }
.u-cover { display: block; height: 18px; border-radius: 5px; background: var(--ch); opacity: .9; margin-bottom: 8px; }
.u-acts { display: flex; gap: 4px; margin-bottom: 7px; }
.u-acts .u-dot { width: 9px; height: 9px; border-radius: 3px; background: #E3E8F0; }
.u-acts .u-dot.is-on { background: var(--ch); }
.u-chrome { display: flex; gap: 3px; margin-bottom: 8px; }
.u-chrome i { width: 5px; height: 5px; border-radius: 50%; background: #DCE3EC; }
.u-chrome i:first-child { background: var(--ch); }
.u-pin {
	display: block; width: 15px; height: 15px; margin: 6px 0 10px;
	border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--ch);
}
.bw-ch__ui.is-map .u-ln { width: 76%; }

.bw-ch__l {
	margin: 0; padding: 13px 10px 15px; text-align: center;
	font-size: .9rem; font-weight: 600; color: var(--bw-ink); line-height: 1.35;
	text-wrap: balance;
}
/* the platform mark replaces the coloured dot */
.bw-ch__l { display: flex; align-items: center; justify-content: center; gap: 8px; }
.bw-ch__logo { width: 18px; height: 18px; flex: none; line-height: 0; }
.bw-ch__logo svg { width: 100%; height: 100%; display: block; }

/* ---------- portfolio gallery ---------- */
.bw-gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.bw-gal figure {
	margin: 0; border-radius: var(--bw-radius); overflow: hidden; background: #fff;
	border: 1px solid var(--bw-line); box-shadow: var(--bw-shadow); position: relative;
}
/* 4:5 — matches the portrait ratio the real creatives are produced at. */
.bw-gal .bw-ph, .bw-gal img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.bw-gal figcaption {
	padding: 12px 14px; font-size: .88rem; font-weight: 500; color: var(--bw-ink);
	border-top: 1px solid var(--bw-line); background: #fff;
}

/* ---------- carousel tiles ---------- */
.bw-car__stage { position: relative; line-height: 0; }
.bw-car__stage img { transition: opacity .12s ease; }

.bw-car__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(255, 255, 255, .93); color: var(--bw-ink);
	font-size: 1.15rem; line-height: 1; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 10px rgba(16, 23, 37, .22); opacity: 0;
	transition: opacity .18s ease, background-color .18s ease;
	padding: 0 0 2px;
}
.bw-car__prev { left: 8px; }
.bw-car__next { right: 8px; }
.bw-gal figure:hover .bw-car__nav,
.bw-car__nav:focus-visible { opacity: 1; }
.bw-car__nav:hover { background: #fff; }
/* touch devices have no hover, so the controls stay visible */
@media (hover: none) {
	.bw-car__nav { opacity: 1; }
}

.bw-car__badge {
	position: absolute; top: 9px; right: 9px;
	background: rgba(16, 23, 37, .72); color: #fff;
	font-size: .68rem; font-weight: 600; letter-spacing: .02em;
	padding: 3px 8px; border-radius: 999px; line-height: 1.4;
}

.bw-car__dots {
	display: flex; gap: 5px; justify-content: center; align-items: center;
	padding: 9px 0 0; background: #fff;
}
.bw-car__dots i {
	width: 5px; height: 5px; border-radius: 50%; background: #D3D9E3;
	transition: background-color .18s ease, transform .18s ease;
}
.bw-car__dots i.is-on { background: var(--bw-pink); transform: scale(1.35); }

.bw-car__live {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* the brand set is taller than 4:5 - contain it so its layout is never cropped */
.bw-gal figure.bw-car--tall img { object-fit: contain; background: #fff; }

/* gallery footer line, carrying the route into the audit form */
.bw-galcta {
	margin: 32px auto 0; max-width: 72ch; text-align: center;
	font-size: .98rem; color: var(--bw-body); line-height: 1.6; text-wrap: pretty;
}

/*
 * Inside the gallery the CTA becomes a grid item, filling the empty slots the
 * 10 tiles leave on the last row instead of sitting in dead space below them.
 * span 2 works at every breakpoint: 10 tiles leave 2 free columns at 4-across
 * and at 3-across, and at 2-across it simply takes a row of its own.
 */
.bw-gal .bw-galcta {
	grid-column: span 2;
	margin: 0;
	max-width: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 26px 28px;
	background: rgba(255, 255, 255, .72);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius);
	font-size: 1rem;
}

/*
 * Same treatment in the reels grid. 13 tiles - one of them spanning two columns -
 * fill 14 cells, which leaves exactly one free slot on the last row at 5 and at 3
 * across. align-self:center keeps the panel compact rather than stretching it to
 * the height of a 9:16 video tile.
 */
.bw-reels .bw-galcta {
	grid-column: 1 / -1;
	/* stretch, not centre: the panel fills its cell so it matches the height of the
	   9:16 video tiles beside it and the row reads as one even grid */
	align-self: stretch;
	margin: 0;
	max-width: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 22px 18px;
	background: var(--bw-surface);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius);
	font-size: .95rem;
	text-wrap: pretty;
}
.bw-galcta a {
	color: var(--bw-pink); font-weight: 600;
	text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.bw-galcta a:hover { color: var(--bw-pink-dk); }

/* placeholder tile — deliberately obvious, replaced with real creatives */
.bw-ph {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	background:
		repeating-linear-gradient(135deg, #F2F5FA 0 12px, #EAEFF7 12px 24px);
	color: #8A93A6; text-align: center; padding: 18px; font-size: .82rem; font-weight: 500;
}
.bw-ph strong { display: block; color: #5C6478; font-size: .95rem; font-weight: 600; }
.bw-ph::after {
	content: 'PLACEHOLDER'; font-size: .62rem; letter-spacing: .12em; font-weight: 700;
	background: #DDE3EE; color: #6B7488; padding: 3px 9px; border-radius: 999px;
}

/* ---------- reels ---------- */
.bw-reels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.bw-reels figure { margin: 0; }
.bw-reels .bw-ph, .bw-reels iframe {
	aspect-ratio: 9 / 16; width: 100%; border-radius: var(--bw-radius); border: 1px solid var(--bw-line);
	box-shadow: var(--bw-shadow); background: #0F1421; display: block;
}
.bw-reels iframe { border: 0; }
.bw-reels figcaption { font-size: .88rem; margin-top: 10px; text-align: center; color: var(--bw-body); }

/*
 * Video facade. The poster is a lazy-loaded <img>; the <video> element is only
 * created on click. Zero video bytes are fetched until a visitor asks for them,
 * and posters below the fold cost nothing on load.
 */
.bw-vid { margin: 0; position: relative; }
.bw-vid__btn {
	display: block; width: 100%; padding: 0; border: 1px solid var(--bw-line); cursor: pointer;
	border-radius: var(--bw-radius); overflow: hidden; background: #0F1421; position: relative;
	box-shadow: var(--bw-shadow); line-height: 0;
}
.bw-vid__btn img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
.bw-vid--wide .bw-vid__btn img, .bw-vid--wide video { aspect-ratio: 16 / 9; }
.bw-vid__play {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(180deg, rgba(10,14,22,.05) 0%, rgba(10,14,22,.42) 100%);
	transition: background-color .2s ease;
}
.bw-vid__play::before {
	content: ''; width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.94);
	box-shadow: 0 6px 20px rgba(0,0,0,.28);
	/* CSS-only play triangle, so no icon font or SVG request */
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	background-image: linear-gradient(transparent, transparent);
	position: relative;
}
.bw-vid__play::after {
	content: ''; position: absolute; width: 0; height: 0;
	border-left: 18px solid var(--bw-pink); border-top: 11px solid transparent;
	border-bottom: 11px solid transparent; margin-left: 5px;
}
.bw-vid__btn:hover .bw-vid__play { background: linear-gradient(180deg, rgba(10,14,22,0) 0%, rgba(10,14,22,.3) 100%); }
.bw-vid__btn:focus-visible { outline: 3px solid rgba(23,120,242,.5); outline-offset: 3px; }
.bw-vid video {
	width: 100%; aspect-ratio: 9 / 16; display: block; border-radius: var(--bw-radius);
	border: 1px solid var(--bw-line); background: #0F1421; box-shadow: var(--bw-shadow);
}
.bw-vid figcaption { font-size: .88rem; margin-top: 10px; text-align: center; color: var(--bw-body); }

/* the one landscape clip spans two columns so it is not letterboxed into a 9:16 slot */
@media (min-width: 700px) { .bw-vid--wide { grid-column: span 2; } }

/* .bw-vidnote removed - the reels section now uses .bw-galcta, same as the gallery,
   so both proof sections route to the audit form in the same voice. */

/*
 * Before / after: one row card per example.
 * The pair sits left at ~225px each - small enough to fit notes beside it, large
 * enough that a dense poster is still legible. Below that width these creatives
 * stop showing the craft they exist to show.
 */
.bw-rows { display: grid; gap: 18px; }

.bw-row {
	background: #fff; border: 1px solid var(--bw-line); border-radius: var(--bw-radius-lg);
	box-shadow: var(--bw-shadow); padding: 16px;
	display: grid; grid-template-columns: 1fr; gap: 18px;
}

.bw-row__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* figcaption sits first in the markup so the label renders as a header bar above
   the creative. Valid HTML - the spec allows figcaption as first or last child. */
.bw-row__pair figure {
	margin: 0; border-radius: 10px; overflow: hidden;
	border: 1px solid var(--bw-line);
}
.bw-row__pair figcaption {
	padding: 9px 10px; text-align: center;
	font-size: .69rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	line-height: 1.3;
}
.bw-row__pair figure:first-child figcaption { background: #F1F3F7; color: #6B7280; }
.bw-row__pair figure:last-child figcaption { background: var(--bw-pink); color: #fff; }
.bw-row__pair img {
	width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
}

.bw-row__notes h3 { font-size: 1.14rem; margin: 0 0 12px; }

/* Key row. Attributes each mark to its side, so the × and ✓ are not left to be
   inferred from position alone. Tracks the same columns as the list below it. */
.bw-row__key {
	display: grid; grid-template-columns: 1fr; gap: 5px;
	padding-bottom: 11px; border-bottom: 1px solid var(--bw-line); margin-bottom: 4px;
}
.bw-row__key span {
	position: relative; padding-left: 23px;
	font-size: .71rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	line-height: 1.4;
}
.bw-row__key .k-x { color: #8A93A6; }
.bw-row__key .k-x::before {
	content: '×'; position: absolute; left: 4px; top: -4px;
	color: #A9B0BE; font-weight: 700; font-size: 1.05rem;
}
.bw-row__key .k-y { color: var(--bw-pink); }
.bw-row__key .k-y::before {
	content: '✓'; position: absolute; left: 3px; top: -1px;
	color: #17A35C; font-weight: 700; font-size: .9rem;
}

.bw-row__notes ul { list-style: none; margin: 0; padding: 0; }

/* each row of the list is one problem paired with its fix, so the comparison
   reads across rather than as two disconnected lists */
.bw-row__notes li {
	display: grid; grid-template-columns: 1fr; gap: 5px;
	padding: 10px 0; border-top: 1px solid #F0F2F6;
}
.bw-row__notes li:first-child { border-top: 0; padding-top: 0; }
.bw-row__notes .is-x, .bw-row__notes .is-y {
	position: relative; padding-left: 23px; font-size: .93rem; line-height: 1.45;
}
.bw-row__notes .is-x { color: #7A8290; }
.bw-row__notes .is-x::before {
	content: '×'; position: absolute; left: 4px; top: -2px; color: #A9B0BE;
	font-weight: 700; font-size: 1.05rem;
}
.bw-row__notes .is-y { color: var(--bw-ink); }
.bw-row__notes .is-y::before {
	content: '✓'; position: absolute; left: 3px; top: 0; color: #17A35C;
	font-weight: 700; font-size: .92rem;
}

/* ---------- steps ---------- */
.bw-steps { counter-reset: s; display: grid; grid-template-columns: 1fr; gap: 18px; }
.bw-steps > div {
	position: relative; padding: 24px 24px 24px 74px; background: #fff;
	border: 1px solid var(--bw-line); border-radius: var(--bw-radius); box-shadow: var(--bw-shadow);
}
.bw-steps > div::before {
	counter-increment: s; content: counter(s, decimal-leading-zero);
	position: absolute; left: 24px; top: 24px; font-weight: 700; font-size: 1.05rem;
	color: var(--bw-pink); background: #FDEEEC; width: 34px; height: 34px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
}
.bw-steps h3 { margin-bottom: .2em; font-size: 1.1rem; }
.bw-steps p { margin: 0; font-size: .96rem; }

/* ---------- case studies ---------- */
.bw-cs { display: grid; grid-template-columns: 1fr; gap: 22px; }
.bw-cs article {
	background: #fff; border: 1px solid var(--bw-line); border-radius: var(--bw-radius-lg);
	overflow: hidden; box-shadow: var(--bw-shadow); display: flex; flex-direction: column;
}

/* evidence strip - the client's own creatives, butted together as one band */
.bw-cs__shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--bw-line); }
.bw-cs__shots--two { grid-template-columns: repeat(2, 1fr); }
.bw-cs__shots img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

.bw-cs__body { padding: 24px 24px 26px; }
.bw-cs__kind { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bw-blue); }
.bw-cs__body h3 { font-size: 1.2rem; margin: 8px 0 0; }
.bw-cs dl { margin: 16px 0 0; }
.bw-cs dt { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A93A6; margin-top: 15px; }
.bw-cs dd { margin: 4px 0 0; font-size: .96rem; line-height: 1.6; }
.bw-cs dd a { color: var(--bw-blue); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- testimonials ---------- */
.bw-quotes { display: grid; grid-template-columns: 1fr; gap: 20px; }
.bw-quote {
	background: #fff; border: 1px solid var(--bw-line); border-left: 4px solid var(--bw-pink);
	border-radius: var(--bw-radius); padding: 26px 26px 22px; box-shadow: var(--bw-shadow);
}
.bw-quote p { font-size: 1.02rem; color: var(--bw-ink); margin: 0 0 16px; }
.bw-quote footer { font-size: .9rem; color: #7A8290; }

/* ---------- chips ---------- */
/*
 * A grid, not a wrapping flex row. Eight items in a centred flex row break 7 + 1
 * and strand the last one on its own line; four columns divide the eight evenly
 * into two rows. margin-inline stays auto - a `margin: 0` shorthand here knocks
 * the whole set to the left of the section.
 */
.bw-chips {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
	margin: 32px auto 0; padding: 0; list-style: none; max-width: 1020px;
}
.bw-chips li {
	background: #fff; border: 1px solid var(--bw-line); border-radius: 999px;
	padding: 15px 18px; text-align: center;
	font-weight: 500; color: var(--bw-ink); box-shadow: var(--bw-shadow);
	font-size: 1.01rem; line-height: 1.35;
	display: flex; align-items: center; justify-content: center;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bw-chips li:hover {
	transform: translateY(-2px); box-shadow: var(--bw-shadow-lg);
	border-color: rgba(243, 112, 104, .45);
}

/* ---------- audit form ---------- */
.bw-audit { background: linear-gradient(160deg, var(--bw-navy) 0%, #1B2740 100%); color: #C3CBDA; }
.bw-audit .bw-h2, .bw-audit h3 { color: #fff; }

/* stretch, not start: both columns become equal-height panels so the section
   reads as a matched pair rather than a short block beside a tall card */
.bw-audit__grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: stretch; }

/* left panel mirrors the form card's shape and weight without competing with it */
.bw-audit__intro {
	display: flex; flex-direction: column; justify-content: center;
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--bw-radius-lg);
	padding: 34px 30px;
}
.bw-audit__intro .bw-h2 { font-size: clamp(1.85rem, 3.9vw, 2.65rem); margin-bottom: .45em; }
.bw-audit__intro .bw-lede { font-size: 1.1rem; line-height: 1.62; max-width: 46ch; }

.bw-audit__list { list-style: none; padding: 0; margin: 26px 0 0; }
.bw-audit__list li {
	position: relative; padding-left: 36px; margin-bottom: 14px;
	font-size: 1.03rem; line-height: 1.5; color: #D3DAE6;
}
.bw-audit__list li::before {
	content: '✓'; position: absolute; left: 0; top: 1px; color: #fff;
	background: rgba(243, 112, 104, .9);
	width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center;
	justify-content: center; font-size: .78rem; font-weight: 700;
}

.bw-formcard {
	background: #fff; border-radius: var(--bw-radius-lg); padding: 30px 26px;
	box-shadow: var(--bw-shadow-lg); display: flex; flex-direction: column; justify-content: center;
}
.bw-formcard h3 { font-size: 1.42rem; margin-bottom: .35em; }
.bw-formcard > p { font-size: 1rem; color: #6B7280; margin-bottom: 20px; line-height: 1.55; }

/* Formidable overrides, scoped so no other form on the site is affected */
.bw-page .bw-audit-form .frm_form_field { margin-bottom: 13px; }
/*
 * Labels are visually hidden, not removed. The placeholder carries the visible
 * name, but a placeholder disappears the moment someone types and is not reliably
 * announced by screen readers - so the real label stays in the DOM for assistive
 * tech and for the input's accessible name.
 */
.bw-page .bw-audit-form label.frm_primary_label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.bw-page .bw-audit-form input[type=text],
.bw-page .bw-audit-form input[type=email],
.bw-page .bw-audit-form input[type=tel],
.bw-page .bw-audit-form input[type=url] {
	width: 100%; padding: 12px 14px; border: 1px solid #D6DBE5; border-radius: 10px;
	font-family: inherit; font-size: 16px; /* 16px stops iOS zoom-on-focus */
	color: var(--bw-ink); background: #FCFDFE; transition: border-color .15s, box-shadow .15s;
	min-height: 48px;
}
.bw-page .bw-audit-form input:focus {
	outline: none; border-color: var(--bw-blue); box-shadow: 0 0 0 3px rgba(23, 120, 242, .14); background: #fff;
}
.bw-page .bw-audit-form .frm_required { color: var(--bw-pink); }
.bw-page .bw-audit-form .frm_error { color: #C4362F; font-size: .84rem; margin-top: 4px; }
.bw-page .bw-audit-form .frm_blank_field input { border-color: #E2938E; background: #FEF7F6; }
.bw-page .bw-audit-form .frm_submit { margin: 6px 0 0; }
/*
 * Formidable colours its submit via `.frm_forms.with_frm_style .frm_submit button`
 * - three classes plus an element, which out-specifies a three-class selector and
 * was rendering this button in Formidable's default blue. Matching that structure
 * plus the form class puts the brand colour back without resorting to !important.
 */
.bw-page .frm_forms.with_frm_style .bw-audit-form .frm_submit button,
.bw-page .bw-audit-form .frm_submit button.frm_button_submit,
.bw-page .bw-audit-form .frm_button_submit {
	width: 100%; background-color: var(--bw-blue); background-image: none;
	color: #fff; border: 0; border-radius: 999px;
	padding: 17px 28px; font-family: inherit; font-size: 1.12rem; font-weight: 700; cursor: pointer;
	min-height: 56px; transition: background-color .18s ease, transform .18s ease;
	box-shadow: 0 8px 22px rgba(23, 120, 242, .3);
}
.bw-page .frm_forms.with_frm_style .bw-audit-form .frm_submit button:hover,
.bw-page .bw-audit-form .frm_submit button.frm_button_submit:hover,
.bw-page .bw-audit-form .frm_button_submit:hover {
	background-color: var(--bw-blue-dk); transform: translateY(-1px);
}
.bw-page .bw-audit-form .frm_message { color: var(--bw-ink); }
.bw-formcard__fine { font-size: .87rem; color: #7F8899; margin: 16px 0 0; line-height: 1.55; }

/* ---------- FAQ (native details — no JS) ---------- */
.bw-faq { max-width: 860px; margin: 0 auto; }
.bw-faq details {
	background: #fff; border: 1px solid var(--bw-line); border-radius: var(--bw-radius);
	margin-bottom: 12px; overflow: hidden;
}
.bw-faq summary {
	cursor: pointer; padding: 19px 52px 19px 22px; font-weight: 600; color: var(--bw-ink);
	position: relative; list-style: none; font-size: 1.01rem; line-height: 1.45;
}
.bw-faq summary::-webkit-details-marker { display: none; }
.bw-faq summary::after {
	content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
	font-size: 1.5rem; font-weight: 400; color: var(--bw-pink); line-height: 1;
}
.bw-faq details[open] summary::after { content: '–'; }
.bw-faq details[open] summary { border-bottom: 1px solid var(--bw-line); }
.bw-faq summary:focus-visible { outline: 3px solid rgba(23,120,242,.35); outline-offset: -3px; }
.bw-faq .bw-faq__a { padding: 18px 22px 21px; font-size: .98rem; }
.bw-faq .bw-faq__a p:last-child { margin-bottom: 0; }

/* ---------- final CTA ---------- */
.bw-final { background: linear-gradient(135deg, var(--bw-pink) 0%, #E2544B 100%); color: #fff; }
.bw-final h2 { color: #fff; }
.bw-final .bw-lede { color: rgba(255,255,255,.94); }
.bw-final .bw-btn--primary > a { background: #fff; color: var(--bw-pink-dk); box-shadow: 0 10px 26px rgba(0,0,0,.16); }
.bw-final .bw-btn--primary > a:hover { background: #FFF4F3; }
.bw-final .bw-btn--wa > a { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); }
.bw-final .bw-btn--wa > a:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.bw-final__contact { margin: 28px 0 0; font-size: 1rem; }
.bw-final__contact a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- internal link row ---------- */
.bw-links { font-size: .95rem; }
.bw-links a { color: var(--bw-blue); text-decoration: underline; text-underline-offset: 2px; }

/*
 * Inline CTA bands.
 * On desktop the heading and the buttons sit on one row: text left, buttons right.
 * Grid rather than flex so the second band (heading + supporting line + buttons)
 * keeps its two text rows in column 1 while the buttons span both.
 */
@media (min-width: 900px) {
	.bw-page .bw-sec--tight.bw-center {
		display: grid;
		/* auto auto + centred justification sizes both columns to their content and
		   centres the pair, so the heading and button sit together. A 1fr text column
		   would absorb the leftover width and shove the button out to the far edge. */
		grid-template-columns: auto auto;
		justify-content: center;
		/* Rows declared explicitly on purpose. Without them the grid has no explicit
		   row lines, so a `grid-row: 1 / -1` on the buttons has nothing to resolve
		   against and the placement collapses - which is exactly what stacked them. */
		grid-template-rows: auto auto;
		align-items: center;
		column-gap: 26px;
		row-gap: 4px;
		text-align: left;
		/* the container is the grid, so constrain it here rather than per child */
		max-width: calc(var(--bw-max) + 48px);
		margin-left: auto;
		margin-right: auto;
		padding-top: 44px;
		padding-bottom: 44px;
	}
	/* band headings carry .bw-h3, which is also used on card titles - size these up
	   without dragging every card heading on the page with them */
	.bw-page .bw-sec--tight.bw-center > h2 {
		/* sized up to hold its own against the button beside it - at 1.72rem the
		   heading read as a caption next to a 56px-tall pill */
		font-size: clamp(1.5rem, 2.8vw, 2.1rem);
		line-height: 1.26;
	}
	.bw-page .bw-sec--tight.bw-center > .bw-lede { font-size: 1.1rem; }
	.bw-page .bw-sec--tight.bw-center > * {
		max-width: none;
		margin: 0;
	}
	.bw-page .bw-sec--tight.bw-center > h2 {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
		text-align: left;
		align-self: end;
	}
	.bw-page .bw-sec--tight.bw-center > h2.has-text-align-center { text-align: left; }
	.bw-page .bw-sec--tight.bw-center > .bw-lede {
		grid-column: 1;
		grid-row: 2;
		margin: 0;
		text-align: left;
		font-size: 1rem;
		align-self: start;
	}
	.bw-page .bw-sec--tight.bw-center > .bw-lede.has-text-align-center { text-align: left; }
	.bw-page .bw-sec--tight.bw-center > .bw-btns {
		grid-column: 2;
		grid-row: 1 / 3;
		margin: 0;
		align-self: center;
		justify-content: flex-end;
		flex-wrap: nowrap;
	}
	/* band with no supporting line: centre the heading against the button row */
	.bw-page .bw-sec--tight.bw-center > h2:only-of-type { align-self: center; }

	/*
	 * The band carrying two buttons stacks instead: text on one row, buttons on the
	 * next. Side by side, a two-button group left the text column too narrow - the
	 * heading broke onto two lines and both button labels wrapped inside their pills.
	 * :has(.bw-btn--wa) targets it precisely; the single-button band stays inline.
	 */
	.bw-page .bw-sec--tight.bw-center:has(.bw-btn--wa) {
		display: block;
		text-align: center;
	}
	.bw-page .bw-sec--tight.bw-center:has(.bw-btn--wa) > h2,
	.bw-page .bw-sec--tight.bw-center:has(.bw-btn--wa) > h2.has-text-align-center {
		text-align: center;
		margin: 0 auto;
	}
	.bw-page .bw-sec--tight.bw-center:has(.bw-btn--wa) > .bw-lede,
	.bw-page .bw-sec--tight.bw-center:has(.bw-btn--wa) > .bw-lede.has-text-align-center {
		text-align: center;
		margin: 8px auto 0;
	}
	.bw-page .bw-sec--tight.bw-center:has(.bw-btn--wa) > .bw-btns {
		justify-content: center;
		margin: 26px 0 0;
		flex-wrap: wrap;
	}
	/* "Who we work with" is tight but not a CTA band - keep it centred and stacked */
	.bw-page .bw-sec--tight:not(.bw-center) { padding-top: 56px; padding-bottom: 56px; }
}

/* ---------- responsive ---------- */
@media (min-width: 700px) {
	.bw-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.bw-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.bw-out { grid-template-columns: repeat(2, 1fr); }
	/* title and body sit side by side once there is room for both */
	.bw-why__row { grid-template-columns: 250px minmax(0, 1fr); gap: 26px; }
	.bw-grid--4 { grid-template-columns: repeat(4, 1fr); }
	.bw-gal { grid-template-columns: repeat(3, 1fr); }
	.bw-reels { grid-template-columns: repeat(3, 1fr); }
	/* from 3 columns up there is a single free cell for it to occupy */
	.bw-reels .bw-galcta { grid-column: span 1; }
	.bw-row__notes li,
	.bw-row__key { grid-template-columns: 1fr 1fr; gap: 14px; }
	.bw-chips { grid-template-columns: repeat(4, 1fr); }
	.bw-chan { grid-template-columns: repeat(3, 1fr); }
	/* two case studies, not three */
	.bw-cs { grid-template-columns: repeat(2, 1fr); }
	.bw-quotes { grid-template-columns: repeat(3, 1fr); }
	.bw-formcard { padding: 34px 32px; }
	.bw-sec { padding: 92px 24px; }
	/* tight sections must stay tight - the shorthand above would otherwise reset them */
	.bw-page .bw-sec--tight { padding-top: 56px; padding-bottom: 56px; }
	.bw-hero { padding: 84px 24px 96px; }
}

@media (min-width: 1000px) {
	.bw-hero__grid { grid-template-columns: 1.08fr .92fr; gap: 56px; }
	.bw-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.bw-out { grid-template-columns: repeat(3, 1fr); }
	.bw-why { grid-template-columns: 400px minmax(0, 1fr); gap: 60px; }
	.bw-gal { grid-template-columns: repeat(4, 1fr); }
	/* fixed pair column: the creatives hold a readable ~225px each while the notes
	   take whatever is left, rather than both halves shrinking together */
	/* 588px = 470 + 25%. Each creative lands at ~289px instead of ~230px; the notes
	   column absorbs the difference rather than both halves rescaling. */
	.bw-row { grid-template-columns: 588px 1fr; align-items: center; padding: 18px; gap: 22px; }
	.bw-chan { grid-template-columns: repeat(5, 1fr); }
	.bw-reels { grid-template-columns: repeat(5, 1fr); }
	.bw-steps { grid-template-columns: repeat(5, 1fr); }
	.bw-steps > div { padding: 62px 20px 24px 20px; }
	.bw-steps > div::before { top: 20px; left: 20px; }
	.bw-audit__grid { grid-template-columns: .92fr 1.08fr; gap: 52px; }
}

/* ---------- motion & a11y ---------- */
@media (prefers-reduced-motion: reduce) {
	.bw-page *, .bw-page *::before, .bw-page *::after {
		animation-duration: .001ms !important; transition-duration: .001ms !important;
	}
	.bw-page .bw-btn > a:hover, .bw-page a.bw-btn:hover { transform: none; }
}

.bw-page a:focus-visible, .bw-page button:focus-visible, .bw-page summary:focus-visible {
	outline: 3px solid rgba(23, 120, 242, .45); outline-offset: 2px;
}
.bw-skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }