/*
 * Global styles: design tokens, typography, layout, header/footer, shared utilities.
 * Source of truth: Qoob design system "colors_and_type.css" (Figma: QOOB · ALL BRAND MATERIALS · LIVE 2026).
 * Block-internal styles live in each /blocks/<name>/style.css — do NOT put them here.
 */

/* ---------- Poppins (self-hosted, subsetted woff2) ----------
   Only the four weights the design uses (400/500/600/700), subsetted to Latin +
   the punctuation the site needs, in woff2 — ~7KB each vs ~160KB per TTF.
   Per the design system, Poppins-Bold.ttf was never supplied upstream, so 700
   is generated from the ExtraBold master. font-display:swap keeps text visible
   during load (no invisible-text CLS). */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }

/* ---------- Design tokens ---------- */
:root {
	/* Primary palette */
	--coral:    #FF6C58;
	--teal:     #077972;
	--midnight: #16151E;
	--white:    #FFFFFF;

	/* Teal scale */
	--teal-1: #001210; --teal-2: #003531; --teal-3: #00524C; --teal-4: #006962;
	--teal-5: #077972; --teal-6: #4DAFA8; --teal-7: #99D9D4; --teal-8: #E6F7F6;

	/* Coral scale */
	--coral-1: #1A0400; --coral-2: #531408; --coral-3: #8C2A19; --coral-4: #C64734;
	--coral-5: #FF6C58; --coral-6: #FF8977; --coral-7: #FFB3A6; --coral-8: #FFEAE6;

	/* Aqua scale */
	--aqua-1: #000A1A; --aqua-2: #082453; --aqua-3: #19428C; --aqua-4: #3464C6;
	--aqua-5: #5889FF; --aqua-6: #77A4FF; --aqua-7: #A6C7FF; --aqua-8: #E6F0FF;

	/* Grey / neutral scale */
	--grey-1: #16151E; --grey-2: #3D3D44; --grey-3: #58575D; --grey-4: #7F7E83;
	--grey-5: #99999D; --grey-6: #C0C0C3; --grey-7: #DBDADC; --grey-8: #F5F5F5;

	/* Semantic roles */
	--bg:            var(--white);
	--bg-tint:       var(--grey-8);
	--bg-dark:       var(--midnight);
	--bg-dark-panel: var(--teal-3);
	--fg:            var(--midnight);
	--fg-muted:      var(--grey-3);
	--fg-subtle:     var(--grey-4);
	--fg-on-dark:    var(--white);
	--fg-on-dark-muted: rgba(255, 255, 255, 0.72);
	--accent:        var(--coral);
	--accent-press:  var(--coral-4);
	--link:          var(--coral-4);
	--link-on-dark:  var(--coral-6);
	--border:        #E8E5E5;
	--border-dark:   rgba(255, 255, 255, 0.12);
	--footer-bg:     #0e0d14;
	--success: var(--teal-5);
	--info:    var(--aqua-5);
	--warning: #E8A23D;
	--danger:  var(--coral-4);

	/* Type */
	--font-sans: "Poppins", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-display: "Poppins", system-ui, sans-serif;
	--w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700;

	/* Radii */
	--radius-pill: 100px;
	--radius-card: 20px;
	--radius-panel: 50px;
	--radius-sm: 11px;

	/* Spacing (8pt base) */
	--space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
	--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
	--space-9: 96px; --space-10: 120px;

	/* Elevation */
	--shadow-sm: 0 1px 2px rgba(22, 21, 30, 0.06);
	--shadow-md: 0 8px 24px rgba(22, 21, 30, 0.08);
	--shadow-lg: 0 24px 60px rgba(22, 21, 30, 0.12);
	--shadow-dark: 0 24px 60px rgba(0, 0, 0, 0.35);

	/* Motion */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 240ms;

	/* Layout */
	--qoob-content-width: 1600px;
	--qoob-gutter: clamp(20px, 4vw, 44px);
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	background: var(--bg);
	color: var(--fg);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
	overflow-x: hidden;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

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

a { color: var(--link); }

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

p, li, figcaption, blockquote, dd, dt {
	text-wrap: pretty;
}

/* ---------- Shared layout ---------- */
.qoob-container {
	max-width: var(--qoob-content-width);
	margin-inline: auto;
	padding-inline: var(--qoob-gutter);
}

/* Eyebrow / overline label used above headings across sections.
   Section blocks carry the 14px/.14em setting; hero-type blocks (hero,
   page-hero, the readiness-audit intro) step down to 13px/.15em via --sm. */
.qoob-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: var(--w-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--teal);
}

.qoob-eyebrow--sm {
	font-size: 13px;
	letter-spacing: 0.15em;
}

.qoob-eyebrow--coral,
.qoob-eyebrow--on-dark { color: var(--coral-6); }

/* ---------- Breadcrumb ----------
   Rendered by qoob_breadcrumb() (inc/helpers.php). Shared component rather than
   block internals, so it lives here. */
.qoob-breadcrumb {
	margin: 0 0 26px;
	font-size: 13px;
	line-height: 1.4;
}

.qoob-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qoob-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.qoob-breadcrumb__link {
	color: var(--grey-3);
	text-decoration: none;
}

