/*
Theme Name: BizWeb Design
Theme URI: https://bizwebdesign.com.au
Author: Biz Web Design
Author URI: https://bizwebdesign.com.au
Description: Single-page marketing homepage theme for Biz Web Design, a Perth marketing agency. Built from the "Biz Web Design homepage" design handoff — hero, selected-work carousel, services, process, industries and a free-business-review lead form.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bizweb
*/

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	/* Backgrounds */
	--paper: #fdfcfa;
	--paper-alt: #f4f2ed;
	--card-white: #ffffff;
	--sand: #f7ecd0;
	--sand-card: #fffdf7;
	--sand-border: #ecdcb4;
	--ink: #17181a;
	--ink-deep: #0d0f10;

	/* Text */
	--body-text: #4a5157;
	--body-text-sand: #55503f;
	--muted: #6a7175;
	--muted-light: #7b8288;
	--muted-lighter: #8a9096;
	--placeholder-grey: #a2a8ad;
	--border: #e8e5df;
	--border-light: #eeece7;
	--input-border: #d8d5ce;

	/* Accents */
	--signal-blue: #3aa0f5;
	--blue-hover: #1f8ae8;
	--blue-mid: #1668b0;
	--blue-dark: #0f4f8a;
	--blue-light: #6cb9f7;
	--blue-tint: #e8f3fe;
	--growth-teal: #2fc39e;
	--teal-dark: #1aa886;
	--teal-tint: #e3f7f1;
	--advisory-yellow: #f6c945;
	--yellow-dark: #e0ab1f;
	--yellow-tint: #fdf3d8;
	--sand-eyebrow: #8a6b16;
	--text-on-blue: #06131f;
	--text-on-dark: #fbfbfa;
	--text-on-dark-2: #dcdfe1;
	--text-on-dark-3: #c3c7ca;
	--error: #b3261e;

	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--font-sans: 'Instrument Sans', Helvetica, Arial, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, monospace;

	--gutter: clamp(20px, 4vw, 44px);
	--content-w: 1360px;
	--section-pad: clamp(64px, 8.5vw, 116px);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, video { max-width: 100%; }

a { color: var(--blue-mid); text-decoration: none; }
a:hover { color: var(--blue-dark); }

input, textarea, button { font-family: inherit; }

::selection { background: var(--signal-blue); color: var(--text-on-blue); }