.qoob-breadcrumb__link:hover {
	color: var(--midnight);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.qoob-breadcrumb__current {
	color: var(--grey-4);
	/* Long post titles are the last crumb; keep them to one line. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 46ch;
}

.qoob-breadcrumb__sep {
	margin: 0 10px;
	color: var(--grey-6);
}

/* On the dark hero grounds. */
.qoob-breadcrumb--on-dark .qoob-breadcrumb__link { color: rgba(255, 255, 255, 0.62); }
.qoob-breadcrumb--on-dark .qoob-breadcrumb__link:hover { color: #fff; }
.qoob-breadcrumb--on-dark .qoob-breadcrumb__current { color: rgba(255, 255, 255, 0.86); }
.qoob-breadcrumb--on-dark .qoob-breadcrumb__sep { color: rgba(255, 255, 255, 0.3); }

@media (max-width: 560px) {
	.qoob-breadcrumb { margin-bottom: 20px; }
	.qoob-breadcrumb__sep { margin: 0 7px; }
	.qoob-breadcrumb__current { max-width: 24ch; }
}

/* Section heading scale used across the site */
.qoob-heading-xl {
	font-weight: var(--w-medium);
	letter-spacing: -0.022em;
	line-height: 1.02;
	margin: 0;
	font-size: clamp(38px, 4.2vw, 62px);
}

.qoob-heading-lg {
	font-weight: var(--w-medium);
	letter-spacing: -0.018em;
	line-height: 1.04;
	margin: 0;
	font-size: clamp(34px, 3.8vw, 52px);
}

.qoob-heading-md {
	font-weight: var(--w-medium);
	letter-spacing: -0.014em;
	line-height: 1.08;
	margin: 0;
	font-size: clamp(26px, 2.6vw, 36px);
}

.qoob-lede {
	font-size: 20px;
	line-height: 1.55;
	color: var(--fg-muted);
}

/* ---------- Buttons (pill) ---------- */
.qoob-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: var(--w-medium);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.24s var(--ease), background 0.22s var(--ease), color 0.22s var(--ease);
}

.qoob-btn:hover { transform: translateY(-2px); }

.qoob-btn--sm { height: 44px; padding: 0 22px; font-size: 15px; }
.qoob-btn--lg { height: 58px; padding: 0 36px; font-size: 17px; }

.qoob-btn--teal { background: var(--teal); color: #fff; }
.qoob-btn--coral { background: var(--coral); color: var(--midnight); }
.qoob-btn--midnight { background: var(--midnight); color: #fff; }
.qoob-btn--outline {
	background: transparent;
	border: 2px solid var(--midnight);
	color: var(--midnight);
}
.qoob-btn--outline:hover { background: var(--midnight); color: #fff; transform: none; }
.qoob-btn--outline-light {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.35);
	color: #fff;
}
.qoob-btn--outline-light:hover { border-color: #fff; }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--midnight);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	/* Auto-hide/reveal: initHeaderAutoHide() in main.js snaps the inline
	   transform between two states — none and translateY(-height) — once the
	   scroll has travelled far enough in one direction. The slide between them is
	   this transition's job, so it is load-bearing, not decoration: without it the
	   bar teleports. (It used to track the scroll 1:1 and there was deliberately no
	   transition, because the scroll itself supplied the motion.) The global
	   prefers-reduced-motion reset near the end of this file already zeroes
	   transition-duration, so reduced-motion users need nothing extra here. */
	transition: transform 0.24s var(--ease);
	/* Keep the bar on its own compositing layer so the slide stays off the main
	   thread — it is one full-width strip that moves over whatever content sits
	   beneath it, and it overlaps different sections as the page scrolls. */
	will-change: transform;
}

.site-header__inner {
	max-width: var(--qoob-content-width);
	margin: 0 auto;
	padding: 0 var(--qoob-gutter);
	height: 80px;
	display: flex;
	align-items: center;
	gap: 30px;
}

.site-header__logo { display: flex; align-items: center; }

.site-header__logo-mark {
	display: block;
	width: 90px;
	height: auto;
	color: #fff;
}

/* Animated wordmark. Each stroke draws itself in via stroke-dashoffset once on
   load, when main.js adds .is-animating. Each duration is proportional to that
   path's dash length (~0.002s per unit) so all four draw at the same apparent
   speed; scale them together. Longest run is 0.2s delay + 1.95s.
   There is deliberately no replay: the draw used to re-trigger on hover/tap, which
   also needed an .is-resetting class (a 0s snap back to the hidden offset, so that
   swapping back to .is-animating restarted the animation) and three keyframes that
   existed only for it. All of that is gone with the feature. */
.site-header__logo-mark .path1,
.site-header__logo-mark .path2,
.site-header__logo-mark .path3,
.site-header__logo-mark .path4 { stroke-dasharray: 1000; }

.site-header__logo.is-animating .path1 { stroke-dashoffset: -456; animation: qLogoDraw 0.9s linear forwards 0.2s; }
.site-header__logo.is-animating .path2 { stroke-dashoffset: 1000; animation: qLogoDraw 1.95s linear forwards 0.2s; }
.site-header__logo.is-animating .path3 { stroke-dashoffset: -336; animation: qLogoDraw 0.66s linear forwards 0.2s; }
.site-header__logo.is-animating .path4 { stroke-dashoffset: -456; animation: qLogoDraw 0.9s linear forwards 0.2s; }

@keyframes qLogoDraw { to { stroke-dashoffset: 0; } }

/* Reduced-motion users get a static, fully drawn logo. */
@media (prefers-reduced-motion: reduce) {
	.site-header__logo .path1,
	.site-header__logo .path2,
	.site-header__logo .path3,
	.site-header__logo .path4 {
		animation: none !important;
		stroke-dashoffset: 0 !important;
	}
}

.site-header__spacer { flex: 1; }
.site-header__cta { flex: none; }

/* Primary nav (desktop dropdowns) */
.qnav {
	display: flex;
	align-items: center;
	gap: 26px;
	font-size: 14.5px;
	font-weight: var(--w-medium);
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.82);
	list-style: none;
	margin: 0;
	padding: 0;
}

.qnav a { color: inherit; text-decoration: none; transition: color 0.18s ease; }
.qnav > .qnav-item > a:hover { color: #fff; }

/* Nested menu lists carry no list styling */
.qnav-menu-list,
.qnav-submenu-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.qnav-menu-list > li,
.qnav-submenu-list > li { margin: 0; }

.qnav-group { position: relative; }

.qnav-top {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	font: inherit;
	font-weight: var(--w-medium);
	padding: 0;
	transition: color 0.18s ease;
}

.qnav-group:hover .qnav-top { color: #fff; }
.qnav-caret { transition: transform 0.2s ease; flex: none; }
.qnav-group:hover .qnav-caret { transform: rotate(180deg); }

.qnav-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	padding-top: 14px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
	z-index: 60;
}

.qnav-group:hover .qnav-menu,
.qnav-group:focus-within .qnav-menu,
.qnav-group.is-open .qnav-menu { opacity: 1; visibility: visible; }

/* One surface, both levels. The third-level popout is the same card as the dropdown
   that owns it, so the two are declared together instead of as a pair of identical
   rules that can be changed one at a time and drift apart. Only the widths and the
   dropdown's open transition differ, below. */
.qnav-menu-inner,
.qnav-submenu-inner {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(22, 21, 30, 0.22);
	padding: 10px;
}

.qnav-menu-inner {
	min-width: 256px;
	transform: translateY(6px);
	transition: transform 0.2s ease;
}

.qnav-group:hover .qnav-menu-inner,
.qnav-group.is-open .qnav-menu-inner { transform: translateY(0); }

.qnav-group.is-open .qnav-caret { transform: rotate(180deg); }

.qnav-menu-inner a,
.qnav-submenu-inner a {
	display: block;
	padding: 11px 14px;
	border-radius: 10px;
	color: var(--midnight);
	text-decoration: none;
	font-weight: var(--w-medium);
	font-size: 14.5px;
}

/* Kept at (0,2,1) to match the mobile override further down, which relies on source
   order to win. Scoping either of these to a block root would strand the other. */
.qnav-menu-inner a:hover,
.qnav-submenu-inner a:hover { background: var(--grey-8); }

.qnav-sub {
	display: block;
	font-size: 12.5px;
	font-weight: var(--w-regular);
	color: var(--grey-3); /* WCAG AA: grey-4 fails at this size on white */
	margin-top: 2px;
}

.qnav-sub-group { position: relative; }

.qnav-has-sub { display: flex !important; align-items: center; gap: 8px; }
.qnav-has-sub-label { flex: 1; min-width: 0; }

/* Trailing chevron: the only visual sign that this row opens a third level.
   grey-3 rather than the lighter grey-4 — it is the sole indicator that a submenu
   exists, so 1.4.11's 3:1 applies (grey-3 on white is 7.2:1, grey-4 only 4.0:1),
   and at 13px the lighter tone reads as an artefact rather than an affordance. It
   matches the subtitle beneath it, which places it as secondary to the label
   without disappearing. */
.qnav-arrow {
	flex: none;
	color: var(--grey-3);
	transition: transform 0.18s var(--ease), color 0.18s ease;
}

/* Keep the parent row tinted for exactly as long as its popout is open. The
   popout is a sibling of the <a>, not a child, so plain `a:hover` drops the tint
   the moment the pointer crosses into it — the panel was then left floating with
   nothing tying it back to the row it belongs to. Hover/focus-within on the <li>
   is the same condition that reveals the popout, so the two cannot disagree.

   (0,3,0) — deliberately above `.qnav-menu-inner a:hover` (0,2,1), which would
   otherwise win on source order. */
.qnav-sub-group:hover > .qnav-has-sub,
.qnav-sub-group:focus-within > .qnav-has-sub {
	background: var(--grey-8);
}

.qnav-sub-group:hover > .qnav-has-sub .qnav-arrow,
.qnav-sub-group:focus-within > .qnav-has-sub .qnav-arrow {
	color: var(--midnight);
	transform: translateX(2px);
}

.qnav-submenu {
	position: absolute;
	top: -11px;
	left: 100%;
	padding-left: 9px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
	z-index: 61;
}

.qnav-sub-group:hover .qnav-submenu,
.qnav-sub-group:focus-within .qnav-submenu { opacity: 1; visibility: visible; }

/* Surface, link styling and hover all come from the shared rules above. Only the
   width and the shadow differ.

   The shadow has to differ. The shared `0 20px 50px` has no horizontal offset, and
   the popout's left edge lands 2px INSIDE the parent panel's right edge (`left: 100%`
   puts it at the row's edge, which is already inside the panel's 10px padding and
   1px border), so 50px of blur fell straight back across the parent's white fill —
   measurably darkening it from 255 to 231 over its rightmost ~48px, 20px lower down.
   That grey band looked like a background colour rather than a shadow.

   Offsetting right and pulling the spread in keeps a real shadow — the popout still
   sits above the page, and light from the upper left is what you would expect of a
   panel stacked to the right — while leaving the parent clean: measured spill drops
   from 24/255 to 4/255, i.e. invisible. Anything tighter means no shadow at all.

   Do not "simplify" this back into the shared rule above. */
.qnav-submenu-inner {
	min-width: 248px;
	box-shadow: 10px 18px 30px -10px rgba(22, 21, 30, 0.22);
}

/* Mobile nav toggle */
.site-header__toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 10px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex: none;
}

/* Solid scrim behind the mobile/tablet menu. Hidden and non-interactive by
   default; the mobile media query shows it when the header is open. Sits at
   z-index 49 — below the sticky header (50) so the bar and menu stay above it,
   above the page content. Uses the menu background so, when shown, the page
   underneath is completely hidden rather than merely dimmed. */
.site-header__overlay {
	position: fixed;
	inset: 0;
	z-index: 49;
	background: var(--midnight);
	visibility: hidden;
	pointer-events: none;
}

@media (max-width: 1120px) {
	.site-header__nav {
		display: none;
		position: absolute;
		top: 80px;
		left: 0;
		right: 0;
		background: var(--midnight);
		padding: 10px var(--qoob-gutter) 24px;
		max-height: calc(100vh - 80px);
		overflow-y: auto;
	}

	.site-header--open .site-header__nav { display: block; }
	/* Right-align the burger. The flex spacer only exists to push the desktop
	   CTA over, and the CTA is hidden here, so drop it and let the toggle's
	   auto margin claim the space. */
	.site-header__toggle { display: inline-flex; margin-left: auto; }
	.site-header__spacer { display: none; }

	/* Show the scrim only while the menu is open on mobile/tablet. */
	.site-header--open ~ .site-header__overlay {
		visibility: visible;
		pointer-events: auto;
	}

	.qnav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		white-space: normal;
	}

	.qnav > .qnav-item > a,
	.qnav-top {
		display: flex;
		width: 100%;
		/* Push the caret to the right edge so the row reads as an accordion. */
		justify-content: space-between;
		padding: 14px 2px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		font-size: 16px;
	}

	/* No trailing divider under the last top-level link. */
	.qnav > .qnav-item:last-child > a,
	.qnav > .qnav-item:last-child > .qnav-top {
		border-bottom: 0;
	}

	.qnav-menu,
	.qnav-submenu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		padding: 0 0 0 14px;
	}

	/* Stub parents (a top-level group is a <button> with no URL of its own)
	   collapse into a tap-to-expand accordion on mobile. The JS toggles
	   .is-open on the .qnav-top button; here that drives the open/close.
	   Nested submenus stay open within an expanded group. */
	.qnav-menu { display: none; }
	.qnav-group.is-open .qnav-menu { display: block; }

	.qnav-menu-inner,
	.qnav-submenu-inner {
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0;
		min-width: 0;
		transform: none;
	}

	.qnav-menu-inner a,
	.qnav-submenu-inner a { color: rgba(255, 255, 255, 0.82); }
	.qnav-menu-inner a:hover,
	.qnav-submenu-inner a:hover { background: rgba(255, 255, 255, 0.06); }
	.qnav-sub { color: rgba(255, 255, 255, 0.5); }

	/* Nothing pops out here — the submenu is static and already listed, indented,
	   directly beneath its parent — so a "there is more to the side" arrow would
	   point at nothing. */
	.qnav-arrow { display: none; }

	/* Same specificity as the desktop rule (0,3,0), or its light-mode grey would
	   land on this dark panel. Restated rather than zeroed so the row keeps its own
	   hover feedback. */
	.qnav-sub-group:hover > .qnav-has-sub,
	.qnav-sub-group:focus-within > .qnav-has-sub {
		background: rgba(255, 255, 255, 0.06);
	}

	.site-header__cta { display: none; }
}

/* ---------- Footer ---------- */
.site-footer {
	background: var(--footer-bg);
	color: #fff;
	padding: 80px 0 40px;
}

.site-footer__inner {
	max-width: var(--qoob-content-width);
	margin: 0 auto;
	padding: 0 var(--qoob-gutter);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
	gap: 48px;
	padding-bottom: 54px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 980px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.site-footer__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* `width: auto` so the width comes from the file's own 263x123 ratio rather than an attribute
   that can disagree with it — see the note in footer.php. */
.site-footer__logo { width: auto; height: 26px; margin-bottom: 22px; }

.site-footer__blurb {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
	max-width: 320px;
}

.site-footer__title {
	font-size: 14px;
	font-weight: var(--w-bold);
	letter-spacing: 0.04em;
	margin: 0 0 18px;
}

.site-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.72);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__menu a { color: inherit; text-decoration: none; }
.site-footer__menu a:hover { color: #fff; }

.site-footer__newsletter-text {
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
	margin: 0 0 16px;
}

/* ---------- Footer newsletter — a seeded Contact Form 7 form ----------
   Rendered by [qoob_form key="newsletter" class="qoob-newsletter-form"], so the wrapper is NOT
   `.qoob-form`: that one is the light-page form at 50px fields on white, and inheriting it here
   would mean overriding almost every declaration at a higher specificity than main.css uses for
   them. This is a different design on a different ground, styled from scratch.

   What has to be beaten is Contact Form 7's own stylesheet, which IS loaded (`contact-form-7-css`
   in the served <head>). Its response-output rule reaches `.wpcf7 form .wpcf7-response-output`
   at (0,3,1), so the rules below carry the wrapper plus the same chain. Its
   `.wpcf7 .hidden-fields-container` and `.wpcf7 .screen-reader-response` already do the right
   thing and are left alone. */
.qoob-newsletter-form__row {
	display: flex;
	gap: 0;
	margin: 0;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-pill);
	padding: 5px 5px 5px 20px;
	max-width: 320px;
}

/* CF7 wraps every control in a span of its own, so the span is what has to stretch. */
.qoob-newsletter-form__row .wpcf7-form-control-wrap {
	display: flex;
	flex: 1;
	min-width: 0;
}

.qoob-newsletter-form__row input[type="email"] {
	flex: 1;
	min-width: 0;
	width: 100%;
	background: transparent;
	border: 0;
	color: #fff;
	font-family: inherit;
	font-size: 14.5px;
}

.qoob-newsletter-form__row input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

/* The circular arrow. CF7 emits `<input type="submit">`, which cannot contain an SVG, so the
   arrow is a background image and the value text is hidden — the accessible name of a submit is
   its `value` attribute, which is unaffected by how the text renders, so "Subscribe" is still
   what a screen reader announces. */
.qoob-newsletter-form__row input[type="submit"] {
	flex: none;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--coral);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%2316151E' stroke-width='2.4'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	color: transparent;
	font-size: 0;
	cursor: pointer;
	transition: transform 0.24s var(--ease);
}

.qoob-newsletter-form__row input[type="submit"]:hover {
	transform: translateX(2px);
}

/* CF7's spinner is `visibility: hidden` until submitting, but it still occupies its 24px plus
   margins — measured, it took 34px out of a 320px pill and left the field narrower than the
   design for the sake of something invisible. Removed from the row entirely; the submitting
   state is shown on the button instead, using CF7's own `form.submitting` class. */
.qoob-newsletter-form .wpcf7-spinner {
	display: none;
}

.qoob-newsletter-form form.submitting input[type="submit"] {
	opacity: 0.55;
}

.qoob-newsletter-form__consent {
	max-width: 320px;
	margin: 14px 0 0;
}

/* `.wpcf7-list-item` ships `display: inline-block; margin: 0 0 0 1em` — the indent has to go or
   the consent no longer lines up with the field above it. */
.qoob-newsletter-form .wpcf7-acceptance .wpcf7-list-item {
	display: block;
	margin: 0;
}

.qoob-newsletter-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 12.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
}

.qoob-newsletter-form .wpcf7-acceptance input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 1px 0 0;
	accent-color: var(--coral);
	flex: none;
	cursor: pointer;
}

.qoob-newsletter-form .wpcf7-acceptance a {
	color: var(--coral-6);
}

/* Validation and submission feedback, recoloured for the dark ground. CF7's own colours are the
   admin palette — a #dc3232 red and a 2px #00a0d2 blue box.

   The per-field tip is hidden HERE ONLY. CF7 appends it inside the control's own wrap, which on
   this form is a flex item inside the pill — so it rendered across the placeholder and under the
   button. On a one-field form it has nothing to disambiguate anyway: the field turns coral and
   the response output below carries the message, whose copy is set in the seeded form
   (`validation_error` / `accept_terms`) precisely so it can be specific. The accessible error is
   untouched — it lives in CF7's `screen-reader-response` list and on `aria-invalid`. */