h1, h2, h3, p, ul, ol, figure { margin: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link.screen-reader-text:focus {
	position: fixed !important;
	width: auto; height: auto;
	clip: auto;
	top: 10px; left: 10px;
	z-index: 999;
	background: var(--ink);
	color: var(--text-on-dark);
	padding: 10px 16px;
	border-radius: 6px;
	font-size: 14px;
}

.section-inner { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 16px;
	display: block;
}
.eyebrow--blue { color: var(--blue-mid); }
.eyebrow--sand { color: var(--sand-eyebrow); }
.eyebrow--on-dark { color: inherit; margin-bottom: 0; }
.eyebrow--accent-dark { color: var(--blue-light); }
.eyebrow--muted { color: var(--muted-light); max-width: 32ch; }

.pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-weight: 600;
	white-space: nowrap;
	border: none;
	cursor: pointer;
	text-align: center;
}
.pill--small { height: 40px; padding: 0 19px; font-size: 14.5px; }
.pill--large { height: 54px; padding: 0 28px; font-size: 16px; transition: transform 200ms var(--ease), background 200ms, box-shadow 200ms, border-color 200ms; }
.pill--primary { background: var(--signal-blue); color: var(--text-on-blue); }
.pill--primary:hover { background: var(--blue-hover); color: var(--text-on-blue); }
.pill--small.pill--primary:hover { transform: translateY(-1px); }
.pill--glow { box-shadow: 0 12px 32px rgba(58, 160, 245, 0.32); }
.pill--glow:hover { background: #5db2f8; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(58, 160, 245, 0.42); }
.pill--glow:active { transform: translateY(0); }
.pill--ghost { border: 1px solid rgba(251, 251, 250, 0.34); color: var(--text-on-dark); background: transparent; }
.pill--ghost:hover { border-color: var(--text-on-dark); background: rgba(251, 251, 250, 0.1); color: var(--text-on-dark); }
.pill--ink { height: 48px; padding: 0 22px; background: var(--ink); color: var(--text-on-dark); font-size: 15px; transition: transform 200ms var(--ease); }
.pill--ink:hover { transform: translateY(-2px); color: var(--text-on-dark); }

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes bwd-pulse { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes bwd-scrollhint { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes bwd-hero-word { from { opacity: 0; transform: translateY(38px) rotate(1.2deg); } to { opacity: 1; transform: none; } }
@keyframes bwd-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes bwd-parallax { from { transform: translateY(0) scale(1.08); } to { transform: translateY(14%) scale(1.16); } }
@keyframes bwd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bwd-blob-a { 0% { transform: translate3d(-6%, -4%, 0) scale(1); } 50% { transform: translate3d(10%, 8%, 0) scale(1.25); } 100% { transform: translate3d(-6%, -4%, 0) scale(1); } }
@keyframes bwd-blob-b { 0% { transform: translate3d(8%, 6%, 0) scale(1.15); } 50% { transform: translate3d(-8%, -6%, 0) scale(0.95); } 100% { transform: translate3d(8%, 6%, 0) scale(1.15); } }
@keyframes bwd-blob-c { 0% { transform: translate3d(0, 4%, 0) scale(1.05) rotate(0deg); } 50% { transform: translate3d(-10%, -8%, 0) scale(1.3) rotate(12deg); } 100% { transform: translate3d(0, 4%, 0) scale(1.05) rotate(0deg); } }

/* Reveal-on-scroll: JS (IntersectionObserver) toggles .is-visible.
   Chosen over CSS animation-timeline: view() so it also works in Safari. */
.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

.enter { opacity: 0; animation: bwd-rise 900ms var(--ease) both; animation-delay: var(--enter-delay, 0ms); }

.hero-word {
	display: inline-block;
	opacity: 0;
	animation: bwd-hero-word 1s var(--ease) both;
	animation-delay: var(--word-delay, 0ms);
}
.hero-word--accent { color: var(--blue-light); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal, .enter, .hero-word, .marquee__track, .process__blob, .hero__media {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 50;
	height: 70px;
	display: flex;
	align-items: center;
	color: var(--text-on-dark);
	background: transparent;
	border-bottom: 1px solid rgba(251, 251, 250, 0.14);
	transition: background 320ms ease, box-shadow 320ms ease, color 320ms ease, border-color 320ms ease;
}
.site-header.is-scrolled {
	background: rgba(253, 252, 250, 0.9);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	color: var(--ink);
	border-bottom-color: var(--border);
	box-shadow: 0 6px 24px rgba(23, 24, 26, 0.07);
}
.site-header__inner {
	width: 100%;
	max-width: var(--content-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: flex;
	align-items: center;
	gap: 28px;
}
.site-header__brand {
	display: flex;
	align-items: center;
	gap: 11px;
	color: inherit;
	flex-shrink: 0;
}
.site-header__wordmark {
	font-size: 18.5px;
	font-weight: 700;
	letter-spacing: -0.03em;
	white-space: nowrap;
	color: inherit;
}
.site-header__wordmark .is-light { font-weight: 400; opacity: 0.55; margin-left: 5px; }
.site-header__wordmark .is-muted { font-weight: 400; color: var(--muted-light); margin-left: 5px; }
.site-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.8vw, 28px);
	margin-left: auto;
	font-size: 14.5px;
	font-weight: 500;
}
.site-header__nav > a { color: inherit; }
.site-header__nav > a:not(.pill) { opacity: 0.78; white-space: nowrap; transition: opacity 180ms; }
.site-header__nav > a:not(.pill):hover { opacity: 1; color: inherit; }
.site-header__nav .pill--primary { transition: background 180ms, transform 180ms var(--ease); }
.site-header__nav .pill--primary:hover { transform: translateY(-1px); }

/* The design has no documented mobile-nav pattern; rather than let the
   three text links force an overflow/hamburger the handoff never
   specified, drop them below 680px and keep the one link that matters. */
@media (max-width: 680px) {
	.site-header__nav a:not(.pill) { display: none; }
	.site-header__inner { gap: 12px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	position: relative;
	min-height: 82vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 108px var(--gutter) clamp(56px, 7vh, 84px);
	background: var(--ink-deep);
}
.hero__media {
	position: absolute;
	inset: -12% 0;
	z-index: 0;
	animation: bwd-parallax linear both;
	animation-timeline: scroll(root);
	animation-range: 0 90vh;
}
.hero__poster, .hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero__video { opacity: 0; transition: opacity 400ms ease; }
.hero__video.is-ready { opacity: 1; }
.hero__scrim { position: absolute; z-index: 1; pointer-events: none; }
.hero__scrim--side {
	inset: 0;
	background: linear-gradient(100deg, rgba(9, 12, 14, 0.94) 0%, rgba(9, 12, 14, 0.82) 34%, rgba(9, 12, 14, 0.34) 68%, rgba(9, 12, 14, 0.12) 100%);
}
.hero__scrim--bottom {
	left: 0; right: 0; bottom: 0; height: 30%;
	background: linear-gradient(180deg, rgba(13, 15, 16, 0) 0%, rgba(13, 15, 16, 0.55) 60%, var(--paper) 100%);
}
.hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--content-w);
	margin: 0 auto;
	color: var(--text-on-dark);
}
.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 14px 7px 11px;
	border-radius: 999px;
	background: rgba(251, 251, 250, 0.1);
	border: 1px solid rgba(251, 251, 250, 0.18);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	margin-bottom: clamp(20px, 3.4vh, 32px);
}
.hero-badge__dot {
	width: 7px; height: 7px;
	border-radius: 999px;
	background: var(--growth-teal);
	animation: bwd-pulse 2.4s ease-in-out infinite;
}
.hero__title {
	margin: 0 0 clamp(18px, 2.6vh, 26px);
	font-size: clamp(40px, 7.6vw, 104px);
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 0.98;
	max-width: 16ch;
	text-wrap: balance;
}
.hero__subhead {
	margin: 0 0 clamp(26px, 4vh, 38px);
	font-size: clamp(16.5px, 1.45vw, 20px);
	line-height: 1.55;
	color: var(--text-on-dark-2);
	max-width: 50ch;
}
.hero__cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__scrollhint {
	position: absolute;
	bottom: 26px; left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: 22px; height: 34px;
	border-radius: 999px;
	border: 1px solid rgba(23, 24, 26, 0.28);
	display: flex;
	justify-content: center;
	padding-top: 7px;
}
.hero__scrollhint span {
	width: 3px; height: 8px;
	border-radius: 999px;
	background: var(--ink);
	animation: bwd-scrollhint 2s ease-in-out infinite;
}

@media (max-width: 640px) {
	.hero__scrollhint { display: none; }
}

/* ==========================================================================
   Selected work / marquee
   ========================================================================== */

.work-band {
	padding: clamp(56px, 7vw, 92px) 0;
	background: var(--paper-alt);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.work-band__header {
	max-width: var(--content-w);
	margin: 0 auto clamp(28px, 3.4vw, 40px);
	padding: 0 var(--gutter);
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: baseline;
	justify-content: space-between;
}
.work-band__header h2 {
	font-size: clamp(26px, 3.4vw, 42px);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.04;
	max-width: 22ch;
}
.work-band__note { font-size: 14.5px; color: var(--muted); max-width: 34ch; }

.marquee {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
	display: flex;
	width: max-content;
	gap: clamp(14px, 1.6vw, 22px);
	padding: 0 clamp(14px, 1.6vw, 22px);
	animation: bwd-marquee 60s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.work-card {
	flex: 0 0 auto;
	width: clamp(268px, 26vw, 352px);
	margin: 0;
	background: var(--card-white);
	border: 1px solid var(--border);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(23, 24, 26, 0.05);
}
.work-card__chrome {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border-light);
	background: #f7f6f3;
}
.work-card__chrome span { width: 8px; height: 8px; border-radius: 999px; background: #dcd8d0; }
.work-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; }
.work-card figcaption {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px 16px;
}
.work-card__name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.02em; }
.work-card__sector {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted-lighter);
	text-align: right;
}

/* ==========================================================================
   Services
   ========================================================================== */

.services { padding: var(--section-pad) var(--gutter); background: var(--paper); }
.section-head {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(32px, 4vw, 52px);
}
.section-head__main { flex: 1 1 420px; min-width: 280px; margin: 0; }
.section-head h2, .section-head__main.reveal { font-size: clamp(30px, 4.2vw, 54px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; max-width: 18ch; }
.section-head__aside { flex: 1 1 340px; min-width: 260px; margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--body-text); max-width: 48ch; }

.services__grid {
	display: grid;
	gap: clamp(14px, 1.6vw, 22px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 899px) { .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .services__grid { grid-template-columns: 1fr; } }

.service-card {
	position: relative;
	padding: 26px 24px 24px;
	background: var(--card-white);
	border: 1px solid var(--border);
	border-radius: 8px;
	transition: transform 260ms var(--ease), box-shadow 260ms, border-color 260ms;
}
.service-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(23, 24, 26, 0.09); border-color: var(--accent, var(--border)); }
.service-card--dark {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--text-on-dark);
	display: flex;
	flex-direction: column;
}
.service-card--dark:hover { box-shadow: 0 18px 38px rgba(23, 24, 26, 0.22); border-color: var(--ink); }
.service-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 46px; }
.service-card__chip { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; }
.service-card__index { font-family: var(--font-mono); font-size: 11.5px; color: var(--placeholder-grey); }
.service-card--dark .service-card__index { color: rgba(251, 251, 250, 0.5); }
.service-card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.025em; }
.service-card p { margin: 0; font-size: 15px; line-height: 1.58; color: var(--body-text); }
.service-card--dark p { color: var(--text-on-dark-3); margin-bottom: 18px; }
.service-card__link { margin-top: auto; font-size: 14.5px; font-weight: 600; color: var(--blue-light); }
.service-card__link:hover { color: #9ccffa; }

/* ==========================================================================
   Process
   ========================================================================== */

.process { position: relative; overflow: hidden; padding: var(--section-pad) var(--gutter); background: var(--sand); }
.process__blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.process__blob { position: absolute; border-radius: 50%; }
.process__blob--a { top: -22%; left: -14%; width: 62vw; height: 62vw; background: radial-gradient(circle at 40% 40%, rgba(58, 160, 245, 0.5), rgba(58, 160, 245, 0) 66%); filter: blur(52px); animation: bwd-blob-a 24s ease-in-out infinite; }
.process__blob--b { bottom: -30%; right: -12%; width: 58vw; height: 58vw; background: radial-gradient(circle at 55% 45%, rgba(47, 195, 158, 0.48), rgba(47, 195, 158, 0) 66%); filter: blur(58px); animation: bwd-blob-b 30s ease-in-out infinite; }
.process__blob--c { top: 14%; right: 18%; width: 40vw; height: 40vw; background: radial-gradient(circle at 50% 50%, rgba(246, 201, 69, 0.55), rgba(246, 201, 69, 0) 68%); filter: blur(46px); animation: bwd-blob-c 26s ease-in-out infinite; }

.process__layout {
	position: relative;
	z-index: 1;
	max-width: var(--content-w);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(36px, 5vw, 72px);
	align-items: flex-start;
}
.process__intro {
	flex: 1 1 320px;
	min-width: 290px;
	position: sticky;
	top: 104px;
	background: rgba(255, 253, 247, 0.82);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 12px;
	padding: clamp(22px, 2.4vw, 30px);
}
.process__intro h2 { margin: 0 0 18px; font-size: clamp(30px, 4.2vw, 54px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; max-width: 16ch; }
.process__intro p { margin: 0 0 26px; font-size: 16.5px; line-height: 1.6; color: var(--body-text-sand); max-width: 40ch; }

.process__steps { flex: 1 1 500px; min-width: 290px; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.4vw, 18px); }
.process-step {
	background: var(--sand-card);
	border: 1px solid var(--sand-border);
	border-radius: 8px;
	padding: clamp(22px, 2.6vw, 32px);
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	gap: clamp(14px, 1.8vw, 26px);
	align-items: start;
}
.process-step--dark { background: var(--ink); border-color: var(--ink); color: var(--text-on-dark); }
.process-step__number { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.process-step h3 { margin: 0 0 8px; font-size: clamp(20px, 2.1vw, 26px); font-weight: 600; letter-spacing: -0.03em; }
.process-step p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--body-text-sand); max-width: 56ch; }
.process-step--dark p { color: var(--text-on-dark-3); }