.qoob-newsletter-form .wpcf7-not-valid-tip {
	display: none;
}

.qoob-newsletter-form__row:has(.wpcf7-not-valid) {
	border-color: var(--coral-6);
}

.qoob-newsletter-form .wpcf7 form .wpcf7-response-output {
	max-width: 320px;
	margin: 14px 0 0;
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 12px;
	font-size: 12.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.82);
}

.qoob-newsletter-form .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--teal-6);
	color: #fff;
}

.qoob-newsletter-form .wpcf7 form.invalid .wpcf7-response-output,
.qoob-newsletter-form .wpcf7 form.unaccepted .wpcf7-response-output,
.qoob-newsletter-form .wpcf7 form.failed .wpcf7-response-output,
.qoob-newsletter-form .wpcf7 form.aborted .wpcf7-response-output,
.qoob-newsletter-form .wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--coral-6);
}

/* The admin placeholder from qoob_form_shortcode(), which is styled for a light page. */
.site-footer .qoob-form__notice {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
}

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 28px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.55);
}

.site-footer__legal {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.site-footer__legal a { color: inherit; text-decoration: none; }
.site-footer__legal a:hover { color: #fff; }

/* Sits alongside the legal links and should read as one of them, but it is a
   <button> because it opens the consent dialog rather than navigating. Strips the
   UA button chrome only — no outline here, so the shared :focus-visible ring
   still applies (it carries no specificity and any outline set here would
   silently replace it). */
.site-footer__legal .site-footer__cookie-settings {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.site-footer__legal .site-footer__cookie-settings:hover { color: #fff; }

.site-footer__social { display: flex; gap: 14px; }

.site-footer__social a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: border-color 0.2s ease;
}

.site-footer__social a:hover { border-color: #fff; }

/* ---------- Motion ---------- */
@keyframes qFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-13px); }
}

/* Half the track, which initLogoMarquee() keeps as a whole number of identical logo
   groups — it always clones an EVEN number — so the seam lands on a duplicate and
   the loop is invisible. Deliberately a percentage and not a measured pixel value:
   changing a custom property does not re-resolve a running animation's keyframes, so
   a px shift set from JS is ignored until the animation restarts. */
@keyframes qMarquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes qFadeIn {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

/* Scroll-reveal (elements opt in with data-reveal; main.js drives it) */
[data-reveal] {
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js [data-reveal]:not(.is-revealed) {
	opacity: 0;
	transform: translateY(30px);
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.js [data-reveal]:not(.is-revealed) {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Accessibility helpers ---------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	clip: auto;
	padding: 0.5rem 1rem;
	background: #fff;
	color: var(--midnight);
	z-index: 1000;
}

/* Visible keyboard focus (WCAG 2.2 · 2.4.7, 2.4.13). Uses the informational
   aqua accent, which contrasts on both light and dark surfaces. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--aqua-5);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Keep in-page anchor targets clear of the 80px sticky header (WCAG 2.2 ·
   2.4.11 focus not obscured; also fixes scroll-to-anchor landing position). */
:where([id]) {
	scroll-margin-top: 96px;
}

/* Minimum target size (WCAG 2.2 · 2.5.8). Desktop nav items are otherwise
   only as tall as their text. */
@media (min-width: 1121px) {
	.qnav > .qnav-item > a,
	.qnav-top {
		display: inline-flex;
		align-items: center;
		min-height: 24px;
		padding-block: 10px;
	}
}

/* Honour forced-colors / Windows high-contrast mode. */
@media (forced-colors: active) {
	.qoob-btn { border: 1px solid currentColor; }
}

/* ---------- Classic-template content (posts, archives, search, 404) ---------- */
.qoob-content-section {
	padding: clamp(48px, 7vw, 96px) 0;
}

/* Used where the section continues what the hero above started — the 404's routes out, the
   search results themselves — rather than opening a new subject. The full 96px on top of the
   band's own bottom padding reads as two unrelated pages. */
.qoob-content-section--tight {
	padding-top: clamp(30px, 3.5vw, 52px);
}

.qoob-measure {
	max-width: 760px;
	margin-inline: auto;
}

.entry-header {
	margin-bottom: 2rem;
}

.entry-title {
	font-weight: var(--w-medium);
	letter-spacing: -0.02em;
	line-height: 1.08;
	font-size: clamp(30px, 4vw, 48px);
	margin: 0 0 0.4em;
}

.entry-content {
	font-size: 18px;
	line-height: 1.7;
	color: var(--grey-2);
}

.entry-content > * + * { margin-top: 1.4em; }

.entry-content h2 { font-size: clamp(24px, 3vw, 32px); font-weight: var(--w-semibold); letter-spacing: -0.01em; line-height: 1.2; margin-top: 1.8em; }
.entry-content h3 { font-size: clamp(20px, 2.4vw, 26px); font-weight: var(--w-semibold); line-height: 1.25; margin-top: 1.6em; }

.entry-content a { color: var(--link); text-underline-offset: 3px; }

.entry-content img { border-radius: var(--radius-sm); }

.entry-content blockquote {
	margin: 1.6em 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--coral);
	font-size: 1.15em;
	line-height: 1.4;
	color: var(--fg);
}

/* Only archive.php uses these now: search.php and 404.php open with .qoob-tpl-hero below, and
   `.search-header`, `.search-title` and `.page-title` are in no template any more. */
.archive-header {
	padding: clamp(48px, 6vw, 80px) 0 0;
}

.archive-title {
	font-weight: var(--w-medium);
	letter-spacing: -0.02em;
	font-size: clamp(30px, 4vw, 48px);
	margin: 0 0 0.4em;
}

/* ---------- Classic-template hero (404, search results) ----------
   The same midnight band every inner page opens with, DUPLICATED from
   blocks/page-hero/style.css rather than reused — and that is not an oversight. WordPress
   enqueues a block's stylesheet only when the block renders, so on a 404 or a search-results
   page (no blocks at all) `.qoob-page-hero` would be an inert class name. Template-level
   components belong here; see CLAUDE.md.

   Measurements are the page-hero block's, so the two read as one design: 60/90 padding, the
   heading at clamp(40px, 4.6vw, 68px)/500, the sub at 20px on a 560px measure. If that block's
   hero changes, change this with it. */
/* 60/64, not the block's 60/90: on both these templates the band's last element is a search
   FIELD, not a paragraph. The block's 90px sits under a sentence and reads as air; under a
   control it reads as the page having ended, and it stacked with the next section's padding for
   186px of white before the first result. Measured, then trimmed. */
.qoob-tpl-hero {
	position: relative;
	overflow: hidden;
	padding: 60px 0 64px;
}

.qoob-tpl-hero--midnight {
	background: var(--midnight);
	color: #fff;
}

.qoob-tpl-hero .qoob-tpl-hero__inner {
	position: relative;
	max-width: var(--qoob-content-width);
}

.qoob-tpl-hero__eyebrow {
	margin-bottom: 14px;
}

.qoob-tpl-hero__heading {
	font-weight: var(--w-medium);
	letter-spacing: -0.022em;
	line-height: 1;
	margin: 0;
	font-size: clamp(40px, 4.6vw, 68px);
	color: inherit;
}

.qoob-tpl-hero__sub {
	font-size: 20px;
	line-height: 1.55;
	margin: 26px 0 0;
	max-width: 620px;
}

.qoob-tpl-hero--midnight .qoob-tpl-hero__sub {
	color: rgba(255, 255, 255, 0.78);
}

/* The result count. Smaller than a lede — it is a readout, not a sentence to read. */
.qoob-tpl-hero__meta {
	font-size: 17px;
	line-height: 1.5;
	margin: 18px 0 0;
}

.qoob-tpl-hero--midnight .qoob-tpl-hero__meta {
	color: rgba(255, 255, 255, 0.72);
}

/* The query itself, so the reader can see exactly what was searched — including a stray space
   or a typo, which is usually why nothing matched. */
.qoob-tpl-hero__query {
	color: #fff;
	font-weight: var(--w-medium);
}

.qoob-tpl-hero__query::before,
.qoob-tpl-hero__query::after {
	content: '\201C';
	color: rgba(255, 255, 255, 0.5);
}

.qoob-tpl-hero__query::after {
	content: '\201D';
}

.qoob-tpl-hero__search {
	margin-top: 30px;
	max-width: 620px;
}

.qoob-tpl-hero__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 28px;
	flex-wrap: wrap;
}

/* ---------- Search form ----------
   `.search-form` / `.search-field` / `.search-submit` had no rules anywhere, so
   `get_search_form()` shipped raw browser controls on the 404 and every empty archive. The
   submit is left as a plain .qoob-btn — nothing here touches it, so there is no tie to lose
   against the utility. Its 52px is the height the input matches. */
.qoob-searchform {
	display: flex;
	gap: 10px;
}

.qoob-searchform__input {
	flex: 1;
	min-width: 0;
	height: 52px;
	padding: 0 18px;
	border: 1.5px solid var(--grey-7);
	border-radius: 12px;
	background: #fff;
	font-family: inherit;
	font-size: 16px;
	color: var(--midnight);
	transition: border-color 0.18s var(--ease);
}

.qoob-searchform__input::placeholder { color: var(--grey-5); }

.qoob-searchform__input:hover { border-color: var(--grey-5); }

/* On the midnight band the field keeps its white fill — a dark field on a dark ground reads as
   disabled — but loses the grey hairline, which has nothing to sit against. */
.qoob-searchform--on-dark .qoob-searchform__input {
	border-color: transparent;
}

.qoob-searchform--on-dark .qoob-searchform__input:hover {
	border-color: rgba(255, 255, 255, 0.4);
}

.qoob-searchform__submit {
	flex: none;
}

@media (max-width: 560px) {
	/* Stacked, so neither the field nor the label-bearing button gets squeezed. */
	.qoob-searchform { flex-direction: column; }
	.qoob-searchform__submit { width: 100%; }
	/* `flex: 1` above is `flex: 1 1 0%`, and in a COLUMN container flex-basis is the height — so
	   the 52px height stopped applying and the field collapsed to its 27px content height.
	   Measured, not theorised. */
	.qoob-searchform__input { flex: none; }
}

/* ---------- Search results list ---------- */
.qoob-results-list {
	max-width: 860px;
}

.qoob-result {
	padding: 26px 0;
	border-bottom: 1px solid var(--border);
}

.qoob-result:first-child {
	padding-top: 0;
}

/* What kind of thing this is — Insight, Guide, Case Study. Site search spans every public post
   type, and the list really is mixed. */
.qoob-result__type {
	display: inline-flex;
	align-items: center;
	margin: 0 0 10px;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	background: var(--teal-8);
	font-size: 12px;
	font-weight: var(--w-medium);
	line-height: 1.2;
	color: var(--teal-3);
}

.qoob-result__title {
	margin: 0;
	font-size: 21px;
	font-weight: var(--w-semibold);
	letter-spacing: -0.012em;
	line-height: 1.25;
}

.qoob-result__title a {
	color: var(--midnight);
	text-decoration: none;
}

.qoob-result__title a:hover {
	color: var(--teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.qoob-result__excerpt {
	margin: 10px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--grey-2);
}

/* ---------- Empty state, and the way out of a dead end ---------- */
.qoob-no-results {
	max-width: 860px;
}

.qoob-no-results__heading {
	margin: 0;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: var(--w-semibold);
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--midnight);
}

.qoob-no-results__copy {
	margin: 14px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--grey-3);
}

.qoob-no-results__search {
	margin-top: 26px;
	max-width: 620px;
}

/* Same 860px column as the results list and the empty state, so the whole family of utility
   pages shares one measure. Without it the 404's grid ran four-across at 1600px while the
   empty state's ran three, because that one is nested inside .qoob-no-results. */
.qoob-helpful-links {
	max-width: 860px;
	margin-top: 42px;
}

.qoob-helpful-links__heading {
	margin: 0 0 22px;
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: var(--w-semibold);
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--midnight);
}