@media (max-width: 899px) {
	.process__intro { position: static; }
}

/* ==========================================================================
   Industries
   ========================================================================== */

.industries { padding: var(--section-pad) var(--gutter); background: var(--paper); }
.industries .section-head { margin-bottom: clamp(30px, 4vw, 48px); }
.industries .section-head__main { flex: 1 1 440px; max-width: 20ch; }
.industries .section-head__aside { flex: 1 1 320px; max-width: 46ch; }

.industries__grid {
	display: grid;
	gap: clamp(12px, 1.4vw, 18px);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 899px) { .industries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .industries__grid { grid-template-columns: 1fr; } }

.industry-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 10px;
	background: var(--ink);
	color: var(--text-on-dark);
	aspect-ratio: 4 / 5;
	transition: transform 320ms var(--ease), box-shadow 320ms;
}
.industry-tile:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(23, 24, 26, 0.18); }
.industry-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.industry-tile__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(13, 15, 16, 0.12) 0%, rgba(13, 15, 16, 0.34) 26%, rgba(13, 15, 16, 0.78) 55%, rgba(13, 15, 16, 0.96) 100%);
}
.industry-tile__caption {
	position: absolute; inset: auto 0 0 0;
	display: flex; flex-direction: column; gap: 6px;
	padding: 20px 20px 22px;
	color: inherit;
}
.industry-tile__title { font-size: 19px; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
.industry-tile__line { font-size: 14px; line-height: 1.45; color: var(--text-on-dark-2); }

/* ==========================================================================
   Review / form
   ========================================================================== */

.review { padding: var(--section-pad) var(--gutter); background: var(--ink); color: var(--text-on-dark); }
.review__layout { max-width: var(--content-w); margin: 0 auto; display: flex; flex-wrap: wrap; gap: clamp(36px, 5vw, 68px); align-items: flex-start; }
.review__intro { flex: 1 1 400px; min-width: 290px; }
.review__intro h2 { margin: 0 0 18px; font-size: clamp(30px, 4.2vw, 54px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.04; max-width: 18ch; }
.review__intro > p { margin: 0 0 30px; font-size: 16.5px; line-height: 1.6; color: var(--text-on-dark-3); max-width: 48ch; }

.review__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; max-width: 50ch; }
.review__points li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 13px; font-size: 15.5px; line-height: 1.55; color: var(--text-on-dark-2); }
.review__points li svg { margin-top: 7px; }