.qoob-helpful-links__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The shared card recipe: 1px hairline, 20px radius, no resting shadow, and the lift the two
   archives converged on. */
.qoob-helpful-links__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 22px 24px 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	background: #fff;
	text-decoration: none;
	transition: transform 0.26s var(--ease), box-shadow 0.26s var(--ease);
}

.qoob-helpful-links__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(22, 21, 30, 0.1);
}

.qoob-helpful-links__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: var(--w-semibold);
	letter-spacing: -0.01em;
	color: var(--midnight);
}

.qoob-helpful-links__arrow {
	flex: none;
	color: var(--coral);
	transition: transform 0.22s var(--ease);
}

.qoob-helpful-links__card:hover .qoob-helpful-links__arrow {
	transform: translateX(4px);
}

.qoob-helpful-links__desc {
	font-size: 15px;
	line-height: 1.5;
	color: var(--grey-3);
}

@media (prefers-reduced-motion: reduce) {
	.qoob-helpful-links__card:hover { transform: none; }
	.qoob-helpful-links__card:hover .qoob-helpful-links__arrow { transform: none; }
}

@media (max-width: 900px) {
	/* Must stay under the 60/64 base, or a narrower screen would ADD padding. */
	.qoob-tpl-hero { padding: 44px 0 50px; }
}

@media (max-width: 600px) {
	.qoob-tpl-hero { padding: 36px 0 42px; }
	.qoob-tpl-hero .qoob-tpl-hero__heading { font-size: clamp(30px, 8.6vw, 42px); }
	.qoob-tpl-hero .qoob-tpl-hero__sub { font-size: 17px; margin-top: 22px; }
	.qoob-result__title { font-size: 19px; }
}

.entry-summary-card {
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--border);
}

/* Pagination */
.pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2.5rem;
}

.pagination .page-numbers,
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75rem;
	border: 1px solid var(--border);
	border-radius: 10px;
	text-decoration: none;
	color: var(--fg);
}

.pagination .page-numbers.current {
	background: var(--midnight);
	color: #fff;
	border-color: var(--midnight);
}

/* ---------- Contact Form 7 (styled to the design's .qfield) ---------- */

/* A [qoob_form] standing on its own.
   Contact drops its form into the contact-panel block, which supplies the container
   and the white card. The Accelerator application page emits the shortcode straight
   into the page instead, so the form had no wrapper at all: full-bleed at x=0,
   touching the viewport edge, with no card and no vertical space. The controls were
   styled — the layout around them was not.
   Applied to every .qoob-form and switched off again inside contact-panel below, so
   any future standalone placement is covered rather than depending on the caller
   wrapping it correctly. */