.review__card {
	flex: 1 1 400px;
	min-width: 290px;
	background: var(--paper);
	color: var(--ink);
	border-radius: 10px;
	padding: clamp(24px, 3vw, 36px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.review-form { display: grid; gap: 18px; }
.review-form__field { display: grid; gap: 7px; }
.review-form__field.is-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.review-form label { font-size: 13.5px; font-weight: 600; }
.review-form input, .review-form textarea {
	padding: 0 13px;
	border-radius: 6px;
	border: 1px solid var(--input-border);
	background: var(--card-white);
	color: var(--ink);
	font-size: 15.5px;
	outline: none;
}
.review-form input { height: 46px; }
.review-form textarea { padding: 11px 13px; line-height: 1.55; resize: vertical; }
.review-form input:focus, .review-form textarea:focus {
	border-color: var(--signal-blue);
	box-shadow: 0 0 0 3px rgba(58, 160, 245, 0.2);
}
.review-form__error, .review-form__server-error { font-size: 13px; color: var(--error); }
.review-form__submit { border: none; width: 100%; }
.review-form__submit:disabled { opacity: 0.7; cursor: progress; }
.review-form__hint { font-size: 12.5px; color: var(--muted); }

.review-success { display: grid; gap: 13px; padding: 20px 0; min-height: 300px; align-content: center; justify-items: start; }
.review-success h3 { font-size: 23px; font-weight: 600; letter-spacing: -0.025em; }
.review-success p { font-size: 15.5px; line-height: 1.6; color: var(--body-text); max-width: 38ch; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { padding: clamp(44px, 6vw, 76px) var(--gutter) 36px; background: var(--paper); border-top: 1px solid var(--border); }
.site-footer__top {
	max-width: var(--content-w);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
	justify-content: space-between;
	align-items: flex-start;
}
.site-footer__brand-row { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); }
.site-footer__col { display: grid; gap: 11px; align-content: start; }
.site-footer__col a, .site-footer__col span:not(.site-footer__heading) { font-size: 15px; color: #2b3035; }
.site-footer__heading { font-size: 13px; color: var(--muted-light); }
.site-footer__bottom {
	max-width: var(--content-w);
	margin: clamp(36px, 5vw, 56px) auto 0;
	padding-top: 22px;
	border-top: 1px solid var(--border);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	font-size: 13px;
	color: var(--muted-light);
}

/* ==========================================================================
   Focus visibility (dark blocks especially — see handoff notes)
   ========================================================================== */

a:focus-visible, button:focus-visible, .pill:focus-visible {
	outline: 2px solid var(--signal-blue);
	outline-offset: 2px;
	border-radius: 4px;
}
.review-form input:focus-visible, .review-form textarea:focus-visible { outline: none; }