.qoob-form {
	max-width: 820px;
	margin: 72px auto 96px;
	padding: 46px 44px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 24px;
	box-shadow: 0 18px 54px rgba(22, 21, 30, 0.08);
}

/* Inside the panel the card is the panel's job, and it manages its own width and
   its overlap of the hero — so take all of it back off. */
.qoob-contact-panel .qoob-form {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

@media (max-width: 900px) {
	.qoob-form {
		/* Match the gutter the rest of the page uses rather than sitting flush. */
		max-width: calc(100% - (var(--qoob-gutter) * 2));
		margin: 48px auto 64px;
		padding: 32px 24px;
	}
}

/* CF7's own stylesheet IS loaded (`contact-form-7-css` in the served <head>) — an earlier
   version of this comment said otherwise, which is worth knowing before adding a rule here:
   these exist to replace CF7's admin-palette defaults with the house design, not to substitute
   for a missing stylesheet.

   The hidden-fields rule below is the one exception. CF7 does cover it
   (`.wpcf7 .hidden-fields-container`), and this is kept only as insurance: its inputs (_wpcf7,
   _wpcf7_version, …) sit in a <fieldset>, which without it picks up the browser's default 2px
   groove border and renders as an empty box above the first field, on every form on the site. */
.qoob-form .hidden-fields-container {
	display: none;
}

/* Validation and submission messages. Without CF7's stylesheet these arrive as
   unstyled text, so the form had no error presentation at all. */
.qoob-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: var(--w-medium);
	/* The theme's semantic token, not a coral shade picked by eye: --danger is
	   #C64734, which clears AA on white at 4.83:1. The lighter corals used for links
	   on dark backgrounds (--coral-5/6) sit at 2.8:1 and 2.3:1 — unreadable here. */
	color: var(--danger);
}

.qoob-form input.wpcf7-not-valid,
.qoob-form select.wpcf7-not-valid,
.qoob-form textarea.wpcf7-not-valid {
	border-color: var(--danger);
}

/* Empty and aria-hidden until CF7 fills it, so it must not reserve space or draw a
   border in that state. */
.qoob-form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--border);
	border-radius: 10px;
	font-size: 14px;
}

.qoob-form form.init .wpcf7-response-output,
.qoob-form .wpcf7-response-output:empty {
	display: none;
}

.qoob-form form.invalid .wpcf7-response-output,
.qoob-form form.unaccepted .wpcf7-response-output,
.qoob-form form.payment-required .wpcf7-response-output {
	border-color: var(--danger);
	color: var(--danger);
}

.qoob-form form.sent .wpcf7-response-output {
	border-color: var(--success);
	color: var(--success);
}

.qoob-form label {
	display: block;
	font-size: 14px;
	font-weight: var(--w-semibold);
	color: var(--grey-2);
	margin-bottom: 8px;
}

.qoob-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.qoob-form-grid > p { margin: 0 0 18px; }

@media (max-width: 600px) {
	.qoob-form-grid { grid-template-columns: 1fr; gap: 0; }
}

.qoob-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.qoob-form select,
.qoob-form textarea {
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border: 1.5px solid var(--grey-7);
	border-radius: 12px;
	background: #fff;
	font-size: 15px;
	color: var(--midnight);
	transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.qoob-form textarea {
	height: auto;
	padding: 14px 16px;
	resize: vertical;
}

.qoob-form input:focus,
.qoob-form select:focus,
.qoob-form textarea:focus {
	outline: none;
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(7, 121, 114, 0.15);
}

.qoob-form ::placeholder { color: var(--grey-5); }

/* Qualifying questions rendered as pill-style radio groups */
.qoob-form-question__label {
	font-size: 15.5px;
	font-weight: var(--w-medium);
	color: var(--midnight);
	margin-bottom: 12px;
}

.qoob-form-question .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.qoob-form-question .wpcf7-list-item { margin: 0; }

.qoob-form-question .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	margin: 0;
	border: 1.5px solid var(--grey-6);
	border-radius: var(--radius-pill);
	font-size: 14.5px;
	font-weight: var(--w-medium);
	color: var(--grey-2);
	cursor: pointer;
	transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.qoob-form-question .wpcf7-list-item input { position: absolute; opacity: 0; }

.qoob-form-question .wpcf7-list-item input:checked + span {
	color: #fff;
}

/* Fallback: colour the whole label when checked (CF7 markup varies by version) */
.qoob-form-question .wpcf7-list-item label:has(input:checked) {
	background: var(--teal-3);
	border-color: var(--teal-3);
	color: #fff;
}

.qoob-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 54px;
	padding: 0 32px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--coral);
	color: var(--midnight);
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: var(--w-medium);
	cursor: pointer;
	transition: transform 0.24s var(--ease);
}

.qoob-form .wpcf7-submit:hover { transform: translateY(-2px); }

.qoob-form .wpcf7-acceptance {
	display: block;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--grey-3);
}

.qoob-form .wpcf7-acceptance a { color: var(--coral-4); font-weight: var(--w-medium); }

.qoob-form__notice {
	padding: 1rem 1.25rem;
	border: 1px dashed var(--grey-6);
	border-radius: 12px;
	color: var(--grey-3);
	background: var(--grey-8);
}

/* ---------- WordPress alignment/core compat ---------- */
.alignwide { max-width: var(--qoob-content-width); margin-inline: auto; }
.alignfull { width: 100%; max-width: none; }